@nastechai/agent 0.16.0 → 0.17.0

package/src/components/ThemeSwitcher.tsx

@@ -0,0 +1,243 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { Palette, Check } from "lucide-react";
+import { Button } from "@nastechai/ui/ui/components/button";
+import { ListItem } from "@nastechai/ui/ui/components/list-item";
+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 { BUILTIN_THEMES, useTheme } from "@/themes";
+import type { DashboardTheme, ThemeListEntry } from "@/themes";
+import { useI18n } from "@/i18n";
+import { cn } from "@/lib/utils";
+
+/**
+ * Compact theme picker mounted next to the language switcher in the header.
+ * Each dropdown row shows a 3-stop swatch (background / midground / warm
+ * glow) so users can preview the palette before committing. User-defined
+ * themes from `~/.nastech/dashboard-themes/*.yaml` use their API-provided
+ * definitions so they show real palette swatches just like built-ins.
+ *
+ * When placed at the bottom of a container (e.g. the sidebar rail), pass
+ * `dropUp` so the menu opens above the trigger instead of clipping below
+ * the viewport. On viewports below the `sm` breakpoint, `dropUp` uses a
+ * bottom sheet portaled to `document.body` so the picker is not clipped by
+ * the sidebar (same idea as a responsive Drawer).
+ */
+export function ThemeSwitcher({ collapsed = false, dropUp = false }: ThemeSwitcherProps) {
+  const { themeName, availableThemes, setTheme } = useTheme();
+  const { t } = useI18n();
+  const [open, setOpen] = useState(false);
+  const wrapperRef = useRef<HTMLDivElement>(null);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const narrowViewport = useBelowBreakpoint(640);
+  const useMobileSheet = Boolean(dropUp && narrowViewport);
+
+  const close = useCallback(() => setOpen(false), []);
+
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") close();
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [open, close]);
+
+  useEffect(() => {
+    if (!open || useMobileSheet) return;
+    const onMouseDown = (e: MouseEvent) => {
+      const target = e.target as Node;
+      if (wrapperRef.current?.contains(target)) return;
+      if (dropdownRef.current?.contains(target)) return;
+      close();
+    };
+    document.addEventListener("mousedown", onMouseDown);
+    return () => document.removeEventListener("mousedown", onMouseDown);
+  }, [open, close, useMobileSheet]);
+
+  const current = availableThemes.find((th) => th.name === themeName);
+  const label = current?.label ?? themeName;
+  const sheetTitle = t.theme?.title ?? "Theme";
+
+  return (
+    <div ref={wrapperRef} className="relative">
+      <Button
+        ghost
+        size={collapsed ? "icon" : undefined}
+        onClick={() => setOpen((o) => !o)}
+        className={cn(
+          collapsed
+            ? "text-text-secondary hover:text-foreground hover:bg-transparent"
+            : "px-2 py-1 normal-case tracking-normal font-normal text-xs text-text-secondary hover:text-foreground",
+        )}
+        title={`${t.theme?.switchTheme ?? "Switch theme"}: ${label}`}
+        aria-label={t.theme?.switchTheme ?? "Switch theme"}
+        aria-expanded={open}
+        aria-haspopup="listbox"
+      >
+        <span className="inline-flex items-center gap-1.5">
+          <Palette className="h-3.5 w-3.5" />
+
+          {!collapsed && (
+            <Typography
+              mondwest
+              className="hidden sm:inline text-display tracking-wide text-xs"
+            >
+              {label}
+            </Typography>
+          )}
+        </span>
+      </Button>
+
+      {useMobileSheet && (
+        <BottomSheet
+          backdropDismissLabel={t.common.close}
+          onClose={close}
+          open={open}
+          title={sheetTitle}
+        >
+          <div aria-label={sheetTitle} role="listbox">
+            <ThemeSwitcherOptions
+              availableThemes={availableThemes}
+              close={close}
+              setTheme={setTheme}
+              themeName={themeName}
+            />
+          </div>
+        </BottomSheet>
+      )}
+
+      {open && !useMobileSheet && (() => {
+        const rect = wrapperRef.current?.getBoundingClientRect();
+        const dropdown = (
+          <div
+            ref={dropdownRef}
+            aria-label={sheetTitle}
+            className={cn(
+              "min-w-[240px] max-h-[70dvh] overflow-y-auto",
+              "border border-current/20 bg-background-base/95 backdrop-blur-sm",
+              "shadow-[0_12px_32px_-8px_rgba(0,0,0,0.6)]",
+              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
+            }
+          >
+            <div className="border-b border-current/20 px-3 py-2">
+              <Typography
+                mondwest
+                className="text-display text-xs tracking-[0.12em] text-text-tertiary"
+              >
+                {sheetTitle}
+              </Typography>
+            </div>
+
+            <ThemeSwitcherOptions
+              availableThemes={availableThemes}
+              close={close}
+              setTheme={setTheme}
+              themeName={themeName}
+            />
+          </div>
+        );
+        return dropUp ? createPortal(dropdown, document.body) : dropdown;
+      })()}
+    </div>
+  );
+}
+
+function ThemeSwitcherOptions({
+  availableThemes,
+  close,
+  setTheme,
+  themeName,
+}: ThemeSwitcherOptionsProps) {
+  return (
+    <>
+      {availableThemes.map((th) => {
+        const isActive = th.name === themeName;
+        const paletteTheme = BUILTIN_THEMES[th.name] ?? th.definition;
+
+        return (
+          <ListItem
+            active={isActive}
+            aria-selected={isActive}
+            className="gap-3"
+            key={th.name}
+            onClick={() => {
+              setTheme(th.name);
+              close();
+            }}
+            role="option"
+          >
+            {paletteTheme ? (
+              <ThemeSwatch theme={paletteTheme} />
+            ) : (
+              <PlaceholderSwatch />
+            )}
+
+            <div className="flex min-w-0 flex-1 flex-col gap-0.5">
+              <Typography
+                mondwest
+                className="truncate text-display text-xs tracking-wide"
+              >
+                {th.label}
+              </Typography>
+              {th.description && (
+                <Typography className="truncate text-xs tracking-normal text-text-tertiary">
+                  {th.description}
+                </Typography>
+              )}
+            </div>
+
+            <Check
+              className={cn(
+                "h-3 w-3 shrink-0 text-midground",
+                isActive ? "opacity-100" : "opacity-0",
+              )}
+            />
+          </ListItem>
+        );
+      })}
+    </>
+  );
+}
+
+function ThemeSwatch({ theme }: { theme: DashboardTheme }) {
+  const { background, midground, warmGlow } = theme.palette;
+  return (
+    <div
+      aria-hidden
+      className="flex h-4 w-9 shrink-0 overflow-hidden border border-current/20"
+    >
+      <span className="flex-1" style={{ background: background.hex }} />
+      <span className="flex-1" style={{ background: midground.hex }} />
+      <span className="flex-1" style={{ background: warmGlow }} />
+    </div>
+  );
+}
+
+function PlaceholderSwatch() {
+  return (
+    <div
+      aria-hidden
+      className="h-4 w-9 shrink-0 border border-dashed border-current/20"
+    />
+  );
+}
+
+interface ThemeSwitcherOptionsProps {
+  availableThemes: ThemeListEntry[];
+  close: () => void;
+  setTheme: (name: string) => void;
+  themeName: string;
+}
+
+interface ThemeSwitcherProps {
+  collapsed?: boolean;
+  dropUp?: boolean;
+}

package/src/components/ToolCall.tsx

@@ -0,0 +1,228 @@
+import { ListItem } from "@nastechai/ui/ui/components/list-item";
+import {
+  AlertCircle,
+  Check,
+  ChevronDown,
+  ChevronRight,
+  Zap,
+} from "lucide-react";
+import { useEffect, useState } from "react";
+
+/**
+ * Expandable tool call row — the web equivalent of Ink's ToolTrail node.
+ *
+ * Renders one `tool.start` + `tool.complete` pair (plus any `tool.progress`
+ * in between) as a single collapsible item in the transcript:
+ *
+ *   ▸ ● read_file(path=/foo)                         2.3s
+ *
+ * Click the header to reveal a preformatted body with context (args), the
+ * streaming preview (while running), and the final summary or error. Error
+ * rows auto-expand so failures aren't silently collapsed.
+ */
+
+export interface ToolEntry {
+  kind: "tool";
+  id: string;
+  tool_id: string;
+  name: string;
+  context?: string;
+  preview?: string;
+  summary?: string;
+  error?: string;
+  inline_diff?: string;
+  status: "running" | "done" | "error";
+  startedAt: number;
+  completedAt?: number;
+}
+
+const STATUS_TONE: Record<ToolEntry["status"], string> = {
+  running: "border-primary/40 bg-primary/[0.04]",
+  done: "border-border bg-muted/20",
+  error: "border-destructive/50 bg-destructive/[0.04]",
+};
+
+const BULLET_TONE: Record<ToolEntry["status"], string> = {
+  running: "text-primary",
+  done: "text-primary/80",
+  error: "text-destructive",
+};
+
+const TICK_MS = 500;
+
+export function ToolCall({ tool }: { tool: ToolEntry }) {
+  // `open` is derived: errors default-expanded, everything else collapsed.
+  // `null` means "follow the default"; any explicit bool is the user's override.
+  // This lets a running tool flip to expanded automatically when it errors,
+  // without mirroring state in an effect.
+  const [userOverride, setUserOverride] = useState<boolean | null>(null);
+  const open = userOverride ?? tool.status === "error";
+
+  // Tick `now` while the tool is running so the elapsed label updates live.
+  const [now, setNow] = useState(() => Date.now());
+  useEffect(() => {
+    if (tool.status !== "running") return;
+    const id = window.setInterval(() => setNow(() => Date.now()), TICK_MS);
+    return () => window.clearInterval(id);
+  }, [tool.status]);
+
+  // Historical tools (hydrated from session.resume) signal missing timestamps
+  // with `startedAt === 0`; we hide the elapsed badge for those rather than
+  // rendering a misleading "0ms".
+  const hasTimestamps = tool.startedAt > 0;
+  const elapsed = hasTimestamps
+    ? fmtElapsed((tool.completedAt ?? now) - tool.startedAt)
+    : null;
+
+  const hasBody = !!(
+    tool.context ||
+    tool.preview ||
+    tool.summary ||
+    tool.error ||
+    tool.inline_diff
+  );
+
+  const Chevron = open ? ChevronDown : ChevronRight;
+
+  return (
+    <div
+      className={`rounded-md border overflow-hidden ${STATUS_TONE[tool.status]}`}
+    >
+      <ListItem
+        onClick={() => setUserOverride(!open)}
+        disabled={!hasBody}
+        aria-expanded={open}
+        className="px-2.5 py-1.5 text-xs hover:bg-foreground/2 disabled:cursor-default"
+      >
+        {hasBody ? (
+          <Chevron className="h-3 w-3 shrink-0 text-muted-foreground" />
+        ) : (
+          <span className="w-3 shrink-0" />
+        )}
+
+        <Zap className={`h-3 w-3 shrink-0 ${BULLET_TONE[tool.status]}`} />
+
+        <span className="font-mono font-medium shrink-0">{tool.name}</span>
+
+        <span className="font-mono text-text-secondary truncate min-w-0 flex-1">
+          {tool.context ?? ""}
+        </span>
+
+        {tool.status === "running" && (
+          <span
+            className="inline-block h-2 w-2 rounded-full bg-primary animate-pulse shrink-0"
+            title="running"
+          />
+        )}
+        {tool.status === "error" && (
+          <AlertCircle
+            className="h-3 w-3 shrink-0 text-destructive"
+            aria-label="error"
+          />
+        )}
+        {tool.status === "done" && (
+          <Check
+            className="h-3 w-3 shrink-0 text-primary/80"
+            aria-label="done"
+          />
+        )}
+
+        {elapsed && (
+          <span className="font-mono text-xs text-text-tertiary tabular-nums shrink-0">
+            {elapsed}
+          </span>
+        )}
+      </ListItem>
+
+      {open && hasBody && (
+        <div className="border-t border-border/60 px-3 py-2 space-y-2 text-xs font-mono">
+          {tool.context && <Section label="context">{tool.context}</Section>}
+
+          {tool.preview && tool.status === "running" && (
+            <Section label="streaming">
+              {tool.preview}
+              <span className="inline-block w-1.5 h-3 align-middle bg-foreground/40 ml-0.5 animate-pulse" />
+            </Section>
+          )}
+
+          {tool.inline_diff && (
+            <Section label="diff">
+              <pre className="whitespace-pre overflow-x-auto text-[0.7rem] leading-snug">
+                {colorizeDiff(tool.inline_diff)}
+              </pre>
+            </Section>
+          )}
+
+          {tool.summary && (
+            <Section label="result">
+              <span className="text-foreground/90 whitespace-pre-wrap">
+                {tool.summary}
+              </span>
+            </Section>
+          )}
+
+          {tool.error && (
+            <Section label="error" tone="error">
+              <span className="text-destructive whitespace-pre-wrap">
+                {tool.error}
+              </span>
+            </Section>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function Section({
+  label,
+  children,
+  tone,
+}: {
+  label: string;
+  children: React.ReactNode;
+  tone?: "error";
+}) {
+  return (
+    <div className="flex gap-3">
+      <span
+        className={`text-display font-mondwest tracking-wider text-xs shrink-0 w-20 pt-0.5 ${
+          tone === "error" ? "text-destructive" : "text-text-tertiary"
+        }`}
+      >
+        {label}
+      </span>
+
+      <div className="flex-1 min-w-0 text-muted-foreground">{children}</div>
+    </div>
+  );
+}
+
+function fmtElapsed(ms: number): string {
+  const sec = Math.max(0, ms) / 1000;
+  if (sec < 1) return `${Math.round(ms)}ms`;
+  if (sec < 10) return `${sec.toFixed(1)}s`;
+  if (sec < 60) return `${Math.round(sec)}s`;
+
+  const m = Math.floor(sec / 60);
+  const s = Math.round(sec % 60);
+  return s ? `${m}m ${s}s` : `${m}m`;
+}
+
+/** Colorize unified-diff lines for the inline diff section. */
+function colorizeDiff(diff: string): React.ReactNode {
+  return diff.split("\n").map((line, i) => (
+    <div key={i} className={diffLineClass(line)}>
+      {line || "\u00A0"}
+    </div>
+  ));
+}
+
+function diffLineClass(line: string): string {
+  if (line.startsWith("+") && !line.startsWith("+++"))
+    return "text-emerald-500 dark:text-emerald-400";
+  if (line.startsWith("-") && !line.startsWith("---"))
+    return "text-destructive";
+  if (line.startsWith("@@")) return "text-primary";
+  return "text-text-secondary";
+}