fix: enforce atomic agent registration contract

packages/console/src/components/AgentDetailClient.tsx

@@ -12,10 +12,7 @@ import Modal from '@/components/ui/Modal';
 import Link from 'next/link';
 import type { AgentKey, Operation } from '@elydora/shared';
 import { useTranslation } from 'react-i18next';
-
-const HOOKS_INTEGRATIONS = new Set([
-  'claudecode', 'cursor', 'gemini', 'kirocli', 'kiroide', 'opencode', 'copilot', 'letta',
-]);
+import { ADAPTER_INTEGRATION_IDS } from '@/features/agent-registration/integrations';
 
 export default function AgentDetailClient({ agentId }: { agentId: string }) {
   const { t } = useTranslation();
@@ -39,7 +36,9 @@ export default function AgentDetailClient({ agentId }: { agentId: string }) {
   const [revokeError, setRevokeError] = useState<string | null>(null);
 
   const agent = agentData?.agent;
-  const supportsFreeze = !agent?.integration_type || HOOKS_INTEGRATIONS.has(agent.integration_type);
+  const supportsFreeze = agent
+    ? ADAPTER_INTEGRATION_IDS.has(agent.integration_type)
+    : false;
   const keys = agentData?.keys ?? [];
   const operations = opsData?.operations ?? [];
 

packages/console/src/components/agent-registration/ConnectStep.tsx

@@ -0,0 +1,114 @@
+'use client';
+
+import { useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import type { AgentCredentials } from '@/features/agent-registration/credentials';
+import type { IntegrationCatalogItem } from '@/features/agent-registration/integrations';
+import {
+  buildInstallInstructions,
+  SDK_LANGUAGES,
+  type SdkLanguage,
+} from '@/features/agent-registration/install-instructions';
+import CopyControl from './CopyControl';
+
+interface ConnectStepProps {
+  readonly integration: IntegrationCatalogItem;
+  readonly credentials: AgentCredentials;
+  readonly token: string;
+  readonly onBack: () => void;
+  readonly onDone: () => void;
+}
+
+export default function ConnectStep({
+  integration,
+  credentials,
+  token,
+  onBack,
+  onDone,
+}: ConnectStepProps) {
+  const { t } = useTranslation();
+  const [language, setLanguage] = useState<SdkLanguage>('node');
+  const baseUrl = process.env.NEXT_PUBLIC_API_BASE_URL ?? 'http://localhost:8787';
+  const instructions = useMemo(
+    () => buildInstallInstructions(language, { integration, credentials, token, baseUrl }),
+    [baseUrl, credentials, integration, language, token],
+  );
+
+  return (
+    <div className="space-y-5">
+      <div className="flex items-center justify-between border-b border-border pb-3">
+        <span className="section-label">{t('agentRegistration.integration')}</span>
+        <span className="font-mono text-[12px] text-ink">{integration.name}</span>
+      </div>
+
+      <div className="flex border-b border-border" role="tablist" aria-label={t('agentRegistration.sdkLanguage')}>
+        {SDK_LANGUAGES.map((item) => (
+          <button
+            key={item}
+            type="button"
+            role="tab"
+            aria-selected={language === item}
+            onClick={() => setLanguage(item)}
+            className={`px-4 py-2 font-mono text-[10px] uppercase tracking-wider border-b-2 -mb-px ${
+              language === item ? 'border-ink text-ink' : 'border-transparent text-ink-dim hover:text-ink'
+            }`}
+          >
+            {item}
+          </button>
+        ))}
+      </div>
+
+      <section aria-labelledby="setup-command-label">
+        <div className="flex items-center justify-between mb-2">
+          <h3 id="setup-command-label" className="section-label">
+            {integration.mode === 'adapter' ? t('agentRegistration.install') : t('agentRegistration.configure')}
+          </h3>
+          <CopyControl value={instructions.setup} />
+        </div>
+        <pre className="p-4 bg-ink text-[#EAEAE5] font-mono text-[10px] leading-relaxed whitespace-pre-wrap break-all overflow-x-auto">
+          {instructions.setup}
+        </pre>
+      </section>
+
+      {instructions.usage && (
+        <section aria-labelledby="record-operation-label">
+          <div className="flex items-center justify-between mb-2">
+            <h3 id="record-operation-label" className="section-label">{t('agentRegistration.record')}</h3>
+            <CopyControl value={instructions.usage} />
+          </div>
+          <pre className="p-4 bg-ink text-[#EAEAE5] font-mono text-[10px] leading-relaxed whitespace-pre-wrap break-all overflow-x-auto">
+            {instructions.usage}
+          </pre>
+        </section>
+      )}
+
+      {instructions.verify && (
+        <section aria-labelledby="verify-command-label">
+          <div className="flex items-center justify-between mb-2">
+            <h3 id="verify-command-label" className="section-label">{t('agentRegistration.verify')}</h3>
+            <CopyControl value={instructions.verify} />
+          </div>
+          <code className="block px-3 py-2 border-y border-border font-mono text-[11px] text-ink">
+            {instructions.verify}
+          </code>
+        </section>
+      )}
+
+      {instructions.postInstall && (
+        <ol className="border-t border-border" aria-label={t('agentRegistration.postInstall')}>
+          {instructions.postInstall.map((step, index) => (
+            <li key={step} className="grid grid-cols-[2rem_1fr] gap-2 py-2 border-b border-border font-mono text-[11px] text-ink">
+              <span className="text-ink-dim tabular-nums">{index + 1}</span>
+              <span>{step}</span>
+            </li>
+          ))}
+        </ol>
+      )}
+
+      <div className="flex items-center justify-between pt-2">
+        <button type="button" className="btn-ghost" onClick={onBack}>{t('common.back')}</button>
+        <button type="button" className="btn-brutalist" onClick={onDone}>{t('agentRegistration.done')}</button>
+      </div>
+    </div>
+  );
+}

packages/console/src/components/agent-registration/CopyControl.tsx

@@ -0,0 +1,40 @@
+'use client';
+
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+interface CopyControlProps {
+  readonly value: string;
+  readonly className?: string;
+}
+
+export default function CopyControl({ value, className = '' }: CopyControlProps) {
+  const { t } = useTranslation();
+  const [status, setStatus] = useState<'idle' | 'copied' | 'failed'>('idle');
+
+  const copy = async () => {
+    try {
+      await navigator.clipboard.writeText(value);
+      setStatus('copied');
+    } catch {
+      setStatus('failed');
+    }
+  };
+
+  return (
+    <span className={`inline-flex items-center gap-2 ${className}`}>
+      <button
+        type="button"
+        onClick={copy}
+        className="font-mono text-[10px] uppercase tracking-wider text-ink-dim hover:text-ink"
+      >
+        {status === 'copied' ? t('common.copied') : t('common.copy')}
+      </button>
+      {status === 'failed' && (
+        <span className="font-mono text-[10px] text-red-600" role="alert">
+          {t('agentRegistration.copyFailed')}
+        </span>
+      )}
+    </span>
+  );
+}

packages/console/src/components/agent-registration/CredentialsStep.tsx

@@ -0,0 +1,168 @@
+'use client';
+
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import type { AgentCredentials } from '@/features/agent-registration/credentials';
+import CopyControl from './CopyControl';
+
+const EXPIRATION_OPTIONS = [
+  { id: '24hours', seconds: 86_400 },
+  { id: '7days', seconds: 604_800 },
+  { id: '1month', seconds: 2_592_000 },
+  { id: '1year', seconds: 31_536_000 },
+  { id: 'custom', seconds: -1 },
+  { id: 'neverExpire', seconds: null },
+] as const;
+const MAX_CUSTOM_DAYS = 365;
+
+type ExpirationId = (typeof EXPIRATION_OPTIONS)[number]['id'];
+
+interface CredentialsStepProps {
+  readonly credentials: AgentCredentials;
+  readonly token?: string;
+  readonly issuingToken: boolean;
+  readonly tokenError: string | null;
+  readonly onIssueToken: (ttlSeconds: number | null) => void;
+  readonly onContinue: () => void;
+}
+
+function CredentialRow({ label, value }: { readonly label: string; readonly value: string }) {
+  return (
+    <div className="grid grid-cols-[7rem_minmax(0,1fr)_auto] items-center gap-3 py-2 border-b border-border last:border-b-0">
+      <dt className="section-label">{label}</dt>
+      <dd className="font-mono text-[11px] text-ink truncate" title={value}>{value}</dd>
+      <dd><CopyControl value={value} /></dd>
+    </div>
+  );
+}
+export default function CredentialsStep({
+  credentials,
+  token,
+  issuingToken,
+  tokenError,
+  onIssueToken,
+  onContinue,
+}: CredentialsStepProps) {
+  const { t } = useTranslation();
+  const [expiration, setExpiration] = useState<ExpirationId>('24hours');
+  const [customDays, setCustomDays] = useState('');
+  const [validationError, setValidationError] = useState<string | null>(null);
+
+  const issueToken = () => {
+    const option = EXPIRATION_OPTIONS.find(({ id }) => id === expiration);
+    if (!option) {
+      setValidationError(t('agentRegistration.invalidExpiration'));
+      return;
+    }
+
+    if (option.seconds === -1) {
+      const days = Number.parseInt(customDays, 10);
+      if (!Number.isSafeInteger(days) || days < 1 || days > MAX_CUSTOM_DAYS) {
+        setValidationError(t('agentRegistration.enterValidDays'));
+        return;
+      }
+      setValidationError(null);
+      onIssueToken(days * 86_400);
+      return;
+    }
+
+    setValidationError(null);
+    onIssueToken(option.seconds);
+  };
+
+  return (
+    <div className="space-y-6">
+      <dl>
+        <CredentialRow label={t('agentRegistration.credAgentId')} value={credentials.agentId} />
+        <CredentialRow label={t('agentRegistration.credKeyId')} value={credentials.kid} />
+        <CredentialRow label={t('agentRegistration.credOrgId')} value={credentials.orgId} />
+      </dl>
+
+      <section aria-labelledby="private-key-label">
+        <div className="flex items-center justify-between mb-2">
+          <h3 id="private-key-label" className="section-label text-red-700">
+            {t('agentRegistration.privateKeySaveNow')}
+          </h3>
+          <CopyControl value={credentials.privateKey} />
+        </div>
+        <code className="block p-3 bg-ink text-[#EAEAE5] font-mono text-[10px] break-all select-all">
+          {credentials.privateKey}
+        </code>
+        <p className="font-mono text-[10px] text-ink-dim mt-2">
+          {t('agentRegistration.privateKeyWarning')}
+        </p>
+      </section>
+
+      <section aria-labelledby="api-token-label" className="border-t border-border pt-5">
+        <h3 id="api-token-label" className="section-label mb-3">
+          {t('agentRegistration.apiToken')}
+        </h3>
+
+        {token ? (
+          <div>
+            <div className="flex items-center justify-between mb-2">
+              <span className="font-mono text-[10px] text-ink-dim">
+                {t('agentRegistration.tokenIssued')}
+              </span>
+              <CopyControl value={token} />
+            </div>
+            <code className="block p-3 bg-ink text-[#EAEAE5] font-mono text-[10px] break-all select-all">
+              {token}
+            </code>
+          </div>
+        ) : (
+          <div className="flex flex-col sm:flex-row sm:items-end gap-3">
+            <div className="flex-1">
+              <label htmlFor="token-expiration" className="section-label block mb-1.5">
+                {t('agentRegistration.tokenExpiration')}
+              </label>
+              <select
+                id="token-expiration"
+                value={expiration}
+                onChange={(event) => setExpiration(event.target.value as ExpirationId)}
+                className="w-full px-3 py-2 bg-transparent border border-border font-mono text-[12px] text-ink focus:outline-none focus:border-ink"
+                disabled={issuingToken}
+              >
+                {EXPIRATION_OPTIONS.map(({ id }) => (
+                  <option key={id} value={id}>{t(`tokenExpiration.${id}`)}</option>
+                ))}
+              </select>
+            </div>
+            {expiration === 'custom' && (
+              <div className="sm:w-28">
+                <label htmlFor="custom-token-days" className="section-label block mb-1.5">
+                  {t('agentRegistration.days')}
+                </label>
+                <input
+                  id="custom-token-days"
+                  type="number"
+                  min="1"
+                  step="1"
+                  value={customDays}
+                  onChange={(event) => setCustomDays(event.target.value)}
+                  className="w-full px-3 py-2 bg-transparent border border-border font-mono text-[12px] text-ink focus:outline-none focus:border-ink"
+                  disabled={issuingToken}
+                />
+              </div>
+            )}
+            <button type="button" className="btn-brutalist" onClick={issueToken} disabled={issuingToken}>
+              {issuingToken ? t('agentRegistration.issuing') : t('agentRegistration.issueApiToken')}
+            </button>
+          </div>
+        )}
+
+        {(validationError || tokenError) && (
+          <p className="font-mono text-[11px] text-red-600 mt-2" role="alert">
+            {validationError ?? tokenError}
+          </p>
+        )}
+      </section>
+
+      <div className="flex justify-end pt-2">
+        <button type="button" className="btn-brutalist" onClick={onContinue} disabled={!token}>
+          {t('common.continue')}
+        </button>
+      </div>
+    </div>
+  );
+}

packages/console/src/components/agent-registration/DetailsStep.tsx

@@ -0,0 +1,101 @@
+'use client';
+
+import { useState, type FormEvent } from 'react';
+import { useTranslation } from 'react-i18next';
+import type { IntegrationCatalogItem } from '@/features/agent-registration/integrations';
+
+export interface AgentDetails {
+  readonly displayName: string;
+  readonly responsibleEntity?: string;
+}
+
+interface DetailsStepProps {
+  readonly integration: IntegrationCatalogItem;
+  readonly submitting: boolean;
+  readonly blocked: boolean;
+  readonly error: string | null;
+  readonly onSubmit: (details: AgentDetails) => void;
+  readonly onBack: () => void;
+}
+
+export default function DetailsStep({
+  integration,
+  submitting,
+  blocked,
+  error,
+  onSubmit,
+  onBack,
+}: DetailsStepProps) {
+  const { t } = useTranslation();
+  const [displayName, setDisplayName] = useState('');
+  const [responsibleEntity, setResponsibleEntity] = useState('');
+  const [validationError, setValidationError] = useState<string | null>(null);
+
+  const submit = (event: FormEvent) => {
+    event.preventDefault();
+    const normalizedName = displayName.trim();
+    if (!normalizedName) {
+      setValidationError(t('agentRegistration.displayNameRequired'));
+      return;
+    }
+    setValidationError(null);
+    onSubmit({
+      displayName: normalizedName,
+      responsibleEntity: responsibleEntity.trim() || undefined,
+    });
+  };
+
+  return (
+    <form onSubmit={submit} className="space-y-5">
+      <div className="flex items-center justify-between border-b border-border pb-3">
+        <span className="section-label">{t('agentRegistration.integration')}</span>
+        <span className="font-mono text-[12px] text-ink">{integration.name}</span>
+      </div>
+
+      {(validationError || error) && (
+        <div className="px-3 py-2 border border-red-300 bg-red-50 text-red-700 font-mono text-[11px]" role="alert">
+          {validationError ?? error}
+        </div>
+      )}
+
+      <div>
+        <label htmlFor="agent-display-name" className="section-label block mb-1.5">
+          {t('agentRegistration.displayName')}
+        </label>
+        <input
+          id="agent-display-name"
+          value={displayName}
+          onChange={(event) => setDisplayName(event.target.value)}
+          className="w-full px-3 py-2 bg-transparent border border-border font-mono text-[13px] text-ink placeholder:text-ink-dim focus:outline-none focus:border-ink"
+          placeholder={t('agentRegistration.displayNamePlaceholder')}
+          disabled={submitting || blocked}
+          required
+          autoFocus
+        />
+      </div>
+
+      <div>
+        <label htmlFor="agent-responsible-entity" className="section-label block mb-1.5">
+          {t('agentRegistration.responsibleEntity')}
+        </label>
+        <input
+          id="agent-responsible-entity"
+          value={responsibleEntity}
+          onChange={(event) => setResponsibleEntity(event.target.value)}
+          className="w-full px-3 py-2 bg-transparent border border-border font-mono text-[13px] text-ink placeholder:text-ink-dim focus:outline-none focus:border-ink"
+          placeholder={t('agentRegistration.responsibleEntityPlaceholder')}
+          disabled={submitting || blocked}
+        />
+      </div>
+
+      <div className="flex items-center justify-between pt-2">
+        <button type="button" className="btn-ghost" onClick={onBack} disabled={submitting || blocked}>
+          {t('common.back')}
+        </button>
+        <button type="submit" className="btn-brutalist" disabled={submitting || blocked}>
+          {submitting ? t('agentRegistration.submitting') : t('agentRegistration.submit')}
+        </button>
+      </div>
+    </form>
+  );
+}

packages/console/src/components/agent-registration/IntegrationStep.tsx

@@ -0,0 +1,54 @@
+'use client';
+
+import { useTranslation } from 'react-i18next';
+import {
+  INTEGRATION_CATALOG,
+  type IntegrationCatalogItem,
+  type IntegrationMode,
+} from '@/features/agent-registration/integrations';
+
+interface IntegrationStepProps {
+  readonly onSelect: (integration: IntegrationCatalogItem) => void;
+}
+
+function IntegrationGroup({
+  mode,
+  onSelect,
+}: {
+  readonly mode: IntegrationMode;
+  readonly onSelect: (integration: IntegrationCatalogItem) => void;
+}) {
+  const { t } = useTranslation();
+  const integrations = INTEGRATION_CATALOG.filter((item) => item.mode === mode);
+
+  return (
+    <section aria-labelledby={`integration-${mode}`}>
+      <h3 id={`integration-${mode}`} className="section-label mb-2">
+        {t(`agentRegistration.integrationGroups.${mode}`)}
+      </h3>
+      <div className="grid sm:grid-cols-2 border-t border-border sm:[&>button:nth-child(odd)]:border-r">
+        {integrations.map((integration) => (
+          <button
+            key={integration.id}
+            type="button"
+            onClick={() => onSelect(integration)}
+            className="group flex items-center justify-between gap-3 px-3 py-3 text-left border-b border-border hover:bg-surface focus-visible:bg-surface focus-visible:outline-none"
+          >
+            <span className="font-mono text-[12px] text-ink">{integration.name}</span>
+            <span className="font-mono text-[10px] text-ink-dim opacity-0 group-hover:opacity-100 group-focus-visible:opacity-100 transition-opacity" aria-hidden="true">
+              →
+            </span>
+          </button>
+        ))}
+      </div>
+    </section>
+  );
+}
+export default function IntegrationStep({ onSelect }: IntegrationStepProps) {
+  return (
+    <div className="space-y-6">
+      <IntegrationGroup mode="adapter" onSelect={onSelect} />
+      <IntegrationGroup mode="sdk" onSelect={onSelect} />
+    </div>
+  );
+}

packages/console/src/components/agent-registration/RegistrationProgress.tsx

@@ -0,0 +1,28 @@
+'use client';
+
+import { useTranslation } from 'react-i18next';
+
+const STEPS = ['integration', 'details', 'credentials', 'connect'] as const;
+export type RegistrationStep = (typeof STEPS)[number];
+
+export default function RegistrationProgress({ current }: { current: RegistrationStep }) {
+  const { t } = useTranslation();
+  const activeIndex = STEPS.indexOf(current);
+
+  return (
+    <ol className="grid grid-cols-4 border-b border-border mb-6" aria-label={t('agentRegistration.progress')}>
+      {STEPS.map((step, index) => (
+        <li
+          key={step}
+          className={`pb-2 font-mono text-[10px] uppercase tracking-wider border-b -mb-px ${
+            index <= activeIndex ? 'border-ink text-ink' : 'border-transparent text-ink-dim'
+          }`}
+          aria-current={index === activeIndex ? 'step' : undefined}
+        >
+          <span className="mr-1.5 tabular-nums">{index + 1}</span>
+          <span className="hidden sm:inline">{t(`agentRegistration.steps.${step}`)}</span>
+        </li>
+      ))}
+    </ol>
+  );
+}

packages/console/src/components/ui/Modal.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect, useCallback, useRef } from 'react';
+import { useEffect, useRef, useId } from 'react';
 import { createPortal } from 'react-dom';
 
 interface ModalProps {
@@ -9,28 +9,78 @@ interface ModalProps {
   title: string;
   children: React.ReactNode;
   width?: string;
+  dismissible?: boolean;
 }
 
-export default function Modal({ isOpen, onClose, title, children, width = 'max-w-lg' }: ModalProps) {
+export default function Modal({
+  isOpen,
+  onClose,
+  title,
+  children,
+  width = 'max-w-lg',
+  dismissible = true,
+}: ModalProps) {
+  const titleId = useId();
   const overlayRef = useRef<HTMLDivElement>(null);
+  const dialogRef = useRef<HTMLDivElement>(null);
+  const previousFocusRef = useRef<Element | null>(null);
+  const onCloseRef = useRef(onClose);
+  onCloseRef.current = onClose;
 
-  const handleKeyDown = useCallback(
-    (e: KeyboardEvent) => {
-      if (e.key === 'Escape') onClose();
-    },
-    [onClose],
-  );
-
+  // Save previous focus on open; restore on unmount (close)
   useEffect(() => {
-    if (isOpen) {
-      document.addEventListener('keydown', handleKeyDown);
-      document.body.style.overflow = 'hidden';
-    }
+    if (!isOpen) return;
+
+    previousFocusRef.current = document.activeElement;
+    document.body.style.overflow = 'hidden';
+    requestAnimationFrame(() => {
+      dialogRef.current?.focus();
+    });
+
     return () => {
-      document.removeEventListener('keydown', handleKeyDown);
       document.body.style.overflow = '';
+      if (previousFocusRef.current instanceof HTMLElement) {
+        previousFocusRef.current.focus();
+      }
     };
-  }, [isOpen, handleKeyDown]);
+  }, [isOpen]);
+
+  // Keydown listener — uses ref so it never changes identity
+  useEffect(() => {
+    if (!isOpen) return;
+
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === 'Escape' && dismissible) {
+        onCloseRef.current();
+        return;
+      }
+
+      if (e.key === 'Tab' && dialogRef.current) {
+        const focusable = dialogRef.current.querySelectorAll<HTMLElement>(
+          'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+        );
+        if (focusable.length === 0) return;
+
+        const first = focusable[0]!;
+        const last = focusable[focusable.length - 1]!;
+
+        if (e.shiftKey) {
+          if (document.activeElement === first) {
+            e.preventDefault();
+            last.focus();
+          }
+        } else {
+          if (document.activeElement === last) {
+            e.preventDefault();
+            first.focus();
+          }
+        }
+      }
+    };
+
+    document.addEventListener('keydown', handler);
+    return () => document.removeEventListener('keydown', handler);
+  }, [dismissible, isOpen]);
 
   if (!isOpen) return null;
 
@@ -39,32 +89,40 @@ export default function Modal({ isOpen, onClose, title, children, width = 'max-w
       ref={overlayRef}
       className="fixed inset-0 md:left-[260px] z-[100] flex items-center justify-center modal-overlay"
       onClick={(e) => {
-        if (e.target === overlayRef.current) onClose();
+        if (dismissible && e.target === overlayRef.current) onCloseRef.current();
       }}
+      role="presentation"
     >
       <div
+        ref={dialogRef}
         className={`${width} w-full mx-4 bg-bg border border-ink relative fade-in`}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby={titleId}
+        tabIndex={-1}
       >
         {/* Crosshair corners */}
-        <span className="crosshair ch-tl" />
-        <span className="crosshair ch-tr" />
-        <span className="crosshair ch-bl" />
-        <span className="crosshair ch-br" />
+        <span className="crosshair ch-tl" aria-hidden="true" />
+        <span className="crosshair ch-tr" aria-hidden="true" />
+        <span className="crosshair ch-bl" aria-hidden="true" />
+        <span className="crosshair ch-br" aria-hidden="true" />
 
         {/* Header */}
         <div className="flex items-center justify-between px-4 sm:px-6 py-4 border-b border-border">
-          <h2 className="font-sans text-lg font-semibold tracking-tight text-ink min-w-0 truncate">
+          <h2 id={titleId} className="font-sans text-lg font-semibold tracking-tight text-ink min-w-0 truncate">
             {title}
           </h2>
-          <button
-            onClick={onClose}
-            className="w-8 h-8 flex items-center justify-center text-ink-dim hover:text-ink transition-colors"
-            aria-label="Close"
-          >
-            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.5">
-              <path d="M1 1l12 12M13 1L1 13" />
-            </svg>
-          </button>
+          {dismissible && (
+            <button
+              onClick={() => onCloseRef.current()}
+              className="w-8 h-8 flex items-center justify-center text-ink-dim hover:text-ink transition-colors"
+              aria-label="Close"
+            >
+              <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.5" aria-hidden="true">
+                <path d="M1 1l12 12M13 1L1 13" />
+              </svg>
+            </button>
+          )}
         </div>
 
         {/* Content */}