feat: terminal redesign (S2 VS Code grouped)

CLAUDE.md

@@ -24,12 +24,17 @@ 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`.
 
+**Signed-off redesign (2026-10-04):** `docs/mockups/terminal-v5/10-s2-vscode-grouped.html`, dark-only,
+strict monochrome. Rules and feedback trail: `docs/design/redesign-direction.md`.
+
 **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
 layout, components, palette, typography, motion, empty/loading states, and the file-preview
-experience. The current renderer is a deliberately plain placeholder until that design work
-happens. Engineering/plumbing (main process, tool modules, IPC, tests, packaging) moves fast
+experience. The renderer implements the signed-off terminal design (rules in
+`docs/design/redesign-direction.md`): dark only, strict monochrome, every colour is a token in
+`src/renderer/src/theme/tokens.css`, and `test/monochrome-source.test.ts` fails on any other colour
+literal. New screens still go through mockups first. Engineering/plumbing (main process, tool modules, IPC, tests, packaging) moves fast
 without design ceremony.
 
 ## Scope (v1, built in phases)
@@ -57,7 +62,9 @@ src/
     (planned) output.ts        collision-safe output naming (ported from RCMM Get-UniqueOutPath)
     (planned) ipc.ts           renderer <-> engine wiring
   preload/     contextBridge — the typed `window.filesmith` API
-  renderer/    React UI (placeholder until designed)
+  renderer/    React UI: shell/ (title bar, sidebar, status bar), queue/ (files table),
+               inspector/ (Options, Preview, Info), options/ (one settings file per verb),
+               views/ (Generate, Tools, Completed, Settings), ui/ (primitives), icons/, theme/ (tokens, CSS)
   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)

docs/design/redesign-direction.md

@@ -0,0 +1,34 @@
+# Redesign direction (owner feedback, 2026-10-04)
+
+**LOCKED IN (2026-10-04): `docs/mockups/terminal-v5/10-s2-vscode-grouped.html`** is the target design.
+Build the renderer to match it. The rest of this file is the feedback trail that led there.
+
+Mockup rounds live in `docs/mockups/terminal*/` (each has an `index.html` gallery and `shots/`).
+
+- **Dark only.** Light mode is being removed. Black or near-black background. Themes come later.
+- **Strict monochrome.** Greys only (r=g=b). Errors use a glyph and weight, never red.
+- **Round 1** (`terminal/`): rejected. Too cluttered, too much information, too colourful.
+- **Round 2** (`terminal-v2/`): better, but too minimal. Wants icons on tabs and controls.
+- **Round 3** (`terminal-v3/`): "more the look", but a straight copy of Wind's settings page. Do our own thing.
+- **Round 4** (`terminal-v4/`): IDE-inspired (VS Code settings editor, JetBrains settings/tool windows, Zed,
+  Xcode). Keep round 3's density, icons everywhere, simple and easy to navigate.
+- **Pick from round 4:** `terminal-v4/10-explorer-details` (details table + right inspector). Wanted changes:
+  left sidebar collapsible, expanded shows icon + label; no "Drop files here" row (files are added from the
+  top). Variations in `terminal-v5/`.
+- **Pick from v5:** `terminal-v5/05-e-flush-panels` (flush, square, mono). Controls must clearly read as
+  buttons: plain words with an underline or dotted link styling were not obvious enough.
+- Running rows: no progress line under the row. Show progress compactly as `62%(4s)`, not "about 4 s left",
+  in the status column.
+- Result column: the arrow sits on the size/result split. Done = actual result, running = grey `~estimate`,
+  queued/failed = empty. The batch estimate shows in the right panel before you press Convert.
+- Post-build feedback (2026-10-04): Add files is grey (not white); no white left bars on selected rows or the
+  active sidebar item; the active item's count is a plain number, not an inverted box. Add files has no fill,
+  like the other toolbar buttons. No white fills anywhere: selected segments, chips, checkboxes and the primary
+  button use grey `#2a2a2a` with light text (the `--inv-*` tokens). The Tools tab is "PDF Tools", with no
+  divider line above it.
+- Files toolbar is only Add files + count. Row actions live in a right-click menu (Open, Show in File
+  Explorer, Retry, Stop, Clear finished, Remove from list, Delete); destructive ones confirm first. While work
+  runs, the run button becomes a red Stop (`--stop-*`, the app's one hue). Preview/Info show nothing for a
+  multi-selection ("Select one file to preview").
+- Wind is a reference, not a template. Avoid its signatures: the floating progress+button pill, the icon-tile
+  header band, and big rounded cards of right-aligned setting rows.

docs/mockups/terminal-v2/01-wind-plain.html

@@ -0,0 +1,174 @@
+<!doctype html>
+<!--
+  Filesmith round 2, mockup 01: "Wind, plain"
+  Wind's Settings shell with nothing extra added. A left rail, a title, four lines
+  and one white pill. It looks like Wind's sibling app.
+-->
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>Filesmith</title>
+<style>
+  :root {
+    --bg: #000;
+    --line: #151515;
+    --fg: #f2f2f2;
+    --fg2: #d0d0d0;
+    --fg3: #8f8f8f;
+    --glyph: #b0b0b0;
+    --hover: #121212;
+    --pill: #1d1d1d;
+    --track: #303030;
+    --s: "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
+    --m: "Cascadia Mono", Consolas, monospace;
+    --ease: cubic-bezier(.2,.7,.2,1);
+  }
+  * { box-sizing: border-box; margin: 0; padding: 0; }
+  html, body { background: #000; }
+  body {
+    width: 1440px; height: 900px; overflow: hidden;
+    color: var(--fg); font: 13px/1.4 var(--s);
+    -webkit-font-smoothing: antialiased;
+  }
+  button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
+  :focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
+
+  /* window chrome */
+  .bar {
+    height: 38px; display: flex; align-items: center;
+    padding-left: 16px; -webkit-app-region: drag;
+  }
+  .mark { width: 14px; height: 14px; color: var(--glyph); }
+  .app { margin-left: 10px; font-size: 12px; color: var(--fg3); }
+  .win { margin-left: auto; display: flex; height: 100%; }
+  .win button {
+    width: 46px; height: 100%; display: grid; place-items: center;
+    color: var(--fg3); transition: background-color .15s var(--ease), color .15s var(--ease);
+  }
+  .win button:hover { background: var(--hover); color: var(--fg); }
+  .win svg { width: 10px; height: 10px; }
+
+  .shell { display: flex; height: 862px; }
+
+  /* rail */
+  nav {
+    width: 240px; flex: none; padding: 12px 10px;
+    border-right: 1px solid var(--line);
+    display: flex; flex-direction: column; gap: 2px;
+  }
+  nav button {
+    height: 36px; padding: 0 14px; border-radius: 8px; text-align: left;
+    font: 500 12.5px/1 var(--m); color: var(--fg3);
+    transition: background-color .15s var(--ease), color .15s var(--ease), transform .12s var(--ease);
+  }
+  nav button:hover { background: var(--hover); color: var(--fg2); }
+  nav button[aria-current="page"] { background: var(--pill); color: var(--fg); }
+  nav button:active { transform: scale(.97); }
+
+  /* content */
+  main { padding: 32px 40px; flex: 1; }
+  h1 { font: 600 34px/1.15 var(--s); letter-spacing: -.01em; }
+
+  .drop {
+    display: block; margin-top: 28px; width: 560px; height: 36px; padding: 0 12px;
+    margin-left: -12px; border-radius: 6px; text-align: left;
+    font: 12.5px/36px var(--m); color: var(--fg3);
+    transition: background-color .15s var(--ease), color .15s var(--ease);
+  }
+  .drop:hover { background: var(--hover); color: var(--fg2); }
+
+  .queue { list-style: none; width: 560px; margin-top: 12px; }
+  .queue li {
+    height: 36px; display: flex; align-items: center; justify-content: space-between;
+    font: 12.5px/1 var(--m); font-variant-numeric: tabular-nums;
+  }
+  .name { color: var(--fg2); }
+  .st { color: var(--fg3); }
+  .st.run { color: var(--fg); font-weight: 400; }
+  .st.fail { color: var(--fg); font-weight: 700; }
+
+  .opts { margin-top: 48px; display: grid; grid-template-columns: 96px auto; row-gap: 22px; align-items: center; }
+  .label { color: var(--fg3); font-size: 13px; }
+
+  .seg { display: flex; gap: 4px; }
+  .seg button {
+    height: 30px; padding: 0 14px; border-radius: 6px;
+    font: 500 12.5px/1 var(--m); color: var(--fg3);
+    transition: background-color .15s var(--ease), color .15s var(--ease), transform .12s var(--ease);
+  }
+  .seg button:hover { background: var(--hover); color: var(--fg2); }
+  .seg button[aria-pressed="true"] { background: var(--pill); color: var(--fg); }
+  .seg button:active { transform: scale(.97); }
+
+  .slider { display: flex; align-items: center; gap: 16px; }
+  .track { position: relative; width: 240px; height: 3px; background: var(--track); border-radius: 2px; }
+  .fill { position: absolute; inset: 0 20% 0 0; background: var(--fg); border-radius: 2px; }
+  .thumb {
+    position: absolute; left: 80%; top: 50%; width: 12px; height: 12px;
+    margin: -6px 0 0 -6px; border-radius: 50%; background: var(--fg);
+  }
+  .val { font: 12.5px/1 var(--m); color: var(--fg2); font-variant-numeric: tabular-nums; width: 24px; text-align: right; }
+
+  .go {
+    margin-top: 44px; height: 38px; padding: 0 22px; border-radius: 999px;
+    background: #fff; color: #000; font: 600 13px/1 var(--s);
+    transition: background-color .15s var(--ease), transform .12s var(--ease);
+  }
+  .go:hover { background: #d0d0d0; }
+  .go:active { transform: scale(.97); }
+</style>
+</head>
+<body>
+  <header class="bar">
+    <svg class="mark" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square" stroke-linejoin="miter" aria-hidden="true"><path d="M2 2h10M2 7h7M2 2v10"/></svg>
+    <span class="app">Filesmith</span>
+    <div class="win">
+      <button aria-label="Minimise"><svg viewBox="0 0 10 10" stroke="currentColor"><path d="M0 5.5h10"/></svg></button>
+      <button aria-label="Maximise"><svg viewBox="0 0 10 10" fill="none" stroke="currentColor"><rect x=".5" y=".5" width="9" height="9"/></svg></button>
+      <button aria-label="Close"><svg viewBox="0 0 10 10" stroke="currentColor"><path d="M0 0l10 10M10 0L0 10"/></svg></button>
+    </div>
+  </header>
+
+  <div class="shell">
+    <nav aria-label="Operations">
+      <button aria-current="page">Convert</button>
+      <button>Compress</button>
+      <button>Resize</button>
+      <button>Upscale</button>
+      <button>Remove BG</button>
+      <button>Generate</button>
+      <button>Tools</button>
+    </nav>
+
+    <main>
+      <h1>Convert</h1>
+
+      <button class="drop">+ drop files</button>
+
+      <ul class="queue">
+        <li><span class="name">IMG_4821.HEIC</span><span class="st">done</span></li>
+        <li><span class="name">screenshot.png</span><span class="st run">62%</span></li>
+        <li><span class="name">hero-banner.png</span><span class="st">queued</span></li>
+        <li><span class="name">scan_0091.tiff</span><span class="st fail">✕ failed</span></li>
+      </ul>
+
+      <div class="opts">
+        <span class="label">Format</span>
+        <div class="seg" role="group" aria-label="Format">
+          <button aria-pressed="true">WebP</button>
+          <button aria-pressed="false">JPG</button>
+          <button aria-pressed="false">PNG</button>
+          <button aria-pressed="false">AVIF</button>
+        </div>
+        <span class="label">Quality</span>
+        <div class="slider" role="slider" aria-label="Quality" aria-valuemin="0" aria-valuemax="100" aria-valuenow="80" tabindex="0">
+          <div class="track"><div class="fill"></div><div class="thumb"></div></div>
+          <span class="val">80</span>
+        </div>
+      </div>
+
+      <button class="go">Convert 4 files</button>
+    </main>
+  </div>
+</body>
+</html>