@lotics/ui 20.0.2 → 20.1.0

package/docs/ai_patterns.md

@@ -157,9 +157,10 @@ PUT and rolls the calls out BELOW it on press. The run ALWAYS ends on the agent'
 no global terminal node.
 
 **Tool labels.** A tool part carries the RAW tool name (`update_records` from `tool-update_records`,
-or a `dynamic-tool`'s `toolName`), resolved via a built-in map of the platform record/document
-tools + an optional **`labelForCall`** override (localize THERE — the kit stays English). It gets
-the whole call — `{ toolName, input, state }` (`AgentToolCall`) — so a caller can phrase by what the
+or a `dynamic-tool`'s `toolName`), resolved through the active locale's **`agentRun.tools`** map —
+so a `vi` provider renders Vietnamese tool rows with no per-app wiring, the same way the rest of the
+feed's chrome already resolved. An optional **`labelForCall`** override still wins, for phrasing a
+call by what it TARGETS rather than by which tool ran. It gets the whole call — `{ toolName, input, state }` (`AgentToolCall`) — so a caller can phrase by what the
 call targets or by whether it's awaiting; return `undefined` to fall back. Unknown names fall back
 to a prettified form. `stepsLabel` localizes the "{n} steps" suffix. The tool `state` folds ai's
 7-state lifecycle to **running / awaiting / done / error**: `approval-requested` → `awaiting` (the
@@ -206,8 +207,12 @@ feed**; the starting row IS the placeholder, consistent and localized.
 **Localization.** The feed's fixed chrome — the "Thinking" label, the "Input"/"Output"/"Error"
 panel titles, the "awaiting" annotation, and the "Retry" action — resolves through the
 `LoticsLocale` `agentRun` slice (translate once at the provider; a `vi` app gets them for free).
-It is provider-localized, not per-instance prop-overridable; `labelForCall`/`stepsLabel` localize
-the tool labels and the "{n} steps" suffix per call site.
+— **and so are the tool labels** (`agentRun.tools`, keyed by raw tool name). Translating a tool
+row is no longer each app's job: an English row under a Vietnamese "Đang suy nghĩ…" was the kit
+contradicting itself. The "{n} steps" suffix is locale-backed too (`agentRun.steps`). `labelForCall`
+and `stepsLabel` remain as per-call-site OVERRIDES — for phrasing a row by what
+it targets — not as the only route to a translation. A tool name in neither the locale map nor
+`labelForCall` falls back to its prettified form.
 
 **Answering an awaiting call — `ApprovalPrompt`.** The `awaiting` row inside `AgentRun` is
 READ-ONLY — it only NAMES that a call is parked on a human decision. The surface that ANSWERS it

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "20.0.2",
+  "version": "20.1.0",
   "type": "module",
   "exports": {
     "./vite": {

package/src/agent_progress.tsx

@@ -6,6 +6,7 @@ import { WaveAvatar } from "./wave_avatar";
 import { FollowScroll } from "./follow_scroll";
 import { PressableHighlight } from "./pressable_highlight";
 import { AgentRun, resolveToolMeta, type AgentRunProps, type AgentToolCall } from "./agent_run";
+import { useLoticsLocale } from "./locale";
 import { toSegments, lastRunningStep, type AgentUIPart } from "./agent_transform";
 
 export interface AgentProgressProps {
@@ -43,7 +44,14 @@ export function AgentProgress(props: AgentProgressProps) {
   const [expanded, setExpanded] = useState(defaultExpanded ?? false);
 
   const running = lastRunningStep(toSegments(parts));
-  const runningLabel = running ? resolveToolMeta({ toolName: running.toolName, input: running.input, state: running.status }, labelForCall).label : undefined;
+  const locale = useLoticsLocale();
+  const runningLabel = running
+    ? resolveToolMeta(
+        { toolName: running.toolName, input: running.input, state: running.status },
+        labelForCall,
+        locale.agentRun.tools,
+      ).label
+    : undefined;
   const compact = label ?? runningLabel ?? (state === "done" ? "Done" : state === "error" ? "Stopped" : "Working…");
   const streaming = state === "streaming";
 

package/src/agent_run.tsx

@@ -69,19 +69,28 @@ export interface AgentRunProps {
 }
 
 // ── Tool → display meta ───────────────────────────────────────────────────────
-// The bounded set of platform tools an app agent can call. English by default
-// (the kit is locale-neutral; apps localize via `labelForCall`). A tool the map
-// doesn't know falls back to a prettified name + a neutral icon.
-const TOOL_META: Record<string, { label: string; icon: IconName }> = {
-  query_records: { label: "Searching records", icon: "search" },
-  get_record: { label: "Reading a record", icon: "file-text" },
-  get_records: { label: "Reading records", icon: "file-text" },
-  create_records: { label: "Creating records", icon: "plus" },
-  update_records: { label: "Updating records", icon: "square-pen" },
-  delete_records: { label: "Removing records", icon: "trash" },
-  generate_pdf_from_template: { label: "Generating PDF", icon: "file-down" },
-  generate_excel_from_template: { label: "Generating spreadsheet", icon: "file-spreadsheet" },
-  generate_docx_from_template: { label: "Generating document", icon: "file-text" },
+// The ICON per platform tool. The LABEL lives in the locale (`agentRun.tools`)
+// because it is language, and this component already renders localized chrome
+// around these rows — an English tool row under a Vietnamese "Đang suy nghĩ…"
+// was the kit contradicting itself. An icon is not language, so it stays here.
+// A tool neither map knows falls back to a prettified name + a neutral icon.
+const TOOL_ICONS: Record<string, IconName> = {
+  query_records: "search",
+  get_record: "file-text",
+  get_records: "file-text",
+  create_records: "plus",
+  update_records: "square-pen",
+  delete_records: "trash",
+  run_app_query: "search",
+  run_app_workflow: "play",
+  grep_knowledge: "search",
+  read_knowledge: "book-open",
+  list_knowledge: "list",
+  view_files: "file-text",
+  ask_user_choice: "message-circle-question-mark",
+  generate_pdf_from_template: "file-down",
+  generate_excel_from_template: "file-spreadsheet",
+  generate_docx_from_template: "file-text",
 };
 
 function prettifyToolName(name: string): string {
@@ -90,26 +99,37 @@ function prettifyToolName(name: string): string {
 }
 
 /** Resolve a tool's display label + icon: a caller override wins on the label,
- *  then the built-in map, then a prettified fallback. Exported so other agent
- *  surfaces (e.g. `AgentProgress`) render the same labels. */
+ *  then the active locale's `agentRun.tools`, then a prettified fallback.
+ *  Exported so other agent surfaces (e.g. `AgentProgress`) render the same
+ *  labels; `toolLabels` is optional so an existing external caller keeps
+ *  working (it just falls back to the prettified name). */
 export function resolveToolMeta(
   call: AgentToolCall,
   labelForCall?: (call: AgentToolCall) => string | undefined,
+  toolLabels?: Record<string, string>,
 ): { label: string; icon: IconName } {
-  const def =
-    TOOL_META[call.toolName] ??
-    (call.toolName.startsWith("generate_") && call.toolName.endsWith("_from_template")
-      ? { label: "Generating document", icon: "file-text" as IconName }
-      : undefined);
+  const generated =
+    call.toolName.startsWith("generate_") && call.toolName.endsWith("_from_template");
+  const label =
+    toolLabels?.[call.toolName] ??
+    (generated ? toolLabels?.generate_docx_from_template : undefined);
   return {
-    label: labelForCall?.(call) ?? def?.label ?? prettifyToolName(call.toolName),
-    icon: def?.icon ?? "list",
+    label: labelForCall?.(call) ?? label ?? prettifyToolName(call.toolName),
+    icon: TOOL_ICONS[call.toolName] ?? (generated ? "file-text" : "list"),
   };
 }
 
 /** Resolve a tool step's display label from its call. */
-function stepLabel(s: AgentStep, labelForCall?: (call: AgentToolCall) => string | undefined): string {
-  return resolveToolMeta({ toolName: s.toolName, input: s.input, state: s.status }, labelForCall).label;
+function stepLabel(
+  s: AgentStep,
+  labelForCall?: (call: AgentToolCall) => string | undefined,
+  toolLabels?: Record<string, string>,
+): string {
+  return resolveToolMeta(
+    { toolName: s.toolName, input: s.input, state: s.status },
+    labelForCall,
+    toolLabels,
+  ).label;
 }
 
 const INK = colors.zinc[700];
@@ -124,7 +144,7 @@ const INK = colors.zinc[700];
  * Pair with `Composer` + `ChangeReview`.
  */
 export function AgentRun(props: AgentRunProps) {
-  const { parts, labelForCall, renderToolOutput, onRetry, stepsLabel = (n) => `${n} steps`, accessibilityLabel } = props;
+  const { parts, labelForCall, renderToolOutput, onRetry, stepsLabel, accessibilityLabel } = props;
   const locale = useLoticsLocale();
   const segments = toSegments(parts);
   const state = props.state ?? (anyRunning(segments) ? "streaming" : "done");
@@ -163,7 +183,7 @@ export function AgentRun(props: AgentRunProps) {
             onToggle={() => toggle(seg.id)}
             labelForCall={labelForCall}
             renderToolOutput={renderToolOutput}
-            stepsLabel={stepsLabel}
+            stepsLabel={stepsLabel ?? locale.agentRun.steps}
           />
         );
       })}
@@ -369,7 +389,7 @@ function ToolGroup(props: {
 }) {
   const { steps, active, expanded, onToggle, labelForCall, renderToolOutput, stepsLabel } = props;
   const locale = useLoticsLocale();
-  const resolve = (s: AgentStep) => stepLabel(s, labelForCall);
+  const resolve = (s: AgentStep) => stepLabel(s, labelForCall, locale.agentRun.tools);
 
   // ACTIVE — one pulsing row whose label swaps in place as each call fires (the
   // label is keyed by the current step's id, so a new call rises + fades into the

package/src/locale.tsx

@@ -132,9 +132,27 @@ export interface LoticsLocale {
   /** `AgentRun`: the reasoning disclosure's label (settled / streaming), the
    *  auto-built tool peek's Input / Error / Output panel titles, the `awaiting`
    *  annotation on a call parked on a human decision, and the terminal error's
-   *  `retry` action. (Tool-step labels and the "{n} steps" suffix stay
-   *  prop-localized — `labelForCall` / `stepsLabel`.) */
-  agentRun: { starting: string; thinking: string; thinkingStreaming: string; input: string; error: string; output: string; awaiting: string; retry: string };
+   *  `retry` action, the per-tool labels (`tools`) and the "{n} steps" suffix
+   *  (`steps`). `labelForCall` / `stepsLabel` remain as per-call-site
+   *  OVERRIDES, not as the only way to get a translation. */
+  /** `AgentRun` / `AgentProgress` chrome, plus `tools` — the display label per
+   *  PLATFORM tool name. The tool set is bounded and kit-known, so localizing it
+   *  here means every app inherits it; leaving it to each call site's
+   *  `labelForCall` made a Vietnamese surface render Vietnamese chrome around
+   *  English tool rows. A name absent from the map still falls back to its
+   *  prettified form, and `labelForCall` still overrides per call. */
+  agentRun: {
+    starting: string;
+    thinking: string;
+    thinkingStreaming: string;
+    input: string;
+    error: string;
+    output: string;
+    awaiting: string;
+    retry: string;
+    tools: Record<string, string>;
+    steps: (n: number) => string;
+  };
   /** `ApprovalPrompt`: the default prompt line (overridable per instance) and
    *  the Approve / Deny button labels — the surface that ANSWERS `AgentRun`'s
    *  read-only `awaiting` row (approve/deny = the ai-sdk approval vocabulary). */
@@ -237,7 +255,35 @@ export const en: LoticsLocale = {
   matrix: { total: "Total", less: "Less", more: "More" },
   scrollToBottom: { tooltip: "Scroll to bottom" },
   textInputField: { clear: "Clear" },
-  agentRun: { starting: "Starting…", thinking: "Thinking", thinkingStreaming: "Thinking…", input: "Input", error: "Error", output: "Output", awaiting: "Awaiting", retry: "Retry" },
+  agentRun: {
+    starting: "Starting…",
+    thinking: "Thinking",
+    thinkingStreaming: "Thinking…",
+    input: "Input",
+    error: "Error",
+    output: "Output",
+    awaiting: "Awaiting",
+    retry: "Retry",
+    tools: {
+      query_records: "Searching records",
+      get_record: "Reading a record",
+      get_records: "Reading records",
+      create_records: "Creating records",
+      update_records: "Updating records",
+      delete_records: "Removing records",
+      run_app_query: "Reading data",
+      run_app_workflow: "Running an action",
+      grep_knowledge: "Searching reference material",
+      read_knowledge: "Reading reference material",
+      list_knowledge: "Listing reference material",
+      view_files: "Reading files",
+      ask_user_choice: "Asking a question",
+      generate_pdf_from_template: "Generating PDF",
+      generate_excel_from_template: "Generating spreadsheet",
+      generate_docx_from_template: "Generating document",
+    },
+    steps: (n) => `${n} steps`,
+  },
   approvalPrompt: { message: "The assistant wants to perform an action that needs your approval.", approve: "Approve", deny: "Deny" },
   messageActions: { copy: "Copy", copied: "Copied", regenerate: "Regenerate", edit: "Edit", previousVersion: "Previous version", nextVersion: "Next version" },
 };
@@ -335,7 +381,35 @@ export const vi: LoticsLocale = {
   matrix: { total: "Tổng", less: "Ít", more: "Nhiều" },
   scrollToBottom: { tooltip: "Cuộn xuống cuối" },
   textInputField: { clear: "Xóa" },
-  agentRun: { starting: "Đang bắt đầu…", thinking: "Suy nghĩ", thinkingStreaming: "Đang suy nghĩ…", input: "Đầu vào", error: "Lỗi", output: "Kết quả", awaiting: "Chờ duyệt", retry: "Thử lại" },
+  agentRun: {
+    starting: "Đang bắt đầu…",
+    thinking: "Suy nghĩ",
+    thinkingStreaming: "Đang suy nghĩ…",
+    input: "Đầu vào",
+    error: "Lỗi",
+    output: "Kết quả",
+    awaiting: "Chờ duyệt",
+    retry: "Thử lại",
+    tools: {
+      query_records: "Đang tìm dữ liệu",
+      get_record: "Đang đọc một bản ghi",
+      get_records: "Đang đọc dữ liệu",
+      create_records: "Đang tạo dữ liệu",
+      update_records: "Đang cập nhật dữ liệu",
+      delete_records: "Đang xoá dữ liệu",
+      run_app_query: "Đang đọc dữ liệu",
+      run_app_workflow: "Đang chạy tác vụ",
+      grep_knowledge: "Đang tra tài liệu",
+      read_knowledge: "Đang đọc tài liệu",
+      list_knowledge: "Đang liệt kê tài liệu",
+      view_files: "Đang đọc tệp",
+      ask_user_choice: "Đang hỏi thêm",
+      generate_pdf_from_template: "Đang tạo PDF",
+      generate_excel_from_template: "Đang tạo bảng tính",
+      generate_docx_from_template: "Đang tạo văn bản",
+    },
+    steps: (n) => `${n} bước`,
+  },
   approvalPrompt: { message: "Trợ lý muốn thực hiện thao tác cần bạn duyệt.", approve: "Cho phép", deny: "Từ chối" },
   messageActions: { copy: "Sao chép", copied: "Đã sao chép", regenerate: "Tạo lại", edit: "Chỉnh sửa", previousVersion: "Phiên bản trước", nextVersion: "Phiên bản sau" },
 };