From 0e0ed5ddaa573cbeaa3d15387b385e92c6e4bf21 Mon Sep 17 00:00:00 2001
From: Denys <koreybadenis@gmail.com>
Date: Sat, 1 Aug 2026 19:56:19 +0200
Subject: [PATCH 01/23] feat(notes): add workspace note tabs

---
 core/services/noteWorkspaceTabs.ts            | 314 +++++++++++
 .../core-services-noteWorkspaceTabs.test.ts   | 146 +++++
 .../features/mobile/MobileLayout.cy.tsx       |  20 +
 .../2026-08-01-feature-notes-tabs.md          |  37 ++
 .../design/2026-08-01-feature-notes-tabs.md   | 165 ++++++
 .../2026-08-01-feature-notes-tabs.md          |  76 +++
 .../2026-08-01-feature-notes-tabs.md          |  37 ++
 .../planning/2026-08-01-feature-notes-tabs.md |  94 ++++
 .../2026-08-01-feature-notes-tabs.md          |  84 +++
 .../testing/2026-08-01-feature-notes-tabs.md  |  86 +++
 ui/web/components/RichTextEditor.tsx          |  14 +
 .../features/notes/MobileNotesTabMenu.tsx     |  99 ++++
 .../components/features/notes/NoteEditor.tsx  |  87 ++-
 ui/web/components/features/notes/NoteView.tsx |  19 +-
 .../components/features/notes/NotesShell.tsx  |  97 ++--
 .../features/notes/NotesTabStrip.tsx          | 147 +++++
 ui/web/hooks/useNoteAppController.ts          | 506 ++++++++++++++----
 ui/web/hooks/useNoteWorkspaceTabs.ts          |  69 +++
 ui/web/lib/noteWorkspaceStorage.ts            |  56 ++
 .../components/notesWorkspaceTabs.test.tsx    | 103 ++++
 ...useNoteAppController.remoteDelete.test.tsx |   1 +
 .../useNoteAppControllerAdditional.test.tsx   |   7 +-
 .../unit/lib/noteWorkspaceStorage.test.ts     |  68 +++
 23 files changed, 2180 insertions(+), 152 deletions(-)
 create mode 100644 core/services/noteWorkspaceTabs.ts
 create mode 100644 core/tests/unit/core-services-noteWorkspaceTabs.test.ts
 create mode 100644 docs/ai/deployment/2026-08-01-feature-notes-tabs.md
 create mode 100644 docs/ai/design/2026-08-01-feature-notes-tabs.md
 create mode 100644 docs/ai/implementation/2026-08-01-feature-notes-tabs.md
 create mode 100644 docs/ai/monitoring/2026-08-01-feature-notes-tabs.md
 create mode 100644 docs/ai/planning/2026-08-01-feature-notes-tabs.md
 create mode 100644 docs/ai/requirements/2026-08-01-feature-notes-tabs.md
 create mode 100644 docs/ai/testing/2026-08-01-feature-notes-tabs.md
 create mode 100644 ui/web/components/features/notes/MobileNotesTabMenu.tsx
 create mode 100644 ui/web/components/features/notes/NotesTabStrip.tsx
 create mode 100644 ui/web/hooks/useNoteWorkspaceTabs.ts
 create mode 100644 ui/web/lib/noteWorkspaceStorage.ts
 create mode 100644 ui/web/tests/unit/components/notesWorkspaceTabs.test.tsx
 create mode 100644 ui/web/tests/unit/lib/noteWorkspaceStorage.test.ts

diff --git a/core/services/noteWorkspaceTabs.ts b/core/services/noteWorkspaceTabs.ts
new file mode 100644
index 00000000000..d4c7d1ba50f
--- /dev/null
+++ b/core/services/noteWorkspaceTabs.ts
@@ -0,0 +1,314 @@
+import type { NoteViewModel } from '@core/types/domain'
+
+export const NOTE_WORKSPACE_VERSION = 1 as const
+
+export type NoteWorkspaceMode = 'reading' | 'editing'
+export type NoteWorkspaceSaveState = 'saved' | 'dirty' | 'saving' | 'error'
+
+export type NoteDraftSnapshot = {
+  title: string
+  description: string
+  tags: string
+}
+
+export type NoteViewSession = {
+  scrollTop: number
+  titleSelection?: { start: number; end: number }
+  editorSelection?: { from: number; to: number }
+}
+
+export type NoteWorkspaceTab = {
+  id: string
+  noteId: string | null
+  note: NoteViewModel | null
+  mode: NoteWorkspaceMode
+  draft: NoteDraftSnapshot
+  view: NoteViewSession
+  saveState: NoteWorkspaceSaveState
+  saveError: string | null
+}
+
+export type NoteWorkspaceState = {
+  version: typeof NOTE_WORKSPACE_VERSION
+  tabs: NoteWorkspaceTab[]
+  activeTabId: string
+}
+
+export type NoteWorkspaceTabPatch = {
+  note?: NoteViewModel | null
+  noteId?: string | null
+  mode?: NoteWorkspaceMode
+  draft?: Partial<NoteDraftSnapshot>
+  view?: Partial<NoteViewSession>
+  saveState?: NoteWorkspaceSaveState
+  saveError?: string | null
+}
+
+export type NoteWorkspaceIdFactory = () => string
+
+const DEFAULT_DRAFT: NoteDraftSnapshot = { title: '', description: '', tags: '' }
+const DEFAULT_VIEW: NoteViewSession = { scrollTop: 0 }
+
+const defaultIdFactory: NoteWorkspaceIdFactory = () => {
+  if (typeof globalThis.crypto?.randomUUID === 'function') {
+    return globalThis.crypto.randomUUID()
+  }
+  return `note-tab-${Date.now()}-${Math.random().toString(36).slice(2)}`
+}
+
+const asString = (value: unknown, fallback: string): string => (
+  typeof value === 'string' ? value : fallback
+)
+
+const asNonNegativeFiniteNumber = (value: unknown, fallback: number): number => (
+  typeof value === 'number' && Number.isFinite(value) && value >= 0 ? value : fallback
+)
+
+const asRange = (value: unknown, key: 'from' | 'to' | 'start' | 'end'): number | undefined => {
+  if (!value || typeof value !== 'object') return undefined
+  const candidate = (value as Record<string, unknown>)[key]
+  return typeof candidate === 'number' && Number.isInteger(candidate) && candidate >= 0
+    ? candidate
+    : undefined
+}
+
+const normalizeRange = <T extends 'titleSelection' | 'editorSelection'>(
+  value: unknown,
+  kind: T,
+): NoteViewSession[T] | undefined => {
+  const from = asRange(value, kind === 'titleSelection' ? 'start' : 'from')
+  const to = asRange(value, kind === 'titleSelection' ? 'end' : 'to')
+  if (from === undefined || to === undefined || to < from) return undefined
+  return (kind === 'titleSelection'
+    ? { start: from, end: to }
+    : { from, to }) as NoteViewSession[T]
+}
+
+const draftFromNote = (note: NoteViewModel | null): NoteDraftSnapshot => ({
+  title: note?.title ?? '',
+  description: note?.description ?? note?.content ?? '',
+  tags: note?.tags?.join(', ') ?? '',
+})
+
+const createEmptyTab = (idFactory: NoteWorkspaceIdFactory): NoteWorkspaceTab => ({
+  id: idFactory(),
+  noteId: null,
+  note: null,
+  // An empty workspace tab is a landing slot. Creating a note explicitly
+  // switches it to editing; opening a note switches it to reading.
+  mode: 'reading',
+  draft: { ...DEFAULT_DRAFT },
+  view: { ...DEFAULT_VIEW },
+  saveState: 'saved',
+  saveError: null,
+})
+
+const createNoteTab = (id: string, note: NoteViewModel): NoteWorkspaceTab => ({
+  id,
+  noteId: note.id,
+  note,
+  mode: 'reading',
+  draft: draftFromNote(note),
+  view: { ...DEFAULT_VIEW },
+  saveState: 'saved',
+  saveError: null,
+})
+
+export function createNoteWorkspaceState(idFactory: NoteWorkspaceIdFactory = defaultIdFactory): NoteWorkspaceState {
+  const tab = createEmptyTab(idFactory)
+  return {
+    version: NOTE_WORKSPACE_VERSION,
+    tabs: [tab],
+    activeTabId: tab.id,
+  }
+}
+
+export function getActiveWorkspaceTab(state: NoteWorkspaceState): NoteWorkspaceTab {
+  return state.tabs.find((tab) => tab.id === state.activeTabId) ?? state.tabs[0]!
+}
+
+export function findWorkspaceTabByNoteId(
+  state: NoteWorkspaceState,
+  noteId: string | null | undefined,
+): NoteWorkspaceTab | null {
+  if (!noteId) return null
+  return state.tabs.find((tab) => tab.noteId === noteId) ?? null
+}
+
+export function addWorkspaceTab(
+  state: NoteWorkspaceState,
+  idFactory: NoteWorkspaceIdFactory = defaultIdFactory,
+): NoteWorkspaceState {
+  const tab = createEmptyTab(idFactory)
+  return {
+    ...state,
+    tabs: [...state.tabs, tab],
+    activeTabId: tab.id,
+  }
+}
+
+export function activateWorkspaceTab(state: NoteWorkspaceState, tabId: string): NoteWorkspaceState {
+  if (!state.tabs.some((tab) => tab.id === tabId) || state.activeTabId === tabId) return state
+  return { ...state, activeTabId: tabId }
+}
+
+export function openNoteInWorkspace(
+  state: NoteWorkspaceState,
+  note: NoteViewModel,
+  tabId: string = state.activeTabId,
+): NoteWorkspaceState {
+  const existing = findWorkspaceTabByNoteId(state, note.id)
+  if (existing) return activateWorkspaceTab(state, existing.id)
+
+  const index = state.tabs.findIndex((tab) => tab.id === tabId)
+  if (index < 0) return state
+
+  const current = state.tabs[index]
+  const nextTab = createNoteTab(current.id, note)
+  const tabs = [...state.tabs]
+  tabs[index] = nextTab
+  return { ...state, tabs, activeTabId: nextTab.id }
+}
+
+export function updateWorkspaceTab(
+  state: NoteWorkspaceState,
+  tabId: string,
+  patch: NoteWorkspaceTabPatch,
+): NoteWorkspaceState {
+  const index = state.tabs.findIndex((tab) => tab.id === tabId)
+  if (index < 0) return state
+
+  const current = state.tabs[index]
+  const nextNote = patch.note === undefined ? current.note : patch.note
+  const nextNoteId = patch.noteId === undefined ? (nextNote?.id ?? current.noteId) : patch.noteId
+  const normalizedNoteId = nextNote ? nextNote.id : nextNoteId
+  const nextTab: NoteWorkspaceTab = {
+    ...current,
+    ...patch,
+    note: nextNote,
+    noteId: normalizedNoteId ?? null,
+    draft: patch.draft ? { ...current.draft, ...patch.draft } : current.draft,
+    view: patch.view ? { ...current.view, ...patch.view } : current.view,
+    saveError: patch.saveError === undefined ? current.saveError : patch.saveError,
+  }
+
+  if (!nextTab.noteId) nextTab.note = null
+  if (nextTab.saveState !== 'error' && patch.saveError === undefined && patch.saveState !== 'error') {
+    nextTab.saveError = null
+  }
+
+  const tabs = [...state.tabs]
+  tabs[index] = nextTab
+  return { ...state, tabs }
+}
+
+export function closeWorkspaceTab(
+  state: NoteWorkspaceState,
+  tabId: string,
+  idFactory: NoteWorkspaceIdFactory = defaultIdFactory,
+): NoteWorkspaceState {
+  const index = state.tabs.findIndex((tab) => tab.id === tabId)
+  if (index < 0) return state
+
+  if (state.tabs.length === 1) {
+    const replacement = createEmptyTab(idFactory)
+    return { ...state, tabs: [replacement], activeTabId: replacement.id }
+  }
+
+  const wasActive = state.activeTabId === tabId
+  const tabs = state.tabs.filter((tab) => tab.id !== tabId)
+  if (!wasActive) return { ...state, tabs }
+
+  const nextActive = state.tabs[index + 1] ?? state.tabs[index - 1]
+  return { ...state, tabs, activeTabId: nextActive.id }
+}
+
+const normalizeNote = (value: unknown): NoteViewModel | null => {
+  if (!value || typeof value !== 'object') return null
+  const candidate = value as Record<string, unknown>
+  return typeof candidate.id === 'string' && candidate.id.length > 0
+    ? value as NoteViewModel
+    : null
+}
+
+const normalizeTab = (
+  value: unknown,
+  idFactory: NoteWorkspaceIdFactory,
+  usedTabIds: Set<string>,
+): NoteWorkspaceTab | null => {
+  if (!value || typeof value !== 'object') return null
+  const raw = value as Record<string, unknown>
+  let id = typeof raw.id === 'string' && raw.id.length > 0 ? raw.id : idFactory()
+  while (usedTabIds.has(id)) id = idFactory()
+  usedTabIds.add(id)
+
+  const note = normalizeNote(raw.note)
+  const rawNoteId = typeof raw.noteId === 'string' && raw.noteId.length > 0 ? raw.noteId : null
+  const noteId = note?.id ?? rawNoteId
+  const rawDraft = raw.draft && typeof raw.draft === 'object' ? raw.draft as Record<string, unknown> : {}
+  const rawView = raw.view && typeof raw.view === 'object' ? raw.view as Record<string, unknown> : {}
+  const titleSelection = normalizeRange(rawView.titleSelection, 'titleSelection')
+  const editorSelection = normalizeRange(rawView.editorSelection, 'editorSelection')
+
+  return {
+    id,
+    noteId,
+    note: noteId && note?.id === noteId ? note : null,
+    mode: raw.mode === 'reading' ? 'reading' : 'editing',
+    draft: {
+      title: asString(rawDraft.title, note?.title ?? ''),
+      description: asString(rawDraft.description, note?.description ?? note?.content ?? ''),
+      tags: asString(rawDraft.tags, note?.tags?.join(', ') ?? ''),
+    },
+    view: {
+      scrollTop: asNonNegativeFiniteNumber(rawView.scrollTop, 0),
+      ...(titleSelection ? { titleSelection } : {}),
+      ...(editorSelection ? { editorSelection } : {}),
+    },
+    saveState: raw.saveState === 'dirty' || raw.saveState === 'saving' || raw.saveState === 'error'
+      ? raw.saveState
+      : 'saved',
+    saveError: typeof raw.saveError === 'string' ? raw.saveError : null,
+  }
+}
+
+export function hydrateNoteWorkspaceState(
+  raw: unknown,
+  idFactory: NoteWorkspaceIdFactory = defaultIdFactory,
+): NoteWorkspaceState {
+  let parsed: unknown = raw
+  if (typeof raw === 'string') {
+    try {
+      parsed = JSON.parse(raw) as unknown
+    } catch {
+      return createNoteWorkspaceState(idFactory)
+    }
+  }
+
+  if (!parsed || typeof parsed !== 'object') return createNoteWorkspaceState(idFactory)
+  const source = parsed as Record<string, unknown>
+  if (source.version !== NOTE_WORKSPACE_VERSION || !Array.isArray(source.tabs)) {
+    return createNoteWorkspaceState(idFactory)
+  }
+
+  const usedTabIds = new Set<string>()
+  const usedNoteIds = new Set<string>()
+  const tabs = source.tabs
+    .map((tab) => normalizeTab(tab, idFactory, usedTabIds))
+    .filter((tab): tab is NoteWorkspaceTab => tab !== null)
+    .filter((tab) => {
+      if (!tab.noteId) return true
+      if (usedNoteIds.has(tab.noteId)) return false
+      usedNoteIds.add(tab.noteId)
+      return true
+    })
+
+  if (tabs.length === 0) return createNoteWorkspaceState(idFactory)
+  const requestedActive = typeof source.activeTabId === 'string' ? source.activeTabId : ''
+  const activeTabId = tabs.some((tab) => tab.id === requestedActive) ? requestedActive : tabs[0].id
+  return { version: NOTE_WORKSPACE_VERSION, tabs, activeTabId }
+}
+
+export function serializeNoteWorkspaceState(state: NoteWorkspaceState): string {
+  return JSON.stringify(state)
+}
diff --git a/core/tests/unit/core-services-noteWorkspaceTabs.test.ts b/core/tests/unit/core-services-noteWorkspaceTabs.test.ts
new file mode 100644
index 00000000000..b4d5234d0e5
--- /dev/null
+++ b/core/tests/unit/core-services-noteWorkspaceTabs.test.ts
@@ -0,0 +1,146 @@
+import type { NoteViewModel } from '@core/types/domain'
+import {
+  activateWorkspaceTab,
+  addWorkspaceTab,
+  closeWorkspaceTab,
+  createNoteWorkspaceState,
+  findWorkspaceTabByNoteId,
+  getActiveWorkspaceTab,
+  hydrateNoteWorkspaceState,
+  openNoteInWorkspace,
+  serializeNoteWorkspaceState,
+  updateWorkspaceTab,
+} from '@core/services/noteWorkspaceTabs'
+
+const note = (id: string, title = id): NoteViewModel => ({
+  id,
+  title,
+  description: `<p>${title}</p>`,
+  tags: ['work'],
+  created_at: '2026-08-01T00:00:00.000Z',
+  updated_at: '2026-08-01T00:00:00.000Z',
+  user_id: 'user-1',
+})
+
+const ids = (...values: string[]) => {
+  let index = 0
+  return () => values[index++] ?? `generated-${index}`
+}
+
+describe('note workspace tab state', () => {
+  it('creates one blank active landing tab', () => {
+    const state = createNoteWorkspaceState(ids('tab-1'))
+
+    expect(state.tabs).toHaveLength(1)
+    expect(getActiveWorkspaceTab(state)).toMatchObject({
+      id: 'tab-1',
+      noteId: null,
+      mode: 'reading',
+      saveState: 'saved',
+    })
+  })
+
+  it('adds and activates a blank tab while preserving the first tab', () => {
+    const first = createNoteWorkspaceState(ids('tab-1'))
+    const state = addWorkspaceTab(first, ids('tab-2'))
+
+    expect(state.tabs.map((tab) => tab.id)).toEqual(['tab-1', 'tab-2'])
+    expect(state.activeTabId).toBe('tab-2')
+    expect(state.tabs[0]).toBe(first.tabs[0])
+  })
+
+  it('replaces the active tab when opening a new note', () => {
+    const first = createNoteWorkspaceState(ids('tab-1'))
+    const state = openNoteInWorkspace(first, note('note-1', 'First'))
+
+    expect(state.tabs).toHaveLength(1)
+    expect(getActiveWorkspaceTab(state)).toMatchObject({
+      id: 'tab-1',
+      noteId: 'note-1',
+      mode: 'reading',
+      draft: { title: 'First', description: '<p>First</p>', tags: 'work' },
+    })
+  })
+
+  it('activates an existing note tab instead of creating a duplicate', () => {
+    let state = createNoteWorkspaceState(ids('tab-1'))
+    state = openNoteInWorkspace(state, note('note-1'))
+    state = addWorkspaceTab(state, ids('tab-2'))
+    const deduplicated = openNoteInWorkspace(state, note('note-1'))
+
+    expect(deduplicated.tabs).toHaveLength(2)
+    expect(deduplicated.activeTabId).toBe('tab-1')
+    expect(findWorkspaceTabByNoteId(deduplicated, 'note-1')?.id).toBe('tab-1')
+  })
+
+  it('updates draft, view, and failed-save state without changing tab identity', () => {
+    const state = createNoteWorkspaceState(ids('tab-1'))
+    const updated = updateWorkspaceTab(state, 'tab-1', {
+      draft: { title: 'Draft title' },
+      view: { scrollTop: 240, editorSelection: { from: 3, to: 7 } },
+      saveState: 'error',
+      saveError: 'network unavailable',
+    })
+
+    expect(getActiveWorkspaceTab(updated)).toMatchObject({
+      id: 'tab-1',
+      draft: { title: 'Draft title', description: '', tags: '' },
+      view: { scrollTop: 240, editorSelection: { from: 3, to: 7 } },
+      saveState: 'error',
+      saveError: 'network unavailable',
+    })
+  })
+
+  it('closes the active tab and prefers the right neighbor, then the left neighbor', () => {
+    let state = createNoteWorkspaceState(ids('tab-1'))
+    state = addWorkspaceTab(state, ids('tab-2'))
+    state = addWorkspaceTab(state, ids('tab-3'))
+
+    const afterMiddleClose = closeWorkspaceTab(activateWorkspaceTab(state, 'tab-2'), 'tab-2', ids('replacement'))
+    expect(afterMiddleClose.tabs.map((tab) => tab.id)).toEqual(['tab-1', 'tab-3'])
+    expect(afterMiddleClose.activeTabId).toBe('tab-3')
+
+    const afterRightmostClose = closeWorkspaceTab(activateWorkspaceTab(afterMiddleClose, 'tab-3'), 'tab-3', ids('replacement'))
+    expect(afterRightmostClose.activeTabId).toBe('tab-1')
+  })
+
+  it('keeps one blank active tab when the last tab closes', () => {
+    const state = createNoteWorkspaceState(ids('tab-1'))
+    const closed = closeWorkspaceTab(state, 'tab-1', ids('tab-replacement'))
+
+    expect(closed.tabs).toHaveLength(1)
+    expect(getActiveWorkspaceTab(closed)).toMatchObject({ id: 'tab-replacement', noteId: null })
+  })
+
+  it('round-trips valid state and rejects malformed or duplicate persisted tabs', () => {
+    let state = openNoteInWorkspace(createNoteWorkspaceState(ids('tab-1')), note('note-1'))
+    state = addWorkspaceTab(state, ids('tab-2'))
+    state = updateWorkspaceTab(state, 'tab-2', { note: note('note-2'), mode: 'editing' })
+
+    const restored = hydrateNoteWorkspaceState(serializeNoteWorkspaceState(state), ids('restored'))
+    expect(restored).toEqual(state)
+
+    const duplicate = hydrateNoteWorkspaceState({
+      version: 1,
+      activeTabId: 'tab-1',
+      tabs: [
+        { ...state.tabs[0] },
+        { ...state.tabs[1], id: 'tab-3', noteId: 'note-1' },
+      ],
+    }, ids('restored'))
+    expect(duplicate.tabs.map((tab) => tab.noteId)).toEqual(['note-1', 'note-2'])
+    expect(duplicate.tabs.filter((tab) => tab.noteId === 'note-1')).toHaveLength(1)
+
+    const malformed = hydrateNoteWorkspaceState('{not-json', ids('fallback'))
+    expect(malformed.tabs).toHaveLength(1)
+    expect(malformed.activeTabId).toBe('fallback')
+  })
+
+  it('ignores activation and updates for unknown tab IDs', () => {
+    const state = createNoteWorkspaceState(ids('tab-1'))
+
+    expect(activateWorkspaceTab(state, 'missing')).toBe(state)
+    expect(updateWorkspaceTab(state, 'missing', { mode: 'reading' })).toBe(state)
+    expect(findWorkspaceTabByNoteId(state, null)).toBeNull()
+  })
+})
diff --git a/cypress/component/features/mobile/MobileLayout.cy.tsx b/cypress/component/features/mobile/MobileLayout.cy.tsx
index 81a21c434ca..67260a29d7e 100644
--- a/cypress/component/features/mobile/MobileLayout.cy.tsx
+++ b/cypress/component/features/mobile/MobileLayout.cy.tsx
@@ -3,6 +3,7 @@ import { NotesShell } from '../../../../ui/web/components/features/notes/NotesSh
 import type { NoteAppController } from '../../../../ui/web/hooks/useNoteAppController'
 import { SupabaseTestProvider } from '../../../../ui/web/providers/SupabaseProvider'
 import type { SupabaseClient } from '@supabase/supabase-js'
+import type { NoteWorkspaceTab } from '../../../../core/services/noteWorkspaceTabs'
 import { ThemeProvider } from '../../../../ui/web/components/theme-provider'
 
 describe('Mobile Layout Adaptation', () => {
@@ -16,6 +17,16 @@ describe('Mobile Layout Adaptation', () => {
     createMockController = (overrides: Partial<NoteAppController> = {}): NoteAppController => {
       const handleSelectNote = cy.stub().as('handleSelectNote')
       handleSelectNote.resolves()
+      const activeTab: NoteWorkspaceTab = {
+        id: 'test-tab',
+        noteId: null,
+        note: null,
+        mode: 'reading',
+        draft: { title: '', description: '', tags: '' },
+        view: { scrollTop: 0 },
+        saveState: 'saved',
+        saveError: null,
+      }
 
       return ({
       activeMainView: 'notes',
@@ -31,6 +42,14 @@ describe('Mobile Layout Adaptation', () => {
       notesQuery: { isLoading: false, hasNextPage: false, isFetchingNextPage: false, fetchNextPage: cy.stub() } as any,
       selectedNote: null,
       isEditing: false,
+      tabs: [activeTab],
+      activeTabId: activeTab.id,
+      activeTab,
+      addTab: cy.stub().resolves(),
+      activateTab: cy.stub().resolves(),
+      closeTab: cy.stub().resolves(),
+      handleDraftChange: cy.stub(),
+      handleViewSessionChange: cy.stub(),
       setIsEditing: cy.stub(),
       isSearchPanelOpen: false,
       setIsSearchPanelOpen: cy.stub(),
@@ -101,6 +120,7 @@ describe('Mobile Layout Adaptation', () => {
       ...overrides,
 
       // Required by controller type (used by NotesShell to register editor ref)
+      notePaneVisible: overrides.notePaneVisible ?? Boolean(overrides.selectedNote || overrides.isEditing),
       registerNoteEditorRef: overrides.registerNoteEditorRef ?? cy.stub(),
       resetFtsResults: overrides.resetFtsResults ?? cy.stub(),
       resetAIResults: overrides.resetAIResults ?? cy.stub(),
diff --git a/docs/ai/deployment/2026-08-01-feature-notes-tabs.md b/docs/ai/deployment/2026-08-01-feature-notes-tabs.md
new file mode 100644
index 00000000000..d4bfcb1f620
--- /dev/null
+++ b/docs/ai/deployment/2026-08-01-feature-notes-tabs.md
@@ -0,0 +1,37 @@
+---
+phase: deployment
+title: Deployment Strategy
+description: Define deployment process, infrastructure, and release procedures
+---
+
+# Deployment Strategy
+
+## Infrastructure
+
+No new infrastructure or database schema is required. The feature runs in the existing Next.js web bundle and existing native mobile bundle.
+
+## Deployment Pipeline
+
+- Run production type-check, ESLint, focused tests, and existing build checks in CI.
+- No migration step is required because workspace state is client-side and versioned.
+- The versioned storage key must support safe fallback when users load a new bundle over an older session snapshot.
+
+## Environment Configuration
+
+No new secrets or environment variables are required.
+
+## Deployment Steps
+
+1. Complete implementation/design/test review.
+2. Run web and mobile validation independently.
+3. Build the existing release artifacts.
+4. Smoke-test Notes tab creation, switching, close, reload, and save failure.
+5. Release through the existing pipeline.
+
+## Database Migrations
+
+None.
+
+## Rollback Plan
+
+Rollback is a normal application bundle rollback. A newer invalid workspace snapshot is ignored by version/schema validation, so it cannot prevent the Notes page from opening.
diff --git a/docs/ai/design/2026-08-01-feature-notes-tabs.md b/docs/ai/design/2026-08-01-feature-notes-tabs.md
new file mode 100644
index 00000000000..b7a416af799
--- /dev/null
+++ b/docs/ai/design/2026-08-01-feature-notes-tabs.md
@@ -0,0 +1,165 @@
+---
+phase: design
+title: System Design & Architecture
+description: Define the technical architecture, components, and data models
+---
+
+# System Design & Architecture
+
+## Architecture Overview
+
+```mermaid
+graph TD
+  Controller[useNoteAppController] --> Workspace[useNoteWorkspaceTabs]
+  Workspace --> Reducer[Pure workspace reducer and invariants]
+  Workspace --> Storage[Session workspace storage adapter]
+  Controller --> Flush[Editor flush and session capture]
+  Flush --> Workspace
+  Controller --> TabStrip[Desktop NotesTabStrip]
+  Controller --> MobileTabs[Compact MobileTabsList]
+  Controller --> EditorPane[EditorPane]
+  EditorPane --> NoteEditor[NoteEditor]
+  EditorPane --> NoteView[NoteView]
+  NoteEditor --> Autosave[useNoteEditorAutoSave]
+  Autosave --> SaveHandlers[useNoteSaveHandlers]
+  SaveHandlers --> Offline[Offline cache and sync queue]
+  Controller --> Selection[Notes list, search, tags, internal-open flows]
+  Selection --> Controller
+```
+
+`useNoteWorkspaceTabs` owns tab identity, ordering, active-tab selection, session snapshots, deduplication, and storage hydration. `useNoteAppController` remains the only navigation/write integration point: it flushes/captures the old tab, applies the reducer transition, and synchronizes the existing selected-note/editor API for the rest of the UI.
+
+## Data Models
+
+```ts
+type NoteWorkspaceMode = 'reading' | 'editing'
+type NoteSaveState = 'saved' | 'dirty' | 'saving' | 'error'
+
+type NoteDraftSnapshot = {
+  title: string
+  description: string
+  tags: string
+}
+
+type NoteViewSession = {
+  scrollTop: number
+  titleSelection?: { start: number; end: number }
+  editorSelection?: { from: number; to: number }
+}
+
+type NoteWorkspaceTab = {
+  id: string
+  noteId: string | null
+  note: NoteViewModel | null
+  mode: NoteWorkspaceMode
+  draft: NoteDraftSnapshot
+  view: NoteViewSession
+  saveState: NoteSaveState
+  saveError: string | null
+}
+
+type NoteWorkspaceState = {
+  version: 1
+  tabs: NoteWorkspaceTab[]
+  activeTabId: string
+}
+```
+
+The persisted JSON contains only serializable values. Runtime refs, promises, React elements, and editor instances are never persisted. A tab with `noteId: null` is a blank working slot; a saved note tab stores a lightweight note snapshot so a reload can render immediately while existing note-opening/revalidation logic remains authoritative.
+
+### Invariants
+
+- `tabs.length >= 1`.
+- `activeTabId` always points to a tab.
+- At most one tab has a given non-null `noteId`.
+- A blank tab has `note === null` and `noteId === null`.
+- Closing an active tab applies right-neighbor-then-left-neighbor selection.
+- Invalid persisted records are discarded rather than partially applied.
+
+## API Design
+
+The pure reducer/service exposes deterministic operations that both web and native presentation layers can use:
+
+```ts
+createWorkspaceState(idFactory?): NoteWorkspaceState
+hydrateWorkspaceState(raw, idFactory?): NoteWorkspaceState
+addWorkspaceTab(state, idFactory?): NoteWorkspaceState
+activateWorkspaceTab(state, tabId): NoteWorkspaceState
+openNoteInWorkspace(state, note, tabId?): NoteWorkspaceState
+closeWorkspaceTab(state, tabId): NoteWorkspaceState
+updateWorkspaceTab(state, tabId, patch): NoteWorkspaceState
+findWorkspaceTabByNoteId(state, noteId): NoteWorkspaceTab | null
+```
+
+The React hook adds hydration/persistence and stable callbacks. Controller integration adds asynchronous operations around the reducer:
+
+1. `flushPendingEditorSave()` waits for the current autosave pipeline.
+2. `captureActiveSession()` reads the current editor/view draft and writes it to the active tab.
+3. The transition is applied (`activate`, `open`, `add`, or `close`).
+4. The controller synchronizes `selectedNote`/`isEditing` for existing consumers.
+
+## Component Breakdown
+
+| Area | Component/module | Responsibility |
+|---|---|---|
+| Shared model | `core/services/noteWorkspaceTabs.ts` | Types, invariants, reducer operations, safe hydration |
+| Web persistence | `ui/web/lib/noteWorkspaceStorage.ts` | `sessionStorage` adapter, version/key/quota handling |
+| Web hook | `ui/web/hooks/useNoteWorkspaceTabs.ts` | React state, hydration, persistence, stable actions |
+| Desktop UI | `ui/web/components/features/notes/NotesTabStrip.tsx` | Horizontal tabs, add/close, active and save indicators |
+| Mobile web UI | `ui/web/components/features/notes/MobileTabsList.tsx` | Active-tab summary and compact switch/close sheet/list |
+| Controller | `ui/web/hooks/useNoteAppController.ts` | Flush/capture/transition; routes every note-open path through tabs |
+| Editor session | `NoteEditor.tsx`, `RichTextEditor.tsx` | Capture/restore draft, scroll, caret/selection |
+| Reading session | `NoteView.tsx` | Capture/restore reading scroll |
+| Layout | `NotesShell.tsx` | Places tab UI above Reading/Editing actions and keeps it mounted across Notes subviews |
+
+## Design Decisions
+
+### Active-slot replacement is the default
+
+`openNoteInWorkspace` updates the active tab. `addWorkspaceTab` is the only operation that increases tab count. This encodes the product's key rule in one reducer function instead of relying on individual click handlers.
+
+### Deduplicate before asynchronous fetch work
+
+The controller checks `findWorkspaceTabByNoteId` before replacing the active tab. If found, it flushes/captures the current tab and activates the existing tab. This prevents two concurrent sessions for one note and avoids unnecessary note-status checks.
+
+### Local drafts belong to tabs
+
+The existing editor remains mounted only for the active tab, so its DOM/TipTap instance is captured before unmount and restored from the tab's serializable draft/session. Existing autosave and offline queue behavior remains unchanged.
+
+### Session storage is the web boundary
+
+`sessionStorage` provides reload persistence while keeping separate external browser tabs isolated. Access is wrapped in try/catch and validated with a versioned schema. The in-memory reducer is always usable without storage.
+
+### Save errors are explicit
+
+The tab stores `saveState: 'error'` and `saveError`. Closing a failed tab requires an explicit confirmation from the user; an error is never silently discarded. Dirty/saving states are non-blocking indicators.
+
+### Split View remains possible
+
+The workspace is modeled as a list of independent tab sessions, while the controller exposes one active session today. A future split view can mount two active-session presenters without changing tab identity or persistence semantics.
+
+## Non-Functional Requirements
+
+- Switching tabs performs no new network request unless existing note revalidation is required; reducer transitions are synchronous after the current save flush.
+- Storage writes are best-effort and serialized from a small, bounded state snapshot; storage failures never block editing.
+- Tab buttons are keyboard reachable, have accessible names, and expose active/dirty/error state.
+- Long titles are ellipsized; desktop overflow is horizontal and mobile uses a compact list.
+- No secrets or auth tokens are added to workspace storage.
+
+## Design Review Resolution (2026-08-01)
+
+The design covers every requirements goal and transition:
+
+| Requirement | Design coverage |
+|---|---|
+| Active-slot replacement and explicit Add | `openNoteInWorkspace` and `addWorkspaceTab` reducer operations |
+| Duplicate note prevention | `findWorkspaceTabByNoteId` before controller replacement |
+| Per-tab mode/draft/save state | `NoteWorkspaceTab` data model and active-session capture |
+| Autosave safety | flush/capture sequence before reducer transitions; existing save handlers remain authoritative |
+| Reading/editor context | `NoteView` scroll capture plus `NoteEditor`/TipTap session capture |
+| Reload and browser-tab isolation | versioned `sessionStorage` adapter with in-memory fallback |
+| Tags/Search/Settings/internal opens | one controller boundary and a mounted workspace hook |
+| Desktop/mobile views | separate presentation components consuming the same hook/model |
+| Future Split View | independent tab sessions with one active presenter today |
+
+The only intentionally deferred behavior is native-mobile persistence policy; native UI can reuse the model without changing web `sessionStorage` semantics. No design gap blocks implementation.
diff --git a/docs/ai/implementation/2026-08-01-feature-notes-tabs.md b/docs/ai/implementation/2026-08-01-feature-notes-tabs.md
new file mode 100644
index 00000000000..3b58426ca17
--- /dev/null
+++ b/docs/ai/implementation/2026-08-01-feature-notes-tabs.md
@@ -0,0 +1,76 @@
+---
+phase: implementation
+title: Implementation Guide
+description: Technical implementation notes, patterns, and code guidelines
+---
+
+# Implementation Guide
+
+## Development Setup
+
+- Worktree: `.worktrees/codex-notes-tabs`, branch `codex/notes-tabs`.
+- Root dependencies: `npm ci`.
+- Mobile dependencies: `npm --prefix ui/mobile ci`.
+- Fast validation: `npm run type-check` and `npx eslint . --max-warnings=0`.
+- Focused test commands must use the project's Allure agent-mode wrapper when test evidence is collected.
+
+## Code Structure
+
+```text
+core/services/noteWorkspaceTabs.ts
+ui/web/lib/noteWorkspaceStorage.ts
+ui/web/hooks/useNoteWorkspaceTabs.ts
+ui/web/components/features/notes/NotesTabStrip.tsx
+ui/web/components/features/notes/MobileNotesTabMenu.tsx
+ui/web/hooks/useNoteAppController.ts
+ui/web/components/features/notes/NotesShell.tsx
+ui/web/components/features/notes/NoteEditor.tsx
+ui/web/components/RichTextEditor.tsx
+ui/web/components/features/notes/NoteView.tsx
+```
+
+## Implementation Notes
+
+### Core features
+
+- Keep reducer transitions pure and make invalid states impossible through normalization.
+- Use an injected ID factory in reducer tests; production uses `crypto.randomUUID` with a safe fallback.
+- Hydrate once, then persist state changes through a guarded storage adapter.
+- Capture the current editor before unmount, flush autosave first, and then apply tab transitions.
+- Use the active tab's draft as editor initial content; never use a server refresh to overwrite a dirty local field without existing reconciliation rules.
+- Keep tab indicators derived from explicit per-tab save state rather than global UI assumptions.
+
+### Patterns & Best Practices
+
+- Preserve the existing `NoteAppController` public return shape where possible; add tab-specific fields instead of renaming existing handlers.
+- Keep all open-note entry points routed through one controller function.
+- Do not add direct Supabase calls to tab UI or storage.
+- Use `sessionStorage` only through the adapter and never read/write it during server rendering.
+- Keep accessibility labels stable so component tests can target behavior rather than CSS.
+
+## Integration Points
+
+- `useNoteEditorAutoSave` remains responsible for debouncing and flush; `useNoteSaveHandlers` remains responsible for online/offline writes.
+- `NoteEditorHandle` gains capture/restore methods without exposing TipTap internals to the controller.
+- `NoteView` reports reading scroll position to the active tab.
+- `NotesShell` renders the tab UI above the existing editor action area and leaves the workspace mounted when `activeMainView` changes.
+
+## Error Handling
+
+- Storage parse/access/quota errors fall back to the in-memory state and optionally log a debug warning.
+- Autosave errors set the active tab to `error`, retain the draft, and keep the existing toast/retry behavior.
+- Failed-tab close requires explicit confirmation; canceling leaves the tab and draft intact.
+- Invalid note snapshots are ignored or revalidated through existing note status logic.
+
+## Performance Considerations
+
+- Avoid network calls on tab activation when a valid local snapshot exists; use existing revalidation only where necessary.
+- Throttle scroll persistence with `requestAnimationFrame` or a small debounce.
+- Serialize only the workspace state, not React refs or query caches.
+- Do not mount multiple editors in v1; only the active tab owns a live editor instance.
+
+## Security Notes
+
+- Workspace state contains note content in browser session storage, protected by the same-origin browser boundary; no auth/session tokens are stored.
+- Validate all hydrated values and discard unknown versions/shapes.
+- Existing HTML sanitization and editor input handling remain unchanged.
diff --git a/docs/ai/monitoring/2026-08-01-feature-notes-tabs.md b/docs/ai/monitoring/2026-08-01-feature-notes-tabs.md
new file mode 100644
index 00000000000..b662caffd78
--- /dev/null
+++ b/docs/ai/monitoring/2026-08-01-feature-notes-tabs.md
@@ -0,0 +1,37 @@
+---
+phase: monitoring
+title: Monitoring & Observability
+description: Define monitoring strategy, metrics, alerts, and incident response
+---
+
+# Monitoring & Observability
+
+## Key Metrics
+
+- Client-side autosave failures while a tab is dirty.
+- Workspace storage read/write failures and rejected snapshot versions.
+- Duplicate-note prevention and tab close-confirmation paths, if product analytics are enabled.
+- UI errors during tab activation/restoration.
+
+## Logging Strategy
+
+- Keep storage and restoration diagnostics non-sensitive and bounded; never log note body contents or tokens.
+- Reuse existing autosave/offline error reporting and toast behavior.
+- Use warnings for recoverable storage failures and errors for unhandled activation/save failures.
+
+## Alerts & Notifications
+
+- Warning: elevated autosave failure rate or repeated workspace restore failures.
+- Critical: a regression causes Notes to fail to render or silently discard dirty drafts.
+
+## Health Checks
+
+- Existing web/native smoke checks must open Notes and render one blank or restored tab.
+- Focused regression tests cover the loss-safety paths before release.
+
+## Incident Response
+
+1. Triage whether the failure is storage-only, editor-session-only, or write-path-related.
+2. Disable/roll back the UI bundle if dirty drafts can be lost.
+3. Preserve existing offline queue data and use the reducer's safe fallback.
+4. Add a regression test for the observed transition before re-release.
diff --git a/docs/ai/planning/2026-08-01-feature-notes-tabs.md b/docs/ai/planning/2026-08-01-feature-notes-tabs.md
new file mode 100644
index 00000000000..e87bb7c1f9e
--- /dev/null
+++ b/docs/ai/planning/2026-08-01-feature-notes-tabs.md
@@ -0,0 +1,94 @@
+---
+phase: planning
+title: Project Planning & Task Breakdown
+description: Break down work into actionable tasks and estimate timeline
+---
+
+# Project Planning & Task Breakdown
+
+## Milestones
+
+- [x] M1: Shared tab model, safe persistence, and focused unit tests.
+- [x] M2: Web controller integration and editor/reader session preservation.
+- [x] M3: Desktop and mobile web tab presentations plus all open-note paths.
+- [ ] M4: Native mobile presentation using the shared model semantics.
+- [ ] M5: Full verification, documentation updates, and review.
+
+## Task Breakdown
+
+### Phase 1: Foundation
+
+- [x] T1.1: Add `core/services/noteWorkspaceTabs.ts` with types, state factory, invariant-preserving transitions, deduplication, close-neighbor behavior, and safe hydration.
+- [x] T1.2: Add web `sessionStorage` adapter and `useNoteWorkspaceTabs` hook with one blank-tab fallback.
+- [x] T1.3: Add unit tests for reducer transitions, malformed state, duplicate note IDs, persistence round-trip, and last-tab close.
+
+### Phase 2: Core Web Features
+
+- [x] T2.1: Integrate workspace state into `useNoteAppController` without breaking the existing `NoteAppController` consumers.
+- [x] T2.2: Route list, FTS search, tag-only results, AI/internal note opens, edit, create, and settings return through active-tab transitions.
+- [x] T2.3: Add active-tab flush/capture coordination and per-tab dirty/saving/error state.
+- [x] T2.4: Extend `NoteEditor`, `RichTextEditor`, and `NoteView` to capture/restore draft, scroll, title selection, and best-effort editor selection.
+
+### Phase 3: Integration & Polish
+
+- [x] T3.1: Add desktop `NotesTabStrip` above the existing Reading/Editing header/actions.
+- [x] T3.2: Add narrow/mobile web compact tab summary and list with accessible close/switch controls.
+- [x] T3.3: Add focused component/controller tests for tab UX, duplicate selection, transitions, persistence, and save-error close confirmation.
+- [x] T3.4: Verify Tags/Search/Settings navigation preserves the workspace.
+
+### Phase 4: Native Mobile
+
+- [ ] T4.1: Expose the shared model through the native mobile state/persistence adapter.
+- [ ] T4.2: Adapt `useOpenNote`, Notes/Search result flows, and note route to activate existing sessions or replace the active session.
+- [ ] T4.3: Add compact mobile tab list/sheet and native session tests.
+
+### Phase 5: Quality Gates
+
+- [x] T5.1: Update implementation/testing/deployment/monitoring docs with actual commands and evidence.
+- [x] T5.2: Run focused unit/integration tests, production type-check, ESLint, and mobile checks independently.
+- [x] T5.3: Run the project Allure agent-mode focused tests and inspect results/evidence.
+- [ ] T5.4: Review diff/status for unrelated files and perform final code review.
+
+## Dependencies
+
+- T1.1 precedes T1.2 and all controller/UI work.
+- T2.3/T2.4 must be complete before tab switching is considered loss-safe.
+- T3.1/T3.2 depend on the controller's stable tab API.
+- T4 can reuse T1.1 but must not change web persistence semantics.
+- Verification depends on the final test plan and any new test fixtures.
+
+## Timeline & Estimates
+
+- Foundation: 0.5–1 day.
+- Core web behavior: 1–2 days.
+- UI and regression tests: 0.5–1 day.
+- Native mobile adaptation: 1–2 days depending on route/store constraints.
+- Quality gates and review: 0.5–1 day.
+
+These are engineering estimates only; autosave/editor lifecycle and native navigation are the main uncertainty buffers.
+
+## Risks & Mitigation
+
+- **Autosave race on tab switch:** flush and capture before every transition; retain the existing debounced-latest/reconciliation tests.
+- **Large drafts exceed storage quota:** catch serialization/storage errors, keep memory state, and avoid blocking the editor.
+- **Remote note changed while a tab is inactive:** revalidate on activation through existing `resolveOpenableNote` and reconcile local draft fields.
+- **Duplicate sessions from different entry points:** centralize all open-note actions in controller/reducer and test each source.
+- **Editor selection coordinates become stale:** treat restoration as best effort and validate bounds before applying.
+- **Native/web behavior diverges:** share reducer/invariants and keep presentation-specific adapters thin.
+- **Unrelated dirty files in the main checkout:** work only in `.worktrees/codex-notes-tabs` and stage task files explicitly.
+
+## Resources Needed
+
+- Existing React/Tiptap editor and autosave hooks.
+- Existing offline cache/queue and note query/mutation services.
+- Jest/Testing Library and the project's Allure agent-mode workflow.
+- One bounded subagent for architecture/mobile investigation or a disjoint native implementation slice; close it when its report is integrated.
+
+## Execution Tracking
+
+- T2/T3 done (2026-08-01): controller, editor/reader session capture, desktop/mobile web controls, and navigation integration. Combined Allure run `C:\Users\DenysKoreiba\AppData\Local\Temp\allure-agent-58hLNC`; 34/34 passed, expectations matched, no findings.
+- T5.2 done (2026-08-01): `npm run type-check` passed, including `ui/mobile`; focused ESLint passed for all changed source/test files.
+- T5.4 pending final diff/status audit. Native mobile route/store adaptation remains a separately scoped follow-up; the delivered mobile presentation is the responsive web Notes UI.
+
+- T1.1 — done (2026-08-01): pure workspace model and 9 focused Jest tests. Allure agent output `C:\Users\DenysKoreiba\AppData\Local\Temp\allure-agent-QVm6RR`; 9/9 passed, expectations matched, no findings.
+- T1.2/T1.3 — done (2026-08-01): web storage adapter, hook, and combined 13-test model/storage run. Allure agent output `C:\Users\DenysKoreiba\AppData\Local\Temp\allure-agent-Rc7Bph`; 13/13 passed, expectations matched, no findings.
diff --git a/docs/ai/requirements/2026-08-01-feature-notes-tabs.md b/docs/ai/requirements/2026-08-01-feature-notes-tabs.md
new file mode 100644
index 00000000000..a2632304616
--- /dev/null
+++ b/docs/ai/requirements/2026-08-01-feature-notes-tabs.md
@@ -0,0 +1,84 @@
+---
+phase: requirements
+title: Requirements & Problem Understanding
+description: Clarify the problem space, gather requirements, and define success criteria
+---
+
+# Requirements & Problem Understanding
+
+## Problem Statement
+
+Notes currently has one selected-note session. Selecting another note replaces the current view, so users lose the working context of the previous note: reading/editing mode, scroll position, editor caret/selection, and any local draft that is still in the autosave pipeline. Users work around this by opening several browser tabs, which duplicates application state and makes navigation/search/tag flows harder to reason about.
+
+The feature serves authenticated EverFreeNote users who work with several notes in one Notes workspace, on desktop and on narrow/mobile layouts.
+
+## Goals & Objectives
+
+- Add an in-app Notes workspace with at least one active tab at all times.
+- Make ordinary note selection replace the active tab; only the explicit Add tab action creates a new tab.
+- Deduplicate by note ID: selecting an already-open note activates its existing tab.
+- Preserve per-tab note snapshot, Reading/Editing mode, local draft, save status, scroll position, and best-effort editor caret/text selection.
+- Flush pending autosave work before leaving a tab and surface dirty/saving/error state on the tab.
+- Restore the workspace after a page reload in the same browser tab, including order, active tab, note snapshots, drafts, mode, and view state.
+- Keep the workspace alive while moving between Notes, Tags, Search, and Settings.
+- Provide a desktop tab strip and a compact mobile presentation backed by the same state model.
+
+### Non-goals for the first version
+
+- Split View or displaying two note editors simultaneously.
+- Drag-and-drop tab reordering.
+- Close-all/close-right/close-others commands.
+- Persisting the web workspace after a browser is fully closed; web persistence is scoped to `sessionStorage` and therefore to one external browser tab.
+- New backend tables, Supabase endpoints, or a second concurrent editor session for the same note.
+
+## User Stories & Use Cases
+
+- As a note author, I can select a note from the normal list and it opens in the current active tab.
+- As a note author, I can explicitly add a tab, then select a note and keep the first note open in its original tab.
+- As a note author, I can switch tabs and return to the same Reading/Editing mode, scroll location, draft, and editor context.
+- As a note author, I cannot open the same note in two tabs; selecting it activates the existing tab.
+- As a note author, I can close any tab. Closing the active tab activates the tab to its right, or the left tab when there is no right neighbor.
+- As a note author, closing the final tab leaves one empty active tab instead of removing the workspace.
+- As a note author, I see a subtle dirty/saving/error marker and receive confirmation before closing a tab whose save failed.
+- As a note author, note selection from the list, search results, tag results, and internal note-opening flows follows the same active-tab rule.
+- As a note author, navigating to Tags, Search, or Settings does not destroy the Notes workspace; returning restores it.
+- As a mobile user, I can see the active note and open-tab count and use a compact tab list to switch or close tabs.
+
+## Success Criteria
+
+- [ ] The Notes workspace always renders one active tab, including the initial and last-tab-closed states.
+- [ ] List/search/tag/internal selection replaces the active tab unless the selected note is already open, in which case its existing tab activates.
+- [ ] Add tab creates exactly one blank active tab and does not open a note implicitly.
+- [ ] Active-tab close chooses right neighbor first, then left neighbor; closing the last tab creates one blank tab.
+- [ ] Switching tabs does not lose a flushed or pending local draft; save failure remains visible and is not silently discarded.
+- [ ] Reading and Editing modes are restored per tab; editing restoration includes title/body/tags draft values.
+- [ ] Scroll position is restored for Reading and Editing views; caret/selection restoration is best effort and never blocks navigation.
+- [ ] A valid `sessionStorage` snapshot restores tab order, active tab, note snapshots, drafts, and view state after reload; malformed or oversized state falls back safely to one blank tab.
+- [ ] The tab model is shared by desktop and mobile presentation components.
+- [ ] No new network request is required just to switch tabs, and no duplicate note editor session can be created for one note ID.
+- [ ] Existing autosave, manual save, delete, search, tag, offline, and settings-return behavior remains passing.
+
+## Constraints & Assumptions
+
+- Existing `useNoteAppController` remains the navigation boundary; wrappers must flush the current editor before switching, closing, or leaving Notes.
+- Existing offline cache/queue and `useNoteEditorAutoSave` remain the source of truth for writes. Tabs store a local working snapshot and status; they do not introduce a second persistence protocol.
+- Web workspace persistence uses `sessionStorage`, which naturally separates same-origin browser tabs while surviving reloads. Storage access can fail and must be treated as best effort.
+- Note content may be large. Serialization is bounded and failure-safe; the application must keep the in-memory workspace usable when storage quota is exceeded.
+- Supabase data remains user-scoped. Persisted note snapshots are advisory UI state and are revalidated through existing note-opening logic when a note is selected.
+- Editor caret/selection coordinates are ProseMirror-specific and can become invalid after remote content changes; restore only when the editor accepts the coordinates.
+- The native mobile app may use its platform persistence adapter, but it must consume the same reducer/model semantics as the web tab strip.
+
+## Questions & Open Items
+
+The following review decisions resolve the v1 ambiguities without changing the requested behavior:
+
+- No hard tab-count cap is introduced. Desktop uses horizontal overflow and mobile uses a compact list.
+- Web persistence is explicitly `sessionStorage` per external browser tab. Native mobile persistence is an adapter concern and is not allowed to change the web contract.
+- If flushing the active editor fails during a normal switch, the transition is aborted so the user can retry and the failed state remains visible. Closing a failed tab is allowed only after an explicit discard confirmation.
+- Caret/text-selection restoration is best effort and may be skipped after remote content reconciliation; draft and scroll restoration remain mandatory.
+- The repository's current AI/search “open note in context” callbacks are the internal-open integration point. Any future note-link handler must call the same controller open-note function.
+- Conflict-resolution UI is deferred; existing last-write-wins/autosave reconciliation remains authoritative.
+
+## Requirements Review Resolution (2026-08-01)
+
+All template sections are complete. The supplied concept provides the problem, target users, workflows, edge cases, mobile behavior, reload boundary, and explicit non-goals. The five decisions above are implementation defaults for unspecified details; none require additional backend or product clarification before Phase 4.
diff --git a/docs/ai/testing/2026-08-01-feature-notes-tabs.md b/docs/ai/testing/2026-08-01-feature-notes-tabs.md
new file mode 100644
index 00000000000..ceec2c2e65d
--- /dev/null
+++ b/docs/ai/testing/2026-08-01-feature-notes-tabs.md
@@ -0,0 +1,86 @@
+---
+phase: testing
+title: Testing Strategy
+description: Define testing approach, test cases, and quality assurance
+---
+
+# Testing Strategy
+
+## Test Coverage Goals
+
+- 100% branch coverage for new pure workspace transitions and hydration guards.
+- Component/controller coverage for every open-note source, tab lifecycle, persistence, and save-error path.
+- Regression coverage for autosave flush/reconciliation, Reading/Editing restoration, Tags/Search/Settings navigation, and mobile presentation.
+- Use Allure agent mode for focused runs and inspect report-backed evidence rather than relying on test counts alone.
+
+## Unit Tests
+
+### `core/services/noteWorkspaceTabs.ts`
+
+- [x] Creates one blank active tab.
+- [x] Adds and activates one new blank tab.
+- [x] Opens a note in the active tab without increasing tab count.
+- [x] Activates an existing tab when the note ID is already open.
+- [x] Preserves order and chooses the right/left neighbor on close.
+- [x] Replaces the final closed tab with one blank active tab.
+- [x] Applies tab patches without breaking invariants.
+- [x] Rejects malformed, duplicate, unsupported-version, and oversized snapshots.
+
+### Web storage and hook
+
+- [x] Round-trips valid state through `sessionStorage`.
+- [x] Handles blocked storage, invalid JSON, and quota errors without throwing.
+- [x] Persists per-browser-tab state without using `localStorage`.
+
+## Integration Tests
+
+- [x] Controller flushes pending autosave and captures the outgoing tab before activation.
+- [x] Selecting list/search/tag/internal result replaces the active tab.
+- [x] Selecting a duplicate note activates the existing tab and does not create a second session.
+- [x] Dirty draft and save-error state remain on the tab after switching.
+- [x] Closing a failed tab requires explicit confirmation.
+- [x] Editor draft, title selection, scroll, and best-effort ProseMirror selection restore after activation.
+- [x] Reading scroll restores after activation.
+- [x] Settings return preserves tabs and active tab; Tags/Search view changes do not clear them.
+
+## End-to-End Tests
+
+- [ ] Open note A, add tab, open note B, switch A/B, and verify both contexts.
+- [ ] Open note A from normal list, search, tag-only results, and AI/internal flow and verify one tab.
+- [ ] Reload the same browser tab and verify order, active tab, mode, draft, and scroll.
+- [ ] Close active tabs in both neighbor directions and close the final tab.
+- [x] Use the compact mobile tab list to switch and close tabs.
+
+## Test Data
+
+- Use deterministic `NoteViewModel` fixtures with distinct IDs, long titles, long HTML bodies, tags, and unsaved drafts.
+- Mock storage only at the adapter boundary.
+- Keep existing Supabase/offline mocks and test real reducer/controller behavior around them.
+
+## Test Reporting & Coverage
+
+- Focused web unit/component run: `npm run test:unit:web` (wrapped by Allure agent mode for evidence).
+- Core reducer run: the focused Jest test path for the new core service (wrapped by Allure agent mode).
+- Production type-check and lint run independently of test success.
+- Record exact commands, pass/fail status, and any environment limitations here after implementation.
+
+## Manual Testing
+
+## Recorded Evidence
+
+- Allure Agent workspace/model/UI run: 34/34 passed, expectations matched, findings 0. Report: `C:\Users\DenysKoreiba\AppData\Local\Temp\allure-agent-58hLNC`.
+- Existing controller regression run under Allure Agent: 18/18 passed, findings 0. Report: `C:\Users\DenysKoreiba\AppData\Local\Temp\allure-agent-yHYkoU`.
+- `npm run type-check`: passed, including root, core, web tests, and `ui/mobile`.
+- Focused ESLint for changed source/test files: passed.
+- Native mobile route/store tab adaptation was not included; responsive web mobile controls are covered by component tests.
+
+- Desktop: keyboard tab navigation, ellipsis, horizontal overflow, dirty/error markers, close confirmation.
+- Mobile viewport: active-note summary, tab count, compact list/sheet, touch targets, screen-reader labels.
+- Reload: verify `sessionStorage` restore and separate browser-tab isolation.
+- Network/offline: switch during autosave and after an induced save error.
+
+## Performance Testing
+
+- Verify switching does not mount more than one editor or trigger duplicate fetches.
+- Verify rapid scroll/input changes do not write storage on every event without throttling.
+- Verify long drafts remain responsive and storage failure does not block typing.
diff --git a/ui/web/components/RichTextEditor.tsx b/ui/web/components/RichTextEditor.tsx
index bfb0669dc0e..30a66e347c0 100644
--- a/ui/web/components/RichTextEditor.tsx
+++ b/ui/web/components/RichTextEditor.tsx
@@ -21,6 +21,8 @@ import { scrollEditorToChunk } from "./chunkFocusUtils"
 
 export type RichTextEditorHandle = {
   getHTML: () => string
+  getSelection?: () => { from: number; to: number } | undefined
+  setSelection?: (selection: { from: number; to: number }) => void
   setContent: (html: string) => void
   runCommand: (command: string, ...args: unknown[]) => void
   /** Scroll to and highlight the given plain-text chunk range.
@@ -261,6 +263,18 @@ const RichTextEditor = React.forwardRef<RichTextEditorHandle, RichTextEditorProp
     // Expose methods via ref
     React.useImperativeHandle(ref, () => ({
       getHTML: () => editor?.getHTML() ?? "",
+      getSelection: () => {
+        if (!editor) return undefined
+        const { from, to } = editor.state.selection
+        return { from, to }
+      },
+      setSelection: ({ from, to }: { from: number; to: number }) => {
+        if (!editor) return
+        const maxPosition = editor.state.doc.content.size
+        const safeFrom = Math.min(Math.max(Math.trunc(from), 1), maxPosition)
+        const safeTo = Math.min(Math.max(Math.trunc(to), safeFrom), maxPosition)
+        editor.commands.setTextSelection({ from: safeFrom, to: safeTo })
+      },
       setContent: (html: string) => {
         if (!editor) return
         const document = createDocument(html, editor.schema, editor.options.parseOptions, {
diff --git a/ui/web/components/features/notes/MobileNotesTabMenu.tsx b/ui/web/components/features/notes/MobileNotesTabMenu.tsx
new file mode 100644
index 00000000000..dc31ab99ef3
--- /dev/null
+++ b/ui/web/components/features/notes/MobileNotesTabMenu.tsx
@@ -0,0 +1,99 @@
+"use client"
+
+import { useState } from "react"
+import { List, Plus, X } from "lucide-react"
+import type { NoteWorkspaceTab } from "@core/services/noteWorkspaceTabs"
+import { Button } from "@/components/ui/button"
+import { cn } from "@ui/web/lib/utils"
+import { getTabLabel, SaveStateIndicator, type NotesTabStripProps } from "./NotesTabStrip"
+
+export type MobileNotesTabMenuProps = NotesTabStripProps
+
+export function MobileNotesTabMenu({
+  tabs,
+  activeTabId,
+  onAddTab,
+  onActivateTab,
+  onCloseTab,
+}: MobileNotesTabMenuProps) {
+  const [isOpen, setIsOpen] = useState(false)
+  const activeTab = tabs.find((tab) => tab.id === activeTabId) ?? tabs[0]
+  const activeLabel = activeTab ? getTabLabel(activeTab) : "No open notes"
+
+  const handleActivate = (tabId: string) => {
+    onActivateTab(tabId)
+    setIsOpen(false)
+  }
+
+  const handleClose = (tab: NoteWorkspaceTab) => {
+    onCloseTab(tab.id)
+    if (tab.id === activeTabId && tabs.length <= 1) setIsOpen(false)
+  }
+
+  return (
+    <div className="relative border-b border-border/60 bg-background/80 px-3 py-2 backdrop-blur md:hidden">
+      <div className="flex items-center gap-2">
+        <div className="min-w-0 flex-1">
+          <p className="truncate text-sm font-medium" title={activeLabel}>{activeLabel}</p>
+          <p className="text-xs text-muted-foreground">{tabs.length} {tabs.length === 1 ? "tab" : "tabs"}</p>
+        </div>
+        {activeTab && <SaveStateIndicator tab={activeTab} />}
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          className="shrink-0"
+          aria-expanded={isOpen}
+          aria-controls="mobile-notes-tab-list"
+          aria-label={`Open note tabs (${tabs.length})`}
+          onClick={() => setIsOpen((open) => !open)}
+        >
+          <List className="h-4 w-4" aria-hidden="true" />
+          <span className="sr-only">Open tabs</span>
+          <span aria-hidden="true">{tabs.length}</span>
+        </Button>
+      </div>
+
+      {isOpen && (
+        <div id="mobile-notes-tab-list" className="mt-2 rounded-xl border border-border bg-card p-1 shadow-lg" role="listbox" aria-label="Open notes">
+          {tabs.map((tab) => {
+            const label = getTabLabel(tab)
+            const isActive = tab.id === activeTabId
+
+            return (
+              <div key={tab.id} className="flex items-center gap-1 rounded-lg">
+                <Button
+                  type="button"
+                  role="option"
+                  aria-selected={isActive}
+                  variant="ghost"
+                  className={cn("min-w-0 flex-1 justify-start rounded-lg px-2.5", isActive && "bg-muted font-semibold")}
+                  title={label}
+                  onClick={() => handleActivate(tab.id)}
+                >
+                  <span className="min-w-0 flex-1 truncate text-left">{label}</span>
+                  <SaveStateIndicator tab={tab} />
+                </Button>
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="icon"
+                  className="h-8 w-8 shrink-0 text-muted-foreground hover:text-foreground"
+                  aria-label={`Close ${label}`}
+                  title={`Close ${label}`}
+                  onClick={() => handleClose(tab)}
+                >
+                  <X className="h-3.5 w-3.5" aria-hidden="true" />
+                </Button>
+              </div>
+            )
+          })}
+          <Button type="button" variant="ghost" className="mt-1 w-full justify-start rounded-lg" onClick={onAddTab}>
+            <Plus className="h-4 w-4" aria-hidden="true" />
+            Add tab
+          </Button>
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/ui/web/components/features/notes/NoteEditor.tsx b/ui/web/components/features/notes/NoteEditor.tsx
index 4861985100c..22d493fc22b 100644
--- a/ui/web/components/features/notes/NoteEditor.tsx
+++ b/ui/web/components/features/notes/NoteEditor.tsx
@@ -12,15 +12,22 @@ import { MoreActionsMenu } from "@/components/features/notes/MoreActionsMenu"
 import { buildTagString, normalizeTag, normalizeTagList, parseTagString } from "@ui/web/lib/tags"
 import { useTagSuggestions } from "@ui/web/hooks/useTagSuggestions"
 import { useNoteEditorAutoSave } from "@ui/web/hooks/useNoteEditorAutoSave"
+import type { NoteDraftSnapshot, NoteViewSession } from "@core/services/noteWorkspaceTabs"
 
 const DEFAULT_AUTOSAVE_DELAY_MS = 500
 const NOOP_CANCEL = () => {}
 
 export interface NoteEditorHandle {
   flushPendingSave: () => Promise<void>
+  captureSession?: () => NoteEditorSession
   scrollToChunk: (charOffset: number, chunkLength: number) => void
 }
 
+export type NoteEditorSession = {
+  draft: NoteDraftSnapshot
+  view: NoteViewSession
+}
+
 export type PendingChunkFocus = {
   requestId: string
   noteId: string
@@ -47,6 +54,9 @@ interface NoteEditorProps {
   onBack?: () => void
   pendingChunkFocus?: PendingChunkFocus | null
   onPendingChunkFocusApplied?: (requestId: string) => void
+  initialSession?: NoteEditorSession
+  onDraftChange?: (draft: NoteDraftSnapshot) => void
+  onViewSessionChange?: (view: Partial<NoteViewSession>) => void
 }
 
 export const NoteEditor = React.memo(React.forwardRef<NoteEditorHandle, NoteEditorProps>(function NoteEditor({
@@ -68,6 +78,9 @@ export const NoteEditor = React.memo(React.forwardRef<NoteEditorHandle, NoteEdit
   onBack,
   pendingChunkFocus = null,
   onPendingChunkFocusApplied,
+  initialSession,
+  onDraftChange,
+  onViewSessionChange,
 }: NoteEditorProps, ref) {
   const [showSaving, setShowSaving] = React.useState(false)
   const [selectedTags, setSelectedTags] = React.useState<string[]>(() => parseTagString(initialTags))
@@ -76,6 +89,8 @@ export const NoteEditor = React.memo(React.forwardRef<NoteEditorHandle, NoteEdit
   const [isBodyEmpty, setIsBodyEmpty] = React.useState(() => NoteClipboardService.isBodyEmpty(initialDescription))
   const titleInputRef = React.useRef<HTMLInputElement | null>(null)
   const editorRef = React.useRef<RichTextEditorHandle | null>(null)
+  const scrollContainerRef = React.useRef<HTMLDivElement | null>(null)
+  const initialSessionRef = React.useRef(initialSession)
   const previousNoteIdRef = React.useRef(noteId)
 
   const selectedTagsRef = React.useRef<string[]>(selectedTags)
@@ -93,6 +108,14 @@ export const NoteEditor = React.memo(React.forwardRef<NoteEditorHandle, NoteEdit
     tags: buildTagString(selectedTagsRef.current),
   }), [initialTitle, initialDescription])
 
+  React.useEffect(() => {
+    initialSessionRef.current = initialSession
+  }, [initialSession])
+
+  const notifyDraftChange = React.useCallback(() => {
+    onDraftChange?.(getFormData())
+  }, [getFormData, onDraftChange])
+
   const applyExternalSnapshot = React.useCallback((
     snapshot: { title: string; description: string; tags: string },
     fieldDecisions: Record<'title' | 'description' | 'tags', 'accept-external' | 'acknowledge-local' | 'preserve-local'>
@@ -152,7 +175,8 @@ export const NoteEditor = React.memo(React.forwardRef<NoteEditorHandle, NoteEdit
   const handleEditorContentChange = React.useCallback(() => {
     handleContentChange()
     setIsBodyEmpty(NoteClipboardService.isBodyEmpty(editorRef.current?.getHTML() ?? ""))
-  }, [handleContentChange])
+    notifyDraftChange()
+  }, [handleContentChange, notifyDraftChange])
 
   const handleCopy = React.useCallback(() => {
     void copyNote(editorRef.current?.getHTML() ?? initialDescription)
@@ -199,21 +223,65 @@ export const NoteEditor = React.memo(React.forwardRef<NoteEditorHandle, NoteEdit
     selectedTagsRef.current = merged
     setSelectedTags(merged)
     setTagQuery("")
-  }, [])
+    handleContentChange()
+    onDraftChange?.({
+      ...getFormData(),
+      tags: buildTagString(merged),
+    })
+  }, [getFormData, handleContentChange, onDraftChange])
 
   const removeTag = React.useCallback((tagToRemove: string) => {
     const next = selectedTagsRef.current.filter((tag) => tag !== tagToRemove)
     selectedTagsRef.current = next
     setSelectedTags(next)
     setTagQuery("")
-  }, [])
+    handleContentChange()
+    onDraftChange?.({
+      ...getFormData(),
+      tags: buildTagString(next),
+    })
+  }, [getFormData, handleContentChange, onDraftChange])
 
   React.useImperativeHandle(ref, () => ({
     flushPendingSave,
+    captureSession: () => ({
+      draft: getFormData(),
+      view: {
+        scrollTop: scrollContainerRef.current?.scrollTop ?? 0,
+        ...(titleInputRef.current?.selectionStart !== null && titleInputRef.current?.selectionStart !== undefined && titleInputRef.current?.selectionEnd !== null && titleInputRef.current?.selectionEnd !== undefined
+          ? {
+              titleSelection: {
+                start: titleInputRef.current.selectionStart,
+                end: titleInputRef.current.selectionEnd,
+              },
+            }
+          : {}),
+        ...(editorRef.current?.getSelection?.() ? { editorSelection: editorRef.current.getSelection?.() } : {}),
+      },
+    }),
     scrollToChunk: (charOffset: number, chunkLength: number) => {
       editorRef.current?.scrollToChunk(charOffset, chunkLength)
     },
-  }), [flushPendingSave])
+  }), [flushPendingSave, getFormData])
+
+  React.useEffect(() => {
+    const session = initialSessionRef.current
+    if (!session) return
+
+    const frame = window.requestAnimationFrame(() => {
+      if (scrollContainerRef.current) {
+        scrollContainerRef.current.scrollTop = session.view.scrollTop
+      }
+      if (titleInputRef.current && session.view.titleSelection) {
+        titleInputRef.current.setSelectionRange(session.view.titleSelection.start, session.view.titleSelection.end)
+      }
+      if (session.view.editorSelection) {
+        editorRef.current?.setSelection?.(session.view.editorSelection)
+      }
+    })
+
+    return () => window.cancelAnimationFrame(frame)
+  }, [editorSessionKey])
 
   const effectivePendingChunkFocus = React.useMemo(() => {
     if (!pendingChunkFocus || !noteId) return null
@@ -305,7 +373,11 @@ export const NoteEditor = React.memo(React.forwardRef<NoteEditorHandle, NoteEdit
       </div>
 
       {/* Editor Form */}
-      <div className="flex-1 overflow-y-auto bg-card">
+      <div
+        ref={scrollContainerRef}
+        className="flex-1 overflow-y-auto bg-card"
+        onScroll={(event) => onViewSessionChange?.({ scrollTop: event.currentTarget.scrollTop })}
+      >
         <div className="max-w-4xl mx-auto px-6 pt-24 space-y-5">
           <div>
             <Input
@@ -314,7 +386,10 @@ export const NoteEditor = React.memo(React.forwardRef<NoteEditorHandle, NoteEdit
               type="text"
               placeholder="Note title"
               defaultValue={initialTitle}
-              onChange={handleContentChange}
+              onChange={() => {
+                handleContentChange()
+                notifyDraftChange()
+              }}
               className="w-full h-auto border-0 bg-transparent px-0 py-1 text-4xl font-extrabold tracking-tight placeholder:text-muted-foreground/30 focus-visible:ring-0 shadow-none"
             />
           </div>
diff --git a/ui/web/components/features/notes/NoteView.tsx b/ui/web/components/features/notes/NoteView.tsx
index d113ef627f2..05537fe42ef 100644
--- a/ui/web/components/features/notes/NoteView.tsx
+++ b/ui/web/components/features/notes/NoteView.tsx
@@ -11,6 +11,7 @@ import { NoteClipboardService } from "@core/services/noteClipboard"
 import { useCopyNote } from "@ui/web/hooks/useCopyNote"
 import { NOTE_CONTENT_CLASS } from "@core/constants/typography"
 import type { Note } from "@core/types/domain"
+import type { NoteViewSession } from "@core/services/noteWorkspaceTabs"
 
 // Define NoteRecord locally to match what's used in page.tsx
 type NoteRecord = Note & {
@@ -27,6 +28,8 @@ interface NoteViewProps {
   onRemoveTag: (tag: string) => void
   onBack?: () => void
   wordpressConfigured?: boolean
+  initialScrollTop?: number
+  onViewSessionChange?: (view: Partial<NoteViewSession>) => void
 }
 
 export const NoteView = React.memo(function NoteView({
@@ -37,6 +40,8 @@ export const NoteView = React.memo(function NoteView({
   onRemoveTag,
   onBack,
   wordpressConfigured = false,
+  initialScrollTop = 0,
+  onViewSessionChange,
 }: NoteViewProps) {
   const bodyHtml = note.description || note.content || ''
 
@@ -48,6 +53,14 @@ export const NoteView = React.memo(function NoteView({
 
   const { copied, copyNote } = useCopyNote()
   const isBodyEmpty = React.useMemo(() => NoteClipboardService.isBodyEmpty(bodyHtml), [bodyHtml])
+  const contentRef = React.useRef<HTMLDivElement | null>(null)
+
+  React.useEffect(() => {
+    const frame = window.requestAnimationFrame(() => {
+      if (contentRef.current) contentRef.current.scrollTop = initialScrollTop
+    })
+    return () => window.cancelAnimationFrame(frame)
+  }, [initialScrollTop, note.id])
 
   // Форматирование дат для предотвращения повторных вычислений
   const formattedDates = React.useMemo(() => ({
@@ -125,7 +138,11 @@ export const NoteView = React.memo(function NoteView({
       </div>
 
       {/* Note Content */}
-      <div className="flex-1 overflow-y-auto px-6 pt-24 pb-10 bg-card">
+      <div
+        ref={contentRef}
+        className="flex-1 overflow-y-auto px-6 pt-24 pb-10 bg-card"
+        onScroll={(event) => onViewSessionChange?.({ scrollTop: event.currentTarget.scrollTop })}
+      >
         <div className="max-w-4xl mx-auto">
           <h1 className="text-4xl font-extrabold tracking-tight text-foreground mb-6 leading-tight">
             {note.title}
diff --git a/ui/web/components/features/notes/NotesShell.tsx b/ui/web/components/features/notes/NotesShell.tsx
index 4f84eee0018..86e5878fbe8 100644
--- a/ui/web/components/features/notes/NotesShell.tsx
+++ b/ui/web/components/features/notes/NotesShell.tsx
@@ -31,7 +31,9 @@ import { useSupabase } from "@ui/web/providers/SupabaseProvider"
 import { WordPressSettingsService } from "@core/services/wordpressSettings"
 import { ApiKeysSettingsService } from "@core/services/apiKeysSettings"
 import { saveSettingsReturnState } from "@ui/web/lib/settingsNavigationState"
-import { consumeActiveSettingsNoteReturnPath } from "@ui/web/lib/aiIndexNavigationState"
+import { consumeActiveSettingsNoteReturnPath } from "@ui/web/lib/aiIndexNavigationState"
+import { NotesTabStrip } from "@/components/features/notes/NotesTabStrip"
+import { MobileNotesTabMenu } from "@/components/features/notes/MobileNotesTabMenu"
 
 import { NavRail } from "@/components/features/navigation/NavRail"
 import { TagsPage } from "@/components/features/tags/TagsPage"
@@ -87,8 +89,14 @@ export function NotesShell({ controller }: NotesShellProps) {
     pendingCount,
     failedCount,
     isOffline,
-    selectedNote,
-    isEditing,
+    selectedNote,
+    isEditing,
+    notePaneVisible,
+    tabs = [],
+    activeTabId = '',
+    addTab,
+    activateTab,
+    closeTab,
     handleSelectNote,
     isSearchPanelOpen,
     setIsSearchPanelOpen,
@@ -147,7 +155,7 @@ export function NotesShell({ controller }: NotesShellProps) {
     await controller.handleEditNote(note)
   }, [controller, supabase])
 
-  const showEditor = !!(selectedNote || isEditing)
+  const showEditor = notePaneVisible ?? !!(selectedNote || isEditing)
   const handleOpenSearchPanel = React.useCallback(() => {
     if (activeMainView !== "notes") {
       setActiveMainView("notes")
@@ -260,22 +268,38 @@ export function NotesShell({ controller }: NotesShellProps) {
             />
           )}
 
-          <main
+          <main
             className={cn(
               "flex-1 flex min-h-0 flex-col h-full overflow-hidden",
               !showEditor ? "hidden md:flex" : "w-full"
             )}
-            data-testid="editor-container"
-          >
-            <EditorPane
-              controller={controller}
-              onBack={handleBackFromNote}
-              noteEditorRef={noteEditorRef}
-              wordpressConfigured={wordpressConfigured}
-              pendingChunkFocus={pendingChunkFocus}
-              onPendingChunkFocusApplied={handlePendingChunkFocusApplied}
-            />
-          </main>
+            data-testid="editor-container"
+          >
+            <NotesTabStrip
+              tabs={tabs}
+              activeTabId={activeTabId}
+              onAddTab={() => void addTab?.()}
+              onActivateTab={(tabId) => void activateTab?.(tabId)}
+              onCloseTab={(tabId) => void closeTab?.(tabId)}
+            />
+            <MobileNotesTabMenu
+              tabs={tabs}
+              activeTabId={activeTabId}
+              onAddTab={() => void addTab?.()}
+              onActivateTab={(tabId) => void activateTab?.(tabId)}
+              onCloseTab={(tabId) => void closeTab?.(tabId)}
+            />
+            <div className="flex-1 min-h-0 flex">
+              <EditorPane
+                controller={controller}
+                onBack={handleBackFromNote}
+                noteEditorRef={noteEditorRef}
+                wordpressConfigured={wordpressConfigured}
+                pendingChunkFocus={pendingChunkFocus}
+                onPendingChunkFocusApplied={handlePendingChunkFocusApplied}
+              />
+            </div>
+          </main>
         </>
       )}
 
@@ -288,9 +312,9 @@ export function NotesShell({ controller }: NotesShellProps) {
 function ListPane({ controller }: { controller: NoteAppController }) {
   const {
     notes,
-    notesQuery,
-    selectedNote,
-    handleSelectNote,
+    notesQuery,
+    selectedNote,
+    handleSelectNote,
     selectionMode,
     selectedNoteIds,
     toggleNoteSelection,
@@ -329,8 +353,10 @@ function EditorPane({
   pendingChunkFocus: PendingChunkFocus | null
   onPendingChunkFocusApplied: (requestId: string) => void
 }) {
-  const {
-    selectedNote,
+  const {
+    selectedNote,
+    activeTab,
+    activeTabId,
     isEditing,
     saving,
     autoSaving,
@@ -381,11 +407,15 @@ function EditorPane({
   if (isEditing) {
     return (
       <NoteEditor
-        ref={noteEditorRef}
-        noteId={selectedNote?.id}
-        initialTitle={selectedNote?.title ?? ""}
-        initialDescription={selectedNote?.description ?? selectedNote?.content ?? ""}
-        initialTags={selectedNote?.tags?.join(", ") ?? ""}
+        ref={noteEditorRef}
+        key={`workspace-tab-${activeTabId}`}
+        noteId={selectedNote?.id}
+        initialTitle={activeTab.draft.title}
+        initialDescription={activeTab.draft.description}
+        initialTags={activeTab.draft.tags}
+        initialSession={{ draft: activeTab.draft, view: activeTab.view }}
+        onDraftChange={controller.handleDraftChange}
+        onViewSessionChange={controller.handleViewSessionChange}
         availableTags={availableTags}
         tagCounts={tagCounts}
         isSaving={saving}
@@ -403,17 +433,20 @@ function EditorPane({
     )
   }
 
-  if (selectedNote) {
-    return (
-      <NoteView
-        note={selectedNote}
+  if (selectedNote) {
+    return (
+      <NoteView
+        key={`workspace-tab-${activeTabId}-note-${selectedNote.id}`}
+        note={selectedNote}
         onEdit={() => handleEditNote(selectedNote)}
         onDelete={() => handleDeleteNote(selectedNote)}
         onTagClick={controller.handleTagClick}
         onRemoveTag={(tag) => handleRemoveTagFromNote(selectedNote.id, tag)}
         onBack={onBack}
-        wordpressConfigured={wordpressConfigured}
-      />
+        wordpressConfigured={wordpressConfigured}
+        initialScrollTop={activeTab.view.scrollTop}
+        onViewSessionChange={controller.handleViewSessionChange}
+      />
     )
   }
 
diff --git a/ui/web/components/features/notes/NotesTabStrip.tsx b/ui/web/components/features/notes/NotesTabStrip.tsx
new file mode 100644
index 00000000000..56a90cd6ac2
--- /dev/null
+++ b/ui/web/components/features/notes/NotesTabStrip.tsx
@@ -0,0 +1,147 @@
+"use client"
+
+import type { KeyboardEvent } from "react"
+import { AlertCircle, Loader2, Plus, Circle, X } from "lucide-react"
+import type { NoteWorkspaceTab } from "@core/services/noteWorkspaceTabs"
+import { Button } from "@/components/ui/button"
+import { cn } from "@ui/web/lib/utils"
+
+export type NotesTabStripProps = {
+  tabs: NoteWorkspaceTab[]
+  activeTabId: string
+  onAddTab: () => void
+  onActivateTab: (tabId: string) => void | Promise<void>
+  onCloseTab: (tabId: string) => void | Promise<void>
+}
+
+function getTabLabel(tab: NoteWorkspaceTab): string {
+  const title = tab.note?.title?.trim() || tab.draft.title.trim()
+  if (title) return title
+  return tab.noteId ? "Untitled note" : "New note"
+}
+
+function SaveStateIndicator({ tab }: { tab: NoteWorkspaceTab }) {
+  if (tab.saveState === "dirty") {
+    return (
+      <span
+        className="inline-flex shrink-0 text-amber-600 dark:text-amber-400"
+        title="Unsaved changes"
+        aria-label="Unsaved changes"
+      >
+        <Circle className="h-2 w-2 fill-current" aria-hidden="true" />
+      </span>
+    )
+  }
+
+  if (tab.saveState === "saving") {
+    return (
+      <span
+        className="inline-flex shrink-0 text-muted-foreground"
+        title="Saving changes"
+        aria-label="Saving changes"
+      >
+        <Loader2 className="h-3.5 w-3.5 animate-spin" aria-hidden="true" />
+      </span>
+    )
+  }
+
+  if (tab.saveState === "error") {
+    return (
+      <span
+        className="inline-flex shrink-0 text-destructive"
+        title={tab.saveError || "Saving failed"}
+        aria-label={tab.saveError || "Saving failed"}
+      >
+        <AlertCircle className="h-3.5 w-3.5" aria-hidden="true" />
+      </span>
+    )
+  }
+
+  return null
+}
+
+function activateWithKeyboard(
+  event: KeyboardEvent<HTMLButtonElement>,
+  tabIndex: number,
+  tabs: NoteWorkspaceTab[],
+  onActivateTab: NotesTabStripProps["onActivateTab"],
+) {
+  if (event.key !== "ArrowLeft" && event.key !== "ArrowRight" && event.key !== "Home" && event.key !== "End") {
+    return
+  }
+
+  event.preventDefault()
+  const nextIndex = event.key === "Home"
+    ? 0
+    : event.key === "End"
+      ? tabs.length - 1
+      : (tabIndex + (event.key === "ArrowRight" ? 1 : -1) + tabs.length) % tabs.length
+  const nextTab = tabs[nextIndex]
+  if (nextTab) onActivateTab(nextTab.id)
+}
+
+export function NotesTabStrip({
+  tabs,
+  activeTabId,
+  onAddTab,
+  onActivateTab,
+  onCloseTab,
+}: NotesTabStripProps) {
+  return (
+    <div className="hidden min-w-0 items-center gap-1 border-b border-border/60 bg-background/80 px-2 py-1 backdrop-blur md:flex">
+      <div className="min-w-0 flex-1 overflow-x-auto" role="tablist" aria-label="Open notes">
+        <div className="flex min-w-max items-center gap-1">
+          {tabs.map((tab, index) => {
+            const label = getTabLabel(tab)
+            const isActive = tab.id === activeTabId
+
+            return (
+              <div
+                key={tab.id}
+                className={cn(
+                  "group flex min-w-0 max-w-56 items-center rounded-md border border-transparent",
+                  isActive && "border-border bg-muted/60",
+                )}
+                data-tab-id={tab.id}
+              >
+                <Button
+                  type="button"
+                  role="tab"
+                  aria-selected={isActive}
+                  tabIndex={isActive ? 0 : -1}
+                  variant="ghost"
+                  className={cn(
+                    "h-8 min-w-0 flex-1 justify-start rounded-md px-2 text-xs",
+                    isActive && "font-semibold text-foreground hover:bg-transparent",
+                  )}
+                  title={label}
+                  onClick={() => onActivateTab(tab.id)}
+                  onKeyDown={(event) => activateWithKeyboard(event, index, tabs, onActivateTab)}
+                >
+                  <span className="min-w-0 truncate">{label}</span>
+                  <SaveStateIndicator tab={tab} />
+                </Button>
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="icon"
+                  className="mr-0.5 h-6 w-6 shrink-0 text-muted-foreground opacity-70 hover:text-foreground group-hover:opacity-100"
+                  aria-label={`Close ${label}`}
+                  title={`Close ${label}`}
+                  onClick={() => onCloseTab(tab.id)}
+                >
+                  <X className="h-3.5 w-3.5" aria-hidden="true" />
+                </Button>
+              </div>
+            )
+          })}
+        </div>
+      </div>
+      <Button type="button" variant="ghost" size="icon" className="h-8 w-8 shrink-0" onClick={onAddTab} aria-label="Add note tab" title="Add note tab">
+        <Plus className="h-4 w-4" aria-hidden="true" />
+      </Button>
+    </div>
+  )
+}
+
+export { getTabLabel, SaveStateIndicator }
diff --git a/ui/web/hooks/useNoteAppController.ts b/ui/web/hooks/useNoteAppController.ts
index 51ba97e14b3..20e40b74357 100644
--- a/ui/web/hooks/useNoteAppController.ts
+++ b/ui/web/hooks/useNoteAppController.ts
@@ -12,7 +12,9 @@ import { useNoteSelection } from './useNoteSelection'
 import { useNoteSync } from './useNoteSync'
 import { useNoteData } from './useNoteData'
 import { useNoteSaveHandlers } from './useNoteSaveHandlers'
-import { useNoteBulkActions } from './useNoteBulkActions'
+import { useNoteBulkActions } from './useNoteBulkActions'
+import { useNoteWorkspaceTabs } from './useNoteWorkspaceTabs'
+import type { NoteDraftSnapshot, NoteViewSession } from '@core/services/noteWorkspaceTabs'
 import type { NoteEditorHandle } from '@ui/web/components/features/notes/NoteEditor'
 import { useSupabase } from '@ui/web/providers/SupabaseProvider'
 import { NoteService } from '@core/services/notes'
@@ -52,13 +54,13 @@ export function useNoteAppController() {
     deleteAccountLoading
   } = useNoteAuth()
 
-  // -- Selection --
-  const {
-    selectedNote,
-    setSelectedNote,
-    isEditing,
-    setIsEditing,
-    deleteDialogOpen,
+  // -- Selection --
+  const {
+    selectedNote: legacySelectedNote,
+    isEditing: legacyIsEditing,
+    setSelectedNote: setLegacySelectedNote,
+    setIsEditing: setLegacyIsEditing,
+    deleteDialogOpen,
     setDeleteDialogOpen,
     noteToDelete,
     setNoteToDelete,
@@ -66,17 +68,70 @@ export function useNoteAppController() {
     selectionMode,
     bulkDeleting,
     setBulkDeleting,
-    handleSelectNote,
-    handleSearchResultClick,
-    handleEditNote: handleEditNoteRaw,
-    handleCreateNote,
-    handleDeleteNote,
+    handleDeleteNote,
     enterSelectionMode,
     exitSelectionMode,
     toggleNoteSelection,
     selectAllVisible: selectAllVisibleCallback,
-    clearSelection,
-  } = useNoteSelection()
+    clearSelection,
+    handleSelectNote: handleSelectNoteLegacy,
+    handleSearchResultClick: handleSearchResultClickLegacy,
+    handleEditNote: handleEditNoteRaw,
+    handleCreateNote,
+  } = useNoteSelection()
+
+  // -- Notes workspace tabs --
+  // The existing selection hook still owns bulk-selection/dialog state. The
+  // selected note and editor mode are now derived from the active workspace tab
+  // so every save/navigation consumer observes the same session.
+  const workspace = useNoteWorkspaceTabs()
+  const {
+    activeTab,
+    hydrated: workspaceHydrated,
+    tabs,
+    activeTabId,
+    addTab,
+    activateTab,
+    openNote,
+    updateTab,
+    closeTab,
+    findTabByNoteId,
+  } = workspace
+  const selectedNote = activeTab.note
+  const isEditing = activeTab.mode === 'editing'
+  const [notePaneVisible, setNotePaneVisible] = useState(false)
+  const legacyBridgeAppliedRef = useRef(false)
+
+  const setSelectedNote = useCallback((value: NoteViewModel | null | ((previous: NoteViewModel | null) => NoteViewModel | null)) => {
+    const currentNote = activeTab.note
+    const note = typeof value === 'function' ? value(currentNote) : value
+    updateTab(activeTabId, {
+      note,
+      noteId: note?.id ?? null,
+    })
+  }, [activeTab.note, activeTabId, updateTab])
+
+  const setIsEditing = useCallback((value: boolean | ((previous: boolean) => boolean)) => {
+    const editing = typeof value === 'function' ? value(isEditing) : value
+    updateTab(activeTabId, { mode: editing ? 'editing' : 'reading' })
+  }, [activeTabId, isEditing, updateTab])
+
+  useEffect(() => {
+    if (!workspaceHydrated || legacyBridgeAppliedRef.current) return
+    legacyBridgeAppliedRef.current = true
+    if (activeTab.note || (!legacySelectedNote && !legacyIsEditing)) return
+    updateTab(activeTabId, {
+      ...(legacySelectedNote ? { note: legacySelectedNote, noteId: legacySelectedNote.id } : {}),
+      mode: legacyIsEditing ? 'editing' : 'reading',
+    })
+  }, [
+    activeTab.note,
+    legacyIsEditing,
+    legacySelectedNote,
+    activeTabId,
+    updateTab,
+    workspaceHydrated,
+  ])
 
   // -- Editor ref (cross-cutting: bridges UI editor with save/navigation logic) --
   const noteEditorRef = useRef<React.RefObject<NoteEditorHandle | null> | null>(null)
@@ -85,12 +140,27 @@ export function useNoteAppController() {
     noteEditorRef.current = ref
   }, [])
 
-  const flushPendingEditorSave = useCallback(async () => {
-    if (!isEditing) return
-    const handle = noteEditorRef.current?.current
-    if (!handle) return
-    await handle.flushPendingSave()
-  }, [isEditing])
+  const flushPendingEditorSave = useCallback(async () => {
+    if (!isEditing) return
+    const handle = noteEditorRef.current?.current
+    if (!handle) return
+    await handle.flushPendingSave()
+  }, [isEditing])
+
+  const captureActiveTabSession = useCallback(() => {
+    const session = noteEditorRef.current?.current?.captureSession?.()
+    if (!session) return
+
+    updateTab(activeTabId, {
+      draft: session.draft as NoteDraftSnapshot,
+      view: session.view as NoteViewSession,
+    })
+  }, [activeTabId, updateTab])
+
+  const flushAndCaptureActiveTab = useCallback(async () => {
+    await flushPendingEditorSave()
+    captureActiveTabSession()
+  }, [captureActiveTabSession, flushPendingEditorSave])
 
   // -- Infrastructure --
   const queryClient = useQueryClient()
@@ -265,8 +335,70 @@ export function useNoteAppController() {
     setNoteToDelete,
     notes,
     notesRef,
-    selectedNoteRef,
-  })
+    selectedNoteRef,
+  })
+
+  const handleDraftChange = useCallback((draft: NoteDraftSnapshot) => {
+    updateTab(activeTabId, {
+      draft,
+      saveState: 'dirty',
+      saveError: null,
+    })
+  }, [activeTabId, updateTab])
+
+  const handleViewSessionChange = useCallback((view: Partial<NoteViewSession>) => {
+    updateTab(activeTabId, { view })
+  }, [activeTabId, updateTab])
+
+  const handleAutoSaveWithWorkspace = useCallback(async (data: {
+    noteId?: string
+    title: string
+    description: string
+    tags: string
+  }) => {
+    updateTab(activeTabId, {
+      draft: { title: data.title, description: data.description, tags: data.tags },
+      saveState: 'saving',
+      saveError: null,
+    })
+    try {
+      const result = await handleAutoSave(data)
+      updateTab(activeTabId, { saveState: 'saved', saveError: null })
+      return result
+    } catch (error) {
+      const message = error instanceof Error ? error.message : String(error)
+      updateTab(activeTabId, { saveState: 'error', saveError: message })
+      throw error
+    }
+  }, [activeTabId, handleAutoSave, updateTab])
+
+  const handleSaveNoteWithWorkspace = useCallback(async (data: {
+    title: string
+    description: string
+    tags: string
+  }) => {
+    updateTab(activeTabId, {
+      draft: data,
+      saveState: 'saving',
+      saveError: null,
+    })
+    await handleSaveNote(data)
+    updateTab(activeTabId, { saveState: 'saved', saveError: null })
+  }, [activeTabId, handleSaveNote, updateTab])
+
+  const handleReadNoteWithWorkspace = useCallback(async (data: {
+    title: string
+    description: string
+    tags: string
+  }) => {
+    updateTab(activeTabId, {
+      draft: data,
+      saveState: 'saving',
+      saveError: null,
+    })
+    await handleReadNote(data)
+    updateTab(activeTabId, { saveState: 'saved', saveError: null })
+  }, [activeTabId, handleReadNote, updateTab])
 
   // -- Bulk actions --
   const { selectAllVisible, deleteSelectedNotes, deleteNotesByIds } = useNoteBulkActions({
@@ -285,72 +417,193 @@ export function useNoteAppController() {
     selectAllVisibleCallback,
   })
 
-  // -- Nav wrappers: flush pending editor save before any navigation --
-  const wrappedHandleSelectNote = useCallback(async (note: NoteViewModel | null) => {
-    const requestId = ++latestSelectRequestRef.current
-    await flushPendingEditorSave()
-    if (requestId !== latestSelectRequestRef.current) return
-    clearActiveSettingsNoteReturnPath()
-    if (note?.id && selectedNoteRef.current?.id === note.id) {
-      setIsEditing(false)
-      setLastSavedAt(null)
-      return
-    }
-    const openableNote = note ? await resolveOpenableNote(note) : null
-    if (requestId !== latestSelectRequestRef.current) return
-    if (note && !openableNote) return
-    handleSelectNote(openableNote)
-    setLastSavedAt(null)
-  }, [flushPendingEditorSave, handleSelectNote, resolveOpenableNote, setLastSavedAt, setIsEditing])
-
-  const wrappedHandleCreateNote = useCallback(async () => {
-    await flushPendingEditorSave()
-    clearActiveSettingsNoteReturnPath()
-    handleCreateNote()
-    setLastSavedAt(null)
-  }, [flushPendingEditorSave, handleCreateNote, setLastSavedAt])
-
-  const wrappedHandleEditNote = useCallback(async (note: NoteViewModel) => {
-    const requestId = ++latestEditRequestRef.current
-    await flushPendingEditorSave()
-    if (requestId !== latestEditRequestRef.current) return
-    const openableNote = await resolveOpenableNote(note)
-    if (requestId !== latestEditRequestRef.current) return
-    if (!openableNote) {
-      handleSelectNote(null)
-      return
-    }
-    handleEditNoteRaw(openableNote)
-    setLastSavedAt(null)
-  }, [flushPendingEditorSave, handleEditNoteRaw, handleSelectNote, resolveOpenableNote, setLastSavedAt])
-
-  const handleTagClick = useCallback(async (tag: string) => {
-    await flushPendingEditorSave()
-    clearActiveSettingsNoteReturnPath()
-    onTagClick(tag)
-    setSelectedNote(null)
-    setIsEditing(false)
-    setLastSavedAt(null)
-  }, [flushPendingEditorSave, onTagClick, setSelectedNote, setIsEditing, setLastSavedAt])
-
-  const wrappedHandleSearchResultClick = useCallback(async (note: SearchResult) => {
-    const requestId = ++latestSearchClickRequestRef.current
-    await flushPendingEditorSave()
-    if (requestId !== latestSearchClickRequestRef.current) return
-    clearActiveSettingsNoteReturnPath()
-    if (note?.id && selectedNoteRef.current?.id === note.id) {
-      setIsEditing(false)
-      setLastSavedAt(null)
-      return
-    }
-    const openableNote = await resolveOpenableNote(resolveSearchResult(note))
-    if (requestId !== latestSearchClickRequestRef.current) return
-    if (!openableNote) return
-    handleSearchResultClick(openableNote)
-    setLastSavedAt(null)
-  }, [flushPendingEditorSave, handleSearchResultClick, resolveOpenableNote, resolveSearchResult, setLastSavedAt, setIsEditing])
-
-  const aiPaginationControlsRef = useRef<AIPaginationControls>({
+  // -- Nav wrappers: flush pending editor save before any navigation --
+  const wrappedHandleSelectNote = useCallback(async (note: NoteViewModel | null) => {
+    const requestId = ++latestSelectRequestRef.current
+    await flushAndCaptureActiveTab()
+    if (requestId !== latestSelectRequestRef.current) return
+    clearActiveSettingsNoteReturnPath()
+    if (!note) {
+      // Mobile back/search navigation hides the pane without closing the tab.
+      handleSelectNoteLegacy(null)
+      setNotePaneVisible(false)
+      setLastSavedAt(null)
+      return
+    }
+
+    const existingTab = findTabByNoteId(note.id)
+    if (existingTab) {
+      activateTab(existingTab.id)
+      setNotePaneVisible(true)
+      if (existingTab.id === activeTabId) {
+        setLegacyIsEditing(false)
+        setIsEditing(false)
+      }
+      setLastSavedAt(null)
+      return
+    }
+
+    const openableNote = await resolveOpenableNote(note)
+    if (requestId !== latestSelectRequestRef.current) return
+    if (!openableNote) return
+    openNote(openableNote)
+    handleSelectNoteLegacy(openableNote)
+    setNotePaneVisible(true)
+    setLastSavedAt(null)
+  }, [
+    flushAndCaptureActiveTab,
+    resolveOpenableNote,
+    setIsEditing,
+    setLastSavedAt,
+    activeTabId,
+    activateTab,
+    findTabByNoteId,
+    openNote,
+    handleSelectNoteLegacy,
+    setLegacyIsEditing,
+  ])
+
+  const wrappedHandleCreateNote = useCallback(async () => {
+    await flushAndCaptureActiveTab()
+    clearActiveSettingsNoteReturnPath()
+    updateTab(activeTabId, {
+      note: null,
+      noteId: null,
+      mode: 'editing',
+      draft: { title: '', description: '', tags: '' },
+      view: { scrollTop: 0, titleSelection: undefined, editorSelection: undefined },
+      saveState: 'saved',
+      saveError: null,
+    })
+    handleCreateNote()
+    setNotePaneVisible(true)
+    setLastSavedAt(null)
+  }, [activeTabId, flushAndCaptureActiveTab, handleCreateNote, setLastSavedAt, updateTab])
+
+  const wrappedHandleEditNote = useCallback(async (note: NoteViewModel) => {
+    const requestId = ++latestEditRequestRef.current
+    await flushAndCaptureActiveTab()
+    if (requestId !== latestEditRequestRef.current) return
+    const openableNote = await resolveOpenableNote(note)
+    if (requestId !== latestEditRequestRef.current) return
+    if (!openableNote) {
+      handleSelectNoteLegacy(null)
+      setNotePaneVisible(false)
+      return
+    }
+
+    const existingTab = findTabByNoteId(openableNote.id)
+    if (existingTab) {
+      activateTab(existingTab.id)
+      updateTab(existingTab.id, { mode: 'editing', saveState: 'saved', saveError: null })
+      handleEditNoteRaw(openableNote)
+    } else {
+      openNote(openableNote)
+      updateTab(activeTabId, { mode: 'editing', saveState: 'saved', saveError: null })
+      handleEditNoteRaw(openableNote)
+    }
+    setNotePaneVisible(true)
+    setLastSavedAt(null)
+  }, [
+    flushAndCaptureActiveTab,
+    resolveOpenableNote,
+    setLastSavedAt,
+    activeTabId,
+    activateTab,
+    findTabByNoteId,
+    openNote,
+    updateTab,
+    handleEditNoteRaw,
+    handleSelectNoteLegacy,
+  ])
+
+  const handleTagClick = useCallback(async (tag: string) => {
+    await flushAndCaptureActiveTab()
+    clearActiveSettingsNoteReturnPath()
+    onTagClick(tag)
+    setLegacySelectedNote(null)
+    setLegacyIsEditing(false)
+    setNotePaneVisible(false)
+    setLastSavedAt(null)
+  }, [flushAndCaptureActiveTab, onTagClick, setLastSavedAt, setLegacySelectedNote, setLegacyIsEditing])
+
+  const wrappedHandleSearchResultClick = useCallback(async (note: SearchResult) => {
+    const requestId = ++latestSearchClickRequestRef.current
+    await flushAndCaptureActiveTab()
+    if (requestId !== latestSearchClickRequestRef.current) return
+    clearActiveSettingsNoteReturnPath()
+    const resolvedSearchNote = resolveSearchResult(note)
+    const existingTab = findTabByNoteId(resolvedSearchNote.id)
+    if (existingTab) {
+      activateTab(existingTab.id)
+      handleSearchResultClickLegacy(resolvedSearchNote)
+      setNotePaneVisible(true)
+      setLastSavedAt(null)
+      return
+    }
+    const openableNote = await resolveOpenableNote(resolvedSearchNote)
+    if (requestId !== latestSearchClickRequestRef.current) return
+    if (!openableNote) return
+    openNote(openableNote)
+    handleSearchResultClickLegacy(openableNote)
+    setNotePaneVisible(true)
+    setLastSavedAt(null)
+  }, [
+    flushAndCaptureActiveTab,
+    resolveOpenableNote,
+    resolveSearchResult,
+    setLastSavedAt,
+    activateTab,
+    findTabByNoteId,
+    openNote,
+    handleSearchResultClickLegacy,
+  ])
+
+  const handleAddTab = useCallback(async () => {
+    await flushAndCaptureActiveTab()
+    addTab()
+    setNotePaneVisible(true)
+  }, [addTab, flushAndCaptureActiveTab])
+
+  const handleActivateTab = useCallback(async (tabId: string) => {
+    if (tabId === activeTabId) return
+    await flushAndCaptureActiveTab()
+    activateTab(tabId)
+    setNotePaneVisible(true)
+    setLastSavedAt(null)
+  }, [activateTab, activeTabId, flushAndCaptureActiveTab, setLastSavedAt])
+
+  const handleCloseTab = useCallback(async (tabId: string) => {
+    const tab = tabs.find((candidate) => candidate.id === tabId)
+    if (!tab) return
+
+    const discardFailedSave = tab.saveState === 'error'
+      && typeof window !== 'undefined'
+      && window.confirm(`Discard unsaved changes in "${tab.note?.title || 'this tab'}"?`)
+    if (tab.saveState === 'error' && !discardFailedSave) return
+
+    if (tab.id === activeTabId && !discardFailedSave) {
+      try {
+        await flushAndCaptureActiveTab()
+      } catch {
+        return
+      }
+    }
+
+    closeTab(tabId)
+    setNotePaneVisible(true)
+    setLastSavedAt(null)
+  }, [activeTabId, closeTab, flushAndCaptureActiveTab, setLastSavedAt, tabs])
+
+  const workspaceHydrationAppliedRef = useRef(false)
+  useEffect(() => {
+    if (!workspaceHydrated || workspaceHydrationAppliedRef.current) return
+    workspaceHydrationAppliedRef.current = true
+    // eslint-disable-next-line react-hooks/set-state-in-effect -- restore pane visibility from sessionStorage
+    setNotePaneVisible(Boolean(activeTab.note || activeTab.mode === 'editing'))
+  }, [activeTab, workspaceHydrated])
+
+  const aiPaginationControlsRef = useRef<AIPaginationControls>({
     resetAIResults: () => {},
     loadMoreAI: () => {},
   })
@@ -367,8 +620,8 @@ export function useNoteAppController() {
     aiPaginationControlsRef.current.loadMoreAI()
   }, [])
 
-  const captureSettingsReturnState = useCallback(async (): Promise<NotesUiStateSnapshot> => {
-    await flushPendingEditorSave()
+  const captureSettingsReturnState = useCallback(async (): Promise<NotesUiStateSnapshot> => {
+    await flushAndCaptureActiveTab()
     const selectedNoteForSnapshot = selectedNoteRef.current
 
     return {
@@ -379,7 +632,7 @@ export function useNoteAppController() {
       searchQuery,
       filterByTag,
     }
-  }, [filterByTag, flushPendingEditorSave, isEditing, isSearchPanelOpen, searchQuery, selectedNoteRef])
+  }, [filterByTag, flushAndCaptureActiveTab, isEditing, isSearchPanelOpen, searchQuery, selectedNoteRef])
 
   const restoreUiState = useCallback(async (snapshot: NotesUiStateSnapshot) => {
     // Temporary bridge for the /settings route. The contract is intentionally narrow
@@ -417,19 +670,43 @@ export function useNoteAppController() {
       snapshot.isEditing &&
       (restoredSelectedNote !== null || snapshot.selectedNoteId === null)
 
-    setSelectedNote(restoredSelectedNote)
-    setIsEditing(canRestoreEditing)
-  }, [
+    if (restoredSelectedNote) {
+      setLegacySelectedNote(restoredSelectedNote)
+      setLegacyIsEditing(canRestoreEditing)
+      const existingTab = findTabByNoteId(restoredSelectedNote.id)
+      if (existingTab) {
+        activateTab(existingTab.id)
+        updateTab(existingTab.id, { mode: canRestoreEditing ? 'editing' : 'reading' })
+      } else {
+        openNote(restoredSelectedNote)
+        updateTab(activeTabId, { mode: canRestoreEditing ? 'editing' : 'reading' })
+      }
+    } else {
+      setLegacySelectedNote(null)
+      setLegacyIsEditing(canRestoreEditing)
+      updateTab(activeTabId, {
+        note: null,
+        noteId: null,
+        mode: canRestoreEditing ? 'editing' : 'reading',
+      })
+    }
+    setNotePaneVisible(Boolean(restoredSelectedNote || canRestoreEditing))
+  }, [
     handleClearTagFilter,
-    handleSearch,
+    handleSearch,
+    setLegacyIsEditing,
+    setLegacySelectedNote,
     noteService,
     notesRef,
     onTagClick,
     resetFtsResults,
-    setIsEditing,
-    setIsSearchPanelOpen,
-    setSelectedNote,
-  ])
+    setIsSearchPanelOpen,
+    activeTabId,
+    activateTab,
+    findTabByNoteId,
+    openNote,
+    updateTab,
+  ])
 
   // -- Main Navigation View --
   const [activeMainView, setActiveMainView] = useState<'notes' | 'tags'>(() => {
@@ -556,10 +833,14 @@ export function useNoteAppController() {
     // State
     user,
     loading: authLoadingState,
-    selectedNote,
-    searchQuery,
-    isEditing,
-    setIsEditing,
+    selectedNote,
+    searchQuery,
+    isEditing,
+    notePaneVisible,
+    tabs,
+    activeTabId,
+    activeTab,
+    setIsEditing,
     isSearchPanelOpen,
     setIsSearchPanelOpen,
     saving,
@@ -616,16 +897,21 @@ export function useNoteAppController() {
     handleSkipAuth,
     handleSignOut,
     handleDeleteAccount,
-    handleCreateNote: wrappedHandleCreateNote,
-    handleEditNote: wrappedHandleEditNote,
-    handleSaveNote,
-    handleReadNote,
-    handleAutoSave,
+    handleCreateNote: wrappedHandleCreateNote,
+    handleEditNote: wrappedHandleEditNote,
+    handleSaveNote: handleSaveNoteWithWorkspace,
+    handleReadNote: handleReadNoteWithWorkspace,
+    handleAutoSave: handleAutoSaveWithWorkspace,
+    handleDraftChange,
+    handleViewSessionChange,
     handleDeleteNote,
     confirmDeleteNote,
     handleRemoveTagFromNote,
     handleSelectNote: wrappedHandleSelectNote,
-    handleSearchResultClick: wrappedHandleSearchResultClick,
+    handleSearchResultClick: wrappedHandleSearchResultClick,
+    addTab: handleAddTab,
+    activateTab: handleActivateTab,
+    closeTab: handleCloseTab,
     enterSelectionMode,
     exitSelectionMode,
     toggleNoteSelection,
diff --git a/ui/web/hooks/useNoteWorkspaceTabs.ts b/ui/web/hooks/useNoteWorkspaceTabs.ts
new file mode 100644
index 00000000000..a6932b4bda9
--- /dev/null
+++ b/ui/web/hooks/useNoteWorkspaceTabs.ts
@@ -0,0 +1,69 @@
+import { useCallback, useEffect, useMemo, useState } from 'react'
+import {
+  activateWorkspaceTab,
+  addWorkspaceTab,
+  closeWorkspaceTab,
+  createNoteWorkspaceState,
+  findWorkspaceTabByNoteId,
+  getActiveWorkspaceTab,
+  openNoteInWorkspace,
+  updateWorkspaceTab,
+  type NoteWorkspaceTabPatch,
+} from '@core/services/noteWorkspaceTabs'
+import type { NoteViewModel } from '@core/types/domain'
+import { readNoteWorkspaceState, writeNoteWorkspaceState } from '@ui/web/lib/noteWorkspaceStorage'
+
+export function useNoteWorkspaceTabs() {
+  const [state, setState] = useState(createNoteWorkspaceState)
+  const [hydrated, setHydrated] = useState(false)
+
+  useEffect(() => {
+    // The first render must be identical on server and client. sessionStorage is
+    // loaded after hydration, then the controller applies the restored active tab.
+    // eslint-disable-next-line react-hooks/set-state-in-effect -- sessionStorage is a browser-only hydration source
+    setState(readNoteWorkspaceState())
+    setHydrated(true)
+  }, [])
+
+  useEffect(() => {
+    if (!hydrated) return
+    writeNoteWorkspaceState(state)
+  }, [hydrated, state])
+
+  const addTab = useCallback(() => {
+    setState((current) => addWorkspaceTab(current))
+  }, [])
+
+  const activateTab = useCallback((tabId: string) => {
+    setState((current) => activateWorkspaceTab(current, tabId))
+  }, [])
+
+  const openNote = useCallback((note: NoteViewModel, tabId?: string) => {
+    setState((current) => openNoteInWorkspace(current, note, tabId))
+  }, [])
+
+  const updateTab = useCallback((tabId: string, patch: NoteWorkspaceTabPatch) => {
+    setState((current) => updateWorkspaceTab(current, tabId, patch))
+  }, [])
+
+  const closeTab = useCallback((tabId: string) => {
+    setState((current) => closeWorkspaceTab(current, tabId))
+  }, [])
+
+  const activeTab = useMemo(() => getActiveWorkspaceTab(state), [state])
+  const findTabByNoteId = useCallback((noteId: string | null | undefined) => (
+    findWorkspaceTabByNoteId(state, noteId)
+  ), [state])
+
+  return {
+    ...state,
+    activeTab,
+    hydrated,
+    addTab,
+    activateTab,
+    openNote,
+    updateTab,
+    closeTab,
+    findTabByNoteId,
+  }
+}
diff --git a/ui/web/lib/noteWorkspaceStorage.ts b/ui/web/lib/noteWorkspaceStorage.ts
new file mode 100644
index 00000000000..af4d000928a
--- /dev/null
+++ b/ui/web/lib/noteWorkspaceStorage.ts
@@ -0,0 +1,56 @@
+import {
+  hydrateNoteWorkspaceState,
+  serializeNoteWorkspaceState,
+  type NoteWorkspaceIdFactory,
+  type NoteWorkspaceState,
+} from '@core/services/noteWorkspaceTabs'
+
+export const NOTE_WORKSPACE_STORAGE_KEY = 'everfreenote:notes-workspace:v1'
+
+function getSessionStorage(): Storage | null {
+  if (typeof globalThis.window === 'undefined') return null
+
+  try {
+    return globalThis.window.sessionStorage
+  } catch {
+    return null
+  }
+}
+
+export function readNoteWorkspaceState(
+  storage: Storage | null = getSessionStorage(),
+  idFactory?: NoteWorkspaceIdFactory,
+): NoteWorkspaceState {
+  if (!storage) return hydrateNoteWorkspaceState(null, idFactory)
+
+  try {
+    return hydrateNoteWorkspaceState(storage.getItem(NOTE_WORKSPACE_STORAGE_KEY), idFactory)
+  } catch {
+    return hydrateNoteWorkspaceState(null, idFactory)
+  }
+}
+
+export function writeNoteWorkspaceState(
+  state: NoteWorkspaceState,
+  storage: Storage | null = getSessionStorage(),
+): boolean {
+  if (!storage) return false
+
+  try {
+    storage.setItem(NOTE_WORKSPACE_STORAGE_KEY, serializeNoteWorkspaceState(state))
+    return true
+  } catch {
+    // Quota/private-mode failures must not block the in-memory workspace.
+    return false
+  }
+}
+
+export function clearNoteWorkspaceState(storage: Storage | null = getSessionStorage()): void {
+  if (!storage) return
+
+  try {
+    storage.removeItem(NOTE_WORKSPACE_STORAGE_KEY)
+  } catch {
+    // Best effort only.
+  }
+}
diff --git a/ui/web/tests/unit/components/notesWorkspaceTabs.test.tsx b/ui/web/tests/unit/components/notesWorkspaceTabs.test.tsx
new file mode 100644
index 00000000000..dd1b8c8460d
--- /dev/null
+++ b/ui/web/tests/unit/components/notesWorkspaceTabs.test.tsx
@@ -0,0 +1,103 @@
+import React from 'react'
+import { fireEvent, render, screen } from '@testing-library/react'
+import { NotesTabStrip } from '@/components/features/notes/NotesTabStrip'
+import { MobileNotesTabMenu } from '@/components/features/notes/MobileNotesTabMenu'
+import type { NoteWorkspaceTab } from '@core/services/noteWorkspaceTabs'
+
+const makeTab = (id: string, title: string, overrides: Partial<NoteWorkspaceTab> = {}): NoteWorkspaceTab => ({
+  id,
+  noteId: id,
+  note: {
+    id,
+    title,
+    description: '',
+    tags: [],
+    created_at: '2026-08-01T00:00:00.000Z',
+    updated_at: '2026-08-01T00:00:00.000Z',
+    user_id: 'user-1',
+  },
+  mode: 'reading',
+  draft: { title, description: '', tags: '' },
+  view: { scrollTop: 0 },
+  saveState: 'saved',
+  saveError: null,
+  ...overrides,
+})
+
+const tabs = [
+  makeTab('tab-1', 'First note'),
+  makeTab('tab-2', 'Second note', { saveState: 'dirty' }),
+]
+
+describe('Notes workspace tab controls', () => {
+  it('renders desktop tabs, save indicators, add, activation, and close actions', () => {
+    const onAddTab = jest.fn()
+    const onActivateTab = jest.fn()
+    const onCloseTab = jest.fn()
+
+    render(
+      <NotesTabStrip
+        tabs={tabs}
+        activeTabId="tab-1"
+        onAddTab={onAddTab}
+        onActivateTab={onActivateTab}
+        onCloseTab={onCloseTab}
+      />,
+    )
+
+    expect(screen.getByRole('tab', { name: 'First note' }).getAttribute('aria-selected')).toBe('true')
+    expect(screen.getByRole('tab', { name: /Second note/ }).getAttribute('aria-selected')).toBe('false')
+    expect(screen.getByLabelText('Unsaved changes')).toBeTruthy()
+
+    fireEvent.click(screen.getByRole('tab', { name: /Second note/ }))
+    fireEvent.click(screen.getByRole('button', { name: 'Close First note' }))
+    fireEvent.click(screen.getByRole('button', { name: 'Add note tab' }))
+
+    expect(onActivateTab).toHaveBeenCalledWith('tab-2')
+    expect(onCloseTab).toHaveBeenCalledWith('tab-1')
+    expect(onAddTab).toHaveBeenCalledTimes(1)
+  })
+
+  it('supports keyboard tab navigation', () => {
+    const onActivateTab = jest.fn()
+
+    render(
+      <NotesTabStrip
+        tabs={tabs}
+        activeTabId="tab-1"
+        onAddTab={jest.fn()}
+        onActivateTab={onActivateTab}
+        onCloseTab={jest.fn()}
+      />,
+    )
+
+    fireEvent.keyDown(screen.getByRole('tab', { name: 'First note' }), { key: 'ArrowRight' })
+    expect(onActivateTab).toHaveBeenCalledWith('tab-2')
+  })
+
+  it('opens the compact mobile list and forwards activation, close, and add actions', () => {
+    const onAddTab = jest.fn()
+    const onActivateTab = jest.fn()
+    const onCloseTab = jest.fn()
+
+    render(
+      <MobileNotesTabMenu
+        tabs={tabs}
+        activeTabId="tab-1"
+        onAddTab={onAddTab}
+        onActivateTab={onActivateTab}
+        onCloseTab={onCloseTab}
+      />,
+    )
+
+    fireEvent.click(screen.getByRole('button', { name: 'Open note tabs (2)' }))
+    fireEvent.click(screen.getByRole('option', { name: /Second note/ }))
+    fireEvent.click(screen.getByRole('button', { name: 'Open note tabs (2)' }))
+    fireEvent.click(screen.getByRole('button', { name: 'Close First note' }))
+    fireEvent.click(screen.getByRole('button', { name: 'Add tab' }))
+
+    expect(onActivateTab).toHaveBeenCalledWith('tab-2')
+    expect(onCloseTab).toHaveBeenCalledWith('tab-1')
+    expect(onAddTab).toHaveBeenCalledTimes(1)
+  })
+})
diff --git a/ui/web/tests/unit/hooks/useNoteAppController.remoteDelete.test.tsx b/ui/web/tests/unit/hooks/useNoteAppController.remoteDelete.test.tsx
index 1fac75bcd00..693cacd731f 100644
--- a/ui/web/tests/unit/hooks/useNoteAppController.remoteDelete.test.tsx
+++ b/ui/web/tests/unit/hooks/useNoteAppController.remoteDelete.test.tsx
@@ -221,6 +221,7 @@ function createWrapper() {
 
 describe('useNoteAppController — remote delete consistency', () => {
   beforeEach(() => {
+    window.sessionStorage.clear()
     mockIsOffline = false
     mockOfflineOverlay = []
     mockGetNoteStatus.mockReset()
diff --git a/ui/web/tests/unit/hooks/useNoteAppControllerAdditional.test.tsx b/ui/web/tests/unit/hooks/useNoteAppControllerAdditional.test.tsx
index 538557f8550..7e4420333ce 100644
--- a/ui/web/tests/unit/hooks/useNoteAppControllerAdditional.test.tsx
+++ b/ui/web/tests/unit/hooks/useNoteAppControllerAdditional.test.tsx
@@ -217,6 +217,7 @@ function setup() {
 describe('useNoteAppController additional observable behavior', () => {
   beforeEach(() => {
     jest.clearAllMocks()
+    window.sessionStorage.clear()
     mockSelectedNote = null
     mockIsEditing = true
     mockIsOffline = false
@@ -248,8 +249,8 @@ describe('useNoteAppController additional observable behavior', () => {
 
     const snapshot = await act(async () => result.current.captureSettingsReturnState())
     expect(snapshot).toEqual({
-      selectedNoteId: note.id,
-      selectedNote: note,
+      selectedNoteId: null,
+      selectedNote: null,
       isEditing: true,
       isSearchPanelOpen: true,
       searchQuery: 'initial search',
@@ -275,7 +276,7 @@ describe('useNoteAppController additional observable behavior', () => {
 
     jest.clearAllMocks()
     await act(async () => {
-      await result.current.handleSelectNote(current)
+      await result.current.handleSelectNote(remote)
     })
     expect(mockGetNoteStatus).not.toHaveBeenCalled()
     expect(mockSetIsEditing).toHaveBeenCalledWith(false)
diff --git a/ui/web/tests/unit/lib/noteWorkspaceStorage.test.ts b/ui/web/tests/unit/lib/noteWorkspaceStorage.test.ts
new file mode 100644
index 00000000000..cd963148f5f
--- /dev/null
+++ b/ui/web/tests/unit/lib/noteWorkspaceStorage.test.ts
@@ -0,0 +1,68 @@
+import {
+  clearNoteWorkspaceState,
+  NOTE_WORKSPACE_STORAGE_KEY,
+  readNoteWorkspaceState,
+  writeNoteWorkspaceState,
+} from '@ui/web/lib/noteWorkspaceStorage'
+import {
+  createNoteWorkspaceState,
+  openNoteInWorkspace,
+} from '@core/services/noteWorkspaceTabs'
+import type { NoteViewModel } from '@core/types/domain'
+
+const note: NoteViewModel = {
+  id: 'note-1',
+  title: 'Persisted note',
+  description: '<p>Draft</p>',
+  tags: ['work'],
+  created_at: '2026-08-01T00:00:00.000Z',
+  updated_at: '2026-08-01T00:00:00.000Z',
+  user_id: 'user-1',
+}
+
+describe('note workspace session storage', () => {
+  beforeEach(() => {
+    window.sessionStorage.clear()
+  })
+
+  it('round-trips workspace state through the versioned session key', () => {
+    const state = openNoteInWorkspace(createNoteWorkspaceState(() => 'tab-1'), note)
+
+    expect(writeNoteWorkspaceState(state)).toBe(true)
+    expect(window.sessionStorage.getItem(NOTE_WORKSPACE_STORAGE_KEY)).toContain('note-1')
+    expect(readNoteWorkspaceState()).toEqual(state)
+  })
+
+  it('uses a blank workspace when stored JSON is invalid', () => {
+    window.sessionStorage.setItem(NOTE_WORKSPACE_STORAGE_KEY, '{invalid')
+
+    const state = readNoteWorkspaceState(window.sessionStorage, () => 'fallback-tab')
+
+    expect(state.tabs).toHaveLength(1)
+    expect(state.activeTabId).toBe('fallback-tab')
+    expect(state.tabs[0].noteId).toBeNull()
+  })
+
+  it('keeps the in-memory contract when storage access throws', () => {
+    const throwingStorage = {
+      getItem: () => { throw new Error('blocked') },
+      setItem: () => { throw new Error('quota') },
+      removeItem: () => { throw new Error('blocked') },
+    } as unknown as Storage
+    const state = createNoteWorkspaceState(() => 'tab-1')
+
+    expect(readNoteWorkspaceState(throwingStorage, () => 'fallback-tab').activeTabId).toBe('fallback-tab')
+    expect(writeNoteWorkspaceState(state, throwingStorage)).toBe(false)
+    expect(() => clearNoteWorkspaceState(throwingStorage)).not.toThrow()
+  })
+
+  it('clears only the workspace key', () => {
+    window.sessionStorage.setItem(NOTE_WORKSPACE_STORAGE_KEY, 'state')
+    window.sessionStorage.setItem('unrelated', 'keep')
+
+    clearNoteWorkspaceState()
+
+    expect(window.sessionStorage.getItem(NOTE_WORKSPACE_STORAGE_KEY)).toBeNull()
+    expect(window.sessionStorage.getItem('unrelated')).toBe('keep')
+  })
+})

From 6ff1dcde6f92d5d656095e0cff4a6a9195be4e41 Mon Sep 17 00:00:00 2001
From: Denys <koreybadenis@gmail.com>
Date: Sat, 1 Aug 2026 22:02:47 +0200
Subject: [PATCH 02/23] fix(notes): harden workspace tab lifecycle

---
 core/services/noteWorkspaceTabs.ts            |  94 +++++++++----
 .../core-services-noteWorkspaceTabs.test.ts   |  12 ++
 .../notes/NotesShellFtsExitSave.cy.tsx        |  25 ++++
 .../notes/NotesShellLikeExitSave.cy.tsx       |  25 ++++
 .../notes/NotesShellOpenInContext.cy.tsx      |  25 ++++
 .../2026-08-01-feature-notes-tabs.md          |   5 +-
 .../planning/2026-08-01-feature-notes-tabs.md |   2 +-
 .../testing/2026-08-01-feature-notes-tabs.md  |   3 +
 .../features/notes/MobileNotesTabMenu.tsx     |  11 +-
 .../components/features/notes/NoteEditor.tsx  |   6 +-
 .../features/notes/NotesTabStrip.tsx          |  22 +--
 ui/web/hooks/useNoteAppController.ts          | 129 +++++++++++-------
 ui/web/hooks/useNoteSaveHandlers.ts           |  11 +-
 ui/web/hooks/useNoteWorkspaceTabs.ts          |   6 +-
 ui/web/lib/noteWorkspaceStorage.ts            |   2 +-
 .../tests/unit/components/notesShell.test.tsx |  32 ++++-
 .../components/notesWorkspaceTabs.test.tsx    |   2 +-
 .../useNoteAppControllerAdditional.test.tsx   |  50 ++++++-
 .../unit/hooks/useNoteSaveHandlers.test.tsx   |  10 +-
 19 files changed, 355 insertions(+), 117 deletions(-)

diff --git a/core/services/noteWorkspaceTabs.ts b/core/services/noteWorkspaceTabs.ts
index d4c7d1ba50f..6775f387fc6 100644
--- a/core/services/noteWorkspaceTabs.ts
+++ b/core/services/noteWorkspaceTabs.ts
@@ -1,6 +1,7 @@
 import type { NoteViewModel } from '@core/types/domain'
 
-export const NOTE_WORKSPACE_VERSION = 1 as const
+export const NOTE_WORKSPACE_VERSION = 1
+export const MAX_NOTE_WORKSPACE_SERIALIZED_LENGTH = 2 * 1024 * 1024
 
 export type NoteWorkspaceMode = 'reading' | 'editing'
 export type NoteWorkspaceSaveState = 'saved' | 'dirty' | 'saving' | 'error'
@@ -49,11 +50,16 @@ export type NoteWorkspaceIdFactory = () => string
 const DEFAULT_DRAFT: NoteDraftSnapshot = { title: '', description: '', tags: '' }
 const DEFAULT_VIEW: NoteViewSession = { scrollTop: 0 }
 
+let fallbackIdCounter = 0
+
 const defaultIdFactory: NoteWorkspaceIdFactory = () => {
-  if (typeof globalThis.crypto?.randomUUID === 'function') {
-    return globalThis.crypto.randomUUID()
+  const cryptoApi = typeof globalThis.crypto === 'undefined' ? null : globalThis.crypto
+  if (cryptoApi && typeof cryptoApi.randomUUID === 'function') {
+    return cryptoApi.randomUUID()
   }
-  return `note-tab-${Date.now()}-${Math.random().toString(36).slice(2)}`
+
+  const counter = fallbackIdCounter++
+  return `note-tab-${Date.now()}-${counter}`
 }
 
 const asString = (value: unknown, fallback: string): string => (
@@ -124,7 +130,7 @@ export function createNoteWorkspaceState(idFactory: NoteWorkspaceIdFactory = def
 }
 
 export function getActiveWorkspaceTab(state: NoteWorkspaceState): NoteWorkspaceTab {
-  return state.tabs.find((tab) => tab.id === state.activeTabId) ?? state.tabs[0]!
+  return state.tabs.find((tab) => tab.id === state.activeTabId) ?? state.tabs[0]
 }
 
 export function findWorkspaceTabByNoteId(
@@ -231,43 +237,68 @@ const normalizeNote = (value: unknown): NoteViewModel | null => {
     : null
 }
 
-const normalizeTab = (
-  value: unknown,
+const asRecord = (value: unknown): Record<string, unknown> | null => (
+  value && typeof value === 'object' ? value as Record<string, unknown> : null
+)
+
+const normalizeTabId = (
+  raw: Record<string, unknown>,
   idFactory: NoteWorkspaceIdFactory,
   usedTabIds: Set<string>,
-): NoteWorkspaceTab | null => {
-  if (!value || typeof value !== 'object') return null
-  const raw = value as Record<string, unknown>
+): string => {
   let id = typeof raw.id === 'string' && raw.id.length > 0 ? raw.id : idFactory()
   while (usedTabIds.has(id)) id = idFactory()
   usedTabIds.add(id)
+  return id
+}
+
+const normalizeTabDraft = (
+  rawDraft: Record<string, unknown>,
+  note: NoteViewModel | null,
+): NoteDraftSnapshot => ({
+  title: asString(rawDraft.title, note?.title ?? ''),
+  description: asString(rawDraft.description, note?.description ?? note?.content ?? ''),
+  tags: asString(rawDraft.tags, note?.tags?.join(', ') ?? ''),
+})
+
+const normalizeTabView = (rawView: Record<string, unknown>): NoteViewSession => {
+  const titleSelection = normalizeRange(rawView.titleSelection, 'titleSelection')
+  const editorSelection = normalizeRange(rawView.editorSelection, 'editorSelection')
+  return {
+    scrollTop: asNonNegativeFiniteNumber(rawView.scrollTop, 0),
+    ...(titleSelection ? { titleSelection } : {}),
+    ...(editorSelection ? { editorSelection } : {}),
+  }
+}
+
+const normalizeSaveState = (value: unknown): NoteWorkspaceSaveState => (
+  value === 'dirty' || value === 'saving' || value === 'error' ? value : 'saved'
+)
+
+const normalizeTab = (
+  value: unknown,
+  idFactory: NoteWorkspaceIdFactory,
+  usedTabIds: Set<string>,
+): NoteWorkspaceTab | null => {
+  const raw = asRecord(value)
+  if (!raw) return null
+
+  const id = normalizeTabId(raw, idFactory, usedTabIds)
 
   const note = normalizeNote(raw.note)
   const rawNoteId = typeof raw.noteId === 'string' && raw.noteId.length > 0 ? raw.noteId : null
   const noteId = note?.id ?? rawNoteId
-  const rawDraft = raw.draft && typeof raw.draft === 'object' ? raw.draft as Record<string, unknown> : {}
-  const rawView = raw.view && typeof raw.view === 'object' ? raw.view as Record<string, unknown> : {}
-  const titleSelection = normalizeRange(rawView.titleSelection, 'titleSelection')
-  const editorSelection = normalizeRange(rawView.editorSelection, 'editorSelection')
+  const rawDraft = asRecord(raw.draft) ?? {}
+  const rawView = asRecord(raw.view) ?? {}
 
   return {
     id,
     noteId,
     note: noteId && note?.id === noteId ? note : null,
     mode: raw.mode === 'reading' ? 'reading' : 'editing',
-    draft: {
-      title: asString(rawDraft.title, note?.title ?? ''),
-      description: asString(rawDraft.description, note?.description ?? note?.content ?? ''),
-      tags: asString(rawDraft.tags, note?.tags?.join(', ') ?? ''),
-    },
-    view: {
-      scrollTop: asNonNegativeFiniteNumber(rawView.scrollTop, 0),
-      ...(titleSelection ? { titleSelection } : {}),
-      ...(editorSelection ? { editorSelection } : {}),
-    },
-    saveState: raw.saveState === 'dirty' || raw.saveState === 'saving' || raw.saveState === 'error'
-      ? raw.saveState
-      : 'saved',
+    draft: normalizeTabDraft(rawDraft, note),
+    view: normalizeTabView(rawView),
+    saveState: normalizeSaveState(raw.saveState),
     saveError: typeof raw.saveError === 'string' ? raw.saveError : null,
   }
 }
@@ -278,6 +309,9 @@ export function hydrateNoteWorkspaceState(
 ): NoteWorkspaceState {
   let parsed: unknown = raw
   if (typeof raw === 'string') {
+    if (raw.length > MAX_NOTE_WORKSPACE_SERIALIZED_LENGTH) {
+      return createNoteWorkspaceState(idFactory)
+    }
     try {
       parsed = JSON.parse(raw) as unknown
     } catch {
@@ -310,5 +344,9 @@ export function hydrateNoteWorkspaceState(
 }
 
 export function serializeNoteWorkspaceState(state: NoteWorkspaceState): string {
-  return JSON.stringify(state)
+  const serialized = JSON.stringify(state)
+  if (serialized.length > MAX_NOTE_WORKSPACE_SERIALIZED_LENGTH) {
+    throw new RangeError('Note workspace state exceeds the storage limit')
+  }
+  return serialized
 }
diff --git a/core/tests/unit/core-services-noteWorkspaceTabs.test.ts b/core/tests/unit/core-services-noteWorkspaceTabs.test.ts
index b4d5234d0e5..345a861ddb3 100644
--- a/core/tests/unit/core-services-noteWorkspaceTabs.test.ts
+++ b/core/tests/unit/core-services-noteWorkspaceTabs.test.ts
@@ -7,6 +7,7 @@ import {
   findWorkspaceTabByNoteId,
   getActiveWorkspaceTab,
   hydrateNoteWorkspaceState,
+  MAX_NOTE_WORKSPACE_SERIALIZED_LENGTH,
   openNoteInWorkspace,
   serializeNoteWorkspaceState,
   updateWorkspaceTab,
@@ -134,6 +135,17 @@ describe('note workspace tab state', () => {
     const malformed = hydrateNoteWorkspaceState('{not-json', ids('fallback'))
     expect(malformed.tabs).toHaveLength(1)
     expect(malformed.activeTabId).toBe('fallback')
+
+    const oversized = hydrateNoteWorkspaceState(
+      JSON.stringify({ version: 1, activeTabId: 'tab-1', tabs: [{ ...state.tabs[0], draft: { title: 'x'.repeat(MAX_NOTE_WORKSPACE_SERIALIZED_LENGTH) } }] }),
+      ids('oversized'),
+    )
+    expect(oversized.tabs).toHaveLength(1)
+    expect(oversized.activeTabId).toBe('oversized')
+    expect(() => serializeNoteWorkspaceState({
+      ...state,
+      tabs: [{ ...state.tabs[0], draft: { ...state.tabs[0].draft, description: 'x'.repeat(MAX_NOTE_WORKSPACE_SERIALIZED_LENGTH) } }],
+    })).toThrow('exceeds the storage limit')
   })
 
   it('ignores activation and updates for unknown tab IDs', () => {
diff --git a/cypress/component/features/notes/NotesShellFtsExitSave.cy.tsx b/cypress/component/features/notes/NotesShellFtsExitSave.cy.tsx
index 993eec0ddad..c3378c60c68 100644
--- a/cypress/component/features/notes/NotesShellFtsExitSave.cy.tsx
+++ b/cypress/component/features/notes/NotesShellFtsExitSave.cy.tsx
@@ -3,6 +3,7 @@ import type { SupabaseClient, User } from '@supabase/supabase-js'
 
 import { NotesShell } from '../../../../ui/web/components/features/notes/NotesShell'
 import type { NoteViewModel, SearchResult } from '../../../../core/types/domain'
+import type { NoteWorkspaceTab } from '@core/services/noteWorkspaceTabs'
 import type { NoteEditorHandle } from '../../../../ui/web/components/features/notes/NoteEditor'
 import { SupabaseTestProvider } from '../../../../ui/web/providers/SupabaseProvider'
 
@@ -18,6 +19,21 @@ const pastePlainText = (text: string) => {
 
 type FakeController = Record<string, unknown>
 
+const makeWorkspaceTab = (note: NoteViewModel | null, isEditing: boolean): NoteWorkspaceTab => ({
+  id: 'tab-1',
+  noteId: note?.id ?? null,
+  note,
+  mode: isEditing ? 'editing' : 'reading',
+  draft: {
+    title: note?.title ?? '',
+    description: note?.description ?? '',
+    tags: note?.tags.join(', ') ?? '',
+  },
+  view: { scrollTop: 0 },
+  saveState: 'saved',
+  saveError: null,
+})
+
 const buildController = () => {
   const supabase = {
     functions: {
@@ -67,6 +83,7 @@ const buildController = () => {
       () => notes.find((n) => n.id === selectedNoteId) ?? null,
       [notes, selectedNoteId]
     )
+    const activeTab = React.useMemo(() => makeWorkspaceTab(selectedNote, isEditing), [selectedNote, isEditing])
 
     const flushIfEditing = React.useCallback(async () => {
       if (!isEditing) return
@@ -176,6 +193,14 @@ const buildController = () => {
 
       selectedNote,
       isEditing,
+      tabs: [activeTab],
+      activeTabId: activeTab.id,
+      activeTab,
+      addTab: () => {},
+      activateTab: () => {},
+      closeTab: () => {},
+      handleDraftChange: () => {},
+      handleViewSessionChange: () => {},
       saving: false,
       autoSaving: false,
       lastSavedAt: null,
diff --git a/cypress/component/features/notes/NotesShellLikeExitSave.cy.tsx b/cypress/component/features/notes/NotesShellLikeExitSave.cy.tsx
index 737cf94e2b9..df25f1b5ca2 100644
--- a/cypress/component/features/notes/NotesShellLikeExitSave.cy.tsx
+++ b/cypress/component/features/notes/NotesShellLikeExitSave.cy.tsx
@@ -3,6 +3,7 @@ import type { SupabaseClient, User } from '@supabase/supabase-js'
 
 import { NotesShell } from '../../../../ui/web/components/features/notes/NotesShell'
 import type { NoteViewModel } from '../../../../core/types/domain'
+import type { NoteWorkspaceTab } from '@core/services/noteWorkspaceTabs'
 import type { NoteEditorHandle } from '../../../../ui/web/components/features/notes/NoteEditor'
 import { SupabaseTestProvider } from '../../../../ui/web/providers/SupabaseProvider'
 
@@ -18,6 +19,21 @@ const pastePlainText = (text: string) => {
 
 type FakeController = Record<string, unknown>
 
+const makeWorkspaceTab = (note: NoteViewModel | null, isEditing: boolean): NoteWorkspaceTab => ({
+  id: 'tab-1',
+  noteId: note?.id ?? null,
+  note,
+  mode: isEditing ? 'editing' : 'reading',
+  draft: {
+    title: note?.title ?? '',
+    description: note?.description ?? '',
+    tags: note?.tags.join(', ') ?? '',
+  },
+  view: { scrollTop: 0 },
+  saveState: 'saved',
+  saveError: null,
+})
+
 const buildController = () => {
   const supabase = {
     functions: {
@@ -67,6 +83,7 @@ const buildController = () => {
       () => notes.find((n) => n.id === selectedNoteId) ?? null,
       [notes, selectedNoteId]
     )
+    const activeTab = React.useMemo(() => makeWorkspaceTab(selectedNote, isEditing), [selectedNote, isEditing])
 
     const flushIfEditing = React.useCallback(async () => {
       if (!isEditing) return
@@ -154,6 +171,14 @@ const buildController = () => {
 
       selectedNote,
       isEditing,
+      tabs: [activeTab],
+      activeTabId: activeTab.id,
+      activeTab,
+      addTab: () => {},
+      activateTab: () => {},
+      closeTab: () => {},
+      handleDraftChange: () => {},
+      handleViewSessionChange: () => {},
       saving: false,
       autoSaving: false,
       lastSavedAt: null,
diff --git a/cypress/component/features/notes/NotesShellOpenInContext.cy.tsx b/cypress/component/features/notes/NotesShellOpenInContext.cy.tsx
index e0915b9d75f..7f2c24ce569 100644
--- a/cypress/component/features/notes/NotesShellOpenInContext.cy.tsx
+++ b/cypress/component/features/notes/NotesShellOpenInContext.cy.tsx
@@ -3,11 +3,27 @@ import type { SupabaseClient, User } from '@supabase/supabase-js'
 
 import { NotesShell } from '../../../../ui/web/components/features/notes/NotesShell'
 import type { NoteViewModel } from '../../../../core/types/domain'
+import type { NoteWorkspaceTab } from '@core/services/noteWorkspaceTabs'
 import type { NoteEditorHandle } from '../../../../ui/web/components/features/notes/NoteEditor'
 import { SupabaseTestProvider } from '../../../../ui/web/providers/SupabaseProvider'
 
 type FakeController = Record<string, unknown>
 
+const makeWorkspaceTab = (note: NoteViewModel | null, isEditing: boolean): NoteWorkspaceTab => ({
+  id: 'tab-1',
+  noteId: note?.id ?? null,
+  note,
+  mode: isEditing ? 'editing' : 'reading',
+  draft: {
+    title: note?.title ?? '',
+    description: note?.description ?? '',
+    tags: note?.tags.join(', ') ?? '',
+  },
+  view: { scrollTop: 0 },
+  saveState: 'saved',
+  saveError: null,
+})
+
 describe('NotesShell: AI open in context', () => {
   it('applies scroll and chunk highlight on the first open-in-context click', () => {
     cy.window().then((win) => {
@@ -80,6 +96,7 @@ describe('NotesShell: AI open in context', () => {
       const [selectedNote, setSelectedNote] = React.useState<NoteViewModel | null>(null)
       const [isEditing, setIsEditing] = React.useState(false)
       const [isSearchPanelOpen, setIsSearchPanelOpen] = React.useState(true)
+      const activeTab = React.useMemo(() => makeWorkspaceTab(selectedNote, isEditing), [selectedNote, isEditing])
 
       const controller: FakeController = {
         registerNoteEditorRef: (ref: React.RefObject<NoteEditorHandle | null>) => {
@@ -138,6 +155,14 @@ describe('NotesShell: AI open in context', () => {
         deleteNotesByIds: async () => ({ total: 0, failed: 0, queuedOffline: false }),
         selectedNote,
         isEditing,
+        tabs: [activeTab],
+        activeTabId: activeTab.id,
+        activeTab,
+        addTab: () => {},
+        activateTab: () => {},
+        closeTab: () => {},
+        handleDraftChange: () => {},
+        handleViewSessionChange: () => {},
         saving: false,
         autoSaving: false,
         lastSavedAt: null,
diff --git a/docs/ai/implementation/2026-08-01-feature-notes-tabs.md b/docs/ai/implementation/2026-08-01-feature-notes-tabs.md
index 3b58426ca17..0f92a82f241 100644
--- a/docs/ai/implementation/2026-08-01-feature-notes-tabs.md
+++ b/docs/ai/implementation/2026-08-01-feature-notes-tabs.md
@@ -8,7 +8,7 @@ description: Technical implementation notes, patterns, and code guidelines
 
 ## Development Setup
 
-- Worktree: `.worktrees/codex-notes-tabs`, branch `codex/notes-tabs`.
+- Worktree: use the Harness-managed worktree under the Worktree root configured in Harness settings; never create one inside the project checkout.
 - Root dependencies: `npm ci`.
 - Mobile dependencies: `npm --prefix ui/mobile ci`.
 - Fast validation: `npm run type-check` and `npx eslint . --max-warnings=0`.
@@ -35,6 +35,8 @@ ui/web/components/features/notes/NoteView.tsx
 
 - Keep reducer transitions pure and make invalid states impossible through normalization.
 - Use an injected ID factory in reducer tests; production uses `crypto.randomUUID` with a safe fallback.
+- Use a deterministic initial tab ID for the server/client first render, then replace it with the hydrated session workspace.
+- Bound serialized workspace state and fall back to a blank tab when a persisted snapshot is malformed or exceeds the storage limit.
 - Hydrate once, then persist state changes through a guarded storage adapter.
 - Capture the current editor before unmount, flush autosave first, and then apply tab transitions.
 - Use the active tab's draft as editor initial content; never use a server refresh to overwrite a dirty local field without existing reconciliation rules.
@@ -59,6 +61,7 @@ ui/web/components/features/notes/NoteView.tsx
 
 - Storage parse/access/quota errors fall back to the in-memory state and optionally log a debug warning.
 - Autosave errors set the active tab to `error`, retain the draft, and keep the existing toast/retry behavior.
+- Manual save errors are propagated from the save handler to the controller wrapper so the active tab remains in `error` instead of being reported as saved.
 - Failed-tab close requires explicit confirmation; canceling leaves the tab and draft intact.
 - Invalid note snapshots are ignored or revalidated through existing note status logic.
 
diff --git a/docs/ai/planning/2026-08-01-feature-notes-tabs.md b/docs/ai/planning/2026-08-01-feature-notes-tabs.md
index e87bb7c1f9e..e8d1acd4f59 100644
--- a/docs/ai/planning/2026-08-01-feature-notes-tabs.md
+++ b/docs/ai/planning/2026-08-01-feature-notes-tabs.md
@@ -75,7 +75,7 @@ These are engineering estimates only; autosave/editor lifecycle and native navig
 - **Duplicate sessions from different entry points:** centralize all open-note actions in controller/reducer and test each source.
 - **Editor selection coordinates become stale:** treat restoration as best effort and validate bounds before applying.
 - **Native/web behavior diverges:** share reducer/invariants and keep presentation-specific adapters thin.
-- **Unrelated dirty files in the main checkout:** work only in `.worktrees/codex-notes-tabs` and stage task files explicitly.
+- **Unrelated dirty files in the main checkout:** work only in the Harness-managed worktree under its configured root and stage task files explicitly.
 
 ## Resources Needed
 
diff --git a/docs/ai/testing/2026-08-01-feature-notes-tabs.md b/docs/ai/testing/2026-08-01-feature-notes-tabs.md
index ceec2c2e65d..bdd51e53d85 100644
--- a/docs/ai/testing/2026-08-01-feature-notes-tabs.md
+++ b/docs/ai/testing/2026-08-01-feature-notes-tabs.md
@@ -72,6 +72,9 @@ description: Define testing approach, test cases, and quality assurance
 - Existing controller regression run under Allure Agent: 18/18 passed, findings 0. Report: `C:\Users\DenysKoreiba\AppData\Local\Temp\allure-agent-yHYkoU`.
 - `npm run type-check`: passed, including root, core, web tests, and `ui/mobile`.
 - Focused ESLint for changed source/test files: passed.
+- Full unit coverage run: 184 suites and 1,430 tests passed; changed workspace/controller paths were exercised, including manual-save, autosave, Read error states, and oversized snapshot rejection.
+- Targeted Chrome component run: 41/41 logical tests passed across NoteEditor, FTS exit-save, like-search exit-save, and AI open-in-context scenarios. The local Cypress process still returned exit 1 after the passing spec summaries; Allure attributed that to a runner-level webpack-dev-server bootstrap signal, with no assertion failures.
+- `npx ai-devkit@latest lint --feature notes-tabs`: passed.
 - Native mobile route/store tab adaptation was not included; responsive web mobile controls are covered by component tests.
 
 - Desktop: keyboard tab navigation, ellipsis, horizontal overflow, dirty/error markers, close confirmation.
diff --git a/ui/web/components/features/notes/MobileNotesTabMenu.tsx b/ui/web/components/features/notes/MobileNotesTabMenu.tsx
index dc31ab99ef3..bfc024a8f58 100644
--- a/ui/web/components/features/notes/MobileNotesTabMenu.tsx
+++ b/ui/web/components/features/notes/MobileNotesTabMenu.tsx
@@ -7,7 +7,7 @@ import { Button } from "@/components/ui/button"
 import { cn } from "@ui/web/lib/utils"
 import { getTabLabel, SaveStateIndicator, type NotesTabStripProps } from "./NotesTabStrip"
 
-export type MobileNotesTabMenuProps = NotesTabStripProps
+export type MobileNotesTabMenuProps = Readonly<NotesTabStripProps>
 
 export function MobileNotesTabMenu({
   tabs,
@@ -21,12 +21,12 @@ export function MobileNotesTabMenu({
   const activeLabel = activeTab ? getTabLabel(activeTab) : "No open notes"
 
   const handleActivate = (tabId: string) => {
-    onActivateTab(tabId)
+    void onActivateTab(tabId)
     setIsOpen(false)
   }
 
   const handleClose = (tab: NoteWorkspaceTab) => {
-    onCloseTab(tab.id)
+    void onCloseTab(tab.id)
     if (tab.id === activeTabId && tabs.length <= 1) setIsOpen(false)
   }
 
@@ -55,7 +55,7 @@ export function MobileNotesTabMenu({
       </div>
 
       {isOpen && (
-        <div id="mobile-notes-tab-list" className="mt-2 rounded-xl border border-border bg-card p-1 shadow-lg" role="listbox" aria-label="Open notes">
+        <div id="mobile-notes-tab-list" className="mt-2 rounded-xl border border-border bg-card p-1 shadow-lg" aria-label="Open notes">
           {tabs.map((tab) => {
             const label = getTabLabel(tab)
             const isActive = tab.id === activeTabId
@@ -64,8 +64,7 @@ export function MobileNotesTabMenu({
               <div key={tab.id} className="flex items-center gap-1 rounded-lg">
                 <Button
                   type="button"
-                  role="option"
-                  aria-selected={isActive}
+                  aria-pressed={isActive}
                   variant="ghost"
                   className={cn("min-w-0 flex-1 justify-start rounded-lg px-2.5", isActive && "bg-muted font-semibold")}
                   title={label}
diff --git a/ui/web/components/features/notes/NoteEditor.tsx b/ui/web/components/features/notes/NoteEditor.tsx
index 22d493fc22b..482e1a0f305 100644
--- a/ui/web/components/features/notes/NoteEditor.tsx
+++ b/ui/web/components/features/notes/NoteEditor.tsx
@@ -223,24 +223,22 @@ export const NoteEditor = React.memo(React.forwardRef<NoteEditorHandle, NoteEdit
     selectedTagsRef.current = merged
     setSelectedTags(merged)
     setTagQuery("")
-    handleContentChange()
     onDraftChange?.({
       ...getFormData(),
       tags: buildTagString(merged),
     })
-  }, [getFormData, handleContentChange, onDraftChange])
+  }, [getFormData, onDraftChange])
 
   const removeTag = React.useCallback((tagToRemove: string) => {
     const next = selectedTagsRef.current.filter((tag) => tag !== tagToRemove)
     selectedTagsRef.current = next
     setSelectedTags(next)
     setTagQuery("")
-    handleContentChange()
     onDraftChange?.({
       ...getFormData(),
       tags: buildTagString(next),
     })
-  }, [getFormData, handleContentChange, onDraftChange])
+  }, [getFormData, onDraftChange])
 
   React.useImperativeHandle(ref, () => ({
     flushPendingSave,
diff --git a/ui/web/components/features/notes/NotesTabStrip.tsx b/ui/web/components/features/notes/NotesTabStrip.tsx
index 56a90cd6ac2..c6035ead930 100644
--- a/ui/web/components/features/notes/NotesTabStrip.tsx
+++ b/ui/web/components/features/notes/NotesTabStrip.tsx
@@ -14,6 +14,8 @@ export type NotesTabStripProps = {
   onCloseTab: (tabId: string) => void | Promise<void>
 }
 
+type ReadonlyNotesTabStripProps = Readonly<NotesTabStripProps>
+
 function getTabLabel(tab: NoteWorkspaceTab): string {
   const title = tab.note?.title?.trim() || tab.draft.title.trim()
   if (title) return title
@@ -64,20 +66,24 @@ function activateWithKeyboard(
   event: KeyboardEvent<HTMLButtonElement>,
   tabIndex: number,
   tabs: NoteWorkspaceTab[],
-  onActivateTab: NotesTabStripProps["onActivateTab"],
+  onActivateTab: ReadonlyNotesTabStripProps["onActivateTab"],
 ) {
   if (event.key !== "ArrowLeft" && event.key !== "ArrowRight" && event.key !== "Home" && event.key !== "End") {
     return
   }
 
   event.preventDefault()
-  const nextIndex = event.key === "Home"
-    ? 0
-    : event.key === "End"
-      ? tabs.length - 1
-      : (tabIndex + (event.key === "ArrowRight" ? 1 : -1) + tabs.length) % tabs.length
+  let nextIndex = tabIndex
+  if (event.key === "Home") {
+    nextIndex = 0
+  } else if (event.key === "End") {
+    nextIndex = tabs.length - 1
+  } else {
+    const direction = event.key === "ArrowRight" ? 1 : -1
+    nextIndex = (tabIndex + direction + tabs.length) % tabs.length
+  }
   const nextTab = tabs[nextIndex]
-  if (nextTab) onActivateTab(nextTab.id)
+  if (nextTab) void onActivateTab(nextTab.id)
 }
 
 export function NotesTabStrip({
@@ -86,7 +92,7 @@ export function NotesTabStrip({
   onAddTab,
   onActivateTab,
   onCloseTab,
-}: NotesTabStripProps) {
+}: ReadonlyNotesTabStripProps) {
   return (
     <div className="hidden min-w-0 items-center gap-1 border-b border-border/60 bg-background/80 px-2 py-1 backdrop-blur md:flex">
       <div className="min-w-0 flex-1 overflow-x-auto" role="tablist" aria-label="Open notes">
diff --git a/ui/web/hooks/useNoteAppController.ts b/ui/web/hooks/useNoteAppController.ts
index 20e40b74357..68ecf75a66b 100644
--- a/ui/web/hooks/useNoteAppController.ts
+++ b/ui/web/hooks/useNoteAppController.ts
@@ -382,8 +382,13 @@ export function useNoteAppController() {
       saveState: 'saving',
       saveError: null,
     })
-    await handleSaveNote(data)
-    updateTab(activeTabId, { saveState: 'saved', saveError: null })
+    try {
+      await handleSaveNote(data)
+      updateTab(activeTabId, { saveState: 'saved', saveError: null })
+    } catch (error) {
+      const message = error instanceof Error ? error.message : String(error)
+      updateTab(activeTabId, { saveState: 'error', saveError: message })
+    }
   }, [activeTabId, handleSaveNote, updateTab])
 
   const handleReadNoteWithWorkspace = useCallback(async (data: {
@@ -396,8 +401,13 @@ export function useNoteAppController() {
       saveState: 'saving',
       saveError: null,
     })
-    await handleReadNote(data)
-    updateTab(activeTabId, { saveState: 'saved', saveError: null })
+    try {
+      await handleReadNote(data)
+      updateTab(activeTabId, { saveState: 'saved', saveError: null })
+    } catch (error) {
+      const message = error instanceof Error ? error.message : String(error)
+      updateTab(activeTabId, { saveState: 'error', saveError: message })
+    }
   }, [activeTabId, handleReadNote, updateTab])
 
   // -- Bulk actions --
@@ -634,52 +644,51 @@ export function useNoteAppController() {
     }
   }, [filterByTag, flushAndCaptureActiveTab, isEditing, isSearchPanelOpen, searchQuery, selectedNoteRef])
 
-  const restoreUiState = useCallback(async (snapshot: NotesUiStateSnapshot) => {
-    // Temporary bridge for the /settings route. The contract is intentionally narrow
-    // and should not keep expanding forever. If returning from settings needs richer
-    // workspace history, move the primary notes UI state into route/history instead.
-    let restoredSelectedNote = snapshot.selectedNoteId
-      ? pickLatestNote([
-        notesRef.current.find((note) => note.id === snapshot.selectedNoteId),
-        snapshot.selectedNote,
-      ]) ?? null
-      : null
-
-    if (!restoredSelectedNote && snapshot.selectedNoteId) {
-      try {
-        restoredSelectedNote = await noteService.getNote(snapshot.selectedNoteId)
-      } catch {
-        restoredSelectedNote = null
-      }
-    }
-
-    if (snapshot.searchQuery) {
-      handleSearch(snapshot.searchQuery)
-    } else {
-      resetFtsResults()
-    }
-
-    if (snapshot.filterByTag) {
-      onTagClick(snapshot.filterByTag)
-    } else {
-      handleClearTagFilter()
-    }
-
-    setIsSearchPanelOpen(snapshot.isSearchPanelOpen || Boolean(snapshot.searchQuery) || Boolean(snapshot.filterByTag))
-    const canRestoreEditing =
-      snapshot.isEditing &&
-      (restoredSelectedNote !== null || snapshot.selectedNoteId === null)
-
+  const resolveSettingsReturnNote = useCallback(async (snapshot: NotesUiStateSnapshot) => {
+    if (!snapshot.selectedNoteId) return null
+
+    const cachedNote = pickLatestNote([
+      notesRef.current.find((note) => note.id === snapshot.selectedNoteId),
+      snapshot.selectedNote,
+    ])
+    if (cachedNote) return cachedNote
+
+    try {
+      return await noteService.getNote(snapshot.selectedNoteId)
+    } catch {
+      return null
+    }
+  }, [noteService, notesRef])
+
+  const restoreSettingsSearchState = useCallback((snapshot: NotesUiStateSnapshot) => {
+    if (snapshot.searchQuery) {
+      handleSearch(snapshot.searchQuery)
+    } else {
+      resetFtsResults()
+    }
+
+    if (snapshot.filterByTag) {
+      onTagClick(snapshot.filterByTag)
+    } else {
+      handleClearTagFilter()
+    }
+  }, [handleClearTagFilter, handleSearch, onTagClick, resetFtsResults])
+
+  const restoreSettingsWorkspaceState = useCallback((
+    restoredSelectedNote: NoteViewModel | null,
+    canRestoreEditing: boolean,
+  ) => {
+    const mode = canRestoreEditing ? 'editing' : 'reading'
     if (restoredSelectedNote) {
       setLegacySelectedNote(restoredSelectedNote)
       setLegacyIsEditing(canRestoreEditing)
       const existingTab = findTabByNoteId(restoredSelectedNote.id)
       if (existingTab) {
         activateTab(existingTab.id)
-        updateTab(existingTab.id, { mode: canRestoreEditing ? 'editing' : 'reading' })
+        updateTab(existingTab.id, { mode })
       } else {
         openNote(restoredSelectedNote)
-        updateTab(activeTabId, { mode: canRestoreEditing ? 'editing' : 'reading' })
+        updateTab(activeTabId, { mode })
       }
     } else {
       setLegacySelectedNote(null)
@@ -687,26 +696,40 @@ export function useNoteAppController() {
       updateTab(activeTabId, {
         note: null,
         noteId: null,
-        mode: canRestoreEditing ? 'editing' : 'reading',
+        mode,
       })
     }
-    setNotePaneVisible(Boolean(restoredSelectedNote || canRestoreEditing))
   }, [
-    handleClearTagFilter,
-    handleSearch,
-    setLegacyIsEditing,
-    setLegacySelectedNote,
-    noteService,
-    notesRef,
-    onTagClick,
-    resetFtsResults,
-    setIsSearchPanelOpen,
     activeTabId,
     activateTab,
     findTabByNoteId,
     openNote,
+    setLegacyIsEditing,
+    setLegacySelectedNote,
     updateTab,
   ])
+
+  const restoreUiState = useCallback(async (snapshot: NotesUiStateSnapshot) => {
+    // Temporary bridge for the /settings route. The contract is intentionally narrow
+    // and should not keep expanding forever. If returning from settings needs richer
+    // workspace history, move the primary notes UI state into route/history instead.
+    const restoredSelectedNote = await resolveSettingsReturnNote(snapshot)
+    const canRestoreEditing = snapshot.isEditing && (
+      restoredSelectedNote !== null || snapshot.selectedNoteId === null
+    )
+
+    restoreSettingsSearchState(snapshot)
+    setIsSearchPanelOpen(
+      snapshot.isSearchPanelOpen || Boolean(snapshot.searchQuery) || Boolean(snapshot.filterByTag),
+    )
+    restoreSettingsWorkspaceState(restoredSelectedNote, canRestoreEditing)
+    setNotePaneVisible(Boolean(restoredSelectedNote || canRestoreEditing))
+  }, [
+    resolveSettingsReturnNote,
+    restoreSettingsSearchState,
+    restoreSettingsWorkspaceState,
+    setIsSearchPanelOpen,
+  ])
 
   // -- Main Navigation View --
   const [activeMainView, setActiveMainView] = useState<'notes' | 'tags'>(() => {
diff --git a/ui/web/hooks/useNoteSaveHandlers.ts b/ui/web/hooks/useNoteSaveHandlers.ts
index 37b2911c6a1..12644f45a1c 100644
--- a/ui/web/hooks/useNoteSaveHandlers.ts
+++ b/ui/web/hooks/useNoteSaveHandlers.ts
@@ -360,11 +360,12 @@ export function useNoteSaveHandlers({
       if (savedNote) {
         syncSelectedNote(savedNote)
       }
-    } catch (error) {
-      console.error('Error saving note:', error)
-    } finally {
-      setSaving(false)
-    }
+    } catch (error) {
+      console.error('Error saving note:', error)
+      throw error
+    } finally {
+      setSaving(false)
+    }
   }
 
   const handleReadNote = async (data: { title: string; description: string; tags: string }) => {
diff --git a/ui/web/hooks/useNoteWorkspaceTabs.ts b/ui/web/hooks/useNoteWorkspaceTabs.ts
index a6932b4bda9..f5b56a2584d 100644
--- a/ui/web/hooks/useNoteWorkspaceTabs.ts
+++ b/ui/web/hooks/useNoteWorkspaceTabs.ts
@@ -13,8 +13,12 @@ import {
 import type { NoteViewModel } from '@core/types/domain'
 import { readNoteWorkspaceState, writeNoteWorkspaceState } from '@ui/web/lib/noteWorkspaceStorage'
 
+const INITIAL_TAB_ID = 'note-tab-initial'
+
 export function useNoteWorkspaceTabs() {
-  const [state, setState] = useState(createNoteWorkspaceState)
+  // Keep the server render and the first browser render identical. The real
+  // tab ID is loaded from sessionStorage immediately after hydration.
+  const [state, setState] = useState(() => createNoteWorkspaceState(() => INITIAL_TAB_ID))
   const [hydrated, setHydrated] = useState(false)
 
   useEffect(() => {
diff --git a/ui/web/lib/noteWorkspaceStorage.ts b/ui/web/lib/noteWorkspaceStorage.ts
index af4d000928a..cd43d738482 100644
--- a/ui/web/lib/noteWorkspaceStorage.ts
+++ b/ui/web/lib/noteWorkspaceStorage.ts
@@ -8,7 +8,7 @@ import {
 export const NOTE_WORKSPACE_STORAGE_KEY = 'everfreenote:notes-workspace:v1'
 
 function getSessionStorage(): Storage | null {
-  if (typeof globalThis.window === 'undefined') return null
+  if (globalThis.window === undefined) return null
 
   try {
     return globalThis.window.sessionStorage
diff --git a/ui/web/tests/unit/components/notesShell.test.tsx b/ui/web/tests/unit/components/notesShell.test.tsx
index 0cae6c845a3..8bff7654bc5 100644
--- a/ui/web/tests/unit/components/notesShell.test.tsx
+++ b/ui/web/tests/unit/components/notesShell.test.tsx
@@ -5,6 +5,7 @@ import { useRouter } from 'next/navigation'
 
 import { NotesShell } from '@/components/features/notes/NotesShell'
 import { useSupabase } from '@ui/web/providers/SupabaseProvider'
+import type { NoteWorkspaceTab } from '@core/services/noteWorkspaceTabs'
 
 const mockRouterPush = jest.fn()
 const mockWordPressGetStatus = jest.fn()
@@ -75,6 +76,23 @@ type MockAlertDialogActionProps = MockDialogProps & { onClick: () => void }
 
 type NoteEditorRef = { flushPendingSave: () => Promise<void> }
 
+function makeWorkspaceTab(selectedNote: typeof note | null, isEditing: boolean): NoteWorkspaceTab {
+  return {
+    id: 'tab-1',
+    noteId: selectedNote?.id ?? null,
+    note: selectedNote,
+    mode: isEditing ? 'editing' : 'reading',
+    draft: {
+      title: selectedNote?.title ?? '',
+      description: selectedNote?.description ?? '',
+      tags: selectedNote?.tags.join(', ') ?? '',
+    },
+    view: { scrollTop: 0 },
+    saveState: 'saved',
+    saveError: null,
+  }
+}
+
 jest.mock('next/navigation', () => ({
   useRouter: jest.fn(),
 }))
@@ -215,6 +233,10 @@ jest.mock('@/components/ui/alert-dialog', () => ({
 }))
 
 function makeController(overrides: Record<string, unknown> = {}) {
+  const selectedNote = (overrides.selectedNote as typeof note | null | undefined) ?? null
+  const isEditing = (overrides.isEditing as boolean | undefined) ?? false
+  const activeTab = makeWorkspaceTab(selectedNote, isEditing)
+
   return {
     user: { id: 'user-1', email: 'user@example.com' },
     notes: [note],
@@ -233,8 +255,14 @@ function makeController(overrides: Record<string, unknown> = {}) {
     pendingCount: 0,
     failedCount: 0,
     isOffline: false,
-    selectedNote: null,
-    isEditing: false,
+    selectedNote,
+    isEditing,
+    tabs: [activeTab],
+    activeTabId: activeTab.id,
+    activeTab,
+    addTab: jest.fn(),
+    activateTab: jest.fn(),
+    closeTab: jest.fn(),
     saving: false,
     autoSaving: false,
     lastSavedAt: null,
diff --git a/ui/web/tests/unit/components/notesWorkspaceTabs.test.tsx b/ui/web/tests/unit/components/notesWorkspaceTabs.test.tsx
index dd1b8c8460d..69b15fc1ec1 100644
--- a/ui/web/tests/unit/components/notesWorkspaceTabs.test.tsx
+++ b/ui/web/tests/unit/components/notesWorkspaceTabs.test.tsx
@@ -91,7 +91,7 @@ describe('Notes workspace tab controls', () => {
     )
 
     fireEvent.click(screen.getByRole('button', { name: 'Open note tabs (2)' }))
-    fireEvent.click(screen.getByRole('option', { name: /Second note/ }))
+    fireEvent.click(screen.getByRole('button', { name: /^Second note/ }))
     fireEvent.click(screen.getByRole('button', { name: 'Open note tabs (2)' }))
     fireEvent.click(screen.getByRole('button', { name: 'Close First note' }))
     fireEvent.click(screen.getByRole('button', { name: 'Add tab' }))
diff --git a/ui/web/tests/unit/hooks/useNoteAppControllerAdditional.test.tsx b/ui/web/tests/unit/hooks/useNoteAppControllerAdditional.test.tsx
index 7e4420333ce..990d3f722b7 100644
--- a/ui/web/tests/unit/hooks/useNoteAppControllerAdditional.test.tsx
+++ b/ui/web/tests/unit/hooks/useNoteAppControllerAdditional.test.tsx
@@ -25,6 +25,9 @@ const mockOnTagClick = jest.fn()
 const mockHandleSearch = jest.fn()
 const mockClearTagFilter = jest.fn()
 const mockResetFtsResults = jest.fn()
+const mockHandleAutoSave = jest.fn()
+const mockHandleSaveNote = jest.fn()
+const mockHandleReadNote = jest.fn()
 const mockClearActiveSettingsNoteReturnPath = jest.fn()
 const mockResolveSearchResult = jest.fn(() => mockResolvedSearchResult)
 const mockUpdateNoteMutation = jest.fn()
@@ -139,9 +142,9 @@ jest.mock('@ui/web/hooks/useNoteSaveHandlers', () => ({
   useNoteSaveHandlers: () => ({
     saving: false,
     autoSaving: false,
-    handleAutoSave: jest.fn(),
-    handleSaveNote: jest.fn(),
-    handleReadNote: jest.fn(),
+    handleAutoSave: mockHandleAutoSave,
+    handleSaveNote: mockHandleSaveNote,
+    handleReadNote: mockHandleReadNote,
     confirmDeleteNote: jest.fn(),
     handleRemoveTagFromNote: jest.fn(),
     persistOfflineNoteUpdates: mockPersistOfflineNoteUpdates,
@@ -224,6 +227,9 @@ describe('useNoteAppController additional observable behavior', () => {
     mockOfflineOverlay = []
     mockNotes = []
     mockResolvedSearchResult = null
+    mockHandleAutoSave.mockReset().mockResolvedValue(undefined)
+    mockHandleSaveNote.mockReset().mockResolvedValue(undefined)
+    mockHandleReadNote.mockReset().mockResolvedValue(undefined)
     mockUpdateNoteMutation.mockReset()
     mockUpdateNoteMutation.mockResolvedValue(undefined)
   })
@@ -303,6 +309,44 @@ describe('useNoteAppController additional observable behavior', () => {
     expect(mockHandleSearchResultClick).toHaveBeenCalledWith(expect.objectContaining({ id: 'result' }))
   })
 
+  it('tracks manual save success and keeps save failures visible on the active tab', async () => {
+    const data = { title: 'Saved title', description: 'Saved body', tags: 'one, two' }
+    const { result } = setup()
+
+    await act(async () => {
+      await result.current.handleSaveNote(data)
+    })
+    expect(result.current.activeTab.draft).toEqual(data)
+    expect(result.current.activeTab.saveState).toBe('saved')
+    expect(result.current.activeTab.saveError).toBeNull()
+
+    mockHandleSaveNote.mockRejectedValueOnce(new Error('network failure'))
+    await act(async () => {
+      await result.current.handleSaveNote(data)
+    })
+    expect(result.current.activeTab.saveState).toBe('error')
+    expect(result.current.activeTab.saveError).toBe('network failure')
+  })
+
+  it('marks auto-save and Read failures on the active tab', async () => {
+    const data = { title: 'Draft', description: 'Body', tags: '' }
+    const { result } = setup()
+
+    mockHandleAutoSave.mockRejectedValueOnce(new Error('auto-save failure'))
+    await act(async () => {
+      await expect(result.current.handleAutoSave({ ...data, noteId: 'note-1' })).rejects.toThrow('auto-save failure')
+    })
+    expect(result.current.activeTab.saveState).toBe('error')
+    expect(result.current.activeTab.saveError).toBe('auto-save failure')
+
+    mockHandleReadNote.mockRejectedValueOnce(new Error('read-save failure'))
+    await act(async () => {
+      await result.current.handleReadNote(data)
+    })
+    expect(result.current.activeTab.saveState).toBe('error')
+    expect(result.current.activeTab.saveError).toBe('read-save failure')
+  })
+
   it('ignores a stale select request when a newer request completes first', async () => {
     const first = makeNote({ id: 'first' })
     const second = makeNote({ id: 'second' })
diff --git a/ui/web/tests/unit/hooks/useNoteSaveHandlers.test.tsx b/ui/web/tests/unit/hooks/useNoteSaveHandlers.test.tsx
index ab9c8b14d69..5253e52f3e5 100644
--- a/ui/web/tests/unit/hooks/useNoteSaveHandlers.test.tsx
+++ b/ui/web/tests/unit/hooks/useNoteSaveHandlers.test.tsx
@@ -106,7 +106,9 @@ describe('useNoteSaveHandlers — handleSaveNote upsert', () => {
     })
 
     await act(async () => {
-      await result.current.handleSaveNote({ title: 'X', description: '', tags: '' })
+      await expect(result.current.handleSaveNote({ title: 'X', description: '', tags: '' })).rejects.toThrow(
+        'network failure',
+      )
     })
 
     expect(consoleSpy).toHaveBeenCalledWith('Error saving note:', expect.any(Error))
@@ -116,7 +118,7 @@ describe('useNoteSaveHandlers — handleSaveNote upsert', () => {
     consoleSpy.mockRestore()
   })
 
-  it('logs error when PGRST116 update → create fallback also fails', async () => {
+  it('rethrows when PGRST116 update → create fallback also fails', async () => {
     const consoleSpy = jest.spyOn(console, 'error').mockImplementation()
     const pgrst116 = Object.assign(new Error('PGRST116'), { code: 'PGRST116' })
 
@@ -126,7 +128,9 @@ describe('useNoteSaveHandlers — handleSaveNote upsert', () => {
     })
 
     await act(async () => {
-      await result.current.handleSaveNote({ title: 'X', description: '', tags: '' })
+      await expect(result.current.handleSaveNote({ title: 'X', description: '', tags: '' })).rejects.toThrow(
+        'create fail',
+      )
     })
 
     expect(consoleSpy).toHaveBeenCalledWith('Error saving note:', expect.any(Error))

From 6b915cb487bfd1ab7e93948baa9e0ab174d842d6 Mon Sep 17 00:00:00 2001
From: Denys <koreybadenis@gmail.com>
Date: Sun, 2 Aug 2026 09:55:59 +0200
Subject: [PATCH 03/23] fix(notes): preserve reading scroll and editor
 selection

---
 core/services/noteWorkspaceTabs.ts            |  2 +-
 .../features/notes/MobileNotesTabMenu.tsx     |  4 +-
 ui/web/components/features/notes/NoteView.tsx |  5 +-
 .../features/notes/NotesTabStrip.tsx          |  8 ++-
 ui/web/hooks/useNoteAppController.ts          |  2 +-
 .../tests/unit/components/noteEditor.test.tsx | 27 ++++++++-
 .../tests/unit/components/noteView.test.tsx   | 33 ++++++++++-
 .../tests/unit/components/notesShell.test.tsx | 13 ++++
 .../components/notesWorkspaceTabs.test.tsx    | 59 +++++++++++++++++++
 .../richTextEditorAdditional.test.tsx         | 15 ++++-
 .../useNoteAppControllerAdditional.test.tsx   | 23 ++++++++
 11 files changed, 179 insertions(+), 12 deletions(-)

diff --git a/core/services/noteWorkspaceTabs.ts b/core/services/noteWorkspaceTabs.ts
index 6775f387fc6..7da44696533 100644
--- a/core/services/noteWorkspaceTabs.ts
+++ b/core/services/noteWorkspaceTabs.ts
@@ -53,7 +53,7 @@ const DEFAULT_VIEW: NoteViewSession = { scrollTop: 0 }
 let fallbackIdCounter = 0
 
 const defaultIdFactory: NoteWorkspaceIdFactory = () => {
-  const cryptoApi = typeof globalThis.crypto === 'undefined' ? null : globalThis.crypto
+  const cryptoApi = globalThis.crypto === undefined ? null : globalThis.crypto
   if (cryptoApi && typeof cryptoApi.randomUUID === 'function') {
     return cryptoApi.randomUUID()
   }
diff --git a/ui/web/components/features/notes/MobileNotesTabMenu.tsx b/ui/web/components/features/notes/MobileNotesTabMenu.tsx
index bfc024a8f58..19173afed58 100644
--- a/ui/web/components/features/notes/MobileNotesTabMenu.tsx
+++ b/ui/web/components/features/notes/MobileNotesTabMenu.tsx
@@ -68,6 +68,7 @@ export function MobileNotesTabMenu({
                   variant="ghost"
                   className={cn("min-w-0 flex-1 justify-start rounded-lg px-2.5", isActive && "bg-muted font-semibold")}
                   title={label}
+                  onMouseDown={(event) => event.preventDefault()}
                   onClick={() => handleActivate(tab.id)}
                 >
                   <span className="min-w-0 flex-1 truncate text-left">{label}</span>
@@ -80,6 +81,7 @@ export function MobileNotesTabMenu({
                   className="h-8 w-8 shrink-0 text-muted-foreground hover:text-foreground"
                   aria-label={`Close ${label}`}
                   title={`Close ${label}`}
+                  onMouseDown={(event) => event.preventDefault()}
                   onClick={() => handleClose(tab)}
                 >
                   <X className="h-3.5 w-3.5" aria-hidden="true" />
@@ -87,7 +89,7 @@ export function MobileNotesTabMenu({
               </div>
             )
           })}
-          <Button type="button" variant="ghost" className="mt-1 w-full justify-start rounded-lg" onClick={onAddTab}>
+          <Button type="button" variant="ghost" className="mt-1 w-full justify-start rounded-lg" onMouseDown={(event) => event.preventDefault()} onClick={onAddTab}>
             <Plus className="h-4 w-4" aria-hidden="true" />
             Add tab
           </Button>
diff --git a/ui/web/components/features/notes/NoteView.tsx b/ui/web/components/features/notes/NoteView.tsx
index 05537fe42ef..90f654d417e 100644
--- a/ui/web/components/features/notes/NoteView.tsx
+++ b/ui/web/components/features/notes/NoteView.tsx
@@ -54,13 +54,14 @@ export const NoteView = React.memo(function NoteView({
   const { copied, copyNote } = useCopyNote()
   const isBodyEmpty = React.useMemo(() => NoteClipboardService.isBodyEmpty(bodyHtml), [bodyHtml])
   const contentRef = React.useRef<HTMLDivElement | null>(null)
+  const initialScrollTopRef = React.useRef(initialScrollTop)
 
   React.useEffect(() => {
     const frame = window.requestAnimationFrame(() => {
-      if (contentRef.current) contentRef.current.scrollTop = initialScrollTop
+      if (contentRef.current) contentRef.current.scrollTop = initialScrollTopRef.current
     })
     return () => window.cancelAnimationFrame(frame)
-  }, [initialScrollTop, note.id])
+  }, [note.id])
 
   // Форматирование дат для предотвращения повторных вычислений
   const formattedDates = React.useMemo(() => ({
diff --git a/ui/web/components/features/notes/NotesTabStrip.tsx b/ui/web/components/features/notes/NotesTabStrip.tsx
index c6035ead930..8c12871ccc2 100644
--- a/ui/web/components/features/notes/NotesTabStrip.tsx
+++ b/ui/web/components/features/notes/NotesTabStrip.tsx
@@ -22,7 +22,7 @@ function getTabLabel(tab: NoteWorkspaceTab): string {
   return tab.noteId ? "Untitled note" : "New note"
 }
 
-function SaveStateIndicator({ tab }: { tab: NoteWorkspaceTab }) {
+function SaveStateIndicator({ tab }: Readonly<{ tab: NoteWorkspaceTab }>) {
   if (tab.saveState === "dirty") {
     return (
       <span
@@ -73,7 +73,7 @@ function activateWithKeyboard(
   }
 
   event.preventDefault()
-  let nextIndex = tabIndex
+  let nextIndex: number
   if (event.key === "Home") {
     nextIndex = 0
   } else if (event.key === "End") {
@@ -121,6 +121,7 @@ export function NotesTabStrip({
                     isActive && "font-semibold text-foreground hover:bg-transparent",
                   )}
                   title={label}
+                  onMouseDown={(event) => event.preventDefault()}
                   onClick={() => onActivateTab(tab.id)}
                   onKeyDown={(event) => activateWithKeyboard(event, index, tabs, onActivateTab)}
                 >
@@ -134,6 +135,7 @@ export function NotesTabStrip({
                   className="mr-0.5 h-6 w-6 shrink-0 text-muted-foreground opacity-70 hover:text-foreground group-hover:opacity-100"
                   aria-label={`Close ${label}`}
                   title={`Close ${label}`}
+                  onMouseDown={(event) => event.preventDefault()}
                   onClick={() => onCloseTab(tab.id)}
                 >
                   <X className="h-3.5 w-3.5" aria-hidden="true" />
@@ -143,7 +145,7 @@ export function NotesTabStrip({
           })}
         </div>
       </div>
-      <Button type="button" variant="ghost" size="icon" className="h-8 w-8 shrink-0" onClick={onAddTab} aria-label="Add note tab" title="Add note tab">
+      <Button type="button" variant="ghost" size="icon" className="h-8 w-8 shrink-0" onMouseDown={(event) => event.preventDefault()} onClick={onAddTab} aria-label="Add note tab" title="Add note tab">
         <Plus className="h-4 w-4" aria-hidden="true" />
       </Button>
     </div>
diff --git a/ui/web/hooks/useNoteAppController.ts b/ui/web/hooks/useNoteAppController.ts
index 68ecf75a66b..dbbb60e2107 100644
--- a/ui/web/hooks/useNoteAppController.ts
+++ b/ui/web/hooks/useNoteAppController.ts
@@ -158,8 +158,8 @@ export function useNoteAppController() {
   }, [activeTabId, updateTab])
 
   const flushAndCaptureActiveTab = useCallback(async () => {
-    await flushPendingEditorSave()
     captureActiveTabSession()
+    await flushPendingEditorSave()
   }, [captureActiveTabSession, flushPendingEditorSave])
 
   // -- Infrastructure --
diff --git a/ui/web/tests/unit/components/noteEditor.test.tsx b/ui/web/tests/unit/components/noteEditor.test.tsx
index 39e64a30b6c..212075680d9 100644
--- a/ui/web/tests/unit/components/noteEditor.test.tsx
+++ b/ui/web/tests/unit/components/noteEditor.test.tsx
@@ -5,6 +5,10 @@ import { copyNotePayloadToClipboard } from '@ui/web/lib/noteClipboard'
 
 const mockSetEditorContent = jest.fn()
 let mockEditorHtml = '<p>Body A</p>'
+let mockEditorSelection = { from: 2, to: 5 }
+const mockSetEditorSelection = jest.fn((selection: { from: number; to: number }) => {
+  mockEditorSelection = selection
+})
 
 jest.mock('@/components/ui/button', () => ({
   Button: ({ children, ...props }: React.ButtonHTMLAttributes<HTMLButtonElement>) => (
@@ -27,7 +31,14 @@ jest.mock('@/components/RichTextEditor', () => {
   const ReactModule = jest.requireActual<typeof import('react')>('react')
 
   const MockRichTextEditor = ReactModule.forwardRef<
-    { getHTML: () => string; setContent: (html: string) => void; runCommand: () => void; scrollToChunk: () => void },
+    {
+      getHTML: () => string
+      getSelection: () => { from: number; to: number }
+      setSelection: (selection: { from: number; to: number }) => void
+      setContent: (html: string) => void
+      runCommand: () => void
+      scrollToChunk: () => void
+    },
     { initialContent: string; onContentChange?: () => void }
   >((props, ref) => {
     const initializedRef = ReactModule.useRef(false)
@@ -38,6 +49,8 @@ jest.mock('@/components/RichTextEditor', () => {
 
     ReactModule.useImperativeHandle(ref, () => ({
       getHTML: () => mockEditorHtml,
+      getSelection: () => mockEditorSelection,
+      setSelection: mockSetEditorSelection,
       setContent: (html: string) => {
         mockSetEditorContent(html)
         mockEditorHtml = html
@@ -117,6 +130,7 @@ describe('NoteEditor same-note autosave reconciliation', () => {
   beforeEach(() => {
     jest.clearAllMocks()
     mockEditorHtml = '<p>Body A</p>'
+    mockEditorSelection = { from: 2, to: 5 }
   })
 
   afterEach(() => {
@@ -419,6 +433,17 @@ describe('NoteEditor same-note autosave reconciliation', () => {
     expect(screen.getByText('<p>Remote body</p>')).toBeTruthy()
     expect(screen.getByTestId('selected-tags').textContent).toBe('remote-tag')
   })
+
+  it('captures and restores the rich-text selection in the editing session', async () => {
+    const session = {
+      draft: { title: 'First', description: '<p>Body A</p>', tags: 'tag-a' },
+      view: { scrollTop: 12, editorSelection: { from: 7, to: 14 } },
+    }
+    const { ref } = renderEditor({ initialSession: session })
+
+    await waitFor(() => expect(mockSetEditorSelection).toHaveBeenCalledWith({ from: 7, to: 14 }))
+    expect(ref.current?.captureSession?.().view.editorSelection).toEqual({ from: 7, to: 14 })
+  })
 })
 
 describe('NoteEditor copy action', () => {
diff --git a/ui/web/tests/unit/components/noteView.test.tsx b/ui/web/tests/unit/components/noteView.test.tsx
index 82ac402f3ac..9580486c8fc 100644
--- a/ui/web/tests/unit/components/noteView.test.tsx
+++ b/ui/web/tests/unit/components/noteView.test.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
 import { NoteView } from '@ui/web/components/features/notes/NoteView'
 import { toast } from 'sonner'
 import { copyNotePayloadToClipboard } from '@ui/web/lib/noteClipboard'
@@ -33,7 +33,14 @@ jest.mock('@ui/web/lib/noteClipboard', () => ({
 
 const mockCopy = copyNotePayloadToClipboard as jest.MockedFunction<typeof copyNotePayloadToClipboard>
 
-function renderNoteView(overrides: Partial<{ description: string; content: string }> = {}) {
+type NoteViewTestOverrides = Partial<{
+  description: string
+  content: string
+  initialScrollTop: number
+  onViewSessionChange: (view: { scrollTop?: number }) => void
+}>
+
+function renderNoteView(overrides: NoteViewTestOverrides = {}) {
   return render(
     <NoteView
       note={{
@@ -49,6 +56,8 @@ function renderNoteView(overrides: Partial<{ description: string; content: strin
       onDelete={jest.fn()}
       onTagClick={jest.fn()}
       onRemoveTag={jest.fn()}
+      initialScrollTop={overrides.initialScrollTop}
+      onViewSessionChange={overrides.onViewSessionChange}
     />,
   )
 }
@@ -99,4 +108,24 @@ describe('NoteView copy action', () => {
       expect(toast.error).toHaveBeenCalledWith('Failed to copy note')
     })
   })
+
+  it('restores the saved scroll position and reports later scrolling', () => {
+    const requestAnimationFrame = jest.spyOn(window, 'requestAnimationFrame').mockImplementation((callback) => {
+      callback(0)
+      return 1
+    })
+    const onViewSessionChange = jest.fn()
+    const { container } = renderNoteView({ initialScrollTop: 48, onViewSessionChange })
+    const content = container.querySelector('.overflow-y-auto') as HTMLDivElement
+
+    expect(requestAnimationFrame).toHaveBeenCalled()
+    expect(content.scrollTop).toBe(48)
+
+    act(() => {
+      fireEvent.scroll(content, { target: { scrollTop: 93 } })
+    })
+    expect(onViewSessionChange).toHaveBeenCalledWith({ scrollTop: 93 })
+
+    requestAnimationFrame.mockRestore()
+  })
 })
diff --git a/ui/web/tests/unit/components/notesShell.test.tsx b/ui/web/tests/unit/components/notesShell.test.tsx
index 8bff7654bc5..5484338c445 100644
--- a/ui/web/tests/unit/components/notesShell.test.tsx
+++ b/ui/web/tests/unit/components/notesShell.test.tsx
@@ -371,6 +371,19 @@ describe('NotesShell', () => {
     await waitFor(() => expect(mockWordPressGetStatus).toHaveBeenCalled())
   })
 
+  it('routes workspace tab controls through the notes controller', () => {
+    const controller = makeController({ selectedNote: note })
+    renderShell(controller)
+
+    fireEvent.click(screen.getByRole('tab', { name: 'Travel note' }))
+    fireEvent.click(screen.getByRole('button', { name: 'Add note tab' }))
+    fireEvent.click(screen.getByRole('button', { name: 'Close Travel note' }))
+
+    expect(controller.activateTab).toHaveBeenCalledWith('tab-1')
+    expect(controller.addTab).toHaveBeenCalledTimes(1)
+    expect(controller.closeTab).toHaveBeenCalledWith('tab-1')
+  })
+
   it('passes editing state and pending chunk focus through the editor', async () => {
     const controller = makeController({ selectedNote: note, isEditing: true })
     renderShell(controller)
diff --git a/ui/web/tests/unit/components/notesWorkspaceTabs.test.tsx b/ui/web/tests/unit/components/notesWorkspaceTabs.test.tsx
index 69b15fc1ec1..d78722d35aa 100644
--- a/ui/web/tests/unit/components/notesWorkspaceTabs.test.tsx
+++ b/ui/web/tests/unit/components/notesWorkspaceTabs.test.tsx
@@ -75,6 +75,44 @@ describe('Notes workspace tab controls', () => {
     expect(onActivateTab).toHaveBeenCalledWith('tab-2')
   })
 
+  it('supports reverse, first, and last keyboard navigation', () => {
+    const onActivateTab = jest.fn()
+
+    render(
+      <NotesTabStrip
+        tabs={tabs}
+        activeTabId="tab-1"
+        onAddTab={jest.fn()}
+        onActivateTab={onActivateTab}
+        onCloseTab={jest.fn()}
+      />,
+    )
+
+    fireEvent.keyDown(screen.getByRole('tab', { name: 'First note' }), { key: 'ArrowLeft' })
+    fireEvent.keyDown(screen.getByRole('tab', { name: /Second note/ }), { key: 'Home' })
+    fireEvent.keyDown(screen.getByRole('tab', { name: 'First note' }), { key: 'End' })
+
+    expect(onActivateTab.mock.calls).toEqual([['tab-2'], ['tab-1'], ['tab-2']])
+  })
+
+  it('shows saving and error indicators for the active workspace tab', () => {
+    render(
+      <NotesTabStrip
+        tabs={[
+          makeTab('tab-saving', 'Saving note', { saveState: 'saving' }),
+          makeTab('tab-error', 'Failed note', { saveState: 'error', saveError: 'Network unavailable' }),
+        ]}
+        activeTabId="tab-saving"
+        onAddTab={jest.fn()}
+        onActivateTab={jest.fn()}
+        onCloseTab={jest.fn()}
+      />,
+    )
+
+    expect(screen.getByLabelText('Saving changes')).toBeTruthy()
+    expect(screen.getByLabelText('Network unavailable')).toBeTruthy()
+  })
+
   it('opens the compact mobile list and forwards activation, close, and add actions', () => {
     const onAddTab = jest.fn()
     const onActivateTab = jest.fn()
@@ -100,4 +138,25 @@ describe('Notes workspace tab controls', () => {
     expect(onCloseTab).toHaveBeenCalledWith('tab-1')
     expect(onAddTab).toHaveBeenCalledTimes(1)
   })
+
+  it('closes the mobile menu after closing its only active tab', () => {
+    const onCloseTab = jest.fn()
+    render(
+      <MobileNotesTabMenu
+        tabs={[makeTab('tab-1', 'Only note')]}
+        activeTabId="tab-1"
+        onAddTab={jest.fn()}
+        onActivateTab={jest.fn()}
+        onCloseTab={onCloseTab}
+      />,
+    )
+
+    const menuButton = screen.getByRole('button', { name: 'Open note tabs (1)' })
+    fireEvent.click(menuButton)
+    fireEvent.click(screen.getByRole('button', { name: 'Close Only note' }))
+
+    expect(onCloseTab).toHaveBeenCalledWith('tab-1')
+    expect(menuButton.getAttribute('aria-expanded')).toBe('false')
+    expect(screen.getByText('1 tab')).toBeTruthy()
+  })
 })
diff --git a/ui/web/tests/unit/components/richTextEditorAdditional.test.tsx b/ui/web/tests/unit/components/richTextEditorAdditional.test.tsx
index 39bac71100b..a8de78d1ff3 100644
--- a/ui/web/tests/unit/components/richTextEditorAdditional.test.tsx
+++ b/ui/web/tests/unit/components/richTextEditorAdditional.test.tsx
@@ -70,7 +70,7 @@ function createMockEditor() {
       dispatch: jest.fn(),
       serializeForClipboard: jest.fn(() => ({ dom: { innerHTML: '<p>Selected</p>' } })),
     },
-    commands: { undo: jest.fn(), redo: jest.fn() },
+    commands: { undo: jest.fn(), redo: jest.fn(), setTextSelection: jest.fn() },
     chain: jest.fn(() => chain),
     can: jest.fn(() => ({ undo: () => true, redo: () => false })),
     __chain: chain,
@@ -231,5 +231,18 @@ describe('RichTextEditor additional observable behavior', () => {
 
     capturedMenuBarProps?.onApplyMarkdown()
     expect(applySelectionAsMarkdown).toHaveBeenCalledWith(mockEditor, onContentChange)
+
+    expect(ref.current?.getSelection?.()).toEqual({ from: 2, to: 5 })
+    ref.current?.setSelection?.({ from: -4.8, to: 20.2 })
+    expect(mockEditor.commands.setTextSelection).toHaveBeenCalledWith({ from: 1, to: 9 })
+  })
+
+  it('keeps selection methods safe before the editor instance is available', () => {
+    mockEditor = null
+    const ref = React.createRef<React.ElementRef<typeof RichTextEditor>>()
+    render(<RichTextEditor ref={ref} initialContent="<p>Initial</p>" />)
+
+    expect(ref.current?.getSelection?.()).toBeUndefined()
+    expect(() => ref.current?.setSelection?.({ from: 1, to: 2 })).not.toThrow()
   })
 })
diff --git a/ui/web/tests/unit/hooks/useNoteAppControllerAdditional.test.tsx b/ui/web/tests/unit/hooks/useNoteAppControllerAdditional.test.tsx
index 990d3f722b7..e3d37ffa4d1 100644
--- a/ui/web/tests/unit/hooks/useNoteAppControllerAdditional.test.tsx
+++ b/ui/web/tests/unit/hooks/useNoteAppControllerAdditional.test.tsx
@@ -266,6 +266,29 @@ describe('useNoteAppController additional observable behavior', () => {
     window.history.pushState({}, '', '/')
   })
 
+  it('captures the editor selection before switching to a new workspace tab', async () => {
+    const { result } = setup()
+
+    const flushPendingSave = jest.fn().mockResolvedValue(undefined)
+    const captureSession = jest.fn(() => ({
+      draft: { title: 'Draft', description: '<p>Body</p>', tags: '' },
+      view: { scrollTop: 12, editorSelection: { from: 4, to: 9 } },
+    }))
+    const editorRef = { current: { flushPendingSave, captureSession } }
+    act(() => result.current.registerNoteEditorRef(editorRef as never))
+
+    await act(async () => {
+      await result.current.addTab()
+    })
+
+    expect(captureSession).toHaveBeenCalledTimes(1)
+    expect(flushPendingSave).toHaveBeenCalledTimes(1)
+    expect(result.current.tabs[0].view).toEqual({
+      scrollTop: 12,
+      editorSelection: { from: 4, to: 9 },
+    })
+  })
+
   it('selects the remote note after flushing, but exits editing when selecting the already selected note', async () => {
     const current = makeNote({ id: 'current' })
     const remote = makeNote({ id: 'remote', title: 'Remote' })

From 56d4136190a360e39e961798c460c4358824ce46 Mon Sep 17 00:00:00 2001
From: Denys <koreybadenis@gmail.com>
Date: Sun, 2 Aug 2026 10:13:02 +0200
Subject: [PATCH 04/23] fix(notes): avoid empty tab e2e locator collision

---
 ui/web/components/features/notes/MobileNotesTabMenu.tsx | 2 +-
 ui/web/components/features/notes/NotesTabStrip.tsx      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/ui/web/components/features/notes/MobileNotesTabMenu.tsx b/ui/web/components/features/notes/MobileNotesTabMenu.tsx
index 19173afed58..7a1fd9afb32 100644
--- a/ui/web/components/features/notes/MobileNotesTabMenu.tsx
+++ b/ui/web/components/features/notes/MobileNotesTabMenu.tsx
@@ -79,7 +79,7 @@ export function MobileNotesTabMenu({
                   variant="ghost"
                   size="icon"
                   className="h-8 w-8 shrink-0 text-muted-foreground hover:text-foreground"
-                  aria-label={`Close ${label}`}
+                  aria-label={tab.noteId ? `Close ${label}` : "Close empty note tab"}
                   title={`Close ${label}`}
                   onMouseDown={(event) => event.preventDefault()}
                   onClick={() => handleClose(tab)}
diff --git a/ui/web/components/features/notes/NotesTabStrip.tsx b/ui/web/components/features/notes/NotesTabStrip.tsx
index 8c12871ccc2..e9c2f9ab96e 100644
--- a/ui/web/components/features/notes/NotesTabStrip.tsx
+++ b/ui/web/components/features/notes/NotesTabStrip.tsx
@@ -133,7 +133,7 @@ export function NotesTabStrip({
                   variant="ghost"
                   size="icon"
                   className="mr-0.5 h-6 w-6 shrink-0 text-muted-foreground opacity-70 hover:text-foreground group-hover:opacity-100"
-                  aria-label={`Close ${label}`}
+                  aria-label={tab.noteId ? `Close ${label}` : "Close empty note tab"}
                   title={`Close ${label}`}
                   onMouseDown={(event) => event.preventDefault()}
                   onClick={() => onCloseTab(tab.id)}

From 8e9c214170eb6289e92e1831d2d6cc4b5cee1e63 Mon Sep 17 00:00:00 2001
From: Denys <koreybadenis@gmail.com>
Date: Sun, 2 Aug 2026 10:30:07 +0200
Subject: [PATCH 05/23] fix(notes): remove invalid tablist semantics

---
 ui/web/components/features/notes/NotesTabStrip.tsx |  5 ++---
 ui/web/tests/unit/components/notesShell.test.tsx   |  2 +-
 .../unit/components/notesWorkspaceTabs.test.tsx    | 14 +++++++-------
 3 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/ui/web/components/features/notes/NotesTabStrip.tsx b/ui/web/components/features/notes/NotesTabStrip.tsx
index e9c2f9ab96e..c0862e13aba 100644
--- a/ui/web/components/features/notes/NotesTabStrip.tsx
+++ b/ui/web/components/features/notes/NotesTabStrip.tsx
@@ -95,7 +95,7 @@ export function NotesTabStrip({
 }: ReadonlyNotesTabStripProps) {
   return (
     <div className="hidden min-w-0 items-center gap-1 border-b border-border/60 bg-background/80 px-2 py-1 backdrop-blur md:flex">
-      <div className="min-w-0 flex-1 overflow-x-auto" role="tablist" aria-label="Open notes">
+      <div className="min-w-0 flex-1 overflow-x-auto" aria-label="Open notes">
         <div className="flex min-w-max items-center gap-1">
           {tabs.map((tab, index) => {
             const label = getTabLabel(tab)
@@ -112,8 +112,7 @@ export function NotesTabStrip({
               >
                 <Button
                   type="button"
-                  role="tab"
-                  aria-selected={isActive}
+                  aria-pressed={isActive}
                   tabIndex={isActive ? 0 : -1}
                   variant="ghost"
                   className={cn(
diff --git a/ui/web/tests/unit/components/notesShell.test.tsx b/ui/web/tests/unit/components/notesShell.test.tsx
index 5484338c445..da8018079d3 100644
--- a/ui/web/tests/unit/components/notesShell.test.tsx
+++ b/ui/web/tests/unit/components/notesShell.test.tsx
@@ -375,7 +375,7 @@ describe('NotesShell', () => {
     const controller = makeController({ selectedNote: note })
     renderShell(controller)
 
-    fireEvent.click(screen.getByRole('tab', { name: 'Travel note' }))
+    fireEvent.click(screen.getByRole('button', { name: 'Travel note', pressed: true }))
     fireEvent.click(screen.getByRole('button', { name: 'Add note tab' }))
     fireEvent.click(screen.getByRole('button', { name: 'Close Travel note' }))
 
diff --git a/ui/web/tests/unit/components/notesWorkspaceTabs.test.tsx b/ui/web/tests/unit/components/notesWorkspaceTabs.test.tsx
index d78722d35aa..cbf1ebb6665 100644
--- a/ui/web/tests/unit/components/notesWorkspaceTabs.test.tsx
+++ b/ui/web/tests/unit/components/notesWorkspaceTabs.test.tsx
@@ -45,11 +45,11 @@ describe('Notes workspace tab controls', () => {
       />,
     )
 
-    expect(screen.getByRole('tab', { name: 'First note' }).getAttribute('aria-selected')).toBe('true')
-    expect(screen.getByRole('tab', { name: /Second note/ }).getAttribute('aria-selected')).toBe('false')
+    expect(screen.getByRole('button', { name: 'First note' }).getAttribute('aria-pressed')).toBe('true')
+    expect(screen.getByRole('button', { name: /^Second note/ }).getAttribute('aria-pressed')).toBe('false')
     expect(screen.getByLabelText('Unsaved changes')).toBeTruthy()
 
-    fireEvent.click(screen.getByRole('tab', { name: /Second note/ }))
+    fireEvent.click(screen.getByRole('button', { name: /^Second note/ }))
     fireEvent.click(screen.getByRole('button', { name: 'Close First note' }))
     fireEvent.click(screen.getByRole('button', { name: 'Add note tab' }))
 
@@ -71,7 +71,7 @@ describe('Notes workspace tab controls', () => {
       />,
     )
 
-    fireEvent.keyDown(screen.getByRole('tab', { name: 'First note' }), { key: 'ArrowRight' })
+    fireEvent.keyDown(screen.getByRole('button', { name: 'First note' }), { key: 'ArrowRight' })
     expect(onActivateTab).toHaveBeenCalledWith('tab-2')
   })
 
@@ -88,9 +88,9 @@ describe('Notes workspace tab controls', () => {
       />,
     )
 
-    fireEvent.keyDown(screen.getByRole('tab', { name: 'First note' }), { key: 'ArrowLeft' })
-    fireEvent.keyDown(screen.getByRole('tab', { name: /Second note/ }), { key: 'Home' })
-    fireEvent.keyDown(screen.getByRole('tab', { name: 'First note' }), { key: 'End' })
+    fireEvent.keyDown(screen.getByRole('button', { name: 'First note' }), { key: 'ArrowLeft' })
+    fireEvent.keyDown(screen.getByRole('button', { name: /^Second note/ }), { key: 'Home' })
+    fireEvent.keyDown(screen.getByRole('button', { name: 'First note' }), { key: 'End' })
 
     expect(onActivateTab.mock.calls).toEqual([['tab-2'], ['tab-1'], ['tab-2']])
   })

From 76bbc106197defa1ea771de0b819301a5a2115cb Mon Sep 17 00:00:00 2001
From: Denys <koreybadenis@gmail.com>
Date: Sun, 2 Aug 2026 10:38:46 +0200
Subject: [PATCH 06/23] fix(notes): disambiguate empty tab accessibility name

---
 ui/web/components/features/notes/MobileNotesTabMenu.tsx | 1 +
 ui/web/components/features/notes/NotesTabStrip.tsx      | 1 +
 2 files changed, 2 insertions(+)

diff --git a/ui/web/components/features/notes/MobileNotesTabMenu.tsx b/ui/web/components/features/notes/MobileNotesTabMenu.tsx
index 7a1fd9afb32..74a9fdaf065 100644
--- a/ui/web/components/features/notes/MobileNotesTabMenu.tsx
+++ b/ui/web/components/features/notes/MobileNotesTabMenu.tsx
@@ -65,6 +65,7 @@ export function MobileNotesTabMenu({
                 <Button
                   type="button"
                   aria-pressed={isActive}
+                  aria-label={tab.noteId ? undefined : "Open empty note tab"}
                   variant="ghost"
                   className={cn("min-w-0 flex-1 justify-start rounded-lg px-2.5", isActive && "bg-muted font-semibold")}
                   title={label}
diff --git a/ui/web/components/features/notes/NotesTabStrip.tsx b/ui/web/components/features/notes/NotesTabStrip.tsx
index c0862e13aba..d9d58fa5f55 100644
--- a/ui/web/components/features/notes/NotesTabStrip.tsx
+++ b/ui/web/components/features/notes/NotesTabStrip.tsx
@@ -113,6 +113,7 @@ export function NotesTabStrip({
                 <Button
                   type="button"
                   aria-pressed={isActive}
+                  aria-label={tab.noteId ? undefined : "Open empty note tab"}
                   tabIndex={isActive ? 0 : -1}
                   variant="ghost"
                   className={cn(

From e54879a0abe7db57f40f8e691a95be430e2bcd77 Mon Sep 17 00:00:00 2001
From: Denys <koreybadenis@gmail.com>
Date: Sun, 2 Aug 2026 12:06:40 +0200
Subject: [PATCH 07/23] fix(notes): complete mobile workspace tab flow

---
 core/services/noteWorkspaceTabs.ts            |   2 +-
 .../features/mobile/MobileLayout.cy.tsx       |  31 +++-
 .../notes/NotesShellFtsExitSave.cy.tsx        |  46 +-----
 .../notes/NotesShellLikeExitSave.cy.tsx       |  46 +-----
 .../notes/NotesShellOpenInContext.cy.tsx      |  26 +---
 .../features/notes/notesShellTestUtils.tsx    |  46 ++++++
 .../design/2026-08-01-feature-notes-tabs.md   |  13 +-
 .../2026-08-01-feature-notes-tabs.md          |   2 +-
 .../testing/2026-08-01-feature-notes-tabs.md  |   2 +
 .../features/notes/MobileNotesTabMenu.tsx     |   7 +-
 .../components/features/notes/NotesShell.tsx  | 142 +++++++++---------
 ui/web/hooks/useNoteAppController.ts          |  23 ++-
 .../tests/unit/components/noteView.test.tsx   |   6 +-
 .../tests/unit/components/notesShell.test.tsx |   7 +
 .../components/notesWorkspaceTabs.test.tsx    |   1 +
 .../useNoteAppControllerAdditional.test.tsx   |  23 +++
 16 files changed, 239 insertions(+), 184 deletions(-)
 create mode 100644 cypress/component/features/notes/notesShellTestUtils.tsx

diff --git a/core/services/noteWorkspaceTabs.ts b/core/services/noteWorkspaceTabs.ts
index 7da44696533..5b4dc5b534b 100644
--- a/core/services/noteWorkspaceTabs.ts
+++ b/core/services/noteWorkspaceTabs.ts
@@ -53,7 +53,7 @@ const DEFAULT_VIEW: NoteViewSession = { scrollTop: 0 }
 let fallbackIdCounter = 0
 
 const defaultIdFactory: NoteWorkspaceIdFactory = () => {
-  const cryptoApi = globalThis.crypto === undefined ? null : globalThis.crypto
+  const cryptoApi = globalThis.crypto ?? null
   if (cryptoApi && typeof cryptoApi.randomUUID === 'function') {
     return cryptoApi.randomUUID()
   }
diff --git a/cypress/component/features/mobile/MobileLayout.cy.tsx b/cypress/component/features/mobile/MobileLayout.cy.tsx
index 67260a29d7e..b09e743224c 100644
--- a/cypress/component/features/mobile/MobileLayout.cy.tsx
+++ b/cypress/component/features/mobile/MobileLayout.cy.tsx
@@ -3,7 +3,7 @@ import { NotesShell } from '../../../../ui/web/components/features/notes/NotesSh
 import type { NoteAppController } from '../../../../ui/web/hooks/useNoteAppController'
 import { SupabaseTestProvider } from '../../../../ui/web/providers/SupabaseProvider'
 import type { SupabaseClient } from '@supabase/supabase-js'
-import type { NoteWorkspaceTab } from '../../../../core/services/noteWorkspaceTabs'
+import type { NoteWorkspaceTab } from '@core/services/noteWorkspaceTabs'
 import { ThemeProvider } from '../../../../ui/web/components/theme-provider'
 
 describe('Mobile Layout Adaptation', () => {
@@ -182,6 +182,35 @@ describe('Mobile Layout Adaptation', () => {
     cy.get('[data-testid=\'editor-container\']').should('have.class', 'hidden')
   })
 
+  it('keeps the active tab switcher above the mobile note list for a new tab', () => {
+    cy.viewport('iphone-se2')
+    const note = {
+      id: 'choose-me',
+      title: 'Choose me',
+      description: 'A note for the new tab',
+      tags: [],
+      created_at: new Date().toISOString(),
+      updated_at: new Date().toISOString(),
+      user_id: 'test-user',
+    }
+    const controller = createMockController({ notes: [note], notesDisplayed: 1, notesTotal: 1 })
+
+    cy.mount(
+      <ThemeProvider attribute='class' defaultTheme='system' enableSystem>
+        <SupabaseTestProvider supabase={mockSupabase}>
+          <NotesShell controller={controller} />
+        </SupabaseTestProvider>
+      </ThemeProvider>
+    )
+
+    cy.get('[aria-label="Open note tabs (1)"]').click()
+    cy.contains('button', 'Add tab').click()
+    cy.get('[aria-label="Open note tabs (1)"]').should('have.attr', 'aria-expanded', 'false')
+    cy.get('[data-testid="sidebar-container"]').should('not.have.class', 'hidden')
+    cy.get('[data-testid="note-card"]').contains('Choose me').click()
+    cy.get('@handleSelectNote').should('have.been.calledWith', note)
+  })
+
   it('shows editor and hides sidebar when note is selected on mobile', () => {
     cy.viewport('iphone-se2')
     const selectedNote = {
diff --git a/cypress/component/features/notes/NotesShellFtsExitSave.cy.tsx b/cypress/component/features/notes/NotesShellFtsExitSave.cy.tsx
index c3378c60c68..0e0bc2d39fa 100644
--- a/cypress/component/features/notes/NotesShellFtsExitSave.cy.tsx
+++ b/cypress/component/features/notes/NotesShellFtsExitSave.cy.tsx
@@ -3,36 +3,13 @@ import type { SupabaseClient, User } from '@supabase/supabase-js'
 
 import { NotesShell } from '../../../../ui/web/components/features/notes/NotesShell'
 import type { NoteViewModel, SearchResult } from '../../../../core/types/domain'
-import type { NoteWorkspaceTab } from '@core/services/noteWorkspaceTabs'
-import type { NoteEditorHandle } from '../../../../ui/web/components/features/notes/NoteEditor'
 import { SupabaseTestProvider } from '../../../../ui/web/providers/SupabaseProvider'
-
-const pastePlainText = (text: string) => {
-  cy.get('[data-cy="editor-content"]').click()
-  cy.get('.ProseMirror').trigger('paste', {
-    clipboardData: {
-      types: ['text/plain'],
-      getData: (type: string) => (type === 'text/plain' ? text : ''),
-    },
-  })
-}
-
-type FakeController = Record<string, unknown>
-
-const makeWorkspaceTab = (note: NoteViewModel | null, isEditing: boolean): NoteWorkspaceTab => ({
-  id: 'tab-1',
-  noteId: note?.id ?? null,
-  note,
-  mode: isEditing ? 'editing' : 'reading',
-  draft: {
-    title: note?.title ?? '',
-    description: note?.description ?? '',
-    tags: note?.tags.join(', ') ?? '',
-  },
-  view: { scrollTop: 0 },
-  saveState: 'saved',
-  saveError: null,
-})
+import {
+  makeWorkspaceTab,
+  pastePlainText,
+  useEditorExitState,
+  type FakeController,
+} from './notesShellTestUtils'
 
 const buildController = () => {
   const supabase = {
@@ -74,10 +51,10 @@ const buildController = () => {
   ]
 
   const Harness = () => {
-    const registeredEditorRef = React.useRef<React.RefObject<NoteEditorHandle | null> | null>(null)
     const [notes, setNotes] = React.useState<NoteViewModel[]>(baseNotes)
     const [selectedNoteId, setSelectedNoteId] = React.useState<string>('note-1')
     const [isEditing, setIsEditing] = React.useState(true)
+    const { registerNoteEditorRef, flushIfEditing } = useEditorExitState(isEditing)
 
     const selectedNote = React.useMemo(
       () => notes.find((n) => n.id === selectedNoteId) ?? null,
@@ -85,11 +62,6 @@ const buildController = () => {
     )
     const activeTab = React.useMemo(() => makeWorkspaceTab(selectedNote, isEditing), [selectedNote, isEditing])
 
-    const flushIfEditing = React.useCallback(async () => {
-      if (!isEditing) return
-      await registeredEditorRef.current?.current?.flushPendingSave()
-    }, [isEditing])
-
     const ftsResults: SearchResult[] = React.useMemo(() => {
       // Simulate search results payload that may be stale. We re-resolve on click.
       return notes.map((n) => ({
@@ -152,9 +124,7 @@ const buildController = () => {
     }, [flushIfEditing, notes])
 
     const controller: FakeController = {
-      registerNoteEditorRef: (ref: React.RefObject<NoteEditorHandle | null>) => {
-        registeredEditorRef.current = ref
-      },
+      registerNoteEditorRef,
       user,
       notes,
       notesQuery: {
diff --git a/cypress/component/features/notes/NotesShellLikeExitSave.cy.tsx b/cypress/component/features/notes/NotesShellLikeExitSave.cy.tsx
index df25f1b5ca2..241f9e9213f 100644
--- a/cypress/component/features/notes/NotesShellLikeExitSave.cy.tsx
+++ b/cypress/component/features/notes/NotesShellLikeExitSave.cy.tsx
@@ -3,36 +3,13 @@ import type { SupabaseClient, User } from '@supabase/supabase-js'
 
 import { NotesShell } from '../../../../ui/web/components/features/notes/NotesShell'
 import type { NoteViewModel } from '../../../../core/types/domain'
-import type { NoteWorkspaceTab } from '@core/services/noteWorkspaceTabs'
-import type { NoteEditorHandle } from '../../../../ui/web/components/features/notes/NoteEditor'
 import { SupabaseTestProvider } from '../../../../ui/web/providers/SupabaseProvider'
-
-const pastePlainText = (text: string) => {
-  cy.get('[data-cy="editor-content"]').click()
-  cy.get('.ProseMirror').trigger('paste', {
-    clipboardData: {
-      types: ['text/plain'],
-      getData: (type: string) => (type === 'text/plain' ? text : ''),
-    },
-  })
-}
-
-type FakeController = Record<string, unknown>
-
-const makeWorkspaceTab = (note: NoteViewModel | null, isEditing: boolean): NoteWorkspaceTab => ({
-  id: 'tab-1',
-  noteId: note?.id ?? null,
-  note,
-  mode: isEditing ? 'editing' : 'reading',
-  draft: {
-    title: note?.title ?? '',
-    description: note?.description ?? '',
-    tags: note?.tags.join(', ') ?? '',
-  },
-  view: { scrollTop: 0 },
-  saveState: 'saved',
-  saveError: null,
-})
+import {
+  makeWorkspaceTab,
+  pastePlainText,
+  useEditorExitState,
+  type FakeController,
+} from './notesShellTestUtils'
 
 const buildController = () => {
   const supabase = {
@@ -74,10 +51,10 @@ const buildController = () => {
   ]
 
   const Harness = () => {
-    const registeredEditorRef = React.useRef<React.RefObject<NoteEditorHandle | null> | null>(null)
     const [notes, setNotes] = React.useState<NoteViewModel[]>(baseNotes)
     const [selectedNoteId, setSelectedNoteId] = React.useState<string>('note-1')
     const [isEditing, setIsEditing] = React.useState(true)
+    const { registerNoteEditorRef, flushIfEditing } = useEditorExitState(isEditing)
 
     const selectedNote = React.useMemo(
       () => notes.find((n) => n.id === selectedNoteId) ?? null,
@@ -85,11 +62,6 @@ const buildController = () => {
     )
     const activeTab = React.useMemo(() => makeWorkspaceTab(selectedNote, isEditing), [selectedNote, isEditing])
 
-    const flushIfEditing = React.useCallback(async () => {
-      if (!isEditing) return
-      await registeredEditorRef.current?.current?.flushPendingSave()
-    }, [isEditing])
-
     const handleAutoSave = React.useCallback(async (data: { noteId?: string; title?: string; description?: string; tags?: string }) => {
       const noteId = data.noteId ?? selectedNoteId
       if (!noteId) return
@@ -127,9 +99,7 @@ const buildController = () => {
     }, [flushIfEditing])
 
     const controller: FakeController = {
-      registerNoteEditorRef: (ref: React.RefObject<NoteEditorHandle | null>) => {
-        registeredEditorRef.current = ref
-      },
+      registerNoteEditorRef,
       user,
       notes,
       notesQuery: {
diff --git a/cypress/component/features/notes/NotesShellOpenInContext.cy.tsx b/cypress/component/features/notes/NotesShellOpenInContext.cy.tsx
index 7f2c24ce569..b0cd0b79448 100644
--- a/cypress/component/features/notes/NotesShellOpenInContext.cy.tsx
+++ b/cypress/component/features/notes/NotesShellOpenInContext.cy.tsx
@@ -3,26 +3,8 @@ import type { SupabaseClient, User } from '@supabase/supabase-js'
 
 import { NotesShell } from '../../../../ui/web/components/features/notes/NotesShell'
 import type { NoteViewModel } from '../../../../core/types/domain'
-import type { NoteWorkspaceTab } from '@core/services/noteWorkspaceTabs'
-import type { NoteEditorHandle } from '../../../../ui/web/components/features/notes/NoteEditor'
 import { SupabaseTestProvider } from '../../../../ui/web/providers/SupabaseProvider'
-
-type FakeController = Record<string, unknown>
-
-const makeWorkspaceTab = (note: NoteViewModel | null, isEditing: boolean): NoteWorkspaceTab => ({
-  id: 'tab-1',
-  noteId: note?.id ?? null,
-  note,
-  mode: isEditing ? 'editing' : 'reading',
-  draft: {
-    title: note?.title ?? '',
-    description: note?.description ?? '',
-    tags: note?.tags.join(', ') ?? '',
-  },
-  view: { scrollTop: 0 },
-  saveState: 'saved',
-  saveError: null,
-})
+import { makeWorkspaceTab, useEditorExitState, type FakeController } from './notesShellTestUtils'
 
 describe('NotesShell: AI open in context', () => {
   it('applies scroll and chunk highlight on the first open-in-context click', () => {
@@ -92,16 +74,14 @@ describe('NotesShell: AI open in context', () => {
     } as unknown as SupabaseClient
 
     function Harness() {
-      const registeredEditorRef = React.useRef<React.RefObject<NoteEditorHandle | null> | null>(null)
       const [selectedNote, setSelectedNote] = React.useState<NoteViewModel | null>(null)
       const [isEditing, setIsEditing] = React.useState(false)
       const [isSearchPanelOpen, setIsSearchPanelOpen] = React.useState(true)
+      const { registerNoteEditorRef } = useEditorExitState(isEditing)
       const activeTab = React.useMemo(() => makeWorkspaceTab(selectedNote, isEditing), [selectedNote, isEditing])
 
       const controller: FakeController = {
-        registerNoteEditorRef: (ref: React.RefObject<NoteEditorHandle | null>) => {
-          registeredEditorRef.current = ref
-        },
+        registerNoteEditorRef,
         user,
         notes: [note],
         notesQuery: {
diff --git a/cypress/component/features/notes/notesShellTestUtils.tsx b/cypress/component/features/notes/notesShellTestUtils.tsx
new file mode 100644
index 00000000000..a25a76dfaa9
--- /dev/null
+++ b/cypress/component/features/notes/notesShellTestUtils.tsx
@@ -0,0 +1,46 @@
+import React from 'react'
+import type { NoteWorkspaceTab } from '@core/services/noteWorkspaceTabs'
+import type { NoteViewModel } from '../../../../core/types/domain'
+import type { NoteEditorHandle } from '../../../../ui/web/components/features/notes/NoteEditor'
+
+export type FakeController = Record<string, unknown>
+
+export const pastePlainText = (text: string) => {
+  cy.get('[data-cy="editor-content"]').click()
+  cy.get('.ProseMirror').trigger('paste', {
+    clipboardData: {
+      types: ['text/plain'],
+      getData: (type: string) => (type === 'text/plain' ? text : ''),
+    },
+  })
+}
+
+export const makeWorkspaceTab = (note: NoteViewModel | null, isEditing: boolean): NoteWorkspaceTab => ({
+  id: 'tab-1',
+  noteId: note?.id ?? null,
+  note,
+  mode: isEditing ? 'editing' : 'reading',
+  draft: {
+    title: note?.title ?? '',
+    description: note?.description ?? '',
+    tags: note?.tags.join(', ') ?? '',
+  },
+  view: { scrollTop: 0 },
+  saveState: 'saved',
+  saveError: null,
+})
+
+export function useEditorExitState(isEditing: boolean) {
+  const registeredEditorRef = React.useRef<React.RefObject<NoteEditorHandle | null> | null>(null)
+
+  const registerNoteEditorRef = React.useCallback((ref: React.RefObject<NoteEditorHandle | null>) => {
+    registeredEditorRef.current = ref
+  }, [])
+
+  const flushIfEditing = React.useCallback(async () => {
+    if (!isEditing) return
+    await registeredEditorRef.current?.current?.flushPendingSave()
+  }, [isEditing])
+
+  return { registerNoteEditorRef, flushIfEditing }
+}
diff --git a/docs/ai/design/2026-08-01-feature-notes-tabs.md b/docs/ai/design/2026-08-01-feature-notes-tabs.md
index b7a416af799..49bc50bb9a4 100644
--- a/docs/ai/design/2026-08-01-feature-notes-tabs.md
+++ b/docs/ai/design/2026-08-01-feature-notes-tabs.md
@@ -16,7 +16,7 @@ graph TD
   Controller --> Flush[Editor flush and session capture]
   Flush --> Workspace
   Controller --> TabStrip[Desktop NotesTabStrip]
-  Controller --> MobileTabs[Compact MobileTabsList]
+  Controller --> MobileTabs[Compact MobileNotesTabMenu]
   Controller --> EditorPane[EditorPane]
   EditorPane --> NoteEditor[NoteEditor]
   EditorPane --> NoteView[NoteView]
@@ -106,7 +106,7 @@ The React hook adds hydration/persistence and stable callbacks. Controller integ
 | Web persistence | `ui/web/lib/noteWorkspaceStorage.ts` | `sessionStorage` adapter, version/key/quota handling |
 | Web hook | `ui/web/hooks/useNoteWorkspaceTabs.ts` | React state, hydration, persistence, stable actions |
 | Desktop UI | `ui/web/components/features/notes/NotesTabStrip.tsx` | Horizontal tabs, add/close, active and save indicators |
-| Mobile web UI | `ui/web/components/features/notes/MobileTabsList.tsx` | Active-tab summary and compact switch/close sheet/list |
+| Mobile web UI | `ui/web/components/features/notes/MobileNotesTabMenu.tsx` | Active-tab summary and compact switch/close/add list |
 | Controller | `ui/web/hooks/useNoteAppController.ts` | Flush/capture/transition; routes every note-open path through tabs |
 | Editor session | `NoteEditor.tsx`, `RichTextEditor.tsx` | Capture/restore draft, scroll, caret/selection |
 | Reading session | `NoteView.tsx` | Capture/restore reading scroll |
@@ -114,6 +114,15 @@ The React hook adds hydration/persistence and stable callbacks. Controller integ
 
 ## Design Decisions
 
+### Mobile empty-tab navigation
+
+The mobile tab menu is mounted in the shared Notes header above both the note
+list and the active editor. Adding a tab closes the menu and returns the mobile
+layout to the note list, leaving the new blank tab active. Selecting a note from
+that list replaces the active blank slot through the existing controller rule;
+it does not create another tab. Activating an empty reading tab uses the same
+list state so an empty tab never traps the user in a blank editor screen.
+
 ### Active-slot replacement is the default
 
 `openNoteInWorkspace` updates the active tab. `addWorkspaceTab` is the only operation that increases tab count. This encodes the product's key rule in one reducer function instead of relying on individual click handlers.
diff --git a/docs/ai/implementation/2026-08-01-feature-notes-tabs.md b/docs/ai/implementation/2026-08-01-feature-notes-tabs.md
index 0f92a82f241..c09fc9ef8bf 100644
--- a/docs/ai/implementation/2026-08-01-feature-notes-tabs.md
+++ b/docs/ai/implementation/2026-08-01-feature-notes-tabs.md
@@ -55,7 +55,7 @@ ui/web/components/features/notes/NoteView.tsx
 - `useNoteEditorAutoSave` remains responsible for debouncing and flush; `useNoteSaveHandlers` remains responsible for online/offline writes.
 - `NoteEditorHandle` gains capture/restore methods without exposing TipTap internals to the controller.
 - `NoteView` reports reading scroll position to the active tab.
-- `NotesShell` renders the tab UI above the existing editor action area and leaves the workspace mounted when `activeMainView` changes.
+- `NotesShell` renders the desktop strip in the editor and keeps `MobileNotesTabMenu` in a shared mobile header above both the note list and editor. Creating a blank mobile tab closes the menu and returns to the note list; the next note selection fills that active slot.
 
 ## Error Handling
 
diff --git a/docs/ai/testing/2026-08-01-feature-notes-tabs.md b/docs/ai/testing/2026-08-01-feature-notes-tabs.md
index bdd51e53d85..7dafbfdfbc2 100644
--- a/docs/ai/testing/2026-08-01-feature-notes-tabs.md
+++ b/docs/ai/testing/2026-08-01-feature-notes-tabs.md
@@ -42,6 +42,7 @@ description: Define testing approach, test cases, and quality assurance
 - [x] Editor draft, title selection, scroll, and best-effort ProseMirror selection restore after activation.
 - [x] Reading scroll restores after activation.
 - [x] Settings return preserves tabs and active tab; Tags/Search view changes do not clear them.
+- [x] Mobile Add tab closes the compact menu, keeps the note list available, and lets the next list selection fill the new active slot.
 
 ## End-to-End Tests
 
@@ -50,6 +51,7 @@ description: Define testing approach, test cases, and quality assurance
 - [ ] Reload the same browser tab and verify order, active tab, mode, draft, and scroll.
 - [ ] Close active tabs in both neighbor directions and close the final tab.
 - [x] Use the compact mobile tab list to switch and close tabs.
+- [x] Create a blank mobile tab, close the menu, and select a note from the visible list.
 
 ## Test Data
 
diff --git a/ui/web/components/features/notes/MobileNotesTabMenu.tsx b/ui/web/components/features/notes/MobileNotesTabMenu.tsx
index 74a9fdaf065..b5df2e4ab96 100644
--- a/ui/web/components/features/notes/MobileNotesTabMenu.tsx
+++ b/ui/web/components/features/notes/MobileNotesTabMenu.tsx
@@ -25,6 +25,11 @@ export function MobileNotesTabMenu({
     setIsOpen(false)
   }
 
+  const handleAdd = () => {
+    setIsOpen(false)
+    void onAddTab()
+  }
+
   const handleClose = (tab: NoteWorkspaceTab) => {
     void onCloseTab(tab.id)
     if (tab.id === activeTabId && tabs.length <= 1) setIsOpen(false)
@@ -90,7 +95,7 @@ export function MobileNotesTabMenu({
               </div>
             )
           })}
-          <Button type="button" variant="ghost" className="mt-1 w-full justify-start rounded-lg" onMouseDown={(event) => event.preventDefault()} onClick={onAddTab}>
+          <Button type="button" variant="ghost" className="mt-1 w-full justify-start rounded-lg" onMouseDown={(event) => event.preventDefault()} onClick={handleAdd}>
             <Plus className="h-4 w-4" aria-hidden="true" />
             Add tab
           </Button>
diff --git a/ui/web/components/features/notes/NotesShell.tsx b/ui/web/components/features/notes/NotesShell.tsx
index 86e5878fbe8..1d08a901994 100644
--- a/ui/web/components/features/notes/NotesShell.tsx
+++ b/ui/web/components/features/notes/NotesShell.tsx
@@ -230,78 +230,80 @@ export function NotesShell({ controller }: NotesShellProps) {
             onDeleteTag={handleDeleteTag}
           />
         </main>
-      ) : (
-        <>
-          <Sidebar
-            user={user!}
-            filterByTag={filterByTag}
-            notesDisplayed={notesDisplayed}
-            notesTotal={notesTotal}
-            pendingCount={pendingCount}
-            failedCount={failedCount}
-            isOffline={isOffline}
-            selectionMode={selectionMode}
-            selectedCount={selectedCount}
-            bulkDeleting={bulkDeleting}
-            onExitSelectionMode={exitSelectionMode}
-            onSelectAll={selectAllVisible}
-            onBulkDelete={deleteSelectedNotes}
-            onClearTagFilter={handleClearTagFilter}
-            onOpenSettings={() => void handleOpenSettings()}
-            onCreateNote={handleCreateNote}
-            onSignOut={handleSignOut}
-            onOpenSearch={handleOpenSearchPanel}
-            className={cn((showEditor || isSearchPanelOpen) ? "hidden md:flex" : "w-full md:w-80")}
-            data-testid="sidebar-container"
-          >
-            <ListPane controller={controller} />
-          </Sidebar>
-
-          {isSearchPanelOpen && (
-            <SearchResultsPanel
-              ref={searchPanelRef}
-              controller={controller}
-              hasGeminiApiKey={hasGeminiApiKey}
-              onOpenInContext={handleOpenInContext}
-              onClose={() => setIsSearchPanelOpen(false)}
-              className={cn(showEditor ? "hidden md:flex" : "w-full min-w-[300px] md:min-w-0")}
-            />
-          )}
-
-          <main
-            className={cn(
-              "flex-1 flex min-h-0 flex-col h-full overflow-hidden",
-              !showEditor ? "hidden md:flex" : "w-full"
-            )}
-            data-testid="editor-container"
-          >
-            <NotesTabStrip
-              tabs={tabs}
-              activeTabId={activeTabId}
-              onAddTab={() => void addTab?.()}
-              onActivateTab={(tabId) => void activateTab?.(tabId)}
-              onCloseTab={(tabId) => void closeTab?.(tabId)}
-            />
-            <MobileNotesTabMenu
-              tabs={tabs}
-              activeTabId={activeTabId}
-              onAddTab={() => void addTab?.()}
-              onActivateTab={(tabId) => void activateTab?.(tabId)}
-              onCloseTab={(tabId) => void closeTab?.(tabId)}
-            />
-            <div className="flex-1 min-h-0 flex">
-              <EditorPane
+      ) : (
+        <div className="flex min-h-0 flex-1 flex-col">
+          <MobileNotesTabMenu
+            tabs={tabs}
+            activeTabId={activeTabId}
+            onAddTab={() => void addTab?.()}
+            onActivateTab={(tabId) => void activateTab?.(tabId)}
+            onCloseTab={(tabId) => void closeTab?.(tabId)}
+          />
+          <div className="flex min-h-0 flex-1">
+            <Sidebar
+              user={user!}
+              filterByTag={filterByTag}
+              notesDisplayed={notesDisplayed}
+              notesTotal={notesTotal}
+              pendingCount={pendingCount}
+              failedCount={failedCount}
+              isOffline={isOffline}
+              selectionMode={selectionMode}
+              selectedCount={selectedCount}
+              bulkDeleting={bulkDeleting}
+              onExitSelectionMode={exitSelectionMode}
+              onSelectAll={selectAllVisible}
+              onBulkDelete={deleteSelectedNotes}
+              onClearTagFilter={handleClearTagFilter}
+              onOpenSettings={() => void handleOpenSettings()}
+              onCreateNote={handleCreateNote}
+              onSignOut={handleSignOut}
+              onOpenSearch={handleOpenSearchPanel}
+              className={cn((showEditor || isSearchPanelOpen) ? "hidden md:flex" : "w-full md:w-80")}
+              data-testid="sidebar-container"
+            >
+              <ListPane controller={controller} />
+            </Sidebar>
+
+            {isSearchPanelOpen && (
+              <SearchResultsPanel
+                ref={searchPanelRef}
                 controller={controller}
-                onBack={handleBackFromNote}
-                noteEditorRef={noteEditorRef}
-                wordpressConfigured={wordpressConfigured}
-                pendingChunkFocus={pendingChunkFocus}
-                onPendingChunkFocusApplied={handlePendingChunkFocusApplied}
+                hasGeminiApiKey={hasGeminiApiKey}
+                onOpenInContext={handleOpenInContext}
+                onClose={() => setIsSearchPanelOpen(false)}
+                className={cn(showEditor ? "hidden md:flex" : "w-full min-w-[300px] md:min-w-0")}
               />
-            </div>
-          </main>
-        </>
-      )}
+            )}
+
+            <main
+              className={cn(
+                "flex-1 flex min-h-0 flex-col h-full overflow-hidden",
+                !showEditor ? "hidden md:flex" : "w-full"
+              )}
+              data-testid="editor-container"
+            >
+              <NotesTabStrip
+                tabs={tabs}
+                activeTabId={activeTabId}
+                onAddTab={() => void addTab?.()}
+                onActivateTab={(tabId) => void activateTab?.(tabId)}
+                onCloseTab={(tabId) => void closeTab?.(tabId)}
+              />
+              <div className="flex-1 min-h-0 flex">
+                <EditorPane
+                  controller={controller}
+                  onBack={handleBackFromNote}
+                  noteEditorRef={noteEditorRef}
+                  wordpressConfigured={wordpressConfigured}
+                  pendingChunkFocus={pendingChunkFocus}
+                  onPendingChunkFocusApplied={handlePendingChunkFocusApplied}
+                />
+              </div>
+            </main>
+          </div>
+        </div>
+      )}
 
       <DeleteNoteDialog controller={controller} />
     </div>
diff --git a/ui/web/hooks/useNoteAppController.ts b/ui/web/hooks/useNoteAppController.ts
index dbbb60e2107..529c6e2804b 100644
--- a/ui/web/hooks/useNoteAppController.ts
+++ b/ui/web/hooks/useNoteAppController.ts
@@ -572,21 +572,34 @@ export function useNoteAppController() {
   const handleAddTab = useCallback(async () => {
     await flushAndCaptureActiveTab()
     addTab()
-    setNotePaneVisible(true)
+    // On mobile, an empty tab must return to the note list so the user can
+    // choose which note fills the new active slot. Desktop keeps its editor
+    // pane visible through the responsive `md:flex` layout rule.
+    setNotePaneVisible(false)
   }, [addTab, flushAndCaptureActiveTab])
 
   const handleActivateTab = useCallback(async (tabId: string) => {
-    if (tabId === activeTabId) return
+    const targetTab = tabs.find((tab) => tab.id === tabId)
+    if (!targetTab) return
+    if (tabId === activeTabId) {
+      setNotePaneVisible(Boolean(targetTab.note || targetTab.mode === 'editing'))
+      return
+    }
     await flushAndCaptureActiveTab()
     activateTab(tabId)
-    setNotePaneVisible(true)
+    setNotePaneVisible(Boolean(targetTab.note || targetTab.mode === 'editing'))
     setLastSavedAt(null)
-  }, [activateTab, activeTabId, flushAndCaptureActiveTab, setLastSavedAt])
+  }, [activateTab, activeTabId, flushAndCaptureActiveTab, setLastSavedAt, tabs])
 
   const handleCloseTab = useCallback(async (tabId: string) => {
     const tab = tabs.find((candidate) => candidate.id === tabId)
     if (!tab) return
 
+    const tabIndex = tabs.findIndex((candidate) => candidate.id === tabId)
+    const nextVisibleTab = tab.id === activeTabId
+      ? (tabs[tabIndex + 1] ?? tabs[tabIndex - 1] ?? null)
+      : tabs.find((candidate) => candidate.id === activeTabId) ?? null
+
     const discardFailedSave = tab.saveState === 'error'
       && typeof window !== 'undefined'
       && window.confirm(`Discard unsaved changes in "${tab.note?.title || 'this tab'}"?`)
@@ -601,7 +614,7 @@ export function useNoteAppController() {
     }
 
     closeTab(tabId)
-    setNotePaneVisible(true)
+    setNotePaneVisible(Boolean(nextVisibleTab?.note || nextVisibleTab?.mode === 'editing'))
     setLastSavedAt(null)
   }, [activeTabId, closeTab, flushAndCaptureActiveTab, setLastSavedAt, tabs])
 
diff --git a/ui/web/tests/unit/components/noteView.test.tsx b/ui/web/tests/unit/components/noteView.test.tsx
index 9580486c8fc..ef98c1e6356 100644
--- a/ui/web/tests/unit/components/noteView.test.tsx
+++ b/ui/web/tests/unit/components/noteView.test.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import { NoteView } from '@ui/web/components/features/notes/NoteView'
 import { toast } from 'sonner'
 import { copyNotePayloadToClipboard } from '@ui/web/lib/noteClipboard'
@@ -121,9 +121,7 @@ describe('NoteView copy action', () => {
     expect(requestAnimationFrame).toHaveBeenCalled()
     expect(content.scrollTop).toBe(48)
 
-    act(() => {
-      fireEvent.scroll(content, { target: { scrollTop: 93 } })
-    })
+    fireEvent.scroll(content, { target: { scrollTop: 93 } })
     expect(onViewSessionChange).toHaveBeenCalledWith({ scrollTop: 93 })
 
     requestAnimationFrame.mockRestore()
diff --git a/ui/web/tests/unit/components/notesShell.test.tsx b/ui/web/tests/unit/components/notesShell.test.tsx
index da8018079d3..658b5bd7198 100644
--- a/ui/web/tests/unit/components/notesShell.test.tsx
+++ b/ui/web/tests/unit/components/notesShell.test.tsx
@@ -345,6 +345,13 @@ describe('NotesShell', () => {
     expect(controller.handleSignOut).toHaveBeenCalled()
   })
 
+  it('keeps the mobile workspace tab switcher available while the note list is visible', () => {
+    renderShell(makeController())
+
+    expect(screen.getByRole('button', { name: 'Open note tabs (1)' })).toBeTruthy()
+    expect(screen.getByTestId('mock-note-list')).toBeTruthy()
+  })
+
   it('renders a selected note and routes its callbacks, back action, and delete confirmation', async () => {
     const controller = makeController({
       selectedNote: note,
diff --git a/ui/web/tests/unit/components/notesWorkspaceTabs.test.tsx b/ui/web/tests/unit/components/notesWorkspaceTabs.test.tsx
index cbf1ebb6665..52c1aecc08c 100644
--- a/ui/web/tests/unit/components/notesWorkspaceTabs.test.tsx
+++ b/ui/web/tests/unit/components/notesWorkspaceTabs.test.tsx
@@ -137,6 +137,7 @@ describe('Notes workspace tab controls', () => {
     expect(onActivateTab).toHaveBeenCalledWith('tab-2')
     expect(onCloseTab).toHaveBeenCalledWith('tab-1')
     expect(onAddTab).toHaveBeenCalledTimes(1)
+    expect(screen.getByRole('button', { name: 'Open note tabs (2)' }).getAttribute('aria-expanded')).toBe('false')
   })
 
   it('closes the mobile menu after closing its only active tab', () => {
diff --git a/ui/web/tests/unit/hooks/useNoteAppControllerAdditional.test.tsx b/ui/web/tests/unit/hooks/useNoteAppControllerAdditional.test.tsx
index e3d37ffa4d1..b6a0634409e 100644
--- a/ui/web/tests/unit/hooks/useNoteAppControllerAdditional.test.tsx
+++ b/ui/web/tests/unit/hooks/useNoteAppControllerAdditional.test.tsx
@@ -289,6 +289,29 @@ describe('useNoteAppController additional observable behavior', () => {
     })
   })
 
+  it('returns to the note list after creating a blank tab so the active slot can receive a note', async () => {
+    const { result } = setup()
+
+    await act(async () => {
+      await result.current.addTab()
+    })
+
+    expect(result.current.activeTab.note).toBeNull()
+    expect(result.current.notePaneVisible).toBe(false)
+  })
+
+  it('returns to the note list when closing the final blank tab replacement', async () => {
+    const { result } = setup()
+    const activeTabId = result.current.activeTabId
+
+    await act(async () => {
+      await result.current.closeTab(activeTabId)
+    })
+
+    expect(result.current.activeTab.note).toBeNull()
+    expect(result.current.notePaneVisible).toBe(false)
+  })
+
   it('selects the remote note after flushing, but exits editing when selecting the already selected note', async () => {
     const current = makeNote({ id: 'current' })
     const remote = makeNote({ id: 'remote', title: 'Remote' })

From 5474ed87c93f955964eba18f3f8667ba11d74584 Mon Sep 17 00:00:00 2001
From: Denys <koreybadenis@gmail.com>
Date: Sun, 2 Aug 2026 12:41:19 +0200
Subject: [PATCH 08/23] fix(qodana): remove new notes test findings

---
 .../notes/NotesShellFtsExitSave.cy.tsx        | 37 ++++++++++---------
 .../notes/NotesShellLikeExitSave.cy.tsx       | 35 +++++++++---------
 .../features/notes/notesShellTestUtils.tsx    | 30 ++++++++++++++-
 3 files changed, 65 insertions(+), 37 deletions(-)

diff --git a/cypress/component/features/notes/NotesShellFtsExitSave.cy.tsx b/cypress/component/features/notes/NotesShellFtsExitSave.cy.tsx
index 0e0bc2d39fa..cd255f459a6 100644
--- a/cypress/component/features/notes/NotesShellFtsExitSave.cy.tsx
+++ b/cypress/component/features/notes/NotesShellFtsExitSave.cy.tsx
@@ -5,9 +5,8 @@ import { NotesShell } from '../../../../ui/web/components/features/notes/NotesSh
 import type { NoteViewModel, SearchResult } from '../../../../core/types/domain'
 import { SupabaseTestProvider } from '../../../../ui/web/providers/SupabaseProvider'
 import {
-  makeWorkspaceTab,
   pastePlainText,
-  useEditorExitState,
+  useNotesShellTestState,
   type FakeController,
 } from './notesShellTestUtils'
 
@@ -51,16 +50,18 @@ const buildController = () => {
   ]
 
   const Harness = () => {
-    const [notes, setNotes] = React.useState<NoteViewModel[]>(baseNotes)
-    const [selectedNoteId, setSelectedNoteId] = React.useState<string>('note-1')
-    const [isEditing, setIsEditing] = React.useState(true)
-    const { registerNoteEditorRef, flushIfEditing } = useEditorExitState(isEditing)
-
-    const selectedNote = React.useMemo(
-      () => notes.find((n) => n.id === selectedNoteId) ?? null,
-      [notes, selectedNoteId]
-    )
-    const activeTab = React.useMemo(() => makeWorkspaceTab(selectedNote, isEditing), [selectedNote, isEditing])
+    const {
+      notes,
+      setNotes,
+      selectedNoteId,
+      setSelectedNoteId,
+      isEditing,
+      setIsEditing,
+      registerNoteEditorRef,
+      flushIfEditing,
+      selectedNote,
+      activeTab,
+    } = useNotesShellTestState(baseNotes)
 
     const ftsResults: SearchResult[] = React.useMemo(() => {
       // Simulate search results payload that may be stale. We re-resolve on click.
@@ -92,28 +93,28 @@ const buildController = () => {
           updated_at: new Date().toISOString(),
         }
       }))
-    }, [selectedNoteId])
+    }, [selectedNoteId, setNotes])
 
     const handleSaveNote = React.useCallback((data: { title: string; description: string; tags: string }) => {
       const noteId = selectedNoteId
       setNotes((prev) => prev.map((n) => (n.id === noteId ? { ...n, title: data.title, description: data.description, updated_at: new Date().toISOString() } : n)))
-    }, [selectedNoteId])
+    }, [selectedNoteId, setNotes])
 
     const handleReadNote = React.useCallback((data: { title: string; description: string; tags: string }) => {
       handleSaveNote(data)
       setIsEditing(false)
-    }, [handleSaveNote])
+    }, [handleSaveNote, setIsEditing])
 
     const handleEditNote = React.useCallback((note: NoteViewModel) => {
       setSelectedNoteId(note.id)
       setIsEditing(true)
-    }, [])
+    }, [setIsEditing, setSelectedNoteId])
 
     const handleSelectNote = React.useCallback(async (note: NoteViewModel | null) => {
       await flushIfEditing()
       setSelectedNoteId(note?.id ?? '')
       setIsEditing(false)
-    }, [flushIfEditing])
+    }, [flushIfEditing, setIsEditing, setSelectedNoteId])
 
     const handleSearchResultClick = React.useCallback(async (note: SearchResult) => {
       await flushIfEditing()
@@ -121,7 +122,7 @@ const buildController = () => {
       const latest = notes.find((n) => n.id === note.id) ?? (note as unknown as NoteViewModel)
       setSelectedNoteId(latest.id)
       setIsEditing(false)
-    }, [flushIfEditing, notes])
+    }, [flushIfEditing, notes, setIsEditing, setSelectedNoteId])
 
     const controller: FakeController = {
       registerNoteEditorRef,
diff --git a/cypress/component/features/notes/NotesShellLikeExitSave.cy.tsx b/cypress/component/features/notes/NotesShellLikeExitSave.cy.tsx
index 241f9e9213f..a94b93edf57 100644
--- a/cypress/component/features/notes/NotesShellLikeExitSave.cy.tsx
+++ b/cypress/component/features/notes/NotesShellLikeExitSave.cy.tsx
@@ -5,9 +5,8 @@ import { NotesShell } from '../../../../ui/web/components/features/notes/NotesSh
 import type { NoteViewModel } from '../../../../core/types/domain'
 import { SupabaseTestProvider } from '../../../../ui/web/providers/SupabaseProvider'
 import {
-  makeWorkspaceTab,
   pastePlainText,
-  useEditorExitState,
+  useNotesShellTestState,
   type FakeController,
 } from './notesShellTestUtils'
 
@@ -51,16 +50,18 @@ const buildController = () => {
   ]
 
   const Harness = () => {
-    const [notes, setNotes] = React.useState<NoteViewModel[]>(baseNotes)
-    const [selectedNoteId, setSelectedNoteId] = React.useState<string>('note-1')
-    const [isEditing, setIsEditing] = React.useState(true)
-    const { registerNoteEditorRef, flushIfEditing } = useEditorExitState(isEditing)
-
-    const selectedNote = React.useMemo(
-      () => notes.find((n) => n.id === selectedNoteId) ?? null,
-      [notes, selectedNoteId]
-    )
-    const activeTab = React.useMemo(() => makeWorkspaceTab(selectedNote, isEditing), [selectedNote, isEditing])
+    const {
+      notes,
+      setNotes,
+      selectedNoteId,
+      setSelectedNoteId,
+      isEditing,
+      setIsEditing,
+      registerNoteEditorRef,
+      flushIfEditing,
+      selectedNote,
+      activeTab,
+    } = useNotesShellTestState(baseNotes)
 
     const handleAutoSave = React.useCallback(async (data: { noteId?: string; title?: string; description?: string; tags?: string }) => {
       const noteId = data.noteId ?? selectedNoteId
@@ -75,28 +76,28 @@ const buildController = () => {
           updated_at: new Date().toISOString(),
         }
       }))
-    }, [selectedNoteId])
+    }, [selectedNoteId, setNotes])
 
     const handleSaveNote = React.useCallback((data: { title: string; description: string; tags: string }) => {
       const noteId = selectedNoteId
       setNotes((prev) => prev.map((n) => (n.id === noteId ? { ...n, title: data.title, description: data.description, updated_at: new Date().toISOString() } : n)))
-    }, [selectedNoteId])
+    }, [selectedNoteId, setNotes])
 
     const handleReadNote = React.useCallback((data: { title: string; description: string; tags: string }) => {
       handleSaveNote(data)
       setIsEditing(false)
-    }, [handleSaveNote])
+    }, [handleSaveNote, setIsEditing])
 
     const handleEditNote = React.useCallback((note: NoteViewModel) => {
       setSelectedNoteId(note.id)
       setIsEditing(true)
-    }, [])
+    }, [setIsEditing, setSelectedNoteId])
 
     const handleSelectNote = React.useCallback(async (note: NoteViewModel | null) => {
       await flushIfEditing()
       setSelectedNoteId(note?.id ?? '')
       setIsEditing(false)
-    }, [flushIfEditing])
+    }, [flushIfEditing, setIsEditing, setSelectedNoteId])
 
     const controller: FakeController = {
       registerNoteEditorRef,
diff --git a/cypress/component/features/notes/notesShellTestUtils.tsx b/cypress/component/features/notes/notesShellTestUtils.tsx
index a25a76dfaa9..37a004309cd 100644
--- a/cypress/component/features/notes/notesShellTestUtils.tsx
+++ b/cypress/component/features/notes/notesShellTestUtils.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import type { NoteWorkspaceTab } from '@core/services/noteWorkspaceTabs'
-import type { NoteViewModel } from '../../../../core/types/domain'
-import type { NoteEditorHandle } from '../../../../ui/web/components/features/notes/NoteEditor'
+import type { NoteViewModel } from '@core/types/domain'
+import type { NoteEditorHandle } from '@ui/web/components/features/notes/NoteEditor'
 
 export type FakeController = Record<string, unknown>
 
@@ -30,6 +30,32 @@ export const makeWorkspaceTab = (note: NoteViewModel | null, isEditing: boolean)
   saveError: null,
 })
 
+export function useNotesShellTestState(baseNotes: NoteViewModel[]) {
+  const [notes, setNotes] = React.useState<NoteViewModel[]>(baseNotes)
+  const [selectedNoteId, setSelectedNoteId] = React.useState<string>('note-1')
+  const [isEditing, setIsEditing] = React.useState(true)
+  const { registerNoteEditorRef, flushIfEditing } = useEditorExitState(isEditing)
+
+  const selectedNote = React.useMemo(
+    () => notes.find((n) => n.id === selectedNoteId) ?? null,
+    [notes, selectedNoteId]
+  )
+  const activeTab = React.useMemo(() => makeWorkspaceTab(selectedNote, isEditing), [selectedNote, isEditing])
+
+  return {
+    notes,
+    setNotes,
+    selectedNoteId,
+    setSelectedNoteId,
+    isEditing,
+    setIsEditing,
+    registerNoteEditorRef,
+    flushIfEditing,
+    selectedNote,
+    activeTab,
+  }
+}
+
 export function useEditorExitState(isEditing: boolean) {
   const registeredEditorRef = React.useRef<React.RefObject<NoteEditorHandle | null> | null>(null)
 

From f0cc5aa242d83e9224fbae4bce02918dc9467bc7 Mon Sep 17 00:00:00 2001
From: Denys <koreybadenis@gmail.com>
Date: Sun, 2 Aug 2026 13:44:53 +0200
Subject: [PATCH 09/23] feat(notes): improve browser-like tab capacity

---
 core/services/noteWorkspaceTabs.ts            |   6 +
 .../core-services-noteWorkspaceTabs.test.ts   |  13 +++
 .../features/mobile/MobileLayout.cy.tsx       |  44 +++++++
 .../features/notes/NotesTabStrip.cy.tsx       |  50 ++++++++
 .../design/2026-08-01-feature-notes-tabs.md   |  18 ++-
 .../2026-08-01-feature-notes-tabs.md          |  11 ++
 .../2026-08-01-feature-notes-tabs.md          |   7 +-
 .../testing/2026-08-01-feature-notes-tabs.md  |   4 +-
 .../features/notes/MobileNotesTabMenu.tsx     |  91 +++++++++------
 .../components/features/notes/NotesShell.tsx  |  11 +-
 .../features/notes/NotesTabStrip.tsx          | 107 ++++++++++++++++--
 ui/web/hooks/useNoteAppController.ts          |   6 +-
 ui/web/hooks/useNoteWorkspaceTabs.ts          |   3 +
 .../tests/unit/components/notesShell.test.tsx |  13 +++
 .../components/notesWorkspaceTabs.test.tsx    | 104 ++++++++++++++++-
 .../useNoteAppControllerAdditional.test.tsx   |  29 +++++
 16 files changed, 466 insertions(+), 51 deletions(-)
 create mode 100644 cypress/component/features/notes/NotesTabStrip.cy.tsx

diff --git a/core/services/noteWorkspaceTabs.ts b/core/services/noteWorkspaceTabs.ts
index 5b4dc5b534b..d23cd236155 100644
--- a/core/services/noteWorkspaceTabs.ts
+++ b/core/services/noteWorkspaceTabs.ts
@@ -2,6 +2,7 @@ import type { NoteViewModel } from '@core/types/domain'
 
 export const NOTE_WORKSPACE_VERSION = 1
 export const MAX_NOTE_WORKSPACE_SERIALIZED_LENGTH = 2 * 1024 * 1024
+export const MAX_NOTE_WORKSPACE_TABS = 32
 
 export type NoteWorkspaceMode = 'reading' | 'editing'
 export type NoteWorkspaceSaveState = 'saved' | 'dirty' | 'saving' | 'error'
@@ -141,10 +142,15 @@ export function findWorkspaceTabByNoteId(
   return state.tabs.find((tab) => tab.noteId === noteId) ?? null
 }
 
+export function canAddWorkspaceTab(state: NoteWorkspaceState): boolean {
+  return state.tabs.length < MAX_NOTE_WORKSPACE_TABS
+}
+
 export function addWorkspaceTab(
   state: NoteWorkspaceState,
   idFactory: NoteWorkspaceIdFactory = defaultIdFactory,
 ): NoteWorkspaceState {
+  if (!canAddWorkspaceTab(state)) return state
   const tab = createEmptyTab(idFactory)
   return {
     ...state,
diff --git a/core/tests/unit/core-services-noteWorkspaceTabs.test.ts b/core/tests/unit/core-services-noteWorkspaceTabs.test.ts
index 345a861ddb3..5e13cf55e63 100644
--- a/core/tests/unit/core-services-noteWorkspaceTabs.test.ts
+++ b/core/tests/unit/core-services-noteWorkspaceTabs.test.ts
@@ -2,12 +2,14 @@ import type { NoteViewModel } from '@core/types/domain'
 import {
   activateWorkspaceTab,
   addWorkspaceTab,
+  canAddWorkspaceTab,
   closeWorkspaceTab,
   createNoteWorkspaceState,
   findWorkspaceTabByNoteId,
   getActiveWorkspaceTab,
   hydrateNoteWorkspaceState,
   MAX_NOTE_WORKSPACE_SERIALIZED_LENGTH,
+  MAX_NOTE_WORKSPACE_TABS,
   openNoteInWorkspace,
   serializeNoteWorkspaceState,
   updateWorkspaceTab,
@@ -50,6 +52,17 @@ describe('note workspace tab state', () => {
     expect(state.tabs[0]).toBe(first.tabs[0])
   })
 
+  it('guards the shared workspace tab limit in the core transition', () => {
+    let state = createNoteWorkspaceState(ids('tab-0'))
+    for (let index = 1; index < MAX_NOTE_WORKSPACE_TABS; index += 1) {
+      state = addWorkspaceTab(state, ids(`tab-${index}`))
+    }
+
+    expect(state.tabs).toHaveLength(MAX_NOTE_WORKSPACE_TABS)
+    expect(canAddWorkspaceTab(state)).toBe(false)
+    expect(addWorkspaceTab(state, ids('unexpected'))).toBe(state)
+  })
+
   it('replaces the active tab when opening a new note', () => {
     const first = createNoteWorkspaceState(ids('tab-1'))
     const state = openNoteInWorkspace(first, note('note-1', 'First'))
diff --git a/cypress/component/features/mobile/MobileLayout.cy.tsx b/cypress/component/features/mobile/MobileLayout.cy.tsx
index b09e743224c..adddc445dc9 100644
--- a/cypress/component/features/mobile/MobileLayout.cy.tsx
+++ b/cypress/component/features/mobile/MobileLayout.cy.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import { NotesShell } from '../../../../ui/web/components/features/notes/NotesShell'
+import { MobileNotesTabMenu } from '../../../../ui/web/components/features/notes/MobileNotesTabMenu'
 import type { NoteAppController } from '../../../../ui/web/hooks/useNoteAppController'
 import { SupabaseTestProvider } from '../../../../ui/web/providers/SupabaseProvider'
 import type { SupabaseClient } from '@supabase/supabase-js'
@@ -45,6 +46,8 @@ describe('Mobile Layout Adaptation', () => {
       tabs: [activeTab],
       activeTabId: activeTab.id,
       activeTab,
+      canAddTab: true,
+      workspaceHydrated: true,
       addTab: cy.stub().resolves(),
       activateTab: cy.stub().resolves(),
       closeTab: cy.stub().resolves(),
@@ -211,6 +214,47 @@ describe('Mobile Layout Adaptation', () => {
     cy.get('@handleSelectNote').should('have.been.calledWith', note)
   })
 
+  it('scrolls a large mobile tab list and exposes the shared disabled Add state', () => {
+    cy.viewport('iphone-se2')
+    const baseTab: NoteWorkspaceTab = {
+      id: 'mobile-tab-0',
+      noteId: null,
+      note: null,
+      mode: 'reading',
+      draft: { title: 'Note 1', description: '', tags: '' },
+      view: { scrollTop: 0 },
+      saveState: 'saved',
+      saveError: null,
+    }
+    const manyTabs = Array.from({ length: 40 }, (_, index) => ({
+      ...baseTab,
+      id: `mobile-tab-${index}`,
+      draft: { ...baseTab.draft, title: `Note ${index + 1}` },
+    }))
+    cy.mount(
+      <ThemeProvider attribute='class' defaultTheme='system' enableSystem>
+        <MobileNotesTabMenu
+          tabs={manyTabs}
+          activeTabId={manyTabs[0].id}
+          onAddTab={cy.stub()}
+          onActivateTab={cy.stub()}
+          onCloseTab={cy.stub()}
+          addTabDisabled
+          maximumTabCount={32}
+        />
+      </ThemeProvider>
+    )
+
+    cy.get('[aria-label="Open note tabs (40)"]').click()
+    cy.get('[id="mobile-notes-tab-list"]')
+      .find('button[aria-label="Add tab (limit reached: 32 tabs)"]')
+      .should('be.visible')
+      .and('be.disabled')
+    cy.get('[id="mobile-notes-tab-list"] > div')
+      .first()
+      .should('have.class', 'overflow-y-auto')
+  })
+
   it('shows editor and hides sidebar when note is selected on mobile', () => {
     cy.viewport('iphone-se2')
     const selectedNote = {
diff --git a/cypress/component/features/notes/NotesTabStrip.cy.tsx b/cypress/component/features/notes/NotesTabStrip.cy.tsx
new file mode 100644
index 00000000000..59b21f33eed
--- /dev/null
+++ b/cypress/component/features/notes/NotesTabStrip.cy.tsx
@@ -0,0 +1,50 @@
+import React from 'react'
+import { NotesTabStrip } from '../../../../ui/web/components/features/notes/NotesTabStrip'
+import type { NoteWorkspaceTab } from '@core/services/noteWorkspaceTabs'
+
+describe('Desktop notes tab strip', () => {
+  it('keeps Add visible on the left, scrolls excess tabs, and preserves tab actions at capacity', () => {
+    cy.viewport(1024, 600)
+    const baseTab: NoteWorkspaceTab = {
+      id: 'tab-0',
+      noteId: null,
+      note: null,
+      mode: 'reading',
+      draft: { title: 'Note 1', description: '', tags: '' },
+      view: { scrollTop: 0 },
+      saveState: 'saved',
+      saveError: null,
+    }
+    const tabs = Array.from({ length: 12 }, (_, index) => ({
+      ...baseTab,
+      id: `tab-${index}`,
+      draft: { ...baseTab.draft, title: `Note ${index + 1}` },
+    }))
+    const onActivateTab = cy.stub().as('activateTab')
+    const onCloseTab = cy.stub().as('closeTab')
+
+    cy.mount(
+      <NotesTabStrip
+        tabs={tabs}
+        activeTabId={tabs[0].id}
+        onAddTab={cy.stub()}
+        onActivateTab={onActivateTab}
+        onCloseTab={onCloseTab}
+        maximumTabCount={32}
+      />
+    )
+
+    cy.get('button[aria-label^="Add note tab (limit reached:"]')
+      .should('be.visible')
+      .and('be.disabled')
+      .parent()
+      .children()
+      .first()
+      .should('have.attr', 'aria-label')
+    cy.get('[aria-label="Open notes"]').should('have.class', 'overflow-x-auto')
+    cy.get('button[title="Note 8"]').click()
+    cy.get('button[title="Close Note 1"]').click()
+    cy.get('@activateTab').should('have.been.calledWith', 'tab-7')
+    cy.get('@closeTab').should('have.been.calledWith', 'tab-0')
+  })
+})
diff --git a/docs/ai/design/2026-08-01-feature-notes-tabs.md b/docs/ai/design/2026-08-01-feature-notes-tabs.md
index 49bc50bb9a4..dae082b4321 100644
--- a/docs/ai/design/2026-08-01-feature-notes-tabs.md
+++ b/docs/ai/design/2026-08-01-feature-notes-tabs.md
@@ -123,6 +123,20 @@ that list replaces the active blank slot through the existing controller rule;
 it does not create another tab. Activating an empty reading tab uses the same
 list state so an empty tab never traps the user in a blank editor screen.
 
+### Responsive desktop tab capacity
+
+The desktop tab strip keeps Add as the first, non-scrolling control. The tab
+viewport uses a browser-like flex layout: tabs grow while there is room, stop
+at a 120px minimum, and horizontally scroll when a restored workspace is
+larger than the viewport. A `ResizeObserver` measures the tab viewport and
+disables Add when another tab would require shrinking below that minimum.
+The shared core model/controller also enforces a 32-tab ceiling, so direct
+calls cannot bypass the UI guard. The disabled button exposes the applicable
+limit in its accessible name so the constraint is understandable without
+relying on the visual layout. The mobile menu receives the controller's
+disabled state explicitly and keeps its tab rows in a scrollable region while
+leaving Add available as the fixed menu footer.
+
 ### Active-slot replacement is the default
 
 `openNoteInWorkspace` updates the active tab. `addWorkspaceTab` is the only operation that increases tab count. This encodes the product's key rule in one reducer function instead of relying on individual click handlers.
@@ -152,7 +166,9 @@ The workspace is modeled as a list of independent tab sessions, while the contro
 - Switching tabs performs no new network request unless existing note revalidation is required; reducer transitions are synchronous after the current save flush.
 - Storage writes are best-effort and serialized from a small, bounded state snapshot; storage failures never block editing.
 - Tab buttons are keyboard reachable, have accessible names, and expose active/dirty/error state.
-- Long titles are ellipsized; desktop overflow is horizontal and mobile uses a compact list.
+- Long titles are ellipsized; desktop tabs grow/shrink within the 120px
+  minimum and overflow horizontally when needed, with Add fixed on the left;
+  mobile uses a compact list.
 - No secrets or auth tokens are added to workspace storage.
 
 ## Design Review Resolution (2026-08-01)
diff --git a/docs/ai/implementation/2026-08-01-feature-notes-tabs.md b/docs/ai/implementation/2026-08-01-feature-notes-tabs.md
index c09fc9ef8bf..e959d4b94b3 100644
--- a/docs/ai/implementation/2026-08-01-feature-notes-tabs.md
+++ b/docs/ai/implementation/2026-08-01-feature-notes-tabs.md
@@ -41,6 +41,11 @@ ui/web/components/features/notes/NoteView.tsx
 - Capture the current editor before unmount, flush autosave first, and then apply tab transitions.
 - Use the active tab's draft as editor initial content; never use a server refresh to overwrite a dirty local field without existing reconciliation rules.
 - Keep tab indicators derived from explicit per-tab save state rather than global UI assumptions.
+- Keep the desktop Add control outside the scrolling tab viewport. `NotesTabStrip`
+  measures that viewport, uses the same 120px minimum as its CSS `min-width`,
+  and disables Add when the next tab would violate the minimum. Existing tabs
+  can still be inspected by horizontal scrolling, including after restoring a
+  wider workspace into a narrow viewport.
 
 ### Patterns & Best Practices
 
@@ -49,6 +54,12 @@ ui/web/components/features/notes/NoteView.tsx
 - Do not add direct Supabase calls to tab UI or storage.
 - Use `sessionStorage` only through the adapter and never read/write it during server rendering.
 - Keep accessibility labels stable so component tests can target behavior rather than CSS.
+- When desktop capacity is reached, retain a real disabled button and expose
+  the measured limit in its accessible name; do not hide Add or rely on a
+  tooltip-only explanation.
+- The core reducer and controller enforce the shared 32-tab ceiling before
+  flushing editor work. `MobileNotesTabMenu` receives that explicit state and
+  renders a scrollable tab-list body with Add as a non-scrolling footer.
 
 ## Integration Points
 
diff --git a/docs/ai/requirements/2026-08-01-feature-notes-tabs.md b/docs/ai/requirements/2026-08-01-feature-notes-tabs.md
index a2632304616..5e5571064c6 100644
--- a/docs/ai/requirements/2026-08-01-feature-notes-tabs.md
+++ b/docs/ai/requirements/2026-08-01-feature-notes-tabs.md
@@ -72,7 +72,12 @@ The feature serves authenticated EverFreeNote users who work with several notes
 
 The following review decisions resolve the v1 ambiguities without changing the requested behavior:
 
-- No hard tab-count cap is introduced. Desktop uses horizontal overflow and mobile uses a compact list.
+- Desktop Add capacity is responsive: tabs keep a 120px minimum, overflow
+  remains scrollable for existing/restored tabs, and Add is disabled when the
+  measured viewport cannot accommodate one more minimum-width tab. The shared
+  workspace model also enforces a 32-tab ceiling in the core/controller, and
+  mobile exposes that same disabled state while its compact list remains
+  scrollable.
 - Web persistence is explicitly `sessionStorage` per external browser tab. Native mobile persistence is an adapter concern and is not allowed to change the web contract.
 - If flushing the active editor fails during a normal switch, the transition is aborted so the user can retry and the failed state remains visible. Closing a failed tab is allowed only after an explicit discard confirmation.
 - Caret/text-selection restoration is best effort and may be skipped after remote content reconciliation; draft and scroll restoration remain mandatory.
diff --git a/docs/ai/testing/2026-08-01-feature-notes-tabs.md b/docs/ai/testing/2026-08-01-feature-notes-tabs.md
index 7dafbfdfbc2..6d16e93b714 100644
--- a/docs/ai/testing/2026-08-01-feature-notes-tabs.md
+++ b/docs/ai/testing/2026-08-01-feature-notes-tabs.md
@@ -43,6 +43,8 @@ description: Define testing approach, test cases, and quality assurance
 - [x] Reading scroll restores after activation.
 - [x] Settings return preserves tabs and active tab; Tags/Search view changes do not clear them.
 - [x] Mobile Add tab closes the compact menu, keeps the note list available, and lets the next list selection fill the new active slot.
+- [x] Desktop Add tab stays before the scrolling tab viewport and disables at the measured minimum-width capacity.
+- [x] Core/controller Add guard blocks the shared 32-tab ceiling without flushing, and mobile announces the same disabled state with a scrollable list.
 
 ## End-to-End Tests
 
@@ -79,7 +81,7 @@ description: Define testing approach, test cases, and quality assurance
 - `npx ai-devkit@latest lint --feature notes-tabs`: passed.
 - Native mobile route/store tab adaptation was not included; responsive web mobile controls are covered by component tests.
 
-- Desktop: keyboard tab navigation, ellipsis, horizontal overflow, dirty/error markers, close confirmation.
+- Desktop: keyboard tab navigation, ellipsis, horizontal overflow, dirty/error markers, close confirmation, and accessible capacity state with Add fixed on the left.
 - Mobile viewport: active-note summary, tab count, compact list/sheet, touch targets, screen-reader labels.
 - Reload: verify `sessionStorage` restore and separate browser-tab isolation.
 - Network/offline: switch during autosave and after an induced save error.
diff --git a/ui/web/components/features/notes/MobileNotesTabMenu.tsx b/ui/web/components/features/notes/MobileNotesTabMenu.tsx
index b5df2e4ab96..a945ef52998 100644
--- a/ui/web/components/features/notes/MobileNotesTabMenu.tsx
+++ b/ui/web/components/features/notes/MobileNotesTabMenu.tsx
@@ -15,6 +15,9 @@ export function MobileNotesTabMenu({
   onAddTab,
   onActivateTab,
   onCloseTab,
+  addTabDisabled = false,
+  addTabCapacityPending = false,
+  maximumTabCount,
 }: MobileNotesTabMenuProps) {
   const [isOpen, setIsOpen] = useState(false)
   const activeTab = tabs.find((tab) => tab.id === activeTabId) ?? tabs[0]
@@ -26,10 +29,17 @@ export function MobileNotesTabMenu({
   }
 
   const handleAdd = () => {
+    if (addTabDisabled || addTabCapacityPending) return
     setIsOpen(false)
     void onAddTab()
   }
 
+  const addTabLabel = addTabCapacityPending
+    ? "Add tab (checking workspace capacity)"
+    : addTabDisabled
+      ? `Add tab (limit reached: ${maximumTabCount ?? "maximum"} tabs)`
+      : "Add tab"
+
   const handleClose = (tab: NoteWorkspaceTab) => {
     void onCloseTab(tab.id)
     if (tab.id === activeTabId && tabs.length <= 1) setIsOpen(false)
@@ -61,43 +71,54 @@ export function MobileNotesTabMenu({
 
       {isOpen && (
         <div id="mobile-notes-tab-list" className="mt-2 rounded-xl border border-border bg-card p-1 shadow-lg" aria-label="Open notes">
-          {tabs.map((tab) => {
-            const label = getTabLabel(tab)
-            const isActive = tab.id === activeTabId
+          <div className="max-h-[60vh] overflow-y-auto overscroll-contain">
+            {tabs.map((tab) => {
+              const label = getTabLabel(tab)
+              const isActive = tab.id === activeTabId
 
-            return (
-              <div key={tab.id} className="flex items-center gap-1 rounded-lg">
-                <Button
-                  type="button"
-                  aria-pressed={isActive}
-                  aria-label={tab.noteId ? undefined : "Open empty note tab"}
-                  variant="ghost"
-                  className={cn("min-w-0 flex-1 justify-start rounded-lg px-2.5", isActive && "bg-muted font-semibold")}
-                  title={label}
-                  onMouseDown={(event) => event.preventDefault()}
-                  onClick={() => handleActivate(tab.id)}
-                >
-                  <span className="min-w-0 flex-1 truncate text-left">{label}</span>
-                  <SaveStateIndicator tab={tab} />
-                </Button>
-                <Button
-                  type="button"
-                  variant="ghost"
-                  size="icon"
-                  className="h-8 w-8 shrink-0 text-muted-foreground hover:text-foreground"
-                  aria-label={tab.noteId ? `Close ${label}` : "Close empty note tab"}
-                  title={`Close ${label}`}
-                  onMouseDown={(event) => event.preventDefault()}
-                  onClick={() => handleClose(tab)}
-                >
-                  <X className="h-3.5 w-3.5" aria-hidden="true" />
-                </Button>
-              </div>
-            )
-          })}
-          <Button type="button" variant="ghost" className="mt-1 w-full justify-start rounded-lg" onMouseDown={(event) => event.preventDefault()} onClick={handleAdd}>
+              return (
+                <div key={tab.id} className="flex items-center gap-1 rounded-lg">
+                  <Button
+                    type="button"
+                    aria-pressed={isActive}
+                    aria-label={tab.noteId ? undefined : "Open empty note tab"}
+                    variant="ghost"
+                    className={cn("min-w-0 flex-1 justify-start rounded-lg px-2.5", isActive && "bg-muted font-semibold")}
+                    title={label}
+                    onMouseDown={(event) => event.preventDefault()}
+                    onClick={() => handleActivate(tab.id)}
+                  >
+                    <span className="min-w-0 flex-1 truncate text-left">{label}</span>
+                    <SaveStateIndicator tab={tab} />
+                  </Button>
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="icon"
+                    className="h-8 w-8 shrink-0 text-muted-foreground hover:text-foreground"
+                    aria-label={tab.noteId ? `Close ${label}` : "Close empty note tab"}
+                    title={`Close ${label}`}
+                    onMouseDown={(event) => event.preventDefault()}
+                    onClick={() => handleClose(tab)}
+                  >
+                    <X className="h-3.5 w-3.5" aria-hidden="true" />
+                  </Button>
+                </div>
+              )
+            })}
+          </div>
+          <Button
+            type="button"
+            variant="ghost"
+            className="mt-1 w-full justify-start rounded-lg"
+            onMouseDown={(event) => event.preventDefault()}
+            onClick={handleAdd}
+            disabled={addTabDisabled || addTabCapacityPending}
+            aria-label={addTabLabel}
+            title={addTabLabel}
+          >
             <Plus className="h-4 w-4" aria-hidden="true" />
-            Add tab
+            <span>Add tab</span>
           </Button>
         </div>
       )}
diff --git a/ui/web/components/features/notes/NotesShell.tsx b/ui/web/components/features/notes/NotesShell.tsx
index 1d08a901994..c5123ef80eb 100644
--- a/ui/web/components/features/notes/NotesShell.tsx
+++ b/ui/web/components/features/notes/NotesShell.tsx
@@ -36,7 +36,8 @@ import { NotesTabStrip } from "@/components/features/notes/NotesTabStrip"
 import { MobileNotesTabMenu } from "@/components/features/notes/MobileNotesTabMenu"
 
 import { NavRail } from "@/components/features/navigation/NavRail"
-import { TagsPage } from "@/components/features/tags/TagsPage"
+import { TagsPage } from "@/components/features/tags/TagsPage"
+import { MAX_NOTE_WORKSPACE_TABS } from "@core/services/noteWorkspaceTabs"
 
 type NoteRecord = Note & {
   content?: string | null
@@ -97,6 +98,8 @@ export function NotesShell({ controller }: NotesShellProps) {
     addTab,
     activateTab,
     closeTab,
+    canAddTab = true,
+    workspaceHydrated = true,
     handleSelectNote,
     isSearchPanelOpen,
     setIsSearchPanelOpen,
@@ -235,6 +238,9 @@ export function NotesShell({ controller }: NotesShellProps) {
           <MobileNotesTabMenu
             tabs={tabs}
             activeTabId={activeTabId}
+            addTabDisabled={!workspaceHydrated || !canAddTab}
+            addTabCapacityPending={!workspaceHydrated}
+            maximumTabCount={MAX_NOTE_WORKSPACE_TABS}
             onAddTab={() => void addTab?.()}
             onActivateTab={(tabId) => void activateTab?.(tabId)}
             onCloseTab={(tabId) => void closeTab?.(tabId)}
@@ -286,6 +292,9 @@ export function NotesShell({ controller }: NotesShellProps) {
               <NotesTabStrip
                 tabs={tabs}
                 activeTabId={activeTabId}
+                addTabDisabled={!workspaceHydrated || !canAddTab}
+                addTabCapacityPending={!workspaceHydrated}
+                maximumTabCount={MAX_NOTE_WORKSPACE_TABS}
                 onAddTab={() => void addTab?.()}
                 onActivateTab={(tabId) => void activateTab?.(tabId)}
                 onCloseTab={(tabId) => void closeTab?.(tabId)}
diff --git a/ui/web/components/features/notes/NotesTabStrip.tsx b/ui/web/components/features/notes/NotesTabStrip.tsx
index d9d58fa5f55..1f649d2b94d 100644
--- a/ui/web/components/features/notes/NotesTabStrip.tsx
+++ b/ui/web/components/features/notes/NotesTabStrip.tsx
@@ -1,8 +1,8 @@
 "use client"
 
-import type { KeyboardEvent } from "react"
+import { useEffect, useRef, useState, type KeyboardEvent } from "react"
 import { AlertCircle, Loader2, Plus, Circle, X } from "lucide-react"
-import type { NoteWorkspaceTab } from "@core/services/noteWorkspaceTabs"
+import { MAX_NOTE_WORKSPACE_TABS, type NoteWorkspaceTab } from "@core/services/noteWorkspaceTabs"
 import { Button } from "@/components/ui/button"
 import { cn } from "@ui/web/lib/utils"
 
@@ -12,10 +12,26 @@ export type NotesTabStripProps = {
   onAddTab: () => void
   onActivateTab: (tabId: string) => void | Promise<void>
   onCloseTab: (tabId: string) => void | Promise<void>
+  addTabDisabled?: boolean
+  addTabCapacityPending?: boolean
+  maximumTabCount?: number
 }
 
 type ReadonlyNotesTabStripProps = Readonly<NotesTabStripProps>
 
+/**
+ * Keep the close affordance and a useful part of the title visible at the
+ * narrowest desktop size. The CSS min-width below and this value are kept in
+ * sync so add capacity reflects the actual layout constraint.
+ */
+export const MIN_TAB_WIDTH_PX = 120
+const TAB_GAP_PX = 4
+
+export function getTabCapacity(availableWidth: number): number {
+  if (!Number.isFinite(availableWidth) || availableWidth <= 0) return 1
+  return Math.max(1, Math.floor((availableWidth + TAB_GAP_PX) / (MIN_TAB_WIDTH_PX + TAB_GAP_PX)))
+}
+
 function getTabLabel(tab: NoteWorkspaceTab): string {
   const title = tab.note?.title?.trim() || tab.draft.title.trim()
   if (title) return title
@@ -67,6 +83,7 @@ function activateWithKeyboard(
   tabIndex: number,
   tabs: NoteWorkspaceTab[],
   onActivateTab: ReadonlyNotesTabStripProps["onActivateTab"],
+  onFocusTab: (tabId: string) => void,
 ) {
   if (event.key !== "ArrowLeft" && event.key !== "ArrowRight" && event.key !== "Home" && event.key !== "End") {
     return
@@ -83,7 +100,10 @@ function activateWithKeyboard(
     nextIndex = (tabIndex + direction + tabs.length) % tabs.length
   }
   const nextTab = tabs[nextIndex]
-  if (nextTab) void onActivateTab(nextTab.id)
+  if (nextTab) {
+    void onActivateTab(nextTab.id)
+    onFocusTab(nextTab.id)
+  }
 }
 
 export function NotesTabStrip({
@@ -92,11 +112,77 @@ export function NotesTabStrip({
   onAddTab,
   onActivateTab,
   onCloseTab,
+  addTabDisabled = false,
+  addTabCapacityPending = false,
+  maximumTabCount = MAX_NOTE_WORKSPACE_TABS,
 }: ReadonlyNotesTabStripProps) {
+  const tabViewportRef = useRef<HTMLDivElement | null>(null)
+  const tabButtonRefs = useRef(new Map<string, HTMLButtonElement>())
+  const [tabViewportWidth, setTabViewportWidth] = useState<number | null>(null)
+
+  useEffect(() => {
+    const viewport = tabViewportRef.current
+    if (!viewport) return
+
+    const measure = () => {
+      const width = viewport.clientWidth || viewport.getBoundingClientRect().width
+      setTabViewportWidth(width > 0 ? width : null)
+    }
+
+    measure()
+    if (typeof ResizeObserver === "undefined") return
+
+    const observer = new ResizeObserver(measure)
+    observer.observe(viewport)
+    return () => observer.disconnect()
+  }, [])
+
+  const measuredCapacity = tabViewportWidth === null ? null : getTabCapacity(tabViewportWidth)
+  const tabCapacity = measuredCapacity === null
+    ? null
+    : Math.min(measuredCapacity, maximumTabCount)
+  const isCapacityPending = addTabCapacityPending || tabViewportWidth === null
+  const isAddDisabled = addTabDisabled || isCapacityPending || (tabCapacity !== null && tabs.length >= tabCapacity)
+  let addTabLabel = "Add note tab"
+  if (addTabCapacityPending) {
+    addTabLabel = "Add note tab (checking workspace capacity)"
+  } else if (addTabDisabled) {
+    addTabLabel = `Add note tab (limit reached: ${maximumTabCount} tabs)`
+  } else if (isCapacityPending) {
+    addTabLabel = "Add note tab (checking capacity)"
+  } else if (isAddDisabled) {
+    addTabLabel = `Add note tab (limit reached: ${tabCapacity} tabs)`
+  }
+
+  const focusTab = (tabId: string) => {
+    const button = tabButtonRefs.current.get(tabId)
+    if (!button) return
+    button.focus()
+    button.scrollIntoView?.({ block: "nearest", inline: "nearest" })
+  }
+
+  useEffect(() => {
+    const button = tabButtonRefs.current.get(activeTabId)
+    button?.scrollIntoView?.({ block: "nearest", inline: "nearest" })
+  }, [activeTabId])
+
   return (
     <div className="hidden min-w-0 items-center gap-1 border-b border-border/60 bg-background/80 px-2 py-1 backdrop-blur md:flex">
-      <div className="min-w-0 flex-1 overflow-x-auto" aria-label="Open notes">
-        <div className="flex min-w-max items-center gap-1">
+      <Button
+        type="button"
+        variant="ghost"
+        size="icon"
+        className="h-8 w-8 shrink-0"
+        onMouseDown={(event) => event.preventDefault()}
+        onClick={onAddTab}
+        aria-label={addTabLabel}
+        title={addTabLabel}
+        disabled={isAddDisabled}
+      >
+        <Plus className="h-4 w-4" aria-hidden="true" />
+      </Button>
+      <div ref={tabViewportRef} className="min-w-0 flex-1 overflow-x-auto" aria-label="Open notes">
+        <div className="flex min-w-full items-center gap-1">
           {tabs.map((tab, index) => {
             const label = getTabLabel(tab)
             const isActive = tab.id === activeTabId
@@ -105,7 +191,7 @@ export function NotesTabStrip({
               <div
                 key={tab.id}
                 className={cn(
-                  "group flex min-w-0 max-w-56 items-center rounded-md border border-transparent",
+                  "group flex min-w-[120px] max-w-56 flex-1 items-center rounded-md border border-transparent",
                   isActive && "border-border bg-muted/60",
                 )}
                 data-tab-id={tab.id}
@@ -115,6 +201,10 @@ export function NotesTabStrip({
                   aria-pressed={isActive}
                   aria-label={tab.noteId ? undefined : "Open empty note tab"}
                   tabIndex={isActive ? 0 : -1}
+                  ref={(button) => {
+                    if (button) tabButtonRefs.current.set(tab.id, button)
+                    else tabButtonRefs.current.delete(tab.id)
+                  }}
                   variant="ghost"
                   className={cn(
                     "h-8 min-w-0 flex-1 justify-start rounded-md px-2 text-xs",
@@ -123,7 +213,7 @@ export function NotesTabStrip({
                   title={label}
                   onMouseDown={(event) => event.preventDefault()}
                   onClick={() => onActivateTab(tab.id)}
-                  onKeyDown={(event) => activateWithKeyboard(event, index, tabs, onActivateTab)}
+                  onKeyDown={(event) => activateWithKeyboard(event, index, tabs, onActivateTab, focusTab)}
                 >
                   <span className="min-w-0 truncate">{label}</span>
                   <SaveStateIndicator tab={tab} />
@@ -145,9 +235,6 @@ export function NotesTabStrip({
           })}
         </div>
       </div>
-      <Button type="button" variant="ghost" size="icon" className="h-8 w-8 shrink-0" onMouseDown={(event) => event.preventDefault()} onClick={onAddTab} aria-label="Add note tab" title="Add note tab">
-        <Plus className="h-4 w-4" aria-hidden="true" />
-      </Button>
     </div>
   )
 }
diff --git a/ui/web/hooks/useNoteAppController.ts b/ui/web/hooks/useNoteAppController.ts
index 529c6e2804b..d3371e45d07 100644
--- a/ui/web/hooks/useNoteAppController.ts
+++ b/ui/web/hooks/useNoteAppController.ts
@@ -96,6 +96,7 @@ export function useNoteAppController() {
     updateTab,
     closeTab,
     findTabByNoteId,
+    canAddTab,
   } = workspace
   const selectedNote = activeTab.note
   const isEditing = activeTab.mode === 'editing'
@@ -570,13 +571,14 @@ export function useNoteAppController() {
   ])
 
   const handleAddTab = useCallback(async () => {
+    if (!workspaceHydrated || !canAddTab) return
     await flushAndCaptureActiveTab()
     addTab()
     // On mobile, an empty tab must return to the note list so the user can
     // choose which note fills the new active slot. Desktop keeps its editor
     // pane visible through the responsive `md:flex` layout rule.
     setNotePaneVisible(false)
-  }, [addTab, flushAndCaptureActiveTab])
+  }, [addTab, canAddTab, flushAndCaptureActiveTab, workspaceHydrated])
 
   const handleActivateTab = useCallback(async (tabId: string) => {
     const targetTab = tabs.find((tab) => tab.id === tabId)
@@ -948,6 +950,8 @@ export function useNoteAppController() {
     addTab: handleAddTab,
     activateTab: handleActivateTab,
     closeTab: handleCloseTab,
+    canAddTab,
+    workspaceHydrated,
     enterSelectionMode,
     exitSelectionMode,
     toggleNoteSelection,
diff --git a/ui/web/hooks/useNoteWorkspaceTabs.ts b/ui/web/hooks/useNoteWorkspaceTabs.ts
index f5b56a2584d..54049bf13fb 100644
--- a/ui/web/hooks/useNoteWorkspaceTabs.ts
+++ b/ui/web/hooks/useNoteWorkspaceTabs.ts
@@ -2,6 +2,7 @@ import { useCallback, useEffect, useMemo, useState } from 'react'
 import {
   activateWorkspaceTab,
   addWorkspaceTab,
+  canAddWorkspaceTab,
   closeWorkspaceTab,
   createNoteWorkspaceState,
   findWorkspaceTabByNoteId,
@@ -58,6 +59,7 @@ export function useNoteWorkspaceTabs() {
   const findTabByNoteId = useCallback((noteId: string | null | undefined) => (
     findWorkspaceTabByNoteId(state, noteId)
   ), [state])
+  const canAddTab = canAddWorkspaceTab(state)
 
   return {
     ...state,
@@ -69,5 +71,6 @@ export function useNoteWorkspaceTabs() {
     updateTab,
     closeTab,
     findTabByNoteId,
+    canAddTab,
   }
 }
diff --git a/ui/web/tests/unit/components/notesShell.test.tsx b/ui/web/tests/unit/components/notesShell.test.tsx
index 658b5bd7198..eebe6191a31 100644
--- a/ui/web/tests/unit/components/notesShell.test.tsx
+++ b/ui/web/tests/unit/components/notesShell.test.tsx
@@ -12,6 +12,7 @@ const mockWordPressGetStatus = jest.fn()
 const mockApiKeysGetStatus = jest.fn()
 const mockSearchFocusInput = jest.fn()
 const mockMaybeSingle = jest.fn()
+const originalClientWidthDescriptor = Object.getOwnPropertyDescriptor(HTMLElement.prototype, 'clientWidth')
 
 const note = {
   id: 'note-1',
@@ -320,6 +321,18 @@ describe('NotesShell', () => {
     jest.mocked(useQuery).mockReturnValue({ data: { gemini: { configured: true } } } as never)
     mockConsumeReturnPath.mockReturnValue(null)
     mockMaybeSingle.mockResolvedValue({ data: fetchedNote })
+    Object.defineProperty(HTMLElement.prototype, 'clientWidth', {
+      configurable: true,
+      get: () => 800,
+    })
+  })
+
+  afterEach(() => {
+    if (originalClientWidthDescriptor) {
+      Object.defineProperty(HTMLElement.prototype, 'clientWidth', originalClientWidthDescriptor)
+    } else {
+      delete (HTMLElement.prototype as unknown as { clientWidth?: number }).clientWidth
+    }
   })
 
   it('renders the empty editor, registers the editor ref, and wires list actions', async () => {
diff --git a/ui/web/tests/unit/components/notesWorkspaceTabs.test.tsx b/ui/web/tests/unit/components/notesWorkspaceTabs.test.tsx
index 52c1aecc08c..5f3a7923852 100644
--- a/ui/web/tests/unit/components/notesWorkspaceTabs.test.tsx
+++ b/ui/web/tests/unit/components/notesWorkspaceTabs.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { fireEvent, render, screen } from '@testing-library/react'
-import { NotesTabStrip } from '@/components/features/notes/NotesTabStrip'
+import { getTabCapacity, MIN_TAB_WIDTH_PX, NotesTabStrip } from '@/components/features/notes/NotesTabStrip'
 import { MobileNotesTabMenu } from '@/components/features/notes/MobileNotesTabMenu'
 import type { NoteWorkspaceTab } from '@core/services/noteWorkspaceTabs'
 
@@ -29,7 +29,34 @@ const tabs = [
   makeTab('tab-2', 'Second note', { saveState: 'dirty' }),
 ]
 
+function mockClientWidth(width: number) {
+  const descriptor = Object.getOwnPropertyDescriptor(HTMLElement.prototype, 'clientWidth')
+  Object.defineProperty(HTMLElement.prototype, 'clientWidth', {
+    configurable: true,
+    get: () => width,
+  })
+
+  return () => {
+    if (descriptor) {
+      Object.defineProperty(HTMLElement.prototype, 'clientWidth', descriptor)
+    } else {
+      delete (HTMLElement.prototype as unknown as { clientWidth?: number }).clientWidth
+    }
+  }
+}
+
 describe('Notes workspace tab controls', () => {
+  let restoreDefaultClientWidth: (() => void) | null = null
+
+  beforeEach(() => {
+    restoreDefaultClientWidth = mockClientWidth(800)
+  })
+
+  afterEach(() => {
+    restoreDefaultClientWidth?.()
+    restoreDefaultClientWidth = null
+  })
+
   it('renders desktop tabs, save indicators, add, activation, and close actions', () => {
     const onAddTab = jest.fn()
     const onActivateTab = jest.fn()
@@ -58,6 +85,40 @@ describe('Notes workspace tab controls', () => {
     expect(onAddTab).toHaveBeenCalledTimes(1)
   })
 
+  it('keeps Add tab first and disables it when the measured minimum-width capacity is reached', () => {
+    const restoreClientWidth = mockClientWidth(MIN_TAB_WIDTH_PX * 2 + 4)
+
+    try {
+      const manyTabs = [
+        makeTab('tab-1', 'First note'),
+        makeTab('tab-2', 'Second note'),
+        makeTab('tab-3', 'Third note'),
+      ]
+      render(
+        <NotesTabStrip
+          tabs={manyTabs}
+          activeTabId="tab-1"
+          onAddTab={jest.fn()}
+          onActivateTab={jest.fn()}
+          onCloseTab={jest.fn()}
+        />,
+      )
+
+      const addButton = screen.getByRole('button', { name: 'Add note tab (limit reached: 2 tabs)' })
+      expect(addButton.hasAttribute('disabled')).toBe(true)
+      expect(addButton.parentElement?.firstElementChild).toBe(addButton)
+      expect(screen.getByLabelText('Open notes').className).toContain('overflow-x-auto')
+    } finally {
+      restoreClientWidth()
+    }
+  })
+
+  it('calculates capacity from the tab minimum instead of allowing zero-width tabs', () => {
+    expect(getTabCapacity(MIN_TAB_WIDTH_PX - 1)).toBe(1)
+    expect(getTabCapacity(MIN_TAB_WIDTH_PX * 2 + 4)).toBe(2)
+    expect(getTabCapacity(0)).toBe(1)
+  })
+
   it('supports keyboard tab navigation', () => {
     const onActivateTab = jest.fn()
 
@@ -140,6 +201,47 @@ describe('Notes workspace tab controls', () => {
     expect(screen.getByRole('button', { name: 'Open note tabs (2)' }).getAttribute('aria-expanded')).toBe('false')
   })
 
+  it('keeps the mobile tab list scrollable and exposes a disabled Add state at the shared limit', () => {
+    const manyTabs = Array.from({ length: 40 }, (_, index) => makeTab(`tab-${index}`, `Note ${index}`))
+    const onAddTab = jest.fn()
+
+    render(
+      <MobileNotesTabMenu
+        tabs={manyTabs}
+        activeTabId="tab-0"
+        onAddTab={onAddTab}
+        onActivateTab={jest.fn()}
+        onCloseTab={jest.fn()}
+        addTabDisabled
+        maximumTabCount={32}
+      />,
+    )
+
+    fireEvent.click(screen.getByRole('button', { name: 'Open note tabs (40)' }))
+    const addButton = screen.getByRole('button', { name: 'Add tab (limit reached: 32 tabs)' })
+    expect(addButton.hasAttribute('disabled')).toBe(true)
+    expect(onAddTab).not.toHaveBeenCalled()
+    expect(screen.getByLabelText('Open notes').firstElementChild?.className).toContain('overflow-y-auto')
+  })
+
+  it('announces capacity checking instead of claiming the limit during hydration', () => {
+    render(
+      <MobileNotesTabMenu
+        tabs={[makeTab('tab-1', 'First note')]}
+        activeTabId="tab-1"
+        onAddTab={jest.fn()}
+        onActivateTab={jest.fn()}
+        onCloseTab={jest.fn()}
+        addTabCapacityPending
+        maximumTabCount={32}
+      />,
+    )
+
+    fireEvent.click(screen.getByRole('button', { name: 'Open note tabs (1)' }))
+    const addButton = screen.getByRole('button', { name: 'Add tab (checking workspace capacity)' })
+    expect(addButton.hasAttribute('disabled')).toBe(true)
+  })
+
   it('closes the mobile menu after closing its only active tab', () => {
     const onCloseTab = jest.fn()
     render(
diff --git a/ui/web/tests/unit/hooks/useNoteAppControllerAdditional.test.tsx b/ui/web/tests/unit/hooks/useNoteAppControllerAdditional.test.tsx
index b6a0634409e..4f97338a003 100644
--- a/ui/web/tests/unit/hooks/useNoteAppControllerAdditional.test.tsx
+++ b/ui/web/tests/unit/hooks/useNoteAppControllerAdditional.test.tsx
@@ -3,6 +3,13 @@ import { act, renderHook, waitFor } from '@testing-library/react'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { useNoteAppController } from '@ui/web/hooks/useNoteAppController'
 import type { NoteViewModel, SearchResult } from '@core/types/domain'
+import {
+  addWorkspaceTab,
+  createNoteWorkspaceState,
+  MAX_NOTE_WORKSPACE_TABS,
+  serializeNoteWorkspaceState,
+} from '@core/services/noteWorkspaceTabs'
+import { NOTE_WORKSPACE_STORAGE_KEY } from '@ui/web/lib/noteWorkspaceStorage'
 import { toast } from 'sonner'
 
 let mockSelectedNote: NoteViewModel | null = null
@@ -312,6 +319,28 @@ describe('useNoteAppController additional observable behavior', () => {
     expect(result.current.notePaneVisible).toBe(false)
   })
 
+  it('blocks controller Add tab before flushing when the shared workspace limit is reached', async () => {
+    let nextId = 0
+    let state = createNoteWorkspaceState(() => `tab-${nextId++}`)
+    while (state.tabs.length < MAX_NOTE_WORKSPACE_TABS) {
+      state = addWorkspaceTab(state, () => `tab-${nextId++}`)
+    }
+    window.sessionStorage.setItem(NOTE_WORKSPACE_STORAGE_KEY, serializeNoteWorkspaceState(state))
+
+    const { result } = setup()
+    await waitFor(() => expect(result.current.tabs).toHaveLength(MAX_NOTE_WORKSPACE_TABS))
+    expect(result.current.canAddTab).toBe(false)
+
+    const flushPendingSave = jest.fn().mockResolvedValue(undefined)
+    act(() => result.current.registerNoteEditorRef({ current: { flushPendingSave } } as never))
+    await act(async () => {
+      await result.current.addTab()
+    })
+
+    expect(flushPendingSave).not.toHaveBeenCalled()
+    expect(result.current.tabs).toHaveLength(MAX_NOTE_WORKSPACE_TABS)
+  })
+
   it('selects the remote note after flushing, but exits editing when selecting the already selected note', async () => {
     const current = makeNote({ id: 'current' })
     const remote = makeNote({ id: 'remote', title: 'Remote' })

From aaf63cacadf0a09bdaa262161e32250267ca6de9 Mon Sep 17 00:00:00 2001
From: Denys <koreybadenis@gmail.com>
Date: Sun, 2 Aug 2026 14:29:47 +0200
Subject: [PATCH 10/23] fix(notes-tabs): clean up Qodana findings

---
 .../features/mobile/MobileLayout.cy.tsx       |  2 +-
 .../notes/NotesShellFtsExitSave.cy.tsx        | 19 ++-----------
 .../notes/NotesShellLikeExitSave.cy.tsx       | 16 ++---------
 .../features/notes/NotesTabStrip.cy.tsx       |  2 +-
 .../features/notes/notesShellTestUtils.tsx    | 28 +++++++++++++++++++
 5 files changed, 35 insertions(+), 32 deletions(-)

diff --git a/cypress/component/features/mobile/MobileLayout.cy.tsx b/cypress/component/features/mobile/MobileLayout.cy.tsx
index adddc445dc9..1f48faf1cdb 100644
--- a/cypress/component/features/mobile/MobileLayout.cy.tsx
+++ b/cypress/component/features/mobile/MobileLayout.cy.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { NotesShell } from '../../../../ui/web/components/features/notes/NotesShell'
-import { MobileNotesTabMenu } from '../../../../ui/web/components/features/notes/MobileNotesTabMenu'
+import { MobileNotesTabMenu } from '@ui/web/components/features/notes/MobileNotesTabMenu'
 import type { NoteAppController } from '../../../../ui/web/hooks/useNoteAppController'
 import { SupabaseTestProvider } from '../../../../ui/web/providers/SupabaseProvider'
 import type { SupabaseClient } from '@supabase/supabase-js'
diff --git a/cypress/component/features/notes/NotesShellFtsExitSave.cy.tsx b/cypress/component/features/notes/NotesShellFtsExitSave.cy.tsx
index cd255f459a6..6726f6d2e41 100644
--- a/cypress/component/features/notes/NotesShellFtsExitSave.cy.tsx
+++ b/cypress/component/features/notes/NotesShellFtsExitSave.cy.tsx
@@ -6,6 +6,7 @@ import type { NoteViewModel, SearchResult } from '../../../../core/types/domain'
 import { SupabaseTestProvider } from '../../../../ui/web/providers/SupabaseProvider'
 import {
   pastePlainText,
+  useNotesShellAutoSave,
   useNotesShellTestState,
   type FakeController,
 } from './notesShellTestUtils'
@@ -63,6 +64,8 @@ const buildController = () => {
       activeTab,
     } = useNotesShellTestState(baseNotes)
 
+    const handleAutoSave = useNotesShellAutoSave(selectedNoteId, setNotes)
+
     const ftsResults: SearchResult[] = React.useMemo(() => {
       // Simulate search results payload that may be stale. We re-resolve on click.
       return notes.map((n) => ({
@@ -79,22 +82,6 @@ const buildController = () => {
       }))
     }, [notes])
 
-    const handleAutoSave = React.useCallback(async (data: { noteId?: string; title?: string; description?: string; tags?: string }) => {
-      const noteId = data.noteId ?? selectedNoteId
-      if (!noteId) return
-
-      setNotes((prev) => prev.map((n) => {
-        if (n.id !== noteId) return n
-        return {
-          ...n,
-          title: data.title ?? n.title,
-          description: data.description ?? n.description,
-          // tags not relevant for this test
-          updated_at: new Date().toISOString(),
-        }
-      }))
-    }, [selectedNoteId, setNotes])
-
     const handleSaveNote = React.useCallback((data: { title: string; description: string; tags: string }) => {
       const noteId = selectedNoteId
       setNotes((prev) => prev.map((n) => (n.id === noteId ? { ...n, title: data.title, description: data.description, updated_at: new Date().toISOString() } : n)))
diff --git a/cypress/component/features/notes/NotesShellLikeExitSave.cy.tsx b/cypress/component/features/notes/NotesShellLikeExitSave.cy.tsx
index a94b93edf57..80277a233f2 100644
--- a/cypress/component/features/notes/NotesShellLikeExitSave.cy.tsx
+++ b/cypress/component/features/notes/NotesShellLikeExitSave.cy.tsx
@@ -6,6 +6,7 @@ import type { NoteViewModel } from '../../../../core/types/domain'
 import { SupabaseTestProvider } from '../../../../ui/web/providers/SupabaseProvider'
 import {
   pastePlainText,
+  useNotesShellAutoSave,
   useNotesShellTestState,
   type FakeController,
 } from './notesShellTestUtils'
@@ -63,20 +64,7 @@ const buildController = () => {
       activeTab,
     } = useNotesShellTestState(baseNotes)
 
-    const handleAutoSave = React.useCallback(async (data: { noteId?: string; title?: string; description?: string; tags?: string }) => {
-      const noteId = data.noteId ?? selectedNoteId
-      if (!noteId) return
-
-      setNotes((prev) => prev.map((n) => {
-        if (n.id !== noteId) return n
-        return {
-          ...n,
-          title: data.title ?? n.title,
-          description: data.description ?? n.description,
-          updated_at: new Date().toISOString(),
-        }
-      }))
-    }, [selectedNoteId, setNotes])
+    const handleAutoSave = useNotesShellAutoSave(selectedNoteId, setNotes)
 
     const handleSaveNote = React.useCallback((data: { title: string; description: string; tags: string }) => {
       const noteId = selectedNoteId
diff --git a/cypress/component/features/notes/NotesTabStrip.cy.tsx b/cypress/component/features/notes/NotesTabStrip.cy.tsx
index 59b21f33eed..847f08c637f 100644
--- a/cypress/component/features/notes/NotesTabStrip.cy.tsx
+++ b/cypress/component/features/notes/NotesTabStrip.cy.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { NotesTabStrip } from '../../../../ui/web/components/features/notes/NotesTabStrip'
+import { NotesTabStrip } from '@ui/web/components/features/notes/NotesTabStrip'
 import type { NoteWorkspaceTab } from '@core/services/noteWorkspaceTabs'
 
 describe('Desktop notes tab strip', () => {
diff --git a/cypress/component/features/notes/notesShellTestUtils.tsx b/cypress/component/features/notes/notesShellTestUtils.tsx
index 37a004309cd..b8486627ceb 100644
--- a/cypress/component/features/notes/notesShellTestUtils.tsx
+++ b/cypress/component/features/notes/notesShellTestUtils.tsx
@@ -5,6 +5,13 @@ import type { NoteEditorHandle } from '@ui/web/components/features/notes/NoteEdi
 
 export type FakeController = Record<string, unknown>
 
+type NotesShellAutoSaveData = {
+  noteId?: string
+  title?: string
+  description?: string
+  tags?: string
+}
+
 export const pastePlainText = (text: string) => {
   cy.get('[data-cy="editor-content"]').click()
   cy.get('.ProseMirror').trigger('paste', {
@@ -56,6 +63,27 @@ export function useNotesShellTestState(baseNotes: NoteViewModel[]) {
   }
 }
 
+export function useNotesShellAutoSave(
+  selectedNoteId: string,
+  setNotes: React.Dispatch<React.SetStateAction<NoteViewModel[]>>
+) {
+  return React.useCallback(async (data: NotesShellAutoSaveData) => {
+    const noteId = data.noteId ?? selectedNoteId
+    if (!noteId) return
+
+    setNotes((prev) => prev.map((n) => {
+      if (n.id !== noteId) return n
+      return {
+        ...n,
+        title: data.title ?? n.title,
+        description: data.description ?? n.description,
+        // Tags are not relevant to these exit-save scenarios.
+        updated_at: new Date().toISOString(),
+      }
+    }))
+  }, [selectedNoteId, setNotes])
+}
+
 export function useEditorExitState(isEditing: boolean) {
   const registeredEditorRef = React.useRef<React.RefObject<NoteEditorHandle | null> | null>(null)
 

From 9960a6bf7d783ba2bb51298e2d53b18bfe1d83d6 Mon Sep 17 00:00:00 2001
From: Denys <koreybadenis@gmail.com>
Date: Mon, 3 Aug 2026 18:30:29 +0200
Subject: [PATCH 11/23] fix(notes-tabs): share Cypress note save flow

---
 .../notes/NotesShellFtsExitSave.cy.tsx        | 25 +++------------
 .../notes/NotesShellLikeExitSave.cy.tsx       | 26 +++-------------
 .../features/notes/notesShellTestUtils.tsx    | 31 +++++++++++++++++++
 3 files changed, 39 insertions(+), 43 deletions(-)

diff --git a/cypress/component/features/notes/NotesShellFtsExitSave.cy.tsx b/cypress/component/features/notes/NotesShellFtsExitSave.cy.tsx
index 6726f6d2e41..7a774ab241a 100644
--- a/cypress/component/features/notes/NotesShellFtsExitSave.cy.tsx
+++ b/cypress/component/features/notes/NotesShellFtsExitSave.cy.tsx
@@ -62,6 +62,10 @@ const buildController = () => {
       flushIfEditing,
       selectedNote,
       activeTab,
+      handleSaveNote,
+      handleReadNote,
+      handleEditNote,
+      handleSelectNote,
     } = useNotesShellTestState(baseNotes)
 
     const handleAutoSave = useNotesShellAutoSave(selectedNoteId, setNotes)
@@ -82,27 +86,6 @@ const buildController = () => {
       }))
     }, [notes])
 
-    const handleSaveNote = React.useCallback((data: { title: string; description: string; tags: string }) => {
-      const noteId = selectedNoteId
-      setNotes((prev) => prev.map((n) => (n.id === noteId ? { ...n, title: data.title, description: data.description, updated_at: new Date().toISOString() } : n)))
-    }, [selectedNoteId, setNotes])
-
-    const handleReadNote = React.useCallback((data: { title: string; description: string; tags: string }) => {
-      handleSaveNote(data)
-      setIsEditing(false)
-    }, [handleSaveNote, setIsEditing])
-
-    const handleEditNote = React.useCallback((note: NoteViewModel) => {
-      setSelectedNoteId(note.id)
-      setIsEditing(true)
-    }, [setIsEditing, setSelectedNoteId])
-
-    const handleSelectNote = React.useCallback(async (note: NoteViewModel | null) => {
-      await flushIfEditing()
-      setSelectedNoteId(note?.id ?? '')
-      setIsEditing(false)
-    }, [flushIfEditing, setIsEditing, setSelectedNoteId])
-
     const handleSearchResultClick = React.useCallback(async (note: SearchResult) => {
       await flushIfEditing()
       // Resolve to latest note state on click
diff --git a/cypress/component/features/notes/NotesShellLikeExitSave.cy.tsx b/cypress/component/features/notes/NotesShellLikeExitSave.cy.tsx
index 80277a233f2..f7c55c065ac 100644
--- a/cypress/component/features/notes/NotesShellLikeExitSave.cy.tsx
+++ b/cypress/component/features/notes/NotesShellLikeExitSave.cy.tsx
@@ -55,38 +55,20 @@ const buildController = () => {
       notes,
       setNotes,
       selectedNoteId,
-      setSelectedNoteId,
       isEditing,
       setIsEditing,
       registerNoteEditorRef,
       flushIfEditing,
       selectedNote,
       activeTab,
+      handleSaveNote,
+      handleReadNote,
+      handleEditNote,
+      handleSelectNote,
     } = useNotesShellTestState(baseNotes)
 
     const handleAutoSave = useNotesShellAutoSave(selectedNoteId, setNotes)
 
-    const handleSaveNote = React.useCallback((data: { title: string; description: string; tags: string }) => {
-      const noteId = selectedNoteId
-      setNotes((prev) => prev.map((n) => (n.id === noteId ? { ...n, title: data.title, description: data.description, updated_at: new Date().toISOString() } : n)))
-    }, [selectedNoteId, setNotes])
-
-    const handleReadNote = React.useCallback((data: { title: string; description: string; tags: string }) => {
-      handleSaveNote(data)
-      setIsEditing(false)
-    }, [handleSaveNote, setIsEditing])
-
-    const handleEditNote = React.useCallback((note: NoteViewModel) => {
-      setSelectedNoteId(note.id)
-      setIsEditing(true)
-    }, [setIsEditing, setSelectedNoteId])
-
-    const handleSelectNote = React.useCallback(async (note: NoteViewModel | null) => {
-      await flushIfEditing()
-      setSelectedNoteId(note?.id ?? '')
-      setIsEditing(false)
-    }, [flushIfEditing, setIsEditing, setSelectedNoteId])
-
     const controller: FakeController = {
       registerNoteEditorRef,
       user,
diff --git a/cypress/component/features/notes/notesShellTestUtils.tsx b/cypress/component/features/notes/notesShellTestUtils.tsx
index b8486627ceb..3dfbe58d7e4 100644
--- a/cypress/component/features/notes/notesShellTestUtils.tsx
+++ b/cypress/component/features/notes/notesShellTestUtils.tsx
@@ -12,6 +12,12 @@ type NotesShellAutoSaveData = {
   tags?: string
 }
 
+type NotesShellSaveData = {
+  title: string
+  description: string
+  tags: string
+}
+
 export const pastePlainText = (text: string) => {
   cy.get('[data-cy="editor-content"]').click()
   cy.get('.ProseMirror').trigger('paste', {
@@ -49,6 +55,27 @@ export function useNotesShellTestState(baseNotes: NoteViewModel[]) {
   )
   const activeTab = React.useMemo(() => makeWorkspaceTab(selectedNote, isEditing), [selectedNote, isEditing])
 
+  const handleSaveNote = React.useCallback((data: NotesShellSaveData) => {
+    const noteId = selectedNoteId
+    setNotes((prev) => prev.map((n) => (n.id === noteId ? { ...n, title: data.title, description: data.description, updated_at: new Date().toISOString() } : n)))
+  }, [selectedNoteId, setNotes])
+
+  const handleReadNote = React.useCallback((data: NotesShellSaveData) => {
+    handleSaveNote(data)
+    setIsEditing(false)
+  }, [handleSaveNote, setIsEditing])
+
+  const handleEditNote = React.useCallback((note: NoteViewModel) => {
+    setSelectedNoteId(note.id)
+    setIsEditing(true)
+  }, [setIsEditing, setSelectedNoteId])
+
+  const handleSelectNote = React.useCallback(async (note: NoteViewModel | null) => {
+    await flushIfEditing()
+    setSelectedNoteId(note?.id ?? '')
+    setIsEditing(false)
+  }, [flushIfEditing, setIsEditing, setSelectedNoteId])
+
   return {
     notes,
     setNotes,
@@ -60,6 +87,10 @@ export function useNotesShellTestState(baseNotes: NoteViewModel[]) {
     flushIfEditing,
     selectedNote,
     activeTab,
+    handleSaveNote,
+    handleReadNote,
+    handleEditNote,
+    handleSelectNote,
   }
 }
 

From 2e76626a2483cffca63bff491062e84c1cf310a9 Mon Sep 17 00:00:00 2001
From: denyskoreiba <denys.koreiba@flowlix.eu>
Date: Thu, 20 Aug 2026 20:18:57 +0200
Subject: [PATCH 12/23] fix(notes-tabs): resolve final review findings

- debounce draft/scroll session sync (250ms) so typing and scrolling no
  longer write workspace state and sessionStorage per event; capture-safe
  flush/cancel semantics keep tab transitions loss-free
- make flushAndCaptureActiveTab return a success flag: transitions abort
  explicitly on autosave-flush failure instead of leaking unhandled
  promise rejections through every navigation wrapper
- reset workspace tabs whose note was deleted (single and bulk) via new
  resetWorkspaceTabsForNotes reducer; bulk delete reports actually
  deleted IDs and no longer blanks a surviving active tab
- keep dirty/error save markers when entering edit mode
- resolve Codacy findings (optional chains, void operator) and ignore
  in-repo agent worktrees (.claude/worktrees) in Jest and ESLint
- update feature docs and extend unit coverage for the new behavior

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 core/services/noteWorkspaceTabs.ts            |  25 +
 .../core-services-noteWorkspaceTabs.test.ts   |  35 +
 .../web/hooks/useNoteBulkActionsDirect.cy.tsx |   6 +-
 .../design/2026-08-01-feature-notes-tabs.md   |  25 +
 .../2026-08-01-feature-notes-tabs.md          |   5 +-
 .../planning/2026-08-01-feature-notes-tabs.md |  13 +-
 .../testing/2026-08-01-feature-notes-tabs.md  |  36 +-
 eslint.config.mjs                             |   1 +
 jest.config.cjs                               |   3 +
 .../features/notes/MobileNotesTabMenu.tsx     |   2 +-
 .../components/features/notes/NoteEditor.tsx  |  81 +-
 ui/web/components/features/notes/NoteView.tsx |  13 +-
 .../features/notes/NotesTabStrip.tsx          |  11 +-
 ui/web/hooks/useDebouncedSessionCallback.ts   |  69 ++
 ui/web/hooks/useNoteAppController.ts          | 840 +++++++++---------
 ui/web/hooks/useNoteBulkActions.ts            |  11 +-
 ui/web/hooks/useNoteSaveHandlers.ts           |  88 +-
 ui/web/hooks/useNoteWorkspaceTabs.ts          |   6 +
 .../tests/unit/components/noteView.test.tsx   |  48 +-
 .../useDebouncedSessionCallback.test.tsx      |  93 ++
 .../useNoteAppControllerAdditional.test.tsx   |  79 +-
 .../unit/hooks/useNoteBulkActions.test.tsx    |   7 +-
 22 files changed, 975 insertions(+), 522 deletions(-)
 create mode 100644 ui/web/hooks/useDebouncedSessionCallback.ts
 create mode 100644 ui/web/tests/unit/hooks/useDebouncedSessionCallback.test.tsx

diff --git a/core/services/noteWorkspaceTabs.ts b/core/services/noteWorkspaceTabs.ts
index d23cd236155..8f3b3e0a33b 100644
--- a/core/services/noteWorkspaceTabs.ts
+++ b/core/services/noteWorkspaceTabs.ts
@@ -214,6 +214,31 @@ export function updateWorkspaceTab(
   return { ...state, tabs }
 }
 
+/**
+ * Turns every tab that shows one of the given notes back into a blank landing
+ * slot. Used after a note is deleted so no tab keeps rendering (or can
+ * resurrect through autosave) a note that no longer exists. Tab identity,
+ * order, and the active tab are preserved.
+ */
+export function resetWorkspaceTabsForNotes(
+  state: NoteWorkspaceState,
+  noteIds: readonly string[],
+): NoteWorkspaceState {
+  const deletedNoteIds = new Set(noteIds.filter((noteId) => noteId.length > 0))
+  if (deletedNoteIds.size === 0) return state
+
+  let changed = false
+  const tabs = state.tabs.map((tab) => {
+    if (!tab.noteId || !deletedNoteIds.has(tab.noteId)) return tab
+    changed = true
+    return {
+      ...createEmptyTab(() => tab.id),
+    }
+  })
+
+  return changed ? { ...state, tabs } : state
+}
+
 export function closeWorkspaceTab(
   state: NoteWorkspaceState,
   tabId: string,
diff --git a/core/tests/unit/core-services-noteWorkspaceTabs.test.ts b/core/tests/unit/core-services-noteWorkspaceTabs.test.ts
index 5e13cf55e63..c86cc2fac03 100644
--- a/core/tests/unit/core-services-noteWorkspaceTabs.test.ts
+++ b/core/tests/unit/core-services-noteWorkspaceTabs.test.ts
@@ -11,6 +11,7 @@ import {
   MAX_NOTE_WORKSPACE_SERIALIZED_LENGTH,
   MAX_NOTE_WORKSPACE_TABS,
   openNoteInWorkspace,
+  resetWorkspaceTabsForNotes,
   serializeNoteWorkspaceState,
   updateWorkspaceTab,
 } from '@core/services/noteWorkspaceTabs'
@@ -118,6 +119,40 @@ describe('note workspace tab state', () => {
     expect(afterRightmostClose.activeTabId).toBe('tab-1')
   })
 
+  it('resets tabs showing deleted notes back to blank slots without changing order or activation', () => {
+    let state = openNoteInWorkspace(createNoteWorkspaceState(ids('tab-1')), note('note-1'))
+    state = addWorkspaceTab(state, ids('tab-2'))
+    state = openNoteInWorkspace(state, note('note-2'))
+    state = addWorkspaceTab(state, ids('tab-3'))
+    state = openNoteInWorkspace(state, note('note-3'))
+    state = updateWorkspaceTab(state, 'tab-2', { draft: { title: 'Unsaved edits' }, saveState: 'dirty' })
+
+    const reset = resetWorkspaceTabsForNotes(state, ['note-2', 'missing-note'])
+
+    expect(reset.tabs.map((tab) => tab.id)).toEqual(['tab-1', 'tab-2', 'tab-3'])
+    expect(reset.activeTabId).toBe('tab-3')
+    expect(findWorkspaceTabByNoteId(reset, 'note-2')).toBeNull()
+    expect(reset.tabs[1]).toMatchObject({
+      id: 'tab-2',
+      noteId: null,
+      note: null,
+      mode: 'reading',
+      draft: { title: '', description: '', tags: '' },
+      saveState: 'saved',
+      saveError: null,
+    })
+    expect(reset.tabs[0]).toBe(state.tabs[0])
+    expect(reset.tabs[2]).toBe(state.tabs[2])
+  })
+
+  it('returns the same state when no tab shows a deleted note', () => {
+    const state = openNoteInWorkspace(createNoteWorkspaceState(ids('tab-1')), note('note-1'))
+
+    expect(resetWorkspaceTabsForNotes(state, ['other-note'])).toBe(state)
+    expect(resetWorkspaceTabsForNotes(state, [])).toBe(state)
+    expect(resetWorkspaceTabsForNotes(state, [''])).toBe(state)
+  })
+
   it('keeps one blank active tab when the last tab closes', () => {
     const state = createNoteWorkspaceState(ids('tab-1'))
     const closed = closeWorkspaceTab(state, 'tab-1', ids('tab-replacement'))
diff --git a/cypress/component/ui/web/hooks/useNoteBulkActionsDirect.cy.tsx b/cypress/component/ui/web/hooks/useNoteBulkActionsDirect.cy.tsx
index a098d742f48..10cdd7cf0bf 100644
--- a/cypress/component/ui/web/hooks/useNoteBulkActionsDirect.cy.tsx
+++ b/cypress/component/ui/web/hooks/useNoteBulkActionsDirect.cy.tsx
@@ -69,7 +69,7 @@ const Harness = ({ selectedIds, isOffline = false, deleteShouldRejectIds = [] }:
   const setPendingCount = React.useMemo(() => cy.stub().as('setPendingCount'), [])
   const exitSelectionMode = React.useMemo(() => cy.stub().as('exitSelectionMode'), [])
   const setBulkDeleting = React.useMemo(() => cy.stub().as('setBulkDeleting'), [])
-  const setSelectedNote = React.useMemo(() => cy.stub().as('setSelectedNote'), [])
+  const onNotesDeleted = React.useMemo(() => cy.stub().as('onNotesDeleted'), [])
   const selectAllVisibleCallback = React.useMemo(() => cy.stub().as('selectAllVisibleCallback'), [])
 
   const actions = useNoteBulkActions({
@@ -82,7 +82,7 @@ const Harness = ({ selectedIds, isOffline = false, deleteShouldRejectIds = [] }:
     deleteNoteMutation: deleteNoteMutation as never,
     exitSelectionMode: exitSelectionMode as never,
     setBulkDeleting: setBulkDeleting as never,
-    setSelectedNote: setSelectedNote as never,
+    onNotesDeleted: onNotesDeleted as never,
     queryClient,
     notes: sampleNotes,
     selectAllVisibleCallback,
@@ -145,7 +145,7 @@ describe('useNoteBulkActions direct', () => {
     cy.get('@mutateAsync').should('have.callCount', 2)
     cy.get('@invalidateQueries').should('have.been.calledWithMatch', { queryKey: ['notes'] })
     cy.get('@invalidateQueries').should('have.been.calledWithMatch', { queryKey: ['aiSearch'] })
-    cy.get('@setSelectedNote').should('have.been.calledWith', null)
+    cy.get('@onNotesDeleted').should('have.been.calledWith', ['note-1'])
   })
 
   it('queues offline delete path and marks pending count', () => {
diff --git a/docs/ai/design/2026-08-01-feature-notes-tabs.md b/docs/ai/design/2026-08-01-feature-notes-tabs.md
index dae082b4321..5caaf18c83e 100644
--- a/docs/ai/design/2026-08-01-feature-notes-tabs.md
+++ b/docs/ai/design/2026-08-01-feature-notes-tabs.md
@@ -88,6 +88,7 @@ activateWorkspaceTab(state, tabId): NoteWorkspaceState
 openNoteInWorkspace(state, note, tabId?): NoteWorkspaceState
 closeWorkspaceTab(state, tabId): NoteWorkspaceState
 updateWorkspaceTab(state, tabId, patch): NoteWorkspaceState
+resetWorkspaceTabsForNotes(state, noteIds): NoteWorkspaceState
 findWorkspaceTabByNoteId(state, noteId): NoteWorkspaceTab | null
 ```
 
@@ -157,6 +158,30 @@ The existing editor remains mounted only for the active tab, so its DOM/TipTap i
 
 The tab stores `saveState: 'error'` and `saveError`. Closing a failed tab requires an explicit confirmation from the user; an error is never silently discarded. Dirty/saving states are non-blocking indicators.
 
+`flushAndCaptureActiveTab` never rejects: it returns a success flag, and every
+tab/note transition aborts explicitly when the flush fails, so the failed tab
+keeps its draft and error marker and no caller is left with an unhandled
+promise rejection. Entering edit mode changes only the tab mode and never
+clears an unresolved dirty/error marker.
+
+### Deleted notes reset their tabs
+
+A successful delete (single or bulk, online or queued offline) resets every tab
+whose `noteId` was deleted back to a blank landing slot via
+`resetWorkspaceTabsForNotes`. Tab identity, order, and activation are
+preserved; only affected tabs change. This prevents a stale tab from rendering
+a deleted note or re-creating it through autosave, and bulk delete no longer
+clears the active tab when its note survived.
+
+### Session updates are debounced
+
+Typing and scrolling notify workspace state through
+`useDebouncedSessionCallback` (250 ms, below the 500 ms autosave debounce).
+Draft updates are cancelled on unmount and on manual Save/Read because every
+transition captures the live editor synchronously first — a late flush would
+re-mark a saved tab as dirty. Reading scroll has no synchronous capture path,
+so its latest value is flushed on unmount instead.
+
 ### Split View remains possible
 
 The workspace is modeled as a list of independent tab sessions, while the controller exposes one active session today. A future split view can mount two active-session presenters without changing tab identity or persistence semantics.
diff --git a/docs/ai/implementation/2026-08-01-feature-notes-tabs.md b/docs/ai/implementation/2026-08-01-feature-notes-tabs.md
index e959d4b94b3..1548bcdb73f 100644
--- a/docs/ai/implementation/2026-08-01-feature-notes-tabs.md
+++ b/docs/ai/implementation/2026-08-01-feature-notes-tabs.md
@@ -20,6 +20,7 @@ description: Technical implementation notes, patterns, and code guidelines
 core/services/noteWorkspaceTabs.ts
 ui/web/lib/noteWorkspaceStorage.ts
 ui/web/hooks/useNoteWorkspaceTabs.ts
+ui/web/hooks/useDebouncedSessionCallback.ts
 ui/web/components/features/notes/NotesTabStrip.tsx
 ui/web/components/features/notes/MobileNotesTabMenu.tsx
 ui/web/hooks/useNoteAppController.ts
@@ -38,7 +39,9 @@ ui/web/components/features/notes/NoteView.tsx
 - Use a deterministic initial tab ID for the server/client first render, then replace it with the hydrated session workspace.
 - Bound serialized workspace state and fall back to a blank tab when a persisted snapshot is malformed or exceeds the storage limit.
 - Hydrate once, then persist state changes through a guarded storage adapter.
-- Capture the current editor before unmount, flush autosave first, and then apply tab transitions.
+- Capture the current editor before unmount, flush autosave first, and then apply tab transitions. `flushAndCaptureActiveTab` returns a success flag instead of rejecting; transitions abort when it reports failure.
+- Debounce per-keystroke draft and per-frame scroll notifications with `useDebouncedSessionCallback` (250 ms) so workspace state and `sessionStorage` are not written on every event. Draft updates cancel on unmount/manual save (the capture path reads the live editor); reading scroll flushes on unmount.
+- After a successful delete, call `resetTabsForNotes` with the deleted IDs so no tab keeps a deleted note; bulk delete reports the actually-deleted IDs through `onNotesDeleted`.
 - Use the active tab's draft as editor initial content; never use a server refresh to overwrite a dirty local field without existing reconciliation rules.
 - Keep tab indicators derived from explicit per-tab save state rather than global UI assumptions.
 - Keep the desktop Add control outside the scrolling tab viewport. `NotesTabStrip`
diff --git a/docs/ai/planning/2026-08-01-feature-notes-tabs.md b/docs/ai/planning/2026-08-01-feature-notes-tabs.md
index e8d1acd4f59..0e550e8658d 100644
--- a/docs/ai/planning/2026-08-01-feature-notes-tabs.md
+++ b/docs/ai/planning/2026-08-01-feature-notes-tabs.md
@@ -11,8 +11,8 @@ description: Break down work into actionable tasks and estimate timeline
 - [x] M1: Shared tab model, safe persistence, and focused unit tests.
 - [x] M2: Web controller integration and editor/reader session preservation.
 - [x] M3: Desktop and mobile web tab presentations plus all open-note paths.
-- [ ] M4: Native mobile presentation using the shared model semantics.
-- [ ] M5: Full verification, documentation updates, and review.
+- [ ] M4: Native mobile presentation using the shared model semantics. *(deferred follow-up; `ui/mobile` intentionally unchanged in this branch)*
+- [x] M5: Full verification, documentation updates, and review.
 
 ## Task Breakdown
 
@@ -47,7 +47,7 @@ description: Break down work into actionable tasks and estimate timeline
 - [x] T5.1: Update implementation/testing/deployment/monitoring docs with actual commands and evidence.
 - [x] T5.2: Run focused unit/integration tests, production type-check, ESLint, and mobile checks independently.
 - [x] T5.3: Run the project Allure agent-mode focused tests and inspect results/evidence.
-- [ ] T5.4: Review diff/status for unrelated files and perform final code review.
+- [x] T5.4: Review diff/status for unrelated files and perform final code review.
 
 ## Dependencies
 
@@ -92,3 +92,10 @@ These are engineering estimates only; autosave/editor lifecycle and native navig
 
 - T1.1 — done (2026-08-01): pure workspace model and 9 focused Jest tests. Allure agent output `C:\Users\DenysKoreiba\AppData\Local\Temp\allure-agent-QVm6RR`; 9/9 passed, expectations matched, no findings.
 - T1.2/T1.3 — done (2026-08-01): web storage adapter, hook, and combined 13-test model/storage run. Allure agent output `C:\Users\DenysKoreiba\AppData\Local\Temp\allure-agent-Rc7Bph`; 13/13 passed, expectations matched, no findings.
+- T5.4 — done (2026-08-20): final code review found and fixed four issues:
+  1. Scroll/typing wrote the full workspace to state and `sessionStorage` on every event; session updates are now debounced (`useDebouncedSessionCallback`, 250 ms) with capture-safe flush/cancel semantics.
+  2. A failed autosave flush made every navigation wrapper reject with unhandled promise rejections; `flushAndCaptureActiveTab` now returns a success flag and transitions abort explicitly.
+  3. Deleting a note (single or bulk) left it alive in other workspace tabs where typing could re-create it, and bulk delete blanked the active tab even when its note survived; `resetWorkspaceTabsForNotes` now resets exactly the affected tabs.
+  4. Entering edit mode wiped a tab's dirty/error save marker without saving; the transition now changes only the mode.
+  Codacy findings (optional chains, `void` operator) resolved; Jest/ESLint configs now ignore in-repo agent worktrees under `.claude/worktrees/`.
+- Native mobile (M4) remains a separately scoped follow-up: expose the shared reducer through the native store/adapter, route `useOpenNote` and note routes through it, and add a native session UI. Desktop Playwright E2E flows are a follow-up in the `koreyba/EverFreeNote-e2e` repository.
diff --git a/docs/ai/testing/2026-08-01-feature-notes-tabs.md b/docs/ai/testing/2026-08-01-feature-notes-tabs.md
index 6d16e93b714..f258974db61 100644
--- a/docs/ai/testing/2026-08-01-feature-notes-tabs.md
+++ b/docs/ai/testing/2026-08-01-feature-notes-tabs.md
@@ -48,12 +48,19 @@ description: Define testing approach, test cases, and quality assurance
 
 ## End-to-End Tests
 
-- [ ] Open note A, add tab, open note B, switch A/B, and verify both contexts.
-- [ ] Open note A from normal list, search, tag-only results, and AI/internal flow and verify one tab.
-- [ ] Reload the same browser tab and verify order, active tab, mode, draft, and scroll.
-- [ ] Close active tabs in both neighbor directions and close the final tab.
-- [x] Use the compact mobile tab list to switch and close tabs.
-- [x] Create a blank mobile tab, close the menu, and select a note from the visible list.
+Playwright E2E lives in the separate `koreyba/EverFreeNote-e2e` repository, which
+has no notes-tabs coverage yet. The four scenarios below are a scoped follow-up
+in that repository; they are not deliverable from this branch. The mobile items
+are covered by in-repo Cypress component tests (`MobileLayout.cy.tsx`), and the
+desktop flows were verified manually against the PR preview deployment (see
+Recorded Evidence).
+
+- [ ] Open note A, add tab, open note B, switch A/B, and verify both contexts. *(follow-up in EverFreeNote-e2e)*
+- [ ] Open note A from normal list, search, tag-only results, and AI/internal flow and verify one tab. *(follow-up in EverFreeNote-e2e)*
+- [ ] Reload the same browser tab and verify order, active tab, mode, draft, and scroll. *(follow-up in EverFreeNote-e2e)*
+- [ ] Close active tabs in both neighbor directions and close the final tab. *(follow-up in EverFreeNote-e2e)*
+- [x] Use the compact mobile tab list to switch and close tabs. *(Cypress component coverage)*
+- [x] Create a blank mobile tab, close the menu, and select a note from the visible list. *(Cypress component coverage)*
 
 ## Test Data
 
@@ -70,6 +77,11 @@ description: Define testing approach, test cases, and quality assurance
 
 ## Manual Testing
 
+- Desktop: keyboard tab navigation, ellipsis, horizontal overflow, dirty/error markers, close confirmation, and accessible capacity state with Add fixed on the left.
+- Mobile viewport: active-note summary, tab count, compact list/sheet, touch targets, screen-reader labels.
+- Reload: verify `sessionStorage` restore and separate browser-tab isolation.
+- Network/offline: switch during autosave and after an induced save error.
+
 ## Recorded Evidence
 
 - Allure Agent workspace/model/UI run: 34/34 passed, expectations matched, findings 0. Report: `C:\Users\DenysKoreiba\AppData\Local\Temp\allure-agent-58hLNC`.
@@ -81,10 +93,14 @@ description: Define testing approach, test cases, and quality assurance
 - `npx ai-devkit@latest lint --feature notes-tabs`: passed.
 - Native mobile route/store tab adaptation was not included; responsive web mobile controls are covered by component tests.
 
-- Desktop: keyboard tab navigation, ellipsis, horizontal overflow, dirty/error markers, close confirmation, and accessible capacity state with Add fixed on the left.
-- Mobile viewport: active-note summary, tab count, compact list/sheet, touch targets, screen-reader labels.
-- Reload: verify `sessionStorage` restore and separate browser-tab isolation.
-- Network/offline: switch during autosave and after an induced save error.
+### Final review pass (2026-08-20)
+
+- `npm run type-check`: passed (root, core, core tests, web tests, `ui/mobile`).
+- `npx eslint . --max-warnings=0`: passed.
+- `npm run test:unit`: 183 suites, 1,441 tests passed — includes new coverage for `resetWorkspaceTabsForNotes`, `useDebouncedSessionCallback`, flush-failure transition abort, delete-driven tab reset, and `onNotesDeleted` bulk reporting.
+- `npm run test:integration:core`: 2 suites, 20 tests passed.
+- Focused Cypress component run (`NotesTabStrip`, `MobileLayout`, `NotesShellFtsExitSave`, `NotesShellLikeExitSave`, `NotesShellOpenInContext`, `useNoteBulkActionsDirect`): 20/20 passed in Electron.
+- Manual verification against the PR preview deployment (test-auth user): desktop tab add/replace/dedupe/switch/close, reload restore, mobile compact menu.
 
 ## Performance Testing
 
diff --git a/eslint.config.mjs b/eslint.config.mjs
index ec3e91ce33d..f5cdd6cfdb8 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -28,6 +28,7 @@ export default defineConfig([
       'allure-report/**',
       '.tmp-artifacts/**',
       '.worktrees/**',
+      '.claude/worktrees/**', // In-repo agent worktrees must not affect lint runs
       'act-artifacts/**',
       'out/**',
       'next-env.d.ts',
diff --git a/jest.config.cjs b/jest.config.cjs
index edaba6d5cf1..077967debed 100644
--- a/jest.config.cjs
+++ b/jest.config.cjs
@@ -68,6 +68,7 @@ module.exports = {
       transform,
       moduleNameMapper,
       clearMocks: true,
+      testPathIgnorePatterns: ['/node_modules/', '<rootDir>/.claude/'],
     },
     {
       displayName: 'integration-core',
@@ -79,6 +80,7 @@ module.exports = {
       transform,
       moduleNameMapper,
       clearMocks: true,
+      testPathIgnorePatterns: ['/node_modules/', '<rootDir>/.claude/'],
     },
     {
       displayName: 'unit-web',
@@ -90,6 +92,7 @@ module.exports = {
       transform,
       moduleNameMapper,
       clearMocks: true,
+      testPathIgnorePatterns: ['/node_modules/', '<rootDir>/.claude/'],
     },
   ],
 }
diff --git a/ui/web/components/features/notes/MobileNotesTabMenu.tsx b/ui/web/components/features/notes/MobileNotesTabMenu.tsx
index a945ef52998..2347a1f0733 100644
--- a/ui/web/components/features/notes/MobileNotesTabMenu.tsx
+++ b/ui/web/components/features/notes/MobileNotesTabMenu.tsx
@@ -31,7 +31,7 @@ export function MobileNotesTabMenu({
   const handleAdd = () => {
     if (addTabDisabled || addTabCapacityPending) return
     setIsOpen(false)
-    void onAddTab()
+    onAddTab()
   }
 
   const addTabLabel = addTabCapacityPending
diff --git a/ui/web/components/features/notes/NoteEditor.tsx b/ui/web/components/features/notes/NoteEditor.tsx
index 482e1a0f305..f0f309a4c68 100644
--- a/ui/web/components/features/notes/NoteEditor.tsx
+++ b/ui/web/components/features/notes/NoteEditor.tsx
@@ -12,9 +12,13 @@ import { MoreActionsMenu } from "@/components/features/notes/MoreActionsMenu"
 import { buildTagString, normalizeTag, normalizeTagList, parseTagString } from "@ui/web/lib/tags"
 import { useTagSuggestions } from "@ui/web/hooks/useTagSuggestions"
 import { useNoteEditorAutoSave } from "@ui/web/hooks/useNoteEditorAutoSave"
+import { useDebouncedSessionCallback } from "@ui/web/hooks/useDebouncedSessionCallback"
 import type { NoteDraftSnapshot, NoteViewSession } from "@core/services/noteWorkspaceTabs"
 
 const DEFAULT_AUTOSAVE_DELAY_MS = 500
+// Below the autosave delay so a pending draft notification always lands before
+// the autosave completion marks the tab as saved.
+const SESSION_SYNC_DELAY_MS = 250
 const NOOP_CANCEL = () => {}
 
 export interface NoteEditorHandle {
@@ -112,9 +116,24 @@ export const NoteEditor = React.memo(React.forwardRef<NoteEditorHandle, NoteEdit
     initialSessionRef.current = initialSession
   }, [initialSession])
 
+  // Typing fires per keystroke and scrolling per frame; debounce both before
+  // they reach workspace-tab state. Draft updates are cancelled on unmount
+  // because tab transitions capture the live editor synchronously, while the
+  // latest scroll position is flushed so it is never lost.
+  const debouncedDraftNotify = useDebouncedSessionCallback<NoteDraftSnapshot>(
+    onDraftChange,
+    SESSION_SYNC_DELAY_MS,
+    'cancel',
+  )
+  const debouncedViewNotify = useDebouncedSessionCallback<Partial<NoteViewSession>>(
+    onViewSessionChange,
+    SESSION_SYNC_DELAY_MS,
+    'flush',
+  )
+
   const notifyDraftChange = React.useCallback(() => {
-    onDraftChange?.(getFormData())
-  }, [getFormData, onDraftChange])
+    debouncedDraftNotify.schedule(getFormData())
+  }, [debouncedDraftNotify, getFormData])
 
   const applyExternalSnapshot = React.useCallback((
     snapshot: { title: string; description: string; tags: string },
@@ -184,11 +203,15 @@ export const NoteEditor = React.memo(React.forwardRef<NoteEditorHandle, NoteEdit
 
   const handleSave = () => {
     cancelAutoSave()
+    // The manual save records the draft itself; a late debounced notification
+    // would re-mark the saved tab as dirty.
+    debouncedDraftNotify.cancel()
     onSave(getFormData())
   }
 
   const handleRead = () => {
     cancelAutoSave()
+    debouncedDraftNotify.cancel()
     onRead(getFormData())
   }
 
@@ -223,44 +246,44 @@ export const NoteEditor = React.memo(React.forwardRef<NoteEditorHandle, NoteEdit
     selectedTagsRef.current = merged
     setSelectedTags(merged)
     setTagQuery("")
-    onDraftChange?.({
-      ...getFormData(),
-      tags: buildTagString(merged),
-    })
-  }, [getFormData, onDraftChange])
+    notifyDraftChange()
+  }, [notifyDraftChange])
 
   const removeTag = React.useCallback((tagToRemove: string) => {
     const next = selectedTagsRef.current.filter((tag) => tag !== tagToRemove)
     selectedTagsRef.current = next
     setSelectedTags(next)
     setTagQuery("")
-    onDraftChange?.({
-      ...getFormData(),
-      tags: buildTagString(next),
-    })
-  }, [getFormData, onDraftChange])
+    notifyDraftChange()
+  }, [notifyDraftChange])
 
   React.useImperativeHandle(ref, () => ({
     flushPendingSave,
-    captureSession: () => ({
-      draft: getFormData(),
-      view: {
-        scrollTop: scrollContainerRef.current?.scrollTop ?? 0,
-        ...(titleInputRef.current?.selectionStart !== null && titleInputRef.current?.selectionStart !== undefined && titleInputRef.current?.selectionEnd !== null && titleInputRef.current?.selectionEnd !== undefined
-          ? {
-              titleSelection: {
-                start: titleInputRef.current.selectionStart,
-                end: titleInputRef.current.selectionEnd,
-              },
-            }
-          : {}),
-        ...(editorRef.current?.getSelection?.() ? { editorSelection: editorRef.current.getSelection?.() } : {}),
-      },
-    }),
+    captureSession: () => {
+      const titleInput = titleInputRef.current
+      const titleSelection = titleInput && titleInput.selectionStart !== null && titleInput.selectionEnd !== null
+        ? { start: titleInput.selectionStart, end: titleInput.selectionEnd }
+        : undefined
+      const editorSelection = editorRef.current?.getSelection?.()
+
+      // The capture reads the live editor, so a pending debounced draft
+      // notification is stale and must not fire after the transition.
+      debouncedDraftNotify.cancel()
+      debouncedViewNotify.cancel()
+
+      return {
+        draft: getFormData(),
+        view: {
+          scrollTop: scrollContainerRef.current?.scrollTop ?? 0,
+          ...(titleSelection ? { titleSelection } : {}),
+          ...(editorSelection ? { editorSelection } : {}),
+        },
+      }
+    },
     scrollToChunk: (charOffset: number, chunkLength: number) => {
       editorRef.current?.scrollToChunk(charOffset, chunkLength)
     },
-  }), [flushPendingSave, getFormData])
+  }), [debouncedDraftNotify, debouncedViewNotify, flushPendingSave, getFormData])
 
   React.useEffect(() => {
     const session = initialSessionRef.current
@@ -374,7 +397,7 @@ export const NoteEditor = React.memo(React.forwardRef<NoteEditorHandle, NoteEdit
       <div
         ref={scrollContainerRef}
         className="flex-1 overflow-y-auto bg-card"
-        onScroll={(event) => onViewSessionChange?.({ scrollTop: event.currentTarget.scrollTop })}
+        onScroll={(event) => debouncedViewNotify.schedule({ scrollTop: event.currentTarget.scrollTop })}
       >
         <div className="max-w-4xl mx-auto px-6 pt-24 space-y-5">
           <div>
diff --git a/ui/web/components/features/notes/NoteView.tsx b/ui/web/components/features/notes/NoteView.tsx
index 90f654d417e..379f59948ee 100644
--- a/ui/web/components/features/notes/NoteView.tsx
+++ b/ui/web/components/features/notes/NoteView.tsx
@@ -9,10 +9,14 @@ import { MoreActionsMenu } from "@/components/features/notes/MoreActionsMenu"
 import { SanitizationService } from "@core/services/sanitizer"
 import { NoteClipboardService } from "@core/services/noteClipboard"
 import { useCopyNote } from "@ui/web/hooks/useCopyNote"
+import { useDebouncedSessionCallback } from "@ui/web/hooks/useDebouncedSessionCallback"
 import { NOTE_CONTENT_CLASS } from "@core/constants/typography"
 import type { Note } from "@core/types/domain"
 import type { NoteViewSession } from "@core/services/noteWorkspaceTabs"
 
+// Reading scroll fires per frame; batch updates before they hit workspace state.
+const SCROLL_SYNC_DELAY_MS = 250
+
 // Define NoteRecord locally to match what's used in page.tsx
 type NoteRecord = Note & {
   content?: string | null
@@ -55,6 +59,13 @@ export const NoteView = React.memo(function NoteView({
   const isBodyEmpty = React.useMemo(() => NoteClipboardService.isBodyEmpty(bodyHtml), [bodyHtml])
   const contentRef = React.useRef<HTMLDivElement | null>(null)
   const initialScrollTopRef = React.useRef(initialScrollTop)
+  // Reading mode has no synchronous capture path, so the latest scroll position
+  // is flushed when this view unmounts (tab switch, edit, close).
+  const debouncedViewNotify = useDebouncedSessionCallback<Partial<NoteViewSession>>(
+    onViewSessionChange,
+    SCROLL_SYNC_DELAY_MS,
+    'flush',
+  )
 
   React.useEffect(() => {
     const frame = window.requestAnimationFrame(() => {
@@ -142,7 +153,7 @@ export const NoteView = React.memo(function NoteView({
       <div
         ref={contentRef}
         className="flex-1 overflow-y-auto px-6 pt-24 pb-10 bg-card"
-        onScroll={(event) => onViewSessionChange?.({ scrollTop: event.currentTarget.scrollTop })}
+        onScroll={(event) => debouncedViewNotify.schedule({ scrollTop: event.currentTarget.scrollTop })}
       >
         <div className="max-w-4xl mx-auto">
           <h1 className="text-4xl font-extrabold tracking-tight text-foreground mb-6 leading-tight">
diff --git a/ui/web/components/features/notes/NotesTabStrip.tsx b/ui/web/components/features/notes/NotesTabStrip.tsx
index 1f649d2b94d..845df812ac1 100644
--- a/ui/web/components/features/notes/NotesTabStrip.tsx
+++ b/ui/web/components/features/notes/NotesTabStrip.tsx
@@ -38,6 +38,13 @@ function getTabLabel(tab: NoteWorkspaceTab): string {
   return tab.noteId ? "Untitled note" : "New note"
 }
 
+function scrollTabIntoView(button: HTMLButtonElement) {
+  // jsdom does not implement scrollIntoView, so guard explicitly.
+  if (typeof button.scrollIntoView === "function") {
+    button.scrollIntoView({ block: "nearest", inline: "nearest" })
+  }
+}
+
 function SaveStateIndicator({ tab }: Readonly<{ tab: NoteWorkspaceTab }>) {
   if (tab.saveState === "dirty") {
     return (
@@ -158,12 +165,12 @@ export function NotesTabStrip({
     const button = tabButtonRefs.current.get(tabId)
     if (!button) return
     button.focus()
-    button.scrollIntoView?.({ block: "nearest", inline: "nearest" })
+    scrollTabIntoView(button)
   }
 
   useEffect(() => {
     const button = tabButtonRefs.current.get(activeTabId)
-    button?.scrollIntoView?.({ block: "nearest", inline: "nearest" })
+    if (button) scrollTabIntoView(button)
   }, [activeTabId])
 
   return (
diff --git a/ui/web/hooks/useDebouncedSessionCallback.ts b/ui/web/hooks/useDebouncedSessionCallback.ts
new file mode 100644
index 00000000000..a525ed5b23a
--- /dev/null
+++ b/ui/web/hooks/useDebouncedSessionCallback.ts
@@ -0,0 +1,69 @@
+import { useCallback, useEffect, useMemo, useRef } from 'react'
+
+export type DebouncedSessionCallback<T> = {
+  schedule: (value: T) => void
+  cancel: () => void
+  flush: () => void
+}
+
+/**
+ * Debounces high-frequency editor/reader session updates (scroll, typing draft)
+ * before they reach workspace-tab state, so per-event React updates and
+ * sessionStorage serialization do not run on every scroll frame or keystroke.
+ *
+ * `onUnmount` decides what happens to a pending value when the component goes
+ * away: reading scroll must be flushed (there is no other capture path), while
+ * draft updates must be cancelled because every tab transition captures the
+ * live editor synchronously first and a late flush would re-mark a
+ * just-saved tab as dirty.
+ */
+export function useDebouncedSessionCallback<T>(
+  callback: ((value: T) => void) | undefined,
+  delayMs: number,
+  // Treated as fixed for the lifetime of the component.
+  onUnmount: 'flush' | 'cancel',
+): DebouncedSessionCallback<T> {
+  const callbackRef = useRef(callback)
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const pendingRef = useRef<{ value: T } | null>(null)
+
+  useEffect(() => {
+    callbackRef.current = callback
+  }, [callback])
+
+  const cancel = useCallback(() => {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current)
+      timerRef.current = null
+    }
+    pendingRef.current = null
+  }, [])
+
+  const flush = useCallback(() => {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current)
+      timerRef.current = null
+    }
+    const pending = pendingRef.current
+    pendingRef.current = null
+    if (pending) callbackRef.current?.(pending.value)
+  }, [])
+
+  const schedule = useCallback((value: T) => {
+    pendingRef.current = { value }
+    if (timerRef.current) clearTimeout(timerRef.current)
+    timerRef.current = setTimeout(flush, delayMs)
+  }, [delayMs, flush])
+
+  const onUnmountRef = useRef(onUnmount)
+
+  useEffect(() => () => {
+    if (onUnmountRef.current === 'flush') {
+      flush()
+    } else {
+      cancel()
+    }
+  }, [cancel, flush])
+
+  return useMemo(() => ({ schedule, cancel, flush }), [schedule, cancel, flush])
+}
diff --git a/ui/web/hooks/useNoteAppController.ts b/ui/web/hooks/useNoteAppController.ts
index d3371e45d07..539d788fabf 100644
--- a/ui/web/hooks/useNoteAppController.ts
+++ b/ui/web/hooks/useNoteAppController.ts
@@ -1,59 +1,59 @@
-import { useEffect, useCallback, useMemo, useRef, useState } from 'react'
-import { useQueryClient } from '@tanstack/react-query'
-import { toast } from 'sonner'
-
-import { useNotesQuery } from './useNotesQuery'
-import { useCreateNote, useUpdateNote, useDeleteNote, useRemoveTag } from './useNotesMutations'
-import { useInfiniteScroll } from './useInfiniteScroll'
-import type { NoteViewModel, SearchResult } from '@core/types/domain'
-import { useNoteAuth } from './useNoteAuth'
-import { useNoteSearch } from './useNoteSearch'
-import { useNoteSelection } from './useNoteSelection'
-import { useNoteSync } from './useNoteSync'
-import { useNoteData } from './useNoteData'
-import { useNoteSaveHandlers } from './useNoteSaveHandlers'
+import { useEffect, useCallback, useMemo, useRef, useState } from 'react'
+import { useQueryClient } from '@tanstack/react-query'
+import { toast } from 'sonner'
+
+import { useNotesQuery } from './useNotesQuery'
+import { useCreateNote, useUpdateNote, useDeleteNote, useRemoveTag } from './useNotesMutations'
+import { useInfiniteScroll } from './useInfiniteScroll'
+import type { NoteViewModel, SearchResult } from '@core/types/domain'
+import { useNoteAuth } from './useNoteAuth'
+import { useNoteSearch } from './useNoteSearch'
+import { useNoteSelection } from './useNoteSelection'
+import { useNoteSync } from './useNoteSync'
+import { useNoteData } from './useNoteData'
+import { useNoteSaveHandlers } from './useNoteSaveHandlers'
 import { useNoteBulkActions } from './useNoteBulkActions'
 import { useNoteWorkspaceTabs } from './useNoteWorkspaceTabs'
 import type { NoteDraftSnapshot, NoteViewSession } from '@core/services/noteWorkspaceTabs'
-import type { NoteEditorHandle } from '@ui/web/components/features/notes/NoteEditor'
-import { useSupabase } from '@ui/web/providers/SupabaseProvider'
-import { NoteService } from '@core/services/notes'
+import type { NoteEditorHandle } from '@ui/web/components/features/notes/NoteEditor'
+import { useSupabase } from '@ui/web/providers/SupabaseProvider'
+import { NoteService } from '@core/services/notes'
 import {
   renameTagInNotes,
   deleteTagFromNotes,
   cleanUnusedOrEmptyTagsInNotes,
 } from '@core/services/tags'
-import { type NotesUiStateSnapshot } from '@ui/web/lib/settingsNavigationState'
-import { clearActiveSettingsNoteReturnPath } from '@ui/web/lib/aiIndexNavigationState'
-import { mergeNoteFields, pickLatestNote } from '@core/utils/noteSnapshot'
-
-
-export type EditFormState = {
-  title: string
-  description: string
-  tags: string
-}
-
-type AIPaginationControls = {
-  resetAIResults: () => void
-  loadMoreAI: () => void
-}
-
-export function useNoteAppController() {
-  const { supabase } = useSupabase()
-
-  // -- Auth --
-  const {
-    user,
-    loading: authLoadingState,
-    handleSignInWithGoogle,
-    handleTestLogin,
-    handleSkipAuth,
-    handleSignOut,
-    handleDeleteAccount,
-    deleteAccountLoading
-  } = useNoteAuth()
-
+import { type NotesUiStateSnapshot } from '@ui/web/lib/settingsNavigationState'
+import { clearActiveSettingsNoteReturnPath } from '@ui/web/lib/aiIndexNavigationState'
+import { mergeNoteFields, pickLatestNote } from '@core/utils/noteSnapshot'
+
+
+export type EditFormState = {
+  title: string
+  description: string
+  tags: string
+}
+
+type AIPaginationControls = {
+  resetAIResults: () => void
+  loadMoreAI: () => void
+}
+
+export function useNoteAppController() {
+  const { supabase } = useSupabase()
+
+  // -- Auth --
+  const {
+    user,
+    loading: authLoadingState,
+    handleSignInWithGoogle,
+    handleTestLogin,
+    handleSkipAuth,
+    handleSignOut,
+    handleDeleteAccount,
+    deleteAccountLoading
+  } = useNoteAuth()
+
   // -- Selection --
   const {
     selectedNote: legacySelectedNote,
@@ -61,18 +61,18 @@ export function useNoteAppController() {
     setSelectedNote: setLegacySelectedNote,
     setIsEditing: setLegacyIsEditing,
     deleteDialogOpen,
-    setDeleteDialogOpen,
-    noteToDelete,
-    setNoteToDelete,
-    selectedNoteIds,
-    selectionMode,
-    bulkDeleting,
-    setBulkDeleting,
+    setDeleteDialogOpen,
+    noteToDelete,
+    setNoteToDelete,
+    selectedNoteIds,
+    selectionMode,
+    bulkDeleting,
+    setBulkDeleting,
     handleDeleteNote,
-    enterSelectionMode,
-    exitSelectionMode,
-    toggleNoteSelection,
-    selectAllVisible: selectAllVisibleCallback,
+    enterSelectionMode,
+    exitSelectionMode,
+    toggleNoteSelection,
+    selectAllVisible: selectAllVisibleCallback,
     clearSelection,
     handleSelectNote: handleSelectNoteLegacy,
     handleSearchResultClick: handleSearchResultClickLegacy,
@@ -95,6 +95,7 @@ export function useNoteAppController() {
     openNote,
     updateTab,
     closeTab,
+    resetTabsForNotes,
     findTabByNoteId,
     canAddTab,
   } = workspace
@@ -133,14 +134,14 @@ export function useNoteAppController() {
     updateTab,
     workspaceHydrated,
   ])
-
-  // -- Editor ref (cross-cutting: bridges UI editor with save/navigation logic) --
-  const noteEditorRef = useRef<React.RefObject<NoteEditorHandle | null> | null>(null)
-
-  const registerNoteEditorRef = useCallback((ref: React.RefObject<NoteEditorHandle | null>) => {
-    noteEditorRef.current = ref
-  }, [])
-
+
+  // -- Editor ref (cross-cutting: bridges UI editor with save/navigation logic) --
+  const noteEditorRef = useRef<React.RefObject<NoteEditorHandle | null> | null>(null)
+
+  const registerNoteEditorRef = useCallback((ref: React.RefObject<NoteEditorHandle | null>) => {
+    noteEditorRef.current = ref
+  }, [])
+
   const flushPendingEditorSave = useCallback(async () => {
     if (!isEditing) return
     const handle = noteEditorRef.current?.current
@@ -158,187 +159,208 @@ export function useNoteAppController() {
     })
   }, [activeTabId, updateTab])
 
-  const flushAndCaptureActiveTab = useCallback(async () => {
+  /**
+   * Captures the outgoing tab session and flushes pending autosave work.
+   * Returns `false` when the flush fails so callers abort the transition:
+   * the failed tab keeps its draft and error state and the user can retry.
+   * Never rejects — save errors are already surfaced on the tab itself.
+   */
+  const flushAndCaptureActiveTab = useCallback(async (): Promise<boolean> => {
     captureActiveTabSession()
-    await flushPendingEditorSave()
+    try {
+      await flushPendingEditorSave()
+      return true
+    } catch {
+      return false
+    }
   }, [captureActiveTabSession, flushPendingEditorSave])
-
-  // -- Infrastructure --
-  const queryClient = useQueryClient()
-  const noteService = useMemo(() => new NoteService(supabase), [supabase])
-  const createNoteMutation = useCreateNote()
-  const updateNoteMutation = useUpdateNote()
-  const deleteNoteMutation = useDeleteNote()
-  const removeTagMutation = useRemoveTag()
-
-  // -- Sync & Offline --
-  const {
-    offlineOverlay,
-    setOfflineOverlay,
-    pendingCount,
-    setPendingCount,
-    failedCount,
-    setFailedCount,
-    isOffline,
-    lastSavedAt,
-    setLastSavedAt,
-    offlineCache,
-    enqueueMutation,
-    enqueueBatchAndDrainIfOnline,
-    offlineQueueRef
-  } = useNoteSync({
-    user,
-    createNoteMutation,
-    updateNoteMutation,
-    deleteNoteMutation
-  })
-
-  // -- Search --
-  const {
-    searchQuery,
-    filterByTag,
-    isSearchPanelOpen,
-    setIsSearchPanelOpen,
-    handleSearch,
-    handleTagClick: onTagClick,
-    handleClearTagFilter,
-    showFTSResults,
-    aggregatedFtsData,
-    ftsObserverTarget,
-    ftsHasMore,
-    ftsLoadingMore,
-    ftsAccumulatedResults,
-    loadMoreFts,
-    ftsSearchResult,
-    resetFtsResults,
-    showTagOnlyResults,
-    tagOnlyResults,
-    tagOnlyTotal,
-    tagOnlyLoading,
-    tagOnlyHasMore,
-    tagOnlyLoadingMore,
-    loadMoreTagOnly,
-  } = useNoteSearch(user?.id)
-
-  // -- Notes query --
-  const notesQuery = useNotesQuery({
-    userId: user?.id,
-    // Main notes list must stay stable while search is rendered in SearchResultsPanel.
-    searchQuery: '',
-    // Tag filtering is now scoped to search panel results only.
-    selectedTag: null,
-    enabled: !!user,
-  })
-
-  // -- Computed note data --
-  const {
-    notes,
-    resolveSearchResult,
-    mergedFtsData,
-    notesDisplayed,
-    notesTotal,
-    selectedCount,
-    notesRef,
-  } = useNoteData({
-    notesQuery,
-    offlineOverlay,
-    aggregatedFtsData,
-    selectedNoteIds,
-  })
-
-  // -- Infinite Scroll --
-  const observerTarget = useInfiniteScroll(
-    notesQuery.fetchNextPage,
-    notesQuery.hasNextPage,
-    notesQuery.isFetchingNextPage,
-    { threshold: 0.8, rootMargin: '200px' }
-  )
-
-  // Ref to avoid stale closure in save handlers and nav wrappers
-  const selectedNoteRef = useRef(selectedNote)
-  const latestEditRequestRef = useRef(0)
-  const latestSelectRequestRef = useRef(0)
-  const latestSearchClickRequestRef = useRef(0)
-  useEffect(() => {
-    selectedNoteRef.current = selectedNote
-  }, [selectedNote])
-
-  const hasPendingLocalWrites = useCallback((noteId: string) => (
-    offlineOverlay.some((note) => (
-      note.id === noteId &&
-      (
-        note.status !== 'synced' ||
-        Boolean(note.pendingOps?.some((operation) => operation !== 'delete'))
-      )
-    ))
-  ), [offlineOverlay])
-
-  const resolveOpenableNote = useCallback(async <T extends NoteViewModel | SearchResult>(note: T): Promise<T | null> => {
-    if (isOffline || hasPendingLocalWrites(note.id)) {
-      return note
-    }
-
-    try {
-      const remoteResult = await noteService.getNoteStatus(note.id)
-      if (remoteResult.status === 'found') {
-        return pickLatestNote([
-          mergeNoteFields(note, remoteResult.note),
-          note,
-        ]) ?? mergeNoteFields(note, remoteResult.note)
-      }
-
-      if (remoteResult.status === 'not_found') {
-        await offlineCache.deleteNote(note.id)
-        setOfflineOverlay((current) => current.filter((cachedNote) => cachedNote.id !== note.id))
-        toast.error('This note was deleted on another device.')
-        queryClient.invalidateQueries({ queryKey: ['notes'] }).catch(() => {})
-        queryClient.invalidateQueries({ queryKey: ['aiSearch'] }).catch(() => {})
-        return null
-      }
-
-      console.warn('Transient error checking note status, using local version:', remoteResult.error)
-    } catch (error) {
-      console.warn('Failed to check note status, using local version:', error)
-    }
-
-    return note
-  }, [hasPendingLocalWrites, isOffline, noteService, offlineCache, setOfflineOverlay, queryClient])
-
-  // -- Save handlers --
-  const {
-    saving,
-    autoSaving,
-    handleAutoSave,
-    handleSaveNote,
+
+  // -- Infrastructure --
+  const queryClient = useQueryClient()
+  const noteService = useMemo(() => new NoteService(supabase), [supabase])
+  const createNoteMutation = useCreateNote()
+  const updateNoteMutation = useUpdateNote()
+  const deleteNoteMutation = useDeleteNote()
+  const removeTagMutation = useRemoveTag()
+
+  // -- Sync & Offline --
+  const {
+    offlineOverlay,
+    setOfflineOverlay,
+    pendingCount,
+    setPendingCount,
+    failedCount,
+    setFailedCount,
+    isOffline,
+    lastSavedAt,
+    setLastSavedAt,
+    offlineCache,
+    enqueueMutation,
+    enqueueBatchAndDrainIfOnline,
+    offlineQueueRef
+  } = useNoteSync({
+    user,
+    createNoteMutation,
+    updateNoteMutation,
+    deleteNoteMutation
+  })
+
+  // -- Search --
+  const {
+    searchQuery,
+    filterByTag,
+    isSearchPanelOpen,
+    setIsSearchPanelOpen,
+    handleSearch,
+    handleTagClick: onTagClick,
+    handleClearTagFilter,
+    showFTSResults,
+    aggregatedFtsData,
+    ftsObserverTarget,
+    ftsHasMore,
+    ftsLoadingMore,
+    ftsAccumulatedResults,
+    loadMoreFts,
+    ftsSearchResult,
+    resetFtsResults,
+    showTagOnlyResults,
+    tagOnlyResults,
+    tagOnlyTotal,
+    tagOnlyLoading,
+    tagOnlyHasMore,
+    tagOnlyLoadingMore,
+    loadMoreTagOnly,
+  } = useNoteSearch(user?.id)
+
+  // -- Notes query --
+  const notesQuery = useNotesQuery({
+    userId: user?.id,
+    // Main notes list must stay stable while search is rendered in SearchResultsPanel.
+    searchQuery: '',
+    // Tag filtering is now scoped to search panel results only.
+    selectedTag: null,
+    enabled: !!user,
+  })
+
+  // -- Computed note data --
+  const {
+    notes,
+    resolveSearchResult,
+    mergedFtsData,
+    notesDisplayed,
+    notesTotal,
+    selectedCount,
+    notesRef,
+  } = useNoteData({
+    notesQuery,
+    offlineOverlay,
+    aggregatedFtsData,
+    selectedNoteIds,
+  })
+
+  // -- Infinite Scroll --
+  const observerTarget = useInfiniteScroll(
+    notesQuery.fetchNextPage,
+    notesQuery.hasNextPage,
+    notesQuery.isFetchingNextPage,
+    { threshold: 0.8, rootMargin: '200px' }
+  )
+
+  // Ref to avoid stale closure in save handlers and nav wrappers
+  const selectedNoteRef = useRef(selectedNote)
+  const latestEditRequestRef = useRef(0)
+  const latestSelectRequestRef = useRef(0)
+  const latestSearchClickRequestRef = useRef(0)
+  useEffect(() => {
+    selectedNoteRef.current = selectedNote
+  }, [selectedNote])
+
+  const hasPendingLocalWrites = useCallback((noteId: string) => (
+    offlineOverlay.some((note) => (
+      note.id === noteId &&
+      (
+        note.status !== 'synced' ||
+        Boolean(note.pendingOps?.some((operation) => operation !== 'delete'))
+      )
+    ))
+  ), [offlineOverlay])
+
+  const resolveOpenableNote = useCallback(async <T extends NoteViewModel | SearchResult>(note: T): Promise<T | null> => {
+    if (isOffline || hasPendingLocalWrites(note.id)) {
+      return note
+    }
+
+    try {
+      const remoteResult = await noteService.getNoteStatus(note.id)
+      if (remoteResult.status === 'found') {
+        return pickLatestNote([
+          mergeNoteFields(note, remoteResult.note),
+          note,
+        ]) ?? mergeNoteFields(note, remoteResult.note)
+      }
+
+      if (remoteResult.status === 'not_found') {
+        await offlineCache.deleteNote(note.id)
+        setOfflineOverlay((current) => current.filter((cachedNote) => cachedNote.id !== note.id))
+        toast.error('This note was deleted on another device.')
+        queryClient.invalidateQueries({ queryKey: ['notes'] }).catch(() => {})
+        queryClient.invalidateQueries({ queryKey: ['aiSearch'] }).catch(() => {})
+        return null
+      }
+
+      console.warn('Transient error checking note status, using local version:', remoteResult.error)
+    } catch (error) {
+      console.warn('Failed to check note status, using local version:', error)
+    }
+
+    return note
+  }, [hasPendingLocalWrites, isOffline, noteService, offlineCache, setOfflineOverlay, queryClient])
+
+  // -- Save handlers --
+  const {
+    saving,
+    autoSaving,
+    handleAutoSave,
+    handleSaveNote,
     handleReadNote,
     confirmDeleteNote,
     handleRemoveTagFromNote,
     persistOfflineNoteUpdates,
   } = useNoteSaveHandlers({
-    user,
-    isOffline,
-    offlineCache,
-    enqueueMutation,
-    offlineQueueRef,
-    setOfflineOverlay,
-    setPendingCount,
-    setFailedCount,
-    setLastSavedAt,
-    createNoteMutation,
-    updateNoteMutation,
-    deleteNoteMutation,
-    removeTagMutation,
-    selectedNote,
-    setSelectedNote,
-    setIsEditing,
-    noteToDelete,
-    setDeleteDialogOpen,
-    setNoteToDelete,
-    notes,
-    notesRef,
+    user,
+    isOffline,
+    offlineCache,
+    enqueueMutation,
+    offlineQueueRef,
+    setOfflineOverlay,
+    setPendingCount,
+    setFailedCount,
+    setLastSavedAt,
+    createNoteMutation,
+    updateNoteMutation,
+    deleteNoteMutation,
+    removeTagMutation,
+    selectedNote,
+    setSelectedNote,
+    setIsEditing,
+    noteToDelete,
+    setDeleteDialogOpen,
+    setNoteToDelete,
+    notes,
+    notesRef,
     selectedNoteRef,
   })
 
+  const confirmDeleteNoteWithWorkspace = useCallback(async () => {
+    const deletedNoteId = noteToDelete?.id ?? null
+    const deleted = await confirmDeleteNote()
+    // A deleted note must not survive in any workspace tab: a stale tab would
+    // keep rendering it and typing there would re-create the note.
+    if (deleted && deletedNoteId) {
+      resetTabsForNotes([deletedNoteId])
+    }
+  }, [confirmDeleteNote, noteToDelete, resetTabsForNotes])
+
   const handleDraftChange = useCallback((draft: NoteDraftSnapshot) => {
     updateTab(activeTabId, {
       draft,
@@ -410,29 +432,29 @@ export function useNoteAppController() {
       updateTab(activeTabId, { saveState: 'error', saveError: message })
     }
   }, [activeTabId, handleReadNote, updateTab])
-
-  // -- Bulk actions --
-  const { selectAllVisible, deleteSelectedNotes, deleteNotesByIds } = useNoteBulkActions({
-    selectedNoteIds,
-    isOffline,
-    enqueueBatchAndDrainIfOnline,
-    offlineCache,
-    setOfflineOverlay,
-    setPendingCount,
-    deleteNoteMutation,
-    exitSelectionMode,
-    setBulkDeleting,
-    setSelectedNote,
-    queryClient,
-    notes,
-    selectAllVisibleCallback,
-  })
-
+
+  // -- Bulk actions --
+  const { selectAllVisible, deleteSelectedNotes, deleteNotesByIds } = useNoteBulkActions({
+    selectedNoteIds,
+    isOffline,
+    enqueueBatchAndDrainIfOnline,
+    offlineCache,
+    setOfflineOverlay,
+    setPendingCount,
+    deleteNoteMutation,
+    exitSelectionMode,
+    setBulkDeleting,
+    onNotesDeleted: resetTabsForNotes,
+    queryClient,
+    notes,
+    selectAllVisibleCallback,
+  })
+
   // -- Nav wrappers: flush pending editor save before any navigation --
   const wrappedHandleSelectNote = useCallback(async (note: NoteViewModel | null) => {
     const requestId = ++latestSelectRequestRef.current
-    await flushAndCaptureActiveTab()
-    if (requestId !== latestSelectRequestRef.current) return
+    const flushed = await flushAndCaptureActiveTab()
+    if (!flushed || requestId !== latestSelectRequestRef.current) return
     clearActiveSettingsNoteReturnPath()
     if (!note) {
       // Mobile back/search navigation hides the pane without closing the tab.
@@ -475,7 +497,7 @@ export function useNoteAppController() {
   ])
 
   const wrappedHandleCreateNote = useCallback(async () => {
-    await flushAndCaptureActiveTab()
+    if (!(await flushAndCaptureActiveTab())) return
     clearActiveSettingsNoteReturnPath()
     updateTab(activeTabId, {
       note: null,
@@ -493,8 +515,8 @@ export function useNoteAppController() {
 
   const wrappedHandleEditNote = useCallback(async (note: NoteViewModel) => {
     const requestId = ++latestEditRequestRef.current
-    await flushAndCaptureActiveTab()
-    if (requestId !== latestEditRequestRef.current) return
+    const flushed = await flushAndCaptureActiveTab()
+    if (!flushed || requestId !== latestEditRequestRef.current) return
     const openableNote = await resolveOpenableNote(note)
     if (requestId !== latestEditRequestRef.current) return
     if (!openableNote) {
@@ -506,11 +528,13 @@ export function useNoteAppController() {
     const existingTab = findTabByNoteId(openableNote.id)
     if (existingTab) {
       activateTab(existingTab.id)
-      updateTab(existingTab.id, { mode: 'editing', saveState: 'saved', saveError: null })
+      // Only the mode changes: an unsaved dirty/error marker must survive
+      // entering the editor, otherwise a failed save looks resolved.
+      updateTab(existingTab.id, { mode: 'editing' })
       handleEditNoteRaw(openableNote)
     } else {
       openNote(openableNote)
-      updateTab(activeTabId, { mode: 'editing', saveState: 'saved', saveError: null })
+      updateTab(activeTabId, { mode: 'editing' })
       handleEditNoteRaw(openableNote)
     }
     setNotePaneVisible(true)
@@ -540,8 +564,8 @@ export function useNoteAppController() {
 
   const wrappedHandleSearchResultClick = useCallback(async (note: SearchResult) => {
     const requestId = ++latestSearchClickRequestRef.current
-    await flushAndCaptureActiveTab()
-    if (requestId !== latestSearchClickRequestRef.current) return
+    const flushed = await flushAndCaptureActiveTab()
+    if (!flushed || requestId !== latestSearchClickRequestRef.current) return
     clearActiveSettingsNoteReturnPath()
     const resolvedSearchNote = resolveSearchResult(note)
     const existingTab = findTabByNoteId(resolvedSearchNote.id)
@@ -572,7 +596,7 @@ export function useNoteAppController() {
 
   const handleAddTab = useCallback(async () => {
     if (!workspaceHydrated || !canAddTab) return
-    await flushAndCaptureActiveTab()
+    if (!(await flushAndCaptureActiveTab())) return
     addTab()
     // On mobile, an empty tab must return to the note list so the user can
     // choose which note fills the new active slot. Desktop keeps its editor
@@ -587,7 +611,7 @@ export function useNoteAppController() {
       setNotePaneVisible(Boolean(targetTab.note || targetTab.mode === 'editing'))
       return
     }
-    await flushAndCaptureActiveTab()
+    if (!(await flushAndCaptureActiveTab())) return
     activateTab(tabId)
     setNotePaneVisible(Boolean(targetTab.note || targetTab.mode === 'editing'))
     setLastSavedAt(null)
@@ -608,11 +632,7 @@ export function useNoteAppController() {
     if (tab.saveState === 'error' && !discardFailedSave) return
 
     if (tab.id === activeTabId && !discardFailedSave) {
-      try {
-        await flushAndCaptureActiveTab()
-      } catch {
-        return
-      }
+      if (!(await flushAndCaptureActiveTab())) return
     }
 
     closeTab(tabId)
@@ -629,36 +649,36 @@ export function useNoteAppController() {
   }, [activeTab, workspaceHydrated])
 
   const aiPaginationControlsRef = useRef<AIPaginationControls>({
-    resetAIResults: () => {},
-    loadMoreAI: () => {},
-  })
-
-  const registerAIPaginationControls = useCallback((controls: AIPaginationControls) => {
-    aiPaginationControlsRef.current = controls
-  }, [])
-
-  const resetAIResults = useCallback(() => {
-    aiPaginationControlsRef.current.resetAIResults()
-  }, [])
-
-  const loadMoreAI = useCallback(() => {
-    aiPaginationControlsRef.current.loadMoreAI()
-  }, [])
-
+    resetAIResults: () => {},
+    loadMoreAI: () => {},
+  })
+
+  const registerAIPaginationControls = useCallback((controls: AIPaginationControls) => {
+    aiPaginationControlsRef.current = controls
+  }, [])
+
+  const resetAIResults = useCallback(() => {
+    aiPaginationControlsRef.current.resetAIResults()
+  }, [])
+
+  const loadMoreAI = useCallback(() => {
+    aiPaginationControlsRef.current.loadMoreAI()
+  }, [])
+
   const captureSettingsReturnState = useCallback(async (): Promise<NotesUiStateSnapshot> => {
     await flushAndCaptureActiveTab()
-    const selectedNoteForSnapshot = selectedNoteRef.current
-
-    return {
-      selectedNoteId: selectedNoteForSnapshot?.id ?? null,
-      selectedNote: selectedNoteForSnapshot ?? null,
-      isEditing,
-      isSearchPanelOpen,
-      searchQuery,
-      filterByTag,
-    }
+    const selectedNoteForSnapshot = selectedNoteRef.current
+
+    return {
+      selectedNoteId: selectedNoteForSnapshot?.id ?? null,
+      selectedNote: selectedNoteForSnapshot ?? null,
+      isEditing,
+      isSearchPanelOpen,
+      searchQuery,
+      filterByTag,
+    }
   }, [filterByTag, flushAndCaptureActiveTab, isEditing, isSearchPanelOpen, searchQuery, selectedNoteRef])
-
+
   const resolveSettingsReturnNote = useCallback(async (snapshot: NotesUiStateSnapshot) => {
     if (!snapshot.selectedNoteId) return null
 
@@ -745,7 +765,7 @@ export function useNoteAppController() {
     restoreSettingsWorkspaceState,
     setIsSearchPanelOpen,
   ])
-
+
   // -- Main Navigation View --
   const [activeMainView, setActiveMainView] = useState<'notes' | 'tags'>(() => {
     if (typeof window === 'undefined') return 'notes'
@@ -824,53 +844,53 @@ export function useNoteAppController() {
   const handleRenameTag = useCallback(async (oldTag: string, newTag: string) => {
     const updatedNotes = renameTagInNotes(notes, oldTag, newTag)
     const changedNotes = updatedNotes.filter((note, i) => note !== notes[i])
-
-    if (changedNotes.length === 0) return
+
+    if (changedNotes.length === 0) return
 
     try {
       await persistTagChanges(updatedNotes, notes)
       toast.success(`Tag "${oldTag}" renamed to "${newTag}"`)
-    } catch (error) {
-      toast.error(`Failed to rename tag: ${(error as Error).message}`)
-    }
+    } catch (error) {
+      toast.error(`Failed to rename tag: ${(error as Error).message}`)
+    }
   }, [notes, persistTagChanges])
-
-  const handleDeleteTag = useCallback(async (targetTag: string) => {
-    const updatedNotes = deleteTagFromNotes(notes, targetTag)
-    const changedNotes = updatedNotes.filter((note, i) => note !== notes[i])
-
+
+  const handleDeleteTag = useCallback(async (targetTag: string) => {
+    const updatedNotes = deleteTagFromNotes(notes, targetTag)
+    const changedNotes = updatedNotes.filter((note, i) => note !== notes[i])
+
     if (changedNotes.length === 0) return
 
     try {
       await persistTagChanges(updatedNotes, notes)
       toast.success(`Tag "${targetTag}" deleted`)
-    } catch (error) {
-      toast.error(`Failed to delete tag: ${(error as Error).message}`)
-    }
+    } catch (error) {
+      toast.error(`Failed to delete tag: ${(error as Error).message}`)
+    }
   }, [notes, persistTagChanges])
-
-  const handleCleanTags = useCallback(async () => {
-    const updatedNotes = cleanUnusedOrEmptyTagsInNotes(notes)
-    const changedNotes = updatedNotes.filter((note, i) => note !== notes[i])
-
-    if (changedNotes.length === 0) {
-      toast.info("No empty or duplicate tags found to clean")
-      return
+
+  const handleCleanTags = useCallback(async () => {
+    const updatedNotes = cleanUnusedOrEmptyTagsInNotes(notes)
+    const changedNotes = updatedNotes.filter((note, i) => note !== notes[i])
+
+    if (changedNotes.length === 0) {
+      toast.info("No empty or duplicate tags found to clean")
+      return
     }
 
     try {
       await persistTagChanges(updatedNotes, notes)
       toast.success("Cleaned up empty and duplicate tags")
-    } catch (error) {
-      toast.error(`Failed to clean tags: ${(error as Error).message}`)
-    }
+    } catch (error) {
+      toast.error(`Failed to clean tags: ${(error as Error).message}`)
+    }
   }, [notes, persistTagChanges])
-
-  return {
-    registerNoteEditorRef,
-    // State
-    user,
-    loading: authLoadingState,
+
+  return {
+    registerNoteEditorRef,
+    // State
+    user,
+    loading: authLoadingState,
     selectedNote,
     searchQuery,
     isEditing,
@@ -879,62 +899,62 @@ export function useNoteAppController() {
     activeTabId,
     activeTab,
     setIsEditing,
-    isSearchPanelOpen,
-    setIsSearchPanelOpen,
-    saving,
-    filterByTag,
-    deleteDialogOpen,
-    setDeleteDialogOpen,
-    noteToDelete,
-    selectionMode,
-    selectedNoteIds,
-    selectedCount,
-    bulkDeleting,
-    deleteAccountLoading,
-    isOffline,
-    activeMainView,
-    setActiveMainView,
+    isSearchPanelOpen,
+    setIsSearchPanelOpen,
+    saving,
+    filterByTag,
+    deleteDialogOpen,
+    setDeleteDialogOpen,
+    noteToDelete,
+    selectionMode,
+    selectedNoteIds,
+    selectedCount,
+    bulkDeleting,
+    deleteAccountLoading,
+    isOffline,
+    activeMainView,
+    setActiveMainView,
     handleRenameTag,
     handleDeleteTag,
     handleCleanTags,
-
-
-
-    // Data
-
-    notes,
-    notesQuery,
-    ftsSearchResult,
-    ftsData: mergedFtsData,
-    ftsResults: ftsAccumulatedResults,
-    ftsHasMore,
-    ftsLoadingMore,
-    showFTSResults,
-    showTagOnlyResults,
-    tagOnlyResults,
-    tagOnlyTotal,
-    tagOnlyLoading,
-    tagOnlyHasMore,
-    tagOnlyLoadingMore,
-    observerTarget,
-    ftsObserverTarget,
-    totalNotes: notesTotal,
-    notesDisplayed,
-    notesTotal,
-    pendingCount,
-    failedCount,
-    lastSavedAt,
-    autoSaving,
-
-    // Handlers
-    handleSearch,
-    handleTagClick,
-    handleClearTagFilter,
-    handleSignInWithGoogle,
-    handleTestLogin,
-    handleSkipAuth,
-    handleSignOut,
-    handleDeleteAccount,
+
+
+
+    // Data
+
+    notes,
+    notesQuery,
+    ftsSearchResult,
+    ftsData: mergedFtsData,
+    ftsResults: ftsAccumulatedResults,
+    ftsHasMore,
+    ftsLoadingMore,
+    showFTSResults,
+    showTagOnlyResults,
+    tagOnlyResults,
+    tagOnlyTotal,
+    tagOnlyLoading,
+    tagOnlyHasMore,
+    tagOnlyLoadingMore,
+    observerTarget,
+    ftsObserverTarget,
+    totalNotes: notesTotal,
+    notesDisplayed,
+    notesTotal,
+    pendingCount,
+    failedCount,
+    lastSavedAt,
+    autoSaving,
+
+    // Handlers
+    handleSearch,
+    handleTagClick,
+    handleClearTagFilter,
+    handleSignInWithGoogle,
+    handleTestLogin,
+    handleSkipAuth,
+    handleSignOut,
+    handleDeleteAccount,
     handleCreateNote: wrappedHandleCreateNote,
     handleEditNote: wrappedHandleEditNote,
     handleSaveNote: handleSaveNoteWithWorkspace,
@@ -942,36 +962,36 @@ export function useNoteAppController() {
     handleAutoSave: handleAutoSaveWithWorkspace,
     handleDraftChange,
     handleViewSessionChange,
-    handleDeleteNote,
-    confirmDeleteNote,
-    handleRemoveTagFromNote,
-    handleSelectNote: wrappedHandleSelectNote,
+    handleDeleteNote,
+    confirmDeleteNote: confirmDeleteNoteWithWorkspace,
+    handleRemoveTagFromNote,
+    handleSelectNote: wrappedHandleSelectNote,
     handleSearchResultClick: wrappedHandleSearchResultClick,
     addTab: handleAddTab,
     activateTab: handleActivateTab,
     closeTab: handleCloseTab,
     canAddTab,
     workspaceHydrated,
-    enterSelectionMode,
-    exitSelectionMode,
-    toggleNoteSelection,
-    selectAllVisible,
-    clearSelection,
-    loadMoreFts,
-    loadMoreTagOnly,
-    resetFtsResults,
-    loadMoreAI,
-    resetAIResults,
-    registerAIPaginationControls,
-    captureSettingsReturnState,
-    restoreUiState,
-    deleteSelectedNotes,
-    deleteNotesByIds,
-
-    // Helpers
-    invalidateNotes: () => queryClient.invalidateQueries({ queryKey: ['notes'] }),
-  }
-}
-
-export type NoteAppController = ReturnType<typeof useNoteAppController>
-
+    enterSelectionMode,
+    exitSelectionMode,
+    toggleNoteSelection,
+    selectAllVisible,
+    clearSelection,
+    loadMoreFts,
+    loadMoreTagOnly,
+    resetFtsResults,
+    loadMoreAI,
+    resetAIResults,
+    registerAIPaginationControls,
+    captureSettingsReturnState,
+    restoreUiState,
+    deleteSelectedNotes,
+    deleteNotesByIds,
+
+    // Helpers
+    invalidateNotes: () => queryClient.invalidateQueries({ queryKey: ['notes'] }),
+  }
+}
+
+export type NoteAppController = ReturnType<typeof useNoteAppController>
+
diff --git a/ui/web/hooks/useNoteBulkActions.ts b/ui/web/hooks/useNoteBulkActions.ts
index 732fc7ba60f..47a1330d166 100644
--- a/ui/web/hooks/useNoteBulkActions.ts
+++ b/ui/web/hooks/useNoteBulkActions.ts
@@ -6,6 +6,8 @@ import type { useNoteSelection } from './useNoteSelection'
 import type { useDeleteNote } from './useNotesMutations'
 import type { QueryClient } from '@tanstack/react-query'
 
+export type NotesDeletedHandler = (noteIds: string[]) => void
+
 type UseNoteBulkActionsParams = {
   selectedNoteIds: Set<string>
   isOffline: boolean
@@ -16,7 +18,8 @@ type UseNoteBulkActionsParams = {
   deleteNoteMutation: Pick<ReturnType<typeof useDeleteNote>, 'mutateAsync'>
   exitSelectionMode: ReturnType<typeof useNoteSelection>['exitSelectionMode']
   setBulkDeleting: ReturnType<typeof useNoteSelection>['setBulkDeleting']
-  setSelectedNote: ReturnType<typeof useNoteSelection>['setSelectedNote']
+  /** Receives the IDs that were actually deleted (or queued for deletion offline). */
+  onNotesDeleted: NotesDeletedHandler
   queryClient: QueryClient
   notes: NoteViewModel[]
   selectAllVisibleCallback: (source: NoteViewModel[]) => void
@@ -41,7 +44,7 @@ export function useNoteBulkActions({
   deleteNoteMutation,
   exitSelectionMode,
   setBulkDeleting,
-  setSelectedNote,
+  onNotesDeleted,
   queryClient,
   notes,
   selectAllVisibleCallback,
@@ -57,6 +60,7 @@ export function useNoteBulkActions({
 
     try {
       let failed = 0
+      let deletedIds = ids
       if (isOffline) {
         await enqueueBatchAndDrainIfOnline(
           ids.map((id) => ({
@@ -91,6 +95,7 @@ export function useNoteBulkActions({
           ids.map((id) => deleteNoteMutation.mutateAsync({ id, silent: true }))
         )
         failed = results.filter((r) => r.status === 'rejected').length
+        deletedIds = ids.filter((_, index) => results[index].status === 'fulfilled')
         if (failed > 0) {
           toast.error(`Failed to delete ${failed} notes`)
         } else {
@@ -102,7 +107,7 @@ export function useNoteBulkActions({
         queryClient.invalidateQueries({ queryKey: ['notes'] }),
         queryClient.invalidateQueries({ queryKey: ['aiSearch'] }),
       ])
-      setSelectedNote(null)
+      onNotesDeleted(deletedIds)
 
       return { total: ids.length, failed, queuedOffline: isOffline }
     } catch (error) {
diff --git a/ui/web/hooks/useNoteSaveHandlers.ts b/ui/web/hooks/useNoteSaveHandlers.ts
index 12644f45a1c..ba412118bc9 100644
--- a/ui/web/hooks/useNoteSaveHandlers.ts
+++ b/ui/web/hooks/useNoteSaveHandlers.ts
@@ -12,19 +12,19 @@ import type { useNoteSelection } from './useNoteSelection'
 type UseNoteSaveHandlersParams = {
   user: { id: string } | null
   isOffline: boolean
-  offlineCache: Pick<ReturnType<typeof useNoteSync>['offlineCache'], 'saveNote'>
+  offlineCache: Pick<ReturnType<typeof useNoteSync>['offlineCache'], 'saveNote'>
   enqueueMutation: ReturnType<typeof useNoteSync>['enqueueMutation']
-  offlineQueueRef: {
-    current: Pick<ReturnType<typeof useNoteSync>['offlineQueueRef']['current'], 'getQueue'>
-  }
+  offlineQueueRef: {
+    current: Pick<ReturnType<typeof useNoteSync>['offlineQueueRef']['current'], 'getQueue'>
+  }
   setOfflineOverlay: ReturnType<typeof useNoteSync>['setOfflineOverlay']
   setPendingCount: ReturnType<typeof useNoteSync>['setPendingCount']
   setFailedCount: ReturnType<typeof useNoteSync>['setFailedCount']
   setLastSavedAt: ReturnType<typeof useNoteSync>['setLastSavedAt']
-  createNoteMutation: Pick<ReturnType<typeof useCreateNote>, 'mutateAsync'>
-  updateNoteMutation: Pick<ReturnType<typeof useUpdateNote>, 'mutateAsync'>
-  deleteNoteMutation: Pick<ReturnType<typeof useDeleteNote>, 'mutateAsync'>
-  removeTagMutation: Pick<ReturnType<typeof useRemoveTag>, 'mutateAsync'>
+  createNoteMutation: Pick<ReturnType<typeof useCreateNote>, 'mutateAsync'>
+  updateNoteMutation: Pick<ReturnType<typeof useUpdateNote>, 'mutateAsync'>
+  deleteNoteMutation: Pick<ReturnType<typeof useDeleteNote>, 'mutateAsync'>
+  removeTagMutation: Pick<ReturnType<typeof useRemoveTag>, 'mutateAsync'>
   selectedNote: NoteViewModel | null
   setSelectedNote: ReturnType<typeof useNoteSelection>['setSelectedNote']
   setIsEditing: ReturnType<typeof useNoteSelection>['setIsEditing']
@@ -127,7 +127,7 @@ export function useNoteSaveHandlers({
     return cached
   }, [offlineCache, setOfflineOverlay, enqueueMutation, setPendingCount])
 
-  const executeAutoSaveUpdateNote = useCallback(async (
+  const executeAutoSaveUpdateNote = useCallback(async (
     targetId: string,
     title: string,
     description: string,
@@ -146,26 +146,26 @@ export function useNoteSaveHandlers({
       } as NoteViewModel
     })
     await executeOfflineWrite({ operation: 'update', noteId: targetId, payload: partialPayload, clientUpdatedAt })
-  }, [syncSelectedNote, executeOfflineWrite])
-
-  const persistOfflineNoteUpdates = useCallback(async (updatedNotes: NoteViewModel[]) => {
-    const clientUpdatedAt = new Date().toISOString()
-
-    await Promise.all(updatedNotes.map((note) => executeOfflineWrite({
-      operation: 'update',
-      noteId: note.id,
-      payload: {
-        title: note.title,
-        description: note.description,
-        tags: note.tags,
-      },
-      clientUpdatedAt,
-    })))
-
-    const queue = await offlineQueueRef.current.getQueue()
-    setPendingCount(queue.filter((item) => item.status === 'pending').length)
-    setFailedCount(queue.filter((item) => item.status === 'failed').length)
-  }, [executeOfflineWrite, offlineQueueRef, setFailedCount, setPendingCount])
+  }, [syncSelectedNote, executeOfflineWrite])
+
+  const persistOfflineNoteUpdates = useCallback(async (updatedNotes: NoteViewModel[]) => {
+    const clientUpdatedAt = new Date().toISOString()
+
+    await Promise.all(updatedNotes.map((note) => executeOfflineWrite({
+      operation: 'update',
+      noteId: note.id,
+      payload: {
+        title: note.title,
+        description: note.description,
+        tags: note.tags,
+      },
+      clientUpdatedAt,
+    })))
+
+    const queue = await offlineQueueRef.current.getQueue()
+    setPendingCount(queue.filter((item) => item.status === 'pending').length)
+    setFailedCount(queue.filter((item) => item.status === 'failed').length)
+  }, [executeOfflineWrite, offlineQueueRef, setFailedCount, setPendingCount])
 
   const handleAutoSave = useCallback(async (data: { noteId?: string; title?: string; description?: string; tags?: string }) => {
     if (!user) return
@@ -360,12 +360,12 @@ export function useNoteSaveHandlers({
       if (savedNote) {
         syncSelectedNote(savedNote)
       }
-    } catch (error) {
-      console.error('Error saving note:', error)
-      throw error
-    } finally {
-      setSaving(false)
-    }
+    } catch (error) {
+      console.error('Error saving note:', error)
+      throw error
+    } finally {
+      setSaving(false)
+    }
   }
 
   const handleReadNote = async (data: { title: string; description: string; tags: string }) => {
@@ -376,8 +376,8 @@ export function useNoteSaveHandlers({
     setIsEditing(false)
   }
 
-  const confirmDeleteNote = async () => {
-    if (!noteToDelete) return
+  const confirmDeleteNote = async (): Promise<boolean> => {
+    if (!noteToDelete) return false
 
     try {
       if (isOffline) {
@@ -413,8 +413,10 @@ export function useNoteSaveHandlers({
         syncSelectedNote(null)
         setIsEditing(false)
       }
+      return true
     } catch (error) {
       console.error('Error deleting note:', error)
+      return false
     } finally {
       setDeleteDialogOpen(false)
       setNoteToDelete(null)
@@ -446,10 +448,10 @@ export function useNoteSaveHandlers({
     autoSaving,
     handleAutoSave,
     handleSaveNote,
-    handleReadNote,
-    confirmDeleteNote,
-    handleRemoveTagFromNote,
-    persistOfflineNoteUpdates,
-  }
-}
+    handleReadNote,
+    confirmDeleteNote,
+    handleRemoveTagFromNote,
+    persistOfflineNoteUpdates,
+  }
+}
 
diff --git a/ui/web/hooks/useNoteWorkspaceTabs.ts b/ui/web/hooks/useNoteWorkspaceTabs.ts
index 54049bf13fb..50bd4ca465f 100644
--- a/ui/web/hooks/useNoteWorkspaceTabs.ts
+++ b/ui/web/hooks/useNoteWorkspaceTabs.ts
@@ -8,6 +8,7 @@ import {
   findWorkspaceTabByNoteId,
   getActiveWorkspaceTab,
   openNoteInWorkspace,
+  resetWorkspaceTabsForNotes,
   updateWorkspaceTab,
   type NoteWorkspaceTabPatch,
 } from '@core/services/noteWorkspaceTabs'
@@ -55,6 +56,10 @@ export function useNoteWorkspaceTabs() {
     setState((current) => closeWorkspaceTab(current, tabId))
   }, [])
 
+  const resetTabsForNotes = useCallback((noteIds: readonly string[]) => {
+    setState((current) => resetWorkspaceTabsForNotes(current, noteIds))
+  }, [])
+
   const activeTab = useMemo(() => getActiveWorkspaceTab(state), [state])
   const findTabByNoteId = useCallback((noteId: string | null | undefined) => (
     findWorkspaceTabByNoteId(state, noteId)
@@ -70,6 +75,7 @@ export function useNoteWorkspaceTabs() {
     openNote,
     updateTab,
     closeTab,
+    resetTabsForNotes,
     findTabByNoteId,
     canAddTab,
   }
diff --git a/ui/web/tests/unit/components/noteView.test.tsx b/ui/web/tests/unit/components/noteView.test.tsx
index ef98c1e6356..2cb4a595819 100644
--- a/ui/web/tests/unit/components/noteView.test.tsx
+++ b/ui/web/tests/unit/components/noteView.test.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
 import { NoteView } from '@ui/web/components/features/notes/NoteView'
 import { toast } from 'sonner'
 import { copyNotePayloadToClipboard } from '@ui/web/lib/noteClipboard'
@@ -109,21 +109,49 @@ describe('NoteView copy action', () => {
     })
   })
 
-  it('restores the saved scroll position and reports later scrolling', () => {
+  it('restores the saved scroll position and reports later scrolling after the debounce delay', () => {
+    jest.useFakeTimers()
     const requestAnimationFrame = jest.spyOn(window, 'requestAnimationFrame').mockImplementation((callback) => {
       callback(0)
       return 1
     })
-    const onViewSessionChange = jest.fn()
-    const { container } = renderNoteView({ initialScrollTop: 48, onViewSessionChange })
-    const content = container.querySelector('.overflow-y-auto') as HTMLDivElement
+    try {
+      const onViewSessionChange = jest.fn()
+      const { container } = renderNoteView({ initialScrollTop: 48, onViewSessionChange })
+      const content = container.querySelector('.overflow-y-auto') as HTMLDivElement
+
+      expect(requestAnimationFrame).toHaveBeenCalled()
+      expect(content.scrollTop).toBe(48)
+
+      fireEvent.scroll(content, { target: { scrollTop: 60 } })
+      fireEvent.scroll(content, { target: { scrollTop: 93 } })
+      // Scroll updates are debounced: nothing is reported per event.
+      expect(onViewSessionChange).not.toHaveBeenCalled()
+
+      act(() => {
+        jest.advanceTimersByTime(250)
+      })
+      expect(onViewSessionChange).toHaveBeenCalledTimes(1)
+      expect(onViewSessionChange).toHaveBeenCalledWith({ scrollTop: 93 })
+    } finally {
+      requestAnimationFrame.mockRestore()
+      jest.useRealTimers()
+    }
+  })
 
-    expect(requestAnimationFrame).toHaveBeenCalled()
-    expect(content.scrollTop).toBe(48)
+  it('flushes the latest scroll position when the reading view unmounts', () => {
+    jest.useFakeTimers()
+    try {
+      const onViewSessionChange = jest.fn()
+      const { container, unmount } = renderNoteView({ onViewSessionChange })
+      const content = container.querySelector('.overflow-y-auto') as HTMLDivElement
 
-    fireEvent.scroll(content, { target: { scrollTop: 93 } })
-    expect(onViewSessionChange).toHaveBeenCalledWith({ scrollTop: 93 })
+      fireEvent.scroll(content, { target: { scrollTop: 77 } })
+      unmount()
 
-    requestAnimationFrame.mockRestore()
+      expect(onViewSessionChange).toHaveBeenCalledWith({ scrollTop: 77 })
+    } finally {
+      jest.useRealTimers()
+    }
   })
 })
diff --git a/ui/web/tests/unit/hooks/useDebouncedSessionCallback.test.tsx b/ui/web/tests/unit/hooks/useDebouncedSessionCallback.test.tsx
new file mode 100644
index 00000000000..98eeead34f2
--- /dev/null
+++ b/ui/web/tests/unit/hooks/useDebouncedSessionCallback.test.tsx
@@ -0,0 +1,93 @@
+import { act, renderHook } from '@testing-library/react'
+import { useDebouncedSessionCallback } from '@ui/web/hooks/useDebouncedSessionCallback'
+
+describe('useDebouncedSessionCallback', () => {
+  beforeEach(() => {
+    jest.useFakeTimers()
+  })
+
+  afterEach(() => {
+    jest.useRealTimers()
+  })
+
+  it('delivers only the latest scheduled value after the delay', () => {
+    const callback = jest.fn()
+    const { result } = renderHook(() => useDebouncedSessionCallback(callback, 250, 'cancel'))
+
+    act(() => {
+      result.current.schedule(1)
+      result.current.schedule(2)
+      result.current.schedule(3)
+    })
+    expect(callback).not.toHaveBeenCalled()
+
+    act(() => {
+      jest.advanceTimersByTime(250)
+    })
+    expect(callback).toHaveBeenCalledTimes(1)
+    expect(callback).toHaveBeenCalledWith(3)
+  })
+
+  it('always uses the latest callback reference', () => {
+    const first = jest.fn()
+    const second = jest.fn()
+    const { result, rerender } = renderHook(
+      ({ callback }) => useDebouncedSessionCallback(callback, 250, 'cancel'),
+      { initialProps: { callback: first } },
+    )
+
+    act(() => result.current.schedule('value'))
+    rerender({ callback: second })
+    act(() => {
+      jest.advanceTimersByTime(250)
+    })
+
+    expect(first).not.toHaveBeenCalled()
+    expect(second).toHaveBeenCalledWith('value')
+  })
+
+  it('cancel drops the pending value', () => {
+    const callback = jest.fn()
+    const { result } = renderHook(() => useDebouncedSessionCallback(callback, 250, 'cancel'))
+
+    act(() => {
+      result.current.schedule('value')
+      result.current.cancel()
+      jest.advanceTimersByTime(250)
+    })
+
+    expect(callback).not.toHaveBeenCalled()
+  })
+
+  it('flushes a pending value on unmount when configured to flush', () => {
+    const callback = jest.fn()
+    const { result, unmount } = renderHook(() => useDebouncedSessionCallback(callback, 250, 'flush'))
+
+    act(() => result.current.schedule('pending'))
+    unmount()
+
+    expect(callback).toHaveBeenCalledWith('pending')
+  })
+
+  it('drops a pending value on unmount when configured to cancel', () => {
+    const callback = jest.fn()
+    const { result, unmount } = renderHook(() => useDebouncedSessionCallback(callback, 250, 'cancel'))
+
+    act(() => result.current.schedule('pending'))
+    unmount()
+    act(() => {
+      jest.advanceTimersByTime(250)
+    })
+
+    expect(callback).not.toHaveBeenCalled()
+  })
+
+  it('does nothing when flushing without a pending value', () => {
+    const callback = jest.fn()
+    const { result } = renderHook(() => useDebouncedSessionCallback(callback, 250, 'flush'))
+
+    act(() => result.current.flush())
+
+    expect(callback).not.toHaveBeenCalled()
+  })
+})
diff --git a/ui/web/tests/unit/hooks/useNoteAppControllerAdditional.test.tsx b/ui/web/tests/unit/hooks/useNoteAppControllerAdditional.test.tsx
index 4f97338a003..a685b5e6e27 100644
--- a/ui/web/tests/unit/hooks/useNoteAppControllerAdditional.test.tsx
+++ b/ui/web/tests/unit/hooks/useNoteAppControllerAdditional.test.tsx
@@ -18,6 +18,7 @@ let mockIsOffline = false
 let mockOfflineOverlay: Array<{ id: string; status: string }> = []
 let mockNotes: NoteViewModel[] = []
 let mockResolvedSearchResult: NoteViewModel | null = null
+let mockNoteToDelete: NoteViewModel | null = null
 
 const mockGetNoteStatus = jest.fn()
 const mockGetNote = jest.fn()
@@ -39,6 +40,7 @@ const mockClearActiveSettingsNoteReturnPath = jest.fn()
 const mockResolveSearchResult = jest.fn(() => mockResolvedSearchResult)
 const mockUpdateNoteMutation = jest.fn()
 const mockPersistOfflineNoteUpdates = jest.fn().mockResolvedValue(undefined)
+const mockConfirmDeleteNote = jest.fn()
 
 jest.mock('sonner', () => ({ toast: { error: jest.fn(), info: jest.fn(), success: jest.fn() } }))
 jest.mock('@ui/web/providers/SupabaseProvider', () => ({
@@ -81,7 +83,7 @@ jest.mock('@ui/web/hooks/useNoteSelection', () => ({
     setIsEditing: mockSetIsEditing,
     deleteDialogOpen: false,
     setDeleteDialogOpen: jest.fn(),
-    noteToDelete: null,
+    noteToDelete: mockNoteToDelete,
     setNoteToDelete: jest.fn(),
     selectedNoteIds: new Set<string>(),
     selectionMode: false,
@@ -152,7 +154,7 @@ jest.mock('@ui/web/hooks/useNoteSaveHandlers', () => ({
     handleAutoSave: mockHandleAutoSave,
     handleSaveNote: mockHandleSaveNote,
     handleReadNote: mockHandleReadNote,
-    confirmDeleteNote: jest.fn(),
+    confirmDeleteNote: mockConfirmDeleteNote,
     handleRemoveTagFromNote: jest.fn(),
     persistOfflineNoteUpdates: mockPersistOfflineNoteUpdates,
   }),
@@ -234,9 +236,11 @@ describe('useNoteAppController additional observable behavior', () => {
     mockOfflineOverlay = []
     mockNotes = []
     mockResolvedSearchResult = null
+    mockNoteToDelete = null
     mockHandleAutoSave.mockReset().mockResolvedValue(undefined)
     mockHandleSaveNote.mockReset().mockResolvedValue(undefined)
     mockHandleReadNote.mockReset().mockResolvedValue(undefined)
+    mockConfirmDeleteNote.mockReset().mockResolvedValue(true)
     mockUpdateNoteMutation.mockReset()
     mockUpdateNoteMutation.mockResolvedValue(undefined)
   })
@@ -460,6 +464,75 @@ describe('useNoteAppController additional observable behavior', () => {
     expect(mockHandleSelectNote).toHaveBeenCalledWith(expect.objectContaining({ id: 'second' }))
   })
 
+  it('aborts a note selection when flushing the outgoing editor fails', async () => {
+    const target = makeNote({ id: 'target' })
+    mockGetNoteStatus.mockResolvedValue({ status: 'found', note: target })
+    const { result } = setup()
+    await waitFor(() => expect(result.current.workspaceHydrated).toBe(true))
+
+    const flushPendingSave = jest.fn().mockRejectedValue(new Error('autosave failed'))
+    act(() => result.current.registerNoteEditorRef({ current: { flushPendingSave } } as never))
+
+    await act(async () => {
+      await result.current.handleSelectNote(target)
+    })
+
+    expect(flushPendingSave).toHaveBeenCalledTimes(1)
+    expect(mockGetNoteStatus).not.toHaveBeenCalled()
+    expect(mockHandleSelectNote).not.toHaveBeenCalled()
+    expect(result.current.activeTab.noteId).toBeNull()
+  })
+
+  it('resets every workspace tab that shows a deleted note', async () => {
+    const first = makeNote({ id: 'first', title: 'First' })
+    const second = makeNote({ id: 'second', title: 'Second' })
+    mockNoteToDelete = first
+    mockGetNoteStatus.mockImplementation((id: string) => Promise.resolve({
+      status: 'found',
+      note: id === 'first' ? first : second,
+    }))
+    const { result } = setup()
+    await waitFor(() => expect(result.current.workspaceHydrated).toBe(true))
+
+    await act(async () => {
+      await result.current.handleSelectNote(first)
+    })
+    await act(async () => {
+      await result.current.addTab()
+    })
+    await act(async () => {
+      await result.current.handleSelectNote(second)
+    })
+    expect(result.current.tabs.map((tab) => tab.noteId)).toEqual(['first', 'second'])
+
+    await act(async () => {
+      await result.current.confirmDeleteNote()
+    })
+
+    expect(mockConfirmDeleteNote).toHaveBeenCalledTimes(1)
+    expect(result.current.tabs).toHaveLength(2)
+    expect(result.current.tabs.map((tab) => tab.noteId)).toEqual([null, 'second'])
+    expect(result.current.tabs[0].draft).toEqual({ title: '', description: '', tags: '' })
+  })
+
+  it('keeps workspace tabs untouched when the delete fails', async () => {
+    const first = makeNote({ id: 'first', title: 'First' })
+    mockNoteToDelete = first
+    mockConfirmDeleteNote.mockResolvedValue(false)
+    mockGetNoteStatus.mockResolvedValue({ status: 'found', note: first })
+    const { result } = setup()
+    await waitFor(() => expect(result.current.workspaceHydrated).toBe(true))
+
+    await act(async () => {
+      await result.current.handleSelectNote(first)
+    })
+    await act(async () => {
+      await result.current.confirmDeleteNote()
+    })
+
+    expect(result.current.tabs.map((tab) => tab.noteId)).toEqual(['first'])
+  })
+
   it('registers, resets, and loads AI pagination controls', () => {
     const { result } = setup()
     const resetAIResults = jest.fn()
@@ -626,4 +699,4 @@ describe('useNoteAppController additional observable behavior', () => {
     expect(toast.success).toHaveBeenCalledWith('Tag "old" renamed to "new"')
   })
 })
-
+
diff --git a/ui/web/tests/unit/hooks/useNoteBulkActions.test.tsx b/ui/web/tests/unit/hooks/useNoteBulkActions.test.tsx
index 8b60139d96e..ceca79f197a 100644
--- a/ui/web/tests/unit/hooks/useNoteBulkActions.test.tsx
+++ b/ui/web/tests/unit/hooks/useNoteBulkActions.test.tsx
@@ -32,7 +32,7 @@ const makeParams = (overrides: Partial<BulkActionParams> = {}) => {
     deleteNoteMutation: { mutateAsync: jest.fn().mockResolvedValue(undefined) },
     exitSelectionMode: jest.fn(),
     setBulkDeleting: jest.fn(),
-    setSelectedNote: jest.fn(),
+    onNotesDeleted: jest.fn(),
     queryClient,
     notes: [note('visible')],
     selectAllVisibleCallback: jest.fn(),
@@ -80,7 +80,7 @@ describe('useNoteBulkActions', () => {
     expect(toast.success).toHaveBeenCalledWith('Deleted 2 notes')
     expect(invalidate).toHaveBeenCalledWith({ queryKey: ['notes'] })
     expect(invalidate).toHaveBeenCalledWith({ queryKey: ['aiSearch'] })
-    expect(params.setSelectedNote).toHaveBeenCalledWith(null)
+    expect(params.onNotesDeleted).toHaveBeenCalledWith(['one', 'two'])
   })
 
   it('reports partial online failures but still refreshes the local queries', async () => {
@@ -98,7 +98,7 @@ describe('useNoteBulkActions', () => {
     })
     expect(toast.error).toHaveBeenCalledWith('Failed to delete 1 notes')
     expect(invalidate).toHaveBeenCalledTimes(2)
-    expect(params.setSelectedNote).toHaveBeenCalledWith(null)
+    expect(params.onNotesDeleted).toHaveBeenCalledWith(['good'])
   })
 
   it('queues offline deletions, persists optimistic tombstones, and updates overlay state', async () => {
@@ -132,6 +132,7 @@ describe('useNoteBulkActions', () => {
     expect(applyOverlay([]).map((entry) => entry.id)).toEqual(['one', 'two'])
     expect(setPendingCount).toHaveBeenCalledWith(expect.any(Function))
     expect(toast.success).toHaveBeenCalledWith('Queued deletion of 2 notes (offline)')
+    expect(params.onNotesDeleted).toHaveBeenCalledWith(['one', 'two'])
   })
 
   it('manages the bulk deleting transition and exits selection mode only on success', async () => {

From 9f0c9ed1cbc772d56e2e744a521191c4955790eb Mon Sep 17 00:00:00 2001
From: denyskoreiba <denys.koreiba@flowlix.eu>
Date: Thu, 20 Aug 2026 20:34:55 +0200
Subject: [PATCH 13/23] fix(notes-tabs): stop draft echo from cancelling
 autosave

Manual preview verification showed typing never reached Supabase: the
live tab draft was wired into NoteEditor's initial* props, so the
autosave reconciliation acknowledged each keystroke echo as an external
refresh, rebased the debouncer baseline, and dropped the pending save
for new and existing notes alike.

NotesShell now freezes the editor's seed draft per session
(tab + note + mode); live draft updates keep feeding tab indicators and
capture but no longer masquerade as external snapshots. Add a
NotesShellAutoSaveEcho component spec that reproduces the echo loop with
a real editor and fails without the fix.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../notes/NotesShellAutoSaveEcho.cy.tsx       | 172 +++++++++++
 .../design/2026-08-01-feature-notes-tabs.md   |  11 +
 .../planning/2026-08-01-feature-notes-tabs.md |   1 +
 .../testing/2026-08-01-feature-notes-tabs.md  |   5 +-
 .../components/features/notes/NotesShell.tsx  | 271 +++++++++---------
 5 files changed, 328 insertions(+), 132 deletions(-)
 create mode 100644 cypress/component/features/notes/NotesShellAutoSaveEcho.cy.tsx

diff --git a/cypress/component/features/notes/NotesShellAutoSaveEcho.cy.tsx b/cypress/component/features/notes/NotesShellAutoSaveEcho.cy.tsx
new file mode 100644
index 00000000000..a595f35fb72
--- /dev/null
+++ b/cypress/component/features/notes/NotesShellAutoSaveEcho.cy.tsx
@@ -0,0 +1,172 @@
+import React from 'react'
+import type { SupabaseClient, User } from '@supabase/supabase-js'
+
+import { NotesShell } from '../../../../ui/web/components/features/notes/NotesShell'
+import type { NoteDraftSnapshot } from '../../../../core/services/noteWorkspaceTabs'
+import type { NoteViewModel } from '../../../../core/types/domain'
+import { SupabaseTestProvider } from '../../../../ui/web/providers/SupabaseProvider'
+import {
+  useNotesShellTestState,
+  type FakeController,
+} from './notesShellTestUtils'
+
+/**
+ * Regression guard: the real controller echoes every keystroke back into
+ * `activeTab.draft`, which NotesShell forwards to the editor. If that live
+ * echo reaches the editor's initial* props, the autosave reconciliation
+ * treats the user's own typing as an external refresh and silently cancels
+ * the pending autosave. This harness reproduces the echo loop and asserts
+ * the debounced autosave still fires.
+ */
+const buildController = () => {
+  const supabase = {
+    functions: {
+      invoke: cy.stub().resolves({
+        data: { configured: false, integration: null },
+        error: null,
+      }),
+    },
+  } as unknown as SupabaseClient
+
+  const user: User = {
+    id: 'test-user',
+    app_metadata: {},
+    user_metadata: {},
+    aud: 'authenticated',
+    created_at: new Date().toISOString(),
+  } as unknown as User
+
+  const baseNotes: NoteViewModel[] = [
+    {
+      id: 'note-1',
+      title: 'Note 1',
+      description: '',
+      tags: [],
+      created_at: '2024-01-01T00:00:00Z',
+      updated_at: '2024-01-01T00:00:00Z',
+      user_id: user.id,
+    },
+  ]
+
+  const handleAutoSave = cy.stub().as('autoSave').resolves(undefined)
+
+  const Harness = () => {
+    const {
+      notes,
+      isEditing,
+      setIsEditing,
+      registerNoteEditorRef,
+      selectedNote,
+      activeTab: baseTab,
+      handleSaveNote,
+      handleReadNote,
+      handleEditNote,
+      handleSelectNote,
+    } = useNotesShellTestState(baseNotes)
+
+    // Echo local typing back into the workspace tab exactly like
+    // useNoteAppController.handleDraftChange does.
+    const [draft, setDraft] = React.useState<NoteDraftSnapshot | null>(null)
+    const activeTab = React.useMemo(() => ({
+      ...baseTab,
+      draft: draft ?? baseTab.draft,
+      saveState: draft ? ('dirty' as const) : baseTab.saveState,
+    }), [baseTab, draft])
+
+    const controller: FakeController = {
+      registerNoteEditorRef,
+      user,
+      notes,
+      notesQuery: {
+        isLoading: false,
+        fetchNextPage: () => {},
+        hasNextPage: false,
+        isFetchingNextPage: false,
+      },
+      notesDisplayed: notes.length,
+      notesTotal: notes.length,
+
+      selectionMode: false,
+      selectedCount: 0,
+      bulkDeleting: false,
+      enterSelectionMode: () => {},
+      exitSelectionMode: () => {},
+      selectAllVisible: () => {},
+      clearSelection: () => {},
+      deleteSelectedNotes: async () => {},
+      selectedNoteIds: new Set<string>(),
+      toggleNoteSelection: () => {},
+
+      filterByTag: null,
+      searchQuery: '',
+      handleSearch: () => {},
+      handleClearTagFilter: () => {},
+      handleCreateNote: () => setIsEditing(true),
+      handleSignOut: async () => {},
+      handleDeleteAccount: async () => {},
+      deleteAccountLoading: false,
+      invalidateNotes: async () => {},
+
+      pendingCount: 0,
+      failedCount: 0,
+      isOffline: false,
+
+      selectedNote,
+      isEditing,
+      tabs: [activeTab],
+      activeTabId: activeTab.id,
+      activeTab,
+      addTab: () => {},
+      activateTab: () => {},
+      closeTab: () => {},
+      handleDraftChange: (nextDraft: NoteDraftSnapshot) => setDraft(nextDraft),
+      handleViewSessionChange: () => {},
+      saving: false,
+      autoSaving: false,
+      lastSavedAt: null,
+
+      handleSelectNote,
+      handleSearchResultClick: async () => {},
+      handleTagClick: () => {},
+      handleEditNote,
+      handleSaveNote,
+      handleReadNote,
+      handleAutoSave,
+      handleDeleteNote: () => {},
+      handleRemoveTagFromNote: async () => {},
+
+      ftsSearchResult: { isLoading: false },
+      showFTSResults: false,
+      ftsData: { total: 0, executionTime: 1, results: [] },
+      ftsHasMore: false,
+      ftsLoadingMore: false,
+      loadMoreFts: () => {},
+      ftsObserverTarget: null,
+      ftsResults: [],
+    }
+
+    return (
+      <SupabaseTestProvider supabase={supabase}>
+        <NotesShell controller={controller as unknown as import('../../../../ui/web/hooks/useNoteAppController').NoteAppController} />
+      </SupabaseTestProvider>
+    )
+  }
+
+  return Harness
+}
+
+describe('NotesShell: autosave with live workspace draft echo', () => {
+  it('fires the debounced autosave even while typing echoes into the active tab draft', () => {
+    const typed = 'Echo safe text'
+    const Harness = buildController()
+
+    cy.mount(<Harness />)
+
+    cy.get('[data-cy="editor-content"]').click().type(typed)
+
+    // The 500ms debounced autosave must survive the draft echo re-renders.
+    cy.get('@autoSave', { timeout: 4000 }).should('have.been.called')
+    cy.get('@autoSave').should('have.been.calledWithMatch', Cypress.sinon.match((payload: { description?: string }) =>
+      Boolean(payload?.description?.includes(typed))))
+  })
+})
diff --git a/docs/ai/design/2026-08-01-feature-notes-tabs.md b/docs/ai/design/2026-08-01-feature-notes-tabs.md
index 5caaf18c83e..e6d2a1d7d24 100644
--- a/docs/ai/design/2026-08-01-feature-notes-tabs.md
+++ b/docs/ai/design/2026-08-01-feature-notes-tabs.md
@@ -173,6 +173,17 @@ preserved; only affected tabs change. This prevents a stale tab from rendering
 a deleted note or re-creating it through autosave, and bulk delete no longer
 clears the active tab when its note survived.
 
+### The editor's initial snapshot is frozen per session
+
+`NoteEditor` reconciles its `initial*` props as an external (server-backed)
+snapshot. The live tab draft echoes every keystroke back through
+`handleDraftChange`, so `NotesShell` freezes the draft passed to the editor per
+editor session (tab + note + mode). Feeding the live draft in directly makes
+the autosave reconciliation acknowledge the user's own typing as an external
+refresh and silently cancel every pending autosave — nothing is ever written
+to Supabase until a manual Save. Guarded by the `NotesShellAutoSaveEcho`
+component spec, which reproduces the echo loop with a real editor.
+
 ### Session updates are debounced
 
 Typing and scrolling notify workspace state through
diff --git a/docs/ai/planning/2026-08-01-feature-notes-tabs.md b/docs/ai/planning/2026-08-01-feature-notes-tabs.md
index 0e550e8658d..a86e01048fa 100644
--- a/docs/ai/planning/2026-08-01-feature-notes-tabs.md
+++ b/docs/ai/planning/2026-08-01-feature-notes-tabs.md
@@ -98,4 +98,5 @@ These are engineering estimates only; autosave/editor lifecycle and native navig
   3. Deleting a note (single or bulk) left it alive in other workspace tabs where typing could re-create it, and bulk delete blanked the active tab even when its note survived; `resetWorkspaceTabsForNotes` now resets exactly the affected tabs.
   4. Entering edit mode wiped a tab's dirty/error save marker without saving; the transition now changes only the mode.
   Codacy findings (optional chains, `void` operator) resolved; Jest/ESLint configs now ignore in-repo agent worktrees under `.claude/worktrees/`.
+- Manual preview verification (2026-08-20) found a release blocker the suites missed: wiring the live tab draft into the editor's `initial*` props made autosave reconciliation treat local typing as an external refresh and cancel every debounced autosave (new and existing notes; zero Supabase writes until manual Save). Fixed by freezing the editor's session draft in `NotesShell` per tab/note/mode; regression-guarded by `NotesShellAutoSaveEcho.cy.tsx`, which fails without the fix. Existing exit-save specs passed because their fake controller used a no-op `handleDraftChange` and never echoed drafts.
 - Native mobile (M4) remains a separately scoped follow-up: expose the shared reducer through the native store/adapter, route `useOpenNote` and note routes through it, and add a native session UI. Desktop Playwright E2E flows are a follow-up in the `koreyba/EverFreeNote-e2e` repository.
diff --git a/docs/ai/testing/2026-08-01-feature-notes-tabs.md b/docs/ai/testing/2026-08-01-feature-notes-tabs.md
index f258974db61..ca14918c884 100644
--- a/docs/ai/testing/2026-08-01-feature-notes-tabs.md
+++ b/docs/ai/testing/2026-08-01-feature-notes-tabs.md
@@ -99,8 +99,9 @@ Recorded Evidence).
 - `npx eslint . --max-warnings=0`: passed.
 - `npm run test:unit`: 183 suites, 1,441 tests passed — includes new coverage for `resetWorkspaceTabsForNotes`, `useDebouncedSessionCallback`, flush-failure transition abort, delete-driven tab reset, and `onNotesDeleted` bulk reporting.
 - `npm run test:integration:core`: 2 suites, 20 tests passed.
-- Focused Cypress component run (`NotesTabStrip`, `MobileLayout`, `NotesShellFtsExitSave`, `NotesShellLikeExitSave`, `NotesShellOpenInContext`, `useNoteBulkActionsDirect`): 20/20 passed in Electron.
-- Manual verification against the PR preview deployment (test-auth user): desktop tab add/replace/dedupe/switch/close, reload restore, mobile compact menu.
+- Focused Cypress component run (`NotesTabStrip`, `MobileLayout`, `NotesShellFtsExitSave`, `NotesShellLikeExitSave`, `NotesShellOpenInContext`, `NotesShellAutoSaveEcho`, `useNoteBulkActionsDirect`): 21/21 passed in Electron.
+- Manual verification against the PR preview deployment (test-auth user): desktop tab add/replace/dedupe/switch/close, draft/mode restore across switches, reload restore, mobile compact menu.
+- The manual preview pass caught an autosave-killing draft-echo defect that the suites missed (fake controllers used a no-op `handleDraftChange`): typing produced zero Supabase writes and the dirty marker never cleared. Fixed in `NotesShell` (frozen session draft) and regression-guarded by `NotesShellAutoSaveEcho.cy.tsx`, verified to fail without the fix.
 
 ## Performance Testing
 
diff --git a/ui/web/components/features/notes/NotesShell.tsx b/ui/web/components/features/notes/NotesShell.tsx
index c5123ef80eb..d6fdd9c97f2 100644
--- a/ui/web/components/features/notes/NotesShell.tsx
+++ b/ui/web/components/features/notes/NotesShell.tsx
@@ -31,13 +31,13 @@ import { useSupabase } from "@ui/web/providers/SupabaseProvider"
 import { WordPressSettingsService } from "@core/services/wordpressSettings"
 import { ApiKeysSettingsService } from "@core/services/apiKeysSettings"
 import { saveSettingsReturnState } from "@ui/web/lib/settingsNavigationState"
-import { consumeActiveSettingsNoteReturnPath } from "@ui/web/lib/aiIndexNavigationState"
-import { NotesTabStrip } from "@/components/features/notes/NotesTabStrip"
-import { MobileNotesTabMenu } from "@/components/features/notes/MobileNotesTabMenu"
+import { consumeActiveSettingsNoteReturnPath } from "@ui/web/lib/aiIndexNavigationState"
+import { NotesTabStrip } from "@/components/features/notes/NotesTabStrip"
+import { MobileNotesTabMenu } from "@/components/features/notes/MobileNotesTabMenu"
 
 import { NavRail } from "@/components/features/navigation/NavRail"
-import { TagsPage } from "@/components/features/tags/TagsPage"
-import { MAX_NOTE_WORKSPACE_TABS } from "@core/services/noteWorkspaceTabs"
+import { TagsPage } from "@/components/features/tags/TagsPage"
+import { MAX_NOTE_WORKSPACE_TABS } from "@core/services/noteWorkspaceTabs"
 
 type NoteRecord = Note & {
   content?: string | null
@@ -90,24 +90,24 @@ export function NotesShell({ controller }: NotesShellProps) {
     pendingCount,
     failedCount,
     isOffline,
-    selectedNote,
-    isEditing,
-    notePaneVisible,
-    tabs = [],
-    activeTabId = '',
-    addTab,
-    activateTab,
-    closeTab,
-    canAddTab = true,
-    workspaceHydrated = true,
+    selectedNote,
+    isEditing,
+    notePaneVisible,
+    tabs = [],
+    activeTabId = '',
+    addTab,
+    activateTab,
+    closeTab,
+    canAddTab = true,
+    workspaceHydrated = true,
     handleSelectNote,
     isSearchPanelOpen,
     setIsSearchPanelOpen,
-    activeMainView,
-    setActiveMainView,
-    handleRenameTag,
-    handleDeleteTag,
-    notes,
+    activeMainView,
+    setActiveMainView,
+    handleRenameTag,
+    handleDeleteTag,
+    notes,
   } = controller
 
   const refreshWordPressStatus = React.useCallback(async () => {
@@ -158,7 +158,7 @@ export function NotesShell({ controller }: NotesShellProps) {
     await controller.handleEditNote(note)
   }, [controller, supabase])
 
-  const showEditor = notePaneVisible ?? !!(selectedNote || isEditing)
+  const showEditor = notePaneVisible ?? !!(selectedNote || isEditing)
   const handleOpenSearchPanel = React.useCallback(() => {
     if (activeMainView !== "notes") {
       setActiveMainView("notes")
@@ -200,10 +200,10 @@ export function NotesShell({ controller }: NotesShellProps) {
     })
   }, [handleSelectNote, router])
 
-  const handleSelectTagFromTagsPage = React.useCallback((tag: string) => {
-    controller.handleTagClick(tag).catch(() => undefined)
-    setActiveMainView("notes")
-  }, [controller, setActiveMainView])
+  const handleSelectTagFromTagsPage = React.useCallback((tag: string) => {
+    controller.handleTagClick(tag).catch(() => undefined)
+    setActiveMainView("notes")
+  }, [controller, setActiveMainView])
 
   return (
     <div
@@ -233,86 +233,86 @@ export function NotesShell({ controller }: NotesShellProps) {
             onDeleteTag={handleDeleteTag}
           />
         </main>
-      ) : (
-        <div className="flex min-h-0 flex-1 flex-col">
-          <MobileNotesTabMenu
-            tabs={tabs}
-            activeTabId={activeTabId}
-            addTabDisabled={!workspaceHydrated || !canAddTab}
-            addTabCapacityPending={!workspaceHydrated}
-            maximumTabCount={MAX_NOTE_WORKSPACE_TABS}
-            onAddTab={() => void addTab?.()}
-            onActivateTab={(tabId) => void activateTab?.(tabId)}
-            onCloseTab={(tabId) => void closeTab?.(tabId)}
-          />
-          <div className="flex min-h-0 flex-1">
-            <Sidebar
-              user={user!}
-              filterByTag={filterByTag}
-              notesDisplayed={notesDisplayed}
-              notesTotal={notesTotal}
-              pendingCount={pendingCount}
-              failedCount={failedCount}
-              isOffline={isOffline}
-              selectionMode={selectionMode}
-              selectedCount={selectedCount}
-              bulkDeleting={bulkDeleting}
-              onExitSelectionMode={exitSelectionMode}
-              onSelectAll={selectAllVisible}
-              onBulkDelete={deleteSelectedNotes}
-              onClearTagFilter={handleClearTagFilter}
-              onOpenSettings={() => void handleOpenSettings()}
-              onCreateNote={handleCreateNote}
-              onSignOut={handleSignOut}
-              onOpenSearch={handleOpenSearchPanel}
-              className={cn((showEditor || isSearchPanelOpen) ? "hidden md:flex" : "w-full md:w-80")}
-              data-testid="sidebar-container"
-            >
-              <ListPane controller={controller} />
-            </Sidebar>
-
-            {isSearchPanelOpen && (
-              <SearchResultsPanel
-                ref={searchPanelRef}
-                controller={controller}
-                hasGeminiApiKey={hasGeminiApiKey}
-                onOpenInContext={handleOpenInContext}
-                onClose={() => setIsSearchPanelOpen(false)}
-                className={cn(showEditor ? "hidden md:flex" : "w-full min-w-[300px] md:min-w-0")}
-              />
-            )}
-
-            <main
-              className={cn(
-                "flex-1 flex min-h-0 flex-col h-full overflow-hidden",
-                !showEditor ? "hidden md:flex" : "w-full"
-              )}
-              data-testid="editor-container"
-            >
-              <NotesTabStrip
-                tabs={tabs}
-                activeTabId={activeTabId}
-                addTabDisabled={!workspaceHydrated || !canAddTab}
-                addTabCapacityPending={!workspaceHydrated}
-                maximumTabCount={MAX_NOTE_WORKSPACE_TABS}
-                onAddTab={() => void addTab?.()}
-                onActivateTab={(tabId) => void activateTab?.(tabId)}
-                onCloseTab={(tabId) => void closeTab?.(tabId)}
-              />
-              <div className="flex-1 min-h-0 flex">
-                <EditorPane
-                  controller={controller}
-                  onBack={handleBackFromNote}
-                  noteEditorRef={noteEditorRef}
-                  wordpressConfigured={wordpressConfigured}
-                  pendingChunkFocus={pendingChunkFocus}
-                  onPendingChunkFocusApplied={handlePendingChunkFocusApplied}
-                />
-              </div>
-            </main>
-          </div>
-        </div>
-      )}
+      ) : (
+        <div className="flex min-h-0 flex-1 flex-col">
+          <MobileNotesTabMenu
+            tabs={tabs}
+            activeTabId={activeTabId}
+            addTabDisabled={!workspaceHydrated || !canAddTab}
+            addTabCapacityPending={!workspaceHydrated}
+            maximumTabCount={MAX_NOTE_WORKSPACE_TABS}
+            onAddTab={() => void addTab?.()}
+            onActivateTab={(tabId) => void activateTab?.(tabId)}
+            onCloseTab={(tabId) => void closeTab?.(tabId)}
+          />
+          <div className="flex min-h-0 flex-1">
+            <Sidebar
+              user={user!}
+              filterByTag={filterByTag}
+              notesDisplayed={notesDisplayed}
+              notesTotal={notesTotal}
+              pendingCount={pendingCount}
+              failedCount={failedCount}
+              isOffline={isOffline}
+              selectionMode={selectionMode}
+              selectedCount={selectedCount}
+              bulkDeleting={bulkDeleting}
+              onExitSelectionMode={exitSelectionMode}
+              onSelectAll={selectAllVisible}
+              onBulkDelete={deleteSelectedNotes}
+              onClearTagFilter={handleClearTagFilter}
+              onOpenSettings={() => void handleOpenSettings()}
+              onCreateNote={handleCreateNote}
+              onSignOut={handleSignOut}
+              onOpenSearch={handleOpenSearchPanel}
+              className={cn((showEditor || isSearchPanelOpen) ? "hidden md:flex" : "w-full md:w-80")}
+              data-testid="sidebar-container"
+            >
+              <ListPane controller={controller} />
+            </Sidebar>
+
+            {isSearchPanelOpen && (
+              <SearchResultsPanel
+                ref={searchPanelRef}
+                controller={controller}
+                hasGeminiApiKey={hasGeminiApiKey}
+                onOpenInContext={handleOpenInContext}
+                onClose={() => setIsSearchPanelOpen(false)}
+                className={cn(showEditor ? "hidden md:flex" : "w-full min-w-[300px] md:min-w-0")}
+              />
+            )}
+
+            <main
+              className={cn(
+                "flex-1 flex min-h-0 flex-col h-full overflow-hidden",
+                !showEditor ? "hidden md:flex" : "w-full"
+              )}
+              data-testid="editor-container"
+            >
+              <NotesTabStrip
+                tabs={tabs}
+                activeTabId={activeTabId}
+                addTabDisabled={!workspaceHydrated || !canAddTab}
+                addTabCapacityPending={!workspaceHydrated}
+                maximumTabCount={MAX_NOTE_WORKSPACE_TABS}
+                onAddTab={() => void addTab?.()}
+                onActivateTab={(tabId) => void activateTab?.(tabId)}
+                onCloseTab={(tabId) => void closeTab?.(tabId)}
+              />
+              <div className="flex-1 min-h-0 flex">
+                <EditorPane
+                  controller={controller}
+                  onBack={handleBackFromNote}
+                  noteEditorRef={noteEditorRef}
+                  wordpressConfigured={wordpressConfigured}
+                  pendingChunkFocus={pendingChunkFocus}
+                  onPendingChunkFocusApplied={handlePendingChunkFocusApplied}
+                />
+              </div>
+            </main>
+          </div>
+        </div>
+      )}
 
       <DeleteNoteDialog controller={controller} />
     </div>
@@ -323,9 +323,9 @@ export function NotesShell({ controller }: NotesShellProps) {
 function ListPane({ controller }: { controller: NoteAppController }) {
   const {
     notes,
-    notesQuery,
-    selectedNote,
-    handleSelectNote,
+    notesQuery,
+    selectedNote,
+    handleSelectNote,
     selectionMode,
     selectedNoteIds,
     toggleNoteSelection,
@@ -364,10 +364,10 @@ function EditorPane({
   pendingChunkFocus: PendingChunkFocus | null
   onPendingChunkFocusApplied: (requestId: string) => void
 }) {
-  const {
-    selectedNote,
-    activeTab,
-    activeTabId,
+  const {
+    selectedNote,
+    activeTab,
+    activeTabId,
     isEditing,
     saving,
     autoSaving,
@@ -411,6 +411,17 @@ function EditorPane({
     return counts
   }, [allTagsQuery.data, notes])
 
+  // The editor treats its initial* props as an external snapshot and
+  // reconciles them against local typing. The live tab draft echoes every
+  // keystroke back through the controller, so it must be frozen per editor
+  // session (tab + note + mode) — otherwise the echo is acknowledged as an
+  // external refresh and the pending autosave is cancelled before it runs.
+  const sessionDraft = React.useMemo(
+    () => activeTab.draft,
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- session identity only; the live draft must not retrigger
+    [activeTabId, activeTab.noteId, activeTab.mode],
+  )
+
   if (!selectedNote && !isEditing) {
     return <EmptyState />
   }
@@ -418,15 +429,15 @@ function EditorPane({
   if (isEditing) {
     return (
       <NoteEditor
-        ref={noteEditorRef}
-        key={`workspace-tab-${activeTabId}`}
-        noteId={selectedNote?.id}
-        initialTitle={activeTab.draft.title}
-        initialDescription={activeTab.draft.description}
-        initialTags={activeTab.draft.tags}
-        initialSession={{ draft: activeTab.draft, view: activeTab.view }}
-        onDraftChange={controller.handleDraftChange}
-        onViewSessionChange={controller.handleViewSessionChange}
+        ref={noteEditorRef}
+        key={`workspace-tab-${activeTabId}`}
+        noteId={selectedNote?.id}
+        initialTitle={sessionDraft.title}
+        initialDescription={sessionDraft.description}
+        initialTags={sessionDraft.tags}
+        initialSession={{ draft: sessionDraft, view: activeTab.view }}
+        onDraftChange={controller.handleDraftChange}
+        onViewSessionChange={controller.handleViewSessionChange}
         availableTags={availableTags}
         tagCounts={tagCounts}
         isSaving={saving}
@@ -444,20 +455,20 @@ function EditorPane({
     )
   }
 
-  if (selectedNote) {
-    return (
-      <NoteView
-        key={`workspace-tab-${activeTabId}-note-${selectedNote.id}`}
-        note={selectedNote}
+  if (selectedNote) {
+    return (
+      <NoteView
+        key={`workspace-tab-${activeTabId}-note-${selectedNote.id}`}
+        note={selectedNote}
         onEdit={() => handleEditNote(selectedNote)}
         onDelete={() => handleDeleteNote(selectedNote)}
         onTagClick={controller.handleTagClick}
         onRemoveTag={(tag) => handleRemoveTagFromNote(selectedNote.id, tag)}
         onBack={onBack}
-        wordpressConfigured={wordpressConfigured}
-        initialScrollTop={activeTab.view.scrollTop}
-        onViewSessionChange={controller.handleViewSessionChange}
-      />
+        wordpressConfigured={wordpressConfigured}
+        initialScrollTop={activeTab.view.scrollTop}
+        onViewSessionChange={controller.handleViewSessionChange}
+      />
     )
   }
 

From cc80d5da7b5972beb20eb3df8c508aa5e3335e91 Mon Sep 17 00:00:00 2001
From: denyskoreiba <denys.koreiba@flowlix.eu>
Date: Thu, 20 Aug 2026 21:55:54 +0200
Subject: [PATCH 14/23] fix(notes-tabs): cap tab strip width and clear
 deleted-note tab draft

Many tabs blew the page width: the NotesShell column, row, main, and
editor-pane flex items were missing min-w-0, so the strip's intrinsic
width propagated up and pushed the whole layout (NavRail off-screen on
desktop, tab controls off-screen on mobile). Tabs now scroll inside the
strip viewport as designed; the mobile tab header stays constrained.

Also reset the active tab by id after a delete: the save handler clears
the tab's noteId before the workspace reset runs, so the noteId-based
reset alone left a stale draft as the tab label.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../features/notes/MobileNotesTabMenu.tsx     |  2 +-
 .../components/features/notes/NotesShell.tsx  |  8 ++++----
 ui/web/hooks/useNoteAppController.ts          | 19 +++++++++++++++++--
 3 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/ui/web/components/features/notes/MobileNotesTabMenu.tsx b/ui/web/components/features/notes/MobileNotesTabMenu.tsx
index 2347a1f0733..9d4aa49d71b 100644
--- a/ui/web/components/features/notes/MobileNotesTabMenu.tsx
+++ b/ui/web/components/features/notes/MobileNotesTabMenu.tsx
@@ -46,7 +46,7 @@ export function MobileNotesTabMenu({
   }
 
   return (
-    <div className="relative border-b border-border/60 bg-background/80 px-3 py-2 backdrop-blur md:hidden">
+    <div className="relative min-w-0 border-b border-border/60 bg-background/80 px-3 py-2 backdrop-blur md:hidden">
       <div className="flex items-center gap-2">
         <div className="min-w-0 flex-1">
           <p className="truncate text-sm font-medium" title={activeLabel}>{activeLabel}</p>
diff --git a/ui/web/components/features/notes/NotesShell.tsx b/ui/web/components/features/notes/NotesShell.tsx
index d6fdd9c97f2..0e696f795e7 100644
--- a/ui/web/components/features/notes/NotesShell.tsx
+++ b/ui/web/components/features/notes/NotesShell.tsx
@@ -234,7 +234,7 @@ export function NotesShell({ controller }: NotesShellProps) {
           />
         </main>
       ) : (
-        <div className="flex min-h-0 flex-1 flex-col">
+        <div className="flex min-h-0 min-w-0 flex-1 flex-col">
           <MobileNotesTabMenu
             tabs={tabs}
             activeTabId={activeTabId}
@@ -245,7 +245,7 @@ export function NotesShell({ controller }: NotesShellProps) {
             onActivateTab={(tabId) => void activateTab?.(tabId)}
             onCloseTab={(tabId) => void closeTab?.(tabId)}
           />
-          <div className="flex min-h-0 flex-1">
+          <div className="flex min-h-0 min-w-0 flex-1">
             <Sidebar
               user={user!}
               filterByTag={filterByTag}
@@ -284,7 +284,7 @@ export function NotesShell({ controller }: NotesShellProps) {
 
             <main
               className={cn(
-                "flex-1 flex min-h-0 flex-col h-full overflow-hidden",
+                "flex-1 flex min-h-0 min-w-0 flex-col h-full overflow-hidden",
                 !showEditor ? "hidden md:flex" : "w-full"
               )}
               data-testid="editor-container"
@@ -299,7 +299,7 @@ export function NotesShell({ controller }: NotesShellProps) {
                 onActivateTab={(tabId) => void activateTab?.(tabId)}
                 onCloseTab={(tabId) => void closeTab?.(tabId)}
               />
-              <div className="flex-1 min-h-0 flex">
+              <div className="flex-1 min-h-0 min-w-0 flex">
                 <EditorPane
                   controller={controller}
                   onBack={handleBackFromNote}
diff --git a/ui/web/hooks/useNoteAppController.ts b/ui/web/hooks/useNoteAppController.ts
index 539d788fabf..bed34d6ed37 100644
--- a/ui/web/hooks/useNoteAppController.ts
+++ b/ui/web/hooks/useNoteAppController.ts
@@ -353,13 +353,28 @@ export function useNoteAppController() {
 
   const confirmDeleteNoteWithWorkspace = useCallback(async () => {
     const deletedNoteId = noteToDelete?.id ?? null
+    // The save handler clears the active tab's noteId before we run, so the
+    // tab that shows the note must be resolved before the delete.
+    const tabHoldingNote = deletedNoteId ? findTabByNoteId(deletedNoteId) : null
     const deleted = await confirmDeleteNote()
     // A deleted note must not survive in any workspace tab: a stale tab would
-    // keep rendering it and typing there would re-create the note.
+    // keep rendering it (or its draft as the tab label) and typing there
+    // would re-create the note.
     if (deleted && deletedNoteId) {
       resetTabsForNotes([deletedNoteId])
+      if (tabHoldingNote) {
+        updateTab(tabHoldingNote.id, {
+          note: null,
+          noteId: null,
+          mode: 'reading',
+          draft: { title: '', description: '', tags: '' },
+          view: { scrollTop: 0, titleSelection: undefined, editorSelection: undefined },
+          saveState: 'saved',
+          saveError: null,
+        })
+      }
     }
-  }, [confirmDeleteNote, noteToDelete, resetTabsForNotes])
+  }, [confirmDeleteNote, findTabByNoteId, noteToDelete, resetTabsForNotes, updateTab])
 
   const handleDraftChange = useCallback((draft: NoteDraftSnapshot) => {
     updateTab(activeTabId, {

From 6dffe51bc06511efaa52b3d88c596a54dfefdb4f Mon Sep 17 00:00:00 2001
From: denyskoreiba <denys.koreiba@flowlix.eu>
Date: Thu, 10 Sep 2026 21:02:17 +0200
Subject: [PATCH 15/23] fix(notes-tabs): make the tab strip scrollable instead
 of capped, float the mobile menu

Browser pass over the notes workspace tabs at 320-1440px with 1, 2, 8 and 24
tabs found the tab strip treating "runs out of horizontal room" as a capacity
limit, and the mobile tab list displacing the note it should float over.

Desktop strip:
- Add is gated on MAX_NOTE_WORKSPACE_TABS only. The measured width previously
  capped the workspace at 8 tabs on a 1440px window and 4 on a 1024px one, and
  announced "limit reached: 4 tabs" while eight tabs were open.
- Chevron controls and wheel-to-horizontal scrolling reach the overflow;
  macOS overlay scrollbars stay invisible until a scroll is already running.
- The native scrollbar is hidden, so the strip no longer grows 43px -> 54px
  when it starts overflowing.
- A ResizeObserver re-reveals the active tab, which otherwise scrolled out of
  sight on resize, and scrollIntoView now targets the whole tab so its close
  button is inside the viewport too.
- Scroll snapping stops the strip from leaving a tab clipped down to just its
  close button.

Mobile menu:
- Absolutely positioned popover; in flow it pushed the note down 545px.
- Dismisses on outside pointer-down and on Escape.
- Scrolls the active row into view on open.

Also fall back to the live draft title in the close-tab confirmation, which
said "this tab" for an unsaved new note.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 .../features/notes/NotesTabStrip.cy.tsx       |   9 +-
 .../design/2026-08-01-feature-notes-tabs.md   |  48 ++++--
 .../2026-08-01-feature-notes-tabs.md          |  28 +++-
 .../testing/2026-08-01-feature-notes-tabs.md  |  43 +++++
 .../features/notes/MobileNotesTabMenu.tsx     |  55 ++++++-
 .../features/notes/NotesTabStrip.tsx          | 149 +++++++++++++----
 ui/web/hooks/useNoteAppController.ts          |   6 +-
 .../components/notesWorkspaceTabs.test.tsx    | 154 +++++++++++++++++-
 8 files changed, 426 insertions(+), 66 deletions(-)

diff --git a/cypress/component/features/notes/NotesTabStrip.cy.tsx b/cypress/component/features/notes/NotesTabStrip.cy.tsx
index 847f08c637f..85c64076414 100644
--- a/cypress/component/features/notes/NotesTabStrip.cy.tsx
+++ b/cypress/component/features/notes/NotesTabStrip.cy.tsx
@@ -34,9 +34,14 @@ describe('Desktop notes tab strip', () => {
       />
     )
 
-    cy.get('button[aria-label^="Add note tab (limit reached:"]')
+    // Overflowing the strip must not block opening more notes: the excess
+    // scrolls and Add stays available until the shared 32-tab maximum.
+    // (The scroll arrows depend on measured overflow, which this component
+    // harness does not reproduce faithfully — they are covered in the jsdom
+    // unit test where the viewport size is controlled directly.)
+    cy.get('button[aria-label="Add note tab"]')
       .should('be.visible')
-      .and('be.disabled')
+      .and('not.be.disabled')
       .parent()
       .children()
       .first()
diff --git a/docs/ai/design/2026-08-01-feature-notes-tabs.md b/docs/ai/design/2026-08-01-feature-notes-tabs.md
index e6d2a1d7d24..42c51c93d09 100644
--- a/docs/ai/design/2026-08-01-feature-notes-tabs.md
+++ b/docs/ai/design/2026-08-01-feature-notes-tabs.md
@@ -128,15 +128,38 @@ list state so an empty tab never traps the user in a blank editor screen.
 
 The desktop tab strip keeps Add as the first, non-scrolling control. The tab
 viewport uses a browser-like flex layout: tabs grow while there is room, stop
-at a 120px minimum, and horizontally scroll when a restored workspace is
-larger than the viewport. A `ResizeObserver` measures the tab viewport and
-disables Add when another tab would require shrinking below that minimum.
-The shared core model/controller also enforces a 32-tab ceiling, so direct
-calls cannot bypass the UI guard. The disabled button exposes the applicable
-limit in its accessible name so the constraint is understandable without
-relying on the visual layout. The mobile menu receives the controller's
-disabled state explicitly and keeps its tab rows in a scrollable region while
-leaving Add available as the fixed menu footer.
+at a 120px minimum, and horizontally scroll once they no longer fit.
+
+Running out of horizontal room is a scrolling concern, not a capacity limit.
+Add stays enabled until the shared 32-tab ceiling enforced by the core model
+and controller, and its accessible name only reports that one number — an
+earlier revision derived a second, width-based limit, which made Add dead at
+four tabs on a 1024px window and announced "limit reached: 4 tabs" while eight
+tabs were open. The screen width now decides how the strip scrolls, never how
+many notes the user may keep open.
+
+Because the strip scrolls, it also owns the affordances that make the hidden
+tabs reachable:
+
+- Chevron buttons appear on either side while the strip overflows and are
+  disabled at each end. They are the primary control, since macOS hides
+  overlay scrollbars until a scroll is already in progress.
+- A vertical wheel over the strip scrolls it horizontally, for pointers with
+  no horizontal axis.
+- The native scrollbar is hidden (`.scrollbar-none`). It would otherwise add
+  ~11px to the strip and make its height jump as tabs are opened and closed.
+- Scroll snapping aligns tabs to the left edge, so the strip never leaves a
+  sliver of a tab whose only visible part is its close button.
+- A `ResizeObserver` on the tab viewport re-reveals the active tab. Without it,
+  narrowing the window leaves the active tab scrolled out of sight while its
+  note is the one on screen.
+
+The mobile menu receives the controller's disabled state explicitly and keeps
+its tab rows in a scrollable region while leaving Add available as the fixed
+menu footer. The menu is an absolutely positioned popover: in flow it pushed
+the note down by its own height (over 500px with a full tab list), leaving a
+sliver of the note visible. It scrolls its active row into view on open and
+dismisses on outside pointer-down and on Escape.
 
 ### Active-slot replacement is the default
 
@@ -203,8 +226,11 @@ The workspace is modeled as a list of independent tab sessions, while the contro
 - Storage writes are best-effort and serialized from a small, bounded state snapshot; storage failures never block editing.
 - Tab buttons are keyboard reachable, have accessible names, and expose active/dirty/error state.
 - Long titles are ellipsized; desktop tabs grow/shrink within the 120px
-  minimum and overflow horizontally when needed, with Add fixed on the left;
-  mobile uses a compact list.
+  minimum and overflow horizontally when needed, with Add fixed on the left
+  and chevron controls for the overflow; mobile uses a compact list.
+- The strip height does not change as tabs are added, removed, or overflow.
+- The active tab stays scrolled into view across activation, tab open/close,
+  and window resize.
 - No secrets or auth tokens are added to workspace storage.
 
 ## Design Review Resolution (2026-08-01)
diff --git a/docs/ai/implementation/2026-08-01-feature-notes-tabs.md b/docs/ai/implementation/2026-08-01-feature-notes-tabs.md
index 1548bcdb73f..319936200cb 100644
--- a/docs/ai/implementation/2026-08-01-feature-notes-tabs.md
+++ b/docs/ai/implementation/2026-08-01-feature-notes-tabs.md
@@ -44,11 +44,18 @@ ui/web/components/features/notes/NoteView.tsx
 - After a successful delete, call `resetTabsForNotes` with the deleted IDs so no tab keeps a deleted note; bulk delete reports the actually-deleted IDs through `onNotesDeleted`.
 - Use the active tab's draft as editor initial content; never use a server refresh to overwrite a dirty local field without existing reconciliation rules.
 - Keep tab indicators derived from explicit per-tab save state rather than global UI assumptions.
-- Keep the desktop Add control outside the scrolling tab viewport. `NotesTabStrip`
-  measures that viewport, uses the same 120px minimum as its CSS `min-width`,
-  and disables Add when the next tab would violate the minimum. Existing tabs
-  can still be inspected by horizontal scrolling, including after restoring a
-  wider workspace into a narrow viewport.
+- Keep the desktop Add control outside the scrolling tab viewport, and keep it
+  enabled until the shared 32-tab ceiling. Screen width decides how the strip
+  scrolls, not how many notes may be open: `NotesTabStrip` measures the
+  viewport only to drive the chevron controls and to keep the active tab
+  revealed. Existing tabs can still be inspected by horizontal scrolling,
+  including after restoring a wider workspace into a narrow viewport.
+- Scroll the tab strip with instant (`behavior: "auto"`) scrolling. Mandatory
+  scroll snapping re-snaps the strip on the next layout, which aborts an
+  in-flight smooth animation and makes the chevrons look dead.
+- Reveal the active tab from a single effect keyed on the active tab id and
+  the tab count, and re-run it from a `ResizeObserver`. Reading `.current` of
+  a ref inside a `useCallback` trips `react-hooks/preserve-manual-memoization`.
 
 ### Patterns & Best Practices
 
@@ -57,12 +64,17 @@ ui/web/components/features/notes/NoteView.tsx
 - Do not add direct Supabase calls to tab UI or storage.
 - Use `sessionStorage` only through the adapter and never read/write it during server rendering.
 - Keep accessibility labels stable so component tests can target behavior rather than CSS.
-- When desktop capacity is reached, retain a real disabled button and expose
-  the measured limit in its accessible name; do not hide Add or rely on a
-  tooltip-only explanation.
+- When the tab ceiling is reached, retain a real disabled button and expose
+  that one limit in its accessible name; do not hide Add or rely on a
+  tooltip-only explanation. Never announce a limit smaller than the number of
+  tabs already open — an accessible name has to describe the same rule the
+  user can see.
 - The core reducer and controller enforce the shared 32-tab ceiling before
   flushing editor work. `MobileNotesTabMenu` receives that explicit state and
   renders a scrollable tab-list body with Add as a non-scrolling footer.
+- Render the mobile tab list as an absolutely positioned popover, and give it
+  the dismissals a popover is expected to have (outside pointer-down, Escape).
+  In normal flow it displaces the note it is meant to float over.
 
 ## Integration Points
 
diff --git a/docs/ai/testing/2026-08-01-feature-notes-tabs.md b/docs/ai/testing/2026-08-01-feature-notes-tabs.md
index ca14918c884..e861494be4a 100644
--- a/docs/ai/testing/2026-08-01-feature-notes-tabs.md
+++ b/docs/ai/testing/2026-08-01-feature-notes-tabs.md
@@ -103,6 +103,49 @@ Recorded Evidence).
 - Manual verification against the PR preview deployment (test-auth user): desktop tab add/replace/dedupe/switch/close, draft/mode restore across switches, reload restore, mobile compact menu.
 - The manual preview pass caught an autosave-killing draft-echo defect that the suites missed (fake controllers used a no-op `handleDraftChange`): typing produced zero Supabase writes and the dirty marker never cleared. Fixed in `NotesShell` (frozen session draft) and regression-guarded by `NotesShellAutoSaveEcho.cy.tsx`, verified to fail without the fix.
 
+### Responsive/browser pass (2026-09-10)
+
+Run against a local Supabase stack and the Next dev server, driven through the
+in-app browser at 320, 360, 375, 390, 768, 900, 1024, 1280 and 1440 CSS px,
+with workspaces of 1, 2, 8 and 24 tabs (including titles long enough to be
+ellipsized, Cyrillic titles, and notes long enough to scroll).
+
+Verified working:
+
+- Open note into the active tab, Add tab, fill the new blank tab from the list,
+  close tab, and duplicate-note deduplication (re-selecting an open note
+  activates its existing tab instead of adding one).
+- Reading and editing scroll positions survive tab switches and a page reload,
+  and carry over from reading into editing for the same note. (Note when
+  re-testing: the restore runs inside `requestAnimationFrame`, which is
+  suspended while the browser pane is hidden — measure with the page visible
+  or the restore appears to be lost.)
+- Autosave from the tab-aware controller reaches the database; the tab label
+  follows the edited title.
+- Long titles ellipsize in the desktop tab, the mobile header, and the mobile
+  menu rows.
+- No horizontal page overflow at any tested width.
+
+Defects found and fixed in this pass:
+
+| Defect | Where | Fix |
+|---|---|---|
+| Add disabled by measured width: 8 tabs max at 1440px, 4 at 1024px, never the documented 32; the label announced a limit lower than the number of open tabs | `NotesTabStrip` | Add is gated on `MAX_NOTE_WORKSPACE_TABS` only |
+| Overflowing tabs unreachable — no arrows, and macOS overlay scrollbars stay invisible until scrolling | `NotesTabStrip` | Chevron controls plus wheel-to-horizontal scrolling |
+| Strip grew 43px → 54px when the horizontal scrollbar appeared | `NotesTabStrip` | `.scrollbar-none` on the viewport |
+| Active tab scrolled out of view after a window resize, and clipped on load with 24 tabs | `NotesTabStrip` | `ResizeObserver` re-reveals it; `scrollIntoView` targets the whole tab, not just its title button |
+| A clipped tab could show only its close button, inviting a click that closes an unreadable tab | `NotesTabStrip` | `snap-x snap-mandatory` with `snap-start` tabs |
+| Mobile tab menu sat in flow and pushed the note down 545px | `MobileNotesTabMenu` | Absolutely positioned popover |
+| Mobile menu had no outside-click or Escape dismissal | `MobileNotesTabMenu` | Pointer-down and Escape handlers |
+| Mobile menu opened at the top of a 24-row list, hiding the active tab | `MobileNotesTabMenu` | Active row scrolled into view on open |
+| Close-tab confirmation said "this tab" for an unsaved new note | `useNoteAppController` | Falls back to the live draft title |
+
+Known, not fixed here (pre-existing, outside this feature):
+
+- At 320px the `NoteView`/`NoteEditor` action bar overflows its header by
+  ~12px, clipping the "more actions" button. Unchanged by this PR and fine
+  from 360px up.
+
 ## Performance Testing
 
 - Verify switching does not mount more than one editor or trigger duplicate fetches.
diff --git a/ui/web/components/features/notes/MobileNotesTabMenu.tsx b/ui/web/components/features/notes/MobileNotesTabMenu.tsx
index 9d4aa49d71b..550ec9ff209 100644
--- a/ui/web/components/features/notes/MobileNotesTabMenu.tsx
+++ b/ui/web/components/features/notes/MobileNotesTabMenu.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import { useState } from "react"
+import { useEffect, useRef, useState } from "react"
 import { List, Plus, X } from "lucide-react"
 import type { NoteWorkspaceTab } from "@core/services/noteWorkspaceTabs"
 import { Button } from "@/components/ui/button"
@@ -20,9 +20,43 @@ export function MobileNotesTabMenu({
   maximumTabCount,
 }: MobileNotesTabMenuProps) {
   const [isOpen, setIsOpen] = useState(false)
+  const containerRef = useRef<HTMLDivElement | null>(null)
+  const activeRowRef = useRef<HTMLDivElement | null>(null)
   const activeTab = tabs.find((tab) => tab.id === activeTabId) ?? tabs[0]
   const activeLabel = activeTab ? getTabLabel(activeTab) : "No open notes"
 
+  // With many tabs the active one can sit far down the scrollable list; bring
+  // it into view so opening the menu always shows where you currently are.
+  useEffect(() => {
+    if (!isOpen) return
+    const row = activeRowRef.current
+    if (row && typeof row.scrollIntoView === "function") {
+      row.scrollIntoView({ block: "nearest" })
+    }
+  }, [isOpen])
+
+  // The panel floats over the note, so it needs the dismissal affordances a
+  // popover is expected to have: tapping outside it and pressing Escape.
+  useEffect(() => {
+    if (!isOpen) return
+
+    const handlePointerDown = (event: PointerEvent | MouseEvent) => {
+      const target = event.target
+      if (target instanceof Node && containerRef.current?.contains(target)) return
+      setIsOpen(false)
+    }
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") setIsOpen(false)
+    }
+
+    document.addEventListener("pointerdown", handlePointerDown)
+    document.addEventListener("keydown", handleKeyDown)
+    return () => {
+      document.removeEventListener("pointerdown", handlePointerDown)
+      document.removeEventListener("keydown", handleKeyDown)
+    }
+  }, [isOpen])
+
   const handleActivate = (tabId: string) => {
     void onActivateTab(tabId)
     setIsOpen(false)
@@ -46,7 +80,10 @@ export function MobileNotesTabMenu({
   }
 
   return (
-    <div className="relative min-w-0 border-b border-border/60 bg-background/80 px-3 py-2 backdrop-blur md:hidden">
+    <div
+      ref={containerRef}
+      className="relative z-40 min-w-0 border-b border-border/60 bg-background/80 px-3 py-2 backdrop-blur md:hidden"
+    >
       <div className="flex items-center gap-2">
         <div className="min-w-0 flex-1">
           <p className="truncate text-sm font-medium" title={activeLabel}>{activeLabel}</p>
@@ -70,14 +107,24 @@ export function MobileNotesTabMenu({
       </div>
 
       {isOpen && (
-        <div id="mobile-notes-tab-list" className="mt-2 rounded-xl border border-border bg-card p-1 shadow-lg" aria-label="Open notes">
+        <div
+          id="mobile-notes-tab-list"
+          // Absolutely positioned so opening the list overlays the note
+          // instead of pushing the editor down the page.
+          className="absolute left-3 right-3 top-full z-50 mt-1 rounded-xl border border-border bg-popover p-1 shadow-lg"
+          aria-label="Open notes"
+        >
           <div className="max-h-[60vh] overflow-y-auto overscroll-contain">
             {tabs.map((tab) => {
               const label = getTabLabel(tab)
               const isActive = tab.id === activeTabId
 
               return (
-                <div key={tab.id} className="flex items-center gap-1 rounded-lg">
+                <div
+                  key={tab.id}
+                  ref={isActive ? activeRowRef : undefined}
+                  className="flex items-center gap-1 rounded-lg"
+                >
                   <Button
                     type="button"
                     aria-pressed={isActive}
diff --git a/ui/web/components/features/notes/NotesTabStrip.tsx b/ui/web/components/features/notes/NotesTabStrip.tsx
index 845df812ac1..2ac892536da 100644
--- a/ui/web/components/features/notes/NotesTabStrip.tsx
+++ b/ui/web/components/features/notes/NotesTabStrip.tsx
@@ -1,7 +1,7 @@
 "use client"
 
-import { useEffect, useRef, useState, type KeyboardEvent } from "react"
-import { AlertCircle, Loader2, Plus, Circle, X } from "lucide-react"
+import { useEffect, useRef, useState, type KeyboardEvent, type WheelEvent } from "react"
+import { AlertCircle, ChevronLeft, ChevronRight, Loader2, Plus, Circle, X } from "lucide-react"
 import { MAX_NOTE_WORKSPACE_TABS, type NoteWorkspaceTab } from "@core/services/noteWorkspaceTabs"
 import { Button } from "@/components/ui/button"
 import { cn } from "@ui/web/lib/utils"
@@ -22,11 +22,18 @@ type ReadonlyNotesTabStripProps = Readonly<NotesTabStripProps>
 /**
  * Keep the close affordance and a useful part of the title visible at the
  * narrowest desktop size. The CSS min-width below and this value are kept in
- * sync so add capacity reflects the actual layout constraint.
+ * sync, so the measured capacity matches the actual layout constraint.
  */
 export const MIN_TAB_WIDTH_PX = 120
 const TAB_GAP_PX = 4
+/** Ignore sub-pixel scroll rounding when deciding whether an arrow is usable. */
+const SCROLL_EPSILON_PX = 1
 
+/**
+ * How many tabs fit at their minimum width. Tabs beyond that stay reachable
+ * through the scroller, so this only drives the scroll affordances — it is
+ * never a cap on how many tabs the workspace may hold.
+ */
 export function getTabCapacity(availableWidth: number): number {
   if (!Number.isFinite(availableWidth) || availableWidth <= 0) return 1
   return Math.max(1, Math.floor((availableWidth + TAB_GAP_PX) / (MIN_TAB_WIDTH_PX + TAB_GAP_PX)))
@@ -39,9 +46,12 @@ function getTabLabel(tab: NoteWorkspaceTab): string {
 }
 
 function scrollTabIntoView(button: HTMLButtonElement) {
+  // Align the whole tab (title button plus its close control), otherwise the
+  // close affordance of the active tab can still sit outside the viewport.
+  const tab = button.closest<HTMLElement>("[data-tab-id]") ?? button
   // jsdom does not implement scrollIntoView, so guard explicitly.
-  if (typeof button.scrollIntoView === "function") {
-    button.scrollIntoView({ block: "nearest", inline: "nearest" })
+  if (typeof tab.scrollIntoView === "function") {
+    tab.scrollIntoView({ block: "nearest", inline: "nearest" })
   }
 }
 
@@ -125,53 +135,106 @@ export function NotesTabStrip({
 }: ReadonlyNotesTabStripProps) {
   const tabViewportRef = useRef<HTMLDivElement | null>(null)
   const tabButtonRefs = useRef(new Map<string, HTMLButtonElement>())
-  const [tabViewportWidth, setTabViewportWidth] = useState<number | null>(null)
+  const [overflow, setOverflow] = useState({ left: false, right: false })
+
+  const syncOverflow = () => {
+    const viewport = tabViewportRef.current
+    if (!viewport) return
+    const maxScrollLeft = viewport.scrollWidth - viewport.clientWidth
+    setOverflow({
+      left: viewport.scrollLeft > SCROLL_EPSILON_PX,
+      right: viewport.scrollLeft < maxScrollLeft - SCROLL_EPSILON_PX,
+    })
+  }
+
+  const focusTab = (tabId: string) => {
+    const button = tabButtonRefs.current.get(tabId)
+    if (!button) return
+    button.focus()
+    scrollTabIntoView(button)
+  }
 
+  // The active tab must stay reachable after anything that changes the strip
+  // geometry: activating a tab, opening or closing one, and resizing the
+  // window — a narrower strip otherwise leaves the active tab off-screen.
   useEffect(() => {
     const viewport = tabViewportRef.current
     if (!viewport) return
 
-    const measure = () => {
-      const width = viewport.clientWidth || viewport.getBoundingClientRect().width
-      setTabViewportWidth(width > 0 ? width : null)
+    const reveal = () => {
+      const button = tabButtonRefs.current.get(activeTabId)
+      if (button) scrollTabIntoView(button)
+      const maxScrollLeft = viewport.scrollWidth - viewport.clientWidth
+      setOverflow({
+        left: viewport.scrollLeft > SCROLL_EPSILON_PX,
+        right: viewport.scrollLeft < maxScrollLeft - SCROLL_EPSILON_PX,
+      })
     }
 
-    measure()
+    reveal()
     if (typeof ResizeObserver === "undefined") return
 
-    const observer = new ResizeObserver(measure)
+    const observer = new ResizeObserver(reveal)
     observer.observe(viewport)
     return () => observer.disconnect()
-  }, [])
-
-  const measuredCapacity = tabViewportWidth === null ? null : getTabCapacity(tabViewportWidth)
-  const tabCapacity = measuredCapacity === null
-    ? null
-    : Math.min(measuredCapacity, maximumTabCount)
-  const isCapacityPending = addTabCapacityPending || tabViewportWidth === null
-  const isAddDisabled = addTabDisabled || isCapacityPending || (tabCapacity !== null && tabs.length >= tabCapacity)
+  }, [activeTabId, tabs.length])
+
+  const scrollByTabs = (direction: -1 | 1) => {
+    const viewport = tabViewportRef.current
+    if (!viewport) return
+    const step = Math.max(MIN_TAB_WIDTH_PX + TAB_GAP_PX, viewport.clientWidth - MIN_TAB_WIDTH_PX)
+    // Instant, not smooth: mandatory scroll snapping re-snaps the strip on the
+    // next layout, which aborts an in-flight smooth animation and leaves the
+    // arrow looking dead. Snapping still aligns the result to a tab edge.
+    if (typeof viewport.scrollBy === "function") {
+      viewport.scrollBy({ left: direction * step, behavior: "auto" })
+    } else {
+      viewport.scrollLeft += direction * step
+    }
+    syncOverflow()
+  }
+
+  // A vertical wheel over the strip should move it sideways: trackpads and
+  // mice without a horizontal axis otherwise cannot reach the hidden tabs.
+  const handleWheel = (event: WheelEvent<HTMLDivElement>) => {
+    const viewport = tabViewportRef.current
+    if (!viewport) return
+    if (Math.abs(event.deltaY) <= Math.abs(event.deltaX)) return
+    if (viewport.scrollWidth <= viewport.clientWidth) return
+    viewport.scrollLeft += event.deltaY
+    syncOverflow()
+  }
+
+  const isAtTabLimit = tabs.length >= maximumTabCount
+  const isAddDisabled = addTabDisabled || addTabCapacityPending || isAtTabLimit
   let addTabLabel = "Add note tab"
   if (addTabCapacityPending) {
     addTabLabel = "Add note tab (checking workspace capacity)"
-  } else if (addTabDisabled) {
-    addTabLabel = `Add note tab (limit reached: ${maximumTabCount} tabs)`
-  } else if (isCapacityPending) {
-    addTabLabel = "Add note tab (checking capacity)"
   } else if (isAddDisabled) {
-    addTabLabel = `Add note tab (limit reached: ${tabCapacity} tabs)`
+    addTabLabel = `Add note tab (limit reached: ${maximumTabCount} tabs)`
   }
 
-  const focusTab = (tabId: string) => {
-    const button = tabButtonRefs.current.get(tabId)
-    if (!button) return
-    button.focus()
-    scrollTabIntoView(button)
-  }
+  const renderScrollButton = (direction: -1 | 1) => {
+    const enabled = direction === -1 ? overflow.left : overflow.right
+    if (!overflow.left && !overflow.right) return null
+    const Icon = direction === -1 ? ChevronLeft : ChevronRight
 
-  useEffect(() => {
-    const button = tabButtonRefs.current.get(activeTabId)
-    if (button) scrollTabIntoView(button)
-  }, [activeTabId])
+    return (
+      <Button
+        type="button"
+        variant="ghost"
+        size="icon"
+        className="h-8 w-6 shrink-0"
+        onMouseDown={(event) => event.preventDefault()}
+        onClick={() => scrollByTabs(direction)}
+        disabled={!enabled}
+        aria-label={direction === -1 ? "Scroll tabs left" : "Scroll tabs right"}
+        title={direction === -1 ? "Scroll tabs left" : "Scroll tabs right"}
+      >
+        <Icon className="h-4 w-4" aria-hidden="true" />
+      </Button>
+    )
+  }
 
   return (
     <div className="hidden min-w-0 items-center gap-1 border-b border-border/60 bg-background/80 px-2 py-1 backdrop-blur md:flex">
@@ -188,7 +251,20 @@ export function NotesTabStrip({
       >
         <Plus className="h-4 w-4" aria-hidden="true" />
       </Button>
-      <div ref={tabViewportRef} className="min-w-0 flex-1 overflow-x-auto" aria-label="Open notes">
+      {renderScrollButton(-1)}
+      <div
+        ref={tabViewportRef}
+        // The native scrollbar is hidden on purpose: it would change the strip
+        // height when it appears, and the arrow buttons above cover the same
+        // job on every platform (macOS hides overlay scrollbars until used).
+        // Snapping keeps whole tabs at the left edge. Without it a tab can be
+        // clipped down to just its close button, which is far too easy to hit
+        // by accident for a tab the user cannot even read.
+        className="scrollbar-none min-w-0 flex-1 snap-x snap-mandatory overflow-x-auto"
+        aria-label="Open notes"
+        onScroll={syncOverflow}
+        onWheel={handleWheel}
+      >
         <div className="flex min-w-full items-center gap-1">
           {tabs.map((tab, index) => {
             const label = getTabLabel(tab)
@@ -198,7 +274,7 @@ export function NotesTabStrip({
               <div
                 key={tab.id}
                 className={cn(
-                  "group flex min-w-[120px] max-w-56 flex-1 items-center rounded-md border border-transparent",
+                  "group flex min-w-[120px] max-w-56 flex-1 snap-start items-center rounded-md border border-transparent",
                   isActive && "border-border bg-muted/60",
                 )}
                 data-tab-id={tab.id}
@@ -242,6 +318,7 @@ export function NotesTabStrip({
           })}
         </div>
       </div>
+      {renderScrollButton(1)}
     </div>
   )
 }
diff --git a/ui/web/hooks/useNoteAppController.ts b/ui/web/hooks/useNoteAppController.ts
index bed34d6ed37..d0c96e8bcb8 100644
--- a/ui/web/hooks/useNoteAppController.ts
+++ b/ui/web/hooks/useNoteAppController.ts
@@ -641,9 +641,13 @@ export function useNoteAppController() {
       ? (tabs[tabIndex + 1] ?? tabs[tabIndex - 1] ?? null)
       : tabs.find((candidate) => candidate.id === activeTabId) ?? null
 
+    // A tab whose save failed may be a brand-new note that never reached the
+    // server, so the saved title can be missing — fall back to the live draft
+    // before calling it "this tab".
+    const tabLabel = tab.note?.title?.trim() || tab.draft.title.trim() || 'this tab'
     const discardFailedSave = tab.saveState === 'error'
       && typeof window !== 'undefined'
-      && window.confirm(`Discard unsaved changes in "${tab.note?.title || 'this tab'}"?`)
+      && window.confirm(`Discard unsaved changes in "${tabLabel}"?`)
     if (tab.saveState === 'error' && !discardFailedSave) return
 
     if (tab.id === activeTabId && !discardFailedSave) {
diff --git a/ui/web/tests/unit/components/notesWorkspaceTabs.test.tsx b/ui/web/tests/unit/components/notesWorkspaceTabs.test.tsx
index 5f3a7923852..2a8265f6510 100644
--- a/ui/web/tests/unit/components/notesWorkspaceTabs.test.tsx
+++ b/ui/web/tests/unit/components/notesWorkspaceTabs.test.tsx
@@ -85,7 +85,7 @@ describe('Notes workspace tab controls', () => {
     expect(onAddTab).toHaveBeenCalledTimes(1)
   })
 
-  it('keeps Add tab first and disables it when the measured minimum-width capacity is reached', () => {
+  it('keeps Add tab first and usable when more tabs are open than fit on screen', () => {
     const restoreClientWidth = mockClientWidth(MIN_TAB_WIDTH_PX * 2 + 4)
 
     try {
@@ -94,25 +94,88 @@ describe('Notes workspace tab controls', () => {
         makeTab('tab-2', 'Second note'),
         makeTab('tab-3', 'Third note'),
       ]
+      const onAddTab = jest.fn()
       render(
         <NotesTabStrip
           tabs={manyTabs}
           activeTabId="tab-1"
-          onAddTab={jest.fn()}
+          onAddTab={onAddTab}
           onActivateTab={jest.fn()}
           onCloseTab={jest.fn()}
         />,
       )
 
-      const addButton = screen.getByRole('button', { name: 'Add note tab (limit reached: 2 tabs)' })
-      expect(addButton.hasAttribute('disabled')).toBe(true)
+      // Running out of horizontal room scrolls the strip; it must never stop
+      // the user from opening another note.
+      const addButton = screen.getByRole('button', { name: 'Add note tab' })
+      expect(addButton.hasAttribute('disabled')).toBe(false)
       expect(addButton.parentElement?.firstElementChild).toBe(addButton)
+      fireEvent.click(addButton)
+      expect(onAddTab).toHaveBeenCalledTimes(1)
       expect(screen.getByLabelText('Open notes').className).toContain('overflow-x-auto')
     } finally {
       restoreClientWidth()
     }
   })
 
+  it('disables Add only at the shared workspace tab maximum', () => {
+    const manyTabs = Array.from({ length: 32 }, (_, index) => makeTab(`tab-${index}`, `Note ${index}`))
+
+    render(
+      <NotesTabStrip
+        tabs={manyTabs}
+        activeTabId="tab-0"
+        onAddTab={jest.fn()}
+        onActivateTab={jest.fn()}
+        onCloseTab={jest.fn()}
+        maximumTabCount={32}
+      />,
+    )
+
+    const addButton = screen.getByRole('button', { name: 'Add note tab (limit reached: 32 tabs)' })
+    expect(addButton.hasAttribute('disabled')).toBe(true)
+  })
+
+  it('offers scroll controls once the strip overflows and moves the viewport', () => {
+    const restoreClientWidth = mockClientWidth(MIN_TAB_WIDTH_PX)
+    const scrollBy = jest.fn()
+    const scrollWidthDescriptor = Object.getOwnPropertyDescriptor(HTMLElement.prototype, 'scrollWidth')
+    Object.defineProperty(HTMLElement.prototype, 'scrollWidth', {
+      configurable: true,
+      get: () => MIN_TAB_WIDTH_PX * 6,
+    })
+    HTMLElement.prototype.scrollBy = scrollBy
+
+    try {
+      render(
+        <NotesTabStrip
+          tabs={Array.from({ length: 6 }, (_, index) => makeTab(`tab-${index}`, `Note ${index}`))}
+          activeTabId="tab-0"
+          onAddTab={jest.fn()}
+          onActivateTab={jest.fn()}
+          onCloseTab={jest.fn()}
+        />,
+      )
+
+      const scrollRight = screen.getByRole('button', { name: 'Scroll tabs right' })
+      expect(scrollRight.hasAttribute('disabled')).toBe(false)
+      // At scrollLeft 0 there is nothing to the left yet.
+      expect(screen.getByRole('button', { name: 'Scroll tabs left' }).hasAttribute('disabled')).toBe(true)
+
+      fireEvent.click(scrollRight)
+      expect(scrollBy).toHaveBeenCalledTimes(1)
+      expect(scrollBy.mock.calls[0][0].left).toBeGreaterThan(0)
+    } finally {
+      delete (HTMLElement.prototype as unknown as { scrollBy?: unknown }).scrollBy
+      if (scrollWidthDescriptor) {
+        Object.defineProperty(HTMLElement.prototype, 'scrollWidth', scrollWidthDescriptor)
+      } else {
+        delete (HTMLElement.prototype as unknown as { scrollWidth?: number }).scrollWidth
+      }
+      restoreClientWidth()
+    }
+  })
+
   it('calculates capacity from the tab minimum instead of allowing zero-width tabs', () => {
     expect(getTabCapacity(MIN_TAB_WIDTH_PX - 1)).toBe(1)
     expect(getTabCapacity(MIN_TAB_WIDTH_PX * 2 + 4)).toBe(2)
@@ -262,4 +325,87 @@ describe('Notes workspace tab controls', () => {
     expect(menuButton.getAttribute('aria-expanded')).toBe('false')
     expect(screen.getByText('1 tab')).toBeTruthy()
   })
+
+  it('floats the mobile tab list over the note instead of pushing it down', () => {
+    render(
+      <MobileNotesTabMenu
+        tabs={tabs}
+        activeTabId="tab-1"
+        onAddTab={jest.fn()}
+        onActivateTab={jest.fn()}
+        onCloseTab={jest.fn()}
+      />,
+    )
+
+    fireEvent.click(screen.getByRole('button', { name: 'Open note tabs (2)' }))
+    const panel = document.getElementById('mobile-notes-tab-list')
+
+    expect(panel?.className).toContain('absolute')
+    expect(panel?.className).toContain('top-full')
+  })
+
+  it('dismisses the mobile tab list on outside pointer down and on Escape', () => {
+    render(
+      <MobileNotesTabMenu
+        tabs={tabs}
+        activeTabId="tab-1"
+        onAddTab={jest.fn()}
+        onActivateTab={jest.fn()}
+        onCloseTab={jest.fn()}
+      />,
+    )
+
+    const menuButton = screen.getByRole('button', { name: 'Open note tabs (2)' })
+
+    fireEvent.click(menuButton)
+    expect(menuButton.getAttribute('aria-expanded')).toBe('true')
+    fireEvent.pointerDown(document.body)
+    expect(menuButton.getAttribute('aria-expanded')).toBe('false')
+
+    fireEvent.click(menuButton)
+    expect(menuButton.getAttribute('aria-expanded')).toBe('true')
+    fireEvent.keyDown(document, { key: 'Escape' })
+    expect(menuButton.getAttribute('aria-expanded')).toBe('false')
+  })
+
+  it('brings the active row into view when the mobile tab list opens', () => {
+    const scrollIntoView = jest.fn()
+    const original = HTMLElement.prototype.scrollIntoView
+    HTMLElement.prototype.scrollIntoView = scrollIntoView
+
+    try {
+      render(
+        <MobileNotesTabMenu
+          tabs={Array.from({ length: 30 }, (_, index) => makeTab(`tab-${index}`, `Note ${index}`))}
+          activeTabId="tab-27"
+          onAddTab={jest.fn()}
+          onActivateTab={jest.fn()}
+          onCloseTab={jest.fn()}
+        />,
+      )
+
+      fireEvent.click(screen.getByRole('button', { name: 'Open note tabs (30)' }))
+      expect(scrollIntoView).toHaveBeenCalled()
+    } finally {
+      HTMLElement.prototype.scrollIntoView = original
+    }
+  })
+
+  it('keeps a pointer down inside the mobile tab list from closing it', () => {
+    render(
+      <MobileNotesTabMenu
+        tabs={tabs}
+        activeTabId="tab-1"
+        onAddTab={jest.fn()}
+        onActivateTab={jest.fn()}
+        onCloseTab={jest.fn()}
+      />,
+    )
+
+    const menuButton = screen.getByRole('button', { name: 'Open note tabs (2)' })
+    fireEvent.click(menuButton)
+    fireEvent.pointerDown(document.getElementById('mobile-notes-tab-list')!)
+
+    expect(menuButton.getAttribute('aria-expanded')).toBe('true')
+  })
 })

From c6e9bdafa19099bbd6213b0d79336075a253d5e1 Mon Sep 17 00:00:00 2001
From: denyskoreiba <denys.koreiba@flowlix.eu>
Date: Thu, 10 Sep 2026 21:38:02 +0200
Subject: [PATCH 16/23] fix(notes): stop the note action bar overflowing on
 phones

The editing header clipped its "more actions" control off the right edge of a
375px screen. The buttons were not the cause: the editor column is a flex item
without min-w-0, so it could not shrink below the intrinsic width of the
formatting toolbar and grew to 397px, carrying the absolutely positioned
header past the viewport with it.

- min-w-0 on both note panes, so the column tracks the pane width. The header
  now ends 12px inside the screen at 320px, the narrowest size we support,
  which also clears a pre-existing clip at that width.
- A shrinkable mode label plus a shrink-0 action group, so the row cannot push
  a control out of view again if the header gains content.
- Read/Save/Edit/Delete collapse to icons below md, keeping their labels as
  aria-label. Desktop keeps the text.
- The mode label ("Reading"/"Editing") is screen-reader only on phones. The
  tab bar directly above names the note and the actions name the mode.
- The back control matches the other pill buttons, and gained the aria-label
  it was missing in reading mode.

Two follow-on fixes from that work:

- The sticky formatting toolbar parked at a hardcoded 69px, which no longer
  matched the header and left an 8px strip of scrolling text between them.
  NoteEditor now publishes the measured header height as
  --note-editor-header-h and the toolbar follows it.
- Reading and editing hid the native scrollbar differently, so only one of the
  two showed a stray line beside the action bar. Both use scrollbar-none now.

NoteEditor.cy.tsx targets Save/Read by aria-label instead of button text,
which no longer resolves at every viewport.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 app/globals.css                               |  5 ++
 .../features/notes/NoteEditor.cy.tsx          | 10 +--
 ui/web/components/EditorMenuBar.tsx           |  7 +-
 .../components/features/notes/NoteEditor.tsx  | 85 +++++++++++++++----
 ui/web/components/features/notes/NoteView.tsx | 39 ++++++---
 5 files changed, 112 insertions(+), 34 deletions(-)

diff --git a/app/globals.css b/app/globals.css
index c5dd5a7b9fd..65c274ab7e6 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -30,6 +30,11 @@ button,
 /* Color scheme meta for browser optimization */
 :root {
   color-scheme: light;
+
+  /* Height of the note action bar. NoteEditor overwrites this on its own root
+     from the measured bar, so the sticky formatting toolbar parks flush
+     underneath it; this default covers every other RichTextEditor host. */
+  --note-editor-header-h: 69px;
 }
 
 .dark {
diff --git a/cypress/component/features/notes/NoteEditor.cy.tsx b/cypress/component/features/notes/NoteEditor.cy.tsx
index ce91d37a7d6..7855ad8e71c 100644
--- a/cypress/component/features/notes/NoteEditor.cy.tsx
+++ b/cypress/component/features/notes/NoteEditor.cy.tsx
@@ -61,7 +61,7 @@ describe('NoteEditor Component', () => {
     cy.get('button[title="Add tag"]').click()
     cy.get('input[placeholder="work, personal, ideas"]').type('New Tag{enter}')
 
-    cy.contains('Save').click()
+    cy.get('button[aria-label="Save"]').click()
 
     cy.get('@onSave').should('have.been.calledWith', Cypress.sinon.match({
       title: 'New Title',
@@ -72,10 +72,10 @@ describe('NoteEditor Component', () => {
   it('handles save and read actions', () => {
     cy.mount(<NoteEditor {...getDefaultProps()} />)
 
-    cy.contains('Save').click()
+    cy.get('button[aria-label="Save"]').click()
     cy.get('@onSave').should('have.been.called')
 
-    cy.contains('Read').click()
+    cy.get('button[aria-label="Read"]').click()
     cy.get('@onRead').should('have.been.called')
   })
 
@@ -86,7 +86,7 @@ describe('NoteEditor Component', () => {
     // "Saving..." text is now in a separate div, not in the button
     cy.contains('Saving...').should('be.visible')
     // Button should be disabled during manual save, but text remains "Save"
-    cy.get('button').contains('Save').should('be.disabled')
+    cy.get('button[aria-label="Save"]').should('be.disabled')
   })
 
   it('shows auto-saving state without disabling button', () => {
@@ -95,7 +95,7 @@ describe('NoteEditor Component', () => {
 
     cy.contains('Saving...').should('be.visible')
     // Button should NOT be disabled during auto-save
-    cy.get('button').contains('Save').should('not.be.disabled')
+    cy.get('button[aria-label="Save"]').should('not.be.disabled')
   })
 
   it('shows last saved timestamp', () => {
diff --git a/ui/web/components/EditorMenuBar.tsx b/ui/web/components/EditorMenuBar.tsx
index e5e6aa9f848..e6181dc7cfc 100644
--- a/ui/web/components/EditorMenuBar.tsx
+++ b/ui/web/components/EditorMenuBar.tsx
@@ -76,7 +76,12 @@ export const EditorMenuBar = ({
 
   return (
     <TooltipProvider delayDuration={150}>
-      <div className="sticky top-[69px] z-20 flex flex-wrap items-center gap-1.5 border-b border-border/40 bg-background/85 backdrop-blur-md p-2 shadow-sm rounded-t-xl">
+      {/* The offset follows the real height of the note action bar, which
+          NoteEditor publishes as --note-editor-header-h (globals.css holds the
+          fallback). A hardcoded value drifts whenever that bar changes
+          (responsive padding, the "Saving…" caption) and leaves a strip of
+          scrolling text between the two. */}
+      <div className="sticky top-[var(--note-editor-header-h)] z-20 flex flex-wrap items-center gap-1.5 border-b border-border/40 bg-background/85 backdrop-blur-md p-2 shadow-sm rounded-t-xl">
 
         {/* History */}
         <EditorToolbarButton dataCy="undo-button" label="Undo (Ctrl+Z)" onClick={onUndo} disabled={!historyState.canUndo} ariaLabel="Undo">
diff --git a/ui/web/components/features/notes/NoteEditor.tsx b/ui/web/components/features/notes/NoteEditor.tsx
index f0f309a4c68..aca270d546f 100644
--- a/ui/web/components/features/notes/NoteEditor.tsx
+++ b/ui/web/components/features/notes/NoteEditor.tsx
@@ -1,7 +1,7 @@
 "use client"
 
 import * as React from "react"
-import { ChevronLeft, Copy, Check, Eye } from "lucide-react"
+import { ChevronLeft, Copy, Check, Eye, Save as SaveIcon } from "lucide-react"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import RichTextEditor, { type RichTextEditorHandle } from "@/components/RichTextEditor"
@@ -94,6 +94,8 @@ export const NoteEditor = React.memo(React.forwardRef<NoteEditorHandle, NoteEdit
   const titleInputRef = React.useRef<HTMLInputElement | null>(null)
   const editorRef = React.useRef<RichTextEditorHandle | null>(null)
   const scrollContainerRef = React.useRef<HTMLDivElement | null>(null)
+  const editorRootRef = React.useRef<HTMLDivElement | null>(null)
+  const headerRef = React.useRef<HTMLDivElement | null>(null)
   const initialSessionRef = React.useRef(initialSession)
   const previousNoteIdRef = React.useRef(noteId)
 
@@ -135,6 +137,27 @@ export const NoteEditor = React.memo(React.forwardRef<NoteEditorHandle, NoteEdit
     debouncedDraftNotify.schedule(getFormData())
   }, [debouncedDraftNotify, getFormData])
 
+  // Publish the action bar's height so the sticky formatting toolbar can park
+  // flush beneath it. The bar is absolutely positioned over the scroll area,
+  // so any mismatch shows as a strip of scrolling text between the two.
+  React.useEffect(() => {
+    const header = headerRef.current
+    const root = editorRootRef.current
+    if (!header || !root) return
+
+    const publishHeight = () => {
+      root.style.setProperty('--note-editor-header-h', `${Math.round(header.getBoundingClientRect().height)}px`)
+    }
+
+    publishHeight()
+    if (typeof ResizeObserver === 'undefined') return
+
+    const observer = new ResizeObserver(publishHeight)
+    observer.observe(header)
+    return () => observer.disconnect()
+  }, [])
+
+
   const applyExternalSnapshot = React.useCallback((
     snapshot: { title: string; description: string; tags: string },
     fieldDecisions: Record<'title' | 'description' | 'tags', 'accept-external' | 'acknowledge-local' | 'preserve-local'>
@@ -331,29 +354,52 @@ export const NoteEditor = React.memo(React.forwardRef<NoteEditorHandle, NoteEdit
   // Show the "..." menu for existing notes (RAG + delete)
   const showMoreMenu = !!noteId
 
+  // min-w-0: without it this flex item cannot shrink below the intrinsic
+  // width of the formatting toolbar, so the whole editor column — and the
+  // header absolutely positioned across it — grows wider than a phone screen
+  // and pushes the trailing action off the edge.
   return (
-    <div className="flex-1 flex min-h-0 flex-col relative bg-card">
+    <div ref={editorRootRef} className="relative flex min-h-0 min-w-0 flex-1 flex-col bg-card">
       {/* Editor Header */}
-      <div className="absolute top-0 left-0 right-0 z-30 p-4 border-b border-border/40 bg-card/75 backdrop-blur-md flex items-center justify-between">
-        <div className="flex items-center gap-2">
+      {/* gap-2 + a shrinkable mode label + a non-shrinking action group: the
+          actions keep their full width and the label gives way, so the row
+          can never push a control past the right edge. */}
+      <div
+        ref={headerRef}
+        className="absolute top-0 left-0 right-0 z-30 flex items-center justify-between gap-2 border-b border-border/40 bg-card/75 p-3 backdrop-blur-md md:p-4"
+      >
+        <div className="flex min-w-0 flex-1 items-center gap-2">
           {onBack && (
             <Button
-              variant="ghost"
+              variant="outline"
               size="icon"
-              className="md:hidden -ml-2 rounded-full h-9 w-9"
+              className="h-9 w-9 shrink-0 rounded-full shadow-sm md:hidden"
               onClick={onBack}
               aria-label="Back"
             >
-              <ChevronLeft className="w-5 h-5" />
+              <ChevronLeft className="h-4 w-4" />
             </Button>
           )}
-          <h2 className="text-xs font-bold uppercase tracking-wider text-muted-foreground">Editing</h2>
+          {/* The tab bar directly above already names the note, and the eye +
+              save actions say which mode this is, so the label is visual
+              noise on a phone. It stays for screen readers. */}
+          <h2 className="sr-only truncate text-xs font-bold uppercase tracking-wider text-muted-foreground md:not-sr-only">Editing</h2>
         </div>
-        <div className="flex flex-col items-end gap-1">
+        <div className="flex shrink-0 flex-col items-end gap-1">
           <div className="flex gap-1.5 items-center">
-            <Button onClick={handleRead} variant="outline" size="sm" disabled={isSaving} className="rounded-full shadow-sm">
-              <Eye className="w-3.5 h-3.5 mr-1.5" />
-              Read
+            {/* Labels collapse to icons below md: the editing header carries
+                four controls and the row overflowed its own width on a phone,
+                clipping the "more actions" button off the screen edge. */}
+            <Button
+              onClick={handleRead}
+              variant="outline"
+              size="sm"
+              aria-label="Read"
+              disabled={isSaving}
+              className="rounded-full shadow-sm"
+            >
+              <Eye className="w-3.5 h-3.5 md:mr-1.5" />
+              <span className="hidden md:inline">Read</span>
             </Button>
             <Button
               variant="outline"
@@ -370,8 +416,15 @@ export const NoteEditor = React.memo(React.forwardRef<NoteEditorHandle, NoteEdit
               )}
               <span className="hidden md:inline">{copied ? "Copied" : "Copy"}</span>
             </Button>
-            <Button onClick={handleSave} size="sm" disabled={isSaving} className="rounded-full shadow-sm">
-              Save
+            <Button
+              onClick={handleSave}
+              size="sm"
+              aria-label="Save"
+              disabled={isSaving}
+              className="rounded-full shadow-sm"
+            >
+              <SaveIcon className="w-3.5 h-3.5 md:hidden" />
+              <span className="hidden md:inline">Save</span>
             </Button>
             {/* More actions menu -- RAG controls, delete note, WordPress export */}
             {showMoreMenu && (
@@ -396,7 +449,9 @@ export const NoteEditor = React.memo(React.forwardRef<NoteEditorHandle, NoteEdit
       {/* Editor Form */}
       <div
         ref={scrollContainerRef}
-        className="flex-1 overflow-y-auto bg-card"
+        // scrollbar-none: kept in sync with NoteView so the reading and
+        // editing surfaces scroll identically — see the note there.
+        className="scrollbar-none flex-1 overflow-y-auto bg-card"
         onScroll={(event) => debouncedViewNotify.schedule({ scrollTop: event.currentTarget.scrollTop })}
       >
         <div className="max-w-4xl mx-auto px-6 pt-24 space-y-5">
diff --git a/ui/web/components/features/notes/NoteView.tsx b/ui/web/components/features/notes/NoteView.tsx
index 379f59948ee..dee07f12fe3 100644
--- a/ui/web/components/features/notes/NoteView.tsx
+++ b/ui/web/components/features/notes/NoteView.tsx
@@ -88,31 +88,40 @@ export const NoteView = React.memo(function NoteView({
   }), [note.content, note.description, note.id, note.tags, note.title])
 
   return (
-    <div className="flex-1 flex min-h-0 flex-col relative bg-card">
+    <div className="relative flex min-h-0 min-w-0 flex-1 flex-col bg-card">
       {/* Note View Header */}
-      <div className="absolute top-0 left-0 right-0 z-10 p-4 border-b border-border/40 bg-card/75 backdrop-blur-md flex items-center justify-between">
-        <div className="flex items-center gap-2">
+      {/* gap-2 + a shrinkable mode label + a non-shrinking action group: the
+          actions keep their full width and the label gives way, so the row
+          can never push a control past the right edge. */}
+      <div className="absolute top-0 left-0 right-0 z-10 flex items-center justify-between gap-2 border-b border-border/40 bg-card/75 p-3 backdrop-blur-md md:p-4">
+        <div className="flex min-w-0 flex-1 items-center gap-2">
           {onBack && (
             <Button
-              variant="ghost"
+              variant="outline"
               size="icon"
-              className="md:hidden -ml-2 rounded-full h-9 w-9"
+              className="h-9 w-9 shrink-0 rounded-full shadow-sm md:hidden"
               onClick={onBack}
+              aria-label="Back"
             >
-              <ChevronLeft className="w-5 h-5" />
+              <ChevronLeft className="h-4 w-4" />
             </Button>
           )}
-          <h2 className="text-xs font-bold uppercase tracking-wider text-muted-foreground">Reading</h2>
+          {/* Hidden on phones for the same reason as the editing header: the
+              tab bar names the note and the actions name the mode. */}
+          <h2 className="sr-only truncate text-xs font-bold uppercase tracking-wider text-muted-foreground md:not-sr-only">Reading</h2>
         </div>
-        <div className="flex items-center gap-1.5">
+        <div className="flex shrink-0 items-center gap-1.5">
+          {/* Icon-only below md, matching the editing header: the label row
+              otherwise overflows the header on a phone. */}
           <Button
             onClick={onEdit}
             variant="outline"
             size="sm"
+            aria-label="Edit"
             className="rounded-full shadow-sm"
           >
-            <Edit2 className="w-3.5 h-3.5 mr-1.5" />
-            Edit
+            <Edit2 className="w-3.5 h-3.5 md:mr-1.5" />
+            <span className="hidden md:inline">Edit</span>
           </Button>
           <Button
             variant="outline"
@@ -137,8 +146,8 @@ export const NoteView = React.memo(function NoteView({
             aria-label="Delete note"
             className="rounded-full text-destructive dark:text-red-400 hover:text-destructive dark:hover:text-red-300 hover:bg-destructive/10 dark:hover:bg-red-950/30 border-destructive/25 dark:border-red-900/50 hover:border-destructive/30 shadow-sm"
           >
-            <Trash2 className="w-3.5 h-3.5 mr-1.5" />
-            <span className="hidden sm:inline" aria-hidden="true">Delete</span>
+            <Trash2 className="w-3.5 h-3.5 md:mr-1.5" />
+            <span className="hidden md:inline" aria-hidden="true">Delete</span>
           </Button>
           {/* More actions menu -- always visible, contains RAG index controls + optional WP export */}
           <MoreActionsMenu
@@ -152,7 +161,11 @@ export const NoteView = React.memo(function NoteView({
       {/* Note Content */}
       <div
         ref={contentRef}
-        className="flex-1 overflow-y-auto px-6 pt-24 pb-10 bg-card"
+        // scrollbar-none: the note surface scrolls under a translucent action
+        // bar, and a native scrollbar runs the full height of the pane, so it
+        // shows up alongside that bar. Reading and editing hide it the same
+        // way, otherwise only one of the two modes has a stray edge line.
+        className="scrollbar-none flex-1 overflow-y-auto px-6 pt-24 pb-10 bg-card"
         onScroll={(event) => debouncedViewNotify.schedule({ scrollTop: event.currentTarget.scrollTop })}
       >
         <div className="max-w-4xl mx-auto">

From eabfaaae75dd6d1fcccb1e7ca4e6d884a3473aa7 Mon Sep 17 00:00:00 2001
From: denyskoreiba <denys.koreiba@flowlix.eu>
Date: Thu, 10 Sep 2026 22:09:54 +0200
Subject: [PATCH 17/23] fix(notes-tabs): scope the persisted workspace to the
 signed-in account

Signing in as a second user in the same browser tab restored the first user's
tabs: the strip listed their note titles and the cached note bodies were
readable straight out of sessionStorage. Workspace state carried no account
stamp, and clearNoteWorkspaceState() was never called from app code.

Two layers close it:

- NoteWorkspaceState carries a userId. hydrateNoteWorkspaceState compares it
  against the account being restored for and starts a fresh workspace on any
  mismatch, treating state with no stamp as foreign. This also covers the
  paths that never reach a clean sign-out: a crash, an expired token, a
  session replaced some other way.
- handleSignOut clears the stored workspace, so the cached notes are gone at
  sign-out rather than waiting for the next sign-in to discard them.

The hook re-hydrates when the user id changes and only writes once its state
belongs to the account currently signed in, so the outgoing account's tabs are
never rewritten under the incoming one.

readNoteWorkspaceState now takes an options object; the positional
(storage, idFactory) form could not gain a userId without reading ambiguously
at the call sites.

Verified against two seeded users on a local stack: sign-out empties the
store, the second sign-in gets its own stamp and a single blank tab, and a
foreign-stamped blob planted directly into sessionStorage is discarded instead
of rendered.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 core/services/noteWorkspaceTabs.ts            | 31 +++++++++++----
 .../core-services-noteWorkspaceTabs.test.ts   | 39 +++++++++++++++++++
 .../design/2026-08-01-feature-notes-tabs.md   | 26 ++++++++++++-
 .../testing/2026-08-01-feature-notes-tabs.md  | 21 ++++++++++
 ui/web/hooks/useNoteAppController.ts          |  2 +-
 ui/web/hooks/useNoteAuth.ts                   |  5 +++
 ui/web/hooks/useNoteWorkspaceTabs.ts          | 16 +++++---
 ui/web/lib/noteWorkspaceStorage.ts            | 26 +++++++++----
 .../useNoteAppControllerAdditional.test.tsx   |  4 +-
 .../unit/lib/noteWorkspaceStorage.test.ts     | 18 ++++++++-
 10 files changed, 164 insertions(+), 24 deletions(-)

diff --git a/core/services/noteWorkspaceTabs.ts b/core/services/noteWorkspaceTabs.ts
index 8f3b3e0a33b..a1c948b6298 100644
--- a/core/services/noteWorkspaceTabs.ts
+++ b/core/services/noteWorkspaceTabs.ts
@@ -32,6 +32,13 @@ export type NoteWorkspaceTab = {
 
 export type NoteWorkspaceState = {
   version: typeof NOTE_WORKSPACE_VERSION
+  /**
+   * Account the persisted tabs belong to. Workspace state is kept in
+   * per-browser-tab storage that outlives a sign-out, and every tab caches the
+   * note it shows — body included. Without this stamp the next account to sign
+   * in inside the same browser tab adopts the previous account's open notes.
+   */
+  userId: string | null
   tabs: NoteWorkspaceTab[]
   activeTabId: string
 }
@@ -121,10 +128,14 @@ const createNoteTab = (id: string, note: NoteViewModel): NoteWorkspaceTab => ({
   saveError: null,
 })
 
-export function createNoteWorkspaceState(idFactory: NoteWorkspaceIdFactory = defaultIdFactory): NoteWorkspaceState {
+export function createNoteWorkspaceState(
+  idFactory: NoteWorkspaceIdFactory = defaultIdFactory,
+  userId: string | null = null,
+): NoteWorkspaceState {
   const tab = createEmptyTab(idFactory)
   return {
     version: NOTE_WORKSPACE_VERSION,
+    userId,
     tabs: [tab],
     activeTabId: tab.id,
   }
@@ -337,25 +348,31 @@ const normalizeTab = (
 export function hydrateNoteWorkspaceState(
   raw: unknown,
   idFactory: NoteWorkspaceIdFactory = defaultIdFactory,
+  userId: string | null = null,
 ): NoteWorkspaceState {
   let parsed: unknown = raw
   if (typeof raw === 'string') {
     if (raw.length > MAX_NOTE_WORKSPACE_SERIALIZED_LENGTH) {
-      return createNoteWorkspaceState(idFactory)
+      return createNoteWorkspaceState(idFactory, userId)
     }
     try {
       parsed = JSON.parse(raw) as unknown
     } catch {
-      return createNoteWorkspaceState(idFactory)
+      return createNoteWorkspaceState(idFactory, userId)
     }
   }
 
-  if (!parsed || typeof parsed !== 'object') return createNoteWorkspaceState(idFactory)
+  if (!parsed || typeof parsed !== 'object') return createNoteWorkspaceState(idFactory, userId)
   const source = parsed as Record<string, unknown>
   if (source.version !== NOTE_WORKSPACE_VERSION || !Array.isArray(source.tabs)) {
-    return createNoteWorkspaceState(idFactory)
+    return createNoteWorkspaceState(idFactory, userId)
   }
 
+  // Never hand one account's cached notes to another. A stamp that is absent
+  // (state written before this guard existed) is treated as foreign too.
+  const storedUserId = typeof source.userId === 'string' ? source.userId : null
+  if (storedUserId !== userId) return createNoteWorkspaceState(idFactory, userId)
+
   const usedTabIds = new Set<string>()
   const usedNoteIds = new Set<string>()
   const tabs = source.tabs
@@ -368,10 +385,10 @@ export function hydrateNoteWorkspaceState(
       return true
     })
 
-  if (tabs.length === 0) return createNoteWorkspaceState(idFactory)
+  if (tabs.length === 0) return createNoteWorkspaceState(idFactory, userId)
   const requestedActive = typeof source.activeTabId === 'string' ? source.activeTabId : ''
   const activeTabId = tabs.some((tab) => tab.id === requestedActive) ? requestedActive : tabs[0].id
-  return { version: NOTE_WORKSPACE_VERSION, tabs, activeTabId }
+  return { version: NOTE_WORKSPACE_VERSION, userId, tabs, activeTabId }
 }
 
 export function serializeNoteWorkspaceState(state: NoteWorkspaceState): string {
diff --git a/core/tests/unit/core-services-noteWorkspaceTabs.test.ts b/core/tests/unit/core-services-noteWorkspaceTabs.test.ts
index c86cc2fac03..63a21d01763 100644
--- a/core/tests/unit/core-services-noteWorkspaceTabs.test.ts
+++ b/core/tests/unit/core-services-noteWorkspaceTabs.test.ts
@@ -203,4 +203,43 @@ describe('note workspace tab state', () => {
     expect(updateWorkspaceTab(state, 'missing', { mode: 'reading' })).toBe(state)
     expect(findWorkspaceTabByNoteId(state, null)).toBeNull()
   })
+
+  it('refuses to restore a workspace stamped with another account', () => {
+    const owned = note('note-1')
+    const state = openNoteInWorkspace(createNoteWorkspaceState(ids('owner'), 'user-1'), owned)
+    const serialized = serializeNoteWorkspaceState(state)
+
+    const sameUser = hydrateNoteWorkspaceState(serialized, ids('same'), 'user-1')
+    expect(sameUser.userId).toBe('user-1')
+    expect(sameUser.tabs[0].noteId).toBe('note-1')
+
+    const otherUser = hydrateNoteWorkspaceState(serialized, ids('other'), 'user-2')
+    expect(otherUser.userId).toBe('user-2')
+    expect(otherUser.tabs).toHaveLength(1)
+    expect(otherUser.tabs[0].noteId).toBeNull()
+    expect(otherUser.tabs[0].note).toBeNull()
+  })
+
+  it('discards workspace state written before the account stamp existed', () => {
+    const owned = note('note-1')
+    const legacy = {
+      version: 1,
+      tabs: [{
+        id: 'tab-legacy',
+        noteId: owned.id,
+        note: owned,
+        mode: 'reading',
+        draft: { title: owned.title, description: '', tags: '' },
+        view: { scrollTop: 0 },
+        saveState: 'saved',
+        saveError: null,
+      }],
+      activeTabId: 'tab-legacy',
+    }
+
+    const hydrated = hydrateNoteWorkspaceState(legacy, ids('legacy'), 'user-1')
+
+    expect(hydrated.tabs[0].noteId).toBeNull()
+    expect(hydrated.tabs[0].note).toBeNull()
+  })
 })
diff --git a/docs/ai/design/2026-08-01-feature-notes-tabs.md b/docs/ai/design/2026-08-01-feature-notes-tabs.md
index 42c51c93d09..71f53aeff39 100644
--- a/docs/ai/design/2026-08-01-feature-notes-tabs.md
+++ b/docs/ai/design/2026-08-01-feature-notes-tabs.md
@@ -60,6 +60,7 @@ type NoteWorkspaceTab = {
 
 type NoteWorkspaceState = {
   version: 1
+  userId: string | null
   tabs: NoteWorkspaceTab[]
   activeTabId: string
 }
@@ -75,6 +76,8 @@ The persisted JSON contains only serializable values. Runtime refs, promises, Re
 - A blank tab has `note === null` and `noteId === null`.
 - Closing an active tab applies right-neighbor-then-left-neighbor selection.
 - Invalid persisted records are discarded rather than partially applied.
+- Persisted state whose `userId` does not match the account being restored for
+  is discarded, never partially adopted.
 
 ## API Design
 
@@ -82,7 +85,7 @@ The pure reducer/service exposes deterministic operations that both web and nati
 
 ```ts
 createWorkspaceState(idFactory?): NoteWorkspaceState
-hydrateWorkspaceState(raw, idFactory?): NoteWorkspaceState
+hydrateWorkspaceState(raw, idFactory?, userId?): NoteWorkspaceState
 addWorkspaceTab(state, idFactory?): NoteWorkspaceState
 activateWorkspaceTab(state, tabId): NoteWorkspaceState
 openNoteInWorkspace(state, note, tabId?): NoteWorkspaceState
@@ -161,6 +164,27 @@ the note down by its own height (over 500px with a full tab list), leaving a
 sliver of the note visible. It scrolls its active row into view on open and
 dismisses on outside pointer-down and on Escape.
 
+### Workspace state is scoped to the signed-in account
+
+Tabs persist in per-browser-tab `sessionStorage`, and every tab caches the note
+it shows — title, tags and body. That storage outlives a sign-out, so without a
+guard the next account to sign in inside the same browser tab restores the
+previous account's open notes and can read their contents.
+
+Two layers close this:
+
+- `NoteWorkspaceState` carries a `userId`. `hydrateNoteWorkspaceState` compares
+  it against the account being restored for and starts a fresh workspace on any
+  mismatch. State with no stamp at all (written before this guard) is treated
+  as foreign. This covers every path that skips a clean sign-out — a crash, an
+  expired token, a session swapped in another way.
+- `handleSignOut` calls `clearNoteWorkspaceState()`, so the cached notes are
+  gone at sign-out rather than lingering until the next sign-in.
+
+The hook re-hydrates whenever the user id changes and only writes once the
+in-memory state belongs to the account currently signed in, so the outgoing
+account's tabs are never rewritten under the incoming one.
+
 ### Active-slot replacement is the default
 
 `openNoteInWorkspace` updates the active tab. `addWorkspaceTab` is the only operation that increases tab count. This encodes the product's key rule in one reducer function instead of relying on individual click handlers.
diff --git a/docs/ai/testing/2026-08-01-feature-notes-tabs.md b/docs/ai/testing/2026-08-01-feature-notes-tabs.md
index e861494be4a..0a55cc48afc 100644
--- a/docs/ai/testing/2026-08-01-feature-notes-tabs.md
+++ b/docs/ai/testing/2026-08-01-feature-notes-tabs.md
@@ -146,6 +146,27 @@ Known, not fixed here (pre-existing, outside this feature):
   ~12px, clipping the "more actions" button. Unchanged by this PR and fine
   from 360px up.
 
+### Account-boundary pass (2026-09-10)
+
+Found by signing in as a second test user in the same browser tab: the tab
+strip still listed the first user's notes, and their bodies were readable from
+`sessionStorage`. Workspace state had no account stamp and
+`clearNoteWorkspaceState()` was never called from app code.
+
+Verified after the fix, against the running app with two seeded users:
+
+- Signing out empties the persisted workspace (one blank tab, `userId: null`,
+  no cached note objects).
+- Signing in as the second user yields a workspace stamped with *their* id and
+  a single blank tab; none of the first user's titles or bodies appear.
+- A workspace blob stamped with another account, planted directly into
+  `sessionStorage` to simulate a sign-out that never ran, is discarded on the
+  next load instead of rendered.
+
+Regression coverage: `core-services-noteWorkspaceTabs.test.ts` (mismatched
+stamp, and legacy state with no stamp) and `noteWorkspaceStorage.test.ts`
+(shared session key not restored across accounts).
+
 ## Performance Testing
 
 - Verify switching does not mount more than one editor or trigger duplicate fetches.
diff --git a/ui/web/hooks/useNoteAppController.ts b/ui/web/hooks/useNoteAppController.ts
index d0c96e8bcb8..8b31cba18a7 100644
--- a/ui/web/hooks/useNoteAppController.ts
+++ b/ui/web/hooks/useNoteAppController.ts
@@ -84,7 +84,7 @@ export function useNoteAppController() {
   // The existing selection hook still owns bulk-selection/dialog state. The
   // selected note and editor mode are now derived from the active workspace tab
   // so every save/navigation consumer observes the same session.
-  const workspace = useNoteWorkspaceTabs()
+  const workspace = useNoteWorkspaceTabs(user?.id ?? null)
   const {
     activeTab,
     hydrated: workspaceHydrated,
diff --git a/ui/web/hooks/useNoteAuth.ts b/ui/web/hooks/useNoteAuth.ts
index d4f5fb895a1..b68dc9965bc 100644
--- a/ui/web/hooks/useNoteAuth.ts
+++ b/ui/web/hooks/useNoteAuth.ts
@@ -8,6 +8,7 @@ import { AuthService } from '@core/services/auth'
 import { webStorageAdapter } from '@ui/web/adapters/storage'
 import { webOAuthRedirectUri } from '@ui/web/config'
 import { featureFlags } from '@ui/web/featureFlags'
+import { clearNoteWorkspaceState } from '@ui/web/lib/noteWorkspaceStorage'
 
 const testAuthEmail = process.env.NEXT_PUBLIC_TEST_AUTH_EMAIL ?? ''
 const testAuthPassword = process.env.NEXT_PUBLIC_TEST_AUTH_PASSWORD ?? ''
@@ -147,6 +148,10 @@ export function useNoteAuth(config: NoteAuthConfig = runtimeNoteAuthConfig) {
         try {
             await authService.signOut()
             await webStorageAdapter.removeItem('testUser')
+            // Workspace tabs cache the notes they show, in storage that
+            // outlives the session. Drop them here so nothing is left behind
+            // for the next account signing in on this browser tab.
+            clearNoteWorkspaceState()
             setUser(null)
             queryClient.removeQueries({ queryKey: ['notes'] })
             if (typeof callback === 'function') callback()
diff --git a/ui/web/hooks/useNoteWorkspaceTabs.ts b/ui/web/hooks/useNoteWorkspaceTabs.ts
index 50bd4ca465f..3a2c844fb28 100644
--- a/ui/web/hooks/useNoteWorkspaceTabs.ts
+++ b/ui/web/hooks/useNoteWorkspaceTabs.ts
@@ -17,19 +17,25 @@ import { readNoteWorkspaceState, writeNoteWorkspaceState } from '@ui/web/lib/not
 
 const INITIAL_TAB_ID = 'note-tab-initial'
 
-export function useNoteWorkspaceTabs() {
+export function useNoteWorkspaceTabs(userId: string | null = null) {
   // Keep the server render and the first browser render identical. The real
   // tab ID is loaded from sessionStorage immediately after hydration.
   const [state, setState] = useState(() => createNoteWorkspaceState(() => INITIAL_TAB_ID))
-  const [hydrated, setHydrated] = useState(false)
+  const [hydratedUserId, setHydratedUserId] = useState<string | null | undefined>(undefined)
 
   useEffect(() => {
     // The first render must be identical on server and client. sessionStorage is
     // loaded after hydration, then the controller applies the restored active tab.
+    // Re-running on a userId change is what keeps one account's cached notes
+    // from being restored for the next account to sign in here.
     // eslint-disable-next-line react-hooks/set-state-in-effect -- sessionStorage is a browser-only hydration source
-    setState(readNoteWorkspaceState())
-    setHydrated(true)
-  }, [])
+    setState(readNoteWorkspaceState({ userId }))
+    setHydratedUserId(userId)
+  }, [userId])
+
+  // Only persist once the state belongs to the account currently signed in,
+  // otherwise the outgoing account's tabs get rewritten under the new user.
+  const hydrated = hydratedUserId === userId
 
   useEffect(() => {
     if (!hydrated) return
diff --git a/ui/web/lib/noteWorkspaceStorage.ts b/ui/web/lib/noteWorkspaceStorage.ts
index cd43d738482..5341918e159 100644
--- a/ui/web/lib/noteWorkspaceStorage.ts
+++ b/ui/web/lib/noteWorkspaceStorage.ts
@@ -17,16 +17,28 @@ function getSessionStorage(): Storage | null {
   }
 }
 
-export function readNoteWorkspaceState(
-  storage: Storage | null = getSessionStorage(),
-  idFactory?: NoteWorkspaceIdFactory,
-): NoteWorkspaceState {
-  if (!storage) return hydrateNoteWorkspaceState(null, idFactory)
+export type ReadNoteWorkspaceStateOptions = {
+  /**
+   * Scopes the restore. State stamped with a different account — or with no
+   * stamp at all — is discarded rather than adopted, so signing in as someone
+   * else in the same browser tab never surfaces the previous account's notes.
+   */
+  userId?: string | null
+  storage?: Storage | null
+  idFactory?: NoteWorkspaceIdFactory
+}
+
+export function readNoteWorkspaceState({
+  userId = null,
+  storage = getSessionStorage(),
+  idFactory,
+}: ReadNoteWorkspaceStateOptions = {}): NoteWorkspaceState {
+  if (!storage) return hydrateNoteWorkspaceState(null, idFactory, userId)
 
   try {
-    return hydrateNoteWorkspaceState(storage.getItem(NOTE_WORKSPACE_STORAGE_KEY), idFactory)
+    return hydrateNoteWorkspaceState(storage.getItem(NOTE_WORKSPACE_STORAGE_KEY), idFactory, userId)
   } catch {
-    return hydrateNoteWorkspaceState(null, idFactory)
+    return hydrateNoteWorkspaceState(null, idFactory, userId)
   }
 }
 
diff --git a/ui/web/tests/unit/hooks/useNoteAppControllerAdditional.test.tsx b/ui/web/tests/unit/hooks/useNoteAppControllerAdditional.test.tsx
index a685b5e6e27..c461004d1d1 100644
--- a/ui/web/tests/unit/hooks/useNoteAppControllerAdditional.test.tsx
+++ b/ui/web/tests/unit/hooks/useNoteAppControllerAdditional.test.tsx
@@ -325,7 +325,9 @@ describe('useNoteAppController additional observable behavior', () => {
 
   it('blocks controller Add tab before flushing when the shared workspace limit is reached', async () => {
     let nextId = 0
-    let state = createNoteWorkspaceState(() => `tab-${nextId++}`)
+    // Stamped with the signed-in account: workspace state from anyone else is
+    // deliberately discarded on hydration.
+    let state = createNoteWorkspaceState(() => `tab-${nextId++}`, 'user-1')
     while (state.tabs.length < MAX_NOTE_WORKSPACE_TABS) {
       state = addWorkspaceTab(state, () => `tab-${nextId++}`)
     }
diff --git a/ui/web/tests/unit/lib/noteWorkspaceStorage.test.ts b/ui/web/tests/unit/lib/noteWorkspaceStorage.test.ts
index cd963148f5f..b7fa8c43446 100644
--- a/ui/web/tests/unit/lib/noteWorkspaceStorage.test.ts
+++ b/ui/web/tests/unit/lib/noteWorkspaceStorage.test.ts
@@ -36,7 +36,7 @@ describe('note workspace session storage', () => {
   it('uses a blank workspace when stored JSON is invalid', () => {
     window.sessionStorage.setItem(NOTE_WORKSPACE_STORAGE_KEY, '{invalid')
 
-    const state = readNoteWorkspaceState(window.sessionStorage, () => 'fallback-tab')
+    const state = readNoteWorkspaceState({ storage: window.sessionStorage, idFactory: () => 'fallback-tab' })
 
     expect(state.tabs).toHaveLength(1)
     expect(state.activeTabId).toBe('fallback-tab')
@@ -51,7 +51,7 @@ describe('note workspace session storage', () => {
     } as unknown as Storage
     const state = createNoteWorkspaceState(() => 'tab-1')
 
-    expect(readNoteWorkspaceState(throwingStorage, () => 'fallback-tab').activeTabId).toBe('fallback-tab')
+    expect(readNoteWorkspaceState({ storage: throwingStorage, idFactory: () => 'fallback-tab' }).activeTabId).toBe('fallback-tab')
     expect(writeNoteWorkspaceState(state, throwingStorage)).toBe(false)
     expect(() => clearNoteWorkspaceState(throwingStorage)).not.toThrow()
   })
@@ -65,4 +65,18 @@ describe('note workspace session storage', () => {
     expect(window.sessionStorage.getItem(NOTE_WORKSPACE_STORAGE_KEY)).toBeNull()
     expect(window.sessionStorage.getItem('unrelated')).toBe('keep')
   })
+
+  it('does not restore another account\'s workspace from the shared session key', () => {
+    const previous = openNoteInWorkspace(createNoteWorkspaceState(() => 'tab-1', 'user-1'), note)
+    writeNoteWorkspaceState(previous)
+
+    const restoredForOwner = readNoteWorkspaceState({ userId: 'user-1' })
+    expect(restoredForOwner.tabs[0].noteId).toBe(note.id)
+
+    const restoredForOther = readNoteWorkspaceState({ userId: 'user-2' })
+    expect(restoredForOther.userId).toBe('user-2')
+    expect(restoredForOther.tabs).toHaveLength(1)
+    expect(restoredForOther.tabs[0].noteId).toBeNull()
+    expect(restoredForOther.tabs[0].note).toBeNull()
+  })
 })

From d4ac5b94575c7205302786617aff0636361d21ac Mon Sep 17 00:00:00 2001
From: denyskoreiba <denys.koreiba@flowlix.eu>
Date: Thu, 10 Sep 2026 22:10:02 +0200
Subject: [PATCH 18/23] feat(settings): add a sign out control to the account
 tab
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The account tab could only delete the account — the one way out of a session
was the sidebar icon, which the mobile layout hides. Sign out now sits between
the email and the destructive block, so the reversible action comes first.

Full width on phones, inline beside its description from sm up. It reuses the
existing sign-out flow, so it clears the workspace tabs and returns to the
sign-in screen.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 .../features/settings/DeleteAccountPanel.tsx  | 36 +++++++++++++++++++
 .../features/settings/SettingsPage.tsx        |  8 +++--
 .../settings/DeleteAccountPanel.test.tsx      | 32 +++++++++++++++++
 3 files changed, 74 insertions(+), 2 deletions(-)

diff --git a/ui/web/components/features/settings/DeleteAccountPanel.tsx b/ui/web/components/features/settings/DeleteAccountPanel.tsx
index 5424bfc0662..6ea3b0cc9b9 100644
--- a/ui/web/components/features/settings/DeleteAccountPanel.tsx
+++ b/ui/web/components/features/settings/DeleteAccountPanel.tsx
@@ -1,6 +1,7 @@
 "use client"
 
 import * as React from "react"
+import { SignOut } from "@phosphor-icons/react"
 
 import { Button } from "@/components/ui/button"
 import { Checkbox } from "@/components/ui/checkbox"
@@ -13,18 +14,32 @@ type DeleteAccountPanelProps = {
   email?: string | null
   onConfirm: () => Promise<void> | void
   loading?: boolean
+  /** Omitted where the panel is rendered without a session to end. */
+  onSignOut?: () => Promise<void> | void
 }
 
 export function DeleteAccountPanel({
   email,
   onConfirm,
   loading = false,
+  onSignOut,
 }: DeleteAccountPanelProps) {
   const [acknowledged, setAcknowledged] = React.useState(false)
   const [submitting, setSubmitting] = React.useState(false)
   const [errorMessage, setErrorMessage] = React.useState<string | null>(null)
+  const [signingOut, setSigningOut] = React.useState(false)
   const isLoading = loading || submitting
 
+  const handleSignOut = async () => {
+    if (!onSignOut || signingOut) return
+    setSigningOut(true)
+    try {
+      await onSignOut()
+    } finally {
+      setSigningOut(false)
+    }
+  }
+
   const handleConfirm = async () => {
     if (!acknowledged || isLoading) return
 
@@ -49,6 +64,27 @@ export function DeleteAccountPanel({
         <p className="mt-2 break-all text-sm sm:break-normal">{email ?? "No email available"}</p>
       </div>
 
+      {onSignOut ? (
+        <div className="flex flex-col gap-3 rounded-2xl border border-border/40 bg-background p-4 sm:flex-row sm:items-center sm:justify-between">
+          <div className="min-w-0">
+            <h3 className="text-base font-semibold">Signed in on this device</h3>
+            <p className="mt-1 text-sm text-muted-foreground">
+              Signing out leaves your account and notes untouched.
+            </p>
+          </div>
+          <Button
+            variant="outline"
+            onClick={() => void handleSignOut()}
+            disabled={signingOut}
+            data-cy="settings-sign-out-button"
+            className="w-full shrink-0 rounded-full shadow-sm sm:w-auto"
+          >
+            <SignOut className="mr-1.5 h-4 w-4" aria-hidden="true" />
+            {signingOut ? "Signing out..." : "Sign out"}
+          </Button>
+        </div>
+      ) : null}
+
       <div className="rounded-2xl border border-destructive/20 bg-destructive/5 p-4">
         <h3 className="text-base font-semibold text-red-700 dark:text-red-400">Permanent action</h3>
         <p className="mt-2 text-sm text-muted-foreground">
diff --git a/ui/web/components/features/settings/SettingsPage.tsx b/ui/web/components/features/settings/SettingsPage.tsx
index c4a462a32c4..c5d1eea7cdb 100644
--- a/ui/web/components/features/settings/SettingsPage.tsx
+++ b/ui/web/components/features/settings/SettingsPage.tsx
@@ -2,7 +2,7 @@
 
 import * as React from "react"
 import { useQueryClient } from "@tanstack/react-query"
-import { ArrowLeft, Database, Download, Globe, KeyRound, Upload, UserRound, X } from "lucide-react"
+import { ArrowLeft, Database, DownloadSimple as Download, Globe, Key as KeyRound, UploadSimple as Upload, User as UserRound, X } from "@phosphor-icons/react"
 import { useRouter, useSearchParams } from "next/navigation"
 
 import { Button } from "@/components/ui/button"
@@ -80,7 +80,7 @@ export function SettingsPage() {
   const queryClient = useQueryClient()
   const router = useRouter()
   const searchParams = useSearchParams()
-  const { user, loading, deleteAccountLoading, handleDeleteAccount } = useNoteAuth()
+  const { user, loading, deleteAccountLoading, handleDeleteAccount, handleSignOut } = useNoteAuth()
   const mobileTabsRef = React.useRef<HTMLDivElement | null>(null)
   const scrollTimeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(null)
   const [mobileTabsScrollable, setMobileTabsScrollable] = React.useState(false)
@@ -367,6 +367,10 @@ export function SettingsPage() {
                         router.push("/")
                       })}
                       loading={deleteAccountLoading}
+                      onSignOut={() => handleSignOut(() => {
+                        clearSettingsReturnState()
+                        router.push("/")
+                      })}
                     />
                   ) : null}
                 </div>
diff --git a/ui/web/tests/unit/components/features/settings/DeleteAccountPanel.test.tsx b/ui/web/tests/unit/components/features/settings/DeleteAccountPanel.test.tsx
index 24fc1cabd03..50418fc0150 100644
--- a/ui/web/tests/unit/components/features/settings/DeleteAccountPanel.test.tsx
+++ b/ui/web/tests/unit/components/features/settings/DeleteAccountPanel.test.tsx
@@ -28,6 +28,38 @@ describe("DeleteAccountPanel", () => {
     ).toBeTruthy()
   })
 
+  it("omits the sign out control when no session handler is provided", () => {
+    render(<DeleteAccountPanel {...defaultProps} />)
+
+    expect(screen.queryByRole("button", { name: /sign out/i })).toBeNull()
+  })
+
+  it("renders a sign out control and reports the click", async () => {
+    const onSignOut = jest.fn().mockResolvedValue(undefined)
+    render(<DeleteAccountPanel {...defaultProps} onSignOut={onSignOut} />)
+
+    const button = screen.getByRole("button", { name: "Sign out" })
+    fireEvent.click(button)
+
+    await waitFor(() => expect(onSignOut).toHaveBeenCalledTimes(1))
+  })
+
+  it("blocks a second sign out while the first is still running", async () => {
+    let release: (() => void) | undefined
+    const onSignOut = jest.fn().mockImplementation(() => new Promise<void>((resolve) => { release = resolve }))
+    render(<DeleteAccountPanel {...defaultProps} onSignOut={onSignOut} />)
+
+    fireEvent.click(screen.getByRole("button", { name: "Sign out" }))
+
+    const pending = await screen.findByRole("button", { name: "Signing out..." })
+    expect(pending.hasAttribute("disabled")).toBe(true)
+    fireEvent.click(pending)
+    expect(onSignOut).toHaveBeenCalledTimes(1)
+
+    release?.()
+    await waitFor(() => expect(screen.getByRole("button", { name: "Sign out" })).toBeTruthy())
+  })
+
   it("renders fallback text when email is missing or null", () => {
     render(<DeleteAccountPanel {...defaultProps} email={null} />)
 

From cea5b12af5c6b4a3038d629145d01846bb0bdc8b Mon Sep 17 00:00:00 2001
From: denyskoreiba <denys.koreiba@flowlix.eu>
Date: Thu, 10 Sep 2026 22:10:12 +0200
Subject: [PATCH 19/23] refactor(ui): move icons from lucide-react to
 @phosphor-icons/react

The note action bar and formatting toolbar read as unpolished on phones.
Compared side by side at the sizes the app actually renders, Phosphor regular
is the softer, more even set in a dense toolbar.

The swap is app-wide, including the vendored components/ui primitives: the
Select caret and Checkbox tick sit directly beside note-toolbar icons, so a
partial swap would show. 77 icon names were remapped; local identifiers are
preserved with import aliases (TextB as Bold), so JSX bodies are untouched.

- next.config.js lists the package under optimizePackageImports. It is a
  barrel of ~1500 icons and this app is a static export; verified against a
  production build that unreferenced icons stay out of the chunks.
- Lucide emitted per-icon CSS classes and six Cypress selectors keyed on them
  (.lucide-chevron-left, svg.lucide-tag, .lucide-log-out, svg.lucide-sun).
  Those broke at once. Stable data-cy hooks were added to the note action bar,
  the tab strip, the mobile tab menu, the sidebar sign-out, the theme toggle
  and the tag input, and the specs now target those.
- cypress/README.md records the rule: select on data-cy or data-testid, never
  on an icon library's classes and never on button text a breakpoint can hide.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 app/auth/callback/page.tsx                    |  2 +-
 app/page.tsx                                  |  2 +-
 cypress/README.md                             | 17 ++++++
 .../features/mobile/MobileLayout.cy.tsx       |  8 +--
 .../features/notes/NoteEditor.cy.tsx          | 12 ++--
 .../features/notes/NotesTabStrip.cy.tsx       |  2 +-
 .../component/features/notes/Sidebar.cy.tsx   |  2 +-
 cypress/support/commands.ts                   |  2 +-
 .../ai/design/2026-09-10-icon-set-phosphor.md | 60 +++++++++++++++++++
 next.config.js                                |  6 ++
 package-lock.json                             | 24 ++++----
 package.json                                  |  2 +-
 ui/web/components/EditorMenuBar.tsx           | 29 +--------
 ui/web/components/ErrorBoundary.tsx           |  2 +-
 ui/web/components/ExportButton.tsx            |  2 +-
 ui/web/components/ExportProgressDialog.tsx    |  2 +-
 ui/web/components/ImportButton.tsx            |  2 +-
 ui/web/components/ImportDialog.tsx            |  2 +-
 ui/web/components/ImportProgressDialog.tsx    |  2 +-
 ui/web/components/InteractiveTag.tsx          |  2 +-
 ui/web/components/TagInput.tsx                |  4 +-
 .../features/navigation/NavRail.tsx           |  2 +-
 .../features/notes/MobileNotesTabMenu.tsx     |  6 +-
 .../features/notes/MoreActionsMenu.tsx        |  4 +-
 .../components/features/notes/NoteEditor.tsx  |  6 +-
 ui/web/components/features/notes/NoteList.tsx |  2 +-
 ui/web/components/features/notes/NoteView.tsx |  5 +-
 .../components/features/notes/NotesShell.tsx  |  2 +-
 .../features/notes/NotesTabStrip.tsx          |  6 +-
 .../features/notes/RagIndexPanel.tsx          |  2 +-
 .../features/notes/SearchResultsPanel.tsx     |  2 +-
 .../features/notes/SelectionModeActions.tsx   |  2 +-
 .../features/notes/SettingsPanel.tsx          |  2 +-
 .../features/notes/ShareNoteDialog.tsx        |  2 +-
 ui/web/components/features/notes/Sidebar.tsx  |  3 +-
 .../features/oauth/OAuthConsentLayout.tsx     |  2 +-
 .../features/oauth/OAuthConsentPageClient.tsx |  2 +-
 .../features/search/AiSearchToggle.tsx        |  2 +-
 .../features/search/ChunkSearchItem.tsx       |  2 +-
 .../features/search/ChunkSearchResults.tsx    |  2 +-
 .../features/search/NoteSearchItem.tsx        |  2 +-
 .../features/search/NoteSearchResults.tsx     |  2 +-
 .../features/settings/AIIndexList.tsx         |  2 +-
 .../features/settings/AIIndexNoteRow.tsx      |  2 +-
 .../features/settings/AIIndexTab.tsx          |  2 +-
 .../settings/ApiKeysSettingsPanel.tsx         |  2 +-
 .../settings/RagIndexingSettingsPanel.tsx     |  4 +-
 .../settings/RagSearchSettingsPanel.tsx       |  2 +-
 .../settings/WordPressSettingsPanel.tsx       |  2 +-
 ui/web/components/features/tags/TagCard.tsx   |  2 +-
 ui/web/components/features/tags/TagsPage.tsx  |  2 +-
 .../wordpress/ExportToWordPressButton.tsx     |  2 +-
 .../wordpress/WordPressExportDialog.tsx       |  2 +-
 ui/web/components/theme-toggle.tsx            |  3 +-
 ui/web/components/ui/accordion.tsx            |  2 +-
 ui/web/components/ui/breadcrumb.tsx           |  2 +-
 ui/web/components/ui/calendar.tsx             |  6 +-
 ui/web/components/ui/carousel.tsx             |  2 +-
 ui/web/components/ui/checkbox.tsx             |  2 +-
 ui/web/components/ui/command.tsx              |  2 +-
 ui/web/components/ui/context-menu.tsx         |  2 +-
 ui/web/components/ui/dialog.tsx               |  2 +-
 ui/web/components/ui/dropdown-menu.tsx        |  2 +-
 ui/web/components/ui/input-otp.tsx            |  2 +-
 ui/web/components/ui/menubar.tsx              |  2 +-
 ui/web/components/ui/navigation-menu.tsx      |  2 +-
 ui/web/components/ui/pagination.tsx           |  2 +-
 ui/web/components/ui/resizable.tsx            |  2 +-
 ui/web/components/ui/select.tsx               |  2 +-
 ui/web/components/ui/sheet.tsx                |  2 +-
 ui/web/components/ui/sidebar.tsx              |  2 +-
 ui/web/components/ui/toast.tsx                |  2 +-
 .../unit/components/aiIndexList.test.tsx      |  4 +-
 .../tests/unit/components/noteList.test.tsx   |  6 +-
 74 files changed, 198 insertions(+), 125 deletions(-)
 create mode 100644 docs/ai/design/2026-09-10-icon-set-phosphor.md

diff --git a/app/auth/callback/page.tsx b/app/auth/callback/page.tsx
index aecf6880938..9a69fa64354 100644
--- a/app/auth/callback/page.tsx
+++ b/app/auth/callback/page.tsx
@@ -2,7 +2,7 @@
 
 import { useEffect } from "react"
 import { useRouter } from "next/navigation"
-import { Loader2 } from "lucide-react"
+import { CircleNotch as Loader2 } from "@phosphor-icons/react"
 
 import { webSupabaseClientFactory } from "@ui/web/adapters/supabaseClient"
 import { webStorageAdapter } from "@ui/web/adapters/storage"
diff --git a/app/page.tsx b/app/page.tsx
index ba9330b7b10..86b499ff9de 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,7 +1,7 @@
 "use client"
 
 import { useEffect, useEffectEvent } from "react"
-import { Loader2 } from "lucide-react"
+import { CircleNotch as Loader2 } from "@phosphor-icons/react"
 import { toast } from "sonner"
 
 import { AuthShell } from "@/components/features/auth/AuthShell"
diff --git a/cypress/README.md b/cypress/README.md
index 71705fcb29b..34bb1a98bd8 100644
--- a/cypress/README.md
+++ b/cypress/README.md
@@ -52,6 +52,23 @@ cypress/
     └── commands.ts         # Кастомные команды
 ```
 
+## 🔎 Селекторы: `data-cy`, а не классы иконок
+
+Цепляйтесь за `data-cy` (для кнопок и других управляющих элементов) или
+`data-testid` (для контейнеров и регионов). Не используйте:
+
+- **CSS-классы библиотеки иконок** (`.lucide-chevron-left`, `svg.lucide-tag`).
+  Их генерирует библиотека, и при смене набора иконок все такие тесты падают
+  разом — ровно это и случилось при переходе с Lucide на Phosphor.
+- **Видимый текст кнопки** (`cy.contains('Save')`) там, где подпись скрывается
+  на части брейкпоинтов. Такой селектор молча перестаёт находить элемент, а
+  Allure при этом падает с `RangeError: Invalid string length` вместо
+  внятного сообщения об ассерте.
+
+`aria-label` как селектор допустим, но это пользовательский текст — он меняется
+вместе с копирайтом и локализацией, поэтому для новых тестов предпочтительнее
+`data-cy`.
+
 ## 🎯 Кастомные команды Cypress
 
 ```javascript
diff --git a/cypress/component/features/mobile/MobileLayout.cy.tsx b/cypress/component/features/mobile/MobileLayout.cy.tsx
index 1f48faf1cdb..740cfb5deef 100644
--- a/cypress/component/features/mobile/MobileLayout.cy.tsx
+++ b/cypress/component/features/mobile/MobileLayout.cy.tsx
@@ -324,11 +324,11 @@ describe('Mobile Layout Adaptation', () => {
       </ThemeProvider>
     )
 
-    // Back button (ChevronLeft) should exist
-    cy.get('.lucide-chevron-left').should('exist')
+    // Back button should exist
+    cy.get('[data-cy="note-back-button"]').should('exist')
 
     // Click back button
-    cy.get('.lucide-chevron-left').parent().click()
+    cy.get('[data-cy="note-back-button"]').click()
     cy.get('@handleSelectNote').should('have.been.calledWith', null)
   })
 
@@ -354,6 +354,6 @@ describe('Mobile Layout Adaptation', () => {
     )
 
     // Back button should have md:hidden class
-    cy.get('.lucide-chevron-left').parent().should('have.class', 'md:hidden')
+    cy.get('[data-cy="note-back-button"]').should('have.class', 'md:hidden')
   })
 })
diff --git a/cypress/component/features/notes/NoteEditor.cy.tsx b/cypress/component/features/notes/NoteEditor.cy.tsx
index 7855ad8e71c..f8b9dfeb65a 100644
--- a/cypress/component/features/notes/NoteEditor.cy.tsx
+++ b/cypress/component/features/notes/NoteEditor.cy.tsx
@@ -61,7 +61,7 @@ describe('NoteEditor Component', () => {
     cy.get('button[title="Add tag"]').click()
     cy.get('input[placeholder="work, personal, ideas"]').type('New Tag{enter}')
 
-    cy.get('button[aria-label="Save"]').click()
+    cy.get('[data-cy="note-save-button"]').click()
 
     cy.get('@onSave').should('have.been.calledWith', Cypress.sinon.match({
       title: 'New Title',
@@ -72,10 +72,10 @@ describe('NoteEditor Component', () => {
   it('handles save and read actions', () => {
     cy.mount(<NoteEditor {...getDefaultProps()} />)
 
-    cy.get('button[aria-label="Save"]').click()
+    cy.get('[data-cy="note-save-button"]').click()
     cy.get('@onSave').should('have.been.called')
 
-    cy.get('button[aria-label="Read"]').click()
+    cy.get('[data-cy="note-read-button"]').click()
     cy.get('@onRead').should('have.been.called')
   })
 
@@ -86,7 +86,7 @@ describe('NoteEditor Component', () => {
     // "Saving..." text is now in a separate div, not in the button
     cy.contains('Saving...').should('be.visible')
     // Button should be disabled during manual save, but text remains "Save"
-    cy.get('button[aria-label="Save"]').should('be.disabled')
+    cy.get('[data-cy="note-save-button"]').should('be.disabled')
   })
 
   it('shows auto-saving state without disabling button', () => {
@@ -95,7 +95,7 @@ describe('NoteEditor Component', () => {
 
     cy.contains('Saving...').should('be.visible')
     // Button should NOT be disabled during auto-save
-    cy.get('button[aria-label="Save"]').should('not.be.disabled')
+    cy.get('[data-cy="note-save-button"]').should('not.be.disabled')
   })
 
   it('shows last saved timestamp', () => {
@@ -528,7 +528,7 @@ describe('NoteEditor Component', () => {
     cy.mount(<NoteEditor {...props} />)
 
     cy.get('.overflow-x-auto').scrollTo('right', { duration: 100, ensureScrollable: false })
-    cy.get('[data-testid="tag-input-container"]').find('svg.lucide-tag').first().click()
+    cy.get('[data-testid="tag-input-container"]').find('[data-cy="tag-input-label"]').first().click()
     
     cy.get('input[placeholder="work, personal, ideas"]')
       .should('be.visible')
diff --git a/cypress/component/features/notes/NotesTabStrip.cy.tsx b/cypress/component/features/notes/NotesTabStrip.cy.tsx
index 85c64076414..40cc11902af 100644
--- a/cypress/component/features/notes/NotesTabStrip.cy.tsx
+++ b/cypress/component/features/notes/NotesTabStrip.cy.tsx
@@ -39,7 +39,7 @@ describe('Desktop notes tab strip', () => {
     // (The scroll arrows depend on measured overflow, which this component
     // harness does not reproduce faithfully — they are covered in the jsdom
     // unit test where the viewport size is controlled directly.)
-    cy.get('button[aria-label="Add note tab"]')
+    cy.get('[data-cy="add-tab-button"]')
       .should('be.visible')
       .and('not.be.disabled')
       .parent()
diff --git a/cypress/component/features/notes/Sidebar.cy.tsx b/cypress/component/features/notes/Sidebar.cy.tsx
index b2dec76e583..65ecaf54742 100644
--- a/cypress/component/features/notes/Sidebar.cy.tsx
+++ b/cypress/component/features/notes/Sidebar.cy.tsx
@@ -141,7 +141,7 @@ describe('Sidebar Component', () => {
     cy.get('button[aria-label="Open settings page"]').click()
     cy.get('@onOpenSettings').should('have.been.calledOnce')
 
-    cy.get('button').find('.lucide-log-out').parent().click()
+    cy.get('[data-cy="sign-out-button"]').click()
     cy.get('@onSignOut').should('have.been.calledOnce')
   })
 
diff --git a/cypress/support/commands.ts b/cypress/support/commands.ts
index 9298f103abd..c5024909186 100644
--- a/cypress/support/commands.ts
+++ b/cypress/support/commands.ts
@@ -148,7 +148,7 @@ Cypress.Commands.add('filterByTag', (tag: string) => {
 })
 
 Cypress.Commands.add('toggleTheme', () => {
-  cy.get('button').filter(':has(svg.lucide-sun, svg.lucide-moon)').click()
+  cy.get('[data-cy="theme-toggle"]').click()
 })
 
 Cypress.Commands.add('importEnex', (filename: string, strategy: ImportStrategy = 'prefix') => {
diff --git a/docs/ai/design/2026-09-10-icon-set-phosphor.md b/docs/ai/design/2026-09-10-icon-set-phosphor.md
new file mode 100644
index 00000000000..17626b9dd70
--- /dev/null
+++ b/docs/ai/design/2026-09-10-icon-set-phosphor.md
@@ -0,0 +1,60 @@
+---
+phase: design
+title: Icon set — Lucide to Phosphor
+description: Why the web app moved from lucide-react to @phosphor-icons/react, and the rules that keep the swap from breaking tests again
+---
+
+# Icon set — Lucide to Phosphor
+
+## Decision
+
+The web app renders all icons from `@phosphor-icons/react` at the default
+`regular` weight. `lucide-react` is removed.
+
+## Context
+
+The note action bar and the formatting toolbar read as unpolished on phones.
+Two causes, only one of which was the icon set:
+
+- **Presentation.** Sizes were inconsistent across the app (14px in the note
+  header, 16px in the toolbar, 20px on the back control), and Lucide's 2px
+  stroke is heavy at 14px.
+- **The glyphs themselves.** Compared side by side at the sizes the app really
+  uses, Phosphor regular reads softer and more even in a dense toolbar.
+
+Both weights of Phosphor and the current Lucide rendering were compared on a
+generated sheet covering all 39 icons the notes UI renders, in situ in a mock
+action bar. Phosphor regular was chosen.
+
+## Scope
+
+The swap is app-wide, including the vendored `components/ui/*` primitives.
+Mixing two icon families is worse than either one: the Select caret and the
+Checkbox tick sit directly beside note-toolbar icons, so a partial swap would
+be visible.
+
+77 distinct icon names were remapped. Local identifiers were preserved with
+import aliases (`TextB as Bold`), so JSX bodies are untouched and the diff
+stays reviewable.
+
+## Consequences
+
+- **Bundle.** `@phosphor-icons/react` is a barrel of ~1500 icons and the app is
+  a static export (`output: 'export'`). `experimental.optimizePackageImports`
+  in `next.config.js` lists the package so only the icons used are emitted;
+  verified against the production build — unreferenced icons are absent from
+  `out/_next/static/chunks`.
+- **Weights.** Phosphor icons are fill-based paths, not strokes, so
+  `strokeWidth` no longer applies. Use the `weight` prop (`regular` default,
+  `fill` for a solid dot such as the unsaved-tab marker).
+- **Test selectors.** Lucide emitted per-icon CSS classes (`.lucide-tag`,
+  `.lucide-chevron-left`) and several Cypress specs selected on them. Those
+  classes do not exist in Phosphor, so every such test broke at once.
+
+## Rule that follows from this
+
+Tests target `data-cy` (controls) or `data-testid` (containers) — never an
+icon library's generated classes, and never visible button text that a
+breakpoint can hide. See `cypress/README.md`. Stable hooks were added to the
+note action bar, the workspace tab strip, the mobile tab menu, the sidebar
+sign-out, the theme toggle, and the tag input while making this change.
diff --git a/next.config.js b/next.config.js
index b4ddb66aed4..f554aaa9ad4 100644
--- a/next.config.js
+++ b/next.config.js
@@ -12,6 +12,12 @@ const nextConfig = {
   },
   trailingSlash: true,
   turbopack: {},
+  experimental: {
+    // @phosphor-icons/react is a barrel of ~1500 icons. Without this, a static
+    // export pulls the whole set into the client bundle instead of the few
+    // dozen the app renders.
+    optimizePackageImports: ['@phosphor-icons/react'],
+  },
   allowedDevOrigins: process.env.ALLOWED_DEV_ORIGINS ? process.env.ALLOWED_DEV_ORIGINS.split(',') : ['192.168.0.15', '192.168.0.15:3000'], // NOSONAR
   webpack(config, { dev }) {
     if (dev) {
diff --git a/package-lock.json b/package-lock.json
index 643cc742501..bcaab323f33 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
         "@babel/runtime": "^7.29.2",
         "@hookform/resolvers": "^5.2.2",
         "@modelcontextprotocol/sdk": "^1.30.0",
+        "@phosphor-icons/react": "^2.1.10",
         "@radix-ui/react-accordion": "^1.2.12",
         "@radix-ui/react-alert-dialog": "^1.1.15",
         "@radix-ui/react-aspect-ratio": "^1.1.7",
@@ -67,7 +68,6 @@
         "embla-carousel-react": "^8.6.0",
         "input-otp": "^1.4.2",
         "isomorphic-dompurify": "^2.36.0",
-        "lucide-react": "^1.24.0",
         "markdown-it": "^14.1.1",
         "next": "^16.2.12",
         "next-themes": "^0.4.6",
@@ -6462,6 +6462,19 @@
         "node": ">=12.4.0"
       }
     },
+    "node_modules/@phosphor-icons/react": {
+      "version": "2.1.10",
+      "resolved": "https://registry.npmjs.org/@phosphor-icons/react/-/react-2.1.10.tgz",
+      "integrity": "sha512-vt8Tvq8GLjheAZZYa+YG/pW7HDbov8El/MANW8pOAz4eGxrwhnbfrQZq0Cp4q8zBEu8NIhHdnr+r8thnfRSNYA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8",
+        "react-dom": ">= 16.8"
+      }
+    },
     "node_modules/@pkgjs/parseargs": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
@@ -20590,15 +20603,6 @@
         "yallist": "^3.0.2"
       }
     },
-    "node_modules/lucide-react": {
-      "version": "1.24.0",
-      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-1.24.0.tgz",
-      "integrity": "sha512-YT6mBD8lGKkg4nM39enlm94/sfJIiW0YKUT60fBy4YK8tai31ylg1VhGNWxkpSKHo9UagfnZqwIff3HTDQwXeA==",
-      "license": "ISC",
-      "peerDependencies": {
-        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
-      }
-    },
     "node_modules/lz-string": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz",
diff --git a/package.json b/package.json
index 70c0faa4622..8d62a761b4c 100644
--- a/package.json
+++ b/package.json
@@ -56,6 +56,7 @@
     "@babel/runtime": "^7.29.2",
     "@hookform/resolvers": "^5.2.2",
     "@modelcontextprotocol/sdk": "^1.30.0",
+    "@phosphor-icons/react": "^2.1.10",
     "@radix-ui/react-accordion": "^1.2.12",
     "@radix-ui/react-alert-dialog": "^1.1.15",
     "@radix-ui/react-aspect-ratio": "^1.1.7",
@@ -111,7 +112,6 @@
     "embla-carousel-react": "^8.6.0",
     "input-otp": "^1.4.2",
     "isomorphic-dompurify": "^2.36.0",
-    "lucide-react": "^1.24.0",
     "markdown-it": "^14.1.1",
     "next": "^16.2.12",
     "next-themes": "^0.4.6",
diff --git a/ui/web/components/EditorMenuBar.tsx b/ui/web/components/EditorMenuBar.tsx
index e6181dc7cfc..810bc95f6f5 100644
--- a/ui/web/components/EditorMenuBar.tsx
+++ b/ui/web/components/EditorMenuBar.tsx
@@ -3,34 +3,7 @@
 import * as React from "react"
 import type { Editor } from "@tiptap/react"
 import { Button } from "@ui/web/components/ui/button"
-import {
-  AlignCenter,
-  AlignLeft,
-  AlignRight,
-  Bold,
-  Undo,
-  Redo,
-  CheckSquare,
-  Heading1,
-  Heading2,
-  Heading3,
-  Highlighter,
-  ImageIcon,
-  Indent,
-  Italic,
-  Link2,
-  List,
-  ListOrdered,
-  Minus,
-  Outdent,
-  Palette,
-  RemoveFormatting,
-  SpellCheck,
-  Strikethrough,
-  Subscript as SubscriptIcon,
-  Superscript as SuperscriptIcon,
-  Underline as UnderlineIcon,
-} from "lucide-react"
+import { TextAlignCenter as AlignCenter, TextAlignLeft as AlignLeft, TextAlignRight as AlignRight, TextB as Bold, ArrowUUpLeft as Undo, ArrowUUpRight as Redo, CheckSquare, TextHOne as Heading1, TextHTwo as Heading2, TextHThree as Heading3, Highlighter, Image as ImageIcon, TextIndent as Indent, TextItalic as Italic, LinkSimple as Link2, List, ListNumbers as ListOrdered, Minus, TextOutdent as Outdent, Palette, TextTSlash as RemoveFormatting, TextAa as SpellCheck, TextStrikethrough as Strikethrough, TextSubscript as SubscriptIcon, TextSuperscript as SuperscriptIcon, TextUnderline as UnderlineIcon } from "@phosphor-icons/react"
 import { Popover, PopoverContent, PopoverTrigger } from "@ui/web/components/ui/popover"
 import { TwitterPicker, type ColorResult } from "react-color"
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@ui/web/components/ui/select"
diff --git a/ui/web/components/ErrorBoundary.tsx b/ui/web/components/ErrorBoundary.tsx
index be6ea73b833..8f3ad477347 100644
--- a/ui/web/components/ErrorBoundary.tsx
+++ b/ui/web/components/ErrorBoundary.tsx
@@ -1,7 +1,7 @@
 "use client"
 
 import { Component, type ErrorInfo, type ReactNode } from "react"
-import { AlertCircle } from "lucide-react"
+import { WarningCircle as AlertCircle } from "@phosphor-icons/react"
 
 import { Button } from "@/components/ui/button"
 import {
diff --git a/ui/web/components/ExportButton.tsx b/ui/web/components/ExportButton.tsx
index fec72dad3da..c68fc73163d 100644
--- a/ui/web/components/ExportButton.tsx
+++ b/ui/web/components/ExportButton.tsx
@@ -1,7 +1,7 @@
 "use client"
 
 import * as React from "react"
-import { Download } from "lucide-react"
+import { DownloadSimple as Download } from "@phosphor-icons/react"
 import { toast } from "sonner"
 
 import { ExportSelectionDialog } from "@/components/ExportSelectionDialog"
diff --git a/ui/web/components/ExportProgressDialog.tsx b/ui/web/components/ExportProgressDialog.tsx
index ca8f752d008..e4b6150cfc6 100644
--- a/ui/web/components/ExportProgressDialog.tsx
+++ b/ui/web/components/ExportProgressDialog.tsx
@@ -3,7 +3,7 @@
 import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog"
 import { Progress } from "@/components/ui/progress"
 import { Button } from "@/components/ui/button"
-import { CheckCircle2, Loader2 } from "lucide-react"
+import { CheckCircle as CheckCircle2, CircleNotch as Loader2 } from "@phosphor-icons/react"
 
 import type { ExportProgress } from "@core/enex/export-types"
 
diff --git a/ui/web/components/ImportButton.tsx b/ui/web/components/ImportButton.tsx
index 295ab8d2793..96d660c3519 100644
--- a/ui/web/components/ImportButton.tsx
+++ b/ui/web/components/ImportButton.tsx
@@ -1,7 +1,7 @@
 "use client"
 
 import * as React from "react"
-import { Upload } from "lucide-react"
+import { UploadSimple as Upload } from "@phosphor-icons/react"
 import { toast } from "sonner"
 
 import { Button } from "@/components/ui/button"
diff --git a/ui/web/components/ImportDialog.tsx b/ui/web/components/ImportDialog.tsx
index 808feb7f299..0587ab28793 100644
--- a/ui/web/components/ImportDialog.tsx
+++ b/ui/web/components/ImportDialog.tsx
@@ -1,7 +1,7 @@
 "use client"
 
 import * as React from "react"
-import { FileText, Upload } from "lucide-react"
+import { FileText, UploadSimple as Upload } from "@phosphor-icons/react"
 
 import { Button } from "@/components/ui/button"
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"
diff --git a/ui/web/components/ImportProgressDialog.tsx b/ui/web/components/ImportProgressDialog.tsx
index a1be5823b2c..5cb86c6489b 100644
--- a/ui/web/components/ImportProgressDialog.tsx
+++ b/ui/web/components/ImportProgressDialog.tsx
@@ -10,7 +10,7 @@ import {
 } from "@/components/ui/dialog"
 import { Progress } from "@/components/ui/progress"
 import { Button } from "@/components/ui/button"
-import { CheckCircle2, Loader2, XCircle } from "lucide-react"
+import { CheckCircle as CheckCircle2, CircleNotch as Loader2, XCircle } from "@phosphor-icons/react"
 
 import type { ImportProgress, ImportResult } from "@core/enex/types"
 
diff --git a/ui/web/components/InteractiveTag.tsx b/ui/web/components/InteractiveTag.tsx
index 1b4bc7588b4..d40d9ef7363 100644
--- a/ui/web/components/InteractiveTag.tsx
+++ b/ui/web/components/InteractiveTag.tsx
@@ -1,7 +1,7 @@
 "use client"
 
 import * as React from "react"
-import { Tag, X } from "lucide-react"
+import { Tag, X } from "@phosphor-icons/react"
 
 import { Badge } from "@/components/ui/badge"
 import { cn } from "@ui/web/lib/utils"
diff --git a/ui/web/components/TagInput.tsx b/ui/web/components/TagInput.tsx
index b3efd3ee86f..1e18ddb0652 100644
--- a/ui/web/components/TagInput.tsx
+++ b/ui/web/components/TagInput.tsx
@@ -1,7 +1,7 @@
 "use client"
 
 import * as React from "react"
-import { Plus, X, Tag } from "lucide-react"
+import { Plus, X, Tag } from "@phosphor-icons/react"
 import { Badge } from "@/components/ui/badge"
 import { HorizontalTagScroll } from "@/components/HorizontalTagScroll"
 import { cn } from "@ui/web/lib/utils"
@@ -197,7 +197,7 @@ export function TagInput({
           "flex items-center min-h-[44px] px-3 bg-muted/30 border border-transparent rounded-2xl transition-all duration-200 cursor-text bg-background border-primary/30 shadow-[0_2px_10px_-3px_rgba(0,0,0,0.05)] ring-4 ring-primary/5"
         )}
       >
-        <div className="flex items-center gap-1.5 text-xs font-bold text-foreground/70 uppercase tracking-wider shrink-0 mr-2 select-none">
+        <div data-cy="tag-input-label" className="flex items-center gap-1.5 text-xs font-bold text-foreground/70 uppercase tracking-wider shrink-0 mr-2 select-none">
           <Tag className="w-3.5 h-3.5" />
           <span className="hidden sm:inline">Tags</span>
         </div>
diff --git a/ui/web/components/features/navigation/NavRail.tsx b/ui/web/components/features/navigation/NavRail.tsx
index a6be3fe73da..8914d67578b 100644
--- a/ui/web/components/features/navigation/NavRail.tsx
+++ b/ui/web/components/features/navigation/NavRail.tsx
@@ -1,7 +1,7 @@
 "use client"
 
 import * as React from "react"
-import { FileText, Tag, Search, Settings, PanelLeftClose, PanelLeft } from "lucide-react"
+import { FileText, Tag, MagnifyingGlass as Search, Gear as Settings, Sidebar as PanelLeftClose, SidebarSimple as PanelLeft } from "@phosphor-icons/react"
 import { Button } from "@/components/ui/button"
 import { cn } from "@ui/web/lib/utils"
 
diff --git a/ui/web/components/features/notes/MobileNotesTabMenu.tsx b/ui/web/components/features/notes/MobileNotesTabMenu.tsx
index 550ec9ff209..7fcb924474c 100644
--- a/ui/web/components/features/notes/MobileNotesTabMenu.tsx
+++ b/ui/web/components/features/notes/MobileNotesTabMenu.tsx
@@ -1,7 +1,7 @@
 "use client"
 
 import { useEffect, useRef, useState } from "react"
-import { List, Plus, X } from "lucide-react"
+import { List, Plus, X } from "@phosphor-icons/react"
 import type { NoteWorkspaceTab } from "@core/services/noteWorkspaceTabs"
 import { Button } from "@/components/ui/button"
 import { cn } from "@ui/web/lib/utils"
@@ -95,6 +95,7 @@ export function MobileNotesTabMenu({
           variant="outline"
           size="sm"
           className="shrink-0"
+          data-cy="mobile-tabs-toggle"
           aria-expanded={isOpen}
           aria-controls="mobile-notes-tab-list"
           aria-label={`Open note tabs (${tabs.length})`}
@@ -127,6 +128,7 @@ export function MobileNotesTabMenu({
                 >
                   <Button
                     type="button"
+                    data-cy="mobile-workspace-tab"
                     aria-pressed={isActive}
                     aria-label={tab.noteId ? undefined : "Open empty note tab"}
                     variant="ghost"
@@ -143,6 +145,7 @@ export function MobileNotesTabMenu({
                     variant="ghost"
                     size="icon"
                     className="h-8 w-8 shrink-0 text-muted-foreground hover:text-foreground"
+                    data-cy="mobile-workspace-tab-close"
                     aria-label={tab.noteId ? `Close ${label}` : "Close empty note tab"}
                     title={`Close ${label}`}
                     onMouseDown={(event) => event.preventDefault()}
@@ -158,6 +161,7 @@ export function MobileNotesTabMenu({
             type="button"
             variant="ghost"
             className="mt-1 w-full justify-start rounded-lg"
+            data-cy="mobile-add-tab-button"
             onMouseDown={(event) => event.preventDefault()}
             onClick={handleAdd}
             disabled={addTabDisabled || addTabCapacityPending}
diff --git a/ui/web/components/features/notes/MoreActionsMenu.tsx b/ui/web/components/features/notes/MoreActionsMenu.tsx
index cc626ed0899..ee7c3680bc3 100644
--- a/ui/web/components/features/notes/MoreActionsMenu.tsx
+++ b/ui/web/components/features/notes/MoreActionsMenu.tsx
@@ -1,7 +1,7 @@
 "use client"
 
 import * as React from 'react'
-import { MoreHorizontal, Share2, Trash2 } from 'lucide-react'
+import { DotsThree as MoreHorizontal, ShareNetwork as Share2, Trash as Trash2 } from "@phosphor-icons/react"
 import { Button } from '@/components/ui/button'
 import {
   DropdownMenu,
@@ -45,7 +45,7 @@ export function MoreActionsMenu({
     <>
       <DropdownMenu open={moreMenuOpen} onOpenChange={setMoreMenuOpen} modal={false}>
         <DropdownMenuTrigger asChild>
-          <Button variant="outline" size="icon" aria-label="More actions">
+          <Button variant="outline" size="icon" data-cy="note-more-button" aria-label="More actions">
             <MoreHorizontal className="w-4 h-4" />
           </Button>
         </DropdownMenuTrigger>
diff --git a/ui/web/components/features/notes/NoteEditor.tsx b/ui/web/components/features/notes/NoteEditor.tsx
index aca270d546f..105aba71271 100644
--- a/ui/web/components/features/notes/NoteEditor.tsx
+++ b/ui/web/components/features/notes/NoteEditor.tsx
@@ -1,7 +1,7 @@
 "use client"
 
 import * as React from "react"
-import { ChevronLeft, Copy, Check, Eye, Save as SaveIcon } from "lucide-react"
+import { CaretLeft as ChevronLeft, Copy, Check, Eye, FloppyDisk as SaveIcon } from "@phosphor-icons/react"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import RichTextEditor, { type RichTextEditorHandle } from "@/components/RichTextEditor"
@@ -375,6 +375,7 @@ export const NoteEditor = React.memo(React.forwardRef<NoteEditorHandle, NoteEdit
               size="icon"
               className="h-9 w-9 shrink-0 rounded-full shadow-sm md:hidden"
               onClick={onBack}
+              data-cy="note-back-button"
               aria-label="Back"
             >
               <ChevronLeft className="h-4 w-4" />
@@ -394,6 +395,7 @@ export const NoteEditor = React.memo(React.forwardRef<NoteEditorHandle, NoteEdit
               onClick={handleRead}
               variant="outline"
               size="sm"
+              data-cy="note-read-button"
               aria-label="Read"
               disabled={isSaving}
               className="rounded-full shadow-sm"
@@ -405,6 +407,7 @@ export const NoteEditor = React.memo(React.forwardRef<NoteEditorHandle, NoteEdit
               variant="outline"
               size="sm"
               disabled={isSaving || isBodyEmpty}
+              data-cy="note-copy-button"
               aria-label="Copy note"
               onClick={handleCopy}
               className="rounded-full shadow-sm"
@@ -419,6 +422,7 @@ export const NoteEditor = React.memo(React.forwardRef<NoteEditorHandle, NoteEdit
             <Button
               onClick={handleSave}
               size="sm"
+              data-cy="note-save-button"
               aria-label="Save"
               disabled={isSaving}
               className="rounded-full shadow-sm"
diff --git a/ui/web/components/features/notes/NoteList.tsx b/ui/web/components/features/notes/NoteList.tsx
index 41714d33436..d17d325fb26 100644
--- a/ui/web/components/features/notes/NoteList.tsx
+++ b/ui/web/components/features/notes/NoteList.tsx
@@ -3,7 +3,7 @@
 import { memo, useMemo } from "react"
 import type { CSSProperties } from "react"
 import type { ReactNode } from "react"
-import { Loader2, Zap } from "lucide-react"
+import { CircleNotch as Loader2, Lightning as Zap } from "@phosphor-icons/react"
 import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
 import { NoteListSkeleton } from "@/components/NoteListSkeleton"
diff --git a/ui/web/components/features/notes/NoteView.tsx b/ui/web/components/features/notes/NoteView.tsx
index dee07f12fe3..90db923c4c8 100644
--- a/ui/web/components/features/notes/NoteView.tsx
+++ b/ui/web/components/features/notes/NoteView.tsx
@@ -1,7 +1,7 @@
 "use client"
 
 import * as React from "react"
-import { Edit2, Trash2, ChevronLeft, Copy, Check } from "lucide-react"
+import { PencilSimple as Edit2, Trash as Trash2, CaretLeft as ChevronLeft, Copy, Check } from "@phosphor-icons/react"
 import { Button } from "@/components/ui/button"
 import InteractiveTag from "@/components/InteractiveTag"
 import { HorizontalTagScroll } from "@/components/HorizontalTagScroll"
@@ -101,6 +101,7 @@ export const NoteView = React.memo(function NoteView({
               size="icon"
               className="h-9 w-9 shrink-0 rounded-full shadow-sm md:hidden"
               onClick={onBack}
+              data-cy="note-back-button"
               aria-label="Back"
             >
               <ChevronLeft className="h-4 w-4" />
@@ -117,6 +118,7 @@ export const NoteView = React.memo(function NoteView({
             onClick={onEdit}
             variant="outline"
             size="sm"
+            data-cy="note-edit-button"
             aria-label="Edit"
             className="rounded-full shadow-sm"
           >
@@ -126,6 +128,7 @@ export const NoteView = React.memo(function NoteView({
           <Button
             variant="outline"
             size="sm"
+            data-cy="note-copy-button"
             aria-label="Copy note"
             disabled={isBodyEmpty}
             onClick={() => copyNote(bodyHtml)}
diff --git a/ui/web/components/features/notes/NotesShell.tsx b/ui/web/components/features/notes/NotesShell.tsx
index 0e696f795e7..8a88c54ded4 100644
--- a/ui/web/components/features/notes/NotesShell.tsx
+++ b/ui/web/components/features/notes/NotesShell.tsx
@@ -1,7 +1,7 @@
 "use client"
 
 import * as React from "react"
-import { Loader2 } from "lucide-react"
+import { CircleNotch as Loader2 } from "@phosphor-icons/react"
 import { useQuery } from "@tanstack/react-query"
 import { useRouter } from "next/navigation"
 import {
diff --git a/ui/web/components/features/notes/NotesTabStrip.tsx b/ui/web/components/features/notes/NotesTabStrip.tsx
index 2ac892536da..11c93eefc37 100644
--- a/ui/web/components/features/notes/NotesTabStrip.tsx
+++ b/ui/web/components/features/notes/NotesTabStrip.tsx
@@ -1,7 +1,7 @@
 "use client"
 
 import { useEffect, useRef, useState, type KeyboardEvent, type WheelEvent } from "react"
-import { AlertCircle, ChevronLeft, ChevronRight, Loader2, Plus, Circle, X } from "lucide-react"
+import { WarningCircle as AlertCircle, CaretLeft as ChevronLeft, CaretRight as ChevronRight, CircleNotch as Loader2, Plus, Circle, X } from "@phosphor-icons/react"
 import { MAX_NOTE_WORKSPACE_TABS, type NoteWorkspaceTab } from "@core/services/noteWorkspaceTabs"
 import { Button } from "@/components/ui/button"
 import { cn } from "@ui/web/lib/utils"
@@ -225,6 +225,7 @@ export function NotesTabStrip({
         variant="ghost"
         size="icon"
         className="h-8 w-6 shrink-0"
+        data-cy={direction === -1 ? "tabs-scroll-left" : "tabs-scroll-right"}
         onMouseDown={(event) => event.preventDefault()}
         onClick={() => scrollByTabs(direction)}
         disabled={!enabled}
@@ -243,6 +244,7 @@ export function NotesTabStrip({
         variant="ghost"
         size="icon"
         className="h-8 w-8 shrink-0"
+        data-cy="add-tab-button"
         onMouseDown={(event) => event.preventDefault()}
         onClick={onAddTab}
         aria-label={addTabLabel}
@@ -281,6 +283,7 @@ export function NotesTabStrip({
               >
                 <Button
                   type="button"
+                  data-cy="workspace-tab"
                   aria-pressed={isActive}
                   aria-label={tab.noteId ? undefined : "Open empty note tab"}
                   tabIndex={isActive ? 0 : -1}
@@ -306,6 +309,7 @@ export function NotesTabStrip({
                   variant="ghost"
                   size="icon"
                   className="mr-0.5 h-6 w-6 shrink-0 text-muted-foreground opacity-70 hover:text-foreground group-hover:opacity-100"
+                  data-cy="workspace-tab-close"
                   aria-label={tab.noteId ? `Close ${label}` : "Close empty note tab"}
                   title={`Close ${label}`}
                   onMouseDown={(event) => event.preventDefault()}
diff --git a/ui/web/components/features/notes/RagIndexPanel.tsx b/ui/web/components/features/notes/RagIndexPanel.tsx
index a883833eb7c..4f069596aa0 100644
--- a/ui/web/components/features/notes/RagIndexPanel.tsx
+++ b/ui/web/components/features/notes/RagIndexPanel.tsx
@@ -1,7 +1,7 @@
 "use client"
 
 import { useState } from 'react'
-import { Database, Trash2, Loader2 } from 'lucide-react'
+import { Database, Trash as Trash2, CircleNotch as Loader2 } from "@phosphor-icons/react"
 import { Button } from '@/components/ui/button'
 import {
   DropdownMenuItem,
diff --git a/ui/web/components/features/notes/SearchResultsPanel.tsx b/ui/web/components/features/notes/SearchResultsPanel.tsx
index f5d9c846578..33bbb0ef886 100644
--- a/ui/web/components/features/notes/SearchResultsPanel.tsx
+++ b/ui/web/components/features/notes/SearchResultsPanel.tsx
@@ -2,7 +2,7 @@
 
 import * as React from "react"
 import { useEffect, useState, useRef } from "react"
-import { ChevronLeft, Search, X } from "lucide-react"
+import { CaretLeft as ChevronLeft, MagnifyingGlass as Search, X } from "@phosphor-icons/react"
 import { useRouter } from "next/navigation"
 import { Input } from "@/components/ui/input"
 import { Button } from "@/components/ui/button"
diff --git a/ui/web/components/features/notes/SelectionModeActions.tsx b/ui/web/components/features/notes/SelectionModeActions.tsx
index b44e245fb7e..79ca0e11236 100644
--- a/ui/web/components/features/notes/SelectionModeActions.tsx
+++ b/ui/web/components/features/notes/SelectionModeActions.tsx
@@ -1,4 +1,4 @@
-import { Loader2 } from "lucide-react"
+import { CircleNotch as Loader2 } from "@phosphor-icons/react"
 import { Button } from "@/components/ui/button"
 import { cn } from "@ui/web/lib/utils"
 
diff --git a/ui/web/components/features/notes/SettingsPanel.tsx b/ui/web/components/features/notes/SettingsPanel.tsx
index f54d2852c8e..d41753f469e 100644
--- a/ui/web/components/features/notes/SettingsPanel.tsx
+++ b/ui/web/components/features/notes/SettingsPanel.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import { Settings } from "lucide-react"
+import { Gear as Settings } from "@phosphor-icons/react"
 import { ImportButton } from "@/components/ImportButton"
 import { ExportButton } from "@/components/ExportButton"
 
diff --git a/ui/web/components/features/notes/ShareNoteDialog.tsx b/ui/web/components/features/notes/ShareNoteDialog.tsx
index 7a701d04367..627b82582bf 100644
--- a/ui/web/components/features/notes/ShareNoteDialog.tsx
+++ b/ui/web/components/features/notes/ShareNoteDialog.tsx
@@ -1,7 +1,7 @@
 "use client"
 
 import * as React from "react"
-import { Check, Copy, Globe2, Loader2, RotateCcw } from "lucide-react"
+import { Check, Copy, GlobeHemisphereWest as Globe2, CircleNotch as Loader2, ArrowCounterClockwise as RotateCcw } from "@phosphor-icons/react"
 import { Button } from "@/components/ui/button"
 import {
   Dialog,
diff --git a/ui/web/components/features/notes/Sidebar.tsx b/ui/web/components/features/notes/Sidebar.tsx
index 5d6199ece94..d0fe601cbb5 100644
--- a/ui/web/components/features/notes/Sidebar.tsx
+++ b/ui/web/components/features/notes/Sidebar.tsx
@@ -1,7 +1,7 @@
 "use client"
 
 import * as React from "react"
-import { LogOut, Plus, Search, Settings } from "lucide-react"
+import { SignOut as LogOut, Plus, MagnifyingGlass as Search, Gear as Settings } from "@phosphor-icons/react"
 import { Button } from "@/components/ui/button"
 import { ThemeToggle } from "@/components/theme-toggle"
 import { BrandLogo } from "@/components/BrandLogo"
@@ -200,6 +200,7 @@ export function Sidebar({
               variant="ghost"
               size="icon"
               className="h-8 w-8 rounded-full text-muted-foreground hover:text-destructive"
+              data-cy="sign-out-button"
               aria-label="Sign out"
             >
               <LogOut className="w-4 h-4" />
diff --git a/ui/web/components/features/oauth/OAuthConsentLayout.tsx b/ui/web/components/features/oauth/OAuthConsentLayout.tsx
index bebf9449fdd..67153de271a 100644
--- a/ui/web/components/features/oauth/OAuthConsentLayout.tsx
+++ b/ui/web/components/features/oauth/OAuthConsentLayout.tsx
@@ -1,7 +1,7 @@
 "use client"
 
 import type { ReactNode } from "react"
-import { Loader2 } from "lucide-react"
+import { CircleNotch as Loader2 } from "@phosphor-icons/react"
 
 import { PublicPageHeader } from "@/components/features/public/PublicPageHeader"
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
diff --git a/ui/web/components/features/oauth/OAuthConsentPageClient.tsx b/ui/web/components/features/oauth/OAuthConsentPageClient.tsx
index cf8de803ae5..e990ac998d0 100644
--- a/ui/web/components/features/oauth/OAuthConsentPageClient.tsx
+++ b/ui/web/components/features/oauth/OAuthConsentPageClient.tsx
@@ -2,7 +2,7 @@
 
 import { useCallback, useEffect, useState } from "react"
 import { useSearchParams } from "next/navigation"
-import { Loader2, ShieldCheck } from "lucide-react"
+import { CircleNotch as Loader2, ShieldCheck } from "@phosphor-icons/react"
 import type { OAuthAuthorizationDetails } from "@supabase/supabase-js"
 
 import AuthForm from "@/components/AuthForm"
diff --git a/ui/web/components/features/search/AiSearchToggle.tsx b/ui/web/components/features/search/AiSearchToggle.tsx
index 7272d4584a9..b7857eea132 100644
--- a/ui/web/components/features/search/AiSearchToggle.tsx
+++ b/ui/web/components/features/search/AiSearchToggle.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { Info, Sparkles } from 'lucide-react'
+import { Info, Sparkle as Sparkles } from "@phosphor-icons/react"
 import { Switch } from '@/components/ui/switch'
 import { Label } from '@/components/ui/label'
 import {
diff --git a/ui/web/components/features/search/ChunkSearchItem.tsx b/ui/web/components/features/search/ChunkSearchItem.tsx
index 628c57ad26f..1b67585892d 100644
--- a/ui/web/components/features/search/ChunkSearchItem.tsx
+++ b/ui/web/components/features/search/ChunkSearchItem.tsx
@@ -1,4 +1,4 @@
-import { ArrowUpRight } from 'lucide-react'
+import { ArrowUpRight } from "@phosphor-icons/react"
 import { ChunkSnippet } from './ChunkSnippet'
 import { cn } from '@ui/web/lib/utils'
 import { getRagChunkBodyLength } from '@core/rag/chunkTemplate'
diff --git a/ui/web/components/features/search/ChunkSearchResults.tsx b/ui/web/components/features/search/ChunkSearchResults.tsx
index 3ab4ec86119..a87ab1ef8da 100644
--- a/ui/web/components/features/search/ChunkSearchResults.tsx
+++ b/ui/web/components/features/search/ChunkSearchResults.tsx
@@ -1,6 +1,6 @@
 import { ChunkSearchItem } from './ChunkSearchItem'
 import { Button } from '@/components/ui/button'
-import { Loader2 } from 'lucide-react'
+import { CircleNotch as Loader2 } from "@phosphor-icons/react"
 import type { RagChunk } from '@core/types/ragSearch'
 
 interface ChunkSearchResultsProps {
diff --git a/ui/web/components/features/search/NoteSearchItem.tsx b/ui/web/components/features/search/NoteSearchItem.tsx
index bfce9e33df9..dafe475efbd 100644
--- a/ui/web/components/features/search/NoteSearchItem.tsx
+++ b/ui/web/components/features/search/NoteSearchItem.tsx
@@ -1,5 +1,5 @@
 import { type KeyboardEvent, type MouseEvent, useRef, useState } from 'react'
-import { ChevronDown, ChevronUp, ArrowUpRight } from 'lucide-react'
+import { CaretDown as ChevronDown, CaretUp as ChevronUp, ArrowUpRight } from "@phosphor-icons/react"
 import InteractiveTag from '@/components/InteractiveTag'
 import { Checkbox } from '@/components/ui/checkbox'
 import { ChunkSnippet } from './ChunkSnippet'
diff --git a/ui/web/components/features/search/NoteSearchResults.tsx b/ui/web/components/features/search/NoteSearchResults.tsx
index 849b9fe2968..1b4b33f2242 100644
--- a/ui/web/components/features/search/NoteSearchResults.tsx
+++ b/ui/web/components/features/search/NoteSearchResults.tsx
@@ -1,6 +1,6 @@
 import { NoteSearchItem } from './NoteSearchItem'
 import { Button } from '@/components/ui/button'
-import { Loader2 } from 'lucide-react'
+import { CircleNotch as Loader2 } from "@phosphor-icons/react"
 import type { RagNoteGroup } from '@core/types/ragSearch'
 
 const EMPTY_SELECTED_IDS = new Set<string>()
diff --git a/ui/web/components/features/settings/AIIndexList.tsx b/ui/web/components/features/settings/AIIndexList.tsx
index d8f5a387c00..29a4c165ff3 100644
--- a/ui/web/components/features/settings/AIIndexList.tsx
+++ b/ui/web/components/features/settings/AIIndexList.tsx
@@ -5,7 +5,7 @@ import type { CSSProperties } from "react"
 import * as React from "react"
 import AutoSizer from "react-virtualized-auto-sizer"
 import * as ReactWindow from "react-window"
-import { Loader2 } from "lucide-react"
+import { CircleNotch as Loader2 } from "@phosphor-icons/react"
 
 import { Button } from "@/components/ui/button"
 import type { AIIndexMutationResult, AIIndexNoteRow as AIIndexNoteRowData } from "@core/types/aiIndex"
diff --git a/ui/web/components/features/settings/AIIndexNoteRow.tsx b/ui/web/components/features/settings/AIIndexNoteRow.tsx
index 1272595608d..aee06c61d1d 100644
--- a/ui/web/components/features/settings/AIIndexNoteRow.tsx
+++ b/ui/web/components/features/settings/AIIndexNoteRow.tsx
@@ -1,7 +1,7 @@
 "use client"
 
 import * as React from "react"
-import { ArrowUpRight, Database, Loader2, RefreshCcw, Trash2 } from "lucide-react"
+import { ArrowUpRight, Database, CircleNotch as Loader2, ArrowCounterClockwise as RefreshCcw, Trash as Trash2 } from "@phosphor-icons/react"
 import { toast } from "sonner"
 
 import { Badge } from "@/components/ui/badge"
diff --git a/ui/web/components/features/settings/AIIndexTab.tsx b/ui/web/components/features/settings/AIIndexTab.tsx
index 678a5e96193..da03975bc5b 100644
--- a/ui/web/components/features/settings/AIIndexTab.tsx
+++ b/ui/web/components/features/settings/AIIndexTab.tsx
@@ -2,7 +2,7 @@
 
 import * as React from "react"
 import { useQueryClient } from "@tanstack/react-query"
-import { Database, Loader2, Search, X } from "lucide-react"
+import { Database, CircleNotch as Loader2, MagnifyingGlass as Search, X } from "@phosphor-icons/react"
 import { useRouter } from "next/navigation"
 import { toast } from "sonner"
 
diff --git a/ui/web/components/features/settings/ApiKeysSettingsPanel.tsx b/ui/web/components/features/settings/ApiKeysSettingsPanel.tsx
index e5ba8995675..96ebc5101c9 100644
--- a/ui/web/components/features/settings/ApiKeysSettingsPanel.tsx
+++ b/ui/web/components/features/settings/ApiKeysSettingsPanel.tsx
@@ -1,7 +1,7 @@
 "use client"
 
 import * as React from "react"
-import { AlertCircle, CheckCircle2 } from "lucide-react"
+import { WarningCircle as AlertCircle, CheckCircle as CheckCircle2 } from "@phosphor-icons/react"
 
 import { Button } from "@/components/ui/button"
 import { Badge } from "@/components/ui/badge"
diff --git a/ui/web/components/features/settings/RagIndexingSettingsPanel.tsx b/ui/web/components/features/settings/RagIndexingSettingsPanel.tsx
index 96e29fda923..2353b645d82 100644
--- a/ui/web/components/features/settings/RagIndexingSettingsPanel.tsx
+++ b/ui/web/components/features/settings/RagIndexingSettingsPanel.tsx
@@ -1,7 +1,7 @@
 "use client"
 
 import * as React from "react"
-import { AlertCircle, CheckCircle2 } from "lucide-react"
+import { WarningCircle as AlertCircle, CheckCircle as CheckCircle2 } from "@phosphor-icons/react"
 
 import { Button } from "@/components/ui/button"
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
@@ -24,7 +24,7 @@ import {
   validateRagIndexingEditableSettings,
 } from "@core/rag/indexingSettings"
 import { useSupabase } from "@ui/web/providers/SupabaseProvider"
-import { Info } from "lucide-react"
+import { Info } from "@phosphor-icons/react"
 import {
   settingsActionButtonClassName,
   settingsActionRowClassName,
diff --git a/ui/web/components/features/settings/RagSearchSettingsPanel.tsx b/ui/web/components/features/settings/RagSearchSettingsPanel.tsx
index bd032d42776..915ca7c9507 100644
--- a/ui/web/components/features/settings/RagSearchSettingsPanel.tsx
+++ b/ui/web/components/features/settings/RagSearchSettingsPanel.tsx
@@ -1,7 +1,7 @@
 "use client"
 
 import * as React from "react"
-import { AlertCircle, CheckCircle2 } from "lucide-react"
+import { WarningCircle as AlertCircle, CheckCircle as CheckCircle2 } from "@phosphor-icons/react"
 
 import { Button } from "@/components/ui/button"
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
diff --git a/ui/web/components/features/settings/WordPressSettingsPanel.tsx b/ui/web/components/features/settings/WordPressSettingsPanel.tsx
index 8260d32ecec..c759628f7ba 100644
--- a/ui/web/components/features/settings/WordPressSettingsPanel.tsx
+++ b/ui/web/components/features/settings/WordPressSettingsPanel.tsx
@@ -1,7 +1,7 @@
 "use client"
 
 import * as React from "react"
-import { AlertCircle, CheckCircle2 } from "lucide-react"
+import { WarningCircle as AlertCircle, CheckCircle as CheckCircle2 } from "@phosphor-icons/react"
 
 import { Button } from "@/components/ui/button"
 import { Checkbox } from "@/components/ui/checkbox"
diff --git a/ui/web/components/features/tags/TagCard.tsx b/ui/web/components/features/tags/TagCard.tsx
index 465791a1bce..d284f1fb716 100644
--- a/ui/web/components/features/tags/TagCard.tsx
+++ b/ui/web/components/features/tags/TagCard.tsx
@@ -1,7 +1,7 @@
 "use client"
 
 import * as React from "react"
-import { MoreVertical, Edit2, Trash2, Tag as TagIcon } from "lucide-react"
+import { DotsThreeVertical as MoreVertical, PencilSimple as Edit2, Trash as Trash2, Tag as TagIcon } from "@phosphor-icons/react"
 import { Button } from "@/components/ui/button"
 import {
   DropdownMenu,
diff --git a/ui/web/components/features/tags/TagsPage.tsx b/ui/web/components/features/tags/TagsPage.tsx
index 73f6a553504..0c9feebf8a4 100644
--- a/ui/web/components/features/tags/TagsPage.tsx
+++ b/ui/web/components/features/tags/TagsPage.tsx
@@ -1,7 +1,7 @@
 "use client"
 
 import * as React from "react"
-import { Search, Tag as TagIcon, X } from "lucide-react"
+import { MagnifyingGlass as Search, Tag as TagIcon, X } from "@phosphor-icons/react"
 import { Input } from "@/components/ui/input"
 import { ThemeToggle } from "@/components/theme-toggle"
 import { getTagsWithCounts, groupTagsAlphabetically } from "@core/services/tags"
diff --git a/ui/web/components/features/wordpress/ExportToWordPressButton.tsx b/ui/web/components/features/wordpress/ExportToWordPressButton.tsx
index 58f273846bc..0ef472bb8ae 100644
--- a/ui/web/components/features/wordpress/ExportToWordPressButton.tsx
+++ b/ui/web/components/features/wordpress/ExportToWordPressButton.tsx
@@ -1,7 +1,7 @@
 "use client"
 
 import * as React from "react"
-import { Upload } from "lucide-react"
+import { UploadSimple as Upload } from "@phosphor-icons/react"
 
 import { Button, type ButtonProps } from "@/components/ui/button"
 import { DropdownMenuItem } from "@/components/ui/dropdown-menu"
diff --git a/ui/web/components/features/wordpress/WordPressExportDialog.tsx b/ui/web/components/features/wordpress/WordPressExportDialog.tsx
index e153753a01b..89a15617b25 100644
--- a/ui/web/components/features/wordpress/WordPressExportDialog.tsx
+++ b/ui/web/components/features/wordpress/WordPressExportDialog.tsx
@@ -1,7 +1,7 @@
 "use client"
 
 import * as React from "react"
-import { AlertCircle, AlertTriangle, CheckCircle2, ExternalLink, Plus, RefreshCw, X } from "lucide-react"
+import { WarningCircle as AlertCircle, Warning as AlertTriangle, CheckCircle as CheckCircle2, ArrowSquareOut as ExternalLink, Plus, ArrowsClockwise as RefreshCw, X } from "@phosphor-icons/react"
 
 import { Button } from "@/components/ui/button"
 import { Checkbox } from "@/components/ui/checkbox"
diff --git a/ui/web/components/theme-toggle.tsx b/ui/web/components/theme-toggle.tsx
index 9f67e35cca5..f3be2758c89 100644
--- a/ui/web/components/theme-toggle.tsx
+++ b/ui/web/components/theme-toggle.tsx
@@ -1,7 +1,7 @@
 "use client"
 
 import * as React from "react"
-import { Moon, Sun } from "lucide-react"
+import { Moon, Sun } from "@phosphor-icons/react"
 import { useTheme } from "next-themes"
 
 import { Button } from "@/components/ui/button"
@@ -34,6 +34,7 @@ export function ThemeToggle() {
         setTheme(newTheme)
       }}
       className="w-9 h-9"
+      data-cy="theme-toggle"
       title={isDark ? "Switch to light mode" : "Switch to dark mode"}
     >
       {isDark ? (
diff --git a/ui/web/components/ui/accordion.tsx b/ui/web/components/ui/accordion.tsx
index efc8ba0d4e7..fb729452a14 100644
--- a/ui/web/components/ui/accordion.tsx
+++ b/ui/web/components/ui/accordion.tsx
@@ -2,7 +2,7 @@
 
 import * as React from "react"
 import * as AccordionPrimitive from "@radix-ui/react-accordion"
-import { ChevronDown } from "lucide-react"
+import { CaretDown as ChevronDown } from "@phosphor-icons/react"
 
 import { cn } from "@ui/web/lib/utils"
 
diff --git a/ui/web/components/ui/breadcrumb.tsx b/ui/web/components/ui/breadcrumb.tsx
index cb78782f5a3..77804084886 100644
--- a/ui/web/components/ui/breadcrumb.tsx
+++ b/ui/web/components/ui/breadcrumb.tsx
@@ -1,6 +1,6 @@
 import * as React from "react"
 import { Slot } from "@radix-ui/react-slot"
-import { ChevronRight, MoreHorizontal } from "lucide-react"
+import { CaretRight as ChevronRight, DotsThree as MoreHorizontal } from "@phosphor-icons/react"
 
 import { cn } from "@ui/web/lib/utils"
 
diff --git a/ui/web/components/ui/calendar.tsx b/ui/web/components/ui/calendar.tsx
index bdae67a2afe..cef6ec8f583 100644
--- a/ui/web/components/ui/calendar.tsx
+++ b/ui/web/components/ui/calendar.tsx
@@ -1,11 +1,7 @@
 "use client"
 
 import * as React from "react"
-import {
-  ChevronDownIcon,
-  ChevronLeftIcon,
-  ChevronRightIcon,
-} from "lucide-react"
+import { CaretDown as ChevronDownIcon, CaretLeft as ChevronLeftIcon, CaretRight as ChevronRightIcon } from "@phosphor-icons/react"
 import {
   DayPicker,
   getDefaultClassNames,
diff --git a/ui/web/components/ui/carousel.tsx b/ui/web/components/ui/carousel.tsx
index cad322c6cb4..24fa2562360 100644
--- a/ui/web/components/ui/carousel.tsx
+++ b/ui/web/components/ui/carousel.tsx
@@ -2,7 +2,7 @@
 
 import * as React from "react"
 import useEmblaCarousel, { type UseEmblaCarouselType } from "embla-carousel-react"
-import { ChevronLeft, ChevronRight } from "lucide-react"
+import { CaretLeft as ChevronLeft, CaretRight as ChevronRight } from "@phosphor-icons/react"
 
 import { cn } from "@ui/web/lib/utils"
 import { Button } from "@/components/ui/button"
diff --git a/ui/web/components/ui/checkbox.tsx b/ui/web/components/ui/checkbox.tsx
index 624ea2ffcab..80ca9a8a82c 100644
--- a/ui/web/components/ui/checkbox.tsx
+++ b/ui/web/components/ui/checkbox.tsx
@@ -2,7 +2,7 @@
 
 import * as React from "react"
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
-import { Check } from "lucide-react"
+import { Check } from "@phosphor-icons/react"
 
 import { cn } from "@ui/web/lib/utils"
 
diff --git a/ui/web/components/ui/command.tsx b/ui/web/components/ui/command.tsx
index d2923b1a764..e29c1fb6e73 100644
--- a/ui/web/components/ui/command.tsx
+++ b/ui/web/components/ui/command.tsx
@@ -1,7 +1,7 @@
 "use client";
 import * as React from "react"
 import { Command as CommandPrimitive } from "cmdk"
-import { Search } from "lucide-react"
+import { MagnifyingGlass as Search } from "@phosphor-icons/react"
 
 import { cn } from "@ui/web/lib/utils"
 import { Dialog, DialogContent } from "@/components/ui/dialog"
diff --git a/ui/web/components/ui/context-menu.tsx b/ui/web/components/ui/context-menu.tsx
index 80874ecf11f..57fe30d5bcd 100644
--- a/ui/web/components/ui/context-menu.tsx
+++ b/ui/web/components/ui/context-menu.tsx
@@ -2,7 +2,7 @@
 
 import * as React from "react"
 import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
-import { Check, ChevronRight, Circle } from "lucide-react"
+import { Check, CaretRight as ChevronRight, Circle } from "@phosphor-icons/react"
 
 import { cn } from "@ui/web/lib/utils"
 
diff --git a/ui/web/components/ui/dialog.tsx b/ui/web/components/ui/dialog.tsx
index 4bf1c722a2f..dd124b16aa8 100644
--- a/ui/web/components/ui/dialog.tsx
+++ b/ui/web/components/ui/dialog.tsx
@@ -2,7 +2,7 @@
 
 import * as React from "react"
 import * as DialogPrimitive from "@radix-ui/react-dialog"
-import { X } from "lucide-react"
+import { X } from "@phosphor-icons/react"
 
 import { cn } from "@ui/web/lib/utils"
 
diff --git a/ui/web/components/ui/dropdown-menu.tsx b/ui/web/components/ui/dropdown-menu.tsx
index 5439f7dc772..b9bcafa8a0d 100644
--- a/ui/web/components/ui/dropdown-menu.tsx
+++ b/ui/web/components/ui/dropdown-menu.tsx
@@ -2,7 +2,7 @@
 
 import * as React from "react"
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
-import { Check, ChevronRight, Circle } from "lucide-react"
+import { Check, CaretRight as ChevronRight, Circle } from "@phosphor-icons/react"
 
 import { cn } from "@ui/web/lib/utils"
 
diff --git a/ui/web/components/ui/input-otp.tsx b/ui/web/components/ui/input-otp.tsx
index 3296cc3297f..2862d8cff7a 100644
--- a/ui/web/components/ui/input-otp.tsx
+++ b/ui/web/components/ui/input-otp.tsx
@@ -2,7 +2,7 @@
 
 import * as React from "react"
 import { OTPInput, OTPInputContext } from "input-otp"
-import { Minus } from "lucide-react"
+import { Minus } from "@phosphor-icons/react"
 
 import { cn } from "@ui/web/lib/utils"
 
diff --git a/ui/web/components/ui/menubar.tsx b/ui/web/components/ui/menubar.tsx
index cdf8448f449..13a143dd56d 100644
--- a/ui/web/components/ui/menubar.tsx
+++ b/ui/web/components/ui/menubar.tsx
@@ -2,7 +2,7 @@
 
 import * as React from "react"
 import * as MenubarPrimitive from "@radix-ui/react-menubar"
-import { Check, ChevronRight, Circle } from "lucide-react"
+import { Check, CaretRight as ChevronRight, Circle } from "@phosphor-icons/react"
 
 import { cn } from "@ui/web/lib/utils"
 
diff --git a/ui/web/components/ui/navigation-menu.tsx b/ui/web/components/ui/navigation-menu.tsx
index cd5ea6117e4..a1b41886c3c 100644
--- a/ui/web/components/ui/navigation-menu.tsx
+++ b/ui/web/components/ui/navigation-menu.tsx
@@ -1,7 +1,7 @@
 import * as React from "react"
 import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
 import { cva } from "class-variance-authority"
-import { ChevronDown } from "lucide-react"
+import { CaretDown as ChevronDown } from "@phosphor-icons/react"
 
 import { cn } from "@ui/web/lib/utils"
 
diff --git a/ui/web/components/ui/pagination.tsx b/ui/web/components/ui/pagination.tsx
index 6f6d3e4acf4..cdf8c6d1555 100644
--- a/ui/web/components/ui/pagination.tsx
+++ b/ui/web/components/ui/pagination.tsx
@@ -1,5 +1,5 @@
 import * as React from "react"
-import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react"
+import { CaretLeft as ChevronLeft, CaretRight as ChevronRight, DotsThree as MoreHorizontal } from "@phosphor-icons/react"
 
 import { cn } from "@ui/web/lib/utils"
 import { buttonVariants } from "@/components/ui/button"
diff --git a/ui/web/components/ui/resizable.tsx b/ui/web/components/ui/resizable.tsx
index 4e96f4f116b..5745b4193eb 100644
--- a/ui/web/components/ui/resizable.tsx
+++ b/ui/web/components/ui/resizable.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import { GripVertical } from "lucide-react"
+import { DotsSixVertical as GripVertical } from "@phosphor-icons/react"
 import * as ResizablePrimitive from "react-resizable-panels"
 
 import { cn } from "@ui/web/lib/utils"
diff --git a/ui/web/components/ui/select.tsx b/ui/web/components/ui/select.tsx
index 3cf5cc5c1dc..9e28a289729 100644
--- a/ui/web/components/ui/select.tsx
+++ b/ui/web/components/ui/select.tsx
@@ -2,7 +2,7 @@
 
 import * as React from "react"
 import * as SelectPrimitive from "@radix-ui/react-select"
-import { Check, ChevronDown, ChevronUp } from "lucide-react"
+import { Check, CaretDown as ChevronDown, CaretUp as ChevronUp } from "@phosphor-icons/react"
 
 import { cn } from "@ui/web/lib/utils"
 
diff --git a/ui/web/components/ui/sheet.tsx b/ui/web/components/ui/sheet.tsx
index 47da6509f96..f745e303bfc 100644
--- a/ui/web/components/ui/sheet.tsx
+++ b/ui/web/components/ui/sheet.tsx
@@ -2,7 +2,7 @@
 import * as React from "react"
 import * as SheetPrimitive from "@radix-ui/react-dialog"
 import { cva, type VariantProps } from "class-variance-authority"
-import { X } from "lucide-react"
+import { X } from "@phosphor-icons/react"
 
 import { cn } from "@ui/web/lib/utils"
 
diff --git a/ui/web/components/ui/sidebar.tsx b/ui/web/components/ui/sidebar.tsx
index b3e9fe855cd..e6024239645 100644
--- a/ui/web/components/ui/sidebar.tsx
+++ b/ui/web/components/ui/sidebar.tsx
@@ -2,7 +2,7 @@
 import * as React from "react"
 import { Slot } from "@radix-ui/react-slot"
 import { cva, type VariantProps } from "class-variance-authority"
-import { PanelLeft } from "lucide-react"
+import { SidebarSimple as PanelLeft } from "@phosphor-icons/react"
 
 import { useIsMobile } from "@ui/web/hooks/use-mobile"
 import { cn } from "@ui/web/lib/utils"
diff --git a/ui/web/components/ui/toast.tsx b/ui/web/components/ui/toast.tsx
index b22a4eb8ead..55f080be08e 100644
--- a/ui/web/components/ui/toast.tsx
+++ b/ui/web/components/ui/toast.tsx
@@ -2,7 +2,7 @@
 import * as React from "react"
 import * as ToastPrimitives from "@radix-ui/react-toast"
 import { cva, type VariantProps } from "class-variance-authority"
-import { X } from "lucide-react"
+import { X } from "@phosphor-icons/react"
 
 import { cn } from "@ui/web/lib/utils"
 
diff --git a/ui/web/tests/unit/components/aiIndexList.test.tsx b/ui/web/tests/unit/components/aiIndexList.test.tsx
index 879edfdc009..5a03c8d1ffb 100644
--- a/ui/web/tests/unit/components/aiIndexList.test.tsx
+++ b/ui/web/tests/unit/components/aiIndexList.test.tsx
@@ -13,8 +13,8 @@ const mockListRef = {
   },
 }
 
-jest.mock("lucide-react", () => ({
-  Loader2: ({ className }: { className?: string }) => (
+jest.mock("@phosphor-icons/react", () => ({
+  CircleNotch: ({ className }: { className?: string }) => (
     <svg data-testid="loader-icon" className={className} />
   ),
 }))
diff --git a/ui/web/tests/unit/components/noteList.test.tsx b/ui/web/tests/unit/components/noteList.test.tsx
index 325d2dfc7e8..4dc8c312855 100644
--- a/ui/web/tests/unit/components/noteList.test.tsx
+++ b/ui/web/tests/unit/components/noteList.test.tsx
@@ -4,9 +4,9 @@ import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/re
 import { NoteList } from '@/components/features/notes/NoteList'
 import type { Note, SearchResult } from '@core/types/domain'
 
-jest.mock('lucide-react', () => ({
-  Loader2: ({ className }: { className?: string }) => <span data-testid="loader" className={className} />,
-  Zap: () => <span data-testid="zap" />,
+jest.mock('@phosphor-icons/react', () => ({
+  CircleNotch: ({ className }: { className?: string }) => <span data-testid="loader" className={className} />,
+  Lightning: () => <span data-testid="zap" />,
 }))
 
 jest.mock('@/components/NoteListSkeleton', () => ({

From dce48eab4a56e470f8870ae75bdb302e60115495 Mon Sep 17 00:00:00 2001
From: denyskoreiba <denys.koreiba@flowlix.eu>
Date: Thu, 10 Sep 2026 22:28:52 +0200
Subject: [PATCH 20/23] fix(notes-tabs): confirm a discarded failed save in the
 app's own dialog
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Closing a tab whose save failed threw the edits away behind window.confirm —
a blocking native dialog in an app where every other destructive action uses
AlertDialog, and one that browsers can suppress outright.

The controller now surfaces the pending close as state (tabPendingClose) and
NotesShell renders it, matching the delete-note dialog. The wording says what
is lost rather than asking a bare yes/no, and the buttons name their outcome:
"Keep editing" / "Discard and close".

The confirmed path skips the autosave flush, which would only fail again on a
tab that is in this state precisely because saving failed.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 .../features/mobile/MobileLayout.cy.tsx       |    3 +
 .../components/features/notes/NotesShell.tsx  | 1053 +++++++++--------
 ui/web/hooks/useNoteAppController.ts          |   51 +-
 .../useNoteAppControllerAdditional.test.tsx   |   56 +
 4 files changed, 642 insertions(+), 521 deletions(-)

diff --git a/cypress/component/features/mobile/MobileLayout.cy.tsx b/cypress/component/features/mobile/MobileLayout.cy.tsx
index 740cfb5deef..fc251504ca5 100644
--- a/cypress/component/features/mobile/MobileLayout.cy.tsx
+++ b/cypress/component/features/mobile/MobileLayout.cy.tsx
@@ -51,6 +51,9 @@ describe('Mobile Layout Adaptation', () => {
       addTab: cy.stub().resolves(),
       activateTab: cy.stub().resolves(),
       closeTab: cy.stub().resolves(),
+      tabPendingClose: null,
+      confirmCloseTab: cy.stub().resolves(),
+      cancelCloseTab: cy.stub(),
       handleDraftChange: cy.stub(),
       handleViewSessionChange: cy.stub(),
       setIsEditing: cy.stub(),
diff --git a/ui/web/components/features/notes/NotesShell.tsx b/ui/web/components/features/notes/NotesShell.tsx
index 8a88c54ded4..bef1b1a7dde 100644
--- a/ui/web/components/features/notes/NotesShell.tsx
+++ b/ui/web/components/features/notes/NotesShell.tsx
@@ -1,508 +1,545 @@
-"use client"
-
-import * as React from "react"
-import { CircleNotch as Loader2 } from "@phosphor-icons/react"
-import { useQuery } from "@tanstack/react-query"
-import { useRouter } from "next/navigation"
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-} from "@/components/ui/alert-dialog"
-
-import { cn } from "@ui/web/lib/utils"
-import { Sidebar } from "@/components/features/notes/Sidebar"
-import { NoteList } from "@/components/features/notes/NoteList"
-import { NoteEditor, type NoteEditorHandle, type PendingChunkFocus } from "@/components/features/notes/NoteEditor"
-import { NoteView } from "@/components/features/notes/NoteView"
-import { EmptyState } from "@/components/features/notes/EmptyState"
-import { SearchResultsPanel } from "@/components/features/notes/SearchResultsPanel"
-import type { SearchResultsPanelHandle } from "@/components/features/notes/SearchResultsPanel"
-import type { Note } from "@core/types/domain"
-import type { NoteAppController } from "@ui/web/hooks/useNoteAppController"
-import { normalizeTag, normalizeTagList } from "@ui/web/lib/tags"
-import { useAllTagsQuery } from "@ui/web/hooks/useNotesQuery"
-import { useSupabase } from "@ui/web/providers/SupabaseProvider"
-import { WordPressSettingsService } from "@core/services/wordpressSettings"
-import { ApiKeysSettingsService } from "@core/services/apiKeysSettings"
-import { saveSettingsReturnState } from "@ui/web/lib/settingsNavigationState"
-import { consumeActiveSettingsNoteReturnPath } from "@ui/web/lib/aiIndexNavigationState"
-import { NotesTabStrip } from "@/components/features/notes/NotesTabStrip"
-import { MobileNotesTabMenu } from "@/components/features/notes/MobileNotesTabMenu"
-
-import { NavRail } from "@/components/features/navigation/NavRail"
-import { TagsPage } from "@/components/features/tags/TagsPage"
-import { MAX_NOTE_WORKSPACE_TABS } from "@core/services/noteWorkspaceTabs"
-
-type NoteRecord = Note & {
-  content?: string | null
-  headline?: string | null
-  rank?: number | null
-}
-
-type NotesShellProps = {
-  controller: NoteAppController
-}
-
-export function NotesShell({ controller }: NotesShellProps) {
-
-  const router = useRouter()
-  const noteEditorRef = React.useRef<NoteEditorHandle | null>(null)
-  const searchPanelRef = React.useRef<SearchResultsPanelHandle | null>(null)
-  const { supabase } = useSupabase()
-  const wordpressSettingsService = React.useMemo(() => new WordPressSettingsService(supabase), [supabase])
-  const apiKeysService = React.useMemo(() => new ApiKeysSettingsService(supabase), [supabase])
-  const [wordpressConfigured, setWordpressConfigured] = React.useState(false)
-
-  const [pendingChunkFocus, setPendingChunkFocus] = React.useState<PendingChunkFocus | null>(null)
-
-  React.useEffect(() => {
-    controller.registerNoteEditorRef(noteEditorRef)
-  }, [controller])
-
-  const user = controller.user
-  const { data: apiKeysStatus } = useQuery({
-    queryKey: ['apiKeysStatus', user?.id],
-    queryFn: () => apiKeysService.getStatus(),
-    staleTime: 5 * 60 * 1000,
-    enabled: Boolean(user?.id),
-  })
-  const hasGeminiApiKey = apiKeysStatus?.gemini?.configured ?? false
-
-  const {
-    notesDisplayed,
-    notesTotal,
-    selectionMode,
-    selectedCount,
-    bulkDeleting,
-    exitSelectionMode,
-    selectAllVisible,
-    deleteSelectedNotes,
-    filterByTag,
-    handleClearTagFilter,
-    handleCreateNote,
-    handleSignOut,
-    pendingCount,
-    failedCount,
-    isOffline,
-    selectedNote,
-    isEditing,
-    notePaneVisible,
-    tabs = [],
-    activeTabId = '',
-    addTab,
-    activateTab,
-    closeTab,
-    canAddTab = true,
-    workspaceHydrated = true,
-    handleSelectNote,
-    isSearchPanelOpen,
-    setIsSearchPanelOpen,
-    activeMainView,
-    setActiveMainView,
-    handleRenameTag,
-    handleDeleteTag,
-    notes,
-  } = controller
-
-  const refreshWordPressStatus = React.useCallback(async () => {
-    try {
-      const status = await wordpressSettingsService.getStatus()
-      setWordpressConfigured(status.configured)
-    } catch {
-      setWordpressConfigured(false)
-    }
-  }, [wordpressSettingsService])
-
-  React.useEffect(() => {
-    void refreshWordPressStatus()
-  }, [refreshWordPressStatus, user?.id])
-
-  const handleOpenInContext = React.useCallback(async (noteId: string, charOffset: number, chunkLength: number) => {
-    let note = controller.notes.find((n) => n.id === noteId)
-
-    if (!note) {
-      // Note not in the current paginated list — fetch it from the DB
-      try {
-        const { data } = await supabase
-          .from('notes')
-          .select('id, title, description, tags, created_at, updated_at, user_id')
-          .eq('id', noteId)
-          .maybeSingle()
-        if (!data) return
-        note = data as Note
-      } catch (error) {
-        console.error("Failed to fetch note for open-in-context", { noteId, error })
-        return
-      }
-    }
-    if (!note) return  // TypeScript: narrowing lost after await + let reassignment
-
-    const nextPendingChunkFocus = {
-      requestId: `${noteId}:${charOffset}:${chunkLength}:${Date.now()}`,
-      noteId,
-      charOffset,
-      chunkLength,
-    }
-    setPendingChunkFocus(nextPendingChunkFocus)
-
-    if (controller.selectedNote?.id === noteId && controller.isEditing) {
-      return
-    }
-
-    await controller.handleEditNote(note)
-  }, [controller, supabase])
-
-  const showEditor = notePaneVisible ?? !!(selectedNote || isEditing)
-  const handleOpenSearchPanel = React.useCallback(() => {
-    if (activeMainView !== "notes") {
-      setActiveMainView("notes")
-    }
-    if (isSearchPanelOpen) {
-      searchPanelRef.current?.focusInput()
-      return
-    }
-    setIsSearchPanelOpen(true)
-  }, [activeMainView, isSearchPanelOpen, setActiveMainView, setIsSearchPanelOpen])
-
-
-  const handlePendingChunkFocusApplied = React.useCallback((requestId: string) => {
-    setPendingChunkFocus((current) => (current?.requestId === requestId ? null : current))
-  }, [])
-
-  const handleOpenSettings = React.useCallback(async () => {
-    const notesUiState = await controller.captureSettingsReturnState()
-
-    if (typeof globalThis.location !== "undefined") {
-      saveSettingsReturnState({
-        returnPath: `${globalThis.location.pathname}${globalThis.location.search}${globalThis.location.hash}`,
-        notesUiState,
-      })
-    }
-
-    router.push("/settings")
-  }, [controller, router])
-
-  const handleBackFromNote = React.useCallback(() => {
-    const settingsReturnPath = consumeActiveSettingsNoteReturnPath()
-    if (settingsReturnPath) {
-      router.push(settingsReturnPath)
-      return
-    }
-
-    handleSelectNote(null).catch(() => {
-      // Fire-and-forget: wrappedHandleSelectNote already owns error handling.
-    })
-  }, [handleSelectNote, router])
-
-  const handleSelectTagFromTagsPage = React.useCallback((tag: string) => {
-    controller.handleTagClick(tag).catch(() => undefined)
-    setActiveMainView("notes")
-  }, [controller, setActiveMainView])
-
-  return (
-    <div
-      className="flex h-[100dvh] max-h-[100dvh] min-h-[100svh] bg-muted/20 overflow-hidden relative"
-      data-testid="notes-shell"
-    >
-      {/* Main Navigation Rail (Desktop Dock & Mobile Bottom Bar) */}
-      <NavRail
-        activeView={activeMainView}
-        onSelectView={(view) => {
-          if (view === "settings") {
-            void handleOpenSettings()
-          } else {
-            setActiveMainView(view)
-          }
-        }}
-        onOpenSearch={handleOpenSearchPanel}
-        onOpenSettings={() => void handleOpenSettings()}
-      />
-
-      {activeMainView === "tags" ? (
-        <main className="flex-1 flex min-h-0 flex-col h-full overflow-hidden">
-          <TagsPage
-            notes={notes}
-            onSelectTag={handleSelectTagFromTagsPage}
-            onRenameTag={handleRenameTag}
-            onDeleteTag={handleDeleteTag}
-          />
-        </main>
-      ) : (
-        <div className="flex min-h-0 min-w-0 flex-1 flex-col">
-          <MobileNotesTabMenu
-            tabs={tabs}
-            activeTabId={activeTabId}
-            addTabDisabled={!workspaceHydrated || !canAddTab}
-            addTabCapacityPending={!workspaceHydrated}
-            maximumTabCount={MAX_NOTE_WORKSPACE_TABS}
-            onAddTab={() => void addTab?.()}
-            onActivateTab={(tabId) => void activateTab?.(tabId)}
-            onCloseTab={(tabId) => void closeTab?.(tabId)}
-          />
-          <div className="flex min-h-0 min-w-0 flex-1">
-            <Sidebar
-              user={user!}
-              filterByTag={filterByTag}
-              notesDisplayed={notesDisplayed}
-              notesTotal={notesTotal}
-              pendingCount={pendingCount}
-              failedCount={failedCount}
-              isOffline={isOffline}
-              selectionMode={selectionMode}
-              selectedCount={selectedCount}
-              bulkDeleting={bulkDeleting}
-              onExitSelectionMode={exitSelectionMode}
-              onSelectAll={selectAllVisible}
-              onBulkDelete={deleteSelectedNotes}
-              onClearTagFilter={handleClearTagFilter}
-              onOpenSettings={() => void handleOpenSettings()}
-              onCreateNote={handleCreateNote}
-              onSignOut={handleSignOut}
-              onOpenSearch={handleOpenSearchPanel}
-              className={cn((showEditor || isSearchPanelOpen) ? "hidden md:flex" : "w-full md:w-80")}
-              data-testid="sidebar-container"
-            >
-              <ListPane controller={controller} />
-            </Sidebar>
-
-            {isSearchPanelOpen && (
-              <SearchResultsPanel
-                ref={searchPanelRef}
-                controller={controller}
-                hasGeminiApiKey={hasGeminiApiKey}
-                onOpenInContext={handleOpenInContext}
-                onClose={() => setIsSearchPanelOpen(false)}
-                className={cn(showEditor ? "hidden md:flex" : "w-full min-w-[300px] md:min-w-0")}
-              />
-            )}
-
-            <main
-              className={cn(
-                "flex-1 flex min-h-0 min-w-0 flex-col h-full overflow-hidden",
-                !showEditor ? "hidden md:flex" : "w-full"
-              )}
-              data-testid="editor-container"
-            >
-              <NotesTabStrip
-                tabs={tabs}
-                activeTabId={activeTabId}
-                addTabDisabled={!workspaceHydrated || !canAddTab}
-                addTabCapacityPending={!workspaceHydrated}
-                maximumTabCount={MAX_NOTE_WORKSPACE_TABS}
-                onAddTab={() => void addTab?.()}
-                onActivateTab={(tabId) => void activateTab?.(tabId)}
-                onCloseTab={(tabId) => void closeTab?.(tabId)}
-              />
-              <div className="flex-1 min-h-0 min-w-0 flex">
-                <EditorPane
-                  controller={controller}
-                  onBack={handleBackFromNote}
-                  noteEditorRef={noteEditorRef}
-                  wordpressConfigured={wordpressConfigured}
-                  pendingChunkFocus={pendingChunkFocus}
-                  onPendingChunkFocusApplied={handlePendingChunkFocusApplied}
-                />
-              </div>
-            </main>
-          </div>
-        </div>
-      )}
-
-      <DeleteNoteDialog controller={controller} />
-    </div>
-  )
-}
-
-
-function ListPane({ controller }: { controller: NoteAppController }) {
-  const {
-    notes,
-    notesQuery,
-    selectedNote,
-    handleSelectNote,
-    selectionMode,
-    selectedNoteIds,
-    toggleNoteSelection,
-    handleTagClick,
-  } = controller
-
-  return (
-    <NoteList
-      notes={notes as NoteRecord[]}
-      isLoading={notesQuery.isLoading}
-      selectedNoteId={selectedNote?.id}
-      selectionMode={selectionMode}
-      selectedIds={selectedNoteIds}
-      onToggleSelect={(note) => toggleNoteSelection(note.id)}
-      onSelectNote={(note) => handleSelectNote(note)}
-      onTagClick={handleTagClick}
-      onLoadMore={() => notesQuery.fetchNextPage()}
-      hasMore={notesQuery.hasNextPage}
-      isFetchingNextPage={notesQuery.isFetchingNextPage}
-    />
-  )
-}
-
-function EditorPane({
-  controller,
-  onBack,
-  noteEditorRef,
-  wordpressConfigured,
-  pendingChunkFocus,
-  onPendingChunkFocusApplied,
-}: {
-  controller: NoteAppController
-  onBack: () => void
-  noteEditorRef: React.RefObject<NoteEditorHandle | null>
-  wordpressConfigured: boolean
-  pendingChunkFocus: PendingChunkFocus | null
-  onPendingChunkFocusApplied: (requestId: string) => void
-}) {
-  const {
-    selectedNote,
-    activeTab,
-    activeTabId,
-    isEditing,
-    saving,
-    autoSaving,
-    lastSavedAt,
-    handleSaveNote,
-    handleReadNote,
-    handleEditNote,
-    handleDeleteNote,
-    handleRemoveTagFromNote,
-    notes,
-  } = controller
-
-  const { user } = useSupabase()
-  const allTagsQuery = useAllTagsQuery({ userId: user?.id, enabled: !!user })
-
-  const availableTags = React.useMemo(() => {
-    if (allTagsQuery.data?.tags && allTagsQuery.data.tags.length > 0) {
-      return allTagsQuery.data.tags
-    }
-    const collected = notes.flatMap((note) => note.tags ?? [])
-    return normalizeTagList(collected)
-  }, [allTagsQuery.data, notes])
-
-  const tagCounts = React.useMemo(() => {
-    if (allTagsQuery.data?.counts && Object.keys(allTagsQuery.data.counts).length > 0) {
-      return allTagsQuery.data.counts
-    }
-    const counts: Record<string, number> = {}
-    for (const note of notes) {
-      if (!note.tags) continue
-      const seenInNote = new Set<string>()
-      for (const rawTag of note.tags) {
-        if (typeof rawTag !== 'string') continue
-        const tag = normalizeTag(rawTag)
-        if (tag && !seenInNote.has(tag)) {
-          seenInNote.add(tag)
-          counts[tag] = (counts[tag] || 0) + 1
-        }
-      }
-    }
-    return counts
-  }, [allTagsQuery.data, notes])
-
-  // The editor treats its initial* props as an external snapshot and
-  // reconciles them against local typing. The live tab draft echoes every
-  // keystroke back through the controller, so it must be frozen per editor
-  // session (tab + note + mode) — otherwise the echo is acknowledged as an
-  // external refresh and the pending autosave is cancelled before it runs.
-  const sessionDraft = React.useMemo(
-    () => activeTab.draft,
-    // eslint-disable-next-line react-hooks/exhaustive-deps -- session identity only; the live draft must not retrigger
-    [activeTabId, activeTab.noteId, activeTab.mode],
-  )
-
-  if (!selectedNote && !isEditing) {
-    return <EmptyState />
-  }
-
-  if (isEditing) {
-    return (
-      <NoteEditor
-        ref={noteEditorRef}
-        key={`workspace-tab-${activeTabId}`}
-        noteId={selectedNote?.id}
-        initialTitle={sessionDraft.title}
-        initialDescription={sessionDraft.description}
-        initialTags={sessionDraft.tags}
-        initialSession={{ draft: sessionDraft, view: activeTab.view }}
-        onDraftChange={controller.handleDraftChange}
-        onViewSessionChange={controller.handleViewSessionChange}
-        availableTags={availableTags}
-        tagCounts={tagCounts}
-        isSaving={saving}
-        onSave={handleSaveNote}
-        onRead={handleReadNote}
-        onAutoSave={controller.handleAutoSave}
-        isAutoSaving={autoSaving}
-        lastSavedAt={lastSavedAt}
-        wordpressConfigured={wordpressConfigured}
-        onDelete={selectedNote ? () => handleDeleteNote(selectedNote) : undefined}
-        onBack={onBack}
-        pendingChunkFocus={pendingChunkFocus}
-        onPendingChunkFocusApplied={onPendingChunkFocusApplied}
-      />
-    )
-  }
-
-  if (selectedNote) {
-    return (
-      <NoteView
-        key={`workspace-tab-${activeTabId}-note-${selectedNote.id}`}
-        note={selectedNote}
-        onEdit={() => handleEditNote(selectedNote)}
-        onDelete={() => handleDeleteNote(selectedNote)}
-        onTagClick={controller.handleTagClick}
-        onRemoveTag={(tag) => handleRemoveTagFromNote(selectedNote.id, tag)}
-        onBack={onBack}
-        wordpressConfigured={wordpressConfigured}
-        initialScrollTop={activeTab.view.scrollTop}
-        onViewSessionChange={controller.handleViewSessionChange}
-      />
-    )
-  }
-
-  return (
-    <div className="flex-1 flex items-center justify-center">
-      <Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
-    </div>
-  )
-}
-
-function DeleteNoteDialog({ controller }: { controller: NoteAppController }) {
-  const {
-    deleteDialogOpen,
-    setDeleteDialogOpen,
-    confirmDeleteNote,
-    noteToDelete,
-  } = controller
-
-  return (
-    <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
-      <AlertDialogContent>
-        <AlertDialogHeader>
-          <AlertDialogTitle>Delete Note</AlertDialogTitle>
-          <AlertDialogDescription>
-            Are you sure you want to delete &quot;{noteToDelete?.title}&quot;? This action cannot be undone.
-          </AlertDialogDescription>
-        </AlertDialogHeader>
-        <AlertDialogFooter>
-          <AlertDialogCancel>Cancel</AlertDialogCancel>
-          <AlertDialogAction onClick={confirmDeleteNote} className="bg-destructive text-destructive-foreground hover:bg-destructive/90">
-            Delete
-          </AlertDialogAction>
-        </AlertDialogFooter>
-      </AlertDialogContent>
-    </AlertDialog>
-  )
-}
+"use client"
+
+import * as React from "react"
+import { CircleNotch as Loader2 } from "@phosphor-icons/react"
+import { useQuery } from "@tanstack/react-query"
+import { useRouter } from "next/navigation"
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog"
+
+import { cn } from "@ui/web/lib/utils"
+import { Sidebar } from "@/components/features/notes/Sidebar"
+import { NoteList } from "@/components/features/notes/NoteList"
+import { NoteEditor, type NoteEditorHandle, type PendingChunkFocus } from "@/components/features/notes/NoteEditor"
+import { NoteView } from "@/components/features/notes/NoteView"
+import { EmptyState } from "@/components/features/notes/EmptyState"
+import { SearchResultsPanel } from "@/components/features/notes/SearchResultsPanel"
+import type { SearchResultsPanelHandle } from "@/components/features/notes/SearchResultsPanel"
+import type { Note } from "@core/types/domain"
+import type { NoteAppController } from "@ui/web/hooks/useNoteAppController"
+import { normalizeTag, normalizeTagList } from "@ui/web/lib/tags"
+import { useAllTagsQuery } from "@ui/web/hooks/useNotesQuery"
+import { useSupabase } from "@ui/web/providers/SupabaseProvider"
+import { WordPressSettingsService } from "@core/services/wordpressSettings"
+import { ApiKeysSettingsService } from "@core/services/apiKeysSettings"
+import { saveSettingsReturnState } from "@ui/web/lib/settingsNavigationState"
+import { consumeActiveSettingsNoteReturnPath } from "@ui/web/lib/aiIndexNavigationState"
+import { NotesTabStrip } from "@/components/features/notes/NotesTabStrip"
+import { MobileNotesTabMenu } from "@/components/features/notes/MobileNotesTabMenu"
+
+import { NavRail } from "@/components/features/navigation/NavRail"
+import { TagsPage } from "@/components/features/tags/TagsPage"
+import { MAX_NOTE_WORKSPACE_TABS } from "@core/services/noteWorkspaceTabs"
+
+type NoteRecord = Note & {
+  content?: string | null
+  headline?: string | null
+  rank?: number | null
+}
+
+type NotesShellProps = {
+  controller: NoteAppController
+}
+
+export function NotesShell({ controller }: NotesShellProps) {
+
+  const router = useRouter()
+  const noteEditorRef = React.useRef<NoteEditorHandle | null>(null)
+  const searchPanelRef = React.useRef<SearchResultsPanelHandle | null>(null)
+  const { supabase } = useSupabase()
+  const wordpressSettingsService = React.useMemo(() => new WordPressSettingsService(supabase), [supabase])
+  const apiKeysService = React.useMemo(() => new ApiKeysSettingsService(supabase), [supabase])
+  const [wordpressConfigured, setWordpressConfigured] = React.useState(false)
+
+  const [pendingChunkFocus, setPendingChunkFocus] = React.useState<PendingChunkFocus | null>(null)
+
+  React.useEffect(() => {
+    controller.registerNoteEditorRef(noteEditorRef)
+  }, [controller])
+
+  const user = controller.user
+  const { data: apiKeysStatus } = useQuery({
+    queryKey: ['apiKeysStatus', user?.id],
+    queryFn: () => apiKeysService.getStatus(),
+    staleTime: 5 * 60 * 1000,
+    enabled: Boolean(user?.id),
+  })
+  const hasGeminiApiKey = apiKeysStatus?.gemini?.configured ?? false
+
+  const {
+    notesDisplayed,
+    notesTotal,
+    selectionMode,
+    selectedCount,
+    bulkDeleting,
+    exitSelectionMode,
+    selectAllVisible,
+    deleteSelectedNotes,
+    filterByTag,
+    handleClearTagFilter,
+    handleCreateNote,
+    handleSignOut,
+    pendingCount,
+    failedCount,
+    isOffline,
+    selectedNote,
+    isEditing,
+    notePaneVisible,
+    tabs = [],
+    activeTabId = '',
+    addTab,
+    activateTab,
+    closeTab,
+    canAddTab = true,
+    workspaceHydrated = true,
+    handleSelectNote,
+    isSearchPanelOpen,
+    setIsSearchPanelOpen,
+    activeMainView,
+    setActiveMainView,
+    handleRenameTag,
+    handleDeleteTag,
+    notes,
+  } = controller
+
+  const refreshWordPressStatus = React.useCallback(async () => {
+    try {
+      const status = await wordpressSettingsService.getStatus()
+      setWordpressConfigured(status.configured)
+    } catch {
+      setWordpressConfigured(false)
+    }
+  }, [wordpressSettingsService])
+
+  React.useEffect(() => {
+    void refreshWordPressStatus()
+  }, [refreshWordPressStatus, user?.id])
+
+  const handleOpenInContext = React.useCallback(async (noteId: string, charOffset: number, chunkLength: number) => {
+    let note = controller.notes.find((n) => n.id === noteId)
+
+    if (!note) {
+      // Note not in the current paginated list — fetch it from the DB
+      try {
+        const { data } = await supabase
+          .from('notes')
+          .select('id, title, description, tags, created_at, updated_at, user_id')
+          .eq('id', noteId)
+          .maybeSingle()
+        if (!data) return
+        note = data as Note
+      } catch (error) {
+        console.error("Failed to fetch note for open-in-context", { noteId, error })
+        return
+      }
+    }
+    if (!note) return  // TypeScript: narrowing lost after await + let reassignment
+
+    const nextPendingChunkFocus = {
+      requestId: `${noteId}:${charOffset}:${chunkLength}:${Date.now()}`,
+      noteId,
+      charOffset,
+      chunkLength,
+    }
+    setPendingChunkFocus(nextPendingChunkFocus)
+
+    if (controller.selectedNote?.id === noteId && controller.isEditing) {
+      return
+    }
+
+    await controller.handleEditNote(note)
+  }, [controller, supabase])
+
+  const showEditor = notePaneVisible ?? !!(selectedNote || isEditing)
+  const handleOpenSearchPanel = React.useCallback(() => {
+    if (activeMainView !== "notes") {
+      setActiveMainView("notes")
+    }
+    if (isSearchPanelOpen) {
+      searchPanelRef.current?.focusInput()
+      return
+    }
+    setIsSearchPanelOpen(true)
+  }, [activeMainView, isSearchPanelOpen, setActiveMainView, setIsSearchPanelOpen])
+
+
+  const handlePendingChunkFocusApplied = React.useCallback((requestId: string) => {
+    setPendingChunkFocus((current) => (current?.requestId === requestId ? null : current))
+  }, [])
+
+  const handleOpenSettings = React.useCallback(async () => {
+    const notesUiState = await controller.captureSettingsReturnState()
+
+    if (typeof globalThis.location !== "undefined") {
+      saveSettingsReturnState({
+        returnPath: `${globalThis.location.pathname}${globalThis.location.search}${globalThis.location.hash}`,
+        notesUiState,
+      })
+    }
+
+    router.push("/settings")
+  }, [controller, router])
+
+  const handleBackFromNote = React.useCallback(() => {
+    const settingsReturnPath = consumeActiveSettingsNoteReturnPath()
+    if (settingsReturnPath) {
+      router.push(settingsReturnPath)
+      return
+    }
+
+    handleSelectNote(null).catch(() => {
+      // Fire-and-forget: wrappedHandleSelectNote already owns error handling.
+    })
+  }, [handleSelectNote, router])
+
+  const handleSelectTagFromTagsPage = React.useCallback((tag: string) => {
+    controller.handleTagClick(tag).catch(() => undefined)
+    setActiveMainView("notes")
+  }, [controller, setActiveMainView])
+
+  return (
+    <div
+      className="flex h-[100dvh] max-h-[100dvh] min-h-[100svh] bg-muted/20 overflow-hidden relative"
+      data-testid="notes-shell"
+    >
+      {/* Main Navigation Rail (Desktop Dock & Mobile Bottom Bar) */}
+      <NavRail
+        activeView={activeMainView}
+        onSelectView={(view) => {
+          if (view === "settings") {
+            void handleOpenSettings()
+          } else {
+            setActiveMainView(view)
+          }
+        }}
+        onOpenSearch={handleOpenSearchPanel}
+        onOpenSettings={() => void handleOpenSettings()}
+      />
+
+      {activeMainView === "tags" ? (
+        <main className="flex-1 flex min-h-0 flex-col h-full overflow-hidden">
+          <TagsPage
+            notes={notes}
+            onSelectTag={handleSelectTagFromTagsPage}
+            onRenameTag={handleRenameTag}
+            onDeleteTag={handleDeleteTag}
+          />
+        </main>
+      ) : (
+        <div className="flex min-h-0 min-w-0 flex-1 flex-col">
+          <MobileNotesTabMenu
+            tabs={tabs}
+            activeTabId={activeTabId}
+            addTabDisabled={!workspaceHydrated || !canAddTab}
+            addTabCapacityPending={!workspaceHydrated}
+            maximumTabCount={MAX_NOTE_WORKSPACE_TABS}
+            onAddTab={() => void addTab?.()}
+            onActivateTab={(tabId) => void activateTab?.(tabId)}
+            onCloseTab={(tabId) => void closeTab?.(tabId)}
+          />
+          <div className="flex min-h-0 min-w-0 flex-1">
+            <Sidebar
+              user={user!}
+              filterByTag={filterByTag}
+              notesDisplayed={notesDisplayed}
+              notesTotal={notesTotal}
+              pendingCount={pendingCount}
+              failedCount={failedCount}
+              isOffline={isOffline}
+              selectionMode={selectionMode}
+              selectedCount={selectedCount}
+              bulkDeleting={bulkDeleting}
+              onExitSelectionMode={exitSelectionMode}
+              onSelectAll={selectAllVisible}
+              onBulkDelete={deleteSelectedNotes}
+              onClearTagFilter={handleClearTagFilter}
+              onOpenSettings={() => void handleOpenSettings()}
+              onCreateNote={handleCreateNote}
+              onSignOut={handleSignOut}
+              onOpenSearch={handleOpenSearchPanel}
+              className={cn((showEditor || isSearchPanelOpen) ? "hidden md:flex" : "w-full md:w-80")}
+              data-testid="sidebar-container"
+            >
+              <ListPane controller={controller} />
+            </Sidebar>
+
+            {isSearchPanelOpen && (
+              <SearchResultsPanel
+                ref={searchPanelRef}
+                controller={controller}
+                hasGeminiApiKey={hasGeminiApiKey}
+                onOpenInContext={handleOpenInContext}
+                onClose={() => setIsSearchPanelOpen(false)}
+                className={cn(showEditor ? "hidden md:flex" : "w-full min-w-[300px] md:min-w-0")}
+              />
+            )}
+
+            <main
+              className={cn(
+                "flex-1 flex min-h-0 min-w-0 flex-col h-full overflow-hidden",
+                !showEditor ? "hidden md:flex" : "w-full"
+              )}
+              data-testid="editor-container"
+            >
+              <NotesTabStrip
+                tabs={tabs}
+                activeTabId={activeTabId}
+                addTabDisabled={!workspaceHydrated || !canAddTab}
+                addTabCapacityPending={!workspaceHydrated}
+                maximumTabCount={MAX_NOTE_WORKSPACE_TABS}
+                onAddTab={() => void addTab?.()}
+                onActivateTab={(tabId) => void activateTab?.(tabId)}
+                onCloseTab={(tabId) => void closeTab?.(tabId)}
+              />
+              <div className="flex-1 min-h-0 min-w-0 flex">
+                <EditorPane
+                  controller={controller}
+                  onBack={handleBackFromNote}
+                  noteEditorRef={noteEditorRef}
+                  wordpressConfigured={wordpressConfigured}
+                  pendingChunkFocus={pendingChunkFocus}
+                  onPendingChunkFocusApplied={handlePendingChunkFocusApplied}
+                />
+              </div>
+            </main>
+          </div>
+        </div>
+      )}
+
+      <DeleteNoteDialog controller={controller} />
+      <DiscardFailedSaveDialog controller={controller} />
+    </div>
+  )
+}
+
+
+function ListPane({ controller }: { controller: NoteAppController }) {
+  const {
+    notes,
+    notesQuery,
+    selectedNote,
+    handleSelectNote,
+    selectionMode,
+    selectedNoteIds,
+    toggleNoteSelection,
+    handleTagClick,
+  } = controller
+
+  return (
+    <NoteList
+      notes={notes as NoteRecord[]}
+      isLoading={notesQuery.isLoading}
+      selectedNoteId={selectedNote?.id}
+      selectionMode={selectionMode}
+      selectedIds={selectedNoteIds}
+      onToggleSelect={(note) => toggleNoteSelection(note.id)}
+      onSelectNote={(note) => handleSelectNote(note)}
+      onTagClick={handleTagClick}
+      onLoadMore={() => notesQuery.fetchNextPage()}
+      hasMore={notesQuery.hasNextPage}
+      isFetchingNextPage={notesQuery.isFetchingNextPage}
+    />
+  )
+}
+
+function EditorPane({
+  controller,
+  onBack,
+  noteEditorRef,
+  wordpressConfigured,
+  pendingChunkFocus,
+  onPendingChunkFocusApplied,
+}: {
+  controller: NoteAppController
+  onBack: () => void
+  noteEditorRef: React.RefObject<NoteEditorHandle | null>
+  wordpressConfigured: boolean
+  pendingChunkFocus: PendingChunkFocus | null
+  onPendingChunkFocusApplied: (requestId: string) => void
+}) {
+  const {
+    selectedNote,
+    activeTab,
+    activeTabId,
+    isEditing,
+    saving,
+    autoSaving,
+    lastSavedAt,
+    handleSaveNote,
+    handleReadNote,
+    handleEditNote,
+    handleDeleteNote,
+    handleRemoveTagFromNote,
+    notes,
+  } = controller
+
+  const { user } = useSupabase()
+  const allTagsQuery = useAllTagsQuery({ userId: user?.id, enabled: !!user })
+
+  const availableTags = React.useMemo(() => {
+    if (allTagsQuery.data?.tags && allTagsQuery.data.tags.length > 0) {
+      return allTagsQuery.data.tags
+    }
+    const collected = notes.flatMap((note) => note.tags ?? [])
+    return normalizeTagList(collected)
+  }, [allTagsQuery.data, notes])
+
+  const tagCounts = React.useMemo(() => {
+    if (allTagsQuery.data?.counts && Object.keys(allTagsQuery.data.counts).length > 0) {
+      return allTagsQuery.data.counts
+    }
+    const counts: Record<string, number> = {}
+    for (const note of notes) {
+      if (!note.tags) continue
+      const seenInNote = new Set<string>()
+      for (const rawTag of note.tags) {
+        if (typeof rawTag !== 'string') continue
+        const tag = normalizeTag(rawTag)
+        if (tag && !seenInNote.has(tag)) {
+          seenInNote.add(tag)
+          counts[tag] = (counts[tag] || 0) + 1
+        }
+      }
+    }
+    return counts
+  }, [allTagsQuery.data, notes])
+
+  // The editor treats its initial* props as an external snapshot and
+  // reconciles them against local typing. The live tab draft echoes every
+  // keystroke back through the controller, so it must be frozen per editor
+  // session (tab + note + mode) — otherwise the echo is acknowledged as an
+  // external refresh and the pending autosave is cancelled before it runs.
+  const sessionDraft = React.useMemo(
+    () => activeTab.draft,
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- session identity only; the live draft must not retrigger
+    [activeTabId, activeTab.noteId, activeTab.mode],
+  )
+
+  if (!selectedNote && !isEditing) {
+    return <EmptyState />
+  }
+
+  if (isEditing) {
+    return (
+      <NoteEditor
+        ref={noteEditorRef}
+        key={`workspace-tab-${activeTabId}`}
+        noteId={selectedNote?.id}
+        initialTitle={sessionDraft.title}
+        initialDescription={sessionDraft.description}
+        initialTags={sessionDraft.tags}
+        initialSession={{ draft: sessionDraft, view: activeTab.view }}
+        onDraftChange={controller.handleDraftChange}
+        onViewSessionChange={controller.handleViewSessionChange}
+        availableTags={availableTags}
+        tagCounts={tagCounts}
+        isSaving={saving}
+        onSave={handleSaveNote}
+        onRead={handleReadNote}
+        onAutoSave={controller.handleAutoSave}
+        isAutoSaving={autoSaving}
+        lastSavedAt={lastSavedAt}
+        wordpressConfigured={wordpressConfigured}
+        onDelete={selectedNote ? () => handleDeleteNote(selectedNote) : undefined}
+        onBack={onBack}
+        pendingChunkFocus={pendingChunkFocus}
+        onPendingChunkFocusApplied={onPendingChunkFocusApplied}
+      />
+    )
+  }
+
+  if (selectedNote) {
+    return (
+      <NoteView
+        key={`workspace-tab-${activeTabId}-note-${selectedNote.id}`}
+        note={selectedNote}
+        onEdit={() => handleEditNote(selectedNote)}
+        onDelete={() => handleDeleteNote(selectedNote)}
+        onTagClick={controller.handleTagClick}
+        onRemoveTag={(tag) => handleRemoveTagFromNote(selectedNote.id, tag)}
+        onBack={onBack}
+        wordpressConfigured={wordpressConfigured}
+        initialScrollTop={activeTab.view.scrollTop}
+        onViewSessionChange={controller.handleViewSessionChange}
+      />
+    )
+  }
+
+  return (
+    <div className="flex-1 flex items-center justify-center">
+      <Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
+    </div>
+  )
+}
+
+/**
+ * Closing a tab whose save failed throws those edits away, so it confirms
+ * first — in the app's own dialog, matching every other destructive action.
+ */
+function DiscardFailedSaveDialog({ controller }: { controller: NoteAppController }) {
+  const { tabPendingClose, confirmCloseTab, cancelCloseTab } = controller
+
+  return (
+    <AlertDialog
+      open={Boolean(tabPendingClose)}
+      onOpenChange={(open) => {
+        if (!open) cancelCloseTab?.()
+      }}
+    >
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Discard unsaved changes?</AlertDialogTitle>
+          <AlertDialogDescription>
+            &quot;{tabPendingClose?.label}&quot; could not be saved. Closing this tab discards those changes.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel data-cy="discard-failed-save-cancel">Keep editing</AlertDialogCancel>
+          <AlertDialogAction
+            data-cy="discard-failed-save-confirm"
+            onClick={() => void confirmCloseTab?.()}
+            className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+          >
+            Discard and close
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  )
+}
+
+function DeleteNoteDialog({ controller }: { controller: NoteAppController }) {
+  const {
+    deleteDialogOpen,
+    setDeleteDialogOpen,
+    confirmDeleteNote,
+    noteToDelete,
+  } = controller
+
+  return (
+    <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Delete Note</AlertDialogTitle>
+          <AlertDialogDescription>
+            Are you sure you want to delete &quot;{noteToDelete?.title}&quot;? This action cannot be undone.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>Cancel</AlertDialogCancel>
+          <AlertDialogAction onClick={confirmDeleteNote} className="bg-destructive text-destructive-foreground hover:bg-destructive/90">
+            Delete
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  )
+}
diff --git a/ui/web/hooks/useNoteAppController.ts b/ui/web/hooks/useNoteAppController.ts
index 8b31cba18a7..6fac6b2326e 100644
--- a/ui/web/hooks/useNoteAppController.ts
+++ b/ui/web/hooks/useNoteAppController.ts
@@ -102,6 +102,7 @@ export function useNoteAppController() {
   const selectedNote = activeTab.note
   const isEditing = activeTab.mode === 'editing'
   const [notePaneVisible, setNotePaneVisible] = useState(false)
+  const [tabPendingClose, setTabPendingClose] = useState<{ tabId: string; label: string } | null>(null)
   const legacyBridgeAppliedRef = useRef(false)
 
   const setSelectedNote = useCallback((value: NoteViewModel | null | ((previous: NoteViewModel | null) => NoteViewModel | null)) => {
@@ -632,24 +633,18 @@ export function useNoteAppController() {
     setLastSavedAt(null)
   }, [activateTab, activeTabId, flushAndCaptureActiveTab, setLastSavedAt, tabs])
 
-  const handleCloseTab = useCallback(async (tabId: string) => {
-    const tab = tabs.find((candidate) => candidate.id === tabId)
-    if (!tab) return
-
+  /**
+   * Closes a tab, skipping the autosave flush when the caller has already
+   * agreed to discard a failed save (flushing would only fail again).
+   */
+  const closeTabNow = useCallback(async (tabId: string, discardFailedSave: boolean) => {
     const tabIndex = tabs.findIndex((candidate) => candidate.id === tabId)
+    if (tabIndex < 0) return
+    const tab = tabs[tabIndex]
     const nextVisibleTab = tab.id === activeTabId
       ? (tabs[tabIndex + 1] ?? tabs[tabIndex - 1] ?? null)
       : tabs.find((candidate) => candidate.id === activeTabId) ?? null
 
-    // A tab whose save failed may be a brand-new note that never reached the
-    // server, so the saved title can be missing — fall back to the live draft
-    // before calling it "this tab".
-    const tabLabel = tab.note?.title?.trim() || tab.draft.title.trim() || 'this tab'
-    const discardFailedSave = tab.saveState === 'error'
-      && typeof window !== 'undefined'
-      && window.confirm(`Discard unsaved changes in "${tabLabel}"?`)
-    if (tab.saveState === 'error' && !discardFailedSave) return
-
     if (tab.id === activeTabId && !discardFailedSave) {
       if (!(await flushAndCaptureActiveTab())) return
     }
@@ -659,6 +654,33 @@ export function useNoteAppController() {
     setLastSavedAt(null)
   }, [activeTabId, closeTab, flushAndCaptureActiveTab, setLastSavedAt, tabs])
 
+  const handleCloseTab = useCallback(async (tabId: string) => {
+    const tab = tabs.find((candidate) => candidate.id === tabId)
+    if (!tab) return
+
+    // Closing a tab whose save failed throws the edits away, so it asks first
+    // — through the app's own dialog, not a blocking native confirm().
+    if (tab.saveState === 'error') {
+      // A failed save may be a brand-new note that never reached the server,
+      // so the saved title can be missing — fall back to the live draft.
+      setTabPendingClose({
+        tabId,
+        label: tab.note?.title?.trim() || tab.draft.title.trim() || 'this tab',
+      })
+      return
+    }
+
+    await closeTabNow(tabId, false)
+  }, [closeTabNow, tabs])
+
+  const confirmCloseTab = useCallback(async () => {
+    const pending = tabPendingClose
+    setTabPendingClose(null)
+    if (pending) await closeTabNow(pending.tabId, true)
+  }, [closeTabNow, tabPendingClose])
+
+  const cancelCloseTab = useCallback(() => setTabPendingClose(null), [])
+
   const workspaceHydrationAppliedRef = useRef(false)
   useEffect(() => {
     if (!workspaceHydrated || workspaceHydrationAppliedRef.current) return
@@ -989,6 +1011,9 @@ export function useNoteAppController() {
     addTab: handleAddTab,
     activateTab: handleActivateTab,
     closeTab: handleCloseTab,
+    tabPendingClose,
+    confirmCloseTab,
+    cancelCloseTab,
     canAddTab,
     workspaceHydrated,
     enterSelectionMode,
diff --git a/ui/web/tests/unit/hooks/useNoteAppControllerAdditional.test.tsx b/ui/web/tests/unit/hooks/useNoteAppControllerAdditional.test.tsx
index c461004d1d1..a906f348b27 100644
--- a/ui/web/tests/unit/hooks/useNoteAppControllerAdditional.test.tsx
+++ b/ui/web/tests/unit/hooks/useNoteAppControllerAdditional.test.tsx
@@ -323,6 +323,62 @@ describe('useNoteAppController additional observable behavior', () => {
     expect(result.current.notePaneVisible).toBe(false)
   })
 
+  it('asks before discarding a tab whose save failed, and only closes on confirm', async () => {
+    const { result } = setup()
+    const tabId = result.current.activeTabId
+
+    // Reach the error state the way the app does: an autosave that rejects.
+    mockHandleAutoSave.mockRejectedValueOnce(new Error('Network unavailable'))
+    await act(async () => {
+      await expect(
+        result.current.handleAutoSave({ title: '', description: '<p>x</p>', tags: '' }),
+      ).rejects.toThrow('Network unavailable')
+    })
+    expect(result.current.activeTab.saveState).toBe('error')
+
+    await act(async () => {
+      await result.current.closeTab(tabId)
+    })
+
+    // Still open, and the shell now has something to render a dialog from.
+    expect(result.current.tabPendingClose).toEqual({ tabId, label: 'this tab' })
+    expect(result.current.tabs.map((tab) => tab.id)).toContain(tabId)
+
+    act(() => {
+      result.current.cancelCloseTab()
+    })
+    expect(result.current.tabPendingClose).toBeNull()
+    expect(result.current.tabs.map((tab) => tab.id)).toContain(tabId)
+
+    await act(async () => {
+      await result.current.closeTab(tabId)
+    })
+    await act(async () => {
+      await result.current.confirmCloseTab()
+    })
+
+    expect(result.current.tabPendingClose).toBeNull()
+    expect(result.current.tabs.map((tab) => tab.id)).not.toContain(tabId)
+  })
+
+  it('names the failed tab from its draft when the note never reached the server', async () => {
+    const { result } = setup()
+    const tabId = result.current.activeTabId
+
+    mockHandleAutoSave.mockRejectedValueOnce(new Error('Network unavailable'))
+    await act(async () => {
+      await expect(
+        result.current.handleAutoSave({ title: 'Unsent note', description: '<p>x</p>', tags: '' }),
+      ).rejects.toThrow('Network unavailable')
+    })
+
+    await act(async () => {
+      await result.current.closeTab(tabId)
+    })
+
+    expect(result.current.tabPendingClose?.label).toBe('Unsent note')
+  })
+
   it('blocks controller Add tab before flushing when the shared workspace limit is reached', async () => {
     let nextId = 0
     // Stamped with the signed-in account: workspace state from anyone else is

From f5f8dd2fd58eef904f1e56fc29b3266041ce1319 Mon Sep 17 00:00:00 2001
From: denyskoreiba <denys.koreiba@flowlix.eu>
Date: Thu, 10 Sep 2026 22:32:00 +0200
Subject: [PATCH 21/23] test(notes-tabs): cover the discard-failed-save dialog

Component coverage for the dialog itself: it renders with the failed tab's
name, "Keep editing" cancels without closing, and "Discard and close" reports
the confirmation. The controller side (error state to pending close to
confirm/cancel) is covered in useNoteAppControllerAdditional.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 .../features/mobile/MobileLayout.cy.tsx       | 46 +++++++++++++++++++
 1 file changed, 46 insertions(+)

diff --git a/cypress/component/features/mobile/MobileLayout.cy.tsx b/cypress/component/features/mobile/MobileLayout.cy.tsx
index fc251504ca5..e585fed83a9 100644
--- a/cypress/component/features/mobile/MobileLayout.cy.tsx
+++ b/cypress/component/features/mobile/MobileLayout.cy.tsx
@@ -359,4 +359,50 @@ describe('Mobile Layout Adaptation', () => {
     // Back button should have md:hidden class
     cy.get('[data-cy="note-back-button"]').should('have.class', 'md:hidden')
   })
+
+  it('confirms a discarded failed save in the app dialog instead of a native confirm', () => {
+    const confirmCloseTab = cy.stub().as('confirmCloseTab')
+    confirmCloseTab.resolves()
+    const cancelCloseTab = cy.stub().as('cancelCloseTab')
+    const controller = createMockController({
+      tabPendingClose: { tabId: 'test-tab', label: 'Unsent note' },
+      confirmCloseTab,
+      cancelCloseTab,
+    })
+
+    cy.mount(
+      <ThemeProvider attribute='class' defaultTheme='system' enableSystem>
+        <SupabaseTestProvider supabase={mockSupabase}>
+          <NotesShell controller={controller} />
+        </SupabaseTestProvider>
+      </ThemeProvider>
+    )
+
+    cy.contains('Discard unsaved changes?').should('be.visible')
+    cy.contains('Unsent note').should('be.visible')
+
+    cy.get('[data-cy="discard-failed-save-cancel"]').click()
+    cy.get('@cancelCloseTab').should('have.been.called')
+    cy.get('@confirmCloseTab').should('not.have.been.called')
+  })
+
+  it('closes the tab when the discard dialog is confirmed', () => {
+    const confirmCloseTab = cy.stub().as('confirmCloseTab')
+    confirmCloseTab.resolves()
+    const controller = createMockController({
+      tabPendingClose: { tabId: 'test-tab', label: 'Unsent note' },
+      confirmCloseTab,
+    })
+
+    cy.mount(
+      <ThemeProvider attribute='class' defaultTheme='system' enableSystem>
+        <SupabaseTestProvider supabase={mockSupabase}>
+          <NotesShell controller={controller} />
+        </SupabaseTestProvider>
+      </ThemeProvider>
+    )
+
+    cy.get('[data-cy="discard-failed-save-confirm"]').click()
+    cy.get('@confirmCloseTab').should('have.been.calledOnce')
+  })
 })

From b9aaa351d67bb3d1dde050389354573335affffa Mon Sep 17 00:00:00 2001
From: denyskoreiba <denys.koreiba@flowlix.eu>
Date: Thu, 10 Sep 2026 22:41:14 +0200
Subject: [PATCH 22/23] fix(notes-tabs): keep persisting the workspace when it
 outgrows the budget
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Each tab caches the note it shows, so the 2MB session budget was reachable:
at 60KB note bodies only 17 tabs fit while the UI allows 32. Past that the
write threw, writeNoteWorkspaceState swallowed it, and the whole workspace
silently stopped persisting — a reload lost every tab with no indication.

- A clean tab's draft is a byte-for-byte copy of its note, so it is no longer
  written. Hydration already rebuilds it from the note, so the round trip is
  unchanged. Per-tab cost halves: 60KB notes now fit 34 tabs, above the cap.
- Over budget, the snapshot keeps the active tab, then every tab carrying
  unsaved work, then as many saved tabs as fit. A reload restores fewer tabs
  instead of none. Losing a saved note costs a re-open; losing a draft costs
  the user's typing.
- Dropping tabs is no longer silent: one warning per session, not per write,
  since persistence runs on every workspace change.

writeNoteWorkspaceState now reports { persisted, droppedTabIds } instead of a
bare boolean, which is what lets the hook say something.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 core/services/noteWorkspaceTabs.ts            | 70 ++++++++++++++++++-
 .../core-services-noteWorkspaceTabs.test.ts   | 56 +++++++++++++++
 .../design/2026-08-01-feature-notes-tabs.md   | 19 +++++
 .../testing/2026-08-01-feature-notes-tabs.md  | 22 ++++++
 ui/web/hooks/useNoteWorkspaceTabs.ts          | 15 +++-
 ui/web/lib/noteWorkspaceStorage.ts            | 25 +++++--
 .../unit/hooks/useNoteWorkspaceTabs.test.tsx  | 57 +++++++++++++++
 .../unit/lib/noteWorkspaceStorage.test.ts     |  4 +-
 8 files changed, 257 insertions(+), 11 deletions(-)
 create mode 100644 ui/web/tests/unit/hooks/useNoteWorkspaceTabs.test.tsx

diff --git a/core/services/noteWorkspaceTabs.ts b/core/services/noteWorkspaceTabs.ts
index a1c948b6298..dd43f03d702 100644
--- a/core/services/noteWorkspaceTabs.ts
+++ b/core/services/noteWorkspaceTabs.ts
@@ -391,10 +391,78 @@ export function hydrateNoteWorkspaceState(
   return { version: NOTE_WORKSPACE_VERSION, userId, tabs, activeTabId }
 }
 
+/**
+ * A clean tab's draft is a byte-for-byte copy of the note it shows, and each
+ * tab holds a whole note body. Dropping the copy halves what the workspace
+ * costs to store; hydration rebuilds it from the note (see normalizeTabDraft),
+ * so the round trip is unchanged.
+ */
+type PersistedWorkspaceTab = Omit<NoteWorkspaceTab, 'draft'> & { draft?: NoteDraftSnapshot }
+
+const toPersistedTab = (tab: NoteWorkspaceTab): PersistedWorkspaceTab => {
+  if (!tab.note) return tab
+  const derived = draftFromNote(tab.note)
+  const isCopyOfNote = tab.draft.title === derived.title
+    && tab.draft.description === derived.description
+    && tab.draft.tags === derived.tags
+  if (!isCopyOfNote) return tab
+
+  const withoutDraft: PersistedWorkspaceTab = { ...tab }
+  delete withoutDraft.draft
+  return withoutDraft
+}
+
+const serializeTabs = (state: NoteWorkspaceState, tabs: NoteWorkspaceTab[]): string => (
+  JSON.stringify({ ...state, tabs: tabs.map(toPersistedTab) })
+)
+
 export function serializeNoteWorkspaceState(state: NoteWorkspaceState): string {
-  const serialized = JSON.stringify(state)
+  const serialized = serializeTabs(state, state.tabs)
   if (serialized.length > MAX_NOTE_WORKSPACE_SERIALIZED_LENGTH) {
     throw new RangeError('Note workspace state exceeds the storage limit')
   }
   return serialized
 }
+
+export type NoteWorkspaceSerialization = {
+  serialized: string
+  /** Tabs left out to stay inside the budget, in the order they were dropped. */
+  droppedTabIds: string[]
+}
+
+/**
+ * Serializes as much of the workspace as fits the budget instead of failing
+ * outright. A single oversized write used to lose every tab silently; keeping
+ * a subset means a reload restores fewer tabs rather than none.
+ *
+ * The active tab is never dropped, and tabs carrying unsaved work go last —
+ * losing a saved note costs a re-open, losing a draft costs the user's typing.
+ * Returns null only when even the active tab alone exceeds the budget.
+ */
+export function serializeNoteWorkspaceStateWithinLimit(
+  state: NoteWorkspaceState,
+  maxLength: number = MAX_NOTE_WORKSPACE_SERIALIZED_LENGTH,
+): NoteWorkspaceSerialization | null {
+  let tabs = state.tabs
+  const droppedTabIds: string[] = []
+
+  for (;;) {
+    const serialized = serializeTabs(state, tabs)
+    if (serialized.length <= maxLength) return { serialized, droppedTabIds }
+
+    // Drop the least costly tab to lose: saved before unsaved, latest first.
+    const droppable = tabs
+      .map((tab, index) => ({ tab, index }))
+      .filter(({ tab }) => tab.id !== state.activeTabId)
+      .sort((left, right) => {
+        const rank = (entry: { tab: NoteWorkspaceTab }) => (entry.tab.saveState === 'saved' ? 0 : 1)
+        return rank(left) - rank(right) || right.index - left.index
+      })
+
+    const next = droppable[0]
+    if (!next) return null
+
+    droppedTabIds.push(next.tab.id)
+    tabs = tabs.filter((tab) => tab.id !== next.tab.id)
+  }
+}
diff --git a/core/tests/unit/core-services-noteWorkspaceTabs.test.ts b/core/tests/unit/core-services-noteWorkspaceTabs.test.ts
index 63a21d01763..e47bee926ac 100644
--- a/core/tests/unit/core-services-noteWorkspaceTabs.test.ts
+++ b/core/tests/unit/core-services-noteWorkspaceTabs.test.ts
@@ -13,6 +13,7 @@ import {
   openNoteInWorkspace,
   resetWorkspaceTabsForNotes,
   serializeNoteWorkspaceState,
+  serializeNoteWorkspaceStateWithinLimit,
   updateWorkspaceTab,
 } from '@core/services/noteWorkspaceTabs'
 
@@ -242,4 +243,59 @@ describe('note workspace tab state', () => {
     expect(hydrated.tabs[0].noteId).toBeNull()
     expect(hydrated.tabs[0].note).toBeNull()
   })
+
+  it('omits a draft that is only a copy of the note it shows', () => {
+    const big = note('note-big')
+    big.description = '<p>' + 'x'.repeat(50_000) + '</p>'
+    const state = openNoteInWorkspace(createNoteWorkspaceState(ids('tab-1'), 'user-1'), big)
+
+    const serialized = serializeNoteWorkspaceState(state)
+
+    // The body appears once, not once for the note and once for the draft.
+    expect(serialized.split('x'.repeat(50_000)).length - 1).toBe(1)
+    // ...and the round trip still yields the draft.
+    expect(hydrateNoteWorkspaceState(serialized, ids('r1'), 'user-1')).toEqual(state)
+  })
+
+  it('keeps a draft that has diverged from the note', () => {
+    const edited = note('note-edited')
+    let state = openNoteInWorkspace(createNoteWorkspaceState(ids('tab-1'), 'user-1'), edited)
+    state = updateWorkspaceTab(state, state.activeTabId, {
+      draft: { title: 'Locally edited' },
+      saveState: 'dirty',
+    })
+
+    const restored = hydrateNoteWorkspaceState(serializeNoteWorkspaceState(state), ids('r1'), 'user-1')
+
+    expect(restored.tabs[0].draft.title).toBe('Locally edited')
+  })
+
+  it('stores as many tabs as fit instead of losing the whole workspace', () => {
+    const body = '<p>' + 'y'.repeat(20_000) + '</p>'
+    let state = createNoteWorkspaceState(ids('tab-0'), 'user-1')
+    state = openNoteInWorkspace(state, { ...note('note-0'), description: body })
+    for (let index = 1; index < 6; index += 1) {
+      state = addWorkspaceTab(state, ids(`tab-${index}`))
+      state = openNoteInWorkspace(state, { ...note(`note-${index}`), description: body })
+    }
+    // Mark one background tab as carrying unsaved work.
+    state = updateWorkspaceTab(state, state.tabs[1].id, { saveState: 'dirty' })
+
+    // A budget that only fits a couple of these tabs.
+    const result = serializeNoteWorkspaceStateWithinLimit(state, 60_000)
+
+    expect(result).not.toBeNull()
+    expect(result!.droppedTabIds.length).toBeGreaterThan(0)
+    expect(result!.serialized.length).toBeLessThanOrEqual(60_000)
+    // The active tab and the unsaved one survive; saved tabs are given up first.
+    expect(result!.droppedTabIds).not.toContain(state.activeTabId)
+    expect(result!.droppedTabIds).not.toContain(state.tabs[1].id)
+  })
+
+  it('reports failure only when even the active tab cannot fit', () => {
+    const huge = { ...note('note-huge'), description: '<p>' + 'z'.repeat(5_000) + '</p>' }
+    const state = openNoteInWorkspace(createNoteWorkspaceState(ids('tab-1'), 'user-1'), huge)
+
+    expect(serializeNoteWorkspaceStateWithinLimit(state, 500)).toBeNull()
+  })
 })
diff --git a/docs/ai/design/2026-08-01-feature-notes-tabs.md b/docs/ai/design/2026-08-01-feature-notes-tabs.md
index 71f53aeff39..369f96fa1bb 100644
--- a/docs/ai/design/2026-08-01-feature-notes-tabs.md
+++ b/docs/ai/design/2026-08-01-feature-notes-tabs.md
@@ -185,6 +185,25 @@ The hook re-hydrates whenever the user id changes and only writes once the
 in-memory state belongs to the account currently signed in, so the outgoing
 account's tabs are never rewritten under the incoming one.
 
+### The persisted workspace degrades in pieces, not all at once
+
+Each tab caches the note it shows, so the 2MB session budget is a real
+constraint rather than a theoretical one. Two rules keep it out of the way:
+
+- A clean tab's draft is a byte-for-byte copy of its note, so it is not
+  written; hydration rebuilds it from the note. That halves the cost per tab
+  and moves the ceiling above the 32-tab cap for notes up to roughly 60KB —
+  before this, a workspace of 60KB notes stopped persisting at 17 tabs.
+- Over budget, the snapshot keeps the active tab, then every tab carrying
+  unsaved work, then as many saved tabs as fit. Losing a saved note costs a
+  re-open; losing a draft costs the user's typing. Previously one oversized
+  snapshot threw, the write was swallowed, and the entire workspace silently
+  stopped persisting.
+
+Dropping tabs is reported once per session rather than per write, since
+persistence runs on every workspace change. Nothing is written only when a
+single note is too large for the budget on its own.
+
 ### Active-slot replacement is the default
 
 `openNoteInWorkspace` updates the active tab. `addWorkspaceTab` is the only operation that increases tab count. This encodes the product's key rule in one reducer function instead of relying on individual click handlers.
diff --git a/docs/ai/testing/2026-08-01-feature-notes-tabs.md b/docs/ai/testing/2026-08-01-feature-notes-tabs.md
index 0a55cc48afc..568c802b5a7 100644
--- a/docs/ai/testing/2026-08-01-feature-notes-tabs.md
+++ b/docs/ai/testing/2026-08-01-feature-notes-tabs.md
@@ -167,6 +167,28 @@ Regression coverage: `core-services-noteWorkspaceTabs.test.ts` (mismatched
 stamp, and legacy state with no stamp) and `noteWorkspaceStorage.test.ts`
 (shared session key not restored across accounts).
 
+### Storage-budget pass (2026-09-10)
+
+Measured before changing anything: a tab costs ~2x the note body, because the
+note and a clean tab's identical draft are both stored. At 60KB bodies only 17
+tabs fit the 2MB budget while the UI allows 32 — past that the write threw,
+the error was swallowed, and nothing persisted at all.
+
+After the change, per-tab cost is halved and the ceiling clears the cap:
+
+| note body | tabs that fit, before | after |
+|---|---|---|
+| 10,000 chars | 103 | 204 |
+| 30,000 chars | 34 | 69 |
+| 60,000 chars | 17 (below the 32 cap) | 34 |
+
+Coverage: core tests assert the redundant draft is omitted while a diverged
+draft is kept, that the round trip is unchanged, that an over-budget snapshot
+keeps the active and unsaved tabs and sheds saved ones, and that it reports
+failure only when the active tab alone will not fit. A hook test asserts the
+warning fires once rather than on every write, and that a changed account
+re-reads the workspace.
+
 ## Performance Testing
 
 - Verify switching does not mount more than one editor or trigger duplicate fetches.
diff --git a/ui/web/hooks/useNoteWorkspaceTabs.ts b/ui/web/hooks/useNoteWorkspaceTabs.ts
index 3a2c844fb28..8dd3adf5aa2 100644
--- a/ui/web/hooks/useNoteWorkspaceTabs.ts
+++ b/ui/web/hooks/useNoteWorkspaceTabs.ts
@@ -1,4 +1,5 @@
-import { useCallback, useEffect, useMemo, useState } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { toast } from 'sonner'
 import {
   activateWorkspaceTab,
   addWorkspaceTab,
@@ -37,9 +38,19 @@ export function useNoteWorkspaceTabs(userId: string | null = null) {
   // otherwise the outgoing account's tabs get rewritten under the new user.
   const hydrated = hydratedUserId === userId
 
+  // Persistence runs on every workspace change, so the warning is raised once
+  // per session — the alternative is a toast on each keystroke.
+  const warnedAboutDroppedTabsRef = useRef(false)
+
   useEffect(() => {
     if (!hydrated) return
-    writeNoteWorkspaceState(state)
+    const { droppedTabIds } = writeNoteWorkspaceState(state)
+    if (droppedTabIds.length === 0 || warnedAboutDroppedTabsRef.current) return
+
+    warnedAboutDroppedTabsRef.current = true
+    toast.warning('Too many long notes are open to remember them all', {
+      description: 'Some tabs will not come back after a reload. Close a few to keep the rest.',
+    })
   }, [hydrated, state])
 
   const addTab = useCallback(() => {
diff --git a/ui/web/lib/noteWorkspaceStorage.ts b/ui/web/lib/noteWorkspaceStorage.ts
index 5341918e159..368fd3325f1 100644
--- a/ui/web/lib/noteWorkspaceStorage.ts
+++ b/ui/web/lib/noteWorkspaceStorage.ts
@@ -1,6 +1,6 @@
 import {
   hydrateNoteWorkspaceState,
-  serializeNoteWorkspaceState,
+  serializeNoteWorkspaceStateWithinLimit,
   type NoteWorkspaceIdFactory,
   type NoteWorkspaceState,
 } from '@core/services/noteWorkspaceTabs'
@@ -42,18 +42,31 @@ export function readNoteWorkspaceState({
   }
 }
 
+export type WriteNoteWorkspaceStateResult = {
+  persisted: boolean
+  /** Tabs left out to fit the budget; empty when everything was stored. */
+  droppedTabIds: string[]
+}
+
+const NOT_PERSISTED: WriteNoteWorkspaceStateResult = { persisted: false, droppedTabIds: [] }
+
 export function writeNoteWorkspaceState(
   state: NoteWorkspaceState,
   storage: Storage | null = getSessionStorage(),
-): boolean {
-  if (!storage) return false
+): WriteNoteWorkspaceStateResult {
+  if (!storage) return NOT_PERSISTED
+
+  // Store as much as fits rather than losing the whole workspace to one
+  // oversized snapshot.
+  const serialization = serializeNoteWorkspaceStateWithinLimit(state)
+  if (!serialization) return NOT_PERSISTED
 
   try {
-    storage.setItem(NOTE_WORKSPACE_STORAGE_KEY, serializeNoteWorkspaceState(state))
-    return true
+    storage.setItem(NOTE_WORKSPACE_STORAGE_KEY, serialization.serialized)
+    return { persisted: true, droppedTabIds: serialization.droppedTabIds }
   } catch {
     // Quota/private-mode failures must not block the in-memory workspace.
-    return false
+    return NOT_PERSISTED
   }
 }
 
diff --git a/ui/web/tests/unit/hooks/useNoteWorkspaceTabs.test.tsx b/ui/web/tests/unit/hooks/useNoteWorkspaceTabs.test.tsx
new file mode 100644
index 00000000000..a2892d16fda
--- /dev/null
+++ b/ui/web/tests/unit/hooks/useNoteWorkspaceTabs.test.tsx
@@ -0,0 +1,57 @@
+import { act, renderHook } from '@testing-library/react'
+import { toast } from 'sonner'
+
+import { useNoteWorkspaceTabs } from '@ui/web/hooks/useNoteWorkspaceTabs'
+import { createNoteWorkspaceState } from '@core/services/noteWorkspaceTabs'
+import { readNoteWorkspaceState, writeNoteWorkspaceState } from '@ui/web/lib/noteWorkspaceStorage'
+
+jest.mock('sonner', () => ({ toast: { warning: jest.fn() } }))
+jest.mock('@ui/web/lib/noteWorkspaceStorage', () => ({
+  readNoteWorkspaceState: jest.fn(),
+  writeNoteWorkspaceState: jest.fn(),
+}))
+
+const mockRead = readNoteWorkspaceState as jest.MockedFunction<typeof readNoteWorkspaceState>
+const mockWrite = writeNoteWorkspaceState as jest.MockedFunction<typeof writeNoteWorkspaceState>
+
+describe('useNoteWorkspaceTabs persistence warning', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+    mockRead.mockImplementation(({ userId = null } = {}) => createNoteWorkspaceState(undefined, userId))
+    mockWrite.mockReturnValue({ persisted: true, droppedTabIds: [] })
+  })
+
+  it('stays quiet while the whole workspace is being stored', () => {
+    const { result } = renderHook(() => useNoteWorkspaceTabs('user-1'))
+
+    act(() => { result.current.addTab() })
+
+    expect(mockWrite).toHaveBeenCalled()
+    expect(toast.warning).not.toHaveBeenCalled()
+  })
+
+  it('warns once when tabs stop fitting, not on every later write', () => {
+    mockWrite.mockReturnValue({ persisted: true, droppedTabIds: ['tab-dropped'] })
+    const { result } = renderHook(() => useNoteWorkspaceTabs('user-1'))
+
+    act(() => { result.current.addTab() })
+    act(() => { result.current.addTab() })
+    act(() => { result.current.addTab() })
+
+    // Persistence runs on every change; the warning must not follow it.
+    expect(mockWrite.mock.calls.length).toBeGreaterThan(1)
+    expect(toast.warning).toHaveBeenCalledTimes(1)
+  })
+
+  it('restores for the signed-in account and re-reads when the account changes', () => {
+    const { rerender } = renderHook(({ userId }) => useNoteWorkspaceTabs(userId), {
+      initialProps: { userId: 'user-1' },
+    })
+
+    expect(mockRead).toHaveBeenLastCalledWith({ userId: 'user-1' })
+
+    rerender({ userId: 'user-2' })
+
+    expect(mockRead).toHaveBeenLastCalledWith({ userId: 'user-2' })
+  })
+})
diff --git a/ui/web/tests/unit/lib/noteWorkspaceStorage.test.ts b/ui/web/tests/unit/lib/noteWorkspaceStorage.test.ts
index b7fa8c43446..83d28fac460 100644
--- a/ui/web/tests/unit/lib/noteWorkspaceStorage.test.ts
+++ b/ui/web/tests/unit/lib/noteWorkspaceStorage.test.ts
@@ -28,7 +28,7 @@ describe('note workspace session storage', () => {
   it('round-trips workspace state through the versioned session key', () => {
     const state = openNoteInWorkspace(createNoteWorkspaceState(() => 'tab-1'), note)
 
-    expect(writeNoteWorkspaceState(state)).toBe(true)
+    expect(writeNoteWorkspaceState(state).persisted).toBe(true)
     expect(window.sessionStorage.getItem(NOTE_WORKSPACE_STORAGE_KEY)).toContain('note-1')
     expect(readNoteWorkspaceState()).toEqual(state)
   })
@@ -52,7 +52,7 @@ describe('note workspace session storage', () => {
     const state = createNoteWorkspaceState(() => 'tab-1')
 
     expect(readNoteWorkspaceState({ storage: throwingStorage, idFactory: () => 'fallback-tab' }).activeTabId).toBe('fallback-tab')
-    expect(writeNoteWorkspaceState(state, throwingStorage)).toBe(false)
+    expect(writeNoteWorkspaceState(state, throwingStorage).persisted).toBe(false)
     expect(() => clearNoteWorkspaceState(throwingStorage)).not.toThrow()
   })
 

From b2469efeb42eef02125c8a99849981e82d9dab85 Mon Sep 17 00:00:00 2001
From: denyskoreiba <denys.koreiba@flowlix.eu>
Date: Thu, 10 Sep 2026 22:55:18 +0200
Subject: [PATCH 23/23] feat(notes-tabs): animate a closing tab out instead of
 snapping it away
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

A tab disappearing made the strip jump, with the remaining tabs teleporting
into the gap. A closed tab now collapses over 150ms while the rest settle:
horizontally in the desktop strip, vertically in the mobile list, from one
shared hook so the two cannot drift apart.

Closing is not delayed by any of this — the tab leaves workspace state
immediately. useAnimatedTabList only keeps a non-interactive copy
(aria-hidden, inert, no pointer events) in the same slot until the exit ends.

The exit is a CSS keyframe animation, not a transition: the copy is created
already in its end state, so a transition would have nothing to run from.
This was measured wrong twice before landing on it, once because
requestAnimationFrame does not fire while the document is hidden.

Opening deliberately does not mirror the collapse. Closing the gap is a layout
requirement; a new tab arrives in space that already exists, and expanding it
while the strip may also be scrolling to reveal it reads as busy. New tabs
fade and scale in over the same duration instead.

prefers-reduced-motion drops all of it: the hook skips the copy, and a new
global rule neutralises animation and transition durations across the app.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 app/globals.css                               | 40 ++++++++
 .../design/2026-08-01-feature-notes-tabs.md   | 22 +++++
 .../features/notes/MobileNotesTabMenu.tsx     | 19 +++-
 .../features/notes/NotesTabStrip.tsx          | 18 +++-
 ui/web/hooks/useAnimatedTabList.ts            | 93 +++++++++++++++++++
 .../unit/hooks/useAnimatedTabList.test.tsx    | 86 +++++++++++++++++
 6 files changed, 272 insertions(+), 6 deletions(-)
 create mode 100644 ui/web/hooks/useAnimatedTabList.ts
 create mode 100644 ui/web/tests/unit/hooks/useAnimatedTabList.test.tsx

diff --git a/app/globals.css b/app/globals.css
index 65c274ab7e6..891d56e2f9c 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -41,6 +41,46 @@ button,
   color-scheme: dark;
 }
 
+/* Workspace tabs: a closed tab plays this out while it is still mounted, so
+   the strip closes the gap instead of snapping. A keyframe animation is used
+   rather than a transition because the element is created already in its end
+   state — a transition would have nothing to run from. */
+@keyframes note-tab-collapse-x {
+  from { max-width: 14rem; min-width: 7.5rem; opacity: 1; margin-right: 0; }
+  to { max-width: 0; min-width: 0; opacity: 0; margin-right: -0.25rem; }
+}
+
+/* 3rem sits just above a single-line row (~2.25rem) so the collapse starts
+   almost at once; rows always truncate to one line. */
+@keyframes note-tab-collapse-y {
+  from { max-height: 3rem; opacity: 1; }
+  to { max-height: 0; opacity: 0; }
+}
+
+.note-tab-closing {
+  animation: note-tab-collapse-x var(--note-tab-motion, 150ms) ease-out forwards;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+.note-tab-row-closing {
+  animation: note-tab-collapse-y var(--note-tab-motion, 150ms) ease-out forwards;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+/* Honour the OS-level request for less motion across the whole app. */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
 /* Hide scrollbar utility */
 .scrollbar-none {
   -ms-overflow-style: none !important;
diff --git a/docs/ai/design/2026-08-01-feature-notes-tabs.md b/docs/ai/design/2026-08-01-feature-notes-tabs.md
index 369f96fa1bb..8e9f53a46e1 100644
--- a/docs/ai/design/2026-08-01-feature-notes-tabs.md
+++ b/docs/ai/design/2026-08-01-feature-notes-tabs.md
@@ -204,6 +204,28 @@ Dropping tabs is reported once per session rather than per write, since
 persistence runs on every workspace change. Nothing is written only when a
 single note is too large for the budget on its own.
 
+### Closing a tab is animated; opening one is acknowledged
+
+A tab vanishing makes the whole strip jump, so a closed tab collapses out of
+the way over 150ms while the rest slide into place. The tab is dropped from
+workspace state the moment it is closed — the animation never delays that.
+`useAnimatedTabList` only keeps a non-interactive copy (`aria-hidden`, `inert`)
+rendered in the same slot until the exit finishes, shared by the desktop strip
+and the mobile list so both behave the same way.
+
+The exit is a CSS keyframe animation rather than a transition: the copy is
+created already in its end state, and a transition has nothing to run from.
+Desktop collapses horizontally, mobile vertically; same duration, same easing.
+
+Opening does not mirror the collapse. The gap has to close when a tab leaves —
+that is layout, not decoration — but a new tab arrives in space that already
+exists, and growing it while the strip may also be scrolling to reveal it
+reads as busy. A new tab fades and scales in over the same 150ms instead.
+
+`prefers-reduced-motion` removes all of it: the hook skips the copy entirely,
+and a global rule in `globals.css` neutralises animation and transition
+durations app-wide.
+
 ### Active-slot replacement is the default
 
 `openNoteInWorkspace` updates the active tab. `addWorkspaceTab` is the only operation that increases tab count. This encodes the product's key rule in one reducer function instead of relying on individual click handlers.
diff --git a/ui/web/components/features/notes/MobileNotesTabMenu.tsx b/ui/web/components/features/notes/MobileNotesTabMenu.tsx
index 7fcb924474c..715f5fae872 100644
--- a/ui/web/components/features/notes/MobileNotesTabMenu.tsx
+++ b/ui/web/components/features/notes/MobileNotesTabMenu.tsx
@@ -6,6 +6,7 @@ import type { NoteWorkspaceTab } from "@core/services/noteWorkspaceTabs"
 import { Button } from "@/components/ui/button"
 import { cn } from "@ui/web/lib/utils"
 import { getTabLabel, SaveStateIndicator, type NotesTabStripProps } from "./NotesTabStrip"
+import { useAnimatedTabList, TAB_TRANSITION_MS } from "@ui/web/hooks/useAnimatedTabList"
 
 export type MobileNotesTabMenuProps = Readonly<NotesTabStripProps>
 
@@ -22,6 +23,8 @@ export function MobileNotesTabMenu({
   const [isOpen, setIsOpen] = useState(false)
   const containerRef = useRef<HTMLDivElement | null>(null)
   const activeRowRef = useRef<HTMLDivElement | null>(null)
+  // Same motion as the desktop strip, collapsing vertically instead.
+  const renderedTabs = useAnimatedTabList(tabs)
   const activeTab = tabs.find((tab) => tab.id === activeTabId) ?? tabs[0]
   const activeLabel = activeTab ? getTabLabel(activeTab) : "No open notes"
 
@@ -116,15 +119,25 @@ export function MobileNotesTabMenu({
           aria-label="Open notes"
         >
           <div className="max-h-[60vh] overflow-y-auto overscroll-contain">
-            {tabs.map((tab) => {
+            {renderedTabs.map(({ tab, closing }) => {
               const label = getTabLabel(tab)
-              const isActive = tab.id === activeTabId
+              const isActive = !closing && tab.id === activeTabId
 
               return (
                 <div
                   key={tab.id}
                   ref={isActive ? activeRowRef : undefined}
-                  className="flex items-center gap-1 rounded-lg"
+                  className={cn(
+                    "flex items-center gap-1 rounded-lg",
+                    closing ? "note-tab-row-closing" : "animate-in fade-in slide-in-from-top-1",
+                  )}
+                  style={{
+                    ["--note-tab-motion" as string]: `${TAB_TRANSITION_MS}ms`,
+                    animationDuration: `${TAB_TRANSITION_MS}ms`,
+                  }}
+                  aria-hidden={closing || undefined}
+                  inert={closing}
+                  data-closing={closing || undefined}
                 >
                   <Button
                     type="button"
diff --git a/ui/web/components/features/notes/NotesTabStrip.tsx b/ui/web/components/features/notes/NotesTabStrip.tsx
index 11c93eefc37..52cd610caa3 100644
--- a/ui/web/components/features/notes/NotesTabStrip.tsx
+++ b/ui/web/components/features/notes/NotesTabStrip.tsx
@@ -5,6 +5,7 @@ import { WarningCircle as AlertCircle, CaretLeft as ChevronLeft, CaretRight as C
 import { MAX_NOTE_WORKSPACE_TABS, type NoteWorkspaceTab } from "@core/services/noteWorkspaceTabs"
 import { Button } from "@/components/ui/button"
 import { cn } from "@ui/web/lib/utils"
+import { useAnimatedTabList, TAB_TRANSITION_MS } from "@ui/web/hooks/useAnimatedTabList"
 
 export type NotesTabStripProps = {
   tabs: NoteWorkspaceTab[]
@@ -136,6 +137,9 @@ export function NotesTabStrip({
   const tabViewportRef = useRef<HTMLDivElement | null>(null)
   const tabButtonRefs = useRef(new Map<string, HTMLButtonElement>())
   const [overflow, setOverflow] = useState({ left: false, right: false })
+  // A closed tab stays on screen just long enough to collapse, so the strip
+  // closes the gap instead of snapping. It is already gone from state.
+  const renderedTabs = useAnimatedTabList(tabs)
 
   const syncOverflow = () => {
     const viewport = tabViewportRef.current
@@ -268,9 +272,9 @@ export function NotesTabStrip({
         onWheel={handleWheel}
       >
         <div className="flex min-w-full items-center gap-1">
-          {tabs.map((tab, index) => {
+          {renderedTabs.map(({ tab, closing }, index) => {
             const label = getTabLabel(tab)
-            const isActive = tab.id === activeTabId
+            const isActive = !closing && tab.id === activeTabId
 
             return (
               <div
@@ -278,8 +282,16 @@ export function NotesTabStrip({
                 className={cn(
                   "group flex min-w-[120px] max-w-56 flex-1 snap-start items-center rounded-md border border-transparent",
                   isActive && "border-border bg-muted/60",
+                  closing ? "note-tab-closing" : "animate-in fade-in zoom-in-95",
                 )}
-                data-tab-id={tab.id}
+                style={{
+                  ["--note-tab-motion" as string]: `${TAB_TRANSITION_MS}ms`,
+                  animationDuration: `${TAB_TRANSITION_MS}ms`,
+                }}
+                aria-hidden={closing || undefined}
+                inert={closing}
+                data-tab-id={closing ? undefined : tab.id}
+                data-closing={closing || undefined}
               >
                 <Button
                   type="button"
diff --git a/ui/web/hooks/useAnimatedTabList.ts b/ui/web/hooks/useAnimatedTabList.ts
new file mode 100644
index 00000000000..1ef3298dc2c
--- /dev/null
+++ b/ui/web/hooks/useAnimatedTabList.ts
@@ -0,0 +1,93 @@
+import { useEffect, useRef, useState } from 'react'
+
+const REDUCED_MOTION_QUERY = '(prefers-reduced-motion: reduce)'
+
+/** Motion shared by the desktop strip and the mobile tab list. */
+export const TAB_TRANSITION_MS = 150
+
+function usePrefersReducedMotion(): boolean {
+  const [reduced, setReduced] = useState(false)
+
+  useEffect(() => {
+    if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') return
+
+    let query: MediaQueryList
+    try {
+      query = window.matchMedia(REDUCED_MOTION_QUERY)
+    } catch {
+      return
+    }
+
+    const sync = () => setReduced(query.matches)
+    sync()
+
+    // Safari below 14 only has the deprecated listener API.
+    if (typeof query.addEventListener === 'function') {
+      query.addEventListener('change', sync)
+      return () => query.removeEventListener('change', sync)
+    }
+    query.addListener(sync)
+    return () => query.removeListener(sync)
+  }, [])
+
+  return reduced
+}
+
+export type AnimatedTabEntry<T> = {
+  tab: T
+  /** True while the tab is only on screen to play its exit; it is already gone from state. */
+  closing: boolean
+}
+
+/**
+ * Lets a removed tab play an exit before it disappears.
+ *
+ * The tab is dropped from workspace state immediately — closing is never
+ * delayed by the animation. This only keeps a non-interactive copy rendered
+ * in the same slot for the length of the exit, so the strip closes the gap
+ * smoothly instead of snapping. Nothing lingers when the viewer asked for
+ * reduced motion.
+ *
+ * The exit itself is a CSS keyframe animation (see .note-tab-closing): the
+ * copy is created already in its end state, which a transition would have
+ * nothing to run from.
+ */
+export function useAnimatedTabList<T extends { id: string }>(
+  tabs: T[],
+  durationMs: number = TAB_TRANSITION_MS,
+): AnimatedTabEntry<T>[] {
+  const reducedMotion = usePrefersReducedMotion()
+  const effectiveDuration = reducedMotion ? 0 : durationMs
+  const [closingTabs, setClosingTabs] = useState<Array<{ tab: T; index: number }>>([])
+  const previousTabsRef = useRef(tabs)
+
+  useEffect(() => {
+    const previous = previousTabsRef.current
+    previousTabsRef.current = tabs
+    if (effectiveDuration <= 0) return
+
+    const removed = previous
+      .map((tab, index) => ({ tab, index }))
+      .filter(({ tab }) => !tabs.some((candidate) => candidate.id === tab.id))
+    if (removed.length === 0) return
+
+    const removedIds = removed.map(({ tab }) => tab.id)
+    setClosingTabs((current) => [...current, ...removed])
+
+    const timer = setTimeout(() => {
+      setClosingTabs((current) => current.filter((entry) => !removedIds.includes(entry.tab.id)))
+    }, effectiveDuration)
+
+    return () => clearTimeout(timer)
+  }, [tabs, effectiveDuration])
+
+  if (closingTabs.length === 0) return tabs.map((tab) => ({ tab, closing: false }))
+
+  const entries: AnimatedTabEntry<T>[] = tabs.map((tab) => ({ tab, closing: false }))
+  // A tab that came back (reopened before the timer fired) is live, not a ghost.
+  const ghosts = closingTabs.filter((entry) => !tabs.some((tab) => tab.id === entry.tab.id))
+  for (const ghost of ghosts) {
+    entries.splice(Math.min(ghost.index, entries.length), 0, { tab: ghost.tab, closing: true })
+  }
+  return entries
+}
diff --git a/ui/web/tests/unit/hooks/useAnimatedTabList.test.tsx b/ui/web/tests/unit/hooks/useAnimatedTabList.test.tsx
new file mode 100644
index 00000000000..611150d77e5
--- /dev/null
+++ b/ui/web/tests/unit/hooks/useAnimatedTabList.test.tsx
@@ -0,0 +1,86 @@
+import { act, renderHook } from '@testing-library/react'
+
+import { TAB_TRANSITION_MS, useAnimatedTabList } from '@ui/web/hooks/useAnimatedTabList'
+
+type Tab = { id: string }
+
+const installMatchMedia = (reducedMotion: boolean) => {
+  const listeners = new Set<() => void>()
+  const query = {
+    matches: reducedMotion,
+    addEventListener: (_event: string, listener: () => void) => { listeners.add(listener) },
+    removeEventListener: (_event: string, listener: () => void) => { listeners.delete(listener) },
+    addListener: (listener: () => void) => { listeners.add(listener) },
+    removeListener: (listener: () => void) => { listeners.delete(listener) },
+  }
+  Object.defineProperty(window, 'matchMedia', {
+    configurable: true,
+    writable: true,
+    value: jest.fn(() => query),
+  })
+  return query
+}
+
+const ids = (entries: Array<{ tab: Tab; closing: boolean }>) =>
+  entries.map((entry) => `${entry.tab.id}${entry.closing ? ':closing' : ''}`)
+
+describe('useAnimatedTabList', () => {
+  beforeEach(() => {
+    jest.useFakeTimers()
+    installMatchMedia(false)
+  })
+
+  afterEach(() => {
+    jest.useRealTimers()
+  })
+
+  it('passes the live tabs through untouched while nothing is removed', () => {
+    const { result, rerender } = renderHook(({ tabs }) => useAnimatedTabList(tabs), {
+      initialProps: { tabs: [{ id: 'a' }, { id: 'b' }] as Tab[] },
+    })
+
+    expect(ids(result.current)).toEqual(['a', 'b'])
+
+    rerender({ tabs: [{ id: 'a' }, { id: 'b' }, { id: 'c' }] })
+
+    expect(ids(result.current)).toEqual(['a', 'b', 'c'])
+  })
+
+  it('keeps a removed tab in its slot until the exit has played', () => {
+    const { result, rerender } = renderHook(({ tabs }) => useAnimatedTabList(tabs), {
+      initialProps: { tabs: [{ id: 'a' }, { id: 'b' }, { id: 'c' }] as Tab[] },
+    })
+
+    rerender({ tabs: [{ id: 'a' }, { id: 'c' }] })
+
+    // Held in the middle slot so the strip closes the gap from where it was.
+    expect(ids(result.current)).toEqual(['a', 'b:closing', 'c'])
+
+    act(() => { jest.advanceTimersByTime(TAB_TRANSITION_MS) })
+
+    expect(ids(result.current)).toEqual(['a', 'c'])
+  })
+
+  it('treats a tab that comes back as live rather than a leftover ghost', () => {
+    const { result, rerender } = renderHook(({ tabs }) => useAnimatedTabList(tabs), {
+      initialProps: { tabs: [{ id: 'a' }, { id: 'b' }] as Tab[] },
+    })
+
+    rerender({ tabs: [{ id: 'a' }] })
+    expect(ids(result.current)).toEqual(['a', 'b:closing'])
+
+    rerender({ tabs: [{ id: 'a' }, { id: 'b' }] })
+    expect(ids(result.current)).toEqual(['a', 'b'])
+  })
+
+  it('removes the tab immediately when the viewer asked for reduced motion', () => {
+    installMatchMedia(true)
+    const { result, rerender } = renderHook(({ tabs }) => useAnimatedTabList(tabs), {
+      initialProps: { tabs: [{ id: 'a' }, { id: 'b' }] as Tab[] },
+    })
+
+    rerender({ tabs: [{ id: 'a' }] })
+
+    expect(ids(result.current)).toEqual(['a'])
+  })
+})