P1 exit: chat UI, sessions column, agent create — 11 E2E journeys green

- Stream layer: incremental SSE parser tested against bytes captured from the REAL gateway (chunking-independent, UTF-8-safe, heartbeat-tolerant); Zod gateway event schemas; pure transcript reducer (optimistic send, delta streaming, step traces, resume dedupe, error states) - Same-origin /api proxy route: httpOnly cookie -> bearer, unbuffered SSE passthrough; NuqsAdapter in root layout - Chat workspace: route /claws/{id}/chat/{key} (RSC history + settings), WelcomeState with suggested prompts, MessageList (right user bubbles, left agent messages, blink caret), collapsible StepTrace, Composer (Enter sends, Shift+Enter newline) - SessionsColumn in 208px SlidePanel (?sessions=1): search, relative times, active coral border, new session; /claws/{id} resumes latest or opens fresh; minimal create-claw form; rail + button and roster links - P1 exit E2E: scripted reply streams, tool step trace survives reload, separate transcripts across sessions with column switching, create claw and chat immediately 83 Rust + 56 frontend unit/component tests + 11 Playwright journeys. Co-Authored-By: Claude Fable 5 <[email protected]>
2026-06-09 23:29:27 -05:00
parent 32008c9ef0
commit 9f9f507c15
29 changed files with 1774 additions and 4 deletions
@@ -0,0 +1,74 @@
+"use client";
+
+import { useState } from "react";
+
+import type { Session } from "@/lib/api/sessions";
+import { relativeTime } from "@/lib/format/relative-time";
+
+interface SessionsColumnProps {
+  sessions: Session[];
+  activeSessionKey: string;
+  onOpen: (session: Session) => void;
+  onNewSession: () => void;
+}
+
+/** Session list content (§6); rendered inside a 208px SlidePanel. */
+export function SessionsColumn({
+  sessions,
+  activeSessionKey,
+  onOpen,
+  onNewSession,
+}: SessionsColumnProps) {
+  const [query, setQuery] = useState("");
+  const visible = sessions.filter((s) =>
+    (s.title || "Untitled").toLowerCase().includes(query.toLowerCase()),
+  );
+
+  return (
+    <div className="flex h-full flex-col border-r border-border bg-subtle">
+      <div className="p-2">
+        <input
+          type="search"
+          aria-label="Search sessions"
+          placeholder="Search"
+          value={query}
+          onChange={(e) => setQuery(e.target.value)}
+          className="w-full rounded-(--radius) border border-input bg-background px-2 py-1.5 text-xs outline-none focus:border-accent"
+        />
+      </div>
+      <ul aria-label="Sessions" className="flex-1 overflow-y-auto px-2">
+        {visible.map((session) => {
+          const active = session.sessionKey === activeSessionKey;
+          return (
+            <li key={session.id}>
+              <button
+                type="button"
+                aria-current={active ? "true" : undefined}
+                onClick={() => onOpen(session)}
+                className={`w-full rounded-(--radius) border-l-2 px-2 py-2 text-left hover:bg-surface-warm ${
+                  active ? "border-accent bg-surface-warm" : "border-transparent"
+                }`}
+              >
+                <span className="block truncate text-xs text-foreground">
+                  {session.title || "Untitled"}
+                </span>
+                <span className="block text-xxs text-muted-foreground">
+                  {relativeTime(session.last_active_at)}
+                </span>
+              </button>
+            </li>
+          );
+        })}
+      </ul>
+      <div className="p-2">
+        <button
+          type="button"
+          onClick={onNewSession}
+          className="w-full rounded-(--radius-button) border border-border px-3 py-1.5 text-xs text-muted-foreground hover:border-accent hover:text-foreground"
+        >
+          + New session
+        </button>
+      </div>
+    </div>
+  );
+}