` renders `
`, which iterates the manager's toasts via `useToastManager()`. Vue's Pinia `notificationStore` dispatches `bb.vue-notification` window events; a module-eval-time listener forwards them to the manager.
+
+**Tech Stack:** React, `@base-ui/react/toast`, `class-variance-authority`, Tailwind CSS v4, Vue 3 (Pinia store stays, only renderer dies), Vite `import.meta.glob`.
+
+**Companion docs:**
+- Spec: `docs/plans/2026-05-13-notification-react-migration-design.md`
+- Playbook: `docs/plans/2026-04-08-react-migration-playbook.md`
+
+---
+
+## Branch setup
+
+- [ ] **Step 1: Pull latest main and create branch**
+
+```bash
+git checkout main && git pull --ff-only
+git checkout -b chore/frontend/notification-react-migration
+```
+
+- [ ] **Step 2: Baseline green**
+
+```bash
+pnpm --dir frontend type-check
+pnpm --dir frontend test
+```
+
+Expected: type-check exit 0; vitest reports all tests pass.
+
+---
+
+## Task 1: Add shadcn-style wrappers around Base UI Toast parts
+
+Static UI primitives. No runtime wiring yet.
+
+**Files:**
+- Create: `frontend/src/react/components/ui/toast.tsx`
+
+- [ ] **Step 1: Write `toast.tsx`**
+
+```tsx
+import { Toast as BaseToast } from "@base-ui/react/toast";
+import { cva, type VariantProps } from "class-variance-authority";
+import { CheckCircle2, Info, AlertTriangle, XCircle, X } from "lucide-react";
+import type { ComponentProps, ReactNode } from "react";
+import { cn } from "@/react/lib/utils";
+
+// Map BBNotificationStyle ("SUCCESS" | "INFO" | "WARN" | "CRITICAL") onto
+// the visual variant of the toast container.
+export type ToastVariant = "success" | "info" | "warning" | "error";
+
+const toastRootVariants = cva(
+ // Base: absolutely-positioned card. Base UI Toast.Root supplies its own
+ // transform-based animation slot via CSS variables; we layer surface
+ // styling on top.
+ [
+ "absolute right-0 bottom-0",
+ "w-(--toast-width) max-w-[calc(100vw-2rem)]",
+ "rounded-md border bg-popover text-popover-foreground shadow-md",
+ "px-4 py-3 pr-10",
+ // Base UI emits these CSS vars; we use them for the stack/expand transforms.
+ "transform [transition:transform_250ms,opacity_250ms]",
+ "[transform:translateY(calc(var(--toast-swipe-movement-y,0px)+var(--toast-index)*-12px))_scale(calc(1-var(--toast-index)*0.05))]",
+ "[&[data-expanded]]:[transform:translateY(calc(var(--toast-offset-y,0px)*-1-var(--toast-index)*16px))]",
+ "[&[data-starting-style]]:opacity-0",
+ "[&[data-ending-style]]:opacity-0",
+ ].join(" "),
+ {
+ variants: {
+ variant: {
+ success: "border-success/40",
+ info: "border-info/40",
+ warning: "border-warning/40",
+ error: "border-error/40",
+ },
+ },
+ defaultVariants: { variant: "info" },
+ }
+);
+
+const iconVariants = cva("size-5 shrink-0 mt-0.5", {
+ variants: {
+ variant: {
+ success: "text-success",
+ info: "text-info",
+ warning: "text-warning",
+ error: "text-error",
+ },
+ },
+ defaultVariants: { variant: "info" },
+});
+
+const iconMap: Record
= {
+ success: CheckCircle2,
+ info: Info,
+ warning: AlertTriangle,
+ error: XCircle,
+};
+
+type ToastRootProps = Omit<
+ ComponentProps,
+ "className"
+> &
+ VariantProps & {
+ className?: string;
+ showIcon?: boolean;
+ children?: ReactNode;
+ };
+
+function ToastRoot({
+ variant = "info",
+ showIcon = true,
+ className,
+ children,
+ ...props
+}: ToastRootProps) {
+ const Icon = iconMap[variant ?? "info"];
+ return (
+
+
+ {showIcon ?
: null}
+
{children}
+
to index.html (visually empty; toasts
+portal into the overlay layer). mountToaster() follows the existing
+mountSidebar pattern: lazy-load via import.meta.glob to keep vue-tsc
+away from .tsx, wrap with StrictMode + I18nextProvider, createRoot()
+once.
+
+Importing mountToaster pulls in @/react/lib/toast as a side effect,
+which registers the bb.vue-notification window listener at module-eval
+time. Bootstrap order: Vue app mounts -> Toaster mounts -> any
+subsequent pushNotification reaches the React renderer.
+
+Still inert: nothing emits bb.vue-notification yet. The next commit
+flips the Pinia store and tears down the Vue renderer atomically.
+
+Co-Authored-By: Claude Opus 4.7 (1M context)
"
+```
+
+---
+
+## Task 5: Atomic switch โ flip the Pinia store, drop the Vue renderer
+
+This is the single cutover commit. All-or-nothing to avoid double-rendering.
+
+**Files:**
+- Modify: `frontend/src/store/modules/notification.ts`
+- Modify: `frontend/src/react/stores/app/notification.ts`
+- Modify: `frontend/src/react/stores/app/types.ts`
+- Modify: `frontend/src/react/shell-bridge.ts`
+- Modify: `frontend/src/App.vue`
+- Modify: `frontend/src/shell-bridge.test.ts`
+- Delete: `frontend/src/NotificationContext.vue`
+
+- [ ] **Step 1: Rewrite the Pinia store to emit window events**
+
+Replace the entire contents of `frontend/src/store/modules/notification.ts`:
+
+```ts
+import { defineStore } from "pinia";
+import { v1 as uuidv1 } from "uuid";
+import type { Notification, NotificationCreate } from "@/types";
+
+const VUE_NOTIFICATION_EVENT = "bb.vue-notification";
+
+/**
+ * Notification store โ kept as a Pinia store for backward compatibility
+ * with the 17 Vue-side pushNotification() callers. Internally it no longer
+ * queues anything; instead each push dispatches a window CustomEvent that
+ * the React toast manager (frontend/src/react/lib/toast.ts) catches and
+ * renders. Vue retains no renderer.
+ *
+ * This store dies entirely in Phase B3 (Pinia -> Zustand).
+ */
+export const useNotificationStore = defineStore("notification", {
+ state: () => ({}),
+ actions: {
+ pushNotification(notificationCreate: NotificationCreate) {
+ const notification: Notification = {
+ id: uuidv1(),
+ createdTs: Date.now() / 1000,
+ ...notificationCreate,
+ };
+ if (typeof window !== "undefined") {
+ window.dispatchEvent(
+ new CustomEvent(VUE_NOTIFICATION_EVENT, {
+ detail: notification,
+ })
+ );
+ }
+ },
+ },
+});
+
+export const pushNotification = (notificationCreate: NotificationCreate) => {
+ useNotificationStore().pushNotification(notificationCreate);
+};
+```
+
+This drops `appendNotification`, `removeNotification`, `tryPopNotification`, `notificationByModule`, and `findNotification` โ none have any external consumer after this commit. Vue callers continue to use `pushNotification` unchanged.
+
+- [ ] **Step 2: Swap React notify slice to call toastManager directly**
+
+Replace `frontend/src/react/stores/app/notification.ts`:
+
+```ts
+import { pushReactNotification } from "@/react/lib/toast";
+import type { AppSliceCreator, NotificationSlice } from "./types";
+
+export const createNotificationSlice: AppSliceCreator = () => ({
+ notify: (notification) => {
+ pushReactNotification(notification);
+ },
+});
+```
+
+The `notifications` array state is gone โ no consumer reads it.
+
+- [ ] **Step 3: Update the slice type**
+
+Read `frontend/src/react/stores/app/types.ts`, find the `NotificationSlice` type:
+
+```ts
+export type NotificationSlice = {
+ notifications: NotificationCreate[];
+ notify: (notification: NotificationCreate) => void;
+};
+```
+
+Replace with:
+
+```ts
+export type NotificationSlice = {
+ notify: (notification: NotificationCreate) => void;
+};
+```
+
+- [ ] **Step 4: Strip the obsolete bridge from `react/shell-bridge.ts`**
+
+Read `frontend/src/react/shell-bridge.ts` and replace its contents:
+
+```ts
+export const ReactShellBridgeEvent = {
+ localeChange: "bb.react-locale-change",
+ quickstartReset: "bb.react-quickstart-reset",
+} as const;
+
+export type ReactShellBridgeEventName =
+ (typeof ReactShellBridgeEvent)[keyof typeof ReactShellBridgeEvent];
+
+export type ReactQuickstartResetDetail = {
+ keys: string[];
+};
+
+export function emitReactLocaleChange(lang: string) {
+ window.dispatchEvent(
+ new CustomEvent(ReactShellBridgeEvent.localeChange, { detail: lang })
+ );
+}
+
+export function emitReactQuickstartReset(detail: ReactQuickstartResetDetail) {
+ window.dispatchEvent(
+ new CustomEvent(ReactShellBridgeEvent.quickstartReset, { detail })
+ );
+}
+```
+
+This removes the `notification` event key and `emitReactNotification`. Notification flow now goes Vueโ`bb.vue-notification`โ`toastManager` directly; no React-to-Vue notification bridge.
+
+- [ ] **Step 5: Unwrap `App.vue`**
+
+Read `frontend/src/App.vue`, find the notification wrappers (lines 9โ20 in the current file):
+
+```vue
+
+
+
+ ...
+
+
+
+```
+
+Replace with just the inner content (keep `OverlayStackManager`):
+
+```vue
+
+ ...
+
+```
+
+Also remove from the script imports section:
+
+```ts
+import { NConfigProvider, NNotificationProvider } from "naive-ui";
+// becomes:
+import { NConfigProvider } from "naive-ui";
+
+// and delete:
+import NotificationContext from "./NotificationContext.vue";
+```
+
+If `NNotificationProvider` had any prop attributes (placement, max, etc.) on the opening tag in App.vue, those go away too โ Base UI Toast handles positioning at the React layer.
+
+- [ ] **Step 6: Update test mocks**
+
+Read `frontend/src/shell-bridge.test.ts`. Find the block mocking `NotificationContext.vue`:
+
+```ts
+vi.mock("./components/misc/OverlayStackManager.vue", async () => { ... });
+```
+
+And the `useNotificationStore` mock around line 22โ30:
+
+```ts
+const mocks = vi.hoisted(() => ({
+ // ...
+ tryPopNotification: vi.fn(),
+ // ...
+}));
+
+// later:
+useNotificationStore: () => ({
+ // ...
+ tryPopNotification: mocks.tryPopNotification,
+ // ...
+}),
+```
+
+Remove `tryPopNotification` from `mocks` and from the `useNotificationStore` mock object. If the test imports `NotificationContext.vue` directly, drop that mock entry.
+
+Then read `frontend/src/layouts/layout-bridge.test.ts` and check for `NotificationContext` or `tryPopNotification` mock entries โ remove if present.
+
+Final pass:
+
+```bash
+grep -rn "NotificationContext\|tryPopNotification" frontend/src
+```
+
+Expected: zero matches outside this commit's deletions.
+
+- [ ] **Step 7: Delete `NotificationContext.vue`**
+
+```bash
+git rm frontend/src/NotificationContext.vue
+```
+
+- [ ] **Step 8: Verify all gates**
+
+```bash
+pnpm --dir frontend fix
+pnpm --dir frontend type-check
+pnpm --dir frontend test
+pnpm --dir frontend check
+```
+
+Expected: all green. The full test suite must still pass (~1871 tests). The `check` script runs eslint + biome + react-i18n + react-layering + locale-sort.
+
+- [ ] **Step 9: Manual smoke (see full checklist in spec ยง"Manual smoke checklist")**
+
+Run dev server and exercise:
+
+```bash
+pnpm --dir frontend dev
+```
+
+Quick subset:
+- Trigger a SUCCESS toast (save anything) โ green, auto-dismisses ~6s
+- Trigger a CRITICAL toast (force an error, e.g. SQL execution error) โ red, ~10s
+- Trigger a toast with `manualHide: true` โ stays until close button click
+- Open a Dialog, then trigger a toast โ toast appears above the dialog backdrop
+- Trigger session-expired (clear auth cookie + reload) โ critical layer obscures any toasts
+
+Full checklist is in the spec. Do not commit until you've smoked at least the four above.
+
+- [ ] **Step 10: Commit**
+
+```bash
+git add -A frontend
+git commit -m "refactor(notification): React Base UI Toast replaces NotificationContext.vue
+
+Atomic cutover from Vue/Naive UI notifications to React/Base UI Toast.
+After this commit:
+- The Pinia notificationStore is a thin pass-through that emits
+ CustomEvent('bb.vue-notification') for each pushNotification. No
+ internal queue; no renderer.
+- React @/react/stores/app/notification's notify() calls toastManager.add()
+ directly through pushReactNotification (no longer emits a window event).
+- react/shell-bridge.ts loses the bb.react-notification event +
+ emitReactNotification; bridge direction is now Vue -> React only.
+- App.vue drops + wrappers.
+- NotificationContext.vue + its test mocks deleted.
+
+149 callers of pushNotification (17 Vue, 132 React) keep their API. Vue
+callers route via the window event; React callers route via the slice ->
+manager direct path. End state: one renderer (React).
+
+Phase B2 dependencies retired: -1 .vue file (NotificationContext), -1
+Naive UI provider mount. Pinia store stays until Phase B3.
+
+Co-Authored-By: Claude Opus 4.7 (1M context) "
+```
+
+---
+
+## Task 6: Pre-PR validation
+
+- [ ] **Step 1: Walk the pre-PR checklist**
+
+Open `docs/pre-pr-checklist.md` and verify every item. In particular:
+
+- No `frontend/src/NotificationContext.vue` left behind: `find frontend/src -name "NotificationContext.vue"` โ should be empty.
+- No leftover `tryPopNotification` calls: `grep -rn "tryPopNotification" frontend/src` โ empty.
+- No leftover `emitReactNotification`: `grep -rn "emitReactNotification" frontend/src` โ empty.
+- No leftover `bb.react-notification`: `grep -rn "bb.react-notification" frontend/src` โ empty.
+- No raw `z-index` introduced anywhere except `LAYER_Z_INDEX.overlay` in `toaster.tsx`.
+
+- [ ] **Step 2: Push and open PR**
+
+```bash
+git push -u origin chore/frontend/notification-react-migration
+gh pr create --title "refactor(notification): migrate to React Base UI Toast" --body "$(cat <<'EOF'
+## Summary
+
+Replaces Vue's NotificationContext.vue + Naive UI NNotificationProvider with a React renderer built on Base UI Toast. React becomes the sole renderer; Vue's pushNotification API stays for backwards compatibility with its 17 callers, routing through a window event into the React side.
+
+- 5 commits, ~3 files added / ~6 modified / 1 deleted
+- Pinia notificationStore retained as a thin pass-through (Phase B3 work)
+- App.vue still Vue; only the notification wrapper is stripped
+
+## Test plan
+
+- [x] `pnpm --dir frontend type-check`
+- [x] `pnpm --dir frontend test`
+- [x] `pnpm --dir frontend check`
+- [ ] Manual smoke (see spec ยง"Manual smoke checklist"):
+ - [ ] SUCCESS / INFO / WARN / CRITICAL variants
+ - [ ] manualHide
+ - [ ] link + linkTitle action button
+ - [ ] toast above dialogs / sheets
+ - [ ] critical layer (session-expired) obscures toasts
+ - [ ] auth middleware error path still produces a toast
+
+Companion docs:
+- Spec: `docs/plans/2026-05-13-notification-react-migration-design.md`
+- Plan: `docs/plans/2026-05-13-notification-react-migration-plan.md`
+
+๐ค Generated with [Claude Code](https://claude.com/claude-code)
+EOF
+)"
+```
+
+---
+
+## Out-of-scope follow-ups
+
+- **Phase B3**: Pinia `notificationStore` โ Zustand. After that, the `bb.vue-notification` window event can collapse into a direct function call.
+- **Phase B2**: When `App.vue` migrates to React, the `` wrapper goes too; the Toaster's persistent root can fold into the main React shell root.
+- **Toast API extensions** (action toasts that don't just open links, promise toasts via Base UI's `toastManager.promise()`, sticky toasts with custom dismiss buttons). Not needed for parity.
+
+---
+
+## Self-review notes (inline)
+
+**Spec coverage check:**
+- ยง"Architecture" โ Tasks 2 (manager) + 3 (Toaster) + 5 (Pinia rewrite) cover the diagram end-to-end. โ
+- ยง"File layout / Created" โ Task 1 (toast.tsx), Task 2 (toast.ts), Task 3 (toaster.tsx), Task 4 (mountToaster.ts). โ
+- ยง"File layout / Modified" โ Task 5 covers notification.ts (slice), notification.ts (Pinia), shell-bridge.ts, App.vue, main.ts (via Task 4). โ
+- ยง"API parity" โ mapping function tested in Task 2 covers SUCCESS/INFO/WARN/CRITICAL, manualHide, link/linkTitle. โ
+- ยง"Accessibility" โ `priority` mapping in Task 2; `aria-label={t("common.close")}` in Task 3. โ
+- ยง"Layering" โ `Toast.Portal container={getLayerRoot("overlay")}` in Task 3; `LAYER_Z_INDEX.overlay` on viewport. โ
+- ยง"i18n" โ `common.close` reused; no new keys. โ
+- ยง"Risks" #1 (listener order) โ Task 2 module-eval-time listener registration; Task 4 mounts after Vue. โ
+- ยง"Risks" #2 (duplicate toasts) โ Task 5 is atomic. โ
+- ยง"Risks" #3 (function-typed description) โ grep audit found zero callers; mapping types description as string only. โ
+- ยง"Risks" #4 (test mocks) โ Task 5 Step 6. โ
+- ยง"Risks" #5 (Pinia consumers of tryPopNotification) โ Task 5 Step 1 drops it; Step 6 verifies grep is empty. โ
+
+**Type consistency check:** `pushReactNotification` signature and `mapNotificationToToast` return type are used consistently across Tasks 2, 3, 5. `NotificationCreate` shape comes from the existing `@/types/notification` and is not modified.
+
+**Placeholder scan:** No TBDs. Every code step has full code. Every command has an expected outcome.
+
+**Estimated total:** 5 logical commits (branch setup + Tasks 1โ5) plus Task 6 (push + PR). Roughly 1 day of focused work.
diff --git a/docs/plans/2026-05-13-pr1-learnmorelink-chain-design.md b/docs/plans/2026-05-13-pr1-learnmorelink-chain-design.md
new file mode 100644
index 00000000000000..b2a17e398b0db2
--- /dev/null
+++ b/docs/plans/2026-05-13-pr1-learnmorelink-chain-design.md
@@ -0,0 +1,122 @@
+# PR-1 โ LearnMoreLink Chain: Design
+
+**Date:** 2026-05-13
+**Parent doc:** [2026-05-12-react-migration-status-and-plan.md](./2026-05-12-react-migration-status-and-plan.md)
+**Sequence:** First of three planned chain-cutting PRs. Follow-ups: PR-2 (MonacoEditor suite migration), PR-3 (BBAttention.vue migration).
+
+---
+
+## Goal
+
+Delete `frontend/src/components/LearnMoreLink.vue` by inlining its short `` markup into the two Vue files that still call it.
+
+`LearnMoreLink.vue` is **VUE-ONLY** (React callers already use the React `LearnMoreLink.tsx`). The two Vue callers are:
+
+1. `frontend/src/bbkit/BBAttention.vue` โ uses `` as a template element.
+2. `frontend/src/components/MonacoEditor/utils.ts` โ calls `h(LearnMoreLink, ...)` programmatically.
+
+## Strategy: inline, don't abstract
+
+The Vue component's template is 8 meaningful lines (an `` element + an `ExternalLinkIcon`). The two callers each touch it exactly once. A shared helper would replace one import with another and add a layer for no benefit. Inline the markup directly.
+
+## Scope: one PR
+
+### 1. Edit `frontend/src/bbkit/BBAttention.vue`
+
+**Replace the import:**
+
+```diff
+- import LearnMoreLink from "@/components/LearnMoreLink.vue";
++ import { ExternalLinkIcon } from "lucide-vue-next";
+```
+
+**Replace the element:**
+
+```diff
+-
++
++ {{ $t("common.learn-more") }}
++
++
+```
+
+Notes:
+- Keep classes `inline-flex items-center normal-link` โ these come from the original `LearnMoreLink.vue` template (`color === "normal"` branch); preserving them keeps visual parity.
+- `target="__BLANK"` matches the original template verbatim (note: the original uses `__BLANK`, not the conventional `_blank`; we preserve to avoid behavior drift).
+- Drop the `external` conditional โ `BBAttention`'s `link` prop is always an http(s) docs URL in current usage. If a future caller passes a non-external link, the icon is the only cosmetic difference.
+
+### 2. Edit `frontend/src/components/MonacoEditor/utils.ts`
+
+**Replace the import:**
+
+```diff
+- import LearnMoreLink from "../LearnMoreLink.vue";
++ import { ExternalLinkIcon } from "lucide-vue-next";
+```
+
+**Replace the `h()` call:**
+
+```diff
+- h(LearnMoreLink, {
+- url: "https://docs.bytebase.com/administration/production-setup/#enable-https-and-websocket",
+- }),
++ h(
++ "a",
++ {
++ href: "https://docs.bytebase.com/administration/production-setup/#enable-https-and-websocket",
++ target: "__BLANK",
++ class: "inline-flex items-center normal-link",
++ },
++ [t("common.learn-more"), h(ExternalLinkIcon, { class: "w-4 h-4 ml-1" })]
++ ),
+```
+
+### 3. Delete the Vue file
+
+```bash
+git rm frontend/src/components/LearnMoreLink.vue
+```
+
+### 4. Locale
+
+`common.learn-more` stays โ both new inlines call `$t("common.learn-more")` / `t("common.learn-more")`. ESLint `@intlify/vue-i18n/no-unused-keys` will not flag it.
+
+## Validation
+
+1. `rm -f frontend/.eslintcache` โ clear ESLint cache (avoids the local-vs-CI mismatch from PR #20321 where stale cache hid an unused-key violation).
+2. `pnpm --dir frontend type-check`
+3. `pnpm --dir frontend check` โ full lint chain.
+4. `pnpm --dir frontend test` โ existing tests, including the ReactโVue import guard from PR #20321. The guard should still pass (Phase A's allowlist is untouched).
+5. Manual smoke:
+ - **BBAttention** โ find one usage that passes a `link` prop and verify the learn-more anchor renders correctly. Quick search: `rg ':link=' frontend/src/ -tvue -l | head`.
+ - **Monaco connection error** โ simulate the WebSocket setup failure path. The error notification (`pushNotification` with `style: "CRITICAL"`) should render the learn-more link inside the Monaco-related error toast.
+
+## Done when
+
+- `frontend/src/components/LearnMoreLink.vue` does not exist.
+- `rg 'LearnMoreLink' frontend/src/ -tvue -tts` returns only the matches inside the React `LearnMoreLink.tsx` and the React `lucide-react` import โ no Vue imports of `LearnMoreLink.vue` anywhere.
+- All automated checks pass.
+- Both manual smoke paths render identical UI to pre-PR.
+
+## Risks
+
+Low. ~10 lines of inline replacement, 1 file deleted. The CSS classes are preserved so visual parity holds. Two failure modes:
+
+- **`__BLANK` vs `_blank`**: the original used the non-standard `__BLANK` literal. Most browsers treat any unknown `target` as a new window, so behavior is unchanged. We preserve verbatim to avoid an accidental UX change.
+- **`normal-link` class**: defined elsewhere (likely a global CSS class). Verified to exist in the codebase before deletion; if a future restyle removes it, the inlines fall back to default link styling โ minor cosmetic only.
+
+## Out of scope
+
+- React-side `LearnMoreLink.tsx` โ untouched. Continues serving React callers.
+- BBAttention.vue's own migration to React โ that's PR-3.
+- MonacoEditor's overall migration โ that's PR-2; after it lands, the `utils.ts` edit in this PR gets deleted entirely (with the rest of the Vue Monaco suite).
+- Other VUE-ONLY chains (`UserAvatar`, `OverlayStackManager`, etc.) โ separate future PRs.
+
+## Estimated cost
+
+~30 minutes including manual smoke.
diff --git a/docs/plans/2026-05-13-pr1-learnmorelink-chain-plan.md b/docs/plans/2026-05-13-pr1-learnmorelink-chain-plan.md
new file mode 100644
index 00000000000000..bcb7f5739ba17b
--- /dev/null
+++ b/docs/plans/2026-05-13-pr1-learnmorelink-chain-plan.md
@@ -0,0 +1,366 @@
+# PR-1 โ LearnMoreLink Chain: Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Delete `frontend/src/components/LearnMoreLink.vue` by inlining its `` markup into its two Vue callers (`bbkit/BBAttention.vue` and `MonacoEditor/utils.ts`).
+
+**Architecture:** All three changes (two file edits + one deletion) land in a single atomic commit. Splitting would leave an intermediate state with a dangling import. Validation chain matches Phase A's: type-check, lint (with cleared ESLint cache to avoid the local-vs-CI mismatch we hit in PR #20321), tests, and the existing ReactโVue CI guard.
+
+**Tech Stack:** Vue 3, Naive UI, lucide-vue-next, vue-i18n, vitest, TypeScript, pnpm.
+
+**Spec:** [`docs/plans/2026-05-13-pr1-learnmorelink-chain-design.md`](./2026-05-13-pr1-learnmorelink-chain-design.md)
+
+---
+
+## Pre-work: Baseline & branch
+
+- [ ] **Step 0.1:** Confirm working tree clean and on a fresh main.
+
+```bash
+git status
+git branch --show-current
+```
+
+Expected: clean tree, on `main`. If not on main, ask the user before proceeding.
+
+- [ ] **Step 0.2:** Pull latest main.
+
+```bash
+git fetch origin main
+git pull --ff-only origin main
+```
+
+- [ ] **Step 0.3:** Create the feature branch.
+
+```bash
+git checkout -b chore/pr1-drop-learnmorelink-vue
+```
+
+- [ ] **Step 0.4:** Baseline type-check (โ1 min).
+
+Run: `pnpm --dir frontend type-check`
+Expected: exit 0.
+
+If type-check fails on a clean tree, stop and report โ do not start edits.
+
+---
+
+## Task 1: Inline the link in BBAttention.vue
+
+**Files:**
+- Modify: `frontend/src/bbkit/BBAttention.vue` โ line 10 (template usage) and line 37 (import)
+
+- [ ] **Step 1.1: Replace the import on line 37**
+
+Edit `frontend/src/bbkit/BBAttention.vue`:
+
+```diff
+- import LearnMoreLink from "@/components/LearnMoreLink.vue";
++ import { ExternalLinkIcon } from "lucide-vue-next";
+```
+
+After this step, lines 33โ37 should read:
+
+```vue
+`):
+
+```vue
+
+```
+
+- [ ] **Step 2: Delete BBSpin.vue**
+
+```bash
+rm frontend/src/bbkit/BBSpin.vue
+```
+
+- [ ] **Step 3: Update the bbkit barrel to remove the last BB* export**
+
+Replace `frontend/src/bbkit/index.ts` with:
+
+```typescript
+export * from "./types";
+```
+
+- [ ] **Step 4: Verify nothing else imports BBSpin**
+
+Run:
+```bash
+grep -rn 'BBSpin\b' frontend/src --include='*.ts' --include='*.tsx' --include='*.vue'
+```
+
+Expected: no output.
+
+- [ ] **Step 5: Type-check**
+
+Run: `pnpm --dir frontend type-check`
+Expected: PASS.
+
+- [ ] **Step 6: Commit**
+
+```bash
+git add frontend/src/AuthContext.vue frontend/src/bbkit/BBSpin.vue frontend/src/bbkit/index.ts
+git commit -m "refactor(auth): inline CSS spinner, delete BBSpin"
+```
+
+---
+
+## Task 6: Strip NConfigProvider from App.vue
+
+**Files:**
+- Modify: `frontend/src/App.vue`
+
+`NConfigProvider` injects naive-ui's theme. Theme tokens are already CSS custom properties in `tailwind.css`, so removing the wrapper has no visual effect on app-level styling. After Task 5, no surviving file renders a naive-ui component, so the provider is a dead wrapper.
+
+- [ ] **Step 1: Update the template**
+
+Edit `frontend/src/App.vue`. Replace the template block (lines 1-11) with:
+
+```vue
+
+
+
+
+
+```
+
+- [ ] **Step 2: Remove the naive-ui import and theme-config import**
+
+In the `
+
+