refactor(config): lift the tool-agnostic config modals out of CcConfig

Moves FileViewer, EditorModal, ConfirmDeleteModal, ToastNotice, MdItemList,
ScopeBadge, and the shared atoms (Empty/SkeletonRows/CopyButton/formatBytes)
into client/src/components/config/ so the upcoming Codex config panel can
reuse them. EditorModal now takes a fetchContent callback instead of calling
api.ccConfig.file itself; CcConfig.tsx supplies the Claude-specific fetcher.
The moved EditorState/ConfirmDeleteState type field widens from
CcArtifactType to string so non-Claude callers can use them too, with a cast
at the two remaining Claude-specific call sites in CcConfig.tsx.

client/src/pages/CcConfig.tsx

@@ -96,6 +96,21 @@ import {
   UserCog,
 } from "lucide-react";
 import { api } from "../lib/api";
+import { FileViewer } from "../components/config/FileViewer";
+import { EditorModal, type EditorState } from "../components/config/EditorModal";
+import {
+  ConfirmDeleteModal,
+  type ConfirmDeleteState,
+} from "../components/config/ConfirmDeleteModal";
+import { ToastNotice, type Toast } from "../components/config/ToastNotice";
+import { MdItemList } from "../components/config/MdItemList";
+import { ScopeBadge } from "../components/config/ScopeBadge";
+import {
+  Empty,
+  SkeletonRows,
+  CopyButton,
+  formatBytes,
+} from "../components/config/configPrimitives";
 import type {
   CcArtifactType,
   CcAvailablePlugin,
@@ -210,34 +225,6 @@ const EMPTY_STATE: PageState = {
   hookScripts: null,
 };
 
-type EditorState =
-  | {
-      mode: "create";
-      type: CcArtifactType;
-      defaultScope: "user" | "project";
-      template: string;
-      project?: string; // set for type === "auto-memory"
-    }
-  | {
-      mode: "edit";
-      type: CcArtifactType;
-      scope: "user" | "project" | "auto-memory";
-      name: string;
-      filePath: string;
-      project?: string; // set for type === "auto-memory"
-    }
-  | null;
-
-type ConfirmDeleteState = {
-  type: CcArtifactType;
-  scope: "user" | "project" | "auto-memory";
-  name?: string;
-  path: string;
-  project?: string; // set for type === "auto-memory"
-} | null;
-
-type Toast = { kind: "success" | "error"; message: string } | null;
-
 export function CcConfig() {
   const { t } = useTranslation("ccConfig");
   const [tab, setTab] = useState<TabKey>("overview");
@@ -439,7 +426,7 @@ export function CcConfig() {
 
   const handleSave = useCallback(
     async (args: {
-      type: CcArtifactType;
+      type: string;
       targetScope: "user" | "project" | "auto-memory";
       name: string | undefined;
       content: string;
@@ -447,7 +434,7 @@ export function CcConfig() {
     }) => {
       const result: CcMutationResult = await api.ccConfig.write({
         scope: args.targetScope,
-        type: args.type,
+        type: args.type as CcArtifactType,
         name: args.name,
         content: args.content,
         project: args.project,
@@ -469,7 +456,7 @@ export function CcConfig() {
     try {
       const result = await api.ccConfig.delete({
         scope: confirmDelete.scope,
-        type: confirmDelete.type,
+        type: confirmDelete.type as CcArtifactType,
         name: confirmDelete.name,
         project: confirmDelete.project,
       });
@@ -559,7 +546,14 @@ export function CcConfig() {
       </div>
 
       {viewer && <FileViewer state={viewer} onClose={() => setViewer(null)} />}
-      {editor && <EditorModal state={editor} onClose={() => setEditor(null)} onSave={handleSave} />}
+      {editor && (
+        <EditorModal
+          state={editor}
+          fetchContent={(p) => api.ccConfig.file(p).then((r) => r.text)}
+          onClose={() => setEditor(null)}
+          onSave={handleSave}
+        />
+      )}
       {confirmDelete && (
         <ConfirmDeleteModal
           state={confirmDelete}
@@ -1295,139 +1289,6 @@ function RootRow({
   );
 }
 
-// ── MD-item generic list (skills/agents/commands/output-styles) ───────
-
-interface MdItemListProps {
-  items: CcMdItem[] | null;
-  search: string;
-  onOpen: (path: string) => void;
-  onEdit: (
-    type: CcArtifactType,
-    item: { scope: "user" | "project"; name: string; filePath: string }
-  ) => void;
-  onDelete: (
-    type: CcArtifactType,
-    scope: "user" | "project",
-    name: string | undefined,
-    path: string
-  ) => void;
-  kind: "skills" | "agents" | "commands" | "outputStyles";
-}
-
-function MdItemList({ items, search, onOpen, onEdit, onDelete, kind }: MdItemListProps) {
-  const filtered = useMemo(() => {
-    if (!items) return null;
-    const q = search.toLowerCase();
-    return items.filter((it) => {
-      if (!q) return true;
-      const blob = [it.name, it.frontmatter.description, it.frontmatter.name]
-        .filter(Boolean)
-        .join(" ")
-        .toLowerCase();
-      return blob.includes(q);
-    });
-  }, [items, search]);
-
-  if (!filtered) return <SkeletonRows n={6} />;
-  if (filtered.length === 0) return <Empty />;
-
-  return (
-    <div className="space-y-2">
-      {filtered.map((it) => (
-        <MdItemCard
-          key={`${it.scope}:${it.name}`}
-          item={it}
-          onOpen={onOpen}
-          onEdit={onEdit}
-          onDelete={onDelete}
-          kind={kind}
-        />
-      ))}
-    </div>
-  );
-}
-
-interface MdItemCardProps {
-  item: CcMdItem;
-  onOpen: (p: string) => void;
-  onEdit: (
-    type: CcArtifactType,
-    item: { scope: "user" | "project"; name: string; filePath: string }
-  ) => void;
-  onDelete: (
-    type: CcArtifactType,
-    scope: "user" | "project",
-    name: string | undefined,
-    path: string
-  ) => void;
-  kind: "skills" | "agents" | "commands" | "outputStyles";
-}
-
-function MdItemCard({ item, onOpen, onEdit, onDelete, kind }: MdItemCardProps) {
-  const { t } = useTranslation("ccConfig");
-  const artifactType: CcArtifactType = kind === "outputStyles" ? "output-styles" : kind;
-
-  const filePath = item.file || `${item.path}/SKILL.md`;
-  const description =
-    item.frontmatter.description ||
-    item.preview
-      .replace(/^#+\s.*\n/, "")
-      .trim()
-      .slice(0, 200);
-  return (
-    <div className="rounded-lg border border-border bg-surface-2 px-4 py-3 hover:border-border/80 transition-colors">
-      <div className="flex items-start justify-between gap-3">
-        <div className="min-w-0 flex-1">
-          <div className="flex items-center gap-2">
-            <span className="font-mono text-sm text-fg-primary truncate">{item.name}</span>
-            <ScopeBadge scope={item.scope} />
-            {item.frontmatter.model && (
-              <span className="text-[10px] font-mono px-1.5 py-0.5 rounded bg-accent/10 text-accent border border-accent/20">
-                {item.frontmatter.model}
-              </span>
-            )}
-          </div>
-          {description && (
-            <p className="mt-1.5 text-xs text-fg-secondary leading-relaxed line-clamp-2">
-              {description}
-            </p>
-          )}
-          {kind === "agents" && item.frontmatter.tools && (
-            <div className="mt-2 text-[11px] text-fg-muted">
-              <span className="text-fg-muted">{t("agents.tools")}:</span>{" "}
-              <span className="font-mono text-fg-secondary">{item.frontmatter.tools}</span>
-            </div>
-          )}
-          <div className="mt-2 font-mono text-[10px] text-fg-muted truncate">{filePath}</div>
-        </div>
-        <div className="flex flex-col gap-1.5 flex-shrink-0">
-          <button
-            onClick={() => onOpen(filePath)}
-            className="text-[11px] font-medium px-2 py-1 rounded-md border border-border bg-surface-1 hover:bg-surface-3 text-fg-secondary hover:text-fg-primary inline-flex items-center gap-1.5"
-          >
-            <ExternalLink className="w-3 h-3" />
-            {t("common.viewSource")}
-          </button>
-          <button
-            onClick={() => onEdit(artifactType, { scope: item.scope, name: item.name, filePath })}
-            className="text-[11px] font-medium px-2 py-1 rounded-md border border-border bg-surface-1 hover:bg-surface-3 text-fg-secondary hover:text-fg-primary inline-flex items-center gap-1.5"
-          >
-            <Pencil className="w-3 h-3" />
-            {t("edit.editButton")}
-          </button>
-          <button
-            onClick={() => onDelete(artifactType, item.scope, item.name, filePath)}
-            className="text-[11px] font-medium px-2 py-1 rounded-md border border-status-danger/30 bg-status-danger/5 hover:bg-status-danger/15 text-status-danger inline-flex items-center gap-1.5"
-          >
-            <Trash2 className="w-3 h-3" />
-            {t("edit.deleteButton")}
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-}
-
 // ── Plugins ───────────────────────────────────────────────────────────
 
 /**
@@ -3995,455 +3856,6 @@ function KeybindingsPanel({
   );
 }
 
-// ── Shared atoms ──────────────────────────────────────────────────────
-
-function ScopeBadge({ scope }: { scope: string }) {
-  const { t } = useTranslation("ccConfig");
-  const color =
-    scope === "user"
-      ? "bg-sky-500/10 text-sky-300 border-sky-500/30"
-      : scope === "project"
-        ? "bg-status-success/10 text-status-success border-status-success/30"
-        : scope === "project-local"
-          ? "bg-violet-500/10 text-violet-300 border-violet-500/30"
-          : "bg-surface-3 text-fg-secondary border-border";
-  const label =
-    scope === "project-local"
-      ? t("scope.projectLocal")
-      : scope === "user"
-        ? t("scope.user")
-        : scope === "project"
-          ? t("scope.project")
-          : scope;
-  return (
-    <span className={`text-[10px] font-mono px-1.5 py-0.5 rounded border ${color}`}>{label}</span>
-  );
-}
-
-function CopyButton({ value }: { value: string }) {
-  const { t } = useTranslation("ccConfig");
-  const [copied, setCopied] = useState(false);
-  return (
-    <button
-      onClick={async () => {
-        try {
-          await navigator.clipboard.writeText(value);
-          setCopied(true);
-          setTimeout(() => setCopied(false), 1500);
-        } catch {
-          /* clipboard unavailable */
-        }
-      }}
-      className="text-[10px] font-medium px-1.5 py-1 rounded border border-border bg-surface-1 hover:bg-surface-3 text-fg-secondary hover:text-fg-primary inline-flex items-center gap-1 flex-shrink-0"
-      title={t("common.copyPath")}
-    >
-      {copied ? <Check className="w-3 h-3" /> : <Copy className="w-3 h-3" />}
-    </button>
-  );
-}
-
-function Empty() {
-  const { t } = useTranslation("ccConfig");
-  return (
-    <div className="rounded-lg border border-dashed border-border bg-surface-2 px-4 py-8 text-center text-sm text-fg-muted">
-      {t("common.empty")}
-    </div>
-  );
-}
-
-function SkeletonRows({ n }: { n: number }) {
-  return (
-    <div className="space-y-2">
-      {Array.from({ length: n }).map((_, i) => (
-        <div key={i} className="h-16 rounded-lg border border-border bg-surface-2 animate-pulse" />
-      ))}
-    </div>
-  );
-}
-
-function formatBytes(bytes: number): string {
-  if (bytes < 1024) return `${bytes} B`;
-  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
-  return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
-}
-
-// ── File viewer modal ─────────────────────────────────────────────────
-
-function FileViewer({
-  state,
-  onClose,
-}: {
-  state: { path: string; data: CcFileResponse | null; error: string | null };
-  onClose: () => void;
-}) {
-  const { t } = useTranslation("ccConfig");
-  useEffect(() => {
-    const onKey = (e: KeyboardEvent) => {
-      if (e.key === "Escape") onClose();
-    };
-    window.addEventListener("keydown", onKey);
-    return () => window.removeEventListener("keydown", onKey);
-  }, [onClose]);
-  return (
-    <div
-      className="fixed inset-0 bg-black/60 z-40 flex items-center justify-center p-4"
-      onClick={onClose}
-    >
-      <div
-        className="relative w-full max-w-4xl max-h-[85vh] rounded-xl border border-border bg-surface-1 flex flex-col"
-        onClick={(e) => e.stopPropagation()}
-      >
-        <div className="flex items-center gap-2 border-b border-border px-4 py-2.5">
-          <FileText className="w-4 h-4 text-fg-muted" />
-          <span className="font-mono text-[12px] text-fg-secondary truncate flex-1">
-            {state.path}
-          </span>
-          <CopyButton value={state.path} />
-          <button
-            onClick={onClose}
-            className="text-fg-secondary hover:text-fg-primary p-1 rounded-md hover:bg-surface-3"
-            aria-label={t("common.close")}
-          >
-            <X className="w-4 h-4" />
-          </button>
-        </div>
-        <div className="overflow-auto p-4">
-          {state.error ? (
-            <div className="text-sm text-status-danger inline-flex items-center gap-2">
-              <AlertCircle className="w-4 h-4" />
-              {state.error}
-            </div>
-          ) : !state.data ? (
-            <div className="text-sm text-fg-muted">…</div>
-          ) : (
-            <pre className="text-[11px] font-mono text-fg-secondary whitespace-pre-wrap break-words">
-              {state.data.text}
-              {state.data.truncated && (
-                <span className="text-fg-muted italic">
-                  {"\n\n"}
-                  {t("common.truncated")}
-                </span>
-              )}
-            </pre>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-}
-
-// ── Editor modal (create + edit) ──────────────────────────────────────
-
-interface EditorModalProps {
-  state: NonNullable<EditorState>;
-  onClose: () => void;
-  onSave: (args: {
-    type: CcArtifactType;
-    targetScope: "user" | "project" | "auto-memory";
-    name: string | undefined;
-    content: string;
-    project?: string;
-  }) => Promise<void>;
-}
-
-function EditorModal({ state, onClose, onSave }: EditorModalProps) {
-  const { t } = useTranslation("ccConfig");
-  const isCreate = state.mode === "create";
-  const isAutoMemory = state.type === "auto-memory";
-  const [content, setContent] = useState<string>(isCreate ? state.template : "");
-  const [name, setName] = useState<string>("");
-  const [targetScope, setTargetScope] = useState<"user" | "project">(
-    isCreate ? state.defaultScope : state.scope === "auto-memory" ? "user" : state.scope
-  );
-  const [loading, setLoading] = useState(!isCreate);
-  const [saving, setSaving] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  // For edit mode, fetch the actual file content
-  useEffect(() => {
-    if (state.mode === "edit") {
-      setLoading(true);
-      api.ccConfig
-        .file(state.filePath)
-        .then((r) => {
-          setContent(r.text);
-          setLoading(false);
-        })
-        .catch((err: unknown) => {
-          const msg = err instanceof Error ? err.message : "unknown";
-          setError(msg);
-          setLoading(false);
-        });
-    }
-  }, [state]);
-
-  // Esc to close
-  useEffect(() => {
-    const onKey = (e: KeyboardEvent) => {
-      if (e.key === "Escape") onClose();
-    };
-    window.addEventListener("keydown", onKey);
-    return () => window.removeEventListener("keydown", onKey);
-  }, [onClose]);
-
-  const handleSave = useCallback(async () => {
-    setSaving(true);
-    setError(null);
-    try {
-      if (state.type !== "memory" && state.mode === "create" && !name) {
-        setError(t("edit.nameLabel"));
-        setSaving(false);
-        return;
-      }
-      // For auto-memory creates, append a .md extension when the user omits it.
-      const createName = isAutoMemory && !/\.md$/i.test(name) ? `${name}.md` : name;
-      const effectiveName =
-        state.mode === "edit" ? state.name : state.type === "memory" ? undefined : createName;
-      await onSave({
-        type: state.type,
-        targetScope: isAutoMemory ? "auto-memory" : targetScope,
-        name: effectiveName,
-        content,
-        project: state.project,
-      });
-    } catch (err: unknown) {
-      const msg = err instanceof Error ? err.message : "unknown";
-      setError(t("edit.writeError", { message: msg }));
-    } finally {
-      setSaving(false);
-    }
-  }, [state, targetScope, name, content, isAutoMemory, onSave, t]);
-
-  const titleText = isCreate
-    ? isAutoMemory
-      ? t("memory.newFileTitle", { project: state.project ?? "" })
-      : t("edit.newTitle", { type: state.type })
-    : t("edit.editTitle", { name: state.mode === "edit" ? state.name : "" });
-
-  return (
-    <div
-      className="fixed inset-0 bg-black/60 z-40 flex items-center justify-center p-4"
-      onClick={onClose}
-    >
-      <div
-        className="relative w-full max-w-4xl max-h-[90vh] rounded-xl border border-border bg-surface-1 flex flex-col"
-        onClick={(e) => e.stopPropagation()}
-      >
-        <div className="flex items-center gap-2 border-b border-border px-4 py-2.5">
-          <Pencil className="w-4 h-4 text-fg-muted" />
-          <span className="text-sm font-medium text-fg-primary flex-1 truncate">{titleText}</span>
-          <button
-            onClick={onClose}
-            className="text-fg-secondary hover:text-fg-primary p-1 rounded-md hover:bg-surface-3"
-            aria-label={t("common.close")}
-          >
-            <X className="w-4 h-4" />
-          </button>
-        </div>
-
-        <div className="overflow-auto p-4 space-y-3">
-          {isCreate && state.type !== "memory" && (
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
-              <div>
-                <label className="block text-[11px] font-semibold uppercase tracking-wider text-fg-muted mb-1">
-                  {t("edit.nameLabel")}
-                </label>
-                <input
-                  value={name}
-                  onChange={(e) => setName(e.target.value)}
-                  placeholder={
-                    isAutoMemory ? t("memory.namePlaceholder") : t("edit.namePlaceholder")
-                  }
-                  pattern={isAutoMemory ? undefined : "[A-Za-z0-9][A-Za-z0-9._-]{0,63}"}
-                  className="w-full bg-surface-2 border border-border rounded-md px-3 py-1.5 text-sm font-mono text-fg-primary placeholder:text-fg-muted focus:outline-none focus:border-accent/50"
-                />
-                <p className="mt-1 text-[10px] text-fg-muted">
-                  {isAutoMemory ? t("memory.nameHelp") : t("edit.nameHelp")}
-                </p>
-              </div>
-              {isAutoMemory ? (
-                <div>
-                  <label className="block text-[11px] font-semibold uppercase tracking-wider text-fg-muted mb-1">
-                    {t("memory.projectLabel")}
-                  </label>
-                  <div className="rounded-md border border-border bg-surface-2 px-3 py-1.5 font-mono text-[11px] text-fg-secondary truncate">
-                    {state.project}
-                  </div>
-                  <p className="mt-1 text-[10px] text-fg-muted">{t("memory.projectHelp")}</p>
-                </div>
-              ) : (
-                <div>
-                  <label className="block text-[11px] font-semibold uppercase tracking-wider text-fg-muted mb-1">
-                    {t("edit.scopePicker")}
-                  </label>
-                  <div className="inline-flex rounded-md border border-border bg-surface-2 p-0.5">
-                    {(["user", "project"] as const).map((s) => (
-                      <button
-                        key={s}
-                        onClick={() => setTargetScope(s)}
-                        className={`px-3 py-1 text-[11px] font-medium rounded ${
-                          targetScope === s
-                            ? "bg-accent/20 text-accent border border-accent/30"
-                            : "text-fg-secondary hover:text-fg-primary"
-                        }`}
-                      >
-                        {t(`scope.${s}`)}
-                      </button>
-                    ))}
-                  </div>
-                </div>
-              )}
-            </div>
-          )}
-
-          <div>
-            <label className="block text-[11px] font-semibold uppercase tracking-wider text-fg-muted mb-1">
-              {t("edit.contentLabel")}
-            </label>
-            {loading ? (
-              <div className="h-72 rounded-md border border-border bg-surface-2 animate-pulse" />
-            ) : (
-              <textarea
-                value={content}
-                onChange={(e) => setContent(e.target.value)}
-                spellCheck={false}
-                className="w-full h-72 bg-surface-2 border border-border rounded-md px-3 py-2 text-[11px] font-mono text-fg-primary placeholder:text-fg-muted focus:outline-none focus:border-accent/50 resize-y"
-              />
-            )}
-          </div>
-
-          {error && (
-            <div className="rounded-md border border-status-danger/40 bg-status-danger/10 px-3 py-2 text-xs text-status-danger inline-flex items-center gap-2">
-              <AlertCircle className="w-3.5 h-3.5" />
-              {error}
-            </div>
-          )}
-        </div>
-
-        <div className="border-t border-border px-4 py-3 flex items-center justify-end gap-2">
-          <button
-            onClick={onClose}
-            className="text-[12px] font-medium px-3 py-1.5 rounded-md border border-border bg-surface-2 hover:bg-surface-3 text-fg-secondary"
-          >
-            {t("edit.cancel")}
-          </button>
-          <button
-            onClick={handleSave}
-            disabled={saving || loading}
-            className="text-[12px] font-medium px-3 py-1.5 rounded-md border border-accent/40 bg-accent/15 hover:bg-accent/25 text-accent inline-flex items-center gap-1.5 disabled:opacity-60"
-          >
-            <Save className="w-3.5 h-3.5" />
-            {saving ? t("edit.saving") : t("edit.save")}
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-// ── Confirm-delete modal ──────────────────────────────────────────────
-
-interface ConfirmDeleteModalProps {
-  state: NonNullable<ConfirmDeleteState>;
-  onCancel: () => void;
-  onConfirm: () => Promise<void>;
-}
-
-function ConfirmDeleteModal({ state, onCancel, onConfirm }: ConfirmDeleteModalProps) {
-  const { t } = useTranslation("ccConfig");
-  const [busy, setBusy] = useState(false);
-
-  useEffect(() => {
-    const onKey = (e: KeyboardEvent) => {
-      if (e.key === "Escape") onCancel();
-    };
-    window.addEventListener("keydown", onKey);
-    return () => window.removeEventListener("keydown", onKey);
-  }, [onCancel]);
-
-  const handleConfirm = useCallback(async () => {
-    setBusy(true);
-    try {
-      await onConfirm();
-    } finally {
-      setBusy(false);
-    }
-  }, [onConfirm]);
-
-  return (
-    <div
-      className="fixed inset-0 bg-black/60 z-40 flex items-center justify-center p-4"
-      onClick={onCancel}
-    >
-      <div
-        className="relative w-full max-w-lg rounded-xl border border-status-danger/40 bg-surface-1"
-        onClick={(e) => e.stopPropagation()}
-      >
-        <div className="border-b border-border px-4 py-2.5 flex items-center gap-2">
-          <ShieldAlert className="w-4 h-4 text-status-danger" />
-          <span className="text-sm font-medium text-fg-primary flex-1">
-            {t("edit.confirmDelete")}
-          </span>
-        </div>
-        <div className="p-4 space-y-3">
-          <p className="text-xs text-fg-secondary leading-relaxed">{t("edit.confirmDeleteBody")}</p>
-          <div className="rounded-md border border-border bg-surface-2 px-3 py-2 font-mono text-[11px] text-fg-secondary break-all">
-            {t("edit.confirmDeletePath", { path: state.path })}
-          </div>
-        </div>
-        <div className="border-t border-border px-4 py-3 flex items-center justify-end gap-2">
-          <button
-            onClick={onCancel}
-            disabled={busy}
-            className="text-[12px] font-medium px-3 py-1.5 rounded-md border border-border bg-surface-2 hover:bg-surface-3 text-fg-secondary disabled:opacity-60"
-          >
-            {t("edit.cancel")}
-          </button>
-          <button
-            onClick={handleConfirm}
-            disabled={busy}
-            className="text-[12px] font-medium px-3 py-1.5 rounded-md border border-status-danger/50 bg-status-danger/15 hover:bg-status-danger/25 text-status-danger inline-flex items-center gap-1.5 disabled:opacity-60"
-          >
-            <Trash2 className="w-3.5 h-3.5" />
-            {busy ? t("edit.deleting") : t("edit.confirmDeleteAction")}
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-// ── Toast (5s auto-dismiss) ───────────────────────────────────────────
-
-function ToastNotice({ toast, onDismiss }: { toast: NonNullable<Toast>; onDismiss: () => void }) {
-  const isErr = toast.kind === "error";
-  return (
-    <div className="fixed bottom-6 right-6 z-50 max-w-md">
-      <div
-        className={`rounded-lg border px-3 py-2 shadow-lg flex items-start gap-2 ${
-          isErr
-            ? "border-status-danger/50 bg-status-danger/15 text-status-danger"
-            : "border-status-success/40 bg-status-success/10 text-status-success"
-        }`}
-      >
-        {isErr ? (
-          <AlertCircle className="w-4 h-4 flex-shrink-0 mt-0.5" />
-        ) : (
-          <Check className="w-4 h-4 flex-shrink-0 mt-0.5" />
-        )}
-        <span className="text-xs leading-relaxed flex-1 break-all">{toast.message}</span>
-        <button
-          onClick={onDismiss}
-          className="text-current/70 hover:text-current p-0.5"
-          aria-label="dismiss"
-        >
-          <X className="w-3 h-3" />
-        </button>
-      </div>
-    </div>
-  );
-}
-
 // ── Read-only explainer banner ─────────────────────────────────────────
 
 interface ExplainerBannerProps {