@stevecastaneda/paseo-progress 1.4.0 → 1.5.0

package/client/questions.tsx

@@ -10,6 +10,7 @@ import { PressScale } from "./motion";
 import { StackedDialog } from "./dialog-stack";
 import { raised } from "./surfaces";
 import { When } from "./when";
+import { useProgressLanguage } from "./language";
 
 type Colors = PluginWorkspacePanelProps["theme"]["colors"];
 
@@ -23,13 +24,14 @@ export function replyWithChoice(question: Pick<Question, "id" | "title">, letter
 }
 
 export function useCopy() {
+  const { messages: m } = useProgressLanguage();
   const toast = useToast();
   return async function copy(question: Question, letter?: string) {
     try {
       await copyText(letter ? replyWithChoice(question, letter) : replyPrefix(question));
-      toast.show(letter ? `Copied "${question.id} ${letter}". Paste it to your agent.` : `Copied ${question.id} for your reply`, { variant: "success" });
+      toast.show(letter ? m.copiedChoice(question.id, letter) : m.copiedQuestion(question.id), { variant: "success" });
     } catch {
-      toast.error("Could not copy. Select the text and use Copy.");
+      toast.error(m.copyFailure);
     }
   };
 }
@@ -50,15 +52,16 @@ export function QuestionsSection({ colors, questions, answered, now, context }:
   now: number;
   context: AttachmentContext;
 }) {
+  const { messages: m } = useProgressLanguage();
   const [openId, setOpenId] = useState<string | null>(null);
   const copy = useCopy();
   return (
     <View style={{ margin: 12, marginBottom: 0, borderWidth: 1, borderColor: colors.accent, borderRadius: 6, overflow: "hidden" }}>
       <View style={{ flexDirection: "row", alignItems: "center", flexWrap: "wrap", gap: 8, paddingHorizontal: 10, paddingVertical: 8, borderBottomWidth: 1, borderBottomColor: colors.border }}>
         <Icon name="MessageCircleQuestion" size={14} color={colors.accent} />
-        <Text accessibilityRole="header" style={{ color: colors.foreground, fontSize: 13, lineHeight: 18, fontWeight: "600" }}>Questions</Text>
+        <Text accessibilityRole="header" style={{ color: colors.foreground, fontSize: 13, lineHeight: 18, fontWeight: "600" }}>{m.questions}</Text>
         <View style={{ borderWidth: 1, borderColor: colors.accent, backgroundColor: colors.accent, borderRadius: 999, paddingHorizontal: 8, paddingVertical: 1 }}>
-          <Text style={{ color: colors.accentForeground, fontSize: 11, lineHeight: 16 }}>{questions.length} waiting</Text>
+          <Text style={{ color: colors.accentForeground, fontSize: 11, lineHeight: 16 }}>{m.waitingCount(questions.length)}</Text>
         </View>
       </View>
       {questions.map((question, index) => (
@@ -79,6 +82,7 @@ export function AnsweredQuestionsList({ colors, questions, now, context }: {
   now: number;
   context: AttachmentContext;
 }) {
+  const { messages: m } = useProgressLanguage();
   const [openId, setOpenId] = useState<string | null>(null);
   const paged = usePaged(questions);
   return (
@@ -88,7 +92,7 @@ export function AnsweredQuestionsList({ colors, questions, now, context }: {
         const chosen = question.options.find((option) => option.letter === answer.choice);
         return (
           <View key={question.id} style={{ borderTopWidth: index ? 1 : 0, borderTopColor: colors.border }}>
-            <PressableRow colors={colors} accessibilityRole="button" accessibilityLabel={`${question.id} details`} onPress={() => setOpenId(question.id)}
+            <PressableRow colors={colors} accessibilityRole="button" accessibilityLabel={m.details(question.id)} onPress={() => setOpenId(question.id)}
               style={{ flexDirection: "row", alignItems: "center", gap: 8, paddingHorizontal: 10, paddingVertical: 8 }}>
               {/* Room for two-digit ids so titles line up; longer ones widen instead of wrapping. */}
               <Text numberOfLines={1} style={{ color: colors.foregroundMuted, fontSize: 12, lineHeight: 17, fontWeight: "600", fontVariant: ["tabular-nums"], minWidth: 30, flexShrink: 0 }}>{question.id}</Text>
@@ -110,6 +114,7 @@ export function AnsweredQuestionsList({ colors, questions, now, context }: {
 }
 
 function AnswerSummary({ colors, question, now }: { colors: Colors; question: Question; now: number }) {
+  const { messages: m } = useProgressLanguage();
   const answer = question.answer!;
   const chosen = question.options.find((option) => option.letter === answer.choice);
   return (
@@ -119,11 +124,11 @@ function AnswerSummary({ colors, question, now }: { colors: Colors; question: Qu
         {chosen ? ` ${chosen.label}.` : ""}
         {answer.words ? <Text style={{ color: colors.foregroundMuted }}> “{answer.words}”</Text> : null}
         <Text style={{ color: colors.foregroundMuted }}>
-          {answer.changedCourse ? " The agent had already built another option, so work changed course." : ""}
+          {answer.changedCourse ? m.changedCourse : ""}
         </Text>
       </Text>
       <Text style={{ color: colors.foregroundMuted, fontSize: 11, lineHeight: 16 }}>
-        Answer recorded <When colors={colors} iso={answer.at} now={now} />{question.raisedBy ? `, raised by ${question.raisedBy}` : ""}
+        {m.answerRecorded}<When colors={colors} iso={answer.at} now={now} />{question.raisedBy ? m.raisedBy(question.raisedBy) : ""}
       </Text>
     </View>
   );
@@ -136,9 +141,10 @@ function QuestionRow({ colors, question, first, onOpen, onCopy }: {
   onOpen(): void;
   onCopy(): void;
 }) {
+  const { messages: m } = useProgressLanguage();
   return (
     <View style={{ flexDirection: "row", gap: 8, paddingHorizontal: 10, paddingVertical: 10, borderTopWidth: first ? 0 : 1, borderTopColor: colors.border }}>
-      <PressScale accessibilityRole="button" accessibilityLabel={`Copy ${question.id} for your reply`} onPress={onCopy} hitSlop={6}
+      <PressScale accessibilityRole="button" accessibilityLabel={m.copyQuestion(question.id)} onPress={onCopy} hitSlop={6}
         outerStyle={{ alignSelf: "flex-start", marginTop: 1 }}
         style={({ pressed }) => ({
           // One width for every id, so the questions beside them start on one edge.
@@ -151,7 +157,7 @@ function QuestionRow({ colors, question, first, onOpen, onCopy }: {
         })}>
         <Text style={{ color: colors.foreground, fontSize: 13, lineHeight: 17, fontWeight: "600" }}>{question.id}</Text>
       </PressScale>
-      <PressableRow colors={colors} accessibilityRole="button" accessibilityLabel={`${question.id} choices`} onPress={onOpen}
+      <PressableRow colors={colors} accessibilityRole="button" accessibilityLabel={m.questionChoices(question.id)} onPress={onOpen}
         style={{ flex: 1, minWidth: 0, flexDirection: "row", alignItems: "flex-start", gap: 8, borderRadius: 4, margin: -4, padding: 4 }}>
         <View style={{ flex: 1, minWidth: 0, gap: 2 }}>
           <Text style={{ color: colors.foreground, fontSize: 13, lineHeight: 19 }}>{question.question}</Text>
@@ -189,16 +195,17 @@ export function QuestionView({ colors, question, now, onCopy, onOpenAttachment,
 // Under an open question: whether the agent stopped, waits, or builds its pick,
 // and its pick when there are no lettered options to tag.
 export function QuestionState({ colors, question }: { colors: Colors; question: Question }) {
+  const { messages: m } = useProgressLanguage();
   const value = { color: colors.foreground };
   // The letter alone means nothing in the rows that don't list the options.
   const pick = question.options.find((option) => option.letter === question.recommended);
   return (
     <Text style={{ color: colors.foregroundMuted, fontSize: 12, lineHeight: 17 }}>
-      {question.state === "building" ? <>Building with <Text style={value}>{question.recommended}{pick ? `: ${pick.label}` : ""}</Text></> : (
+      {question.state === "building" ? <>{m.buildingWith}<Text style={value}>{question.recommended}{pick ? `${m.colon}${pick.label}` : ""}</Text></> : (
         <>
-          {!question.options.length && question.recommended ? <>Recommended: <Text style={value}>{question.recommended}</Text>. </> : null}
-          {question.state === "stopped" ? "Agent stopped until you answer" : "Waiting for you"}
-          {question.big ? <>. <Text style={value}>Big</Text>: {question.big}</> : null}
+          {!question.options.length && question.recommended ? <>{m.recommended}{m.colon}<Text style={value}>{question.recommended}</Text>{m.sentenceBreak}</> : null}
+          {question.state === "stopped" ? m.agentStopped : m.waitingForYou}
+          {question.big ? <>{m.sentenceBreak}<Text style={value}>{m.big}</Text>{m.colon}{question.big}</> : null}
         </>
       )}
     </Text>
@@ -215,6 +222,7 @@ export function QuestionDetail({ colors, question, now, onCopy, onOpenAttachment
   onOpenAttachment(attachment: Attachment, group: Attachment[]): void;
   onSurface1?: boolean;
 }) {
+  const { messages: m } = useProgressLanguage();
   const button = onSurface1 ? { rest: colors.surface2, pressed: colors.surface1 } : { rest: colors.surface1, pressed: colors.surface2 };
   return (
     <View style={{ gap: 8, paddingTop: 2 }}>
@@ -230,17 +238,17 @@ export function QuestionDetail({ colors, question, now, onCopy, onOpenAttachment
             <View style={{ flex: 1, gap: 2 }}>
               <Text style={{ color: colors.foreground, fontSize: 13, lineHeight: 18 }}>
                 {option.label}
-                {chosen ? <Text style={{ color: colors.statusSuccess }}>  Your answer</Text> : null}
-                {recommended ? <Text style={{ color: settled ? colors.foregroundMuted : colors.accent }}>  Recommended</Text> : null}
+                {chosen ? <Text style={{ color: colors.statusSuccess }}>{"  " + m.yourAnswer}</Text> : null}
+                {recommended ? <Text style={{ color: settled ? colors.foregroundMuted : colors.accent }}>{"  " + m.recommended}</Text> : null}
               </Text>
               {option.consequence ? <Text style={{ color: colors.foregroundMuted, fontSize: 12, lineHeight: 17 }}>{option.consequence}</Text> : null}
             </View>
             {!question.answer ? (
-              <PressScale accessibilityRole="button" accessibilityLabel={`Copy ${question.id} ${option.letter} for your agent`}
+              <PressScale accessibilityRole="button" accessibilityLabel={m.copyChoiceForAgent(question.id, option.letter)}
                 onPress={() => onCopy(option.letter)} hitSlop={4}
                 style={({ pressed }) => ({ flexDirection: "row", alignItems: "center", gap: 4, paddingLeft: 6, paddingRight: 8, paddingVertical: 3, borderRadius: 4, ...raised(colors), backgroundColor: pressed ? button.pressed : button.rest })}>
                 <Icon name="Copy" size={12} color={colors.foreground} />
-                <Text style={{ color: colors.foreground, fontSize: 12, lineHeight: 16 }}>Copy {question.id} {option.letter}</Text>
+                <Text style={{ color: colors.foreground, fontSize: 12, lineHeight: 16 }}>{m.copyChoice(question.id, option.letter)}</Text>
               </PressScale>
             ) : null}
           </View>
@@ -251,7 +259,7 @@ export function QuestionDetail({ colors, question, now, onCopy, onOpenAttachment
       ) : null}
       <AttachmentList colors={colors} attachments={questionAttachments(question)} onOpen={onOpenAttachment} />
       <Text style={{ color: colors.foregroundMuted, fontSize: 11, lineHeight: 16 }}>
-        Asked <When colors={colors} iso={question.askedAt} now={now} />{question.raisedBy ? `, raised by ${question.raisedBy}` : ""}
+        {m.asked}<When colors={colors} iso={question.askedAt} now={now} />{question.raisedBy ? m.raisedBy(question.raisedBy) : ""}
       </Text>
     </View>
   );

package/client/settings.tsx

@@ -2,39 +2,57 @@ import { type PluginSurfaceProps, useSettings } from "@getpaseo/plugin/client";
 import { SettingsAction, SettingsCard, SettingsSection, SettingsSelect } from "@getpaseo/plugin/client/ui";
 import React from "react";
 import { Text } from "react-native";
-import { DEFAULT_QUESTION_MODE, QUESTION_MODE_RULES, QUESTION_MODES } from "../shared/question-modes";
-import { questionSettings } from "../shared/settings";
-
-const OPTIONS = QUESTION_MODES.map((value) => ({ label: QUESTION_MODE_RULES[value].label, value }));
+import { DEFAULT_QUESTION_MODE, QUESTION_MODES } from "../shared/question-modes";
+import { questionSettings, LANGUAGE_PREFERENCES } from "../shared/settings";
+import { useProgressLanguage } from "./language";
 
 export function QuestionSettings({ theme }: PluginSurfaceProps) {
+  return <><QuestionModeSettings theme={theme} /><DisplaySettings theme={theme} /></>;
+}
+
+type Colors = PluginSurfaceProps["theme"]["colors"];
+
+function DisplaySettings({ theme }: Pick<PluginSurfaceProps, "theme">) {
+  const { messages: m, settings } = useProgressLanguage();
+  const muted = { color: theme.colors.foregroundMuted, fontSize: 13, lineHeight: 19 };
+  const options = LANGUAGE_PREFERENCES.map((value) => ({ value, label: value === "system" ? m.systemLanguage : value === "en" ? "English" : "简体中文" }));
+  return (
+    <SettingsSection title={m.display}>
+      {settings.status === "loading" ? <Text style={muted}>{m.loadingSettings}</Text>
+        : settings.status !== "ready" ? <SettingsRecovery colors={theme.colors} settings={settings} />
+        : <SettingsCard><SettingsSelect label={m.language} hint={m.languageHint} value={settings.values.language} options={options}
+          disabled={settings.saving} error={settings.saveError}
+          onValueChange={(language) => void settings.save({ ...settings.values, language }, settings.revision)} /></SettingsCard>}
+    </SettingsSection>
+  );
+}
+
+function QuestionModeSettings({ theme }: Pick<PluginSurfaceProps, "theme">) {
+  const { messages: m } = useProgressLanguage();
   const settings = useSettings(questionSettings);
   const muted = { color: theme.colors.foregroundMuted, fontSize: 13, lineHeight: 19 };
-  if (settings.status === "loading") return <Text style={muted}>Loading settings…</Text>;
-  if (settings.status !== "ready") {
-    return (
-      <SettingsSection title="Questions">
-        <Text style={muted}>{settings.error}</Text>
-        <SettingsCard>
-          <SettingsAction label="Try again" actionLabel="Reload" onPress={settings.reload} />
-          {settings.status === "invalid" ? <SettingsAction label={`Go back to ${QUESTION_MODE_RULES[DEFAULT_QUESTION_MODE].label}`} actionLabel="Reset" onPress={settings.reset} /> : null}
-        </SettingsCard>
-      </SettingsSection>
-    );
-  }
   return (
-    <SettingsSection title="Questions">
-      <SettingsCard>
-        <SettingsSelect
-          label="When an agent asks you a question"
-          hint={QUESTION_MODE_RULES[settings.values.mode].hint}
-          error={settings.saveError}
-          value={settings.values.mode}
-          options={OPTIONS}
-          disabled={settings.saving}
-          onValueChange={(mode) => void settings.save({ ...settings.values, mode }, settings.revision)}
-        />
-      </SettingsCard>
+    <SettingsSection title={m.questions}>
+      {settings.status === "loading" ? <Text style={muted}>{m.loadingSettings}</Text>
+        : settings.status !== "ready" ? <SettingsRecovery colors={theme.colors} settings={settings} resetLabel={m.resetTo(m.questionModes[DEFAULT_QUESTION_MODE].label)} />
+        : <SettingsCard><SettingsSelect label={m.questionMode} hint={m.questionModes[settings.values.mode].hint}
+          error={settings.saveError} value={settings.values.mode} options={QUESTION_MODES.map((value) => ({ value, label: m.questionModes[value].label }))}
+          disabled={settings.saving} onValueChange={(mode) => void settings.save({ ...settings.values, mode }, settings.revision)} /></SettingsCard>}
     </SettingsSection>
   );
 }
+
+function SettingsRecovery({ colors, settings, resetLabel }: {
+  colors: Colors;
+  settings: { status: "error" | "invalid"; error: string; reload(): Promise<void>; reset(): Promise<boolean> };
+  resetLabel?: string;
+}) {
+  const { messages: m } = useProgressLanguage();
+  return <>
+    <Text style={{ color: colors.foregroundMuted, fontSize: 13, lineHeight: 19 }}>{settings.error}</Text>
+    <SettingsCard>
+      <SettingsAction label={m.tryAgain} actionLabel={m.reload} onPress={settings.reload} />
+      {settings.status === "invalid" ? <SettingsAction label={resetLabel ?? m.resetTo(m.systemLanguage)} actionLabel={m.reset} onPress={settings.reset} /> : null}
+    </SettingsCard>
+  </>;
+}

package/client/show-more.tsx

@@ -4,6 +4,7 @@ import React, { useState } from "react";
 import { Text } from "react-native";
 import { IconSwap } from "./motion";
 import { PressableRow } from "./row";
+import { useProgressLanguage } from "./language";
 
 type Colors = PluginWorkspacePanelProps["theme"]["colors"];
 
@@ -23,8 +24,9 @@ export function usePaged<T>(items: T[]): { shown: T[]; older: number; showOlder(
 
 // The row under a paged list: "Show 10 older", or "Show fewer" once all are shown.
 export function ShowMoreRow({ colors, total, paged }: { colors: Colors; total: number; paged: ReturnType<typeof usePaged> }) {
-  const more = paged.older > 0 ? { label: `Show ${Math.min(paged.older, PAGE)} older`, icon: "ChevronDown", onPress: paged.showOlder }
-    : total > PAGE ? { label: "Show fewer", icon: "ChevronUp", onPress: paged.showFewer }
+  const { messages: m } = useProgressLanguage();
+  const more = paged.older > 0 ? { label: m.showOlder(Math.min(paged.older, PAGE)), icon: "ChevronDown", onPress: paged.showOlder }
+    : total > PAGE ? { label: m.showFewer, icon: "ChevronUp", onPress: paged.showFewer }
     : null;
   if (!more) return null;
   return (

package/client/spinner.tsx

@@ -1,13 +1,15 @@
 import { Icon } from "@getpaseo/plugin/client/react-native";
 import React, { useEffect, useRef } from "react";
 import { ActivityIndicator, Animated, Easing, Platform, View } from "react-native";
+import { useProgressLanguage } from "./language";
 import { nativeDriver } from "./motion";
 
 // The system spinner, sized to sit beside a line of text. iOS draws it only
 // at 20pt, so it's scaled into the slot there.
 export function Spinner({ color, size = 12 }: { color: string; size?: number }) {
+  const { messages: m } = useProgressLanguage();
   return (
-    <View accessibilityLabel="Working" style={{ width: size, height: size, alignItems: "center", justifyContent: "center" }}>
+    <View accessibilityLabel={m.status.working} style={{ width: size, height: size, alignItems: "center", justifyContent: "center" }}>
       {Platform.OS === "ios"
         ? <ActivityIndicator size="small" color={color} style={{ transform: [{ scale: size / 20 }] }} />
         : <ActivityIndicator size={size} color={color} />}
@@ -18,6 +20,7 @@ export function Spinner({ color, size = 12 }: { color: string; size?: number })
 // Shown in place of the spinner once the dashboard is stale: the work may have
 // stopped, so the icon asks for attention instead of looking busy.
 export function StalledPulse({ color, size = 12 }: { color: string; size?: number }) {
+  const { messages: m } = useProgressLanguage();
   const opacity = useRef(new Animated.Value(1)).current;
   useEffect(() => {
     const loop = Animated.loop(Animated.sequence([
@@ -28,7 +31,7 @@ export function StalledPulse({ color, size = 12 }: { color: string; size?: numbe
     return () => loop.stop();
   }, [opacity]);
   return (
-    <Animated.View accessibilityLabel="Possibly stalled" style={{ width: size, height: size, opacity }}>
+    <Animated.View accessibilityLabel={m.possiblyStalled} style={{ width: size, height: size, opacity }}>
       <Icon name="TriangleAlert" size={size} color={color} />
     </Animated.View>
   );
@@ -37,9 +40,10 @@ export function StalledPulse({ color, size = 12 }: { color: string; size?: numbe
 // A ticket not started yet, or waiting on another one: a still, faded dot, so it
 // reads as parked rather than busy. Centered in the same slot an icon would take.
 export function WaitingDot({ color, size = 12 }: { color: string; size?: number }) {
+  const { messages: m } = useProgressLanguage();
   const dot = Math.round(size / 2);
   return (
-    <View accessibilityLabel="Waiting" style={{ width: size, height: size, alignItems: "center", justifyContent: "center" }}>
+    <View accessibilityLabel={m.waiting} style={{ width: size, height: size, alignItems: "center", justifyContent: "center" }}>
       <View style={{ width: dot, height: dot, borderRadius: dot / 2, backgroundColor: color, opacity: 0.5 }} />
     </View>
   );

package/client/status-badge.tsx

@@ -2,19 +2,13 @@ import type { PluginWorkspacePanelProps } from "@getpaseo/plugin/client";
 import React from "react";
 import { Text, View } from "react-native";
 import type { TicketStatus } from "../shared/events";
+import { useProgressLanguage } from "./language";
 
 type Colors = PluginWorkspacePanelProps["theme"]["colors"];
 
-export const STATUS_LABEL: Record<TicketStatus, string> = {
-  not_started: "Not started",
-  working: "Working",
-  blocked: "Blocked",
-  done: "Done",
-  skipped: "Skipped",
-};
-
 // `waiting`: held for another ticket. Shown as calm as "Not started", whatever the status.
 export function StatusBadge({ colors, status, waiting = false }: { colors: Colors; status: TicketStatus; waiting?: boolean }) {
+  const { messages: m } = useProgressLanguage();
   const tone = waiting ? { fg: colors.foregroundMuted, bg: "transparent", border: colors.border } : {
     done: { fg: colors.statusSuccess, bg: "transparent", border: colors.statusSuccess },
     working: { fg: colors.accentForeground, bg: colors.accent, border: colors.accent },
@@ -24,7 +18,7 @@ export function StatusBadge({ colors, status, waiting = false }: { colors: Color
   }[status];
   return (
     <View style={{ borderWidth: 1, borderColor: tone.border, backgroundColor: tone.bg, borderRadius: 999, paddingHorizontal: 8, paddingVertical: 1 }}>
-      <Text style={{ color: tone.fg, fontSize: 11, lineHeight: 16 }}>{waiting ? "Waiting" : STATUS_LABEL[status]}</Text>
+      <Text style={{ color: tone.fg, fontSize: 11, lineHeight: 16 }}>{waiting ? m.waiting : m.status[status]}</Text>
     </View>
   );
 }

package/client/ticket-dialog.tsx

@@ -3,7 +3,7 @@ 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";
@@ -15,6 +15,7 @@ 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"] };
@@ -48,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)),
@@ -62,43 +64,43 @@ 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>
+                  ? <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>
@@ -107,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}`;
@@ -124,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} />
@@ -142,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>
@@ -157,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;
 }
 
@@ -167,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 }
@@ -207,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 (
@@ -218,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);