first commit: StreamDock AI Monitor - Codex Desktop status display

2026-06-18 14:28:09 +08:00
commit 6a75b46453
22 changed files with 2881 additions and 0 deletions
@@ -0,0 +1,133 @@
+<!DOCTYPE html>
+<html lang="zh">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Codex Monitor</title>
+  <link rel="stylesheet" href="../utils/css/sdpi.css">
+  <style>
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      background: #1a1a2e;
+      color: #e0e0e0;
+      padding: 16px;
+      margin: 0;
+    }
+    .section {
+      margin-bottom: 16px;
+    }
+    .section label {
+      display: block;
+      font-size: 12px;
+      color: #888;
+      margin-bottom: 4px;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+    }
+    .section input[type="range"] {
+      width: 100%;
+      accent-color: #f59e0b;
+    }
+    .section input[type="number"] {
+      width: 100%;
+      padding: 6px 8px;
+      background: #16213e;
+      border: 1px solid #333;
+      border-radius: 6px;
+      color: #e0e0e0;
+      font-size: 13px;
+    }
+    .section .range-row {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+    .section .range-row span {
+      font-size: 12px;
+      color: #f59e0b;
+      min-width: 50px;
+      text-align: right;
+    }
+    .toggle {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      cursor: pointer;
+    }
+    .toggle input { display: none; }
+    .toggle .switch {
+      width: 40px; height: 22px;
+      background: #444;
+      border-radius: 11px;
+      position: relative;
+      transition: background 0.2s;
+    }
+    .toggle .switch::after {
+      content: '';
+      width: 18px; height: 18px;
+      background: #fff;
+      border-radius: 50%;
+      position: absolute;
+      top: 2px; left: 2px;
+      transition: transform 0.2s;
+    }
+    .toggle input:checked + .switch {
+      background: #f59e0b;
+    }
+    .toggle input:checked + .switch::after {
+      transform: translateX(18px);
+    }
+    .status-preview {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      padding: 12px;
+      background: #16213e;
+      border-radius: 8px;
+      margin-top: 8px;
+    }
+    .status-dot {
+      width: 12px; height: 12px;
+      border-radius: 50%;
+      background: #22c55e;
+    }
+    .status-dot.thinking { background: #f59e0b; }
+    .status-dot.working { background: #f59e0b; animation: pulse 0.8s infinite; }
+    .status-dot.error { background: #ef4444; }
+    @keyframes pulse {
+      0%, 100% { opacity: 1; }
+      50% { opacity: 0.3; }
+    }
+    .status-text {
+      font-size: 14px;
+      font-weight: 500;
+    }
+  </style>
+</head>
+<body>
+  <div class="section">
+    <label data-localize="PollInterval">轮询间隔 (ms)</label>
+    <div class="range-row">
+      <input type="range" id="pollInterval" min="500" max="5000" step="100" value="1000">
+      <span id="pollVal">1000ms</span>
+    </div>
+  </div>
+  <div class="section">
+    <label class="toggle">
+      <input type="checkbox" id="showHealth" checked>
+      <div class="switch"></div>
+      <span data-localize="ShowHealth">显示连接健康状态</span>
+    </label>
+  </div>
+  <div class="section">
+    <label>状态预览</label>
+    <div class="status-preview">
+      <div class="status-dot" id="statusDot"></div>
+      <div class="status-text" id="statusText">就绪</div>
+    </div>
+  </div>
+
+  <script src="../utils/action.js"></script>
+  <script src="index.js"></script>
+</body>
+</html>