@haikit/client 0.11.0 → 0.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@haikit/client",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "description": "The haikit browser runtime: streams tool payloads into interactive UI surfaces. Plain ESM, no build step, no dependencies.",
   "keywords": [
     "haikit",

package/src/hai.css

@@ -327,7 +327,26 @@
   font: 12px var(--hai-mono);
   color: var(--hai-dim);
 }
-.hai-tstatus { color: var(--hai-dim); white-space: nowrap; font-variant-numeric: tabular-nums; }
+.hai-tstatus {
+  max-width: 50%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--hai-dim);
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+}
+/* a running tool's progress: the message gives way before the count does */
+.hai-tprogress { display: flex; min-width: 0; white-space: pre; }
+.hai-tmessage { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+.hai-tcount { flex: none; }
+/* …and a bar along the bottom edge of its row */
+.hai-tool summary:has(.hai-tbar) { position: relative; }
+.hai-tbar {
+  position: absolute;
+  inset: auto 0 0 0;
+  height: 2px;
+  background: linear-gradient(to right, var(--hai-accent) var(--hai-progress, 0%), transparent 0);
+}
 .hai-chevron { width: 14px; height: 14px; color: var(--hai-dim); transition: transform .15s; }
 .hai-tool[open] .hai-chevron { transform: rotate(90deg); }
 

package/src/index.d.ts

@@ -12,11 +12,28 @@ export type ConversationStatus = "idle" | "streaming" | "awaiting";
 export type SurfaceMode = "display" | "elicit";
 export type SurfaceState = "live" | "frozen";
 
+/** How far a running tool has got, as its `ctx.progress` calls said. */
+export interface Progress {
+  message?: string;
+  done?: number;
+  total?: number;
+}
+
 /** Blocks the server emits, plus the three the client synthesises locally. */
 export type Block =
   | { kind: "user"; id: string; text: string }
   | { kind: "assistant"; id: string; text: string }
-  | { kind: "tool"; id: string; name: string; input: unknown; status: string; ms?: number; result?: string }
+  | {
+      kind: "tool";
+      id: string;
+      name: string;
+      input: unknown;
+      status: string;
+      ms?: number;
+      result?: string;
+      /** What the tool's `ctx.progress` calls have said so far, merged. */
+      progress?: Progress;
+    }
   | { kind: "interaction"; id: string; handle: string; label: string }
   /** synthesised from `ui_open` — the slot a surface mounts into */
   | { kind: "ui"; id: string; handle: string; toolId: string }

package/src/index.js

@@ -190,6 +190,17 @@ export function createChat({ endpoint = "/hai", registry }) {
         break;
       }
 
+      // A frame carries only the fields its call named, so it is merged: a
+      // tool says what it is doing once, then counts.
+      case "progress": {
+        const block = state.blocks.find((b) => b.id === event.toolId);
+        if (block?.kind === "tool") {
+          const { type, toolId, ...fields } = event;
+          block.progress = { ...block.progress, ...fields };
+        }
+        break;
+      }
+
       case "ui_open":
         state.surfaces.set(event.handle, {
           handle: event.handle,

package/src/transcript.js

@@ -46,8 +46,13 @@ export function renderTranscript(root, chat) {
       el = renderBlock(block, chat);
       // an expanded tool row stays expanded when its status changes
       if (before?.el.open) el.open = true;
+    } else if (block.progress !== before.progress) {
+      // Progress changes the row in place. Rebuilt for every frame, a row a
+      // keyboard user is on would take their focus up to ten times a second.
+      const parts = rowParts.get(el);
+      if (parts) showStatus(parts, block, toolStatus(block, chat));
     }
-    shown.set(block.id, { el, look });
+    shown.set(block.id, { el, look, progress: block.progress });
     return el;
   });
   follow.shown = shown;
@@ -77,7 +82,8 @@ export function closeTranscript(root) {
 function appearance(block, chat) {
   // a surface shows a skeleton until its props arrive, and then itself for good
   if (block.kind === "ui") return chat.state.surfaces.get(block.handle)?.props ? "mounted" : "loading";
-  if (block.kind === "tool") return JSON.stringify({ ...block, status: toolStatus(block, chat) });
+  // progress is left out: it changes the row in place (see renderTranscript)
+  if (block.kind === "tool") return JSON.stringify({ ...block, progress: undefined, status: toolStatus(block, chat) });
   return JSON.stringify(block);
 }
 
@@ -116,6 +122,46 @@ const STATUS_TEXT = {
   error: (ms) => `failed · ${ms} ms`,
 };
 
+/** "2/4", or "2" when the tool hasn't said how many in all. */
+function progressCount({ done, total }) {
+  return total !== undefined ? `${done ?? 0}/${total}` : done !== undefined ? String(done) : "";
+}
+
+/** A tool row's element → its status text and progress bar, which progress changes in place. */
+const rowParts = new WeakMap();
+
+/**
+ * Fill in what a tool row says of its call. While it runs, that is its
+ * progress once it has reported some: the message gives way first on a narrow
+ * row, so the count stays readable, and the bar fills once there is a total.
+ */
+function showStatus({ status: text, bar }, block, status) {
+  const progress = status === "running" ? block.progress : undefined;
+  const message = progress?.message ?? "";
+  const count = progress ? progressCount(progress) : "";
+  if (message || count) {
+    text.className = "hai-tstatus hai-tprogress";
+    const parts = [];
+    if (message) parts.push(h("span", "hai-tmessage", message));
+    if (message && count) parts.push(h("span", null, " · "));
+    if (count) parts.push(h("span", "hai-tcount", count));
+    text.replaceChildren(...parts);
+  } else {
+    text.className = "hai-tstatus";
+    text.textContent = (STATUS_TEXT[status] ?? ((ms) => `${ms} ms`))(block.ms);
+  }
+
+  if (!bar) return;
+  const total = progress?.total;
+  bar.hidden = !total;
+  if (!total) return;
+  const done = Math.min(progress.done ?? 0, total);
+  bar.setAttribute("aria-valuemax", String(total));
+  bar.setAttribute("aria-valuenow", String(done));
+  bar.setAttribute("aria-valuetext", [message, `${done} of ${total}`].filter(Boolean).join(" · "));
+  bar.style.setProperty("--hai-progress", `${(done / total) * 100}%`);
+}
+
 function statusMark(status) {
   const mark = h("span", "hai-ticon");
   if (status === "running") mark.append(h("span", "hai-spinner"));
@@ -283,13 +329,24 @@ function renderBlock(block, chat) {
       const status = toolStatus(block, chat);
       const el = h("details", `hai-block hai-tool hai-status-${status}`);
       const summary = h("summary");
+      const parts = { status: h("span", "hai-tstatus"), bar: null };
       summary.append(
         statusMark(status),
         h("span", "hai-tname", block.name),
         h("span", "hai-targs", JSON.stringify(block.input)),
-        h("span", "hai-tstatus", (STATUS_TEXT[status] ?? ((ms) => `${ms} ms`))(block.ms)),
+        parts.status,
         icon("chevron", "hai-icon hai-chevron"),
       );
+      // a thin bar along the row's bottom edge, for progress with a total
+      if (status === "running") {
+        parts.bar = h("span", "hai-tbar");
+        parts.bar.setAttribute("role", "progressbar");
+        parts.bar.setAttribute("aria-label", `${block.name} progress`);
+        parts.bar.setAttribute("aria-valuemin", "0");
+        summary.append(parts.bar);
+      }
+      rowParts.set(el, parts);
+      showStatus(parts, block, status);
       el.append(summary);
       const detail = h("div", "hai-tool-detail");
       detail.append(