@opencorestack/opengridx 3.4.0 → 3.5.1

package/lib/ai/agentTools.ts

@@ -0,0 +1,160 @@
+// createGridAgentTools: plain tool objects ({ name, description, inputSchema, execute }) that let an AI
+// agent read and change the grid through its apiRef. No SDK: they fit the Vercel AI SDK, CopilotKit,
+// OpenAI or Anthropic tool calling and WebMCP. Every input is validated; execute never throws.
+import type { GridAiState, GridRowModel } from '../types';
+import { getCellValue } from '../utils/values';
+
+type CellColumn = Parameters<typeof getCellValue>[2];
+import { hasOwn, isPlainObject, PART_KEYS, usableColumns } from './columns';
+import { getGridAiSchema } from './schema';
+import type {
+  GridAgentApi,
+  GridAgentTool,
+  GridAgentToolResult,
+  GridAgentToolsOptions,
+  GridAiColumn,
+  GridAiJsonSchema,
+  GridAiPart,
+} from './types';
+import { validateGridAiState } from './validate';
+
+const DEFAULT_MAX_ROWS = 20;
+const MAX_ROWS_LIMIT = 1000;
+
+const SET_TOOLS: { name: string; part: GridAiPart; description: string }[] = [
+  { name: 'set_filter', part: 'filter', description: 'Replace the filter model of the grid (filters and quick-filter words).' },
+  { name: 'set_sort', part: 'sort', description: 'Replace the sort model of the grid, most significant field first. An empty list clears sorting.' },
+  { name: 'set_grouping', part: 'grouping', description: 'Group the rows by these fields, outermost first. An empty list removes grouping.' },
+  { name: 'set_aggregation', part: 'aggregation', description: 'Replace the summaries: field to aggregation function. An empty object removes them.' },
+  { name: 'set_column_visibility', part: 'columnVisibility', description: 'Show (true) or hide (false) columns. Columns not listed keep their visibility.' },
+];
+
+type ApiRef = { readonly current: GridAgentApi | null | undefined };
+
+function failure(message: string, path = ''): GridAgentToolResult {
+  return { ok: false, errors: [{ path, message }] };
+}
+
+/** Runs a tool body; a throw becomes `{ ok: false }`. */
+async function run(body: () => GridAgentToolResult): Promise<GridAgentToolResult> {
+  try {
+    return body();
+  } catch (error) {
+    return failure(error instanceof Error && error.message ? error.message : 'The tool failed');
+  }
+}
+
+function apiOf(apiRef: ApiRef): GridAgentApi | null {
+  const api = apiRef?.current;
+  return api && typeof api.getGridAiState === 'function' ? api : null;
+}
+
+/** A JSON-safe cell value: primitives as they are, a Date as an ISO string, anything else null. */
+function jsonValue(value: unknown): unknown {
+  if (value instanceof Date) return Number.isNaN(value.getTime()) ? null : value.toISOString();
+  if (typeof value === 'number') return Number.isFinite(value) ? value : null;
+  return typeof value === 'string' || typeof value === 'boolean' ? value : null;
+}
+
+function setTool(apiRef: ApiRef, columns: readonly GridAiColumn[], name: string, part: GridAiPart, description: string): GridAgentTool | null {
+  const key = PART_KEYS[part] as keyof GridAiState;
+  const schema = getGridAiSchema(columns, { include: [part] });
+  if (!hasOwn(schema.properties, key)) return null;
+  const { $schema: _version, schemaVersion: _schemaVersion, title: _title, description: _description, ...inputSchema } = schema;
+  return {
+    name,
+    description,
+    inputSchema: { ...inputSchema, required: [key] },
+    execute: (input) => run(() => {
+      const api = apiOf(apiRef);
+      if (!api) return failure('The grid is not ready');
+      if (!isPlainObject(input) || !hasOwn(input, key)) return failure(`Expected an object with "${key}"`, key);
+      const { state, errors } = validateGridAiState({ [key]: input[key] }, columns, { include: [part] });
+      // All or nothing: the agent gets the errors back and can correct its call.
+      if (errors.length > 0) return { ok: false, errors };
+      const applied: GridAiState = {};
+      if (state.filterModel) api.setFilterModel(applied.filterModel = state.filterModel);
+      if (state.sortModel) api.setSortModel(applied.sortModel = state.sortModel);
+      if (state.rowGroupingModel) api.setRowGroupingModel(applied.rowGroupingModel = state.rowGroupingModel);
+      if (state.aggregationModel) api.setAggregationModel(applied.aggregationModel = state.aggregationModel);
+      if (state.columnVisibilityModel) {
+        applied.columnVisibilityModel = { ...api.getGridAiState().columnVisibilityModel, ...state.columnVisibilityModel };
+        api.setColumnVisibilityModel(applied.columnVisibilityModel);
+      }
+      return { ok: true, applied };
+    }),
+  };
+}
+
+const NO_INPUT: GridAiJsonSchema = { type: 'object', properties: {}, additionalProperties: false };
+
+/**
+ * Tools for an AI agent: `get_grid_state`, `set_filter`, `set_sort`, `set_grouping`, `set_aggregation`,
+ * `set_column_visibility`, `clear_filters`, and `get_row_summary` only with `allowRowAccess: true` (the
+ * one tool that sends row values). Each tool is `{ name, description, inputSchema, execute }`; inputs are
+ * checked with `validateGridAiState` and applied through `apiRef` only when valid. `execute` never throws.
+ * @since v3.5
+ */
+export function createGridAgentTools<C extends GridAiColumn>(
+  apiRef: ApiRef,
+  columns: readonly C[],
+  options: GridAgentToolsOptions = {},
+): GridAgentTool[] {
+  const cols = usableColumns(columns);
+  const tools: GridAgentTool[] = [{
+    name: 'get_grid_state',
+    description: 'Read the current filter, sort, grouping, aggregation, pivot and column visibility of the grid, and its columns.',
+    inputSchema: NO_INPUT,
+    execute: () => run(() => {
+      const api = apiOf(apiRef);
+      if (!api) return failure('The grid is not ready');
+      return {
+        ok: true,
+        state: api.getGridAiState(),
+        columns: cols.map((c) => ({ field: c.field, headerName: typeof c.headerName === 'string' ? c.headerName : c.field, type: typeof c.type === 'string' ? c.type : 'string' })),
+      };
+    }),
+  }];
+  for (const { name, part, description } of SET_TOOLS) {
+    const tool = setTool(apiRef, cols, name, part, description);
+    if (tool) tools.push(tool);
+  }
+  tools.push({
+    name: 'clear_filters',
+    description: 'Remove every filter and the quick-filter words.',
+    inputSchema: NO_INPUT,
+    execute: () => run(() => {
+      const api = apiOf(apiRef);
+      if (!api) return failure('The grid is not ready');
+      const filterModel = { items: [] };
+      api.setFilterModel(filterModel);
+      return { ok: true, applied: { filterModel } };
+    }),
+  });
+  if (options.allowRowAccess === true) {
+    const maxRows = typeof options.maxRows === 'number' && options.maxRows >= 1 ? Math.min(Math.floor(options.maxRows), MAX_ROWS_LIMIT) : DEFAULT_MAX_ROWS;
+    const allowed = Array.isArray(options.fields) ? cols.filter((c) => options.fields?.includes(c.field)) : cols;
+    tools.push({
+      name: 'get_row_summary',
+      description: `Count the rows that pass the current filter and read the first ones (at most ${maxRows}, fields: ${allowed.map((c) => c.field).join(', ')}).`,
+      inputSchema: { type: 'object', properties: { limit: { type: 'integer', minimum: 1, maximum: maxRows } }, additionalProperties: false },
+      execute: (input) => run(() => {
+        const api = apiOf(apiRef);
+        if (!api) return failure('The grid is not ready');
+        const raw = isPlainObject(input) && hasOwn(input, 'limit') ? input.limit : maxRows;
+        const limit = typeof raw === 'number' && raw >= 1 ? Math.min(Math.floor(raw), maxRows) : maxRows;
+        const all = api.getAllFilteredRows();
+        const list = Array.isArray(all) ? all : [];
+        const rows = list.slice(0, limit).map((row) => {
+          const out: Record<string, unknown> = {};
+          if (!isPlainObject(row)) return out;
+          // Through the column's valueGetter, as the grid shows the cell.
+          for (const col of allowed) out[col.field] = jsonValue(getCellValue(row as GridRowModel, col.field, col as CellColumn));
+          return out;
+        });
+        return { ok: true, rowCount: list.length, rows };
+      }),
+    });
+  }
+  return tools;
+}

package/lib/ai/index.ts

@@ -1,12 +1,23 @@
-// @opencorestack/opengridx/ai: schema and validator for driving the grid from a language model.
-// No React, no dependencies and no AI SDK; the app sends the schema to its own model.
+// @opencorestack/opengridx/ai: schema, validator, prompt handler and agent tools for driving the grid
+// from a language model. No React, no dependencies and no AI SDK; the app calls its own model.
 export { getGridAiSchema } from './schema';
 export { validateGridAiState } from './validate';
+export { createGridAiPromptHandler } from './promptHandler';
+export { createGridAgentTools } from './agentTools';
 export type {
+  GridAgentApi,
+  GridAgentTool,
+  GridAgentToolResult,
+  GridAgentToolsOptions,
   GridAiColumn,
+  GridAiHistoryEntry,
   GridAiJsonSchema,
+  GridAiModelRequest,
   GridAiPart,
   GridAiPartOptions,
+  GridAiPromptContext,
+  GridAiPromptHandlerOptions,
+  GridAiPromptResult,
   GridAiSchema,
   GridAiSchemaOptions,
   GridAiState,
@@ -14,3 +25,9 @@ export type {
   GridAiValidationError,
   GridAiValidationResult,
 } from './types';
+export type {
+  GridAiAssistantOptions,
+  GridAiAssistantPanelProps,
+  GridAiAssistantStatus,
+  GridAiChip,
+} from '../types';

package/lib/ai/promptHandler.ts

@@ -0,0 +1,109 @@
+// createGridAiPromptHandler: the `aiAssistant.onPrompt` function for an app's own model. It builds the
+// schema once, calls the app's `callModel`, reads the reply (an object, JSON text, or text with a fenced
+// JSON block) and returns the validated, branded result. The grid never sees the raw reply.
+import type { GridAiPromptContext, GridAiPromptResult } from '../types';
+import { brandGridAiValidated } from '../utils/aiBrand';
+import { hasOwn, isPlainObject } from './columns';
+import { getGridAiSchema } from './schema';
+import type { GridAiColumn, GridAiPartOptions, GridAiPromptHandlerOptions, GridAiValidationError } from './types';
+import { validateGridAiState } from './validate';
+
+const FENCE = '```';
+
+/** A DOMException named `AbortError`, as `fetch` rejects with. */
+export function abortError(): Error {
+  return typeof DOMException === 'function'
+    ? new DOMException('The operation was aborted.', 'AbortError')
+    : Object.assign(new Error('The operation was aborted.'), { name: 'AbortError' });
+}
+
+/**
+ * Splits a text reply into the JSON it holds and the text around it: the whole text when it starts
+ * with `{`, else the first fenced block (with no language or `json`). A plain loop, no regex.
+ */
+export function readModelText(text: string): { json: string | null; message: string } {
+  const trimmed = text.trim();
+  if (trimmed.startsWith('{')) return { json: trimmed, message: '' };
+  const open = text.indexOf(FENCE);
+  const lineEnd = open < 0 ? -1 : text.indexOf('\n', open + FENCE.length);
+  const close = lineEnd < 0 ? -1 : text.indexOf(FENCE, lineEnd + 1);
+  const lang = close < 0 ? '' : text.slice(open + FENCE.length, lineEnd).trim().toLowerCase();
+  if (close < 0 || (lang !== '' && lang !== 'json')) return { json: null, message: trimmed };
+  return {
+    json: text.slice(lineEnd + 1, close),
+    message: `${text.slice(0, open)}${text.slice(close + FENCE.length)}`.trim(),
+  };
+}
+
+function errorText(error: unknown): string {
+  if (error instanceof Error && error.message) return error.message;
+  return typeof error === 'string' && error ? error : 'Unknown error';
+}
+
+/** A branded result with an empty state: nothing to apply, the errors explain why. */
+function emptyResult(errors: GridAiValidationError[], message?: string): GridAiPromptResult {
+  const result: GridAiPromptResult = { state: brandGridAiValidated({}), errors };
+  if (message) result.message = message;
+  return brandGridAiValidated(result);
+}
+
+/** Validates a model reply into a branded result. Never throws. */
+export function readModelReply(reply: unknown, columns: readonly GridAiColumn[], parts: GridAiPartOptions): GridAiPromptResult {
+  let json: unknown = reply;
+  let message = '';
+  if (typeof reply === 'string') {
+    const text = readModelText(reply);
+    if (text.json === null) return emptyResult([], text.message || undefined);
+    json = text.json;
+    message = text.message;
+  } else if (isPlainObject(reply) && hasOwn(reply, 'message') && typeof reply.message === 'string') {
+    // A reply such as { filterModel, message: 'Showing paid orders' }: the message is not state.
+    const { message: text, ...rest } = reply;
+    json = rest;
+    message = text as string;
+  }
+  const result: GridAiPromptResult = validateGridAiState(json, columns, parts);
+  if (message) result.message = message;
+  return result;
+}
+
+/**
+ * Builds `aiAssistant.onPrompt` for your own model. On each prompt it calls
+ * `callModel({ prompt, schema, currentState, history }, { signal })`, reads the reply (a state object,
+ * a JSON string, or a fenced JSON block inside text), validates it with `validateGridAiState` and
+ * returns the branded result. A `callModel` throw or rejection becomes
+ * `{ state: {}, errors: [{ path: '', message }] }`; an abort rejects with an `AbortError`.
+ * @since v3.5
+ */
+export function createGridAiPromptHandler<C extends GridAiColumn>(
+  options: GridAiPromptHandlerOptions<C>,
+): (prompt: string, context: GridAiPromptContext) => Promise<GridAiPromptResult> {
+  const { columns, callModel, parts, schemaOptions = {} } = options;
+  const partOptions: GridAiPartOptions = { include: parts ?? schemaOptions.include, exclude: schemaOptions.exclude };
+  const schema = getGridAiSchema(columns, { ...schemaOptions, ...partOptions });
+
+  return async (prompt, context) => {
+    const signal = context?.signal ?? new AbortController().signal;
+    if (signal.aborted) throw abortError();
+    // Stop resolves the prompt at once, even when callModel ignores the signal.
+    const aborted = new Promise<never>((_, reject) => {
+      signal.addEventListener('abort', () => reject(abortError()), { once: true });
+    });
+    aborted.catch(() => undefined);
+    let reply: unknown;
+    try {
+      const request = {
+        prompt: String(prompt),
+        schema,
+        currentState: context?.currentState ?? {},
+        history: Array.isArray(context?.history) ? context.history : [],
+      };
+      reply = await Promise.race([callModel(request, { signal }), aborted]);
+    } catch (error) {
+      if (signal.aborted) throw abortError();
+      return emptyResult([{ path: '', message: `The model call failed: ${errorText(error)}` }]);
+    }
+    if (signal.aborted) throw abortError();
+    return readModelReply(reply, columns, partOptions);
+  };
+}

package/lib/ai/types.ts

@@ -1,10 +1,14 @@
-import type {
-  GridAggregationModel,
-  GridColumnVisibilityModel,
-  GridFilterModel,
-  GridPivotModel,
-  GridRowGroupingModel,
-  GridSortItem,
+import type { GridAiPart, GridAiState, GridAiValidationError } from '../types';
+
+// The state types live with the grid's own types (lib/types), so the grid's `aiAssistant` prop can
+// use them without importing this entry point. They are type-only and re-exported from here.
+export type {
+  GridAiHistoryEntry,
+  GridAiPart,
+  GridAiPromptContext,
+  GridAiPromptResult,
+  GridAiState,
+  GridAiValidationError,
 } from '../types';
 
 /**
@@ -30,9 +34,6 @@ export interface GridAiColumn {
   isSpacer?: boolean;
 }
 
-/** A part of the grid state the model may change. */
-export type GridAiPart = 'filter' | 'sort' | 'grouping' | 'aggregation' | 'pivot' | 'columnVisibility';
-
 /** Chooses the parts of the state; `exclude` wins over `include`. Default: every part. */
 export interface GridAiPartOptions {
   include?: readonly GridAiPart[];
@@ -66,23 +67,86 @@ export interface GridAiSchema extends GridAiJsonSchema {
   properties: Record<string, GridAiJsonSchema>;
 }
 
-/** The validated state: only parts, fields, operators and values the columns allow. */
-export interface GridAiState {
-  filterModel?: GridFilterModel;
-  sortModel?: GridSortItem[];
-  rowGroupingModel?: GridRowGroupingModel;
-  aggregationModel?: GridAggregationModel;
-  pivotModel?: GridPivotModel;
-  columnVisibilityModel?: GridColumnVisibilityModel;
+/**
+ * The validated state and what was dropped. Since v3.5 the result and its `state` carry the brand
+ * `Symbol.for('opengridx.ai.validated')` (not enumerable), which the grid's `aiAssistant` checks.
+ */
+export interface GridAiValidationResult {
+  state: GridAiState;
+  errors: GridAiValidationError[];
 }
 
-/** One thing the validator dropped or could not use. `path` points into the model output. */
-export interface GridAiValidationError {
-  path: string;
-  message: string;
+/** What `callModel` receives: send it to your model. @since v3.5 */
+export interface GridAiModelRequest {
+  prompt: string;
+  /** `getGridAiSchema(columns, …)`: use it as the structured-output format. */
+  schema: GridAiSchema;
+  currentState: GridAiState;
+  history: { prompt: string; applied: GridAiState }[];
 }
 
-export interface GridAiValidationResult {
-  state: GridAiState;
-  errors: GridAiValidationError[];
+/** Options of `createGridAiPromptHandler`. @since v3.5 */
+export interface GridAiPromptHandlerOptions<C extends GridAiColumn = GridAiColumn> {
+  columns: readonly C[];
+  /**
+   * Calls your model. Resolve with its reply: a state object, a JSON string, or text with a fenced JSON
+   * block. A string `message` key next to the state, or the text around the JSON, is shown as the reply.
+   */
+  callModel: (request: GridAiModelRequest, options: { signal: AbortSignal }) => Promise<unknown>;
+  /** The parts the model may change (schema and validation). Default: every part. */
+  parts?: readonly GridAiPart[];
+  /** Options for the schema; its `include` / `exclude` also limit validation. */
+  schemaOptions?: GridAiSchemaOptions;
+}
+
+/**
+ * The part of `GridApi` the agent tools use. A grid's `apiRef.current` fits it.
+ * @since v3.5
+ */
+export interface GridAgentApi {
+  getGridAiState: () => GridAiState;
+  setFilterModel: (model: NonNullable<GridAiState['filterModel']>) => void;
+  setSortModel: (model: NonNullable<GridAiState['sortModel']>) => void;
+  setRowGroupingModel: (model: NonNullable<GridAiState['rowGroupingModel']>) => void;
+  setAggregationModel: (model: NonNullable<GridAiState['aggregationModel']>) => void;
+  setColumnVisibilityModel: (model: NonNullable<GridAiState['columnVisibilityModel']>) => void;
+  getAllFilteredRows: () => object[];
+}
+
+/** Options of `createGridAgentTools`. @since v3.5 */
+export interface GridAgentToolsOptions {
+  /** Adds `get_row_summary`, the one tool that sends row values to the model. Default: false. */
+  allowRowAccess?: boolean;
+  /** Fields `get_row_summary` returns. Default: every column the tools were given. */
+  fields?: readonly string[];
+  /** Most rows `get_row_summary` returns. Default: 20. */
+  maxRows?: number;
+}
+
+/** What every tool's `execute` resolves with. It never throws or rejects. @since v3.5 */
+export interface GridAgentToolResult {
+  ok: boolean;
+  /** The state the tool applied. */
+  applied?: GridAiState;
+  /** Why nothing was applied. */
+  errors?: GridAiValidationError[];
+  /** `get_grid_state`: the current models. */
+  state?: GridAiState;
+  /** `get_grid_state`: the columns the tools know. */
+  columns?: { field: string; headerName: string; type: string }[];
+  /** `get_row_summary`: the number of rows that pass the filter. */
+  rowCount?: number;
+  /** `get_row_summary`: the first rows, limited to the allowed fields. */
+  rows?: Record<string, unknown>[];
+}
+
+/**
+ * A tool in the shape most tool-calling APIs take: `name`, `description`, a JSON Schema for the input
+ * and `execute`. No SDK is involved. @since v3.5
+ */
+export interface GridAgentTool {
+  name: string;
+  description: string;
+  inputSchema: GridAiJsonSchema;
+  execute: (input: unknown) => Promise<GridAgentToolResult>;
 }

package/lib/ai/validate.ts

@@ -14,6 +14,7 @@ import type {
   GridSortItem,
 } from '../types';
 import { toLocalDateString } from '../utils/values';
+import { brandGridAiValidated } from '../utils/aiBrand';
 import { coerceBoolean, coerceValue } from './coerce';
 import {
   ALL_PARTS,
@@ -244,6 +245,9 @@ function readPart(ctx: Ctx, part: GridAiPart, raw: unknown, path: string, state:
  * 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>(
@@ -251,6 +255,12 @@ export function validateGridAiState<C extends GridAiColumn>(
   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 {

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);
+}