dsh-task-time-cost 0.0.0-stage → 0.2.8-beta.2

package/src/client/management.tsx

@@ -0,0 +1,246 @@
+import * as React from 'react';
+import type { EstimatorRemote, ManagementAction, ManagementView } from '../shared/wire.ts';
+import { configFields, numericFields, parseConfiguration } from './config.ts';
+import { formatDate, formatDuration, formatMoneyList, formatNumber, formatProfileMetrics, formatState } from './format.ts';
+import { errorInfo, errorText, manageRemote, RemoteCallError } from './remote.ts';
+import type { ClientError } from './remote.ts';
+import type { MessageKey, Translate } from './locale.ts';
+import type { SnapshotStore } from './store.ts';
+
+const pendingLabels: Record<ManagementAction, MessageKey> = {
+  read: 'pendingRead', saveConfig: 'pendingSave', importBaselines: 'pendingImport', export: 'pendingExport', resetCalibration: 'pendingReset',
+};
+const successLabels: Record<ManagementAction, MessageKey> = {
+  read: 'reloaded', saveConfig: 'saved', importBaselines: 'imported', export: 'exported', resetCalibration: 'resetDone',
+};
+
+interface Props { remote: EstimatorRemote; store: SnapshotStore; t: Translate; locale: string }
+
+export function Management({ remote, store, t, locale }: Props) {
+  const id = React.useId();
+  const [data, setData] = React.useState<ManagementView | null>(null);
+  const [draft, setDraft] = React.useState('');
+  const [inputs, setInputs] = React.useState<Record<string, string>>({});
+  const [importText, setImportText] = React.useState('');
+  const [pending, setPending] = React.useState<ManagementAction | null>(null);
+  const [error, setError] = React.useState<ClientError | null>(null);
+  const [validation, setValidation] = React.useState('');
+  const [success, setSuccess] = React.useState<MessageKey | null>(null);
+  const [confirmReset, setConfirmReset] = React.useState(false);
+  const activeRequest = React.useRef<AbortController | null>(null);
+  const downloadAnchor = React.useRef<HTMLAnchorElement>(null);
+  const downloadUrl = React.useRef<string | null>(null);
+  const resetButton = React.useRef<HTMLButtonElement>(null);
+  const advancedSection = React.useRef<HTMLDetailsElement>(null);
+  const jsonSection = React.useRef<HTMLDetailsElement>(null);
+  const jsonInput = React.useRef<HTMLTextAreaElement>(null);
+  const importInput = React.useRef<HTMLTextAreaElement>(null);
+  const focusJson = () => {
+    if (advancedSection.current) advancedSection.current.open = true;
+    if (jsonSection.current) jsonSection.current.open = true;
+    jsonInput.current?.focus();
+  };
+
+  const adopt = React.useCallback((next: ManagementView) => {
+    setData(next);
+    setDraft(JSON.stringify(next.config, null, 2));
+    setInputs(numericFields(next.config));
+    store.configure(next.config);
+  }, [store]);
+
+  const run = React.useCallback(async (action: ManagementAction, payload = '', initial = false) => {
+    if (activeRequest.current) return;
+    const controller = new AbortController();
+    activeRequest.current = controller;
+    setPending(action);
+    setError(null);
+    setValidation('');
+    setSuccess(null);
+    try {
+      const result = await manageRemote(remote, action, payload, controller.signal);
+      if (controller.signal.aborted) return;
+      if (action === 'export') {
+        if (result.exported === undefined) throw new RemoteCallError('EXPORT_EMPTY', '');
+        if (!downloadAnchor.current) throw new RemoteCallError('DOWNLOAD_UNAVAILABLE', '');
+        if (downloadUrl.current) URL.revokeObjectURL(downloadUrl.current);
+        downloadUrl.current = URL.createObjectURL(new Blob([result.exported], { type: 'application/json;charset=utf-8' }));
+        downloadAnchor.current.href = downloadUrl.current;
+        downloadAnchor.current.download = t('exportedFilename');
+        downloadAnchor.current.click();
+      }
+      if (result.data) adopt(result.data);
+      if (action === 'read' && !result.data) throw new RemoteCallError('MANAGEMENT_EMPTY', '');
+      if (action === 'saveConfig' || action === 'importBaselines' || action === 'resetCalibration') store.invalidate();
+      if (!initial) setSuccess(successLabels[action]);
+      if (action === 'resetCalibration') { setConfirmReset(false); resetButton.current?.focus(); }
+    } catch (failure) {
+      if (!controller.signal.aborted) setError(errorInfo(failure));
+    } finally {
+      if (activeRequest.current === controller) {
+        activeRequest.current = null;
+        if (!controller.signal.aborted) setPending(null);
+      }
+    }
+  }, [remote, store, adopt, t]);
+
+  React.useEffect(() => {
+    void run('read', '', true);
+    return () => {
+      activeRequest.current?.abort();
+      activeRequest.current = null;
+      if (downloadUrl.current) URL.revokeObjectURL(downloadUrl.current);
+      downloadUrl.current = null;
+    };
+  }, [run]);
+
+  let parsed: Record<string, unknown> | null = null;
+  try { if (draft) parsed = parseConfiguration(draft); } catch { /* Validation is shown on save; the draft remains editable. */ }
+
+  // Calibration rows are ordered by their newest real observation, so a route
+  // that was never measured sinks below routes with local evidence.
+  const orderedProfiles = [...(data?.profiles ?? [])].sort((left, right) => (right.testedAt ?? 0) - (left.testedAt ?? 0));
+  const shownProfiles = orderedProfiles.slice(0, 8);
+
+  const changeField = (key: string, value: string) => {
+    setInputs((previous) => ({ ...previous, [key]: value }));
+    setSuccess(null);
+    setValidation('');
+    if (parsed && value.trim() && Number.isFinite(Number(value))) setDraft(JSON.stringify({ ...parsed, [key]: Number(value) }, null, 2));
+  };
+  const changeJson = (value: string) => {
+    setDraft(value);
+    setSuccess(null);
+    setValidation('');
+    try { setInputs(numericFields(parseConfiguration(value))); } catch { /* Keep the last valid form values while JSON is being typed. */ }
+  };
+  const save = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    let next: Record<string, unknown>;
+    try { next = parseConfiguration(draft); }
+    catch (failure) {
+      setValidation(t('invalidConfig', { message: failure instanceof TypeError && failure.message === 'CONFIG_OBJECT_REQUIRED' ? t('objectRequired') : failure instanceof Error ? failure.message : t('objectRequired') }));
+      focusJson();
+      return;
+    }
+    for (const field of configFields) {
+      const value = inputs[field.key] ?? '';
+      if (!value.trim() || !Number.isFinite(Number(value))) {
+        setValidation(t('fieldRequired', { field: t(field.label) }));
+        if (advancedSection.current) advancedSection.current.open = true;
+        const control = event.currentTarget.elements.namedItem(field.key);
+        if (control instanceof HTMLElement) control.focus();
+        return;
+      }
+      next[field.key] = Number(value);
+    }
+    void run('saveConfig', JSON.stringify(next));
+  };
+  const beginImport = () => {
+    if (!importText.trim()) { setValidation(t('importRequired')); importInput.current?.focus(); return; }
+    void run('importBaselines', importText);
+  };
+
+  return <section aria-label={t('settings')}>
+    <p className="dte-muted dte-small">{t('settingsHint')}</p>
+    <div className="dte-toolbar">
+      <button type="button" disabled={pending !== null} onClick={() => void run('read')}>{t('read')}</button>
+      {data && <span className="dte-muted dte-small">{t('profiles')}{t('listSeparator')}{formatNumber(data.profiles.length, locale, t)}</span>}
+    </div>
+    <div className="dte-status" role="status" aria-live="polite">{pending ? t(pendingLabels[pending]) : success ? <span className="dte-success">{t(success)}</span> : null}</div>
+    {error && <p className="dte-error" role="alert">{errorText(error, t)}</p>}
+    {validation && <p className="dte-error" role="alert" id={`${id}-validation`}>{validation}</p>}
+    {data?.storage === 'unavailable' && <p className="dte-warn" role="status">{t('storageUnavailable')}</p>}
+    {data && <>
+      <form onSubmit={save} noValidate aria-label={t('config')} aria-describedby={validation ? `${id}-validation` : undefined}>
+        <details ref={advancedSection} className="dte-subsection">
+          <summary>{t('advancedSettings')}</summary>
+          <div className="dte-grid">
+            {configFields.map((field) => <label className="dte-field" key={field.key} htmlFor={`${id}-${field.key}`}>
+              <span>{t(field.label)}</span>
+              <input id={`${id}-${field.key}`} name={field.key} autoComplete="off" type="number" min={field.min} max={field.max} step={field.step}
+                value={inputs[field.key] ?? ''} disabled={pending !== null || !parsed} required
+                onChange={(event) => changeField(field.key, event.currentTarget.value)} />
+            </label>)}
+          </div>
+          <details ref={jsonSection} className="dte-subsection">
+            <summary>{t('advancedJson')}</summary>
+            <p className="dte-muted dte-small" id={`${id}-json-hint`}>{t('advancedHint')}</p>
+            <label className="dte-field" htmlFor={`${id}-json`}>
+              <span className="dte-small">{t('config')}</span>
+              <textarea ref={jsonInput} id={`${id}-json`} name="configuration" autoComplete="off" className="dte-code" rows={12} value={draft} spellCheck={false}
+                disabled={pending !== null} aria-describedby={`${id}-json-hint`} onChange={(event) => changeJson(event.currentTarget.value)} />
+            </label>
+          </details>
+        </details>
+        <div className="dte-actions"><button className="dte-primary" type="submit" disabled={pending !== null}>{t('save')}</button></div>
+      </form>
+      <details className="dte-subsection">
+        <summary>{t('performanceProfiles')}</summary>
+        <p className="dte-muted dte-small">{t('profilesHint')}</p>
+        {!orderedProfiles.length ? <p className="dte-muted">{t('noProfiles')}</p> : <ul className="dte-profiles">
+          {shownProfiles.map((profile) => {
+            const metrics = formatProfileMetrics(profile, locale, t);
+            const buckets = [profile.inputBucket, profile.cacheBucket, profile.concurrencyBucket].filter((value): value is string => !!value && value !== 'unknown');
+            // Historical unresolved buckets keep their recorded identity segment, so two
+            // rows of the same model stay distinguishable; resolved endpoints use a suffix.
+            const fingerprint = profile.endpointFingerprint;
+            const endpointBit = fingerprint && fingerprint !== 'unknown'
+              ? fingerprint.startsWith('unresolved-') ? fingerprint.split('-')[1]?.slice(0, 6) ?? null : fingerprint.slice(-6)
+              : null;
+            const routeBits = [profile.providerId, profile.requestMode, profile.reasoningEffort,
+              profile.serviceTier && profile.serviceTier !== 'unknown' ? profile.serviceTier : null,
+              endpointBit, profile.mixedRoute ? t('mixedRouteShort') : null, ...buckets].filter((value): value is string => !!value);
+            return <li key={profile.key}>
+              <span>{profile.modelId}</span>
+              <span className="dte-muted dte-small">{routeBits.join(t('listSeparator'))}</span>
+              <span className="dte-small dte-tabular">{t('firstText')}{t('labelSeparator')}{metrics.latency}{t('listSeparator')}{t('visibleSpeed')}{t('labelSeparator')}{metrics.speed}</span>
+              <span className="dte-muted dte-small dte-tabular">{metrics.samples}{t('listSeparator')}{metrics.measured}{t('listSeparator')}{metrics.source}</span>
+            </li>;
+          })}
+        </ul>}
+        {orderedProfiles.length > shownProfiles.length && <p className="dte-muted dte-small">{t('profilesShown', { shown: formatNumber(shownProfiles.length, locale, t), total: formatNumber(orderedProfiles.length, locale, t) })}</p>}
+      </details>
+      <details className="dte-subsection">
+        <summary>{t('data')}</summary>
+        <p className="dte-muted dte-small" id={`${id}-import-hint`}>{t('importHint')}</p>
+        <label className="dte-field" htmlFor={`${id}-import`}>
+          <span>{t('importLabel')}</span>
+          <textarea ref={importInput} id={`${id}-import`} name="baselineImport" autoComplete="off" rows={5} value={importText} placeholder={t('importPlaceholder')}
+            disabled={pending !== null} spellCheck={false} aria-describedby={`${id}-import-hint`}
+            onChange={(event) => setImportText(event.currentTarget.value)} />
+        </label>
+        <div className="dte-actions">
+          <button type="button" disabled={pending !== null || !importText.trim()} onClick={beginImport}>{t('import')}</button>
+          <button type="button" disabled={pending !== null} onClick={() => void run('export')}>{t('export')}</button>
+        </div>
+        <div className="dte-actions">
+          <button ref={resetButton} type="button" className="dte-danger" disabled={pending !== null}
+            aria-expanded={confirmReset} aria-controls={`${id}-reset`} onClick={() => setConfirmReset((value) => !value)}>{t('reset')}</button>
+        </div>
+        {confirmReset && <div className="dte-confirm" id={`${id}-reset`} role="group" aria-label={t('reset')}>
+          <p>{t('resetWarning')}</p>
+          <div className="dte-actions">
+            <button type="button" className="dte-danger" disabled={pending !== null} onClick={() => void run('resetCalibration')}>{t('confirmReset')}</button>
+            <button type="button" disabled={pending !== null} onClick={() => { setConfirmReset(false); resetButton.current?.focus(); }}>{t('cancel')}</button>
+          </div>
+        </div>}
+      </details>
+      <details className="dte-subsection">
+        <summary>{t('history')}</summary>
+        {!data.history.length ? <p className="dte-muted">{t('noHistory')}</p> : <div className="dte-table-wrap"><table>
+          <thead><tr><th scope="col">{t('timestamp')}</th><th scope="col">{t('status')}</th><th scope="col">{t('duration')}</th><th scope="col">{t('knownCost')}</th></tr></thead>
+          <tbody>{data.history.slice(-20).reverse().map((item) => <tr key={item.taskKey}>
+            <td>{formatDate(item.startedAt, locale, t)}</td><td>{formatState(item.state, t)}</td>
+            <td>{formatDuration(item.elapsedActiveMs, t)}</td><td>{formatMoneyList(item.knownCost, locale, t)}</td>
+          </tr>)}</tbody>
+        </table></div>}
+      </details>
+      <details className="dte-subsection">
+        <summary>{t('diagnostics')}</summary>
+        {!data.diagnostics.length ? <p className="dte-muted">{t('noDiagnostics')}</p> : <ul>{data.diagnostics.slice(-20).reverse().map((item, index) =>
+          <li key={`${item.time}-${index}`}><span className="dte-muted">{formatDate(item.time, locale, t)}{t('listSeparator')}{item.code}</span><br />{t('rawDetail', { message: item.message })}</li>)}</ul>}
+      </details>
+    </>}
+    <a ref={downloadAnchor} hidden tabIndex={-1} aria-hidden="true" />
+  </section>;
+}

package/src/client/placement.ts

@@ -0,0 +1,26 @@
+export interface PanelAnchor { left: number; top: number; bottom: number }
+export interface PanelSize { width: number; height: number }
+export interface PanelViewport { width: number; height: number; topInset: number; inset?: number; gap?: number }
+export interface PanelPlacement extends PanelSize { left: number; top: number; maxHeight: number }
+
+/** Prefer the native above-trigger seat, flip when needed, then scroll within the larger safe area. */
+export function placeStatPanel(anchor: PanelAnchor, size: PanelSize, viewport: PanelViewport): PanelPlacement {
+  const inset = viewport.inset ?? 12;
+  const gap = viewport.gap ?? 8;
+  const leftEdge = Math.min(inset, viewport.width / 2);
+  const rightEdge = Math.max(leftEdge, viewport.width - inset);
+  const bottomEdge = Math.max(0, viewport.height - inset);
+  const topEdge = Math.min(bottomEdge, Math.max(inset, viewport.topInset));
+  const width = Math.min(size.width, rightEdge - leftEdge);
+  const above = Math.max(0, Math.min(anchor.top - gap, bottomEdge) - topEdge);
+  const below = Math.max(0, bottomEdge - Math.max(anchor.bottom + gap, topEdge));
+  const useAbove = size.height <= above || size.height > below && above >= below;
+  const maxHeight = useAbove ? above : below;
+  const height = Math.min(size.height, maxHeight);
+  const clamp = (value: number, low: number, high: number) => Math.max(low, Math.min(value, high));
+  return {
+    left: clamp(anchor.left, leftEdge, rightEdge - width),
+    top: clamp(useAbove ? anchor.top - gap - height : anchor.bottom + gap, topEdge, bottomEdge - height),
+    width, height, maxHeight,
+  };
+}

package/src/client/remote.ts

@@ -0,0 +1,59 @@
+import type { EstimatorRemote, ManagementAction, ManagementResult, RemoteResult } from '../shared/wire.ts';
+import type { Translate } from './locale.ts';
+
+export class RemoteCallError extends Error {
+  readonly code: string;
+  constructor(code: string, message: string) {
+    super(message);
+    this.code = code;
+    this.name = 'RemoteCallError';
+  }
+}
+export interface ClientError { code: string; message: string }
+
+export function errorInfo(error: unknown): ClientError {
+  if (error instanceof RemoteCallError) return { code: error.code, message: error.message };
+  if (error instanceof Error) return { code: error.name || 'ERROR', message: error.message };
+  return { code: 'ERROR', message: typeof error === 'string' ? error : '' };
+}
+
+export function errorText(error: ClientError, t: Translate): string {
+  if (error.code === 'TIMEOUT') return t('requestTimeout');
+  if (error.code === 'ABORTED') return t('requestCancelled');
+  return t('errorDetail', { message: error.message || t('operationFailed'), code: error.code });
+}
+
+export function unwrapRemote<T>(result: RemoteResult<T>): T {
+  if (!result.ok) throw new RemoteCallError(result.error.code, result.error.message);
+  return result.value;
+}
+
+/** Propagate RPC refusals, thrown transport errors, cancellation, and a bounded timeout. */
+export async function requestRemote<T>(call: (signal: AbortSignal) => Promise<RemoteResult<T>>, parent?: AbortSignal, timeoutMs = 15_000): Promise<T> {
+  const controller = new AbortController();
+  let timer: ReturnType<typeof setTimeout> | undefined;
+  let rejectAbort: ((error: RemoteCallError) => void) | undefined;
+  const aborted = new Promise<never>((_, reject) => { rejectAbort = reject; });
+  const onAbort = () => {
+    controller.abort();
+    rejectAbort?.(new RemoteCallError('ABORTED', ''));
+  };
+  parent?.addEventListener('abort', onAbort, { once: true });
+  try {
+    if (parent?.aborted) throw new RemoteCallError('ABORTED', '');
+    if (timeoutMs > 0) timer = setTimeout(() => {
+      controller.abort();
+      rejectAbort?.(new RemoteCallError('TIMEOUT', ''));
+    }, timeoutMs);
+    return unwrapRemote(await Promise.race([call(controller.signal), aborted]));
+  } finally {
+    if (timer !== undefined) clearTimeout(timer);
+    parent?.removeEventListener('abort', onAbort);
+  }
+}
+
+export async function manageRemote(remote: EstimatorRemote, action: ManagementAction, payload: string, signal?: AbortSignal): Promise<ManagementResult> {
+  const result = await requestRemote((abort) => remote.manage(action, payload, abort), signal);
+  if (!result.ok) throw new RemoteCallError('MANAGEMENT', result.message);
+  return result;
+}

package/src/client/store.ts

@@ -0,0 +1,210 @@
+import type { EstimatorRemote, EstimatorView, RetainedTimeForecast } from '../shared/wire.ts';
+import { isLive, isTerminal } from './format.ts';
+import { errorInfo, requestRemote } from './remote.ts';
+import type { ClientError } from './remote.ts';
+
+export interface SnapshotState {
+  view: EstimatorView | null;
+  pending: boolean;
+  error: ClientError | null;
+  receivedAt: number;
+  lastForecast: RetainedTimeForecast | null;
+}
+interface Entry {
+  sessionId: string;
+  turn: number | null;
+  state: SnapshotState;
+  listeners: Set<() => void>;
+  inFlight: Promise<void> | null;
+  controller: AbortController | null;
+  poll: ReturnType<typeof setTimeout> | null;
+  projectionRevision: number | undefined;
+  dirty: boolean;
+  generation: number;
+  fetched: boolean;
+}
+
+/** A single clock for every live row. It never calls the remote service. */
+export class LocalClock {
+  private now = Date.now();
+  private listeners = new Set<() => void>();
+  private timer: ReturnType<typeof setInterval> | null = null;
+  private intervalMs = 1_000;
+  getSnapshot = () => this.now;
+  subscribe = (listener: () => void) => {
+    this.listeners.add(listener);
+    if (!this.timer) this.start();
+    return () => {
+      this.listeners.delete(listener);
+      if (!this.listeners.size) this.stop();
+    };
+  };
+  private start() {
+    this.now = Date.now();
+    this.timer = setInterval(() => {
+      this.now = Date.now();
+      for (const listener of this.listeners) listener();
+    }, this.intervalMs);
+  }
+  private stop() {
+    if (this.timer) clearInterval(this.timer);
+    this.timer = null;
+  }
+  configure(intervalMs: number) {
+    if (!Number.isFinite(intervalMs) || intervalMs <= 0) return;
+    this.intervalMs = Math.max(250, intervalMs);
+    if (this.timer) { this.stop(); this.start(); }
+  }
+  dispose() { this.stop(); this.listeners.clear(); }
+}
+
+/** Shared by both slots; each session/turn has at most one request and one polling timer. */
+export class SnapshotStore {
+  readonly clock = new LocalClock();
+  private entries = new Map<string, Entry>();
+  private refreshMs = 5_000;
+  private disposed = false;
+  private readonly remote: EstimatorRemote;
+  constructor(remote: EstimatorRemote) { this.remote = remote; }
+
+  private entry(sessionId: string, turn: number | null): Entry {
+    const key = JSON.stringify([sessionId, turn]);
+    let entry = this.entries.get(key);
+    if (!entry) {
+      entry = {
+        sessionId, turn, state: { view: null, pending: false, error: null, receivedAt: 0, lastForecast: null },
+        listeners: new Set(), inFlight: null, controller: null, poll: null,
+        projectionRevision: undefined, dirty: false, generation: 0, fetched: false,
+      };
+      this.entries.set(key, entry);
+    }
+    return entry;
+  }
+  getSnapshot = (sessionId: string, turn: number | null): SnapshotState => this.entry(sessionId, turn).state;
+
+  subscribe = (sessionId: string, turn: number | null, listener: () => void) => {
+    const entry = this.entry(sessionId, turn);
+    entry.listeners.add(listener);
+    if (!entry.fetched) void this.refresh(sessionId, turn);
+    else this.schedulePoll(entry);
+    return () => {
+      entry.listeners.delete(listener);
+      if (!entry.listeners.size) {
+        this.clearPoll(entry);
+        entry.dirty = false;
+        if (entry.inFlight) {
+          entry.generation++;
+          entry.controller?.abort();
+          entry.controller = null;
+          entry.inFlight = null;
+          entry.fetched = false;
+          entry.state = { ...entry.state, pending: false };
+        }
+      }
+    };
+  };
+
+  /** Event-driven refresh also catches a turn that starts and finishes between polling ticks. */
+  projectionChanged(sessionId: string, turn: number | null, revision: number | undefined) {
+    if (this.disposed || revision === undefined) return;
+    const entry = this.entry(sessionId, turn);
+    if (entry.projectionRevision === revision) return;
+    const first = entry.projectionRevision === undefined;
+    entry.projectionRevision = revision;
+    if (entry.inFlight) {
+      if (!first) entry.dirty = true;
+      return;
+    }
+    void this.refresh(sessionId, turn);
+  }
+
+  refresh = (sessionId: string, turn: number | null): Promise<void> => {
+    if (this.disposed) return Promise.resolve();
+    const entry = this.entry(sessionId, turn);
+    if (entry.inFlight) return entry.inFlight;
+    this.clearPoll(entry);
+    const generation = ++entry.generation;
+    const controller = new AbortController();
+    entry.controller = controller;
+    entry.dirty = false;
+    entry.state = { ...entry.state, pending: true, error: null };
+    this.emit(entry);
+    entry.inFlight = (async () => {
+      try {
+        const view = await requestRemote((signal) => this.remote.snapshot(sessionId, turn, signal), controller.signal);
+        if (this.disposed || generation !== entry.generation) return;
+        entry.fetched = true;
+        const snapshot = view.snapshot;
+        const previous = snapshot ? [view.lastForecast, entry.state.lastForecast]
+          .filter((value): value is RetainedTimeForecast => !!value && value.taskKey === snapshot.taskKey)
+          .sort((a, b) => b.updatedAt - a.updatedAt)[0] ?? null : entry.state.lastForecast;
+        const lastForecast = snapshot && isTerminal(snapshot.state) ? null
+          : snapshot?.remainingMs && snapshot.remainingMs.high > 0 ? { taskKey: snapshot.taskKey,
+            remainingMs: { ...snapshot.remainingMs }, estimatedTotalMs: snapshot.estimatedTotalMs ? { ...snapshot.estimatedTotalMs } : null, updatedAt: snapshot.updatedAt }
+          : previous;
+        entry.state = {
+          view, pending: false, receivedAt: Date.now(), lastForecast,
+          error: view.error ? { code: 'ESTIMATE', message: view.error } : null,
+        };
+      } catch (error) {
+        if (this.disposed || generation !== entry.generation) return;
+        entry.fetched = true;
+        entry.state = { ...entry.state, pending: false, error: errorInfo(error) };
+      } finally {
+        if (generation === entry.generation && !this.disposed) {
+          entry.inFlight = null;
+          entry.controller = null;
+          this.emit(entry);
+          if (entry.dirty && entry.listeners.size) void this.refresh(sessionId, turn);
+          else this.schedulePoll(entry);
+        }
+      }
+    })();
+    return entry.inFlight;
+  };
+
+  configure(config: Record<string, unknown>) {
+    const refresh = config.predictionRefreshMs;
+    if (typeof refresh === 'number' && Number.isFinite(refresh) && refresh > 0) this.refreshMs = Math.max(250, refresh);
+    const timer = config.timerRefreshMs;
+    if (typeof timer === 'number') this.clock.configure(timer);
+    for (const entry of this.entries.values()) {
+      this.clearPoll(entry);
+      this.schedulePoll(entry);
+    }
+  }
+
+  invalidate() {
+    for (const entry of this.entries.values()) {
+      if (!entry.listeners.size) { entry.fetched = false; continue; }
+      if (entry.inFlight) entry.dirty = true;
+      else void this.refresh(entry.sessionId, entry.turn);
+    }
+  }
+
+  private emit(entry: Entry) { for (const listener of entry.listeners) listener(); }
+  private clearPoll(entry: Entry) {
+    if (entry.poll !== null) clearTimeout(entry.poll);
+    entry.poll = null;
+  }
+  private schedulePoll(entry: Entry) {
+    if (this.disposed || entry.poll || entry.inFlight || !entry.listeners.size) return;
+    const snapshot = entry.state.view?.snapshot;
+    if (!snapshot || !isLive(snapshot.state)) return;
+    entry.poll = setTimeout(() => {
+      entry.poll = null;
+      void this.refresh(entry.sessionId, entry.turn);
+    }, this.refreshMs);
+  }
+  dispose() {
+    this.disposed = true;
+    for (const entry of this.entries.values()) {
+      this.clearPoll(entry);
+      entry.generation++;
+      entry.controller?.abort();
+      entry.listeners.clear();
+    }
+    this.entries.clear();
+    this.clock.dispose();
+  }
+}

package/src/client/styles.ts

@@ -0,0 +1,94 @@
+export const styles = `
+.dte{display:inline-flex;flex:0 1 auto;max-width:100%;color:var(--dsw-alias-label-secondary);font:inherit;line-height:inherit;min-width:0;box-sizing:border-box}
+.dte *{box-sizing:border-box}
+.dte button,.dte input,.dte textarea,.dte select{font:inherit;color:inherit}
+.dte button,.dte summary{cursor:pointer}
+.dte button{border:1px solid var(--dsw-alias-border-l1);background:var(--dsw-alias-bg-layer-1);border-radius:6px;min-height:32px;padding:4px 10px;transition:background-color .15s,border-color .15s}
+.dte button:hover:not(:disabled),.dte summary:hover{background:var(--dsw-alias-bg-layer-2)}
+.dte button:disabled{cursor:default;opacity:.6}
+.dte button:focus-visible,.dte summary:focus-visible,.dte input:focus-visible,.dte textarea:focus-visible{outline:2px solid var(--dsw-alias-brand-primary);outline-offset:2px}
+.dte button.dte-primary{color:var(--dsw-alias-brand-primary);border-color:var(--dsw-alias-brand-primary)}
+.dte button.dte-danger{color:var(--dsw-alias-state-error-primary)}
+.dte .dte-quiet{border-color:transparent;background:transparent}
+.dte .dte-muted{color:var(--dsw-alias-label-secondary)}
+.dte .dte-error{color:var(--dsw-alias-state-error-primary);overflow-wrap:anywhere}
+.dte .dte-warn{color:var(--dsw-alias-state-warn-primary)}
+.dte .dte-success{color:var(--dsw-alias-state-success-primary)}
+.dte .dte-small{font-size:.9em}
+.dte .dte-tabular{font-variant-numeric:tabular-nums}
+.dte details>summary{list-style:none}
+.dte details>summary::-webkit-details-marker{display:none}
+.dte .dte-main{display:flex;align-items:center;gap:8px;width:100%;min-height:32px;padding:4px 6px;border-radius:5px;flex-wrap:wrap;overflow-wrap:anywhere;text-align:left}
+.dte .dte-main .dte-chevron{width:12px;height:12px;flex:none;transition:transform .15s}
+.dte details[open]>.dte-main .dte-chevron{transform:rotate(90deg)}
+.dte .dte-main .dte-main-text{display:flex;gap:4px 12px;flex:1;flex-wrap:wrap;min-width:0;align-items:baseline}
+.dte .dte-main .dte-value{font-weight:500}
+.dte .dte-state{display:inline-flex;align-items:center;gap:5px;color:var(--dsw-alias-label-secondary);white-space:nowrap}
+.dte .dte-state::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--dsw-alias-state-idle-primary);flex:none}
+.dte .dte-state[data-state=running]::before{background:var(--dsw-alias-brand-primary)}
+.dte .dte-state[data-state=completed]::before{background:var(--dsw-alias-state-success-primary)}
+.dte .dte-state[data-state=failed]::before{background:var(--dsw-alias-state-error-primary)}
+.dte .dte-panel{margin:4px 0 8px;border:1px solid var(--dsw-alias-border-l1);border-radius:7px;background:var(--dsw-alias-bg-base);max-height:min(60vh,38rem);overflow:auto;overscroll-behavior:contain;padding:12px;scrollbar-gutter:stable}
+.dte .dte-toolbar{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
+/* Any spacer pushes what follows to the far edge; the header needs it too, or
+   the close button sits next to the title instead of at the panel's right. */
+.dte .dte-spacer{flex:1}
+.dte .dte-subsection{border-top:1px solid var(--dsw-alias-border-l1);margin-top:12px;padding-top:10px}
+.dte .dte-subsection>summary{padding:3px 0;min-height:30px;display:flex;align-items:center;gap:6px;font-weight:500}
+.dte .dte-subsection>summary::before{content:'›';display:inline-block;font-weight:400;transition:transform .15s}
+.dte .dte-subsection[open]>summary::before{transform:rotate(90deg)}
+.dte h3{font-size:inherit;margin:0 0 8px;font-weight:600}
+.dte p{margin:6px 0;overflow-wrap:anywhere}
+.dte dl.dte-facts{display:grid;grid-template-columns:minmax(7rem,1fr) minmax(0,2fr);gap:5px 12px;margin:8px 0}
+.dte .dte-facts dt{color:var(--dsw-alias-label-secondary)}
+.dte .dte-facts dd{margin:0;overflow-wrap:anywhere;min-width:0;font-variant-numeric:tabular-nums}
+.dte .dte-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 16px}
+.dte .dte-field{display:flex;flex-direction:column;gap:4px;min-width:0}
+.dte input,.dte textarea{width:100%;min-width:0;min-height:32px;background:var(--dsw-alias-bg-layer-1);border:1px solid var(--dsw-alias-border-l1);border-radius:5px;padding:5px 7px}
+.dte textarea{resize:vertical;line-height:1.5;min-height:112px;tab-size:2}
+.dte .dte-code{font-family:inherit;font-variant-numeric:tabular-nums;white-space:pre;overflow:auto}
+.dte .dte-actions{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:10px}
+.dte .dte-confirm{border:1px solid var(--dsw-alias-state-warn-primary);border-radius:5px;padding:9px;margin-top:8px}
+.dte ul{padding-inline-start:20px;margin:6px 0}
+.dte li{overflow-wrap:anywhere;margin:4px 0}
+.dte .dte-profiles{list-style:none;padding:0;margin:8px 0;display:flex;flex-direction:column;gap:8px}
+.dte .dte-profiles>li{display:flex;flex-direction:column;gap:1px;min-width:0;margin:0;padding:0;overflow-wrap:anywhere}
+.dte .dte-table-wrap{overflow:auto;max-width:100%}
+.dte table{width:100%;border-collapse:collapse;text-align:start;font-size:inherit}
+.dte th,.dte td{padding:6px 8px;border-bottom:1px solid var(--dsw-alias-border-l1);vertical-align:top;overflow-wrap:anywhere}
+.dte th{font-weight:500;color:var(--dsw-alias-label-secondary);text-align:start}
+.dte .dte-status{min-height:1.5em;margin:6px 0}
+.dte a{color:var(--dsw-alias-brand-primary);overflow-wrap:anywhere}
+/* Native StatsPills / TurnUsagePanel geometry (MIT), without private imports.
+   Both roots shrink-wrap; neither claims the composer's available width. */
+.dte[data-slot=composer-dock]{font-size:calc(var(--dsh-content-font-size-secondary,13px) - 1px);line-height:calc(20px + var(--dsh-content-font-delta-secondary,0px))}
+.dte button.dte-line{display:inline-flex;align-items:center;gap:6px;min-width:0;max-width:100%;min-height:0;padding:1px 8px;background:transparent;border:0;border-radius:var(--dsw-radius-sm);text-align:left;color:var(--dsw-alias-label-tertiary);font:inherit;font-variant-numeric:tabular-nums;line-height:inherit;white-space:nowrap;transition:none}
+.dte button.dte-line[aria-expanded=true]{background:var(--dsw-alias-interactive-bg-hover);color:var(--dsw-alias-label-secondary)}
+@media(hover:hover){.dte button.dte-line:hover:not(:disabled){background:var(--dsw-alias-interactive-bg-hover);color:var(--dsw-alias-label-secondary)}}
+.dte .dte-line-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.dte button.dte-line-tail{gap:4px;height:calc(28px + var(--dsh-content-font-delta,0px));padding:6px 8px;font-size:calc(var(--dsh-content-font-size-secondary,13px) - 1px);line-height:calc(24px + var(--dsh-content-font-delta,0px))}
+.dte button.dte-line-tail[aria-expanded=true],.dte button.dte-line-tail:hover:not(:disabled){color:var(--dsw-alias-label-tertiary)}
+.dte .dte-icon{flex:none;width:14px;height:14px;color:inherit;overflow:visible}
+.dte .dte-line-tail .dte-icon{width:calc(15px + var(--dsh-content-font-delta,0px));height:calc(15px + var(--dsh-content-font-delta,0px))}
+.dte .dte-icon-ring{display:none}
+.dte .dte-chip{font-variant-numeric:tabular-nums;color:var(--dsw-alias-label-secondary);font-size:.85em;white-space:nowrap;border:1px solid var(--dsw-alias-border-l1);border-radius:999px;padding:0 8px;line-height:1.7}
+/* Native stat-dialog surface (MIT). Owned-element measurements place the
+   body portal with the native gap/inset and a bounded internal scroll area. */
+.dte .dte-pop{position:fixed;inset:auto;z-index:1100;box-sizing:border-box;width:max-content;min-width:min(300px,calc(100vw - 24px));max-width:min(440px,calc(100vw - 24px));padding:16px;border:0;border-radius:var(--dsw-radius-lg);background:var(--dsw-specific-menu);backdrop-filter:var(--dsw-menu-backdrop-filter);--dsw-elevation-stroke-color:var(--dsw-alias-border-l1);box-shadow:var(--dsw-elevation-prominent);font-family:inherit;font-size:12px;line-height:18px;color:var(--dsw-alias-label-secondary);cursor:default;max-height:calc(100dvh - 12px - max(12px,var(--dsh-frame-overlay-top,12px)));overflow-x:hidden;overflow-y:auto;--dsh-scrollbar-thumb:var(--dsw-alias-scrollbar-bg-l2);--dsh-scrollbar-thumb-hover:var(--dsw-alias-scrollbar-hover-l2);top:max(12px,var(--dsh-frame-overlay-top,12px));left:12px;height:auto;min-height:0;margin:0;overscroll-behavior:contain}
+.dte .dte-pop-head{display:flex;justify-content:space-between;gap:16px;margin-bottom:8px;color:var(--dsw-alias-label-primary);font-weight:500}
+.dte .dte-pop-title{display:inline-flex;align-items:center;gap:6px;min-width:0}
+.dte .dte-pop-rule{margin-bottom:10px;border-top:.5px solid var(--dsw-alias-border-l2)}
+.dte .dte-summary{display:grid;grid-template-columns:minmax(76px,auto) minmax(0,1fr);gap:6px 16px;margin:0;color:var(--dsw-alias-label-tertiary)}
+.dte .dte-summary dt,.dte .dte-summary dd{min-width:0;margin:0}
+.dte .dte-summary dd{color:var(--dsw-alias-label-secondary);font-variant-numeric:tabular-nums;text-align:right}
+@media(max-width:480px){.dte button.dte-line-tail{justify-content:center;width:calc(28px + var(--dsh-content-font-delta,0px));padding:6px}.dte .dte-line-tail .dte-line-text{display:none}}
+.dte .dte-pop-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:12px 0 2px;padding-top:8px;border-top:.5px solid var(--dsw-alias-border-l2)}
+.dte button.dte-link{border:0;background:transparent;padding:2px 0;min-height:24px;color:var(--dsw-alias-label-secondary)}
+.dte button.dte-link-active{color:var(--dsw-alias-brand-primary)}
+@keyframes dte-arc{to{transform:rotate(360deg)}}
+@keyframes dte-pulse{0%,100%{opacity:1}50%{opacity:.35}}
+@media(max-width:520px){.dte .dte-grid{grid-template-columns:1fr}.dte .dte-panel{padding:10px}.dte dl.dte-facts{grid-template-columns:minmax(6rem,1fr) minmax(0,1.5fr)}}
+@media(pointer:coarse){.dte button,.dte summary,.dte input{min-height:44px}.dte textarea{font-size:max(1em,16px)}}
+/* Reduced motion must also stop the looping state icon, not only transitions. */
+@media(prefers-reduced-motion:reduce){.dte *{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
+`;