@stevecastaneda/paseo-progress 1.3.1 → 1.5.0

package/client/ticket-dialog.tsx

@@ -3,17 +3,19 @@ import { Icon } from "@getpaseo/plugin/client/react-native";
 import React, { useState } from "react";
 import { Text, View } from "react-native";
 import type { Dashboard, Ticket } from "../shared/dashboard";
-import { formatMinutes, formatTimeOfDay, formatWorkDone } from "../shared/format";
+import { formatClientMinutes, formatClientTimeOfDay, formatClientWorkDone, timelineLabel } from "./i18n";
 import { type Link, ticketStory, type TimelineStep } from "../shared/ticket-story";
 import { type Attachment, AttachmentList, deliverableAttachment, ticketSourceAttachment } from "./attachments";
 import { StackedDialog } from "./dialog-stack";
 import { IconSwap } from "./motion";
+import { QuestionState } from "./questions";
 import { PressableRow } from "./row";
 import { Spinner, StalledPulse, WaitingDot } from "./spinner";
 import { StatusBadge } from "./status-badge";
 import { type TabEntry, TabStrip } from "./tabs";
 import { TimeBar } from "./time-bar";
 import { WriteUp } from "./write-up";
+import { useProgressLanguage } from "./language";
 
 type Colors = PluginWorkspacePanelProps["theme"]["colors"];
 type AttachmentContext = { workspaceId: string; workspaceDirectory: string; navigation?: PluginWorkspacePanelProps["navigation"] };
@@ -47,6 +49,7 @@ export function TicketStoryView({ colors, dashboard, ticket, now, live, context,
   // Undefined where Paseo can't navigate to an agent.
   onOpenAgent?(agentId: string): void;
 }) {
+  const { messages: m, locale } = useProgressLanguage();
   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)),
@@ -61,44 +64,44 @@ export function TicketStoryView({ colors, dashboard, ticket, now, live, context,
     ? 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 detail = ticket.waitingFor ? m.waitingDetail(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, label: { kind: "waiting" as const, id: 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",
+    ...(source ? [{ id: "write-up" as const, label: m.writeUp, 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: (
+    { id: "timeline", label: m.timeline, icon: "History", count: story.timeline.length, content: <View>{timeline}</View> },
+    ...(story.activity.length ? [{ id: "activity" as const, label: m.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>
+            <Text style={{ color: colors.foregroundMuted, fontSize: 12, lineHeight: 19, fontVariant: ["tabular-nums"] }}>{formatClientTimeOfDay(locale, entry.at, now)}</Text>
           </View>
         ))}
       </View>
     ) }] : []),
-    ...(story.questions.length ? [{ id: "questions" as const, label: "Questions", icon: "MessageCircleQuestion", count: story.questions.length, content: (
+    ...(story.questions.length ? [{ id: "questions" as const, label: m.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}`}
+            <PressableRow key={question.id} colors={colors} onSurface1 accessibilityRole="button" accessibilityLabel={m.openItem(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}
+                  ? <Text style={{ color: colors.foregroundMuted, fontSize: 12, lineHeight: 17 }}>{m.answered} <Text style={{ color: colors.statusSuccess, fontWeight: "600" }}>{question.answer.choice}</Text>{chosen ? <Text style={{ color: colors.foreground }}>: {chosen.label}</Text> : null}</Text>
+                  : <QuestionState colors={colors} question={question} />}
               </View>
               <View style={{ paddingTop: 2 }}><Icon name="ChevronRight" size={14} color={colors.foregroundMuted} /></View>
             </PressableRow>
@@ -106,7 +109,7 @@ export function TicketStoryView({ colors, dashboard, ticket, now, live, context,
         })}
       </View>
     ) }] : []),
-    ...(story.deliverables.length ? [{ id: "deliverables" as const, label: "Deliverables", icon: "Package", count: story.deliverables.length,
+    ...(story.deliverables.length ? [{ id: "deliverables" as const, label: m.deliverables, icon: "Package", count: story.deliverables.length,
       content: <AttachmentList colors={colors} attachments={story.deliverables.map(deliverableAttachment)} onOpen={onOpenAttachment} /> }] : []),
   ];
   const tabKey = `${context.workspaceId}:${ticket.id}`;
@@ -123,9 +126,9 @@ export function TicketStoryView({ colors, dashboard, ticket, now, live, context,
         <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
           <StatusBadge colors={colors} status={ticket.status} waiting={Boolean(ticket.waitingFor)} />
           <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`}
+          <Text accessibilityLabel={m.workedEstimate(formatClientMinutes(locale, story.workedMin), formatClientMinutes(locale, ticket.estimateMin))}
             style={{ color: over ? colors.statusDanger : colors.foregroundMuted, fontSize: 12, lineHeight: 18, fontVariant: ["tabular-nums"] }}>
-            {formatWorkDone(story.workedMin, ticket.estimateMin)}
+            {formatClientWorkDone(locale, story.workedMin, ticket.estimateMin)}
           </Text>
         </View>
         <TimeBar colors={colors} workedMin={story.workedMin} estimateMin={ticket.estimateMin} />
@@ -141,7 +144,7 @@ export function TicketStoryView({ colors, dashboard, ticket, now, live, context,
 
       {byTime ? (
         <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.
+          {m.byTimeHint(ticket.id, dashboard.run?.itemLabel ?? "Ticket")}
         </Text>
       ) : null}
     </View>
@@ -156,9 +159,9 @@ 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 {
+function agentTitle(raw: string | null, fallback: string): string {
   const title = raw?.trim();
-  if (!title) return "Untitled agent";
+  if (!title) return fallback;
   return title.length === PASEO_TITLE_CUT ? `${title.trimEnd()}…` : title;
 }
 
@@ -166,36 +169,39 @@ function agentTitle(raw: string | null): string {
 // 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 { messages: m } = useProgressLanguage();
   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,
+    needsPermission: snapshot.requiresAttention && snapshot.attentionReason === "permission",
+    hasError: snapshot.status === "error",
   }));
   if (!agent) return null;
-  const title = agentTitle(agent.title);
+  const title = agentTitle(agent.title, m.untitledAgent);
+  const alert = agent.needsPermission ? { text: m.permissionNeeded, danger: false } : agent.hasError ? { text: m.agentError, danger: true } : null;
   const open = onOpen ? () => onOpen(agentId) : undefined;
   // A quiet line in the summary: who's on it, and the way to their chat.
   return (
-    <PressableRow colors={colors} onSurface1 disabled={!open} accessibilityRole="button" accessibilityLabel={`Open the chat with ${title}`} onPress={open}
+    <PressableRow colors={colors} onSurface1 disabled={!open} accessibilityRole="button" accessibilityLabel={m.openAgentChat(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}
+      {alert ? <Text numberOfLines={1} style={{ flexShrink: 0, color: alert.danger ? colors.statusDanger : colors.statusWarning, fontSize: 12, lineHeight: 17 }}>{alert.text}</Text> : null}
       <View style={{ flex: 1 }} />
-      {open ? <Text style={{ color: colors.foregroundMuted, fontSize: 12, lineHeight: 17, fontWeight: "500" }}>Open chat</Text> : null}
+      {open ? <Text style={{ color: colors.foregroundMuted, fontSize: 12, lineHeight: 17, fontWeight: "500" }}>{m.openChat}</Text> : null}
     </PressableRow>
   );
 }
 
 function LinkNote({ colors, link }: { colors: Colors; link: Link }) {
-  return link === "by-time" ? <Text style={{ color: colors.foregroundMuted, opacity: 0.7 }}>  by time</Text> : null;
+  const { messages: m } = useProgressLanguage();
+  return link === "by-time" ? <Text style={{ color: colors.foregroundMuted, opacity: 0.7 }}>{m.byTime}</Text> : null;
 }
 
 // The same icons as the ticket rows, so a step reads like the status it was.
 // Past stage steps get an accent ringed dot: work that happened, now over.
 function Marker({ colors, step }: { colors: Colors; step: TimelineStep & { waiting?: boolean } }) {
-  if (step.waiting || (step.status === "not_started" && step.label !== "Added")) return <WaitingDot color={colors.foregroundMuted} />;
-  const icon = step.label === "Added" ? { name: "CirclePlus", color: colors.foregroundMuted }
+  if (step.waiting || (step.status === "not_started" && step.label.kind !== "added")) return <WaitingDot color={colors.foregroundMuted} />;
+  const icon = step.label.kind === "added" ? { name: "CirclePlus", color: colors.foregroundMuted }
     : step.status === "done" ? { name: "CircleCheck", color: colors.statusSuccess }
     : step.status === "blocked" ? { name: "Ban", color: colors.statusDanger }
     : step.status === "skipped" ? { name: "CircleSlash", color: colors.foregroundMuted }
@@ -206,6 +212,7 @@ function Marker({ colors, step }: { colors: Colors; step: TimelineStep & { waiti
 // 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 { messages: m, locale } = useProgressLanguage();
   const current = last && step.minutes !== null;
   const working = current && step.status === "working";
   return (
@@ -217,11 +224,11 @@ function TimelineRow({ colors, step, last, now, live }: { colors: Colors; step:
             {working ? (live ? <Spinner color={colors.accent} /> : <StalledPulse color={colors.statusWarning} />) : <Marker colors={colors} step={step} />}
           </IconSwap>
         </View>
-        <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>
+        <Text numberOfLines={1} style={{ flex: 1, minWidth: 0, color: colors.foreground, fontSize: 13, lineHeight: 18 }}>{timelineLabel(m, step.label)}</Text>
+        <Text style={{ color: colors.foregroundMuted, fontSize: 12, lineHeight: 18, fontVariant: ["tabular-nums"] }}>{formatClientTimeOfDay(locale, 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 numberOfLines={1} style={{ minWidth: 84, textAlign: "right", color: current ? colors.foreground : colors.foregroundMuted, fontSize: 12, lineHeight: 18, fontVariant: ["tabular-nums"] }}>
+          {step.minutes !== null ? current ? m.soFar(formatClientMinutes(locale, step.minutes)) : formatClientMinutes(locale, step.minutes) : ""}
         </Text>
       </View>
       {step.notes.map((note, index) => (

package/client/video.tsx

@@ -28,6 +28,8 @@ export interface LoadedVideo {
   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;
@@ -40,7 +42,7 @@ export async function loadVideo({ bytes, mimeType, readPiece, onProgress }: {
   while (loaded < bytes) {
     const piece = await readPiece(loaded);
     const decoded = decode(piece.data);
-    if (piece.bytes !== bytes || !decoded.length) throw new Error("the video changed while it was loading. Try again.");
+    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);

package/client/whats-new.tsx

@@ -0,0 +1,125 @@
+import { type PluginWorkspacePanelProps, useRpc } from "@getpaseo/plugin/client";
+import { Icon, Modal } from "@getpaseo/plugin/client/react-native";
+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 } from "../shared/whats-new";
+import { spans } from "../shared/write-up";
+import { PressScale, Presence } from "./motion";
+import { isLight, raised, tint } from "./surfaces";
+import { BlockView, Spans } from "./write-up";
+import { ProgressLanguageProvider, useProgressLanguage } from "./language";
+
+type Colors = PluginWorkspacePanelProps["theme"]["colors"];
+
+// Once after an update: this version's headline, with its full notes a press
+// away. Closing either hides both for this version.
+export function WhatsNewBanner({ colors, host }: { colors: Colors; host: PluginWorkspacePanelProps["host"] }) {
+  const { messages: m } = useProgressLanguage();
+  const fetchWhatsNew = useRpc(getWhatsNew);
+  const dismiss = useRpc(dismissWhatsNew);
+  const queryClient = useQueryClient();
+  const queryKey = ["progress", "whats-new", host.id];
+  const query = useQuery({ queryKey, queryFn: () => fetchWhatsNew({}) });
+  const whatsNew = query.data ?? null;
+  // Paseo's Modal keeps drawing its content while it fades out, so the notes outlive the dismissal.
+  const [shown, setShown] = useState<WhatsNew | null>(null);
+  const [open, setOpen] = useState(false);
+  const close = (version: string) => {
+    queryClient.setQueryData(queryKey, null);
+    dismiss({ version }).catch(() => queryClient.invalidateQueries({ queryKey }));
+  };
+  const closeDialog = () => {
+    if (!shown) return;
+    setOpen(false);
+    close(shown.version);
+  };
+
+  return (
+    <>
+      <Presence show={Boolean(whatsNew)}>{whatsNew ? (
+        <View style={{ flexDirection: "row", alignItems: "center", flexWrap: "wrap", gap: 10, margin: 12, marginBottom: 0, padding: 8, borderRadius: 12, ...raised(colors), backgroundColor: colors.surface1 }}>
+          <View style={{ alignSelf: "flex-start", height: 17, justifyContent: "center" }}><Icon name="Gift" size={14} color={colors.foregroundMuted} /></View>
+          <Text selectable style={{ flex: 1, minWidth: 200, color: colors.foregroundMuted, fontSize: 12, lineHeight: 17 }}>
+            <Text style={{ color: colors.foreground, fontWeight: "500" }}>{m.newVersion(whatsNew.version)}</Text> {whatsNew.headline}
+          </Text>
+          {/* 8px keeps the close button's 6px hit slop off the button beside it. */}
+          <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
+            <PressScale accessibilityRole="button" onPress={() => { setShown(whatsNew); setOpen(true); }}
+              style={({ pressed, hovered }) => ({ paddingHorizontal: 10, paddingVertical: 5, borderRadius: 4, backgroundColor: colors.accent, opacity: pressed ? 0.7 : hovered ? 0.85 : 1 })}>
+              <Text style={{ color: colors.accentForeground, fontSize: 12, lineHeight: 16, fontWeight: "600" }}>{m.seeWhatsNew}</Text>
+            </PressScale>
+            <PressScale accessibilityRole="button" accessibilityLabel={m.dismissWhatsNew} hitSlop={6} onPress={() => close(whatsNew.version)}
+              style={({ pressed, hovered }) => ({ padding: 5, borderRadius: 4, backgroundColor: pressed ? colors.border : hovered ? colors.surface2 : "transparent" })}>
+              <Icon name="X" size={16} color={colors.foregroundMuted} />
+            </PressScale>
+          </View>
+        </View>
+      ) : null}</Presence>
+      <Modal title={shown ? m.whatsNewTitle(shown.version) : ""} icon={<Icon name="Gift" size={16} color={colors.foregroundMuted} />}
+        open={open} onOpenChange={(next) => { if (!next) closeDialog(); }}>
+        <Modal.Content>
+        <ProgressLanguageProvider>
+          {shown ? <Notes colors={colors} notes={shown.notes} /> : null}
+          <View style={{ flexDirection: "row", justifyContent: "flex-end", marginTop: 8 }}>
+            <PressScale accessibilityRole="button" onPress={closeDialog}
+              style={({ pressed, hovered }) => ({ paddingHorizontal: 12, paddingVertical: 6, borderRadius: 6, backgroundColor: colors.accent, opacity: pressed ? 0.7 : hovered ? 0.85 : 1 })}>
+              <Text style={{ color: colors.accentForeground, fontSize: 12, lineHeight: 16, fontWeight: "600" }}>{m.gotIt}</Text>
+            </PressScale>
+          </View>
+        </ProgressLanguageProvider>
+        </Modal.Content>
+      </Modal>
+    </>
+  );
+}
+
+// Titled notes read as a short list of headings with their details; a changelog
+// written without titles stays a bulleted list.
+function Notes({ colors, notes }: { colors: Colors; notes: WhatsNewNote[] }) {
+  if (!notes.some((note) => note.title || note.kind)) {
+    return <View style={{ gap: 12 }}>{notes.map((note, index) => (
+      <BlockView key={index} colors={colors} block={{ kind: "item", marker: "•", depth: 0, spans: spans(note.body) }} first={index === 0} />
+    ))}</View>;
+  }
+  return (
+    <View style={{ gap: 20 }}>
+      {notes.map((note, index) => (
+        <View key={index} style={{ gap: 4 }}>
+          {note.title || note.kind ? (
+            <View style={{ flexDirection: "row", alignItems: "flex-start", gap: 8 }}>
+              {note.kind ? <KindTag colors={colors} kind={note.kind} /> : null}
+              {note.title ? <Text accessibilityRole="header" selectable style={{ flex: 1, color: colors.foreground, fontSize: 14, lineHeight: 20, fontWeight: "600" }}>{note.title}</Text> : null}
+            </View>
+          ) : null}
+          {note.body ? (
+            <Text selectable style={{ color: note.title ? colors.foregroundMuted : colors.foreground, fontSize: 13, lineHeight: 19 }}>
+              <Spans colors={colors} spans={spans(note.body)} />
+            </Text>
+          ) : null}
+        </View>
+      ))}
+    </View>
+  );
+}
+
+// Paseo has no violet for plugins, so it's Paseo's own "merged" purple, which
+// shares the status colors' lightness and chroma.
+const TONE_COLOR: Record<NoteTone, (colors: Colors) => string> = {
+  violet: (colors) => isLight(colors) ? "#7347af" : "#a890d5",
+  green: (colors) => colors.statusSuccess,
+  amber: (colors) => colors.statusWarning,
+};
+
+// Sits on the title's first line: 18px tall, 1px down in its 20px line. As wide
+// as "Improved" at least, so the titles beside the tags start at one edge.
+function KindTag({ colors, kind }: { colors: Colors; kind: NoteKind }) {
+  const { messages: m } = useProgressLanguage();
+  const color = TONE_COLOR[NOTE_KINDS[kind].tone](colors);
+  return (
+    <View style={{ marginTop: 1, minWidth: 64, borderRadius: 4, paddingHorizontal: 7, backgroundColor: tint(color, colors) }}>
+      <Text numberOfLines={1} style={{ textAlign: "center", color, fontSize: 11, lineHeight: 18, fontWeight: "500" }}>{m.noteKinds[kind]}</Text>
+    </View>
+  );
+}

package/client/when.tsx

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

package/client/write-up.tsx

@@ -9,6 +9,7 @@ import { type Block, parseWriteUp, type Span, withoutTitle, writeUpExcerpt } fro
 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";
@@ -22,6 +23,7 @@ export function WriteUp({ colors, source, workspaceId, workspaceDirectory, onOpe
   workspaceDirectory: string;
   onOpen(attachment: Attachment, group: Attachment[]): void;
 }) {
+  const { messages: m } = useProgressLanguage();
   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.
@@ -38,12 +40,12 @@ export function WriteUp({ colors, source, workspaceId, workspaceDirectory, onOpe
   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: {errorText(preview.error, "something went wrong")}</Text> : null}
+      {preview.error ? <Text style={{ color: colors.foregroundMuted, fontSize: 12, lineHeight: 18 }}>{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={`Open ${source.title}`} onPress={() => onOpen(source, [source])} grow />
+        <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 ? "Show less" : "Read more"} onPress={() => setAll(!all)} expanded={all} /> : null}
+        {excerpt.more ? <TextButton colors={colors} label={all ? m.showLess : m.readMore} onPress={() => setAll(!all)} expanded={all} /> : null}
       </View>
     </View>
   );
@@ -62,7 +64,7 @@ function TextButton({ colors, icon, label, accessibilityLabel, onPress, grow = f
   );
 }
 
-function BlockView({ colors, block, first }: { colors: Colors; block: Block; first: boolean }) {
+export function BlockView({ colors, block, first }: { colors: Colors; block: Block; first: boolean }) {
   switch (block.kind) {
     case "heading":
       return (
@@ -89,8 +91,9 @@ function BlockView({ colors, block, first }: { colors: Colors; block: Block; fir
   }
 }
 
-function Spans({ colors, spans }: { colors: Colors; spans: Span[] }) {
+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>)}</>;
 }