@stevecastaneda/paseo-progress 1.3.1 → 1.5.0

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>
   );
 }

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,9 +157,12 @@ 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 }}>
-        <Text style={{ flex: 1, minWidth: 0, color: colors.foreground, fontSize: 13, lineHeight: 19 }}>{question.question}</Text>
+        <View style={{ flex: 1, minWidth: 0, gap: 2 }}>
+          <Text style={{ color: colors.foreground, fontSize: 13, lineHeight: 19 }}>{question.question}</Text>
+          <QuestionState colors={colors} question={question} />
+        </View>
         {/* Optical: centers the 14px chevron on the 19px first line. */}
         <View style={{ paddingTop: 2.5 }}><Icon name="ChevronRight" size={14} color={colors.foregroundMuted} /></View>
       </PressableRow>
@@ -183,10 +192,24 @@ export function QuestionView({ colors, question, now, onCopy, onOpenAttachment,
   );
 }
 
-// The agent's pick, under an open question that has no lettered options to tag.
+// 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 }) {
-  if (question.options.length || !question.recommended) return null;
-  return <Text style={{ color: colors.foregroundMuted, fontSize: 12, lineHeight: 17 }}>Recommended: <Text style={{ color: colors.foreground }}>{question.recommended}</Text></Text>;
+  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" ? <>{m.buildingWith}<Text style={value}>{question.recommended}{pick ? `${m.colon}${pick.label}` : ""}</Text></> : (
+        <>
+          {!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>
+  );
 }
 
 // `onSurface1` when drawn on a surface1 background (Paseo's dialogs), so the
@@ -199,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 }}>
@@ -214,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>
@@ -235,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

@@ -0,0 +1,58 @@
+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_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 };
+  return (
+    <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/surfaces.ts

@@ -3,17 +3,20 @@ import type { ViewStyle } from "react-native";
 
 type Colors = PluginWorkspacePanelProps["theme"]["colors"];
 
-// Relative luminance of a #rgb/#rrggbb or rgb() color, or null when unreadable.
-function luminance(color: string): number | null {
-  let rgb: number[] | null = null;
+// The red, green and blue of a #rgb/#rrggbb or rgb() color, or null when unreadable.
+function channels(color: string): number[] | null {
   const hex = color.trim().match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/i);
   if (hex) {
     const digits = hex[1].length === 3 ? [...hex[1]].map((d) => d + d) : hex[1].match(/../g)!;
-    rgb = digits.map((d) => parseInt(d, 16));
-  } else {
-    const fn = color.match(/^rgba?\(\s*([\d.]+)[\s,]+([\d.]+)[\s,]+([\d.]+)/i);
-    if (fn) rgb = fn.slice(1, 4).map(Number);
+    return digits.map((d) => parseInt(d, 16));
   }
+  const fn = color.match(/^rgba?\(\s*([\d.]+)[\s,]+([\d.]+)[\s,]+([\d.]+)/i);
+  return fn ? fn.slice(1, 4).map(Number) : null;
+}
+
+// Relative luminance, or null when the color is unreadable.
+function luminance(color: string): number | null {
+  const rgb = channels(color);
   if (!rgb) return null;
   const [r, g, b] = rgb.map((v) => {
     const c = v / 255;
@@ -22,7 +25,7 @@ function luminance(color: string): number | null {
   return 0.2126 * r + 0.7152 * g + 0.0722 * b;
 }
 
-function isLight(colors: Colors): boolean | null {
+export function isLight(colors: Colors): boolean | null {
   const value = luminance(colors.surface0);
   return value === null ? null : value > 0.4;
 }
@@ -43,3 +46,12 @@ export function raised(colors: Colors): ViewStyle {
       : "0px 0px 0px 1px rgba(255, 255, 255, 0.08)",
   };
 }
+
+// A color at low opacity, for a tag's fill: the same hue as its text, never a
+// drifting second color. Paseo's own status badges use 12% in light themes and
+// 16% in dark ones, where the surface swallows more of it.
+export function tint(color: string, colors: Colors): string {
+  const rgb = channels(color);
+  if (!rgb) return colors.surface2;
+  return `rgba(${rgb.join(", ")}, ${isLight(colors) ? 0.12 : 0.16})`;
+}