@stevecastaneda/paseo-progress 1.8.0 → 1.10.0

package/README.md

@@ -20,11 +20,11 @@ The dashboard shows:
 
 <img src="images/5-settings.png" alt="Progress settings in Paseo: Questions set to Work around, Language set to System, and the Agent Skills section with View skill" width="600">
 
-The panel lives in Explorer, beside the agent chat, so you can watch both. Open it from Command Center with **Open Progress**. The cog at the top right of the panel opens the plugin's Settings. After an update, the panel shows what's new once, including any versions you skipped. 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.
+The panel lives in Explorer, beside the agent chat, so you can watch both. Open it from Command Center with **Open Progress**. The cog at the top right of the panel opens the plugin's Settings. After an update, the panel shows what's new once, including any versions you skipped. 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 an open question, its choices and their Copy buttons, and what is stuck, so you can answer without leaving the chat. With more than one question, the arrows beside **Question 1 of 3** step through them. After you copy an answer, the popover opens on the next question. **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 and videos preview on desktop; on phones they open on the daemon host.
+On phones with Paseo 0.13 or later, Progress opens in Explorer too. Older phone apps have no Explorer, so there it opens as a tab of its own. On any phone, the pill stays above the message box while a run is open, so there's always a way in. SVG files and videos 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 `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.
 
@@ -145,6 +145,15 @@ The progress file, `progress.jsonl`, holds one JSON event per line, each with a
 
 ## Changelog
 
+### 1.10.0
+
+- [Improved] **Progress opens in Explorer on phones.** On Paseo 0.13 or later, the phone app opens Progress in Explorer, as the desktop app does, and lists it in Explorer's New tab menu. If a Progress tab from an earlier version is still open on your phone, you can close it.
+
+### 1.9.0
+
+- [Improved] **The pill's popover shows one question at a time.** You used to scroll past every open question to reach the one you wanted. Now **Question 2 of 3** sits at the top with back and next arrows. Copy an answer and the popover opens on the next question the next time you press the pill.
+- [Improved] **A long question shows there's more below.** When a question runs past the bottom of the popover, its last lines fade out until you scroll to the end. Before, it stopped at the edge and looked finished.
+
 ### 1.8.0
 
 - [New] **HTML reports open on a server with no screen.** An HTML report on a computer that can't open it, like a Linux server, used to fail and copy the file's path. In the desktop app it now opens across Paseo's main area, with its pictures, styles and scripts. Esc or Close takes you back. Where the computer can open it, it still opens in your browser.

package/client/locales/en.ts

@@ -67,6 +67,9 @@ export const messages: ProgressMessages = {
   openProgress: "Open Progress",
   needsYou: "Progress needs you",
   nothingNeedsYou: "Nothing needs you right now.",
+  questionPosition: (total: number) => ["Question ", ` of ${total}`],
+  previousQuestion: "Previous question",
+  nextQuestion: "Next question",
   overdueAside: " (no update past its estimate)",
   writeUp: "Write-up",
   timeline: "Timeline",

package/client/locales/zh-CN.ts

@@ -67,6 +67,9 @@ export const messages: ProgressMessages = {
   openProgress: "打开 Progress",
   needsYou: "Progress 需要你处理",
   nothingNeedsYou: "目前没有需要你处理的事项。",
+  questionPosition: (total: number) => ["第 ", ` 个问题，共 ${total} 个`],
+  previousQuestion: "上一个问题",
+  nextQuestion: "下一个问题",
   overdueAside: "（超过预计时长未更新）",
   writeUp: "总结",
   timeline: "时间线",

package/client/messages.ts

@@ -49,6 +49,9 @@ export interface ProgressMessages {
   openProgress: string;
   needsYou: string;
   nothingNeedsYou: string;
+  questionPosition: (total: number) => Around;
+  previousQuestion: string;
+  nextQuestion: string;
   overdueAside: string;
   writeUp: string;
   timeline: string;

package/client/pill-popover.tsx

@@ -4,21 +4,26 @@ import React, { useRef, useState } from "react";
 import { Text, View } from "react-native";
 import type { Dashboard } from "../shared/dashboard";
 import { useDashboard } from "./dashboard-query";
-import { progressPanel } from "./pills";
 import { PressScale } from "./motion";
 import { type Attachment, isPreviewable, useAttachmentOpener } from "./attachments";
 import { StackedDialog } from "./dialog-stack";
 import { galleryFiles } from "./preview";
 import { QuestionDetail, QuestionState, useCopy } from "./questions";
 import { errorText } from "./errors";
-import { raised } from "./surfaces";
+import { raised, withAlpha } from "./surfaces";
 import { useProgressLanguage } from "./language";
 
 type Colors = PluginButtonContentProps["theme"]["colors"];
+type Question = Dashboard["questions"]["open"][number];
 
 // On desktop, Paseo caps the popover at 440px and scrolls all of it, padding included. The
 // list scrolls on its own below that cap so Open Progress stays in view.
 const LIST_MAX_HEIGHT = 340;
+const HEADER_GAP = 12;
+const TOUCH_TARGET = 44;
+
+// Paseo unmounts the popover when it closes, so reopening comes back to where the user was.
+const shownQuestions = new Map<string, string>();
 
 // What the pill opens: the open questions with their Copy buttons, and anything
 // stuck, so the user can answer without leaving the chat.
@@ -27,8 +32,8 @@ export function AttentionPopover({ theme, host, layout, workspaceId, close, open
   const colors = theme.colors;
   // Paseo draws the desktop popover on surface1 and the phone sheet on surface0.
   const onSurface1 = !layout.compact;
-  // Phones open the panel as its own tab, and are pressed with a finger.
-  const touch = progressPanel().location === "workspace";
+  // The phone apps are pressed with a finger.
+  const touch = layout.platform !== "web";
   const directory = useWorkspace(workspaceId, (workspace) => workspace.directory);
   const query = useDashboard(host.id, workspaceId, directory);
   const dashboard = query.data?.configured ? query.data.dashboard : null;
@@ -43,8 +48,8 @@ export function AttentionPopover({ theme, host, layout, workspaceId, close, open
   return (
     <View style={{ width: 360, maxWidth: "100%", gap: 8 }}>
       {dashboard ? (
-        <List compact={layout.compact}>
-          <AttentionList colors={colors} dashboard={dashboard} onSurface1={onSurface1} onCopy={async (question, letter) => {
+        <AttentionList colors={colors} dashboard={dashboard} workspaceId={workspaceId} compact={layout.compact} touch={touch} onSurface1={onSurface1}
+          onCopy={async (question, letter) => {
             await copy(question, letter);
             close();
           }} onOpenAttachment={(attachment, from) => {
@@ -52,7 +57,6 @@ export function AttentionPopover({ theme, host, layout, workspaceId, close, open
             if (!isPreviewable(attachment)) close();
             void opener.open(attachment);
           }} />
-        </List>
       ) : (
         <Text style={{ color: colors.foregroundMuted, fontSize: 12, lineHeight: 18 }}>
           {query.error ? m.readProgressError(errorText(query.error, m.unknownError)) : m.loading}
@@ -63,7 +67,7 @@ export function AttentionPopover({ theme, host, layout, workspaceId, close, open
       <View style={{ paddingTop: touch ? 12 : 8, borderTopWidth: 1, borderTopColor: colors.border }}>
         {/* A full 44pt touch target on phones; desktop keeps the compact button. */}
         <PressScale accessibilityRole="button" onPress={() => { close(); openPanel(); }}
-          style={({ pressed }) => ({ flexDirection: "row", justifyContent: "center", alignItems: "center", gap: touch ? 8 : 6, paddingVertical: 6, minHeight: touch ? 44 : undefined, borderRadius: touch ? 8 : 4, ...raised(colors),
+          style={({ pressed }) => ({ flexDirection: "row", justifyContent: "center", alignItems: "center", gap: touch ? 8 : 6, paddingVertical: 6, minHeight: touch ? TOUCH_TARGET : undefined, borderRadius: touch ? 8 : 4, ...raised(colors),
             backgroundColor: onSurface1 ? (pressed ? colors.surface1 : colors.surface2) : pressed ? colors.surface2 : colors.surface1 })}>
           {/* Beside the chat on desktop; on a phone it opens as its own tab, shown with the tab's icon. */}
           <Icon name={touch ? "ListChecks" : "PanelRight"} size={touch ? 16 : 12} color={colors.foreground} />
@@ -77,54 +81,140 @@ export function AttentionPopover({ theme, host, layout, workspaceId, close, open
 // On a phone the popover is a sheet that already scrolls, and sizes itself to
 // whichever scroll view reports last. Paseo 0.10.1 turns a ScrollView inside it
 // into one of those, so a short list would shrink the sheet to its title.
-function List({ compact, children }: { compact: boolean; children: React.ReactNode }) {
+function List({ compact, maxHeight, surface, children }: { compact: boolean; maxHeight: number; surface: string; children: React.ReactNode }) {
+  const [moreBelow, setMoreBelow] = useState(false);
+  const size = useRef({ viewport: 0, content: 0, offset: 0 });
   if (compact) return <View style={{ gap: 12 }}>{children}</View>;
-  return <ScrollView style={{ maxHeight: LIST_MAX_HEIGHT }} contentContainerStyle={{ gap: 12 }}>{children}</ScrollView>;
+  const measure = (next: Partial<typeof size.current>) => {
+    const s = Object.assign(size.current, next);
+    const below = s.offset + s.viewport < s.content - 1;
+    if (below !== moreBelow) setMoreBelow(below);
+  };
+  return (
+    <View style={{ position: "relative" }}>
+      <ScrollView style={{ maxHeight }} contentContainerStyle={{ gap: 12 }} scrollEventThrottle={16}
+        onLayout={(event) => measure({ viewport: event.nativeEvent.layout.height })}
+        onContentSizeChange={(_, height) => measure({ content: height })}
+        onScroll={(event) => measure({ offset: event.nativeEvent.contentOffset.y })}>
+        {children}
+      </ScrollView>
+      {moreBelow ? <BottomFade color={surface} /> : null}
+    </View>
+  );
+}
+
+const FADE_SLICES = 8;
+
+// React Native Web 0.21 has no experimental_backgroundImage, so no single gradient style draws on both desktop and iPad.
+function BottomFade({ color }: { color: string }) {
+  return (
+    <View pointerEvents="none" style={{ position: "absolute", left: 0, right: 0, bottom: 0 }}>
+      {Array.from({ length: FADE_SLICES }, (_, i) => (
+        <View key={i} style={{ height: 3, backgroundColor: withAlpha(color, (0.9 * i) / (FADE_SLICES - 1)) ?? undefined }} />
+      ))}
+    </View>
+  );
 }
 
-export function AttentionList({ colors, dashboard, onSurface1, onCopy, onOpenAttachment }: {
+export function AttentionList({ colors, dashboard, workspaceId, compact, touch, onSurface1, onCopy, onOpenAttachment }: {
   colors: Colors;
   dashboard: Dashboard;
+  workspaceId: string;
+  compact: boolean;
+  touch: boolean;
   onSurface1: boolean;
-  onCopy(question: Dashboard["questions"]["open"][number], letter: string): void;
+  onCopy(question: Question, letter: string): void;
   onOpenAttachment(attachment: Attachment, group: Attachment[]): void;
 }) {
   const { messages: m } = useProgressLanguage();
+  const [shownId, setShownId] = useState(() => shownQuestions.get(workspaceId));
   const now = Date.now();
+  const open = dashboard.questions.open;
+  const found = open.findIndex((question) => question.id === shownId);
+  const index = found === -1 ? 0 : found;
+  const question: Question | undefined = open[index];
   // The last question can be answered while the popover is open.
-  if (!dashboard.questions.open.length && !dashboard.stuck.length) {
+  if (!question && !dashboard.stuck.length) {
     return <Text style={{ color: colors.foregroundMuted, fontSize: 12, lineHeight: 18 }}>{m.nothingNeedsYou}</Text>;
   }
+  const show = (target: Question) => {
+    shownQuestions.set(workspaceId, target.id);
+    setShownId(target.id);
+  };
+  const advancePast = (copied: Question) => shownQuestions.set(workspaceId, (open[index + 1] ?? copied).id);
+  const step = { colors, touch, onSurface1, onPress: show };
+  const stepping = open.length > 1;
+  const position = m.questionPosition(open.length);
   return (
-    <>
-      {dashboard.questions.open.map((question) => (
-        <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>
-            <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 style={{ gap: HEADER_GAP }}>
+      {stepping ? (
+        <View style={{ flexDirection: "row", alignItems: "center", justifyContent: "space-between", gap: 8 }}>
+          <Text style={{ color: colors.foregroundMuted, fontSize: 12, lineHeight: 17, fontVariant: ["tabular-nums"] }}>
+            {position[0]}<Text style={{ color: colors.foreground, fontWeight: "600" }}>{index + 1}</Text>{position[1]}
+          </Text>
+          <View style={{ flexDirection: "row", gap: touch ? stepSlop * 2 : 4 }}>
+            <StepButton {...step} icon="ChevronLeft" label={m.previousQuestion} target={open[index - 1]} />
+            <StepButton {...step} icon="ChevronRight" label={m.nextQuestion} target={open[index + 1]} />
           </View>
-          <QuestionDetail colors={colors} question={question} now={now} onSurface1={onSurface1} onCopy={(letter) => onCopy(question, letter)} onOpenAttachment={onOpenAttachment} />
         </View>
-      ))}
-      {dashboard.stuck.length ? (
-        <View style={{ gap: 4 }}>
-          <View style={{ flexDirection: "row", alignItems: "center", gap: 6 }}>
-            <Icon name="OctagonAlert" size={12} color={colors.statusDanger} />
-            <Text style={{ color: colors.statusDanger, fontSize: 12, lineHeight: 17, fontWeight: "600" }}>{m.stuck}</Text>
+      ) : null}
+      <List key={question?.id} compact={compact} surface={onSurface1 ? colors.surface1 : colors.surface0} maxHeight={stepping ? LIST_MAX_HEIGHT - stepSize(touch) - HEADER_GAP : LIST_MAX_HEIGHT}>
+        {question ? (
+          <View 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>
+              <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} onOpenAttachment={onOpenAttachment} onCopy={(letter) => {
+              advancePast(question);
+              onCopy(question, letter);
+            }} />
           </View>
-          {dashboard.stuck.map((item) => (
-            <Text key={item.key} style={{ color: colors.foreground, fontSize: 12, lineHeight: 17 }}>
-              {item.title}
-              <Text style={{ color: colors.foregroundMuted }}>
-                {item.kind === "overdue" ? m.overdueAside : item.kind === "blocked" ? m.blockedAside(item.note) : ""}
+        ) : null}
+        {dashboard.stuck.length ? (
+          <View style={{ gap: 4 }}>
+            <View style={{ flexDirection: "row", alignItems: "center", gap: 6 }}>
+              <Icon name="OctagonAlert" size={12} color={colors.statusDanger} />
+              <Text style={{ color: colors.statusDanger, fontSize: 12, lineHeight: 17, fontWeight: "600" }}>{m.stuck}</Text>
+            </View>
+            {dashboard.stuck.map((item) => (
+              <Text key={item.key} style={{ color: colors.foreground, fontSize: 12, lineHeight: 17 }}>
+                {item.title}
+                <Text style={{ color: colors.foregroundMuted }}>
+                  {item.kind === "overdue" ? m.overdueAside : item.kind === "blocked" ? m.blockedAside(item.note) : ""}
+                </Text>
               </Text>
-            </Text>
-          ))}
-        </View>
-      ) : null}
-    </>
+            ))}
+          </View>
+        ) : null}
+      </List>
+    </View>
+  );
+}
+
+const stepSize = (touch: boolean) => (touch ? 36 : 24);
+const stepSlop = (TOUCH_TARGET - stepSize(true)) / 2;
+
+function StepButton({ colors, touch, onSurface1, icon, label, target, onPress }: {
+  colors: Colors;
+  touch: boolean;
+  onSurface1: boolean;
+  icon: "ChevronLeft" | "ChevronRight";
+  label: string;
+  target: Question | undefined;
+  onPress(target: Question): void;
+}) {
+  const button = onSurface1 ? { rest: colors.surface2, pressed: colors.surface1 } : { rest: colors.surface1, pressed: colors.surface2 };
+  const size = stepSize(touch);
+  return (
+    <PressScale accessibilityRole="button" accessibilityLabel={label} accessibilityState={{ disabled: !target }} disabled={!target}
+      onPress={target ? () => onPress(target) : undefined} hitSlop={touch ? stepSlop : undefined}
+      style={({ pressed }) => ({ width: size, height: size, alignItems: "center", justifyContent: "center", borderRadius: touch ? 8 : 4, opacity: target ? 1 : 0.35, ...raised(colors),
+        backgroundColor: pressed ? button.pressed : button.rest })}>
+      <Icon name={icon} size={touch ? 16 : 14} color={colors.foreground} />
+    </PressScale>
   );
 }

package/client/pill-state.ts

@@ -5,8 +5,7 @@ import type { AttentionResult } from "../shared/rpc";
 // icon and what pressing it does can't disagree.
 // - "attention": questions waiting or something stuck; opens a popover.
 // - "started": a run whose panel has never been opened; a one-time nudge.
-// - "open": on a phone, the way into the panel while a run is open, since
-//   phones have no Explorer to open it from.
+// - "open": on a phone, a one-tap way into the panel while a run is open.
 export type Pill =
   | { mode: "attention"; label: string; icon: "stuck" | "questions" }
   | { mode: "started"; label: "Progress"; icon: "started" }

package/client/pills.tsx

@@ -18,13 +18,17 @@ export const PILL_POLL_MS = 5_000;
 // still trigger a check, at most once a poll interval.
 export const IDLE_POLL_EVERY = 6;
 
-// Paseo's desktop app shows the panel in Explorer, beside the chat. The phone
-// apps never draw Explorer's pane, so there the panel is a tab of its own.
-// It has its own id on phones: Paseo 0.10.1 reopens an existing tab where it
+// Phones on Paseo before 0.13 have no Explorer, so there the panel is a tab of
+// its own. addFilePanel arrived in 0.13, the release that gave phones Explorer.
+// The tab has its own id: Paseo 0.10.1 reopens an existing tab where it
 // already is, and earlier versions of this plugin left a "progress" tab in the
 // phone's hidden Explorer pane, which a plugin can't move or close.
-export function progressPanel(): { id: string; location: "explorer" | "workspace" } {
-  return Platform.OS === "web" ? { id: "progress", location: "explorer" } : { id: "progress-tab", location: "workspace" };
+type ProgressPanelPlacement = { id: "progress"; location: "explorer" } | { id: "progress-tab"; location: "workspace" };
+
+export function progressPanel(client: PluginClientContext): ProgressPanelPlacement {
+  return Platform.OS === "web" || "addFilePanel" in client
+    ? { id: "progress", location: "explorer" }
+    : { id: "progress-tab", location: "workspace" };
 }
 
 type Workspace = { id: string; workspaceDirectory?: string; projectRootPath: string };
@@ -44,7 +48,7 @@ export function contributePills(client: PluginClientContext) {
   // The last report per workspace; pillFor turns it into what the pill shows.
   const reports = new Map<string, AttentionResult>();
   let locale = resolveLocale("system");
-  const where = { phone: progressPanel().location === "workspace" };
+  const where = { phone: Platform.OS !== "web" };
   const pillOf = (workspaceId: string) => pillFor(reports.get(workspaceId), where, messagesFor(locale));
   // Bumped on each report so a poll that was already in flight can't bring the pill back.
   let openedReports = 0;
@@ -83,9 +87,9 @@ export function contributePills(client: PluginClientContext) {
     );
   }
 
+  const panel = progressPanel(client);
   const openPanel = (workspaceId: string) => {
-    const { id, location } = progressPanel();
-    client.openPanel(id, { workspaceId, location });
+    client.openPanel(panel.id, { workspaceId, location: panel.location });
   };
 
   const buttonFor = (workspaceId: string, mode: Pill["mode"], label: string) => mode === "attention"

package/client/surfaces.ts

@@ -51,7 +51,10 @@ export function raised(colors: Colors): ViewStyle {
 // drifting second color. Paseo's own status badges use 12% in light themes and
 // 16% in dark ones, where the surface swallows more of it.
 export function tint(color: string, colors: Colors): string {
+  return withAlpha(color, isLight(colors) ? 0.12 : 0.16) ?? colors.surface2;
+}
+
+export function withAlpha(color: string, alpha: number): string | null {
   const rgb = channels(color);
-  if (!rgb) return colors.surface2;
-  return `rgba(${rgb.join(", ")}, ${isLight(colors) ? 0.12 : 0.16})`;
+  return rgb ? `rgba(${rgb.join(", ")}, ${alpha})` : null;
 }

package/index.client.tsx

@@ -9,7 +9,7 @@ const SETTINGS_ID = "settings";
 
 export default function contribute(client: PluginClientContext) {
   const stopPills = contributePills(client);
-  const panel = progressPanel();
+  const panel = progressPanel(client);
   const stopPanel = client.addWorkspacePanel({
     id: panel.id,
     title: "Progress",
@@ -24,7 +24,6 @@ export default function contribute(client: PluginClientContext) {
     icon: "ListChecks",
     keywords: ["dashboard", "tickets", "status", "questions"],
     context: "workspace",
-    // Beside the agent chat where Paseo can show both; a tab of its own on phones.
     onSelect({ openPanel }) {
       openPanel(panel.id, { location: panel.location });
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stevecastaneda/paseo-progress",
-  "version": "1.8.0",
+  "version": "1.10.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",