@porkytheblack/garage-dashboard 0.1.0

package/components/chat/error-card.tsx

@@ -0,0 +1,89 @@
+"use client";
+
+import * as React from "react";
+import Link from "next/link";
+import { ChevronRight, KeyRound, Gauge, WifiOff, ServerCrash, AlertTriangle, ArrowRight, Eye, type LucideIcon } from "lucide-react";
+import { cn } from "@/lib/utils";
+import type { ChatTurn } from "@/lib/types";
+
+type Kind = "config" | "auth" | "modality" | "rate_limit" | "quota" | "network" | "upstream" | "internal";
+
+const KIND: Record<Kind, { icon: LucideIcon; label: string }> = {
+  config: { icon: KeyRound, label: "Setup" },
+  auth: { icon: KeyRound, label: "Authentication" },
+  modality: { icon: Eye, label: "Modality" },
+  rate_limit: { icon: Gauge, label: "Rate limit" },
+  quota: { icon: Gauge, label: "Quota" },
+  network: { icon: WifiOff, label: "Network" },
+  upstream: { icon: ServerCrash, label: "Provider" },
+  internal: { icon: AlertTriangle, label: "Agent" },
+};
+
+function resumesAt(retryAfterSec: number, createdAt: number): string {
+  const t = new Date(createdAt + retryAfterSec * 1000);
+  return t.toLocaleTimeString(undefined, { hour: "2-digit", minute: "2-digit" });
+}
+
+/**
+ * A failed turn, rendered as something a person can act on: human headline,
+ * one-line recovery hint, a direct action, and the raw error tucked into a
+ * collapsed technical view — never a bare stack trace in the conversation.
+ */
+export function ErrorCard({ turn }: { turn: ChatTurn }) {
+  const [showDetail, setShowDetail] = React.useState(false);
+  const meta = (turn.meta ?? {}) as { kind?: Kind; hint?: string; retryAfterSec?: number; detail?: string };
+  const kind: Kind = meta.kind && meta.kind in KIND ? meta.kind : "internal";
+  const { icon: Icon, label } = KIND[kind];
+  const needsKey = kind === "auth" || kind === "config";
+  const needsModel = kind === "quota" || kind === "rate_limit" || kind === "modality";
+
+  return (
+    <div className="mx-auto w-full max-w-xl rounded-lg border border-destructive/25 bg-destructive/[0.06] px-4 py-3 shadow-sheen">
+      <div className="flex items-start gap-3">
+        <span className="mt-0.5 grid size-7 shrink-0 place-items-center rounded-md border border-destructive/25 bg-destructive/10 text-destructive">
+          <Icon className="size-3.5" />
+        </span>
+        <div className="min-w-0 flex-1">
+          <div className="flex items-baseline gap-2">
+            <p className="text-[13.5px] font-semibold text-foreground">{turn.text}</p>
+            <span className="text-[10.5px] font-medium uppercase tracking-wider text-destructive/80">{label}</span>
+          </div>
+          {meta.hint && <p className="mt-1 text-[12.5px] leading-relaxed text-muted-foreground">{meta.hint}</p>}
+          {meta.retryAfterSec != null && (
+            <p className="mt-1 text-[12px] text-faint">Provider window resets around {resumesAt(meta.retryAfterSec, turn.createdAt)}.</p>
+          )}
+
+          <div className="mt-2.5 flex items-center gap-3">
+            {needsKey && (
+              <Link
+                href="/credentials"
+                className="inline-flex items-center gap-1.5 rounded-md border border-border bg-surface-2 px-2.5 py-1 text-[12px] font-medium text-foreground shadow-sheen transition-colors hover:bg-elevated"
+              >
+                Open Models <ArrowRight className="size-3" />
+              </Link>
+            )}
+            {needsModel && (
+              <span className="text-[12px] text-muted-foreground">Switch models from the composer below to keep working.</span>
+            )}
+            {meta.detail && (
+              <button
+                type="button"
+                onClick={() => setShowDetail((s) => !s)}
+                className="inline-flex items-center gap-1 text-[12px] text-faint transition-colors hover:text-muted-foreground"
+              >
+                <ChevronRight className={cn("size-3 transition-transform", showDetail && "rotate-90")} />
+                Technical details
+              </button>
+            )}
+          </div>
+
+          {showDetail && meta.detail && (
+            <pre className="mt-2 max-h-48 overflow-auto whitespace-pre-wrap break-all rounded-md border border-border bg-background p-2.5 font-mono text-[11px] leading-relaxed text-muted-foreground">
+              {meta.detail}
+            </pre>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/components/chat/markdown.tsx

@@ -0,0 +1,12 @@
+import Markdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import { cn } from "@/lib/utils";
+
+/** Theme-aware markdown for assistant messages (styles live in globals.css `.md`). */
+export function Md({ children, className }: { children: string; className?: string }) {
+  return (
+    <div className={cn("md max-w-3xl text-[13.5px] leading-relaxed text-foreground", className)}>
+      <Markdown remarkPlugins={[remarkGfm]}>{children}</Markdown>
+    </div>
+  );
+}

package/components/chat/message.tsx

@@ -0,0 +1,99 @@
+"use client";
+
+import * as React from "react";
+import { ChevronRight } from "lucide-react";
+import { GarageMark } from "@/components/brand";
+import { cn } from "@/lib/utils";
+import { Md } from "./markdown";
+import { ErrorCard } from "./error-card";
+import type { ChatTurn } from "@/lib/types";
+
+/** The Glorp avatar glyph — quiet brand-tinted disc, shared by message + stream. */
+function AgentGlyph() {
+  return (
+    <span className="grid size-7 shrink-0 place-items-center rounded-full border border-brand/30 bg-brand/10 text-brand shadow-sheen">
+      <GarageMark className="size-4" spark={false} />
+    </span>
+  );
+}
+
+function Reasoning({ text }: { text: string }) {
+  const [open, setOpen] = React.useState(false);
+  return (
+    <div className="mb-2">
+      <button
+        type="button"
+        onClick={() => setOpen((o) => !o)}
+        className="inline-flex items-center gap-1 text-[12px] text-faint transition-colors hover:text-muted-foreground"
+      >
+        <ChevronRight className={cn("size-3 transition-transform", open && "rotate-90")} /> Reasoning
+      </button>
+      {open && (
+        <div className="mt-1.5 border-l-2 border-border/60 pl-3 text-[12px] italic leading-relaxed text-faint">{text}</div>
+      )}
+    </div>
+  );
+}
+
+export function Message({ turn, userInitial = "U" }: { turn: ChatTurn; userInitial?: string }) {
+  if (turn.kind === "system") {
+    // Failed turns get the full actionable treatment, never a raw trace.
+    if (turn.error) return <ErrorCard turn={turn} />;
+    return (
+      <div className="flex justify-center py-0.5">
+        <span className="rounded-full border border-border bg-surface-2/60 px-3 py-1 text-[11.5px] text-faint">{turn.text}</span>
+      </div>
+    );
+  }
+
+  const isUser = turn.kind === "user";
+  const imageCount = typeof turn.meta?.imageCount === "number" ? (turn.meta.imageCount as number) : 0;
+
+  // User turns: a quiet inset block, visually distinct but not a loud bubble.
+  if (isUser) {
+    return (
+      <div className="flex flex-col items-end gap-1">
+        <div className="text-[11px] font-medium uppercase tracking-wider text-faint">You</div>
+        <div className="max-w-[85%] rounded-lg rounded-tr-sm border border-border bg-surface-2 px-3.5 py-2.5 shadow-sheen">
+          {turn.text && <p className="max-w-[78ch] whitespace-pre-wrap break-words text-[13.5px] leading-relaxed text-foreground">{turn.text}</p>}
+          {imageCount > 0 && (
+            <p className="mt-1 text-[12px] text-faint">+ {imageCount} image{imageCount === 1 ? "" : "s"}</p>
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  // Agent turns: prose is the content — full-width, comfortable measure.
+  return (
+    <div className="flex gap-3">
+      <div className="pt-0.5">
+        <AgentGlyph />
+      </div>
+      <div className="min-w-0 flex-1">
+        <div className="mb-1 text-[11px] font-medium uppercase tracking-wider text-faint">Glorp</div>
+        {turn.reasoning && <Reasoning text={turn.reasoning} />}
+        {turn.text && <Md className="max-w-[78ch]">{turn.text}</Md>}
+        {imageCount > 0 && (
+          <p className="mt-1 text-[12px] text-faint">+ {imageCount} image{imageCount === 1 ? "" : "s"}</p>
+        )}
+      </div>
+    </div>
+  );
+}
+
+/** The in-progress assistant message (streaming text), with a blinking caret. */
+export function StreamingMessage({ text }: { text: string }) {
+  return (
+    <div className="flex gap-3">
+      <div className="pt-0.5">
+        <AgentGlyph />
+      </div>
+      <div className="min-w-0 flex-1">
+        <div className="mb-1 text-[11px] font-medium uppercase tracking-wider text-faint">Glorp</div>
+        <Md className="max-w-[78ch]">{text}</Md>
+        <span className="ml-0.5 inline-block h-3.5 w-[2px] translate-y-0.5 animate-caret-blink bg-brand align-middle" />
+      </div>
+    </div>
+  );
+}

package/components/chat/permission-prompt.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import { ShieldAlert } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import type { DisplaySlot } from "@/lib/types";
+
+function describe(input: unknown): string {
+  if (input && typeof input === "object") {
+    const o = input as Record<string, unknown>;
+    for (const k of ["title", "tool", "name", "command", "summary", "message"]) {
+      if (typeof o[k] === "string") return o[k] as string;
+    }
+  }
+  return "The agent is requesting permission to run a tool.";
+}
+
+/** Inline approval card for a pending permission request — blocks the agent,
+ *  so it reads urgent (warning-tinted) but composed. */
+export function PermissionPrompt({
+  slot,
+  onResolve,
+}: {
+  slot: DisplaySlot;
+  onResolve: (slotId: string, allow: boolean) => void;
+}) {
+  return (
+    <div className="flex items-start gap-3 rounded-lg border border-warning/30 bg-warning/10 px-4 py-3 shadow-sheen">
+      <span className="mt-0.5 grid size-6 shrink-0 place-items-center rounded-md border border-warning/30 bg-warning/10 text-warning">
+        <ShieldAlert className="size-3.5" />
+      </span>
+      <div className="min-w-0 flex-1">
+        <p className="text-[12.5px] font-semibold text-foreground">Permission requested</p>
+        <p className="mt-0.5 truncate font-mono text-[12px] text-muted-foreground">{describe(slot.input)}</p>
+      </div>
+      <div className="flex shrink-0 items-center gap-2">
+        <Button size="sm" variant="ghost" onClick={() => onResolve(slot.slotId, false)}>
+          Deny
+        </Button>
+        <Button size="sm" onClick={() => onResolve(slot.slotId, true)}>
+          Allow
+        </Button>
+      </div>
+    </div>
+  );
+}

package/components/chat/slash-menu.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import { SlashSquare } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+export interface SlashCommand {
+  name: string; // "/compact"
+  description: string;
+}
+
+/** Autocomplete popover for "/" commands, anchored above the composer.
+ *  Pure presentation — the composer owns filtering and keyboard state. */
+export function SlashMenu({
+  commands,
+  activeIndex,
+  onPick,
+}: {
+  commands: SlashCommand[];
+  activeIndex: number;
+  onPick: (cmd: SlashCommand) => void;
+}) {
+  if (commands.length === 0) return null;
+  return (
+    <div className="absolute bottom-full left-0 z-30 mb-2 w-full max-w-sm animate-pop-in rounded-lg border border-border bg-popover p-1 shadow-elevated">
+      <div className="px-2 pb-1 pt-1.5 text-[10.5px] font-semibold uppercase tracking-[0.12em] text-faint">Commands</div>
+      <div className="max-h-56 overflow-y-auto">
+        {commands.map((cmd, i) => (
+          <button
+            key={cmd.name}
+            type="button"
+            // preventDefault so the textarea keeps focus through the click
+            onMouseDown={(e) => {
+              e.preventDefault();
+              onPick(cmd);
+            }}
+            className={cn(
+              "flex w-full items-center gap-2.5 rounded-md px-2 py-1.5 text-left transition-colors",
+              i === activeIndex ? "bg-surface-2 text-foreground" : "text-muted-foreground hover:bg-surface-2/60",
+            )}
+          >
+            <SlashSquare className={cn("size-3.5 shrink-0", i === activeIndex ? "text-brand" : "text-faint")} />
+            <span className="font-mono text-[12.5px] text-foreground">{cmd.name}</span>
+            <span className="min-w-0 flex-1 truncate text-[12px] text-faint">{cmd.description}</span>
+          </button>
+        ))}
+      </div>
+      <div className="border-t border-border/60 px-2 py-1 text-[10.5px] text-faint">
+        <kbd className="rounded border border-border bg-surface-2 px-1 font-mono text-[9px]">↑↓</kbd> navigate ·{" "}
+        <kbd className="rounded border border-border bg-surface-2 px-1 font-mono text-[9px]">⇥</kbd> complete ·{" "}
+        <kbd className="rounded border border-border bg-surface-2 px-1 font-mono text-[9px]">esc</kbd> dismiss
+      </div>
+    </div>
+  );
+}

package/components/chat/task-list.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import { Check, Circle } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { EmptyState } from "@/components/shared";
+import { ListChecks } from "lucide-react";
+import type { TaskItem } from "@/lib/types";
+
+/** Status glyph: pending faint circle, in_progress brand pulse, completed check. */
+function Glyph({ status }: { status: TaskItem["status"] }) {
+  if (status === "completed") return <Check className="size-3.5 text-success" />;
+  if (status === "in_progress")
+    return (
+      <span className="relative grid size-3.5 place-items-center">
+        <span className="absolute size-2 rounded-full bg-brand opacity-60 animate-pulse-ring" />
+        <span className="relative size-2 rounded-full bg-brand" />
+      </span>
+    );
+  return <Circle className="size-3.5 text-faint" />;
+}
+
+function TaskRow({ task }: { task: TaskItem }) {
+  const done = task.status === "completed";
+  const active = task.status === "in_progress";
+  return (
+    <li className="flex items-start gap-2.5 py-1.5">
+      <span className="mt-px shrink-0">
+        <Glyph status={task.status} />
+      </span>
+      <span
+        className={cn(
+          "text-[12.5px] leading-snug",
+          done ? "text-faint line-through" : active ? "font-medium text-foreground" : "text-muted-foreground",
+        )}
+      >
+        {task.content}
+      </span>
+    </li>
+  );
+}
+
+/** Renders the agent's task checklist. `compact` drops the empty state entirely
+ *  so the host (the inspector) can let the Tasks section emerge with content. */
+export function TaskList({ tasks, compact = false }: { tasks: TaskItem[]; compact?: boolean }) {
+  if (tasks.length === 0) {
+    if (compact) return null;
+    return <EmptyState icon={ListChecks} title="No tasks yet" description="When the agent plans its work, the checklist appears here." />;
+  }
+  return (
+    <ul className="divide-y divide-border/60">
+      {tasks.map((t) => (
+        <TaskRow key={t.id} task={t} />
+      ))}
+    </ul>
+  );
+}

package/components/chat/tool-call.tsx

@@ -0,0 +1,91 @@
+"use client";
+
+import * as React from "react";
+import { ChevronRight, FileText, Hammer, Pencil, Search, Terminal } from "lucide-react";
+import { cn } from "@/lib/utils";
+import type { ToolEvent } from "@/lib/types";
+
+function iconFor(name: string) {
+  const n = name.toLowerCase();
+  if (/bash|shell|exec|terminal|run/.test(n)) return Terminal;
+  if (/edit|write|str_replace|create|patch/.test(n)) return Pencil;
+  if (/read|cat|open|file|view/.test(n)) return FileText;
+  if (/grep|search|find|glob|ls/.test(n)) return Search;
+  return Hammer;
+}
+
+/** A short, human summary of the tool's input for the collapsed header. */
+function summarize(input: unknown): string {
+  if (input == null) return "";
+  if (typeof input === "string") return input;
+  if (typeof input === "object") {
+    const o = input as Record<string, unknown>;
+    for (const k of ["command", "cmd", "file_path", "path", "pattern", "query", "url", "name", "title"]) {
+      if (typeof o[k] === "string") return o[k] as string;
+    }
+    try {
+      return JSON.stringify(o);
+    } catch {
+      return "";
+    }
+  }
+  return String(input);
+}
+
+// Status reads as a single semantic dot — quiet machinery, not a loud icon.
+const STATUS: Record<ToolEvent["status"], { dot: string; pulse?: boolean }> = {
+  running: { dot: "bg-warning", pulse: true },
+  success: { dot: "bg-success" },
+  error: { dot: "bg-destructive" },
+  aborted: { dot: "bg-faint" },
+};
+
+function StatusDot({ status }: { status: ToolEvent["status"] }) {
+  const s = STATUS[status];
+  return (
+    <span className="relative grid size-2 place-items-center">
+      {s.pulse && <span className={cn("absolute size-2 rounded-full opacity-60 animate-pulse-ring", s.dot)} />}
+      <span className={cn("relative size-2 rounded-full", s.dot)} />
+    </span>
+  );
+}
+
+export function ToolCall({ tool }: { tool: ToolEvent }) {
+  const [open, setOpen] = React.useState(false);
+  const Icon = iconFor(tool.name);
+  const summary = summarize(tool.input);
+  const hasDetail = Boolean(summary) || Boolean(tool.output);
+  const hasInputObj = typeof tool.input === "object" && tool.input !== null;
+
+  return (
+    <div className="ml-10 overflow-hidden rounded-md border border-border bg-surface-2/40">
+      <button
+        type="button"
+        onClick={() => hasDetail && setOpen((o) => !o)}
+        className={cn("flex w-full items-center gap-2 px-2.5 py-1.5 text-left", hasDetail && "transition-colors hover:bg-surface-2")}
+      >
+        <ChevronRight className={cn("size-3 shrink-0 text-faint transition-transform", open && "rotate-90", !hasDetail && "opacity-0")} />
+        <Icon className="size-3 shrink-0 text-faint" />
+        <span className="shrink-0 font-mono text-[12px] font-medium text-muted-foreground">{tool.name}</span>
+        {summary && <span className="min-w-0 flex-1 truncate font-mono text-[12px] text-faint">{summary}</span>}
+        <span className="ml-auto shrink-0 pl-1.5">
+          <StatusDot status={tool.status} />
+        </span>
+      </button>
+      {open && (
+        <div className="space-y-2 border-t border-border/60 px-2.5 py-2.5">
+          {hasInputObj && (
+            <pre className="overflow-x-auto rounded-md border border-border bg-background p-2.5 font-mono text-[11.5px] leading-relaxed text-faint">
+              {JSON.stringify(tool.input, null, 2)}
+            </pre>
+          )}
+          {tool.output && (
+            <pre className="max-h-72 overflow-auto whitespace-pre-wrap break-words rounded-md border border-border bg-background p-2.5 font-mono text-[11.5px] leading-relaxed text-muted-foreground">
+              {tool.output}
+            </pre>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

package/components/fleet/lanes.tsx

@@ -0,0 +1,107 @@
+"use client";
+
+import Link from "next/link";
+import { ChevronRight, FolderGit2, MessageSquare } from "lucide-react";
+import { baseName, timeAgo, compact } from "@/lib/format";
+import { SessionStatus, EmptyState } from "@/components/shared";
+import { SectionHeading } from "@/components/primitives";
+import { cn } from "@/lib/utils";
+import type { SessionDto } from "@/lib/types";
+
+const LANE_CAP = 6;
+const RANK: Record<string, number> = { busy: 0, provisioning: 1, error: 2, idle: 3, destroyed: 4 };
+
+function rank(s: SessionDto): number {
+  return RANK[s.state] ?? 3;
+}
+
+/** A single agent session, dense but legible — the unit of the fleet. */
+function SessionRow({ s }: { s: SessionDto }) {
+  const tokens = (s.tokens_in ?? 0) + (s.tokens_out ?? 0);
+  return (
+    <Link
+      href={`/sessions/${s.id}`}
+      className="group flex items-center gap-3 px-3.5 py-2.5 transition-colors hover:bg-surface-2"
+    >
+      <SessionStatus state={s.state} className="w-[104px] shrink-0" />
+      <div className="min-w-0 flex-1">
+        <div className="truncate text-[13.5px] text-foreground">{s.title ?? "Untitled session"}</div>
+        <div className="truncate text-[11.5px] text-faint">{s.model_label ?? "Default model"}</div>
+      </div>
+      <span className="tnum hidden w-16 shrink-0 text-right text-[12px] text-muted-foreground sm:block">{compact(tokens)} tok</span>
+      <span className="tnum hidden w-12 shrink-0 text-right text-[12px] text-faint md:block">{s.turn_count} {s.turn_count === 1 ? "turn" : "turns"}</span>
+      <span className="tnum w-12 shrink-0 text-right text-[12px] text-faint">{timeAgo(s.last_activity)}</span>
+      <ChevronRight className="size-4 shrink-0 text-faint/60 transition-transform group-hover:translate-x-0.5 group-hover:text-muted-foreground" />
+    </Link>
+  );
+}
+
+/** One workspace's sessions, headed by the workspace name + a live count. */
+function WorkspaceLane({ name, sessions }: { name: string; sessions: SessionDto[] }) {
+  const running = sessions.filter((s) => s.state === "busy" || s.state === "provisioning").length;
+  const shown = sessions.slice(0, LANE_CAP);
+  const overflow = sessions.length - shown.length;
+  return (
+    <div className="surface overflow-hidden">
+      <div className="flex items-center gap-2 border-b border-border/70 bg-surface-2/40 px-3.5 py-2">
+        <FolderGit2 className="size-3.5 text-faint" />
+        <span className="text-[12.5px] font-medium text-foreground">{name}</span>
+        {running > 0 && (
+          <span className="inline-flex items-center gap-1.5 text-[11px] font-medium text-success">
+            <span className="size-1.5 rounded-full bg-success" />
+            {running} running
+          </span>
+        )}
+        <span className="ml-auto text-[11.5px] text-faint">{sessions.length} {sessions.length === 1 ? "session" : "sessions"}</span>
+      </div>
+      <div className="divide-y divide-border/60">
+        {shown.map((s) => (
+          <SessionRow key={s.id} s={s} />
+        ))}
+      </div>
+      {overflow > 0 && (
+        <Link href="/sessions" className="block border-t border-border/60 px-3.5 py-2 text-[12px] text-muted-foreground transition-colors hover:bg-surface-2 hover:text-foreground">
+          +{overflow} more in {name} →
+        </Link>
+      )}
+    </div>
+  );
+}
+
+/** The fleet: active + idle sessions, grouped by workspace, busiest lane first. */
+export function ActiveSessions({ sessions, className }: { sessions: SessionDto[]; className?: string }) {
+  const live = sessions.filter((s) => s.state !== "destroyed");
+  const lanes = new Map<string, SessionDto[]>();
+  for (const s of live) {
+    const key = baseName(s.workspace);
+    (lanes.get(key) ?? lanes.set(key, []).get(key)!).push(s);
+  }
+  const ordered = [...lanes.entries()]
+    .map(([name, list]) => ({ name, list: [...list].sort((a, b) => rank(a) - rank(b) || b.last_activity.localeCompare(a.last_activity)) }))
+    .sort((a, b) => rank(a.list[0]) - rank(b.list[0]) || b.list[0].last_activity.localeCompare(a.list[0].last_activity));
+
+  return (
+    <section className={cn("animate-slide-up", className)}>
+      <SectionHeading
+        eyebrow="Fleet"
+        title="Active sessions"
+        action={
+          <Link href="/sessions" className="inline-flex items-center gap-1 text-[12.5px] text-muted-foreground transition-colors hover:text-foreground">
+            All sessions <ChevronRight className="size-3.5" />
+          </Link>
+        }
+      />
+      {ordered.length === 0 ? (
+        <div className="surface">
+          <EmptyState icon={MessageSquare} title="No sessions running" description="Launch a task above and it will appear here, grouped by the workspace it runs in." />
+        </div>
+      ) : (
+        <div className="grid gap-3 lg:grid-cols-2">
+          {ordered.map((lane) => (
+            <WorkspaceLane key={lane.name} name={lane.name} sessions={lane.list} />
+          ))}
+        </div>
+      )}
+    </section>
+  );
+}

package/components/fleet/launch.tsx

@@ -0,0 +1,99 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { Cpu, FolderGit2, SendHorizontal } from "lucide-react";
+import { toast } from "sonner";
+import { launchSession } from "@/lib/launch";
+import { Spinner } from "@/components/shared";
+import { Button } from "@/components/ui/button";
+import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from "@/components/ui/select";
+import type { WorkspaceDto, ProfileDto } from "@/lib/types";
+
+const DEFAULT_WS = "__default__";
+const DEFAULT_MODEL = "__default__";
+
+/** The hero: describe a task, pick where it runs, launch an agent. */
+export function LaunchComposer({ workspaces, profiles, initialPrompt = "", defaultModelLabel }: { workspaces: WorkspaceDto[]; profiles: ProfileDto[]; initialPrompt?: string; defaultModelLabel?: string | null }) {
+  const router = useRouter();
+  const [prompt, setPrompt] = useState(initialPrompt);
+  const [ws, setWs] = useState(DEFAULT_WS);
+  const [profile, setProfile] = useState(DEFAULT_MODEL);
+  const [busy, setBusy] = useState(false);
+
+  const launch = async () => {
+    if (!prompt.trim() || busy) return;
+    setBusy(true);
+    try {
+      const id = await launchSession({
+        prompt,
+        workspaceId: ws === DEFAULT_WS ? undefined : ws,
+        profileId: profile === DEFAULT_MODEL ? undefined : profile,
+      });
+      router.push(`/sessions/${id}`);
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : "Could not start the session");
+      setBusy(false);
+    }
+  };
+
+  return (
+    <section>
+      <h1 className="text-display text-center">What should Glorp build?</h1>
+      <p className="mx-auto mt-2.5 max-w-md text-center text-[13.5px] leading-relaxed text-muted-foreground">
+        Describe a task to launch an agent in a sandboxed workspace, or jump back into a running session below.
+      </p>
+
+      <div className="group mt-7 rounded-xl border border-border bg-card p-2.5 shadow-card transition-shadow focus-within:border-brand/40 focus-within:shadow-glow">
+        <textarea
+          value={prompt}
+          onChange={(e) => setPrompt(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) launch();
+          }}
+          placeholder="e.g. Add rate limiting to the API routes and write a test for it."
+          className="min-h-[88px] w-full resize-none bg-transparent px-2.5 py-2 text-[14px] leading-relaxed text-foreground outline-none placeholder:text-muted-foreground/60"
+        />
+        <div className="flex items-center justify-between gap-2 border-t border-border/70 pt-2.5">
+          <div className="flex items-center gap-2">
+            <Select value={ws} onValueChange={setWs}>
+              <SelectTrigger className="h-8 w-[188px] text-[13px]">
+                <FolderGit2 className="size-3.5 shrink-0 text-faint" />
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value={DEFAULT_WS}>Default workspace</SelectItem>
+                {workspaces.map((w) => (
+                  <SelectItem key={w.id} value={w.id}>
+                    {w.name}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            <Select value={profile} onValueChange={setProfile}>
+              <SelectTrigger className="h-8 w-[168px] text-[13px]">
+                <Cpu className="size-3.5 shrink-0 text-faint" />
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value={DEFAULT_MODEL}>{defaultModelLabel ? `Default — ${defaultModelLabel}` : "Default model"}</SelectItem>
+                {profiles.map((p) => (
+                  <SelectItem key={p.id} value={p.id}>
+                    {p.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+          <Button onClick={launch} disabled={busy || !prompt.trim()}>
+            {busy ? <Spinner /> : <SendHorizontal />} Launch
+          </Button>
+        </div>
+      </div>
+      <p className="mt-2.5 text-center text-[11.5px] text-faint">
+        <kbd className="rounded border border-border bg-surface-2 px-1 py-0.5 font-mono text-[10px]">⌘</kbd>{" "}
+        <kbd className="rounded border border-border bg-surface-2 px-1 py-0.5 font-mono text-[10px]">↵</kbd> to launch
+      </p>
+    </section>
+  );
+}