@stevecastaneda/paseo-progress 0.1.8 → 0.2.1

package/README.md

@@ -1,6 +1,6 @@
 # Progress
 
-A plugin for Paseo 0.9 and later that gives each worktree a live progress dashboard. Agents record progress with the `paseo-progress` command, which adds one line per change to `.scratch/progress.jsonl` in the worktree. The **Progress** panel draws the dashboard from that file and updates by itself.
+A plugin for Paseo 0.9 and later that gives each worktree a live progress dashboard. Agents record progress with the `paseo-progress` command, which adds one line per change to the worktree's progress file. That file lives outside the repo, so git never sees it. The **Progress** panel draws the dashboard from that file and updates by itself.
 
 <img src="images/1-panel.png" alt="The Progress panel in Explorer" width="400">
 
@@ -18,7 +18,7 @@ The panel lives in Explorer, beside the agent chat, so you can watch both. Open
 
 On phones, where Paseo has no Explorer pane, Progress opens as a tab of its own, and the pill stays above the message box while a run is open so there's always a way in. SVG files preview on desktop; on phones they open on the daemon host.
 
-The first time a run starts in a worktree whose Progress panel has never been opened, the pill shows a spinner and reads **Progress** instead; pressing it opens the panel. Once the panel has been opened there, the plugin writes an empty `.scratch/progress-panel-opened` and the nudge never comes back, even for later runs. It doesn't open the panel by itself because Paseo switches to a workspace to open its panel, which would pull you away from whatever you're looking at.
+The first time a run starts in a worktree whose Progress panel has never been opened, the pill shows a spinner and reads **Progress** instead; pressing it opens the panel. Once the panel has been opened there, the plugin writes an empty `progress-panel-opened` file next to the progress file and the nudge never comes back, even for later runs. It doesn't open the panel by itself because Paseo switches to a workspace to open its panel, which would pull you away from whatever you're looking at.
 
 ## Install
 
@@ -41,7 +41,19 @@ node "$([ -f "$dir/dist/server/cli.js" ] && echo "$dir/dist/server/cli.js" || ec
 
 If `paseo` isn't on your `PATH`, use `/Applications/Paseo.app/Contents/Resources/bin/paseo`. The command doesn't name a plugin folder: each run asks Paseo (`paseo plugin ls`) which copy of the plugin it is running and runs that copy, so it keeps working after updates and `npm run dev` switches. The npm package carries the command compiled to JavaScript in `dist/`, because Node won't run TypeScript from `node_modules`.
 
-The plugin keeps each worktree's progress in `.scratch/progress.jsonl`. The first time it creates `.scratch/`, it also writes `.scratch/.gitignore` naming only its own files, so git ignores them without any change to your repository's `.gitignore`. If `.scratch/.gitignore` already exists, the plugin leaves it alone.
+## Where progress is kept
+
+Each worktree's progress lives outside the repo, in its own folder under `~/.local/state/paseo-progress/` on the daemon host. There's nothing to set up and nothing to hide: git never sees these files, and the plugin never edits a `.gitignore` or git's exclude file. The panel's empty state shows the exact path.
+
+### Saving run history to the repo
+
+If you want to keep runs, at the bottom of the panel press **Save to repo…** and pick a folder (or name a new one). From then on, each run is saved as its own file there, like `history/20261001-064512-export-feature.jsonl`, and updated as the run goes. Commit them like any other file. One file per run means two branches never write the same file, so merges don't conflict. The lock and the panel marker never go there.
+
+The choice covers every worktree of the repo and is kept in the repo's local git config (`paseo-progress.saveRuns`), which nothing commits. **Change…** picks another folder for future runs; **Stop saving** turns it off. Files already saved are never moved or deleted.
+
+### Upgrading from 0.1.x
+
+Earlier versions kept progress in `.scratch/` in each worktree, hidden by a `.scratch/.gitignore` they wrote. The first time the command or the panel touches a worktree after the upgrade, the plugin moves its files out of `.scratch/` and removes that `.gitignore` if it's exactly the one the plugin wrote. If `.scratch/` is then empty, it goes too; anything else you keep there stays. If git tracks the old progress file (for example, an agent committed it), the plugin leaves it where it is and keeps using it, so nothing changes in that repo.
 
 ## Agent skill
 
@@ -86,13 +98,14 @@ paseo-progress finish "Snapshots ship for all four tables"
 
 ## The progress file
 
-`.scratch/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`. 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
 
 - 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 in `.scratch/progress.jsonl`. There's no view across worktrees.
+- Each worktree keeps its own dashboard. There's no view across worktrees.
+- Progress folders outside the repo stay behind when a worktree is deleted. They're small, and you can delete them from `~/.local/state/paseo-progress/`.
 - Paseo can't open a panel without switching you to its workspace. So a new run shows a "Progress" pill, and you open the panel yourself.
 - Pills check busy worktrees every 5 seconds and quiet ones every 30. In a quiet worktree, a new question can take up to half a minute to show.
 - Previews cover images up to 10 MB and the first 256 KB of a text file. Other files open in their default app.

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";
@@ -75,6 +76,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}
@@ -94,6 +97,7 @@ export function StackedDialog({ colors, root, onClose, questions, dashboard, now
           ) : null}
         </>
       )}
+      </NarrowProvider>
       </Modal.Content>
     </Modal>
   );

package/client/history.tsx

@@ -0,0 +1,157 @@
+import { type PluginWorkspacePanelProps, useRpc } from "@getpaseo/plugin/client";
+import { Icon, Modal, useToast } from "@getpaseo/plugin/client/react-native";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import React, { useState } from "react";
+import { ActivityIndicator, ScrollView, Text, TextInput, View } from "react-native";
+import { PressScale } from "./motion";
+import { PressableRow } from "./row";
+import { listFolders, setHistoryFolder } from "../shared/rpc";
+
+type Colors = PluginWorkspacePanelProps["theme"]["colors"];
+
+// Run history stays on this computer unless the repo opts in. This quiet row
+// is the only place that changes it; nothing in the repo changes until then.
+export function HistoryRow({ colors, workspaceId, directory, savedTo }: {
+  colors: Colors;
+  workspaceId: string;
+  directory: string;
+  savedTo: string | null;
+}) {
+  const [picking, setPicking] = useState(false);
+  const set = useRpc(setHistoryFolder);
+  const queryClient = useQueryClient();
+  const toast = useToast();
+  const mutation = useMutation({
+    mutationFn: (folder: string | null) => set({ workspaceId, workspaceDirectory: directory, folder }),
+    onSuccess: ({ savedTo: next }) => {
+      queryClient.invalidateQueries({ queryKey: ["progress", "dashboard"] });
+      toast.show(next ? `Each run will be saved to ${next}.` : "Runs will stay on this computer. Files already saved stay in the repo.", { variant: "success" });
+    },
+    onError: (error) => toast.error(error instanceof Error ? error.message : "Could not change where runs are saved."),
+  });
+  // While saving, the button that started it says so.
+  const busy = mutation.isPending ? (mutation.variables === null ? "stop" : "pick") : null;
+  const actions: { label: string; busyLabel: string; kind: "pick" | "stop"; onPress(): void }[] = savedTo
+    ? [{ label: "Change…", busyLabel: "Saving…", kind: "pick", onPress: () => setPicking(true) }, { label: "Stop saving", busyLabel: "Stopping…", kind: "stop", onPress: () => mutation.mutate(null) }]
+    : [{ label: "Save to repo…", busyLabel: "Saving…", kind: "pick", onPress: () => setPicking(true) }];
+
+  return (
+    <View style={{ flexDirection: "row", flexWrap: "wrap", alignItems: "center", columnGap: 8, rowGap: 4, marginHorizontal: 12, marginTop: 16 }}>
+      <View style={{ flexDirection: "row", alignItems: "flex-start", gap: 6, flex: 1, minWidth: 180 }}>
+        <View style={{ paddingTop: 2 }}><Icon name="History" size={13} color={colors.foregroundMuted} /></View>
+        <Text style={{ flex: 1, color: colors.foregroundMuted, fontSize: 12, lineHeight: 17 }}>
+          {savedTo ? <>Each run is saved to <Text style={{ color: colors.foreground }}>{savedTo}</Text> in this repo.</> : "Run history stays on this computer."}
+        </Text>
+      </View>
+      <View style={{ flexDirection: "row", gap: 4 }}>
+        {actions.map((action) => (
+          <PressScale key={action.label} accessibilityRole="button" disabled={mutation.isPending} onPress={action.onPress}
+            style={({ pressed, hovered }) => ({ paddingHorizontal: 8, paddingVertical: 4, borderRadius: 4, opacity: mutation.isPending ? 0.7 : 1,
+              backgroundColor: pressed ? colors.border : hovered ? colors.surface2 : "transparent" })}>
+            <Text style={{ color: colors.foreground, fontSize: 12, lineHeight: 16, fontWeight: "600" }}>{busy === action.kind ? action.busyLabel : action.label}</Text>
+          </PressScale>
+        ))}
+      </View>
+      <FolderPicker key={picking ? "open" : "closed"} colors={colors} workspaceId={workspaceId} directory={directory} open={picking} start={savedTo ?? ""}
+        onClose={() => setPicking(false)} onPick={(folder) => { setPicking(false); mutation.mutate(folder); }} />
+    </View>
+  );
+}
+
+// Browses the repo's folders on the daemon host. A new folder only needs a
+// name: it's made the first time a run is saved there.
+function FolderPicker({ colors, workspaceId, directory, open, start, onClose, onPick }: {
+  colors: Colors;
+  workspaceId: string;
+  directory: string;
+  open: boolean;
+  // The folder chosen so far; browsing starts in the folder that holds it.
+  start: string;
+  onClose(): void;
+  onPick(folder: string): void;
+}) {
+  const parentOf = (path: string) => path.split("/").slice(0, -1).join("/");
+  const [at, setAt] = useState(() => parentOf(start));
+  const [naming, setNaming] = useState<string | null>(null);
+  const list = useRpc(listFolders);
+  const listed = useQuery({
+    queryKey: ["progress", "folders", workspaceId, directory, at],
+    queryFn: () => list({ workspaceId, workspaceDirectory: directory, folder: at }),
+    enabled: open,
+  });
+  const join = (name: string) => (at ? `${at}/${name}` : name);
+  const crumbs = at ? at.split("/") : [];
+  const close = () => { setNaming(null); setAt(parentOf(start)); onClose(); };
+  const newName = naming?.trim().replace(/\/+$/, "") ?? "";
+
+  return (
+    <Modal title="Save run history to a folder" icon={<Icon name="FolderOpen" size={16} color={colors.foregroundMuted} />} open={open} onOpenChange={(next) => { if (!next) close(); }}>
+      {/* Paseo sizes a non-scrolling dialog to 85% of the window, so let it size to
+          its content; the list's own height cap keeps the buttons in view. */}
+      <Modal.Content>
+        <Text style={{ color: colors.foregroundMuted, fontSize: 12, lineHeight: 17 }}>
+          Each run becomes its own file in this folder, in every worktree of this repo. Commit them like any other file.
+        </Text>
+        <View style={{ flexDirection: "row", flexWrap: "wrap", alignItems: "center", gap: 2, paddingHorizontal: 4 }}>
+          {["Top of the repo", ...crumbs].map((crumb, index) => (
+            <React.Fragment key={index}>
+              {index ? <Icon name="ChevronRight" size={12} color={colors.foregroundMuted} /> : null}
+              <PressScale accessibilityRole="button" disabled={index === crumbs.length} onPress={() => { setNaming(null); setAt(crumbs.slice(0, index).join("/")); }}
+                style={({ pressed, hovered }) => ({ paddingHorizontal: 4, paddingVertical: 2, borderRadius: 4,
+                  backgroundColor: index === crumbs.length ? "transparent" : pressed ? colors.border : hovered ? colors.surface2 : "transparent" })}>
+                <Text style={{ color: index === crumbs.length ? colors.foreground : colors.foregroundMuted, fontSize: 12, lineHeight: 16, fontWeight: index === crumbs.length ? "600" : "400" }}>{crumb}</Text>
+              </PressScale>
+            </React.Fragment>
+          ))}
+        </View>
+
+        {/* Only the list scrolls, so Use and Cancel stay in view in a big repo. */}
+        <ScrollView style={{ maxHeight: 320, flexGrow: 0 }} contentContainerStyle={{ gap: 2 }}>
+          {listed.isPending ? <ActivityIndicator color={colors.foregroundMuted} accessibilityLabel="Loading folders" style={{ alignSelf: "flex-start", padding: 8 }} /> : null}
+          {listed.data?.folders.map((name) => (
+            <PressableRow key={name} colors={colors} accessibilityRole="button" accessibilityLabel={`Open ${name}`} onPress={() => { setNaming(null); setAt(join(name)); }}
+              style={{ flexDirection: "row", alignItems: "center", gap: 8, paddingHorizontal: 8, paddingVertical: 6, borderRadius: 6 }}>
+              <Icon name="Folder" size={14} color={colors.foregroundMuted} />
+              <Text numberOfLines={1} ellipsizeMode="middle" style={{ flex: 1, color: colors.foreground, fontSize: 12, lineHeight: 16 }}>{name}</Text>
+              <Icon name="ChevronRight" size={14} color={colors.foregroundMuted} />
+            </PressableRow>
+          ))}
+          {listed.data && !listed.data.folders.length ? (
+            <Text style={{ color: colors.foregroundMuted, fontSize: 12, lineHeight: 16, paddingHorizontal: 8, paddingVertical: 6 }}>No folders in here.</Text>
+          ) : null}
+          {listed.error ? <Text accessibilityRole="alert" style={{ color: colors.statusDanger, fontSize: 12, lineHeight: 17, paddingHorizontal: 8 }}>{listed.error.message}</Text> : null}
+        </ScrollView>
+
+        {naming === null ? (
+          <PressScale accessibilityRole="button" onPress={() => setNaming("")}
+            style={({ pressed, hovered }) => ({ alignSelf: "flex-start", flexDirection: "row", alignItems: "center", gap: 6, paddingHorizontal: 8, paddingVertical: 5, borderRadius: 6, backgroundColor: pressed ? colors.border : hovered ? colors.surface2 : "transparent" })}>
+            <Icon name="FolderPlus" size={14} color={colors.foreground} />
+            <Text style={{ color: colors.foreground, fontSize: 12, lineHeight: 16, fontWeight: "600" }}>New folder</Text>
+          </PressScale>
+        ) : (
+          <View style={{ flexDirection: "row", alignItems: "center", gap: 6 }}>
+            <TextInput autoFocus value={naming} onChangeText={setNaming} onSubmitEditing={() => { if (newName) onPick(join(newName)); }}
+              autoCapitalize="none" autoCorrect={false} spellCheck={false} accessibilityLabel="New folder name" placeholder="progress-history" placeholderTextColor={colors.foregroundMuted}
+              style={{ flex: 1, color: colors.foreground, fontSize: 12, lineHeight: 16, paddingHorizontal: 8, paddingVertical: 6, borderRadius: 6, borderWidth: 1, borderColor: colors.border, backgroundColor: colors.surface1 }} />
+            <PressScale accessibilityRole="button" disabled={!newName} onPress={() => onPick(join(newName))}
+              style={({ pressed, hovered }) => ({ paddingHorizontal: 10, paddingVertical: 6, borderRadius: 6, backgroundColor: colors.accent, opacity: !newName ? 0.5 : pressed ? 0.7 : hovered ? 0.85 : 1 })}>
+              <Text style={{ color: colors.accentForeground, fontSize: 12, lineHeight: 16, fontWeight: "600" }}>Use new folder</Text>
+            </PressScale>
+          </View>
+        )}
+
+        <View style={{ flexDirection: "row", flexWrap: "wrap", alignItems: "center", justifyContent: "flex-end", gap: 8 }}>
+          {at ? null : <Text style={{ flex: 1, minWidth: 140, color: colors.foregroundMuted, fontSize: 12, lineHeight: 17 }}>Open a folder to use it, or make a new one.</Text>}
+          <PressScale accessibilityRole="button" onPress={close}
+            style={({ pressed, hovered }) => ({ paddingHorizontal: 12, paddingVertical: 6, borderRadius: 6, backgroundColor: pressed ? colors.border : hovered ? colors.surface2 : "transparent" })}>
+            <Text style={{ color: colors.foreground, fontSize: 12, lineHeight: 16, fontWeight: "600" }}>Cancel</Text>
+          </PressScale>
+          <PressScale accessibilityRole="button" disabled={!at} onPress={() => onPick(at)} outerStyle={{ flexShrink: 1 }}
+            style={({ pressed, hovered }) => ({ paddingHorizontal: 12, paddingVertical: 6, borderRadius: 6, backgroundColor: colors.accent, opacity: !at ? 0.5 : pressed ? 0.7 : hovered ? 0.85 : 1 })}>
+            <Text numberOfLines={1} ellipsizeMode="middle" style={{ color: colors.accentForeground, fontSize: 12, lineHeight: 16, fontWeight: "600" }}>{at ? `Use ${crumbs[crumbs.length - 1]}` : "Use folder"}</Text>
+          </PressScale>
+        </View>
+      </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

@@ -2,6 +2,7 @@ import { type PluginWorkspacePanelProps, useRpc, useWorkspace } from "@getpaseo/
 import { Icon } from "@getpaseo/plugin/client/react-native";
 import { DeliverablesList } from "./deliverables";
 import { LauncherBanner, SkillBanner } from "./launcher";
+import { HistoryRow } from "./history";
 import { AnsweredQuestionsList, QuestionsSection } from "./questions";
 import { Spinner, StalledPulse, WaitingDot } from "./spinner";
 import { IconSwap, Presence, StaggerRoot, nativeDriver } from "./motion";
@@ -11,7 +12,7 @@ import { When } from "./when";
 import React, { useEffect, useRef, useState } from "react";
 import { ActivityIndicator, Animated, Platform, Pressable, 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 { PROGRESS_FILE, type TicketStatus } from "../shared/events";
+import type { TicketStatus } from "../shared/events";
 import { formatEstimate, formatMinutes, formatWorkDone, minutesSince } from "../shared/format";
 import { markPanelOpened } from "../shared/rpc";
 import { useDashboard } from "./dashboard-query";
@@ -20,6 +21,7 @@ import { TicketDialogs } from "./ticket-dialog";
 import { PressableRow } from "./row";
 import { ShowMoreRow, usePaged } from "./show-more";
 import { notePanelOpened } from "./panel-opened";
+import { NARROW_MAX, NarrowProvider, useNarrow } from "./narrow";
 
 type Colors = PluginWorkspacePanelProps["theme"]["colors"];
 
@@ -39,9 +41,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 }}>
@@ -51,11 +56,13 @@ function WorkspaceProgress({ theme, workspaceId, host, layout, navigation }: Plu
       <LauncherBanner colors={colors} host={host} />
       <SkillBanner colors={colors} host={host} />
       {/* Fades in like the dashboard's sections instead of popping in after the spinner. */}
-      <Presence show={Boolean(result && !result.configured)}>{result && !result.configured ? <EmptyState colors={colors} /> : null}</Presence>
+      <Presence show={Boolean(result && !result.configured)}>{result && !result.configured ? <EmptyState colors={colors} file={result.file} /> : null}</Presence>
       {/* Keyed by run: a new run starts with fresh tabs, pages and dialogs. */}
       {result?.configured ? <DashboardView key={result.dashboard.run?.startedAt ?? "none"} colors={colors} dashboard={result.dashboard} agentRunning={agentRunning} compact={layout.compact}
-        workspaceId={workspaceId} workspaceDirectory={result.root} navigation={navigation} /> : null}
+        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>
   );
 }
 
@@ -74,7 +81,7 @@ function useMarkPanelOpened(workspaceId: string, directory: string | null, neede
   }, [needed, directory, workspaceId, mark]);
 }
 
-function EmptyState({ colors }: { colors: Colors }) {
+function EmptyState({ colors, file }: { colors: Colors; file: string }) {
   return (
     <View style={{ padding: 12, paddingTop: 20, gap: 10 }}>
       <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
@@ -91,9 +98,9 @@ function EmptyState({ colors }: { colors: Colors }) {
           {`paseo-progress start "Build the export feature"\npaseo-progress ticket add "Ticket 01: Export button" --estimate 60`}
         </Text>
       </View>
-      {/* So a new .scratch folder in the repo isn't a surprise. */}
+      {/* So people know nothing lands in the repo. */}
       <Text style={{ color: colors.foregroundMuted, fontSize: 12, lineHeight: 18 }}>
-        Progress is saved in <Text style={{ color: colors.foreground }}>.scratch/progress.jsonl</Text> in this worktree. The plugin adds a <Text style={{ color: colors.foreground }}>.gitignore</Text> there, so git leaves its files alone.
+        Progress is saved outside the repo, in <Text selectable style={{ color: colors.foreground }}>{file}</Text>, so git never sees it.
       </Text>
     </View>
   );
@@ -122,13 +129,14 @@ function useNow(intervalMs: number): number {
 
 const WIDE_MIN = 760;
 
-function DashboardView({ colors, dashboard, agentRunning, compact, workspaceId, workspaceDirectory, navigation }: {
+function DashboardView({ colors, dashboard, agentRunning, compact, workspaceId, workspaceDirectory, file, navigation }: {
   colors: Colors;
   dashboard: Dashboard;
   agentRunning: boolean;
   compact: boolean;
   workspaceId: string;
   workspaceDirectory: string;
+  file: string;
   navigation: PluginWorkspacePanelProps["navigation"];
 }) {
   const now = useNow(15_000);
@@ -198,7 +206,7 @@ function DashboardView({ colors, dashboard, agentRunning, compact, workspaceId,
           </Text>
         </View>
       ) : null}</Presence>
-      <Presence show={Boolean(dashboard.issues.length)} order={1}>{dashboard.issues.length ? <IssuesNotice colors={colors} issues={dashboard.issues} /> : null}</Presence>
+      <Presence show={Boolean(dashboard.issues.length)} order={1}>{dashboard.issues.length ? <IssuesNotice colors={colors} issues={dashboard.issues} file={file} /> : null}</Presence>
       <Presence show={Boolean(dashboard.progress.totalMin > 0)} order={2}>{dashboard.progress.totalMin > 0 ? <ProgressBar colors={colors} progress={dashboard.progress} live={live} /> : null}</Presence>
       <View onLayout={(event) => setWide(event.nativeEvent.layout.width >= WIDE_MIN)}
         style={{ flexDirection: wide ? "row" : "column", alignItems: "flex-start" }}>
@@ -253,6 +261,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);
@@ -261,9 +270,9 @@ 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 }}>
+      <View accessibilityRole="tablist" style={{ flexDirection: "row", flexWrap: "wrap", columnGap: narrow ? 10 : 16, paddingHorizontal: narrow ? 8 : 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)} />;
+          return <Tab key={entry.id} colors={colors} narrow={narrow} label={entry.label} icon={showIcons ? entry.icon : null} count={entry.count} selected={entry.id === current.id} onPress={() => choose(entry.id)} />;
         })}
       </View>
       {current.count === 0 ? (
@@ -274,13 +283,14 @@ 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 }) {
+// Narrow tightens the spacing so all three tabs stay on one line at the sidebar's 320px.
+function Tab({ colors, narrow, label, icon, count, selected, onPress }: { colors: Colors; narrow: boolean; 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,
+        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",
       })}>
@@ -314,13 +324,13 @@ function ActivityList({ colors, activity, now }: { colors: Colors; activity: Act
 }
 
 // Small and non-blocking: the rest of the dashboard still renders.
-function IssuesNotice({ colors, issues }: { colors: Colors; issues: FileIssue[] }) {
+function IssuesNotice({ colors, issues, file }: { colors: Colors; issues: FileIssue[]; file: string }) {
   const shown = issues.slice(0, 5);
   return (
     <View style={{ flexDirection: "row", gap: 8, margin: 12, marginBottom: 0, padding: 8, borderRadius: 6, backgroundColor: colors.surface1 }}>
       <View style={{ paddingTop: 1.5 }}><Icon name="FileWarning" size={14} color={colors.statusWarning} /></View>
       <Text selectable style={{ flex: 1, color: colors.foregroundMuted, fontSize: 12, lineHeight: 17 }}>
-        Skipped {issues.length === 1 ? "1 line" : `${issues.length} lines`} in {PROGRESS_FILE}:{" "}
+        Skipped {issues.length === 1 ? "1 line" : `${issues.length} lines`} in {file}:{" "}
         {shown.map((issue) => `line ${issue.line} (${issue.reason})`).join(", ")}
         {issues.length > shown.length ? `, and ${issues.length - shown.length} more` : ""}.
       </Text>
@@ -338,11 +348,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)}
@@ -390,6 +401,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 }} />
@@ -401,7 +413,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>
@@ -447,6 +459,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}
@@ -455,8 +468,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>
@@ -468,12 +484,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 }}>
@@ -487,7 +505,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 ? (
@@ -500,7 +518,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/questions.tsx

@@ -8,6 +8,7 @@ import { PressableRow } from "./row";
 import { ShowMoreRow, usePaged } from "./show-more";
 import { PressScale } from "./motion";
 import { StackedDialog } from "./dialog-stack";
+import { useNarrow } from "./narrow";
 import { raised } from "./surfaces";
 import { When } from "./when";
 
@@ -140,6 +141,9 @@ function QuestionRow({ colors, question, first, onOpen, onCopy }: {
   onOpen(): void;
   onCopy(): void;
 }) {
+  // Narrow: the badge goes under the question, so the question keeps the row's width.
+  const narrow = useNarrow();
+  const badge = <DefaultBadge colors={colors} value={question.default} waits={question.waits} />;
   return (
     <View style={{ flexDirection: "row", gap: 8, paddingHorizontal: 10, paddingVertical: 10, borderTopWidth: first ? 0 : 1, borderTopColor: colors.border }}>
       <PressScale accessibilityRole="button" accessibilityLabel={`Copy ${question.id} for your reply`} onPress={onCopy} hitSlop={6}
@@ -154,8 +158,11 @@ 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} />
+        <View style={{ flex: 1, minWidth: 0, gap: 6, alignItems: "flex-start" }}>
+          <Text style={{ alignSelf: "stretch", color: colors.foreground, fontSize: 13, lineHeight: 19 }}>{question.question}</Text>
+          {narrow ? badge : null}
+        </View>
+        {narrow ? null : badge}
         {/* 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>

package/client/when.tsx

@@ -2,11 +2,14 @@ import type { PluginWorkspacePanelProps } from "@getpaseo/plugin/client";
 import React from "react";
 import { Text } from "react-native";
 import { formatAgo, formatClock } from "../shared/format";
+import { useNarrow } from "./narrow";
 
 type Colors = PluginWorkspacePanelProps["theme"]["colors"];
 
-// "Sep 27, 8:14 PM (10 h 2 min ago)", inline inside other text.
+// "Sep 27, 8:14 PM (10 h 2 min ago)", inline inside other text. A narrow
+// panel shows only "10 h 2 min ago"; the ticket dialog keeps the clock time.
 export function When({ colors, iso, now }: { colors: Colors; iso: string; now: number }) {
+  if (useNarrow()) return <Text>{formatAgo(iso, now)}</Text>;
   return (
     <Text>
       {formatClock(iso)} <Text style={{ color: colors.foregroundMuted, opacity: 0.7 }}>({formatAgo(iso, now)})</Text>

package/dist/server/cli.js

@@ -5,10 +5,11 @@ import { relative, resolve } from "node:path";
 import { fileURLToPath } from "node:url";
 import { parseArgs } from "node:util";
 import { isSettled } from "../shared/dashboard.js";
-import { DELIVERABLE_KINDS, PROGRESS_FILE, TICKET_STATUSES } from "../shared/events.js";
+import { DELIVERABLE_KINDS, TICKET_STATUSES } from "../shared/events.js";
 import { appendProgress, InvalidEvent, readProgress } from "./progress-file.js";
 import { findRoot, outside } from "./paths.js";
 import { installLauncher } from "./launcher.js";
+import { findStore, saveRunCopy } from "./store.js";
 import { dashboardText } from "../shared/show.js";
 import { imageMimeType } from "../shared/attachments.js";
 import { homedir } from "node:os";
@@ -426,7 +427,7 @@ function help() {
     return [
         `Usage: ${USAGE_NAME} <command>`,
         "",
-        `Records progress in ${PROGRESS_FILE} at the worktree root, shown by the Progress panel in Paseo.`,
+        `Records progress for this worktree, shown by the Progress panel in Paseo. The file lives outside the repo, so git never sees it.`,
         `Add --help after any command for its options.`,
         "",
         ...Object.values(commands).flatMap((command) => [`  ${command.usage}`, `      ${command.summary}`]),
@@ -451,7 +452,8 @@ export async function runCli(argv, options) {
         }
         if (first === "show") {
             const root = findRoot(options.cwd);
-            out(`Worktree: ${root}\n\n${dashboardText((await readProgress(root, now())).dashboard, now().getTime())}`);
+            const store = await findStore(root);
+            out(`Worktree: ${root}\n\n${dashboardText((await readProgress(store.directory, now())).dashboard, now().getTime())}`);
             return 0;
         }
         const target = resolve(options.cwd, (argv[1] ?? DEFAULT_LAUNCHER).replace(/^~(?=$|\/)/, homedir()));
@@ -478,14 +480,15 @@ export async function runCli(argv, options) {
             throw new UsageError(error.message);
         }
         const root = findRoot(options.cwd);
-        const message = await appendProgress(root, now, (state) => {
+        const store = await findStore(root);
+        const message = await appendProgress(store.directory, now, (state) => {
             const finished = state.dashboard.run?.finished;
             if (finished && command !== commands.start) {
                 throw new UsageError(`The run "${state.dashboard.run.title}" is finished. Start new work with: ${USAGE_NAME} start "<title>"`);
             }
             const { event, message } = command.run({ positionals: parsed.positionals, values: parsed.values, state, cwd: options.cwd, root });
             return { event, result: message };
-        });
+        }, (text) => saveRunCopy(root, text));
         out(message);
         return 0;
     }