@stevecastaneda/paseo-progress 0.2.0 → 0.3.0

package/client/ticket-dialog.tsx

@@ -1,20 +1,22 @@
-import type { PluginWorkspacePanelProps } from "@getpaseo/plugin/client";
+import { type PluginWorkspacePanelProps, useAgent } from "@getpaseo/plugin/client";
 import { Icon } from "@getpaseo/plugin/client/react-native";
-import React from "react";
+import React, { useState } from "react";
 import { Text, View } from "react-native";
 import type { Dashboard, Ticket } from "../shared/dashboard";
-import { formatMinutes } from "../shared/format";
+import { formatMinutes, formatTimeOfDay, formatWorkDone } from "../shared/format";
 import { type Link, ticketStory, type TimelineStep } from "../shared/ticket-story";
-import { type Attachment, AttachmentList, deliverableAttachment } from "./attachments";
+import { type Attachment, AttachmentList, deliverableAttachment, ticketSourceAttachment } from "./attachments";
 import { StackedDialog } from "./dialog-stack";
 import { IconSwap } from "./motion";
 import { PressableRow } from "./row";
 import { Spinner, StalledPulse, WaitingDot } from "./spinner";
 import { StatusBadge } from "./status-badge";
-import { When } from "./when";
+import { type TabEntry, TabStrip } from "./tabs";
+import { TimeBar } from "./time-bar";
+import { WriteUp } from "./write-up";
 
 type Colors = PluginWorkspacePanelProps["theme"]["colors"];
-type AttachmentContext = { workspaceId: string; workspaceDirectory: string; navigation: PluginWorkspacePanelProps["navigation"] };
+type AttachmentContext = { workspaceId: string; workspaceDirectory: string; navigation?: PluginWorkspacePanelProps["navigation"] };
 
 // A ticket's story, opened from its row: where its time went, and what came out
 // of it. Its questions and previews open in the same dialog (see StackedDialog).
@@ -33,121 +35,155 @@ export function TicketDialogs({ colors, dashboard, openId, setOpenId, now, live,
   );
 }
 
-export function TicketStoryView({ colors, dashboard, ticket, now, live, onOpenAttachment, onOpenQuestion }: {
+export function TicketStoryView({ colors, dashboard, ticket, now, live, context, onOpenAttachment, onOpenQuestion, onOpenAgent }: {
   colors: Colors;
   dashboard: Dashboard;
   ticket: Ticket;
   now: number;
   live: boolean;
+  context: AttachmentContext;
   onOpenAttachment(attachment: Attachment, group: Attachment[]): void;
   onOpenQuestion(id: string): void;
+  // Undefined where Paseo can't navigate to an agent.
+  onOpenAgent?(agentId: string): void;
 }) {
   const story = ticketStory(ticket, {
     deliverables: dashboard.deliverables,
     questions: [...dashboard.questions.open, ...dashboard.questions.answered].sort((a, b) => Date.parse(a.askedAt) - Date.parse(b.askedAt)),
     activity: [...dashboard.activity].reverse(),
   }, now);
-  const overMin = story.workedMin - ticket.estimateMin;
+  const over = story.workedMin - ticket.estimateMin >= 1;
   const byTime = [...story.questions, ...story.activity].some((item) => item.link === "by-time");
+  const source = ticketSourceAttachment(ticket);
+  // The ticker is run-wide: it's about this ticket when this ticket's agent set
+  // it, or, without agents to go by, when this is the only ticket working.
+  const ticker = dashboard.ticker && ticket.status === "working" && (dashboard.ticker.by
+    ? dashboard.ticker.by === ticket.agentId
+    : dashboard.tickets.filter((candidate) => candidate.status === "working").length === 1) ? dashboard.ticker.text : null;
+  // What the badge doesn't say: the stage it's in, or what it waits for.
+  const detail = ticket.waitingFor ? `for ${ticket.waitingFor.id}: ${ticket.waitingFor.title}` : ticket.status === "working" ? ticket.stage : undefined;
+  const timeline = story.timeline.map((step, index) => {
+    const last = index === story.timeline.length - 1;
+    // A current "Blocked" that's only waiting on another ticket reads as waiting, in the calm color.
+    const shown = last && ticket.waitingFor && step.status === "blocked"
+      ? { ...step, label: `Waiting for ${ticket.waitingFor.id}`, waiting: true }
+      : step;
+    return <TimelineRow key={`${step.at}-${index}`} colors={colors} step={shown} last={last} now={now} live={live} />;
+  });
+  // Only tabs with something in them; the write-up leads when there is one.
+  const tabs: Array<TabEntry<StoryTab> & { content: React.ReactNode }> = [
+    ...(source ? [{ id: "write-up" as const, label: "Write-up", icon: "FileText",
+      content: <WriteUp colors={colors} source={source} workspaceId={context.workspaceId} workspaceDirectory={context.workspaceDirectory} onOpen={onOpenAttachment} /> }] : []),
+    { id: "timeline", label: "Timeline", icon: "History", count: story.timeline.length, content: <View>{timeline}</View> },
+    ...(story.activity.length ? [{ id: "activity" as const, label: "Activity", icon: "Activity", count: story.activity.length, content: (
+      <View>
+        {story.activity.map((entry) => (
+          <View key={entry.id} style={{ flexDirection: "row", gap: 12, paddingVertical: 4 }}>
+            <Text style={{ flex: 1, color: colors.foreground, fontSize: 13, lineHeight: 19 }}>{entry.text}<LinkNote colors={colors} link={entry.link} /></Text>
+            <Text style={{ color: colors.foregroundMuted, fontSize: 12, lineHeight: 19, fontVariant: ["tabular-nums"] }}>{formatTimeOfDay(entry.at, now)}</Text>
+          </View>
+        ))}
+      </View>
+    ) }] : []),
+    ...(story.questions.length ? [{ id: "questions" as const, label: "Questions", icon: "MessageCircleQuestion", count: story.questions.length, content: (
+      <View>
+        {story.questions.map((question) => {
+          const chosen = question.answer ? question.options.find((option) => option.letter === question.answer!.choice) : undefined;
+          return (
+            <PressableRow key={question.id} colors={colors} onSurface1 accessibilityRole="button" accessibilityLabel={`Open ${question.id}`}
+              onPress={() => onOpenQuestion(question.id)}
+              style={{ flexDirection: "row", gap: 8, paddingVertical: 4, paddingHorizontal: 4, marginHorizontal: -4, borderRadius: 4 }}>
+              <Text style={{ color: colors.foregroundMuted, fontSize: 12, lineHeight: 18, fontWeight: "600", fontVariant: ["tabular-nums"], minWidth: 30 }}>{question.id}</Text>
+              <View style={{ flex: 1, minWidth: 0, gap: 2 }}>
+                <Text style={{ color: colors.foreground, fontSize: 13, lineHeight: 18 }}>{question.title}<LinkNote colors={colors} link={question.link} /></Text>
+                {question.answer
+                  ? <Text style={{ color: colors.foregroundMuted, fontSize: 12, lineHeight: 17 }}>Answered <Text style={{ color: colors.statusSuccess, fontWeight: "600" }}>{question.answer.choice}</Text>{chosen ? <Text style={{ color: colors.foreground }}>: {chosen.label}</Text> : null}</Text>
+                  : null}
+              </View>
+              <View style={{ paddingTop: 2 }}><Icon name="ChevronRight" size={14} color={colors.foregroundMuted} /></View>
+            </PressableRow>
+          );
+        })}
+      </View>
+    ) }] : []),
+    ...(story.deliverables.length ? [{ id: "deliverables" as const, label: "Deliverables", icon: "Package", count: story.deliverables.length,
+      content: <AttachmentList colors={colors} attachments={story.deliverables.map(deliverableAttachment)} onOpen={onOpenAttachment} /> }] : []),
+  ];
+  const tabKey = `${context.workspaceId}:${ticket.id}`;
+  const [chosen, setChosen] = useState<StoryTab | undefined>(() => storyTabs.get(tabKey));
+  const current = tabs.find((entry) => entry.id === chosen) ?? tabs[0];
+  const choose = (id: StoryTab) => {
+    storyTabs.set(tabKey, id);
+    setChosen(id);
+  };
   return (
     <View style={{ gap: 20 }}>
-      <View style={{ gap: 6 }}>
-        <View style={{ flexDirection: "row", alignItems: "center", gap: 8, flexWrap: "wrap" }}>
+      {/* The summary: where it stands, how its time compares to the estimate, and who's on it. */}
+      <View style={{ gap: 10 }}>
+        <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
           <StatusBadge colors={colors} status={ticket.status} waiting={Boolean(ticket.waitingFor)} />
-          <View style={{ flexDirection: "row", alignItems: "center", gap: 4 }}>
-            <Icon name="Timer" size={12} color={colors.foregroundMuted} />
-            <Text style={{ color: colors.foregroundMuted, fontSize: 12, lineHeight: 18, fontVariant: ["tabular-nums"] }}>
-              Worked {formatMinutes(story.workedMin)} of a {formatMinutes(ticket.estimateMin)} estimate
-              {overMin >= 1 ? <Text style={{ color: colors.statusDanger }}>, {formatMinutes(overMin)} over</Text> : null}
-            </Text>
-          </View>
+          <Text numberOfLines={1} style={{ flex: 1, minWidth: 0, color: colors.foreground, fontSize: 13, lineHeight: 18 }}>{detail}</Text>
+          <Text accessibilityLabel={`Worked ${formatMinutes(story.workedMin)} of a ${formatMinutes(ticket.estimateMin)} estimate`}
+            style={{ color: over ? colors.statusDanger : colors.foregroundMuted, fontSize: 12, lineHeight: 18, fontVariant: ["tabular-nums"] }}>
+            {formatWorkDone(story.workedMin, ticket.estimateMin)}
+          </Text>
         </View>
-        {ticket.waitingFor ? (
-          <View style={{ flexDirection: "row", gap: 4 }}>
-            {/* Held on the first line when a long title wraps. */}
-            <View style={{ height: 18, justifyContent: "center" }}><WaitingDot color={colors.foregroundMuted} /></View>
-            <Text style={{ flex: 1, color: colors.foregroundMuted, fontSize: 12, lineHeight: 18 }}>Waits for {ticket.waitingFor.id}: {ticket.waitingFor.title}</Text>
-          </View>
-        ) : null}
+        <TimeBar colors={colors} workedMin={story.workedMin} estimateMin={ticket.estimateMin} />
+        {ticker ? <Text accessibilityLiveRegion="polite" style={{ color: colors.foregroundMuted, fontSize: 13, lineHeight: 19 }}>{ticker}</Text> : null}
         {ticket.note ? <Text style={{ color: colors.foreground, fontSize: 13, lineHeight: 19 }}>{ticket.note}</Text> : null}
+        {ticket.agentId ? <AgentRow colors={colors} agentId={ticket.agentId} onOpen={onOpenAgent} /> : null}
       </View>
 
-      <Section colors={colors} icon="History" title="Timeline">
-        <View>
-          {story.timeline.map((step, index) => {
-            const last = index === story.timeline.length - 1;
-            // A current "Blocked" that's only waiting on another ticket reads as waiting, in the calm color.
-            const shown = last && ticket.waitingFor && step.status === "blocked"
-              ? { ...step, label: `Waiting for ${ticket.waitingFor.id}`, waiting: true }
-              : step;
-            return <TimelineRow key={`${step.at}-${index}`} colors={colors} step={shown} last={last} now={now} live={live} />;
-          })}
-        </View>
-      </Section>
-
-      {story.deliverables.length ? (
-        <Section colors={colors} icon="Package" title="Deliverables">
-          <AttachmentList colors={colors} attachments={story.deliverables.map(deliverableAttachment)} onOpen={onOpenAttachment} />
-        </Section>
-      ) : null}
-
-      {story.questions.length ? (
-        <Section colors={colors} icon="MessageCircleQuestion" title="Questions">
-          <View style={{ gap: 2 }}>
-            {story.questions.map((question) => {
-              const chosen = question.answer ? question.options.find((option) => option.letter === question.answer!.choice) : undefined;
-              return (
-                <PressableRow key={question.id} colors={colors} onSurface1 accessibilityRole="button" accessibilityLabel={`Open ${question.id}`}
-                  onPress={() => onOpenQuestion(question.id)}
-                  style={{ flexDirection: "row", gap: 8, paddingVertical: 3, paddingHorizontal: 4, marginHorizontal: -4, borderRadius: 4 }}>
-                  <Text style={{ color: colors.foregroundMuted, fontSize: 12, lineHeight: 18, fontWeight: "600", fontVariant: ["tabular-nums"], minWidth: 30 }}>{question.id}</Text>
-                  <Text style={{ flex: 1, color: colors.foreground, fontSize: 12, lineHeight: 18 }}>
-                    {question.title}{"  "}
-                    {question.answer
-                      ? <Text style={{ color: colors.statusSuccess, fontWeight: "600" }}>{question.answer.choice}{chosen ? <Text style={{ fontWeight: "400" }}> {chosen.label}</Text> : null}</Text>
-                      : <Text style={{ color: question.waits ? colors.statusWarning : colors.foregroundMuted }}>Open, default {question.default}</Text>}
-                    <LinkNote colors={colors} link={question.link} />
-                  </Text>
-                  <View style={{ paddingTop: 2 }}><Icon name="ChevronRight" size={14} color={colors.foregroundMuted} /></View>
-                </PressableRow>
-              );
-            })}
-          </View>
-        </Section>
-      ) : null}
-
-      {story.activity.length ? (
-        <Section colors={colors} icon="Activity" title="Activity">
-          <View style={{ gap: 8 }}>
-            {story.activity.map((entry) => (
-              <View key={entry.id} style={{ gap: 1 }}>
-                <Text style={{ color: colors.foregroundMuted, fontSize: 12, lineHeight: 18 }}>{entry.text}<LinkNote colors={colors} link={entry.link} /></Text>
-                <Text style={{ color: colors.foregroundMuted, fontSize: 11, lineHeight: 16, opacity: 0.8 }}><When colors={colors} iso={entry.at} now={now} /></Text>
-              </View>
-            ))}
-          </View>
-        </Section>
-      ) : null}
+      <View style={{ gap: 12 }}>
+        {tabs.length > 1 ? <TabStrip colors={colors} tabs={tabs} selected={current.id} onSelect={choose} fit /> : null}
+        {current.content}
+      </View>
 
       {byTime ? (
-        <Text style={{ color: colors.foregroundMuted, fontSize: 11, lineHeight: 16 }}>
-          Items marked “by time” weren't tagged to {ticket.id}; they happened while it was the ticket being worked on.
+        <Text style={{ color: colors.foregroundMuted, fontSize: 12, lineHeight: 17 }}>
+          Items marked “by time” weren't tagged to {ticket.id}; they happened while it was the {(dashboard.run?.itemLabel ?? "ticket").toLowerCase()} being worked on.
         </Text>
       ) : null}
     </View>
   );
 }
 
-// A section heading: a 14px icon beside the 13px semibold title, like the panel's cards.
-function Section({ colors, icon, title, children }: { colors: Colors; icon: string; title: string; children: React.ReactNode }) {
+type StoryTab = "write-up" | "timeline" | "activity" | "questions" | "deliverables";
+// The tab chosen per ticket, kept for the app session, so coming back from a
+// preview or reopening the ticket shows the same one.
+const storyTabs = new Map<string, StoryTab>();
+
+// Paseo titles a chat from the first line of its first message, cut at 60
+// characters without an ellipsis (create-agent-title.ts); add the one it left off.
+const PASEO_TITLE_CUT = 60;
+function agentTitle(raw: string | null): string {
+  const title = raw?.trim();
+  if (!title) return "Untitled agent";
+  return title.length === PASEO_TITLE_CUT ? `${title.trimEnd()}…` : title;
+}
+
+// The agent on a ticket, by its chat title. Pressing it
+// opens that chat. Shown only while Paseo knows the agent; an archived one
+// leaves nothing to open. Its state shows only when it needs the user.
+function AgentRow({ colors, agentId, onOpen }: { colors: Colors; agentId: string; onOpen?(agentId: string): void }) {
+  const agent = useAgent(agentId, (snapshot) => ({
+    title: snapshot.title,
+    alert: snapshot.requiresAttention && snapshot.attentionReason === "permission" ? { text: "Needs your permission", danger: false }
+      : snapshot.status === "error" ? { text: "Stopped with an error", danger: true } : null,
+  }));
+  if (!agent) return null;
+  const title = agentTitle(agent.title);
+  const open = onOpen ? () => onOpen(agentId) : undefined;
+  // A quiet line in the summary: who's on it, and the way to their chat.
   return (
-    <View style={{ gap: 8 }}>
-      <View style={{ flexDirection: "row", alignItems: "center", gap: 6 }}>
-        <Icon name={icon} size={14} color={colors.foregroundMuted} />
-        <Text accessibilityRole="header" style={{ color: colors.foreground, fontSize: 13, lineHeight: 18, fontWeight: "600" }}>{title}</Text>
-      </View>
-      {children}
-    </View>
+    <PressableRow colors={colors} onSurface1 disabled={!open} accessibilityRole="button" accessibilityLabel={`Open the chat with ${title}`} onPress={open}
+      style={{ flexDirection: "row", alignItems: "center", gap: 6, paddingVertical: 3, paddingHorizontal: 6, marginHorizontal: -6, borderRadius: 4 }}>
+      <Icon name="Bot" size={12} color={colors.foregroundMuted} />
+      <Text numberOfLines={1} style={{ flexShrink: 1, color: colors.foregroundMuted, fontSize: 12, lineHeight: 17 }}>{title}</Text>
+      {agent.alert ? <Text numberOfLines={1} style={{ flexShrink: 0, color: agent.alert.danger ? colors.statusDanger : colors.statusWarning, fontSize: 12, lineHeight: 17 }}>{agent.alert.text}</Text> : null}
+      <View style={{ flex: 1 }} />
+      {open ? <Text style={{ color: colors.foregroundMuted, fontSize: 12, lineHeight: 17, fontWeight: "500" }}>Open chat</Text> : null}
+    </PressableRow>
   );
 }
 
@@ -167,36 +203,30 @@ function Marker({ colors, step }: { colors: Colors; step: TimelineStep & { waiti
   return <Icon name={icon.name} size={12} color={icon.color} />;
 }
 
-// A rail of status icons joined by a line; the step still going shows the live spinner.
+// One line per step: its status icon, what it was, when it began and how long
+// it took. The step still going shows the live spinner.
 function TimelineRow({ colors, step, last, now, live }: { colors: Colors; step: TimelineStep & { waiting?: boolean }; last: boolean; now: number; live: boolean }) {
   const current = last && step.minutes !== null;
   const working = current && step.status === "working";
   return (
-    // The rail is as wide as a section icon, so markers sit under it and labels line up with the title.
-    <View style={{ flexDirection: "row", gap: 6 }}>
-      <View style={{ width: 14, alignItems: "center" }}>
-        {/* Optical: centers the marker on the 18px first line. */}
-        <View style={{ height: 18, justifyContent: "center" }}>
+    <View style={{ paddingVertical: 4, gap: 2 }}>
+      {/* Same 14px slot and gap as attachment rows, so text lines up across sections. */}
+      <View style={{ flexDirection: "row", alignItems: "center", gap: 6 }}>
+        <View style={{ width: 14, alignItems: "center" }}>
           <IconSwap swapKey={working ? (live ? "live" : "stale") : step.waiting ? "waiting" : step.status} size={12}>
             {working ? (live ? <Spinner color={colors.accent} /> : <StalledPulse color={colors.statusWarning} />) : <Marker colors={colors} step={step} />}
           </IconSwap>
         </View>
-        {last ? null : <View style={{ flex: 1, width: 1, backgroundColor: colors.border }} />}
-      </View>
-      <View style={{ flex: 1, minWidth: 0, paddingBottom: last ? 0 : 12, gap: 1 }}>
-        <View style={{ flexDirection: "row", gap: 8 }}>
-          <Text style={{ flex: 1, color: colors.foreground, fontSize: 13, lineHeight: 18 }}>{step.label}</Text>
-          {step.minutes !== null ? (
-            <Text style={{ color: colors.foregroundMuted, fontSize: 12, lineHeight: 18, fontVariant: ["tabular-nums"] }}>
-              {formatMinutes(step.minutes)}{current ? " so far" : ""}
-            </Text>
-          ) : null}
-        </View>
-        <Text style={{ color: colors.foregroundMuted, fontSize: 11, lineHeight: 16 }}><When colors={colors} iso={step.at} now={now} /></Text>
-        {step.notes.map((note, index) => (
-          <Text key={index} style={{ color: colors.foregroundMuted, fontSize: 12, lineHeight: 17, paddingTop: 2 }}>{note}</Text>
-        ))}
+        <Text numberOfLines={1} style={{ flex: 1, minWidth: 0, color: colors.foreground, fontSize: 13, lineHeight: 18 }}>{step.label}</Text>
+        <Text style={{ color: colors.foregroundMuted, fontSize: 12, lineHeight: 18, fontVariant: ["tabular-nums"] }}>{formatTimeOfDay(step.at, now)}</Text>
+        {/* A fixed column, so durations line up down the list. */}
+        <Text style={{ width: 84, textAlign: "right", color: current ? colors.foreground : colors.foregroundMuted, fontSize: 12, lineHeight: 18, fontVariant: ["tabular-nums"] }}>
+          {step.minutes !== null ? `${formatMinutes(step.minutes)}${current ? " so far" : ""}` : ""}
+        </Text>
       </View>
+      {step.notes.map((note, index) => (
+        <Text key={index} style={{ paddingStart: 20, color: colors.foregroundMuted, fontSize: 12, lineHeight: 17 }}>{note}</Text>
+      ))}
     </View>
   );
 }

package/client/time-bar.tsx

@@ -0,0 +1,19 @@
+import type { PluginWorkspacePanelProps } from "@getpaseo/plugin/client";
+import React from "react";
+import { View } from "react-native";
+
+type Colors = PluginWorkspacePanelProps["theme"]["colors"];
+
+// Time worked filling the estimate. Past the estimate the bar is full and the
+// share over it turns red.
+export function TimeBar({ colors, workedMin, estimateMin }: { colors: Colors; workedMin: number; estimateMin: number }) {
+  const scale = Math.max(workedMin, estimateMin);
+  const under = Math.min(workedMin, estimateMin);
+  return (
+    <View accessibilityElementsHidden importantForAccessibility="no-hide-descendants"
+      style={{ height: 4, borderRadius: 2, overflow: "hidden", flexDirection: "row", backgroundColor: colors.surface2 }}>
+      <View style={{ width: `${(under / scale) * 100}%`, backgroundColor: colors.accent }} />
+      {workedMin > estimateMin ? <View style={{ width: `${((workedMin - estimateMin) / scale) * 100}%`, backgroundColor: colors.statusDanger }} /> : null}
+    </View>
+  );
+}

package/client/when.tsx

@@ -2,11 +2,14 @@ import type { PluginWorkspacePanelProps } from "@getpaseo/plugin/client";
 import React from "react";
 import { Text } from "react-native";
 import { formatAgo, formatClock } from "../shared/format";
+import { useNarrow } from "./narrow";
 
 type Colors = PluginWorkspacePanelProps["theme"]["colors"];
 
-// "Sep 27, 8:14 PM (10 h 2 min ago)", inline inside other text.
+// "Sep 27, 8:14 PM (10 h 2 min ago)", inline inside other text. A narrow
+// panel shows only "10 h 2 min ago"; the ticket dialog keeps the clock time.
 export function When({ colors, iso, now }: { colors: Colors; iso: string; now: number }) {
+  if (useNarrow()) return <Text>{formatAgo(iso, now)}</Text>;
   return (
     <Text>
       {formatClock(iso)} <Text style={{ color: colors.foregroundMuted, opacity: 0.7 }}>({formatAgo(iso, now)})</Text>

package/client/write-up.tsx

@@ -0,0 +1,95 @@
+import { type PluginWorkspacePanelProps, useRpc } from "@getpaseo/plugin/client";
+import { Icon } from "@getpaseo/plugin/client/react-native";
+import { useQuery } from "@tanstack/react-query";
+import React, { 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 { type Attachment, attachmentIcon } from "./attachments";
+import { PressableRow } from "./row";
+
+type Colors = PluginWorkspacePanelProps["theme"]["colors"];
+const MONO = Platform.OS === "ios" ? "Menlo" : "monospace";
+
+// 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.
+export function WriteUp({ colors, source, workspaceId, workspaceDirectory, onOpen }: {
+  colors: Colors;
+  source: Attachment;
+  workspaceId: string;
+  workspaceDirectory: string;
+  onOpen(attachment: Attachment, group: Attachment[]): void;
+}) {
+  const fetchPreview = useRpc(previewDeliverable);
+  const readable = Boolean(source.path && previewKind(source.path) === "text");
+  // The same query as the preview dialog, so opening the file after reading here is instant.
+  const preview = useQuery({
+    queryKey: ["progress", "preview", workspaceId, source.ref, source.path],
+    queryFn: () => fetchPreview({ workspaceId, workspaceDirectory, ref: source.ref }),
+    staleTime: 30_000,
+    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;
+  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 }}>Couldn't read it here: {preview.error.message}</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={`Open ${source.title}`} onPress={() => onOpen(source, [source])} grow />
+        <View style={{ flex: 1 }} />
+        {excerpt.more ? <TextButton colors={colors} label={all ? "Show less" : "Read more"} onPress={() => setAll(!all)} expanded={all} /> : null}
+      </View>
+    </View>
+  );
+}
+
+// A quiet text button for the inset's footer: muted, tinted on hover.
+function TextButton({ colors, icon, label, accessibilityLabel, onPress, grow = false, expanded }: {
+  colors: Colors; icon?: string; label: string; accessibilityLabel?: string; onPress(): void; grow?: boolean; expanded?: boolean;
+}) {
+  return (
+    <PressableRow colors={colors} accessibilityRole="button" accessibilityLabel={accessibilityLabel ?? label} accessibilityState={expanded === undefined ? undefined : { expanded }} onPress={onPress}
+      style={{ flexDirection: "row", alignItems: "center", gap: 6, paddingVertical: 3, paddingHorizontal: 6, marginHorizontal: -6, borderRadius: 4, flexShrink: grow ? 1 : 0, minWidth: 0 }}>
+      {icon ? <Icon name={icon} size={12} color={colors.foregroundMuted} /> : null}
+      <Text numberOfLines={1} style={{ flexShrink: 1, color: colors.foregroundMuted, fontSize: 12, lineHeight: 17, fontWeight: "500" }}>{label}</Text>
+    </PressableRow>
+  );
+}
+
+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>;
+  }
+}
+
+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>
+    : <React.Fragment key={index}>{span.text}</React.Fragment>)}</>;
+}