npm - gitclaw - Versions diffs - 0.3.1 → 0.4.0 - Mend

gitclaw 0.3.1 → 0.4.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 (45) hide show

package/LICENSE +21 -0
package/README.md +6 -2
package/dist/composio/adapter.d.ts +26 -0
package/dist/composio/adapter.js +92 -0
package/dist/composio/client.d.ts +39 -0
package/dist/composio/client.js +170 -0
package/dist/composio/index.d.ts +2 -0
package/dist/composio/index.js +2 -0
package/dist/context.d.ts +20 -0
package/dist/context.js +211 -0
package/dist/exports.d.ts +2 -0
package/dist/exports.js +1 -0
package/dist/index.js +99 -7
package/dist/learning/reinforcement.d.ts +11 -0
package/dist/learning/reinforcement.js +91 -0
package/dist/loader.js +34 -1
package/dist/sdk.js +5 -1
package/dist/skills.d.ts +5 -0
package/dist/skills.js +58 -7
package/dist/tools/capture-photo.d.ts +3 -0
package/dist/tools/capture-photo.js +91 -0
package/dist/tools/index.d.ts +2 -1
package/dist/tools/index.js +12 -2
package/dist/tools/read.js +4 -0
package/dist/tools/shared.d.ts +20 -0
package/dist/tools/shared.js +24 -0
package/dist/tools/skill-learner.d.ts +3 -0
package/dist/tools/skill-learner.js +358 -0
package/dist/tools/task-tracker.d.ts +20 -0
package/dist/tools/task-tracker.js +275 -0
package/dist/tools/write.js +4 -0
package/dist/voice/adapter.d.ts +97 -0
package/dist/voice/adapter.js +30 -0
package/dist/voice/chat-history.d.ts +8 -0
package/dist/voice/chat-history.js +121 -0
package/dist/voice/gemini-live.d.ts +20 -0
package/dist/voice/gemini-live.js +279 -0
package/dist/voice/index.d.ts +4 -0
package/dist/voice/index.js +3 -0
package/dist/voice/openai-realtime.d.ts +27 -0
package/dist/voice/openai-realtime.js +291 -0
package/dist/voice/server.d.ts +2 -0
package/dist/voice/server.js +2319 -0
package/dist/voice/ui.html +2556 -0
package/package.json +21 -7

package/dist/voice/ui.html ADDED Viewed

@@ -0,0 +1,2556 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Gitclaw: {{AGENT_NAME}}</title>
+<style>
+  @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&family=Inter:wght@400;500;600&display=swap');
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  body {
+    background: #0d1117; color: #e6edf3;
+    font-family: 'Inter', 'IBM Plex Mono', monospace;
+    display: flex; flex-direction: column;
+    height: 100vh; overflow: hidden;
+  }
+  .header {
+    display: flex; align-items: center; justify-content: space-between;
+    padding: 0 20px; height: 40px; min-height: 40px;
+    background: #0e1117; border-bottom: 1px solid #21262d;
+  }
+  .header-left { display: flex; align-items: center; gap: 10px; }
+  .header-logo {
+    flex-shrink: 0; width: 22px; height: 22px;
+    display: grid; grid-template-columns: repeat(10,2.2px); grid-template-rows: repeat(10,2.2px);
+    image-rendering: pixelated;
+    filter: drop-shadow(0 0 4px rgba(255,79,99,0.9)) drop-shadow(0 0 12px rgba(255,79,99,0.5));
+  }
+  .header-logo .px { width: 2.2px; height: 2.2px; }
+  .header-logo .px-o { background: #12070b; }
+  .header-logo .px-f { background: #ff4f63; }
+  .header-logo .px-e { background: transparent; }
+  .header-left h1 { font-size: 15px; font-weight: 600; font-family: 'IBM Plex Mono', monospace; }
+  .header-left h1 span { color: #58a6ff; }
+  .header-right { display: flex; align-items: center; gap: 16px; }
+  .status-dot { width: 8px; height: 8px; border-radius: 50%; background: #484f58; display: inline-block; }
+  .status-dot.connected { background: #3fb950; }
+  .status-dot.error { background: #f85149; }
+  .status-text { font-size: 11px; color: #8b949e; margin-left: 6px; }
+  .view-tabs { display: flex; gap: 2px; }
+  .view-tab {
+    font-family: inherit; font-size: 11px; padding: 4px 14px;
+    background: transparent; border: 1px solid transparent; border-radius: 4px;
+    color: #8b949e; cursor: pointer; transition: all 0.15s;
+  }
+  .view-tab:hover { color: #b1bac4; background: #161b22; }
+  .view-tab.active { border-color: #58a6ff; color: #58a6ff; background: rgba(88,166,255,0.08); }
+  .main { display: flex; flex: 1; overflow: hidden; min-height: 0; }
+  /* CHAT SIDEBAR */
+  .chat-sidebar {
+    width: 220px; min-width: 220px; background: #0a0d12; border-right: 1px solid #21262d;
+    display: flex; flex-direction: column; overflow: hidden;
+    transition: width 0.25s cubic-bezier(0.4,0,0.2,1), min-width 0.25s cubic-bezier(0.4,0,0.2,1), opacity 0.2s ease;
+  }
+  .chat-sidebar.collapsed {
+    width: 0; min-width: 0; opacity: 0; pointer-events: none; border-right: none;
+  }
+  .chat-sidebar-collapse {
+    background: none; border: none; color: #484f58; cursor: pointer; padding: 2px;
+    display: flex; align-items: center; transition: color 0.15s;
+  }
+  .chat-sidebar-collapse:hover { color: #b1bac4; }
+  .chat-sidebar-collapse svg { width: 16px; height: 16px; }
+  .chat-sidebar-edge-tab {
+    position: absolute; left: 0; top: 50%; transform: translateY(-50%);
+    width: 16px; height: 48px; background: #161b22; border: 1px solid #21262d;
+    border-left: none; border-radius: 0 6px 6px 0; cursor: pointer;
+    display: none; align-items: center; justify-content: center; color: #484f58;
+    z-index: 10; transition: color 0.15s, background 0.15s;
+  }
+  .chat-sidebar-edge-tab:hover { color: #b1bac4; background: #1c2129; }
+  .chat-sidebar-edge-tab svg { width: 12px; height: 12px; }
+  .chat-sidebar-edge-tab.visible { display: flex; }
+  .chat-sidebar-toggle {
+    background: none; border: 1px solid #21262d; border-radius: 4px; color: #8b949e;
+    cursor: pointer; font-size: 11px; font-family: 'IBM Plex Mono', monospace;
+    padding: 3px 8px; display: flex; align-items: center; gap: 5px; transition: all 0.15s;
+  }
+  .chat-sidebar-toggle:hover { border-color: #30363d; color: #b1bac4; }
+  .chat-sidebar-toggle svg { width: 14px; height: 14px; }
+  .chat-sidebar-header {
+    padding: 10px 12px; display: flex; align-items: center; justify-content: space-between;
+    border-bottom: 1px solid #21262d;
+  }
+  .chat-sidebar-header span {
+    font-size: 11px; color: #8b949e; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;
+  }
+  .new-chat-btn {
+    background: #238636; border: none; border-radius: 4px; color: #fff;
+    font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 600;
+    padding: 4px 10px; cursor: pointer; transition: background 0.15s;
+  }
+  .new-chat-btn:hover { background: #2ea043; }
+  .chat-list { flex: 1; overflow-y: auto; padding: 4px 0; }
+  .chat-item {
+    display: flex; align-items: center; gap: 8px; padding: 8px 12px; font-size: 12px;
+    font-family: 'IBM Plex Mono', monospace; color: #8b949e; cursor: pointer;
+    transition: background 0.1s; border-left: 2px solid transparent;
+  }
+  .chat-item:hover { background: #161b22; color: #b1bac4; }
+  .chat-item.active { background: rgba(88,166,255,0.08); color: #e6edf3; border-left-color: #58a6ff; }
+  .chat-item .chat-icon { width: 14px; height: 14px; flex-shrink: 0; opacity: 0.5; }
+  .chat-item .chat-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .chat-item .chat-time { font-size: 10px; color: #484f58; flex-shrink: 0; }
+  .chat-item .chat-delete {
+    width: 18px; height: 18px; border: none; background: transparent; color: #484f58;
+    cursor: pointer; border-radius: 3px; display: flex; align-items: center; justify-content: center;
+    opacity: 0; transition: opacity 0.1s; font-size: 13px;
+  }
+  .chat-item:hover .chat-delete { opacity: 1; }
+  .chat-item .chat-delete:hover { background: #21262d; color: #f85149; }
+  .branch-indicator {
+    padding: 8px 12px; border-top: 1px solid #21262d; font-size: 10px;
+    font-family: 'IBM Plex Mono', monospace; color: #484f58; display: flex; align-items: center; gap: 6px;
+  }
+  .branch-indicator svg { width: 12px; height: 12px; }
+  .branch-indicator .branch-name { color: #8b949e; }
+  /* CHAT VIEW */
+  .chat-view { display: flex; flex: 1; overflow: hidden; min-height: 0; }
+  .chat-view.hidden { display: none; }
+  .panel-cam {
+    width: 280px; min-width: 280px; border-right: 1px solid #21262d;
+    display: flex; flex-direction: column; padding: 16px; gap: 14px; background: #0e1117;
+  }
+  .camera-container {
+    position: relative; background: #161b22; border: 1px solid #21262d;
+    border-radius: 6px; overflow: hidden; aspect-ratio: 4/3;
+  }
+  .camera-container video { width: 100%; height: 100%; object-fit: cover; display: block; }
+  .camera-container .camera-off {
+    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #484f58; font-size: 12px;
+  }
+  .camera-container canvas { display: none; }
+  .controls { display: flex; gap: 8px; }
+  .ctrl-btn {
+    flex: 1; padding: 10px; border-radius: 6px; background: #161b22; border: 1px solid #21262d;
+    color: #8b949e; font-family: 'IBM Plex Mono', monospace; font-size: 11px;
+    cursor: pointer; transition: all 0.15s;
+    display: flex; align-items: center; justify-content: center; gap: 6px;
+  }
+  .ctrl-btn:hover { border-color: #30363d; color: #b1bac4; }
+  .ctrl-btn.active { border-color: #58a6ff; color: #58a6ff; background: rgba(88,166,255,0.08); }
+  .ctrl-btn svg { width: 14px; height: 14px; }
+  /* Agent Vitals */
+  .agent-vitals {
+    flex: 1; display: flex; flex-direction: column; gap: 0;
+    background: #0a0e14; border: 1px solid #21262d; border-radius: 8px; overflow: hidden;
+    font-family: 'IBM Plex Mono', monospace; position: relative;
+  }
+  .vitals-header {
+    display: flex; align-items: center; justify-content: space-between;
+    padding: 8px 12px; border-bottom: 1px solid #161b22;
+  }
+  .vitals-title { font-size: 9px; text-transform: uppercase; letter-spacing: 1.5px; color: #3fb950; font-weight: 600; }
+  .vitals-status-dot { width: 6px; height: 6px; border-radius: 50%; background: #3fb950; animation: vitalPulse 1.5s ease-in-out infinite; }
+  @keyframes vitalPulse { 0%,100% { opacity: 1; box-shadow: 0 0 4px #3fb950; } 50% { opacity: 0.4; box-shadow: none; } }
+  .vitals-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: #161b22; flex: 1; }
+  .vital-cell {
+    background: #0a0e14; padding: 8px 10px; display: flex; flex-direction: column; gap: 4px;
+    position: relative; overflow: hidden;
+  }
+  .vital-label { font-size: 8px; text-transform: uppercase; letter-spacing: 1px; color: #484f58; }
+  .vital-value { font-size: 16px; font-weight: 700; line-height: 1; }
+  .vital-unit { font-size: 8px; color: #484f58; font-weight: 400; }
+  .vital-bar { height: 2px; border-radius: 1px; background: #161b22; margin-top: 4px; }
+  .vital-bar-fill { height: 100%; border-radius: 1px; transition: width 0.8s ease; }
+  .vital-cell.cpu .vital-value { color: #58a6ff; }
+  .vital-cell.cpu .vital-bar-fill { background: #58a6ff; }
+  .vital-cell.mem .vital-value { color: #f0883e; }
+  .vital-cell.mem .vital-bar-fill { background: #f0883e; }
+  .vital-cell.tokens .vital-value { color: #d2a8ff; }
+  .vital-cell.tokens .vital-bar-fill { background: #d2a8ff; }
+  .vital-cell.uptime .vital-value { color: #3fb950; }
+  .vitals-wave {
+    height: 32px; padding: 0 10px; border-top: 1px solid #161b22;
+    display: flex; align-items: center; gap: 8px;
+  }
+  .vitals-wave canvas { width: 100%; height: 24px; }
+  .vitals-wave-label { font-size: 8px; color: #f85149; text-transform: uppercase; letter-spacing: 1px; flex-shrink: 0; }
+  .vital-cell.wide { grid-column: 1 / -1; }
+  .panel-right { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: #0d1117; overflow: hidden; position: relative; }
+  .conversation {
+    flex: 1; overflow-y: auto; padding: 16px 20px; font-size: 12px; line-height: 1.8;
+    font-family: 'IBM Plex Mono', monospace;
+  }
+  .conversation:empty::before { content: "Conversation will appear here..."; color: #484f58; }
+  .conv-msg { margin-bottom: 3px; animation: fade-in 0.2s ease-out; }
+  .conv-msg.user { color: #b1bac4; }
+  .conv-msg.user .label { color: #58a6ff; font-weight: 600; }
+  .conv-msg.telegram { border-left: 2px solid #2AABEE; padding-left: 8px; }
+  .conv-msg.telegram .label.tg { color: #2AABEE; }
+  .conv-msg.assistant { color: #e6edf3; }
+  .conv-msg.assistant .label { color: #3fb950; font-weight: 600; }
+  .conv-msg.tool { color: #d29922; }
+  .conv-msg.agent-working { display: flex; align-items: center; gap: 10px; height: 32px; overflow: hidden; }
+  .agent-working-spinner {
+    width: 18px; height: 18px; flex-shrink: 0;
+    border: 2px solid rgba(255,79,99,0.2); border-top-color: #ff4f63;
+    border-radius: 50%; animation: agentSpin 0.8s linear infinite;
+  }
+  @keyframes agentSpin { to { transform: rotate(360deg); } }
+  .agent-working-text { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  .agent-working-verb { color: #8b949e; font-style: italic; animation: verbPulse 2s ease-in-out infinite; }
+  .agent-working-name { color: #ff4f63; font-weight: 600; }
+  .agent-working-sep { color: #e6edf3; font-weight: 600; }
+  .agent-working-query { color: #8b949e; }
+  .conv-msg.memory-saving { display: flex; align-items: center; gap: 8px; height: 28px; overflow: hidden; }
+  .memory-saving-spinner {
+    width: 14px; height: 14px; flex-shrink: 0;
+    border: 2px solid rgba(163,113,247,0.2); border-top-color: #a371f7;
+    border-radius: 50%; animation: agentSpin 1.2s linear infinite;
+  }
+  .memory-saving-text { font-size: 11px; color: #a371f7; font-style: italic; animation: verbPulse 2s ease-in-out infinite; }
+  .memory-saving-detail { font-size: 10px; color: #8b949e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  .conv-msg.tool-call { color: #d2a8ff; font-size: 11px; }
+  .conv-msg.tool-call .label { color: #bc8cff; font-weight: 600; }
+  .conv-msg.tool-result { color: #7ee787; font-size: 11px; }
+  .conv-msg.tool-result.error { color: #f85149; }
+  .conv-msg.tool-result .label { font-weight: 600; }
+  .tool-activity { margin-bottom: 3px; overflow: hidden; height: 32px; display: flex; align-items: center; gap: 8px; }
+  .tool-activity .tool-sprite {
+    flex-shrink: 0; width: 24px; height: 24px;
+    display: grid; grid-template-columns: repeat(10,2.4px); grid-template-rows: repeat(10,2.4px);
+    image-rendering: pixelated;
+    animation: spriteFloat 1.8s ease-in-out infinite, spriteGlow 1.4s ease-in-out infinite;
+  }
+  .tool-activity .tool-sprite .px { width: 2.4px; height: 2.4px; }
+  .tool-activity .tool-sprite .px-o { background: #12070b; }
+  .tool-activity .tool-sprite .px-f { background: #ff4f63; animation: spriteColor 2.8s ease-in-out infinite; }
+  .tool-activity .tool-sprite .px-e { background: transparent; }
+  .tool-activity .tool-verb { color: #8b949e; font-size: 11px; font-style: italic; white-space: nowrap; flex-shrink: 0; animation: verbPulse 2s ease-in-out infinite; }
+  .tool-activity .tool-activity-body { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; line-height: 32px; }
+  .tool-activity .tool-activity-body .tool-call,
+  .tool-activity .tool-activity-body .tool-result { display: inline; animation: toolFadeIn 0.2s ease-out; }
+  .tool-activity .tool-call,
+  .tool-activity .tool-result { color: #d2a8ff; font-size: 11px; }
+  .tool-activity .tool-call .label { color: #bc8cff; font-weight: 600; }
+  .tool-activity .tool-call .skill-label { color: #f0883e; }
+  .tool-activity .tool-call .skill-name { color: #ffa657; font-weight: 500; }
+  .tool-activity .tool-call .tool-args { display: inline; margin: 0; font-size: 11px; }
+  .tool-activity .tool-result { color: #7ee787; }
+  .tool-activity .tool-result.error { color: #f85149; }
+  .tool-activity .tool-result .label { font-weight: 600; }
+  .tool-activity .tool-result.thinking-fallback .label { color: #8b949e; font-style: italic; font-weight: 400; animation: verbPulse 2s ease-in-out infinite; }
+  .tool-activity .tool-result .tool-content { display: inline; margin: 0; padding: 0; background: none; font-size: 11px; max-height: none; overflow: hidden; }
+  .tool-activity-summary { cursor: pointer; color: #8b949e; font-size: 11px; line-height: 32px; }
+  .tool-activity-summary:hover { color: #c9d1d9; }
+  .tool-summary-toggle { user-select: none; }
+  .tool-activity.expanded { height: auto; }
+  .tool-activity.expanded .tool-activity-body { overflow: visible; white-space: normal; }
+  @keyframes toolFadeIn {
+    from { opacity: 0; transform: translateY(3px); }
+    to { opacity: 1; transform: translateY(0); }
+  }
+  @keyframes toolSummaryIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
+  @keyframes spriteFloat {
+    0%, 100% { transform: translateY(0) scale(1); }
+    50% { transform: translateY(-3px) scale(1.05); }
+  }
+  @keyframes spriteGlow {
+    0%, 100% { filter: drop-shadow(0 0 2px rgba(255,79,99,0.6)) drop-shadow(0 0 5px rgba(255,79,99,0.3)); }
+    50% { filter: drop-shadow(0 0 5px rgba(255,79,99,1)) drop-shadow(0 0 10px rgba(255,79,99,0.6)); }
+  }
+  @keyframes spriteColor {
+    0%, 100% { background: #ff4f63; }
+    33% { background: #ff6b7a; }
+    66% { background: #ff2040; }
+  }
+  @keyframes verbPulse {
+    0%, 100% { opacity: 0.6; }
+    50% { opacity: 1; }
+  }
+  .conv-msg.thinking { color: #6e7681; font-size: 11px; font-style: italic; }
+  .conv-msg .tool-args { color: #8b949e; font-size: 10px; margin-top: 2px; word-break: break-all; max-height: 60px; overflow: hidden; }
+  .conv-msg .tool-content { color: #8b949e; font-size: 10px; margin-top: 2px; white-space: pre-wrap; max-height: 80px; overflow-y: auto; background: #161b22; border-radius: 4px; padding: 4px 8px; }
+  .conv-msg.system { color: #8b949e; font-style: italic; }
+  .input-bar { display: flex; padding: 12px 16px; border-top: 1px solid #21262d; gap: 8px; }
+  .input-bar input {
+    flex: 1; background: #161b22; border: 1px solid #21262d; border-radius: 6px;
+    padding: 10px 14px; color: #e6edf3; font-family: 'IBM Plex Mono', monospace; font-size: 13px; outline: none;
+  }
+  .input-bar input:focus { border-color: #58a6ff; }
+  .input-bar input::placeholder { color: #484f58; }
+  .input-bar button {
+    background: #238636; border: none; border-radius: 6px; color: #fff;
+    font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; padding: 10px 18px; cursor: pointer;
+  }
+  .input-bar button:hover { background: #2ea043; }
+  .attach-btn {
+    background: transparent; border: 1px solid #21262d; border-radius: 6px; color: #8b949e;
+    font-size: 16px; padding: 6px 10px; cursor: pointer; display: flex; align-items: center;
+    transition: border-color 0.15s, color 0.15s;
+  }
+  .attach-btn:hover { border-color: #58a6ff; color: #58a6ff; }
+  .attach-btn svg { width: 18px; height: 18px; }
+  .file-preview-bar {
+    display: none; padding: 6px 16px; border-top: 1px solid #21262d; gap: 6px; flex-wrap: wrap;
+    background: #0d1117;
+  }
+  .file-preview-bar.active { display: flex; }
+  .file-chip {
+    display: flex; align-items: center; gap: 6px; background: #161b22; border: 1px solid #21262d;
+    border-radius: 4px; padding: 4px 8px; font-size: 11px; color: #8b949e;
+    font-family: 'IBM Plex Mono', monospace;
+  }
+  .file-chip img { max-height: 32px; max-width: 48px; border-radius: 2px; }
+  .file-chip .remove-file {
+    background: none; border: none; color: #484f58; cursor: pointer; font-size: 14px;
+    padding: 0 2px; line-height: 1;
+  }
+  .file-chip .remove-file:hover { color: #f85149; }
+  .drop-overlay {
+    display: none; position: absolute; inset: 0; background: rgba(88,166,255,0.08);
+    border: 2px dashed #58a6ff; border-radius: 8px; z-index: 100;
+    align-items: center; justify-content: center; font-size: 14px; color: #58a6ff;
+    font-family: 'IBM Plex Mono', monospace; pointer-events: none;
+  }
+  .drop-overlay.active { display: flex; }
+  /* Audit mode toggle in header */
+  .audit-toggle {
+    display: flex; align-items: center; gap: 6px; cursor: pointer;
+    font-size: 11px; color: #8b949e; font-family: 'IBM Plex Mono', monospace;
+    padding: 3px 10px; border-radius: 4px; border: 1px solid #21262d;
+    background: transparent; transition: all 0.2s ease; user-select: none;
+  }
+  .audit-toggle:hover { border-color: #30363d; color: #b1bac4; }
+  .audit-toggle.active { border-color: #3fb950; color: #3fb950; background: rgba(63,185,80,0.08); }
+  .audit-toggle .audit-dot {
+    width: 6px; height: 6px; border-radius: 50%; background: #484f58;
+    transition: background 0.2s, box-shadow 0.2s;
+  }
+  .audit-toggle.active .audit-dot {
+    background: #3fb950;
+    box-shadow: 0 0 6px rgba(63,185,80,0.6);
+  }
+  @keyframes audit-dot-pulse {
+    0%,100% { box-shadow: 0 0 6px rgba(63,185,80,0.6); }
+    50% { box-shadow: 0 0 12px rgba(63,185,80,0.9); }
+  }
+  .audit-toggle.active.recording .audit-dot {
+    animation: audit-dot-pulse 1.5s ease-in-out infinite;
+  }
+  /* Files panel (right side of chat) — contains tree + inline diff viewer */
+  .files-panel {
+    width: 40vw; min-width: 200px; background: #0e1117; border-left: 1px solid #21262d;
+    display: flex; flex-direction: column; overflow: hidden; position: relative;
+    transition: opacity 0.25s ease;
+  }
+  .files-panel.collapsed { min-width: 0; }
+  .files-panel.collapsed {
+    width: 0 !important; min-width: 0 !important; opacity: 0; pointer-events: none; border-left: none;
+  }
+  /* Resize handles */
+  .resize-handle-x {
+    position: absolute; left: -3px; top: 0; bottom: 0; width: 6px;
+    cursor: col-resize; z-index: 20;
+  }
+  .resize-handle-x:hover, .resize-handle-x.active { background: rgba(88,166,255,0.3); }
+  .resize-handle-y {
+    height: 6px; cursor: row-resize; flex-shrink: 0; position: relative;
+  }
+  .resize-handle-y:hover, .resize-handle-y.active { background: rgba(88,166,255,0.3); }
+  .resize-handle-y::after {
+    content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
+    width: 24px; height: 2px; background: #30363d; border-radius: 1px;
+  }
+  .files-panel-header {
+    padding: 10px 16px; font-size: 11px; color: #8b949e; font-weight: 600;
+    text-transform: uppercase; letter-spacing: 0.5px;
+    display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #21262d;
+    flex-shrink: 0;
+  }
+  .files-panel-header .fp-title { display: flex; align-items: center; gap: 8px; }
+  .files-panel-header .fp-count {
+    font-size: 9px; background: rgba(63,185,80,0.15); color: #3fb950;
+    padding: 1px 6px; border-radius: 8px; font-weight: 500; min-width: 18px; text-align: center;
+    transition: opacity 0.3s, transform 0.3s;
+  }
+  .files-panel-header .fp-count.hidden { opacity: 0; transform: scale(0.5); pointer-events: none; }
+  .files-panel-header button {
+    background: none; border: none; color: #8b949e; cursor: pointer;
+    font-size: 14px; padding: 2px 6px; border-radius: 3px; font-family: inherit;
+  }
+  .files-panel-header button:hover { color: #58a6ff; background: rgba(88,166,255,0.08); }
+  /* File tree area */
+  .files-panel .file-tree { flex: 1; overflow-y: auto; padding: 4px 0; min-height: 80px; }
+  /* File tree change animations */
+  @keyframes file-pulse {
+    0%   { background: transparent; box-shadow: none; }
+    15%  { background: rgba(63,185,80,0.18); box-shadow: inset 0 0 12px rgba(63,185,80,0.15), 0 0 8px rgba(63,185,80,0.1); }
+    100% { background: transparent; box-shadow: none; }
+  }
+  @keyframes file-slide-in {
+    0% { opacity: 0; transform: translateX(12px); }
+    100% { opacity: 1; transform: translateX(0); }
+  }
+  .ft-item.changed, summary.changed { animation: file-pulse 2s ease-out; }
+  .ft-item.new-file, summary.new-file { animation: file-slide-in 0.3s ease-out, file-pulse 2s ease-out 0.3s; }
+  .ft-item { position: relative; }
+  .ft-badge {
+    margin-left: auto; font-size: 9px; font-weight: 600; padding: 1px 5px;
+    border-radius: 3px; letter-spacing: 0.3px; flex-shrink: 0;
+  }
+  .ft-badge.pop { animation: badge-pop 0.35s cubic-bezier(0.34,1.56,0.64,1); }
+  @keyframes badge-pop { 0% { opacity: 0; transform: scale(0.3); } 100% { opacity: 1; transform: scale(1); } }
+  .ft-badge.edited { background: rgba(63,185,80,0.15); color: #3fb950; }
+  .ft-badge.edited.pop { box-shadow: 0 0 8px rgba(63,185,80,0.4); }
+  .ft-badge.new { background: rgba(88,166,255,0.15); color: #58a6ff; }
+  .ft-badge.new.pop { box-shadow: 0 0 8px rgba(88,166,255,0.4); }
+  .ft-item .ft-gutter {
+    position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
+    border-radius: 0 2px 2px 0;
+  }
+  .ft-gutter.edited { background: #3fb950; }
+  .ft-gutter.new { background: #58a6ff; }
+  /* Inline diff viewer (inside files-panel, below tree) */
+  .diff-viewer {
+    background: #0a0d12;
+    display: flex; flex-direction: column; overflow: hidden;
+    height: 0; opacity: 0; flex-shrink: 0;
+    transition: height 0.35s cubic-bezier(0.4,0,0.2,1), opacity 0.25s ease;
+  }
+  .diff-viewer.open {
+    height: 280px; opacity: 1;
+  }
+  .diff-viewer-header {
+    display: flex; align-items: center; justify-content: space-between;
+    padding: 6px 12px; border-bottom: 1px solid #161b22; flex-shrink: 0;
+  }
+  .diff-viewer-header .dv-left { display: flex; align-items: center; gap: 8px; overflow: hidden; }
+  .diff-viewer-header .dv-path {
+    font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: #b1bac4;
+    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  }
+  .diff-viewer-header .dv-status {
+    font-size: 8px; font-weight: 700; padding: 2px 6px; border-radius: 3px;
+    flex-shrink: 0; text-transform: uppercase; letter-spacing: 0.5px;
+  }
+  .dv-status.edited { background: rgba(63,185,80,0.15); color: #3fb950; }
+  .dv-status.viewing { background: rgba(88,166,255,0.1); color: #58a6ff; }
+  .diff-viewer-header button {
+    background: none; border: none; color: #484f58; cursor: pointer;
+    font-size: 14px; padding: 2px 6px; border-radius: 3px;
+  }
+  .diff-viewer-header button:hover { color: #e6edf3; background: #161b22; }
+  /* Auto-close countdown bar */
+  .dv-countdown {
+    height: 2px; background: #3fb950; transition: width 2s linear;
+    flex-shrink: 0;
+  }
+  .dv-countdown.done { width: 0 !important; }
+  .diff-viewer-content {
+    flex: 1; overflow: auto; padding: 0; margin: 0; position: relative;
+  }
+  .dv-md-toggle { display: flex; align-items: center; }
+  .dv-md-toggle.active { color: #58a6ff !important; }
+  .dv-markdown {
+    padding: 16px 20px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
+    font-size: 13px; line-height: 1.6; color: #e6edf3;
+  }
+  .dv-markdown.hidden, .dv-image.hidden { display: none; }
+  .dv-image {
+    display: flex; align-items: center; justify-content: center; padding: 20px;
+    flex: 1; background: #0a0d12; overflow: auto;
+  }
+  .dv-image img {
+    max-width: 100%; max-height: 100%; object-fit: contain;
+    border-radius: 6px; border: 1px solid #21262d;
+    background: repeating-conic-gradient(#1c2129 0% 25%, #161b22 0% 50%) 0 0 / 16px 16px;
+  }
+  .dv-image .img-meta {
+    position: absolute; bottom: 8px; right: 12px; font-size: 10px; color: #484f58;
+    font-family: 'IBM Plex Mono', monospace;
+  }
+  .dv-markdown h1 { font-size: 1.6em; font-weight: 600; border-bottom: 1px solid #21262d; padding-bottom: 6px; margin: 16px 0 8px; color: #f0f6fc; }
+  .dv-markdown h2 { font-size: 1.3em; font-weight: 600; border-bottom: 1px solid #21262d; padding-bottom: 4px; margin: 14px 0 6px; color: #f0f6fc; }
+  .dv-markdown h3 { font-size: 1.1em; font-weight: 600; margin: 12px 0 4px; color: #f0f6fc; }
+  .dv-markdown h4, .dv-markdown h5, .dv-markdown h6 { font-size: 1em; font-weight: 600; margin: 10px 0 4px; color: #e6edf3; }
+  .dv-markdown p { margin: 0 0 10px; }
+  .dv-markdown ul, .dv-markdown ol { padding-left: 24px; margin: 0 0 10px; }
+  .dv-markdown li { margin: 2px 0; }
+  .dv-markdown code {
+    background: rgba(110,118,129,0.15); padding: 2px 5px; border-radius: 3px;
+    font-family: 'JetBrains Mono', 'IBM Plex Mono', monospace; font-size: 0.9em;
+  }
+  .dv-markdown pre {
+    background: #161b22; border: 1px solid #21262d; border-radius: 6px;
+    padding: 12px 16px; overflow-x: auto; margin: 0 0 12px;
+  }
+  .dv-markdown pre code { background: none; padding: 0; font-size: 12px; }
+  .dv-markdown blockquote {
+    border-left: 3px solid #30363d; padding: 4px 16px; margin: 0 0 10px; color: #8b949e;
+  }
+  .dv-markdown a { color: #58a6ff; text-decoration: none; }
+  .dv-markdown a:hover { text-decoration: underline; }
+  .dv-markdown hr { border: none; border-top: 1px solid #21262d; margin: 16px 0; }
+  .dv-markdown strong { color: #f0f6fc; }
+  .dv-markdown table { border-collapse: collapse; margin: 0 0 12px; width: 100%; }
+  .dv-markdown th, .dv-markdown td { border: 1px solid #21262d; padding: 6px 12px; text-align: left; }
+  .dv-markdown th { background: #161b22; font-weight: 600; }
+  .dv-markdown img { max-width: 100%; border-radius: 6px; }
+  .diff-viewer-content pre {
+    margin: 0; padding: 8px 0; font-family: 'JetBrains Mono', 'IBM Plex Mono', monospace;
+    font-size: 11px; line-height: 1.55; color: #e6edf3; white-space: pre;
+    counter-reset: line;
+  }
+  .diff-viewer-content .dv-line {
+    display: block; padding: 0 10px 0 52px; position: relative; min-height: 1.55em;
+  }
+  .diff-viewer-content .dv-line::before {
+    content: counter(line); counter-increment: line;
+    position: absolute; left: 0; width: 36px; text-align: right; padding-right: 8px;
+    color: #484f58; font-size: 10px; user-select: none;
+  }
+  .diff-viewer-content .dv-line:hover { background: rgba(88,166,255,0.04); }
+  .diff-viewer-content .dv-line .dv-gutter {
+    position: absolute; left: 40px; top: 2px; bottom: 2px; width: 3px;
+    border-radius: 2px;
+  }
+  .dv-gutter.g-added { background: #3fb950; box-shadow: 0 0 6px rgba(63,185,80,0.5); }
+  .dv-gutter.g-modified { background: #d29922; box-shadow: 0 0 6px rgba(210,153,34,0.5); }
+  @keyframes dv-line-flash {
+    0%   { background: rgba(63,185,80,0.3); box-shadow: inset 0 0 20px rgba(63,185,80,0.15); }
+    40%  { background: rgba(63,185,80,0.12); box-shadow: inset 0 0 8px rgba(63,185,80,0.06); }
+    100% { background: transparent; box-shadow: none; }
+  }
+  .dv-line.line-changed { animation: dv-line-flash 2s ease-out forwards; border-left: 2px solid rgba(210,153,34,0.4); padding-left: 50px; }
+  .dv-line.line-added   { animation: dv-line-flash 2s ease-out forwards; border-left: 2px solid rgba(63,185,80,0.4); padding-left: 50px; }
+  @keyframes dv-line-enter {
+    0% { opacity: 0; transform: translateX(6px); }
+    100% { opacity: 1; transform: translateX(0); }
+  }
+  .dv-line.line-enter { animation: dv-line-enter 0.15s ease-out forwards; }
+  /* FILES VIEW (disabled)
+  .files-view { display: flex; flex: 1; overflow: hidden; }
+  .files-view.hidden { display: none; }
+  .activity-bar {
+    width: 48px; min-width: 48px; background: #0a0d12; border-right: 1px solid #21262d;
+    display: flex; flex-direction: column; align-items: center; padding: 8px 0; gap: 4px;
+  }
+  .activity-btn {
+    width: 36px; height: 36px; border-radius: 6px; border: none; background: transparent;
+    color: #8b949e; cursor: pointer; display: flex; align-items: center; justify-content: center;
+    transition: all 0.15s; position: relative;
+  }
+  .activity-btn:hover { color: #e6edf3; background: #161b22; }
+  .activity-btn.active { color: #e6edf3; }
+  .activity-btn.active::before {
+    content: ''; position: absolute; left: 0; top: 6px; bottom: 6px;
+    width: 2px; background: #58a6ff; border-radius: 0 2px 2px 0;
+  }
+  .activity-btn svg { width: 20px; height: 20px; }
+  .file-sidebar {
+    width: 260px; min-width: 260px; background: #0e1117; border-right: 1px solid #21262d;
+    display: flex; flex-direction: column; overflow: hidden;
+  }
+  .file-sidebar-header {
+    padding: 10px 16px; font-size: 11px; color: #8b949e; font-weight: 600;
+    text-transform: uppercase; letter-spacing: 0.5px;
+    display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #21262d;
+  }
+  .file-sidebar-header button {
+    background: none; border: none; color: #8b949e; cursor: pointer;
+    font-size: 11px; padding: 2px 6px; border-radius: 3px; font-family: inherit;
+  }
+  .file-sidebar-header button:hover { color: #58a6ff; background: rgba(88,166,255,0.08); }
+  .file-tree { flex: 1; overflow-y: auto; padding: 4px 0; }
+  /* File tree — native <details>/<summary> based */
+  .ft-dir { border: none; margin: 0; padding: 0; }
+  .ft-dir > summary {
+    display: flex; align-items: center; gap: 4px; padding: 3px 8px; font-size: 13px;
+    cursor: pointer; color: #b1bac4; white-space: nowrap; overflow: hidden;
+    text-overflow: ellipsis; font-family: 'IBM Plex Mono', monospace;
+    list-style: none; transition: background 0.1s; user-select: none;
+  }
+  .ft-dir > summary::-webkit-details-marker { display: none; }
+  .ft-dir > summary::marker { display: none; content: ''; }
+  .ft-dir > summary:hover { background: #161b22; }
+  .ft-dir > .ft-children { margin: 0; padding: 0; }
+  .ft-item {
+    display: flex; align-items: center; gap: 4px; padding: 3px 8px; font-size: 13px;
+    cursor: pointer; color: #b1bac4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+    transition: background 0.1s; font-family: 'IBM Plex Mono', monospace;
+  }
+  .ft-item:hover { background: #161b22; }
+  .ft-item.active-viewer { background: rgba(88,166,255,0.08); color: #e6edf3; }
+  .ft-icon { width: 16px; height: 16px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
+  .ft-chevron { width: 14px; height: 14px; flex-shrink: 0; color: #484f58; display: flex; align-items: center; justify-content: center; transition: transform 0.15s; }
+  .ft-dir[open] > summary .ft-chevron { transform: rotate(90deg); }
+  .ft-name { overflow: hidden; text-overflow: ellipsis; margin-left: 2px; }
+  .ft-icon.folder { color: #d29922; }
+  .ft-icon.ts { color: #58a6ff; }
+  .ft-icon.js { color: #f0db4f; }
+  .ft-icon.json { color: #d4883b; }
+  .ft-icon.css { color: #d291ff; }
+  .ft-icon.html { color: #f06529; }
+  .ft-icon.md { color: #8b949e; }
+  .ft-icon.yaml { color: #cb4a32; }
+  .ft-icon.py { color: #3572A5; }
+  .ft-icon.sh { color: #89e051; }
+  .ft-icon.default { color: #6e7681; }
+  .editor-area { flex: 1; display: flex; flex-direction: column; min-width: 0; background: #0d1117; }
+  .editor-tabs {
+    display: flex; background: #0a0d12; border-bottom: 1px solid #21262d; overflow-x: auto; min-height: 35px;
+  }
+  .editor-tabs:empty { display: none; }
+  .ed-tab {
+    display: flex; align-items: center; gap: 6px; padding: 0 14px; font-size: 12px;
+    font-family: 'IBM Plex Mono', monospace; cursor: pointer; border-right: 1px solid #21262d;
+    color: #8b949e; background: #0a0d12; flex-shrink: 0; transition: all 0.1s; height: 35px;
+  }
+  .ed-tab:hover { color: #b1bac4; }
+  .ed-tab.active { background: #0d1117; color: #e6edf3; border-top: 2px solid #58a6ff; }
+  .ed-tab:not(.active) { border-top: 2px solid transparent; }
+  .ed-tab .tab-icon { width: 14px; height: 14px; flex-shrink: 0; display: flex; align-items: center; }
+  .ed-tab .tab-modified { width: 6px; height: 6px; border-radius: 50%; background: #58a6ff; flex-shrink: 0; }
+  .ed-tab .tab-close {
+    width: 18px; height: 18px; border: none; background: transparent; color: #8b949e;
+    cursor: pointer; border-radius: 3px; display: flex; align-items: center; justify-content: center;
+    opacity: 0; transition: opacity 0.1s; font-size: 14px; margin-left: 4px;
+  }
+  .ed-tab:hover .tab-close { opacity: 1; }
+  .ed-tab .tab-close:hover { background: #21262d; color: #e6edf3; }
+  .editor-container { flex: 1; overflow: hidden; }
+  .editor-empty {
+    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
+    color: #484f58; gap: 12px;
+  }
+  .editor-empty svg { width: 48px; height: 48px; opacity: 0.2; }
+  .editor-empty p { font-size: 13px; }
+  .editor-empty .shortcuts { display: flex; gap: 20px; font-size: 11px; color: #6e7681; margin-top: 4px; }
+  .editor-empty .shortcuts kbd {
+    background: #161b22; padding: 2px 6px; border-radius: 3px;
+    font-family: 'IBM Plex Mono', monospace; font-size: 10px; border: 1px solid #21262d; margin-right: 4px;
+  }
+  .status-bar {
+    height: 24px; min-height: 24px; background: #1a3a5c; border-top: 1px solid #21262d;
+    display: flex; align-items: center; padding: 0 12px; font-size: 11px; color: #8b949e; gap: 16px;
+    font-family: 'IBM Plex Mono', monospace;
+  }
+  .status-bar .sb-right { margin-left: auto; display: flex; gap: 16px; }
+  FILES VIEW (disabled) */
+  /* Scrollbar — dark theme */
+  * { scrollbar-width: thin; scrollbar-color: rgba(139,148,158,0.25) transparent; }
+  ::-webkit-scrollbar { width: 6px; height: 6px; }
+  ::-webkit-scrollbar-track { background: transparent; }
+  ::-webkit-scrollbar-thumb { background: rgba(139,148,158,0.2); border-radius: 3px; }
+  ::-webkit-scrollbar-thumb:hover { background: rgba(139,148,158,0.35); }
+  ::-webkit-scrollbar-corner { background: transparent; }
+  /* INTEGRATIONS VIEW */
+  .integrations-view { display: flex; flex-direction: column; flex: 1; overflow: hidden; }
+  .integrations-view.hidden { display: none; }
+  .integrations-header {
+    display: flex; align-items: center; justify-content: space-between;
+    padding: 16px 20px; border-bottom: 1px solid #21262d;
+  }
+  .integrations-header h2 { font-size: 15px; font-weight: 600; font-family: 'IBM Plex Mono', monospace; color: #e6edf3; }
+  .integrations-header button {
+    background: #161b22; border: 1px solid #21262d; border-radius: 6px; color: #8b949e;
+    font-family: 'IBM Plex Mono', monospace; font-size: 11px; padding: 6px 14px; cursor: pointer;
+  }
+  .integrations-header button:hover { border-color: #30363d; color: #b1bac4; }
+  .integrations-grid {
+    flex: 1; overflow-y: auto; padding: 20px;
+    display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px;
+    align-content: start;
+  }
+  .integrations-empty {
+    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
+    color: #484f58; gap: 8px; font-size: 13px; font-family: 'IBM Plex Mono', monospace;
+  }
+  .toolkit-card {
+    background: #161b22; border: 1px solid #21262d; border-radius: 8px; padding: 16px;
+    display: flex; flex-direction: column; gap: 10px; transition: border-color 0.15s;
+  }
+  .toolkit-card:hover { border-color: #30363d; }
+  .toolkit-card .tk-top { display: flex; align-items: center; gap: 10px; }
+  .toolkit-card .tk-logo {
+    width: 36px; height: 36px; border-radius: 8px; object-fit: contain; background: #0d1117;
+    flex-shrink: 0;
+  }
+  .toolkit-card .tk-logo-placeholder {
+    width: 36px; height: 36px; border-radius: 8px; background: #21262d;
+    display: flex; align-items: center; justify-content: center; font-size: 16px; color: #484f58;
+    flex-shrink: 0;
+  }
+  .toolkit-card .tk-name { font-size: 13px; font-weight: 600; color: #e6edf3; }
+  .toolkit-card .tk-desc {
+    font-size: 11px; color: #8b949e; line-height: 1.5;
+    overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
+  }
+  .toolkit-card .tk-actions { margin-top: auto; }
+  .tk-btn {
+    width: 100%; padding: 8px; border-radius: 6px; font-family: 'IBM Plex Mono', monospace;
+    font-size: 11px; font-weight: 600; cursor: pointer; border: none; transition: all 0.15s;
+  }
+  .tk-btn.connect { background: #238636; color: #fff; }
+  .tk-btn.connect:hover { background: #2ea043; }
+  .tk-btn.connected { background: rgba(63,185,80,0.12); color: #3fb950; border: 1px solid #23612c; }
+  .tk-btn.connected:hover { background: rgba(248,81,73,0.12); color: #f85149; border-color: #da3633; }
+  /* Skills Marketplace view */
+  .skills-view.hidden { display: none !important; }
+  /* Communication view */
+  .comms-view { display: flex; flex-direction: column; flex: 1; overflow: hidden; }
+  .comms-view.hidden { display: none; }
+  .comms-header {
+    display: flex; flex-direction: column; gap: 4px;
+    padding: 16px 20px; border-bottom: 1px solid #21262d;
+  }
+  .comms-header h2 { font-size: 15px; font-weight: 600; font-family: 'IBM Plex Mono', monospace; color: #e6edf3; margin: 0; }
+  .comms-subtitle { font-size: 12px; color: #484f58; }
+  .comms-content {
+    flex: 1; overflow-y: auto; padding: 20px;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    gap: 16px;
+    align-content: start;
+  }
+  .comms-card {
+    background: #161b22; border: 1px solid #21262d; border-radius: 12px; padding: 24px;
+    display: flex; flex-direction: column; gap: 16px;
+    transition: border-color 0.2s ease;
+  }
+  .comms-card:hover { border-color: #30363d; }
+  .comms-card.telegram { border-top: 2px solid #2AABEE; }
+  .comms-card.whatsapp { border-top: 2px solid #25D366; }
+  .comms-card.phone { border-top: 2px solid #f44336; }
+  .comms-card-top { display: flex; align-items: flex-start; gap: 14px; }
+  .comms-card-icon {
+    width: 48px; height: 48px; border-radius: 12px; background: #0d1117;
+    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
+    color: #58a6ff;
+  }
+  .comms-card-icon svg { width: 28px; height: 28px; }
+  .comms-card-icon.telegram { color: #2AABEE; background: rgba(42,171,238,0.08); }
+  .comms-card-icon.whatsapp { color: #25D366; background: rgba(37,211,102,0.08); }
+  .comms-card-icon.phone { color: #f44336; background: rgba(244,67,54,0.08); }
+  .phone-url-box {
+    display: flex; align-items: center; gap: 8px; padding: 10px 12px;
+    background: #0d1117; border: 1px solid #21262d; border-radius: 8px; font-size: 12px;
+  }
+  .phone-url-box code {
+    flex: 1; color: #e6edf3; font-family: 'IBM Plex Mono', monospace; word-break: break-all;
+    font-size: 11px;
+  }
+  .phone-url-box .copy-btn {
+    background: none; border: 1px solid #30363d; color: #8b949e; border-radius: 6px;
+    padding: 4px 10px; cursor: pointer; font-size: 11px; white-space: nowrap;
+  }
+  .phone-url-box .copy-btn:hover { color: #e6edf3; border-color: #58a6ff; }
+  .phone-url-box .copy-btn.copied { color: #3fb950; border-color: #3fb950; }
+  .conv-msg.whatsapp { border-left: 2px solid #25D366; padding-left: 8px; }
+  .conv-msg.whatsapp .label.wa { color: #25D366; }
+  .comms-status.scanning { background: rgba(210,153,34,0.12); color: #d29922; }
+  .wa-qr-container { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px; }
+  .wa-qr-container canvas { border-radius: 8px; background: #fff; padding: 8px; }
+  .wa-qr-hint { font-size: 10px; color: #8b949e; text-align: center; }
+  .wa-clear-auth { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #8b949e; }
+  .wa-clear-auth input { accent-color: #f85149; }
+  .comms-card-info { display: flex; flex-direction: column; gap: 3px; flex: 1; }
+  .comms-card-name { font-size: 14px; font-weight: 600; color: #e6edf3; }
+  .comms-card-desc { font-size: 11px; color: #8b949e; line-height: 1.5; }
+  .comms-status {
+    font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 10px;
+    flex-shrink: 0; text-transform: uppercase; letter-spacing: 0.5px;
+  }
+  .comms-status.connected { background: rgba(63,185,80,0.12); color: #3fb950; }
+  .comms-status.disconnected { background: rgba(139,148,158,0.1); color: #484f58; }
+  .comms-status.error { background: rgba(248,81,73,0.12); color: #f85149; }
+  .comms-card-config { display: flex; flex-direction: column; gap: 12px; }
+  .comms-field { display: flex; flex-direction: column; gap: 5px; }
+  .comms-field label {
+    font-size: 11px; font-weight: 600; color: #8b949e; text-transform: uppercase;
+    letter-spacing: 0.3px;
+  }
+  .comms-field input {
+    background: #0d1117; border: 1px solid #21262d; border-radius: 6px; padding: 8px 12px;
+    color: #e6edf3; font-family: 'IBM Plex Mono', monospace; font-size: 12px;
+    outline: none; transition: border-color 0.15s;
+  }
+  .comms-field input:focus { border-color: #58a6ff; }
+  .comms-field input::placeholder { color: #30363d; }
+  .comms-hint { font-size: 10px; color: #484f58; }
+  .comms-hint a { color: #58a6ff; text-decoration: none; }
+  .comms-hint a:hover { text-decoration: underline; }
+  .comms-card-actions { display: flex; gap: 8px; }
+  .comms-card.is-connected .comms-card-config { display: none; }
+  .comms-bot-info {
+    display: flex; align-items: center; gap: 10px; padding: 10px 14px;
+    background: rgba(63,185,80,0.06); border: 1px solid #23612c; border-radius: 8px;
+  }
+  .comms-bot-info .bot-name { font-size: 13px; font-weight: 600; color: #3fb950; }
+  .comms-bot-info .bot-username { font-size: 11px; color: #8b949e; }
+  @keyframes fade-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } }
+  @media (max-width: 700px) {
+    .chat-view { flex-direction: column; }
+    .panel-cam { width: 100%; min-width: 0; border-right: none; border-bottom: 1px solid #21262d; }
+    .camera-container { aspect-ratio: 16/9; }
+    .activity-bar { display: none; }
+    .file-sidebar { width: 100%; min-width: 0; max-height: 40vh; border-right: none; border-bottom: 1px solid #21262d; }
+    .files-panel { position: absolute; right: 0; top: 0; bottom: 0; z-index: 50; width: 280px; min-width: 280px; }
+  }
+</style>
+</head>
+<body>
+<div class="header">
+  <div class="header-left">
+    <div class="header-logo" id="headerLogo"></div>
+    <h1>Gitclaw: {{AGENT_NAME}}</h1>
+    <button class="chat-sidebar-toggle" id="chatSidebarToggle" onclick="toggleChatSidebar()" title="Toggle chat list">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="9" y1="3" x2="9" y2="21"/></svg>
+    </button>
+    <div class="view-tabs">
+      <button class="view-tab active" id="tabChat" onclick="switchView('chat')">Chat</button>
+      <!-- <button class="view-tab" id="tabFiles" onclick="switchView('files')">Files</button> -->
+      <button class="view-tab" id="tabSkills" onclick="switchView('skills')">Skills</button>
+      <button class="view-tab" id="tabIntegrations" onclick="switchView('integrations')">Integrations</button>
+      <button class="view-tab" id="tabComms" onclick="switchView('comms')">Communication</button>
+    </div>
+  </div>
+  <div class="header-right">
+    <button class="audit-toggle active recording" id="auditToggle" onclick="toggleAuditMode()" title="File System: watch agent file changes live">
+      <span class="audit-dot"></span>
+      <span>File System</span>
+    </button>
+    <span class="status-dot" id="statusDot"></span>
+    <span class="status-text" id="statusText">Disconnected</span>
+  </div>
+</div>
+<div class="main" style="position:relative;">
+  <button class="chat-sidebar-edge-tab visible" id="chatEdgeTab" onclick="toggleChatSidebar()" title="Show chats">
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
+  </button>
+  <div class="chat-sidebar collapsed" id="chatSidebar">
+    <div class="chat-sidebar-header">
+      <button class="chat-sidebar-collapse" onclick="toggleChatSidebar()" title="Collapse chats">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg>
+      </button>
+      <span>Chats</span>
+      <button class="new-chat-btn" onclick="newChat()">+ New</button>
+    </div>
+    <div class="chat-list" id="chatList"></div>
+    <div class="branch-indicator" id="branchIndicator">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="6" y1="3" x2="6" y2="15"/><circle cx="18" cy="6" r="3"/><circle cx="6" cy="18" r="3"/><path d="M18 9a9 9 0 0 1-9 9"/></svg>
+      <span class="branch-name" id="branchName">main</span>
+    </div>
+  </div>
+  <div class="chat-view" id="chatView">
+    <div class="panel-cam">
+      <div class="camera-container">
+        <div class="camera-off" id="cameraOff">Camera off</div>
+        <video id="cameraVideo" autoplay playsinline muted style="display:none;"></video>
+        <canvas id="cameraCanvas"></canvas>
+      </div>
+      <div class="controls">
+        <button class="ctrl-btn" id="cameraBtn" onclick="toggleCamera()">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="m16 13 5.223 3.482a.5.5 0 0 0 .777-.416V7.934a.5.5 0 0 0-.777-.416L16 11"/><rect x="2" y="6" width="14" height="12" rx="2"/></svg>
+          Camera
+        </button>
+        <button class="ctrl-btn" id="screenBtn" onclick="toggleScreen()">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" x2="16" y1="21" y2="21"/><line x1="12" x2="12" y1="17" y2="21"/></svg>
+          Screen
+        </button>
+        <button class="ctrl-btn" id="micBtn" onclick="toggleMic()">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" x2="12" y1="19" y2="22"/></svg>
+          Mic
+        </button>
+      </div>
+      <div class="agent-vitals" id="agentVitals">
+        <div class="vitals-header">
+          <span class="vitals-title">Agent Vitals</span>
+          <span class="vitals-status-dot" id="vitalsDot"></span>
+        </div>
+        <div class="vitals-grid">
+          <div class="vital-cell cpu">
+            <span class="vital-label">CPU</span>
+            <span class="vital-value" id="vitalCpu">0<span class="vital-unit">%</span></span>
+            <div class="vital-bar"><div class="vital-bar-fill" id="vitalCpuBar" style="width:0%"></div></div>
+          </div>
+          <div class="vital-cell mem">
+            <span class="vital-label">Memory</span>
+            <span class="vital-value" id="vitalMem">0<span class="vital-unit">MB</span></span>
+            <div class="vital-bar"><div class="vital-bar-fill" id="vitalMemBar" style="width:0%"></div></div>
+          </div>
+          <div class="vital-cell tokens">
+            <span class="vital-label">Tokens</span>
+            <span class="vital-value" id="vitalTokens">0<span class="vital-unit">tok</span></span>
+            <div class="vital-bar"><div class="vital-bar-fill" id="vitalTokensBar" style="width:0%"></div></div>
+          </div>
+          <div class="vital-cell uptime">
+            <span class="vital-label">Uptime</span>
+            <span class="vital-value" id="vitalUptime">00:00</span>
+          </div>
+          <div class="vital-cell wide">
+            <div class="vitals-wave">
+              <span class="vitals-wave-label">Pulse</span>
+              <canvas id="vitalsWaveCanvas"></canvas>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="panel-right">
+      <div class="conversation" id="conversation"></div>
+      <div class="file-preview-bar" id="filePreviewBar"></div>
+      <div class="input-bar">
+        <button class="attach-btn" onclick="document.getElementById('fileInput').click()" title="Attach files">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg>
+        </button>
+        <input type="file" id="fileInput" multiple style="display:none" onchange="handleFileSelect(this.files)" />
+        <input type="text" id="textInput" placeholder="Type a message or drop files..." autocomplete="off" />
+        <button onclick="sendText()">Send</button>
+      </div>
+      <div class="drop-overlay" id="dropOverlay">Drop files here</div>
+    </div>
+    <div class="files-panel" id="filesPanel">
+      <div class="resize-handle-x" id="fpResizeX"></div>
+      <div class="files-panel-header">
+        <span class="fp-title">Files <span class="fp-count hidden" id="fpCount">0</span></span>
+        <button onclick="toggleAuditMode()">&times;</button>
+      </div>
+      <div class="file-tree" id="explorerTree"></div>
+      <div class="resize-handle-y" id="dvResizeY"></div>
+      <div class="diff-viewer" id="diffViewer">
+        <div class="diff-viewer-header">
+          <div class="dv-left">
+            <span class="dv-path" id="dvPath"></span>
+            <span class="dv-status viewing" id="dvStatus">VIEWING</span>
+          </div>
+          <button class="dv-md-toggle hidden" id="dvMdToggle" onclick="toggleMdView()" title="Toggle markdown preview">
+            <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 3h20v18H2z"/><path d="M7 15V9l2.5 3L12 9v6"/><path d="M17 9v6l-2-3"/></svg>
+          </button>
+          <button onclick="closeDiffViewer()" title="Close">&times;</button>
+        </div>
+        <div class="dv-countdown" id="dvCountdown" style="width:100%"></div>
+        <div class="diff-viewer-content">
+          <pre id="dvPre"></pre>
+          <div class="dv-markdown hidden" id="dvMarkdown"></div>
+          <div class="dv-image hidden" id="dvImage"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- FILES VIEW (disabled)
+  <div class="files-view hidden" id="filesView">
+    <div class="activity-bar">
+      <button class="activity-btn active" title="Explorer">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/></svg>
+      </button>
+      <button class="activity-btn" title="Search">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
+      </button>
+    </div>
+    <div class="file-sidebar">
+      <div class="file-sidebar-header"><span>Explorer</span><button onclick="loadFileTree()">Refresh</button></div>
+      <div class="file-tree" id="fileTree"><div style="padding:16px;color:#484f58;font-size:12px;">Loading...</div></div>
+    </div>
+    <div class="editor-area">
+      <div class="editor-tabs" id="editorTabs"></div>
+      <div class="editor-container" id="editorContainer">
+        <div class="editor-empty" id="editorEmpty">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14,2 14,8 20,8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
+          <p>Select a file to start editing</p>
+          <div class="shortcuts"><span><kbd>Cmd+S</kbd> Save</span><span><kbd>Cmd+W</kbd> Close tab</span></div>
+        </div>
+      </div>
+      <div class="status-bar">
+        <div id="sbBranch"></div>
+        <div class="sb-right"><div id="sbLang"></div><div>UTF-8</div></div>
+      </div>
+    </div>
+  </div>
+  -->
+  <div class="integrations-view hidden" id="integrationsView">
+    <div class="integrations-header">
+      <h2>Integrations</h2>
+      <button onclick="loadToolkits()">Refresh</button>
+    </div>
+    <div class="integrations-grid" id="integrationsGrid">
+      <div class="integrations-empty" id="integrationsEmpty">Loading...</div>
+    </div>
+  </div>
+  <div class="comms-view hidden" id="commsView">
+    <div class="comms-header">
+      <h2>Communication</h2>
+      <span class="comms-subtitle">Connect messaging channels so your agent can send and receive messages</span>
+    </div>
+    <div class="comms-content">
+      <div class="comms-card telegram" id="telegramCard">
+        <div class="comms-card-top">
+          <div class="comms-card-icon">
+            <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm4.64 6.8c-.15 1.58-.8 5.42-1.13 7.19-.14.75-.42 1-.68 1.03-.58.05-1.02-.38-1.58-.75-.88-.58-1.38-.94-2.23-1.5-.99-.65-.35-1.01.22-1.59.15-.15 2.71-2.48 2.76-2.69.01-.03.01-.14-.07-.2-.08-.06-.19-.04-.28-.02-.12.03-2.02 1.28-5.69 3.77-.54.37-1.03.55-1.47.54-.48-.01-1.41-.27-2.1-.5-.85-.28-1.52-.43-1.46-.91.03-.25.38-.51 1.05-.78 4.12-1.79 6.87-2.97 8.26-3.54 3.93-1.62 4.75-1.9 5.28-1.91.12 0 .37.03.54.17.14.12.18.28.2.47-.01.06.01.24 0 .37z"/></svg>
+          </div>
+          <div class="comms-card-info">
+            <span class="comms-card-name">Telegram</span>
+            <span class="comms-card-desc">Connect a Telegram bot to chat with your agent from anywhere</span>
+          </div>
+          <span class="comms-status" id="tgStatus"></span>
+        </div>
+        <div class="comms-card-config" id="tgConfig">
+          <div class="comms-field">
+            <label>Bot Token</label>
+            <input type="password" id="tgToken" placeholder="123456:ABC-DEF1234ghIkl-zyx57W2v..." spellcheck="false" autocomplete="off" />
+            <span class="comms-hint">Get one from <a href="https://t.me/BotFather" target="_blank">@BotFather</a> on Telegram</span>
+          </div>
+          <div class="comms-field">
+            <label>Allowed Users</label>
+            <input type="text" id="tgAllowedUsers" placeholder="@username1, @username2" spellcheck="false" autocomplete="off" />
+            <span class="comms-hint">Comma-separated usernames. Use <code>*</code> to allow everyone. Empty = block all.</span>
+          </div>
+        </div>
+        <div class="comms-card-security" id="tgSecurity" style="display:none;">
+          <div class="comms-field">
+            <label>Allowed Users</label>
+            <div style="display:flex;gap:8px;align-items:center;">
+              <input type="text" id="tgAllowedUsersLive" placeholder="@username1, @username2" spellcheck="false" autocomplete="off" style="flex:1;" />
+              <button class="tk-btn connect" onclick="saveTgAllowedUsers()" style="padding:6px 14px;font-size:12px;">Save</button>
+            </div>
+            <span class="comms-hint">Comma-separated usernames. Use <code>*</code> to allow everyone. Empty = block all.</span>
+          </div>
+        </div>
+        <div class="comms-card-actions">
+          <button class="tk-btn connect" id="tgConnectBtn" onclick="toggleTelegram()">Connect</button>
+        </div>
+      </div>
+      <!-- WhatsApp Card -->
+      <div class="comms-card whatsapp" id="whatsappCard">
+        <div class="comms-card-top">
+          <div class="comms-card-icon whatsapp">
+            <svg viewBox="0 0 24 24" fill="currentColor"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg>
+          </div>
+          <div class="comms-card-info">
+            <span class="comms-card-name">WhatsApp</span>
+            <span class="comms-card-desc">Send messages to yourself on WhatsApp and get agent responses</span>
+          </div>
+          <span class="comms-status" id="waStatus"></span>
+        </div>
+        <div class="comms-card-config" id="waConfig">
+          <div class="wa-qr-container" id="waQrContainer" style="display:none;">
+            <canvas id="waQrCanvas" width="256" height="256"></canvas>
+            <span class="wa-qr-hint">Scan with WhatsApp &rarr; Settings &rarr; Linked Devices</span>
+          </div>
+        </div>
+        <div class="comms-card-actions">
+          <label class="wa-clear-auth" id="waClearLabel" style="display:none;">
+            <input type="checkbox" id="waClearAuth" /> Clear session on disconnect
+          </label>
+          <button class="tk-btn connect" id="waConnectBtn" onclick="toggleWhatsApp()">Connect</button>
+        </div>
+      </div>
+      <!-- Phone Number / Twilio Card -->
+      <div class="comms-card phone" id="phoneCard">
+        <div class="comms-card-top">
+          <div class="comms-card-icon phone">
+            <svg viewBox="0 0 24 24" fill="currentColor"><path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z"/></svg>
+          </div>
+          <div class="comms-card-info">
+            <span class="comms-card-name">Phone Number</span>
+            <span class="comms-card-desc">Receive SMS via Twilio webhook — set this URL in your Twilio phone number config</span>
+          </div>
+        </div>
+        <div class="comms-card-config">
+          <div class="phone-url-box">
+            <code id="phoneWebhookUrl"></code>
+            <button class="copy-btn" onclick="copyWebhookUrl(this)">Copy</button>
+          </div>
+          <span style="font-size:10px; color:#484f58; margin-top:4px; display:block;">
+            Paste this URL in Twilio &rarr; Phone Numbers &rarr; your number &rarr; Messaging &rarr; "A message comes in" webhook
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="skills-view hidden" id="skillsView" style="display:flex;flex-direction:column;flex:1;overflow:hidden;">
+    <iframe id="skillsFrame" src="" style="flex:1;border:none;background:#0d1117;width:100%;"></iframe>
+  </div>
+</div>
+<script src="https://cdn.jsdelivr.net/npm/marked@15.0.7/marked.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/qrcode-generator@1.4.4/qrcode.min.js"></script>
+<!-- <script src="https://cdn.jsdelivr.net/npm/monaco-editor@0.45.0/min/vs/loader.js"></script> -->
+<script>
+var hasComposio={{HAS_COMPOSIO}};
+if(!hasComposio){document.getElementById('tabIntegrations').style.display='none';}
+let currentView='chat',filesLoaded=false,integrationsLoaded=false,commsLoaded=false,skillsLoaded=false;
+function switchView(v){
+  currentView=v;
+  document.getElementById('chatView').classList.toggle('hidden',v!=='chat');
+  document.getElementById('integrationsView').classList.toggle('hidden',v!=='integrations');
+  document.getElementById('commsView').classList.toggle('hidden',v!=='comms');
+  document.getElementById('skillsView').classList.toggle('hidden',v!=='skills');
+  document.getElementById('tabChat').classList.toggle('active',v==='chat');
+  document.getElementById('tabIntegrations').classList.toggle('active',v==='integrations');
+  document.getElementById('tabComms').classList.toggle('active',v==='comms');
+  document.getElementById('tabSkills').classList.toggle('active',v==='skills');
+  if(v==='integrations'&&!integrationsLoaded){loadToolkits();integrationsLoaded=true;}
+  if(v==='comms'&&!commsLoaded){loadTelegramStatus();loadWhatsAppStatus();loadPhoneWebhookUrl();commsLoaded=true;}
+  if(v==='skills'&&!skillsLoaded){document.getElementById('skillsFrame').src='/api/skills-mp/proxy?path=/';skillsLoaded=true;}
+}
+// Skills MP install handler
+window.addEventListener('message',function(e){
+  if(!e.data||e.data.type!=='install_skill')return;
+  var source=e.data.source;
+  if(!source)return;
+  fetch('/api/skills-mp/install',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({source:source})})
+    .then(function(r){return r.json();})
+    .then(function(d){
+      if(d.ok){
+        alert('Installed');
+        // Notify the iframe that install succeeded
+        var frame=document.getElementById('skillsFrame');
+        if(frame&&frame.contentWindow)frame.contentWindow.postMessage({type:'install_success',source:source},'*');
+      } else {
+        alert('Install failed: '+(d.error||'Unknown error'));
+      }
+    })
+    .catch(function(err){alert('Install failed: '+err.message);});
+});
+/* FILES/MONACO DISABLED
+let monacoEditor=null,monacoReady=false;
+require.config({paths:{vs:'https://cdn.jsdelivr.net/npm/monaco-editor@0.45.0/min/vs'}});
+require(['vs/editor/editor.main'],function(){monacoReady=true;monaco.editor.defineTheme('gitclaw-dark',{base:'vs-dark',inherit:true,rules:[],colors:{'editor.background':'#0d1117','editor.lineHighlightBackground':'#161b2280','editorLineNumber.foreground':'#484f58','editorLineNumber.activeForeground':'#8b949e','editor.selectionBackground':'#58a6ff30','editorCursor.foreground':'#58a6ff','editorWidget.background':'#161b22','editorWidget.border':'#21262d','minimap.background':'#0d1117'}});});
+function getLanguage(f){var e=f.split('.').pop().toLowerCase(),m={ts:'typescript',tsx:'typescript',js:'javascript',jsx:'javascript',json:'json',html:'html',css:'css',scss:'scss',less:'less',md:'markdown',py:'python',sh:'shell',bash:'shell',yaml:'yaml',yml:'yaml',xml:'xml',sql:'sql',rs:'rust',go:'go',java:'java',c:'c',cpp:'cpp',h:'c',rb:'ruby',php:'php',swift:'swift',kt:'kotlin',toml:'ini',env:'ini',gitignore:'ini'};return m[e]||'plaintext';}
+function ensureMonacoEditor(){if(monacoEditor||!monacoReady)return;var c=document.getElementById('editorContainer');document.getElementById('editorEmpty').style.display='none';var d=document.createElement('div');d.id='monacoMount';d.style.cssText='width:100%;height:100%;';c.appendChild(d);monacoEditor=monaco.editor.create(d,{value:'',language:'plaintext',theme:'gitclaw-dark',fontSize:13,fontFamily:"'JetBrains Mono','IBM Plex Mono','Fira Code',monospace",fontLigatures:true,minimap:{enabled:true,scale:1},lineNumbers:'on',renderLineHighlight:'all',scrollBeyondLastLine:false,padding:{top:8},bracketPairColorization:{enabled:true},smoothScrolling:true,cursorBlinking:'smooth',cursorSmoothCaretAnimation:'on',wordWrap:'on',tabSize:2,automaticLayout:true});monacoEditor.onDidChangeModelContent(function(){if(activeTabPath&&openTabs[activeTabPath]){openTabs[activeTabPath].modified=true;renderTabs();}});}
+var ICONS={chevronRight:'<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9,18 15,12 9,6"/></svg>',chevronDown:'<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6,9 12,15 18,9"/></svg>',folder:'<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/></svg>',folderOpen:'<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M5 19h14a2 2 0 001.84-1.22L23 12H5.24a2 2 0 00-1.84 1.22L1 19h2a2 2 0 002-2V7a2 2 0 012-2h4l2 2h6a2 2 0 012 2v1"/></svg>',file:'<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14,2 14,8 20,8"/></svg>',fileCode:'<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14,2 14,8 20,8"/><path d="M10 12l-2 2 2 2"/><path d="M14 12l2 2-2 2"/></svg>'};
+function getFileIconClass(n){var e=n.split('.').pop().toLowerCase();if(['ts','tsx'].includes(e))return'ts';if(['js','jsx','mjs'].includes(e))return'js';if(e==='json')return'json';if(['css','scss','less'].includes(e))return'css';if(['html','htm'].includes(e))return'html';if(['md','txt','rst'].includes(e))return'md';if(['yaml','yml'].includes(e))return'yaml';if(e==='py')return'py';if(['sh','bash','zsh'].includes(e))return'sh';return'default';}
+function getFileIconSvg(n){var c=getFileIconClass(n);if(['ts','js','css','html','py','sh'].includes(c))return ICONS.fileCode;return ICONS.file;}
+var activeTabPath=null;
+async function loadFileTree(){var t=document.getElementById('fileTree');t.innerHTML='<div style="padding:16px;color:#484f58;font-size:12px;">Loading...</div>';try{var r=await fetch('/api/files?path=.');var d=await r.json();t.innerHTML='';renderTree(d.entries,t,0);}catch(e){t.innerHTML='<div style="padding:16px;color:#f85149;font-size:12px;">Failed to load files</div>';}}
+function renderTree(entries,parent,depth){for(var i=0;i<entries.length;i++){var entry=entries[i];if(entry.type==='directory'){var group=document.createElement('div');group.className='ft-group';var item=document.createElement('div');item.className='ft-item dir';item.style.paddingLeft=(depth*12+8)+'px';item.innerHTML='<span class="ft-chevron">'+ICONS.chevronDown+'</span><span class="ft-icon folder">'+ICONS.folderOpen+'</span><span class="ft-name">'+escHtml(entry.name)+'</span>';item.onclick=(function(g,it){return function(e){e.stopPropagation();var c=g.classList.toggle('collapsed');it.querySelector('.ft-chevron').innerHTML=c?ICONS.chevronRight:ICONS.chevronDown;it.querySelector('.ft-icon').innerHTML=c?ICONS.folder:ICONS.folderOpen;};})(group,item);var ch=document.createElement('div');ch.className='ft-children';if(entry.children)renderTree(entry.children,ch,depth+1);group.appendChild(item);group.appendChild(ch);parent.appendChild(group);}else{var fi=document.createElement('div');fi.className='ft-item'+(activeTabPath===entry.path?' active':'');fi.style.paddingLeft=(depth*12+22)+'px';fi.innerHTML='<span class="ft-icon '+getFileIconClass(entry.name)+'">'+getFileIconSvg(entry.name)+'</span><span class="ft-name">'+escHtml(entry.name)+'</span>';fi.onclick=(function(p,n){return function(){openFile(p,n);};})(entry.path,entry.name);fi.dataset.path=entry.path;parent.appendChild(fi);}}}
+var openTabs={};
+function renderTabs(){var t=document.getElementById('editorTabs');t.innerHTML='';for(var p in openTabs){var tab=openTabs[p];var d=document.createElement('div');d.className='ed-tab'+(p===activeTabPath?' active':'');d.innerHTML='<span class="tab-icon ft-icon '+getFileIconClass(tab.name)+'">'+getFileIconSvg(tab.name)+'</span><span>'+escHtml(tab.name)+'</span>'+(tab.modified?'<span class="tab-modified"></span>':'')+'<button class="tab-close">&times;</button>';(function(path){d.querySelector('.tab-close').onclick=function(e){e.stopPropagation();closeTab(path);};d.onclick=function(){switchTab(path);};})(p);t.appendChild(d);}}
+function switchTab(p){if(!openTabs[p])return;if(activeTabPath&&openTabs[activeTabPath]&&monacoEditor)openTabs[activeTabPath].content=monacoEditor.getValue();activeTabPath=p;var tab=openTabs[p];if(monacoEditor){monaco.editor.setModelLanguage(monacoEditor.getModel(),tab.language);monacoEditor.setValue(tab.content);}document.getElementById('sbLang').textContent=tab.language;renderTabs();document.querySelectorAll('.ft-item').forEach(function(el){el.classList.toggle('active',el.dataset.path===activeTabPath);});}
+function closeTab(p){delete openTabs[p];var rem=Object.keys(openTabs);if(p===activeTabPath){if(rem.length>0)switchTab(rem[rem.length-1]);else{activeTabPath=null;if(monacoEditor)monacoEditor.setValue('');document.getElementById('editorEmpty').style.display='';var m=document.getElementById('monacoMount');if(m)m.style.display='none';document.getElementById('sbLang').textContent='';}}renderTabs();document.querySelectorAll('.ft-item').forEach(function(el){el.classList.toggle('active',el.dataset.path===activeTabPath);});}
+async function openFile(fp,fn){if(openTabs[fp]){switchTab(fp);return;}ensureMonacoEditor();var m=document.getElementById('monacoMount');if(m)m.style.display='';document.getElementById('editorEmpty').style.display='none';var lang=getLanguage(fn);openTabs[fp]={name:fn,content:'Loading...',modified:false,language:lang};activeTabPath=fp;renderTabs();try{var r=await fetch('/api/file?path='+encodeURIComponent(fp));var d=await r.json();openTabs[fp].content=d.error?'// Error: '+d.error:d.content;}catch(e){openTabs[fp].content='// Failed to load file';}openTabs[fp].modified=false;if(monacoEditor&&activeTabPath===fp){monaco.editor.setModelLanguage(monacoEditor.getModel(),lang);monacoEditor.setValue(openTabs[fp].content);}document.getElementById('sbLang').textContent=lang;renderTabs();document.querySelectorAll('.ft-item').forEach(function(el){el.classList.toggle('active',el.dataset.path===activeTabPath);});}
+async function saveCurrentFile(){if(!activeTabPath||!openTabs[activeTabPath])return;if(monacoEditor)openTabs[activeTabPath].content=monacoEditor.getValue();try{var r=await fetch('/api/file',{method:'PUT',headers:{'Content-Type':'application/json'},body:JSON.stringify({path:activeTabPath,content:openTabs[activeTabPath].content})});var d=await r.json();if(d.ok){openTabs[activeTabPath].modified=false;renderTabs();}}catch(e){}}
+document.addEventListener('keydown',function(e){if(currentView!=='files')return;if((e.ctrlKey||e.metaKey)&&e.key==='s'){e.preventDefault();saveCurrentFile();}if((e.ctrlKey||e.metaKey)&&e.key==='w'){e.preventDefault();if(activeTabPath)closeTab(activeTabPath);}});
+FILES/MONACO DISABLED */
+// CHAT / VOICE
+var ws=null,audioCtx=null,micStream=null,micProcessor=null,micActive=false,cameraStream=null,cameraActive=false,cameraInterval=null,screenStream=null,screenActive=false,screenInterval=null;
+var statusDot=document.getElementById('statusDot'),statusText=document.getElementById('statusText'),micBtn=document.getElementById('micBtn'),cameraBtn=document.getElementById('cameraBtn'),screenBtn=document.getElementById('screenBtn'),cameraVideo=document.getElementById('cameraVideo'),cameraOff=document.getElementById('cameraOff'),cameraCanvas=document.getElementById('cameraCanvas'),conv=document.getElementById('conversation'),textInput=document.getElementById('textInput');
+function setStatus(t,s){statusText.textContent=t;statusDot.className='status-dot '+(s||'');}
+function appendConv(h,c){var d=document.createElement('div');d.className='conv-msg '+(c||'');d.innerHTML=h;conv.appendChild(d);conv.scrollTop=conv.scrollHeight;}
+function connectWS(){if(ws)return;setStatus('Connecting...','');ws=new WebSocket('ws://'+window.location.host);ws.onopen=function(){setStatus('Connected','connected');if(auditMode)loadExplorerTree();};ws.onmessage=function(e){try{handleServerMessage(JSON.parse(e.data));}catch(x){}};ws.onerror=function(){setStatus('Connection error','error');};ws.onclose=function(){ws=null;setStatus('Disconnected','');stopMic();stopCamera();stopScreen();};}
+function sendMsg(m){if(ws&&ws.readyState===WebSocket.OPEN)ws.send(JSON.stringify(m));}
+// Agent Vitals
+var vitalsStart=Date.now(), vitalsTokenCount=0, vitalsMaxTokens=200000;
+var waveData=[], waveCanvas=document.getElementById('vitalsWaveCanvas'), waveCtx=waveCanvas?waveCanvas.getContext('2d'):null;
+function updateUptime(){
+  var s=Math.floor((Date.now()-vitalsStart)/1000);
+  var h=Math.floor(s/3600), m=Math.floor((s%3600)/60), sec=s%60;
+  var el=document.getElementById('vitalUptime');
+  if(el) el.innerHTML=(h>0?(h+':'):'')+String(m).padStart(2,'0')+':'+String(sec).padStart(2,'0');
+}
+setInterval(updateUptime,1000);
+function updateVitalTokens(count){
+  vitalsTokenCount=count;
+  var el=document.getElementById('vitalTokens');
+  var bar=document.getElementById('vitalTokensBar');
+  if(el){
+    var display=count>=1000?(Math.round(count/100)/10)+'k':count;
+    el.innerHTML=display+'<span class="vital-unit">tok</span>';
+  }
+  if(bar) bar.style.width=Math.min(100,Math.round(count/vitalsMaxTokens*100))+'%';
+}
+function pollSystemVitals(){
+  fetch('/api/vitals').then(function(r){return r.json();}).then(function(d){
+    var cpuEl=document.getElementById('vitalCpu'), cpuBar=document.getElementById('vitalCpuBar');
+    var memEl=document.getElementById('vitalMem'), memBar=document.getElementById('vitalMemBar');
+    if(cpuEl&&d.cpu!==undefined){cpuEl.innerHTML=Math.round(d.cpu)+'<span class="vital-unit">%</span>';if(cpuBar)cpuBar.style.width=Math.round(d.cpu)+'%';}
+    if(memEl&&d.mem!==undefined){
+      var mb=Math.round(d.mem);
+      var display=mb>=1024?(Math.round(mb/102.4)/10)+'GB':mb+'MB';
+      var unit=mb>=1024?'':'MB';
+      memEl.innerHTML=display.replace(/[A-Z]+$/,'')+'<span class="vital-unit">'+display.replace(/^[\d.]+/,'')+'</span>';
+      if(memBar)memBar.style.width=Math.min(100,Math.round(mb/4096*100))+'%';
+    }
+    if(d.tokens!==undefined) updateVitalTokens(d.tokens);
+    // Push to wave
+    waveData.push(d.cpu||0);
+    if(waveData.length>60) waveData.shift();
+  }).catch(function(){});
+}
+setInterval(pollSystemVitals,2000);
+pollSystemVitals();
+function drawWave(){
+  if(!waveCanvas||!waveCtx) return;
+  var w=waveCanvas.width=waveCanvas.offsetWidth*2, h=waveCanvas.height=waveCanvas.offsetHeight*2;
+  waveCtx.clearRect(0,0,w,h);
+  if(waveData.length<2){requestAnimationFrame(drawWave);return;}
+  waveCtx.strokeStyle='#f85149'; waveCtx.lineWidth=1.5; waveCtx.shadowColor='#f85149'; waveCtx.shadowBlur=4;
+  waveCtx.beginPath();
+  var step=w/(waveData.length-1);
+  for(var i=0;i<waveData.length;i++){
+    var val=waveData[i]/100;
+    var y=h-val*(h-4)-2;
+    if(i===0)waveCtx.moveTo(0,y);else{
+      var px=(i-1)*step,py=h-(waveData[i-1]/100)*(h-4)-2;
+      var cx=(px+i*step)/2;
+      waveCtx.bezierCurveTo(cx,py,cx,y,i*step,y);
+    }
+  }
+  waveCtx.stroke();
+  // Glow line
+  waveCtx.shadowBlur=0; waveCtx.strokeStyle='rgba(248,81,73,0.15)'; waveCtx.lineWidth=6;
+  waveCtx.beginPath();
+  for(var i=0;i<waveData.length;i++){
+    var val=waveData[i]/100;var y=h-val*(h-4)-2;
+    if(i===0)waveCtx.moveTo(0,y);else{
+      var px=(i-1)*step,py=h-(waveData[i-1]/100)*(h-4)-2;
+      var cx=(px+i*step)/2;
+      waveCtx.bezierCurveTo(cx,py,cx,y,i*step,y);
+    }
+  }
+  waveCtx.stroke();
+  requestAnimationFrame(drawWave);
+}
+requestAnimationFrame(drawWave);
+var assistantText='',thinkingEl=null,toolActivityEl=null,toolCount=0,isReplay=false,toolVerb='';
+var toolVerbs=['susurrating','skulking','slithering','shuffling','skimming','scudding','swishing','sparkling','twinkling','glowing','shimmering','murmuring','lilting','drifting','billowing','meandering','hovering','skirling','thrumming','wending','gadding','loitering','brooding','looming','haunting','seething','flickering','glimmering','whispering','rustling','eddying','trembling','quivering','wavering','gliding','cascading','rippling','tumbling','stirring','wandering'];
+var spriteMap=[
+  [0,0,1,1,1,1,1,1,0,0],[0,1,2,2,2,2,2,2,1,0],[1,2,2,2,2,2,2,2,2,1],
+  [1,2,1,2,2,2,2,1,2,1],[1,2,1,2,2,2,2,1,2,1],[1,2,2,2,2,2,2,2,2,1],
+  [1,2,2,2,2,2,2,2,2,1],[0,1,2,2,2,2,2,2,1,0],[1,2,2,1,2,2,1,2,2,1],[0,1,1,0,1,1,0,1,1,0]
+];
+function buildSprite(){
+  var s=document.createElement('div');s.className='tool-sprite';
+  spriteMap.flat().forEach(function(v){var p=document.createElement('div');p.className='px '+(v===1?'px-o':v===2?'px-f':'px-e');s.appendChild(p);});
+  return s;
+}
+(function(){var el=document.getElementById('headerLogo');if(el)spriteMap.flat().forEach(function(v){var p=document.createElement('div');p.className='px '+(v===1?'px-o':v===2?'px-f':'px-e');el.appendChild(p);});})();
+function getToolActivity(){
+  if(!toolActivityEl){
+    toolActivityEl=document.createElement('div');
+    toolActivityEl.className='conv-msg tool-activity';
+    toolVerb=toolVerbs[Math.floor(Math.random()*toolVerbs.length)];
+    var sprite=buildSprite();
+    var verb=document.createElement('span');verb.className='tool-verb';verb.textContent='< '+toolVerb+'... >';
+    var body=document.createElement('div');body.className='tool-activity-body';
+    var sum=document.createElement('div');sum.className='tool-activity-summary';sum.style.display='none';
+    toolActivityEl.appendChild(sprite);
+    toolActivityEl.appendChild(verb);
+    toolActivityEl.appendChild(body);
+    toolActivityEl.appendChild(sum);
+    conv.appendChild(toolActivityEl);
+    toolCount=0;
+  }
+  return toolActivityEl;
+}
+function collapseToolActivity(){
+  if(toolActivityEl&&toolCount>0){
+    var el=toolActivityEl;
+    var body=el.querySelector('.tool-activity-body');
+    var sprite=el.querySelector('.tool-sprite');
+    var verb=el.querySelector('.tool-verb');
+    var sum=el.querySelector('.tool-activity-summary');
+    var tc=toolCount;
+    body.style.display='none';
+    if(sprite)sprite.style.display='none';
+    if(verb)verb.style.display='none';
+    sum.style.display='';
+    sum.innerHTML='<span class="tool-summary-toggle">▸ Used '+tc+' tool'+(tc!==1?'s':'')+'</span>';
+    if(!isReplay) sum.style.animation='toolSummaryIn 0.2s ease-out';
+    el.style.height='auto';
+    sum.onclick=function(){
+      var isHidden=body.style.display==='none';
+      body.style.display=isHidden?'':'none';
+      el.classList.toggle('expanded',isHidden);
+      sum.querySelector('.tool-summary-toggle').textContent=(isHidden?'▾':'▸')+' Used '+tc+' tool'+(tc!==1?'s':'');
+    };
+  }
+  toolActivityEl=null;
+  toolCount=0;
+  toolVerb='';
+}
+function handleServerMessage(m){switch(m.type){
+  case'audio_delta':playAudioDelta(m.audio);break;
+  case'interrupt':flushAudio();break;
+  case'transcript':
+    if(m.role==='user'&&!m.partial){
+      var isTg=m.text&&m.text.startsWith('[Telegram]');
+      var isWa=m.text&&m.text.startsWith('[WhatsApp]');
+      var label=isTg?'<span class="label tg">Telegram: </span>':isWa?'<span class="label wa">WhatsApp: </span>':'<span class="label">You: </span>';
+      var cleanText=isTg?m.text.replace(/^\[Telegram\]\s*/,''):isWa?m.text.replace(/^\[WhatsApp\]:\s*/,''):m.text;
+      appendConv(label+escHtml(cleanText),isTg?'user telegram':isWa?'user whatsapp':'user');
+    }
+    else if(m.role==='assistant'){if(m.partial)assistantText+=m.text;else{collapseToolActivity();if(assistantText){appendConv('<span class="label">{{AGENT_NAME}}: </span>'+escHtml(assistantText),'assistant');assistantText='';}else appendConv('<span class="label">{{AGENT_NAME}}: </span>'+escHtml(m.text),'assistant');}}
+    break;
+  case'agent_working':
+    var awVerb=toolVerbs[Math.floor(Math.random()*toolVerbs.length)];
+    var awEl=document.createElement('div');awEl.className='conv-msg agent-working';
+    var awSpinner=document.createElement('div');awSpinner.className='agent-working-spinner';awEl.appendChild(awSpinner);
+    var awText=document.createElement('span');awText.className='agent-working-text';
+    awText.innerHTML='<span class="agent-working-name">gitclaw</span> <span class="agent-working-verb">&lt; '+escHtml(awVerb)+'... &gt;</span> <span class="agent-working-sep">:</span> <span class="agent-working-query">'+escHtml(m.query)+'</span>';
+    awEl.appendChild(awText);
+    conv.appendChild(awEl);conv.scrollTop=conv.scrollHeight;
+    setStatus('Agent working...','connected');break;
+  case'agent_done':
+    thinkingEl=null;
+    collapseToolActivity();
+    conv.querySelectorAll('.conv-msg.agent-working').forEach(function(el){el.remove();});
+    setStatus('Connected','connected');
+    if(filesLoaded)loadFileTree();
+    refreshFileTree();break;
+  case'memory_saving':
+    if(m.status==='start'){
+      var msEl=document.createElement('div');msEl.className='conv-msg memory-saving';msEl.id='memory-saving-indicator';
+      var msSpinner=document.createElement('div');msSpinner.className='memory-saving-spinner';msEl.appendChild(msSpinner);
+      var msText=document.createElement('span');msText.className='memory-saving-text';msText.textContent='< remembering... >';msEl.appendChild(msText);
+      if(m.text){var msDetail=document.createElement('span');msDetail.className='memory-saving-detail';msDetail.textContent=m.text;msEl.appendChild(msDetail);}
+      conv.appendChild(msEl);conv.scrollTop=conv.scrollHeight;
+    } else {
+      var existing=document.getElementById('memory-saving-indicator');
+      if(existing)existing.remove();
+    }
+    break;
+  case'tool_call':
+    thinkingEl=null;
+    toolCount++;
+    if(isReplay){
+      var ta=getToolActivity();
+      var cur=ta.querySelector('.tool-activity-body');
+      cur.innerHTML='<span class="tool-call">'+friendlyToolCall(m.toolName,m.args)+'</span>';
+    } else {
+      var ta=getToolActivity();
+      var cur=ta.querySelector('.tool-activity-body');
+      cur.innerHTML='<span class="tool-call">'+friendlyToolCall(m.toolName,m.args)+'</span>';
+      cur.style.display='';
+      conv.scrollTop=conv.scrollHeight;
+    }
+    // In audit mode, track which file the agent is about to write
+    if(auditMode){
+      var writePath=detectFileWritePath(m.toolName,m.args);
+      if(writePath)lastToolWritePath=writePath;
+    }
+    break;
+  case'tool_result':
+    var ta2=getToolActivity();
+    var cur2=ta2.querySelector('.tool-activity-body');
+    if(m.isError){
+      cur2.innerHTML='<span class="tool-result thinking-fallback"><span class="label">thinking...</span></span>';
+    } else {
+      cur2.innerHTML='<span class="tool-result">'+friendlyToolResult(m.toolName,m.content,false)+'</span>';
+    }
+    if(!isReplay)conv.scrollTop=conv.scrollHeight;
+    // In audit mode, auto-open the file that was just written
+    if(auditMode&&lastToolWritePath&&!m.isError){
+      var autoPath=lastToolWritePath;
+      lastToolWritePath=null;
+      auditAutoOpenFile(autoPath);
+    }
+    refreshFileTree();break;
+  case'agent_thinking':
+    if(!thinkingEl){thinkingEl=document.createElement('div');thinkingEl.className='conv-msg thinking';thinkingEl.innerHTML='<span class="label">Thinking: </span><span class="thinking-text"></span>';conv.appendChild(thinkingEl);}
+    thinkingEl.querySelector('.thinking-text').textContent+=m.text;
+    conv.scrollTop=conv.scrollHeight;
+    break;
+  case'files_changed':refreshFileTree();break;
+  case'error':appendConv('Error: '+escHtml(m.message),'system');break;
+}}
+function escHtml(s){var d=document.createElement('div');d.textContent=s;return d.innerHTML;}
+// Parse composio tool names like "composio_googlecalendar_GOOGLECALENDAR_EVENTS_LIST" into friendly text
+function parseComposioName(name){
+  var raw=name.replace(/^composio_/,'');
+  // Split on first underscore to get service, then action
+  var parts=raw.split('_');
+  var service=parts[0].toLowerCase();
+  // The action is everything after the service prefix (which repeats)
+  // e.g. "googlecalendar_GOOGLECALENDAR_EVENTS_LIST" → action = "EVENTS_LIST"
+  var actionRaw=raw.replace(new RegExp('^[^_]+_'+service+'_?','i'),'');
+  if(!actionRaw) actionRaw=parts.slice(1).join('_');
+  var action=actionRaw.toLowerCase().replace(/_/g,' ');
+  // Friendly service names
+  var services={google:'Google',googlecalendar:'Google Calendar',gmail:'Gmail',
+    github:'GitHub',slack:'Slack',notion:'Notion',drive:'Google Drive',
+    googledrive:'Google Drive',sheets:'Google Sheets',googlesheets:'Google Sheets',
+    outlook:'Outlook',discord:'Discord',trello:'Trello',linear:'Linear',
+    jira:'Jira',asana:'Asana',hubspot:'HubSpot',salesforce:'Salesforce',
+    spotify:'Spotify',twitter:'Twitter',youtube:'YouTube'};
+  var friendlyService=services[service]||service.charAt(0).toUpperCase()+service.slice(1);
+  // Friendly action verbs
+  var actionMap={
+    'events list':'checking events','find event':'finding event','create event':'creating event',
+    'delete event':'deleting event','update event':'updating event','quick add':'adding event',
+    'send email':'sending email','create email draft':'drafting email',
+    'list emails':'checking emails','get email':'reading email','fetch emails':'checking emails',
+    'list messages':'checking messages','send message':'sending message',
+    'get message':'reading message','search messages':'searching messages',
+    'list labels':'checking labels','get profile':'checking profile',
+    'list repos':'checking repos','create issue':'creating issue',
+    'list issues':'checking issues','get repo':'checking repo',
+    'create pr':'creating pull request','list prs':'checking pull requests',
+    'search contacts':'searching contacts','list contacts':'checking contacts',
+    'find contact':'finding contact','get contact':'looking up contact',
+  };
+  var friendlyAction=actionMap[action]||action;
+  return {service:friendlyService,action:friendlyAction};
+}
+// Summarize composio args into a short human string
+function summarizeArgs(args){
+  var a=args||{};
+  var parts=[];
+  // Calendar
+  if(a.calendarId&&a.calendarId!=='primary') parts.push(a.calendarId);
+  if(a.summary) parts.push('"'+a.summary+'"');
+  if(a.query||a.q) parts.push('"'+(a.query||a.q)+'"');
+  // Email
+  if(a.to||a.recipient) parts.push('to '+(a.to||a.recipient));
+  if(a.subject) parts.push('"'+a.subject+'"');
+  // General
+  if(a.name&&!a.phone) parts.push(a.name);
+  if(a.message&&!a.to) parts.push('"'+a.message.slice(0,60)+'"');
+  if(a.owner&&a.repo) parts.push(a.owner+'/'+a.repo);
+  if(a.channel) parts.push('#'+a.channel);
+  return parts.length?parts.join(', '):'';
+}
+// Parse composio JSON result into something readable
+function summarizeResult(name,content){
+  try{
+    var d=JSON.parse(content);
+    var data=d.data||d;
+    // Calendar events
+    if(data.items&&Array.isArray(data.items)){
+      if(data.items.length===0) return 'No events found';
+      var evts=data.items.slice(0,5).map(function(e){
+        var when='';
+        if(e.start){
+          var dt=e.start.dateTime||e.start.date||'';
+          if(dt){try{var dd=new Date(dt);when=' ('+dd.toLocaleDateString('en-US',{weekday:'short',month:'short',day:'numeric'})+', '+dd.toLocaleTimeString('en-US',{hour:'numeric',minute:'2-digit'})+')';}catch(x){}}
+        }
+        return (e.summary||'Untitled')+when;
+      });
+      var more=data.items.length>5?' and '+(data.items.length-5)+' more':'';
+      return 'Found '+data.items.length+' event'+(data.items.length!==1?'s':'')+':\n'+evts.join('\n')+more;
+    }
+    // Email list
+    if(data.messages&&Array.isArray(data.messages)){
+      if(data.messages.length===0) return 'No messages found';
+      return 'Found '+data.messages.length+' message'+(data.messages.length!==1?'s':'');
+    }
+    // Single email/event
+    if(data.summary&&data.start) return 'Event: '+data.summary;
+    if(data.subject) return (data.from?'From '+data.from+': ':'')+data.subject;
+    // Contact
+    if(data.emailAddress||data.email) return (data.displayName||data.name||'Contact')+' — '+(data.emailAddress||data.email);
+    if(Array.isArray(data)&&data.length>0&&data[0].emailAddress) return data.map(function(c){return (c.displayName||c.name||'?')+' <'+(c.emailAddress||c.email)+'>';}).slice(0,5).join('\n');
+    // GitHub
+    if(data.full_name&&data.html_url) return data.full_name;
+    if(data.title&&data.number) return '#'+data.number+' '+data.title;
+    // Generic success
+    if(d.successful===true){
+      if(data.id||data.htmlLink) return 'Done';
+      if(typeof data==='string') return data.slice(0,200);
+    }
+    if(d.successful===false) return 'Failed: '+(d.error||'unknown error');
+  }catch(e){}
+  return null; // couldn't parse, use fallback
+}
+function friendlyToolCall(name,args){
+  var a=args||{};
+  switch(name){
+    case'send_whatsapp_message':
+      return '<span class="label">Sending WhatsApp to '+escHtml(a.to||'?')+':</span> '+escHtml(a.message||'');
+    case'save_whatsapp_contact':
+      return '<span class="label">Saving contact:</span> '+escHtml(a.name||'?')+' ('+escHtml(a.phone||'?')+')';
+    case'list_whatsapp_contacts':
+      return '<span class="label">Looking up contacts...</span>';
+    case'create_trigger':
+      return '<span class="label">Creating trigger:</span> when '+escHtml(a.from||'anyone')+' says "'+escHtml(a.pattern||'')+'" &rarr; reply "'+escHtml(a.reply||'')+'"';
+    case'list_triggers':
+      return '<span class="label">Checking triggers...</span>';
+    case'delete_trigger':
+      return '<span class="label">Deleting trigger</span> '+escHtml(a.id||'');
+    case'toggle_trigger':
+      return '<span class="label">'+(a.enabled?'Enabling':'Disabling')+' trigger</span> '+escHtml(a.id||'');
+    default:
+      if(name.startsWith('composio_')){
+        var p=parseComposioName(name);
+        var detail=summarizeArgs(a);
+        return '<span class="label">'+escHtml(p.service)+':</span> '+escHtml(p.action)+(detail?' &mdash; '+escHtml(detail):'');
+      }
+      // Detect skill usage from file reads/globs targeting skills/ directory
+      var skillPath=a.file_path||a.path||a.command||'';
+      var skillMatch=skillPath.match(/skills\/([^\/]+)/);
+      if(skillMatch){
+        var skillName=skillMatch[1];
+        return '<span class="label skill-label">Using skill:</span> <span class="skill-name">'+escHtml('skills/'+skillName)+'</span>';
+      }
+      var argsStr=JSON.stringify(a);
+      var preview=argsStr.length>120?argsStr.slice(0,120)+'...':argsStr;
+      return '<span class="label">'+escHtml(name)+'</span><span class="tool-args">'+escHtml(preview)+'</span>';
+  }
+}
+function friendlyToolResult(name,content,isError){
+  if(isError) return '<span class="label" style="color:#f85149">Failed: </span>'+escHtml(content.slice(0,200));
+  switch(name){
+    case'send_whatsapp_message':
+    case'save_whatsapp_contact':
+      return '<span class="label" style="color:#3fb950">&#10003;</span> '+escHtml(content);
+    case'list_whatsapp_contacts':
+      if(content.startsWith('No saved')) return '<span class="label">No contacts saved yet</span>';
+      return '<span class="label">Contacts:</span><div class="tool-content">'+escHtml(content)+'</div>';
+    case'create_trigger':
+      return '<span class="label" style="color:#3fb950">&#10003; Trigger set up</span>';
+    case'list_triggers':
+      if(content.startsWith('No triggers')) return '<span class="label">No triggers set up</span>';
+      return '<span class="label">Triggers:</span><div class="tool-content">'+escHtml(content)+'</div>';
+    case'delete_trigger':
+    case'toggle_trigger':
+      return '<span class="label" style="color:#3fb950">&#10003;</span> '+escHtml(content);
+    default:
+      if(name.startsWith('composio_')){
+        var friendly=summarizeResult(name,content);
+        if(friendly) return '<span class="label" style="color:#3fb950">&#10003;</span> '+escHtml(friendly).replace(/\n/g,'<br>');
+        // Fallback: just show success/truncated
+        var preview=content.length>200?content.slice(0,200)+'...':content;
+        return '<span class="label" style="color:#3fb950">&#10003;</span> Done';
+      }
+      var preview=content.length>300?content.slice(0,300)+'...':content;
+      return '<span class="label">'+escHtml(name)+':</span><div class="tool-content">'+escHtml(preview)+'</div>';
+  }
+}
+var audioQueue=[],isPlaying=false,currentSource=null,nextPlayTime=0;
+function flushAudio(){if(currentSource){try{currentSource.stop();}catch(e){}}currentSource=null;audioQueue=[];nextPlayTime=0;isPlaying=false;}
+function playAudioDelta(b){if(!audioCtx)audioCtx=new(window.AudioContext||window.webkitAudioContext)({sampleRate:24000});var bin=atob(b),bytes=new Uint8Array(bin.length);for(var i=0;i<bin.length;i++)bytes[i]=bin.charCodeAt(i);var i16=new Int16Array(bytes.buffer),f32=new Float32Array(i16.length);for(var i=0;i<i16.length;i++)f32[i]=i16[i]/32768;var buf=audioCtx.createBuffer(1,f32.length,24000);buf.getChannelData(0).set(f32);audioQueue.push(buf);if(!isPlaying)playNext();}
+function playNext(){if(audioQueue.length===0){isPlaying=false;return;}isPlaying=true;var buf=audioQueue.shift(),src=audioCtx.createBufferSource();src.buffer=buf;src.connect(audioCtx.destination);var now=audioCtx.currentTime,st=Math.max(now,nextPlayTime);src.start(st);nextPlayTime=st+buf.duration;src.onended=function(){if(audioQueue.length>0)playNext();else isPlaying=false;};currentSource=src;}
+async function toggleMic(){if(micActive)stopMic();else await startMic();}
+async function startMic(){connectWS();try{micStream=await navigator.mediaDevices.getUserMedia({audio:true});}catch(e){appendConv('Microphone access denied','system');return;}if(!audioCtx)audioCtx=new(window.AudioContext||window.webkitAudioContext)({sampleRate:24000});var src=audioCtx.createMediaStreamSource(micStream);micProcessor=audioCtx.createScriptProcessor(4096,1,1);src.connect(micProcessor);micProcessor.connect(audioCtx.destination);micProcessor.onaudioprocess=function(e){if(!micActive||!ws||ws.readyState!==WebSocket.OPEN)return;var inp=e.inputBuffer.getChannelData(0),i16=new Int16Array(inp.length);for(var i=0;i<inp.length;i++)i16[i]=Math.max(-32768,Math.min(32767,Math.floor(inp[i]*32768)));sendMsg({type:'audio',audio:btoa(String.fromCharCode.apply(null,new Uint8Array(i16.buffer)))});};micActive=true;micBtn.classList.add('active');}
+function stopMic(){micActive=false;micBtn.classList.remove('active');if(micProcessor){micProcessor.disconnect();micProcessor=null;}if(micStream){micStream.getTracks().forEach(function(t){t.stop();});micStream=null;}}
+async function toggleCamera(){if(cameraActive)stopCamera();else await startCamera();}
+async function startCamera(){connectWS();try{cameraStream=await navigator.mediaDevices.getUserMedia({video:{width:640,height:480}});}catch(e){appendConv('Camera access denied','system');return;}cameraVideo.srcObject=cameraStream;cameraVideo.style.display='block';cameraOff.style.display='none';cameraCanvas.width=640;cameraCanvas.height=480;var ctx=cameraCanvas.getContext('2d');cameraInterval=setInterval(function(){if(!cameraActive||!ws||ws.readyState!==WebSocket.OPEN)return;ctx.drawImage(cameraVideo,0,0,640,480);var u=cameraCanvas.toDataURL('image/jpeg',0.7);sendMsg({type:'video_frame',frame:u.split(',')[1],mimeType:'image/jpeg'});},1000);cameraActive=true;cameraBtn.classList.add('active');}
+function stopCamera(){cameraActive=false;cameraBtn.classList.remove('active');if(cameraInterval){clearInterval(cameraInterval);cameraInterval=null;}if(cameraStream){cameraStream.getTracks().forEach(function(t){t.stop();});cameraStream=null;}cameraVideo.style.display='none';cameraOff.style.display='';}
+async function toggleScreen(){if(screenActive)stopScreen();else await startScreen();}
+async function startScreen(){connectWS();try{screenStream=await navigator.mediaDevices.getDisplayMedia({video:{cursor:'always'}});}catch(e){appendConv('Screen sharing cancelled','system');return;}var video=document.createElement('video');video.srcObject=screenStream;video.muted=true;video.playsInline=true;video.play();var canvas=document.createElement('canvas');var ctx=canvas.getContext('2d');screenStream.getVideoTracks()[0].onended=function(){stopScreen();};screenInterval=setInterval(function(){if(!screenActive||!ws||ws.readyState!==WebSocket.OPEN)return;var vw=video.videoWidth||1920,vh=video.videoHeight||1080;var scale=Math.min(960/vw,540/vh,1);canvas.width=Math.round(vw*scale);canvas.height=Math.round(vh*scale);ctx.drawImage(video,0,0,canvas.width,canvas.height);var u=canvas.toDataURL('image/jpeg',0.6);sendMsg({type:'video_frame',frame:u.split(',')[1],mimeType:'image/jpeg',source:'screen'});},2000);screenActive=true;screenBtn.classList.add('active');cameraVideo.srcObject=screenStream;cameraVideo.style.display='block';cameraOff.style.display='none';}
+function stopScreen(){screenActive=false;screenBtn.classList.remove('active');if(screenInterval){clearInterval(screenInterval);screenInterval=null;}if(screenStream){screenStream.getTracks().forEach(function(t){t.stop();});screenStream=null;}if(!cameraActive){cameraVideo.style.display='none';cameraOff.style.display='';cameraVideo.srcObject=cameraStream;}else{cameraVideo.srcObject=cameraStream;}}
+// FILE ATTACHMENTS
+var pendingFiles=[];
+var MAX_FILE_SIZE=10*1024*1024; // 10MB
+function handleFileSelect(fileList){
+  for(var i=0;i<fileList.length;i++){
+    var f=fileList[i];
+    if(f.size>MAX_FILE_SIZE){appendConv('File too large (max 10MB): '+escHtml(f.name),'system');continue;}
+    pendingFiles.push(f);
+  }
+  renderFilePreview();
+  document.getElementById('fileInput').value='';
+}
+function renderFilePreview(){
+  var bar=document.getElementById('filePreviewBar');
+  bar.innerHTML='';
+  if(pendingFiles.length===0){bar.classList.remove('active');return;}
+  bar.classList.add('active');
+  pendingFiles.forEach(function(f,idx){
+    var chip=document.createElement('div');
+    chip.className='file-chip';
+    var preview='';
+    if(f.type.startsWith('image/')&&f._dataUrl){
+      preview='<img src="'+f._dataUrl+'" alt="preview" />';
+    }
+    chip.innerHTML=preview+'<span>'+escHtml(f.name)+'</span><button class="remove-file" onclick="removeFile('+idx+')">&times;</button>';
+    bar.appendChild(chip);
+  });
+  // Generate image previews
+  pendingFiles.forEach(function(f,idx){
+    if(f.type.startsWith('image/')&&!f._dataUrl){
+      var reader=new FileReader();
+      reader.onload=function(e){f._dataUrl=e.target.result;renderFilePreview();};
+      reader.readAsDataURL(f);
+    }
+  });
+}
+function removeFile(idx){pendingFiles.splice(idx,1);renderFilePreview();}
+function readFileAsBase64(file){
+  return new Promise(function(resolve){
+    var reader=new FileReader();
+    reader.onload=function(e){
+      var b64=e.target.result.split(',')[1]||'';
+      resolve(b64);
+    };
+    reader.readAsDataURL(file);
+  });
+}
+async function sendText(){
+  var t=textInput.value.trim();
+  var hasFiles=pendingFiles.length>0;
+  if(!t&&!hasFiles)return;
+  connectWS();
+  if(hasFiles){
+    var filesToSend=pendingFiles.slice();
+    pendingFiles=[];
+    renderFilePreview();
+    for(var i=0;i<filesToSend.length;i++){
+      var f=filesToSend[i];
+      var b64=await readFileAsBase64(f);
+      var displayText=t||(filesToSend.length===1?'':'');
+      // Show in conversation
+      if(f.type.startsWith('image/')&&f._dataUrl){
+        appendConv('<span class="label">You: </span>'+(t?escHtml(t)+' ':'')+'<br><img src="'+f._dataUrl+'" style="max-width:200px;max-height:150px;border-radius:4px;margin-top:4px;" />','user');
+      } else {
+        appendConv('<span class="label">You: </span>'+(t?escHtml(t)+' ':'')+'[Attached: '+escHtml(f.name)+']','user');
+      }
+      sendMsg({type:'file',name:f.name,mimeType:f.type||'application/octet-stream',data:b64,text:i===0?t:''});
+      t=''; // Only send text with first file
+    }
+  } else {
+    appendConv('<span class="label">You: </span>'+escHtml(t),'user');
+    sendMsg({type:'text',text:t});
+  }
+  textInput.value='';
+}
+textInput.addEventListener('keydown',function(e){if(e.key==='Enter'&&!e.shiftKey){e.preventDefault();sendText();}});
+// DRAG AND DROP
+var panelRight=document.querySelector('.panel-right');
+var dropOverlay=document.getElementById('dropOverlay');
+var dragCounter=0;
+panelRight.addEventListener('dragenter',function(e){e.preventDefault();dragCounter++;dropOverlay.classList.add('active');});
+panelRight.addEventListener('dragleave',function(e){e.preventDefault();dragCounter--;if(dragCounter<=0){dragCounter=0;dropOverlay.classList.remove('active');}});
+panelRight.addEventListener('dragover',function(e){e.preventDefault();});
+panelRight.addEventListener('drop',function(e){
+  e.preventDefault();dragCounter=0;dropOverlay.classList.remove('active');
+  if(e.dataTransfer.files.length>0)handleFileSelect(e.dataTransfer.files);
+});
+// CHAT SIDEBAR TOGGLE
+function toggleChatSidebar(){
+  var sb=document.getElementById('chatSidebar');
+  var tab=document.getElementById('chatEdgeTab');
+  var isCollapsed=sb.classList.toggle('collapsed');
+  tab.classList.toggle('visible',isCollapsed);
+}
+// RESIZE HANDLES
+(function(){
+  // Files panel horizontal resize
+  var fpHandle=document.getElementById('fpResizeX');
+  var fp=document.getElementById('filesPanel');
+  fpHandle.addEventListener('mousedown',function(e){
+    e.preventDefault();
+    fpHandle.classList.add('active');
+    var startX=e.clientX, startW=fp.offsetWidth;
+    function onMove(e){
+      var w=startW-(e.clientX-startX);
+      if(w<200)w=200;
+      if(w>window.innerWidth*0.6)w=window.innerWidth*0.6;
+      fp.style.width=w+'px';
+      fp.style.transition='none';
+    }
+    function onUp(){
+      fpHandle.classList.remove('active');
+      fp.style.transition='';
+      document.removeEventListener('mousemove',onMove);
+      document.removeEventListener('mouseup',onUp);
+    }
+    document.addEventListener('mousemove',onMove);
+    document.addEventListener('mouseup',onUp);
+  });
+  // Diff viewer vertical resize
+  var dvHandle=document.getElementById('dvResizeY');
+  var dv=document.getElementById('diffViewer');
+  dvHandle.addEventListener('mousedown',function(e){
+    e.preventDefault();
+    dvHandle.classList.add('active');
+    var startY=e.clientY, startH=dv.offsetHeight;
+    function onMove(e){
+      var h=startH-(e.clientY-startY);
+      if(h<80)h=80;
+      var maxH=fp.offsetHeight-120;
+      if(h>maxH)h=maxH;
+      dv.style.height=h+'px';
+      dv.style.transition='none';
+    }
+    function onUp(){
+      dvHandle.classList.remove('active');
+      dv.style.transition='';
+      document.removeEventListener('mousemove',onMove);
+      document.removeEventListener('mouseup',onUp);
+    }
+    document.addEventListener('mousemove',onMove);
+    document.addEventListener('mouseup',onUp);
+  });
+})();
+// CHAT BRANCHES
+var currentBranch='',chatBranches=[];
+async function loadChatBranches(){
+  try{
+    var r=await fetch('/api/chat/list');
+    var d=await r.json();
+    if(d.error)return;
+    chatBranches=d.chats||[];
+    currentBranch=d.current||'';
+    renderChatList();
+    document.getElementById('branchName').textContent=currentBranch||'main';
+  }catch(e){}
+}
+function renderChatList(){
+  var list=document.getElementById('chatList');
+  list.innerHTML='';
+  chatBranches.forEach(function(chat){
+    var item=document.createElement('div');
+    item.className='chat-item'+(chat.branch===currentBranch?' active':'');
+    var icon='<svg class="chat-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>';
+    var name=chat.name||chat.branch.replace('chat/','');
+    var time=chat.time?'<span class="chat-time">'+escHtml(chat.time)+'</span>':'';
+    var del='<button class="chat-delete" onclick="event.stopPropagation();deleteChat(\''+escHtml(chat.branch)+'\')" title="Delete">&times;</button>';
+    item.innerHTML=icon+'<span class="chat-name">'+escHtml(name)+'</span>'+time+del;
+    (function(branch){item.onclick=function(){switchChat(branch);};})(chat.branch);
+    list.appendChild(item);
+  });
+}
+async function newChat(){
+  try{
+    var r=await fetch('/api/chat/new',{method:'POST'});
+    var d=await r.json();
+    if(d.error){appendConv('Error: '+escHtml(d.error),'system');return;}
+    currentBranch=d.branch;
+    document.getElementById('branchName').textContent=d.branch;
+    chatBranches.unshift({branch:d.branch,name:d.branch.replace('chat/',''),time:'just now'});
+    renderChatList();
+    // Clear conversation
+    conv.innerHTML='';
+    assistantText='';thinkingEl=null;
+    // Reconnect WS for fresh session
+    if(ws){ws.close();ws=null;}
+    setTimeout(function(){connectWS();loadChatBranches();},300);
+  }catch(e){appendConv('Failed to create new chat','system');}
+}
+async function restoreChatHistory(branch){
+  try{
+    var r=await fetch('/api/chat/history?branch='+encodeURIComponent(branch));
+    var d=await r.json();
+    isReplay=true;
+    if(d.messages)d.messages.forEach(function(m){handleServerMessage(m);});
+    collapseToolActivity();
+    isReplay=false;
+  }catch(e){}
+}
+async function switchChat(branch){
+  if(branch===currentBranch)return;
+  try{
+    var r=await fetch('/api/chat/switch',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({branch:branch})});
+    var d=await r.json();
+    if(d.error){appendConv('Error: '+escHtml(d.error),'system');return;}
+    currentBranch=branch;
+    document.getElementById('branchName').textContent=branch;
+    renderChatList();
+    conv.innerHTML='';
+    assistantText='';thinkingEl=null;
+    await restoreChatHistory(branch);
+    if(ws){ws.close();ws=null;}
+    setTimeout(function(){connectWS();loadChatBranches();},300);
+  }catch(e){appendConv('Failed to switch chat','system');}
+}
+async function deleteChat(branch){
+  if(branch===currentBranch){appendConv('Cannot delete the active chat','system');return;}
+  try{
+    await fetch('/api/chat/delete',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({branch:branch})});
+    loadChatBranches();
+  }catch(e){}
+}
+// Load chat list on startup and restore history for current branch
+loadChatBranches().then(function(){
+  if(currentBranch)restoreChatHistory(currentBranch);
+});
+// INTEGRATIONS
+var toolkitConnections={};
+function showGridMessage(msg){
+  var grid=document.getElementById('integrationsGrid');
+  grid.innerHTML='<div class="integrations-empty">'+escHtml(msg)+'</div>';
+}
+async function loadToolkits(){
+  var grid=document.getElementById('integrationsGrid');
+  showGridMessage('Loading...');
+  try{
+    var tr=await fetch('/api/composio/toolkits');
+    if(tr.status===501){showGridMessage('Composio not configured. Set COMPOSIO_API_KEY to enable integrations.');return;}
+    var toolkits=await tr.json();
+    if(toolkits.error){showGridMessage(toolkits.error);return;}
+    // Also fetch connections for status
+    var cr=await fetch('/api/composio/connections');
+    var conns=cr.ok?await cr.json():[];
+    toolkitConnections={};
+    if(Array.isArray(conns))conns.forEach(function(c){toolkitConnections[c.toolkitSlug]=c.id;});
+    if(!Array.isArray(toolkits)||toolkits.length===0){showGridMessage('No toolkits available.');return;}
+    grid.innerHTML='';
+    toolkits.forEach(function(tk){
+      var isConn=tk.connected||!!toolkitConnections[tk.slug];
+      var connId=toolkitConnections[tk.slug]||'';
+      var card=document.createElement('div');card.className='toolkit-card';
+      var logoHtml=tk.logo?'<img class="tk-logo" src="'+escHtml(tk.logo)+'" alt="" onerror="this.style.display=\'none\';this.nextElementSibling.style.display=\'flex\'"><div class="tk-logo-placeholder" style="display:none">'+escHtml(tk.name.charAt(0))+'</div>':'<div class="tk-logo-placeholder">'+escHtml(tk.name.charAt(0))+'</div>';
+      var btnClass=isConn?'tk-btn connected':'tk-btn connect';
+      var btnLabel=isConn?'Connected':'Connect';
+      card.innerHTML='<div class="tk-top">'+logoHtml+'<span class="tk-name">'+escHtml(tk.name)+'</span></div><div class="tk-desc">'+escHtml(tk.description)+'</div><div class="tk-actions"><button class="'+btnClass+'" data-slug="'+escHtml(tk.slug)+'" data-conn="'+escHtml(connId)+'" onclick="toggleToolkit(this)">'+btnLabel+'</button></div>';
+      grid.appendChild(card);
+    });
+  }catch(e){showGridMessage('Failed to load integrations.');}
+}
+async function toggleToolkit(btn){
+  var slug=btn.dataset.slug;var connId=btn.dataset.conn;
+  if(connId){
+    // Disconnect
+    btn.textContent='Disconnecting...';btn.disabled=true;
+    try{await fetch('/api/composio/connections/'+encodeURIComponent(connId),{method:'DELETE'});
+    }catch(e){}
+    loadToolkits();
+  }else{
+    // Connect via OAuth
+    btn.textContent='Connecting...';btn.disabled=true;
+    try{
+      var r=await fetch('/api/composio/connect',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({toolkit:slug,redirectUrl:window.location.origin+'/api/composio/callback'})});
+      var d=await r.json();
+      if(d.redirectUrl){window.open(d.redirectUrl,'composio_auth','width=600,height=700');}
+      else{loadToolkits();}
+    }catch(e){btn.textContent='Connect';btn.disabled=false;}
+  }
+}
+// Listen for OAuth completion from popup
+window.addEventListener('message',function(e){
+  if(e.data&&e.data.type==='composio_auth_complete'){loadToolkits();}
+});
+// Also refresh when window regains focus (in case popup completed)
+window.addEventListener('focus',function(){if(currentView==='integrations'&&integrationsLoaded)loadToolkits();});
+// ── TELEGRAM / COMMUNICATION ────────────────────────────────────────
+async function loadTelegramStatus(){
+  var card=document.getElementById('telegramCard');
+  var statusEl=document.getElementById('tgStatus');
+  var btn=document.getElementById('tgConnectBtn');
+  var tokenInput=document.getElementById('tgToken');
+  var configDiv=document.getElementById('tgConfig');
+  try{
+    var r=await fetch('/api/telegram/status');
+    var d=await r.json();
+    var allowedUsersInput=document.getElementById('tgAllowedUsers');
+    var securityDiv=document.getElementById('tgSecurity');
+    var liveInput=document.getElementById('tgAllowedUsersLive');
+    var usersStr=(d.allowedUsers||[]).map(function(u){return '@'+u;}).join(', ');
+    if(d.connected){
+      card.classList.add('is-connected');
+      statusEl.className='comms-status connected';
+      statusEl.textContent='Connected';
+      btn.className='tk-btn connected';
+      btn.textContent='Disconnect';
+      var existing=card.querySelector('.comms-bot-info');
+      if(existing)existing.remove();
+      if(d.botName){
+        var info=document.createElement('div');
+        info.className='comms-bot-info';
+        info.innerHTML='<span class="bot-name">'+escHtml(d.botName)+'</span><span class="bot-username">@'+escHtml(d.botUsername||'')+'</span>';
+        configDiv.parentNode.insertBefore(info,configDiv);
+      }
+      // Show live security editor when connected
+      securityDiv.style.display='';
+      liveInput.value=usersStr;
+    }else{
+      card.classList.remove('is-connected');
+      statusEl.className='comms-status disconnected';
+      statusEl.textContent='Not connected';
+      btn.className='tk-btn connect';
+      btn.textContent='Connect';
+      var existing2=card.querySelector('.comms-bot-info');
+      if(existing2)existing2.remove();
+      if(d.hasToken)tokenInput.placeholder='Token saved (enter new to change)';
+      securityDiv.style.display='none';
+      if(usersStr)allowedUsersInput.value=usersStr;
+    }
+  }catch(e){
+    statusEl.className='comms-status error';
+    statusEl.textContent='Error';
+  }
+}
+async function toggleTelegram(){
+  var card=document.getElementById('telegramCard');
+  var btn=document.getElementById('tgConnectBtn');
+  var tokenInput=document.getElementById('tgToken');
+  if(card.classList.contains('is-connected')){
+    btn.disabled=true;btn.textContent='Disconnecting...';
+    try{
+      await fetch('/api/telegram/disconnect',{method:'POST'});
+    }catch(e){}
+    btn.disabled=false;
+    loadTelegramStatus();
+    return;
+  }
+  var token=tokenInput.value.trim();
+  var allowedUsers=document.getElementById('tgAllowedUsers').value.trim();
+  if(!token&&!tokenInput.placeholder.includes('saved')){
+    tokenInput.style.borderColor='#f85149';
+    tokenInput.focus();
+    return;
+  }
+  btn.disabled=true;btn.textContent='Connecting...';
+  tokenInput.style.borderColor='';
+  try{
+    var r=await fetch('/api/telegram/connect',{
+      method:'POST',
+      headers:{'Content-Type':'application/json'},
+      body:JSON.stringify({token:token||undefined,allowedUsers:allowedUsers||undefined})
+    });
+    var d=await r.json();
+    if(d.error){
+      document.getElementById('tgStatus').className='comms-status error';
+      document.getElementById('tgStatus').textContent=d.error;
+      btn.disabled=false;btn.textContent='Connect';
+      return;
+    }
+  }catch(e){
+    btn.disabled=false;btn.textContent='Connect';
+    return;
+  }
+  btn.disabled=false;
+  tokenInput.value='';
+  loadTelegramStatus();
+}
+async function saveTgAllowedUsers(){
+  var input=document.getElementById('tgAllowedUsersLive');
+  var users=input.value.trim();
+  try{
+    var r=await fetch('/api/telegram/allowed-users',{
+      method:'POST',
+      headers:{'Content-Type':'application/json'},
+      body:JSON.stringify({users:users})
+    });
+    var d=await r.json();
+    if(d.ok){
+      input.style.borderColor='#3fb950';
+      setTimeout(function(){input.style.borderColor='';},1500);
+    }
+  }catch(e){}
+}
+// ── WhatsApp ────────────────────────────────────────────────────────
+var waQrPollTimer=null;
+function renderQR(canvas,text){
+  var qr=qrcode(0,'L');
+  qr.addData(text);
+  qr.make();
+  var count=qr.getModuleCount();
+  var ctx=canvas.getContext('2d');
+  var size=canvas.width;
+  ctx.fillStyle='#fff';ctx.fillRect(0,0,size,size);
+  var cellSize=Math.floor(size/count);
+  var offset=Math.floor((size-cellSize*count)/2);
+  ctx.fillStyle='#000';
+  for(var r=0;r<count;r++)for(var c=0;c<count;c++){
+    if(qr.isDark(r,c))ctx.fillRect(offset+c*cellSize,offset+r*cellSize,cellSize,cellSize);
+  }
+}
+async function loadWhatsAppStatus(){
+  var card=document.getElementById('whatsappCard');
+  var statusEl=document.getElementById('waStatus');
+  var btn=document.getElementById('waConnectBtn');
+  var qrContainer=document.getElementById('waQrContainer');
+  var clearLabel=document.getElementById('waClearLabel');
+  try{
+    var r=await fetch('/api/whatsapp/status');
+    var d=await r.json();
+    if(d.connected){
+      card.classList.add('is-connected');
+      statusEl.className='comms-status connected';
+      statusEl.textContent='Connected';
+      btn.className='tk-btn connected';
+      btn.textContent='Disconnect';
+      clearLabel.style.display='';
+      qrContainer.style.display='none';
+      if(waQrPollTimer){clearInterval(waQrPollTimer);waQrPollTimer=null;}
+      // Show phone number
+      var existing=card.querySelector('.comms-bot-info');
+      if(existing)existing.remove();
+      if(d.phoneNumber){
+        var info=document.createElement('div');
+        info.className='comms-bot-info';
+        info.innerHTML='<span class="bot-name">'+escHtml(d.phoneNumber)+'</span><span class="bot-username">WhatsApp linked</span>';
+        document.getElementById('waConfig').parentNode.insertBefore(info,document.getElementById('waConfig'));
+      }
+    }else if(d.qrCode){
+      card.classList.remove('is-connected');
+      statusEl.className='comms-status scanning';
+      statusEl.textContent='Scanning';
+      btn.className='tk-btn connect';
+      btn.textContent='Cancel';
+      clearLabel.style.display='none';
+      qrContainer.style.display='';
+      renderQR(document.getElementById('waQrCanvas'),d.qrCode);
+      var existing2=card.querySelector('.comms-bot-info');
+      if(existing2)existing2.remove();
+    }else{
+      card.classList.remove('is-connected');
+      statusEl.className='comms-status disconnected';
+      statusEl.textContent='Not connected';
+      btn.className='tk-btn connect';
+      btn.textContent='Connect';
+      clearLabel.style.display='none';
+      qrContainer.style.display='none';
+      var existing3=card.querySelector('.comms-bot-info');
+      if(existing3)existing3.remove();
+    }
+  }catch(e){
+    statusEl.className='comms-status error';
+    statusEl.textContent='Error';
+  }
+}
+async function toggleWhatsApp(){
+  var card=document.getElementById('whatsappCard');
+  var btn=document.getElementById('waConnectBtn');
+  if(card.classList.contains('is-connected')){
+    // Disconnect
+    btn.disabled=true;btn.textContent='Disconnecting...';
+    var clearAuth=document.getElementById('waClearAuth').checked;
+    try{
+      await fetch('/api/whatsapp/disconnect',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({clearAuth:clearAuth})});
+    }catch(e){}
+    btn.disabled=false;
+    document.getElementById('waClearAuth').checked=false;
+    if(waQrPollTimer){clearInterval(waQrPollTimer);waQrPollTimer=null;}
+    loadWhatsAppStatus();
+    return;
+  }
+  // If currently scanning (cancel)
+  if(document.getElementById('waStatus').textContent==='Scanning'){
+    btn.disabled=true;btn.textContent='Canceling...';
+    try{await fetch('/api/whatsapp/disconnect',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({})});}catch(e){}
+    btn.disabled=false;
+    if(waQrPollTimer){clearInterval(waQrPollTimer);waQrPollTimer=null;}
+    loadWhatsAppStatus();
+    return;
+  }
+  // Connect
+  btn.disabled=true;btn.textContent='Connecting...';
+  try{
+    var r=await fetch('/api/whatsapp/connect',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({})});
+    var d=await r.json();
+    if(d.error){
+      document.getElementById('waStatus').className='comms-status error';
+      document.getElementById('waStatus').textContent=d.error;
+      btn.disabled=false;btn.textContent='Connect';
+      return;
+    }
+  }catch(e){btn.disabled=false;btn.textContent='Connect';return;}
+  btn.disabled=false;
+  // Poll for QR code / connection
+  waQrPollTimer=setInterval(function(){loadWhatsAppStatus();},2000);
+  setTimeout(function(){loadWhatsAppStatus();},500);
+}
+// ── PHONE / TWILIO ──────────────────────────────────────────────────
+function loadPhoneWebhookUrl(){
+  var el=document.getElementById('phoneWebhookUrl');
+  if(!el) return;
+  var base=window.location.origin;
+  el.textContent=base+'/api/phone/webhook';
+}
+function copyWebhookUrl(btn){
+  var url=document.getElementById('phoneWebhookUrl').textContent;
+  navigator.clipboard.writeText(url).then(function(){
+    btn.textContent='Copied!';
+    btn.classList.add('copied');
+    setTimeout(function(){btn.textContent='Copy';btn.classList.remove('copied');},2000);
+  });
+}
+// ── AUDIT MODE & FILE EXPLORER ──────────────────────────────────────
+var ICONS={chevronRight:'<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9,18 15,12 9,6"/></svg>',chevronDown:'<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6,9 12,15 18,9"/></svg>',folder:'<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/></svg>',folderOpen:'<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M5 19h14a2 2 0 001.84-1.22L23 12H5.24a2 2 0 00-1.84 1.22L1 19h2a2 2 0 002-2V7a2 2 0 012-2h4l2 2h6a2 2 0 012 2v1"/></svg>',file:'<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14,2 14,8 20,8"/></svg>',fileCode:'<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14,2 14,8 20,8"/><path d="M10 12l-2 2 2 2"/><path d="M14 12l2 2-2 2"/></svg>'};
+function getFileIconClass(n){var e=n.split('.').pop().toLowerCase();if(['ts','tsx'].includes(e))return'ts';if(['js','jsx','mjs'].includes(e))return'js';if(e==='json')return'json';if(['css','scss','less'].includes(e))return'css';if(['html','htm'].includes(e))return'html';if(['md','txt','rst'].includes(e))return'md';if(['yaml','yml'].includes(e))return'yaml';if(e==='py')return'py';if(['sh','bash','zsh'].includes(e))return'sh';return'default';}
+function getFileIconSvg(n){var c=getFileIconClass(n);if(['ts','js','css','html','py','sh'].includes(c))return ICONS.fileCode;return ICONS.file;}
+var auditMode=true;
+var auditBaselineMtimes=null; // snapshot taken when audit mode turns on — never triggers EDITED
+var fileTreeMtimes={};
+var diffOpenPath=null;
+var diffOpenContent='';
+var refreshDebounceTimer=null;
+var lastToolWritePath=null;
+var auditEditedPaths=new Set(); // files confirmed edited since audit started
+var fileContentCache={}; // path -> content for diff
+var autoCloseTimer=null;
+function toggleAuditMode(){
+  auditMode=!auditMode;
+  var toggle=document.getElementById('auditToggle');
+  var panel=document.getElementById('filesPanel');
+  toggle.classList.toggle('active',auditMode);
+  panel.classList.toggle('collapsed',!auditMode);
+  if(auditMode){
+    toggle.classList.add('recording');
+    auditEditedPaths.clear();
+    auditBaselineMtimes=null; // will be set on first tree load
+    fileTreeMtimes={};
+    fileContentCache={};
+    closeDiffViewer();
+    loadExplorerTree();
+  }else{
+    toggle.classList.remove('recording');
+    closeDiffViewer();
+  }
+}
+// Detect file paths from tool_call args for auto-open
+function detectFileWritePath(toolName,args){
+  if(!args)return null;
+  var tn=toolName.toLowerCase();
+  var isWrite=tn==='write'||tn==='edit'||tn==='write_file'||tn==='edit_file'
+    ||tn==='create_file'||tn==='save_file'||tn==='writefile'||tn==='editfile'
+    ||tn.indexOf('write')!==-1||tn.indexOf('edit')!==-1;
+  if(!isWrite)return null;
+  var path=args.file_path||args.path||args.filepath||args.filename||args.file||null;
+  if(!path)return null;
+  if(typeof path==='string'&&path.startsWith('/')){
+    var parts=path.split('/');
+    for(var i=parts.length-1;i>=0;i--){
+      if(parts[i]==='memory'||parts[i]==='skills'||parts[i]==='src'||parts[i]==='workspace'){
+        return parts.slice(i).join('/');
+      }
+    }
+    return parts[parts.length-1];
+  }
+  return path;
+}
+// Called after a successful write tool — auto-open inline diff
+function auditAutoOpenFile(path){
+  auditEditedPaths.add(path);
+  setTimeout(function(){
+    loadExplorerTree();
+    openDiffViewer(path,true,2500);
+  },400);
+}
+function collectMtimes(entries,out){
+  for(var i=0;i<entries.length;i++){
+    var e=entries[i];
+    if(e.type==='file'&&e.mtime)out[e.path]=e.mtime;
+    if(e.children)collectMtimes(e.children,out);
+  }
+}
+// Compare mtimes, but only if we have a previous baseline
+function findChangedSinceLastRefresh(oldMtimes,newMtimes){
+  var changed=[];
+  // If oldMtimes is empty, this is baseline — nothing is "changed"
+  if(Object.keys(oldMtimes).length===0)return changed;
+  for(var p in newMtimes){
+    if(!oldMtimes[p]||newMtimes[p]>oldMtimes[p])changed.push(p);
+  }
+  return changed;
+}
+function updateChangeCount(){
+  var countEl=document.getElementById('fpCount');
+  var n=auditEditedPaths.size;
+  countEl.textContent=n;
+  countEl.classList.toggle('hidden',n===0);
+}
+async function loadExplorerTree(){
+  var t=document.getElementById('explorerTree');
+  try{
+    var r=await fetch('/api/files?path=.');
+    var d=await r.json();
+    var newMtimes={};
+    collectMtimes(d.entries,newMtimes);
+    // First load sets the baseline — nothing should be marked changed
+    var justChanged=findChangedSinceLastRefresh(fileTreeMtimes,newMtimes);
+    // Identify truly new files (not in previous baseline at all)
+    var justNew=[];
+    if(Object.keys(fileTreeMtimes).length>0){
+      for(var j=0;j<justChanged.length;j++){
+        if(!fileTreeMtimes[justChanged[j]])justNew.push(justChanged[j]);
+      }
+    }
+    // Only add to auditEditedPaths if these are real changes (not baseline)
+    justChanged.forEach(function(p){auditEditedPaths.add(p);});
+    fileTreeMtimes=newMtimes;
+    updateChangeCount();
+    t.innerHTML='';
+    renderExplorerTree(d.entries,t,0,justChanged,justNew);
+    // Auto-expand parents of just-changed files
+    if(justChanged.length>0){
+      justChanged.forEach(function(cp){
+        var parts=cp.split('/');
+        for(var i=1;i<parts.length;i++){
+          var parentPath=parts.slice(0,i).join('/');
+          t.querySelectorAll('.ft-dir').forEach(function(det){
+            if(det.dataset.path===parentPath)det.open=true;
+          });
+        }
+      });
+      // Scroll the first changed item into view in the tree
+      var firstItem=t.querySelector('.ft-item.changed,.ft-item.new-file,summary.changed,summary.new-file');
+      if(firstItem)firstItem.scrollIntoView({behavior:'smooth',block:'nearest'});
+      // Auto-open the changed file in the diff viewer
+      if(diffOpenPath&&justChanged.indexOf(diffOpenPath)!==-1){
+        // Currently-open file was updated — refresh it and scroll to diff
+        openDiffViewer(diffOpenPath,true);
+      }else{
+        // Open the first changed file automatically
+        openDiffViewer(justChanged[0],true);
+      }
+    }else if(diffOpenPath&&justChanged&&justChanged.indexOf(diffOpenPath)!==-1){
+      // No new changes detected but the open file was in the changed set
+      openDiffViewer(diffOpenPath,true);
+    }
+  }catch(e){
+    t.innerHTML='<div style="padding:16px;color:#f85149;font-size:12px;">Failed to load</div>';
+  }
+}
+function renderExplorerTree(entries,parent,depth,justChanged,justNew){
+  for(var i=0;i<entries.length;i++){
+    var entry=entries[i];
+    if(entry.type==='directory'){
+      var dirHasChanges=justChanged&&justChanged.some(function(p){return p.startsWith(entry.path+'/');});
+      var dirHasNew=justNew&&justNew.some(function(p){return p.startsWith(entry.path+'/');});
+      var autoExpand=entry.name==='memory'||dirHasChanges||dirHasNew;
+      var det=document.createElement('details');
+      det.className='ft-dir';
+      det.dataset.path=entry.path;
+      if(autoExpand)det.open=true;
+      var sum=document.createElement('summary');
+      if(dirHasNew)sum.classList.add('new-file');
+      else if(dirHasChanges)sum.classList.add('changed');
+      sum.style.paddingLeft=(depth*12+8)+'px';
+      var dirBadge='';
+      if(dirHasNew)dirBadge='<span class="ft-badge new pop">NEW</span>';
+      else if(dirHasChanges)dirBadge='<span class="ft-badge edited pop">EDITED</span>';
+      sum.innerHTML='<span class="ft-chevron">'+ICONS.chevronRight+'</span><span class="ft-icon folder">'+ICONS.folder+'</span><span class="ft-name">'+escHtml(entry.name)+'</span>'+dirBadge;
+      det.appendChild(sum);
+      var ch=document.createElement('div');
+      ch.className='ft-children';
+      if(entry.children)renderExplorerTree(entry.children,ch,depth+1,justChanged,justNew);
+      det.appendChild(ch);
+      parent.appendChild(det);
+    }else{
+      var fi=document.createElement('div');
+      fi.className='ft-item';
+      var isJustChanged=justChanged&&justChanged.indexOf(entry.path)!==-1;
+      var isJustNew=justNew&&justNew.indexOf(entry.path)!==-1;
+      var wasEdited=auditEditedPaths.has(entry.path);
+      if(isJustNew)fi.classList.add('new-file');
+      else if(isJustChanged)fi.classList.add('changed');
+      if(diffOpenPath===entry.path)fi.classList.add('active-viewer');
+      fi.style.paddingLeft=(depth*12+22)+'px';
+      var badgeHtml='';
+      var gutterHtml='';
+      if(isJustNew){
+        badgeHtml='<span class="ft-badge new pop">NEW</span>';
+        gutterHtml='<span class="ft-gutter edited"></span>';
+      }else if(isJustChanged){
+        badgeHtml='<span class="ft-badge edited pop">EDITED</span>';
+        gutterHtml='<span class="ft-gutter edited"></span>';
+      }else if(wasEdited){
+        badgeHtml='<span class="ft-badge edited" style="opacity:0.45">EDITED</span>';
+        gutterHtml='<span class="ft-gutter edited" style="opacity:0.3"></span>';
+      }
+      fi.innerHTML=gutterHtml+'<span class="ft-icon '+getFileIconClass(entry.name)+'">'+getFileIconSvg(entry.name)+'</span><span class="ft-name">'+escHtml(entry.name)+'</span>'+badgeHtml;
+      fi.onclick=(function(p){return function(){openDiffViewer(p,false);};})(entry.path);
+      fi.dataset.path=entry.path;
+      parent.appendChild(fi);
+    }
+  }
+}
+// ── Inline diff viewer (inside files panel) ──────────────────────────
+async function openDiffViewer(path,isAutoEdit,autoCloseMs){
+  if(autoCloseTimer){clearTimeout(autoCloseTimer);autoCloseTimer=null;}
+  var viewer=document.getElementById('diffViewer');
+  var pathEl=document.getElementById('dvPath');
+  var statusEl=document.getElementById('dvStatus');
+  var countdown=document.getElementById('dvCountdown');
+  var pre=document.getElementById('dvPre');
+  // Highlight active file in tree
+  document.querySelectorAll('#explorerTree .ft-item').forEach(function(el){
+    el.classList.toggle('active-viewer',el.dataset.path===path);
+  });
+  var isReopen=(diffOpenPath===path&&viewer.classList.contains('open'));
+  diffOpenPath=path;
+  pathEl.textContent=path.split('/').pop();
+  pathEl.title=path;
+  // Detect file type
+  var ext=path.split('.').pop().toLowerCase();
+  var isMd=ext==='md';
+  var isImage=/^(png|jpg|jpeg|gif|webp|svg|bmp|ico)$/.test(ext);
+  var mdToggle=document.getElementById('dvMdToggle');
+  var mdDiv=document.getElementById('dvMarkdown');
+  var imgDiv=document.getElementById('dvImage');
+  // Reset all content panels
+  mdToggle.classList.toggle('hidden',!isMd);
+  imgDiv.classList.add('hidden');
+  imgDiv.innerHTML='';
+  if(isMd){
+    dvMdActive=true;
+    mdToggle.classList.add('active');
+    pre.style.display='none';
+    mdDiv.classList.remove('hidden');
+  }else{
+    dvMdActive=false;
+    mdToggle.classList.remove('active');
+    pre.style.display='';
+    mdDiv.classList.add('hidden');
+  }
+  if(isImage){
+    pre.style.display='none';
+  }
+  if(isAutoEdit){
+    statusEl.className='dv-status edited';
+    statusEl.textContent='EDITED';
+  }else{
+    statusEl.className='dv-status viewing';
+    statusEl.textContent='VIEWING';
+  }
+  // Open the viewer panel
+  viewer.classList.add('open');
+  // Reset countdown
+  countdown.style.transition='none';
+  countdown.style.width='100%';
+  countdown.classList.remove('done');
+  if(!isReopen){
+    pre.innerHTML='<span class="dv-line" style="color:#484f58;">Loading...</span>';
+  }
+  // Image files — render directly, skip text parsing
+  if(isImage){
+    pre.innerHTML='';
+    imgDiv.classList.remove('hidden');
+    var img=document.createElement('img');
+    img.src='/api/file/raw?path='+encodeURIComponent(path)+'&t='+Date.now();
+    img.alt=path.split('/').pop();
+    img.onload=function(){
+      var meta=document.createElement('span');
+      meta.className='img-meta';
+      meta.textContent=img.naturalWidth+'×'+img.naturalHeight;
+      imgDiv.appendChild(meta);
+    };
+    imgDiv.appendChild(img);
+    // No auto-close for images
+    countdown.style.width='0';
+    return;
+  }
+  try{
+    var r=await fetch('/api/file?path='+encodeURIComponent(path));
+    var d=await r.json();
+    if(d.error){pre.innerHTML='<span class="dv-line" style="color:#f85149;">'+escHtml(d.error)+'</span>';return;}
+    var oldContent=fileContentCache[path]||'';
+    var newContent=d.content||'';
+    var isNewFile=!fileContentCache.hasOwnProperty(path);
+    fileContentCache[path]=newContent;
+    diffOpenContent=newContent;
+    var oldLines=oldContent?oldContent.split('\n'):[];
+    var newLines=newContent.split('\n');
+    var hasDiff=(oldContent.length>0&&oldContent!==newContent)||isNewFile;
+    pre.innerHTML='';
+    var maxStagger=Math.min(newLines.length,200);
+    for(var i=0;i<newLines.length;i++){
+      var span=document.createElement('span');
+      span.className='dv-line';
+      span.textContent=newLines[i];
+      var isChangedLine=hasDiff&&!isNewFile&&(i>=oldLines.length||newLines[i]!==oldLines[i]);
+      var isAddedLine=hasDiff&&(isNewFile||i>=oldLines.length);
+      if(isAddedLine){
+        span.classList.add('line-added');
+        var gm=document.createElement('span');
+        gm.className='dv-gutter g-added';
+        span.appendChild(gm);
+      }else if(isChangedLine){
+        span.classList.add('line-changed');
+        var gm2=document.createElement('span');
+        gm2.className='dv-gutter g-modified';
+        span.appendChild(gm2);
+      }
+      // Stagger entry for first open (no previous content)
+      if(!hasDiff&&!isReopen&&i<maxStagger){
+        span.classList.add('line-enter');
+        span.style.animationDelay=(i*6)+'ms';
+        span.style.opacity='0';
+      }
+      pre.appendChild(span);
+      pre.appendChild(document.createTextNode('\n'));
+    }
+    // Render markdown preview if .md file
+    if(isMd&&typeof marked!=='undefined'&&newContent){
+      mdDiv.innerHTML=marked.parse(newContent);
+    }
+    // Scroll to first changed line
+    if(hasDiff){
+      var firstChanged=pre.querySelector('.line-changed,.line-added');
+      if(firstChanged){
+        setTimeout(function(){
+          firstChanged.scrollIntoView({behavior:'smooth',block:'center'});
+        },80);
+      }
+    }
+    // Auto-close countdown for auto-opened edits
+    if(isAutoEdit){
+      var closeDelay=autoCloseMs||5000;
+      var barDuration=(closeDelay-500)/1000; // bar animation slightly shorter
+      // Kick off the countdown bar after a brief paint delay
+      requestAnimationFrame(function(){
+        requestAnimationFrame(function(){
+          countdown.style.transition='width '+barDuration+'s linear';
+          countdown.classList.add('done');
+        });
+      });
+      autoCloseTimer=setTimeout(function(){
+        autoCloseTimer=null;
+        // Only auto-close if still showing this same auto-edit
+        if(diffOpenPath===path)closeDiffViewer();
+      },closeDelay);
+    }else{
+      // Manual open — hide the countdown bar
+      countdown.style.width='0';
+    }
+  }catch(e){
+    pre.innerHTML='<span class="dv-line" style="color:#f85149;">Failed to load</span>';
+  }
+}
+var dvMdActive=false;
+function toggleMdView(){
+  var pre=document.getElementById('dvPre');
+  var md=document.getElementById('dvMarkdown');
+  var btn=document.getElementById('dvMdToggle');
+  dvMdActive=!dvMdActive;
+  btn.classList.toggle('active',dvMdActive);
+  if(dvMdActive){
+    pre.style.display='none';
+    md.classList.remove('hidden');
+    if(typeof marked!=='undefined'&&diffOpenContent){
+      md.innerHTML=marked.parse(diffOpenContent);
+    }
+  }else{
+    pre.style.display='';
+    md.classList.add('hidden');
+  }
+}
+function closeDiffViewer(){
+  if(autoCloseTimer){clearTimeout(autoCloseTimer);autoCloseTimer=null;}
+  document.getElementById('diffViewer').classList.remove('open');
+  document.querySelectorAll('#explorerTree .ft-item.active-viewer').forEach(function(el){
+    el.classList.remove('active-viewer');
+  });
+  diffOpenPath=null;
+  diffOpenContent='';
+}
+function refreshFileTree(){
+  if(!auditMode)return;
+  if(refreshDebounceTimer)clearTimeout(refreshDebounceTimer);
+  refreshDebounceTimer=setTimeout(function(){loadExplorerTree();},500);
+}
+document.addEventListener('keydown',function(e){if(e.key==='Escape'&&diffOpenPath)closeDiffViewer();});
+connectWS();
+</script>
+</body>
+</html>