@corbet-labs/ccht 0.2.3 → 0.2.5

package/README.md

@@ -195,6 +195,77 @@ Rule: the app owns dock effects. The manager never persists, the component
 never fetches, spawns, or stores; visibility, persistence, and focus targets
 beyond the panel run through app callbacks and app-held state.
 
+## Component (`ChatDock.svelte`)
+
+Product-neutral bare chat panel: messages, composer, and history. All copy
+is a prop; all effects are app callbacks. Import product types from the
+component module:
+
+```js
+import ChatDock, {
+  defaultChatStatusLabel,
+} from '@corbet-labs/ccht/components/ChatDock.svelte';
+```
+
+`ChatDockMessage` is `{ id, role: 'user' | 'assistant', content,
+modelName?, requestId?, activity?: TurnState }` (reusing the shared
+`TurnState` vocabulary, including all six turn statuses, `stop_reason`,
+tools, usage updates, plans, permission requests, and errors).
+`ChatHistoryItem` is `{ id, title?, message_count? }`.
+
+Props: `kicker`, `title`, composer `composerId/Label/Placeholder`,
+`sendLabel`, welcome `welcomeTitle/Body/Example`, `messages`,
+`draft` (bindable), `history` + `activeHistoryId` + `showHistoryPicker`,
+`sending`, `canSend`, `controlsLoading`, `composerDisabled`,
+`onSend(text)`, `onStop?`, `onSelectHistory?(id)` (`''` means new),
+`onCopy?(id, content)`, `onShowActivity?(msg)`,
+`statusLabel?` (defaults to `defaultChatStatusLabel`: Responding… / Needs
+approval / Done / Stopped / Declined / Failed).
+
+Optional snippets: `headerExtra` (for example a run badge),
+`statusNote` (for example a readiness hint pointing at configuration),
+`messageBody(message)` (default: plain paragraph; Markdown rendering stays
+app-owned), `activityExtra(activity)` (default generic renderer: Reasoning
+details, tool list with raw I/O, context usage, plan, permission
+request ids, error, and status with `stop_reason`).
+
+Behavior: Enter without Shift submits (with an `isComposing` guard); the
+draft clears optimistically and is restored when `onSend` rejects; Send is
+disabled while submitting, `!canSend`, `controlsLoading`, or a blank draft;
+Stop renders only while submitting with a handler; Show activity renders
+only for assistant turns with a `requestId`, no activity yet, and a
+handler. Copy keeps its own Copied feedback and calls `onCopy` too.
+
+Stable classes: `ccht-chat-heading/kicker/title/actions/new-chat`,
+`ccht-chat-status-note`, `ccht-chat-picker`, `ccht-chat-messages/message/
+message-user/message-assistant/welcome/example/copy/model/reasoning/tool/
+usage/plan/permissions/error/status`, `ccht-chat-composer/primary/stop`,
+`ccht-chat-sr-only`. Colors resolve through `--ccht-*` variables with
+plain fallbacks (see the component source for the full list).
+
+## Component (`StepConfig.svelte`)
+
+Generic per-step backend/model/options form (content only; the app wraps
+it in `Dock`). `StepData` carries one step's `id`, `label`,
+`backendValue`, `backendOptions`, `backendPlaceholder`, `accountConnected`,
+`accountBusy`, `configurationError?`, `modelValue`, `modelOptions`,
+`refreshable` (whether the step owns a Refresh row), `extraOptions`
+(`SessionConfigOption[]`), and `extraValues`.
+
+Props: `steps: StepData[]`, `refreshing`, `onSelectBackend(id, value)`,
+`onSelectModel(id, value)`,
+`onSelectOption(id, option, value)`, `onRefresh(id)`. Optional snippets:
+`accountSlot({ step })` (rendered for disconnected steps; the app wires
+`AccountConnection` there), `headerCopy`, `footerSlot`.
+
+Each step renders a `fieldset`/`legend` group with `{label} assistant`
+and `{label} model` selects (stable ids `ccht-step-{id}-assistant`,
+`-model`, `-option-{opt}`), model-category options filtered out of the
+extras, grouped select choices flattened in order, per-step Refresh with
+loading state, and configuration errors as alerts. The `bottom`/`inline`
+placements have no rail chrome; like `Dock`, this component never fetches,
+spawns, or stores.
+
 ## Styling hooks
 
 Unstyled-but-hooked markup: layout comes from the app, colors resolve through

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@corbet-labs/ccht",
-  "version": "0.2.3",
+  "version": "0.2.5",
   "description": "Reusable conversations for your applications, powered by the shared Rust/Wasm model",
   "license": "LGPL-3.0-only WITH LGPL-3.0-linking-exception",
   "type": "module",
@@ -20,7 +20,9 @@
       "import": "./src/dock.ts"
     },
     "./components/AccountConnection.svelte": "./src/components/AccountConnection.svelte",
+    "./components/ChatDock.svelte": "./src/components/ChatDock.svelte",
     "./components/Dock.svelte": "./src/components/Dock.svelte",
+    "./components/StepConfig.svelte": "./src/components/StepConfig.svelte",
     "./ccht_bg.wasm": "./wasm/ccht_bg.wasm"
   },
   "files": [
@@ -42,9 +44,18 @@
   "publishConfig": {
     "access": "public"
   },
+  "scripts": {
+    "test": "bun test src/dock.test.ts src/auth.test.ts && vitest run"
+  },
   "peerDependencies": {
     "svelte": "^5"
   },
   "sideEffects": false,
-  "gitHead": "baa0b02cd88ad171d8c9a507a1d08c19d51bcc55"
+  "devDependencies": {
+    "@sveltejs/vite-plugin-svelte": "^6",
+    "@testing-library/svelte": "^5",
+    "jsdom": "^26",
+    "vitest": "^3"
+  },
+  "gitHead": "3ca5914db5c7eaefa694b7e5f0da1296f8159699"
 }

package/source/CHANGELOG.md

@@ -1,5 +1,24 @@
 # Changelog
 
+## 0.2.5 - 2026-09-19
+
+- No Rust changes. `StepConfig` steps carry `refreshable`: the Refresh row
+  renders only for steps that own refreshable controls.
+
+## 0.2.4 - 2026-09-19
+
+- No Rust changes; the Rust API and behavior are unchanged from 0.2.3.
+- ADDED: `web/src/components/ChatDock.svelte` — product-neutral bare chat
+  panel (messages, composer, history) over the shared `TurnState`
+  vocabulary, with app-owned copy, slots, and callbacks.
+- ADDED: `web/src/components/StepConfig.svelte` — generic per-step
+  backend/model/options form (content-only; the app wraps it in `Dock`).
+- ADDED: `web/src/dock.test.ts` + `web/src/auth.test.ts` (`bun test`) and
+  component suites (`vitest run`) covering dock state conformance, auth
+  contracts, and rail/chat/config behavior.
+- FIXED: focus return prefers the live remounted tab over a stale invoker
+  node (`Dock.svelte`).
+
 ## 0.2.3 - 2026-09-19
 
 - No code changes from 0.2.2. Repack the npm distribution from the verified

package/source/Cargo.lock

@@ -232,7 +232,7 @@ dependencies = [
 
 [[package]]
 name = "ccht"
-version = "0.2.3"
+version = "0.2.5"
 dependencies = [
  "agent-client-protocol",
  "agent-client-protocol-schema",

package/source/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "ccht"
-version = "0.2.3"
+version = "0.2.5"
 edition = "2024"
 rust-version = "1.88"
 license = "LGPL-3.0-only WITH LGPL-3.0-linking-exception"

package/src/auth.test.ts

@@ -0,0 +1,115 @@
+/** Contract tests for the web auth mirrors (web/src/auth.ts).
+ *
+ * Covers the Rust `AuthState` shape validation, the authenticated/account
+ * projections, and the render-gate for device-code challenges. Fixtures
+ * only; no DOM, network, or storage.
+ */
+import { describe, expect, test } from 'bun:test';
+import { authAccount, isAuthenticated, isAuthState, parseAuthState, validateChallenge } from './auth.ts';
+
+describe('isAuthenticated', () => {
+  test('only the authenticated object shape counts', () => {
+    expect(isAuthenticated('unknown')).toBe(false);
+    expect(isAuthenticated('unauthenticated')).toBe(false);
+    expect(isAuthenticated({ authenticated: {} })).toBe(true);
+    expect(isAuthenticated({ authenticated: { account: null } })).toBe(true);
+    expect(isAuthenticated({ authenticated: { account: 'julian' } })).toBe(true);
+  });
+});
+
+describe('authAccount', () => {
+  test('returns the display label or null', () => {
+    expect(authAccount('unknown')).toBeNull();
+    expect(authAccount('unauthenticated')).toBeNull();
+    expect(authAccount({ authenticated: {} })).toBeNull();
+    expect(authAccount({ authenticated: { account: null } })).toBeNull();
+    expect(authAccount({ authenticated: { account: 'julian' } })).toBe('julian');
+  });
+});
+
+describe('parseAuthState / isAuthState', () => {
+  test('accepts the exact Rust JSON shapes', () => {
+    expect(parseAuthState('unknown')).toBe('unknown');
+    expect(parseAuthState('unauthenticated')).toBe('unauthenticated');
+    expect(parseAuthState({ authenticated: {} })).toEqual({ authenticated: {} });
+    expect(parseAuthState({ authenticated: { account: null } })).toEqual({
+      authenticated: { account: null },
+    });
+    expect(parseAuthState({ authenticated: { account: 'a' } })).toEqual({
+      authenticated: { account: 'a' },
+    });
+    expect(parseAuthState(JSON.parse(JSON.stringify({ authenticated: { account: 'a' } })))).toEqual({
+      authenticated: { account: 'a' },
+    });
+  });
+
+  test('ignores unknown fields inside the inner object like serde', () => {
+    expect(parseAuthState({ authenticated: { account: 'a', extra: 1 } })).toEqual({
+      authenticated: { account: 'a' },
+    });
+  });
+
+  test('rejects everything else with a TypeError', () => {
+    for (const value of [
+      null,
+      undefined,
+      0,
+      true,
+      [],
+      {},
+      { authenticated: null },
+      { authenticated: 42 },
+      { authenticated: { account: 42 } },
+      { authenticated: { account: {} } },
+      { unknown: {} },
+      { authenticated: {}, extra: 1 },
+      'UNKNOWN',
+      'authenticated',
+    ]) {
+      expect(() => parseAuthState(value)).toThrow(TypeError);
+      expect(isAuthState(value)).toBe(false);
+    }
+    expect(isAuthState('unknown')).toBe(true);
+    expect(isAuthState({ authenticated: { account: 'a' } })).toBe(true);
+  });
+
+  test('never throws on hostile input', () => {
+    expect(() => isAuthState(Object.create(null))).not.toThrow();
+  });
+});
+
+describe('validateChallenge', () => {
+  const good = { verification_url: 'https://auth.openai.com/codex/device', user_code: 'TEST-4826' };
+
+  test('accepts a well-formed challenge', () => {
+    expect(validateChallenge(good)).toBe(true);
+    expect(validateChallenge({ ...good, user_code: 'a'.repeat(64) })).toBe(true);
+    expect(validateChallenge({ ...good, verification_url: 'https://example.com/x?y=1' })).toBe(true);
+    expect(validateChallenge({ ...good, extra: 'ignored' })).toBe(true);
+  });
+
+  test('rejects malformed challenges without throwing', () => {
+    for (const value of [
+      null,
+      undefined,
+      'code',
+      [],
+      {},
+      { verification_url: good.verification_url },
+      { user_code: good.user_code },
+      { verification_url: 42, user_code: good.user_code },
+      { ...good, user_code: '' },
+      { ...good, user_code: 'a'.repeat(65) },
+      { ...good, user_code: 'has space' },
+      { ...good, user_code: 'semi;colon' },
+      { ...good, user_code: 'uniçode' },
+      { ...good, verification_url: 'http://auth.openai.com/codex/device' },
+      { ...good, verification_url: 'not a url' },
+      { ...good, verification_url: 'https://user:pass@auth.openai.com/' },
+      { ...good, verification_url: 'https://' },
+      { ...good, verification_url: 'javascript:alert(1)' },
+    ]) {
+      expect(validateChallenge(value)).toBe(false);
+    }
+  });
+});

package/src/components/ChatDock.component.test.ts

@@ -0,0 +1,213 @@
+/** Browser behavior of the generic bare chat panel (ChatDock.svelte).
+ *
+ * Covers welcome/message rendering, copy feedback, the send lifecycle
+ * (draft clear and restore, disabled gates, Enter/isComposing handling),
+ * Stop, history selection, activity gating, and status labels. The default
+ * activity renderer is exercised through fixture TurnState values.
+ */
+import { render, fireEvent, cleanup } from '@testing-library/svelte';
+import { afterEach, describe, expect, test, vi } from 'vitest';
+import ChatDock from './ChatDock.svelte';
+
+afterEach(() => cleanup());
+
+const copy = {
+  kicker: 'Creator · diverges',
+  title: 'Brief the generator',
+  composerId: 'creator-prompt',
+  composerLabel: 'Message the creator',
+  composerPlaceholder: 'Describe the name you need…',
+  sendLabel: 'Send to creator',
+  welcomeTitle: 'creator',
+  welcomeBody: 'Talk through the problem first.',
+  welcomeExample: 'Try: short .ch names.',
+};
+
+function openChat(props: Record<string, unknown> = {}) {
+  return render(ChatDock, {
+    ...copy,
+    messages: [],
+    draft: '',
+    onSend: () => {},
+    ...props,
+  });
+}
+
+function turn(overrides: Record<string, unknown> = {}) {
+  return {
+    request_id: 'req-1',
+    last_sequence: 2,
+    text: 'hello',
+    user_text: '',
+    user_content: [],
+    thought_text: '',
+    thought_content: [],
+    content: [],
+    tools: {},
+    permissions: [],
+    updates: {},
+    status: 'completed',
+    stop_reason: 'end_turn',
+    error: null,
+    ...overrides,
+  };
+}
+
+describe('welcome and messages', () => {
+  test('empty thread shows the welcome article', () => {
+    const { getByText } = openChat();
+    expect(getByText('Talk through the problem first.')).toBeTruthy();
+    expect(getByText('Try: short .ch names.')).toBeTruthy();
+  });
+
+  test('user and assistant messages render with copy controls', async () => {
+    const onCopy = vi.fn();
+    const { getByText, getAllByRole } = openChat({
+      onCopy,
+      messages: [
+        { id: 'u1', role: 'user', content: 'a name' },
+        { id: 'a1', role: 'assistant', content: 'how about x', modelName: 'model-x' },
+      ],
+    });
+    expect(getByText('a name')).toBeTruthy();
+    expect(getByText('model-x')).toBeTruthy();
+    Object.defineProperty(navigator, 'clipboard', {
+      value: { writeText: vi.fn().mockResolvedValue(undefined) },
+      configurable: true,
+    });
+    await fireEvent.click(getAllByRole('button', { name: 'Copy' })[0]);
+    expect(onCopy).toHaveBeenCalledWith('u1', 'a name');
+    expect(getByText('Copied')).toBeTruthy();
+  });
+
+  test('assistant without activity offers Show activity only with a handler', () => {
+    const bare = openChat({ messages: [{ id: 'a1', role: 'assistant', content: 'hi', requestId: 'r1' }] });
+    expect(bare.queryByRole('button', { name: 'Show activity' })).toBeNull();
+    const wired = openChat({
+      onShowActivity: () => {},
+      messages: [{ id: 'a1', role: 'assistant', content: 'hi', requestId: 'r1' }],
+    });
+    expect(wired.getByRole('button', { name: 'Show activity' })).toBeTruthy();
+  });
+});
+
+describe('default activity renderer', () => {
+  test('covers reasoning, tools, usage, plan, permissions, error, and status', () => {
+    const { getByText } = openChat({
+      messages: [
+        {
+          id: 'a1',
+          role: 'assistant',
+          content: 'results',
+          activity: turn({
+            thought_text: 'thinking out loud',
+            tools: { t1: { toolCallId: 't1', title: 'Lookup', status: 'done', rawInput: { q: 1 } } },
+            updates: { usage_update: { used: 1200, size: 8000 }, plan: { entries: [{ content: 'step', status: 'done' }] } },
+            permissions: [{ request_id: 'p1', request: {} }],
+            error: { code: 'boom', message: 'went wrong' },
+            status: 'failed',
+            stop_reason: 'error',
+          }),
+        },
+      ],
+    });
+    expect(getByText('Reasoning')).toBeTruthy();
+    expect(getByText('thinking out loud')).toBeTruthy();
+    expect(getByText('Lookup · done')).toBeTruthy();
+    expect(getByText('Context: 1,200 / 8,000 tokens')).toBeTruthy();
+    expect(getByText('Plan')).toBeTruthy();
+    expect(getByText(/1 permission request pending: p1/)).toBeTruthy();
+    expect(getByText('boom: went wrong')).toBeTruthy();
+    expect(getByText('Failed')).toBeTruthy();
+    expect(getByText(/· error/)).toBeTruthy();
+  });
+
+  test('status labels cover every turn state', () => {
+    const cases: Array<[string, string]> = [
+      ['streaming', 'Responding…'],
+      ['awaiting_permission', 'Needs approval'],
+      ['completed', 'Done'],
+      ['cancelled', 'Stopped'],
+      ['refused', 'Declined'],
+      ['failed', 'Failed'],
+    ];
+    for (const [status, label] of cases) {
+      const view = openChat({ messages: [{ id: 'a1', role: 'assistant', content: 'x', activity: turn({ status }) }] });
+      expect(view.getByText(label)).toBeTruthy();
+      view.unmount();
+    }
+  });
+});
+
+describe('composer', () => {
+  test('send clears the draft and forwards trimmed text', async () => {
+    const onSend = vi.fn();
+    const { getByLabelText, getByRole } = openChat({ draft: '  hello  ', onSend });
+    await fireEvent.click(getByRole('button', { name: 'Send to creator' }));
+    expect(onSend).toHaveBeenCalledWith('hello');
+    expect((getByLabelText('Message the creator') as HTMLTextAreaElement).value).toBe('');
+  });
+
+  test('rejected send restores the draft', async () => {
+    const { getByLabelText, getByRole } = openChat({ draft: 'keep me', onSend: () => Promise.reject(new Error('down')) });
+    await fireEvent.click(getByRole('button', { name: 'Send to creator' }));
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    expect((getByLabelText('Message the creator') as HTMLTextAreaElement).value).toBe('keep me');
+  });
+
+  test('send is gated on canSend, loading, and blank drafts', () => {
+    for (const props of [{ draft: 'x', canSend: false }, { draft: 'x', controlsLoading: true }, { draft: '   ' }, { draft: 'x', submitting: true }]) {
+      const view = openChat(props);
+      expect(view.getByRole('button', { name: 'Send to creator' }).hasAttribute('disabled')).toBe(true);
+      view.unmount();
+    }
+    const ready = openChat({ draft: 'x' });
+    expect(ready.getByRole('button', { name: 'Send to creator' }).hasAttribute('disabled')).toBe(false);
+  });
+
+  test('Enter submits, shift+Enter and composing do not', async () => {
+    const onSend = vi.fn();
+    const { getByLabelText } = openChat({ draft: 'hi', onSend });
+    const box = getByLabelText('Message the creator');
+    await fireEvent.keyDown(box, { key: 'Enter', shiftKey: true });
+    await fireEvent.keyDown(box, { key: 'Enter', isComposing: true });
+    expect(onSend).not.toHaveBeenCalled();
+    await fireEvent.keyDown(box, { key: 'Enter' });
+    expect(onSend).toHaveBeenCalledWith('hi');
+  });
+
+  test('Stop appears only while submitting with a handler', () => {
+    expect(openChat({ submitting: true }).queryByRole('button', { name: 'Stop' })).toBeNull();
+    const onStop = vi.fn();
+    const view = openChat({ submitting: true, onStop });
+    expect(view.getByRole('button', { name: 'Stop' })).toBeTruthy();
+  });
+
+  test('composer honours the disabled flag', () => {
+    const { getByLabelText } = openChat({ composerDisabled: true });
+    expect((getByLabelText('Message the creator') as HTMLTextAreaElement).disabled).toBe(true);
+  });
+});
+
+describe('history', () => {
+  test('picker lists conversations and selects through the callback', async () => {
+    const onSelectHistory = vi.fn();
+    const { getByLabelText } = openChat({
+      showHistoryPicker: true,
+      onSelectHistory,
+      activeHistoryId: 'c1',
+      history: [
+        { id: 'c1', title: 'First', message_count: 4 },
+        { id: 'c2', title: null, message_count: 1 },
+      ],
+    });
+    const select = getByLabelText('Conversation') as HTMLSelectElement;
+    expect(select.value).toBe('c1');
+    await fireEvent.change(select, { target: { value: 'c2' } });
+    expect(onSelectHistory).toHaveBeenCalledWith('c2');
+  });
+
+  test('no picker without the flag', () => {
+    expect(openChat().queryByLabelText('Conversation')).toBeNull();
+  });
+});