@stevecastaneda/paseo-progress 1.7.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,16 @@ 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.
+- [Improved] **What's new banner.** The headline gets the banner's full width, with **See what's new** under it.
+
 ### 1.7.0
 
 - [New] **See screenshots full screen.** In an image preview, press **Full screen** or click the image to fill the window with it. Esc takes you back to the preview, still open. The arrow keys still move between images. A long screenshot also gets **Fit to width**, which fills the width so you can scroll down it.

package/client/attachments.tsx

@@ -2,10 +2,11 @@ import { openExternalUrl, type PluginWorkspacePanelProps, useRpc } from "@getpas
 import { copyText, Icon, useToast } from "@getpaseo/plugin/client/react-native";
 import React from "react";
 import { Platform, Text, View } from "react-native";
-import { type Attachment, attachmentIcon, canPreview, shortName } from "../shared/attachments";
+import { type Attachment, attachmentIcon, canPreview, opensAsPage, shortName } from "../shared/attachments";
+import { openPage } from "./page-opener";
 import { errorText } from "./errors";
 import { PressableRow } from "./row";
-import { openDeliverable } from "../shared/rpc";
+import { canOpenOnHost, openDeliverable } from "../shared/rpc";
 import { useProgressLanguage } from "./language";
 
 export { type Attachment, attachmentIcon, deliverableAttachment, questionAttachments, shortName, ticketSourceAttachment } from "../shared/attachments";
@@ -35,6 +36,7 @@ export function useAttachmentOpener({ workspaceId, workspaceDirectory, navigatio
   const { messages: m } = useProgressLanguage();
   const toast = useToast();
   const openOnHostRpc = useRpc(openDeliverable);
+  const checkHost = useRpc(canOpenOnHost);
   async function copyPath(attachment: Attachment, prefix = "") {
     try {
       await copyText(absolutePath(attachment.path!, workspaceDirectory));
@@ -61,6 +63,12 @@ export function useAttachmentOpener({ workspaceId, workspaceDirectory, navigatio
       }
       return;
     }
+    // A page opens on the computer holding it, like a double-click, and in
+    // Paseo only where that computer has no screen to open it on.
+    if (openPage && opensAsPage(attachment, { browser: Platform.OS === "web" }) && !(await checkHost({ workspaceId, workspaceDirectory }).then((result) => result.canOpen, () => false))) {
+      openPage({ workspaceId, workspaceDirectory, ref: attachment.ref, title: attachment.title });
+      return;
+    }
     if (onPreview && isPreviewable(attachment)) {
       onPreview(attachment);
       return;

package/client/dialog-stack.tsx

@@ -1,6 +1,8 @@
 import type { PluginWorkspacePanelProps } from "@getpaseo/plugin/client";
 import { Icon, Modal } from "@getpaseo/plugin/client/react-native";
 import React, { useEffect, useRef, useState } from "react";
+import { Platform } from "react-native";
+import { opensAsPage } from "../shared/attachments";
 import type { Dashboard, Question } from "../shared/dashboard";
 import { type Attachment, attachmentIcon, useAttachmentOpener } from "./attachments";
 import { NarrowProvider } from "./narrow";
@@ -49,8 +51,8 @@ export function StackedDialog({ colors, root, onClose, questions = [], dashboard
   const opener = useAttachmentOpener({ ...context, onPreview: (attachment) => push({ kind: "preview", attachment, group: galleryFiles(group.current), fullScreen: false }) });
   const openAttachment = (attachment: Attachment, from: Attachment[]) => {
     group.current = from;
-    // A link opens elsewhere in Paseo; close first so it isn't left behind the dialog.
-    if (attachment.url) onClose();
+    // A link or a page opens outside the dialog; close first so it isn't left behind it.
+    if (attachment.url || opensAsPage(attachment, { browser: Platform.OS === "web" })) onClose();
     void opener.open(attachment);
   };
   // Opens the agent's chat in its workspace, with the dialog out of the way.

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/page-opener.ts

@@ -0,0 +1,9 @@
+export type PageParams = { workspaceId: string; workspaceDirectory: string; ref: string; title: string };
+
+// Panels can't open a screen themselves, only the plugin's client can, so it
+// sets this once it has added the page screen.
+export let openPage: ((params: PageParams) => void) | null = null;
+
+export function setPageOpener(opener: typeof openPage) {
+  openPage = opener;
+}

package/client/page-screen.tsx

@@ -0,0 +1,97 @@
+import { type PluginClientContext, type PluginScreenProps, useRpc } from "@getpaseo/plugin/client";
+import { useQuery } from "@tanstack/react-query";
+import React, { useEffect, useRef, useState } from "react";
+import { ActivityIndicator, Text, View } from "react-native";
+import { previewDeliverable } from "../shared/rpc";
+import { errorText } from "./errors";
+import { ProgressLanguageProvider, useProgressLanguage } from "./language";
+import { type PageParams, setPageOpener } from "./page-opener";
+
+const PAGE_SCREEN_ID = "page";
+
+export function addPageScreen(client: PluginClientContext) {
+  setPageOpener((params) => client.openScreen({ screenId: PAGE_SCREEN_ID, params }));
+  const stop = client.addScreen({
+    id: PAGE_SCREEN_ID,
+    title: (params) => params.title ?? "",
+    Component: (props) => <ProgressLanguageProvider><PageScreen {...props} /></ProgressLanguageProvider>,
+  });
+  return () => {
+    setPageOpener(null);
+    void stop();
+  };
+}
+
+// Keys pressed inside the page go to the page, so it tells Progress about
+// Escape itself, unless one of its own handlers has used the key.
+const ESCAPE = "progress:page-escape";
+const ESCAPE_SCRIPT = `<script>addEventListener("keydown",function(e){if(e.key==="Escape"&&!e.defaultPrevented)parent.postMessage("${ESCAPE}","*")})</script>`;
+
+// The plugin compiles without the DOM's types; these are the browser APIs used here.
+type KeyEvent = { key: string; defaultPrevented: boolean };
+type FrameMessage = { data: unknown; source: unknown };
+type Frame = { contentWindow: unknown; getClientRects(): { length: number } };
+const browser = globalThis as unknown as {
+  addEventListener(type: "keydown", listener: (event: KeyEvent) => void): void;
+  addEventListener(type: "message", listener: (event: FrameMessage) => void): void;
+  removeEventListener(type: "keydown" | "message", listener: (event: never) => void): void;
+};
+
+// Escape leaves the page, like the Close button in Paseo's header.
+// Paseo can keep a screen mounted, hidden, after leaving it, so Escape only
+// counts while the page is on screen.
+function useEscapeToClose(frame: React.RefObject<Frame | null>, close: (() => void) | undefined) {
+  useEffect(() => {
+    if (!close || typeof browser.addEventListener !== "function") return;
+    const onKey = (event: KeyEvent) => {
+      if (event.key === "Escape" && !event.defaultPrevented && frame.current?.getClientRects().length) close();
+    };
+    const onMessage = (event: FrameMessage) => {
+      if (event.data === ESCAPE && event.source === frame.current?.contentWindow) close();
+    };
+    browser.addEventListener("keydown", onKey);
+    browser.addEventListener("message", onMessage);
+    return () => {
+      browser.removeEventListener("keydown", onKey);
+      browser.removeEventListener("message", onMessage);
+    };
+  }, [close]);
+}
+
+// An HTML deliverable across the whole screen, the width it was written for.
+function PageScreen({ params, theme: { colors }, navigation }: PluginScreenProps) {
+  const { messages: m } = useProgressLanguage();
+  const fetchPreview = useRpc(previewDeliverable);
+  const { workspaceId, workspaceDirectory, ref } = params as PageParams;
+  const page = useQuery({
+    queryKey: ["progress", "page", workspaceId, ref],
+    queryFn: () => fetchPreview({ workspaceId, workspaceDirectory, ref }),
+  });
+  // The page stays hidden on Paseo's background until it has drawn, so opening it
+  // doesn't flash an empty white frame first.
+  const [shownHtml, setShownHtml] = useState<string | null>(null);
+  const frame = useRef<Frame | null>(null);
+  useEscapeToClose(frame, navigation ? () => navigation.openWorkspace({ workspaceId }) : undefined);
+  if (page.data?.kind === "html") {
+    const html = page.data.html + ESCAPE_SCRIPT;
+    return (
+      <View style={{ flex: 1, backgroundColor: colors.surface0 }}>
+        {/* `allow-scripts` alone, as in Paseo's own HTML preview: the page runs its scripts
+            (and loads them from the web, so no CSP) in an opaque origin that can't reach
+            Paseo's DOM or storage, navigate the app, open windows or submit forms. */}
+        <iframe ref={frame as never} srcDoc={html} sandbox="allow-scripts" referrerPolicy="no-referrer" title={params.title} onLoad={() => setShownHtml(html)}
+          style={{ flex: 1, width: "100%", height: "100%", display: "block", border: "none", backgroundColor: "white",
+            opacity: shownHtml === html ? 1 : 0, transition: "opacity 150ms ease-out" }} />
+      </View>
+    );
+  }
+  return (
+    <View style={{ flex: 1, alignItems: "center", justifyContent: "center", padding: 24 }}>
+      {page.error ? (
+        <Text accessibilityRole="alert" selectable style={{ color: colors.statusDanger, fontSize: 12, lineHeight: 18 }}>
+          {m.previewError(errorText(page.error, m.unknownError))}
+        </Text>
+      ) : <ActivityIndicator color={colors.foregroundMuted} accessibilityLabel={m.loadingPreview} />}
+    </View>
+  );
+}

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/preview.tsx

@@ -356,7 +356,7 @@ const CHARS_PER_LINE = Math.floor((CONTENT_WIDTH - 20) / 7.2);
 const FOLDER_ROW_HEIGHT = ATTACHMENT_ROW.lineHeight + ATTACHMENT_ROW.paddingVertical * 2 + ATTACHMENT_ROW.gap;
 
 // Roughly how tall the preview draws, including wrapped lines.
-function estimatedHeight(data: { kind: "image" | "video" } | { kind: "text"; text: string } | { kind: "folder"; entries: unknown[]; truncated: boolean } | undefined, aspectRatio: number, maxMediaHeight: number): number {
+function estimatedHeight(data: { kind: "image" | "video" | "html" } | { kind: "text"; text: string } | { kind: "folder"; entries: unknown[]; truncated: boolean } | undefined, aspectRatio: number, maxMediaHeight: number): number {
   if (!data) return 0;
   if (data.kind === "folder") return Math.max(1, data.entries.length + (data.truncated ? 1 : 0)) * FOLDER_ROW_HEIGHT;
   if (data.kind !== "text") return Math.min(CONTENT_WIDTH / aspectRatio, maxMediaHeight);

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/client/whats-new.tsx

@@ -39,22 +39,23 @@ export function WhatsNewBanner({ colors, host }: { colors: Colors; host: PluginW
   return (
     <>
       <Presence show={Boolean(whatsNew)}>{whatsNew ? (
-        <View style={{ flexDirection: "row", alignItems: "center", flexWrap: "wrap", gap: 10, margin: 12, marginBottom: 0, padding: 8, borderRadius: 12, ...raised(colors), backgroundColor: colors.surface1 }}>
-          <View style={{ alignSelf: "flex-start", height: 17, justifyContent: "center" }}><Icon name="Gift" size={14} color={colors.foregroundMuted} /></View>
-          <Text selectable style={{ flex: 1, minWidth: 200, color: colors.foregroundMuted, fontSize: 12, lineHeight: 17 }}>
-            <Text style={{ color: colors.foreground, fontWeight: "500" }}>{whatsNew.releases.length > 1 ? m.updatedTo(whatsNew.version) : m.newVersion(whatsNew.version)}</Text> {whatsNew.headline}
-          </Text>
-          {/* 8px keeps the close button's 6px hit slop off the button beside it. */}
-          <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
-            <PressScale accessibilityRole="button" onPress={() => { setShown(whatsNew); setOpen(true); }}
-              style={({ pressed, hovered }) => ({ paddingHorizontal: 10, paddingVertical: 5, borderRadius: 4, backgroundColor: colors.accent, opacity: pressed ? 0.7 : hovered ? 0.85 : 1 })}>
-              <Text style={{ color: colors.accentForeground, fontSize: 12, lineHeight: 16, fontWeight: "600" }}>{m.seeWhatsNew}</Text>
-            </PressScale>
+        // The headline gets the full width, with the button under it on the text's edge.
+        <View style={{ gap: 8, margin: 12, marginBottom: 0, padding: 8, borderRadius: 12, ...raised(colors), backgroundColor: colors.surface1 }}>
+          <View style={{ flexDirection: "row", alignItems: "flex-start", gap: 10 }}>
+            <View style={{ height: 17, justifyContent: "center" }}><Icon name="Gift" size={14} color={colors.foregroundMuted} /></View>
+            <Text selectable style={{ flex: 1, color: colors.foregroundMuted, fontSize: 12, lineHeight: 17 }}>
+              <Text style={{ color: colors.foreground, fontWeight: "500" }}>{whatsNew.releases.length > 1 ? m.updatedTo(whatsNew.version) : m.newVersion(whatsNew.version)}</Text> {whatsNew.headline}
+            </Text>
+            {/* Centered on the first line without making it taller. */}
             <PressScale accessibilityRole="button" accessibilityLabel={m.dismissWhatsNew} hitSlop={6} onPress={() => close(whatsNew.version)}
-              style={({ pressed, hovered }) => ({ padding: 5, borderRadius: 4, backgroundColor: pressed ? colors.border : hovered ? colors.surface2 : "transparent" })}>
+              style={({ pressed, hovered }) => ({ marginVertical: -4.5, padding: 5, borderRadius: 4, backgroundColor: pressed ? colors.border : hovered ? colors.surface2 : "transparent" })}>
               <Icon name="X" size={16} color={colors.foregroundMuted} />
             </PressScale>
           </View>
+          <PressScale accessibilityRole="button" onPress={() => { setShown(whatsNew); setOpen(true); }}
+            style={({ pressed, hovered }) => ({ alignSelf: "flex-start", marginStart: 24, paddingHorizontal: 10, paddingVertical: 5, borderRadius: 4, backgroundColor: colors.accent, opacity: pressed ? 0.7 : hovered ? 0.85 : 1 })}>
+            <Text style={{ color: colors.accentForeground, fontSize: 12, lineHeight: 16, fontWeight: "600" }}>{m.seeWhatsNew}</Text>
+          </PressScale>
         </View>
       ) : null}</Presence>
       <Modal title={!shown ? "" : shown.releases.length > 1 ? m.whatsNewAll : m.whatsNewTitle(shown.version)} icon={<Icon name="Gift" size={16} color={colors.foregroundMuted} />}

package/index.client.tsx

@@ -3,6 +3,7 @@ import { ProgressPanel } from "./client/panel";
 import { contributePills, progressPanel } from "./client/pills";
 import { QuestionSettings } from "./client/settings";
 import { ProgressLanguageProvider } from "./client/language";
+import { addPageScreen } from "./client/page-screen";
 
 const SETTINGS_ID = "settings";
 
@@ -29,6 +30,7 @@ export default function contribute(client: PluginClientContext) {
     },
   });
 
+  const stopPage = addPageScreen(client);
   const stopSettings = client.addSettingsScreen({
     id: SETTINGS_ID,
     title: "Settings",
@@ -37,6 +39,7 @@ export default function contribute(client: PluginClientContext) {
   });
 
   return () => {
+    stopPage();
     void stopSettings();
     void stopPanel();
     void stopCommand();

package/package.json

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

package/server/open.ts

@@ -3,7 +3,7 @@ import { execFile } from "node:child_process";
 import { existsSync } from "node:fs";
 import { open, readdir, readFile, realpath, stat } from "node:fs/promises";
 import { homedir, hostname } from "node:os";
-import { delimiter, join, relative, resolve } from "node:path";
+import { delimiter, dirname, join, relative, resolve } from "node:path";
 import { promisify } from "node:util";
 import { findAttachment, type FolderEntry, imageMimeType, previewKind, splitRef, videoMimeType } from "../shared/attachments.ts";
 import { readProgress } from "./progress-file.ts";
@@ -53,7 +53,7 @@ export function hostOpener(platform: NodeJS.Platform, env: NodeJS.ProcessEnv): O
 // A deliverable or question attachment the agent recorded, found by reference,
 // so the panel can never reach an arbitrary path. Only files inside the
 // worktree resolve.
-async function resolveAttachment(directory: string, ref: string, verb: string): Promise<{ path: string; target: string }> {
+async function resolveAttachment(directory: string, ref: string, verb: string): Promise<{ path: string; target: string; root: string }> {
   const { base, inner } = splitRef(ref);
   const worktree = findRoot(directory);
   const { dashboard } = await readProgress((await findStore(worktree)).directory);
@@ -66,7 +66,7 @@ async function resolveAttachment(directory: string, ref: string, verb: string):
   if (!target) throw new Error(`${path} no longer exists.`);
   const inside = relative(root, target);
   if (outside(inside)) throw new Error(`${path} is outside this worktree, so it was not ${verb}.`);
-  return { path, target };
+  return { path, target, root };
 }
 
 export async function openDeliverable(directory: string, id: string, opener: Opener): Promise<{ opened: string }> {
@@ -93,14 +93,15 @@ export type Preview =
   | { kind: "image"; dataUri: string; bytes: number }
   | { kind: "video"; mimeType: string; bytes: number }
   | { kind: "text"; text: string; bytes: number; truncated: boolean }
+  | { kind: "html"; html: string; bytes: number }
   | { kind: "folder"; entries: FolderEntry[]; truncated: boolean };
 
 export async function previewDeliverable(directory: string, id: string): Promise<Preview> {
-  const { path, target } = await resolveAttachment(directory, id, "previewed");
+  const { path, target, root } = await resolveAttachment(directory, id, "previewed");
   const stats = await stat(target);
   if (stats.isDirectory()) return { kind: "folder", ...(await listFolder(target)) };
   const kind = previewKind(target);
-  if (!kind) throw new Error(`${path} isn't an image, video or text file, so it can't be previewed.`);
+  if (!kind) throw new Error(`${path} isn't an image, video, text or HTML file, so it can't be previewed.`);
   const { size } = stats;
   if (kind === "video") {
     if (size > MAX_PREVIEW_VIDEO_BYTES) throw new Error(tooLarge(path, size));
@@ -117,6 +118,7 @@ export async function previewDeliverable(directory: string, id: string): Promise
     }
   }
   if (size > MAX_PREVIEW_BYTES) throw new Error(tooLarge(path, size));
+  if (kind === "html") return { kind, html: await inlineLocalFiles(await readFile(target, "utf8"), dirname(target), root), bytes: size };
   const data = await readFile(target);
   return { kind, dataUri: `data:${imageMimeType(target)};base64,${data.toString("base64")}`, bytes: size };
 }
@@ -132,6 +134,57 @@ async function listFolder(target: string): Promise<{ entries: FolderEntry[]; tru
   return { entries: entries.slice(0, MAX_FOLDER_ENTRIES), truncated: entries.length > MAX_FOLDER_ENTRIES };
 }
 
+// The preview gets only the page, so the files beside it that it loads (its
+// screenshots, a script, a stylesheet) are written into it. Only files inside the
+// worktree, up to MAX_PREVIEW_BYTES in all; anything else is left as written and
+// fails to load. Web addresses are left alone.
+async function inlineLocalFiles(html: string, directory: string, root: string): Promise<string> {
+  let room = MAX_PREVIEW_BYTES - Buffer.byteLength(html);
+  const inline = async (url: string, encode: (data: Buffer, file: string) => string): Promise<string | null> => {
+    if (!url || /^([a-z][a-z0-9+.-]*:|[/\\#?])/i.test(url)) return null;
+    try {
+      const file = await realpath(resolve(directory, decodeURI(url.replace(/[?#].*$/, ""))));
+      const stats = await stat(file);
+      if (outside(relative(root, file)) || !stats.isFile() || stats.size > room) return null;
+      const encoded = encode(await readFile(file), file);
+      if (encoded.length > room) return null;
+      room -= encoded.length;
+      return encoded;
+    } catch {
+      return null;
+    }
+  };
+  const dataUri = (data: Buffer, file: string) => `data:${imageMimeType(file) ?? videoMimeType(file) ?? "application/octet-stream"};base64,${data.toString("base64")}`;
+  // Its own end tag would close the element early.
+  const body = (tag: string) => (data: Buffer) => data.toString("utf8").replace(new RegExp(`</${tag}`, "gi"), `<\\/${tag}`);
+  html = await replaceEach(html, /<(?:img|source|video)\b[^>]*>/gi, (tag) =>
+    replaceEach(tag[0], /(?<=\s)(src|poster)(\s*=\s*)(["'])([^"']*)\3/gi, async ([, name, equals, quote, url]) => {
+      const uri = await inline(url, dataUri);
+      return uri && `${name}${equals}${quote}${uri}${quote}`;
+    }));
+  html = await replaceEach(html, /<link\b[^>]*>/gi, async ([tag]) => {
+    const href = tag.match(/\bhref\s*=\s*(["'])([^"']*)\1/i)?.[2];
+    if (!href || !/\brel\s*=\s*(["'])\s*stylesheet\s*\1/i.test(tag)) return null;
+    const css = await inline(href, body("style"));
+    return css === null ? null : `<style>${css}</style>`;
+  });
+  return replaceEach(html, /<script\b([^>]*?)\s+src\s*=\s*(["'])([^"']*)\2([^>]*)>\s*<\/script\s*>/gi, async ([, before, , src, after]) => {
+    const script = await inline(src, body("script"));
+    return script === null ? null : `<script${before}${after}>${script}</script>`;
+  });
+}
+
+// `replace` on each match in turn; a null keeps the match as it was.
+async function replaceEach(text: string, pattern: RegExp, replace: (match: RegExpMatchArray) => Promise<string | null>): Promise<string> {
+  let result = "";
+  let last = 0;
+  for (const match of text.matchAll(pattern)) {
+    result += text.slice(last, match.index) + ((await replace(match)) ?? match[0]);
+    last = match.index! + match[0].length;
+  }
+  return result + text.slice(last);
+}
+
 function tooLarge(path: string, size: number): string {
   return `${path} is ${Math.round(size / 1024 / 1024)} MB, too large to preview.`;
 }

package/shared/attachments.ts

@@ -65,7 +65,7 @@ const VIDEO_TYPES: Record<string, string> = {
 };
 
 // Plain text shown as-is in the preview dialog, and opened in the browser on
-// the host. HTML is left to the browser either way.
+// the host.
 const TEXT_EXTENSIONS = new Set([".md", ".markdown", ".mdx", ".txt", ".log", ".json", ".jsonl", ".yaml", ".yml", ".csv"]);
 
 function extension(path: string): string | null {
@@ -82,10 +82,12 @@ export function videoMimeType(path: string): string | null {
   return VIDEO_TYPES[extension(path) ?? ""] ?? null;
 }
 
-export function previewKind(path: string): "image" | "video" | "text" | null {
+export function previewKind(path: string): "image" | "video" | "text" | "html" | null {
   if (imageMimeType(path)) return "image";
   if (videoMimeType(path)) return "video";
-  return TEXT_EXTENSIONS.has(extension(path) ?? "") ? "text" : null;
+  const ext = extension(path) ?? "";
+  if (ext === ".html" || ext === ".htm") return "html";
+  return TEXT_EXTENSIONS.has(ext) ? "text" : null;
 }
 
 export function isFolder(attachment: Attachment): boolean {
@@ -118,6 +120,7 @@ export function canPreview(attachment: Attachment, where: { browser: boolean }):
   if (!attachment.path) return false;
   if (isFolder(attachment)) return true;
   const kind = previewKind(attachment.path);
+  if (kind === "html") return false;
   if (kind === "video" || (kind === "image" && extension(attachment.path) === ".svg")) return where.browser;
   return kind !== null;
 }
@@ -137,7 +140,13 @@ export function attachmentIcon(attachment: Attachment): string {
   if (attachment.url) return "Globe";
   if (!attachment.path) return "File";
   const kind = previewKind(attachment.path);
-  return kind === "image" ? "Image" : kind === "video" ? "Video" : kind === "text" ? "FileText" : /[\/]$/.test(attachment.path) ? "Folder" : "File";
+  return kind === "image" ? "Image" : kind === "video" ? "Video" : kind === "text" ? "FileText" : kind === "html" ? "FileCode" : /[\/]$/.test(attachment.path) ? "Folder" : "File";
+}
+
+// An HTML page is too wide for the dialog, so where the host can't open it the
+// desktop app gives it a screen of its own. The phone apps can't draw one.
+export function opensAsPage(attachment: Attachment, where: { browser: boolean }): boolean {
+  return where.browser && Boolean(attachment.path) && previewKind(attachment.path!) === "html";
 }
 
 // The short name people recognize: a file or folder's own name, or a link's site.

package/shared/rpc.ts

@@ -142,8 +142,8 @@ export const canOpenOnHost = defineRpc({
   output: z.object({ canOpen: z.boolean() }),
 });
 
-// An image or text file's contents, for the preview dialog. A video comes back
-// as its type and size only; its bytes follow in pieces (readDeliverablePiece).
+// An image, text or HTML file's contents, for the preview dialog. A video comes
+// back as its type and size only; its bytes follow in pieces (readDeliverablePiece).
 export const previewDeliverable = defineRpc({
   name: "progress.deliverable.preview",
   input: z.object({
@@ -156,6 +156,7 @@ export const previewDeliverable = defineRpc({
     z.object({ kind: z.literal("image"), dataUri: z.string(), bytes: z.number() }),
     z.object({ kind: z.literal("video"), mimeType: z.string(), bytes: z.number() }),
     z.object({ kind: z.literal("text"), text: z.string(), bytes: z.number(), truncated: z.boolean() }),
+    z.object({ kind: z.literal("html"), html: z.string(), bytes: z.number() }),
     z.object({ kind: z.literal("folder"), entries: z.array(z.object({ name: z.string(), folder: z.boolean() })), truncated: z.boolean() }),
   ]),
 });