@porkytheblack/garage-dashboard 0.1.0

package/components/session/agent-roster.tsx

@@ -0,0 +1,121 @@
+"use client";
+
+import * as React from "react";
+import { Bot, Plus } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Badge } from "@/components/ui/badge";
+import { EmptyState, ConfirmButton } from "@/components/shared";
+import type { AgentInfo } from "@/lib/types";
+
+/** Inline composer to enlist a specialist — shared by the collapsed + full views. */
+function AddSpecialist({ onAdd }: { onAdd: (role: string) => void }) {
+  const [role, setRole] = React.useState("");
+  const add = () => {
+    if (!role.trim()) return;
+    onAdd(role.trim());
+    setRole("");
+  };
+  return (
+    <div className="flex items-center gap-2">
+      <Input
+        autoFocus
+        value={role}
+        onChange={(e) => setRole(e.target.value)}
+        onKeyDown={(e) => e.key === "Enter" && add()}
+        placeholder="Add a specialist…"
+        className="h-8 flex-1 text-[12.5px]"
+      />
+      <Button variant="secondary" size="sm" onClick={add} disabled={!role.trim()} className="shrink-0">
+        <Plus /> Add
+      </Button>
+    </div>
+  );
+}
+
+/** Avatar + name + role/turns + active/working badges. */
+function AgentRow({ a, active, onSwitch, onRemove }: { a: AgentInfo; active: boolean; onSwitch: () => void; onRemove: () => void }) {
+  return (
+    <div className={cn("flex items-center gap-2.5 px-3 py-2.5", active && "bg-surface-2/60")}>
+      <span className="grid size-7 shrink-0 place-items-center rounded-full border border-border bg-surface-2 text-faint shadow-sheen">
+        <Bot className="size-3.5" />
+      </span>
+      <div className="min-w-0 flex-1">
+        <div className="flex items-center gap-1.5">
+          <span className="truncate text-[12.5px] font-medium text-foreground">{a.label}</span>
+          {active && <Badge variant="brand">active</Badge>}
+          {a.busy && <Badge variant="warning">working</Badge>}
+        </div>
+        <div className="truncate text-[11.5px] text-faint">
+          {a.role} · {a.turnCount} turn{a.turnCount === 1 ? "" : "s"}
+        </div>
+      </div>
+      {!active && (
+        <div className="flex shrink-0 items-center gap-0.5">
+          <Button variant="ghost" size="sm" onClick={onSwitch}>
+            Make active
+          </Button>
+          <ConfirmButton label="Remove" onConfirm={onRemove} />
+        </div>
+      )}
+    </div>
+  );
+}
+
+/** The multi-agent roster for a session — add specialists, switch, retire.
+ *  A lone default agent collapses to one quiet row + a "+ Add specialist"
+ *  reveal; the full roster emerges with 2+ agents or once the user opts in. */
+export function AgentRoster({
+  agents,
+  activeId,
+  onSwitch,
+  onAdd,
+  onRemove,
+}: {
+  agents: AgentInfo[];
+  activeId: string | null;
+  onSwitch: (id: string) => void;
+  onAdd: (role: string) => void;
+  onRemove: (id: string) => void;
+}) {
+  const [opened, setOpened] = React.useState(false);
+
+  if (agents.length === 0) {
+    return <EmptyState icon={Bot} title="No agents yet" description="A session starts with a single agent; add specialists to delegate work." className="py-8" />;
+  }
+
+  // Lone agent: stay compact until the user reaches for a specialist.
+  if (agents.length === 1 && !opened) {
+    const a = agents[0];
+    return (
+      <div className="flex items-center justify-between gap-3">
+        <div className="flex min-w-0 items-center gap-2">
+          <span className="relative grid size-2 shrink-0 place-items-center">
+            <span className="absolute size-2 rounded-full bg-success opacity-60 animate-pulse-ring" />
+            <span className="relative size-2 rounded-full bg-success" />
+          </span>
+          <span className="truncate text-[12.5px] font-medium text-foreground">{a.label}</span>
+        </div>
+        <button
+          type="button"
+          onClick={() => setOpened(true)}
+          className="shrink-0 text-[11.5px] font-medium text-muted-foreground transition-colors hover:text-foreground"
+        >
+          + Add specialist
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-3">
+      <div className="surface divide-y divide-border/60 overflow-hidden">
+        {agents.map((a) => (
+          <AgentRow key={a.id} a={a} active={a.id === activeId} onSwitch={() => onSwitch(a.id)} onRemove={() => onRemove(a.id)} />
+        ))}
+      </div>
+      <AddSpecialist onAdd={onAdd} />
+    </div>
+  );
+}

package/components/session/files-panel.tsx

@@ -0,0 +1,170 @@
+"use client";
+
+import * as React from "react";
+import { Download, FileUp, Paperclip, Trash2 } from "lucide-react";
+import { toast } from "sonner";
+import { api, API_BASE, getNamespace, getToken } from "@/lib/api";
+import { useQuery } from "@/lib/hooks";
+import { compact, timeAgo } from "@/lib/format";
+import { cn } from "@/lib/utils";
+import { FilesRemote } from "./files-remote";
+import type { FilesRemoteStatus } from "@/lib/types";
+
+interface FileEntry {
+  path: string;
+  size: number;
+  modified_at: string;
+}
+
+interface FileListResponse {
+  files: FileEntry[];
+  remote?: FilesRemoteStatus;
+}
+
+/** Authenticated direct-download URL (bearer rides as a query param). */
+function downloadUrl(sessionId: string, rel: string): string {
+  const u = new URL(`${API_BASE}/sessions/${sessionId}/files/${rel.split("/").map(encodeURIComponent).join("/")}`);
+  const token = getToken();
+  if (token) u.searchParams.set("api_key", token);
+  const ns = getNamespace();
+  if (ns) u.searchParams.set("ns", ns);
+  return u.toString();
+}
+
+/**
+ * The session's file exchange — a per-session `uploads/` folder shared with
+ * the agent. Drop documents in as inputs; download whatever the agent leaves
+ * there as deliverables. Refreshes when a turn completes.
+ */
+export function FilesPanel({ sessionId, refresh }: { sessionId: string; refresh?: boolean }) {
+  const files = useQuery<FileListResponse>(`/sessions/${sessionId}/files`, [refresh]);
+  const [dragging, setDragging] = React.useState(false);
+  const [busy, setBusy] = React.useState(false);
+  const [pulling, setPulling] = React.useState(false);
+  const inputRef = React.useRef<HTMLInputElement>(null);
+
+  // Force a remote rehydrate, then refresh the list with the pulled files.
+  const pull = async () => {
+    setPulling(true);
+    try {
+      await api(`/sessions/${sessionId}/files?pull=1`);
+      files.reload();
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : "Pull failed");
+    } finally {
+      setPulling(false);
+    }
+  };
+
+  const upload = async (list: Iterable<File>) => {
+    const form = new FormData();
+    let n = 0;
+    for (const f of list) {
+      form.append(`file_${n++}`, f, f.name);
+    }
+    if (n === 0) return;
+    setBusy(true);
+    try {
+      const headers: Record<string, string> = {};
+      const token = getToken();
+      if (token) headers.authorization = `Bearer ${token}`;
+      const ns = getNamespace();
+      if (ns) headers["x-glorp-namespace"] = ns;
+      const res = await fetch(`${API_BASE}/sessions/${sessionId}/files`, { method: "POST", headers, body: form });
+      if (!res.ok) throw new Error((await res.json().catch(() => null))?.message ?? `Upload failed (${res.status})`);
+      toast.success(n === 1 ? "File uploaded" : `${n} files uploaded`);
+      files.reload();
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : "Upload failed");
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const remove = async (rel: string) => {
+    try {
+      await api(`/sessions/${sessionId}/files/${rel.split("/").map(encodeURIComponent).join("/")}`, { method: "DELETE" });
+      files.reload();
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : "Delete failed");
+    }
+  };
+
+  const list = files.data?.files ?? [];
+
+  return (
+    <div
+      className={cn("border-t border-border/60 px-4 py-3 transition-colors", dragging && "bg-brand/[0.06]")}
+      onDragOver={(e) => {
+        e.preventDefault();
+        setDragging(true);
+      }}
+      onDragLeave={() => setDragging(false)}
+      onDrop={(e) => {
+        e.preventDefault();
+        setDragging(false);
+        void upload(e.dataTransfer.files);
+      }}
+    >
+      <div className="mb-2 flex items-center justify-between">
+        <span className="text-[11px] font-semibold uppercase tracking-[0.12em] text-faint">Files</span>
+        <button
+          type="button"
+          onClick={() => inputRef.current?.click()}
+          disabled={busy}
+          className="inline-flex items-center gap-1 text-[12px] text-muted-foreground transition-colors hover:text-foreground disabled:opacity-50"
+        >
+          <FileUp className="size-3.5" /> Upload
+        </button>
+        <input
+          ref={inputRef}
+          type="file"
+          multiple
+          className="hidden"
+          onChange={(e) => {
+            if (e.target.files) void upload(e.target.files);
+            e.target.value = "";
+          }}
+        />
+      </div>
+
+      {files.data?.remote && <FilesRemote remote={files.data.remote} pulling={pulling} onPull={() => void pull()} />}
+
+      {list.length === 0 ? (
+        <p className="rounded-md border border-dashed border-border/70 px-3 py-2.5 text-[11.5px] leading-relaxed text-faint">
+          <Paperclip className="mr-1 inline size-3 align-[-2px]" />
+          Drop files here for the agent ("check uploads/…"), and download what it leaves behind.
+        </p>
+      ) : (
+        <div className="space-y-0.5">
+          {list.map((f) => (
+            <div key={f.path} className="group flex items-center gap-2 rounded-md px-1.5 py-1 transition-colors hover:bg-surface-2">
+              <div className="min-w-0 flex-1">
+                <div className="truncate font-mono text-[12px] text-foreground">{f.path}</div>
+                <div className="text-[10.5px] text-faint">
+                  <span className="tnum">{compact(f.size)}B</span> · {timeAgo(f.modified_at)}
+                </div>
+              </div>
+              <a
+                href={downloadUrl(sessionId, f.path)}
+                download
+                className="grid size-6 shrink-0 place-items-center rounded text-faint opacity-0 transition-all hover:text-foreground group-hover:opacity-100"
+                title="Download"
+              >
+                <Download className="size-3.5" />
+              </a>
+              <button
+                type="button"
+                onClick={() => void remove(f.path)}
+                className="grid size-6 shrink-0 place-items-center rounded text-faint opacity-0 transition-all hover:text-destructive group-hover:opacity-100"
+                title="Delete"
+              >
+                <Trash2 className="size-3.5" />
+              </button>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/components/session/files-remote.tsx

@@ -0,0 +1,63 @@
+"use client";
+
+import * as React from "react";
+import { Cloud, CloudOff, DownloadCloud } from "lucide-react";
+import { timeAgo } from "@/lib/format";
+import { cn } from "@/lib/utils";
+import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "@/components/ui/tooltip";
+import type { FilesRemoteStatus } from "@/lib/types";
+
+/**
+ * The quiet remote-mirror status line under the Files header: "R2 · synced 2m
+ * ago", with an error rendered in destructive tone (full text in a tooltip),
+ * and a Pull affordance that rehydrates remote-only files. Kept subtle — it's a
+ * side channel, not the main event.
+ */
+export function FilesRemote({
+  remote,
+  pulling,
+  onPull,
+}: {
+  remote: FilesRemoteStatus;
+  pulling: boolean;
+  onPull: () => void;
+}) {
+  if (!remote.enabled) return null;
+  return (
+    <div className="mb-2 flex items-center justify-between gap-2">
+      <Status remote={remote} />
+      <button
+        type="button"
+        onClick={onPull}
+        disabled={pulling}
+        className="inline-flex items-center gap-1 text-[11.5px] text-muted-foreground transition-colors hover:text-foreground disabled:opacity-50"
+        title="Download remote files missing locally"
+      >
+        <DownloadCloud className={cn("size-3.5", pulling && "animate-pulse")} /> Pull
+      </button>
+    </div>
+  );
+}
+
+function Status({ remote }: { remote: FilesRemoteStatus }) {
+  if (remote.error) {
+    return (
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <span className="inline-flex items-center gap-1 truncate text-[11.5px] text-destructive">
+              <CloudOff className="size-3.5 shrink-0" /> Sync failed
+            </span>
+          </TooltipTrigger>
+          <TooltipContent className="max-w-[280px] break-words">{remote.error}</TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+    );
+  }
+  return (
+    <span className="inline-flex items-center gap-1 text-[11.5px] text-faint">
+      <Cloud className="size-3.5 shrink-0" />
+      {remote.last_sync_at ? <>R2 · synced {timeAgo(remote.last_sync_at)}</> : <>R2 · not synced yet</>}
+    </span>
+  );
+}

package/components/session/inspector.tsx

@@ -0,0 +1,148 @@
+"use client";
+
+import * as React from "react";
+import { FolderGit2 } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { compact, timeAgo, baseName } from "@/lib/format";
+import { CopyButton } from "@/components/shared";
+import { TaskList } from "@/components/chat/task-list";
+import { AgentRoster } from "@/components/session/agent-roster";
+import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from "@/components/ui/select";
+import type { SessionDto, SessionStats, TaskItem, AgentInfo } from "@/lib/types";
+import { FilesPanel } from "./files-panel";
+
+const MODE_LABEL: Record<string, string> = {
+  normal: "Normal — prompt for risky tools",
+  auto: "Auto — auto-approve",
+  bypass: "Bypass — no prompts",
+};
+
+/** A labeled section opened by the eyebrow idiom (11px uppercase tracking-wider).
+ *  `emerge` plays the slide-up entrance for sections that appear with content. */
+function Section({
+  eyebrow,
+  count,
+  emerge,
+  children,
+}: {
+  eyebrow: string;
+  count?: React.ReactNode;
+  emerge?: boolean;
+  children: React.ReactNode;
+}) {
+  return (
+    <section className={cn("border-b border-border/60 px-4 py-4", emerge && "animate-slide-up")}>
+      <div className="mb-3 flex items-center justify-between">
+        <h3 className="text-[11px] font-medium uppercase tracking-wider text-faint">{eyebrow}</h3>
+        {count != null && <span className="tnum text-[11.5px] text-faint">{count}</span>}
+      </div>
+      {children}
+    </section>
+  );
+}
+
+/** A details row: quiet label left, tabular value right. */
+function Row({ label, children }: { label: string; children: React.ReactNode }) {
+  return (
+    <div className="flex items-baseline justify-between gap-3 py-1.5 text-[12.5px]">
+      <span className="shrink-0 text-muted-foreground">{label}</span>
+      <span className="tnum min-w-0 text-right text-foreground">{children}</span>
+    </div>
+  );
+}
+
+/** Thin context-usage meter — surface-2 track, brand fill, warning past ~80%. */
+function ContextMeter({ pct }: { pct: number }) {
+  const v = Math.max(0, Math.min(100, pct));
+  const hot = v > 80;
+  return (
+    <div className="py-1.5">
+      <div className="flex items-baseline justify-between gap-3 text-[12.5px]">
+        <span className="text-muted-foreground">Context</span>
+        <span className={cn("tnum", hot ? "text-warning" : "text-foreground")}>{Math.round(v)}%</span>
+      </div>
+      <div className="mt-1.5 h-0.5 w-full overflow-hidden rounded-full bg-surface-2">
+        <div className={cn("h-full rounded-full transition-all", hot ? "bg-warning" : "bg-brand")} style={{ width: `${v}%` }} />
+      </div>
+    </div>
+  );
+}
+
+export function Inspector({
+  session,
+  stats,
+  tasks,
+  agents,
+  activeAgentId,
+  mode,
+  busyRefresh,
+  onMode,
+  onSwitchAgent,
+  onAddAgent,
+  onRemoveAgent,
+}: {
+  session: SessionDto;
+  stats: SessionStats | null;
+  tasks: TaskItem[];
+  agents: AgentInfo[];
+  activeAgentId: string | null;
+  mode: string;
+  /** Toggles when the agent's busy state flips — the files panel refetches on
+   * it so agent-written deliverables appear as each turn completes. */
+  busyRefresh?: boolean;
+  onMode: (m: string) => void;
+  onSwitchAgent: (id: string) => void;
+  onAddAgent: (role: string) => void;
+  onRemoveAgent: (id: string) => void;
+}) {
+  const done = tasks.filter((t) => t.status === "completed").length;
+
+  return (
+    <div className="h-full overflow-y-auto">
+      {/* Tasks emerge with the first tracked item — never empty scaffolding. */}
+      {tasks.length > 0 && (
+        <Section eyebrow="Tasks" count={`${done}/${tasks.length}`} emerge>
+          <TaskList tasks={tasks} compact />
+        </Section>
+      )}
+
+      {/* Count only once the full roster is in play; a lone agent stays quiet. */}
+      <Section eyebrow="Agents" count={agents.length > 1 ? agents.length : null}>
+        <AgentRoster agents={agents} activeId={activeAgentId} onSwitch={onSwitchAgent} onAdd={onAddAgent} onRemove={onRemoveAgent} />
+      </Section>
+
+      <Section eyebrow="Details">
+        <Row label="Workspace">
+          <span className="inline-flex items-center gap-1 font-mono text-[12px] text-muted-foreground" title={session.workspace}>
+            <FolderGit2 className="size-3 shrink-0" />
+            {baseName(session.workspace)}
+          </span>
+        </Row>
+        <div className="py-1.5">
+          <div className="mb-1.5 text-[12.5px] text-muted-foreground">Permission mode</div>
+          <Select value={mode} onValueChange={onMode}>
+            <SelectTrigger className="h-8 text-[12.5px]">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {Object.entries(MODE_LABEL).map(([v, l]) => (
+                <SelectItem key={v} value={v}>
+                  {l}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+        <Row label="Turns">{stats ? stats.turns : session.turn_count}</Row>
+        <Row label="Tokens">{stats ? `${compact(stats.tokens_in)} in · ${compact(stats.tokens_out)} out` : "—"}</Row>
+        {stats && <ContextMeter pct={stats.contextPct} />}
+        <Row label="Last activity">{timeAgo(session.last_activity)}</Row>
+        <div className="mt-2.5 flex items-center justify-between gap-2 rounded-md border border-border bg-background px-2.5 py-1.5 shadow-sheen">
+          <code className="min-w-0 truncate font-mono text-[11.5px] text-faint">{session.id}</code>
+          <CopyButton value={session.id} />
+        </div>
+      </Section>
+      <FilesPanel sessionId={session.id} refresh={busyRefresh} />
+    </div>
+  );
+}

package/components/session/model-switcher.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import Link from "next/link";
+import { ChevronsUpDown, Cpu, Settings2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+} from "@/components/ui/dropdown-menu";
+import type { ProfileWire } from "@/lib/types";
+
+/** Inline model switcher for the composer — swaps the session's model live
+ * (the web equivalent of the TUI's model picker). */
+export function ModelSwitcher({
+  profiles,
+  current,
+  onSwap,
+}: {
+  profiles: ProfileWire[];
+  current: string | null;
+  onSwap: (profileId: string, label: string) => void;
+}) {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" size="sm" className="h-7 gap-1.5 px-2 text-muted-foreground hover:text-foreground">
+          <Cpu className="size-3.5" />
+          <span className="max-w-[200px] truncate">{current ?? "Default model"}</span>
+          <ChevronsUpDown className="size-3.5 opacity-70" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start" className="min-w-[240px]">
+        <DropdownMenuLabel>Model for this session</DropdownMenuLabel>
+        {profiles.length === 0 && <div className="px-2.5 py-1.5 text-[12.5px] text-muted-foreground">No profiles configured.</div>}
+        {profiles.map((p) => (
+          <DropdownMenuItem key={p.id} onClick={() => onSwap(p.id, p.label)} className="justify-between gap-3">
+            <span className="truncate">{p.label}</span>
+            {p.reasoning_label && p.reasoning_label !== "off" && (
+              <Badge variant="outline" className="shrink-0">
+                {p.reasoning_label}
+              </Badge>
+            )}
+          </DropdownMenuItem>
+        ))}
+        <DropdownMenuSeparator />
+        <DropdownMenuItem asChild>
+          <Link href="/credentials">
+            <Settings2 /> Manage models…
+          </Link>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}