+ {/* Segment order: relationship metadata, active child state, GitHub PR, git status. */}
{showParentThread && parentThreadSection && isParentThreadOnly ? (
@@ -669,7 +676,7 @@ export function ThreadPromptContextBanner({
ariaLabel={parentSectionAriaLabel(parentThreadSection)}
icon={
@@ -701,23 +708,8 @@ export function ThreadPromptContextBanner({
onToggle={() => onToggleSection("childThreads")}
/>
) : null}
- {showTodo ? (
-
- }
- label={todoCountLabel}
- hideLabelInCompact={!hasSingleVisibleSegment}
- ariaLabel={`Todos: ${todoCountLabel ?? todoItems.length}`}
- isExpanded={isTodoExpanded}
- onToggle={() => onToggleSection("todos")}
- />
+ {showPullRequest && pullRequest ? (
+
) : null}
{showGit && gitSummary ? (
onToggleSection("git")}
/>
) : null}
- {showGit && gitSection.mergeBase ? (
-
-
- Merge base
-
-
- ) : null}
+ {segmentAction}
{showParentThread && parentThreadSection && !isParentThreadOnly ? (
) : null}
- {showTodo ? (
-
-
-
- ) : null}
{showGit ? (
{children} ;
+}
+
+const mixedTodos: ThreadTimelinePendingTodos = {
+ sourceSeq: 0,
+ updatedAt: 0,
+ items: [
+ {
+ id: "todo:1",
+ text: "Read the planning doc",
+ status: "completed",
+ },
+ {
+ id: "todo:2",
+ text: "Build initial banner shell",
+ status: "completed",
+ },
+ {
+ id: "todo:3",
+ text: "Wire pendingTodos from the timeline projection",
+ status: "in_progress",
+ },
+ {
+ id: "todo:4",
+ text: "Surface pendingTodos in `bb thread show` and `bb status`",
+ status: "pending",
+ },
+ {
+ id: "todo:5",
+ text: "Tighten GET /threads/:id with requirePublicProject",
+ status: "pending",
+ },
+ ],
+};
+
+const pendingOnlyTodos: ThreadTimelinePendingTodos = {
+ sourceSeq: 1,
+ updatedAt: 0,
+ items: [
+ {
+ id: "todo:pending:1",
+ text: "Create focused Storybook coverage",
+ status: "pending",
+ },
+ {
+ id: "todo:pending:2",
+ text: "Wire the production prompt stack",
+ status: "pending",
+ },
+ ],
+};
+
+function ToggleableTodoCard({
+ pendingTodos,
+ initiallyExpanded = false,
+}: {
+ pendingTodos: ThreadTimelinePendingTodos;
+ initiallyExpanded?: boolean;
+}) {
+ const [expanded, setExpanded] = useState(initiallyExpanded);
+ return (
+