@frankieai/react 0.2.7 → 0.2.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@frankieai/react",
-  "version": "0.2.7",
+  "version": "0.2.8",
   "description": "Embeddable, themeable chat widget for the Frankie onboarding agent — shadcn/ui components, works with or without Tailwind in the host app.",
   "license": "MIT",
   "type": "module",

package/src/components/chat/AgentContext.tsx

@@ -6,7 +6,7 @@ import { useFrankieChat } from "../../hooks/useFrankieChat.js";
 /** Reports server-confirmed skills for the current turn; never implies drafts are active. */
 export function AgentContext() {
   const { loading, configError } = useFrankie();
-  const { loadedSkills, busy, restoring, error } = useFrankieChat();
+  const { loadedSkills, activeApis, busy, restoring, error } = useFrankieChat();
   const status = configError || error ? "Unavailable" : loading || restoring ? "Connecting" : busy && loadedSkills === null ? "Checking" : loadedSkills?.length ? "Active" : loadedSkills ? "Tools only" : "Ready";
   return <div className="frankie-agent-context-wrap">
     <details className="frankie-agent-context">
@@ -15,6 +15,7 @@ export function AgentContext() {
         <strong>{loadedSkills === null ? "Skills are checked when you send a message" : loadedSkills.length ? `${loadedSkills.length} ${loadedSkills.length === 1 ? "skill" : "skills"} loaded` : "No skills loaded for this turn"}</strong>
         {loadedSkills?.length ? <ul>{loadedSkills.map(skill => <li key={skill.id}><span>{skill.name}</span><small>v{skill.revision}</small></li>)}</ul> : <p>Frankie can use the tools approved for this workspace. Drafts and skills without available tools are not loaded.</p>}
         <p>Published skills and updates are checked on every message. Only approved, available tools can run.</p>
+        {activeApis?.length ? <ul className="frankie-active-apis">{activeApis.map(api => <li key={api.name}><span>{api.name}</span><small>spec {api.specHash} · {api.operationCount} {api.operationCount === 1 ? "operation" : "operations"}</small></li>)}</ul> : null}
       </div>
     </details>
     <span className="frankie-sr-only" role="status">{loadedSkills === null ? status : `${loadedSkills.length} ${loadedSkills.length === 1 ? "skill" : "skills"} loaded. ${status}.`}</span>

package/src/hooks/useFrankieChat.ts

@@ -1,7 +1,7 @@
 "use client";
 
 import { createContext, useContext, useCallback, useEffect, useRef, useState } from "react";
-import type { ChatAttachment, LoadedSkill } from "@frankieai/core";
+import type { ApiToolInventory, ChatAttachment, LoadedSkill } from "@frankieai/core";
 import { FrankieApiError } from "../lib/client.js";
 import {
   applyEvent,
@@ -20,6 +20,8 @@ export interface SendOptions {
 
 export interface UseFrankieChatResult {
   loadedSkills: LoadedSkill[] | null;
+  /** Which OpenAPI sources are live for this turn, and a content fingerprint of each. */
+  activeApis: ApiToolInventory[] | null;
   restoring: boolean;
   messages: ChatMessage[];
   /** True from the moment a message is sent until the turn ends. */
@@ -50,6 +52,7 @@ export function useFrankieChatState(): UseFrankieChatResult {
   const [error, setError] = useState<string | undefined>(undefined);
   const [restored, setRestored] = useState(false);
   const [loadedSkills, setLoadedSkills] = useState<LoadedSkill[] | null>(null);
+  const [activeApis, setActiveApis] = useState<ApiToolInventory[] | null>(null);
   const abortRef = useRef<AbortController | null>(null);
   const mounted = useRef(true);
   // State updates can be batched while a stream is arriving. Keep the latest
@@ -142,6 +145,7 @@ export function useFrankieChatState(): UseFrankieChatResult {
       const assistantId = nextId("a");
       setError(undefined);
       setLoadedSkills(null);
+      setActiveApis(null);
       setBusy(true);
       const next = [
         ...messagesRef.current,
@@ -171,6 +175,7 @@ export function useFrankieChatState(): UseFrankieChatResult {
           },
           (event) => {
             if (event.type === "skills_loaded") { setLoadedSkills(event.skills); return; }
+            if (event.type === "tools_active") { setActiveApis(event.apis); return; }
             if (event.type === "ping" || event.type === "session") return;
             if (event.type === "text_delta") receivedText = true;
             if (event.type === "tool_start" || event.type === "tool_end") receivedToolActivity = true;
@@ -236,6 +241,7 @@ export function useFrankieChatState(): UseFrankieChatResult {
     setBusy(false);
     setRestored(true);
     setLoadedSkills(null);
+    setActiveApis(null);
     try {
       if (client.persist) window.localStorage.removeItem(`${client.namespace}.messages`);
     } catch {
@@ -243,7 +249,7 @@ export function useFrankieChatState(): UseFrankieChatResult {
     }
   }, [client]);
 
-  return { messages, busy, loadedSkills, restoring: !restored, ...(error ? { error } : {}), send, stop, reset };
+  return { messages, busy, loadedSkills, activeApis, restoring: !restored, ...(error ? { error } : {}), send, stop, reset };
 }
 
 

package/src/widget.test.tsx

@@ -261,6 +261,23 @@ describe("ChatPanel", () => {
     await waitFor(() => expect(scrollTop).toBe(scroller.scrollHeight));
     cleanup();
   });
+  it("shows the active API spec hash and operation count once tools_active arrives", async () => {
+    cleanup();
+    const fetchImpl = vi.fn(async (url: string | URL | Request) =>
+      String(url).endsWith("/v1/session")
+        ? Response.json({ sessionId: "apis", sessionToken: "fixture", expiresAt: new Date(Date.now() + 600_000).toISOString(), user: { id: "one", anonymous: true } })
+        : new Response(sseStream([{ type: "tools_active", apis: [{ name: "acme", specHash: "abc123def456", operationCount: 4 }] }, { type: "text_delta", text: "Done" }, { type: "turn_end", stopReason: "end_turn" }])),
+    );
+    render(<FrankieProvider publishableKey="pk_apis_fixture" config={config} fetchImpl={fetchImpl} persist={false}><ChatPanel /></FrankieProvider>);
+    await waitFor(() => expect((screen.getByLabelText("Message") as HTMLTextAreaElement).disabled).toBe(false));
+    fireEvent.change(screen.getByLabelText("Message"), { target: { value: "Hi" } });
+    fireEvent.click(screen.getByRole("button", { name: "Send" }));
+    await screen.findByText("Done");
+    fireEvent.click(screen.getByLabelText("Agent context"));
+    expect(screen.getByText("acme")).toBeTruthy();
+    expect(screen.getByText("spec abc123def456 · 4 operations")).toBeTruthy();
+  });
+
   it("refreshes the context count and revisions from each server turn", async () => {
     cleanup();
     let turn = 0;