feat: draft hero landing on the index route

apps/web/src/components/ChatView.tsx

@@ -201,6 +201,7 @@ import {
 } from "../state/entities";
 import { environmentShell } from "../state/shell";
 import { ChatComposer, type ChatComposerHandle } from "./chat/ChatComposer";
+import { DraftHeroHeadline } from "./chat/DraftHeroHeadline";
 import { ExpandedImageDialog } from "./chat/ExpandedImageDialog";
 import { PullRequestThreadDialog } from "./PullRequestThreadDialog";
 import { MessagesTimeline } from "./chat/MessagesTimeline";
@@ -2063,6 +2064,7 @@ function ChatViewContent(props: ChatViewProps) {
       deriveTimelineEntries(timelineMessages, activeThread?.proposedPlans ?? [], workLogEntries),
     [activeThread?.proposedPlans, timelineMessages, workLogEntries],
   );
+  const isDraftHeroState = isLocalDraftThread && timelineEntries.length === 0 && !isWorking;
   const { turnDiffSummaries, inferredCheckpointTurnCountByTurnId } =
     useTurnDiffSummaries(activeThread);
   const turnDiffSummaryByAssistantMessageId = useMemo(() => {
@@ -5101,6 +5103,7 @@ function ChatViewContent(props: ChatViewProps) {
                 contentInsetEndAdjustment={composerOverlayHeight}
                 onIsAtEndChange={onIsAtEndChange}
                 onManualNavigation={cancelTimelineLiveFollowForUserNavigation}
+                hideEmptyPlaceholder={isDraftHeroState}
               />
 
               {/* scroll to end pill — shown when user has scrolled away from the live edge */}
@@ -5123,23 +5126,45 @@ function ChatViewContent(props: ChatViewProps) {
               )}
             </div>
 
-            {/* Input bar */}
+            {/* Input bar — centered hero while a draft has no messages, docked at the bottom otherwise */}
             <div
               ref={setComposerOverlayElement}
               data-chat-composer-overlay="true"
-              className="pointer-events-none absolute inset-x-0 bottom-0 z-20 pt-1.5 sm:pt-2"
+              className={
+                isDraftHeroState
+                  ? "pointer-events-none absolute inset-0 z-20 flex flex-col pt-1.5 sm:pt-2"
+                  : "pointer-events-none absolute inset-x-0 bottom-0 z-20 pt-1.5 sm:pt-2"
+              }
             >
-              <div
-                aria-hidden="true"
-                className="chat-composer-horizontal-inset pointer-events-none absolute inset-x-0 top-1.5 bottom-0 z-0 sm:top-2"
-              >
-                <div className="relative mx-auto h-full w-full max-w-3xl overflow-clip rounded-t-[20px]">
-                  <div className="chat-composer-shared-blur absolute -inset-8" />
+              {/* Equal flexible spacers keep the hero group vertically stable:
+                  whatever mounts below (branch toolbar, banners) grows into the
+                  bottom spacer instead of re-centering the headline. */}
+              {isDraftHeroState ? <div className="min-h-0 flex-1 basis-0" /> : null}
+              {isDraftHeroState ? (
+                <div className="chat-composer-horizontal-inset pb-8">
+                  <DraftHeroHeadline
+                    activeProjectRef={activeProjectRef}
+                    activeProjectTitle={activeProject?.title ?? null}
+                  />
                 </div>
-              </div>
+              ) : (
+                <div
+                  aria-hidden="true"
+                  className="chat-composer-horizontal-inset pointer-events-none absolute inset-x-0 top-1.5 bottom-0 z-0 sm:top-2"
+                >
+                  <div className="relative mx-auto h-full w-full max-w-3xl overflow-clip rounded-t-[20px]">
+                    <div className="chat-composer-shared-blur absolute -inset-8" />
+                  </div>
+                </div>
+              )}
               <div className="chat-composer-horizontal-inset">
                 <div className="pointer-events-auto relative z-10 isolate">
-                  <ComposerBannerStack className="relative z-0" items={composerBannerItems} />
+                  {/* In the hero layout the banner hangs below the composer without
+                      contributing height, so connect/reconnect churn cannot
+                      re-center the headline and composer. */}
+                  {isDraftHeroState ? null : (
+                    <ComposerBannerStack className="relative z-0" items={composerBannerItems} />
+                  )}
                   <div className="relative z-10">
                     <ChatComposer
                       composerRef={composerRef}
@@ -5216,41 +5241,52 @@ function ChatViewContent(props: ChatViewProps) {
                 </div>
               </div>
               <div
-                className={cn(
-                  "chat-composer-horizontal-inset chat-composer-lower-chrome relative z-10",
-                  isGitRepo
-                    ? "pb-[calc(env(safe-area-inset-bottom)+0.25rem)]"
-                    : "pb-[calc(env(safe-area-inset-bottom)+0.75rem)] sm:pb-[calc(env(safe-area-inset-bottom)+1rem)]",
-                )}
+                className={isDraftHeroState ? "flex min-h-0 flex-1 basis-0 flex-col" : "contents"}
               >
-                {isGitRepo && (
-                  <div className="pointer-events-auto">
-                    <BranchToolbar
-                      environmentId={activeThread.environmentId}
-                      threadId={activeThread.id}
-                      {...(routeKind === "draft" && draftId ? { draftId } : {})}
-                      onEnvModeChange={onEnvModeChange}
-                      startFromOrigin={startFromOrigin}
-                      onStartFromOriginChange={onStartFromOriginChange}
-                      {...(canOverrideServerThreadEnvMode
-                        ? { effectiveEnvModeOverride: envMode }
-                        : {})}
-                      {...(canOverrideServerThreadEnvMode
-                        ? {
-                            activeThreadBranchOverride: activeThreadBranch,
-                            onActiveThreadBranchOverrideChange: setPendingServerThreadBranch,
-                          }
-                        : {})}
-                      envLocked={envLocked}
-                      onComposerFocusRequest={scheduleComposerFocus}
-                      {...(canCheckoutPullRequestIntoThread
-                        ? { onCheckoutPullRequestRequest: openPullRequestDialog }
-                        : {})}
-                      {...(hasMultipleEnvironments ? { onEnvironmentChange } : {})}
-                      availableEnvironments={logicalProjectEnvironments}
-                    />
+                <div
+                  className={cn(
+                    "chat-composer-horizontal-inset chat-composer-lower-chrome relative z-10",
+                    isGitRepo
+                      ? "pb-[calc(env(safe-area-inset-bottom)+0.25rem)]"
+                      : "pb-[calc(env(safe-area-inset-bottom)+0.75rem)] sm:pb-[calc(env(safe-area-inset-bottom)+1rem)]",
+                  )}
+                >
+                  {isGitRepo && (
+                    <div className="pointer-events-auto">
+                      <BranchToolbar
+                        environmentId={activeThread.environmentId}
+                        threadId={activeThread.id}
+                        {...(routeKind === "draft" && draftId ? { draftId } : {})}
+                        onEnvModeChange={onEnvModeChange}
+                        startFromOrigin={startFromOrigin}
+                        onStartFromOriginChange={onStartFromOriginChange}
+                        {...(canOverrideServerThreadEnvMode
+                          ? { effectiveEnvModeOverride: envMode }
+                          : {})}
+                        {...(canOverrideServerThreadEnvMode
+                          ? {
+                              activeThreadBranchOverride: activeThreadBranch,
+                              onActiveThreadBranchOverrideChange: setPendingServerThreadBranch,
+                            }
+                          : {})}
+                        envLocked={envLocked}
+                        onComposerFocusRequest={scheduleComposerFocus}
+                        {...(canCheckoutPullRequestIntoThread
+                          ? { onCheckoutPullRequestRequest: openPullRequestDialog }
+                          : {})}
+                        {...(hasMultipleEnvironments ? { onEnvironmentChange } : {})}
+                        availableEnvironments={logicalProjectEnvironments}
+                      />
+                    </div>
+                  )}
+                </div>
+                {isDraftHeroState ? (
+                  <div className="chat-composer-horizontal-inset pt-1">
+                    <div className="pointer-events-auto">
+                      <ComposerBannerStack className="relative z-0" items={composerBannerItems} />
+                    </div>
                   </div>
-                )}
+                ) : null}
               </div>
             </div>
 

apps/web/src/components/chat/DraftHeroHeadline.tsx

@@ -0,0 +1,88 @@
+import type { ScopedProjectRef } from "@t3tools/contracts";
+import { scopedProjectKey, scopeProjectRef } from "@t3tools/client-runtime/environment";
+import { ChevronDownIcon } from "lucide-react";
+import { useMemo } from "react";
+
+import { useNewThreadHandler } from "~/hooks/useHandleNewThread";
+import { useProjects, useThreadShells } from "~/state/entities";
+import { sortProjectsForSidebar } from "../Sidebar.logic";
+import { Menu, MenuPopup, MenuRadioGroup, MenuRadioItem, MenuTrigger } from "../ui/menu";
+
+interface DraftHeroHeadlineProps {
+  readonly activeProjectRef: ScopedProjectRef | null;
+  readonly activeProjectTitle: string | null;
+}
+
+export function DraftHeroHeadline({
+  activeProjectRef,
+  activeProjectTitle,
+}: DraftHeroHeadlineProps) {
+  const projects = useProjects();
+  const threads = useThreadShells();
+  const handleNewThread = useNewThreadHandler();
+
+  const orderedProjects = useMemo(
+    () => sortProjectsForSidebar(projects, threads, "updated_at"),
+    [projects, threads],
+  );
+  const projectByKey = useMemo(
+    () =>
+      new Map(
+        orderedProjects.map(
+          (project) =>
+            [
+              scopedProjectKey(scopeProjectRef(project.environmentId, project.id)),
+              project,
+            ] as const,
+        ),
+      ),
+    [orderedProjects],
+  );
+  const activeProjectKey = activeProjectRef === null ? "" : scopedProjectKey(activeProjectRef);
+
+  const projectLabel = activeProjectTitle ?? "this project";
+  return (
+    <h1 className="mx-auto w-full max-w-3xl text-center font-semibold text-2xl text-foreground sm:text-3xl">
+      What should we do in{" "}
+      {orderedProjects.length > 1 ? (
+        <Menu>
+          <MenuTrigger className="pointer-events-auto inline-flex cursor-pointer items-baseline gap-1.5 rounded-md text-muted-foreground/60 transition-colors hover:text-foreground/80 focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring">
+            {projectLabel}
+            <span
+              aria-hidden="true"
+              className="mr-1.5 flex size-4 shrink-0 items-center justify-center self-center rounded-full bg-muted-foreground/12 sm:size-5"
+            >
+              <ChevronDownIcon className="size-2.5 sm:size-3" />
+            </span>
+          </MenuTrigger>
+          <MenuPopup align="center" className="max-h-80 w-64 overflow-y-auto">
+            <MenuRadioGroup
+              value={activeProjectKey}
+              onValueChange={(value) => {
+                const project = projectByKey.get(value as string);
+                if (!project || value === activeProjectKey) {
+                  return;
+                }
+                void handleNewThread(scopeProjectRef(project.environmentId, project.id), {
+                  replace: true,
+                });
+              }}
+            >
+              {orderedProjects.map((project) => {
+                const key = scopedProjectKey(scopeProjectRef(project.environmentId, project.id));
+                return (
+                  <MenuRadioItem key={key} value={key} closeOnClick>
+                    <span className="min-w-0 truncate">{project.title}</span>
+                  </MenuRadioItem>
+                );
+              })}
+            </MenuRadioGroup>
+          </MenuPopup>
+        </Menu>
+      ) : (
+        <span className="text-muted-foreground/60">{projectLabel}</span>
+      )}
+      ?
+    </h1>
+  );
+}

apps/web/src/components/chat/MessagesTimeline.tsx

@@ -179,6 +179,7 @@ interface MessagesTimelineProps {
   contentInsetEndAdjustment: number;
   onIsAtEndChange: (isAtEnd: boolean) => void;
   onManualNavigation: () => void;
+  hideEmptyPlaceholder?: boolean;
 }
 
 // ---------------------------------------------------------------------------
@@ -212,6 +213,7 @@ export const MessagesTimeline = memo(function MessagesTimeline({
   contentInsetEndAdjustment,
   onIsAtEndChange,
   onManualNavigation,
+  hideEmptyPlaceholder = false,
 }: MessagesTimelineProps) {
   const [expandedTurnIds, setExpandedTurnIds] = useState<ReadonlySet<TurnId>>(new Set());
   const [expandedWorkGroupIds, setExpandedWorkGroupIds] = useState<ReadonlySet<string>>(new Set());
@@ -458,6 +460,9 @@ export const MessagesTimeline = memo(function MessagesTimeline({
   );
 
   if (rows.length === 0 && !isWorking) {
+    if (hideEmptyPlaceholder) {
+      return null;
+    }
     return (
       <div className="flex h-full items-center justify-center">
         <p className="text-sm text-muted-foreground/30">

apps/web/src/hooks/useHandleNewThread.ts

@@ -47,6 +47,7 @@ export function useNewThreadHandler() {
         worktreePath?: string | null;
         envMode?: DraftThreadEnvMode;
         startFromOrigin?: boolean;
+        replace?: boolean;
       },
     ): Promise<void> => {
       const {
@@ -120,6 +121,7 @@ export function useNewThreadHandler() {
           await router.navigate({
             to: "/draft/$draftId",
             params: { draftId: reusableStoredDraftThread.draftId },
+            replace: options?.replace ?? false,
           });
         })();
       }
@@ -180,6 +182,7 @@ export function useNewThreadHandler() {
         await router.navigate({
           to: "/draft/$draftId",
           params: { draftId },
+          replace: options?.replace ?? false,
         });
       })();
     },

apps/web/src/routes/_chat.index.tsx

@@ -1,10 +1,19 @@
+import { scopeProjectRef } from "@t3tools/client-runtime/environment";
 import { createFileRoute, Link } from "@tanstack/react-router";
 import { LinkIcon, PlusIcon } from "lucide-react";
+import { useEffect, useMemo, useRef } from "react";
 
-import { NoActiveThreadState } from "../components/NoActiveThreadState";
+import { useOpenAddProjectCommandPalette } from "../commandPaletteContext";
+import { sortProjectsForSidebar } from "../components/Sidebar.logic";
 import { Button } from "../components/ui/button";
 import { Empty, EmptyDescription, EmptyHeader, EmptyTitle } from "../components/ui/empty";
 import { SidebarInset } from "../components/ui/sidebar";
+import { useNewThreadHandler } from "../hooks/useHandleNewThread";
+import {
+  useAllEnvironmentShellsBootstrapped,
+  useProjects,
+  useThreadShells,
+} from "../state/entities";
 import { useEnvironments } from "../state/environments";
 import { APP_DISPLAY_NAME } from "~/branding";
 import { hasCloudPublicConfig } from "~/cloud/publicConfig";
@@ -19,7 +28,72 @@ function ChatIndexRouteView() {
     return <HostedStaticOnboardingState />;
   }
 
-  return <NoActiveThreadState />;
+  return <IndexDraftLanding />;
+}
+
+/**
+ * Landing on the index route drops straight into a draft thread for the most
+ * recently active project, so the first screen is a prompt instead of a dead
+ * end. Falls back to an add-project hero when no project exists yet.
+ */
+function IndexDraftLanding() {
+  const projects = useProjects();
+  const threads = useThreadShells();
+  const bootstrapped = useAllEnvironmentShellsBootstrapped();
+  const handleNewThread = useNewThreadHandler();
+  const startingRef = useRef(false);
+
+  const mostRecentProject = useMemo(
+    () =>
+      bootstrapped ? (sortProjectsForSidebar(projects, threads, "updated_at")[0] ?? null) : null,
+    [bootstrapped, projects, threads],
+  );
+
+  useEffect(() => {
+    if (mostRecentProject === null || startingRef.current) {
+      return;
+    }
+    startingRef.current = true;
+    void handleNewThread(scopeProjectRef(mostRecentProject.environmentId, mostRecentProject.id), {
+      replace: true,
+    }).catch(() => {
+      startingRef.current = false;
+    });
+  }, [handleNewThread, mostRecentProject]);
+
+  if (!bootstrapped || mostRecentProject !== null) {
+    return null;
+  }
+  return <NoProjectsHero />;
+}
+
+function NoProjectsHero() {
+  const openAddProject = useOpenAddProjectCommandPalette();
+
+  return (
+    <SidebarInset className="h-dvh min-h-0 overflow-hidden overscroll-y-none bg-background text-foreground">
+      <div className="flex min-h-0 min-w-0 flex-1 flex-col overflow-x-hidden bg-background">
+        <Empty className="flex-1">
+          <div className="w-full max-w-lg px-8 py-12">
+            <EmptyHeader className="max-w-none">
+              <EmptyTitle className="text-foreground text-2xl sm:text-3xl">
+                What should we work on?
+              </EmptyTitle>
+              <EmptyDescription className="mt-2 text-sm text-muted-foreground/78">
+                Add a project to start your first thread.
+              </EmptyDescription>
+              <div className="mt-6 flex justify-center">
+                <Button size="sm" onClick={openAddProject}>
+                  <PlusIcon className="size-4" />
+                  Add project
+                </Button>
+              </div>
+            </EmptyHeader>
+          </div>
+        </Empty>
+      </div>
+    </SidebarInset>
+  );
 }
 
 export const Route = createFileRoute("/_chat/")({