@stevecastaneda/paseo-progress 1.14.2 → 1.14.3

package/client/questions.tsx

@@ -44,7 +44,13 @@ export interface AttachmentContext {
   navigation?: PluginWorkspacePanelProps["navigation"];
 }
 
-export function QuestionsSection({ colors, questions, answered, now, context }: {
+export function QuestionsSection({
+  colors,
+  questions,
+  answered,
+  now,
+  context,
+}: {
   colors: Colors;
   questions: Question[];
   // So a question answered while its dialog is open shows the answer instead of vanishing.
@@ -57,31 +63,53 @@ export function QuestionsSection({ colors, questions, answered, now, context }:
   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 }}>
+      <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" }}>{m.questions}</Text>
-        <View style={{ borderWidth: 1, borderColor: colors.accent, backgroundColor: colors.accent, borderRadius: 999, paddingHorizontal: 8, paddingVertical: 1 }}>
+        <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 }}>{m.waitingCount(questions.length)}</Text>
         </View>
       </View>
       {questions.map((question, index) => (
-        <QuestionRow key={question.id} colors={colors} question={question} first={index === 0}
-          onOpen={() => setOpenId(question.id)} onCopy={() => void copy(question)} />
+        <QuestionRow
+          key={question.id}
+          colors={colors}
+          question={question}
+          first={index === 0}
+          onOpen={() => setOpenId(question.id)}
+          onCopy={() => void copy(question)}
+        />
       ))}
-      <StackedDialog colors={colors} root={openId ? { kind: "question", id: openId } : null} onClose={() => setOpenId(null)}
-        questions={[...questions, ...answered]} now={now} context={context} />
+      <StackedDialog
+        colors={colors}
+        root={openId ? { kind: "question", id: openId } : null}
+        onClose={() => setOpenId(null)}
+        questions={[...questions, ...answered]}
+        now={now}
+        context={context}
+      />
     </View>
   );
 }
 
 // Settled questions, one line each (title and the choice). Press a row for the rest.
 // Rows only: the panel's tabbed card supplies the frame.
-export function AnsweredQuestionsList({ colors, questions, now, context }: {
-  colors: Colors;
-  questions: Question[];
-  now: number;
-  context: AttachmentContext;
-}) {
+export function AnsweredQuestionsList({ colors, questions, now, context }: { colors: Colors; questions: Question[]; now: number; context: AttachmentContext }) {
   const { messages: m } = useProgressLanguage();
   const [openId, setOpenId] = useState<string | null>(null);
   const paged = usePaged(questions);
@@ -92,12 +120,31 @@ 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={m.details(question.id)} onPress={() => setOpenId(question.id)}
-              style={{ flexDirection: "row", alignItems: "center", gap: 8, paddingHorizontal: 10, paddingVertical: 8 }}>
+            <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>
+              <Text
+                numberOfLines={1}
+                style={{
+                  color: colors.foregroundMuted,
+                  fontSize: 12,
+                  lineHeight: 17,
+                  fontWeight: "600",
+                  fontVariant: ["tabular-nums"],
+                  minWidth: 30,
+                  flexShrink: 0,
+                }}
+              >
+                {question.id}
+              </Text>
               <Text numberOfLines={1} style={{ flex: 1, minWidth: 0, color: colors.foregroundMuted, fontSize: 12, lineHeight: 17 }}>
-                {question.title}{"  "}
+                {question.title}
+                {"  "}
                 <Text style={{ color: colors.statusSuccess, fontWeight: "600" }}>{answer.choice}</Text>
                 {chosen ? <Text style={{ color: colors.foreground }}> {chosen.label}</Text> : null}
               </Text>
@@ -107,8 +154,14 @@ export function AnsweredQuestionsList({ colors, questions, now, context }: {
         );
       })}
       <ShowMoreRow colors={colors} total={questions.length} paged={paged} />
-      <StackedDialog colors={colors} root={openId ? { kind: "question", id: openId } : null} onClose={() => setOpenId(null)}
-        questions={questions} now={now} context={context} />
+      <StackedDialog
+        colors={colors}
+        root={openId ? { kind: "question", id: openId } : null}
+        onClose={() => setOpenId(null)}
+        questions={questions}
+        now={now}
+        context={context}
+      />
     </View>
   );
 }
@@ -123,28 +176,26 @@ function AnswerSummary({ colors, question, now }: { colors: Colors; question: Qu
         <Text style={{ color: colors.statusSuccess, fontWeight: "600" }}>{answer.choice}</Text>
         {chosen ? ` ${chosen.label}.` : ""}
         {answer.words ? <Text style={{ color: colors.foregroundMuted }}> “{answer.words}”</Text> : null}
-        <Text style={{ color: colors.foregroundMuted }}>
-          {answer.changedCourse ? m.changedCourse : ""}
-        </Text>
+        <Text style={{ color: colors.foregroundMuted }}>{answer.changedCourse ? m.changedCourse : ""}</Text>
       </Text>
       <Text style={{ color: colors.foregroundMuted, fontSize: 11, lineHeight: 16 }}>
-        {m.answerRecorded}<When colors={colors} iso={answer.at} now={now} />{question.raisedBy ? m.raisedBy(question.raisedBy) : ""}
+        {m.answerRecorded}
+        <When colors={colors} iso={answer.at} now={now} />
+        {question.raisedBy ? m.raisedBy(question.raisedBy) : ""}
       </Text>
     </View>
   );
 }
 
-function QuestionRow({ colors, question, first, onOpen, onCopy }: {
-  colors: Colors;
-  question: Question;
-  first: boolean;
-  onOpen(): void;
-  onCopy(): void;
-}) {
+function QuestionRow({ colors, question, first, onOpen, onCopy }: { colors: Colors; question: Question; first: boolean; 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={m.copyQuestion(question.id)} 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.
@@ -154,27 +205,45 @@ function QuestionRow({ colors, question, first, onOpen, onCopy }: {
           borderRadius: 999,
           backgroundColor: pressed ? colors.surface2 : colors.surface1,
           ...raised(colors),
-        })}>
+        })}
+      >
         <Text style={{ color: colors.foreground, fontSize: 13, lineHeight: 17, fontWeight: "600" }}>{question.id}</Text>
       </PressScale>
-      <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 }}>
+      <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>
           <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>
+        <View style={{ paddingTop: 2.5 }}>
+          <Icon name="ChevronRight" size={14} color={colors.foregroundMuted} />
+        </View>
       </PressableRow>
     </View>
   );
 }
 
 // A question dialog's body, also shown inside a ticket's dialog. `children` go at the end.
-export function QuestionView({ colors, question, now, onCopy, onOpenAttachment, children }: {
+export function QuestionView({
+  colors,
+  question,
+  now,
+  root,
+  onCopy,
+  onOpenAttachment,
+  children,
+}: {
   colors: Colors;
   question: Question;
   now: number;
+  // The worktree root the attachments' paths are relative to.
+  root: string;
   onCopy(letter: string): void;
   onOpenAttachment(attachment: Attachment, group: Attachment[]): void;
   children?: React.ReactNode;
@@ -186,7 +255,7 @@ export function QuestionView({ colors, question, now, onCopy, onOpenAttachment,
         {!question.answer ? <QuestionState colors={colors} question={question} /> : null}
       </View>
       {question.answer ? <AnswerSummary colors={colors} question={question} now={now} /> : null}
-      <QuestionDetail colors={colors} question={question} now={now} onSurface1 onCopy={onCopy} onOpenAttachment={onOpenAttachment} />
+      <QuestionDetail colors={colors} question={question} now={now} root={root} onSurface1 onCopy={onCopy} onOpenAttachment={onOpenAttachment} />
       {children}
     </View>
   );
@@ -201,11 +270,33 @@ export function QuestionState({ colors, question }: { colors: Colors; question:
   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.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.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}
+          {question.big ? (
+            <>
+              {m.sentenceBreak}
+              <Text style={value}>{m.big}</Text>
+              {m.colon}
+              {question.big}
+            </>
+          ) : null}
         </>
       )}
     </Text>
@@ -214,10 +305,19 @@ export function QuestionState({ colors, question }: { colors: Colors; question:
 
 // `onSurface1` when drawn on a surface1 background (Paseo's dialogs), so the
 // Copy buttons still stand off it.
-export function QuestionDetail({ colors, question, now, onCopy, onOpenAttachment, onSurface1 = false }: {
+export function QuestionDetail({
+  colors,
+  question,
+  now,
+  root,
+  onCopy,
+  onOpenAttachment,
+  onSurface1 = false,
+}: {
   colors: Colors;
   question: Question;
   now: number;
+  root: string;
   onCopy(letter: string): void;
   onOpenAttachment(attachment: Attachment, group: Attachment[]): void;
   onSurface1?: boolean;
@@ -233,7 +333,10 @@ export function QuestionDetail({ colors, question, now, onCopy, onOpenAttachment
         const borderColor = question.answer ? (chosen ? colors.statusSuccess : colors.border) : recommended ? colors.accent : colors.border;
         const settled = Boolean(question.answer);
         return (
-          <View key={option.letter} style={{ flexDirection: "row", alignItems: "flex-start", gap: 8, padding: 8, borderRadius: 12, borderWidth: 1, borderColor }}>
+          <View
+            key={option.letter}
+            style={{ flexDirection: "row", alignItems: "flex-start", gap: 8, padding: 8, borderRadius: 12, borderWidth: 1, borderColor }}
+          >
             <Text style={{ color: colors.foreground, fontSize: 13, lineHeight: 18, fontWeight: "600", width: 14 }}>{option.letter}</Text>
             <View style={{ flex: 1, gap: 2 }}>
               <Text selectable style={{ color: colors.foreground, fontSize: 13, lineHeight: 18 }}>
@@ -241,12 +344,30 @@ export function QuestionDetail({ colors, question, now, onCopy, onOpenAttachment
                 {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 selectable style={{ color: colors.foregroundMuted, fontSize: 12, lineHeight: 17 }}>{option.consequence}</Text> : null}
+              {option.consequence ? (
+                <Text selectable style={{ color: colors.foregroundMuted, fontSize: 12, lineHeight: 17 }}>
+                  {option.consequence}
+                </Text>
+              ) : null}
             </View>
             {!question.answer ? (
-              <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 })}>
+              <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 }}>{m.copyChoice(question.id, option.letter)}</Text>
               </PressScale>
@@ -254,12 +375,12 @@ export function QuestionDetail({ colors, question, now, onCopy, onOpenAttachment
           </View>
         );
       })}
-      {question.background ? (
-        <Markdown>{question.background}</Markdown>
-      ) : null}
-      <AttachmentList colors={colors} attachments={questionAttachments(question)} onOpen={onOpenAttachment} />
+      {question.background ? <Markdown>{question.background}</Markdown> : null}
+      <AttachmentList colors={colors} attachments={questionAttachments(question)} root={root} onOpen={onOpenAttachment} />
       <Text style={{ color: colors.foregroundMuted, fontSize: 11, lineHeight: 16 }}>
-        {m.asked}<When colors={colors} iso={question.askedAt} now={now} />{question.raisedBy ? m.raisedBy(question.raisedBy) : ""}
+        {m.asked}
+        <When colors={colors} iso={question.askedAt} now={now} />
+        {question.raisedBy ? m.raisedBy(question.raisedBy) : ""}
       </Text>
     </View>
   );

package/client/row.tsx

@@ -13,7 +13,14 @@ export function rowTint(colors: Colors, state: { hovered: boolean; pressed: bool
 }
 
 // A full-width row that opens something. `resting` is its background at rest.
-export function PressableRow({ colors, onSurface1 = false, transparentAtRest = true, style, children, ...props }: Omit<PressableProps, "style" | "children"> & {
+export function PressableRow({
+  colors,
+  onSurface1 = false,
+  transparentAtRest = true,
+  style,
+  children,
+  ...props
+}: Omit<PressableProps, "style" | "children"> & {
   colors: Colors;
   onSurface1?: boolean;
   // Rows on a surface1 background rest transparent; the working ticket rests on surface1.
@@ -23,11 +30,15 @@ export function PressableRow({ colors, onSurface1 = false, transparentAtRest = t
 }) {
   const [hovered, setHovered] = useState(false);
   return (
-    <Pressable {...props} onHoverIn={() => setHovered(true)} onHoverOut={() => setHovered(false)}
+    <Pressable
+      {...props}
+      onHoverIn={() => setHovered(true)}
+      onHoverOut={() => setHovered(false)}
       style={({ pressed }) => {
         const tint = rowTint(colors, { hovered, pressed }, onSurface1);
         return [style, { backgroundColor: !hovered && !pressed && transparentAtRest ? "transparent" : tint }];
-      }}>
+      }}
+    >
       {children}
     </Pressable>
   );

package/client/section-title.tsx

@@ -6,7 +6,14 @@ import { Text, View, type ViewStyle } from "react-native";
 type Colors = PluginWorkspacePanelProps["theme"]["colors"];
 
 // A card's heading: a 14px Lucide icon beside the 13px semibold title.
-export function SectionTitle({ colors, icon, title, color, style, children }: {
+export function SectionTitle({
+  colors,
+  icon,
+  title,
+  color,
+  style,
+  children,
+}: {
   colors: Colors;
   icon: string;
   title: string;
@@ -17,7 +24,9 @@ export function SectionTitle({ colors, icon, title, color, style, children }: {
   return (
     <View style={[{ flexDirection: "row", alignItems: "center", gap: 6, paddingHorizontal: 10, paddingVertical: 8 }, style]}>
       <Icon name={icon} size={14} color={color ?? colors.foregroundMuted} />
-      <Text accessibilityRole="header" style={{ color: color ?? colors.foreground, fontSize: 13, lineHeight: 18, fontWeight: "600" }}>{title}</Text>
+      <Text accessibilityRole="header" style={{ color: color ?? colors.foreground, fontSize: 13, lineHeight: 18, fontWeight: "600" }}>
+        {title}
+      </Text>
       {children}
     </View>
   );

package/client/settings.tsx

@@ -14,7 +14,14 @@ import { useSkill, useToolsState } from "./launcher";
 import { BlockView } from "./blocks";
 
 export function QuestionSettings({ theme, host }: PluginSurfaceProps) {
-  return <><QuestionModeSettings theme={theme} /><DisplaySettings theme={theme} /><SkillSettings colors={theme.colors} hostId={host.id} /><ToolsSettings colors={theme.colors} hostId={host.id} /></>;
+  return (
+    <>
+      <QuestionModeSettings theme={theme} />
+      <DisplaySettings theme={theme} />
+      <SkillSettings colors={theme.colors} hostId={host.id} />
+      <ToolsSettings colors={theme.colors} hostId={host.id} />
+    </>
+  );
 }
 
 type Colors = PluginSurfaceProps["theme"]["colors"];
@@ -38,11 +45,23 @@ function DisplaySettings({ theme }: Pick<PluginSurfaceProps, "theme">) {
   const options = LANGUAGE_PREFERENCES.map((value) => ({ value, label: value === "system" ? m.systemLanguage : value === "en" ? "English" : "简体中文" }));
   return (
     <Section colors={theme.colors} icon="Languages" 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>}
+      {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>
+      )}
     </Section>
   );
 }
@@ -60,16 +79,29 @@ function SkillSettings({ colors, hostId }: { colors: Colors; hostId: string }) {
       <SettingsCard>
         <SettingsAction label={m.skillName} hint={document.data?.description || undefined} actionLabel={m.viewSkill} onPress={() => setOpen(true)} />
         {skill.notice?.action ? (
-          <SettingsAction label={skill.state === "outdated" ? m.skillLinkOutdated : m.skillNotInstalled} hint={skill.notice.text}
-            actionLabel={skill.pending ? m.installing : skill.notice.action} disabled={skill.pending} onPress={skill.install} />
+          <SettingsAction
+            label={skill.state === "outdated" ? m.skillLinkOutdated : m.skillNotInstalled}
+            hint={skill.notice.text}
+            actionLabel={skill.pending ? m.installing : skill.notice.action}
+            disabled={skill.pending}
+            onPress={skill.install}
+          />
         ) : null}
       </SettingsCard>
       {/* Paseo draws the modal outside this tree, past the language context, so it only gets finished text. */}
       <Modal title={m.skillName} icon={<Icon name="Sparkles" size={16} color={colors.foregroundMuted} />} open={open} onOpenChange={setOpen}>
         <Modal.Content>
-          {document.error ? <Text style={muted}>{m.readError(errorText(document.error, m.unknownError))}</Text>
-            : !document.data ? <Text style={muted}>{m.loading}</Text>
-            : <View style={{ gap: 8 }}>{blocks.map((block, index) => <BlockView key={index} colors={colors} block={block} first={index === 0} />)}</View>}
+          {document.error ? (
+            <Text style={muted}>{m.readError(errorText(document.error, m.unknownError))}</Text>
+          ) : !document.data ? (
+            <Text style={muted}>{m.loading}</Text>
+          ) : (
+            <View style={{ gap: 8 }}>
+              {blocks.map((block, index) => (
+                <BlockView key={index} colors={colors} block={block} first={index === 0} />
+              ))}
+            </View>
+          )}
         </Modal.Content>
       </Modal>
     </Section>
@@ -98,26 +130,46 @@ function QuestionModeSettings({ theme }: Pick<PluginSurfaceProps, "theme">) {
   const muted = { color: theme.colors.foregroundMuted, fontSize: 13, lineHeight: 19 };
   return (
     <Section colors={theme.colors} icon="MessageCircleQuestion" 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>}
+      {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>
+      )}
     </Section>
   );
 }
 
-function SettingsRecovery({ colors, settings, resetLabel }: {
+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>
-  </>;
+  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

@@ -25,14 +25,31 @@ 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 { 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;
+  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 (
-    <PressableRow colors={colors} accessibilityRole="button" onPress={more.onPress}
-      style={{ flexDirection: "row", alignItems: "center", gap: 6, paddingHorizontal: 10, paddingVertical: 8, borderTopWidth: 1, borderTopColor: colors.border }}>
-      <IconSwap swapKey={more.icon} size={14}><Icon name={more.icon} size={14} color={colors.foregroundMuted} /></IconSwap>
+    <PressableRow
+      colors={colors}
+      accessibilityRole="button"
+      onPress={more.onPress}
+      style={{
+        flexDirection: "row",
+        alignItems: "center",
+        gap: 6,
+        paddingHorizontal: 10,
+        paddingVertical: 8,
+        borderTopWidth: 1,
+        borderTopColor: colors.border,
+      }}
+    >
+      <IconSwap swapKey={more.icon} size={14}>
+        <Icon name={more.icon} size={14} color={colors.foregroundMuted} />
+      </IconSwap>
       <Text style={{ color: colors.foregroundMuted, fontSize: 12, lineHeight: 18, fontWeight: "600", fontVariant: ["tabular-nums"] }}>{more.label}</Text>
     </PressableRow>
   );

package/client/spinner.tsx

@@ -10,9 +10,11 @@ export function Spinner({ color, size = 12 }: { color: string; size?: number })
   const { messages: m } = useProgressLanguage();
   return (
     <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} />}
+      {Platform.OS === "ios" ? (
+        <ActivityIndicator size="small" color={color} style={{ transform: [{ scale: size / 20 }] }} />
+      ) : (
+        <ActivityIndicator size={size} color={color} />
+      )}
     </View>
   );
 }
@@ -23,10 +25,12 @@ export function StalledPulse({ color, size = 12 }: { color: string; size?: numbe
   const { messages: m } = useProgressLanguage();
   const opacity = useRef(new Animated.Value(1)).current;
   useEffect(() => {
-    const loop = Animated.loop(Animated.sequence([
-      Animated.timing(opacity, { toValue: 0.35, duration: 700, easing: Easing.inOut(Easing.ease), useNativeDriver: nativeDriver() }),
-      Animated.timing(opacity, { toValue: 1, duration: 700, easing: Easing.inOut(Easing.ease), useNativeDriver: nativeDriver() }),
-    ]));
+    const loop = Animated.loop(
+      Animated.sequence([
+        Animated.timing(opacity, { toValue: 0.35, duration: 700, easing: Easing.inOut(Easing.ease), useNativeDriver: nativeDriver() }),
+        Animated.timing(opacity, { toValue: 1, duration: 700, easing: Easing.inOut(Easing.ease), useNativeDriver: nativeDriver() }),
+      ]),
+    );
     loop.start();
     return () => loop.stop();
   }, [opacity]);

package/client/status-badge.tsx

@@ -9,13 +9,15 @@ type Colors = PluginWorkspacePanelProps["theme"]["colors"];
 // `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 },
-    blocked: { fg: colors.statusDanger, bg: "transparent", border: colors.statusDanger },
-    skipped: { fg: colors.foregroundMuted, bg: "transparent", border: colors.border },
-    not_started: { fg: colors.foregroundMuted, bg: "transparent", border: colors.border },
-  }[status];
+  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 },
+        blocked: { fg: colors.statusDanger, bg: "transparent", border: colors.statusDanger },
+        skipped: { fg: colors.foregroundMuted, bg: "transparent", border: colors.border },
+        not_started: { fg: colors.foregroundMuted, bg: "transparent", border: colors.border },
+      }[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 ? m.waiting : m.status[status]}</Text>