@stevecastaneda/paseo-progress 1.4.0 → 1.5.1

package/client/whats-new.tsx

@@ -9,12 +9,14 @@ import { spans } from "../shared/write-up";
 import { PressScale, Presence } from "./motion";
 import { isLight, raised, tint } from "./surfaces";
 import { BlockView, Spans } from "./write-up";
+import { ProgressLanguageProvider, useProgressLanguage } from "./language";
 
 type Colors = PluginWorkspacePanelProps["theme"]["colors"];
 
 // Once after an update: this version's headline, with its full notes a press
 // away. Closing either hides both for this version.
 export function WhatsNewBanner({ colors, host }: { colors: Colors; host: PluginWorkspacePanelProps["host"] }) {
+  const { messages: m } = useProgressLanguage();
   const fetchWhatsNew = useRpc(getWhatsNew);
   const dismiss = useRpc(dismissWhatsNew);
   const queryClient = useQueryClient();
@@ -40,31 +42,33 @@ export function WhatsNewBanner({ colors, host }: { colors: Colors; host: PluginW
         <View style={{ flexDirection: "row", alignItems: "center", flexWrap: "wrap", gap: 10, margin: 12, marginBottom: 0, padding: 8, borderRadius: 12, ...raised(colors), backgroundColor: colors.surface1 }}>
           <View style={{ alignSelf: "flex-start", height: 17, justifyContent: "center" }}><Icon name="Gift" size={14} color={colors.foregroundMuted} /></View>
           <Text selectable style={{ flex: 1, minWidth: 200, color: colors.foregroundMuted, fontSize: 12, lineHeight: 17 }}>
-            <Text style={{ color: colors.foreground, fontWeight: "500" }}>New in {whatsNew.version}:</Text> {whatsNew.headline}
+            <Text style={{ color: colors.foreground, fontWeight: "500" }}>{m.newVersion(whatsNew.version)}</Text> {whatsNew.headline}
           </Text>
           {/* 8px keeps the close button's 6px hit slop off the button beside it. */}
           <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
             <PressScale accessibilityRole="button" onPress={() => { setShown(whatsNew); setOpen(true); }}
               style={({ pressed, hovered }) => ({ paddingHorizontal: 10, paddingVertical: 5, borderRadius: 4, backgroundColor: colors.accent, opacity: pressed ? 0.7 : hovered ? 0.85 : 1 })}>
-              <Text style={{ color: colors.accentForeground, fontSize: 12, lineHeight: 16, fontWeight: "600" }}>See what’s new</Text>
+              <Text style={{ color: colors.accentForeground, fontSize: 12, lineHeight: 16, fontWeight: "600" }}>{m.seeWhatsNew}</Text>
             </PressScale>
-            <PressScale accessibilityRole="button" accessibilityLabel="Dismiss what's new" hitSlop={6} onPress={() => close(whatsNew.version)}
+            <PressScale accessibilityRole="button" accessibilityLabel={m.dismissWhatsNew} hitSlop={6} onPress={() => close(whatsNew.version)}
               style={({ pressed, hovered }) => ({ padding: 5, borderRadius: 4, backgroundColor: pressed ? colors.border : hovered ? colors.surface2 : "transparent" })}>
               <Icon name="X" size={16} color={colors.foregroundMuted} />
             </PressScale>
           </View>
         </View>
       ) : null}</Presence>
-      <Modal title={shown ? `What’s new in Progress ${shown.version}` : ""} icon={<Icon name="Gift" size={16} color={colors.foregroundMuted} />}
+      <Modal title={shown ? m.whatsNewTitle(shown.version) : ""} icon={<Icon name="Gift" size={16} color={colors.foregroundMuted} />}
         open={open} onOpenChange={(next) => { if (!next) closeDialog(); }}>
         <Modal.Content>
+        <ProgressLanguageProvider>
           {shown ? <Notes colors={colors} notes={shown.notes} /> : null}
           <View style={{ flexDirection: "row", justifyContent: "flex-end", marginTop: 8 }}>
             <PressScale accessibilityRole="button" onPress={closeDialog}
               style={({ pressed, hovered }) => ({ paddingHorizontal: 12, paddingVertical: 6, borderRadius: 6, backgroundColor: colors.accent, opacity: pressed ? 0.7 : hovered ? 0.85 : 1 })}>
-              <Text style={{ color: colors.accentForeground, fontSize: 12, lineHeight: 16, fontWeight: "600" }}>Got it</Text>
+              <Text style={{ color: colors.accentForeground, fontSize: 12, lineHeight: 16, fontWeight: "600" }}>{m.gotIt}</Text>
             </PressScale>
           </View>
+        </ProgressLanguageProvider>
         </Modal.Content>
       </Modal>
     </>
@@ -111,10 +115,11 @@ const TONE_COLOR: Record<NoteTone, (colors: Colors) => string> = {
 // Sits on the title's first line: 18px tall, 1px down in its 20px line. As wide
 // as "Improved" at least, so the titles beside the tags start at one edge.
 function KindTag({ colors, kind }: { colors: Colors; kind: NoteKind }) {
+  const { messages: m } = useProgressLanguage();
   const color = TONE_COLOR[NOTE_KINDS[kind].tone](colors);
   return (
     <View style={{ marginTop: 1, minWidth: 64, borderRadius: 4, paddingHorizontal: 7, backgroundColor: tint(color, colors) }}>
-      <Text numberOfLines={1} style={{ textAlign: "center", color, fontSize: 11, lineHeight: 18, fontWeight: "500" }}>{NOTE_KINDS[kind].label}</Text>
+      <Text numberOfLines={1} style={{ textAlign: "center", color, fontSize: 11, lineHeight: 18, fontWeight: "500" }}>{m.noteKinds[kind]}</Text>
     </View>
   );
 }

package/client/when.tsx

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

package/client/write-up.tsx

@@ -9,6 +9,7 @@ import { type Block, parseWriteUp, type Span, withoutTitle, writeUpExcerpt } fro
 import { type Attachment, attachmentIcon } from "./attachments";
 import { PressableRow } from "./row";
 import { errorText } from "./errors";
+import { useProgressLanguage } from "./language";
 
 type Colors = PluginWorkspacePanelProps["theme"]["colors"];
 const MONO = Platform.OS === "ios" ? "Menlo" : "monospace";
@@ -22,6 +23,7 @@ export function WriteUp({ colors, source, workspaceId, workspaceDirectory, onOpe
   workspaceDirectory: string;
   onOpen(attachment: Attachment, group: Attachment[]): void;
 }) {
+  const { messages: m } = useProgressLanguage();
   const fetchPreview = useRpc(previewDeliverable);
   const readable = Boolean(source.path && previewKind(source.path) === "text");
   // The same query as the preview dialog, so opening the file after reading here is instant.
@@ -38,12 +40,12 @@ export function WriteUp({ colors, source, workspaceId, workspaceDirectory, onOpe
   return (
     <View style={{ gap: 12, padding: 14, borderRadius: 8, backgroundColor: colors.surface0 }}>
       {shown.length ? <View style={{ gap: 8 }}>{shown.map((block, index) => <BlockView key={index} colors={colors} block={block} first={index === 0} />)}</View> : null}
-      {preview.error ? <Text style={{ color: colors.foregroundMuted, fontSize: 12, lineHeight: 18 }}>Couldn't read it here: {errorText(preview.error, "something went wrong")}</Text> : null}
+      {preview.error ? <Text style={{ color: colors.foregroundMuted, fontSize: 12, lineHeight: 18 }}>{m.readError(errorText(preview.error, m.unknownError))}</Text> : null}
       {/* The file on the left, opening it whole; expanding in place on the right. */}
       <View style={{ flexDirection: "row", alignItems: "center", gap: 12 }}>
-        <TextButton colors={colors} icon={attachmentIcon(source)} label={source.title} accessibilityLabel={`Open ${source.title}`} onPress={() => onOpen(source, [source])} grow />
+        <TextButton colors={colors} icon={attachmentIcon(source)} label={source.title} accessibilityLabel={m.openItem(source.title)} onPress={() => onOpen(source, [source])} grow />
         <View style={{ flex: 1 }} />
-        {excerpt.more ? <TextButton colors={colors} label={all ? "Show less" : "Read more"} onPress={() => setAll(!all)} expanded={all} /> : null}
+        {excerpt.more ? <TextButton colors={colors} label={all ? m.showLess : m.readMore} onPress={() => setAll(!all)} expanded={all} /> : null}
       </View>
     </View>
   );

package/index.client.tsx

@@ -2,6 +2,7 @@ import type { PluginClientContext } from "@getpaseo/plugin/client";
 import { ProgressPanel } from "./client/panel";
 import { contributePills, progressPanel } from "./client/pills";
 import { QuestionSettings } from "./client/settings";
+import { ProgressLanguageProvider } from "./client/language";
 
 const SETTINGS_ID = "settings";
 
@@ -14,7 +15,7 @@ export default function contribute(client: PluginClientContext) {
     icon: "ListChecks",
     context: "workspace",
     locations: [panel.location],
-    Component: (props) => <ProgressPanel {...props} openSettings={() => client.openSettings(SETTINGS_ID)} />,
+    Component: (props) => <ProgressLanguageProvider><ProgressPanel {...props} openSettings={() => client.openSettings(SETTINGS_ID)} /></ProgressLanguageProvider>,
   });
   const stopCommand = client.addCommandCenterItem({
     id: "open-progress",
@@ -32,7 +33,7 @@ export default function contribute(client: PluginClientContext) {
     id: SETTINGS_ID,
     title: "Settings",
     icon: "Settings",
-    Component: QuestionSettings,
+    Component: (props) => <ProgressLanguageProvider><QuestionSettings {...props} /></ProgressLanguageProvider>,
   });
 
   return () => {

package/index.server.ts

@@ -6,7 +6,7 @@ import { mirrorQuestionMode } from "./server/question-mode";
 import { handleInstallSkill, handleSkillStatus } from "./server/skill";
 import { handleDismissWhatsNew, handleGetWhatsNew } from "./server/whats-new";
 import { canOpenOnHost, dismissWhatsNew, getAttention, getDashboard, getLauncherStatus, getSkillStatus, getWhatsNew, installLauncher, installSkill, listFolders, markPanelOpened, openDeliverable, previewDeliverable, readDeliverablePiece, setHistoryFolder } from "./shared/rpc";
-import { questionSettings } from "./shared/settings";
+import { displaySettings, questionSettings } from "./shared/settings";
 
 export default function contribute(server: PluginServerContext) {
   server.handle(getDashboard, handleGetDashboard);
@@ -27,6 +27,7 @@ export default function contribute(server: PluginServerContext) {
   // Settles a new install before any panel opens. Opening one makes a
   // worktree folder, which would look like an earlier version's.
   void handleGetWhatsNew().catch(() => {});
+  server.registerSettings(displaySettings);
   const mirror = mirrorQuestionMode(server.registerSettings(questionSettings));
   return mirror.stop;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stevecastaneda/paseo-progress",
-  "version": "1.4.0",
+  "version": "1.5.1",
   "description": "A live progress dashboard per worktree for Paseo, drawn from a file agents write with the paseo-progress command.",
   "license": "MIT",
   "author": "Steve Castaneda",

package/shared/settings.ts

@@ -8,3 +8,13 @@ export const questionSettings = defineSettings({
   version: 1,
   schema: z.object({ mode: z.enum(QUESTION_MODES).default(DEFAULT_QUESTION_MODE) }),
 });
+
+export const LANGUAGE_PREFERENCES = ["system", "en", "zh-CN"] as const;
+export type LanguagePreference = (typeof LANGUAGE_PREFERENCES)[number];
+
+export const displaySettings = defineSettings({
+  id: "display",
+  scope: "host",
+  version: 1,
+  schema: z.object({ language: z.enum(LANGUAGE_PREFERENCES).default("system") }),
+});

package/shared/ticket-story.ts

@@ -1,12 +1,19 @@
 import type { Activity, Deliverable, Question, Ticket } from "./dashboard.ts";
 import type { TicketStatus } from "./events.ts";
 
+export type TimelineLabel =
+  | { kind: "added" }
+  | { kind: "reset" }
+  | { kind: "stage"; stage: string }
+  | { kind: "status"; status: TicketStatus }
+  | { kind: "waiting"; id: string };
+
 // One span in a ticket's life: from a status or stage change to the next one.
 export interface TimelineStep {
   at: string;
   // When the next step began; null while this one is still going (or it's the end).
   until: string | null;
-  label: string;
+  label: TimelineLabel;
   status: TicketStatus;
   notes: string[];
   // Length of the step; null for a finished ticket's last step, which has no end.
@@ -27,15 +34,10 @@ export interface TicketStory {
 
 const OPEN_ENDED: TicketStatus[] = ["working", "blocked", "not_started"];
 
-function labelFor(status: TicketStatus, stage: string | undefined, first: boolean): string {
-  if (first && status === "not_started") return "Added";
-  switch (status) {
-    case "working": return stage ? `${stage} stage` : "Working";
-    case "blocked": return "Blocked";
-    case "done": return "Done";
-    case "skipped": return "Skipped";
-    default: return "Back to not started";
-  }
+function labelFor(status: TicketStatus, stage: string | undefined, first: boolean): TimelineLabel {
+  if (first && status === "not_started") return { kind: "added" };
+  if (status === "working" && stage) return { kind: "stage", stage };
+  return status === "not_started" ? { kind: "reset" } : { kind: "status", status };
 }
 
 export function ticketTimeline(ticket: Ticket, nowMs: number): TimelineStep[] {