From 1e827ed64b4e286cf53a97c769478f0fc1bb25c6 Mon Sep 17 00:00:00 2001
From: Max <112043822+Maxaubert@users.noreply.github.com>
Date: Mon, 31 Aug 2026 14:32:33 +0200
Subject: [PATCH 01/10] feat(nav): add the verb-first tab model

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01MSq6HRwmaRKAv1t2hrdkJB
---
 src/shared/tabs.ts | 239 +++++++++++++++++++++++++++++++++++++++++++++
 test/tabs.test.ts  |  66 +++++++++++++
 2 files changed, 305 insertions(+)
 create mode 100644 src/shared/tabs.ts
 create mode 100644 test/tabs.test.ts

diff --git a/src/shared/tabs.ts b/src/shared/tabs.ts
new file mode 100644
index 0000000..d1af78f
--- /dev/null
+++ b/src/shared/tabs.ts
@@ -0,0 +1,239 @@
+import type { FileKind, ToolId } from './types'
+
+// The app's navigation model: pick what you want DONE, then drop files. The
+// rail is the verb; the file kind is a property of what you dropped, not a
+// place you navigate to. Replaces the old category-first catalog, where the
+// same verb (Convert) had to exist five times over, once per file type.
+
+export type TabId =
+  | 'convert'
+  | 'compress'
+  | 'resize'
+  | 'upscale'
+  | 'removebg'
+  | 'generate'
+  | 'tools'
+
+export interface Tab {
+  id: TabId
+  label: string
+  /** One line under the title, and on the empty state. */
+  desc: string
+  color: string
+  icon: string
+  /** Kinds this verb can act on. Empty means the tab takes no dropped input. */
+  kinds: FileKind[]
+  tool: ToolId
+}
+
+export const TABS: Tab[] = [
+  {
+    id: 'convert',
+    // PDF belongs here: familyFormats unions pdf + document + text into one
+    // family, so PDF -> DOCX/TXT/RTF is an ordinary convert.
+    label: 'Convert',
+    desc: 'Change format',
+    color: '#5b5bd6',
+    icon: 'convert',
+    kinds: ['image', 'video', 'audio', 'document', 'text', 'pdf', 'archive'],
+    tool: 'convert'
+  },
+  {
+    id: 'compress',
+    label: 'Compress',
+    desc: 'Shrink file size',
+    color: '#f5920b',
+    icon: 'compress',
+    kinds: ['image', 'video', 'audio', 'pdf'],
+    tool: 'compress'
+  },
+  {
+    id: 'resize',
+    label: 'Resize',
+    desc: 'Scale by percent or exact size',
+    color: '#22b364',
+    icon: 'resize',
+    kinds: ['image'],
+    tool: 'resize'
+  },
+  {
+    id: 'upscale',
+    label: 'Upscale',
+    desc: 'Enlarge 2x to 4x with AI',
+    color: '#8b5cf6',
+    icon: 'upscale',
+    kinds: ['image'],
+    tool: 'upscale'
+  },
+  {
+    id: 'removebg',
+    label: 'Remove BG',
+    desc: 'Cut the subject out with AI',
+    color: '#12b3a6',
+    icon: 'removebg',
+    kinds: ['image'],
+    tool: 'removebg'
+  },
+  {
+    // The one tab with no dropped input: the prompt IS the input.
+    id: 'generate',
+    label: 'Generate',
+    desc: 'Create an image from a text prompt',
+    color: '#d6409f',
+    icon: 'image',
+    kinds: [],
+    tool: 'generate'
+  },
+  {
+    // A grid, not a workspace, until a card is picked. `tool` is unused for the
+    // grid itself; each card names its own.
+    id: 'tools',
+    label: 'Tools',
+    desc: 'One-off jobs, grouped by what they act on',
+    color: '#6e6e73',
+    icon: 'tools',
+    kinds: [],
+    tool: 'pdf'
+  }
+]
+
+export interface ToolCard {
+  id: string
+  label: string
+  desc: string
+  /** Section heading in the Tools grid. */
+  group: string
+  color: string
+  icon: string
+  tool: ToolId
+  opKey: string
+  kinds: FileKind[]
+}
+
+// A conversion that crosses a convert group is a tool, not a Convert: Convert
+// works WITHIN a group, so archive-to-PDF and PDF-to-CBZ live here while
+// archive repack (.cbz to .cb7) stays on the Convert tab.
+export const TOOL_CARDS: ToolCard[] = [
+  {
+    id: 'pdf-text',
+    label: 'Extract text',
+    desc: 'Save the text layer as .txt',
+    group: 'PDF',
+    color: '#ef4444',
+    icon: 'text',
+    tool: 'pdf',
+    opKey: 'extract-text',
+    kinds: ['pdf']
+  },
+  {
+    id: 'pdf-images',
+    label: 'Pages to PNG',
+    desc: 'Render each page to an image',
+    group: 'PDF',
+    color: '#ef4444',
+    icon: 'image',
+    tool: 'pdf',
+    opKey: 'pages-to-images',
+    kinds: ['pdf']
+  },
+  {
+    id: 'pdf-merge',
+    label: 'Merge',
+    desc: 'Combine PDFs into one',
+    group: 'PDF',
+    color: '#ef4444',
+    icon: 'convert',
+    tool: 'pdf',
+    opKey: 'merge',
+    kinds: ['pdf']
+  },
+  {
+    id: 'pdf-split',
+    label: 'Split',
+    desc: 'Keep only the pages you list',
+    group: 'PDF',
+    color: '#ef4444',
+    icon: 'resize',
+    tool: 'pdf',
+    opKey: 'split-range',
+    kinds: ['pdf']
+  },
+  {
+    id: 'pdf-burst',
+    label: 'Burst',
+    desc: 'Save every page separately',
+    group: 'PDF',
+    color: '#ef4444',
+    icon: 'upscale',
+    tool: 'pdf',
+    opKey: 'split-pages',
+    kinds: ['pdf']
+  },
+  {
+    id: 'pdf-extract-images',
+    label: 'Extract images',
+    desc: 'Pull out embedded images',
+    group: 'PDF',
+    color: '#ef4444',
+    icon: 'removebg',
+    tool: 'pdf',
+    opKey: 'extract-images',
+    kinds: ['pdf']
+  },
+  {
+    id: 'archive-extract',
+    label: 'Extract',
+    desc: 'Unpack into a folder',
+    group: 'Archives',
+    color: '#a16207',
+    icon: 'resize',
+    tool: 'archive',
+    opKey: 'extract',
+    kinds: ['archive']
+  },
+  {
+    id: 'archive-to-pdf',
+    label: 'Archive to PDF',
+    desc: 'Comic archive becomes a PDF',
+    group: 'Archives',
+    color: '#a16207',
+    icon: 'pdf',
+    tool: 'archive',
+    opKey: 'to-pdf',
+    kinds: ['archive']
+  },
+  {
+    id: 'pdf-to-cbz',
+    label: 'PDF to CBZ',
+    desc: 'Pack pages as a comic archive',
+    group: 'Archives',
+    color: '#a16207',
+    icon: 'archive',
+    tool: 'archive',
+    opKey: 'from-pdf',
+    kinds: ['pdf']
+  }
+]
+
+export function tabById(id: TabId): Tab {
+  return TABS.find((t) => t.id === id) ?? TABS[0]
+}
+
+export function tabAccepts(id: TabId, kind: FileKind): boolean {
+  return tabById(id).kinds.includes(kind)
+}
+
+export function toolCardById(id: string): ToolCard | undefined {
+  return TOOL_CARDS.find((c) => c.id === id)
+}
+
+/** Tool cards in grid order, grouped by their section heading. */
+export function toolGroups(): { name: string; cards: ToolCard[] }[] {
+  const out: { name: string; cards: ToolCard[] }[] = []
+  for (const c of TOOL_CARDS) {
+    const g = out.find((x) => x.name === c.group)
+    if (g) g.cards.push(c)
+    else out.push({ name: c.group, cards: [c] })
+  }
+  return out
+}
diff --git a/test/tabs.test.ts b/test/tabs.test.ts
new file mode 100644
index 0000000..7a25123
--- /dev/null
+++ b/test/tabs.test.ts
@@ -0,0 +1,66 @@
+import { describe, expect, it } from 'vitest'
+import { TABS, TOOL_CARDS, tabAccepts, tabById, toolCardById, toolGroups } from '@shared/tabs'
+
+describe('tab model', () => {
+  it('lists the seven verbs in rail order', () => {
+    expect(TABS.map((t) => t.id)).toEqual([
+      'convert',
+      'compress',
+      'resize',
+      'upscale',
+      'removebg',
+      'generate',
+      'tools'
+    ])
+  })
+
+  it('accepts the kinds each verb can actually do', () => {
+    expect(tabAccepts('convert', 'image')).toBe(true)
+    expect(tabAccepts('convert', 'archive')).toBe(true)
+    // PDF is a real convert source today: familyFormats puts pdf, document and
+    // text in one family, so PDF -> DOCX/TXT/RTF works.
+    expect(tabAccepts('convert', 'pdf')).toBe(true)
+    expect(tabAccepts('compress', 'pdf')).toBe(true)
+    expect(tabAccepts('compress', 'archive')).toBe(false)
+    expect(tabAccepts('upscale', 'image')).toBe(true)
+    expect(tabAccepts('upscale', 'video')).toBe(false)
+    expect(tabAccepts('resize', 'image')).toBe(true)
+    expect(tabAccepts('removebg', 'image')).toBe(true)
+  })
+
+  it('gives Generate no input kinds at all', () => {
+    expect(tabById('generate').kinds).toEqual([])
+    expect(tabAccepts('generate', 'image')).toBe(false)
+  })
+
+  it('routes every tab to a real engine tool', () => {
+    const tools = [
+      'convert',
+      'compress',
+      'resize',
+      'upscale',
+      'removebg',
+      'generate',
+      'archive',
+      'pdf'
+    ]
+    for (const t of TABS) expect(tools, t.id).toContain(t.tool)
+  })
+
+  it('groups tool cards by what they act on', () => {
+    expect(toolGroups().map((g) => g.name)).toEqual(['PDF', 'Archives'])
+  })
+
+  it('keeps cross-group conversions in Tools, not Convert', () => {
+    expect(toolCardById('archive-to-pdf')?.tool).toBe('archive')
+    expect(toolCardById('archive-to-pdf')?.opKey).toBe('to-pdf')
+    expect(toolCardById('pdf-to-cbz')?.opKey).toBe('from-pdf')
+    expect(toolCardById('archive-extract')?.opKey).toBe('extract')
+  })
+
+  it('gives every tool card a unique id and an accepted kind', () => {
+    const ids = TOOL_CARDS.map((c) => c.id)
+    expect(new Set(ids).size).toBe(ids.length)
+    for (const c of TOOL_CARDS) expect(c.kinds.length, c.id).toBeGreaterThan(0)
+  })
+})

From 737a1ca6b6c6a460a157539b3289ada917780690 Mon Sep 17 00:00:00 2001
From: Max <112043822+Maxaubert@users.noreply.github.com>
Date: Mon, 31 Aug 2026 14:37:06 +0200
Subject: [PATCH 02/10] feat(nav): rekey queues to tabs, scope selection to one
 convert group

Range selection already enforced the group rule; toggle did not, which only
stayed invisible while a queue held one file type. convertGroup gains an
archive branch so a .cbz cannot batch with a .docx. v1 sessions migrate their
files into the tab shape rather than being discarded.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01MSq6HRwmaRKAv1t2hrdkJB
---
 src/renderer/src/state.ts    | 339 ++++++++++++++++++++---------------
 src/shared/convert.ts        |  11 +-
 src/shared/tabs.ts           |  24 ++-
 test/session-migrate.test.ts | 118 ++++++++++++
 test/tabs.test.ts            |  25 ++-
 test/verb-state.test.ts      | 139 ++++++++++++++
 6 files changed, 497 insertions(+), 159 deletions(-)
 create mode 100644 test/session-migrate.test.ts
 create mode 100644 test/verb-state.test.ts

diff --git a/src/renderer/src/state.ts b/src/renderer/src/state.ts
index ef0742e..ef67614 100644
--- a/src/renderer/src/state.ts
+++ b/src/renderer/src/state.ts
@@ -2,18 +2,24 @@ import type { FileInfo, JobEvent, JobOptions, ToolId } from '@shared/types'
 import { convertGroup } from '@shared/convert'
 import { BG_DEFAULTS } from '@shared/removebg'
 import { GEN_DEFAULTS } from '@shared/generate'
-import {
-  defaultOperation,
-  findOperation,
-  operationsFor,
-  workspaceKey,
-  type CategoryId,
-  type WorkspaceKey
-} from '@shared/catalog'
+import { TABS, engineFor, toolCardById, type TabId } from '@shared/tabs'
 
 /** The batch group a file belongs to (files that convert together). */
 export const groupOf = (f: FileInfo): string => convertGroup(f.kind, f.ext)
 
+/** A workspace's queue key: the tab, or the open Tools card's own workspace. */
+export type QueueKey = string
+export function queueKey(tab: TabId, activeTool: string | null): QueueKey {
+  return tab === 'tools' && activeTool ? `tools:${activeTool}` : tab
+}
+
+/** Options live per (workspace, convert group): one Convert tab holds an image
+ * target and a video target side by side. Keyed by GROUP, not kind, so a pdf
+ * and a docx share one option set exactly as they do today. */
+export function optionsKey(tab: TabId, activeTool: string | null, group: string): string {
+  return `${queueKey(tab, activeTool)}:${group}`
+}
+
 export type ItemStatus = 'ready' | 'queued' | 'running' | 'done' | 'failed' | 'canceled'
 
 export interface QueueItem {
@@ -67,26 +73,20 @@ export interface QueueState {
 }
 
 export interface AppState {
-  /** The file type selected in the left rail. */
-  category: CategoryId
-  /** The operation this workspace performs. Always set: a category opens
-   * directly on its default operation, with no intermediate chooser. */
-  operation: string
-  /** One queue per FILE TYPE, shared across that type's operations. Files added
-   * while converting images are still there after switching to compress: the
-   * queue belongs to the category, not the operation. */
-  queues: Partial<Record<CategoryId, QueueState>>
-  /** Options are per (category, operation): converting and compressing images
-   * are configured separately even though they share the same files. */
-  options: Record<WorkspaceKey, JobOptions>
-  /** The last operation chosen in each category, so switching away and back
-   * returns to the mode you were using instead of the category default. */
-  lastOperation: Partial<Record<CategoryId, string>>
-}
-
-/** The queue key (the file type) and the options key (file type + operation). */
-export function optionsKey(state: AppState): WorkspaceKey {
-  return workspaceKey(state.category, state.operation)
+  /** The verb selected in the left rail. */
+  tab: TabId
+  /** Which Tools card is open, or null for the Tools grid. Only meaningful
+   * while `tab` is 'tools'. */
+  activeTool: string | null
+  /** One queue per WORKSPACE: a tab, or `tools:<cardId>`. Files belong to the
+   * verb you are performing, and a tab's queue may hold several convert groups
+   * at once (images and video in the same Convert queue). */
+  queues: Partial<Record<QueueKey, QueueState>>
+  /** Options are per (workspace, convert group): converting images and
+   * converting video are configured separately inside one Convert tab. */
+  options: Record<string, JobOptions>
+  /** The last Tools card opened, so returning to Tools lands where you were. */
+  lastTool: string | null
 }
 
 export const DEFAULT_OPTIONS: Record<ToolId, JobOptions> = {
@@ -123,29 +123,29 @@ export const DEFAULT_OPTIONS: Record<ToolId, JobOptions> = {
 
 export const emptyQueue = (): QueueState => ({ items: [], selected: [], anchor: null })
 
-/** A fresh workspace's options: its tool's defaults, plus the operation's verb
- * when its tool carries several (the pdf and archive tools both do). */
-export function defaultOptionsFor(category: CategoryId, opId: string): JobOptions {
-  const op = findOperation(category, opId)
-  if (!op) return {}
-  const base = DEFAULT_OPTIONS[op.tool] ?? {}
-  return op.opKey ? { ...base, op: op.opKey } : { ...base }
+/** A fresh workspace's options for one convert group: the engine tool's
+ * defaults, plus the verb when that tool carries several (pdf and archive both
+ * do). The engine is resolved per group because the Convert tab runs the
+ * archive tool for a .cbz and the convert tool for everything else. */
+export function defaultOptionsFor(
+  tab: TabId,
+  activeTool: string | null,
+  group: string
+): JobOptions {
+  const card = activeTool ? toolCardById(activeTool) : null
+  const { tool, op } = engineFor(tab, group, card)
+  const base = DEFAULT_OPTIONS[tool] ?? {}
+  return op ? { ...base, op } : { ...base }
 }
 
-const FIRST_CATEGORY: CategoryId = 'images'
-const FIRST_OPERATION = defaultOperation(FIRST_CATEGORY)
+const FIRST_TAB: TabId = 'convert'
 
 export const initialState: AppState = {
-  category: FIRST_CATEGORY,
-  operation: FIRST_OPERATION,
-  queues: { [FIRST_CATEGORY]: emptyQueue() },
-  options: {
-    [workspaceKey(FIRST_CATEGORY, FIRST_OPERATION)]: defaultOptionsFor(
-      FIRST_CATEGORY,
-      FIRST_OPERATION
-    )
-  },
-  lastOperation: {}
+  tab: FIRST_TAB,
+  activeTool: null,
+  queues: { [FIRST_TAB]: emptyQueue() },
+  options: {},
+  lastTool: null
 }
 
 let counter = 0
@@ -155,11 +155,11 @@ export function newId(): string {
 }
 
 export type Action =
-  | { type: 'setCategory'; category: CategoryId }
-  | { type: 'setOperation'; operation: string }
-  | { type: 'setOption'; key: string; value: string | number | boolean }
-  | { type: 'addItems'; files: FileInfo[]; category: CategoryId }
-  | { type: 'addSources'; items: QueueItem[]; category: CategoryId }
+  | { type: 'setTab'; tab: TabId }
+  | { type: 'setActiveTool'; tool: string | null }
+  | { type: 'setOption'; group: string; key: string; value: string | number | boolean }
+  | { type: 'addItems'; files: FileInfo[]; key: QueueKey }
+  | { type: 'addSources'; items: QueueItem[]; key: QueueKey }
   | { type: 'setThumb'; id: string; thumb: string | null }
   | { type: 'dismiss'; id: string; column: 'input' | 'output' }
   | { type: 'markQueued'; ids: string[]; options?: JobOptions }
@@ -170,8 +170,9 @@ export type Action =
 
 // --- Session persistence ---------------------------------------------------
 
-/** Bump when AppState's persisted shape changes so old sessions are discarded. */
-const SESSION_VERSION = 1
+/** Bump when AppState's persisted shape changes. v1 (category-keyed) is not
+ * discarded but MIGRATED: a user mid-batch must not lose their files. */
+const SESSION_VERSION = 2
 
 /** Normalize a queue item for persistence/restore: drop the (reloadable) thumb
  * and settle any in-flight status, since a run doesn't survive a restart. */
@@ -208,10 +209,10 @@ export function sessionSnapshot(state: AppState, genResults: string[]): unknown
   }
   return {
     version: SESSION_VERSION,
-    // The category and its operation are deliberately NOT persisted as such:
-    // the app always launches into the first category, and each category's
-    // sub-page rides in lastOperation (kept current by setOperation).
-    lastOperation: { ...state.lastOperation, [state.category]: state.operation },
+    // The tab is deliberately NOT persisted: the app always launches into the
+    // first verb. What IS remembered is the last Tools card, so returning to
+    // Tools lands where you were.
+    lastTool: state.lastTool,
     options: state.options,
     queues,
     genResults: genResults.slice(0, MAX_GEN)
@@ -233,67 +234,110 @@ function isValidItem(i: unknown): i is QueueItem {
 }
 
 interface PersistedSession {
-  lastOperation: Partial<Record<CategoryId, string>>
-  options: Record<WorkspaceKey, JobOptions>
+  lastTool: string | null
+  options: Record<string, JobOptions>
   queues: AppState['queues']
   genResults: string[]
 }
 
+/** Old category ids and the verb each one's operations mapped to. Used only by
+ * the v1 migration. */
+const V1_OP_TO_TAB: Record<string, TabId> = {
+  convert: 'convert',
+  compress: 'compress',
+  resize: 'resize',
+  upscale: 'upscale',
+  removebg: 'removebg',
+  generate: 'generate',
+  // Every PDF and archive verb became a Tools card.
+  'extract-text': 'tools',
+  'pages-to-images': 'tools',
+  merge: 'tools',
+  'split-range': 'tools',
+  'split-pages': 'tools',
+  'extract-images': 'tools',
+  'to-cbz': 'tools',
+  extract: 'tools',
+  'to-pdf': 'tools'
+}
+
+/**
+ * Move a v1 (category-keyed) session into the tab-keyed shape. Files are the
+ * valuable part of a session and must survive the upgrade; options are dropped
+ * because they were keyed by an axis that no longer exists, and re-deriving
+ * them per group would guess wrong more often than it would help.
+ */
+export function migrateV1Queues(raw: Record<string, unknown>): AppState['queues'] {
+  const lastOperation = (raw.lastOperation ?? {}) as Record<string, string>
+  const oldQueues = (raw.queues ?? {}) as Record<string, { items?: unknown[] }>
+  const out: AppState['queues'] = {}
+  for (const [cat, q] of Object.entries(oldQueues)) {
+    if (!q) continue
+    const verb = lastOperation[cat]
+    // A Tools verb has no single home queue, so its files land in Convert
+    // rather than being dropped on the floor.
+    const mapped = verb ? V1_OP_TO_TAB[verb] : undefined
+    const tab: TabId = mapped && mapped !== 'tools' ? mapped : 'convert'
+    const items = (q.items ?? []).filter(isValidItem).map(normalizeItem)
+    const cur = out[tab] ?? emptyQueue()
+    const have = new Set(cur.items.map((i) => (i.isResult ? (i.outputPath ?? i.id) : i.file.path)))
+    const extra = items.filter((i) => !have.has(i.isResult ? (i.outputPath ?? i.id) : i.file.path))
+    out[tab] = { ...cur, items: [...cur.items, ...extra] }
+  }
+  return out
+}
+
 /** Parse a persisted blob into an AppState + genResults, or null if unusable.
  * Trusts nothing: falls back to defaults on any missing/mismatched field. */
 export function parseSession(raw: unknown): { state: AppState; genResults: string[] } | null {
   if (!raw || typeof raw !== 'object') return null
   const r = raw as Record<string, unknown>
-  if (r.version !== SESSION_VERSION) return null
-  const p = r as unknown as PersistedSession
   try {
-    const validCat = (c: string): boolean => {
-      try {
-        return operationsFor(c as CategoryId).length > 0
-      } catch {
-        return false
+    const genResults = Array.isArray(r.genResults)
+      ? (r.genResults as unknown[]).filter((x): x is string => typeof x === 'string')
+      : []
+
+    // v1 was keyed by file-type category. Migrate rather than discard: the
+    // files are a user's in-flight work, and losing them to an upgrade is a
+    // worse failure than resetting their format settings.
+    if (r.version !== SESSION_VERSION) {
+      return {
+        state: { ...initialState, queues: migrateV1Queues(r), options: {} },
+        genResults
       }
     }
-    // Always launch into the FIRST category (owner decision: coming back to
-    // the remembered one felt wrong). What IS remembered is each category's
-    // last sub-page: Images still opens on Generate if that is where it was,
-    // and switching to Video lands on its own remembered operation.
-    const category = FIRST_CATEGORY
-    const remembered = (p.lastOperation ?? {})[category]
-    const operation =
-      remembered && findOperation(category, remembered) ? remembered : defaultOperation(category)
-    // Drop queues for categories no longer in the catalog (a removed/renamed tool).
+
+    const p = r as unknown as PersistedSession
+    const validKey = (k: string): boolean => {
+      if (k.startsWith('tools:')) return !!toolCardById(k.slice(6))
+      return TABS.some((t) => t.id === k)
+    }
+    // Always launch into the FIRST verb: coming back to the remembered one
+    // felt wrong (owner decision, carried over from the category rail).
     const queues: AppState['queues'] = {}
-    for (const [cat, q] of Object.entries(p.queues ?? {})) {
-      if (!q || !validCat(cat)) continue
-      queues[cat as CategoryId] = {
+    for (const [k, q] of Object.entries(p.queues ?? {})) {
+      if (!q || !validKey(k)) continue
+      queues[k] = {
         items: (q.items ?? []).filter(isValidItem).map(normalizeItem),
         selected: [],
         anchor: null
       }
     }
-    // Keep only options whose (category:operation) key still resolves to a real op.
-    const options: Record<WorkspaceKey, JobOptions> = {}
+    // Keep only options whose workspace still exists.
+    const options: Record<string, JobOptions> = {}
     for (const [k, v] of Object.entries(p.options ?? {})) {
-      const idx = k.indexOf(':')
-      const c = idx >= 0 ? k.slice(0, idx) : ''
-      const o = idx >= 0 ? k.slice(idx + 1) : ''
-      if (validCat(c) && findOperation(c as CategoryId, o))
-        options[k as WorkspaceKey] = v as JobOptions
+      const cut = k.lastIndexOf(':')
+      if (cut < 0) continue
+      if (validKey(k.slice(0, cut))) options[k] = v as JobOptions
     }
-    const key = workspaceKey(category, operation)
-    if (!options[key]) options[key] = defaultOptionsFor(category, operation)
-    // Keep only valid lastOperation entries.
-    const lastOperation: Partial<Record<CategoryId, string>> = {}
-    for (const [c, o] of Object.entries(p.lastOperation ?? {}))
-      if (validCat(c) && o && findOperation(c as CategoryId, o)) lastOperation[c as CategoryId] = o
-    const state: AppState = { category, operation, lastOperation, queues, options }
-    return {
-      state,
-      genResults: Array.isArray(p.genResults)
-        ? p.genResults.filter((x) => typeof x === 'string')
-        : []
+    const lastTool = typeof p.lastTool === 'string' && toolCardById(p.lastTool) ? p.lastTool : null
+    const state: AppState = {
+      ...initialState,
+      lastTool,
+      queues: { ...queues, [FIRST_TAB]: queues[FIRST_TAB] ?? emptyQueue() },
+      options
     }
+    return { state, genResults }
   } catch {
     return null
   }
@@ -321,14 +365,14 @@ export function pruneMissing(
   exists: Set<string>
 ): { state: AppState; genResults: string[] } {
   const queues: AppState['queues'] = {}
-  for (const [cat, q] of Object.entries(state.queues)) {
+  for (const [k, q] of Object.entries(state.queues)) {
     if (!q) continue
     const items = q.items.filter((it) =>
       it.isResult
         ? !!it.outputPath && exists.has(it.outputPath)
         : !!it.file?.path && exists.has(it.file.path)
     )
-    queues[cat as CategoryId] = { items, selected: [], anchor: null }
+    queues[k] = { items, selected: [], anchor: null }
   }
   return {
     state: { ...state, queues },
@@ -336,16 +380,15 @@ export function pruneMissing(
   }
 }
 
-/** Replace the current workspace's queue via `fn`. A no-op on the operation
- * grid, where no workspace is open. */
+/** Replace the current workspace's queue via `fn`. */
 function mapQueue(state: AppState, fn: (q: QueueState) => QueueState): AppState {
-  return mapQueueIn(state, state.category, fn)
+  return mapQueueIn(state, queueKey(state.tab, state.activeTool), fn)
 }
 
-/** Replace a SPECIFIC category's queue - for actions dispatched after an
+/** Replace a SPECIFIC workspace's queue - for actions dispatched after an
  * await, which must land where they were initiated, not where the user is. */
-function mapQueueIn(state: AppState, cat: CategoryId, fn: (q: QueueState) => QueueState): AppState {
-  return { ...state, queues: { ...state.queues, [cat]: fn(state.queues[cat] ?? emptyQueue()) } }
+function mapQueueIn(state: AppState, key: QueueKey, fn: (q: QueueState) => QueueState): AppState {
+  return { ...state, queues: { ...state.queues, [key]: fn(state.queues[key] ?? emptyQueue()) } }
 }
 
 /**
@@ -355,7 +398,7 @@ function mapQueueIn(state: AppState, cat: CategoryId, fn: (q: QueueState) => Que
  */
 function mapItemById(state: AppState, id: string, fn: (i: QueueItem) => QueueItem): AppState {
   const queues = { ...state.queues }
-  for (const [k, q] of Object.entries(queues) as [CategoryId, QueueState][]) {
+  for (const [k, q] of Object.entries(queues) as [QueueKey, QueueState][]) {
     if (q.items.some((i) => i.id === id)) {
       queues[k] = { ...q, items: q.items.map((i) => (i.id === id ? fn(i) : i)) }
     }
@@ -366,6 +409,15 @@ function mapItemById(state: AppState, id: string, fn: (i: QueueItem) => QueueIte
 function selectInQueue(q: QueueState, id: string, mode: SelectMode): QueueState {
   const order = q.items.map((i) => i.id)
   if (mode === 'toggle') {
+    const clicked = q.items.find((i) => i.id === id)
+    const first = q.selected.length ? q.items.find((i) => i.id === q.selected[0]) : null
+    // One convert group at a time. The options panel describes exactly one
+    // target set, so ctrl+clicking another group MOVES the selection instead of
+    // extending it into something Run could not honour. Range already did this;
+    // toggle did not, which only stayed invisible while a queue held one
+    // file type.
+    if (clicked && first && groupOf(clicked.file) !== groupOf(first.file))
+      return { ...q, selected: [id], anchor: id }
     const has = q.selected.includes(id)
     return {
       ...q,
@@ -398,68 +450,56 @@ export function reducer(state: AppState, action: Action): AppState {
       // Merge, never replace: the window is interactive while the session
       // restore round-trips, so files dropped in that gap must survive it.
       const merged = { ...action.state, queues: { ...action.state.queues } }
-      for (const [cat, q] of Object.entries(state.queues) as [CategoryId, QueueState][]) {
+      for (const [k, q] of Object.entries(state.queues) as [QueueKey, QueueState][]) {
         if (!q?.items.length) continue
-        const restored = merged.queues[cat]
+        const restored = merged.queues[k]
         if (!restored) {
-          merged.queues[cat] = q
+          merged.queues[k] = q
           continue
         }
         const key = (i: QueueItem): string => (i.isResult ? (i.outputPath ?? i.id) : i.file.path)
         const have = new Set(restored.items.map(key))
         const extra = q.items.filter((i) => !have.has(key(i)))
-        if (extra.length) merged.queues[cat] = { ...restored, items: [...restored.items, ...extra] }
+        if (extra.length) merged.queues[k] = { ...restored, items: [...restored.items, ...extra] }
       }
       return merged
     }
-    case 'setCategory': {
-      // Return to the mode last used in this category (if still valid), so
-      // Images→Video→Images lands back on your chosen operation, not the default.
-      const remembered = state.lastOperation[action.category]
-      const opId =
-        remembered && findOperation(action.category, remembered)
-          ? remembered
-          : defaultOperation(action.category)
-      const key = workspaceKey(action.category, opId)
+    case 'setTab': {
+      // Returning to Tools lands on the card you last had open; every other
+      // verb is a single workspace, so there is nothing to remember.
+      const activeTool = action.tab === 'tools' ? state.lastTool : null
+      const key = queueKey(action.tab, activeTool)
       return {
         ...state,
-        category: action.category,
-        operation: opId,
-        queues: {
-          ...state.queues,
-          [action.category]: state.queues[action.category] ?? emptyQueue()
-        },
-        options: {
-          ...state.options,
-          [key]: state.options[key] ?? defaultOptionsFor(action.category, opId)
-        }
+        tab: action.tab,
+        activeTool,
+        queues: { ...state.queues, [key]: state.queues[key] ?? emptyQueue() }
       }
     }
-    case 'setOperation': {
-      const key = workspaceKey(state.category, action.operation)
+    case 'setActiveTool': {
+      const key = queueKey('tools', action.tool)
       return {
         ...state,
-        operation: action.operation,
-        lastOperation: { ...state.lastOperation, [state.category]: action.operation },
-        options: {
-          ...state.options,
-          [key]: state.options[key] ?? defaultOptionsFor(state.category, action.operation)
-        }
+        activeTool: action.tool,
+        lastTool: action.tool ?? state.lastTool,
+        queues: { ...state.queues, [key]: state.queues[key] ?? emptyQueue() }
       }
     }
     case 'setOption': {
-      const key = optionsKey(state)
+      const key = optionsKey(state.tab, state.activeTool, action.group)
+      const base =
+        state.options[key] ?? defaultOptionsFor(state.tab, state.activeTool, action.group)
       return {
         ...state,
-        options: { ...state.options, [key]: { ...state.options[key], [action.key]: action.value } }
+        options: { ...state.options, [key]: { ...base, [action.key]: action.value } }
       }
     }
     case 'addItems': {
-      // The category rides ON the action: these are dispatched after an await
-      // (files:classify), and the user can switch category during the round
-      // trip - reducing against state.category filed images into whatever
+      // The workspace key rides ON the action: these are dispatched after an
+      // await (files:classify), and the user can switch tabs during the round
+      // trip - reducing against the current tab filed images into whatever
       // queue was open when the reply landed.
-      const cat = action.category
+      const cat = action.key
       const q = state.queues[cat] ?? emptyQueue()
       // Ignore input-dismissed items so re-dropping a removed file re-adds it.
       const seen = new Set(q.items.filter(inInput).map((i) => i.file.path))
@@ -471,12 +511,13 @@ export function reducer(state: AppState, action: Action): AppState {
       // convert group (the first added file's) so a batch is never cross-category.
       const firstGroup = groupOf(add[0].file)
       const ids = add.filter((i) => groupOf(i.file) === firstGroup).map((i) => i.id)
+      const here = cat === queueKey(state.tab, state.activeTool)
       return mapQueueIn(state, cat, (cur) => ({
         items: [...cur.items, ...add],
         // Only steer the selection when the user is still LOOKING at this
-        // category; a background add must not clobber another queue's state.
-        selected: cat === state.category ? ids : cur.selected,
-        anchor: cat === state.category ? ids[ids.length - 1] : cur.anchor
+        // workspace; a background add must not clobber another queue's state.
+        selected: here ? ids : cur.selected,
+        anchor: here ? ids[ids.length - 1] : cur.anchor
       }))
     }
     case 'addSources': {
@@ -484,7 +525,7 @@ export function reducer(state: AppState, action: Action): AppState {
       // origin is visible) and select them. The caller (run) already reuses an
       // existing input for a path that's already present, so no dedup here.
       if (!action.items.length) return state
-      return mapQueueIn(state, action.category, (cur) => ({
+      return mapQueueIn(state, action.key, (cur) => ({
         items: [...cur.items, ...action.items],
         selected: action.items.map((i) => i.id),
         anchor: action.items[action.items.length - 1].id
@@ -537,7 +578,7 @@ export function reducer(state: AppState, action: Action): AppState {
       // checkmark persists until the next run replaces it with a progress bar.
       if (e.status === 'done' && e.outputPath) {
         const queues = { ...state.queues }
-        for (const [k, q] of Object.entries(queues) as [CategoryId, QueueState][]) {
+        for (const [k, q] of Object.entries(queues) as [QueueKey, QueueState][]) {
           const src = q.items.find((i) => i.id === e.id && !i.isResult)
           if (!src) continue
           const result: QueueItem = {
diff --git a/src/shared/convert.ts b/src/shared/convert.ts
index bd27119..d136f1b 100644
--- a/src/shared/convert.ts
+++ b/src/shared/convert.ts
@@ -116,11 +116,18 @@ export function defaultTargetExt(kind: FileKind, srcExt: string): string | null
 /**
  * The batch-conversion group a file belongs to: files in the same group share a
  * target-format set and can be multi-selected + converted together. Word docs,
- * plain text, and PDF all share one 'doc' group; spreadsheets and slides get
- * their own (their targets differ).
+ * plain text, and PDF all share one 'doc' group; spreadsheets, slides and
+ * archives get their own (their targets differ).
+ *
+ * This is also the app's NAVIGATION grouping axis: the queue groups by it and
+ * a selection may never span two groups, because one options panel can only
+ * describe one target set.
  */
 export function convertGroup(kind: FileKind, ext: string): string {
   if (kind === 'image' || kind === 'video' || kind === 'audio') return kind
+  // Archives share no target set with documents. Without this branch the
+  // fall-through below returns 'doc' and a .cbz batches with a .docx.
+  if (kind === 'archive') return 'archive'
   const e = normalizeExt(ext)
   if (SHEET_EXTS.includes(e)) return 'sheet'
   if (SLIDE_EXTS.includes(e)) return 'slide'
diff --git a/src/shared/tabs.ts b/src/shared/tabs.ts
index d1af78f..86d4154 100644
--- a/src/shared/tabs.ts
+++ b/src/shared/tabs.ts
@@ -6,13 +6,7 @@ import type { FileKind, ToolId } from './types'
 // same verb (Convert) had to exist five times over, once per file type.
 
 export type TabId =
-  | 'convert'
-  | 'compress'
-  | 'resize'
-  | 'upscale'
-  | 'removebg'
-  | 'generate'
-  | 'tools'
+  'convert' | 'compress' | 'resize' | 'upscale' | 'removebg' | 'generate' | 'tools'
 
 export interface Tab {
   id: TabId
@@ -215,6 +209,22 @@ export const TOOL_CARDS: ToolCard[] = [
   }
 ]
 
+/**
+ * The engine tool (and verb) that actually performs a tab's work for one convert
+ * group. The mapping is not 1:1: the Convert tab runs the `convert` tool for
+ * images, video, audio and documents, but an archive repack is the `archive`
+ * tool with op `repack`. A tool card names its own tool and op outright.
+ */
+export function engineFor(
+  tab: TabId,
+  group: string,
+  card?: ToolCard | null
+): { tool: ToolId; op?: string } {
+  if (card) return { tool: card.tool, op: card.opKey }
+  if (tab === 'convert' && group === 'archive') return { tool: 'archive', op: 'repack' }
+  return { tool: tabById(tab).tool }
+}
+
 export function tabById(id: TabId): Tab {
   return TABS.find((t) => t.id === id) ?? TABS[0]
 }
diff --git a/test/session-migrate.test.ts b/test/session-migrate.test.ts
new file mode 100644
index 0000000..21f9091
--- /dev/null
+++ b/test/session-migrate.test.ts
@@ -0,0 +1,118 @@
+import { describe, expect, it } from 'vitest'
+import { parseSession } from '../src/renderer/src/state'
+
+const item = (p: string, kind = 'image'): unknown => ({
+  id: p,
+  file: { path: p, name: p, ext: '.png', kind, size: 1 },
+  thumb: null,
+  status: 'ready',
+  percent: 0
+})
+
+// A v1 blob was keyed by file-type category. Files are a user's in-flight work,
+// so an upgrade migrates them rather than discarding the session.
+describe('v1 session migration', () => {
+  it('moves each category queue to the tab its last operation names', () => {
+    const r = parseSession({
+      version: 1,
+      lastOperation: { images: 'upscale', video: 'compress' },
+      queues: {
+        images: { items: [item('a.png')] },
+        video: { items: [item('v.mp4', 'video')] }
+      },
+      options: { 'images:convert': { format: '.webp' } }
+    })!
+    expect(r.state.queues.upscale!.items.map((i) => i.file.path)).toEqual(['a.png'])
+    expect(r.state.queues.compress!.items.map((i) => i.file.path)).toEqual(['v.mp4'])
+  })
+
+  it('merges two categories that land on the same tab, without duplicates', () => {
+    const r = parseSession({
+      version: 1,
+      lastOperation: { images: 'convert', video: 'convert' },
+      queues: {
+        images: { items: [item('a.png')] },
+        video: { items: [item('a.png'), item('v.mp4', 'video')] }
+      }
+    })!
+    expect(r.state.queues.convert!.items.map((i) => i.file.path).sort()).toEqual(['a.png', 'v.mp4'])
+  })
+
+  it('lands a Tools verb in Convert rather than dropping its files', () => {
+    const r = parseSession({
+      version: 1,
+      lastOperation: { pdf: 'merge' },
+      queues: { pdf: { items: [item('doc.pdf', 'pdf')] } }
+    })!
+    expect(r.state.queues.convert!.items).toHaveLength(1)
+  })
+
+  it('falls back to Convert for a category with no remembered operation', () => {
+    const r = parseSession({
+      version: 1,
+      queues: { documents: { items: [item('d.docx', 'document')] } }
+    })!
+    expect(r.state.queues.convert!.items).toHaveLength(1)
+  })
+
+  it('drops v1 options rather than guessing a group for them', () => {
+    const r = parseSession({
+      version: 1,
+      queues: {},
+      options: { 'images:convert': { format: '.webp' } }
+    })!
+    expect(Object.keys(r.state.options)).toHaveLength(0)
+  })
+
+  it('keeps generated results across the migration', () => {
+    const r = parseSession({
+      version: 1,
+      queues: {},
+      genResults: ['C:\\gen1.png', 'C:\\gen2.png']
+    })!
+    expect(r.genResults).toEqual(['C:\\gen1.png', 'C:\\gen2.png'])
+  })
+
+  it('drops a malformed item instead of rendering it', () => {
+    const r = parseSession({
+      version: 1,
+      queues: { images: { items: [item('a.png'), { id: 'broken' }] } }
+    })!
+    expect(r.state.queues.convert!.items).toHaveLength(1)
+  })
+})
+
+describe('v2 session', () => {
+  it('restores tab-keyed queues and options', () => {
+    const r = parseSession({
+      version: 2,
+      lastTool: 'pdf-merge',
+      queues: { compress: { items: [item('a.png')] } },
+      options: { 'compress:image': { quality: 70 } },
+      genResults: []
+    })!
+    expect(r.state.queues.compress!.items).toHaveLength(1)
+    expect(r.state.options['compress:image']).toEqual({ quality: 70 })
+    expect(r.state.lastTool).toBe('pdf-merge')
+  })
+
+  it('always launches into the first verb, not the remembered one', () => {
+    const r = parseSession({ version: 2, queues: { upscale: { items: [] } }, options: {} })!
+    expect(r.state.tab).toBe('convert')
+  })
+
+  it('drops a queue whose workspace no longer exists', () => {
+    const r = parseSession({
+      version: 2,
+      queues: { 'tools:gone-forever': { items: [item('a.png')] }, convert: { items: [] } },
+      options: { 'tools:gone-forever:image': { x: 1 } }
+    })!
+    expect(r.state.queues['tools:gone-forever']).toBeUndefined()
+    expect(Object.keys(r.state.options)).toHaveLength(0)
+  })
+
+  it('returns null for junk', () => {
+    expect(parseSession(null)).toBeNull()
+    expect(parseSession('nope')).toBeNull()
+  })
+})
diff --git a/test/tabs.test.ts b/test/tabs.test.ts
index 7a25123..df3c3d8 100644
--- a/test/tabs.test.ts
+++ b/test/tabs.test.ts
@@ -1,5 +1,13 @@
 import { describe, expect, it } from 'vitest'
-import { TABS, TOOL_CARDS, tabAccepts, tabById, toolCardById, toolGroups } from '@shared/tabs'
+import {
+  TABS,
+  TOOL_CARDS,
+  engineFor,
+  tabAccepts,
+  tabById,
+  toolCardById,
+  toolGroups
+} from '@shared/tabs'
 
 describe('tab model', () => {
   it('lists the seven verbs in rail order', () => {
@@ -58,6 +66,21 @@ describe('tab model', () => {
     expect(toolCardById('archive-extract')?.opKey).toBe('extract')
   })
 
+  it('routes an archive Convert to the archive engine, not the convert one', () => {
+    // The tab-to-tool mapping is not 1:1: repacking a .cbz is the archive tool
+    // with op 'repack', even though the tab is Convert.
+    expect(engineFor('convert', 'archive')).toEqual({ tool: 'archive', op: 'repack' })
+    expect(engineFor('convert', 'image')).toEqual({ tool: 'convert' })
+    expect(engineFor('compress', 'doc')).toEqual({ tool: 'compress' })
+  })
+
+  it('lets a tool card name its own tool and verb', () => {
+    expect(engineFor('tools', 'pdf', toolCardById('pdf-merge'))).toEqual({
+      tool: 'pdf',
+      op: 'merge'
+    })
+  })
+
   it('gives every tool card a unique id and an accepted kind', () => {
     const ids = TOOL_CARDS.map((c) => c.id)
     expect(new Set(ids).size).toBe(ids.length)
diff --git a/test/verb-state.test.ts b/test/verb-state.test.ts
new file mode 100644
index 0000000..0b61431
--- /dev/null
+++ b/test/verb-state.test.ts
@@ -0,0 +1,139 @@
+import { describe, expect, it } from 'vitest'
+import { convertGroup } from '@shared/convert'
+import {
+  emptyQueue,
+  initialState,
+  optionsKey,
+  queueKey,
+  reducer,
+  type AppState
+} from '../src/renderer/src/state'
+import type { FileInfo } from '@shared/types'
+
+const file = (name: string, kind: FileInfo['kind'], ext: string): FileInfo => ({
+  path: `C:\\${name}`,
+  name,
+  ext,
+  kind,
+  size: 1
+})
+
+function seeded(): AppState {
+  const s: AppState = {
+    ...initialState,
+    tab: 'convert',
+    activeTool: null,
+    queues: {
+      convert: {
+        ...emptyQueue(),
+        items: [
+          {
+            id: 'a',
+            file: file('a.png', 'image', '.png'),
+            thumb: null,
+            status: 'ready',
+            percent: 0
+          },
+          {
+            id: 'b',
+            file: file('b.png', 'image', '.png'),
+            thumb: null,
+            status: 'ready',
+            percent: 0
+          },
+          {
+            id: 'v',
+            file: file('v.mp4', 'video', '.mp4'),
+            thumb: null,
+            status: 'ready',
+            percent: 0
+          }
+        ]
+      }
+    }
+  }
+  return s
+}
+
+describe('keys', () => {
+  it('keys a plain tab queue by the tab id', () => {
+    expect(queueKey('convert', null)).toBe('convert')
+  })
+
+  it('keys a tool workspace by its tool card', () => {
+    expect(queueKey('tools', 'pdf-merge')).toBe('tools:pdf-merge')
+  })
+
+  it('keys options by queue and convert group', () => {
+    expect(optionsKey('convert', null, 'image')).toBe('convert:image')
+    expect(optionsKey('convert', null, 'video')).toBe('convert:video')
+    // A pdf and a docx share the 'doc' group, so they share one option set.
+    expect(optionsKey('convert', null, 'doc')).toBe('convert:doc')
+    expect(optionsKey('tools', 'pdf-merge', 'doc')).toBe('tools:pdf-merge:doc')
+  })
+})
+
+describe('convertGroup', () => {
+  it('keeps pdf, document and text in one batch, as today', () => {
+    expect(convertGroup('pdf', '.pdf')).toBe('doc')
+    expect(convertGroup('document', '.docx')).toBe('doc')
+    expect(convertGroup('text', '.txt')).toBe('doc')
+  })
+
+  it('gives archives their own group instead of falling through to doc', () => {
+    expect(convertGroup('archive', '.cbz')).toBe('archive')
+    expect(convertGroup('archive', '.rar')).toBe('archive')
+  })
+})
+
+describe('one-group selection', () => {
+  it('extends the selection within a group', () => {
+    let s = seeded()
+    s = reducer(s, { type: 'select', id: 'a', mode: 'single' })
+    s = reducer(s, { type: 'select', id: 'b', mode: 'toggle' })
+    expect([...s.queues.convert!.selected].sort()).toEqual(['a', 'b'])
+  })
+
+  it('replaces the selection when a different group is toggled in', () => {
+    let s = seeded()
+    s = reducer(s, { type: 'select', id: 'a', mode: 'single' })
+    s = reducer(s, { type: 'select', id: 'b', mode: 'toggle' })
+    s = reducer(s, { type: 'select', id: 'v', mode: 'toggle' })
+    // Ctrl+clicking a video does not append it to an image selection: it
+    // becomes the selection, because one options panel cannot describe both.
+    expect(s.queues.convert!.selected).toEqual(['v'])
+  })
+
+  it('still lets a toggle deselect within the same group', () => {
+    let s = seeded()
+    s = reducer(s, { type: 'select', id: 'a', mode: 'single' })
+    s = reducer(s, { type: 'select', id: 'b', mode: 'toggle' })
+    s = reducer(s, { type: 'select', id: 'b', mode: 'toggle' })
+    expect(s.queues.convert!.selected).toEqual(['a'])
+  })
+
+  it('never lets a range selection span groups', () => {
+    let s = seeded()
+    s = reducer(s, { type: 'select', id: 'a', mode: 'single' })
+    // Shift-clicking the video extends through the range but keeps only the
+    // anchor's group, so the two images come along and the video does not.
+    s = reducer(s, { type: 'select', id: 'v', mode: 'range' })
+    expect(s.queues.convert!.selected).toEqual(['a', 'b'])
+  })
+})
+
+describe('tab switching', () => {
+  it('creates the tab queue and its options on first visit', () => {
+    const s = reducer(initialState, { type: 'setTab', tab: 'compress' })
+    expect(s.tab).toBe('compress')
+    expect(s.queues.compress).toBeDefined()
+  })
+
+  it('clears the open tool when leaving Tools', () => {
+    let s = reducer(initialState, { type: 'setTab', tab: 'tools' })
+    s = reducer(s, { type: 'setActiveTool', tool: 'pdf-merge' })
+    expect(s.activeTool).toBe('pdf-merge')
+    s = reducer(s, { type: 'setTab', tab: 'convert' })
+    expect(s.activeTool).toBeNull()
+  })
+})

From 6dbd1ad0f58e17bd157e4f050e00fc561cbeb762 Mon Sep 17 00:00:00 2001
From: Max <112043822+Maxaubert@users.noreply.github.com>
Date: Mon, 31 Aug 2026 14:48:42 +0200
Subject: [PATCH 03/10] feat(nav): drive the whole workspace from the verb rail

Rail becomes the verb; the queue belongs to what you are doing and can hold
several convert groups at once, with a header per group and the options panel
scoped to the selected one. Drops the OperationSwitcher (the rail names the
operation now) for a scope chip that says what Run will act on. Adds the Tools
grid and its per-card workspaces. shared/catalog.ts is gone.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01MSq6HRwmaRKAv1t2hrdkJB
---
 e2e/workflows.spec.ts                         |  54 ++--
 src/renderer/src/App.tsx                      | 183 ++++++++------
 src/renderer/src/components/Icon.tsx          |   2 +
 .../src/components/OperationSwitcher.tsx      |  90 -------
 .../src/components/OperationTitle.tsx         |  46 +++-
 src/renderer/src/components/OptionsPanel.tsx  | 103 ++++++--
 src/renderer/src/components/Queue.tsx         |  52 ++--
 .../{CategoryRail.tsx => TabRail.tsx}         |  49 ++--
 src/renderer/src/components/ToolsGrid.tsx     |  41 ++++
 src/renderer/src/components/queueGroups.ts    |  65 +++++
 src/shared/catalog.ts                         | 231 ------------------
 test/archive-catalog-nav.test.ts              |  34 ---
 test/catalog-tools.test.ts                    |  23 --
 test/queue-groups.test.ts                     |  51 ++++
 test/queues.test.ts                           | 152 ++++++------
 test/session-persist.test.ts                  |  52 ++--
 test/tabs-registry.test.ts                    |  35 +++
 17 files changed, 610 insertions(+), 653 deletions(-)
 delete mode 100644 src/renderer/src/components/OperationSwitcher.tsx
 rename src/renderer/src/components/{CategoryRail.tsx => TabRail.tsx} (88%)
 create mode 100644 src/renderer/src/components/ToolsGrid.tsx
 create mode 100644 src/renderer/src/components/queueGroups.ts
 delete mode 100644 src/shared/catalog.ts
 delete mode 100644 test/archive-catalog-nav.test.ts
 delete mode 100644 test/catalog-tools.test.ts
 create mode 100644 test/queue-groups.test.ts
 create mode 100644 test/tabs-registry.test.ts

diff --git a/e2e/workflows.spec.ts b/e2e/workflows.spec.ts
index 0fb1733..0f667d9 100644
--- a/e2e/workflows.spec.ts
+++ b/e2e/workflows.spec.ts
@@ -169,35 +169,39 @@ test.afterAll(async () => {
 
 // --- UI navigation -----------------------------------------------------------
 
-test('every category opens its workspace with the right operations', async () => {
-  const expected: Record<string, string[]> = {
-    Images: ['Convert', 'Compress', 'Resize', 'Remove Background', 'Upscale', 'Generate'],
-    Video: ['Convert', 'Compress'],
-    Audio: ['Convert', 'Compress'],
-    PDF: [
-      'Extract text',
-      'Pages to PNG',
-      'Merge',
-      'Split',
-      'Burst',
-      'Extract images',
-      'To CBZ',
-      'Compress'
-    ],
-    Documents: ['Convert'],
-    Archives: ['Convert', 'Extract', 'To PDF']
+test('the rail lists every verb and opens its workspace', async () => {
+  for (const verb of [
+    'Convert',
+    'Compress',
+    'Resize',
+    'Upscale',
+    'Remove BG',
+    'Generate',
+    'Tools'
+  ]) {
+    await page.locator(`button:has-text("${verb}")`).first().click()
+    await expect(page.locator('h1', { hasText: verb }).first()).toBeVisible()
   }
-  for (const [category, ops] of Object.entries(expected)) {
-    await page.locator(`button:has-text("${category}")`).first().click()
-    // The operation switcher lists every operation of this category.
-    await page.locator('aside button').first().click() // open the switcher
-    for (const op of ops) {
-      await expect(page.locator(`text=${op}`).first()).toBeVisible()
-    }
-    await page.keyboard.press('Escape')
+  await page.locator('button:has-text("Convert")').first().click()
+})
+
+test('Tools groups its one-off verbs and opens one as a workspace', async () => {
+  await page.locator('button:has-text("Tools")').first().click()
+  for (const t of ['Extract text', 'Merge', 'Burst', 'Archive to PDF', 'PDF to CBZ']) {
+    await expect(page.locator(`text=${t}`).first()).toBeVisible()
   }
+  await page.locator('button:has-text("Merge")').first().click()
+  // A tool workspace is an ordinary queue titled with the tool's name.
+  await expect(page.locator('h1', { hasText: 'Merge' }).first()).toBeVisible()
+  await expect(page.locator('text=Input').first()).toBeVisible()
+  await page.locator('button:has-text("Convert")').first().click()
 })
 
+// NOTE: the mixed-kind queue, its group headers and the kind-scoped options
+// panel are covered by unit tests (queue-groups, verb-state), not here. Adding
+// files to the UI needs a real OS drop or a native file dialog, and neither is
+// drivable from Playwright without a production-only test seam.
+
 // --- Images ------------------------------------------------------------------
 
 test('convert: png -> jpg, webp, bmp (flattened), multi-size ico', async () => {
diff --git a/src/renderer/src/App.tsx b/src/renderer/src/App.tsx
index 052e501..1494ae9 100644
--- a/src/renderer/src/App.tsx
+++ b/src/renderer/src/App.tsx
@@ -11,6 +11,7 @@ import {
 import type { FileInfo, FileKind, PreviewItem } from '@shared/types'
 import {
   canCompress,
+  convertGroup,
   familyFormats,
   isSameFormat,
   normalizeExt,
@@ -29,6 +30,8 @@ import {
   reducer,
   initialState,
   optionsKey,
+  queueKey,
+  defaultOptionsFor,
   emptyQueue,
   inInput,
   inOutput,
@@ -41,16 +44,11 @@ import {
   type QueueItem,
   type SelectMode
 } from './state'
-import {
-  acceptsKind,
-  categoryOf,
-  findOperation,
-  operationsFor,
-  type CategoryId
-} from '@shared/catalog'
+import { engineFor, tabAccepts, tabById, toolCardById } from '@shared/tabs'
 import { TopBar } from './components/TopBar'
-import { CategoryRail } from './components/CategoryRail'
+import { TabRail } from './components/TabRail'
 import { OperationTitle } from './components/OperationTitle'
+import { ToolsGrid } from './components/ToolsGrid'
 import { DropZone } from './components/DropZone'
 import { PromptBox } from './components/PromptBox'
 import type { GenerateOptions } from '@shared/generate'
@@ -231,14 +229,15 @@ export default function App(): JSX.Element {
     return () => window.removeEventListener('beforeunload', flush)
   }, [])
 
-  // The queue belongs to the file type and is shared across its operations, so
-  // switching Convert -> Compress keeps the same files. Options are per
-  // operation, keyed by (category, operation).
-  const op = findOperation(state.category, state.operation) ?? operationsFor(state.category)[0]
-  const tool = op.tool
-  const category = categoryOf(state.category)
-  const cur = state.queues[state.category] ?? emptyQueue()
-  const curOptions = state.options[optionsKey(state)] ?? {}
+  // The queue belongs to the VERB: one Convert queue can hold images and video
+  // at once. Options are per (workspace, convert group), so the image target and
+  // the video target live side by side inside that one tab.
+  const tab = tabById(state.tab)
+  const card = state.activeTool ? toolCardById(state.activeTool) : null
+  const qKey = queueKey(state.tab, state.activeTool)
+  const cur = state.queues[qKey] ?? emptyQueue()
+  // The Tools grid is a chooser, not a workspace: no queue, no options panel.
+  const onToolsGrid = state.tab === 'tools' && !card
 
   // Stream job progress/terminal events into state.
   useEffect(() => window.filesmith.onJobEvent((e) => dispatch({ type: 'jobEvent', event: e })), [])
@@ -258,6 +257,7 @@ export default function App(): JSX.Element {
   // (incl. exotic formats via magick), videos (ffmpeg frame), audio cover art.
   useEffect(() => {
     for (const q of Object.values(state.queues)) {
+      if (!q) continue
       for (const item of q.items) {
         if (item.thumb !== null || requested.current.has(item.id)) continue
         requested.current.add(item.id)
@@ -272,6 +272,7 @@ export default function App(): JSX.Element {
   // input's kind — convert never crosses categories).
   useEffect(() => {
     for (const q of Object.values(state.queues)) {
+      if (!q) continue
       for (const item of q.items) {
         const out = item.outputPath
         if (!out || item.status !== 'done' || outRequested.current.has(out)) continue
@@ -292,6 +293,17 @@ export default function App(): JSX.Element {
   const selEff = selectedItems.map(effectiveFile)
   const activeKind: FileKind | null = selEff.length ? selEff[0].kind : null
   const activeGroup: string | null = selEff.length ? groupOf(selEff[0]) : null
+  // Nothing selected yet: fall back to the first kind this verb accepts, so the
+  // options panel can still show what it would do.
+  const fallbackKind: FileKind = tab.kinds[0] ?? card?.kinds[0] ?? 'image'
+  const optGroup = activeGroup ?? convertGroup(fallbackKind, '')
+  // The engine is resolved per group: the Convert tab runs the archive tool for
+  // a .cbz and the convert tool for everything else.
+  const engine = engineFor(state.tab, optGroup, card)
+  const tool = engine.tool
+  const curOptions = state.options[optionsKey(state.tab, state.activeTool, optGroup)] ?? {
+    ...defaultOptionsFor(state.tab, state.activeTool, optGroup)
+  }
   const srcNorms = new Set(selEff.map((f) => normalizeExt(f.ext)))
   const srcExts = [...srcNorms] // every selected source format (for greying targets)
   const sourceExt: string | null = srcNorms.size === 1 ? [...srcNorms][0] : null
@@ -306,14 +318,15 @@ export default function App(): JSX.Element {
   const runList: QueueItem[] = selectedItems.filter((i) => {
     if (!canRun(i)) return false
     const f = effectiveFile(i)
-    // The workspace is type-locked, so the category already guarantees the kind.
-    // What is left to check is whether this specific file can take this operation.
-    if (!acceptsKind(state.category, f.kind)) return false
-    if (op.tool === 'convert') {
+    // The queue can hold several kinds, so check this file against the verb AND
+    // against the selected group: Run only ever acts on one group.
+    if (!accepts(f.kind)) return false
+    if (activeGroup && groupOf(f) !== activeGroup) return false
+    if (tool === 'convert') {
       const fmt = String(curOptions.format ?? '')
       return toolForKind(f.kind) != null && !isSameFormat(f.ext, fmt)
     }
-    if (op.tool === 'compress') return canCompress(f.kind, f.ext)
+    if (tool === 'compress') return canCompress(f.kind, f.ext)
     return true
   })
 
@@ -327,7 +340,7 @@ export default function App(): JSX.Element {
     const valid = opts.some((f) => f.ext === fmt) && !isSource(fmt)
     if (!valid) {
       const def = opts.find((f) => !isSource(f.ext))?.ext
-      if (def) dispatch({ type: 'setOption', key: 'format', value: def })
+      if (def) dispatch({ type: 'setOption', group: optGroup, key: 'format', value: def })
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [activeKind, sourceExt, srcExts.join('|'), curOptions.format, tool])
@@ -355,14 +368,14 @@ export default function App(): JSX.Element {
       list.findIndex((it) => it.id === item.id)
     )
     void window.filesmith.openPreviewWindow(toPreviewFiles(cur.items, side, outThumbs), index)
-    setPreviewCtx({ side, key: state.category })
+    setPreviewCtx({ side, key: qKey })
   }
 
   // Keep an open preview window's list in sync with the queue (it manages its
   // own position; a no-op in main if the window is closed).
   useEffect(() => {
     if (!previewCtx) return
-    const items = state.queues[previewCtx.key as CategoryId]?.items ?? []
+    const items = state.queues[previewCtx.key]?.items ?? []
     window.filesmith.updatePreviewList(toPreviewFiles(items, previewCtx.side, outThumbs))
   }, [state.queues, outThumbs, previewCtx])
 
@@ -524,16 +537,22 @@ export default function App(): JSX.Element {
     })
   }
 
-  /** Keep only what this workspace accepts. The screen promises one file type,
-   * so silently taking a video into the Images queue would break that promise. */
-  function ofCategory(files: FileInfo[]): FileInfo[] {
-    return files.filter((f) => acceptsKind(state.category, f.kind))
+  /** Whether this workspace can act on a kind at all. A tool card names its own
+   * kinds; every other tab uses the verb's. */
+  function accepts(kind: FileKind): boolean {
+    return card ? card.kinds.includes(kind) : tabAccepts(state.tab, kind)
+  }
+
+  /** Keep only what this workspace can actually do. Upscale silently swallowing
+   * an MP4 would promise work it cannot perform. */
+  function ofTab(files: FileInfo[]): FileInfo[] {
+    return files.filter((f) => accepts(f.kind))
   }
 
   async function browse(): Promise<void> {
-    const category = state.category
-    const files = ofCategory(await window.filesmith.pickFiles())
-    if (files.length) dispatch({ type: 'addItems', files, category })
+    const key = qKey
+    const files = ofTab(await window.filesmith.pickFiles())
+    if (files.length) dispatch({ type: 'addItems', files, key })
   }
 
   async function onDrop(e: DragEvent<HTMLElement>): Promise<void> {
@@ -541,14 +560,14 @@ export default function App(): JSX.Element {
     setDragging(false)
     // Generate has no queue on screen: a file accepted here would land in an
     // invisible list with no feedback at all.
-    if (op.tool === 'generate') return
+    if (tool === 'generate' || onToolsGrid) return
     const paths = Array.from(e.dataTransfer.files)
       .map((f) => window.filesmith.pathForFile(f))
       .filter(Boolean)
     if (!paths.length) return
-    const category = state.category
-    const files = ofCategory(await window.filesmith.classify(paths))
-    if (files.length) dispatch({ type: 'addItems', files, category })
+    const key = qKey
+    const files = ofTab(await window.filesmith.classify(paths))
+    if (files.length) dispatch({ type: 'addItems', files, key })
   }
 
   // Build a fresh Input-column source item for a path (a promoted output, or a
@@ -683,7 +702,7 @@ export default function App(): JSX.Element {
   }
 
   async function run(): Promise<void> {
-    if (op.tool === 'generate') return generate()
+    if (tool === 'generate') return generate()
     if (!runList.length) return
     const opts = curOptions
 
@@ -707,7 +726,7 @@ export default function App(): JSX.Element {
 
     // Merge is N-in/1-out, so it doesn't follow the 1:1 rule: run the anchor in
     // place (promoting it first if it's an output) with all paths as inputs.
-    if (op.tool === 'pdf' && opts.op === 'merge') {
+    if (tool === 'pdf' && opts.op === 'merge') {
       if (runList.length < 2) return
       const paths = runList.map((i) => effectiveFile(i).path)
       const anchor = runList[0]
@@ -715,7 +734,7 @@ export default function App(): JSX.Element {
       if (anchor.isResult) {
         const src = await makeSource(anchor)
         if (!src) return
-        dispatch({ type: 'addSources', items: [src], category: state.category })
+        dispatch({ type: 'addSources', items: [src], key: qKey })
         anchorId = src.id
       }
       dispatch({ type: 'markQueued', ids: [anchorId], options: opts })
@@ -745,21 +764,20 @@ export default function App(): JSX.Element {
       newSources.push(src)
       targets.push({ id: src.id, path: src.file.path })
     }
-    if (newSources.length)
-      dispatch({ type: 'addSources', items: newSources, category: state.category })
+    if (newSources.length) dispatch({ type: 'addSources', items: newSources, key: qKey })
     if (!targets.length) return
     dispatch({ type: 'markQueued', ids: targets.map((t) => t.id), options: opts })
     for (const t of targets) {
-      void window.filesmith.runJob({ id: t.id, tool: op.tool, input: t.path, options: opts })
+      void window.filesmith.runJob({ id: t.id, tool, input: t.path, options: opts })
     }
   }
 
   // Merge needs 2+ PDFs before it can run; every other op runs per selected file.
-  const isMerge = op.tool === 'pdf' && String(curOptions.op) === 'merge'
+  const isMerge = tool === 'pdf' && String(curOptions.op) === 'merge'
   const promptFilled = String(curOptions.prompt ?? '').trim().length > 0
   const genAspect = `${Number(curOptions.width ?? 1024)} / ${Number(curOptions.height ?? 1024)}`
   const runCount =
-    op.tool === 'generate'
+    tool === 'generate'
       ? promptFilled && !genRun.running
         ? 1
         : 0
@@ -858,21 +876,24 @@ export default function App(): JSX.Element {
         })
       : []
 
-  // Files waiting in each category, summed across that category's workspaces, so
-  // the rail shows where work is sitting even while you're looking elsewhere.
+  // Files waiting in each verb, so the rail shows where work is sitting even
+  // while you're looking elsewhere. Every Tools workspace rolls up into Tools.
   const counts: Record<string, number> = {}
-  for (const [cat, q] of Object.entries(state.queues)) {
-    counts[cat] = q.items.filter(inInput).length
+  for (const [k, q] of Object.entries(state.queues)) {
+    if (!q) continue
+    const n = q.items.filter(inInput).length
+    const bucket = k.startsWith('tools:') ? 'tools' : k
+    counts[bucket] = (counts[bucket] ?? 0) + n
   }
 
   return (
     <div className="flex h-screen flex-col">
       <TopBar />
       <div className="flex min-h-0 flex-1">
-        <CategoryRail
-          category={state.category}
+        <TabRail
+          tab={state.tab}
           counts={counts}
-          onSelect={(c) => dispatch({ type: 'setCategory', category: c })}
+          onSelect={(t) => dispatch({ type: 'setTab', tab: t })}
         />
 
         <>
@@ -880,21 +901,31 @@ export default function App(): JSX.Element {
             className="flex min-w-0 flex-1 flex-col gap-4 px-7 pb-5 pt-1"
             onDragOver={(e) => {
               e.preventDefault()
-              if (op.tool !== 'generate') setDragging(true)
+              if (tool !== 'generate' && !onToolsGrid) setDragging(true)
             }}
             onDragLeave={(e) => {
               if (e.currentTarget === e.target) setDragging(false)
             }}
             onDrop={onDrop}
           >
-            {/* The rail names the file type; the sidebar switcher names (and
-                  colours) the operation. This heading is just a heading. */}
-            <OperationTitle category={category} fileCount={cur.items.filter(inInput).length} />
-            {op.tool === 'generate' ? (
+            {/* The rail names the verb, so this heading just repeats it back and
+                  carries the file count (or the open tool's name inside Tools). */}
+            <OperationTitle
+              title={card ? card.label : tab.label}
+              desc={card ? card.desc : tab.desc}
+              color={card ? card.color : tab.color}
+              fileCount={onToolsGrid ? 0 : cur.items.filter(inInput).length}
+              onBack={card ? () => dispatch({ type: 'setActiveTool', tool: null }) : undefined}
+            />
+            {onToolsGrid ? (
+              <ToolsGrid onPick={(id) => dispatch({ type: 'setActiveTool', tool: id })} />
+            ) : tool === 'generate' ? (
               <>
                 <PromptBox
                   value={String(curOptions.prompt ?? '')}
-                  onChange={(v) => dispatch({ type: 'setOption', key: 'prompt', value: v })}
+                  onChange={(v) =>
+                    dispatch({ type: 'setOption', group: optGroup, key: 'prompt', value: v })
+                  }
                 />
                 {genRun.running && (
                   <div className="flex justify-end">
@@ -971,12 +1002,12 @@ export default function App(): JSX.Element {
               <>
                 <DropZone
                   dragging={dragging}
-                  label={`Drop ${category.label.toLowerCase()} here`}
+                  label={`Drop files to ${(card ? card.label : tab.label).toLowerCase()}`}
                   onBrowse={() => void browse()}
                 />
                 <Queues
                   items={cur.items}
-                  tool={op.tool}
+                  tool={tool}
                   options={curOptions}
                   selected={cur.selected}
                   activeGroup={activeGroup}
@@ -990,23 +1021,25 @@ export default function App(): JSX.Element {
             )}
           </section>
 
-          <OptionsPanel
-            operation={op}
-            operations={operationsFor(state.category)}
-            onPickOperation={(id) => dispatch({ type: 'setOperation', operation: id })}
-            options={curOptions}
-            activeKind={activeKind}
-            runKind={runKind}
-            fallbackKind={category.kinds[0]}
-            videoOutputs={videoOutputs}
-            upscaleOutputs={upscaleOutputs}
-            resizeOutputs={resizeOutputs}
-            sourceExt={sourceExt}
-            srcExts={srcExts}
-            runCount={runCount}
-            onSet={(k, v) => dispatch({ type: 'setOption', key: k, value: v })}
-            onRun={() => void run()}
-          />
+          {!onToolsGrid && (
+            <OptionsPanel
+              tool={tool}
+              label={card ? card.label : tab.label}
+              options={curOptions}
+              activeKind={activeKind}
+              activeGroup={activeGroup}
+              runKind={runKind}
+              fallbackKind={fallbackKind}
+              videoOutputs={videoOutputs}
+              upscaleOutputs={upscaleOutputs}
+              resizeOutputs={resizeOutputs}
+              sourceExt={sourceExt}
+              srcExts={srcExts}
+              runCount={runCount}
+              onSet={(k, v) => dispatch({ type: 'setOption', group: optGroup, key: k, value: v })}
+              onRun={() => void run()}
+            />
+          )}
         </>
       </div>
       <ContextMenu menu={menu} onClose={closeMenu} />
diff --git a/src/renderer/src/components/Icon.tsx b/src/renderer/src/components/Icon.tsx
index 792cd45..d6961cd 100644
--- a/src/renderer/src/components/Icon.tsx
+++ b/src/renderer/src/components/Icon.tsx
@@ -8,6 +8,7 @@ export type IconName =
   | 'removebg'
   | 'pdf'
   | 'archive'
+  | 'tools'
   | 'upload'
   | 'check'
   | 'clock'
@@ -60,6 +61,7 @@ const PATHS: Record<IconName, JSX.Element> = {
   ),
   pdf: <path d="M14 3.5H7a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8.5zM14 3.5v5h5" />,
   archive: <path d="M3.5 5.5h17v4h-17zM5.5 9.5v9h13v-9M10 13h4" />,
+  tools: <path d="M14.5 3.5a4.5 4.5 0 0 0 6 6L10 20a3 3 0 0 1-4-4z" />,
   upload: <path d="M12 16V4M7.5 8.5 12 4l4.5 4.5M4 20h16" />,
   check: <path d="M4.5 12.5 9 17 19.5 6.5" />,
   clock: (
diff --git a/src/renderer/src/components/OperationSwitcher.tsx b/src/renderer/src/components/OperationSwitcher.tsx
deleted file mode 100644
index 05b74af..0000000
--- a/src/renderer/src/components/OperationSwitcher.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-import { useEffect, useRef, useState, type JSX } from 'react'
-import type { Operation } from '@shared/catalog'
-import { Icon, type IconName } from './Icon'
-
-/**
- * The operation switcher, sitting at the top of the options sidebar. It takes
- * the SELECTED operation's own colour, so the mode is colour-coded and the
- * control doubles as a status light: an orange card means you're compressing, a
- * green one means resizing. Every other control in the panel is themed black, so
- * this coloured card is unmistakably the one primary choice, not a setting.
- */
-export function OperationSwitcher({
-  operation,
-  operations,
-  onPick
-}: {
-  operation: Operation
-  operations: Operation[]
-  onPick: (id: string) => void
-}): JSX.Element {
-  const [open, setOpen] = useState(false)
-  const ref = useRef<HTMLDivElement>(null)
-
-  useEffect(() => {
-    if (!open) return
-    const close = (e: Event): void => {
-      if (e instanceof KeyboardEvent && e.key !== 'Escape') return
-      if (e.type === 'mousedown' && ref.current?.contains(e.target as Node)) return
-      setOpen(false)
-    }
-    window.addEventListener('mousedown', close)
-    window.addEventListener('keydown', close)
-    return () => {
-      window.removeEventListener('mousedown', close)
-      window.removeEventListener('keydown', close)
-    }
-  }, [open])
-
-  return (
-    <div className="relative" ref={ref}>
-      <button
-        onClick={() => setOpen((o) => !o)}
-        className="flex h-[50px] w-full items-center gap-3 rounded-[13px] px-3 text-left text-white transition"
-        style={{
-          background: operation.color,
-          boxShadow: `0 6px 16px ${operation.color}55`
-        }}
-      >
-        <span className="grid h-8 w-8 shrink-0 place-items-center rounded-[9px] bg-white/[.22]">
-          <Icon name={operation.icon as IconName} className="h-[17px] w-[17px]" />
-        </span>
-        <span className="min-w-0 flex-1 truncate text-[15px] font-bold tracking-[-.01em]">
-          {operation.label}
-        </span>
-        <Icon
-          name="chevron-down"
-          className={`h-[18px] w-[18px] shrink-0 text-white/85 transition ${open ? 'rotate-180' : ''}`}
-        />
-      </button>
-
-      {open && (
-        <div className="ctx-pop absolute inset-x-0 top-[calc(100%+6px)] z-20 rounded-[13px] border border-black/[.10] bg-white p-1.5 shadow-[0_16px_40px_rgba(0,0,0,.18)]">
-          {operations.map((o) => {
-            const on = o.id === operation.id
-            return (
-              <button
-                key={o.id}
-                onClick={() => {
-                  setOpen(false)
-                  if (!on) onPick(o.id)
-                }}
-                className={`flex w-full items-center gap-2.5 rounded-[9px] px-2.5 py-2 text-left text-[13px] font-semibold transition ${
-                  on ? 'bg-black/[.05]' : 'hover:bg-black/[.04]'
-                }`}
-              >
-                <span
-                  className="grid h-[22px] w-[22px] shrink-0 place-items-center rounded-[7px] text-white"
-                  style={{ background: o.color }}
-                >
-                  <Icon name={o.icon as IconName} className="h-[13px] w-[13px]" />
-                </span>
-                {o.label}
-              </button>
-            )
-          })}
-        </div>
-      )}
-    </div>
-  )
-}
diff --git a/src/renderer/src/components/OperationTitle.tsx b/src/renderer/src/components/OperationTitle.tsx
index bf7949b..002f22a 100644
--- a/src/renderer/src/components/OperationTitle.tsx
+++ b/src/renderer/src/components/OperationTitle.tsx
@@ -1,28 +1,50 @@
 import type { JSX } from 'react'
-import type { Category } from '@shared/catalog'
+import { Icon } from './Icon'
 
 /**
- * The page heading: the file type ("Images", "PDF"), and a file count once files
- * exist.
+ * The page heading: the verb ("Convert", "Compress"), or the open tool's name
+ * inside Tools, plus a file count once files exist.
  *
- * Not the operation. The operation is named by the coloured switcher in the
- * sidebar, so the heading names the other axis (what kind of file you're working
- * with) rather than repeating the mode.
+ * The rail already names the verb, so this heading repeats it back as the
+ * workspace's own title. Inside a Tools workspace it also carries the way back
+ * to the grid, which is the only place in the app with a second level.
  */
 export function OperationTitle({
-  category,
-  fileCount
+  title,
+  desc,
+  color,
+  fileCount,
+  onBack
 }: {
-  category: Category
+  title: string
+  desc: string
+  color: string
   fileCount: number
+  /** Present only inside a Tools workspace. */
+  onBack?: () => void
 }): JSX.Element {
   return (
     <div>
-      <h1 className="text-[26px] font-bold tracking-tight">{category.label}</h1>
+      <div className="flex items-center gap-2.5">
+        {onBack && (
+          <button
+            onClick={onBack}
+            title="Back to Tools"
+            aria-label="Back to Tools"
+            className="grid h-7 w-7 place-items-center rounded-lg text-muted transition hover:bg-black/[.05] hover:text-ink"
+          >
+            <Icon name="chevron-left" className="h-4 w-4" />
+          </button>
+        )}
+        <h1 className="text-[26px] font-bold tracking-tight" style={{ color }}>
+          {title}
+        </h1>
+      </div>
       {/* The line always occupies its height so nothing below it shifts when a
-          file is added and the count appears. Empty until there's a count. */}
+          file is added and the count appears. Falls back to the verb's own
+          one-liner while the queue is empty. */}
       <p className="mt-0.5 h-[18px] text-[13px] text-muted">
-        {fileCount > 0 ? `${fileCount} file${fileCount === 1 ? '' : 's'}` : ''}
+        {fileCount > 0 ? `${fileCount} file${fileCount === 1 ? '' : 's'}` : desc}
       </p>
     </div>
   )
diff --git a/src/renderer/src/components/OptionsPanel.tsx b/src/renderer/src/components/OptionsPanel.tsx
index 507191b..0e21ff9 100644
--- a/src/renderer/src/components/OptionsPanel.tsx
+++ b/src/renderer/src/components/OptionsPanel.tsx
@@ -22,9 +22,8 @@ import { RESIZE_FITS, type ResizeFit } from '@shared/resize'
 import { BG_DEFAULTS, BG_FILLS, type BgFill } from '@shared/removebg'
 import { GEN_SIZES, GEN_STYLES, GEN_MAX_COUNT, clampDim } from '@shared/generate'
 import { archInfoFor, type GenArch, type GenModel } from '@shared/genArch'
-import type { Operation } from '@shared/catalog'
 import { Icon } from './Icon'
-import { OperationSwitcher } from './OperationSwitcher'
+import type { ToolId } from '@shared/types'
 import { PidInstallCard } from './PidUpscale'
 import { usePidStatus } from './usePidStatus'
 import { ComfyImportCard } from './ComfyImport'
@@ -1630,12 +1629,64 @@ function GenerateOptions({
   )
 }
 
+const KIND_COLOR: Record<string, string> = {
+  image: '#5b5bd6',
+  video: '#e0483d',
+  audio: '#f5920b',
+  pdf: '#ef4444',
+  document: '#12b3a6',
+  text: '#12b3a6',
+  archive: '#a16207',
+  other: '#6e6e73'
+}
+const KIND_NOUN: Record<string, (n: number) => string> = {
+  image: (n) => `${n} image${n === 1 ? '' : 's'}`,
+  video: (n) => `${n} video${n === 1 ? '' : 's'}`,
+  audio: (n) => `${n} audio file${n === 1 ? '' : 's'}`,
+  pdf: (n) => `${n} PDF${n === 1 ? '' : 's'}`,
+  document: (n) => `${n} document${n === 1 ? '' : 's'}`,
+  text: (n) => `${n} text file${n === 1 ? '' : 's'}`,
+  archive: (n) => `${n} archive${n === 1 ? '' : 's'}`,
+  other: (n) => `${n} file${n === 1 ? '' : 's'}`
+}
+
+/** What these settings will act on. The queue can hold images and video at the
+ * same time, so "Run" has to say which of them it means. */
+function ScopeChip({
+  kind,
+  count,
+  known
+}: {
+  kind: FileKind
+  count: number
+  known: boolean
+}): JSX.Element {
+  const noun = (KIND_NOUN[kind] ?? KIND_NOUN.other)(count)
+  return (
+    <div className="flex items-start gap-2.5 rounded-xl bg-black/[.035] px-3 py-2.5">
+      <span
+        className="mt-px h-[18px] w-[18px] shrink-0 rounded-md"
+        style={{ background: KIND_COLOR[kind] ?? KIND_COLOR.other }}
+      />
+      <span className="text-[12.5px] font-medium leading-snug text-muted">
+        {known && count > 0 ? (
+          <>
+            Applies to the <span className="font-bold text-ink">{noun}</span> selected.
+          </>
+        ) : (
+          <>Select files to choose what these settings apply to.</>
+        )}
+      </span>
+    </div>
+  )
+}
+
 export function OptionsPanel({
-  operation,
-  operations,
-  onPickOperation,
+  tool,
+  label,
   options,
   activeKind,
+  activeGroup,
   runKind,
   fallbackKind,
   videoOutputs,
@@ -1647,12 +1698,14 @@ export function OptionsPanel({
   onSet,
   onRun
 }: {
-  /** The operation this workspace performs, plus its siblings for the switcher. */
-  operation: Operation
-  operations: Operation[]
-  onPickOperation: (id: string) => void
+  /** The engine tool this workspace runs. */
+  tool: ToolId
+  /** The verb's own name, used by the Run button. */
+  label: string
   options: JobOptions
   activeKind: FileKind | null
+  /** The selected convert group, or null with nothing selected. */
+  activeGroup: string | null
   runKind: FileKind | null
   /** The kind to show options for when nothing is selected: the category's own. */
   fallbackKind: FileKind
@@ -1683,10 +1736,12 @@ export function OptionsPanel({
         } as CSSProperties
       }
     >
-      {/* The one coloured control: the primary choice. No "Options" header below
-          it: the option groups (Target format, Quality) are their own headers. */}
+      {/* No operation switcher: the rail IS the operation now, so a coloured
+          pill here would name the same thing twice. What the panel owes the user
+          instead is WHICH files its settings apply to, because one tab's queue
+          can hold several convert groups at once. */}
       <div className="px-[22px] pt-6">
-        <OperationSwitcher operation={operation} operations={operations} onPick={onPickOperation} />
+        <ScopeChip kind={activeKind ?? fallbackKind} count={runCount} known={activeGroup != null} />
         <div className="mt-5 h-px bg-black/[.07]" />
       </div>
       <div className="scroll-thin flex min-h-0 flex-1 flex-col gap-5 overflow-y-auto px-[22px] py-5">
@@ -1695,7 +1750,7 @@ export function OptionsPanel({
           Falls back to the category's kind when there's no selection to read
           one from. Only the run button reflects whether files are ready. */}
         <>
-          {operation.tool === 'convert' && (
+          {tool === 'convert' && (
             <ConvertOptions
               options={options}
               activeKind={activeKind ?? fallbackKind}
@@ -1704,7 +1759,7 @@ export function OptionsPanel({
               set={onSet}
             />
           )}
-          {operation.tool === 'compress' && (
+          {tool === 'compress' && (
             <CompressOptions
               options={options}
               activeKind={runKind ?? fallbackKind}
@@ -1712,20 +1767,16 @@ export function OptionsPanel({
               set={onSet}
             />
           )}
-          {operation.tool === 'resize' && (
+          {tool === 'resize' && (
             <ResizeOptions options={options} outputs={resizeOutputs} set={onSet} />
           )}
-          {operation.tool === 'upscale' && (
+          {tool === 'upscale' && (
             <UpscaleOptions options={options} outputs={upscaleOutputs} set={onSet} />
           )}
-          {operation.tool === 'removebg' && <RemoveBgOptions options={options} set={onSet} />}
-          {operation.tool === 'pdf' && (
-            <PdfOptions options={options} runCount={runCount} set={onSet} />
-          )}
-          {operation.tool === 'archive' && (
-            <ArchiveOptions options={options} srcExts={srcExts} set={onSet} />
-          )}
-          {operation.tool === 'generate' && <GenerateOptions options={options} set={onSet} />}
+          {tool === 'removebg' && <RemoveBgOptions options={options} set={onSet} />}
+          {tool === 'pdf' && <PdfOptions options={options} runCount={runCount} set={onSet} />}
+          {tool === 'archive' && <ArchiveOptions options={options} srcExts={srcExts} set={onSet} />}
+          {tool === 'generate' && <GenerateOptions options={options} set={onSet} />}
         </>
       </div>
 
@@ -1735,8 +1786,8 @@ export function OptionsPanel({
           disabled={runCount === 0}
           className="w-full rounded-[13px] bg-accent py-3.5 text-[15px] font-semibold text-white shadow-[0_8px_20px_rgba(0,0,0,.20)] transition hover:bg-accent-hi disabled:cursor-not-allowed disabled:opacity-45 disabled:shadow-none"
         >
-          {operation.label}
-          {operation.tool !== 'generate' && runCount > 0
+          {label}
+          {tool !== 'generate' && runCount > 0
             ? ` ${runCount} file${runCount === 1 ? '' : 's'}`
             : ''}
         </button>
diff --git a/src/renderer/src/components/Queue.tsx b/src/renderer/src/components/Queue.tsx
index cc5362c..55feab1 100644
--- a/src/renderer/src/components/Queue.tsx
+++ b/src/renderer/src/components/Queue.tsx
@@ -1,6 +1,7 @@
 import type { JSX, MouseEvent } from 'react'
 import type { JobOptions, ToolId } from '@shared/types'
 import { formatBytes, formatEta, groupOf, inInput, inOutput, type QueueItem } from '../state'
+import { groupItemsByGroup } from './queueGroups'
 import { baseName } from '@shared/fileKind'
 import { Icon } from './Icon'
 
@@ -293,6 +294,17 @@ function OutputCard({
   )
 }
 
+/** A hairline header naming one convert group inside a mixed queue. */
+function GroupHead({ label, count }: { label: string; count: string }): JSX.Element {
+  return (
+    <div className="mb-2 mt-3.5 flex items-center gap-2.5 first:mt-0.5">
+      <span className="text-[10.5px] font-bold uppercase tracking-[0.07em] text-dim">{label}</span>
+      <span className="text-[11.5px] font-medium text-muted">{count}</span>
+      <span className="h-px flex-1 bg-black/[.07]" />
+    </div>
+  )
+}
+
 export function Queues({
   items,
   tool,
@@ -340,20 +352,32 @@ export function Queues({
   return (
     <div className="flex min-h-0 flex-1 gap-5">
       <Column title="Input">
-        {inputs.map((i) => (
-          <InputCard
-            key={i.id}
-            item={i}
-            tool={tool}
-            options={options}
-            selected={selected.includes(i.id)}
-            compatible={activeGroup === null || groupOf(i.file) === activeGroup}
-            onClick={(e) => onItemClick(i.id, e)}
-            onOpen={() => onOpen('input', i)}
-            onMenu={(x, y) => onMenu('input', i, x, y)}
-            onCancel={() => onCancel(i.id)}
-          />
-        ))}
+        {(() => {
+          const card = (i: QueueItem): JSX.Element => (
+            <InputCard
+              key={i.id}
+              item={i}
+              tool={tool}
+              options={options}
+              selected={selected.includes(i.id)}
+              compatible={activeGroup === null || groupOf(i.file) === activeGroup}
+              onClick={(e) => onItemClick(i.id, e)}
+              onOpen={() => onOpen('input', i)}
+              onMenu={(x, y) => onMenu('input', i, x, y)}
+              onCancel={() => onCancel(i.id)}
+            />
+          )
+          // Headers only when the queue actually holds more than one group, so
+          // the everyday single-kind batch looks exactly as it always has.
+          const groups = groupItemsByGroup(inputs)
+          if (!groups) return inputs.map(card)
+          return groups.map((g) => (
+            <div key={g.group}>
+              <GroupHead label={g.label} count={g.count} />
+              {g.items.map(card)}
+            </div>
+          ))
+        })()}
       </Column>
       <Column title="Output">
         {done.map((i) => (
diff --git a/src/renderer/src/components/CategoryRail.tsx b/src/renderer/src/components/TabRail.tsx
similarity index 88%
rename from src/renderer/src/components/CategoryRail.tsx
rename to src/renderer/src/components/TabRail.tsx
index b126d40..b89c119 100644
--- a/src/renderer/src/components/CategoryRail.tsx
+++ b/src/renderer/src/components/TabRail.tsx
@@ -1,29 +1,29 @@
 import { useEffect, useRef, useState, type JSX } from 'react'
-import { CATEGORIES, type CategoryId } from '@shared/catalog'
+import { TABS, type TabId } from '@shared/tabs'
 import { Icon, type IconName } from './Icon'
 
-const ALL_IDS = CATEGORIES.map((c) => c.id)
-const byId = (id: CategoryId): (typeof CATEGORIES)[number] =>
-  CATEGORIES.find((c) => c.id === id) ?? CATEGORIES[0]
+const ALL_IDS = TABS.map((c) => c.id)
+const byId = (id: TabId): (typeof TABS)[number] => TABS.find((c) => c.id === id) ?? TABS[0]
 
-// The rail's layout is a user preference (order + which types are hidden), so it
+// The rail's layout is a user preference (order + which verbs are hidden), so it
 // lives in localStorage rather than app state: it outlives a session and never
-// needs to reach the engine.
-const ORDER_KEY = 'filesmith.rail.order'
-const HIDDEN_KEY = 'filesmith.rail.hidden'
+// needs to reach the engine. The keys are tab-specific: a stored CATEGORY order
+// from the old rail must not half-apply to verbs.
+const ORDER_KEY = 'filesmith.rail.tabOrder'
+const HIDDEN_KEY = 'filesmith.rail.tabHidden'
 
-function loadOrder(): CategoryId[] {
+function loadOrder(): TabId[] {
   try {
-    const saved = JSON.parse(localStorage.getItem(ORDER_KEY) ?? '[]') as CategoryId[]
+    const saved = JSON.parse(localStorage.getItem(ORDER_KEY) ?? '[]') as TabId[]
     const kept = saved.filter((id) => ALL_IDS.includes(id))
     return [...kept, ...ALL_IDS.filter((id) => !kept.includes(id))]
   } catch {
     return ALL_IDS
   }
 }
-function loadHidden(): Set<CategoryId> {
+function loadHidden(): Set<TabId> {
   try {
-    return new Set((JSON.parse(localStorage.getItem(HIDDEN_KEY) ?? '[]') as CategoryId[]) ?? [])
+    return new Set((JSON.parse(localStorage.getItem(HIDDEN_KEY) ?? '[]') as TabId[]) ?? [])
   } catch {
     return new Set()
   }
@@ -32,8 +32,9 @@ function loadHidden(): Set<CategoryId> {
 const clamp = (n: number, lo: number, hi: number): number => Math.max(lo, Math.min(hi, n))
 
 /**
- * The file-type rail, with an iOS-style edit mode: a pencil reveals a drag grip
- * and a visibility checkmark on each row.
+ * The verb rail, with an iOS-style edit mode: a pencil reveals a drag grip and a
+ * visibility checkmark on each row. The rail names what you want DONE; the file
+ * kind is a property of what you dropped, not a place you navigate to.
  *
  * The reorder is a hand-rolled pointer sortable rather than native HTML5 drag,
  * which is janky (no live gap, a ghost image, no control over motion). Here the
@@ -41,17 +42,17 @@ const clamp = (n: number, lo: number, hi: number): number => Math.max(lo, Math.m
  * way with a transition, and the new order commits on release. The maths keys
  * off the measured row pitch so it stays correct regardless of spacing.
  */
-export function CategoryRail({
-  category,
+export function TabRail({
+  tab,
   counts,
   onSelect
 }: {
-  category: CategoryId
+  tab: TabId
   counts: Record<string, number>
-  onSelect: (c: CategoryId) => void
+  onSelect: (c: TabId) => void
 }): JSX.Element {
-  const [order, setOrder] = useState<CategoryId[]>(loadOrder)
-  const [hidden, setHidden] = useState<Set<CategoryId>>(loadHidden)
+  const [order, setOrder] = useState<TabId[]>(loadOrder)
+  const [hidden, setHidden] = useState<Set<TabId>>(loadHidden)
   const [editing, setEditing] = useState(false)
 
   // Live drag state. `pitch` is the row-to-row distance in px, measured on grab.
@@ -69,7 +70,7 @@ export function CategoryRail({
 
   const rows = editing ? order : order.filter((id) => !hidden.has(id))
 
-  function toggleHidden(id: CategoryId): void {
+  function toggleHidden(id: TabId): void {
     setHidden((prev) => {
       const next = new Set(prev)
       if (next.has(id)) next.delete(id)
@@ -80,7 +81,7 @@ export function CategoryRail({
 
   function stopEditing(): void {
     setEditing(false)
-    if (hidden.has(category)) {
+    if (hidden.has(tab)) {
       const firstVisible = order.find((id) => !hidden.has(id))
       if (firstVisible) onSelect(firstVisible)
     }
@@ -146,7 +147,7 @@ export function CategoryRail({
     <nav className="flex w-[212px] shrink-0 flex-col gap-0.5 border-r border-black/[.06] bg-white/40 px-3 pb-4">
       <div className="flex items-center justify-between px-1 pb-2 pt-3.5">
         <span className="pl-1.5 text-[11px] font-semibold uppercase tracking-wide text-dim">
-          File types
+          Do
         </span>
         <button
           onClick={() => (editing ? stopEditing() : setEditing(true))}
@@ -165,7 +166,7 @@ export function CategoryRail({
 
       {rows.map((id, i) => {
         const c = byId(id)
-        const active = c.id === category && !editing
+        const active = c.id === tab && !editing
         const isHidden = hidden.has(id)
         const n = counts[c.id] ?? 0
 
diff --git a/src/renderer/src/components/ToolsGrid.tsx b/src/renderer/src/components/ToolsGrid.tsx
new file mode 100644
index 0000000..403d8a9
--- /dev/null
+++ b/src/renderer/src/components/ToolsGrid.tsx
@@ -0,0 +1,41 @@
+import type { JSX } from 'react'
+import { toolGroups } from '@shared/tabs'
+import { Icon, type IconName } from './Icon'
+
+/**
+ * The Tools tab's chooser: the long tail of one-off verbs, grouped by what they
+ * act on so the section headings do the finding rather than a flat wall of
+ * cards. Picking one turns the workspace into an ordinary queue with that tool
+ * as its title.
+ */
+export function ToolsGrid({ onPick }: { onPick: (id: string) => void }): JSX.Element {
+  return (
+    <div className="scroll-thin min-h-0 flex-1 overflow-y-auto pb-4">
+      {toolGroups().map((g) => (
+        <section key={g.name} className="mb-7 last:mb-0">
+          <h2 className="mb-3 ml-0.5 text-[11px] font-bold uppercase tracking-[0.09em] text-dim">
+            {g.name}
+          </h2>
+          <div className="grid grid-cols-[repeat(auto-fill,minmax(228px,1fr))] gap-2.5">
+            {g.cards.map((c) => (
+              <button
+                key={c.id}
+                onClick={() => onPick(c.id)}
+                className="rounded-2xl border border-black/[.075] bg-white p-[15px] text-left transition hover:-translate-y-px hover:border-accent/40 hover:shadow-[0_6px_16px_rgba(20,20,45,.08)]"
+              >
+                <span
+                  className="mb-2.5 grid h-7 w-7 place-items-center rounded-[9px]"
+                  style={{ background: c.color }}
+                >
+                  <Icon name={c.icon as IconName} className="h-[15px] w-[15px] text-white" />
+                </span>
+                <div className="text-[13.5px] font-semibold tracking-tight">{c.label}</div>
+                <div className="mt-0.5 text-[11.5px] leading-snug text-muted">{c.desc}</div>
+              </button>
+            ))}
+          </div>
+        </section>
+      ))}
+    </div>
+  )
+}
diff --git a/src/renderer/src/components/queueGroups.ts b/src/renderer/src/components/queueGroups.ts
new file mode 100644
index 0000000..be853ab
--- /dev/null
+++ b/src/renderer/src/components/queueGroups.ts
@@ -0,0 +1,65 @@
+import { groupOf, type QueueItem } from '../state'
+
+// Queue grouping lives apart from Queue.tsx so that file exports only
+// components (React Fast Refresh requires that), matching how the status hooks
+// are split out.
+
+/** Display order for the group headers: the everyday kinds first, then the
+ * document family, then the long tail. */
+const GROUP_ORDER = ['image', 'video', 'audio', 'doc', 'sheet', 'slide', 'archive']
+const GROUP_NOUN: Record<string, (n: number) => string> = {
+  image: (n) => `${n} image${n === 1 ? '' : 's'}`,
+  video: (n) => `${n} video${n === 1 ? '' : 's'}`,
+  audio: (n) => `${n} audio file${n === 1 ? '' : 's'}`,
+  doc: (n) => `${n} document${n === 1 ? '' : 's'}`,
+  sheet: (n) => `${n} spreadsheet${n === 1 ? '' : 's'}`,
+  slide: (n) => `${n} slide deck${n === 1 ? '' : 's'}`,
+  archive: (n) => `${n} archive${n === 1 ? '' : 's'}`
+}
+const GROUP_LABEL: Record<string, string> = {
+  image: 'Images',
+  video: 'Video',
+  audio: 'Audio',
+  doc: 'Documents',
+  sheet: 'Spreadsheets',
+  slide: 'Slides',
+  archive: 'Archives'
+}
+
+export interface ItemGroup {
+  group: string
+  label: string
+  count: string
+  items: QueueItem[]
+}
+
+/**
+ * Split a queue into convert groups for the Input column's headers. Returns
+ * null for zero or one group, so the ordinary single-kind queue renders exactly
+ * as it always has and the headers only appear when they are actually telling
+ * the user something.
+ */
+export function groupItemsByGroup(items: QueueItem[]): ItemGroup[] | null {
+  const byGroup = new Map<string, QueueItem[]>()
+  for (const i of items) {
+    const g = groupOf(i.file)
+    const cur = byGroup.get(g)
+    if (cur) cur.push(i)
+    else byGroup.set(g, [i])
+  }
+  if (byGroup.size < 2) return null
+  const order = [...byGroup.keys()].sort((a, b) => {
+    const ia = GROUP_ORDER.indexOf(a)
+    const ib = GROUP_ORDER.indexOf(b)
+    return (ia < 0 ? GROUP_ORDER.length : ia) - (ib < 0 ? GROUP_ORDER.length : ib)
+  })
+  return order.map((g) => {
+    const list = byGroup.get(g)!
+    return {
+      group: g,
+      label: GROUP_LABEL[g] ?? 'Other',
+      count: (GROUP_NOUN[g] ?? ((n: number) => `${n} file${n === 1 ? '' : 's'}`))(list.length),
+      items: list
+    }
+  })
+}
diff --git a/src/shared/catalog.ts b/src/shared/catalog.ts
deleted file mode 100644
index 4e03a1d..0000000
--- a/src/shared/catalog.ts
+++ /dev/null
@@ -1,231 +0,0 @@
-import type { FileKind, ToolId } from './types'
-
-// The app's navigation model: pick a FILE TYPE, then pick an OPERATION, then
-// work in a screen that does exactly that one operation on exactly that one file
-// type. Categories are what a user has; operations are what they want done.
-//
-// An operation is not the same thing as a ToolId. The PDF tool carries six
-// distinct verbs behind an `op` option (merge, burst, …) and every one of them
-// deserves its own card, while "Compress" maps to the compress tool under four
-// different categories. This table is the mapping between the two.
-
-export type CategoryId = 'images' | 'video' | 'audio' | 'pdf' | 'documents' | 'archives'
-
-export interface Category {
-  id: CategoryId
-  label: string
-  /** The file kinds this category accepts. */
-  kinds: FileKind[]
-  color: string
-  icon: string
-}
-
-export const CATEGORIES: Category[] = [
-  { id: 'images', label: 'Images', kinds: ['image'], color: '#5b5bd6', icon: 'image' },
-  { id: 'video', label: 'Video', kinds: ['video'], color: '#e0483d', icon: 'video' },
-  { id: 'audio', label: 'Audio', kinds: ['audio'], color: '#f5920b', icon: 'audio' },
-  { id: 'pdf', label: 'PDF', kinds: ['pdf'], color: '#ef4444', icon: 'pdf' },
-  {
-    id: 'documents',
-    label: 'Documents',
-    kinds: ['document', 'text'],
-    color: '#12b3a6',
-    icon: 'doc'
-  },
-  { id: 'archives', label: 'Archives', kinds: ['archive'], color: '#a16207', icon: 'archive' }
-]
-
-export interface Operation {
-  /** Unique within its category. */
-  id: string
-  label: string
-  /** One line, shown under the label on the operation card. */
-  desc: string
-  color: string
-  icon: string
-  /** The engine tool that performs it. */
-  tool: ToolId
-  /** For the PDF tool, the `op` option this card stands for. */
-  opKey?: string
-}
-
-const CONVERT = (desc: string): Operation => ({
-  id: 'convert',
-  label: 'Convert',
-  desc,
-  color: '#5b5bd6',
-  icon: 'convert',
-  tool: 'convert'
-})
-const COMPRESS = (desc: string): Operation => ({
-  id: 'compress',
-  label: 'Compress',
-  desc,
-  color: '#f5920b',
-  icon: 'compress',
-  tool: 'compress'
-})
-
-export const OPERATIONS: Record<CategoryId, Operation[]> = {
-  images: [
-    CONVERT('Change format (PNG, WebP, AVIF)'),
-    COMPRESS('Shrink file size'),
-    {
-      id: 'resize',
-      label: 'Resize',
-      desc: 'Scale by percent or exact size',
-      color: '#22b364',
-      icon: 'resize',
-      tool: 'resize'
-    },
-    {
-      id: 'removebg',
-      label: 'Remove Background',
-      desc: 'Cut the subject out with AI',
-      color: '#12b3a6',
-      icon: 'removebg',
-      tool: 'removebg'
-    },
-    {
-      id: 'upscale',
-      label: 'Upscale',
-      desc: 'Enlarge 2x to 4x with AI',
-      color: '#8b5cf6',
-      icon: 'upscale',
-      tool: 'upscale'
-    },
-    {
-      id: 'generate',
-      label: 'Generate',
-      desc: 'Create an image from a text prompt',
-      color: '#d6409f',
-      icon: 'image',
-      tool: 'generate'
-    }
-  ],
-  video: [CONVERT('Change container or codec'), COMPRESS('Shrink file size')],
-  audio: [CONVERT('Change format (MP3, AAC, Opus)'), COMPRESS('Shrink file size')],
-  pdf: [
-    {
-      id: 'extract-text',
-      label: 'Extract text',
-      desc: 'Save the text layer as .txt',
-      color: '#ef4444',
-      icon: 'text',
-      tool: 'pdf',
-      opKey: 'extract-text'
-    },
-    {
-      id: 'pages-to-images',
-      label: 'Pages to PNG',
-      desc: 'Render each page to an image',
-      color: '#5b5bd6',
-      icon: 'image',
-      tool: 'pdf',
-      opKey: 'pages-to-images'
-    },
-    {
-      id: 'merge',
-      label: 'Merge',
-      desc: 'Combine PDFs into one',
-      color: '#12b3a6',
-      icon: 'convert',
-      tool: 'pdf',
-      opKey: 'merge'
-    },
-    {
-      id: 'split-range',
-      label: 'Split',
-      desc: 'Keep only the pages you list',
-      color: '#22b364',
-      icon: 'resize',
-      tool: 'pdf',
-      opKey: 'split-range'
-    },
-    {
-      id: 'split-pages',
-      label: 'Burst',
-      desc: 'Save every page separately',
-      color: '#8b5cf6',
-      icon: 'upscale',
-      tool: 'pdf',
-      opKey: 'split-pages'
-    },
-    {
-      id: 'extract-images',
-      label: 'Extract images',
-      desc: 'Pull out embedded images',
-      color: '#e0483d',
-      icon: 'removebg',
-      tool: 'pdf',
-      opKey: 'extract-images'
-    },
-    {
-      id: 'to-cbz',
-      label: 'To CBZ',
-      desc: 'Pack the pages as a comic archive',
-      color: '#a16207',
-      icon: 'archive',
-      tool: 'archive',
-      opKey: 'from-pdf'
-    },
-    COMPRESS('Shrink file size')
-  ],
-  documents: [CONVERT('Convert to PDF, DOCX, TXT')],
-  archives: [
-    {
-      id: 'convert',
-      label: 'Convert',
-      desc: 'Repack as CBZ, CBR, CB7 or ZIP',
-      color: '#5b5bd6',
-      icon: 'convert',
-      tool: 'archive',
-      opKey: 'repack'
-    },
-    {
-      id: 'extract',
-      label: 'Extract',
-      desc: 'Unpack into a folder',
-      color: '#22b364',
-      icon: 'resize',
-      tool: 'archive',
-      opKey: 'extract'
-    },
-    {
-      id: 'to-pdf',
-      label: 'To PDF',
-      desc: 'Turn a comic archive into a PDF',
-      color: '#ef4444',
-      icon: 'pdf',
-      tool: 'archive',
-      opKey: 'to-pdf'
-    }
-  ]
-}
-
-/** Every workspace is one (category, operation) pair, and that pair is its key. */
-export type WorkspaceKey = string
-export const workspaceKey = (c: CategoryId, o: string): WorkspaceKey => `${c}:${o}`
-
-export function categoryOf(id: CategoryId): Category {
-  return CATEGORIES.find((c) => c.id === id) ?? CATEGORIES[0]
-}
-
-export function operationsFor(id: CategoryId): Operation[] {
-  return OPERATIONS[id] ?? []
-}
-
-export function findOperation(c: CategoryId, opId: string): Operation | undefined {
-  return operationsFor(c).find((o) => o.id === opId)
-}
-
-/** The operation a category opens on. There is no in-between screen, so every
- * category needs a sensible landing operation: the first one listed. */
-export function defaultOperation(c: CategoryId): string {
-  return operationsFor(c)[0]?.id ?? ''
-}
-
-/** True when a file belongs in this category (drives the type-locked drop zone). */
-export function acceptsKind(c: CategoryId, kind: FileKind): boolean {
-  return categoryOf(c).kinds.includes(kind)
-}
diff --git a/test/archive-catalog-nav.test.ts b/test/archive-catalog-nav.test.ts
deleted file mode 100644
index 0f70173..0000000
--- a/test/archive-catalog-nav.test.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { describe, expect, it } from 'vitest'
-import { acceptsKind, defaultOperation, findOperation, operationsFor } from '@shared/catalog'
-import { defaultOptionsFor } from '../src/renderer/src/state'
-
-describe('archives category', () => {
-  it('accepts archive files and nothing else', () => {
-    expect(acceptsKind('archives', 'archive')).toBe(true)
-    expect(acceptsKind('archives', 'image')).toBe(false)
-  })
-
-  it('lands on Convert', () => {
-    expect(defaultOperation('archives')).toBe('convert')
-  })
-
-  it('offers convert, extract and to-pdf', () => {
-    expect(operationsFor('archives').map((o) => o.id)).toEqual(['convert', 'extract', 'to-pdf'])
-  })
-
-  it('routes every archives operation to the archive tool', () => {
-    for (const o of operationsFor('archives')) expect(o.tool).toBe('archive')
-  })
-
-  it('adds a To CBZ card under PDF that runs the archive tool', () => {
-    const card = findOperation('pdf', 'to-cbz')
-    expect(card?.tool).toBe('archive')
-    expect(card?.opKey).toBe('from-pdf')
-  })
-
-  it('seeds each archive workspace with its own op', () => {
-    expect(defaultOptionsFor('archives', 'extract').op).toBe('extract')
-    expect(defaultOptionsFor('archives', 'to-pdf').op).toBe('to-pdf')
-    expect(defaultOptionsFor('pdf', 'to-cbz').op).toBe('from-pdf')
-  })
-})
diff --git a/test/catalog-tools.test.ts b/test/catalog-tools.test.ts
deleted file mode 100644
index fd68125..0000000
--- a/test/catalog-tools.test.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { describe, expect, it } from 'vitest'
-import { OPERATIONS } from '../src/shared/catalog'
-import { getTool } from '../src/main/tools/registry'
-
-// TOOLS in tools/registry.ts is a Partial<Record<ToolId, ToolModule>>, which
-// removes the compiler's exhaustiveness check: a renamed or added ToolId
-// compiles fine and fails at runtime with "Unknown tool: X". This walks the
-// UI's own catalog and asserts every operation resolves to an engine module.
-//
-// 'generate' is the one deliberate exemption: generation runs on its own
-// generate:* IPC path (see App.tsx's early return), not through the job queue.
-const QUEUE_EXEMPT = new Set(['generate'])
-
-describe('catalog <-> engine registry', () => {
-  it('every catalog operation maps to an implemented tool module', () => {
-    for (const ops of Object.values(OPERATIONS)) {
-      for (const op of ops) {
-        if (QUEUE_EXEMPT.has(op.tool)) continue
-        expect(getTool(op.tool), `tool '${op.tool}' (operation '${op.id}')`).toBeDefined()
-      }
-    }
-  })
-})
diff --git a/test/queue-groups.test.ts b/test/queue-groups.test.ts
new file mode 100644
index 0000000..dc1ba3c
--- /dev/null
+++ b/test/queue-groups.test.ts
@@ -0,0 +1,51 @@
+import { describe, expect, it } from 'vitest'
+import { groupItemsByGroup } from '../src/renderer/src/components/queueGroups'
+import type { QueueItem } from '../src/renderer/src/state'
+import type { FileKind } from '@shared/types'
+
+const q = (id: string, kind: FileKind, ext = '.x'): QueueItem => ({
+  id,
+  file: { path: id, name: id, ext, kind, size: 1 },
+  thumb: null,
+  status: 'ready',
+  percent: 0
+})
+
+describe('groupItemsByGroup', () => {
+  it('returns no groups for a single-group queue, so it renders as today', () => {
+    expect(groupItemsByGroup([q('a', 'image'), q('b', 'image')])).toBeNull()
+  })
+
+  it('returns no groups for an empty queue', () => {
+    expect(groupItemsByGroup([])).toBeNull()
+  })
+
+  it('treats a pdf, a docx and a txt as ONE group, since they batch together', () => {
+    const items = [q('a', 'pdf', '.pdf'), q('b', 'document', '.docx'), q('c', 'text', '.txt')]
+    expect(groupItemsByGroup(items)).toBeNull()
+  })
+
+  it('groups a mixed queue in a stable order', () => {
+    const g = groupItemsByGroup([q('v', 'video'), q('a', 'image'), q('s', 'audio')])!
+    expect(g.map((x) => x.group)).toEqual(['image', 'video', 'audio'])
+    expect(g[0].items.map((i) => i.id)).toEqual(['a'])
+  })
+
+  it('labels each group with its own plural', () => {
+    const g = groupItemsByGroup([q('a', 'image'), q('v', 'video'), q('w', 'video')])!
+    expect(g.map((x) => x.label)).toEqual(['Images', 'Video'])
+    expect(g.map((x) => x.count)).toEqual(['1 image', '2 videos'])
+  })
+
+  it('separates archives from documents', () => {
+    const g = groupItemsByGroup([q('d', 'document', '.docx'), q('c', 'archive', '.cbz')])!
+    expect(g.map((x) => x.group)).toEqual(['doc', 'archive'])
+    expect(g[1].count).toBe('1 archive')
+  })
+
+  it('puts an unknown group last rather than dropping it', () => {
+    const g = groupItemsByGroup([q('o', 'other', '.xyz'), q('a', 'image')])!
+    expect(g[0].group).toBe('image')
+    expect(g[1].items.map((i) => i.id)).toEqual(['o'])
+  })
+})
diff --git a/test/queues.test.ts b/test/queues.test.ts
index c05af50..e082391 100644
--- a/test/queues.test.ts
+++ b/test/queues.test.ts
@@ -1,6 +1,5 @@
 import { describe, expect, it } from 'vitest'
-import { reducer, initialState, defaultOptionsFor, type AppState } from '../src/renderer/src/state'
-import { workspaceKey } from '../src/shared/catalog'
+import { reducer, initialState, defaultOptionsFor, optionsKey } from '../src/renderer/src/state'
 import type { FileInfo } from '../src/shared/types'
 
 const img = (name: string): FileInfo => ({
@@ -10,46 +9,56 @@ const img = (name: string): FileInfo => ({
   kind: 'image',
   size: 10
 })
+const pdf = (name: string): FileInfo => ({
+  path: `C:/x/${name}`,
+  name,
+  ext: '.pdf',
+  kind: 'pdf',
+  size: 10
+})
 
-const IMAGES = 'images' as const
-const PDF = 'pdf' as const
-
-/** Switch operation within the current category (the queue is shared). */
-const open = (s: AppState, operation: string): AppState =>
-  reducer(s, { type: 'setOperation', operation })
+const CONVERT = 'convert'
+const COMPRESS = 'compress'
 
-const start = open(initialState, 'convert')
+const start = initialState
 
-describe('per-category queues (shared across operations)', () => {
-  it('keeps files when switching operation within a category', () => {
-    // The whole point: an image added while converting is still there after
-    // switching to compress, because the queue belongs to the file type.
-    let s = reducer(start, { type: 'addItems', files: [img('a.png')], category: 'images' })
-    expect(s.queues[IMAGES]!.items).toHaveLength(1)
-    s = open(s, 'compress')
-    expect(s.queues[IMAGES]!.items).toHaveLength(1) // retained
-    s = open(s, 'upscale')
-    expect(s.queues[IMAGES]!.items).toHaveLength(1) // still retained
+describe('per-verb queues', () => {
+  it('keeps each verb queue separate: the queue belongs to what you are doing', () => {
+    let s = reducer(start, { type: 'addItems', files: [img('a.png')], key: CONVERT })
+    s = reducer(s, { type: 'setTab', tab: 'compress' })
+    s = reducer(s, { type: 'addItems', files: [img('b.png')], key: COMPRESS })
+    expect(s.queues[COMPRESS]!.items).toHaveLength(1)
+    expect(s.queues[CONVERT]!.items).toHaveLength(1) // convert untouched
   })
 
-  it('keeps each file type queue separate', () => {
-    let s = reducer(start, { type: 'addItems', files: [img('a.png')], category: 'images' })
-    s = reducer(s, { type: 'setCategory', category: 'pdf' })
-    s = reducer(s, {
+  it('holds several convert groups in one queue at once', () => {
+    // The whole point of the verb-first model: a Convert queue can carry images
+    // and PDFs together, and the options panel scopes to whichever is selected.
+    const s = reducer(start, {
       type: 'addItems',
-      files: [{ path: 'C:/x/d.pdf', name: 'd.pdf', ext: '.pdf', kind: 'pdf', size: 5 }],
-      category: 'pdf'
+      files: [img('a.png'), pdf('d.pdf')],
+      key: CONVERT
     })
-    expect(s.queues[PDF]!.items).toHaveLength(1)
-    expect(s.queues[IMAGES]!.items).toHaveLength(1) // images untouched
+    expect(s.queues[CONVERT]!.items).toHaveLength(2)
+    // Only the first group is auto-selected, so a batch is never cross-group.
+    expect(s.queues[CONVERT]!.selected).toHaveLength(1)
   })
 
-  it('routes a job event to whichever category queue holds the item', () => {
-    let s = reducer(start, { type: 'addItems', files: [img('a.png')], category: 'images' })
-    const id = s.queues[IMAGES]!.items[0].id
-    s = open(s, 'resize')
+  it('gives each Tools card its own workspace queue', () => {
+    let s = reducer(start, { type: 'setTab', tab: 'tools' })
+    s = reducer(s, { type: 'setActiveTool', tool: 'pdf-merge' })
+    s = reducer(s, { type: 'addItems', files: [pdf('a.pdf')], key: 'tools:pdf-merge' })
+    s = reducer(s, { type: 'setActiveTool', tool: 'pdf-burst' })
+    expect(s.queues['tools:pdf-merge']!.items).toHaveLength(1)
+    expect(s.queues['tools:pdf-burst']!.items).toHaveLength(0)
+  })
+
+  it('routes a job event to whichever queue holds the item', () => {
+    let s = reducer(start, { type: 'addItems', files: [img('a.png')], key: CONVERT })
+    const id = s.queues[CONVERT]!.items[0].id
+    s = reducer(s, { type: 'setTab', tab: 'resize' })
     s = reducer(s, { type: 'jobEvent', event: { id, status: 'done', outputPath: 'C:/x/a.webp' } })
-    const items = s.queues[IMAGES]!.items
+    const items = s.queues[CONVERT]!.items
     expect(items).toHaveLength(2)
     expect(items[0].id).toBe(id)
     expect(items[0].status).toBe('done')
@@ -59,8 +68,8 @@ describe('per-category queues (shared across operations)', () => {
   })
 
   it('appends a fresh result on each finished run; the source persists', () => {
-    let s = reducer(start, { type: 'addItems', files: [img('a.png')], category: 'images' })
-    const id = s.queues[IMAGES]!.items[0].id
+    let s = reducer(start, { type: 'addItems', files: [img('a.png')], key: CONVERT })
+    const id = s.queues[CONVERT]!.items[0].id
     s = reducer(s, {
       type: 'jobEvent',
       event: { id, status: 'done', outputPath: 'C:/x/a (1).webp' }
@@ -69,7 +78,7 @@ describe('per-category queues (shared across operations)', () => {
       type: 'jobEvent',
       event: { id, status: 'done', outputPath: 'C:/x/a (2).webp' }
     })
-    const items = s.queues[IMAGES]!.items
+    const items = s.queues[CONVERT]!.items
     expect(items.filter((i) => !i.isResult)).toHaveLength(1)
     const results = items.filter((i) => i.isResult)
     expect(results).toHaveLength(2)
@@ -77,7 +86,7 @@ describe('per-category queues (shared across operations)', () => {
   })
 
   it('addSources appends pre-built input rows and selects them', () => {
-    let s = reducer(start, { type: 'addItems', files: [img('a.png')], category: 'images' })
+    let s = reducer(start, { type: 'addItems', files: [img('a.png')], key: CONVERT })
     const clone = {
       id: 'clone-1',
       file: img('a.png'),
@@ -85,53 +94,54 @@ describe('per-category queues (shared across operations)', () => {
       status: 'ready' as const,
       percent: 0
     }
-    s = reducer(s, { type: 'addSources', items: [clone], category: 'images' })
-    expect(s.queues[IMAGES]!.items.filter((i) => !i.isResult)).toHaveLength(2)
-    expect(s.queues[IMAGES]!.selected).toEqual(['clone-1'])
+    s = reducer(s, { type: 'addSources', items: [clone], key: CONVERT })
+    expect(s.queues[CONVERT]!.items.filter((i) => !i.isResult)).toHaveLength(2)
+    expect(s.queues[CONVERT]!.selected).toEqual(['clone-1'])
   })
 })
 
 describe('navigation', () => {
-  it('opens directly on the first operation, with no chooser in between', () => {
-    expect(initialState.category).toBe('images')
-    expect(initialState.operation).toBe('convert')
+  it('opens on the first verb, with no chooser in between', () => {
+    expect(initialState.tab).toBe('convert')
+    expect(initialState.activeTool).toBeNull()
   })
 
-  it("switching file type lands on that type's default operation, ready for files", () => {
-    // Operation ids are per-category, so carrying one across would be meaningless.
-    let s = open(initialState, 'upscale')
-    s = reducer(s, { type: 'setCategory', category: 'pdf' })
-    expect(s.category).toBe('pdf')
-    expect(s.operation).toBe('extract-text')
-    s = reducer(s, {
-      type: 'addItems',
-      files: [{ path: 'C:/x/a.pdf', name: 'a.pdf', ext: '.pdf', kind: 'pdf', size: 10 }],
-      category: 'pdf'
-    })
-    expect(s.queues[PDF]!.items).toHaveLength(1)
+  it('returns to the Tools card you last had open', () => {
+    let s = reducer(initialState, { type: 'setTab', tab: 'tools' })
+    s = reducer(s, { type: 'setActiveTool', tool: 'pdf-burst' })
+    s = reducer(s, { type: 'setTab', tab: 'convert' })
+    expect(s.activeTool).toBeNull()
+    s = reducer(s, { type: 'setTab', tab: 'tools' })
+    expect(s.activeTool).toBe('pdf-burst')
   })
 
-  it('keeps options per operation while the queue is shared', () => {
-    // Set a Convert-only option, switch away and back: the option is remembered,
-    // and separate from Compress's options.
-    let s = reducer(start, { type: 'addItems', files: [img('a.png')], category: 'images' })
-    s = reducer(s, { type: 'setOption', key: 'format', value: '.avif' })
-    s = open(s, 'compress')
-    expect(s.options[workspaceKey('images', 'compress')].quality).toBe(80) // its own default
-    s = open(s, 'convert')
-    expect(s.options[workspaceKey('images', 'convert')].format).toBe('.avif') // remembered
+  it('keeps options per convert group inside one verb', () => {
+    // Set an image target, then a video target: one Convert tab holds both, and
+    // neither overwrites the other.
+    let s = reducer(initialState, {
+      type: 'setOption',
+      group: 'image',
+      key: 'format',
+      value: '.avif'
+    })
+    s = reducer(s, { type: 'setOption', group: 'video', key: 'format', value: '.mkv' })
+    expect(s.options[optionsKey('convert', null, 'image')].format).toBe('.avif')
+    expect(s.options[optionsKey('convert', null, 'video')].format).toBe('.mkv')
   })
 
-  it('seeds a new operation with its tool defaults', () => {
-    const s = open(initialState, 'compress')
-    expect(s.options[workspaceKey('images', 'compress')].quality).toBe(80)
+  it('seeds a group with its engine tool defaults', () => {
+    const s = reducer(initialState, { type: 'setTab', tab: 'compress' })
+    const s2 = reducer(s, { type: 'setOption', group: 'image', key: 'scale', value: 50 })
+    expect(s2.options[optionsKey('compress', null, 'image')].quality).toBe(80)
   })
 
-  it('carries the PDF verb into the options, since one tool serves several ops', () => {
+  it('carries a tool card verb into its options, since one tool serves several', () => {
     // "Burst" and "Merge" are both the pdf tool; the op key is what separates them.
-    expect(defaultOptionsFor('pdf', 'split-pages').op).toBe('split-pages')
-    expect(defaultOptionsFor('pdf', 'merge').op).toBe('merge')
-    // Compress under PDF is the compress tool, so it carries no verb.
-    expect(defaultOptionsFor('pdf', 'compress').op).toBeUndefined()
+    expect(defaultOptionsFor('tools', 'pdf-burst', 'doc').op).toBe('split-pages')
+    expect(defaultOptionsFor('tools', 'pdf-merge', 'doc').op).toBe('merge')
+    // Converting an image is the plain convert tool, so it carries no verb.
+    expect(defaultOptionsFor('convert', null, 'image').op).toBeUndefined()
+    // Converting an ARCHIVE is the archive tool with op 'repack', on the same tab.
+    expect(defaultOptionsFor('convert', null, 'archive').op).toBe('repack')
   })
 })
diff --git a/test/session-persist.test.ts b/test/session-persist.test.ts
index a933588..7278964 100644
--- a/test/session-persist.test.ts
+++ b/test/session-persist.test.ts
@@ -40,7 +40,7 @@ function stateWith(items: QueueItem[]): AppState {
   return {
     ...initialState,
     queues: {
-      images: {
+      convert: {
         items,
         selected: [items[0]?.id].filter(Boolean) as string[],
         anchor: items[0]?.id ?? null
@@ -61,7 +61,7 @@ describe('session persistence round-trip', () => {
     const snap = sessionSnapshot(state, ['C:/gen/one.png'])
     const parsed = parseSession(snap)
     expect(parsed).not.toBeNull()
-    const items = parsed!.state.queues.images!.items
+    const items = parsed!.state.queues.convert!.items
     // Thumb dropped (reloadable), running settled back to ready.
     expect(items[0].thumb).toBeNull()
     expect(items[0].status).toBe('ready')
@@ -72,12 +72,18 @@ describe('session persistence round-trip', () => {
     expect(parsed!.genResults).toEqual(['C:/gen/one.png'])
   })
 
-  it('rejects a session with a mismatched version', () => {
-    const snap = sessionSnapshot(initialState, []) as Record<string, unknown>
-    expect(parseSession({ ...snap, version: 999 })).toBeNull()
+  it('rejects junk, but never a merely older session', () => {
     expect(parseSession(null)).toBeNull()
     expect(parseSession('garbage')).toBeNull()
-    expect(parseSession({ version: 1 })).not.toBeNull() // tolerant of missing optional fields
+    // A v1 blob is MIGRATED, not discarded: its files are the user's in-flight
+    // work, and losing them to an upgrade is worse than resetting settings.
+    expect(parseSession({ version: 1 })).not.toBeNull()
+    // A version from the future (a downgrade) takes the same path and yields an
+    // empty but usable session rather than crashing the window.
+    const snap = sessionSnapshot(initialState, []) as Record<string, unknown>
+    const future = parseSession({ ...snap, version: 999 })
+    expect(future).not.toBeNull()
+    expect(future!.state.tab).toBe('convert')
   })
 
   it('collects every on-disk path referenced by the session', () => {
@@ -98,40 +104,30 @@ describe('session persistence round-trip', () => {
     ])
     const exists = new Set(['C:/in/present.png', 'C:/out/present.png', 'C:/gen/keep.png'])
     const pruned = pruneMissing(state, ['C:/gen/keep.png', 'C:/gen/gone.png'], exists)
-    const ids = pruned.state.queues.images!.items.map((i) => i.id)
+    const ids = pruned.state.queues.convert!.items.map((i) => i.id)
     expect(ids).toEqual(['a', 'c']) // b (source gone) and d (output gone) dropped
     expect(pruned.genResults).toEqual(['C:/gen/keep.png'])
     // Selection/anchor are cleared on prune so they can't dangle.
-    expect(pruned.state.queues.images!.selected).toEqual([])
+    expect(pruned.state.queues.convert!.selected).toEqual([])
   })
 
-  it('always launches into the first category, whatever was open at close', () => {
-    // The category itself is not restored - only each category's sub-page is.
-    const state: AppState = { ...initialState, category: 'video', operation: 'compress' }
+  it('always launches into the first verb, whatever was open at close', () => {
+    const state: AppState = { ...initialState, tab: 'compress' }
     const parsed = parseSession(sessionSnapshot(state, []))
     expect(parsed).not.toBeNull()
-    expect(parsed!.state.category).toBe('images')
+    expect(parsed!.state.tab).toBe('convert')
   })
 
-  it("remembers each category's last sub-page, including the one open at close", () => {
-    const state: AppState = {
-      ...initialState,
-      category: 'video',
-      operation: 'compress',
-      lastOperation: { images: 'generate', video: 'compress' }
-    }
+  it('remembers the Tools card that was last open', () => {
+    const state: AppState = { ...initialState, tab: 'tools', lastTool: 'pdf-burst' }
     const parsed = parseSession(sessionSnapshot(state, []))
-    // Launches into Images ON its remembered sub-page...
-    expect(parsed!.state.category).toBe('images')
-    expect(parsed!.state.operation).toBe('generate')
-    // ...and Video's sub-page survives for when the user switches to it.
-    expect(parsed!.state.lastOperation.video).toBe('compress')
+    expect(parsed!.state.tab).toBe('convert')
+    expect(parsed!.state.lastTool).toBe('pdf-burst')
   })
 
-  it('falls back to the default operation when the remembered one is gone', () => {
-    const state: AppState = { ...initialState, lastOperation: { images: 'renamed-away' } }
+  it('forgets a Tools card that no longer exists', () => {
+    const state: AppState = { ...initialState, lastTool: 'renamed-away' }
     const parsed = parseSession(sessionSnapshot(state, []))
-    expect(parsed!.state.category).toBe('images')
-    expect(parsed!.state.operation).toBe('convert')
+    expect(parsed!.state.lastTool).toBeNull()
   })
 })
diff --git a/test/tabs-registry.test.ts b/test/tabs-registry.test.ts
new file mode 100644
index 0000000..5ea3d00
--- /dev/null
+++ b/test/tabs-registry.test.ts
@@ -0,0 +1,35 @@
+import { describe, expect, it } from 'vitest'
+import { TABS, TOOL_CARDS, engineFor } from '@shared/tabs'
+import { getTool } from '../src/main/tools/registry'
+
+// TOOLS in tools/registry.ts is a Partial<Record<ToolId, ToolModule>>, which
+// removes the compiler's exhaustiveness check: a renamed or added ToolId
+// compiles fine and fails at runtime with "Unknown tool: X". This walks the
+// UI's own navigation model and asserts every route resolves to an engine
+// module. Replaces the old catalog <-> registry check.
+//
+// 'generate' is the one deliberate exemption: generation runs on its own
+// generate:* IPC path (see App.tsx's early return), not through the job queue.
+const QUEUE_EXEMPT = new Set(['generate'])
+
+describe('tabs <-> engine registry', () => {
+  it('every verb resolves to an implemented tool module, for every kind it takes', () => {
+    for (const tab of TABS) {
+      if (tab.id === 'tools') continue // the grid itself runs nothing
+      for (const kind of tab.kinds.length ? tab.kinds : (['image'] as const)) {
+        // The Convert tab routes archives to a different engine than images, so
+        // resolve per group rather than trusting tab.tool.
+        const group = kind === 'archive' ? 'archive' : kind
+        const { tool } = engineFor(tab.id, group)
+        if (QUEUE_EXEMPT.has(tool)) continue
+        expect(getTool(tool), `tool '${tool}' (tab '${tab.id}', kind '${kind}')`).toBeDefined()
+      }
+    }
+  })
+
+  it('every tool card resolves to an implemented tool module', () => {
+    for (const c of TOOL_CARDS) {
+      expect(getTool(c.tool), `tool '${c.tool}' (card '${c.id}')`).toBeDefined()
+    }
+  })
+})

From 3111c7d7ee22a297251bed1e6cac9651be55cb92 Mon Sep 17 00:00:00 2001
From: Max <112043822+Maxaubert@users.noreply.github.com>
Date: Mon, 31 Aug 2026 14:55:04 +0200
Subject: [PATCH 04/10] chore: 0.4.0, document verb-first navigation

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01MSq6HRwmaRKAv1t2hrdkJB
---
 CLAUDE.md             |  8 +++++++-
 README.md             |  4 ++--
 e2e/smoke.spec.ts     |  6 ++++--
 e2e/workflows.spec.ts | 25 +++++++++++++++----------
 package.json          |  2 +-
 5 files changed, 29 insertions(+), 16 deletions(-)

diff --git a/CLAUDE.md b/CLAUDE.md
index bbe434a..7bb0466 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -19,6 +19,11 @@ PowerShell scripts (`../RCMM/manager/src/RCMM/`), lifted into a real GUI app.
 
 ## Design process — READ THIS
 
+Navigation is VERB-first: the rail is Convert / Compress / Resize / Upscale /
+Remove BG / Generate / Tools, each owning one queue that may hold several
+convert groups at once. A selection never spans two convert groups, because one
+options panel can only describe one target set. See `src/shared/tabs.ts`.
+
 **The look is designed collaboratively with the owner. Make NO visual assumptions.**
 Before building or restyling any UI, present mockups (self-contained browser HTML, like the
 RCMM Show/Hide exploration), offer options, and iterate to explicit sign-off. This covers
@@ -53,7 +58,8 @@ src/
     (planned) ipc.ts           renderer <-> engine wiring
   preload/     contextBridge — the typed `window.filesmith` API
   renderer/    React UI (placeholder until designed)
-  shared/      (planned) types.ts — Job, ToolId, FileKind, Options, progress events
+  shared/      types.ts — Job, ToolId, FileKind, Options, progress events
+               tabs.ts  — the VERB-first navigation model (rail tabs + Tools cards)
 resources/bin/ bundled CLI binaries (gitignored; fetched by scripts, packed by electron-builder)
 ```
 
diff --git a/README.md b/README.md
index 5888af3..52de6c7 100644
--- a/README.md
+++ b/README.md
@@ -31,7 +31,7 @@ A local file toolkit for Windows. Drop files, pick a tool, get results.
 
 ## What it is
 
-Filesmith puts the everyday file jobs behind one clean window: convert, compress, resize, and more, across **images, video, audio, PDFs, documents, and archives**. Drop a pile of files, pick a tool, and it runs the batch with thumbnails, live per-file progress, rich previews, and collision-safe output that never overwrites your originals.
+Filesmith puts the everyday file jobs behind one clean window. Pick **what you want done** - convert, compress, resize, and more - then drop files of any supported type: **images, video, audio, PDFs, documents, and archives**. Drop a pile of files, pick a tool, and it runs the batch with thumbnails, live per-file progress, rich previews, and collision-safe output that never overwrites your originals.
 
 Everything runs **locally on your machine**, and your queue and produced files are **remembered across restarts**, so you can close the app mid-batch and pick up where you left off.
 
@@ -66,7 +66,7 @@ Download **`Filesmith-Setup-x64-<version>.exe`** from the [latest release](https
 ## Use
 
 1. Open **Filesmith** from the Start menu.
-2. Pick a file type in the left rail (Images, Video, Audio, PDF, Documents, Archives).
+2. Pick what you want to do in the left rail (Convert, Compress, Resize, Upscale, Remove BG, Generate, Tools).
 3. Choose a tool from the top-right (Convert, Compress, Resize, …), set its options.
 4. Drop files onto the drop zone (or click **browse**), then run.
 
diff --git a/e2e/smoke.spec.ts b/e2e/smoke.spec.ts
index 21a6cf4..befb12b 100644
--- a/e2e/smoke.spec.ts
+++ b/e2e/smoke.spec.ts
@@ -71,8 +71,10 @@ function runJob(tool: string, input: string, options: Record<string, unknown>):
   )
 }
 
-test('the app boots to the Images workspace', async () => {
-  await expect(page.locator('text=Images').first()).toBeVisible()
+test('the app boots to the Convert workspace', async () => {
+  // The rail names the verb, so the app opens on the first one rather than on
+  // a file type.
+  await expect(page.locator('h1', { hasText: 'Convert' }).first()).toBeVisible()
   // The primary action is on screen without scrolling (the pinned footer).
   await expect(page.locator('button', { hasText: 'Convert' }).last()).toBeVisible()
 })
diff --git a/e2e/workflows.spec.ts b/e2e/workflows.spec.ts
index 0f667d9..d5b6a2e 100644
--- a/e2e/workflows.spec.ts
+++ b/e2e/workflows.spec.ts
@@ -169,24 +169,26 @@ test.afterAll(async () => {
 
 // --- UI navigation -----------------------------------------------------------
 
+/** Tools remembers the card you last had open (and that survives a restart via
+ * session.json), so reaching the grid means backing out of any open tool. */
+async function openToolsGrid(p: Page): Promise<void> {
+  await p.locator('button:has-text("Tools")').first().click()
+  const back = p.locator('button[aria-label="Back to Tools"]')
+  if (await back.count()) await back.first().click()
+  await expect(p.locator('h1', { hasText: 'Tools' }).first()).toBeVisible()
+}
+
 test('the rail lists every verb and opens its workspace', async () => {
-  for (const verb of [
-    'Convert',
-    'Compress',
-    'Resize',
-    'Upscale',
-    'Remove BG',
-    'Generate',
-    'Tools'
-  ]) {
+  for (const verb of ['Convert', 'Compress', 'Resize', 'Upscale', 'Remove BG', 'Generate']) {
     await page.locator(`button:has-text("${verb}")`).first().click()
     await expect(page.locator('h1', { hasText: verb }).first()).toBeVisible()
   }
+  await openToolsGrid(page)
   await page.locator('button:has-text("Convert")').first().click()
 })
 
 test('Tools groups its one-off verbs and opens one as a workspace', async () => {
-  await page.locator('button:has-text("Tools")').first().click()
+  await openToolsGrid(page)
   for (const t of ['Extract text', 'Merge', 'Burst', 'Archive to PDF', 'PDF to CBZ']) {
     await expect(page.locator(`text=${t}`).first()).toBeVisible()
   }
@@ -194,6 +196,9 @@ test('Tools groups its one-off verbs and opens one as a workspace', async () =>
   // A tool workspace is an ordinary queue titled with the tool's name.
   await expect(page.locator('h1', { hasText: 'Merge' }).first()).toBeVisible()
   await expect(page.locator('text=Input').first()).toBeVisible()
+  // Back returns to the grid, which is the app's only second level.
+  await page.locator('button[aria-label="Back to Tools"]').first().click()
+  await expect(page.locator('h1', { hasText: 'Tools' }).first()).toBeVisible()
   await page.locator('button:has-text("Convert")').first().click()
 })
 
diff --git a/package.json b/package.json
index 3a8d8f8..476c3e4 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "filesmith",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "A desktop file toolkit: convert, compress, resize, upscale, remove backgrounds, and PDF tools.",
   "author": "Max",
   "license": "MIT",

From 6d5fee0c571f6a668a788cc53922c710fc8496c4 Mon Sep 17 00:00:00 2001
From: Max <112043822+Maxaubert@users.noreply.github.com>
Date: Mon, 31 Aug 2026 15:04:47 +0200
Subject: [PATCH 05/10] fix(nav): give each Tools card its own glyph

Reusing convert/resize/upscale made Split, Burst and Extract read as the same
action at a glance. Unpack and pack now differ by arrow direction.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01MSq6HRwmaRKAv1t2hrdkJB
---
 src/renderer/src/components/Icon.tsx | 16 ++++++++++++++++
 src/shared/tabs.ts                   | 14 +++++++-------
 2 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/src/renderer/src/components/Icon.tsx b/src/renderer/src/components/Icon.tsx
index d6961cd..594fc1d 100644
--- a/src/renderer/src/components/Icon.tsx
+++ b/src/renderer/src/components/Icon.tsx
@@ -9,6 +9,13 @@ export type IconName =
   | 'pdf'
   | 'archive'
   | 'tools'
+  | 'merge'
+  | 'split'
+  | 'burst'
+  | 'pull'
+  | 'unpack'
+  | 'topdf'
+  | 'tocbz'
   | 'upload'
   | 'check'
   | 'clock'
@@ -62,6 +69,15 @@ const PATHS: Record<IconName, JSX.Element> = {
   pdf: <path d="M14 3.5H7a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8.5zM14 3.5v5h5" />,
   archive: <path d="M3.5 5.5h17v4h-17zM5.5 9.5v9h13v-9M10 13h4" />,
   tools: <path d="M14.5 3.5a4.5 4.5 0 0 0 6 6L10 20a3 3 0 0 1-4-4z" />,
+  // One glyph per tool card: reusing convert/resize/upscale here made Split,
+  // Burst and Extract read as the same action at a glance.
+  merge: <path d="M5 5v6a3 3 0 0 0 3 3h11M5 19v-6M15 10l4 4-4 4" />,
+  split: <path d="M19 5v6a3 3 0 0 1-3 3H5M9 10l-4 4 4 4M19 19v-6" />,
+  burst: <path d="M4 4h9v9H4zM11 11h9v9h-9" />,
+  pull: <path d="M12 3v10M8.5 9.5 12 13l3.5-3.5M4.5 17v3h15v-3" />,
+  unpack: <path d="M3.5 5.5h17v4h-17zM5.5 9.5v9h13v-9M9 13.5l3 3 3-3" />,
+  topdf: <path d="M4 4.5h9l4 4v11H4zM13 4.5v4h4M8 15h8" />,
+  tocbz: <path d="M3.5 6.5h17v4h-17zM5.5 10.5v8h13v-8M12 17v-4M10 14.5l2-2 2 2" />,
   upload: <path d="M12 16V4M7.5 8.5 12 4l4.5 4.5M4 20h16" />,
   check: <path d="M4.5 12.5 9 17 19.5 6.5" />,
   clock: (
diff --git a/src/shared/tabs.ts b/src/shared/tabs.ts
index 86d4154..d65dc56 100644
--- a/src/shared/tabs.ts
+++ b/src/shared/tabs.ts
@@ -136,7 +136,7 @@ export const TOOL_CARDS: ToolCard[] = [
     desc: 'Combine PDFs into one',
     group: 'PDF',
     color: '#ef4444',
-    icon: 'convert',
+    icon: 'merge',
     tool: 'pdf',
     opKey: 'merge',
     kinds: ['pdf']
@@ -147,7 +147,7 @@ export const TOOL_CARDS: ToolCard[] = [
     desc: 'Keep only the pages you list',
     group: 'PDF',
     color: '#ef4444',
-    icon: 'resize',
+    icon: 'split',
     tool: 'pdf',
     opKey: 'split-range',
     kinds: ['pdf']
@@ -158,7 +158,7 @@ export const TOOL_CARDS: ToolCard[] = [
     desc: 'Save every page separately',
     group: 'PDF',
     color: '#ef4444',
-    icon: 'upscale',
+    icon: 'burst',
     tool: 'pdf',
     opKey: 'split-pages',
     kinds: ['pdf']
@@ -169,7 +169,7 @@ export const TOOL_CARDS: ToolCard[] = [
     desc: 'Pull out embedded images',
     group: 'PDF',
     color: '#ef4444',
-    icon: 'removebg',
+    icon: 'pull',
     tool: 'pdf',
     opKey: 'extract-images',
     kinds: ['pdf']
@@ -180,7 +180,7 @@ export const TOOL_CARDS: ToolCard[] = [
     desc: 'Unpack into a folder',
     group: 'Archives',
     color: '#a16207',
-    icon: 'resize',
+    icon: 'unpack',
     tool: 'archive',
     opKey: 'extract',
     kinds: ['archive']
@@ -191,7 +191,7 @@ export const TOOL_CARDS: ToolCard[] = [
     desc: 'Comic archive becomes a PDF',
     group: 'Archives',
     color: '#a16207',
-    icon: 'pdf',
+    icon: 'topdf',
     tool: 'archive',
     opKey: 'to-pdf',
     kinds: ['archive']
@@ -202,7 +202,7 @@ export const TOOL_CARDS: ToolCard[] = [
     desc: 'Pack pages as a comic archive',
     group: 'Archives',
     color: '#a16207',
-    icon: 'archive',
+    icon: 'tocbz',
     tool: 'archive',
     opKey: 'from-pdf',
     kinds: ['pdf']

From 0c18ef54d8e77ddf083d7c821cc642b6cd1d012d Mon Sep 17 00:00:00 2001
From: Max <112043822+Maxaubert@users.noreply.github.com>
Date: Mon, 31 Aug 2026 15:21:32 +0200
Subject: [PATCH 06/10] fix(nav): honour the one-group rule on ctrl+click, and
 name groups not files

Self-testing the real UI with files in it found three things:

- ctrl+click on a row from another group did NOTHING. App.tsx still swallowed
  the click with the old guard, contradicting the reducer (which moves the
  selection) and the approved design. The reducer owns the rule; the guard is
  gone.
- The scope chip named the file KIND, so a pdf plus a txt read as '2 PDFs'
  when it runs as one document batch. It now names the convert group.
- The Run button said 'Convert 2 files', which in a mixed queue hides which
  two. It now says 'Convert 2 images'.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01MSq6HRwmaRKAv1t2hrdkJB
---
 src/renderer/src/App.tsx                     | 11 ++---
 src/renderer/src/components/OptionsPanel.tsx | 47 +++++++-------------
 src/renderer/src/components/queueGroups.ts   | 19 ++++++++
 test/group-naming.test.ts                    | 39 ++++++++++++++++
 4 files changed, 78 insertions(+), 38 deletions(-)
 create mode 100644 test/group-naming.test.ts

diff --git a/src/renderer/src/App.tsx b/src/renderer/src/App.tsx
index 1494ae9..d473c4e 100644
--- a/src/renderer/src/App.tsx
+++ b/src/renderer/src/App.tsx
@@ -348,13 +348,9 @@ export default function App(): JSX.Element {
   function onItemClick(id: string, e: MouseEvent): void {
     const item = cur.items.find((i) => i.id === id)
     if (!item) return
-    const modified = e.shiftKey || e.ctrlKey || e.metaKey
-    if (modified) {
-      // Multi-select stays within one convert group (docs/text/pdf batch
-      // together): ignore modified clicks on files from another group.
-      const anchor = selectedItems.length ? effectiveFile(selectedItems[0]) : effectiveFile(item)
-      if (groupOf(effectiveFile(item)) !== groupOf(anchor)) return
-    }
+    // The one-group rule lives in the reducer, which MOVES the selection to a
+    // file from another group rather than extending into it. Swallowing the
+    // click here instead made ctrl+click on a dimmed row do nothing at all.
     const mode: SelectMode = e.shiftKey ? 'range' : e.ctrlKey || e.metaKey ? 'toggle' : 'single'
     dispatch({ type: 'select', id, mode })
   }
@@ -1028,6 +1024,7 @@ export default function App(): JSX.Element {
               options={curOptions}
               activeKind={activeKind}
               activeGroup={activeGroup}
+              optGroup={optGroup}
               runKind={runKind}
               fallbackKind={fallbackKind}
               videoOutputs={videoOutputs}
diff --git a/src/renderer/src/components/OptionsPanel.tsx b/src/renderer/src/components/OptionsPanel.tsx
index 0e21ff9..50d48f0 100644
--- a/src/renderer/src/components/OptionsPanel.tsx
+++ b/src/renderer/src/components/OptionsPanel.tsx
@@ -24,6 +24,7 @@ import { GEN_SIZES, GEN_STYLES, GEN_MAX_COUNT, clampDim } from '@shared/generate
 import { archInfoFor, type GenArch, type GenModel } from '@shared/genArch'
 import { Icon } from './Icon'
 import type { ToolId } from '@shared/types'
+import { GROUP_COLOR, groupNoun } from './queueGroups'
 import { PidInstallCard } from './PidUpscale'
 import { usePidStatus } from './usePidStatus'
 import { ComfyImportCard } from './ComfyImport'
@@ -1629,49 +1630,30 @@ function GenerateOptions({
   )
 }
 
-const KIND_COLOR: Record<string, string> = {
-  image: '#5b5bd6',
-  video: '#e0483d',
-  audio: '#f5920b',
-  pdf: '#ef4444',
-  document: '#12b3a6',
-  text: '#12b3a6',
-  archive: '#a16207',
-  other: '#6e6e73'
-}
-const KIND_NOUN: Record<string, (n: number) => string> = {
-  image: (n) => `${n} image${n === 1 ? '' : 's'}`,
-  video: (n) => `${n} video${n === 1 ? '' : 's'}`,
-  audio: (n) => `${n} audio file${n === 1 ? '' : 's'}`,
-  pdf: (n) => `${n} PDF${n === 1 ? '' : 's'}`,
-  document: (n) => `${n} document${n === 1 ? '' : 's'}`,
-  text: (n) => `${n} text file${n === 1 ? '' : 's'}`,
-  archive: (n) => `${n} archive${n === 1 ? '' : 's'}`,
-  other: (n) => `${n} file${n === 1 ? '' : 's'}`
-}
-
 /** What these settings will act on. The queue can hold images and video at the
- * same time, so "Run" has to say which of them it means. */
+ * same time, so Run has to say which of them it means. Named by CONVERT GROUP,
+ * not file kind: a pdf plus a txt is "2 documents", because they run as one
+ * batch under one target set. */
 function ScopeChip({
-  kind,
+  group,
   count,
   known
 }: {
-  kind: FileKind
+  group: string
   count: number
   known: boolean
 }): JSX.Element {
-  const noun = (KIND_NOUN[kind] ?? KIND_NOUN.other)(count)
   return (
     <div className="flex items-start gap-2.5 rounded-xl bg-black/[.035] px-3 py-2.5">
       <span
         className="mt-px h-[18px] w-[18px] shrink-0 rounded-md"
-        style={{ background: KIND_COLOR[kind] ?? KIND_COLOR.other }}
+        style={{ background: GROUP_COLOR[group] ?? '#6e6e73' }}
       />
       <span className="text-[12.5px] font-medium leading-snug text-muted">
         {known && count > 0 ? (
           <>
-            Applies to the <span className="font-bold text-ink">{noun}</span> selected.
+            Applies to the <span className="font-bold text-ink">{groupNoun(group, count)}</span>{' '}
+            selected.
           </>
         ) : (
           <>Select files to choose what these settings apply to.</>
@@ -1687,6 +1669,7 @@ export function OptionsPanel({
   options,
   activeKind,
   activeGroup,
+  optGroup,
   runKind,
   fallbackKind,
   videoOutputs,
@@ -1706,6 +1689,8 @@ export function OptionsPanel({
   activeKind: FileKind | null
   /** The selected convert group, or null with nothing selected. */
   activeGroup: string | null
+  /** The group the options actually belong to (falls back when nothing is selected). */
+  optGroup: string
   runKind: FileKind | null
   /** The kind to show options for when nothing is selected: the category's own. */
   fallbackKind: FileKind
@@ -1741,7 +1726,7 @@ export function OptionsPanel({
           instead is WHICH files its settings apply to, because one tab's queue
           can hold several convert groups at once. */}
       <div className="px-[22px] pt-6">
-        <ScopeChip kind={activeKind ?? fallbackKind} count={runCount} known={activeGroup != null} />
+        <ScopeChip group={optGroup} count={runCount} known={activeGroup != null} />
         <div className="mt-5 h-px bg-black/[.07]" />
       </div>
       <div className="scroll-thin flex min-h-0 flex-1 flex-col gap-5 overflow-y-auto px-[22px] py-5">
@@ -1787,9 +1772,9 @@ export function OptionsPanel({
           className="w-full rounded-[13px] bg-accent py-3.5 text-[15px] font-semibold text-white shadow-[0_8px_20px_rgba(0,0,0,.20)] transition hover:bg-accent-hi disabled:cursor-not-allowed disabled:opacity-45 disabled:shadow-none"
         >
           {label}
-          {tool !== 'generate' && runCount > 0
-            ? ` ${runCount} file${runCount === 1 ? '' : 's'}`
-            : ''}
+          {/* Name the GROUP, not "files": in a mixed queue "Convert 2 files"
+              hides which two. */}
+          {tool !== 'generate' && runCount > 0 ? ` ${groupNoun(optGroup, runCount)}` : ''}
         </button>
       </div>
     </aside>
diff --git a/src/renderer/src/components/queueGroups.ts b/src/renderer/src/components/queueGroups.ts
index be853ab..f8a4931 100644
--- a/src/renderer/src/components/queueGroups.ts
+++ b/src/renderer/src/components/queueGroups.ts
@@ -26,6 +26,25 @@ const GROUP_LABEL: Record<string, string> = {
   archive: 'Archives'
 }
 
+/** The dot colour beside a group's name in the options panel. */
+export const GROUP_COLOR: Record<string, string> = {
+  image: '#5b5bd6',
+  video: '#e0483d',
+  audio: '#f5920b',
+  doc: '#12b3a6',
+  sheet: '#12b3a6',
+  slide: '#12b3a6',
+  archive: '#a16207'
+}
+
+/** "2 images" / "1 document" / "3 archives". Named by CONVERT GROUP, not file
+ * kind: a pdf plus a txt is "2 documents", because they run as one batch and
+ * the options panel describes them as one. */
+export function groupNoun(group: string, n: number): string {
+  const f = GROUP_NOUN[group]
+  return f ? f(n) : `${n} file${n === 1 ? '' : 's'}`
+}
+
 export interface ItemGroup {
   group: string
   label: string
diff --git a/test/group-naming.test.ts b/test/group-naming.test.ts
new file mode 100644
index 0000000..fde2185
--- /dev/null
+++ b/test/group-naming.test.ts
@@ -0,0 +1,39 @@
+import { describe, expect, it } from 'vitest'
+import { GROUP_COLOR, groupNoun } from '../src/renderer/src/components/queueGroups'
+
+// The options panel and the Run button both describe a CONVERT GROUP, not a
+// file kind. Naming by kind said "2 PDFs" for a pdf-plus-txt selection that
+// actually runs as one document batch, and the Run button said "2 files",
+// which in a mixed queue hides which two.
+
+describe('groupNoun', () => {
+  it('names a document batch by its group, not by the first file kind', () => {
+    expect(groupNoun('doc', 2)).toBe('2 documents')
+    expect(groupNoun('doc', 1)).toBe('1 document')
+  })
+
+  it('gets every plural right, including the one that is not a plural', () => {
+    expect(groupNoun('image', 1)).toBe('1 image')
+    expect(groupNoun('image', 4)).toBe('4 images')
+    expect(groupNoun('video', 1)).toBe('1 video')
+    expect(groupNoun('video', 2)).toBe('2 videos')
+    // "2 audios" is not English; the noun carries the word "file".
+    expect(groupNoun('audio', 2)).toBe('2 audio files')
+    expect(groupNoun('archive', 3)).toBe('3 archives')
+    expect(groupNoun('sheet', 2)).toBe('2 spreadsheets')
+    expect(groupNoun('slide', 1)).toBe('1 slide deck')
+  })
+
+  it('falls back to a plain file count for an unknown group', () => {
+    expect(groupNoun('mystery', 1)).toBe('1 file')
+    expect(groupNoun('mystery', 3)).toBe('3 files')
+  })
+})
+
+describe('GROUP_COLOR', () => {
+  it('colours every group the queue can produce', () => {
+    for (const g of ['image', 'video', 'audio', 'doc', 'sheet', 'slide', 'archive']) {
+      expect(GROUP_COLOR[g], g).toMatch(/^#[0-9a-f]{6}$/i)
+    }
+  })
+})

From e4799afb2a64bbb52595e64458cff82f43e8cfd3 Mon Sep 17 00:00:00 2001
From: Max <112043822+Maxaubert@users.noreply.github.com>
Date: Mon, 31 Aug 2026 15:55:08 +0200
Subject: [PATCH 07/10] feat(nav): archive work becomes ordinary Convert; trim
 the options panel

Owner feedback:
- Tools always opens its grid. Landing back inside the last card hid every
  other tool.
- The scope banner is gone, and options no longer appear at all until files
  are selected. Offering PNG/JPG targets with an empty queue invited a choice
  that could not be acted on.
- Archive to PDF, PDF to CBZ and archive repack are Converts, not Tools: they
  turn a file into another file, which is what people go to Convert for. The
  Archives section and the Extract card are gone from Tools.
- Both directions now exist: a PDF offers comic containers, an archive offers
  PDF, and either still offers its own family.
- The window holds up at its 900x580 minimum: the queue was squeezed until
  filenames truncated to one letter, and the drop zone kept 212px it did not
  need once files existed.

Routing now depends on the TARGET as well as the source, and targets are the
intersection across the selection so a pdf+docx pair never offers CBZ. The
page-render quality is pageQuality, not quality: one option bag can now reach
either the convert tool (where quality is a preset STRING) or the archive
tool, and Number of 'balanced' is NaN.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01MSq6HRwmaRKAv1t2hrdkJB
---
 e2e/workflows.spec.ts                        |  12 +-
 src/main/tools/registry.ts                   |   5 +-
 src/renderer/src/App.tsx                     |  43 +++--
 src/renderer/src/components/DropZone.tsx     |  20 +-
 src/renderer/src/components/OptionsPanel.tsx | 193 +++++++++++++------
 src/renderer/src/components/TabRail.tsx      |   2 +-
 src/renderer/src/state.ts                    |  43 ++++-
 src/shared/convert.ts                        |  45 ++++-
 src/shared/tabs.ts                           |  54 ++----
 test/archive-live.test.ts                    |   2 +-
 test/convert-archive-targets.test.ts         |  94 +++++++++
 test/queues.test.ts                          |  11 +-
 test/tabs.test.ts                            |  40 ++--
 13 files changed, 413 insertions(+), 151 deletions(-)
 create mode 100644 test/convert-archive-targets.test.ts

diff --git a/e2e/workflows.spec.ts b/e2e/workflows.spec.ts
index d5b6a2e..58461a7 100644
--- a/e2e/workflows.spec.ts
+++ b/e2e/workflows.spec.ts
@@ -169,12 +169,9 @@ test.afterAll(async () => {
 
 // --- UI navigation -----------------------------------------------------------
 
-/** Tools remembers the card you last had open (and that survives a restart via
- * session.json), so reaching the grid means backing out of any open tool. */
+/** Tools always opens on its grid, however you last left it. */
 async function openToolsGrid(p: Page): Promise<void> {
   await p.locator('button:has-text("Tools")').first().click()
-  const back = p.locator('button[aria-label="Back to Tools"]')
-  if (await back.count()) await back.first().click()
   await expect(p.locator('h1', { hasText: 'Tools' }).first()).toBeVisible()
 }
 
@@ -189,9 +186,12 @@ test('the rail lists every verb and opens its workspace', async () => {
 
 test('Tools groups its one-off verbs and opens one as a workspace', async () => {
   await openToolsGrid(page)
-  for (const t of ['Extract text', 'Merge', 'Burst', 'Archive to PDF', 'PDF to CBZ']) {
+  for (const t of ['Extract text', 'Pages to PNG', 'Merge', 'Split', 'Burst']) {
     await expect(page.locator(`text=${t}`).first()).toBeVisible()
   }
+  // Archive work is an ordinary Convert now, not a tool hidden in here.
+  await expect(page.locator('text=Archive to PDF')).toHaveCount(0)
+  await expect(page.locator('text=PDF to CBZ')).toHaveCount(0)
   await page.locator('button:has-text("Merge")').first().click()
   // A tool workspace is an ordinary queue titled with the tool's name.
   await expect(page.locator('h1', { hasText: 'Merge' }).first()).toBeVisible()
@@ -579,7 +579,7 @@ test('pdf to-cbz: pages are zero-padded jpegs so a reader orders them correctly'
     format: '.cbz',
     dpi: 72,
     pageFormat: 'jpg',
-    quality: 80
+    pageQuality: 80
   })
   expect(e.status).toBe('done')
   expect(e.outputPath!.endsWith('.cbz')).toBe(true)
diff --git a/src/main/tools/registry.ts b/src/main/tools/registry.ts
index 782a7fd..d68e63d 100644
--- a/src/main/tools/registry.ts
+++ b/src/main/tools/registry.ts
@@ -1295,7 +1295,10 @@ const archiveTool: ToolModule = {
       assertRarTarget(targetExt)
       const dpi = Math.max(36, Math.min(600, Number(options.dpi ?? 150)))
       const pageFormat = String(options.pageFormat ?? 'jpg')
-      const quality = Math.max(1, Math.min(100, Number(options.quality ?? 85)))
+      // `pageQuality`, not `quality`: on the Convert tab one option bag can
+      // reach either the convert tool (quality is a preset STRING) or this
+      // one, and Number('balanced') is NaN.
+      const quality = Math.max(1, Math.min(100, Number(options.pageQuality ?? 85)))
 
       // Always a neutral temp dir, so mutool draw's printf `-o` pattern can
       // never expand a `%` inherited from the source file's name.
diff --git a/src/renderer/src/App.tsx b/src/renderer/src/App.tsx
index d473c4e..e7cfbc0 100644
--- a/src/renderer/src/App.tsx
+++ b/src/renderer/src/App.tsx
@@ -12,9 +12,9 @@ import type { FileInfo, FileKind, PreviewItem } from '@shared/types'
 import {
   canCompress,
   convertGroup,
-  familyFormats,
   isSameFormat,
   normalizeExt,
+  sharedTargets,
   toolForKind
 } from '@shared/convert'
 import {
@@ -297,16 +297,23 @@ export default function App(): JSX.Element {
   // options panel can still show what it would do.
   const fallbackKind: FileKind = tab.kinds[0] ?? card?.kinds[0] ?? 'image'
   const optGroup = activeGroup ?? convertGroup(fallbackKind, '')
-  // The engine is resolved per group: the Convert tab runs the archive tool for
-  // a .cbz and the convert tool for everything else.
-  const engine = engineFor(state.tab, optGroup, card)
-  const tool = engine.tool
-  const curOptions = state.options[optionsKey(state.tab, state.activeTool, optGroup)] ?? {
-    ...defaultOptionsFor(state.tab, state.activeTool, optGroup)
-  }
   const srcNorms = new Set(selEff.map((f) => normalizeExt(f.ext)))
   const srcExts = [...srcNorms] // every selected source format (for greying targets)
   const sourceExt: string | null = srcNorms.size === 1 ? [...srcNorms][0] : null
+  const optKey = optionsKey(state.tab, state.activeTool, optGroup)
+  const curOptions =
+    state.options[optKey] ?? defaultOptionsFor(state.tab, state.activeTool, optGroup)
+  // On Convert the engine depends on the TARGET as well as the source: a .cbz
+  // to .cb7 is archive/repack, a .pdf to .cbz is archive/from-pdf, and a .png
+  // to .webp is the plain convert tool.
+  const engine = engineFor(
+    state.tab,
+    optGroup,
+    card,
+    activeKind && sourceExt ? { kind: activeKind, ext: sourceExt } : undefined,
+    String(curOptions.format ?? '')
+  )
+  const tool = engine.tool
 
   // A source is runnable when idle (incl. already-done, so it can run again); a
   // result is always runnable — running it promotes its output back to input.
@@ -322,9 +329,11 @@ export default function App(): JSX.Element {
     // against the selected group: Run only ever acts on one group.
     if (!accepts(f.kind)) return false
     if (activeGroup && groupOf(f) !== activeGroup) return false
-    if (tool === 'convert') {
+    if (state.tab === 'convert') {
       const fmt = String(curOptions.format ?? '')
-      return toolForKind(f.kind) != null && !isSameFormat(f.ext, fmt)
+      if (isSameFormat(f.ext, fmt)) return false
+      // Archive work routes to the archive tool, which has no toolForKind entry.
+      return tool === 'archive' || toolForKind(f.kind) != null
     }
     if (tool === 'compress') return canCompress(f.kind, f.ext)
     return true
@@ -335,7 +344,7 @@ export default function App(): JSX.Element {
   useEffect(() => {
     if (!activeKind || tool !== 'convert') return
     const fmt = String(curOptions.format ?? '')
-    const opts = familyFormats(activeKind, sourceExt ?? '')
+    const opts = sharedTargets(activeKind, srcExts)
     const isSource = (ext: string): boolean => srcExts.some((e) => isSameFormat(ext, e))
     const valid = opts.some((f) => f.ext === fmt) && !isSource(fmt)
     if (!valid) {
@@ -345,6 +354,15 @@ export default function App(): JSX.Element {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [activeKind, sourceExt, srcExts.join('|'), curOptions.format, tool])
 
+  // The chosen target decides the verb (repack / to-pdf / from-pdf), so keep the
+  // stored op in step with it. Without this a .cbz switched to .pdf would still
+  // run 'repack' and write a .pdf that is really a zip.
+  useEffect(() => {
+    if (state.tab !== 'convert' || !engine.op) return
+    if (curOptions.op === engine.op) return
+    dispatch({ type: 'setOption', group: optGroup, key: 'op', value: engine.op })
+  }, [engine.op, curOptions.op, optGroup, state.tab])
+
   function onItemClick(id: string, e: MouseEvent): void {
     const item = cur.items.find((i) => i.id === id)
     if (!item) return
@@ -894,7 +912,7 @@ export default function App(): JSX.Element {
 
         <>
           <section
-            className="flex min-w-0 flex-1 flex-col gap-4 px-7 pb-5 pt-1"
+            className="flex min-w-0 flex-1 flex-col gap-3 px-4 pb-4 pt-1 lg:gap-4 lg:px-7 lg:pb-5"
             onDragOver={(e) => {
               e.preventDefault()
               if (tool !== 'generate' && !onToolsGrid) setDragging(true)
@@ -1019,6 +1037,7 @@ export default function App(): JSX.Element {
 
           {!onToolsGrid && (
             <OptionsPanel
+              tab={state.tab}
               tool={tool}
               label={card ? card.label : tab.label}
               options={curOptions}
diff --git a/src/renderer/src/components/DropZone.tsx b/src/renderer/src/components/DropZone.tsx
index 11ff8dd..c22be9c 100644
--- a/src/renderer/src/components/DropZone.tsx
+++ b/src/renderer/src/components/DropZone.tsx
@@ -19,18 +19,30 @@ export function DropZone({
     <button
       onClick={onBrowse}
       className={`no-drag flex flex-col items-center justify-center gap-3 rounded-[18px] border-[1.5px] text-center transition ${
-        grow ? 'min-h-0 flex-1' : 'min-h-[212px] shrink-0'
+        grow ? 'min-h-0 flex-1' : 'min-h-[104px] shrink-0 lg:min-h-[150px]'
       } ${
         dragging
           ? 'border-accent bg-accent-soft'
           : 'border-[#d8d8e2] bg-white/60 hover:border-accent hover:bg-accent-soft'
       }`}
     >
-      <span className="grid h-16 w-16 place-items-center rounded-[18px] bg-gradient-to-br from-accent-soft to-[#e3e3fb] shadow-[inset_0_0_0_1px_rgba(91,91,214,.15)]">
-        <Icon name="upload" className="h-[30px] w-[30px] text-accent" strokeWidth={1.8} />
+      {/* The icon is the empty state's anchor; once files exist the zone is a
+          slim target and the glyph would just eat the queue's room. */}
+      <span
+        className={`grid place-items-center rounded-[18px] bg-gradient-to-br from-accent-soft to-[#e3e3fb] shadow-[inset_0_0_0_1px_rgba(91,91,214,.15)] ${
+          grow ? 'h-16 w-16' : 'hidden h-11 w-11 lg:grid'
+        }`}
+      >
+        <Icon
+          name="upload"
+          className={grow ? 'h-[30px] w-[30px] text-accent' : 'h-[22px] w-[22px] text-accent'}
+          strokeWidth={1.8}
+        />
       </span>
       <div>
-        <div className="text-[21px] font-bold">{label}</div>
+        <div className={grow ? 'text-[21px] font-bold' : 'text-[16px] font-bold lg:text-[19px]'}>
+          {label}
+        </div>
         <div className="mt-0.5 text-sm text-muted">
           or <span className="font-semibold text-accent">browse</span>
         </div>
diff --git a/src/renderer/src/components/OptionsPanel.tsx b/src/renderer/src/components/OptionsPanel.tsx
index 50d48f0..1dd1e7b 100644
--- a/src/renderer/src/components/OptionsPanel.tsx
+++ b/src/renderer/src/components/OptionsPanel.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useRef, useState, type CSSProperties, type JSX } from 'react'
 import type { FileKind, JobOptions } from '@shared/types'
-import { familyFormats, isSameFormat, type FormatOption } from '@shared/convert'
+import { familyFormats, isSameFormat, sharedTargets, type FormatOption } from '@shared/convert'
 import {
   AUDIO_BITRATES,
   AUDIO_CODECS,
@@ -18,13 +18,14 @@ import {
   type UpscaleModel
 } from '@shared/compress'
 import { ARCHIVE_FORMATS, COMIC_FORMATS, needsRar } from '@shared/archive'
+import type { TabId } from '@shared/tabs'
 import { RESIZE_FITS, type ResizeFit } from '@shared/resize'
 import { BG_DEFAULTS, BG_FILLS, type BgFill } from '@shared/removebg'
 import { GEN_SIZES, GEN_STYLES, GEN_MAX_COUNT, clampDim } from '@shared/generate'
 import { archInfoFor, type GenArch, type GenModel } from '@shared/genArch'
 import { Icon } from './Icon'
 import type { ToolId } from '@shared/types'
-import { GROUP_COLOR, groupNoun } from './queueGroups'
+import { groupNoun } from './queueGroups'
 import { PidInstallCard } from './PidUpscale'
 import { usePidStatus } from './usePidStatus'
 import { ComfyImportCard } from './ComfyImport'
@@ -93,16 +94,25 @@ function ConvertOptions({
   activeKind,
   sourceExt,
   srcExts,
+  verb,
+  hasRar,
   set
 }: {
   options: JobOptions
   activeKind: FileKind | null
   sourceExt: string | null
   srcExts: string[]
-  set: (k: string, v: string | number) => void
+  /** The archive verb this target resolves to, if any: repack / to-pdf / from-pdf. */
+  verb?: string
+  hasRar: boolean
+  set: (k: string, v: string | number | boolean) => void
 }): JSX.Element {
   const kind = activeKind ?? 'image'
-  const formats = familyFormats(kind, sourceExt ?? '')
+  // Targets valid for EVERY selected source, so a mixed pdf+docx selection
+  // never offers CBZ (which only the pdf could do).
+  const formats = srcExts.length
+    ? sharedTargets(kind, srcExts)
+    : familyFormats(kind, sourceExt ?? '')
   return (
     <>
       <div>
@@ -111,13 +121,21 @@ function ConvertOptions({
           {formats.map((f) => {
             // Grey out (and block) any format a selected source already is: with
             // a PNG + JPEG selection, neither PNG nor JPEG is a valid target.
-            const disabled = srcExts.some((e) => isSameFormat(f.ext, e))
+            const isSource = srcExts.some((e) => isSameFormat(f.ext, e))
+            const noRar = needsRar(f.ext) && !hasRar
+            const disabled = isSource || noRar
             const sel = options.format === f.ext && !disabled
             return (
               <button
                 key={f.ext}
                 disabled={disabled}
-                title={disabled ? 'Files are already this format' : undefined}
+                title={
+                  noRar
+                    ? 'WinRAR not found'
+                    : isSource
+                      ? 'Files are already this format'
+                      : undefined
+                }
                 onClick={() => set('format', f.ext)}
                 className={`rounded-xl border py-2.5 text-[13px] font-semibold transition ${
                   sel
@@ -147,6 +165,79 @@ function ConvertOptions({
           />
         </div>
       )}
+      {/* Repacking an archive: the pages are already compressed images, so
+          storing them is the same size and faster. */}
+      {verb === 'repack' && (
+        <div>
+          <Label>Compression</Label>
+          <Segmented
+            value={options.store === false ? 'normal' : 'store'}
+            onChange={(v) => set('store', v === 'store')}
+            options={[
+              { value: 'store', label: 'Store' },
+              { value: 'normal', label: 'Normal' }
+            ]}
+          />
+          <p className="mt-2 text-[12px] text-dim">
+            Comic pages are already compressed images, so Store is faster at the same size.
+          </p>
+        </div>
+      )}
+      {/* PDF into a comic archive: its pages have to be rendered first. */}
+      {verb === 'from-pdf' && <PageRenderOptions options={options} set={set} />}
+    </>
+  )
+}
+
+/** Page-rendering controls shared by every route that turns a PDF into images. */
+function PageRenderOptions({
+  options,
+  set
+}: {
+  options: JobOptions
+  set: (k: string, v: string | number | boolean) => void
+}): JSX.Element {
+  const pageFormat = String(options.pageFormat ?? 'jpg')
+  return (
+    <>
+      <div>
+        <div className="mb-2.5 flex items-center justify-between">
+          <span className="text-[11px] font-semibold uppercase tracking-wide text-dim">
+            Resolution
+          </span>
+          <span className="text-sm font-semibold text-accent">
+            {Number(options.dpi ?? 150)} DPI
+          </span>
+        </div>
+        <input
+          type="range"
+          min={72}
+          max={400}
+          step={2}
+          value={Number(options.dpi ?? 150)}
+          onChange={(e) => set('dpi', Number(e.target.value))}
+          className="w-full accent-accent"
+        />
+      </div>
+      <div>
+        <Label>Page format</Label>
+        <Segmented
+          value={pageFormat}
+          onChange={(v) => set('pageFormat', v)}
+          options={[
+            { value: 'jpg', label: 'JPEG' },
+            { value: 'png', label: 'PNG' }
+          ]}
+        />
+        <p className="mt-2 text-[12px] text-dim">
+          {pageFormat === 'jpg'
+            ? 'Much smaller files, the usual choice for comics.'
+            : 'Lossless, but a long comic runs to hundreds of megabytes.'}
+        </p>
+      </div>
+      {pageFormat === 'jpg' && (
+        <QualitySlider options={options} set={set} field="pageQuality" fallback={85} />
+      )}
     </>
   )
 }
@@ -191,12 +282,18 @@ function ChoiceSelect<T extends string>({
 
 function QualitySlider({
   options,
-  set
+  set,
+  field = 'quality',
+  fallback = 80
 }: {
   options: JobOptions
   set: (k: string, v: string | number | boolean) => void
+  /** Which option this drives. Page rendering uses `pageQuality` so it cannot
+   * collide with convert's preset `quality` in a shared option bag. */
+  field?: string
+  fallback?: number
 }): JSX.Element {
-  const q = Number(options.quality ?? 80)
+  const q = Number(options[field] ?? fallback)
   return (
     <div>
       <div className="mb-2.5 flex items-center justify-between">
@@ -208,7 +305,7 @@ function QualitySlider({
         min={10}
         max={100}
         value={q}
-        onChange={(e) => set('quality', Number(e.target.value))}
+        onChange={(e) => set(field, Number(e.target.value))}
         className="w-full accent-accent"
       />
       <div className="mt-1.5 flex justify-between text-[11px] text-dim">
@@ -1630,40 +1727,8 @@ function GenerateOptions({
   )
 }
 
-/** What these settings will act on. The queue can hold images and video at the
- * same time, so Run has to say which of them it means. Named by CONVERT GROUP,
- * not file kind: a pdf plus a txt is "2 documents", because they run as one
- * batch under one target set. */
-function ScopeChip({
-  group,
-  count,
-  known
-}: {
-  group: string
-  count: number
-  known: boolean
-}): JSX.Element {
-  return (
-    <div className="flex items-start gap-2.5 rounded-xl bg-black/[.035] px-3 py-2.5">
-      <span
-        className="mt-px h-[18px] w-[18px] shrink-0 rounded-md"
-        style={{ background: GROUP_COLOR[group] ?? '#6e6e73' }}
-      />
-      <span className="text-[12.5px] font-medium leading-snug text-muted">
-        {known && count > 0 ? (
-          <>
-            Applies to the <span className="font-bold text-ink">{groupNoun(group, count)}</span>{' '}
-            selected.
-          </>
-        ) : (
-          <>Select files to choose what these settings apply to.</>
-        )}
-      </span>
-    </div>
-  )
-}
-
 export function OptionsPanel({
+  tab,
   tool,
   label,
   options,
@@ -1681,6 +1746,8 @@ export function OptionsPanel({
   onSet,
   onRun
 }: {
+  /** The rail tab this workspace belongs to. */
+  tab: TabId
   /** The engine tool this workspace runs. */
   tool: ToolId
   /** The verb's own name, used by the Run button. */
@@ -1703,6 +1770,13 @@ export function OptionsPanel({
   onSet: (k: string, v: string | number | boolean) => void
   onRun: () => void
 }): JSX.Element {
+  // Generate is the one tab whose options exist without any file selected: its
+  // prompt IS the input.
+  const showOptions = tool === 'generate' || activeGroup != null
+  // On Convert, ONE component owns the target grid for every route, so a .pdf
+  // aimed at .cbz still picks its target in the same place a .png does.
+  const isConvertTab = tab === 'convert'
+  const { rar } = useArchiveStatus()
   return (
     // Every option control (slider, toggle, run button, selected chip) reads the
     // accent variables, so overriding them here themes the whole panel black in
@@ -1712,7 +1786,7 @@ export function OptionsPanel({
     // used to be an ordinary last child of one scroll container and left the
     // viewport entirely at the app's own default window size.
     <aside
-      className="flex w-[300px] shrink-0 flex-col overflow-hidden border-l border-black/[.06] bg-white/40"
+      className="flex w-[248px] shrink-0 flex-col overflow-hidden border-l border-black/[.06] bg-white/40 lg:w-[300px]"
       style={
         {
           '--color-accent': '#000000',
@@ -1721,30 +1795,25 @@ export function OptionsPanel({
         } as CSSProperties
       }
     >
-      {/* No operation switcher: the rail IS the operation now, so a coloured
-          pill here would name the same thing twice. What the panel owes the user
-          instead is WHICH files its settings apply to, because one tab's queue
-          can hold several convert groups at once. */}
-      <div className="px-[22px] pt-6">
-        <ScopeChip group={optGroup} count={runCount} known={activeGroup != null} />
-        <div className="mt-5 h-px bg-black/[.07]" />
-      </div>
-      <div className="scroll-thin flex min-h-0 flex-1 flex-col gap-5 overflow-y-auto px-[22px] py-5">
-        {/* The options are always shown: every file in this category takes the
-          same operation, so its options are known before anything is selected.
-          Falls back to the category's kind when there's no selection to read
-          one from. Only the run button reflects whether files are ready. */}
+      {/* No operation switcher (the rail IS the operation) and no scope banner:
+          the Run button already names what it will act on. */}
+      <div className="scroll-thin flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto px-4 pb-5 pt-5 lg:gap-5 lg:px-[22px] lg:pt-6">
+        {/* Options appear only once something is selected. Offering PNG / JPG
+            targets with an empty queue invited a choice that could not be
+            acted on, and said nothing about what it would apply to. */}
         <>
-          {tool === 'convert' && (
+          {showOptions && isConvertTab && (
             <ConvertOptions
               options={options}
               activeKind={activeKind ?? fallbackKind}
               sourceExt={sourceExt}
               srcExts={srcExts}
+              verb={tool === 'archive' ? String(options.op ?? '') : undefined}
+              hasRar={rar}
               set={onSet}
             />
           )}
-          {tool === 'compress' && (
+          {showOptions && tool === 'compress' && (
             <CompressOptions
               options={options}
               activeKind={runKind ?? fallbackKind}
@@ -1752,20 +1821,20 @@ export function OptionsPanel({
               set={onSet}
             />
           )}
-          {tool === 'resize' && (
+          {showOptions && tool === 'resize' && (
             <ResizeOptions options={options} outputs={resizeOutputs} set={onSet} />
           )}
-          {tool === 'upscale' && (
+          {showOptions && tool === 'upscale' && (
             <UpscaleOptions options={options} outputs={upscaleOutputs} set={onSet} />
           )}
-          {tool === 'removebg' && <RemoveBgOptions options={options} set={onSet} />}
+          {showOptions && tool === 'removebg' && <RemoveBgOptions options={options} set={onSet} />}
           {tool === 'pdf' && <PdfOptions options={options} runCount={runCount} set={onSet} />}
           {tool === 'archive' && <ArchiveOptions options={options} srcExts={srcExts} set={onSet} />}
           {tool === 'generate' && <GenerateOptions options={options} set={onSet} />}
         </>
       </div>
 
-      <div className="border-t border-black/[.07] px-[22px] py-4">
+      <div className="border-t border-black/[.07] px-4 py-3 lg:px-[22px] lg:py-4">
         <button
           onClick={onRun}
           disabled={runCount === 0}
diff --git a/src/renderer/src/components/TabRail.tsx b/src/renderer/src/components/TabRail.tsx
index b89c119..35cc6c6 100644
--- a/src/renderer/src/components/TabRail.tsx
+++ b/src/renderer/src/components/TabRail.tsx
@@ -144,7 +144,7 @@ export function TabRail({
   }
 
   return (
-    <nav className="flex w-[212px] shrink-0 flex-col gap-0.5 border-r border-black/[.06] bg-white/40 px-3 pb-4">
+    <nav className="flex w-[176px] shrink-0 flex-col gap-0.5 border-r border-black/[.06] bg-white/40 px-2 pb-4 lg:w-[212px] lg:px-3">
       <div className="flex items-center justify-between px-1 pb-2 pt-3.5">
         <span className="pl-1.5 text-[11px] font-semibold uppercase tracking-wide text-dim">
           Do
diff --git a/src/renderer/src/state.ts b/src/renderer/src/state.ts
index ef67614..288e479 100644
--- a/src/renderer/src/state.ts
+++ b/src/renderer/src/state.ts
@@ -1,4 +1,4 @@
-import type { FileInfo, JobEvent, JobOptions, ToolId } from '@shared/types'
+import type { FileInfo, FileKind, JobEvent, JobOptions, ToolId } from '@shared/types'
 import { convertGroup } from '@shared/convert'
 import { BG_DEFAULTS } from '@shared/removebg'
 import { GEN_DEFAULTS } from '@shared/generate'
@@ -85,7 +85,8 @@ export interface AppState {
   /** Options are per (workspace, convert group): converting images and
    * converting video are configured separately inside one Convert tab. */
   options: Record<string, JobOptions>
-  /** The last Tools card opened, so returning to Tools lands where you were. */
+  /** The last Tools card opened. Kept for the session file's shape only: the
+   * Tools tab deliberately opens on its grid every time. */
   lastTool: string | null
 }
 
@@ -105,7 +106,14 @@ export const DEFAULT_OPTIONS: Record<ToolId, JobOptions> = {
   upscale: { upscaleFactor: 4, upscaleModel: 'photo' },
   removebg: { ...BG_DEFAULTS },
   pdf: { op: 'extract-text', dpi: 150, range: '' },
-  archive: { op: 'repack', format: '.cbz', store: true, dpi: 150, pageFormat: 'jpg', quality: 85 },
+  archive: {
+    op: 'repack',
+    format: '.cbz',
+    store: true,
+    dpi: 150,
+    pageFormat: 'jpg',
+    pageQuality: 85
+  },
   generate: {
     prompt: '',
     model: '',
@@ -130,10 +138,12 @@ export const emptyQueue = (): QueueState => ({ items: [], selected: [], anchor:
 export function defaultOptionsFor(
   tab: TabId,
   activeTool: string | null,
-  group: string
+  group: string,
+  source?: { kind: FileKind; ext: string },
+  targetExt?: string
 ): JobOptions {
   const card = activeTool ? toolCardById(activeTool) : null
-  const { tool, op } = engineFor(tab, group, card)
+  const { tool, op } = engineFor(tab, group, card, source, targetExt)
   const base = DEFAULT_OPTIONS[tool] ?? {}
   return op ? { ...base, op } : { ...base }
 }
@@ -465,9 +475,9 @@ export function reducer(state: AppState, action: Action): AppState {
       return merged
     }
     case 'setTab': {
-      // Returning to Tools lands on the card you last had open; every other
-      // verb is a single workspace, so there is nothing to remember.
-      const activeTool = action.tab === 'tools' ? state.lastTool : null
+      // Tools ALWAYS opens on its grid. Landing straight back inside the last
+      // card hid the other tools and made the tab feel like it had lost them.
+      const activeTool = null
       const key = queueKey(action.tab, activeTool)
       return {
         ...state,
@@ -489,9 +499,24 @@ export function reducer(state: AppState, action: Action): AppState {
       const key = optionsKey(state.tab, state.activeTool, action.group)
       const base =
         state.options[key] ?? defaultOptionsFor(state.tab, state.activeTool, action.group)
+      // Changing the VERB changes which engine reads this bag, and that engine
+      // has settings the previous one never stored (a PDF aimed at a comic
+      // archive suddenly needs a DPI). Seed those, without disturbing anything
+      // the user has already chosen.
+      const seeded =
+        action.key === 'op'
+          ? Object.fromEntries(
+              Object.entries(DEFAULT_OPTIONS.archive ?? {}).filter(
+                ([k]) => k !== 'op' && k !== 'format' && !(k in base)
+              )
+            )
+          : {}
       return {
         ...state,
-        options: { ...state.options, [key]: { ...base, [action.key]: action.value } }
+        options: {
+          ...state.options,
+          [key]: { ...base, ...seeded, [action.key]: action.value }
+        }
       }
     }
     case 'addItems': {
diff --git a/src/shared/convert.ts b/src/shared/convert.ts
index d136f1b..581cf0c 100644
--- a/src/shared/convert.ts
+++ b/src/shared/convert.ts
@@ -1,4 +1,5 @@
 import type { FileKind } from './types'
+import { ARCHIVE_FORMATS, COMIC_FORMATS, containerOf } from './archive'
 
 // Convert catalogs + rules, shared by the engine and the UI so they never drift.
 // Convert works WITHIN a file kind (image↔image, audio↔audio, video↔video); you
@@ -83,12 +84,54 @@ export function categoryFormats(kind: FileKind): FormatOption[] {
 }
 
 /** Full format family for a source, including its own format (for the UI grid
- * that greys out the source's own). Document families need the source ext. */
+ * that greys out the source's own). Document families need the source ext.
+ *
+ * Two families deliberately reach ACROSS convert groups, because the pairing is
+ * what people actually want: a PDF can become a comic archive, and any archive
+ * can become a PDF. Both are ordinary Converts to a user; the engine routing
+ * (see `routeConvert`) is what differs. Only a real .pdf gets the comic
+ * targets: a .docx in the same 'doc' group cannot become a CBZ. */
 export function familyFormats(kind: FileKind, srcExt: string): FormatOption[] {
+  if (kind === 'archive') return [...ARCHIVE_FORMATS, { label: 'PDF', ext: '.pdf' }]
+  if (normalizeExt(srcExt) === '.pdf') return [...docFormats(srcExt), ...COMIC_FORMATS]
   if (kind === 'document' || kind === 'pdf' || kind === 'text') return docFormats(srcExt)
   return categoryFormats(kind)
 }
 
+/**
+ * The engine that performs one Convert. The tab-to-tool mapping is not 1:1: the
+ * `convert` tool handles image/video/audio/document work, while anything
+ * touching an archive container is the `archive` tool under a different verb.
+ */
+export function routeConvert(
+  kind: FileKind,
+  srcExt: string,
+  targetExt: string
+): { tool: 'convert' | 'archive'; op?: string } {
+  const target = normalizeExt(targetExt)
+  if (kind === 'archive') {
+    // Unpacking an archive INTO a PDF is a different job from repacking it.
+    return target === '.pdf' ? { tool: 'archive', op: 'to-pdf' } : { tool: 'archive', op: 'repack' }
+  }
+  // A PDF aimed at a comic container: render its pages, then pack them.
+  if (normalizeExt(srcExt) === '.pdf' && containerOf(target)) {
+    return { tool: 'archive', op: 'from-pdf' }
+  }
+  return { tool: 'convert' }
+}
+
+/** Targets valid for EVERY selected source, so a mixed pdf+docx selection never
+ * offers CBZ (which only the pdf could do). */
+export function sharedTargets(kind: FileKind, srcExts: string[]): FormatOption[] {
+  if (!srcExts.length) return []
+  const lists = srcExts.map((e) => familyFormats(kind, e).map((f) => f.ext))
+  const common = lists.reduce((a, b) => a.filter((x) => b.includes(x)))
+  const seen = new Set<string>()
+  return familyFormats(kind, srcExts[0]).filter(
+    (f) => common.includes(f.ext) && !seen.has(f.ext) && seen.add(f.ext)
+  )
+}
+
 /** Fold alias extensions so .tif == .tiff and .jpeg == .jpg. */
 export function normalizeExt(ext: string): string {
   const e = (ext.startsWith('.') ? ext : '.' + ext).toLowerCase()
diff --git a/src/shared/tabs.ts b/src/shared/tabs.ts
index d65dc56..7271318 100644
--- a/src/shared/tabs.ts
+++ b/src/shared/tabs.ts
@@ -1,4 +1,5 @@
 import type { FileKind, ToolId } from './types'
+import { routeConvert } from './convert'
 
 // The app's navigation model: pick what you want DONE, then drop files. The
 // rail is the verb; the file kind is a property of what you dropped, not a
@@ -104,9 +105,9 @@ export interface ToolCard {
   kinds: FileKind[]
 }
 
-// A conversion that crosses a convert group is a tool, not a Convert: Convert
-// works WITHIN a group, so archive-to-PDF and PDF-to-CBZ live here while
-// archive repack (.cbz to .cb7) stays on the Convert tab.
+// Only the PDF one-offs live here. Anything that produces another FILE from a
+// file - archive repack, PDF to CBZ, archive to PDF - is an ordinary Convert
+// and belongs on the Convert tab, where a user goes looking for it.
 export const TOOL_CARDS: ToolCard[] = [
   {
     id: 'pdf-text',
@@ -173,39 +174,6 @@ export const TOOL_CARDS: ToolCard[] = [
     tool: 'pdf',
     opKey: 'extract-images',
     kinds: ['pdf']
-  },
-  {
-    id: 'archive-extract',
-    label: 'Extract',
-    desc: 'Unpack into a folder',
-    group: 'Archives',
-    color: '#a16207',
-    icon: 'unpack',
-    tool: 'archive',
-    opKey: 'extract',
-    kinds: ['archive']
-  },
-  {
-    id: 'archive-to-pdf',
-    label: 'Archive to PDF',
-    desc: 'Comic archive becomes a PDF',
-    group: 'Archives',
-    color: '#a16207',
-    icon: 'topdf',
-    tool: 'archive',
-    opKey: 'to-pdf',
-    kinds: ['archive']
-  },
-  {
-    id: 'pdf-to-cbz',
-    label: 'PDF to CBZ',
-    desc: 'Pack pages as a comic archive',
-    group: 'Archives',
-    color: '#a16207',
-    icon: 'tocbz',
-    tool: 'archive',
-    opKey: 'from-pdf',
-    kinds: ['pdf']
   }
 ]
 
@@ -215,12 +183,24 @@ export const TOOL_CARDS: ToolCard[] = [
  * images, video, audio and documents, but an archive repack is the `archive`
  * tool with op `repack`. A tool card names its own tool and op outright.
  */
+/**
+ * The engine tool (and verb) that performs a tab's work. A tool card names its
+ * own outright. On the Convert tab the answer depends on the TARGET as well as
+ * the source, so `routeConvert` decides: a .cbz to .cb7 is archive/repack, a
+ * .pdf to .cbz is archive/from-pdf, and a .png to .webp is the convert tool.
+ */
 export function engineFor(
   tab: TabId,
   group: string,
-  card?: ToolCard | null
+  card?: ToolCard | null,
+  source?: { kind: FileKind; ext: string },
+  targetExt?: string
 ): { tool: ToolId; op?: string } {
   if (card) return { tool: card.tool, op: card.opKey }
+  if (tab === 'convert' && source && targetExt) {
+    return routeConvert(source.kind, source.ext, targetExt)
+  }
+  // No selection yet: name the tab's default tool so the panel has something.
   if (tab === 'convert' && group === 'archive') return { tool: 'archive', op: 'repack' }
   return { tool: tabById(tab).tool }
 }
diff --git a/test/archive-live.test.ts b/test/archive-live.test.ts
index 4486539..2ac3e03 100644
--- a/test/archive-live.test.ts
+++ b/test/archive-live.test.ts
@@ -94,7 +94,7 @@ describe.skipIf(!existsSync(SEVEN) || !existsSync(MAGICK))('archive engine (live
     const pdf = await tool.run(info(cbz, '.cbz'), { op: 'to-pdf' }, ctx)
     const out = await tool.run(
       { ...info(pdf, '.pdf'), kind: 'pdf' },
-      { op: 'from-pdf', format: '.cbz', dpi: 72, pageFormat: 'jpg', quality: 80 },
+      { op: 'from-pdf', format: '.cbz', dpi: 72, pageFormat: 'jpg', pageQuality: 80 },
       ctx
     )
     const entries = list(out).sort()
diff --git a/test/convert-archive-targets.test.ts b/test/convert-archive-targets.test.ts
new file mode 100644
index 0000000..b54022b
--- /dev/null
+++ b/test/convert-archive-targets.test.ts
@@ -0,0 +1,94 @@
+import { describe, expect, it } from 'vitest'
+import { familyFormats, routeConvert, sharedTargets } from '@shared/convert'
+import { initialState, reducer } from '../src/renderer/src/state'
+
+// Archive <-> PDF are ordinary Converts to a user, so they live on the Convert
+// tab rather than hiding in Tools. Only the engine routing differs.
+
+const exts = (f: { ext: string }[]): string[] => f.map((x) => x.ext)
+
+describe('cross-group convert targets', () => {
+  it('offers comic containers for a PDF source', () => {
+    const t = exts(familyFormats('pdf', '.pdf'))
+    expect(t).toContain('.cbz')
+    expect(t).toContain('.cb7')
+    // ...without losing the document targets it has always had.
+    expect(t).toContain('.docx')
+    expect(t).toContain('.txt')
+  })
+
+  it('offers PDF for an archive source, alongside the other containers', () => {
+    const t = exts(familyFormats('archive', '.cbz'))
+    expect(t).toContain('.pdf')
+    expect(t).toContain('.cb7')
+    expect(t).toContain('.zip')
+  })
+
+  it('does NOT offer comic containers for a docx in the same doc group', () => {
+    const t = exts(familyFormats('document', '.docx'))
+    expect(t).not.toContain('.cbz')
+    expect(t).toContain('.pdf')
+  })
+
+  it('offers only what EVERY selected source can do', () => {
+    // A pdf alone can become a CBZ; a pdf next to a docx cannot, because the
+    // docx has no such conversion and Run acts on the whole selection.
+    expect(exts(sharedTargets('pdf', ['.pdf']))).toContain('.cbz')
+    expect(exts(sharedTargets('pdf', ['.pdf', '.docx']))).not.toContain('.cbz')
+    expect(exts(sharedTargets('pdf', ['.pdf', '.docx']))).toContain('.txt')
+  })
+
+  it('returns nothing when nothing is selected', () => {
+    expect(sharedTargets('image', [])).toEqual([])
+  })
+})
+
+describe('routeConvert', () => {
+  it('sends archive to archive through repack', () => {
+    expect(routeConvert('archive', '.cbz', '.cb7')).toEqual({ tool: 'archive', op: 'repack' })
+    expect(routeConvert('archive', '.rar', '.zip')).toEqual({ tool: 'archive', op: 'repack' })
+  })
+
+  it('sends archive to PDF through to-pdf', () => {
+    expect(routeConvert('archive', '.cbz', '.pdf')).toEqual({ tool: 'archive', op: 'to-pdf' })
+  })
+
+  it('sends PDF to a comic container through from-pdf', () => {
+    expect(routeConvert('pdf', '.pdf', '.cbz')).toEqual({ tool: 'archive', op: 'from-pdf' })
+    expect(routeConvert('pdf', '.pdf', '.cb7')).toEqual({ tool: 'archive', op: 'from-pdf' })
+  })
+
+  it('leaves ordinary conversions on the convert tool', () => {
+    expect(routeConvert('pdf', '.pdf', '.docx')).toEqual({ tool: 'convert' })
+    expect(routeConvert('image', '.png', '.webp')).toEqual({ tool: 'convert' })
+    expect(routeConvert('document', '.docx', '.pdf')).toEqual({ tool: 'convert' })
+  })
+})
+
+describe('switching route seeds its settings', () => {
+  it('a PDF aimed at a comic archive gains DPI and page settings', () => {
+    // The bag was written by the convert tool and has never held a DPI. The
+    // archive engine reads one, so setting the verb must seed it.
+    let s = reducer(initialState, { type: 'setOption', group: 'doc', key: 'format', value: '.cbz' })
+    expect(s.options['convert:doc'].dpi).toBeUndefined()
+    s = reducer(s, { type: 'setOption', group: 'doc', key: 'op', value: 'from-pdf' })
+    expect(s.options['convert:doc'].op).toBe('from-pdf')
+    expect(s.options['convert:doc'].dpi).toBe(150)
+    expect(s.options['convert:doc'].pageFormat).toBe('jpg')
+    // pageQuality, not quality: convert stores a preset STRING under `quality`,
+    // and Number('balanced') is NaN.
+    expect(s.options['convert:doc'].pageQuality).toBe(85)
+  })
+
+  it('never overwrites a setting the user already chose', () => {
+    let s = reducer(initialState, { type: 'setOption', group: 'doc', key: 'dpi', value: 300 })
+    s = reducer(s, { type: 'setOption', group: 'doc', key: 'op', value: 'from-pdf' })
+    expect(s.options['convert:doc'].dpi).toBe(300)
+  })
+
+  it('keeps the chosen target when the verb changes', () => {
+    let s = reducer(initialState, { type: 'setOption', group: 'doc', key: 'format', value: '.cbz' })
+    s = reducer(s, { type: 'setOption', group: 'doc', key: 'op', value: 'from-pdf' })
+    expect(s.options['convert:doc'].format).toBe('.cbz')
+  })
+})
diff --git a/test/queues.test.ts b/test/queues.test.ts
index e082391..3db5dcb 100644
--- a/test/queues.test.ts
+++ b/test/queues.test.ts
@@ -106,13 +106,15 @@ describe('navigation', () => {
     expect(initialState.activeTool).toBeNull()
   })
 
-  it('returns to the Tools card you last had open', () => {
+  it('always opens Tools on its grid, never inside the last card', () => {
+    // Landing straight back inside a card hid every other tool and made the
+    // tab look like it had lost them.
     let s = reducer(initialState, { type: 'setTab', tab: 'tools' })
     s = reducer(s, { type: 'setActiveTool', tool: 'pdf-burst' })
     s = reducer(s, { type: 'setTab', tab: 'convert' })
     expect(s.activeTool).toBeNull()
     s = reducer(s, { type: 'setTab', tab: 'tools' })
-    expect(s.activeTool).toBe('pdf-burst')
+    expect(s.activeTool).toBeNull()
   })
 
   it('keeps options per convert group inside one verb', () => {
@@ -141,7 +143,10 @@ describe('navigation', () => {
     expect(defaultOptionsFor('tools', 'pdf-merge', 'doc').op).toBe('merge')
     // Converting an image is the plain convert tool, so it carries no verb.
     expect(defaultOptionsFor('convert', null, 'image').op).toBeUndefined()
-    // Converting an ARCHIVE is the archive tool with op 'repack', on the same tab.
+    // An archive Convert is the archive tool, and the TARGET picks the verb.
     expect(defaultOptionsFor('convert', null, 'archive').op).toBe('repack')
+    expect(defaultOptionsFor('convert', null, 'doc', { kind: 'pdf', ext: '.pdf' }, '.cbz').op).toBe(
+      'from-pdf'
+    )
   })
 })
diff --git a/test/tabs.test.ts b/test/tabs.test.ts
index df3c3d8..0277ec5 100644
--- a/test/tabs.test.ts
+++ b/test/tabs.test.ts
@@ -55,22 +55,34 @@ describe('tab model', () => {
     for (const t of TABS) expect(tools, t.id).toContain(t.tool)
   })
 
-  it('groups tool cards by what they act on', () => {
-    expect(toolGroups().map((g) => g.name)).toEqual(['PDF', 'Archives'])
+  it('keeps only the PDF one-offs in Tools', () => {
+    // Anything that turns a file into another FILE is an ordinary Convert and
+    // belongs on the Convert tab, where people go looking for it.
+    expect(toolGroups().map((g) => g.name)).toEqual(['PDF'])
+    expect(toolCardById('archive-to-pdf')).toBeUndefined()
+    expect(toolCardById('pdf-to-cbz')).toBeUndefined()
+    expect(toolCardById('archive-extract')).toBeUndefined()
   })
 
-  it('keeps cross-group conversions in Tools, not Convert', () => {
-    expect(toolCardById('archive-to-pdf')?.tool).toBe('archive')
-    expect(toolCardById('archive-to-pdf')?.opKey).toBe('to-pdf')
-    expect(toolCardById('pdf-to-cbz')?.opKey).toBe('from-pdf')
-    expect(toolCardById('archive-extract')?.opKey).toBe('extract')
-  })
-
-  it('routes an archive Convert to the archive engine, not the convert one', () => {
-    // The tab-to-tool mapping is not 1:1: repacking a .cbz is the archive tool
-    // with op 'repack', even though the tab is Convert.
-    expect(engineFor('convert', 'archive')).toEqual({ tool: 'archive', op: 'repack' })
-    expect(engineFor('convert', 'image')).toEqual({ tool: 'convert' })
+  it('routes a Convert by its TARGET, not just its source', () => {
+    const cbz = { kind: 'archive' as const, ext: '.cbz' }
+    const pdf = { kind: 'pdf' as const, ext: '.pdf' }
+    const png = { kind: 'image' as const, ext: '.png' }
+    expect(engineFor('convert', 'archive', null, cbz, '.cb7')).toEqual({
+      tool: 'archive',
+      op: 'repack'
+    })
+    // Same source, different target, different verb entirely.
+    expect(engineFor('convert', 'archive', null, cbz, '.pdf')).toEqual({
+      tool: 'archive',
+      op: 'to-pdf'
+    })
+    expect(engineFor('convert', 'doc', null, pdf, '.cbz')).toEqual({
+      tool: 'archive',
+      op: 'from-pdf'
+    })
+    expect(engineFor('convert', 'doc', null, pdf, '.docx')).toEqual({ tool: 'convert' })
+    expect(engineFor('convert', 'image', null, png, '.webp')).toEqual({ tool: 'convert' })
     expect(engineFor('compress', 'doc')).toEqual({ tool: 'compress' })
   })
 

From eb29681ec142a5ea44ae8302c29d62e770f165c7 Mon Sep 17 00:00:00 2001
From: Max <112043822+Maxaubert@users.noreply.github.com>
Date: Mon, 31 Aug 2026 16:06:30 +0200
Subject: [PATCH 08/10] fix(nav): render exactly one options panel

Converting a PDF to CBZ showed two Target format grids, two Resolution
sliders and two Quality controls: the panel was a flat list of
`tool === x &&` lines, and two of them lost their guard in a reformat, so
the Convert tab rendered its own options AND the archive tool's.

Replaced the list with a single function that returns one panel, so a
missing guard cannot duplicate anything again. Audited all 26 combinations
of tab, file kind and engine-changing target in the running app; every one
renders one of each section.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01MSq6HRwmaRKAv1t2hrdkJB
---
 src/renderer/src/components/OptionsPanel.tsx | 87 ++++++++++++--------
 1 file changed, 54 insertions(+), 33 deletions(-)

diff --git a/src/renderer/src/components/OptionsPanel.tsx b/src/renderer/src/components/OptionsPanel.tsx
index 1dd1e7b..a4387c4 100644
--- a/src/renderer/src/components/OptionsPanel.tsx
+++ b/src/renderer/src/components/OptionsPanel.tsx
@@ -1777,6 +1777,50 @@ export function OptionsPanel({
   // aimed at .cbz still picks its target in the same place a .png does.
   const isConvertTab = tab === 'convert'
   const { rar } = useArchiveStatus()
+
+  function renderOptions(): JSX.Element | null {
+    if (!showOptions) return null
+    // Convert owns its target grid for every route it can take, including the
+    // archive ones, so the choice lives in one place whatever the file is.
+    if (isConvertTab) {
+      return (
+        <ConvertOptions
+          options={options}
+          activeKind={activeKind ?? fallbackKind}
+          sourceExt={sourceExt}
+          srcExts={srcExts}
+          verb={tool === 'archive' ? String(options.op ?? '') : undefined}
+          hasRar={rar}
+          set={onSet}
+        />
+      )
+    }
+    switch (tool) {
+      case 'compress':
+        return (
+          <CompressOptions
+            options={options}
+            activeKind={runKind ?? fallbackKind}
+            videoOutputs={videoOutputs}
+            set={onSet}
+          />
+        )
+      case 'resize':
+        return <ResizeOptions options={options} outputs={resizeOutputs} set={onSet} />
+      case 'upscale':
+        return <UpscaleOptions options={options} outputs={upscaleOutputs} set={onSet} />
+      case 'removebg':
+        return <RemoveBgOptions options={options} set={onSet} />
+      case 'pdf':
+        return <PdfOptions options={options} runCount={runCount} set={onSet} />
+      case 'archive':
+        return <ArchiveOptions options={options} srcExts={srcExts} set={onSet} />
+      case 'generate':
+        return <GenerateOptions options={options} set={onSet} />
+      default:
+        return null
+    }
+  }
   return (
     // Every option control (slider, toggle, run button, selected chip) reads the
     // accent variables, so overriding them here themes the whole panel black in
@@ -1798,40 +1842,17 @@ export function OptionsPanel({
       {/* No operation switcher (the rail IS the operation) and no scope banner:
           the Run button already names what it will act on. */}
       <div className="scroll-thin flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto px-4 pb-5 pt-5 lg:gap-5 lg:px-[22px] lg:pt-6">
-        {/* Options appear only once something is selected. Offering PNG / JPG
+        {/* EXACTLY ONE panel, chosen here. This used to be a list of
+            `tool === x &&` lines, and two of them lost their guard in a
+            reformat, so the Convert tab rendered its own options AND the
+            archive tool's: two Target format grids, two Resolution sliders.
+            A single return makes that impossible rather than merely fixed.
+
+            Options appear only once something is selected: offering PNG / JPG
             targets with an empty queue invited a choice that could not be
-            acted on, and said nothing about what it would apply to. */}
-        <>
-          {showOptions && isConvertTab && (
-            <ConvertOptions
-              options={options}
-              activeKind={activeKind ?? fallbackKind}
-              sourceExt={sourceExt}
-              srcExts={srcExts}
-              verb={tool === 'archive' ? String(options.op ?? '') : undefined}
-              hasRar={rar}
-              set={onSet}
-            />
-          )}
-          {showOptions && tool === 'compress' && (
-            <CompressOptions
-              options={options}
-              activeKind={runKind ?? fallbackKind}
-              videoOutputs={videoOutputs}
-              set={onSet}
-            />
-          )}
-          {showOptions && tool === 'resize' && (
-            <ResizeOptions options={options} outputs={resizeOutputs} set={onSet} />
-          )}
-          {showOptions && tool === 'upscale' && (
-            <UpscaleOptions options={options} outputs={upscaleOutputs} set={onSet} />
-          )}
-          {showOptions && tool === 'removebg' && <RemoveBgOptions options={options} set={onSet} />}
-          {tool === 'pdf' && <PdfOptions options={options} runCount={runCount} set={onSet} />}
-          {tool === 'archive' && <ArchiveOptions options={options} srcExts={srcExts} set={onSet} />}
-          {tool === 'generate' && <GenerateOptions options={options} set={onSet} />}
-        </>
+            acted on. Generate is the exception, since its prompt IS the
+            input. */}
+        {renderOptions()}
       </div>
 
       <div className="border-t border-black/[.07] px-4 py-3 lg:px-[22px] lg:py-4">

From a44ffb1b8fb5a7b92ab4c19573bd4a065d2630e8 Mon Sep 17 00:00:00 2001
From: Max <112043822+Maxaubert@users.noreply.github.com>
Date: Mon, 31 Aug 2026 16:35:51 +0200
Subject: [PATCH 09/10] feat: drop the built-in preview window; open files in
 the default app

Filesmith carried its own viewer: a second BrowserWindow with image, video,
audio, PDF and Markdown renderers, a media transport bar and an audio
visualiser, plus the IPC to keep its file list in sync with the queue. That is
a second app living inside this one, for a job the desktop already does.

Double-click and the context menu now hand the file to whatever the OS uses
for it. Removes previewWindow.ts, PreviewWindow.tsx, MediaBar.tsx,
AudioVisualizer.tsx, lib/markdown.ts, the PreviewItem/PreviewPayload types,
six preload APIs and the file:bytes / file:text handlers that existed only to
feed it. About 1,000 lines gone.

The fsmedia:// protocol stays: generated-image thumbnails still use it.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01MSq6HRwmaRKAv1t2hrdkJB
---
 src/main/index.ts                             |   7 +-
 src/main/ipc.ts                               |  57 +-
 src/main/previewWindow.ts                     |  72 ---
 src/preload/index.ts                          |  32 +-
 src/renderer/src/App.tsx                      |  89 +---
 .../src/components/AudioVisualizer.tsx        | 260 ----------
 src/renderer/src/components/MediaBar.tsx      | 200 -------
 src/renderer/src/components/PreviewWindow.tsx | 489 ------------------
 src/renderer/src/lib/markdown.ts              | 294 -----------
 src/renderer/src/main.tsx                     |   9 +-
 src/shared/types.ts                           |  15 -
 test/markdown.test.ts                         | 116 -----
 12 files changed, 27 insertions(+), 1613 deletions(-)
 delete mode 100644 src/main/previewWindow.ts
 delete mode 100644 src/renderer/src/components/AudioVisualizer.tsx
 delete mode 100644 src/renderer/src/components/MediaBar.tsx
 delete mode 100644 src/renderer/src/components/PreviewWindow.tsx
 delete mode 100644 src/renderer/src/lib/markdown.ts
 delete mode 100644 test/markdown.test.ts

diff --git a/src/main/index.ts b/src/main/index.ts
index a87eaa6..b0bbea6 100644
--- a/src/main/index.ts
+++ b/src/main/index.ts
@@ -33,7 +33,8 @@ function sweepStaleTempDirs(): void {
   }
 }
 
-// A private scheme the renderer uses to load local media for the preview
+// A private scheme the renderer uses to load local media (generated-image
+// thumbnails) without a file:// origin
 // window. Registered as a standard, streaming scheme so <video>/<audio> can
 // seek — the renderer can't touch file:// directly under web security.
 const MEDIA_SCHEME = 'fsmedia'
@@ -151,7 +152,7 @@ function createWindow(): void {
   // Open external links in the OS browser, never in-app.
   mainWindow.webContents.setWindowOpenHandler((details) => {
     // Scheme allowlist: shell.openExternal will happily launch a file:// or a
-    // registered protocol handler. previewWindow.ts already does this; not
+    // registered protocol handler; not
     // reachable today (the CSP is script-src 'self' and this window renders no
     // untrusted markup) but it costs one line to keep it that way.
     if (/^https?:/i.test(details.url)) void shell.openExternal(details.url)
@@ -203,7 +204,7 @@ if (!app.requestSingleInstanceLock()) {
     // lever that fixes a dead model URL for every install without a release.
     scheduleChannelRefresh()
 
-    // Serve local files for the preview: fsmedia://local/<encoded-abs-path>.
+    // Serve local files to the renderer: fsmedia://local/<encoded-abs-path>.
     protocol.handle(MEDIA_SCHEME, (request) => serveMedia(request))
 
     // ONCE per process, before any window: handlers are process-global, and
diff --git a/src/main/ipc.ts b/src/main/ipc.ts
index a91ec47..35b002a 100644
--- a/src/main/ipc.ts
+++ b/src/main/ipc.ts
@@ -1,14 +1,7 @@
-import { open, readFile, stat } from 'fs/promises'
+import { readFile } from 'fs/promises'
 import { existsSync } from 'fs'
 import { BrowserWindow, dialog, ipcMain, shell } from 'electron'
-import type {
-  FileInfo,
-  FileKind,
-  JobEvent,
-  JobRequest,
-  PreviewItem,
-  PreviewPayload
-} from '@shared/types'
+import type { FileInfo, FileKind, JobEvent, JobRequest } from '@shared/types'
 import { imageFilters, pickerFilters } from './pickerFilters'
 import { JobQueue } from './jobQueue'
 import { fileInfoFromPath } from './fileInfo'
@@ -16,7 +9,6 @@ import { removebgStatus, resolveRar } from './toolResolver'
 import { ensureUserNcnnDir, listNcnnModels, userNcnnDir } from './tools/ncnnModels'
 import { probeDimensions, probeImageDimensions } from './probe'
 import { makeThumbnail } from './thumbnail'
-import { openPreviewWindow, getPreviewPayload, updatePreviewFiles } from './previewWindow'
 import { cudaTierSupport, detectNvidia } from './pid/gpu'
 import { basename } from 'path'
 import { pidInstalled, comfyEngineReady, pidEnvMarker, PID_BACKBONES } from './pid/paths'
@@ -94,7 +86,7 @@ export function registerGlobalIpc(): JobQueue {
   const queue = new JobQueue((e: JobEvent) => broadcast('job:event', e))
 
   // Custom (frameless) window controls — act on the sender's window so both the
-  // main window and the preview window control themselves.
+  // The window controls itself.
   ipcMain.on('window:minimize', (e) => BrowserWindow.fromWebContents(e.sender)?.minimize())
   ipcMain.on('window:toggle-maximize', (e) => {
     const w = BrowserWindow.fromWebContents(e.sender)
@@ -104,17 +96,8 @@ export function registerGlobalIpc(): JobQueue {
   })
   ipcMain.on('window:close', (e) => BrowserWindow.fromWebContents(e.sender)?.close())
 
-  // Preview window: open/reuse it, and let it fetch its file list on load.
-  ipcMain.handle('preview:open', (_e, p: PreviewPayload) => openPreviewWindow(p))
-  ipcMain.handle('preview:data', () => getPreviewPayload())
-  ipcMain.on('preview:update-list', (_e, files: PreviewItem[]) => updatePreviewFiles(files))
-
-  // Reveal an output file in the OS file manager.
-  ipcMain.on('reveal', (_e, p: string) => {
-    if (p) shell.showItemInFolder(p)
-  })
-
-  // Open a file in its OS-default application (the "Preview" action).
+  // Open a file in whatever the OS already uses for it. Filesmith used to
+  // ship its own viewer window; the desktop already does this job.
   ipcMain.on('file:open', (_e, p: string) => {
     if (p) void shell.openPath(p)
   })
@@ -182,36 +165,6 @@ export function registerGlobalIpc(): JobQueue {
     })
     return r.canceled ? [] : r.filePaths.map(fileInfoFromPath).filter(isSupported)
   })
-  // Read a file's bytes so the renderer can play audio / show a PDF from a
-  // same-origin blob URL (Web Audio needs no CORS taint). Guard the size first:
-  // a whole-file read into a Uint8Array over IPC would OOM on a huge input, so
-  // reject it and let the renderer fall back to "open in default app".
-  ipcMain.handle('file:bytes', async (_e, p: string) => {
-    try {
-      const st = await stat(p)
-      const MAX = 256 * 1024 * 1024 // 256 MB — generous for media/PDF, bounded
-      if (st.size > MAX) return null
-      return new Uint8Array(await readFile(p))
-    } catch {
-      return null
-    }
-  })
-  // Read the first slice of a text file for the preview. Read ONLY the cap via a
-  // file handle — never load a multi-GB log fully into memory just to truncate.
-  ipcMain.handle('file:text', async (_e, p: string) => {
-    let fh
-    try {
-      fh = await open(p, 'r')
-      const cap = 1024 * 1024 // 1 MB — enough for preview
-      const buf = Buffer.alloc(cap)
-      const { bytesRead } = await fh.read(buf, 0, cap, 0)
-      return buf.subarray(0, bytesRead).toString('utf8')
-    } catch {
-      return null
-    } finally {
-      await fh?.close()
-    }
-  })
   // Video DISPLAY dimensions (rotation-aware) for the compress scale preview.
   ipcMain.handle('video:dimensions', (_e, p: string) => probeDimensions(p))
   // Images go through ImageMagick instead: ffprobe rejects very large ones and
diff --git a/src/main/previewWindow.ts b/src/main/previewWindow.ts
deleted file mode 100644
index 5de90cc..0000000
--- a/src/main/previewWindow.ts
+++ /dev/null
@@ -1,72 +0,0 @@
-import { BrowserWindow, shell } from 'electron'
-import { join } from 'path'
-import type { PreviewItem, PreviewPayload } from '@shared/types'
-
-// A separate, independently-resizable OS window for media preview. Being a real
-// window, it can be sized beyond the main window and resized from any edge or
-// corner. It reuses the same renderer bundle, entered via the '#preview' hash.
-let win: BrowserWindow | null = null
-let payload: PreviewPayload = { files: [], index: 0 }
-
-export function getPreviewPayload(): PreviewPayload {
-  return payload
-}
-
-/** Push a new file list to the open preview window without changing its index. */
-export function updatePreviewFiles(files: PreviewItem[]): void {
-  payload = { ...payload, files }
-  if (win && !win.isDestroyed()) win.webContents.send('preview:list', files)
-}
-
-export function openPreviewWindow(next: PreviewPayload): void {
-  payload = next
-  if (win && !win.isDestroyed()) {
-    win.webContents.send('preview:update', payload)
-    if (win.isMinimized()) win.restore()
-    win.focus()
-    return
-  }
-
-  win = new BrowserWindow({
-    width: 1040,
-    height: 720,
-    minWidth: 440,
-    minHeight: 340,
-    show: false,
-    frame: false,
-    backgroundColor: '#ffffff',
-    webPreferences: {
-      preload: join(__dirname, '../preload/index.js'),
-      sandbox: false,
-      plugins: true // Chromium's built-in PDF viewer (for the PDF preview)
-    }
-  })
-
-  win.on('ready-to-show', () => win?.show())
-  win.on('closed', () => {
-    win = null
-    // Tell the app windows: the renderer otherwise kept re-serialising its
-    // preview list (with base64 thumbnails) on every progress tick, forever,
-    // into a window that no longer existed.
-    for (const w of BrowserWindow.getAllWindows())
-      if (!w.isDestroyed() && !w.webContents.isDestroyed()) w.webContents.send('preview:closed')
-  })
-
-  // A markdown/HTML link click must open in the OS browser, never navigate the
-  // preview window away from the app. (Hash/SPA nav fires did-navigate-in-page,
-  // not will-navigate, so this only catches real page loads; same-URL reloads —
-  // dev HMR — are allowed through.)
-  win.webContents.setWindowOpenHandler((details) => {
-    if (/^https?:/i.test(details.url)) void shell.openExternal(details.url)
-    return { action: 'deny' }
-  })
-  win.webContents.on('will-navigate', (e, url) => {
-    if (url === win?.webContents.getURL()) return
-    e.preventDefault()
-    if (/^https?:/i.test(url)) void shell.openExternal(url)
-  })
-
-  const devUrl = process.env['ELECTRON_RENDERER_URL']
-  if (devUrl) void win.loadURL(`${devUrl}#preview`)
-  else void win.loadFile(join(__dirname, '../renderer/index.html'), { hash: 'preview' })
-}
diff --git a/src/preload/index.ts b/src/preload/index.ts
index 35a8e34..4e321d9 100644
--- a/src/preload/index.ts
+++ b/src/preload/index.ts
@@ -1,12 +1,5 @@
 import { contextBridge, ipcRenderer, webUtils } from 'electron'
-import type {
-  FileInfo,
-  FileKind,
-  JobEvent,
-  JobRequest,
-  PreviewItem,
-  PreviewPayload
-} from '@shared/types'
+import type { FileInfo, FileKind, JobEvent, JobRequest } from '@shared/types'
 import type { ComfyModel } from '@shared/comfy'
 import type { ComfyStatus, PidStatus } from '@shared/ipc'
 import type { GenerateOptions } from '@shared/generate'
@@ -36,12 +29,8 @@ const api = {
   reveal: (path: string): void => ipcRenderer.send('reveal', path),
   /** Open a file in its OS-default app. */
   openFile: (path: string): void => ipcRenderer.send('file:open', path),
-  /** A streamable URL for a local file, for the in-app preview. */
-  mediaUrl: (path: string): string => `fsmedia://local/${encodeURIComponent(path)}`,
   /** Raw file bytes — audio plays from a same-origin blob so Web Audio can read it. */
-  readBytes: (path: string): Promise<Uint8Array | null> => ipcRenderer.invoke('file:bytes', path),
   /** A text file's contents (capped at 1 MB) for the text preview. */
-  readText: (path: string): Promise<string | null> => ipcRenderer.invoke('file:text', path),
   /** Video pixel dimensions (via ffprobe) for the resolution-preview list. */
   videoDimensions: (path: string): Promise<{ width: number; height: number } | null> =>
     ipcRenderer.invoke('video:dimensions', path),
@@ -49,30 +38,11 @@ const api = {
   imageDimensions: (path: string): Promise<{ width: number; height: number } | null> =>
     ipcRenderer.invoke('image:dimensions', path),
   /** Open (or reuse + refocus) the standalone preview window. */
-  openPreviewWindow: (files: PreviewItem[], index: number): Promise<void> =>
-    ipcRenderer.invoke('preview:open', { files, index }),
   /** The preview window fetches its file list on load. */
-  getPreviewData: (): Promise<PreviewPayload> => ipcRenderer.invoke('preview:data'),
   /** The preview window listens for a new file list when reused. */
-  onPreviewUpdate: (cb: (p: PreviewPayload) => void): (() => void) => {
-    const listener = (_: unknown, p: PreviewPayload): void => cb(p)
-    ipcRenderer.on('preview:update', listener)
-    return () => ipcRenderer.removeListener('preview:update', listener)
-  },
   /** The preview window was closed — stop pushing list updates to it. */
-  onPreviewClosed: (cb: () => void): (() => void) => {
-    const listener = (): void => cb()
-    ipcRenderer.on('preview:closed', listener)
-    return () => ipcRenderer.removeListener('preview:closed', listener)
-  },
   /** Push a fresh file list to an open preview window (keeps its position). */
-  updatePreviewList: (files: PreviewItem[]): void => ipcRenderer.send('preview:update-list', files),
   /** The preview window listens for live list changes. */
-  onPreviewList: (cb: (files: PreviewItem[]) => void): (() => void) => {
-    const listener = (_: unknown, files: PreviewItem[]): void => cb(files)
-    ipcRenderer.on('preview:list', listener)
-    return () => ipcRenderer.removeListener('preview:list', listener)
-  },
   /** Move a file to the recycle bin (reversible). */
   trashFile: (path: string): Promise<boolean> => ipcRenderer.invoke('file:trash', path),
 
diff --git a/src/renderer/src/App.tsx b/src/renderer/src/App.tsx
index e7cfbc0..26b3f5f 100644
--- a/src/renderer/src/App.tsx
+++ b/src/renderer/src/App.tsx
@@ -8,7 +8,7 @@ import {
   type JSX,
   type MouseEvent
 } from 'react'
-import type { FileInfo, FileKind, PreviewItem } from '@shared/types'
+import type { FileInfo, FileKind } from '@shared/types'
 import {
   canCompress,
   convertGroup,
@@ -107,34 +107,6 @@ function effectiveFile(i: QueueItem): FileInfo {
   return i.file
 }
 
-/** Build the preview window's file list for a column of a queue. */
-function toPreviewFiles(
-  items: QueueItem[],
-  side: 'input' | 'output',
-  outThumbs: Record<string, string | null>
-): PreviewItem[] {
-  if (side === 'input') {
-    return items.filter(inInput).map((it) => ({
-      path: it.file.path,
-      name: it.file.name,
-      kind: it.file.kind,
-      size: it.file.size,
-      thumb: it.thumb
-    }))
-  }
-  return items.filter(inOutput).map((it) => {
-    const out = it.outputPath as string
-    // Classify the OUTPUT by its own extension — a PDF made from a .txt is a
-    // pdf, not text (using the input's kind previewed it as raw bytes).
-    return {
-      path: out,
-      name: baseName(out),
-      kind: fileKind(extOfPath(out)),
-      thumb: outThumbs[out] ?? null
-    }
-  })
-}
-
 export default function App(): JSX.Element {
   const [state, dispatch] = useReducer(reducer, initialState)
   const [dragging, setDragging] = useState(false)
@@ -153,9 +125,6 @@ export default function App(): JSX.Element {
   const [menu, setMenu] = useState<MenuState | null>(null)
   // Which column/tool the open preview window is showing, so we can push live
   // list updates to it when the queue changes.
-  const [previewCtx, setPreviewCtx] = useState<{ side: 'input' | 'output'; key: string } | null>(
-    null
-  )
   const requested = useRef<Set<string>>(new Set())
   const outRequested = useRef<Set<string>>(new Set())
   // Cached video dimensions (via ffprobe) for the compress resolution preview.
@@ -373,31 +342,15 @@ export default function App(): JSX.Element {
     dispatch({ type: 'select', id, mode })
   }
 
-  // Open the standalone preview window for a clicked item, letting the user page
-  // through the whole column it lives in (all inputs, or all finished outputs).
-  function openPreview(side: 'input' | 'output', item: QueueItem): void {
-    const list = cur.items.filter(side === 'input' ? inInput : inOutput)
-    const index = Math.max(
-      0,
-      list.findIndex((it) => it.id === item.id)
-    )
-    void window.filesmith.openPreviewWindow(toPreviewFiles(cur.items, side, outThumbs), index)
-    setPreviewCtx({ side, key: qKey })
+  // Hand the file to whatever the OS already uses for it. Filesmith used to
+  // carry its own viewer window (image, video, audio, PDF and text renderers,
+  // plus a media bar), which was a second app living inside this one for a job
+  // the desktop already does well.
+  function openExternally(side: 'input' | 'output', item: QueueItem): void {
+    const path = side === 'output' ? item.outputPath : item.file.path
+    if (path) window.filesmith.openFile(path)
   }
 
-  // Keep an open preview window's list in sync with the queue (it manages its
-  // own position; a no-op in main if the window is closed).
-  useEffect(() => {
-    if (!previewCtx) return
-    const items = state.queues[previewCtx.key]?.items ?? []
-    window.filesmith.updatePreviewList(toPreviewFiles(items, previewCtx.side, outThumbs))
-  }, [state.queues, outThumbs, previewCtx])
-
-  // Stop the sync the moment the preview window closes — it used to keep
-  // structured-cloning the list (base64 thumbs included) on every progress
-  // tick, forever, into a window that no longer existed.
-  useEffect(() => window.filesmith.onPreviewClosed(() => setPreviewCtx(null)), [])
-
   // Dismiss a set of items from a column. For Output we also recycle-bin the
   // produced file before dropping the card.
   function dismiss(ids: string[], column: 'input' | 'output'): void {
@@ -493,7 +446,7 @@ export default function App(): JSX.Element {
         x,
         y,
         items: [
-          { label: 'Preview', icon: 'eye', onClick: () => openPreview('input', item) },
+          { label: 'Open', icon: 'expand', onClick: () => openExternally('input', item) },
           {
             label: 'Reveal in Explorer',
             icon: 'folder',
@@ -525,7 +478,7 @@ export default function App(): JSX.Element {
       x,
       y,
       items: [
-        { label: 'Preview', icon: 'eye', onClick: () => openPreview('output', item) },
+        { label: 'Open', icon: 'expand', onClick: () => openExternally('output', item) },
         {
           label: 'Reveal in Explorer',
           icon: 'folder',
@@ -613,23 +566,9 @@ export default function App(): JSX.Element {
       : `The largest result will be roughly ${formatBytes(worst)} (about ${formatBytes(total)} in total), and may take a long time.`
   }
 
-  /** The images currently on screen, for preview navigation: the finished tiles
-   * of an in-flight run, else the saved results. */
-  function genVisible(): string[] {
-    const running = genRun.slots.filter((s) => s.path).map((s) => s.path as string)
-    return running.length ? running : genResults
-  }
-
-  /** Open a generated image in Filesmith's standalone preview window, with all
-   * the on-screen generated images navigable alongside it. */
+  /** Open a generated image in whatever views images on this machine. */
   function previewGen(path: string): void {
-    const list = genVisible()
-    const files: PreviewItem[] = list.map((p) => ({
-      path: p,
-      name: p.split(/[\\/]/).pop() ?? p,
-      kind: 'image'
-    }))
-    void window.filesmith.openPreviewWindow(files, Math.max(0, list.indexOf(path)))
+    window.filesmith.openFile(path)
   }
 
   function openGenMenu(path: string, x: number, y: number): void {
@@ -637,7 +576,7 @@ export default function App(): JSX.Element {
       x,
       y,
       items: [
-        { label: 'Preview', icon: 'eye', onClick: () => previewGen(path) },
+        { label: 'Open', icon: 'expand', onClick: () => previewGen(path) },
         {
           label: 'Open in default app',
           icon: 'upload',
@@ -1027,7 +966,7 @@ export default function App(): JSX.Element {
                   activeGroup={activeGroup}
                   outThumbs={outThumbs}
                   onItemClick={onItemClick}
-                  onOpen={openPreview}
+                  onOpen={openExternally}
                   onMenu={openMenu}
                   onCancel={cancelJob}
                 />
diff --git a/src/renderer/src/components/AudioVisualizer.tsx b/src/renderer/src/components/AudioVisualizer.tsx
deleted file mode 100644
index 3480738..0000000
--- a/src/renderer/src/components/AudioVisualizer.tsx
+++ /dev/null
@@ -1,260 +0,0 @@
-import { useEffect, useRef, type JSX } from 'react'
-
-// One shared AudioContext for the window; a MediaElementSource can only be made
-// once per element, so cache it (and survive React StrictMode's double-invoke).
-let audioCtx: AudioContext | null = null
-function getAudioContext(): AudioContext {
-  audioCtx ??= new AudioContext()
-  return audioCtx
-}
-const sourceCache = new WeakMap<HTMLMediaElement, MediaElementAudioSourceNode>()
-function getSource(ctx: AudioContext, el: HTMLMediaElement): MediaElementAudioSourceNode {
-  let s = sourceCache.get(el)
-  if (!s) {
-    s = ctx.createMediaElementSource(el)
-    sourceCache.set(el, s)
-  }
-  return s
-}
-
-// Tuned preset (see memory: filesmith-visualizer-settings). A radial spectrum:
-// frequency bars spike outward from a base ring, bass biggest at the bottom,
-// mirrored and colored indigo -> violet -> coral around the circle.
-const BAR_LEN = 0.26 // max bar length as fraction of min dimension
-const BAR_WIDTH = 3 // bar thickness (px)
-const BARS = 272 // total bars around the ring
-const MIN_BAR = 0 // idle bar length (floor)
-const LEVEL = 2.1 // overall level
-const TILT = 2.1 // lift quieter high frequencies
-const CONTRAST = 2.9 // >1 widens the gap between bars
-const BOOM_GAIN = 0.18 // big-bass/drop -> base-ring pulse
-const BOOM_THRESH = 0.84
-const BOOM_RELEASE = 0.975
-const RESPONSIVENESS = 0.1 // how MUCH bars move
-const REACTION_SPEED = 0.1 // how FAST bars move (temporal smoothing)
-const RADIUS = 0.2 // base ring radius as fraction of min dimension
-const RING_WIDTH = 3.5 // base ring thickness (0 = off)
-const GLOW = 0 // bar glow (shadowBlur)
-const CORE_FRAC = 0.98 // aurora radius as fraction of the ring's inner radius (fills it)
-const SPIN = 0 // ring rotation per frame
-const MIRROR: boolean = true // symmetric (bass at bottom) vs sequential
-const NORMAL_SCALE = 1.25 // overall size in the normal preview
-const FS_SCALE = 1.9 // overall size in fullscreen (expand a lot)
-
-// Palette sweep for the bars: indigo -> violet -> coral.
-function lerpHex(a: string, b: string, t: number): string {
-  const ah = parseInt(a.slice(1), 16)
-  const bh = parseInt(b.slice(1), 16)
-  const ar = ah >> 16
-  const ag = (ah >> 8) & 255
-  const ab = ah & 255
-  const br = bh >> 16
-  const bg = (bh >> 8) & 255
-  const bb = bh & 255
-  const r = Math.round(ar + (br - ar) * t)
-  const g = Math.round(ag + (bg - ag) * t)
-  const bl = Math.round(ab + (bb - ab) * t)
-  return `rgb(${r},${g},${bl})`
-}
-function paletteAt(t: number): string {
-  return t < 0.5
-    ? lerpHex('#5b5bd6', '#9a6cff', t / 0.5)
-    : lerpHex('#9a6cff', '#ff9a8b', (t - 0.5) / 0.5)
-}
-
-/**
- * Radial spectrum audio visualizer on a shared AnalyserNode. Silent -> a quiet
- * ring of short bars; playing -> bars spike per frequency band.
- */
-export function AudioVisualizer({ media }: { media: HTMLMediaElement | null }): JSX.Element {
-  const canvasRef = useRef<HTMLCanvasElement>(null)
-  const analyserRef = useRef<AnalyserNode | null>(null)
-
-  useEffect(() => {
-    if (!media) return
-    const ctx = getAudioContext()
-    let source: MediaElementAudioSourceNode
-    try {
-      source = getSource(ctx, media)
-    } catch {
-      return // media not CORS-readable; leave the idle ring
-    }
-    const analyser = ctx.createAnalyser()
-    analyser.fftSize = 2048
-    analyser.smoothingTimeConstant = 0.5
-    source.connect(analyser)
-    analyser.connect(ctx.destination)
-    analyserRef.current = analyser
-    const resume = (): void => {
-      if (ctx.state === 'suspended') void ctx.resume()
-    }
-    media.addEventListener('play', resume)
-    window.addEventListener('pointerdown', resume)
-    if (!media.paused) resume()
-    return () => {
-      media.removeEventListener('play', resume)
-      window.removeEventListener('pointerdown', resume)
-      try {
-        source.disconnect()
-      } catch {
-        /* already disconnected */
-      }
-      analyser.disconnect()
-      analyserRef.current = null
-    }
-  }, [media])
-
-  useEffect(() => {
-    const canvas = canvasRef.current
-    if (!canvas) return
-    const g = canvas.getContext('2d')
-    if (!g) return
-    const DPR = Math.max(1, Math.min(2, window.devicePixelRatio || 1))
-    const freq = new Uint8Array(1024)
-    const barVals = new Float32Array(256)
-    let raf = 0
-    let boomHold = 0
-    let spin = 0
-
-    const fit = (): void => {
-      const r = canvas.getBoundingClientRect()
-      const w = Math.round(r.width * DPR)
-      const h = Math.round(r.height * DPR)
-      if (canvas.width !== w || canvas.height !== h) {
-        canvas.width = w
-        canvas.height = h
-      }
-    }
-    const band = (a: number, b: number): number => {
-      let s = 0
-      for (let i = a; i < b; i++) s += freq[i]
-      return s / (b - a) / 255
-    }
-
-    const draw = (): void => {
-      fit()
-      const W = canvas.width
-      const H = canvas.height
-      g.clearRect(0, 0, W, H)
-
-      const an = analyserRef.current
-      const live = an != null && audioCtx?.state === 'running'
-      if (live) an.getByteFrequencyData(freq)
-      const bass = live ? band(1, 12) : 0
-
-      const denom = Math.max(0.05, 1 - BOOM_THRESH)
-      const boomRaw = Math.pow(Math.max(0, (bass - BOOM_THRESH) / denom), 1.5)
-      boomHold = Math.max(boomRaw, boomHold * BOOM_RELEASE)
-      const boom = boomHold
-      spin += SPIN
-
-      const cx = W / 2
-      const cy = H / 2
-      const minD = Math.min(W, H)
-      // Bigger in the normal preview, much bigger when the stage is fullscreen.
-      const scale = document.fullscreenElement ? FS_SCALE : NORMAL_SCALE
-      const half = MIRROR ? Math.max(1, Math.floor(BARS / 2)) : BARS
-      const total = MIRROR ? half * 2 : BARS
-
-      // Update smoothed bar heights from the spectrum. Log-ish bin spread (more
-      // bars at low frequencies where the energy is), a contrast power curve to
-      // widen the gap between bars, and a treble tilt to lift quiet highs.
-      for (let m = 0; m < half; m++) {
-        const frac = m / half
-        const bin = 2 + Math.floor(Math.pow(frac, 1.5) * 430)
-        const raw = live ? freq[Math.min(freq.length - 1, bin)] / 255 : 0
-        const shaped = Math.pow(raw, CONTRAST)
-        const tilted = shaped * (1 + frac * TILT)
-        const target = tilted * LEVEL * RESPONSIVENESS
-        barVals[m] += (target - barVals[m]) * REACTION_SPEED
-      }
-
-      const Rbase = minD * RADIUS * scale * (1 + boom * BOOM_GAIN)
-      // Root the bars on the ring's centerline; the base ring is stroked AFTER
-      // the bars (below) so it covers their inner roots and they read as grown
-      // out of the ring rather than floating beside it.
-      const rIn = Rbase
-      const tipMax = minD * 0.48
-      g.lineCap = 'round'
-      g.lineWidth = BAR_WIDTH * DPR
-      g.shadowColor = 'rgba(120,110,255,0.5)'
-      g.shadowBlur = GLOW * DPR
-      for (let j = 0; j < total; j++) {
-        let m = MIRROR ? (j < half ? j : total - 1 - j) : j
-        if (m >= half) m = half - 1
-        const t = m / Math.max(1, half - 1)
-        const a = Math.PI / 2 + spin + ((j + 0.5) / total) * Math.PI * 2 // bass seam at bottom
-        let tip = rIn + minD * (MIN_BAR + barVals[m] * BAR_LEN) * scale
-        if (tip > tipMax) tip = tipMax
-        const ca = Math.cos(a)
-        const sa = Math.sin(a)
-        g.strokeStyle = paletteAt(t)
-        g.beginPath()
-        g.moveTo(cx + ca * rIn, cy + sa * rIn)
-        g.lineTo(cx + ca * tip, cy + sa * tip)
-        g.stroke()
-      }
-      g.shadowBlur = 0
-
-      // Base ring outline the bars grow from.
-      if (RING_WIDTH > 0) {
-        g.beginPath()
-        g.arc(cx, cy, Rbase, 0, Math.PI * 2)
-        g.strokeStyle = 'rgba(120,110,255,0.55)'
-        g.lineWidth = RING_WIDTH * DPR
-        g.stroke()
-      }
-
-      // Center "app tile" — a rounded gradient app-icon tile with a white music
-      // note inside, sitting in the ring's hole. Gentle beat pulse only.
-      const vr = Rbase * CORE_FRAC
-      const side = vr * 1.08 * (1 + boom * 0.05)
-      const rad = side * 0.24
-      g.save()
-      g.translate(cx, cy)
-      const tileGrad = g.createLinearGradient(-side / 2, -side / 2, side / 2, side / 2)
-      tileGrad.addColorStop(0, '#5b5bd6')
-      tileGrad.addColorStop(0.55, '#9a6cff')
-      tileGrad.addColorStop(1, '#ff9a8b')
-      g.shadowColor = 'rgba(120,90,255,0.4)'
-      g.shadowBlur = side * 0.16
-      g.shadowOffsetY = side * 0.05
-      g.beginPath()
-      g.roundRect(-side / 2, -side / 2, side, side, rad)
-      g.fillStyle = tileGrad
-      g.fill()
-      g.shadowBlur = 0
-      g.shadowOffsetY = 0
-      // white music note, centered on the tile
-      const nsc = (side * 0.6) / 24
-      g.save()
-      g.scale(nsc, nsc)
-      g.translate(-12, -12)
-      g.strokeStyle = '#ffffff'
-      g.fillStyle = '#ffffff'
-      g.lineWidth = 2.2
-      g.lineJoin = 'round'
-      g.lineCap = 'round'
-      g.beginPath()
-      g.moveTo(9, 18)
-      g.lineTo(9, 5)
-      g.lineTo(21, 3)
-      g.lineTo(21, 16)
-      g.stroke()
-      g.beginPath()
-      g.arc(6, 18, 3, 0, Math.PI * 2)
-      g.fill()
-      g.beginPath()
-      g.arc(18, 16, 3, 0, Math.PI * 2)
-      g.fill()
-      g.restore()
-      g.restore()
-
-      raf = requestAnimationFrame(draw)
-    }
-    raf = requestAnimationFrame(draw)
-    return () => cancelAnimationFrame(raf)
-  }, [])
-
-  return <canvas ref={canvasRef} className="h-full w-full" />
-}
diff --git a/src/renderer/src/components/MediaBar.tsx b/src/renderer/src/components/MediaBar.tsx
deleted file mode 100644
index e15f7eb..0000000
--- a/src/renderer/src/components/MediaBar.tsx
+++ /dev/null
@@ -1,200 +0,0 @@
-import { useEffect, useRef, useState, type CSSProperties, type JSX, type MouseEvent } from 'react'
-import { Icon } from './Icon'
-
-const clamp = (v: number, lo: number, hi: number): number => Math.max(lo, Math.min(hi, v))
-const fmt = (s: number): string => {
-  const t = !Number.isFinite(s) || s < 0 ? 0 : s
-  const m = Math.floor(t / 60)
-  const sec = Math.floor(t % 60)
-  return `${m}:${sec.toString().padStart(2, '0')}`
-}
-
-// Element mutations in plain helpers so hooks/immutability doesn't flag them.
-function seekMedia(m: HTMLMediaElement, t: number): void {
-  m.currentTime = t
-}
-function togglePlay(m: HTMLMediaElement): void {
-  if (m.paused) void m.play()
-  else m.pause()
-}
-function toggleMute(m: HTMLMediaElement): void {
-  m.muted = !m.muted
-}
-function applyVolume(m: HTMLMediaElement, v: number): void {
-  m.volume = v
-  m.muted = v <= 0
-}
-function setPlaybackRate(m: HTMLMediaElement, r: number): void {
-  m.playbackRate = r
-}
-const SPEEDS = [0.5, 0.75, 1, 1.25, 1.5, 2]
-
-const vertical: CSSProperties = {
-  writingMode: 'vertical-lr',
-  direction: 'rtl',
-  width: '20px',
-  height: '90px'
-}
-
-/**
- * Custom media controls: a muted track, an indigo (accent) elapsed fill, a
- * ringed accent playhead dot, and a vertical volume slider that pops above the
- * speaker on hover. `dark` styles it for a video overlay; otherwise it sits on
- * the light footer. Shared by audio and video; video also gets fullscreen.
- */
-export function MediaBar({
-  media,
-  onFullscreen,
-  dark = false
-}: {
-  media: HTMLMediaElement | null
-  onFullscreen?: () => void
-  dark?: boolean
-}): JSX.Element | null {
-  const [cur, setCur] = useState(0)
-  const [dur, setDur] = useState(0)
-  const [playing, setPlaying] = useState(false)
-  const [muted, setMuted] = useState(false)
-  const [vol, setVol] = useState(1)
-  const [rate, setRate] = useState(1)
-  const barRef = useRef<HTMLDivElement>(null)
-
-  useEffect(() => {
-    if (!media) return
-    const onTime = (): void => setCur(media.currentTime)
-    const sync = (): void => {
-      setPlaying(!media.paused)
-      setMuted(media.muted)
-      setVol(media.volume)
-      setRate(media.playbackRate)
-      setDur(Number.isFinite(media.duration) ? media.duration : 0)
-    }
-    const evs = ['durationchange', 'loadedmetadata', 'play', 'pause', 'volumechange', 'ratechange']
-    media.addEventListener('timeupdate', onTime)
-    evs.forEach((e) => media.addEventListener(e, sync))
-    sync()
-    onTime()
-    return () => {
-      media.removeEventListener('timeupdate', onTime)
-      evs.forEach((e) => media.removeEventListener(e, sync))
-    }
-  }, [media])
-
-  if (!media) return null
-  const frac = dur > 0 ? clamp(cur / dur, 0, 1) : 0
-
-  const seekTo = (clientX: number): void => {
-    const r = barRef.current?.getBoundingClientRect()
-    if (!r || dur <= 0) return
-    const t = clamp((clientX - r.left) / r.width, 0, 1) * dur
-    seekMedia(media, t)
-    setCur(t)
-  }
-  const onBarDown = (e: MouseEvent): void => {
-    e.preventDefault()
-    seekTo(e.clientX)
-    const move = (ev: globalThis.MouseEvent): void => seekTo(ev.clientX)
-    const up = (): void => {
-      window.removeEventListener('mousemove', move)
-      window.removeEventListener('mouseup', up)
-    }
-    window.addEventListener('mousemove', move)
-    window.addEventListener('mouseup', up)
-  }
-
-  const hover = dark
-    ? 'text-white/90 hover:bg-white/15 hover:text-white'
-    : 'text-muted hover:bg-black/[.06] hover:text-ink'
-  const btn = `grid h-8 w-8 shrink-0 place-items-center rounded-full transition ${hover}`
-  // Outer wrapper keeps a transparent hover "bridge" (pb-2) over the gap so the
-  // popover doesn't close while the cursor travels from button to menu.
-  const popoverOuter =
-    'pointer-events-none absolute bottom-full left-1/2 -translate-x-1/2 pb-2 opacity-0 transition'
-  const popoverInner = `rounded-xl shadow-[0_6px_20px_rgba(0,0,0,.25)] ${
-    dark ? 'bg-[#2c2c33]' : 'bg-white ring-1 ring-black/[.06]'
-  }`
-
-  return (
-    <div className="flex items-center gap-2.5">
-      <button className={btn} title={playing ? 'Pause' : 'Play'} onClick={() => togglePlay(media)}>
-        <Icon name={playing ? 'pause' : 'play'} className="h-[17px] w-[17px]" strokeWidth={0} />
-      </button>
-      <span
-        className={`shrink-0 text-[12px] font-medium tabular-nums ${dark ? 'text-white/85' : 'text-muted'}`}
-      >
-        {fmt(cur)} / {fmt(dur)}
-      </span>
-      <div onMouseDown={onBarDown} className="relative flex-1 cursor-pointer py-2.5">
-        <div
-          ref={barRef}
-          className={`relative h-1.5 rounded-full ${dark ? 'bg-white/25' : 'bg-black/10'}`}
-        >
-          <div
-            className="absolute inset-y-0 left-0 rounded-full bg-accent"
-            style={{ width: `${frac * 100}%` }}
-          />
-          <div
-            className="absolute top-1/2 h-4 w-4 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white bg-accent shadow-[0_1px_3px_rgba(0,0,0,.3)]"
-            style={{ left: `${frac * 100}%` }}
-          />
-        </div>
-      </div>
-      <div className="group/spd relative flex items-center">
-        <div
-          className={`${popoverOuter} group-hover/spd:pointer-events-auto group-hover/spd:opacity-100`}
-        >
-          <div className={`${popoverInner} flex flex-col p-1`}>
-            {SPEEDS.map((s) => (
-              <button
-                key={s}
-                onClick={() => setPlaybackRate(media, s)}
-                className={`rounded-md px-3.5 py-1 text-[12px] font-medium transition ${
-                  s === rate
-                    ? 'text-accent'
-                    : dark
-                      ? 'text-white/85 hover:bg-white/10'
-                      : 'text-muted hover:bg-black/[.05]'
-                }`}
-              >
-                {s}×
-              </button>
-            ))}
-          </div>
-        </div>
-        <button
-          className={`grid h-8 w-12 shrink-0 place-items-center rounded-full text-[12px] font-semibold tabular-nums transition ${hover}`}
-          title="Playback speed"
-        >
-          {rate}×
-        </button>
-      </div>
-      <div className="group/vol relative flex items-center">
-        <div
-          className={`${popoverOuter} group-hover/vol:pointer-events-auto group-hover/vol:opacity-100`}
-        >
-          <div className={`${popoverInner} grid place-items-center p-2.5`}>
-            <input
-              type="range"
-              min={0}
-              max={1}
-              step={0.02}
-              value={muted ? 0 : vol}
-              onChange={(e) => applyVolume(media, Number(e.currentTarget.value))}
-              aria-label="Volume"
-              className="cursor-pointer accent-accent"
-              style={vertical}
-            />
-          </div>
-        </div>
-        <button className={btn} title={muted ? 'Unmute' : 'Mute'} onClick={() => toggleMute(media)}>
-          <Icon name={muted || vol <= 0 ? 'volume-mute' : 'volume'} className="h-[18px] w-[18px]" />
-        </button>
-      </div>
-      {onFullscreen && (
-        <button className={btn} title="Fullscreen" onClick={onFullscreen}>
-          <Icon name="fullscreen" className="h-[17px] w-[17px]" />
-        </button>
-      )}
-    </div>
-  )
-}
diff --git a/src/renderer/src/components/PreviewWindow.tsx b/src/renderer/src/components/PreviewWindow.tsx
deleted file mode 100644
index bc5119c..0000000
--- a/src/renderer/src/components/PreviewWindow.tsx
+++ /dev/null
@@ -1,489 +0,0 @@
-import { useEffect, useRef, useState, type JSX, type MouseEvent, type WheelEvent } from 'react'
-import type { PreviewItem, PreviewPayload } from '@shared/types'
-import { formatBytes } from '../state'
-import { renderMarkdown } from '../lib/markdown'
-import { Icon } from './Icon'
-import { MediaBar } from './MediaBar'
-import { AudioVisualizer } from './AudioVisualizer'
-
-const extOf = (name: string): string => {
-  const i = name.lastIndexOf('.')
-  return i > 0 ? name.slice(i + 1).toUpperCase() : ''
-}
-const clamp = (v: number, lo: number, hi: number): number => Math.max(lo, Math.min(hi, v))
-const MAX_ZOOM = 40
-
-// Some containers (notably MP3) don't report duration up front, so Chromium
-// leaves it Infinity and the progress bar never advances during playback until
-// a seek forces it to compute. Nudging currentTime to the end and back resolves
-// it, so the timeline works from the start. Returns true if it applied.
-function forceDuration(m: HTMLMediaElement): boolean {
-  if (m.duration === Infinity || Number.isNaN(m.duration)) {
-    const onT = (): void => {
-      m.removeEventListener('timeupdate', onT)
-      m.currentTime = 0
-    }
-    m.addEventListener('timeupdate', onT)
-    try {
-      m.currentTime = 1e101
-    } catch {
-      /* seek not ready yet; ignore */
-    }
-    return true
-  }
-  return false
-}
-
-/**
- * Centered fallback card shown when a file has no inline preview — the native
- * kind for 'document'/'archive'/'other', and the graceful landing spot when Chromium
- * can't decode an image/video/audio the file-kind heuristic still classified as
- * playable (e.g. .heic, .mkv, .wma). Single source of truth for that markup.
- */
-function FallbackCard({ file }: { file: PreviewItem }): JSX.Element {
-  return (
-    <div className="flex flex-col items-center gap-5 text-center">
-      <div className="grid h-24 w-24 place-items-center rounded-[20px] bg-white text-[16px] font-bold text-accent shadow-[0_10px_28px_rgba(20,20,40,.10)]">
-        {extOf(file.name) || 'FILE'}
-      </div>
-      <div>
-        <div className="text-[14px] font-semibold">{file.name}</div>
-        <div className="mt-1 text-[12.5px] text-muted">
-          No inline preview for {extOf(file.name) || 'this'} files. Convert it, or open it in its
-          app.
-        </div>
-      </div>
-      <button
-        onClick={() => window.filesmith.openFile(file.path)}
-        className="rounded-[11px] bg-accent px-5 py-2.5 text-[13.5px] font-semibold text-white shadow-[0_8px_20px_rgba(91,91,214,.32)] transition hover:bg-accent-hi"
-      >
-        Open in default app
-      </button>
-    </div>
-  )
-}
-
-/**
- * Root of the standalone preview window. Fetches its file list on load and when
- * the window is reused, remounting the view (via `ver`) so index/zoom reset.
- */
-export function PreviewWindow(): JSX.Element | null {
-  const [state, setState] = useState<{ p: PreviewPayload; ver: number } | null>(null)
-  useEffect(() => {
-    void window.filesmith
-      .getPreviewData()
-      .then((p) => setState((s) => ({ p, ver: (s?.ver ?? 0) + 1 })))
-    // Explicit re-open jumps to a new item (bump ver -> remount). A live list
-    // update just swaps the files and keeps the current position (same ver).
-    const unsubUpdate = window.filesmith.onPreviewUpdate((p) =>
-      setState((s) => ({ p, ver: (s?.ver ?? 0) + 1 }))
-    )
-    const unsubList = window.filesmith.onPreviewList((files) =>
-      setState((s) => (s ? { ...s, p: { ...s.p, files } } : s))
-    )
-    return () => {
-      unsubUpdate()
-      unsubList()
-    }
-  }, [])
-  if (!state || state.p.files.length === 0) return <div className="h-screen bg-white" />
-  return <PreviewView key={state.ver} files={state.p.files} start={state.p.index} />
-}
-
-function PreviewView({
-  files,
-  start
-}: {
-  files: PreviewItem[]
-  start: number
-}): JSX.Element | null {
-  const [i, setI] = useState(start)
-  const mediaRef = useRef<HTMLMediaElement | null>(null)
-  const [mediaEl, setMediaEl] = useState<HTMLMediaElement | null>(null)
-  const setMedia = (el: HTMLMediaElement | null): void => {
-    mediaRef.current = el
-    setMediaEl(el)
-  }
-  const many = files.length > 1
-  const step = (d: number): void => setI((n) => (n + d + files.length) % files.length)
-  const close = (): void => window.filesmith.close()
-
-  const [zoom, setZoom] = useState(1)
-  const [tx, setTx] = useState(0)
-  const [ty, setTy] = useState(0)
-  const [panning, setPanning] = useState(false)
-  const [playing, setPlaying] = useState(false)
-  const [audio, setAudio] = useState<{ path: string; src: string } | null>(null)
-  const [pdf, setPdf] = useState<{ path: string; src: string } | null>(null)
-  const [text, setText] = useState<{ path: string; text: string } | null>(null)
-  // Path of the item whose media element failed to decode; when it matches the
-  // shown file we render the fallback card instead of a broken/blank player.
-  const [failed, setFailed] = useState<string | null>(null)
-  const [zoomIndex, setZoomIndex] = useState(i)
-  const stageRef = useRef<HTMLDivElement>(null)
-  if (zoomIndex !== i) {
-    setZoomIndex(i)
-    setZoom(1)
-    setTx(0)
-    setTy(0)
-    setPlaying(false)
-    setFailed(null)
-  }
-
-  useEffect(() => {
-    const onKey = (e: KeyboardEvent): void => {
-      if (e.key === 'Escape') {
-        if (document.fullscreenElement) return // let the browser exit fullscreen
-        close()
-      } else if (e.key === 'ArrowLeft' && many) step(-1)
-      else if (e.key === 'ArrowRight' && many) step(1)
-      else if (e.key === ' ' && mediaRef.current) {
-        e.preventDefault()
-        const m = mediaRef.current
-        if (m.paused) void m.play()
-        else m.pause()
-      }
-    }
-    window.addEventListener('keydown', onKey)
-    return () => window.removeEventListener('keydown', onKey)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [many, files.length])
-
-  // The list can shrink under us (items removed from the queue); keep i valid.
-  if (files.length > 0 && i > files.length - 1) setI(files.length - 1)
-  const f = files[Math.min(i, Math.max(0, files.length - 1))]
-
-  // Audio plays from a same-origin blob URL so the Web Audio visualizer can read
-  // its samples (a cross-origin fsmedia:// source would be silenced).
-  const audioPath = f && f.kind === 'audio' ? f.path : null
-  useEffect(() => {
-    if (!audioPath) return
-    let obj: string | null = null
-    let cancelled = false
-    void window.filesmith.readBytes(audioPath).then((bytes) => {
-      if (cancelled) return
-      if (!bytes) {
-        // Too large for the IPC read cap (or unreadable) — a src-less <audio>
-        // fires no onError, so show the "open in default app" fallback directly.
-        setFailed(audioPath)
-        return
-      }
-      obj = URL.createObjectURL(new Blob([bytes as Uint8Array<ArrayBuffer>]))
-      setAudio({ path: audioPath, src: obj })
-    })
-    return () => {
-      cancelled = true
-      if (obj) URL.revokeObjectURL(obj)
-    }
-  }, [audioPath])
-
-  // PDFs render in Chromium's built-in viewer via a same-origin blob URL.
-  const pdfPath = f && f.kind === 'pdf' ? f.path : null
-  useEffect(() => {
-    if (!pdfPath) return
-    let obj: string | null = null
-    let cancelled = false
-    void window.filesmith.readBytes(pdfPath).then((bytes) => {
-      if (cancelled) return
-      if (!bytes) {
-        // Too large for the IPC read cap (or unreadable) — otherwise the viewer
-        // stays on "Loading…" forever; show the fallback card instead.
-        setFailed(pdfPath)
-        return
-      }
-      obj = URL.createObjectURL(
-        new Blob([bytes as Uint8Array<ArrayBuffer>], { type: 'application/pdf' })
-      )
-      setPdf({ path: pdfPath, src: obj })
-    })
-    return () => {
-      cancelled = true
-      if (obj) URL.revokeObjectURL(obj)
-    }
-  }, [pdfPath])
-
-  // Plain-text/code files load their contents (capped) for a scrollable reader.
-  const textPath = f && f.kind === 'text' ? f.path : null
-  useEffect(() => {
-    if (!textPath) return
-    let cancelled = false
-    void window.filesmith.readText(textPath).then((t) => {
-      if (!cancelled) setText({ path: textPath, text: t ?? '(could not read this file)' })
-    })
-    return () => {
-      cancelled = true
-    }
-  }, [textPath])
-
-  // Only image/video/audio have a fullscreen affordance. If the user arrow-keys
-  // from a fullscreened image into a document/text/PDF/other, drop out of
-  // fullscreen so they aren't stuck viewing a non-media file fullscreen.
-  const fullscreenable = !!f && (f.kind === 'image' || f.kind === 'video' || f.kind === 'audio')
-  useEffect(() => {
-    if (!fullscreenable && document.fullscreenElement) void document.exitFullscreen()
-  }, [fullscreenable, f?.path])
-
-  if (!f) return null
-  const showFallback = failed === f.path
-  const url = window.filesmith.mediaUrl(f.path)
-  const audioSrc = audio && audio.path === audioPath ? audio.src : undefined
-  const meta = `${extOf(f.name)}${f.size ? ` · ${formatBytes(f.size)}` : ''}`
-  const isMd = f.kind === 'text' && ['md', 'markdown'].includes(extOf(f.name).toLowerCase())
-
-  const cursorFromCentre = (e: { clientX: number; clientY: number }): [number, number] => {
-    const r = stageRef.current?.getBoundingClientRect()
-    if (!r) return [0, 0]
-    return [e.clientX - r.left - r.width / 2, e.clientY - r.top - r.height / 2]
-  }
-
-  function zoomAt(e: { clientX: number; clientY: number }, next: number): void {
-    const ns = clamp(next, 1, MAX_ZOOM)
-    if (ns === 1) {
-      setZoom(1)
-      setTx(0)
-      setTy(0)
-      return
-    }
-    const [cx, cy] = cursorFromCentre(e)
-    const k = ns / zoom
-    setTx(cx - k * (cx - tx))
-    setTy(cy - k * (cy - ty))
-    setZoom(ns)
-  }
-
-  function onWheel(e: WheelEvent): void {
-    if (f.kind !== 'image') return
-    zoomAt(e, zoom * (e.deltaY < 0 ? 1.18 : 1 / 1.18))
-  }
-
-  function onImgDown(e: MouseEvent): void {
-    if (f.kind !== 'image' || zoom <= 1) return
-    e.preventDefault()
-    const orig = { x: e.clientX, y: e.clientY, tx, ty }
-    setPanning(true)
-    const move = (ev: globalThis.MouseEvent): void => {
-      setTx(orig.tx + (ev.clientX - orig.x))
-      setTy(orig.ty + (ev.clientY - orig.y))
-    }
-    const up = (): void => {
-      setPanning(false)
-      window.removeEventListener('mousemove', move)
-      window.removeEventListener('mouseup', up)
-    }
-    window.addEventListener('mousemove', move)
-    window.addEventListener('mouseup', up)
-  }
-
-  const imgCursor = f.kind === 'image' && zoom > 1 ? (panning ? 'grabbing' : 'grab') : 'default'
-  const toggleFs = (): void => {
-    if (document.fullscreenElement) void document.exitFullscreen()
-    else void stageRef.current?.requestFullscreen()
-  }
-
-  return (
-    <div className="flex h-screen flex-col bg-white">
-      {/* header doubles as the window's drag region; close runs into the corner */}
-      <div className="drag flex shrink-0 items-stretch border-b border-line">
-        <div className="flex min-w-0 flex-1 items-center gap-3 py-3 pl-4 pr-3">
-          <div className="min-w-0">
-            <div className="truncate text-[13.5px] font-bold">{f.name}</div>
-            <div className="mt-0.5 text-[11.5px] text-dim">{meta}</div>
-          </div>
-          <div className="flex-1" />
-          <button
-            title="Reveal in Explorer"
-            onClick={() => window.filesmith.reveal(f.path)}
-            className="no-drag grid h-[34px] w-[34px] shrink-0 place-items-center rounded-[9px] text-muted transition hover:bg-[#f0f0f5] hover:text-ink"
-          >
-            <Icon name="folder" className="h-[18px] w-[18px]" />
-          </button>
-          {many && <span className="text-[11.5px] text-dim">{`${i + 1} / ${files.length}`}</span>}
-        </div>
-        <button
-          title="Close"
-          onClick={close}
-          className="no-drag grid w-12 shrink-0 place-items-center text-muted transition hover:bg-black/[.06] hover:text-ink"
-        >
-          <Icon name="close" className="h-[18px] w-[18px]" />
-        </button>
-      </div>
-
-      {/* media — one light, opaque backdrop for every kind */}
-      <div
-        ref={stageRef}
-        onWheel={onWheel}
-        className="preview-stage relative flex min-h-0 flex-1 items-center justify-center overflow-hidden bg-[#f1f1f4] p-5"
-      >
-        {f.kind === 'image' && !showFallback && (
-          <img
-            src={url}
-            alt={f.name}
-            draggable={false}
-            onError={() => setFailed(f.path)}
-            onMouseDown={onImgDown}
-            onDoubleClick={(e) => zoomAt(e, zoom > 1 ? 1 : 2)}
-            style={{
-              transform: `translate(${tx}px, ${ty}px) scale(${zoom})`,
-              cursor: imgCursor,
-              transition: panning ? 'none' : 'transform .12s ease-out'
-            }}
-            className="max-h-full max-w-full object-contain"
-          />
-        )}
-        {f.kind === 'video' && !showFallback && (
-          <>
-            <video
-              key={url}
-              ref={setMedia}
-              src={url}
-              preload="metadata"
-              onError={() => setFailed(f.path)}
-              onPlay={() => setPlaying(true)}
-              onPause={() => setPlaying(false)}
-              onClick={() => {
-                const m = mediaRef.current
-                if (m?.paused) void m.play()
-                else m?.pause()
-              }}
-              onLoadedMetadata={(e) => {
-                const v = e.currentTarget
-                // Resolve duration if missing; otherwise show a real first frame
-                // (not black) — playback only starts when the user hits play.
-                if (!forceDuration(v) && v.currentTime < 0.02) {
-                  try {
-                    v.currentTime = 0.04
-                  } catch {
-                    /* seek not ready yet; ignore */
-                  }
-                }
-              }}
-              className="h-full w-full cursor-pointer rounded-lg object-contain"
-            />
-            {!playing && (
-              <button
-                onClick={() => void mediaRef.current?.play()}
-                title="Play"
-                className="absolute left-1/2 top-1/2 grid h-[74px] w-[74px] -translate-x-1/2 -translate-y-1/2 place-items-center rounded-full bg-[#2b2b31] shadow-[0_6px_20px_rgba(0,0,0,.3)] transition hover:scale-105 hover:bg-[#37373f]"
-              >
-                <Icon name="play" className="ml-1 h-8 w-8 text-white" />
-              </button>
-            )}
-            {/* control overlay shown only in fullscreen (the footer bar is hidden there) */}
-            <div className="fs-bar absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent px-6 pb-4 pt-12">
-              <MediaBar media={mediaEl} onFullscreen={toggleFs} dark />
-            </div>
-          </>
-        )}
-        {f.kind === 'audio' && !showFallback && (
-          <>
-            <div className="fs-art relative h-full w-full">
-              <AudioVisualizer media={mediaEl} />
-            </div>
-            {/* control overlay shown only in fullscreen (footer bar is hidden there) */}
-            <div className="fs-bar absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent px-6 pb-4 pt-12">
-              <MediaBar media={mediaEl} onFullscreen={toggleFs} dark />
-            </div>
-          </>
-        )}
-        {f.kind === 'pdf' &&
-          !showFallback &&
-          (pdf && pdf.path === pdfPath ? (
-            <iframe
-              key={pdf.src}
-              title={f.name}
-              // Strip Chromium's built-in PDF chrome so only the document shows:
-              // toolbar=0 removes the top bar (download/print/page/zoom),
-              // navpanes=0 removes the thumbnail/bookmark sidebar; view=FitH
-              // fits the page width. Wheel scroll + ctrl-wheel zoom still work.
-              src={`${pdf.src}#toolbar=0&navpanes=0&view=FitH`}
-              className="h-full w-full rounded-lg border-0 bg-white"
-            />
-          ) : (
-            <div className="text-[13px] text-muted">Loading…</div>
-          ))}
-        {f.kind === 'text' &&
-          (isMd ? (
-            <div
-              className="scroll-thin md-body h-full w-full overflow-auto rounded-lg bg-white px-8 py-7 text-left shadow-[inset_0_0_0_1px_rgba(20,20,40,.06)]"
-              dangerouslySetInnerHTML={{
-                __html:
-                  text && text.path === textPath
-                    ? renderMarkdown(text.text, f.path.replace(/[\\/][^\\/]*$/, ''))
-                    : ''
-              }}
-            />
-          ) : (
-            <pre className="scroll-thin h-full w-full overflow-auto whitespace-pre-wrap break-words rounded-lg bg-white p-5 text-left font-mono text-[12.5px] leading-relaxed text-ink shadow-[inset_0_0_0_1px_rgba(20,20,40,.06)]">
-              {text && text.path === textPath ? text.text : ''}
-            </pre>
-          ))}
-        {(f.kind === 'document' || f.kind === 'archive' || f.kind === 'other' || showFallback) && (
-          <FallbackCard file={f} />
-        )}
-
-        {/* Non-video formats: a corner "expand" button to view fullscreen. */}
-        {(f.kind === 'image' || f.kind === 'audio') && !showFallback && (
-          <button
-            onClick={toggleFs}
-            title="View fullscreen"
-            className="fs-hide absolute right-3.5 top-3.5 grid h-9 w-9 place-items-center rounded-full bg-white text-ink shadow-[0_3px_12px_rgba(0,0,0,.16)] transition hover:scale-105"
-          >
-            <Icon name="expand" className="h-[17px] w-[17px]" />
-          </button>
-        )}
-
-        {f.kind === 'image' && zoom > 1 && (
-          <button
-            onClick={() => {
-              setZoom(1)
-              setTx(0)
-              setTy(0)
-            }}
-            title="Reset zoom"
-            className="absolute bottom-3 left-3 rounded-full bg-white/90 px-3 py-1 text-[11.5px] font-semibold text-ink shadow-[0_2px_8px_rgba(0,0,0,.14)] backdrop-blur transition hover:bg-white"
-          >
-            {Math.round(zoom * 100)}% · Reset
-          </button>
-        )}
-
-        {many && (
-          <>
-            <button
-              onClick={() => step(-1)}
-              title="Previous"
-              className="fs-hide absolute left-3.5 top-1/2 grid h-10 w-10 -translate-y-1/2 place-items-center rounded-full bg-white text-ink shadow-[0_3px_12px_rgba(0,0,0,.16)] transition hover:scale-105"
-            >
-              <Icon name="chevron-left" className="h-5 w-5" />
-            </button>
-            <button
-              onClick={() => step(1)}
-              title="Next"
-              className="fs-hide absolute right-3.5 top-1/2 grid h-10 w-10 -translate-y-1/2 place-items-center rounded-full bg-white text-ink shadow-[0_3px_12px_rgba(0,0,0,.16)] transition hover:scale-105"
-            >
-              <Icon name="chevron-right" className="h-5 w-5" />
-            </button>
-          </>
-        )}
-      </div>
-
-      {(f.kind === 'video' || f.kind === 'audio') && !showFallback && (
-        <div className="shrink-0 border-t border-line px-4 py-3">
-          {f.kind === 'audio' && (
-            <audio
-              key={url}
-              ref={setMedia}
-              src={audioSrc}
-              preload="metadata"
-              onError={() => setFailed(f.path)}
-              onPlay={() => setPlaying(true)}
-              onPause={() => setPlaying(false)}
-              onLoadedMetadata={(e) => forceDuration(e.currentTarget)}
-              className="hidden"
-            />
-          )}
-          <MediaBar media={mediaEl} onFullscreen={f.kind === 'video' ? toggleFs : undefined} />
-        </div>
-      )}
-    </div>
-  )
-}
diff --git a/src/renderer/src/lib/markdown.ts b/src/renderer/src/lib/markdown.ts
deleted file mode 100644
index 299ac49..0000000
--- a/src/renderer/src/lib/markdown.ts
+++ /dev/null
@@ -1,294 +0,0 @@
-// Minimal, dependency-free Markdown -> HTML for the text preview. Block structure
-// is parsed from the RAW lines; only text CONTENT is HTML-escaped (via inline()),
-// so block markers like `>` survive. A safe subset of raw HTML (common in READMEs
-// for centered logos) passes through a sanitizer that strips scripts, event
-// handlers, and javascript: URLs. Relative image paths resolve against the file's
-// directory and load through the fsmedia:// protocol. No untrusted script reaches
-// the DOM.
-
-function esc(s: string): string {
-  return s
-    .replace(/&/g, '&amp;')
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;')
-    .replace(/"/g, '&quot;')
-}
-
-/** A URL is "relative" if it has no scheme, protocol, anchor, or root slash. */
-const isRel = (url: string): boolean => !/^([a-zA-Z][\w+.-]*:|\/\/|#|\/)/.test(url)
-
-const NAMED_ENTITIES: Record<string, string> = {
-  amp: '&',
-  lt: '<',
-  gt: '>',
-  quot: '"',
-  apos: "'"
-}
-
-/**
- * Fully decode HTML entities (named + numeric, semicolon optional). Runs to a
- * fixed point so layered encodings — e.g. our own esc() turning `&#115;` into
- * `&amp;#115;` — collapse back to the real character before a scheme check.
- */
-function decodeEntities(s: string): string {
-  let prev = ''
-  let cur = s
-  for (let i = 0; i < 5 && cur !== prev; i++) {
-    prev = cur
-    cur = cur.replace(/&(#x[0-9a-f]+|#[0-9]+|[a-z][a-z0-9]*);?/gi, (m, body: string) => {
-      if (body[0] === '#') {
-        const code =
-          body[1].toLowerCase() === 'x' ? parseInt(body.slice(2), 16) : parseInt(body.slice(1), 10)
-        if (!Number.isFinite(code) || code < 0 || code > 0x10ffff) return m
-        try {
-          return String.fromCodePoint(code)
-        } catch {
-          return m
-        }
-      }
-      const key = body.toLowerCase()
-      return Object.prototype.hasOwnProperty.call(NAMED_ENTITIES, key) ? NAMED_ENTITIES[key] : m
-    })
-  }
-  return cur
-}
-
-// Browsers strip whitespace and C0 control chars from URLs before acting on the
-// scheme, so we do the same before allowlist-checking. Matching control chars is
-// the whole point here, so the no-control-regex rule is intentionally disabled.
-// eslint-disable-next-line no-control-regex
-const URL_STRIP = new RegExp('[\u0000-\u0020]+', 'g')
-
-/**
- * Allowlist for link/autolink hrefs. Permits only http(s):, mailto:, `#`
- * fragments, and relative/root paths; every other scheme (data:, vbscript:, and
- * anything unknown) is rejected. Entities are decoded first, and browser-ignored
- * whitespace/control chars stripped, so obfuscated schemes can't slip through.
- */
-function isSafeUrl(url: string): boolean {
-  const cleaned = decodeEntities(url).replace(URL_STRIP, '')
-  const scheme = /^([a-z][a-z0-9+.-]*):/i.exec(cleaned)
-  if (!scheme) return true // no scheme: #fragment, /root, ./ ../ relative, or bare filename
-  return /^(https?|mailto)$/i.test(scheme[1])
-}
-
-/** Resolve `rel` against `baseDir` (forward-slashed), collapsing . and .. */
-function joinPath(baseDir: string, rel: string): string {
-  const parts = (
-    baseDir.replace(/\\/g, '/').replace(/\/+$/, '') +
-    '/' +
-    rel.replace(/\\/g, '/')
-  ).split('/')
-  const stack: string[] = []
-  for (const p of parts) {
-    if (p === '' || p === '.') continue
-    if (p === '..') stack.pop()
-    else stack.push(p)
-  }
-  return stack.join('/')
-}
-
-/** Map a URL to a loadable src: relative paths become fsmedia:// under baseDir. */
-function resolveSrc(url: string, baseDir?: string): string {
-  if (!baseDir || !isRel(url)) return url
-  return `fsmedia://local/${encodeURIComponent(joinPath(baseDir, url))}`
-}
-
-/** Escape text, then apply inline Markdown (code, links, images, bold, italic). */
-function inline(s: string, baseDir?: string): string {
-  return esc(s)
-    .replace(/!\[([^\]]*)\]\(([^)\s]+)[^)]*\)/g, (_m, alt: string, url: string) => {
-      const src = resolveSrc(url, baseDir)
-      return /^(https?:|data:image\/|fsmedia:)/i.test(src) ? `<img alt="${alt}" src="${src}">` : alt
-    })
-    .replace(/\[([^\]]+)\]\(([^)\s]+)[^)]*\)/g, (_m, t: string, url: string) => {
-      const safe = isSafeUrl(url) ? url : '#'
-      return `<a href="${safe}" target="_blank" rel="noreferrer">${t}</a>`
-    })
-    .replace(/`([^`]+)`/g, '<code>$1</code>')
-    .replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>')
-    .replace(/(^|[^*])\*([^*\s][^*]*)\*/g, '$1<em>$2</em>')
-    .replace(/(^|[^\w])_([^_\s][^_]*)_/g, '$1<em>$2</em>')
-}
-
-/** Strip dangerous tags/attributes from raw HTML that passes through. */
-function sanitizeHtml(s: string): string {
-  return s
-    .replace(/<(script|style)[\s\S]*?<\/\1>/gi, '')
-    .replace(
-      /<\/?(script|style|iframe|object|embed|link|meta|base|form|input|button)\b[^>]*>/gi,
-      ''
-    )
-    .replace(/\son\w+\s*=\s*("[^"]*"|'[^']*'|[^\s>]+)/gi, '')
-    .replace(/(href|src)\s*=\s*("|')\s*javascript:[^"']*\2/gi, '$1="#"')
-}
-
-/** Rewrite relative src="…" in raw HTML to fsmedia:// under baseDir. */
-function resolveHtmlSrcs(html: string, baseDir?: string): string {
-  if (!baseDir) return html
-  return html.replace(
-    /(\ssrc\s*=\s*)("|')([^"']+)\2/gi,
-    (m, pre: string, q: string, url: string) =>
-      isRel(url) ? `${pre}${q}${resolveSrc(url, baseDir)}${q}` : m
-  )
-}
-
-const isHtmlLine = (line: string): boolean => /^<\/?[a-zA-Z][\s\S]*>$/.test(line.trim())
-const cells = (row: string): string[] =>
-  row
-    .replace(/^\s*\|/, '')
-    .replace(/\|\s*$/, '')
-    .split('|')
-    .map((c) => c.trim())
-
-/** One collected list item, before nesting is resolved at flush time. */
-type ListItem = { rawLevel: number; type: 'ul' | 'ol'; content: string; start: number | null }
-
-export function renderMarkdown(src: string, baseDir?: string): string {
-  // Drop HTML comments (incl. multi-line) so they don't render as literal text.
-  const lines = src.replace(/<!--[\s\S]*?-->/g, '').split(/\r?\n/)
-  const out: string[] = []
-  let para: string[] = []
-  let listItems: ListItem[] = []
-  const fmt = (s: string): string => inline(s, baseDir)
-
-  const flushPara = (): void => {
-    if (para.length) {
-      out.push(`<p>${fmt(para.join(' '))}</p>`)
-      para = []
-    }
-  }
-
-  // Render the collected items into nested <ul>/<ol> via a depth stack.
-  // Indentation sets nesting (2 spaces per level, tab = 2). A jump deeper than
-  // one level is clamped, which also pins a lone indented list to the top level
-  // (preserving single-level behavior for un-indented lists).
-  const flushList = (): void => {
-    if (!listItems.length) return
-    let html = ''
-    const stack: ('ul' | 'ol')[] = []
-    const open = (type: 'ul' | 'ol', start: number | null): void => {
-      html += type === 'ol' && start != null && start !== 1 ? `<ol start="${start}">` : `<${type}>`
-      stack.push(type)
-      html += '<li>'
-    }
-    const closeList = (): void => {
-      html += `</li></${stack.pop()}>`
-    }
-    for (const it of listItems) {
-      const level = Math.min(it.rawLevel, stack.length)
-      if (stack.length === 0 || level > stack.length - 1) {
-        // Open nested lists inside the current <li>, down to the target level.
-        for (let l = stack.length; l <= level; l++) open(it.type, l === level ? it.start : null)
-      } else {
-        while (stack.length - 1 > level) closeList()
-        if (stack[stack.length - 1] !== it.type) {
-          closeList()
-          open(it.type, it.start)
-        } else {
-          html += '</li><li>'
-        }
-      }
-      html += fmt(it.content)
-    }
-    while (stack.length) closeList()
-    out.push(html)
-    listItems = []
-  }
-
-  for (let i = 0; i < lines.length; i++) {
-    const line = lines[i]
-
-    if (/^\s*```/.test(line)) {
-      flushPara()
-      flushList()
-      const buf: string[] = []
-      i++
-      while (i < lines.length && !/^\s*```/.test(lines[i])) buf.push(esc(lines[i++]))
-      out.push(`<pre><code>${buf.join('\n')}</code></pre>`)
-      continue
-    }
-
-    if (/^\s*$/.test(line)) {
-      flushPara()
-      flushList()
-      continue
-    }
-
-    if (
-      /^\s*\|.*\|\s*$/.test(line) &&
-      i + 1 < lines.length &&
-      /^\s*\|?[\s:|-]+\|?\s*$/.test(lines[i + 1]) &&
-      lines[i + 1].includes('-')
-    ) {
-      flushPara()
-      flushList()
-      const head = cells(line)
-      i += 2
-      const rows: string[][] = []
-      while (i < lines.length && /^\s*\|.*\|\s*$/.test(lines[i])) rows.push(cells(lines[i++]))
-      i--
-      const thead = `<thead><tr>${head.map((h) => `<th>${fmt(h)}</th>`).join('')}</tr></thead>`
-      const tbody = `<tbody>${rows
-        .map((r) => `<tr>${r.map((c) => `<td>${fmt(c)}</td>`).join('')}</tr>`)
-        .join('')}</tbody>`
-      out.push(`<table>${thead}${tbody}</table>`)
-      continue
-    }
-
-    if (isHtmlLine(line)) {
-      flushPara()
-      flushList()
-      out.push(resolveHtmlSrcs(sanitizeHtml(line), baseDir))
-      continue
-    }
-
-    const h = /^\s{0,3}(#{1,6})\s+(.*)$/.exec(line)
-    if (h) {
-      flushPara()
-      flushList()
-      out.push(`<h${h[1].length}>${fmt(h[2])}</h${h[1].length}>`)
-      continue
-    }
-
-    if (/^\s{0,3}([-*_])(\s*\1){2,}\s*$/.test(line)) {
-      flushPara()
-      flushList()
-      out.push('<hr>')
-      continue
-    }
-
-    if (/^\s*>/.test(line)) {
-      flushPara()
-      flushList()
-      const buf: string[] = []
-      while (i < lines.length && /^\s*>/.test(lines[i]))
-        buf.push(lines[i++].replace(/^\s*>\s?/, ''))
-      i--
-      out.push(`<blockquote>${fmt(buf.join(' '))}</blockquote>`)
-      continue
-    }
-
-    const ul = /^(\s*)[-*+]\s+(.*)$/.exec(line)
-    const ol = /^(\s*)(\d+)\.\s+(.*)$/.exec(line)
-    if (ul || ol) {
-      flushPara()
-      const indent = (ul ?? ol)![1]
-      // Tabs count as 2 spaces; 2 spaces of indent = one nesting level.
-      const width = [...indent].reduce((n, c) => n + (c === '\t' ? 2 : 1), 0)
-      const rawLevel = Math.floor(width / 2)
-      if (ul) {
-        listItems.push({ rawLevel, type: 'ul', content: ul[2], start: null })
-      } else {
-        listItems.push({ rawLevel, type: 'ol', content: ol![3], start: parseInt(ol![2], 10) })
-      }
-      continue
-    }
-
-    flushList()
-    para.push(line.trim())
-  }
-  flushPara()
-  flushList()
-  return out.join('\n')
-}
diff --git a/src/renderer/src/main.tsx b/src/renderer/src/main.tsx
index a5b87db..c2ff784 100644
--- a/src/renderer/src/main.tsx
+++ b/src/renderer/src/main.tsx
@@ -1,14 +1,9 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import App from './App'
-import { PreviewWindow } from './components/PreviewWindow'
 import { ErrorBoundary } from './components/ErrorBoundary'
 import './index.css'
 
-// The same bundle serves both windows; the preview window is entered via the
-// '#preview' hash (see previewWindow.ts in main).
-const isPreview = window.location.hash === '#preview'
-
 // Rejected IPC promises otherwise vanish (every call site voids them); at
 // least leave a trace for a bug report instead of pure silence.
 window.addEventListener('unhandledrejection', (e) => {
@@ -17,6 +12,8 @@ window.addEventListener('unhandledrejection', (e) => {
 
 createRoot(document.getElementById('root') as HTMLElement).render(
   <StrictMode>
-    <ErrorBoundary>{isPreview ? <PreviewWindow /> : <App />}</ErrorBoundary>
+    <ErrorBoundary>
+      <App />
+    </ErrorBoundary>
   </StrictMode>
 )
diff --git a/src/shared/types.ts b/src/shared/types.ts
index ad2258c..9cd7d16 100644
--- a/src/shared/types.ts
+++ b/src/shared/types.ts
@@ -50,18 +50,3 @@ export interface ToolTarget {
   label: string
   ext: string
 }
-
-/** One file shown in the preview window. */
-export interface PreviewItem {
-  path: string
-  name: string
-  kind: FileKind
-  size?: number
-  thumb?: string | null
-}
-
-/** The set of files handed to the preview window, plus which one to show first. */
-export interface PreviewPayload {
-  files: PreviewItem[]
-  index: number
-}
diff --git a/test/markdown.test.ts b/test/markdown.test.ts
deleted file mode 100644
index 6109901..0000000
--- a/test/markdown.test.ts
+++ /dev/null
@@ -1,116 +0,0 @@
-import { describe, expect, it } from 'vitest'
-import { renderMarkdown } from '../src/renderer/src/lib/markdown'
-
-describe('renderMarkdown', () => {
-  it('renders headings, including ones indented up to 3 spaces (inside HTML blocks)', () => {
-    expect(renderMarkdown('# Title')).toContain('<h1>Title</h1>')
-    expect(renderMarkdown('### Sub')).toContain('<h3>Sub</h3>')
-    expect(renderMarkdown('  # Sonara')).toContain('<h1>Sonara</h1>')
-  })
-
-  it('handles a centered logo block (README pattern): img resolves, heading renders', () => {
-    const md =
-      '<div align="center">\n  <img src="assets/logo.png" alt="L" width="128">\n\n  # Sonara\n\n</div>'
-    const html = renderMarkdown(md, 'C:/repo')
-    expect(html).toContain('<div align="center">')
-    expect(html).toContain('fsmedia://local/')
-    expect(html).toContain('<h1>Sonara</h1>')
-  })
-
-  it('renders blockquotes (the > survives escaping)', () => {
-    expect(renderMarkdown('> a quote')).toContain('<blockquote>a quote</blockquote>')
-  })
-
-  it('groups consecutive blockquote lines', () => {
-    expect(renderMarkdown('> one\n> two')).toContain('<blockquote>one two</blockquote>')
-  })
-
-  it('renders bold, italic, inline code, and links', () => {
-    expect(renderMarkdown('**b**')).toContain('<strong>b</strong>')
-    expect(renderMarkdown('*i*')).toContain('<em>i</em>')
-    expect(renderMarkdown('`x`')).toContain('<code>x</code>')
-    expect(renderMarkdown('[t](https://x.com)')).toContain('<a href="https://x.com"')
-  })
-
-  it('renders lists', () => {
-    expect(renderMarkdown('- a\n- b')).toContain('<ul><li>a</li><li>b</li></ul>')
-    expect(renderMarkdown('1. a\n2. b')).toContain('<ol><li>a</li><li>b</li></ol>')
-  })
-
-  it('nests lists by leading-space depth (2 spaces per level)', () => {
-    expect(renderMarkdown('- a\n  - nested\n- b')).toContain(
-      '<ul><li>a<ul><li>nested</li></ul></li><li>b</li></ul>'
-    )
-    // A tab counts as 2 spaces (one level) too.
-    expect(renderMarkdown('- a\n\t- nested')).toContain(
-      '<ul><li>a<ul><li>nested</li></ul></li></ul>'
-    )
-  })
-
-  it('honors an ordered-list start number via <ol start>', () => {
-    expect(renderMarkdown('3. a\n4. b')).toContain('<ol start="3"><li>a</li><li>b</li></ol>')
-    // Lists starting at 1 stay plain <ol>.
-    expect(renderMarkdown('1. a')).toContain('<ol><li>a</li></ol>')
-  })
-
-  it('rejects non-allowlisted link schemes (data:, vbscript:) with href="#"', () => {
-    expect(renderMarkdown('[x](data:text/html,<script>alert(1)</script>)')).toContain('href="#"')
-    expect(renderMarkdown('[x](vbscript:msgbox(1))')).toContain('href="#"')
-    // Entity-encoded javascript can't slip past the decode-then-check.
-    expect(renderMarkdown('[x](java&#115;cript:alert(1))')).toContain('href="#"')
-    // Allowlisted schemes and relative paths survive.
-    expect(renderMarkdown('[x](https://x.com)')).toContain('href="https://x.com"')
-    expect(renderMarkdown('[x](./local/file.md)')).toContain('href="./local/file.md"')
-  })
-
-  it('renders GFM tables', () => {
-    const md = '| A | B |\n|---|---|\n| 1 | 2 |'
-    const html = renderMarkdown(md)
-    expect(html).toContain('<table>')
-    expect(html).toContain('<th>A</th>')
-    expect(html).toContain('<td>1</td>')
-  })
-
-  it('escapes code-fence contents (no raw HTML executes)', () => {
-    const html = renderMarkdown('```\n<script>alert(1)</script>\n```')
-    expect(html).toContain('&lt;script&gt;')
-    expect(html).not.toContain('<script>')
-  })
-
-  it('passes safe inline HTML through but strips scripts + event handlers', () => {
-    expect(renderMarkdown('<div align="center"><img src="a.png"></div>')).toContain(
-      '<div align="center">'
-    )
-    expect(renderMarkdown('<script>alert(1)</script>')).not.toContain('<script>')
-    expect(renderMarkdown('<img src="x" onerror="alert(1)">')).not.toContain('onerror')
-  })
-
-  it('neutralizes javascript: links', () => {
-    expect(renderMarkdown('[x](javascript:alert(1))')).toContain('href="#"')
-  })
-
-  it('strips HTML comments (single and multi-line)', () => {
-    expect(renderMarkdown('a\n<!-- hidden -->\nb')).not.toContain('hidden')
-    expect(renderMarkdown('<!-- line1\nline2 -->\ntext')).not.toContain('line2')
-  })
-
-  it('renders external https images (shields), local via fsmedia, and skips comments', () => {
-    const html = renderMarkdown('![b](https://img.shields.io/badge/x-y-blue)')
-    expect(html).toContain('<img alt="b" src="https://img.shields.io/badge/x-y-blue">')
-  })
-
-  it('resolves relative image paths against baseDir via fsmedia://', () => {
-    const html = renderMarkdown('![logo](assets/logo.png)', 'C:/repo/docs')
-    expect(html).toContain('fsmedia://local/')
-    expect(html).toContain(encodeURIComponent('C:/repo/docs/assets/logo.png'))
-    // ../ climbs out of the base dir
-    expect(renderMarkdown('![l](../img/a.png)', 'C:/repo/docs')).toContain(
-      encodeURIComponent('C:/repo/img/a.png')
-    )
-  })
-
-  it('resolves relative src in raw <img> too, leaves absolute URLs alone', () => {
-    expect(renderMarkdown('<img src="logo.png">', 'C:/repo')).toContain('fsmedia://local/')
-    expect(renderMarkdown('![x](https://x.com/a.png)')).toContain('src="https://x.com/a.png"')
-  })
-})

From 9393b14dd76b8bbfe2020284c873b1dbc08860cb Mon Sep 17 00:00:00 2001
From: Max <112043822+Maxaubert@users.noreply.github.com>
Date: Mon, 31 Aug 2026 17:00:22 +0200
Subject: [PATCH 10/10] feat: move results to a Completed tab; drop the output
 column

Every workspace spent half its width on files the user had already finished
with, and results were scattered across seven screens. The queue is now one
column of the files you are working on, and everything produced lands in a
Completed tab pinned to the bottom of the rail, newest first, each row saying
which verb made it.

Completed is a view rather than a verb, so it is not in TABS: it takes no
dropped files, has no options panel, and does not move when the rail is
reordered.

Also sets the PDF page-render quality default to 100 as asked. Measured on a
184-page comic: at 150 DPI that is 1471 KB/page (264 MB), against 476 KB at
q92 and 270 KB at q85. Not a bug, just what quality 100 costs.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01MSq6HRwmaRKAv1t2hrdkJB
---
 e2e/workflows.spec.ts                         |   2 +-
 src/main/tools/registry.ts                    |   2 +-
 src/renderer/src/App.tsx                      |  33 +++-
 src/renderer/src/components/CompletedView.tsx | 130 ++++++++++++++
 src/renderer/src/components/OptionsPanel.tsx  |   2 +-
 src/renderer/src/components/Queue.tsx         | 167 ++++--------------
 src/renderer/src/components/TabRail.tsx       |  39 +++-
 src/renderer/src/components/completed.ts      |  24 +++
 src/renderer/src/state.ts                     |   2 +-
 src/shared/tabs.ts                            |  18 +-
 test/convert-archive-targets.test.ts          |   2 +-
 11 files changed, 270 insertions(+), 151 deletions(-)
 create mode 100644 src/renderer/src/components/CompletedView.tsx
 create mode 100644 src/renderer/src/components/completed.ts

diff --git a/e2e/workflows.spec.ts b/e2e/workflows.spec.ts
index 58461a7..d0ead18 100644
--- a/e2e/workflows.spec.ts
+++ b/e2e/workflows.spec.ts
@@ -195,7 +195,7 @@ test('Tools groups its one-off verbs and opens one as a workspace', async () =>
   await page.locator('button:has-text("Merge")').first().click()
   // A tool workspace is an ordinary queue titled with the tool's name.
   await expect(page.locator('h1', { hasText: 'Merge' }).first()).toBeVisible()
-  await expect(page.locator('text=Input').first()).toBeVisible()
+  await expect(page.locator('text=Files').first()).toBeVisible()
   // Back returns to the grid, which is the app's only second level.
   await page.locator('button[aria-label="Back to Tools"]').first().click()
   await expect(page.locator('h1', { hasText: 'Tools' }).first()).toBeVisible()
diff --git a/src/main/tools/registry.ts b/src/main/tools/registry.ts
index d68e63d..1c165c2 100644
--- a/src/main/tools/registry.ts
+++ b/src/main/tools/registry.ts
@@ -1298,7 +1298,7 @@ const archiveTool: ToolModule = {
       // `pageQuality`, not `quality`: on the Convert tab one option bag can
       // reach either the convert tool (quality is a preset STRING) or this
       // one, and Number('balanced') is NaN.
-      const quality = Math.max(1, Math.min(100, Number(options.pageQuality ?? 85)))
+      const quality = Math.max(1, Math.min(100, Number(options.pageQuality ?? 100)))
 
       // Always a neutral temp dir, so mutool draw's printf `-o` pattern can
       // never expand a `%` inherited from the source file's name.
diff --git a/src/renderer/src/App.tsx b/src/renderer/src/App.tsx
index 26b3f5f..1b39ee9 100644
--- a/src/renderer/src/App.tsx
+++ b/src/renderer/src/App.tsx
@@ -44,11 +44,13 @@ import {
   type QueueItem,
   type SelectMode
 } from './state'
-import { engineFor, tabAccepts, tabById, toolCardById } from '@shared/tabs'
+import { engineFor, tabAccepts, tabById, toolCardById, type TabId } from '@shared/tabs'
 import { TopBar } from './components/TopBar'
 import { TabRail } from './components/TabRail'
 import { OperationTitle } from './components/OperationTitle'
 import { ToolsGrid } from './components/ToolsGrid'
+import { CompletedView } from './components/CompletedView'
+import { collectCompleted } from './components/completed'
 import { DropZone } from './components/DropZone'
 import { PromptBox } from './components/PromptBox'
 import type { GenerateOptions } from '@shared/generate'
@@ -207,6 +209,8 @@ export default function App(): JSX.Element {
   const cur = state.queues[qKey] ?? emptyQueue()
   // The Tools grid is a chooser, not a workspace: no queue, no options panel.
   const onToolsGrid = state.tab === 'tools' && !card
+  // Completed is a view of results, not a place you do work.
+  const onCompleted = state.tab === 'completed'
 
   // Stream job progress/terminal events into state.
   useEffect(() => window.filesmith.onJobEvent((e) => dispatch({ type: 'jobEvent', event: e })), [])
@@ -527,7 +531,7 @@ export default function App(): JSX.Element {
     setDragging(false)
     // Generate has no queue on screen: a file accepted here would land in an
     // invisible list with no feedback at all.
-    if (tool === 'generate' || onToolsGrid) return
+    if (tool === 'generate' || onToolsGrid || onCompleted) return
     const paths = Array.from(e.dataTransfer.files)
       .map((f) => window.filesmith.pathForFile(f))
       .filter(Boolean)
@@ -829,6 +833,12 @@ export default function App(): JSX.Element {
         })
       : []
 
+  // Everything produced, across every workspace, for the Completed tab.
+  const completed = collectCompleted(state.queues, (key) => {
+    if (key.startsWith('tools:')) return toolCardById(key.slice(6))?.label ?? 'Tools'
+    return tabById(key as TabId).label
+  })
+
   // Files waiting in each verb, so the rail shows where work is sitting even
   // while you're looking elsewhere. Every Tools workspace rolls up into Tools.
   const counts: Record<string, number> = {}
@@ -846,6 +856,7 @@ export default function App(): JSX.Element {
         <TabRail
           tab={state.tab}
           counts={counts}
+          completedCount={completed.length}
           onSelect={(t) => dispatch({ type: 'setTab', tab: t })}
         />
 
@@ -854,7 +865,7 @@ export default function App(): JSX.Element {
             className="flex min-w-0 flex-1 flex-col gap-3 px-4 pb-4 pt-1 lg:gap-4 lg:px-7 lg:pb-5"
             onDragOver={(e) => {
               e.preventDefault()
-              if (tool !== 'generate' && !onToolsGrid) setDragging(true)
+              if (tool !== 'generate' && !onToolsGrid && !onCompleted) setDragging(true)
             }}
             onDragLeave={(e) => {
               if (e.currentTarget === e.target) setDragging(false)
@@ -867,10 +878,19 @@ export default function App(): JSX.Element {
               title={card ? card.label : tab.label}
               desc={card ? card.desc : tab.desc}
               color={card ? card.color : tab.color}
-              fileCount={onToolsGrid ? 0 : cur.items.filter(inInput).length}
+              fileCount={
+                onCompleted ? completed.length : onToolsGrid ? 0 : cur.items.filter(inInput).length
+              }
               onBack={card ? () => dispatch({ type: 'setActiveTool', tool: null }) : undefined}
             />
-            {onToolsGrid ? (
+            {onCompleted ? (
+              <CompletedView
+                entries={completed}
+                thumbs={outThumbs}
+                onOpen={(item) => openExternally('output', item)}
+                onMenu={(item, x, y) => openMenu('output', item, x, y)}
+              />
+            ) : onToolsGrid ? (
               <ToolsGrid onPick={(id) => dispatch({ type: 'setActiveTool', tool: id })} />
             ) : tool === 'generate' ? (
               <>
@@ -964,7 +984,6 @@ export default function App(): JSX.Element {
                   options={curOptions}
                   selected={cur.selected}
                   activeGroup={activeGroup}
-                  outThumbs={outThumbs}
                   onItemClick={onItemClick}
                   onOpen={openExternally}
                   onMenu={openMenu}
@@ -974,7 +993,7 @@ export default function App(): JSX.Element {
             )}
           </section>
 
-          {!onToolsGrid && (
+          {!onToolsGrid && !onCompleted && (
             <OptionsPanel
               tab={state.tab}
               tool={tool}
diff --git a/src/renderer/src/components/CompletedView.tsx b/src/renderer/src/components/CompletedView.tsx
new file mode 100644
index 0000000..aff5c2f
--- /dev/null
+++ b/src/renderer/src/components/CompletedView.tsx
@@ -0,0 +1,130 @@
+import type { JSX, MouseEvent } from 'react'
+import { formatBytes, type QueueItem } from '../state'
+import type { CompletedItem } from './completed'
+import { baseName } from '@shared/fileKind'
+import { Icon } from './Icon'
+
+const extOf = (n: string): string => {
+  const i = n.lastIndexOf('.')
+  return i > 0 ? n.slice(i + 1).toUpperCase() : ''
+}
+
+function Row({
+  entry,
+  thumb,
+  onOpen,
+  onMenu
+}: {
+  entry: CompletedItem
+  thumb: string | null
+  onOpen: () => void
+  onMenu: (x: number, y: number) => void
+}): JSX.Element {
+  const { item, from } = entry
+  const out = item.outputPath as string
+  return (
+    <div
+      onDoubleClick={onOpen}
+      onContextMenu={(e: MouseEvent) => {
+        e.preventDefault()
+        onMenu(e.clientX, e.clientY)
+      }}
+      className="group flex cursor-pointer items-center gap-3 rounded-2xl border border-black/[.07] bg-white p-2.5 shadow-[0_1px_3px_rgba(0,0,0,.05),0_8px_22px_rgba(20,20,40,.05)] transition hover:border-black/[.14]"
+    >
+      <div className="h-11 w-11 shrink-0 overflow-hidden rounded-[9px] bg-[#ececf1] shadow-[inset_0_0_0_1px_rgba(0,0,0,.05)]">
+        {thumb ? (
+          <img src={thumb} alt="" className="h-full w-full object-cover" />
+        ) : (
+          <span className="grid h-full w-full place-items-center text-[9px] font-semibold uppercase text-dim">
+            {extOf(out)}
+          </span>
+        )}
+      </div>
+      <div className="min-w-0 flex-1">
+        <div className="truncate text-[13px] font-semibold">{baseName(out)}</div>
+        <div className="mt-0.5 truncate text-[11.5px] text-dim">
+          {from}
+          <span className="mx-1 text-[#c3c3cc]">·</span>
+          {extOf(out)}
+          {item.outputSize != null && (
+            <>
+              <span className="mx-1 text-[#c3c3cc]">·</span>
+              {formatBytes(item.outputSize)}
+              {/* Change vs the source. Green when it shrank; amber when it grew
+                  (re-encoding an already-optimised file can do that) - hiding
+                  that just makes compression look broken. */}
+              {item.file.size > 0 &&
+                (item.outputSize < item.file.size ? (
+                  <span className="ml-1 font-semibold text-[#12a150]">
+                    −{Math.round((1 - item.outputSize / item.file.size) * 100)}%
+                  </span>
+                ) : (
+                  <span
+                    className="ml-1 font-semibold text-[#b7791f]"
+                    title="Bigger than the original — this file was already well compressed"
+                  >
+                    +{Math.round((item.outputSize / item.file.size - 1) * 100)}%
+                  </span>
+                ))}
+            </>
+          )}
+        </div>
+      </div>
+      <button
+        onClick={(e) => {
+          e.stopPropagation()
+          const r = (e.currentTarget as HTMLElement).getBoundingClientRect()
+          onMenu(r.right, r.bottom + 6)
+        }}
+        aria-label="More"
+        className="grid h-7 w-7 shrink-0 place-items-center rounded-lg text-dim opacity-0 transition hover:bg-black/[.05] hover:text-ink group-hover:opacity-100"
+      >
+        <Icon name="dots" className="h-4 w-4" />
+      </button>
+    </div>
+  )
+}
+
+/**
+ * Everything the app has produced, in one place. This used to be a second
+ * column beside the queue in every workspace, which meant results were split
+ * across seven screens and each workspace spent half its width on files the
+ * user had already finished with.
+ */
+export function CompletedView({
+  entries,
+  thumbs,
+  onOpen,
+  onMenu
+}: {
+  entries: CompletedItem[]
+  thumbs: Record<string, string | null>
+  onOpen: (item: QueueItem) => void
+  onMenu: (item: QueueItem, x: number, y: number) => void
+}): JSX.Element {
+  if (entries.length === 0) {
+    return (
+      <div className="grid min-h-0 flex-1 place-items-center">
+        <div className="text-center">
+          <div className="text-[15px] font-semibold text-muted">Nothing finished yet</div>
+          <p className="mt-1 text-[13px] text-dim">
+            Files you convert, compress or resize land here.
+          </p>
+        </div>
+      </div>
+    )
+  }
+  return (
+    <div className="scroll-thin -mx-1 flex min-h-0 flex-1 flex-col gap-2 overflow-y-auto px-1 pb-4">
+      {entries.map((e) => (
+        <Row
+          key={e.item.id}
+          entry={e}
+          thumb={e.item.outputPath ? (thumbs[e.item.outputPath] ?? null) : null}
+          onOpen={() => onOpen(e.item)}
+          onMenu={(x, y) => onMenu(e.item, x, y)}
+        />
+      ))}
+    </div>
+  )
+}
diff --git a/src/renderer/src/components/OptionsPanel.tsx b/src/renderer/src/components/OptionsPanel.tsx
index a4387c4..8e865c4 100644
--- a/src/renderer/src/components/OptionsPanel.tsx
+++ b/src/renderer/src/components/OptionsPanel.tsx
@@ -236,7 +236,7 @@ function PageRenderOptions({
         </p>
       </div>
       {pageFormat === 'jpg' && (
-        <QualitySlider options={options} set={set} field="pageQuality" fallback={85} />
+        <QualitySlider options={options} set={set} field="pageQuality" fallback={100} />
       )}
     </>
   )
diff --git a/src/renderer/src/components/Queue.tsx b/src/renderer/src/components/Queue.tsx
index 55feab1..c751e9d 100644
--- a/src/renderer/src/components/Queue.tsx
+++ b/src/renderer/src/components/Queue.tsx
@@ -1,16 +1,9 @@
 import type { JSX, MouseEvent } from 'react'
 import type { JobOptions, ToolId } from '@shared/types'
-import { formatBytes, formatEta, groupOf, inInput, inOutput, type QueueItem } from '../state'
+import { formatBytes, formatEta, groupOf, inInput, type QueueItem } from '../state'
 import { groupItemsByGroup } from './queueGroups'
-import { baseName } from '@shared/fileKind'
 import { Icon } from './Icon'
 
-const extOf = (p: string): string => {
-  const b = baseName(p)
-  const i = b.lastIndexOf('.')
-  return i > 0 ? b.slice(i + 1).toUpperCase() : ''
-}
-
 const PDF_OP_LABEL: Record<string, string> = {
   'extract-text': 'Extract text',
   'pages-to-images': 'Pages to PNG',
@@ -220,80 +213,6 @@ function InputCard({
   )
 }
 
-function OutputCard({
-  item,
-  thumb,
-  selected,
-  onClick,
-  onOpen,
-  onMenu
-}: {
-  item: QueueItem
-  thumb: string | null
-  selected: boolean
-  onClick: (e: MouseEvent) => void
-  onOpen: () => void
-  onMenu: (x: number, y: number) => void
-}): JSX.Element {
-  const out = item.outputPath ?? ''
-  return (
-    <div
-      onClick={onClick}
-      onDoubleClick={onOpen}
-      onContextMenu={(e) => {
-        e.preventDefault()
-        onMenu(e.clientX, e.clientY)
-      }}
-      className={`group flex cursor-pointer items-center gap-3 rounded-2xl border bg-white p-2.5 shadow-[0_1px_3px_rgba(0,0,0,.05),0_8px_22px_rgba(20,20,40,.05)] transition ${
-        selected
-          ? 'border-accent ring-2 ring-accent/60'
-          : 'border-black/[.07] hover:border-black/[.14]'
-      }`}
-    >
-      <div className="h-11 w-11 shrink-0 overflow-hidden rounded-[9px] bg-[#ececf1] shadow-[inset_0_0_0_1px_rgba(0,0,0,.05)]">
-        {thumb ? (
-          <img src={thumb} alt="" className="h-full w-full object-cover" />
-        ) : (
-          <span className="grid h-full w-full place-items-center text-[9px] font-semibold uppercase text-dim">
-            {extOf(out)}
-          </span>
-        )}
-      </div>
-      <div className="min-w-0 flex-1">
-        <div className="truncate text-[13px] font-semibold">{baseName(out)}</div>
-        <div className="mt-0.5 truncate text-[11.5px] text-dim">
-          {extOf(out)}
-          {item.outputSize != null && (
-            <>
-              <span className="mx-0.5 text-[#c3c3cc]">·</span>
-              {formatBytes(item.outputSize)}
-              {/* Change vs the source. Green when it shrank; amber when it grew
-                  (re-encoding an already-optimised file can do that) — hiding
-                  that just makes compression look broken. */}
-              {item.file.size > 0 &&
-                (item.outputSize < item.file.size ? (
-                  <span className="ml-1 font-semibold text-[#12a150]">
-                    −{Math.round((1 - item.outputSize / item.file.size) * 100)}%
-                  </span>
-                ) : (
-                  <span
-                    className="ml-1 font-semibold text-[#b7791f]"
-                    title="Bigger than the original — this file was already well compressed"
-                  >
-                    +{Math.round((item.outputSize / item.file.size - 1) * 100)}%
-                  </span>
-                ))}
-            </>
-          )}
-        </div>
-      </div>
-      <div className="shrink-0 pr-0.5">
-        <Kebab onOpen={onMenu} />
-      </div>
-    </div>
-  )
-}
-
 /** A hairline header naming one convert group inside a mixed queue. */
 function GroupHead({ label, count }: { label: string; count: string }): JSX.Element {
   return (
@@ -311,7 +230,6 @@ export function Queues({
   options,
   selected,
   activeGroup,
-  outThumbs,
   onItemClick,
   onOpen,
   onMenu,
@@ -322,75 +240,50 @@ export function Queues({
   options: JobOptions
   selected: string[]
   activeGroup: string | null
-  outThumbs: Record<string, string | null>
   onItemClick: (id: string, e: MouseEvent) => void
   onOpen: (side: 'input' | 'output', item: QueueItem) => void
   onMenu: (side: 'input' | 'output', item: QueueItem, x: number, y: number) => void
   onCancel: (id: string) => void
 }): JSX.Element {
   const inputs = items.filter(inInput)
-  const done = items.filter(inOutput)
-  // A single "No items in queue" centred under the two headers, rather than a
-  // separate placeholder per column, so the empty state reads as one message.
-  if (items.length === 0) {
+  if (inputs.length === 0) {
     return (
       <div className="flex min-h-0 flex-1 flex-col">
-        <div className="flex gap-5">
-          <div className="flex-1">
-            <ColumnHead title="Input" />
-          </div>
-          <div className="flex-1">
-            <ColumnHead title="Output" />
-          </div>
-        </div>
+        <ColumnHead title="Files" />
         <div className="grid flex-1 place-items-center">
           <span className="text-[13.5px] font-medium text-[#a2a2ac]">No items in queue</span>
         </div>
       </div>
     )
   }
+  const card = (i: QueueItem): JSX.Element => (
+    <InputCard
+      key={i.id}
+      item={i}
+      tool={tool}
+      options={options}
+      selected={selected.includes(i.id)}
+      compatible={activeGroup === null || groupOf(i.file) === activeGroup}
+      onClick={(e) => onItemClick(i.id, e)}
+      onOpen={() => onOpen('input', i)}
+      onMenu={(x, y) => onMenu('input', i, x, y)}
+      onCancel={() => onCancel(i.id)}
+    />
+  )
+  // Headers only when the queue actually holds more than one group, so the
+  // everyday single-kind batch looks exactly as it always has.
+  const groups = groupItemsByGroup(inputs)
   return (
-    <div className="flex min-h-0 flex-1 gap-5">
-      <Column title="Input">
-        {(() => {
-          const card = (i: QueueItem): JSX.Element => (
-            <InputCard
-              key={i.id}
-              item={i}
-              tool={tool}
-              options={options}
-              selected={selected.includes(i.id)}
-              compatible={activeGroup === null || groupOf(i.file) === activeGroup}
-              onClick={(e) => onItemClick(i.id, e)}
-              onOpen={() => onOpen('input', i)}
-              onMenu={(x, y) => onMenu('input', i, x, y)}
-              onCancel={() => onCancel(i.id)}
-            />
-          )
-          // Headers only when the queue actually holds more than one group, so
-          // the everyday single-kind batch looks exactly as it always has.
-          const groups = groupItemsByGroup(inputs)
-          if (!groups) return inputs.map(card)
-          return groups.map((g) => (
-            <div key={g.group}>
-              <GroupHead label={g.label} count={g.count} />
-              {g.items.map(card)}
-            </div>
-          ))
-        })()}
-      </Column>
-      <Column title="Output">
-        {done.map((i) => (
-          <OutputCard
-            key={i.id}
-            item={i}
-            thumb={i.outputPath ? (outThumbs[i.outputPath] ?? null) : null}
-            selected={selected.includes(i.id)}
-            onClick={(e) => onItemClick(i.id, e)}
-            onOpen={() => onOpen('output', i)}
-            onMenu={(x, y) => onMenu('output', i, x, y)}
-          />
-        ))}
+    <div className="flex min-h-0 flex-1 flex-col">
+      <Column title="Files">
+        {groups
+          ? groups.map((g) => (
+              <div key={g.group}>
+                <GroupHead label={g.label} count={g.count} />
+                {g.items.map(card)}
+              </div>
+            ))
+          : inputs.map(card)}
       </Column>
     </div>
   )
diff --git a/src/renderer/src/components/TabRail.tsx b/src/renderer/src/components/TabRail.tsx
index 35cc6c6..87c047c 100644
--- a/src/renderer/src/components/TabRail.tsx
+++ b/src/renderer/src/components/TabRail.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState, type JSX } from 'react'
-import { TABS, type TabId } from '@shared/tabs'
+import { COMPLETED_TAB, TABS, type TabId } from '@shared/tabs'
 import { Icon, type IconName } from './Icon'
 
 const ALL_IDS = TABS.map((c) => c.id)
@@ -45,10 +45,13 @@ const clamp = (n: number, lo: number, hi: number): number => Math.max(lo, Math.m
 export function TabRail({
   tab,
   counts,
+  completedCount,
   onSelect
 }: {
   tab: TabId
   counts: Record<string, number>
+  /** Produced files across every workspace. */
+  completedCount: number
   onSelect: (c: TabId) => void
 }): JSX.Element {
   const [order, setOrder] = useState<TabId[]>(loadOrder)
@@ -243,6 +246,40 @@ export function TabRail({
           </button>
         )
       })}
+      {/* Pinned to the bottom, below everything the user can reorder: results
+          are where you END up, not something you set out to do. */}
+      <button
+        onClick={() => onSelect('completed')}
+        aria-current={tab === 'completed' ? 'true' : undefined}
+        className={`mt-auto flex items-center gap-2.5 rounded-[13px] px-2.5 py-2 text-left transition ${
+          tab === 'completed' ? 'bg-[#22b364]' : 'hover:bg-black/[.035]'
+        }`}
+      >
+        <span
+          className="grid h-[24px] w-[24px] shrink-0 place-items-center rounded-lg text-white shadow-sm"
+          style={{
+            background: tab === 'completed' ? 'rgba(255,255,255,.24)' : COMPLETED_TAB.color
+          }}
+        >
+          <Icon name="check" className="h-[14px] w-[14px]" />
+        </span>
+        <span
+          className={`text-[13.5px] font-semibold tracking-tight ${
+            tab === 'completed' ? 'text-white' : ''
+          }`}
+        >
+          Completed
+        </span>
+        {completedCount > 0 && (
+          <span
+            className={`ml-auto rounded-md px-1.5 py-px text-[11px] font-bold ${
+              tab === 'completed' ? 'bg-white/25 text-white' : 'bg-black/[.055] text-dim'
+            }`}
+          >
+            {completedCount}
+          </span>
+        )}
+      </button>
     </nav>
   )
 }
diff --git a/src/renderer/src/components/completed.ts b/src/renderer/src/components/completed.ts
new file mode 100644
index 0000000..1e5f6af
--- /dev/null
+++ b/src/renderer/src/components/completed.ts
@@ -0,0 +1,24 @@
+import { inOutput, type QueueItem } from '../state'
+
+// Kept apart from CompletedView.tsx so that file exports only components
+// (React Fast Refresh requires that), matching queueGroups.ts.
+
+/** A produced file, plus which workspace made it (so the list can say). */
+export interface CompletedItem {
+  item: QueueItem
+  from: string
+}
+
+/** Every finished output across every workspace, newest last in each queue. */
+export function collectCompleted(
+  queues: Partial<Record<string, { items: QueueItem[] }>>,
+  labelFor: (key: string) => string
+): CompletedItem[] {
+  const out: CompletedItem[] = []
+  for (const [key, q] of Object.entries(queues)) {
+    if (!q) continue
+    for (const item of q.items.filter(inOutput)) out.push({ item, from: labelFor(key) })
+  }
+  // Newest first: the thing you just made is the thing you want.
+  return out.reverse()
+}
diff --git a/src/renderer/src/state.ts b/src/renderer/src/state.ts
index 288e479..4b4f1e3 100644
--- a/src/renderer/src/state.ts
+++ b/src/renderer/src/state.ts
@@ -112,7 +112,7 @@ export const DEFAULT_OPTIONS: Record<ToolId, JobOptions> = {
     store: true,
     dpi: 150,
     pageFormat: 'jpg',
-    pageQuality: 85
+    pageQuality: 100
   },
   generate: {
     prompt: '',
diff --git a/src/shared/tabs.ts b/src/shared/tabs.ts
index 7271318..99c7010 100644
--- a/src/shared/tabs.ts
+++ b/src/shared/tabs.ts
@@ -7,7 +7,7 @@ import { routeConvert } from './convert'
 // same verb (Convert) had to exist five times over, once per file type.
 
 export type TabId =
-  'convert' | 'compress' | 'resize' | 'upscale' | 'removebg' | 'generate' | 'tools'
+  'convert' | 'compress' | 'resize' | 'upscale' | 'removebg' | 'generate' | 'tools' | 'completed'
 
 export interface Tab {
   id: TabId
@@ -92,6 +92,21 @@ export const TABS: Tab[] = [
   }
 ]
 
+/**
+ * Everything Filesmith has produced, in one place. Deliberately NOT in TABS: it
+ * is a view rather than a verb, it takes no dropped files, and it is pinned to
+ * the bottom of the rail instead of being reorderable with the verbs.
+ */
+export const COMPLETED_TAB: Tab = {
+  id: 'completed',
+  label: 'Completed',
+  desc: 'Everything Filesmith has produced',
+  color: '#22b364',
+  icon: 'check',
+  kinds: [],
+  tool: 'convert'
+}
+
 export interface ToolCard {
   id: string
   label: string
@@ -206,6 +221,7 @@ export function engineFor(
 }
 
 export function tabById(id: TabId): Tab {
+  if (id === 'completed') return COMPLETED_TAB
   return TABS.find((t) => t.id === id) ?? TABS[0]
 }
 
diff --git a/test/convert-archive-targets.test.ts b/test/convert-archive-targets.test.ts
index b54022b..eeda25b 100644
--- a/test/convert-archive-targets.test.ts
+++ b/test/convert-archive-targets.test.ts
@@ -77,7 +77,7 @@ describe('switching route seeds its settings', () => {
     expect(s.options['convert:doc'].pageFormat).toBe('jpg')
     // pageQuality, not quality: convert stores a preset STRING under `quality`,
     // and Number('balanced') is NaN.
-    expect(s.options['convert:doc'].pageQuality).toBe(85)
+    expect(s.options['convert:doc'].pageQuality).toBe(100)
   })
 
   it('never overwrites a setting the user already chose', () => {