@agentorg/cli 0.0.3 → 0.0.5

package/dist/node_modules/@agentorg/kit/dist/src/chat.js

@@ -0,0 +1,131 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// A conversation with an agent, on assistant-ui's primitives (Thread, Message, Composer,
+// ActionBar) over an external store: the caller keeps the messages and runs the turns.
+import { ActionBarPrimitive, AssistantRuntimeProvider, ComposerPrimitive, MessagePrimitive, ThreadPrimitive, useAui, useAuiState, useExternalStoreRuntime, } from "@assistant-ui/react";
+import { createContext, useContext, useEffect, useState } from "react";
+import { IconButton } from "./components.js";
+import { ChevronIcon, CopyIcon, RetryIcon, SendIcon, StopIcon, ToolIcon } from "./icons.js";
+import { Markdown } from "./markdown.js";
+/**
+ * The entries as assistant-ui's messages: a person's message each, and every run of replies and
+ * tool messages between two of theirs as one reply whose parts are in order. A tool message is a
+ * tool-call part that keeps its entry, so a card can be drawn from it.
+ */
+function threadOf(entries, running) {
+    const thread = [];
+    let reply;
+    const close = () => {
+        if (reply)
+            thread.push({ role: "assistant", id: reply.id, content: reply.content });
+        reply = undefined;
+    };
+    for (const entry of entries) {
+        if (entry.role === "user") {
+            close();
+            thread.push({ role: "user", id: entry.id, content: [{ type: "text", text: entry.text }] });
+            continue;
+        }
+        reply ??= { id: entry.id, content: [] };
+        reply.content.push(entry.role === "assistant"
+            ? { type: "text", text: entry.text }
+            : {
+                type: "tool-call",
+                toolCallId: entry.id,
+                toolName: entry.tool?.name ?? "",
+                argsText: entry.tool?.input ?? "",
+                artifact: entry,
+            });
+    }
+    close();
+    const last = thread.at(-1);
+    if (running && last?.role === "assistant")
+        thread[thread.length - 1] = { ...last, status: { type: "running" } };
+    return thread;
+}
+const textOf = (message) => message.content.map((part) => (part.type === "text" ? part.text : "")).join("");
+export function Chat(props) {
+    const { messages, running, onSend, onCancel, onRetry, hasEarlier, onEarlier } = props;
+    // A refused send puts its text back, into the composer the runtime keeps.
+    const [kept, setKept] = useState();
+    const runtime = useExternalStoreRuntime({
+        messages: threadOf(messages, running),
+        convertMessage: (message) => message,
+        isRunning: running,
+        onNew: async (message) => {
+            const text = textOf(message);
+            try {
+                await onSend(text);
+            }
+            catch {
+                setKept((was) => ({ text, n: (was?.n ?? 0) + 1 }));
+            }
+        },
+        onCancel: async () => onCancel(),
+        // The options keep one shape whatever is given: the runtime doesn't take a change of shape.
+        onReload: async () => onRetry?.(),
+        hasEarlier: !!(hasEarlier && onEarlier),
+        onLoadEarlier: async () => onEarlier?.(),
+    });
+    return (_jsx(AssistantRuntimeProvider, { runtime: runtime, children: _jsx(Thread, { ...props, kept: kept }) }));
+}
+function Thread({ notice, footer, name, avatar, label = "Message", kept, running, onRetry, }) {
+    return (_jsx(Agent.Provider, { value: { name, avatar, retry: !!onRetry }, children: _jsxs(ThreadPrimitive.Root, { className: "kit-chat", children: [_jsx(ThreadPrimitive.Viewport, { className: "kit-chat-viewport", role: "log", "aria-label": "Conversation", children: _jsxs("div", { className: "kit-chat-thread", children: [_jsx(Earlier, {}), _jsx(ThreadPrimitive.Messages, { components: { UserMessage, AssistantMessage } }), running && _jsx(Thinking, {})] }) }), notice && (_jsx("div", { className: "kit-chat-notice", role: "alert", children: notice })), _jsx("div", { className: "kit-chat-composer-wrap", children: _jsxs(ComposerPrimitive.Root, { className: "kit-chat-composer", children: [_jsx(ComposerPrimitive.Input, { className: "kit-chat-input", "aria-label": label, placeholder: name ? `Message ${name}` : label, submitMode: "enter" }), _jsx(Restore, { kept: kept }), _jsxs("div", { className: "kit-chat-composer-row", children: [footer, running ? (_jsx(ComposerPrimitive.Cancel, { className: "kit-chat-send", "aria-label": "Stop", children: _jsx(StopIcon, {}) })) : (_jsx(ComposerPrimitive.Send, { className: "kit-chat-send", "aria-label": "Send", children: _jsx(SendIcon, {}) }))] })] }) })] }) }));
+}
+/** "Earlier messages", only while there are some. */
+function Earlier() {
+    const some = useAuiState(({ thread }) => thread.hasEarlier);
+    if (!some)
+        return null;
+    return (_jsx(ThreadPrimitive.LoadEarlier, { className: "kit-chat-earlier", children: "Earlier messages" }));
+}
+/** Puts a refused send's text back in the composer, once per refusal. */
+function Restore({ kept }) {
+    const aui = useAui();
+    useEffect(() => {
+        if (kept)
+            aui.composer.setText(kept.text);
+    }, [aui, kept]);
+    return null;
+}
+/** Who the replies are from, and whether they offer Retry: for every reply in the thread. */
+const Agent = createContext({
+    name: undefined,
+    avatar: undefined,
+    retry: false,
+});
+const PlainText = ({ text }) => _jsx(_Fragment, { children: text });
+const MarkdownText = ({ text }) => _jsx(Markdown, { text: text });
+const USER_PARTS = { Text: PlainText };
+const REPLY_PARTS = { Text: MarkdownText, tools: { Override: Tool } };
+const UserMessage = () => (_jsx(MessagePrimitive.Root, { className: "kit-chat-user", children: _jsx(MessagePrimitive.Parts, { components: USER_PARTS }) }));
+/** Dots while the turn has nothing to show yet: before the first text or tool of its reply. */
+function Thinking() {
+    const shown = useAuiState(({ thread }) => {
+        const last = thread.messages.at(-1);
+        return last?.role === "assistant" && last.content.length > 0;
+    });
+    if (shown)
+        return null;
+    return (_jsxs("div", { className: "kit-chat-thinking", role: "status", "aria-label": "Thinking", children: [_jsx("i", {}), _jsx("i", {}), _jsx("i", {})] }));
+}
+function AssistantMessage() {
+    const { name, avatar, retry } = useContext(Agent);
+    const running = useAuiState(({ message }) => message.status?.type === "running");
+    // Retry runs the last turn again, so only the last reply offers it; earlier replies show their
+    // bar on hover.
+    const last = useAuiState(({ message }) => message.isLast);
+    return (_jsxs(MessagePrimitive.Root, { className: "kit-chat-assistant", ...(last ? { "data-last": "" } : {}), children: [name && (_jsxs("div", { className: "kit-chat-who", children: [avatar, name] })), _jsx(MessagePrimitive.Parts, { components: REPLY_PARTS }), _jsxs(ActionBarPrimitive.Root, { className: "kit-chat-bar", ...(running ? { "data-hidden": "" } : {}), children: [_jsx(ActionBarPrimitive.Copy, { asChild: true, children: _jsx(IconButton, { label: "Copy", children: _jsx(CopyIcon, {}) }) }), retry && last && (_jsx(ActionBarPrimitive.Reload, { asChild: true, children: _jsx(IconButton, { label: "Retry", children: _jsx(RetryIcon, {}) }) }))] })] }));
+}
+/**
+ * A tool message: a card with the tool's name and how it ended, opened for what went in and what
+ * came back, when the message says which tool ran; otherwise the one line it is.
+ */
+function Tool({ artifact }) {
+    const entry = artifact;
+    const [open, setOpen] = useState(false);
+    const tool = entry.tool;
+    if (!tool)
+        return _jsx("div", { className: "kit-chat-step", children: entry.text });
+    const body = [tool.input, tool.output && `→ ${tool.output}`].filter(Boolean).join("\n");
+    return (_jsxs("div", { className: "kit-tool", ...(open ? { "data-open": "" } : {}), children: [_jsxs("button", { type: "button", "aria-expanded": open, onClick: () => setOpen(!open), children: [_jsx(ToolIcon, {}), _jsx("span", { className: "kit-tool-title", children: entry.text }), _jsx("span", { className: "kit-tool-name", children: tool.name }), tool.state === "done" ? (_jsx("span", { className: "kit-tool-done", role: "img", "aria-label": "done", children: "\u2713" })) : tool.state === "refused" ? (_jsx("span", { className: "kit-tool-refused", children: "refused" })) : (_jsx("span", { className: "kit-chat-thinking", role: "status", "aria-label": "running", children: _jsx("i", {}) })), _jsx(ChevronIcon, { className: "kit-tool-chevron" })] }), open && body && _jsx("pre", { className: "kit-tool-body", children: body })] }));
+}

package/dist/node_modules/@agentorg/kit/dist/src/components.d.ts

@@ -0,0 +1,94 @@
+import type { ButtonHTMLAttributes, CSSProperties, FormEvent, InputHTMLAttributes, ReactNode, SelectHTMLAttributes } from "react";
+export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+    /** `primary` is the accent; `quiet` reads as a link. */
+    variant?: "primary" | "quiet";
+};
+export declare function Button({ variant, className, type, ...props }: ButtonProps): import("react").JSX.Element;
+/** A button with only an icon: its `label` is its accessible name, and its tooltip. */
+export declare function IconButton({ label, className, type, ...props }: ButtonHTMLAttributes<HTMLButtonElement> & {
+    label: string;
+}): import("react").JSX.Element;
+export declare function Switch({ checked, onChange, label, disabled, }: {
+    checked: boolean;
+    onChange(checked: boolean): void;
+    label: string;
+    disabled?: boolean;
+}): import("react").JSX.Element;
+export declare function Field({ className, ...props }: InputHTMLAttributes<HTMLInputElement>): import("react").JSX.Element;
+/** The browser's own select, drawn in the kit's look: accessible and native on every device. */
+export declare function Select({ className, ...props }: SelectHTMLAttributes<HTMLSelectElement>): import("react").JSX.Element;
+/**
+ * A modal dialog: focus held inside, Escape and a click outside close it, and focus goes back to
+ * what opened it. `title` names it. With `onSubmit` the dialog is a form, so Enter submits it.
+ */
+export declare function Dialog({ open, onClose, onSubmit, title, children, }: {
+    open?: boolean;
+    onClose(): void;
+    onSubmit?(event: FormEvent<HTMLFormElement>): void;
+    title: ReactNode;
+    children: ReactNode;
+}): import("react").JSX.Element;
+/** A row of buttons at the end of a dialog or a form. */
+export declare const Actions: ({ children }: {
+    children: ReactNode;
+}) => import("react").JSX.Element;
+/**
+ * A menu opened from `trigger` (a button: an `IconButton`, usually): arrow keys move through its
+ * items, Escape and a click outside close it.
+ */
+export declare function Menu({ trigger, children, open, onOpenChange, align, }: {
+    trigger: ReactNode;
+    children: ReactNode;
+    open?: boolean;
+    onOpenChange?(open: boolean): void;
+    align?: "start" | "end";
+}): import("react").JSX.Element;
+/** An item: choosing it closes the menu, unless `onSelect` calls `event.preventDefault()`. */
+export declare function MenuItem({ onSelect, disabled, children, }: {
+    onSelect(event: Event): void;
+    disabled?: boolean;
+    children: ReactNode;
+}): import("react").JSX.Element;
+/** Tabs, each a `[value, label]`; `children` is the selected one's panel. */
+export declare function Tabs<T extends string>({ label, tabs, value, onChange, children, className, }: {
+    className?: string;
+    label: string;
+    tabs: readonly (readonly [NoInfer<T>, ReactNode])[];
+    value: T;
+    onChange(value: T): void;
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare const Card: ({ children, className }: {
+    children: ReactNode;
+    className?: string;
+}) => import("react").JSX.Element;
+/** Rows divided by lines: each child is an `<li>`. */
+export declare const List: ({ children, label }: {
+    children: ReactNode;
+    label?: string;
+}) => import("react").JSX.Element;
+export declare function Table({ head, rows }: {
+    head: ReactNode[];
+    rows: ReactNode[][];
+}): import("react").JSX.Element;
+/** `value` of `max` as segments, one per unit: a board's done cards, say. */
+export declare function Meter({ value, max, label }: {
+    value: number;
+    max: number;
+    label: string;
+}): import("react").JSX.Element;
+type Layout = {
+    children: ReactNode;
+    gap?: number;
+    className?: string;
+    style?: CSSProperties;
+};
+/** Children in a column. */
+export declare const Stack: ({ children, gap, className, style }: Layout) => import("react").JSX.Element;
+/** Children in a row, centered on the cross axis. */
+export declare const Row: ({ children, gap, className, style }: Layout) => import("react").JSX.Element;
+/** Takes the room its parent (a `Stack` or `Row`) has left. */
+export declare const Fill: ({ children, className, style }: Layout) => import("react").JSX.Element;
+/** Scrolls what doesn't fit, with no visible scrollbar. */
+export declare const Scroll: ({ children, className, style }: Layout) => import("react").JSX.Element;
+export {};

package/dist/node_modules/@agentorg/kit/dist/src/components.js

@@ -0,0 +1,66 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// The shell's own components: Radix primitives for what has behavior (dialogs, menus, switches,
+// tabs), plain elements for the rest, all drawn by the kit's classes.
+import { DropdownMenu, Dialog as RadixDialog, Switch as RadixSwitch, Tabs as RadixTabs, } from "radix-ui";
+const cx = (...names) => names.filter(Boolean).join(" ");
+export function Button({ variant, className, type = "button", ...props }) {
+    return (_jsx("button", { type: type, className: cx("kit-button", variant && `kit-${variant}`, className), ...props }));
+}
+/** A button with only an icon: its `label` is its accessible name, and its tooltip. */
+export function IconButton({ label, className, type = "button", ...props }) {
+    return (_jsx("button", { type: type, "aria-label": label, title: label, className: cx("kit-icon-button", className), ...props }));
+}
+export function Switch({ checked, onChange, label, disabled, }) {
+    return (_jsx(RadixSwitch.Root, { className: "kit-switch", checked: checked, onCheckedChange: onChange, "aria-label": label, disabled: disabled, children: _jsx(RadixSwitch.Thumb, { className: "kit-switch-thumb" }) }));
+}
+export function Field({ className, ...props }) {
+    return _jsx("input", { className: cx("kit-field", className), ...props });
+}
+/** The browser's own select, drawn in the kit's look: accessible and native on every device. */
+export function Select({ className, ...props }) {
+    return _jsx("select", { className: cx("kit-select", className), ...props });
+}
+/**
+ * A modal dialog: focus held inside, Escape and a click outside close it, and focus goes back to
+ * what opened it. `title` names it. With `onSubmit` the dialog is a form, so Enter submits it.
+ */
+export function Dialog({ open = true, onClose, onSubmit, title, children, }) {
+    const inner = (_jsxs(_Fragment, { children: [_jsx(RadixDialog.Title, { className: "kit-dialog-title", children: title }), children] }));
+    return (_jsx(RadixDialog.Root, { open: open, onOpenChange: (next) => !next && onClose(), children: _jsxs(RadixDialog.Portal, { children: [_jsx(RadixDialog.Overlay, { className: "kit-scrim" }), _jsx(RadixDialog.Content, { className: "kit-dialog", "aria-describedby": undefined, asChild: !!onSubmit, children: onSubmit ? _jsx("form", { onSubmit: onSubmit, children: inner }) : inner })] }) }));
+}
+/** A row of buttons at the end of a dialog or a form. */
+export const Actions = ({ children }) => (_jsx("div", { className: "kit-actions", children: children }));
+/**
+ * A menu opened from `trigger` (a button: an `IconButton`, usually): arrow keys move through its
+ * items, Escape and a click outside close it.
+ */
+export function Menu({ trigger, children, open, onOpenChange, align = "end", }) {
+    return (_jsxs(DropdownMenu.Root, { ...(open !== undefined ? { open } : {}), ...(onOpenChange ? { onOpenChange } : {}), modal: false, children: [_jsx(DropdownMenu.Trigger, { asChild: true, children: trigger }), _jsx(DropdownMenu.Portal, { children: _jsx(DropdownMenu.Content, { className: "kit-menu", align: align, sideOffset: 4, children: children }) })] }));
+}
+/** An item: choosing it closes the menu, unless `onSelect` calls `event.preventDefault()`. */
+export function MenuItem({ onSelect, disabled, children, }) {
+    return (_jsx(DropdownMenu.Item, { className: "kit-menu-item", onSelect: onSelect, disabled: disabled, children: children }));
+}
+/** Tabs, each a `[value, label]`; `children` is the selected one's panel. */
+export function Tabs({ label, tabs, value, onChange, children, className, }) {
+    return (_jsxs(RadixTabs.Root, { value: value, onValueChange: (next) => onChange(next), className: cx("kit-stack", className), children: [_jsx(RadixTabs.List, { className: "kit-tabs-list", "aria-label": label, children: tabs.map(([key, name]) => (_jsx(RadixTabs.Trigger, { value: key, className: "kit-tab", children: name }, key))) }), _jsx(RadixTabs.Content, { value: value, className: "kit-fill kit-scroll", children: children })] }));
+}
+export const Card = ({ children, className }) => (_jsx("div", { className: cx("kit-card", className), children: children }));
+/** Rows divided by lines: each child is an `<li>`. */
+export const List = ({ children, label }) => (_jsx("ul", { className: "kit-list", "aria-label": label, children: children }));
+export function Table({ head, rows }) {
+    return (_jsxs("table", { className: "kit-table", children: [_jsx("thead", { children: _jsx("tr", { children: head.map((cell, i) => (_jsx("th", { children: cell }, i))) }) }), _jsx("tbody", { children: rows.map((row, r) => (_jsx("tr", { children: row.map((cell, c) => (_jsx("td", { children: cell }, c))) }, r))) })] }));
+}
+/** `value` of `max` as segments, one per unit: a board's done cards, say. */
+export function Meter({ value, max, label }) {
+    return (_jsx("div", { className: "kit-meter", role: "img", "aria-label": label, children: Array.from({ length: max }, (_, i) => (_jsx("i", { className: i < value ? "kit-on" : undefined }, i))) }));
+}
+const gapped = (gap, style) => gap === undefined ? style : { ...style, "--kit-gap": `${gap}px` };
+/** Children in a column. */
+export const Stack = ({ children, gap, className, style }) => (_jsx("div", { className: cx("kit-stack", className), style: gapped(gap, style), children: children }));
+/** Children in a row, centered on the cross axis. */
+export const Row = ({ children, gap, className, style }) => (_jsx("div", { className: cx("kit-row", className), style: gapped(gap, style), children: children }));
+/** Takes the room its parent (a `Stack` or `Row`) has left. */
+export const Fill = ({ children, className, style }) => (_jsx("div", { className: cx("kit-fill", className), style: style, children: children }));
+/** Scrolls what doesn't fit, with no visible scrollbar. */
+export const Scroll = ({ children, className, style }) => (_jsx("div", { className: cx("kit-scroll", className), style: style, children: children }));

package/dist/node_modules/@agentorg/kit/dist/src/icons.d.ts

@@ -0,0 +1,17 @@
+export declare const HomeIcon: () => import("react").JSX.Element;
+export declare const PlusIcon: () => import("react").JSX.Element;
+export declare const ChatGptIcon: () => import("react").JSX.Element;
+export declare const MoonIcon: () => import("react").JSX.Element;
+export declare const GearIcon: () => import("react").JSX.Element;
+export declare const MoreIcon: () => import("react").JSX.Element;
+export declare const UploadIcon: () => import("react").JSX.Element;
+export declare const DownloadIcon: () => import("react").JSX.Element;
+export declare const SendIcon: () => import("react").JSX.Element;
+export declare const StopIcon: () => import("react").JSX.Element;
+export declare const CopyIcon: () => import("react").JSX.Element;
+export declare const RetryIcon: () => import("react").JSX.Element;
+export declare const ToolIcon: () => import("react").JSX.Element;
+export declare const ChevronIcon: ({ className }: {
+    className?: string;
+}) => import("react").JSX.Element;
+export declare const ArrowDownIcon: () => import("react").JSX.Element;

package/dist/node_modules/@agentorg/kit/dist/src/icons.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** The shell's icons, drawn with the text's color and hidden from assistive technology: the control they sit on carries the name. */
+const svg = {
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: 2,
+    viewBox: "0 0 24 24",
+};
+export const HomeIcon = () => (_jsx("svg", { width: "16", height: "16", "aria-hidden": "true", ...svg, children: _jsx("path", { d: "M3 11l9-7 9 7v9a1 1 0 0 1-1 1h-5v-6h-6v6H4a1 1 0 0 1-1-1z" }) }));
+export const PlusIcon = () => (_jsx("svg", { width: "16", height: "16", "aria-hidden": "true", ...svg, children: _jsx("path", { d: "M12 5v14M5 12h14" }) }));
+export const ChatGptIcon = () => (_jsxs("svg", { width: "16", height: "16", "aria-hidden": "true", ...svg, children: [_jsx("circle", { cx: "12", cy: "12", r: "9" }), _jsx("path", { d: "M8.5 12h7M12 8.5v7" })] }));
+export const MoonIcon = () => (_jsx("svg", { width: "15", height: "15", "aria-hidden": "true", ...svg, children: _jsx("path", { d: "M21 13A9 9 0 1 1 11 3a7 7 0 0 0 10 10z" }) }));
+export const GearIcon = () => (_jsxs("svg", { width: "15", height: "15", "aria-hidden": "true", ...svg, children: [_jsx("circle", { cx: "12", cy: "12", r: "3" }), _jsx("path", { d: "M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z" })] }));
+export const MoreIcon = () => (_jsxs("svg", { width: "15", height: "15", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", children: [_jsx("circle", { cx: "5", cy: "12", r: "1.6" }), _jsx("circle", { cx: "12", cy: "12", r: "1.6" }), _jsx("circle", { cx: "19", cy: "12", r: "1.6" })] }));
+const stroke = {
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: 2,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+};
+export const UploadIcon = () => (_jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", ...stroke, "aria-hidden": "true", children: _jsx("path", { d: "M12 15V3M7 8l5-5 5 5M5 21h14" }) }));
+export const DownloadIcon = () => (_jsx("svg", { width: "15", height: "15", viewBox: "0 0 24 24", ...stroke, "aria-hidden": "true", children: _jsx("path", { d: "M12 3v12M7 10l5 5 5-5M5 21h14" }) }));
+export const SendIcon = () => (_jsx("svg", { width: "15", height: "15", viewBox: "0 0 24 24", ...stroke, strokeWidth: 2.4, "aria-hidden": "true", children: _jsx("path", { d: "M12 19V5M5 12l7-7 7 7" }) }));
+export const StopIcon = () => (_jsx("svg", { width: "11", height: "11", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", children: _jsx("rect", { x: "4", y: "4", width: "16", height: "16", rx: "3" }) }));
+export const CopyIcon = () => (_jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", ...stroke, "aria-hidden": "true", children: [_jsx("rect", { x: "9", y: "9", width: "11", height: "11", rx: "2" }), _jsx("path", { d: "M5 15V5a2 2 0 0 1 2-2h8" })] }));
+export const RetryIcon = () => (_jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", ...stroke, "aria-hidden": "true", children: [_jsx("path", { d: "M3 12a9 9 0 1 0 3-6.7L3 8" }), _jsx("path", { d: "M3 3v5h5" })] }));
+export const ToolIcon = () => (_jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", ...stroke, "aria-hidden": "true", children: _jsx("path", { d: "M14.7 6.3a4 4 0 0 0-5.4 5.4L3 18v3h3l6.3-6.3a4 4 0 0 0 5.4-5.4l-2.5 2.5-2.4-.6-.6-2.4z" }) }));
+export const ChevronIcon = ({ className }) => (_jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", ...stroke, className: className, "aria-hidden": "true", children: _jsx("path", { d: "M9 6l6 6-6 6" }) }));
+export const ArrowDownIcon = () => (_jsx("svg", { width: "15", height: "15", viewBox: "0 0 24 24", ...stroke, strokeWidth: 2.2, "aria-hidden": "true", children: _jsx("path", { d: "M12 5v14M5 12l7 7 7-7" }) }));

package/dist/node_modules/@agentorg/kit/dist/src/index.d.ts

@@ -0,0 +1,6 @@
+export { Chat, type ChatEntry, type ChatProps } from "./chat.tsx";
+export { Actions, Button, type ButtonProps, Card, Dialog, Field, Fill, IconButton, List, Menu, MenuItem, Meter, Row, Scroll, Select, Stack, Switch, Table, Tabs, } from "./components.tsx";
+export * from "./icons.tsx";
+export { Markdown } from "./markdown.tsx";
+export { ResizableGroup, ResizablePanel, ResizeHandle } from "./resizable.tsx";
+export { ensureKitStyles, KIT_CSS } from "./styles.ts";

package/dist/node_modules/@agentorg/kit/dist/src/index.js

@@ -0,0 +1,10 @@
+// @agentorg/kit: the shell's own components, for the shell and for every view. Importing it puts
+// the kit's styles in the document it runs in (a view's frame, or the shell's page).
+import { ensureKitStyles } from "./styles.js";
+ensureKitStyles();
+export { Chat } from "./chat.js";
+export { Actions, Button, Card, Dialog, Field, Fill, IconButton, List, Menu, MenuItem, Meter, Row, Scroll, Select, Stack, Switch, Table, Tabs, } from "./components.js";
+export * from "./icons.js";
+export { Markdown } from "./markdown.js";
+export { ResizableGroup, ResizablePanel, ResizeHandle } from "./resizable.js";
+export { ensureKitStyles, KIT_CSS } from "./styles.js";

package/dist/node_modules/@agentorg/kit/dist/src/markdown.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Markdown as an agent writes it, GitHub-flavored (tables, lists, strikethrough), safe to render
+ * as it streams: remend first closes what is still open (a `**` without its pair, an unfinished
+ * fence or table row), so a reply doesn't flicker between markup and text. Raw HTML is shown as
+ * text, never rendered.
+ */
+export declare function Markdown({ text }: {
+    text: string;
+}): import("react").JSX.Element;

package/dist/node_modules/@agentorg/kit/dist/src/markdown.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import remend from "remend";
+const PLUGINS = [remarkGfm];
+/**
+ * Markdown as an agent writes it, GitHub-flavored (tables, lists, strikethrough), safe to render
+ * as it streams: remend first closes what is still open (a `**` without its pair, an unfinished
+ * fence or table row), so a reply doesn't flicker between markup and text. Raw HTML is shown as
+ * text, never rendered.
+ */
+export function Markdown({ text }) {
+    return (_jsx("div", { className: "kit-md", children: _jsx(ReactMarkdown, { remarkPlugins: PLUGINS, children: remend(text) }) }));
+}

package/dist/node_modules/@agentorg/kit/dist/src/resizable.d.ts

@@ -0,0 +1,5 @@
+export { Group as ResizableGroup, Panel as ResizablePanel } from "react-resizable-panels";
+/** The handle between two panels: dragged, or moved with the arrow keys; only its line shows. */
+export declare function ResizeHandle({ label }: {
+    label: string;
+}): import("react").JSX.Element;

package/dist/node_modules/@agentorg/kit/dist/src/resizable.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// The resizable layout pieces: react-resizable-panels, with the kit's handle.
+import { Separator } from "react-resizable-panels";
+export { Group as ResizableGroup, Panel as ResizablePanel } from "react-resizable-panels";
+/** The handle between two panels: dragged, or moved with the arrow keys; only its line shows. */
+export function ResizeHandle({ label }) {
+    return _jsx(Separator, { className: "kit-resize-handle", "aria-label": label });
+}

package/dist/node_modules/@agentorg/kit/dist/src/styles.d.ts

@@ -0,0 +1,11 @@
+/**
+ * The kit's styles: the shell's own look, drawn in the theme's tokens (`--fg`, `--surface`,
+ * `--accent`, …), which the shell defines and sends every view at mount. Every class is `kit-`.
+ * They work without React too: a plain-DOM view may use the class names.
+ */
+export declare const KIT_CSS = "\n.kit-button {\n  display: inline-flex; align-items: center; justify-content: center; gap: 8px;\n  height: 32px; padding: 0 12px; border: 0; border-radius: 9px; cursor: pointer;\n  background: var(--hover); color: var(--fg); font: inherit; font-size: 13px; font-weight: 500;\n}\n.kit-button:hover { background: var(--selected); }\n.kit-button.kit-primary { background: var(--accent); color: var(--accent-fg); font-weight: 600; }\n.kit-button.kit-quiet { height: auto; padding: 0; background: none; color: inherit; text-decoration: underline; text-underline-offset: 2px; }\n.kit-button:disabled { opacity: 0.6; cursor: default; }\n.kit-icon-button {\n  width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px; cursor: pointer;\n  display: grid; place-items: center; background: transparent; color: var(--muted);\n}\n.kit-icon-button:hover { background: var(--hover); color: var(--fg); }\n.kit-icon-button:disabled { opacity: 0.4; cursor: default; }\n.kit-switch {\n  position: relative; flex: none; width: 30px; height: 18px; padding: 0; border: 0; border-radius: 9px;\n  background: var(--raised); cursor: pointer;\n}\n.kit-switch[data-state=\"checked\"] { background: var(--ok); }\n.kit-switch:disabled { opacity: 0.5; cursor: default; }\n.kit-switch-thumb {\n  position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%;\n  background: var(--faint); transition: left 0.12s;\n}\n.kit-switch[data-state=\"checked\"] .kit-switch-thumb { left: 14px; background: white; }\n.kit-field, .kit-select {\n  width: 100%; height: 38px; padding: 0 12px; border: 0; border-radius: 10px; outline: 0;\n  background: var(--raised); color: var(--fg); font: inherit;\n}\n.kit-select { height: 32px; padding: 0 8px; border-radius: 8px; }\n.kit-field:focus-visible, .kit-select:focus-visible, .kit-button:focus-visible, .kit-icon-button:focus-visible,\n.kit-switch:focus-visible { outline: 0; box-shadow: 0 0 0 1.5px var(--ring); }\n.kit-scrim { position: fixed; inset: 0; z-index: 20; background: rgb(0 0 0 / 0.5); }\n.kit-dialog {\n  position: fixed; left: 50%; top: 50%; z-index: 21; transform: translate(-50%, -50%);\n  width: min(440px, calc(100% - 32px)); max-height: calc(100% - 32px); overflow: auto; scrollbar-width: none;\n  display: flex; flex-direction: column; gap: 16px; padding: 20px; border-radius: 18px;\n  background: var(--surface); color: var(--fg); box-shadow: 0 24px 60px rgb(0 0 0 / 0.45); outline: 0;\n}\n.kit-dialog-title { margin: 0; font-size: 16px; font-weight: 600; }\n.kit-actions { display: flex; justify-content: flex-end; gap: 8px; }\n.kit-menu {\n  z-index: 30; min-width: 150px; padding: 4px; border-radius: 10px;\n  background: var(--raised); color: var(--fg); box-shadow: 0 12px 28px rgb(0 0 0 / 0.35);\n}\n.kit-menu-item {\n  display: block; width: 100%; padding: 7px 10px; border-radius: 7px; outline: 0; cursor: pointer;\n  font-size: 13px; text-align: left; user-select: none;\n}\n.kit-menu-item[data-highlighted] { background: var(--hover); }\n.kit-menu-item[data-disabled] { opacity: 0.6; cursor: default; }\n.kit-tabs-list {\n  display: inline-flex; align-self: flex-start; gap: 2px; padding: 3px; border-radius: 10px;\n  background: var(--hover);\n}\n.kit-tab {\n  padding: 5px 12px; border: 0; border-radius: 8px; cursor: pointer;\n  background: transparent; color: var(--muted); font: inherit; font-size: 13px;\n}\n.kit-tab[data-state=\"active\"] { background: var(--surface); color: var(--fg); font-weight: 600; box-shadow: 0 1px 2px rgb(0 0 0 / 0.2); }\n.kit-card { padding: 14px; border-radius: 12px; background: var(--card); }\n.kit-list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; font-size: 13px; }\n.kit-list > li { display: flex; align-items: center; gap: 10px; padding: 7px 0; }\n.kit-list > li + li { border-top: 1px solid var(--line); }\n.kit-table { width: 100%; border-collapse: collapse; font-size: 13px; }\n.kit-table th { padding: 0 10px 8px; text-align: left; color: var(--faint); font-weight: 500; font-size: 12px; }\n.kit-table td { padding: 9px 10px; border-top: 1px solid var(--line); vertical-align: middle; }\n.kit-table tr:hover td { background: var(--hover); }\n.kit-meter { display: flex; gap: 3px; }\n.kit-meter > i { flex: 1; height: 4px; border-radius: 2px; background: var(--raised); }\n.kit-meter > i.kit-on { background: var(--ok); }\n.kit-stack { display: flex; flex-direction: column; gap: var(--kit-gap, 8px); min-height: 0; }\n.kit-row { display: flex; align-items: center; gap: var(--kit-gap, 8px); min-width: 0; }\n.kit-fill { flex: 1; min-width: 0; min-height: 0; }\n.kit-scroll { overflow: auto; scrollbar-width: none; }\n.kit-scroll::-webkit-scrollbar { display: none; }\n.kit-resize-handle { position: relative; flex: none; width: 8px; margin: 0 -4px; z-index: 2; outline: 0; cursor: col-resize; touch-action: none; }\n.kit-resize-handle::after {\n  content: \"\"; position: absolute; left: 3px; top: 0; bottom: 0; width: 2px; border-radius: 1px; background: transparent;\n}\n.kit-resize-handle:hover::after, .kit-resize-handle:focus-visible::after, .kit-resize-handle[data-separator=\"active\"]::after { background: var(--ring); }\n/* While a handle is dragged, frames under the pointer take no events, so the drag keeps them all. */\n:root:has(.kit-resize-handle[data-separator=\"active\"]) iframe { pointer-events: none; }\n.kit-md > :first-child { margin-top: 0; }\n.kit-md > :last-child { margin-bottom: 0; }\n.kit-md p { margin: 0 0 10px; }\n.kit-md strong { font-weight: 650; }\n.kit-md ul, .kit-md ol { display: block; margin: 0 0 10px; padding-left: 20px; list-style: revert; }\n.kit-md li { display: list-item; margin: 3px 0; padding: 0; border-radius: 0; background: none; }\n.kit-md code { padding: 1px 5px; border-radius: 5px; background: var(--raised); font: 12.5px ui-monospace, Menlo, monospace; }\n.kit-md pre { margin: 0 0 10px; padding: 10px 12px; border-radius: 10px; background: var(--raised); overflow: auto; scrollbar-width: none; }\n.kit-md pre code { padding: 0; background: none; }\n.kit-md table { width: auto; min-width: 260px; margin: 2px 0 10px; border-collapse: collapse; font-size: 13px; }\n.kit-md th { padding: 0 14px 6px 0; text-align: left; color: var(--faint); font-weight: 500; font-size: 12px; }\n.kit-md td { padding: 6px 14px 6px 0; border-top: 1px solid var(--line); }\n.kit-md a { color: inherit; text-underline-offset: 2px; }\n.kit-chat { container-type: inline-size; display: flex; flex-direction: column; height: 100%; min-height: 0; color: var(--fg); }\n.kit-chat-viewport { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; padding: 8px 20px 0; }\n.kit-chat-viewport::-webkit-scrollbar { display: none; }\n.kit-chat-thread { display: flex; flex-direction: column; gap: 22px; max-width: 720px; margin: 0 auto; padding-bottom: 16px; }\n.kit-chat-earlier { align-self: center; height: 28px; border: 0; background: none; color: var(--muted); font: inherit; font-size: 12.5px; cursor: pointer; }\n.kit-chat-user { align-self: flex-end; max-width: 75%; padding: 9px 13px; border-radius: 16px; background: var(--raised); white-space: pre-wrap; word-break: break-word; }\n.kit-chat-assistant { display: flex; flex-direction: column; gap: 10px; min-width: 0; }\n.kit-chat-who { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12.5px; }\n.kit-chat-bar { display: flex; gap: 2px; height: 26px; margin-top: -4px; }\n.kit-chat-bar .kit-icon-button { width: 26px; height: 26px; border-radius: 7px; color: var(--faint); }\n.kit-chat-bar[data-hidden], .kit-chat-assistant:not([data-last]):not(:hover) .kit-chat-bar { visibility: hidden; }\n.kit-chat-thinking { display: flex; align-items: center; gap: 6px; height: 22px; color: var(--muted); }\n.kit-chat-thinking > i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; animation: kit-pulse 1.2s infinite; }\n.kit-chat-thinking > i:nth-child(2) { animation-delay: 0.2s; }\n.kit-chat-thinking > i:nth-child(3) { animation-delay: 0.4s; }\n@keyframes kit-pulse { 0%, 80%, 100% { opacity: 0.25; } 40% { opacity: 1; } }\n.kit-chat-step { font-size: 12.5px; color: var(--muted); }\n.kit-tool { border-radius: 12px; background: var(--hover); font-size: 13px; }\n.kit-tool > button {\n  display: flex; align-items: center; gap: 10px; width: 100%; height: 38px; padding: 0 12px;\n  border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;\n}\n.kit-tool-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.kit-tool-name { color: var(--muted); font: 12px ui-monospace, Menlo, monospace; }\n.kit-tool-done { color: var(--ok); font-weight: 700; }\n.kit-tool-refused { color: var(--bad); }\n.kit-tool-chevron { color: var(--faint); transition: transform 0.12s; }\n.kit-tool[data-open] .kit-tool-chevron { transform: rotate(90deg); }\n.kit-tool-body { margin: 0; padding: 0 12px 10px 36px; color: var(--muted); font: 12px/1.5 ui-monospace, Menlo, monospace; white-space: pre-wrap; word-break: break-word; }\n.kit-chat-notice { display: flex; flex-direction: column; gap: 6px; max-width: 720px; margin: 0 auto 10px; padding: 10px 12px; border-radius: 12px; background: var(--raised); font-size: 13px; }\n.kit-chat-notice b { font-weight: 600; }\n.kit-chat-composer-wrap { flex: none; padding: 0 20px 16px; }\n.kit-chat-composer { display: flex; flex-direction: column; max-width: 720px; margin: 0 auto; padding: 10px 10px 8px 14px; border-radius: 14px; background: var(--raised); }\n.kit-chat-input { display: block; width: 100%; min-height: 44px; max-height: 160px; padding: 0; border: 0; outline: 0; resize: none; background: transparent; color: inherit; font: inherit; scrollbar-width: none; }\n.kit-chat-composer-row { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; }\n.kit-chat-send {\n  width: 30px; height: 30px; margin-left: auto; padding: 0; border: 0; border-radius: 50%; cursor: pointer;\n  display: grid; place-items: center; background: var(--accent); color: var(--accent-fg);\n}\n.kit-chat-send:disabled { opacity: 0.35; cursor: default; }\n@container (max-width: 460px) {\n  .kit-chat-viewport { padding: 6px 12px 0; }\n  .kit-chat-thread { gap: 14px; }\n  .kit-chat-user { max-width: 88%; padding: 7px 11px; }\n  .kit-chat-who, .kit-tool-name { display: none; }\n  .kit-chat-composer-wrap { padding: 0 10px 10px; }\n  .kit-chat-composer { padding: 8px 8px 6px 12px; border-radius: 12px; }\n  .kit-chat-input { min-height: 34px; }\n}\n";
+/**
+ * Put the kit's styles in a document once, first in its head so a view's own come after and win.
+ * Importing the kit does it for the document it runs in; a document that has them is left alone.
+ */
+export declare function ensureKitStyles(doc?: Document | undefined): void;

package/dist/node_modules/@agentorg/kit/dist/src/styles.js

@@ -0,0 +1,166 @@
+/**
+ * The kit's styles: the shell's own look, drawn in the theme's tokens (`--fg`, `--surface`,
+ * `--accent`, …), which the shell defines and sends every view at mount. Every class is `kit-`.
+ * They work without React too: a plain-DOM view may use the class names.
+ */
+export const KIT_CSS = `
+.kit-button {
+  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
+  height: 32px; padding: 0 12px; border: 0; border-radius: 9px; cursor: pointer;
+  background: var(--hover); color: var(--fg); font: inherit; font-size: 13px; font-weight: 500;
+}
+.kit-button:hover { background: var(--selected); }
+.kit-button.kit-primary { background: var(--accent); color: var(--accent-fg); font-weight: 600; }
+.kit-button.kit-quiet { height: auto; padding: 0; background: none; color: inherit; text-decoration: underline; text-underline-offset: 2px; }
+.kit-button:disabled { opacity: 0.6; cursor: default; }
+.kit-icon-button {
+  width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px; cursor: pointer;
+  display: grid; place-items: center; background: transparent; color: var(--muted);
+}
+.kit-icon-button:hover { background: var(--hover); color: var(--fg); }
+.kit-icon-button:disabled { opacity: 0.4; cursor: default; }
+.kit-switch {
+  position: relative; flex: none; width: 30px; height: 18px; padding: 0; border: 0; border-radius: 9px;
+  background: var(--raised); cursor: pointer;
+}
+.kit-switch[data-state="checked"] { background: var(--ok); }
+.kit-switch:disabled { opacity: 0.5; cursor: default; }
+.kit-switch-thumb {
+  position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%;
+  background: var(--faint); transition: left 0.12s;
+}
+.kit-switch[data-state="checked"] .kit-switch-thumb { left: 14px; background: white; }
+.kit-field, .kit-select {
+  width: 100%; height: 38px; padding: 0 12px; border: 0; border-radius: 10px; outline: 0;
+  background: var(--raised); color: var(--fg); font: inherit;
+}
+.kit-select { height: 32px; padding: 0 8px; border-radius: 8px; }
+.kit-field:focus-visible, .kit-select:focus-visible, .kit-button:focus-visible, .kit-icon-button:focus-visible,
+.kit-switch:focus-visible { outline: 0; box-shadow: 0 0 0 1.5px var(--ring); }
+.kit-scrim { position: fixed; inset: 0; z-index: 20; background: rgb(0 0 0 / 0.5); }
+.kit-dialog {
+  position: fixed; left: 50%; top: 50%; z-index: 21; transform: translate(-50%, -50%);
+  width: min(440px, calc(100% - 32px)); max-height: calc(100% - 32px); overflow: auto; scrollbar-width: none;
+  display: flex; flex-direction: column; gap: 16px; padding: 20px; border-radius: 18px;
+  background: var(--surface); color: var(--fg); box-shadow: 0 24px 60px rgb(0 0 0 / 0.45); outline: 0;
+}
+.kit-dialog-title { margin: 0; font-size: 16px; font-weight: 600; }
+.kit-actions { display: flex; justify-content: flex-end; gap: 8px; }
+.kit-menu {
+  z-index: 30; min-width: 150px; padding: 4px; border-radius: 10px;
+  background: var(--raised); color: var(--fg); box-shadow: 0 12px 28px rgb(0 0 0 / 0.35);
+}
+.kit-menu-item {
+  display: block; width: 100%; padding: 7px 10px; border-radius: 7px; outline: 0; cursor: pointer;
+  font-size: 13px; text-align: left; user-select: none;
+}
+.kit-menu-item[data-highlighted] { background: var(--hover); }
+.kit-menu-item[data-disabled] { opacity: 0.6; cursor: default; }
+.kit-tabs-list {
+  display: inline-flex; align-self: flex-start; gap: 2px; padding: 3px; border-radius: 10px;
+  background: var(--hover);
+}
+.kit-tab {
+  padding: 5px 12px; border: 0; border-radius: 8px; cursor: pointer;
+  background: transparent; color: var(--muted); font: inherit; font-size: 13px;
+}
+.kit-tab[data-state="active"] { background: var(--surface); color: var(--fg); font-weight: 600; box-shadow: 0 1px 2px rgb(0 0 0 / 0.2); }
+.kit-card { padding: 14px; border-radius: 12px; background: var(--card); }
+.kit-list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; font-size: 13px; }
+.kit-list > li { display: flex; align-items: center; gap: 10px; padding: 7px 0; }
+.kit-list > li + li { border-top: 1px solid var(--line); }
+.kit-table { width: 100%; border-collapse: collapse; font-size: 13px; }
+.kit-table th { padding: 0 10px 8px; text-align: left; color: var(--faint); font-weight: 500; font-size: 12px; }
+.kit-table td { padding: 9px 10px; border-top: 1px solid var(--line); vertical-align: middle; }
+.kit-table tr:hover td { background: var(--hover); }
+.kit-meter { display: flex; gap: 3px; }
+.kit-meter > i { flex: 1; height: 4px; border-radius: 2px; background: var(--raised); }
+.kit-meter > i.kit-on { background: var(--ok); }
+.kit-stack { display: flex; flex-direction: column; gap: var(--kit-gap, 8px); min-height: 0; }
+.kit-row { display: flex; align-items: center; gap: var(--kit-gap, 8px); min-width: 0; }
+.kit-fill { flex: 1; min-width: 0; min-height: 0; }
+.kit-scroll { overflow: auto; scrollbar-width: none; }
+.kit-scroll::-webkit-scrollbar { display: none; }
+.kit-resize-handle { position: relative; flex: none; width: 8px; margin: 0 -4px; z-index: 2; outline: 0; cursor: col-resize; touch-action: none; }
+.kit-resize-handle::after {
+  content: ""; position: absolute; left: 3px; top: 0; bottom: 0; width: 2px; border-radius: 1px; background: transparent;
+}
+.kit-resize-handle:hover::after, .kit-resize-handle:focus-visible::after, .kit-resize-handle[data-separator="active"]::after { background: var(--ring); }
+/* While a handle is dragged, frames under the pointer take no events, so the drag keeps them all. */
+:root:has(.kit-resize-handle[data-separator="active"]) iframe { pointer-events: none; }
+.kit-md > :first-child { margin-top: 0; }
+.kit-md > :last-child { margin-bottom: 0; }
+.kit-md p { margin: 0 0 10px; }
+.kit-md strong { font-weight: 650; }
+.kit-md ul, .kit-md ol { display: block; margin: 0 0 10px; padding-left: 20px; list-style: revert; }
+.kit-md li { display: list-item; margin: 3px 0; padding: 0; border-radius: 0; background: none; }
+.kit-md code { padding: 1px 5px; border-radius: 5px; background: var(--raised); font: 12.5px ui-monospace, Menlo, monospace; }
+.kit-md pre { margin: 0 0 10px; padding: 10px 12px; border-radius: 10px; background: var(--raised); overflow: auto; scrollbar-width: none; }
+.kit-md pre code { padding: 0; background: none; }
+.kit-md table { width: auto; min-width: 260px; margin: 2px 0 10px; border-collapse: collapse; font-size: 13px; }
+.kit-md th { padding: 0 14px 6px 0; text-align: left; color: var(--faint); font-weight: 500; font-size: 12px; }
+.kit-md td { padding: 6px 14px 6px 0; border-top: 1px solid var(--line); }
+.kit-md a { color: inherit; text-underline-offset: 2px; }
+.kit-chat { container-type: inline-size; display: flex; flex-direction: column; height: 100%; min-height: 0; color: var(--fg); }
+.kit-chat-viewport { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; padding: 8px 20px 0; }
+.kit-chat-viewport::-webkit-scrollbar { display: none; }
+.kit-chat-thread { display: flex; flex-direction: column; gap: 22px; max-width: 720px; margin: 0 auto; padding-bottom: 16px; }
+.kit-chat-earlier { align-self: center; height: 28px; border: 0; background: none; color: var(--muted); font: inherit; font-size: 12.5px; cursor: pointer; }
+.kit-chat-user { align-self: flex-end; max-width: 75%; padding: 9px 13px; border-radius: 16px; background: var(--raised); white-space: pre-wrap; word-break: break-word; }
+.kit-chat-assistant { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
+.kit-chat-who { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12.5px; }
+.kit-chat-bar { display: flex; gap: 2px; height: 26px; margin-top: -4px; }
+.kit-chat-bar .kit-icon-button { width: 26px; height: 26px; border-radius: 7px; color: var(--faint); }
+.kit-chat-bar[data-hidden], .kit-chat-assistant:not([data-last]):not(:hover) .kit-chat-bar { visibility: hidden; }
+.kit-chat-thinking { display: flex; align-items: center; gap: 6px; height: 22px; color: var(--muted); }
+.kit-chat-thinking > i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; animation: kit-pulse 1.2s infinite; }
+.kit-chat-thinking > i:nth-child(2) { animation-delay: 0.2s; }
+.kit-chat-thinking > i:nth-child(3) { animation-delay: 0.4s; }
+@keyframes kit-pulse { 0%, 80%, 100% { opacity: 0.25; } 40% { opacity: 1; } }
+.kit-chat-step { font-size: 12.5px; color: var(--muted); }
+.kit-tool { border-radius: 12px; background: var(--hover); font-size: 13px; }
+.kit-tool > button {
+  display: flex; align-items: center; gap: 10px; width: 100%; height: 38px; padding: 0 12px;
+  border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
+}
+.kit-tool-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.kit-tool-name { color: var(--muted); font: 12px ui-monospace, Menlo, monospace; }
+.kit-tool-done { color: var(--ok); font-weight: 700; }
+.kit-tool-refused { color: var(--bad); }
+.kit-tool-chevron { color: var(--faint); transition: transform 0.12s; }
+.kit-tool[data-open] .kit-tool-chevron { transform: rotate(90deg); }
+.kit-tool-body { margin: 0; padding: 0 12px 10px 36px; color: var(--muted); font: 12px/1.5 ui-monospace, Menlo, monospace; white-space: pre-wrap; word-break: break-word; }
+.kit-chat-notice { display: flex; flex-direction: column; gap: 6px; max-width: 720px; margin: 0 auto 10px; padding: 10px 12px; border-radius: 12px; background: var(--raised); font-size: 13px; }
+.kit-chat-notice b { font-weight: 600; }
+.kit-chat-composer-wrap { flex: none; padding: 0 20px 16px; }
+.kit-chat-composer { display: flex; flex-direction: column; max-width: 720px; margin: 0 auto; padding: 10px 10px 8px 14px; border-radius: 14px; background: var(--raised); }
+.kit-chat-input { display: block; width: 100%; min-height: 44px; max-height: 160px; padding: 0; border: 0; outline: 0; resize: none; background: transparent; color: inherit; font: inherit; scrollbar-width: none; }
+.kit-chat-composer-row { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; }
+.kit-chat-send {
+  width: 30px; height: 30px; margin-left: auto; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
+  display: grid; place-items: center; background: var(--accent); color: var(--accent-fg);
+}
+.kit-chat-send:disabled { opacity: 0.35; cursor: default; }
+@container (max-width: 460px) {
+  .kit-chat-viewport { padding: 6px 12px 0; }
+  .kit-chat-thread { gap: 14px; }
+  .kit-chat-user { max-width: 88%; padding: 7px 11px; }
+  .kit-chat-who, .kit-tool-name { display: none; }
+  .kit-chat-composer-wrap { padding: 0 10px 10px; }
+  .kit-chat-composer { padding: 8px 8px 6px 12px; border-radius: 12px; }
+  .kit-chat-input { min-height: 34px; }
+}
+`;
+const MARK = "data-agentorg-kit";
+/**
+ * Put the kit's styles in a document once, first in its head so a view's own come after and win.
+ * Importing the kit does it for the document it runs in; a document that has them is left alone.
+ */
+export function ensureKitStyles(doc = globalThis.document) {
+    if (!doc?.head || doc.head.querySelector(`style[${MARK}]`))
+        return;
+    const style = doc.createElement("style");
+    style.setAttribute(MARK, "");
+    style.textContent = KIT_CSS;
+    doc.head.prepend(style);
+}