@genesislcap/ai-assistant 15.19.6 → 15.20.0

package/sandbox/sandbox.ts

@@ -13,6 +13,7 @@ import '../src/index';
 import type { FoundationAiAssistant } from '../src/main/main';
 import type { PopoutMode } from '../src/main/main.types';
 import { WebStorageSessionProvider } from '../src/state/persistence';
+import { estimateContextTokens } from '../src/utils/context-tokens';
 import { renderControls, type ControlGroup } from './controls';
 import {
   buildAgents,
@@ -35,12 +36,77 @@ registerRapidDesignSystem();
 // resolves to the built-in empty registry and every send is a no-op; with it,
 // Send returns a canned reply so the busy states are real. Registered before the
 // element connects — `createDriver()` reads the registry there.
-registerAIProviders(DI.getOrCreateDOMContainer(), { sandbox: new SandboxAIProvider() });
+// Held rather than inlined: the sandbox writes its `contextLimit` on every apply
+// so the element's own re-resolve agrees with what the panel is showing.
+const aiProvider = new SandboxAIProvider();
+registerAIProviders(DI.getOrCreateDOMContainer(), { sandbox: aiProvider });
 
 const sessionProvider = new WebStorageSessionProvider(window.sessionStorage, {
   keyPrefix: 'ai-assistant-sandbox',
 });
 
+// ─── Context-gate presets ────────────────────────────────────────────────────
+
+/**
+ * One-click jumps to each state the gate can be in (GENC-1567).
+ *
+ * Reaching these by hand means getting a transcript, a window and a reserve to
+ * agree, and the two blocked states differ by something not obvious from the
+ * panel at all — whether a compaction would reclaim enough to be worth offering.
+ * Each preset drives the ordinary controls rather than forcing the element, so
+ * what you land on is the component deciding for itself; the readouts underneath
+ * show it doing so.
+ *
+ * All four use the measured fill, so the gate and the compaction planner are
+ * always looking at the same conversation.
+ */
+const CONTEXT_PRESETS = {
+  normal: {
+    label: 'Normal (plenty of room)',
+    transcript: 'rich',
+  },
+  warning: {
+    label: 'Warning (approaching the limit)',
+    transcript: 'huge',
+  },
+  'blocked-compactable': {
+    label: 'Blocked — compacting will clear it',
+    // A long tool loop: over the block, and with cuttable boundaries inside it.
+    transcript: 'loop',
+  },
+  'blocked-stuck': {
+    label: 'Blocked — compacting will NOT clear it',
+    // One indivisible tool result. No cut can shrink it, so the copy has to offer
+    // a new chat instead of Compact.
+    transcript: 'wall',
+  },
+} as const satisfies Record<string, { label: string; transcript: TranscriptName }>;
+
+type ContextPresetName = keyof typeof CONTEXT_PRESETS;
+
+/**
+ * Shown once any control in the group has been moved by hand, so the dropdown
+ * never claims a state the panel has since been steered away from.
+ *
+ * It also makes re-selecting a preset work at all: a `<select>` fires no
+ * `change` event when you pick the option already showing, so without something
+ * to fall back to, "jump to Normal" would be a no-op for anyone already sitting
+ * on Normal — which is the default, and so the first thing most people try.
+ */
+const CUSTOM_PRESET = 'custom';
+
+/** Keys the preset owns. Touching any of them by hand drops the panel to custom. */
+const CONTEXT_PRESET_KEYS = [
+  'transcript',
+  'contextSource',
+  'contextWindow',
+  'contextFill',
+  'reserveTokens',
+  'warnMultiplier',
+  'contextGateEnabled',
+  'flowInProgress',
+] as const;
+
 // ─── State ───────────────────────────────────────────────────────────────────
 
 interface SandboxState {
@@ -70,6 +136,15 @@ interface SandboxState {
   showThinkingSteps: boolean;
   showNarration: boolean;
   animations: boolean;
+  // Context window (GENC-1567)
+  contextPreset: ContextPresetName | typeof CUSTOM_PRESET;
+  contextWindow: number;
+  contextSource: 'auto' | 'manual' | 'none';
+  contextFill: number;
+  contextGateEnabled: boolean;
+  reserveTokens: number;
+  warnMultiplier: number;
+  flowInProgress: boolean;
   // Simulated runtime
   runtime: 'idle' | 'loading' | 'cancelling' | 'blocked' | 'compacting' | 'restoring';
   transcript: TranscriptName;
@@ -102,6 +177,18 @@ const DEFAULT_STATE: SandboxState = {
   showThinkingSteps: true,
   showNarration: true,
   animations: true,
+  // Chosen so the `huge` (~20k) and `loop` (~22k) seeds actually clear the tail
+  // budget these produce (~12.8k) and so have something to compact. Verified, not
+  // guessed — a slightly roomier pairing leaves the tail larger than either seed,
+  // and Compact then greys out for a reason that looks like a bug.
+  contextPreset: 'normal',
+  contextWindow: 30_000,
+  contextSource: 'auto',
+  contextFill: 60,
+  contextGateEnabled: true,
+  reserveTokens: 8_000,
+  warnMultiplier: 2,
+  flowInProgress: false,
   runtime: 'idle',
   transcript: 'rich',
   width: 480,
@@ -109,12 +196,25 @@ const DEFAULT_STATE: SandboxState = {
   theme: 'dark',
 };
 
+/**
+ * Narrowest stage the sandbox offers.
+ *
+ * The assistant's blocked-state copy is sized against this — see the
+ * `.composer.context-blocked` floor in `main.styles.ts` — so letting the stage go
+ * narrower would show a clipped message that no supported width produces.
+ */
+const MIN_STAGE_WIDTH = 400;
+
 const STORAGE_KEY = 'ai-assistant-sandbox:state';
 
 const loadState = (): SandboxState => {
   try {
     const raw = localStorage.getItem(STORAGE_KEY);
-    return raw ? { ...DEFAULT_STATE, ...JSON.parse(raw) } : { ...DEFAULT_STATE };
+    const loaded = raw ? { ...DEFAULT_STATE, ...JSON.parse(raw) } : { ...DEFAULT_STATE };
+    // A panel saved before the floor existed can carry a narrower width, and it
+    // would survive every reload while the slider refused to reproduce it.
+    loaded.width = Math.max(MIN_STAGE_WIDTH, loaded.width);
+    return loaded;
   } catch {
     return { ...DEFAULT_STATE };
   }
@@ -163,6 +263,11 @@ const seedTranscript = (s: SandboxState): void => {
     const seed = TRANSCRIPTS[s.transcript].map((m) => ({ ...m }));
     (assistant as any).driver?.loadHistory?.(seed.map((m) => ({ ...m })));
     assistant.messages = seed;
+    // `auto` measures the transcript, which only exists as of this tick — so the
+    // fill and every readout have to be recomputed now rather than in the
+    // `apply()` that scheduled this.
+    applyContext(s);
+    refreshReadouts();
   }, 0);
 };
 
@@ -172,6 +277,12 @@ const seedTranscript = (s: SandboxState): void => {
  * cog-menu choices — which is what you want when a template edit hot-reloads.
  */
 const mountAssistant = (): void => {
+  // BEFORE the element connects. `connectedCallback` resolves the context limit
+  // from the provider straight away, and `getStatus()` reads this field
+  // synchronously — so setting it in `apply()` (which runs after `appendChild`)
+  // loses the race and the element keeps the stub's default window for the rest
+  // of the session.
+  aiProvider.contextLimit = state.contextWindow;
   provider.textContent = '';
   assistant = document.createElement('foundation-ai-assistant') as FoundationAiAssistant;
   assistant.setAttribute('session-key', 'sandbox');
@@ -202,6 +313,11 @@ const buildChatConfig = (s: SandboxState): ChatConfig => ({
     // `userConfigurable` turns the defaults on and adds the multiselect to the cog.
     animations: s.animations ? { userConfigurable: true } : undefined,
   },
+  context: {
+    enabled: s.contextGateEnabled,
+    reserveTokens: s.reserveTokens,
+    warnMultiplier: s.warnMultiplier,
+  },
   picker: {
     mode: s.pickerMode,
     disablePinColours: s.disablePinColours,
@@ -250,6 +366,92 @@ const applyDivider = (on: boolean): void => {
   );
 };
 
+/**
+ * Drives the context gate (GENC-1567).
+ *
+ * The window goes onto the PROVIDER as well as the element. The element
+ * re-resolves its limit from the active provider, so a value poked only onto the
+ * element is live until that happens and then silently reverts — writing both
+ * means the panel and the component cannot disagree.
+ *
+ * **`contextTokens` has to be simulated** — the stub reports no usage, so nothing
+ * would ever set it and the gate would sit inert forever. How it is simulated
+ * matters more than it looks:
+ *
+ * - `auto` measures the seeded transcript with the component's own estimator, so
+ *   the gate and the compaction planner are looking at the same conversation.
+ *   This is the honest mode and the default.
+ * - `manual` forces a percentage. Useful for parking on a threshold without
+ *   seeding anything, but it can DISAGREE with the transcript — claim 85% of the
+ *   window while the transcript holds 250 tokens and the gate says "full" while
+ *   the planner correctly says there is nothing here worth compacting, so the
+ *   blocked copy offers a new chat rather than Compact. That is the component
+ *   being right about an impossible situation, not a bug; the readouts show both
+ *   figures so the mismatch is visible rather than mystifying.
+ * - `none` leaves it unset — the real state on a provider that reports no usage,
+ *   where the gate must stay quiet rather than guess.
+ */
+/**
+ * Expand a preset into the ordinary controls.
+ *
+ * Writes the whole context group, not just the transcript — including the pieces
+ * a previous experiment may have left set (a manual fill, a flow in progress, the
+ * gate switched off). A preset that only moved some of them would land somewhere
+ * different depending on what you had been doing, which is exactly what a "show
+ * me this state" shortcut must not do.
+ */
+const applyContextPreset = (s: SandboxState): void => {
+  if (s.contextPreset === CUSTOM_PRESET) return;
+  const preset = CONTEXT_PRESETS[s.contextPreset];
+  s.transcript = preset.transcript;
+  s.contextSource = 'auto';
+  s.contextWindow = 30_000;
+  s.reserveTokens = 8_000;
+  s.warnMultiplier = 2;
+  s.contextGateEnabled = true;
+  s.flowInProgress = false;
+};
+
+/**
+ * Keep the measured fill live.
+ *
+ * Without this, `auto` measures only when a panel control moves — so a
+ * compaction (which the component performs on its own) would shrink the
+ * transcript while the readouts, and the gate, went on quoting the old size. The
+ * panel would then show a block that compacting had already cleared, which is
+ * precisely the bug the component was fixed for and exactly the wrong thing for a
+ * harness to fake.
+ *
+ * Idempotent and re-checked on every apply: the driver is rebuilt whenever the
+ * agents change, and the listener has to follow it.
+ */
+let boundDriver: unknown;
+
+const bindHistoryListener = (): void => {
+  const driver = (assistant as any).driver;
+  if (!driver || driver === boundDriver) return;
+  boundDriver = driver;
+  driver.addEventListener('history-updated', () => {
+    if (state.contextSource !== 'auto') return;
+    applyContext(state);
+    refreshReadouts();
+  });
+};
+
+const applyContext = (s: SandboxState): void => {
+  aiProvider.contextLimit = s.contextWindow;
+  assistant.contextLimit = s.contextWindow;
+  assistant.contextTokens =
+    s.contextSource === 'none'
+      ? undefined
+      : s.contextSource === 'manual'
+        ? Math.round((s.contextWindow * s.contextFill) / 100)
+        : estimateContextTokens(assistant.messages);
+  // Standing in for a stateful agent holding the flow. The gate downgrades a
+  // block to a warning while this is set, so a flow can always finish.
+  assistant.flowOwnerAgentName = s.flowInProgress ? 'Reconciliation' : null;
+};
+
 const applyRuntime = (s: SandboxState): void => {
   assistant.compacting = s.runtime === 'compacting';
   assistant.restoring = s.runtime === 'restoring';
@@ -280,6 +482,8 @@ function apply(): void {
   assistant.persistence = state.persistenceProvider
     ? { enabled: false, provider: sessionProvider }
     : {};
+  bindHistoryListener();
+  applyContext(state);
   applyRuntime(state);
   applyGradientSend(state.gradientSend);
   applyDivider(state.showDivider);
@@ -288,8 +492,55 @@ function apply(): void {
   seedTranscript(state);
   applyStage(state);
   saveState(state);
+  refreshReadouts();
 }
 
+// ─── Readouts ────────────────────────────────────────────────────────────────
+//
+// Every figure below is read back off the ELEMENT rather than recomputed from
+// panel state. Recomputing here would only ever confirm the panel agrees with
+// itself; the point is to see what the component derived.
+
+const n = (v: number | undefined): string => (v == null ? '—' : Math.round(v).toLocaleString());
+
+const describeGate = (): string => {
+  const tokens = assistant.contextTokens;
+  const limit = assistant.contextBudget.limit;
+  const pct = tokens != null && limit ? ` (${Math.round((tokens / limit) * 100)}%)` : '';
+  return `${assistant.contextGate} — ${n(tokens)} / ${n(limit)}${pct}`;
+};
+
+const describeThresholds = (): string => {
+  const b = assistant.contextBudget;
+  if (!b.enabled) return 'gate off';
+  return `warn ${n(b.warnAt)} · block ${n(b.blockAt)} · abort ${n(b.abortAt)} · tail ${n(b.tailTokenBudget)}`;
+};
+
+/**
+ * How far a manual fill may drift from the measured transcript before the
+ * readout calls it out. Generous — the two are never expected to match exactly,
+ * and only an order-of-magnitude disagreement misleads.
+ */
+const FILL_DRIFT_WARN_TOKENS = 2_000;
+
+const describeTranscript = (): string => {
+  const measured = estimateContextTokens(assistant.messages);
+  const claimed = assistant.contextTokens;
+  const drift =
+    state.contextSource === 'manual' &&
+    claimed != null &&
+    Math.abs(claimed - measured) > FILL_DRIFT_WARN_TOKENS
+      ? `  ⚠ fill claims ${n(claimed)} — the gate and the planner are looking at different conversations`
+      : '';
+  return `${assistant.messages.length} msgs · ~${n(measured)} tokens${drift}`;
+};
+
+const describePlan = (): string => {
+  const plan = assistant.compactionPlan;
+  if (!plan) return `none — ${assistant.compactHint}`;
+  return `cut @${plan.cut} · −${n(plan.reclaimed)} → ${n(plan.tokensAfter)}`;
+};
+
 // ─── Control panel ───────────────────────────────────────────────────────────
 
 const GROUPS: ReadonlyArray<ControlGroup<SandboxState>> = [
@@ -384,7 +635,12 @@ const GROUPS: ReadonlyArray<ControlGroup<SandboxState>> = [
         label: 'Persistence provider configured',
         hint: 'The menu is gated on a provider — with none, ⋮ never renders.',
       },
-      { kind: 'toggle', key: 'showSessionMenu', label: 'chatConfig.ui.showSessionMenu' },
+      {
+        kind: 'toggle',
+        key: 'showSessionMenu',
+        label: 'chatConfig.ui.showSessionMenu',
+        hint: 'Turn this off (or the provider above) and push the fill past the warning — the gate forces ⋮ back on screen, showing Compact only.',
+      },
       {
         kind: 'action',
         label: 'Open / close session menu',
@@ -393,6 +649,104 @@ const GROUPS: ReadonlyArray<ControlGroup<SandboxState>> = [
       },
     ],
   },
+  {
+    title: 'Context window (GENC-1567)',
+    controls: [
+      {
+        kind: 'select',
+        key: 'contextPreset',
+        label: 'Jump to state',
+        featured: true,
+        hint: 'Sets the whole group below to land on that state. It is a shortcut, not a readout — once you move anything yourself, the Gate line is what tells you where you actually are.',
+        options: [
+          ...Object.entries(CONTEXT_PRESETS).map(([value, { label }]) => ({ value, label })),
+          { value: CUSTOM_PRESET, label: 'Custom (hand-tuned)' },
+        ],
+      },
+      {
+        kind: 'range',
+        key: 'contextWindow',
+        label: 'Window (tokens)',
+        min: 10_000,
+        max: 200_000,
+        step: 5_000,
+        hint: 'What the stub provider reports. Small on purpose — at a real 200k window the block sits at 175k, and seeding a transcript that big makes the page miserable.',
+      },
+      {
+        kind: 'select',
+        key: 'contextSource',
+        label: 'Fill from',
+        hint: 'The stub reports no usage, so this has to be simulated. `auto` measures the seeded transcript with the real estimator — gate and compaction planner then agree. `manual` can disagree with the transcript on purpose; watch the readouts.',
+        options: [
+          { value: 'auto', label: 'Transcript (measured)' },
+          { value: 'manual', label: 'Manual %' },
+          { value: 'none', label: 'Unset (no usage reported)' },
+        ],
+      },
+      {
+        kind: 'range',
+        key: 'contextFill',
+        label: 'Manual fill %',
+        min: 0,
+        max: 100,
+        hint: 'Only used when "Fill from" is Manual.',
+      },
+      { kind: 'toggle', key: 'contextGateEnabled', label: 'chatConfig.context.enabled' },
+      {
+        kind: 'range',
+        key: 'reserveTokens',
+        label: 'Reserve (tokens)',
+        min: 1_000,
+        max: 40_000,
+        step: 1_000,
+        hint: 'Headroom kept free for one turn. Block sits one reserve below the window.',
+      },
+      {
+        kind: 'range',
+        key: 'warnMultiplier',
+        label: 'Warn multiplier',
+        min: 1,
+        max: 4,
+        step: 0.5,
+        hint: 'How many reserves ahead of the block the warning appears.',
+      },
+      {
+        kind: 'toggle',
+        key: 'flowInProgress',
+        label: 'Flow in progress',
+        hint: 'Sets a flow owner. A block downgrades to a warning while set, so a flow can always finish.',
+      },
+      {
+        kind: 'readout',
+        label: 'Gate',
+        render: () => describeGate(),
+        hint: 'Derived by the component, not the panel — this is the check.',
+      },
+      {
+        kind: 'readout',
+        label: 'Thresholds',
+        render: () => describeThresholds(),
+      },
+      {
+        kind: 'readout',
+        label: 'Transcript',
+        render: () => describeTranscript(),
+        hint: 'What the estimator actually measures. If this is far below the fill, a manual fill is claiming a conversation that is not there.',
+      },
+      {
+        kind: 'readout',
+        label: 'Compaction plan',
+        render: () => describePlan(),
+        hint: 'What Compact would actually reclaim. `none` here is why the button greys out.',
+      },
+      {
+        kind: 'action',
+        label: 'Compact now',
+        run: () => void assistant.compactSession(),
+        hint: 'Bypasses the menu. Seed `loop` or `huge` first — a small transcript is correctly not worth compacting.',
+      },
+    ],
+  },
   {
     title: 'Simulated state',
     controls: [
@@ -424,6 +778,9 @@ const GROUPS: ReadonlyArray<ControlGroup<SandboxState>> = [
           { value: 'short', label: 'Short' },
           { value: 'rich', label: 'Tools, markdown, agent switch' },
           { value: 'long', label: 'Long (28 turns)' },
+          { value: 'huge', label: 'Huge (~20k tokens)' },
+          { value: 'loop', label: 'Tool loop (~22k, no user turns inside)' },
+          { value: 'wall', label: 'Wall (~24k in one indivisible tool result)' },
         ],
       },
       {
@@ -480,10 +837,10 @@ const GROUPS: ReadonlyArray<ControlGroup<SandboxState>> = [
         kind: 'range',
         key: 'width',
         label: 'Width',
-        min: 260,
+        min: MIN_STAGE_WIDTH,
         max: 1600,
         step: 10,
-        hint: 'The composer floats free of the transcript above 1500px (a container query).',
+        hint: 'Floors at 400px — the narrowest supported composer, and what the blocked-state copy is sized against. The composer floats free of the transcript above 1500px (a container query).',
       },
       { kind: 'range', key: 'height', label: 'Height', min: 320, max: 1000, step: 10 },
       {
@@ -514,12 +871,32 @@ const GROUPS: ReadonlyArray<ControlGroup<SandboxState>> = [
   },
 ];
 
-const paint = (): void => renderControls(panel, GROUPS, state, () => apply());
+/**
+ * Replaced by `paint()`. A no-op until then because `mountAssistant()` calls
+ * `apply()` before the panel exists.
+ */
+let refreshReadouts: () => void = () => {};
+
+const paint = (): void => {
+  refreshReadouts = renderControls(panel, GROUPS, state, (_s, key) => {
+    if (key === 'contextPreset') {
+      // Expand it, then let `apply()`'s refresh push the rewritten values back
+      // into the controls. No rebuild — that would drop focus and collapse any
+      // group the user had opened.
+      applyContextPreset(state);
+    } else if ((CONTEXT_PRESET_KEYS as readonly string[]).includes(key ?? '')) {
+      // Hand-tuned now, so stop claiming a preset. Reaching 'custom' is also what
+      // makes the next preset pick a real `change` event on the select.
+      state.contextPreset = CUSTOM_PRESET;
+    }
+    apply();
+  });
+};
 
 // ─── Viewport presets + live size readout ────────────────────────────────────
 
 const PRESETS: ReadonlyArray<{ label: string; width: number; height: number }> = [
-  { label: 'Bubble 360', width: 360, height: 560 },
+  { label: 'Bubble 400', width: MIN_STAGE_WIDTH, height: 560 },
   { label: 'Panel 480', width: 480, height: 760 },
   { label: 'Dialog 640', width: 640, height: 720 },
   { label: 'Wide 1000', width: 1000, height: 800 },