@corbet-labs/ccht 0.2.2 → 0.2.4

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

@@ -0,0 +1,185 @@
+/** Browser behavior of the generic per-step config form (StepConfig.svelte).
+ *
+ * Covers step rendering, backend/model selection callbacks, the account
+ * slot branch, extra select/boolean controls, refresh, and error display.
+ */
+import { render, fireEvent, cleanup } from '@testing-library/svelte';
+import { afterEach, describe, expect, test, vi } from 'vitest';
+import { createRawSnippet } from 'svelte';
+import StepConfig from './StepConfig.svelte';
+import type { StepData } from './StepConfig.svelte';
+
+afterEach(() => cleanup());
+
+function step(overrides: Partial<StepData> = {}): StepData {
+  return {
+    id: 'creator',
+    label: 'Creator chat',
+    backendValue: '',
+    backendOptions: [{ value: 'local', name: 'Local' }],
+    backendPlaceholder: 'Configured default',
+    accountConnected: true,
+    accountBusy: false,
+    configurationError: null,
+    modelValue: 'qwen',
+    modelOptions: [{ value: 'qwen', name: 'Qwen' }],
+    extraOptions: [],
+    extraValues: {},
+    ...overrides,
+  };
+}
+
+function openSteps(steps: StepData[], props: Record<string, unknown> = {}) {
+  return render(StepConfig, {
+    steps,
+    onSelectBackend: () => {},
+    onSelectModel: () => {},
+    onSelectOption: () => {},
+    onRefresh: () => {},
+    ...props,
+  });
+}
+
+describe('step rendering', () => {
+  test('renders one labelled group per step with backend and model selects', () => {
+    const { getByRole, getByLabelText } = openSteps([step(), step({ id: 'compile', label: 'Proposal compilation' })]);
+    expect(getByRole('group', { name: 'Creator chat' })).toBeTruthy();
+    expect(getByRole('group', { name: 'Proposal compilation' })).toBeTruthy();
+    expect(getByLabelText('Creator chat assistant')).toBeTruthy();
+    expect(getByLabelText('Creator chat model')).toBeTruthy();
+  });
+
+  test('backend and model selections forward step id and value', async () => {
+    const onSelectBackend = vi.fn();
+    const onSelectModel = vi.fn();
+    const { getByLabelText } = openSteps([step()], { onSelectBackend, onSelectModel });
+    await fireEvent.change(getByLabelText('Creator chat assistant'), { target: { value: 'local' } });
+    expect(onSelectBackend).toHaveBeenCalledWith('creator', 'local');
+    await fireEvent.change(getByLabelText('Creator chat model'), { target: { value: 'qwen' } });
+    expect(onSelectModel).toHaveBeenCalledWith('creator', 'qwen');
+  });
+
+  test('empty model options render a No model placeholder', () => {
+    const { getByLabelText } = openSteps([step({ modelValue: '', modelOptions: [] })]);
+    expect(getByLabelText('Creator chat model').textContent).toContain('No model');
+  });
+});
+
+describe('account branch', () => {
+  test('disconnected steps without a slot fall back to model controls', () => {
+    const { getByLabelText } = openSteps([step({ accountConnected: false })]);
+    expect(getByLabelText('Creator chat model')).toBeTruthy();
+  });
+
+  test('disconnected steps render the account slot with the step id', () => {
+    const accountSlot = createRawSnippet<{ step: string }>((getStep) => ({
+      render: () => `<button type="button" data-step="${getStep().step}">connect</button>`,
+    }));
+    const { getByRole, queryByLabelText } = openSteps([step({ accountConnected: false })], { accountSlot });
+    expect(queryByLabelText('Creator chat model')).toBeNull();
+    expect(getByRole('button', { name: 'connect' }).getAttribute('data-step')).toBe('creator');
+  });
+
+  test('connected steps render model controls even with a slot provided', () => {
+    const { getByLabelText } = render(StepConfig, {
+      steps: [step({ accountConnected: true })],
+      onSelectBackend: () => {},
+      onSelectModel: () => {},
+      onSelectOption: () => {},
+      onRefresh: () => {},
+      accountSlot: (() => {}) as never,
+    });
+    expect(getByLabelText('Creator chat model')).toBeTruthy();
+  });
+});
+
+describe('extra controls', () => {
+  const options = [
+    {
+      id: 'model',
+      name: 'Model',
+      category: 'model',
+      type: 'select',
+      currentValue: 'one',
+      options: [{ value: 'one', name: 'One' }],
+    },
+    {
+      id: 'thinking',
+      name: 'Thinking',
+      type: 'boolean',
+      currentValue: true,
+    },
+  ];
+
+  test('model-category controls are filtered out; others render', () => {
+    const { queryByLabelText, getByLabelText } = openSteps([step({ extraOptions: options as never })]);
+    expect(queryByLabelText('Model')).toBeNull();
+    expect(getByLabelText('Thinking')).toBeTruthy();
+  });
+
+  test('select and boolean edits forward option and typed value', async () => {
+    const onSelectOption = vi.fn();
+    const selectOptions = [
+      {
+        id: 'effort',
+        name: 'Effort',
+        type: 'select',
+        currentValue: 'low',
+        options: [{ value: 'low', name: 'Low' }, { value: 'high', name: 'High' }],
+      },
+    ];
+    const { getByLabelText } = openSteps(
+      [step({ extraOptions: [...selectOptions, options[1]] as never, extraValues: { effort: 'low', thinking: true } })],
+      { onSelectOption },
+    );
+    await fireEvent.change(getByLabelText('Effort'), { target: { value: 'high' } });
+    expect(onSelectOption).toHaveBeenCalledWith('creator', expect.objectContaining({ id: 'effort' }), 'high');
+    const thinking = getByLabelText('Thinking') as HTMLInputElement;
+    expect(thinking.checked).toBe(true);
+    await fireEvent.click(thinking);
+    expect(onSelectOption).toHaveBeenCalledWith('creator', expect.objectContaining({ id: 'thinking' }), false);
+  });
+
+  test('grouped select choices flatten in order', async () => {
+    const onSelectOption = vi.fn();
+    const { getByLabelText } = openSteps(
+      [
+        step({
+          extraOptions: [
+            {
+              id: 'model2',
+              name: 'Second',
+              type: 'select',
+              currentValue: 'b',
+              options: [{ group: 'g', name: 'G', options: [{ value: 'a', name: 'A' }, { value: 'b', name: 'B' }] }],
+            },
+          ] as never,
+        }),
+      ],
+      { onSelectOption },
+    );
+    const select = getByLabelText('Second') as HTMLSelectElement;
+    expect([...select.options].map((option) => option.value)).toEqual(['a', 'b']);
+  });
+});
+
+describe('refresh and errors', () => {
+  test('refresh button forwards the step id and reflects loading', async () => {
+    const onRefresh = vi.fn();
+    const idle = openSteps([step()], { onRefresh });
+    await fireEvent.click(idle.getByRole('button', { name: 'Refresh models' }));
+    expect(onRefresh).toHaveBeenCalledWith('creator');
+    const loading = openSteps([step()], { onRefresh, refreshing: true });
+    expect(loading.getByRole('button', { name: 'Loading controls…' })).toBeTruthy();
+  });
+
+  test('configuration errors render as alerts', () => {
+    const { getByText } = openSteps([step({ configurationError: 'stale options' })]);
+    expect(getByText('stale options')).toBeTruthy();
+  });
+
+  test('no refresh row while disconnected', () => {
+    const { queryByRole } = openSteps([step({ accountConnected: false })]);
+    expect(queryByRole('button', { name: 'Refresh models' })).toBeNull();
+  });
+});

package/src/components/StepConfig.svelte

@@ -0,0 +1,247 @@
+<!-- Generic per-step backend/model/options config form (content only).
+  The application wraps this in a Dock and owns all effects (loading model
+  lists, refreshing controls, connecting accounts); this component only
+  renders one fieldset per step and forwards user intent through
+  app-supplied callbacks. It never fetches, spawns, or stores anything. -->
+<script module lang="ts">
+  import type { SessionConfigOption } from '../../index.js';
+
+  export interface StepBackendOption {
+    value: string;
+    name: string;
+  }
+
+  export interface StepModelOption {
+    value: string;
+    name: string;
+  }
+
+  export interface StepData {
+    id: string;
+    label: string;
+    backendValue: string;
+    backendOptions: StepBackendOption[];
+    backendPlaceholder: string;
+    accountConnected: boolean;
+    accountBusy: boolean;
+    configurationError?: string | null;
+    modelValue: string;
+    modelOptions: StepModelOption[];
+    extraOptions: SessionConfigOption[];
+    extraValues: Record<string, string | boolean>;
+  }
+</script>
+
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type {
+    ConfigChoice,
+    ConfigGroup,
+    SessionConfigOption
+  } from '../../index.js';
+
+  let {
+    steps,
+    refreshing = false,
+    onSelectBackend,
+    onSelectModel,
+    onSelectOption,
+    onRefresh,
+    accountSlot,
+    headerCopy,
+    footerSlot
+  }: {
+    steps: StepData[];
+    refreshing?: boolean;
+    onSelectBackend: (id: string, value: string) => void;
+    onSelectModel: (id: string, value: string) => void;
+    onSelectOption: (
+      id: string,
+      option: SessionConfigOption,
+      value: string | boolean
+    ) => void;
+    onRefresh: (id: string) => void;
+    accountSlot?: Snippet<[{ step: string }]>;
+    headerCopy?: Snippet;
+    footerSlot?: Snippet;
+  } = $props();
+
+  // Flatten grouped select choices while preserving order.
+  function choices(option: SessionConfigOption | undefined): ConfigChoice[] {
+    if (option?.type !== 'select') return [];
+    return option.options.flatMap((entry) =>
+      'options' in entry
+        ? (entry as ConfigGroup).options
+        : [entry as ConfigChoice]
+    );
+  }
+
+  // Drop the model control defensively; it has its own dedicated row.
+  function extraOptions(step: StepData): SessionConfigOption[] {
+    return step.extraOptions.filter(
+      (item) => item.category !== 'model' && item.id !== 'model'
+    );
+  }
+
+  function selectedValue(
+    step: StepData,
+    option: SessionConfigOption
+  ): string | boolean {
+    return step.extraValues[option.id] ?? option.currentValue;
+  }
+</script>
+
+{#if headerCopy}
+  <div class="ccht-steps-copy">{@render headerCopy()}</div>
+{/if}
+
+{#each steps as step (step.id)}
+  <fieldset class="ccht-step">
+    <legend>{step.label}</legend>
+    <label class="ccht-step-label" for={`ccht-step-${step.id}-assistant`}>
+      {step.label} assistant
+    </label>
+    <select
+      id={`ccht-step-${step.id}-assistant`}
+      class="ccht-step-select"
+      value={step.backendValue}
+      disabled={step.accountBusy}
+      onchange={(event) => onSelectBackend(step.id, event.currentTarget.value)}
+    >
+      <option value="">{step.backendPlaceholder}</option>
+      {#each step.backendOptions as backend (backend.value)}
+        <option value={backend.value}>{backend.name}</option>
+      {/each}
+    </select>
+    {#if accountSlot && !step.accountConnected}
+      {@render accountSlot({ step: step.id })}
+    {:else}
+      <label class="ccht-step-label" for={`ccht-step-${step.id}-model`}>
+        {step.label} model
+      </label>
+      <select
+        id={`ccht-step-${step.id}-model`}
+        class="ccht-step-select"
+        value={step.modelValue}
+        onchange={(event) => onSelectModel(step.id, event.currentTarget.value)}
+      >
+        {#if step.modelOptions.length}
+          {#each step.modelOptions as model (model.value)}
+            <option value={model.value}>{model.name}</option>
+          {/each}
+        {:else if step.modelValue}
+          <option value={step.modelValue}>{step.modelValue}</option>
+        {:else}
+          <option value="" disabled>No model</option>
+        {/if}
+      </select>
+      {#each extraOptions(step) as item (item.id)}
+        <label
+          class="ccht-step-label"
+          for={`ccht-step-${step.id}-option-${item.id}`}
+          title={item.description}
+        >
+          {item.name}
+        </label>
+        {#if item.type === 'select'}
+          <select
+            id={`ccht-step-${step.id}-option-${item.id}`}
+            class="ccht-step-select"
+            value={String(selectedValue(step, item))}
+            disabled={refreshing}
+            onchange={(event) =>
+              onSelectOption(step.id, item, event.currentTarget.value)}
+          >
+            {#each choices(item) as choice (choice.value)}
+              <option value={choice.value}>{choice.name}</option>
+            {/each}
+          </select>
+        {:else if item.type === 'boolean'}
+          <input
+            id={`ccht-step-${step.id}-option-${item.id}`}
+            class="ccht-step-check"
+            type="checkbox"
+            checked={Boolean(selectedValue(step, item))}
+            disabled={refreshing}
+            onchange={(event) =>
+              onSelectOption(step.id, item, event.currentTarget.checked)}
+          />
+        {/if}
+      {/each}
+      {#if step.accountConnected}
+        <button
+          type="button"
+          class="ccht-step-refresh"
+          disabled={refreshing}
+          onclick={() => onRefresh(step.id)}
+        >
+          {refreshing ? 'Loading controls…' : 'Refresh models'}
+        </button>
+        {#if step.configurationError}
+          <span class="ccht-step-error" role="alert">
+            {step.configurationError}
+          </span>
+        {/if}
+      {/if}
+    {/if}
+  </fieldset>
+{/each}
+
+{#if footerSlot}
+  {@render footerSlot()}
+{/if}
+
+<style>
+  .ccht-steps-copy {
+    margin: 0;
+    font-size: 0.85rem;
+    line-height: 1.5;
+    color: var(--ccht-muted, #8fa0b7);
+  }
+  .ccht-step {
+    display: grid;
+    gap: 0.45rem;
+    margin: 0;
+    border: 1px solid var(--ccht-border, #30405c);
+    border-radius: 0.5rem;
+    padding: 0.75rem;
+  }
+  .ccht-step legend {
+    font-weight: 700;
+    padding: 0 0.4rem;
+  }
+  .ccht-step-label {
+    font-size: 0.75rem;
+    color: var(--ccht-muted, #8fa0b7);
+  }
+  .ccht-step-select {
+    min-width: 0;
+    width: 100%;
+    padding: 0.5rem;
+    border: 1px solid var(--ccht-select-border, #405779);
+    border-radius: 0.4rem;
+    background: var(--ccht-select-bg, #070f1b);
+    color: var(--ccht-fg-bright, #e2eaf5);
+  }
+  .ccht-step-check {
+    width: 1rem;
+    min-height: 1rem;
+    margin: 0;
+    accent-color: var(--ccht-accent-check, #34d399);
+  }
+  .ccht-step-refresh {
+    min-height: 2.2rem;
+    padding: 0.4rem 0.6rem;
+    border: 1px solid var(--ccht-border, #30405c);
+    border-radius: 0.4rem;
+    background: var(--ccht-tab-bg, #111c2d);
+    color: var(--ccht-fg, #bdc8d7);
+    font-size: 0.7rem;
+    font-weight: 750;
+    cursor: pointer;
+  }
+  .ccht-step-error {
+    color: var(--ccht-error, #fda4af);
+    font-size: 0.7rem;
+  }
+</style>

package/src/dock.test.ts

@@ -0,0 +1,226 @@
+/** Conformance tests for the framework-free dock state (web/src/dock.ts).
+ *
+ * These mirror the Rust `src/dock.rs` unit tests case-for-case: both
+ * implementations share the id rules, error names, open/placement
+ * semantics, focus-token lifecycle, and serialization contract. Fixtures
+ * only; no DOM, network, or storage.
+ */
+import { describe, expect, test } from 'bun:test';
+import { createDockManager, validateDockId } from './dock.ts';
+
+describe('validateDockId', () => {
+  test('accepts lowercase, digits, dash, underscore', () => {
+    for (const id of ['a', 'scope', 'models-panel', 'chat_2', 'a-b_c9']) {
+      expect(validateDockId(id)).toBeNull();
+    }
+  });
+
+  test('accepts exactly 64 characters', () => {
+    expect(validateDockId('a'.repeat(64))).toBeNull();
+  });
+
+  test('rejects empty, non-string, too long, and bad characters', () => {
+    expect(validateDockId('')).not.toBeNull();
+    expect(validateDockId('a'.repeat(65))).not.toBeNull();
+    for (const id of ['Scope', 'has space', 'dot.name', 'slash/x', 'uniçode', 'CAPS'] as unknown[]) {
+      expect(validateDockId(id)).not.toBeNull();
+    }
+    for (const id of [null, undefined, 42, true, {}, []] as unknown[]) {
+      expect(validateDockId(id)).not.toBeNull();
+    }
+  });
+
+  test('never throws', () => {
+    expect(() => validateDockId(Symbol('x') as unknown as string)).not.toThrow();
+  });
+});
+
+describe('register', () => {
+  test('registers closed docks of every kind and placement', () => {
+    const docks = createDockManager();
+    docks.register('chat', 'chat', 'left');
+    docks.register('cfg', 'config', 'right');
+    docks.register('misc', 'custom', 'bottom');
+    docks.register('inline', 'custom', 'inline');
+    expect(docks.isOpen('chat')).toBe(false);
+    expect(docks.placement('cfg')).toBe('right');
+  });
+
+  test('rejects duplicates, malformed ids, kinds, and placements', () => {
+    const docks = createDockManager();
+    docks.register('scope', 'config', 'left');
+    expect(() => docks.register('scope', 'config', 'left')).toThrow('DuplicateDock: scope');
+    expect(() => docks.register('', 'config', 'left')).toThrow();
+    expect(() => docks.register('other', 'bogus' as never, 'left')).toThrow('invalid dock kind');
+    expect(() => docks.register('other', 'config', 'top' as never)).toThrow('invalid dock placement');
+  });
+});
+
+describe('open/close/toggle', () => {
+  test('open and close are idempotent; toggle flips and returns state', () => {
+    const docks = createDockManager();
+    docks.register('a', 'chat', 'left');
+    docks.open('a');
+    docks.open('a');
+    expect(docks.isOpen('a')).toBe(true);
+    expect(docks.toggle('a')).toBe(false);
+    expect(docks.toggle('a')).toBe(true);
+    docks.close('a');
+    docks.close('a');
+    expect(docks.isOpen('a')).toBe(false);
+  });
+
+  test('unknown ids throw UnknownDock on every accessor', () => {
+    const docks = createDockManager();
+    for (const fn of [
+      () => docks.open('nope'),
+      () => docks.openWithFocus('nope', 't'),
+      () => docks.close('nope'),
+      () => docks.toggle('nope'),
+      () => docks.isOpen('nope'),
+      () => docks.placement('nope'),
+      () => docks.setPlacement('nope', 'left'),
+    ]) {
+      expect(fn).toThrow('UnknownDock: nope');
+    }
+  });
+
+  test('docks are independent and openDocks preserves registration order', () => {
+    const docks = createDockManager();
+    docks.register('one', 'chat', 'left');
+    docks.register('two', 'config', 'right');
+    docks.register('three', 'custom', 'inline');
+    docks.open('three');
+    docks.open('one');
+    expect(docks.openDocks()).toEqual(['one', 'three']);
+    docks.close('one');
+    expect(docks.openDocks()).toEqual(['three']);
+  });
+
+  test('setPlacement moves only the target dock', () => {
+    const docks = createDockManager();
+    docks.register('a', 'chat', 'left');
+    docks.register('b', 'chat', 'left');
+    docks.setPlacement('a', 'bottom');
+    expect(docks.placement('a')).toBe('bottom');
+    expect(docks.placement('b')).toBe('left');
+    expect(() => docks.setPlacement('a', 'nowhere' as never)).toThrow('invalid dock placement');
+  });
+
+  test('closeAll closes everything but keeps the staged token', () => {
+    const docks = createDockManager();
+    docks.register('a', 'chat', 'left');
+    docks.register('b', 'config', 'right');
+    docks.openWithFocus('a', 'tok');
+    docks.open('b');
+    docks.closeAll();
+    expect(docks.openDocks()).toEqual([]);
+    expect(docks.takeFocusToken()).toBe('tok');
+  });
+});
+
+describe('focus token', () => {
+  test('openWithFocus stages, plain open preserves, take consumes once', () => {
+    const docks = createDockManager();
+    docks.register('a', 'chat', 'left');
+    expect(docks.takeFocusToken()).toBeNull();
+    docks.openWithFocus('a', 'first');
+    docks.open('a');
+    expect(docks.takeFocusToken()).toBe('first');
+    expect(docks.takeFocusToken()).toBeNull();
+    docks.openWithFocus('a', 'second');
+    docks.close('a');
+    expect(docks.takeFocusToken()).toBe('second');
+  });
+
+  test('empty tokens are rejected before lookup', () => {
+    const docks = createDockManager();
+    docks.register('a', 'chat', 'left');
+    expect(() => docks.openWithFocus('a', '')).toThrow('invalid focus token');
+    expect(() => docks.openWithFocus('ghost', '')).toThrow('invalid focus token');
+    expect(docks.takeFocusToken()).toBeNull();
+  });
+
+  test('managers are independent', () => {
+    const first = createDockManager();
+    const second = createDockManager();
+    first.register('a', 'chat', 'left');
+    second.register('a', 'chat', 'left');
+    first.openWithFocus('a', 'tok');
+    expect(second.isOpen('a')).toBe(false);
+    expect(second.takeFocusToken()).toBeNull();
+  });
+});
+
+describe('serialize/restore', () => {
+  test('round-trips open state and placement without the focus token', () => {
+    const docks = createDockManager();
+    docks.register('scope', 'config', 'left');
+    docks.register('models', 'config', 'right');
+    docks.openWithFocus('scope', 'tok');
+    docks.setPlacement('models', 'bottom');
+    const snapshot = docks.serialize();
+    expect(snapshot).not.toContain('tok');
+    const revived = createDockManager();
+    revived.restore(snapshot);
+    expect(revived.isOpen('scope')).toBe(true);
+    expect(revived.isOpen('models')).toBe(false);
+    expect(revived.placement('models')).toBe('bottom');
+    expect(revived.takeFocusToken()).toBeNull();
+  });
+
+  test('empty managers round-trip', () => {
+    const revived = createDockManager();
+    revived.restore(createDockManager().serialize());
+    expect(revived.openDocks()).toEqual([]);
+  });
+
+  test('malformed snapshots throw and leave state untouched', () => {
+    const malformed = [
+      'not json',
+      '{}',
+      '[null]',
+      '["scope"]',
+      '[{}]',
+      '[{"id":"","kind":"config","placement":"left","open":false}]',
+      '[{"id":"UPPER","kind":"config","placement":"left","open":false}]',
+      '[{"id":"a","kind":"bogus","placement":"left","open":false}]',
+      '[{"id":"a","kind":"config","placement":"top","open":false}]',
+      '[{"id":"a","kind":"config","placement":"left"}]',
+      '[{"id":"a","kind":"config","placement":"left","open":"yes"}]',
+      '[{"id":"a","kind":"config","placement":"left","open":false},{"id":"a","kind":"chat","placement":"right","open":true}]',
+    ];
+    for (const snapshot of malformed) {
+      const docks = createDockManager();
+      docks.register('keep', 'chat', 'left');
+      docks.open('keep');
+      expect(() => docks.restore(snapshot)).toThrow(/^invalid dock snapshot/);
+      expect(docks.isOpen('keep')).toBe(true);
+      expect(docks.openDocks()).toEqual(['keep']);
+    }
+  });
+
+  test('restore replaces everything and clears the staged token', () => {
+    const docks = createDockManager();
+    docks.register('stale', 'chat', 'left');
+    docks.openWithFocus('stale', 'tok');
+    docks.restore('[{"id":"fresh","kind":"custom","placement":"inline","open":true}]');
+    expect(() => docks.isOpen('stale')).toThrow('UnknownDock: stale');
+    expect(docks.isOpen('fresh')).toBe(true);
+    expect(docks.takeFocusToken()).toBeNull();
+  });
+
+  test('error messages never carry focus tokens', () => {
+    const docks = createDockManager();
+    docks.register('a', 'chat', 'left');
+    docks.openWithFocus('a', 'secret-token');
+    for (const fn of [() => docks.open('ghost'), () => docks.toggle('ghost'), () => docks.restore('[1]')]) {
+      try {
+        fn();
+        expect.unreachable();
+      } catch (error) {
+        expect(String(error)).not.toContain('secret-token');
+      }
+    }
+  });
+});