@stevecastaneda/paseo-progress 1.10.0 → 1.12.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.11 or later, and Node.js 22.18 or later on the computer running the Paseo daemon.
+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, 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 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.
 
 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

@@ -2,7 +2,7 @@
 
 # Progress
 
-A plugin for Paseo 0.11 and later that gives each worktree a live progress dashboard. Agents record progress with the `paseo-progress` command, which adds one line per change to the worktree's progress file. That file lives outside the repo, so git never sees it. The **Progress** panel draws the dashboard from that file and updates by itself.
+A plugin for Paseo 0.13 and later that gives each worktree a live progress dashboard. Agents record progress with the `paseo-progress` command, which adds one line per change to the worktree's progress file. That file lives outside the repo, so git never sees it. The **Progress** panel draws the dashboard from that file and updates by itself.
 
 <img src="images/1-panel.png" alt="The Progress panel in Explorer" width="440">
 
@@ -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 with Paseo 0.13 or later, Progress opens in Explorer too. Older phone apps have no Explorer, so there it opens as a tab of its own. 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 and videos preview on desktop; on phones they open on the daemon host.
 
 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; **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. 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.
@@ -145,6 +145,17 @@ The progress file, `progress.jsonl`, holds one JSON event per line, each with a
 
 ## Changelog
 
+### 1.12.0
+
+- [Improved] **Markdown deliverables show formatted.** A `.md` or `.markdown` file now opens in the preview with its headings, lists, tables, code blocks and images drawn by Paseo's own Markdown view. An image with a relative path loads from the file's own folder. A link to another file in the worktree opens that file in Paseo, except on a phone, where Paseo doesn't open file links from a plugin's dialog. MDX files still show as plain text, because Paseo would hide their components.
+- [Improved] **Ticket write-ups show formatted.** A ticket's write-up is drawn the same way. Its headings stay smaller than the ticket's title, and front matter stays out of the short version.
+- [Fixed] **Long previews end on a whole line.** A text file over 256 KB used to stop wherever the 256 KB ran out, sometimes in the middle of a character. Now it stops at the last whole line, above the note that says the file goes on.
+- [Improved] **Needs Paseo 0.13 or later.** Progress now uses Paseo 0.13's plugin interface and its Markdown view. On an older Paseo, the version you already have keeps working.
+
+### 1.11.0
+
+- [Improved] **Agents can change their recommendation.** When you ask an agent about an open question and explaining it changes the agent's mind, it can now change its recommendation, and the question card shows the new one. In Keep building mode, the agent also switches the work it already built to the new recommendation.
+
 ### 1.10.0
 
 - [Improved] **Progress opens in Explorer on phones.** On Paseo 0.13 or later, the phone app opens Progress in Explorer, as the desktop app does, and lists it in Explorer's New tab menu. If a Progress tab from an earlier version is still open on your phone, you can close it.

package/client/attachments.tsx

@@ -1,5 +1,5 @@
 import { openExternalUrl, type PluginWorkspacePanelProps, useRpc } from "@getpaseo/plugin/client";
-import { copyText, Icon, useToast } from "@getpaseo/plugin/client/react-native";
+import { copyText, Icon, useToast } from "@getpaseo/plugin/client/ui";
 import React from "react";
 import { Platform, Text, View } from "react-native";
 import { type Attachment, attachmentIcon, canPreview, opensAsPage, shortName } from "../shared/attachments";

package/client/blocks.tsx

@@ -0,0 +1,41 @@
+import { type PluginWorkspacePanelProps } from "@getpaseo/plugin/client";
+import React from "react";
+import { Platform, Text, View } from "react-native";
+import { type Block, type Span } from "../shared/blocks";
+
+type Colors = PluginWorkspacePanelProps["theme"]["colors"];
+const MONO = Platform.OS === "ios" ? "Menlo" : "monospace";
+
+export function BlockView({ colors, block, first }: { colors: Colors; block: Block; first: boolean }) {
+  switch (block.kind) {
+    case "heading":
+      return (
+        // A step under the section's own 13px title: smaller and muted, set apart from the body by weight.
+        <Text accessibilityRole="header" selectable style={{ color: colors.foregroundMuted, fontSize: 12, lineHeight: 17, fontWeight: "600", marginTop: first ? 0 : 6 }}>
+          <Spans colors={colors} spans={block.spans} />
+        </Text>
+      );
+    case "item":
+      return (
+        <View style={{ flexDirection: "row", gap: 6, paddingStart: block.depth * 14 }}>
+          <Text style={{ minWidth: 10, color: colors.foregroundMuted, fontSize: 13, lineHeight: 19, fontVariant: ["tabular-nums"] }}>{block.marker}</Text>
+          <Text selectable style={{ flex: 1, color: colors.foreground, fontSize: 13, lineHeight: 19 }}><Spans colors={colors} spans={block.spans} /></Text>
+        </View>
+      );
+    case "code":
+      return (
+        <View style={{ padding: 8, borderRadius: 6, backgroundColor: colors.surface0 }}>
+          <Text selectable style={{ color: colors.foreground, fontFamily: MONO, fontSize: 12, lineHeight: 18 }}>{block.text}</Text>
+        </View>
+      );
+    default:
+      return <Text selectable style={{ color: colors.foreground, fontSize: 13, lineHeight: 19 }}><Spans colors={colors} spans={block.spans} /></Text>;
+  }
+}
+
+export function Spans({ colors, spans }: { colors: Colors; spans: Span[] }) {
+  return <>{spans.map((span, index) => span.code
+    ? <Text key={index} style={{ fontFamily: MONO, fontSize: 12, color: colors.foreground }}>{span.text}</Text>
+    : span.strong ? <Text key={index} style={{ fontWeight: "600" }}>{span.text}</Text>
+    : <React.Fragment key={index}>{span.text}</React.Fragment>)}</>;
+}

package/client/deliverables.tsx

@@ -1,5 +1,5 @@
 import type { PluginWorkspacePanelProps } from "@getpaseo/plugin/client";
-import { Icon } from "@getpaseo/plugin/client/react-native";
+import { Icon } from "@getpaseo/plugin/client/ui";
 import React, { useState } from "react";
 import { Text, View } from "react-native";
 import type { Deliverable } from "../shared/dashboard";

package/client/dialog-stack.tsx

@@ -1,5 +1,5 @@
 import type { PluginWorkspacePanelProps } from "@getpaseo/plugin/client";
-import { Icon, Modal } from "@getpaseo/plugin/client/react-native";
+import { Icon, Modal } from "@getpaseo/plugin/client/ui";
 import React, { useEffect, useRef, useState } from "react";
 import { Platform } from "react-native";
 import { opensAsPage } from "../shared/attachments";
@@ -98,7 +98,7 @@ export function StackedDialog({ colors, root, onClose, questions = [], dashboard
           onOpenOnHost={() => { onClose(); void opener.openOnHost(preview.attachment); }}
           onCopyPath={() => void opener.copyPath(preview.attachment)} onBack={back}
           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}
+          onLong={setPreviewLong} ownScroll={previewLong || preview.fullScreen} fullScreen={preview.fullScreen} leftFullScreen={preview.leftFullScreen === true} onFullScreen={setFullScreen}
           onOpenEntry={openAttachment} />
       ) : (
         <>

package/client/history.tsx

@@ -1,5 +1,5 @@
 import { type PluginWorkspacePanelProps, useRpc } from "@getpaseo/plugin/client";
-import { Icon, Modal, useToast } from "@getpaseo/plugin/client/react-native";
+import { Icon, Modal, useToast } from "@getpaseo/plugin/client/ui";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import React, { useState } from "react";
 import { ActivityIndicator, ScrollView, Text, TextInput, View } from "react-native";

package/client/launcher.tsx

@@ -1,5 +1,5 @@
 import { type PluginWorkspacePanelProps, useRpc } from "@getpaseo/plugin/client";
-import { Icon, useToast } from "@getpaseo/plugin/client/react-native";
+import { Icon, useToast } from "@getpaseo/plugin/client/ui";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import React from "react";
 import { Text, View } from "react-native";

package/client/panel.tsx

@@ -1,5 +1,5 @@
 import { type PluginWorkspacePanelProps, useRpc, useWorkspace } from "@getpaseo/plugin/client";
-import { Icon } from "@getpaseo/plugin/client/react-native";
+import { Icon } from "@getpaseo/plugin/client/ui";
 import { DeliverablesList } from "./deliverables";
 import { LauncherBanner, SkillBanner } from "./launcher";
 import { WhatsNewBanner } from "./whats-new";

package/client/pill-popover.tsx

@@ -1,5 +1,5 @@
 import { type PluginButtonContentProps, useWorkspace } from "@getpaseo/plugin/client";
-import { Icon, ScrollView } from "@getpaseo/plugin/client/react-native";
+import { Icon, ScrollView } from "@getpaseo/plugin/client/ui";
 import React, { useRef, useState } from "react";
 import { Text, View } from "react-native";
 import type { Dashboard } from "../shared/dashboard";

package/client/pills.tsx

@@ -1,5 +1,5 @@
 import type { PluginButtonContentProps, PluginButtonIconProps, PluginButtonRegistration, PluginClientContext } from "@getpaseo/plugin/client";
-import { Icon } from "@getpaseo/plugin/client/react-native";
+import { Icon } from "@getpaseo/plugin/client/ui";
 import React, { useEffect, useSyncExternalStore } from "react";
 import { Platform } from "react-native";
 import { type AttentionResult, getAttention } from "../shared/rpc";
@@ -18,17 +18,8 @@ export const PILL_POLL_MS = 5_000;
 // still trigger a check, at most once a poll interval.
 export const IDLE_POLL_EVERY = 6;
 
-// Phones on Paseo before 0.13 have no Explorer, so there the panel is a tab of
-// its own. addFilePanel arrived in 0.13, the release that gave phones Explorer.
-// The tab has its own id: Paseo 0.10.1 reopens an existing tab where it
-// already is, and earlier versions of this plugin left a "progress" tab in the
-// phone's hidden Explorer pane, which a plugin can't move or close.
-type ProgressPanelPlacement = { id: "progress"; location: "explorer" } | { id: "progress-tab"; location: "workspace" };
-
-export function progressPanel(client: PluginClientContext): ProgressPanelPlacement {
-  return Platform.OS === "web" || "addFilePanel" in client
-    ? { id: "progress", location: "explorer" }
-    : { id: "progress-tab", location: "workspace" };
+export function progressPanel(): { id: "progress"; location: "explorer" } {
+  return { id: "progress", location: "explorer" };
 }
 
 type Workspace = { id: string; workspaceDirectory?: string; projectRootPath: string };
@@ -87,7 +78,7 @@ export function contributePills(client: PluginClientContext) {
     );
   }
 
-  const panel = progressPanel(client);
+  const panel = progressPanel();
   const openPanel = (workspaceId: string) => {
     client.openPanel(panel.id, { workspaceId, location: panel.location });
   };

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 { Icon, Markdown, ScrollView } from "@getpaseo/plugin/client/ui";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
-import React, { useEffect, useRef, useState } from "react";
-import { ActivityIndicator, Image, Platform, Pressable, Text, useWindowDimensions, View, type ViewStyle } from "react-native";
+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";
@@ -39,8 +39,9 @@ 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, fullScreen, leftFullScreen, onFullScreen }: PreviewProps & {
+export function PreviewContent({ colors, attachment, workspaceId, workspaceDirectory, onOpenOnHost, onCopyPath, onBack, gallery, onOpenEntry, onLong, ownScroll, fullScreen, leftFullScreen, onFullScreen }: PreviewProps & {
   onLong(long: boolean): void;
+  ownScroll: boolean;
   fullScreen: boolean;
   leftFullScreen: boolean;
   onFullScreen(on: boolean): void;
@@ -146,22 +147,40 @@ export function PreviewContent({ colors, attachment, workspaceId, workspaceDirec
   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;
+  // 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
+  // content when the dialog stops scrolling, an image that fails and shrinks, or a
+  // diagram that grows can't flip it back. Kept in the query cache to survive the remount.
+  const longKey = ["progress", "preview-long", workspaceId, attachment.ref, attachment.path];
+  const latched = useQuery({ queryKey: longKey, queryFn: () => false, enabled: false }).data === true;
+  const data = preview.data;
+  const markdown = data?.kind === "markdown" ? data.markdown : null;
+  const floor = useMemo(() => (markdown === null ? 0 : markdownFloor(markdown)), [markdown]);
+  const certainlyLong = floor > 2 * room;
+  const lastLong = useRef(false);
   // A long file gets its own scroll area so the actions below it stay in view.
   // Short ones keep the dialog sized to them.
-  const long = estimatedHeight(preview.data, aspectRatio, maxMediaHeight) > room;
+  const long = data?.kind === "markdown" ? (stepping ? lastLong.current : certainlyLong || latched) : estimatedHeight(data, aspectRatio, maxMediaHeight) > room;
+  lastLong.current = long;
   useEffect(() => onLong(long), [long]);
+  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 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}
+    </View>
+  );
+  const truncatedNote = (paddingTop: number) => <Text style={{ color: colors.foregroundMuted, fontSize: 11, lineHeight: 16, paddingTop }}>{m.truncatedText}{canOpen ? m.openRest : ""}</Text>;
   const content = (
     <>
-      {preview.isPending ? (
-        <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}
-        </View>
-      ) : null}
+      {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))}
@@ -172,13 +191,16 @@ export function PreviewContent({ colors, attachment, workspaceId, workspaceDirec
           <Text selectable style={{ color: colors.foreground, fontFamily: Platform.OS === "ios" ? "Menlo" : "monospace", fontSize: 12, lineHeight: 18 }}>
             {preview.data.text}
           </Text>
-          {preview.data.truncated ? (
-            <Text style={{ color: colors.foregroundMuted, fontSize: 11, lineHeight: 16, paddingTop: 8 }}>
-              {m.truncatedText}{canOpen ? m.openRest : ""}
-            </Text>
-          ) : null}
+          {preview.data.truncated ? truncatedNote(8) : null}
         </View>
       ) : null}
+      {/* Straight on the dialog: Paseo's code blocks and tables bring their own fills. */}
+      {preview.data?.kind === "markdown" ? (certainlyLong && !ownScroll ? loadingState : (
+        <View onLayout={measure} style={{ gap: 12, opacity: stepping ? 0.6 : 1 }}>
+          <Markdown>{preview.data.markdown}</Markdown>
+          {preview.data.truncated ? truncatedNote(0) : null}
+        </View>
+      )) : null}
       {preview.data?.kind === "folder" ? (
         <FolderList colors={colors} folder={attachment} entries={folderAttachments(attachment, preview.data.entries)} truncated={preview.data.truncated}
           dimmed={stepping} onOpen={onOpenEntry} />
@@ -364,6 +386,17 @@ function estimatedHeight(data: { kind: "image" | "video" | "html" } | { kind: "t
   return lines * 18 + 20;
 }
 
+// Paseo's smallest text sizes draw no line under 13px: 9px code at 1.45, 10px
+// prose at 1.4. Paseo draws every line break in Markdown, so each non-blank line
+// takes at least one line.
+const MIN_MARKDOWN_LINE = 12;
+
+export function markdownFloor(markdown: string): number {
+  let lines = 0;
+  for (const line of markdown.split("\n")) if (line.trim()) lines++;
+  return lines * MIN_MARKDOWN_LINE;
+}
+
 function FolderList({ colors, folder, entries, truncated, dimmed, onOpen }: { colors: Colors; folder: Attachment; entries: Attachment[]; truncated: boolean; dimmed: boolean; onOpen(attachment: Attachment, group: Attachment[]): void }) {
   const { messages: m } = useProgressLanguage();
   const caption = { color: colors.foregroundMuted, fontSize: 12, lineHeight: 17 } as const;
@@ -388,7 +421,7 @@ function imageSize(uri: string): Promise<{ width: number | null; ratio: number |
 // Height the dialog has for the preview before it must scroll: Paseo caps the card
 // at 85% of the window (inside a 24px margin), less its header and padding, the
 // path caption (17px after an 8px gap) and the footer (30px after a 20px gap).
-function roomForContent(windowHeight: number): number {
+export function roomForContent(windowHeight: number): number {
   return (windowHeight - 48) * 0.85 - 57 - 48 - (8 + 17) - (20 + 30);
 }
 

package/client/questions.tsx

@@ -1,5 +1,5 @@
 import type { PluginWorkspacePanelProps } from "@getpaseo/plugin/client";
-import { copyText, Icon, useToast } from "@getpaseo/plugin/client/react-native";
+import { copyText, Icon, useToast } from "@getpaseo/plugin/client/ui";
 import React, { useState } from "react";
 import { Text, View } from "react-native";
 import type { Question } from "../shared/dashboard";

package/client/section-title.tsx

@@ -1,5 +1,5 @@
 import type { PluginWorkspacePanelProps } from "@getpaseo/plugin/client";
-import { Icon } from "@getpaseo/plugin/client/react-native";
+import { Icon } from "@getpaseo/plugin/client/ui";
 import React from "react";
 import { Text, View, type ViewStyle } from "react-native";
 

package/client/settings.tsx

@@ -1,5 +1,5 @@
 import { type PluginSurfaceProps, useRpc, useSettings } from "@getpaseo/plugin/client";
-import { Icon, Modal } from "@getpaseo/plugin/client/react-native";
+import { Icon, Modal } from "@getpaseo/plugin/client/ui";
 import { SettingsAction, SettingsCard, SettingsSelect } from "@getpaseo/plugin/client/ui";
 import { useQuery } from "@tanstack/react-query";
 import React, { type ReactNode, useState } from "react";
@@ -7,11 +7,11 @@ import { Text, View } from "react-native";
 import { DEFAULT_QUESTION_MODE, QUESTION_MODES } from "../shared/question-modes";
 import { readSkill } from "../shared/rpc";
 import { questionSettings, LANGUAGE_PREFERENCES } from "../shared/settings";
-import { parseWriteUp, withoutTitle } from "../shared/write-up";
+import { parseBlocks, withoutTitle } from "../shared/blocks";
 import { errorText } from "./errors";
 import { useProgressLanguage } from "./language";
 import { useSkill } from "./launcher";
-import { BlockView } from "./write-up";
+import { BlockView } from "./blocks";
 
 export function QuestionSettings({ theme, host }: PluginSurfaceProps) {
   return <><QuestionModeSettings theme={theme} /><DisplaySettings theme={theme} /><SkillSettings colors={theme.colors} hostId={host.id} /></>;
@@ -53,7 +53,7 @@ function SkillSettings({ colors, hostId }: { colors: Colors; hostId: string }) {
   const fetchSkill = useRpc(readSkill);
   const document = useQuery({ queryKey: ["progress", "skill-document", hostId], queryFn: () => fetchSkill({}), staleTime: 60_000 });
   const [open, setOpen] = useState(false);
-  const blocks = document.data ? withoutTitle(parseWriteUp(document.data.markdown)) : [];
+  const blocks = document.data ? withoutTitle(parseBlocks(document.data.markdown)) : [];
   const muted = { color: colors.foregroundMuted, fontSize: 13, lineHeight: 19 };
   return (
     <Section colors={colors} icon="Sparkles" title={m.agentSkill}>

package/client/show-more.tsx

@@ -1,5 +1,5 @@
 import type { PluginWorkspacePanelProps } from "@getpaseo/plugin/client";
-import { Icon } from "@getpaseo/plugin/client/react-native";
+import { Icon } from "@getpaseo/plugin/client/ui";
 import React, { useState } from "react";
 import { Text } from "react-native";
 import { IconSwap } from "./motion";

package/client/spinner.tsx

@@ -1,4 +1,4 @@
-import { Icon } from "@getpaseo/plugin/client/react-native";
+import { Icon } from "@getpaseo/plugin/client/ui";
 import React, { useEffect, useRef } from "react";
 import { ActivityIndicator, Animated, Easing, Platform, View } from "react-native";
 import { useProgressLanguage } from "./language";

package/client/tabs.tsx

@@ -1,5 +1,5 @@
 import type { PluginWorkspacePanelProps } from "@getpaseo/plugin/client";
-import { Icon } from "@getpaseo/plugin/client/react-native";
+import { Icon } from "@getpaseo/plugin/client/ui";
 import React, { useState } from "react";
 import { Pressable, Text, View } from "react-native";
 

package/client/ticket-dialog.tsx

@@ -1,5 +1,5 @@
 import { type PluginWorkspacePanelProps, useAgent } from "@getpaseo/plugin/client";
-import { Icon } from "@getpaseo/plugin/client/react-native";
+import { Icon } from "@getpaseo/plugin/client/ui";
 import React, { useState } from "react";
 import { Text, View } from "react-native";
 import type { Dashboard, Ticket } from "../shared/dashboard";

package/client/whats-new.tsx

@@ -1,14 +1,14 @@
 import { type PluginWorkspacePanelProps, useRpc } from "@getpaseo/plugin/client";
-import { Icon, Modal } from "@getpaseo/plugin/client/react-native";
+import { Icon, Modal } from "@getpaseo/plugin/client/ui";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import React, { useState } from "react";
 import { Text, View } from "react-native";
 import { dismissWhatsNew, getWhatsNew } from "../shared/rpc";
 import { NOTE_KINDS, type NoteKind, type NoteTone, type WhatsNew, type WhatsNewNote, type WhatsNewRelease } from "../shared/whats-new";
-import { spans } from "../shared/write-up";
+import { spans } from "../shared/blocks";
 import { PressScale, Presence } from "./motion";
 import { isLight, raised, tint } from "./surfaces";
-import { BlockView, Spans } from "./write-up";
+import { BlockView, Spans } from "./blocks";
 import { ProgressLanguageProvider, useProgressLanguage } from "./language";
 
 type Colors = PluginWorkspacePanelProps["theme"]["colors"];

package/client/write-up.tsx

@@ -1,18 +1,20 @@
 import { type PluginWorkspacePanelProps, useRpc } from "@getpaseo/plugin/client";
-import { Icon } from "@getpaseo/plugin/client/react-native";
+import { Icon, Markdown } from "@getpaseo/plugin/client/ui";
 import { useQuery } from "@tanstack/react-query";
-import React, { useState } from "react";
+import React, { useMemo, useState } from "react";
 import { Platform, Text, View } from "react-native";
 import { previewKind } from "../shared/attachments";
 import { previewDeliverable } from "../shared/rpc";
-import { type Block, parseWriteUp, type Span, withoutTitle, writeUpExcerpt } from "../shared/write-up";
+import { flattenHeadings, dropTitle, markdownExcerpt, textExcerpt } from "../shared/markdown";
 import { type Attachment, attachmentIcon } from "./attachments";
 import { PressableRow } from "./row";
 import { errorText } from "./errors";
 import { useProgressLanguage } from "./language";
 
 type Colors = PluginWorkspacePanelProps["theme"]["colors"];
-const MONO = Platform.OS === "ios" ? "Menlo" : "monospace";
+
+const WRITE_UP_HEADING = 5;
+const EXCERPT_CHARS = 280;
 
 // What the ticket is: the start of its write-up in a quiet inset, with the
 // rest a press away. A link or a file that isn't text shows only its name.
@@ -34,18 +36,31 @@ export function WriteUp({ colors, source, workspaceId, workspaceDirectory, onOpe
     enabled: readable,
   });
   const [all, setAll] = useState(false);
-  const blocks = preview.data?.kind === "text" ? parseWriteUp(preview.data.text) : [];
-  const excerpt = writeUpExcerpt(blocks, 280);
-  const shown = all ? withoutTitle(blocks) : excerpt.blocks;
+  const data = preview.data;
+  const parts = useMemo(() => {
+    if (data?.kind === "markdown") {
+      const excerpt = markdownExcerpt(data.markdown, EXCERPT_CHARS);
+      return { markdown: true, excerpt: flattenHeadings(excerpt.text, WRITE_UP_HEADING), whole: flattenHeadings(dropTitle(data.markdown), WRITE_UP_HEADING), more: excerpt.more, truncated: data.truncated };
+    }
+    if (data?.kind === "text") {
+      const excerpt = textExcerpt(data.text, EXCERPT_CHARS);
+      return { markdown: false, excerpt: excerpt.text, whole: data.text, more: excerpt.more, truncated: data.truncated };
+    }
+    return null;
+  }, [data]);
+  const shown = parts ? (all ? parts.whole : parts.excerpt) : "";
+  const muted = { color: colors.foregroundMuted, fontSize: 12, lineHeight: 18 } as const;
   return (
     <View style={{ gap: 12, padding: 14, borderRadius: 8, backgroundColor: colors.surface0 }}>
-      {shown.length ? <View style={{ gap: 8 }}>{shown.map((block, index) => <BlockView key={index} colors={colors} block={block} first={index === 0} />)}</View> : null}
-      {preview.error ? <Text style={{ color: colors.foregroundMuted, fontSize: 12, lineHeight: 18 }}>{m.readError(errorText(preview.error, m.unknownError))}</Text> : null}
+      {shown.trim() ? (parts?.markdown ? <Markdown>{shown}</Markdown>
+        : <Text selectable style={{ color: colors.foreground, fontSize: 13, lineHeight: 19 }}>{shown}</Text>) : null}
+      {all && parts?.truncated ? <Text style={muted}>{m.truncatedText}</Text> : null}
+      {preview.error ? <Text style={muted}>{m.readError(errorText(preview.error, m.unknownError))}</Text> : null}
       {/* The file on the left, opening it whole; expanding in place on the right. */}
       <View style={{ flexDirection: "row", alignItems: "center", gap: 12 }}>
         <TextButton colors={colors} icon={attachmentIcon(source)} label={source.title} accessibilityLabel={m.openItem(source.title)} onPress={() => onOpen(source, [source])} grow />
         <View style={{ flex: 1 }} />
-        {excerpt.more ? <TextButton colors={colors} label={all ? m.showLess : m.readMore} onPress={() => setAll(!all)} expanded={all} /> : null}
+        {parts?.more ? <TextButton colors={colors} label={all ? m.showLess : m.readMore} onPress={() => setAll(!all)} expanded={all} /> : null}
       </View>
     </View>
   );
@@ -63,37 +78,3 @@ function TextButton({ colors, icon, label, accessibilityLabel, onPress, grow = f
     </PressableRow>
   );
 }
-
-export function BlockView({ colors, block, first }: { colors: Colors; block: Block; first: boolean }) {
-  switch (block.kind) {
-    case "heading":
-      return (
-        // A step under the section's own 13px title: smaller and muted, set apart from the body by weight.
-        <Text accessibilityRole="header" selectable style={{ color: colors.foregroundMuted, fontSize: 12, lineHeight: 17, fontWeight: "600", marginTop: first ? 0 : 6 }}>
-          <Spans colors={colors} spans={block.spans} />
-        </Text>
-      );
-    case "item":
-      return (
-        <View style={{ flexDirection: "row", gap: 6, paddingStart: block.depth * 14 }}>
-          <Text style={{ minWidth: 10, color: colors.foregroundMuted, fontSize: 13, lineHeight: 19, fontVariant: ["tabular-nums"] }}>{block.marker}</Text>
-          <Text selectable style={{ flex: 1, color: colors.foreground, fontSize: 13, lineHeight: 19 }}><Spans colors={colors} spans={block.spans} /></Text>
-        </View>
-      );
-    case "code":
-      return (
-        <View style={{ padding: 8, borderRadius: 6, backgroundColor: colors.surface0 }}>
-          <Text selectable style={{ color: colors.foreground, fontFamily: MONO, fontSize: 12, lineHeight: 18 }}>{block.text}</Text>
-        </View>
-      );
-    default:
-      return <Text selectable style={{ color: colors.foreground, fontSize: 13, lineHeight: 19 }}><Spans colors={colors} spans={block.spans} /></Text>;
-  }
-}
-
-export function Spans({ colors, spans }: { colors: Colors; spans: Span[] }) {
-  return <>{spans.map((span, index) => span.code
-    ? <Text key={index} style={{ fontFamily: MONO, fontSize: 12, color: colors.foreground }}>{span.text}</Text>
-    : span.strong ? <Text key={index} style={{ fontWeight: "600" }}>{span.text}</Text>
-    : <React.Fragment key={index}>{span.text}</React.Fragment>)}</>;
-}