169 lines
6.4 KiB
HTML
169 lines
6.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
<title>PicoClaw Dashboard</title>
|
|
<script src="https://telegram.org/js/telegram-web-app.js"></script>
|
|
<link rel="stylesheet" href="/miniapp/dist/app.css">
|
|
<link href="https://fonts.googleapis.com/css2?family=Silkscreen&display=swap" rel="stylesheet">
|
|
<script src="/miniapp/dist/map.js"></script>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="tabs">
|
|
<div class="tabs-inner">
|
|
<div class="tab-indicator"></div>
|
|
<button class="tab active" data-panel="plan">Plan</button>
|
|
<button class="tab" data-panel="git">Git</button>
|
|
<button class="tab" data-panel="skills">Skills</button>
|
|
<button class="tab" data-panel="session">Session</button>
|
|
<button class="tab" data-panel="config">Config</button>
|
|
<button class="tab" data-panel="dev">Dev</button>
|
|
<button class="tab" data-panel="orch">Orch</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="plan" class="panel active">
|
|
<div class="loading" id="plan-loading">Loading plan...</div>
|
|
<div id="plan-content" class="hidden"></div>
|
|
</div>
|
|
|
|
<div id="skills" class="panel">
|
|
<div class="loading" id="skills-loading">Loading skills...</div>
|
|
<div id="skills-list" class="hidden"></div>
|
|
</div>
|
|
|
|
<div id="session" class="panel">
|
|
<div class="loading" id="session-loading">Loading session...</div>
|
|
<div id="session-content" class="hidden"></div>
|
|
<div id="session-graph" class="hidden"></div>
|
|
<div id="context-content"></div>
|
|
</div>
|
|
|
|
<div id="config" class="panel">
|
|
<div class="card glass">
|
|
<div class="card-title">Quick Commands</div>
|
|
<div class="cmd-tiles">
|
|
<button class="cmd-tile glass glass-interactive" data-cmd="/session">/session</button>
|
|
<button class="cmd-tile glass glass-interactive" data-cmd="/skills">/skills</button>
|
|
<button class="cmd-tile glass glass-interactive" data-cmd="/plan clear">/plan clear</button>
|
|
</div>
|
|
</div>
|
|
<div class="card glass">
|
|
<div class="card-title">Custom Command</div>
|
|
<div style="display:flex;gap:8px;margin-top:8px">
|
|
<input id="custom-cmd" class="send-input glass glass-interactive" placeholder="/command args..." style="flex:1">
|
|
<button class="send-btn" onclick="sendCustomCmd()">Send</button>
|
|
</div>
|
|
</div>
|
|
<div class="card glass" id="logs-section">
|
|
<div style="display:flex;align-items:center;gap:8px;margin-bottom:8px">
|
|
<span class="card-title" style="margin:0">Logs</span>
|
|
<span id="logs-status" class="dev-target-dot"></span>
|
|
</div>
|
|
<div class="log-filter-chips">
|
|
<button class="log-filter-chip active" data-component="">All</button>
|
|
<button class="log-filter-chip" data-component="telego">Telego</button>
|
|
<button class="log-filter-chip" data-component="dev-console">Console</button>
|
|
</div>
|
|
<div id="logs-content"></div>
|
|
<div class="log-pagination">
|
|
<button class="log-page-btn" id="logs-page-prev" type="button">Newer</button>
|
|
<span id="logs-page-info">1/1 (0)</span>
|
|
<button class="log-page-btn" id="logs-page-next" type="button">Older</button>
|
|
</div>
|
|
<div class="log-actions">
|
|
<button class="log-snap-btn" onclick="saveLogSnapshot()">Save Snapshot</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="git" class="panel">
|
|
<div class="loading" id="git-loading">Loading git log...</div>
|
|
<div id="git-content" class="hidden"></div>
|
|
</div>
|
|
|
|
<div id="dev" class="panel">
|
|
<div id="dev-header" class="dev-header">
|
|
<span id="dev-dot" class="dev-target-dot"></span>
|
|
<span class="dev-header-title">Dev Preview</span>
|
|
<span id="dev-header-target" class="dev-header-target"></span>
|
|
</div>
|
|
<div id="dev-targets-list"></div>
|
|
<div id="dev-iframe-wrap" class="hidden" style="margin-top:8px">
|
|
<div class="card glass" style="padding:0;overflow:hidden">
|
|
<iframe id="dev-iframe" src="" style="width:100%;height:70vh;border:none;border-radius:16px"></iframe>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="orch" class="panel">
|
|
<div class="orch-room-row">
|
|
<div class="orch-side" id="orch-panel-left">
|
|
<div class="orch-badge alive" id="orch-badge-conductor">
|
|
<div class="orch-badge-emoji">👑</div>
|
|
<div class="orch-badge-label">CNDR</div>
|
|
<div class="orch-badge-dot"></div>
|
|
</div>
|
|
<div class="orch-badge" id="orch-badge-secretary">
|
|
<div class="orch-badge-emoji">👩💼</div>
|
|
<div class="orch-badge-label">SEC</div>
|
|
<div class="orch-badge-dot"></div>
|
|
</div>
|
|
<div class="orch-badge alive" id="orch-badge-heartbeat">
|
|
<div class="orch-badge-emoji">🕊️</div>
|
|
<div class="orch-badge-label">HB</div>
|
|
<div class="orch-badge-dot"></div>
|
|
</div>
|
|
</div>
|
|
<div class="orch-canvas-wrap">
|
|
<canvas id="orch-canvas" width="320" height="320"></canvas>
|
|
</div>
|
|
<div class="orch-side" id="orch-panel-right">
|
|
<div class="orch-badge" id="orch-badge-s0">
|
|
<div class="orch-badge-emoji">🔍</div>
|
|
<div class="orch-badge-label">SCOUT</div>
|
|
<div class="orch-badge-dot"></div>
|
|
</div>
|
|
<div class="orch-badge" id="orch-badge-s1">
|
|
<div class="orch-badge-emoji">📊</div>
|
|
<div class="orch-badge-label">ANLY</div>
|
|
<div class="orch-badge-dot"></div>
|
|
</div>
|
|
<div class="orch-badge" id="orch-badge-s2">
|
|
<div class="orch-badge-emoji">💻</div>
|
|
<div class="orch-badge-label">CODE</div>
|
|
<div class="orch-badge-dot"></div>
|
|
</div>
|
|
<div class="orch-badge" id="orch-badge-s3">
|
|
<div class="orch-badge-emoji">🔧</div>
|
|
<div class="orch-badge-label">WRKR</div>
|
|
<div class="orch-badge-dot"></div>
|
|
</div>
|
|
<div class="orch-badge" id="orch-badge-s4">
|
|
<div class="orch-badge-emoji">🎯</div>
|
|
<div class="orch-badge-label">CORD</div>
|
|
<div class="orch-badge-dot"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="orch-status">
|
|
<span class="orch-dot" id="orch-status-dot"></span>
|
|
<span id="orch-status-text">Connecting…</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="send-bar hidden" id="send-bar">
|
|
<input id="skill-msg" class="send-input glass glass-interactive" placeholder="Message for skill...">
|
|
<button class="send-btn" id="send-skill-btn" onclick="sendSkillCommand()">Send</button>
|
|
</div>
|
|
|
|
<script>
|
|
window.ORCH_ENABLED = {{if .OrchEnabled}}true{{else}}false{{end}};
|
|
</script>
|
|
<script src="/miniapp/dist/app.js"></script>
|
|
</body>
|
|
</html>
|
|
|
|
|