npm - claudeck - Versions diffs - 1.0.0 - Mend

claudeck 1.0.0

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

Files changed (157) hide show

package/LICENSE +21 -0
package/README.md +233 -0
package/cli.js +2 -0
package/config/agent-chains.json +16 -0
package/config/agent-dags.json +16 -0
package/config/agents.json +46 -0
package/config/bot-prompt.json +3 -0
package/config/folders.json +66 -0
package/config/prompts.json +92 -0
package/config/repos.json +86 -0
package/config/telegram-config.json +17 -0
package/config/workflows.json +90 -0
package/db.js +1198 -0
package/package.json +55 -0
package/plugins/claude-editor/client.css +171 -0
package/plugins/claude-editor/client.js +183 -0
package/plugins/event-stream/client.css +207 -0
package/plugins/event-stream/client.js +271 -0
package/plugins/linear/client.css +345 -0
package/plugins/linear/client.js +380 -0
package/plugins/linear/config.json +5 -0
package/plugins/linear/server.js +312 -0
package/plugins/repos/client.css +549 -0
package/plugins/repos/client.js +663 -0
package/plugins/repos/server.js +232 -0
package/plugins/sudoku/client.css +196 -0
package/plugins/sudoku/client.js +329 -0
package/plugins/tasks/client.css +414 -0
package/plugins/tasks/client.js +394 -0
package/plugins/tasks/server.js +116 -0
package/plugins/tic-tac-toe/client.css +167 -0
package/plugins/tic-tac-toe/client.js +241 -0
package/public/css/core/components.css +232 -0
package/public/css/core/layout.css +330 -0
package/public/css/core/print.css +18 -0
package/public/css/core/reset.css +36 -0
package/public/css/core/responsive.css +378 -0
package/public/css/core/theme.css +116 -0
package/public/css/core/variables.css +93 -0
package/public/css/features/agent-monitor.css +297 -0
package/public/css/features/agent-sidebar.css +525 -0
package/public/css/features/agents.css +996 -0
package/public/css/features/analytics.css +181 -0
package/public/css/features/background-sessions.css +321 -0
package/public/css/features/cost-dashboard.css +168 -0
package/public/css/features/home.css +313 -0
package/public/css/features/retro-terminal.css +88 -0
package/public/css/features/telegram.css +127 -0
package/public/css/features/tour.css +148 -0
package/public/css/features/voice-input.css +60 -0
package/public/css/features/welcome.css +241 -0
package/public/css/panels/assistant-bot.css +442 -0
package/public/css/panels/dev-docs.css +292 -0
package/public/css/panels/file-explorer.css +322 -0
package/public/css/panels/git-panel.css +221 -0
package/public/css/panels/mcp-manager.css +199 -0
package/public/css/panels/tips-feed.css +353 -0
package/public/css/ui/commands.css +273 -0
package/public/css/ui/context-gauge.css +76 -0
package/public/css/ui/file-picker.css +69 -0
package/public/css/ui/image-attachments.css +106 -0
package/public/css/ui/messages.css +884 -0
package/public/css/ui/modals.css +122 -0
package/public/css/ui/parallel.css +217 -0
package/public/css/ui/permissions.css +110 -0
package/public/css/ui/right-panel.css +481 -0
package/public/css/ui/sessions.css +689 -0
package/public/css/ui/status-bar.css +425 -0
package/public/css/ui/toolbox.css +206 -0
package/public/data/tips.json +218 -0
package/public/icons/favicon.png +0 -0
package/public/icons/icon-192.png +0 -0
package/public/icons/icon-512.png +0 -0
package/public/icons/whaly.png +0 -0
package/public/index.html +1140 -0
package/public/js/core/api.js +591 -0
package/public/js/core/constants.js +3 -0
package/public/js/core/dom.js +270 -0
package/public/js/core/events.js +10 -0
package/public/js/core/plugin-loader.js +153 -0
package/public/js/core/store.js +39 -0
package/public/js/core/utils.js +25 -0
package/public/js/core/ws.js +64 -0
package/public/js/features/agent-monitor.js +222 -0
package/public/js/features/agents.js +1209 -0
package/public/js/features/analytics.js +397 -0
package/public/js/features/attachments.js +251 -0
package/public/js/features/background-sessions.js +475 -0
package/public/js/features/chat.js +589 -0
package/public/js/features/cost-dashboard.js +152 -0
package/public/js/features/dag-editor.js +399 -0
package/public/js/features/easter-egg.js +46 -0
package/public/js/features/home.js +270 -0
package/public/js/features/projects.js +372 -0
package/public/js/features/prompts.js +228 -0
package/public/js/features/sessions.js +332 -0
package/public/js/features/telegram.js +131 -0
package/public/js/features/tour.js +210 -0
package/public/js/features/voice-input.js +185 -0
package/public/js/features/welcome.js +43 -0
package/public/js/features/workflows.js +277 -0
package/public/js/main.js +51 -0
package/public/js/panels/assistant-bot.js +445 -0
package/public/js/panels/dev-docs.js +380 -0
package/public/js/panels/file-explorer.js +486 -0
package/public/js/panels/git-panel.js +285 -0
package/public/js/panels/mcp-manager.js +311 -0
package/public/js/panels/tips-feed.js +303 -0
package/public/js/ui/commands.js +114 -0
package/public/js/ui/context-gauge.js +100 -0
package/public/js/ui/diff.js +124 -0
package/public/js/ui/disabled-tools.js +36 -0
package/public/js/ui/export.js +74 -0
package/public/js/ui/formatting.js +206 -0
package/public/js/ui/header-dropdowns.js +72 -0
package/public/js/ui/input-meta.js +71 -0
package/public/js/ui/max-turns.js +21 -0
package/public/js/ui/messages.js +387 -0
package/public/js/ui/model-selector.js +20 -0
package/public/js/ui/notifications.js +232 -0
package/public/js/ui/parallel.js +176 -0
package/public/js/ui/permissions.js +168 -0
package/public/js/ui/right-panel.js +173 -0
package/public/js/ui/shortcuts.js +143 -0
package/public/js/ui/sidebar-toggle.js +29 -0
package/public/js/ui/status-bar.js +172 -0
package/public/js/ui/tab-sdk.js +623 -0
package/public/js/ui/theme.js +38 -0
package/public/manifest.json +13 -0
package/public/offline.html +190 -0
package/public/style.css +42 -0
package/public/sw.js +91 -0
package/server/agent-loop.js +385 -0
package/server/dag-executor.js +265 -0
package/server/orchestrator.js +514 -0
package/server/paths.js +61 -0
package/server/plugin-mount.js +56 -0
package/server/push-sender.js +31 -0
package/server/routes/agents.js +294 -0
package/server/routes/bot.js +45 -0
package/server/routes/exec.js +35 -0
package/server/routes/files.js +218 -0
package/server/routes/mcp.js +82 -0
package/server/routes/messages.js +36 -0
package/server/routes/notifications.js +37 -0
package/server/routes/projects.js +207 -0
package/server/routes/prompts.js +53 -0
package/server/routes/sessions.js +103 -0
package/server/routes/stats.js +143 -0
package/server/routes/telegram.js +71 -0
package/server/routes/tips.js +135 -0
package/server/routes/workflows.js +81 -0
package/server/summarizer.js +55 -0
package/server/telegram-poller.js +205 -0
package/server/telegram-sender.js +304 -0
package/server/ws-handler.js +926 -0
package/server.js +179 -0

package/public/index.html ADDED Viewed

@@ -0,0 +1,1140 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="theme-color" content="#0d1117">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+  <title>Claudeck :: terminal</title>
+  <link rel="icon" type="image/png" href="/icons/favicon.png">
+  <link rel="manifest" href="/manifest.json">
+  <link rel="apple-touch-icon" href="/icons/icon-192.png">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;500;600;700&family=Outfit:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="style.css">
+  <link id="hljs-theme" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/driver.js@1.3.6/dist/driver.css">
+  <script src="https://cdn.jsdelivr.net/npm/driver.js@1.3.6/dist/driver.js.iife.js"></script>
+</head>
+<body>
+  <!-- Welcome Overlay (first visit only) -->
+  <div id="welcome-overlay" class="welcome-overlay hidden">
+    <div class="welcome-container">
+      <div class="welcome-mascot">
+        <img src="/icons/whaly.png" alt="Whaly" class="welcome-whaly" draggable="false">
+      </div>
+      <h1 class="welcome-title">Welcome to <span>Claudeck</span></h1>
+      <div class="welcome-version">v1.0 &middot; browser-based AI development environment</div>
+      <p class="welcome-description">
+        Your local command center for Claude Code. Chat with AI, run workflows,
+        manage projects, explore files, and orchestrate autonomous agents &mdash;
+        all from a single interface.
+      </p>
+      <div class="welcome-features">
+        <div class="welcome-feature">
+          <div class="welcome-feature-icon">
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <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>
+          </div>
+          <div>
+            <div class="welcome-feature-title">AI Chat</div>
+            <div class="welcome-feature-desc">Stream conversations with Claude, run slash commands, attach files</div>
+          </div>
+        </div>
+        <div class="welcome-feature">
+          <div class="welcome-feature-icon">
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <circle cx="12" cy="12" r="3"/><path d="M12 1v4M12 19v4M4.22 4.22l2.83 2.83M16.95 16.95l2.83 2.83M1 12h4M19 12h4M4.22 19.78l2.83-2.83M16.95 7.05l2.83-2.83"/>
+            </svg>
+          </div>
+          <div>
+            <div class="welcome-feature-title">Agents & Workflows</div>
+            <div class="welcome-feature-desc">Automate tasks with pre-built or custom agent pipelines</div>
+          </div>
+        </div>
+        <div class="welcome-feature">
+          <div class="welcome-feature-icon">
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/>
+            </svg>
+          </div>
+          <div>
+            <div class="welcome-feature-title">Dev Tools</div>
+            <div class="welcome-feature-desc">File explorer, Git panel, MCP servers, cost analytics</div>
+          </div>
+        </div>
+      </div>
+      <div class="welcome-actions">
+        <button id="welcome-get-started" class="welcome-btn-primary">Get Started</button>
+        <button id="welcome-take-tour" class="welcome-btn-secondary">Take a Tour</button>
+      </div>
+      <div class="welcome-hint">Press <kbd>Enter</kbd> or <kbd>Esc</kbd> to skip</div>
+    </div>
+  </div>
+  <header class="top-header">
+    <button id="sidebar-toggle-btn" aria-label="Toggle sidebar">
+      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/>
+      </svg>
+    </button>
+    <div class="term-line">
+      <span class="term-prompt">&gt;</span>
+      <span class="term-cmd">claude</span>
+      <span class="term-dot" id="connection-dot" style="display:none"></span>
+      <span class="term-status" id="connection-text" style="display:none">connecting</span>
+      <span class="bg-session-indicator hidden" id="bg-session-indicator">
+        <span class="bg-dot-blink"></span>
+        <span id="bg-session-badge">0</span> bg
+      </span>
+      <span class="term-sep">&middot;</span>
+      <span class="term-user" id="account-email">---</span>
+      <span class="term-plan" id="account-plan"></span>
+    </div>
+    <span class="term-project-name" id="header-project-name"></span>
+    <div class="header-right">
+      <!-- Session Settings Dropdown -->
+      <div class="header-dropdown">
+        <button class="header-dropdown-trigger">
+          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/>
+          </svg>
+          Session
+          <svg class="header-dropdown-chevron" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>
+        </button>
+        <div class="header-dropdown-menu header-dropdown-menu--right">
+          <div class="header-dropdown-item has-submenu">
+            <span class="header-dropdown-item-label">Approval</span>
+            <span class="header-dropdown-item-value" id="perm-mode-display">confirm writes</span>
+            <svg class="header-dropdown-arrow" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 6 15 12 9 18"/></svg>
+            <div class="header-submenu header-submenu--left">
+              <button class="header-submenu-item" data-target="perm-mode-select" data-value="bypass">Bypass</button>
+              <button class="header-submenu-item active" data-target="perm-mode-select" data-value="confirmDangerous">Confirm Writes</button>
+              <button class="header-submenu-item" data-target="perm-mode-select" data-value="confirmAll">Confirm All</button>
+              <button class="header-submenu-item" data-target="perm-mode-select" data-value="plan">Plan Mode</button>
+            </div>
+          </div>
+          <div class="header-dropdown-item has-submenu">
+            <span class="header-dropdown-item-label">Model</span>
+            <span class="header-dropdown-item-value" id="model-display">auto</span>
+            <svg class="header-dropdown-arrow" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 6 15 12 9 18"/></svg>
+            <div class="header-submenu header-submenu--left">
+              <button class="header-submenu-item active" data-target="model-select" data-value="">Auto</button>
+              <button class="header-submenu-item" data-target="model-select" data-value="sonnet">Sonnet</button>
+              <button class="header-submenu-item" data-target="model-select" data-value="opus">Opus</button>
+              <button class="header-submenu-item" data-target="model-select" data-value="haiku">Haiku</button>
+            </div>
+          </div>
+          <div class="header-dropdown-item has-submenu">
+            <span class="header-dropdown-item-label">Max Turns</span>
+            <span class="header-dropdown-item-value" id="max-turns-display">30</span>
+            <svg class="header-dropdown-arrow" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 6 15 12 9 18"/></svg>
+            <div class="header-submenu header-submenu--left">
+              <button class="header-submenu-item" data-target="max-turns-select" data-value="10">10</button>
+              <button class="header-submenu-item active" data-target="max-turns-select" data-value="30">30</button>
+              <button class="header-submenu-item" data-target="max-turns-select" data-value="50">50</button>
+              <button class="header-submenu-item" data-target="max-turns-select" data-value="100">100</button>
+              <button class="header-submenu-item" data-target="max-turns-select" data-value="0">Unlimited</button>
+            </div>
+          </div>
+          <div class="header-dropdown-item has-submenu">
+            <span class="header-dropdown-item-label">Disabled Tools</span>
+            <span class="header-dropdown-item-value" id="disabled-tools-display">none</span>
+            <svg class="header-dropdown-arrow" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 6 15 12 9 18"/></svg>
+            <div class="header-submenu header-submenu--left header-submenu--tools">
+              <label class="header-submenu-check" data-tool="WebSearch"><input type="checkbox" value="WebSearch"><span>WebSearch</span></label>
+              <label class="header-submenu-check" data-tool="WebFetch"><input type="checkbox" value="WebFetch"><span>WebFetch</span></label>
+              <label class="header-submenu-check" data-tool="Agent"><input type="checkbox" value="Agent"><span>Agent</span></label>
+              <label class="header-submenu-check" data-tool="NotebookEdit"><input type="checkbox" value="NotebookEdit"><span>NotebookEdit</span></label>
+              <label class="header-submenu-check" data-tool="TaskCreate"><input type="checkbox" value="TaskCreate"><span>TaskCreate</span></label>
+              <label class="header-submenu-check" data-tool="TaskUpdate"><input type="checkbox" value="TaskUpdate"><span>TaskUpdate</span></label>
+              <label class="header-submenu-check" data-tool="TodoRead"><input type="checkbox" value="TodoRead"><span>TodoRead</span></label>
+              <label class="header-submenu-check" data-tool="TodoWrite"><input type="checkbox" value="TodoWrite"><span>TodoWrite</span></label>
+            </div>
+          </div>
+        </div>
+        <!-- Hidden selects (keep for existing JS logic) -->
+        <select id="perm-mode-select" class="header-hidden-select" title="Tool approval mode">
+          <option value="bypass">bypass</option>
+          <option value="confirmDangerous" selected>confirm writes</option>
+          <option value="confirmAll">confirm all</option>
+          <option value="plan">plan mode</option>
+        </select>
+        <select id="model-select" class="header-hidden-select" title="Model">
+          <option value="">auto</option>
+          <option value="sonnet">sonnet</option>
+          <option value="opus">opus</option>
+          <option value="haiku">haiku</option>
+        </select>
+        <select id="max-turns-select" class="header-hidden-select" title="Max turns per query">
+          <option value="10">10</option>
+          <option value="30" selected>30</option>
+          <option value="50">50</option>
+          <option value="100">100</option>
+          <option value="0">unlimited</option>
+        </select>
+      </div>
+      <!-- Tools Dropdown -->
+      <div class="header-dropdown">
+        <button class="header-dropdown-trigger">
+          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <rect x="2" y="7" width="20" height="14" rx="2" ry="2"/><path d="M16 7V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v3"/>
+          </svg>
+          Tools
+          <svg class="header-dropdown-chevron" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>
+        </button>
+        <div class="header-dropdown-menu header-dropdown-menu--right">
+          <button class="header-dropdown-item" id="mcp-toggle-btn" title="MCP Server Management">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/>
+            </svg>
+            <span>MCP Servers</span>
+          </button>
+          <button class="header-dropdown-item" id="notifications-toggle-btn" title="Toggle browser notifications">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/>
+            </svg>
+            <span id="notifications-label">Notifications</span>
+          </button>
+          <button class="header-dropdown-item" id="telegram-settings-btn" title="Telegram notifications">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M21.2 4.6L2.4 11.2c-.8.3-.8 1.5 0 1.8l4.6 1.7 1.7 5.5c.2.6 1 .8 1.4.3l2.5-2.8 4.8 3.5c.6.4 1.4.1 1.5-.6L21.2 4.6z"/>
+            </svg>
+            <span id="telegram-label">Telegram</span>
+          </button>
+          <div style="height:1px;background:var(--border);margin:4px 8px;"></div>
+          <button class="header-dropdown-item" id="dev-docs-btn" title="Developer Documentation">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/>
+            </svg>
+            <span>Dev Docs</span>
+          </button>
+        </div>
+      </div>
+      <button id="tips-feed-toggle-btn" class="header-icon-btn" title="Toggle tips feed (Cmd+Shift+T)">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M9 18h6"/><path d="M10 22h4"/>
+          <path d="M12 2a7 7 0 0 0-4 12.7V17h8v-2.3A7 7 0 0 0 12 2z"/>
+        </svg>
+      </button>
+      <button id="right-panel-toggle-btn" class="header-icon-btn" title="Toggle right panel (Cmd+B)">
+        <svg width="16" height="16" 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" ry="2"/><line x1="15" y1="3" x2="15" y2="21"/>
+        </svg>
+      </button>
+      <div class="term-costs">
+        <span class="term-cost-value hidden" id="project-cost">$0.00</span>
+        <span class="term-cost-value hidden" id="total-cost">$0.00</span>
+      </div>
+    </div>
+  </header>
+  <div class="layout">
+    <div id="sidebar-backdrop"></div>
+    <!-- Sidebar -->
+    <aside class="sidebar">
+      <div class="sidebar-header">
+        <button id="home-btn" class="home-btn active" title="Home">
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
+            <polyline points="9 22 9 12 15 12 15 22"/>
+          </svg>
+        </button>
+        <h1>Claudeck</h1>
+        <button id="theme-toggle-btn" class="theme-toggle-btn" title="Toggle light/dark theme">
+          <svg id="theme-icon-sun" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:none;">
+            <circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
+          </svg>
+          <svg id="theme-icon-moon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
+          </svg>
+        </button>
+      </div>
+      <div class="folder-picker">
+        <div class="folder-picker-header">
+          <label for="project-select">Project <span id="system-prompt-badge" class="system-prompt-badge hidden" title="System prompt configured">SP</span></label>
+          <div class="folder-picker-actions">
+            <button id="open-vscode-btn" class="add-project-btn sidebar-tooltip" data-tooltip="Open in VS Code">
+              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/>
+              </svg>
+            </button>
+            <button id="add-project-btn" class="add-project-btn sidebar-tooltip" data-tooltip="Add project">+</button>
+            <button id="system-prompt-edit-btn" class="system-prompt-edit-btn sidebar-tooltip" data-tooltip="System prompt">&#9881;</button>
+          </div>
+        </div>
+        <select id="project-select">
+          <option value="">Select a project...</option>
+        </select>
+      </div>
+      <div class="sessions-section">
+        <h2>Sessions</h2>
+        <div id="session-controls" class="session-controls hidden">
+          <div class="session-search-wrapper">
+            <input id="session-search" type="text" placeholder="Search sessions..." autocomplete="off">
+          </div>
+          <button id="new-session-btn" class="btn-secondary">+ New Session</button>
+          <div class="mode-toggle">
+            <label class="toggle-switch" title="Toggle parallel chat mode (2x2 grid)">
+              <input type="checkbox" id="toggle-parallel-btn">
+              <span class="toggle-slider"></span>
+              <span class="toggle-label">Parallel Mode</span>
+            </label>
+          </div>
+        </div>
+        <ul id="session-list" class="session-list"></ul>
+      </div>
+    </aside>
+    <!-- Main Chat Area -->
+    <main class="chat-area">
+      <div id="home-page" class="home-page">
+        <div class="home-section">
+          <div class="home-section-header">
+            <h2>AI Activity</h2>
+            <span class="home-subtitle" id="home-year-label"></span>
+          </div>
+          <div class="home-grid-container">
+            <div class="home-grid-months" id="home-grid-months"></div>
+            <div class="home-grid-body">
+              <div class="home-grid-days">
+                <span></span><span>Mon</span><span></span><span>Wed</span><span></span><span>Fri</span><span></span>
+              </div>
+              <div id="home-activity-grid" class="home-activity-grid"></div>
+            </div>
+            <div class="home-grid-legend">
+              <span>Less</span>
+              <span class="home-legend-cell" data-level="0"></span>
+              <span class="home-legend-cell" data-level="1"></span>
+              <span class="home-legend-cell" data-level="2"></span>
+              <span class="home-legend-cell" data-level="3"></span>
+              <span class="home-legend-cell" data-level="4"></span>
+              <span>More</span>
+            </div>
+          </div>
+        </div>
+        <div class="home-cards" id="home-cards"></div>
+        <div class="home-section home-analytics-section">
+          <div class="home-section-header">
+            <h2>Analytics</h2>
+            <select id="home-analytics-filter" class="analytics-project-filter">
+              <option value="">All Projects</option>
+            </select>
+          </div>
+          <div id="home-analytics-content" class="analytics-content"></div>
+        </div>
+      </div>
+      <!-- Agent Sidebar (left of chat) -->
+      <aside id="agent-sidebar" class="agent-sidebar hidden">
+        <div class="agent-sidebar-header">
+          <div class="agent-sidebar-title-row">
+            <svg class="agent-sidebar-logo" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M12 1v4M12 19v4M4.22 4.22l2.83 2.83M16.95 16.95l2.83 2.83M1 12h4M19 12h4M4.22 19.78l2.83-2.83M16.95 7.05l2.83-2.83"/></svg>
+            <span class="agent-sidebar-title">Agents & Workflows</span>
+          </div>
+          <button id="agent-sidebar-close" class="agent-sidebar-close" title="Close">&times;</button>
+        </div>
+        <div id="agent-panel" class="agent-sidebar-body"></div>
+      </aside>
+      <div class="chat-area-main hidden">
+        <div id="messages" class="messages"></div>
+        <div id="image-preview-strip" class="image-preview-strip hidden"></div>
+        <input type="file" id="image-file-input" accept="image/png,image/jpeg,image/gif,image/webp" multiple hidden>
+        <div id="input-waiting" class="input-waiting hidden">
+          <span class="input-waiting-dot"></span>
+          <span class="input-waiting-text">Claude is waiting for your response</span>
+        </div>
+        <div class="input-bar">
+          <button id="agent-btn" data-tooltip="Agents & Workflows" class="toolbox-toggle">
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <rect x="3" y="11" width="18" height="10" rx="2"/><circle cx="9" cy="16" r="1"/><circle cx="15" cy="16" r="1"/><path d="M12 2v4"/><path d="M8 7h8a2 2 0 0 1 2 2v2H6V9a2 2 0 0 1 2-2z"/><path d="M5 11h1"/><path d="M18 11h1"/>
+            </svg>
+          </button>
+          <button id="attach-btn" data-tooltip="Attach Files" class="toolbox-toggle" style="position:relative;">
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M21.44 11.05l-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>
+            <span id="attach-badge" class="attach-badge hidden">0</span>
+          </button>
+          <button id="image-btn" data-tooltip="Attach Images" class="toolbox-toggle">
+            <svg width="18" height="18" 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" ry="2"/>
+              <circle cx="8.5" cy="8.5" r="1.5"/>
+              <polyline points="21 15 16 10 5 21"/>
+            </svg>
+          </button>
+          <button id="mic-btn" data-tooltip="Voice Input" class="toolbox-toggle">
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/>
+              <path d="M19 10v2a7 7 0 0 1-14 0v-2"/>
+              <line x1="12" y1="19" x2="12" y2="23"/>
+              <line x1="8" y1="23" x2="16" y2="23"/>
+            </svg>
+          </button>
+          <button id="toolbox-btn" data-tooltip="Saved Prompts" class="toolbox-toggle">
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <rect x="2" y="7" width="20" height="14" rx="2" ry="2"/><path d="M16 7V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v3"/><line x1="12" y1="12" x2="12" y2="16"/><line x1="10" y1="14" x2="14" y2="14"/>
+            </svg>
+          </button>
+          <div class="input-textarea-wrap">
+            <textarea id="message-input" placeholder="> type a message or / for commands..." rows="1"></textarea>
+            <div class="input-meta">
+              <span class="input-meta-item" id="input-meta-model" title="Selected model"></span>
+              <span class="input-meta-sep">&middot;</span>
+              <span class="input-meta-item" id="input-meta-perm" title="Permission mode"></span>
+              <span class="input-meta-sep">&middot;</span>
+              <span class="input-meta-item" id="input-meta-turns" title="Max turns per query"></span>
+              <span class="input-meta-sep">&middot;</span>
+              <span class="input-meta-shortcuts">
+                <span class="input-meta-kbd" title="Toggle right panel">&#8984;B</span>
+                <span class="input-meta-kbd" title="New session">&#8984;N</span>
+                <span class="input-meta-kbd" title="Search sessions">&#8984;K</span>
+                <span class="input-meta-kbd" title="Show all shortcuts">&#8984;/</span>
+              </span>
+            </div>
+          </div>
+          <button id="send-btn" title="Send">
+            <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+              <path d="M3 10l7-7m0 0l7 7m-7-7v14" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" transform="rotate(90, 10, 10)"/>
+            </svg>
+          </button>
+          <button id="stop-btn" title="Stop" class="hidden">
+            <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+              <rect x="4" y="4" width="12" height="12" rx="2" fill="currentColor"/>
+            </svg>
+          </button>
+          <div id="slash-autocomplete" class="slash-autocomplete hidden"></div>
+        </div>
+        <div id="toolbox-panel" class="toolbox-panel hidden"></div>
+        <div id="workflow-panel" class="toolbox-panel hidden"></div>
+      </div>
+      <aside id="tips-feed-panel" class="tips-feed-panel hidden">
+        <div id="tips-feed-resize" class="tips-feed-resize"></div>
+        <div class="tips-feed-header">
+          <span class="tips-feed-title"><span class="tips-feed-title-icon">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M9 18h6"/><path d="M10 22h4"/><path d="M12 2a7 7 0 0 0-4 12.7V17h8v-2.3A7 7 0 0 0 12 2z"/>
+            </svg>
+          </span> Tips Feed</span>
+          <button id="tips-feed-close" class="tips-feed-close" title="Close">&times;</button>
+        </div>
+        <div class="tips-feed-tabs"></div>
+        <div id="tips-feed-content" class="tips-feed-content"></div>
+      </aside>
+    </main>
+    <!-- Right Panel (tabbed: Tasks / Files / Git) -->
+    <aside id="right-panel" class="right-panel hidden">
+      <div id="right-panel-resize" class="right-panel-resize"></div>
+      <div class="right-panel-tab-bar">
+        <button class="right-panel-tab active" data-tab="files">Files</button>
+        <button class="right-panel-tab" data-tab="git">Git</button>
+        <button id="right-panel-close" class="right-panel-close" title="Close panel">&times;</button>
+      </div>
+      <div class="right-panel-content">
+        <!-- Files pane -->
+        <div class="right-panel-pane active" data-tab="files">
+          <div class="file-explorer-toolbar">
+            <input id="file-explorer-search" type="text" placeholder="Filter files..." autocomplete="off" class="file-explorer-search">
+            <button id="file-refresh-btn" class="file-refresh-btn" title="Refresh file tree">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <polyline points="23 4 23 10 17 10"/><polyline points="1 20 1 14 7 14"/>
+                <path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/>
+              </svg>
+            </button>
+          </div>
+          <div id="file-tree" class="file-tree"></div>
+          <div id="file-preview" class="file-preview hidden">
+            <div class="file-preview-header">
+              <span id="file-preview-name" class="file-preview-name"></span>
+              <button id="file-preview-close" class="file-preview-close" title="Close preview">&times;</button>
+            </div>
+            <pre id="file-preview-content" class="file-preview-content"><code></code></pre>
+            <img id="file-preview-image" class="file-preview-image hidden" alt="">
+          </div>
+        </div>
+        <!-- Git pane -->
+        <div class="right-panel-pane" data-tab="git">
+          <div class="git-toolbar">
+            <select id="git-branch-select" class="git-branch-select" title="Switch branch"></select>
+            <button id="git-refresh-btn" class="git-refresh-btn" title="Refresh">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <polyline points="23 4 23 10 17 10"/><polyline points="1 20 1 14 7 14"/>
+                <path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/>
+              </svg>
+            </button>
+          </div>
+          <div id="git-status-list" class="git-status-list"></div>
+          <div class="git-commit-section">
+            <textarea id="git-commit-msg" class="git-commit-msg" placeholder="Commit message..." rows="2"></textarea>
+            <button id="git-commit-btn" class="git-commit-btn">Commit</button>
+          </div>
+          <div class="git-log-section">
+            <h4 class="git-log-title">Recent Commits</h4>
+            <div id="git-log-list" class="git-log-list"></div>
+          </div>
+        </div>
+        <!-- Plugin tabs are injected here by tab-sdk.js -->
+      </div>
+    </aside>
+  </div>
+  <!-- Orchestrate Modal -->
+  <div id="orch-modal" class="modal-overlay hidden">
+    <div class="modal agent-form-modal">
+      <div class="modal-header">
+        <h3>Orchestrate</h3>
+        <button id="orch-modal-close" class="modal-close">&times;</button>
+      </div>
+      <div class="af-section">
+        <div class="af-section-label">How it works</div>
+        <div class="orch-explainer">
+          <div class="orch-explainer-steps">
+            <div class="orch-step"><span class="orch-step-num">1</span><span>Describe your task in plain language</span></div>
+            <div class="orch-step"><span class="orch-step-num">2</span><span>The orchestrator analyzes and decomposes it into sub-tasks</span></div>
+            <div class="orch-step"><span class="orch-step-num">3</span><span>Each sub-task is delegated to the best-fit agent automatically</span></div>
+            <div class="orch-step"><span class="orch-step-num">4</span><span>Results are synthesized into a unified response</span></div>
+          </div>
+        </div>
+      </div>
+      <div class="af-section">
+        <div class="af-section-label">Task</div>
+        <div class="af-field">
+          <label for="orch-task-input">What do you need done?</label>
+          <textarea id="orch-task-input" rows="5" placeholder="e.g. Review the current changes for bugs and security issues, then write tests for any uncovered code paths, and finally refactor any code smells you find."></textarea>
+        </div>
+      </div>
+      <div class="modal-actions">
+        <button type="button" id="orch-modal-cancel" class="modal-btn-cancel">Cancel</button>
+        <button type="button" id="orch-modal-run" class="modal-btn-save">Run Orchestrator</button>
+      </div>
+    </div>
+  </div>
+  <!-- Agent Monitor Modal -->
+  <div id="agent-monitor-modal" class="modal-overlay hidden">
+    <div class="modal agent-monitor-modal">
+      <div class="modal-header">
+        <h3>Agent Monitor</h3>
+        <button id="agent-monitor-close" class="modal-close">&times;</button>
+      </div>
+      <div id="agent-monitor-content"></div>
+    </div>
+  </div>
+  <!-- DAG Editor Modal -->
+  <div id="dag-modal" class="modal-overlay hidden">
+    <div class="modal dag-modal-wide">
+      <div class="modal-header">
+        <h3 id="dag-modal-title">New DAG</h3>
+        <button id="dag-modal-close" class="modal-close">&times;</button>
+      </div>
+      <div class="dag-explainer af-section">
+        <div class="af-section-label">What is a DAG?</div>
+        <div class="orch-explainer">
+          <p class="dag-explainer-text">A <strong>DAG</strong> (Directed Acyclic Graph) lets you run agents in parallel when they have no dependencies, and sequentially when one depends on another's output.</p>
+          <div class="orch-explainer-steps">
+            <div class="orch-step"><span class="orch-step-num">1</span><span><strong>Drag agents</strong> from the palette onto the canvas</span></div>
+            <div class="orch-step"><span class="orch-step-num">2</span><span><strong>Connect outputs → inputs</strong> by dragging between ports to define dependencies</span></div>
+            <div class="orch-step"><span class="orch-step-num">3</span><span><strong>Click an edge</strong> to remove a connection</span></div>
+            <div class="orch-step"><span class="orch-step-num">4</span><span>Agents on the same level <strong>run in parallel</strong>, dependent agents wait</span></div>
+          </div>
+        </div>
+      </div>
+      <div class="dag-editor-toolbar af-section">
+        <div class="af-section-label">Details</div>
+        <div class="af-grid-2">
+          <div class="af-field">
+            <label for="dag-form-title">Title</label>
+            <input id="dag-form-title" type="text" placeholder="e.g. Full Review Pipeline" required>
+          </div>
+          <div class="af-field">
+            <label for="dag-form-desc">Description</label>
+            <input id="dag-form-desc" type="text" placeholder="Short description">
+          </div>
+        </div>
+      </div>
+      <div class="dag-editor-body">
+        <div class="dag-node-palette" id="dag-node-palette"></div>
+        <div class="dag-canvas-wrap">
+          <svg id="dag-canvas" class="dag-canvas"></svg>
+        </div>
+      </div>
+      <input id="dag-form-edit-id" type="hidden">
+      <div class="modal-actions">
+        <button type="button" id="dag-modal-cancel" class="modal-btn-cancel">Cancel</button>
+        <button type="button" id="dag-auto-layout" class="modal-btn-cancel">Auto Layout</button>
+        <button type="button" id="dag-modal-save" class="modal-btn-save">Save DAG</button>
+      </div>
+    </div>
+  </div>
+  <!-- Agent Chain Modal -->
+  <div id="chain-modal" class="modal-overlay hidden">
+    <div class="modal agent-form-modal">
+      <div class="modal-header">
+        <h3 id="chain-modal-title">New Chain</h3>
+        <button id="chain-modal-close" class="modal-close">&times;</button>
+      </div>
+      <form id="chain-form">
+        <div class="af-section">
+          <div class="af-section-label">Details</div>
+          <div class="af-field">
+            <label for="chain-form-title">Title</label>
+            <input id="chain-form-title" type="text" placeholder="e.g. Full Code Review Pipeline" required>
+          </div>
+          <div class="af-field">
+            <label for="chain-form-desc">Description</label>
+            <input id="chain-form-desc" type="text" placeholder="Short description of the chain">
+          </div>
+        </div>
+        <div class="af-section">
+          <div class="af-section-label">Pipeline</div>
+          <div id="chain-agent-list" class="chain-agent-list"></div>
+          <button type="button" id="chain-add-agent-btn" class="chain-add-agent-btn">+ Add Agent Step</button>
+        </div>
+        <div class="af-section">
+          <div class="af-section-label">Settings</div>
+          <div class="af-field">
+            <label for="chain-form-context">Context Passing</label>
+            <select id="chain-form-context">
+              <option value="summary">Summary (recommended)</option>
+              <option value="full">Full output</option>
+              <option value="none">None</option>
+            </select>
+          </div>
+        </div>
+        <input id="chain-form-edit-id" type="hidden">
+        <div class="modal-actions">
+          <button type="button" id="chain-modal-cancel" class="modal-btn-cancel">Cancel</button>
+          <button type="submit" class="modal-btn-save">Save Chain</button>
+        </div>
+      </form>
+    </div>
+  </div>
+  <!-- Agent CRUD Modal -->
+  <div id="agent-modal" class="modal-overlay hidden">
+    <div class="modal agent-form-modal">
+      <div class="modal-header">
+        <h3 id="agent-modal-title">New Agent</h3>
+        <button id="agent-modal-close" class="modal-close">&times;</button>
+      </div>
+      <form id="agent-form">
+        <div class="af-section">
+          <div class="af-section-label">Identity</div>
+          <div class="af-grid-2">
+            <div class="af-field">
+              <label for="agent-form-title">Title</label>
+              <input id="agent-form-title" type="text" placeholder="e.g. Code Documenter" required>
+            </div>
+            <div class="af-field">
+              <label for="agent-form-icon">Icon</label>
+              <select id="agent-form-icon">
+                <option value="search">Search</option>
+                <option value="bug">Bug</option>
+                <option value="check">Check</option>
+                <option value="tool" selected>Tool</option>
+              </select>
+            </div>
+          </div>
+          <div class="af-field">
+            <label for="agent-form-desc">Description</label>
+            <input id="agent-form-desc" type="text" placeholder="Short description of what this agent does" required>
+          </div>
+        </div>
+        <div class="af-section">
+          <div class="af-section-label">Behavior</div>
+          <div class="af-field">
+            <label for="agent-form-goal">Goal</label>
+            <textarea id="agent-form-goal" rows="4" placeholder="Describe the agent's goal in detail. Be specific about what files to look at, what to check, and what output to produce..." required></textarea>
+          </div>
+        </div>
+        <div class="af-section">
+          <div class="af-section-label">Constraints</div>
+          <div class="af-grid-2">
+            <div class="af-field">
+              <label for="agent-form-max-turns">Max Turns</label>
+              <div class="af-input-with-hint">
+                <input id="agent-form-max-turns" type="number" min="1" max="200" value="50">
+                <span class="af-hint">1 - 200</span>
+              </div>
+            </div>
+            <div class="af-field">
+              <label for="agent-form-timeout">Timeout (seconds)</label>
+              <div class="af-input-with-hint">
+                <input id="agent-form-timeout" type="number" min="30" max="3600" value="300">
+                <span class="af-hint">30 - 3600</span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <input id="agent-form-edit-id" type="hidden">
+        <div class="modal-actions">
+          <button type="button" id="agent-modal-cancel" class="modal-btn-cancel">Cancel</button>
+          <button type="submit" class="modal-btn-save">Save Agent</button>
+        </div>
+      </form>
+    </div>
+  </div>
+  <!-- Workflow CRUD Modal -->
+  <div id="wf-modal" class="modal-overlay hidden">
+    <div class="modal agent-form-modal">
+      <div class="modal-header">
+        <h3 id="wf-modal-title">New Workflow</h3>
+        <button id="wf-modal-close" class="modal-close">&times;</button>
+      </div>
+      <form id="wf-form">
+        <div class="af-section">
+          <div class="af-section-label">Identity</div>
+          <div class="af-field">
+            <label for="wf-form-title">Title</label>
+            <input id="wf-form-title" type="text" placeholder="e.g. Review PR" required>
+          </div>
+          <div class="af-field">
+            <label for="wf-form-desc">Description</label>
+            <input id="wf-form-desc" type="text" placeholder="Short description of this workflow">
+          </div>
+        </div>
+        <div class="af-section">
+          <div class="af-section-label">Steps</div>
+          <div id="wf-steps-list" class="wf-steps-list"></div>
+          <button type="button" id="wf-add-step-btn" class="wf-step-add">+ Add Step</button>
+        </div>
+        <input id="wf-form-edit-id" type="hidden">
+        <div class="modal-actions">
+          <button type="button" id="wf-modal-cancel" class="modal-btn-cancel">Cancel</button>
+          <button type="submit" class="modal-btn-save">Save Workflow</button>
+        </div>
+      </form>
+    </div>
+  </div>
+  <!-- Add Prompt Modal -->
+  <div id="prompt-modal" class="modal-overlay hidden">
+    <div class="modal">
+      <div class="modal-header">
+        <h3>New Prompt</h3>
+        <button id="modal-close" class="modal-close">&times;</button>
+      </div>
+      <form id="prompt-form">
+        <label for="prompt-title">Title</label>
+        <input id="prompt-title" type="text" placeholder="e.g. Optimize Imports" required>
+        <label for="prompt-desc">Description</label>
+        <input id="prompt-desc" type="text" placeholder="Short description of what it does" required>
+        <label for="prompt-text">Prompt</label>
+        <textarea id="prompt-text" rows="4" placeholder="The full prompt to send to Claude..." required></textarea>
+        <div class="modal-actions">
+          <button type="button" id="modal-cancel" class="modal-btn-cancel">Cancel</button>
+          <button type="submit" class="modal-btn-save">Save Prompt</button>
+        </div>
+      </form>
+    </div>
+  </div>
+  <!-- System Prompt Modal -->
+  <div id="system-prompt-modal" class="modal-overlay hidden">
+    <div class="modal">
+      <div class="modal-header">
+        <h3>System Prompt</h3>
+        <button id="sp-modal-close" class="modal-close">&times;</button>
+      </div>
+      <form id="system-prompt-form">
+        <label for="sp-textarea">Custom instructions for Claude in this project</label>
+        <p class="sp-hint">If a <code>CLAUDE.md</code> file exists in the project root, it is automatically included by the SDK — no need to duplicate it here.</p>
+        <textarea id="sp-textarea" rows="8" placeholder="e.g., You are an expert in React + TypeScript. This is a monorepo..."></textarea>
+        <div class="modal-actions">
+          <button type="button" id="sp-clear-btn" class="modal-btn-cancel">Clear</button>
+          <button type="button" id="sp-cancel-btn" class="modal-btn-cancel">Cancel</button>
+          <button type="submit" class="modal-btn-save">Save</button>
+        </div>
+      </form>
+    </div>
+  </div>
+  <!-- File Picker Modal -->
+  <div id="file-picker-modal" class="modal-overlay hidden">
+    <div class="modal file-picker-modal">
+      <div class="modal-header">
+        <h3>Attach Files</h3>
+        <button id="fp-modal-close" class="modal-close">&times;</button>
+      </div>
+      <input id="fp-search" type="text" class="file-picker-search" placeholder="Search files..." autocomplete="off">
+      <div id="fp-list" class="file-picker-list"></div>
+      <div class="file-picker-footer">
+        <span id="fp-count">0 files selected</span>
+        <button id="fp-done-btn" class="modal-btn-save">Done</button>
+      </div>
+    </div>
+  </div>
+  <!-- Keyboard Shortcuts Modal -->
+  <div id="shortcuts-modal" class="modal-overlay hidden">
+    <div class="modal">
+      <div class="modal-header">
+        <h3>Keyboard Shortcuts</h3>
+        <button id="shortcuts-modal-close" class="modal-close">&times;</button>
+      </div>
+      <table class="shortcuts-table">
+        <tr><td><span class="kbd">&#8984;K</span></td><td>Focus session search</td></tr>
+        <tr><td><span class="kbd">&#8984;N</span></td><td>New session</td></tr>
+        <tr><td><span class="kbd">&#8984;/</span></td><td>Show keyboard shortcuts</td></tr>
+        <tr><td><span class="kbd">&#8984;B</span></td><td>Toggle right panel</td></tr>
+        <tr><td><span class="kbd">&#8984;&#8679;E</span></td><td>Open file explorer</td></tr>
+        <tr><td><span class="kbd">&#8984;&#8679;G</span></td><td>Open git panel</td></tr>
+        <tr><td><span class="kbd">&#8984;&#8679;R</span></td><td>Open repos panel</td></tr>
+        <tr><td><span class="kbd">&#8984;&#8679;V</span></td><td>Open events panel</td></tr>
+        <tr><td><span class="kbd">&#8984;&#8679;A</span></td><td>Go to home page</td></tr>
+        <tr><td><span class="kbd">&#8984;&#8679;T</span></td><td>Toggle tips feed</td></tr>
+        <tr><td><span class="kbd">&#8984;1</span>–<span class="kbd">&#8984;4</span></td><td>Focus parallel pane 1–4</td></tr>
+        <tr><td><span class="kbd">Esc</span></td><td>Close any open modal</td></tr>
+        <tr><td><span class="kbd">Enter</span></td><td>Send message</td></tr>
+        <tr><td><span class="kbd">Shift+Enter</span></td><td>New line in input</td></tr>
+        <tr><td><span class="kbd">/</span></td><td>Slash commands autocomplete</td></tr>
+      </table>
+    </div>
+  </div>
+  <!-- Cost Dashboard Modal -->
+  <div id="cost-dashboard-modal" class="modal-overlay hidden">
+    <div class="modal cost-dashboard-modal">
+      <div class="modal-header">
+        <h3>Cost Dashboard</h3>
+        <button id="cost-modal-close" class="modal-close">&times;</button>
+      </div>
+      <div id="cost-dashboard-content">
+        <div class="cost-summary-cards" id="cost-summary-cards"></div>
+        <div class="cost-table-container">
+          <table class="cost-table">
+            <thead>
+              <tr>
+                <th data-sort="title">Session</th>
+                <th data-sort="turns">Turns</th>
+                <th data-sort="tokens">Tokens</th>
+                <th data-sort="cost">Cost</th>
+              </tr>
+            </thead>
+            <tbody id="cost-table-body"></tbody>
+          </table>
+        </div>
+        <div class="cost-chart-section">
+          <h4>Daily Costs (Last 30 Days)</h4>
+          <div class="cost-chart" id="cost-chart"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- Background Session Confirmation Dialog -->
+  <div id="bg-confirm-modal" class="modal-overlay hidden" data-persistent>
+    <div class="modal bg-confirm-modal">
+      <div class="modal-header">
+        <h3>Session In Progress</h3>
+      </div>
+      <p class="bg-confirm-text">Claude is still responding in this session. What would you like to do?</p>
+      <div class="modal-actions bg-confirm-actions">
+        <button id="bg-confirm-cancel" class="modal-btn-cancel">Cancel</button>
+        <button id="bg-confirm-abort" class="modal-btn-cancel bg-confirm-abort-btn">Abort Session</button>
+        <button id="bg-confirm-background" class="modal-btn-save">Continue in Background</button>
+      </div>
+    </div>
+  </div>
+  <!-- Permission Approval Modal -->
+  <div id="perm-modal" class="modal-overlay hidden" data-persistent>
+    <div class="modal perm-modal">
+      <div class="modal-header perm-modal-header">
+        <h3><span class="perm-tool-icon">&#9888;</span> <span id="perm-modal-tool-name">Tool Approval</span></h3>
+      </div>
+      <span id="perm-bg-badge" class="perm-bg-badge hidden"></span>
+      <div id="perm-modal-summary" class="perm-modal-summary"></div>
+      <details class="perm-modal-details">
+        <summary>Full input</summary>
+        <pre id="perm-modal-input" class="perm-modal-input"></pre>
+      </details>
+      <label class="perm-always-allow">
+        <input type="checkbox" id="perm-always-allow-cb">
+        Always allow <strong id="perm-always-allow-tool"></strong> this session
+      </label>
+      <div class="modal-actions">
+        <button id="perm-deny-btn" class="perm-deny-btn">Deny</button>
+        <button id="perm-allow-btn" class="perm-allow-btn">Allow</button>
+      </div>
+    </div>
+  </div>
+  <!-- Linear Create Issue Modal -->
+  <div id="linear-create-modal" class="modal-overlay hidden">
+    <div class="modal">
+      <div class="modal-header">
+        <h3>Create Issue</h3>
+        <button id="linear-create-close" class="modal-close">&times;</button>
+      </div>
+      <form id="linear-create-form">
+        <label for="linear-create-title">Title</label>
+        <input id="linear-create-title" type="text" placeholder="Issue title" required>
+        <label for="linear-create-desc">Description</label>
+        <textarea id="linear-create-desc" rows="3" placeholder="Optional description..."></textarea>
+        <label for="linear-create-team">Project (Team)</label>
+        <select id="linear-create-team" required>
+          <option value="">Select a team...</option>
+        </select>
+        <label for="linear-create-state">State</label>
+        <select id="linear-create-state" disabled>
+          <option value="">Select a team first...</option>
+        </select>
+        <div class="modal-actions">
+          <button type="button" id="linear-create-cancel" class="modal-btn-cancel">Cancel</button>
+          <button type="submit" id="linear-create-submit" class="modal-btn-save">Create</button>
+        </div>
+      </form>
+    </div>
+  </div>
+  <!-- Telegram Settings Modal -->
+  <div id="telegram-modal" class="modal-overlay hidden">
+    <div class="modal telegram-modal">
+      <div class="modal-header">
+        <h2>
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M21.2 4.6L2.4 11.2c-.8.3-.8 1.5 0 1.8l4.6 1.7 1.7 5.5c.2.6 1 .8 1.4.3l2.5-2.8 4.8 3.5c.6.4 1.4.1 1.5-.6L21.2 4.6z"/>
+          </svg>
+          Telegram Notifications
+        </h2>
+        <button class="modal-close" id="telegram-close">&times;</button>
+      </div>
+      <div class="modal-body" style="padding:16px;">
+        <div class="telegram-form">
+          <label class="telegram-toggle-row">
+            <input type="checkbox" id="telegram-enabled">
+            <span>Enable Telegram notifications</span>
+          </label>
+          <div class="telegram-field">
+            <label for="telegram-bot-token">Bot Token</label>
+            <input type="password" id="telegram-bot-token" placeholder="123456:ABC-DEF..." autocomplete="off">
+          </div>
+          <div class="telegram-field">
+            <label for="telegram-chat-id">Chat ID</label>
+            <input type="text" id="telegram-chat-id" placeholder="-100123456789" autocomplete="off">
+          </div>
+          <div class="telegram-field">
+            <label for="telegram-afk-timeout">AFK Approval Timeout (minutes)</label>
+            <input type="number" id="telegram-afk-timeout" min="1" max="120" value="15" style="width:80px;">
+          </div>
+          <div class="telegram-notify-section">
+            <label class="telegram-field-label">Notification Events</label>
+            <div class="telegram-notify-grid">
+              <label class="telegram-toggle-row"><input type="checkbox" id="tg-notify-session" checked> Session complete</label>
+              <label class="telegram-toggle-row"><input type="checkbox" id="tg-notify-workflow" checked> Workflow complete</label>
+              <label class="telegram-toggle-row"><input type="checkbox" id="tg-notify-chain" checked> Chain complete</label>
+              <label class="telegram-toggle-row"><input type="checkbox" id="tg-notify-agent" checked> Agent complete</label>
+              <label class="telegram-toggle-row"><input type="checkbox" id="tg-notify-orchestrator" checked> Orchestrator complete</label>
+              <label class="telegram-toggle-row"><input type="checkbox" id="tg-notify-dag" checked> DAG complete</label>
+              <label class="telegram-toggle-row"><input type="checkbox" id="tg-notify-errors" checked> Errors &amp; failures</label>
+              <label class="telegram-toggle-row"><input type="checkbox" id="tg-notify-permissions" checked> Permission requests (AFK approve/deny)</label>
+              <label class="telegram-toggle-row"><input type="checkbox" id="tg-notify-start" checked> Task start</label>
+            </div>
+          </div>
+          <div class="telegram-actions">
+            <button class="btn btn-secondary" id="telegram-test-btn">Send Test</button>
+            <button class="btn btn-primary" id="telegram-save-btn">Save</button>
+          </div>
+          <div id="telegram-status" class="telegram-status hidden"></div>
+          <details class="telegram-help">
+            <summary>Setup instructions</summary>
+            <ol>
+              <li>Open Telegram and search for <strong>@BotFather</strong></li>
+              <li>Send <code>/newbot</code> and follow the prompts to create a bot</li>
+              <li>Copy the <strong>Bot Token</strong> and paste it above</li>
+              <li>Start a chat with your new bot (send <code>/start</code>)</li>
+              <li>To find your <strong>Chat ID</strong>, send a message to the bot, then visit:<br>
+                <code>https://api.telegram.org/bot&lt;TOKEN&gt;/getUpdates</code><br>
+                Look for <code>"chat":{"id":...</code> in the response</li>
+              <li>For group chats, add the bot to the group and use the group's chat ID (starts with <code>-</code>)</li>
+            </ol>
+          </details>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- MCP Server Management Modal -->
+  <div id="mcp-modal" class="modal-overlay hidden">
+    <div class="modal mcp-modal">
+      <div class="modal-header">
+        <h3>MCP Servers</h3>
+        <button id="mcp-modal-close" class="modal-close">&times;</button>
+      </div>
+      <div id="mcp-server-list" class="mcp-server-list"></div>
+      <div id="mcp-form-container" class="mcp-form-container hidden">
+        <h4 id="mcp-form-title" class="mcp-form-title">Add Server</h4>
+        <form id="mcp-form">
+          <label for="mcp-name">Name</label>
+          <input id="mcp-name" type="text" placeholder="my-server" required>
+          <label for="mcp-type">Type</label>
+          <select id="mcp-type">
+            <option value="stdio">stdio</option>
+            <option value="sse">sse</option>
+            <option value="http">http</option>
+          </select>
+          <div id="mcp-stdio-fields">
+            <label for="mcp-command">Command</label>
+            <input id="mcp-command" type="text" placeholder="npx -y @modelcontextprotocol/server-name">
+            <label for="mcp-args">Args (one per line)</label>
+            <textarea id="mcp-args" rows="2" placeholder="--flag&#10;value"></textarea>
+            <label for="mcp-env">Environment (KEY=VALUE, one per line)</label>
+            <textarea id="mcp-env" rows="2" placeholder="API_KEY=xxx"></textarea>
+          </div>
+          <div id="mcp-url-fields" class="hidden">
+            <label for="mcp-url">URL</label>
+            <input id="mcp-url" type="text" placeholder="https://...">
+          </div>
+          <div class="modal-actions">
+            <button type="button" id="mcp-form-cancel" class="modal-btn-cancel">Cancel</button>
+            <button type="submit" id="mcp-form-save" class="modal-btn-save">Save</button>
+          </div>
+        </form>
+      </div>
+      <div class="mcp-modal-footer">
+        <button id="mcp-add-btn" class="modal-btn-save">+ Add Server</button>
+      </div>
+    </div>
+  </div>
+  <!-- Add Project Modal -->
+  <div id="add-project-modal" class="modal-overlay hidden">
+    <div class="modal add-project-modal">
+      <div class="modal-header">
+        <h3>Add Project</h3>
+        <button id="add-project-close" class="modal-close">&times;</button>
+      </div>
+      <div class="add-project-body">
+        <div id="folder-breadcrumb" class="folder-breadcrumb"></div>
+        <div id="folder-list" class="folder-list"></div>
+        <div class="folder-select-row">
+          <input id="add-project-name" type="text" placeholder="Project name" autocomplete="off">
+          <button id="add-project-confirm" class="modal-btn-save">Add</button>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- Status Bar -->
+  <footer class="status-bar" id="status-bar">
+    <div class="status-bar-left">
+      <span class="sb-item sb-connection" id="sb-connection" title="Connection status">
+        <span class="sb-dot" id="sb-dot"></span>
+        <span id="sb-connection-text">connecting</span>
+      </span>
+      <span class="sb-sep"></span>
+      <span class="sb-item sb-branch" id="sb-branch" title="Current git branch">
+        <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><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 id="sb-branch-name">--</span>
+      </span>
+      <span class="sb-sep"></span>
+      <span class="sb-item sb-project" id="sb-project" title="Current project">
+        <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>
+        <span id="sb-project-name">no project</span>
+      </span>
+    </div>
+    <div class="status-bar-center">
+      <span class="sb-item sb-activity" id="sb-activity"></span>
+    </div>
+    <div class="status-bar-right">
+      <span class="sb-item sb-bg-sessions hidden" id="sb-bg-sessions" title="Background sessions">
+        <span class="sb-bg-dot"></span>
+        <span id="sb-bg-count">0</span> bg
+      </span>
+      <span class="sb-sep sb-bg-sep hidden" id="sb-bg-sep"></span>
+      <span class="sb-item sb-tokens hidden" id="sb-streaming-tokens" title="Streaming tokens">
+        <span id="sb-tokens-value">~0 tokens</span>
+      </span>
+      <span class="sb-sep sb-tokens-sep hidden" id="sb-tokens-sep"></span>
+      <span class="sb-item sb-context-gauge" id="sb-context-gauge-item">
+        <span id="context-gauge" class="context-gauge hidden" title="Session context usage">
+          <span class="context-gauge-bar"><span id="context-gauge-fill" class="context-gauge-fill"></span></span>
+          <span id="context-gauge-label" class="context-gauge-label">0/200k</span>
+        </span>
+      </span>
+      <span class="sb-sep hidden" id="sb-gauge-sep"></span>
+      <span class="sb-item sb-credits" id="sb-credits" title="Credits">
+        <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
+        <div class="sb-credits-popup" id="sb-credits-popup">
+          <div class="sb-credits-header">Credits</div>
+          <div class="sb-credits-body">
+            <div class="sb-credits-row">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
+              <div class="sb-credits-info">
+                <span class="sb-credits-role">Creator & Architect</span>
+                <span class="sb-credits-name">Hamed Farag</span>
+              </div>
+            </div>
+            <div class="sb-credits-divider"></div>
+            <div class="sb-credits-row">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#a78bfa" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2a4 4 0 0 0-4 4c0 2 2 3 2 5h4c0-2 2-3 2-5a4 4 0 0 0-4-4z"/><line x1="10" y1="17" x2="14" y2="17"/><line x1="10" y1="20" x2="14" y2="20"/><line x1="11" y1="23" x2="13" y2="23"/></svg>
+              <div class="sb-credits-info">
+                <span class="sb-credits-role">AI Assistant</span>
+                <span class="sb-credits-name">Claude Code AI</span>
+              </div>
+            </div>
+          </div>
+          <div class="sb-credits-sponsor">
+            <div class="sb-credits-row">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#f59e0b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="7" width="20" height="14" rx="2" ry="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></svg>
+              <div class="sb-credits-info">
+                <span class="sb-credits-role">Sponsor</span>
+                <span class="sb-credits-name">WakeCap</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </span>
+      <span class="sb-sep sb-credits-sep"></span>
+      <span class="sb-item sb-cost sb-cost-hint" id="sb-cost">
+        <span id="sb-session-cost">$0.00</span>
+        <span class="sb-cost-pipe">/</span>
+        <span id="sb-total-cost">$0.00</span>
+        <div class="sb-hint-popup">
+          <div class="sb-hint-header">Session / Total Cost</div>
+          <div class="sb-hint-body">
+            <p>Every message carries a fixed <strong>~20k token</strong> overhead from the Claude Code SDK — this includes the system prompt (~12-15k), core tool schemas (~4-5k), and environment context (~1k).</p>
+            <p>This cost is unavoidable and cannot be reduced. Disabling optional tools in Session settings saves only ~2-3k tokens.</p>
+            <p class="sb-hint-dim">Subsequent turns benefit from Anthropic's prompt caching, which significantly reduces the effective cost.</p>
+          </div>
+        </div>
+      </span>
+    </div>
+  </footer>
+  <!-- Toast Container -->
+  <div id="toast-container" class="toast-container"></div>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
+  <script type="module" src="js/main.js"></script>
+  <script>
+    if ('serviceWorker' in navigator) {
+      navigator.serviceWorker.register('/sw.js');
+    }
+  </script>
+</body>
+</html>