@stevecastaneda/paseo-progress 1.12.1 → 1.13.0

package/OVERVIEW.md

@@ -1,6 +1,6 @@
 Progress gives each worktree a live dashboard for long agent jobs. The agent records its tickets or steps with a `paseo-progress` command, along with what's stuck, questions for you and finished work. The Progress panel in Explorer shows all of it. Needs Paseo 0.13 or later, and Node.js 22.18 or later on the computer running the Paseo daemon.
 
-The panel shows how much of the estimated work is done, what the agent is doing right now, and where each ticket stands. A ticket turns stuck when it's blocked or runs past its estimate without an update. Press a ticket to see its timeline, activity, questions and deliverables. Images, videos and text files the agent records open in a preview inside Paseo, with Markdown formatted, and a folder opens as a list of its files. Videos play only in the desktop app. Any other file opens in an app on the computer running the Paseo daemon, and so does a previewed file when you press Open. Open is hidden when that computer can't open files, like a Linux server with no desktop. That's true from your phone too. The app opens on that computer, not on the phone.
+The panel shows how much of the estimated work is done, what the agent is doing right now, and where each ticket stands. A ticket turns stuck when it's blocked or runs past its estimate without an update. Press a ticket to see its timeline, activity, questions and deliverables. Images, videos, PDFs and text files the agent records open in a preview inside Paseo, with Markdown formatted, and a folder opens as a list of its files. Videos and PDFs show in the preview only in the desktop and web apps. A PDF in the Deliverables tab also has a button beside Copy that opens it in a Paseo tab, which is where it shows on an iPhone or iPad. Any PDF you open in a Paseo tab shows there too. Any other file opens in an app on the computer running the Paseo daemon, and so does a previewed file when you press Open. Open is hidden when that computer can't open files, like a Linux server with no desktop. That's true from your phone too. The app opens on that computer, not on the phone.
 
 When the agent needs a decision, it asks a numbered question with lettered options and says which one it recommends. A pill above the message box counts open questions and stuck work. Each option has a Copy button. Paste the answer into the chat and the agent records it. In Settings you choose what the agent does while it waits: stop, work around the question, or keep building on its recommendation.
 

package/README.md

@@ -13,7 +13,7 @@ The dashboard shows:
 - percent of estimated work done, time done of time estimated (like "1h 30m of 2h"; once everything is done, how long it really took), and a bar with one segment per ticket
 - **Stuck:** blocked tickets, working tickets with no update for longer than their estimate, and blockers the agent flags
 - **Tickets:** estimate, status, and the working ticket's stage. A ticket that waits for another (`--waits-for T03`) shows "Waits for Ticket 03" under its title until that one is done; waiting is the order of work, so it never counts as stuck, even if the agent also marked it blocked. Press a ticket for its story in a dialog. A summary on top shows its status and stage, time worked against the estimate as a bar that turns red past it, the agent's latest status line while it's working, and the agent on it. Tabs below hold the rest, each only when it has something: the ticket's write-up when it has a `--source` file (the start of it, with the rest a press away), a timeline of its stages and statuses with how long each took, and the activity, questions and deliverables that belong to it. The agent on a ticket shows by its chat title; pressing it opens that chat. Items tagged with `--ticket` belong exactly; older, untagged ones are matched by when they happened and marked "by time"
-- **Questions:** each with a permanent reference (Q1, Q2, ...), lettered options, and the option the agent recommends. You pick what the agent does while you decide in Paseo's Settings (Settings, Plugins, Progress, Settings). **Stop**: it stops all work until you answer. **Work around**, the default: it holds what your answer affects and keeps working on the rest. **Keep building**: it builds its recommendation and changes course if you pick another, except for big questions, which wait. A question is big when building ahead would send something off your computer, when the answer sets something people or programs outside the repo rely on, or when most of the remaining work would be built on it. Each open question shows what the agent is doing: "Agent stopped until you answer", "Waiting for you" (with the reason when it's big), or "Building with B: <its label>". Press a question to open it in a dialog, then press **Copy Q2 B** to copy `Q2 (title): B` for your reply. Files and links the agent attached (`--file`) open like deliverables: images, videos and text files preview in Paseo (with **Back** to the question), a folder lists its files there, links open in Paseo's browser, and other files open in their default app. From the pill's popover, the preview opens over the popover, which stays open so you can go back to it. Answers stay listed under the same reference.
+- **Questions:** each with a permanent reference (Q1, Q2, ...), lettered options, and the option the agent recommends. You pick what the agent does while you decide in Paseo's Settings (Settings, Plugins, Progress, Settings). **Stop**: it stops all work until you answer. **Work around**, the default: it holds what your answer affects and keeps working on the rest. **Keep building**: it builds its recommendation and changes course if you pick another, except for big questions, which wait. A question is big when building ahead would send something off your computer, when the answer sets something people or programs outside the repo rely on, or when most of the remaining work would be built on it. Each open question shows what the agent is doing: "Agent stopped until you answer", "Waiting for you" (with the reason when it's big), or "Building with B: <its label>". Press a question to open it in a dialog, then press **Copy Q2 B** to copy `Q2 (title): B` for your reply. Files and links the agent attached (`--file`) open like deliverables: images, videos, PDFs and text files preview in Paseo (with **Back** to the question), a folder lists its files there, links open in Paseo's browser, and other files open in their default app. From the pill's popover, the preview opens over the popover, which stays open so you can go back to it. Answers stay listed under the same reference.
 - **Activity**, **Answered** questions and **Deliverables** (press one to open it), sharing one card with a tab for each; the panel remembers the tab you picked. Each shows the newest 10, with **Show 10 older** below
 
 <img src="images/2-ticket.png" alt="A ticket's story: its status, time against the estimate, the agent on it, and its timeline" width="400"> <img src="images/3-question.png" alt="A question waiting for an answer, with lettered options, the agent's recommendation and Copy buttons" width="400">
@@ -24,7 +24,7 @@ The panel lives in Explorer, beside the agent chat, so you can watch both. Open
 
 <img src="images/4-pill.png" alt="The pill above the message box, showing two questions waiting" width="600">
 
-On phones, Progress opens in Explorer too. On any phone, the pill stays above the message box while a run is open, so there's always a way in. SVG files and videos preview on desktop; on phones they open on the daemon host.
+On phones, Progress opens in Explorer too. On any phone, the pill stays above the message box while a run is open, so there's always a way in. SVG files, videos and PDFs preview on desktop and in Paseo's web app; on phones they open on the daemon host. A PDF in the Deliverables tab also has a button beside Copy that opens it in a Paseo tab, which is where it shows on an iPhone or iPad.
 
 The first time a run starts in a worktree whose Progress panel has never been opened, the pill shows a spinner and reads **Progress** instead; pressing it opens the panel. Once the panel has been opened there, the plugin writes an empty `progress-panel-opened` file next to the progress file and the nudge never comes back, even for later runs. It doesn't open the panel by itself because Paseo switches to a workspace to open its panel, which would pull you away from whatever you're looking at.
 
@@ -120,7 +120,7 @@ paseo-progress finish "Snapshots ship for all four tables"
 - A working ticket is stuck once it goes longer than its estimate without an update, timed from its last status, stage or note change, or activity tagged to it. The ticket's dialog still shows total time worked against the estimate.
 - `question ask` needs `--recommend`, the agent's pick. The question dialog tags that option "Recommended". Its output tells the agent the question mode and what to do until the answer. `--big "<why>"` marks a big question, which waits for the answer even in Keep building. `start` and `show` also print the mode.
 - Paseo keeps the question mode in its own settings, which only the plugin's server can read, so the server copies it to `~/.local/state/paseo-progress/settings.json` for the command. Without that file, for example while the plugin is off, the command uses Work around.
-- Deliverable paths are stored relative to the worktree root. Web links open in Paseo's browser. Pressing an image (PNG, JPEG, GIF, WebP, up to 10 MB) or text deliverable (Markdown, text, logs, JSON, YAML, CSV; the first 256 KB) previews it in a dialog inside Paseo, which also works from a phone. Markdown shows formatted, with links and images relative to the file's own folder; **Open** there opens the file in its default app. **Open** shows only when the computer running Paseo can open files. A Linux server with no desktop can't, so there a file Paseo can't preview copies its path and says why. A video (MP4, MOV, WebM, up to 200 MB) plays in the same dialog in the desktop app. When there are several files, **Previous** and **Next** step through them, and so do the left and right arrow keys. Pressing a folder lists its files in the same dialog. Press a file to preview it, or a folder inside to list that one, and **Back** returns to the list. Pressing any other local deliverable opens it with its default app on the machine running the Paseo daemon (for example HTML in your browser). On macOS, **Open** sends text files to your default browser. Only recorded deliverables inside the worktree open this way; otherwise the path is copied. The copy icon on each row copies the path.
+- Deliverable paths are stored relative to the worktree root. Web links open in Paseo's browser. Pressing an image (PNG, JPEG, GIF, WebP, up to 10 MB) or text deliverable (Markdown, text, logs, JSON, YAML, CSV; the first 256 KB) previews it in a dialog inside Paseo, which also works from a phone. Markdown shows formatted, with links and images relative to the file's own folder; **Open** there opens the file in its default app. **Open** shows only when the computer running Paseo can open files. A Linux server with no desktop can't, so there a file Paseo can't preview copies its path and says why. A video (MP4, MOV, WebM, up to 200 MB) plays in the same dialog in the desktop app, and a PDF (up to 100 MB) shows there too. When there are several files, **Previous** and **Next** step through them, and so do the left and right arrow keys. Pressing a folder lists its files in the same dialog. Press a file to preview it, or a folder inside to list that one, and **Back** returns to the list. Pressing any other local deliverable opens it with its default app on the machine running the Paseo daemon (for example HTML in your browser). On macOS, **Open** sends text files to your default browser. Only recorded deliverables inside the worktree open this way; otherwise the path is copied. The copy icon on each row copies the path.
 - Several agents can share one run. When another session adds a ticket, each agent sees it at the end of its next command's output (and in `show`), and the skill has it work that ticket in order after its current one. An agent only hears about tickets added since its own last update in the run, and only once.
 - Subagents record their own progress. Since Paseo 0.11, an agent waiting on background subagents shows as idle, so only the subagents' updates show the work is still going. The skill has the agent give each subagent the worktree path and ticket id, and the subagent records its stages and a ticker line on that worktree's dashboard.
 - `start` begins a fresh dashboard. Earlier runs stay in the file. Question references stay unique across runs.
@@ -140,11 +140,15 @@ The progress file, `progress.jsonl`, holds one JSON event per line, each with a
 - Progress folders outside the repo stay behind when a worktree is deleted. They're small, and you can delete them from `~/.local/state/paseo-progress/`.
 - Paseo can't open a panel without switching you to its workspace. So a new run shows a "Progress" pill, and you open the panel yourself.
 - Pills check busy worktrees every 5 seconds and quiet ones every 30. In a quiet worktree, a new question can take up to half a minute to show.
-- Previews cover images up to 10 MB, videos up to 200 MB (desktop app only), the first 256 KB of a text file, and the first 500 items in a folder. The folder list leaves out hidden files. Other files open in their default app. A video the app can't decode shows the player's error, and **Open** still works.
+- Previews cover images up to 10 MB, videos up to 200 MB and PDFs up to 100 MB (desktop and web apps only), the first 256 KB of a text file, and the first 500 items in a folder. The folder list leaves out hidden files. Other files open in their default app. A video the app can't decode shows the player's error, and **Open** still works.
 - Stale warnings and overdue times use the daemon host's clock.
 
 ## Changelog
 
+### 1.13.0
+
+- [New] **PDF previews.** A PDF the agent records now opens in the preview in Paseo's desktop and web apps, with a loading percentage while it arrives. Any PDF you open in a Paseo tab now shows in that tab, up to 100 MB on desktop and 25 MB on a phone. A PDF deliverable also has a button beside Copy that opens it in a tab, which is how you see it on an iPhone or iPad.
+
 ### 1.12.1
 
 - [Fixed] **Long files fill the preview on a phone.** In Paseo's web app at phone width, a long file opened from a list of several files filled only the top half of the sheet, and the bottom half stayed empty. The file now fills the sheet down to its path and buttons.

package/client/deliverables.tsx

@@ -1,9 +1,11 @@
 import type { PluginWorkspacePanelProps } from "@getpaseo/plugin/client";
-import { Icon } from "@getpaseo/plugin/client/ui";
+import { Icon, Markdown } from "@getpaseo/plugin/client/ui";
 import React, { useState } from "react";
-import { Text, View } from "react-native";
+import { Platform, Text, View } from "react-native";
 import type { Deliverable } from "../shared/dashboard";
-import { type Attachment, attachmentIcon, deliverableAttachment, shortName, useAttachmentOpener } from "./attachments";
+import { opensInTab } from "../shared/attachments";
+import { localLinkTarget } from "../shared/markdown";
+import { type Attachment, absolutePath, attachmentIcon, deliverableAttachment, shortName, useAttachmentOpener } from "./attachments";
 import { formatClientAgo } from "./i18n";
 import { PressScale } from "./motion";
 import { StackedDialog } from "./dialog-stack";
@@ -17,6 +19,10 @@ export { absolutePath } from "./attachments";
 type Colors = PluginWorkspacePanelProps["theme"]["colors"];
 type Navigation = PluginWorkspacePanelProps["navigation"];
 
+const ROW_GAP = 8;
+const BUTTON_PAIR_GAP = 4;
+const TAP_AREA_FILL = Array(8).fill("████").join(" ");
+
 // The Deliverables tab: newest first, 10 at a time (see usePaged).
 export function DeliverablesList({ colors, deliverables, now, workspaceId, workspaceDirectory, navigation }: {
   colors: Colors;
@@ -32,37 +38,63 @@ export function DeliverablesList({ colors, deliverables, now, workspaceId, works
   const paged = usePaged(deliverables);
   return (
     <View>
-      {paged.shown.map((deliverable, index) => (
-        <PressableRow key={deliverable.id} colors={colors} accessibilityRole={deliverable.url ? "link" : "button"}
-          accessibilityLabel={m.openItem(deliverable.title)}
-          onPress={() => void open(deliverableAttachment(deliverable))}
-          style={{ flexDirection: "row", gap: 8, paddingHorizontal: 10, paddingVertical: 8, borderTopWidth: index ? 1 : 0, borderTopColor: colors.border }}>
-          {/* Optical: centers the 14px icon on the 18px title line. */}
-          <View style={{ paddingTop: 2 }}><Icon name={attachmentIcon(deliverableAttachment(deliverable))} size={14} color={colors.foregroundMuted} /></View>
-          <View style={{ flex: 1, minWidth: 0, gap: 1 }}>
-            {/* What the agent found is the headline; the row itself is what opens. */}
-            <Text numberOfLines={3} style={{ color: colors.foreground, fontSize: 13, lineHeight: 18 }}>{deliverable.title}</Text>
-            {/* Just the name, ticket and age. The full path is one press of Copy away. */}
-            <Text numberOfLines={1} style={{ color: colors.foregroundMuted, fontSize: 12, lineHeight: 17 }}>
-              {[shortName(deliverableAttachment(deliverable)), deliverable.ticketLabel ?? deliverable.ticketId, formatClientAgo(locale, deliverable.addedAt, now)].filter(Boolean).join(" · ")}
-            </Text>
-          </View>
-          {deliverable.path ? (
-            // Optical: the 22px button centers on the 18px title line.
-            <PressScale accessibilityRole="button" accessibilityLabel={m.copyItemPath(deliverable.title)} hitSlop={6} outerStyle={{ marginTop: -2 }}
-              onPress={() => void copyPath(deliverableAttachment(deliverable))}
-              // A step above the row's own hover tint (surface1), so it reads as its own target.
-              style={({ pressed, hovered }) => ({ padding: 4, borderRadius: 4, backgroundColor: pressed ? colors.border : hovered ? colors.surface2 : "transparent" })}>
-              <Icon name="Copy" size={14} color={colors.foregroundMuted} />
-            </PressScale>
-          ) : (
-            <View style={{ paddingTop: 2 }}><Icon name="ExternalLink" size={14} color={colors.foregroundMuted} /></View>
-          )}
-        </PressableRow>
-      ))}
+      {paged.shown.map((deliverable, index) => {
+        const attachment = deliverableAttachment(deliverable);
+        const tab = opensInTab(attachment, { platform: Platform.OS });
+        return (
+          <PressableRow key={deliverable.id} colors={colors} accessibilityRole={deliverable.url ? "link" : "button"}
+            accessibilityLabel={m.openItem(deliverable.title)}
+            onPress={() => void open(attachment)}
+            style={{ flexDirection: "row", gap: ROW_GAP, paddingHorizontal: 10, paddingVertical: 8, borderTopWidth: index ? 1 : 0, borderTopColor: colors.border }}>
+            {/* Optical: centers the 14px icon on the 18px title line. */}
+            <View style={{ paddingTop: 2 }}><Icon name={attachmentIcon(attachment)} size={14} color={colors.foregroundMuted} /></View>
+            <View style={{ flex: 1, minWidth: 0, gap: 1 }}>
+              {/* What the agent found is the headline; the row itself is what opens. */}
+              <Text numberOfLines={3} style={{ color: colors.foreground, fontSize: 13, lineHeight: 18 }}>{deliverable.title}</Text>
+              {/* Just the name, ticket and age. The full path is one press of Copy away. */}
+              <Text numberOfLines={1} style={{ color: colors.foregroundMuted, fontSize: 12, lineHeight: 17 }}>
+                {[shortName(attachment), deliverable.ticketLabel ?? deliverable.ticketId, formatClientAgo(locale, deliverable.addedAt, now)].filter(Boolean).join(" · ")}
+              </Text>
+            </View>
+            {tab ? (
+              <TabButton colors={colors} label={m.openInTab(deliverable.title)} target={localLinkTarget(absolutePath(deliverable.path!, workspaceDirectory))} />
+            ) : null}
+            {deliverable.path ? (
+              // Optical: the 22px button centers on the 18px title line.
+              <PressScale accessibilityRole="button" accessibilityLabel={m.copyItemPath(deliverable.title)}
+                hitSlop={tab ? { top: 6, bottom: 6, left: BUTTON_PAIR_GAP / 2, right: 6 } : 6} outerStyle={{ marginTop: -2 }}
+                onPress={() => void copyPath(attachment)}
+                // A step above the row's own hover tint (surface1), so it reads as its own target.
+                style={({ pressed, hovered }) => ({ padding: 4, borderRadius: 4, backgroundColor: pressed ? colors.border : hovered ? colors.surface2 : "transparent" })}>
+                <Icon name="Copy" size={14} color={colors.foregroundMuted} />
+              </PressScale>
+            ) : (
+              <View style={{ paddingTop: 2 }}><Icon name="ExternalLink" size={14} color={colors.foregroundMuted} /></View>
+            )}
+          </PressableRow>
+        );
+      })}
       <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)), fullScreen: false } : null} />
     </View>
   );
 }
+
+// A Paseo Markdown link to a local file is the only way a plugin can open a tab.
+// A browser sends touches to a clear view; iOS ignores a view under 1% opaque.
+function TabButton({ colors, label, target }: { colors: Colors; label: string; target: string }) {
+  const linkTakesFocus = Platform.OS === "web";
+  const keepPressFromRow = () => {};
+  return (
+    <PressScale accessibilityRole="button" accessibilityLabel={label} focusable={!linkTakesFocus}
+      outerStyle={{ marginTop: -2, marginEnd: BUTTON_PAIR_GAP - ROW_GAP, alignSelf: "flex-start" }}
+      onPress={keepPressFromRow}
+      style={({ pressed, hovered }) => ({ padding: 4, borderRadius: 4, overflow: "hidden", backgroundColor: pressed ? colors.border : hovered ? colors.surface2 : "transparent" })}>
+      <Icon name="Maximize2" size={14} color={colors.foregroundMuted} />
+      <View style={{ position: "absolute", top: -24, start: -24, width: 72, height: 72, opacity: Platform.OS === "web" ? 0 : 0.011 }}>
+        <Markdown>{`[${TAP_AREA_FILL}](${target})`}</Markdown>
+      </View>
+    </PressScale>
+  );
+}

package/client/locales/en.ts

@@ -103,7 +103,8 @@ export const messages: ProgressMessages = {
   exitFullScreen: "Exit full screen",
   fitToWidth: "Fit to width",
   fitToScreen: "Fit to screen",
-  videoChanged: "the video changed while it was loading. Try again.",
+  fileChanged: "the file changed while it was loading. Try again.",
+  openInTab: (title: string) => `Open ${title} in a tab`,
   localHistory: "Run history stays on this computer.",
   historyStopped: "Runs will stay on this computer. Files already saved stay in the repo.",
   historyFailure: "Could not change where runs are saved.",
@@ -193,7 +194,8 @@ export const messages: ProgressMessages = {
   newVersion: (version: string) => `New in ${version}:`,
   updatedTo: (version: string) => `Updated to ${version}:`,
   whatsNewTitle: (version: string) => `What’s new in Progress ${version}`,
-  loadingVideo: (percent: number) => `Loading video, ${percent}%`,
+  loadingPieces: (kind, percent: number) => `Loading ${kind === "pdf" ? "PDF" : "video"}, ${percent}%`,
+  pdfTooLarge: (megabytes: number) => `This PDF is ${megabytes} MB, too large to show here.`,
   previewError: (error: string) => `Could not preview it: ${error}`,
   emptyFolder: (title: string) => `Nothing in ${title} yet.`,
   firstEntries: (count: number) => `Showing the first ${count}.`,

package/client/locales/zh-CN.ts

@@ -103,7 +103,8 @@ export const messages: ProgressMessages = {
   exitFullScreen: "退出全屏",
   fitToWidth: "适应宽度",
   fitToScreen: "适应屏幕",
-  videoChanged: "视频在加载过程中发生了变化。请重试。",
+  fileChanged: "文件在加载过程中发生了变化。请重试。",
+  openInTab: (title: string) => `在标签页中打开 ${title}`,
   localHistory: "运行记录保存在这台电脑上。",
   historyStopped: "运行记录将保存在这台电脑上。已保存的文件会保留在仓库中。",
   historyFailure: "无法更改运行记录的保存位置。",
@@ -193,7 +194,8 @@ export const messages: ProgressMessages = {
   newVersion: (version: string) => `${version} 的更新：`,
   updatedTo: (version: string) => `已更新到 ${version}：`,
   whatsNewTitle: (version: string) => `Progress ${version} 更新内容`,
-  loadingVideo: (percent: number) => `正在加载视频，${percent}%`,
+  loadingPieces: (kind, percent: number) => `正在加载${kind === "pdf" ? " PDF" : "视频"}，${percent}%`,
+  pdfTooLarge: (megabytes: number) => `此 PDF 有 ${megabytes} MB，太大，无法在这里显示。`,
   previewError: (error: string) => `无法预览：${error}`,
   emptyFolder: (title: string) => `${title} 中暂无内容。`,
   firstEntries: (count: number) => `仅显示前 ${count} 项。`,

package/client/messages.ts

@@ -1,3 +1,4 @@
+import type { PiecedKind } from "../shared/attachments";
 import type { TicketStatus } from "../shared/events";
 import type { QuestionMode } from "../shared/question-modes";
 import type { NoteKind } from "../shared/whats-new";
@@ -85,7 +86,8 @@ export interface ProgressMessages {
   exitFullScreen: string;
   fitToWidth: string;
   fitToScreen: string;
-  videoChanged: string;
+  fileChanged: string;
+  openInTab: (title: string) => string;
   localHistory: string;
   historyStopped: string;
   historyFailure: string;
@@ -175,7 +177,8 @@ export interface ProgressMessages {
   newVersion: (version: string) => string;
   updatedTo: (version: string) => string;
   whatsNewTitle: (version: string) => string;
-  loadingVideo: (percent: number) => string;
+  loadingPieces: (kind: PiecedKind, percent: number) => string;
+  pdfTooLarge: (megabytes: number) => string;
   previewError: (error: string) => string;
   emptyFolder: (title: string) => string;
   firstEntries: (count: number) => string;

package/client/pdf.tsx

@@ -0,0 +1,43 @@
+import { type PluginFile, type PluginFilePanelProps, useFileUrl } from "@getpaseo/plugin/client";
+import { DocumentFrame, Loading } from "@getpaseo/plugin/client/ui";
+import React from "react";
+import { Text, View, type ViewStyle } from "react-native";
+import { errorText } from "./errors";
+import { useProgressLanguage } from "./language";
+import { type FileBlob, useObjectUrl } from "./pieces";
+
+type Colors = PluginFilePanelProps["theme"]["colors"];
+
+export function PdfFrame({ blob, style }: { blob: FileBlob; style: ViewStyle }) {
+  const url = useObjectUrl(blob);
+  return <View style={[style, { overflow: "hidden" }]}>{url ? <DocumentFrame url={url} /> : null}</View>;
+}
+
+export const TAB_LIMIT_BYTES: Record<"web" | "native", number> = {
+  web: 100 * 1024 * 1024,
+  native: 25 * 1024 * 1024,
+};
+
+export function PdfPanel({ file, layout, theme }: PluginFilePanelProps) {
+  const { messages: m } = useProgressLanguage();
+  const limit = TAB_LIMIT_BYTES[layout.platform === "web" ? "web" : "native"];
+  if (file.size > limit) return <Note colors={theme.colors}>{m.pdfTooLarge(Math.round(file.size / 1024 / 1024))}</Note>;
+  return <PdfFile file={file} colors={theme.colors} />;
+}
+
+function PdfFile({ file, colors }: { file: PluginFile; colors: Colors }) {
+  const { messages: m } = useProgressLanguage();
+  const url = useFileUrl(file);
+  if (url.status === "loading") return <Loading />;
+  if (url.status === "error") return <Note colors={colors} alert>{m.previewError(errorText(url.error, m.unknownError))}</Note>;
+  return <View style={{ flex: 1, minHeight: 0 }}><DocumentFrame url={url.url} /></View>;
+}
+
+function Note({ colors, alert = false, children }: { colors: Colors; alert?: boolean; children: string }) {
+  return (
+    <View style={{ flex: 1, alignItems: "center", justifyContent: "center", padding: 24 }}>
+      <Text accessibilityRole={alert ? "alert" : undefined} selectable
+        style={{ maxWidth: 360, textAlign: "center", color: alert ? colors.statusDanger : colors.foregroundMuted, fontSize: 13, lineHeight: 19 }}>{children}</Text>
+    </View>
+  );
+}

package/client/pieces.ts

@@ -0,0 +1,47 @@
+import { useEffect, useState } from "react";
+
+export const browser = globalThis as unknown as {
+  atob(data: string): string;
+  Blob: new (parts: Uint8Array[], options: { type: string }) => FileBlob;
+  URL: { createObjectURL(blob: FileBlob): string; revokeObjectURL(url: string): void };
+};
+
+export type FileBlob = { readonly size: number };
+
+export class FileChangedError extends Error {}
+
+export async function loadPieces({ bytes, mimeType, readPiece, onProgress }: {
+  bytes: number;
+  mimeType: string;
+  readPiece(offset: number): Promise<{ data: string; bytes: number }>;
+  onProgress(loaded: number): void;
+}): Promise<FileBlob> {
+  const pieces: Uint8Array[] = [];
+  let loaded = 0;
+  while (loaded < bytes) {
+    const piece = await readPiece(loaded);
+    const decoded = decode(piece.data);
+    if (piece.bytes !== bytes || !decoded.length) throw new FileChangedError("the file changed while it was loading. Try again.");
+    pieces.push(decoded);
+    loaded += decoded.length;
+    onProgress(loaded);
+  }
+  return new browser.Blob(pieces, { type: mimeType });
+}
+
+function decode(data: string): Uint8Array {
+  const binary = browser.atob(data);
+  const bytes = new Uint8Array(binary.length);
+  for (let index = 0; index < binary.length; index++) bytes[index] = binary.charCodeAt(index);
+  return bytes;
+}
+
+export function useObjectUrl(blob: FileBlob): string | null {
+  const [url, setUrl] = useState<string | null>(null);
+  useEffect(() => {
+    const created = browser.URL.createObjectURL(blob);
+    setUrl(created);
+    return () => browser.URL.revokeObjectURL(created);
+  }, [blob]);
+  return url;
+}

package/client/preview.tsx

@@ -5,11 +5,13 @@ import React, { useEffect, useMemo, useRef, useState } from "react";
 import { ActivityIndicator, Image, type LayoutChangeEvent, 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";
+import { folderAttachments, isFolder, isPieced, PDF_MIME_TYPE, previewKind } from "../shared/attachments";
 import { canOpenOnHost, previewDeliverable, readDeliverablePiece } from "../shared/rpc";
 import { PressScale } from "./motion";
 import { imageOutline, raised } from "./surfaces";
-import { loadVideo, VideoChangedError, VideoPlayer } from "./video";
+import { FileChangedError, loadPieces } from "./pieces";
+import { PdfFrame } from "./pdf";
+import { videoRatio, VideoPlayer } from "./video";
 import { useProgressLanguage } from "./language";
 
 type Colors = PluginWorkspacePanelProps["theme"]["colors"];
@@ -56,7 +58,6 @@ export function PreviewContent({ colors, attachment, workspaceId, workspaceDirec
     queryFn: () => checkHost({ workspaceId, workspaceDirectory }),
     staleTime: Infinity,
   }).data?.canOpen === true;
-  // How much of a video has arrived, for the line under the spinner.
   const loadingKey = (target: Attachment) => ["progress", "preview-loading", workspaceId, target.ref, target.path];
   const previewQuery = (target: Attachment) => ({
     queryKey: ["progress", "preview", workspaceId, target.ref, target.path],
@@ -67,20 +68,17 @@ export function PreviewContent({ colors, attachment, workspaceId, workspaceDirec
     queryFn: async () => {
       const data = await fetchPreview({ workspaceId, workspaceDirectory, ref: target.ref });
       if (data.kind === "image") return { ...data, ...await imageSize(data.dataUri) };
-      if (data.kind !== "video") return data;
+      if (data.kind !== "video" && data.kind !== "pdf") return data;
       queryClient.setQueryData(loadingKey(target), 0);
-      const video = await loadVideo({
+      const blob = await loadPieces({
         bytes: data.bytes,
-        mimeType: data.mimeType,
+        mimeType: data.kind === "video" ? data.mimeType : PDF_MIME_TYPE,
         readPiece: (offset) => readPiece({ workspaceId, workspaceDirectory, ref: target.ref, offset }),
         onProgress: (loaded) => queryClient.setQueryData(loadingKey(target), loaded / data.bytes),
       });
-      return { ...data, video, ratio: video.ratio };
+      return data.kind === "video" ? { ...data, blob, ratio: await videoRatio(blob) } : { ...data, blob };
     },
-    // A video isn't refetched while it's open: that would load it again and stop it playing.
-    staleTime: previewKind(target.path ?? "") === "video" ? Infinity : 30_000,
-    // Images arrive as data URIs up to ~13 MB and videos run to 200 MB; let them
-    // go soon after the dialog moves on.
+    staleTime: isPieced(previewKind(target.path ?? "")) ? Infinity : 30_000,
     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.
@@ -92,8 +90,7 @@ export function PreviewContent({ colors, attachment, workspaceId, workspaceDirec
   const stepping = preview.isPlaceholderData;
   const loading = useQuery({ queryKey: loadingKey(attachment), queryFn: () => 0, enabled: false }).data;
   // Load the next file in the direction of travel ahead of time, so stepping is
-  // instant without holding both neighbors in memory. Not a video: it can be
-  // 200 MB, so it loads only when opened.
+  // instant without holding both neighbors in memory.
   const items = gallery?.items ?? [];
   const index = items.findIndex((item) => item.ref === attachment.ref);
   const lastIndex = useRef(index);
@@ -102,7 +99,7 @@ export function PreviewContent({ colors, attachment, workspaceId, workspaceDirec
     const step = (lastIndex.current - index + items.length) % items.length === 1 ? -1 : 1;
     lastIndex.current = index;
     const next = items[(index + step + items.length) % items.length];
-    if (previewKind(next.path ?? "") !== "video") void queryClient.prefetchQuery(previewQuery(next));
+    if (!isPieced(previewKind(next.path ?? ""))) void queryClient.prefetchQuery(previewQuery(next));
   }, [attachment.ref, items.length]);
   // Previous and Next, wrapping at the ends. Left and right arrows do the same.
   const step = (offset: number) => gallery?.onSelect(items[(index + offset + items.length) % items.length]);
@@ -145,8 +142,9 @@ export function PreviewContent({ colors, attachment, workspaceId, workspaceDirec
     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;
+  const maxMediaHeight = preview.data?.kind === "video" || preview.data?.kind === "pdf" ? Math.min(640, Math.max(200, room)) : 640;
+  const mediaFrame = { borderRadius: 6, ...imageOutline(colors), backgroundColor: colors.surface1, opacity: stepping ? 0.6 : 1 } as const;
+  const mediaStyle = { width: "100%", aspectRatio, maxHeight: maxMediaHeight, ...mediaFrame } as const;
   // Markdown's height depends on the user's text size, which a plugin can't read,
   // so only a file far too tall for any size is long before it's drawn. Anything
   // else is measured, and once it's too tall it stays long: Paseo remounting the
@@ -167,14 +165,13 @@ export function PreviewContent({ colors, attachment, workspaceId, workspaceDirec
   const measure = !long && !stepping ? (event: LayoutChangeEvent) => {
     if (event.nativeEvent.layout.height > room) queryClient.setQueryData(longKey, true);
   } : undefined;
-  // How far a video has loaded: under the spinner, or in place of the path while
-  // the last file stays on screen, so nothing moves.
-  const videoLoading = preview.isFetching && loading !== undefined && loading < 1 ? m.loadingVideo(Math.floor(loading * 100)) : null;
+  const fileKind = previewKind(attachment.path ?? "");
+  const piecesLoading = isPieced(fileKind) && preview.isFetching && loading !== undefined && loading < 1 ? m.loadingPieces(fileKind, Math.floor(loading * 100)) : null;
   const caption = { color: colors.foregroundMuted, fontSize: 12, lineHeight: 17 } as const;
   const loadingState = (
     <View style={{ alignItems: "center", gap: 8, padding: 24 }}>
       <ActivityIndicator color={colors.foregroundMuted} accessibilityLabel={m.loadingPreview} />
-      {videoLoading ? <Text style={[caption, { fontVariant: ["tabular-nums"] }]}>{videoLoading}</Text> : null}
+      {piecesLoading ? <Text style={[caption, { fontVariant: ["tabular-nums"] }]}>{piecesLoading}</Text> : null}
     </View>
   );
   const truncatedNote = (paddingTop: number) => <Text style={{ color: colors.foregroundMuted, fontSize: 11, lineHeight: 16, paddingTop }}>{m.truncatedText}{canOpen ? m.openRest : ""}</Text>;
@@ -183,7 +180,7 @@ export function PreviewContent({ colors, attachment, workspaceId, workspaceDirec
       {preview.isPending ? loadingState : null}
       {preview.error ? (
         <Text accessibilityRole="alert" selectable style={{ color: colors.statusDanger, fontSize: 12, lineHeight: 18 }}>
-          {m.previewError(preview.error instanceof VideoChangedError ? m.videoChanged : errorText(preview.error, m.unknownError))}
+          {m.previewError(preview.error instanceof FileChangedError ? m.fileChanged : errorText(preview.error, m.unknownError))}
         </Text>
       ) : null}
       {preview.data?.kind === "text" ? (
@@ -212,14 +209,15 @@ export function PreviewContent({ colors, attachment, workspaceId, workspaceDirec
           <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}
+      {preview.data?.kind === "video" ? <VideoPlayer blob={preview.data.blob} label={attachment.title} style={mediaStyle} /> : null}
+      {preview.data?.kind === "pdf" ? <PdfFrame blob={preview.data.blob} style={{ width: "100%", height: maxMediaHeight, ...mediaFrame }} /> : null}
     </>
   );
   // The path as a caption under the file, where it has the full width, with Copy
   // beside it so it can go into a message without leaving the dialog. A long
   // file scrolls above it, so it stays in view with the actions.
-  const path = !preview.isPending && videoLoading ? (
-    <Text style={[caption, { fontVariant: ["tabular-nums"] }]}>{videoLoading}</Text>
+  const path = !preview.isPending && piecesLoading ? (
+    <Text style={[caption, { fontVariant: ["tabular-nums"] }]}>{piecesLoading}</Text>
   ) : (
     <View style={{ flexDirection: "row", alignItems: "center", gap: 6 }}>
       <Text selectable numberOfLines={1} ellipsizeMode="middle" style={[caption, { flex: 1, minWidth: 0 }]}>
@@ -380,9 +378,10 @@ 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" | "html" } | { kind: "text"; text: string } | { kind: "folder"; entries: unknown[]; truncated: boolean } | undefined, aspectRatio: number, maxMediaHeight: number): number {
+function estimatedHeight(data: { kind: "image" | "video" | "pdf" | "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 === "pdf") return maxMediaHeight;
   if (data.kind !== "text") return Math.min(CONTENT_WIDTH / aspectRatio, maxMediaHeight);
   const lines = data.text.split("\n").reduce((sum, line) => sum + Math.max(1, Math.ceil(line.length / CHARS_PER_LINE)), 0);
   return lines * 18 + 20;

package/client/video.tsx

@@ -1,9 +1,7 @@
-import React, { useEffect, useState } from "react";
+import React from "react";
 import { View, type ViewStyle } from "react-native";
+import { browser, type FileBlob, useObjectUrl } from "./pieces";
 
-// Videos play only in Paseo's desktop app (see canPreview), which is a browser
-// underneath. The plugin compiles without the DOM's types, so these are just the
-// browser APIs used here.
 interface VideoElement {
   preload: string;
   src: string;
@@ -12,57 +10,13 @@ interface VideoElement {
   onloadedmetadata: (() => void) | null;
   onerror: (() => void) | null;
 }
-const browser = globalThis as unknown as {
-  atob(data: string): string;
-  Blob: new (parts: Uint8Array[], options: { type: string }) => VideoBlob;
-  URL: { createObjectURL(blob: VideoBlob): string; revokeObjectURL(url: string): void };
-  document: { createElement(tag: "video"): VideoElement };
-};
-
-// A whole video held in the app, ready to play.
-export type VideoBlob = { readonly size: number };
-
-export interface LoadedVideo {
-  blob: VideoBlob;
-  // Width over height, or null when the app can't read it (the box stays 16:10).
-  ratio: number | null;
-}
-
-export class VideoChangedError extends Error {}
-
-// Fetches a video piece by piece into one blob, then reads its shape.
-export async function loadVideo({ bytes, mimeType, readPiece, onProgress }: {
-  bytes: number;
-  mimeType: string;
-  readPiece(offset: number): Promise<{ data: string; bytes: number }>;
-  onProgress(loaded: number): void;
-}): Promise<LoadedVideo> {
-  const pieces: Uint8Array[] = [];
-  let loaded = 0;
-  while (loaded < bytes) {
-    const piece = await readPiece(loaded);
-    const decoded = decode(piece.data);
-    if (piece.bytes !== bytes || !decoded.length) throw new VideoChangedError("the video changed while it was loading. Try again.");
-    pieces.push(decoded);
-    loaded += decoded.length;
-    onProgress(loaded);
-  }
-  const blob = new browser.Blob(pieces, { type: mimeType });
-  return { blob, ratio: await videoRatio(blob) };
-}
-
-function decode(data: string): Uint8Array {
-  const binary = browser.atob(data);
-  const bytes = new Uint8Array(binary.length);
-  for (let index = 0; index < binary.length; index++) bytes[index] = binary.charCodeAt(index);
-  return bytes;
-}
+const page = globalThis as unknown as { document: { createElement(tag: "video"): VideoElement } };
 
 // Reads the size from the video's header without playing it. Gives up after a
 // few seconds, so a video the app can't decode still shows its player and error.
-function videoRatio(blob: VideoBlob): Promise<number | null> {
+export function videoRatio(blob: FileBlob): Promise<number | null> {
   const url = browser.URL.createObjectURL(blob);
-  const video = browser.document.createElement("video");
+  const video = page.document.createElement("video");
   return new Promise<number | null>((resolve) => {
     setTimeout(() => resolve(null), 5_000);
     video.onloadedmetadata = () => resolve(video.videoWidth && video.videoHeight ? video.videoWidth / video.videoHeight : null);
@@ -77,13 +31,8 @@ function videoRatio(blob: VideoBlob): Promise<number | null> {
 }
 
 // The browser's own player, with its controls, in a box styled like an image's.
-export function VideoPlayer({ video, label, style }: { video: LoadedVideo; label: string; style: ViewStyle }) {
-  const [url, setUrl] = useState<string | null>(null);
-  useEffect(() => {
-    const created = browser.URL.createObjectURL(video.blob);
-    setUrl(created);
-    return () => browser.URL.revokeObjectURL(created);
-  }, [video.blob]);
+export function VideoPlayer({ blob, label, style }: { blob: FileBlob; label: string; style: ViewStyle }) {
+  const url = useObjectUrl(blob);
   return (
     <View style={[style, { overflow: "hidden" }]}>
       {url ? <video src={url} controls playsInline aria-label={label} style={{ width: "100%", height: "100%", display: "block", objectFit: "contain" }} /> : null}

package/index.client.tsx

@@ -1,9 +1,12 @@
 import type { PluginClientContext } from "@getpaseo/plugin/client";
+import { Platform } from "react-native";
 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";
+import { PdfPanel } from "./client/pdf";
+import { showsPdfs } from "./shared/attachments";
 
 const SETTINGS_ID = "settings";
 
@@ -28,6 +31,13 @@ export default function contribute(client: PluginClientContext) {
     },
   });
 
+  const stopPdf = showsPdfs(Platform.OS) ? client.addFilePanel({
+    id: "pdf",
+    title: "PDF",
+    icon: "BookOpenText",
+    files: { extensions: ["pdf"] },
+    Component: (props) => <ProgressLanguageProvider><PdfPanel {...props} /></ProgressLanguageProvider>,
+  }) : () => {};
   const stopPage = addPageScreen(client);
   const stopSettings = client.addSettingsScreen({
     id: SETTINGS_ID,
@@ -38,6 +48,7 @@ export default function contribute(client: PluginClientContext) {
 
   return () => {
     stopPage();
+    void stopPdf();
     void stopSettings();
     void stopPanel();
     void stopCommand();

package/package.json

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

@@ -5,7 +5,7 @@ import { open, readdir, readFile, realpath, stat } from "node:fs/promises";
 import { homedir, hostname } from "node:os";
 import nodePath, { delimiter, dirname, join, relative, resolve } from "node:path";
 import { promisify } from "node:util";
-import { findAttachment, type FolderEntry, imageMimeType, previewKind, splitRef, textFormat, videoMimeType } from "../shared/attachments.ts";
+import { findAttachment, type FolderEntry, imageMimeType, isPieced, type PiecedKind, previewKind, splitRef, textFormat, videoMimeType } from "../shared/attachments.ts";
 import { prepareMarkdown, previewText } from "../shared/markdown.ts";
 import { readProgress } from "./progress-file.ts";
 import { findRoot, outside } from "./paths.ts";
@@ -82,17 +82,20 @@ export const MAX_PREVIEW_BYTES = 10 * 1024 * 1024;
 // Text past this is cut off in the preview; the full file is a click away.
 export const MAX_PREVIEW_TEXT_BYTES = 256 * 1024;
 
-// A video travels in pieces, so it's capped by what the app can hold, not the socket.
-export const MAX_PREVIEW_VIDEO_BYTES = 200 * 1024 * 1024;
+export const PIECED_LIMIT_BYTES: Record<PiecedKind, number> = {
+  video: 200 * 1024 * 1024,
+  pdf: 100 * 1024 * 1024,
+};
 
 // Small enough that one piece doesn't hold up the agent output sharing the socket.
-export const VIDEO_PIECE_BYTES = 4 * 1024 * 1024;
+export const PIECE_BYTES = 4 * 1024 * 1024;
 
 export const MAX_FOLDER_ENTRIES = 500;
 
 export type Preview =
   | { kind: "image"; dataUri: string; bytes: number }
   | { kind: "video"; mimeType: string; bytes: number }
+  | { kind: "pdf"; bytes: number }
   | { kind: "text"; text: string; bytes: number; truncated: boolean }
   | { kind: "markdown"; markdown: string; bytes: number; truncated: boolean }
   | { kind: "html"; html: string; bytes: number }
@@ -103,11 +106,11 @@ export async function previewDeliverable(directory: string, id: string): Promise
   const stats = await stat(realTarget);
   if (stats.isDirectory()) return { kind: "folder", ...(await listFolder(realTarget)) };
   const kind = previewKind(realTarget);
-  if (!kind) throw new Error(`${path} isn't an image, video, text or HTML file, so it can't be previewed.`);
+  if (!kind) throw new Error(`${path} isn't an image, video, PDF, 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));
-    return { kind, mimeType: videoMimeType(realTarget)!, bytes: size };
+  if (isPieced(kind)) {
+    if (size > PIECED_LIMIT_BYTES[kind]) throw new Error(tooLarge(path, size));
+    return kind === "video" ? { kind, mimeType: videoMimeType(realTarget)!, bytes: size } : { kind, bytes: size };
   }
   if (kind === "text") {
     // Read only what's shown, so a huge log doesn't load whole.
@@ -195,16 +198,15 @@ function tooLarge(path: string, size: number): string {
   return `${path} is ${Math.round(size / 1024 / 1024)} MB, too large to preview.`;
 }
 
-// One piece of a video, from `offset`. Resolved by reference each time, like the
-// preview, so a piece can only come from a video the agent recorded.
 export async function readDeliverablePiece(directory: string, id: string, offset: number): Promise<{ data: string; bytes: number }> {
   const { path, realTarget } = await resolveAttachment(directory, id, "previewed");
-  if (previewKind(realTarget) !== "video") throw new Error(`${path} isn't a video.`);
+  const kind = previewKind(realTarget);
+  if (!isPieced(kind)) throw new Error(`${path} isn't a video or PDF.`);
   const file = await open(realTarget);
   try {
     const { size } = await file.stat();
-    if (size > MAX_PREVIEW_VIDEO_BYTES) throw new Error(tooLarge(path, size));
-    const length = Math.max(0, Math.min(VIDEO_PIECE_BYTES, size - offset));
+    if (size > PIECED_LIMIT_BYTES[kind]) throw new Error(tooLarge(path, size));
+    const length = Math.max(0, Math.min(PIECE_BYTES, size - offset));
     if (!length) return { data: "", bytes: size };
     const { buffer, bytesRead } = await file.read({ buffer: Buffer.alloc(length), position: offset });
     return { data: buffer.subarray(0, bytesRead).toString("base64"), bytes: size };

package/shared/attachments.ts

@@ -97,12 +97,25 @@ export function textFormat(path: string): "markdown" | "plain" | null {
   return TEXT_FORMATS[extension(path) ?? ""] ?? null;
 }
 
-export function previewKind(path: string): "image" | "video" | "text" | "html" | null {
+export type PiecedKind = "video" | "pdf";
+export type PreviewKind = "image" | PiecedKind | "text" | "html";
+
+export function isPieced(kind: PreviewKind | null): kind is PiecedKind {
+  return kind === "video" || kind === "pdf";
+}
+
+export const PDF_MIME_TYPE = "application/pdf";
+
+const DOCUMENT_KINDS: Record<string, "pdf" | "html"> = {
+  ".pdf": "pdf",
+  ".html": "html",
+  ".htm": "html",
+};
+
+export function previewKind(path: string): PreviewKind | null {
   if (imageMimeType(path)) return "image";
   if (videoMimeType(path)) return "video";
-  const ext = extension(path) ?? "";
-  if (ext === ".html" || ext === ".htm") return "html";
-  return textFormat(path) ? "text" : null;
+  return DOCUMENT_KINDS[extension(path) ?? ""] ?? (textFormat(path) ? "text" : null);
 }
 
 export function isFolder(attachment: Attachment): boolean {
@@ -128,18 +141,26 @@ export function folderAttachments(folder: Attachment, entries: FolderEntry[]): A
   return entries.map((entry) => ({ ref: entryRef(folder.ref, entry.name), title: entry.name, path: `${base}${entry.name}${entry.folder ? "/" : ""}` }));
 }
 
-// Whether the preview dialog can show it. Only a browser draws SVG and plays
-// video: Paseo's desktop app can, the phone apps can't, so there they open on
-// the host like any other file.
+// Whether the preview dialog can show it. Only a browser draws SVG, plays video
+// and shows a PDF from memory: Paseo's desktop and web apps can, the phone apps
+// can't, so there they open on the host like any other file.
 export function canPreview(attachment: Attachment, where: { browser: boolean }): 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;
+  if (kind === "video" || kind === "pdf" || (kind === "image" && extension(attachment.path) === ".svg")) return where.browser;
   return kind !== null;
 }
 
+const PREVIEW_ICON: Record<PreviewKind, string> = {
+  image: "Image",
+  video: "Video",
+  pdf: "BookOpenText",
+  text: "FileText",
+  html: "FileCode",
+};
+
 const KIND_ICON: Record<NonNullable<Deliverable["kind"]>, string> = {
   file: "File",
   folder: "Folder",
@@ -155,7 +176,7 @@ 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" : kind === "html" ? "FileCode" : /[\/]$/.test(attachment.path) ? "Folder" : "File";
+  return kind ? PREVIEW_ICON[kind] : /[\/]$/.test(attachment.path) ? "Folder" : "File";
 }
 
 // An HTML page is too wide for the dialog, so where the host can't open it the
@@ -164,6 +185,15 @@ export function opensAsPage(attachment: Attachment, where: { browser: boolean })
   return where.browser && Boolean(attachment.path) && previewKind(attachment.path!) === "html";
 }
 
+// Android's viewer has no PDF support.
+export function showsPdfs(platform: string): boolean {
+  return platform !== "android";
+}
+
+export function opensInTab(attachment: Attachment, where: { platform: string }): boolean {
+  return showsPdfs(where.platform) && previewKind(attachment.path ?? "") === "pdf";
+}
+
 // The short name people recognize: a file or folder's own name, or a link's site.
 export function shortName(attachment: Attachment): string {
   if (attachment.url) {

package/shared/markdown.ts

@@ -348,6 +348,10 @@ function decode(text: string): string {
   }
 }
 
+export function localLinkTarget(path: string): string {
+  return encodeTarget(/^[A-Za-z]:[\\/]/.test(path) ? path.replace(/\\/g, "/") : path);
+}
+
 // A Windows drive's colon stays, so Paseo still sees `C:/`.
 function encodeTarget(path: string): string {
   const drive = /^[A-Za-z]:\//.exec(path)?.[0] ?? "";

package/shared/rpc.ts

@@ -142,9 +142,7 @@ export const canOpenOnHost = defineRpc({
   output: z.object({ canOpen: z.boolean() }),
 });
 
-// An image, text, Markdown 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).
+// An image, text, Markdown or HTML file's contents, for the preview dialog.
 export const previewDeliverable = defineRpc({
   name: "progress.deliverable.preview",
   input: z.object({
@@ -156,6 +154,7 @@ export const previewDeliverable = defineRpc({
   output: z.discriminatedUnion("kind", [
     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("pdf"), bytes: z.number() }),
     z.object({ kind: z.literal("text"), text: z.string(), bytes: z.number(), truncated: z.boolean() }),
     z.object({ kind: z.literal("markdown"), markdown: z.string(), bytes: z.number(), truncated: z.boolean() }),
     z.object({ kind: z.literal("html"), html: z.string(), bytes: z.number() }),
@@ -163,8 +162,6 @@ export const previewDeliverable = defineRpc({
   ]),
 });
 
-// One piece of a video from `offset`, base64, with the file's size so the client
-// knows when it has it all.
 export const readDeliverablePiece = defineRpc({
   name: "progress.deliverable.piece",
   input: z.object({