@stevecastaneda/paseo-progress 0.2.0 → 0.3.0

package/README.md

@@ -10,8 +10,8 @@ The dashboard shows:
 - a "possibly stale" warning after 15 minutes with no update while tickets remain, unless Paseo shows an agent in the workspace still running (for example one waiting on its subagents), and never once every ticket is done or skipped or the run is finished; working items swap their spinner for a pulsing amber warning
 - percent of estimated work done, time done of time estimated (like "1 h 30 min of 2 h"; once everything is done, how long it really took), and a bar with one segment per ticket
 - **Stuck:** blocked tickets, working tickets with no update for longer than their estimate, and blockers the agent flags
-- **Tickets:** estimate, status, and the working ticket's stage. A ticket that waits for another (`--waits-for T03`) shows "Waits for Ticket 03" under its title until that one is done; waiting is the order of work, so it never counts as stuck, even if the agent also marked it blocked. Press a ticket for its story in a dialog: a timeline of its stages and statuses with how long each took, notes, time worked against the estimate, and the deliverables, questions and activity that belong to it. Items tagged with `--ticket` belong exactly; older, untagged ones are matched by when they happened and marked "by time"
-- **Questions:** each with a permanent reference (Q1, Q2, ...), lettered options, and the default the agent is using. Press a question to open it in a dialog, then press **Copy Q2 B** to copy `Q2 (title): B` for your reply. Files and links the agent attached (`--file`) open like deliverables: images and text files preview in Paseo (with **Back** to the question), links open in Paseo's browser, and other files open in their default app. From the pill's popover, the preview opens over the popover, which stays open so you can go back to it. Answers stay listed under the same reference.
+- **Tickets:** estimate, status, and the working ticket's stage. A ticket that waits for another (`--waits-for T03`) shows "Waits for Ticket 03" under its title until that one is done; waiting is the order of work, so it never counts as stuck, even if the agent also marked it blocked. Press a ticket for its story in a dialog. A summary on top shows its status and stage, time worked against the estimate as a bar that turns red past it, the agent's latest status line while it's working, and the agent on it. Tabs below hold the rest, each only when it has something: the ticket's write-up when it has a `--source` file (the start of it, with the rest a press away), a timeline of its stages and statuses with how long each took, and the activity, questions and deliverables that belong to it. The agent on a ticket shows by its chat title; pressing it opens that chat. Items tagged with `--ticket` belong exactly; older, untagged ones are matched by when they happened and marked "by time"
+- **Questions:** each with a permanent reference (Q1, Q2, ...), lettered options, and the option the agent recommends. The agent builds nothing a question affects until you answer; it works on other things meanwhile, and stops when nothing else is left. Press a question to open it in a dialog, then press **Copy Q2 B** to copy `Q2 (title): B` for your reply. Files and links the agent attached (`--file`) open like deliverables: images and text files preview in Paseo (with **Back** to the question), links open in Paseo's browser, and other files open in their default app. From the pill's popover, the preview opens over the popover, which stays open so you can go back to it. Answers stay listed under the same reference.
 - **Activity**, **Answered** questions and **Deliverables** (press one to open it), sharing one card with a tab for each; the panel remembers the tab you picked. Each shows the newest 10, with **Show 10 older** below
 
 The panel lives in Explorer, beside the agent chat, so you can watch both. Open it from Command Center with **Open Progress**. When questions are waiting or something is stuck, a pill above the message box shows it (`3 questions · 1 stuck`). Pressing it opens a popover with each open question, its choices and their Copy buttons, and what is stuck, so you can answer without leaving the chat. **Open Progress** at the bottom opens the panel in Explorer.
@@ -72,14 +72,15 @@ Run `paseo-progress --help` for every command, and `paseo-progress <command> --h
 
 ```sh
 paseo-progress start "Loan Options snapshots" --subtitle "4 tickets"
-paseo-progress ticket add "Ticket 01: Saved table" --estimate 120      # Added T01
+paseo-progress ticket add "Ticket 01: Saved table" --estimate 120 \
+  --source specs/01-saved-table.md                                     # Added T01
 paseo-progress ticket update T01 --status working --stage Build
 paseo-progress ticket update T01 --stage Fixes
 paseo-progress ticket update T01 --status done
 paseo-progress question ask "Row spacing" "Even out the card spacing?" \
   --option "A=Even it out | Cards look balanced" \
   --option "B=Leave it | No change" \
-  --default B --raised-by "Ticket 01 design review"                     # Asked Q1
+  --recommend A --raised-by "Ticket 01 design review"                   # Asked Q1
 paseo-progress question answer Q1 A --words "Even it out."
 paseo-progress deliverable add "Browser check screenshots" .scratch/shots/ --ticket T01
 paseo-progress activity add "Saved table matches the design now." --ticket T01
@@ -90,18 +91,21 @@ paseo-progress finish "Snapshots ship for all four tables"
 ```
 
 - Statuses are `not_started`, `working`, `blocked`, `done`, and `skipped`. Skipped tickets leave the totals.
+- `ticket add` and `ticket update` take an optional `--source <path or link>[=<label>]`: where the ticket is written up, like its spec file or issue. It shows under the ticket's status in its dialog and opens like a deliverable. `--source ""` clears it. Tickets without one are fine.
 - A working ticket is stuck once it goes longer than its estimate without an update, timed from its last status, stage or note change, or activity tagged to it. The ticket's dialog still shows total time worked against the estimate.
-- `question ask --waits` marks a question the agent won't act on until you answer. Its default shows in amber.
+- `question ask` needs `--recommend`, the agent's pick. The question dialog tags that option "Recommended".
 - Deliverable paths are stored relative to the worktree root. Web links open in Paseo's browser. Pressing an image (PNG, JPEG, GIF, WebP, up to 10 MB) or text deliverable (Markdown, text, logs, JSON, YAML, CSV; the first 256 KB) previews it in a dialog inside Paseo, which also works from a phone; **Open** there opens the file in its default app. Pressing any other local deliverable opens it with its default app on the machine running the Paseo daemon (for example HTML in your browser and folders in the file manager). On macOS, **Open** sends text files to your default browser. Only recorded deliverables inside the worktree open this way; otherwise the path is copied. The copy icon on each row copies the path.
+- Several agents can share one run. When another session adds a ticket, each agent sees it at the end of its next command's output (and in `show`), and the skill has it work that ticket in order after its current one. An agent only hears about tickets added since its own last update in the run, and only once.
 - `start` begins a fresh dashboard. Earlier runs stay in the file. Question references stay unique across runs.
 - `finish "<outcome>"` closes the run once every ticket is done or skipped, no question is open, and nothing is flagged stuck; otherwise it says what is left. The run stays on the dashboard, marked Finished with its outcome, and takes no more updates, so the next agent in the worktree starts a new run instead of adding to it.
 
 ## The progress file
 
-The progress file, `progress.jsonl`, holds one JSON event per line, each with a version (`v`), a UTC timestamp (`ts`) from the real clock, and a `type`. It is only ever appended to, so you can read or diff the history. A half-written last line is ignored. Other bad lines are skipped and listed in a small notice in the panel while the rest still renders. A lock keeps two commands from writing at once or handing out the same id.
+The progress file, `progress.jsonl`, holds one JSON event per line, each with a version (`v`), a UTC timestamp (`ts`) from the real clock, and a `type`. Events written by a Paseo agent also carry its agent id (`by`). It is only ever appended to, so you can read or diff the history. A half-written last line is ignored. Other bad lines are skipped and listed in a small notice in the panel while the rest still renders. A lock keeps two commands from writing at once or handing out the same id.
 
 ## Limitations
 
+- An agent hears about tickets other sessions added only when it next runs `paseo-progress`. One in the middle of a long step finds out when that step ends.
 - Nothing updates unless the agent runs `paseo-progress`. Agents need the skill, and an agent that skips the command leaves the dashboard behind.
 - The command runs on the machine that hosts the Paseo daemon, and it needs Node.js 22.18 or later there.
 - Each worktree keeps its own dashboard. There's no view across worktrees.

package/client/attachments.tsx

@@ -6,7 +6,7 @@ import { type Attachment, attachmentIcon, canPreview, shortName } from "../share
 import { PressableRow } from "./row";
 import { openDeliverable } from "../shared/rpc";
 
-export { type Attachment, attachmentIcon, deliverableAttachment, questionAttachments, shortName } from "../shared/attachments";
+export { type Attachment, attachmentIcon, deliverableAttachment, questionAttachments, shortName, ticketSourceAttachment } from "../shared/attachments";
 
 type Colors = PluginWorkspacePanelProps["theme"]["colors"];
 type Navigation = PluginWorkspacePanelProps["navigation"];

package/client/dialog-stack.tsx

@@ -4,6 +4,7 @@ import React, { useEffect, useRef, useState } from "react";
 import type { Dashboard, Question } from "../shared/dashboard";
 import { type Attachment, attachmentIcon, useAttachmentOpener } from "./attachments";
 import { useLastPresent } from "./motion";
+import { NarrowProvider } from "./narrow";
 import { BackButton, PreviewContent, previewable } from "./preview";
 import { QuestionView, useCopy } from "./questions";
 import { TicketStoryView } from "./ticket-dialog";
@@ -48,8 +49,15 @@ export function StackedDialog({ colors, root, onClose, questions, dashboard, now
   const opener = useAttachmentOpener({ ...context, onPreview: (attachment) => push({ kind: "preview", attachment, group: previewable(group.current) }) });
   const openAttachment = (attachment: Attachment, from: Attachment[]) => {
     group.current = from;
+    // A link opens elsewhere in Paseo; close first so it isn't left behind the dialog.
+    if (attachment.url) onClose();
     void opener.open(attachment);
   };
+  // Opens the agent's chat in its workspace, with the dialog out of the way.
+  const openAgent = context.navigation ? (agentId: string) => {
+    onClose();
+    context.navigation!.openAgent({ agentId });
+  } : undefined;
   const copy = useCopy();
   const steps: Step[] = root ? [root, ...trail] : [];
   // Keep drawing the last step while the dialog fades out.
@@ -75,6 +83,8 @@ export function StackedDialog({ colors, root, onClose, questions, dashboard, now
       open={Boolean(root)} onOpenChange={(next) => { if (!next) onClose(); }}>
       {/* One Modal.Content for every step: replacing it would re-present the sheet on phones. */}
       <Modal.Content scrollable={!(preview && previewLong)}>
+      {/* A dialog has room for clock times, however narrow the panel that opened it. */}
+      <NarrowProvider value={false}>
       {preview ? (
         <PreviewContent colors={colors} attachment={preview.attachment} workspaceId={context.workspaceId} workspaceDirectory={context.workspaceDirectory}
           onOpenOnHost={() => { onClose(); void opener.openOnHost(preview.attachment); }} backLabel={back?.label} onBack={back?.onPress}
@@ -82,7 +92,7 @@ export function StackedDialog({ colors, root, onClose, questions, dashboard, now
       ) : (
         <>
           {ticket && dashboard ? (
-            <TicketStoryView colors={colors} dashboard={dashboard} ticket={ticket} now={now} live={live}
+            <TicketStoryView colors={colors} dashboard={dashboard} ticket={ticket} now={now} live={live} context={context} onOpenAgent={openAgent}
               onOpenAttachment={openAttachment} onOpenQuestion={(id) => push({ kind: "question", id })} />
           ) : null}
           {question ? (
@@ -94,6 +104,7 @@ export function StackedDialog({ colors, root, onClose, questions, dashboard, now
           ) : null}
         </>
       )}
+      </NarrowProvider>
       </Modal.Content>
     </Modal>
   );

package/client/narrow.tsx

@@ -0,0 +1,13 @@
+import { createContext, useContext } from "react";
+
+// Paseo opens the Explorer sidebar at 320px and plugins can't ask for more,
+// so at or below this width the panel trims what it shows to fit.
+export const NARROW_MAX = 400;
+
+const Narrow = createContext(false);
+
+export const NarrowProvider = Narrow.Provider;
+
+export function useNarrow(): boolean {
+  return useContext(Narrow);
+}

package/client/panel.tsx

@@ -10,7 +10,7 @@ import { SectionTitle } from "./section-title";
 import { raised } from "./surfaces";
 import { When } from "./when";
 import React, { useEffect, useRef, useState } from "react";
-import { ActivityIndicator, Animated, Platform, Pressable, ScrollView, Text, View } from "react-native";
+import { ActivityIndicator, Animated, Platform, ScrollView, Text, View } from "react-native";
 import { finishedToFold, isFinished, shortTitle, type Activity, type Dashboard, type FileIssue, type ProgressSegment, type StuckItem, type Ticket } from "../shared/dashboard";
 import type { TicketStatus } from "../shared/events";
 import { formatEstimate, formatMinutes, formatWorkDone, minutesSince } from "../shared/format";
@@ -19,8 +19,10 @@ import { useDashboard } from "./dashboard-query";
 import { STATUS_LABEL } from "./status-badge";
 import { TicketDialogs } from "./ticket-dialog";
 import { PressableRow } from "./row";
+import { TabStrip } from "./tabs";
 import { ShowMoreRow, usePaged } from "./show-more";
 import { notePanelOpened } from "./panel-opened";
+import { NARROW_MAX, NarrowProvider, useNarrow } from "./narrow";
 
 type Colors = PluginWorkspacePanelProps["theme"]["colors"];
 
@@ -40,9 +42,12 @@ function WorkspaceProgress({ theme, workspaceId, host, layout, navigation }: Plu
   const query = useDashboard(host.id, workspaceId, directory);
   const result = query.data ?? null;
   useMarkPanelOpened(workspaceId, directory, Boolean(result?.configured && !result.panelOpened));
+  const [narrow, setNarrow] = useState(false);
 
   return (
-    <ScrollView style={{ flex: 1, backgroundColor: colors.surface0 }} contentContainerStyle={{ paddingBottom: 16 }}>
+    <NarrowProvider value={narrow}>
+    <ScrollView onLayout={(event) => setNarrow(event.nativeEvent.layout.width <= NARROW_MAX)}
+      style={{ flex: 1, backgroundColor: colors.surface0 }} contentContainerStyle={{ paddingBottom: 16 }}>
       {query.isPending ? <ActivityIndicator color={colors.foregroundMuted} accessibilityLabel="Loading progress" style={{ padding: 12 }} /> : null}
       {query.error ? (
         <Text accessibilityRole="alert" selectable style={{ color: colors.statusDanger, fontSize: 12, lineHeight: 18, padding: 12 }}>
@@ -58,6 +63,7 @@ function WorkspaceProgress({ theme, workspaceId, host, layout, navigation }: Plu
         workspaceId={workspaceId} workspaceDirectory={result.root} file={result.file} navigation={navigation} /> : null}
       {result?.inRepo && directory ? <HistoryRow colors={colors} workspaceId={workspaceId} directory={directory} savedTo={result.savedTo} /> : null}
     </ScrollView>
+    </NarrowProvider>
   );
 }
 
@@ -207,7 +213,7 @@ function DashboardView({ colors, dashboard, agentRunning, compact, workspaceId,
         style={{ flexDirection: wide ? "row" : "column", alignItems: "flex-start" }}>
         <View style={{ flex: wide ? 3 : undefined, alignSelf: "stretch", minWidth: 0 }}>
           <Presence show={dashboard.questions.open.length > 0} order={3}>{dashboard.questions.open.length ? (
-            <QuestionsSection colors={colors} questions={dashboard.questions.open} answered={dashboard.questions.answered} now={now} compact={compact || !wide} context={attachmentContext} />
+            <QuestionsSection colors={colors} questions={dashboard.questions.open} answered={dashboard.questions.answered} now={now} context={attachmentContext} />
           ) : null}</Presence>
           <Presence show={Boolean(dashboard.stuck.length)} order={3}>{dashboard.stuck.length ? <StuckSection colors={colors} items={dashboard.stuck} now={now} /> : null}</Presence>
           <Presence show order={4}>
@@ -256,6 +262,7 @@ const historyTabs = new Map<string, HistoryTab>();
 function HistoryCard({ colors, workspaceId, tabs }: { colors: Colors; workspaceId: string; tabs: HistoryTabEntry[] }) {
   const [tab, setTab] = useState<HistoryTab>(() => historyTabs.get(workspaceId) ?? "activity");
   const [showIcons, setShowIcons] = useState(true);
+  const narrow = useNarrow();
   const choose = (next: HistoryTab) => {
     historyTabs.set(workspaceId, next);
     setTab(next);
@@ -264,11 +271,8 @@ function HistoryCard({ colors, workspaceId, tabs }: { colors: Colors; workspaceI
   return (
     <View onLayout={(event) => setShowIcons(event.nativeEvent.layout.width >= TAB_ICONS_MIN)}
       style={{ margin: 12, marginBottom: 0, ...raised(colors), borderRadius: 6, overflow: "hidden" }}>
-      <View accessibilityRole="tablist" style={{ flexDirection: "row", flexWrap: "wrap", columnGap: 16, paddingHorizontal: 10, borderBottomWidth: 1, borderBottomColor: colors.border }}>
-        {tabs.map((entry) => {
-          return <Tab key={entry.id} colors={colors} label={entry.label} icon={showIcons ? entry.icon : null} count={entry.count} selected={entry.id === current.id} onPress={() => choose(entry.id)} />;
-        })}
-      </View>
+      <TabStrip colors={colors} narrow={narrow} tabs={tabs.map((entry) => ({ ...entry, icon: showIcons ? entry.icon : null }))} selected={current.id} onSelect={choose}
+        style={{ paddingHorizontal: narrow ? 8 : 10 }} />
       {current.count === 0 ? (
         <Text style={{ color: colors.foregroundMuted, fontSize: 12, lineHeight: 18, paddingHorizontal: 10, paddingVertical: 8 }}>{current.empty}</Text>
       ) : current.content}
@@ -276,27 +280,6 @@ function HistoryCard({ colors, workspaceId, tabs }: { colors: Colors; workspaceI
   );
 }
 
-// Instant feedback: tabs switch often, so hover and press change color only.
-function Tab({ colors, label, icon, count, selected, onPress }: { colors: Colors; label: string; icon: string | null; count: number; selected: boolean; onPress(): void }) {
-  const [hovered, setHovered] = useState(false);
-  return (
-    <Pressable accessibilityRole="tab" accessibilityState={{ selected }} onPress={onPress}
-      onHoverIn={() => setHovered(true)} onHoverOut={() => setHovered(false)}
-      style={({ pressed }) => ({
-        flexDirection: "row", alignItems: "center", gap: 6, paddingTop: 8, paddingBottom: 6, marginBottom: -1,
-        borderBottomWidth: 2,
-        borderBottomColor: selected ? colors.accent : pressed || hovered ? colors.border : "transparent",
-      })}>
-      {icon ? <Icon name={icon} size={14} color={selected ? colors.accent : colors.foregroundMuted} /> : null}
-      <Text style={{ color: selected || hovered ? colors.foreground : colors.foregroundMuted, fontSize: 13, lineHeight: 18, fontWeight: "600" }}>{label}</Text>
-      {/* Count badge: muted on both tabs; the chosen tab's number reads darker. */}
-      <View style={{ minWidth: 16, paddingHorizontal: 4, borderRadius: 4, alignItems: "center", backgroundColor: colors.surface2 }}>
-        <Text style={{ color: selected ? colors.foreground : colors.foregroundMuted, fontSize: 10, lineHeight: 14, fontWeight: "600", fontVariant: ["tabular-nums"] }}>{count}</Text>
-      </View>
-    </Pressable>
-  );
-}
-
 // Newest first, 10 at a time (see usePaged).
 function ActivityList({ colors, activity, now }: { colors: Colors; activity: Activity[]; now: number }) {
   const paged = usePaged(activity);
@@ -341,11 +324,12 @@ function Card({ colors, icon, title, children }: { colors: Colors; icon: string;
 }
 
 function ProgressBar({ colors, progress, live }: { colors: Colors; progress: Dashboard["progress"]; live: boolean }) {
+  const narrow = useNarrow();
   return (
     <View style={{ paddingHorizontal: 12, paddingTop: 12, paddingBottom: 12, gap: 8, borderBottomWidth: 1, borderBottomColor: colors.border }}>
       <View style={{ flexDirection: "row", alignItems: "baseline", gap: 8 }}>
         <Text style={{ flex: 1, color: colors.foregroundMuted, fontSize: 13, lineHeight: 18 }}>
-          <Text style={{ color: colors.foreground, fontWeight: "600" }}>{progress.percent}%</Text> of estimated work done
+          <Text style={{ color: colors.foreground, fontWeight: "600" }}>{progress.percent}%</Text> {narrow ? "done" : "of estimated work done"}
         </Text>
         <Text style={{ color: colors.foregroundMuted, fontSize: 12, lineHeight: 18 }}>
           {formatWorkDone(progress.doneMin, progress.totalMin, progress.tookMin)}
@@ -393,6 +377,7 @@ function Shimmer() {
 const STUCK_ICON: Record<StuckItem["kind"], string> = { blocked: "Ban", overdue: "Hourglass", manual: "Flag" };
 
 function StuckSection({ colors, items, now }: { colors: Colors; items: StuckItem[]; now: number }) {
+  const narrow = useNarrow();
   return (
     <View style={{ margin: 12, marginBottom: 0, borderWidth: 1, borderColor: colors.statusDanger, borderRadius: 6, overflow: "hidden" }}>
       <SectionTitle colors={colors} icon="OctagonAlert" title="Stuck" color={colors.statusDanger} style={{ borderBottomWidth: 1, borderBottomColor: colors.border }} />
@@ -404,7 +389,7 @@ function StuckSection({ colors, items, now }: { colors: Colors; items: StuckItem
           <Text style={{ color: colors.foreground, fontSize: 13, lineHeight: 18 }}>{item.title}</Text>
           <Text style={{ color: colors.foregroundMuted, fontSize: 12, lineHeight: 17 }}>
             {item.kind === "overdue" ? `No update for longer than its ${formatMinutes(item.estimateMin)} estimate. Last update ` : null}
-            {item.kind === "blocked" ? `Blocked${item.note ? `: ${item.note}` : ""}. Since ` : null}
+            {item.kind === "blocked" ? `Blocked${item.note ? `: ${item.note}` : ""}${narrow ? ", " : ". Since "}` : null}
             {item.kind === "manual" ? `${item.ticketId ? `${item.reason}. ` : ""}Flagged ` : null}
             <When colors={colors} iso={item.since} now={now} />
           </Text>
@@ -450,6 +435,7 @@ function FinishedRow({ colors, tickets, shown, onPress }: { colors: Colors; tick
   const label = [done ? `${done} done` : "", skipped ? `${skipped} skipped` : ""].filter(Boolean).join(", ");
   const estimateMin = tickets.reduce((sum, ticket) => sum + (ticket.status === "done" ? ticket.estimateMin : 0), 0);
   const chevron = shown ? "ChevronUp" : "ChevronDown";
+  const narrow = useNarrow();
   return (
     <PressableRow colors={colors} accessibilityRole="button" accessibilityState={{ expanded: shown }}
       accessibilityLabel={`${shown ? "Hide" : "Show"} ${label}`} onPress={onPress}
@@ -458,8 +444,11 @@ function FinishedRow({ colors, tickets, shown, onPress }: { colors: Colors; tick
         <Icon name={done ? "Check" : "CircleSlash"} size={14} color={done ? colors.statusSuccess : colors.foregroundMuted} />
       </View>
       <Text style={{ flex: 1, minWidth: 0, color: colors.foregroundMuted, fontSize: 12, lineHeight: 18, fontWeight: "600", fontVariant: ["tabular-nums"] }}>{label}</Text>
-      <View style={{ width: 12 }} />
-      <Text style={{ minWidth: 40, flexShrink: 0, textAlign: "right", color: colors.foregroundMuted, fontSize: 12, lineHeight: 18, fontVariant: ["tabular-nums"] }}>{estimateMin ? formatEstimate(estimateMin) : ""}</Text>
+      {/* Narrow ticket rows drop their chevron, so this total would sit off their estimate column. */}
+      {narrow ? null : <>
+        <View style={{ width: 12 }} />
+        <Text style={{ minWidth: 40, flexShrink: 0, textAlign: "right", color: colors.foregroundMuted, fontSize: 12, lineHeight: 18, fontVariant: ["tabular-nums"] }}>{estimateMin ? formatEstimate(estimateMin) : ""}</Text>
+      </>}
       <View style={{ paddingTop: 2 }}>
         <IconSwap swapKey={chevron} size={14}><Icon name={chevron} size={14} color={colors.foregroundMuted} /></IconSwap>
       </View>
@@ -471,12 +460,14 @@ function FinishedRow({ colors, tickets, shown, onPress }: { colors: Colors; tick
 function TicketRow({ colors, ticket, live, now, onOpen, deliverables }: { colors: Colors; ticket: Ticket; live: boolean; now: number; onOpen(): void; deliverables: number }) {
   const muted = ticket.status === "skipped";
   const working = ticket.status === "working";
+  // Narrow: tighter gaps and no chevron (the whole row still presses), so the title keeps its width.
+  const narrow = useNarrow();
   return (
     <PressableRow colors={colors} onSurface1={working} transparentAtRest={!working}
       accessibilityRole="button" accessibilityLabel={`${ticket.id} details`} onPress={onOpen}
-      style={{ flexDirection: "row", alignItems: "flex-start", gap: 10, paddingHorizontal: 10, paddingVertical: 8, borderTopWidth: 1, borderTopColor: colors.border }}>
+      style={{ flexDirection: "row", alignItems: "flex-start", gap: narrow ? 6 : 10, paddingHorizontal: 10, paddingVertical: 8, borderTopWidth: 1, borderTopColor: colors.border }}>
       {/* The icon is the only status mark on the row; the ticket dialog spells it out in a badge. */}
-      <View accessible accessibilityLabel={ticket.waitingFor ? "Waiting" : STATUS_LABEL[ticket.status]} style={{ width: 16, paddingTop: 2, alignItems: "center" }}>
+      <View accessible accessibilityLabel={ticket.waitingFor ? "Waiting" : STATUS_LABEL[ticket.status]} style={{ width: 16, paddingTop: 2, alignItems: "center", marginRight: narrow ? 2 : 0 }}>
         <IconSwap swapKey={ticket.waitingFor || ticket.status === "not_started" ? "waiting" : ticket.status === "working" ? `working-${live}` : ticket.status} size={14}><StatusIcon colors={colors} status={ticket.status} live={live} waiting={Boolean(ticket.waitingFor)} /></IconSwap>
       </View>
       <View style={{ flex: 1, minWidth: 0, gap: 2 }}>
@@ -490,7 +481,7 @@ function TicketRow({ colors, ticket, live, now, onOpen, deliverables }: { colors
         ) : null}
         {ticket.status === "working" && ticket.workingSince ? (
           <Text style={{ color: colors.foregroundMuted, fontSize: 12, lineHeight: 17 }}>
-            Working since <When colors={colors} iso={ticket.workingSince} now={now} />
+            {narrow ? "Started working " : "Working since "}<When colors={colors} iso={ticket.workingSince} now={now} />
           </Text>
         ) : null}
         {ticket.waitingFor ? (
@@ -503,7 +494,7 @@ function TicketRow({ colors, ticket, live, now, onOpen, deliverables }: { colors
         {deliverables ? <Icon name="Package" size={12} color={colors.foregroundMuted} /> : null}
       </View>
       <Text style={{ minWidth: 40, flexShrink: 0, textAlign: "right", color: colors.foregroundMuted, fontSize: 12, lineHeight: 18, fontVariant: ["tabular-nums"] }}>{formatEstimate(ticket.estimateMin)}</Text>
-      <View style={{ paddingTop: 2 }}><Icon name="ChevronRight" size={14} color={colors.foregroundMuted} /></View>
+      {narrow ? null : <View style={{ paddingTop: 2 }}><Icon name="ChevronRight" size={14} color={colors.foregroundMuted} /></View>}
     </PressableRow>
   );
 }

package/client/pill-popover.tsx

@@ -8,7 +8,7 @@ import { progressPanel } from "./pills";
 import { PressScale } from "./motion";
 import { type Attachment, isPreviewable, useAttachmentOpener } from "./attachments";
 import { PreviewDialog, previewable } from "./preview";
-import { DefaultBadge, QuestionDetail, useCopy } from "./questions";
+import { QuestionDetail, QuestionState, useCopy } from "./questions";
 import { raised } from "./surfaces";
 
 type Colors = PluginButtonContentProps["theme"]["colors"];
@@ -97,8 +97,10 @@ export function AttentionList({ colors, dashboard, onSurface1, onCopy, onOpenAtt
         <View key={question.id} style={{ gap: 6 }}>
           <View style={{ flexDirection: "row", alignItems: "flex-start", gap: 8 }}>
             <Text style={{ color: colors.foreground, fontSize: 13, lineHeight: 19, fontWeight: "600" }}>{question.id}</Text>
-            <Text style={{ flex: 1, color: colors.foreground, fontSize: 13, lineHeight: 19 }}>{question.question}</Text>
-            <DefaultBadge colors={colors} value={question.default} waits={question.waits} />
+            <View style={{ flex: 1, minWidth: 0, gap: 2 }}>
+              <Text style={{ color: colors.foreground, fontSize: 13, lineHeight: 19 }}>{question.question}</Text>
+              <QuestionState colors={colors} question={question} />
+            </View>
           </View>
           <QuestionDetail colors={colors} question={question} now={now} onSurface1={onSurface1} onCopy={(letter) => onCopy(question, letter)} onOpenAttachment={onOpenAttachment} />
         </View>

package/client/questions.tsx

@@ -42,13 +42,12 @@ export interface AttachmentContext {
   navigation?: PluginWorkspacePanelProps["navigation"];
 }
 
-export function QuestionsSection({ colors, questions, answered, now, compact, context }: {
+export function QuestionsSection({ colors, questions, answered, now, context }: {
   colors: Colors;
   questions: Question[];
   // So a question answered while its dialog is open shows the answer instead of vanishing.
   answered: Question[];
   now: number;
-  compact: boolean;
   context: AttachmentContext;
 }) {
   const [openId, setOpenId] = useState<string | null>(null);
@@ -61,9 +60,6 @@ export function QuestionsSection({ colors, questions, answered, now, compact, co
         <View style={{ borderWidth: 1, borderColor: colors.accent, backgroundColor: colors.accent, borderRadius: 999, paddingHorizontal: 8, paddingVertical: 1 }}>
           <Text style={{ color: colors.accentForeground, fontSize: 11, lineHeight: 16 }}>{questions.length} waiting</Text>
         </View>
-        <Text style={{ flexBasis: compact ? "100%" : undefined, flex: compact ? undefined : 1, textAlign: compact ? "left" : "right", color: colors.foregroundMuted, fontSize: 11, lineHeight: 16 }}>
-          Work continues on each default until you answer, except where it waits. Press a question to see its choices and copy an answer.
-        </Text>
       </View>
       {questions.map((question, index) => (
         <QuestionRow key={question.id} colors={colors} question={question} first={index === 0}
@@ -123,7 +119,7 @@ function AnswerSummary({ colors, question, now }: { colors: Colors; question: Qu
         {chosen ? ` ${chosen.label}.` : ""}
         {answer.words ? <Text style={{ color: colors.foregroundMuted }}> “{answer.words}”</Text> : null}
         <Text style={{ color: colors.foregroundMuted }}>
-          {answer.changedCourse ? ` Differs from the default (${question.default}), so work changes course.` : " Same as the default, so no change of course."}
+          {answer.changedCourse ? " The agent had already built another option, so work changed course." : ""}
         </Text>
       </Text>
       <Text style={{ color: colors.foregroundMuted, fontSize: 11, lineHeight: 16 }}>
@@ -145,6 +141,9 @@ function QuestionRow({ colors, question, first, onOpen, onCopy }: {
       <PressScale accessibilityRole="button" accessibilityLabel={`Copy ${question.id} for your reply`} onPress={onCopy} hitSlop={6}
         outerStyle={{ alignSelf: "flex-start", marginTop: 1 }}
         style={({ pressed }) => ({
+          // One width for every id, so the questions beside them start on one edge.
+          minWidth: 34,
+          alignItems: "center",
           paddingHorizontal: 6,
           borderRadius: 999,
           backgroundColor: pressed ? colors.surface2 : colors.surface1,
@@ -154,8 +153,7 @@ function QuestionRow({ colors, question, first, onOpen, onCopy }: {
       </PressScale>
       <PressableRow colors={colors} accessibilityRole="button" accessibilityLabel={`${question.id} choices`} onPress={onOpen}
         style={{ flex: 1, minWidth: 0, flexDirection: "row", alignItems: "flex-start", gap: 8, borderRadius: 4, margin: -4, padding: 4 }}>
-        <Text style={{ flex: 1, color: colors.foreground, fontSize: 13, lineHeight: 19 }}>{question.question}</Text>
-        <DefaultBadge colors={colors} value={question.default} waits={question.waits} />
+        <Text style={{ flex: 1, minWidth: 0, color: colors.foreground, fontSize: 13, lineHeight: 19 }}>{question.question}</Text>
         {/* Optical: centers the 14px chevron on the 19px first line. */}
         <View style={{ paddingTop: 2.5 }}><Icon name="ChevronRight" size={14} color={colors.foregroundMuted} /></View>
       </PressableRow>
@@ -174,9 +172,9 @@ export function QuestionView({ colors, question, now, onCopy, onOpenAttachment,
 }) {
   return (
     <View style={{ gap: 10 }}>
-      <View style={{ flexDirection: "row", alignItems: "flex-start", gap: 8 }}>
-        <Text style={{ flex: 1, color: colors.foreground, fontSize: 14, lineHeight: 20 }}>{question.question}</Text>
-        {!question.answer ? <DefaultBadge colors={colors} value={question.default} waits={question.waits} /> : null}
+      <View style={{ gap: 2 }}>
+        <Text style={{ color: colors.foreground, fontSize: 14, lineHeight: 20 }}>{question.question}</Text>
+        {!question.answer ? <QuestionState colors={colors} question={question} /> : null}
       </View>
       {question.answer ? <AnswerSummary colors={colors} question={question} now={now} /> : null}
       <QuestionDetail colors={colors} question={question} now={now} onSurface1 onCopy={onCopy} onOpenAttachment={onOpenAttachment} />
@@ -185,15 +183,10 @@ export function QuestionView({ colors, question, now, onCopy, onOpenAttachment,
   );
 }
 
-// A question that waits shows its default in amber: the agent is not acting on it.
-export function DefaultBadge({ colors, value, waits }: { colors: Colors; value: string; waits: boolean }) {
-  return (
-    <View style={{ flexDirection: "row", borderWidth: 1, borderColor: waits ? colors.statusWarning : colors.accent, borderRadius: 999, paddingHorizontal: 8, paddingVertical: 1 }}>
-      <Text style={{ color: waits ? colors.statusWarning : colors.foregroundMuted, fontSize: 11, lineHeight: 16 }}>
-        Default <Text style={{ color: waits ? colors.statusWarning : colors.foreground, fontWeight: "600" }}>{value}</Text>{waits ? ", waits for you" : ""}
-      </Text>
-    </View>
-  );
+// The agent's pick, under an open question that has no lettered options to tag.
+export function QuestionState({ colors, question }: { colors: Colors; question: Question }) {
+  if (question.options.length || !question.recommended) return null;
+  return <Text style={{ color: colors.foregroundMuted, fontSize: 12, lineHeight: 17 }}>Recommended: <Text style={{ color: colors.foreground }}>{question.recommended}</Text></Text>;
 }
 
 // `onSurface1` when drawn on a surface1 background (Paseo's dialogs), so the
@@ -210,10 +203,11 @@ export function QuestionDetail({ colors, question, now, onCopy, onOpenAttachment
   return (
     <View style={{ gap: 8, paddingTop: 2 }}>
       {question.options.map((option) => {
-        const isDefault = option.letter === question.default;
-        // Once answered, the border marks the choice made; before that, the default.
+        const recommended = option.letter === question.recommended;
+        // Once answered, the border marks the choice made; before that, the agent's recommendation.
         const chosen = question.answer?.choice === option.letter;
-        const borderColor = question.answer ? (chosen ? colors.statusSuccess : colors.border) : isDefault ? colors.accent : colors.border;
+        const borderColor = question.answer ? (chosen ? colors.statusSuccess : colors.border) : recommended ? colors.accent : colors.border;
+        const settled = Boolean(question.answer);
         return (
           <View key={option.letter} style={{ flexDirection: "row", alignItems: "flex-start", gap: 8, padding: 8, borderRadius: 12, borderWidth: 1, borderColor }}>
             <Text style={{ color: colors.foreground, fontSize: 13, lineHeight: 18, fontWeight: "600", width: 14 }}>{option.letter}</Text>
@@ -221,7 +215,7 @@ export function QuestionDetail({ colors, question, now, onCopy, onOpenAttachment
               <Text style={{ color: colors.foreground, fontSize: 13, lineHeight: 18 }}>
                 {option.label}
                 {chosen ? <Text style={{ color: colors.statusSuccess }}>  Your answer</Text> : null}
-                {isDefault ? <Text style={{ color: question.answer ? colors.foregroundMuted : colors.accent }}>  Default</Text> : null}
+                {recommended ? <Text style={{ color: settled ? colors.foregroundMuted : colors.accent }}>  Recommended</Text> : null}
               </Text>
               {option.consequence ? <Text style={{ color: colors.foregroundMuted, fontSize: 12, lineHeight: 17 }}>{option.consequence}</Text> : null}
             </View>

package/client/tabs.tsx

@@ -0,0 +1,65 @@
+import type { PluginWorkspacePanelProps } from "@getpaseo/plugin/client";
+import { Icon } from "@getpaseo/plugin/client/react-native";
+import React, { useState } from "react";
+import { Pressable, Text, View } from "react-native";
+
+type Colors = PluginWorkspacePanelProps["theme"]["colors"];
+
+export interface TabEntry<Id extends string> {
+  id: Id;
+  label: string;
+  icon?: string | null;
+  // A count badge beside the label; none when undefined.
+  count?: number;
+}
+
+// A row of tabs over a bottom rule, as in the panel's history card and the
+// ticket dialog. Narrow tightens the spacing so three tabs fit the 320px sidebar.
+// `fit` drops the icons when the tabs would otherwise wrap onto a second line.
+export function TabStrip<Id extends string>({ colors, tabs, selected, onSelect, narrow = false, fit = false, style }: {
+  colors: Colors;
+  tabs: Array<TabEntry<Id>>;
+  selected: Id;
+  onSelect(id: Id): void;
+  narrow?: boolean;
+  fit?: boolean;
+  style?: object;
+}) {
+  // Set once the tabs wrapped with icons, for this set of tabs.
+  const ids = tabs.map((entry) => entry.id).join();
+  const [wrappedFor, setWrappedFor] = useState<string | null>(null);
+  const iconless = fit && wrappedFor === ids;
+  return (
+    <View accessibilityRole="tablist"
+      // One row is 32px (8 + 18 + 6); anything taller wrapped.
+      onLayout={fit ? (event) => { if (!iconless && event.nativeEvent.layout.height > 40) setWrappedFor(ids); } : undefined}
+      style={[{ flexDirection: "row", flexWrap: "wrap", columnGap: narrow ? 10 : 16, borderBottomWidth: 1, borderBottomColor: colors.border }, style]}>
+      {tabs.map((entry) => (
+        <Tab key={entry.id} colors={colors} narrow={narrow} entry={iconless ? { ...entry, icon: null } : entry} selected={entry.id === selected} onPress={() => onSelect(entry.id)} />
+      ))}
+    </View>
+  );
+}
+
+// Instant feedback: tabs switch often, so hover and press change color only.
+function Tab<Id extends string>({ colors, narrow, entry, selected, onPress }: { colors: Colors; narrow: boolean; entry: TabEntry<Id>; selected: boolean; onPress(): void }) {
+  const [hovered, setHovered] = useState(false);
+  return (
+    <Pressable accessibilityRole="tab" accessibilityState={{ selected }} onPress={onPress}
+      onHoverIn={() => setHovered(true)} onHoverOut={() => setHovered(false)}
+      style={({ pressed }) => ({
+        flexDirection: "row", alignItems: "center", gap: narrow ? 4 : 6, paddingTop: 8, paddingBottom: 6, marginBottom: -1,
+        borderBottomWidth: 2,
+        borderBottomColor: selected ? colors.accent : pressed || hovered ? colors.border : "transparent",
+      })}>
+      {entry.icon ? <Icon name={entry.icon} size={14} color={selected ? colors.accent : colors.foregroundMuted} /> : null}
+      <Text style={{ color: selected || hovered ? colors.foreground : colors.foregroundMuted, fontSize: 13, lineHeight: 18, fontWeight: "600" }}>{entry.label}</Text>
+      {/* Count badge: muted on both tabs; the chosen tab's number reads darker. */}
+      {entry.count !== undefined ? (
+        <View style={{ minWidth: 16, paddingHorizontal: 4, borderRadius: 4, alignItems: "center", backgroundColor: colors.surface2 }}>
+          <Text style={{ color: selected ? colors.foreground : colors.foregroundMuted, fontSize: 10, lineHeight: 14, fontWeight: "600", fontVariant: ["tabular-nums"] }}>{entry.count}</Text>
+        </View>
+      ) : null}
+    </Pressable>
+  );
+}