code-context-control 2.28.0__py3-none-any.whl

cli/ui/components/sidebar.js

@@ -0,0 +1,156 @@
+// ─── Sidebar ─────────────────────────────
+function ProjectSwitcher({ registry }) {
+  const [open, setOpen] = useState(false);
+  const ref = React.useRef(null);
+  const myPort = parseInt(window.location.port) || 3333;
+
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [open]);
+
+  const entryName = (e) => {
+    if (e.project_name && e.project_name.trim()) return e.project_name.trim();
+    if (e.project_path) {
+      const parts = e.project_path.replace(/\\/g, "/").split("/").filter(Boolean);
+      return parts[parts.length - 1] || "Unknown";
+    }
+    return "Unknown";
+  };
+
+  const others = (registry || []).filter(e => e.port !== myPort);
+  if (others.length === 0) return null;
+
+  return (
+    <div ref={ref} style={{ position: "relative" }}>
+      <button onClick={() => setOpen(!open)} title="Switch project"
+        style={{
+          padding: "3px 6px", borderRadius: 4, border: `1px solid ${T.border}`, background: "transparent",
+          cursor: "pointer", display: "flex", alignItems: "center", gap: 4, fontSize: 10, color: T.textDim
+        }}>
+        <I name="shuffle" size={10} color={T.textDim} />
+        <span>{others.length}</span>
+      </button>
+      {open && (
+        <div style={{
+          position: "absolute", top: "100%", left: 0, marginTop: 4, zIndex: 100,
+          background: T.surface, border: `1px solid ${T.border}`, borderRadius: 6,
+          boxShadow: "0 4px 12px rgba(0,0,0,0.3)", minWidth: 200, overflow: "hidden"
+        }}>
+          {others.map(e => (
+            <a key={e.port} href={`http://localhost:${e.port}`}
+              style={{
+                display: "flex", alignItems: "center", gap: 8, padding: "8px 12px",
+                color: T.text, textDecoration: "none", fontSize: 12,
+                borderBottom: `1px solid ${T.border}20`, transition: "background 0.1s"
+              }}
+              onMouseEnter={ev => ev.currentTarget.style.background = T.surfaceAlt}
+              onMouseLeave={ev => ev.currentTarget.style.background = "transparent"}>
+              <GlowDot color={T.accent} size={5} />
+              <span style={{ flex: 1 }}>{entryName(e)}</span>
+              <span className="mono" style={{ fontSize: 9, color: T.textDim }}>:{e.port}</span>
+            </a>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+const Sidebar = ({ tab, setTab, tabs, sidebarOpen, sidebarPinned, toggleSidebarPin, setSidebarHover, connected, health, healthChecking, loadHealth, registry }) => (
+  <div style={{
+    width: sidebarOpen ? 210 : 54, flexShrink: 0, background: T.surface, borderRight: `1px solid ${T.border}`,
+    display: "flex", flexDirection: "column", transition: "width 0.25s ease", overflow: "hidden"
+  }}
+    onMouseEnter={() => setSidebarHover(true)}
+    onMouseLeave={() => setSidebarHover(false)}>
+    <div style={{
+      padding: sidebarOpen ? "16px 14px" : "16px 10px", borderBottom: `1px solid ${T.border}`,
+      display: "flex", alignItems: "center", gap: 10
+    }}>
+      <div style={{
+        width: 32, height: 32, borderRadius: 8, background: `${T.accent}18`, border: `1px solid ${T.accent}40`,
+        display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0
+      }}>
+        <I name="terminal" size={16} color={T.accent} />
+      </div>
+      {sidebarOpen && (
+        <>
+          <div>
+            <div style={{ fontSize: 15, fontWeight: 700, color: T.text, letterSpacing: -0.5, lineHeight: 1 }}>
+              C<span style={{ color: T.accent }}>3</span>
+            </div>
+            <div style={{ fontSize: 9, color: T.textMuted, textTransform: "uppercase", letterSpacing: 1.5, marginTop: 2 }}>Context Control</div>
+          </div>
+          <button onClick={toggleSidebarPin} title={sidebarPinned ? "Unpin sidebar" : "Pin sidebar open"}
+            style={{
+              marginLeft: "auto", width: 22, height: 22, borderRadius: 4, border: "none",
+              background: "transparent", cursor: "pointer", display: "flex", alignItems: "center",
+              justifyContent: "center", flexShrink: 0
+            }}>
+            <I name="pin" size={12} color={sidebarPinned ? T.accent : T.textDim} />
+          </button>
+        </>
+      )}
+    </div>
+
+    <nav style={{ padding: "8px 6px", flex: 1, display: "flex", flexDirection: "column", gap: 2 }}>
+      {tabs.map(t => {
+        const active = tab === t.id;
+        return (
+          <button key={t.id} onClick={() => setTab(t.id)}
+            style={{
+              display: "flex", alignItems: "center", gap: 10, width: "100%",
+              padding: sidebarOpen ? "9px 12px" : "9px 0", justifyContent: sidebarOpen ? "flex-start" : "center",
+              borderRadius: 6, border: "none", cursor: "pointer",
+              background: active ? T.accentDim : "transparent", color: active ? T.accent : T.textMuted,
+              fontSize: 13, fontWeight: active ? 600 : 400, transition: "all 0.15s", position: "relative"
+            }}>
+            {active && <div style={{ position: "absolute", left: 0, top: "20%", bottom: "20%", width: 3, borderRadius: "0 2px 2px 0", background: T.accent }} />}
+            <I name={t.icon} size={16} />
+            {sidebarOpen && <span>{t.label}</span>}
+          </button>
+        );
+      })}
+    </nav>
+
+    {sidebarOpen && (
+      <div style={{ padding: "10px 14px", borderTop: `1px solid ${T.border}`, fontSize: 10, color: T.textDim }}>
+        <div style={{ display: "flex", alignItems: "center", gap: 6, marginBottom: 4 }}>
+          <GlowDot color={connected ? T.accent : T.error} size={5} />
+          <span style={{ color: T.textMuted }}>{connected ? "Connected" : "Disconnected"}</span>
+          {health?.session && (
+            <span className="mono" style={{ marginLeft: "auto", color: T.textDim, fontSize: 9 }}>
+              {health.session.tool_calls} calls
+            </span>
+          )}
+          <button onClick={loadHealth} disabled={healthChecking} title="Check connections"
+            style={{
+              marginLeft: health?.session ? 0 : "auto", padding: "1px 4px", borderRadius: 3,
+              border: `1px solid ${T.border}`, background: "transparent",
+              cursor: healthChecking ? "default" : "pointer", display: "flex", alignItems: "center",
+              opacity: healthChecking ? 0.5 : 1
+            }}>
+            <I name="refresh" size={9} color={T.textDim}
+              style={healthChecking ? { animation: "spin 0.6s linear infinite" } : {}} />
+          </button>
+        </div>
+        {health?.sources && (
+          <div style={{ display: "flex", gap: 4, flexWrap: "wrap", marginBottom: 3 }}>
+            {Object.entries(health.sources).map(([name, ok]) => (
+              <span key={name} style={{
+                padding: "1px 5px", borderRadius: 3, fontSize: 9, fontFamily: "'JetBrains Mono', monospace",
+                background: ok ? `${T.accent}18` : `${T.error}18`,
+                color: ok ? T.accent : T.error,
+                border: `1px solid ${ok ? T.accent : T.error}30`,
+              }}>{name}</span>
+            ))}
+          </div>
+        )}
+        <ProjectSwitcher registry={registry} />
+      </div>
+    )}
+  </div>
+);

cli/ui/icons.js

@@ -0,0 +1,51 @@
+// ─── Icons (inline SVG) ──────────────────
+const Icon = ({ d, size = 16, color = "currentColor", style = {} }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color}
+    strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={style}>
+    <path d={d} />
+  </svg>
+);
+const icons = {
+  gauge: "M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zM12 6v6l4 2",
+  minimize: "M4 14h6v6M20 10h-6V4M14 10l7-7M3 21l7-7",
+  search: "M11 3a8 8 0 1 0 0 16 8 8 0 0 0 0-16zM21 21l-4.35-4.35",
+  clock: "M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zM12 6v6l4 2",
+  braces: "M7 4a2 2 0 0 0-2 2v3a2 2 0 0 1-2 2 2 2 0 0 1 2 2v3a2 2 0 0 0 2 2M17 4a2 2 0 0 1 2 2v3a2 2 0 0 0 2 2 2 2 0 0 0-2 2v3a2 2 0 0 1-2 2",
+  settings: "M12 2a3 3 0 0 0-3 3v1a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.86-.5a3 3 0 0 0-3 5.2l.87.5a2 2 0 0 1 1 1.73v.5a2 2 0 0 1-1 1.73l-.87.5a3 3 0 0 0 3 5.2l.86-.5a2 2 0 0 1 2 0l.43.25A2 2 0 0 1 9 19v1a3 3 0 0 0 6 0v-1a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.86.5a3 3 0 0 0 3-5.2l-.87-.5A2 2 0 0 1 20 10.27v-.5a2 2 0 0 1 1-1.73l.87-.5a3 3 0 0 0-3-5.2l-.86.5a2 2 0 0 1-2 0L15.57 2.5A2 2 0 0 1 15 1V1a3 3 0 0 0-6 0z",
+  terminal: "M4 17l6-6-6-6M12 19h8",
+  zap: "M13 2L3 14h9l-1 8 10-12h-9l1-8",
+  file: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8zM14 2v6h6",
+  refresh: "M1 4v6h6M23 20v-6h-6M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 0 1 3.51 15",
+  copy: "M20 9h-9a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2-2v-9a2 2 0 0 0-2-2zM5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1",
+  check: "M20 6L9 17l-5-5",
+  layers: "M12 2l10 6.5v7L12 22 2 15.5v-7zM12 22v-7M22 8.5l-10 7-10-7",
+  brain: "M12 2a7 7 0 0 0-7 7c0 3 2 5.5 5 7v4h4v-4c3-1.5 5-4 5-7a7 7 0 0 0-7-7z",
+  chevron: "M9 18l6-6-6-6",
+  arrowDown: "M12 5v14M19 12l-7 7-7-7",
+  database: "M12 2C6.48 2 2 4.02 2 6.5v11C2 19.98 6.48 22 12 22s10-2.02 10-4.5v-11C22 4.02 17.52 2 12 2z",
+  save: "M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2zM17 21v-8H7v8M7 3v5h8",
+  trash: "M3 6h18M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2",
+  bookmark: "M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z",
+  panelRight: "M3 3h18v18H3zM15 3v18",
+  cpu: "M9 2v3M15 2v3M9 19v3M15 19v3M2 9h3M2 15h3M19 9h3M19 15h3M6 5h12a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1zM9 9h6v6H9z",
+  shuffle: "M16 3h5v5M4 20L21 3M21 16v5h-5M15 15l6 6M4 4l5 5",
+  gitBranch: "M6 3v12M18 9a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM6 21a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM18 9a9 9 0 0 1-9 9",
+  filter: "M22 3H2l8 9.46V19l4 2v-8.54L22 3",
+  edit: "M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z",
+  xCircle: "M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zM15 9l-6 6M9 9l6 6",
+  external: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6M15 3h6v6M10 14L21 3",
+  sun: "M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42M12 5a7 7 0 1 0 0 14A7 7 0 0 0 12 5z",
+  moon: "M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z",
+  "book-open": "M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2zM22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z",
+  folderOpen: "M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z",
+  pin: "M12 17v5 M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.34V17a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-1.66a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 0-1-1H9a1 1 0 0 0-1 1v3.76z",
+  messageSquare: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z",
+  download: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3",
+  wrench: "M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z",
+  xSmall: "M18 6L6 18M6 6l12 12",
+  fileText: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8zM14 2v6h6M16 13H8M16 17H8M10 9H8",
+};
+
+const I = ({ name, size = 16, color = "currentColor", style = {} }) => (
+  <Icon d={icons[name] || ""} size={size} color={color} style={style} />
+);

cli/ui/shared.js

@@ -0,0 +1,119 @@
+// ─── Shared Components ────────────────────
+const GlowDot = ({ color = T.accent, size = 6 }) => (
+  <span style={{
+    display: "inline-block", width: size, height: size, borderRadius: "50%",
+    background: color, boxShadow: `0 0 ${size}px ${color}60`, flexShrink: 0
+  }} />
+);
+
+const Badge = ({ children, color = T.accent }) => (
+  <span className="mono" style={{
+    display: "inline-flex", alignItems: "center", gap: 4,
+    padding: "2px 8px", borderRadius: 4, fontSize: 11, fontWeight: 600,
+    background: `${color}15`, color, border: `1px solid ${color}30`, whiteSpace: "nowrap"
+  }}>
+    {children}
+  </span>
+);
+
+const StatBox = ({ label, value, sub, color = T.accent, loading }) => (
+  <div style={{
+    background: T.surface, border: `1px solid ${T.border}`, borderRadius: 8,
+    padding: "16px 18px", flex: 1, minWidth: 140
+  }}>
+    <div style={{
+      color: T.textMuted, fontSize: 11, fontWeight: 600, textTransform: "uppercase",
+      letterSpacing: 1, marginBottom: 8
+    }}>{label}</div>
+    <div className="mono" style={{ fontSize: 26, fontWeight: 700, color, lineHeight: 1.1 }}>
+      {loading ? <span style={{ animation: "pulse 1s infinite" }}>&mdash;</span> : value}
+    </div>
+    {sub && <div style={{ color: T.textMuted, fontSize: 11, marginTop: 4 }}>{sub}</div>}
+  </div>
+);
+
+const ProgressBar = ({ value, max, color = T.accent, height = 6 }) => {
+  const pct = Math.min(100, (value / max) * 100);
+  return (
+    <div style={{ flex: 1, height, borderRadius: height, background: T.surfaceAlt, overflow: "hidden" }}>
+      <div style={{
+        height: "100%", borderRadius: height, width: `${pct}%`,
+        background: `linear-gradient(90deg, ${color}90, ${color})`,
+        boxShadow: `0 0 8px ${color}40`, transition: "width 0.5s ease"
+      }} />
+    </div>
+  );
+};
+
+const Btn = ({ children, color = T.accent, variant = "solid", onClick, disabled, style: s = {} }) => {
+  const isSolid = variant === "solid";
+  return (
+    <button onClick={onClick} disabled={disabled} style={{
+      padding: "8px 18px", borderRadius: 6, border: isSolid ? "none" : `1px solid ${T.border}`,
+      background: isSolid ? `linear-gradient(135deg, ${color}, ${color}cc)` : "transparent",
+      color: isSolid ? T.bg : T.textMuted, fontSize: 12, fontWeight: 700, cursor: disabled ? "default" : "pointer",
+      fontFamily: "'JetBrains Mono', monospace", display: "flex", alignItems: "center", gap: 6,
+      opacity: disabled ? 0.5 : 1, transition: "all 0.15s", ...s,
+    }}>{children}</button>
+  );
+};
+
+const Section = ({ label, icon, color, open, onToggle, badge, children }) => (
+  <div style={{ background: T.surface, border: `1px solid ${T.border}`, borderRadius: 8, overflow: "hidden" }}>
+    <div onClick={onToggle} style={{ display: "flex", alignItems: "center", gap: 8, padding: "12px 16px", cursor: "pointer", userSelect: "none" }}>
+      <I name={icon} size={13} color={color || T.textMuted} />
+      <span style={{ fontSize: 12, fontWeight: 600, color: T.textMuted, textTransform: "uppercase", letterSpacing: 1, flex: 1 }}>{label}</span>
+      {badge}
+      <I name="chevron" size={12} color={T.textMuted} style={{ transform: open ? "rotate(90deg)" : "rotate(0deg)", transition: "transform 0.15s" }} />
+    </div>
+    {open && <div style={{ padding: "0 16px 16px" }}>{children}</div>}
+  </div>
+);
+
+// ─── Shared Constants ─────────────────────
+const typeColors = { tool_call: T.blue, decision: T.purple, file_change: T.accent, fact_stored: T.warn, session_start: "#4ade80", session_save: "#4ade80" };
+const toolColors = { search: T.blue, compress: T.purple, read: T.blue, filter: T.purple, validate: T.accent, session: "#4ade80", memory: T.purple, status: T.warn, delegate: "#e879f9", snapshot: "#4ade80", restore: "#4ade80", transcript: T.blue };
+const getToolColor = (name) => { const n = (name || "").toLowerCase(); const k = Object.keys(toolColors).find(k => n.includes(k)); return k ? toolColors[k] : T.textMuted; };
+
+const timeAgo = (iso) => {
+  if (!iso) return "";
+  const diff = (Date.now() - new Date(iso).getTime()) / 1000;
+  if (diff < 60) return `${Math.floor(diff)}s ago`;
+  if (diff < 3600) return `${Math.floor(diff / 60)}m ago`;
+  if (diff < 86400) return `${Math.floor(diff / 3600)}h ago`;
+  return `${Math.floor(diff / 86400)}d ago`;
+};
+const localTime = (iso) => { if (!iso) return ""; const d = new Date(iso); return d.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", second: "2-digit" }); };
+const localDate = (iso) => { if (!iso) return ""; return new Date(iso).toLocaleDateString(); };
+const formatDuration = (seconds) => {
+  if (seconds < 0) seconds = 0;
+  const h = Math.floor(seconds / 3600);
+  const m = Math.floor((seconds % 3600) / 60);
+  const s = seconds % 60;
+  return h ? `${h}h ${m}m` : `${m}m ${s}s`;
+};
+const useLiveDuration = (startedIso, isLive) => {
+  const [dur, setDur] = useState("");
+  useEffect(() => {
+    if (!startedIso || !isLive) { setDur(""); return; }
+    const tick = () => setDur(formatDuration(Math.floor((Date.now() - new Date(startedIso).getTime()) / 1000)));
+    tick();
+    const iv = setInterval(tick, 1000);
+    return () => clearInterval(iv);
+  }, [startedIso, isLive]);
+  return dur;
+};
+
+const renderBoolToggle = (label, checked, onChange, description) => (
+  <label style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: 12, padding: "8px 0" }}>
+    <div style={{ display: "flex", flexDirection: "column", gap: 3 }}>
+      <span style={{ color: T.textMuted, fontSize: 12 }}>{label}</span>
+      {description && <span style={{ color: T.textDim, fontSize: 11 }}>{description}</span>}
+    </div>
+    <button type="button" onClick={onChange} style={{
+      padding: "4px 10px", borderRadius: 999, border: `1px solid ${T.border}`,
+      background: checked ? T.accent + "22" : T.surfaceAlt,
+      color: checked ? T.accent : T.textMuted, cursor: "pointer", fontSize: 11, fontWeight: 700, minWidth: 74,
+    }}>{checked ? "ON" : "OFF"}</button>
+  </label>
+);

cli/ui/theme.js

@@ -0,0 +1,22 @@
+// ─── Theme ────────────────────────────────
+const DARK = {
+  bg: "#0a0e14", surface: "#0f1319", surfaceAlt: "#141a22",
+  border: "#1e2733", borderHover: "#2a3544",
+  text: "#c5cdd8", textMuted: "#5c6a7a", textDim: "#3a4555",
+  accent: "#00e5a0", accentDim: "#00e5a018",
+  warn: "#ffb224", warnDim: "#ffb22418",
+  error: "#ff6b6b", errorDim: "#ff6b6b18",
+  blue: "#4da6ff", blueDim: "#4da6ff18",
+  purple: "#b38aff", purpleDim: "#b38aff18",
+};
+const LIGHT = {
+  bg: "#f0f2f5", surface: "#ffffff", surfaceAlt: "#e8ebef",
+  border: "#dde2e8", borderHover: "#b8c0cb",
+  text: "#1a2332", textMuted: "#5a6a7a", textDim: "#9daab8",
+  accent: "#009e72", accentDim: "#009e7214",
+  warn: "#b87000", warnDim: "#b8700014",
+  error: "#c43030", errorDim: "#c4303014",
+  blue: "#1a6fc4", blueDim: "#1a6fc414",
+  purple: "#6b40c4", purpleDim: "#6b40c414",
+};
+let T = DARK;

cli/ui.html

@@ -0,0 +1,168 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>C3 — Code Context Control</title>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.3.1/umd/react.production.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.3.1/umd/react-dom.production.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.26.9/babel.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/12.0.2/marked.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css" id="hljs-theme-dark">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css" id="hljs-theme-light" disabled>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.30.2/cytoscape.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/layout-base@2.0.1/layout-base.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/cose-base@2.2.0/cose-base.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/cytoscape-fcose@2.2.0/cytoscape-fcose.js"></script>
+  <style>
+    @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=DM+Sans:wght@400;500;600;700&display=swap');
+
+    *,
+    *::before,
+    *::after {
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0;
+    }
+
+    html,
+    body,
+    #root {
+      height: 100%;
+      width: 100%;
+      overflow: hidden;
+    }
+
+    body {
+      background: #0a0e14;
+      color: #c5cdd8;
+      font-family: 'DM Sans', -apple-system, sans-serif;
+    }
+
+    ::-webkit-scrollbar {
+      width: 5px;
+    }
+
+    ::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    ::-webkit-scrollbar-thumb {
+      background: #1e2733;
+      border-radius: 3px;
+    }
+
+    ::-webkit-scrollbar-thumb:hover {
+      background: #2a3544;
+    }
+
+    @keyframes spin {
+      from {
+        transform: rotate(0deg);
+      }
+
+      to {
+        transform: rotate(360deg);
+      }
+    }
+
+    @keyframes fadeUp {
+      from {
+        opacity: 0;
+        transform: translateY(8px);
+      }
+
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+
+    @keyframes pulse {
+
+      0%,
+      100% {
+        opacity: 1;
+      }
+
+      50% {
+        opacity: 0.5;
+      }
+    }
+
+    @keyframes fadeIn {
+      from {
+        opacity: 0;
+      }
+
+      to {
+        opacity: 1;
+      }
+    }
+
+    .fade-up {
+      animation: fadeUp 0.3s ease forwards;
+    }
+
+    input,
+    textarea,
+    select,
+    button {
+      font-family: inherit;
+    }
+
+    pre {
+      font-family: 'JetBrains Mono', monospace;
+    }
+
+    .mono {
+      font-family: 'JetBrains Mono', monospace;
+    }
+
+    /* ─── Chat markdown rendering ─── */
+    .chat-md h1,.chat-md h2,.chat-md h3 { margin:.6em 0 .3em; font-family:'DM Sans',sans-serif; }
+    .chat-md h1 { font-size:1.3em; } .chat-md h2 { font-size:1.15em; } .chat-md h3 { font-size:1.05em; }
+    .chat-md p { margin:.4em 0; } .chat-md ul,.chat-md ol { margin:.3em 0; padding-left:1.5em; }
+    .chat-md li { margin:.15em 0; }
+    .chat-md code { font-family:'JetBrains Mono',monospace; font-size:.88em; }
+    .chat-md pre { margin:.5em 0; border-radius:6px; overflow-x:auto; }
+    .chat-md pre code { display:block; padding:12px 14px; line-height:1.5; }
+    .chat-md blockquote { border-left:3px solid; padding-left:12px; margin:.4em 0; opacity:.85; }
+    .chat-md table { border-collapse:collapse; margin:.5em 0; width:100%; }
+    .chat-md th,.chat-md td { border:1px solid; padding:6px 10px; font-size:12px; text-align:left; }
+    .chat-md a { text-decoration:underline; }
+    .chat-md hr { border:none; border-top:1px solid; margin:.8em 0; opacity:.3; }
+
+    .chat-code-block { border-radius:6px; overflow:hidden; margin:.5em 0; }
+    .chat-code-header { display:flex; justify-content:space-between; align-items:center; padding:4px 12px; font-size:11px; font-family:'JetBrains Mono',monospace; }
+    .chat-code-copy { background:none; border:1px solid; border-radius:4px; padding:2px 8px; cursor:pointer; font-size:10px; font-family:'JetBrains Mono',monospace; transition:opacity .15s; }
+    .chat-code-copy:hover { opacity:.7; }
+
+    [data-theme="dark"] .chat-code-block { background:#0d1117; }
+    [data-theme="dark"] .chat-code-header { background:#161b22; color:#8b949e; border-bottom:1px solid #21262d; }
+    [data-theme="dark"] .chat-code-copy { color:#8b949e; border-color:#30363d; }
+    [data-theme="dark"] .chat-md blockquote { border-color:#30363d; }
+    [data-theme="dark"] .chat-md th,[data-theme="dark"] .chat-md td { border-color:#21262d; }
+    [data-theme="dark"] .chat-md hr { border-color:#21262d; }
+    [data-theme="dark"] .chat-md a { color:#58a6ff; }
+
+    [data-theme="light"] .chat-code-block { background:#f6f8fa; }
+    [data-theme="light"] .chat-code-header { background:#eaecef; color:#57606a; border-bottom:1px solid #d0d7de; }
+    [data-theme="light"] .chat-code-copy { color:#57606a; border-color:#d0d7de; }
+    [data-theme="light"] .chat-md blockquote { border-color:#d0d7de; }
+    [data-theme="light"] .chat-md th,[data-theme="light"] .chat-md td { border-color:#d0d7de; }
+    [data-theme="light"] .chat-md hr { border-color:#d0d7de; }
+    [data-theme="light"] .chat-md a { color:#0969da; }
+  </style>
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="text/babel">
+    /* __C3_UI_SCRIPTS__ */
+  </script>
+</body>
+
+</html>