@stevecastaneda/paseo-progress 1.4.0 → 1.5.0

package/client/panel.tsx

@@ -14,10 +14,10 @@ import React, { useEffect, useRef, useState } from "react";
 import { ActivityIndicator, Animated, Platform, ScrollView, Text, View } from "react-native";
 import { finishedToFold, isFinished, shortTitle, type Activity, type Dashboard, type FileIssue, type ProgressSegment, type StuckItem, type Ticket } from "../shared/dashboard";
 import type { TicketStatus } from "../shared/events";
-import { formatMinutes, formatWorkDone, minutesSince } from "../shared/format";
+import { minutesSince } from "../shared/format";
+import { clientHeadline, formatClientMinutes, formatClientWorkDone } from "./i18n";
 import { markPanelOpened } from "../shared/rpc";
 import { useDashboard } from "./dashboard-query";
-import { STATUS_LABEL } from "./status-badge";
 import { TicketDialogs } from "./ticket-dialog";
 import { PressableRow } from "./row";
 import { TabStrip } from "./tabs";
@@ -25,6 +25,7 @@ import { ShowMoreRow, usePaged } from "./show-more";
 import { notePanelOpened } from "./panel-opened";
 import { NARROW_MAX, NarrowProvider, useNarrow } from "./narrow";
 import { errorText } from "./errors";
+import { useProgressLanguage } from "./language";
 
 type Colors = PluginWorkspacePanelProps["theme"]["colors"];
 
@@ -38,6 +39,7 @@ export function ProgressPanel(props: PanelProps) {
 }
 
 function WorkspaceProgress({ theme, workspaceId, host, layout, navigation, openSettings }: PanelProps) {
+  const { messages: m } = useProgressLanguage();
   const colors = theme.colors;
   const directory = useWorkspace(workspaceId, (workspace) => workspace.directory);
   // Paseo marks the workspace running while any of its agents is. Since 0.11 a Claude
@@ -53,10 +55,10 @@ function WorkspaceProgress({ theme, workspaceId, host, layout, navigation, openS
     <NarrowProvider value={narrow}>
     <ScrollView onLayout={(event) => setNarrow(event.nativeEvent.layout.width <= NARROW_MAX)}
       style={{ flex: 1, backgroundColor: colors.surface0 }} contentContainerStyle={{ paddingBottom: 16 }}>
-      {query.isPending ? <ActivityIndicator color={colors.foregroundMuted} accessibilityLabel="Loading progress" style={{ padding: 12 }} /> : null}
+      {query.isPending ? <ActivityIndicator color={colors.foregroundMuted} accessibilityLabel={m.loadingProgress} style={{ padding: 12 }} /> : null}
       {query.error ? (
         <Text accessibilityRole="alert" selectable style={{ color: colors.statusDanger, fontSize: 12, lineHeight: 18, padding: 12 }}>
-          Could not read progress: {errorText(query.error, "something went wrong")}
+          {m.readProgressError(errorText(query.error, m.unknownError))}
         </Text>
       ) : null}
       <WhatsNewBanner colors={colors} host={host} />
@@ -90,8 +92,9 @@ function useMarkPanelOpened(workspaceId: string, directory: string | null, neede
 
 // Optical: the 24px button centers on a 20 to 21px title line.
 function SettingsButton({ colors, onPress }: { colors: Colors; onPress(): void }) {
+  const { messages: m } = useProgressLanguage();
   return (
-    <PressScale accessibilityRole="button" accessibilityLabel="Open Progress settings" hitSlop={6} outerStyle={{ marginVertical: -2 }} onPress={onPress}
+    <PressScale accessibilityRole="button" accessibilityLabel={m.openSettings} hitSlop={6} outerStyle={{ marginVertical: -2 }} onPress={onPress}
       style={({ pressed, hovered }) => ({ padding: 4, borderRadius: 4, backgroundColor: pressed ? colors.border : hovered ? colors.surface1 : "transparent" })}>
       <Icon name="Settings" size={16} color={colors.foregroundMuted} />
     </PressScale>
@@ -99,18 +102,19 @@ function SettingsButton({ colors, onPress }: { colors: Colors; onPress(): void }
 }
 
 function EmptyState({ colors, file, openSettings }: { colors: Colors; file: string; openSettings(): void }) {
+  const { messages: m } = useProgressLanguage();
   return (
     <View style={{ padding: 12, paddingTop: 20, gap: 10 }}>
       <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
         <Icon name="ListChecks" size={18} color={colors.foregroundMuted} />
         <Text accessibilityRole="header" style={{ color: colors.foreground, fontSize: 14, lineHeight: 20, fontWeight: "500" }}>
-          No progress recorded yet
+          {m.noProgress}
         </Text>
         <View style={{ flex: 1 }} />
         <SettingsButton colors={colors} onPress={openSettings} />
       </View>
       <Text style={{ color: colors.foregroundMuted, fontSize: 12, lineHeight: 18 }}>
-        An agent working in this worktree records progress with the <Text style={{ color: colors.foreground }}>paseo-progress</Text> command. It shows up here as soon as the first run starts.
+        {m.emptyIntro[0]}<Text style={{ color: colors.foreground }}>paseo-progress</Text>{m.emptyIntro[1]}
       </Text>
       <View style={{ backgroundColor: colors.surface1, borderRadius: 6, padding: 10 }}>
         <Text selectable style={{ color: colors.foreground, fontFamily: mono(), fontSize: 12, lineHeight: 18 }}>
@@ -119,7 +123,7 @@ function EmptyState({ colors, file, openSettings }: { colors: Colors; file: stri
       </View>
       {/* So people know nothing lands in the repo. */}
       <Text style={{ color: colors.foregroundMuted, fontSize: 12, lineHeight: 18 }}>
-        Progress is saved outside the repo, in <Text selectable style={{ color: colors.foreground }}>{file}</Text>, so git never sees it.
+        {m.savedOutside[0]}<Text selectable style={{ color: colors.foreground }}>{file}</Text>{m.savedOutside[1]}
       </Text>
     </View>
   );
@@ -159,6 +163,8 @@ function DashboardView({ colors, dashboard, agentRunning, compact, workspaceId,
   file: string;
   navigation: PluginWorkspacePanelProps["navigation"];
 }) {
+  const { messages: m, locale } = useProgressLanguage();
+  const headline = clientHeadline(locale, dashboard);
   const now = useNow(15_000);
   // Quiet isn't stale while an agent in the workspace is still running.
   const stale = dashboard.stale && !agentRunning;
@@ -181,11 +187,11 @@ function DashboardView({ colors, dashboard, agentRunning, compact, workspaceId,
         {dashboard.run?.subtitle ? (
           <Text style={{ color: colors.foregroundMuted, fontSize: 12, lineHeight: 18 }}>{dashboard.run.subtitle}</Text>
         ) : null}
-        {dashboard.headline.length ? (
+        {headline.length ? (
           <Text accessibilityLiveRegion="polite" style={{ color: colors.foregroundMuted, fontSize: 12, lineHeight: 18 }}>
-            {dashboard.headline.map((part, index) => (
+            {headline.map((part, index) => (
               <Text key={part.text} style={part.tone === "danger" ? { color: colors.statusDanger } : undefined}>
-                {index ? ", " : ""}{part.text}
+                {index ? m.listSeparator : ""}{part.text}
               </Text>
             ))}
           </Text>
@@ -201,7 +207,7 @@ function DashboardView({ colors, dashboard, agentRunning, compact, workspaceId,
             {dashboard.run?.finished ? (
               <>
                 <Text style={{ color: colors.foregroundMuted, fontSize: 12, lineHeight: 18 }}>
-                  <Text style={{ color: colors.statusSuccess, fontWeight: "600" }}>Finished</Text> <When colors={colors} iso={dashboard.run.finished.at} now={now} />
+                  <Text style={{ color: colors.statusSuccess, fontWeight: "600" }}>{m.finished}</Text> <When colors={colors} iso={dashboard.run.finished.at} now={now} />
                 </Text>
                 <Text style={{ color: colors.foreground, fontSize: 12, lineHeight: 18 }}>{dashboard.run.finished.outcome}</Text>
               </>
@@ -214,7 +220,7 @@ function DashboardView({ colors, dashboard, agentRunning, compact, workspaceId,
         {dashboard.updatedAt && !dashboard.run?.finished ? (
           <StatusLine icon={<Icon name="Clock" size={12} color={colors.foregroundMuted} />}>
             <Text style={{ color: colors.foregroundMuted, fontSize: 12, lineHeight: 18 }}>
-              Last updated <When colors={colors} iso={dashboard.updatedAt} now={now} />
+              {m.lastUpdated}<When colors={colors} iso={dashboard.updatedAt} now={now} />
             </Text>
           </StatusLine>
         ) : null}
@@ -225,7 +231,7 @@ function DashboardView({ colors, dashboard, agentRunning, compact, workspaceId,
           {/* Optical: centers the 14px icon on the first 18px line. */}
           <View style={{ paddingTop: 2 }}><Icon name="TriangleAlert" size={14} color={colors.statusWarning} /></View>
           <Text style={{ flex: 1, color: colors.statusWarning, fontSize: 12, lineHeight: 18 }}>
-            Possibly stale. No update for {unbroken(formatMinutes(minutesSince(dashboard.updatedAt, now)))}. The work may have stopped, so working items show a warning until the next update.
+            {m.staleWarning(unbroken(formatClientMinutes(locale, minutesSince(dashboard.updatedAt, now))))}
           </Text>
         </View>
       ) : null}</Presence>
@@ -239,10 +245,10 @@ function DashboardView({ colors, dashboard, agentRunning, compact, workspaceId,
           ) : null}</Presence>
           <Presence show={Boolean(dashboard.stuck.length)} order={3}>{dashboard.stuck.length ? <StuckSection colors={colors} items={dashboard.stuck} now={now} /> : null}</Presence>
           <Presence show order={4}>
-          <Card colors={colors} icon="ListChecks" title={`${dashboard.run?.itemLabel ?? "Ticket"}s`}>
+          <Card colors={colors} icon="ListChecks" title={m.itemHeading(dashboard.run?.itemLabel ?? "Ticket")}>
             {dashboard.tickets.length === 0 ? (
               <Text style={{ color: colors.foregroundMuted, fontSize: 12, lineHeight: 18, paddingHorizontal: 10, paddingVertical: 8, borderTopWidth: 1, borderTopColor: colors.border }}>
-                No {(dashboard.run?.itemLabel ?? "ticket").toLowerCase()}s yet.
+                {m.noItems(dashboard.run?.itemLabel ?? "Ticket")}
               </Text>
             ) : (
               <TicketList colors={colors} dashboard={dashboard} live={live} now={now} workspaceId={workspaceId} onOpen={setOpenTicket} />
@@ -255,11 +261,11 @@ function DashboardView({ colors, dashboard, agentRunning, compact, workspaceId,
           <Presence show={hasHistory} order={5}>
             {hasHistory ? (
               <HistoryCard colors={colors} workspaceId={workspaceId} tabs={[
-                { id: "activity", label: "Activity", icon: "Activity", count: dashboard.activity.length, empty: "No activity yet.",
+                { id: "activity", label: m.activity, icon: "Activity", count: dashboard.activity.length, empty: m.noActivity,
                   content: <ActivityList colors={colors} activity={dashboard.activity} now={now} /> },
-                { id: "answered", label: "Answered", icon: "CircleCheck", count: dashboard.questions.answered.length, empty: "No answered questions yet.",
+                { id: "answered", label: m.answered, icon: "CircleCheck", count: dashboard.questions.answered.length, empty: m.noAnswers,
                   content: <AnsweredQuestionsList colors={colors} questions={dashboard.questions.answered} now={now} context={attachmentContext} /> },
-                { id: "deliverables", label: "Deliverables", icon: "Package", count: dashboard.deliverables.length, empty: "No deliverables yet.",
+                { id: "deliverables", label: m.deliverables, icon: "Package", count: dashboard.deliverables.length, empty: m.noDeliverables,
                   content: <DeliverablesList colors={colors} deliverables={dashboard.deliverables} now={now} workspaceId={workspaceId}
                     workspaceDirectory={workspaceDirectory} navigation={navigation} /> },
               ]} />
@@ -323,14 +329,14 @@ function ActivityList({ colors, activity, now }: { colors: Colors; activity: Act
 
 // Small and non-blocking: the rest of the dashboard still renders.
 function IssuesNotice({ colors, issues, file }: { colors: Colors; issues: FileIssue[]; file: string }) {
+  const { messages: m } = useProgressLanguage();
   const shown = issues.slice(0, 5);
   return (
     <View style={{ flexDirection: "row", gap: 8, margin: 12, marginBottom: 0, padding: 8, borderRadius: 6, backgroundColor: colors.surface1 }}>
       <View style={{ paddingTop: 1.5 }}><Icon name="FileWarning" size={14} color={colors.statusWarning} /></View>
       <Text selectable style={{ flex: 1, color: colors.foregroundMuted, fontSize: 12, lineHeight: 17 }}>
-        Skipped {issues.length === 1 ? "1 line" : `${issues.length} lines`} in {file}:{" "}
-        {shown.map((issue) => `line ${issue.line} (${issue.reason})`).join(", ")}
-        {issues.length > shown.length ? `, and ${issues.length - shown.length} more` : ""}.
+        {m.skippedLines(issues.length, file)}
+        {m.issueList(shown.map((issue) => m.issueLine(issue.line, issue.reason)), issues.length - shown.length)}
       </Text>
     </View>
   );
@@ -346,15 +352,16 @@ function Card({ colors, icon, title, children }: { colors: Colors; icon: string;
 }
 
 function ProgressBar({ colors, progress, live }: { colors: Colors; progress: Dashboard["progress"]; live: boolean }) {
+  const { messages: m, locale } = useProgressLanguage();
   const narrow = useNarrow();
   return (
     <View style={{ paddingHorizontal: 12, paddingTop: 12, paddingBottom: 12, gap: 8, borderBottomWidth: 1, borderBottomColor: colors.border }}>
       <View style={{ flexDirection: "row", alignItems: "baseline", gap: 8 }}>
         <Text style={{ flex: 1, color: colors.foregroundMuted, fontSize: 13, lineHeight: 18 }}>
-          <Text style={{ color: colors.foreground, fontWeight: "600" }}>{progress.percent}%</Text> {narrow ? "done" : "of estimated work done"}
+          <Text style={{ color: colors.foreground, fontWeight: "600" }}>{progress.percent}%</Text> {narrow ? m.workDoneShort : m.workDoneLong}
         </Text>
         <Text style={{ color: colors.foregroundMuted, fontSize: 12, lineHeight: 18 }}>
-          {formatWorkDone(progress.doneMin, progress.totalMin, progress.tookMin)}
+          {formatClientWorkDone(locale, progress.doneMin, progress.totalMin, progress.tookMin)}
         </Text>
       </View>
       <View accessibilityRole="progressbar" accessibilityValue={{ min: 0, max: 100, now: progress.percent }}
@@ -399,10 +406,11 @@ function Shimmer() {
 const STUCK_ICON: Record<StuckItem["kind"], string> = { blocked: "Ban", overdue: "Hourglass", manual: "Flag" };
 
 function StuckSection({ colors, items, now }: { colors: Colors; items: StuckItem[]; now: number }) {
+  const { messages: m, locale } = useProgressLanguage();
   const narrow = useNarrow();
   return (
     <View style={{ margin: 12, marginBottom: 0, borderWidth: 1, borderColor: colors.statusDanger, borderRadius: 6, overflow: "hidden" }}>
-      <SectionTitle colors={colors} icon="OctagonAlert" title="Stuck" color={colors.statusDanger} style={{ borderBottomWidth: 1, borderBottomColor: colors.border }} />
+      <SectionTitle colors={colors} icon="OctagonAlert" title={m.stuck} color={colors.statusDanger} style={{ borderBottomWidth: 1, borderBottomColor: colors.border }} />
       {items.map((item, index) => (
         <View key={item.key} style={{ flexDirection: "row", gap: 8, paddingHorizontal: 10, paddingVertical: 8, borderTopWidth: index ? 1 : 0, borderTopColor: colors.border }}>
           {/* Optical: centers the 14px icon on the 18px title line. */}
@@ -410,9 +418,9 @@ function StuckSection({ colors, items, now }: { colors: Colors; items: StuckItem
           <View style={{ flex: 1, minWidth: 0, gap: 2 }}>
           <Text style={{ color: colors.foreground, fontSize: 13, lineHeight: 18 }}>{item.title}</Text>
           <Text style={{ color: colors.foregroundMuted, fontSize: 12, lineHeight: 17 }}>
-            {item.kind === "overdue" ? `No update for longer than its ${unbroken(formatMinutes(item.estimateMin))} estimate. Last update ` : null}
-            {item.kind === "blocked" ? `Blocked${item.note ? `: ${item.note}` : ""}${narrow ? ", " : ". Since "}` : null}
-            {item.kind === "manual" ? `${item.ticketId ? `${item.reason}. ` : ""}Flagged ` : null}
+            {item.kind === "overdue" ? m.overdueUpdate(unbroken(formatClientMinutes(locale, item.estimateMin))) : null}
+            {item.kind === "blocked" ? m.blockedSince(item.note, narrow) : null}
+            {item.kind === "manual" ? `${item.ticketId ? `${item.reason}${m.sentenceBreak}` : ""}${m.flagged}` : null}
             <When colors={colors} iso={item.since} now={now} />
           </Text>
           </View>
@@ -452,15 +460,16 @@ function TicketList({ colors, dashboard, live, now, workspaceId, onOpen }: { col
 // Sits on the ticket rows' columns: status icon, label, estimate, then the
 // chevron, which points the way the list will move, like "Show 10 older".
 function FinishedRow({ colors, tickets, shown, onPress }: { colors: Colors; tickets: Ticket[]; shown: boolean; onPress(): void }) {
+  const { messages: m, locale } = useProgressLanguage();
   const done = tickets.filter((ticket) => ticket.status === "done").length;
   const skipped = tickets.length - done;
-  const label = [done ? `${done} done` : "", skipped ? `${skipped} skipped` : ""].filter(Boolean).join(", ");
+  const label = [done ? m.doneCount(done) : "", skipped ? m.skippedCount(skipped) : ""].filter(Boolean).join(m.listSeparator);
   const estimateMin = tickets.reduce((sum, ticket) => sum + (ticket.status === "done" ? ticket.estimateMin : 0), 0);
   const chevron = shown ? "ChevronUp" : "ChevronDown";
   const narrow = useNarrow();
   return (
     <PressableRow colors={colors} accessibilityRole="button" accessibilityState={{ expanded: shown }}
-      accessibilityLabel={`${shown ? "Hide" : "Show"} ${label}`} onPress={onPress}
+      accessibilityLabel={m.toggleFinished(shown, label)} onPress={onPress}
       style={{ flexDirection: "row", alignItems: "flex-start", gap: 10, paddingHorizontal: 10, paddingVertical: 8, borderTopWidth: 1, borderTopColor: colors.border }}>
       <View style={{ width: 16, paddingTop: 2, alignItems: "center" }}>
         <Icon name={done ? "Check" : "CircleSlash"} size={14} color={done ? colors.statusSuccess : colors.foregroundMuted} />
@@ -469,7 +478,7 @@ function FinishedRow({ colors, tickets, shown, onPress }: { colors: Colors; tick
       {/* Narrow ticket rows drop their chevron, so this total would sit off their estimate column. */}
       {narrow ? null : <>
         <View style={{ width: 12 }} />
-        <Text style={{ minWidth: 44, flexShrink: 0, textAlign: "right", color: colors.foregroundMuted, fontSize: 12, lineHeight: 18, fontVariant: ["tabular-nums"] }}>{estimateMin ? formatMinutes(estimateMin) : ""}</Text>
+        <Text style={{ minWidth: 44, flexShrink: 0, textAlign: "right", color: colors.foregroundMuted, fontSize: 12, lineHeight: 18, fontVariant: ["tabular-nums"] }}>{estimateMin ? formatClientMinutes(locale, estimateMin) : ""}</Text>
       </>}
       <View style={{ paddingTop: 2 }}>
         <IconSwap swapKey={chevron} size={14}><Icon name={chevron} size={14} color={colors.foregroundMuted} /></IconSwap>
@@ -480,16 +489,17 @@ function FinishedRow({ colors, tickets, shown, onPress }: { colors: Colors; tick
 
 // Press for the ticket's story. Hover and press only tint the row: it's a list, pressed often.
 function TicketRow({ colors, ticket, live, now, onOpen, deliverables }: { colors: Colors; ticket: Ticket; live: boolean; now: number; onOpen(): void; deliverables: number }) {
+  const { messages: m, locale } = useProgressLanguage();
   const muted = ticket.status === "skipped";
   const working = ticket.status === "working";
   // Narrow: tighter gaps and no chevron (the whole row still presses), so the title keeps its width.
   const narrow = useNarrow();
   return (
     <PressableRow colors={colors} onSurface1={working} transparentAtRest={!working}
-      accessibilityRole="button" accessibilityLabel={`${ticket.id} details`} onPress={onOpen}
+      accessibilityRole="button" accessibilityLabel={m.details(ticket.id)} onPress={onOpen}
       style={{ flexDirection: "row", alignItems: "flex-start", gap: narrow ? 6 : 10, paddingHorizontal: 10, paddingVertical: 8, borderTopWidth: 1, borderTopColor: colors.border }}>
       {/* The icon is the only status mark on the row; the ticket dialog spells it out in a badge. */}
-      <View accessible accessibilityLabel={ticket.waitingFor ? "Waiting" : STATUS_LABEL[ticket.status]} style={{ width: 16, paddingTop: 2, alignItems: "center", marginRight: narrow ? 2 : 0 }}>
+      <View accessible accessibilityLabel={ticket.waitingFor ? m.waiting : m.status[ticket.status]} style={{ width: 16, paddingTop: 2, alignItems: "center", marginRight: narrow ? 2 : 0 }}>
         <IconSwap swapKey={ticket.waitingFor || ticket.status === "not_started" ? "waiting" : ticket.status === "working" ? `working-${live}` : ticket.status} size={14}><StatusIcon colors={colors} status={ticket.status} live={live} waiting={Boolean(ticket.waitingFor)} /></IconSwap>
       </View>
       <View style={{ flex: 1, minWidth: 0, gap: 2 }}>
@@ -498,24 +508,24 @@ function TicketRow({ colors, ticket, live, now, onOpen, deliverables }: { colors
         </Text>
         {ticket.status === "working" && ticket.stage && ticket.stageSince ? (
           <Text style={{ color: colors.foregroundMuted, fontSize: 12, lineHeight: 17 }}>
-            {ticket.stage} stage started <When colors={colors} iso={ticket.stageSince} now={now} />
+            {m.stageStarted(ticket.stage)}<When colors={colors} iso={ticket.stageSince} now={now} />
           </Text>
         ) : null}
         {ticket.status === "working" && ticket.workingSince ? (
           <Text style={{ color: colors.foregroundMuted, fontSize: 12, lineHeight: 17 }}>
-            {narrow ? "Started working " : "Working since "}<When colors={colors} iso={ticket.workingSince} now={now} />
+            {narrow ? m.startedWorking : m.workingSince}<When colors={colors} iso={ticket.workingSince} now={now} />
           </Text>
         ) : null}
         {ticket.waitingFor ? (
-          <Text style={{ color: colors.foregroundMuted, fontSize: 12, lineHeight: 17 }}>Waits for {shortTitle(ticket.waitingFor.title)}</Text>
+          <Text style={{ color: colors.foregroundMuted, fontSize: 12, lineHeight: 17 }}>{m.waitsFor(shortTitle(ticket.waitingFor.title))}</Text>
         ) : null}
         {ticket.note ? <Text style={{ color: colors.foregroundMuted, fontSize: 12, lineHeight: 17 }}>{ticket.note}</Text> : null}
       </View>
       {/* Fixed slots so the Package icon and estimates line up down the list, whether or not a row has deliverables; they're listed in its dialog. The estimate slot fits "45m" up to "9h 45m"; longer ones grow rather than clip. */}
-      <View accessibilityLabel={deliverables ? (deliverables === 1 ? "Has a deliverable" : `Has ${deliverables} deliverables`) : undefined} style={{ width: 12, height: 18, justifyContent: "center" }}>
+      <View accessibilityLabel={deliverables ? m.hasDeliverables(deliverables) : undefined} style={{ width: 12, height: 18, justifyContent: "center" }}>
         {deliverables ? <Icon name="Package" size={12} color={colors.foregroundMuted} /> : null}
       </View>
-      <Text style={{ minWidth: 44, flexShrink: 0, textAlign: "right", color: colors.foregroundMuted, fontSize: 12, lineHeight: 18, fontVariant: ["tabular-nums"] }}>{formatMinutes(ticket.estimateMin)}</Text>
+      <Text style={{ minWidth: 44, flexShrink: 0, textAlign: "right", color: colors.foregroundMuted, fontSize: 12, lineHeight: 18, fontVariant: ["tabular-nums"] }}>{formatClientMinutes(locale, ticket.estimateMin)}</Text>
       {narrow ? null : <View style={{ paddingTop: 2 }}><Icon name="ChevronRight" size={14} color={colors.foregroundMuted} /></View>}
     </PressableRow>
   );

package/client/pill-popover.tsx

@@ -12,6 +12,7 @@ import { galleryFiles } from "./preview";
 import { QuestionDetail, QuestionState, useCopy } from "./questions";
 import { errorText } from "./errors";
 import { raised } from "./surfaces";
+import { useProgressLanguage } from "./language";
 
 type Colors = PluginButtonContentProps["theme"]["colors"];
 
@@ -22,6 +23,7 @@ const LIST_MAX_HEIGHT = 340;
 // What the pill opens: the open questions with their Copy buttons, and anything
 // stuck, so the user can answer without leaving the chat.
 export function AttentionPopover({ theme, host, layout, workspaceId, close, openPanel }: PluginButtonContentProps & { openPanel(): void }) {
+  const { messages: m } = useProgressLanguage();
   const colors = theme.colors;
   // Paseo draws the desktop popover on surface1 and the phone sheet on surface0.
   const onSurface1 = !layout.compact;
@@ -53,7 +55,7 @@ export function AttentionPopover({ theme, host, layout, workspaceId, close, open
         </List>
       ) : (
         <Text style={{ color: colors.foregroundMuted, fontSize: 12, lineHeight: 18 }}>
-          {query.error ? `Could not read progress: ${errorText(query.error, "something went wrong")}` : "Loading…"}
+          {query.error ? m.readProgressError(errorText(query.error, m.unknownError)) : m.loading}
         </Text>
       )}
       <StackedDialog colors={colors} now={Date.now()} onClose={() => setPreviewing(null)} context={{ workspaceId, workspaceDirectory: root }}
@@ -65,7 +67,7 @@ export function AttentionPopover({ theme, host, layout, workspaceId, close, open
             backgroundColor: onSurface1 ? (pressed ? colors.surface1 : colors.surface2) : pressed ? colors.surface2 : colors.surface1 })}>
           {/* Beside the chat on desktop; on a phone it opens as its own tab, shown with the tab's icon. */}
           <Icon name={touch ? "ListChecks" : "PanelRight"} size={touch ? 16 : 12} color={colors.foreground} />
-          <Text style={{ color: colors.foreground, fontSize: touch ? 15 : 12, lineHeight: touch ? 20 : 16, fontWeight: "600" }}>Open Progress</Text>
+          <Text style={{ color: colors.foreground, fontSize: touch ? 15 : 12, lineHeight: touch ? 20 : 16, fontWeight: "600" }}>{m.openProgress}</Text>
         </PressScale>
       </View>
     </View>
@@ -87,10 +89,11 @@ export function AttentionList({ colors, dashboard, onSurface1, onCopy, onOpenAtt
   onCopy(question: Dashboard["questions"]["open"][number], letter: string): void;
   onOpenAttachment(attachment: Attachment, group: Attachment[]): void;
 }) {
+  const { messages: m } = useProgressLanguage();
   const now = Date.now();
   // The last question can be answered while the popover is open.
   if (!dashboard.questions.open.length && !dashboard.stuck.length) {
-    return <Text style={{ color: colors.foregroundMuted, fontSize: 12, lineHeight: 18 }}>Nothing needs you right now.</Text>;
+    return <Text style={{ color: colors.foregroundMuted, fontSize: 12, lineHeight: 18 }}>{m.nothingNeedsYou}</Text>;
   }
   return (
     <>
@@ -110,13 +113,13 @@ export function AttentionList({ colors, dashboard, onSurface1, onCopy, onOpenAtt
         <View style={{ gap: 4 }}>
           <View style={{ flexDirection: "row", alignItems: "center", gap: 6 }}>
             <Icon name="OctagonAlert" size={12} color={colors.statusDanger} />
-            <Text style={{ color: colors.statusDanger, fontSize: 12, lineHeight: 17, fontWeight: "600" }}>Stuck</Text>
+            <Text style={{ color: colors.statusDanger, fontSize: 12, lineHeight: 17, fontWeight: "600" }}>{m.stuck}</Text>
           </View>
           {dashboard.stuck.map((item) => (
             <Text key={item.key} style={{ color: colors.foreground, fontSize: 12, lineHeight: 17 }}>
               {item.title}
               <Text style={{ color: colors.foregroundMuted }}>
-                {item.kind === "overdue" ? " (no update past its estimate)" : item.kind === "blocked" ? ` (blocked${item.note ? `: ${item.note}` : ""})` : ""}
+                {item.kind === "overdue" ? m.overdueAside : item.kind === "blocked" ? m.blockedAside(item.note) : ""}
               </Text>
             </Text>
           ))}

package/client/pill-state.ts

@@ -1,3 +1,4 @@
+import { messagesFor, type ProgressMessages } from "./i18n";
 import type { AttentionResult } from "../shared/rpc";
 
 // What an agent's Progress pill shows, decided in one place so its label, its
@@ -13,15 +14,15 @@ export type Pill =
 
 // What needs the user first, else the nudge, else (on a phone) the way in.
 // Null when there's no pill.
-export function pillFor(report: AttentionResult | undefined, where: { phone: boolean }): Pill | null {
+export function pillFor(report: AttentionResult | undefined, where: { phone: boolean }, m: ProgressMessages = messagesFor("en")): Pill | null {
   if (!report?.configured) return null;
   const { questions, stuck } = report;
   if (questions || stuck) {
     // Paseo cuts composer pills off at 160 px, so when something is stuck
     // too, the questions shorten to "2Q" to leave room for "1 stuck".
     const parts = [];
-    if (questions) parts.push(stuck ? `${questions}Q` : `${questions} ${questions === 1 ? "question" : "questions"}`);
-    if (stuck) parts.push(`${stuck} stuck`);
+    if (questions) parts.push(stuck ? m.shortQuestions(questions) : m.questionCount(questions));
+    if (stuck) parts.push(m.stuckCount(stuck));
     return { mode: "attention", label: parts.join(" · "), icon: stuck ? "stuck" : "questions" };
   }
   if (report.runOpen && !report.panelOpened) return { mode: "started", label: "Progress", icon: "started" };

package/client/pills.tsx

@@ -1,6 +1,6 @@
 import type { PluginButtonContentProps, PluginButtonIconProps, PluginButtonRegistration, PluginClientContext } from "@getpaseo/plugin/client";
 import { Icon } from "@getpaseo/plugin/client/react-native";
-import React, { useSyncExternalStore } from "react";
+import React, { useEffect, useSyncExternalStore } from "react";
 import { Platform } from "react-native";
 import { type AttentionResult, getAttention } from "../shared/rpc";
 import { isIdle, type Pill, pillFor } from "./pill-state";
@@ -8,6 +8,8 @@ import { observeDirectory, type PaseoAgentUpdate, type PaseoWorkspaceUpdate } fr
 import { onPanelOpened } from "./panel-opened";
 import { IconSwap } from "./motion";
 import { Spinner } from "./spinner";
+import { messagesFor, resolveLocale } from "./i18n";
+import { ProgressLanguageProvider, useProgressLanguage } from "./language";
 import { AttentionPopover } from "./pill-popover";
 
 export const PILL_POLL_MS = 5_000;
@@ -41,12 +43,13 @@ export function contributePills(client: PluginClientContext) {
   const workspaces = new Map<string, string>();
   // The last report per workspace; pillFor turns it into what the pill shows.
   const reports = new Map<string, AttentionResult>();
+  let locale = resolveLocale("system");
   const where = { phone: progressPanel().location === "workspace" };
-  const pillOf = (workspaceId: string) => pillFor(reports.get(workspaceId), where);
+  const pillOf = (workspaceId: string) => pillFor(reports.get(workspaceId), where, messagesFor(locale));
   // Bumped on each report so a poll that was already in flight can't bring the pill back.
   let openedReports = 0;
   const listeners = new Set<() => void>();
-  const pills = new Map<string, { workspaceId: string; label: string; mode: Pill["mode"]; pill: PluginButtonRegistration }>();
+  const pills = new Map<string, { workspaceId: string; label: string; title: string; mode: Pill["mode"]; pill: PluginButtonRegistration }>();
   const pending = new Set<string>();
   // Polls left before an idle workspace is checked again, and when each was last checked.
   const idleWait = new Map<string, number>();
@@ -56,6 +59,16 @@ export function contributePills(client: PluginClientContext) {
   let timer: ReturnType<typeof setTimeout> | undefined;
 
   function PillIcon(props: PluginButtonIconProps) {
+    return <ProgressLanguageProvider><LocalizedPillIcon {...props} /></ProgressLanguageProvider>;
+  }
+
+  function LocalizedPillIcon(props: PluginButtonIconProps) {
+    const language = useProgressLanguage();
+    useEffect(() => {
+      if (stopped || locale === language.locale) return;
+      locale = language.locale;
+      publish();
+    }, [language.locale]);
     const icon = useSyncExternalStore(
       (listener) => { listeners.add(listener); return () => { listeners.delete(listener); }; },
       () => pillOf(props.workspaceId)?.icon ?? "open",
@@ -76,11 +89,11 @@ export function contributePills(client: PluginClientContext) {
   };
 
   const buttonFor = (workspaceId: string, mode: Pill["mode"], label: string) => mode === "attention"
-    ? { title: "Progress needs you", icon: PillIcon, label, behavior: { kind: "popover" as const, Content: PillContent } }
-    : { title: "Open Progress", icon: PillIcon, label, behavior: { kind: "action" as const, onPress: () => openPanel(workspaceId) } };
+    ? { title: messagesFor(locale).needsYou, icon: PillIcon, label, behavior: { kind: "popover" as const, Content: PillContent } }
+    : { title: messagesFor(locale).openProgress, icon: PillIcon, label, behavior: { kind: "action" as const, onPress: () => openPanel(workspaceId) } };
 
   function PillContent(props: PluginButtonContentProps) {
-    return <AttentionPopover {...props} openPanel={() => openPanel(props.workspaceId)} />;
+    return <ProgressLanguageProvider><AttentionPopover {...props} openPanel={() => openPanel(props.workspaceId)} /></ProgressLanguageProvider>;
   }
 
   const publish = () => {
@@ -92,6 +105,7 @@ export function contributePills(client: PluginClientContext) {
       const wanted = pillOf(workspaceId);
       if (!wanted) continue;
       const { mode, label } = wanted;
+      const title = mode === "attention" ? messagesFor(locale).needsYou : messagesFor(locale).openProgress;
       seen.add(agent.id);
       const existing = pills.get(agent.id);
       if (existing && existing.workspaceId !== workspaceId) {
@@ -101,13 +115,13 @@ export function contributePills(client: PluginClientContext) {
       const entry = pills.get(agent.id);
       if (!entry) {
         const pill = client.addComposerPill({ id: "progress-attention", workspaceId, agentId: agent.id, button: buttonFor(workspaceId, mode, label) });
-        pills.set(agent.id, { workspaceId, label, mode, pill });
+        pills.set(agent.id, { workspaceId, title, label, mode, pill });
       } else if (entry.mode !== mode) {
         entry.pill.update(buttonFor(workspaceId, mode, label));
-        Object.assign(entry, { mode, label });
-      } else if (entry.label !== label) {
-        entry.pill.update({ label });
-        entry.label = label;
+        Object.assign(entry, { mode, label, title });
+      } else if (entry.label !== label || entry.title !== title) {
+        entry.pill.update({ label, title });
+        Object.assign(entry, { label, title });
       }
     }
     for (const [agentId, entry] of pills) {

package/client/preview.tsx

@@ -9,7 +9,8 @@ import { folderAttachments, isFolder, previewKind } from "../shared/attachments"
 import { canOpenOnHost, previewDeliverable, readDeliverablePiece } from "../shared/rpc";
 import { PressScale } from "./motion";
 import { imageOutline, raised } from "./surfaces";
-import { loadVideo, VideoPlayer } from "./video";
+import { loadVideo, VideoChangedError, VideoPlayer } from "./video";
+import { useProgressLanguage } from "./language";
 
 type Colors = PluginWorkspacePanelProps["theme"]["colors"];
 
@@ -39,6 +40,7 @@ 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 }: PreviewProps & { onLong(long: boolean): void }) {
+  const { messages: m } = useProgressLanguage();
   const fetchPreview = useRpc(previewDeliverable);
   const readPiece = useRpc(readDeliverablePiece);
   const checkHost = useRpc(canOpenOnHost);
@@ -118,19 +120,19 @@ export function PreviewContent({ colors, attachment, workspaceId, workspaceDirec
   useEffect(() => onLong(long), [long]);
   // 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 ? `Loading video, ${Math.floor(loading * 100)}%` : null;
+  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 content = (
     <>
       {preview.isPending ? (
         <View style={{ alignItems: "center", gap: 8, padding: 24 }}>
-          <ActivityIndicator color={colors.foregroundMuted} accessibilityLabel="Loading preview" />
+          <ActivityIndicator color={colors.foregroundMuted} accessibilityLabel={m.loadingPreview} />
           {videoLoading ? <Text style={[caption, { fontVariant: ["tabular-nums"] }]}>{videoLoading}</Text> : null}
         </View>
       ) : null}
       {preview.error ? (
         <Text accessibilityRole="alert" selectable style={{ color: colors.statusDanger, fontSize: 12, lineHeight: 18 }}>
-          Could not preview it: {errorText(preview.error, "something went wrong")}
+          {m.previewError(preview.error instanceof VideoChangedError ? m.videoChanged : errorText(preview.error, m.unknownError))}
         </Text>
       ) : null}
       {preview.data?.kind === "text" ? (
@@ -140,7 +142,7 @@ export function PreviewContent({ colors, attachment, workspaceId, workspaceDirec
           </Text>
           {preview.data.truncated ? (
             <Text style={{ color: colors.foregroundMuted, fontSize: 11, lineHeight: 16, paddingTop: 8 }}>
-              Showing the first 256 KB.{canOpen ? " Press Open to see the rest in its default app." : ""}
+              {m.truncatedText}{canOpen ? m.openRest : ""}
             </Text>
           ) : null}
         </View>
@@ -166,7 +168,7 @@ export function PreviewContent({ colors, attachment, workspaceId, workspaceDirec
         {attachment.path}
       </Text>
       {/* Optical: the 22px button centers on the 17px caption line without growing it. */}
-      <PressScale accessibilityRole="button" accessibilityLabel={`Copy the path of ${attachment.title}`} hitSlop={6} outerStyle={{ marginVertical: -3 }}
+      <PressScale accessibilityRole="button" accessibilityLabel={m.copyItemPath(attachment.title)} hitSlop={6} outerStyle={{ marginVertical: -3 }}
         onPress={onCopyPath}
         style={({ pressed, hovered }) => ({ padding: 4, borderRadius: 4, backgroundColor: pressed ? colors.border : hovered ? colors.surface2 : "transparent" })}>
         <Icon name="Copy" size={14} color={colors.foregroundMuted} />
@@ -181,7 +183,7 @@ export function PreviewContent({ colors, attachment, workspaceId, workspaceDirec
       </View>
       {canStep ? <Stepper colors={colors} index={index} count={items.length} onStep={step} nextRef={nextButton} /> : null}
       <View style={{ flex: 1, alignItems: "flex-end" }}>
-        {canOpen ? <DialogButton colors={colors} icon="ExternalLink" label="Open" accessibilityLabel="Open in its default app" onPress={onOpenOnHost} /> : null}
+        {canOpen ? <DialogButton colors={colors} icon="ExternalLink" label={m.open} accessibilityLabel={m.openDefault} onPress={onOpenOnHost} /> : null}
       </View>
     </View>
   );
@@ -219,12 +221,13 @@ function estimatedHeight(data: { kind: "image" | "video" } | { kind: "text"; tex
 }
 
 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;
-  if (!entries.length) return <Text style={caption}>Nothing in {folder.title} yet.</Text>;
+  if (!entries.length) return <Text style={caption}>{m.emptyFolder(folder.title)}</Text>;
   return (
     <View style={{ gap: 8, opacity: dimmed ? 0.6 : 1 }}>
       <AttachmentList colors={colors} attachments={entries} onOpen={onOpen} />
-      {truncated ? <Text style={caption}>Showing the first {entries.length}.</Text> : null}
+      {truncated ? <Text style={caption}>{m.firstEntries(entries.length)}</Text> : null}
     </View>
   );
 }
@@ -261,16 +264,18 @@ export function DialogButton({ colors, icon, label, accessibilityLabel, onPress,
 
 // Returns to the dialog this one was opened from. For surface1 dialogs.
 export function BackButton({ colors, onPress }: { colors: Colors; onPress(): void }) {
-  return <DialogButton colors={colors} icon="ChevronLeft" label="Back" onPress={onPress} outerStyle={{ alignSelf: "flex-start" }} />;
+  const { messages: m } = useProgressLanguage();
+  return <DialogButton colors={colors} icon="ChevronLeft" label={m.back} onPress={onPress} outerStyle={{ alignSelf: "flex-start" }} />;
 }
 
 // Previous and next through a gallery, with "2 of 3" between.
 function Stepper({ colors, index, count, onStep, nextRef }: { colors: Colors; index: number; count: number; onStep(offset: number): void; nextRef: React.Ref<View> }) {
+  const { messages: m } = useProgressLanguage();
   return (
     <View style={{ flexDirection: "row", alignItems: "center", gap: 10 }}>
-      <DialogButton colors={colors} icon="ChevronLeft" accessibilityLabel="Previous file" onPress={() => onStep(-1)} />
-      <Text style={{ minWidth: 44, textAlign: "center", color: colors.foregroundMuted, fontSize: 13, lineHeight: 18, fontVariant: ["tabular-nums"] }}>{index + 1} of {count}</Text>
-      <DialogButton ref={nextRef} colors={colors} icon="ChevronRight" accessibilityLabel="Next file" onPress={() => onStep(1)} />
+      <DialogButton colors={colors} icon="ChevronLeft" accessibilityLabel={m.previousFile} onPress={() => onStep(-1)} />
+      <Text style={{ minWidth: 44, textAlign: "center", color: colors.foregroundMuted, fontSize: 13, lineHeight: 18, fontVariant: ["tabular-nums"] }}>{m.galleryPosition(index + 1, count)}</Text>
+      <DialogButton ref={nextRef} colors={colors} icon="ChevronRight" accessibilityLabel={m.nextFile} onPress={() => onStep(1)} />
     </View>
   );
 }