@plannotator/ui 0.30.0 → 0.32.0

package/webmcp/schema.ts

@@ -0,0 +1,81 @@
+/**
+ * Minimal JSON Schema checker for the shapes the tool catalogs declare:
+ * `object` (properties / required / additionalProperties), `string`
+ * (minLength / maxLength / enum), `integer` / `number` (minimum / maximum),
+ * `boolean`, `array` (items / minItems / maxItems). Anything else passes.
+ *
+ * Pure and dependency-free so it can move to `@plannotator/core` untouched.
+ * Returns the first problem as one sentence for the model, or `null`.
+ */
+
+export type JsonSchema = Record<string, unknown>;
+
+export function validateAgainstSchema(schema: JsonSchema | undefined, value: unknown, path = 'input'): string | null {
+  if (!schema) return null;
+  const type = schema.type;
+  const enumValues = schema.enum;
+  if (Array.isArray(enumValues) && !enumValues.some((v) => v === value)) {
+    return `${path} must be one of ${enumValues.map((v) => JSON.stringify(v)).join(', ')}`;
+  }
+  switch (type) {
+    case 'object': {
+      if (value === null || typeof value !== 'object' || Array.isArray(value)) return `${path} must be an object`;
+      const record = value as Record<string, unknown>;
+      const properties = (schema.properties ?? {}) as Record<string, JsonSchema>;
+      const required = Array.isArray(schema.required) ? (schema.required as string[]) : [];
+      for (const key of required) {
+        if (record[key] === undefined) return `${path}.${key} is required`;
+      }
+      for (const [key, child] of Object.entries(record)) {
+        const childSchema = properties[key];
+        if (!childSchema) {
+          if (schema.additionalProperties === false) return `${path}.${key} is not a known field`;
+          continue;
+        }
+        if (child === undefined) continue;
+        const problem = validateAgainstSchema(childSchema, child, `${path}.${key}`);
+        if (problem) return problem;
+      }
+      return null;
+    }
+    case 'string': {
+      if (typeof value !== 'string') return `${path} must be a string`;
+      if (typeof schema.minLength === 'number' && value.length < schema.minLength) {
+        return `${path} must be at least ${schema.minLength} characters`;
+      }
+      if (typeof schema.maxLength === 'number' && value.length > schema.maxLength) {
+        return `${path} must be at most ${schema.maxLength} characters`;
+      }
+      return null;
+    }
+    case 'integer':
+    case 'number': {
+      if (typeof value !== 'number' || !Number.isFinite(value)) return `${path} must be a number`;
+      if (type === 'integer' && !Number.isInteger(value)) return `${path} must be an integer`;
+      if (typeof schema.minimum === 'number' && value < schema.minimum) return `${path} must be >= ${schema.minimum}`;
+      if (typeof schema.maximum === 'number' && value > schema.maximum) return `${path} must be <= ${schema.maximum}`;
+      return null;
+    }
+    case 'boolean':
+      return typeof value === 'boolean' ? null : `${path} must be a boolean`;
+    case 'array': {
+      if (!Array.isArray(value)) return `${path} must be an array`;
+      if (typeof schema.minItems === 'number' && value.length < schema.minItems) {
+        return `${path} must have at least ${schema.minItems} item${schema.minItems === 1 ? '' : 's'}`;
+      }
+      if (typeof schema.maxItems === 'number' && value.length > schema.maxItems) {
+        return `${path} must have at most ${schema.maxItems} items`;
+      }
+      const items = schema.items as JsonSchema | undefined;
+      if (items) {
+        for (let i = 0; i < value.length; i++) {
+          const problem = validateAgainstSchema(items, value[i], `${path}[${i}]`);
+          if (problem) return problem;
+        }
+      }
+      return null;
+    }
+    default:
+      return null;
+  }
+}

package/webmcp/toolset.ts

@@ -0,0 +1,337 @@
+/**
+ * Tool definitions, the response envelope, the execute wrapper, and the
+ * per-document registry.
+ *
+ * Spec-agnostic: the only WebMCP names live in ./modelContext.ts. Everything
+ * here works against `ModelContextLike`, so a fake can be injected in tests
+ * and the whole engine runs under plain `bun test`.
+ */
+
+import {
+  TOOL_NAME_PATTERN,
+  type ModelContextExecuteContext,
+  type ModelContextLike,
+  type ModelContextToolAnnotations,
+  type ModelContextToolDescriptor,
+} from './modelContext';
+import { validateAgainstSchema, type JsonSchema } from './schema';
+import { recordToolCall } from './activity';
+
+// ---------------------------------------------------------------------------
+// Envelope
+// ---------------------------------------------------------------------------
+
+export type ToolErrorCode =
+  | 'invalid_input'
+  | 'not_found'
+  | 'ambiguous'
+  | 'forbidden'
+  | 'not_available'
+  | 'conflict'
+  | 'failed';
+
+export interface ToolError {
+  code: ToolErrorCode;
+  message: string;
+  hint?: string;
+  /** For `ambiguous`: the contexts the caller can choose between. */
+  candidates?: string[];
+}
+
+export type NudgeCode =
+  | 'annotations_new'
+  | 'annotations_removed'
+  | 'replies_new'
+  | 'composer_open'
+  | 'source_stale'
+  | 'document_edited'
+  | 'comment_only_surface'
+  | 'page_changed'
+  | 'other_document_active'
+  | 'pending_unsent'
+  | 'session_decided'
+  | 'truncated';
+
+export interface Nudge {
+  /** Machine-readable, stable. */
+  code: NudgeCode;
+  /** One sentence for the model. Static text we own; never document or comment text. */
+  message: string;
+  /** Annotation ids this is about. */
+  ids?: string[];
+  /** Document this is about (folder / linked-doc sessions) or page (live app). */
+  path?: string;
+  /** Heading slug this is about. */
+  section?: string;
+  /** The one call that acts on it. */
+  action?: { tool: string; args: Record<string, unknown> };
+}
+
+/** What a handler returns; the engine appends nudges. */
+export type ToolResult<T> =
+  | { ok: true; data: T; cursor?: string }
+  | { ok: false; error: ToolError };
+
+/** What the browser agent receives, identical for every tool. */
+export type ToolResponse<T = unknown> =
+  | { ok: true; data: T; nudges: Nudge[]; cursor?: string }
+  | { ok: false; error: ToolError; nudges: Nudge[] };
+
+export function ok<T>(data: T, cursor?: string): ToolResult<T> {
+  return cursor === undefined ? { ok: true, data } : { ok: true, data, cursor };
+}
+
+export function fail(code: ToolErrorCode, message: string, extra?: { hint?: string; candidates?: string[] }): ToolResult<never> {
+  const error: ToolError = { code, message };
+  if (extra?.hint) error.hint = extra.hint;
+  if (extra?.candidates) error.candidates = extra.candidates;
+  return { ok: false, error };
+}
+
+// ---------------------------------------------------------------------------
+// Tool specs
+// ---------------------------------------------------------------------------
+
+export interface ToolSpec<I = unknown, T = unknown> {
+  /** Bare name; the registry applies the policy prefix. */
+  name: string;
+  title?: string;
+  description: string;
+  inputSchema?: JsonSchema;
+  annotations?: ModelContextToolAnnotations;
+  execute: (input: I, context: ModelContextExecuteContext) => ToolResult<T> | Promise<ToolResult<T>>;
+}
+
+/** Spec-level limits the catalog tests pin. */
+export const TOOL_DESCRIPTION_MAX_CHARS = 500;
+export const TOOL_PARAM_DESCRIPTION_MAX_CHARS = 150;
+
+/**
+ * Identity function with definition-time validation. A bad name or an empty
+ * description is a programming error, so it throws here (never at register
+ * time, where the browser would reject silently).
+ */
+export function defineTool<I, T>(spec: ToolSpec<I, T>): ToolSpec<I, T> {
+  if (!TOOL_NAME_PATTERN.test(spec.name)) {
+    throw new Error(`webmcp: invalid tool name "${spec.name}"`);
+  }
+  if (!spec.description || !spec.description.trim()) {
+    throw new Error(`webmcp: tool "${spec.name}" needs a description`);
+  }
+  return spec;
+}
+
+// ---------------------------------------------------------------------------
+// Execute wrapper
+// ---------------------------------------------------------------------------
+
+export interface ToolsetHooks {
+  /** Runs AFTER the handler, so a mutation's nudges reflect the mutation. */
+  buildNudges: (info: { tool: string; result: ToolResult<unknown> }) => Nudge[];
+  /** Runs after the envelope is built (the watermark advances here). */
+  afterResponse?: (response: ToolResponse) => void;
+}
+
+function describeError(error: unknown): string {
+  if (error instanceof Error) return error.message || error.name;
+  if (typeof error === 'string') return error;
+  return 'unexpected failure';
+}
+
+/**
+ * Run one tool call end to end: validate the input against the declared
+ * schema, invoke the handler, coerce the result into the envelope, attach
+ * nudges (error responses included), notify hooks, and record activity.
+ *
+ * The promise NEVER rejects and the value is always JSON-serializable: a
+ * rejection or an unserializable value would reach the agent as a bare
+ * `UnknownError` with no message.
+ */
+export async function runTool(
+  spec: ToolSpec<unknown, unknown>,
+  hooks: ToolsetHooks,
+  rawInput: unknown,
+  context: ModelContextExecuteContext,
+): Promise<ToolResponse> {
+  let result: ToolResult<unknown>;
+  try {
+    const input = rawInput === undefined || rawInput === null ? {} : rawInput;
+    const problem = validateAgainstSchema(spec.inputSchema, input);
+    if (problem) {
+      result = fail('invalid_input', problem);
+    } else {
+      const returned = await spec.execute(input, context);
+      result =
+        returned && typeof returned === 'object' && typeof (returned as ToolResult<unknown>).ok === 'boolean'
+          ? returned
+          : fail('failed', 'the tool produced no result');
+    }
+  } catch (error) {
+    result = fail('failed', describeError(error));
+  }
+
+  let nudges: Nudge[] = [];
+  try {
+    nudges = hooks.buildNudges({ tool: spec.name, result }) ?? [];
+  } catch {
+    nudges = [];
+  }
+
+  // Equality (not truthiness) narrowing: the ui tsconfig runs without
+  // strictNullChecks, where `if (result.ok)` does not narrow the union.
+  let response: ToolResponse;
+  if (result.ok === false) {
+    response = { ok: false, error: result.error, nudges };
+  } else {
+    response = { ok: true, data: result.data === undefined ? null : result.data, nudges };
+    if (result.cursor !== undefined) response.cursor = result.cursor;
+  }
+
+  try {
+    // Strip `undefined` members and prove serializability in one pass.
+    response = JSON.parse(JSON.stringify(response)) as ToolResponse;
+  } catch (error) {
+    response = { ok: false, error: { code: 'failed', message: `unserializable result: ${describeError(error)}` }, nudges: [] };
+  }
+
+  try {
+    hooks.afterResponse?.(response);
+  } catch {
+    // Hook failures never reach the agent.
+  }
+  if (response.ok) recordToolCall(spec.name);
+  return response;
+}
+
+// ---------------------------------------------------------------------------
+// Registry
+// ---------------------------------------------------------------------------
+
+export interface ToolRegistry {
+  /**
+   * Register the set's tools (reconciled by prefixed name) and return a
+   * detach function that aborts every controller the set owns. Re-attaching
+   * the same set with the same names and unchanged descriptors only swaps the
+   * handlers in place, so a React re-render never touches `registerTool`.
+   */
+  attach(setId: string, tools: ToolSpec<never, unknown>[], hooks: ToolsetHooks): () => void;
+  /** Prefixed names currently registered through this registry. */
+  names(): string[];
+}
+
+interface LiveEntry {
+  setId: string;
+  controller: AbortController;
+  signature: string;
+  current: { spec: ToolSpec<unknown, unknown>; hooks: ToolsetHooks };
+}
+
+function signatureOf(spec: ToolSpec<unknown, unknown>): string {
+  return JSON.stringify([spec.title ?? null, spec.description, spec.inputSchema ?? null, spec.annotations ?? null]);
+}
+
+export interface CreateToolRegistryOptions {
+  /** Read at attach time so a late policy override is honored. */
+  prefix: () => string;
+  warn?: (message: string) => void;
+}
+
+export function createToolRegistry(ctx: ModelContextLike, options: CreateToolRegistryOptions): ToolRegistry {
+  const live = new Map<string, LiveEntry>();
+  const warnedNames = new Set<string>();
+  const warn = options.warn ?? ((message: string) => console.warn(message));
+
+  const warnOnce = (name: string, message: string) => {
+    if (warnedNames.has(name)) return;
+    warnedNames.add(name);
+    warn(message);
+  };
+
+  const register = (name: string, setId: string, spec: ToolSpec<unknown, unknown>, hooks: ToolsetHooks) => {
+    const controller = new AbortController();
+    const entry: LiveEntry = { setId, controller, signature: signatureOf(spec), current: { spec, hooks } };
+    live.set(name, entry);
+    const descriptor: ModelContextToolDescriptor = {
+      name,
+      description: spec.description,
+      ...(spec.title ? { title: spec.title } : {}),
+      ...(spec.inputSchema ? { inputSchema: spec.inputSchema } : {}),
+      ...(spec.annotations ? { annotations: spec.annotations } : {}),
+      execute: (input, context) => runTool(entry.current.spec, entry.current.hooks, input, context),
+    };
+    let registration: Promise<unknown>;
+    try {
+      registration = Promise.resolve(ctx.registerTool(descriptor, { signal: controller.signal }));
+    } catch (error) {
+      registration = Promise.reject(error);
+    }
+    registration.catch((error: unknown) => {
+      // An abort rejects the registration promise by design; only a genuine
+      // registration failure is worth one line.
+      if (controller.signal.aborted) return;
+      warnOnce(name, `webmcp: could not register "${name}": ${describeError(error)}`);
+    });
+  };
+
+  const unregister = (name: string) => {
+    const entry = live.get(name);
+    if (!entry) return;
+    live.delete(name);
+    entry.controller.abort();
+  };
+
+  return {
+    attach(setId, tools, hooks) {
+      const prefix = options.prefix();
+      const wanted = new Set<string>();
+      for (const bare of tools) {
+        const spec = bare as ToolSpec<unknown, unknown>;
+        const name = `${prefix}${spec.name}`;
+        if (!TOOL_NAME_PATTERN.test(name)) {
+          warnOnce(name, `webmcp: skipping tool with invalid name "${name}"`);
+          continue;
+        }
+        wanted.add(name);
+        const existing = live.get(name);
+        if (existing && existing.setId !== setId) {
+          warnOnce(name, `webmcp: tool "${name}" is already registered by "${existing.setId}"; skipping the copy from "${setId}"`);
+          continue;
+        }
+        if (existing) {
+          if (existing.signature === signatureOf(spec)) {
+            existing.current = { spec, hooks };
+            continue;
+          }
+          unregister(name);
+        }
+        register(name, setId, spec, hooks);
+      }
+      for (const [name, entry] of live) {
+        if (entry.setId === setId && !wanted.has(name)) unregister(name);
+      }
+      return () => {
+        for (const [name, entry] of live) {
+          if (entry.setId === setId) unregister(name);
+        }
+      };
+    },
+    names() {
+      return [...live.keys()].sort();
+    },
+  };
+}
+
+const registries = new WeakMap<object, ToolRegistry>();
+
+/**
+ * One registry per ModelContext (which is one per Document): registration is
+ * document-scoped and the name space is flat.
+ */
+export function getRegistryFor(ctx: ModelContextLike, options: CreateToolRegistryOptions): ToolRegistry {
+  let registry = registries.get(ctx);
+  if (!registry) {
+    registry = createToolRegistry(ctx, options);
+    registries.set(ctx, registry);
+  }
+  return registry;
+}

package/webmcp/useToolset.ts

@@ -0,0 +1,74 @@
+/**
+ * React hook: attach a named toolset to the document's registry.
+ *
+ * Zero footprint without WebMCP: `resolveModelContext` runs once per mount
+ * and, when it returns null, the hook builds nothing, registers nothing and
+ * owns no effect body. Handlers read through refs, so a re-render never
+ * touches `registerTool`; only `deps` (surface membership inputs) rebuild the
+ * tool list, and the registry reconciles by name so an unchanged descriptor
+ * merely swaps its handler in place.
+ */
+import { useEffect, useMemo, useRef } from 'react';
+import { resolveModelContext, type ModelContextLike } from './modelContext';
+import { getWebMcpPolicy } from './policy';
+import { getRegistryFor, type ToolSpec, type ToolsetHooks } from './toolset';
+
+export interface UseToolsetOptions {
+  /** Stable set id (one per surface). */
+  id: string;
+  /** Registers while true; false aborts every controller of the set. Default true. */
+  active?: boolean;
+  /** Builds the tool list; only invoked when a provider exists and the set is active. */
+  build: () => ToolSpec<never, unknown>[];
+  /** Inputs whose change should rebuild the list (surface, read-only, submitted, folder). */
+  deps: ReadonlyArray<unknown>;
+  hooks: ToolsetHooks;
+  /** Test seam: inject a fake ModelContext instead of resolving `document`. */
+  context?: ModelContextLike | null;
+}
+
+export interface UseToolsetResult {
+  /** `document.modelContext` exists in this browser. */
+  available: boolean;
+  /** Tools are currently attached. */
+  registered: boolean;
+}
+
+export function useToolset(options: UseToolsetOptions): UseToolsetResult {
+  const { id, active = true, build, deps, hooks, context } = options;
+  // One detection per mount; the entry point is created with the document
+  // and never appears later.
+  const ctx = useMemo(() => (context === undefined ? resolveModelContext() : context), [context]);
+  const enabled = !!ctx && getWebMcpPolicy().enabled && active;
+
+  const hooksRef = useRef(hooks);
+  hooksRef.current = hooks;
+  const stableHooks = useMemo<ToolsetHooks>(() => ({
+    buildNudges: (info) => hooksRef.current.buildNudges(info),
+    afterResponse: (response) => hooksRef.current.afterResponse?.(response),
+  }), []);
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const tools = useMemo(() => (enabled ? build() : null), [enabled, ...deps]);
+
+  // Two effects on purpose: a rebuilt tool list reconciles IN PLACE (the
+  // registry swaps handlers for unchanged descriptors and only aborts names
+  // that disappeared), while unmount and `active: false` are the only paths
+  // that detach the whole set. A single effect keyed on `tools` would detach
+  // and re-register every tool on each rebuild.
+  const detachRef = useRef<(() => void) | null>(null);
+  useEffect(() => {
+    if (!ctx || !enabled || !tools) return;
+    const registry = getRegistryFor(ctx, { prefix: () => getWebMcpPolicy().namePrefix });
+    detachRef.current = registry.attach(id, tools, stableHooks);
+  }, [ctx, enabled, tools, id, stableHooks]);
+  useEffect(() => {
+    if (!ctx || !enabled) return;
+    return () => {
+      detachRef.current?.();
+      detachRef.current = null;
+    };
+  }, [ctx, enabled, id]);
+
+  return { available: !!ctx, registered: enabled && !!tools };
+}

package/components/PlanAIAnnouncementDialog.tsx

@@ -1,187 +0,0 @@
-import React from 'react';
-import { createPortal } from 'react-dom';
-import type { Origin } from '@plannotator/core/agents';
-import { AGENT_CONFIG, getAgentAIProviderTypes, getAgentName } from '@plannotator/core/agents';
-import { SparklesIcon } from './SparklesIcon';
-import { getProviderMeta } from './ProviderIcons';
-
-interface PlanAIAnnouncementProvider {
-  id: string;
-  name: string;
-}
-
-interface PlanAIAnnouncementDialogProps {
-  isOpen: boolean;
-  origin?: Origin | null;
-  providerName?: string | null;
-  /** Actually-detected providers (installed + authenticated). Cards matching one of these are selectable. */
-  providers?: PlanAIAnnouncementProvider[];
-  onSelectProvider?: (providerId: string) => void;
-  onOpenAI: () => void;
-  onDismiss: () => void;
-}
-
-const SUPPORTED_AI_PROVIDER_TYPES = Array.from(
-  new Set(
-    (Object.keys(AGENT_CONFIG) as Origin[])
-      .flatMap(agentOrigin => getAgentAIProviderTypes(agentOrigin))
-  )
-);
-
-const UNSUPPORTED_AI_ORIGINS = (Object.keys(AGENT_CONFIG) as Origin[])
-  .filter(agentOrigin => getAgentAIProviderTypes(agentOrigin).length === 0);
-
-export const PlanAIAnnouncementDialog: React.FC<PlanAIAnnouncementDialogProps> = ({
-  isOpen,
-  origin,
-  providerName,
-  providers = [],
-  onSelectProvider,
-  onOpenAI,
-  onDismiss,
-}) => {
-  if (!isOpen) return null;
-
-  const agentLabel = getAgentName(origin ?? undefined);
-  const providerLabel = providerName ? getProviderMeta(providerName).label : null;
-  const unsupportedLabels = UNSUPPORTED_AI_ORIGINS.map(getAgentName).join(', ');
-
-  return createPortal(
-    <div className="fixed inset-0 z-[100] flex items-center justify-center bg-background/90 backdrop-blur-sm p-4">
-      <div className="bg-card border border-border rounded-xl w-full max-w-xl shadow-2xl">
-        {/* Header */}
-        <div className="p-5 border-b border-border">
-          <div className="flex items-center gap-2 mb-2">
-            <div className="p-1.5 rounded-lg bg-primary/15">
-              <SparklesIcon className="w-5 h-5 text-primary" />
-            </div>
-            <h3 className="font-semibold text-base">New: Ask AI for annotated documents</h3>
-          </div>
-          <p className="text-sm text-muted-foreground">
-            Chat with plans and annotated documents directly inside Plannotator.
-          </p>
-          {providerLabel && (
-            <p className="text-xs text-muted-foreground/70 mt-1">
-              Plannotator selected {providerLabel} for {agentLabel}.
-            </p>
-          )}
-        </div>
-
-        {/* Details */}
-        <div className="p-4 space-y-4">
-          {SUPPORTED_AI_PROVIDER_TYPES.length > 0 && (
-            <div>
-              <div className="text-xs text-muted-foreground mb-2">Supported providers</div>
-              <div className="grid grid-cols-2 gap-2 sm:grid-cols-4">
-                {SUPPORTED_AI_PROVIDER_TYPES.map(providerType => {
-                  const meta = getProviderMeta(providerType);
-                  const Icon = meta.icon;
-                  const isSelected = providerType === providerName;
-                  // A card is selectable only if the provider is actually detected on this machine.
-                  const detected = providers.find(p => p.name === providerType) ?? null;
-                  const isSelectable = Boolean(detected && onSelectProvider);
-
-                  const inner = (
-                    <>
-                      <div className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-md bg-background/70 text-muted-foreground">
-                        <Icon className="h-[18px] w-[18px]" />
-                      </div>
-                      <div className="min-w-0">
-                        <div className="truncate text-sm font-medium">{meta.label}</div>
-                        {isSelected ? (
-                          <div className="text-[10px] uppercase tracking-wide text-primary">selected</div>
-                        ) : !detected ? (
-                          <div className="text-[10px] text-muted-foreground/60">not installed</div>
-                        ) : null}
-                      </div>
-                    </>
-                  );
-
-                  if (!isSelectable) {
-                    return (
-                      <div
-                        key={providerType}
-                        className={`flex min-h-16 items-center gap-2 rounded-lg border p-2.5 ${
-                          isSelected
-                            ? 'border-primary bg-primary/5'
-                            : 'border-border bg-muted/35 opacity-60'
-                        }`}
-                      >
-                        {inner}
-                      </div>
-                    );
-                  }
-
-                  return (
-                    <button
-                      key={providerType}
-                      type="button"
-                      onClick={() => onSelectProvider?.(detected!.id)}
-                      aria-pressed={isSelected}
-                      className={`flex min-h-16 items-center gap-2 rounded-lg border p-2.5 text-left transition-colors ${
-                        isSelected
-                          ? 'border-primary bg-primary/5'
-                          : 'border-border bg-muted/35 hover:border-muted-foreground/30 hover:bg-muted/60'
-                      }`}
-                    >
-                      {inner}
-                    </button>
-                  );
-                })}
-              </div>
-            </div>
-          )}
-
-          <div className="grid gap-2 sm:grid-cols-2">
-            <div className="flex items-start gap-3 p-3 rounded-lg border border-transparent bg-muted/50">
-              <SparklesIcon className="w-4 h-4 mt-0.5 text-primary flex-shrink-0" />
-              <div className="flex-1">
-                <div className="text-sm font-medium">Ask from comments</div>
-                <div className="text-xs text-muted-foreground">
-                  Use Ask AI from a comment popover to chat about selected text.
-                </div>
-              </div>
-            </div>
-            <div className="flex items-start gap-3 p-3 rounded-lg border border-transparent bg-muted/50">
-              <SparklesIcon className="w-4 h-4 mt-0.5 text-primary flex-shrink-0" />
-              <div className="flex-1">
-                <div className="text-sm font-medium">Open the side chat</div>
-                <div className="text-xs text-muted-foreground">
-                  Use the AI button in the header for broader document questions.
-                </div>
-              </div>
-            </div>
-          </div>
-
-          {unsupportedLabels && (
-            <p className="text-[11px] leading-relaxed text-muted-foreground/70">
-              Not supported for Ask AI yet: {unsupportedLabels}.
-            </p>
-          )}
-        </div>
-
-        {/* Footer */}
-        <div className="p-4 border-t border-border flex justify-between items-center gap-3">
-          <p className="text-xs text-muted-foreground">
-            This notice only appears once.
-          </p>
-          <div className="flex items-center gap-2">
-            <button
-              onClick={onDismiss}
-              className="px-4 py-2 border border-border rounded-lg text-sm font-medium text-muted-foreground hover:bg-muted hover:text-foreground transition-colors"
-            >
-              Dismiss
-            </button>
-            <button
-              onClick={onOpenAI}
-              className="px-4 py-2 bg-primary text-primary-foreground rounded-lg text-sm font-medium hover:opacity-90 transition-opacity"
-            >
-              Open AI Chat
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>,
-    document.body
-  );
-};