akanjs 3.0.0-beta.2 → 3.0.0-beta.20

package/types/webkit/useFrameRuntime.d.ts

@@ -43,7 +43,7 @@ export declare function getKeyboardAccessorySlots(path: string, frameSlots: Fram
 export declare function resolveKeyboardAccessoryHeight(path: string, frameSlots: FrameSlotMap): number;
 export declare function hasKeyboardStickySlot(path: string, frameSlots: FrameSlotMap): boolean;
 export declare function hasBottomAnchoredKeyboardSlot(path: string, frameSlots: FrameSlotMap): boolean;
-export declare function resolveKeyboardFrame({ keyboardHeight, bottomSafeArea, visualViewportKeyboardHeight, platformProfile, sticky, freeze, }: {
+export declare function resolveKeyboardFrame({ keyboardHeight, visualViewportKeyboardHeight, platformProfile, sticky, freeze, }: {
     keyboardHeight: number;
     bottomSafeArea: number;
     visualViewportKeyboardHeight: number;

package/types/webkit/useGeoLocation.d.ts

@@ -1,4 +1,4 @@
-/** Capacitor geolocation hook with permission checks and current position lookup. */
+/** `getPosition` opens the app settings instead of resolving when location permission is denied. */
 export declare const useGeoLocation: () => {
     checkPermission: () => Promise<{
         geolocation: string;

package/types/webkit/usePageTool.d.ts

@@ -1,19 +1,12 @@
 interface PageToolOptions {
-    /** The slice's own `setPageOf<Model>`, or null while the screen draws no pager — one page needs no control. */
+    /** Null publishes nothing: a single page draws no pager. */
     name: string | null;
-    /** The model's refName, for the description an agent picks the tool by. */
     model: string;
     page: number;
     lastPage: number;
     total: number;
     onSelect: (page: number) => void;
 }
-/**
- * Publishes one pager: the `setPageOf<Model>` its control already dispatches, plus the counts an agent needs to
- * aim it. Shared by the three components that draw a pager so all three speak the slice's one name.
- *
- * The page count rides the guard and the resource rather than the description, which is mount-static and would
- * keep quoting whatever the list held on its first render.
- */
+/** The page count rides the guard and the resource: the description is read once, at mount. */
 export declare const usePageTool: ({ name, model, page, lastPage, total, onSelect }: PageToolOptions) => (args_0: number) => Promise<void>;
 export {};

package/types/webkit/usePurchase.d.ts

@@ -5,10 +5,7 @@ export interface ProductType {
     type: keyof typeof CdvPurchase.ProductType;
 }
 export type CdvProductType = CdvPurchase.ProductType;
-/**
- * @deprecated Built on `cordova-plugin-purchase`, which is a peer dependency of the whole package because of
- * this one hook. Replace with `@revenuecat/purchases-capacitor`; this stays only for apps already on it.
- */
+/** @deprecated Needs `cordova-plugin-purchase`, a package-wide peer dependency; use `@revenuecat/purchases-capacitor`. */
 export declare const usePurchase: ({ platform, productInfo, url, onPay, onSubscribe, }: {
     platform: PlatformType;
     productInfo: ProductType[];

package/types/webkit/useScreenScope.d.ts

@@ -8,18 +8,7 @@ interface ScreenScopeOptions {
     label?: string;
     items?: () => ScreenScopeItem[];
 }
-/**
- * Announces what a component has on screen: one scope for its mounted lifetime, plus an `<id>.items` resource
- * naming what it currently renders. `Load.Units`/`Load.View` call this, so every list and detail view is visible
- * to the in-page agent with no app code. Items are capped and the cap is declared — a truncated list must never
- * read as the whole one.
- *
- * Opened under the scope it is mounted in, not at the root: a list inside an `Agent.Zone` belongs to that zone's
- * view, and a view only sees keys in its own subtree.
- *
- * Returns the scope path, which the caller puts on the container it renders as `data-agent-scope`: that attribute
- * is how `readScreen({ section })` and `highlight` resolve a path the agent read in the screen context back to the
- * element. A caller that renders no container of its own simply is not addressable that way.
- */
+/** Opens a scope under the ambient one, plus an `<id>.items` resource capped at 100 and marked `truncated` past it.
+ * Returns the path the caller sets as `data-agent-scope`, which `readScreen({ section })` and `highlight` resolve. */
 export declare const useScreenScope: ({ id, kind, label, items }: ScreenScopeOptions) => string;
 export {};

package/ui/Agent/Attach.tsx

@@ -38,13 +38,14 @@ export const Attach = ({ className, label, onPick }: AttachProps) => {
   );
 };
 
-interface ChipsProps {
+export interface ChipsProps {
   className?: string;
+  
   attachments: readonly MessageAttachment[];
   /** Omitted for a sent message: what is already on the wire cannot be taken back. */
   onRemove?: (index: number) => void;
   removeLabel?: string;
-  /** Files still being read, standing beside the ones that are staged so the panel is never blank mid-drop. */
+  /** Files still being read, drawn as placeholders beside the staged ones. */
   pending?: number;
   pendingLabel?: string;
 }
@@ -56,11 +57,11 @@ export const Chips = ({ className, attachments, onRemove, removeLabel, pending =
         className="flex items-center gap-1 rounded-field bg-muted px-2 py-0.5 text-xs"
         key={`${attachment.name}-${idx}`}
       >
-        {attachment.data && attachment.mimeType.startsWith("image/") ? (
+        {(attachment.data || attachment.url) && attachment.mimeType?.startsWith("image/") ? (
           <img
             alt={attachment.name}
             className="size-6 rounded-field object-cover"
-            src={`data:${attachment.mimeType};base64,${attachment.data}`}
+            src={attachment.data ? `data:${attachment.mimeType};base64,${attachment.data}` : attachment.url}
           />
         ) : null}
         <span className="max-w-32 truncate">{attachment.name}</span>

package/ui/Agent/Bubble.tsx

@@ -1,22 +1,26 @@
 "use client";
 import { cn, usePage } from "akanjs/client";
 import { memo } from "react";
-import { type AgentProgressReport, AgentSession, type ChatMessage, type ToolCallResult, ToolOutput } from "../../vendor/use-agentic";
+import {
+  type AgentProgressReport,
+  type AgentProgressStep,
+  AgentSession,
+  type ChatMessage,
+  type ToolCallResult,
+  ToolOutput,
+} from "../../vendor/use-agentic";
 import { createOverridable } from "../UiOverride";
 import { Chips } from "./Attach";
 import Markdown from "./Markdown";
+import { ReferenceChips } from "./Refer";
 import { tokenCount } from "./tokenCount";
 
 export interface BubbleProps {
   className?: string;
   message: ChatMessage;
-  /** What the call still running last reported about itself, so a slow tool says what it is doing. */
+  /** What the running call last reported about itself. */
   progress?: (AgentProgressReport & { callId: string }) | null;
-  /**
-   * Results by call id, gathered across the transcript. A call and its result are two wire messages — the model
-   * needs both — but they are one thing that happened, so the call's own row resolves in place instead of the
-   * name appearing again as a second row.
-   */
+  /** Results by call id across the transcript, so a call's own row resolves in place. */
   results?: ReadonlyMap<string, ToolCallResult>;
 }
 
@@ -27,28 +31,49 @@ interface RowProps {
   progress?: AgentProgressReport | null;
 }
 
-/** What the row shows when it is opened: everything the model was handed that the one line could not fit. */
 const payloadOf = ({ result, changes, error }: ToolCallResult) => ({
   ...(result !== undefined ? { result } : {}),
   ...(changes?.length ? { changes } : {}),
   ...(error ? { error } : {}),
 });
 
-/**
- * The arguments ride along because two calls of one tool are the same row otherwise — two searches, one name.
- *
- * A settled row opens: the estimated token cost is on the line, and the value itself is one click below it. Both
- * are there because a tool result is the one part of a transcript neither the user nor the app author sees — it is
- * the app's own return value, sized for a screen and not for a model's window, and a conversation that fills up
- * after four messages is answered by *which* row cost a million tokens and nothing else.
- */
+const stepGlyph = { pending: "○", running: "●", done: "✓", error: "✕" } as const;
+const stepTone = {
+  pending: "text-foreground/40",
+  running: "animate-pulse text-warning",
+  done: "text-success",
+  error: "text-destructive",
+} as const;
+
+interface StepListProps {
+  steps: AgentProgressStep[];
+}
+const StepList = ({ steps }: StepListProps) => {
+  const settled = steps.filter((step) => step.status === "done" || step.status === "error").length;
+  return (
+    <details className="px-2 pb-1">
+      <summary className="cursor-pointer font-mono text-[10px] text-foreground/50">
+        {settled}/{steps.length}
+      </summary>
+      <ul className="mt-1 flex flex-col gap-0.5">
+        {steps.map((step) => (
+          <li className="flex items-baseline gap-2 text-[10px]" key={step.id}>
+            <span className={cn("shrink-0", stepTone[step.status])}>{stepGlyph[step.status]}</span>
+            <span className="truncate">{step.label}</span>
+            {step.detail ? <span className="truncate text-foreground/50">{step.detail}</span> : null}
+          </li>
+        ))}
+      </ul>
+    </details>
+  );
+};
+
 const Row = ({ name, args, result, progress }: RowProps) => {
   const { l } = usePage();
   const payload = result ? payloadOf(result) : null;
   const head = (
     <>
       {result ? (
-        
         <span
           aria-label={l(result.error ? "base.agentToolFailed" : "base.agentToolDone")}
           className={cn("shrink-0 text-[10px]", result.error ? "text-destructive" : "text-success")}
@@ -80,6 +105,13 @@ const Row = ({ name, args, result, progress }: RowProps) => {
       </span>
     </>
   );
+  if (progress?.steps?.length)
+    return (
+      <div className="rounded-field bg-muted">
+        <div className="flex items-baseline gap-2 px-2 py-1">{head}</div>
+        <StepList steps={progress.steps} />
+      </div>
+    );
   if (!payload || !Object.keys(payload).length)
     return <div className="flex items-baseline gap-2 rounded-field bg-muted px-2 py-1">{head}</div>;
   return (
@@ -104,11 +136,6 @@ interface AskProps {
   result: ToolCallResult;
 }
 
-/**
- * A settled `askUser` reads as the exchange it was — the question, then what the user answered — instead of as a
- * tool row. An unsettled one renders nothing here: the question card below the transcript is holding it, and the
- * text would otherwise sit on screen twice.
- */
 const Ask = ({ args, result }: AskProps) => {
   const answered = (Array.isArray(result.result) ? result.result : [result.result])
     .filter((one): one is string => typeof one === "string" && !!one)
@@ -130,7 +157,6 @@ const Ask = ({ args, result }: AskProps) => {
 
 const Content = ({ className, message, progress, results }: BubbleProps) => {
   const { l } = usePage();
-
   if (message.summary)
     return (
       <details className={cn("rounded-box border border-border bg-muted/60 px-3 py-2", className)}>
@@ -150,6 +176,7 @@ const Content = ({ className, message, progress, results }: BubbleProps) => {
     return (
       <div className={cn("flex max-w-[85%] flex-col items-end gap-1 self-end", className)}>
         {message.attachments?.length ? <Chips attachments={message.attachments} className="justify-end" /> : null}
+        {message.references?.length ? <ReferenceChips className="justify-end" references={message.references} /> : null}
         {message.text ? (
           <p className="whitespace-pre-wrap rounded-box bg-primary/10 px-3 py-2 text-sm">{message.text}</p>
         ) : null}
@@ -179,14 +206,7 @@ const Content = ({ className, message, progress, results }: BubbleProps) => {
   );
 };
 
-/**
- * Memoized because the transcript re-renders on every streamed delta and on every keystroke in the composer, and
- * a settled bubble re-parses its markdown for nothing each time. The props are compared by identity, so the caller
- * hands the same `results` map and `progress` value to every row — which is why only the rows that actually
- * changed re-render.
- *
- * A component bound to the `AgentBubble` slot replaces the memoized default, so it carries its own `memo`.
- */
+/** Memoized on prop identity; a component bound to the `AgentBubble` slot replaces it and carries its own `memo`. */
 export const DefaultBubble = memo(Content);
 
 export default createOverridable("AgentBubble", DefaultBubble);