From 4424004308a5d754d063b463fe148af5a7d2cde6 Mon Sep 17 00:00:00 2001
From: spike <zvq@live.com>
Date: Wed, 2 Sep 2026 09:33:19 +0800
Subject: [PATCH 01/11] feat: improve mobile project chat actions

Model: gpt-5.4
Amp-Thread-ID: https://ampcode.com/threads/T-01a05fa8-bf70-7328-be77-9fcbf097f344
Co-authored-by: Amp <amp@ampcode.com>
---
 locales/en.json                               |  1 +
 locales/zh_CN.json                            |  1 +
 .../src/components/chat/chat-landing.tsx      | 25 +++++
 .../components/mobile/mobile-chat-list.tsx    | 45 ++++++++-
 .../components/mobile/mobile-home-screen.tsx  | 67 +++++++-------
 .../mobile/mobile-project-screen.tsx          | 68 +++++++-------
 .../src/stories/MobileChatList.stories.tsx    |  2 +
 .../src/stories/MobileHomeScreen.stories.tsx  |  2 +
 .../mobile-chat-list-project-actions.test.tsx | 92 +++++++++++++++++++
 9 files changed, 229 insertions(+), 74 deletions(-)
 create mode 100644 packages/components/tests/mobile-chat-list-project-actions.test.tsx

diff --git a/locales/en.json b/locales/en.json
index 49f6eaa58..fe4ec151b 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -378,6 +378,7 @@
   "chat.mobileHome.localProjectSearchPlaceholder": "Search projects",
   "chat.mobileHome.machineSelector": "Machines",
   "chat.mobileHome.newChatAriaLabel": "New chat",
+  "chat.mobileHome.newChatInProjectAriaLabel": "New chat in {{projectLabel}}",
   "chat.mobileHome.onboarding.description": "Download the desktop app to get started.",
   "chat.mobileHome.onboarding.downloadButton": "Download Lody",
   "chat.mobileHome.onboarding.title": "Lody runs on your computer",
diff --git a/locales/zh_CN.json b/locales/zh_CN.json
index 39f27f10b..06e60f18c 100644
--- a/locales/zh_CN.json
+++ b/locales/zh_CN.json
@@ -378,6 +378,7 @@
   "chat.mobileHome.localProjectSearchPlaceholder": "搜索项目",
   "chat.mobileHome.machineSelector": "机器",
   "chat.mobileHome.newChatAriaLabel": "新建对话",
+  "chat.mobileHome.newChatInProjectAriaLabel": "在 {{projectLabel}} 中新建对话",
   "chat.mobileHome.onboarding.description": "下载桌面客户端并启动后即可开始。",
   "chat.mobileHome.onboarding.downloadButton": "下载 Lody",
   "chat.mobileHome.onboarding.title": "Lody 运行在你的电脑上",
diff --git a/packages/components/src/components/chat/chat-landing.tsx b/packages/components/src/components/chat/chat-landing.tsx
index 3b21a7529..96d917c7a 100644
--- a/packages/components/src/components/chat/chat-landing.tsx
+++ b/packages/components/src/components/chat/chat-landing.tsx
@@ -5372,6 +5372,26 @@ function WorkspaceChatLanding({
     },
     [navigate, workspaceSlug]
   );
+  const handleMobileNewChatInProject = useCallback(
+    (project: { kind: 'local' | 'github'; projectKey: string }) => {
+      if (project.kind === 'github') {
+        setSelectedRepo(project.projectKey);
+        setContextType('github');
+        setMobileNewChatOpen(true);
+        return;
+      }
+
+      const entry = visibleLocalProjectMap.get(project.projectKey);
+      if (!entry) return;
+      handleSelectedLocalProjectChange({
+        machineId: entry.machineId,
+        localProjectId: entry.project.id,
+      });
+      setContextType('local');
+      setMobileNewChatOpen(true);
+    },
+    [handleSelectedLocalProjectChange, visibleLocalProjectMap]
+  );
   /* Pull-to-refresh on the mobile home list. Drives a manual catch-up
      via `runtime.repo.sync()` — the same path the SSE reconnect loop
      uses, just user-initiated. Swallow errors here so a flaky network
@@ -6327,6 +6347,10 @@ function WorkspaceChatLanding({
             archiveToggleLabel: t('chat.mobileHome.archiveToggleLabel', '归档'),
             filterBarToggleLabel: t('chat.mobileHome.filterBarToggleLabel', '过滤器'),
             newChatAriaLabel: t('chat.mobileHome.newChatAriaLabel', '新建对话'),
+            newChatInProjectAriaLabel: (projectLabel) =>
+              t('chat.mobileHome.newChatInProjectAriaLabel', '在 {{projectLabel}} 中新建对话', {
+                projectLabel,
+              }),
             searchAriaLabel: t('common.search', '搜索'),
             clearSearchAriaLabel: t('common.clear', '清空'),
             /* The home screen otherwise falls back to hard-coded
@@ -6408,6 +6432,7 @@ function WorkspaceChatLanding({
           onChatTogglePin={handleMobileChatTogglePin}
           onChatArchive={handleMobileChatArchive}
           onChatRestore={handleMobileChatRestore}
+          onNewChatInProject={handleMobileNewChatInProject}
           onChatPermanentDelete={handleMobileChatPermanentDelete}
           onSettingsOpen={() => {
             void navigate({
diff --git a/packages/components/src/components/mobile/mobile-chat-list.tsx b/packages/components/src/components/mobile/mobile-chat-list.tsx
index 4e9d8a3b6..77317b356 100644
--- a/packages/components/src/components/mobile/mobile-chat-list.tsx
+++ b/packages/components/src/components/mobile/mobile-chat-list.tsx
@@ -7,6 +7,7 @@ import {
   FolderOpen,
   LockKeyhole,
   MessageCircle,
+  SquarePen,
 } from 'lucide-react';
 import { useAtomValue, useSetAtom } from 'jotai';
 import { useTranslation } from 'react-i18next';
@@ -333,6 +334,23 @@ function NoProjectBucketLeading() {
   );
 }
 
+function ProjectNewChatButton({ label, onClick }: { label: string; onClick: () => void }) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      aria-label={label}
+      className={cn(
+        'inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full',
+        'text-muted-foreground transition-colors active:scale-[0.97] active:bg-muted',
+        'hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring/30'
+      )}
+    >
+      <SquarePen className="h-4 w-4" strokeWidth={1.8} aria-hidden="true" />
+    </button>
+  );
+}
+
 /* Shared selection-state shape that `MobileChatList` builds once at
    the top and forwards down through `MobileChatListCard` to each
    `ConversationRow`. Lifting the state up here means "select all"
@@ -806,6 +824,8 @@ export function MobileChatList({
   privateLabel,
   privateHelpAriaLabel,
   onPrivateHelp,
+  onNewChatInProject,
+  newChatInProjectAriaLabel,
 }: {
   chats: MobileConversationItem[];
   groupBy?: MobileChatGroupBy;
@@ -844,6 +864,10 @@ export function MobileChatList({
   privateLabel?: string;
   privateHelpAriaLabel?: string;
   onPrivateHelp?: () => void;
+  /** Adds a compose action to each local/GitHub project heading while
+      grouping by project. Chat-only, pinned, and date headings omit it. */
+  onNewChatInProject?: (project: { kind: 'local' | 'github'; projectKey: string }) => void;
+  newChatInProjectAriaLabel?: (projectLabel: string) => string;
   /** @deprecated Conversation rows are single-line; branch/project meta
      is no longer shown. Kept for call-site compatibility. */
   rowSecondaryField?: 'branch' | 'project';
@@ -1073,6 +1097,25 @@ export function MobileChatList({
           labeledItem != null &&
           (labeledItem.kind === 'local' ||
             (labeledItem.kind !== 'github' && !labeledItem.projectAvatarUrl));
+        const projectKind = labeledItem?.kind;
+        const projectKey = labeledItem?.projectKey;
+        const projectNewChat =
+          !selectionToolbarActive &&
+          onNewChatInProject &&
+          (projectKind === 'local' || projectKind === 'github') &&
+          projectKey ? (
+            <ProjectNewChatButton
+              label={newChatInProjectAriaLabel?.(heading) ?? `New chat in ${heading}`}
+              onClick={() => onNewChatInProject({ kind: projectKind, projectKey })}
+            />
+          ) : null;
+        const projectTrailing =
+          trailing || projectNewChat ? (
+            <div className="flex items-center gap-0.5">
+              {trailing}
+              {projectNewChat}
+            </div>
+          ) : undefined;
 
         let groupedHeadingNode: ReactNode;
         if (id === PINNED_BUCKET_ID || groupBy === 'date' || groupBy === 'none') {
@@ -1107,7 +1150,7 @@ export function MobileChatList({
               expanded={expanded}
               onToggle={onToggle}
               compactTop={compactTop}
-              trailing={trailing}
+              trailing={projectTrailing}
               isPrivate={labeledItem.isPrivateProject}
               privateLabel={privateLabel}
               privateHelpAriaLabel={privateHelpAriaLabel}
diff --git a/packages/components/src/components/mobile/mobile-home-screen.tsx b/packages/components/src/components/mobile/mobile-home-screen.tsx
index 116c1612c..b8a6c2265 100644
--- a/packages/components/src/components/mobile/mobile-home-screen.tsx
+++ b/packages/components/src/components/mobile/mobile-home-screen.tsx
@@ -355,6 +355,8 @@ export type MobileHomeScreenLabels = {
   emptySearch?: string;
   /** ARIA label for the standalone new-conversation chip in the dock. */
   newChatAriaLabel?: string;
+  /** ARIA label for a project heading's compose action. */
+  newChatInProjectAriaLabel?: (projectLabel: string) => string;
   conversationCount?: (count: number) => string;
 };
 
@@ -458,6 +460,8 @@ export type MobileHomeScreenProps = {
   /** Restore (un-archive) a chat from the swipe-to-reveal drawer shown
      on rows of the *archived* Chat list. */
   onChatRestore?: (chatId: string) => void;
+  /** Starts a new chat with the selected project preconfigured. */
+  onNewChatInProject?: (project: { kind: 'local' | 'github'; projectKey: string }) => void;
   /** Hands a batch of chat ids to the parent for *permanent* deletion.
      Only invoked from the multi-select toolbar shown in the archive
      view's selection mode. The list itself owns the selection +
@@ -706,6 +710,7 @@ function HeaderSearchInput({
   placeholder,
   ariaLabel,
   clearAriaLabel,
+  trailing,
   className,
 }: {
   value: string;
@@ -713,10 +718,11 @@ function HeaderSearchInput({
   placeholder: string;
   ariaLabel: string;
   clearAriaLabel: string;
+  trailing?: ReactNode;
   className?: string;
 }) {
   return (
-    <label
+    <div
       className={cn(
         'mobile-home-header-search flex h-9 w-full min-w-0 items-center gap-1.5 rounded-full border border-border/50 bg-muted px-3 text-foreground',
         'dark:border-white/12 dark:bg-white/10',
@@ -750,13 +756,14 @@ function HeaderSearchInput({
           <X className="h-3.5 w-3.5" strokeWidth={1.8} aria-hidden="true" />
         </button>
       ) : null}
-    </label>
+      {trailing}
+    </div>
   );
 }
 
-/* Chat-list filter toggle — lives on the first group heading's trailing
-   edge (not next to search). Active tint when the pill bar is open; a
-   small primary dot marks applied filters while the bar is collapsed. */
+/* Chat-list filter toggle — lives inside the header search field because
+   search and filters both narrow the visible conversations. A small primary
+   dot marks applied filters while the pill bar is collapsed. */
 function ChatListFilterToggle({
   open,
   hasActiveFilters,
@@ -775,13 +782,11 @@ function ChatListFilterToggle({
       aria-label={ariaLabel}
       aria-pressed={open}
       className={cn(
-        'relative inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full border',
-        'border-border/50 bg-muted text-muted-foreground',
-        'dark:border-white/12 dark:bg-white/10',
+        'relative -mr-2 inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-muted-foreground',
         'transition-colors active:scale-[0.97]',
-        'hover:bg-muted/80 hover:text-foreground dark:hover:bg-white/14',
+        'hover:bg-background/60 hover:text-foreground',
         'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring/30',
-        open && 'border-primary/40 bg-primary/15 text-primary'
+        open && 'bg-primary/15 text-primary'
       )}
     >
       <CarbonSettingsAdjust className="h-4 w-4 text-current" aria-hidden="true" />
@@ -1275,6 +1280,7 @@ export function MobileHomeScreen({
   onChatArchive,
   onChatRestore,
   onChatPermanentDelete,
+  onNewChatInProject,
   onSettingsOpen,
   onNewChat,
   onDownloadClient,
@@ -1495,6 +1501,16 @@ export function MobileHomeScreen({
                   placeholder={searchPlaceholder}
                   ariaLabel={searchAriaLabel}
                   clearAriaLabel={clearSearchAriaLabel}
+                  trailing={
+                    selectedTab === 'chat' && chatFilterPills && chatFilterPills.length > 0 ? (
+                      <ChatListFilterToggle
+                        open={chatFiltersOpen}
+                        hasActiveFilters={hasActiveChatFilters}
+                        ariaLabel={labels.filterBarToggleLabel ?? '过滤器'}
+                        onToggle={() => setChatFiltersOpen((open) => !open)}
+                      />
+                    ) : undefined
+                  }
                 />
               ) : null}
             </div>
@@ -1675,16 +1691,7 @@ export function MobileHomeScreen({
                     onPermanentDelete={showArchived ? onChatPermanentDelete : undefined}
                     hasActiveFilters={hasActiveChatFilters}
                     onClearFilters={onClearChatFilters}
-                    firstGroupTrailing={
-                      chatFilterPills && chatFilterPills.length > 0 ? (
-                        <ChatListFilterToggle
-                          open={chatFiltersOpen}
-                          hasActiveFilters={hasActiveChatFilters}
-                          ariaLabel={labels.filterBarToggleLabel ?? '过滤器'}
-                          onToggle={() => setChatFiltersOpen((open) => !open)}
-                        />
-                      ) : undefined
-                    }
+                    onNewChatInProject={onNewChatInProject}
                     onPrivateHelp={() => setPrivateHelpOpen(true)}
                   />
                 )
@@ -2203,7 +2210,7 @@ function ChatsFlatView({
   onPermanentDelete,
   hasActiveFilters = false,
   onClearFilters,
-  firstGroupTrailing,
+  onNewChatInProject,
   onPrivateHelp,
 }: {
   chats: MobileConversationItem[];
@@ -2220,9 +2227,7 @@ function ChatsFlatView({
      state to the "filters hid everything" copy + Clear filters button. */
   hasActiveFilters?: boolean;
   onClearFilters?: () => void;
-  /** Filter chip mounted on the first group heading (or a trailing-only
-     row when the list is empty / flat with no heading). */
-  firstGroupTrailing?: ReactNode;
+  onNewChatInProject?: (project: { kind: 'local' | 'github'; projectKey: string }) => void;
   onPrivateHelp: () => void;
 }) {
   const visible = useMemo(() => {
@@ -2243,22 +2248,12 @@ function ChatsFlatView({
       </TabEmptyStateButton>
     ) : undefined;
 
-  /* Empty states still need the filter chip so the user can open the
-     bar / clear filters without a group heading to host it. */
-  const emptyTrailing =
-    firstGroupTrailing != null ? (
-      <div className="flex w-full items-center justify-end px-4 pb-1.5 pt-2">
-        {firstGroupTrailing}
-      </div>
-    ) : null;
-
   if (chats.length === 0) {
     /* `chats` is already filtered by the caller, so an empty list with
        active filters means the filters hid everything (vs. a workspace
        with no conversations at all). */
     return (
       <section aria-label={labels.chatTab ?? 'Chat'} className="flex flex-col">
-        {emptyTrailing}
         <TabEmptyState
           label={
             hasActiveFilters
@@ -2273,7 +2268,6 @@ function ChatsFlatView({
   if (query && visible.length === 0) {
     return (
       <section aria-label={labels.chatTab ?? 'Chat'} className="flex flex-col">
-        {emptyTrailing}
         <TabEmptyState label={labels.emptySearch ?? '没有匹配的结果'} action={clearFiltersAction} />
       </section>
     );
@@ -2292,7 +2286,6 @@ function ChatsFlatView({
         /* Active list is flat — no "全部对话" section label. Only the
            archived surface keeps a heading so the mode is obvious. */
         flatHeading={archived ? (labels.archivedChatsHeading ?? '归档对话') : undefined}
-        firstGroupTrailing={firstGroupTrailing}
         onSelect={onSelect}
         rowActions={{ onTogglePin, onArchive, onRestore }}
         archived={archived}
@@ -2301,6 +2294,8 @@ function ChatsFlatView({
         privateLabel={labels.privateLabel}
         privateHelpAriaLabel={labels.privateHelpAriaLabel}
         onPrivateHelp={onPrivateHelp}
+        onNewChatInProject={onNewChatInProject}
+        newChatInProjectAriaLabel={labels.newChatInProjectAriaLabel}
       />
     </section>
   );
diff --git a/packages/components/src/components/mobile/mobile-project-screen.tsx b/packages/components/src/components/mobile/mobile-project-screen.tsx
index 9e5625288..8ac0b1aa5 100644
--- a/packages/components/src/components/mobile/mobile-project-screen.tsx
+++ b/packages/components/src/components/mobile/mobile-project-screen.tsx
@@ -776,6 +776,16 @@ export function MobileProjectScreen({
             onBack={onBack}
             searchQuery={searchQuery}
             onSearchChange={setSearchQuery}
+            filterToggle={
+              hasFilterPills ? (
+                <ProjectListFilterToggle
+                  open={filtersOpen}
+                  hasActiveFilters={hasActiveProjectFilters}
+                  ariaLabel={labels.filterBarToggleLabel ?? '过滤器'}
+                  onToggle={() => setFiltersOpen((open) => !open)}
+                />
+              ) : undefined
+            }
             showArchived={showArchived}
             onShowArchivedToggle={onShowArchivedToggle}
           />
@@ -795,8 +805,8 @@ export function MobileProjectScreen({
           />
         )}
 
-        {/* Filter pill bar — toggled from the first group heading's
-           trailing chip (mirrors home Chat). Unmounted on Files /
+        {/* Filter pill bar — toggled from the search field's trailing
+           control (mirrors home Chat). Unmounted on Files /
            Settings so those tabs stay free of conversation chrome. */}
         <AnimatePresence initial={false}>
           {selectedProjectTab === 'chat' && filtersOpen && hasFilterPills && filterPills ? (
@@ -825,19 +835,7 @@ export function MobileProjectScreen({
         >
           {selectedProjectTab === 'chat' ? (
             visibleConversations.length === 0 ? (
-              <>
-                {hasFilterPills ? (
-                  <div className="flex w-full items-center justify-end px-4 pb-1.5 pt-2">
-                    <ProjectListFilterToggle
-                      open={filtersOpen}
-                      hasActiveFilters={hasActiveProjectFilters}
-                      ariaLabel={labels.filterBarToggleLabel ?? '过滤器'}
-                      onToggle={() => setFiltersOpen((open) => !open)}
-                    />
-                  </div>
-                ) : null}
-                <ProjectEmptyState label={labels.emptyConversations ?? '没有匹配的对话'} />
-              </>
+              <ProjectEmptyState label={labels.emptyConversations ?? '没有匹配的对话'} />
             ) : (
               <MobileChatList
                 chats={visibleConversations}
@@ -857,16 +855,6 @@ export function MobileProjectScreen({
                     ? (labels.archivedConversationsHeading ?? '归档对话')
                     : undefined
                 }
-                firstGroupTrailing={
-                  hasFilterPills ? (
-                    <ProjectListFilterToggle
-                      open={filtersOpen}
-                      hasActiveFilters={hasActiveProjectFilters}
-                      ariaLabel={labels.filterBarToggleLabel ?? '过滤器'}
-                      onToggle={() => setFiltersOpen((open) => !open)}
-                    />
-                  ) : undefined
-                }
                 selectedConversationId={selectedConversationId}
                 onSelect={onConversationSelect}
                 rowActions={{
@@ -978,8 +966,7 @@ function ProjectTabPlaceholder({
 /* Chat-tab project header — one chrome row matching home:
    back | compact project mark | search (fills the blank) | archive.
    The full display name is no longer a centered title; the mark +
-   search placeholder keep context. Filter lives on the first group
-   heading (not here). */
+   search placeholder keep context. Filter lives inside search. */
 function ProjectChatTopBar({
   project,
   displayName,
@@ -987,6 +974,7 @@ function ProjectChatTopBar({
   onBack,
   searchQuery,
   onSearchChange,
+  filterToggle,
   showArchived,
   onShowArchivedToggle,
 }: {
@@ -996,6 +984,7 @@ function ProjectChatTopBar({
   onBack: () => void;
   searchQuery: string;
   onSearchChange: (next: string) => void;
+  filterToggle?: ReactNode;
   showArchived: boolean;
   onShowArchivedToggle?: () => void;
 }) {
@@ -1012,7 +1001,12 @@ function ProjectChatTopBar({
       <span className="sr-only">{displayName}</span>
       <ProjectAvatar project={project} />
       <div className="min-w-0 flex-1">
-        <ProjectSearchInput value={searchQuery} onChange={onSearchChange} labels={labels} />
+        <ProjectSearchInput
+          value={searchQuery}
+          onChange={onSearchChange}
+          labels={labels}
+          trailing={filterToggle}
+        />
       </div>
       {onShowArchivedToggle ? (
         <HeaderChip
@@ -1112,8 +1106,7 @@ function HeaderChip({
   );
 }
 
-/* Filter chip on the first group heading — same look as the home Chat
-   list filter toggle. */
+/* Filter control embedded in the project search field. */
 function ProjectListFilterToggle({
   open,
   hasActiveFilters,
@@ -1132,13 +1125,11 @@ function ProjectListFilterToggle({
       aria-label={ariaLabel}
       aria-pressed={open}
       className={cn(
-        'relative inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full border',
-        'border-border/50 bg-muted text-muted-foreground',
-        'dark:border-white/12 dark:bg-white/10',
+        'relative -mr-2 inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-muted-foreground',
         'transition-colors active:scale-[0.97]',
-        'hover:bg-muted/80 hover:text-foreground dark:hover:bg-white/14',
+        'hover:bg-background/60 hover:text-foreground',
         'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring/30',
-        open && 'border-primary/40 bg-primary/15 text-primary'
+        open && 'bg-primary/15 text-primary'
       )}
     >
       <CarbonSettingsAdjust className="h-4 w-4 text-current" aria-hidden="true" />
@@ -1189,13 +1180,15 @@ function ProjectSearchInput({
   value,
   onChange,
   labels,
+  trailing,
 }: {
   value: string;
   onChange: (next: string) => void;
   labels: MobileProjectScreenLabels;
+  trailing?: ReactNode;
 }) {
   return (
-    <label
+    <div
       className={cn(
         'flex h-9 w-full min-w-0 items-center gap-1.5 rounded-full border border-border/50 bg-muted px-3 text-foreground',
         'dark:border-white/12 dark:bg-white/10',
@@ -1226,7 +1219,8 @@ function ProjectSearchInput({
           <X className="h-3.5 w-3.5" strokeWidth={1.8} aria-hidden="true" />
         </button>
       ) : null}
-    </label>
+      {trailing}
+    </div>
   );
 }
 
diff --git a/packages/components/src/stories/MobileChatList.stories.tsx b/packages/components/src/stories/MobileChatList.stories.tsx
index 9bcdadddc..729b34747 100644
--- a/packages/components/src/stories/MobileChatList.stories.tsx
+++ b/packages/components/src/stories/MobileChatList.stories.tsx
@@ -292,6 +292,8 @@ function StoryShell({
             setSelectedId(id);
             fn()(id);
           }}
+          onNewChatInProject={fn()}
+          newChatInProjectAriaLabel={(projectLabel) => `在 ${projectLabel} 中新建对话`}
           rowActions={actions}
           /* In archived mode, swipe delete + multi-select both route
              through this; remove the confirmed ids from the mock list. */
diff --git a/packages/components/src/stories/MobileHomeScreen.stories.tsx b/packages/components/src/stories/MobileHomeScreen.stories.tsx
index 5883a9907..f4077de93 100644
--- a/packages/components/src/stories/MobileHomeScreen.stories.tsx
+++ b/packages/components/src/stories/MobileHomeScreen.stories.tsx
@@ -272,6 +272,7 @@ function MobileHomeScreenStory({
             chatTab: 'Chat',
             settingsTab: '设置',
             newChatAriaLabel: '新建对话',
+            newChatInProjectAriaLabel: (projectLabel) => `在 ${projectLabel} 中新建对话`,
             recentProjectsHeading: '最近常用',
             allLocalProjectsHeading: '全部项目',
             allGitHubReposHeading: '全部仓库',
@@ -291,6 +292,7 @@ function MobileHomeScreenStory({
           onLocalProjectSelect={fn()}
           onGitHubRepositorySelect={fn()}
           onChatSelect={fn()}
+          onNewChatInProject={fn()}
           onSettingsOpen={fn()}
           onNewChat={fn()}
           onDownloadClient={fn()}
diff --git a/packages/components/tests/mobile-chat-list-project-actions.test.tsx b/packages/components/tests/mobile-chat-list-project-actions.test.tsx
new file mode 100644
index 000000000..c4d2e7ccf
--- /dev/null
+++ b/packages/components/tests/mobile-chat-list-project-actions.test.tsx
@@ -0,0 +1,92 @@
+// @vitest-environment jsdom
+
+import React from 'react';
+import { flushSync } from 'react-dom';
+import { createRoot, type Root } from 'react-dom/client';
+import { createStore, Provider } from 'jotai';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { MobileChatList } from '../src/components/mobile/mobile-chat-list';
+import type { MobileConversationItem } from '../src/components/mobile/mobile-project-screen';
+import { initI18n } from '../src/i18n';
+
+const chats: MobileConversationItem[] = [
+  {
+    id: 'local-chat',
+    title: 'Local chat',
+    kind: 'local',
+    projectKey: 'machine:project',
+    projectLabel: 'Local project',
+  },
+  {
+    id: 'github-chat',
+    title: 'GitHub chat',
+    kind: 'github',
+    projectKey: 'lody-ai/lody',
+    projectLabel: 'lody-ai/lody',
+  },
+  { id: 'plain-chat', title: 'Plain chat', kind: 'chat' },
+];
+
+describe('mobile chat project group actions', () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(async () => {
+    await initI18n('en');
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(() => {
+    flushSync(() => root.unmount());
+    container.remove();
+  });
+
+  it('renders a compose action for each project bucket and reports its target', () => {
+    const onNewChatInProject = vi.fn();
+    flushSync(() => {
+      root.render(
+        <Provider store={createStore()}>
+          <MobileChatList
+            chats={chats}
+            groupBy="project"
+            onNewChatInProject={onNewChatInProject}
+            newChatInProjectAriaLabel={(label) => `New chat in ${label}`}
+          />
+        </Provider>
+      );
+    });
+
+    const localButton = container.querySelector<HTMLButtonElement>(
+      '[aria-label="New chat in Local project"]'
+    );
+    expect(localButton).not.toBeNull();
+    expect(container.querySelector('[aria-label="New chat in Chat"]')).toBeNull();
+
+    localButton?.click();
+    expect(onNewChatInProject).toHaveBeenCalledWith({
+      kind: 'local',
+      projectKey: 'machine:project',
+    });
+    expect(container.querySelector('[aria-label="New chat in lody-ai/lody"]')).not.toBeNull();
+  });
+
+  it('does not render project compose actions outside project grouping', () => {
+    flushSync(() => {
+      root.render(
+        <Provider store={createStore()}>
+          <MobileChatList
+            chats={chats}
+            groupBy="date"
+            onNewChatInProject={vi.fn()}
+            newChatInProjectAriaLabel={(label) => `New chat in ${label}`}
+          />
+        </Provider>
+      );
+    });
+
+    expect(container.querySelector('[aria-label^="New chat in "]')).toBeNull();
+  });
+});

From d3f842a8ae5c264b28a2f443a551f70e5e1d4933 Mon Sep 17 00:00:00 2001
From: spike <zvq@live.com>
Date: Wed, 2 Sep 2026 10:13:31 +0800
Subject: [PATCH 02/11] feat: simplify mobile project new chat

Model: gpt-5.4
Amp-Thread-ID: https://ampcode.com/threads/T-01a05fc2-f7bd-727a-b790-2bc84e2d239f
Co-authored-by: Amp <amp@ampcode.com>
---
 .../src/components/chat/chat-composer.tsx     |  5 +-
 .../src/components/chat/chat-landing.tsx      | 37 ++++++++++----
 .../mobile/mobile-new-chat-sheet.tsx          | 31 ++++++------
 .../stories/MobileNewChatSheet.stories.tsx    | 48 +++++++++++++------
 .../tests/chat-composer-autoresize.test.tsx   | 33 +++++++++++++
 5 files changed, 115 insertions(+), 39 deletions(-)

diff --git a/packages/components/src/components/chat/chat-composer.tsx b/packages/components/src/components/chat/chat-composer.tsx
index fac41a465..0e2fa5709 100644
--- a/packages/components/src/components/chat/chat-composer.tsx
+++ b/packages/components/src/components/chat/chat-composer.tsx
@@ -118,6 +118,8 @@ export interface ChatComposerProps {
   promptPlaceholder?: string;
   promptDisabled?: boolean;
   promptRows?: number;
+  /** Override the compact one-row minimum used by mobile session composers. */
+  mobileSessionPromptRows?: number;
   promptEnterKeyHint?: TextareaProps['enterKeyHint'];
   promptRef?: Ref<HTMLTextAreaElement>;
   pastedTextDrafts?: PastedTextDraft[];
@@ -243,6 +245,7 @@ export function ChatComposer({
   promptPlaceholder,
   promptDisabled = false,
   promptRows = 3,
+  mobileSessionPromptRows,
   promptEnterKeyHint,
   promptRef,
   pastedTextDrafts = [],
@@ -293,7 +296,7 @@ export function ChatComposer({
   // Mobile session composer starts at a single line to save vertical space
   // (desktop keeps its 2-line default); it still auto-grows as the user types.
   const singleLineMobile = isMobile && variant === 'session';
-  const effectivePromptRows = singleLineMobile ? 1 : promptRows;
+  const effectivePromptRows = singleLineMobile ? (mobileSessionPromptRows ?? 1) : promptRows;
   // Desktop-only ⌘L discovery hint in the empty composer. Requires a fine pointer
   // AND non-mobile layout so phone frames / narrow viewports never show a
   // keyboard shortcut that doesn't exist on touch. Hidden once focused or typing.
diff --git a/packages/components/src/components/chat/chat-landing.tsx b/packages/components/src/components/chat/chat-landing.tsx
index 96d917c7a..cf8e81fb1 100644
--- a/packages/components/src/components/chat/chat-landing.tsx
+++ b/packages/components/src/components/chat/chat-landing.tsx
@@ -1052,6 +1052,10 @@ function WorkspaceChatLanding({
      selectors as the desktop landing — opening it doesn't navigate,
      so the home tab list stays visible underneath. */
   const [mobileNewChatOpen, setMobileNewChatOpen] = useState(false);
+  /* A project-row or project-detail entry point already fixes the context.
+     Keep that intent separate from the selected project state: the same state
+     also powers the generic new-chat sheet, where those selectors stay open. */
+  const [mobileNewChatProjectScoped, setMobileNewChatProjectScoped] = useState(false);
 
   /* Mobile-only: controls the bottom-sheet workspace switcher launched
      from the home screen's workspace pill. Replaces the inline dropdown
@@ -5377,6 +5381,7 @@ function WorkspaceChatLanding({
       if (project.kind === 'github') {
         setSelectedRepo(project.projectKey);
         setContextType('github');
+        setMobileNewChatProjectScoped(true);
         setMobileNewChatOpen(true);
         return;
       }
@@ -5388,6 +5393,7 @@ function WorkspaceChatLanding({
         localProjectId: entry.project.id,
       });
       setContextType('local');
+      setMobileNewChatProjectScoped(true);
       setMobileNewChatOpen(true);
     },
     [handleSelectedLocalProjectChange, visibleLocalProjectMap]
@@ -6056,12 +6062,22 @@ function WorkspaceChatLanding({
       secondaryPerTypeLabel: t('chat.mobileNewChat.workdirModeLabel', '模式'),
     },
     coordinator: MobileInlinePickerCoordinator,
-    machineNode: mobileSheetMachineNode,
-    contextTypeNode: mobileSheetContextSwitchNode,
+    /* A local project owns its machine. GitHub repositories do not, so retain
+       the machine choice when it is ambiguous (or when none are online and the
+       unavailable state needs to remain visible). */
+    machineNode:
+      mobileNewChatProjectScoped &&
+      (contextType === 'local' ||
+        (mobileSheetMachineOptions.length === 1 &&
+          mobileSheetMachineOptions[0]?.value === selectedMachineId))
+        ? null
+        : mobileSheetMachineNode,
+    contextTypeNode: mobileNewChatProjectScoped ? null : mobileSheetContextSwitchNode,
     /* Project / repo on its own row; branch on its own row below
          (split per the user's design ask — chips no longer share a row
          and so don't truncate on narrow phones). */
-    perTypeNode: contextType === 'chat' ? null : mobileSheetProjectNode,
+    perTypeNode:
+      contextType === 'chat' || mobileNewChatProjectScoped ? null : mobileSheetProjectNode,
     branchNode: contextType === 'chat' ? null : mobileSheetBranchNode,
     secondaryPerTypeNode: mobileSheetWorkdirModeNode,
     composer: (
@@ -6089,6 +6105,7 @@ function WorkspaceChatLanding({
             promptPlaceholder={promptPlaceholder}
             promptDisabled={submitting}
             promptRows={4}
+            mobileSessionPromptRows={mobileNewChatProjectScoped ? 3 : undefined}
             promptEnterKeyHint={promptEnterKeyHint}
             pastedTextDrafts={submitting ? [] : pastedTextDrafts}
             onPastedTextDraftsChange={submitting ? undefined : setPastedTextDrafts}
@@ -6131,7 +6148,7 @@ function WorkspaceChatLanding({
               </Button>
             }
             autoResize
-            maxRows={6}
+            maxRows={mobileNewChatProjectScoped ? 8 : 6}
           />
         </MobileInlinePickerRowSlot>
       </ErrorBoundary>
@@ -6208,11 +6225,12 @@ function WorkspaceChatLanding({
           onConversationArchive={handleMobileChatArchive}
           onConversationRestore={handleMobileChatRestore}
           onConversationPermanentDelete={handleMobileChatPermanentDelete}
-          /* New-chat chip uses the same sheet the home page opens. The
-             sheet reads the current project context from chat-landing
-             state, so it lands preselected without needing extra
-             props. */
-          onNewChat={() => setMobileNewChatOpen(true)}
+          /* This project page fixes the new chat's context, so the sheet can
+             omit the redundant type/project scope rows. */
+          onNewChat={() => {
+            setMobileNewChatProjectScoped(true);
+            setMobileNewChatOpen(true);
+          }}
           showArchived={mobileProjectShowArchived}
           onShowArchivedToggle={() => setMobileProjectShowArchived((prev) => !prev)}
           /* The Files tab shares the project header: it renders the
@@ -6447,6 +6465,7 @@ function WorkspaceChatLanding({
             if (selectedMobileHomeTab === 'chat') {
               setContextType('chat');
             }
+            setMobileNewChatProjectScoped(false);
             setMobileNewChatOpen(true);
           }}
           showArchived={mobileHomeShowArchived}
diff --git a/packages/components/src/components/mobile/mobile-new-chat-sheet.tsx b/packages/components/src/components/mobile/mobile-new-chat-sheet.tsx
index bc15bed88..21ffeaa90 100644
--- a/packages/components/src/components/mobile/mobile-new-chat-sheet.tsx
+++ b/packages/components/src/components/mobile/mobile-new-chat-sheet.tsx
@@ -32,9 +32,9 @@ export type MobileNewChatSheetProps = {
 
 export type MobileNewChatSheetContentProps = {
   labels?: MobileNewChatSheetLabels;
-  /** Row 1: machine pill / selector. */
+  /** Row 1: machine pill / selector. Pass `null` when the entry point fixes it. */
   machineNode: ReactNode;
-  /** Row 2: project type (3-icon) pill switcher. */
+  /** Row 2: project type (3-icon) pill switcher. Pass `null` when fixed. */
   contextTypeNode: ReactNode;
   /** Row 3: the project (local) or repo (github) picker on its own
      row — branch moved to its own row below so neither chip gets
@@ -73,9 +73,9 @@ export type MobileNewChatSheetContentProps = {
 /**
  * Bottom sheet that hosts the "new chat" composer flow on mobile home.
  *
- * Layout stacks top-to-bottom per the design comp: machine → project
- * type → per-type selectors (optionally split into project+branch +
- * worktree on local) → composer (footer holds the same
+ * Layout stacks top-to-bottom per the design comp: optional machine →
+ * optional project type → per-type selectors (optionally split into
+ * project+branch + worktree on local) → composer (footer holds the same
  * `MobileSessionRunConfig` face as the in-session chat). Each row
  * carries a short label (机器 / 类型 / 项目 / 模式) so the surface reads
  * like a form rather than a tag cloud.
@@ -90,9 +90,8 @@ export function MobileNewChatSheet({
 
   return (
     <Drawer open={open} onOpenChange={onOpenChange} repositionInputs={false}>
-      {/* Adaptive height: only cap the maximum so short contexts (chat-only
-         with no per-type row) collapse to their natural height instead of
-         leaving a half-screen of empty white space below the composer. */}
+      {/* Adaptive height: only cap the maximum so every context follows its
+         actual rows and composer height without leaving blank sheet space. */}
       {/* Shift the whole drawer up by the soft-keyboard height on iOS
          Capacitor so the textarea + footer stay above the keyboard. The
          `--native-keyboard-height` CSS var is `0px` on web and Android;
@@ -226,12 +225,16 @@ export function MobileNewChatSheetContent({
              rows in / out so the surrounding stack ripples smoothly
              rather than snapping. */}
           <div className="flex flex-col pb-3 pt-1">
-            <AnimatedSheetRow alwaysOn>
-              <Row label={machineLabel}>{machineNode}</Row>
-            </AnimatedSheetRow>
-            <AnimatedSheetRow alwaysOn>
-              <Row label={contextTypeLabel}>{contextTypeNode}</Row>
-            </AnimatedSheetRow>
+            {machineNode ? (
+              <AnimatedSheetRow alwaysOn>
+                <Row label={machineLabel}>{machineNode}</Row>
+              </AnimatedSheetRow>
+            ) : null}
+            {contextTypeNode ? (
+              <AnimatedSheetRow alwaysOn>
+                <Row label={contextTypeLabel}>{contextTypeNode}</Row>
+              </AnimatedSheetRow>
+            ) : null}
             <AnimatePresence initial={false}>
               {perTypeNode ? (
                 <AnimatedSheetRow key="per-type">
diff --git a/packages/components/src/stories/MobileNewChatSheet.stories.tsx b/packages/components/src/stories/MobileNewChatSheet.stories.tsx
index b28dc8900..c576f7589 100644
--- a/packages/components/src/stories/MobileNewChatSheet.stories.tsx
+++ b/packages/components/src/stories/MobileNewChatSheet.stories.tsx
@@ -246,6 +246,7 @@ function StoryHarness({
   initialContextType = 'github' as 'local' | 'github' | 'chat',
   initialModel = 'claude-3.5-sonnet',
   modelPickerOptions = modelOptions,
+  projectScoped = false,
 }) {
   const [open, setOpen] = useState(initialOpen);
   const [contextType, setContextType] = useState<'local' | 'github' | 'chat'>(initialContextType);
@@ -276,23 +277,29 @@ function StoryHarness({
         onOpenChange={setOpen}
         coordinator={MobileInlinePickerCoordinator}
         machineNode={
-          <MobileInlinePicker
-            id="story-machine"
-            value={machine}
-            onChange={setMachine}
-            options={machineOptions}
-            ariaLabel="Machine"
-            triggerContent={
-              <>
-                <Monitor className="h-3.5 w-3.5 shrink-0 opacity-70" />
-                <span className="truncate">{machine}</span>
-              </>
-            }
-          />
+          projectScoped ? null : (
+            <MobileInlinePicker
+              id="story-machine"
+              value={machine}
+              onChange={setMachine}
+              options={machineOptions}
+              ariaLabel="Machine"
+              triggerContent={
+                <>
+                  <Monitor className="h-3.5 w-3.5 shrink-0 opacity-70" />
+                  <span className="truncate">{machine}</span>
+                </>
+              }
+            />
+          )
+        }
+        contextTypeNode={
+          projectScoped ? null : (
+            <MockContextTypeNode value={contextType} onChange={setContextType} />
+          )
         }
-        contextTypeNode={<MockContextTypeNode value={contextType} onChange={setContextType} />}
         perTypeNode={
-          contextType === 'chat' ? null : (
+          contextType === 'chat' || projectScoped ? null : (
             <div className="flex w-full items-start gap-2">
               <div className="min-w-0 flex-1">
                 {contextType === 'github' ? (
@@ -424,6 +431,17 @@ export const LocalContext: Story = {
   render: () => <StoryHarness initialContextType="local" />,
 };
 
+export const ProjectScopedLocalContext: Story = {
+  args: {
+    open: true,
+    onOpenChange: () => {},
+    machineNode: null,
+    contextTypeNode: null,
+    composer: null,
+  },
+  render: () => <StoryHarness initialContextType="local" projectScoped />,
+};
+
 export const ChatContext: Story = {
   args: {
     open: true,
diff --git a/packages/components/tests/chat-composer-autoresize.test.tsx b/packages/components/tests/chat-composer-autoresize.test.tsx
index b670fe11a..522925948 100644
--- a/packages/components/tests/chat-composer-autoresize.test.tsx
+++ b/packages/components/tests/chat-composer-autoresize.test.tsx
@@ -17,6 +17,7 @@ vi.mock('../src/components/mentions/mention-agent-role-source', async (importOri
 }));
 
 import { ChatComposer } from '../src/components/chat/chat-composer';
+import { ForceMobileLayoutProvider } from '../src/hooks/use-mobile';
 import { initI18n } from '../src/i18n';
 
 (
@@ -95,4 +96,36 @@ describe('ChatComposer auto resize', () => {
     expect(textarea?.style.height).toBe(`${elevenRowsHeight}px`);
     expect(textarea?.style.overflowY).toBe('auto');
   });
+
+  it('allows a mobile session composer to start taller than the compact default', async () => {
+    const promptRef = createRef<HTMLTextAreaElement>();
+
+    await act(async () =>
+      root.render(
+        <ForceMobileLayoutProvider force>
+          <ChatComposer
+            variant="session"
+            promptRef={promptRef}
+            promptValue=""
+            onPromptChange={() => undefined}
+            mobileSessionPromptRows={3}
+            primaryAction={null}
+            autoResize
+            maxRows={8}
+          />
+        </ForceMobileLayoutProvider>
+      )
+    );
+
+    const textarea = promptRef.current;
+    expect(textarea).toBeInstanceOf(HTMLTextAreaElement);
+    expect(textarea?.getAttribute('rows')).toBe('3');
+
+    const computed = getComputedStyle(textarea!);
+    const threeRowsHeight =
+      24 * 3 +
+      Number.parseFloat(computed.paddingTop || '0') +
+      Number.parseFloat(computed.paddingBottom || '0');
+    expect(textarea?.style.height).toBe(`${threeRowsHeight}px`);
+  });
 });

From cc929d354f95d4eaeed5a6306653487e65ff0820 Mon Sep 17 00:00:00 2001
From: spike <zvq@live.com>
Date: Wed, 2 Sep 2026 10:45:21 +0800
Subject: [PATCH 03/11] feat: focus active chat composers

Model: gpt-5.4
Co-authored-by: Amp <amp@ampcode.com>
Amp-Thread-ID: https://ampcode.com/threads/T-01a05fe5-c1cd-7323-a0cc-afdb1c9c6c89
---
 .../src/components/chat/chat-composer.tsx       |  4 ++++
 .../src/components/chat/chat-landing-view.tsx   |  1 +
 .../src/components/chat/chat-landing.tsx        | 13 +------------
 .../src/components/sessions/session-detail.tsx  | 17 +++++++++++++++++
 .../tests/chat-composer-focus.test.tsx          | 16 ++++++++++++++++
 5 files changed, 39 insertions(+), 12 deletions(-)

diff --git a/packages/components/src/components/chat/chat-composer.tsx b/packages/components/src/components/chat/chat-composer.tsx
index 0e2fa5709..f38756265 100644
--- a/packages/components/src/components/chat/chat-composer.tsx
+++ b/packages/components/src/components/chat/chat-composer.tsx
@@ -121,6 +121,8 @@ export interface ChatComposerProps {
   /** Override the compact one-row minimum used by mobile session composers. */
   mobileSessionPromptRows?: number;
   promptEnterKeyHint?: TextareaProps['enterKeyHint'];
+  /** Focus the prompt as soon as this composer is mounted. */
+  promptAutoFocus?: boolean;
   promptRef?: Ref<HTMLTextAreaElement>;
   pastedTextDrafts?: PastedTextDraft[];
   onPastedTextDraftsChange?: (drafts: PastedTextDraft[]) => void;
@@ -247,6 +249,7 @@ export function ChatComposer({
   promptRows = 3,
   mobileSessionPromptRows,
   promptEnterKeyHint,
+  promptAutoFocus = false,
   promptRef,
   pastedTextDrafts = [],
   onPastedTextDraftsChange,
@@ -900,6 +903,7 @@ export function ChatComposer({
                 disabled={promptDisabled}
                 rows={effectivePromptRows}
                 enterKeyHint={promptEnterKeyHint}
+                autoFocus={promptAutoFocus}
                 placeholder={resolvedPromptPlaceholder}
                 // While the ⌘L focus hint is shown the box is empty, so the (long)
                 // placeholder would otherwise run under the top-right ⌘L chip. Reserve
diff --git a/packages/components/src/components/chat/chat-landing-view.tsx b/packages/components/src/components/chat/chat-landing-view.tsx
index cb8a914d0..4eb1d0509 100644
--- a/packages/components/src/components/chat/chat-landing-view.tsx
+++ b/packages/components/src/components/chat/chat-landing-view.tsx
@@ -436,6 +436,7 @@ export function ChatLandingView({
         promptDisabled={submissionPending}
         promptRows={2}
         promptEnterKeyHint={promptEnterKeyHint}
+        promptAutoFocus
         pastedTextDrafts={submissionPending ? [] : pastedTextDrafts}
         onPastedTextDraftsChange={submissionPending ? undefined : onPastedTextDraftsChange}
         onMentionRangesChange={onMentionRangesChange}
diff --git a/packages/components/src/components/chat/chat-landing.tsx b/packages/components/src/components/chat/chat-landing.tsx
index cf8e81fb1..6e67a2a28 100644
--- a/packages/components/src/components/chat/chat-landing.tsx
+++ b/packages/components/src/components/chat/chat-landing.tsx
@@ -1401,18 +1401,6 @@ function WorkspaceChatLanding({
     [numberFormatter, prompt, setSessionState, t]
   );
 
-  // Auto-focus textarea on mount (desktop only)
-  const isMobileRef = useRef(isMobile);
-  isMobileRef.current = isMobile;
-  useEffect(() => {
-    const id = requestAnimationFrame(() => {
-      if (!isMobileRef.current) {
-        promptTextareaRef.current?.focus();
-      }
-    });
-    return () => cancelAnimationFrame(id);
-  }, []);
-
   // ── Apply pre-selection from search params ──
   const preSelectionKey = buildChatLandingPreSelectionKey({
     context: preSelectedContext,
@@ -6107,6 +6095,7 @@ function WorkspaceChatLanding({
             promptRows={4}
             mobileSessionPromptRows={mobileNewChatProjectScoped ? 3 : undefined}
             promptEnterKeyHint={promptEnterKeyHint}
+            promptAutoFocus
             pastedTextDrafts={submitting ? [] : pastedTextDrafts}
             onPastedTextDraftsChange={submitting ? undefined : setPastedTextDrafts}
             onMentionRangesChange={handleMentionRangesChange}
diff --git a/packages/components/src/components/sessions/session-detail.tsx b/packages/components/src/components/sessions/session-detail.tsx
index 9ff7e57af..f7ce328e0 100644
--- a/packages/components/src/components/sessions/session-detail.tsx
+++ b/packages/components/src/components/sessions/session-detail.tsx
@@ -1738,6 +1738,23 @@ const SessionDetail = ({
     },
     []
   );
+  const activeSessionReadyForInputFocus = activeSession !== null;
+
+  // Desktop conversation navigation is an intent to continue typing: focus the
+  // active composer after entering a Session or switching its conversation tab.
+  // Mobile deliberately does not do this for existing Sessions, where focus
+  // would raise the software keyboard merely from navigation. A pending child
+  // waits until its real chat surface arrives before taking focus.
+  useEffect(() => {
+    if (isMobile || !activeSessionReadyForInputFocus || activeTabIsPendingChild) {
+      return undefined;
+    }
+
+    const frameId = requestAnimationFrame(() => {
+      chatRefsMap.current.get(activeTabSessionId)?.focusInput();
+    });
+    return () => cancelAnimationFrame(frameId);
+  }, [activeSessionReadyForInputFocus, activeTabIsPendingChild, activeTabSessionId, isMobile]);
 
   const handleInsertDroppedSessionMention = useCallback(
     (droppedSessionId: string) => {
diff --git a/packages/components/tests/chat-composer-focus.test.tsx b/packages/components/tests/chat-composer-focus.test.tsx
index d9a282af7..4d3dd2ffd 100644
--- a/packages/components/tests/chat-composer-focus.test.tsx
+++ b/packages/components/tests/chat-composer-focus.test.tsx
@@ -53,6 +53,22 @@ describe('ChatComposer focusOnContainerClick', () => {
     vi.unstubAllGlobals();
   });
 
+  it('focuses the prompt when promptAutoFocus is enabled', async () => {
+    const promptRef = createRef<HTMLTextAreaElement>();
+    await act(async () => {
+      root.render(
+        createElement(ChatComposer, {
+          promptRef,
+          promptAutoFocus: true,
+          promptValue: '',
+          onPromptChange: () => undefined,
+        })
+      );
+    });
+
+    expect(document.activeElement).toBe(promptRef.current);
+  });
+
   it('focuses textarea when clicking container background with focusOnContainerClick=true', async () => {
     const promptRef = createRef<HTMLTextAreaElement>();
     await act(async () => {

From 5a6a31d217b2a68db88dfa95525f4ddfdfb7b815 Mon Sep 17 00:00:00 2001
From: spike <zvq@live.com>
Date: Wed, 2 Sep 2026 11:29:07 +0800
Subject: [PATCH 04/11] fix: start mobile new chats at three rows

Model: gpt-5.4
Amp-Thread-ID: https://ampcode.com/threads/T-01a06020-210b-770f-946e-2a7409a07824
Co-authored-by: Amp <amp@ampcode.com>
---
 packages/components/src/components/chat/chat-landing.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/components/chat/chat-landing.tsx b/packages/components/src/components/chat/chat-landing.tsx
index 6e67a2a28..02eb5d952 100644
--- a/packages/components/src/components/chat/chat-landing.tsx
+++ b/packages/components/src/components/chat/chat-landing.tsx
@@ -6093,7 +6093,7 @@ function WorkspaceChatLanding({
             promptPlaceholder={promptPlaceholder}
             promptDisabled={submitting}
             promptRows={4}
-            mobileSessionPromptRows={mobileNewChatProjectScoped ? 3 : undefined}
+            mobileSessionPromptRows={3}
             promptEnterKeyHint={promptEnterKeyHint}
             promptAutoFocus
             pastedTextDrafts={submitting ? [] : pastedTextDrafts}

From 934b7dbabff83302a5db774446b7cc62c7b6afdb Mon Sep 17 00:00:00 2001
From: spike <zvq@live.com>
Date: Wed, 2 Sep 2026 11:49:33 +0800
Subject: [PATCH 05/11] fix: remove quote marks from prompt shortcuts

Model: gpt-5.6-luna
---
 locales/en.json    | 20 ++++++++++----------
 locales/zh_CN.json | 20 ++++++++++----------
 2 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/locales/en.json b/locales/en.json
index fe4ec151b..e657ef7d5 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -599,16 +599,16 @@
   "composer.pastedTextSummary": "{{charCount}} chars · {{lineCount}} lines",
   "composer.pastedTextTitle": "Pasted text",
   "composer.promptPlaceholder.base": "",
-  "composer.promptPlaceholder.commands": "Press '/' for commands.",
-  "composer.promptPlaceholder.commandsMentions": "Press '/' for commands, '@' for mentions.",
-  "composer.promptPlaceholder.commandsMentionsSkills": "Press '/' for commands, '@' for mentions, '$' for skills.",
-  "composer.promptPlaceholder.commandsSkills": "Press '/' for commands, '$' for skills.",
-  "composer.promptPlaceholder.mentions": "Press '@' for mentions.",
-  "composer.promptPlaceholder.mentionsSkills": "Press '@' for mentions, '$' for skills.",
-  "composer.promptPlaceholder.mobile": "Press '@' for mentions.",
-  "composer.promptPlaceholder.mobileMentionsSkills": "Press '@' for mentions, '$' for skills.",
-  "composer.promptPlaceholder.mobileSkills": "Press '$' for skills.",
-  "composer.promptPlaceholder.skills": "Press '$' for skills.",
+  "composer.promptPlaceholder.commands": "Press / for commands.",
+  "composer.promptPlaceholder.commandsMentions": "Press / for commands, @ for mentions.",
+  "composer.promptPlaceholder.commandsMentionsSkills": "Press / for commands, @ for mentions, $ for skills.",
+  "composer.promptPlaceholder.commandsSkills": "Press / for commands, $ for skills.",
+  "composer.promptPlaceholder.mentions": "Press @ for mentions.",
+  "composer.promptPlaceholder.mentionsSkills": "Press @ for mentions, $ for skills.",
+  "composer.promptPlaceholder.mobile": "Press @ for mentions.",
+  "composer.promptPlaceholder.mobileMentionsSkills": "Press @ for mentions, $ for skills.",
+  "composer.promptPlaceholder.mobileSkills": "Press $ for skills.",
+  "composer.promptPlaceholder.skills": "Press $ for skills.",
   "desktopGithubInstall.openButton": "Open Lody Desktop",
   "desktopGithubInstall.opening": "Opening Lody Desktop…",
   "desktopGithubInstall.title": "Continue in Lody Desktop",
diff --git a/locales/zh_CN.json b/locales/zh_CN.json
index 06e60f18c..39046d77f 100644
--- a/locales/zh_CN.json
+++ b/locales/zh_CN.json
@@ -599,16 +599,16 @@
   "composer.pastedTextSummary": "{{charCount}} 字符 · {{lineCount}} 行",
   "composer.pastedTextTitle": "已粘贴文本",
   "composer.promptPlaceholder.base": "",
-  "composer.promptPlaceholder.commands": "按 '/' 使用命令。",
-  "composer.promptPlaceholder.commandsMentions": "按 '/' 使用命令，'@' 添加提及。",
-  "composer.promptPlaceholder.commandsMentionsSkills": "按 '/' 使用命令，'@' 添加提及，'$' 使用技能。",
-  "composer.promptPlaceholder.commandsSkills": "按 '/' 使用命令，'$' 使用技能。",
-  "composer.promptPlaceholder.mentions": "按 '@' 添加提及。",
-  "composer.promptPlaceholder.mentionsSkills": "按 '@' 添加提及，'$' 使用技能。",
-  "composer.promptPlaceholder.mobile": "按 '@' 添加提及。",
-  "composer.promptPlaceholder.mobileMentionsSkills": "按 '@' 添加提及，'$' 使用技能。",
-  "composer.promptPlaceholder.mobileSkills": "按 '$' 使用技能。",
-  "composer.promptPlaceholder.skills": "按 '$' 使用技能。",
+  "composer.promptPlaceholder.commands": "按 / 使用命令。",
+  "composer.promptPlaceholder.commandsMentions": "按 / 使用命令，@ 添加提及。",
+  "composer.promptPlaceholder.commandsMentionsSkills": "按 / 使用命令，@ 添加提及，$ 使用技能。",
+  "composer.promptPlaceholder.commandsSkills": "按 / 使用命令，$ 使用技能。",
+  "composer.promptPlaceholder.mentions": "按 @ 添加提及。",
+  "composer.promptPlaceholder.mentionsSkills": "按 @ 添加提及，$ 使用技能。",
+  "composer.promptPlaceholder.mobile": "按 @ 添加提及。",
+  "composer.promptPlaceholder.mobileMentionsSkills": "按 @ 添加提及，$ 使用技能。",
+  "composer.promptPlaceholder.mobileSkills": "按 $ 使用技能。",
+  "composer.promptPlaceholder.skills": "按 $ 使用技能。",
   "desktopGithubInstall.openButton": "打开 Lody Desktop",
   "desktopGithubInstall.opening": "正在打开 Lody Desktop…",
   "desktopGithubInstall.title": "继续使用 Lody Desktop",

From 8497c0402ba3cc9619ca949f21300cef7babc26c Mon Sep 17 00:00:00 2001
From: spike <zvq@live.com>
Date: Wed, 2 Sep 2026 12:12:57 +0800
Subject: [PATCH 06/11] feat: use native selectors in mobile new chat

Model: gpt-5.4
Amp-Thread-ID: https://ampcode.com/threads/T-01a06044-fcc0-7786-b98d-363c93e39518
Co-authored-by: Amp <amp@ampcode.com>
---
 .../src/components/chat/chat-landing.tsx      |  64 +++------
 .../src/components/mobile/AGENTS.md           |   8 +-
 .../mobile/mobile-native-select.tsx           |  85 ++++++++++++
 .../mobile/mobile-new-chat-sheet.tsx          |   4 +-
 .../stories/MobileNewChatSheet.stories.tsx    | 129 ++++++++----------
 .../tests/mobile-native-select.test.tsx       |  77 +++++++++++
 6 files changed, 245 insertions(+), 122 deletions(-)
 create mode 100644 packages/components/src/components/mobile/mobile-native-select.tsx
 create mode 100644 packages/components/tests/mobile-native-select.test.tsx

diff --git a/packages/components/src/components/chat/chat-landing.tsx b/packages/components/src/components/chat/chat-landing.tsx
index 02eb5d952..2b21930d9 100644
--- a/packages/components/src/components/chat/chat-landing.tsx
+++ b/packages/components/src/components/chat/chat-landing.tsx
@@ -309,11 +309,13 @@ import { Tabs, TabsList, TabsTrigger } from '@/ui/tabs';
 import { Folder as FolderIcon, GitBranch as GitBranchIcon } from 'lucide-react';
 import { AddLocalProjectDialogContainer } from '@/components/local-projects/add-local-project-dialog-container';
 import {
-  MobileInlinePicker,
   MobileInlinePickerCoordinator,
   MobileInlinePickerRowSlot,
-  type MobileInlinePickerOption,
 } from '@/components/mobile/mobile-inline-picker';
+import {
+  MobileNativeSelect,
+  type MobileNativeSelectOption,
+} from '@/components/mobile/mobile-native-select';
 import {
   buildChildSessionsByParent,
   buildSidebarOpenerRowResolver,
@@ -3801,23 +3803,17 @@ function WorkspaceChatLanding({
   const bottomBarNode = null;
 
   /* ── Mobile-sheet (new-chat bottom sheet) selector nodes ──
-     The sheet drives every selector through the unified
-     `MobileInlinePicker` — a chip-style trigger that expands a drawer
-     of options inline below it. We bypass the desktop selector
-     desktop selector components
-     and feed the picker raw option arrays here so the interaction +
-     animation are identical across machine / project / branch / model /
-     thinking / agent / permission. The pill switchers (类型, 模式) stay
-     as Tabs since they're already inline. */
+     Machine / project / branch use real HTML selects so touch platforms
+     present their native option picker. Complex composer run-config rows
+     retain MobileInlinePicker for search and rich option content. The pill
+     switchers (类型, 模式) stay as Tabs since they're already inline. */
 
   /* ── Machine ── */
   const mobileSheetOnlineMachines = useOnlineMachines();
-  const mobileSheetMachineOptions = useMemo<MobileInlinePickerOption<MachineId>[]>(() => {
+  const mobileSheetMachineOptions = useMemo<MobileNativeSelectOption<MachineId>[]>(() => {
     return mobileSheetOnlineMachines.map((m) => ({
       value: m.id as MachineId,
       label: m.name,
-      searchText: m.name,
-      icon: <Monitor className="h-3.5 w-3.5" strokeWidth={1.8} aria-hidden="true" />,
     }));
   }, [mobileSheetOnlineMachines]);
   const mobileSheetSelectedMachineLabel = useMemo(() => {
@@ -3825,17 +3821,13 @@ function WorkspaceChatLanding({
     return mobileSheetMachineOptions.find((opt) => opt.value === selectedMachineId)?.label ?? null;
   }, [mobileSheetMachineOptions, selectedMachineId]);
   const mobileSheetMachineNode = (
-    <MobileInlinePicker<MachineId>
-      id="mobile-sheet-machine"
+    <MobileNativeSelect<MachineId>
       value={selectedMachineId}
       onChange={(id) => handleMachineChange(id)}
       options={mobileSheetMachineOptions}
       disabled={hasNoMachine}
       loading={isInitialDataLoading}
       ariaLabel={t('chat.machineSelector.placeholder', 'Machine')}
-      emptyText={t('chat.machineSelector.emptyText', 'No machines online')}
-      searchable={mobileSheetMachineOptions.length > 5}
-      searchPlaceholder={t('chat.machineSelector.searchPlaceholder', 'Search machines')}
       triggerContent={
         <>
           <Monitor className="h-3.5 w-3.5 shrink-0 opacity-70" aria-hidden="true" />
@@ -3851,7 +3843,7 @@ function WorkspaceChatLanding({
   );
 
   /* ── Project (per context) ── */
-  const mobileSheetGitHubRepoOptions = useMemo<MobileInlinePickerOption<string>[]>(() => {
+  const mobileSheetGitHubRepoOptions = useMemo<MobileNativeSelectOption<string>[]>(() => {
     if (contextType !== 'github') return [];
     const repos = [...(repositories ?? [])].sort((a, b) =>
       compareChatLandingRepositoryByRecency(a, b, mobileSheetRecency.byRepo)
@@ -3859,12 +3851,9 @@ function WorkspaceChatLanding({
     return repos.map((repo) => ({
       value: repo.fullName,
       label: repo.fullName,
-      searchText: repo.fullName,
-      description: repo.description ?? undefined,
-      icon: <GithubIcon className="h-3.5 w-3.5" strokeWidth={1.8} aria-hidden="true" />,
     }));
   }, [contextType, repositories, mobileSheetRecency]);
-  const mobileSheetLocalProjectOptions = useMemo<MobileInlinePickerOption<string>[]>(() => {
+  const mobileSheetLocalProjectOptions = useMemo<MobileNativeSelectOption<string>[]>(() => {
     if (contextType !== 'local') return [];
     const entries = [...visibleLocalProjectMap.values()]
       .filter(
@@ -3877,9 +3866,6 @@ function WorkspaceChatLanding({
     return entries.map((entry) => ({
       value: buildLocalProjectKey(entry.machineId, entry.project.id),
       label: entry.project.name,
-      searchText: `${entry.project.name} ${entry.project.rootPath}`,
-      description: entry.project.rootPath,
-      icon: <FolderOpen className="h-3.5 w-3.5" strokeWidth={1.8} aria-hidden="true" />,
     }));
   }, [contextType, localProjectSelectorMachineId, visibleLocalProjectMap, mobileSheetRecency]);
   const mobileSheetSelectedLocalProjectKey = selectedLocalProject
@@ -3895,8 +3881,7 @@ function WorkspaceChatLanding({
   }, [mobileSheetLocalProjectOptions, mobileSheetSelectedLocalProjectKey]);
   const mobileSheetProjectNode =
     contextType === 'github' ? (
-      <MobileInlinePicker<string>
-        id="mobile-sheet-repo"
+      <MobileNativeSelect<string>
         value={selectedRepo ?? null}
         onChange={(repo) => {
           setSelectedRepo(repo);
@@ -3904,12 +3889,6 @@ function WorkspaceChatLanding({
         }}
         options={mobileSheetGitHubRepoOptions}
         ariaLabel={t('chat.repoPlaceholder', 'Repository')}
-        emptyText={t(
-          'chat.mobileHome.emptyGitHubProjects',
-          '当前 workspace 没有已授权的 GitHub 仓库'
-        )}
-        searchable={mobileSheetGitHubRepoOptions.length > 5}
-        searchPlaceholder={t('chat.mobileHome.repoSearchPlaceholder', 'Search repositories')}
         triggerContent={
           <>
             <GithubIcon className="h-3.5 w-3.5 shrink-0 opacity-70" aria-hidden="true" />
@@ -3920,8 +3899,7 @@ function WorkspaceChatLanding({
         }
       />
     ) : (
-      <MobileInlinePicker<string>
-        id="mobile-sheet-local-project"
+      <MobileNativeSelect<string>
         value={mobileSheetSelectedLocalProjectKey}
         onChange={(key) => {
           const opt = visibleLocalProjectMap.get(key);
@@ -3934,9 +3912,6 @@ function WorkspaceChatLanding({
         }}
         options={mobileSheetLocalProjectOptions}
         ariaLabel={t('chat.validation.missingProject', 'Select a project')}
-        emptyText={localProjectSelectorEmptyText}
-        searchable={mobileSheetLocalProjectOptions.length > 5}
-        searchPlaceholder={t('chat.mobileHome.localProjectSearchPlaceholder', 'Search projects')}
         triggerContent={
           <>
             <FolderOpen className="h-3.5 w-3.5 shrink-0 opacity-70" aria-hidden="true" />
@@ -3950,20 +3925,16 @@ function WorkspaceChatLanding({
     );
 
   /* ── Branch ── */
-  const mobileSheetBranchOptions = useMemo<MobileInlinePickerOption<string>[]>(
+  const mobileSheetBranchOptions = useMemo<MobileNativeSelectOption<string>[]>(
     () =>
       branchOptions.map((opt) => ({
         value: opt.value,
         label: opt.label,
-        searchText: opt.label,
-        description: opt.description,
-        icon: <GitBranchIcon className="h-3.5 w-3.5" strokeWidth={1.8} aria-hidden="true" />,
       })),
     [branchOptions]
   );
   const mobileSheetBranchNode = showBranchSelector ? (
-    <MobileInlinePicker<string>
-      id="mobile-sheet-branch"
+    <MobileNativeSelect<string>
       key={branchSelectorKey}
       value={currentBranch}
       onChange={(value) => setCurrentBranch(value)}
@@ -3972,9 +3943,6 @@ function WorkspaceChatLanding({
       loading={contextType === 'local' ? loadingLocalGitState || runtimeInitializing : false}
       loadingText={t('chat.branchLoading', { defaultValue: 'Loading branches...' })}
       ariaLabel={t('chat.branchPlaceholder', 'Branch')}
-      emptyText={t('chat.branchEmpty', { defaultValue: 'No branches found' })}
-      searchable={mobileSheetBranchOptions.length > 5}
-      searchPlaceholder={t('chat.branchSearchPlaceholder', { defaultValue: 'Search branches' })}
       triggerContent={
         <>
           <GitBranchIcon
diff --git a/packages/components/src/components/mobile/AGENTS.md b/packages/components/src/components/mobile/AGENTS.md
index f725ba58f..3124afdf9 100644
--- a/packages/components/src/components/mobile/AGENTS.md
+++ b/packages/components/src/components/mobile/AGENTS.md
@@ -225,7 +225,13 @@ embedded` lazy-imported from `../tasks/tasks-workspace.tsx` (`embedded`
   exports the legacy `MobileModelPickerLabel` helpers for any remaining chip
   faces; `mobile-fast-plan-toggles.tsx` is no longer mounted on new-chat
   (Plan/Fast live inside the run-config sheet).
-- `mobile-inline-picker.tsx` dropdown is keyboard-operable (↑/↓/Enter/Esc, desktop
+- New-chat target rows (machine, project/repository, and branch) use the backgroundless
+  `mobile-native-select.tsx` face with `ChevronsUpDown`; its transparent real `<select>`
+  owns the whole hit target so touch opens the platform option picker. Do not route these
+  rows back through the app-owned inline picker. When no enabled alternative to the
+  current value exists, hide the chevrons and disable the select; the face has no focus
+  ring. Rich run-config rows still use
+  `mobile-inline-picker.tsx`, whose dropdown is keyboard-operable (↑/↓/Enter/Esc, desktop
   search autofocus on `pointer: fine`) and **virtualizes lists >40 options** via
   `@tanstack/react-virtual` (scroll-by-index keeps the active row mounted). Its
   search filters FUZZILY and re-ranks through `lib/fuzzy-option-filter.ts`,
diff --git a/packages/components/src/components/mobile/mobile-native-select.tsx b/packages/components/src/components/mobile/mobile-native-select.tsx
new file mode 100644
index 000000000..1ff324906
--- /dev/null
+++ b/packages/components/src/components/mobile/mobile-native-select.tsx
@@ -0,0 +1,85 @@
+import { ChevronsUpDown, Loader2 } from 'lucide-react';
+import type { ReactNode } from 'react';
+
+import { cn } from '@/lib/utils';
+
+export type MobileNativeSelectOption<T extends string = string> = {
+  value: T;
+  label: string;
+  disabled?: boolean;
+};
+
+export type MobileNativeSelectProps<T extends string = string> = {
+  value: T | null | undefined;
+  onChange: (value: T) => void;
+  options: MobileNativeSelectOption<T>[];
+  triggerContent: ReactNode;
+  ariaLabel: string;
+  disabled?: boolean;
+  loading?: boolean;
+  loadingText?: ReactNode;
+  className?: string;
+};
+
+/**
+ * A visually branded trigger backed by a real HTML select. Touch platforms
+ * therefore present their system option picker instead of an app-owned menu.
+ */
+export function MobileNativeSelect<T extends string = string>({
+  value,
+  onChange,
+  options,
+  triggerContent,
+  ariaLabel,
+  disabled = false,
+  loading = false,
+  loadingText,
+  className,
+}: MobileNativeSelectProps<T>) {
+  const hasAlternative = options.some((option) => !option.disabled && option.value !== value);
+  const isInteractive = !disabled && !loading && hasAlternative;
+
+  return (
+    <div
+      className={cn(
+        'relative flex w-full select-none items-center gap-2 rounded-md px-3 py-1.5 text-left text-sm font-medium',
+        'text-foreground/85 transition-colors hover:text-foreground',
+        (disabled || loading) && 'opacity-60',
+        className
+      )}
+    >
+      <span className="flex min-w-0 flex-1 items-center gap-2">
+        {loading ? (
+          <>
+            <Loader2 className="h-3.5 w-3.5 shrink-0 animate-spin opacity-70" aria-hidden="true" />
+            {loadingText ?? triggerContent}
+          </>
+        ) : (
+          triggerContent
+        )}
+      </span>
+      {isInteractive ? (
+        <ChevronsUpDown className="h-4 w-4 shrink-0 opacity-50" aria-hidden="true" />
+      ) : null}
+      <select
+        value={value ?? ''}
+        onChange={(event) => onChange(event.target.value as T)}
+        disabled={!isInteractive}
+        aria-label={ariaLabel}
+        className={cn(
+          'absolute inset-0 h-full w-full appearance-none opacity-0 outline-none',
+          isInteractive ? 'cursor-pointer' : 'cursor-default'
+        )}
+      >
+        <option value="" disabled>
+          {ariaLabel}
+        </option>
+        {options.map((option) => (
+          <option key={option.value} value={option.value} disabled={option.disabled}>
+            {option.label}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+}
diff --git a/packages/components/src/components/mobile/mobile-new-chat-sheet.tsx b/packages/components/src/components/mobile/mobile-new-chat-sheet.tsx
index 21ffeaa90..550d80458 100644
--- a/packages/components/src/components/mobile/mobile-new-chat-sheet.tsx
+++ b/packages/components/src/components/mobile/mobile-new-chat-sheet.tsx
@@ -306,14 +306,14 @@ function AnimatedSheetRow({
    so chips render in the remaining width. The whole row is wrapped in a
    `MobileInlinePickerRowSlot` so any picker dropped inside the value
    column portals its expansion drawer into the slot rendered just
-   below the row card — full row width, escaping the chip's own column.
+   below the row — full row width, escaping the chip's own column.
    That gives the "list under the entire row" behavior the design comp
    asks for even when the row holds two side-by-side chips (e.g.
    project + branch). */
 function Row({ label, children }: { label: string; children: ReactNode }) {
   return (
     <MobileInlinePickerRowSlot>
-      <div className="flex min-w-0 items-stretch gap-3 rounded-xl bg-card px-3 py-1.5 ring-1 ring-border/60">
+      <div className="flex min-w-0 items-stretch gap-3 rounded-xl px-3 py-1.5">
         {/* Fixed-width label column so every row's value column starts
            at the same x regardless of the label's intrinsic width.
            Without this, "Machine" / "Type" / "Project" / "Branch" /
diff --git a/packages/components/src/stories/MobileNewChatSheet.stories.tsx b/packages/components/src/stories/MobileNewChatSheet.stories.tsx
index c576f7589..42509b495 100644
--- a/packages/components/src/stories/MobileNewChatSheet.stories.tsx
+++ b/packages/components/src/stories/MobileNewChatSheet.stories.tsx
@@ -18,6 +18,10 @@ import {
   MobileInlinePickerRowSlot,
   type MobileInlinePickerOption,
 } from '@/components/mobile/mobile-inline-picker';
+import {
+  MobileNativeSelect,
+  type MobileNativeSelectOption,
+} from '@/components/mobile/mobile-native-select';
 import {
   MobileModelPickerLabel,
   mobileModelPickerTriggerClassName,
@@ -37,48 +41,39 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-/* The story wires real `MobileInlinePicker`s for the row chips so the
-   drawer-from-behind animation, single-open coordination, and trigger
-   styling are screenshot-verifiable. Composer-internal chips (model /
-   thinking) still need a real `ChatComposer` to test fully; the mock
-   composer here renders just the picker triggers so we can see them
-   inline in the footer row. */
+/* The story wires native selects for the new-chat target rows and keeps
+   `MobileInlinePicker` for rich composer configuration rows. Composer-internal
+   chips still need a real `ChatComposer` to test fully; the mock composer here
+   renders just their picker triggers so we can see them in the footer row. */
 
-const machineOptions: MobileInlinePickerOption[] = [
-  { value: 'zx-macbook', label: 'zx-macbook', icon: <Monitor className="h-3.5 w-3.5" /> },
-  { value: 'lab-m2', label: 'lab-m2', icon: <Monitor className="h-3.5 w-3.5" /> },
+const machineOptions: MobileNativeSelectOption[] = [
+  { value: 'zx-macbook', label: 'zx-macbook' },
+  { value: 'lab-m2', label: 'lab-m2' },
 ];
 
-const githubRepoOptions: MobileInlinePickerOption[] = [
+const githubRepoOptions: MobileNativeSelectOption[] = [
   {
     value: 'loro-dev/lody',
     label: 'loro-dev/lody',
-    description: 'AI-native local-first coding companion',
-    icon: <Github className="h-3.5 w-3.5" />,
   },
   {
     value: 'loro-dev/loro',
     label: 'loro-dev/loro',
-    description: 'High-performance CRDT framework',
-    icon: <Github className="h-3.5 w-3.5" />,
   },
 ];
 
-const localProjectOptions: MobileInlinePickerOption[] = [
+const localProjectOptions: MobileNativeSelectOption[] = [
   {
     value: 'zx-macbook:lody',
     label: 'lody',
-    description: '~/code/lody',
-    icon: <Folder className="h-3.5 w-3.5" />,
   },
 ];
 
-const branchOptions: MobileInlinePickerOption[] = [
-  { value: 'main', label: 'main', icon: <GitBranch className="h-3.5 w-3.5" /> },
+const branchOptions: MobileNativeSelectOption[] = [
+  { value: 'main', label: 'main' },
   {
     value: 'feat/audit-mobile-coupling',
     label: 'feat/audit-mobile-coupling',
-    icon: <GitBranch className="h-3.5 w-3.5" />,
   },
 ];
 
@@ -278,8 +273,7 @@ function StoryHarness({
         coordinator={MobileInlinePickerCoordinator}
         machineNode={
           projectScoped ? null : (
-            <MobileInlinePicker
-              id="story-machine"
+            <MobileNativeSelect
               value={machine}
               onChange={setMachine}
               options={machineOptions}
@@ -299,55 +293,48 @@ function StoryHarness({
           )
         }
         perTypeNode={
-          contextType === 'chat' || projectScoped ? null : (
-            <div className="flex w-full items-start gap-2">
-              <div className="min-w-0 flex-1">
-                {contextType === 'github' ? (
-                  <MobileInlinePicker
-                    id="story-repo"
-                    value={repo}
-                    onChange={setRepo}
-                    options={githubRepoOptions}
-                    ariaLabel="Repository"
-                    triggerContent={
-                      <>
-                        <Github className="h-3.5 w-3.5 shrink-0 opacity-70" />
-                        <span className="truncate">{repo}</span>
-                      </>
-                    }
-                  />
-                ) : (
-                  <MobileInlinePicker
-                    id="story-local-project"
-                    value={localProject}
-                    onChange={setLocalProject}
-                    options={localProjectOptions}
-                    ariaLabel="Project"
-                    triggerContent={
-                      <>
-                        <Folder className="h-3.5 w-3.5 shrink-0 opacity-70" />
-                        <span className="truncate">{localProject.split(':')[1] ?? 'lody'}</span>
-                      </>
-                    }
-                  />
-                )}
-              </div>
-              <div className="min-w-0 flex-1">
-                <MobileInlinePicker
-                  id="story-branch"
-                  value={branch}
-                  onChange={setBranch}
-                  options={branchOptions}
-                  ariaLabel="Branch"
-                  triggerContent={
-                    <>
-                      <GitBranch className="h-3.5 w-3.5 shrink-0 opacity-70" />
-                      <span className="truncate">{branch}</span>
-                    </>
-                  }
-                />
-              </div>
-            </div>
+          contextType === 'chat' || projectScoped ? null : contextType === 'github' ? (
+            <MobileNativeSelect
+              value={repo}
+              onChange={setRepo}
+              options={githubRepoOptions}
+              ariaLabel="Repository"
+              triggerContent={
+                <>
+                  <Github className="h-3.5 w-3.5 shrink-0 opacity-70" />
+                  <span className="truncate">{repo}</span>
+                </>
+              }
+            />
+          ) : (
+            <MobileNativeSelect
+              value={localProject}
+              onChange={setLocalProject}
+              options={localProjectOptions}
+              ariaLabel="Project"
+              triggerContent={
+                <>
+                  <Folder className="h-3.5 w-3.5 shrink-0 opacity-70" />
+                  <span className="truncate">{localProject.split(':')[1] ?? 'lody'}</span>
+                </>
+              }
+            />
+          )
+        }
+        branchNode={
+          contextType === 'chat' ? null : (
+            <MobileNativeSelect
+              value={branch}
+              onChange={setBranch}
+              options={branchOptions}
+              ariaLabel="Branch"
+              triggerContent={
+                <>
+                  <GitBranch className="h-3.5 w-3.5 shrink-0 opacity-70" />
+                  <span className="truncate">{branch}</span>
+                </>
+              }
+            />
           )
         }
         secondaryPerTypeNode={
diff --git a/packages/components/tests/mobile-native-select.test.tsx b/packages/components/tests/mobile-native-select.test.tsx
new file mode 100644
index 000000000..bb2ff42fc
--- /dev/null
+++ b/packages/components/tests/mobile-native-select.test.tsx
@@ -0,0 +1,77 @@
+// @vitest-environment jsdom
+
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { MobileNativeSelect } from '../src/components/mobile/mobile-native-select';
+
+(
+  globalThis as typeof globalThis & { IS_REACT_ACT_ENVIRONMENT?: boolean }
+).IS_REACT_ACT_ENVIRONMENT = true;
+
+describe('MobileNativeSelect', () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(async () => {
+    await act(async () => root.unmount());
+    container.remove();
+  });
+
+  it('uses a backgroundless native select and reports native changes', async () => {
+    const onChange = vi.fn();
+    await act(async () => {
+      root.render(
+        <MobileNativeSelect
+          value="machine-1"
+          onChange={onChange}
+          options={[
+            { value: 'machine-1', label: 'Machine 1' },
+            { value: 'machine-2', label: 'Machine 2' },
+          ]}
+          triggerContent={<span>Machine 1</span>}
+          ariaLabel="Machine"
+        />
+      );
+    });
+
+    const select = container.querySelector('select');
+    expect(select).toBeInstanceOf(HTMLSelectElement);
+    expect(select?.closest('div')?.className).not.toMatch(/\bbg-/);
+    expect(container.querySelector('svg.lucide-chevrons-up-down')).not.toBeNull();
+
+    await act(async () => {
+      if (!select) return;
+      select.value = 'machine-2';
+      select.dispatchEvent(new Event('change', { bubbles: true }));
+    });
+    expect(onChange).toHaveBeenCalledWith('machine-2');
+  });
+
+  it('hides and disables selection when the current value is the only choice', async () => {
+    await act(async () => {
+      root.render(
+        <MobileNativeSelect
+          value="machine-1"
+          onChange={() => undefined}
+          options={[{ value: 'machine-1', label: 'Machine 1' }]}
+          triggerContent={<span>Machine 1</span>}
+          ariaLabel="Machine"
+        />
+      );
+    });
+
+    const select = container.querySelector('select');
+    expect(select?.disabled).toBe(true);
+    expect(select?.className).toContain('outline-none');
+    expect(container.querySelector('svg.lucide-chevrons-up-down')).toBeNull();
+    expect(select?.closest('div')?.className).not.toMatch(/\b(?:border|ring)-/);
+  });
+});

From d12f36453009a54926e262a22e22d905ae981b3d Mon Sep 17 00:00:00 2001
From: spike <zvq@live.com>
Date: Wed, 2 Sep 2026 12:39:30 +0800
Subject: [PATCH 07/11] fix: default new chats to recent local project

Model: gpt-5.4
Amp-Thread-ID: https://ampcode.com/threads/T-01a06057-7a98-716f-9605-d7060690b5ca
Co-authored-by: Amp <amp@ampcode.com>
---
 .../src/components/chat/chat-landing.tsx      | 111 +++++++++---------
 .../src/hooks/use-chat-landing-defaults.ts    |   6 +-
 .../tests/use-chat-landing-defaults.test.tsx  |  43 +++++++
 3 files changed, 103 insertions(+), 57 deletions(-)

diff --git a/packages/components/src/components/chat/chat-landing.tsx b/packages/components/src/components/chat/chat-landing.tsx
index 2b21930d9..31f23a23c 100644
--- a/packages/components/src/components/chat/chat-landing.tsx
+++ b/packages/components/src/components/chat/chat-landing.tsx
@@ -218,7 +218,10 @@ import {
   useVisibleSessionMetas,
 } from '@/hooks/use-visible-session-metas';
 import { useReportVisibleSessionsForEagerSync } from '@/hooks/use-report-visible-sessions-for-eager-sync';
-import { getLocalProjectVisibilityKey } from '@/lib/visible-local-project-index';
+import {
+  getLocalProjectVisibilityKey,
+  type VisibleLocalProjectEntry,
+} from '@/lib/visible-local-project-index';
 import { shouldShowSessionSharing } from '@/lib/session-sharing';
 import { isNativeAppShell } from '@/lib/native-platform';
 import { openExternalUrl } from '@/lib/native-browser';
@@ -243,6 +246,7 @@ import {
   UNIFIED_PROJECT_OPTION_RENDER_LIMIT,
   UnifiedProjectSelectorView,
   buildUnifiedLocalProjectOptions,
+  compareUnifiedProjectOptions,
   type LocalProjectSelection,
   type UnifiedProjectSelection,
 } from './unified-project-selector';
@@ -705,6 +709,38 @@ function WorkspaceChatLanding({
      archive toggle picks the archived list explicitly when needed
      (see `mobileHomeChats` / `mobileProjectConversations`). */
   const visibleSessions = visibleActiveSessions;
+  const projectRecency = useMemo(
+    () => getChatLandingProjectRecency(visibleSessions),
+    [visibleSessions]
+  );
+  const compareVisibleLocalProjects = useCallback(
+    (left: VisibleLocalProjectEntry, right: VisibleLocalProjectEntry) => {
+      if (isMobile) {
+        return compareChatLandingLocalProjectByRecency(left, right, projectRecency.byProject);
+      }
+      return compareUnifiedProjectOptions(
+        {
+          label: left.project.name,
+          value: left.key,
+          lastUsedAt:
+            projectRecency.byProject.get(left.key) ??
+            left.project.lastOpenedAtMs ??
+            left.project.createdAtMs ??
+            undefined,
+        },
+        {
+          label: right.project.name,
+          value: right.key,
+          lastUsedAt:
+            projectRecency.byProject.get(right.key) ??
+            right.project.lastOpenedAtMs ??
+            right.project.createdAtMs ??
+            undefined,
+        }
+      );
+    },
+    [isMobile, projectRecency.byProject]
+  );
   const liveSessionStatuses = useMemo(() => {
     const next = new Map<string, SessionStatus>();
     for (const session of visibleAllActiveSessions) {
@@ -929,24 +965,12 @@ function WorkspaceChatLanding({
     return machineId && machines.has(machineId) ? machineId : null;
   }, [localProbeResult?.machineId, machines]);
 
-  const isOwnVisibleMachine = useCallback(
-    (machineId: MachineId) => {
-      if (visibleLocalMachineId === machineId) return true;
-      const access = accessByMachineId.get(machineId);
-      return Boolean(userId && access?.ownerUserId === userId);
-    },
-    [accessByMachineId, userId, visibleLocalMachineId]
-  );
-
   const hasLocalProjects = visibleLocalProjectMap.size > 0;
   const localProjectCount = visibleLocalProjectMap.size;
 
   // ── Context type (Local Projects vs GitHub Worktrees) ──
   const [contextType, setContextType] = useState<SessionContextType>(
-    () =>
-      preSelectedContext ??
-      readChatLandingDefaults(workspaceId)?.contextType ??
-      (isMobile ? 'github' : 'chat')
+    () => preSelectedContext ?? readChatLandingDefaults(workspaceId)?.contextType ?? 'local'
   );
   const analyticsProjectKind = contextType === 'chat' ? null : contextType;
 
@@ -1249,17 +1273,17 @@ function WorkspaceChatLanding({
   );
   const getFirstVisibleLocalProjectForMachine = useCallback(
     (machineId: MachineId): LocalProjectSelection | null => {
-      for (const entry of visibleLocalProjectMap.values()) {
-        if (entry.machineId === machineId) {
-          return {
-            machineId,
+      const entry = [...visibleLocalProjectMap.values()]
+        .filter((candidate) => candidate.machineId === machineId)
+        .sort(compareVisibleLocalProjects)[0];
+      return entry
+        ? {
+            machineId: entry.machineId,
             localProjectId: entry.project.id,
-          };
-        }
-      }
-      return null;
+          }
+        : null;
     },
-    [visibleLocalProjectMap]
+    [compareVisibleLocalProjects, visibleLocalProjectMap]
   );
   const handleSelectedLocalBranchChange = useCallback((nextBranch: string | null) => {
     const currentProject = selectedLocalProjectRef.current;
@@ -1523,7 +1547,7 @@ function WorkspaceChatLanding({
     if (localProjectAvailability !== 'unavailable') return;
     toast.error(t('sidebar.localProjects.forbidden', 'Local project is not available'));
     handleSelectedLocalProjectChange(null);
-    setContextType(hasGitHubRepos ? 'github' : 'chat');
+    setContextType(hasLocalProjects ? 'local' : hasGitHubRepos ? 'github' : 'chat');
   }, [
     contextType,
     accessByMachineId,
@@ -1536,6 +1560,7 @@ function WorkspaceChatLanding({
     visibleLocalProjectAccess,
     visibleLocalProjectsLoading,
     isMetaRoomFirstSyncPending,
+    hasLocalProjects,
     hasGitHubRepos,
     t,
     handleSelectedLocalProjectChange,
@@ -2117,36 +2142,17 @@ function WorkspaceChatLanding({
   useEffect(() => {
     if (!defaultsReady) return;
     if (contextType !== 'local' || selectedLocalProject) return;
-    if (selectedMachineId) {
-      const machineProject = getFirstVisibleLocalProjectForMachine(selectedMachineId);
-      if (machineProject) {
-        handleSelectedLocalProjectChange(machineProject);
-      }
-      return;
-    }
-    // Bias the default to an own-machine project when one exists, falling
-    // back to the first shared project so teammates still get a selection.
-    let fallback: { machineId: MachineId; localProjectId: LocalProjectId } | null = null;
-    for (const entry of visibleLocalProjectMap.values()) {
-      const candidate = {
-        machineId: entry.machineId,
-        localProjectId: entry.project.id,
-      };
-      if (isOwnVisibleMachine(entry.machineId)) {
-        handleSelectedLocalProjectChange(candidate);
-        return;
-      }
-      if (!fallback) fallback = candidate;
-    }
-    if (fallback) {
-      handleSelectedLocalProjectChange(fallback);
+    const firstProject = [...visibleLocalProjectMap.values()].sort(compareVisibleLocalProjects)[0];
+    if (firstProject) {
+      handleSelectedLocalProjectChange({
+        machineId: firstProject.machineId,
+        localProjectId: firstProject.project.id,
+      });
     }
   }, [
     contextType,
     defaultsReady,
-    getFirstVisibleLocalProjectForMachine,
-    isOwnVisibleMachine,
-    selectedMachineId,
+    compareVisibleLocalProjects,
     visibleLocalProjectMap,
     selectedLocalProject,
     handleSelectedLocalProjectChange,
@@ -3434,10 +3440,7 @@ function WorkspaceChatLanding({
       </div>
     ) : null;
 
-  const mobileSheetRecency = useMemo(
-    () => getChatLandingProjectRecency(visibleSessions),
-    [visibleSessions]
-  );
+  const mobileSheetRecency = projectRecency;
 
   const desktopProjectSelection = useMemo<UnifiedProjectSelection>(() => {
     if (contextType === 'local' && selectedLocalProject) {
diff --git a/packages/components/src/hooks/use-chat-landing-defaults.ts b/packages/components/src/hooks/use-chat-landing-defaults.ts
index 62d79f136..742f2c82c 100644
--- a/packages/components/src/hooks/use-chat-landing-defaults.ts
+++ b/packages/components/src/hooks/use-chat-landing-defaults.ts
@@ -100,9 +100,9 @@ export function useChatLandingDefaults({
   if (workspaceId && restoredContextTypeWorkspaceId !== workspaceId) {
     setRestoredContextTypeWorkspaceId(workspaceId);
     if (shouldRestoreContextType) {
-      const storedContextType = readChatLandingDefaults(workspaceId)?.contextType;
-      if (storedContextType && storedContextType !== contextType) {
-        setContextType(storedContextType);
+      const preferredContextType = readChatLandingDefaults(workspaceId)?.contextType ?? 'local';
+      if (preferredContextType !== contextType) {
+        setContextType(preferredContextType);
       }
     }
   }
diff --git a/packages/components/tests/use-chat-landing-defaults.test.tsx b/packages/components/tests/use-chat-landing-defaults.test.tsx
index 357361803..a5f3c9fe7 100644
--- a/packages/components/tests/use-chat-landing-defaults.test.tsx
+++ b/packages/components/tests/use-chat-landing-defaults.test.tsx
@@ -117,6 +117,35 @@ describe('contextType restore vs auto-switch (write ping-pong regression)', () =
   let lastContextType: 'local' | 'github' | 'chat' = 'chat';
   const noop = () => {};
 
+  function DefaultContextTypeProbe() {
+    const [contextType, setContextType] = useState<'local' | 'github' | 'chat'>('chat');
+    useChatLandingDefaults({
+      workspaceId: 'ws-default-context',
+      shouldRestoreContextType: true,
+      contextType,
+      setContextType,
+      executorConfigs: [],
+      machines: new Map(),
+      selectableMachines: new Map(),
+      visibleMachinesLoading: false,
+      docMetaCacheReady: true,
+      repositories: [],
+      selectedAgent: null,
+      setSelectedAgent: noop,
+      selectedMachineId: null,
+      selectedRepo: undefined,
+      setSelectedRepo: noop,
+      selectedBranch: null,
+      setSelectedBranch: noop,
+      selectedLocalProject: null,
+      setSelectedLocalProject: noop,
+      selectedLocalBranch: null,
+      setSelectedLocalBranch: noop,
+    });
+    lastContextType = contextType;
+    return null;
+  }
+
   /* Chat landing in miniature: the defaults hook restores the stored
      contextType while the sibling auto-switch effect moves a context whose
      backing collection is empty. The two writers run under DIFFERENT
@@ -162,6 +191,20 @@ describe('contextType restore vs auto-switch (write ping-pong regression)', () =
     return null;
   }
 
+  it('defaults to local when the workspace has no stored context type', () => {
+    localStorage.clear();
+    lastContextType = 'chat';
+    const container = document.createElement('div');
+    document.body.append(container);
+    const root = createRoot(container);
+    act(() => {
+      root.render(<DefaultContextTypeProbe />);
+    });
+    expect(lastContextType).toBe('local');
+    act(() => root.unmount());
+    container.remove();
+  });
+
   it('restores once and lets the auto-switch settle instead of ping-ponging', () => {
     localStorage.clear();
     writeChatLandingDefaults('ws-oscillation', { contextType: 'local', agentId: 'agent-1' });

From 286714a8f0d8a703061d954195c813b5093d927b Mon Sep 17 00:00:00 2001
From: spike <zvq@live.com>
Date: Wed, 2 Sep 2026 12:53:00 +0800
Subject: [PATCH 08/11] fix: align mobile new chat close button

Model: gpt-5.4
Amp-Thread-ID: https://ampcode.com/threads/T-01a06072-141b-7394-b1fd-5381178ca7db
Co-authored-by: Amp <amp@ampcode.com>
---
 .../components/src/components/mobile/mobile-new-chat-sheet.tsx  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/components/mobile/mobile-new-chat-sheet.tsx b/packages/components/src/components/mobile/mobile-new-chat-sheet.tsx
index 550d80458..b22ddbcc2 100644
--- a/packages/components/src/components/mobile/mobile-new-chat-sheet.tsx
+++ b/packages/components/src/components/mobile/mobile-new-chat-sheet.tsx
@@ -167,7 +167,7 @@ export function MobileNewChatSheetContent({
             type="button"
             aria-label={closeAriaLabel}
             className={cn(
-              'absolute right-3 top-1.5 inline-flex h-9 w-9 items-center justify-center rounded-full',
+              'absolute right-3 top-1/2 inline-flex h-9 w-9 -translate-y-1/2 items-center justify-center rounded-full',
               'text-muted-foreground transition-colors hover:bg-muted/60 hover:text-foreground',
               '[-webkit-app-region:no-drag]'
             )}

From 3e59207093c9cb12d86e57b4fc9e0a64267918be Mon Sep 17 00:00:00 2001
From: spike <zvq@live.com>
Date: Wed, 2 Sep 2026 14:21:15 +0800
Subject: [PATCH 09/11] fix: keep mobile new chat selectors visible

Model: gpt-5.6-luna
---
 .../src/components/chat/chat-landing.tsx      | 38 ++++----------
 .../src/components/chat/context-switch.tsx    | 12 ++++-
 .../mobile/mobile-native-select.tsx           |  2 +-
 .../mobile/mobile-new-chat-sheet.tsx          | 44 ++++++++--------
 .../stories/MobileNewChatSheet.stories.tsx    | 50 ++++++-------------
 5 files changed, 57 insertions(+), 89 deletions(-)

diff --git a/packages/components/src/components/chat/chat-landing.tsx b/packages/components/src/components/chat/chat-landing.tsx
index 31f23a23c..a2b84c8f3 100644
--- a/packages/components/src/components/chat/chat-landing.tsx
+++ b/packages/components/src/components/chat/chat-landing.tsx
@@ -1078,10 +1078,6 @@ function WorkspaceChatLanding({
      selectors as the desktop landing — opening it doesn't navigate,
      so the home tab list stays visible underneath. */
   const [mobileNewChatOpen, setMobileNewChatOpen] = useState(false);
-  /* A project-row or project-detail entry point already fixes the context.
-     Keep that intent separate from the selected project state: the same state
-     also powers the generic new-chat sheet, where those selectors stay open. */
-  const [mobileNewChatProjectScoped, setMobileNewChatProjectScoped] = useState(false);
 
   /* Mobile-only: controls the bottom-sheet workspace switcher launched
      from the home screen's workspace pill. Replaces the inline dropdown
@@ -3985,7 +3981,7 @@ function WorkspaceChatLanding({
         onValueChange={(value) => handleWorkdirModeChange(value as WorkdirMode)}
         className="w-full"
       >
-        <TabsList className="flex h-10 w-full rounded-md bg-muted p-1">
+        <TabsList className="flex h-9 w-full rounded-md bg-muted p-1">
           <TabsTrigger value="local" className={mobileSheetWorkdirModePillTriggerClassName}>
             <FolderIcon className="h-3.5 w-3.5" aria-hidden="true" />
             <span>{t('chat.mobileNewChat.workdirLocalLabel', '本地文件')}</span>
@@ -4074,6 +4070,8 @@ function WorkspaceChatLanding({
       localLabel={t('chat.contextSwitch.localProjects', 'Local')}
       githubLabel={t('chat.contextSwitch.github', 'GitHub')}
       chatLabel={t('chat.contextSwitch.chat', 'Chat')}
+      tabsListClassName="h-9"
+      tabsTriggerClassName="py-1"
       /* The mobile new-chat sheet is a compact launcher — empty Local/GitHub tabs must
          NOT carry the desktop's
          "Open project" / "Connect GitHub" affordance, whose onClick navigates
@@ -5340,7 +5338,6 @@ function WorkspaceChatLanding({
       if (project.kind === 'github') {
         setSelectedRepo(project.projectKey);
         setContextType('github');
-        setMobileNewChatProjectScoped(true);
         setMobileNewChatOpen(true);
         return;
       }
@@ -5352,7 +5349,6 @@ function WorkspaceChatLanding({
         localProjectId: entry.project.id,
       });
       setContextType('local');
-      setMobileNewChatProjectScoped(true);
       setMobileNewChatOpen(true);
     },
     [handleSelectedLocalProjectChange, visibleLocalProjectMap]
@@ -6021,22 +6017,12 @@ function WorkspaceChatLanding({
       secondaryPerTypeLabel: t('chat.mobileNewChat.workdirModeLabel', '模式'),
     },
     coordinator: MobileInlinePickerCoordinator,
-    /* A local project owns its machine. GitHub repositories do not, so retain
-       the machine choice when it is ambiguous (or when none are online and the
-       unavailable state needs to remain visible). */
-    machineNode:
-      mobileNewChatProjectScoped &&
-      (contextType === 'local' ||
-        (mobileSheetMachineOptions.length === 1 &&
-          mobileSheetMachineOptions[0]?.value === selectedMachineId))
-        ? null
-        : mobileSheetMachineNode,
-    contextTypeNode: mobileNewChatProjectScoped ? null : mobileSheetContextSwitchNode,
+    machineNode: mobileSheetMachineNode,
+    contextTypeNode: mobileSheetContextSwitchNode,
     /* Project / repo on its own row; branch on its own row below
          (split per the user's design ask — chips no longer share a row
          and so don't truncate on narrow phones). */
-    perTypeNode:
-      contextType === 'chat' || mobileNewChatProjectScoped ? null : mobileSheetProjectNode,
+    perTypeNode: contextType === 'chat' ? null : mobileSheetProjectNode,
     branchNode: contextType === 'chat' ? null : mobileSheetBranchNode,
     secondaryPerTypeNode: mobileSheetWorkdirModeNode,
     composer: (
@@ -6108,7 +6094,7 @@ function WorkspaceChatLanding({
               </Button>
             }
             autoResize
-            maxRows={mobileNewChatProjectScoped ? 8 : 6}
+            maxRows={6}
           />
         </MobileInlinePickerRowSlot>
       </ErrorBoundary>
@@ -6185,12 +6171,9 @@ function WorkspaceChatLanding({
           onConversationArchive={handleMobileChatArchive}
           onConversationRestore={handleMobileChatRestore}
           onConversationPermanentDelete={handleMobileChatPermanentDelete}
-          /* This project page fixes the new chat's context, so the sheet can
-             omit the redundant type/project scope rows. */
-          onNewChat={() => {
-            setMobileNewChatProjectScoped(true);
-            setMobileNewChatOpen(true);
-          }}
+          /* The project stays preselected while the sheet exposes every target
+             selector, allowing the user to adjust the new chat context. */
+          onNewChat={() => setMobileNewChatOpen(true)}
           showArchived={mobileProjectShowArchived}
           onShowArchivedToggle={() => setMobileProjectShowArchived((prev) => !prev)}
           /* The Files tab shares the project header: it renders the
@@ -6425,7 +6408,6 @@ function WorkspaceChatLanding({
             if (selectedMobileHomeTab === 'chat') {
               setContextType('chat');
             }
-            setMobileNewChatProjectScoped(false);
             setMobileNewChatOpen(true);
           }}
           showArchived={mobileHomeShowArchived}
diff --git a/packages/components/src/components/chat/context-switch.tsx b/packages/components/src/components/chat/context-switch.tsx
index 8695fb5fa..61c71147e 100644
--- a/packages/components/src/components/chat/context-switch.tsx
+++ b/packages/components/src/components/chat/context-switch.tsx
@@ -26,6 +26,10 @@ interface ContextSwitchProps {
   /** When set, the github tab is disabled */
   githubDisabled?: DisabledTabOverlay;
   className?: string;
+  /** Optional sizing override for the segmented-control track. */
+  tabsListClassName?: string;
+  /** Optional sizing override for each segmented-control item. */
+  tabsTriggerClassName?: string;
   /** Override the per-trigger justify class. Defaults to `justify-center`
      so icon+label sit as a tight centered group inside each equal-width pill. */
   triggerJustifyClassName?: string;
@@ -53,6 +57,8 @@ export function ContextSwitch({
   localDisabled,
   githubDisabled,
   className,
+  tabsListClassName,
+  tabsTriggerClassName,
   triggerJustifyClassName = 'justify-center',
 }: ContextSwitchProps) {
   const isDark = tone === 'dark';
@@ -63,7 +69,8 @@ export function ContextSwitch({
     triggerJustifyClassName,
     isDark
       ? 'data-[state=active]:bg-background/95 data-[state=active]:text-foreground data-[state=active]:shadow-xs text-muted-foreground hover:text-foreground'
-      : 'data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-xs text-muted-foreground'
+      : 'data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-xs text-muted-foreground',
+    tabsTriggerClassName
   );
 
   return (
@@ -75,7 +82,8 @@ export function ContextSwitch({
       <TabsList
         className={cn(
           'flex h-10 w-full rounded-lg p-1',
-          isDark ? 'bg-card/70 border border-border/70' : 'bg-muted border border-border/40'
+          isDark ? 'bg-card/70 border border-border/70' : 'bg-muted border border-border/40',
+          tabsListClassName
         )}
       >
         {localDisabled ? (
diff --git a/packages/components/src/components/mobile/mobile-native-select.tsx b/packages/components/src/components/mobile/mobile-native-select.tsx
index 1ff324906..1dc2ffa07 100644
--- a/packages/components/src/components/mobile/mobile-native-select.tsx
+++ b/packages/components/src/components/mobile/mobile-native-select.tsx
@@ -42,7 +42,7 @@ export function MobileNativeSelect<T extends string = string>({
   return (
     <div
       className={cn(
-        'relative flex w-full select-none items-center gap-2 rounded-md px-3 py-1.5 text-left text-sm font-medium',
+        'relative flex h-9 w-full select-none items-center gap-2 rounded-md px-3 py-1 text-left text-sm font-medium',
         'text-foreground/85 transition-colors hover:text-foreground',
         (disabled || loading) && 'opacity-60',
         className
diff --git a/packages/components/src/components/mobile/mobile-new-chat-sheet.tsx b/packages/components/src/components/mobile/mobile-new-chat-sheet.tsx
index b22ddbcc2..559dacc63 100644
--- a/packages/components/src/components/mobile/mobile-new-chat-sheet.tsx
+++ b/packages/components/src/components/mobile/mobile-new-chat-sheet.tsx
@@ -32,9 +32,9 @@ export type MobileNewChatSheetProps = {
 
 export type MobileNewChatSheetContentProps = {
   labels?: MobileNewChatSheetLabels;
-  /** Row 1: machine pill / selector. Pass `null` when the entry point fixes it. */
+  /** Row 1: machine pill / selector. */
   machineNode: ReactNode;
-  /** Row 2: project type (3-icon) pill switcher. Pass `null` when fixed. */
+  /** Row 2: project type (3-icon) pill switcher. */
   contextTypeNode: ReactNode;
   /** Row 3: the project (local) or repo (github) picker on its own
      row — branch moved to its own row below so neither chip gets
@@ -73,9 +73,9 @@ export type MobileNewChatSheetContentProps = {
 /**
  * Bottom sheet that hosts the "new chat" composer flow on mobile home.
  *
- * Layout stacks top-to-bottom per the design comp: optional machine →
- * optional project type → per-type selectors (optionally split into
- * project+branch + worktree on local) → composer (footer holds the same
+ * Layout stacks top-to-bottom per the design comp: machine → project
+ * type → per-type selectors (optionally split into project+branch +
+ * worktree on local) → composer (footer holds the same
  * `MobileSessionRunConfig` face as the in-session chat). Each row
  * carries a short label (机器 / 类型 / 项目 / 模式) so the surface reads
  * like a form rather than a tag cloud.
@@ -224,17 +224,13 @@ export function MobileNewChatSheetContent({
              `AnimatePresence` + height-animated wrappers slide the
              rows in / out so the surrounding stack ripples smoothly
              rather than snapping. */}
-          <div className="flex flex-col pb-3 pt-1">
-            {machineNode ? (
-              <AnimatedSheetRow alwaysOn>
-                <Row label={machineLabel}>{machineNode}</Row>
-              </AnimatedSheetRow>
-            ) : null}
-            {contextTypeNode ? (
-              <AnimatedSheetRow alwaysOn>
-                <Row label={contextTypeLabel}>{contextTypeNode}</Row>
-              </AnimatedSheetRow>
-            ) : null}
+          <div className="flex flex-col pb-2 pt-1">
+            <AnimatedSheetRow alwaysOn>
+              <Row label={machineLabel}>{machineNode}</Row>
+            </AnimatedSheetRow>
+            <AnimatedSheetRow alwaysOn>
+              <Row label={contextTypeLabel}>{contextTypeNode}</Row>
+            </AnimatedSheetRow>
             <AnimatePresence initial={false}>
               {perTypeNode ? (
                 <AnimatedSheetRow key="per-type">
@@ -254,7 +250,7 @@ export function MobileNewChatSheetContent({
             </AnimatePresence>
           </div>
 
-          <div className="pt-1">{composer}</div>
+          <div className="pt-0.5">{composer}</div>
 
           {belowComposerNode ? (
             /* Vertical-rhythm wrapper only; the slot owns horizontal
@@ -270,10 +266,10 @@ export function MobileNewChatSheetContent({
 /* Wrapper that animates a row's mount / unmount via height accordion.
    `alwaysOn` skips the AnimatePresence-driven mount transition (for
    rows that are always rendered like machine + type) but keeps the
-   `pt-1.5` rhythm so the spacing stays consistent with the rows that
+   `pt-1` rhythm so the spacing stays consistent with the rows that
    do animate in.
 
-   We bake `pt-1.5` into the wrapper instead of using parent `gap-1.5`
+   We bake `pt-1` into the wrapper instead of using parent `gap-1`
    because gap doesn't animate with height — when a row mounts from
    height 0, the gap above it pops in instantly while the row's body
    grows, which looks jumpy. Putting the spacing inside the animated
@@ -286,7 +282,7 @@ function AnimatedSheetRow({
   alwaysOn?: boolean;
 }) {
   if (alwaysOn) {
-    return <div className="pt-1.5 first:pt-0">{children}</div>;
+    return <div className="pt-1 first:pt-0">{children}</div>;
   }
   return (
     <motion.div
@@ -296,7 +292,7 @@ function AnimatedSheetRow({
       transition={{ duration: 0.2, ease: [0.4, 0, 0.2, 1] }}
       className="overflow-hidden"
     >
-      <div className="pt-1.5">{children}</div>
+      <div className="pt-1">{children}</div>
     </motion.div>
   );
 }
@@ -313,15 +309,15 @@ function AnimatedSheetRow({
 function Row({ label, children }: { label: string; children: ReactNode }) {
   return (
     <MobileInlinePickerRowSlot>
-      <div className="flex min-w-0 items-stretch gap-3 rounded-xl px-3 py-1.5">
+      <div className="flex min-w-0 items-stretch gap-3 rounded-xl px-3 py-1">
         {/* Fixed-width label column so every row's value column starts
            at the same x regardless of the label's intrinsic width.
            Without this, "Machine" / "Type" / "Project" / "Branch" /
            "Mode" each push the value chip to a different x in
            English (Chinese labels are uniform 2 chars so it accidentally
            lined up before). `w-16` (64px) fits the longest English
-           label at 0.72rem without wrapping. */}
-        <span className="w-16 shrink-0 self-center text-[0.72rem] font-semibold tracking-wide text-muted-foreground">
+           label at 0.875rem without wrapping. */}
+        <span className="w-16 shrink-0 self-center text-sm font-semibold leading-5 text-muted-foreground">
           {label}
         </span>
         <div className="min-w-0 flex-1">{children}</div>
diff --git a/packages/components/src/stories/MobileNewChatSheet.stories.tsx b/packages/components/src/stories/MobileNewChatSheet.stories.tsx
index 42509b495..c11d2b9be 100644
--- a/packages/components/src/stories/MobileNewChatSheet.stories.tsx
+++ b/packages/components/src/stories/MobileNewChatSheet.stories.tsx
@@ -125,7 +125,7 @@ function MockContextTypeNode({
       onValueChange={(v) => onChange(v as 'local' | 'github' | 'chat')}
       className="w-full"
     >
-      <TabsList className="flex h-10 w-full rounded-md bg-muted p-1">
+      <TabsList className="flex h-9 w-full rounded-md bg-muted p-1">
         <TabsTrigger value="local" className={triggerClassName}>
           <Folder className="h-3.5 w-3.5" />
           <span>Local</span>
@@ -148,7 +148,7 @@ function MockWorkdirModeNode({ contextType }: { contextType: 'local' | 'github'
   const triggerClassName =
     'flex-1 inline-flex items-center justify-start gap-1.5 rounded-md px-2 py-1 text-sm font-medium transition-all';
   return (
-    <div className="flex h-10 w-full rounded-md bg-muted p-1">
+    <div className="flex h-9 w-full rounded-md bg-muted p-1">
       <button type="button" className={cn(triggerClassName, 'text-muted-foreground')}>
         <Folder className="h-3.5 w-3.5" />
         <span>本地文件</span>
@@ -241,7 +241,6 @@ function StoryHarness({
   initialContextType = 'github' as 'local' | 'github' | 'chat',
   initialModel = 'claude-3.5-sonnet',
   modelPickerOptions = modelOptions,
-  projectScoped = false,
 }) {
   const [open, setOpen] = useState(initialOpen);
   const [contextType, setContextType] = useState<'local' | 'github' | 'chat'>(initialContextType);
@@ -272,28 +271,22 @@ function StoryHarness({
         onOpenChange={setOpen}
         coordinator={MobileInlinePickerCoordinator}
         machineNode={
-          projectScoped ? null : (
-            <MobileNativeSelect
-              value={machine}
-              onChange={setMachine}
-              options={machineOptions}
-              ariaLabel="Machine"
-              triggerContent={
-                <>
-                  <Monitor className="h-3.5 w-3.5 shrink-0 opacity-70" />
-                  <span className="truncate">{machine}</span>
-                </>
-              }
-            />
-          )
-        }
-        contextTypeNode={
-          projectScoped ? null : (
-            <MockContextTypeNode value={contextType} onChange={setContextType} />
-          )
+          <MobileNativeSelect
+            value={machine}
+            onChange={setMachine}
+            options={machineOptions}
+            ariaLabel="Machine"
+            triggerContent={
+              <>
+                <Monitor className="h-3.5 w-3.5 shrink-0 opacity-70" />
+                <span className="truncate">{machine}</span>
+              </>
+            }
+          />
         }
+        contextTypeNode={<MockContextTypeNode value={contextType} onChange={setContextType} />}
         perTypeNode={
-          contextType === 'chat' || projectScoped ? null : contextType === 'github' ? (
+          contextType === 'chat' ? null : contextType === 'github' ? (
             <MobileNativeSelect
               value={repo}
               onChange={setRepo}
@@ -418,17 +411,6 @@ export const LocalContext: Story = {
   render: () => <StoryHarness initialContextType="local" />,
 };
 
-export const ProjectScopedLocalContext: Story = {
-  args: {
-    open: true,
-    onOpenChange: () => {},
-    machineNode: null,
-    contextTypeNode: null,
-    composer: null,
-  },
-  render: () => <StoryHarness initialContextType="local" projectScoped />,
-};
-
 export const ChatContext: Story = {
   args: {
     open: true,

From 4f5d42a765a8c409c4bd9edd6398957dd9557ce2 Mon Sep 17 00:00:00 2001
From: spike <zvq@live.com>
Date: Thu, 3 Sep 2026 13:41:06 +0800
Subject: [PATCH 10/11] feat: unify mobile new chat project selection

Model: gpt-5.6
Amp-Thread-ID: https://ampcode.com/threads/T-01a065c7-5b86-7365-8e55-8ff02d310f4a
Co-authored-by: Amp <amp@ampcode.com>
---
 locales/en.json                               |   4 +-
 locales/zh_CN.json                            |   4 +-
 .../components/src/components/chat/AGENTS.md  |   6 +-
 .../src/components/chat/chat-landing.tsx      | 337 +++++++++---------
 .../src/components/mobile/AGENTS.md           |  11 +-
 .../mobile/mobile-native-select.tsx           |  40 ++-
 .../mobile/mobile-new-chat-sheet.tsx          | 107 ++----
 .../ChatLandingAttachments.stories.tsx        |   3 -
 .../stories/MobileNewChatSheet.stories.tsx    | 191 +++++-----
 .../tests/mobile-native-select.test.tsx       |  45 +++
 10 files changed, 398 insertions(+), 350 deletions(-)

diff --git a/locales/en.json b/locales/en.json
index e657ef7d5..dde6cf816 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -402,9 +402,7 @@
   "chat.mobileNewChat.projectLabel": "Project",
   "chat.mobileNewChat.repoLabel": "Repo",
   "chat.mobileNewChat.title": "New chat",
-  "chat.mobileNewChat.workdirLocalLabel": "Local files",
-  "chat.mobileNewChat.workdirModeLabel": "Mode",
-  "chat.mobileNewChat.workdirWorktreeLabel": "Worktree",
+  "chat.mobileNewChat.workLabel": "Work",
   "chat.mobileProject.chatTab": "Chats",
   "chat.mobileProject.emptyConversations": "No matching chats",
   "chat.mobileProject.filesTab": "Files",
diff --git a/locales/zh_CN.json b/locales/zh_CN.json
index 39046d77f..0563740a8 100644
--- a/locales/zh_CN.json
+++ b/locales/zh_CN.json
@@ -402,9 +402,7 @@
   "chat.mobileNewChat.projectLabel": "项目",
   "chat.mobileNewChat.repoLabel": "仓库",
   "chat.mobileNewChat.title": "新建对话",
-  "chat.mobileNewChat.workdirLocalLabel": "本地文件",
-  "chat.mobileNewChat.workdirModeLabel": "模式",
-  "chat.mobileNewChat.workdirWorktreeLabel": "新工作树",
+  "chat.mobileNewChat.workLabel": "工作",
   "chat.mobileProject.chatTab": "对话",
   "chat.mobileProject.emptyConversations": "没有匹配的对话",
   "chat.mobileProject.filesTab": "文件",
diff --git a/packages/components/src/components/chat/AGENTS.md b/packages/components/src/components/chat/AGENTS.md
index 38312a9a3..b339fd71e 100644
--- a/packages/components/src/components/chat/AGENTS.md
+++ b/packages/components/src/components/chat/AGENTS.md
@@ -28,8 +28,10 @@
   GitHub sessions keep their branch picker. The selected machine filters both
   local projects and agent configs; changing away from a selected local project's
   machine clears that project instead of silently choosing another one. GitHub
-  projects remain machine-independent. Keep the mobile type-specific pickers
-  independent until their sheet is redesigned. A single-member workspace never
+  projects remain machine-independent. Mobile New Chat uses the same unified
+  Local/GitHub project model, grouped by source in its native picker, with Work/Chat as its only
+  top-level mode. Its local Worktree checkbox shares the project row; unchecked directly uses the
+  local folder without spelling out a redundant Local files mode. A single-member workspace never
   passes project-sharing state. In multi-member workspaces, local project options
   and the selected desktop trigger show only an effective `Private` status; Team
   and unresolved states stay hidden. Effective access still combines
diff --git a/packages/components/src/components/chat/chat-landing.tsx b/packages/components/src/components/chat/chat-landing.tsx
index a2b84c8f3..c14438740 100644
--- a/packages/components/src/components/chat/chat-landing.tsx
+++ b/packages/components/src/components/chat/chat-landing.tsx
@@ -241,7 +241,7 @@ import { splitImageAndFileAttachments } from '@/lib/file-drop';
 import { canShowSubscriptionRateLimits } from '@/lib/session-usage';
 import { canShowCodexResetForecast } from '@/lib/codex-reset-forecast';
 import { createMachinePairing } from '@/lib/cli-api-key';
-import { ContextSwitch, type SessionContextType } from './context-switch';
+import type { SessionContextType } from './context-switch';
 import {
   UNIFIED_PROJECT_OPTION_RENDER_LIMIT,
   UnifiedProjectSelectorView,
@@ -309,8 +309,7 @@ import {
 } from '@/lib/local-project-rpc-file-provider';
 import { GitHubRepoFileProvider } from '@/lib/github-repo-file-provider';
 import type { FileWorkspaceProvider } from '@/lib/file-workspace-provider';
-import { Tabs, TabsList, TabsTrigger } from '@/ui/tabs';
-import { Folder as FolderIcon, GitBranch as GitBranchIcon } from 'lucide-react';
+import { GitBranch as GitBranchIcon } from 'lucide-react';
 import { AddLocalProjectDialogContainer } from '@/components/local-projects/add-local-project-dialog-container';
 import {
   MobileInlinePickerCoordinator,
@@ -3335,11 +3334,6 @@ function WorkspaceChatLanding({
     () => (selectedMachineId && isSelectedMachineValid ? selectedMachineId : localProjectMachineId),
     [localProjectMachineId, selectedMachineId, isSelectedMachineValid]
   );
-  const localProjectSelectorMachineId =
-    contextType === 'local' ? (selectedMachineId ?? localProjectMachineId) : null;
-  const localProjectSelectorEmptyText = t(
-    getEmptyLocalProjectsMessageKey(Boolean(localProjectSelectorMachineId))
-  );
 
   const { showBranchSelector, isBranchDisabled, branchSelectorKey } =
     getChatLandingBranchSelectorState({
@@ -3438,7 +3432,7 @@ function WorkspaceChatLanding({
 
   const mobileSheetRecency = projectRecency;
 
-  const desktopProjectSelection = useMemo<UnifiedProjectSelection>(() => {
+  const unifiedProjectSelection = useMemo<UnifiedProjectSelection>(() => {
     if (contextType === 'local' && selectedLocalProject) {
       return { kind: 'local', ...selectedLocalProject };
     }
@@ -3447,7 +3441,7 @@ function WorkspaceChatLanding({
     }
     return { kind: 'none' };
   }, [contextType, selectedLocalProject, selectedRepo]);
-  const handleDesktopProjectChange = useCallback(
+  const handleUnifiedProjectChange = useCallback(
     (selection: UnifiedProjectSelection) => {
       if (selection.kind === 'none') {
         setContextType('chat');
@@ -3713,8 +3707,8 @@ function WorkspaceChatLanding({
           onAddMachine={handleAddMachine}
         />
         <UnifiedProjectSelectorView
-          value={desktopProjectSelection}
-          onChange={handleDesktopProjectChange}
+          value={unifiedProjectSelection}
+          onChange={handleUnifiedProjectChange}
           localProjects={desktopLocalProjectOptions}
           repositories={repositories}
           latestMessageAtByRepo={mobileSheetRecency.byRepo}
@@ -3802,10 +3796,9 @@ function WorkspaceChatLanding({
   const bottomBarNode = null;
 
   /* ── Mobile-sheet (new-chat bottom sheet) selector nodes ──
-     Machine / project / branch use real HTML selects so touch platforms
-     present their native option picker. Complex composer run-config rows
-     retain MobileInlinePicker for search and rich option content. The pill
-     switchers (类型, 模式) stay as Tabs since they're already inline. */
+     Target rows use real HTML selects so touch platforms present their native
+     option picker. Complex composer run-config rows retain MobileInlinePicker
+     for search and rich option content. */
 
   /* ── Machine ── */
   const mobileSheetOnlineMachines = useOnlineMachines();
@@ -3841,87 +3834,83 @@ function WorkspaceChatLanding({
     />
   );
 
-  /* ── Project (per context) ── */
-  const mobileSheetGitHubRepoOptions = useMemo<MobileNativeSelectOption<string>[]>(() => {
-    if (contextType !== 'github') return [];
-    const repos = [...(repositories ?? [])].sort((a, b) =>
-      compareChatLandingRepositoryByRecency(a, b, mobileSheetRecency.byRepo)
-    );
-    return repos.map((repo) => ({
-      value: repo.fullName,
-      label: repo.fullName,
-    }));
-  }, [contextType, repositories, mobileSheetRecency]);
-  const mobileSheetLocalProjectOptions = useMemo<MobileNativeSelectOption<string>[]>(() => {
-    if (contextType !== 'local') return [];
-    const entries = [...visibleLocalProjectMap.values()]
-      .filter(
-        (entry) =>
-          !localProjectSelectorMachineId || entry.machineId === localProjectSelectorMachineId
-      )
-      .sort((left, right) =>
-        compareChatLandingLocalProjectByRecency(left, right, mobileSheetRecency.byProject)
-      );
-    return entries.map((entry) => ({
-      value: buildLocalProjectKey(entry.machineId, entry.project.id),
-      label: entry.project.name,
-    }));
-  }, [contextType, localProjectSelectorMachineId, visibleLocalProjectMap, mobileSheetRecency]);
-  const mobileSheetSelectedLocalProjectKey = selectedLocalProject
-    ? buildLocalProjectKey(selectedLocalProject.machineId, selectedLocalProject.localProjectId)
-    : null;
-  const mobileSheetSelectedRepoLabel = selectedRepo ?? null;
-  const mobileSheetSelectedLocalProjectLabel = useMemo(() => {
-    if (!mobileSheetSelectedLocalProjectKey) return null;
-    return (
-      mobileSheetLocalProjectOptions.find((opt) => opt.value === mobileSheetSelectedLocalProjectKey)
-        ?.label ?? null
-    );
-  }, [mobileSheetLocalProjectOptions, mobileSheetSelectedLocalProjectKey]);
-  const mobileSheetProjectNode =
-    contextType === 'github' ? (
-      <MobileNativeSelect<string>
-        value={selectedRepo ?? null}
-        onChange={(repo) => {
-          setSelectedRepo(repo);
-          setContextType('github');
-        }}
-        options={mobileSheetGitHubRepoOptions}
-        ariaLabel={t('chat.repoPlaceholder', 'Repository')}
-        triggerContent={
-          <>
+  /* ── Unified project source ──
+     Local folders and GitHub repositories are one user-facing choice, matching
+     desktop. The encoded value is only a native-select key; the selection map
+     keeps parsing and business behavior in the shared selection handler. */
+  const mobileSheetProjectModel = useMemo(() => {
+    const selections = new Map<string, Exclude<UnifiedProjectSelection, { kind: 'none' }>>();
+    const options: Array<MobileNativeSelectOption<string> & { lastUsedAt?: number }> = [];
+    const localLabel = t('chat.contextSwitch.localProjects', 'Local');
+    const githubLabel = t('chat.contextSwitch.github', 'GitHub');
+
+    for (const project of desktopLocalProjectOptions) {
+      const value = `local:${project.key}`;
+      selections.set(value, {
+        kind: 'local',
+        machineId: project.machineId,
+        localProjectId: project.localProjectId,
+      });
+      options.push({
+        value,
+        label: project.name,
+        group: localLabel,
+        lastUsedAt: project.lastUsedAt,
+      });
+    }
+    for (const repository of repositories ?? []) {
+      const value = `github:${repository.fullName}`;
+      selections.set(value, { kind: 'github', repoFullName: repository.fullName });
+      options.push({
+        value,
+        label: repository.fullName,
+        group: githubLabel,
+        lastUsedAt: mobileSheetRecency.byRepo.get(repository.fullName),
+      });
+    }
+    options.sort(compareUnifiedProjectOptions);
+    return { options, selections };
+  }, [desktopLocalProjectOptions, mobileSheetRecency.byRepo, repositories, t]);
+  const mobileSheetSelectedProjectValue =
+    unifiedProjectSelection.kind === 'local'
+      ? `local:${buildLocalProjectKey(
+          unifiedProjectSelection.machineId,
+          unifiedProjectSelection.localProjectId
+        )}`
+      : unifiedProjectSelection.kind === 'github'
+        ? `github:${unifiedProjectSelection.repoFullName}`
+        : null;
+  const mobileSheetSelectedProjectLabel =
+    unifiedProjectSelection.kind === 'local'
+      ? (desktopLocalProjectOptions.find(
+          (project) => project.key === mobileSheetSelectedProjectValue?.slice('local:'.length)
+        )?.name ?? t('chat.projectPicker.placeholder', 'Select a project'))
+      : unifiedProjectSelection.kind === 'github'
+        ? unifiedProjectSelection.repoFullName
+        : t('chat.projectPicker.placeholder', 'Select a project');
+  const mobileSheetProjectNode = (
+    <MobileNativeSelect<string>
+      value={mobileSheetSelectedProjectValue}
+      onChange={(value) => {
+        const selection = mobileSheetProjectModel.selections.get(value);
+        if (selection) handleUnifiedProjectChange(selection);
+      }}
+      options={mobileSheetProjectModel.options}
+      ariaLabel={t('chat.projectPicker.placeholder', 'Select a project')}
+      showIndicator={false}
+      className="w-fit max-w-full"
+      triggerContent={
+        <>
+          {unifiedProjectSelection.kind === 'github' ? (
             <GithubIcon className="h-3.5 w-3.5 shrink-0 opacity-70" aria-hidden="true" />
-            <span className="truncate">
-              {mobileSheetSelectedRepoLabel ?? t('chat.repoPlaceholder', 'Repository')}
-            </span>
-          </>
-        }
-      />
-    ) : (
-      <MobileNativeSelect<string>
-        value={mobileSheetSelectedLocalProjectKey}
-        onChange={(key) => {
-          const opt = visibleLocalProjectMap.get(key);
-          if (!opt) return;
-          handleSelectedLocalProjectChange({
-            machineId: opt.machineId,
-            localProjectId: opt.project.id,
-          });
-          setContextType('local');
-        }}
-        options={mobileSheetLocalProjectOptions}
-        ariaLabel={t('chat.validation.missingProject', 'Select a project')}
-        triggerContent={
-          <>
+          ) : (
             <FolderOpen className="h-3.5 w-3.5 shrink-0 opacity-70" aria-hidden="true" />
-            <span className="truncate">
-              {mobileSheetSelectedLocalProjectLabel ??
-                t('chat.validation.missingProject', 'Select a project')}
-            </span>
-          </>
-        }
-      />
-    );
+          )}
+          <span className="truncate">{mobileSheetSelectedProjectLabel}</span>
+        </>
+      }
+    />
+  );
 
   /* ── Branch ── */
   const mobileSheetBranchOptions = useMemo<MobileNativeSelectOption<string>[]>(
@@ -3942,6 +3931,7 @@ function WorkspaceChatLanding({
       loading={contextType === 'local' ? loadingLocalGitState || runtimeInitializing : false}
       loadingText={t('chat.branchLoading', { defaultValue: 'Loading branches...' })}
       ariaLabel={t('chat.branchPlaceholder', 'Branch')}
+      className="w-fit max-w-full"
       triggerContent={
         <>
           <GitBranchIcon
@@ -3957,49 +3947,19 @@ function WorkspaceChatLanding({
     />
   ) : null;
 
-  /* Project and branch now live on their own rows in the new-chat
-     sheet (see `MobileNewChatSheet` `perTypeNode` + `branchNode`
-     slots), so the previous side-by-side wrapper is gone. The two
-     nodes are passed individually to the sheet. */
-
-  /* Local-only: workdir mode lives on its own row in the sheet as a
-     pill switcher (本地文件 / 新工作树), matching the visual pattern of
-     the type pill above. The desktop WorkdirModeSelector dropdown is too
-     small to read at a glance on a phone and doesn't surface both
-     options without an extra tap. */
-  /* Workdir mode pills: icon+label as a tight group, centered in each
-     equal-width segment (same affinity pattern as the Type ContextSwitch). */
-  const mobileSheetWorkdirModePillTriggerClassName = cn(
-    'flex-1 justify-center gap-1 rounded-md px-2 py-1 text-sm font-medium transition-all',
-    'data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-xs',
-    'text-muted-foreground'
-  );
+  /* Project and branch share the compact Work target row. */
+
+  /* Local files are the implicit default. Only the optional isolation choice
+     needs a visible control, kept inline with the project target row. */
   const mobileSheetWorkdirModeNode =
     contextType === 'local' && selectedLocalProject ? (
-      <Tabs
-        value={effectiveWorkdirMode}
-        onValueChange={(value) => handleWorkdirModeChange(value as WorkdirMode)}
-        className="w-full"
-      >
-        <TabsList className="flex h-9 w-full rounded-md bg-muted p-1">
-          <TabsTrigger value="local" className={mobileSheetWorkdirModePillTriggerClassName}>
-            <FolderIcon className="h-3.5 w-3.5" aria-hidden="true" />
-            <span>{t('chat.mobileNewChat.workdirLocalLabel', '本地文件')}</span>
-          </TabsTrigger>
-          <TabsTrigger
-            value="worktree"
-            disabled={!worktreeAvailable}
-            title={worktreeUnavailableReason}
-            className={cn(
-              mobileSheetWorkdirModePillTriggerClassName,
-              !worktreeAvailable && 'cursor-not-allowed opacity-50'
-            )}
-          >
-            <GitBranchIcon className="h-3.5 w-3.5" aria-hidden="true" />
-            <span>{t('chat.mobileNewChat.workdirWorktreeLabel', '新工作树')}</span>
-          </TabsTrigger>
-        </TabsList>
-      </Tabs>
+      <WorktreeCheckboxPill
+        checked={effectiveWorkdirMode === 'worktree'}
+        onCheckedChange={(checked) => handleWorkdirModeChange(checked ? 'worktree' : 'local')}
+        disabled={!worktreeAvailable}
+        disabledReason={!worktreeAvailable ? worktreeUnavailableReason : undefined}
+        className="h-7 bg-transparent px-1.5 hover:bg-hover/60"
+      />
     ) : null;
 
   /* ── Composer footer: same MobileSessionRunConfig as the in-session
@@ -4059,36 +4019,70 @@ function WorkspaceChatLanding({
      knob lives inside MobileSessionRunConfig. */
   const mobileSheetBelowComposerNode = null;
 
-  /* Mobile-sheet Type row: same ContextSwitch as desktop. Icon+label are a
-     tight centered pair inside each equal-width pill (not icon-left /
-     label-centered, which broke icon–label affinity). */
-  const mobileSheetContextSwitchNode = (
-    <ContextSwitch
-      value={contextType}
-      onChange={setContextType}
-      tone={tone}
-      localLabel={t('chat.contextSwitch.localProjects', 'Local')}
-      githubLabel={t('chat.contextSwitch.github', 'GitHub')}
-      chatLabel={t('chat.contextSwitch.chat', 'Chat')}
-      tabsListClassName="h-9"
-      tabsTriggerClassName="py-1"
-      /* The mobile new-chat sheet is a compact launcher — empty Local/GitHub tabs must
-         NOT carry the desktop's
-         "Open project" / "Connect GitHub" affordance, whose onClick navigates
-         away (and was firing on hover/click/Enter). Omit onClick so the tab
-         stays plainly disabled with only an explanatory tooltip. */
-      localDisabled={hasLocalProjects ? undefined : { label: localProjectSelectorEmptyText }}
-      githubDisabled={
-        !hasGitHubRepos
-          ? {
-              label: t(
-                'chat.mobileHome.emptyGitHubProjects',
-                '当前 workspace 没有已授权的 GitHub 仓库'
-              ),
-            }
-          : undefined
+  const mobileSheetLastWorkProjectRef = useRef<Exclude<
+    UnifiedProjectSelection,
+    { kind: 'none' }
+  > | null>(null);
+  useEffect(() => {
+    if (unifiedProjectSelection.kind !== 'none') {
+      mobileSheetLastWorkProjectRef.current = unifiedProjectSelection;
+    }
+  }, [unifiedProjectSelection]);
+  const handleMobileSheetModeChange = useCallback(
+    (mode: 'work' | 'chat') => {
+      if (mode === 'chat') {
+        setContextType('chat');
+        return;
       }
-    />
+      if (contextType !== 'chat') return;
+      const remembered = mobileSheetLastWorkProjectRef.current;
+      const rememberedValue =
+        remembered?.kind === 'local'
+          ? `local:${buildLocalProjectKey(remembered.machineId, remembered.localProjectId)}`
+          : remembered?.kind === 'github'
+            ? `github:${remembered.repoFullName}`
+            : null;
+      const selection =
+        (rememberedValue ? mobileSheetProjectModel.selections.get(rememberedValue) : undefined) ??
+        mobileSheetProjectModel.selections.values().next().value;
+      if (selection) handleUnifiedProjectChange(selection);
+    },
+    [contextType, handleUnifiedProjectChange, mobileSheetProjectModel.selections]
+  );
+
+  /* Work / Chat is the only top-level mode. Local and GitHub are properties of
+     the unified project selection rather than separate modes. */
+  const mobileSheetContextSwitchNode = (
+    <div
+      role="group"
+      aria-label={t('chat.mobileNewChat.contextTypeLabel', 'Type')}
+      className="flex h-8 select-none items-center rounded-lg bg-muted/70 p-0.5 text-xs font-medium"
+    >
+      {(['work', 'chat'] as const).map((mode) => {
+        const active = mode === 'chat' ? contextType === 'chat' : contextType !== 'chat';
+        const disabled = mode === 'work' && mobileSheetProjectModel.options.length === 0;
+        return (
+          <button
+            key={mode}
+            type="button"
+            aria-pressed={active}
+            disabled={disabled}
+            onClick={() => handleMobileSheetModeChange(mode)}
+            className={cn(
+              'h-7 rounded-md px-2.5 transition-colors',
+              active
+                ? 'bg-background text-foreground shadow-xs'
+                : 'text-muted-foreground hover:text-foreground',
+              disabled && 'cursor-not-allowed opacity-40'
+            )}
+          >
+            {mode === 'work'
+              ? t('chat.mobileNewChat.workLabel', 'Work')
+              : t('chat.contextSwitch.chat', 'Chat')}
+          </button>
+        );
+      })}
+    </div>
   );
 
   // ── Hints ──
@@ -6007,21 +6001,12 @@ function WorkspaceChatLanding({
     labels: {
       title: t('chat.mobileNewChat.title', '新建对话'),
       closeAriaLabel: t('common.close', 'Close'),
-      machineLabel: t('chat.mobileNewChat.machineLabel', '机器'),
-      contextTypeLabel: t('chat.mobileNewChat.contextTypeLabel', '类型'),
-      perTypeLabel:
-        contextType === 'github'
-          ? t('chat.mobileNewChat.repoLabel', '仓库')
-          : t('chat.mobileNewChat.projectLabel', '项目'),
-      branchLabel: t('chat.mobileNewChat.branchLabel', '分支'),
-      secondaryPerTypeLabel: t('chat.mobileNewChat.workdirModeLabel', '模式'),
     },
     coordinator: MobileInlinePickerCoordinator,
     machineNode: mobileSheetMachineNode,
     contextTypeNode: mobileSheetContextSwitchNode,
-    /* Project / repo on its own row; branch on its own row below
-         (split per the user's design ask — chips no longer share a row
-         and so don't truncate on narrow phones). */
+    /* Local folders and GitHub repositories share this picker. Chat has no
+       project row; branch appears beside the selected project when relevant. */
     perTypeNode: contextType === 'chat' ? null : mobileSheetProjectNode,
     branchNode: contextType === 'chat' ? null : mobileSheetBranchNode,
     secondaryPerTypeNode: mobileSheetWorkdirModeNode,
diff --git a/packages/components/src/components/mobile/AGENTS.md b/packages/components/src/components/mobile/AGENTS.md
index 3124afdf9..d969cd900 100644
--- a/packages/components/src/components/mobile/AGENTS.md
+++ b/packages/components/src/components/mobile/AGENTS.md
@@ -225,8 +225,15 @@ embedded` lazy-imported from `../tasks/tasks-workspace.tsx` (`embedded`
   exports the legacy `MobileModelPickerLabel` helpers for any remaining chip
   faces; `mobile-fast-plan-toggles.tsx` is no longer mounted on new-chat
   (Plan/Fast live inside the run-config sheet).
-- New-chat target rows (machine, project/repository, and branch) use the backgroundless
-  `mobile-native-select.tsx` face with `ChevronsUpDown`; its transparent real `<select>`
+- New-chat puts the machine and compact Work/Chat switch on one row. Work shows one unified
+  Local-project/GitHub-repository picker (matching desktop); its native options use Local/GitHub
+  groups instead of appending a source suffix to every project name. Chat hides the entire project
+  section. Project, optional branch, and the local-only Worktree checkbox share one row; direct local
+  files are the implicit unchecked state rather than a second visible mode. The project trigger fits
+  short names, caps long ones, and omits the chevrons so Branch follows it without a false spacer;
+  Branch also fits short names but may consume the flexible middle for a long ref, while the Worktree
+  checkbox stays pinned to the row's right edge.
+  Target selectors use the backgroundless `mobile-native-select.tsx` face; its transparent real `<select>`
   owns the whole hit target so touch opens the platform option picker. Do not route these
   rows back through the app-owned inline picker. When no enabled alternative to the
   current value exists, hide the chevrons and disable the select; the face has no focus
diff --git a/packages/components/src/components/mobile/mobile-native-select.tsx b/packages/components/src/components/mobile/mobile-native-select.tsx
index 1dc2ffa07..7f4b0faa5 100644
--- a/packages/components/src/components/mobile/mobile-native-select.tsx
+++ b/packages/components/src/components/mobile/mobile-native-select.tsx
@@ -1,11 +1,12 @@
 import { ChevronsUpDown, Loader2 } from 'lucide-react';
-import type { ReactNode } from 'react';
+import { Fragment, type ReactNode } from 'react';
 
 import { cn } from '@/lib/utils';
 
 export type MobileNativeSelectOption<T extends string = string> = {
   value: T;
   label: string;
+  group?: string;
   disabled?: boolean;
 };
 
@@ -18,6 +19,7 @@ export type MobileNativeSelectProps<T extends string = string> = {
   disabled?: boolean;
   loading?: boolean;
   loadingText?: ReactNode;
+  showIndicator?: boolean;
   className?: string;
 };
 
@@ -34,15 +36,28 @@ export function MobileNativeSelect<T extends string = string>({
   disabled = false,
   loading = false,
   loadingText,
+  showIndicator = true,
   className,
 }: MobileNativeSelectProps<T>) {
   const hasAlternative = options.some((option) => !option.disabled && option.value !== value);
   const isInteractive = !disabled && !loading && hasAlternative;
+  const groupedOptions = options.reduce<
+    Array<{ label: string | null; options: MobileNativeSelectOption<T>[] }>
+  >((groups, option) => {
+    const label = option.group ?? null;
+    const existing = groups.find((group) => group.label === label);
+    if (existing) {
+      existing.options.push(option);
+    } else {
+      groups.push({ label, options: [option] });
+    }
+    return groups;
+  }, []);
 
   return (
     <div
       className={cn(
-        'relative flex h-9 w-full select-none items-center gap-2 rounded-md px-3 py-1 text-left text-sm font-medium',
+        'relative flex h-8 w-full select-none items-center gap-1.5 rounded-md px-2 py-1 text-left text-sm font-medium',
         'text-foreground/85 transition-colors hover:text-foreground',
         (disabled || loading) && 'opacity-60',
         className
@@ -58,7 +73,7 @@ export function MobileNativeSelect<T extends string = string>({
           triggerContent
         )}
       </span>
-      {isInteractive ? (
+      {isInteractive && showIndicator ? (
         <ChevronsUpDown className="h-4 w-4 shrink-0 opacity-50" aria-hidden="true" />
       ) : null}
       <select
@@ -74,11 +89,20 @@ export function MobileNativeSelect<T extends string = string>({
         <option value="" disabled>
           {ariaLabel}
         </option>
-        {options.map((option) => (
-          <option key={option.value} value={option.value} disabled={option.disabled}>
-            {option.label}
-          </option>
-        ))}
+        {groupedOptions.map((group) => {
+          const optionNodes = group.options.map((option) => (
+            <option key={option.value} value={option.value} disabled={option.disabled}>
+              {option.label}
+            </option>
+          ));
+          return group.label ? (
+            <optgroup key={group.label} label={group.label}>
+              {optionNodes}
+            </optgroup>
+          ) : (
+            <Fragment key="ungrouped">{optionNodes}</Fragment>
+          );
+        })}
       </select>
     </div>
   );
diff --git a/packages/components/src/components/mobile/mobile-new-chat-sheet.tsx b/packages/components/src/components/mobile/mobile-new-chat-sheet.tsx
index 559dacc63..2720093a5 100644
--- a/packages/components/src/components/mobile/mobile-new-chat-sheet.tsx
+++ b/packages/components/src/components/mobile/mobile-new-chat-sheet.tsx
@@ -11,17 +11,15 @@ export type MobileNewChatSheetLabels = {
   title?: string;
   description?: string;
   closeAriaLabel?: string;
+  /** @deprecated Target rows no longer render separate labels. */
   machineLabel?: string;
+  /** @deprecated Work / Chat is rendered inline with the machine. */
   contextTypeLabel?: string;
-  /** Primary per-type row label — just the project / repo name now
-     (branch lives on its own row, see `branchLabel`). Parent picks
-     the wording (e.g. "项目" / "仓库"). */
+  /** @deprecated The unified project control identifies itself. */
   perTypeLabel?: string;
-  /** Branch row label, shown on the row below the project/repo when
-     a branch picker is wired. Defaults to "分支". */
+  /** @deprecated Branch is rendered beside the project. */
   branchLabel?: string;
-  /** Secondary per-type row label, used by local context for the worktree
-     mode pill. Optional — collapsed when `secondaryPerTypeNode` is null. */
+  /** @deprecated Workdir mode is rendered without a separate label. */
   secondaryPerTypeLabel?: string;
 };
 
@@ -32,23 +30,15 @@ export type MobileNewChatSheetProps = {
 
 export type MobileNewChatSheetContentProps = {
   labels?: MobileNewChatSheetLabels;
-  /** Row 1: machine pill / selector. */
+  /** Target row: machine selector on the left. */
   machineNode: ReactNode;
-  /** Row 2: project type (3-icon) pill switcher. */
+  /** Target row: compact Work / Chat switcher on the right. */
   contextTypeNode: ReactNode;
-  /** Row 3: the project (local) or repo (github) picker on its own
-     row — branch moved to its own row below so neither chip gets
-     truncated on narrow phones. Pass `null` to collapse (chat
-     context has no target). */
+  /** Unified local-project / GitHub-repository picker. Pass `null` for Chat. */
   perTypeNode?: ReactNode | null;
-  /** Row 4 (optional): branch picker, only shown when a project /
-     repo with branches is selected. Splitting it off from
-     `perTypeNode` was the user's call — easier to read at a glance
-     than two side-by-side chips. */
+  /** Optional branch picker rendered beside the unified project picker. */
   branchNode?: ReactNode | null;
-  /** Row 5 (local-only): workdir mode toggle (本地文件 / 新工作树).
-     Renders only when the caller hands a node — github and chat
-     contexts pass `null`. */
+  /** Local-only Worktree toggle rendered inline with the project target. */
   secondaryPerTypeNode?: ReactNode | null;
   /** The composer itself — already wired with footer / bottomBar slots. */
   composer: ReactNode;
@@ -73,12 +63,10 @@ export type MobileNewChatSheetContentProps = {
 /**
  * Bottom sheet that hosts the "new chat" composer flow on mobile home.
  *
- * Layout stacks top-to-bottom per the design comp: machine → project
- * type → per-type selectors (optionally split into project+branch +
- * worktree on local) → composer (footer holds the same
+ * Layout stacks top-to-bottom per the design comp: machine + Work/Chat →
+ * unified project + optional branch / Worktree toggle → composer (footer holds the same
  * `MobileSessionRunConfig` face as the in-session chat). Each row
- * carries a short label (机器 / 类型 / 项目 / 模式) so the surface reads
- * like a form rather than a tag cloud.
+ * stays compact and lets the selected values provide their own context.
  */
 export function MobileNewChatSheet({
   open,
@@ -148,11 +136,6 @@ export function MobileNewChatSheetContent({
   const title = labels.title ?? '新建对话';
   const description = labels.description;
   const closeAriaLabel = labels.closeAriaLabel ?? 'Close';
-  const machineLabel = labels.machineLabel ?? '机器';
-  const contextTypeLabel = labels.contextTypeLabel ?? '类型';
-  const perTypeLabel = labels.perTypeLabel ?? '项目';
-  const branchLabel = labels.branchLabel ?? '分支';
-  const secondaryPerTypeLabel = labels.secondaryPerTypeLabel ?? '模式';
   /* Keep the focused composer centered above the native keyboard so the
      footer run-config control isn't left hidden. */
   const scrollRef = useRef<HTMLDivElement>(null);
@@ -218,33 +201,32 @@ export function MobileNewChatSheetContent({
             ...scrollAreaStyle,
           }}
         >
-          {/* Per-type + secondary rows mount / unmount as the user
-             switches context type (e.g. picking Chat collapses the
-             项目 row, picking Local adds the 模式 row).
+          {/* The project target row mounts / unmounts as the user switches
+             between Work and Chat. Local and GitHub share one project picker.
              `AnimatePresence` + height-animated wrappers slide the
              rows in / out so the surrounding stack ripples smoothly
              rather than snapping. */}
           <div className="flex flex-col pb-2 pt-1">
             <AnimatedSheetRow alwaysOn>
-              <Row label={machineLabel}>{machineNode}</Row>
-            </AnimatedSheetRow>
-            <AnimatedSheetRow alwaysOn>
-              <Row label={contextTypeLabel}>{contextTypeNode}</Row>
+              <TargetRow>
+                <div className="min-w-0 flex-1">{machineNode}</div>
+                <div className="shrink-0">{contextTypeNode}</div>
+              </TargetRow>
             </AnimatedSheetRow>
             <AnimatePresence initial={false}>
-              {perTypeNode ? (
+              {perTypeNode || secondaryPerTypeNode ? (
                 <AnimatedSheetRow key="per-type">
-                  <Row label={perTypeLabel}>{perTypeNode}</Row>
-                </AnimatedSheetRow>
-              ) : null}
-              {branchNode ? (
-                <AnimatedSheetRow key="branch">
-                  <Row label={branchLabel}>{branchNode}</Row>
-                </AnimatedSheetRow>
-              ) : null}
-              {secondaryPerTypeNode ? (
-                <AnimatedSheetRow key="secondary-per-type">
-                  <Row label={secondaryPerTypeLabel}>{secondaryPerTypeNode}</Row>
+                  <TargetRow>
+                    <div
+                      className={cn('min-w-0 shrink', branchNode ? 'max-w-[42%]' : 'max-w-[70%]')}
+                    >
+                      {perTypeNode}
+                    </div>
+                    {branchNode ? <div className="min-w-0 flex-1">{branchNode}</div> : null}
+                    {secondaryPerTypeNode ? (
+                      <div className="ml-auto shrink-0 self-center">{secondaryPerTypeNode}</div>
+                    ) : null}
+                  </TargetRow>
                 </AnimatedSheetRow>
               ) : null}
             </AnimatePresence>
@@ -297,31 +279,12 @@ function AnimatedSheetRow({
   );
 }
 
-/* Single labelled row.
-   Label sits left at fixed width; value column flexes to fill the rest
-   so chips render in the remaining width. The whole row is wrapped in a
-   `MobileInlinePickerRowSlot` so any picker dropped inside the value
-   column portals its expansion drawer into the slot rendered just
-   below the row — full row width, escaping the chip's own column.
-   That gives the "list under the entire row" behavior the design comp
-   asks for even when the row holds two side-by-side chips (e.g.
-   project + branch). */
-function Row({ label, children }: { label: string; children: ReactNode }) {
+/* Compact target row. The slot still lets a richer picker project a full-width
+   panel below the row if a host supplies one instead of a native select. */
+function TargetRow({ children }: { children: ReactNode }) {
   return (
     <MobileInlinePickerRowSlot>
-      <div className="flex min-w-0 items-stretch gap-3 rounded-xl px-3 py-1">
-        {/* Fixed-width label column so every row's value column starts
-           at the same x regardless of the label's intrinsic width.
-           Without this, "Machine" / "Type" / "Project" / "Branch" /
-           "Mode" each push the value chip to a different x in
-           English (Chinese labels are uniform 2 chars so it accidentally
-           lined up before). `w-16` (64px) fits the longest English
-           label at 0.875rem without wrapping. */}
-        <span className="w-16 shrink-0 self-center text-sm font-semibold leading-5 text-muted-foreground">
-          {label}
-        </span>
-        <div className="min-w-0 flex-1">{children}</div>
-      </div>
+      <div className="flex min-w-0 items-stretch gap-1 rounded-xl px-1 py-0.5">{children}</div>
     </MobileInlinePickerRowSlot>
   );
 }
diff --git a/packages/components/src/stories/ChatLandingAttachments.stories.tsx b/packages/components/src/stories/ChatLandingAttachments.stories.tsx
index 7fcbeb59e..8bc9d94b4 100644
--- a/packages/components/src/stories/ChatLandingAttachments.stories.tsx
+++ b/packages/components/src/stories/ChatLandingAttachments.stories.tsx
@@ -204,9 +204,6 @@ function MobileNewChatDemo() {
   const contentProps: MobileNewChatSheetContentProps = {
     labels: {
       title: '新建对话',
-      machineLabel: '机器',
-      contextTypeLabel: '类型',
-      perTypeLabel: '仓库',
     },
     coordinator: MobileInlinePickerCoordinator,
     machineNode: <SelectorPill icon={Bot} label="Aurora · Mac Studio" />,
diff --git a/packages/components/src/stories/MobileNewChatSheet.stories.tsx b/packages/components/src/stories/MobileNewChatSheet.stories.tsx
index c11d2b9be..398f72665 100644
--- a/packages/components/src/stories/MobileNewChatSheet.stories.tsx
+++ b/packages/components/src/stories/MobileNewChatSheet.stories.tsx
@@ -1,15 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { useState } from 'react';
-import {
-  ArrowUp,
-  Folder,
-  GitBranch,
-  Github,
-  MessageCircle,
-  Monitor,
-  ShieldCheck,
-  Sparkles,
-} from 'lucide-react';
+import { ArrowUp, Folder, GitBranch, Github, Monitor, ShieldCheck, Sparkles } from 'lucide-react';
 
 import { MobileNewChatSheet } from '@/components/mobile/mobile-new-chat-sheet';
 import {
@@ -26,10 +17,9 @@ import {
   MobileModelPickerLabel,
   mobileModelPickerTriggerClassName,
 } from '@/components/mobile/mobile-session-composer-footer';
+import { WorktreeCheckboxPill } from '@/components/shared';
 import { Button } from '@/ui/button';
-import { cn } from '@/lib/utils';
 import type { AcpConfigOptionValue } from '@/components/shared/acp-selector-options';
-import { Tabs, TabsList, TabsTrigger } from '@/ui/tabs';
 
 const meta = {
   title: 'Mobile/MobileNewChatSheet',
@@ -107,60 +97,51 @@ const permissionOptions: MobileInlinePickerOption[] = [
   },
 ];
 
-function MockContextTypeNode({
-  value,
+function MockWorkChatNode({
+  chat,
   onChange,
 }: {
-  value: 'local' | 'github' | 'chat';
-  onChange: (next: 'local' | 'github' | 'chat') => void;
+  chat: boolean;
+  onChange: (chat: boolean) => void;
 }) {
-  const triggerClassName = cn(
-    'flex-1 inline-flex items-center justify-start gap-1.5 rounded-md px-2 py-1 text-sm font-medium transition-all',
-    'data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-xs',
-    'text-muted-foreground'
-  );
   return (
-    <Tabs
-      value={value}
-      onValueChange={(v) => onChange(v as 'local' | 'github' | 'chat')}
-      className="w-full"
-    >
-      <TabsList className="flex h-9 w-full rounded-md bg-muted p-1">
-        <TabsTrigger value="local" className={triggerClassName}>
-          <Folder className="h-3.5 w-3.5" />
-          <span>Local</span>
-        </TabsTrigger>
-        <TabsTrigger value="github" className={triggerClassName}>
-          <Github className="h-3.5 w-3.5" />
-          <span>GitHub</span>
-        </TabsTrigger>
-        <TabsTrigger value="chat" className={triggerClassName}>
-          <MessageCircle className="h-3.5 w-3.5" />
-          <span>Chat</span>
-        </TabsTrigger>
-      </TabsList>
-    </Tabs>
+    <div className="flex h-8 items-center rounded-lg bg-muted/70 p-0.5 text-xs font-medium">
+      {(['Work', 'Chat'] as const).map((label) => {
+        const active = label === 'Chat' ? chat : !chat;
+        return (
+          <button
+            key={label}
+            type="button"
+            aria-pressed={active}
+            onClick={() => onChange(label === 'Chat')}
+            className={`h-7 rounded-md px-2.5 ${
+              active ? 'bg-background text-foreground shadow-xs' : 'text-muted-foreground'
+            }`}
+          >
+            {label}
+          </button>
+        );
+      })}
+    </div>
   );
 }
 
-function MockWorkdirModeNode({ contextType }: { contextType: 'local' | 'github' | 'chat' }) {
+function MockWorkdirModeNode({
+  contextType,
+  value,
+  onChange,
+}: {
+  contextType: 'local' | 'github' | 'chat';
+  value: 'local' | 'worktree';
+  onChange: (next: 'local' | 'worktree') => void;
+}) {
   if (contextType !== 'local') return null;
-  const triggerClassName =
-    'flex-1 inline-flex items-center justify-start gap-1.5 rounded-md px-2 py-1 text-sm font-medium transition-all';
   return (
-    <div className="flex h-9 w-full rounded-md bg-muted p-1">
-      <button type="button" className={cn(triggerClassName, 'text-muted-foreground')}>
-        <Folder className="h-3.5 w-3.5" />
-        <span>本地文件</span>
-      </button>
-      <button
-        type="button"
-        className={cn(triggerClassName, 'bg-background text-foreground shadow-xs')}
-      >
-        <GitBranch className="h-3.5 w-3.5" />
-        <span>新工作树</span>
-      </button>
-    </div>
+    <WorktreeCheckboxPill
+      checked={value === 'worktree'}
+      onCheckedChange={(checked) => onChange(checked ? 'worktree' : 'local')}
+      className="h-7 bg-transparent px-1.5 hover:bg-hover/60"
+    />
   );
 }
 
@@ -239,6 +220,7 @@ function MockComposer({
 function StoryHarness({
   initialOpen = true,
   initialContextType = 'github' as 'local' | 'github' | 'chat',
+  initialBranch = 'main',
   initialModel = 'claude-3.5-sonnet',
   modelPickerOptions = modelOptions,
 }) {
@@ -250,11 +232,30 @@ function StoryHarness({
   const [machine, setMachine] = useState('zx-macbook');
   const [repo, setRepo] = useState('loro-dev/lody');
   const [localProject, setLocalProject] = useState('zx-macbook:lody');
-  const [branch, setBranch] = useState('main');
+  const [branch, setBranch] = useState(initialBranch);
+  const [workdirMode, setWorkdirMode] = useState<'local' | 'worktree'>('worktree');
   const [model, setModel] = useState(initialModel);
   const [thinking, setThinking] = useState('high');
   const [agent, setAgent] = useState('claude-code');
   const [permission, setPermission] = useState('askPermission');
+  const selectedProject =
+    contextType === 'local'
+      ? `local:${localProject}`
+      : contextType === 'github'
+        ? `github:${repo}`
+        : null;
+  const projectOptions: MobileNativeSelectOption[] = [
+    ...localProjectOptions.map((option) => ({
+      ...option,
+      value: `local:${option.value}`,
+      group: 'Local',
+    })),
+    ...githubRepoOptions.map((option) => ({
+      ...option,
+      value: `github:${option.value}`,
+      group: 'GitHub',
+    })),
+  ];
   const handleConfigOptionChange = (configId: string, value: AcpConfigOptionValue) => {
     setConfigOptionValues((prev) => ({ ...prev, [configId]: value }));
   };
@@ -284,43 +285,52 @@ function StoryHarness({
             }
           />
         }
-        contextTypeNode={<MockContextTypeNode value={contextType} onChange={setContextType} />}
+        contextTypeNode={
+          <MockWorkChatNode
+            chat={contextType === 'chat'}
+            onChange={(chat) => setContextType(chat ? 'chat' : 'local')}
+          />
+        }
         perTypeNode={
-          contextType === 'chat' ? null : contextType === 'github' ? (
-            <MobileNativeSelect
-              value={repo}
-              onChange={setRepo}
-              options={githubRepoOptions}
-              ariaLabel="Repository"
-              triggerContent={
-                <>
-                  <Github className="h-3.5 w-3.5 shrink-0 opacity-70" />
-                  <span className="truncate">{repo}</span>
-                </>
-              }
-            />
-          ) : (
+          contextType === 'chat' ? null : (
             <MobileNativeSelect
-              value={localProject}
-              onChange={setLocalProject}
-              options={localProjectOptions}
+              value={selectedProject}
+              onChange={(value) => {
+                if (value.startsWith('local:')) {
+                  setLocalProject(value.slice('local:'.length));
+                  setContextType('local');
+                } else if (value.startsWith('github:')) {
+                  setRepo(value.slice('github:'.length));
+                  setContextType('github');
+                }
+              }}
+              options={projectOptions}
               ariaLabel="Project"
+              showIndicator={false}
+              className="w-fit max-w-full"
               triggerContent={
                 <>
-                  <Folder className="h-3.5 w-3.5 shrink-0 opacity-70" />
-                  <span className="truncate">{localProject.split(':')[1] ?? 'lody'}</span>
+                  {contextType === 'github' ? (
+                    <Github className="h-3.5 w-3.5 shrink-0 opacity-70" />
+                  ) : (
+                    <Folder className="h-3.5 w-3.5 shrink-0 opacity-70" />
+                  )}
+                  <span className="truncate">
+                    {contextType === 'github' ? repo : (localProject.split(':')[1] ?? 'lody')}
+                  </span>
                 </>
               }
             />
           )
         }
         branchNode={
-          contextType === 'chat' ? null : (
+          contextType === 'github' || (contextType === 'local' && workdirMode === 'worktree') ? (
             <MobileNativeSelect
               value={branch}
               onChange={setBranch}
               options={branchOptions}
               ariaLabel="Branch"
+              className="w-fit max-w-full"
               triggerContent={
                 <>
                   <GitBranch className="h-3.5 w-3.5 shrink-0 opacity-70" />
@@ -328,10 +338,16 @@ function StoryHarness({
                 </>
               }
             />
-          )
+          ) : null
         }
         secondaryPerTypeNode={
-          contextType === 'local' ? <MockWorkdirModeNode contextType={contextType} /> : null
+          contextType === 'local' ? (
+            <MockWorkdirModeNode
+              contextType={contextType}
+              value={workdirMode}
+              onChange={setWorkdirMode}
+            />
+          ) : null
         }
         composer={
           <MockComposer
@@ -411,6 +427,19 @@ export const LocalContext: Story = {
   render: () => <StoryHarness initialContextType="local" />,
 };
 
+export const LongBranch: Story = {
+  args: {
+    open: true,
+    onOpenChange: () => {},
+    machineNode: null,
+    contextTypeNode: null,
+    composer: null,
+  },
+  render: () => (
+    <StoryHarness initialContextType="local" initialBranch="feat/audit-mobile-coupling" />
+  ),
+};
+
 export const ChatContext: Story = {
   args: {
     open: true,
diff --git a/packages/components/tests/mobile-native-select.test.tsx b/packages/components/tests/mobile-native-select.test.tsx
index bb2ff42fc..74b524285 100644
--- a/packages/components/tests/mobile-native-select.test.tsx
+++ b/packages/components/tests/mobile-native-select.test.tsx
@@ -74,4 +74,49 @@ describe('MobileNativeSelect', () => {
     expect(container.querySelector('svg.lucide-chevrons-up-down')).toBeNull();
     expect(select?.closest('div')?.className).not.toMatch(/\b(?:border|ring)-/);
   });
+
+  it('can hide the visual indicator without disabling the native select', async () => {
+    await act(async () => {
+      root.render(
+        <MobileNativeSelect
+          value="project-1"
+          onChange={() => undefined}
+          options={[
+            { value: 'project-1', label: 'Project 1' },
+            { value: 'project-2', label: 'Project 2' },
+          ]}
+          triggerContent={<span>Project 1</span>}
+          ariaLabel="Project"
+          showIndicator={false}
+        />
+      );
+    });
+
+    expect(container.querySelector('select')?.disabled).toBe(false);
+    expect(container.querySelector('svg.lucide-chevrons-up-down')).toBeNull();
+  });
+
+  it('renders grouped options with native optgroups', async () => {
+    await act(async () => {
+      root.render(
+        <MobileNativeSelect
+          value="local:lody"
+          onChange={() => undefined}
+          options={[
+            { value: 'local:lody', label: 'Lody', group: 'Local' },
+            { value: 'github:lody', label: 'LodyAI/Lody', group: 'GitHub' },
+          ]}
+          triggerContent={<span>Lody</span>}
+          ariaLabel="Project"
+        />
+      );
+    });
+
+    const groups = Array.from(container.querySelectorAll('optgroup'));
+    expect(groups.map((group) => group.label)).toEqual(['Local', 'GitHub']);
+    expect(groups.map((group) => group.querySelector('option')?.textContent)).toEqual([
+      'Lody',
+      'LodyAI/Lody',
+    ]);
+  });
 });

From e3c0585b9a5a1462186f3430aacacf9bec5ca9ed Mon Sep 17 00:00:00 2001
From: spike <zvq@live.com>
Date: Tue, 8 Sep 2026 09:52:44 +0800
Subject: [PATCH 11/11] feat: simplify mobile new chat composition

Model: gpt-6
---
 locales/en.json                               |   1 +
 locales/zh_CN.json                            |   1 +
 .../components/src/components/chat/AGENTS.md  |   7 +-
 .../src/components/chat/chat-composer.tsx     | 447 ++++++++++--------
 .../src/components/chat/chat-landing.tsx      | 141 +++---
 .../src/components/mobile/AGENTS.md           |  19 +-
 .../mobile/mobile-new-chat-sheet.tsx          | 259 +++-------
 .../ChatLandingAttachments.stories.tsx        |   6 +-
 .../stories/MobileNewChatSheet.stories.tsx    | 286 +++++------
 9 files changed, 495 insertions(+), 672 deletions(-)

diff --git a/locales/en.json b/locales/en.json
index dde6cf816..4de002949 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -401,6 +401,7 @@
   "chat.mobileNewChat.planModeLabel": "Plan",
   "chat.mobileNewChat.projectLabel": "Project",
   "chat.mobileNewChat.repoLabel": "Repo",
+  "chat.mobileNewChat.roleMachineLocked": "Machine is fixed by the selected Role",
   "chat.mobileNewChat.title": "New chat",
   "chat.mobileNewChat.workLabel": "Work",
   "chat.mobileProject.chatTab": "Chats",
diff --git a/locales/zh_CN.json b/locales/zh_CN.json
index 0563740a8..40c99c622 100644
--- a/locales/zh_CN.json
+++ b/locales/zh_CN.json
@@ -401,6 +401,7 @@
   "chat.mobileNewChat.planModeLabel": "计划",
   "chat.mobileNewChat.projectLabel": "项目",
   "chat.mobileNewChat.repoLabel": "仓库",
+  "chat.mobileNewChat.roleMachineLocked": "所选 Role 已固定运行机器",
   "chat.mobileNewChat.title": "新建对话",
   "chat.mobileNewChat.workLabel": "工作",
   "chat.mobileProject.chatTab": "对话",
diff --git a/packages/components/src/components/chat/AGENTS.md b/packages/components/src/components/chat/AGENTS.md
index b339fd71e..a87f56a5e 100644
--- a/packages/components/src/components/chat/AGENTS.md
+++ b/packages/components/src/components/chat/AGENTS.md
@@ -29,9 +29,10 @@
   local projects and agent configs; changing away from a selected local project's
   machine clears that project instead of silently choosing another one. GitHub
   projects remain machine-independent. Mobile New Chat uses the same unified
-  Local/GitHub project model, grouped by source in its native picker, with Work/Chat as its only
-  top-level mode. Its local Worktree checkbox shares the project row; unchecked directly uses the
-  local folder without spelling out a redundant Local files mode. A single-member workspace never
+  Local/GitHub project model, grouped by source in its native header picker. Its first option
+  is no project (Chat), so there is no separate Work/Chat switch. Switching contexts preserves
+  the draft and run configuration; a selected Role prevents crossing machines. Machine,
+  branch, and Worktree join run config in the bottom scrolling rail. Unchecked Worktree directly uses the local folder without spelling out a redundant Local files mode. A single-member workspace never
   passes project-sharing state. In multi-member workspaces, local project options
   and the selected desktop trigger show only an effective `Private` status; Team
   and unresolved states stay hidden. Effective access still combines
diff --git a/packages/components/src/components/chat/chat-composer.tsx b/packages/components/src/components/chat/chat-composer.tsx
index f38756265..f4f1b51b3 100644
--- a/packages/components/src/components/chat/chat-composer.tsx
+++ b/packages/components/src/components/chat/chat-composer.tsx
@@ -99,6 +99,8 @@ export interface ChatComposerProps {
   title?: ReactNode;
   tone?: ChatComposerTone;
   variant?: ChatComposerVariant;
+  /** Fill a new-chat sheet with a borderless editor and a horizontally scrolling footer. */
+  fillSheet?: boolean;
   mentionSource?: MentionProjectSource;
   availableCommands?: AcpCommandSummary[];
   /** False while this retained composer is not the active command surface. */
@@ -234,6 +236,7 @@ export function ChatComposer({
   title,
   tone = 'light',
   variant = 'landing',
+  fillSheet = false,
   mentionSource,
   availableCommands,
   commandsEnabled = true,
@@ -652,6 +655,7 @@ export function ChatComposer({
         className={cn(
           'flex w-full flex-col',
           isDialog ? 'gap-3' : isLanding ? 'gap-12' : 'gap-2',
+          fillSheet && 'min-h-0 flex-1',
           className
         )}
       >
@@ -662,7 +666,13 @@ export function ChatComposer({
         ) : null}
 
         {!isDialog ? (
-          <div className={cn('flex flex-col', isLanding ? 'gap-2' : 'gap-1')}>
+          <div
+            className={cn(
+              'flex flex-col',
+              isLanding ? 'gap-2' : 'gap-1',
+              fillSheet && 'min-h-0 flex-1'
+            )}
+          >
             {/* Top selector (repo, branch) - shown outside and above the input box */}
             {topSelector ? (
               <div className="flex w-full min-w-0 select-none items-center gap-1">
@@ -670,7 +680,13 @@ export function ChatComposer({
               </div>
             ) : null}
             <div
-              className={cn(boxContainerClassName, imageDropClassName, 'group relative')}
+              className={cn(
+                boxContainerClassName,
+                imageDropClassName,
+                'group relative',
+                fillSheet &&
+                  'min-h-0 flex-1 gap-0 rounded-none border-0 bg-background p-0 dark:bg-background [--mention-chip-surface:hsl(var(--background))] dark:[--mention-chip-surface:hsl(var(--background))]'
+              )}
               onDragEnter={canHandleImageDrop ? handleImageDragEnter : undefined}
               onDragOver={canHandleImageDrop ? handleImageDragOver : undefined}
               onDragLeave={canHandleImageDrop ? handleImageDragLeave : undefined}
@@ -698,220 +714,230 @@ export function ChatComposer({
                   : undefined
               }
             >
-              {commentReferenceItems.length > 0 ? (
-                <div className="flex flex-wrap gap-2 pb-1">
-                  {commentReferenceItems.map((item) => (
-                    <CommentReferenceChip
-                      key={item.localId}
-                      item={item}
-                      onRemove={onCommentReferenceRemove}
-                      onClick={onCommentReferenceClick}
-                      revealRemoveOnClick={revealCommentReferenceRemoveOnClick}
-                    />
-                  ))}
-                </div>
-              ) : null}
-              {visualAnnotationReferenceItems.length > 0 ? (
-                <div className="flex flex-wrap gap-2 pb-1">
-                  {visualAnnotationReferenceItems.map((item) => (
-                    <VisualAnnotationReferenceChip
-                      key={item.localId}
-                      item={item}
-                      onRemove={onVisualAnnotationReferenceRemove}
-                      revealRemoveOnClick={revealCommentReferenceRemoveOnClick}
-                    />
-                  ))}
-                </div>
-              ) : null}
-              {imageItems.length > 0 || fileItems.length > 0 ? (
-                // Unified horizontal, scrollable attachment strip: image thumbnails
-                // and file cards share the same square-card shape and scroll
-                // sideways together (cards step up in size on mobile for touch).
-                <div className="input-scrollbar flex gap-2 overflow-x-auto pb-1">
-                  {imageItems.map((image) => (
-                    <div
-                      key={image.id}
-                      title={
-                        image.status === 'failed' ? image.error || uploadFailedLabel : undefined
-                      }
-                      className={cn(
-                        'relative shrink-0 overflow-hidden rounded-xl border',
-                        isMobile ? 'h-[104px] w-[104px]' : 'h-20 w-20',
-                        image.status === 'failed' && 'border-destructive/50'
-                      )}
-                    >
-                      <button
-                        type="button"
-                        className="h-full w-full"
-                        onClick={() => setPreviewImageUrl(image.previewUrl)}
-                        aria-label={image.name}
+              <div className={fillSheet ? 'max-h-[30%] shrink-0 overflow-y-auto px-4' : 'contents'}>
+                {commentReferenceItems.length > 0 ? (
+                  <div className="flex flex-wrap gap-2 pb-1">
+                    {commentReferenceItems.map((item) => (
+                      <CommentReferenceChip
+                        key={item.localId}
+                        item={item}
+                        onRemove={onCommentReferenceRemove}
+                        onClick={onCommentReferenceClick}
+                        revealRemoveOnClick={revealCommentReferenceRemoveOnClick}
+                      />
+                    ))}
+                  </div>
+                ) : null}
+                {visualAnnotationReferenceItems.length > 0 ? (
+                  <div className="flex flex-wrap gap-2 pb-1">
+                    {visualAnnotationReferenceItems.map((item) => (
+                      <VisualAnnotationReferenceChip
+                        key={item.localId}
+                        item={item}
+                        onRemove={onVisualAnnotationReferenceRemove}
+                        revealRemoveOnClick={revealCommentReferenceRemoveOnClick}
+                      />
+                    ))}
+                  </div>
+                ) : null}
+                {imageItems.length > 0 || fileItems.length > 0 ? (
+                  // Unified horizontal, scrollable attachment strip: image thumbnails
+                  // and file cards share the same square-card shape and scroll
+                  // sideways together (cards step up in size on mobile for touch).
+                  <div className="input-scrollbar flex gap-2 overflow-x-auto pb-1">
+                    {imageItems.map((image) => (
+                      <div
+                        key={image.id}
+                        title={
+                          image.status === 'failed' ? image.error || uploadFailedLabel : undefined
+                        }
+                        className={cn(
+                          'relative shrink-0 overflow-hidden rounded-xl border',
+                          isMobile ? 'h-[104px] w-[104px]' : 'h-20 w-20',
+                          image.status === 'failed' && 'border-destructive/50'
+                        )}
                       >
-                        <img
-                          src={image.previewUrl}
-                          alt={image.name}
-                          className={cn(
-                            'h-full w-full object-cover',
-                            image.status !== 'uploaded' && 'grayscale'
-                          )}
-                        />
-                        {image.status === 'uploading' ? (
-                          <div
-                            className="absolute inset-0 bg-black/45 transition-[clip-path]"
-                            style={{
-                              clipPath: `inset(${Math.max(0, Math.min(100, image.progress))}% 0 0 0)`,
-                            }}
+                        <button
+                          type="button"
+                          className="h-full w-full"
+                          onClick={() => setPreviewImageUrl(image.previewUrl)}
+                          aria-label={image.name}
+                        >
+                          <img
+                            src={image.previewUrl}
+                            alt={image.name}
+                            className={cn(
+                              'h-full w-full object-cover',
+                              image.status !== 'uploaded' && 'grayscale'
+                            )}
                           />
+                          {image.status === 'uploading' ? (
+                            <div
+                              className="absolute inset-0 bg-black/45 transition-[clip-path]"
+                              style={{
+                                clipPath: `inset(${Math.max(0, Math.min(100, image.progress))}% 0 0 0)`,
+                              }}
+                            />
+                          ) : null}
+                          {image.status === 'failed' ? (
+                            <div className="absolute inset-0 bg-black/45" />
+                          ) : null}
+                        </button>
+                        <div className="absolute right-1 top-1">
+                          <Button
+                            type="button"
+                            variant="secondary"
+                            size="icon"
+                            className={cn('rounded-full', isMobile ? 'h-6 w-6' : 'h-5 w-5')}
+                            onClick={() => onImageRemove?.(image.id)}
+                            aria-label={removeImageLabel}
+                          >
+                            <X className="h-3 w-3" />
+                          </Button>
+                        </div>
+                        {image.status === 'uploading' ? (
+                          <div className="absolute inset-x-0 bottom-0 bg-black/60 px-1 py-0.5 text-center text-[10px] text-white">
+                            {image.progress}%
+                          </div>
                         ) : null}
                         {image.status === 'failed' ? (
-                          <div className="absolute inset-0 bg-black/45" />
+                          <button
+                            type="button"
+                            onClick={() => onImageRetry?.(image.id)}
+                            aria-label={retryUploadLabel}
+                            className="absolute inset-x-0 bottom-0 flex items-center justify-center gap-1 bg-black/65 px-1 py-1 text-[10px] font-medium text-white transition hover:bg-black/75"
+                          >
+                            <RefreshCw className="h-3 w-3 shrink-0" />
+                            <span className="truncate">{uploadFailedShortLabel}</span>
+                          </button>
                         ) : null}
-                      </button>
-                      <div className="absolute right-1 top-1">
-                        <Button
-                          type="button"
-                          variant="secondary"
-                          size="icon"
-                          className={cn('rounded-full', isMobile ? 'h-6 w-6' : 'h-5 w-5')}
-                          onClick={() => onImageRemove?.(image.id)}
-                          aria-label={removeImageLabel}
-                        >
-                          <X className="h-3 w-3" />
-                        </Button>
                       </div>
-                      {image.status === 'uploading' ? (
-                        <div className="absolute inset-x-0 bottom-0 bg-black/60 px-1 py-0.5 text-center text-[10px] text-white">
-                          {image.progress}%
-                        </div>
-                      ) : null}
-                      {image.status === 'failed' ? (
-                        <button
-                          type="button"
-                          onClick={() => onImageRetry?.(image.id)}
-                          aria-label={retryUploadLabel}
-                          className="absolute inset-x-0 bottom-0 flex items-center justify-center gap-1 bg-black/65 px-1 py-1 text-[10px] font-medium text-white transition hover:bg-black/75"
-                        >
-                          <RefreshCw className="h-3 w-3 shrink-0" />
-                          <span className="truncate">{uploadFailedShortLabel}</span>
-                        </button>
-                      ) : null}
-                    </div>
-                  ))}
-                  {fileItems.map((file) => (
-                    <div
-                      key={file.id}
-                      title={file.status === 'failed' ? file.error || uploadFailedLabel : undefined}
-                      className={cn(
-                        'relative flex shrink-0 flex-col overflow-hidden rounded-xl border p-2',
-                        isMobile ? 'h-[104px] w-[104px]' : 'h-20 w-20',
-                        file.status === 'failed'
-                          ? 'border-destructive/45 bg-muted/60'
-                          : 'border-border/60 bg-muted/60'
-                      )}
-                    >
-                      <span
+                    ))}
+                    {fileItems.map((file) => (
+                      <div
+                        key={file.id}
+                        title={
+                          file.status === 'failed' ? file.error || uploadFailedLabel : undefined
+                        }
                         className={cn(
-                          'max-w-[64%] truncate font-semibold uppercase tracking-wide',
+                          'relative flex shrink-0 flex-col overflow-hidden rounded-xl border p-2',
+                          isMobile ? 'h-[104px] w-[104px]' : 'h-20 w-20',
                           file.status === 'failed'
-                            ? 'text-destructive/80'
-                            : 'text-muted-foreground',
-                          isMobile ? 'text-xs' : 'text-[10px]'
-                        )}
-                      >
-                        {getFileTypeLabel(file.name)}
-                      </span>
-                      <span
-                        className={cn(
-                          'mt-1 break-words text-left font-medium text-input-foreground',
-                          isMobile ? 'line-clamp-3 text-sm' : 'line-clamp-2 text-xs'
+                            ? 'border-destructive/45 bg-muted/60'
+                            : 'border-border/60 bg-muted/60'
                         )}
                       >
-                        {file.name}
-                      </span>
-                      {file.status === 'failed' ? (
-                        <button
-                          type="button"
-                          onClick={() => onFileRetry?.(file.id)}
-                          aria-label={retryUploadLabel}
-                          className="mt-auto flex w-fit items-center gap-1 pt-1 text-[10px] font-medium text-destructive transition hover:text-destructive/80"
+                        <span
+                          className={cn(
+                            'max-w-[64%] truncate font-semibold uppercase tracking-wide',
+                            file.status === 'failed'
+                              ? 'text-destructive/80'
+                              : 'text-muted-foreground',
+                            isMobile ? 'text-xs' : 'text-[10px]'
+                          )}
                         >
-                          <RefreshCw className="h-3 w-3 shrink-0" />
-                          <span className="truncate">{uploadFailedShortLabel}</span>
-                        </button>
-                      ) : (
-                        <span className="mt-auto truncate pt-1 text-[10px] text-muted-foreground">
-                          {file.status === 'preparing'
-                            ? t('sessions.filePreparing', 'Preparing… {{progress}}%', {
-                                progress: file.progress,
-                              })
-                            : file.status === 'uploading'
-                              ? `${file.progress}%`
-                              : file.status === 'verifying'
-                                ? t('sessions.fileVerifying', 'Verifying…')
-                                : file.sizeLabel}
+                          {getFileTypeLabel(file.name)}
                         </span>
-                      )}
-                      {file.status === 'preparing' ||
-                      file.status === 'uploading' ||
-                      file.status === 'verifying' ? (
-                        <div className="absolute inset-x-0 bottom-0 h-1 bg-muted">
-                          <div
-                            className="h-full bg-primary transition-[width]"
-                            style={{
-                              width: `${Math.max(0, Math.min(100, file.progress))}%`,
-                            }}
-                          />
-                        </div>
-                      ) : null}
-                      <div className="absolute right-1 top-1">
-                        <Button
-                          type="button"
-                          variant="secondary"
-                          size="icon"
-                          className={cn('rounded-full', isMobile ? 'h-6 w-6' : 'h-5 w-5')}
-                          onClick={() => onFileRemove?.(file.id)}
-                          aria-label={removeAttachmentLabel}
+                        <span
+                          className={cn(
+                            'mt-1 break-words text-left font-medium text-input-foreground',
+                            isMobile ? 'line-clamp-3 text-sm' : 'line-clamp-2 text-xs'
+                          )}
                         >
-                          <X className="h-3 w-3" />
-                        </Button>
+                          {file.name}
+                        </span>
+                        {file.status === 'failed' ? (
+                          <button
+                            type="button"
+                            onClick={() => onFileRetry?.(file.id)}
+                            aria-label={retryUploadLabel}
+                            className="mt-auto flex w-fit items-center gap-1 pt-1 text-[10px] font-medium text-destructive transition hover:text-destructive/80"
+                          >
+                            <RefreshCw className="h-3 w-3 shrink-0" />
+                            <span className="truncate">{uploadFailedShortLabel}</span>
+                          </button>
+                        ) : (
+                          <span className="mt-auto truncate pt-1 text-[10px] text-muted-foreground">
+                            {file.status === 'preparing'
+                              ? t('sessions.filePreparing', 'Preparing… {{progress}}%', {
+                                  progress: file.progress,
+                                })
+                              : file.status === 'uploading'
+                                ? `${file.progress}%`
+                                : file.status === 'verifying'
+                                  ? t('sessions.fileVerifying', 'Verifying…')
+                                  : file.sizeLabel}
+                          </span>
+                        )}
+                        {file.status === 'preparing' ||
+                        file.status === 'uploading' ||
+                        file.status === 'verifying' ? (
+                          <div className="absolute inset-x-0 bottom-0 h-1 bg-muted">
+                            <div
+                              className="h-full bg-primary transition-[width]"
+                              style={{
+                                width: `${Math.max(0, Math.min(100, file.progress))}%`,
+                              }}
+                            />
+                          </div>
+                        ) : null}
+                        <div className="absolute right-1 top-1">
+                          <Button
+                            type="button"
+                            variant="secondary"
+                            size="icon"
+                            className={cn('rounded-full', isMobile ? 'h-6 w-6' : 'h-5 w-5')}
+                            onClick={() => onFileRemove?.(file.id)}
+                            aria-label={removeAttachmentLabel}
+                          >
+                            <X className="h-3 w-3" />
+                          </Button>
+                        </div>
                       </div>
-                    </div>
-                  ))}
-                </div>
-              ) : null}
-
-              <CombinedMentionTextarea
-                id={promptId}
-                ref={promptRef}
-                mentionSource={mentionSource}
-                availableCommands={availableCommands}
-                commandsEnabled={commandsEnabled}
-                skillAgent={skillAgent}
-                currentSessionId={currentSessionId}
-                value={promptValue}
-                onValueChange={onPromptChange}
-                externalMentions={pastedTextMentions}
-                onExternalMentionsChange={handlePastedTextMentionsChange}
-                onMentionClick={handleMentionClick}
-                getMentionChip={getComposerMentionChip}
-                onMentionRangesChange={onMentionRangesChange}
-                persistedMentions={persistedMentions}
-                draftKey={draftKey}
-                mentionActionsRef={mentionActionsRef}
-                onKeyDown={onPromptKeyDown}
-                onPaste={onPromptPaste}
-                onCopy={handlePromptCopy}
-                disabled={promptDisabled}
-                rows={effectivePromptRows}
-                enterKeyHint={promptEnterKeyHint}
-                autoFocus={promptAutoFocus}
-                placeholder={resolvedPromptPlaceholder}
-                // While the ⌘L focus hint is shown the box is empty, so the (long)
-                // placeholder would otherwise run under the top-right ⌘L chip. Reserve
-                // room for it so the placeholder wraps before the chip; the padding is
-                // dropped once the user types (showFocusHint → false → full width).
-                className={cn(boxTextareaClassName, showFocusHint && 'pr-16')}
-                data-keyboard-nav="composer"
-              />
+                    ))}
+                  </div>
+                ) : null}
+              </div>
+              <div className={fillSheet ? 'min-h-0 flex-1 px-4 pt-3 [&>div]:h-full' : 'contents'}>
+                <CombinedMentionTextarea
+                  id={promptId}
+                  ref={promptRef}
+                  mentionSource={mentionSource}
+                  availableCommands={availableCommands}
+                  commandsEnabled={commandsEnabled}
+                  skillAgent={skillAgent}
+                  currentSessionId={currentSessionId}
+                  value={promptValue}
+                  onValueChange={onPromptChange}
+                  externalMentions={pastedTextMentions}
+                  onExternalMentionsChange={handlePastedTextMentionsChange}
+                  onMentionClick={handleMentionClick}
+                  getMentionChip={getComposerMentionChip}
+                  onMentionRangesChange={onMentionRangesChange}
+                  persistedMentions={persistedMentions}
+                  draftKey={draftKey}
+                  mentionActionsRef={mentionActionsRef}
+                  onKeyDown={onPromptKeyDown}
+                  onPaste={onPromptPaste}
+                  onCopy={handlePromptCopy}
+                  disabled={promptDisabled}
+                  rows={effectivePromptRows}
+                  enterKeyHint={promptEnterKeyHint}
+                  autoFocus={promptAutoFocus}
+                  placeholder={resolvedPromptPlaceholder}
+                  // While the ⌘L focus hint is shown the box is empty, so the (long)
+                  // placeholder would otherwise run under the top-right ⌘L chip. Reserve
+                  // room for it so the placeholder wraps before the chip; the padding is
+                  // dropped once the user types (showFocusHint → false → full width).
+                  containerClassName={fillSheet ? 'h-full' : undefined}
+                  className={cn(
+                    boxTextareaClassName,
+                    showFocusHint && 'pr-16',
+                    fillSheet && 'h-full min-h-0 px-0 text-base overflow-y-auto'
+                  )}
+                  data-keyboard-nav="composer"
+                />
+              </div>
 
               {showFocusHint ? (
                 <div
@@ -936,7 +962,13 @@ export function ChatComposer({
                 </div>
               ) : null}
 
-              <div className={boxFooterClassName}>
+              <div
+                className={cn(
+                  boxFooterClassName,
+                  fillSheet &&
+                    'shrink-0 border-t border-border/60 px-3 py-2 [&>button]:h-10 [&>button]:w-10'
+                )}
+              >
                 {/* Single bottom-left "+" attachment entry (replaces the old
                     image + paperclip icons). Hidden when neither add callback
                     is provided. */}
@@ -952,7 +984,14 @@ export function ChatComposer({
                 {/* Single row only: long model names must shrink/truncate inside
                     the run-config face rather than wrapping config chips onto a
                     second line (especially on mobile). */}
-                <div className="flex min-w-0 flex-1 flex-nowrap items-center gap-x-2 overflow-hidden">
+                <div
+                  className={cn(
+                    'flex min-w-0 flex-1 flex-nowrap items-center gap-x-2',
+                    fillSheet
+                      ? 'overflow-x-auto overscroll-x-contain [scrollbar-width:none] [&::-webkit-scrollbar]:hidden'
+                      : 'overflow-hidden'
+                  )}
+                >
                   {footerSelector ?? selector}
                 </div>
 
diff --git a/packages/components/src/components/chat/chat-landing.tsx b/packages/components/src/components/chat/chat-landing.tsx
index c14438740..7be8a33f1 100644
--- a/packages/components/src/components/chat/chat-landing.tsx
+++ b/packages/components/src/components/chat/chat-landing.tsx
@@ -49,6 +49,7 @@ import {
   Loader2,
   LockKeyhole,
   Monitor,
+  MessageSquare,
   PanelLeft,
   RefreshCw,
   X,
@@ -3815,15 +3816,29 @@ function WorkspaceChatLanding({
   const mobileSheetMachineNode = (
     <MobileNativeSelect<MachineId>
       value={selectedMachineId}
-      onChange={(id) => handleMachineChange(id)}
-      options={mobileSheetMachineOptions}
+      onChange={(id) => {
+        if (activeAgentRole && id !== activeAgentRole.machineId) return;
+        handleMachineChange(id);
+      }}
+      options={mobileSheetMachineOptions.map((option) =>
+        activeAgentRole && option.value !== activeAgentRole.machineId
+          ? {
+              ...option,
+              disabled: true,
+              label: `${option.label} — ${t('chat.mobileNewChat.roleMachineLocked')}`,
+            }
+          : option
+      )}
       disabled={hasNoMachine}
       loading={isInitialDataLoading}
       ariaLabel={t('chat.machineSelector.placeholder', 'Machine')}
       triggerContent={
         <>
           <Monitor className="h-3.5 w-3.5 shrink-0 opacity-70" aria-hidden="true" />
-          <span className="truncate">
+          <span
+            className="truncate"
+            title={activeAgentRole ? t('chat.mobileNewChat.roleMachineLocked') : undefined}
+          >
             {isInitialDataLoading
               ? t('chat.machineSelector.loading', 'Loading machine...')
               : (mobileSheetSelectedMachineLabel ??
@@ -3839,7 +3854,7 @@ function WorkspaceChatLanding({
      desktop. The encoded value is only a native-select key; the selection map
      keeps parsing and business behavior in the shared selection handler. */
   const mobileSheetProjectModel = useMemo(() => {
-    const selections = new Map<string, Exclude<UnifiedProjectSelection, { kind: 'none' }>>();
+    const selections = new Map<string, UnifiedProjectSelection>([['chat', { kind: 'none' }]]);
     const options: Array<MobileNativeSelectOption<string> & { lastUsedAt?: number }> = [];
     const localLabel = t('chat.contextSwitch.localProjects', 'Local');
     const githubLabel = t('chat.contextSwitch.github', 'GitHub');
@@ -3869,6 +3884,10 @@ function WorkspaceChatLanding({
       });
     }
     options.sort(compareUnifiedProjectOptions);
+    options.unshift({
+      value: 'chat',
+      label: t('chat.projectPicker.clear', "Don't work in a project"),
+    });
     return { options, selections };
   }, [desktopLocalProjectOptions, mobileSheetRecency.byRepo, repositories, t]);
   const mobileSheetSelectedProjectValue =
@@ -3879,7 +3898,9 @@ function WorkspaceChatLanding({
         )}`
       : unifiedProjectSelection.kind === 'github'
         ? `github:${unifiedProjectSelection.repoFullName}`
-        : null;
+        : contextType === 'chat'
+          ? 'chat'
+          : null;
   const mobileSheetSelectedProjectLabel =
     unifiedProjectSelection.kind === 'local'
       ? (desktopLocalProjectOptions.find(
@@ -3887,21 +3908,31 @@ function WorkspaceChatLanding({
         )?.name ?? t('chat.projectPicker.placeholder', 'Select a project'))
       : unifiedProjectSelection.kind === 'github'
         ? unifiedProjectSelection.repoFullName
-        : t('chat.projectPicker.placeholder', 'Select a project');
+        : contextType === 'chat'
+          ? t('chat.contextSwitch.chat', 'Chat')
+          : t('chat.projectPicker.placeholder', 'Select a project');
   const mobileSheetProjectNode = (
     <MobileNativeSelect<string>
       value={mobileSheetSelectedProjectValue}
       onChange={(value) => {
         const selection = mobileSheetProjectModel.selections.get(value);
-        if (selection) handleUnifiedProjectChange(selection);
+        if (!selection) return;
+        if (
+          selection.kind === 'local' &&
+          activeAgentRole &&
+          selection.machineId !== activeAgentRole.machineId
+        )
+          return;
+        handleUnifiedProjectChange(selection);
       }}
       options={mobileSheetProjectModel.options}
       ariaLabel={t('chat.projectPicker.placeholder', 'Select a project')}
-      showIndicator={false}
-      className="w-fit max-w-full"
+      className="h-11 w-fit max-w-full text-base font-semibold"
       triggerContent={
         <>
-          {unifiedProjectSelection.kind === 'github' ? (
+          {contextType === 'chat' ? (
+            <MessageSquare className="h-4 w-4 shrink-0 opacity-70" aria-hidden="true" />
+          ) : unifiedProjectSelection.kind === 'github' ? (
             <GithubIcon className="h-3.5 w-3.5 shrink-0 opacity-70" aria-hidden="true" />
           ) : (
             <FolderOpen className="h-3.5 w-3.5 shrink-0 opacity-70" aria-hidden="true" />
@@ -4019,72 +4050,6 @@ function WorkspaceChatLanding({
      knob lives inside MobileSessionRunConfig. */
   const mobileSheetBelowComposerNode = null;
 
-  const mobileSheetLastWorkProjectRef = useRef<Exclude<
-    UnifiedProjectSelection,
-    { kind: 'none' }
-  > | null>(null);
-  useEffect(() => {
-    if (unifiedProjectSelection.kind !== 'none') {
-      mobileSheetLastWorkProjectRef.current = unifiedProjectSelection;
-    }
-  }, [unifiedProjectSelection]);
-  const handleMobileSheetModeChange = useCallback(
-    (mode: 'work' | 'chat') => {
-      if (mode === 'chat') {
-        setContextType('chat');
-        return;
-      }
-      if (contextType !== 'chat') return;
-      const remembered = mobileSheetLastWorkProjectRef.current;
-      const rememberedValue =
-        remembered?.kind === 'local'
-          ? `local:${buildLocalProjectKey(remembered.machineId, remembered.localProjectId)}`
-          : remembered?.kind === 'github'
-            ? `github:${remembered.repoFullName}`
-            : null;
-      const selection =
-        (rememberedValue ? mobileSheetProjectModel.selections.get(rememberedValue) : undefined) ??
-        mobileSheetProjectModel.selections.values().next().value;
-      if (selection) handleUnifiedProjectChange(selection);
-    },
-    [contextType, handleUnifiedProjectChange, mobileSheetProjectModel.selections]
-  );
-
-  /* Work / Chat is the only top-level mode. Local and GitHub are properties of
-     the unified project selection rather than separate modes. */
-  const mobileSheetContextSwitchNode = (
-    <div
-      role="group"
-      aria-label={t('chat.mobileNewChat.contextTypeLabel', 'Type')}
-      className="flex h-8 select-none items-center rounded-lg bg-muted/70 p-0.5 text-xs font-medium"
-    >
-      {(['work', 'chat'] as const).map((mode) => {
-        const active = mode === 'chat' ? contextType === 'chat' : contextType !== 'chat';
-        const disabled = mode === 'work' && mobileSheetProjectModel.options.length === 0;
-        return (
-          <button
-            key={mode}
-            type="button"
-            aria-pressed={active}
-            disabled={disabled}
-            onClick={() => handleMobileSheetModeChange(mode)}
-            className={cn(
-              'h-7 rounded-md px-2.5 transition-colors',
-              active
-                ? 'bg-background text-foreground shadow-xs'
-                : 'text-muted-foreground hover:text-foreground',
-              disabled && 'cursor-not-allowed opacity-40'
-            )}
-          >
-            {mode === 'work'
-              ? t('chat.mobileNewChat.workLabel', 'Work')
-              : t('chat.contextSwitch.chat', 'Chat')}
-          </button>
-        );
-      })}
-    </div>
-  );
-
   // ── Hints ──
   const hasNoAgentConfig = executorConfigs.length === 0;
   const hintType: ChatLandingHintType = getChatLandingHintType({
@@ -6004,13 +5969,12 @@ function WorkspaceChatLanding({
     },
     coordinator: MobileInlinePickerCoordinator,
     machineNode: mobileSheetMachineNode,
-    contextTypeNode: mobileSheetContextSwitchNode,
-    /* Local folders and GitHub repositories share this picker. Chat has no
-       project row; branch appears beside the selected project when relevant. */
-    perTypeNode: contextType === 'chat' ? null : mobileSheetProjectNode,
+    contextTypeNode: null,
+    /* The header picker includes Chat; only project contexts expose branch controls. */
+    perTypeNode: mobileSheetProjectNode,
     branchNode: contextType === 'chat' ? null : mobileSheetBranchNode,
     secondaryPerTypeNode: mobileSheetWorkdirModeNode,
-    composer: (
+    composer: (targetControls) => (
       <ErrorBoundary
         name="MobileNewChatSheetComposer"
         variant="section"
@@ -6019,6 +5983,7 @@ function WorkspaceChatLanding({
         <MobileInlinePickerRowSlot>
           {sessionLimitNoticeNode}
           <ChatComposer
+            fillSheet
             tone={tone}
             variant="session"
             mentionSource={mentionSource}
@@ -6051,7 +6016,14 @@ function WorkspaceChatLanding({
             onFileRemove={submitting ? undefined : handleRemoveFile}
             onFileRetry={submitting ? undefined : handleRetryFile}
             mcp={mcpSelection.menu}
-            footerSelector={mobileSheetFooterSelectorNode}
+            footerSelector={
+              <>
+                <div className="flex h-10 w-max max-w-[70vw] shrink-0 items-center rounded-full border border-border/60 bg-muted/50 px-2">
+                  {mobileSheetFooterSelectorNode}
+                </div>
+                {targetControls}
+              </>
+            }
             statusMessage={visibleComposerStatus?.message}
             statusTone={visibleComposerStatus?.tone}
             primaryAction={
@@ -6067,7 +6039,7 @@ function WorkspaceChatLanding({
                 /* Match the in-session mobile composer send face: solid
                    foreground disc + ArrowUp (not the old primary-tint chip). */
                 className={cn(
-                  'h-8 w-8 rounded-full shadow-xs transition-all',
+                  'h-10 w-10 rounded-full shadow-xs transition-all',
                   'bg-foreground text-background hover:bg-foreground/90 hover:text-background active:translate-y-[1px]'
                 )}
               >
@@ -6078,8 +6050,7 @@ function WorkspaceChatLanding({
                 )}
               </Button>
             }
-            autoResize
-            maxRows={6}
+            autoResize={false}
           />
         </MobileInlinePickerRowSlot>
       </ErrorBoundary>
diff --git a/packages/components/src/components/mobile/AGENTS.md b/packages/components/src/components/mobile/AGENTS.md
index d969cd900..0e88caa38 100644
--- a/packages/components/src/components/mobile/AGENTS.md
+++ b/packages/components/src/components/mobile/AGENTS.md
@@ -225,14 +225,17 @@ embedded` lazy-imported from `../tasks/tasks-workspace.tsx` (`embedded`
   exports the legacy `MobileModelPickerLabel` helpers for any remaining chip
   faces; `mobile-fast-plan-toggles.tsx` is no longer mounted on new-chat
   (Plan/Fast live inside the run-config sheet).
-- New-chat puts the machine and compact Work/Chat switch on one row. Work shows one unified
-  Local-project/GitHub-repository picker (matching desktop); its native options use Local/GitHub
-  groups instead of appending a source suffix to every project name. Chat hides the entire project
-  section. Project, optional branch, and the local-only Worktree checkbox share one row; direct local
-  files are the implicit unchecked state rather than a second visible mode. The project trigger fits
-  short names, caps long ones, and omits the chevrons so Branch follows it without a false spacer;
-  Branch also fits short names but may consume the flexible middle for a long ref, while the Worktree
-  checkbox stays pinned to the row's right edge.
+- New-chat is a full-height writing sheet. The unified Local/GitHub project picker sits
+  in the header and remains interactive in Chat: no project is its first option, followed
+  by Local/GitHub projects. The trigger reads Chat or the selected project, with a disclosure
+  indicator. There is no separate Work/Chat switch or implicit restore/first-project fallback.
+  Run config comes first in the horizontally scrolling footer, followed by machine, optional
+  branch, and local Worktree. Attachment and send remain outside the scrolling selection rail. Use the
+  composer's explicit `fillSheet` layout and the sheet's composer render slot, not CSS
+  selectors that reach into another component's internal layout. The textarea fills the
+  available body and scrolls internally; keyboard height reduces the sheet height while
+  lifting its bottom by the same amount. Local/GitHub native option groups and unchecked
+  Worktree meaning direct local files remain unchanged.
   Target selectors use the backgroundless `mobile-native-select.tsx` face; its transparent real `<select>`
   owns the whole hit target so touch opens the platform option picker. Do not route these
   rows back through the app-owned inline picker. When no enabled alternative to the
diff --git a/packages/components/src/components/mobile/mobile-new-chat-sheet.tsx b/packages/components/src/components/mobile/mobile-new-chat-sheet.tsx
index 2720093a5..b08c4d8e5 100644
--- a/packages/components/src/components/mobile/mobile-new-chat-sheet.tsx
+++ b/packages/components/src/components/mobile/mobile-new-chat-sheet.tsx
@@ -1,10 +1,8 @@
-import { Fragment, useRef, type ComponentType, type CSSProperties, type ReactNode } from 'react';
-import { AnimatePresence, motion } from 'framer-motion';
-import { X } from 'lucide-react';
+import { Fragment, type ComponentType, type CSSProperties, type ReactNode } from 'react';
+import { ChevronLeft } from 'lucide-react';
 
 import { Drawer, DrawerContent, DrawerDescription, DrawerTitle } from '@/ui/drawer';
-import { MobileInlinePickerRowSlot } from '@/components/mobile/mobile-inline-picker';
-import { useKeyboardAwareScrollIntoView } from '@/hooks/use-keyboard-aware-scroll-into-view';
+import { useKeyboardAwareSheet } from '@/hooks/use-keyboard-aware-scroll-into-view';
 import { cn } from '@/lib/utils';
 
 export type MobileNewChatSheetLabels = {
@@ -30,18 +28,18 @@ export type MobileNewChatSheetProps = {
 
 export type MobileNewChatSheetContentProps = {
   labels?: MobileNewChatSheetLabels;
-  /** Target row: machine selector on the left. */
+  /** Optional machine selector in the bottom rail. */
   machineNode: ReactNode;
-  /** Target row: compact Work / Chat switcher on the right. */
-  contextTypeNode: ReactNode;
-  /** Unified local-project / GitHub-repository picker. Pass `null` for Chat. */
+  /** @deprecated Context now belongs to the header picker; retained for existing hosts. */
+  contextTypeNode?: ReactNode;
+  /** Unified context picker: no project (Chat), local projects, and GitHub repositories. */
   perTypeNode?: ReactNode | null;
-  /** Optional branch picker rendered beside the unified project picker. */
+  /** Optional branch picker in the bottom rail. */
   branchNode?: ReactNode | null;
-  /** Local-only Worktree toggle rendered inline with the project target. */
+  /** Local-only Worktree toggle in the bottom rail. */
   secondaryPerTypeNode?: ReactNode | null;
-  /** The composer itself — already wired with footer / bottomBar slots. */
-  composer: ReactNode;
+  /** Render a sheet composer with these target controls in its footer rail. */
+  composer: ReactNode | ((targetControls: ReactNode) => ReactNode);
   /** Optional cluster below the composer. Usually empty now that run
      config (agent/model/mode/…) lives in the composer footer via
      `MobileSessionRunConfig`; kept for hosts that still need a slot. */
@@ -60,57 +58,30 @@ export type MobileNewChatSheetContentProps = {
   scrollAreaStyle?: CSSProperties;
 };
 
-/**
- * Bottom sheet that hosts the "new chat" composer flow on mobile home.
- *
- * Layout stacks top-to-bottom per the design comp: machine + Work/Chat →
- * unified project + optional branch / Worktree toggle → composer (footer holds the same
- * `MobileSessionRunConfig` face as the in-session chat). Each row
- * stays compact and lets the selected values provide their own context.
- */
+/** Full-height writing surface; execution controls belong to its bottom rail. */
 export function MobileNewChatSheet({
   open,
   onOpenChange,
   ...contentProps
 }: MobileNewChatSheetProps) {
   const title = contentProps.labels?.title ?? '新建对话';
-  const description = contentProps.labels?.description;
-
+  const keyboard = useKeyboardAwareSheet();
   return (
     <Drawer open={open} onOpenChange={onOpenChange} repositionInputs={false}>
-      {/* Adaptive height: only cap the maximum so every context follows its
-         actual rows and composer height without leaving blank sheet space. */}
-      {/* Shift the whole drawer up by the soft-keyboard height on iOS
-         Capacitor so the textarea + footer stay above the keyboard. The
-         `--native-keyboard-height` CSS var is `0px` on web and Android;
-         Android relies on native WebView resize instead (the main layout
-         uses this var globally, but vaul renders the drawer through a
-         portal so the root keyboard-padding utility doesn't reach it).
-
-         iOS keyboard animates over ~250-350ms with a custom curve.
-         We match it via the inline `style.transition` (Tailwind's
-         `transition-[bottom]` was being overridden by Vaul's own
-         transition declaration) and bump duration to 320ms so the
-         lift lands roughly in sync with the keyboard finishing its
-         own slide-up. Vaul's open/close uses `translate-y`
-         (orthogonal property), so the two animations don't fight. */}
       <DrawerContent
         className={cn(
-          'mobile-new-chat-sheet',
-          'h-auto! max-h-[92dvh]! rounded-t-2xl border-border/60',
-          'bottom-[var(--native-keyboard-height,0px)]!'
+          'mobile-new-chat-sheet mt-0! h-[calc(92dvh-var(--native-keyboard-height,0px))]! max-h-[92dvh]! overflow-hidden rounded-t-[2rem]! border-border/60',
+          keyboard.contentClassName
         )}
-        style={{
-          transition: 'bottom 320ms cubic-bezier(0.32, 0.72, 0, 1)',
-          willChange: 'bottom',
-        }}
       >
         <DrawerTitle className="sr-only">{title}</DrawerTitle>
-        <DrawerDescription className="sr-only">{description ?? title}</DrawerDescription>
+        <DrawerDescription className="sr-only">
+          {contentProps.labels?.description ?? title}
+        </DrawerDescription>
         <MobileNewChatSheetContent
           {...contentProps}
           onClose={() => onOpenChange(false)}
-          className={cn('max-h-full', contentProps.className)}
+          className={cn('min-h-0 flex-1', contentProps.className)}
         />
       </DrawerContent>
     </Drawer>
@@ -134,157 +105,61 @@ export function MobileNewChatSheetContent({
   scrollAreaStyle,
 }: MobileNewChatSheetContentProps) {
   const title = labels.title ?? '新建对话';
-  const description = labels.description;
-  const closeAriaLabel = labels.closeAriaLabel ?? 'Close';
-  /* Keep the focused composer centered above the native keyboard so the
-     footer run-config control isn't left hidden. */
-  const scrollRef = useRef<HTMLDivElement>(null);
-  useKeyboardAwareScrollIntoView(scrollRef);
-
+  const keyboard = useKeyboardAwareSheet({ chromeHeight: '5rem', bodyPadding: '8px' });
+  const targets = (
+    <>
+      {[machineNode, branchNode, secondaryPerTypeNode, contextTypeNode].map((node, index) =>
+        node ? (
+          <div
+            key={index}
+            className="flex h-10 max-w-[min(18rem,70vw)] shrink-0 items-center rounded-full border border-border/60 bg-muted/50 px-2"
+          >
+            {node}
+          </div>
+        ) : null
+      )}
+    </>
+  );
   return (
     <div className={cn('flex min-h-0 flex-col bg-background text-foreground', className)}>
-      <header className="relative flex items-center px-4 pb-2 pt-2">
-        <h2 className="mx-auto select-none text-[0.95rem] font-semibold tracking-tight">{title}</h2>
-        {showCloseButton ? (
-          <button
-            type="button"
-            aria-label={closeAriaLabel}
-            className={cn(
-              'absolute right-3 top-1/2 inline-flex h-9 w-9 -translate-y-1/2 items-center justify-center rounded-full',
-              'text-muted-foreground transition-colors hover:bg-muted/60 hover:text-foreground',
-              '[-webkit-app-region:no-drag]'
-            )}
-            onClick={onClose}
-          >
-            <X className="h-5 w-5" aria-hidden="true" strokeWidth={1.8} />
-          </button>
-        ) : null}
-      </header>
-      <p className={cn(description ? 'px-4 pb-1 text-xs text-muted-foreground' : 'sr-only')}>
-        {description ?? title}
-      </p>
-
       <Coordinator>
+        <header className="relative flex h-16 shrink-0 items-center justify-center px-16">
+          {showCloseButton ? (
+            <button
+              type="button"
+              aria-label={labels.closeAriaLabel ?? 'Close'}
+              className="absolute left-4 flex h-11 w-11 items-center justify-center rounded-full border border-border/60 bg-background text-foreground hover:bg-muted/60"
+              onClick={onClose}
+            >
+              <ChevronLeft className="h-6 w-6" aria-hidden="true" />
+            </button>
+          ) : null}
+          <div className="flex min-w-0 max-w-full justify-center text-lg font-semibold">
+            {perTypeNode ?? <h2 className="truncate">{title}</h2>}
+          </div>
+        </header>
+        {labels.description ? (
+          <p className="px-4 text-xs text-muted-foreground">{labels.description}</p>
+        ) : null}
         <div
-          ref={scrollRef}
-          className={cn(
-            'min-h-0 flex-1 overflow-y-auto px-4',
-            /* Bottom padding is keyboard-aware: when the soft
-               keyboard is down, we need `safe-area-bottom + 12px`
-               so the last row clears the iOS home indicator. When
-               the keyboard is up, the home indicator is hidden
-               behind the keyboard so the safe-area portion is
-               wasted space — it pushes the picker's bottom-anchored
-               search input ~46px above the keyboard, leaving the
-               visible gap the user reported. `max(safe - keyboard,
-               0)` collapses that portion to 0 as soon as the
-               keyboard rises past the safe area, leaving only the
-               12px breathing buffer. */
-            'pb-[calc(12px+max(0px,var(--safe-area-bottom,0px)-var(--native-keyboard-height,0px)))]',
-            scrollAreaClassName
-          )}
-          /* Cap the scroll container's height to the *visible*
-             drawer area: viewport minus the soft keyboard and the
-             header. Without this cap the container stretches to
-             fit content and `scrollIntoView` becomes a no-op —
-             the search input's siblings (branch row / composer
-             / agent chips) just stack between the search and the
-             keyboard. With this cap, content overflows the
-             container, and `PickerSearchInput`'s
-             `scrollIntoView({ block: 'end' })` pulls the search
-             row to the very bottom of the visible drawer area —
-             i.e. flush against the top of the keyboard.
-             `3.25rem` matches the header (`h-9` close button +
-             `pt-2 + pb-2` ≈ 52px). */
-          style={{
-            maxHeight: 'calc(100dvh - var(--native-keyboard-height, 0px) - 3.25rem)',
-            ...scrollAreaStyle,
-          }}
+          ref={keyboard.scrollRef}
+          data-vaul-no-drag
+          className={cn('flex min-h-0 flex-1 flex-col overflow-y-auto', scrollAreaClassName)}
+          style={{ ...keyboard.scrollStyle, ...scrollAreaStyle }}
         >
-          {/* The project target row mounts / unmounts as the user switches
-             between Work and Chat. Local and GitHub share one project picker.
-             `AnimatePresence` + height-animated wrappers slide the
-             rows in / out so the surrounding stack ripples smoothly
-             rather than snapping. */}
-          <div className="flex flex-col pb-2 pt-1">
-            <AnimatedSheetRow alwaysOn>
-              <TargetRow>
-                <div className="min-w-0 flex-1">{machineNode}</div>
-                <div className="shrink-0">{contextTypeNode}</div>
-              </TargetRow>
-            </AnimatedSheetRow>
-            <AnimatePresence initial={false}>
-              {perTypeNode || secondaryPerTypeNode ? (
-                <AnimatedSheetRow key="per-type">
-                  <TargetRow>
-                    <div
-                      className={cn('min-w-0 shrink', branchNode ? 'max-w-[42%]' : 'max-w-[70%]')}
-                    >
-                      {perTypeNode}
-                    </div>
-                    {branchNode ? <div className="min-w-0 flex-1">{branchNode}</div> : null}
-                    {secondaryPerTypeNode ? (
-                      <div className="ml-auto shrink-0 self-center">{secondaryPerTypeNode}</div>
-                    ) : null}
-                  </TargetRow>
-                </AnimatedSheetRow>
-              ) : null}
-            </AnimatePresence>
-          </div>
-
-          <div className="pt-0.5">{composer}</div>
-
-          {belowComposerNode ? (
-            /* Vertical-rhythm wrapper only; the slot owns horizontal
-               layout (e.g. agent left vs permission right). */
-            <div className="px-1 pt-2">{belowComposerNode}</div>
-          ) : null}
+          {typeof composer === 'function' ? (
+            composer(targets)
+          ) : (
+            <>
+              <div className="flex min-h-0 flex-1 flex-col">{composer}</div>
+              <div className="flex shrink-0 gap-2 overflow-x-auto border-t border-border/60 px-3 py-2">
+                {targets}
+              </div>
+            </>
+          )}
+          {belowComposerNode ? <div className="shrink-0 px-3 pt-2">{belowComposerNode}</div> : null}
         </div>
       </Coordinator>
     </div>
   );
 }
-
-/* Wrapper that animates a row's mount / unmount via height accordion.
-   `alwaysOn` skips the AnimatePresence-driven mount transition (for
-   rows that are always rendered like machine + type) but keeps the
-   `pt-1` rhythm so the spacing stays consistent with the rows that
-   do animate in.
-
-   We bake `pt-1` into the wrapper instead of using parent `gap-1`
-   because gap doesn't animate with height — when a row mounts from
-   height 0, the gap above it pops in instantly while the row's body
-   grows, which looks jumpy. Putting the spacing inside the animated
-   container makes it grow with the row. */
-function AnimatedSheetRow({
-  children,
-  alwaysOn = false,
-}: {
-  children: ReactNode;
-  alwaysOn?: boolean;
-}) {
-  if (alwaysOn) {
-    return <div className="pt-1 first:pt-0">{children}</div>;
-  }
-  return (
-    <motion.div
-      initial={{ height: 0, opacity: 0 }}
-      animate={{ height: 'auto', opacity: 1 }}
-      exit={{ height: 0, opacity: 0 }}
-      transition={{ duration: 0.2, ease: [0.4, 0, 0.2, 1] }}
-      className="overflow-hidden"
-    >
-      <div className="pt-1">{children}</div>
-    </motion.div>
-  );
-}
-
-/* Compact target row. The slot still lets a richer picker project a full-width
-   panel below the row if a host supplies one instead of a native select. */
-function TargetRow({ children }: { children: ReactNode }) {
-  return (
-    <MobileInlinePickerRowSlot>
-      <div className="flex min-w-0 items-stretch gap-1 rounded-xl px-1 py-0.5">{children}</div>
-    </MobileInlinePickerRowSlot>
-  );
-}
diff --git a/packages/components/src/stories/ChatLandingAttachments.stories.tsx b/packages/components/src/stories/ChatLandingAttachments.stories.tsx
index 8bc9d94b4..169b0ba07 100644
--- a/packages/components/src/stories/ChatLandingAttachments.stories.tsx
+++ b/packages/components/src/stories/ChatLandingAttachments.stories.tsx
@@ -164,6 +164,7 @@ function MobileNewChatDemo() {
   const composer = (
     <MobileInlinePickerRowSlot>
       <ChatComposer
+        fillSheet
         tone="light"
         variant="session"
         promptId="chat-prompt-mobile-sheet"
@@ -195,8 +196,7 @@ function MobileNewChatDemo() {
             <ArrowUp className="h-5 w-5" />
           </Button>
         }
-        autoResize
-        maxRows={6}
+        autoResize={false}
       />
     </MobileInlinePickerRowSlot>
   );
@@ -218,7 +218,7 @@ function MobileNewChatDemo() {
     // a wide Storybook canvas. Mobile card sizing still keys off window width.
     <div className="flex min-h-screen justify-center bg-muted/40 py-6">
       <div className="h-[720px] w-[390px] overflow-hidden rounded-3xl border bg-background shadow-xl">
-        <MobileNewChatSheetContent {...contentProps} />
+        <MobileNewChatSheetContent {...contentProps} className="h-full" />
       </div>
     </div>
   );
diff --git a/packages/components/src/stories/MobileNewChatSheet.stories.tsx b/packages/components/src/stories/MobileNewChatSheet.stories.tsx
index 398f72665..9f1761227 100644
--- a/packages/components/src/stories/MobileNewChatSheet.stories.tsx
+++ b/packages/components/src/stories/MobileNewChatSheet.stories.tsx
@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { useState } from 'react';
-import { ArrowUp, Folder, GitBranch, Github, Monitor, ShieldCheck, Sparkles } from 'lucide-react';
+import { useEffect, useState, type ReactNode } from 'react';
+import { ChatComposer } from '@/components/chat/chat-composer';
+import { ArrowUp, Folder, GitBranch, Github, Monitor } from 'lucide-react';
 
 import { MobileNewChatSheet } from '@/components/mobile/mobile-new-chat-sheet';
 import {
@@ -13,10 +14,6 @@ import {
   MobileNativeSelect,
   type MobileNativeSelectOption,
 } from '@/components/mobile/mobile-native-select';
-import {
-  MobileModelPickerLabel,
-  mobileModelPickerTriggerClassName,
-} from '@/components/mobile/mobile-session-composer-footer';
 import { WorktreeCheckboxPill } from '@/components/shared';
 import { Button } from '@/ui/button';
 import type { AcpConfigOptionValue } from '@/components/shared/acp-selector-options';
@@ -78,54 +75,6 @@ const longModelOptions: MobileInlinePickerOption[] = [
   ...modelOptions,
 ];
 
-const thinkingOptions: MobileInlinePickerOption[] = [
-  { value: 'low', label: 'low' },
-  { value: 'medium', label: 'medium' },
-  { value: 'high', label: 'high' },
-];
-
-const agentOptions: MobileInlinePickerOption[] = [
-  { value: 'claude-code', label: 'Claude Code', icon: <Sparkles className="h-3.5 w-3.5" /> },
-  { value: 'codex', label: 'Codex', icon: <Sparkles className="h-3.5 w-3.5" /> },
-];
-
-const permissionOptions: MobileInlinePickerOption[] = [
-  {
-    value: 'askPermission',
-    label: 'Ask permission',
-    icon: <ShieldCheck className="h-3.5 w-3.5" />,
-  },
-];
-
-function MockWorkChatNode({
-  chat,
-  onChange,
-}: {
-  chat: boolean;
-  onChange: (chat: boolean) => void;
-}) {
-  return (
-    <div className="flex h-8 items-center rounded-lg bg-muted/70 p-0.5 text-xs font-medium">
-      {(['Work', 'Chat'] as const).map((label) => {
-        const active = label === 'Chat' ? chat : !chat;
-        return (
-          <button
-            key={label}
-            type="button"
-            aria-pressed={active}
-            onClick={() => onChange(label === 'Chat')}
-            className={`h-7 rounded-md px-2.5 ${
-              active ? 'bg-background text-foreground shadow-xs' : 'text-muted-foreground'
-            }`}
-          >
-            {label}
-          </button>
-        );
-      })}
-    </div>
-  );
-}
-
 function MockWorkdirModeNode({
   contextType,
   value,
@@ -146,14 +95,18 @@ function MockWorkdirModeNode({
 }
 
 function MockComposer({
+  initialPrompt = '',
+  targetControls,
   configOptionValues: _configOptionValues,
   onConfigOptionChange: _onConfigOptionChange,
   selectedModel,
   setSelectedModel,
   modelPickerOptions = modelOptions,
   selectedThinking,
-  setSelectedThinking,
+  setSelectedThinking: _setSelectedThinking,
 }: {
+  initialPrompt?: string;
+  targetControls?: ReactNode;
   configOptionValues: Record<string, AcpConfigOptionValue>;
   onConfigOptionChange: (configId: string, value: AcpConfigOptionValue) => void;
   selectedModel: string;
@@ -162,68 +115,69 @@ function MockComposer({
   selectedThinking: string;
   setSelectedThinking: (v: string) => void;
 }) {
+  const [prompt, setPrompt] = useState(initialPrompt);
   return (
     <MobileInlinePickerRowSlot>
-      <div className="rounded-2xl border border-input-border/70 bg-input/90 p-3">
-        <textarea
-          rows={2}
-          placeholder="描述你的需求。"
-          className="input-scrollbar w-full resize-none bg-transparent text-sm leading-6 text-input-foreground placeholder:text-input-placeholder focus:outline-none"
-        />
-        {/* Mirrors the real composer footer: the configOptions cluster
-            fills the row (`w-full` inside the `flex-1` wrapper) so each
-            config shows in full, and only the model shrinks/truncates
-            (keeping its tail) once the row is too narrow — thinking is
-            pinned `shrink-0`. The send button sits at the far right. */}
-        <div className="flex items-center pt-1">
-          <div className="flex min-w-0 flex-1 items-center">
-            <div className="flex w-full min-w-0 items-center">
-              <div className="min-w-0">
-                <MobileInlinePicker
-                  id="story-model"
-                  value={selectedModel}
-                  onChange={setSelectedModel}
-                  options={modelPickerOptions}
-                  ariaLabel="Model"
-                  triggerClassName={mobileModelPickerTriggerClassName}
-                  triggerContent={<MobileModelPickerLabel>{selectedModel}</MobileModelPickerLabel>}
-                />
-              </div>
-              <div className="ml-1 shrink-0">
-                <MobileInlinePicker
-                  id="story-thinking"
-                  value={selectedThinking}
-                  onChange={setSelectedThinking}
-                  options={thinkingOptions}
-                  ariaLabel="Thinking"
-                  triggerClassName="h-8 px-2 py-1 text-sm"
-                  triggerContent={<span className="truncate">{selectedThinking}</span>}
-                />
-              </div>
+      <ChatComposer
+        fillSheet
+        variant="session"
+        promptValue={prompt}
+        onPromptChange={setPrompt}
+        promptPlaceholder="Describe a coding task in lody"
+        onAttachmentAddClick={() => {}}
+        footerSelector={
+          <>
+            <div className="flex h-10 w-max max-w-[70vw] shrink-0 items-center rounded-full border border-border/60 bg-muted/50 px-2">
+              <MobileInlinePicker
+                id="story-model"
+                value={selectedModel}
+                onChange={setSelectedModel}
+                options={modelPickerOptions}
+                ariaLabel="Model"
+                triggerContent={
+                  <span>
+                    {selectedModel} · {selectedThinking}
+                  </span>
+                }
+              />
             </div>
-          </div>
+            {targetControls}
+          </>
+        }
+        primaryAction={
           <Button
-            type="button"
             size="icon"
-            variant="ghost"
             aria-label="Send"
-            className="ml-2 h-8 w-8 shrink-0 rounded-full bg-foreground text-background shadow-xs transition-all hover:bg-foreground/90 hover:text-background"
+            disabled={!prompt.trim()}
+            onClick={() => setPrompt('')}
+            className="h-10 w-10 shrink-0 rounded-full bg-foreground text-background"
           >
             <ArrowUp className="h-5 w-5" />
           </Button>
-        </div>
-      </div>
+        }
+      />
     </MobileInlinePickerRowSlot>
   );
 }
 
 function StoryHarness({
+  keyboardHeight = 0,
+  initialPrompt = '',
   initialOpen = true,
   initialContextType = 'github' as 'local' | 'github' | 'chat',
   initialBranch = 'main',
   initialModel = 'claude-3.5-sonnet',
   modelPickerOptions = modelOptions,
 }) {
+  useEffect(() => {
+    const style = document.documentElement.style;
+    const previous = style.getPropertyValue('--native-keyboard-height');
+    style.setProperty('--native-keyboard-height', `${keyboardHeight}px`);
+    return () => {
+      if (previous) style.setProperty('--native-keyboard-height', previous);
+      else style.removeProperty('--native-keyboard-height');
+    };
+  }, [keyboardHeight]);
   const [open, setOpen] = useState(initialOpen);
   const [contextType, setContextType] = useState<'local' | 'github' | 'chat'>(initialContextType);
   const [configOptionValues, setConfigOptionValues] = useState<
@@ -236,15 +190,14 @@ function StoryHarness({
   const [workdirMode, setWorkdirMode] = useState<'local' | 'worktree'>('worktree');
   const [model, setModel] = useState(initialModel);
   const [thinking, setThinking] = useState('high');
-  const [agent, setAgent] = useState('claude-code');
-  const [permission, setPermission] = useState('askPermission');
   const selectedProject =
     contextType === 'local'
       ? `local:${localProject}`
       : contextType === 'github'
         ? `github:${repo}`
-        : null;
+        : 'chat';
   const projectOptions: MobileNativeSelectOption[] = [
+    { value: 'chat', label: "Don't work in a project" },
     ...localProjectOptions.map((option) => ({
       ...option,
       value: `local:${option.value}`,
@@ -285,43 +238,41 @@ function StoryHarness({
             }
           />
         }
-        contextTypeNode={
-          <MockWorkChatNode
-            chat={contextType === 'chat'}
-            onChange={(chat) => setContextType(chat ? 'chat' : 'local')}
-          />
-        }
+        contextTypeNode={null}
         perTypeNode={
-          contextType === 'chat' ? null : (
-            <MobileNativeSelect
-              value={selectedProject}
-              onChange={(value) => {
-                if (value.startsWith('local:')) {
-                  setLocalProject(value.slice('local:'.length));
-                  setContextType('local');
-                } else if (value.startsWith('github:')) {
-                  setRepo(value.slice('github:'.length));
-                  setContextType('github');
-                }
-              }}
-              options={projectOptions}
-              ariaLabel="Project"
-              showIndicator={false}
-              className="w-fit max-w-full"
-              triggerContent={
-                <>
-                  {contextType === 'github' ? (
-                    <Github className="h-3.5 w-3.5 shrink-0 opacity-70" />
-                  ) : (
-                    <Folder className="h-3.5 w-3.5 shrink-0 opacity-70" />
-                  )}
-                  <span className="truncate">
-                    {contextType === 'github' ? repo : (localProject.split(':')[1] ?? 'lody')}
-                  </span>
-                </>
+          <MobileNativeSelect
+            value={selectedProject}
+            onChange={(value) => {
+              if (value === 'chat') {
+                setContextType('chat');
+              } else if (value.startsWith('local:')) {
+                setLocalProject(value.slice('local:'.length));
+                setContextType('local');
+              } else if (value.startsWith('github:')) {
+                setRepo(value.slice('github:'.length));
+                setContextType('github');
               }
-            />
-          )
+            }}
+            options={projectOptions}
+            ariaLabel="Project"
+            className="h-11 w-fit max-w-full text-base font-semibold"
+            triggerContent={
+              <>
+                {contextType === 'github' ? (
+                  <Github className="h-3.5 w-3.5 shrink-0 opacity-70" />
+                ) : (
+                  <Folder className="h-3.5 w-3.5 shrink-0 opacity-70" />
+                )}
+                <span className="truncate">
+                  {contextType === 'chat'
+                    ? 'Chat'
+                    : contextType === 'github'
+                      ? repo
+                      : (localProject.split(':')[1] ?? 'lody')}
+                </span>
+              </>
+            }
+          />
         }
         branchNode={
           contextType === 'github' || (contextType === 'local' && workdirMode === 'worktree') ? (
@@ -349,8 +300,10 @@ function StoryHarness({
             />
           ) : null
         }
-        composer={
+        composer={(targetControls) => (
           <MockComposer
+            initialPrompt={initialPrompt}
+            targetControls={targetControls}
             configOptionValues={configOptionValues}
             onConfigOptionChange={handleConfigOptionChange}
             selectedModel={model}
@@ -359,47 +312,7 @@ function StoryHarness({
             selectedThinking={thinking}
             setSelectedThinking={setThinking}
           />
-        }
-        belowComposerNode={
-          <MobileInlinePickerRowSlot>
-            <div className="flex w-full items-start gap-2">
-              <div className="min-w-0">
-                <MobileInlinePicker
-                  id="story-agent"
-                  value={agent}
-                  onChange={setAgent}
-                  options={agentOptions}
-                  ariaLabel="Agent"
-                  triggerContent={
-                    <>
-                      <Sparkles className="h-3.5 w-3.5 shrink-0 opacity-70" />
-                      <span className="truncate">
-                        {agentOptions.find((o) => o.value === agent)?.label ?? agent}
-                      </span>
-                    </>
-                  }
-                />
-              </div>
-              <div className="ml-auto min-w-0">
-                <MobileInlinePicker
-                  id="story-permission"
-                  value={permission}
-                  onChange={setPermission}
-                  options={permissionOptions}
-                  ariaLabel="Permission"
-                  triggerContent={
-                    <>
-                      <ShieldCheck className="h-3.5 w-3.5 shrink-0 opacity-70" />
-                      <span className="truncate">
-                        {permissionOptions.find((o) => o.value === permission)?.label ?? permission}
-                      </span>
-                    </>
-                  }
-                />
-              </div>
-            </div>
-          </MobileInlinePickerRowSlot>
-        }
+        )}
       />
     </div>
   );
@@ -467,3 +380,22 @@ export const LongModelName: Story = {
     />
   ),
 };
+
+export const KeyboardOpen: Story = {
+  ...LocalContext,
+  render: () => <StoryHarness initialContextType="local" keyboardHeight={300} />,
+};
+
+export const LongPrompt: Story = {
+  ...LocalContext,
+  render: () => (
+    <StoryHarness
+      initialContextType="local"
+      keyboardHeight={300}
+      initialPrompt={Array.from(
+        { length: 40 },
+        (_, index) => `${index + 1}. Review the synthetic example and explain the proposed change.`
+      ).join('\n')}
+    />
+  ),
+};