@stevecastaneda/paseo-progress 1.8.0 → 1.9.0

package/README.md

@@ -20,7 +20,7 @@ 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">
 
@@ -145,6 +145,11 @@ The progress file, `progress.jsonl`, holds one JSON event per line, each with a
 
 ## Changelog
 
+### 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

@@ -11,14 +11,20 @@ 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.
@@ -43,8 +49,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 +58,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 +68,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 +82,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/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/package.json

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