first commit: StreamDock AI Monitor - Codex Desktop status display
This commit is contained in:
@@ -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>
|
||||
@@ -0,0 +1,59 @@
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
const pollSlider = document.getElementById('pollInterval');
|
||||
const pollVal = document.getElementById('pollVal');
|
||||
const showHealthToggle = document.getElementById('showHealth');
|
||||
const statusDot = document.getElementById('statusDot');
|
||||
const statusText = document.getElementById('statusText');
|
||||
|
||||
// $settings is the SDK-provided settings proxy (auto-persists)
|
||||
$settings = $settings || {};
|
||||
|
||||
function applySettings(settings) {
|
||||
if (settings.pollInterval !== undefined) {
|
||||
pollSlider.value = settings.pollInterval;
|
||||
pollVal.textContent = settings.pollInterval + 'ms';
|
||||
}
|
||||
if (settings.showHealth !== undefined) {
|
||||
showHealthToggle.checked = settings.showHealth;
|
||||
}
|
||||
}
|
||||
|
||||
pollSlider.addEventListener('input', function () {
|
||||
const val = parseInt(this.value, 10);
|
||||
pollVal.textContent = val + 'ms';
|
||||
$settings.pollInterval = val;
|
||||
});
|
||||
|
||||
showHealthToggle.addEventListener('change', function () {
|
||||
$settings.showHealth = this.checked;
|
||||
});
|
||||
|
||||
// 监听插件传来的状态更新
|
||||
$websocket.on('sendToPropertyInspector', function (data) {
|
||||
if (data.payload && data.payload.status) {
|
||||
const st = data.payload.status;
|
||||
statusText.textContent = st;
|
||||
statusDot.className = 'status-dot';
|
||||
if (st.indexOf('Think') >= 0 || st.indexOf('思考') >= 0) statusDot.classList.add('thinking');
|
||||
else if (st.indexOf('Work') >= 0 || st.indexOf('执行') >= 0) statusDot.classList.add('working');
|
||||
else if (st.indexOf('Error') >= 0 || st.indexOf('错误') >= 0) statusDot.classList.add('error');
|
||||
else if (st.indexOf('Recon') >= 0 || st.indexOf('重连') >= 0) statusDot.classList.add('error');
|
||||
}
|
||||
});
|
||||
|
||||
// 初始化时加载已有设置
|
||||
if ($settings.pollInterval) applySettings($settings);
|
||||
else {
|
||||
$settings.pollInterval = 1000;
|
||||
$settings.showHealth = true;
|
||||
}
|
||||
|
||||
$websocket.on('didReceiveSettings', function (data) {
|
||||
applySettings(data.payload.settings);
|
||||
});
|
||||
|
||||
// 启用自动翻译
|
||||
$local = true;
|
||||
})();
|
||||
Reference in New Issue
Block a user