Improve draft chat empty states and stale context menus

- Add branded draft empty states with recent threads and starter prompts
- Keep draft source-control navigation state consistent across routes
- Prevent overlapping spelling lookups from opening stale menus
- Add regression coverage for newest-menu behavior

Author: badcuban

apps/desktop/src/window/DesktopWindow.test.ts

@@ -1,5 +1,6 @@
 import * as NodeServices from "@effect/platform-node/NodeServices";
 import { assert, describe, it } from "@effect/vitest";
+import * as Deferred from "effect/Deferred";
 import * as Effect from "effect/Effect";
 import * as FileSystem from "effect/FileSystem";
 import * as Layer from "effect/Layer";
@@ -416,6 +417,76 @@ describe("DesktopWindow", () => {
     }),
   );
 
+  it.effect("only opens the newest spelling menu when platform lookups overlap", () =>
+    Effect.gen(function* () {
+      const fakeWindow = makeFakeBrowserWindow();
+      const createCount = yield* Ref.make(0);
+      const mainWindow = yield* Ref.make<Option.Option<Electron.BrowserWindow>>(Option.none());
+      const firstSuggestions = yield* Deferred.make<ReadonlyArray<string>>();
+      const secondSuggestions = yield* Deferred.make<ReadonlyArray<string>>();
+      const platformSuggestionsFor = vi.fn((word: string) =>
+        Deferred.await(word === "firstt" ? firstSuggestions : secondSuggestions),
+      );
+      const popupTemplate = vi.fn((_input: ElectronMenu.ElectronMenuTemplateInput) => Effect.void);
+      const layer = makeTestLayer({
+        window: fakeWindow.window,
+        createCount,
+        mainWindow,
+        electronMenu: {
+          setApplicationMenu: () => Effect.void,
+          popupTemplate,
+          showContextMenu: () => Effect.succeed(Option.none()),
+        },
+        electronSpelling: { platformSuggestionsFor },
+      });
+
+      yield* Effect.gen(function* () {
+        const desktopWindow = yield* DesktopWindow.DesktopWindow;
+        yield* desktopWindow.handleBackendReady;
+
+        const contextMenuParams = (misspelledWord: string) =>
+          ({
+            misspelledWord,
+            dictionarySuggestions: [],
+            linkURL: "",
+            mediaType: "none",
+            editFlags: {
+              canUndo: false,
+              canRedo: false,
+              canCut: true,
+              canCopy: true,
+              canPaste: true,
+              canDelete: false,
+              canSelectAll: true,
+              canEditRichly: false,
+            },
+            frame: {} as Electron.WebFrameMain,
+            menuSourceType: "mouse",
+          }) satisfies Partial<Electron.ContextMenuParams>;
+
+        fakeWindow.emitWebContents(
+          "context-menu",
+          { preventDefault: vi.fn() },
+          contextMenuParams("firstt"),
+        );
+        fakeWindow.emitWebContents(
+          "context-menu",
+          { preventDefault: vi.fn() },
+          contextMenuParams("secondd"),
+        );
+
+        yield* Deferred.succeed(secondSuggestions, ["second"]);
+        yield* waitForMockCalls(popupTemplate);
+        assert.equal(popupTemplate.mock.calls.length, 1);
+        assert.equal(popupTemplate.mock.calls[0]?.[0].template[0]?.label, "second");
+
+        yield* Deferred.succeed(firstSuggestions, ["first"]);
+        yield* Effect.promise(() => new Promise<void>((resolve) => setTimeout(resolve, 0)));
+        assert.equal(popupTemplate.mock.calls.length, 1);
+      }).pipe(Effect.provide(layer));
+    }),
+  );
+
   it.effect("falls back to No suggestions when the platform has none either", () =>
     Effect.gen(function* () {
       const fakeWindow = makeFakeBrowserWindow();

apps/desktop/src/window/DesktopWindow.ts

@@ -354,8 +354,10 @@ const make = Effect.gen(function* () {
       );
     });
 
+    let contextMenuRequestVersion = 0;
     window.webContents.on("context-menu", (event, params) => {
       event.preventDefault();
+      const requestVersion = ++contextMenuRequestVersion;
 
       void runPromise(
         Effect.gen(function* () {
@@ -370,10 +372,16 @@ const make = Effect.gen(function* () {
               params.dictionarySuggestions.length > 0
                 ? params.dictionarySuggestions
                 : yield* electronSpelling.platformSuggestionsFor(params.misspelledWord);
+            if (requestVersion !== contextMenuRequestVersion) {
+              return;
+            }
             for (const suggestion of suggestions.slice(0, 5)) {
               menuTemplate.push({
                 label: suggestion,
                 click: () => {
+                  if (requestVersion !== contextMenuRequestVersion) {
+                    return;
+                  }
                   window.webContents.replaceMisspelling(suggestion);
                   window.webContents.focus();
                 },

apps/web/src/components/ChatView.tsx

@@ -47,9 +47,10 @@ import { isElectron } from "../env";
 import { ensureLocalApi, readLocalApi } from "../localApi";
 import {
   closeRightPanelSearchParams,
+  isDraftSourceControlPanelOpen,
   isSourceControlPanelOpen,
   parseDiffRouteSearch,
-  preserveRightPanelSearchParamsForNavigation,
+  preserveRightPanelSearchParamsForDraftNavigation,
   stripRightPanelSearchParams,
 } from "../diffRouteSearch";
 import {
@@ -190,6 +191,7 @@ import { getComposerProviderState } from "./chat/composerProviderState";
 import { ExpandedImageDialog } from "./chat/ExpandedImageDialog";
 import { PullRequestThreadDialog } from "./PullRequestThreadDialog";
 import { MessagesTimeline, type TimelineProposedPlanState } from "./chat/MessagesTimeline";
+import { DraftEmptyState } from "./chat/DraftEmptyState";
 import { ProviderModelPicker } from "./chat/ProviderModelPicker";
 import { ChatHeader, type ForkHeaderContext } from "./chat/ChatHeader";
 import type { ThreadBackgroundRunItem } from "./chat/ThreadActivityPopover";
@@ -1261,19 +1263,17 @@ export default function ChatView(props: ChatViewProps) {
     composerInteractionMode ?? activeThread?.interactionMode ?? DEFAULT_INTERACTION_MODE;
   const isLocalDraftThread = !isServerThread && localDraftThread !== undefined;
   const canCheckoutPullRequestIntoThread = isLocalDraftThread;
-  const sourceControlOpen = isSourceControlPanelOpen(rawSearch, {
-    defaultOpen: !shouldUseRightPanelSheet,
-  });
+  // Mirror the owning route's panel default: server threads open on wide
+  // viewports, drafts stay closed until explicitly opened.
+  const sourceControlOpen =
+    routeKind === "server"
+      ? isSourceControlPanelOpen(rawSearch, { defaultOpen: !shouldUseRightPanelSheet })
+      : isDraftSourceControlPanelOpen(rawSearch);
   // The diff panel is a drill-in of source control, so the header toggle
   // treats the right panel as one unit: it stays pressed while a diff is
   // open and pressing it closes the whole panel.
   const diffPanelOpen = rawSearch.diff === "1";
   const rightPanelEngaged = sourceControlOpen || diffPanelOpen;
-  const preserveRightPanelSearchForDraftNavigation = useCallback(
-    (previous: Record<string, unknown>) =>
-      preserveRightPanelSearchParamsForNavigation(previous, { sourceControlOpen }),
-    [sourceControlOpen],
-  );
   const activeThreadId = activeThread?.id ?? null;
   const activeThreadRef = useMemo(
     () => (activeThread ? scopeThreadRef(activeThread.environmentId, activeThread.id) : null),
@@ -1323,6 +1323,34 @@ export default function ChatView(props: ChatViewProps) {
   // General Chat threads run in a hidden scratch workspace: source-control,
   // scripts, and open-in affordances stay hidden even though a project exists.
   const isGeneralChatThread = activeProject?.kind === "general-chat";
+  const insertDraftStarterPrompt = useCallback(
+    (text: string) => {
+      setComposerDraftPrompt(composerDraftTarget, text);
+      window.requestAnimationFrame(() => {
+        composerRef.current?.focusAtEnd();
+      });
+    },
+    [composerDraftTarget, composerRef, setComposerDraftPrompt],
+  );
+  const draftTimelineEmptyState = useMemo(
+    () =>
+      isLocalDraftThread && draftThread ? (
+        <DraftEmptyState
+          currentProjectRef={scopeProjectRef(draftThread.environmentId, draftThread.projectId)}
+          currentProjectName={activeProject?.name ?? null}
+          isGeneralChat={isGeneralChatThread}
+          onInsertPrompt={insertDraftStarterPrompt}
+        />
+      ) : undefined,
+    [
+      activeProject?.name,
+      draftThread?.environmentId,
+      draftThread?.projectId,
+      insertDraftStarterPrompt,
+      isGeneralChatThread,
+      isLocalDraftThread,
+    ],
+  );
 
   const shouldRetainThreadDetailSubscription = routeKind === "server" || serverThread !== undefined;
   useEffect(() => {
@@ -1503,7 +1531,7 @@ export default function ChatView(props: ChatViewProps) {
           await navigate({
             to: "/draft/$draftId",
             params: buildDraftThreadRouteParams(storedDraftSession.draftId),
-            search: preserveRightPanelSearchForDraftNavigation,
+            search: preserveRightPanelSearchParamsForDraftNavigation,
           });
         }
         return storedDraftSession.threadId;
@@ -1538,7 +1566,7 @@ export default function ChatView(props: ChatViewProps) {
       await navigate({
         to: "/draft/$draftId",
         params: buildDraftThreadRouteParams(nextDraftId),
-        search: preserveRightPanelSearchForDraftNavigation,
+        search: preserveRightPanelSearchParamsForDraftNavigation,
       });
       return nextThreadId;
     },
@@ -1549,7 +1577,6 @@ export default function ChatView(props: ChatViewProps) {
       getDraftSessionByLogicalProjectKey,
       isServerThread,
       navigate,
-      preserveRightPanelSearchForDraftNavigation,
       projectGroupingSettings,
       routeKind,
       setDraftThreadContext,
@@ -3764,9 +3791,13 @@ export default function ChatView(props: ChatViewProps) {
     setIsRevertingCheckpoint(false);
   }, [activeThread?.id]);
 
+  // Pristine drafts (the home surface) open without stealing focus; the
+  // composer takes focus once a conversation exists or via an explicit action.
+  const skipEntryComposerFocus = isLocalDraftThread && (activeThread?.messages.length ?? 0) === 0;
   useEffect(() => {
     if (
       !activeThread?.id ||
+      skipEntryComposerFocus ||
       timelineSearchTargetRef.current ||
       terminalState.terminalOpen ||
       isCoarsePointer
@@ -3779,7 +3810,13 @@ export default function ChatView(props: ChatViewProps) {
     return () => {
       window.cancelAnimationFrame(frame);
     };
-  }, [activeThread?.id, focusComposer, isCoarsePointer, terminalState.terminalOpen]);
+  }, [
+    activeThread?.id,
+    focusComposer,
+    isCoarsePointer,
+    skipEntryComposerFocus,
+    terminalState.terminalOpen,
+  ]);
 
   useEffect(() => {
     if (!activeThread?.id) return;
@@ -6058,6 +6095,7 @@ export default function ChatView(props: ChatViewProps) {
             {/* Messages — LegendList handles virtualization and scrolling internally */}
             <MessagesTimeline
               key={activeThread.id}
+              emptyState={draftTimelineEmptyState}
               isWorking={isWorking}
               activeStatusLabel={activeStatusLabel}
               activeTurnInProgress={isWorking || !latestTurnSettled}