From af2f5edd4044ddf186e7f76c096bdc9bc12581e3 Mon Sep 17 00:00:00 2001
From: Failerko <c.dann@seznam.cz>
Date: Sat, 18 Apr 2026 17:04:25 +0200
Subject: [PATCH 01/36] docs: add design spec for vault assistant mobile parity

Captures the design for bringing mobile feature parity with the desktop
Vault Assistant and fixing width issues on Galaxy Fold inner screens and
narrow desktop windows.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 ...026-04-18-vault-assistant-mobile-design.md | 166 ++++++++++++++++++
 1 file changed, 166 insertions(+)
 create mode 100644 docs/superpowers/specs/2026-04-18-vault-assistant-mobile-design.md

diff --git a/docs/superpowers/specs/2026-04-18-vault-assistant-mobile-design.md b/docs/superpowers/specs/2026-04-18-vault-assistant-mobile-design.md
new file mode 100644
index 00000000..fd4cb33c
--- /dev/null
+++ b/docs/superpowers/specs/2026-04-18-vault-assistant-mobile-design.md
@@ -0,0 +1,166 @@
+# Vault Assistant — Mobile & Narrow-Width Parity
+
+**Date:** 2026-04-18
+**Component:** `src/lib/components/vault/InteractiveVaultAssistant.svelte`
+**Branch:** `fix/vault-assistant-mobile`
+
+## Problem
+
+The Interactive Vault Assistant's desktop layout is a two-panel split (entity edit panel on the left, chat on the right) that gives users simultaneous access to an ongoing chat and the entity being created/modified. The mobile experience does not have feature parity:
+
+1. **Auto-open behaviors are gated to desktop.** On mobile, the entity editor never surfaces automatically when the AI proposes a change, when it calls `show_entity`, when it auto-creates a lorebook, or when a `focusedEntity` is passed in on mount. Users must manually tap an inline diff card to reach the editor.
+2. **The mobile edit sheet is a second-tier affordance.** `VaultEntityEditPanel` is rendered inside a bottom `Sheet.Root` that's only mounted when `vaultEditor.activeChange` is set. This makes `editPanelMobileRef` unreliable — e.g. the "Set Portrait" action on a generated image silently does nothing if the sheet isn't open.
+3. **Width is clipped at ~672px on small-but-not-mobile screens.** The main modal applies `max-w-2xl` even in drawer mode, so on the Galaxy Fold inner screen (~700–800px CSS width) the drawer doesn't stretch edge-to-edge. There's also a conflict between the outer `h-[90vh]` and the drawer's own `max-h-[85vh]`.
+4. **Narrow-desktop layout cramps the entity panel.** When the editor is open, the chat uses `max-w-2xl shrink-0` and the edit panel uses `flex-1`, so at viewports between ~770px and ~1280px, the chat hogs 672px and the edit panel collapses to ~100–200px — unusable.
+
+## Goals
+
+- Mobile users get the same set of functional affordances as desktop (entity editor, all auto-open triggers, Set Portrait from chat, etc.).
+- Auto-opening must not hijack the chat stream on mobile — badge/pulse discoverability only, no forced tab switches.
+- The modal stretches edge-to-edge on Fold-inner-class devices.
+- Narrow-desktop viewports (including split-screen browsers) get a working layout at every width.
+
+## Non-goals
+
+- No changes to `VaultEntityEditPanel` internals, `VaultDiffView`, the service layer, or the `vaultEditor` store API.
+- No changes to the shared `createIsMobile` hook, `ResponsiveModal` primitive, or `Drawer`/`Sheet` primitives. Other call-sites keep their current breakpoint.
+- Desktop ≥1024px two-panel layout keeps its current shape (flex behavior is tweaked, but the user-facing structure is unchanged).
+
+## Design
+
+### Breakpoints
+
+Add a new hook `createIsCompact()` at `src/lib/hooks/is-compact.svelte.ts` with a `1024px` threshold (matches Tailwind `lg`). This hook mirrors `createIsMobile`'s shape but is scoped to this component's layout decisions so bumping the threshold doesn't ripple through `ResponsiveModal`, `TemplateEditor`, or `PromptPackEditor`.
+
+```ts
+export function createIsCompact() {
+  let isCompact = $state(false)
+  onMount(() => {
+    const mql = window.matchMedia('(max-width: 1023px)')
+    const onChange = () => (isCompact = mql.matches)
+    mql.addEventListener('change', onChange)
+    isCompact = mql.matches
+    return () => mql.removeEventListener('change', onChange)
+  })
+  return {
+    get current() { return isCompact },
+  }
+}
+```
+
+The existing `isMobile` usage in `InteractiveVaultAssistant.svelte` is replaced by `isCompact`. Touch-vs-mouse input behavior (`handleKeyDown`) continues to use `isTouchDevice()` unchanged.
+
+### Shell: compact vs wide
+
+- **Wide (`!isCompact.current`)**: keep the current `ResponsiveModal` path rendering as a `Dialog`. No visual change.
+- **Compact (`isCompact.current`)**: bypass `ResponsiveModal` and render a **full-viewport `Dialog`** with `w-screen h-[100dvh] max-w-none max-h-none p-0 rounded-none`. No drawer, no width cap, no height conflict. The full-screen overlay covers the Fold-inner and tablet-width cases cleanly.
+
+Branching happens at the `InteractiveVaultAssistant.svelte` level — it renders either `<ResponsiveModal.Root>` (wide) or `<Dialog.Root>` with full-screen classes (compact). The inner content layout is shared.
+
+### Compact layout: tab architecture
+
+```
+┌─ Vault Assistant ─────── [Approve All] [✕] ─┐
+│ History ▾                                    │
+│ Pending ▾ (if any)                           │
+│ ╭─ Chat ─╮ ╭─ Entity (3) ─╮                  │   ← (n) = pending count badge
+│ ╰────────╯ ╰──────────────╯                  │      tab pulses when new change arrives
+│                                              │      while user is on Chat
+│  <active tab body: chat OR entity>           │
+│                                              │
+│  <input bar, only when active tab === chat>  │
+└──────────────────────────────────────────────┘
+```
+
+- **Segmented control** directly below the existing dropdowns (history selector and pending-list popover stay where they are).
+- **Entity tab visibility:** shown only when `vaultEditor.editorOpen && vaultEditor.activeChange` is truthy. When no active change exists, the tab bar is hidden entirely and the chat fills the viewport as today.
+- **Default tab:** `chat`. Resets to `chat` on new conversation and on conversation switch.
+- **Badge:** shows `vaultEditor.pendingCount` when >0. `0` → no badge.
+- **Pulse:** a one-shot Tailwind keyframe highlight on the Entity tab trigger for ~800ms, fired from an `$effect` watching `vaultEditor.pendingCount`. Only pulses when the increase happened while `activeTab === 'chat'`.
+- **Tab content:**
+  - *Chat tab body* = messages list (existing block) + streaming progress indicator + error banner + input bar.
+  - *Entity tab body* = `VaultEntityEditPanel` for `vaultEditor.activeChange`, filling available height. This replaces the old `Sheet.Root` path entirely; the panel is mounted inside the tab so `editPanelMobileRef` is available whenever the tab has been rendered.
+- **Input bar** is only rendered on the chat tab so the virtual keyboard never fights with the entity form. The entity form's own Approve/Reject footer (inside `VaultEntityEditPanel`) is the bottom-anchored UI on that tab.
+- **Safe area:** whichever element is at the bottom on a given tab gets `padding-bottom: env(safe-area-inset-bottom)` so content clears the iOS home indicator / Android nav bar.
+
+### Auto-open policy (compact)
+
+The `!isMobile.current` guards in `onMount`, the `tool_end` handler (new-lorebook + `openEditorSmart`), and the `show_entity` handler are **removed**. State updates to `vaultEditor` (opening the viewer, setting `activeChange`, auto-approving lorebooks) now run on all widths, so compact and wide share the same state model.
+
+Navigation is the only thing that differs:
+
+- **Wide:** state updates make the left panel visible immediately (as today).
+- **Compact:** state updates cause the Entity tab to appear in the tab bar (if not already present) and, if the change is new, the tab pulses once. **No automatic tab switch** — the user stays on whatever tab they were on.
+
+**Exception — explicit user intent:** "Set Portrait" on a chat image is a direct user action that only makes sense inside the edit panel. When tapped on compact, it switches to the Entity tab *and* applies the portrait. This replaces the current `editPanelRef ?? editPanelMobileRef` fallback and fixes the silent-failure case when neither ref is mounted.
+
+### Wide layout: narrow-desktop flex fix
+
+With editor open on wide layout (≥1024px), the current flex sizing cramps the edit panel between ~1024px and ~1344px. Change the sizing to:
+
+- **Modal container** (editor open): `max-w-[90vw]` — unchanged.
+- **Edit panel**: `flex-1 min-w-[28rem]` (adds 448px minimum).
+- **Chat panel** (editor open): `flex-1 min-w-[22rem] max-w-2xl` (replaces `w-full max-w-2xl shrink-0`). Chat can shrink below 672px down to 352px, then the edit panel's minimum kicks in.
+- **Chat panel** (editor closed): unchanged (`mx-auto w-full max-w-2xl`).
+
+At 1024px viewport: container = 90vw = 921px → chat fills the balance above 448px, edit panel fills ≥448px. Both panels remain legible at the breakpoint boundary. Above ~1344px, chat reaches its 672px max and edit panel takes the remainder, matching current behavior.
+
+### Feature-parity fixes recap
+
+| Item                                      | Current (mobile)           | After                                                              |
+| ----------------------------------------- | -------------------------- | ------------------------------------------------------------------ |
+| Auto-open focused entity on mount         | Skipped                    | Sets viewer state (Entity tab appears, doesn't switch)             |
+| Auto-open new lorebook after creation     | Skipped                    | Sets editor state (Entity tab appears, doesn't switch)             |
+| `openEditorSmart` on `tool_end`           | Skipped                    | Runs; Entity tab appears with pulse                                |
+| `openViewer` on `show_entity`             | Skipped                    | Runs; Entity tab appears with pulse                                |
+| Entity edit panel mount                   | Inside bottom `Sheet.Root` | Inside Entity tab body                                             |
+| `editPanelMobileRef`                      | Null unless sheet is open  | Mounted whenever Entity tab has rendered                           |
+| "Set Portrait" when edit panel not active | Silent no-op               | Switches to Entity tab + applies portrait                          |
+| Modal width on Fold inner (~700–800px)    | Capped at 672px            | Full viewport (`w-screen h-[100dvh]`)                              |
+| Height conflict (`90vh` vs `85vh`)        | Conflicting                | Single `h-[100dvh]` on compact, original values on wide            |
+| Narrow-desktop editor panel (1024–1344px) | ~100–200px wide            | ≥448px via `min-w-[28rem]`; chat shrinks to 352px minimum          |
+
+## Files touched
+
+**New:**
+- `src/lib/hooks/is-compact.svelte.ts`
+
+**Modified:**
+- `src/lib/components/vault/InteractiveVaultAssistant.svelte`
+  - Replace `isMobile` with `isCompact` for all layout decisions.
+  - Remove `!isMobile.current` guards on auto-open logic.
+  - Add `activeTab` state + tab bar + pulse effect (compact only).
+  - Branch shell: `ResponsiveModal` (wide) vs full-screen `Dialog` (compact).
+  - Remove the separate bottom `Sheet.Root` for the mobile edit panel.
+  - Adjust wide-layout flex sizing (`min-w-[22rem]`, `min-w-[28rem]`, drop `shrink-0`).
+  - Update `handleSetPortrait` to switch to the Entity tab when on compact.
+  - Replace `editPanelMobileRef` with a single ref used across layouts.
+
+No other files change. No store, service, or shared-primitive changes.
+
+## Testing plan
+
+Manual verification only — there are no existing unit/E2E tests for this component.
+
+**Device widths to check:**
+- Phone portrait (~390px) — tabs, full-screen, no drawer artifacts.
+- Galaxy Fold outer (~344px) and inner (~700–820px) — both should be full-width, tabs present.
+- Tablet portrait (~768px) / tablet landscape (~1024px) — compact layout up to 1024px, two-panel at 1024px exactly and above.
+- Narrow desktop window / split-screen (1024–1280px) — two-panel, edit panel ≥448px, chat shrinks.
+- Desktop (≥1344px) — two-panel at current proportions, chat ≤672px.
+
+**Flows to verify on compact:**
+- Cold start with `focusedEntity` → Entity tab appears pre-populated, stays on Chat tab.
+- AI proposes character change → Entity tab pulses, badge shows `1`, tap switches tab, edit panel functional.
+- AI calls `show_entity` → same pattern in view mode.
+- New lorebook auto-created → Entity tab appears (no pulse for auto-approved items is fine, but current behavior of auto-opening the new lorebook into editor is preserved).
+- Generate image → tap "Set Portrait" → switches to Entity tab, portrait applied.
+- Approve All from top bar works from either tab.
+- Open keyboard on Chat tab → input stays visible, no viewport jump. Switch to Entity tab while keyboard open → keyboard dismisses.
+
+## Risks & mitigations
+
+- **Vaul-svelte drawer removal on compact** — we're not modifying `ResponsiveModal`, just bypassing it for this component on compact. Other call-sites unaffected.
+- **Tab pulse feels spammy during streaming** — pulse is gated to "count increased while on chat tab" and runs at most once per change. If multi-change bursts feel noisy, we can throttle in a follow-up.
+- **`h-[100dvh]` on older browsers** — `dvh` has solid 2023+ support; Tailwind v3 emits it directly. Acceptable for target audience.
+- **Existing `Sheet.Root` import removal** — unused after refactor, will be pruned.

From d3f20deca66451a4e45f3d3dd9cf4bb62a1fcf11 Mon Sep 17 00:00:00 2001
From: Failerko <c.dann@seznam.cz>
Date: Sat, 18 Apr 2026 17:05:09 +0200
Subject: [PATCH 02/36] docs: clarify Entity tab fallback when active tab
 disappears

Spec self-review caught a missing behavior: if the editor closes while
the Entity tab is active, auto-switch back to Chat tab.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../specs/2026-04-18-vault-assistant-mobile-design.md           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/superpowers/specs/2026-04-18-vault-assistant-mobile-design.md b/docs/superpowers/specs/2026-04-18-vault-assistant-mobile-design.md
index fd4cb33c..e0c29a7b 100644
--- a/docs/superpowers/specs/2026-04-18-vault-assistant-mobile-design.md
+++ b/docs/superpowers/specs/2026-04-18-vault-assistant-mobile-design.md
@@ -74,7 +74,7 @@ Branching happens at the `InteractiveVaultAssistant.svelte` level — it renders
 
 - **Segmented control** directly below the existing dropdowns (history selector and pending-list popover stay where they are).
 - **Entity tab visibility:** shown only when `vaultEditor.editorOpen && vaultEditor.activeChange` is truthy. When no active change exists, the tab bar is hidden entirely and the chat fills the viewport as today.
-- **Default tab:** `chat`. Resets to `chat` on new conversation and on conversation switch.
+- **Default tab:** `chat`. Resets to `chat` on new conversation, on conversation switch, and whenever the Entity tab disappears while active (e.g. user closed the editor from inside the panel, or the last pending change was approved/rejected and the editor closed) — a `$effect` watching `vaultEditor.editorOpen && vaultEditor.activeChange` flips `activeTab` back to `'chat'` when it goes falsy.
 - **Badge:** shows `vaultEditor.pendingCount` when >0. `0` → no badge.
 - **Pulse:** a one-shot Tailwind keyframe highlight on the Entity tab trigger for ~800ms, fired from an `$effect` watching `vaultEditor.pendingCount`. Only pulses when the increase happened while `activeTab === 'chat'`.
 - **Tab content:**

From 2cefbabaa71e95e640a49153ba52fdcb055bd4d2 Mon Sep 17 00:00:00 2001
From: Failerko <c.dann@seznam.cz>
Date: Sat, 18 Apr 2026 17:13:31 +0200
Subject: [PATCH 03/36] docs: add implementation plan for vault assistant
 mobile parity

10 bite-sized tasks covering hook creation, layout refactor, tab
architecture, auto-open guard removal, pulse animation, narrow-desktop
flex fix, and manual smoke test.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../2026-04-18-vault-assistant-mobile.md      | 1120 +++++++++++++++++
 1 file changed, 1120 insertions(+)
 create mode 100644 docs/superpowers/plans/2026-04-18-vault-assistant-mobile.md

diff --git a/docs/superpowers/plans/2026-04-18-vault-assistant-mobile.md b/docs/superpowers/plans/2026-04-18-vault-assistant-mobile.md
new file mode 100644
index 00000000..3dbec17c
--- /dev/null
+++ b/docs/superpowers/plans/2026-04-18-vault-assistant-mobile.md
@@ -0,0 +1,1120 @@
+# Vault Assistant Mobile & Narrow-Width Parity 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:** Give the `InteractiveVaultAssistant` component mobile feature parity with desktop (via a tabbed layout) and make it stretch edge-to-edge on Fold-inner-class screens and narrow desktop windows.
+
+**Architecture:** Introduce a 1024px `isCompact` breakpoint used only by this component. At that width and below, render a full-screen overlay (not a drawer) with a Chat / Entity tab bar that surfaces all the auto-open behaviors desktop users already get — without hijacking the chat stream. Above 1024px, keep the two-panel desktop layout but let both panels shrink gracefully via flex minimums so the editor doesn't get cramped on narrow desktops.
+
+**Tech Stack:** Svelte 5 (`$state`, `$derived`, `$effect`), Tailwind, `vaul-svelte` (drawer primitive, left in place for other call-sites), `bits-ui` (Dialog primitive).
+
+**Spec:** `docs/superpowers/specs/2026-04-18-vault-assistant-mobile-design.md`
+
+---
+
+## File Structure
+
+**New:**
+- `src/lib/hooks/is-compact.svelte.ts` — `createIsCompact()` hook mirroring `createIsMobile` at a 1024px breakpoint.
+
+**Modified:**
+- `src/lib/components/vault/InteractiveVaultAssistant.svelte` — all UI changes happen here. No store, service, or shared-primitive changes.
+
+The plan splits the component changes into small, independently-committable tasks. Between tasks the app stays functional; the compact layout may look rougher than final until Task 4 lands.
+
+## Verification conventions
+
+- After every code change, run `npm run check` (svelte-check / TypeScript) and `npm run lint` (eslint). Both must pass before committing.
+- Manual smoke test happens in Task 10 only. Between tasks, type-check + lint are the gates.
+- Commit messages follow existing repo convention (imperative mood, lowercase type prefix).
+
+---
+
+## Task 1: Create the `createIsCompact` hook
+
+**Files:**
+- Create: `src/lib/hooks/is-compact.svelte.ts`
+
+- [ ] **Step 1: Create the hook file**
+
+File path: `src/lib/hooks/is-compact.svelte.ts`
+
+```ts
+import { onMount } from 'svelte'
+
+/**
+ * Layout breakpoint hook for components that need a tighter "compact" threshold
+ * than the 768px `createIsMobile` gives. Fires true below 1024px (Tailwind lg).
+ */
+export function createIsCompact() {
+  let isCompact = $state(false)
+
+  onMount(() => {
+    const mql = window.matchMedia('(max-width: 1023px)')
+
+    const onChange = () => {
+      isCompact = mql.matches
+    }
+
+    mql.addEventListener('change', onChange)
+    isCompact = mql.matches
+
+    return () => mql.removeEventListener('change', onChange)
+  })
+
+  return {
+    get current() {
+      return isCompact
+    },
+  }
+}
+```
+
+- [ ] **Step 2: Verify it type-checks**
+
+Run: `npm run check`
+Expected: no new errors relating to `is-compact.svelte.ts`.
+
+- [ ] **Step 3: Verify it lints**
+
+Run: `npm run lint`
+Expected: no new lint errors.
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add src/lib/hooks/is-compact.svelte.ts
+git commit -m "feat: add createIsCompact hook at 1024px breakpoint"
+```
+
+---
+
+## Task 2: Swap `isMobile` → `isCompact` for layout decisions
+
+**Goal:** Widen the existing "mobile" layout path from 768px to 1024px without behavior guards changing yet. This is a mechanical rename touching only layout sites. The onMount / tool_end / show_entity guards stay as `!isMobile.current` until Task 5.
+
+**Files:**
+- Modify: `src/lib/components/vault/InteractiveVaultAssistant.svelte`
+
+- [ ] **Step 1: Import the new hook alongside the existing one**
+
+Replace the import on line 54:
+
+```ts
+import { createIsMobile } from '$lib/hooks/is-mobile.svelte'
+```
+
+with:
+
+```ts
+import { createIsMobile } from '$lib/hooks/is-mobile.svelte'
+import { createIsCompact } from '$lib/hooks/is-compact.svelte'
+```
+
+- [ ] **Step 2: Instantiate `isCompact` next to `isMobile`**
+
+Replace the block at lines 64–65:
+
+```ts
+  // Mobile detection
+  const isMobile = createIsMobile()
+```
+
+with:
+
+```ts
+  // Mobile detection (touch/native-device flavour + 768px breakpoint — kept for non-layout guards)
+  const isMobile = createIsMobile()
+  // Layout breakpoint: below 1024px we use the compact (tabs, full-screen) layout
+  const isCompact = createIsCompact()
+```
+
+- [ ] **Step 3: Replace layout-related `isMobile.current` usages with `isCompact.current`**
+
+These are the ONLY layout sites to change in this task. Guards in auto-open handlers stay on `isMobile` for now.
+
+Line 549 — modal container width:
+
+```svelte
+vaultEditor.editorOpen && !isMobile.current ? 'max-w-[90vw]' : 'max-w-2xl',
+```
+
+→
+
+```svelte
+vaultEditor.editorOpen && !isCompact.current ? 'max-w-[90vw]' : 'max-w-2xl',
+```
+
+Line 598 — desktop edit panel render:
+
+```svelte
+{#if vaultEditor.editorOpen && vaultEditor.activeChange && !isMobile.current}
+```
+
+→
+
+```svelte
+{#if vaultEditor.editorOpen && vaultEditor.activeChange && !isCompact.current}
+```
+
+Line 616 — chat panel sizing class expression:
+
+```svelte
+<div
+  class="flex flex-col overflow-hidden {vaultEditor.editorOpen && !isMobile.current
+    ? 'w-full max-w-2xl shrink-0'
+    : 'mx-auto w-full max-w-2xl'}"
+>
+```
+
+→
+
+```svelte
+<div
+  class="flex flex-col overflow-hidden {vaultEditor.editorOpen && !isCompact.current
+    ? 'w-full max-w-2xl shrink-0'
+    : 'mx-auto w-full max-w-2xl'}"
+>
+```
+
+Line 1093 — mobile Sheet guard:
+
+```svelte
+{#if isMobile.current && vaultEditor.activeChange}
+```
+
+→
+
+```svelte
+{#if isCompact.current && vaultEditor.activeChange}
+```
+
+Leave lines 145, 389, 396, and 421 alone (they stay on `!isMobile.current` for this task).
+
+- [ ] **Step 4: Type-check and lint**
+
+Run:
+
+```bash
+npm run check
+npm run lint
+```
+
+Expected: no new errors.
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add src/lib/components/vault/InteractiveVaultAssistant.svelte
+git commit -m "refactor: use isCompact for vault assistant layout decisions"
+```
+
+---
+
+## Task 3: Replace compact shell with full-screen Dialog
+
+**Goal:** On compact widths, render a full-viewport `Dialog` instead of the `ResponsiveModal` drawer. Eliminates the `max-w-2xl` clip on Fold-inner screens and the `h-[90vh]`/`max-h-[85vh]` height conflict. Wide path untouched.
+
+**Files:**
+- Modify: `src/lib/components/vault/InteractiveVaultAssistant.svelte`
+
+- [ ] **Step 1: Add a shell wrapper around the existing content**
+
+Find the current top-level render (starts at line 545):
+
+```svelte
+<ResponsiveModal.Root open={true} onOpenChange={(open) => !open && onClose()}>
+  <ResponsiveModal.Content
+    class={cn(
+      'flex h-[90vh] w-full flex-col gap-0 overflow-hidden p-0',
+      vaultEditor.editorOpen && !isCompact.current ? 'max-w-[90vw]' : 'max-w-2xl',
+    )}
+  >
+    <div class="flex flex-col overflow-hidden" style="height: 100%">
+```
+
+Replace with:
+
+```svelte
+{#if isCompact.current}
+  <Dialog.Root open={true} onOpenChange={(open) => !open && onClose()}>
+    <Dialog.Content
+      class="flex h-[100dvh] w-screen max-w-none flex-col gap-0 overflow-hidden rounded-none border-none p-0"
+    >
+      <Dialog.Title class="sr-only">Vault Assistant</Dialog.Title>
+      <div class="flex flex-col overflow-hidden" style="height: 100%">
+{:else}
+  <ResponsiveModal.Root open={true} onOpenChange={(open) => !open && onClose()}>
+    <ResponsiveModal.Content
+      class={cn(
+        'flex h-[90vh] w-full flex-col gap-0 overflow-hidden p-0',
+        vaultEditor.editorOpen ? 'max-w-[90vw]' : 'max-w-2xl',
+      )}
+    >
+      <div class="flex flex-col overflow-hidden" style="height: 100%">
+{/if}
+```
+
+Notes:
+- The `!isCompact.current` check in the `max-w-[90vw]` class is now redundant because we're only inside the ResponsiveModal branch when `!isCompact.current`; I've simplified it to `vaultEditor.editorOpen`.
+- `Dialog.Title class="sr-only"` is required by bits-ui's Dialog for accessibility; it hides a title from visual users.
+
+- [ ] **Step 2: Add matching closing tags**
+
+Find the current closing (line 1089–1090):
+
+```svelte
+    </div>
+  </ResponsiveModal.Content>
+</ResponsiveModal.Root>
+```
+
+Replace with:
+
+```svelte
+      </div>
+  {#if isCompact.current}
+    </Dialog.Content>
+  </Dialog.Root>
+  {:else}
+    </ResponsiveModal.Content>
+  </ResponsiveModal.Root>
+  {/if}
+```
+
+Note: Svelte's indentation inside `{#if}` doesn't affect rendering; the intent is that the `</div>` closes the inner flex container and the if/else closes the correct shell.
+
+*Tip:* if the `{#if}` / `{:else}` pair placement is awkward to read, it is acceptable to split into two full copies of the shell (each wrapping `{@render ...}` or the same markup). Either form is fine — pick the one you find clearer. Keep whichever you pick consistent with the opening tag placement from Step 1.
+
+- [ ] **Step 3: Type-check and lint**
+
+Run:
+
+```bash
+npm run check
+npm run lint
+```
+
+Expected: no new errors.
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add src/lib/components/vault/InteractiveVaultAssistant.svelte
+git commit -m "feat: render vault assistant as full-screen dialog on compact"
+```
+
+---
+
+## Task 4: Tab architecture and unified edit panel mounting
+
+**Goal:** Add the Chat/Entity tab bar, move the compact-width edit panel out of the bottom `Sheet.Root` and into the Entity tab body, collapse the two edit-panel refs into one, and add an effect that auto-switches the tab back to Chat when the Entity tab disappears.
+
+**Files:**
+- Modify: `src/lib/components/vault/InteractiveVaultAssistant.svelte`
+
+- [ ] **Step 1: Add tab state and the auto-switch-to-chat effect**
+
+After the existing `let viewedEntity = $state<FocusedEntity | null>(null)` line (currently around line 100) add:
+
+```ts
+  // Compact-width tab state
+  let activeTab = $state<'chat' | 'entity'>('chat')
+
+  // Auto-fall-back to chat tab when the Entity tab loses its content
+  // (e.g. user closed the editor, approved/rejected the last pending change,
+  // or conversation switched away from an active change).
+  $effect(() => {
+    const entityTabAvailable =
+      vaultEditor.editorOpen && vaultEditor.activeChange !== null
+    if (!entityTabAvailable && activeTab === 'entity') {
+      activeTab = 'chat'
+    }
+  })
+```
+
+- [ ] **Step 2: Reset tab to chat on new / switched conversation**
+
+In `handleNewConversation` (currently around line 222):
+
+```ts
+  async function handleNewConversation() {
+    if (!service) return
+    // Auto-save current conversation before starting new one
+    if (messages.some((m) => !m.isGreeting)) {
+      await service.saveConversation(messages, vaultEditor.pendingChanges).catch(() => {})
+    }
+    service.reset()
+    vaultEditor.reset()
+    initializeService()
+    await loadConversationsList()
+  }
+```
+
+Insert `activeTab = 'chat'` right after `vaultEditor.reset()`:
+
+```ts
+    service.reset()
+    vaultEditor.reset()
+    activeTab = 'chat'
+    initializeService()
+    await loadConversationsList()
+```
+
+In `handleSwitchConversation` (currently around line 234), similarly add `activeTab = 'chat'` after the existing `vaultEditor.reset()` call:
+
+```ts
+    const loaded = await service.loadConversation(id)
+    if (loaded) {
+      vaultEditor.reset()
+      activeTab = 'chat'
+```
+
+In `handleDeleteConversation` (around line 272), add the same after the `vaultEditor.reset()`:
+
+```ts
+    await database.deleteVaultConversation(id)
+    if (service?.getConversationId() === id) {
+      service.reset()
+      vaultEditor.reset()
+      activeTab = 'chat'
+      initializeService()
+    }
+```
+
+- [ ] **Step 3: Collapse `editPanelRef` and `editPanelMobileRef` into a single ref**
+
+Remove the two ref declarations (currently around lines 291–292):
+
+```ts
+  let editPanelRef = $state<ReturnType<typeof VaultEntityEditPanel> | null>(null)
+  let editPanelMobileRef = $state<ReturnType<typeof VaultEntityEditPanel> | null>(null)
+```
+
+Replace with a single ref:
+
+```ts
+  let editPanelRef = $state<ReturnType<typeof VaultEntityEditPanel> | null>(null)
+```
+
+Update `handleSetPortrait` (currently around line 294) to use the single ref; the tab-switch behavior is added in Task 7, so for this task the body stays minimal:
+
+```ts
+  function handleSetPortrait(imageId: string) {
+    if (!activeCharacterEntity || !service) return
+    const dataUrl = service.generatedImages.get(imageId)
+    if (!dataUrl) return
+    editPanelRef?.setPortrait(dataUrl)
+  }
+```
+
+- [ ] **Step 4: Render the tab bar inside the chat-side column**
+
+Find the chat-side column opening (currently around line 614):
+
+```svelte
+        <!-- Chat Panel (right, or full-width on mobile) -->
+        <div
+          class="flex flex-col overflow-hidden {vaultEditor.editorOpen && !isCompact.current
+            ? 'w-full max-w-2xl shrink-0'
+            : 'mx-auto w-full max-w-2xl'}"
+        >
+          <!-- Conversation selector -->
+```
+
+Right before the `<!-- Conversation selector -->` comment, insert the tab bar. But keep the conversation selector and pending-list popovers above the tabs — so actually insert the tab bar BELOW the pending-list popover block (currently around line 813, right after the `{#if pendingOnly.length > 0} ... {/if}` closes):
+
+```svelte
+          <!-- Compact-width tab bar: Chat | Entity -->
+          {#if isCompact.current && vaultEditor.editorOpen && vaultEditor.activeChange}
+            <div
+              class="border-surface-700 flex shrink-0 gap-1 border-b px-2 py-1.5"
+              role="tablist"
+            >
+              <button
+                type="button"
+                role="tab"
+                aria-selected={activeTab === 'chat'}
+                class={cn(
+                  'flex-1 rounded-md px-3 py-1.5 text-xs font-medium transition-colors',
+                  activeTab === 'chat'
+                    ? 'bg-surface-700 text-surface-100'
+                    : 'text-surface-400 hover:text-foreground hover:bg-foreground/5',
+                )}
+                onclick={() => (activeTab = 'chat')}
+              >
+                Chat
+              </button>
+              <button
+                type="button"
+                role="tab"
+                aria-selected={activeTab === 'entity'}
+                class={cn(
+                  'relative flex-1 rounded-md px-3 py-1.5 text-xs font-medium transition-colors',
+                  activeTab === 'entity'
+                    ? 'bg-surface-700 text-surface-100'
+                    : 'text-surface-400 hover:text-foreground hover:bg-foreground/5',
+                )}
+                onclick={() => (activeTab = 'entity')}
+              >
+                Entity
+                {#if vaultEditor.pendingCount > 0}
+                  <span
+                    class="ml-1.5 inline-flex h-4 min-w-4 items-center justify-center rounded-full bg-emerald-500/20 px-1 text-[10px] font-bold text-emerald-300"
+                  >
+                    {vaultEditor.pendingCount}
+                  </span>
+                {/if}
+              </button>
+            </div>
+          {/if}
+```
+
+- [ ] **Step 5: Gate the messages/input body on active tab + render Entity tab body**
+
+The chat content (currently lines 815–1085 — messages container + error + input) needs to be wrapped so it only renders when the Chat tab is active on compact (or always on wide).
+
+Wrap the existing content with a conditional. Find the start of the messages div (around line 816):
+
+```svelte
+          <!-- Messages -->
+          <div class="flex-1 space-y-3 overflow-y-auto px-4 py-3" bind:this={messagesContainer}>
+```
+
+Immediately before this comment, open a new conditional wrapper:
+
+```svelte
+          {#if !isCompact.current || activeTab === 'chat'}
+          <!-- Messages -->
+          <div class="flex-1 space-y-3 overflow-y-auto px-4 py-3" bind:this={messagesContainer}>
+```
+
+Then find the input-area closing (around line 1085–1086):
+
+```svelte
+            <div class="text-surface-500 mt-1.5 hidden text-center text-[10px] md:block">
+              {isTouchDevice()
+                ? 'Shift+Enter to send, Enter for new line'
+                : 'Enter to send, Shift+Enter for new line'}
+            </div>
+          </div>
+        </div>
+```
+
+Close the wrapper right after the input area's outer `</div>` (the one that closes the input-area padding container, NOT the chat-side column div). Add an `{:else}` branch for the Entity tab body:
+
+```svelte
+            <div class="text-surface-500 mt-1.5 hidden text-center text-[10px] md:block">
+              {isTouchDevice()
+                ? 'Shift+Enter to send, Enter for new line'
+                : 'Enter to send, Shift+Enter for new line'}
+            </div>
+          </div>
+          {:else}
+            <!-- Entity tab body (compact width only; wide width shows the left panel instead) -->
+            {#if vaultEditor.activeChange}
+              <div class="flex min-h-0 flex-1 flex-col overflow-hidden">
+                <VaultEntityEditPanel
+                  bind:this={editPanelRef}
+                  change={vaultEditor.activeChange}
+                  onApprove={(specificChange) =>
+                    handleApprove(specificChange ?? vaultEditor.activeChange!)}
+                  onReject={(change) => handleReject(change)}
+                  onClose={() => vaultEditor.closeEditor()}
+                />
+              </div>
+            {/if}
+          {/if}
+        </div>
+```
+
+- [ ] **Step 6: Remove the standalone `Sheet.Root` compact edit panel**
+
+Find the block starting around line 1092:
+
+```svelte
+<!-- Mobile entity editor — bottom sheet -->
+{#if isCompact.current && vaultEditor.activeChange}
+  <Sheet.Root
+    open={vaultEditor.editorOpen}
+    onOpenChange={(open) => {
+      if (!open) vaultEditor.closeEditor()
+    }}
+  >
+    <Sheet.Content side="bottom" class="flex h-[85dvh] flex-col p-0">
+      {#if vaultEditor.activeChange}
+        <VaultEntityEditPanel
+          bind:this={editPanelMobileRef}
+          change={vaultEditor.activeChange}
+          onApprove={(specificChange) => handleApprove(specificChange ?? vaultEditor.activeChange!)}
+          onReject={(change) => handleReject(change)}
+          onClose={() => vaultEditor.closeEditor()}
+        />
+      {/if}
+    </Sheet.Content>
+  </Sheet.Root>
+{/if}
+```
+
+Delete the entire block (including the surrounding comment).
+
+- [ ] **Step 7: Remove the now-unused `Sheet` import**
+
+Find the imports block (lines 47):
+
+```ts
+  import * as Sheet from '$lib/components/ui/sheet'
+```
+
+Delete this line.
+
+- [ ] **Step 8: Type-check and lint**
+
+Run:
+
+```bash
+npm run check
+npm run lint
+```
+
+Expected: no new errors. If lint complains about `editPanelMobileRef` being unused, double-check that Step 3 replaced both the declaration and all `editPanelMobileRef` usages.
+
+- [ ] **Step 9: Commit**
+
+```bash
+git add src/lib/components/vault/InteractiveVaultAssistant.svelte
+git commit -m "feat: tab-based compact layout for vault assistant"
+```
+
+---
+
+## Task 5: Remove `!isMobile.current` auto-open guards
+
+**Goal:** Now that compact has a place to show the entity panel (Entity tab), the guards that skipped auto-opening on mobile can go. State updates run on every width; the tab system handles whether they're visually surfaced.
+
+**Files:**
+- Modify: `src/lib/components/vault/InteractiveVaultAssistant.svelte`
+
+- [ ] **Step 1: Remove the onMount focused-entity guard**
+
+Find the block at lines 145–169:
+
+```ts
+    // Auto-open focused entity if provided
+    if (focusedEntity && !isMobile.current) {
+      let entityData: any = null
+      if (focusedEntity.entityType === 'character') {
+        entityData = characterVault.getById(focusedEntity.entityId)
+      } else if (focusedEntity.entityType === 'lorebook') {
+        entityData = lorebookVault.getById(focusedEntity.entityId)
+      } else if (focusedEntity.entityType === 'scenario') {
+        entityData = scenarioVault.getById(focusedEntity.entityId)
+      }
+
+      if (entityData) {
+        // Construct a dummy change to satisfy the viewer store requirement
+        const dummyChange = {
+          id: `view-${focusedEntity.entityId}`,
+          toolCallId: 'init',
+          entityType: focusedEntity.entityType,
+          action: 'update',
+          status: 'pending',
+          entityId: focusedEntity.entityId,
+          data: JSON.parse(JSON.stringify(entityData)),
+        } as unknown as VaultPendingChange
+
+        vaultEditor.openViewer(dummyChange, focusedEntity.entityId, focusedEntity.entityType)
+      }
+    }
+```
+
+Replace `focusedEntity && !isMobile.current` with just `focusedEntity`:
+
+```ts
+    // Auto-open focused entity if provided
+    if (focusedEntity) {
+```
+
+(Leave the rest of the block unchanged.)
+
+- [ ] **Step 2: Remove the tool_end auto-created-lorebook guard**
+
+Find the block at lines 384–399 (inside the `tool_end` case):
+
+```ts
+              // Auto-approve lorebook creation (it's a prerequisite step)
+              if (incoming.entityType === 'lorebook' && incoming.action === 'create' && service) {
+                vaultEditor.addPendingChange(incoming)
+                await handleApprove(incoming)
+                // Open the newly created lorebook in the editor
+                if (!isMobile.current) {
+                  await tick()
+                  vaultEditor.openEditor(incoming)
+                }
+              } else {
+                vaultEditor.addPendingChange(incoming)
+                // Auto-open entity editor on desktop (store handles same-lorebook skip)
+                if (!isMobile.current) {
+                  vaultEditor.openEditorSmart(incoming)
+                }
+              }
+```
+
+Replace with (guards removed):
+
+```ts
+              // Auto-approve lorebook creation (it's a prerequisite step)
+              if (incoming.entityType === 'lorebook' && incoming.action === 'create' && service) {
+                vaultEditor.addPendingChange(incoming)
+                await handleApprove(incoming)
+                // Open the newly created lorebook in the editor
+                await tick()
+                vaultEditor.openEditor(incoming)
+              } else {
+                vaultEditor.addPendingChange(incoming)
+                // Auto-open entity editor (store handles same-lorebook skip).
+                // On compact, the Entity tab becomes available — user still has to tap to switch.
+                vaultEditor.openEditorSmart(incoming)
+              }
+```
+
+- [ ] **Step 3: Remove the show_entity viewer guard**
+
+Find the block at lines 419–434 (inside the `show_entity` case):
+
+```ts
+          case 'show_entity':
+            // Open entity in view mode (no approval workflow)
+            if (!isMobile.current) {
+              vaultEditor.openViewer(event.change, event.entityId, event.entityType)
+            }
+            // Track which character is currently being viewed so the Set Portrait button appears
+            if (event.entityType === 'character') {
+```
+
+Replace with:
+
+```ts
+          case 'show_entity':
+            // Open entity in view mode (no approval workflow)
+            vaultEditor.openViewer(event.change, event.entityId, event.entityType)
+            // Track which character is currently being viewed so the Set Portrait button appears
+            if (event.entityType === 'character') {
+```
+
+- [ ] **Step 4: Remove the now-unused `isMobile` hook**
+
+Confirm no remaining `isMobile.current` references exist:
+
+Run (via Grep tool, not shell): search pattern `isMobile\.current` in `src/lib/components/vault/InteractiveVaultAssistant.svelte`.
+Expected: zero matches.
+
+If zero matches, remove the instantiation (currently around line 64):
+
+```ts
+  // Mobile detection (touch/native-device flavour + 768px breakpoint — kept for non-layout guards)
+  const isMobile = createIsMobile()
+```
+
+Delete these two lines.
+
+Also remove the import (around line 54):
+
+```ts
+  import { createIsMobile } from '$lib/hooks/is-mobile.svelte'
+```
+
+Delete it.
+
+Update the comment on the remaining `isCompact` block so the context is still clear:
+
+```ts
+  // Layout breakpoint: below 1024px we use the compact (tabs, full-screen) layout
+  const isCompact = createIsCompact()
+```
+
+- [ ] **Step 5: Type-check and lint**
+
+Run:
+
+```bash
+npm run check
+npm run lint
+```
+
+Expected: no new errors. If the lint catches an unused import that Step 4 missed, delete it.
+
+- [ ] **Step 6: Commit**
+
+```bash
+git add src/lib/components/vault/InteractiveVaultAssistant.svelte
+git commit -m "feat: remove mobile guards so auto-open state runs on all widths"
+```
+
+---
+
+## Task 6: Entity tab pulse animation on new pending changes
+
+**Goal:** When a new pending change lands while the user is viewing the Chat tab, the Entity tab pulses once (~800ms) so the user notices without being yanked to a new screen.
+
+**Files:**
+- Modify: `src/lib/components/vault/InteractiveVaultAssistant.svelte`
+
+- [ ] **Step 1: Add pulse state and count-tracker effect**
+
+Just below the `activeTab` declaration added in Task 4 Step 1, add:
+
+```ts
+  // Pulse the Entity tab when a new pending change arrives while user is on Chat
+  let entityTabPulsing = $state(false)
+  let prevPendingCount = vaultEditor.pendingCount
+  $effect(() => {
+    const current = vaultEditor.pendingCount
+    if (current > prevPendingCount && activeTab === 'chat') {
+      entityTabPulsing = true
+      const timer = setTimeout(() => {
+        entityTabPulsing = false
+      }, 800)
+      prevPendingCount = current
+      return () => clearTimeout(timer)
+    }
+    prevPendingCount = current
+  })
+```
+
+- [ ] **Step 2: Apply the pulse class to the Entity tab button**
+
+Find the Entity tab button added in Task 4 Step 4. Update its `class={cn(...)}` expression to include a `vault-tab-pulse` class when `entityTabPulsing` is true:
+
+```svelte
+              <button
+                type="button"
+                role="tab"
+                aria-selected={activeTab === 'entity'}
+                class={cn(
+                  'relative flex-1 rounded-md px-3 py-1.5 text-xs font-medium transition-colors',
+                  activeTab === 'entity'
+                    ? 'bg-surface-700 text-surface-100'
+                    : 'text-surface-400 hover:text-foreground hover:bg-foreground/5',
+                  entityTabPulsing && 'vault-tab-pulse',
+                )}
+                onclick={() => (activeTab = 'entity')}
+              >
+```
+
+- [ ] **Step 3: Add the keyframe definition to the component's `<style>` block**
+
+The component currently has no `<style>` block. Add one at the very bottom of the file (after the closing `</Dialog.Root>` of the image-enlargement dialog, so it's the final top-level element):
+
+```svelte
+<style>
+  :global(.vault-tab-pulse) {
+    animation: vault-tab-pulse 800ms ease-out 1;
+  }
+
+  @keyframes vault-tab-pulse {
+    0% {
+      box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.45);
+    }
+    60% {
+      box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
+    }
+    100% {
+      box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
+    }
+  }
+</style>
+```
+
+Note: `:global(...)` ensures the class survives Svelte's scoped-style hashing when applied via `cn()`. If you prefer to scope it, apply the class directly on the element (not via `cn`) and drop the `:global`.
+
+- [ ] **Step 4: Type-check and lint**
+
+Run:
+
+```bash
+npm run check
+npm run lint
+```
+
+Expected: no new errors.
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add src/lib/components/vault/InteractiveVaultAssistant.svelte
+git commit -m "feat: pulse entity tab when a pending change arrives off-tab"
+```
+
+---
+
+## Task 7: "Set Portrait" auto-switches to Entity tab on compact
+
+**Goal:** The "Set Portrait" button on a generated image is a direct user action that only makes sense inside the edit panel. On compact, tapping it should switch to the Entity tab so the result is visible — this is not the same class of action as the ambient auto-opens from Task 5, so an explicit tab switch is appropriate.
+
+**Files:**
+- Modify: `src/lib/components/vault/InteractiveVaultAssistant.svelte`
+
+- [ ] **Step 1: Update `handleSetPortrait`**
+
+Find the current handler (updated in Task 4 Step 3):
+
+```ts
+  function handleSetPortrait(imageId: string) {
+    if (!activeCharacterEntity || !service) return
+    const dataUrl = service.generatedImages.get(imageId)
+    if (!dataUrl) return
+    editPanelRef?.setPortrait(dataUrl)
+  }
+```
+
+Replace with:
+
+```ts
+  async function handleSetPortrait(imageId: string) {
+    if (!activeCharacterEntity || !service) return
+    const dataUrl = service.generatedImages.get(imageId)
+    if (!dataUrl) return
+    // On compact, the panel only mounts inside the Entity tab — switch first so the ref exists.
+    if (isCompact.current && activeTab !== 'entity') {
+      activeTab = 'entity'
+      await tick()
+    }
+    editPanelRef?.setPortrait(dataUrl)
+  }
+```
+
+No caller changes needed — the button's onclick already awaits because it was already wrapped in an arrow function; `await` in a non-async onclick is fine because we don't need the caller to wait for completion.
+
+- [ ] **Step 2: Type-check and lint**
+
+Run:
+
+```bash
+npm run check
+npm run lint
+```
+
+Expected: no new errors.
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add src/lib/components/vault/InteractiveVaultAssistant.svelte
+git commit -m "feat: set portrait switches to entity tab on compact"
+```
+
+---
+
+## Task 8: Narrow-desktop flex sizing
+
+**Goal:** At widths ≥1024px, the two-panel layout can't leave the editor panel starved. Set minimums on both panels so they shrink together, and remove the `shrink-0` on chat so it can give up space.
+
+**Files:**
+- Modify: `src/lib/components/vault/InteractiveVaultAssistant.svelte`
+
+- [ ] **Step 1: Set minimum width on the desktop edit panel**
+
+Find the desktop edit panel wrapper (updated in Task 2 Step 3, currently around line 598):
+
+```svelte
+{#if vaultEditor.editorOpen && vaultEditor.activeChange && !isCompact.current}
+  <div
+    class="border-surface-700 flex flex-1 flex-col overflow-hidden border-r"
+    transition:fade={{ duration: 100 }}
+  >
+```
+
+Change the classes:
+
+```svelte
+{#if vaultEditor.editorOpen && vaultEditor.activeChange && !isCompact.current}
+  <div
+    class="border-surface-700 flex min-w-[28rem] flex-1 flex-col overflow-hidden border-r"
+    transition:fade={{ duration: 100 }}
+  >
+```
+
+- [ ] **Step 2: Update the chat-side column sizing when editor is open**
+
+Find the chat-side column (updated in Task 2 Step 3, currently around line 616):
+
+```svelte
+<div
+  class="flex flex-col overflow-hidden {vaultEditor.editorOpen && !isCompact.current
+    ? 'w-full max-w-2xl shrink-0'
+    : 'mx-auto w-full max-w-2xl'}"
+>
+```
+
+Change the editor-open class set so chat can shrink and has a minimum:
+
+```svelte
+<div
+  class="flex flex-col overflow-hidden {vaultEditor.editorOpen && !isCompact.current
+    ? 'w-full min-w-[22rem] max-w-2xl flex-1'
+    : 'mx-auto w-full max-w-2xl'}"
+>
+```
+
+Key differences:
+- `shrink-0` removed → chat is allowed to shrink below its `max-w-2xl` (672px).
+- `min-w-[22rem]` (352px) → chat won't collapse below readable width.
+- `flex-1` → chat grows to take available space up to its `max-w-2xl`.
+
+At 1024px viewport: container is 90vw = 921px. Edit panel reserves min 448px, chat takes the remaining 473px. Both usable. Above ~1344px: chat saturates at 672px, edit panel takes the rest. Below 1024px: we're in compact mode, this branch doesn't apply.
+
+- [ ] **Step 3: Type-check and lint**
+
+Run:
+
+```bash
+npm run check
+npm run lint
+```
+
+Expected: no new errors.
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add src/lib/components/vault/InteractiveVaultAssistant.svelte
+git commit -m "fix: allow chat panel to shrink on narrow desktop widths"
+```
+
+---
+
+## Task 9: Safe-area polish and final housekeeping
+
+**Goal:** Ensure bottom-anchored UI clears iOS home indicator / Android navigation bars on compact, and sweep for leftover unused code.
+
+**Files:**
+- Modify: `src/lib/components/vault/InteractiveVaultAssistant.svelte`
+
+- [ ] **Step 1: Apply safe-area inset to the input container on compact**
+
+Find the input-area container (currently around line 1053):
+
+```svelte
+<!-- Input area -->
+<div class="border-surface-700 bg-surface-900 border-t p-3">
+```
+
+Replace with:
+
+```svelte
+<!-- Input area -->
+<div
+  class="border-surface-700 bg-surface-900 border-t p-3"
+  style="padding-bottom: max(0.75rem, env(safe-area-inset-bottom));"
+>
+```
+
+This keeps the 12px (`p-3`) padding on desktop and bumps it up to the safe-area inset on iOS devices where that's larger.
+
+- [ ] **Step 2: Sweep for unused imports and dead identifiers**
+
+Run (via Grep tool):
+- pattern `editPanelMobileRef` in the file — expected 0 matches.
+- pattern `isMobile\.` in the file — expected 0 matches.
+- pattern `Sheet\.` in the file — expected 0 matches (no usage after Task 4 Step 6).
+- pattern `from '\$lib/components/ui/sheet'` in the file — expected 0 matches.
+
+If any non-zero matches remain, clean them up.
+
+- [ ] **Step 3: Type-check and lint**
+
+Run:
+
+```bash
+npm run check
+npm run lint
+```
+
+Expected: no new errors.
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add src/lib/components/vault/InteractiveVaultAssistant.svelte
+git commit -m "chore: apply safe-area inset and sweep leftover refs"
+```
+
+---
+
+## Task 10: Manual smoke test
+
+**Goal:** Verify behavior end-to-end at several widths and flows, with the app actually running. This is the gate for considering the feature done.
+
+**Files:** none (verification only).
+
+- [ ] **Step 1: Start dev server**
+
+Run:
+
+```bash
+npm run dev
+```
+
+Open the browser to the printed URL.
+
+- [ ] **Step 2: Verify each viewport width**
+
+Using browser DevTools device emulation, check:
+
+- [ ] Phone portrait (~390×844, e.g. iPhone 14): full-screen dialog, no horizontal scroll, tab bar appears when a pending change exists, tap the Entity tab and the panel fills the screen.
+- [ ] Galaxy Fold outer (~344×882): same as phone — full-screen, tabs work.
+- [ ] Galaxy Fold inner (~700×900): full-screen dialog stretches edge-to-edge (NOT capped at 672px). Tabs usable.
+- [ ] Tablet portrait (~768×1024): compact layout (full-screen + tabs).
+- [ ] Tablet landscape (~1024×768): two-panel layout kicks in at exactly 1024px. Edit panel is at least 448px wide.
+- [ ] Narrow desktop window (~1100×800): two-panel layout; chat shrunk below 672px, edit panel ≥448px, both usable.
+- [ ] Wide desktop (~1920×1080): chat saturated at 672px, edit panel takes the remainder.
+
+- [ ] **Step 3: Verify compact flows (on a compact width)**
+
+- [ ] Open the Vault Assistant without a `focusedEntity`. Tab bar is absent, chat fills the viewport.
+- [ ] Send a message that should produce a pending character change ("create a new character named Alex"). Pending change arrives → Entity tab appears in the tab bar with a pulse and `1` badge. Tab does NOT auto-switch.
+- [ ] Tap Entity tab → edit panel is visible and functional. Scroll through fields, edit one, tap Approve. Change applies; if it was the last pending item, the Entity tab disappears and you fall back to Chat automatically.
+- [ ] Generate an image via the assistant. The image card appears in chat. Tap "Set Portrait" → compact switches to the Entity tab and the portrait is set on the character.
+- [ ] Open a conversation via History dropdown — if it has no active change, you land on Chat (activeTab reset works).
+- [ ] Start a new conversation — landed on Chat, no Entity tab.
+
+- [ ] **Step 4: Verify wide flows**
+
+On a wide viewport (e.g. 1280×800):
+
+- [ ] Without a pending change: single-column chat centered, no tab bar.
+- [ ] Ask AI to create a lorebook + entries. The auto-created lorebook opens on the left, then the entries appear with the edit panel still visible. Chat stays on the right at ≤672px. Neither panel below its minimum.
+- [ ] At 1024px exactly: two-panel layout renders, both panels legible. At 1023px: flips to tab layout cleanly.
+
+- [ ] **Step 5: Check console and network**
+
+DevTools → Console: no new errors or warnings attributable to this change (some pre-existing warnings may remain; ignore those).
+
+- [ ] **Step 6: If everything passes, mark complete**
+
+No commit for this step — it's verification. If any check fails, address the root cause and commit a fix; do NOT create follow-up "defer" items inside this plan.
+
+---
+
+## Plan Self-Review Results
+
+**Spec coverage:** every section of the spec maps to a task above.
+
+| Spec section                         | Task(s) |
+| ------------------------------------ | ------- |
+| Breakpoints / createIsCompact        | 1       |
+| Shell branching (compact vs wide)    | 3       |
+| Tab architecture + edit panel mount  | 4       |
+| Auto-open policy (guard removal)     | 5       |
+| Auto-switch-to-chat fallback effect  | 4       |
+| Pulse + badge                        | 6       |
+| Set Portrait explicit tab switch     | 7       |
+| Narrow-desktop flex sizing           | 8       |
+| Safe-area inset                      | 9       |
+| Remove unused Sheet import/refs      | 4, 9    |
+| Manual smoke tests                   | 10      |
+
+**Type consistency:** `editPanelRef` is the sole ref name throughout after Task 4. `activeTab` values are always `'chat' | 'entity'`. `isCompact.current` is the sole layout-breakpoint reference from Task 5 onward.
+
+**No placeholders:** every code step shows the exact code. Every verification step shows exact commands and expected outputs.

From 3953b83832d2ed3c4fdbe54124dd27af685d6e4c Mon Sep 17 00:00:00 2001
From: Failerko <c.dann@seznam.cz>
Date: Sat, 18 Apr 2026 17:16:48 +0200
Subject: [PATCH 04/36] feat: add createIsCompact hook at 1024px breakpoint

---
 src/lib/hooks/is-compact.svelte.ts | 28 ++++++++++++++++++++++++++++
 1 file changed, 28 insertions(+)
 create mode 100644 src/lib/hooks/is-compact.svelte.ts

diff --git a/src/lib/hooks/is-compact.svelte.ts b/src/lib/hooks/is-compact.svelte.ts
new file mode 100644
index 00000000..ee5693ff
--- /dev/null
+++ b/src/lib/hooks/is-compact.svelte.ts
@@ -0,0 +1,28 @@
+import { onMount } from 'svelte'
+
+/**
+ * Layout breakpoint hook for components that need a tighter "compact" threshold
+ * than the 768px `createIsMobile` gives. Fires true below 1024px (Tailwind lg).
+ */
+export function createIsCompact() {
+  let isCompact = $state(false)
+
+  onMount(() => {
+    const mql = window.matchMedia('(max-width: 1023px)')
+
+    const onChange = () => {
+      isCompact = mql.matches
+    }
+
+    mql.addEventListener('change', onChange)
+    isCompact = mql.matches
+
+    return () => mql.removeEventListener('change', onChange)
+  })
+
+  return {
+    get current() {
+      return isCompact
+    },
+  }
+}

From a7cde46dd231b65434b491f7138f01b8dfa3f39b Mon Sep 17 00:00:00 2001
From: Failerko <c.dann@seznam.cz>
Date: Sat, 18 Apr 2026 17:21:17 +0200
Subject: [PATCH 05/36] refactor: use isCompact for vault assistant layout
 decisions

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../vault/InteractiveVaultAssistant.svelte          | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/lib/components/vault/InteractiveVaultAssistant.svelte b/src/lib/components/vault/InteractiveVaultAssistant.svelte
index 305d2bf9..9a98e41b 100644
--- a/src/lib/components/vault/InteractiveVaultAssistant.svelte
+++ b/src/lib/components/vault/InteractiveVaultAssistant.svelte
@@ -52,6 +52,7 @@
   import { isTouchDevice } from '$lib/utils/swipe'
   import { SvelteSet } from 'svelte/reactivity'
   import { createIsMobile } from '$lib/hooks/is-mobile.svelte'
+  import { createIsCompact } from '$lib/hooks/is-compact.svelte'
 
   interface Props {
     onClose: () => void
@@ -61,8 +62,10 @@
 
   let { onClose, onEditEntity, focusedEntity = null }: Props = $props()
 
-  // Mobile detection
+  // Mobile detection (touch/native-device flavour + 768px breakpoint — kept for non-layout guards)
   const isMobile = createIsMobile()
+  // Layout breakpoint: below 1024px we use the compact (tabs, full-screen) layout
+  const isCompact = createIsCompact()
 
   // AbortController for cancelling ongoing requests
   let abortController: AbortController | null = null
@@ -546,7 +549,7 @@
   <ResponsiveModal.Content
     class={cn(
       'flex h-[90vh] w-full flex-col gap-0 overflow-hidden p-0',
-      vaultEditor.editorOpen && !isMobile.current ? 'max-w-[90vw]' : 'max-w-2xl',
+      vaultEditor.editorOpen && !isCompact.current ? 'max-w-[90vw]' : 'max-w-2xl',
     )}
   >
     <div class="flex flex-col overflow-hidden" style="height: 100%">
@@ -595,7 +598,7 @@
       <!-- Two-panel layout -->
       <div class="flex flex-1 overflow-hidden">
         <!-- Entity Editor Panel (left, desktop only) -->
-        {#if vaultEditor.editorOpen && vaultEditor.activeChange && !isMobile.current}
+        {#if vaultEditor.editorOpen && vaultEditor.activeChange && !isCompact.current}
           <div
             class="border-surface-700 flex flex-1 flex-col overflow-hidden border-r"
             transition:fade={{ duration: 100 }}
@@ -613,7 +616,7 @@
 
         <!-- Chat Panel (right, or full-width on mobile) -->
         <div
-          class="flex flex-col overflow-hidden {vaultEditor.editorOpen && !isMobile.current
+          class="flex flex-col overflow-hidden {vaultEditor.editorOpen && !isCompact.current
             ? 'w-full max-w-2xl shrink-0'
             : 'mx-auto w-full max-w-2xl'}"
         >
@@ -1090,7 +1093,7 @@
 </ResponsiveModal.Root>
 
 <!-- Mobile entity editor — bottom sheet -->
-{#if isMobile.current && vaultEditor.activeChange}
+{#if isCompact.current && vaultEditor.activeChange}
   <Sheet.Root
     open={vaultEditor.editorOpen}
     onOpenChange={(open) => {

From 39806f8f340814e6222fa177b07314127d04e2f4 Mon Sep 17 00:00:00 2001
From: Failerko <c.dann@seznam.cz>
Date: Sat, 18 Apr 2026 17:33:15 +0200
Subject: [PATCH 06/36] feat: render vault assistant as full-screen dialog on
 compact

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../vault/InteractiveVaultAssistant.svelte    | 898 +++++++++---------
 1 file changed, 455 insertions(+), 443 deletions(-)

diff --git a/src/lib/components/vault/InteractiveVaultAssistant.svelte b/src/lib/components/vault/InteractiveVaultAssistant.svelte
index 9a98e41b..3683e1a1 100644
--- a/src/lib/components/vault/InteractiveVaultAssistant.svelte
+++ b/src/lib/components/vault/InteractiveVaultAssistant.svelte
@@ -545,106 +545,199 @@
   }
 </script>
 
-<ResponsiveModal.Root open={true} onOpenChange={(open) => !open && onClose()}>
-  <ResponsiveModal.Content
-    class={cn(
-      'flex h-[90vh] w-full flex-col gap-0 overflow-hidden p-0',
-      vaultEditor.editorOpen && !isCompact.current ? 'max-w-[90vw]' : 'max-w-2xl',
-    )}
-  >
-    <div class="flex flex-col overflow-hidden" style="height: 100%">
-      <!-- Top Bar -->
-      <div
-        class="border-surface-700 bg-surface-900 flex items-center justify-between border-b px-4 py-2.5"
-      >
-        <div class="flex items-center gap-2.5">
-          <Button
-            variant="ghost"
-            size="icon"
-            class="text-surface-400 hover:text-foreground hover:bg-foreground/5 h-8 w-8"
-            onclick={onClose}
-            title="Back to Vault"
-          >
-            <ChevronLeft class="h-4 w-4" />
-          </Button>
-          <div class="flex items-center gap-2">
-            <div class="bg-accent-500/15 flex h-7 w-7 items-center justify-center rounded-lg">
-              <Bot class="text-accent-400 h-4 w-4" />
-            </div>
-            <h2 class="text-surface-100 text-sm font-semibold tracking-tight">Vault Assistant</h2>
+{#snippet assistantContent()}
+  <div class="flex flex-col overflow-hidden" style="height: 100%">
+    <!-- Top Bar -->
+    <div
+      class="border-surface-700 bg-surface-900 flex items-center justify-between border-b px-4 py-2.5"
+    >
+      <div class="flex items-center gap-2.5">
+        <Button
+          variant="ghost"
+          size="icon"
+          class="text-surface-400 hover:text-foreground hover:bg-foreground/5 h-8 w-8"
+          onclick={onClose}
+          title="Back to Vault"
+        >
+          <ChevronLeft class="h-4 w-4" />
+        </Button>
+        <div class="flex items-center gap-2">
+          <div class="bg-accent-500/15 flex h-7 w-7 items-center justify-center rounded-lg">
+            <Bot class="text-accent-400 h-4 w-4" />
           </div>
+          <h2 class="text-surface-100 text-sm font-semibold tracking-tight">Vault Assistant</h2>
         </div>
-        {#if vaultEditor.pendingCount > 0}
-          <div in:fade={{ duration: 150 }}>
-            <Button
-              variant="outline"
-              size="sm"
-              class="h-7 gap-1.5 border-emerald-500/30 bg-emerald-500/8 px-2.5 text-xs text-emerald-400 hover:bg-emerald-500/15"
-              onclick={handleApproveAll}
-              disabled={isGenerating}
-            >
-              <CheckCheck class="h-3.5 w-3.5" />
-              Approve All
-              <span
-                class="rounded-full bg-emerald-500/15 px-1.5 py-0.5 text-[10px] font-bold text-emerald-300"
-              >
-                {vaultEditor.pendingBreakdown}
-              </span>
-            </Button>
-          </div>
-        {/if}
       </div>
-
-      <!-- Two-panel layout -->
-      <div class="flex flex-1 overflow-hidden">
-        <!-- Entity Editor Panel (left, desktop only) -->
-        {#if vaultEditor.editorOpen && vaultEditor.activeChange && !isCompact.current}
-          <div
-            class="border-surface-700 flex flex-1 flex-col overflow-hidden border-r"
-            transition:fade={{ duration: 100 }}
+      {#if vaultEditor.pendingCount > 0}
+        <div in:fade={{ duration: 150 }}>
+          <Button
+            variant="outline"
+            size="sm"
+            class="h-7 gap-1.5 border-emerald-500/30 bg-emerald-500/8 px-2.5 text-xs text-emerald-400 hover:bg-emerald-500/15"
+            onclick={handleApproveAll}
+            disabled={isGenerating}
           >
-            <VaultEntityEditPanel
-              bind:this={editPanelRef}
-              change={vaultEditor.activeChange}
-              onApprove={(specificChange) =>
-                handleApprove(specificChange ?? vaultEditor.activeChange!)}
-              onReject={(change) => handleReject(change)}
-              onClose={() => vaultEditor.closeEditor()}
-            />
-          </div>
-        {/if}
+            <CheckCheck class="h-3.5 w-3.5" />
+            Approve All
+            <span
+              class="rounded-full bg-emerald-500/15 px-1.5 py-0.5 text-[10px] font-bold text-emerald-300"
+            >
+              {vaultEditor.pendingBreakdown}
+            </span>
+          </Button>
+        </div>
+      {/if}
+    </div>
 
-        <!-- Chat Panel (right, or full-width on mobile) -->
+    <!-- Two-panel layout -->
+    <div class="flex flex-1 overflow-hidden">
+      <!-- Entity Editor Panel (left, desktop only) -->
+      {#if vaultEditor.editorOpen && vaultEditor.activeChange && !isCompact.current}
         <div
-          class="flex flex-col overflow-hidden {vaultEditor.editorOpen && !isCompact.current
-            ? 'w-full max-w-2xl shrink-0'
-            : 'mx-auto w-full max-w-2xl'}"
+          class="border-surface-700 flex flex-1 flex-col overflow-hidden border-r"
+          transition:fade={{ duration: 100 }}
         >
-          <!-- Conversation selector -->
-          <div class="relative {conversationSelectorOpen ? 'z-20' : 'z-10'}">
+          <VaultEntityEditPanel
+            bind:this={editPanelRef}
+            change={vaultEditor.activeChange}
+            onApprove={(specificChange) =>
+              handleApprove(specificChange ?? vaultEditor.activeChange!)}
+            onReject={(change) => handleReject(change)}
+            onClose={() => vaultEditor.closeEditor()}
+          />
+        </div>
+      {/if}
+
+      <!-- Chat Panel (right, or full-width on mobile) -->
+      <div
+        class="flex flex-col overflow-hidden {vaultEditor.editorOpen && !isCompact.current
+          ? 'w-full max-w-2xl shrink-0'
+          : 'mx-auto w-full max-w-2xl'}"
+      >
+        <!-- Conversation selector -->
+        <div class="relative {conversationSelectorOpen ? 'z-20' : 'z-10'}">
+          <button
+            class="border-surface-700 text-surface-400 hover:text-foreground hover:bg-foreground/5 flex w-full items-center gap-2 border-b px-3 py-1.5 text-xs transition-colors"
+            onclick={() => (conversationSelectorOpen = !conversationSelectorOpen)}
+          >
+            <History class="h-3.5 w-3.5" />
+            <span class="font-medium">
+              {conversations.length > 0
+                ? `${conversations.length} conversation${conversations.length !== 1 ? 's' : ''}`
+                : 'No history'}
+            </span>
+            {#if conversationSelectorOpen}
+              <ChevronUp class="ml-auto h-3 w-3" />
+            {:else}
+              <ChevronDown class="ml-auto h-3 w-3" />
+            {/if}
+          </button>
+          {#if conversationSelectorOpen}
+            <!-- Backdrop -->
+            <!-- svelte-ignore a11y_no_static_element_interactions -->
+            <!-- svelte-ignore a11y_click_events_have_key_events -->
+            <div
+              class="fixed inset-0 z-10"
+              onclick={() => (conversationSelectorOpen = false)}
+              transition:fade={{ duration: 100 }}
+            ></div>
+            <!-- Floating panel -->
+            <div
+              class="border-surface-700 bg-surface-900 absolute right-2 left-2 z-20 mt-1 max-h-72 overflow-y-auto rounded-xl border shadow-xl shadow-black/30"
+              transition:slide={{ duration: 150 }}
+            >
+              <div class="space-y-1 p-1.5">
+                <!-- New conversation button -->
+                <button
+                  class="text-surface-300 hover:text-foreground hover:bg-foreground/5 flex w-full items-center gap-2.5 rounded-lg px-2.5 py-2 text-xs transition-colors"
+                  onclick={() => {
+                    conversationSelectorOpen = false
+                    handleNewConversation()
+                  }}
+                >
+                  <div
+                    class="bg-accent-500/15 flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-md"
+                  >
+                    <Plus class="text-accent-400 h-3.5 w-3.5" />
+                  </div>
+                  <span class="font-medium">New Conversation</span>
+                </button>
+
+                {#if conversations.length > 0}
+                  <div class="border-surface-700 mx-2 border-t"></div>
+                  {#each conversations as conv, i (conv.id)}
+                    <div
+                      class="group bg-surface-800 hover:bg-foreground/5 flex items-center gap-2.5 rounded-lg px-2.5 py-2 transition-colors"
+                    >
+                      <button
+                        class="flex min-w-0 flex-1 items-center gap-2.5 text-left"
+                        onclick={() => {
+                          conversationSelectorOpen = false
+                          handleSwitchConversation(conv.id)
+                        }}
+                      >
+                        <div
+                          class="bg-surface-700 flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-md"
+                        >
+                          <History class="text-surface-400 h-3.5 w-3.5" />
+                        </div>
+                        <div class="min-w-0 flex-1">
+                          <div class="text-surface-200 truncate text-xs font-medium">
+                            {conv.title || 'Untitled'}
+                          </div>
+                          <div class="text-surface-500 mt-0.5 text-[10px]">
+                            {new Date(conv.updatedAt).toLocaleString(undefined, {
+                              month: 'short',
+                              day: 'numeric',
+                              hour: 'numeric',
+                              minute: '2-digit',
+                            })}
+                            {#if i === conversations.length - 1 && conversations.length >= MAX_CONVERSATIONS}
+                              <span class="text-surface-600 ml-1">· oldest</span>
+                            {/if}
+                          </div>
+                        </div>
+                      </button>
+                      <button
+                        class="text-surface-500 flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-md opacity-0 transition-all group-hover:opacity-100 hover:bg-red-500/20 hover:text-red-400"
+                        onclick={(e) => {
+                          e.stopPropagation()
+                          handleDeleteConversation(conv.id)
+                        }}
+                        title="Delete conversation"
+                      >
+                        <Trash2 class="h-3 w-3" />
+                      </button>
+                    </div>
+                  {/each}
+                {/if}
+              </div>
+            </div>
+          {/if}
+        </div>
+
+        <!-- Pending Changes Quick List (popover) -->
+        {#if pendingOnly.length > 0}
+          <div class="relative z-10">
             <button
               class="border-surface-700 text-surface-400 hover:text-foreground hover:bg-foreground/5 flex w-full items-center gap-2 border-b px-3 py-1.5 text-xs transition-colors"
-              onclick={() => (conversationSelectorOpen = !conversationSelectorOpen)}
+              onclick={() => (pendingListOpen = !pendingListOpen)}
             >
-              <History class="h-3.5 w-3.5" />
-              <span class="font-medium">
-                {conversations.length > 0
-                  ? `${conversations.length} conversation${conversations.length !== 1 ? 's' : ''}`
-                  : 'No history'}
-              </span>
-              {#if conversationSelectorOpen}
+              <ListChecks class="h-3.5 w-3.5" />
+              <span class="font-medium">{pendingOnly.length} pending</span>
+              {#if pendingListOpen}
                 <ChevronUp class="ml-auto h-3 w-3" />
               {:else}
                 <ChevronDown class="ml-auto h-3 w-3" />
               {/if}
             </button>
-            {#if conversationSelectorOpen}
+            {#if pendingListOpen}
               <!-- Backdrop -->
               <!-- svelte-ignore a11y_no_static_element_interactions -->
               <!-- svelte-ignore a11y_click_events_have_key_events -->
               <div
                 class="fixed inset-0 z-10"
-                onclick={() => (conversationSelectorOpen = false)}
+                onclick={() => (pendingListOpen = false)}
                 transition:fade={{ duration: 100 }}
               ></div>
               <!-- Floating panel -->
@@ -653,382 +746,219 @@
                 transition:slide={{ duration: 150 }}
               >
                 <div class="space-y-1 p-1.5">
-                  <!-- New conversation button -->
-                  <button
-                    class="text-surface-300 hover:text-foreground hover:bg-foreground/5 flex w-full items-center gap-2.5 rounded-lg px-2.5 py-2 text-xs transition-colors"
-                    onclick={() => {
-                      conversationSelectorOpen = false
-                      handleNewConversation()
-                    }}
-                  >
+                  {#each pendingOnly as change (change.id)}
+                    {@const Icon = entityIcons[change.entityType]}
+                    {@const eStyle = entityStyles[change.entityType]}
+                    {@const aStyle = actionStyles[change.action]}
                     <div
-                      class="bg-accent-500/15 flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-md"
+                      class="group flex items-center gap-2.5 rounded-lg border-l-2 px-2.5 py-2 transition-colors {eStyle.border} {eStyle.bg} cursor-pointer hover:brightness-125"
+                      role="button"
+                      tabindex="0"
+                      onclick={() => handleEdit(change)}
+                      onkeydown={(e) => e.key === 'Enter' && handleEdit(change)}
                     >
-                      <Plus class="text-accent-400 h-3.5 w-3.5" />
-                    </div>
-                    <span class="font-medium">New Conversation</span>
-                  </button>
-
-                  {#if conversations.length > 0}
-                    <div class="border-surface-700 mx-2 border-t"></div>
-                    {#each conversations as conv, i (conv.id)}
+                      <!-- Entity icon -->
+                      <div
+                        class="flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-md {eStyle.bg}"
+                      >
+                        <Icon class="h-3.5 w-3.5 {eStyle.text}" />
+                      </div>
+                      <!-- Info -->
+                      <div class="min-w-0 flex-1">
+                        <div class="text-surface-200 truncate text-xs font-medium">
+                          {getChangeName(change)}
+                        </div>
+                        <div class="mt-0.5 flex items-center gap-1.5">
+                          <span
+                            class="inline-flex items-center rounded px-1 py-px text-[10px] font-semibold uppercase {aStyle.text} {aStyle.bg}"
+                          >
+                            {aStyle.label}
+                          </span>
+                          <span class="text-surface-500 text-[10px]">
+                            {change.entityType === 'lorebook-entry' ? 'entry' : change.entityType}
+                          </span>
+                        </div>
+                      </div>
+                      <!-- Actions -->
+                      <!-- svelte-ignore a11y_no_static_element_interactions -->
+                      <!-- svelte-ignore a11y_click_events_have_key_events -->
                       <div
-                        class="group bg-surface-800 hover:bg-foreground/5 flex items-center gap-2.5 rounded-lg px-2.5 py-2 transition-colors"
+                        class="flex items-center gap-1 opacity-0 transition-opacity group-hover:opacity-100"
+                        onclick={(e) => e.stopPropagation()}
                       >
                         <button
-                          class="flex min-w-0 flex-1 items-center gap-2.5 text-left"
-                          onclick={() => {
-                            conversationSelectorOpen = false
-                            handleSwitchConversation(conv.id)
-                          }}
+                          class="flex h-6 w-6 items-center justify-center rounded-md text-red-400/70 transition-colors hover:bg-red-500/20 hover:text-red-400"
+                          onclick={() => handleReject(change)}
+                          title="Reject"
                         >
-                          <div
-                            class="bg-surface-700 flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-md"
-                          >
-                            <History class="text-surface-400 h-3.5 w-3.5" />
-                          </div>
-                          <div class="min-w-0 flex-1">
-                            <div class="text-surface-200 truncate text-xs font-medium">
-                              {conv.title || 'Untitled'}
-                            </div>
-                            <div class="text-surface-500 mt-0.5 text-[10px]">
-                              {new Date(conv.updatedAt).toLocaleString(undefined, {
-                                month: 'short',
-                                day: 'numeric',
-                                hour: 'numeric',
-                                minute: '2-digit',
-                              })}
-                              {#if i === conversations.length - 1 && conversations.length >= MAX_CONVERSATIONS}
-                                <span class="text-surface-600 ml-1">· oldest</span>
-                              {/if}
-                            </div>
-                          </div>
+                          <X class="h-3.5 w-3.5" />
                         </button>
                         <button
-                          class="text-surface-500 flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-md opacity-0 transition-all group-hover:opacity-100 hover:bg-red-500/20 hover:text-red-400"
-                          onclick={(e) => {
-                            e.stopPropagation()
-                            handleDeleteConversation(conv.id)
-                          }}
-                          title="Delete conversation"
+                          class="flex h-6 w-6 items-center justify-center rounded-md text-emerald-400/70 transition-colors hover:bg-emerald-500/20 hover:text-emerald-400"
+                          onclick={() => handleApprove(change)}
+                          title="Approve"
                         >
-                          <Trash2 class="h-3 w-3" />
+                          <Check class="h-3.5 w-3.5" />
                         </button>
                       </div>
-                    {/each}
-                  {/if}
+                    </div>
+                  {/each}
                 </div>
               </div>
             {/if}
           </div>
+        {/if}
 
-          <!-- Pending Changes Quick List (popover) -->
-          {#if pendingOnly.length > 0}
-            <div class="relative z-10">
-              <button
-                class="border-surface-700 text-surface-400 hover:text-foreground hover:bg-foreground/5 flex w-full items-center gap-2 border-b px-3 py-1.5 text-xs transition-colors"
-                onclick={() => (pendingListOpen = !pendingListOpen)}
+        <!-- Messages -->
+        <div class="flex-1 space-y-3 overflow-y-auto px-4 py-3" bind:this={messagesContainer}>
+          {#each messages as message (message.id)}
+            <div in:fade={{ duration: 150 }}>
+              <div
+                class={cn('flex w-full', message.role === 'user' ? 'justify-end' : 'justify-start')}
               >
-                <ListChecks class="h-3.5 w-3.5" />
-                <span class="font-medium">{pendingOnly.length} pending</span>
-                {#if pendingListOpen}
-                  <ChevronUp class="ml-auto h-3 w-3" />
-                {:else}
-                  <ChevronDown class="ml-auto h-3 w-3" />
-                {/if}
-              </button>
-              {#if pendingListOpen}
-                <!-- Backdrop -->
-                <!-- svelte-ignore a11y_no_static_element_interactions -->
-                <!-- svelte-ignore a11y_click_events_have_key_events -->
                 <div
-                  class="fixed inset-0 z-10"
-                  onclick={() => (pendingListOpen = false)}
-                  transition:fade={{ duration: 100 }}
-                ></div>
-                <!-- Floating panel -->
-                <div
-                  class="border-surface-700 bg-surface-900 absolute right-2 left-2 z-20 mt-1 max-h-72 overflow-y-auto rounded-xl border shadow-xl shadow-black/30"
-                  transition:slide={{ duration: 150 }}
+                  class={cn(
+                    'max-w-[90%] md:max-w-[85%]',
+                    message.role === 'user' ? 'order-2' : 'order-1',
+                  )}
                 >
-                  <div class="space-y-1 p-1.5">
-                    {#each pendingOnly as change (change.id)}
-                      {@const Icon = entityIcons[change.entityType]}
-                      {@const eStyle = entityStyles[change.entityType]}
-                      {@const aStyle = actionStyles[change.action]}
-                      <div
-                        class="group flex items-center gap-2.5 rounded-lg border-l-2 px-2.5 py-2 transition-colors {eStyle.border} {eStyle.bg} cursor-pointer hover:brightness-125"
-                        role="button"
-                        tabindex="0"
-                        onclick={() => handleEdit(change)}
-                        onkeydown={(e) => e.key === 'Enter' && handleEdit(change)}
-                      >
-                        <!-- Entity icon -->
+                  <!-- Message bubble -->
+                  <div
+                    class={cn(
+                      'rounded-xl text-sm',
+                      message.role === 'user'
+                        ? 'bg-accent-600/90 px-3.5 py-2.5 text-white'
+                        : 'bg-surface-800 border-surface-700 border px-3.5 py-2.5',
+                    )}
+                  >
+                    <!-- Icon + content -->
+                    <div class="flex items-start gap-2.5">
+                      {#if message.role === 'assistant'}
                         <div
-                          class="flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-md {eStyle.bg}"
+                          class="bg-accent-500/15 mt-0.5 flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-md"
                         >
-                          <Icon class="h-3.5 w-3.5 {eStyle.text}" />
-                        </div>
-                        <!-- Info -->
-                        <div class="min-w-0 flex-1">
-                          <div class="text-surface-200 truncate text-xs font-medium">
-                            {getChangeName(change)}
-                          </div>
-                          <div class="mt-0.5 flex items-center gap-1.5">
-                            <span
-                              class="inline-flex items-center rounded px-1 py-px text-[10px] font-semibold uppercase {aStyle.text} {aStyle.bg}"
-                            >
-                              {aStyle.label}
-                            </span>
-                            <span class="text-surface-500 text-[10px]">
-                              {change.entityType === 'lorebook-entry' ? 'entry' : change.entityType}
-                            </span>
-                          </div>
+                          <Bot class="text-accent-400 h-3 w-3" />
                         </div>
-                        <!-- Actions -->
-                        <!-- svelte-ignore a11y_no_static_element_interactions -->
-                        <!-- svelte-ignore a11y_click_events_have_key_events -->
+                      {:else}
                         <div
-                          class="flex items-center gap-1 opacity-0 transition-opacity group-hover:opacity-100"
-                          onclick={(e) => e.stopPropagation()}
+                          class="mt-0.5 flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-md bg-white/10"
                         >
-                          <button
-                            class="flex h-6 w-6 items-center justify-center rounded-md text-red-400/70 transition-colors hover:bg-red-500/20 hover:text-red-400"
-                            onclick={() => handleReject(change)}
-                            title="Reject"
-                          >
-                            <X class="h-3.5 w-3.5" />
-                          </button>
-                          <button
-                            class="flex h-6 w-6 items-center justify-center rounded-md text-emerald-400/70 transition-colors hover:bg-emerald-500/20 hover:text-emerald-400"
-                            onclick={() => handleApprove(change)}
-                            title="Approve"
-                          >
-                            <Check class="h-3.5 w-3.5" />
-                          </button>
+                          <User class="h-3 w-3 opacity-90" />
+                        </div>
+                      {/if}
+                      <div class="min-w-0 flex-1">
+                        <div class="chat-markdown prose-content break-words">
+                          {@html parseMarkdown(message.content)}
                         </div>
                       </div>
-                    {/each}
-                  </div>
-                </div>
-              {/if}
-            </div>
-          {/if}
+                    </div>
 
-          <!-- Messages -->
-          <div class="flex-1 space-y-3 overflow-y-auto px-4 py-3" bind:this={messagesContainer}>
-            {#each messages as message (message.id)}
-              <div in:fade={{ duration: 150 }}>
-                <div
-                  class={cn(
-                    'flex w-full',
-                    message.role === 'user' ? 'justify-end' : 'justify-start',
-                  )}
-                >
-                  <div
-                    class={cn(
-                      'max-w-[90%] md:max-w-[85%]',
-                      message.role === 'user' ? 'order-2' : 'order-1',
-                    )}
-                  >
-                    <!-- Message bubble -->
-                    <div
-                      class={cn(
-                        'rounded-xl text-sm',
-                        message.role === 'user'
-                          ? 'bg-accent-600/90 px-3.5 py-2.5 text-white'
-                          : 'bg-surface-800 border-surface-700 border px-3.5 py-2.5',
-                      )}
-                    >
-                      <!-- Icon + content -->
-                      <div class="flex items-start gap-2.5">
-                        {#if message.role === 'assistant'}
-                          <div
-                            class="bg-accent-500/15 mt-0.5 flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-md"
-                          >
-                            <Bot class="text-accent-400 h-3 w-3" />
-                          </div>
-                        {:else}
+                    <!-- Reasoning (collapsible) -->
+                    {#if message.role === 'assistant' && message.reasoning}
+                      <div class="border-surface-700 mt-2 border-t pt-2">
+                        <button
+                          class="text-surface-400 hover:text-foreground flex items-center gap-1.5 text-xs transition-colors"
+                          onclick={() => toggleReasoning(message.id)}
+                        >
+                          <Brain class="h-3 w-3" />
+                          <span>Reasoning</span>
+                          {#if expandedReasoning.has(message.id)}
+                            <ChevronUp class="h-3 w-3" />
+                          {:else}
+                            <ChevronDown class="h-3 w-3" />
+                          {/if}
+                        </button>
+                        {#if expandedReasoning.has(message.id)}
                           <div
-                            class="mt-0.5 flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-md bg-white/10"
+                            class="bg-surface-900 text-surface-400 mt-2 rounded-lg p-2.5 font-mono text-xs whitespace-pre-wrap"
+                            in:slide
                           >
-                            <User class="h-3 w-3 opacity-90" />
+                            {message.reasoning}
                           </div>
                         {/if}
-                        <div class="min-w-0 flex-1">
-                          <div class="chat-markdown prose-content break-words">
-                            {@html parseMarkdown(message.content)}
-                          </div>
-                        </div>
                       </div>
+                    {/if}
+                  </div>
 
-                      <!-- Reasoning (collapsible) -->
-                      {#if message.role === 'assistant' && message.reasoning}
-                        <div class="border-surface-700 mt-2 border-t pt-2">
-                          <button
-                            class="text-surface-400 hover:text-foreground flex items-center gap-1.5 text-xs transition-colors"
-                            onclick={() => toggleReasoning(message.id)}
+                  <!-- Tool calls for this message -->
+                  {#if message.toolCalls && message.toolCalls.length > 0}
+                    <div class="mt-1.5 space-y-1">
+                      {#each message.toolCalls as toolCall (toolCall.id)}
+                        {#if !IMAGE_TOOL_NAMES.has(toolCall.name) || toolCall.imageUrl}
+                          <div
+                            class="border-surface-700 bg-surface-800 flex items-center gap-2 rounded-lg border px-2.5 py-1 text-xs"
                           >
-                            <Brain class="h-3 w-3" />
-                            <span>Reasoning</span>
-                            {#if expandedReasoning.has(message.id)}
-                              <ChevronUp class="h-3 w-3" />
+                            {#if IMAGE_TOOL_NAMES.has(toolCall.name)}
+                              <ImageIcon class="text-surface-500 h-3 w-3 flex-shrink-0" />
                             {:else}
-                              <ChevronDown class="h-3 w-3" />
+                              <Wrench class="text-surface-500 h-3 w-3 flex-shrink-0" />
                             {/if}
-                          </button>
-                          {#if expandedReasoning.has(message.id)}
-                            <div
-                              class="bg-surface-900 text-surface-400 mt-2 rounded-lg p-2.5 font-mono text-xs whitespace-pre-wrap"
-                              in:slide
+                            <span class="text-surface-400 font-medium"
+                              >{formatToolCallName(toolCall.name)}</span
                             >
-                              {message.reasoning}
-                            </div>
-                          {/if}
-                        </div>
-                      {/if}
-                    </div>
-
-                    <!-- Tool calls for this message -->
-                    {#if message.toolCalls && message.toolCalls.length > 0}
-                      <div class="mt-1.5 space-y-1">
-                        {#each message.toolCalls as toolCall (toolCall.id)}
-                          {#if !IMAGE_TOOL_NAMES.has(toolCall.name) || toolCall.imageUrl}
-                            <div
-                              class="border-surface-700 bg-surface-800 flex items-center gap-2 rounded-lg border px-2.5 py-1 text-xs"
+                          </div>
+                        {/if}
+                        {#if toolCall.imageUrl}
+                          <div class="group relative mt-1 inline-block">
+                            <button
+                              class="border-surface-700 block cursor-pointer overflow-hidden rounded-lg border transition-transform hover:scale-[1.02]"
+                              onclick={() => (enlargedImageUrl = toolCall.imageUrl!)}
+                              title="Click to enlarge"
                             >
-                              {#if IMAGE_TOOL_NAMES.has(toolCall.name)}
-                                <ImageIcon class="text-surface-500 h-3 w-3 flex-shrink-0" />
-                              {:else}
-                                <Wrench class="text-surface-500 h-3 w-3 flex-shrink-0" />
-                              {/if}
-                              <span class="text-surface-400 font-medium"
-                                >{formatToolCallName(toolCall.name)}</span
-                              >
-                            </div>
-                          {/if}
-                          {#if toolCall.imageUrl}
-                            <div class="group relative mt-1 inline-block">
+                              <img
+                                src={toolCall.imageUrl}
+                                alt="AI generated result"
+                                class="h-auto max-h-52 w-auto max-w-full object-contain"
+                              />
+                            </button>
+                            {#if toolCall.imageId}
                               <button
-                                class="border-surface-700 block cursor-pointer overflow-hidden rounded-lg border transition-transform hover:scale-[1.02]"
-                                onclick={() => (enlargedImageUrl = toolCall.imageUrl!)}
-                                title="Click to enlarge"
+                                class="absolute right-1.5 bottom-1.5 flex items-center gap-1 rounded-md bg-black/70 px-1.5 py-1 text-[10px] text-white opacity-0 transition-opacity group-hover:opacity-100 hover:bg-black/90"
+                                onclick={(e) => {
+                                  e.stopPropagation()
+                                  handleReferenceImage(toolCall.imageId!)
+                                }}
+                                title="Add image reference to message"
                               >
-                                <img
-                                  src={toolCall.imageUrl}
-                                  alt="AI generated result"
-                                  class="h-auto max-h-52 w-auto max-w-full object-contain"
-                                />
+                                <CornerDownLeft class="h-2.5 w-2.5" />
+                                Use
                               </button>
-                              {#if toolCall.imageId}
+                              {#if activeCharacterEntity}
                                 <button
-                                  class="absolute right-1.5 bottom-1.5 flex items-center gap-1 rounded-md bg-black/70 px-1.5 py-1 text-[10px] text-white opacity-0 transition-opacity group-hover:opacity-100 hover:bg-black/90"
+                                  class="absolute bottom-1.5 left-1.5 flex items-center gap-1 rounded-md bg-black/70 px-1.5 py-1 text-[10px] text-white opacity-0 transition-opacity group-hover:opacity-100 hover:bg-black/90"
                                   onclick={(e) => {
                                     e.stopPropagation()
-                                    handleReferenceImage(toolCall.imageId!)
+                                    handleSetPortrait(toolCall.imageId!)
                                   }}
-                                  title="Add image reference to message"
+                                  title="Set as portrait for {activeCharacterEntity.entityName}"
                                 >
-                                  <CornerDownLeft class="h-2.5 w-2.5" />
-                                  Use
+                                  <CircleUser class="h-2.5 w-2.5" />
+                                  Set Portrait
                                 </button>
-                                {#if activeCharacterEntity}
-                                  <button
-                                    class="absolute bottom-1.5 left-1.5 flex items-center gap-1 rounded-md bg-black/70 px-1.5 py-1 text-[10px] text-white opacity-0 transition-opacity group-hover:opacity-100 hover:bg-black/90"
-                                    onclick={(e) => {
-                                      e.stopPropagation()
-                                      handleSetPortrait(toolCall.imageId!)
-                                    }}
-                                    title="Set as portrait for {activeCharacterEntity.entityName}"
-                                  >
-                                    <CircleUser class="h-2.5 w-2.5" />
-                                    Set Portrait
-                                  </button>
-                                {/if}
                               {/if}
-                            </div>
-                          {/if}
-                        {/each}
-                      </div>
-                    {/if}
-
-                    <!-- Timestamp -->
-                    <div
-                      class={cn(
-                        'text-surface-500 mt-1 px-1 text-[10px]',
-                        message.role === 'user' ? 'text-right' : '',
-                      )}
-                    >
-                      {new Date(message.timestamp).toLocaleTimeString()}
-                    </div>
-                  </div>
-                </div>
-
-                <!-- Inline diff cards for pending changes produced by this message -->
-                {#if message.pendingChanges && message.pendingChanges.length > 0}
-                  <div class="mt-3 space-y-2">
-                    {#each message.pendingChanges as change (change.id)}
-                      {@const liveChange = vaultEditor.getLiveChange(change.id) ?? change}
-                      <VaultDiffView
-                        change={liveChange}
-                        onApprove={() => handleApprove(liveChange)}
-                        onReject={() => handleReject(liveChange)}
-                        onEdit={() => handleEdit(liveChange)}
-                      />
-                    {/each}
-                  </div>
-                {/if}
-              </div>
-            {/each}
-
-            <!-- Progress indicator -->
-            {#if isGenerating}
-              <div class="flex justify-start" in:fade>
-                <div class="max-w-[90%] md:max-w-[85%]">
-                  <div class="border-surface-700 bg-surface-800 rounded-xl border px-3.5 py-2.5">
-                    <div class="flex items-start gap-2.5">
-                      <div
-                        class="bg-accent-500/15 mt-0.5 flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-md"
-                      >
-                        <Bot class="text-accent-400 h-3 w-3" />
-                      </div>
-                      <div class="min-w-0 flex-1">
-                        {#if activeToolCalls.length > 0}
-                          <div class="space-y-1">
-                            {#each activeToolCalls as toolCall (toolCall.id)}
-                              <div
-                                class="border-surface-700 bg-surface-900 flex items-center gap-2 rounded-lg border px-2.5 py-1.5 text-xs"
-                                in:fade
-                              >
-                                {#if toolCall.result === '...'}
-                                  <Loader2
-                                    class="text-accent-400 h-3 w-3 flex-shrink-0 animate-spin"
-                                  />
-                                {:else}
-                                  <Wrench class="text-surface-500 h-3 w-3 flex-shrink-0" />
-                                {/if}
-                                <span class="text-surface-300 font-medium"
-                                  >{formatToolCallName(toolCall.name)}</span
-                                >
-                              </div>
-                            {/each}
-                          </div>
-                        {:else if isThinking}
-                          <div class="text-surface-400 flex items-center gap-2 text-sm">
-                            <Loader2 class="text-accent-400 h-3.5 w-3.5 animate-spin" />
-                            <span>Thinking...</span>
+                            {/if}
                           </div>
                         {/if}
-                      </div>
+                      {/each}
                     </div>
+                  {/if}
+
+                  <!-- Timestamp -->
+                  <div
+                    class={cn(
+                      'text-surface-500 mt-1 px-1 text-[10px]',
+                      message.role === 'user' ? 'text-right' : '',
+                    )}
+                  >
+                    {new Date(message.timestamp).toLocaleTimeString()}
                   </div>
                 </div>
               </div>
 
-              <!-- Streaming diff cards (shown before step message arrives) -->
-              {#if streamingChanges.length > 0}
+              <!-- Inline diff cards for pending changes produced by this message -->
+              {#if message.pendingChanges && message.pendingChanges.length > 0}
                 <div class="mt-3 space-y-2">
-                  {#each streamingChanges as change (change.id)}
+                  {#each message.pendingChanges as change (change.id)}
                     {@const liveChange = vaultEditor.getLiveChange(change.id) ?? change}
                     <VaultDiffView
                       change={liveChange}
@@ -1039,58 +969,140 @@
                   {/each}
                 </div>
               {/if}
-            {/if}
-          </div>
-
-          <!-- Error display -->
-          {#if error}
-            <div class="border-t border-red-500/20 bg-red-500/8 px-4 py-2" in:slide>
-              <div class="flex items-center gap-2 text-xs text-red-400">
-                <AlertCircle class="h-3.5 w-3.5" />
-                <span>{error}</span>
+            </div>
+          {/each}
+
+          <!-- Progress indicator -->
+          {#if isGenerating}
+            <div class="flex justify-start" in:fade>
+              <div class="max-w-[90%] md:max-w-[85%]">
+                <div class="border-surface-700 bg-surface-800 rounded-xl border px-3.5 py-2.5">
+                  <div class="flex items-start gap-2.5">
+                    <div
+                      class="bg-accent-500/15 mt-0.5 flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-md"
+                    >
+                      <Bot class="text-accent-400 h-3 w-3" />
+                    </div>
+                    <div class="min-w-0 flex-1">
+                      {#if activeToolCalls.length > 0}
+                        <div class="space-y-1">
+                          {#each activeToolCalls as toolCall (toolCall.id)}
+                            <div
+                              class="border-surface-700 bg-surface-900 flex items-center gap-2 rounded-lg border px-2.5 py-1.5 text-xs"
+                              in:fade
+                            >
+                              {#if toolCall.result === '...'}
+                                <Loader2
+                                  class="text-accent-400 h-3 w-3 flex-shrink-0 animate-spin"
+                                />
+                              {:else}
+                                <Wrench class="text-surface-500 h-3 w-3 flex-shrink-0" />
+                              {/if}
+                              <span class="text-surface-300 font-medium"
+                                >{formatToolCallName(toolCall.name)}</span
+                              >
+                            </div>
+                          {/each}
+                        </div>
+                      {:else if isThinking}
+                        <div class="text-surface-400 flex items-center gap-2 text-sm">
+                          <Loader2 class="text-accent-400 h-3.5 w-3.5 animate-spin" />
+                          <span>Thinking...</span>
+                        </div>
+                      {/if}
+                    </div>
+                  </div>
+                </div>
               </div>
             </div>
+
+            <!-- Streaming diff cards (shown before step message arrives) -->
+            {#if streamingChanges.length > 0}
+              <div class="mt-3 space-y-2">
+                {#each streamingChanges as change (change.id)}
+                  {@const liveChange = vaultEditor.getLiveChange(change.id) ?? change}
+                  <VaultDiffView
+                    change={liveChange}
+                    onApprove={() => handleApprove(liveChange)}
+                    onReject={() => handleReject(liveChange)}
+                    onEdit={() => handleEdit(liveChange)}
+                  />
+                {/each}
+              </div>
+            {/if}
           {/if}
+        </div>
 
-          <!-- Input area -->
-          <div class="border-surface-700 bg-surface-900 border-t p-3">
-            <div class="flex items-end gap-2">
-              <Textarea
-                bind:value={inputValue}
-                onkeydown={handleKeyDown}
-                placeholder="Ask me to create characters, organize lorebooks, set up scenarios..."
-                rows={2}
-                class="border-surface-700 bg-surface-800 placeholder:text-surface-500 min-h-[2.5rem] resize-none rounded-xl text-sm"
-                disabled={isGenerating || !service}
-              />
-              <Button
-                size="icon"
-                class={cn(
-                  'h-10 w-10 shrink-0 rounded-xl',
-                  isGenerating ? 'opacity-70' : 'bg-accent-600 hover:bg-accent-500',
-                )}
-                onclick={handleSend}
-                disabled={!inputValue.trim() || isGenerating || !service}
-                title="Send message"
-              >
-                {#if isGenerating}
-                  <Loader2 class="h-5 w-5 animate-spin" />
-                {:else}
-                  <Send class="h-5 w-5" />
-                {/if}
-              </Button>
-            </div>
-            <div class="text-surface-500 mt-1.5 hidden text-center text-[10px] md:block">
-              {isTouchDevice()
-                ? 'Shift+Enter to send, Enter for new line'
-                : 'Enter to send, Shift+Enter for new line'}
+        <!-- Error display -->
+        {#if error}
+          <div class="border-t border-red-500/20 bg-red-500/8 px-4 py-2" in:slide>
+            <div class="flex items-center gap-2 text-xs text-red-400">
+              <AlertCircle class="h-3.5 w-3.5" />
+              <span>{error}</span>
             </div>
           </div>
+        {/if}
+
+        <!-- Input area -->
+        <div class="border-surface-700 bg-surface-900 border-t p-3">
+          <div class="flex items-end gap-2">
+            <Textarea
+              bind:value={inputValue}
+              onkeydown={handleKeyDown}
+              placeholder="Ask me to create characters, organize lorebooks, set up scenarios..."
+              rows={2}
+              class="border-surface-700 bg-surface-800 placeholder:text-surface-500 min-h-[2.5rem] resize-none rounded-xl text-sm"
+              disabled={isGenerating || !service}
+            />
+            <Button
+              size="icon"
+              class={cn(
+                'h-10 w-10 shrink-0 rounded-xl',
+                isGenerating ? 'opacity-70' : 'bg-accent-600 hover:bg-accent-500',
+              )}
+              onclick={handleSend}
+              disabled={!inputValue.trim() || isGenerating || !service}
+              title="Send message"
+            >
+              {#if isGenerating}
+                <Loader2 class="h-5 w-5 animate-spin" />
+              {:else}
+                <Send class="h-5 w-5" />
+              {/if}
+            </Button>
+          </div>
+          <div class="text-surface-500 mt-1.5 hidden text-center text-[10px] md:block">
+            {isTouchDevice()
+              ? 'Shift+Enter to send, Enter for new line'
+              : 'Enter to send, Shift+Enter for new line'}
+          </div>
         </div>
       </div>
     </div>
-  </ResponsiveModal.Content>
-</ResponsiveModal.Root>
+  </div>
+{/snippet}
+
+{#if isCompact.current}
+  <Dialog.Root open={true} onOpenChange={(open) => !open && onClose()}>
+    <Dialog.Content
+      class="flex h-[100dvh] w-screen max-w-none flex-col gap-0 overflow-hidden rounded-none border-none p-0"
+    >
+      <Dialog.Title class="sr-only">Vault Assistant</Dialog.Title>
+      {@render assistantContent()}
+    </Dialog.Content>
+  </Dialog.Root>
+{:else}
+  <ResponsiveModal.Root open={true} onOpenChange={(open) => !open && onClose()}>
+    <ResponsiveModal.Content
+      class={cn(
+        'flex h-[90vh] w-full flex-col gap-0 overflow-hidden p-0',
+        vaultEditor.editorOpen ? 'max-w-[90vw]' : 'max-w-2xl',
+      )}
+    >
+      {@render assistantContent()}
+    </ResponsiveModal.Content>
+  </ResponsiveModal.Root>
+{/if}
 
 <!-- Mobile entity editor — bottom sheet -->
 {#if isCompact.current && vaultEditor.activeChange}

From ada97942af822fc48234b4a2cf32a4041693b81c Mon Sep 17 00:00:00 2001
From: Failerko <c.dann@seznam.cz>
Date: Sat, 18 Apr 2026 17:41:25 +0200
Subject: [PATCH 07/36] feat: tab-based compact layout for vault assistant

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../vault/InteractiveVaultAssistant.svelte    | 530 ++++++++++--------
 1 file changed, 291 insertions(+), 239 deletions(-)

diff --git a/src/lib/components/vault/InteractiveVaultAssistant.svelte b/src/lib/components/vault/InteractiveVaultAssistant.svelte
index 3683e1a1..ebc9f2fc 100644
--- a/src/lib/components/vault/InteractiveVaultAssistant.svelte
+++ b/src/lib/components/vault/InteractiveVaultAssistant.svelte
@@ -44,7 +44,6 @@
   import VaultEntityEditPanel from './VaultEntityEditPanel.svelte'
   import { fade, slide } from 'svelte/transition'
   import { onMount, onDestroy, tick } from 'svelte'
-  import * as Sheet from '$lib/components/ui/sheet'
   import * as Dialog from '$lib/components/ui/dialog'
   import * as ResponsiveModal from '$lib/components/ui/responsive-modal'
   import { parseMarkdown } from '$lib/utils/markdown'
@@ -101,6 +100,20 @@
 
   // Tracks the most recently viewed character via show_entity (fallback when no focusedEntity)
   let viewedEntity = $state<FocusedEntity | null>(null)
+
+  // Compact-width tab state
+  let activeTab = $state<'chat' | 'entity'>('chat')
+
+  // Auto-fall-back to chat tab when the Entity tab loses its content
+  // (e.g. user closed the editor, approved/rejected the last pending change,
+  // or conversation switched away from an active change).
+  $effect(() => {
+    const entityTabAvailable = vaultEditor.editorOpen && vaultEditor.activeChange !== null
+    if (!entityTabAvailable && activeTab === 'entity') {
+      activeTab = 'chat'
+    }
+  })
+
   const activeCharacterEntity = $derived<FocusedEntity | null>(
     focusedEntity?.entityType === 'character'
       ? focusedEntity
@@ -230,6 +243,7 @@
     }
     service.reset()
     vaultEditor.reset()
+    activeTab = 'chat'
     initializeService()
     await loadConversationsList()
   }
@@ -243,6 +257,7 @@
     const loaded = await service.loadConversation(id)
     if (loaded) {
       vaultEditor.reset()
+      activeTab = 'chat'
       // Restore full UI state from persisted data
       if (loaded.chatMessages.length > 0) {
         messages = loaded.chatMessages
@@ -278,6 +293,7 @@
       if (service?.getConversationId() === id) {
         service.reset()
         vaultEditor.reset()
+        activeTab = 'chat'
         initializeService()
       }
       await loadConversationsList()
@@ -292,14 +308,12 @@
   }
 
   let editPanelRef = $state<ReturnType<typeof VaultEntityEditPanel> | null>(null)
-  let editPanelMobileRef = $state<ReturnType<typeof VaultEntityEditPanel> | null>(null)
 
   function handleSetPortrait(imageId: string) {
     if (!activeCharacterEntity || !service) return
     const dataUrl = service.generatedImages.get(imageId)
     if (!dataUrl) return
-    const panel = editPanelRef ?? editPanelMobileRef
-    panel?.setPortrait(dataUrl)
+    editPanelRef?.setPortrait(dataUrl)
   }
 
   async function handleSend() {
@@ -809,156 +823,262 @@
           </div>
         {/if}
 
+        <!-- Compact-width tab bar: Chat | Entity -->
+        {#if isCompact.current && vaultEditor.editorOpen && vaultEditor.activeChange}
+          <div class="border-surface-700 flex shrink-0 gap-1 border-b px-2 py-1.5" role="tablist">
+            <button
+              type="button"
+              role="tab"
+              aria-selected={activeTab === 'chat'}
+              class={cn(
+                'flex-1 rounded-md px-3 py-1.5 text-xs font-medium transition-colors',
+                activeTab === 'chat'
+                  ? 'bg-surface-700 text-surface-100'
+                  : 'text-surface-400 hover:text-foreground hover:bg-foreground/5',
+              )}
+              onclick={() => (activeTab = 'chat')}
+            >
+              Chat
+            </button>
+            <button
+              type="button"
+              role="tab"
+              aria-selected={activeTab === 'entity'}
+              class={cn(
+                'relative flex-1 rounded-md px-3 py-1.5 text-xs font-medium transition-colors',
+                activeTab === 'entity'
+                  ? 'bg-surface-700 text-surface-100'
+                  : 'text-surface-400 hover:text-foreground hover:bg-foreground/5',
+              )}
+              onclick={() => (activeTab = 'entity')}
+            >
+              Entity
+              {#if vaultEditor.pendingCount > 0}
+                <span
+                  class="ml-1.5 inline-flex h-4 min-w-4 items-center justify-center rounded-full bg-emerald-500/20 px-1 text-[10px] font-bold text-emerald-300"
+                >
+                  {vaultEditor.pendingCount}
+                </span>
+              {/if}
+            </button>
+          </div>
+        {/if}
+
         <!-- Messages -->
-        <div class="flex-1 space-y-3 overflow-y-auto px-4 py-3" bind:this={messagesContainer}>
-          {#each messages as message (message.id)}
-            <div in:fade={{ duration: 150 }}>
-              <div
-                class={cn('flex w-full', message.role === 'user' ? 'justify-end' : 'justify-start')}
-              >
+        {#if !isCompact.current || activeTab === 'chat'}
+          <div class="flex-1 space-y-3 overflow-y-auto px-4 py-3" bind:this={messagesContainer}>
+            {#each messages as message (message.id)}
+              <div in:fade={{ duration: 150 }}>
                 <div
                   class={cn(
-                    'max-w-[90%] md:max-w-[85%]',
-                    message.role === 'user' ? 'order-2' : 'order-1',
+                    'flex w-full',
+                    message.role === 'user' ? 'justify-end' : 'justify-start',
                   )}
                 >
-                  <!-- Message bubble -->
                   <div
                     class={cn(
-                      'rounded-xl text-sm',
-                      message.role === 'user'
-                        ? 'bg-accent-600/90 px-3.5 py-2.5 text-white'
-                        : 'bg-surface-800 border-surface-700 border px-3.5 py-2.5',
+                      'max-w-[90%] md:max-w-[85%]',
+                      message.role === 'user' ? 'order-2' : 'order-1',
                     )}
                   >
-                    <!-- Icon + content -->
-                    <div class="flex items-start gap-2.5">
-                      {#if message.role === 'assistant'}
-                        <div
-                          class="bg-accent-500/15 mt-0.5 flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-md"
-                        >
-                          <Bot class="text-accent-400 h-3 w-3" />
-                        </div>
-                      {:else}
-                        <div
-                          class="mt-0.5 flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-md bg-white/10"
-                        >
-                          <User class="h-3 w-3 opacity-90" />
-                        </div>
-                      {/if}
-                      <div class="min-w-0 flex-1">
-                        <div class="chat-markdown prose-content break-words">
-                          {@html parseMarkdown(message.content)}
-                        </div>
-                      </div>
-                    </div>
-
-                    <!-- Reasoning (collapsible) -->
-                    {#if message.role === 'assistant' && message.reasoning}
-                      <div class="border-surface-700 mt-2 border-t pt-2">
-                        <button
-                          class="text-surface-400 hover:text-foreground flex items-center gap-1.5 text-xs transition-colors"
-                          onclick={() => toggleReasoning(message.id)}
-                        >
-                          <Brain class="h-3 w-3" />
-                          <span>Reasoning</span>
-                          {#if expandedReasoning.has(message.id)}
-                            <ChevronUp class="h-3 w-3" />
-                          {:else}
-                            <ChevronDown class="h-3 w-3" />
-                          {/if}
-                        </button>
-                        {#if expandedReasoning.has(message.id)}
+                    <!-- Message bubble -->
+                    <div
+                      class={cn(
+                        'rounded-xl text-sm',
+                        message.role === 'user'
+                          ? 'bg-accent-600/90 px-3.5 py-2.5 text-white'
+                          : 'bg-surface-800 border-surface-700 border px-3.5 py-2.5',
+                      )}
+                    >
+                      <!-- Icon + content -->
+                      <div class="flex items-start gap-2.5">
+                        {#if message.role === 'assistant'}
                           <div
-                            class="bg-surface-900 text-surface-400 mt-2 rounded-lg p-2.5 font-mono text-xs whitespace-pre-wrap"
-                            in:slide
+                            class="bg-accent-500/15 mt-0.5 flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-md"
                           >
-                            {message.reasoning}
+                            <Bot class="text-accent-400 h-3 w-3" />
+                          </div>
+                        {:else}
+                          <div
+                            class="mt-0.5 flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-md bg-white/10"
+                          >
+                            <User class="h-3 w-3 opacity-90" />
                           </div>
                         {/if}
+                        <div class="min-w-0 flex-1">
+                          <div class="chat-markdown prose-content break-words">
+                            {@html parseMarkdown(message.content)}
+                          </div>
+                        </div>
                       </div>
-                    {/if}
-                  </div>
 
-                  <!-- Tool calls for this message -->
-                  {#if message.toolCalls && message.toolCalls.length > 0}
-                    <div class="mt-1.5 space-y-1">
-                      {#each message.toolCalls as toolCall (toolCall.id)}
-                        {#if !IMAGE_TOOL_NAMES.has(toolCall.name) || toolCall.imageUrl}
-                          <div
-                            class="border-surface-700 bg-surface-800 flex items-center gap-2 rounded-lg border px-2.5 py-1 text-xs"
+                      <!-- Reasoning (collapsible) -->
+                      {#if message.role === 'assistant' && message.reasoning}
+                        <div class="border-surface-700 mt-2 border-t pt-2">
+                          <button
+                            class="text-surface-400 hover:text-foreground flex items-center gap-1.5 text-xs transition-colors"
+                            onclick={() => toggleReasoning(message.id)}
                           >
-                            {#if IMAGE_TOOL_NAMES.has(toolCall.name)}
-                              <ImageIcon class="text-surface-500 h-3 w-3 flex-shrink-0" />
+                            <Brain class="h-3 w-3" />
+                            <span>Reasoning</span>
+                            {#if expandedReasoning.has(message.id)}
+                              <ChevronUp class="h-3 w-3" />
                             {:else}
-                              <Wrench class="text-surface-500 h-3 w-3 flex-shrink-0" />
+                              <ChevronDown class="h-3 w-3" />
                             {/if}
-                            <span class="text-surface-400 font-medium"
-                              >{formatToolCallName(toolCall.name)}</span
+                          </button>
+                          {#if expandedReasoning.has(message.id)}
+                            <div
+                              class="bg-surface-900 text-surface-400 mt-2 rounded-lg p-2.5 font-mono text-xs whitespace-pre-wrap"
+                              in:slide
                             >
-                          </div>
-                        {/if}
-                        {#if toolCall.imageUrl}
-                          <div class="group relative mt-1 inline-block">
-                            <button
-                              class="border-surface-700 block cursor-pointer overflow-hidden rounded-lg border transition-transform hover:scale-[1.02]"
-                              onclick={() => (enlargedImageUrl = toolCall.imageUrl!)}
-                              title="Click to enlarge"
+                              {message.reasoning}
+                            </div>
+                          {/if}
+                        </div>
+                      {/if}
+                    </div>
+
+                    <!-- Tool calls for this message -->
+                    {#if message.toolCalls && message.toolCalls.length > 0}
+                      <div class="mt-1.5 space-y-1">
+                        {#each message.toolCalls as toolCall (toolCall.id)}
+                          {#if !IMAGE_TOOL_NAMES.has(toolCall.name) || toolCall.imageUrl}
+                            <div
+                              class="border-surface-700 bg-surface-800 flex items-center gap-2 rounded-lg border px-2.5 py-1 text-xs"
                             >
-                              <img
-                                src={toolCall.imageUrl}
-                                alt="AI generated result"
-                                class="h-auto max-h-52 w-auto max-w-full object-contain"
-                              />
-                            </button>
-                            {#if toolCall.imageId}
+                              {#if IMAGE_TOOL_NAMES.has(toolCall.name)}
+                                <ImageIcon class="text-surface-500 h-3 w-3 flex-shrink-0" />
+                              {:else}
+                                <Wrench class="text-surface-500 h-3 w-3 flex-shrink-0" />
+                              {/if}
+                              <span class="text-surface-400 font-medium"
+                                >{formatToolCallName(toolCall.name)}</span
+                              >
+                            </div>
+                          {/if}
+                          {#if toolCall.imageUrl}
+                            <div class="group relative mt-1 inline-block">
                               <button
-                                class="absolute right-1.5 bottom-1.5 flex items-center gap-1 rounded-md bg-black/70 px-1.5 py-1 text-[10px] text-white opacity-0 transition-opacity group-hover:opacity-100 hover:bg-black/90"
-                                onclick={(e) => {
-                                  e.stopPropagation()
-                                  handleReferenceImage(toolCall.imageId!)
-                                }}
-                                title="Add image reference to message"
+                                class="border-surface-700 block cursor-pointer overflow-hidden rounded-lg border transition-transform hover:scale-[1.02]"
+                                onclick={() => (enlargedImageUrl = toolCall.imageUrl!)}
+                                title="Click to enlarge"
                               >
-                                <CornerDownLeft class="h-2.5 w-2.5" />
-                                Use
+                                <img
+                                  src={toolCall.imageUrl}
+                                  alt="AI generated result"
+                                  class="h-auto max-h-52 w-auto max-w-full object-contain"
+                                />
                               </button>
-                              {#if activeCharacterEntity}
+                              {#if toolCall.imageId}
                                 <button
-                                  class="absolute bottom-1.5 left-1.5 flex items-center gap-1 rounded-md bg-black/70 px-1.5 py-1 text-[10px] text-white opacity-0 transition-opacity group-hover:opacity-100 hover:bg-black/90"
+                                  class="absolute right-1.5 bottom-1.5 flex items-center gap-1 rounded-md bg-black/70 px-1.5 py-1 text-[10px] text-white opacity-0 transition-opacity group-hover:opacity-100 hover:bg-black/90"
                                   onclick={(e) => {
                                     e.stopPropagation()
-                                    handleSetPortrait(toolCall.imageId!)
+                                    handleReferenceImage(toolCall.imageId!)
                                   }}
-                                  title="Set as portrait for {activeCharacterEntity.entityName}"
+                                  title="Add image reference to message"
                                 >
-                                  <CircleUser class="h-2.5 w-2.5" />
-                                  Set Portrait
+                                  <CornerDownLeft class="h-2.5 w-2.5" />
+                                  Use
                                 </button>
+                                {#if activeCharacterEntity}
+                                  <button
+                                    class="absolute bottom-1.5 left-1.5 flex items-center gap-1 rounded-md bg-black/70 px-1.5 py-1 text-[10px] text-white opacity-0 transition-opacity group-hover:opacity-100 hover:bg-black/90"
+                                    onclick={(e) => {
+                                      e.stopPropagation()
+                                      handleSetPortrait(toolCall.imageId!)
+                                    }}
+                                    title="Set as portrait for {activeCharacterEntity.entityName}"
+                                  >
+                                    <CircleUser class="h-2.5 w-2.5" />
+                                    Set Portrait
+                                  </button>
+                                {/if}
                               {/if}
-                            {/if}
+                            </div>
+                          {/if}
+                        {/each}
+                      </div>
+                    {/if}
+
+                    <!-- Timestamp -->
+                    <div
+                      class={cn(
+                        'text-surface-500 mt-1 px-1 text-[10px]',
+                        message.role === 'user' ? 'text-right' : '',
+                      )}
+                    >
+                      {new Date(message.timestamp).toLocaleTimeString()}
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Inline diff cards for pending changes produced by this message -->
+                {#if message.pendingChanges && message.pendingChanges.length > 0}
+                  <div class="mt-3 space-y-2">
+                    {#each message.pendingChanges as change (change.id)}
+                      {@const liveChange = vaultEditor.getLiveChange(change.id) ?? change}
+                      <VaultDiffView
+                        change={liveChange}
+                        onApprove={() => handleApprove(liveChange)}
+                        onReject={() => handleReject(liveChange)}
+                        onEdit={() => handleEdit(liveChange)}
+                      />
+                    {/each}
+                  </div>
+                {/if}
+              </div>
+            {/each}
+
+            <!-- Progress indicator -->
+            {#if isGenerating}
+              <div class="flex justify-start" in:fade>
+                <div class="max-w-[90%] md:max-w-[85%]">
+                  <div class="border-surface-700 bg-surface-800 rounded-xl border px-3.5 py-2.5">
+                    <div class="flex items-start gap-2.5">
+                      <div
+                        class="bg-accent-500/15 mt-0.5 flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-md"
+                      >
+                        <Bot class="text-accent-400 h-3 w-3" />
+                      </div>
+                      <div class="min-w-0 flex-1">
+                        {#if activeToolCalls.length > 0}
+                          <div class="space-y-1">
+                            {#each activeToolCalls as toolCall (toolCall.id)}
+                              <div
+                                class="border-surface-700 bg-surface-900 flex items-center gap-2 rounded-lg border px-2.5 py-1.5 text-xs"
+                                in:fade
+                              >
+                                {#if toolCall.result === '...'}
+                                  <Loader2
+                                    class="text-accent-400 h-3 w-3 flex-shrink-0 animate-spin"
+                                  />
+                                {:else}
+                                  <Wrench class="text-surface-500 h-3 w-3 flex-shrink-0" />
+                                {/if}
+                                <span class="text-surface-300 font-medium"
+                                  >{formatToolCallName(toolCall.name)}</span
+                                >
+                              </div>
+                            {/each}
+                          </div>
+                        {:else if isThinking}
+                          <div class="text-surface-400 flex items-center gap-2 text-sm">
+                            <Loader2 class="text-accent-400 h-3.5 w-3.5 animate-spin" />
+                            <span>Thinking...</span>
                           </div>
                         {/if}
-                      {/each}
+                      </div>
                     </div>
-                  {/if}
-
-                  <!-- Timestamp -->
-                  <div
-                    class={cn(
-                      'text-surface-500 mt-1 px-1 text-[10px]',
-                      message.role === 'user' ? 'text-right' : '',
-                    )}
-                  >
-                    {new Date(message.timestamp).toLocaleTimeString()}
                   </div>
                 </div>
               </div>
 
-              <!-- Inline diff cards for pending changes produced by this message -->
-              {#if message.pendingChanges && message.pendingChanges.length > 0}
+              <!-- Streaming diff cards (shown before step message arrives) -->
+              {#if streamingChanges.length > 0}
                 <div class="mt-3 space-y-2">
-                  {#each message.pendingChanges as change (change.id)}
+                  {#each streamingChanges as change (change.id)}
                     {@const liveChange = vaultEditor.getLiveChange(change.id) ?? change}
                     <VaultDiffView
                       change={liveChange}
@@ -969,114 +1089,68 @@
                   {/each}
                 </div>
               {/if}
-            </div>
-          {/each}
-
-          <!-- Progress indicator -->
-          {#if isGenerating}
-            <div class="flex justify-start" in:fade>
-              <div class="max-w-[90%] md:max-w-[85%]">
-                <div class="border-surface-700 bg-surface-800 rounded-xl border px-3.5 py-2.5">
-                  <div class="flex items-start gap-2.5">
-                    <div
-                      class="bg-accent-500/15 mt-0.5 flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-md"
-                    >
-                      <Bot class="text-accent-400 h-3 w-3" />
-                    </div>
-                    <div class="min-w-0 flex-1">
-                      {#if activeToolCalls.length > 0}
-                        <div class="space-y-1">
-                          {#each activeToolCalls as toolCall (toolCall.id)}
-                            <div
-                              class="border-surface-700 bg-surface-900 flex items-center gap-2 rounded-lg border px-2.5 py-1.5 text-xs"
-                              in:fade
-                            >
-                              {#if toolCall.result === '...'}
-                                <Loader2
-                                  class="text-accent-400 h-3 w-3 flex-shrink-0 animate-spin"
-                                />
-                              {:else}
-                                <Wrench class="text-surface-500 h-3 w-3 flex-shrink-0" />
-                              {/if}
-                              <span class="text-surface-300 font-medium"
-                                >{formatToolCallName(toolCall.name)}</span
-                              >
-                            </div>
-                          {/each}
-                        </div>
-                      {:else if isThinking}
-                        <div class="text-surface-400 flex items-center gap-2 text-sm">
-                          <Loader2 class="text-accent-400 h-3.5 w-3.5 animate-spin" />
-                          <span>Thinking...</span>
-                        </div>
-                      {/if}
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
+            {/if}
+          </div>
 
-            <!-- Streaming diff cards (shown before step message arrives) -->
-            {#if streamingChanges.length > 0}
-              <div class="mt-3 space-y-2">
-                {#each streamingChanges as change (change.id)}
-                  {@const liveChange = vaultEditor.getLiveChange(change.id) ?? change}
-                  <VaultDiffView
-                    change={liveChange}
-                    onApprove={() => handleApprove(liveChange)}
-                    onReject={() => handleReject(liveChange)}
-                    onEdit={() => handleEdit(liveChange)}
-                  />
-                {/each}
+          <!-- Error display -->
+          {#if error}
+            <div class="border-t border-red-500/20 bg-red-500/8 px-4 py-2" in:slide>
+              <div class="flex items-center gap-2 text-xs text-red-400">
+                <AlertCircle class="h-3.5 w-3.5" />
+                <span>{error}</span>
               </div>
-            {/if}
+            </div>
           {/if}
-        </div>
 
-        <!-- Error display -->
-        {#if error}
-          <div class="border-t border-red-500/20 bg-red-500/8 px-4 py-2" in:slide>
-            <div class="flex items-center gap-2 text-xs text-red-400">
-              <AlertCircle class="h-3.5 w-3.5" />
-              <span>{error}</span>
+          <!-- Input area -->
+          <div class="border-surface-700 bg-surface-900 border-t p-3">
+            <div class="flex items-end gap-2">
+              <Textarea
+                bind:value={inputValue}
+                onkeydown={handleKeyDown}
+                placeholder="Ask me to create characters, organize lorebooks, set up scenarios..."
+                rows={2}
+                class="border-surface-700 bg-surface-800 placeholder:text-surface-500 min-h-[2.5rem] resize-none rounded-xl text-sm"
+                disabled={isGenerating || !service}
+              />
+              <Button
+                size="icon"
+                class={cn(
+                  'h-10 w-10 shrink-0 rounded-xl',
+                  isGenerating ? 'opacity-70' : 'bg-accent-600 hover:bg-accent-500',
+                )}
+                onclick={handleSend}
+                disabled={!inputValue.trim() || isGenerating || !service}
+                title="Send message"
+              >
+                {#if isGenerating}
+                  <Loader2 class="h-5 w-5 animate-spin" />
+                {:else}
+                  <Send class="h-5 w-5" />
+                {/if}
+              </Button>
+            </div>
+            <div class="text-surface-500 mt-1.5 hidden text-center text-[10px] md:block">
+              {isTouchDevice()
+                ? 'Shift+Enter to send, Enter for new line'
+                : 'Enter to send, Shift+Enter for new line'}
             </div>
           </div>
+        {:else}
+          <!-- Entity tab body (compact width only; wide width shows the left panel instead) -->
+          {#if vaultEditor.activeChange}
+            <div class="flex min-h-0 flex-1 flex-col overflow-hidden">
+              <VaultEntityEditPanel
+                bind:this={editPanelRef}
+                change={vaultEditor.activeChange}
+                onApprove={(specificChange) =>
+                  handleApprove(specificChange ?? vaultEditor.activeChange!)}
+                onReject={(change) => handleReject(change)}
+                onClose={() => vaultEditor.closeEditor()}
+              />
+            </div>
+          {/if}
         {/if}
-
-        <!-- Input area -->
-        <div class="border-surface-700 bg-surface-900 border-t p-3">
-          <div class="flex items-end gap-2">
-            <Textarea
-              bind:value={inputValue}
-              onkeydown={handleKeyDown}
-              placeholder="Ask me to create characters, organize lorebooks, set up scenarios..."
-              rows={2}
-              class="border-surface-700 bg-surface-800 placeholder:text-surface-500 min-h-[2.5rem] resize-none rounded-xl text-sm"
-              disabled={isGenerating || !service}
-            />
-            <Button
-              size="icon"
-              class={cn(
-                'h-10 w-10 shrink-0 rounded-xl',
-                isGenerating ? 'opacity-70' : 'bg-accent-600 hover:bg-accent-500',
-              )}
-              onclick={handleSend}
-              disabled={!inputValue.trim() || isGenerating || !service}
-              title="Send message"
-            >
-              {#if isGenerating}
-                <Loader2 class="h-5 w-5 animate-spin" />
-              {:else}
-                <Send class="h-5 w-5" />
-              {/if}
-            </Button>
-          </div>
-          <div class="text-surface-500 mt-1.5 hidden text-center text-[10px] md:block">
-            {isTouchDevice()
-              ? 'Shift+Enter to send, Enter for new line'
-              : 'Enter to send, Shift+Enter for new line'}
-          </div>
-        </div>
       </div>
     </div>
   </div>
@@ -1104,28 +1178,6 @@
   </ResponsiveModal.Root>
 {/if}
 
-<!-- Mobile entity editor — bottom sheet -->
-{#if isCompact.current && vaultEditor.activeChange}
-  <Sheet.Root
-    open={vaultEditor.editorOpen}
-    onOpenChange={(open) => {
-      if (!open) vaultEditor.closeEditor()
-    }}
-  >
-    <Sheet.Content side="bottom" class="flex h-[85dvh] flex-col p-0">
-      {#if vaultEditor.activeChange}
-        <VaultEntityEditPanel
-          bind:this={editPanelMobileRef}
-          change={vaultEditor.activeChange}
-          onApprove={(specificChange) => handleApprove(specificChange ?? vaultEditor.activeChange!)}
-          onReject={(change) => handleReject(change)}
-          onClose={() => vaultEditor.closeEditor()}
-        />
-      {/if}
-    </Sheet.Content>
-  </Sheet.Root>
-{/if}
-
 <!-- Image enlargement dialog -->
 <Dialog.Root
   open={!!enlargedImageUrl}

From 7a9b1e607404a53c949ebced7122b6b9f76f466f Mon Sep 17 00:00:00 2001
From: Failerko <c.dann@seznam.cz>
Date: Sat, 18 Apr 2026 17:42:54 +0200
Subject: [PATCH 08/36] fix: declare messagesContainer with $state for
 reactivity

---
 src/lib/components/vault/InteractiveVaultAssistant.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/vault/InteractiveVaultAssistant.svelte b/src/lib/components/vault/InteractiveVaultAssistant.svelte
index ebc9f2fc..8df59671 100644
--- a/src/lib/components/vault/InteractiveVaultAssistant.svelte
+++ b/src/lib/components/vault/InteractiveVaultAssistant.svelte
@@ -77,7 +77,7 @@
   let inputValue = $state('')
   let isGenerating = $state(false)
   let error = $state<string | null>(null)
-  let messagesContainer: HTMLDivElement
+  let messagesContainer = $state<HTMLDivElement | null>(null)
   let expandedReasoning = $state<Set<string>>(new Set())
 
   // Progress state

From 6dd8629957fa8cc090bf4db786c5ca8d69f501ba Mon Sep 17 00:00:00 2001
From: Failerko <c.dann@seznam.cz>
Date: Sat, 18 Apr 2026 17:50:56 +0200
Subject: [PATCH 09/36] feat: remove mobile guards so auto-open state runs on
 all widths

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../vault/InteractiveVaultAssistant.svelte    | 22 ++++++-------------
 1 file changed, 7 insertions(+), 15 deletions(-)

diff --git a/src/lib/components/vault/InteractiveVaultAssistant.svelte b/src/lib/components/vault/InteractiveVaultAssistant.svelte
index 8df59671..7cb195c3 100644
--- a/src/lib/components/vault/InteractiveVaultAssistant.svelte
+++ b/src/lib/components/vault/InteractiveVaultAssistant.svelte
@@ -50,7 +50,6 @@
   import { cn } from '$lib/utils/cn'
   import { isTouchDevice } from '$lib/utils/swipe'
   import { SvelteSet } from 'svelte/reactivity'
-  import { createIsMobile } from '$lib/hooks/is-mobile.svelte'
   import { createIsCompact } from '$lib/hooks/is-compact.svelte'
 
   interface Props {
@@ -61,8 +60,6 @@
 
   let { onClose, onEditEntity, focusedEntity = null }: Props = $props()
 
-  // Mobile detection (touch/native-device flavour + 768px breakpoint — kept for non-layout guards)
-  const isMobile = createIsMobile()
   // Layout breakpoint: below 1024px we use the compact (tabs, full-screen) layout
   const isCompact = createIsCompact()
 
@@ -158,7 +155,7 @@
     loadConversationsList()
 
     // Auto-open focused entity if provided
-    if (focusedEntity && !isMobile.current) {
+    if (focusedEntity) {
       let entityData: any = null
       if (focusedEntity.entityType === 'character') {
         entityData = characterVault.getById(focusedEntity.entityId)
@@ -403,16 +400,13 @@
                 vaultEditor.addPendingChange(incoming)
                 await handleApprove(incoming)
                 // Open the newly created lorebook in the editor
-                if (!isMobile.current) {
-                  await tick()
-                  vaultEditor.openEditor(incoming)
-                }
+                await tick()
+                vaultEditor.openEditor(incoming)
               } else {
                 vaultEditor.addPendingChange(incoming)
-                // Auto-open entity editor on desktop (store handles same-lorebook skip)
-                if (!isMobile.current) {
-                  vaultEditor.openEditorSmart(incoming)
-                }
+                // Auto-open entity editor (store handles same-lorebook skip).
+                // On compact, the Entity tab becomes available — user still has to tap to switch.
+                vaultEditor.openEditorSmart(incoming)
               }
               // Track for immediate chat display
               streamingChanges = [...streamingChanges, incoming]
@@ -435,9 +429,7 @@
 
           case 'show_entity':
             // Open entity in view mode (no approval workflow)
-            if (!isMobile.current) {
-              vaultEditor.openViewer(event.change, event.entityId, event.entityType)
-            }
+            vaultEditor.openViewer(event.change, event.entityId, event.entityType)
             // Track which character is currently being viewed so the Set Portrait button appears
             if (event.entityType === 'character') {
               viewedEntity = {

From f54bfcde0cda298f9b7635933a5bca6397198ab6 Mon Sep 17 00:00:00 2001
From: Failerko <c.dann@seznam.cz>
Date: Sat, 18 Apr 2026 17:56:15 +0200
Subject: [PATCH 10/36] feat: pulse entity tab when a pending change arrives
 off-tab

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../vault/InteractiveVaultAssistant.svelte    | 35 +++++++++++++++++++
 1 file changed, 35 insertions(+)

diff --git a/src/lib/components/vault/InteractiveVaultAssistant.svelte b/src/lib/components/vault/InteractiveVaultAssistant.svelte
index 7cb195c3..38b32eec 100644
--- a/src/lib/components/vault/InteractiveVaultAssistant.svelte
+++ b/src/lib/components/vault/InteractiveVaultAssistant.svelte
@@ -111,6 +111,22 @@
     }
   })
 
+  // Pulse the Entity tab when a new pending change arrives while user is on Chat
+  let entityTabPulsing = $state(false)
+  let prevPendingCount = vaultEditor.pendingCount
+  $effect(() => {
+    const current = vaultEditor.pendingCount
+    if (current > prevPendingCount && activeTab === 'chat') {
+      entityTabPulsing = true
+      const timer = setTimeout(() => {
+        entityTabPulsing = false
+      }, 800)
+      prevPendingCount = current
+      return () => clearTimeout(timer)
+    }
+    prevPendingCount = current
+  })
+
   const activeCharacterEntity = $derived<FocusedEntity | null>(
     focusedEntity?.entityType === 'character'
       ? focusedEntity
@@ -841,6 +857,7 @@
                 activeTab === 'entity'
                   ? 'bg-surface-700 text-surface-100'
                   : 'text-surface-400 hover:text-foreground hover:bg-foreground/5',
+                entityTabPulsing && 'vault-tab-pulse',
               )}
               onclick={() => (activeTab = 'entity')}
             >
@@ -1192,3 +1209,21 @@
     </button>
   </Dialog.Content>
 </Dialog.Root>
+
+<style>
+  :global(.vault-tab-pulse) {
+    animation: vault-tab-pulse 800ms ease-out 1;
+  }
+
+  @keyframes vault-tab-pulse {
+    0% {
+      box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.45);
+    }
+    60% {
+      box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
+    }
+    100% {
+      box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
+    }
+  }
+</style>

From 754857771fa902bcd3903d17b6bd9b61f3e3cd99 Mon Sep 17 00:00:00 2001
From: Failerko <c.dann@seznam.cz>
Date: Sat, 18 Apr 2026 18:00:26 +0200
Subject: [PATCH 11/36] feat: set portrait switches to entity tab on compact

---
 src/lib/components/vault/InteractiveVaultAssistant.svelte | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/lib/components/vault/InteractiveVaultAssistant.svelte b/src/lib/components/vault/InteractiveVaultAssistant.svelte
index 38b32eec..374d360e 100644
--- a/src/lib/components/vault/InteractiveVaultAssistant.svelte
+++ b/src/lib/components/vault/InteractiveVaultAssistant.svelte
@@ -322,10 +322,15 @@
 
   let editPanelRef = $state<ReturnType<typeof VaultEntityEditPanel> | null>(null)
 
-  function handleSetPortrait(imageId: string) {
+  async function handleSetPortrait(imageId: string) {
     if (!activeCharacterEntity || !service) return
     const dataUrl = service.generatedImages.get(imageId)
     if (!dataUrl) return
+    // On compact, the panel only mounts inside the Entity tab — switch first so the ref exists.
+    if (isCompact.current && activeTab !== 'entity') {
+      activeTab = 'entity'
+      await tick()
+    }
     editPanelRef?.setPortrait(dataUrl)
   }
 

From fca177f394bed003e6f69d61e731a9e42fc170fc Mon Sep 17 00:00:00 2001
From: Failerko <c.dann@seznam.cz>
Date: Sat, 18 Apr 2026 18:04:37 +0200
Subject: [PATCH 12/36] fix: allow chat panel to shrink on narrow desktop
 widths

---
 src/lib/components/vault/InteractiveVaultAssistant.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/vault/InteractiveVaultAssistant.svelte b/src/lib/components/vault/InteractiveVaultAssistant.svelte
index 374d360e..436f3eec 100644
--- a/src/lib/components/vault/InteractiveVaultAssistant.svelte
+++ b/src/lib/components/vault/InteractiveVaultAssistant.svelte
@@ -621,7 +621,7 @@
       <!-- Entity Editor Panel (left, desktop only) -->
       {#if vaultEditor.editorOpen && vaultEditor.activeChange && !isCompact.current}
         <div
-          class="border-surface-700 flex flex-1 flex-col overflow-hidden border-r"
+          class="border-surface-700 flex min-w-[28rem] flex-1 flex-col overflow-hidden border-r"
           transition:fade={{ duration: 100 }}
         >
           <VaultEntityEditPanel
@@ -638,7 +638,7 @@
       <!-- Chat Panel (right, or full-width on mobile) -->
       <div
         class="flex flex-col overflow-hidden {vaultEditor.editorOpen && !isCompact.current
-          ? 'w-full max-w-2xl shrink-0'
+          ? 'w-full max-w-2xl min-w-[22rem] flex-1'
           : 'mx-auto w-full max-w-2xl'}"
       >
         <!-- Conversation selector -->

From 3c26daaf70dc5b2ff23087a8cf8396524f6f02f4 Mon Sep 17 00:00:00 2001
From: Failerko <c.dann@seznam.cz>
Date: Sat, 18 Apr 2026 18:33:09 +0200
Subject: [PATCH 13/36] chore: apply safe-area inset and sweep leftover refs

---
 src/lib/components/vault/InteractiveVaultAssistant.svelte | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/lib/components/vault/InteractiveVaultAssistant.svelte b/src/lib/components/vault/InteractiveVaultAssistant.svelte
index 436f3eec..14b332fb 100644
--- a/src/lib/components/vault/InteractiveVaultAssistant.svelte
+++ b/src/lib/components/vault/InteractiveVaultAssistant.svelte
@@ -1117,7 +1117,10 @@
           {/if}
 
           <!-- Input area -->
-          <div class="border-surface-700 bg-surface-900 border-t p-3">
+          <div
+            class="border-surface-700 bg-surface-900 border-t p-3"
+            style="padding-bottom: max(0.75rem, env(safe-area-inset-bottom));"
+          >
             <div class="flex items-end gap-2">
               <Textarea
                 bind:value={inputValue}

From fe5db32da06896b77bd940f91a8d80bc7b993f55 Mon Sep 17 00:00:00 2001
From: Failerko <c.dann@seznam.cz>
Date: Sat, 18 Apr 2026 18:40:12 +0200
Subject: [PATCH 14/36] fix: shared dialog title + reset pulse tracker on
 conversation change

Move Dialog.Title into the shared assistantContent() snippet so both
compact (Dialog.Root) and wide (ResponsiveModal.Content) shells render
it, ensuring the dialog has an accessible name across all layouts.

Reset prevPendingCount alongside activeTab in all three conversation
handlers (new, switch, delete) to prevent stale pulse comparisons when
moving between conversations with different pending states.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/lib/components/vault/InteractiveVaultAssistant.svelte | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/lib/components/vault/InteractiveVaultAssistant.svelte b/src/lib/components/vault/InteractiveVaultAssistant.svelte
index 14b332fb..f6dc8991 100644
--- a/src/lib/components/vault/InteractiveVaultAssistant.svelte
+++ b/src/lib/components/vault/InteractiveVaultAssistant.svelte
@@ -257,6 +257,7 @@
     service.reset()
     vaultEditor.reset()
     activeTab = 'chat'
+    prevPendingCount = 0
     initializeService()
     await loadConversationsList()
   }
@@ -271,6 +272,7 @@
     if (loaded) {
       vaultEditor.reset()
       activeTab = 'chat'
+      prevPendingCount = 0
       // Restore full UI state from persisted data
       if (loaded.chatMessages.length > 0) {
         messages = loaded.chatMessages
@@ -307,6 +309,7 @@
         service.reset()
         vaultEditor.reset()
         activeTab = 'chat'
+        prevPendingCount = 0
         initializeService()
       }
       await loadConversationsList()
@@ -573,6 +576,7 @@
 </script>
 
 {#snippet assistantContent()}
+  <Dialog.Title class="sr-only">Vault Assistant</Dialog.Title>
   <div class="flex flex-col overflow-hidden" style="height: 100%">
     <!-- Top Bar -->
     <div
@@ -1178,7 +1182,6 @@
     <Dialog.Content
       class="flex h-[100dvh] w-screen max-w-none flex-col gap-0 overflow-hidden rounded-none border-none p-0"
     >
-      <Dialog.Title class="sr-only">Vault Assistant</Dialog.Title>
       {@render assistantContent()}
     </Dialog.Content>
   </Dialog.Root>

From 371cf60c0174f79f719b24169eaaff9610ba9f71 Mon Sep 17 00:00:00 2001
From: Failerko <c.dann@seznam.cz>
Date: Sat, 18 Apr 2026 18:59:04 +0200
Subject: [PATCH 15/36] fix: chat column fills full width on compact

---
 .../components/vault/InteractiveVaultAssistant.svelte  | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/vault/InteractiveVaultAssistant.svelte b/src/lib/components/vault/InteractiveVaultAssistant.svelte
index f6dc8991..324d525d 100644
--- a/src/lib/components/vault/InteractiveVaultAssistant.svelte
+++ b/src/lib/components/vault/InteractiveVaultAssistant.svelte
@@ -639,11 +639,13 @@
         </div>
       {/if}
 
-      <!-- Chat Panel (right, or full-width on mobile) -->
+      <!-- Chat Panel (right, or full-width on compact) -->
       <div
-        class="flex flex-col overflow-hidden {vaultEditor.editorOpen && !isCompact.current
-          ? 'w-full max-w-2xl min-w-[22rem] flex-1'
-          : 'mx-auto w-full max-w-2xl'}"
+        class="flex flex-col overflow-hidden {isCompact.current
+          ? 'w-full'
+          : vaultEditor.editorOpen
+            ? 'w-full max-w-2xl min-w-[22rem] flex-1'
+            : 'mx-auto w-full max-w-2xl'}"
       >
         <!-- Conversation selector -->
         <div class="relative {conversationSelectorOpen ? 'z-20' : 'z-10'}">

From c48b2a923febea289a3dc24727d6fdb3906c53d2 Mon Sep 17 00:00:00 2001
From: Failerko <c.dann@seznam.cz>
Date: Sat, 18 Apr 2026 19:06:15 +0200
Subject: [PATCH 16/36] fix: unify message bubble width across breakpoints

---
 .../components/vault/InteractiveVaultAssistant.svelte    | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

diff --git a/src/lib/components/vault/InteractiveVaultAssistant.svelte b/src/lib/components/vault/InteractiveVaultAssistant.svelte
index 324d525d..bd60e936 100644
--- a/src/lib/components/vault/InteractiveVaultAssistant.svelte
+++ b/src/lib/components/vault/InteractiveVaultAssistant.svelte
@@ -895,12 +895,7 @@
                     message.role === 'user' ? 'justify-end' : 'justify-start',
                   )}
                 >
-                  <div
-                    class={cn(
-                      'max-w-[90%] md:max-w-[85%]',
-                      message.role === 'user' ? 'order-2' : 'order-1',
-                    )}
-                  >
+                  <div class={cn('max-w-[85%]', message.role === 'user' ? 'order-2' : 'order-1')}>
                     <!-- Message bubble -->
                     <div
                       class={cn(
@@ -1054,7 +1049,7 @@
             <!-- Progress indicator -->
             {#if isGenerating}
               <div class="flex justify-start" in:fade>
-                <div class="max-w-[90%] md:max-w-[85%]">
+                <div class="max-w-[85%]">
                   <div class="border-surface-700 bg-surface-800 rounded-xl border px-3.5 py-2.5">
                     <div class="flex items-start gap-2.5">
                       <div

From 1732643320997ddeb1635c481a72c3fa7d43c217 Mon Sep 17 00:00:00 2001
From: Failerko <c.dann@seznam.cz>
Date: Sat, 18 Apr 2026 19:34:05 +0200
Subject: [PATCH 17/36] fix: bump image enlargement dialog z-index above
 full-screen shell

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../vault/InteractiveVaultAssistant.svelte         | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/vault/InteractiveVaultAssistant.svelte b/src/lib/components/vault/InteractiveVaultAssistant.svelte
index bd60e936..a61e07d9 100644
--- a/src/lib/components/vault/InteractiveVaultAssistant.svelte
+++ b/src/lib/components/vault/InteractiveVaultAssistant.svelte
@@ -135,6 +135,15 @@
         : null,
   )
 
+  const entityTabLabel = $derived(() => {
+    const type = vaultEditor.activeChange?.entityType
+    if (type === 'character') return 'Character'
+    if (type === 'lorebook') return 'Lorebook'
+    if (type === 'lorebook-entry') return 'Entry'
+    if (type === 'scenario') return 'Scenario'
+    return 'Entity'
+  })
+
   const entityIcons = {
     character: User,
     'lorebook-entry': BookOpen,
@@ -872,7 +881,7 @@
               )}
               onclick={() => (activeTab = 'entity')}
             >
-              Entity
+              {entityTabLabel()}
               {#if vaultEditor.pendingCount > 0}
                 <span
                   class="ml-1.5 inline-flex h-4 min-w-4 items-center justify-center rounded-full bg-emerald-500/20 px-1 text-[10px] font-bold text-emerald-300"
@@ -1161,6 +1170,7 @@
               <VaultEntityEditPanel
                 bind:this={editPanelRef}
                 change={vaultEditor.activeChange}
+                hideHeader={true}
                 onApprove={(specificChange) =>
                   handleApprove(specificChange ?? vaultEditor.activeChange!)}
                 onReject={(change) => handleReject(change)}
@@ -1203,7 +1213,7 @@
   }}
 >
   <Dialog.Content
-    class="max-h-[90vh] max-w-[90vw] overflow-hidden border-none bg-transparent p-0 shadow-none"
+    class="z-[60] max-h-[90vh] max-w-[90vw] overflow-hidden border-none bg-transparent p-0 shadow-none"
   >
     <Dialog.Title class="sr-only">Generated Image</Dialog.Title>
     <button class="flex items-center justify-center" onclick={() => (enlargedImageUrl = null)}>

From 9afa55b4a7b7255ecb5ac0be8d5e2298863cdb3f Mon Sep 17 00:00:00 2001
From: Failerko <c.dann@seznam.cz>
Date: Sat, 18 Apr 2026 19:34:07 +0200
Subject: [PATCH 18/36] fix: cap pending operations banner height with internal
 scroll

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/lib/components/vault/VaultPendingOperations.svelte | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/lib/components/vault/VaultPendingOperations.svelte b/src/lib/components/vault/VaultPendingOperations.svelte
index 9418710b..df850c20 100644
--- a/src/lib/components/vault/VaultPendingOperations.svelte
+++ b/src/lib/components/vault/VaultPendingOperations.svelte
@@ -136,7 +136,10 @@
 
     <!-- Operation Cards -->
     {#if !collapsed}
-      <div class="space-y-0.5 px-1.5 py-1.5" transition:slide={{ duration: 150 }}>
+      <div
+        class="max-h-[40vh] space-y-0.5 overflow-y-auto px-1.5 py-1.5"
+        transition:slide={{ duration: 150 }}
+      >
         {#each operations as op (op.id)}
           {@const config = typeConfig[op.type]}
           {@const Icon = config.icon}

From dc7f9ef4254f0238e8a18651343a7414cacb87fa Mon Sep 17 00:00:00 2001
From: Failerko <c.dann@seznam.cz>
Date: Sat, 18 Apr 2026 19:34:11 +0200
Subject: [PATCH 19/36] feat: entity-type tab label and hide redundant header
 on compact

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../vault/VaultEntityEditPanel.svelte         | 66 ++++++++++---------
 .../vault/VaultLorebookEditorContent.svelte   | 18 ++---
 2 files changed, 45 insertions(+), 39 deletions(-)

diff --git a/src/lib/components/vault/VaultEntityEditPanel.svelte b/src/lib/components/vault/VaultEntityEditPanel.svelte
index 5f34137b..3f065b71 100644
--- a/src/lib/components/vault/VaultEntityEditPanel.svelte
+++ b/src/lib/components/vault/VaultEntityEditPanel.svelte
@@ -18,9 +18,10 @@
     onApprove: (change?: VaultPendingChange) => void
     onReject?: (change: VaultPendingChange) => void
     onClose: () => void
+    hideHeader?: boolean
   }
 
-  let { change, onApprove, onReject, onClose }: Props = $props()
+  let { change, onApprove, onReject, onClose, hideHeader = false }: Props = $props()
 
   // Local state for the editable data (character / scenario)
   let charData = $state<VaultCharacterInput | null>(null)
@@ -208,42 +209,45 @@
             data: newData,
           } as VaultPendingChange)
         }}
+        {hideHeader}
       />
     {/key}
   {:else}
     <!-- Standard UI for character / scenario -->
-    <!-- Header -->
-    <div
-      class="border-surface-700 bg-surface-900 flex shrink-0 items-center justify-between border-b px-4 py-2.5"
-    >
-      <div class="flex items-center gap-2.5">
-        <div
-          class="flex h-6 w-6 items-center justify-center rounded-md {change.entityType ===
-          'character'
-            ? 'bg-amber-500/15'
-            : change.entityType === 'lorebook-entry'
-              ? 'bg-cyan-500/15'
-              : 'bg-violet-500/15'}"
-        >
-          {#if change.entityType === 'character'}
-            <User class="h-3 w-3 text-amber-400" />
-          {:else if change.entityType === 'lorebook-entry'}
-            <BookOpen class="h-3 w-3 text-cyan-400" />
-          {:else}
-            <MapIcon class="h-3 w-3 text-violet-400" />
-          {/if}
+    {#if !hideHeader}
+      <!-- Header -->
+      <div
+        class="border-surface-700 bg-surface-900 flex shrink-0 items-center justify-between border-b px-4 py-2.5"
+      >
+        <div class="flex items-center gap-2.5">
+          <div
+            class="flex h-6 w-6 items-center justify-center rounded-md {change.entityType ===
+            'character'
+              ? 'bg-amber-500/15'
+              : change.entityType === 'lorebook-entry'
+                ? 'bg-cyan-500/15'
+                : 'bg-violet-500/15'}"
+          >
+            {#if change.entityType === 'character'}
+              <User class="h-3 w-3 text-amber-400" />
+            {:else if change.entityType === 'lorebook-entry'}
+              <BookOpen class="h-3 w-3 text-cyan-400" />
+            {:else}
+              <MapIcon class="h-3 w-3 text-violet-400" />
+            {/if}
+          </div>
+          <span class="text-surface-200 text-xs font-semibold">{actionLabel} {entityLabel}</span>
         </div>
-        <span class="text-surface-200 text-xs font-semibold">{actionLabel} {entityLabel}</span>
+        <Button
+          variant="ghost"
+          size="icon"
+          class="text-surface-400 hover:text-foreground h-6 w-6"
+          onclick={onClose}
+        >
+          <X class="h-3.5 w-3.5" />
+        </Button>
       </div>
-      <Button
-        variant="ghost"
-        size="icon"
-        class="text-surface-400 hover:text-foreground h-6 w-6"
-        onclick={onClose}
-      >
-        <X class="h-3.5 w-3.5" />
-      </Button>
-    </div>
+    {/if}
 
     <!-- Form -->
     <div class="flex-1 space-y-4 overflow-y-auto">
diff --git a/src/lib/components/vault/VaultLorebookEditorContent.svelte b/src/lib/components/vault/VaultLorebookEditorContent.svelte
index 82fda5b6..8905c144 100644
--- a/src/lib/components/vault/VaultLorebookEditorContent.svelte
+++ b/src/lib/components/vault/VaultLorebookEditorContent.svelte
@@ -49,6 +49,7 @@
     onRejectEntry?: (change: VaultPendingChange) => void
     onUpdatePendingChange?: (change: VaultPendingChange, newData: VaultLorebookEntry) => void
     onOpenAssistant?: (entity: FocusedEntity) => void
+    hideHeader?: boolean
   }
 
   let {
@@ -64,6 +65,7 @@
     onRejectEntry,
     onUpdatePendingChange,
     onOpenAssistant,
+    hideHeader = false,
   }: Props = $props()
 
   // Local state for editing - initialized from props but mutable
@@ -616,7 +618,7 @@
         </div>
       {/if}
     </div>
-  {:else}
+  {:else if !hideHeader}
     <!-- Embedded header with close button -->
     <div
       class="border-surface-700 bg-surface-900 flex flex-shrink-0 items-center justify-between border-b px-4 py-2"
@@ -636,13 +638,13 @@
         <X class="h-3.5 w-3.5" />
       </Button>
     </div>
-    {#if error}
-      <div
-        class="w-full border-b border-red-500/20 bg-red-500/8 py-1 text-center text-xs text-red-400"
-      >
-        {error}
-      </div>
-    {/if}
+  {/if}
+  {#if isEmbedded && error}
+    <div
+      class="w-full border-b border-red-500/20 bg-red-500/8 py-1 text-center text-xs text-red-400"
+    >
+      {error}
+    </div>
   {/if}
 
   <Tabs.Root bind:value={activeTab} class="flex flex-1 flex-col overflow-hidden">

From 44e87e2104cfa8569909988fb5174debd88c27ac Mon Sep 17 00:00:00 2001
From: Failerko <c.dann@seznam.cz>
Date: Sat, 18 Apr 2026 19:44:23 +0200
Subject: [PATCH 20/36] fix: rename Entry to Lorebook

---
 src/lib/components/vault/InteractiveVaultAssistant.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/vault/InteractiveVaultAssistant.svelte b/src/lib/components/vault/InteractiveVaultAssistant.svelte
index a61e07d9..d81a6f52 100644
--- a/src/lib/components/vault/InteractiveVaultAssistant.svelte
+++ b/src/lib/components/vault/InteractiveVaultAssistant.svelte
@@ -139,7 +139,7 @@
     const type = vaultEditor.activeChange?.entityType
     if (type === 'character') return 'Character'
     if (type === 'lorebook') return 'Lorebook'
-    if (type === 'lorebook-entry') return 'Entry'
+    if (type === 'lorebook-entry') return 'Lorebook'
     if (type === 'scenario') return 'Scenario'
     return 'Entity'
   })

From f00cecde1b4c58f16ce4addba30836fa82411743 Mon Sep 17 00:00:00 2001
From: Failerko <c.dann@seznam.cz>
Date: Sat, 18 Apr 2026 22:44:54 +0200
Subject: [PATCH 21/36] fix: respect top safe-area inset in compact vault
 assistant

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/lib/components/vault/InteractiveVaultAssistant.svelte | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/lib/components/vault/InteractiveVaultAssistant.svelte b/src/lib/components/vault/InteractiveVaultAssistant.svelte
index d81a6f52..d6aa8b14 100644
--- a/src/lib/components/vault/InteractiveVaultAssistant.svelte
+++ b/src/lib/components/vault/InteractiveVaultAssistant.svelte
@@ -1188,6 +1188,7 @@
   <Dialog.Root open={true} onOpenChange={(open) => !open && onClose()}>
     <Dialog.Content
       class="flex h-[100dvh] w-screen max-w-none flex-col gap-0 overflow-hidden rounded-none border-none p-0"
+      style="padding-top: env(safe-area-inset-top);"
     >
       {@render assistantContent()}
     </Dialog.Content>

From 060214111da1ca89a00dbe2548ad0d3871d07c8b Mon Sep 17 00:00:00 2001
From: Failerko <c.dann@seznam.cz>
Date: Sun, 19 Apr 2026 00:54:38 +0200
Subject: [PATCH 22/36] fix: tauri android dev

---
 src-tauri/Cargo.lock                       | 1 +
 src-tauri/Cargo.toml                       | 1 +
 src-tauri/gen/android/app/tauri.properties | 4 ++--
 src-tauri/gen/android/gradlew              | 0
 src-tauri/src/lib.rs                       | 2 ++
 5 files changed, 6 insertions(+), 2 deletions(-)
 mode change 100644 => 100755 src-tauri/gen/android/gradlew

diff --git a/src-tauri/Cargo.lock b/src-tauri/Cargo.lock
index ebe0224d..33dcb4d0 100644
--- a/src-tauri/Cargo.lock
+++ b/src-tauri/Cargo.lock
@@ -287,6 +287,7 @@ dependencies = [
  "local-ip-address 0.6.11",
  "qrcode",
  "reqwest 0.12.28",
+ "rustls",
  "serde",
  "serde_json",
  "sqlx",
diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml
index 6d2ca373..830b7a93 100644
--- a/src-tauri/Cargo.toml
+++ b/src-tauri/Cargo.toml
@@ -38,6 +38,7 @@ base64 = "0.22"
 local-ip-address = "0.6"
 uuid = { version = "1", features = ["v4"] }
 reqwest = { version = "0.12", default-features = false, features = ["json", "rustls-tls"] }
+rustls = { version = "0.23", default-features = false, features = ["ring", "std"] }
 tauri-plugin-devtools = { version = "2", optional = true }
 sqlx = { version = "0.8.6", features = ["sqlite", "runtime-tokio"] }
 hex = "0.4.3"
diff --git a/src-tauri/gen/android/app/tauri.properties b/src-tauri/gen/android/app/tauri.properties
index 299b4875..1463df20 100644
--- a/src-tauri/gen/android/app/tauri.properties
+++ b/src-tauri/gen/android/app/tauri.properties
@@ -1,3 +1,3 @@
 // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
-tauri.android.versionName=0.7.0-pre.3
-tauri.android.versionCode=7000
\ No newline at end of file
+tauri.android.versionName=0.7.3-pre.1
+tauri.android.versionCode=7003
\ No newline at end of file
diff --git a/src-tauri/gen/android/gradlew b/src-tauri/gen/android/gradlew
old mode 100644
new mode 100755
diff --git a/src-tauri/src/lib.rs b/src-tauri/src/lib.rs
index 4d5258fb..eae2bad2 100644
--- a/src-tauri/src/lib.rs
+++ b/src-tauri/src/lib.rs
@@ -11,6 +11,8 @@ use sync::commands::{
 
 #[cfg_attr(mobile, tauri::mobile_entry_point)]
 pub fn run() {
+    let _ = rustls::crypto::ring::default_provider().install_default();
+
     let migrations = vec![
         Migration {
             version: 1,

From 779159aa1b9cda19d1e7c2ab591f29489a3477b4 Mon Sep 17 00:00:00 2001
From: Failerko <c.dann@seznam.cz>
Date: Sun, 19 Apr 2026 02:03:37 +0200
Subject: [PATCH 23/36] fix: wrap diff card header actions and break long
 content on narrow

The change-card header used to keep action buttons on a single row via
shrink-0, which on phone widths caused the action-indicator label to
overlap the Edit/Reject/Approve buttons. The preformatted content could
also render with a min-content larger than the card itself, leaving the
card visually empty under overflow-hidden on narrow widths.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/lib/components/vault/VaultDiffView.svelte | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/lib/components/vault/VaultDiffView.svelte b/src/lib/components/vault/VaultDiffView.svelte
index f018a416..d685da43 100644
--- a/src/lib/components/vault/VaultDiffView.svelte
+++ b/src/lib/components/vault/VaultDiffView.svelte
@@ -254,7 +254,9 @@
   in:fade={{ duration: 150 }}
 >
   <!-- Header -->
-  <div class="border-surface-700 bg-surface-800 flex items-center gap-2 border-b px-3 py-2">
+  <div
+    class="border-surface-700 bg-surface-800 flex flex-wrap items-center gap-x-2 gap-y-1.5 border-b px-3 py-2"
+  >
     <div class="flex min-w-0 flex-1 items-center gap-2">
       <!-- Entity type badge -->
       <div
@@ -329,7 +331,7 @@
           New {entityConfig.label}
         </div>
         <pre
-          class="text-surface-200 font-mono text-xs leading-relaxed whitespace-pre-wrap">{formatChangeData()}</pre>
+          class="text-surface-200 font-mono text-xs leading-relaxed break-words whitespace-pre-wrap">{formatChangeData()}</pre>
       </div>
     {:else if change.action === 'update'}
       <!-- Update: Before / After -->
@@ -339,14 +341,14 @@
             Before
           </div>
           <pre
-            class="text-surface-400 font-mono text-xs leading-relaxed whitespace-pre-wrap">{formatPrevious()}</pre>
+            class="text-surface-400 font-mono text-xs leading-relaxed break-words whitespace-pre-wrap">{formatPrevious()}</pre>
         </div>
         <div class="rounded-lg border border-emerald-500/20 bg-emerald-500/8 p-2.5">
           <div class="mb-1.5 text-[10px] font-bold tracking-wider text-emerald-400 uppercase">
             After
           </div>
           <pre
-            class="text-surface-200 font-mono text-xs leading-relaxed whitespace-pre-wrap">{formatChangeData()}</pre>
+            class="text-surface-200 font-mono text-xs leading-relaxed break-words whitespace-pre-wrap">{formatChangeData()}</pre>
         </div>
       </div>
     {:else if change.action === 'delete'}
@@ -356,7 +358,7 @@
           {entityConfig.label} to Delete
         </div>
         <pre
-          class="text-surface-400 font-mono text-xs leading-relaxed whitespace-pre-wrap line-through opacity-70">{formatPrevious()}</pre>
+          class="text-surface-400 font-mono text-xs leading-relaxed break-words whitespace-pre-wrap line-through opacity-70">{formatPrevious()}</pre>
       </div>
     {:else if change.action === 'merge'}
       <!-- Merge: Source entries and result (lorebook-entry only) -->
@@ -372,7 +374,7 @@
                   Entry {i + 1}: {entry.name}
                 </div>
                 <pre
-                  class="text-surface-300 font-mono text-xs leading-relaxed whitespace-pre-wrap">{formatEntry(
+                  class="text-surface-300 font-mono text-xs leading-relaxed break-words whitespace-pre-wrap">{formatEntry(
                     entry,
                   )}</pre>
               </div>
@@ -389,7 +391,7 @@
             Merged Entry
           </div>
           <pre
-            class="text-surface-200 font-mono text-xs leading-relaxed whitespace-pre-wrap">{formatEntry(
+            class="text-surface-200 font-mono text-xs leading-relaxed break-words whitespace-pre-wrap">{formatEntry(
               mergeData as VaultLorebookEntry | undefined,
             )}</pre>
         </div>

From 7ab2c5645fb771b7d95abf525deee451589fa6a5 Mon Sep 17 00:00:00 2001
From: Failerko <c.dann@seznam.cz>
Date: Sun, 19 Apr 2026 02:11:43 +0200
Subject: [PATCH 24/36] fix: replace pre with div in diff cards and stack
 header on narrow

The <pre> elements had intrinsic min-content behavior that could push
past the card bounds on very narrow viewports, causing content to be
clipped invisibly by the card's overflow-hidden. Switching to <div>
with whitespace-pre-wrap gives identical visual wrapping without the
min-content quirk.

The header's left (entity info) column now takes full row width below
the sm breakpoint, so the right (action) column wraps below rather than
visually overlapping the action label.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/lib/components/vault/VaultDiffView.svelte | 38 ++++++++++---------
 1 file changed, 21 insertions(+), 17 deletions(-)

diff --git a/src/lib/components/vault/VaultDiffView.svelte b/src/lib/components/vault/VaultDiffView.svelte
index d685da43..a008836c 100644
--- a/src/lib/components/vault/VaultDiffView.svelte
+++ b/src/lib/components/vault/VaultDiffView.svelte
@@ -257,7 +257,9 @@
   <div
     class="border-surface-700 bg-surface-800 flex flex-wrap items-center gap-x-2 gap-y-1.5 border-b px-3 py-2"
   >
-    <div class="flex min-w-0 flex-1 items-center gap-2">
+    <div
+      class="flex w-full min-w-0 items-center gap-2 overflow-hidden sm:w-auto sm:flex-1"
+    >
       <!-- Entity type badge -->
       <div
         class="flex shrink-0 items-center gap-1 rounded-md px-1.5 py-0.5 text-[10px] font-bold tracking-wider whitespace-nowrap uppercase {entityConfig.color} {entityConfig.bg}"
@@ -330,8 +332,9 @@
         <div class="mb-1.5 text-[10px] font-bold tracking-wider text-emerald-400 uppercase">
           New {entityConfig.label}
         </div>
-        <pre
-          class="text-surface-200 font-mono text-xs leading-relaxed break-words whitespace-pre-wrap">{formatChangeData()}</pre>
+        <div
+          class="text-surface-200 font-mono text-xs leading-relaxed break-words whitespace-pre-wrap"
+        >{formatChangeData()}</div>
       </div>
     {:else if change.action === 'update'}
       <!-- Update: Before / After -->
@@ -340,15 +343,17 @@
           <div class="mb-1.5 text-[10px] font-bold tracking-wider text-red-400 uppercase">
             Before
           </div>
-          <pre
-            class="text-surface-400 font-mono text-xs leading-relaxed break-words whitespace-pre-wrap">{formatPrevious()}</pre>
+          <div
+            class="text-surface-400 font-mono text-xs leading-relaxed break-words whitespace-pre-wrap"
+          >{formatPrevious()}</div>
         </div>
         <div class="rounded-lg border border-emerald-500/20 bg-emerald-500/8 p-2.5">
           <div class="mb-1.5 text-[10px] font-bold tracking-wider text-emerald-400 uppercase">
             After
           </div>
-          <pre
-            class="text-surface-200 font-mono text-xs leading-relaxed break-words whitespace-pre-wrap">{formatChangeData()}</pre>
+          <div
+            class="text-surface-200 font-mono text-xs leading-relaxed break-words whitespace-pre-wrap"
+          >{formatChangeData()}</div>
         </div>
       </div>
     {:else if change.action === 'delete'}
@@ -357,8 +362,9 @@
         <div class="mb-1.5 text-[10px] font-bold tracking-wider text-red-400 uppercase">
           {entityConfig.label} to Delete
         </div>
-        <pre
-          class="text-surface-400 font-mono text-xs leading-relaxed break-words whitespace-pre-wrap line-through opacity-70">{formatPrevious()}</pre>
+        <div
+          class="text-surface-400 font-mono text-xs leading-relaxed break-words whitespace-pre-wrap line-through opacity-70"
+        >{formatPrevious()}</div>
       </div>
     {:else if change.action === 'merge'}
       <!-- Merge: Source entries and result (lorebook-entry only) -->
@@ -373,10 +379,9 @@
                 <div class="text-surface-400 mb-1 text-[10px] font-semibold">
                   Entry {i + 1}: {entry.name}
                 </div>
-                <pre
-                  class="text-surface-300 font-mono text-xs leading-relaxed break-words whitespace-pre-wrap">{formatEntry(
-                    entry,
-                  )}</pre>
+                <div
+                  class="text-surface-300 font-mono text-xs leading-relaxed break-words whitespace-pre-wrap"
+                >{formatEntry(entry)}</div>
               </div>
             {/each}
           </div>
@@ -390,10 +395,9 @@
           <div class="mb-1.5 text-[10px] font-bold tracking-wider text-emerald-400 uppercase">
             Merged Entry
           </div>
-          <pre
-            class="text-surface-200 font-mono text-xs leading-relaxed break-words whitespace-pre-wrap">{formatEntry(
-              mergeData as VaultLorebookEntry | undefined,
-            )}</pre>
+          <div
+            class="text-surface-200 font-mono text-xs leading-relaxed break-words whitespace-pre-wrap"
+          >{formatEntry(mergeData as VaultLorebookEntry | undefined)}</div>
         </div>
       </div>
     {/if}

From 80e0af13eb997ef6d99646cc767999715e3bba46 Mon Sep 17 00:00:00 2001
From: Failerko <c.dann@seznam.cz>
Date: Sun, 19 Apr 2026 02:19:48 +0200
Subject: [PATCH 25/36] fix: let diff card header wrap naturally instead of at
 sm breakpoint

The left column's overflow-hidden is what actually prevents badge/action-
indicator children from bleeding into the right column. Forcing a full-
row split below sm wrapped the buttons too eagerly; relying on flex-wrap
+ overflow-hidden wraps only when the row genuinely can't fit everything.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/lib/components/vault/VaultDiffView.svelte | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/lib/components/vault/VaultDiffView.svelte b/src/lib/components/vault/VaultDiffView.svelte
index a008836c..261fe4bc 100644
--- a/src/lib/components/vault/VaultDiffView.svelte
+++ b/src/lib/components/vault/VaultDiffView.svelte
@@ -257,9 +257,7 @@
   <div
     class="border-surface-700 bg-surface-800 flex flex-wrap items-center gap-x-2 gap-y-1.5 border-b px-3 py-2"
   >
-    <div
-      class="flex w-full min-w-0 items-center gap-2 overflow-hidden sm:w-auto sm:flex-1"
-    >
+    <div class="flex min-w-0 flex-1 items-center gap-2 overflow-hidden">
       <!-- Entity type badge -->
       <div
         class="flex shrink-0 items-center gap-1 rounded-md px-1.5 py-0.5 text-[10px] font-bold tracking-wider whitespace-nowrap uppercase {entityConfig.color} {entityConfig.bg}"

From 37fcc3d2c0e0fc730a87422dea4f1d25bb298a5b Mon Sep 17 00:00:00 2001
From: Failerko <c.dann@seznam.cz>
Date: Sun, 19 Apr 2026 02:37:32 +0200
Subject: [PATCH 26/36] fix: drop opacity-85 on auto-approved cards and rework
 header flex sizing
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Dropping opacity-85 and transition-all tests the hypothesis that Svelte's
in:fade interaction with the opacity class (or the combined all-property
transition) was leaving the auto-approved NEW LOREBOOK card's content
invisible on narrow widths. Bumped border/bg to teal/30 and /8 to keep
the card's auto-approved signal readable without the opacity filter.

The header now uses flex-auto (basis: auto) on the left info column, so
its natural width prevents flex from shrinking the row below its min-
content. flex-wrap then reliably moves the right action-button column
to a second row only when the header genuinely cannot fit both on one
line — no mid-width overlap, no wrapping too eagerly.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/lib/components/vault/VaultDiffView.svelte | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/lib/components/vault/VaultDiffView.svelte b/src/lib/components/vault/VaultDiffView.svelte
index 261fe4bc..4bdcd447 100644
--- a/src/lib/components/vault/VaultDiffView.svelte
+++ b/src/lib/components/vault/VaultDiffView.svelte
@@ -244,8 +244,8 @@
 </script>
 
 <div
-  class="overflow-hidden rounded-xl border transition-all {isAutoApproved
-    ? 'border-teal-500/20 bg-teal-500/5 opacity-85'
+  class="overflow-hidden rounded-xl border {isAutoApproved
+    ? 'border-teal-500/30 bg-teal-500/8'
     : isApproved
       ? 'border-emerald-500/20 bg-emerald-500/5 opacity-75'
       : isRejected
@@ -257,7 +257,7 @@
   <div
     class="border-surface-700 bg-surface-800 flex flex-wrap items-center gap-x-2 gap-y-1.5 border-b px-3 py-2"
   >
-    <div class="flex min-w-0 flex-1 items-center gap-2 overflow-hidden">
+    <div class="flex flex-auto items-center gap-2">
       <!-- Entity type badge -->
       <div
         class="flex shrink-0 items-center gap-1 rounded-md px-1.5 py-0.5 text-[10px] font-bold tracking-wider whitespace-nowrap uppercase {entityConfig.color} {entityConfig.bg}"

From 8f0efdd868bf5864d89a937655fca2ca75416ba5 Mon Sep 17 00:00:00 2001
From: Failerko <c.dann@seznam.cz>
Date: Sun, 19 Apr 2026 02:42:47 +0200
Subject: [PATCH 27/36] fix: make lorebook entries list scrollable on mobile

The sidebar column had no flex-1/min-h-0 in mobile (flex-col parent),
so it sized to the entries list's intrinsic height and the inner
overflow-y-auto had no constrained parent to scroll inside.

Added flex-1 min-h-0 on mobile, reverted to flex-none at sm: so the
w-72 sidebar width still applies in the row layout.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/lib/components/vault/VaultLorebookEditorContent.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/vault/VaultLorebookEditorContent.svelte b/src/lib/components/vault/VaultLorebookEditorContent.svelte
index 8905c144..eba157ab 100644
--- a/src/lib/components/vault/VaultLorebookEditorContent.svelte
+++ b/src/lib/components/vault/VaultLorebookEditorContent.svelte
@@ -775,7 +775,7 @@
           <!-- Sidebar (List) -->
           <div
             class={cn(
-              'sm:border-border sm:bg-foreground/[0.03] flex w-full flex-col sm:w-72 sm:border-r',
+              'sm:border-border sm:bg-foreground/[0.03] flex w-full min-h-0 flex-1 flex-col sm:w-72 sm:flex-none sm:border-r',
               selectedIndex !== null && 'hidden sm:flex',
             )}
           >

From b7653922facf5b8c9d5c7c1688aaf1937d285a81 Mon Sep 17 00:00:00 2001
From: Failerko <c.dann@seznam.cz>
Date: Sun, 19 Apr 2026 02:52:39 +0200
Subject: [PATCH 28/36] fix: let vault header actions scroll horizontally when
 they overflow
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

On narrow widths (phone / Fold outer) the four+ action buttons
(Vault Assistant, Tags, Browse Online, Import Card, New …) don't
fit alongside the title + back button, so the rightmost ones get
clipped off-screen.

Replaced justify-between with gap + flex-1 on the action group, with
overflow-x-auto and shrink-0 children so the group takes the remaining
row width and horizontally scrolls once its natural content exceeds it.
Buttons no longer get clipped; users can swipe to reach any action.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/lib/components/vault/VaultPanel.svelte | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/lib/components/vault/VaultPanel.svelte b/src/lib/components/vault/VaultPanel.svelte
index f00838db..e1140c40 100644
--- a/src/lib/components/vault/VaultPanel.svelte
+++ b/src/lib/components/vault/VaultPanel.svelte
@@ -408,8 +408,8 @@
   <!-- Header -->
   <div class="bg-muted/20 flex flex-col border-b">
     <!-- Top Bar -->
-    <div class="flex items-center justify-between px-4 py-3">
-      <div class="flex items-center gap-1">
+    <div class="flex items-center gap-2 px-4 py-3">
+      <div class="flex shrink-0 items-center gap-1">
         <Button
           variant="link"
           size="icon"
@@ -426,7 +426,9 @@
       </div>
 
       <!-- Right Side Actions -->
-      <div class="flex items-center gap-2">
+      <div
+        class="flex min-w-0 flex-1 items-center justify-end gap-2 overflow-x-auto [&>*]:shrink-0"
+      >
         <Button
           icon={Bot}
           label="Vault Assistant"

From 4998d3bdd79f0a662df3db299804551583d01d83 Mon Sep 17 00:00:00 2001
From: Failerko <c.dann@seznam.cz>
Date: Sun, 19 Apr 2026 02:55:53 +0200
Subject: [PATCH 29/36] fix: show vault header actions as icon-only below lg
 breakpoint
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace the horizontal scroll with an icon-only presentation on narrow
widths. Drops button text labels (not icons) below 1024px via
max-lg:[&_span]:!hidden — Button's own hidden-sm:inline label span is
overridden with important so the action buttons shrink to icon size
and all fit alongside the title. At lg and up, full labels show again.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/lib/components/vault/VaultPanel.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/vault/VaultPanel.svelte b/src/lib/components/vault/VaultPanel.svelte
index e1140c40..91fe5f4c 100644
--- a/src/lib/components/vault/VaultPanel.svelte
+++ b/src/lib/components/vault/VaultPanel.svelte
@@ -427,7 +427,7 @@
 
       <!-- Right Side Actions -->
       <div
-        class="flex min-w-0 flex-1 items-center justify-end gap-2 overflow-x-auto [&>*]:shrink-0"
+        class="flex flex-1 items-center justify-end gap-2 [&_span]:max-lg:!hidden"
       >
         <Button
           icon={Bot}

From 11eee6764f80b267d75f43cb32d3e753d405aa3a Mon Sep 17 00:00:00 2001
From: Failerko <c.dann@seznam.cz>
Date: Sun, 19 Apr 2026 03:00:51 +0200
Subject: [PATCH 30/36] fix: let character trait chips grow vertically when
 text wraps

h-4 hard-capped the chip's height, so trait text that wrapped to a
second line on narrow widths escaped the chip outline. Switched to
min-h-4 with an explicit leading-4 and py-0 so single-line chips look
identical to before while multi-line text grows the chip.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/lib/components/vault/UniversalVaultCard.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/vault/UniversalVaultCard.svelte b/src/lib/components/vault/UniversalVaultCard.svelte
index 40658cdb..52ffa83c 100644
--- a/src/lib/components/vault/UniversalVaultCard.svelte
+++ b/src/lib/components/vault/UniversalVaultCard.svelte
@@ -175,7 +175,7 @@
           {#each asCharacter.traits.slice(0, 3) as trait, i (i)}
             <Badge
               variant="outline"
-              class="text-muted-foreground/80 border-muted-foreground/20 h-4 px-1.5 text-[10px] font-normal"
+              class="text-muted-foreground/80 border-muted-foreground/20 min-h-4 px-1.5 py-0 text-[10px] leading-4 font-normal"
             >
               {trait}
             </Badge>

From 3ecaaeeffff4f9894bdb13e139f2e58a2087adb7 Mon Sep 17 00:00:00 2001
From: Failerko <c.dann@seznam.cz>
Date: Sun, 19 Apr 2026 03:11:58 +0200
Subject: [PATCH 31/36] fix: let Tags and Browse modals fill the viewport below
 lg breakpoint

On the Galaxy Fold inner screen (~816px) the TagManager's max-w-2xl cap
and DiscoveryModal's sm:w-[calc(100%-2rem)] left large side gutters.
Switched both to w-full max-w-none below lg and kept the centered
calc+max-w layout only at lg (1024px) and up, matching the compact
breakpoint used elsewhere in the vault flow.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/lib/components/discovery/DiscoveryModal.svelte | 2 +-
 src/lib/components/tags/TagManager.svelte          | 5 ++++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/discovery/DiscoveryModal.svelte b/src/lib/components/discovery/DiscoveryModal.svelte
index 29b57f54..7e37ca4a 100644
--- a/src/lib/components/discovery/DiscoveryModal.svelte
+++ b/src/lib/components/discovery/DiscoveryModal.svelte
@@ -254,7 +254,7 @@
 
 <ResponsiveModal.Root open={isOpen} onOpenChange={(v) => !v && onClose()}>
   <ResponsiveModal.Content
-    class="flex h-[85vh] w-full max-w-7xl flex-col gap-0 overflow-hidden p-0 sm:w-[calc(100%-2rem)]"
+    class="flex h-[85vh] w-full max-w-none flex-col gap-0 overflow-hidden p-0 lg:w-[calc(100%-2rem)] lg:max-w-7xl"
   >
     {#if selectedCard}
       <DiscoveryCardDetails
diff --git a/src/lib/components/tags/TagManager.svelte b/src/lib/components/tags/TagManager.svelte
index 0b343e94..83bac9cf 100644
--- a/src/lib/components/tags/TagManager.svelte
+++ b/src/lib/components/tags/TagManager.svelte
@@ -87,7 +87,10 @@
 </script>
 
 <ResponsiveModal.Root bind:open {onOpenChange}>
-  <ResponsiveModal.Content class="flex max-w-2xl flex-col" style="height: 500px;">
+  <ResponsiveModal.Content
+    class="flex w-full max-w-none flex-col lg:w-[calc(100%-2rem)] lg:max-w-2xl"
+    style="height: 500px;"
+  >
     <ResponsiveModal.Header title="Manage Tags" />
 
     <div class="flex flex-1 flex-col gap-4 overflow-hidden p-4">

From 44475620b61fde00fd4faedd4c2861f363fc7774 Mon Sep 17 00:00:00 2001
From: Failerko <c.dann@seznam.cz>
Date: Sun, 19 Apr 2026 03:34:50 +0200
Subject: [PATCH 32/36] fix: shut up svelte

---
 src/lib/components/story/GalleryTab.svelte | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/lib/components/story/GalleryTab.svelte b/src/lib/components/story/GalleryTab.svelte
index 2cdd634b..49b716b6 100644
--- a/src/lib/components/story/GalleryTab.svelte
+++ b/src/lib/components/story/GalleryTab.svelte
@@ -457,6 +457,7 @@
 <ResponsiveModal.Root bind:open={lightboxOpen}>
   <ResponsiveModal.Content class="gap-0 overflow-hidden p-0 sm:max-w-3xl">
     <!-- Image area with navigation -->
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
     <div
       class="bg-surface-950 relative flex items-center justify-center p-4"
       ontouchstart={handleTouchStart}

From 47ef1db9e32483a345beb7c40b22f890b47f471a Mon Sep 17 00:00:00 2001
From: Failerko <c.dann@seznam.cz>
Date: Sun, 19 Apr 2026 03:35:30 +0200
Subject: [PATCH 33/36] fix: lint

---
 src/lib/components/vault/VaultDiffView.svelte | 24 ++++++++++++++-----
 .../vault/VaultLorebookEditorContent.svelte   |  2 +-
 src/lib/components/vault/VaultPanel.svelte    |  4 +---
 3 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/src/lib/components/vault/VaultDiffView.svelte b/src/lib/components/vault/VaultDiffView.svelte
index 4bdcd447..912549b6 100644
--- a/src/lib/components/vault/VaultDiffView.svelte
+++ b/src/lib/components/vault/VaultDiffView.svelte
@@ -332,7 +332,9 @@
         </div>
         <div
           class="text-surface-200 font-mono text-xs leading-relaxed break-words whitespace-pre-wrap"
-        >{formatChangeData()}</div>
+        >
+          {formatChangeData()}
+        </div>
       </div>
     {:else if change.action === 'update'}
       <!-- Update: Before / After -->
@@ -343,7 +345,9 @@
           </div>
           <div
             class="text-surface-400 font-mono text-xs leading-relaxed break-words whitespace-pre-wrap"
-          >{formatPrevious()}</div>
+          >
+            {formatPrevious()}
+          </div>
         </div>
         <div class="rounded-lg border border-emerald-500/20 bg-emerald-500/8 p-2.5">
           <div class="mb-1.5 text-[10px] font-bold tracking-wider text-emerald-400 uppercase">
@@ -351,7 +355,9 @@
           </div>
           <div
             class="text-surface-200 font-mono text-xs leading-relaxed break-words whitespace-pre-wrap"
-          >{formatChangeData()}</div>
+          >
+            {formatChangeData()}
+          </div>
         </div>
       </div>
     {:else if change.action === 'delete'}
@@ -362,7 +368,9 @@
         </div>
         <div
           class="text-surface-400 font-mono text-xs leading-relaxed break-words whitespace-pre-wrap line-through opacity-70"
-        >{formatPrevious()}</div>
+        >
+          {formatPrevious()}
+        </div>
       </div>
     {:else if change.action === 'merge'}
       <!-- Merge: Source entries and result (lorebook-entry only) -->
@@ -379,7 +387,9 @@
                 </div>
                 <div
                   class="text-surface-300 font-mono text-xs leading-relaxed break-words whitespace-pre-wrap"
-                >{formatEntry(entry)}</div>
+                >
+                  {formatEntry(entry)}
+                </div>
               </div>
             {/each}
           </div>
@@ -395,7 +405,9 @@
           </div>
           <div
             class="text-surface-200 font-mono text-xs leading-relaxed break-words whitespace-pre-wrap"
-          >{formatEntry(mergeData as VaultLorebookEntry | undefined)}</div>
+          >
+            {formatEntry(mergeData as VaultLorebookEntry | undefined)}
+          </div>
         </div>
       </div>
     {/if}
diff --git a/src/lib/components/vault/VaultLorebookEditorContent.svelte b/src/lib/components/vault/VaultLorebookEditorContent.svelte
index eba157ab..02ad8061 100644
--- a/src/lib/components/vault/VaultLorebookEditorContent.svelte
+++ b/src/lib/components/vault/VaultLorebookEditorContent.svelte
@@ -775,7 +775,7 @@
           <!-- Sidebar (List) -->
           <div
             class={cn(
-              'sm:border-border sm:bg-foreground/[0.03] flex w-full min-h-0 flex-1 flex-col sm:w-72 sm:flex-none sm:border-r',
+              'sm:border-border sm:bg-foreground/[0.03] flex min-h-0 w-full flex-1 flex-col sm:w-72 sm:flex-none sm:border-r',
               selectedIndex !== null && 'hidden sm:flex',
             )}
           >
diff --git a/src/lib/components/vault/VaultPanel.svelte b/src/lib/components/vault/VaultPanel.svelte
index 91fe5f4c..7f22ee82 100644
--- a/src/lib/components/vault/VaultPanel.svelte
+++ b/src/lib/components/vault/VaultPanel.svelte
@@ -426,9 +426,7 @@
       </div>
 
       <!-- Right Side Actions -->
-      <div
-        class="flex flex-1 items-center justify-end gap-2 [&_span]:max-lg:!hidden"
-      >
+      <div class="flex flex-1 items-center justify-end gap-2 [&_span]:max-lg:!hidden">
         <Button
           icon={Bot}
           label="Vault Assistant"

From 22efd2eede1448c2d61b586a389be64458122f24 Mon Sep 17 00:00:00 2001
From: Failerko <c.dann@seznam.cz>
Date: Sun, 19 Apr 2026 03:38:30 +0200
Subject: [PATCH 34/36] fix: fu docs

---
 .../2026-04-18-vault-assistant-mobile.md      | 1120 -----------------
 ...026-04-18-vault-assistant-mobile-design.md |  166 ---
 2 files changed, 1286 deletions(-)
 delete mode 100644 docs/superpowers/plans/2026-04-18-vault-assistant-mobile.md
 delete mode 100644 docs/superpowers/specs/2026-04-18-vault-assistant-mobile-design.md

diff --git a/docs/superpowers/plans/2026-04-18-vault-assistant-mobile.md b/docs/superpowers/plans/2026-04-18-vault-assistant-mobile.md
deleted file mode 100644
index 3dbec17c..00000000
--- a/docs/superpowers/plans/2026-04-18-vault-assistant-mobile.md
+++ /dev/null
@@ -1,1120 +0,0 @@
-# Vault Assistant Mobile & Narrow-Width Parity 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:** Give the `InteractiveVaultAssistant` component mobile feature parity with desktop (via a tabbed layout) and make it stretch edge-to-edge on Fold-inner-class screens and narrow desktop windows.
-
-**Architecture:** Introduce a 1024px `isCompact` breakpoint used only by this component. At that width and below, render a full-screen overlay (not a drawer) with a Chat / Entity tab bar that surfaces all the auto-open behaviors desktop users already get — without hijacking the chat stream. Above 1024px, keep the two-panel desktop layout but let both panels shrink gracefully via flex minimums so the editor doesn't get cramped on narrow desktops.
-
-**Tech Stack:** Svelte 5 (`$state`, `$derived`, `$effect`), Tailwind, `vaul-svelte` (drawer primitive, left in place for other call-sites), `bits-ui` (Dialog primitive).
-
-**Spec:** `docs/superpowers/specs/2026-04-18-vault-assistant-mobile-design.md`
-
----
-
-## File Structure
-
-**New:**
-- `src/lib/hooks/is-compact.svelte.ts` — `createIsCompact()` hook mirroring `createIsMobile` at a 1024px breakpoint.
-
-**Modified:**
-- `src/lib/components/vault/InteractiveVaultAssistant.svelte` — all UI changes happen here. No store, service, or shared-primitive changes.
-
-The plan splits the component changes into small, independently-committable tasks. Between tasks the app stays functional; the compact layout may look rougher than final until Task 4 lands.
-
-## Verification conventions
-
-- After every code change, run `npm run check` (svelte-check / TypeScript) and `npm run lint` (eslint). Both must pass before committing.
-- Manual smoke test happens in Task 10 only. Between tasks, type-check + lint are the gates.
-- Commit messages follow existing repo convention (imperative mood, lowercase type prefix).
-
----
-
-## Task 1: Create the `createIsCompact` hook
-
-**Files:**
-- Create: `src/lib/hooks/is-compact.svelte.ts`
-
-- [ ] **Step 1: Create the hook file**
-
-File path: `src/lib/hooks/is-compact.svelte.ts`
-
-```ts
-import { onMount } from 'svelte'
-
-/**
- * Layout breakpoint hook for components that need a tighter "compact" threshold
- * than the 768px `createIsMobile` gives. Fires true below 1024px (Tailwind lg).
- */
-export function createIsCompact() {
-  let isCompact = $state(false)
-
-  onMount(() => {
-    const mql = window.matchMedia('(max-width: 1023px)')
-
-    const onChange = () => {
-      isCompact = mql.matches
-    }
-
-    mql.addEventListener('change', onChange)
-    isCompact = mql.matches
-
-    return () => mql.removeEventListener('change', onChange)
-  })
-
-  return {
-    get current() {
-      return isCompact
-    },
-  }
-}
-```
-
-- [ ] **Step 2: Verify it type-checks**
-
-Run: `npm run check`
-Expected: no new errors relating to `is-compact.svelte.ts`.
-
-- [ ] **Step 3: Verify it lints**
-
-Run: `npm run lint`
-Expected: no new lint errors.
-
-- [ ] **Step 4: Commit**
-
-```bash
-git add src/lib/hooks/is-compact.svelte.ts
-git commit -m "feat: add createIsCompact hook at 1024px breakpoint"
-```
-
----
-
-## Task 2: Swap `isMobile` → `isCompact` for layout decisions
-
-**Goal:** Widen the existing "mobile" layout path from 768px to 1024px without behavior guards changing yet. This is a mechanical rename touching only layout sites. The onMount / tool_end / show_entity guards stay as `!isMobile.current` until Task 5.
-
-**Files:**
-- Modify: `src/lib/components/vault/InteractiveVaultAssistant.svelte`
-
-- [ ] **Step 1: Import the new hook alongside the existing one**
-
-Replace the import on line 54:
-
-```ts
-import { createIsMobile } from '$lib/hooks/is-mobile.svelte'
-```
-
-with:
-
-```ts
-import { createIsMobile } from '$lib/hooks/is-mobile.svelte'
-import { createIsCompact } from '$lib/hooks/is-compact.svelte'
-```
-
-- [ ] **Step 2: Instantiate `isCompact` next to `isMobile`**
-
-Replace the block at lines 64–65:
-
-```ts
-  // Mobile detection
-  const isMobile = createIsMobile()
-```
-
-with:
-
-```ts
-  // Mobile detection (touch/native-device flavour + 768px breakpoint — kept for non-layout guards)
-  const isMobile = createIsMobile()
-  // Layout breakpoint: below 1024px we use the compact (tabs, full-screen) layout
-  const isCompact = createIsCompact()
-```
-
-- [ ] **Step 3: Replace layout-related `isMobile.current` usages with `isCompact.current`**
-
-These are the ONLY layout sites to change in this task. Guards in auto-open handlers stay on `isMobile` for now.
-
-Line 549 — modal container width:
-
-```svelte
-vaultEditor.editorOpen && !isMobile.current ? 'max-w-[90vw]' : 'max-w-2xl',
-```
-
-→
-
-```svelte
-vaultEditor.editorOpen && !isCompact.current ? 'max-w-[90vw]' : 'max-w-2xl',
-```
-
-Line 598 — desktop edit panel render:
-
-```svelte
-{#if vaultEditor.editorOpen && vaultEditor.activeChange && !isMobile.current}
-```
-
-→
-
-```svelte
-{#if vaultEditor.editorOpen && vaultEditor.activeChange && !isCompact.current}
-```
-
-Line 616 — chat panel sizing class expression:
-
-```svelte
-<div
-  class="flex flex-col overflow-hidden {vaultEditor.editorOpen && !isMobile.current
-    ? 'w-full max-w-2xl shrink-0'
-    : 'mx-auto w-full max-w-2xl'}"
->
-```
-
-→
-
-```svelte
-<div
-  class="flex flex-col overflow-hidden {vaultEditor.editorOpen && !isCompact.current
-    ? 'w-full max-w-2xl shrink-0'
-    : 'mx-auto w-full max-w-2xl'}"
->
-```
-
-Line 1093 — mobile Sheet guard:
-
-```svelte
-{#if isMobile.current && vaultEditor.activeChange}
-```
-
-→
-
-```svelte
-{#if isCompact.current && vaultEditor.activeChange}
-```
-
-Leave lines 145, 389, 396, and 421 alone (they stay on `!isMobile.current` for this task).
-
-- [ ] **Step 4: Type-check and lint**
-
-Run:
-
-```bash
-npm run check
-npm run lint
-```
-
-Expected: no new errors.
-
-- [ ] **Step 5: Commit**
-
-```bash
-git add src/lib/components/vault/InteractiveVaultAssistant.svelte
-git commit -m "refactor: use isCompact for vault assistant layout decisions"
-```
-
----
-
-## Task 3: Replace compact shell with full-screen Dialog
-
-**Goal:** On compact widths, render a full-viewport `Dialog` instead of the `ResponsiveModal` drawer. Eliminates the `max-w-2xl` clip on Fold-inner screens and the `h-[90vh]`/`max-h-[85vh]` height conflict. Wide path untouched.
-
-**Files:**
-- Modify: `src/lib/components/vault/InteractiveVaultAssistant.svelte`
-
-- [ ] **Step 1: Add a shell wrapper around the existing content**
-
-Find the current top-level render (starts at line 545):
-
-```svelte
-<ResponsiveModal.Root open={true} onOpenChange={(open) => !open && onClose()}>
-  <ResponsiveModal.Content
-    class={cn(
-      'flex h-[90vh] w-full flex-col gap-0 overflow-hidden p-0',
-      vaultEditor.editorOpen && !isCompact.current ? 'max-w-[90vw]' : 'max-w-2xl',
-    )}
-  >
-    <div class="flex flex-col overflow-hidden" style="height: 100%">
-```
-
-Replace with:
-
-```svelte
-{#if isCompact.current}
-  <Dialog.Root open={true} onOpenChange={(open) => !open && onClose()}>
-    <Dialog.Content
-      class="flex h-[100dvh] w-screen max-w-none flex-col gap-0 overflow-hidden rounded-none border-none p-0"
-    >
-      <Dialog.Title class="sr-only">Vault Assistant</Dialog.Title>
-      <div class="flex flex-col overflow-hidden" style="height: 100%">
-{:else}
-  <ResponsiveModal.Root open={true} onOpenChange={(open) => !open && onClose()}>
-    <ResponsiveModal.Content
-      class={cn(
-        'flex h-[90vh] w-full flex-col gap-0 overflow-hidden p-0',
-        vaultEditor.editorOpen ? 'max-w-[90vw]' : 'max-w-2xl',
-      )}
-    >
-      <div class="flex flex-col overflow-hidden" style="height: 100%">
-{/if}
-```
-
-Notes:
-- The `!isCompact.current` check in the `max-w-[90vw]` class is now redundant because we're only inside the ResponsiveModal branch when `!isCompact.current`; I've simplified it to `vaultEditor.editorOpen`.
-- `Dialog.Title class="sr-only"` is required by bits-ui's Dialog for accessibility; it hides a title from visual users.
-
-- [ ] **Step 2: Add matching closing tags**
-
-Find the current closing (line 1089–1090):
-
-```svelte
-    </div>
-  </ResponsiveModal.Content>
-</ResponsiveModal.Root>
-```
-
-Replace with:
-
-```svelte
-      </div>
-  {#if isCompact.current}
-    </Dialog.Content>
-  </Dialog.Root>
-  {:else}
-    </ResponsiveModal.Content>
-  </ResponsiveModal.Root>
-  {/if}
-```
-
-Note: Svelte's indentation inside `{#if}` doesn't affect rendering; the intent is that the `</div>` closes the inner flex container and the if/else closes the correct shell.
-
-*Tip:* if the `{#if}` / `{:else}` pair placement is awkward to read, it is acceptable to split into two full copies of the shell (each wrapping `{@render ...}` or the same markup). Either form is fine — pick the one you find clearer. Keep whichever you pick consistent with the opening tag placement from Step 1.
-
-- [ ] **Step 3: Type-check and lint**
-
-Run:
-
-```bash
-npm run check
-npm run lint
-```
-
-Expected: no new errors.
-
-- [ ] **Step 4: Commit**
-
-```bash
-git add src/lib/components/vault/InteractiveVaultAssistant.svelte
-git commit -m "feat: render vault assistant as full-screen dialog on compact"
-```
-
----
-
-## Task 4: Tab architecture and unified edit panel mounting
-
-**Goal:** Add the Chat/Entity tab bar, move the compact-width edit panel out of the bottom `Sheet.Root` and into the Entity tab body, collapse the two edit-panel refs into one, and add an effect that auto-switches the tab back to Chat when the Entity tab disappears.
-
-**Files:**
-- Modify: `src/lib/components/vault/InteractiveVaultAssistant.svelte`
-
-- [ ] **Step 1: Add tab state and the auto-switch-to-chat effect**
-
-After the existing `let viewedEntity = $state<FocusedEntity | null>(null)` line (currently around line 100) add:
-
-```ts
-  // Compact-width tab state
-  let activeTab = $state<'chat' | 'entity'>('chat')
-
-  // Auto-fall-back to chat tab when the Entity tab loses its content
-  // (e.g. user closed the editor, approved/rejected the last pending change,
-  // or conversation switched away from an active change).
-  $effect(() => {
-    const entityTabAvailable =
-      vaultEditor.editorOpen && vaultEditor.activeChange !== null
-    if (!entityTabAvailable && activeTab === 'entity') {
-      activeTab = 'chat'
-    }
-  })
-```
-
-- [ ] **Step 2: Reset tab to chat on new / switched conversation**
-
-In `handleNewConversation` (currently around line 222):
-
-```ts
-  async function handleNewConversation() {
-    if (!service) return
-    // Auto-save current conversation before starting new one
-    if (messages.some((m) => !m.isGreeting)) {
-      await service.saveConversation(messages, vaultEditor.pendingChanges).catch(() => {})
-    }
-    service.reset()
-    vaultEditor.reset()
-    initializeService()
-    await loadConversationsList()
-  }
-```
-
-Insert `activeTab = 'chat'` right after `vaultEditor.reset()`:
-
-```ts
-    service.reset()
-    vaultEditor.reset()
-    activeTab = 'chat'
-    initializeService()
-    await loadConversationsList()
-```
-
-In `handleSwitchConversation` (currently around line 234), similarly add `activeTab = 'chat'` after the existing `vaultEditor.reset()` call:
-
-```ts
-    const loaded = await service.loadConversation(id)
-    if (loaded) {
-      vaultEditor.reset()
-      activeTab = 'chat'
-```
-
-In `handleDeleteConversation` (around line 272), add the same after the `vaultEditor.reset()`:
-
-```ts
-    await database.deleteVaultConversation(id)
-    if (service?.getConversationId() === id) {
-      service.reset()
-      vaultEditor.reset()
-      activeTab = 'chat'
-      initializeService()
-    }
-```
-
-- [ ] **Step 3: Collapse `editPanelRef` and `editPanelMobileRef` into a single ref**
-
-Remove the two ref declarations (currently around lines 291–292):
-
-```ts
-  let editPanelRef = $state<ReturnType<typeof VaultEntityEditPanel> | null>(null)
-  let editPanelMobileRef = $state<ReturnType<typeof VaultEntityEditPanel> | null>(null)
-```
-
-Replace with a single ref:
-
-```ts
-  let editPanelRef = $state<ReturnType<typeof VaultEntityEditPanel> | null>(null)
-```
-
-Update `handleSetPortrait` (currently around line 294) to use the single ref; the tab-switch behavior is added in Task 7, so for this task the body stays minimal:
-
-```ts
-  function handleSetPortrait(imageId: string) {
-    if (!activeCharacterEntity || !service) return
-    const dataUrl = service.generatedImages.get(imageId)
-    if (!dataUrl) return
-    editPanelRef?.setPortrait(dataUrl)
-  }
-```
-
-- [ ] **Step 4: Render the tab bar inside the chat-side column**
-
-Find the chat-side column opening (currently around line 614):
-
-```svelte
-        <!-- Chat Panel (right, or full-width on mobile) -->
-        <div
-          class="flex flex-col overflow-hidden {vaultEditor.editorOpen && !isCompact.current
-            ? 'w-full max-w-2xl shrink-0'
-            : 'mx-auto w-full max-w-2xl'}"
-        >
-          <!-- Conversation selector -->
-```
-
-Right before the `<!-- Conversation selector -->` comment, insert the tab bar. But keep the conversation selector and pending-list popovers above the tabs — so actually insert the tab bar BELOW the pending-list popover block (currently around line 813, right after the `{#if pendingOnly.length > 0} ... {/if}` closes):
-
-```svelte
-          <!-- Compact-width tab bar: Chat | Entity -->
-          {#if isCompact.current && vaultEditor.editorOpen && vaultEditor.activeChange}
-            <div
-              class="border-surface-700 flex shrink-0 gap-1 border-b px-2 py-1.5"
-              role="tablist"
-            >
-              <button
-                type="button"
-                role="tab"
-                aria-selected={activeTab === 'chat'}
-                class={cn(
-                  'flex-1 rounded-md px-3 py-1.5 text-xs font-medium transition-colors',
-                  activeTab === 'chat'
-                    ? 'bg-surface-700 text-surface-100'
-                    : 'text-surface-400 hover:text-foreground hover:bg-foreground/5',
-                )}
-                onclick={() => (activeTab = 'chat')}
-              >
-                Chat
-              </button>
-              <button
-                type="button"
-                role="tab"
-                aria-selected={activeTab === 'entity'}
-                class={cn(
-                  'relative flex-1 rounded-md px-3 py-1.5 text-xs font-medium transition-colors',
-                  activeTab === 'entity'
-                    ? 'bg-surface-700 text-surface-100'
-                    : 'text-surface-400 hover:text-foreground hover:bg-foreground/5',
-                )}
-                onclick={() => (activeTab = 'entity')}
-              >
-                Entity
-                {#if vaultEditor.pendingCount > 0}
-                  <span
-                    class="ml-1.5 inline-flex h-4 min-w-4 items-center justify-center rounded-full bg-emerald-500/20 px-1 text-[10px] font-bold text-emerald-300"
-                  >
-                    {vaultEditor.pendingCount}
-                  </span>
-                {/if}
-              </button>
-            </div>
-          {/if}
-```
-
-- [ ] **Step 5: Gate the messages/input body on active tab + render Entity tab body**
-
-The chat content (currently lines 815–1085 — messages container + error + input) needs to be wrapped so it only renders when the Chat tab is active on compact (or always on wide).
-
-Wrap the existing content with a conditional. Find the start of the messages div (around line 816):
-
-```svelte
-          <!-- Messages -->
-          <div class="flex-1 space-y-3 overflow-y-auto px-4 py-3" bind:this={messagesContainer}>
-```
-
-Immediately before this comment, open a new conditional wrapper:
-
-```svelte
-          {#if !isCompact.current || activeTab === 'chat'}
-          <!-- Messages -->
-          <div class="flex-1 space-y-3 overflow-y-auto px-4 py-3" bind:this={messagesContainer}>
-```
-
-Then find the input-area closing (around line 1085–1086):
-
-```svelte
-            <div class="text-surface-500 mt-1.5 hidden text-center text-[10px] md:block">
-              {isTouchDevice()
-                ? 'Shift+Enter to send, Enter for new line'
-                : 'Enter to send, Shift+Enter for new line'}
-            </div>
-          </div>
-        </div>
-```
-
-Close the wrapper right after the input area's outer `</div>` (the one that closes the input-area padding container, NOT the chat-side column div). Add an `{:else}` branch for the Entity tab body:
-
-```svelte
-            <div class="text-surface-500 mt-1.5 hidden text-center text-[10px] md:block">
-              {isTouchDevice()
-                ? 'Shift+Enter to send, Enter for new line'
-                : 'Enter to send, Shift+Enter for new line'}
-            </div>
-          </div>
-          {:else}
-            <!-- Entity tab body (compact width only; wide width shows the left panel instead) -->
-            {#if vaultEditor.activeChange}
-              <div class="flex min-h-0 flex-1 flex-col overflow-hidden">
-                <VaultEntityEditPanel
-                  bind:this={editPanelRef}
-                  change={vaultEditor.activeChange}
-                  onApprove={(specificChange) =>
-                    handleApprove(specificChange ?? vaultEditor.activeChange!)}
-                  onReject={(change) => handleReject(change)}
-                  onClose={() => vaultEditor.closeEditor()}
-                />
-              </div>
-            {/if}
-          {/if}
-        </div>
-```
-
-- [ ] **Step 6: Remove the standalone `Sheet.Root` compact edit panel**
-
-Find the block starting around line 1092:
-
-```svelte
-<!-- Mobile entity editor — bottom sheet -->
-{#if isCompact.current && vaultEditor.activeChange}
-  <Sheet.Root
-    open={vaultEditor.editorOpen}
-    onOpenChange={(open) => {
-      if (!open) vaultEditor.closeEditor()
-    }}
-  >
-    <Sheet.Content side="bottom" class="flex h-[85dvh] flex-col p-0">
-      {#if vaultEditor.activeChange}
-        <VaultEntityEditPanel
-          bind:this={editPanelMobileRef}
-          change={vaultEditor.activeChange}
-          onApprove={(specificChange) => handleApprove(specificChange ?? vaultEditor.activeChange!)}
-          onReject={(change) => handleReject(change)}
-          onClose={() => vaultEditor.closeEditor()}
-        />
-      {/if}
-    </Sheet.Content>
-  </Sheet.Root>
-{/if}
-```
-
-Delete the entire block (including the surrounding comment).
-
-- [ ] **Step 7: Remove the now-unused `Sheet` import**
-
-Find the imports block (lines 47):
-
-```ts
-  import * as Sheet from '$lib/components/ui/sheet'
-```
-
-Delete this line.
-
-- [ ] **Step 8: Type-check and lint**
-
-Run:
-
-```bash
-npm run check
-npm run lint
-```
-
-Expected: no new errors. If lint complains about `editPanelMobileRef` being unused, double-check that Step 3 replaced both the declaration and all `editPanelMobileRef` usages.
-
-- [ ] **Step 9: Commit**
-
-```bash
-git add src/lib/components/vault/InteractiveVaultAssistant.svelte
-git commit -m "feat: tab-based compact layout for vault assistant"
-```
-
----
-
-## Task 5: Remove `!isMobile.current` auto-open guards
-
-**Goal:** Now that compact has a place to show the entity panel (Entity tab), the guards that skipped auto-opening on mobile can go. State updates run on every width; the tab system handles whether they're visually surfaced.
-
-**Files:**
-- Modify: `src/lib/components/vault/InteractiveVaultAssistant.svelte`
-
-- [ ] **Step 1: Remove the onMount focused-entity guard**
-
-Find the block at lines 145–169:
-
-```ts
-    // Auto-open focused entity if provided
-    if (focusedEntity && !isMobile.current) {
-      let entityData: any = null
-      if (focusedEntity.entityType === 'character') {
-        entityData = characterVault.getById(focusedEntity.entityId)
-      } else if (focusedEntity.entityType === 'lorebook') {
-        entityData = lorebookVault.getById(focusedEntity.entityId)
-      } else if (focusedEntity.entityType === 'scenario') {
-        entityData = scenarioVault.getById(focusedEntity.entityId)
-      }
-
-      if (entityData) {
-        // Construct a dummy change to satisfy the viewer store requirement
-        const dummyChange = {
-          id: `view-${focusedEntity.entityId}`,
-          toolCallId: 'init',
-          entityType: focusedEntity.entityType,
-          action: 'update',
-          status: 'pending',
-          entityId: focusedEntity.entityId,
-          data: JSON.parse(JSON.stringify(entityData)),
-        } as unknown as VaultPendingChange
-
-        vaultEditor.openViewer(dummyChange, focusedEntity.entityId, focusedEntity.entityType)
-      }
-    }
-```
-
-Replace `focusedEntity && !isMobile.current` with just `focusedEntity`:
-
-```ts
-    // Auto-open focused entity if provided
-    if (focusedEntity) {
-```
-
-(Leave the rest of the block unchanged.)
-
-- [ ] **Step 2: Remove the tool_end auto-created-lorebook guard**
-
-Find the block at lines 384–399 (inside the `tool_end` case):
-
-```ts
-              // Auto-approve lorebook creation (it's a prerequisite step)
-              if (incoming.entityType === 'lorebook' && incoming.action === 'create' && service) {
-                vaultEditor.addPendingChange(incoming)
-                await handleApprove(incoming)
-                // Open the newly created lorebook in the editor
-                if (!isMobile.current) {
-                  await tick()
-                  vaultEditor.openEditor(incoming)
-                }
-              } else {
-                vaultEditor.addPendingChange(incoming)
-                // Auto-open entity editor on desktop (store handles same-lorebook skip)
-                if (!isMobile.current) {
-                  vaultEditor.openEditorSmart(incoming)
-                }
-              }
-```
-
-Replace with (guards removed):
-
-```ts
-              // Auto-approve lorebook creation (it's a prerequisite step)
-              if (incoming.entityType === 'lorebook' && incoming.action === 'create' && service) {
-                vaultEditor.addPendingChange(incoming)
-                await handleApprove(incoming)
-                // Open the newly created lorebook in the editor
-                await tick()
-                vaultEditor.openEditor(incoming)
-              } else {
-                vaultEditor.addPendingChange(incoming)
-                // Auto-open entity editor (store handles same-lorebook skip).
-                // On compact, the Entity tab becomes available — user still has to tap to switch.
-                vaultEditor.openEditorSmart(incoming)
-              }
-```
-
-- [ ] **Step 3: Remove the show_entity viewer guard**
-
-Find the block at lines 419–434 (inside the `show_entity` case):
-
-```ts
-          case 'show_entity':
-            // Open entity in view mode (no approval workflow)
-            if (!isMobile.current) {
-              vaultEditor.openViewer(event.change, event.entityId, event.entityType)
-            }
-            // Track which character is currently being viewed so the Set Portrait button appears
-            if (event.entityType === 'character') {
-```
-
-Replace with:
-
-```ts
-          case 'show_entity':
-            // Open entity in view mode (no approval workflow)
-            vaultEditor.openViewer(event.change, event.entityId, event.entityType)
-            // Track which character is currently being viewed so the Set Portrait button appears
-            if (event.entityType === 'character') {
-```
-
-- [ ] **Step 4: Remove the now-unused `isMobile` hook**
-
-Confirm no remaining `isMobile.current` references exist:
-
-Run (via Grep tool, not shell): search pattern `isMobile\.current` in `src/lib/components/vault/InteractiveVaultAssistant.svelte`.
-Expected: zero matches.
-
-If zero matches, remove the instantiation (currently around line 64):
-
-```ts
-  // Mobile detection (touch/native-device flavour + 768px breakpoint — kept for non-layout guards)
-  const isMobile = createIsMobile()
-```
-
-Delete these two lines.
-
-Also remove the import (around line 54):
-
-```ts
-  import { createIsMobile } from '$lib/hooks/is-mobile.svelte'
-```
-
-Delete it.
-
-Update the comment on the remaining `isCompact` block so the context is still clear:
-
-```ts
-  // Layout breakpoint: below 1024px we use the compact (tabs, full-screen) layout
-  const isCompact = createIsCompact()
-```
-
-- [ ] **Step 5: Type-check and lint**
-
-Run:
-
-```bash
-npm run check
-npm run lint
-```
-
-Expected: no new errors. If the lint catches an unused import that Step 4 missed, delete it.
-
-- [ ] **Step 6: Commit**
-
-```bash
-git add src/lib/components/vault/InteractiveVaultAssistant.svelte
-git commit -m "feat: remove mobile guards so auto-open state runs on all widths"
-```
-
----
-
-## Task 6: Entity tab pulse animation on new pending changes
-
-**Goal:** When a new pending change lands while the user is viewing the Chat tab, the Entity tab pulses once (~800ms) so the user notices without being yanked to a new screen.
-
-**Files:**
-- Modify: `src/lib/components/vault/InteractiveVaultAssistant.svelte`
-
-- [ ] **Step 1: Add pulse state and count-tracker effect**
-
-Just below the `activeTab` declaration added in Task 4 Step 1, add:
-
-```ts
-  // Pulse the Entity tab when a new pending change arrives while user is on Chat
-  let entityTabPulsing = $state(false)
-  let prevPendingCount = vaultEditor.pendingCount
-  $effect(() => {
-    const current = vaultEditor.pendingCount
-    if (current > prevPendingCount && activeTab === 'chat') {
-      entityTabPulsing = true
-      const timer = setTimeout(() => {
-        entityTabPulsing = false
-      }, 800)
-      prevPendingCount = current
-      return () => clearTimeout(timer)
-    }
-    prevPendingCount = current
-  })
-```
-
-- [ ] **Step 2: Apply the pulse class to the Entity tab button**
-
-Find the Entity tab button added in Task 4 Step 4. Update its `class={cn(...)}` expression to include a `vault-tab-pulse` class when `entityTabPulsing` is true:
-
-```svelte
-              <button
-                type="button"
-                role="tab"
-                aria-selected={activeTab === 'entity'}
-                class={cn(
-                  'relative flex-1 rounded-md px-3 py-1.5 text-xs font-medium transition-colors',
-                  activeTab === 'entity'
-                    ? 'bg-surface-700 text-surface-100'
-                    : 'text-surface-400 hover:text-foreground hover:bg-foreground/5',
-                  entityTabPulsing && 'vault-tab-pulse',
-                )}
-                onclick={() => (activeTab = 'entity')}
-              >
-```
-
-- [ ] **Step 3: Add the keyframe definition to the component's `<style>` block**
-
-The component currently has no `<style>` block. Add one at the very bottom of the file (after the closing `</Dialog.Root>` of the image-enlargement dialog, so it's the final top-level element):
-
-```svelte
-<style>
-  :global(.vault-tab-pulse) {
-    animation: vault-tab-pulse 800ms ease-out 1;
-  }
-
-  @keyframes vault-tab-pulse {
-    0% {
-      box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.45);
-    }
-    60% {
-      box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
-    }
-    100% {
-      box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
-    }
-  }
-</style>
-```
-
-Note: `:global(...)` ensures the class survives Svelte's scoped-style hashing when applied via `cn()`. If you prefer to scope it, apply the class directly on the element (not via `cn`) and drop the `:global`.
-
-- [ ] **Step 4: Type-check and lint**
-
-Run:
-
-```bash
-npm run check
-npm run lint
-```
-
-Expected: no new errors.
-
-- [ ] **Step 5: Commit**
-
-```bash
-git add src/lib/components/vault/InteractiveVaultAssistant.svelte
-git commit -m "feat: pulse entity tab when a pending change arrives off-tab"
-```
-
----
-
-## Task 7: "Set Portrait" auto-switches to Entity tab on compact
-
-**Goal:** The "Set Portrait" button on a generated image is a direct user action that only makes sense inside the edit panel. On compact, tapping it should switch to the Entity tab so the result is visible — this is not the same class of action as the ambient auto-opens from Task 5, so an explicit tab switch is appropriate.
-
-**Files:**
-- Modify: `src/lib/components/vault/InteractiveVaultAssistant.svelte`
-
-- [ ] **Step 1: Update `handleSetPortrait`**
-
-Find the current handler (updated in Task 4 Step 3):
-
-```ts
-  function handleSetPortrait(imageId: string) {
-    if (!activeCharacterEntity || !service) return
-    const dataUrl = service.generatedImages.get(imageId)
-    if (!dataUrl) return
-    editPanelRef?.setPortrait(dataUrl)
-  }
-```
-
-Replace with:
-
-```ts
-  async function handleSetPortrait(imageId: string) {
-    if (!activeCharacterEntity || !service) return
-    const dataUrl = service.generatedImages.get(imageId)
-    if (!dataUrl) return
-    // On compact, the panel only mounts inside the Entity tab — switch first so the ref exists.
-    if (isCompact.current && activeTab !== 'entity') {
-      activeTab = 'entity'
-      await tick()
-    }
-    editPanelRef?.setPortrait(dataUrl)
-  }
-```
-
-No caller changes needed — the button's onclick already awaits because it was already wrapped in an arrow function; `await` in a non-async onclick is fine because we don't need the caller to wait for completion.
-
-- [ ] **Step 2: Type-check and lint**
-
-Run:
-
-```bash
-npm run check
-npm run lint
-```
-
-Expected: no new errors.
-
-- [ ] **Step 3: Commit**
-
-```bash
-git add src/lib/components/vault/InteractiveVaultAssistant.svelte
-git commit -m "feat: set portrait switches to entity tab on compact"
-```
-
----
-
-## Task 8: Narrow-desktop flex sizing
-
-**Goal:** At widths ≥1024px, the two-panel layout can't leave the editor panel starved. Set minimums on both panels so they shrink together, and remove the `shrink-0` on chat so it can give up space.
-
-**Files:**
-- Modify: `src/lib/components/vault/InteractiveVaultAssistant.svelte`
-
-- [ ] **Step 1: Set minimum width on the desktop edit panel**
-
-Find the desktop edit panel wrapper (updated in Task 2 Step 3, currently around line 598):
-
-```svelte
-{#if vaultEditor.editorOpen && vaultEditor.activeChange && !isCompact.current}
-  <div
-    class="border-surface-700 flex flex-1 flex-col overflow-hidden border-r"
-    transition:fade={{ duration: 100 }}
-  >
-```
-
-Change the classes:
-
-```svelte
-{#if vaultEditor.editorOpen && vaultEditor.activeChange && !isCompact.current}
-  <div
-    class="border-surface-700 flex min-w-[28rem] flex-1 flex-col overflow-hidden border-r"
-    transition:fade={{ duration: 100 }}
-  >
-```
-
-- [ ] **Step 2: Update the chat-side column sizing when editor is open**
-
-Find the chat-side column (updated in Task 2 Step 3, currently around line 616):
-
-```svelte
-<div
-  class="flex flex-col overflow-hidden {vaultEditor.editorOpen && !isCompact.current
-    ? 'w-full max-w-2xl shrink-0'
-    : 'mx-auto w-full max-w-2xl'}"
->
-```
-
-Change the editor-open class set so chat can shrink and has a minimum:
-
-```svelte
-<div
-  class="flex flex-col overflow-hidden {vaultEditor.editorOpen && !isCompact.current
-    ? 'w-full min-w-[22rem] max-w-2xl flex-1'
-    : 'mx-auto w-full max-w-2xl'}"
->
-```
-
-Key differences:
-- `shrink-0` removed → chat is allowed to shrink below its `max-w-2xl` (672px).
-- `min-w-[22rem]` (352px) → chat won't collapse below readable width.
-- `flex-1` → chat grows to take available space up to its `max-w-2xl`.
-
-At 1024px viewport: container is 90vw = 921px. Edit panel reserves min 448px, chat takes the remaining 473px. Both usable. Above ~1344px: chat saturates at 672px, edit panel takes the rest. Below 1024px: we're in compact mode, this branch doesn't apply.
-
-- [ ] **Step 3: Type-check and lint**
-
-Run:
-
-```bash
-npm run check
-npm run lint
-```
-
-Expected: no new errors.
-
-- [ ] **Step 4: Commit**
-
-```bash
-git add src/lib/components/vault/InteractiveVaultAssistant.svelte
-git commit -m "fix: allow chat panel to shrink on narrow desktop widths"
-```
-
----
-
-## Task 9: Safe-area polish and final housekeeping
-
-**Goal:** Ensure bottom-anchored UI clears iOS home indicator / Android navigation bars on compact, and sweep for leftover unused code.
-
-**Files:**
-- Modify: `src/lib/components/vault/InteractiveVaultAssistant.svelte`
-
-- [ ] **Step 1: Apply safe-area inset to the input container on compact**
-
-Find the input-area container (currently around line 1053):
-
-```svelte
-<!-- Input area -->
-<div class="border-surface-700 bg-surface-900 border-t p-3">
-```
-
-Replace with:
-
-```svelte
-<!-- Input area -->
-<div
-  class="border-surface-700 bg-surface-900 border-t p-3"
-  style="padding-bottom: max(0.75rem, env(safe-area-inset-bottom));"
->
-```
-
-This keeps the 12px (`p-3`) padding on desktop and bumps it up to the safe-area inset on iOS devices where that's larger.
-
-- [ ] **Step 2: Sweep for unused imports and dead identifiers**
-
-Run (via Grep tool):
-- pattern `editPanelMobileRef` in the file — expected 0 matches.
-- pattern `isMobile\.` in the file — expected 0 matches.
-- pattern `Sheet\.` in the file — expected 0 matches (no usage after Task 4 Step 6).
-- pattern `from '\$lib/components/ui/sheet'` in the file — expected 0 matches.
-
-If any non-zero matches remain, clean them up.
-
-- [ ] **Step 3: Type-check and lint**
-
-Run:
-
-```bash
-npm run check
-npm run lint
-```
-
-Expected: no new errors.
-
-- [ ] **Step 4: Commit**
-
-```bash
-git add src/lib/components/vault/InteractiveVaultAssistant.svelte
-git commit -m "chore: apply safe-area inset and sweep leftover refs"
-```
-
----
-
-## Task 10: Manual smoke test
-
-**Goal:** Verify behavior end-to-end at several widths and flows, with the app actually running. This is the gate for considering the feature done.
-
-**Files:** none (verification only).
-
-- [ ] **Step 1: Start dev server**
-
-Run:
-
-```bash
-npm run dev
-```
-
-Open the browser to the printed URL.
-
-- [ ] **Step 2: Verify each viewport width**
-
-Using browser DevTools device emulation, check:
-
-- [ ] Phone portrait (~390×844, e.g. iPhone 14): full-screen dialog, no horizontal scroll, tab bar appears when a pending change exists, tap the Entity tab and the panel fills the screen.
-- [ ] Galaxy Fold outer (~344×882): same as phone — full-screen, tabs work.
-- [ ] Galaxy Fold inner (~700×900): full-screen dialog stretches edge-to-edge (NOT capped at 672px). Tabs usable.
-- [ ] Tablet portrait (~768×1024): compact layout (full-screen + tabs).
-- [ ] Tablet landscape (~1024×768): two-panel layout kicks in at exactly 1024px. Edit panel is at least 448px wide.
-- [ ] Narrow desktop window (~1100×800): two-panel layout; chat shrunk below 672px, edit panel ≥448px, both usable.
-- [ ] Wide desktop (~1920×1080): chat saturated at 672px, edit panel takes the remainder.
-
-- [ ] **Step 3: Verify compact flows (on a compact width)**
-
-- [ ] Open the Vault Assistant without a `focusedEntity`. Tab bar is absent, chat fills the viewport.
-- [ ] Send a message that should produce a pending character change ("create a new character named Alex"). Pending change arrives → Entity tab appears in the tab bar with a pulse and `1` badge. Tab does NOT auto-switch.
-- [ ] Tap Entity tab → edit panel is visible and functional. Scroll through fields, edit one, tap Approve. Change applies; if it was the last pending item, the Entity tab disappears and you fall back to Chat automatically.
-- [ ] Generate an image via the assistant. The image card appears in chat. Tap "Set Portrait" → compact switches to the Entity tab and the portrait is set on the character.
-- [ ] Open a conversation via History dropdown — if it has no active change, you land on Chat (activeTab reset works).
-- [ ] Start a new conversation — landed on Chat, no Entity tab.
-
-- [ ] **Step 4: Verify wide flows**
-
-On a wide viewport (e.g. 1280×800):
-
-- [ ] Without a pending change: single-column chat centered, no tab bar.
-- [ ] Ask AI to create a lorebook + entries. The auto-created lorebook opens on the left, then the entries appear with the edit panel still visible. Chat stays on the right at ≤672px. Neither panel below its minimum.
-- [ ] At 1024px exactly: two-panel layout renders, both panels legible. At 1023px: flips to tab layout cleanly.
-
-- [ ] **Step 5: Check console and network**
-
-DevTools → Console: no new errors or warnings attributable to this change (some pre-existing warnings may remain; ignore those).
-
-- [ ] **Step 6: If everything passes, mark complete**
-
-No commit for this step — it's verification. If any check fails, address the root cause and commit a fix; do NOT create follow-up "defer" items inside this plan.
-
----
-
-## Plan Self-Review Results
-
-**Spec coverage:** every section of the spec maps to a task above.
-
-| Spec section                         | Task(s) |
-| ------------------------------------ | ------- |
-| Breakpoints / createIsCompact        | 1       |
-| Shell branching (compact vs wide)    | 3       |
-| Tab architecture + edit panel mount  | 4       |
-| Auto-open policy (guard removal)     | 5       |
-| Auto-switch-to-chat fallback effect  | 4       |
-| Pulse + badge                        | 6       |
-| Set Portrait explicit tab switch     | 7       |
-| Narrow-desktop flex sizing           | 8       |
-| Safe-area inset                      | 9       |
-| Remove unused Sheet import/refs      | 4, 9    |
-| Manual smoke tests                   | 10      |
-
-**Type consistency:** `editPanelRef` is the sole ref name throughout after Task 4. `activeTab` values are always `'chat' | 'entity'`. `isCompact.current` is the sole layout-breakpoint reference from Task 5 onward.
-
-**No placeholders:** every code step shows the exact code. Every verification step shows exact commands and expected outputs.
diff --git a/docs/superpowers/specs/2026-04-18-vault-assistant-mobile-design.md b/docs/superpowers/specs/2026-04-18-vault-assistant-mobile-design.md
deleted file mode 100644
index e0c29a7b..00000000
--- a/docs/superpowers/specs/2026-04-18-vault-assistant-mobile-design.md
+++ /dev/null
@@ -1,166 +0,0 @@
-# Vault Assistant — Mobile & Narrow-Width Parity
-
-**Date:** 2026-04-18
-**Component:** `src/lib/components/vault/InteractiveVaultAssistant.svelte`
-**Branch:** `fix/vault-assistant-mobile`
-
-## Problem
-
-The Interactive Vault Assistant's desktop layout is a two-panel split (entity edit panel on the left, chat on the right) that gives users simultaneous access to an ongoing chat and the entity being created/modified. The mobile experience does not have feature parity:
-
-1. **Auto-open behaviors are gated to desktop.** On mobile, the entity editor never surfaces automatically when the AI proposes a change, when it calls `show_entity`, when it auto-creates a lorebook, or when a `focusedEntity` is passed in on mount. Users must manually tap an inline diff card to reach the editor.
-2. **The mobile edit sheet is a second-tier affordance.** `VaultEntityEditPanel` is rendered inside a bottom `Sheet.Root` that's only mounted when `vaultEditor.activeChange` is set. This makes `editPanelMobileRef` unreliable — e.g. the "Set Portrait" action on a generated image silently does nothing if the sheet isn't open.
-3. **Width is clipped at ~672px on small-but-not-mobile screens.** The main modal applies `max-w-2xl` even in drawer mode, so on the Galaxy Fold inner screen (~700–800px CSS width) the drawer doesn't stretch edge-to-edge. There's also a conflict between the outer `h-[90vh]` and the drawer's own `max-h-[85vh]`.
-4. **Narrow-desktop layout cramps the entity panel.** When the editor is open, the chat uses `max-w-2xl shrink-0` and the edit panel uses `flex-1`, so at viewports between ~770px and ~1280px, the chat hogs 672px and the edit panel collapses to ~100–200px — unusable.
-
-## Goals
-
-- Mobile users get the same set of functional affordances as desktop (entity editor, all auto-open triggers, Set Portrait from chat, etc.).
-- Auto-opening must not hijack the chat stream on mobile — badge/pulse discoverability only, no forced tab switches.
-- The modal stretches edge-to-edge on Fold-inner-class devices.
-- Narrow-desktop viewports (including split-screen browsers) get a working layout at every width.
-
-## Non-goals
-
-- No changes to `VaultEntityEditPanel` internals, `VaultDiffView`, the service layer, or the `vaultEditor` store API.
-- No changes to the shared `createIsMobile` hook, `ResponsiveModal` primitive, or `Drawer`/`Sheet` primitives. Other call-sites keep their current breakpoint.
-- Desktop ≥1024px two-panel layout keeps its current shape (flex behavior is tweaked, but the user-facing structure is unchanged).
-
-## Design
-
-### Breakpoints
-
-Add a new hook `createIsCompact()` at `src/lib/hooks/is-compact.svelte.ts` with a `1024px` threshold (matches Tailwind `lg`). This hook mirrors `createIsMobile`'s shape but is scoped to this component's layout decisions so bumping the threshold doesn't ripple through `ResponsiveModal`, `TemplateEditor`, or `PromptPackEditor`.
-
-```ts
-export function createIsCompact() {
-  let isCompact = $state(false)
-  onMount(() => {
-    const mql = window.matchMedia('(max-width: 1023px)')
-    const onChange = () => (isCompact = mql.matches)
-    mql.addEventListener('change', onChange)
-    isCompact = mql.matches
-    return () => mql.removeEventListener('change', onChange)
-  })
-  return {
-    get current() { return isCompact },
-  }
-}
-```
-
-The existing `isMobile` usage in `InteractiveVaultAssistant.svelte` is replaced by `isCompact`. Touch-vs-mouse input behavior (`handleKeyDown`) continues to use `isTouchDevice()` unchanged.
-
-### Shell: compact vs wide
-
-- **Wide (`!isCompact.current`)**: keep the current `ResponsiveModal` path rendering as a `Dialog`. No visual change.
-- **Compact (`isCompact.current`)**: bypass `ResponsiveModal` and render a **full-viewport `Dialog`** with `w-screen h-[100dvh] max-w-none max-h-none p-0 rounded-none`. No drawer, no width cap, no height conflict. The full-screen overlay covers the Fold-inner and tablet-width cases cleanly.
-
-Branching happens at the `InteractiveVaultAssistant.svelte` level — it renders either `<ResponsiveModal.Root>` (wide) or `<Dialog.Root>` with full-screen classes (compact). The inner content layout is shared.
-
-### Compact layout: tab architecture
-
-```
-┌─ Vault Assistant ─────── [Approve All] [✕] ─┐
-│ History ▾                                    │
-│ Pending ▾ (if any)                           │
-│ ╭─ Chat ─╮ ╭─ Entity (3) ─╮                  │   ← (n) = pending count badge
-│ ╰────────╯ ╰──────────────╯                  │      tab pulses when new change arrives
-│                                              │      while user is on Chat
-│  <active tab body: chat OR entity>           │
-│                                              │
-│  <input bar, only when active tab === chat>  │
-└──────────────────────────────────────────────┘
-```
-
-- **Segmented control** directly below the existing dropdowns (history selector and pending-list popover stay where they are).
-- **Entity tab visibility:** shown only when `vaultEditor.editorOpen && vaultEditor.activeChange` is truthy. When no active change exists, the tab bar is hidden entirely and the chat fills the viewport as today.
-- **Default tab:** `chat`. Resets to `chat` on new conversation, on conversation switch, and whenever the Entity tab disappears while active (e.g. user closed the editor from inside the panel, or the last pending change was approved/rejected and the editor closed) — a `$effect` watching `vaultEditor.editorOpen && vaultEditor.activeChange` flips `activeTab` back to `'chat'` when it goes falsy.
-- **Badge:** shows `vaultEditor.pendingCount` when >0. `0` → no badge.
-- **Pulse:** a one-shot Tailwind keyframe highlight on the Entity tab trigger for ~800ms, fired from an `$effect` watching `vaultEditor.pendingCount`. Only pulses when the increase happened while `activeTab === 'chat'`.
-- **Tab content:**
-  - *Chat tab body* = messages list (existing block) + streaming progress indicator + error banner + input bar.
-  - *Entity tab body* = `VaultEntityEditPanel` for `vaultEditor.activeChange`, filling available height. This replaces the old `Sheet.Root` path entirely; the panel is mounted inside the tab so `editPanelMobileRef` is available whenever the tab has been rendered.
-- **Input bar** is only rendered on the chat tab so the virtual keyboard never fights with the entity form. The entity form's own Approve/Reject footer (inside `VaultEntityEditPanel`) is the bottom-anchored UI on that tab.
-- **Safe area:** whichever element is at the bottom on a given tab gets `padding-bottom: env(safe-area-inset-bottom)` so content clears the iOS home indicator / Android nav bar.
-
-### Auto-open policy (compact)
-
-The `!isMobile.current` guards in `onMount`, the `tool_end` handler (new-lorebook + `openEditorSmart`), and the `show_entity` handler are **removed**. State updates to `vaultEditor` (opening the viewer, setting `activeChange`, auto-approving lorebooks) now run on all widths, so compact and wide share the same state model.
-
-Navigation is the only thing that differs:
-
-- **Wide:** state updates make the left panel visible immediately (as today).
-- **Compact:** state updates cause the Entity tab to appear in the tab bar (if not already present) and, if the change is new, the tab pulses once. **No automatic tab switch** — the user stays on whatever tab they were on.
-
-**Exception — explicit user intent:** "Set Portrait" on a chat image is a direct user action that only makes sense inside the edit panel. When tapped on compact, it switches to the Entity tab *and* applies the portrait. This replaces the current `editPanelRef ?? editPanelMobileRef` fallback and fixes the silent-failure case when neither ref is mounted.
-
-### Wide layout: narrow-desktop flex fix
-
-With editor open on wide layout (≥1024px), the current flex sizing cramps the edit panel between ~1024px and ~1344px. Change the sizing to:
-
-- **Modal container** (editor open): `max-w-[90vw]` — unchanged.
-- **Edit panel**: `flex-1 min-w-[28rem]` (adds 448px minimum).
-- **Chat panel** (editor open): `flex-1 min-w-[22rem] max-w-2xl` (replaces `w-full max-w-2xl shrink-0`). Chat can shrink below 672px down to 352px, then the edit panel's minimum kicks in.
-- **Chat panel** (editor closed): unchanged (`mx-auto w-full max-w-2xl`).
-
-At 1024px viewport: container = 90vw = 921px → chat fills the balance above 448px, edit panel fills ≥448px. Both panels remain legible at the breakpoint boundary. Above ~1344px, chat reaches its 672px max and edit panel takes the remainder, matching current behavior.
-
-### Feature-parity fixes recap
-
-| Item                                      | Current (mobile)           | After                                                              |
-| ----------------------------------------- | -------------------------- | ------------------------------------------------------------------ |
-| Auto-open focused entity on mount         | Skipped                    | Sets viewer state (Entity tab appears, doesn't switch)             |
-| Auto-open new lorebook after creation     | Skipped                    | Sets editor state (Entity tab appears, doesn't switch)             |
-| `openEditorSmart` on `tool_end`           | Skipped                    | Runs; Entity tab appears with pulse                                |
-| `openViewer` on `show_entity`             | Skipped                    | Runs; Entity tab appears with pulse                                |
-| Entity edit panel mount                   | Inside bottom `Sheet.Root` | Inside Entity tab body                                             |
-| `editPanelMobileRef`                      | Null unless sheet is open  | Mounted whenever Entity tab has rendered                           |
-| "Set Portrait" when edit panel not active | Silent no-op               | Switches to Entity tab + applies portrait                          |
-| Modal width on Fold inner (~700–800px)    | Capped at 672px            | Full viewport (`w-screen h-[100dvh]`)                              |
-| Height conflict (`90vh` vs `85vh`)        | Conflicting                | Single `h-[100dvh]` on compact, original values on wide            |
-| Narrow-desktop editor panel (1024–1344px) | ~100–200px wide            | ≥448px via `min-w-[28rem]`; chat shrinks to 352px minimum          |
-
-## Files touched
-
-**New:**
-- `src/lib/hooks/is-compact.svelte.ts`
-
-**Modified:**
-- `src/lib/components/vault/InteractiveVaultAssistant.svelte`
-  - Replace `isMobile` with `isCompact` for all layout decisions.
-  - Remove `!isMobile.current` guards on auto-open logic.
-  - Add `activeTab` state + tab bar + pulse effect (compact only).
-  - Branch shell: `ResponsiveModal` (wide) vs full-screen `Dialog` (compact).
-  - Remove the separate bottom `Sheet.Root` for the mobile edit panel.
-  - Adjust wide-layout flex sizing (`min-w-[22rem]`, `min-w-[28rem]`, drop `shrink-0`).
-  - Update `handleSetPortrait` to switch to the Entity tab when on compact.
-  - Replace `editPanelMobileRef` with a single ref used across layouts.
-
-No other files change. No store, service, or shared-primitive changes.
-
-## Testing plan
-
-Manual verification only — there are no existing unit/E2E tests for this component.
-
-**Device widths to check:**
-- Phone portrait (~390px) — tabs, full-screen, no drawer artifacts.
-- Galaxy Fold outer (~344px) and inner (~700–820px) — both should be full-width, tabs present.
-- Tablet portrait (~768px) / tablet landscape (~1024px) — compact layout up to 1024px, two-panel at 1024px exactly and above.
-- Narrow desktop window / split-screen (1024–1280px) — two-panel, edit panel ≥448px, chat shrinks.
-- Desktop (≥1344px) — two-panel at current proportions, chat ≤672px.
-
-**Flows to verify on compact:**
-- Cold start with `focusedEntity` → Entity tab appears pre-populated, stays on Chat tab.
-- AI proposes character change → Entity tab pulses, badge shows `1`, tap switches tab, edit panel functional.
-- AI calls `show_entity` → same pattern in view mode.
-- New lorebook auto-created → Entity tab appears (no pulse for auto-approved items is fine, but current behavior of auto-opening the new lorebook into editor is preserved).
-- Generate image → tap "Set Portrait" → switches to Entity tab, portrait applied.
-- Approve All from top bar works from either tab.
-- Open keyboard on Chat tab → input stays visible, no viewport jump. Switch to Entity tab while keyboard open → keyboard dismisses.
-
-## Risks & mitigations
-
-- **Vaul-svelte drawer removal on compact** — we're not modifying `ResponsiveModal`, just bypassing it for this component on compact. Other call-sites unaffected.
-- **Tab pulse feels spammy during streaming** — pulse is gated to "count increased while on chat tab" and runs at most once per change. If multi-change bursts feel noisy, we can throttle in a follow-up.
-- **`h-[100dvh]` on older browsers** — `dvh` has solid 2023+ support; Tailwind v3 emits it directly. Acceptable for target audience.
-- **Existing `Sheet.Root` import removal** — unused after refactor, will be pruned.

From 7f90e4c2a2b1950c97401320d2db484432b20209 Mon Sep 17 00:00:00 2001
From: Failerko <c.dann@seznam.cz>
Date: Sun, 19 Apr 2026 04:30:44 +0200
Subject: [PATCH 35/36] fix: review

---
 src/lib/components/ui/button/button.svelte           | 12 ++++++------
 .../vault/InteractiveVaultAssistant.svelte           |  8 ++++----
 src/lib/components/vault/VaultPanel.svelte           |  4 +++-
 src/lib/hooks/is-compact.svelte.ts                   |  3 ++-
 4 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/src/lib/components/ui/button/button.svelte b/src/lib/components/ui/button/button.svelte
index f39e0236..8cca833e 100644
--- a/src/lib/components/ui/button/button.svelte
+++ b/src/lib/components/ui/button/button.svelte
@@ -100,9 +100,9 @@
   {/if}
 
   {#if isMobile}
-    {#if mobileLabel}<span>{mobileLabel}</span>{/if}
+    {#if mobileLabel}<span data-button-label>{mobileLabel}</span>{/if}
   {:else}
-    {#if label}<span class="-translate-y-px">{label}</span>{/if}
+    {#if label}<span data-button-label class="-translate-y-px">{label}</span>{/if}
     {#if children && !label}{@render children()}{/if}
     {#if EndIcon}<EndIcon class="h-3 w-3 opacity-50" />{/if}
   {/if}
@@ -139,16 +139,16 @@
   {#if href}
     <a bind:this={ref} class={finalClass} {href} title={finalTitle} {...restProps}>
       {#if Icon}<Icon class={responsiveIconClass} />{/if}
-      {#if mobileLabel}<span class="inline sm:hidden">{mobileLabel}</span>{/if}
-      {#if label}<span class="hidden -translate-y-px sm:inline">{label}</span>{/if}
+      {#if mobileLabel}<span data-button-label class="inline sm:hidden">{mobileLabel}</span>{/if}
+      {#if label}<span data-button-label class="hidden -translate-y-px sm:inline">{label}</span>{/if}
       {#if children && !label}<span class="hidden sm:inline">{@render children()}</span>{/if}
       {#if EndIcon}<EndIcon class="hidden h-3 w-3 opacity-50 sm:inline" />{/if}
     </a>
   {:else}
     <button bind:this={ref} class={finalClass} {type} title={finalTitle} {...restProps}>
       {#if Icon}<Icon class={responsiveIconClass} />{/if}
-      {#if mobileLabel}<span class="inline sm:hidden">{mobileLabel}</span>{/if}
-      {#if label}<span class="hidden -translate-y-px sm:inline">{label}</span>{/if}
+      {#if mobileLabel}<span data-button-label class="inline sm:hidden">{mobileLabel}</span>{/if}
+      {#if label}<span data-button-label class="hidden -translate-y-px sm:inline">{label}</span>{/if}
       {#if children && !label}<span class="hidden sm:inline">{@render children()}</span>{/if}
       {#if EndIcon}<EndIcon class="hidden h-3 w-3 opacity-50 sm:inline" />{/if}
     </button>
diff --git a/src/lib/components/vault/InteractiveVaultAssistant.svelte b/src/lib/components/vault/InteractiveVaultAssistant.svelte
index d6aa8b14..1bf10a00 100644
--- a/src/lib/components/vault/InteractiveVaultAssistant.svelte
+++ b/src/lib/components/vault/InteractiveVaultAssistant.svelte
@@ -135,7 +135,7 @@
         : null,
   )
 
-  const entityTabLabel = $derived(() => {
+  const entityTabLabel = $derived.by(() => {
     const type = vaultEditor.activeChange?.entityType
     if (type === 'character') return 'Character'
     if (type === 'lorebook') return 'Lorebook'
@@ -631,7 +631,7 @@
 
     <!-- Two-panel layout -->
     <div class="flex flex-1 overflow-hidden">
-      <!-- Entity Editor Panel (left, desktop only) -->
+      <!-- Entity Editor Panel (left, wide layout only) -->
       {#if vaultEditor.editorOpen && vaultEditor.activeChange && !isCompact.current}
         <div
           class="border-surface-700 flex min-w-[28rem] flex-1 flex-col overflow-hidden border-r"
@@ -881,7 +881,7 @@
               )}
               onclick={() => (activeTab = 'entity')}
             >
-              {entityTabLabel()}
+              {entityTabLabel}
               {#if vaultEditor.pendingCount > 0}
                 <span
                   class="ml-1.5 inline-flex h-4 min-w-4 items-center justify-center rounded-full bg-emerald-500/20 px-1 text-[10px] font-bold text-emerald-300"
@@ -1164,7 +1164,7 @@
             </div>
           </div>
         {:else}
-          <!-- Entity tab body (compact width only; wide width shows the left panel instead) -->
+          <!-- Entity tab body (compact only) -->
           {#if vaultEditor.activeChange}
             <div class="flex min-h-0 flex-1 flex-col overflow-hidden">
               <VaultEntityEditPanel
diff --git a/src/lib/components/vault/VaultPanel.svelte b/src/lib/components/vault/VaultPanel.svelte
index 7f22ee82..d6b8018d 100644
--- a/src/lib/components/vault/VaultPanel.svelte
+++ b/src/lib/components/vault/VaultPanel.svelte
@@ -426,7 +426,9 @@
       </div>
 
       <!-- Right Side Actions -->
-      <div class="flex flex-1 items-center justify-end gap-2 [&_span]:max-lg:!hidden">
+      <div
+        class="flex flex-1 items-center justify-end gap-2 [&_[data-button-label]]:max-lg:!hidden"
+      >
         <Button
           icon={Bot}
           label="Vault Assistant"
diff --git a/src/lib/hooks/is-compact.svelte.ts b/src/lib/hooks/is-compact.svelte.ts
index ee5693ff..3325d68a 100644
--- a/src/lib/hooks/is-compact.svelte.ts
+++ b/src/lib/hooks/is-compact.svelte.ts
@@ -2,7 +2,8 @@ import { onMount } from 'svelte'
 
 /**
  * Layout breakpoint hook for components that need a tighter "compact" threshold
- * than the 768px `createIsMobile` gives. Fires true below 1024px (Tailwind lg).
+ * than the 768px `createIsMobile` gives. Returns true at widths <= 1023px
+ * (i.e. below the Tailwind `lg` breakpoint at 1024px).
  */
 export function createIsCompact() {
   let isCompact = $state(false)

From 9ae210a0516f93211bd2b2f98f241c0c6074049d Mon Sep 17 00:00:00 2001
From: Failerko <c.dann@seznam.cz>
Date: Sun, 19 Apr 2026 04:31:48 +0200
Subject: [PATCH 36/36] fix: lint

---
 src/lib/components/ui/button/button.svelte | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/ui/button/button.svelte b/src/lib/components/ui/button/button.svelte
index 8cca833e..48e08892 100644
--- a/src/lib/components/ui/button/button.svelte
+++ b/src/lib/components/ui/button/button.svelte
@@ -140,7 +140,8 @@
     <a bind:this={ref} class={finalClass} {href} title={finalTitle} {...restProps}>
       {#if Icon}<Icon class={responsiveIconClass} />{/if}
       {#if mobileLabel}<span data-button-label class="inline sm:hidden">{mobileLabel}</span>{/if}
-      {#if label}<span data-button-label class="hidden -translate-y-px sm:inline">{label}</span>{/if}
+      {#if label}<span data-button-label class="hidden -translate-y-px sm:inline">{label}</span
+        >{/if}
       {#if children && !label}<span class="hidden sm:inline">{@render children()}</span>{/if}
       {#if EndIcon}<EndIcon class="hidden h-3 w-3 opacity-50 sm:inline" />{/if}
     </a>
@@ -148,7 +149,8 @@
     <button bind:this={ref} class={finalClass} {type} title={finalTitle} {...restProps}>
       {#if Icon}<Icon class={responsiveIconClass} />{/if}
       {#if mobileLabel}<span data-button-label class="inline sm:hidden">{mobileLabel}</span>{/if}
-      {#if label}<span data-button-label class="hidden -translate-y-px sm:inline">{label}</span>{/if}
+      {#if label}<span data-button-label class="hidden -translate-y-px sm:inline">{label}</span
+        >{/if}
       {#if children && !label}<span class="hidden sm:inline">{@render children()}</span>{/if}
       {#if EndIcon}<EndIcon class="hidden h-3 w-3 opacity-50 sm:inline" />{/if}
     </button>