@lotics/ui 20.1.0 → 21.0.0

package/src/agent_run_pane.tsx

@@ -0,0 +1,134 @@
+import { useCallback, useMemo, type ReactNode } from "react";
+import { View } from "react-native";
+import { AgentRun, type AgentRunProps } from "./agent_run";
+import type { AgentUIPart } from "./agent_transform";
+import { ClarifyWizard, ClarifyWizardActions, ClarifyWizardScope, type ClarifyWizardAnswer } from "./clarify_wizard";
+import { DialogScrollArea } from "./dialog";
+import { FollowScroll } from "./follow_scroll";
+import { useScreenSize } from "@lotics/ui/use_screen_size";
+
+/**
+ * What this pair needs from a run — structurally the shape `useAgentRun()`
+ * returns, declared here rather than imported so `@lotics/ui` keeps its one-way
+ * boundary and never depends on `@lotics/app-sdk`. Nothing enforces the match at
+ * build time; the app is where the two meet, so its typecheck is the detector.
+ */
+/** One option the agent offered. The answer's `value` IS the label — that is the
+ *  `ask_user_choice` wire shape, not a convenience. */
+export interface AgentRunOption {
+  label: string;
+  description?: string;
+}
+
+/** One question the agent asked, exactly as `pendingChoice` carries it. Named so
+ *  a consumer can DECLARE one — a template or test builds these directly, and
+ *  without a name it would borrow `ClarifyWizardQuestion` and map between two
+ *  shapes that a real run never maps between. */
+export interface AgentRunQuestion {
+  question: string;
+  options: AgentRunOption[];
+  allow_custom?: boolean;
+}
+
+export interface AgentRunLike {
+  status: "idle" | "streaming" | "awaiting_input" | "completed" | "error";
+  parts: readonly AgentUIPart[];
+  /** Non-null exactly while parked. */
+  pendingChoice: { questions: AgentRunQuestion[] } | null;
+  answerChoice: (answers: { value: string; custom: boolean }[]) => Promise<unknown>;
+  error: string | null;
+}
+
+export function AgentRunScope({ children }: { children: ReactNode }) {
+  return <ClarifyWizardScope>{children}</ClarifyWizardScope>;
+}
+
+export interface AgentRunPaneProps {
+  run: AgentRunLike;
+  labelForCall?: AgentRunProps["labelForCall"];
+  renderToolOutput?: AgentRunProps["renderToolOutput"];
+  /** Abandon a parked question — the run is left for the operator to retry. */
+  onCancel: () => void;
+}
+
+/**
+ * The run's content: the streaming transcript, or — once the agent asks — the
+ * question IN ITS PLACE.
+ *
+ * The question REPLACES the feed rather than stacking under it. The run is
+ * blocked on the answer, so the question is the only thing to act on; and
+ * stacking is what broke it in production — the wizard sat below the scroller in
+ * a container that could not scroll, so a multi-question ask ran past the
+ * dialog's height and clipped its own Submit. Every app rebuilt this arrangement
+ * by hand and it only had to be got wrong once.
+ */
+export function AgentRunPane(props: AgentRunPaneProps) {
+  const { run, labelForCall, renderToolOutput, onCancel } = props;
+  const { small } = useScreenSize();
+  const pending = run.pendingChoice;
+
+  // Mapped once per question set, not per render: the wizard keys its per-step
+  // draft off identity, and a fresh array every render is a new identity.
+  const questions = useMemo(
+    () =>
+      (pending?.questions ?? []).map((q) => ({
+        question: q.question,
+        answers: q.options.map((o) => ({ value: o.label, label: o.label, description: o.description ?? "" })),
+        allowCustom: q.allow_custom === true,
+      })),
+    [pending],
+  );
+  const submit = useCallback(
+    (answers: ClarifyWizardAnswer[]) => {
+      void run.answerChoice(answers.map((a) => ({ value: a.value, custom: a.custom })));
+    },
+    [run],
+  );
+
+  if (pending) {
+    return (
+      <DialogScrollArea>
+        <View style={{ paddingVertical: 4 }}>
+          <ClarifyWizard questions={questions} onSubmit={submit} onCancel={onCancel} />
+        </View>
+      </DialogScrollArea>
+    );
+  }
+
+  // FollowScroll, not DialogScrollArea: the transcript grows from the bottom and
+  // the newest step has to stay in view. Swapping the scroller on the park is
+  // deliberate — remounting opens the question at the top rather than wherever
+  // the feed happened to be scrolled to.
+  return (
+    <FollowScroll contentContainerStyle={{ paddingBottom: 24, paddingHorizontal: small ? 16 : 24 }}>
+      {/* No empty-state slot on purpose. `AgentRun` renders its own breathing
+          "Starting…" row while streaming with zero parts, localized through the
+          `agentRun` locale slice — and ai_patterns states the law outright:
+          never hand-roll a placeholder in front of the feed. A slot here would
+          invite exactly that, and every app would localize it again. */}
+      <AgentRun
+        parts={run.parts}
+        state={run.status === "error" ? "error" : run.status === "streaming" ? "streaming" : "done"}
+        error={run.error ?? undefined}
+        labelForCall={labelForCall}
+        renderToolOutput={renderToolOutput}
+      />
+    </FollowScroll>
+  );
+}
+
+/**
+ * The run's action bar, for a `DialogFooter`. Renders the wizard's
+ * Cancel/Back/Next/Submit while a question is up and NOTHING otherwise, so the
+ * host can mount it unconditionally and let the run decide.
+ *
+ * Pinned outside the scroller is the point: no length of question can push
+ * Submit out of reach.
+ */
+export function AgentRunActions({ run }: { run: AgentRunLike }) {
+  // Reads the SAME run the pane reads, rather than state the pane publishes: two
+  // components deriving from one source cannot disagree, and nothing has to set
+  // a parent's state during a child's render to keep them in step.
+  if (run.pendingChoice == null) return null;
+  return <ClarifyWizardActions />;
+}

package/src/file_grid.tsx

@@ -16,6 +16,7 @@ import { FileThumbnail, type DisplayFile } from "./file_thumbnail";
 import { ThumbnailGrid } from "./file_thumbnail_grid";
 import { UploadingThumbnail, type UploadStatus, type UploadStatusLabels } from "./uploading_thumbnail";
 import { Button } from "./button";
+import { useLoticsLocale } from "./locale";
 
 /** An in-flight upload item (everything except a completed file). */
 export interface PendingUpload {
@@ -31,6 +32,9 @@ export interface PendingUpload {
  *  upload. The host maps its own upload state to this. */
 export type FileUpload = { status: "complete"; id: string; file: DisplayFile } | PendingUpload;
 
+/** Per-instance overrides. Both fall back to the active `LoticsLocale`
+ *  (`fileUpload`), so an app localizes this grid — including the one inside
+ *  `FilesEditor` — by supplying its pack once at the root, not per call site. */
 export interface FileGridLabels {
   /** "Retry all" footer button (shown when any upload errored). */
   retryAll?: string;
@@ -126,6 +130,14 @@ export function FileGrid(props: FileGridProps) {
     labels,
   } = props;
 
+  // prop → locale → (nothing) — the locale pack is always complete, so an app
+  // that never passes `labels` still reads its own language on an upload that
+  // stalls or dies. Hardcoded English here is what made "Upload failed" surface
+  // inside a fully-Vietnamese app, since `FilesEditor` — the way most apps reach
+  // this grid — has no way to pass `labels` down.
+  const loc = useLoticsLocale().fileUpload;
+  const upload = { ...loc, ...labels?.upload };
+
   const renderItems = buildRenderItems(files, uploads);
 
   const handleFilePress = useCallback(
@@ -142,7 +154,7 @@ export function FileGrid(props: FileGridProps) {
 
   const retryAll =
     onRetryAll && renderItems.some((item) => item.kind === "upload" && item.upload.status === "error") ? (
-      <Button onPress={onRetryAll} color="danger" title={labels?.retryAll ?? "Retry all"} />
+      <Button onPress={onRetryAll} color="danger" title={labels?.retryAll ?? loc.retryAll} />
     ) : null;
 
   return (
@@ -180,7 +192,7 @@ export function FileGrid(props: FileGridProps) {
             size={size}
             onRemove={onUploadRemove ? () => onUploadRemove(item.removeId) : undefined}
             onRetry={onRetry ? () => onRetry(item.removeId) : undefined}
-            labels={labels?.upload}
+            labels={upload}
           />
         )
       }