authorgravatar for julius0216@outlook.comJulius Marminge <julius0216@outlook.com> 2026-07-28 14:09:34+02:00
committergravatar for noreply@github.comGitHub <noreply@github.com> 2026-07-28 14:09:34+02:00
logf1a68ac9b05c93292e677f700ae3ce7f7ac7f064
treea302d99d246bcfee8297d017f817afd32ae826a7
parent55dd01612efc51e19de479da5a0e348cbe2521e3
signature Signed by PGP key B5690EEEBB952194

Fix Android showcase capture and rebuild v2 queued rows (#4730)

Co-authored-by: Claude <noreply@anthropic.com>

8 files changed, 523 insertions(+), 165 deletions(-)

apps/mobile/src/features/home/HomeScreen.tsx+124-108
......@@ -36,12 +36,13 @@ import {
3636 ThreadListRow,
3737 ThreadListShowMoreRow,
3838} from "../threads/thread-list-items";
39import { ThreadListV2Row } from "../threads/thread-list-v2-items";
39import { ThreadListV2PendingRow, ThreadListV2Row } from "../threads/thread-list-v2-items";
4040import {
4141 buildThreadListV2Items,
42 buildThreadListV2ListItems,
4243 THREAD_LIST_V2_SETTLED_INITIAL_COUNT,
4344 THREAD_LIST_V2_SETTLED_PAGE_COUNT,
44 type ThreadListV2Item,
45 type ThreadListV2ListItem,
4546} from "../threads/threadListV2";
4647import type { HomeListFilterMenuEnvironment } from "./home-list-filter-menu";
4748import {
......@@ -549,50 +550,100 @@ export function HomeScreen(props: HomeScreenProps) {
549550 // unchanged: after a clamped fire (wake beyond the 32-bit setTimeout
550551 // range) the boundary string is identical and the chain would die.
551552 }, [nextSnoozeWakeAt, snoozeWakeTick]);
552 const threadListV2Items = threadListV2Layout.items;
553 // Queued tasks are not thread shells, so the v2 partition never sees them;
554 // they are spliced in below the active block and stay visible and deletable
555 // while their environment is offline. Same environment scope and search
556 // filter as the list itself.
557 const v2SearchQuery = props.searchQuery.trim().toLocaleLowerCase();
558 const v2PendingTasks = useMemo(
559 () =>
560 props.pendingTasks.filter(
561 (pendingTask) =>
562 (props.selectedEnvironmentId === null ||
563 pendingTask.message.environmentId === props.selectedEnvironmentId) &&
564 (v2ScopedProjectKeys === null ||
565 v2ScopedProjectKeys.has(
566 scopedProjectKey(pendingTask.message.environmentId, pendingTask.creation.projectId),
567 )) &&
568 (v2SearchQuery.length === 0 ||
569 pendingTask.title.toLocaleLowerCase().includes(v2SearchQuery)),
570 ),
571 [props.pendingTasks, props.selectedEnvironmentId, v2ScopedProjectKeys, v2SearchQuery],
572 );
573 const threadListV2Items = useMemo(
574 () =>
575 buildThreadListV2ListItems({
576 items: threadListV2Layout.items,
577 pendingTasks: v2PendingTasks,
578 }),
579 [threadListV2Layout.items, v2PendingTasks],
580 );
553581
554582 const renderV2Item = useCallback(
555 ({ item }: { readonly item: ThreadListV2Item }) => (
556 <ThreadListV2Row
557 thread={item.thread}
558 variant={item.variant}
559 showSettledDivider={item.showSettledDivider}
560 project={
561 projectByKey.get(scopedProjectKey(item.thread.environmentId, item.thread.projectId)) ??
562 null
563 }
564 projectTitle={v2ProjectTitleByProjectKey.get(
565 scopedProjectKey(item.thread.environmentId, item.thread.projectId),
566 )}
567 providerDriver={
568 serverConfigs
569 .get(item.thread.environmentId)
570 ?.providers.find(
571 (provider) =>
572 provider.instanceId ===
573 (item.thread.session?.providerInstanceId ?? item.thread.modelSelection.instanceId),
574 )?.driver ?? null
575 }
576 environmentLabel={
577 Object.keys(props.savedConnectionsById).length > 1
578 ? (props.savedConnectionsById[item.thread.environmentId]?.environmentLabel ?? null)
579 : null
580 }
581 onSelectThread={props.onSelectThread}
582 onDeleteThread={handleDeleteThread}
583 onArchiveThread={props.onArchiveThread}
584 settlementSupported={settlementEnvironmentIds.has(item.thread.environmentId)}
585 onSettleThread={handleSettleThread}
586 onUnsettleThread={handleUnsettleThread}
587 onChangeRequestState={handleChangeRequestState}
588 projectCwd={
589 projectCwdByKey.get(scopedProjectKey(item.thread.environmentId, item.thread.projectId)) ??
590 null
591 }
592 onSwipeableClose={handleSwipeableClose}
593 onSwipeableWillOpen={handleSwipeableWillOpen}
594 />
595 ),
583 ({ item }: { readonly item: ThreadListV2ListItem }) => {
584 if (item.type === "v2-pending") {
585 const pendingScopeKey = scopedProjectKey(
586 item.pendingTask.message.environmentId,
587 item.pendingTask.creation.projectId,
588 );
589 return (
590 <ThreadListV2PendingRow
591 pendingTask={item.pendingTask}
592 project={projectByKey.get(pendingScopeKey) ?? null}
593 projectTitle={v2ProjectTitleByProjectKey.get(pendingScopeKey)}
594 environmentLabel={
595 Object.keys(props.savedConnectionsById).length > 1
596 ? (props.savedConnectionsById[item.pendingTask.message.environmentId]
597 ?.environmentLabel ?? null)
598 : null
599 }
600 showPendingDivider={item.showPendingDivider}
601 onSelectPendingTask={props.onSelectPendingTask}
602 onDeletePendingTask={props.onDeletePendingTask}
603 />
604 );
605 }
606 const thread = item.item.thread;
607 return (
608 <ThreadListV2Row
609 thread={thread}
610 variant={item.item.variant}
611 showSettledDivider={item.item.showSettledDivider}
612 project={
613 projectByKey.get(scopedProjectKey(thread.environmentId, thread.projectId)) ?? null
614 }
615 projectTitle={v2ProjectTitleByProjectKey.get(
616 scopedProjectKey(thread.environmentId, thread.projectId),
617 )}
618 providerDriver={
619 serverConfigs
620 .get(thread.environmentId)
621 ?.providers.find(
622 (provider) =>
623 provider.instanceId ===
624 (thread.session?.providerInstanceId ?? thread.modelSelection.instanceId),
625 )?.driver ?? null
626 }
627 environmentLabel={
628 Object.keys(props.savedConnectionsById).length > 1
629 ? (props.savedConnectionsById[thread.environmentId]?.environmentLabel ?? null)
630 : null
631 }
632 onSelectThread={props.onSelectThread}
633 onDeleteThread={handleDeleteThread}
634 onArchiveThread={props.onArchiveThread}
635 settlementSupported={settlementEnvironmentIds.has(thread.environmentId)}
636 onSettleThread={handleSettleThread}
637 onUnsettleThread={handleUnsettleThread}
638 onChangeRequestState={handleChangeRequestState}
639 projectCwd={
640 projectCwdByKey.get(scopedProjectKey(thread.environmentId, thread.projectId)) ?? null
641 }
642 onSwipeableClose={handleSwipeableClose}
643 onSwipeableWillOpen={handleSwipeableWillOpen}
644 />
645 );
646 },
596647 [
597648 handleChangeRequestState,
598649 handleDeleteThread,
......@@ -603,6 +654,8 @@ export function HomeScreen(props: HomeScreenProps) {
603654 projectByKey,
604655 projectCwdByKey,
605656 props.onArchiveThread,
657 props.onDeletePendingTask,
658 props.onSelectPendingTask,
606659 props.onSelectThread,
607660 props.savedConnectionsById,
608661 serverConfigs,
......@@ -610,10 +663,7 @@ export function HomeScreen(props: HomeScreenProps) {
610663 v2ProjectTitleByProjectKey,
611664 ],
612665 );
613 const v2KeyExtractor = useCallback(
614 (item: ThreadListV2Item) => `${item.thread.environmentId}:${item.thread.id}`,
615 [],
616 );
666 const v2KeyExtractor = useCallback((item: ThreadListV2ListItem) => item.key, []);
617667
618668 const extraData = useMemo(
619669 () => ({ savedConnectionsById: props.savedConnectionsById, projectCwdByKey }),
......@@ -788,41 +838,9 @@ export function HomeScreen(props: HomeScreenProps) {
788838 </>
789839 );
790840
791 // v2 renders queued offline tasks above the thread cards — they are not
792 // thread shells, so the v2 item builder never sees them, but they must
793 // stay visible and deletable while their environment is offline. They
794 // respect the same environment scope and search filter as the list.
795 const v2SearchQuery = props.searchQuery.trim().toLocaleLowerCase();
796 const v2PendingTasks = props.pendingTasks.filter(
797 (pendingTask) =>
798 (props.selectedEnvironmentId === null ||
799 pendingTask.message.environmentId === props.selectedEnvironmentId) &&
800 (v2ScopedProjectKeys === null ||
801 v2ScopedProjectKeys.has(
802 scopedProjectKey(pendingTask.message.environmentId, pendingTask.creation.projectId),
803 )) &&
804 (v2SearchQuery.length === 0 || pendingTask.title.toLocaleLowerCase().includes(v2SearchQuery)),
805 );
806841 // Project scoping lives in the header filter menu (no inline chip row on
807842 // mobile — the menu is the one filter surface).
808 const v2ListHeader = (
809 <>
810 {listHeader}
811 {v2PendingTasks.map((pendingTask, index) => (
812 <PendingTaskListRow
813 key={pendingTask.message.messageId}
814 variant="compact"
815 pendingTask={pendingTask}
816 environmentLabel={
817 props.savedConnectionsById[pendingTask.message.environmentId]?.environmentLabel ?? null
818 }
819 isLast={index === v2PendingTasks.length - 1}
820 onSelectPendingTask={props.onSelectPendingTask}
821 onDeletePendingTask={props.onDeletePendingTask}
822 />
823 ))}
824 </>
825 );
843 const v2ListHeader = listHeader;
826844
827845 const listEmpty = !hasResults ? (
828846 hasSearchQuery ? (
......@@ -846,37 +864,33 @@ export function HomeScreen(props: HomeScreenProps) {
846864 // is empty. Search outranks the scope — "No results" names the actionable
847865 // fact when a query is active. Snoozed threads outrank the rest: "No
848866 // threads yet" over an inbox that is merely all-snoozed reads as data
849 // loss. Pending tasks render in the header, so the list showing them
850 // isn't empty in the user's eyes.
867 // loss.
851868 const v2SnoozedCount = threadListV2Layout.snoozedCount;
852 const v2ListEmpty =
853 v2PendingTasks.length > 0 ? null : hasSearchQuery ? (
854 v2SnoozedCount > 0 ? (
855 // The snoozed threads already passed this search filter: "No
856 // results" would claim nothing matched when matches are merely
857 // parked.
858 <EmptyState
859 title={
860 v2SnoozedCount === 1 ? "1 matching thread snoozed" : `All matching threads snoozed`
861 }
862 detail={`Threads matching "${props.searchQuery}" are snoozed and return when their wake time passes.`}
863 />
864 ) : (
865 <EmptyState title="No results" detail={`No threads matching "${props.searchQuery}".`} />
866 )
867 ) : v2SnoozedCount > 0 ? (
869 const v2ListEmpty = hasSearchQuery ? (
870 v2SnoozedCount > 0 ? (
871 // The snoozed threads already passed this search filter: "No
872 // results" would claim nothing matched when matches are merely
873 // parked.
868874 <EmptyState
869 title={v2SnoozedCount === 1 ? "1 thread snoozed" : `${v2SnoozedCount} threads snoozed`}
870 detail="Snoozed threads return when their wake time passes."
871 />
872 ) : v2ScopedProjectGroup !== null ? (
873 <EmptyState
874 title={`No threads in ${v2ScopedProjectGroup.title}`}
875 detail="Choose another project or create a new task."
875 title={v2SnoozedCount === 1 ? "1 matching thread snoozed" : `All matching threads snoozed`}
876 detail={`Threads matching "${props.searchQuery}" are snoozed and return when their wake time passes.`}
876877 />
877878 ) : (
878 listEmpty
879 );
879 <EmptyState title="No results" detail={`No threads matching "${props.searchQuery}".`} />
880 )
881 ) : v2SnoozedCount > 0 ? (
882 <EmptyState
883 title={v2SnoozedCount === 1 ? "1 thread snoozed" : `${v2SnoozedCount} threads snoozed`}
884 detail="Snoozed threads return when their wake time passes."
885 />
886 ) : v2ScopedProjectGroup !== null ? (
887 <EmptyState
888 title={`No threads in ${v2ScopedProjectGroup.title}`}
889 detail="Choose another project or create a new task."
890 />
891 ) : (
892 listEmpty
893 );
880894
881895 if (threadListV2Enabled) {
882896 return (
......@@ -888,6 +902,8 @@ export function HomeScreen(props: HomeScreenProps) {
888902 keyExtractor={v2KeyExtractor}
889903 extraData={{
890904 projectByKey,
905 projectCwdByKey,
906 projectTitleByProjectKey: v2ProjectTitleByProjectKey,
891907 serverConfigs,
892908 savedConnectionsById: props.savedConnectionsById,
893909 }}
apps/mobile/src/features/threads/ThreadNavigationSidebar.tsx+51-40
......@@ -26,7 +26,7 @@ import { useThemeColor } from "../../lib/useThemeColor";
2626import { useProjects, useThreadShells } from "../../state/entities";
2727import { useThreadListV2Enabled } from "./use-thread-list-v2-enabled";
2828import { environmentServerConfigsAtom } from "../../state/server";
29import { usePendingNewTasks, type PendingNewTask } from "../../state/use-pending-new-tasks";
29import { usePendingNewTasks } from "../../state/use-pending-new-tasks";
3030import { useWorkspaceState } from "../../state/workspace";
3131import { useSavedRemoteConnections } from "../../state/use-remote-environment-registry";
3232import { useHardwareKeyboardCommand } from "../keyboard/hardwareKeyboardCommands";
......@@ -62,26 +62,21 @@ import {
6262 ThreadListRow,
6363 ThreadListShowMoreRow,
6464} from "./thread-list-items";
65import { ThreadListV2Row } from "./thread-list-v2-items";
65import { ThreadListV2PendingRow, ThreadListV2Row } from "./thread-list-v2-items";
6666import {
6767 buildThreadListV2Items,
68 buildThreadListV2ListItems,
6869 THREAD_LIST_V2_SETTLED_INITIAL_COUNT,
6970 THREAD_LIST_V2_SETTLED_PAGE_COUNT,
70 type ThreadListV2Item,
71 type ThreadListV2ListItem,
7172} from "./threadListV2";
7273
7374/** The sidebar list serves both lists: v1 grouped items or, when the Thread
74 List v2 beta is on, queued offline tasks, flat v2 rows, and a settled
75 List v2 beta is on, flat v2 rows with queued tasks spliced in, and a settled
7576 "Show more" pager. */
7677type SidebarListItem =
7778 | HomeListItem
78 | {
79 readonly type: "v2-pending-task";
80 readonly key: string;
81 readonly pendingTask: PendingNewTask;
82 readonly isLast: boolean;
83 }
84 | { readonly type: "v2-thread"; readonly key: string; readonly item: ThreadListV2Item }
79 | ThreadListV2ListItem
8580 | { readonly type: "v2-show-more"; readonly key: string; readonly hiddenCount: number };
8681
8782/**
......@@ -473,11 +468,11 @@ function ThreadNavigationSidebarPane(
473468 }, [nextSnoozeWakeAt, snoozeWakeTick]);
474469 const listItems = useMemo<readonly SidebarListItem[]>(() => {
475470 if (!threadListV2Enabled) return listLayout.items;
476 // Queued offline tasks render above the thread rows (mirrors the
477 // compact Home v2 list): they are not thread shells, so the v2 item
478 // builder never sees them, but they must stay visible and deletable
479 // while their environment is offline. Same environment scope and
480 // search filter as the list.
471 // Queued offline tasks are not thread shells, so the v2 item builder
472 // never sees them; the shared splice puts them below the active block
473 // (mirrors the compact Home v2 list) where they stay visible and
474 // deletable while their environment is offline. Same environment scope
475 // and search filter as the list.
481476 const v2SearchQuery = props.searchQuery.trim().toLocaleLowerCase();
482477 const v2PendingTasks = pendingTasks.filter(
483478 (pendingTask) =>
......@@ -490,19 +485,10 @@ function ThreadNavigationSidebarPane(
490485 (v2SearchQuery.length === 0 ||
491486 pendingTask.title.toLocaleLowerCase().includes(v2SearchQuery)),
492487 );
493 const items: SidebarListItem[] = v2PendingTasks.map((pendingTask, index) => ({
494 type: "v2-pending-task" as const,
495 key: `v2-pending:${pendingTask.message.messageId}`,
496 pendingTask,
497 isLast: index === v2PendingTasks.length - 1,
498 }));
499 for (const item of threadListV2Layout.items) {
500 items.push({
501 type: "v2-thread" as const,
502 key: scopedThreadKey(item.thread.environmentId, item.thread.id),
503 item,
504 });
505 }
488 const items: SidebarListItem[] = buildThreadListV2ListItems({
489 items: threadListV2Layout.items,
490 pendingTasks: v2PendingTasks,
491 });
506492 if (threadListV2Layout.hiddenSettledCount > 0) {
507493 items.push({
508494 type: "v2-show-more",
......@@ -690,13 +676,26 @@ function ThreadNavigationSidebarPane(
690676 onScroll: handleScroll,
691677 onScrollBeginDrag: handleScrollBeginDrag,
692678 });
679 // Project shells load after the first rows draw, so the maps they feed have
680 // to bust the recycler's memoization — otherwise a row keeps the blank
681 // favicon and fallback title it was first rendered with.
693682 const listExtraData = useMemo(
694683 () => ({
695684 selectedThreadKey: props.selectedThreadKey ?? "",
685 projectByKey,
686 projectCwdByKey,
687 projectTitleByProjectKey,
696688 savedConnectionsById,
697689 serverConfigs,
698690 }),
699 [props.selectedThreadKey, savedConnectionsById, serverConfigs],
691 [
692 props.selectedThreadKey,
693 projectByKey,
694 projectCwdByKey,
695 projectTitleByProjectKey,
696 savedConnectionsById,
697 serverConfigs,
698 ],
700699 );
701700 const sidebarItemsAreEqual = useCallback(
702701 (previous: SidebarListItem, item: SidebarListItem): boolean => {
......@@ -711,16 +710,19 @@ function ThreadNavigationSidebarPane(
711710 if (previous.type === "v2-show-more" && item.type === "v2-show-more") {
712711 return previous.hiddenCount === item.hiddenCount;
713712 }
714 if (previous.type === "v2-pending-task" && item.type === "v2-pending-task") {
715 return previous.pendingTask === item.pendingTask && previous.isLast === item.isLast;
713 if (previous.type === "v2-pending" && item.type === "v2-pending") {
714 return (
715 previous.pendingTask === item.pendingTask &&
716 previous.showPendingDivider === item.showPendingDivider
717 );
716718 }
717719 if (
718720 previous.type === "v2-thread" ||
719721 previous.type === "v2-show-more" ||
720 previous.type === "v2-pending-task" ||
722 previous.type === "v2-pending" ||
721723 item.type === "v2-thread" ||
722724 item.type === "v2-show-more" ||
723 item.type === "v2-pending-task"
725 item.type === "v2-pending"
724726 ) {
725727 return false;
726728 }
......@@ -748,20 +750,29 @@ function ThreadNavigationSidebarPane(
748750 const renderListItem = useCallback(
749751 ({ item }: { readonly item: SidebarListItem }) => {
750752 switch (item.type) {
751 case "v2-pending-task":
753 case "v2-pending": {
754 const pendingScopeKey = scopedProjectKey(
755 item.pendingTask.message.environmentId,
756 item.pendingTask.creation.projectId,
757 );
752758 return (
753 <PendingTaskListRow
754 variant="sidebar"
759 <ThreadListV2PendingRow
755760 pendingTask={item.pendingTask}
761 project={projectByKey.get(pendingScopeKey) ?? null}
762 projectTitle={projectTitleByProjectKey.get(pendingScopeKey)}
756763 environmentLabel={
757 savedConnectionsById[item.pendingTask.message.environmentId]?.environmentLabel ??
758 null
764 Object.keys(savedConnectionsById).length > 1
765 ? (savedConnectionsById[item.pendingTask.message.environmentId]
766 ?.environmentLabel ?? null)
767 : null
759768 }
760 isLast={item.isLast}
769 pane="sidebar"
770 showPendingDivider={item.showPendingDivider}
761771 onSelectPendingTask={openPendingTask}
762772 onDeletePendingTask={confirmDeletePendingTask}
763773 />
764774 );
775 }
765776 case "v2-thread": {
766777 const thread = item.item.thread;
767778 const scopeKey = scopedProjectKey(thread.environmentId, thread.projectId);
apps/mobile/src/features/threads/thread-list-v2-items.tsx+123-3
......@@ -14,6 +14,7 @@ import { ProviderIcon } from "../../components/ProviderIcon";
1414import { cn } from "../../lib/cn";
1515import { relativeTime } from "../../lib/time";
1616import { useThemeColor } from "../../lib/useThemeColor";
17import type { PendingNewTask } from "../../state/use-pending-new-tasks";
1718import { useThreadPr } from "../../state/use-thread-pr";
1819import { ThreadSwipeable } from "../home/thread-swipe-actions";
1920import { resolveThreadListV2Status, type ThreadListV2Status } from "./threadListV2";
......@@ -68,7 +69,9 @@ const LEGACY_MENU_ACTIONS: MenuAction[] = [
6869/** Rounded-row radius shared with the v1 sidebar rows. */
6970const SIDEBAR_V2_ROW_RADIUS = 12;
7071
71export const ThreadListV2SettledDivider = memo(function ThreadListV2SettledDivider(props: {
72/** Section label + rule: the only structure in an otherwise flat list. */
73export const ThreadListV2SectionDivider = memo(function ThreadListV2SectionDivider(props: {
74 readonly label: string;
7275 readonly pane?: "screen" | "sidebar";
7376}) {
7477 const borderColor = useThemeColor("--color-border");
......@@ -79,12 +82,127 @@ export const ThreadListV2SettledDivider = memo(function ThreadListV2SettledDivid
7982 props.pane === "sidebar" ? "px-3" : "px-5",
8083 )}
8184 >
82 <Text className="text-xs font-t3-medium text-foreground-tertiary">Settled</Text>
85 <Text className="text-xs font-t3-medium text-foreground-tertiary">{props.label}</Text>
8386 <View className="h-px flex-1" style={{ backgroundColor: borderColor }} />
8487 </View>
8588 );
8689});
8790
91const PENDING_TASK_MENU_ACTIONS: MenuAction[] = [
92 { id: "delete", title: "Delete", image: "trash", attributes: { destructive: true } },
93];
94
95/**
96 * A queued new task, in the same idiom as an active v2 row: it is work the
97 * user wrote, so it reads like the threads it will become. "Queued" takes
98 * the status slot — the state is the one thing that differs — and stays
99 * uncolored because nothing is asked of the user; the environment is simply
100 * not reachable yet.
101 */
102export const ThreadListV2PendingRow = memo(function ThreadListV2PendingRow(props: {
103 readonly pendingTask: PendingNewTask;
104 readonly project: EnvironmentProject | null;
105 readonly projectTitle?: string;
106 readonly environmentLabel: string | null;
107 readonly pane?: "screen" | "sidebar";
108 /** Draws the "Pending" divider above the first queued row. */
109 readonly showPendingDivider: boolean;
110 readonly onSelectPendingTask: (pendingTask: PendingNewTask) => void;
111 readonly onDeletePendingTask: (pendingTask: PendingNewTask) => void;
112}) {
113 const { pendingTask, onSelectPendingTask, onDeletePendingTask } = props;
114 const drawerColor = useThemeColor("--color-drawer");
115 const pressedBackgroundColor = useThemeColor("--color-subtle");
116 const sidebarPane = props.pane === "sidebar";
117 const projectTitle =
118 props.projectTitle ?? props.project?.title ?? pendingTask.creation.projectTitle ?? "";
119 const branch = pendingTask.creation.branch;
120
121 const handleMenuAction = useCallback(
122 ({ nativeEvent }: { readonly nativeEvent: { readonly event: string } }) => {
123 if (nativeEvent.event === "delete") onDeletePendingTask(pendingTask);
124 },
125 [onDeletePendingTask, pendingTask],
126 );
127
128 const rowContent = (
129 <>
130 <View className="flex-row items-center gap-1.5">
131 {props.project ? (
132 <ProjectFavicon
133 environmentId={pendingTask.message.environmentId}
134 size={15}
135 projectTitle={projectTitle}
136 workspaceRoot={props.project.workspaceRoot}
137 />
138 ) : null}
139 <Text className="flex-1 text-sm font-t3-medium text-foreground-muted" numberOfLines={1}>
140 {projectTitle}
141 </Text>
142 <Text className="text-xs text-foreground-tertiary">Queued</Text>
143 </View>
144 {/* One line, unlike the two an active row allows: a queued title is
145 derived from the whole prompt rather than written as a title, so the
146 second line is usually a stray word or emoji rather than meaning. */}
147 <Text className="mt-1 text-base font-t3-medium text-foreground" numberOfLines={1}>
148 {pendingTask.title}
149 </Text>
150 {branch || props.environmentLabel ? (
151 <Text className="mt-1 text-xs text-foreground-muted" numberOfLines={1}>
152 {branch ? (
153 <Text className="text-xs text-foreground-muted" style={{ fontFamily: MONO_FONT }}>
154 {branch}
155 </Text>
156 ) : null}
157 {branch && props.environmentLabel ? " · " : null}
158 {props.environmentLabel ? (
159 <Text className="text-xs text-foreground-tertiary">{props.environmentLabel}</Text>
160 ) : null}
161 </Text>
162 ) : null}
163 </>
164 );
165
166 return (
167 <>
168 {props.showPendingDivider ? (
169 <ThreadListV2SectionDivider label="Pending" pane={props.pane} />
170 ) : null}
171 <ControlPillMenu
172 actions={PENDING_TASK_MENU_ACTIONS}
173 onPressAction={handleMenuAction}
174 shouldOpenOnLongPress
175 >
176 <Pressable
177 accessibilityHint="Opens the queued task for editing"
178 accessibilityLabel={pendingTask.title}
179 accessibilityRole="button"
180 onPress={() => onSelectPendingTask(pendingTask)}
181 style={
182 sidebarPane
183 ? ({ pressed }) => ({
184 backgroundColor: pressed ? pressedBackgroundColor : drawerColor,
185 borderRadius: SIDEBAR_V2_ROW_RADIUS,
186 paddingHorizontal: 12,
187 paddingVertical: 10,
188 })
189 : ({ pressed }) => ({ opacity: pressed ? 0.7 : 1 })
190 }
191 >
192 {sidebarPane ? (
193 rowContent
194 ) : (
195 <View className="bg-screen">
196 <View className="px-5 py-2.5">{rowContent}</View>
197 <View className="ml-5 h-px bg-border-subtle" />
198 </View>
199 )}
200 </Pressable>
201 </ControlPillMenu>
202 </>
203 );
204});
205
88206export const ThreadListV2Row = memo(function ThreadListV2Row(props: {
89207 readonly thread: EnvironmentThreadShell;
90208 readonly variant: "card" | "slim";
......@@ -423,7 +541,9 @@ export const ThreadListV2Row = memo(function ThreadListV2Row(props: {
423541
424542 return (
425543 <>
426 {props.showSettledDivider ? <ThreadListV2SettledDivider pane={props.pane} /> : null}
544 {props.showSettledDivider ? (
545 <ThreadListV2SectionDivider label="Settled" pane={props.pane} />
546 ) : null}
427547 <ThreadSwipeable
428548 backgroundColor={sidebarPane ? drawerColor : screenColor}
429549 compactActions={variant === "slim"}
apps/mobile/src/features/threads/threadListV2.test.ts+96-1
......@@ -1,9 +1,19 @@
11import type { EnvironmentThreadShell } from "@t3tools/client-runtime/state/shell";
2import { EnvironmentId, ProjectId, ProviderInstanceId, ThreadId, TurnId } from "@t3tools/contracts";
2import {
3 CommandId,
4 EnvironmentId,
5 MessageId,
6 ProjectId,
7 ProviderInstanceId,
8 ThreadId,
9 TurnId,
10} from "@t3tools/contracts";
311import { describe, expect, it } from "vite-plus/test";
412
13import type { PendingNewTask } from "../../state/use-pending-new-tasks";
514import {
615 buildThreadListV2Items,
16 buildThreadListV2ListItems,
717 resolveThreadListV2Enabled,
818 resolveThreadListV2Status,
919 sortThreadsForListV2,
......@@ -340,3 +350,88 @@ describe("buildThreadListV2Items settled paging", () => {
340350 ]);
341351 });
342352});
353
354function makePendingTask(id: string): PendingNewTask {
355 return {
356 message: {
357 environmentId,
358 threadId: ThreadId.make(`thread-${id}`),
359 messageId: MessageId.make(id),
360 commandId: CommandId.make(`command-${id}`),
361 text: id,
362 attachments: [],
363 createdAt: NOW,
364 creation: {
365 projectId: ProjectId.make("project-1"),
366 workspaceMode: "worktree",
367 branch: null,
368 worktreePath: null,
369 },
370 },
371 creation: {
372 projectId: ProjectId.make("project-1"),
373 workspaceMode: "worktree",
374 branch: null,
375 worktreePath: null,
376 },
377 title: id,
378 };
379}
380
381describe("buildThreadListV2ListItems", () => {
382 const layout = buildThreadListV2Items({
383 threads: [
384 makeThread({ id: ThreadId.make("active"), title: "active" }),
385 makeThread({
386 id: ThreadId.make("settled"),
387 title: "settled",
388 settledOverride: "settled",
389 settledAt: NOW,
390 }),
391 ],
392 environmentId: null,
393 searchQuery: "",
394 now: NOW,
395 });
396
397 it("splices queued tasks between the active block and the settled tail", () => {
398 const items = buildThreadListV2ListItems({
399 items: layout.items,
400 pendingTasks: [makePendingTask("queued-1"), makePendingTask("queued-2")],
401 });
402
403 expect(
404 items.map((item) =>
405 item.type === "v2-pending" ? item.pendingTask.title : item.item.thread.id,
406 ),
407 ).toEqual(["active", "queued-1", "queued-2", "settled"]);
408 // Only the leading queued row labels the section, exactly like Settled.
409 expect(
410 items.filter((item) => item.type === "v2-pending" && item.showPendingDivider),
411 ).toHaveLength(1);
412 });
413
414 it("ends the list with queued tasks when nothing has settled yet", () => {
415 const activeOnly = buildThreadListV2Items({
416 threads: [makeThread({ id: ThreadId.make("active"), title: "active" })],
417 environmentId: null,
418 searchQuery: "",
419 now: NOW,
420 });
421 const items = buildThreadListV2ListItems({
422 items: activeOnly.items,
423 pendingTasks: [makePendingTask("queued-1")],
424 });
425
426 expect(items.map((item) => item.type)).toEqual(["v2-thread", "v2-pending"]);
427 });
428
429 it("leaves the thread order untouched when nothing is queued", () => {
430 const items = buildThreadListV2ListItems({ items: layout.items, pendingTasks: [] });
431
432 expect(items.map((item) => item.key)).toEqual([
433 `v2-thread:${environmentId}:active`,
434 `v2-thread:${environmentId}:settled`,
435 ]);
436 });
437});
apps/mobile/src/features/threads/threadListV2.ts+56
......@@ -2,6 +2,8 @@ import { effectiveSettled, effectiveSnoozed } from "@t3tools/client-runtime/stat
22import type { EnvironmentThreadShell } from "@t3tools/client-runtime/state/shell";
33import type { EnvironmentId, ProjectId } from "@t3tools/contracts";
44
5import type { PendingNewTask } from "../../state/use-pending-new-tasks";
6
57/**
68 * Thread List v2 model, ported from the web sidebar v2
79 * (apps/web/src/components/Sidebar.logic.ts + SidebarV2.tsx).
......@@ -113,6 +115,60 @@ export interface ThreadListV2Layout {
113115 readonly nextSnoozeWakeAt: string | null;
114116}
115117
118export interface ThreadListV2ThreadListItem {
119 readonly type: "v2-thread";
120 readonly key: string;
121 readonly item: ThreadListV2Item;
122}
123
124export interface ThreadListV2PendingListItem {
125 readonly type: "v2-pending";
126 readonly key: string;
127 readonly pendingTask: PendingNewTask;
128 /** First queued row after the active block draws the PENDING divider. */
129 readonly showPendingDivider: boolean;
130}
131
132export type ThreadListV2ListItem = ThreadListV2ThreadListItem | ThreadListV2PendingListItem;
133
134/**
135 * Splices queued tasks between the active block and the settled tail, so the
136 * list reads active → pending → settled. Queued work sits below the live
137 * threads because nothing can happen to it until its environment returns:
138 * it is waiting, not asking. Shared by the compact Home list and the iPad
139 * sidebar so both order and label the sections identically.
140 */
141export function buildThreadListV2ListItems(input: {
142 readonly items: ReadonlyArray<ThreadListV2Item>;
143 readonly pendingTasks: ReadonlyArray<PendingNewTask>;
144}): ThreadListV2ListItem[] {
145 const threadItems = input.items.map(
146 (item): ThreadListV2ListItem => ({
147 type: "v2-thread",
148 key: `v2-thread:${item.thread.environmentId}:${item.thread.id}`,
149 item,
150 }),
151 );
152 if (input.pendingTasks.length === 0) return threadItems;
153
154 const pendingItems = input.pendingTasks.map(
155 (pendingTask, index): ThreadListV2ListItem => ({
156 type: "v2-pending",
157 key: `v2-pending:${pendingTask.message.messageId}`,
158 pendingTask,
159 showPendingDivider: index === 0,
160 }),
161 );
162 // The settled tail begins at the row that draws the SETTLED divider; with
163 // no settled rows the queued block simply ends the list.
164 const settledStart = threadItems.findIndex(
165 (entry) => entry.type === "v2-thread" && entry.item.showSettledDivider,
166 );
167 return settledStart === -1
168 ? [...threadItems, ...pendingItems]
169 : [...threadItems.slice(0, settledStart), ...pendingItems, ...threadItems.slice(settledStart)];
170}
171
116172/**
117173 * Partitions visible threads into the active card block (creation order) and
118174 * the settled recency tail, matching the web v2 list. `autoSettleAfterDays`
scripts/mobile-showcase-environment.ts+51-11
......@@ -201,16 +201,42 @@ export const SHOWCASE_THREADS = [
201201 response:
202202 "The plan groups milestones without changing the underlying log stream, preserves plain-text output, and adds zero work to the hot path.",
203203 },
204 // Finished work, settled by hand: the list keeps it as a receded tail so
205 // the active block above reads as everything still in flight. The active
206 // block stays small enough that the settled tail begins above the fold —
207 // a store screenshot has to show that history exists, not just imply it.
204208 {
205 id: "scheduler-breathe",
209 id: "handoff-haptics",
210 projectId: "t3code",
211 title: "Tune the handoff haptics",
212 branch: "feat/handoff-haptics",
213 minutesAgo: 5 * 60,
214 settled: true,
215 request: "Give the desktop-to-phone handoff a haptic that lands with the animation.",
216 response:
217 "The handoff now taps once as the thread lands and stays silent on failure, so the phone never celebrates a handoff that did not happen.",
218 },
219 {
220 id: "streaming-shell",
221 projectId: "react",
222 title: "Stream the shell before the data",
223 branch: "feat/streaming-shell",
224 minutesAgo: 28 * 60,
225 settled: true,
226 request: "Get the app shell painted before any data request resolves.",
227 response:
228 "The shell now flushes on first byte and the data boundaries hydrate underneath it, so the first paint no longer waits on the slowest query.",
229 },
230 {
231 id: "quieter-oom",
206232 projectId: "linux",
207 title: "Let the scheduler breathe",
208 branch: "perf/scheduler-breathe",
209 minutesAgo: 76,
210 request:
211 "Find a calmer balancing strategy for bursty mixed workloads without hurting tail latency.",
233 title: "Make the OOM killer explain itself",
234 branch: "feat/quieter-oom",
235 minutesAgo: 2 * 24 * 60,
236 settled: true,
237 request: "Make out-of-memory kills legible without adding a single allocation to the hot path.",
212238 response:
213 "The new heuristic reduces needless migrations during short bursts while preserving the existing latency guardrails.",
239 "Kills now report the winning heuristic and the runner-up alongside the usual dump, assembled entirely from data the path already had.",
214240 },
215241] as const;
216242
......@@ -300,6 +326,7 @@ function insertThread(
300326 readonly branch: string;
301327 readonly minutesAgo: number;
302328 readonly state?: "working" | "approval" | "plan";
329 readonly settled?: boolean;
303330 readonly workspaceRoot: string;
304331 },
305332): void {
......@@ -312,8 +339,8 @@ function insertThread(
312339 thread_id, project_id, title, model_selection_json, runtime_mode, interaction_mode,
313340 branch, worktree_path, latest_turn_id, latest_user_message_at, pending_approval_count,
314341 pending_user_input_count, has_actionable_proposed_plan, created_at, updated_at,
315 archived_at, deleted_at
316 ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, 0, ?, ?, ?, NULL, NULL)`,
342 archived_at, deleted_at, settled_override, settled_at
343 ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, 0, ?, ?, ?, NULL, NULL, ?, ?)`,
317344 )
318345 .run(
319346 input.id,
......@@ -330,6 +357,8 @@ function insertThread(
330357 input.state === "plan" ? 1 : 0,
331358 minutesBefore(now, input.minutesAgo + 120),
332359 updatedAt,
360 input.settled ? "settled" : null,
361 input.settled ? updatedAt : null,
333362 );
334363 database
335364 .prepare(
......@@ -365,7 +394,11 @@ function seedDatabase(
365394 threads: ReadonlyArray<(typeof SHOWCASE_THREADS)[number]>,
366395 now: number,
367396): void {
368 const database = new NodeSqlite.DatabaseSync(dbPath);
397 // The environment server is already running against this file and keeps
398 // writing (migrations, projections) while we seed, so the write lock is
399 // genuinely contended — without a busy timeout `BEGIN IMMEDIATE` fails
400 // instantly with SQLITE_BUSY on a loaded machine.
401 const database = new NodeSqlite.DatabaseSync(dbPath, { timeout: 30_000 });
369402 try {
370403 database.exec("BEGIN IMMEDIATE");
371404 for (const table of [
......@@ -506,7 +539,14 @@ function seedDatabase(
506539 }
507540 database.exec("COMMIT");
508541 } catch (error) {
509 database.exec("ROLLBACK");
542 // A failed BEGIN (or an error SQLite already auto-rolled back) leaves no
543 // transaction, and the rollback's own "cannot rollback" error would then
544 // replace the one that actually explains the failure.
545 try {
546 database.exec("ROLLBACK");
547 } catch {
548 // Nothing to roll back.
549 }
510550 throw error;
511551 } finally {
512552 database.close();
scripts/mobile-showcase.test.ts+16-1
......@@ -272,8 +272,23 @@ it("seeds a playful multi-environment project spectrum", () => {
272272 SHOWCASE_ENVIRONMENTS.map((environment) => environment.label),
273273 ["Moonbase Terminal", "Suspense Station", "Kernel Cabin"],
274274 );
275 assert.equal(SHOWCASE_THREADS.length, 6);
275 assert.equal(SHOWCASE_THREADS.length, 8);
276276 assert.equal(new Set(SHOWCASE_THREADS.map((thread) => thread.projectId)).size, 3);
277 // Every project contributes to both the active block and the settled tail,
278 // so each list scope screenshots with the same two-part structure.
279 for (const project of SHOWCASE_PROJECTS) {
280 const projectThreads = SHOWCASE_THREADS.filter((thread) => thread.projectId === project.id);
281 assert.equal(
282 projectThreads.some((thread) => "settled" in thread && thread.settled),
283 true,
284 `${project.title} has no settled thread`,
285 );
286 assert.equal(
287 projectThreads.some((thread) => !("settled" in thread && thread.settled)),
288 true,
289 `${project.title} has no active thread`,
290 );
291 }
277292 assert.equal(
278293 SHOWCASE_PROJECTS.every((project) => project.favicon.includes("<svg")),
279294 true,
scripts/mobile-showcase.ts+6-1
......@@ -1338,7 +1338,12 @@ async function main(): Promise<void> {
13381338
13391339if (import.meta.main) {
13401340 void main().catch((error: unknown) => {
1341 NodeProcess.stderr.write(`${error instanceof Error ? error.message : String(error)}\n`);
1341 // Stack over message: the harness only fails in CI, where the line that
1342 // threw is the whole diagnosis and there is nobody at a terminal to
1343 // re-run it with more output.
1344 NodeProcess.stderr.write(
1345 `${error instanceof Error ? (error.stack ?? error.message) : String(error)}\n`,
1346 );
13421347 NodeProcess.exit(1);
13431348 });
13441349}