@opencorestack/opengridx 3.3.0 → 3.5.0

package/lib/ai/validate.ts

@@ -0,0 +1,296 @@
+// validateGridAiState: the safety layer between a model's reply and the grid. Anything the columns
+// do not allow is dropped with an error; values are coerced to the column type. Never throws.
+// Only own keys of the input are read (never `__proto__`), and every key written to the output is a
+// column field, so nothing in the reply can reach Object.prototype or the output's prototype.
+import type {
+  GridAggregationModel,
+  GridColumnVisibilityModel,
+  GridFilterGroup,
+  GridFilterItem,
+  GridFilterModel,
+  GridFilterOperator,
+  GridPivotModel,
+  GridPivotValueField,
+  GridSortItem,
+} from '../types';
+import { toLocalDateString } from '../utils/values';
+import { brandGridAiValidated } from '../utils/aiBrand';
+import { coerceBoolean, coerceValue } from './coerce';
+import {
+  ALL_PARTS,
+  MAX_FILTER_DEPTH,
+  NO_VALUE_OPS,
+  PART_KEYS,
+  PIVOT_FNS,
+  aggregationFnsOf,
+  hasOwn,
+  isFilterable,
+  isGroupable,
+  isHideable,
+  isPlainObject,
+  isSortable,
+  operatorsOf,
+  selectedParts,
+  usableColumns,
+} from './columns';
+import type { GridAiColumn, GridAiPart, GridAiState, GridAiValidateOptions, GridAiValidationError, GridAiValidationResult } from './types';
+
+/** Longest list read from the model output; the rest is dropped with one error. */
+const MAX_LIST = 200;
+/** Errors past this many are not listed, so a reply full of junk still gives a readable list. */
+const MAX_ERRORS = 100;
+
+type Allowed = (col: GridAiColumn) => boolean;
+type FilterNode = GridFilterItem | GridFilterGroup;
+
+interface Ctx {
+  errors: GridAiValidationError[];
+  byField: Map<string, GridAiColumn>;
+}
+
+function fail(ctx: Ctx, path: string, message: string): null {
+  if (ctx.errors.length < MAX_ERRORS) ctx.errors.push({ path, message });
+  return null;
+}
+
+/** A short, safe rendering of a value for an error message. */
+function show(value: unknown): string {
+  if (typeof value === 'string') return JSON.stringify(value.slice(0, 60));
+  return value === null || typeof value !== 'object' ? String(value) : Array.isArray(value) ? 'a list' : 'an object';
+}
+
+function lower(value: unknown): string | null {
+  return typeof value === 'string' ? value.trim().toLowerCase() : null;
+}
+
+/** Own enumerable keys of the input, without `__proto__`. */
+function keysOf(obj: Record<string, unknown>): string[] {
+  return Object.keys(obj).filter((key) => key !== '__proto__');
+}
+
+function column(ctx: Ctx, value: unknown, path: string, allowed: Allowed, what: string): GridAiColumn | null {
+  const col = typeof value === 'string' ? ctx.byField.get(value) : undefined;
+  if (!col) return fail(ctx, path, `Unknown field ${show(value)}`);
+  return allowed(col) ? col : fail(ctx, path, `Field ${show(value)} cannot be ${what}`);
+}
+
+/** The first MAX_LIST entries of an array; a single value is read as a one-entry list. */
+function list(ctx: Ctx, value: unknown, path: string): unknown[] {
+  if (value == null) return [];
+  const items = Array.isArray(value) ? value : [value];
+  if (items.length > MAX_LIST) fail(ctx, path, `Only the first ${MAX_LIST} entries are read`);
+  return items.slice(0, MAX_LIST);
+}
+
+/** The choice `value` names, case-insensitively, in the choice's own spelling. */
+function oneOf(ctx: Ctx, value: unknown, path: string, choices: readonly string[]): string | null {
+  const v = lower(value);
+  return choices.find((c) => c.toLowerCase() === v) ?? fail(ctx, path, `${show(value)} is not one of ${choices.join(', ')}`);
+}
+
+/** One filter value, coerced; dates become `YYYY-MM-DD` as the filter panel writes them. */
+function filterValue(ctx: Ctx, raw: unknown, col: GridAiColumn, path: string): { v: unknown } | null {
+  const result = coerceValue(raw, col);
+  if (!result.ok) return fail(ctx, path, `${show(raw)} is not a valid ${col.type ?? 'string'} value`);
+  const v = result.value instanceof Date ? toLocalDateString(result.value) : result.value;
+  return v == null || v === '' ? fail(ctx, path, 'Missing value') : { v };
+}
+
+function filterItem(ctx: Ctx, raw: Record<string, unknown>, path: string): GridFilterItem | null {
+  const col = column(ctx, raw.field, `${path}.field`, isFilterable, 'filtered');
+  if (!col) return null;
+  const operator = oneOf(ctx, raw.operator, `${path}.operator`, operatorsOf(col));
+  if (operator === null) return null;
+  const item: GridFilterItem = { field: col.field, operator: operator as GridFilterOperator };
+  if (NO_VALUE_OPS.includes(item.operator)) return item;
+  const rawValue = hasOwn(raw, 'value') ? raw.value : undefined;
+  if (item.operator === 'isAnyOf') {
+    const values: unknown[] = [];
+    list(ctx, rawValue, `${path}.value`).forEach((entry, i) => {
+      const r = filterValue(ctx, entry, col, `${path}.value[${i}]`);
+      if (r && !values.includes(r.v)) values.push(r.v);
+    });
+    if (values.length === 0) return fail(ctx, `${path}.value`, 'No valid values');
+    item.value = values;
+    return item;
+  }
+  if (Array.isArray(rawValue)) return fail(ctx, `${path}.value`, 'Expected one value, not a list');
+  const r = filterValue(ctx, rawValue, col, `${path}.value`);
+  if (!r) return null;
+  item.value = r.v;
+  return item;
+}
+
+function logic(ctx: Ctx, raw: unknown, path: string): 'and' | 'or' | null {
+  return raw === undefined ? null : (oneOf(ctx, raw, path, ['and', 'or']) as 'and' | 'or' | null);
+}
+
+function filterItems(ctx: Ctx, raw: unknown, path: string, depth: number): FilterNode[] {
+  const out: FilterNode[] = [];
+  list(ctx, raw, path).forEach((entry, i) => {
+    const at = `${path}[${i}]`;
+    if (!isPlainObject(entry)) {
+      fail(ctx, at, `Expected a filter, got ${show(entry)}`);
+    } else if (hasOwn(entry, 'items') || hasOwn(entry, 'logicOperator')) {
+      if (depth >= MAX_FILTER_DEPTH) {
+        fail(ctx, at, `Groups nest at most ${MAX_FILTER_DEPTH} levels`);
+        return;
+      }
+      const items = filterItems(ctx, entry.items, `${at}.items`, depth + 1);
+      if (items.length === 0) fail(ctx, at, 'Empty group removed');
+      else out.push({ logicOperator: logic(ctx, entry.logicOperator, `${at}.logicOperator`) ?? 'and', items });
+    } else {
+      const item = filterItem(ctx, entry, at);
+      if (item) out.push(item);
+    }
+  });
+  return out;
+}
+
+function filterModel(ctx: Ctx, raw: Record<string, unknown>, path: string): GridFilterModel {
+  const model: GridFilterModel = {};
+  if (hasOwn(raw, 'items')) model.items = filterItems(ctx, raw.items, `${path}.items`, 0);
+  const op = logic(ctx, raw.logicOperator, `${path}.logicOperator`);
+  if (op) model.logicOperator = op;
+  if (hasOwn(raw, 'quickFilterValues')) {
+    model.quickFilterValues = [];
+    list(ctx, raw.quickFilterValues, `${path}.quickFilterValues`).forEach((entry, i) => {
+      const word = typeof entry === 'string' || typeof entry === 'number' ? String(entry).trim() : null;
+      if (word === null) fail(ctx, `${path}.quickFilterValues[${i}]`, `Expected text, got ${show(entry)}`);
+      else if (word !== '') model.quickFilterValues?.push(word);
+    });
+  }
+  return model;
+}
+
+function sortModel(ctx: Ctx, raw: unknown, path: string): GridSortItem[] {
+  const out: GridSortItem[] = [];
+  list(ctx, raw, path).forEach((entry, i) => {
+    const at = `${path}[${i}]`;
+    if (!isPlainObject(entry)) return fail(ctx, at, `Expected { field, sort }, got ${show(entry)}`);
+    const col = column(ctx, entry.field, `${at}.field`, isSortable, 'sorted');
+    const sort = col && oneOf(ctx, entry.sort, `${at}.sort`, ['asc', 'desc']);
+    if (!col || !sort) return;
+    if (out.some((s) => s.field === col.field)) fail(ctx, at, `${show(col.field)} is sorted twice`);
+    else out.push({ field: col.field, sort: sort as 'asc' | 'desc' });
+  });
+  return out;
+}
+
+function fieldList(ctx: Ctx, raw: unknown, path: string, allowed: Allowed, what: string): string[] {
+  const out: string[] = [];
+  list(ctx, raw, path).forEach((entry, i) => {
+    const col = column(ctx, entry, `${path}[${i}]`, allowed, what);
+    if (col && !out.includes(col.field)) out.push(col.field);
+  });
+  return out;
+}
+
+const canAggregate: Allowed = (col) => aggregationFnsOf(col).length > 0;
+const canPivot: Allowed = (col) => aggregationFnsOf(col, PIVOT_FNS).length > 0;
+
+function aggregationModel(ctx: Ctx, raw: Record<string, unknown>, path: string): GridAggregationModel {
+  const model: GridAggregationModel = {};
+  for (const key of keysOf(raw)) {
+    // 'none' is how the grid spells "no aggregation": nothing to set.
+    if (lower(raw[key]) === 'none') continue;
+    const col = column(ctx, key, `${path}.${key}`, canAggregate, 'aggregated');
+    const fn = col && oneOf(ctx, raw[key], `${path}.${key}`, aggregationFnsOf(col));
+    if (col && fn) model[col.field] = fn;
+  }
+  return model;
+}
+
+function pivotModel(ctx: Ctx, raw: Record<string, unknown>, path: string): GridPivotModel {
+  const valueFields: GridPivotValueField[] = [];
+  list(ctx, raw.valueFields, `${path}.valueFields`).forEach((entry, i) => {
+    const at = `${path}.valueFields[${i}]`;
+    if (!isPlainObject(entry)) return fail(ctx, at, `Expected { field, aggFn }, got ${show(entry)}`);
+    const col = column(ctx, entry.field, `${at}.field`, canPivot, 'a pivot value');
+    const aggFn = col && (oneOf(ctx, entry.aggFn, `${at}.aggFn`, aggregationFnsOf(col, PIVOT_FNS)) as GridPivotValueField['aggFn'] | null);
+    if (col && aggFn && !valueFields.some((v) => v.field === col.field && v.aggFn === aggFn)) valueFields.push({ field: col.field, aggFn });
+  });
+  return {
+    rowFields: fieldList(ctx, raw.rowFields, `${path}.rowFields`, isGroupable, 'a pivot label'),
+    columnFields: fieldList(ctx, raw.columnFields, `${path}.columnFields`, isGroupable, 'a pivot label'),
+    valueFields,
+  };
+}
+
+function visibilityModel(ctx: Ctx, raw: Record<string, unknown>, path: string): GridColumnVisibilityModel {
+  const model: GridColumnVisibilityModel = {};
+  for (const key of keysOf(raw)) {
+    const col = column(ctx, key, `${path}.${key}`, isHideable, 'hidden');
+    const visible = coerceBoolean(raw[key]);
+    if (!col) continue;
+    if (visible.ok && visible.value !== null) model[col.field] = visible.value;
+    else fail(ctx, `${path}.${key}`, `Expected true or false, got ${show(raw[key])}`);
+  }
+  return model;
+}
+
+function readPart(ctx: Ctx, part: GridAiPart, raw: unknown, path: string, state: GridAiState): void {
+  if (part === 'sort') state.sortModel = sortModel(ctx, raw, path);
+  else if (part === 'grouping') state.rowGroupingModel = fieldList(ctx, raw, path, isGroupable, 'grouped');
+  else if (!isPlainObject(raw)) fail(ctx, path, `Expected an object, got ${show(raw)}`);
+  else if (part === 'filter') state.filterModel = filterModel(ctx, raw, path);
+  else if (part === 'aggregation') state.aggregationModel = aggregationModel(ctx, raw, path);
+  else if (part === 'pivot') state.pivotModel = pivotModel(ctx, raw, path);
+  else state.columnVisibilityModel = visibilityModel(ctx, raw, path);
+}
+
+/**
+ * Checks a model's reply against the columns and returns the state that is safe to apply.
+ * `json` is an object or a JSON string (bad JSON gives one error and an empty state). Unknown
+ * parts, fields, operators and enum values are dropped, each with an error; values are coerced to
+ * the column type (`"1,200"` → 1200, a date → `"YYYY-MM-DD"`); filter groups left empty are
+ * removed. Never throws, and never returns a field the columns do not allow.
+ *
+ * The result and its `state` carry the brand `Symbol.for('opengridx.ai.validated')` (not enumerable):
+ * the grid's `aiAssistant` applies only a branded state. Spreading the result keeps `state` branded.
+ * @since v3.4
+ */
+export function validateGridAiState<C extends GridAiColumn>(
+  json: unknown,
+  columns: readonly C[],
+  options: GridAiValidateOptions = {},
+): GridAiValidationResult {
+  const result = validate(json, columns, options);
+  brandGridAiValidated(result.state);
+  return brandGridAiValidated(result);
+}
+
+function validate(json: unknown, columns: readonly GridAiColumn[], options: GridAiValidateOptions): GridAiValidationResult {
+  const ctx: Ctx = { errors: [], byField: new Map() };
+  const state: GridAiState = {};
+  try {
+    for (const col of usableColumns(columns)) ctx.byField.set(col.field, col);
+    let input = json;
+    if (typeof json === 'string') {
+      try {
+        input = JSON.parse(json) as unknown;
+      } catch {
+        fail(ctx, '', 'Not valid JSON');
+        return { state, errors: ctx.errors };
+      }
+    }
+    if (!isPlainObject(input)) {
+      fail(ctx, '', `Expected an object, got ${show(input)}`);
+      return { state, errors: ctx.errors };
+    }
+    const allowed = selectedParts(options);
+    for (const key of keysOf(input)) {
+      const part = ALL_PARTS.find((p) => PART_KEYS[p] === key);
+      if (key === 'schemaVersion') {
+        if (input[key] !== 1) fail(ctx, key, `Unsupported schemaVersion ${show(input[key])}`);
+      } else if (!part) fail(ctx, key, 'Unknown part');
+      else if (!allowed.includes(part)) fail(ctx, key, 'Part not allowed');
+      else readPart(ctx, part, input[key], key, state);
+    }
+  } catch {
+    // Defensive only: a getter on a hand-built input object could throw.
+    fail(ctx, '', 'Could not read the input');
+    return { state: {}, errors: ctx.errors };
+  }
+  return { state, errors: ctx.errors };
+}

package/lib/components/AiAssistant/GridAiAssistantArea.tsx

@@ -0,0 +1,26 @@
+import type React from 'react';
+import type { GridAiAssistantPanelProps, GridSlots } from '../../types';
+import { GridAiAssistantPanel } from './GridAiAssistantPanel';
+
+interface GridAiAssistantAreaProps {
+    panelProps: GridAiAssistantPanelProps;
+    slot: GridSlots['aiAssistantPanel'];
+    slotProps: Record<string, unknown> | undefined;
+}
+
+/**
+ * Anchors the `aiAssistant` panel (or `slots.aiAssistantPanel`) under the toolbar, over the grid.
+ * Escape anywhere in it closes the panel.
+ */
+export function GridAiAssistantArea({ panelProps, slot: Slot, slotProps }: GridAiAssistantAreaProps) {
+    const handleKeyDown = (event: React.KeyboardEvent) => {
+        if (event.key !== 'Escape') return;
+        event.stopPropagation();
+        panelProps.close();
+    };
+    return (
+        <div className="ogx-ai-anchor" onKeyDown={handleKeyDown}>
+            {Slot ? <Slot {...panelProps} {...slotProps} /> : <GridAiAssistantPanel {...panelProps} />}
+        </div>
+    );
+}

package/lib/components/AiAssistant/GridAiAssistantPanel.css

@@ -0,0 +1,171 @@
+/* aiAssistant panel (v3.5): anchored under the toolbar, over the grid body. */
+.ogx-ai-anchor {
+  position: relative;
+  height: 0;
+  z-index: 20;
+}
+.ogx-ai-panel {
+  position: absolute;
+  top: 6px;
+  right: 8px;
+  width: min(480px, calc(100% - 16px));
+  max-height: var(--ogx-ai-panel-max-height, 420px);
+  overflow: auto;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 12px;
+  background: var(--ogx-overlay-background, var(--ogx-grid-background));
+  color: var(--ogx-grid-row-text);
+  border: 1px solid var(--ogx-overlay-border, var(--ogx-grid-border-color));
+  border-radius: var(--ogx-border-radius-lg, 8px);
+  box-shadow: var(--ogx-shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.15));
+  font-size: var(--ogx-font-size-sm);
+}
+.ogx-ai-panel__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.ogx-ai-panel__title {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-weight: 600;
+  color: var(--ogx-color-primary);
+}
+.ogx-ai-panel__close {
+  min-width: 28px;
+  font-size: 18px;
+  line-height: 1;
+}
+.ogx-ai-panel__form {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+}
+.ogx-ai-panel__input {
+  flex: 1 1 0;
+  min-width: 0;
+}
+.ogx-ai-panel__form > .ogx-button {
+  flex: 0 0 auto;
+}
+.ogx-ai-panel__mic {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.ogx-ai-panel__mic--on {
+  color: var(--ogx-color-error);
+  border-color: var(--ogx-color-error);
+}
+.ogx-ai-panel__suggestions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+.ogx-ai-panel__suggestion {
+  padding: 3px 10px;
+  border: 1px solid var(--ogx-border-color, var(--ogx-grid-border-color));
+  border-radius: var(--ogx-border-radius-round, 999px);
+  background: var(--ogx-grid-header-background);
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+}
+.ogx-ai-panel__suggestion:hover:not(:disabled) {
+  background: var(--ogx-grid-row-hover-background);
+}
+.ogx-ai-panel__suggestion:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+.ogx-ai-panel__suggestion:focus-visible,
+.ogx-ai-chip__remove:focus-visible,
+.ogx-ai-panel__history-item:focus-visible {
+  outline: 2px solid var(--ogx-color-primary);
+  outline-offset: 1px;
+}
+.ogx-ai-panel__status {
+  color: var(--ogx-color-gray-600, #4b5563);
+}
+.ogx-ai-panel__status--error {
+  color: var(--ogx-color-error);
+}
+.ogx-ai-panel__message {
+  margin: 0;
+  white-space: pre-wrap;
+}
+.ogx-ai-panel__changes {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+}
+.ogx-ai-panel__chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  flex: 1 1 auto;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.ogx-ai-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 4px 2px 10px;
+  border-radius: var(--ogx-border-radius-round, 999px);
+  background: var(--ogx-color-primary-light, #e0e7ff);
+  color: var(--ogx-color-primary-dark, #1e3a8a);
+}
+.ogx-ai-chip__remove {
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  background: transparent;
+  color: inherit;
+  font-size: 14px;
+  line-height: 1;
+  cursor: pointer;
+}
+.ogx-ai-chip__remove:hover {
+  background: rgba(0, 0, 0, 0.08);
+}
+.ogx-ai-panel__errors {
+  margin: 0;
+  padding-left: 18px;
+  color: var(--ogx-color-warning, #b45309);
+}
+.ogx-ai-panel__history-title {
+  font-weight: 600;
+  opacity: 0.7;
+  margin-bottom: 2px;
+}
+.ogx-ai-panel__history ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.ogx-ai-panel__history-item {
+  padding: 2px 0;
+  border: none;
+  background: transparent;
+  color: var(--ogx-color-primary);
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+.ogx-toolbar__ai-btn {
+  width: auto;
+  gap: 4px;
+  padding: 0 10px;
+  font: inherit;
+  font-size: var(--ogx-font-size-sm);
+  font-weight: 600;
+  color: var(--ogx-color-primary);
+}

package/lib/components/AiAssistant/GridAiAssistantPanel.tsx

@@ -0,0 +1,145 @@
+import React, { useEffect, useRef, useState } from 'react';
+import type { GridAiAssistantPanelProps } from '../../types';
+import { Button } from '../ui/Button';
+import { Input } from '../ui/Input';
+import { useSpeechInput } from './useSpeechInput';
+
+/** The sparkle of the Ask AI button and the panel title. */
+export function AiSparkleIcon() {
+    return (
+        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinejoin="round" aria-hidden="true" focusable="false">
+            <path d="M12 3l1.9 5.1L19 10l-5.1 1.9L12 17l-1.9-5.1L5 10l5.1-1.9z" />
+            <path d="M19 15l.8 2.2L22 18l-2.2.8L19 21l-.8-2.2L16 18l2.2-.8z" />
+        </svg>
+    );
+}
+
+function MicIcon() {
+    return (
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden="true" focusable="false">
+            <rect x="9" y="3" width="6" height="11" rx="3" />
+            <path d="M5 11a7 7 0 0 0 14 0M12 18v3" />
+        </svg>
+    );
+}
+
+/**
+ * The built-in `aiAssistant` panel: prompt input (Enter sends), suggestions, microphone where the
+ * browser has speech recognition, Stop while a request runs, the reply, the applied changes as
+ * removable chips with Undo, what was ignored, and the session's earlier prompts.
+ */
+export function GridAiAssistantPanel(props: GridAiAssistantPanelProps) {
+    const {
+        status, statusText, message, errors, chips, history, suggestions, placeholder, voiceAvailable, canUndo,
+        submit, stop, undo, removeChip, close,
+    } = props;
+    const [text, setText] = useState('');
+    const inputRef = useRef<HTMLInputElement>(null);
+    const speech = useSpeechInput(setText);
+    const running = status === 'running';
+
+    useEffect(() => {
+        if (inputRef.current) inputRef.current.focus();
+    }, []);
+
+    const send = (prompt: string) => {
+        setText(prompt);
+        submit(prompt);
+    };
+
+    // The control a click acts on goes away (Stop, a chip, Undo): focus stays in the panel.
+    const thenFocusInput = (action: () => void) => () => {
+        action();
+        if (inputRef.current) inputRef.current.focus();
+    };
+
+    const handleSubmit = (event: React.FormEvent) => {
+        event.preventDefault();
+        if (!running) submit(text);
+    };
+
+    return (
+        <div className="ogx-ai-panel" role="dialog" aria-label="Ask AI">
+            <div className="ogx-ai-panel__header">
+                <span className="ogx-ai-panel__title"><AiSparkleIcon />Ask AI</span>
+                <Button size="small" className="ogx-ai-panel__close" aria-label="Close" onClick={close}>×</Button>
+            </div>
+
+            <form className="ogx-ai-panel__form" onSubmit={handleSubmit}>
+                <Input
+                    ref={inputRef}
+                    className="ogx-ai-panel__input"
+                    value={text}
+                    placeholder={placeholder}
+                    aria-label="Prompt"
+                    autoComplete="off"
+                    onChange={(event) => setText(event.target.value)}
+                />
+                {voiceAvailable && (
+                    <Button
+                        size="small"
+                        variant="outlined"
+                        className={`ogx-ai-panel__mic${speech.listening ? ' ogx-ai-panel__mic--on' : ''}`}
+                        aria-label={speech.listening ? 'Stop dictation' : 'Dictate a prompt'}
+                        aria-pressed={speech.listening}
+                        onClick={speech.toggle}
+                    >
+                        <MicIcon />
+                    </Button>
+                )}
+                {/* Separate keys: one reused <button> would turn into the submit button during the Stop click and submit again. */}
+                {running
+                    ? <Button key="stop" size="small" variant="outlined" onClick={thenFocusInput(stop)}>Stop</Button>
+                    : <Button key="ask" size="small" variant="contained" color="primary" type="submit" disabled={text.trim() === ''}>Ask</Button>}
+            </form>
+
+            {suggestions.length > 0 && (
+                <div className="ogx-ai-panel__suggestions" aria-label="Suggestions" role="group">
+                    {suggestions.map((suggestion) => (
+                        <button key={suggestion} type="button" className="ogx-ai-panel__suggestion" disabled={running} onClick={() => send(suggestion)}>
+                            {suggestion}
+                        </button>
+                    ))}
+                </div>
+            )}
+
+            {statusText && <div className={`ogx-ai-panel__status ogx-ai-panel__status--${status}`}>{statusText}</div>}
+            {message && <p className="ogx-ai-panel__message">{message}</p>}
+
+            {(chips.length > 0 || canUndo) && (
+                <div className="ogx-ai-panel__changes">
+                    <ul className="ogx-ai-panel__chips" aria-label="Applied changes">
+                        {chips.map((chip) => (
+                            <li key={chip.id} className="ogx-ai-chip" data-part={chip.part}>
+                                <span className="ogx-ai-chip__label">{chip.label}</span>
+                                <button type="button" className="ogx-ai-chip__remove" aria-label={`Remove ${chip.label}`} onClick={thenFocusInput(() => removeChip(chip.id))}>×</button>
+                            </li>
+                        ))}
+                    </ul>
+                    {canUndo && <Button size="small" variant="outlined" className="ogx-ai-panel__undo" onClick={thenFocusInput(undo)}>Undo</Button>}
+                </div>
+            )}
+
+            {errors.length > 0 && (
+                <ul className="ogx-ai-panel__errors" aria-label="Ignored">
+                    {errors.map((error, i) => (
+                        <li key={`${error.path}:${i}`}>{error.path ? `Ignored: ${error.message}` : error.message}</li>
+                    ))}
+                </ul>
+            )}
+
+            {history.length > 0 && (
+                <div className="ogx-ai-panel__history">
+                    <div className="ogx-ai-panel__history-title">Earlier</div>
+                    <ul>
+                        {history.map((entry, i) => (
+                            <li key={`${i}:${entry.prompt}`}>
+                                <button type="button" className="ogx-ai-panel__history-item" onClick={() => setText(entry.prompt)}>{entry.prompt}</button>
+                            </li>
+                        ))}
+                    </ul>
+                </div>
+            )}
+        </div>
+    );
+}