@stevecastaneda/paseo-progress 1.7.0 → 1.8.0

package/README.md

@@ -145,6 +145,11 @@ 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.

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/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/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/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.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() }),
   ]),
 });