fireworks-ai 0.2.0

package/dist/server/session.js

@@ -0,0 +1,73 @@
+import { query } from "@anthropic-ai/claude-agent-sdk";
+import { PushChannel } from "./push-channel.js";
+function userMessage(content) {
+    return {
+        type: "user",
+        message: { role: "user", content },
+        parent_tool_use_id: null,
+        session_id: "",
+    };
+}
+const DEFAULT_IDLE_TIMEOUT_MS = 30 * 60 * 1000;
+export class SessionManager {
+    sessions = new Map();
+    factory;
+    idleTimeoutMs;
+    constructor(factory, idleTimeoutMs) {
+        this.factory = factory;
+        this.idleTimeoutMs = idleTimeoutMs ?? DEFAULT_IDLE_TIMEOUT_MS;
+    }
+    create() {
+        const id = crypto.randomUUID();
+        const init = this.factory();
+        const channel = new PushChannel();
+        const abortController = new AbortController();
+        const messageIterator = query({
+            prompt: channel,
+            options: {
+                systemPrompt: init.systemPrompt,
+                model: init.model,
+                tools: init.tools ?? [],
+                mcpServers: init.mcpServers,
+                allowedTools: init.allowedTools,
+                maxTurns: init.maxTurns ?? 200,
+                permissionMode: init.permissionMode ?? "bypassPermissions",
+                includePartialMessages: true,
+                abortController,
+            },
+        });
+        const session = {
+            id,
+            context: init.context,
+            pushMessage: (text) => {
+                session.lastActivityAt = Date.now();
+                channel.push(userMessage(text));
+            },
+            messageIterator,
+            abort: () => abortController.abort(),
+            createdAt: Date.now(),
+            lastActivityAt: Date.now(),
+        };
+        this.sessions.set(id, session);
+        return session;
+    }
+    get(id) {
+        return this.sessions.get(id);
+    }
+    delete(id) {
+        const session = this.sessions.get(id);
+        if (session) {
+            session.abort();
+            this.sessions.delete(id);
+        }
+    }
+    cleanup() {
+        const now = Date.now();
+        for (const [id, session] of this.sessions) {
+            if (now - session.lastActivityAt > this.idleTimeoutMs) {
+                session.abort();
+                this.sessions.delete(id);
+            }
+        }
+    }
+}

package/dist/server/translator.d.ts

@@ -0,0 +1,14 @@
+import type { CustomEvent, SSEEvent } from "../types.js";
+import type { Session } from "./session.js";
+export interface TranslatorConfig<TCtx> {
+    onToolResult?: (toolName: string, result: string, session: Session<TCtx>) => CustomEvent[];
+}
+export declare class MessageTranslator<TCtx> {
+    private config;
+    private toolNames;
+    constructor(config?: TranslatorConfig<TCtx>);
+    translate(message: Record<string, unknown>, session: Session<TCtx>): SSEEvent[];
+    private lastToolId;
+}
+export declare function sseEncode(evt: SSEEvent): string;
+export declare function streamSession<TCtx>(session: Session<TCtx>, translator: MessageTranslator<TCtx>): AsyncGenerator<SSEEvent>;

package/dist/server/translator.js

@@ -0,0 +1,151 @@
+export class MessageTranslator {
+    config;
+    toolNames = new Map();
+    constructor(config) {
+        this.config = config ?? {};
+    }
+    translate(message, session) {
+        const events = [];
+        const type = message.type;
+        switch (type) {
+            case "stream_event": {
+                if (!("event" in message))
+                    break;
+                const event = message.event;
+                switch (event.type) {
+                    case "message_start": {
+                        events.push({ event: "message_start", data: "{}" });
+                        break;
+                    }
+                    case "content_block_start": {
+                        const block = event.content_block;
+                        if (block?.type === "tool_use" && typeof block.id === "string") {
+                            const name = block.name;
+                            this.toolNames.set(block.id, name);
+                            events.push({
+                                event: "tool_start",
+                                data: JSON.stringify({ id: block.id, name }),
+                            });
+                        }
+                        break;
+                    }
+                    case "content_block_delta": {
+                        const delta = event.delta;
+                        if (delta.type === "text_delta" && typeof delta.text === "string") {
+                            events.push({
+                                event: "text_delta",
+                                data: JSON.stringify({ text: delta.text }),
+                            });
+                        }
+                        else if (delta.type === "input_json_delta" &&
+                            typeof delta.partial_json === "string") {
+                            const id = this.lastToolId();
+                            if (id) {
+                                events.push({
+                                    event: "tool_input_delta",
+                                    data: JSON.stringify({ id, partialJson: delta.partial_json }),
+                                });
+                            }
+                        }
+                        break;
+                    }
+                }
+                break;
+            }
+            case "assistant": {
+                const msg = message.message;
+                if (msg?.content) {
+                    for (const block of msg.content) {
+                        if (block.type === "tool_use") {
+                            const name = block.name;
+                            const id = block.id;
+                            this.toolNames.set(id, name);
+                            events.push({
+                                event: "tool_call",
+                                data: JSON.stringify({ id, name, input: block.input }),
+                            });
+                        }
+                    }
+                }
+                break;
+            }
+            case "user": {
+                const msg = message.message;
+                if (Array.isArray(msg?.content)) {
+                    for (const block of msg.content) {
+                        if (block.type === "tool_result") {
+                            const text = extractToolResultText(block);
+                            const toolName = this.toolNames.get(block.tool_use_id);
+                            events.push({
+                                event: "tool_result",
+                                data: JSON.stringify({ toolUseId: block.tool_use_id, result: text }),
+                            });
+                            if (this.config.onToolResult && toolName) {
+                                for (const c of this.config.onToolResult(toolName, text, session)) {
+                                    events.push({ event: "custom", data: JSON.stringify(c) });
+                                }
+                            }
+                        }
+                    }
+                }
+                break;
+            }
+            case "tool_progress": {
+                events.push({
+                    event: "tool_progress",
+                    data: JSON.stringify({
+                        toolName: message.tool_name,
+                        elapsed: message.elapsed_time_seconds,
+                    }),
+                });
+                break;
+            }
+            case "result": {
+                if (message.subtype === "success") {
+                    events.push({
+                        event: "turn_complete",
+                        data: JSON.stringify({
+                            numTurns: message.num_turns ?? 0,
+                            cost: message.total_cost_usd ?? 0,
+                        }),
+                    });
+                }
+                else {
+                    events.push({
+                        event: "session_error",
+                        data: JSON.stringify({ subtype: message.subtype }),
+                    });
+                }
+                break;
+            }
+        }
+        return events;
+    }
+    lastToolId() {
+        const entries = [...this.toolNames.entries()];
+        return entries.length > 0 ? entries[entries.length - 1][0] : undefined;
+    }
+}
+export function sseEncode(evt) {
+    return `event: ${evt.event}\ndata: ${evt.data}\n\n`;
+}
+export async function* streamSession(session, translator) {
+    for await (const message of session.messageIterator) {
+        const events = translator.translate(message, session);
+        for (const evt of events) {
+            yield evt;
+        }
+    }
+}
+function extractToolResultText(block) {
+    const content = block.content;
+    if (typeof content === "string")
+        return content;
+    if (Array.isArray(content)) {
+        return content
+            .filter((p) => p.type === "text" && typeof p.text === "string")
+            .map((p) => p.text)
+            .join("");
+    }
+    return "";
+}

package/dist/server/translator.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/server/translator.test.js

@@ -0,0 +1,156 @@
+import { describe, expect, it } from "vitest";
+import { MessageTranslator, sseEncode } from "./translator.js";
+function stubSession(ctx = {}) {
+    return {
+        id: "sess-1",
+        context: ctx,
+        pushMessage: () => { },
+        messageIterator: (async function* () { })(),
+        abort: () => { },
+        createdAt: Date.now(),
+        lastActivityAt: Date.now(),
+    };
+}
+describe("MessageTranslator", () => {
+    const session = stubSession();
+    it("emits message_start on stream_event/message_start", () => {
+        const t = new MessageTranslator();
+        const events = t.translate({ type: "stream_event", event: { type: "message_start" } }, session);
+        expect(events).toEqual([{ event: "message_start", data: "{}" }]);
+    });
+    it("emits tool_start on content_block_start with tool_use", () => {
+        const t = new MessageTranslator();
+        const events = t.translate({
+            type: "stream_event",
+            event: {
+                type: "content_block_start",
+                content_block: { type: "tool_use", id: "tool-1", name: "search" },
+            },
+        }, session);
+        expect(events).toEqual([
+            { event: "tool_start", data: JSON.stringify({ id: "tool-1", name: "search" }) },
+        ]);
+    });
+    it("emits text_delta on content_block_delta with text_delta", () => {
+        const t = new MessageTranslator();
+        const events = t.translate({
+            type: "stream_event",
+            event: { type: "content_block_delta", delta: { type: "text_delta", text: "hello" } },
+        }, session);
+        expect(events).toEqual([{ event: "text_delta", data: JSON.stringify({ text: "hello" }) }]);
+    });
+    it("emits tool_input_delta on content_block_delta with input_json_delta", () => {
+        const t = new MessageTranslator();
+        // First register a tool so lastToolId works
+        t.translate({
+            type: "stream_event",
+            event: {
+                type: "content_block_start",
+                content_block: { type: "tool_use", id: "tool-2", name: "read" },
+            },
+        }, session);
+        const events = t.translate({
+            type: "stream_event",
+            event: {
+                type: "content_block_delta",
+                delta: { type: "input_json_delta", partial_json: '{"q":' },
+            },
+        }, session);
+        expect(events).toEqual([
+            {
+                event: "tool_input_delta",
+                data: JSON.stringify({ id: "tool-2", partialJson: '{"q":' }),
+            },
+        ]);
+    });
+    it("emits tool_call on assistant message with tool_use blocks", () => {
+        const t = new MessageTranslator();
+        const events = t.translate({
+            type: "assistant",
+            message: {
+                content: [{ type: "tool_use", id: "t-1", name: "fetch", input: { url: "https://x" } }],
+            },
+        }, session);
+        expect(events).toEqual([
+            {
+                event: "tool_call",
+                data: JSON.stringify({ id: "t-1", name: "fetch", input: { url: "https://x" } }),
+            },
+        ]);
+    });
+    it("emits tool_result on user message with tool_result blocks", () => {
+        const t = new MessageTranslator();
+        // Register tool name first
+        t.translate({
+            type: "assistant",
+            message: { content: [{ type: "tool_use", id: "t-2", name: "calc", input: {} }] },
+        }, session);
+        const events = t.translate({
+            type: "user",
+            message: {
+                role: "user",
+                content: [{ type: "tool_result", tool_use_id: "t-2", content: "42" }],
+            },
+        }, session);
+        expect(events).toEqual([
+            { event: "tool_result", data: JSON.stringify({ toolUseId: "t-2", result: "42" }) },
+        ]);
+    });
+    it("wraps onToolResult return values as custom SSE events", () => {
+        const t = new MessageTranslator({
+            onToolResult: (toolName, result) => [{ name: "data_updated", value: { toolName, result } }],
+        });
+        // Register tool name
+        t.translate({
+            type: "assistant",
+            message: { content: [{ type: "tool_use", id: "t-3", name: "save", input: {} }] },
+        }, session);
+        const events = t.translate({
+            type: "user",
+            message: {
+                role: "user",
+                content: [{ type: "tool_result", tool_use_id: "t-3", content: "ok" }],
+            },
+        }, session);
+        expect(events).toHaveLength(2);
+        expect(events[0]).toEqual({
+            event: "tool_result",
+            data: JSON.stringify({ toolUseId: "t-3", result: "ok" }),
+        });
+        expect(events[1]).toEqual({
+            event: "custom",
+            data: JSON.stringify({ name: "data_updated", value: { toolName: "save", result: "ok" } }),
+        });
+    });
+    it("emits tool_progress", () => {
+        const t = new MessageTranslator();
+        const events = t.translate({ type: "tool_progress", tool_name: "build", elapsed_time_seconds: 5.2 }, session);
+        expect(events).toEqual([
+            { event: "tool_progress", data: JSON.stringify({ toolName: "build", elapsed: 5.2 }) },
+        ]);
+    });
+    it("emits turn_complete on success result", () => {
+        const t = new MessageTranslator();
+        const events = t.translate({ type: "result", subtype: "success", num_turns: 3, total_cost_usd: 0.05 }, session);
+        expect(events).toEqual([
+            { event: "turn_complete", data: JSON.stringify({ numTurns: 3, cost: 0.05 }) },
+        ]);
+    });
+    it("emits session_error on non-success result", () => {
+        const t = new MessageTranslator();
+        const events = t.translate({ type: "result", subtype: "max_turns" }, session);
+        expect(events).toEqual([
+            { event: "session_error", data: JSON.stringify({ subtype: "max_turns" }) },
+        ]);
+    });
+    it("returns empty array for unknown message types", () => {
+        const t = new MessageTranslator();
+        const events = t.translate({ type: "unknown_type" }, session);
+        expect(events).toEqual([]);
+    });
+});
+describe("sseEncode", () => {
+    it("formats as SSE with event and data fields", () => {
+        expect(sseEncode({ event: "text_delta", data: '{"text":"hi"}' })).toBe('event: text_delta\ndata: {"text":"hi"}\n\n');
+    });
+});

package/dist/types.d.ts

@@ -0,0 +1,39 @@
+import type { ComponentType } from "react";
+export interface SSEEvent {
+    event: string;
+    data: string;
+}
+export interface CustomEvent<T = unknown> {
+    name: string;
+    value: T;
+}
+export type ToolCallPhase = "pending" | "streaming_input" | "running" | "complete" | "error";
+export interface ToolCallInfo {
+    id: string;
+    name: string;
+    input: Record<string, unknown>;
+    partialInput?: string;
+    result?: string;
+    error?: string;
+    status: ToolCallPhase;
+}
+export interface ChatMessage {
+    id: string;
+    role: "user" | "assistant" | "system";
+    content: string;
+    toolCalls?: ToolCallInfo[];
+}
+export interface WidgetProps<TResult = unknown> {
+    phase: ToolCallPhase;
+    toolUseId: string;
+    input: Record<string, unknown>;
+    partialInput?: string;
+    result?: TResult;
+    error?: string;
+}
+export interface WidgetRegistration<TResult = unknown> {
+    toolName: string;
+    label: string;
+    richLabel?: (result: TResult) => string | null;
+    component: ComponentType<WidgetProps<TResult>>;
+}

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -0,0 +1,69 @@
+{
+  "name": "fireworks-ai",
+  "version": "0.2.0",
+  "description": "React + Hono toolkit for building chat UIs on top of the Claude Agent SDK",
+  "license": "MIT",
+  "author": "Dan Leeper",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/quantumleeps/fireworks-ai.git"
+  },
+  "homepage": "https://github.com/quantumleeps/fireworks-ai#readme",
+  "bugs": {
+    "url": "https://github.com/quantumleeps/fireworks-ai/issues"
+  },
+  "keywords": [
+    "claude",
+    "agent-sdk",
+    "react",
+    "hono",
+    "sse",
+    "chat-ui",
+    "anthropic"
+  ],
+  "sideEffects": false,
+  "type": "module",
+  "exports": {
+    "./server": {
+      "types": "./dist/server/index.d.ts",
+      "import": "./dist/server/index.js"
+    },
+    "./react": {
+      "types": "./dist/react/index.d.ts",
+      "import": "./dist/react/index.js"
+    },
+    "./theme.css": "./src/theme.css"
+  },
+  "files": [
+    "dist",
+    "src/theme.css"
+  ],
+  "dependencies": {
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^3.4.0"
+  },
+  "peerDependencies": {
+    "@anthropic-ai/claude-agent-sdk": ">=0.2.0",
+    "hono": ">=4.0.0",
+    "react": ">=18.0.0",
+    "react-markdown": ">=10.0.0",
+    "zustand": ">=5.0.0",
+    "immer": ">=10.0.0"
+  },
+  "devDependencies": {
+    "@anthropic-ai/claude-agent-sdk": "latest",
+    "@biomejs/biome": "^2.3.14",
+    "@types/react": "^19.2.7",
+    "hono": "^4.11.9",
+    "immer": "^11.1.4",
+    "react": "^19.2.0",
+    "typescript": "~5.9.3",
+    "vitest": "^3.0.0",
+    "zustand": "^5.0.11"
+  },
+  "scripts": {
+    "build": "tsc",
+    "check": "biome check src/",
+    "test": "vitest run"
+  }
+}

package/src/theme.css

@@ -0,0 +1,133 @@
+/*
+ * fireworks-ai/theme.css — default theme for fireworks-ai components.
+ *
+ * Provides the CSS variable bridge (via @theme inline) and a neutral color
+ * palette so fireworks-ai components render correctly out of the box.
+ *
+ * If your app already uses shadcn/ui, you DON'T need this file — your existing
+ * shadcn/tailwind.css and color variables are already compatible. Only import
+ * this if you're NOT using shadcn.
+ *
+ * Usage:
+ *   @import "fireworks-ai/theme.css";
+ */
+
+/* -- Source scanning ------------------------------------------------------- */
+/* Tells Tailwind to scan fireworks-ai's component source for utility classes. */
+
+@source "./react";
+
+/* -- Tailwind v4 variable bridge ------------------------------------------ */
+/* Maps CSS custom properties to Tailwind utility classes.                     */
+/* Same mappings as shadcn/tailwind.css — if you have that, skip this file.   */
+
+@theme inline {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+}
+
+/* -- Light mode (default) ------------------------------------------------- */
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+}
+
+/* -- Dark mode (class-based) ---------------------------------------------- */
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+}
+
+/* -- Dark mode (system preference) ---------------------------------------- */
+/* Activates automatically unless .light is set on :root.                     */
+
+@media (prefers-color-scheme: dark) {
+  :root:not(.light) {
+    --background: oklch(0.145 0 0);
+    --foreground: oklch(0.985 0 0);
+    --card: oklch(0.205 0 0);
+    --card-foreground: oklch(0.985 0 0);
+    --popover: oklch(0.205 0 0);
+    --popover-foreground: oklch(0.985 0 0);
+    --primary: oklch(0.922 0 0);
+    --primary-foreground: oklch(0.205 0 0);
+    --secondary: oklch(0.269 0 0);
+    --secondary-foreground: oklch(0.985 0 0);
+    --muted: oklch(0.269 0 0);
+    --muted-foreground: oklch(0.708 0 0);
+    --accent: oklch(0.269 0 0);
+    --accent-foreground: oklch(0.985 0 0);
+    --destructive: oklch(0.704 0.191 22.216);
+    --border: oklch(1 0 0 / 10%);
+    --input: oklch(1 0 0 / 15%);
+    --ring: oklch(0.556 0 0);
+  }
+}
+
+/* -- Base resets ---------------------------------------------------------- */
+
+*,
+*::before,
+*::after {
+  border-color: var(--border);
+}
+
+body {
+  background-color: var(--background);
+  color: var(--foreground);
+}