npm - clideck - Versions diffs - 1.22.2 - Mend

clideck 1.22.2

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 (58) hide show

package/LICENSE +21 -0
package/README.md +77 -0
package/activity.js +56 -0
package/agent-presets.json +93 -0
package/assets/clideck-themes.jpg +0 -0
package/bin/clideck.js +2 -0
package/config.js +96 -0
package/handlers.js +297 -0
package/opencode-bridge.js +148 -0
package/opencode-plugin/clideck-bridge.js +24 -0
package/package.json +47 -0
package/paths.js +41 -0
package/plugin-loader.js +285 -0
package/plugins/trim-clip/clideck-plugin.json +13 -0
package/plugins/trim-clip/client.js +31 -0
package/plugins/trim-clip/index.js +10 -0
package/plugins/voice-input/clideck-plugin.json +49 -0
package/plugins/voice-input/client.js +196 -0
package/plugins/voice-input/index.js +342 -0
package/plugins/voice-input/python/mel_filters.npz +0 -0
package/plugins/voice-input/python/whisper_turbo.py +416 -0
package/plugins/voice-input/python/worker.py +135 -0
package/public/fx/bold-beep-idle.mp3 +0 -0
package/public/fx/default-beep.mp3 +0 -0
package/public/fx/echo-beep-idle.mp3 +0 -0
package/public/fx/musical-beep-idle.mp3 +0 -0
package/public/fx/small-bleep-idle.mp3 +0 -0
package/public/fx/soft-beep.mp3 +0 -0
package/public/fx/space-idle.mp3 +0 -0
package/public/img/claude-code.png +0 -0
package/public/img/clideck-logo-icon.png +0 -0
package/public/img/clideck-logo-terminal-panel.png +0 -0
package/public/img/codex.png +0 -0
package/public/img/gemini.png +0 -0
package/public/img/opencode.png +0 -0
package/public/index.html +243 -0
package/public/js/app.js +794 -0
package/public/js/color-mode.js +51 -0
package/public/js/confirm.js +27 -0
package/public/js/creator.js +201 -0
package/public/js/drag.js +134 -0
package/public/js/folder-picker.js +81 -0
package/public/js/hotkeys.js +90 -0
package/public/js/nav.js +56 -0
package/public/js/profiles.js +22 -0
package/public/js/prompts.js +325 -0
package/public/js/settings.js +489 -0
package/public/js/state.js +15 -0
package/public/js/terminals.js +905 -0
package/public/js/toast.js +62 -0
package/public/js/utils.js +27 -0
package/public/tailwind.css +1 -0
package/server.js +126 -0
package/sessions.js +375 -0
package/telemetry-receiver.js +129 -0
package/themes.js +247 -0
package/transcript.js +90 -0
package/utils.js +66 -0

package/public/index.html ADDED Viewed

@@ -0,0 +1,243 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>CliDeck</title>
+  <link rel="icon" type="image/png" href="/img/clideck-logo-icon.png">
+  <link rel="stylesheet" href="/xterm.css">
+  <link rel="stylesheet" href="/tailwind.css">
+  <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=JetBrains+Mono:wght@700&display=swap" rel="stylesheet">
+</head>
+<body class="flex h-screen bg-slate-950 text-slate-200 font-sans overflow-hidden">
+  <!-- Navigation Rail -->
+  <nav id="nav-rail" class="w-12 flex-shrink-0 bg-slate-900 border-r border-slate-700/50 flex flex-col items-center py-3 gap-1">
+    <button class="rail-btn relative w-9 h-9 flex items-center justify-center rounded-lg text-slate-200 bg-slate-800 transition-colors" data-panel="chats" title="Sessions">
+      <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" 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>
+      <span id="rail-unread" class="hidden absolute -top-1 -right-1 min-w-[16px] h-4 px-1 rounded-full text-[10px] font-bold flex items-center justify-center" style="background:var(--color-rail-badge-bg);color:var(--color-rail-badge-text)"></span>
+    </button>
+    <button class="rail-btn w-9 h-9 flex items-center justify-center rounded-lg text-slate-500 hover:text-slate-300 hover:bg-slate-800/50 transition-colors" data-panel="prompts" title="Prompt Library">
+      <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/><path d="M16 13H8"/><path d="M16 17H8"/></svg>
+    </button>
+    <button class="rail-btn w-9 h-9 flex items-center justify-center rounded-lg text-slate-500 hover:text-slate-300 hover:bg-slate-800/50 transition-colors" data-panel="plugins" title="Plugins">
+      <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2v4m0 12v4M2 12h4m12 0h4"/><circle cx="12" cy="12" r="3"/><path d="M12 8V6m0 12v-2M8 12H6m12 0h-2"/></svg>
+    </button>
+    <div class="flex-1"></div>
+    <button class="theme-toggle rail-btn w-9 h-9 flex items-center justify-center rounded-lg text-slate-500 hover:text-slate-300 hover:bg-slate-800/50 transition-colors" id="btn-theme-toggle" title="Toggle light/dark mode">
+      <svg class="icon-sun w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg>
+      <svg class="icon-moon w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" 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>
+    <button class="rail-btn w-9 h-9 flex items-center justify-center rounded-lg text-slate-500 hover:text-slate-300 hover:bg-slate-800/50 transition-colors" id="rail-settings" title="Settings">
+      <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10.3 4.3c.4-1.7 2.9-1.7 3.4 0a1.7 1.7 0 0 0 2.6 1.1c1.5-.9 3.3.8 2.4 2.4a1.7 1.7 0 0 0 1 2.5c1.8.4 1.8 2.9 0 3.4a1.7 1.7 0 0 0-1 2.5c.9 1.6-.9 3.3-2.4 2.4a1.7 1.7 0 0 0-2.6 1c-.4 1.8-2.9 1.8-3.4 0a1.7 1.7 0 0 0-2.5-1.1c-1.6.9-3.3-.8-2.4-2.3a1.7 1.7 0 0 0-1.1-2.6c-1.7-.4-1.7-2.9 0-3.3a1.7 1.7 0 0 0 1.1-2.6c-.9-1.6.8-3.3 2.4-2.4 1 .6 2.3.1 2.5-1"/><circle cx="12" cy="12" r="3"/></svg>
+    </button>
+  </nav>
+  <!-- Sidebar -->
+  <aside id="sidebar" class="w-[354px] min-w-[354px] bg-slate-900 border-r border-slate-700/50 flex flex-col">
+    <!-- Chats panel -->
+    <div id="panel-chats" class="flex flex-col flex-1 min-h-0">
+      <div class="flex items-center justify-between px-3 pt-3 pb-2">
+        <span class="text-sm font-bold text-slate-200 tracking-tight" style="font-family:'JetBrains Mono',monospace">CliDeck</span>
+        <div class="flex items-center gap-1">
+          <span id="save-indicator" class="save-indicator" title="Sessions saved">
+            <svg class="save-tick" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg>
+            <svg class="save-spin" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M12 2a10 10 0 0 1 10 10"/></svg>
+          </span>
+          <button class="icon-btn w-7 h-7 flex items-center justify-center rounded-md border border-slate-600 text-slate-400 hover:bg-slate-700 hover:text-slate-200 transition-colors" id="btn-new-project" title="New project">
+            <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><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"/><path d="M12 11v6M9 14h6"/></svg>
+          </button>
+          <button class="icon-btn w-7 h-7 flex items-center justify-center rounded-md border border-slate-600 text-slate-400 hover:bg-slate-700 hover:text-slate-200 transition-colors text-sm" id="btn-new" title="New session">+</button>
+        </div>
+      </div>
+      <div class="px-2.5 pb-2.5 flex flex-col gap-2">
+        <div class="relative">
+          <svg class="absolute left-2.5 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-500 pointer-events-none" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
+          <input id="search-input" type="text" placeholder="Search" class="w-full pl-9 pr-3 py-[7px] text-[13px] bg-slate-800/50 rounded-full text-slate-300 placeholder-slate-600 outline-none border border-transparent focus:border-slate-600/60 focus:bg-slate-800/80 transition-all">
+        </div>
+        <div class="flex bg-slate-800/30 rounded-lg p-[3px]">
+          <button class="filter-tab flex-1 text-[11px] font-medium py-[5px] rounded-md transition-all bg-slate-700/60 text-slate-200" data-tab="all">All</button>
+          <button class="filter-tab flex-1 text-[11px] font-medium py-[5px] rounded-md transition-all text-slate-500 hover:text-slate-400 flex items-center justify-center gap-1" data-tab="unread">
+            Unread
+            <span id="unread-badge" class="hidden min-w-[16px] h-4 px-1 rounded-full bg-blue-500/15 text-blue-400 text-[10px] font-semibold inline-flex items-center justify-center">0</span>
+          </button>
+        </div>
+      </div>
+      <div id="session-list" class="tmx-scroll flex-1 overflow-y-auto border-t border-slate-700/50"></div>
+    </div>
+    <!-- Prompts panel (rendered by prompts.js) -->
+    <div id="panel-prompts" class="hidden flex-col flex-1 min-h-0"></div>
+    <!-- Plugins panel -->
+    <div id="panel-plugins" class="hidden flex-col flex-1 min-h-0">
+      <div class="px-4 py-3 border-b border-slate-700/50">
+        <span class="text-xs font-semibold uppercase tracking-wider text-slate-500">Plugins</span>
+      </div>
+      <div id="plugins-list" class="flex-1 overflow-y-auto py-2"></div>
+    </div>
+    <!-- Settings panel (category nav in sidebar) -->
+    <div id="panel-settings" class="hidden flex-col flex-1 min-h-0">
+      <div class="px-4 py-3 border-b border-slate-700/50">
+        <span class="text-xs font-semibold uppercase tracking-wider text-slate-500">Settings</span>
+      </div>
+      <div id="settings-nav" class="flex-1 overflow-y-auto pt-1">
+        <button class="settings-cat active-cat flex items-center gap-2.5 w-full text-left px-4 py-2.5 text-sm text-slate-200 bg-slate-800/60 transition-colors" data-cat="general">
+          <svg class="w-4 h-4 flex-shrink-0 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10.3 4.3c.4-1.7 2.9-1.7 3.4 0a1.7 1.7 0 0 0 2.6 1.1c1.5-.9 3.3.8 2.4 2.4a1.7 1.7 0 0 0 1 2.5c1.8.4 1.8 2.9 0 3.4a1.7 1.7 0 0 0-1 2.5c.9 1.6-.9 3.3-2.4 2.4a1.7 1.7 0 0 0-2.6 1c-.4 1.8-2.9 1.8-3.4 0a1.7 1.7 0 0 0-2.5-1.1c-1.6.9-3.3-.8-2.4-2.3a1.7 1.7 0 0 0-1.1-2.6c-1.7-.4-1.7-2.9 0-3.3a1.7 1.7 0 0 0 1.1-2.6c-.9-1.6.8-3.3 2.4-2.4 1 .6 2.3.1 2.5-1"/><circle cx="12" cy="12" r="3"/></svg>
+          General
+        </button>
+        <button class="settings-cat flex items-center gap-2.5 w-full text-left px-4 py-2.5 text-sm text-slate-500 hover:text-slate-300 hover:bg-slate-800/30 transition-colors" data-cat="agents">
+          <svg class="w-4 h-4 flex-shrink-0 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8"/><path d="M12 17v4"/><path d="M7 10l2 2 4-4"/></svg>
+          CLI Agents
+        </button>
+        <button class="settings-cat flex items-center gap-2.5 w-full text-left px-4 py-2.5 text-sm text-slate-500 hover:text-slate-300 hover:bg-slate-800/30 transition-colors" data-cat="notifications">
+          <svg class="w-4 h-4 flex-shrink-0 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" 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>
+          Notifications
+        </button>
+        <button class="settings-cat flex items-center gap-2.5 w-full text-left px-4 py-2.5 text-sm text-slate-500 hover:text-slate-300 hover:bg-slate-800/30 transition-colors" data-cat="appearance">
+          <svg class="w-4 h-4 flex-shrink-0 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 2a7 7 0 0 0 0 20 4 4 0 0 1 0-8 4 4 0 0 0 0-8"/><circle cx="12" cy="9" r="1.5" fill="currentColor"/></svg>
+          Appearance
+        </button>
+      </div>
+    </div>
+  </aside>
+  <!-- Main -->
+  <main id="main" class="flex-1 flex relative">
+    <div id="terminals" class="absolute inset-0" style="pointer-events:none"></div>
+    <div id="plugin-toolbar" class="absolute top-2 right-3 z-10 flex gap-1.5 empty:hidden"></div>
+    <div id="empty" class="absolute inset-0 flex flex-col items-center justify-center select-none">
+      <img src="/img/clideck-logo-terminal-panel.png" alt="CliDeck" class="w-44 opacity-60 mb-5" draggable="false">
+      <p class="text-slate-500 text-[13px] leading-relaxed text-center">Press <kbd class="px-1.5 py-0.5 rounded bg-slate-800 text-slate-300 text-[11px] font-mono">+</kbd> to start a new session<br>or resume a previous one from the sidebar</p>
+    </div>
+    <!-- Settings overlay (content panels only — category nav is in sidebar panel-settings) -->
+    <div id="settings-overlay" class="absolute inset-0 z-[200] bg-slate-950 hidden overflow-y-auto">
+      <!-- General -->
+      <div id="settings-general" class="settings-panel p-6 max-w-xl">
+        <h3 class="text-xs font-semibold uppercase tracking-wider text-slate-500 mb-4">General</h3>
+        <div class="mb-5">
+          <label class="block text-xs text-slate-400 mb-1.5">Default working directory</label>
+          <div class="flex gap-2">
+            <input type="text" id="cfg-default-path" placeholder="/Users/you/projects"
+              class="flex-1 px-3 py-2 text-sm bg-slate-800 border border-slate-600 rounded-md text-slate-200 placeholder-slate-500 outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500/30 transition-colors">
+            <button class="px-3 py-2 text-xs bg-slate-800 border border-slate-600 rounded-md text-slate-300 hover:bg-slate-700 transition-colors" id="btn-browse-path">Browse</button>
+          </div>
+        </div>
+        <h3 class="text-xs font-semibold uppercase tracking-wider text-slate-500 mb-3 mt-8">Behavior</h3>
+        <label class="flex items-center gap-2 text-sm text-slate-300 cursor-pointer">
+          <input type="checkbox" id="cfg-confirm-close" name="cfg-confirm-close" class="accent-blue-500">
+          Confirm before closing a session
+        </label>
+      </div>
+      <!-- CLI Agents -->
+      <div id="settings-agents" class="settings-panel hidden p-6 max-w-2xl">
+        <div class="flex items-center justify-between mb-4">
+          <h3 class="text-xs font-semibold uppercase tracking-wider text-slate-500">CLI Agents</h3>
+          <button class="px-3 py-1.5 text-xs bg-slate-800 border border-slate-600 rounded-md text-slate-300 hover:bg-slate-700 transition-colors" id="btn-add-agent">+ Add agent</button>
+        </div>
+        <div id="agent-list" class="space-y-3"></div>
+      </div>
+      <!-- Notifications -->
+      <div id="settings-notifications" class="settings-panel hidden p-6 max-w-xl">
+        <h3 class="text-xs font-semibold uppercase tracking-wider text-slate-500 mb-4">Notifications</h3>
+        <div class="mb-5">
+          <label class="flex items-center gap-2 text-sm text-slate-300 cursor-pointer">
+            <input type="checkbox" id="cfg-notify-idle" name="cfg-notify-idle" class="accent-blue-500">
+            Notify when an agent finishes working
+            <span id="notify-permission-status" class="hidden text-[11px] ml-auto"></span>
+          </label>
+          <p class="text-xs text-slate-500 mt-1.5 ml-6">Get a browser notification when a session goes from working to idle</p>
+        </div>
+        <div class="mb-5">
+          <label class="flex items-center gap-2 text-sm text-slate-300 cursor-pointer">
+            <input type="checkbox" id="cfg-notify-sound" name="cfg-notify-sound" class="accent-blue-500" checked>
+            Play sound when an agent finishes working
+          </label>
+          <p class="text-xs text-slate-500 mt-1.5 ml-6">Audio beep on working-to-idle transitions</p>
+        </div>
+        <div id="notify-sound-row" class="mb-5 ml-6">
+          <label class="block text-xs text-slate-400 mb-1.5">Notification sound</label>
+          <div class="flex items-center gap-2">
+            <select id="cfg-notify-sound-pick" class="flex-1 px-3 py-1.5 text-sm bg-slate-800 border border-slate-600 rounded-md text-slate-200 outline-none focus:border-blue-500 transition-colors cursor-pointer">
+              <option value="default-beep">Default</option>
+              <option value="soft-beep">Soft</option>
+              <option value="bold-beep-idle">Bold</option>
+              <option value="echo-beep-idle">Echo</option>
+              <option value="musical-beep-idle">Musical</option>
+              <option value="small-bleep-idle">Bleep</option>
+              <option value="space-idle">Space</option>
+            </select>
+            <button id="btn-sound-preview" class="flex-shrink-0 w-8 h-8 flex items-center justify-center rounded-md border border-slate-600 text-slate-400 hover:text-slate-200 hover:bg-slate-700 transition-colors" title="Preview sound">
+              <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/><path d="M15.54 8.46a5 5 0 0 1 0 7.07"/><path d="M19.07 4.93a10 10 0 0 1 0 14.14"/></svg>
+            </button>
+          </div>
+        </div>
+        <div class="mb-5">
+          <label class="block text-xs text-slate-400 mb-1.5 ml-6">Minimum working time before notifying</label>
+          <select id="cfg-notify-min-work" class="ml-6 px-3 py-1.5 text-sm bg-slate-800 border border-slate-600 rounded-md text-slate-200 outline-none focus:border-blue-500 transition-colors cursor-pointer">
+            <option value="5">5 seconds</option>
+            <option value="10" selected>10 seconds</option>
+            <option value="20">20 seconds</option>
+            <option value="30">30 seconds</option>
+            <option value="60">60 seconds</option>
+          </select>
+        </div>
+        <div class="mt-6 px-4 py-3 rounded-lg bg-slate-800/50 border border-slate-700/40">
+          <p class="text-[11px] font-medium text-slate-400 mb-1.5">When do notifications fire?</p>
+          <div class="text-[11px] text-slate-500 leading-relaxed space-y-1">
+            <p><span class="text-slate-400">Sound</span> — plays for background sessions. If you're viewing the session, no sound.</p>
+            <p><span class="text-slate-400">Browser</span> — only when the CliDeck tab is not in focus.</p>
+            <p><span class="text-slate-400">Mute</span> — right-click a session to mute both sound and browser notifications.</p>
+          </div>
+        </div>
+      </div>
+      <!-- Appearance -->
+      <div id="settings-appearance" class="settings-panel hidden p-6 max-w-xl">
+        <h3 class="text-xs font-semibold uppercase tracking-wider text-slate-500 mb-4">Appearance</h3>
+        <div class="mb-5">
+          <label class="block text-xs text-slate-400 mb-1.5">Default terminal theme</label>
+          <input type="hidden" id="cfg-default-theme" name="cfg-default-theme" value="default">
+          <button type="button" id="default-theme-trigger" class="w-full px-3 py-2 text-sm bg-slate-800 border border-slate-600 rounded-md text-slate-200 text-left flex items-center justify-between outline-none hover:border-slate-500 transition-colors cursor-pointer">
+            <span id="default-theme-label" class="theme-label truncate">Default</span>
+            <span class="text-slate-500 text-xs ml-2">&#9662;</span>
+          </button>
+          <div id="default-theme-preview" class="mt-2 rounded-md overflow-hidden text-[11px] font-mono leading-[1.45] whitespace-pre"></div>
+        </div>
+      </div>
+    </div>
+    <!-- Confirmation dialog -->
+    <div id="confirm-close" class="absolute inset-0 z-[250] bg-black/60 backdrop-blur-sm hidden items-center justify-center">
+      <div class="bg-slate-800 border border-slate-600 rounded-xl shadow-2xl shadow-black/50 w-80 flex flex-col">
+        <div id="cc-message" class="px-5 py-4 text-sm">Close this session? The terminal process will be killed.</div>
+        <div class="px-4 py-3 border-t border-slate-700 flex justify-end gap-2">
+          <button id="cc-cancel" class="px-3 py-1.5 text-xs rounded-md border border-slate-600 text-slate-300 hover:bg-slate-700 transition-colors">Cancel</button>
+          <button id="cc-confirm" class="px-3 py-1.5 text-xs rounded-md bg-red-600 text-white hover:bg-red-500 transition-colors">Delete</button>
+        </div>
+      </div>
+    </div>
+    <!-- Folder picker -->
+    <div id="folder-picker" class="absolute inset-0 z-[300] bg-black/60 backdrop-blur-sm hidden items-center justify-center">
+      <div class="bg-slate-800 border border-slate-600 rounded-xl shadow-2xl shadow-black/50 w-[420px] max-h-[460px] flex flex-col">
+        <div class="px-4 py-3 border-b border-slate-700 text-sm font-semibold">Choose Directory</div>
+        <div id="fp-path" class="px-4 py-2 text-xs text-slate-400 border-b border-slate-700 break-all"></div>
+        <div id="fp-listing" class="flex-1 overflow-y-auto py-1 min-h-[200px]"></div>
+        <div class="px-4 py-3 border-t border-slate-700 flex justify-end gap-2">
+          <button id="fp-cancel" class="px-3 py-1.5 text-xs rounded-md border border-slate-600 text-slate-300 hover:bg-slate-700 transition-colors">Cancel</button>
+          <button id="fp-select" class="px-3 py-1.5 text-xs rounded-md bg-blue-600 text-white hover:bg-blue-500 transition-colors disabled:bg-slate-600 disabled:text-slate-400 disabled:cursor-not-allowed">Select</button>
+        </div>
+      </div>
+    </div>
+  </main>
+  <script src="/xterm.js"></script>
+  <script src="/addon-fit.js"></script>
+  <script type="module" src="/js/app.js"></script>
+</body>
+</html>