@mecha.im/cli 0.3.4

package/agent/dashboard/src/views/sessions/session-list.tsx

@@ -0,0 +1,265 @@
+import { useState, useEffect, useRef, useCallback } from "react";
+import { MessageCirclePlus, Copy, Check } from "lucide-react";
+import { botFetch } from "../../lib/api";
+import { timeAgo, modelShort } from "../../lib/format";
+
+function CopyIdButton({ id }: { id: string }) {
+  const [copied, setCopied] = useState(false);
+  return (
+    <button
+      onClick={(e) => {
+        e.stopPropagation();
+        navigator.clipboard.writeText(id).then(() => {
+          setCopied(true);
+          setTimeout(() => setCopied(false), 1500);
+        }).catch(() => {});
+      }}
+      className="inline-flex items-center gap-0.5 text-muted-foreground hover:text-foreground transition-colors"
+      title="Copy session ID"
+    >
+      <span>ID</span>
+      {copied ? <Check className="w-3 h-3 text-success" /> : <Copy className="w-3 h-3" />}
+    </button>
+  );
+}
+
+interface SessionSummary {
+  id: string;
+  title: string;
+  timestamp: string;
+  lastActivity: string;
+  model: string;
+  messageCount: number;
+  costUsd: number;
+  hasPty: boolean;
+}
+
+interface SearchMatch {
+  role: "user" | "assistant";
+  snippet: string;
+  timestamp: string;
+}
+
+interface SearchResult {
+  id: string;
+  title: string;
+  model: string;
+  lastActivity: string;
+  hasPty: boolean;
+  matches: SearchMatch[];
+}
+
+interface Props {
+  selectedId: string | null;
+  onSelect: (id: string, hasPty: boolean) => void;
+  onNewSession: () => void;
+}
+
+export default function SessionList({ selectedId, onSelect, onNewSession }: Props) {
+  const [sessions, setSessions] = useState<SessionSummary[]>([]);
+  const [loadError, setLoadError] = useState<string | null>(null);
+  const [query, setQuery] = useState("");
+  const [searchResults, setSearchResults] = useState<SearchResult[] | null>(null);
+  const [searching, setSearching] = useState(false);
+  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const searchAbortRef = useRef<AbortController | null>(null);
+
+  // Clean up debounce timer on unmount
+  useEffect(() => {
+    return () => {
+      if (debounceRef.current) clearTimeout(debounceRef.current);
+      searchAbortRef.current?.abort();
+    };
+  }, []);
+
+  // Load session list
+  useEffect(() => {
+    let active = true;
+    let timer: ReturnType<typeof setInterval>;
+
+    const load = () => {
+      if (document.hidden) return;
+      botFetch("/api/sessions")
+        .then((r) => r.json())
+        .then((data) => {
+          if (active && Array.isArray(data)) {
+            setSessions(data as SessionSummary[]);
+            setLoadError(null);
+          }
+        })
+        .catch((err) => {
+          if (active) setLoadError(err instanceof Error ? err.message : "Failed to load sessions");
+        });
+    };
+
+    load();
+    timer = setInterval(load, 15_000);
+
+    const onVisibility = () => { if (!document.hidden) load(); };
+    document.addEventListener("visibilitychange", onVisibility);
+
+    return () => {
+      active = false;
+      clearInterval(timer);
+      document.removeEventListener("visibilitychange", onVisibility);
+    };
+  }, []);
+
+  // Debounced search with abort for stale requests
+  const doSearch = useCallback((q: string) => {
+    searchAbortRef.current?.abort();
+    if (!q.trim()) {
+      setSearchResults(null);
+      setSearching(false);
+      return;
+    }
+    setSearching(true);
+    const controller = new AbortController();
+    searchAbortRef.current = controller;
+    botFetch(`/api/sessions/search?q=${encodeURIComponent(q)}`, { signal: controller.signal })
+      .then((r) => r.json())
+      .then((data) => {
+        if (controller.signal.aborted) return;
+        if (Array.isArray(data)) setSearchResults(data as SearchResult[]);
+        setSearching(false);
+      })
+      .catch((err) => {
+        if (err instanceof DOMException && err.name === "AbortError") return;
+        setSearching(false);
+      });
+  }, []);
+
+  const handleQueryChange = (value: string) => {
+    setQuery(value);
+    if (debounceRef.current) clearTimeout(debounceRef.current);
+    debounceRef.current = setTimeout(() => doSearch(value), 300);
+  };
+
+  const clearSearch = () => {
+    setQuery("");
+    setSearchResults(null);
+    setSearching(false);
+  };
+
+  const isSearching = query.trim().length > 0;
+
+  return (
+    <div className="w-72 shrink-0 border-r border-border flex flex-col bg-card h-full overflow-hidden relative">
+      <div className="p-3">
+        {/* Search input */}
+        <div className="relative">
+          <svg
+            className="absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-muted-foreground"
+            fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}
+          >
+            <path strokeLinecap="round" strokeLinejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+          </svg>
+          <input
+            type="text"
+            value={query}
+            onChange={(e) => handleQueryChange(e.target.value)}
+            placeholder="Search sessions..."
+            className="w-full pl-8 pr-7 py-1.5 text-sm bg-background border border-input rounded-md placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring"
+          />
+          {isSearching && (
+            <button
+              onClick={clearSearch}
+              className="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+            >
+              <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          )}
+        </div>
+      </div>
+
+      <div className="flex-1 overflow-y-auto scrollbar-thin">
+        {/* Search results mode */}
+        {isSearching ? (
+          <>
+            {searching && (
+              <p className="text-muted-foreground text-xs p-4 text-center">Searching...</p>
+            )}
+            {!searching && searchResults && searchResults.length === 0 && (
+              <p className="text-muted-foreground text-sm p-4 text-center">No results</p>
+            )}
+            {searchResults?.map((r) => (
+              <button
+                key={r.id}
+                onClick={() => { onSelect(r.id, r.hasPty); clearSearch(); }}
+                className={`w-full text-left px-3 py-3 hover:bg-accent transition-colors ${
+                  selectedId === r.id ? "bg-accent border-l-2 border-l-primary" : ""
+                }`}
+              >
+                <p className="text-sm text-foreground truncate">{r.title}</p>
+                <div className="flex items-center gap-2 mt-0.5 text-xs text-muted-foreground">
+                  <span>{timeAgo(r.lastActivity)}</span>
+                  <span className="opacity-30">·</span>
+                  <span>{modelShort(r.model)}</span>
+                  <span className="opacity-30">·</span>
+                  <span>{r.matches.length} hit{r.matches.length !== 1 ? "s" : ""}</span>
+                </div>
+                {/* First match snippet */}
+                {r.matches[0] && (
+                  <p className="text-xs text-muted-foreground mt-1.5 line-clamp-2 leading-relaxed">
+                    <span className="text-muted-foreground/60">{r.matches[0].role}:</span>{" "}
+                    {r.matches[0].snippet}
+                  </p>
+                )}
+              </button>
+            ))}
+          </>
+        ) : (
+          <>
+            {/* Normal session list */}
+            {loadError && (
+              <p className="text-destructive text-sm p-4 text-center">{loadError}</p>
+            )}
+            {!loadError && sessions.length === 0 && (
+              <p className="text-muted-foreground text-sm p-4 text-center">No sessions yet</p>
+            )}
+            {sessions.map((s) => (
+              <button
+                key={s.id}
+                onClick={() => onSelect(s.id, s.hasPty)}
+                className={`group w-full text-left px-3 py-3 hover:bg-accent transition-colors ${
+                  selectedId === s.id ? "bg-accent border-l-2 border-l-primary" : ""
+                }`}
+              >
+                <div className="flex items-start gap-2">
+                  <span
+                    className={`mt-1.5 w-2 h-2 rounded-full shrink-0 ${
+                      s.hasPty ? "bg-success animate-pulse" : "bg-muted-foreground/30"
+                    }`}
+                  />
+                  <div className="min-w-0 flex-1">
+                    <p className="text-sm text-foreground truncate">{s.title}</p>
+                    <div className="flex items-center gap-2 mt-1 text-xs text-muted-foreground">
+                      <span>{timeAgo(s.lastActivity)}</span>
+                      <span className="opacity-30">·</span>
+                      <span>{s.messageCount} msgs</span>
+                      <span className="opacity-30">·</span>
+                      <span>{modelShort(s.model)}</span>
+                      <span className="opacity-30">·</span>
+                      <CopyIdButton id={s.id} />
+                    </div>
+                  </div>
+                </div>
+              </button>
+            ))}
+          </>
+        )}
+      </div>
+
+      {/* Floating new session button */}
+      <button
+        onClick={onNewSession}
+        className="absolute bottom-4 right-4 p-2 text-muted-foreground hover:text-foreground transition-colors"
+        title="New Session"
+      >
+        <MessageCirclePlus className="w-5 h-5" />
+      </button>
+    </div>
+  );
+}

package/agent/dashboard/src/views/sessions/terminal-pane.tsx

@@ -0,0 +1,270 @@
+import { useEffect, useRef, useState, useCallback } from "react";
+import { botUrl } from "../../lib/api";
+import { parseWsMessage } from "../../lib/ws-parse";
+import "@xterm/xterm/css/xterm.css";
+
+const isMock = import.meta.env.VITE_MOCK === "true" || import.meta.env.VITE_MOCK === true;
+
+const RESIZE_DEBOUNCE_MS = 100;
+
+function getTerminalTheme(): Record<string, string> {
+  const isDark = document.documentElement.classList.contains("dark");
+  if (isDark) {
+    return {
+      background: "#0a0a0f",
+      foreground: "#e0e0e0",
+      cursor: "#e0e0e0",
+      cursorAccent: "#0a0a0f",
+      selectionBackground: "rgba(255,255,255,0.15)",
+      // ANSI colors (dark theme — bright, vibrant on dark bg)
+      black: "#1a1a2e",
+      red: "#f87171",
+      green: "#4ade80",
+      yellow: "#facc15",
+      blue: "#60a5fa",
+      magenta: "#c084fc",
+      cyan: "#22d3ee",
+      white: "#e0e0e0",
+      brightBlack: "#6b7280",
+      brightRed: "#fca5a5",
+      brightGreen: "#86efac",
+      brightYellow: "#fde68a",
+      brightBlue: "#93c5fd",
+      brightMagenta: "#d8b4fe",
+      brightCyan: "#67e8f9",
+      brightWhite: "#ffffff",
+    };
+  }
+  return {
+    background: "#fafafa",
+    foreground: "#1a1a2e",
+    cursor: "#1a1a2e",
+    cursorAccent: "#fafafa",
+    selectionBackground: "rgba(0,0,0,0.12)",
+    // ANSI colors (light theme — darker, high-contrast on light bg)
+    black: "#1a1a2e",
+    red: "#dc2626",
+    green: "#16a34a",
+    yellow: "#ca8a04",
+    blue: "#2563eb",
+    magenta: "#9333ea",
+    cyan: "#0891b2",
+    white: "#e5e7eb",
+    brightBlack: "#6b7280",
+    brightRed: "#b91c1c",
+    brightGreen: "#15803d",
+    brightYellow: "#a16207",
+    brightBlue: "#1d4ed8",
+    brightMagenta: "#7e22ce",
+    brightCyan: "#0e7490",
+    brightWhite: "#f9fafb",
+  };
+}
+
+interface Props {
+  sessionId?: string;
+  className?: string;
+  onSessionId?: (id: string) => void;
+}
+
+export default function TerminalPane({ sessionId, className, onSessionId }: Props) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const wsRef = useRef<WebSocket | null>(null);
+  const termRef = useRef<import("@xterm/xterm").Terminal | null>(null);
+  const fitRef = useRef<import("@xterm/addon-fit").FitAddon | null>(null);
+  const resizeObserverRef = useRef<ResizeObserver | null>(null);
+  const resizeTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const [status, setStatus] = useState<"connecting" | "connected" | "disconnected">("connecting");
+  const [exitCode, setExitCode] = useState<number | null>(null);
+
+  const sendResize = useCallback(() => {
+    const ws = wsRef.current;
+    const term = termRef.current;
+    if (ws?.readyState === WebSocket.OPEN && term) {
+      ws.send(JSON.stringify({ type: "resize", cols: term.cols, rows: term.rows }));
+    }
+  }, []);
+
+  // Sync xterm theme with document dark/light class
+  useEffect(() => {
+    const observer = new MutationObserver(() => {
+      const term = termRef.current;
+      if (term) {
+        term.options.theme = getTerminalTheme();
+      }
+    });
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] });
+    return () => observer.disconnect();
+  }, []);
+
+  useEffect(() => {
+    if (!containerRef.current) return;
+
+    setExitCode(null);
+
+    // In mock mode, no WebSocket server is available
+    if (isMock) {
+      setStatus("disconnected");
+      return;
+    }
+
+    setStatus("connecting");
+
+    let disposed = false;
+    let gotExitMessage = false;
+
+    (async () => {
+      try {
+        const { Terminal: XTerm } = await import("@xterm/xterm");
+        const { FitAddon } = await import("@xterm/addon-fit");
+        const { WebLinksAddon } = await import("@xterm/addon-web-links");
+
+        if (disposed) return;
+
+        const term = new XTerm({
+          cursorBlink: true,
+          scrollback: 10_000,
+          theme: getTerminalTheme(),
+          fontFamily: "ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace",
+          fontSize: 14,
+        });
+
+        const fit = new FitAddon();
+        term.loadAddon(fit);
+        term.loadAddon(new WebLinksAddon());
+
+        term.open(containerRef.current!);
+        fit.fit();
+
+        termRef.current = term;
+        fitRef.current = fit;
+
+        const proto = window.location.protocol === "https:" ? "wss:" : "ws:";
+        const params = new URLSearchParams();
+        if (sessionId) params.set("session", sessionId);
+        params.set("cols", String(term.cols));
+        params.set("rows", String(term.rows));
+        const query = params.toString();
+        const wsPath = botUrl(`/ws/terminal${query ? `?${query}` : ""}`);
+        const wsUrl = `${proto}//${window.location.host}${wsPath}`;
+
+        const ws = new WebSocket(wsUrl);
+        ws.binaryType = "arraybuffer";
+        wsRef.current = ws;
+
+        ws.onopen = () => {
+          if (disposed) return;
+          setStatus("connected");
+          sendResize();
+        };
+
+        ws.onmessage = (event: MessageEvent) => {
+          if (disposed) return;
+          const parsed = parseWsMessage(event.data);
+          switch (parsed.kind) {
+            case "binary":
+              term.write(parsed.data);
+              break;
+            case "text":
+              term.write(parsed.data);
+              break;
+            case "mecha-session":
+              onSessionId?.(parsed.id);
+              break;
+            case "mecha-exit":
+              gotExitMessage = true;
+              setExitCode(parsed.code);
+              setStatus("disconnected");
+              break;
+            case "mecha-error":
+              term.writeln(`\r\n\x1b[31mError: ${parsed.message}\x1b[0m`);
+              break;
+          }
+        };
+
+        ws.onclose = () => {
+          if (disposed) return;
+          setStatus("disconnected");
+          if (!gotExitMessage) {
+            term.writeln("\r\n\x1b[2m[Connection closed]\x1b[0m");
+          }
+        };
+
+        ws.onerror = () => {
+          if (disposed) return;
+          setStatus("disconnected");
+        };
+
+        term.onData((data) => {
+          if (ws.readyState === WebSocket.OPEN) {
+            ws.send(data);
+          }
+        });
+
+        const resizeObserver = new ResizeObserver(() => {
+          if (resizeTimerRef.current) clearTimeout(resizeTimerRef.current);
+          resizeTimerRef.current = setTimeout(() => {
+            if (disposed) return;
+            fit.fit();
+            sendResize();
+          }, RESIZE_DEBOUNCE_MS);
+        });
+        resizeObserver.observe(containerRef.current!);
+        resizeObserverRef.current = resizeObserver;
+      } catch {
+        if (!disposed) setStatus("disconnected");
+      }
+    })();
+
+    return () => {
+      disposed = true;
+      if (resizeTimerRef.current) clearTimeout(resizeTimerRef.current);
+      resizeObserverRef.current?.disconnect();
+      wsRef.current?.close();
+      termRef.current?.dispose();
+    };
+  }, [sessionId, sendResize, onSessionId]);
+
+  // Mock mode: show centered placeholder instead of terminal
+  if (isMock) {
+    return (
+      <div className={`flex flex-col ${className ?? ""}`}>
+        <div className="flex-1 flex items-center justify-center bg-muted/30">
+          <div className="text-center space-y-2">
+            <div className="text-muted-foreground text-sm">Terminal not available in mock mode</div>
+            <div className="text-muted-foreground/60 text-xs">Connect to a live Mecha server to use the terminal</div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={`flex flex-col ${className ?? ""}`}>
+      {/* Status bar */}
+      <div className="flex items-center gap-2 px-3 py-1.5 bg-card border-b border-border text-xs">
+        {status === "connecting" && (
+          <span className="text-warning">Connecting...</span>
+        )}
+        {status === "connected" && (
+          <span className="text-success flex items-center gap-1.5">
+            <span className="w-1.5 h-1.5 rounded-full bg-success animate-pulse" />
+            Terminal connected
+          </span>
+        )}
+        {status === "disconnected" && (
+          <span className={exitCode === 0 ? "text-success" : "text-destructive"}>
+            {exitCode !== null ? `Exited (${exitCode})` : "Disconnected"}
+          </span>
+        )}
+      </div>
+
+      {/* Terminal */}
+      <div
+        ref={containerRef}
+        className="flex-1 min-h-0 overflow-hidden bg-background"
+        style={{ padding: "4px" }}
+      />
+    </div>
+  );
+}

package/agent/dashboard/src/views/sessions.tsx

@@ -0,0 +1,55 @@
+import { useState, useCallback } from "react";
+import SessionList from "./sessions/session-list";
+import SessionDetail from "./sessions/session-detail";
+import TerminalPane from "./sessions/terminal-pane";
+
+interface SelectedSession {
+  id: string;
+  hasPty: boolean;
+}
+
+export default function Sessions() {
+  const [selected, setSelected] = useState<SelectedSession | null>(null);
+  const [newSession, setNewSession] = useState(false);
+
+  const handleNewSessionId = useCallback((id: string) => {
+    setSelected({ id, hasPty: true });
+    setNewSession(false);
+  }, []);
+
+  return (
+    <div className="flex h-full">
+      {/* Left: session list */}
+      <SessionList
+        selectedId={selected?.id ?? null}
+        onSelect={(id, hasPty) => {
+          setSelected({ id, hasPty });
+          setNewSession(false);
+        }}
+        onNewSession={() => {
+          setSelected(null);
+          setNewSession(true);
+        }}
+      />
+
+      {/* Right: detail or new terminal */}
+      <div className="flex-1 min-w-0 min-h-0 flex flex-col">
+        {newSession && (
+          <TerminalPane className="flex-1" onSessionId={handleNewSessionId} />
+        )}
+        {!newSession && selected && (
+          <SessionDetail
+            sessionId={selected.id}
+            hasPty={selected.hasPty}
+            className="flex-1 min-h-0"
+          />
+        )}
+        {!newSession && !selected && (
+          <div className="flex-1 flex items-center justify-center text-muted-foreground">
+            Select a session or start a new one
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}