@nastechai/agent 0.16.0 → 0.17.0

package/src/components/ChatSidebar.tsx

@@ -0,0 +1,394 @@
+/**
+ * ChatSidebar — structured-events panel that sits next to the xterm.js
+ * terminal in the dashboard Chat tab.
+ *
+ * Two WebSockets, one per concern:
+ *
+ *   1. **JSON-RPC sidecar** (`GatewayClient` → /api/ws) — drives the
+ *      sidebar's own slot of the dashboard's in-process gateway.  Owns
+ *      the model badge / picker / connection state / error banner.
+ *      Independent of the PTY pane's session by design — those are the
+ *      pieces the sidebar needs to be able to drive directly (model
+ *      switch via slash.exec, etc.).
+ *
+ *   2. **Event subscriber** (/api/events?channel=…) — passive, receives
+ *      every dispatcher emit from the PTY-side `tui_gateway.entry` that
+ *      the dashboard fanned out.  This is how `tool.start/progress/
+ *      complete` from the agent loop reach the sidebar even though the
+ *      PTY child runs three processes deep from us.  The `channel` id
+ *      ties this listener to the same chat tab's PTY child — see
+ *      `ChatPage.tsx` for where the id is generated.
+ *
+ * Best-effort throughout: WS failures show in the badge / banner, the
+ * terminal pane keeps working unimpaired.
+ */
+
+import { Button } from "@nastechai/ui/ui/components/button";
+import { Badge } from "@nastechai/ui/ui/components/badge";
+import { Card } from "@nastechai/ui/ui/components/card";
+
+import { ModelPickerDialog } from "@/components/ModelPickerDialog";
+import { ToolCall, type ToolEntry } from "@/components/ToolCall";
+import { GatewayClient, type ConnectionState } from "@/lib/gatewayClient";
+import { NASTECH_BASE_PATH, buildWsAuthParam } from "@/lib/api";
+
+import { cn } from "@/lib/utils";
+import { AlertCircle, ChevronDown, RefreshCw } from "lucide-react";
+import { useCallback, useEffect, useMemo, useState } from "react";
+
+interface SessionInfo {
+  cwd?: string;
+  model?: string;
+  provider?: string;
+  credential_warning?: string;
+}
+
+interface RpcEnvelope {
+  method?: string;
+  params?: { type?: string; payload?: unknown };
+}
+
+const TOOL_LIMIT = 20;
+
+const STATE_LABEL: Record<ConnectionState, string> = {
+  idle: "idle",
+  connecting: "connecting",
+  open: "live",
+  closed: "closed",
+  error: "error",
+};
+
+const STATE_TONE: Record<
+  ConnectionState,
+  "secondary" | "warning" | "success" | "destructive"
+> = {
+  idle: "secondary",
+  connecting: "warning",
+  open: "success",
+  closed: "secondary",
+  error: "destructive",
+};
+
+interface ChatSidebarProps {
+  channel: string;
+  className?: string;
+}
+
+export function ChatSidebar({ channel, className }: ChatSidebarProps) {
+  // `version` bumps on reconnect; gw is derived so we never call setState
+  // for it inside an effect (React 19's set-state-in-effect rule). The
+  // counter is the dependency on purpose — it's not read in the memo body,
+  // it's the signal that says "rebuild the client".
+  const [version, setVersion] = useState(0);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const gw = useMemo(() => new GatewayClient(), [version]);
+
+  const [state, setState] = useState<ConnectionState>("idle");
+  const [sessionId, setSessionId] = useState<string | null>(null);
+  const [info, setInfo] = useState<SessionInfo>({});
+  const [tools, setTools] = useState<ToolEntry[]>([]);
+  const [modelOpen, setModelOpen] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    const offState = gw.onState(setState);
+
+    const offSessionInfo = gw.on<SessionInfo>("session.info", (ev) => {
+      if (ev.session_id) {
+        setSessionId(ev.session_id);
+      }
+
+      if (ev.payload) {
+        setInfo((prev) => ({ ...prev, ...ev.payload }));
+      }
+    });
+
+    const offError = gw.on<{ message?: string }>("error", (ev) => {
+      const message = ev.payload?.message;
+
+      if (message) {
+        setError(message);
+      }
+    });
+
+    // Adopt whichever session the gateway hands us. session.create on the
+    // sidecar is independent of the PTY pane's session by design — we
+    // only need a sid to drive the model picker's slash.exec calls.
+    gw.connect()
+      .then(() => {
+        if (cancelled) {
+          return;
+        }
+        return gw.request<{ session_id: string }>("session.create", {});
+      })
+      .then((created) => {
+        if (cancelled || !created?.session_id) {
+          return;
+        }
+        setSessionId(created.session_id);
+      })
+      .catch((e: Error) => {
+        if (!cancelled) {
+          setError(e.message);
+        }
+      });
+
+    return () => {
+      cancelled = true;
+      offState();
+      offSessionInfo();
+      offError();
+      gw.close();
+    };
+  }, [gw]);
+
+  // Event subscriber WebSocket — receives the rebroadcast of every
+  // dispatcher emit from the PTY child's gateway.  See /api/pub +
+  // /api/events in nastech_cli/web_server.py for the broadcast hop.
+  //
+  // Failures (auth/loopback rejection, server too old to expose the
+  // endpoint, transient drops) surface in the same banner as the
+  // JSON-RPC sidecar so the sidebar matches its documented best-effort
+  // UX and the user always has a reconnect affordance.
+  useEffect(() => {
+    if (!channel) {
+      return;
+    }
+    // In loopback mode the legacy ?token=<session> path is fine; in gated
+    // mode we have to mint a single-use ticket from the cookie. The IIFE
+    // keeps the outer effect synchronous so its ``return cleanup`` stays
+    // at the top level; the local ``ws`` is hoisted to a closed-over
+    // binding the cleanup reads via ``wsRef``.
+    let unmounting = false;
+    let ws: WebSocket | null = null;
+    void (async () => {
+      const [authName, authValue] = await buildWsAuthParam();
+      if (!authValue || unmounting) {
+        return;
+      }
+      const proto = window.location.protocol === "https:" ? "wss:" : "ws:";
+      const qs = new URLSearchParams({ [authName]: authValue, channel });
+      ws = new WebSocket(
+        `${proto}//${window.location.host}${NASTECH_BASE_PATH}/api/events?${qs.toString()}`,
+      );
+
+      // `unmounting` suppresses the banner during cleanup — `ws.close()`
+      // from the effect's return fires a close event with code 1005 that
+      // would otherwise look like an unexpected drop.
+      const DISCONNECTED = "events feed disconnected — tool calls may not appear";
+      const surface = (msg: string) => !unmounting && setError(msg);
+
+      ws.addEventListener("error", () => surface(DISCONNECTED));
+
+      ws.addEventListener("close", (ev) => {
+        if (ev.code === 4401 || ev.code === 4403) {
+          surface(`events feed rejected (${ev.code}) — reload the page`);
+        } else if (ev.code !== 1000) {
+          surface(DISCONNECTED);
+        }
+      });
+
+      ws.addEventListener("message", (ev) => {
+      let frame: RpcEnvelope;
+
+      try {
+        frame = JSON.parse(ev.data);
+      } catch {
+        return;
+      }
+
+      if (frame.method !== "event" || !frame.params) {
+        return;
+      }
+
+      const { type, payload } = frame.params;
+
+      if (type === "tool.start") {
+        const p = payload as
+          | { tool_id?: string; name?: string; context?: string }
+          | undefined;
+        const toolId = p?.tool_id;
+
+        if (!toolId) {
+          return;
+        }
+
+        setTools((prev) =>
+          [
+            ...prev,
+            {
+              kind: "tool" as const,
+              id: `tool-${toolId}-${prev.length}`,
+              tool_id: toolId,
+              name: p?.name ?? "tool",
+              context: p?.context,
+              status: "running" as const,
+              startedAt: Date.now(),
+            },
+          ].slice(-TOOL_LIMIT),
+        );
+      } else if (type === "tool.progress") {
+        const p = payload as
+          | { name?: string; preview?: string }
+          | undefined;
+
+        if (!p?.name || !p.preview) {
+          return;
+        }
+
+        setTools((prev) =>
+          prev.map((t) =>
+            t.status === "running" && t.name === p.name
+              ? { ...t, preview: p.preview }
+              : t,
+          ),
+        );
+      } else if (type === "tool.complete") {
+        const p = payload as
+          | {
+              tool_id?: string;
+              summary?: string;
+              error?: string;
+              inline_diff?: string;
+            }
+          | undefined;
+
+        if (!p?.tool_id) {
+          return;
+        }
+
+        setTools((prev) =>
+          prev.map((t) =>
+            t.tool_id === p.tool_id
+              ? {
+                  ...t,
+                  status: p.error ? "error" : "done",
+                  summary: p.summary,
+                  error: p.error,
+                  inline_diff: p.inline_diff,
+                  completedAt: Date.now(),
+                }
+              : t,
+          ),
+        );
+      }
+      });
+    })();
+
+    return () => {
+      unmounting = true;
+      ws?.close();
+    };
+  }, [channel, version]);
+
+  const reconnect = useCallback(() => {
+    setError(null);
+    setTools([]);
+    setVersion((v) => v + 1);
+  }, []);
+
+  // Picker hands us a fully-formed slash command (e.g. "/model anthropic/...").
+  // Fire-and-forget through `slash.exec`; the TUI pane will render the result
+  // via PTY, so the sidebar doesn't need to surface output of its own.
+  const onModelSubmit = useCallback(
+    (slashCommand: string) => {
+      if (!sessionId) {
+        return;
+      }
+
+      void gw.request("slash.exec", {
+        session_id: sessionId,
+        command: slashCommand,
+      });
+      setModelOpen(false);
+    },
+    [gw, sessionId],
+  );
+
+  const canPickModel = state === "open" && !!sessionId;
+  const modelLabel = (info.model ?? "—").split("/").slice(-1)[0] ?? "—";
+  const banner = error ?? info.credential_warning ?? null;
+
+  return (
+    <aside
+      className={cn(
+        "flex h-full w-full min-w-0 shrink-0 flex-col gap-3 overflow-y-auto overflow-x-hidden pr-1 lg:w-80",
+        className,
+      )}
+    >
+      <Card className="flex items-center justify-between gap-2 px-3 py-2">
+        <div className="min-w-0">
+          <div className="text-display text-xs tracking-wider text-text-tertiary">
+            model
+          </div>
+
+          <Button
+            ghost
+            size="sm"
+            disabled={!canPickModel}
+            onClick={() => setModelOpen(true)}
+            suffix={
+              canPickModel ? (
+                <ChevronDown className="text-text-secondary" />
+              ) : undefined
+            }
+            className="self-start min-w-0 px-0 py-0 normal-case tracking-normal text-sm font-medium hover:underline disabled:no-underline"
+            title={info.model ?? "switch model"}
+          >
+            <span className="truncate">{modelLabel}</span>
+          </Button>
+        </div>
+
+        <Badge tone={STATE_TONE[state]}>{STATE_LABEL[state]}</Badge>
+      </Card>
+
+      {banner && (
+        <Card className="flex items-start gap-2 border-destructive/40 bg-destructive/5 px-3 py-2 text-xs">
+          <AlertCircle className="mt-0.5 h-3.5 w-3.5 shrink-0 text-destructive" />
+
+          <div className="min-w-0 flex-1">
+            <div className="wrap-break-word text-destructive">{banner}</div>
+
+            {error && (
+              <Button
+                size="sm"
+                outlined
+                className="mt-1"
+                onClick={reconnect}
+                prefix={<RefreshCw />}
+              >
+                reconnect
+              </Button>
+            )}
+          </div>
+        </Card>
+      )}
+
+      <Card className="flex min-h-0 flex-none flex-col px-2 py-2">
+        <div className="text-display px-1 pb-2 text-xs tracking-wider text-text-tertiary">
+          tools
+        </div>
+
+        <div className="flex min-h-0 flex-col gap-1.5">
+          {tools.length === 0 ? (
+            <div className="px-2 py-4 text-center text-xs text-text-secondary">
+              no tool calls yet
+            </div>
+          ) : (
+            tools.map((t) => <ToolCall key={t.id} tool={t} />)
+          )}
+        </div>
+      </Card>
+
+      {modelOpen && canPickModel && sessionId && (
+        <ModelPickerDialog
+          gw={gw}
+          sessionId={sessionId}
+          onClose={() => setModelOpen(false)}
+          onSubmit={onModelSubmit}
+        />
+      )}
+    </aside>
+  );
+}

package/src/components/DeleteConfirmDialog.tsx

@@ -0,0 +1,40 @@
+import { ConfirmDialog } from "@nastechai/ui/ui/components/confirm-dialog";
+import { useI18n } from "@/i18n";
+
+export function DeleteConfirmDialog({
+  cancelLabel,
+  confirmLabel,
+  description,
+  loading,
+  onCancel,
+  onConfirm,
+  open,
+  title,
+}: DeleteConfirmDialogProps) {
+  const { t } = useI18n();
+
+  return (
+    <ConfirmDialog
+      open={open}
+      onCancel={onCancel}
+      onConfirm={onConfirm}
+      title={title}
+      description={description}
+      loading={loading}
+      destructive
+      confirmLabel={confirmLabel ?? t.common.delete}
+      cancelLabel={cancelLabel ?? t.common.cancel}
+    />
+  );
+}
+
+interface DeleteConfirmDialogProps {
+  cancelLabel?: string;
+  confirmLabel?: string;
+  description?: string;
+  loading: boolean;
+  onCancel: () => void;
+  onConfirm: () => void;
+  open: boolean;
+  title: string;
+}

package/src/components/LanguageSwitcher.tsx

@@ -0,0 +1,186 @@
+import { useState, useRef, useEffect } from "react";
+import { createPortal } from "react-dom";
+import { Check } from "lucide-react";
+import { Button } from "@nastechai/ui/ui/components/button";
+import { BottomSheet } from "@nastechai/ui/ui/components/bottom-sheet";
+import { Typography } from "@nastechai/ui/ui/components/typography/index";
+import { useBelowBreakpoint } from "@nastechai/ui/hooks/use-below-breakpoint";
+import { useI18n } from "@/i18n/context";
+import { LOCALE_META } from "@/i18n";
+import type { Locale } from "@/i18n";
+import { cn } from "@/lib/utils";
+
+/**
+ * Language picker — shows the current language's endonym, opens a dropdown
+ * of all supported locales when clicked.  Persists choice to localStorage via
+ * the I18n context.
+ *
+ * Replaces the older two-state EN↔ZH toggle now that we ship 16 locales
+ * (en, zh, zh-hant, ja, de, es, fr, tr, uk, af, ko, it, ga, pt, ru, hu).
+ *
+ * No country flags by design — languages aren't countries, and flag pairings
+ * inevitably create political mismappings (e.g. Mandarin variants ≠ any single
+ * jurisdiction, English ≠ GB, Portuguese ≠ PT). Endonyms are unambiguous.
+ *
+ * When placed at the bottom of the sidebar (next to ThemeSwitcher), pass
+ * `dropUp` so the list opens above the trigger and avoids clipping below the
+ * viewport / overflow ancestors. Below the `sm` breakpoint, `dropUp` uses a
+ * bottom sheet portaled to `document.body` instead of an anchored dropdown.
+ */
+export function LanguageSwitcher({ collapsed = false, dropUp = false }: LanguageSwitcherProps) {
+  const { locale, setLocale, t } = useI18n();
+  const [open, setOpen] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const narrowViewport = useBelowBreakpoint(640);
+  const useMobileSheet = Boolean(dropUp && narrowViewport);
+
+  useEffect(() => {
+    if (!open) return;
+    function onKey(e: KeyboardEvent) {
+      if (e.key === "Escape") setOpen(false);
+    }
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [open]);
+
+  useEffect(() => {
+    if (!open || useMobileSheet) return;
+
+    function onPointerDown(e: PointerEvent) {
+      const target = e.target as Node;
+      if (containerRef.current?.contains(target)) return;
+      if (dropdownRef.current?.contains(target)) return;
+      setOpen(false);
+    }
+
+    document.addEventListener("pointerdown", onPointerDown);
+    return () => document.removeEventListener("pointerdown", onPointerDown);
+  }, [open, useMobileSheet]);
+
+  const current = LOCALE_META[locale];
+  const allLocales = Object.entries(LOCALE_META) as Array<[Locale, typeof current]>;
+  const sheetTitle = t.language.switchTo;
+
+  return (
+    <div ref={containerRef} className="relative inline-flex">
+      <Button
+        ghost
+        onClick={() => setOpen((v) => !v)}
+        title={t.language.switchTo}
+        aria-label={t.language.switchTo}
+        aria-haspopup="listbox"
+        aria-expanded={open}
+        className={cn(
+          "px-2 py-1 normal-case tracking-normal font-normal text-xs text-text-secondary hover:text-foreground",
+          collapsed && "hover:bg-transparent",
+        )}
+      >
+        <span className="inline-flex items-center gap-1.5">
+          <Typography
+            mondwest
+            className="hidden sm:inline text-display tracking-wide text-xs"
+          >
+            {locale === "en" ? "EN" : current.name}
+          </Typography>
+        </span>
+      </Button>
+
+      {useMobileSheet && (
+        <BottomSheet
+          backdropDismissLabel={t.common.close}
+          onClose={() => setOpen(false)}
+          open={open}
+          title={sheetTitle}
+        >
+          <div aria-label={sheetTitle} role="listbox">
+            <LanguageSwitcherOptions
+              allLocales={allLocales}
+              locale={locale}
+              setLocale={setLocale}
+              setOpen={setOpen}
+            />
+          </div>
+        </BottomSheet>
+      )}
+
+      {open && !useMobileSheet && (() => {
+        const rect = containerRef.current?.getBoundingClientRect();
+        const dropdown = (
+          <div
+            ref={dropdownRef}
+            aria-label={sheetTitle}
+            className={cn(
+              "min-w-[10rem] border border-border bg-popover shadow-md py-1 max-h-80 overflow-y-auto",
+              dropUp ? "fixed z-[100]" : "absolute z-50 right-0 top-full mt-1",
+            )}
+            role="listbox"
+            style={
+              dropUp && rect
+                ? { bottom: window.innerHeight - rect.top + 4, left: rect.left }
+                : undefined
+            }
+          >
+            <LanguageSwitcherOptions
+              allLocales={allLocales}
+              locale={locale}
+              setLocale={setLocale}
+              setOpen={setOpen}
+            />
+          </div>
+        );
+        return dropUp ? createPortal(dropdown, document.body) : dropdown;
+      })()}
+    </div>
+  );
+}
+
+function LanguageSwitcherOptions({
+  allLocales,
+  locale,
+  setLocale,
+  setOpen,
+}: LanguageSwitcherOptionsProps) {
+  return (
+    <>
+      {allLocales.map(([code, meta]) => {
+        const selected = code === locale;
+
+        return (
+          <button
+            aria-selected={selected}
+            className={cn(
+              "w-full text-left px-3 py-1.5 flex items-center gap-2 cursor-pointer",
+              "font-mondwest text-display text-xs tracking-[0.08em]",
+              "hover:bg-accent hover:text-accent-foreground transition-colors",
+              selected ? "font-semibold text-foreground" : "text-muted-foreground",
+            )}
+            key={code}
+            onClick={() => {
+              setLocale(code);
+              setOpen(false);
+            }}
+            role="option"
+            type="button"
+          >
+            <span className="truncate">{meta.name}</span>
+
+            {selected && <Check className="ml-auto h-3 w-3 shrink-0 text-midground" />}
+          </button>
+        );
+      })}
+    </>
+  );
+}
+
+interface LanguageSwitcherOptionsProps {
+  allLocales: Array<[Locale, (typeof LOCALE_META)[Locale]]>;
+  locale: Locale;
+  setLocale: (code: Locale) => void;
+  setOpen: (open: boolean) => void;
+}
+
+interface LanguageSwitcherProps {
+  collapsed?: boolean;
+  dropUp?: boolean;
+}