@bernierllc/admin-agent-chat-ui 0.0.1 → 0.1.0

package/LICENSE

@@ -0,0 +1,5 @@
+Copyright (c) 2025 Bernier LLC
+
+This file is licensed to the client under a limited-use license.
+The client may use and modify this code *only within the scope of the project it was delivered for*.
+Redistribution or use in other products or commercial offerings is not permitted without written consent from Bernier LLC.

package/README.md

@@ -1,45 +1,350 @@
 # @bernierllc/admin-agent-chat-ui
 
-## ⚠️ IMPORTANT NOTICE ⚠️
+React components for an embedded admin LLM agent: floating trigger, slide-in chat panel, streaming message bubbles, tool-result cards, and change summary.
 
-**This package is created solely for the purpose of setting up OIDC (OpenID Connect) trusted publishing with npm.**
+## Overview
 
-This is **NOT** a functional package and contains **NO** code or functionality beyond the OIDC setup configuration.
+This package provides a complete frontend UI for the admin agent chat system. Drop `<AdminAgentProvider>` + `<AdminAgentTrigger>` + `<AdminAgentPanel>` into any React app and get a fully functional floating chat widget that streams responses from an SSE endpoint.
 
-## Purpose
+**Architecture:**
+- All business logic lives in the `useAdminAgentChat` hook (headless)
+- Styled components are thin wrappers you can use as-is or replace with your own UI
+- Consumes newline-delimited JSON events from the `admin-agent-nextjs` SSE endpoint
 
-This package exists to:
-1. Configure OIDC trusted publishing for the package name `@bernierllc/admin-agent-chat-ui`
-2. Enable secure, token-less publishing from CI/CD workflows
-3. Establish provenance for packages published under this name
+## Installation
 
-## What is OIDC Trusted Publishing?
+```bash
+npm install @bernierllc/admin-agent-chat-ui react react-dom
+```
 
-OIDC trusted publishing allows package maintainers to publish packages directly from their CI/CD workflows without needing to manage npm access tokens. Instead, it uses OpenID Connect to establish trust between the CI/CD provider (like GitHub Actions) and npm.
+## Quick Start
 
-## Setup Instructions
+```tsx
+// app/(admin)/layout.tsx
+import {
+  AdminAgentProvider,
+  AdminAgentTrigger,
+  AdminAgentPanel,
+} from '@bernierllc/admin-agent-chat-ui';
 
-To properly configure OIDC trusted publishing for this package:
+export default function AdminLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <AdminAgentProvider url="/api/chat/admin">
+      {children}
+      <AdminAgentTrigger position="bottom-right" />
+      <AdminAgentPanel />
+    </AdminAgentProvider>
+  );
+}
+```
 
-1. Go to [npmjs.com](https://www.npmjs.com/) and navigate to your package settings
-2. Configure the trusted publisher (e.g., GitHub Actions)
-3. Specify the repository and workflow that should be allowed to publish
-4. Use the configured workflow to publish your actual package
+This renders a `Sparkles` button fixed at the bottom-right. Clicking it opens a slide-in panel with a full streaming chat interface.
 
-## DO NOT USE THIS PACKAGE
+## Headless Usage
 
-This package is a placeholder for OIDC configuration only. It:
-- Contains no executable code
-- Provides no functionality
-- Should not be installed as a dependency
-- Exists only for administrative purposes
+Use only the hook and build your own UI:
 
-## More Information
+```tsx
+import { AdminAgentProvider, useAdminAgentChat } from '@bernierllc/admin-agent-chat-ui';
 
-For more details about npm's trusted publishing feature, see:
-- [npm Trusted Publishing Documentation](https://docs.npmjs.com/generating-provenance-statements)
-- [GitHub Actions OIDC Documentation](https://docs.github.com/en/actions/deployment/security-hardening-your-deployments/about-security-hardening-with-openid-connect)
+function MyChat() {
+  const { messages, status, sendMessage, isOpen, toggle } = useAdminAgentChat();
+
+  if (!isOpen) return null;
+
+  return (
+    <div>
+      {messages.map((msg) => (
+        <div key={msg.id}>
+          <strong>{msg.role}</strong>: {msg.content}
+
+          {msg.toolResults?.map((tr) => (
+            <div
+              key={tr.toolCallId}
+              style={{ color: tr.success ? 'green' : 'red' }}
+            >
+              [{tr.toolName}] {tr.summary}
+            </div>
+          ))}
+
+          {msg.changeSummary && (
+            <pre>{msg.changeSummary.markdown}</pre>
+          )}
+        </div>
+      ))}
+
+      <p>Status: {status}</p>
+
+      <button onClick={() => void sendMessage('Hello!')}>Say hello</button>
+    </div>
+  );
+}
+
+export default function App() {
+  return (
+    <AdminAgentProvider url="/api/chat/admin">
+      <MyChat />
+    </AdminAgentProvider>
+  );
+}
+```
+
+## SSE Stream Protocol
+
+The provider POSTs to `url` with body `{ message: string }` and reads newline-delimited JSON events:
+
+```jsonc
+// Each line is one JSON object followed by \n
+{"type":"text-delta","delta":"Hello "}
+{"type":"text-delta","delta":"world"}
+{"type":"tool-call-start","toolCallId":"tc1","toolName":"addService"}
+{"type":"tool-call-result","toolCallId":"tc1","success":true,"summary":"Added Haircut at $45","data":{...}}
+{"type":"change-summary","summary":{...RollupSummary}}
+{"type":"done"}
+
+// Error path:
+{"type":"error","message":"Something went wrong"}
+```
+
+## Components
+
+### `<AdminAgentProvider>`
+
+Context provider. Must wrap all other components and `useAdminAgentChat` calls.
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `url` | `string` | Yes | — | SSE POST endpoint (e.g. `/api/chat/admin`) |
+| `headers` | `Record<string, string>` | No | `{}` | Extra request headers (e.g. auth token) |
+| `children` | `React.ReactNode` | Yes | — | Your app tree |
+| `fetchFn` | `typeof fetch` | No | `globalThis.fetch` | Override fetch (useful for testing) |
+
+---
+
+### `<AdminAgentTrigger>`
+
+Floating action button that toggles the panel open/closed.
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `position` | `'bottom-right' \| 'bottom-left'` | No | `'bottom-right'` | Corner to position the button |
+| `icon` | `React.ReactNode` | No | Sparkles SVG | Override the button icon |
+| `className` | `string` | No | — | Extra CSS class |
+
+```tsx
+<AdminAgentTrigger position="bottom-right" />
+```
+
+---
+
+### `<AdminAgentPanel>`
+
+Slide-in panel from the right edge. Renders nothing when closed.
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `width` | `number \| string` | No | `380` | Panel width (px number or CSS string) |
+| `className` | `string` | No | — | Extra CSS class |
+
+```tsx
+<AdminAgentPanel width={420} />
+```
+
+---
+
+### `<AdminAgentPanelHeader>`
+
+Header bar inside the panel with title and close button.
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `title` | `string` | No | `'Admin Agent'` | Panel heading text |
+| `className` | `string` | No | — | Extra CSS class |
 
 ---
 
-**Maintained for OIDC setup purposes only**
+### `<MessageList>`
+
+Scrollable list of message bubbles. Auto-scrolls to the latest message.
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `messages` | `UIMessage[]` | Yes | — | Messages to render |
+| `className` | `string` | No | — | Extra CSS class |
+
+---
+
+### `<MessageBubble>`
+
+Single chat bubble. Delegates to `<UserMessageContent>` or `<AssistantMessageContent>` based on role, and renders `<ToolResultCard>` and `<ChangeSummaryCard>` overlays.
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `message` | `UIMessage` | Yes | The message to render |
+| `className` | `string` | No | Extra CSS class |
+
+---
+
+### `<AssistantMessageContent>`
+
+Text content area styled for assistant messages.
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `content` | `string` | Yes | Text content (rendered with pre-wrap) |
+| `className` | `string` | No | Extra CSS class |
+
+---
+
+### `<UserMessageContent>`
+
+Text content area styled for user messages (white text on indigo background).
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `content` | `string` | Yes | Text content |
+| `className` | `string` | No | Extra CSS class |
+
+---
+
+### `<AdminAgentInput>`
+
+Text input + send button for composing messages. Submits on Enter (Shift+Enter for newline) and disables while the agent is busy.
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `placeholder` | `string` | No | `'Message the admin agent…'` | Input placeholder |
+| `disabled` | `boolean` | No | `false` | Force-disable the input |
+| `className` | `string` | No | — | Extra CSS class |
+
+---
+
+### `<AgentStatusBar>`
+
+Shows contextual status beneath the message list. Returns null when status is `'idle'`.
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `status` | `AgentStatus` | Yes | — | Current agent status |
+| `executingTool` | `string` | No | — | Tool name shown during `'executing'` state |
+| `className` | `string` | No | — | Extra CSS class |
+
+Status labels:
+
+| Status | Label |
+|--------|-------|
+| `idle` | *(hidden)* |
+| `thinking` | `Thinking…` |
+| `executing` | `Executing <toolName>…` |
+| `responding` | `Responding…` |
+| `error` | `Error — retry?` |
+
+---
+
+### `<ToolResultCard>`
+
+Green (success) or red (failure) card rendered per tool call. Expandable to show raw data.
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `toolName` | `string` | Yes | — | Name of the tool that ran |
+| `success` | `boolean` | Yes | — | Whether the tool call succeeded |
+| `summary` | `string` | Yes | — | One-line description of the change |
+| `data` | `unknown` | No | — | Raw data to show when expanded |
+| `expanded` | `boolean` | No | `false` | Start expanded |
+
+```tsx
+<ToolResultCard
+  toolName="addService"
+  success={true}
+  summary="Added 'Haircut' at $45"
+  data={{ id: 42, name: 'Haircut', price: 45 }}
+/>
+```
+
+---
+
+### `<ChangeSummaryCard>`
+
+End-of-conversation rollup card. Collapsible. Renders `RollupSummary.markdown` from `@bernierllc/agent-changeset`.
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `summary` | `RollupSummary` | Yes | — | Rollup from `agent-changeset` |
+| `defaultExpanded` | `boolean` | No | `false` | Start expanded |
+
+---
+
+## Hook: `useAdminAgentChat`
+
+```ts
+import { useAdminAgentChat } from '@bernierllc/admin-agent-chat-ui';
+
+const {
+  messages,          // UIMessage[] — full conversation history
+  status,            // AgentStatus — current state machine state
+  isOpen,            // boolean — whether the panel is open
+  currentToolName,   // string | null — tool executing right now
+  sendMessage,       // (text: string) => Promise<void>
+  abort,             // () => void — cancel in-flight request
+  toggle,            // () => void — toggle open/closed
+  open,              // () => void — open the panel
+  close,             // () => void — close the panel
+} = useAdminAgentChat();
+```
+
+Must be called inside `<AdminAgentProvider>`. Throws `AdminAgentUIError` with code `NO_PROVIDER` otherwise.
+
+## Types
+
+```ts
+type AgentStatus = 'idle' | 'thinking' | 'executing' | 'responding' | 'error';
+
+interface UIMessage {
+  id: string;
+  role: 'user' | 'assistant';
+  content: string;
+  toolResults?: UIToolResult[];
+  changeSummary?: RollupSummary; // from @bernierllc/agent-changeset
+  timestamp: string;             // ISO 8601
+}
+
+interface UIToolResult {
+  toolName: string;
+  toolCallId: string;
+  success: boolean;
+  summary: string;
+  data?: unknown;
+}
+```
+
+## Errors
+
+```ts
+import { AdminAgentUIError, AdminAgentStreamError } from '@bernierllc/admin-agent-chat-ui';
+
+// Base error
+class AdminAgentUIError extends Error {
+  readonly code: string; // e.g. 'UI_ERROR', 'NO_PROVIDER'
+}
+
+// Stream-specific error (extends AdminAgentUIError, code = 'STREAM_ERROR')
+class AdminAgentStreamError extends AdminAgentUIError {}
+```
+
+Both errors use `Error.cause` chaining for full stack traces.
+
+## State Machine
+
+```
+idle ──sendMessage──► thinking
+thinking ────────────► executing  (on tool-call-start)
+executing ───────────► thinking   (on tool-call-result, loop continues)
+thinking ────────────► responding (on text-delta)
+responding ──────────► idle       (on done)
+any ─────────────────► error      (on error event or non-ok response)
+```
+
+## License
+
+Copyright (c) 2025 Bernier LLC. Licensed to the client under a limited-use license.

package/dist/components/AdminAgentInput.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { AdminAgentInputProps } from '../types';
+export declare function AdminAgentInput({ className, placeholder, disabled, }: AdminAgentInputProps): React.ReactElement;
+//# sourceMappingURL=AdminAgentInput.d.ts.map

package/dist/components/AdminAgentInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AdminAgentInput.d.ts","sourceRoot":"","sources":["../../src/components/AdminAgentInput.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAErD,wBAAgB,eAAe,CAAC,EAC9B,SAAS,EACT,WAAwC,EACxC,QAAQ,GACT,EAAE,oBAAoB,GAAG,KAAK,CAAC,YAAY,CA8F3C"}

package/dist/components/AdminAgentInput.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+Copyright (c) 2025 Bernier LLC
+
+This file is licensed to the client under a limited-use license.
+The client may use and modify this code *only within the scope of the project it was delivered for*.
+Redistribution or use in other products or commercial offerings is not permitted without written consent from Bernier LLC.
+*/
+import { useState } from 'react';
+import { useAdminAgentChat } from '../hooks/useAdminAgentChat';
+export function AdminAgentInput({ className, placeholder = 'Message the admin agent…', disabled, }) {
+    const { sendMessage, status } = useAdminAgentChat();
+    const [value, setValue] = useState('');
+    const isBusy = status === 'thinking' || status === 'executing' || status === 'responding';
+    const isDisabled = disabled === true || isBusy;
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        const text = value.trim();
+        if (!text || isDisabled)
+            return;
+        setValue('');
+        void sendMessage(text);
+    };
+    const handleKeyDown = (e) => {
+        if (e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault();
+            const text = value.trim();
+            if (!text || isDisabled)
+                return;
+            setValue('');
+            void sendMessage(text);
+        }
+    };
+    const formStyle = {
+        display: 'flex',
+        alignItems: 'flex-end',
+        padding: '10px 16px',
+        borderTop: '1px solid #e5e7eb',
+        background: '#fff',
+        gap: '8px',
+    };
+    const textareaStyle = {
+        flex: 1,
+        padding: '8px 12px',
+        border: '1px solid #d1d5db',
+        borderRadius: '8px',
+        resize: 'none',
+        fontFamily: 'inherit',
+        fontSize: '14px',
+        lineHeight: 1.5,
+        color: '#111827',
+        background: isDisabled ? '#f9fafb' : '#fff',
+        minHeight: '40px',
+        maxHeight: '120px',
+        outline: 'none',
+    };
+    const buttonStyle = {
+        padding: '8px 14px',
+        background: isDisabled ? '#a5b4fc' : '#4f46e5',
+        color: '#fff',
+        border: 'none',
+        borderRadius: '8px',
+        cursor: isDisabled ? 'not-allowed' : 'pointer',
+        fontWeight: 600,
+        fontSize: '14px',
+        lineHeight: 1,
+        flexShrink: 0,
+        height: '40px',
+    };
+    return (_jsxs("form", { style: formStyle, className: className, onSubmit: handleSubmit, "data-testid": "admin-agent-input-form", children: [_jsx("textarea", { style: textareaStyle, value: value, onChange: (e) => setValue(e.target.value), onKeyDown: handleKeyDown, placeholder: placeholder, disabled: isDisabled, rows: 1, "aria-label": "Message input", "data-testid": "admin-agent-textarea" }), _jsx("button", { type: "submit", style: buttonStyle, disabled: isDisabled || !value.trim(), "aria-label": "Send message", "data-testid": "admin-agent-send-button", children: "Send" })] }));
+}
+//# sourceMappingURL=AdminAgentInput.js.map

package/dist/components/AdminAgentInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AdminAgentInput.js","sourceRoot":"","sources":["../../src/components/AdminAgentInput.tsx"],"names":[],"mappings":"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"}

package/dist/components/AdminAgentPanel.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { AdminAgentPanelProps } from '../types';
+export declare function AdminAgentPanel({ className, width, }: AdminAgentPanelProps): React.ReactElement | null;
+//# sourceMappingURL=AdminAgentPanel.d.ts.map

package/dist/components/AdminAgentPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AdminAgentPanel.d.ts","sourceRoot":"","sources":["../../src/components/AdminAgentPanel.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAErD,wBAAgB,eAAe,CAAC,EAC9B,SAAS,EACT,KAAW,GACZ,EAAE,oBAAoB,GAAG,KAAK,CAAC,YAAY,GAAG,IAAI,CAsClD"}

package/dist/components/AdminAgentPanel.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAdminAgentChat } from '../hooks/useAdminAgentChat';
+import { AdminAgentInput } from './AdminAgentInput';
+import { AdminAgentPanelHeader } from './AdminAgentPanelHeader';
+import { AgentStatusBar } from './AgentStatusBar';
+import { MessageList } from './MessageList';
+export function AdminAgentPanel({ className, width = 380, }) {
+    const { messages, status, isOpen, currentToolName } = useAdminAgentChat();
+    if (!isOpen)
+        return null;
+    const panelStyle = {
+        position: 'fixed',
+        top: 0,
+        right: 0,
+        bottom: 0,
+        width: typeof width === 'number' ? `${width}px` : width,
+        display: 'flex',
+        flexDirection: 'column',
+        background: '#fff',
+        boxShadow: '-4px 0 24px rgba(0,0,0,0.12)',
+        zIndex: 999,
+        fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+    };
+    return (_jsxs("div", { style: panelStyle, className: className, role: "dialog", "aria-label": "Admin Agent Chat", "aria-modal": "true", "data-testid": "admin-agent-panel", children: [_jsx(AdminAgentPanelHeader, {}), _jsx(MessageList, { messages: messages }), _jsx(AgentStatusBar, { status: status, executingTool: currentToolName ?? undefined }), _jsx(AdminAgentInput, {})] }));
+}
+//# sourceMappingURL=AdminAgentPanel.js.map

package/dist/components/AdminAgentPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AdminAgentPanel.js","sourceRoot":"","sources":["../../src/components/AdminAgentPanel.tsx"],"names":[],"mappings":";AASA,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAG5C,MAAM,UAAU,eAAe,CAAC,EAC9B,SAAS,EACT,KAAK,GAAG,GAAG,GACU;IACrB,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,eAAe,EAAE,GAAG,iBAAiB,EAAE,CAAC;IAE1E,IAAI,CAAC,MAAM;QAAE,OAAO,IAAI,CAAC;IAEzB,MAAM,UAAU,GAAwB;QACtC,QAAQ,EAAE,OAAO;QACjB,GAAG,EAAE,CAAC;QACN,KAAK,EAAE,CAAC;QACR,MAAM,EAAE,CAAC;QACT,KAAK,EAAE,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,KAAK,IAAI,CAAC,CAAC,CAAC,KAAK;QACvD,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,QAAQ;QACvB,UAAU,EAAE,MAAM;QAClB,SAAS,EAAE,8BAA8B;QACzC,MAAM,EAAE,GAAG;QACX,UAAU,EACR,mEAAmE;KACtE,CAAC;IAEF,OAAO,CACL,eACE,KAAK,EAAE,UAAU,EACjB,SAAS,EAAE,SAAS,EACpB,IAAI,EAAC,QAAQ,gBACF,kBAAkB,gBAClB,MAAM,iBACL,mBAAmB,aAE/B,KAAC,qBAAqB,KAAG,EACzB,KAAC,WAAW,IAAC,QAAQ,EAAE,QAAQ,GAAI,EACnC,KAAC,cAAc,IACb,MAAM,EAAE,MAAM,EACd,aAAa,EAAE,eAAe,IAAI,SAAS,GAC3C,EACF,KAAC,eAAe,KAAG,IACf,CACP,CAAC;AACJ,CAAC"}

package/dist/components/AdminAgentPanelHeader.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { AdminAgentPanelHeaderProps } from '../types';
+export declare function AdminAgentPanelHeader({ title, className, }: AdminAgentPanelHeaderProps): React.ReactElement;
+//# sourceMappingURL=AdminAgentPanelHeader.d.ts.map

package/dist/components/AdminAgentPanelHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AdminAgentPanelHeader.d.ts","sourceRoot":"","sources":["../../src/components/AdminAgentPanelHeader.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,UAAU,CAAC;AAE3D,wBAAgB,qBAAqB,CAAC,EACpC,KAAqB,EACrB,SAAS,GACV,EAAE,0BAA0B,GAAG,KAAK,CAAC,YAAY,CAoEjD"}

package/dist/components/AdminAgentPanelHeader.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAdminAgentChat } from '../hooks/useAdminAgentChat';
+export function AdminAgentPanelHeader({ title = 'Admin Agent', className, }) {
+    const { close, status } = useAdminAgentChat();
+    const isActive = status !== 'idle' && status !== 'error';
+    const headerStyle = {
+        display: 'flex',
+        alignItems: 'center',
+        padding: '14px 16px',
+        borderBottom: '1px solid #e5e7eb',
+        background: '#fff',
+        gap: '10px',
+    };
+    const titleStyle = {
+        flex: 1,
+        fontWeight: 600,
+        fontSize: '15px',
+        color: '#111827',
+        display: 'flex',
+        alignItems: 'center',
+        gap: '8px',
+    };
+    const dotStyle = {
+        width: '8px',
+        height: '8px',
+        borderRadius: '50%',
+        background: isActive ? '#10b981' : '#d1d5db',
+        flexShrink: 0,
+    };
+    const closeStyle = {
+        background: 'none',
+        border: 'none',
+        cursor: 'pointer',
+        color: '#6b7280',
+        padding: '4px',
+        lineHeight: 1,
+        borderRadius: '4px',
+        fontSize: '18px',
+    };
+    return (_jsxs("div", { style: headerStyle, className: className, "data-testid": "admin-agent-panel-header", children: [_jsxs("div", { style: titleStyle, children: [_jsx("span", { style: dotStyle, "aria-label": isActive ? 'Active' : 'Idle', role: "img" }), title] }), _jsx("button", { type: "button", onClick: close, style: closeStyle, "aria-label": "Close panel", "data-testid": "close-panel-button", children: "\u2715" })] }));
+}
+//# sourceMappingURL=AdminAgentPanelHeader.js.map

package/dist/components/AdminAgentPanelHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AdminAgentPanelHeader.js","sourceRoot":"","sources":["../../src/components/AdminAgentPanelHeader.tsx"],"names":[],"mappings":";AASA,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAG/D,MAAM,UAAU,qBAAqB,CAAC,EACpC,KAAK,GAAG,aAAa,EACrB,SAAS,GACkB;IAC3B,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,iBAAiB,EAAE,CAAC;IAE9C,MAAM,QAAQ,GAAG,MAAM,KAAK,MAAM,IAAI,MAAM,KAAK,OAAO,CAAC;IAEzD,MAAM,WAAW,GAAwB;QACvC,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,QAAQ;QACpB,OAAO,EAAE,WAAW;QACpB,YAAY,EAAE,mBAAmB;QACjC,UAAU,EAAE,MAAM;QAClB,GAAG,EAAE,MAAM;KACZ,CAAC;IAEF,MAAM,UAAU,GAAwB;QACtC,IAAI,EAAE,CAAC;QACP,UAAU,EAAE,GAAG;QACf,QAAQ,EAAE,MAAM;QAChB,KAAK,EAAE,SAAS;QAChB,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,QAAQ;QACpB,GAAG,EAAE,KAAK;KACX,CAAC;IAEF,MAAM,QAAQ,GAAwB;QACpC,KAAK,EAAE,KAAK;QACZ,MAAM,EAAE,KAAK;QACb,YAAY,EAAE,KAAK;QACnB,UAAU,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;QAC5C,UAAU,EAAE,CAAC;KACd,CAAC;IAEF,MAAM,UAAU,GAAwB;QACtC,UAAU,EAAE,MAAM;QAClB,MAAM,EAAE,MAAM;QACd,MAAM,EAAE,SAAS;QACjB,KAAK,EAAE,SAAS;QAChB,OAAO,EAAE,KAAK;QACd,UAAU,EAAE,CAAC;QACb,YAAY,EAAE,KAAK;QACnB,QAAQ,EAAE,MAAM;KACjB,CAAC;IAEF,OAAO,CACL,eACE,KAAK,EAAE,WAAW,EAClB,SAAS,EAAE,SAAS,iBACR,0BAA0B,aAEtC,eAAK,KAAK,EAAE,UAAU,aACpB,eACE,KAAK,EAAE,QAAQ,gBACH,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,EACxC,IAAI,EAAC,KAAK,GACV,EACD,KAAK,IACF,EACN,iBACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,KAAK,EACd,KAAK,EAAE,UAAU,gBACN,aAAa,iBACZ,oBAAoB,uBAGzB,IACL,CACP,CAAC;AACJ,CAAC"}

package/dist/components/AdminAgentProvider.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { AdminAgentProviderProps } from '../types';
+export declare function AdminAgentProvider({ url, headers, children, fetchFn, }: AdminAgentProviderProps): React.ReactElement;
+//# sourceMappingURL=AdminAgentProvider.d.ts.map

package/dist/components/AdminAgentProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AdminAgentProvider.d.ts","sourceRoot":"","sources":["../../src/components/AdminAgentProvider.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAG7D,OAAO,KAAK,EACV,uBAAuB,EAMxB,MAAM,UAAU,CAAC;AAgBlB,wBAAgB,kBAAkB,CAAC,EACjC,GAAG,EACH,OAAO,EACP,QAAQ,EACR,OAAO,GACR,EAAE,uBAAuB,GAAG,KAAK,CAAC,YAAY,CAqP9C"}