@corbet-labs/ccht 0.2.0 → 0.2.2

package/src/auth.ts

@@ -0,0 +1,149 @@
+/** Typed mirrors of the Rust auth surface (`ccht::auth`) for web consumers.
+ *
+ * The conversation model stays in Rust/Wasm; these types only describe *who*
+ * may act. Transport, login ceremonies, credential storage, polling and
+ * product copy belong to the embedding application. Nothing here touches the
+ * DOM, performs network I/O, or spawns processes: effects run in the
+ * application backend and reach the browser through app-supplied async
+ * callbacks and explicit service keys.
+ */
+
+/** Login state of one provider, mirroring `ccht::auth::AuthState`.
+ *
+ * The shape round-trips the Rust `snake_case` JSON byte-for-byte, so a state
+ * serialized by Rust deserializes here and vice versa:
+ * - `Unknown` becomes the string `"unknown"`.
+ * - `Unauthenticated` becomes the string `"unauthenticated"`.
+ * - `Authenticated { account }` becomes `{"authenticated": {"account": ...}}`,
+ *   where `account` is a display-only label (string), `null`, or absent.
+ *   The label is provenance for the UI and never an authentication proof.
+ */
+export type AuthState = 'unknown' | 'unauthenticated' | { authenticated: { account?: string | null } };
+
+/** Whether routine work may proceed without prompting for login first. Mirrors `AuthState::authenticated`. */
+export function isAuthenticated(state: AuthState): boolean {
+  return typeof state === 'object' && state !== null && 'authenticated' in state;
+}
+
+/** Display-only account label (username, email, or subscription name), or null when absent. Never a secret. */
+export function authAccount(state: AuthState): string | null {
+  if (typeof state === 'object' && state !== null && 'authenticated' in state) {
+    return state.authenticated.account ?? null;
+  }
+  return null;
+}
+
+/** Whether a decoded JSON value has the exact Rust `AuthState` shape. Unknown fields inside the inner object are ignored, matching serde's default. */
+export function isAuthState(value: unknown): value is AuthState {
+  try {
+    parseAuthState(value);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+/** Validate a decoded JSON value as the Rust `AuthState` shape. Throws a `TypeError` when the shape differs. */
+export function parseAuthState(value: unknown): AuthState {
+  if (value === 'unknown' || value === 'unauthenticated') {
+    return value;
+  }
+  if (typeof value === 'object' && value !== null && !Array.isArray(value)) {
+    const keys = Object.keys(value);
+    if (keys.length === 1 && keys[0] === 'authenticated') {
+      const inner = (value as { authenticated: unknown }).authenticated;
+      if (typeof inner === 'object' && inner !== null && !Array.isArray(inner)) {
+        const account = (inner as { account?: unknown }).account;
+        if (account === undefined) {
+          return { authenticated: {} };
+        }
+        if (account === null || typeof account === 'string') {
+          return { authenticated: { account } };
+        }
+      }
+    }
+  }
+  throw new TypeError('invalid AuthState');
+}
+
+/** Device-code challenge as exchanged during a provider login ceremony.
+ *
+ * Field names stay `snake_case` to match the wire format applications pass
+ * between their backend and the browser. The backend remains authoritative:
+ * it issues the challenge, pins any provider-specific endpoint, and polls
+ * for completion. The browser only displays a validated challenge and never
+ * invents one.
+ */
+export interface Challenge {
+  verification_url: string;
+  user_code: string;
+}
+
+const CHALLENGE_CODE_PATTERN = /^[A-Za-z0-9-]+$/;
+const CHALLENGE_CODE_MAX_LENGTH = 64;
+
+/** Whether a value is a renderable device-code challenge.
+ *
+ * Accepts any `https:` URL with a host (applications may narrow this
+ * further, for example by pinning the provider's device endpoint) and a
+ * non-empty code of up to 64 ASCII alphanumeric or `-` characters. URLs with
+ * embedded credentials are rejected. Never throws; validate before rendering
+ * a challenge as a link or code.
+ */
+export function validateChallenge(value: unknown): value is Challenge {
+  if (typeof value !== 'object' || value === null || Array.isArray(value)) {
+    return false;
+  }
+  const { verification_url, user_code } = value as Record<string, unknown>;
+  if (typeof verification_url !== 'string' || typeof user_code !== 'string') {
+    return false;
+  }
+  if (user_code.length < 1 || user_code.length > CHALLENGE_CODE_MAX_LENGTH) {
+    return false;
+  }
+  if (!CHALLENGE_CODE_PATTERN.test(user_code)) {
+    return false;
+  }
+  let url: URL;
+  try {
+    url = new URL(verification_url);
+  } catch {
+    return false;
+  }
+  if (url.protocol !== 'https:' || url.hostname === '') {
+    return false;
+  }
+  if (url.username !== '' || url.password !== '') {
+    return false;
+  }
+  return true;
+}
+
+/** Opaque credential, mirroring `ccht::auth::Credential`.
+ *
+ * Stores treat both fields as opaque. `account` is display-only; `secret`
+ * holds the raw secret bytes. Encode at the application boundary (for
+ * example with `TextEncoder` or base64) when the backing store needs text,
+ * and never write secrets to logs, errors, or fixtures.
+ */
+export interface Credential {
+  account: string;
+  secret: Uint8Array;
+}
+
+/** Application-supplied credential persistence, mirroring `ccht::auth::CredentialsProvider`.
+ *
+ * One method triple per service key. Service keys are application-defined
+ * opaque strings (never ambient authority); native applications back this
+ * with the OS keychain and web applications with origin-scoped browser
+ * storage. Removing a missing entry succeeds. Implementations reject the
+ * promise when the backing store fails.
+ */
+export interface CredentialsProvider {
+  /** Read stored credentials, if any, for a service key. */
+  readCredentials(service: string): Promise<Credential | null>;
+  /** Persist credentials for a service key, replacing any previous entry. */
+  writeCredentials(service: string, credential: Credential): Promise<void>;
+  /** Remove stored credentials for a service key. Missing entries are not an error. */
+  deleteCredentials(service: string): Promise<void>;
+}

package/src/components/AccountConnection.svelte

@@ -0,0 +1,201 @@
+<!-- Product-neutral account connector. The application backend owns all effects
+  (starting device flows, polling logins, storing keys, signing out); this
+  component only renders state and forwards user intent through app-supplied
+  async callbacks. It never spawns agents, polls, or touches credentials. -->
+<script lang="ts">
+  import {
+    authAccount,
+    isAuthenticated,
+    validateChallenge,
+    type AuthState,
+    type Challenge
+  } from '../auth.js';
+
+  interface AccountRef {
+    id: string;
+    label: string;
+    kind: 'chatgpt' | 'opencode_go' | (string & {});
+  }
+
+  let {
+    account,
+    state: authState = 'unknown' as AuthState,
+    busy = false,
+    challenge = null as Challenge | null,
+    onStart,
+    onCancel,
+    onKeySubmit,
+    onDisconnect
+  }: {
+    account: AccountRef;
+    state: AuthState;
+    busy: boolean;
+    challenge?: Challenge | null;
+    onStart: () => void | Promise<void>;
+    onCancel: () => void | Promise<void>;
+    onKeySubmit: (key: string) => void | Promise<void>;
+    onDisconnect?: () => void | Promise<void>;
+  } = $props();
+
+  let key = $state('');
+  let copyError = $state('');
+
+  // Renamed locally: a binding called `state` would shadow the `$state` rune analysis.
+  const authenticated: boolean = $derived(isAuthenticated(authState));
+  const accountName: string | null = $derived(authAccount(authState));
+  const validChallenge: Challenge | null = $derived(
+    challenge != null && validateChallenge(challenge) ? challenge : null
+  );
+  const isDeviceCodeAccount: boolean = $derived(account.kind === 'chatgpt');
+  const isKeyAccount: boolean = $derived(account.kind === 'opencode_go');
+  const keyInputId: string = $derived(`ccht-key-${account.id.replace(/[^a-zA-Z0-9_-]/g, '-')}`);
+  const canSubmitKey: boolean = $derived(key.trim().length >= 8 && !busy);
+
+  // Callbacks run application effects; the app surfaces their failures
+  // through its own operation state, so a rejection here stays silent.
+  function invoke(action: () => void | Promise<void>): void {
+    try {
+      const result = action();
+      if (result instanceof Promise) {
+        result.catch(() => {});
+      }
+    } catch {
+      // Handled by the application through its own operation state.
+    }
+  }
+
+  function submitKey(event: SubmitEvent): void {
+    event.preventDefault();
+    const value = key.trim();
+    // Clear immediately so the secret never lingers in component state.
+    key = '';
+    if (value.length < 8) {
+      return;
+    }
+    invoke(() => onKeySubmit(value));
+  }
+
+  async function copyAndContinue(): Promise<void> {
+    if (!validChallenge) {
+      return;
+    }
+    // Open during the click so browsers do not block the sign-in window after copying.
+    if (typeof window !== 'undefined') {
+      window.open(validChallenge.verification_url, '_blank', 'noopener,noreferrer');
+    }
+    try {
+      await navigator.clipboard.writeText(validChallenge.user_code);
+      copyError = '';
+    } catch {
+      copyError = 'Could not copy automatically. Copy the code above into the sign-in page.';
+    }
+  }
+</script>
+
+<section class="ccht-account" aria-label={`${account.label} connection`}>
+  {#if authenticated}
+    <p class="ccht-status" role="status">Connected{#if accountName} · {accountName}{/if}</p>
+    <button
+      type="button"
+      class="ccht-button ccht-disconnect"
+      disabled={busy}
+      onclick={() => invoke(onDisconnect ?? onCancel)}
+    >
+      Disconnect
+    </button>
+  {:else if authState === 'unknown'}
+    <p class="ccht-status" role="status">Checking {account.label} connection status…</p>
+    {#if busy}
+      <button type="button" class="ccht-button ccht-cancel" onclick={() => invoke(onCancel)}>
+        Cancel
+      </button>
+    {/if}
+  {:else if isDeviceCodeAccount}
+    {#if validChallenge}
+      <div class="ccht-challenge" aria-live="polite">
+        <p class="ccht-hint">Enter this code on the {account.label} sign-in page:</p>
+        <code class="ccht-code">{validChallenge.user_code}</code>
+        <button type="button" class="ccht-button" disabled={busy} onclick={() => void copyAndContinue()}>
+          Copy code and continue
+        </button>
+        <p>
+          <a
+            class="ccht-link"
+            href={validChallenge.verification_url}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Continue to {account.label}
+          </a>
+        </p>
+        {#if copyError}<p class="ccht-error" role="alert">{copyError}</p>{/if}
+      </div>
+    {:else if busy}
+      <p class="ccht-status" role="status">Starting account connection…</p>
+    {:else}
+      <p class="ccht-hint">Sign in with your {account.label} account.</p>
+      <button type="button" class="ccht-button" onclick={() => invoke(onStart)}>
+        Sign in to {account.label}
+      </button>
+    {/if}
+    {#if busy}
+      <button type="button" class="ccht-button ccht-cancel" onclick={() => invoke(onCancel)}>
+        Cancel
+      </button>
+    {/if}
+  {:else if isKeyAccount}
+    <form class="ccht-keyform" onsubmit={submitKey}>
+      <label class="ccht-label" for={keyInputId}>
+        {account.label} account key
+        <input
+          id={keyInputId}
+          class="ccht-input"
+          type="password"
+          autocomplete="off"
+          spellcheck="false"
+          maxlength="4096"
+          bind:value={key}
+          disabled={busy}
+        />
+      </label>
+      <button type="submit" class="ccht-button" disabled={!canSubmitKey}>
+        Connect {account.label}
+      </button>
+    </form>
+    {#if busy}
+      <button type="button" class="ccht-button ccht-cancel" onclick={() => invoke(onCancel)}>
+        Cancel
+      </button>
+    {/if}
+  {:else}
+    <p class="ccht-status" role="status">Not connected</p>
+    <p class="ccht-hint">Sign in with your {account.label} account.</p>
+    <button type="button" class="ccht-button" disabled={busy} onclick={() => invoke(onStart)}>
+      Sign in to {account.label}
+    </button>
+    {#if busy}
+      <button type="button" class="ccht-button ccht-cancel" onclick={() => invoke(onCancel)}>
+        Cancel
+      </button>
+    {/if}
+  {/if}
+</section>
+
+<style>
+  .ccht-account {
+    color: var(--ccht-fg, inherit);
+  }
+  .ccht-status,
+  .ccht-hint {
+    color: var(--ccht-muted, inherit);
+  }
+  .ccht-error {
+    color: var(--ccht-error, #b91c1c);
+  }
+  .ccht-code {
+    background-color: var(--ccht-code-bg, transparent);
+  }
+  .ccht-link {
+    color: var(--ccht-accent, inherit);
+  }
+</style>

package/src/components/Dock.svelte

@@ -0,0 +1,172 @@
+<!-- Product-neutral edge rail. The application owns all effects (dock state,
+  persistence, focus targets beyond this panel); this component only renders
+  the tab and panel chrome and forwards user intent through app-supplied
+  open/close callbacks. It never fetches, spawns, or stores anything. -->
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  let {
+    side = 'left',
+    title,
+    open,
+    onClose,
+    onOpen,
+    tabLabel,
+    tabSummary = '',
+    closeLabel,
+    panelId,
+    children
+  }: {
+    side: 'left' | 'right';
+    title: string;
+    open: boolean;
+    onClose: () => void;
+    onOpen: () => void;
+    tabLabel: string;
+    tabSummary?: string;
+    closeLabel?: string;
+    panelId: string;
+    children: Snippet;
+  } = $props();
+
+  let panelEl: HTMLElement | undefined = $state(undefined);
+  let tabEl: HTMLButtonElement | undefined = $state(undefined);
+  let wasOpen = $state(false);
+  let prevFocus: HTMLElement | null = $state(null);
+  const dismissLabel = $derived(closeLabel ?? `Close ${title}`);
+
+  function handleTabClick(event: MouseEvent) {
+    prevFocus = event.currentTarget as HTMLElement;
+    onOpen();
+  }
+
+  $effect(() => {
+    if (open && !wasOpen) {
+      wasOpen = true;
+      prevFocus ??= document.activeElement as HTMLElement | null;
+      requestAnimationFrame(() => {
+        // First visible, enabled control wins; hidden or disabled nodes
+        // never take focus. Fixed panels have no offsetParent, so filter
+        // on client rects instead.
+        const target = [...(panelEl?.querySelectorAll<HTMLElement>(
+          'button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), a[href], [tabindex]:not([tabindex="-1"])'
+        ) ?? [])].find((node) => node.getClientRects().length > 0) ?? panelEl;
+        target?.focus();
+      });
+    } else if (!open && wasOpen) {
+      wasOpen = false;
+      const restore = prevFocus?.isConnected ? prevFocus : null;
+      prevFocus = null;
+      requestAnimationFrame(() => {
+        (restore ?? tabEl)?.focus?.();
+      });
+    }
+  });
+
+  $effect(() => {
+    if (panelEl) (panelEl as HTMLElement & { inert: boolean }).inert = !open;
+  });
+
+  function onKeydown(event: KeyboardEvent) {
+    if (event.key === 'Escape' && open) onClose();
+  }
+</script>
+
+<svelte:window onkeydown={onKeydown} />
+
+{#if !open}
+  <button
+    bind:this={tabEl}
+    type="button"
+    class="ccht-dock-tab"
+    data-side={side}
+    aria-expanded="false"
+    aria-controls={panelId}
+    aria-label={tabSummary ? `Open ${title}: ${tabSummary}` : `Open ${title}`}
+    onclick={handleTabClick}
+  ><span class="ccht-dock-tab-text">{tabLabel} · {tabSummary || title}</span></button>
+{/if}
+
+<div
+  bind:this={panelEl}
+  id={panelId}
+  class="ccht-dock-panel"
+  data-side={side}
+  data-open={open ? 'true' : 'false'}
+  role="dialog"
+  aria-label={title}
+  aria-hidden={!open}
+  tabindex="-1"
+>
+  <div class="ccht-dock-head">
+    <div class="ccht-dock-title"><h2>{title}</h2>{#if tabSummary}<p>{tabSummary}</p>{/if}</div>
+    <button type="button" class="ccht-dock-close" aria-label={dismissLabel} onclick={onClose}>Close</button>
+  </div>
+  <div class="ccht-dock-body">{@render children()}</div>
+</div>
+
+<style>
+  .ccht-dock-tab {
+    position: fixed; top: 50%; z-index: 80; transform: translateY(-50%);
+    max-height: min(60vh, 30rem); max-width: 2.4rem; padding: 0.7rem 0.4rem;
+    display: flex; align-items: center; justify-content: center;
+    border: 1px solid var(--ccht-border, #30405c);
+    color: var(--ccht-fg, #c2cede);
+    background: var(--ccht-tab-bg, #111c2df2);
+    font: 800 0.68rem ui-monospace, monospace; cursor: pointer;
+    writing-mode: vertical-rl; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+  }
+  .ccht-dock-tab[data-side='left'] { left: 0; border-left: 0; border-radius: 0 0.5rem 0.5rem 0; }
+  .ccht-dock-tab[data-side='right'] { right: 0; border-right: 0; border-radius: 0.5rem 0 0 0.5rem; }
+  .ccht-dock-tab:hover {
+    border-color: var(--ccht-accent, #53708f);
+    color: var(--ccht-fg-bright, #e2eaf5);
+    background: var(--ccht-tab-bg-hover, #17243af2);
+  }
+  .ccht-dock-tab-text { overflow: hidden; text-overflow: ellipsis; }
+  .ccht-dock-panel {
+    position: fixed; top: 0; bottom: 0; z-index: 70;
+    width: min(30rem, 100vw); display: flex; flex-direction: column;
+    background: var(--ccht-panel-bg, #0d1625);
+    color: var(--ccht-fg, #d8e2f0); visibility: hidden;
+    transition: transform 0.2s ease, visibility 0s linear 0.2s;
+  }
+  .ccht-dock-panel[data-side='left'] {
+    left: 0; border-right: 1px solid var(--ccht-border, #223049); transform: translateX(-102%);
+  }
+  .ccht-dock-panel[data-side='right'] {
+    right: 0; border-left: 1px solid var(--ccht-border, #223049); transform: translateX(102%);
+  }
+  .ccht-dock-panel[data-open='true'] { transform: none; visibility: visible; transition: transform 0.2s ease; }
+  .ccht-dock-panel[data-open='false'] { visibility: hidden; }
+  .ccht-dock-head {
+    display: flex; align-items: center; justify-content: space-between; gap: 0.8rem;
+    padding: 1rem 1.1rem; border-bottom: 1px solid var(--ccht-border, #223049);
+  }
+  .ccht-dock-title { min-width: 0; }
+  .ccht-dock-title h2 { margin: 0; font-size: 1.02rem; overflow-wrap: anywhere; }
+  .ccht-dock-title p {
+    margin: 0.3rem 0 0; overflow-wrap: anywhere;
+    color: var(--ccht-muted, #8fa0b7); font: 750 0.68rem ui-monospace, monospace;
+  }
+  .ccht-dock-close {
+    flex: 0 0 auto; min-height: 2.5rem; padding: 0.55rem 0.85rem;
+    border: 1px solid var(--ccht-border, #30405c); border-radius: 0.5rem;
+    color: var(--ccht-fg, #c2cede);
+    background: var(--ccht-tab-bg, #111c2d);
+    font-size: 0.72rem; font-weight: 850; cursor: pointer;
+  }
+  .ccht-dock-close:hover {
+    border-color: var(--ccht-accent, #53708f);
+    background: var(--ccht-tab-bg-hover, #17243a);
+  }
+  .ccht-dock-body {
+    flex: 1; min-height: 0; overflow: auto; padding: 1rem 1.1rem;
+    display: grid; gap: 0.85rem; align-content: start;
+  }
+  @media (max-width: 560px) {
+    .ccht-dock-panel { width: 100vw; }
+    .ccht-dock-head, .ccht-dock-body { padding-left: 0.85rem; padding-right: 0.85rem; }
+  }
+  @media (prefers-reduced-motion: reduce) { .ccht-dock-panel { transition: none; } }
+</style>