npm - @baimingtao/lbs-agent - Versions diffs - 1.0.0 - Mend

@baimingtao/lbs-agent 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1114) hide show

package/interfaces/web/legacy_web/index.html ADDED Viewed

@@ -0,0 +1,1259 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>🐾 Neko Orchestrator</title>
+<style>
+/* ═══ CSS Variables ═══ */
+:root {
+  --sakura: #FFB7C5;
+  --sakura-light: #FFD4DE;
+  --sakura-dark: #E89AA8;
+  --mint: #98D8C8;
+  --mint-light: #B8E8DC;
+  --mint-dark: #6FC4B0;
+  --cream: #FFF7FA;
+  --berry: #2B1828;
+  --berry-light: #4A2F45;
+  --violet: #6E5AA8;
+  --violet-light: #9080C8;
+  --honey: #FFB86B;
+  --green: #45D6A3;
+  --gray: #8A7A85;
+  --white: #FFFFFF;
+  --radius-card: 24px;
+  --radius-btn: 14px;
+  --radius-input: 16px;
+  --shadow-soft: 0 4px 20px rgba(255,183,197,0.15);
+  --shadow-mint: 0 4px 20px rgba(152,216,200,0.2);
+  --shadow-glow-sakura: 0 0 16px rgba(255,183,197,0.4);
+  --shadow-glow-mint: 0 0 16px rgba(152,216,200,0.4);
+  --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  --font-display: 'ZCOOL KuaiLe', 'Microsoft YaHei', sans-serif;
+  --font-body: 'Inter', 'MiSans', 'HarmonyOS Sans', 'Microsoft YaHei', sans-serif;
+  --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
+}
+* { margin: 0; padding: 0; box-sizing: border-box; }
+body {
+  font-family: var(--font-body);
+  background: linear-gradient(135deg, var(--cream) 0%, #FFF0F5 50%, #F0FFF8 100%);
+  color: var(--berry);
+  overflow: hidden;
+  height: 100vh;
+}
+/* ═══ Sakura Particles Background ═══ */
+#sakura-canvas {
+  position: fixed;
+  top: 0; left: 0;
+  width: 100%; height: 100%;
+  pointer-events: none;
+  z-index: 0;
+  opacity: 0.5;
+}
+/* ═══ Three-column Layout ═══ */
+.app {
+  display: flex;
+  height: 100vh;
+  position: relative;
+  z-index: 1;
+}
+/* ═══ Left Sidebar ═══ */
+.sidebar-left {
+  width: 280px;
+  min-width: 280px;
+  background: rgba(255,255,255,0.7);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border-right: 1px solid rgba(255,183,197,0.2);
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+}
+.logo {
+  padding: 20px 24px 16px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.logo-icon { font-size: 28px; }
+.logo-text {
+  font-family: var(--font-display);
+  font-size: 18px;
+  color: var(--berry);
+  letter-spacing: 0.5px;
+}
+.search-box {
+  margin: 0 16px 16px;
+  position: relative;
+}
+.search-box input {
+  width: 100%;
+  padding: 10px 14px 10px 36px;
+  border: 1.5px solid rgba(255,183,197,0.3);
+  border-radius: var(--radius-input);
+  background: rgba(255,255,255,0.6);
+  font-size: 13px;
+  color: var(--berry);
+  outline: none;
+  transition: var(--transition);
+}
+.search-box input:focus {
+  border-color: var(--mint);
+  box-shadow: var(--shadow-glow-mint);
+}
+.search-box input::placeholder { color: var(--gray); }
+.search-icon {
+  position: absolute;
+  left: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 14px;
+  opacity: 0.5;
+}
+.cmd-groups {
+  flex: 1;
+  padding: 0 12px 16px;
+}
+.cmd-group-title {
+  font-size: 11px;
+  font-weight: 700;
+  color: var(--gray);
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  padding: 12px 12px 8px;
+}
+.cmd-pill {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 14px;
+  margin: 2px 0;
+  border-radius: var(--radius-btn);
+  cursor: pointer;
+  transition: var(--transition);
+  border: 1.5px solid transparent;
+  position: relative;
+}
+.cmd-pill:hover {
+  background: rgba(152,216,200,0.12);
+  box-shadow: var(--shadow-glow-mint);
+}
+.cmd-pill.active {
+  background: linear-gradient(135deg, var(--mint) 0%, var(--mint-light) 100%);
+  color: var(--berry);
+  font-weight: 600;
+  box-shadow: var(--shadow-mint);
+}
+.cmd-pill.active::before {
+  content: '';
+  position: absolute;
+  left: -2px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--green);
+  box-shadow: 0 0 8px var(--green);
+}
+.cmd-icon { font-size: 16px; min-width: 20px; }
+.cmd-name { font-size: 13px; flex: 1; }
+.cmd-key {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  background: rgba(110,90,168,0.1);
+  color: var(--violet);
+  padding: 2px 6px;
+  border-radius: 4px;
+}
+/* ═══ Main Area ═══ */
+.main-area {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.global-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 24px;
+  border-bottom: 1px solid rgba(255,183,197,0.15);
+}
+.breadcrumb {
+  font-size: 12px;
+  color: var(--gray);
+}
+.breadcrumb span { color: var(--sakura-dark); }
+.bar-actions {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+}
+.bar-icon {
+  width: 32px; height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  cursor: pointer;
+  transition: var(--transition);
+  font-size: 16px;
+}
+.bar-icon:hover { background: rgba(255,183,197,0.15); }
+.avatar {
+  width: 32px; height: 32px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, var(--sakura) 0%, var(--mint) 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  font-size: 14px;
+  font-weight: 700;
+}
+/* ═══ Hero + Cat Spirit ═══ */
+.hero {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 24px;
+  padding: 20px 24px;
+  background: rgba(255,255,255,0.3);
+}
+.hero-text {
+  text-align: right;
+}
+.hero-title {
+  font-family: var(--font-display);
+  font-size: 20px;
+  color: var(--berry);
+}
+.hero-sub {
+  font-size: 12px;
+  color: var(--gray);
+  margin-top: 4px;
+}
+.cat-spirit {
+  position: relative;
+  width: 120px;
+  height: 120px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.cat-svg {
+  width: 80px;
+  height: 80px;
+  filter: drop-shadow(0 4px 12px rgba(255,183,197,0.3));
+}
+.cat-spirit.running .cat-svg {
+  animation: catBounce 1.5s ease-in-out infinite;
+}
+@keyframes catBounce {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-4px); }
+}
+.cat-spirit.running .ear-left { animation: earGlowL 2s ease-in-out infinite; }
+.cat-spirit.running .ear-right { animation: earGlowR 2s ease-in-out infinite; }
+@keyframes earGlowL {
+  0%, 100% { fill: var(--sakura); filter: drop-shadow(0 0 4px var(--sakura)); }
+  50% { fill: var(--mint); filter: drop-shadow(0 0 12px var(--mint)); }
+}
+@keyframes earGlowR {
+  0%, 100% { fill: var(--mint); filter: drop-shadow(0 0 4px var(--mint)); }
+  50% { fill: var(--sakura); filter: drop-shadow(0 0 12px var(--sakura)); }
+}
+.cat-status-capsules {
+  position: absolute;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  justify-content: center;
+  width: 160px;
+  top: -8px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.capsule {
+  font-family: var(--font-mono);
+  font-size: 9px;
+  padding: 2px 8px;
+  border-radius: 20px;
+  background: rgba(255,255,255,0.8);
+  border: 1px solid rgba(255,183,197,0.3);
+  color: var(--berry);
+  white-space: nowrap;
+}
+.capsule.running { color: var(--green); border-color: var(--green); }
+.capsule.error { color: var(--honey); border-color: var(--honey); }
+/* ═══ Chat Flow ═══ */
+.chat-flow {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+.msg-user {
+  align-self: flex-end;
+  max-width: 70%;
+  background: linear-gradient(135deg, var(--sakura-light) 0%, var(--sakura) 100%);
+  color: var(--berry);
+  padding: 12px 18px;
+  border-radius: 20px 20px 4px 20px;
+  font-size: 14px;
+  box-shadow: var(--shadow-soft);
+}
+.agent-card {
+  align-self: flex-start;
+  max-width: 85%;
+  background: rgba(255,255,255,0.75);
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(152,216,200,0.25);
+  border-radius: 20px 20px 20px 4px;
+  padding: 16px 20px;
+  box-shadow: var(--shadow-soft);
+  animation: fadeInUp 0.4s ease-out;
+}
+@keyframes fadeInUp {
+  from { opacity: 0; transform: translateY(10px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+.cmd-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 12px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid rgba(255,183,197,0.15);
+}
+.cmd-badge {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--violet);
+  background: rgba(110,90,168,0.08);
+  padding: 3px 10px;
+  border-radius: 8px;
+}
+.cmd-status {
+  font-size: 11px;
+  color: var(--green);
+  margin-left: auto;
+}
+.cmd-time {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--gray);
+}
+.tool-timeline {
+  margin: 12px 0;
+  padding-left: 20px;
+  border-left: 2px solid var(--mint);
+}
+.timeline-node {
+  position: relative;
+  padding: 6px 0 6px 16px;
+}
+.timeline-node::before {
+  content: '';
+  position: absolute;
+  left: -27px;
+  top: 12px;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: var(--mint);
+  border: 2px solid white;
+  box-shadow: 0 0 6px rgba(152,216,200,0.5);
+}
+.timeline-node.thinking::before { background: var(--gray); }
+.timeline-node.streaming::before { background: var(--sakura); }
+.timeline-label {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--berry);
+}
+.timeline-desc {
+  font-size: 11px;
+  color: var(--gray);
+  margin-top: 2px;
+}
+.timeline-tag {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  color: var(--violet);
+  background: rgba(110,90,168,0.06);
+  padding: 1px 6px;
+  border-radius: 4px;
+  margin-left: 6px;
+}
+.terminal-block {
+  background: var(--berry);
+  border-radius: 16px;
+  padding: 16px;
+  margin-top: 12px;
+  position: relative;
+  overflow: hidden;
+}
+.terminal-dots {
+  display: flex;
+  gap: 6px;
+  margin-bottom: 10px;
+}
+.terminal-dot {
+  width: 10px; height: 10px;
+  border-radius: 50%;
+}
+.terminal-dot:nth-child(1) { background: #FF5F56; }
+.terminal-dot:nth-child(2) { background: #FFBD2E; }
+.terminal-dot:nth-child(3) { background: #27C93F; }
+.terminal-copy {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  font-size: 10px;
+  color: rgba(255,255,255,0.4);
+  cursor: pointer;
+  padding: 4px 8px;
+  border-radius: 6px;
+  transition: var(--transition);
+}
+.terminal-copy:hover { color: rgba(255,255,255,0.8); background: rgba(255,255,255,0.1); }
+.terminal-code {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  line-height: 1.7;
+  color: #E0D0D8;
+}
+.term-cmd { color: var(--sakura); }
+.term-str { color: var(--mint); }
+.term-comment { color: rgba(255,255,255,0.3); }
+.term-keyword { color: var(--honey); }
+.term-number { color: var(--green); }
+/* ═══ Input Area ═══ */
+.input-area {
+  padding: 12px 24px 20px;
+  display: flex;
+  gap: 10px;
+}
+.input-main {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  background: rgba(255,255,255,0.7);
+  backdrop-filter: blur(10px);
+  border: 1.5px solid rgba(255,183,197,0.25);
+  border-radius: var(--radius-input);
+  padding: 4px 4px 4px 18px;
+  transition: var(--transition);
+}
+.input-main:focus-within {
+  border-color: var(--mint);
+  box-shadow: var(--shadow-glow-mint);
+}
+.input-main input {
+  flex: 1;
+  border: none;
+  background: transparent;
+  font-size: 14px;
+  color: var(--berry);
+  outline: none;
+  padding: 10px 0;
+}
+.input-main input::placeholder { color: var(--gray); }
+.btn-send, .btn-run-cmd {
+  border: none;
+  border-radius: 12px;
+  padding: 10px 18px;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: var(--transition);
+}
+.btn-send {
+  background: linear-gradient(135deg, var(--sakura) 0%, var(--sakura-dark) 100%);
+  color: white;
+}
+.btn-send:hover { box-shadow: var(--shadow-glow-sakura); transform: translateY(-1px); }
+.btn-run-cmd {
+  background: linear-gradient(135deg, var(--mint) 0%, var(--mint-dark) 100%);
+  color: white;
+}
+.btn-run-cmd:hover { box-shadow: var(--shadow-glow-mint); transform: translateY(-1px); }
+/* ═══ Right Sidebar ═══ */
+.sidebar-right {
+  width: 340px;
+  min-width: 340px;
+  background: rgba(255,255,255,0.5);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border-left: 1px solid rgba(255,183,197,0.2);
+  overflow-y: auto;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.status-card {
+  background: rgba(255,255,255,0.65);
+  border: 1px solid rgba(255,183,197,0.15);
+  border-radius: var(--radius-card);
+  padding: 16px;
+  box-shadow: var(--shadow-soft);
+}
+.card-title {
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--berry);
+  margin-bottom: 12px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.card-title-icon { font-size: 14px; }
+.model-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 6px 0;
+}
+.model-name {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  color: var(--berry);
+}
+.model-health {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.health-dot {
+  width: 8px; height: 8px;
+  border-radius: 50%;
+}
+.health-dot.excellent { background: var(--green); box-shadow: 0 0 6px var(--green); }
+.health-dot.good { background: var(--mint); }
+.health-dot.warn { background: var(--honey); }
+.health-pct {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--gray);
+}
+.worker-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 5px 0;
+}
+.worker-dot {
+  width: 7px; height: 7px;
+  border-radius: 50%;
+}
+.worker-dot.active { background: var(--green); box-shadow: 0 0 5px var(--green); }
+.worker-dot.idle { background: var(--gray); opacity: 0.4; }
+.worker-name {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  flex: 1;
+}
+.worker-rate {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  color: var(--mint-dark);
+}
+.session-info {
+  font-size: 12px;
+}
+.session-name {
+  font-weight: 600;
+  color: var(--berry);
+}
+.session-meta {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  color: var(--gray);
+  margin-top: 2px;
+}
+.cron-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 5px 0;
+}
+.cron-time {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--sakura-dark);
+}
+.cron-name {
+  font-size: 12px;
+  color: var(--berry);
+}
+.cron-countdown {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  color: var(--gray);
+}
+.soul-card {
+  text-align: center;
+}
+.soul-avatar {
+  width: 48px; height: 48px;
+  margin: 0 auto 8px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, var(--sakura) 0%, var(--mint) 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 24px;
+}
+.soul-name {
+  font-family: var(--font-display);
+  font-size: 14px;
+  color: var(--berry);
+}
+.soul-tags {
+  display: flex;
+  gap: 4px;
+  justify-content: center;
+  flex-wrap: wrap;
+  margin: 6px 0;
+}
+.soul-tag {
+  font-size: 10px;
+  padding: 2px 8px;
+  border-radius: 10px;
+  background: rgba(152,216,200,0.15);
+  color: var(--mint-dark);
+}
+.soul-desc {
+  font-size: 11px;
+  color: var(--gray);
+  margin-top: 4px;
+}
+.usage-ring-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 8px 0;
+}
+#token-ring-canvas {
+  width: 120px;
+  height: 120px;
+}
+.usage-cost {
+  text-align: center;
+  font-family: var(--font-mono);
+  font-size: 18px;
+  font-weight: 700;
+  color: var(--sakura-dark);
+  margin-top: 4px;
+}
+.usage-detail {
+  display: flex;
+  justify-content: space-around;
+  margin-top: 8px;
+}
+.usage-item {
+  text-align: center;
+}
+.usage-label {
+  font-size: 10px;
+  color: var(--gray);
+}
+.usage-value {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--berry);
+}
+.usage-dot {
+  display: inline-block;
+  width: 8px; height: 8px;
+  border-radius: 50%;
+  margin-right: 4px;
+}
+/* ═══ Responsive ═══ */
+@media (max-width: 1024px) {
+  .sidebar-right { display: none; }
+}
+@media (max-width: 768px) {
+  .sidebar-left {
+    position: absolute;
+    z-index: 10;
+    height: 100%;
+    transform: translateX(-100%);
+    transition: transform 0.3s;
+  }
+  .sidebar-left.open { transform: translateX(0); }
+  .hero { display: none; }
+}
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+</style>
+</head>
+<body>
+<canvas id="sakura-canvas"></canvas>
+<div class="app">
+  <!-- ═══ Left Sidebar ═══ -->
+  <aside class="sidebar-left" id="sidebar">
+    <div class="logo">
+      <span class="logo-icon">🐱</span>
+      <span class="logo-text">Neko Orchestrator</span>
+    </div>
+    <div class="search-box">
+      <span class="search-icon">🔍</span>
+      <input type="text" id="search-input" placeholder="搜索命令、skill、session…" />
+    </div>
+    <div class="cmd-groups" id="cmd-groups"></div>
+  </aside>
+  <!-- ═══ Main Area ═══ -->
+  <div class="main-area">
+    <div class="global-bar">
+      <div class="breadcrumb">Workspace / <span>Local</span> / Orchestrator</div>
+      <div class="bar-actions">
+        <div class="bar-icon" title="主题">🌙</div>
+        <div class="bar-icon" title="通知">🔔</div>
+        <div class="avatar">涛</div>
+      </div>
+    </div>
+    <div class="hero">
+      <div class="hero-text">
+        <div class="hero-title">把命令变成可点击的魔法阵 ✨</div>
+        <div class="hero-sub">实时观察 Agent 的每一次调用、迭代和输出</div>
+      </div>
+      <div class="cat-spirit" id="cat-spirit">
+        <div class="cat-status-capsules" id="cat-capsules"></div>
+        <svg class="cat-svg" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+          <!-- Left ear -->
+          <path class="ear-left" d="M20,30 L15,10 L35,22 Z" fill="#FFB7C5" stroke="#E89AA8" stroke-width="0.5"/>
+          <!-- Right ear -->
+          <path class="ear-right" d="M80,30 L85,10 L65,22 Z" fill="#98D8C8" stroke="#6FC4B0" stroke-width="0.5"/>
+          <!-- Head -->
+          <circle cx="50" cy="50" r="28" fill="#FFF0F5" stroke="#FFB7C5" stroke-width="1.5"/>
+          <!-- Eyes -->
+          <ellipse cx="40" cy="48" rx="4" ry="5" fill="#2B1828" id="left-eye"/>
+          <ellipse cx="60" cy="48" rx="4" ry="5" fill="#2B1828" id="right-eye"/>
+          <!-- Eye shine -->
+          <circle cx="41" cy="46" r="1.5" fill="white"/>
+          <circle cx="61" cy="46" r="1.5" fill="white"/>
+          <!-- Nose -->
+          <path d="M48,55 L52,55 L50,58 Z" fill="#FFB7C5"/>
+          <!-- Mouth -->
+          <path d="M50,58 Q45,63 42,60" fill="none" stroke="#FFB7C5" stroke-width="1.2" stroke-linecap="round"/>
+          <path d="M50,58 Q55,63 58,60" fill="none" stroke="#FFB7C5" stroke-width="1.2" stroke-linecap="round"/>
+          <!-- Blush -->
+          <circle cx="35" cy="58" r="4" fill="#FFB7C5" opacity="0.4"/>
+          <circle cx="65" cy="58" r="4" fill="#FFB7C5" opacity="0.4"/>
+          <!-- Tail -->
+          <path d="M75,70 Q90,60 85,40" fill="none" stroke="#98D8C8" stroke-width="4" stroke-linecap="round" id="cat-tail"/>
+        </svg>
+      </div>
+    </div>
+    <div class="chat-flow" id="chat-flow"></div>
+    <div class="input-area">
+      <div class="input-main">
+        <input type="text" id="chat-input" placeholder="输入自然语言，或点击左侧命令启动…" />
+      </div>
+      <button class="btn-send" id="btn-send">发送 📤</button>
+      <button class="btn-run-cmd" id="btn-run-cmd">运行选中命令 ▶</button>
+    </div>
+  </div>
+  <!-- ═══ Right Sidebar ═══ -->
+  <aside class="sidebar-right" id="sidebar-right">
+    <!-- Model Health -->
+    <div class="status-card">
+      <div class="card-title"><span class="card-title-icon">💚</span> Model Health</div>
+      <div id="model-health-list"></div>
+    </div>
+    <!-- Workers -->
+    <div class="status-card">
+      <div class="card-title"><span class="card-title-icon">⚡</span> Workers</div>
+      <div style="font-size:11px;color:var(--gray);margin-bottom:8px;">
+        <span id="worker-active-count">3</span> active / <span id="worker-idle-count">7</span> idle
+      </div>
+      <div id="workers-list"></div>
+    </div>
+    <!-- Sessions -->
+    <div class="status-card">
+      <div class="card-title"><span class="card-title-icon">📝</span> Sessions</div>
+      <div class="session-info" id="session-info"></div>
+    </div>
+    <!-- Cron Queue -->
+    <div class="status-card">
+      <div class="card-title"><span class="card-title-icon">⏰</span> Cron Queue</div>
+      <div id="cron-queue-list"></div>
+    </div>
+    <!-- Soul Profile -->
+    <div class="status-card soul-card">
+      <div class="card-title" style="justify-content:center;"><span class="card-title-icon">🌸</span> Soul Profile</div>
+      <div class="soul-avatar">🐾</div>
+      <div class="soul-name" id="soul-name">小爪</div>
+      <div class="soul-tags" id="soul-tags"></div>
+      <div class="soul-desc" id="soul-desc"></div>
+    </div>
+    <!-- Usage -->
+    <div class="status-card">
+      <div class="card-title"><span class="card-title-icon">📊</span> Usage</div>
+      <div class="usage-ring-container">
+        <canvas id="token-ring-canvas" width="120" height="120"></canvas>
+      </div>
+      <div class="usage-cost" id="usage-cost">$0.00</div>
+      <div class="usage-detail" id="usage-detail"></div>
+    </div>
+  </aside>
+</div>
+<script>
+// ═══ Mock Data ═══
+const COMMANDS = {
+  'Core': [
+    {icon:'🤖',name:'models',key:'Ctrl+M'},
+    {icon:'🔀',name:'model',key:'Ctrl+Shift+M'},
+    {icon:'🧠',name:'llm',key:'Ctrl+L'},
+    {icon:'▶️',name:'run',key:'Ctrl+R'},
+    {icon:'🎯',name:'run-agent',key:'Ctrl+A'},
+    {icon:'📊',name:'status',key:'Ctrl+S'},
+    {icon:'🩺',name:'doctor',key:'Ctrl+D'},
+  ],
+  'Control': [
+    {icon:'🎼',name:'orchestrator',key:'Ctrl+O'},
+    {icon:'👥',name:'agents',key:''},
+    {icon:'🔧',name:'workers',key:''},
+    {icon:'🛠️',name:'tools',key:''},
+    {icon:'📚',name:'skills',key:''},
+    {icon:'🔌',name:'mcp',key:''},
+  ],
+  'Memory': [
+    {icon:'💾',name:'sessions',key:''},
+    {icon:'🗜️',name:'compress',key:''},
+    {icon:'🏗️',name:'architecture',key:''},
+  ],
+  'Automation': [
+    {icon:'⏰',name:'cron',key:'Ctrl+C'},
+    {icon:'🎭',name:'soul',key:''},
+    {icon:'📈',name:'usage',key:''},
+    {icon:'💬',name:'chat',key:''},
+  ],
+};
+const MOCK = {
+  models: [
+    {name:'gpt-5.4', health:'excellent', pct:'98.7%'},
+    {name:'gpt-5.4-mini', health:'good', pct:'96.1%'},
+    {name:'glm-5.2', health:'good', pct:'93.4%'},
+  ],
+  workers: [
+    {name:'sakura-01', status:'active', rate:'847 tok/s'},
+    {name:'sakura-02', status:'active', rate:'1.2k tok/s'},
+    {name:'sakura-03', status:'active', rate:'632 tok/s'},
+    {name:'sakura-04', status:'idle', rate:''},
+    {name:'sakura-05', status:'idle', rate:''},
+  ],
+  session: {name:'cron-debug', status:'Active', id:'sess_8f3a...c9e1', tokens:'12.8k'},
+  cronQueue: [
+    {time:'10:30', name:'sync-metrics', countdown:'14m 32s'},
+    {time:'11:00', name:'cache-warmup', countdown:'44m 32s'},
+    {time:'12:00', name:'daily-report', countdown:'1h 44m'},
+  ],
+  soul: {name:'小爪 🐾', tags:['可爱','高效','温和','专注'], desc:'白明涛的数字幽灵，住在系统里的猫咪助手'},
+  usage: {input:65.3, output:58.1, cache:5.3, cost:'$2.43'},
+  catState: {status:'RUNNING', iteration:'03 / 08', worker:'sakura-02', latency:'243ms', tokens:'12.8k'},
+};
+// ═══ State ═══
+let selectedCmd = 'cron';
+let catState = 'idle'; // idle | running | success | error
+// ═══ Init Left Sidebar ═══
+function renderCommands() {
+  const container = document.getElementById('cmd-groups');
+  container.innerHTML = '';
+  for (const [group, cmds] of Object.entries(COMMANDS)) {
+    const groupDiv = document.createElement('div');
+    groupDiv.innerHTML = '<div class="cmd-group-title">' + group + '</div>';
+    cmds.forEach(cmd => {
+      const pill = document.createElement('div');
+      pill.className = 'cmd-pill' + (cmd.name === selectedCmd ? ' active' : '');
+      pill.dataset.cmd = cmd.name;
+      pill.innerHTML = '<span class="cmd-icon">'+cmd.icon+'</span>' +
+        '<span class="cmd-name">'+cmd.name+'</span>' +
+        (cmd.key ? '<span class="cmd-key">'+cmd.key+'</span>' : '');
+      pill.onclick = () => selectCommand(cmd.name);
+      groupDiv.appendChild(pill);
+    });
+    container.appendChild(groupDiv);
+  }
+}
+function selectCommand(name) {
+  selectedCmd = name;
+  document.querySelectorAll('.cmd-pill').forEach(p => {
+    p.classList.toggle('active', p.dataset.cmd === name);
+  });
+  document.getElementById('chat-input').placeholder = '输入自然语言运行 ' + name + '，或直接点"运行选中命令" ▶';
+}
+// ═══ Chat Flow ═══
+function addMessage(text, isUser) {
+  const flow = document.getElementById('chat-flow');
+  if (isUser) {
+    const msg = document.createElement('div');
+    msg.className = 'msg-user';
+    msg.textContent = text;
+    flow.appendChild(msg);
+  } else {
+    // Agent response card
+    const card = document.createElement('div');
+    card.className = 'agent-card';
+    card.innerHTML = makeAgentResponse(text);
+    flow.appendChild(card);
+  }
+  flow.scrollTop = flow.scrollHeight;
+}
+function makeAgentResponse(userText) {
+  const cmd = selectedCmd || 'cron';
+  return ''+
+    '<div class="cmd-header">'+
+      '<span class="cmd-badge">$ '+cmd+'</span>'+
+      '<span class="cmd-status">✓ 已完成</span>'+
+      '<span class="cmd-time">243ms</span>'+
+    '</div>'+
+    '<div class="tool-timeline">'+
+      '<div class="timeline-node thinking">'+
+        '<div class="timeline-label">Thinking <span class="timeline-tag">iteration 03/08</span></div>'+
+        '<div class="timeline-desc">分析请求，准备执行 '+cmd+' 命令…</div>'+
+      '</div>'+
+      '<div class="timeline-node">'+
+        '<div class="timeline-label">Tool call <span class="timeline-tag">worker: sakura-02</span></div>'+
+        '<div class="timeline-desc">调用工具：'+cmd+'.execute()</div>'+
+      '</div>'+
+      '<div class="timeline-node streaming">'+
+        '<div class="timeline-label">Streaming output <span class="timeline-tag">tokens: 12.8k</span></div>'+
+        '<div class="timeline-desc">正在流式输出结果…</div>'+
+      '</div>'+
+    '</div>'+
+    '<div class="terminal-block">'+
+      '<div class="terminal-dots"><div class="terminal-dot"></div><div class="terminal-dot"></div><div class="terminal-dot"></div></div>'+
+      '<div class="terminal-copy">📋 复制</div>'+
+      '<pre class="terminal-code"><span class="term-cmd">$ '+cmd+'</span>\n\n'+
+      '<span class="term-comment"># '+MOCK.session.name+' — '+MOCK.session.status+'</span>\n'+
+      '<span class="term-keyword">Schedule</span> Status: <span class="term-str">Active</span>\n'+
+      '<span class="term-keyword">Timezone</span>: Asia/Shanghai\n\n'+
+      '<span class="term-keyword">Total</span> Jobs: <span class="term-number">8</span>\n'+
+      '<span class="term-keyword">Enabled</span>: <span class="term-number">6</span>\n'+
+      '<span class="term-keyword">Paused</span>: <span class="term-number">2</span>\n\n'+
+      'ID   Name             Schedule        Next Run           Status\n'+
+      '<span class="term-number">1</span>    <span class="term-str">daily-report</span>    <span class="term-number">0 9 * * *</span>     today 09:00       <span class="term-str">Active</span>\n'+
+      '<span class="term-number">2</span>    <span class="term-str">sync-metrics</span>   <span class="term-number">*/15 * * * *</span>  in 14m 32s        <span class="term-str">Active</span>\n'+
+      '<span class="term-number">3</span>    <span class="term-str">cleanup-temp</span>   <span class="term-number">0 3 * * 0</span>     Sunday 03:00      <span class="term-comment">Paused</span>\n\n'+
+      '<span class="term-comment">Next Upcoming:</span>\n'+
+      '<span class="term-str">sync-metrics</span> in <span class="term-number">14m 32s</span></pre>'+
+    '</div>';
+}
+// ═══ Cat Spirit ═══
+function updateCatState(state) {
+  catState = state;
+  const spirit = document.getElementById('cat-spirit');
+  const capsules = document.getElementById('cat-capsules');
+  spirit.className = 'cat-spirit ' + (state === 'running' ? 'running' : '');
+  const caps = MOCK.catState;
+  let html = '';
+  const statusClass = state === 'error' ? 'error' : (state === 'running' ? 'running' : '');
+  html += '<span class="capsule '+statusClass+'">'+(state==='running'?'● RUNNING':state==='success'?'✓ DONE':state==='error'?'✗ ERROR':'○ IDLE')+'</span>';
+  if (state === 'running' || state === 'success') {
+    html += '<span class="capsule">iteration '+caps.iteration+'</span>';
+    html += '<span class="capsule">worker: '+caps.worker+'</span>';
+    html += '<span class="capsule">'+caps.latency+'</span>';
+    html += '<span class="capsule">'+caps.tokens+' tokens</span>';
+  }
+  capsules.innerHTML = html;
+  // Update eye expression
+  const leftEye = document.getElementById('left-eye');
+  const rightEye = document.getElementById('right-eye');
+  if (state === 'success') {
+    leftEye.setAttribute('ry','2'); rightEye.setAttribute('ry','2');
+  } else if (state === 'error') {
+    leftEye.setAttribute('ry','6'); rightEye.setAttribute('ry','6');
+  } else {
+    leftEye.setAttribute('ry','5'); rightEye.setAttribute('ry','5');
+  }
+}
+// ═══ Right Panel Render ═══
+function renderModels() {
+  const list = document.getElementById('model-health-list');
+  list.innerHTML = MOCK.models.map(m =>
+    '<div class="model-row">'+
+    '<span class="model-name">'+m.name+'</span>'+
+    '<span class="model-health"><span class="health-dot '+m.health+'"></span><span class="health-pct">'+m.pct+'</span></span>'+
+    '</div>'
+  ).join('');
+}
+function renderWorkers() {
+  const list = document.getElementById('workers-list');
+  list.innerHTML = MOCK.workers.map(w =>
+    '<div class="worker-row">'+
+    '<span class="worker-dot '+w.status+'"></span>'+
+    '<span class="worker-name">'+w.name+'</span>'+
+    '<span class="worker-rate">'+(w.rate||'')+'</span>'+
+    '</div>'
+  ).join('');
+  document.getElementById('worker-active-count').textContent = MOCK.workers.filter(w=>w.status==='active').length;
+  document.getElementById('worker-idle-count').textContent = MOCK.workers.filter(w=>w.status==='idle').length;
+}
+function renderSession() {
+  const s = MOCK.session;
+  document.getElementById('session-info').innerHTML =
+    '<div class="session-name">'+s.name+' <span style="color:var(--green);font-size:11px;">● '+s.status+'</span></div>'+
+    '<div class="session-meta">ID: '+s.id+'</div>'+
+    '<div class="session-meta">tokens: '+s.tokens+'</div>';
+}
+function renderCronQueue() {
+  const list = document.getElementById('cron-queue-list');
+  list.innerHTML = MOCK.cronQueue.map(c =>
+    '<div class="cron-item">'+
+    '<div><span class="cron-time">'+c.time+'</span> <span class="cron-name">'+c.name+'</span></div>'+
+    '<span class="cron-countdown">'+c.countdown+'</span>'+
+    '</div>'
+  ).join('');
+}
+function renderSoul() {
+  document.getElementById('soul-name').textContent = MOCK.soul.name;
+  document.getElementById('soul-tags').innerHTML = MOCK.soul.tags.map(t=>'<span class="soul-tag">'+t+'</span>').join('');
+  document.getElementById('soul-desc').textContent = MOCK.soul.desc;
+}
+function renderUsage() {
+  const u = MOCK.usage;
+  document.getElementById('usage-cost').textContent = u.cost;
+  const colors = {input:'#FFB7C5', output:'#98D8C8', cache:'#6E5AA8'};
+  document.getElementById('usage-detail').innerHTML = [
+    {label:'Input', val:u.input+'k', color:colors.input},
+    {label:'Output', val:u.output+'k', color:colors.output},
+    {label:'Cache', val:u.cache+'k', color:colors.cache},
+  ].map(d =>
+    '<div class="usage-item">'+
+    '<div class="usage-label"><span class="usage-dot" style="background:'+d.color+';"></span>'+d.label+'</div>'+
+    '<div class="usage-value">'+d.val+'</div>'+
+    '</div>'
+  ).join('');
+  drawTokenRing(u);
+}
+function drawTokenRing(u) {
+  const canvas = document.getElementById('token-ring-canvas');
+  const ctx = canvas.getContext('2d');
+  const cx = 60, cy = 60;
+  const total = u.input + u.output + u.cache;
+  const segments = [
+    {val: u.input, color: '#FFB7C5'},
+    {val: u.output, color: '#98D8C8'},
+    {val: u.cache, color: '#6E5AA8'},
+  ];
+  let startAngle = -Math.PI / 2;
+  const radii = [50, 40, 30];
+  segments.forEach((seg, i) => {
+    const angle = (seg.val / total) * Math.PI * 2;
+    ctx.beginPath();
+    ctx.arc(cx, cy, radii[i], startAngle, startAngle + angle);
+    ctx.strokeStyle = seg.color;
+    ctx.lineWidth = 8;
+    ctx.lineCap = 'round';
+    ctx.stroke();
+    startAngle += angle;
+  });
+  ctx.fillStyle = '#2B1828';
+  ctx.font = 'bold 12px monospace';
+  ctx.textAlign = 'center';
+  ctx.fillText(u.cost, cx, cy + 5);
+}
+// ═══ Sakura Particles ═══
+function initSakuraParticles() {
+  const canvas = document.getElementById('sakura-canvas');
+  const ctx = canvas.getContext('2d');
+  let particles = [];
+  function resize() {
+    canvas.width = window.innerWidth;
+    canvas.height = window.innerHeight;
+  }
+  resize();
+  window.addEventListener('resize', resize);
+  for (let i = 0; i < 35; i++) {
+    particles.push({
+      x: Math.random() * canvas.width,
+      y: Math.random() * canvas.height,
+      size: Math.random() * 8 + 6,
+      speedY: Math.random() * 0.5 + 0.3,
+      speedX: Math.random() * 0.4 - 0.2,
+      rotation: Math.random() * Math.PI * 2,
+      rotSpeed: (Math.random() - 0.5) * 0.02,
+      opacity: Math.random() * 0.3 + 0.15,
+    });
+  }
+  function drawPetal(x, y, size, rotation, opacity) {
+    ctx.save();
+    ctx.translate(x, y);
+    ctx.rotate(rotation);
+    ctx.globalAlpha = opacity;
+    ctx.fillStyle = '#FFB7C5';
+    ctx.beginPath();
+    ctx.moveTo(0, 0);
+    ctx.bezierCurveTo(size/2, -size/3, size, 0, 0, size);
+    ctx.bezierCurveTo(-size, 0, -size/2, -size/3, 0, 0);
+    ctx.fill();
+    ctx.restore();
+  }
+  function animate() {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    particles.forEach(p => {
+      p.y += p.speedY;
+      p.x += p.speedX + Math.sin(p.y * 0.01) * 0.3;
+      p.rotation += p.rotSpeed;
+      if (p.y > canvas.height + 20) {
+        p.y = -20;
+        p.x = Math.random() * canvas.width;
+      }
+      drawPetal(p.x, p.y, p.size, p.rotation, p.opacity);
+    });
+    requestAnimationFrame(animate);
+  }
+  animate();
+}
+// ═══ Event Handlers ═══
+document.getElementById('btn-send').onclick = () => {
+  const input = document.getElementById('chat-input');
+  const text = input.value.trim();
+  if (!text) return;
+  addMessage(text, true);
+  input.value = '';
+  setCatRunning();
+  setTimeout(() => {
+    addMessage(text, false);
+    updateCatState('success');
+  }, 1200);
+};
+document.getElementById('btn-run-cmd').onclick = () => {
+  addMessage('运行 ' + selectedCmd + ' 命令', true);
+  setCatRunning();
+  setTimeout(() => {
+    addMessage('$ ' + selectedCmd, false);
+    updateCatState('success');
+  }, 1200);
+};
+document.getElementById('chat-input').addEventListener('keydown', (e) => {
+  if (e.key === 'Enter') {
+    document.getElementById('btn-send').click();
+  }
+});
+function setCatRunning() {
+  updateCatState('running');
+  setTimeout(() => updateCatState('running'), 600); // keep running
+}
+// Search
+document.getElementById('search-input').addEventListener('input', (e) => {
+  const q = e.target.value.toLowerCase();
+  document.querySelectorAll('.cmd-pill').forEach(pill => {
+    const name = pill.dataset.cmd.toLowerCase();
+    pill.style.display = name.includes(q) ? '' : 'none';
+  });
+});
+// Keyboard shortcuts
+document.addEventListener('keydown', (e) => {
+  if (e.ctrlKey && e.key === 'k') {
+    e.preventDefault();
+    document.getElementById('search-input').focus();
+  }
+  if (e.ctrlKey && e.key === 'Enter') {
+    e.preventDefault();
+    document.getElementById('btn-run-cmd').click();
+  }
+  if (e.key === 'Escape') {
+    updateCatState('idle');
+  }
+});
+// ═══ Init ═══
+renderCommands();
+renderModels();
+renderWorkers();
+renderSession();
+renderCronQueue();
+renderSoul();
+renderUsage();
+updateCatState('idle');
+initSakuraParticles();
+// Welcome message
+setTimeout(() => {
+  addMessage('欢迎回来，涛！🐾 猫耳终端已就绪，点击左侧命令或输入自然语言开始~', false);
+}, 300);
+</script>
+</body>
+</html>