@stevecastaneda/paseo-progress 1.6.0 → 1.8.0

package/README.md

@@ -145,6 +145,16 @@ The progress file, `progress.jsonl`, holds one JSON event per line, each with a
 
 ## Changelog
 
+### 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.
+- [Fixed] **A preview that can't load says why right away.** A missing file, one too large to preview, or one outside the worktree showed a spinner for several seconds before the reason.
+
 ### 1.6.0
 
 - [New] **Read the skill in Settings.** Progress settings has an Agent Skills section. **View skill** shows the instructions agents get, and **Install skill** appears there when the skill isn't installed.

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

@@ -62,7 +62,7 @@ export function DeliverablesList({ colors, deliverables, now, workspaceId, works
       ))}
       <ShowMoreRow colors={colors} total={deliverables.length} paged={paged} />
       <StackedDialog colors={colors} now={now} onClose={() => setPreviewing(null)} context={{ workspaceId, workspaceDirectory, navigation }}
-        root={previewing ? { kind: "preview", attachment: previewing, group: galleryFiles(deliverables.map(deliverableAttachment)) } : null} />
+        root={previewing ? { kind: "preview", attachment: previewing, group: galleryFiles(deliverables.map(deliverableAttachment)), fullScreen: false } : null} />
     </View>
   );
 }

package/client/dialog-stack.tsx

@@ -1,10 +1,13 @@
 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";
 import { BackButton, galleryFiles, PreviewContent } from "./preview";
+import { previewKind } from "../shared/attachments";
 import { QuestionView, useCopy } from "./questions";
 import { TicketStoryView } from "./ticket-dialog";
 import { ProgressLanguageProvider } from "./language";
@@ -12,11 +15,13 @@ import { ProgressLanguageProvider } from "./language";
 type Colors = PluginWorkspacePanelProps["theme"]["colors"];
 type AttachmentContext = { workspaceId: string; workspaceDirectory: string; navigation?: PluginWorkspacePanelProps["navigation"] };
 
-// What the dialog is showing. A preview keeps the files beside it for Previous and Next.
+// What the dialog is showing. A preview keeps the files beside it for Previous and Next,
+// and whether its image fills the window. `leftFullScreen` puts focus back on the
+// Full screen button; it lives here because leaving can remount the preview.
 export type Step =
   | { kind: "ticket"; id: string }
   | { kind: "question"; id: string }
-  | { kind: "preview"; attachment: Attachment; group: Attachment[] };
+  | { kind: "preview"; attachment: Attachment; group: Attachment[]; fullScreen: boolean; leftFullScreen?: boolean };
 
 // Paseo gives each dialog its own backdrop, so opening a second one darkens
 // the screen while the first fades out; steps swap content inside this one instead.
@@ -43,11 +48,11 @@ export function StackedDialog({ colors, root, onClose, questions = [], dashboard
   const group = useRef<Attachment[]>([]);
   const push = (step: Step) => setSteps((current) => [...current, step]);
   const replaceTop = (step: Step) => setSteps((current) => [...current.slice(0, -1), step]);
-  const opener = useAttachmentOpener({ ...context, onPreview: (attachment) => push({ kind: "preview", attachment, group: galleryFiles(group.current) }) });
+  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.
@@ -62,6 +67,7 @@ export function StackedDialog({ colors, root, onClose, questions = [], dashboard
   const ticket = top?.kind === "ticket" ? dashboard?.tickets.find((candidate) => candidate.id === top.id) : undefined;
   const question = top?.kind === "question" ? questions.find((candidate) => candidate.id === top.id) : undefined;
   const preview = top?.kind === "preview" ? top : undefined;
+  const setFullScreen = (on: boolean) => preview && replaceTop({ ...preview, fullScreen: on, leftFullScreen: !on });
   // The ticket or question it opened on went away (answered elsewhere, or a new run): close rather than show a blank dialog.
   const rootMissing = root !== null && (root.kind === "ticket" ? !dashboard?.tickets.some((candidate) => candidate.id === root.id)
     : root.kind === "question" ? !questions.some((candidate) => candidate.id === root.id) : false);
@@ -74,9 +80,16 @@ export function StackedDialog({ colors, root, onClose, questions = [], dashboard
 
   return (
     <Modal title={title} icon={<Icon name={icon} size={16} color={colors.foregroundMuted} />}
-      open={Boolean(root)} onOpenChange={(next) => { if (!next) onClose(); }}>
-      {/* One Modal.Content for every step: replacing it would re-present the sheet on phones. */}
-      <Modal.Content scrollable={!(preview && previewLong)}>
+      open={Boolean(root)} onOpenChange={(next) => {
+        if (next) return;
+        // Esc leaves full screen first; the dialog stays open under it.
+        if (preview?.fullScreen) setFullScreen(false);
+        else onClose();
+      }}>
+      {/* One Modal.Content for every step: replacing it would re-present the sheet on phones.
+          Full screen turns its scrolling off. The image's fixed position reaches the window only
+          when no ancestor has a transform, and a scroll view has one. */}
+      <Modal.Content scrollable={!(preview && (previewLong || preview.fullScreen))}>
       <ProgressLanguageProvider>
       {/* A dialog has room for clock times, however narrow the panel that opened it. */}
       <NarrowProvider value={false}>
@@ -84,7 +97,8 @@ export function StackedDialog({ colors, root, onClose, questions = [], dashboard
         <PreviewContent colors={colors} attachment={preview.attachment} workspaceId={context.workspaceId} workspaceDirectory={context.workspaceDirectory}
           onOpenOnHost={() => { onClose(); void opener.openOnHost(preview.attachment); }}
           onCopyPath={() => void opener.copyPath(preview.attachment)} onBack={back}
-          gallery={{ items: preview.group, onSelect: (attachment) => replaceTop({ ...preview, attachment }) }} onLong={setPreviewLong}
+          gallery={{ items: preview.group, onSelect: (attachment) => replaceTop({ ...preview, attachment, fullScreen: preview.fullScreen && previewKind(attachment.path ?? "") === "image", leftFullScreen: false }) }}
+          onLong={setPreviewLong} fullScreen={preview.fullScreen} leftFullScreen={preview.leftFullScreen === true} onFullScreen={setFullScreen}
           onOpenEntry={openAttachment} />
       ) : (
         <>

package/client/locales/en.ts

@@ -96,6 +96,10 @@ export const messages: ProgressMessages = {
   back: "Back",
   previousFile: "Previous file",
   nextFile: "Next file",
+  fullScreen: "Full screen",
+  exitFullScreen: "Exit full screen",
+  fitToWidth: "Fit to width",
+  fitToScreen: "Fit to screen",
   videoChanged: "the video changed while it was loading. Try again.",
   localHistory: "Run history stays on this computer.",
   historyStopped: "Runs will stay on this computer. Files already saved stay in the repo.",

package/client/locales/zh-CN.ts

@@ -96,6 +96,10 @@ export const messages: ProgressMessages = {
   back: "返回",
   previousFile: "上一个文件",
   nextFile: "下一个文件",
+  fullScreen: "全屏",
+  exitFullScreen: "退出全屏",
+  fitToWidth: "适应宽度",
+  fitToScreen: "适应屏幕",
   videoChanged: "视频在加载过程中发生了变化。请重试。",
   localHistory: "运行记录保存在这台电脑上。",
   historyStopped: "运行记录将保存在这台电脑上。已保存的文件会保留在仓库中。",

package/client/messages.ts

@@ -78,6 +78,10 @@ export interface ProgressMessages {
   back: string;
   previousFile: string;
   nextFile: string;
+  fullScreen: string;
+  exitFullScreen: string;
+  fitToWidth: string;
+  fitToScreen: string;
   videoChanged: string;
   localHistory: string;
   historyStopped: 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

@@ -59,7 +59,7 @@ export function AttentionPopover({ theme, host, layout, workspaceId, close, open
         </Text>
       )}
       <StackedDialog colors={colors} now={Date.now()} onClose={() => setPreviewing(null)} context={{ workspaceId, workspaceDirectory: root }}
-        root={previewing ? { kind: "preview", ...previewing } : null} />
+        root={previewing ? { kind: "preview", ...previewing, fullScreen: false } : null} />
       <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(); }}

package/client/preview.tsx

@@ -1,8 +1,8 @@
 import { type PluginWorkspacePanelProps, useRpc } from "@getpaseo/plugin/client";
 import { Icon, ScrollView } from "@getpaseo/plugin/client/react-native";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
-import React, { useEffect, useRef } from "react";
-import { ActivityIndicator, Image, Platform, Text, useWindowDimensions, View, type ViewStyle } from "react-native";
+import React, { useEffect, useRef, useState } from "react";
+import { ActivityIndicator, Image, Platform, Pressable, Text, useWindowDimensions, View, type ViewStyle } from "react-native";
 import { ATTACHMENT_ROW, type Attachment, AttachmentList, isPreviewable } from "./attachments";
 import { errorText } from "./errors";
 import { folderAttachments, isFolder, previewKind } from "../shared/attachments";
@@ -39,7 +39,12 @@ type PreviewProps = {
 
 // `onLong` says when the file is too tall for the dialog, so the host turns off
 // its own scrolling and the file scrolls with the actions pinned below.
-export function PreviewContent({ colors, attachment, workspaceId, workspaceDirectory, onOpenOnHost, onCopyPath, onBack, gallery, onOpenEntry, onLong }: PreviewProps & { onLong(long: boolean): void }) {
+export function PreviewContent({ colors, attachment, workspaceId, workspaceDirectory, onOpenOnHost, onCopyPath, onBack, gallery, onOpenEntry, onLong, fullScreen, leftFullScreen, onFullScreen }: PreviewProps & {
+  onLong(long: boolean): void;
+  fullScreen: boolean;
+  leftFullScreen: boolean;
+  onFullScreen(on: boolean): void;
+}) {
   const { messages: m } = useProgressLanguage();
   const fetchPreview = useRpc(previewDeliverable);
   const readPiece = useRpc(readDeliverablePiece);
@@ -60,7 +65,7 @@ export function PreviewContent({ colors, attachment, workspaceId, workspaceDirec
     // and so on, so a tall image made the dialog jump between two sizes until closed.
     queryFn: async () => {
       const data = await fetchPreview({ workspaceId, workspaceDirectory, ref: target.ref });
-      if (data.kind === "image") return { ...data, ratio: await imageRatio(data.dataUri) };
+      if (data.kind === "image") return { ...data, ...await imageSize(data.dataUri) };
       if (data.kind !== "video") return data;
       queryClient.setQueryData(loadingKey(target), 0);
       const video = await loadVideo({
@@ -76,6 +81,9 @@ export function PreviewContent({ colors, attachment, workspaceId, workspaceDirec
     // Images arrive as data URIs up to ~13 MB and videos run to 200 MB; let them
     // go soon after the dialog moves on.
     gcTime: 30_000,
+    // A file that's missing, too large or outside the worktree fails the same way
+    // every time, so the reason shows at once instead of after seconds of retries.
+    retry: false,
   });
   // Stepping to another file keeps this one on screen (dimmed) until the next loads,
   // so the dialog doesn't collapse to a spinner and back.
@@ -102,15 +110,39 @@ export function PreviewContent({ colors, attachment, workspaceId, workspaceDirec
   useArrowKeys(canStep ? step : null);
   // Next has focus when the preview opens, so Enter or Space moves on too.
   const nextButton = useRef<View>(null);
+  const fullScreenButton = useRef<View>(null);
+  // Leaving full screen puts focus back on the Full screen button without the ring
+  // Esc would draw, which read as if the arrows now acted on it. Set during render so
+  // the ring never paints, and from `leftFullScreen` because leaving can remount this.
+  const [quiet, setQuiet] = useState(leftFullScreen && !fullScreen);
+  const [wasFullScreen, setWasFullScreen] = useState(fullScreen);
+  if (wasFullScreen !== fullScreen) {
+    setWasFullScreen(fullScreen);
+    setQuiet(!fullScreen && leftFullScreen);
+  }
   useEffect(() => {
-    (nextButton.current as { focus?(): void } | null)?.focus?.();
-  }, []);
+    if (fullScreen) return;
+    const restore = leftFullScreen && fullScreenButton.current !== null;
+    if (!restore) setQuiet(false);
+    focus(restore ? fullScreenButton : nextButton);
+  }, [fullScreen]);
   // Screenshots and recordings vary from phone-tall to full-width; size to the real
   // file. While stepping, the dimmed one on screen keeps its shape until the next arrives.
   const aspectRatio = preview.data && "ratio" in preview.data && preview.data.ratio ? preview.data.ratio : 16 / 10;
   // A video fits the dialog whole, so the controls along its bottom stay in view
   // without scrolling. A tall image scrolls instead, to keep it readable.
-  const { height: windowHeight } = useWindowDimensions();
+  const { width: windowWidth, height: windowHeight } = useWindowDimensions();
+  // Phones and narrow windows get Paseo's bottom sheet, whose transforms would
+  // keep the full-screen layer inside it.
+  const fullScreenFits = Platform.OS === "web" && windowWidth >= COMPACT_BELOW;
+  // By the file, not the data: while stepping, the data is still the last file's.
+  const canFullScreen = fullScreenFits && previewKind(attachment.path ?? "") === "image" && preview.data?.kind === "image";
+  // While stepping, the last image fills the layer until the next arrives. A file
+  // that fails to load has no data at all, so full screen ends with it.
+  const showsLayer = fullScreenFits && preview.data?.kind === "image";
+  useEffect(() => {
+    if (fullScreen && !preview.isPending && !showsLayer) onFullScreen(false);
+  }, [fullScreen, preview.isPending, showsLayer]);
   const room = roomForContent(windowHeight);
   const maxMediaHeight = preview.data?.kind === "video" ? Math.min(640, Math.max(200, room)) : 640;
   const mediaStyle = { width: "100%", aspectRatio, maxHeight: maxMediaHeight, borderRadius: 6, ...imageOutline(colors), backgroundColor: colors.surface1, opacity: stepping ? 0.6 : 1 } as const;
@@ -152,7 +184,11 @@ export function PreviewContent({ colors, attachment, workspaceId, workspaceDirec
           dimmed={stepping} onOpen={onOpenEntry} />
       ) : null}
       {preview.data?.kind === "image" ? (
-        <Image accessibilityLabel={attachment.title} source={{ uri: preview.data.dataUri }} resizeMode="contain" style={mediaStyle} />
+        // The Full screen button is the keyboard's way in, so the image isn't a second tab stop.
+        <Pressable disabled={!canFullScreen} focusable={false} onPress={() => onFullScreen(true)}
+          style={{ width: "100%", cursor: canFullScreen ? "zoom-in" as unknown as ViewStyle["cursor"] : undefined }}>
+          <Image accessibilityLabel={attachment.title} source={{ uri: preview.data.dataUri }} resizeMode="contain" style={mediaStyle} />
+        </Pressable>
       ) : null}
       {preview.data?.kind === "video" ? <VideoPlayer video={preview.data.video} label={attachment.title} style={mediaStyle} /> : null}
     </>
@@ -182,28 +218,136 @@ export function PreviewContent({ colors, attachment, workspaceId, workspaceDirec
         {onBack ? <BackButton colors={colors} onPress={onBack} /> : null}
       </View>
       {canStep ? <Stepper colors={colors} index={index} count={items.length} onStep={step} nextRef={nextButton} /> : null}
-      <View style={{ flex: 1, alignItems: "flex-end" }}>
+      <View style={{ flex: 1, flexDirection: "row", alignItems: "center", justifyContent: "flex-end", gap: 8 }}>
+        {canFullScreen ? (
+          // An inline outline beats Paseo's :focus-visible ring.
+          <DialogButton ref={fullScreenButton} colors={colors} icon="Maximize2" accessibilityLabel={m.fullScreen} onPress={() => onFullScreen(true)}
+            outerStyle={quiet ? { outlineWidth: 0 } : undefined} onBlur={() => setQuiet(false)} />
+        ) : null}
         {canOpen ? <DialogButton colors={colors} icon="ExternalLink" label={m.open} accessibilityLabel={m.openDefault} onPress={onOpenOnHost} /> : null}
       </View>
     </View>
   );
-  return long ? (
+  const layerShown = fullScreen && showsLayer;
+  // An SVG stays sharp at any size, so only a bitmap stops at its own pixels. An
+  // icon's SVG can say it's 24px wide.
+  const fullScreenLayer = layerShown && preview.data?.kind === "image" ? (
+    <FullScreenImage title={attachment.title} uri={preview.data.dataUri} ratio={aspectRatio} dimmed={stepping} onExit={() => onFullScreen(false)}
+      naturalWidth={preview.data.dataUri.startsWith("data:image/svg+xml") ? null : preview.data.width} />
+  ) : null;
+  // Paseo's focus trap counts the controls under the layer, so Shift+Tab would
+  // reach a hidden Open. Inert takes them out until full screen ends.
+  const body = useRef<View>(null);
+  useEffect(() => {
+    if (!layerShown) return;
+    const element = body.current as unknown as { setAttribute?(name: string, value: string): void; removeAttribute?(name: string): void } | null;
+    element?.setAttribute?.("inert", "");
+    return () => element?.removeAttribute?.("inert");
+  }, [layerShown]);
+  return (
     <>
-      <ScrollView style={{ flex: 1 }} contentContainerStyle={{ gap: 12 }}>{content}</ScrollView>
-      <View style={{ marginTop: 8 }}>{path}</View>
-      {actions}
+      {long ? (
+        <View ref={body} style={{ flex: 1 }}>
+          <ScrollView style={{ flex: 1 }} contentContainerStyle={{ gap: 12 }}>{content}</ScrollView>
+          <View style={{ marginTop: 8 }}>{path}</View>
+          {actions}
+        </View>
+      ) : (
+        <View ref={body} style={{ gap: 20 }}>
+          <View style={{ gap: 8 }}>
+            <View style={{ gap: 12 }}>{content}</View>
+            {path}
+          </View>
+          {actions}
+        </View>
+      )}
+      {fullScreenLayer}
     </>
-  ) : (
-    <View style={{ gap: 20 }}>
-      <View style={{ gap: 8 }}>
-        <View style={{ gap: 12 }}>{content}</View>
-        {path}
+  );
+}
+
+const FULL_SCREEN_MARGIN = 24;
+const FULL_SCREEN_BAR = 52;
+
+// The image over the whole window, never past its own pixels. It fits whole, or a
+// long one can fill the width and scroll.
+function FullScreenImage({ title, uri, naturalWidth, ratio, dimmed, onExit }: { title: string; uri: string; naturalWidth: number | null; ratio: number; dimmed: boolean; onExit(): void }) {
+  const { messages: m } = useProgressLanguage();
+  const { width: windowWidth, height: windowHeight } = useWindowDimensions();
+  const closeButton = useRef<View>(null);
+  const fitButton = useRef<View>(null);
+  const scrollArea = useRef<React.ComponentRef<typeof ScrollView>>(null);
+  useEffect(() => focus(closeButton), []);
+  const [fit, setFit] = useState<"screen" | "width">("screen");
+  const room = windowHeight - 2 * FULL_SCREEN_MARGIN - FULL_SCREEN_BAR;
+  const widthFit = Math.max(0, Math.min(naturalWidth ?? Infinity, windowWidth - 2 * FULL_SCREEN_MARGIN));
+  const screenFit = Math.min(widthFit, room * ratio);
+  // Only an image that fills the width at least half again as large as it fits
+  // whole gets the choice. An ordinary window screenshot gains a little and reads
+  // fine whole; a phone screenshot or a long page doesn't.
+  const long = widthFit >= screenFit * 1.5;
+  const scrolls = long && fit === "width";
+  const toggle = () => setFit(scrolls ? "screen" : "width");
+  // Fit to width hands the keys to the scroll area, so the arrows, Page Up and
+  // Down, Home, End and Space scroll it. When the area goes, focus goes back to the bar.
+  const scrolled = useRef(false);
+  useEffect(() => {
+    if (scrolls) focus(scrollArea);
+    else if (scrolled.current) focus(long ? fitButton : closeButton);
+    scrolled.current = scrolls;
+  }, [scrolls, uri]);
+  const light = "rgba(255, 255, 255, 0.85)";
+  const barButton = ({ pressed, hovered }: { pressed: boolean; hovered: boolean }) => ({
+    height: 36, alignItems: "center", justifyContent: "center", borderRadius: 6,
+    backgroundColor: pressed ? "rgba(255, 255, 255, 0.16)" : hovered ? "rgba(255, 255, 255, 0.1)" : "transparent",
+  }) as const;
+  // A press on the image stops there, so only the black around it exits.
+  // The fit button is the keyboard's way to the toggle, so the image isn't a tab stop.
+  const area = (
+    <Pressable accessible={false} focusable={false} onPress={onExit}
+      style={{ flexGrow: 1, alignItems: "center", justifyContent: "center", padding: FULL_SCREEN_MARGIN }}>
+      <Pressable accessible={false} focusable={false} onPress={long ? toggle : () => {}}
+        style={{ cursor: (long ? (scrolls ? "zoom-out" : "zoom-in") : "default") as unknown as ViewStyle["cursor"] }}>
+        <Image accessibilityLabel={title} source={{ uri }} resizeMode="contain"
+          style={{ width: scrolls ? widthFit : screenFit, aspectRatio: ratio, borderRadius: 6, borderWidth: 1, borderColor: "rgba(255, 255, 255, 0.1)", opacity: dimmed ? 0.6 : 1 }} />
+      </Pressable>
+    </Pressable>
+  );
+  return (
+    <View style={{ position: "fixed" as unknown as ViewStyle["position"], top: 0, right: 0, bottom: 0, left: 0, zIndex: 1000, backgroundColor: "black" }}>
+      <View style={{ height: FULL_SCREEN_BAR, flexDirection: "row", alignItems: "center", gap: 12, paddingStart: FULL_SCREEN_MARGIN, paddingEnd: 12 }}>
+        <Text numberOfLines={1} style={{ flex: 1, minWidth: 0, color: light, fontSize: 13, lineHeight: 18 }}>{title}</Text>
+        <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
+          {long ? (
+            <PressScale ref={fitButton} accessibilityRole="button" onPress={toggle}
+              style={(state) => ({ ...barButton(state), flexDirection: "row", gap: 6, paddingHorizontal: 10 })}>
+              <Icon name={scrolls ? "Shrink" : "MoveHorizontal"} size={16} color={light} />
+              <Text style={{ color: light, fontSize: 13, lineHeight: 18 }}>{scrolls ? m.fitToScreen : m.fitToWidth}</Text>
+            </PressScale>
+          ) : null}
+          <PressScale ref={closeButton} accessibilityRole="button" accessibilityLabel={m.exitFullScreen} onPress={onExit}
+            style={(state) => ({ ...barButton(state), width: 36 })}>
+            <Icon name="X" size={18} color={light} />
+          </PressScale>
+        </View>
       </View>
-      {actions}
+      {/* Keyed so the next image starts at its top. The fit button stays the visible
+          keyboard control, so the scroll area draws no focus ring. */}
+      {scrolls ? (
+        <ScrollView key={uri} ref={scrollArea} focusable style={{ flex: 1, outlineWidth: 0 }} contentContainerStyle={{ flexGrow: 1 }}>{area}</ScrollView>
+      ) : area}
     </View>
   );
 }
 
+// Only views on web have focus(); elsewhere this does nothing.
+function focus(ref: React.RefObject<unknown>) {
+  (ref.current as { focus?(): void } | null)?.focus?.();
+}
+
+// Paseo draws dialogs as bottom sheets below this window width.
+const COMPACT_BELOW = 720;
+
 // Width left for content: Paseo's 520px dialog less its 24px padding each side.
 const CONTENT_WIDTH = 472;
 // Characters of 12px monospace per line of the text box (10px padding each side).
@@ -212,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);
@@ -232,11 +376,12 @@ function FolderList({ colors, folder, entries, truncated, dimmed, onOpen }: { co
   );
 }
 
-// An image's width over its height, or null if it can't be read. Read from the data
-// because onLoad doesn't report a size for data URIs on every platform.
-function imageRatio(uri: string): Promise<number | null> {
+// An image's pixel width and its width over its height, or nulls if they can't be read.
+// Read from the data because onLoad doesn't report a size for data URIs on every platform.
+function imageSize(uri: string): Promise<{ width: number | null; ratio: number | null }> {
   return new Promise((resolve) => {
-    Image.getSize(uri, (width, height) => resolve(width && height ? width / height : null), () => resolve(null));
+    Image.getSize(uri, (width, height) => resolve(width && height ? { width, ratio: width / height } : { width: null, ratio: null }),
+      () => resolve({ width: null, ratio: null }));
   });
 }
 
@@ -248,9 +393,9 @@ function roomForContent(windowHeight: number): number {
 }
 
 // A dialog footer button: 13px label and 14px icon, 30px tall. Icon-only is a 30px square.
-export function DialogButton({ colors, icon, label, accessibilityLabel, onPress, outerStyle, ref }: { colors: Colors; icon: string; label?: string; accessibilityLabel?: string; onPress(): void; outerStyle?: ViewStyle; ref?: React.Ref<View> }) {
+export function DialogButton({ colors, icon, label, accessibilityLabel, onPress, onBlur, outerStyle, ref }: { colors: Colors; icon: string; label?: string; accessibilityLabel?: string; onPress(): void; onBlur?(): void; outerStyle?: ViewStyle; ref?: React.Ref<View> }) {
   return (
-    <PressScale ref={ref} accessibilityRole="button" accessibilityLabel={accessibilityLabel ?? label} onPress={onPress} outerStyle={outerStyle}
+    <PressScale ref={ref} accessibilityRole="button" accessibilityLabel={accessibilityLabel ?? label} onPress={onPress} onBlur={onBlur} outerStyle={outerStyle}
       style={({ pressed }) => ({
         flexDirection: "row", alignItems: "center", gap: 6,
         paddingVertical: label ? 6 : 8, paddingLeft: label ? 8 : 8, paddingRight: label ? 10 : 8,

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.6.0",
+  "version": "1.8.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() }),
   ]),
 });