feat: terminal tabs with on-demand connections and Claude Dev host

2026-02-26 02:59:25 +08:00
parent 69ed0f981c
commit 22e9066ffe
2 changed files with 101 additions and 81 deletions
@@ -4,37 +4,55 @@
  const hosts = [
    { id: "nas", label: "NAS" },
    { id: "vps", label: "VPS" },
+    { id: "claude-dev", label: "Claude Dev" },
  ];

-  let mobileHost = $state("nas");
-  let terminals = $state({});
-  let cleanups = [];
+  let tabs = $state([]);
+  let activeTab = $state(null);
+  let showMenu = $state(false);
+  let tabCounter = 0;
+  const tabData = new Map();

-  function initTerminal(el, hostId) {
+  function addTab(hostId) {
+    const id = ++tabCounter;
+    const label = hosts.find((h) => h.id === hostId).label;
+    tabs = [...tabs, { id, hostId, label, connected: false, error: "" }];
+    activeTab = id;
+    showMenu = false;
+  }
+
+  function closeTab(id) {
+    const d = tabData.get(id);
+    if (d) {
+      d.ro?.disconnect();
+      d.ws?.close();
+      d.term?.dispose();
+      tabData.delete(id);
+    }
+    tabs = tabs.filter((t) => t.id !== id);
+    if (activeTab === id) activeTab = tabs.length ? tabs[tabs.length - 1].id : null;
+  }
+
+  function updateTab(tabId, props) {
+    tabs = tabs.map((t) => (t.id === tabId ? { ...t, ...props } : t));
+  }
+
+  function initTerminal(el, tab) {
+    const tabId = tab.id;
    (async () => {
      const { Terminal } = await import("@xterm/xterm");
      const { FitAddon } = await import("@xterm/addon-fit");
      await import("@xterm/xterm/css/xterm.css");
-
      const term = new Terminal({
-        cursorBlink: true,
-        fontSize: 13,
+        cursorBlink: true, fontSize: 13,
        fontFamily: "'JetBrains Mono', 'Fira Code', 'SF Mono', 'Menlo', monospace",
        lineHeight: 1.4,
        theme: {
-          background: "#0f172a",
-          foreground: "#e2e8f0",
-          cursor: "#6366f1",
-          cursorAccent: "#0f172a",
-          selectionBackground: "#334155",
-          black: "#0f172a",
-          red: "#f43f5e",
-          green: "#10b981",
-          yellow: "#f59e0b",
-          blue: "#3b82f6",
-          magenta: "#a855f7",
-          cyan: "#06b6d4",
-          white: "#e2e8f0",
+          background: "#0f172a", foreground: "#e2e8f0", cursor: "#6366f1",
+          cursorAccent: "#0f172a", selectionBackground: "#334155",
+          black: "#0f172a", red: "#f43f5e", green: "#10b981",
+          yellow: "#f59e0b", blue: "#3b82f6", magenta: "#a855f7",
+          cyan: "#06b6d4", white: "#e2e8f0",
        },
      });
      const fit = new FitAddon();
@@ -45,10 +63,9 @@
      const proto = location.protocol === "https:" ? "wss:" : "ws:";
      const token = localStorage.getItem("token") || "";
      const ws = new WebSocket(
-        `${proto}//${location.host}/ws/terminal?token=${encodeURIComponent(token)}&host=${hostId}`
+        `${proto}//${location.host}/ws/terminal?token=${encodeURIComponent(token)}&host=${tab.hostId}`
      );
      ws.binaryType = "arraybuffer";
-
      function sendSize() {
        if (ws.readyState === 1) {
          const buf = new Uint8Array(5);
@@ -59,79 +76,80 @@
        }
      }

-      ws.onopen = () => {
-        terminals[hostId] = { connected: true, error: "" };
-        sendSize();
-      };
+      ws.onopen = () => { updateTab(tabId, { connected: true }); sendSize(); };
      ws.onmessage = (e) => term.write(new Uint8Array(e.data));
      ws.onclose = () => {
-        terminals[hostId] = { ...terminals[hostId], connected: false };
+        updateTab(tabId, { connected: false });
        term.write("\r\n\x1b[90m[Connection closed]\x1b[0m");
      };
-      ws.onerror = () => {
-        terminals[hostId] = { connected: false, error: "WebSocket connection failed" };
-      };
+      ws.onerror = () => updateTab(tabId, { connected: false, error: "Connection failed" });
      term.onData((data) => ws.readyState === 1 && ws.send(new TextEncoder().encode(data)));

-      const ro = new ResizeObserver(() => {
-        fit.fit();
-        sendSize();
-      });
+      const ro = new ResizeObserver(() => { fit.fit(); sendSize(); });
      ro.observe(el);
-
-      cleanups.push(() => {
-        ro.disconnect();
-        ws.close();
-        term.dispose();
-      });
+      tabData.set(tabId, { ws, term, ro, el });
    })();
  }

-  onDestroy(() => cleanups.forEach((fn) => fn()));
-
-  function statusFor(hostId) {
-    const t = terminals[hostId];
-    if (!t) return { connected: false, error: "" };
-    return t;
-  }
+  onDestroy(() => tabData.forEach((d) => { d.ro?.disconnect(); d.ws?.close(); d.term?.dispose(); }));
 </script>
+<div class="space-y-2">
+  <h1 class="text-2xl font-bold text-surface-900 tracking-tight">Terminal</h1>

-<div class="space-y-4">
-  <div class="flex items-center justify-between">
-    <div>
-      <h1 class="text-2xl font-bold text-surface-900 tracking-tight">Terminal</h1>
-      <div class="mt-2 md:hidden">
-        <select
-          class="bg-surface-800 text-surface-200 border border-surface-600 rounded-lg px-3 py-1.5 text-sm"
-          bind:value={mobileHost}
-        >
+  <div class="flex items-center gap-1 border-b border-surface-700 pb-1 relative">
+    {#each tabs as tab (tab.id)}
+      <button
+        class="flex items-center gap-1.5 px-3 py-1.5 text-sm rounded-t-lg transition-colors {activeTab === tab.id ? 'bg-surface-800 text-surface-100' : 'text-surface-400 hover:text-surface-200 hover:bg-surface-800/50'}"
+        onclick={() => activeTab = tab.id}
+      >
+        {#if tab.connected}
+          <span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
+        {:else if tab.error}
+          <span class="w-1.5 h-1.5 rounded-full bg-rose-500"></span>
+        {:else}
+          <span class="w-1.5 h-1.5 rounded-full bg-amber-400 animate-pulse"></span>
+        {/if}
+        {tab.label}
+        <span
+          class="ml-1 text-surface-500 hover:text-rose-400 cursor-pointer"
+          role="button"
+          tabindex="0"
+          onclick={(e) => { e.stopPropagation(); closeTab(tab.id); }}
+          onkeydown={(e) => e.key === 'Enter' && closeTab(tab.id)}
+        >&times;</span>
+      </button>
+    {/each}
+    <div class="relative">
+      <button
+        class="px-2 py-1 text-surface-400 hover:text-surface-100 hover:bg-surface-800 rounded text-lg leading-none"
+        onclick={() => showMenu = !showMenu}
+      >+</button>
+      {#if showMenu}
+        <div class="absolute top-full left-0 mt-1 bg-surface-800 border border-surface-600 rounded-lg shadow-xl z-10 py-1 min-w-[140px]">
          {#each hosts as h}
-            <option value={h.id}>{h.label}</option>
+            <button
+              class="block w-full text-left px-3 py-1.5 text-sm text-surface-200 hover:bg-surface-700"
+              onclick={() => addTab(h.id)}
+            >{h.label}</button>
          {/each}
-        </select>
-      </div>
+        </div>
+      {/if}
    </div>
  </div>

-  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-    {#each hosts as h (h.id)}
-      <div class="hidden md:block" class:!block={mobileHost === h.id}>
-        <div class="flex items-center gap-2 mb-2 text-sm text-surface-400">
-          <span class="font-medium text-surface-200">{h.label}</span>
-          {#if statusFor(h.id).connected}
-            <span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span> Connected
-          {:else if statusFor(h.id).error}
-            <span class="text-rose-500">{statusFor(h.id).error}</span>
-          {:else}
-            <span class="w-1.5 h-1.5 rounded-full bg-amber-400 animate-pulse"></span> Connecting...
-          {/if}
-        </div>
-        <div
-          use:initTerminal={h.id}
-          class="h-[calc(100vh-12rem)] rounded-xl overflow-hidden shadow-lg border border-surface-700"
-          style="background: #0f172a;"
-        ></div>
-      </div>
-    {/each}
-  </div>
+  {#if !tabs.length}
+    <div class="flex items-center justify-center h-[calc(100vh-12rem)] text-surface-500 text-sm">
+      Click + to open a terminal
+    </div>
+  {/if}
+
+  {#each tabs as tab (tab.id)}
+    <div class={activeTab === tab.id ? '' : 'hidden'}>
+      <div
+        use:initTerminal={tab}
+        class="h-[calc(100vh-10rem)] rounded-xl overflow-hidden shadow-lg border border-surface-700"
+        style="background: #0f172a;"
+      ></div>
+    </div>
+  {/each}
 </div>