feat(webapp,dashboard-agent): server-owned chat sessions

The dashboard agent now creates chat sessions server-side: the server
generates the chat id and owns the chat record (bound to the user and org),
and only issues a session token for a chat the requesting user owns. A new
chat opens in a draft composer; the first message creates the session via
chat.startHeadStart, so the client never chooses the id.

Also hardens the repo-read tools with collision-resistant workspace keys and
a realpath guard against symlink escapes.

Author: ericallam

.claude/skills/drizzle/SKILL.md

@@ -21,7 +21,7 @@ Pinned versions: **`drizzle-orm` ^0.45**, **`drizzle-kit` ^0.31** (dev), **`post
 
 ## Package layout
 
-```
+```text
 internal-packages/dashboard-agent-db/
   drizzle.config.ts      # drizzle-kit config (schema path, out dir, schemaFilter)
   drizzle/               # generated migrations (committed)

apps/webapp/app/components/dashboard-agent/DashboardAgent.tsx

@@ -21,11 +21,9 @@ import { DashboardAgentPanel } from "./DashboardAgentPanel";
 export function DashboardAgent({
   children,
   hasAccess = false,
-  headStartEnabled = false,
 }: {
   children: React.ReactNode;
   hasAccess?: boolean;
-  headStartEnabled?: boolean;
 }) {
   const [open, setOpen] = useState(false);
 
@@ -61,7 +59,7 @@ export function DashboardAgent({
       </ResizablePanel>
       <ResizableHandle id="dashboard-agent-handle" />
       <ResizablePanel id="dashboard-agent-panel" default="380px" min="320px" max="720px">
-        <DashboardAgentPanel onClose={() => setOpen(false)} headStartEnabled={headStartEnabled} />
+        <DashboardAgentPanel onClose={() => setOpen(false)} />
       </ResizablePanel>
     </ResizablePanelGroup>
   );

apps/webapp/app/components/dashboard-agent/DashboardAgentChat.tsx

@@ -42,7 +42,8 @@ export function DashboardAgentChat({
   projectSlug,
   environmentSlug,
   currentPage,
-  headStartEnabled,
+  pendingFirstMessage,
+  streaming,
   onTurnSettled,
 }: {
   chatId: string;
@@ -54,19 +55,22 @@ export function DashboardAgentChat({
   projectSlug: string;
   environmentSlug: string;
   currentPage: string;
-  headStartEnabled: boolean;
+  // Cold start: send this first message through the transport once on mount to
+  // trigger the turn. Undefined for head-started and resumed chats.
+  pendingFirstMessage?: string;
+  // Head start: the turn is already in flight, so hydrate the session as
+  // streaming so the transport resumes `session.out` instead of treating it as
+  // a settled session with nothing to reconnect to.
+  streaming?: boolean;
   onTurnSettled: () => void;
 }) {
   const [input, setInput] = useState("");
 
   const transport = useTriggerChatTransport<typeof dashboardAgent>({
     task: "dashboard-agent",
     baseURL: apiOrigin,
-    // First turn of a brand-new chat streams step 1 from the same-origin
-    // head-start route (which mints + injects the delegated token server-side
-    // and boots the agent in parallel). Only when the server is head-start
-    // capable; otherwise the first turn takes the normal cold-start path.
-    headStart: headStartEnabled ? `${actionPath}/headstart` : undefined,
+    // New chats are created server-side (the `create` action owns the id and
+    // runs head start), so there's no client-driven head-start route here.
     // Redirect only the `in`/append to the same-origin proxy, which mints +
     // injects the delegated user token server-side. `baseURL` stays a string so
     // `out` (the long-lived SSE) keeps the SDK's realtime-host routing — we
@@ -82,7 +86,10 @@ export function DashboardAgentChat({
           [chatId]: {
             publicAccessToken: session.publicAccessToken,
             lastEventId: session.lastEventId,
-            isStreaming: false,
+            // Head-started chats are mid-turn, so mark the session streaming to
+            // make the transport resume `session.out`. A settled session
+            // (history) stays false — its transcript loads from the store.
+            isStreaming: streaming ?? false,
           },
         }
       : undefined,
@@ -121,12 +128,23 @@ export function DashboardAgentChat({
     id: chatId,
     messages: initialMessages,
     transport,
-    resume: !!session,
+    // Resume an existing/head-started session's stream. A cold-start chat has a
+    // session but nothing to resume yet — it sends its first message instead.
+    resume: !!session && !pendingFirstMessage,
   });
 
   const isStreaming = status === "streaming";
   const isThinking = status === "submitted";
 
+  // Cold start: trigger the first turn by sending the pending message once.
+  const sentFirst = useRef(false);
+  useEffect(() => {
+    if (pendingFirstMessage && !sentFirst.current) {
+      sentFirst.current = true;
+      void sendMessage({ text: pendingFirstMessage });
+    }
+  }, [pendingFirstMessage, sendMessage]);
+
   const submit = useCallback(
     (text: string) => {
       const trimmed = text.trim();
@@ -146,7 +164,9 @@ export function DashboardAgentChat({
   // chat appears and titles/timestamps stay current.
   const prevStatus = useRef(status);
   useEffect(() => {
-    if (prevStatus.current === "streaming" && status === "ready") onTurnSettled();
+    const wasInFlight = prevStatus.current === "streaming" || prevStatus.current === "submitted";
+    const nowSettled = status === "ready" || status === "error";
+    if (wasInFlight && nowSettled) onTurnSettled();
     prevStatus.current = status;
   }, [status, onTurnSettled]);
 

apps/webapp/app/components/dashboard-agent/DashboardAgentComposer.tsx

@@ -27,7 +27,7 @@ export function DashboardAgentComposer({
             value={value}
             onChange={(e) => onChange(e.target.value)}
             onKeyDown={(e) => {
-              if (e.key === "Enter" && !e.shiftKey) {
+              if (e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing) {
                 e.preventDefault();
                 onSubmit();
               }

apps/webapp/app/components/dashboard-agent/DashboardAgentDraft.tsx

@@ -0,0 +1,53 @@
+import { useCallback, useState } from "react";
+import { DashboardAgentComposer } from "./DashboardAgentComposer";
+import { DashboardAgentContextBanner } from "./DashboardAgentContextBanner";
+import { DashboardAgentSuggestedPrompts } from "./DashboardAgentSuggestedPrompts";
+
+/**
+ * The new-chat "draft" state: suggested prompts + composer with no transport
+ * mounted and no chat id yet. The chat id is server-owned, so the first send
+ * goes to the panel's `create` call, which generates the id and returns it;
+ * only then does the real `DashboardAgentChat` mount. The client never invents
+ * a chat id.
+ */
+export function DashboardAgentDraft({
+  onSubmit,
+  projectSlug,
+  environmentSlug,
+  currentPage,
+}: {
+  onSubmit: (text: string) => void;
+  projectSlug: string;
+  environmentSlug: string;
+  currentPage: string;
+}) {
+  const [input, setInput] = useState("");
+
+  const submit = useCallback(
+    (text: string) => {
+      const trimmed = text.trim();
+      if (!trimmed) return;
+      setInput("");
+      onSubmit(trimmed);
+    },
+    [onSubmit]
+  );
+
+  return (
+    <>
+      <DashboardAgentContextBanner
+        projectSlug={projectSlug}
+        environmentSlug={environmentSlug}
+        currentPage={currentPage}
+      />
+      <DashboardAgentSuggestedPrompts onSelect={submit} />
+      <DashboardAgentComposer
+        value={input}
+        onChange={setInput}
+        onSubmit={() => submit(input)}
+        onStop={() => {}}
+        isStreaming={false}
+      />
+    </>
+  );
+}

apps/webapp/app/components/dashboard-agent/DashboardAgentHistory.tsx

@@ -66,7 +66,7 @@ export function DashboardAgentHistory({
                     type="button"
                     onClick={() => onDelete(chat.id)}
                     aria-label="Delete chat"
-                    className="shrink-0 rounded p-1 text-text-dimmed opacity-0 transition-opacity hover:text-error group-hover:opacity-100"
+                    className="shrink-0 rounded p-1 text-text-dimmed opacity-0 transition-opacity hover:text-error group-hover:opacity-100 group-focus-within:opacity-100 focus-visible:opacity-100 focus-custom"
                   >
                     <TrashIcon className="size-3.5" />
                   </button>

apps/webapp/app/components/dashboard-agent/DashboardAgentPanel.tsx

@@ -13,6 +13,7 @@ import {
   type DashboardAgentClientData,
   type DashboardAgentSession,
 } from "./DashboardAgentChat";
+import { DashboardAgentDraft } from "./DashboardAgentDraft";
 import { DashboardAgentHeader } from "./DashboardAgentHeader";
 import {
   DashboardAgentHistory,
@@ -29,21 +30,23 @@ type ActiveChat = {
   chatId: string;
   messages: UIMessage[];
   session: DashboardAgentSession | null;
+  // Cold start only: the agent run has no warm step-1, so the mounted chat sends
+  // this first message through the transport to trigger the turn. Undefined for
+  // head-started and resumed chats — their stream is resumed, not re-sent.
+  pendingFirstMessage?: string;
+  // True for a head-started chat: the turn is already in flight server-side, so
+  // the transport must hydrate the session as streaming to resume `session.out`.
+  streaming?: boolean;
 };
 
 /**
  * The dashboard agent side panel. Owns history, the active chat, and last-chat
- * persistence; resolves a chat's stored transcript + session before mounting
- * the inner `DashboardAgentChat` (keyed by chatId) so resume flows in through
- * the transport's declarative `sessions` option.
+ * persistence. New chats start in a draft state with no id; the server
+ * generates the chat id on the first send (`create`) and owns the chat record,
+ * so the client never invents an id. Existing chats resolve their stored
+ * transcript + session before mounting `DashboardAgentChat` (keyed by chatId).
  */
-export function DashboardAgentPanel({
-  onClose,
-  headStartEnabled = false,
-}: {
-  onClose: () => void;
-  headStartEnabled?: boolean;
-}) {
+export function DashboardAgentPanel({ onClose }: { onClose: () => void }) {
   const organization = useOrganization();
   const project = useProject();
   const environment = useEnvironment();
@@ -80,16 +83,17 @@ export function DashboardAgentPanel({
     }
   }, [actionPath]);
 
-  // Open a chat by id. A new chat mounts immediately with an empty transcript;
-  // an existing one is fetched first so its session hydrates the transport at
-  // mount. A stored id that's gone (deleted / never sent) falls back to fresh.
+  // Bumped on each open so a slower earlier open can't overwrite a newer one
+  // when chats are switched rapidly.
+  const openChatRequestSeq = useRef(0);
+
+  // Open an existing chat: fetch its stored transcript + session so resume flows
+  // in through the transport at mount. A stored id that's gone (deleted / never
+  // sent) drops back to the draft state.
   const openChat = useCallback(
-    async (id: string, opts?: { fetchExisting?: boolean }) => {
+    async (id: string) => {
       setView("chat");
-      if (!opts?.fetchExisting) {
-        setActive({ chatId: id, messages: [], session: null });
-        return;
-      }
+      const seq = ++openChatRequestSeq.current;
       setLoading(true);
       try {
         const res = await fetch(`${actionPath}?chatId=${encodeURIComponent(id)}`);
@@ -99,6 +103,7 @@ export function DashboardAgentPanel({
               session?: { publicAccessToken: string; lastEventId: string | null } | null;
             })
           : { messages: [], session: null };
+        if (seq !== openChatRequestSeq.current) return;
         if (data.messages && data.messages.length > 0) {
           setActive({
             chatId: id,
@@ -111,16 +116,62 @@ export function DashboardAgentPanel({
               : null,
           });
         } else {
-          setActive({ chatId: generateFriendlyId("chat"), messages: [], session: null });
+          // Nothing stored under this id — drop to a fresh draft.
+          setActive(null);
         }
       } finally {
-        setLoading(false);
+        if (seq === openChatRequestSeq.current) setLoading(false);
       }
     },
     [actionPath]
   );
 
-  // On open, restore the last chat (or start a new one). Runs once per mount.
+  // Start a new chat by sending its first message. The server generates the id,
+  // creates the chat record, and kicks off the first turn (head start when
+  // configured, else a cold session). We then mount the real chat on the server
+  // id and either resume its stream (head start) or send the message through
+  // the transport (cold start).
+  const createChat = useCallback(
+    async (text: string) => {
+      setView("chat");
+      setLoading(true);
+      try {
+        const userMessage: UIMessage = {
+          id: generateFriendlyId("msg"),
+          role: "user",
+          parts: [{ type: "text", text }],
+        };
+        const body = new FormData();
+        body.set("intent", "create");
+        body.set("message", JSON.stringify(userMessage));
+        body.set("clientData", JSON.stringify(clientData));
+        const res = await fetch(actionPath, { method: "POST", body });
+        const data = (await res.json()) as {
+          chatId?: string;
+          publicAccessToken?: string;
+          headStarted?: boolean;
+          error?: string;
+        };
+        if (!res.ok || !data.chatId || !data.publicAccessToken) {
+          setActive(null);
+          return;
+        }
+        setActive({
+          chatId: data.chatId,
+          messages: data.headStarted ? [userMessage] : [],
+          session: { publicAccessToken: data.publicAccessToken },
+          pendingFirstMessage: data.headStarted ? undefined : text,
+          streaming: data.headStarted,
+        });
+      } finally {
+        setLoading(false);
+      }
+    },
+    [actionPath, clientData]
+  );
+
+  // On open, restore the last chat if there is one; otherwise stay in the draft
+  // state (active = null). Runs once per mount.
   const restored = useRef(false);
   useEffect(() => {
     if (restored.current) return;
@@ -131,8 +182,7 @@ export function DashboardAgentPanel({
     } catch {
       /* localStorage unavailable — start fresh */
     }
-    if (stored) void openChat(stored, { fetchExisting: true });
-    else void openChat(generateFriendlyId("chat"));
+    if (stored) void openChat(stored);
   }, [openChat, storageKey]);
 
   // Persist the active chat as the one to restore next time.
@@ -146,12 +196,13 @@ export function DashboardAgentPanel({
   }, [active?.chatId, storageKey]);
 
   const newChat = useCallback(() => {
-    void openChat(generateFriendlyId("chat"));
-  }, [openChat]);
+    setView("chat");
+    setActive(null);
+  }, []);
 
   const switchChat = useCallback(
     (id: string) => {
-      void openChat(id, { fetchExisting: true });
+      void openChat(id);
     },
     [openChat]
   );
@@ -192,25 +243,33 @@ export function DashboardAgentPanel({
           onNewChat={newChat}
           onDelete={deleteChat}
         />
-      ) : loading || !active ? (
+      ) : loading ? (
         <div className="flex flex-1 items-center justify-center">
           <Spinner className="size-5" />
         </div>
-      ) : (
+      ) : active ? (
         <DashboardAgentChat
           key={active.chatId}
           chatId={active.chatId}
           initialMessages={active.messages}
           session={active.session}
+          pendingFirstMessage={active.pendingFirstMessage}
+          streaming={active.streaming}
           clientData={clientData}
           apiOrigin={apiOrigin}
           actionPath={actionPath}
           projectSlug={project.slug}
           environmentSlug={environment.slug}
           currentPage={currentPage}
-          headStartEnabled={headStartEnabled}
           onTurnSettled={loadHistory}
         />
+      ) : (
+        <DashboardAgentDraft
+          onSubmit={createChat}
+          projectSlug={project.slug}
+          environmentSlug={environment.slug}
+          currentPage={currentPage}
+        />
       )}
     </div>
   );