nas-tools/dashboard/frontend/src/routes/Terminal.svelte

<script>
  import { onDestroy } from "svelte";
  import { VoiceSession } from "../lib/voice.js";

  const hosts = [
    { id: "nas", label: "NAS" },
    { id: "vps", label: "VPS" },
    { id: "claude-dev", label: "Claude Dev" },
  ];

  let tabs = $state([]);
  let activeTab = $state(null);
  let showMenu = $state(false);
  let voiceTick = $state(0);
  let tabCounter = 0;
  const tabData = new Map();

  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.voice?.destroy();
      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,
        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",
        },
      });
      const fit = new FitAddon();
      term.loadAddon(fit);
      term.open(el);
      fit.fit();

      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=${tab.hostId}`
      );
      ws.binaryType = "arraybuffer";
      function sendSize() {
        if (ws.readyState === 1) {
          const buf = new Uint8Array(5);
          buf[0] = 0x01;
          new DataView(buf.buffer).setUint16(1, term.cols);
          new DataView(buf.buffer).setUint16(3, term.rows);
          ws.send(buf);
        }
      }

      ws.onopen = () => { updateTab(tabId, { connected: true }); sendSize(); };
      ws.onmessage = (e) => term.write(new Uint8Array(e.data));
      ws.onclose = () => {
        updateTab(tabId, { connected: false });
        term.write("\r\n\x1b[90m[Connection closed]\x1b[0m");
      };
      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(); });
      ro.observe(el);
      const voice = new VoiceSession(() => { voiceTick++; });
      voice.attach(term, ws);
      tabData.set(tabId, { ws, term, ro, el, voice });
    })();
  }

  function activeVoice() { return voiceTick >= 0 && tabData.get(activeTab)?.voice; }

  onDestroy(() => tabData.forEach((d) => { d.voice?.destroy(); 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="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}
            <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}
        </div>
      {/if}
    </div>
    {#if activeTab && tabs.find(t => t.id === activeTab)?.connected}
      {@const v = activeVoice()}
      {#if v}
        <div class="ml-auto flex items-center gap-1">
          <button
            class="px-2 py-1 rounded text-sm transition-colors {v.ttsEnabled ? (v.speaking ? 'text-indigo-400' : 'text-emerald-400') : 'text-surface-500 hover:text-surface-300'}"
            title={v.ttsEnabled ? 'Disable TTS' : 'Enable TTS'}
            onclick={() => { v.toggleTts(); voiceTick++; }}
          >
            {#if !v.ttsEnabled}
              <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 5L6 9H2v6h4l5 4V5z"/><line x1="23" y1="9" x2="17" y2="15"/><line x1="17" y1="9" x2="23" y2="15"/></svg>
            {:else if v.speaking}
              <svg class="w-4 h-4 animate-pulse" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 5L6 9H2v6h4l5 4V5z"/><path d="M15.54 8.46a5 5 0 010 7.07"/><path d="M19.07 4.93a10 10 0 010 14.14"/></svg>
            {:else}
              <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 5L6 9H2v6h4l5 4V5z"/><path d="M15.54 8.46a5 5 0 010 7.07"/></svg>
            {/if}
          </button>
          <button
            class="px-2 py-1 rounded text-sm transition-colors {v.listening ? 'text-rose-400 animate-pulse' : 'text-surface-500 hover:text-surface-300'}"
            title={v.listening ? 'Stop mic' : 'Start mic'}
            onclick={() => { v.toggleMic(); voiceTick++; }}
          >
            <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 1a3 3 0 00-3 3v8a3 3 0 006 0V4a3 3 0 00-3-3z"/><path d="M19 10v2a7 7 0 01-14 0v-2"/><line x1="12" y1="19" x2="12" y2="23"/><line x1="8" y1="23" x2="16" y2="23"/></svg>
          </button>
          <button
            class="px-1.5 py-0.5 rounded text-xs font-medium transition-colors text-surface-400 hover:text-surface-200 hover:bg-surface-800"
            title="Switch language"
            onclick={() => { v.cycleLang(); voiceTick++; }}
          >{v.langLabel}</button>
        </div>
      {/if}
    {/if}
  </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>