@stevecastaneda/paseo-progress 0.3.5 → 1.0.0

package/OVERVIEW.md

@@ -1,4 +1,4 @@
-Progress gives each worktree a live dashboard for long agent jobs. The agent records its tickets or steps with a `paseo-progress` command, along with what's stuck, questions for you and finished work. The Progress panel in Explorer shows all of it. Needs Paseo 0.9 or later, and Node.js 22.18 or later on the computer running the Paseo daemon.
+Progress gives each worktree a live dashboard for long agent jobs. The agent records its tickets or steps with a `paseo-progress` command, along with what's stuck, questions for you and finished work. The Progress panel in Explorer shows all of it. Needs Paseo 0.11 or later, and Node.js 22.18 or later on the computer running the Paseo daemon.
 
 The panel shows how much of the estimated work is done, what the agent is doing right now, and where each ticket stands. A ticket turns stuck when it's blocked or runs past its estimate without an update. Press a ticket to see its timeline, activity, questions and deliverables. Images and text files the agent records open in a preview inside Paseo. Any other file opens in an app on the computer running the Paseo daemon, and so does a previewed file when you press Open. That's true from your phone too. The app opens on that computer, not on the phone.
 

package/README.md

@@ -2,21 +2,25 @@
 
 # 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 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.
+A plugin for Paseo 0.11 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">
+<img src="images/1-panel.png" alt="The Progress panel in Explorer" width="440">
 
 The dashboard shows:
 
 - the run's title, a headline ("2 of 4 tickets done, 5 questions waiting for you, 1 stuck"), a one-line "now" ticker, and when it was last updated
 - a "possibly stale" warning after 15 minutes with no update while tickets remain, unless Paseo shows an agent in the workspace still running, 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
+- percent of estimated work done, time done of time estimated (like "1h 30m of 2h"; 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 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.
+<img src="images/2-ticket.png" alt="A ticket's story: its status, time against the estimate, the agent on it, and its timeline" width="400"> <img src="images/3-question.png" alt="A question waiting for an answer, with lettered options, the agent's recommendation and Copy buttons" width="400">
+
+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 says so, for example `3 questions`. With something stuck too, it shortens to `3Q · 1 stuck` to fit. 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.
+
+<img src="images/4-pill.png" alt="The pill above the message box, showing two questions waiting" width="600">
 
 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.
 
@@ -119,17 +123,21 @@ The progress file, `progress.jsonl`, holds one JSON event per line, each with a
 - Previews cover images up to 10 MB and the first 256 KB of a text file. Other files open in their default app.
 - Stale warnings and overdue times use the daemon host's clock.
 
-## Local development
+## Changelog
 
-```sh
-cd progress
-npm install
-npm run dev
-```
+### 1.0.0
 
-`npm run dev` type-checks and tests the plugin, then points Paseo at this folder. The tests run the agent's commands in a throwaway worktree and read back the dashboard the panel would get.
+- Version 1.0. Nothing you use changes. From now on, a new first number means an update breaks something, a new middle number means a new feature, and a new last number means a fix.
+- The pill above the message box fits again when questions are waiting and something is stuck. It reads `2Q · 1 stuck`. Before, Paseo cut it off at `2 questions · 1 st…`.
+- A time like `(11m ago)` moves to the next line whole. It no longer splits in the middle.
+- Every duration uses one style, like `2h 15m`. Before, the progress bar said `2 h 15 min` and the finished tickets said `2.3 h` for the same work. Estimates show the minutes you set, so a 90-minute ticket reads `1h 30m`, not `1.5 h`.
+- New screenshots in this README.
 
-## Changelog
+### 0.4.0
+
+- Needs Paseo 0.11 or later. The plugin now carries its own icon and screenshots, and Paseo 0.9 and 0.10 refuse to load a plugin that does. On an older Paseo, the version you already have keeps working.
+- The plugin store now takes the icon and screenshots from each release, so they match the version you install.
+- New screenshots in this README.
 
 ### 0.3.5
 

package/client/panel.tsx

@@ -8,12 +8,12 @@ import { Spinner, StalledPulse, WaitingDot } from "./spinner";
 import { IconSwap, Presence, StaggerRoot, nativeDriver } from "./motion";
 import { SectionTitle } from "./section-title";
 import { raised } from "./surfaces";
-import { When } from "./when";
+import { unbroken, When } from "./when";
 import React, { useEffect, useRef, useState } from "react";
 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";
+import { formatMinutes, formatWorkDone, minutesSince } from "../shared/format";
 import { markPanelOpened } from "../shared/rpc";
 import { useDashboard } from "./dashboard-query";
 import { STATUS_LABEL } from "./status-badge";
@@ -119,7 +119,7 @@ function StatusLine({ icon, children }: { icon: React.ReactNode; children: React
   );
 }
 
-// Re-renders on an interval so "x min ago" keeps counting between polls.
+// Re-renders on an interval so "11m ago" keeps counting between polls.
 function useNow(intervalMs: number): number {
   const [now, setNow] = useState(() => Date.now());
   useEffect(() => {
@@ -204,7 +204,7 @@ function DashboardView({ colors, dashboard, agentRunning, compact, workspaceId,
           {/* Optical: centers the 14px icon on the first 18px line. */}
           <View style={{ paddingTop: 2 }}><Icon name="TriangleAlert" size={14} color={colors.statusWarning} /></View>
           <Text style={{ flex: 1, color: colors.statusWarning, fontSize: 12, lineHeight: 18 }}>
-            Possibly stale. No update for {formatMinutes(minutesSince(dashboard.updatedAt, now))}. The work may have stopped, so working items show a warning until the next update.
+            Possibly stale. No update for {unbroken(formatMinutes(minutesSince(dashboard.updatedAt, now)))}. The work may have stopped, so working items show a warning until the next update.
           </Text>
         </View>
       ) : null}</Presence>
@@ -389,7 +389,7 @@ function StuckSection({ colors, items, now }: { colors: Colors; items: StuckItem
           <View style={{ flex: 1, minWidth: 0, gap: 2 }}>
           <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 === "overdue" ? `No update for longer than its ${unbroken(formatMinutes(item.estimateMin))} estimate. Last update ` : 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} />
@@ -448,7 +448,7 @@ function FinishedRow({ colors, tickets, shown, onPress }: { colors: Colors; tick
       {/* 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>
+        <Text style={{ minWidth: 44, flexShrink: 0, textAlign: "right", color: colors.foregroundMuted, fontSize: 12, lineHeight: 18, fontVariant: ["tabular-nums"] }}>{estimateMin ? formatMinutes(estimateMin) : ""}</Text>
       </>}
       <View style={{ paddingTop: 2 }}>
         <IconSwap swapKey={chevron} size={14}><Icon name={chevron} size={14} color={colors.foregroundMuted} /></IconSwap>
@@ -490,11 +490,11 @@ function TicketRow({ colors, ticket, live, now, onOpen, deliverables }: { colors
         ) : null}
         {ticket.note ? <Text style={{ color: colors.foregroundMuted, fontSize: 12, lineHeight: 17 }}>{ticket.note}</Text> : null}
       </View>
-      {/* Fixed slots so the Package icon and estimates line up down the list, whether or not a row has deliverables; they're listed in its dialog. The estimate slot fits "45 min" and "10.5 h"; longer ones grow rather than clip. */}
+      {/* Fixed slots so the Package icon and estimates line up down the list, whether or not a row has deliverables; they're listed in its dialog. The estimate slot fits "45m" up to "9h 45m"; longer ones grow rather than clip. */}
       <View accessibilityLabel={deliverables ? (deliverables === 1 ? "Has a deliverable" : `Has ${deliverables} deliverables`) : undefined} style={{ width: 12, height: 18, justifyContent: "center" }}>
         {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>
+      <Text style={{ minWidth: 44, flexShrink: 0, textAlign: "right", color: colors.foregroundMuted, fontSize: 12, lineHeight: 18, fontVariant: ["tabular-nums"] }}>{formatMinutes(ticket.estimateMin)}</Text>
       {narrow ? null : <View style={{ paddingTop: 2 }}><Icon name="ChevronRight" size={14} color={colors.foregroundMuted} /></View>}
     </PressableRow>
   );

package/client/pill-state.ts

@@ -17,8 +17,10 @@ export function pillFor(report: AttentionResult | undefined, where: { phone: boo
   if (!report?.configured) return null;
   const { questions, stuck } = report;
   if (questions || stuck) {
+    // Paseo cuts composer pills off at 160 px, so when something is stuck
+    // too, the questions shorten to "2Q" to leave room for "1 stuck".
     const parts = [];
-    if (questions) parts.push(`${questions} ${questions === 1 ? "question" : "questions"}`);
+    if (questions) parts.push(stuck ? `${questions}Q` : `${questions} ${questions === 1 ? "question" : "questions"}`);
     if (stuck) parts.push(`${stuck} stuck`);
     return { mode: "attention", label: parts.join(" · "), icon: stuck ? "stuck" : "questions" };
   }

package/client/when.tsx

@@ -6,13 +6,20 @@ import { useNarrow } from "./narrow";
 
 type Colors = PluginWorkspacePanelProps["theme"]["colors"];
 
-// "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.
+// A time like "2h 15m ago" inside wrapping text moves to the next line as one
+// piece instead of breaking after "2h".
+export function unbroken(text: string): string {
+  return text.replaceAll(" ", "\u00a0");
+}
+
+// "Sep 27, 8:14 PM (10h 2m ago)", inline inside other text. A narrow
+// panel shows only "10h 2m 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>;
+  const ago = unbroken(formatAgo(iso, now));
+  if (useNarrow()) return <Text>{ago}</Text>;
   return (
     <Text>
-      {formatClock(iso)} <Text style={{ color: colors.foregroundMuted, opacity: 0.7 }}>({formatAgo(iso, now)})</Text>
+      {formatClock(iso)} <Text style={{ color: colors.foregroundMuted, opacity: 0.7 }}>({ago})</Text>
     </Text>
   );
 }

package/dist/server/cli.js

@@ -20440,20 +20440,15 @@ async function saveRunCopy(root, text2) {
 var MONTHS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
 function formatMinutes(totalMin) {
   const whole = Math.max(0, Math.floor(totalMin));
-  if (whole < 1) return "<1 min";
+  if (whole < 1) return "<1m";
   const hours = Math.floor(whole / 60);
   const minutes2 = whole % 60;
-  if (!hours) return `${minutes2} min`;
-  return minutes2 ? `${hours} h ${minutes2} min` : `${hours} h`;
-}
-function formatEstimate(totalMin) {
-  if (totalMin < 60) return formatMinutes(totalMin);
-  return `${Math.round(totalMin / 6) / 10} h`;
+  if (!hours) return `${minutes2}m`;
+  return minutes2 ? `${hours}h ${minutes2}m` : `${hours}h`;
 }
 function formatWorkDone(doneMin, totalMin, tookMin) {
   if (tookMin !== void 0) return formatMinutes(tookMin);
-  if (totalMin < 60 && doneMin >= 1) return `${Math.floor(doneMin)} of ${formatMinutes(totalMin)}`;
-  return `${doneMin < 1 ? "0 min" : formatMinutes(doneMin)} of ${formatMinutes(totalMin)}`;
+  return `${doneMin < 1 ? "0m" : formatMinutes(doneMin)} of ${formatMinutes(totalMin)}`;
 }
 function formatClock(iso) {
   const date5 = new Date(iso);
@@ -20502,7 +20497,7 @@ function dashboardText(dashboard, nowMs) {
   for (const ticket of dashboard.tickets) {
     const stage = ticket.status === "working" && ticket.stage ? `, ${ticket.stage} stage` : "";
     const status = ticket.waitingFor ? `Waiting for ${ticket.waitingFor.id}` : STATUS[ticket.status];
-    lines.push(`  ${ticket.id}  ${status}${stage}  ${formatEstimate(ticket.estimateMin)}  ${ticket.title}`);
+    lines.push(`  ${ticket.id}  ${status}${stage}  ${formatMinutes(ticket.estimateMin)}  ${ticket.title}`);
     if (ticket.source) lines.push(`      Source: ${ticket.source.path ?? ticket.source.url}${ticket.source.label ? ` (${ticket.source.label})` : ""}`);
   }
   if (dashboard.questions.open.length) {
@@ -20690,7 +20685,7 @@ var commands = {
       const id = state.nextIds.ticket;
       return {
         event: { type: "ticket.add", id, title, estimateMin, status: statusOption(values.status), waitsFor, source },
-        message: `Added ${id}: ${title} (${estimateMin} min)${waitsFor ? `, waits for ${waitsFor}` : ""}${source ? `, source ${source.path ?? source.url}` : ""}`
+        message: `Added ${id}: ${title} (${formatMinutes(estimateMin)})${waitsFor ? `, waits for ${waitsFor}` : ""}${source ? `, source ${source.path ?? source.url}` : ""}`
       };
     }
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stevecastaneda/paseo-progress",
-  "version": "0.3.5",
+  "version": "1.0.0",
   "description": "A live progress dashboard per worktree for Paseo, drawn from a file agents write with the paseo-progress command.",
   "license": "MIT",
   "author": "Steve Castaneda",
@@ -32,6 +32,7 @@
     "shared/",
     "skills/",
     "images/",
+    "icon.png",
     "tsconfig.json",
     "!**/*.test.ts"
   ],
@@ -48,8 +49,8 @@
     "postpack": "rm -rf dist"
   },
   "devDependencies": {
-    "@getpaseo/client": "^0.9.2",
-    "@getpaseo/plugin": "^0.9.2",
+    "@getpaseo/client": "^0.11.2",
+    "@getpaseo/plugin": "^0.11.2",
     "@tanstack/react-query": "^5.90.11",
     "@types/node": "^20.9.0",
     "@types/react": "~19.2.0",

package/paseo-plugin.json

@@ -1,6 +1,13 @@
 {
   "id": "progress",
+  "icon": "icon.png",
+  "media": [
+    "images/1-panel.png",
+    "images/2-ticket.png",
+    "images/3-question.png",
+    "images/4-pill.png"
+  ],
   "requirements": {
-    "paseo": ">=0.9.0"
+    "paseo": ">=0.11.0"
   }
 }

package/server/cli.ts

@@ -11,6 +11,7 @@ import { findRoot, outside } from "./paths.ts";
 import { installLauncher } from "./launcher.ts";
 import { findStore, saveRunCopy } from "./store.ts";
 import { dashboardText } from "../shared/show.ts";
+import { formatMinutes } from "../shared/format.ts";
 import { imageMimeType } from "../shared/attachments.ts";
 import { homedir } from "node:os";
 
@@ -199,7 +200,7 @@ const commands: Record<string, Command> = {
       const id = state.nextIds.ticket;
       return {
         event: { type: "ticket.add", id, title, estimateMin, status: statusOption(values.status), waitsFor, source },
-        message: `Added ${id}: ${title} (${estimateMin} min)${waitsFor ? `, waits for ${waitsFor}` : ""}${source ? `, source ${source.path ?? source.url}` : ""}`,
+        message: `Added ${id}: ${title} (${formatMinutes(estimateMin)})${waitsFor ? `, waits for ${waitsFor}` : ""}${source ? `, source ${source.path ?? source.url}` : ""}`,
       };
     },
   },

package/shared/format.ts

@@ -3,30 +3,22 @@
 
 const MONTHS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
 
+// Durations in the compact style the other plugins and most dashboards use:
+// "45m", "2h", "2h 15m". Minutes are whole, so estimates read exactly as set.
 export function formatMinutes(totalMin: number): string {
   const whole = Math.max(0, Math.floor(totalMin));
-  if (whole < 1) return "<1 min";
+  if (whole < 1) return "<1m";
   const hours = Math.floor(whole / 60);
   const minutes = whole % 60;
-  if (!hours) return `${minutes} min`;
-  return minutes ? `${hours} h ${minutes} min` : `${hours} h`;
+  if (!hours) return `${minutes}m`;
+  return minutes ? `${hours}h ${minutes}m` : `${hours}h`;
 }
 
-// A ticket's estimate, the way people say one: "45 min" under an hour, then
-// hours to one decimal: "1 h", "1.5 h", "2.1 h".
-export function formatEstimate(totalMin: number): string {
-  if (totalMin < 60) return formatMinutes(totalMin);
-  return `${Math.round(totalMin / 6) / 10} h`;
-}
-
-// Estimated work done out of the total, in the units people estimate in:
-// "5 of 10 min", "1 h 30 min of 2 h". Under an hour on both sides, the unit is
-// said once.
-// Once everything is done, how long it really took instead: "1 h 20 min".
+// Estimated work done out of the total: "5m of 10m", "1h 30m of 2h".
+// Once everything is done, how long it really took instead: "1h 20m".
 export function formatWorkDone(doneMin: number, totalMin: number, tookMin?: number): string {
   if (tookMin !== undefined) return formatMinutes(tookMin);
-  if (totalMin < 60 && doneMin >= 1) return `${Math.floor(doneMin)} of ${formatMinutes(totalMin)}`;
-  return `${doneMin < 1 ? "0 min" : formatMinutes(doneMin)} of ${formatMinutes(totalMin)}`;
+  return `${doneMin < 1 ? "0m" : formatMinutes(doneMin)} of ${formatMinutes(totalMin)}`;
 }
 
 export function formatClock(iso: string): string {

package/shared/show.ts

@@ -1,6 +1,6 @@
 import type { Dashboard } from "./dashboard.ts";
 import { headlineText, shortTitle } from "./dashboard.ts";
-import { formatAgo, formatClock, formatEstimate, formatMinutes, formatWorkDone, minutesSince } from "./format.ts";
+import { formatAgo, formatClock, formatMinutes, formatWorkDone, minutesSince } from "./format.ts";
 
 const STATUS: Record<string, string> = { not_started: "Not started", working: "Working", blocked: "Blocked", done: "Done", skipped: "Skipped" };
 
@@ -38,7 +38,7 @@ export function dashboardText(dashboard: Dashboard, nowMs: number): string {
   for (const ticket of dashboard.tickets) {
     const stage = ticket.status === "working" && ticket.stage ? `, ${ticket.stage} stage` : "";
     const status = ticket.waitingFor ? `Waiting for ${ticket.waitingFor.id}` : STATUS[ticket.status];
-    lines.push(`  ${ticket.id}  ${status}${stage}  ${formatEstimate(ticket.estimateMin)}  ${ticket.title}`);
+    lines.push(`  ${ticket.id}  ${status}${stage}  ${formatMinutes(ticket.estimateMin)}  ${ticket.title}`);
     if (ticket.source) lines.push(`      Source: ${ticket.source.path ?? ticket.source.url}${ticket.source.label ? ` (${ticket.source.label})` : ""}`);
   }
   if (dashboard.questions.open.length) {