@haikit/client 0.7.0 → 0.9.0

package/src/icons.js

@@ -0,0 +1,41 @@
+/**
+ * The handful of icons the default UI draws. Stroked 24×24 paths in
+ * `currentColor`, so each takes the colour of the text around it.
+ *
+ * Built on call, never at import: the package is importable where there is no
+ * DOM.
+ */
+
+const PATHS = {
+  // one line splitting in two: the dual channel
+  brand: "M2.5 12H8c3.5 0 4.5-6 9-6h4.5M8 12c3.5 0 4.5 6 9 6h4.5",
+  send: "M12 19V5M5.5 11.5 12 5l6.5 6.5",
+  plus: "M12 5v14M5 12h14",
+  panel: "M5 4h14a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2zM15 4v16",
+  close: "M6 6l12 12M18 6 6 18",
+  chevron: "M9 6l6 6-6 6",
+  check: "M5 12.5l4.5 4.5L19 7.5",
+  alert: "M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18zM12 7.5v5.5M12 16.5v.01",
+  clock: "M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18zM12 7v5l3.5 2",
+  reply: "M5 4v7a4 4 0 0 0 4 4h10M15 11l4 4-4 4",
+};
+
+const SVG = "http://www.w3.org/2000/svg";
+
+/** An inline SVG icon, hidden from assistive technology: the text beside it, or
+ *  the button's label, says what it means. */
+export function icon(name, className = "hai-icon") {
+  const svg = document.createElementNS(SVG, "svg");
+  svg.setAttribute("class", className);
+  svg.setAttribute("viewBox", "0 0 24 24");
+  svg.setAttribute("fill", "none");
+  svg.setAttribute("stroke", "currentColor");
+  svg.setAttribute("stroke-width", "2");
+  svg.setAttribute("stroke-linecap", "round");
+  svg.setAttribute("stroke-linejoin", "round");
+  svg.setAttribute("aria-hidden", "true");
+  const path = document.createElementNS(SVG, "path");
+  path.setAttribute("d", PATHS[name]);
+  svg.append(path);
+  return svg;
+}

package/src/index.d.ts

@@ -37,6 +37,8 @@ export interface MountCtx {
   handle: string;
   mode: SurfaceMode;
   state: SurfaceState;
+  /** What the user picked, when the surface is mounted already frozen. */
+  selection?: unknown;
   send(action: string, value: unknown): Promise<void>;
 }
 
@@ -78,6 +80,8 @@ export interface SurfaceRecord {
   mode: SurfaceMode;
   state: SurfaceState;
   props: unknown | null;
+  /** What the user picked, once frozen. */
+  selection?: unknown;
   instance: SurfaceInstance | null;
   /** The element it was last mounted into. */
   element: HTMLElement | null;

package/src/index.js

@@ -222,6 +222,8 @@ export function createChat({ endpoint = "/hai", registry }) {
         const surface = state.surfaces.get(event.handle);
         if (surface) {
           surface.state = event.state;
+          // kept, so a surface mounted again once frozen still knows the answer
+          surface.selection = event.selection;
           surface.instance?.freeze?.(event.selection);
         }
         break;
@@ -320,6 +322,7 @@ export function createChat({ endpoint = "/hai", registry }) {
       handle,
       mode: surface.mode,
       state: surface.state,
+      selection: surface.selection,
       // The ONLY channel a component has to the server. It passes an action
       // name declared in the contract — never a tool, never a handler.
       send: (action, value) => interact(handle, action, value),

package/src/transcript.js

@@ -6,6 +6,8 @@
  * Everything uses textContent. Tool payloads are untrusted input.
  */
 
+import { icon } from "./icons.js";
+
 export const h = (tag, className, text) => {
   const node = document.createElement(tag);
   if (className) node.className = className;
@@ -75,9 +77,53 @@ 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) });
   return JSON.stringify(block);
 }
 
+/**
+ * What a tool row says of its call. The server leaves an elicit tool's row
+ * `awaiting` for good; the question has closed once its surface is frozen —
+ * answered, or typed over — or the conversation is out of date. An answered
+ * question stays answered when the conversation goes out of date. A tool can
+ * show a display surface before its question, and that one never freezes, so
+ * it is the elicit surface that says.
+ */
+function toolStatus(block, chat) {
+  if (block.status !== "awaiting") return block.status;
+  const { blocks, surfaces, expired } = chat.state;
+  // Found once per row and kept: every answered question keeps its row
+  // `awaiting`, and this runs for each of them on every streamed event.
+  let handle = questions.get(block);
+  if (handle === undefined) {
+    handle = blocks.find(
+      (b) => b.kind === "ui" && b.toolId === block.id && surfaces.get(b.handle)?.mode === "elicit",
+    )?.handle;
+    if (handle !== undefined) questions.set(block, handle);
+  }
+  if (surfaces.get(handle)?.state === "frozen") return "resolved";
+  return expired ? "expired" : "awaiting";
+}
+
+/** A tool row's block → the handle of the question it asked, once seen. */
+const questions = new WeakMap();
+
+const STATUS_TEXT = {
+  running: () => "running…",
+  awaiting: () => "awaiting you",
+  resolved: () => "resolved",
+  expired: () => "out of date",
+  error: (ms) => `failed · ${ms} ms`,
+};
+
+function statusMark(status) {
+  const mark = h("span", "hai-ticon");
+  if (status === "running") mark.append(h("span", "hai-spinner"));
+  else if (status === "awaiting") mark.append(h("span", "hai-pulse"));
+  else mark.append(icon(status === "error" ? "alert" : status === "expired" ? "clock" : "check"));
+  return mark;
+}
+
 /**
  * Put `elements` in order under `root`, moving none that is already there:
  * one taken out and put back loses its scroll position and focus, and any
@@ -204,43 +250,54 @@ function renderBlock(block, chat) {
       return el;
     }
 
+    // The user's answer, given in a surface rather than typed: it went back to
+    // the model as the tool's result.
     case "interaction": {
       const el = h("div", "hai-block hai-interaction");
-      el.append(h("span", "hai-arrow", "↳"), h("span", null, block.label));
+      const arrow = h("span", "hai-arrow");
+      arrow.append(icon("reply"));
+      el.append(arrow, h("span", "hai-body", block.label));
       return el;
     }
 
-    case "error":
-      return h("div", "hai-block hai-error", `error: ${block.message}`);
+    case "error": {
+      const el = h("div", "hai-block hai-error");
+      el.setAttribute("role", "alert");
+      el.append(icon("alert"), h("div", "hai-body", block.message));
+      return el;
+    }
 
     // The conversation is closed, so the notice carries the only way forward.
     case "expired": {
       const el = h("div", "hai-block hai-expired");
       const again = h("button", "hai-new", "Start a new conversation");
+      again.type = "button";
       again.onclick = () => chat.reset();
-      el.append(h("div", "hai-body", block.message), again);
+      el.append(icon("clock"), h("div", "hai-body", block.message), again);
       return el;
     }
 
     // Provenance chrome. The tool row and its surface are one visual unit:
     // what produced this, with what arguments, and what the model got back.
     case "tool": {
-      const el = h("details", `hai-block hai-tool hai-status-${block.status}`);
+      const status = toolStatus(block, chat);
+      const el = h("details", `hai-block hai-tool hai-status-${status}`);
       const summary = h("summary");
       summary.append(
-        h("span", "hai-gear", "⚙"),
+        statusMark(status),
         h("span", "hai-tname", block.name),
         h("span", "hai-targs", JSON.stringify(block.input)),
-        h(
-          "span",
-          "hai-tstatus",
-          block.status === "running" ? "…" : block.status === "awaiting" ? "awaiting user" : `${block.ms}ms`,
-        ),
+        h("span", "hai-tstatus", (STATUS_TEXT[status] ?? ((ms) => `${ms} ms`))(block.ms)),
+        icon("chevron", "hai-icon hai-chevron"),
       );
       el.append(summary);
       const detail = h("div", "hai-tool-detail");
-      detail.append(h("div", "hai-label", "→ tool_result — all the model receives"));
-      detail.append(h("pre", "hai-digest", block.result ?? "…"));
+      detail.append(
+        h("div", "hai-label", "input"),
+        h("pre", "hai-code", JSON.stringify(block.input ?? {}, null, 2)),
+        h("div", "hai-label", "→ tool_result — all the model receives"),
+        h("pre", "hai-digest", block.result ?? "…"),
+      );
       el.append(detail);
       return el;
     }
@@ -249,10 +306,15 @@ function renderBlock(block, chat) {
       const el = h("div", "hai-surface");
       el.dataset.handle = block.handle;
       const surface = chat.state.surfaces.get(block.handle);
+      if (surface) el.dataset.component = surface.component;
       if (surface?.props) {
         queueMicrotask(() => chat.mount(block.handle, el));
       } else {
-        el.append(h("div", "hai-skeleton", `${surface?.component ?? "surface"} · loading…`));
+        el.setAttribute("aria-busy", "true");
+        const skeleton = h("div", "hai-skeleton");
+        skeleton.append(h("div", "hai-skeleton-label", `${surface?.component ?? "surface"} · loading…`));
+        for (let i = 0; i < 3; i++) skeleton.append(h("div", "hai-shimmer"));
+        el.append(skeleton);
       }
       return el;
     }