@stevecastaneda/paseo-progress 1.14.2 → 1.14.3

package/client/dialog-stack.tsx

@@ -1,8 +1,7 @@
 import type { PluginWorkspacePanelProps } from "@getpaseo/plugin/client";
 import { Icon, Modal } from "@getpaseo/plugin/client/ui";
 import React, { useEffect, useRef, useState } from "react";
-import { Platform } from "react-native";
-import { opensAsPage } from "../shared/attachments";
+import { isPage } from "../shared/attachments";
 import type { Dashboard, Question } from "../shared/dashboard";
 import { type Attachment, attachmentIcon, useAttachmentOpener } from "./attachments";
 import { NarrowProvider } from "./narrow";
@@ -25,7 +24,17 @@ export type Step =
 
 // Paseo gives each dialog its own backdrop, so opening a second one darkens
 // the screen while the first fades out; steps swap content inside this one instead.
-export function StackedDialog({ colors, root, onClose, questions = [], dashboard, now, live = true, compact = false, context }: {
+export function StackedDialog({
+  colors,
+  root,
+  onClose,
+  questions = [],
+  dashboard,
+  now,
+  live = true,
+  compact = false,
+  context,
+}: {
   colors: Colors;
   root: Step | null;
   onClose(): void;
@@ -50,18 +59,23 @@ export function StackedDialog({ colors, root, onClose, questions = [], dashboard
   const group = useRef<Attachment[]>([]);
   const push = (step: Step) => setSteps((current) => [...current, step]);
   const replaceTop = (step: Step) => setSteps((current) => [...current.slice(0, -1), step]);
-  const opener = useAttachmentOpener({ ...context, onPreview: (attachment) => push({ kind: "preview", attachment, group: galleryFiles(group.current), fullScreen: false }) });
+  const opener = useAttachmentOpener({
+    ...context,
+    onPreview: (attachment) => push({ kind: "preview", attachment, group: galleryFiles(group.current), fullScreen: false }),
+  });
   const openAttachment = (attachment: Attachment, from: Attachment[]) => {
     group.current = from;
     // A link or a page opens outside the dialog; close first so it isn't left behind it.
-    if (attachment.url || opensAsPage(attachment, { browser: Platform.OS === "web" })) onClose();
+    if (attachment.url || isPage(attachment)) onClose();
     void opener.open(attachment);
   };
   // Opens the agent's chat in its workspace, with the dialog out of the way.
-  const openAgent = context.navigation ? (agentId: string) => {
-    onClose();
-    context.navigation!.openAgent({ agentId });
-  } : undefined;
+  const openAgent = context.navigation
+    ? (agentId: string) => {
+        onClose();
+        context.navigation!.openAgent({ agentId });
+      }
+    : undefined;
   const copy = useCopy();
   const top = steps.at(-1);
   const back = steps.length > 1 ? () => setSteps((current) => current.slice(0, -1)) : undefined;
@@ -71,8 +85,13 @@ export function StackedDialog({ colors, root, onClose, questions = [], dashboard
   const preview = top?.kind === "preview" ? top : undefined;
   const setFullScreen = (on: boolean) => preview && replaceTop({ ...preview, fullScreen: on, leftFullScreen: !on });
   // The ticket or question it opened on went away (answered elsewhere, or a new run): close rather than show a blank dialog.
-  const rootMissing = root !== null && (root.kind === "ticket" ? !dashboard?.tickets.some((candidate) => candidate.id === root.id)
-    : root.kind === "question" ? !questions.some((candidate) => candidate.id === root.id) : false);
+  const rootMissing =
+    root !== null &&
+    (root.kind === "ticket"
+      ? !dashboard?.tickets.some((candidate) => candidate.id === root.id)
+      : root.kind === "question"
+        ? !questions.some((candidate) => candidate.id === root.id)
+        : false);
   useEffect(() => {
     if (rootMissing) onClose();
   }, [rootMissing]);
@@ -81,44 +100,88 @@ export function StackedDialog({ colors, root, onClose, questions = [], dashboard
   const icon = ticket ? "ListChecks" : question ? "MessageCircleQuestion" : preview ? attachmentIcon(preview.attachment) : "ListChecks";
 
   return (
-    <Modal title={title} icon={<Icon name={icon} size={16} color={colors.foregroundMuted} />}
-      open={Boolean(root)} onOpenChange={(next) => {
+    <Modal
+      title={title}
+      icon={<Icon name={icon} size={16} color={colors.foregroundMuted} />}
+      open={Boolean(root)}
+      onOpenChange={(next) => {
         if (next) return;
         // Esc leaves full screen first; the dialog stays open under it.
         if (preview?.fullScreen) setFullScreen(false);
         else onClose();
-      }}>
+      }}
+    >
       {/* One Modal.Content for every step: replacing it would re-present the sheet on phones.
           Full screen turns its scrolling off. The image's fixed position reaches the window only
           when no ancestor has a transform, and a scroll view has one. */}
       <Modal.Content scrollable={!(preview && (previewLong || preview.fullScreen))}>
-      <ProgressLanguageProvider>
-      {/* A dialog has room for clock times, however narrow the panel that opened it. */}
-      <NarrowProvider value={false}>
-      {preview ? (
-        <PreviewContent colors={colors} attachment={preview.attachment} workspaceId={context.workspaceId} workspaceDirectory={context.workspaceDirectory}
-          onOpenOnHost={() => { onClose(); void opener.openOnHost(preview.attachment); }}
-          onCopyPath={() => void opener.copyPath(preview.attachment)} onBack={back}
-          gallery={{ items: preview.group, onSelect: (attachment) => replaceTop({ ...preview, attachment, fullScreen: preview.fullScreen && previewKind(attachment.path ?? "") === "image", leftFullScreen: false }) }}
-          onLong={setPreviewLong} ownScroll={previewLong || preview.fullScreen} fullScreen={preview.fullScreen} leftFullScreen={preview.leftFullScreen === true} onFullScreen={setFullScreen}
-          onOpenEntry={openAttachment} />
-      ) : (
-        <>
-          {ticket && dashboard ? (
-            <TicketStoryView colors={colors} dashboard={dashboard} ticket={ticket} now={now} live={live} compact={compact} context={context} onOpenAgent={openAgent}
-              onOpenAttachment={openAttachment} onOpenQuestion={(id) => push({ kind: "question", id })} />
-          ) : null}
-          {question ? (
-            <QuestionView colors={colors} question={question} now={now}
-              onCopy={(letter) => { void copy(question, letter); onClose(); }}
-              onOpenAttachment={openAttachment}>
-              {back ? <BackButton colors={colors} onPress={back} /> : null}
-            </QuestionView>
-          ) : null}
-        </>
-      )}
-      </NarrowProvider>
-      </ProgressLanguageProvider>
+        <ProgressLanguageProvider>
+          {/* A dialog has room for clock times, however narrow the panel that opened it. */}
+          <NarrowProvider value={false}>
+            {preview ? (
+              <PreviewContent
+                colors={colors}
+                attachment={preview.attachment}
+                workspaceId={context.workspaceId}
+                workspaceDirectory={context.workspaceDirectory}
+                onOpenOnHost={() => {
+                  onClose();
+                  void opener.openOnHost(preview.attachment);
+                }}
+                onCopyPath={() => void opener.copyPath(preview.attachment)}
+                onBack={back}
+                gallery={{
+                  items: preview.group,
+                  onSelect: (attachment) =>
+                    replaceTop({
+                      ...preview,
+                      attachment,
+                      fullScreen: preview.fullScreen && previewKind(attachment.path ?? "") === "image",
+                      leftFullScreen: false,
+                    }),
+                }}
+                onLong={setPreviewLong}
+                ownScroll={previewLong || preview.fullScreen}
+                fullScreen={preview.fullScreen}
+                leftFullScreen={preview.leftFullScreen === true}
+                onFullScreen={setFullScreen}
+                onOpenEntry={openAttachment}
+              />
+            ) : (
+              <>
+                {ticket && dashboard ? (
+                  <TicketStoryView
+                    colors={colors}
+                    dashboard={dashboard}
+                    ticket={ticket}
+                    now={now}
+                    live={live}
+                    compact={compact}
+                    context={context}
+                    onOpenAgent={openAgent}
+                    onOpenAttachment={openAttachment}
+                    onOpenQuestion={(id) => push({ kind: "question", id })}
+                  />
+                ) : null}
+                {question ? (
+                  <QuestionView
+                    colors={colors}
+                    question={question}
+                    now={now}
+                    root={context.workspaceDirectory}
+                    onCopy={(letter) => {
+                      void copy(question, letter);
+                      onClose();
+                    }}
+                    onOpenAttachment={openAttachment}
+                  >
+                    {back ? <BackButton colors={colors} onPress={back} /> : null}
+                  </QuestionView>
+                ) : null}
+              </>
+            )}
+          </NarrowProvider>
+        </ProgressLanguageProvider>
       </Modal.Content>
     </Modal>
   );
@@ -127,4 +190,3 @@ export function StackedDialog({ colors, root, onClose, questions = [], dashboard
 function stepKey(step: Step): string {
   return step.kind === "preview" ? `preview:${step.attachment.ref}` : `${step.kind}:${step.id}`;
 }
-

package/client/directory.ts

@@ -7,9 +7,7 @@ type PaseoApi = ReturnType<typeof getPaseoClient>;
 type Handler<Subscribe> = Subscribe extends (handler: infer H) => unknown ? H : never;
 export type PaseoAgentUpdate = Parameters<Handler<PaseoApi["agents"]["subscribe"]>>[0];
 export type PaseoWorkspaceUpdate = Parameters<Handler<PaseoApi["workspaces"]["subscribe"]>>[0];
-type Message = Parameters<
-  Parameters<NonNullable<Awaited<ReturnType<PaseoApi["agents"]["list"]>>["subscription"]>["subscribe"]>[0]["update"]
->[0];
+type Message = Parameters<Parameters<NonNullable<Awaited<ReturnType<PaseoApi["agents"]["list"]>>["subscription"]>["subscribe"]>[0]["update"]>[0];
 type OwnedSubscription<T> = {
   subscribe(observer: { snapshot(snapshot: T): void; update(message: Message): void; error?(error: unknown): void }): () => void;
   release(): Promise<void>;

package/client/errors.ts

@@ -2,5 +2,10 @@
 export function errorText(error: unknown, fallback: string): string {
   const message = (error as { message?: unknown } | null)?.message;
   if (typeof message !== "string") return fallback;
-  return message.replace(/^Request failed: /, "").replace(/ requestType=\S+(?: code=\S+)?$/, "").trim() || fallback;
+  return (
+    message
+      .replace(/^Request failed: /, "")
+      .replace(/ requestType=\S+(?: code=\S+)?$/, "")
+      .trim() || fallback
+  );
 }

package/client/history.tsx

@@ -13,12 +13,7 @@ type Colors = PluginWorkspacePanelProps["theme"]["colors"];
 
 // Run history stays on this computer unless the repo opts in. This quiet row
 // is the only place that changes it; nothing in the repo changes until then.
-export function HistoryRow({ colors, workspaceId, directory, savedTo }: {
-  colors: Colors;
-  workspaceId: string;
-  directory: string;
-  savedTo: string | null;
-}) {
+export function HistoryRow({ colors, workspaceId, directory, savedTo }: { colors: Colors; workspaceId: string; directory: string; savedTo: string | null }) {
   const { messages: m } = useProgressLanguage();
   const [picking, setPicking] = useState(false);
   const set = useRpc(setHistoryFolder);
@@ -35,35 +30,83 @@ export function HistoryRow({ colors, workspaceId, directory, savedTo }: {
   // While saving, the button that started it says so.
   const busy = mutation.isPending ? (mutation.variables === null ? "stop" : "pick") : null;
   const actions: { label: string; busyLabel: string; kind: "pick" | "stop"; onPress(): void }[] = savedTo
-    ? [{ label: m.changeFolder, busyLabel: m.saving, kind: "pick", onPress: () => setPicking(true) }, { label: m.stopSaving, busyLabel: m.stopping, kind: "stop", onPress: () => mutation.mutate(null) }]
+    ? [
+        { label: m.changeFolder, busyLabel: m.saving, kind: "pick", onPress: () => setPicking(true) },
+        { label: m.stopSaving, busyLabel: m.stopping, kind: "stop", onPress: () => mutation.mutate(null) },
+      ]
     : [{ label: m.saveToRepo, busyLabel: m.saving, kind: "pick", onPress: () => setPicking(true) }];
 
   return (
     <View style={{ flexDirection: "row", flexWrap: "wrap", alignItems: "center", columnGap: 8, rowGap: 4, marginHorizontal: 12, marginTop: 16 }}>
       <View style={{ flexDirection: "row", alignItems: "flex-start", gap: 6, flex: 1, minWidth: 180 }}>
-        <View style={{ paddingTop: 2 }}><Icon name="History" size={13} color={colors.foregroundMuted} /></View>
+        <View style={{ paddingTop: 2 }}>
+          <Icon name="History" size={13} color={colors.foregroundMuted} />
+        </View>
         <Text style={{ flex: 1, color: colors.foregroundMuted, fontSize: 12, lineHeight: 17 }}>
-          {savedTo ? <>{m.historyInRepo[0]}<Text style={{ color: colors.foreground }}>{savedTo}</Text>{m.historyInRepo[1]}</> : m.localHistory}
+          {savedTo ? (
+            <>
+              {m.historyInRepo[0]}
+              <Text style={{ color: colors.foreground }}>{savedTo}</Text>
+              {m.historyInRepo[1]}
+            </>
+          ) : (
+            m.localHistory
+          )}
         </Text>
       </View>
       <View style={{ flexDirection: "row", gap: 4 }}>
         {actions.map((action) => (
-          <PressScale key={action.label} accessibilityRole="button" disabled={mutation.isPending} onPress={action.onPress}
-            style={({ pressed, hovered }) => ({ paddingHorizontal: 8, paddingVertical: 4, borderRadius: 4, opacity: mutation.isPending ? 0.7 : 1,
-              backgroundColor: pressed ? colors.border : hovered ? colors.surface2 : "transparent" })}>
-            <Text style={{ color: colors.foreground, fontSize: 12, lineHeight: 16, fontWeight: "600" }}>{busy === action.kind ? action.busyLabel : action.label}</Text>
+          <PressScale
+            key={action.label}
+            accessibilityRole="button"
+            disabled={mutation.isPending}
+            onPress={action.onPress}
+            style={({ pressed, hovered }) => ({
+              paddingHorizontal: 8,
+              paddingVertical: 4,
+              borderRadius: 4,
+              opacity: mutation.isPending ? 0.7 : 1,
+              backgroundColor: pressed ? colors.border : hovered ? colors.surface2 : "transparent",
+            })}
+          >
+            <Text style={{ color: colors.foreground, fontSize: 12, lineHeight: 16, fontWeight: "600" }}>
+              {busy === action.kind ? action.busyLabel : action.label}
+            </Text>
           </PressScale>
         ))}
       </View>
-      <FolderPicker key={picking ? "open" : "closed"} colors={colors} workspaceId={workspaceId} directory={directory} open={picking} start={savedTo ?? ""}
-        onClose={() => setPicking(false)} onPick={(folder) => { setPicking(false); mutation.mutate(folder); }} />
+      <FolderPicker
+        key={picking ? "open" : "closed"}
+        colors={colors}
+        workspaceId={workspaceId}
+        directory={directory}
+        open={picking}
+        start={savedTo ?? ""}
+        onClose={() => setPicking(false)}
+        onPick={(folder) => {
+          setPicking(false);
+          mutation.mutate(folder);
+        }}
+      />
     </View>
   );
 }
 
+function parentOf(path: string): string {
+  return path.split("/").slice(0, -1).join("/");
+}
+
 // Browses the repo's folders on the daemon host. A new folder only needs a
 // name: it's made the first time a run is saved there.
-function FolderPicker({ colors, workspaceId, directory, open, start, onClose, onPick }: {
+function FolderPicker({
+  colors,
+  workspaceId,
+  directory,
+  open,
+  start,
+  onClose,
+  onPick,
+}: {
   colors: Colors;
   workspaceId: string;
   directory: string;
@@ -74,7 +117,6 @@ function FolderPicker({ colors, workspaceId, directory, open, start, onClose, on
   onPick(folder: string): void;
 }) {
   const { messages: m } = useProgressLanguage();
-  const parentOf = (path: string) => path.split("/").slice(0, -1).join("/");
   const [at, setAt] = useState(() => parentOf(start));
   const [naming, setNaming] = useState<string | null>(null);
   const list = useRpc(listFolders);
@@ -85,78 +127,190 @@ function FolderPicker({ colors, workspaceId, directory, open, start, onClose, on
   });
   const join = (name: string) => (at ? `${at}/${name}` : name);
   const crumbs = at ? at.split("/") : [];
-  const close = () => { setNaming(null); setAt(parentOf(start)); onClose(); };
+  const close = () => {
+    setNaming(null);
+    setAt(parentOf(start));
+    onClose();
+  };
   const newName = naming?.trim().replace(/\/+$/, "") ?? "";
 
   return (
-    <Modal title={m.historyFolderTitle} icon={<Icon name="FolderOpen" size={16} color={colors.foregroundMuted} />} open={open} onOpenChange={(next) => { if (!next) close(); }}>
+    <Modal
+      title={m.historyFolderTitle}
+      icon={<Icon name="FolderOpen" size={16} color={colors.foregroundMuted} />}
+      open={open}
+      onOpenChange={(next) => {
+        if (!next) close();
+      }}
+    >
       {/* Paseo sizes a non-scrolling dialog to 85% of the window, so let it size to
           its content; the list's own height cap keeps the buttons in view. */}
       <Modal.Content>
-      <ProgressLanguageProvider>
-        <Text style={{ color: colors.foregroundMuted, fontSize: 12, lineHeight: 17 }}>
-          {m.historyFolderHint}
-        </Text>
-        <View style={{ flexDirection: "row", flexWrap: "wrap", alignItems: "center", gap: 2, paddingHorizontal: 4 }}>
-          {[m.repoTop, ...crumbs].map((crumb, index) => (
-            <React.Fragment key={index}>
-              {index ? <Icon name="ChevronRight" size={12} color={colors.foregroundMuted} /> : null}
-              <PressScale accessibilityRole="button" disabled={index === crumbs.length} onPress={() => { setNaming(null); setAt(crumbs.slice(0, index).join("/")); }}
-                style={({ pressed, hovered }) => ({ paddingHorizontal: 4, paddingVertical: 2, borderRadius: 4,
-                  backgroundColor: index === crumbs.length ? "transparent" : pressed ? colors.border : hovered ? colors.surface2 : "transparent" })}>
-                <Text style={{ color: index === crumbs.length ? colors.foreground : colors.foregroundMuted, fontSize: 12, lineHeight: 16, fontWeight: index === crumbs.length ? "600" : "400" }}>{crumb}</Text>
-              </PressScale>
-            </React.Fragment>
-          ))}
-        </View>
+        <ProgressLanguageProvider>
+          <Text style={{ color: colors.foregroundMuted, fontSize: 12, lineHeight: 17 }}>{m.historyFolderHint}</Text>
+          <View style={{ flexDirection: "row", flexWrap: "wrap", alignItems: "center", gap: 2, paddingHorizontal: 4 }}>
+            {[m.repoTop, ...crumbs].map((crumb, index) => (
+              <React.Fragment key={index}>
+                {index ? <Icon name="ChevronRight" size={12} color={colors.foregroundMuted} /> : null}
+                <PressScale
+                  accessibilityRole="button"
+                  disabled={index === crumbs.length}
+                  onPress={() => {
+                    setNaming(null);
+                    setAt(crumbs.slice(0, index).join("/"));
+                  }}
+                  style={({ pressed, hovered }) => ({
+                    paddingHorizontal: 4,
+                    paddingVertical: 2,
+                    borderRadius: 4,
+                    backgroundColor: index === crumbs.length ? "transparent" : pressed ? colors.border : hovered ? colors.surface2 : "transparent",
+                  })}
+                >
+                  <Text
+                    style={{
+                      color: index === crumbs.length ? colors.foreground : colors.foregroundMuted,
+                      fontSize: 12,
+                      lineHeight: 16,
+                      fontWeight: index === crumbs.length ? "600" : "400",
+                    }}
+                  >
+                    {crumb}
+                  </Text>
+                </PressScale>
+              </React.Fragment>
+            ))}
+          </View>
 
-        {/* Only the list scrolls, so Use and Cancel stay in view in a big repo. */}
-        <ScrollView style={{ maxHeight: 320, flexGrow: 0 }} contentContainerStyle={{ gap: 2 }}>
-          {listed.isPending ? <ActivityIndicator color={colors.foregroundMuted} accessibilityLabel={m.loadingFolders} style={{ alignSelf: "flex-start", padding: 8 }} /> : null}
-          {listed.data?.folders.map((name) => (
-            <PressableRow key={name} colors={colors} accessibilityRole="button" accessibilityLabel={m.openItem(name)} onPress={() => { setNaming(null); setAt(join(name)); }}
-              style={{ flexDirection: "row", alignItems: "center", gap: 8, paddingHorizontal: 8, paddingVertical: 6, borderRadius: 6 }}>
-              <Icon name="Folder" size={14} color={colors.foregroundMuted} />
-              <Text numberOfLines={1} ellipsizeMode="middle" style={{ flex: 1, color: colors.foreground, fontSize: 12, lineHeight: 16 }}>{name}</Text>
-              <Icon name="ChevronRight" size={14} color={colors.foregroundMuted} />
-            </PressableRow>
-          ))}
-          {listed.data && !listed.data.folders.length ? (
-            <Text style={{ color: colors.foregroundMuted, fontSize: 12, lineHeight: 16, paddingHorizontal: 8, paddingVertical: 6 }}>{m.noFolders}</Text>
-          ) : null}
-          {listed.error ? <Text accessibilityRole="alert" style={{ color: colors.statusDanger, fontSize: 12, lineHeight: 17, paddingHorizontal: 8 }}>{errorText(listed.error, m.listFoldersFailure)}</Text> : null}
-        </ScrollView>
+          {/* Only the list scrolls, so Use and Cancel stay in view in a big repo. */}
+          <ScrollView style={{ maxHeight: 320, flexGrow: 0 }} contentContainerStyle={{ gap: 2 }}>
+            {listed.isPending ? (
+              <ActivityIndicator color={colors.foregroundMuted} accessibilityLabel={m.loadingFolders} style={{ alignSelf: "flex-start", padding: 8 }} />
+            ) : null}
+            {listed.data?.folders.map((name) => (
+              <PressableRow
+                key={name}
+                colors={colors}
+                accessibilityRole="button"
+                accessibilityLabel={m.openItem(name)}
+                onPress={() => {
+                  setNaming(null);
+                  setAt(join(name));
+                }}
+                style={{ flexDirection: "row", alignItems: "center", gap: 8, paddingHorizontal: 8, paddingVertical: 6, borderRadius: 6 }}
+              >
+                <Icon name="Folder" size={14} color={colors.foregroundMuted} />
+                <Text numberOfLines={1} ellipsizeMode="middle" style={{ flex: 1, color: colors.foreground, fontSize: 12, lineHeight: 16 }}>
+                  {name}
+                </Text>
+                <Icon name="ChevronRight" size={14} color={colors.foregroundMuted} />
+              </PressableRow>
+            ))}
+            {listed.data && !listed.data.folders.length ? (
+              <Text style={{ color: colors.foregroundMuted, fontSize: 12, lineHeight: 16, paddingHorizontal: 8, paddingVertical: 6 }}>{m.noFolders}</Text>
+            ) : null}
+            {listed.error ? (
+              <Text accessibilityRole="alert" style={{ color: colors.statusDanger, fontSize: 12, lineHeight: 17, paddingHorizontal: 8 }}>
+                {errorText(listed.error, m.listFoldersFailure)}
+              </Text>
+            ) : null}
+          </ScrollView>
 
-        {naming === null ? (
-          <PressScale accessibilityRole="button" onPress={() => setNaming("")}
-            style={({ pressed, hovered }) => ({ alignSelf: "flex-start", flexDirection: "row", alignItems: "center", gap: 6, paddingHorizontal: 8, paddingVertical: 5, borderRadius: 6, backgroundColor: pressed ? colors.border : hovered ? colors.surface2 : "transparent" })}>
-            <Icon name="FolderPlus" size={14} color={colors.foreground} />
-            <Text style={{ color: colors.foreground, fontSize: 12, lineHeight: 16, fontWeight: "600" }}>{m.newFolder}</Text>
-          </PressScale>
-        ) : (
-          <View style={{ flexDirection: "row", alignItems: "center", gap: 6 }}>
-            <TextInput autoFocus value={naming} onChangeText={setNaming} onSubmitEditing={() => { if (newName) onPick(join(newName)); }}
-              autoCapitalize="none" autoCorrect={false} spellCheck={false} accessibilityLabel={m.newFolderName} placeholder="progress-history" placeholderTextColor={colors.foregroundMuted}
-              style={{ flex: 1, color: colors.foreground, fontSize: 12, lineHeight: 16, paddingHorizontal: 8, paddingVertical: 6, borderRadius: 6, borderWidth: 1, borderColor: colors.border, backgroundColor: colors.surface1 }} />
-            <PressScale accessibilityRole="button" disabled={!newName} onPress={() => onPick(join(newName))}
-              style={({ pressed, hovered }) => ({ paddingHorizontal: 10, paddingVertical: 6, borderRadius: 6, backgroundColor: colors.accent, opacity: !newName ? 0.5 : pressed ? 0.7 : hovered ? 0.85 : 1 })}>
-              <Text style={{ color: colors.accentForeground, fontSize: 12, lineHeight: 16, fontWeight: "600" }}>{m.useNewFolder}</Text>
+          {naming === null ? (
+            <PressScale
+              accessibilityRole="button"
+              onPress={() => setNaming("")}
+              style={({ pressed, hovered }) => ({
+                alignSelf: "flex-start",
+                flexDirection: "row",
+                alignItems: "center",
+                gap: 6,
+                paddingHorizontal: 8,
+                paddingVertical: 5,
+                borderRadius: 6,
+                backgroundColor: pressed ? colors.border : hovered ? colors.surface2 : "transparent",
+              })}
+            >
+              <Icon name="FolderPlus" size={14} color={colors.foreground} />
+              <Text style={{ color: colors.foreground, fontSize: 12, lineHeight: 16, fontWeight: "600" }}>{m.newFolder}</Text>
             </PressScale>
-          </View>
-        )}
+          ) : (
+            <View style={{ flexDirection: "row", alignItems: "center", gap: 6 }}>
+              <TextInput
+                autoFocus
+                value={naming}
+                onChangeText={setNaming}
+                onSubmitEditing={() => {
+                  if (newName) onPick(join(newName));
+                }}
+                autoCapitalize="none"
+                autoCorrect={false}
+                spellCheck={false}
+                accessibilityLabel={m.newFolderName}
+                placeholder="progress-history"
+                placeholderTextColor={colors.foregroundMuted}
+                style={{
+                  flex: 1,
+                  color: colors.foreground,
+                  fontSize: 12,
+                  lineHeight: 16,
+                  paddingHorizontal: 8,
+                  paddingVertical: 6,
+                  borderRadius: 6,
+                  borderWidth: 1,
+                  borderColor: colors.border,
+                  backgroundColor: colors.surface1,
+                }}
+              />
+              <PressScale
+                accessibilityRole="button"
+                disabled={!newName}
+                onPress={() => onPick(join(newName))}
+                style={({ pressed, hovered }) => ({
+                  paddingHorizontal: 10,
+                  paddingVertical: 6,
+                  borderRadius: 6,
+                  backgroundColor: colors.accent,
+                  opacity: !newName ? 0.5 : pressed ? 0.7 : hovered ? 0.85 : 1,
+                })}
+              >
+                <Text style={{ color: colors.accentForeground, fontSize: 12, lineHeight: 16, fontWeight: "600" }}>{m.useNewFolder}</Text>
+              </PressScale>
+            </View>
+          )}
 
-        <View style={{ flexDirection: "row", flexWrap: "wrap", alignItems: "center", justifyContent: "flex-end", gap: 8 }}>
-          {at ? null : <Text style={{ flex: 1, minWidth: 140, color: colors.foregroundMuted, fontSize: 12, lineHeight: 17 }}>{m.pickFolderHint}</Text>}
-          <PressScale accessibilityRole="button" onPress={close}
-            style={({ pressed, hovered }) => ({ paddingHorizontal: 12, paddingVertical: 6, borderRadius: 6, backgroundColor: pressed ? colors.border : hovered ? colors.surface2 : "transparent" })}>
-            <Text style={{ color: colors.foreground, fontSize: 12, lineHeight: 16, fontWeight: "600" }}>{m.cancel}</Text>
-          </PressScale>
-          <PressScale accessibilityRole="button" disabled={!at} onPress={() => onPick(at)} outerStyle={{ flexShrink: 1 }}
-            style={({ pressed, hovered }) => ({ paddingHorizontal: 12, paddingVertical: 6, borderRadius: 6, backgroundColor: colors.accent, opacity: !at ? 0.5 : pressed ? 0.7 : hovered ? 0.85 : 1 })}>
-            <Text numberOfLines={1} ellipsizeMode="middle" style={{ color: colors.accentForeground, fontSize: 12, lineHeight: 16, fontWeight: "600" }}>{at ? m.useNamedFolder(crumbs[crumbs.length - 1]) : m.useFolder}</Text>
-          </PressScale>
-        </View>
-      </ProgressLanguageProvider>
+          <View style={{ flexDirection: "row", flexWrap: "wrap", alignItems: "center", justifyContent: "flex-end", gap: 8 }}>
+            {at ? null : <Text style={{ flex: 1, minWidth: 140, color: colors.foregroundMuted, fontSize: 12, lineHeight: 17 }}>{m.pickFolderHint}</Text>}
+            <PressScale
+              accessibilityRole="button"
+              onPress={close}
+              style={({ pressed, hovered }) => ({
+                paddingHorizontal: 12,
+                paddingVertical: 6,
+                borderRadius: 6,
+                backgroundColor: pressed ? colors.border : hovered ? colors.surface2 : "transparent",
+              })}
+            >
+              <Text style={{ color: colors.foreground, fontSize: 12, lineHeight: 16, fontWeight: "600" }}>{m.cancel}</Text>
+            </PressScale>
+            <PressScale
+              accessibilityRole="button"
+              disabled={!at}
+              onPress={() => onPick(at)}
+              outerStyle={{ flexShrink: 1 }}
+              style={({ pressed, hovered }) => ({
+                paddingHorizontal: 12,
+                paddingVertical: 6,
+                borderRadius: 6,
+                backgroundColor: colors.accent,
+                opacity: !at ? 0.5 : pressed ? 0.7 : hovered ? 0.85 : 1,
+              })}
+            >
+              <Text numberOfLines={1} ellipsizeMode="middle" style={{ color: colors.accentForeground, fontSize: 12, lineHeight: 16, fontWeight: "600" }}>
+                {at ? m.useNamedFolder(crumbs[crumbs.length - 1]) : m.useFolder}
+              </Text>
+            </PressScale>
+          </View>
+        </ProgressLanguageProvider>
       </Modal.Content>
     </Modal>
   );

package/client/i18n.ts

@@ -77,10 +77,15 @@ export function clientHeadline(locale: ProgressLocale, dashboard: Dashboard): He
 
 export function timelineLabel(m: ProgressMessages, label: TimelineLabel): string {
   switch (label.kind) {
-    case "added": return m.added;
-    case "reset": return m.resetStatus;
-    case "stage": return m.stageLabel(label.stage);
-    case "status": return m.status[label.status];
-    case "waiting": return m.waitingForTicket(label.id);
+    case "added":
+      return m.added;
+    case "reset":
+      return m.resetStatus;
+    case "stage":
+      return m.stageLabel(label.stage);
+    case "status":
+      return m.status[label.status];
+    case "waiting":
+      return m.waitingForTicket(label.id);
   }
 }