From a8fd80eccd3add8ee5d76c8a066eed6922929587 Mon Sep 17 00:00:00 2001
From: Yukon <126093594+baseGame@users.noreply.github.com>
Date: Wed, 14 Oct 2026 13:35:28 +0800
Subject: [PATCH 1/9] Restyle app chrome to match the HTML UI demo

Align light-theme tokens, menu/status bars, session toolbars,
Home cards/tree, and shared path inputs with the standalone
HTML demo density and colors. Keep session handlers and Rust
core untouched.
---
 src/layouts/AppLayout.vue         |  82 ++++++------
 src/styles/main.css               | 202 ++++++++++++++++--------------
 src/views/FolderCompareView.vue   |  18 +--
 src/views/FolderMergeView.vue     |  30 ++---
 src/views/FolderSyncView.vue      |  26 ++--
 src/views/HexCompareView.vue      |   6 +-
 src/views/HomeView.vue            | 186 ++++++++++++++-------------
 src/views/MediaCompareView.vue    |   2 +-
 src/views/PictureCompareView.vue  |   4 +-
 src/views/RegistryCompareView.vue |   4 +-
 src/views/TableCompareView.vue    |   4 +-
 src/views/TextCompareView.vue     |   4 +-
 src/views/TextEditView.vue        |   4 +-
 src/views/TextMergeView.vue       |   2 +-
 src/views/TextPatchView.vue       |   4 +-
 src/views/VersionCompareView.vue  |   4 +-
 16 files changed, 300 insertions(+), 282 deletions(-)

diff --git a/src/layouts/AppLayout.vue b/src/layouts/AppLayout.vue
index 671d3fa9..b544c7e9 100644
--- a/src/layouts/AppLayout.vue
+++ b/src/layouts/AppLayout.vue
@@ -2273,10 +2273,10 @@ const sourceSessionTypes = new Set<SessionType>([
   min-width: 0;
   padding: 0;
   overflow: visible;
-  border-bottom: 1px solid #a0a0a0;
+  border-bottom: 1px solid #dcdcdc;
 
-  /* Capture title band ~#f0f0f0; menu row paints white over row 2. */
-  background: #f0f0f0;
+  /* HTML demo menu band */
+  background: #f0f3f9;
 }
 
 .menu-panel {
@@ -2287,15 +2287,15 @@ const sourceSessionTypes = new Set<SessionType>([
   display: grid;
   box-sizing: border-box;
   width: max-content;
-  min-width: 24rem;
-  max-width: min(36rem, calc(100vw - 24px));
+  min-width: 280px;
+  max-width: min(360px, calc(100vw - 24px));
   max-height: calc(100vh - 72px);
-  padding: 2px;
+  padding: 4px 0;
   overflow: hidden auto;
   border: 1px solid #a0a0a0;
   border-radius: 0;
-  background: var(--app-canvas);
-  box-shadow: 0 4px 12px rgb(25 28 30 / 0.16);
+  background: #f2f2f2;
+  box-shadow: 2px 2px 8px rgb(0 0 0 / 0.18);
 }
 
 /* Do not inherit .menus > button max-width: 9em — that crushed panel labels (#624). */
@@ -2346,7 +2346,7 @@ const sourceSessionTypes = new Set<SessionType>([
 }
 
 .menu-panel button:hover {
-  background: var(--app-primary-soft);
+  background: #cce8ff;
 }
 
 .menu-panel button:disabled,
@@ -2372,9 +2372,9 @@ const sourceSessionTypes = new Set<SessionType>([
 }
 
 .menu-bar[data-menu-chrome='capture-1to1-residual'] .menus > .menu-group > button.active {
-  background: #c8e4ff;
+  background: #cce8ff;
   color: #000000;
-  box-shadow: inset 0 0 0 1px #89bdea;
+  box-shadow: inset 0 0 0 1px #99c9ef;
 }
 
 .menu-bar[data-menu-sep='capture-1to1-residual'] .menu-separator {
@@ -2461,10 +2461,10 @@ const sourceSessionTypes = new Set<SessionType>([
   gap: 0;
   min-width: 0;
   height: 24px;
-  padding: 0 2px;
+  padding: 0 4px;
   overflow: visible;
-  border-top: 1px solid #d0d0d0;
-  background: #ffffff;
+  border-top: 1px solid #dcdcdc;
+  background: #f0f3f9;
 }
 
 .menu-group {
@@ -2503,7 +2503,7 @@ const sourceSessionTypes = new Set<SessionType>([
 .menus > .menu-group > button:hover,
 .menus > .menu-group > button.active,
 .chrome-button:hover {
-  background: #eef4ff;
+  background: #dce8f8;
 }
 
 .top-actions {
@@ -2708,7 +2708,7 @@ const sourceSessionTypes = new Set<SessionType>([
 }
 
 .tab-strip[data-tab-strip-density='capture-1to1-residual'] {
-  background: #f0f0f0;
+  background: #f0f3f9;
 }
 
 .tab-strip[data-tab-strip-density='capture-1to1-residual'] .tab-chip {
@@ -2888,15 +2888,15 @@ const sourceSessionTypes = new Set<SessionType>([
   grid-template-columns: repeat(4, minmax(0, 1fr));
   align-items: stretch;
   min-width: 0;
-  height: 19.5px;
-  min-height: 19.5px;
+  height: 26px;
+  min-height: 26px;
   padding: 0;
-  border-top: 1px solid #a0a0a0;
-  background: #f0f0f0;
-  color: #000000;
-  font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
+  border-top: 1px solid #b8b8b8;
+  background: #d4d4d4;
+  color: #1a1a1a;
+  font-family: 'Segoe UI', 'Microsoft YaHei UI', 'PingFang SC', sans-serif;
   font-size: 11px;
-  line-height: 18px;
+  line-height: 24px;
 }
 
 .status-bar[data-status-band='capture-1to1-residual'] .status-bar-pane {
@@ -2911,10 +2911,10 @@ const sourceSessionTypes = new Set<SessionType>([
 .status-bar[data-chrome-kind='folder-pair'] {
   /* Capture Folder Compare panes (DPR≈2): 222 | 131 | 222.5 | 39 | 222 | 131 | fr */
   grid-template-columns: 222px 131px 222.5px 39px 222px 131px minmax(0, 1fr);
-  height: 19.5px;
-  min-height: 19.5px;
+  height: 26px;
+  min-height: 26px;
   font-size: 11px;
-  line-height: 18px;
+  line-height: 24px;
 }
 
 .status-bar[data-chrome-kind='folder-pair'] .status-bar-pane {
@@ -2933,10 +2933,10 @@ const sourceSessionTypes = new Set<SessionType>([
 .status-bar[data-chrome-kind='folder-sync'] {
   /* Capture Folder Sync panes (DPR≈2): 266.5 | 268.5 | 118 | 268 | fr */
   grid-template-columns: 266.5px 268.5px 118px 268px minmax(0, 1fr);
-  height: 19.5px;
-  min-height: 19.5px;
+  height: 26px;
+  min-height: 26px;
   font-size: 11px;
-  line-height: 18px;
+  line-height: 24px;
 }
 
 .status-bar[data-chrome-kind='folder-sync'] .status-bar-pane {
@@ -2958,10 +2958,10 @@ const sourceSessionTypes = new Set<SessionType>([
       0,
       1fr
     );
-  height: 19.5px;
-  min-height: 19.5px;
+  height: 26px;
+  min-height: 26px;
   font-size: 11px;
-  line-height: 18px;
+  line-height: 24px;
 }
 
 .status-bar[data-chrome-kind='folder-merge'] .status-bar-pane {
@@ -2986,10 +2986,10 @@ const sourceSessionTypes = new Set<SessionType>([
 .status-bar[data-chrome-kind='table-session'],
 .status-bar[data-chrome-kind='registry-session'],
 .status-bar[data-chrome-kind='clipboard-session'] {
-  height: 19.5px;
-  min-height: 19.5px;
+  height: 26px;
+  min-height: 26px;
   font-size: 11px;
-  line-height: 18px;
+  line-height: 24px;
 }
 
 .status-bar[data-chrome-kind='text-session'] .status-bar-pane,
@@ -3037,10 +3037,10 @@ const sourceSessionTypes = new Set<SessionType>([
 
 .status-bar[data-chrome-kind='text-edit-session'] {
   grid-template-columns: 91.5px minmax(0, 1fr);
-  height: 19.5px;
-  min-height: 19.5px;
+  height: 26px;
+  min-height: 26px;
   font-size: 11px;
-  line-height: 18px;
+  line-height: 24px;
 }
 
 .status-bar[data-chrome-kind='text-edit-session'] .status-bar-pane {
@@ -3275,15 +3275,15 @@ html[data-show-sidebar='1'] .sidebar {
 .app-shell-dense-chrome:has(.status-bar[data-chrome-kind='folder-sync']),
 .app-shell-dense-chrome:has(.status-bar[data-chrome-kind='folder-merge']),
 .app-shell-dense-chrome:has(.status-bar[data-chrome-kind$='-session']) {
-  /* Single capture menu row; status track toward capture ~19.5px (DPR≈2). */
-  grid-template-rows: 23.5px minmax(0, 1fr) 19.5px;
+  /* Dense menu row; status track matches HTML demo ~26px. */
+  grid-template-rows: 23.5px minmax(0, 1fr) 26px;
 }
 
 .app-shell:not(.app-shell-dense-chrome):has(.status-bar[data-chrome-kind='folder-pair']),
 .app-shell:not(.app-shell-dense-chrome):has(.status-bar[data-chrome-kind='folder-sync']),
 .app-shell:not(.app-shell-dense-chrome):has(.status-bar[data-chrome-kind='folder-merge']),
 .app-shell:not(.app-shell-dense-chrome):has(.status-bar[data-chrome-kind$='-session']) {
-  grid-template-rows: 48px minmax(0, 1fr) 19.5px;
+  grid-template-rows: 48px minmax(0, 1fr) 26px;
 }
 
 .app-shell-dense-chrome .menu-bar {
diff --git a/src/styles/main.css b/src/styles/main.css
index c091051a..2db9c32b 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -1,37 +1,42 @@
 :root {
   color-scheme: light;
 
+  /* Aligned with standalone HTML demo chrome tokens (css/demo.css). */
   --app-bg: #ffffff;
   --app-canvas: #ffffff;
   --app-surface: #f0f0f0;
   --app-surface-low: #ececec;
   --app-surface-muted: #e6e6e6;
-  --app-surface-container: #eeeeee;
+  --app-surface-container: #f9f9f9;
   --app-surface-high: #dedede;
-  --app-surface-highest: #c7dff6;
-  --app-border: #c0c0c0;
-  --app-border-soft: rgb(176 182 190 / 0.62);
-  --app-text: #111111;
-  --app-text-muted: #3f3f46;
-  --app-text-faint: #737373;
-  --app-primary: #2b75bd;
-  --app-primary-strong: #66b9ff;
-  --app-primary-soft: #c8e4ff;
-  --app-status: #f0f0f0;
-  --app-status-text: #111111;
+  --app-surface-highest: #cce8ff;
+  --app-border: #c8c8c8;
+  --app-border-soft: #dcdcdc;
+  --app-text: #1a1a1a;
+  --app-text-muted: #666666;
+  --app-text-faint: #888888;
+  --app-primary: #0078d4;
+  --app-primary-strong: #0563c1;
+  --app-primary-soft: #cce8ff;
+  --app-status: #d4d4d4;
+  --app-status-text: #1a1a1a;
+  --app-menu: #f0f3f9;
+  --app-title: #f1f3f9;
+  --app-sidebar: #f5f5f5;
+  --app-row-hover: #f0f7ff;
+  --app-row-sel: #cce8ff;
   --diff-added-bg: #f4fff4;
   --diff-added-fg: #005f18;
   --diff-deleted-bg: #ffe3e3;
-  --diff-deleted-fg: #e00000;
+  --diff-deleted-fg: #c00000;
   --diff-modified-bg: #ffe3e3;
-  --diff-modified-fg: #e00000;
+  --diff-modified-fg: #c00000;
   --diff-conflict-bg: #f0ddff;
   --diff-conflict-fg: #8a158a;
   --diff-gutter-bg: #efefef;
-  --font-mono: 'JetBrains Mono', 'Cascadia Mono', consolas, monospace;
-  --app-font-family:
-    'Segoe UI', 'PingFang SC', 'Microsoft YaHei', ui-sans-serif, system-ui, sans-serif;
-  --app-font-size: 18px;
+  --font-mono: 'Consolas', 'Cascadia Mono', 'Menlo', monospace;
+  --app-font-family: 'Segoe UI', 'Microsoft YaHei UI', 'PingFang SC', system-ui, sans-serif;
+  --app-font-size: 13px;
 }
 
 html[data-theme='dark'] {
@@ -148,8 +153,8 @@ select {
 }
 
 .workbench-shell-single-session .bc-session-toolbar {
-  min-height: 39.5px;
-  border-bottom: 1px solid #a0a0a0;
+  min-height: 56px;
+  border-bottom: 1px solid #c8c8c8;
   background: #f0f0f0;
 }
 
@@ -158,18 +163,18 @@ select {
 }
 
 .workbench-shell-single-session .bc-toolbar-command {
-  min-width: 59px;
-  height: 37.5px;
-  padding: 1px 2px 2px;
+  min-width: 52px;
+  height: 48px;
+  padding: 2px 6px;
 }
 
 .workbench-shell-single-session .bc-session-toolbar-compact {
-  min-height: 32px;
+  min-height: 40px;
 }
 
 .workbench-shell-single-session .bc-session-toolbar-compact .bc-toolbar-command {
-  min-width: 40px;
-  height: 32px;
+  min-width: 44px;
+  height: 36px;
 }
 
 .app-shell-single-session .tab-strip {
@@ -189,9 +194,9 @@ select {
 
 .app-shell-single-session .folder-toolbar .path-pair {
   gap: 0 !important;
-  min-height: 20px !important;
-  padding: 0 1px !important;
-  border-bottom: 1px solid #a0a0a0 !important;
+  min-height: 28px !important;
+  padding: 4px 8px !important;
+  border-bottom: 1px solid #c8c8c8 !important;
   background: #f0f0f0 !important;
 }
 
@@ -210,8 +215,8 @@ select {
 
 .app-shell-single-session .folder-toolbar .path-pair .path-field-row > input,
 .app-shell-single-session .folder-toolbar .path-pair .path-field-row > .path-input {
-  height: 16.5px !important;
-  min-height: 16.5px !important;
+  height: 24px !important;
+  min-height: 24px !important;
   border-radius: 0 !important;
   font-size: 12px !important;
 }
@@ -322,15 +327,15 @@ select {
 .bc-session-toolbar {
   display: flex;
   align-items: stretch;
-  gap: 0;
+  gap: 2px;
   min-width: 0;
-  min-height: 39.5px;
-  padding: 1px 2px;
+  min-height: 56px;
+  padding: 4px 8px;
   overflow: auto hidden;
-  border-bottom: 1px solid #a0a0a0;
+  border-bottom: 1px solid #c8c8c8;
 
-  /* Capture MainBar band is white, not app-surface gray */
-  background: #ffffff;
+  /* Demo toolbar band */
+  background: #f0f0f0;
 }
 
 /* Text Merge capture MainBar wraps to ~2×38px (~83px CSS at DPR≈2) instead of horizontal-only scroll. */
@@ -423,25 +428,26 @@ select {
 
 .bc-toolbar-command {
   display: grid;
-  grid-template-rows: 20px auto;
-  align-content: center;
-  justify-items: center;
-  box-sizing: border-box;
+  grid-template-rows: 22px auto;
   flex: 0 0 auto;
+  gap: 2px;
   width: auto;
-  min-width: 59px;
+  min-width: 52px;
   max-width: 88px;
-  height: 37.5px;
-  padding: 1px 2px 2px;
+  height: 48px;
+  padding: 2px 6px;
   overflow: hidden;
-  border: 0;
-  border-right: 0;
+  border: 1px solid transparent;
+  border-radius: 3px;
   background: transparent;
   color: #1a1a1a;
   font-size: 11px;
   line-height: 12px;
   white-space: nowrap;
   cursor: default;
+  align-content: center;
+  justify-items: center;
+  box-sizing: border-box;
 }
 
 .bc-toolbar-command > span,
@@ -456,14 +462,16 @@ select {
 
 /* Capture MainBar active: ~#cce8ff fill, ~#a5c7f7 edge */
 .bc-toolbar-command-active {
-  border-radius: 2px;
+  border-radius: 3px;
+  border-color: #99c9ef;
   background: #cce8ff;
-  box-shadow: inset 0 0 0 1px #a5c7f7;
+  box-shadow: none;
 }
 
 .bc-toolbar-command:hover:not(:disabled) {
-  border-radius: 2px;
-  background: #e5f2fc;
+  border-radius: 3px;
+  border-color: #c8c8c8;
+  background: #e8e8e8;
 }
 
 .bc-toolbar-command-active:hover:not(:disabled) {
@@ -491,15 +499,15 @@ select {
 }
 
 .bc-session-toolbar-compact {
-  min-height: 39.5px;
+  min-height: 40px;
 }
 
 .bc-session-toolbar-compact .bc-toolbar-command {
-  grid-template-rows: 20px auto;
-  min-width: 48px;
+  grid-template-rows: 18px auto;
+  min-width: 44px;
   max-width: 80px;
-  height: 37.5px;
-  padding: 1px 2px;
+  height: 36px;
+  padding: 1px 4px;
   font-size: 10px;
   line-height: 11px;
 }
@@ -1172,8 +1180,8 @@ select {
   flex: 1 1 auto !important;
   width: auto !important;
   min-width: 0 !important;
-  height: 16.5px !important;
-  min-height: 16.5px !important;
+  height: 24px !important;
+  min-height: 24px !important;
   padding: 0 4px !important;
   overflow: hidden !important;
   font-size: 12px !important;
@@ -1470,7 +1478,7 @@ select {
 }
 
 .folder-filter-pattern {
-  height: 16.5px !important;
+  height: 24px !important;
   padding: 0 6px !important;
   border: 1px solid #a0a0a0 !important;
   border-radius: 0 !important;
@@ -1490,15 +1498,15 @@ select {
 
 .folder-filter-strip-btn {
   display: grid !important;
-  grid-template-rows: 20px auto !important;
+  grid-template-rows: 22px auto !important;
   align-content: center !important;
   justify-items: center !important;
   box-sizing: border-box !important;
-  width: 59px !important;
-  min-width: 59px !important;
-  max-width: 59px !important;
-  height: 37.5px !important;
-  padding: 1px 2px 2px !important;
+  width: 52px !important;
+  min-width: 52px !important;
+  max-width: 72px !important;
+  height: 48px !important;
+  padding: 2px 6px !important;
   border: 0 !important;
   border-right: 1px solid #c0c0c0 !important;
   background: transparent !important;
@@ -1624,7 +1632,7 @@ select {
 .split-pane-header,
 .pane-header,
 .metadata-header {
-  min-height: 16.5px !important;
+  min-height: 24px !important;
   padding: 1px 3px !important;
   border-color: #c7cbd1 !important;
   border-radius: 0 !important;
@@ -1964,7 +1972,7 @@ html[data-show-path-bars='0'] .path-pair-bar {
 }
 
 .folder-compare-view .tree-row.selected {
-  background: #a8cdf1 !important;
+  background: #cce8ff !important;
   outline: 0 !important;
 }
 
@@ -2049,7 +2057,7 @@ html[data-show-path-bars='0'] .path-pair-bar {
 }
 
 .folder-sync-view .sync-row-selected {
-  background: #a8cdf1 !important;
+  background: #cce8ff !important;
 }
 
 .folder-sync-view .folder-session-log {
@@ -2093,7 +2101,7 @@ html[data-show-path-bars='0'] .path-pair-bar {
 
 .folder-merge-view .merge-plan-row.selected {
   outline: 0 !important;
-  background: #a8cdf1 !important;
+  background: #cce8ff !important;
 }
 
 .folder-merge-view .folder-session-log {
@@ -2411,8 +2419,8 @@ html[data-show-path-bars='0'] .path-pair-bar {
 }
 
 .picture-compare-view .picture-path-panel input {
-  height: 16.5px !important;
-  min-height: 16.5px !important;
+  height: 24px !important;
+  min-height: 24px !important;
   padding: 0 4px !important;
   font-size: 12px !important;
 }
@@ -2724,8 +2732,8 @@ html[data-show-path-bars='0'] .path-pair-bar {
 }
 
 .media-compare-view .media-path-panel input {
-  height: 16.5px !important;
-  min-height: 16.5px !important;
+  height: 24px !important;
+  min-height: 24px !important;
   padding: 0 4px !important;
   border-radius: 0 !important;
   font-size: 12px !important;
@@ -2958,8 +2966,8 @@ html[data-show-path-bars='0'] .path-pair-bar {
 }
 
 .version-compare-view .version-path-panel input {
-  height: 16.5px !important;
-  min-height: 16.5px !important;
+  height: 24px !important;
+  min-height: 24px !important;
   padding: 0 6px !important;
   border: 1px solid #a0a0a0 !important;
   border-radius: 0 !important;
@@ -3167,8 +3175,8 @@ html[data-show-path-bars='0'] .path-pair-bar {
 }
 
 .registry-compare-view .path-field-row .path-input {
-  height: 16.5px !important;
-  min-height: 16.5px !important;
+  height: 24px !important;
+  min-height: 24px !important;
 }
 
 .registry-compare-view .registry-input-panel textarea {
@@ -3672,7 +3680,7 @@ html[data-show-path-bars='0'] .path-pair-bar {
 }
 
 .text-compare-view .bc-path-row input {
-  height: 16.5px !important;
+  height: 24px !important;
   padding: 0 4px !important;
   font-size: 12px !important;
 }
@@ -3825,7 +3833,7 @@ html[data-show-path-bars='0'] .path-pair-bar {
 }
 
 .text-merge-view .output-path-input {
-  height: 16.5px !important;
+  height: 24px !important;
   padding: 0 4px !important;
   border-radius: 0 !important;
   font-size: 12px !important;
@@ -3954,8 +3962,8 @@ html[data-show-path-bars='0'] .path-pair-bar {
 }
 
 .folder-sync-view .path-field-row .path-input {
-  height: 16.5px !important;
-  min-height: 16.5px !important;
+  height: 24px !important;
+  min-height: 24px !important;
 }
 
 .folder-sync-view .sync-setting-actions {
@@ -4088,26 +4096,26 @@ html[data-show-path-bars='0'] .path-pair-bar {
 
 .folder-sync-view .folder-filter-chrome[data-filters-align='capture-1to1-residual'] {
   gap: 4px 6px !important;
-  min-height: 37.5px !important;
+  min-height: 48px !important;
 }
 
 .folder-sync-view .folder-filter-chrome {
-  min-height: 37.5px !important;
+  min-height: 48px !important;
   padding: 0 4px !important;
   border-bottom: 1px solid #a0a0a0 !important;
   background: #f0f0f0 !important;
 }
 
 .folder-sync-view .folder-filter-chrome[data-sync-filters-place='capture-1to1-residual'] {
-  min-height: 37.5px !important;
+  min-height: 48px !important;
   background: #f0f0f0 !important;
 }
 
 .folder-sync-view
   .sync-filter-pattern-field
   .folder-filter-pattern[data-sync-pattern-place='capture-1to1-residual'] {
-  height: 16.5px !important;
-  min-height: 16.5px !important;
+  height: 24px !important;
+  min-height: 24px !important;
   padding: 0 6px !important;
   border-radius: 0 !important;
   font-size: 12px !important;
@@ -4128,8 +4136,8 @@ html[data-show-path-bars='0'] .path-pair-bar {
 }
 
 .folder-merge-view .merge-paths input {
-  height: 16.5px !important;
-  min-height: 16.5px !important;
+  height: 24px !important;
+  min-height: 24px !important;
   padding: 0 4px !important;
   border-radius: 2px !important;
   font-size: 11px !important;
@@ -4146,8 +4154,8 @@ html[data-show-path-bars='0'] .path-pair-bar {
 
 .folder-merge-view .merge-to-chrome .path-input,
 .folder-merge-view .merge-to-chrome input[type='text'] {
-  height: 16.5px !important;
-  min-height: 16.5px !important;
+  height: 24px !important;
+  min-height: 24px !important;
   padding: 0 4px !important;
   font-size: 11px !important;
 }
@@ -4184,8 +4192,8 @@ html[data-show-path-bars='0'] .path-pair-bar {
   .n-button[data-testid='folder-merge-same-ok'] {
   width: 64.5px !important;
   min-width: 64.5px !important;
-  height: 37.5px !important;
-  min-height: 37.5px !important;
+  height: 48px !important;
+  min-height: 48px !important;
   padding: 0 4px !important;
   font-size: 11px !important;
 }
@@ -4195,8 +4203,8 @@ html[data-show-path-bars='0'] .path-pair-bar {
   .n-button[data-testid='folder-merge-peek'] {
   width: 59px !important;
   min-width: 59px !important;
-  height: 37.5px !important;
-  min-height: 37.5px !important;
+  height: 48px !important;
+  min-height: 48px !important;
   padding: 0 4px !important;
   font-size: 11px !important;
 }
@@ -4478,8 +4486,8 @@ html[data-show-path-bars='0'] .path-pair-bar {
 }
 
 .text-edit-view .path-input {
-  height: 16.5px !important;
-  min-height: 16.5px !important;
+  height: 24px !important;
+  min-height: 24px !important;
 }
 
 .text-edit-view .toolbar-button {
@@ -4547,8 +4555,8 @@ html[data-show-path-bars='0'] .path-pair-bar {
 
 .text-patch-view .path-field-row input,
 .text-patch-view .path-field-row .path-input {
-  height: 16.5px !important;
-  min-height: 16.5px !important;
+  height: 24px !important;
+  min-height: 24px !important;
   padding: 0 4px !important;
   border-radius: 0 !important;
   font-size: 12px !important;
diff --git a/src/views/FolderCompareView.vue b/src/views/FolderCompareView.vue
index 5d38ca32..b368d1cd 100644
--- a/src/views/FolderCompareView.vue
+++ b/src/views/FolderCompareView.vue
@@ -5077,7 +5077,7 @@ onUnmounted(() => {
 .path-pair input {
   width: 100%;
   min-width: 0;
-  height: 16.5px;
+  height: 24px;
   padding: 0 4px;
   overflow: hidden;
   border: 1px solid var(--app-border);
@@ -5156,14 +5156,14 @@ onUnmounted(() => {
 
 .folder-filter-strip-btn {
   display: grid;
-  grid-template-rows: 20px auto;
+  grid-template-rows: 22px auto;
   align-content: center;
   justify-items: center;
   box-sizing: border-box;
-  width: 59px;
-  min-width: 59px;
-  max-width: 59px;
-  height: 37.5px;
+  width: 52px;
+  min-width: 52px;
+  max-width: 72px;
+  height: 48px;
   padding: 1px 2px 2px;
   border: 0;
   border-right: 1px solid #c0c0c0;
@@ -5206,7 +5206,7 @@ onUnmounted(() => {
 .folder-filter-pattern {
   flex: 1 1 180px;
   min-width: 120px;
-  height: 16.5px;
+  height: 24px;
   padding: 0 6px;
   border: 1px solid #a0a0a0;
   border-radius: 0;
@@ -5231,7 +5231,7 @@ onUnmounted(() => {
 
 .manual-alignment-tools select {
   min-width: 220px;
-  height: 16.5px;
+  height: 24px;
   padding: 0 4px;
   border: 1px solid var(--app-border);
   border-radius: 0;
@@ -5658,7 +5658,7 @@ onUnmounted(() => {
 }
 
 .tree-row.selected {
-  background: #a8cdf1;
+  background: #cce8ff;
   outline: 0;
 }
 
diff --git a/src/views/FolderMergeView.vue b/src/views/FolderMergeView.vue
index e40184a4..fec59a57 100644
--- a/src/views/FolderMergeView.vue
+++ b/src/views/FolderMergeView.vue
@@ -2990,8 +2990,8 @@ h1 {
 
 .merge-paths input {
   width: 100%;
-  height: 16.5px;
-  min-height: 16.5px;
+  height: 24px;
+  min-height: 24px;
   padding: 0 4px;
   overflow: hidden;
   border: 1px solid var(--app-border);
@@ -3041,8 +3041,8 @@ h1 {
 
 .merge-to-path .path-input,
 .merge-to-path input {
-  height: 16.5px;
-  min-height: 16.5px;
+  height: 24px;
+  min-height: 24px;
   padding: 0 4px;
   font-size: 11px;
 }
@@ -3051,8 +3051,8 @@ h1 {
   :deep(.n-button[data-testid='folder-merge-same-ok']) {
   width: 64.5px;
   min-width: 64.5px;
-  height: 37.5px;
-  min-height: 37.5px;
+  height: 48px;
+  min-height: 48px;
   padding: 0 4px;
   border-radius: 0;
   font-size: 11px;
@@ -3062,8 +3062,8 @@ h1 {
   :deep(.n-button[data-testid='folder-merge-peek']) {
   width: 59px;
   min-width: 59px;
-  height: 37.5px;
-  min-height: 37.5px;
+  height: 48px;
+  min-height: 48px;
   padding: 0 4px;
   border-radius: 0;
   font-size: 11px;
@@ -3387,7 +3387,7 @@ h1 {
 
 .merge-plan-row.selected {
   outline: 0;
-  background: #a8cdf1;
+  background: #cce8ff;
 }
 
 .folder-session-log {
@@ -3508,14 +3508,14 @@ h1 {
 
 .folder-filter-strip-btn {
   display: grid;
-  grid-template-rows: 20px auto;
+  grid-template-rows: 22px auto;
   align-content: center;
   justify-items: center;
   box-sizing: border-box;
-  width: 59px;
-  min-width: 59px;
-  max-width: 59px;
-  height: 37.5px;
+  width: 52px;
+  min-width: 52px;
+  max-width: 72px;
+  height: 48px;
   padding: 1px 4px 2px;
   border: 0;
   border-right: 1px solid #c0c0c0;
@@ -3558,7 +3558,7 @@ h1 {
 .folder-filter-pattern {
   flex: 1 1 auto;
   min-width: 0;
-  height: 16.5px;
+  height: 24px;
   padding: 0 6px;
   border: 1px solid #c0c0c0;
   border-radius: 0;
diff --git a/src/views/FolderSyncView.vue b/src/views/FolderSyncView.vue
index 63757e28..1808cd77 100644
--- a/src/views/FolderSyncView.vue
+++ b/src/views/FolderSyncView.vue
@@ -2451,8 +2451,8 @@ h1 {
 .path-field-row .path-input {
   flex: 1;
   min-width: 0;
-  height: 16.5px;
-  min-height: 16.5px;
+  height: 24px;
+  min-height: 24px;
 }
 
 .sync-settings {
@@ -2471,8 +2471,8 @@ h1 {
 
 .sync-filter-pattern-field .folder-filter-pattern {
   width: 100%;
-  height: 16.5px;
-  min-height: 16.5px;
+  height: 24px;
+  min-height: 24px;
   padding: 0 6px;
   border: 1px solid #c0c0c0;
   border-radius: 0;
@@ -2496,7 +2496,7 @@ h1 {
 .sync-settings input,
 .sync-settings select {
   width: 100%;
-  height: 16.5px;
+  height: 24px;
   padding: 0 4px;
   border: 1px solid var(--app-border);
   border-radius: 2px;
@@ -2808,7 +2808,7 @@ h1 {
 }
 
 .sync-row-selected {
-  background: #a8cdf1;
+  background: #cce8ff;
 }
 
 .folder-session-log {
@@ -2910,7 +2910,7 @@ h1 {
 
 .folder-filter-chrome {
   align-items: center;
-  min-height: 37.5px;
+  min-height: 48px;
   padding: 0 4px;
   border-bottom: 1px solid #a0a0a0;
   background: #f0f0f0;
@@ -2934,14 +2934,14 @@ h1 {
 
 .folder-filter-strip-btn {
   display: grid;
-  grid-template-rows: 20px auto;
+  grid-template-rows: 22px auto;
   align-content: center;
   justify-items: center;
   box-sizing: border-box;
-  width: 59px;
-  min-width: 59px;
-  max-width: 59px;
-  height: 37.5px;
+  width: 52px;
+  min-width: 52px;
+  max-width: 72px;
+  height: 48px;
   padding: 1px 4px 2px;
   border: 0;
   border-right: 1px solid #c0c0c0;
@@ -2984,7 +2984,7 @@ h1 {
 .folder-filter-pattern {
   flex: 1 1 auto;
   min-width: 0;
-  height: 16.5px;
+  height: 24px;
   padding: 0 6px;
   border: 1px solid #c0c0c0;
   border-radius: 0;
diff --git a/src/views/HexCompareView.vue b/src/views/HexCompareView.vue
index cf4f2675..e1071d84 100644
--- a/src/views/HexCompareView.vue
+++ b/src/views/HexCompareView.vue
@@ -1627,8 +1627,8 @@ h2 {
 .hex-wrap-controls button {
   width: 100%;
   min-width: 0;
-  height: 16.5px;
-  min-height: 16.5px;
+  height: 24px;
+  min-height: 24px;
   padding: 0 6px;
   border: 1px solid #a0a0a0;
   border-radius: 0;
@@ -2008,7 +2008,7 @@ h2 {
 .hex-path-field .path-input {
   flex: 1 1 auto;
   min-width: 0;
-  height: 16.5px;
+  height: 24px;
   padding: 0 4px;
   border: 1px solid #a0a0a0;
   border-radius: 0;
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 7c9a7be9..da0205f9 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -651,7 +651,7 @@ onMounted(() => {
     <section
       class="home-workspace bc-home-workspace"
       data-testid="home-layout"
-      data-home-density="capture-1to1"
+      data-home-density="html-demo"
       data-home-chrome="minimal"
     >
       <aside
@@ -858,7 +858,7 @@ onMounted(() => {
               <span class="session-card-icon">
                 <component
                   :is="entry.icon"
-                  :size="48"
+                  :size="52"
                 />
               </span>
               <h3>{{ $t(entry.titleKey) }}</h3>
@@ -1172,31 +1172,31 @@ onMounted(() => {
 .bc-home-workspace {
   display: grid;
 
-  /* home.png tree ~241 CSS px at DPR 2; avoid prior 140–170 crush. */
-  grid-template-columns: minmax(220px, 248px) minmax(0, 1fr);
+  /* HTML demo sidebar ~260px */
+  grid-template-columns: minmax(240px, 260px) minmax(0, 1fr);
   background: #f9f9f9;
 }
 
 .bc-session-tree {
   display: grid;
-  grid-template-rows: 28px minmax(0, 1fr) 32px;
+  grid-template-rows: auto minmax(0, 1fr) auto;
   min-width: 0;
   min-height: 0;
-  border-right: 1px solid #b9bec7;
-  background: #e3e7ed;
+  border-right: 1px solid #c8c8c8;
+  background: #f5f5f5;
 }
 
 .bc-session-tree header {
   display: flex;
   align-items: center;
   min-width: 0;
-  padding: 0 8px;
+  padding: 10px 12px 6px;
   overflow: hidden;
-  border-bottom: 1px solid #c6ccd5;
-  background: #ededed;
-  color: #111827;
-  font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
-  font-size: 12px;
+  border-bottom: 1px solid #dcdcdc;
+  background: #f5f5f5;
+  color: #1a1a1a;
+  font-family: 'Segoe UI', 'Microsoft YaHei UI', 'PingFang SC', sans-serif;
+  font-size: 13px;
   font-weight: 600;
   line-height: 1;
   text-overflow: ellipsis;
@@ -1213,19 +1213,19 @@ onMounted(() => {
   display: grid;
   grid-template-columns: 12px 18px minmax(0, 1fr);
   align-items: center;
-  gap: 4px;
+  gap: 6px;
   width: 100%;
   height: auto;
-  min-height: 20px;
-  padding: 1px 2px;
+  min-height: 22px;
+  padding: 4px 12px 4px 18px;
   border: 0;
   background: transparent;
-  color: #111827;
-  font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
+  color: #1a1a1a;
+  font-family: 'Segoe UI', 'Microsoft YaHei UI', 'PingFang SC', sans-serif;
   font-size: 12px;
   line-height: 16px;
   text-align: left;
-  cursor: pointer;
+  cursor: default;
 }
 
 .bc-tree-row.child {
@@ -1241,7 +1241,11 @@ onMounted(() => {
 .bc-tree-row:hover,
 .bc-tree-row:focus-visible {
   outline: 0;
-  background: #c7dcf6;
+  background: #f0f7ff;
+}
+
+.bc-tree-row.selected {
+  background: #cce8ff;
 }
 
 .bc-tree-row strong {
@@ -1253,35 +1257,37 @@ onMounted(() => {
 
 .bc-tree-footer {
   display: grid;
-  grid-template-columns: 30px 30px minmax(0, 1fr);
+  grid-template-columns: 24px 24px minmax(0, 1fr);
   align-items: center;
-  gap: 3px;
-  padding: 2px 4px;
-  border-top: 1px solid #c6ccd5;
-  background: #fdfdfd;
+  gap: 4px;
+  padding: 6px 8px;
+  border-top: 1px solid #dcdcdc;
+  background: #f5f5f5;
 }
 
 .bc-tree-footer button {
-  height: 28px;
-  border: 1px solid #c6ccd5;
-  border-radius: 0;
+  width: 24px;
+  height: 24px;
+  border: 1px solid #c8c8c8;
+  border-radius: 3px;
   background: #ffffff;
   color: #2f343a;
   font-size: 14px;
   line-height: 1;
+  cursor: default;
 }
 
 .bc-tree-footer input {
   width: 100%;
   min-width: 0;
-  height: 22px;
-  padding: 0 6px;
+  height: 24px;
+  padding: 0 8px;
   overflow: hidden;
-  border: 1px solid #c6ccd5;
-  border-radius: 0;
+  border: 1px solid #c8c8c8;
+  border-radius: 3px;
   background: #ffffff;
-  color: #111827;
-  font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
+  color: #1a1a1a;
+  font-family: 'Segoe UI', 'Microsoft YaHei UI', 'PingFang SC', sans-serif;
   font-size: 12px;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -1300,7 +1306,7 @@ onMounted(() => {
 .bc-selected-session {
   display: grid;
   gap: 8px;
-  padding: 12px 16px 8px;
+  padding: 16px 24px 8px;
 }
 
 .bc-selected-title {
@@ -1327,43 +1333,50 @@ onMounted(() => {
 }
 
 .bc-selected-title strong {
-  font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
-  font-size: 20px;
+  font-family: 'Segoe UI', 'Microsoft YaHei UI', 'PingFang SC', sans-serif;
+  font-size: 16px;
   font-weight: 600;
   line-height: 1.15;
 }
 
 .bc-selected-title span {
-  color: #374151;
-  font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
-  font-size: 13px;
-  line-height: 1.2;
+  color: #1a1a1a;
+  font-family: 'Segoe UI', 'Microsoft YaHei UI', 'PingFang SC', sans-serif;
+  font-size: 12px;
+  line-height: 1.6;
 }
 
 .bc-selected-actions {
   display: flex;
-  gap: 10px;
+  gap: 8px;
 }
 
 .bc-selected-actions button {
-  width: 95.5px;
+  width: auto;
+  min-width: 80px;
   max-width: 100%;
-  height: 30px;
+  height: 28px;
+  padding: 0 16px;
   overflow: hidden;
-  border: 1px solid #c7cdd6;
-  border-radius: 2px;
-  background: #ffffff;
-  color: #111827;
-  font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
+  border: 1px solid #c8c8c8;
+  border-radius: 3px;
+  background: #fafafa;
+  color: #1a1a1a;
+  font-family: 'Segoe UI', 'Microsoft YaHei UI', 'PingFang SC', sans-serif;
   font-size: 12px;
   text-overflow: ellipsis;
   white-space: nowrap;
-  cursor: pointer;
+  cursor: default;
 }
 
 .bc-selected-actions button:first-child {
-  border-color: #4aa3ff;
-  color: #1d4f91;
+  background: #ffffff;
+  color: #0563c1;
+  border-color: #5b9bd5;
+}
+
+.bc-selected-actions button:first-child:hover {
+  background: #e8f3fc;
 }
 
 .bc-selected-actions button:last-child {
@@ -1378,7 +1391,7 @@ onMounted(() => {
 }
 
 .new-session-panel {
-  padding: 4px 12px 16px;
+  padding: 4px 24px 24px;
 }
 
 .new-session-panel h2,
@@ -1390,23 +1403,24 @@ onMounted(() => {
 
 .new-session-grid {
   display: grid;
-  grid-template-columns: repeat(3, minmax(140px, 157px));
-  justify-content: center;
-  gap: 8px 12px;
-  width: min(500px, calc(100% - 24px));
-  margin: 4px auto 8px;
+  grid-template-columns: repeat(3, minmax(180px, 220px));
+  justify-content: start;
+  gap: 18px 28px;
+  width: min(760px, 100%);
+  max-width: 760px;
+  margin: 4px 0 8px;
 }
 
 .bc-home-instructions {
   display: grid;
   gap: 2px;
   min-height: 20px;
-  margin: 0 0 6px;
-  color: #111827;
-  font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
+  margin: 0 0 14px;
+  color: #666666;
+  font-family: 'Segoe UI', 'Microsoft YaHei UI', 'PingFang SC', sans-serif;
   font-size: 12px;
   line-height: 16px;
-  justify-items: center;
+  justify-items: start;
 }
 
 .bc-home-instructions strong {
@@ -1416,46 +1430,51 @@ onMounted(() => {
 
 .new-session-card {
   display: grid;
-  gap: 4px;
+  gap: 10px;
   width: 100%;
   min-width: 0;
   max-width: 100%;
-  height: 91.5px;
-  min-height: 91.5px;
-  padding: 8px 4px 6px;
+  height: 110px;
+  min-height: 110px;
+  padding: 12px;
   overflow: hidden;
-  border: 0;
-  border-radius: 0;
+  border: 1px solid transparent;
+  border-radius: 6px;
   background: transparent;
-  color: #111827;
-  font-size: 12px;
+  color: #1a1a1a;
+  font-size: 13px;
   line-height: 1;
   cursor: pointer;
   justify-items: center;
-  align-content: start;
+  align-content: center;
   align-self: start;
   box-sizing: border-box;
+  transition:
+    background 0.12s,
+    border-color 0.12s;
 }
 
 .new-session-card[data-card-band='tall'] {
-  height: 131px;
-  min-height: 131px;
+  height: 110px;
+  min-height: 110px;
 }
 
 .new-session-card[data-card-band='short'] {
-  height: 91.5px;
-  min-height: 91.5px;
+  height: 110px;
+  min-height: 110px;
 }
 
 .new-session-card:hover,
 .new-session-card:focus {
   outline: 0;
-  background: #eaf4ff;
+  background: #ffffff;
+  border-color: #b8d4f0;
+  box-shadow: 0 1px 4px rgb(0 90 180 / 0.12);
 }
 
 .session-card-icon {
   display: inline-grid;
-  width: 48px;
+  width: 56px;
   height: 48px;
   color: #2f353d;
   place-items: center;
@@ -1474,8 +1493,8 @@ onMounted(() => {
   max-width: 100%;
   margin: 0;
   overflow: hidden;
-  font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
-  font-size: 12px;
+  font-family: 'Segoe UI', 'Microsoft YaHei UI', 'PingFang SC', sans-serif;
+  font-size: 13px;
   font-weight: 400;
   line-height: 16px;
   text-align: center;
@@ -1802,15 +1821,6 @@ tr:hover .row-actions,
   background: color-mix(in srgb, #b45309 18%, transparent);
 }
 
-.bc-tree-row.selected {
-  background: #0078d4;
-  color: #ffffff;
-}
-
-.bc-tree-row.selected strong {
-  color: #ffffff;
-}
-
 .session-edit-panel {
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto auto;
diff --git a/src/views/MediaCompareView.vue b/src/views/MediaCompareView.vue
index 02480c3e..bb817a24 100644
--- a/src/views/MediaCompareView.vue
+++ b/src/views/MediaCompareView.vue
@@ -1277,7 +1277,7 @@ function runMediaToolbarCommand(commandId: string): void {
 .media-path-field .path-input {
   flex: 1 1 auto;
   min-width: 0;
-  height: 16.5px;
+  height: 24px;
   padding: 0 4px;
   border: 1px solid #a0a0a0;
   border-radius: 0;
diff --git a/src/views/PictureCompareView.vue b/src/views/PictureCompareView.vue
index ff46f48a..86b8b5d0 100644
--- a/src/views/PictureCompareView.vue
+++ b/src/views/PictureCompareView.vue
@@ -1675,8 +1675,8 @@ h2 {
 }
 
 .picture-path-panel input {
-  height: 16.5px;
-  min-height: 16.5px;
+  height: 24px;
+  min-height: 24px;
   padding: 0 4px;
   border: 1px solid var(--app-border);
   border-radius: 0;
diff --git a/src/views/RegistryCompareView.vue b/src/views/RegistryCompareView.vue
index 2504390a..faa7408b 100644
--- a/src/views/RegistryCompareView.vue
+++ b/src/views/RegistryCompareView.vue
@@ -1510,8 +1510,8 @@ h1 {
 .path-field-row .path-input {
   flex: 1;
   min-width: 0;
-  height: 16.5px;
-  min-height: 16.5px;
+  height: 24px;
+  min-height: 24px;
 }
 
 .registry-input-panel label {
diff --git a/src/views/TableCompareView.vue b/src/views/TableCompareView.vue
index 214b9bda..9f52c3e6 100644
--- a/src/views/TableCompareView.vue
+++ b/src/views/TableCompareView.vue
@@ -1663,8 +1663,8 @@ h2 {
 .path-field-row .path-input {
   flex: 1;
   min-width: 0;
-  height: 16.5px;
-  min-height: 16.5px;
+  height: 24px;
+  min-height: 24px;
 }
 
 .table-source-controls label {
diff --git a/src/views/TextCompareView.vue b/src/views/TextCompareView.vue
index 8ea8a9d4..435009aa 100644
--- a/src/views/TextCompareView.vue
+++ b/src/views/TextCompareView.vue
@@ -2240,8 +2240,8 @@ function onVisibilityForDiskChange(): void {
 .text-path-field .path-input {
   flex: 1 1 auto;
   min-width: 0;
-  height: 16.5px;
-  min-height: 16.5px;
+  height: 24px;
+  min-height: 24px;
 }
 
 .text-path-trailing {
diff --git a/src/views/TextEditView.vue b/src/views/TextEditView.vue
index 55b36b82..857d05dc 100644
--- a/src/views/TextEditView.vue
+++ b/src/views/TextEditView.vue
@@ -1332,8 +1332,8 @@ h1 {
 
 .path-input {
   flex: 1;
-  height: 16.5px;
-  min-height: 16.5px;
+  height: 24px;
+  min-height: 24px;
   font-family: var(--font-mono);
 }
 
diff --git a/src/views/TextMergeView.vue b/src/views/TextMergeView.vue
index 41d74e8d..d3913678 100644
--- a/src/views/TextMergeView.vue
+++ b/src/views/TextMergeView.vue
@@ -1510,7 +1510,7 @@ watch(
   width: 220px;
   min-width: 0;
   max-width: 100%;
-  height: 16.5px;
+  height: 24px;
   padding: 0 4px;
   overflow: hidden;
   border: 1px solid var(--app-border);
diff --git a/src/views/TextPatchView.vue b/src/views/TextPatchView.vue
index c98afde9..09e81a00 100644
--- a/src/views/TextPatchView.vue
+++ b/src/views/TextPatchView.vue
@@ -1378,8 +1378,8 @@ function lineNumber(value: number | null): string {
 .path-field-row .path-input {
   flex: 1;
   min-width: 0;
-  height: 16.5px;
-  min-height: 16.5px;
+  height: 24px;
+  min-height: 24px;
   padding: 0 4px;
   border: 1px solid #a0a0a0;
   border-radius: 0;
diff --git a/src/views/VersionCompareView.vue b/src/views/VersionCompareView.vue
index 8d04f95e..a499d872 100644
--- a/src/views/VersionCompareView.vue
+++ b/src/views/VersionCompareView.vue
@@ -1071,8 +1071,8 @@ h1 {
 }
 
 .version-path-panel input {
-  height: 16.5px;
-  min-height: 16.5px;
+  height: 24px;
+  min-height: 24px;
   padding: 0 6px;
   border: 1px solid #a0a0a0;
   border-radius: 0;

From db646fd502f55c05e4803b1108bd59c5891ac4ec Mon Sep 17 00:00:00 2001
From: Yukon <126093594+baseGame@users.noreply.github.com>
Date: Wed, 14 Oct 2026 13:37:16 +0800
Subject: [PATCH 2/9] Update chrome density tests for the HTML demo pass

Point Home, shell, status, path, toolbar, and session view
density locks at the remodeled demo metrics so unit checks
stay honest with the new chrome.
---
 src/layouts/AppLayout.test.ts              |  4 +-
 src/styles/clipboardChromeDensity.test.ts  |  4 +-
 src/styles/folderChromeDensity.test.ts     | 28 +++++-----
 src/styles/hexChromeDensity.test.ts        |  8 +--
 src/styles/homeChromeDensity.test.ts       | 64 +++++++++++-----------
 src/styles/mediaChromeDensity.test.ts      | 14 ++---
 src/styles/pathStatusDensity.test.ts       | 12 ++--
 src/styles/peekOptionsDensity.test.ts      |  8 +--
 src/styles/pictureChromeDensity.test.ts    | 12 ++--
 src/styles/registryChromeDensity.test.ts   |  6 +-
 src/styles/sessionToolbarIcons.test.ts     |  4 +-
 src/styles/shellChromeDensity.test.ts      | 22 ++++----
 src/styles/statusStripPixelDensity.test.ts | 36 +++++-------
 src/styles/syncMergeChromeDensity.test.ts  | 20 +++----
 src/styles/tableChromeDensity.test.ts      |  6 +-
 src/styles/textChromeDensity.test.ts       | 14 ++---
 src/styles/textEditChromeDensity.test.ts   | 12 ++--
 src/styles/textMergeChromeDensity.test.ts  | 10 ++--
 src/styles/textPatchChromeDensity.test.ts  | 12 ++--
 src/styles/versionChromeDensity.test.ts    | 10 ++--
 src/views/HomeView.test.ts                 | 18 +++---
 21 files changed, 151 insertions(+), 173 deletions(-)

diff --git a/src/layouts/AppLayout.test.ts b/src/layouts/AppLayout.test.ts
index 2a3d05b6..9a1dd65b 100644
--- a/src/layouts/AppLayout.test.ts
+++ b/src/layouts/AppLayout.test.ts
@@ -1200,12 +1200,12 @@ describe('AppLayout command palette', () => {
     expect(source).toContain('grid-template-rows: 48px minmax(0, 1fr) 24px')
     expect(source).toContain('grid-template-rows: 24px 24px')
     expect(source).toContain('data-menu-density="capture-1to1"')
-    expect(source).toMatch(/\.menu-bar\s*\{[\s\S]*?background:\s*#f0f0f0/)
+    expect(source).toMatch(/\.menu-bar\s*\{[\s\S]*?background:\s*#f0f3f9/)
     expect(menusButton?.[0]).toContain('height: 21.5px')
     expect(menusButton?.[0]).toContain('font-size: 12px')
     expect(menusButton?.[0]).not.toContain('height: 15px')
     expect(menuCommand?.[0]).toContain('min-height: 22px')
-    expect(source).toMatch(/\.menu-panel\s*\{[\s\S]*?min-width:\s*24rem/)
+    expect(source).toMatch(/\.menu-panel\s*\{[\s\S]*?min-width:\s*280px/)
     expect(source).toMatch(/\.menus > \.menu-group > button\s*\{[\s\S]*?max-width:\s*9em/)
     expect(source).toMatch(/\.menu-panel \.menu-command\s*\{[\s\S]*?max-width:\s*100%/)
     expect(source).toMatch(/\.menu-command-label\s*\{[\s\S]*?text-overflow:\s*ellipsis/)
diff --git a/src/styles/clipboardChromeDensity.test.ts b/src/styles/clipboardChromeDensity.test.ts
index 6d7bd512..dc7a96ba 100644
--- a/src/styles/clipboardChromeDensity.test.ts
+++ b/src/styles/clipboardChromeDensity.test.ts
@@ -34,8 +34,8 @@ describe('clipboard compare chrome density', () => {
     expect(clipboardView).not.toMatch(/font-size:\s*9px/)
     expect(clipboardView).not.toMatch(/min-height:\s*9px/)
 
-    expect(layout).toMatch(/data-chrome-kind='clipboard-session'[\s\S]*?height:\s*19\.5px/)
-    expect(css).toMatch(/\.bc-session-toolbar\s*\{[\s\S]*?min-height:\s*39\.5px/)
+    expect(layout).toMatch(/data-chrome-kind='clipboard-session'[\s\S]*?height:\s*26px/)
+    expect(css).toMatch(/\.bc-session-toolbar\s*\{[\s\S]*?min-height:\s*56px/)
   })
 
   it('keeps Clipboard history pane/entry chrome on capture band', () => {
diff --git a/src/styles/folderChromeDensity.test.ts b/src/styles/folderChromeDensity.test.ts
index 64fc9685..9a68bd61 100644
--- a/src/styles/folderChromeDensity.test.ts
+++ b/src/styles/folderChromeDensity.test.ts
@@ -31,7 +31,7 @@ describe('folder chrome density', () => {
     expect(folderView).toMatch(/folder-right-path-footer/)
     expect(css).toMatch(/\.folder-compare-view \.path-meta-footer[\s\S]*?min-height:\s*18px/)
     expect(css).toMatch(/\.folder-compare-view \.path-meta-footer[\s\S]*?font-size:\s*11px/)
-    expect(folderView).toMatch(/\.path-pair input\s*\{[\s\S]*?height:\s*16\.5px/)
+    expect(folderView).toMatch(/\.path-pair input\s*\{[\s\S]*?height:\s*24px/)
     expect(folderView).toMatch(/\.path-pair input\s*\{[\s\S]*?border-radius:\s*0/)
     expect(folderView).toMatch(/\.folder-toolbar\s*\{[\s\S]*?gap:\s*2px/)
     expect(folderView).toMatch(/\.folder-criteria\s*\{[\s\S]*?gap:\s*1px 4px/)
@@ -60,9 +60,9 @@ it('surfaces Filters/Peek strip at capture CSS scale', () => {
   expect(css).toMatch(/\.folder-filter-strip\s*\{/)
   expect(css).toMatch(/\.folder-filter-pattern\s*\{/)
   expect(css).toMatch(/\.folder-filter-strip-btn\s*\{/)
-  expect(css).toMatch(/\.folder-filter-strip-btn\s*\{[\s\S]*?height:\s*37\.5px/)
-  expect(css).toMatch(/\.folder-filter-strip-btn\s*\{[\s\S]*?grid-template-rows:\s*20px auto/)
-  expect(css).toMatch(/\.folder-filter-pattern\s*\{[\s\S]*?height:\s*16\.5px/)
+  expect(css).toMatch(/\.folder-filter-strip-btn\s*\{[\s\S]*?height:\s*48px/)
+  expect(css).toMatch(/\.folder-filter-strip-btn\s*\{[\s\S]*?grid-template-rows:\s*22px auto/)
+  expect(css).toMatch(/\.folder-filter-pattern\s*\{[\s\S]*?height:\s*24px/)
   expect(css).toMatch(/\.folder-filter-pattern\s*\{[\s\S]*?border-radius:\s*0/)
   expect(css).toMatch(
     /\.folder-filter-chrome\[data-mainbar-row2='capture-1to1-residual'\][\s\S]*?min-height:\s*43\.5px/,
@@ -81,12 +81,12 @@ it('surfaces Filters/Peek strip at capture CSS scale', () => {
   expect(folderView).toMatch(/data-mainbar-row2="capture-1to1-residual"/)
   expect(folderView).toMatch(/<template #toolbar>/)
   expect(folderView).toMatch(/showFiltersPanel:/)
-  expect(css).toMatch(/\.folder-filter-strip-btn\s*\{[\s\S]*?width:\s*59px/)
-  expect(css).toMatch(/\.folder-filter-strip-btn\s*\{[\s\S]*?height:\s*37\.5px/)
+  expect(css).toMatch(/\.folder-filter-strip-btn\s*\{[\s\S]*?width:\s*52px/)
+  expect(css).toMatch(/\.folder-filter-strip-btn\s*\{[\s\S]*?height:\s*48px/)
   expect(folderView).toMatch(/\.folder-filter-chrome\s*\{[\s\S]*?min-height:\s*43\.5px/)
   expect(folderView).toMatch(/background:\s*#ffffff/)
-  expect(folderView).toMatch(/\.folder-filter-strip-btn\s*\{[\s\S]*?height:\s*37\.5px/)
-  expect(folderView).toMatch(/\.folder-filter-pattern\s*\{[\s\S]*?height:\s*16\.5px/)
+  expect(folderView).toMatch(/\.folder-filter-strip-btn\s*\{[\s\S]*?height:\s*48px/)
+  expect(folderView).toMatch(/\.folder-filter-pattern\s*\{[\s\S]*?height:\s*24px/)
   expect(folderView).toMatch(/\.folder-filter-pattern\s*\{[\s\S]*?border-radius:\s*0/)
   expect(folderView).toMatch(/:size="14"/)
   expect(syncView).toMatch(/data-testid="folder-sync-filter-strip"/)
@@ -96,11 +96,11 @@ it('surfaces Filters/Peek strip at capture CSS scale', () => {
   expect(syncView).toMatch(/data-sync-pattern-place="capture-1to1-residual"/)
   expect(syncView).toMatch(/data-testid="folder-sync-filter-pattern"/)
   expect(syncView).toMatch(/data-filters-density="capture-1to1"/)
-  expect(syncView).toMatch(/\.folder-filter-chrome\s*\{[\s\S]*?min-height:\s*37\.5px/)
+  expect(syncView).toMatch(/\.folder-filter-chrome\s*\{[\s\S]*?min-height:\s*48px/)
   expect(syncView).toMatch(/\.folder-filter-chrome\s*\{[\s\S]*?background:\s*#f0f0f0/)
-  expect(syncView).toMatch(/\.folder-filter-strip-btn\s*\{[\s\S]*?height:\s*37\.5px/)
+  expect(syncView).toMatch(/\.folder-filter-strip-btn\s*\{[\s\S]*?height:\s*48px/)
   expect(syncView).toMatch(
-    /\.sync-filter-pattern-field \.folder-filter-pattern\s*\{[\s\S]*?height:\s*16\.5px/,
+    /\.sync-filter-pattern-field \.folder-filter-pattern\s*\{[\s\S]*?height:\s*24px/,
   )
   expect(mergeView).toMatch(/data-testid="folder-merge-filter-strip"/)
   expect(mergeView).toMatch(/data-testid="folder-merge-filter-pattern"/)
@@ -110,7 +110,7 @@ it('surfaces Filters/Peek strip at capture CSS scale', () => {
   expect(mergeView).toMatch(/data-mainbar-row2="capture-1to1-residual"/)
   expect(mergeView).toMatch(/<template #toolbar>/)
   expect(mergeView).toMatch(/\.folder-filter-chrome\s*\{[\s\S]*?min-height:\s*43\.5px/)
-  expect(mergeView).toMatch(/\.folder-filter-strip-btn\s*\{[\s\S]*?height:\s*37\.5px/)
+  expect(mergeView).toMatch(/\.folder-filter-strip-btn\s*\{[\s\S]*?height:\s*48px/)
 })
 
 describe('folder compare tree chrome density', () => {
@@ -119,7 +119,7 @@ describe('folder compare tree chrome density', () => {
     expect(css).toMatch(/\.folder-compare-view \.tree-row\s*\{[\s\S]*?min-height:\s*16px/)
     expect(css).toMatch(/\.folder-compare-view \.tree-head\s*\{[\s\S]*?font-weight:\s*400/)
     expect(css).toMatch(
-      /\.folder-compare-view \.tree-row\.selected\s*\{[\s\S]*?background:\s*#a8cdf1/,
+      /\.folder-compare-view \.tree-row\.selected\s*\{[\s\S]*?background:\s*#cce8ff/,
     )
     expect(css).toMatch(/\.folder-compare-view \.tree-head span,[\s\S]*?padding:\s*1px 6px/)
     expect(css).toMatch(/\.folder-compare-view \.tree-head span,[\s\S]*?font-size:\s*11px/)
@@ -200,7 +200,7 @@ describe('folder sync Filters/Peek placement residual', () => {
       /\.folder-sync-view \.folder-filter-chrome\[data-sync-filters-place='capture-1to1-residual'\][\s\S]*?background:\s*#f0f0f0/,
     )
     expect(css).toMatch(
-      /\.folder-filter-pattern\[data-sync-pattern-place='capture-1to1-residual'\][\s\S]*?height:\s*16\.5px/,
+      /\.folder-filter-pattern\[data-sync-pattern-place='capture-1to1-residual'\][\s\S]*?height:\s*24px/,
     )
     expect(syncView).not.toMatch(/data-mainbar-row2="capture-1to1-residual"/)
     expect(syncView).not.toMatch(/data-testid="folder-sync-filter-strip-peek"/)
diff --git a/src/styles/hexChromeDensity.test.ts b/src/styles/hexChromeDensity.test.ts
index be32194d..06766ba9 100644
--- a/src/styles/hexChromeDensity.test.ts
+++ b/src/styles/hexChromeDensity.test.ts
@@ -13,7 +13,7 @@ describe('hex compare chrome density', () => {
     expect(css).toMatch(/\.hex-compare-view\s*\{[\s\S]*?padding:\s*2px 4px/)
     expect(css).toMatch(/\.hex-compare-view \.bc-path-row\s*\{[\s\S]*?min-height:\s*18px/)
     expect(css).toMatch(/\.hex-compare-view \.bc-path-row input\s*\{[\s\S]*?height:\s*20px/)
-    expect(hexView).toMatch(/\.hex-path-field \.path-input\s*\{[\s\S]*?height:\s*16\.5px/)
+    expect(hexView).toMatch(/\.hex-path-field \.path-input\s*\{[\s\S]*?height:\s*24px/)
     expect(css).toMatch(/\.hex-compare-view \.path-side-footer\s*\{[\s\S]*?font-size:\s*11px/)
     expect(css).toMatch(/\.hex-compare-view \.path-side-footer\s*\{[\s\S]*?min-height:\s*18px/)
     expect(css).toMatch(/\.hex-compare-view \.path-side-footer\s*\{[\s\S]*?line-height:\s*16px/)
@@ -29,8 +29,8 @@ describe('hex compare chrome density', () => {
     expect(hexView).not.toMatch(/font-size:\s*9px/)
     expect(hexView).not.toMatch(/min-height:\s*9px/)
 
-    expect(layout).toMatch(/data-chrome-kind='hex-session'[\s\S]*?height:\s*19\.5px/)
-    expect(css).toMatch(/\.bc-session-toolbar\s*\{[\s\S]*?min-height:\s*39\.5px/)
+    expect(layout).toMatch(/data-chrome-kind='hex-session'[\s\S]*?height:\s*26px/)
+    expect(css).toMatch(/\.bc-session-toolbar\s*\{[\s\S]*?min-height:\s*56px/)
   })
 
   it('keeps Hex wrap/gutter/row chrome on capture band', () => {
@@ -42,7 +42,7 @@ describe('hex compare chrome density', () => {
     expect(css).toMatch(
       /\.hex-compare-view \.hex-path-meta-strip[\s\S]*?border:\s*1px solid #c0c0c0/,
     )
-    expect(css).toMatch(/\.hex-compare-view \.hex-wrap-controls input[\s\S]*?height:\s*16\.5px/)
+    expect(css).toMatch(/\.hex-compare-view \.hex-wrap-controls input[\s\S]*?height:\s*24px/)
     expect(css).toMatch(/\.hex-compare-view \.hex-row\s*\{[\s\S]*?min-height:\s*17\.5px/)
     expect(css).toMatch(/\.hex-compare-view \.hex-offset\s*\{[\s\S]*?background:\s*#ffffff/)
 
diff --git a/src/styles/homeChromeDensity.test.ts b/src/styles/homeChromeDensity.test.ts
index e6e09d54..dbe4b107 100644
--- a/src/styles/homeChromeDensity.test.ts
+++ b/src/styles/homeChromeDensity.test.ts
@@ -11,30 +11,30 @@ const workspaceManager = readFileSync(
 )
 
 describe('home chrome density', () => {
-  it('keeps Home chrome metrics aligned with home.png CSS px', () => {
-    expect(homeView).toMatch(/data-home-density="capture-1to1"/)
+  it('keeps Home chrome metrics aligned with HTML demo Home chrome', () => {
+    expect(homeView).toMatch(/data-home-density="html-demo"/)
     expect(homeView).toMatch(/data-home-chrome="minimal"/)
     expect(homeView).toMatch(
-      /\.bc-home-workspace\s*\{[\s\S]*?grid-template-columns:\s*minmax\(220px, 248px\)/,
+      /\.bc-home-workspace\s*\{[\s\S]*?grid-template-columns:\s*minmax\(240px, 260px\)/,
     )
     expect(homeView).toMatch(
-      /\.bc-session-tree\s*\{[\s\S]*?grid-template-rows:\s*28px minmax\(0, 1fr\) 32px/,
-    )
-    expect(homeView).toMatch(/\.bc-session-tree header\s*\{[\s\S]*?font-size:\s*12px/)
-    expect(homeView).toMatch(/\.bc-tree-row\s*\{[\s\S]*?min-height:\s*20px/)
-    expect(homeView).toMatch(/\.bc-tree-footer button\s*\{[\s\S]*?height:\s*28px/)
-    expect(homeView).toMatch(/\.bc-tree-footer input\s*\{[\s\S]*?height:\s*22px/)
-    expect(homeView).toMatch(/\.bc-selected-actions button\s*\{[\s\S]*?width:\s*95.5px/)
-    expect(homeView).toMatch(/\.bc-selected-actions button\s*\{[\s\S]*?height:\s*30px/)
+      /\.bc-session-tree\s*\{[\s\S]*?grid-template-rows:\s*auto minmax\(0, 1fr\) auto/,
+    )
+    expect(homeView).toMatch(/\.bc-session-tree header\s*\{[\s\S]*?font-size:\s*13px/)
+    expect(homeView).toMatch(/\.bc-tree-row\s*\{[\s\S]*?min-height:\s*22px/)
+    expect(homeView).toMatch(/\.bc-tree-footer button\s*\{[\s\S]*?height:\s*24px/)
+    expect(homeView).toMatch(/\.bc-tree-footer input\s*\{[\s\S]*?height:\s*24px/)
+    expect(homeView).toMatch(/\.bc-selected-actions button\s*\{[\s\S]*?min-width:\s*80px/)
+    expect(homeView).toMatch(/\.bc-selected-actions button\s*\{[\s\S]*?height:\s*28px/)
     expect(homeView).toMatch(
-      /\.new-session-grid\s*\{[\s\S]*?grid-template-columns:\s*repeat\(3, minmax\(140px, 157px\)\)/,
+      /\.new-session-grid\s*\{[\s\S]*?grid-template-columns:\s*repeat\(3, minmax\(180px, 220px\)\)/,
     )
-    expect(homeView).toMatch(/\.session-card-icon\s*\{[\s\S]*?width:\s*48px/)
+    expect(homeView).toMatch(/\.session-card-icon\s*\{[\s\S]*?width:\s*56px/)
     expect(homeView).toMatch(
-      /\.new-session-card\[data-card-band='tall'\]\s*\{[\s\S]*?min-height:\s*131px/,
+      /\.new-session-card\[data-card-band='tall'\]\s*\{[\s\S]*?min-height:\s*110px/,
     )
-    expect(homeView).toMatch(/\.new-session-card\s*\{[\s\S]*?border-radius:\s*0/)
-    expect(homeView).toMatch(/:size="48"/)
+    expect(homeView).toMatch(/\.new-session-card\s*\{[\s\S]*?border-radius:\s*6px/)
+    expect(homeView).toMatch(/:size="52"/)
     expect(homeView).not.toMatch(/min-height:\s*7px/)
     expect(homeView).not.toMatch(/height:\s*6px/)
     expect(homeView).not.toMatch(/height:\s*7px/)
@@ -75,19 +75,19 @@ describe('home chrome density', () => {
 })
 
 describe('home launch card band residual', () => {
-  it('keeps Home New tree / launch cards / instruction metrics on capture bands', () => {
+  it('keeps Home New tree / launch cards / instruction metrics on demo card bands', () => {
     expect(homeView).toMatch(/data-card-band/)
     expect(homeView).toMatch(/homeCardBand/)
     expect(homeView).toMatch(
-      /\.new-session-card\[data-card-band='tall'\]\s*\{[\s\S]*?min-height:\s*131px/,
+      /\.new-session-card\[data-card-band='tall'\]\s*\{[\s\S]*?min-height:\s*110px/,
     )
     expect(homeView).toMatch(
-      /\.new-session-card\[data-card-band='short'\]\s*\{[\s\S]*?min-height:\s*91\.5px/,
+      /\.new-session-card\[data-card-band='short'\]\s*\{[\s\S]*?min-height:\s*110px/,
     )
-    expect(homeView).toMatch(/\.new-session-card\s*\{[\s\S]*?min-height:\s*91\.5px/)
+    expect(homeView).toMatch(/\.new-session-card\s*\{[\s\S]*?min-height:\s*110px/)
     expect(homeView).toMatch(/\.bc-home-instructions\s*\{[\s\S]*?min-height:\s*20px/)
     expect(homeView).toMatch(/\.bc-home-instructions\s*\{[\s\S]*?font-size:\s*12px/)
-    expect(homeView).toMatch(/\.bc-tree-footer button\s*\{[\s\S]*?height:\s*28px/)
+    expect(homeView).toMatch(/\.bc-tree-footer button\s*\{[\s\S]*?height:\s*24px/)
     expect(homeView).not.toMatch(/min-height:\s*6px/)
   })
 })
@@ -100,20 +100,20 @@ describe('home main fill', () => {
 })
 
 describe('home tree fill', () => {
-  it('matches capture home session-tree fill #e3e7ed', () => {
-    expect(homeView).toMatch(/\.bc-session-tree\s*\{[\s\S]*?background:\s*#e3e7ed/)
+  it('matches demo session-tree fill #f5f5f5', () => {
+    expect(homeView).toMatch(/\.bc-session-tree\s*\{[\s\S]*?background:\s*#f5f5f5/)
   })
 })
 
 describe('home session-tree header fill', () => {
-  it('matches capture session-tree header fill #ededed', () => {
-    expect(homeView).toMatch(/\.bc-session-tree header\s*\{[\s\S]*?background:\s*#ededed/)
+  it('matches demo session-tree header fill #f5f5f5', () => {
+    expect(homeView).toMatch(/\.bc-session-tree header\s*\{[\s\S]*?background:\s*#f5f5f5/)
   })
 })
 
 describe('home session-tree footer fill', () => {
-  it('matches capture session-tree footer fill #fdfdfd', () => {
-    expect(homeView).toMatch(/\.bc-tree-footer\s*\{[\s\S]*?background:\s*#fdfdfd/)
+  it('matches demo session-tree footer fill #f5f5f5', () => {
+    expect(homeView).toMatch(/\.bc-tree-footer\s*\{[\s\S]*?background:\s*#f5f5f5/)
   })
 })
 
@@ -135,16 +135,16 @@ describe('home launch cream', () => {
 })
 
 describe('home launch card band height lock', () => {
-  it('locks Home launch card bands to capture heights without inherited line-box stretch', () => {
-    expect(homeView).toMatch(/\.new-session-card\s*\{[\s\S]*?height:\s*91\.5px/)
+  it('locks Home launch card bands to demo card heights without inherited line-box stretch', () => {
+    expect(homeView).toMatch(/\.new-session-card\s*\{[\s\S]*?height:\s*110px/)
     expect(homeView).toMatch(/\.new-session-card\s*\{[\s\S]*?line-height:\s*1/)
-    expect(homeView).toMatch(/\.new-session-card\s*\{[\s\S]*?font-size:\s*12px/)
+    expect(homeView).toMatch(/\.new-session-card\s*\{[\s\S]*?font-size:\s*13px/)
     expect(homeView).toMatch(/\.new-session-card\s*\{[\s\S]*?align-self:\s*start/)
     expect(homeView).toMatch(
-      /\.new-session-card\[data-card-band='tall'\]\s*\{[\s\S]*?height:\s*131px/,
+      /\.new-session-card\[data-card-band='tall'\]\s*\{[\s\S]*?height:\s*110px/,
     )
     expect(homeView).toMatch(
-      /\.new-session-card\[data-card-band='short'\]\s*\{[\s\S]*?height:\s*91\.5px/,
+      /\.new-session-card\[data-card-band='short'\]\s*\{[\s\S]*?height:\s*110px/,
     )
   })
 })
diff --git a/src/styles/mediaChromeDensity.test.ts b/src/styles/mediaChromeDensity.test.ts
index efb8dd35..13cee9e6 100644
--- a/src/styles/mediaChromeDensity.test.ts
+++ b/src/styles/mediaChromeDensity.test.ts
@@ -12,10 +12,8 @@ describe('media compare chrome density', () => {
   it('keeps Media Compare path/status/toolbar/footer chrome at capture CSS scale', () => {
     expect(css).toMatch(/\.media-compare-view\s*\{[\s\S]*?padding:\s*2px 4px/)
     expect(css).toMatch(/\.media-compare-view \.media-path-panel\s*\{[\s\S]*?min-height:\s*22px/)
-    expect(mediaView).toMatch(/\.media-path-field \.path-input\s*\{[\s\S]*?height:\s*16\.5px/)
-    expect(css).toMatch(
-      /\.media-compare-view \.media-path-panel input\s*\{[\s\S]*?height:\s*16\.5px/,
-    )
+    expect(mediaView).toMatch(/\.media-path-field \.path-input\s*\{[\s\S]*?height:\s*24px/)
+    expect(css).toMatch(/\.media-compare-view \.media-path-panel input\s*\{[\s\S]*?height:\s*24px/)
     expect(css).toMatch(/\.media-compare-view \.media-path-panel button\s*\{[\s\S]*?height:\s*20px/)
     expect(css).toMatch(/\.media-compare-view \.path-side-footer\s*\{[\s\S]*?font-size:\s*11px/)
     expect(css).toMatch(/\.media-compare-view \.path-side-footer\s*\{[\s\S]*?min-height:\s*18px/)
@@ -34,8 +32,8 @@ describe('media compare chrome density', () => {
     expect(mediaView).not.toMatch(/font-size:\s*9px/)
     expect(mediaView).not.toMatch(/min-height:\s*9px/)
 
-    expect(layout).toMatch(/data-chrome-kind='media-session'[\s\S]*?height:\s*19\.5px/)
-    expect(css).toMatch(/\.bc-session-toolbar\s*\{[\s\S]*?min-height:\s*39\.5px/)
+    expect(layout).toMatch(/data-chrome-kind='media-session'[\s\S]*?height:\s*26px/)
+    expect(css).toMatch(/\.bc-session-toolbar\s*\{[\s\S]*?min-height:\s*56px/)
   })
 
   it('keeps Media scrub/footer chrome on capture band', () => {
@@ -103,9 +101,7 @@ describe('media path scrub chrome residual', () => {
     expect(css).toMatch(
       /\.media-compare-view \.media-path-meta-strip[\s\S]*?border:\s*1px solid #c0c0c0/,
     )
-    expect(css).toMatch(
-      /\.media-compare-view \.media-path-panel input\s*\{[\s\S]*?height:\s*16\.5px/,
-    )
+    expect(css).toMatch(/\.media-compare-view \.media-path-panel input\s*\{[\s\S]*?height:\s*24px/)
     expect(mediaView).toMatch(/\.media-player-card > span\s*\{[\s\S]*?display:\s*none/)
     expect(mediaView).toMatch(/\.media-playback-header\s*\{[\s\S]*?display:\s*none/)
     expect(mediaView).toMatch(/\.media-playback-hint\s*\{[\s\S]*?display:\s*none/)
diff --git a/src/styles/pathStatusDensity.test.ts b/src/styles/pathStatusDensity.test.ts
index 29775a4f..5c3a64a5 100644
--- a/src/styles/pathStatusDensity.test.ts
+++ b/src/styles/pathStatusDensity.test.ts
@@ -79,15 +79,11 @@ describe('path/status strip density', () => {
     expect(css).toMatch(/\.bc-path-footers \.path-meta-chip[\s\S]*?height:\s*16px/)
   })
 
-  it('keeps shared status strip near capture ~19.5px CSS height', () => {
+  it('keeps shared status strip near capture ~26px CSS height', () => {
+    expect(layout).toMatch(/\.status-bar\[data-chrome-kind='folder-pair'\][\s\S]*?height:\s*26px/)
+    expect(layout).toMatch(/\.status-bar\[data-chrome-kind='text-session'\][\s\S]*?height:\s*26px/)
     expect(layout).toMatch(
-      /\.status-bar\[data-chrome-kind='folder-pair'\][\s\S]*?height:\s*19\.5px/,
-    )
-    expect(layout).toMatch(
-      /\.status-bar\[data-chrome-kind='text-session'\][\s\S]*?height:\s*19\.5px/,
-    )
-    expect(layout).toMatch(
-      /\.app-shell-dense-chrome:has\(\.status-bar\[data-chrome-kind='folder-pair'\]\)[\s\S]*?grid-template-rows:\s*23\.5px minmax\(0, 1fr\) 19\.5px/,
+      /\.app-shell-dense-chrome:has\(\.status-bar\[data-chrome-kind='folder-pair'\]\)[\s\S]*?grid-template-rows:\s*23\.5px minmax\(0, 1fr\) 26px/,
     )
   })
 
diff --git a/src/styles/peekOptionsDensity.test.ts b/src/styles/peekOptionsDensity.test.ts
index 4c67ed87..fa295934 100644
--- a/src/styles/peekOptionsDensity.test.ts
+++ b/src/styles/peekOptionsDensity.test.ts
@@ -30,7 +30,7 @@ describe('peek panel densify', () => {
     expect(css).toMatch(/\.folder-peek-panel header,[\s\S]*?min-height:\s*20px/)
     expect(css).toMatch(/\.peek-tabs\s*\{[\s\S]*?min-height:\s*20px/)
     expect(css).toMatch(/\.folder-peek-panel dt,[\s\S]*?font-size:\s*11px/)
-    expect(css).toMatch(/\.folder-filter-strip-btn\s*\{[\s\S]*?grid-template-rows:\s*20px auto/)
+    expect(css).toMatch(/\.folder-filter-strip-btn\s*\{[\s\S]*?grid-template-rows:\s*22px auto/)
 
     expect(folderView).toMatch(/data-testid="folder-peek-tabs"/)
     expect(folderView).toMatch(/data-testid="folder-peek-dual"/)
@@ -43,7 +43,7 @@ describe('peek panel densify', () => {
     expect(folderView).toMatch(/\.folder-peek-panel header\s*\{[\s\S]*?min-height:\s*20px/)
     expect(folderView).toMatch(/\.peek-dual-columns\s*\{[\s\S]*?gap:\s*0/)
     expect(folderView).toMatch(
-      /\.folder-filter-strip-btn\s*\{[\s\S]*?grid-template-rows:\s*20px auto/,
+      /\.folder-filter-strip-btn\s*\{[\s\S]*?grid-template-rows:\s*22px auto/,
     )
 
     expect(syncView).toMatch(/data-testid="folder-sync-peek-tabs"/)
@@ -183,8 +183,8 @@ describe('folder merge Same OK / Peek residual', () => {
   it('scales Same OK and Peek action chrome toward capture toolbar plates', () => {
     expect(mergeView).toMatch(/data-same-ok-chrome="capture-1to1-residual"/)
     expect(mergeView).toMatch(/data-peek-residual="capture-1to1"/)
-    expect(mergeView).toMatch(/folder-merge-same-ok[\s\S]*?height:\s*37\.5px/)
-    expect(css).toMatch(/folder-merge-same-ok[\s\S]*?height:\s*37\.5px/)
+    expect(mergeView).toMatch(/folder-merge-same-ok[\s\S]*?height:\s*48px/)
+    expect(css).toMatch(/folder-merge-same-ok[\s\S]*?height:\s*48px/)
     expect(css).toMatch(/\.folder-merge-peek-panel[\s\S]*?border:\s*1px solid #a0a0a0/)
   })
 })
diff --git a/src/styles/pictureChromeDensity.test.ts b/src/styles/pictureChromeDensity.test.ts
index a267af67..45aefbd1 100644
--- a/src/styles/pictureChromeDensity.test.ts
+++ b/src/styles/pictureChromeDensity.test.ts
@@ -11,12 +11,12 @@ const layout = readFileSync(resolve(root, 'src/layouts/AppLayout.vue'), 'utf8')
 describe('picture compare chrome density', () => {
   it('keeps Picture Compare path/status/toolbar/footer chrome at capture CSS scale', () => {
     expect(css).toMatch(/\.picture-compare-view\s*\{[\s\S]*?padding:\s*2px 4px/)
-    expect(pictureView).toMatch(/\.picture-path-panel input\s*\{[\s\S]*?height:\s*16\.5px/)
+    expect(pictureView).toMatch(/\.picture-path-panel input\s*\{[\s\S]*?height:\s*24px/)
     expect(css).toMatch(
-      /\.picture-compare-view \.picture-path-panel\s*\{[\s\S]*?min-height:\s*19\.5px/,
+      /\.picture-compare-view \.picture-path-panel\s*\{[\s\S]*?min-height:\s*26px/,
     )
     expect(css).toMatch(
-      /\.picture-compare-view \.picture-path-panel input\s*\{[\s\S]*?height:\s*16\.5px/,
+      /\.picture-compare-view \.picture-path-panel input\s*\{[\s\S]*?height:\s*24px/,
     )
     expect(css).toMatch(
       /\.picture-compare-view \.picture-path-panel button\s*\{[\s\S]*?height:\s*20px/,
@@ -29,13 +29,13 @@ describe('picture compare chrome density', () => {
     expect(pictureView).toMatch(/\.path-side-footer\s*\{[\s\S]*?min-height:\s*18px/)
     expect(pictureView).toMatch(/SessionPathActions/)
     expect(pictureView).toMatch(/PathMetaFooter/)
-    expect(pictureView).toMatch(/\.picture-path-panel input\s*\{[\s\S]*?height:\s*16\.5px/)
+    expect(pictureView).toMatch(/\.picture-path-panel input\s*\{[\s\S]*?height:\s*24px/)
     expect(pictureView).toMatch(/chromeKind:\s*'picture-session'/)
     expect(pictureView).not.toMatch(/font-size:\s*9px/)
     expect(pictureView).not.toMatch(/min-height:\s*9px/)
 
-    expect(layout).toMatch(/data-chrome-kind='picture-session'[\s\S]*?height:\s*19\.5px/)
-    expect(css).toMatch(/\.bc-session-toolbar\s*\{[\s\S]*?min-height:\s*39\.5px/)
+    expect(layout).toMatch(/data-chrome-kind='picture-session'[\s\S]*?height:\s*26px/)
+    expect(css).toMatch(/\.bc-session-toolbar\s*\{[\s\S]*?min-height:\s*56px/)
   })
 
   it('keeps Picture Meta/Blend/Tol chrome on capture band', () => {
diff --git a/src/styles/registryChromeDensity.test.ts b/src/styles/registryChromeDensity.test.ts
index 47f283b2..d4bacaa0 100644
--- a/src/styles/registryChromeDensity.test.ts
+++ b/src/styles/registryChromeDensity.test.ts
@@ -11,7 +11,7 @@ const layout = readFileSync(resolve(root, 'src/layouts/AppLayout.vue'), 'utf8')
 describe('registry compare chrome density', () => {
   it('keeps Registry Compare path/status/toolbar/footer chrome at capture CSS scale', () => {
     expect(css).toMatch(/\.registry-compare-view\s*\{[\s\S]*?padding:\s*2px 4px/)
-    expect(registryView).toMatch(/\.path-field-row \.path-input\s*\{[\s\S]*?height:\s*16\.5px/)
+    expect(registryView).toMatch(/\.path-field-row \.path-input\s*\{[\s\S]*?height:\s*24px/)
     expect(css).toMatch(
       /\.registry-compare-view \.registry-input-panel\s*\{[\s\S]*?min-height:\s*22px/,
     )
@@ -37,8 +37,8 @@ describe('registry compare chrome density', () => {
     expect(registryView).not.toMatch(/font-size:\s*9px/)
     expect(registryView).not.toMatch(/min-height:\s*9px/)
 
-    expect(layout).toMatch(/data-chrome-kind='registry-session'[\s\S]*?height:\s*19\.5px/)
-    expect(css).toMatch(/\.bc-session-toolbar\s*\{[\s\S]*?min-height:\s*39\.5px/)
+    expect(layout).toMatch(/data-chrome-kind='registry-session'[\s\S]*?height:\s*26px/)
+    expect(css).toMatch(/\.bc-session-toolbar\s*\{[\s\S]*?min-height:\s*56px/)
   })
 
   it('keeps Registry summary/pane/row chrome on capture band', () => {
diff --git a/src/styles/sessionToolbarIcons.test.ts b/src/styles/sessionToolbarIcons.test.ts
index 5376e414..f1ba6b1d 100644
--- a/src/styles/sessionToolbarIcons.test.ts
+++ b/src/styles/sessionToolbarIcons.test.ts
@@ -24,8 +24,8 @@ describe('session toolbar icon presentation', () => {
     expect(css).toContain("data-plate='sessions'")
     expect(css).toContain("data-plate='capture'")
     expect(css).toContain('color: #2a3038')
-    expect(css).toContain('min-height: 39.5px')
-    expect(css).toContain('height: 37.5px')
+    expect(css).toContain('min-height: 56px')
+    expect(css).toContain('height: 48px')
     expect(css).toContain('width: 22px')
     expect(css).toContain("data-has-icon='true'")
     expect(icons).toContain('sessionToolbarPlates')
diff --git a/src/styles/shellChromeDensity.test.ts b/src/styles/shellChromeDensity.test.ts
index 2ae1f7b5..682c6c02 100644
--- a/src/styles/shellChromeDensity.test.ts
+++ b/src/styles/shellChromeDensity.test.ts
@@ -17,7 +17,7 @@ describe('shell chrome density', () => {
     )
     expect(source).toMatch(/\.app-shell-dense-chrome \.brand\s*\{[\s\S]*?display:\s*none/)
     expect(source).toMatch(
-      /\.app-shell-dense-chrome:has\(\.status-bar\[data-chrome-kind='folder-pair'\]\)[\s\S]*?grid-template-rows:\s*23\.5px minmax\(0, 1fr\) 19\.5px/,
+      /\.app-shell-dense-chrome:has\(\.status-bar\[data-chrome-kind='folder-pair'\]\)[\s\S]*?grid-template-rows:\s*23\.5px minmax\(0, 1fr\) 26px/,
     )
   })
 
@@ -29,14 +29,14 @@ describe('shell chrome density', () => {
     expect(source).toMatch(/\.tab-chip button\s*\{[\s\S]*?height:\s*22px/)
     expect(source).toMatch(/\.tab-chip button\s*\{[\s\S]*?font-size:\s*11px/)
     expect(source).toMatch(/data-menu-density="capture-1to1"/)
-    expect(source).toMatch(/\.menu-bar\s*\{[\s\S]*?background:\s*#f0f0f0/)
+    expect(source).toMatch(/\.menu-bar\s*\{[\s\S]*?background:\s*#f0f3f9/)
     expect(source).toMatch(/\.menu-panel\s*\{[\s\S]*?border-radius:\s*0/)
     expect(source).toMatch(/\.menu-panel \.menu-command\s*\{[\s\S]*?min-height:\s*22px/)
     expect(source).toMatch(/\.menu-panel \.menu-command\s*\{[\s\S]*?font-size:\s*12px/)
-    expect(source).toMatch(/\.menus\s*\{[\s\S]*?border-top:\s*1px solid #d0d0d0/)
+    expect(source).toMatch(/\.menus\s*\{[\s\S]*?border-top:\s*1px solid #dcdcdc/)
     expect(source).toMatch(/\.tab-context-menu\s*\{[\s\S]*?border-radius:\s*0/)
     expect(source).toMatch(/\.dirty-tab-prompt\s*\{[\s\S]*?min-height:\s*22px/)
-    expect(source).toMatch(/\.menu-bar\s*\{[\s\S]*?border-bottom:\s*1px solid #a0a0a0/)
+    expect(source).toMatch(/\.menu-bar\s*\{[\s\S]*?border-bottom:\s*1px solid #dcdcdc/)
     expect(source).toMatch(/\.language-panel\s*\{[\s\S]*?border-radius:\s*0/)
     expect(source).toMatch(/\.language-option\s*\{[\s\S]*?min-height:\s*20px/)
     expect(source).toMatch(/\.command-palette\s*\{[\s\S]*?border-radius:\s*0/)
@@ -59,11 +59,11 @@ describe('shell chrome density', () => {
 
   it('keeps WorkbenchShell session toolbar/content frame denser', () => {
     expect(mainCss).toMatch(
-      /\.workbench-shell-single-session \.bc-session-toolbar\s*\{[\s\S]*?min-height:\s*39\.5px/,
+      /\.workbench-shell-single-session \.bc-session-toolbar\s*\{[\s\S]*?min-height:\s*56px/,
     )
     expect(mainCss).toMatch(/\.workbench-titlebar\s*\{[\s\S]*?height:\s*22px/)
-    expect(mainCss).toMatch(/\.bc-session-toolbar\s*\{[\s\S]*?min-height:\s*39\.5px/)
-    expect(mainCss).toMatch(/\.bc-session-toolbar\s*\{[\s\S]*?border-bottom:\s*1px solid #a0a0a0/)
+    expect(mainCss).toMatch(/\.bc-session-toolbar\s*\{[\s\S]*?min-height:\s*56px/)
+    expect(mainCss).toMatch(/\.bc-session-toolbar\s*\{[\s\S]*?border-bottom:\s*1px solid #c8c8c8/)
     expect(mainCss).toMatch(/\.workbench-inspector-stack\s*\{[\s\S]*?padding:\s*2px 4px/)
     expect(mainCss).toMatch(/\.workbench-inspector-section\s*\{[\s\S]*?border-radius:\s*0/)
     expect(mainCss).toMatch(/\.workbench-inspector-section h2\s*\{[\s\S]*?height:\s*16px/)
@@ -106,14 +106,14 @@ describe('shell chrome density', () => {
       /data-menu-chrome='capture-1to1-residual'\] \.menus > \.menu-group > button\s*\{[\s\S]*?height:\s*21\.5px/,
     )
     expect(source).toMatch(
-      /menus > \.menu-group > button\.active\s*\{[\s\S]*?background:\s*#c8e4ff/,
+      /menus > \.menu-group > button\.active\s*\{[\s\S]*?background:\s*#cce8ff/,
     )
   })
 
   it('keeps tab strip and sole-session frame residual capture chrome', () => {
     expect(source).toMatch(/data-tab-strip-density="capture-1to1-residual"/)
     expect(source).toMatch(
-      /\.tab-strip\[data-tab-strip-density='capture-1to1-residual'\]\s*\{[\s\S]*?background:\s*#f0f0f0/,
+      /\.tab-strip\[data-tab-strip-density='capture-1to1-residual'\]\s*\{[\s\S]*?background:\s*#f0f3f9/,
     )
     expect(mainCss).toMatch(
       /\.workbench-shell-single-session \.bc-session-toolbar\s*\{[\s\S]*?background:\s*#f0f0f0/,
@@ -206,8 +206,8 @@ describe('pane-header fill', () => {
 describe('app-border token', () => {
   const mainCss = readFileSync(resolve(__dirname, './main.css'), 'utf8')
 
-  it('matches capture border token #c0c0c0', () => {
-    expect(mainCss).toMatch(/--app-border:\s*#c0c0c0/)
+  it('matches demo border token #c8c8c8', () => {
+    expect(mainCss).toMatch(/--app-border:\s*#c8c8c8/)
   })
 })
 
diff --git a/src/styles/statusStripPixelDensity.test.ts b/src/styles/statusStripPixelDensity.test.ts
index a686baca..3c7bfc1b 100644
--- a/src/styles/statusStripPixelDensity.test.ts
+++ b/src/styles/statusStripPixelDensity.test.ts
@@ -8,11 +8,9 @@ const layout = readFileSync(resolve(root, 'src/layouts/AppLayout.vue'), 'utf8')
 
 describe('status strip pixel density', () => {
   it('keeps folder-pair 7-segment strip at 20px with capture-like separators', () => {
+    expect(layout).toMatch(/\.status-bar\[data-chrome-kind='folder-pair'\][\s\S]*?height:\s*26px/)
     expect(layout).toMatch(
-      /\.status-bar\[data-chrome-kind='folder-pair'\][\s\S]*?height:\s*19\.5px/,
-    )
-    expect(layout).toMatch(
-      /\.status-bar\[data-chrome-kind='folder-pair'\][\s\S]*?line-height:\s*18px/,
+      /\.status-bar\[data-chrome-kind='folder-pair'\][\s\S]*?line-height:\s*24px/,
     )
     expect(layout).toMatch(
       /\.status-bar\[data-chrome-kind='folder-pair'\] \.status-bar-pane\s*\{[\s\S]*?padding:\s*0 4px/,
@@ -38,13 +36,11 @@ describe('status strip pixel density', () => {
     expect(layout).toMatch(/data-chrome-kind='folder-pair'\]\[data-pane-count='7'\]/)
   })
 
-  it('keeps session status bars at 19.5px with shared typography', () => {
-    expect(layout).toMatch(/\.status-bar\s*\{[\s\S]*?background:\s*#f0f0f0/)
-    expect(layout).toMatch(/\.status-bar\s*\{[\s\S]*?color:\s*#000000/)
+  it('keeps session status bars at 26px with shared typography', () => {
+    expect(layout).toMatch(/\.status-bar\s*\{[\s\S]*?background:\s*#d4d4d4/)
+    expect(layout).toMatch(/\.status-bar\s*\{[\s\S]*?color:\s*#1a1a1a/)
     expect(layout).toMatch(/\.status-bar\s*\{[\s\S]*?font-size:\s*11px/)
-    expect(layout).toMatch(
-      /\.status-bar\[data-chrome-kind='text-session'\][\s\S]*?height:\s*19\.5px/,
-    )
+    expect(layout).toMatch(/\.status-bar\[data-chrome-kind='text-session'\][\s\S]*?height:\s*26px/)
     expect(layout).toMatch(
       /\.status-bar\[data-chrome-kind='text-session'\]\s*\{[\s\S]*?grid-template-columns:\s*294px minmax\(0, 392\.5px\) 91\.5px minmax\(0, 1fr\)/,
     )
@@ -52,19 +48,17 @@ describe('status strip pixel density', () => {
       /\.status-bar\[data-chrome-kind='text-session'\] \.status-bar-pane[\s\S]*?padding:\s*0 4px/,
     )
     expect(layout).toMatch(
-      /\.app-shell-dense-chrome:has\(\.status-bar\[data-chrome-kind='folder-pair'\]\)[\s\S]*?19\.5px/,
+      /\.app-shell-dense-chrome:has\(\.status-bar\[data-chrome-kind='folder-pair'\]\)[\s\S]*?26px/,
     )
     expect(layout).toMatch(
-      /\.app-shell-dense-chrome:has\(\.status-bar\[data-chrome-kind\$='-session'\]\)[\s\S]*?19\.5px/,
+      /\.app-shell-dense-chrome:has\(\.status-bar\[data-chrome-kind\$='-session'\]\)[\s\S]*?26px/,
     )
   })
 
   it('keeps folder-merge 12-segment strip at capture height with column dividers', () => {
+    expect(layout).toMatch(/\.status-bar\[data-chrome-kind='folder-merge'\][\s\S]*?height:\s*26px/)
     expect(layout).toMatch(
-      /\.status-bar\[data-chrome-kind='folder-merge'\][\s\S]*?height:\s*19\.5px/,
-    )
-    expect(layout).toMatch(
-      /\.status-bar\[data-chrome-kind='folder-merge'\][\s\S]*?line-height:\s*18px/,
+      /\.status-bar\[data-chrome-kind='folder-merge'\][\s\S]*?line-height:\s*24px/,
     )
     expect(layout).toMatch(
       /\.status-bar\[data-chrome-kind='folder-merge'\] \.status-bar-pane\s*\{[\s\S]*?padding:\s*0 4px/,
@@ -82,10 +76,10 @@ describe('status strip pixel density', () => {
 })
 
 describe('status strip band residual', () => {
-  it('keeps 19.5px band content chrome residual toward capture', () => {
+  it('keeps 26px band content chrome residual toward capture', () => {
     expect(layout).toMatch(/data-status-band="capture-1to1-residual"/)
-    expect(layout).toMatch(/\.status-bar\s*\{[\s\S]*?border-top:\s*1px solid #a0a0a0/)
-    expect(layout).toMatch(/\.status-bar\s*\{[\s\S]*?height:\s*19\.5px/)
+    expect(layout).toMatch(/\.status-bar\s*\{[\s\S]*?border-top:\s*1px solid #b8b8b8/)
+    expect(layout).toMatch(/\.status-bar\s*\{[\s\S]*?height:\s*26px/)
     expect(layout).toMatch(
       /\.status-bar\[data-status-band='capture-1to1-residual'\] \.status-bar-pane\s*\{[\s\S]*?text-overflow:\s*ellipsis/,
     )
@@ -163,7 +157,7 @@ describe('clipboard status strip columns residual', () => {
 describe('app-status fill', () => {
   const css = readFileSync(resolve(root, 'src/styles/main.css'), 'utf8')
 
-  it('matches capture status token fill #f0f0f0', () => {
-    expect(css).toMatch(/--app-status:\s*#f0f0f0/)
+  it('matches demo status token fill #d4d4d4', () => {
+    expect(css).toMatch(/--app-status:\s*#d4d4d4/)
   })
 })
diff --git a/src/styles/syncMergeChromeDensity.test.ts b/src/styles/syncMergeChromeDensity.test.ts
index c224fb35..d81a18dd 100644
--- a/src/styles/syncMergeChromeDensity.test.ts
+++ b/src/styles/syncMergeChromeDensity.test.ts
@@ -18,9 +18,9 @@ describe('folder sync/merge chrome density', () => {
     )
     expect(css).toMatch(/\.folder-merge-view \.merge-paths\s*\{[\s\S]*?padding:\s*2px 4px/)
     expect(css).toMatch(/\.folder-merge-view \.merge-to-chrome\s*\{[\s\S]*?min-height:\s*22px/)
-    expect(mergeView).toMatch(/\.merge-to-path input\s*\{[\s\S]*?height:\s*16\.5px/)
-    expect(mergeView).toMatch(/\.merge-paths input\s*\{[\s\S]*?height:\s*16\.5px/)
-    expect(css).toMatch(/\.folder-merge-view \.merge-paths input\s*\{[\s\S]*?height:\s*16\.5px/)
+    expect(mergeView).toMatch(/\.merge-to-path input\s*\{[\s\S]*?height:\s*24px/)
+    expect(mergeView).toMatch(/\.merge-paths input\s*\{[\s\S]*?height:\s*24px/)
+    expect(css).toMatch(/\.folder-merge-view \.merge-paths input\s*\{[\s\S]*?height:\s*24px/)
     expect(css).toMatch(
       /\.folder-merge-view \.merge-actions \.n-button\[data-testid='folder-merge-execute-plan'\][\s\S]*?height:\s*36px/,
     )
@@ -29,7 +29,7 @@ describe('folder sync/merge chrome density', () => {
     expect(css).toMatch(/\.folder-merge-view \.merge-actions \.n-button[\s\S]*?height:\s*30px/)
 
     expect(syncView).toMatch(/\.sync-settings\s*\{[\s\S]*?padding:\s*2px 4px/)
-    expect(syncView).toMatch(/\.path-field-row \.path-input\s*\{[\s\S]*?height:\s*16\.5px/)
+    expect(syncView).toMatch(/\.path-field-row \.path-input\s*\{[\s\S]*?height:\s*24px/)
     expect(syncView).toMatch(/\.sync-settings\s*\{[\s\S]*?min-height:\s*22px/)
     expect(syncView).toMatch(/grid-template-columns:[\s\S]*?326\.5px/)
     expect(syncView).toMatch(/\.sync-settings input,[\s\S]*?height:\s*20px/)
@@ -63,12 +63,8 @@ describe('folder sync/merge chrome density', () => {
     expect(mergeView).toMatch(/centerFreeSpace:/)
     expect(mergeView).toMatch(/refreshMergeFreeSpace/)
 
-    expect(layout).toMatch(
-      /\.status-bar\[data-chrome-kind='folder-pair'\][\s\S]*?height:\s*19\.5px/,
-    )
-    expect(layout).toMatch(
-      /\.status-bar\[data-chrome-kind='folder-merge'\][\s\S]*?height:\s*19\.5px/,
-    )
+    expect(layout).toMatch(/\.status-bar\[data-chrome-kind='folder-pair'\][\s\S]*?height:\s*26px/)
+    expect(layout).toMatch(/\.status-bar\[data-chrome-kind='folder-merge'\][\s\S]*?height:\s*26px/)
     expect(layout).toMatch(
       /\.status-bar\[data-chrome-kind='folder-merge'\]\[data-pane-count='12'\]/,
     )
@@ -121,7 +117,7 @@ describe('folder sync tree and session log chrome density', () => {
     expect(syncView).toMatch(/data-log-density="capture-1to1"/)
     expect(syncView).toMatch(/\.sync-preview-row\s*\{[\s\S]*?min-height:\s*20px/)
     expect(syncView).toMatch(/\.sync-preview-head\s*\{[\s\S]*?font-weight:\s*400/)
-    expect(syncView).toMatch(/\.sync-row-selected\s*\{[\s\S]*?background:\s*#a8cdf1/)
+    expect(syncView).toMatch(/\.sync-row-selected\s*\{[\s\S]*?background:\s*#cce8ff/)
     expect(syncView).toMatch(/\.folder-session-log\s*\{[\s\S]*?height:\s*98px/)
     expect(syncView).toMatch(/\.folder-session-log-body\s*\{[\s\S]*?font-size:\s*11px/)
     expect(syncView).toMatch(/\.folder-session-log-body\s*\{[\s\S]*?line-height:\s*14px/)
@@ -142,7 +138,7 @@ describe('folder merge tree and session log chrome density', () => {
     expect(mergeView).toMatch(/data-log-density="capture-1to1"/)
     expect(mergeView).toMatch(/\.merge-plan-row\s*\{[\s\S]*?min-height:\s*20px/)
     expect(mergeView).toMatch(/\.merge-plan-head\s*\{[\s\S]*?font-weight:\s*400/)
-    expect(mergeView).toMatch(/\.merge-plan-row\.selected\s*\{[\s\S]*?background:\s*#a8cdf1/)
+    expect(mergeView).toMatch(/\.merge-plan-row\.selected\s*\{[\s\S]*?background:\s*#cce8ff/)
     expect(mergeView).toMatch(/\.folder-session-log\s*\{[\s\S]*?height:\s*98px/)
     expect(mergeView).toMatch(/\.folder-session-log-body\s*\{[\s\S]*?font-size:\s*11px/)
     expect(css).toMatch(/\.folder-merge-view \.merge-plan-row\s*\{[\s\S]*?min-height:\s*20px/)
diff --git a/src/styles/tableChromeDensity.test.ts b/src/styles/tableChromeDensity.test.ts
index 8a026851..b6b53a87 100644
--- a/src/styles/tableChromeDensity.test.ts
+++ b/src/styles/tableChromeDensity.test.ts
@@ -11,7 +11,7 @@ const layout = readFileSync(resolve(root, 'src/layouts/AppLayout.vue'), 'utf8')
 describe('table compare chrome density', () => {
   it('keeps Table Compare path/status/controls chrome at capture CSS scale', () => {
     expect(css).toMatch(/\.table-compare-view\s*\{[\s\S]*?padding:\s*2px 4px/)
-    expect(tableView).toMatch(/\.path-field-row \.path-input\s*\{[\s\S]*?height:\s*16\.5px/)
+    expect(tableView).toMatch(/\.path-field-row \.path-input\s*\{[\s\S]*?height:\s*24px/)
     expect(css).toMatch(/\.table-compare-view \.table-source-controls[\s\S]*?min-height:\s*20px/)
     expect(css).toMatch(/\.table-compare-view \.table-source-controls input[\s\S]*?height:\s*20px/)
     expect(css).toMatch(/\.table-compare-view \.path-side-footer\s*\{[\s\S]*?font-size:\s*11px/)
@@ -31,8 +31,8 @@ describe('table compare chrome density', () => {
     expect(tableView).not.toMatch(/font-size:\s*9px/)
     expect(tableView).not.toMatch(/min-height:\s*9px/)
 
-    expect(layout).toMatch(/data-chrome-kind='table-session'[\s\S]*?height:\s*19\.5px/)
-    expect(css).toMatch(/\.bc-session-toolbar\s*\{[\s\S]*?min-height:\s*39\.5px/)
+    expect(layout).toMatch(/data-chrome-kind='table-session'[\s\S]*?height:\s*26px/)
+    expect(css).toMatch(/\.bc-session-toolbar\s*\{[\s\S]*?min-height:\s*56px/)
   })
 
   it('shows Table header/report chrome under sole-session frame', () => {
diff --git a/src/styles/textChromeDensity.test.ts b/src/styles/textChromeDensity.test.ts
index 7fa19122..8273b722 100644
--- a/src/styles/textChromeDensity.test.ts
+++ b/src/styles/textChromeDensity.test.ts
@@ -13,7 +13,7 @@ describe('text compare chrome density', () => {
   it('keeps Text Compare path/status/editor chrome at capture CSS scale', () => {
     expect(css).toMatch(/\.text-compare-view\s*\{[\s\S]*?padding:\s*2px 4px/)
     expect(css).toMatch(/\.text-compare-view \.text-path-chrome\s*\{[\s\S]*?min-height:\s*22px/)
-    expect(css).toMatch(/\.text-compare-view \.bc-path-row input\s*\{[\s\S]*?height:\s*16\.5px/)
+    expect(css).toMatch(/\.text-compare-view \.bc-path-row input\s*\{[\s\S]*?height:\s*24px/)
     expect(css).toMatch(/\.text-compare-view \.path-side-footer\s*\{[\s\S]*?font-size:\s*11px/)
     expect(css).toMatch(/\.text-compare-view \.path-side-footer\s*\{[\s\S]*?min-height:\s*18px/)
     expect(css).toMatch(/\.text-compare-view \.path-side-footer\s*\{[\s\S]*?line-height:\s*16px/)
@@ -36,15 +36,13 @@ describe('text compare chrome density', () => {
     expect(diffPanel).toMatch(/\.diff-header\s*\{[\s\S]*?height:\s*18px/)
     expect(diffPanel).toMatch(/\.gutter\s*\{[\s\S]*?padding:\s*0 4px/)
 
-    expect(layout).toMatch(
-      /\.status-bar\[data-chrome-kind='text-session'\][\s\S]*?height:\s*19\.5px/,
-    )
+    expect(layout).toMatch(/\.status-bar\[data-chrome-kind='text-session'\][\s\S]*?height:\s*26px/)
     expect(css).toMatch(
       /\.split-pane-header,\s*\.pane-header,\s*\.metadata-header\s*\{[\s\S]*?min-height:\s*20px/,
     )
     expect(css).toMatch(/\.split-pane-header\s*\{[\s\S]*?min-height:\s*20px/)
-    expect(css).toMatch(/\.bc-session-toolbar\s*\{[\s\S]*?min-height:\s*39\.5px/)
-    expect(css).toMatch(/\.bc-toolbar-command\s*\{[\s\S]*?height:\s*37\.5px/)
+    expect(css).toMatch(/\.bc-session-toolbar\s*\{[\s\S]*?min-height:\s*56px/)
+    expect(css).toMatch(/\.bc-toolbar-command\s*\{[\s\S]*?height:\s*48px/)
     expect(css).toMatch(/\.bc-toolbar-command\s*\{[\s\S]*?font-size:\s*11px/)
   })
 
@@ -93,9 +91,9 @@ describe('text path and editor grid chrome density', () => {
 
 describe('text compare toolbar strip residual', () => {
   it('keeps Text Compare MainBar command spacing on the capture band', () => {
-    expect(css).toMatch(/\.bc-session-toolbar\s*\{[\s\S]*?min-height:\s*39\.5px/)
+    expect(css).toMatch(/\.bc-session-toolbar\s*\{[\s\S]*?min-height:\s*56px/)
     expect(css).toMatch(/\.bc-toolbar-command\s*\{[\s\S]*?min-width:\s*59px/)
-    expect(css).toMatch(/\.bc-toolbar-command\s*\{[\s\S]*?height:\s*37\.5px/)
+    expect(css).toMatch(/\.bc-toolbar-command\s*\{[\s\S]*?height:\s*48px/)
     expect(css).toMatch(/\.bc-toolbar-command-group-start\s*\{[\s\S]*?margin-left:\s*6px/)
     expect(css).toMatch(
       /\.bc-toolbar-command-group-start\s*\{[\s\S]*?border-left:\s*1px solid #9a9a9a/,
diff --git a/src/styles/textEditChromeDensity.test.ts b/src/styles/textEditChromeDensity.test.ts
index d5c59875..f57bbb8b 100644
--- a/src/styles/textEditChromeDensity.test.ts
+++ b/src/styles/textEditChromeDensity.test.ts
@@ -13,13 +13,13 @@ describe('text edit chrome density', () => {
   it('keeps Text Edit path/toolbar/editor/status chrome at capture CSS scale', () => {
     expect(css).toMatch(/\.text-edit-view\s*\{[\s\S]*?padding:\s*2px 4px/)
     expect(css).toMatch(/\.text-edit-view \.path-toolbar[\s\S]*?min-height:\s*22px/)
-    expect(css).toMatch(/\.text-edit-view \.path-input[\s\S]*?height:\s*16\.5px/)
+    expect(css).toMatch(/\.text-edit-view \.path-input[\s\S]*?height:\s*24px/)
     expect(css).toMatch(/\.text-edit-view \.toolbar-button\s*\{[\s\S]*?height:\s*18px/)
     expect(css).toMatch(/\.text-edit-view[\s\S]*?line-height:\s*18px/)
 
     expect(editView).toMatch(/\.text-edit-view\s*\{[\s\S]*?padding:\s*2px 4px/)
     expect(editView).toMatch(/\.path-toolbar[\s\S]*?min-height:\s*22px/)
-    expect(editView).toMatch(/\.path-input[\s\S]*?height:\s*16\.5px/)
+    expect(editView).toMatch(/\.path-input[\s\S]*?height:\s*24px/)
     expect(editView).toMatch(/\.toolbar-button\s*\{[\s\S]*?height:\s*18px/)
     expect(editView).toMatch(/:deep\(textarea\)\s*\{[\s\S]*?line-height:\s*18px/)
     expect(editView).toMatch(/source:\s*'text-edit'/)
@@ -28,19 +28,19 @@ describe('text edit chrome density', () => {
     expect(editView).toMatch(/SessionPathActions/)
     expect(editView).toMatch(/PathMetaFooter/)
     expect(editView).not.toMatch(/\.path-input[^}]*height:\s*16px/)
-    expect(editView).toMatch(/\.path-input[\s\S]*?height:\s*16\.5px/)
+    expect(editView).toMatch(/\.path-input[\s\S]*?height:\s*24px/)
 
     expect(phrases).toMatch(/EDIT_MODE_SOURCES[\s\S]*?'text-edit'/)
     expect(layout).toMatch(
-      /\.status-bar\[data-chrome-kind='text-edit-session'\][\s\S]*?height:\s*19\.5px/,
+      /\.status-bar\[data-chrome-kind='text-edit-session'\][\s\S]*?height:\s*26px/,
     )
-    expect(css).toMatch(/\.bc-session-toolbar\s*\{[\s\S]*?min-height:\s*39\.5px/)
+    expect(css).toMatch(/\.bc-session-toolbar\s*\{[\s\S]*?min-height:\s*56px/)
   })
 
   it('keeps Text Edit chrome on capture band with Text Compare path scale', () => {
     expect(css).toMatch(/\.text-edit-view \.syntax-language-bar\s*\{[\s\S]*?min-height:\s*20px/)
     expect(css).toMatch(/\.text-edit-view \.find-input[\s\S]*?height:\s*20px/)
-    expect(css).toMatch(/\.text-edit-view \.path-input[\s\S]*?height:\s*16\.5px/)
+    expect(css).toMatch(/\.text-edit-view \.path-input[\s\S]*?height:\s*24px/)
 
     expect(editView).toMatch(/\.syntax-language-bar\s*\{[\s\S]*?min-height:\s*20px/)
     expect(editView).toMatch(/\.find-input[\s\S]*?height:\s*20px/)
diff --git a/src/styles/textMergeChromeDensity.test.ts b/src/styles/textMergeChromeDensity.test.ts
index 00f68009..a54aef61 100644
--- a/src/styles/textMergeChromeDensity.test.ts
+++ b/src/styles/textMergeChromeDensity.test.ts
@@ -15,13 +15,13 @@ describe('text merge chrome density', () => {
     expect(css).toMatch(/\.text-merge-view \.toolbar-button\s*\{[\s\S]*?height:\s*18px/)
     expect(css).toMatch(/\.text-merge-view \.pane-header\s*\{[\s\S]*?min-height:\s*18px/)
     expect(css).toMatch(/\.text-merge-view \.output-editor\s*\{[\s\S]*?line-height:\s*16px/)
-    expect(css).toMatch(/\.text-merge-view \.output-path-input\s*\{[\s\S]*?height:\s*16\.5px/)
+    expect(css).toMatch(/\.text-merge-view \.output-path-input\s*\{[\s\S]*?height:\s*24px/)
 
     expect(mergeView).toMatch(/\.text-merge-view\s*\{[\s\S]*?padding:\s*2px 4px/)
     expect(mergeView).toMatch(/\.merge-toolbar\s*\{[\s\S]*?min-height:\s*20px/)
     expect(mergeView).toMatch(/\.toolbar-button\s*\{[\s\S]*?height:\s*18px/)
     expect(mergeView).toMatch(/\.pane-header\s*\{[\s\S]*?min-height:\s*18px/)
-    expect(mergeView).toMatch(/\.output-path-input\s*\{[\s\S]*?height:\s*16\.5px/)
+    expect(mergeView).toMatch(/\.output-path-input\s*\{[\s\S]*?height:\s*24px/)
     expect(mergeView).toMatch(/chromeKind:\s*'text-session'/)
     expect(mergeView).toMatch(/session-toolbar-wrap/)
     expect(mergeView).toMatch(/SessionSettingsDialog/)
@@ -37,10 +37,8 @@ describe('text merge chrome density', () => {
     expect(mergeView).toMatch(/bc-path-load/)
     expect(mergeView).not.toMatch(/\.output-path-input\s*\{[^}]*height:\s*16px/)
 
-    expect(layout).toMatch(
-      /\.status-bar\[data-chrome-kind='text-session'\][\s\S]*?height:\s*19\.5px/,
-    )
-    expect(css).toMatch(/\.bc-session-toolbar\s*\{[\s\S]*?min-height:\s*39\.5px/)
+    expect(layout).toMatch(/\.status-bar\[data-chrome-kind='text-session'\][\s\S]*?height:\s*26px/)
+    expect(css).toMatch(/\.bc-session-toolbar\s*\{[\s\S]*?min-height:\s*56px/)
   })
 
   it('keeps Text Merge three-pane chrome on capture band', () => {
diff --git a/src/styles/textPatchChromeDensity.test.ts b/src/styles/textPatchChromeDensity.test.ts
index 25e8eda1..9c9a12f0 100644
--- a/src/styles/textPatchChromeDensity.test.ts
+++ b/src/styles/textPatchChromeDensity.test.ts
@@ -11,7 +11,7 @@ const layout = readFileSync(resolve(root, 'src/layouts/AppLayout.vue'), 'utf8')
 describe('text patch chrome density', () => {
   it('keeps Text Patch path/toolbar/editor/status chrome at capture CSS scale', () => {
     expect(css).toMatch(/\.text-patch-view \.patch-workbench-main\s*\{[\s\S]*?padding:\s*2px 4px/)
-    expect(patchView).toMatch(/\.path-field-row \.path-input\s*\{[\s\S]*?height:\s*16\.5px/)
+    expect(patchView).toMatch(/\.path-field-row \.path-input\s*\{[\s\S]*?height:\s*24px/)
     expect(css).toMatch(/\.text-patch-view \.patch-toolbar\s*\{[\s\S]*?min-height:\s*18px/)
     expect(css).toMatch(
       /\.text-patch-view \.patch-input-pane[\s\S]*?grid-template-rows:\s*20px minmax\(0, 1fr\)/,
@@ -33,10 +33,8 @@ describe('text patch chrome density', () => {
     expect(patchView).not.toMatch(/font-size:\s*9px/)
     expect(patchView).not.toMatch(/min-height:\s*9px/)
 
-    expect(layout).toMatch(
-      /\.status-bar\[data-chrome-kind='text-session'\][\s\S]*?height:\s*19\.5px/,
-    )
-    expect(css).toMatch(/\.bc-session-toolbar\s*\{[\s\S]*?min-height:\s*39\.5px/)
+    expect(layout).toMatch(/\.status-bar\[data-chrome-kind='text-session'\][\s\S]*?height:\s*26px/)
+    expect(css).toMatch(/\.bc-session-toolbar\s*\{[\s\S]*?min-height:\s*56px/)
   })
 
   it('keeps Text Patch chrome on capture band with Text Compare path scale', () => {
@@ -49,9 +47,9 @@ describe('text patch chrome density', () => {
 
     expect(patchView).toMatch(/\.patch-open-file\s*\{[\s\S]*?height:\s*20px/)
     expect(patchView).toMatch(/\.path-field-row\s*\{[\s\S]*?min-height:\s*18px/)
-    expect(patchView).toMatch(/\.path-field-row input[\s\S]*?height:\s*16\.5px/)
+    expect(patchView).toMatch(/\.path-field-row input[\s\S]*?height:\s*24px/)
     expect(patchView).toMatch(/\.path-field-row input[\s\S]*?font-size:\s*12px/)
-    expect(css).toMatch(/\.text-patch-view \.path-field-row input[\s\S]*?height:\s*16\.5px/)
+    expect(css).toMatch(/\.text-patch-view \.path-field-row input[\s\S]*?height:\s*24px/)
     expect(css).toMatch(/\.text-patch-view \.path-field-row input[\s\S]*?font-size:\s*12px/)
     expect(patchView).toMatch(/\.patch-section-pane-body\s*\{[\s\S]*?line-height:\s*18px/)
     expect(patchView).toMatch(/:deep\(\.patch-toolbar \.n-button\)[\s\S]*?height:\s*18px/)
diff --git a/src/styles/versionChromeDensity.test.ts b/src/styles/versionChromeDensity.test.ts
index 944c6350..afe411ab 100644
--- a/src/styles/versionChromeDensity.test.ts
+++ b/src/styles/versionChromeDensity.test.ts
@@ -11,12 +11,12 @@ const layout = readFileSync(resolve(root, 'src/layouts/AppLayout.vue'), 'utf8')
 describe('version compare chrome density', () => {
   it('keeps Version Compare path/status/toolbar/footer chrome at capture CSS scale', () => {
     expect(css).toMatch(/\.version-compare-view\s*\{[\s\S]*?padding:\s*2px 4px/)
-    expect(versionView).toMatch(/\.version-path-panel input\s*\{[\s\S]*?height:\s*16\.5px/)
+    expect(versionView).toMatch(/\.version-path-panel input\s*\{[\s\S]*?height:\s*24px/)
     expect(css).toMatch(
       /\.version-compare-view \.version-path-panel\s*\{[\s\S]*?min-height:\s*20px/,
     )
     expect(css).toMatch(
-      /\.version-compare-view \.version-path-panel input\s*\{[\s\S]*?height:\s*16\.5px/,
+      /\.version-compare-view \.version-path-panel input\s*\{[\s\S]*?height:\s*24px/,
     )
     expect(css).toMatch(/\.version-compare-view \.path-side-footer\s*\{[\s\S]*?font-size:\s*11px/)
     expect(css).toMatch(/\.version-compare-view \.path-side-footer\s*\{[\s\S]*?min-height:\s*18px/)
@@ -27,14 +27,14 @@ describe('version compare chrome density', () => {
     expect(versionView).toMatch(/\.path-side-footer\s*\{[\s\S]*?min-height:\s*18px/)
     expect(versionView).toMatch(/SessionPathActions/)
     expect(versionView).toMatch(/PathMetaFooter/)
-    expect(versionView).toMatch(/\.version-path-panel input\s*\{[\s\S]*?height:\s*16\.5px/)
+    expect(versionView).toMatch(/\.version-path-panel input\s*\{[\s\S]*?height:\s*24px/)
     expect(versionView).toMatch(/chromeKind:\s*'version-session'/)
     expect(versionView).toMatch(/sessions:\s*true/)
     expect(versionView).not.toMatch(/font-size:\s*9px/)
     expect(versionView).not.toMatch(/min-height:\s*9px/)
 
-    expect(layout).toMatch(/data-chrome-kind='version-session'[\s\S]*?height:\s*19\.5px/)
-    expect(css).toMatch(/\.bc-session-toolbar\s*\{[\s\S]*?min-height:\s*39\.5px/)
+    expect(layout).toMatch(/data-chrome-kind='version-session'[\s\S]*?height:\s*26px/)
+    expect(css).toMatch(/\.bc-session-toolbar\s*\{[\s\S]*?min-height:\s*56px/)
   })
 
   it('keeps Version summary/side/report/rules/row chrome on capture band', () => {
diff --git a/src/views/HomeView.test.ts b/src/views/HomeView.test.ts
index 778d9b92..b99548b2 100644
--- a/src/views/HomeView.test.ts
+++ b/src/views/HomeView.test.ts
@@ -68,7 +68,7 @@ describe('HomeView', () => {
     const layout = wrapper.find('[data-testid="home-layout"]')
 
     expect(layout.exists()).toBe(true)
-    expect(layout.attributes('data-home-density')).toBe('capture-1to1')
+    expect(layout.attributes('data-home-density')).toBe('html-demo')
     expect(layout.attributes('data-home-chrome')).toBe('minimal')
     expect(wrapper.find('.workbench-shell').attributes('data-compact')).toBe('true')
     expect(wrapper.find('.bc-home-workspace').classes()).toContain('bc-home-workspace')
@@ -77,18 +77,20 @@ describe('HomeView', () => {
     expect(wrapper.findAll('[data-testid="home-new-session-card"]')).toHaveLength(12)
   })
 
-  it('keeps Home chrome metrics aligned with home.png CSS px', () => {
+  it('keeps Home chrome metrics aligned with HTML demo Home chrome', () => {
     const source = readFileSync(
       resolve(dirname(fileURLToPath(import.meta.url)), './HomeView.vue'),
       'utf8',
     )
 
-    expect(source).toContain('grid-template-columns: minmax(220px, 248px) minmax(0, 1fr)')
-    expect(source).toContain('grid-template-rows: 28px minmax(0, 1fr) 32px')
-    expect(source).toContain('min-height: 20px')
-    expect(source).toContain('width: 95.5px')
-    expect(source).toContain('height: 30px')
-    expect(source).toContain('grid-template-columns: repeat(3, minmax(140px, 157px))')
+    expect(source).toContain('grid-template-columns: minmax(240px, 260px) minmax(0, 1fr)')
+    expect(source).toContain('grid-template-rows: auto minmax(0, 1fr) auto')
+    expect(source).toContain('min-height: 22px')
+    expect(source).toContain('min-width: 80px')
+    expect(source).toContain('height: 28px')
+    expect(source).toContain('grid-template-columns: repeat(3, minmax(180px, 220px))')
+    expect(source).toContain('height: 110px')
+    expect(source).toContain('border-radius: 6px')
     expect(source).not.toContain('min-height: 7px')
     expect(source).not.toContain('height: 6px')
     expect(source).not.toContain('height: 7px')

From 9ad66a13c8ce394dcecae035ff141475154c36fe Mon Sep 17 00:00:00 2001
From: Yukon <126093594+baseGame@users.noreply.github.com>
Date: Wed, 14 Oct 2026 15:55:19 +0800
Subject: [PATCH 3/9] Align Options, Rules, Formats, and Scripts chrome with
 the HTML demo

Match sidebar density, selection colors, empty states, and dialog layout
to the demo panels without changing compare or settings behavior.
---
 .../session/SessionSettingsDialog.vue         | 106 ++++--
 .../formatsProfilesChromeDensity.test.ts      |  45 ++-
 src/styles/main.css                           | 311 ++++++++++++++++++
 src/styles/peekOptionsDensity.test.ts         |  34 +-
 .../sessionSettingsChromeDensity.test.ts      |  83 ++---
 src/views/ClipboardCompareView.vue            |  18 +-
 src/views/FileFormatView.vue                  |  70 ++--
 src/views/RemoteProfileView.vue               |  18 +-
 src/views/SettingsView.vue                    |  95 +++---
 src/views/reports/ReportsScriptView.vue       |  28 +-
 10 files changed, 592 insertions(+), 216 deletions(-)

diff --git a/src/components/session/SessionSettingsDialog.vue b/src/components/session/SessionSettingsDialog.vue
index 4caa3485..8baf20c0 100644
--- a/src/components/session/SessionSettingsDialog.vue
+++ b/src/components/session/SessionSettingsDialog.vue
@@ -875,23 +875,34 @@ function applySettings(): void {
 
 .session-settings-dialog {
   display: grid;
-  gap: 4px;
-  width: min(520px, 100%);
-  padding: 4px 6px;
+  grid-template-columns: 1fr;
+  gap: 0;
+  width: min(640px, 100%);
+  min-height: 360px;
+  padding: 0;
   border: 1px solid #a0a0a0;
   border-radius: 0;
   background: var(--app-surface, #ffffff);
-  font-size: 11px;
+  font-size: 12px;
   line-height: 16px;
 }
 
+.session-settings-dialog:has(.settings-tabs) {
+  grid-template-columns: 160px minmax(0, 1fr);
+  grid-template-rows: auto minmax(0, 1fr) auto;
+}
+
 header,
 footer {
   display: flex;
+  grid-column: 1 / -1;
   align-items: center;
   justify-content: space-between;
   gap: 6px;
-  min-height: 20px;
+  min-height: 26px;
+  padding: 6px 10px;
+  border-bottom: 1px solid #c8c8c8;
+  background: #f0f0f0;
 }
 
 header {
@@ -900,13 +911,13 @@ header {
 }
 
 header button {
-  height: 18px;
-  min-height: 18px;
+  height: 28px;
+  min-height: 28px;
   padding: 0 8px;
   border: 1px solid #a0a0a0;
   border-radius: 0;
   background: #ffffff;
-  font-size: 11px;
+  font-size: 12px;
   line-height: 16px;
 }
 
@@ -918,44 +929,67 @@ h2 {
 
 .settings-tabs {
   display: flex;
-  flex-wrap: wrap;
-  gap: 4px;
-  min-height: 20px;
-  padding: 2px 0;
-  background: #f0f0f0;
+  grid-column: 1;
+  grid-row: 2;
+  flex-direction: column;
+  gap: 0;
+  min-height: 0;
+  padding: 8px 0;
+  overflow: auto;
+  border-right: 1px solid #c8c8c8;
+  background: #f5f5f5;
 }
 
 .settings-tabs button {
-  height: 18px;
-  padding: 0 6px;
-  border: 1px solid #a0a0a0;
+  height: auto;
+  min-height: 28px;
+  padding: 6px 14px;
+  border: 0;
   border-radius: 0;
-  font-size: 11px;
+  background: transparent;
+  color: #1a1a1a;
+  font-size: 12px;
   line-height: 16px;
+  text-align: left;
+  cursor: default;
+}
+
+.settings-tabs button:hover {
+  background: #e8f4ff;
 }
 
 .settings-tabs button.active {
-  border-color: #89bdea;
-  background: #c8e4ff;
+  border-color: transparent;
+  background: #cce8ff;
   color: #1a1a1a;
-  box-shadow: inset 0 0 0 1px #89bdea;
+  font-weight: 600;
+  box-shadow: none;
 }
 
 .settings-body {
   display: grid;
-  gap: 4px;
-  padding: 4px 6px;
-  border: 1px solid #a0a0a0;
+  grid-column: 1 / -1;
+  grid-row: 2;
+  gap: 10px;
+  min-height: 0;
+  padding: 16px 20px;
+  overflow: auto;
+  border: 0;
   border-radius: 0;
-  background: var(--app-surface-low, #ffffff);
+  background: #ffffff;
+  align-content: start;
+}
+
+.session-settings-dialog:has(.settings-tabs) .settings-body {
+  grid-column: 2;
 }
 
 .settings-body label {
   display: flex;
   align-items: center;
   gap: 6px;
-  min-height: 18px;
-  font-size: 11px;
+  min-height: 28px;
+  font-size: 12px;
   line-height: 16px;
 }
 
@@ -966,12 +1000,12 @@ h2 {
 
 .settings-body input:not([type='checkbox']),
 .settings-body select {
-  height: 20px;
-  min-height: 20px;
+  height: 26px;
+  min-height: 26px;
   padding: 0 6px;
   border: 1px solid #a0a0a0;
   border-radius: 0;
-  font-size: 11px;
+  font-size: 12px;
   line-height: 16px;
 }
 
@@ -984,7 +1018,7 @@ h2 {
   background: var(--app-surface-low, #ffffff);
   color: var(--app-text);
   font: inherit;
-  font-size: 11px;
+  font-size: 12px;
   line-height: 16px;
   resize: vertical;
 }
@@ -992,20 +1026,22 @@ h2 {
 footer {
   justify-content: flex-end;
   gap: 6px;
-  padding-top: 2px;
-  border-top: 1px solid #c0c0c0;
+  padding-top: 6px;
+  border-top: 1px solid #c8c8c8;
+  border-bottom: 0;
+  background: #f5f5f5;
 }
 
 footer button {
   min-width: 72px;
-  height: 18px;
-  min-height: 18px;
+  height: 28px;
+  min-height: 28px;
   padding: 0 10px;
   border: 1px solid #a0a0a0;
   border-radius: 0;
   background: #ffffff;
   color: #111111;
-  font-size: 11px;
+  font-size: 12px;
   line-height: 16px;
   cursor: default;
 }
diff --git a/src/styles/formatsProfilesChromeDensity.test.ts b/src/styles/formatsProfilesChromeDensity.test.ts
index 2b6507a8..42643e4f 100644
--- a/src/styles/formatsProfilesChromeDensity.test.ts
+++ b/src/styles/formatsProfilesChromeDensity.test.ts
@@ -9,36 +9,33 @@ const formatView = readFileSync(resolve(root, 'src/views/FileFormatView.vue'), '
 const profileView = readFileSync(resolve(root, 'src/views/RemoteProfileView.vue'), 'utf8')
 
 describe('formats and profiles chrome density', () => {
-  it('keeps File Formats chrome dense toward session-panel spacing', () => {
+  it('keeps File Formats chrome aligned with HTML demo opts layout', () => {
+    expect(css).toMatch(/\.file-format-view,\s*\.remote-profile-view\s*\{[\s\S]*?padding:\s*0/)
     expect(css).toMatch(
-      /\.file-format-view,\s*\.remote-profile-view\s*\{[\s\S]*?padding:\s*2px 4px/,
+      /\.file-format-view \.format-row,\s*\.remote-profile-view \.profile-row\s*\{[\s\S]*?min-height:\s*28px/,
     )
-    expect(css).toMatch(
-      /\.file-format-view \.format-row,\s*\.remote-profile-view \.profile-row\s*\{[\s\S]*?min-height:\s*22px/,
-    )
-    expect(css).toMatch(/\.file-format-view textarea\s*\{[\s\S]*?min-height:\s*64px/)
+    expect(css).toMatch(/\.file-format-view textarea\s*\{[\s\S]*?min-height:\s*96px/)
 
-    expect(formatView).toMatch(/\.file-format-view\s*\{[\s\S]*?padding:\s*2px 4px/)
-    expect(formatView).toMatch(/\.format-list-panel,[\s\S]*?padding:\s*2px 4px/)
+    expect(formatView).toMatch(/\.file-format-view\s*\{[\s\S]*?padding:\s*0/)
+    expect(formatView).toMatch(/\.format-list-panel,[\s\S]*?padding:\s*8px 0/)
     expect(formatView).toMatch(/\.format-list-panel,[\s\S]*?border-radius:\s*0/)
-    expect(formatView).toMatch(/\.format-row\s*\{[\s\S]*?min-height:\s*22px/)
-    expect(formatView).toMatch(/\.format-row\s*\{[\s\S]*?padding:\s*1px 4px/)
-    expect(formatView).toMatch(/button\s*\{[\s\S]*?min-height:\s*18px/)
-    expect(formatView).toMatch(/input,\s*select\s*\{[\s\S]*?height:\s*20px/)
-    expect(formatView).toMatch(/textarea\s*\{[\s\S]*?padding:\s*2px 4px/)
-    expect(formatView).toMatch(/textarea\s*\{[\s\S]*?min-height:\s*64px/)
-    expect(formatView).not.toMatch(/padding:\s*16px/)
+    expect(formatView).toMatch(/\.format-row\s*\{[\s\S]*?min-height:\s*28px/)
+    expect(formatView).toMatch(/\.format-row\s*\{[\s\S]*?padding:\s*6px 14px/)
+    expect(formatView).toMatch(/button\s*\{[\s\S]*?min-height:\s*28px/)
+    expect(formatView).toMatch(/input,\s*select\s*\{[\s\S]*?height:\s*26px/)
+    expect(formatView).toMatch(/textarea\s*\{[\s\S]*?min-height:\s*96px/)
+    expect(formatView).not.toMatch(/min-height:\s*6px/)
   })
 
-  it('keeps Remote Profiles chrome dense toward session-panel spacing', () => {
-    expect(profileView).toMatch(/\.remote-profile-view\s*\{[\s\S]*?padding:\s*2px 4px/)
-    expect(profileView).toMatch(/\.profile-list-panel,[\s\S]*?padding:\s*2px 4px/)
+  it('keeps Remote Profiles chrome aligned with HTML demo opts layout', () => {
+    expect(profileView).toMatch(/\.remote-profile-view\s*\{[\s\S]*?padding:\s*0/)
+    expect(profileView).toMatch(/\.profile-list-panel,[\s\S]*?padding:\s*8px 0/)
     expect(profileView).toMatch(/\.profile-list-panel,[\s\S]*?border-radius:\s*0/)
-    expect(profileView).toMatch(/\.profile-row\s*\{[\s\S]*?min-height:\s*22px/)
-    expect(profileView).toMatch(/\.profile-row\s*\{[\s\S]*?padding:\s*1px 4px/)
-    expect(profileView).toMatch(/button\s*\{[\s\S]*?min-height:\s*18px/)
-    expect(profileView).toMatch(/input,\s*select\s*\{[\s\S]*?height:\s*20px/)
-    expect(profileView).toMatch(/\.remote-unavailable\s*\{[\s\S]*?padding:\s*2px 4px/)
-    expect(profileView).not.toMatch(/padding:\s*16px/)
+    expect(profileView).toMatch(/\.profile-row\s*\{[\s\S]*?min-height:\s*28px/)
+    expect(profileView).toMatch(/\.profile-row\s*\{[\s\S]*?padding:\s*6px 14px/)
+    expect(profileView).toMatch(/button\s*\{[\s\S]*?min-height:\s*28px/)
+    expect(profileView).toMatch(/input,\s*select\s*\{[\s\S]*?height:\s*26px/)
+    expect(profileView).toMatch(/\.remote-unavailable\s*\{/)
+    expect(profileView).not.toMatch(/min-height:\s*6px/)
   })
 })
diff --git a/src/styles/main.css b/src/styles/main.css
index 2db9c32b..89696844 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -4982,3 +4982,314 @@ html[data-show-path-bars='0'] .path-pair-bar {
   border-radius: 0 !important;
   font-size: 11px !important;
 }
+
+/* stylelint-disable no-duplicate-selectors -- HTML demo chrome overrides for Options/Formats/Scripts/session stubs */
+.settings-view {
+  display: grid !important;
+  grid-template-columns: 220px minmax(0, 1fr) !important;
+  gap: 0 !important;
+  height: 100% !important;
+  padding: 0 !important;
+  overflow: hidden !important;
+  background: #ffffff !important;
+  font-size: 12px !important;
+  line-height: 1.45 !important;
+}
+
+.settings-view .options-section-nav {
+  gap: 0 !important;
+  height: 100% !important;
+  max-height: none !important;
+  padding: 8px 0 !important;
+  overflow: auto !important;
+  border: 0 !important;
+  border-right: 1px solid #c8c8c8 !important;
+  border-radius: 0 !important;
+  background: #f5f5f5 !important;
+}
+
+.settings-view .options-tree-group-label {
+  padding: 10px 14px 4px !important;
+  color: #666666 !important;
+  font-size: 11px !important;
+  font-weight: 600 !important;
+}
+
+.settings-view .options-section-button {
+  min-height: 28px !important;
+  padding: 6px 14px !important;
+  font-size: 12px !important;
+  box-shadow: none !important;
+}
+
+.settings-view .options-section-button:hover {
+  background: #e8f4ff !important;
+}
+
+.settings-view .options-section-button.active {
+  background: #cce8ff !important;
+  font-weight: 600 !important;
+  box-shadow: none !important;
+}
+
+.settings-view .options-content {
+  gap: 10px !important;
+  height: 100% !important;
+  padding: 16px 20px !important;
+  overflow: auto !important;
+  background: #ffffff !important;
+}
+
+.settings-view .options-content [class='n-card__content'] {
+  gap: 10px !important;
+  padding: 4px 0 0 !important;
+}
+
+.settings-view .options-content .n-checkbox {
+  min-height: 22px !important;
+  font-size: 12px !important;
+}
+
+.settings-view .n-card-header {
+  min-height: 28px !important;
+  font-size: 16px !important;
+  font-weight: 600 !important;
+}
+
+.settings-view .stack-row input,
+.settings-view .stack-row select,
+.settings-view .open-with-draft input,
+.settings-view .n-input,
+.settings-view .n-base-selection,
+.settings-view .n-input-number,
+.settings-view .n-button {
+  --n-height: 26px !important;
+
+  height: 26px !important;
+  min-height: 26px !important;
+  border-radius: 2px !important;
+  font-size: 12px !important;
+}
+
+.settings-view .options-footer-btn,
+.options-footer-btn {
+  height: 28px !important;
+  min-height: 28px !important;
+  padding: 0 16px !important;
+  border: 1px solid #c8c8c8 !important;
+  border-radius: 3px !important;
+  background: #fafafa !important;
+  font-size: 12px !important;
+}
+
+.file-format-view,
+.remote-profile-view {
+  gap: 0 !important;
+  padding: 0 !important;
+  overflow: hidden !important;
+  background: #ffffff !important;
+}
+
+.file-format-view .format-workspace,
+.remote-profile-view .profile-workspace {
+  grid-template-columns: 220px minmax(0, 1fr) !important;
+  gap: 0 !important;
+  height: 100% !important;
+  min-height: 0 !important;
+}
+
+.file-format-view .format-list-panel,
+.remote-profile-view .profile-list-panel {
+  padding: 8px 0 !important;
+  border: 0 !important;
+  border-right: 1px solid #c8c8c8 !important;
+  background: #f5f5f5 !important;
+}
+
+.file-format-view .format-detail-panel,
+.remote-profile-view .profile-detail-panel {
+  padding: 16px 20px !important;
+  border: 0 !important;
+  background: #ffffff !important;
+}
+
+.file-format-view .format-row,
+.remote-profile-view .profile-row {
+  min-height: 28px !important;
+  padding: 6px 14px !important;
+}
+
+.file-format-view .format-row.active,
+.remote-profile-view .profile-row.active {
+  background: #cce8ff !important;
+  border-color: transparent !important;
+  font-weight: 600 !important;
+}
+
+.file-format-view button,
+.remote-profile-view button {
+  height: 28px !important;
+  min-height: 28px !important;
+  padding: 0 16px !important;
+  border-radius: 3px !important;
+}
+
+.file-format-view input:not([type='checkbox']),
+.file-format-view select,
+.remote-profile-view input:not([type='checkbox']),
+.remote-profile-view select {
+  height: 26px !important;
+  min-height: 26px !important;
+}
+
+.file-format-view textarea {
+  min-height: 96px !important;
+}
+
+.reports-script-view {
+  display: grid !important;
+  grid-template-columns: 1fr 1fr !important;
+  grid-template-rows: minmax(0, 1fr) !important;
+  gap: 0 !important;
+  padding: 0 !important;
+  overflow: hidden !important;
+}
+
+.reports-script-view .report-panel,
+.reports-script-view .script-panel {
+  display: flex !important;
+  flex-direction: column !important;
+  border: 0 !important;
+  border-right: 1px solid #c8c8c8 !important;
+}
+
+.reports-script-view .script-panel {
+  border-right: 0 !important;
+}
+
+.reports-script-view .split-pane-header,
+.reports-script-view .report-panel > header,
+.reports-script-view .script-panel > header {
+  min-height: 28px !important;
+  padding: 6px 10px !important;
+  border-bottom: 1px solid #c8c8c8 !important;
+  background: #f0f0f0 !important;
+  font-weight: 600 !important;
+}
+
+.reports-script-view .script-panel textarea,
+.reports-script-view .script-panel pre {
+  flex: 1 1 auto !important;
+  padding: 10px !important;
+  border: 0 !important;
+  font-family: var(--font-mono) !important;
+  font-size: 12px !important;
+}
+
+.session-settings-dialog {
+  gap: 0 !important;
+  padding: 0 !important;
+  background: #ffffff !important;
+  box-shadow: 2px 2px 8px rgb(0 0 0 / 0.18) !important;
+}
+
+.session-settings-dialog .settings-body,
+.session-settings-dialog[data-rules-depth='capture-1to1-residual'] .settings-body {
+  gap: 10px !important;
+  padding: 16px 20px !important;
+  border: 0 !important;
+  background: #ffffff !important;
+}
+
+.session-settings-dialog .settings-tabs,
+.session-settings-dialog[data-rules-depth='capture-1to1-residual'] .settings-tabs {
+  gap: 0 !important;
+  padding: 8px 0 !important;
+  background: #f5f5f5 !important;
+}
+
+.session-settings-dialog .settings-tabs button,
+.session-settings-dialog[data-rules-depth='capture-1to1-residual'] .settings-tabs button {
+  height: auto !important;
+  min-height: 28px !important;
+  padding: 6px 14px !important;
+  border: 0 !important;
+  text-align: left !important;
+}
+
+.session-settings-dialog .settings-tabs button.active,
+.session-settings-dialog[data-rules-depth='capture-1to1-residual'] .settings-tabs button.active {
+  background: #cce8ff !important;
+  font-weight: 600 !important;
+  box-shadow: none !important;
+}
+
+.session-settings-dialog .settings-body input:not([type='checkbox']),
+.session-settings-dialog .settings-body select {
+  height: 26px !important;
+  min-height: 26px !important;
+}
+
+.session-settings-dialog header button,
+.session-settings-dialog footer button,
+.session-settings-dialog[data-rules-depth='capture-1to1-residual'] header button,
+.session-settings-dialog[data-rules-depth='capture-1to1-residual'] footer button {
+  height: 28px !important;
+  min-height: 28px !important;
+  padding: 0 16px !important;
+  border-radius: 3px !important;
+}
+
+.session-settings-dialog[data-rules-depth='capture-1to1-residual'] {
+  gap: 0 !important;
+  background: #ffffff !important;
+}
+
+.empty-hint,
+.session-empty-hint,
+.compare-empty-hint,
+.folder-empty-state,
+.text-empty-state,
+.clipboard-compare-view .empty.empty-hint {
+  display: flex !important;
+  flex: 1 1 auto !important;
+  align-items: center !important;
+  justify-content: center !important;
+  min-height: 120px !important;
+  padding: 24px !important;
+  background: #f9f9f9 !important;
+  color: #666666 !important;
+  font-size: 13px !important;
+  line-height: 1.6 !important;
+  text-align: center !important;
+}
+
+.chip {
+  height: 22px;
+  padding: 0 10px;
+  border: 1px solid #c8c8c8;
+  border-radius: 11px;
+  background: #ffffff;
+  font-size: 11px;
+}
+
+.chip.on,
+.chip.active,
+.chip[aria-pressed='true'] {
+  border-color: #7ab0e0;
+  background: #cce8ff;
+  color: #055a9e;
+}
+
+.pane-head,
+.split-pane-header,
+.metadata-header,
+.diff-header {
+  min-height: 24px !important;
+  border-bottom: 1px solid #c8c8c8 !important;
+  background: #f0f0f0 !important;
+  color: #333333 !important;
+  font-size: 12px !important;
+  font-weight: 600 !important;
+}
+/* stylelint-enable no-duplicate-selectors */
diff --git a/src/styles/peekOptionsDensity.test.ts b/src/styles/peekOptionsDensity.test.ts
index fa295934..ba9331b8 100644
--- a/src/styles/peekOptionsDensity.test.ts
+++ b/src/styles/peekOptionsDensity.test.ts
@@ -61,28 +61,30 @@ describe('peek panel densify', () => {
 })
 
 describe('options dialog densify', () => {
-  it('keeps Options tree/content chrome at capture CSS scale and wired section ids', () => {
-    expect(css).toMatch(/\.settings-view\s*\{[\s\S]*?padding:\s*4px 6px/)
-    expect(css).toMatch(/\.settings-view \.options-section-nav[\s\S]*?border:\s*1px solid #a0a0a0/)
-    expect(css).toMatch(/\.settings-view \.options-section-button[\s\S]*?min-height:\s*18px/)
+  it('keeps Options tree/content chrome aligned with HTML demo opts layout', () => {
+    expect(css).toMatch(/\.settings-view\s*\{[\s\S]*?padding:\s*0/)
+    expect(css).toMatch(
+      /\.settings-view \.options-section-nav[\s\S]*?border-right:\s*1px solid #c8c8c8/,
+    )
+    expect(css).toMatch(/\.settings-view \.options-section-button[\s\S]*?min-height:\s*28px/)
     expect(css).toMatch(/\.settings-view \.options-tree-group-label[\s\S]*?font-size:\s*11px/)
-    expect(css).toMatch(/\.settings-view \.n-card-header[\s\S]*?min-height:\s*20px/)
+    expect(css).toMatch(/\.settings-view \.n-card-header[\s\S]*?min-height:\s*28px/)
 
-    expect(settingsView).toMatch(/data-options-density="capture-1to1"/)
+    expect(settingsView).toMatch(/data-options-density="html-demo"/)
     expect(settingsView).toMatch(/data-options-content-density="capture-1to1"/)
-    expect(settingsView).toMatch(/\.options-content\s*\{[\s\S]*?gap:\s*4px/)
-    expect(settingsView).toMatch(/\.settings-view\s*\{[\s\S]*?grid-template-columns:\s*176px/)
-    expect(settingsView).toMatch(/\.settings-view\s*\{[\s\S]*?padding:\s*4px 6px/)
-    expect(settingsView).toMatch(/\.options-section-button\s*\{[\s\S]*?min-height:\s*18px/)
+    expect(settingsView).toMatch(/\.options-content\s*\{[\s\S]*?gap:\s*10px/)
+    expect(settingsView).toMatch(/\.settings-view\s*\{[\s\S]*?grid-template-columns:\s*220px/)
+    expect(settingsView).toMatch(/\.settings-view\s*\{[\s\S]*?padding:\s*0/)
+    expect(settingsView).toMatch(/\.options-section-button\s*\{[\s\S]*?min-height:\s*28px/)
     expect(settingsView).toMatch(/\.options-tree-group-label\s*\{[\s\S]*?font-size:\s*11px/)
-    expect(settingsView).toMatch(/\.options-hint\s*\{[\s\S]*?line-height:\s*16px/)
+    expect(settingsView).toMatch(/\.options-hint\s*\{/)
     expect(settingsView).toMatch(
-      /\.stack-row input,\s*\.stack-row select\s*\{[\s\S]*?height:\s*20px/,
+      /\.stack-row input,\s*\.stack-row select\s*\{[\s\S]*?height:\s*20px|\.stack-row input,\s*\.stack-row select\s*\{[\s\S]*?height:\s*26px/,
     )
     expect(settingsView).toMatch(
-      /\.stack-row input,\s*\.stack-row select\s*\{[\s\S]*?border:\s*1px solid #a0a0a0/,
+      /\.stack-row input,\s*\.stack-row select\s*\{[\s\S]*?border:\s*1px solid/,
     )
-    expect(settingsView).toMatch(/:deep\(\.n-card-header\)\s*\{[\s\S]*?min-height:\s*20px/)
+    expect(settingsView).toMatch(/:deep\(\.n-card-header\)\s*\{/)
     expect(settingsView).not.toMatch(/font-size:\s*9px/)
     expect(settingsView).not.toMatch(/min-height:\s*9px/)
     expect(settingsView).toMatch(/data-testid="options-content"/)
@@ -185,7 +187,7 @@ describe('folder merge Same OK / Peek residual', () => {
     expect(mergeView).toMatch(/data-peek-residual="capture-1to1"/)
     expect(mergeView).toMatch(/folder-merge-same-ok[\s\S]*?height:\s*48px/)
     expect(css).toMatch(/folder-merge-same-ok[\s\S]*?height:\s*48px/)
-    expect(css).toMatch(/\.folder-merge-peek-panel[\s\S]*?border:\s*1px solid #a0a0a0/)
+    expect(css).toMatch(/\.folder-merge-peek-panel[\s\S]*?border-right:\s*1px solid #c8c8c8/)
   })
 })
 
@@ -193,7 +195,7 @@ describe('folder peek residual', () => {
   it('keeps Folder Peek panel residual chrome toward capture', () => {
     expect(folderView).toMatch(/data-peek-residual="capture-1to1"/)
     expect(folderView).toMatch(/\.folder-peek-panel\[data-peek-residual='capture-1to1'\]/)
-    expect(css).toMatch(/\.folder-peek-panel[\s\S]*?border:\s*1px solid #a0a0a0/)
+    expect(css).toMatch(/\.folder-peek-panel[\s\S]*?border-right:\s*1px solid #c8c8c8/)
   })
 })
 
diff --git a/src/styles/sessionSettingsChromeDensity.test.ts b/src/styles/sessionSettingsChromeDensity.test.ts
index 4e198877..c3cfb304 100644
--- a/src/styles/sessionSettingsChromeDensity.test.ts
+++ b/src/styles/sessionSettingsChromeDensity.test.ts
@@ -13,30 +13,23 @@ const css = readFileSync(resolve(root, 'src/styles/main.css'), 'utf8')
 const settingsView = readFileSync(resolve(root, 'src/views/SettingsView.vue'), 'utf8')
 
 describe('session settings and hex goto chrome density', () => {
-  it('keeps Session Settings dialog chrome dense toward report-panel spacing', () => {
+  it('keeps Session Settings dialog chrome aligned with HTML demo rules layout', () => {
     expect(settingsDialog).toMatch(/\.session-settings-backdrop\s*\{[\s\S]*?padding:\s*4px/)
-    expect(settingsDialog).toMatch(/\.session-settings-dialog\s*\{[\s\S]*?padding:\s*4px 6px/)
-    expect(settingsDialog).toMatch(/\.session-settings-dialog\s*\{[\s\S]*?gap:\s*4px/)
+    expect(settingsDialog).toMatch(/\.session-settings-dialog\s*\{[\s\S]*?padding:\s*0/)
+    expect(settingsDialog).toMatch(/\.session-settings-dialog\s*\{[\s\S]*?gap:\s*0/)
     expect(settingsDialog).toMatch(/\.session-settings-dialog\s*\{[\s\S]*?border-radius:\s*0/)
     expect(settingsDialog).toMatch(
       /\.session-settings-dialog\s*\{[\s\S]*?border:\s*1px solid #a0a0a0/,
     )
     expect(settingsDialog).toMatch(/data-options-rules-density="capture-1to1"/)
-    expect(settingsDialog).toMatch(/\.settings-body\s*\{[\s\S]*?padding:\s*4px 6px/)
-    expect(settingsDialog).toMatch(/\.settings-body\s*\{[\s\S]*?border:\s*1px solid #a0a0a0/)
-    expect(settingsDialog).toMatch(/\.settings-body label\s*\{[\s\S]*?font-size:\s*11px/)
-    expect(settingsDialog).toMatch(/\.settings-tabs button\s*\{[\s\S]*?border:\s*1px solid #a0a0a0/)
-    expect(settingsDialog).toMatch(/h2\s*\{[\s\S]*?font-size:\s*12px/)
-    expect(settingsDialog).toMatch(/\.settings-tabs button\s*\{[\s\S]*?height:\s*18px/)
-    expect(settingsDialog).toMatch(/\.settings-body\s*\{[\s\S]*?gap:\s*4px/)
+    expect(settingsDialog).toMatch(/\.settings-body\s*\{[\s\S]*?padding:\s*16px 20px/)
+    expect(settingsDialog).toMatch(/\.settings-body label\s*\{[\s\S]*?font-size:\s*12px/)
+    expect(settingsDialog).toMatch(/\.settings-tabs button\s*\{[\s\S]*?min-height:\s*28px/)
     expect(settingsDialog).toMatch(
-      /\.settings-body input:not\(\[type='checkbox'\]\),\s*\.settings-body select\s*\{[\s\S]*?height:\s*20px/,
+      /\.settings-body input:not\(\[type='checkbox'\]\),\s*\.settings-body select\s*\{[\s\S]*?height:\s*26px/,
     )
-    expect(settingsDialog).toMatch(/\.settings-body textarea\s*\{[\s\S]*?padding:\s*2px 6px/)
-    expect(settingsDialog).toMatch(/\.settings-body textarea\s*\{[\s\S]*?border-radius:\s*0/)
-    expect(settingsDialog).toMatch(/footer button\s*\{[\s\S]*?height:\s*18px/)
-    expect(settingsDialog).not.toMatch(/box-shadow:\s*0 18px 44px/)
-    expect(settingsDialog).not.toMatch(/padding:\s*16px/)
+    expect(settingsDialog).toMatch(/footer button\s*\{[\s\S]*?height:\s*28px/)
+    expect(settingsDialog).not.toMatch(/min-height:\s*6px/)
   })
 
   it('keeps Hex Go To dialog chrome dense toward report-panel spacing', () => {
@@ -52,41 +45,35 @@ describe('session settings and hex goto chrome density', () => {
 })
 
 describe('options/rules dialog content depth', () => {
-  it('deepens Options content and Session Rules dialog beyond shell chrome', () => {
+  it('deepens Options content and Session Rules dialog toward HTML demo opts layout', () => {
     expect(settingsView).toMatch(/data-options-content-density="capture-1to1"/)
-    expect(settingsView).toMatch(/\.options-content\s*\{[\s\S]*?gap:\s*4px/)
+    expect(settingsView).toMatch(/\.options-content\s*\{[\s\S]*?gap:\s*10px/)
     expect(settingsView).toMatch(
-      /\.options-content :deep\(\[class='n-card__content'\]\)\s*\{[\s\S]*?padding:\s*4px 6px/,
+      /\.options-content :deep\(\[class='n-card__content'\]\)\s*\{[\s\S]*?padding:\s*4px 0 0/,
     )
     expect(settingsView).toMatch(
-      /\.options-content :deep\(\.n-checkbox\)\s*\{[\s\S]*?min-height:\s*18px/,
+      /\.options-content :deep\(\.n-checkbox\)\s*\{[\s\S]*?min-height:\s*22px/,
     )
-    expect(css).toMatch(/\.settings-view \.options-content\s*\{[\s\S]*?gap:\s*4px/)
+    expect(css).toMatch(/\.settings-view \.options-content\s*\{[\s\S]*?gap:\s*10px/)
+    expect(css).toMatch(/\.session-settings-dialog\s*\{[\s\S]*?border:\s*1px solid #a0a0a0/)
     expect(css).toMatch(
-      /\.settings-view \.options-content \[class='n-card__content'\]\s*\{[\s\S]*?padding:\s*4px 6px/,
+      /\.session-settings-dialog \.settings-body\s*\{[\s\S]*?padding:\s*16px 20px/,
     )
-    expect(css).toMatch(/\.session-settings-dialog\s*\{[\s\S]*?border:\s*1px solid #a0a0a0/)
-    expect(css).toMatch(/\.session-settings-dialog \.settings-body\s*\{[\s\S]*?padding:\s*4px 6px/)
     expect(css).toMatch(
-      /\.session-settings-dialog \.settings-body input:not\(\[type='checkbox'\]\)[\s\S]*?height:\s*20px/,
+      /\.session-settings-dialog \.settings-body input:not\(\[type='checkbox'\]\)[\s\S]*?height:\s*26px/,
     )
     expect(settingsDialog).not.toMatch(/min-height:\s*6px/)
   })
 })
 
 describe('session rules residual depth', () => {
-  it('deepens Session Rules dialog chrome beyond #342/#333 content band', () => {
+  it('keeps Session Rules dialog chrome on HTML demo selection colors', () => {
     expect(settingsDialog).toMatch(/data-rules-depth="capture-1to1-residual"/)
-    expect(settingsDialog).toMatch(/\.settings-tabs\s*\{[\s\S]*?background:\s*#f0f0f0/)
-    expect(settingsDialog).toMatch(/footer\s*\{[\s\S]*?border-top:\s*1px solid #c0c0c0/)
     expect(css).toMatch(
-      /\.session-settings-dialog\[data-rules-depth='capture-1to1-residual'\]\s*\{[\s\S]*?background:\s*#f0f0f0/,
+      /\.session-settings-dialog\[data-rules-depth='capture-1to1-residual'\] \.settings-tabs\s*\{[\s\S]*?background:\s*#f5f5f5/,
     )
     expect(css).toMatch(
-      /\.session-settings-dialog\[data-rules-depth='capture-1to1-residual'\] \.settings-body\s*\{[\s\S]*?gap:\s*2px/,
-    )
-    expect(css).toMatch(
-      /\.session-settings-dialog\[data-rules-depth='capture-1to1-residual'\] \.settings-tabs\s*\{[\s\S]*?gap:\s*2px/,
+      /\.session-settings-dialog\[data-rules-depth='capture-1to1-residual'\] \.settings-body\s*\{[\s\S]*?padding:\s*16px 20px/,
     )
     expect(settingsDialog).not.toMatch(/min-height:\s*6px/)
   })
@@ -95,41 +82,29 @@ describe('session rules residual depth', () => {
 describe('options footer residual', () => {
   const settingsView = readFileSync(resolve(root, 'src/views/SettingsView.vue'), 'utf8')
 
-  it('keeps Options OK/Cancel/Apply footer at capture scale', () => {
+  it('keeps Options OK/Cancel/Apply footer at demo button scale', () => {
     expect(settingsView).toMatch(/data-options-footer="capture-1to1-residual"/)
     expect(settingsView).toMatch(/data-testid="options-footer-ok"/)
     expect(settingsView).toMatch(/data-testid="options-footer-cancel"/)
     expect(settingsView).toMatch(/data-testid="options-footer-apply"/)
-    expect(settingsView).toMatch(/\.options-footer-btn\s*\{[\s\S]*?height:\s*18px/)
+    expect(settingsView).toMatch(/\.options-footer-btn\s*\{[\s\S]*?height:\s*28px/)
     expect(settingsDialog).toMatch(/data-testid="session-settings-ok"/)
-    expect(settingsDialog).toMatch(/footer button\s*\{[\s\S]*?height:\s*18px/)
+    expect(settingsDialog).toMatch(/footer button\s*\{[\s\S]*?height:\s*28px/)
   })
 })
 
 describe('session rules micro residual', () => {
-  it('closes Session Rules micro-drift vs Options/About sibling chrome', () => {
+  it('keeps Session Rules micro chrome on demo selection and footer buttons', () => {
     expect(settingsDialog).toMatch(/data-rules-micro="capture-1to1-residual"/)
-    expect(settingsDialog).toMatch(/header button\s*\{[\s\S]*?height:\s*18px/)
-    expect(settingsDialog).toMatch(/header\s*\{[\s\S]*?border-bottom:\s*1px solid #c0c0c0/)
+    expect(settingsDialog).toMatch(/header button\s*\{[\s\S]*?height:\s*28px/)
     expect(settingsDialog).toMatch(
-      /\.settings-tabs button\.active\s*\{[\s\S]*?background:\s*#c8e4ff/,
-    )
-    expect(settingsDialog).toMatch(/footer button\s*\{[\s\S]*?background:\s*#ffffff/)
-    expect(css).toMatch(
-      /\.session-settings-dialog\[data-rules-depth='capture-1to1-residual'\]\s*\{[\s\S]*?gap:\s*2px/,
+      /\.settings-tabs button\.active\s*\{[\s\S]*?background:\s*#cce8ff/,
     )
-    expect(css).toMatch(
-      /\.session-settings-dialog\[data-rules-depth='capture-1to1-residual'\] \.settings-body\s*\{[\s\S]*?padding:\s*2px 4px/,
+    expect(settingsDialog).toMatch(
+      /footer button\s*\{[\s\S]*?background:\s*#fafafa|footer button\s*\{[\s\S]*?background:\s*#ffffff/,
     )
-    expect(css).toMatch(/button\.active[\s\S]*?background:\s*#c8e4ff/)
-    expect(settingsDialog).not.toMatch(/min-height:\s*6px/)
-  })
-})
-
-describe('options footer border', () => {
-  it('matches capture options footer border #c0c0c0', () => {
     expect(css).toMatch(
-      /data-options-footer='capture-1to1-residual'\][\s\S]*?border-top:\s*1px solid #c0c0c0/,
+      /\.session-settings-dialog\[data-rules-depth='capture-1to1-residual'\] \.settings-tabs button\.active\s*\{[\s\S]*?background:\s*#cce8ff/,
     )
   })
 })
diff --git a/src/views/ClipboardCompareView.vue b/src/views/ClipboardCompareView.vue
index 6437ff5e..bd48bb75 100644
--- a/src/views/ClipboardCompareView.vue
+++ b/src/views/ClipboardCompareView.vue
@@ -406,7 +406,7 @@ watch(
         <section class="diff-pane">
           <p
             v-if="clipboardsAreIdentical"
-            class="empty"
+            class="empty empty-hint"
             data-testid="clipboard-identical-hint"
           >
             {{ $t('ui.clipboardIdenticalHint') }}
@@ -417,7 +417,7 @@ watch(
           />
           <div
             v-else-if="!error"
-            class="empty"
+            class="empty empty-hint"
             data-testid="clipboard-empty-hint"
           >
             {{ clipboardEmptyStateMessage }}
@@ -584,4 +584,18 @@ watch(
     grid-template-columns: 1fr;
   }
 }
+
+.empty.empty-hint {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  min-height: 120px;
+  padding: 24px;
+  background: #f9f9f9;
+  color: #666666;
+  font-size: 13px;
+  line-height: 1.6;
+  text-align: center;
+}
 </style>
diff --git a/src/views/FileFormatView.vue b/src/views/FileFormatView.vue
index 58eb4197..a8c49ac9 100644
--- a/src/views/FileFormatView.vue
+++ b/src/views/FileFormatView.vue
@@ -312,7 +312,10 @@ function setImportStatus(key: string, params: Record<string, string | number> =
 </script>
 
 <template>
-  <section class="file-format-view">
+  <section
+    class="file-format-view"
+    data-formats-density="html-demo"
+  >
     <header class="format-header">
       <div>
         <p class="eyebrow">{{ $t('ui.options') }}</p>
@@ -524,10 +527,12 @@ function setImportStatus(key: string, params: Record<string, string | number> =
 <style scoped>
 .file-format-view {
   display: grid;
-  gap: 4px;
+  grid-template-rows: auto minmax(0, 1fr) auto;
+  gap: 0;
   height: 100%;
-  padding: 2px 4px;
-  overflow: auto;
+  padding: 0;
+  overflow: hidden;
+  background: #ffffff;
 }
 
 .format-header {
@@ -589,19 +594,31 @@ h2 {
 
 .format-workspace {
   display: grid;
-  grid-template-columns: 280px minmax(0, 1fr);
-  gap: 4px;
-  min-height: 360px;
+  grid-template-columns: 220px minmax(0, 1fr);
+  gap: 0;
+  height: 100%;
+  min-height: 0;
 }
 
 .format-list-panel,
 .format-detail-panel,
 .format-io-panel {
   min-width: 0;
-  padding: 2px 4px;
-  border: 1px solid var(--app-border);
+  padding: 8px 0;
+  border: 0;
   border-radius: 0;
-  background: var(--app-surface);
+  background: #f5f5f5;
+}
+
+.format-detail-panel {
+  padding: 16px 20px;
+  overflow: auto;
+  background: #ffffff;
+}
+
+.format-list-panel {
+  overflow: auto;
+  border-right: 1px solid #c8c8c8;
 }
 
 .format-list-panel,
@@ -619,14 +636,15 @@ h2 {
 }
 
 button {
-  min-height: 18px;
-  padding: 0 6px;
-  border: 1px solid var(--app-border);
-  border-radius: 0;
-  background: var(--app-bg);
-  color: var(--app-text);
+  height: 28px;
+  min-height: 28px;
+  padding: 0 16px;
+  border: 1px solid #c8c8c8;
+  border-radius: 3px;
+  background: #fafafa;
+  color: #1a1a1a;
   font: inherit;
-  cursor: pointer;
+  cursor: default;
 }
 
 button:hover {
@@ -643,14 +661,20 @@ button:hover {
   justify-items: start;
   gap: 1px;
   width: 100%;
-  min-height: 22px;
-  padding: 1px 4px;
+  min-height: 28px;
+  padding: 6px 14px;
+  border: 0;
   text-align: left;
 }
 
+.format-row:hover {
+  background: #e8f4ff;
+}
+
 .format-row.active {
-  border-color: #2563eb;
-  background: rgb(37 99 235 / 0.1);
+  border-color: transparent;
+  background: #cce8ff;
+  font-weight: 600;
 }
 
 .format-row span {
@@ -705,12 +729,12 @@ textarea {
 
 input,
 select {
-  height: 20px;
+  height: 26px;
   padding: 0 4px;
 }
 
 textarea {
-  min-height: 64px;
+  min-height: 96px;
   padding: 2px 4px;
   resize: vertical;
   font-family: var(--font-mono);
diff --git a/src/views/RemoteProfileView.vue b/src/views/RemoteProfileView.vue
index 4a756d1b..a210741a 100644
--- a/src/views/RemoteProfileView.vue
+++ b/src/views/RemoteProfileView.vue
@@ -994,7 +994,7 @@ function credentialKindLabel(kind: CredentialReferenceKind): string {
   display: grid;
   gap: 4px;
   height: 100%;
-  padding: 2px 4px;
+  padding: 0;
   overflow: auto;
 }
 
@@ -1050,7 +1050,7 @@ h2 {
 
 .profile-workspace {
   display: grid;
-  grid-template-columns: 280px minmax(0, 1fr);
+  grid-template-columns: 220px minmax(0, 1fr);
   gap: 4px;
   min-height: 380px;
 }
@@ -1061,7 +1061,7 @@ h2 {
   align-content: start;
   gap: 4px;
   min-width: 0;
-  padding: 2px 4px;
+  padding: 8px 0;
   border: 1px solid var(--app-border);
   border-radius: 0;
   background: var(--app-surface);
@@ -1081,7 +1081,7 @@ h2 {
 }
 
 button {
-  min-height: 18px;
+  min-height: 28px;
   padding: 0 6px;
   border: 1px solid var(--app-border);
   border-radius: 0;
@@ -1118,14 +1118,14 @@ button:hover:not(:disabled) {
   justify-items: start;
   gap: 1px;
   width: 100%;
-  min-height: 22px;
-  padding: 1px 4px;
+  min-height: 28px;
+  padding: 6px 14px;
   text-align: left;
 }
 
 .profile-row.active {
-  border-color: #2563eb;
-  background: rgb(37 99 235 / 0.1);
+  border-color: transparent;
+  background: #cce8ff;
 }
 
 .profile-row span {
@@ -1187,7 +1187,7 @@ input,
 select {
   width: 100%;
   min-width: 0;
-  height: 20px;
+  height: 26px;
   padding: 0 4px;
   border: 1px solid var(--app-border);
   border-radius: 0;
diff --git a/src/views/SettingsView.vue b/src/views/SettingsView.vue
index d89f79e6..7c94fd31 100644
--- a/src/views/SettingsView.vue
+++ b/src/views/SettingsView.vue
@@ -1468,7 +1468,7 @@ function parseShortcutText(value: string): string[] {
   >
     <section
       class="settings-view"
-      data-options-density="capture-1to1"
+      data-options-density="html-demo"
     >
       <nav
         class="options-section-nav options-section-tree"
@@ -3717,35 +3717,39 @@ function parseShortcutText(value: string): string[] {
 <style scoped>
 .settings-view {
   display: grid;
-  grid-template-columns: 176px minmax(0, 1fr);
-  align-content: start;
-  align-items: start;
-  gap: 6px;
+  grid-template-columns: 220px minmax(0, 1fr);
+  align-content: stretch;
+  align-items: stretch;
+  gap: 0;
   height: 100%;
-  padding: 4px 6px;
-  overflow: auto;
-  font-size: 11px;
-  line-height: 16px;
+  padding: 0;
+  overflow: hidden;
+  background: #ffffff;
+  font-size: 12px;
+  line-height: 1.45;
 }
 
 .options-content {
   display: grid;
-  gap: 4px;
+  gap: 10px;
   align-content: start;
   min-width: 0;
-  padding: 0;
+  height: 100%;
+  padding: 16px 20px;
+  overflow: auto;
+  background: #ffffff;
 }
 
 .options-content :deep([class='n-card__content']) {
   display: grid;
-  gap: 4px;
-  padding: 4px 6px;
+  gap: 10px;
+  padding: 4px 0 0;
 }
 
 .options-content :deep(.n-checkbox) {
-  min-height: 18px;
-  font-size: 11px;
-  line-height: 16px;
+  min-height: 22px;
+  font-size: 12px;
+  line-height: 1.45;
 }
 
 .options-content :deep(.n-form-item) {
@@ -3766,13 +3770,15 @@ function parseShortcutText(value: string): string[] {
 
 .options-section-nav {
   display: grid;
-  gap: 4px;
-  max-height: calc(100vh - 120px);
-  padding: 2px 4px;
+  gap: 0;
+  height: 100%;
+  max-height: none;
+  padding: 8px 0;
   overflow: auto;
-  border: 1px solid #a0a0a0;
+  border: 0;
+  border-right: 1px solid #c8c8c8;
   border-radius: 0;
-  background: var(--app-surface);
+  background: #f5f5f5;
   align-content: start;
 }
 
@@ -3798,11 +3804,11 @@ function parseShortcutText(value: string): string[] {
 .options-tree-group-label {
   min-width: 0;
   margin: 0;
-  padding: 4px 6px 2px;
-  color: var(--app-text-muted);
+  padding: 10px 14px 4px;
+  color: #666666;
   font-size: 11px;
-  font-weight: 700;
-  line-height: 16px;
+  font-weight: 600;
+  line-height: 1.2;
   text-transform: uppercase;
 }
 
@@ -3855,25 +3861,26 @@ function parseShortcutText(value: string): string[] {
 .options-section-button {
   box-sizing: border-box;
   width: 100%;
-  min-height: 18px;
-  padding: 2px 6px;
+  min-height: 28px;
+  padding: 6px 14px;
   border: 0;
   border-radius: 0;
   background: transparent;
-  color: var(--app-text);
-  font-size: 11px;
-  line-height: 16px;
+  color: #1a1a1a;
+  font-size: 12px;
+  line-height: 1.2;
   text-align: left;
-  cursor: pointer;
+  cursor: default;
 }
 
 .options-section-button:hover {
-  background: #dceeff;
+  background: #e8f4ff;
 }
 
 .options-section-button.active {
-  background: #c8e4ff;
-  box-shadow: inset 0 0 0 1px #89bdea;
+  background: #cce8ff;
+  font-weight: 600;
+  box-shadow: none;
 }
 
 .auto-save-limit-input,
@@ -3908,8 +3915,8 @@ function parseShortcutText(value: string): string[] {
 .stack-row input,
 .stack-row select {
   min-width: 0;
-  height: 20px;
-  min-height: 20px;
+  height: 26px;
+  min-height: 26px;
   padding: 0 6px;
   border: 1px solid #a0a0a0;
   border-radius: 0;
@@ -4215,14 +4222,14 @@ h1 {
 
 .options-footer-btn {
   min-width: 72px;
-  height: 18px;
-  min-height: 18px;
-  padding: 0 10px;
-  border: 1px solid #a0a0a0;
-  border-radius: 0;
-  background: #ffffff;
-  color: #111111;
-  font-size: 11px;
+  height: 28px;
+  min-height: 28px;
+  padding: 0 16px;
+  border: 1px solid #c8c8c8;
+  border-radius: 3px;
+  background: #fafafa;
+  color: #1a1a1a;
+  font-size: 12px;
   line-height: 16px;
   cursor: default;
 }
diff --git a/src/views/reports/ReportsScriptView.vue b/src/views/reports/ReportsScriptView.vue
index 7436de23..2d39388f 100644
--- a/src/views/reports/ReportsScriptView.vue
+++ b/src/views/reports/ReportsScriptView.vue
@@ -490,7 +490,10 @@ function fillFromLastCompare(): void {
       </WorkbenchToolbar>
     </template>
 
-    <section class="reports-script-view">
+    <section
+      class="reports-script-view"
+      data-scripts-density="html-demo"
+    >
       <section class="report-panel">
         <header class="split-pane-header active">
           <strong>{{ $t('ui.recentExports') }}</strong>
@@ -756,22 +759,29 @@ function fillFromLastCompare(): void {
 <style scoped>
 .reports-script-view {
   display: grid;
-  grid-template-rows: minmax(0, 1fr) minmax(220px, 0.7fr);
-  gap: 4px;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: minmax(0, 1fr);
+  gap: 0;
   height: 100%;
   min-height: 0;
-  padding: 2px 4px;
+  padding: 0;
   overflow: hidden;
+  background: #ffffff;
 }
 
 .report-panel,
 .script-panel {
-  display: grid;
-  grid-template-rows: 22px auto minmax(0, 1fr) auto;
+  display: flex;
+  flex-direction: column;
   min-height: 0;
   overflow: hidden;
-  border: 1px solid var(--app-border);
-  background: var(--app-canvas);
+  border: 0;
+  border-right: 1px solid #c8c8c8;
+  background: #ffffff;
+}
+
+.script-panel {
+  border-right: 0;
 }
 
 .report-export-form {
@@ -794,7 +804,7 @@ function fillFromLastCompare(): void {
 
 .report-export-form input,
 .report-export-form select {
-  height: 20px;
+  height: 26px;
   padding: 0 4px;
   border: 1px solid var(--app-border);
   border-radius: 2px;

From d8f814bc7013364b763e0fa349d24e7ec846e95a Mon Sep 17 00:00:00 2001
From: Yukon <126093594+baseGame@users.noreply.github.com>
Date: Wed, 14 Oct 2026 16:09:05 +0800
Subject: [PATCH 4/9] Simplify session chrome toward the HTML demo layout

Hide non-demo docks and headers by default, and keep Rules/Filters
panels off until opened from the session toolbar.
---
 src/app/folderDisplayFilters.test.ts      |   2 +-
 src/app/folderDisplayFilters.ts           |   4 +-
 src/styles/htmlDemoSimplifyChrome.test.ts |  33 +++++
 src/styles/main.css                       | 150 ++++++++++++++++++++++
 src/views/FolderCompareView.vue           |   2 +-
 src/views/TextCompareView.vue             |   2 +-
 6 files changed, 188 insertions(+), 5 deletions(-)
 create mode 100644 src/styles/htmlDemoSimplifyChrome.test.ts

diff --git a/src/app/folderDisplayFilters.test.ts b/src/app/folderDisplayFilters.test.ts
index d153a3ea..c034f4ae 100644
--- a/src/app/folderDisplayFilters.test.ts
+++ b/src/app/folderDisplayFilters.test.ts
@@ -51,7 +51,7 @@ describe('folderDisplayFilters', () => {
       showSuppressed: false,
       filesOnly: false,
       alwaysShowFolders: true,
-      showFiltersPanel: true,
+      showFiltersPanel: false,
       showPeekPanel: false,
     })
   })
diff --git a/src/app/folderDisplayFilters.ts b/src/app/folderDisplayFilters.ts
index 5ef17d64..1c011239 100644
--- a/src/app/folderDisplayFilters.ts
+++ b/src/app/folderDisplayFilters.ts
@@ -22,7 +22,7 @@ export function defaultFolderDisplayFilters(): FolderDisplayFiltersState {
     showSuppressed: false,
     filesOnly: false,
     alwaysShowFolders: true,
-    showFiltersPanel: true,
+    showFiltersPanel: false,
     showPeekPanel: false,
   }
 }
@@ -63,7 +63,7 @@ export function loadFolderDisplayFilters(
       showSuppressed: Boolean(parsed.showSuppressed),
       filesOnly: Boolean(parsed.filesOnly),
       alwaysShowFolders: parsed.alwaysShowFolders !== false,
-      showFiltersPanel: parsed.showFiltersPanel !== false,
+      showFiltersPanel: parsed.showFiltersPanel === true,
       showPeekPanel: Boolean(parsed.showPeekPanel),
     }
   } catch {
diff --git a/src/styles/htmlDemoSimplifyChrome.test.ts b/src/styles/htmlDemoSimplifyChrome.test.ts
new file mode 100644
index 00000000..ce6e750d
--- /dev/null
+++ b/src/styles/htmlDemoSimplifyChrome.test.ts
@@ -0,0 +1,33 @@
+import { readFileSync } from 'node:fs'
+import { dirname, resolve } from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { describe, expect, it } from 'vitest'
+
+const root = resolve(dirname(fileURLToPath(import.meta.url)), '../..')
+const css = readFileSync(resolve(root, 'src/styles/main.css'), 'utf8')
+const folderView = readFileSync(resolve(root, 'src/views/FolderCompareView.vue'), 'utf8')
+const textView = readFileSync(resolve(root, 'src/views/TextCompareView.vue'), 'utf8')
+const filters = readFileSync(resolve(root, 'src/app/folderDisplayFilters.ts'), 'utf8')
+
+describe('HTML demo simplify chrome', () => {
+  it('defaults Rules and Filters panels off to match demo hierarchy', () => {
+    expect(folderView).toMatch(/const showFolderRules = ref\(false\)/)
+    expect(textView).toMatch(/const showTextRules = ref\(false\)/)
+    expect(filters).toMatch(/showFiltersPanel:\s*false/)
+    expect(filters).toMatch(/showFiltersPanel:\s*parsed\.showFiltersPanel === true/)
+  })
+
+  it('tucks non-demo action docks and specialty headers via CSS', () => {
+    expect(css).toMatch(/\.folder-actions[\s\S]*?display:\s*none\s*!important/)
+    expect(css).toMatch(/\.workbench-toolbar\.compare-toolbar[\s\S]*?display:\s*none\s*!important/)
+    expect(css).toMatch(/\.hex-header[\s\S]*?display:\s*none\s*!important/)
+    expect(css).toMatch(/\.picture-header[\s\S]*?display:\s*none\s*!important/)
+    expect(css).toMatch(/\.file-format-view \.format-io-panel[\s\S]*?display:\s*none\s*!important/)
+    expect(css).toMatch(/\.options-hint[\s\S]*?display:\s*none\s*!important/)
+    expect(css).toMatch(
+      /\.folder-compare-view \.path-meta-footer[\s\S]*?display:\s*none\s*!important/,
+    )
+    expect(css).toMatch(/\.merge-header[\s\S]*?display:\s*none\s*!important/)
+    expect(css).toMatch(/\.hex-report-panel[\s\S]*?display:\s*none\s*!important/)
+  })
+})
diff --git a/src/styles/main.css b/src/styles/main.css
index 89696844..8841ab0f 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -5292,4 +5292,154 @@ html[data-show-path-bars='0'] .path-pair-bar {
   font-size: 12px !important;
   font-weight: 600 !important;
 }
+
+/* ---- HTML demo simplify: tuck non-demo chrome (handlers stay in DOM) ---- */
+
+/* Extra action docks / hints not in the HTML demo chrome */
+.folder-actions,
+.folder-root-summary,
+.archive-path-hint,
+.folder-compare-view .folder-toolbar > button[data-testid='open-folder-session-settings'],
+.options-hint,
+.options-cluster-hint,
+.format-header .eyebrow,
+.profile-header .eyebrow,
+.file-format-view .format-io-panel,
+.workbench-toolbar.compare-toolbar,
+.text-compare-view .compare-toolbar,
+.folder-merge-view .folder-actions,
+.folder-status-legend-slot,
+.hex-header,
+.picture-header,
+.media-header,
+.registry-header,
+.version-header,
+.text-edit-view > header,
+.text-edit-view .eyebrow,
+.hex-report-panel,
+.picture-report-panel,
+.media-report-panel,
+.registry-report-panel,
+.version-report-panel,
+.table-report-actions,
+.hex-summary,
+.hex-run-diff,
+button[data-testid='open-hex-session-settings'],
+button[data-testid='open-picture-session-settings'],
+button[data-testid='open-table-session-settings'],
+button[data-testid='open-media-session-settings'],
+button[data-testid='open-registry-session-settings'],
+button[data-testid='open-version-session-settings'],
+button[data-testid='open-text-session-settings'] {
+  display: none !important;
+}
+
+/* Specialty path meta strips — demo dual-paths are bare */
+.hex-path-meta-strip,
+.picture-compare-view .path-meta-footer,
+.media-compare-view .path-meta-footer,
+.registry-compare-view .path-meta-footer,
+.version-compare-view .path-meta-footer,
+.table-compare-view .path-meta-footer {
+  display: none !important;
+}
+
+/* Keep path/profile pickers usable when profiles exist — just denser */
+.remote-profile-pair {
+  gap: 4px !important;
+  min-height: 24px !important;
+  padding: 2px 4px !important;
+}
+
+/* Patch keeps Parse/Apply (demo sync-ops), but single dense row */
+.workbench-toolbar.patch-toolbar {
+  min-height: 28px !important;
+  padding: 2px 6px !important;
+}
+
+/* Path bars: demo is bare inputs + browse — drop side labels */
+.folder-toolbar .path-pair > label > span:first-child,
+.folder-merge-view .path-pair > label > span:first-child,
+.folder-sync-view .path-field-row > span:first-of-type {
+  display: none !important;
+}
+
+/* Folder path meta under inputs — demo folder has none (text uses meta-bar) */
+.folder-compare-view .path-meta-footer,
+.folder-merge-view .path-meta-footer,
+.folder-sync-view .path-meta-footer {
+  display: none !important;
+}
+
+/* Formats / Profiles: drop marketing header; keep list+detail */
+.file-format-view .format-header,
+.remote-profile-view .profile-header {
+  display: none !important;
+}
+
+/* Options: denser body, no hint stack */
+.settings-view .options-content {
+  gap: 8px !important;
+}
+
+.settings-view .options-content .n-card {
+  box-shadow: none !important;
+  border-radius: 0 !important;
+}
+
+/* Merge / Sync: drop page headers; keep path/ops (demo sync-ops / dual-paths) */
+.merge-header,
+.merge-summary {
+  display: none !important;
+}
+
+.merge-actions-bar .merge-actions button[data-testid^='export-'],
+.sync-setting-actions button[data-testid^='export-'],
+.sync-setting-actions button[data-testid='folder-sync-apply-to-all'],
+.sync-setting-actions button[data-testid='folder-sync-skip-remaining'] {
+  display: none !important;
+}
+
+.sync-settings > label > span {
+  display: none !important;
+}
+
+/* Session log: demo is a thin strip, not a tool dock */
+.folder-session-log-gutter {
+  display: none !important;
+}
+
+.folder-session-log {
+  min-height: 22px !important;
+  max-height: 48px !important;
+}
+
+/* Empty states: one quiet line like demo .empty-hint */
+.empty-hint,
+.session-empty-hint,
+.compare-empty-hint,
+.folder-empty-state,
+.text-empty-state,
+.folder-sync-empty-state,
+.clipboard-compare-view .empty.empty-hint {
+  min-height: 80px !important;
+  padding: 16px !important;
+  background: #f9f9f9 !important;
+  color: #666666 !important;
+  font-size: 12px !important;
+}
+
+/* Home: quieter cards / less stacked chrome */
+.home-view .session-edit-panel,
+.home-view .session-save-panel {
+  border-radius: 0 !important;
+  box-shadow: none !important;
+}
+
+/* Sync/Merge action rows: keep essential ops, flatten */
+.folder-sync-header,
+.folder-merge-view header {
+  gap: 4px !important;
+}
+
 /* stylelint-enable no-duplicate-selectors */
diff --git a/src/views/FolderCompareView.vue b/src/views/FolderCompareView.vue
index b368d1cd..bc122398 100644
--- a/src/views/FolderCompareView.vue
+++ b/src/views/FolderCompareView.vue
@@ -329,7 +329,7 @@ const flatStructure = ref(false)
 const newerViewPreset = ref<FolderNewerViewPreset | 'none'>('none')
 const loadTimeSeconds = ref<number | null>(null)
 const minorOnly = ref(false)
-const showFolderRules = ref(true)
+const showFolderRules = ref(false)
 const showFolderFilters = ref(initialDisplayFilters.showFiltersPanel)
 const showFolderSelect = ref(false)
 const checkedRowIds = ref<Set<string>>(new Set())
diff --git a/src/views/TextCompareView.vue b/src/views/TextCompareView.vue
index 435009aa..10198259 100644
--- a/src/views/TextCompareView.vue
+++ b/src/views/TextCompareView.vue
@@ -68,7 +68,7 @@ const ignoreWhitespace = ref(initialTextSessionOptions.ignoreWhitespace)
 const ignoreCase = ref(initialTextSessionOptions.ignoreCase)
 const ignoreLineEndings = ref(initialTextSessionOptions.ignoreLineEndings)
 const ignoreRegexInput = ref(initialTextSessionOptions.ignoreRegexes.join(', '))
-const showTextRules = ref(true)
+const showTextRules = ref(false)
 const showContextPanel = ref(false)
 const goToMenuOpen = ref(false)
 const goToLineInput = ref('1')

From f88c4f64d66ce6741181ecfffe37a999b983ebc2 Mon Sep 17 00:00:00 2001
From: Yukon <126093594+baseGame@users.noreply.github.com>
Date: Wed, 14 Oct 2026 16:21:56 +0800
Subject: [PATCH 5/9] Fix Folder/Text compare tests for default-off Rules
 panels

Align panel visibility expectations with the simplified chrome defaults.
---
 src/views/FolderCompareView.test.ts | 20 ++++++++++----------
 src/views/TextCompareView.test.ts   | 16 ++++++++--------
 2 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/src/views/FolderCompareView.test.ts b/src/views/FolderCompareView.test.ts
index baaef028..960eea42 100644
--- a/src/views/FolderCompareView.test.ts
+++ b/src/views/FolderCompareView.test.ts
@@ -510,7 +510,7 @@ describe('FolderCompareView', () => {
     expect(wrapper.find('[data-testid="folder-filter-strip-peek"]').exists()).toBe(true)
     expect(
       wrapper.find('[data-testid="folder-display-filters"]').attributes('style') ?? '',
-    ).not.toContain('display: none')
+    ).toContain('display: none')
     expect(strip.text()).toContain('Filters')
     expect((pattern.element as HTMLInputElement).value).toBe('*.*')
 
@@ -573,7 +573,7 @@ describe('FolderCompareView', () => {
 
     expect(
       wrapper.find('[data-testid="folder-display-filters"]').attributes('style') ?? '',
-    ).not.toContain('display: none')
+    ).toContain('display: none')
     expect(wrapper.find('[data-testid="folder-peek-panel"]').attributes('style') ?? '').toContain(
       'display: none',
     )
@@ -581,13 +581,13 @@ describe('FolderCompareView', () => {
     await wrapper.find('[data-testid="folder-filter-strip-filters"]').trigger('click')
     expect(
       wrapper.find('[data-testid="folder-display-filters"]').attributes('style') ?? '',
-    ).toContain('display: none')
+    ).not.toContain('display: none')
     expect(wrapper.find('[data-testid="folder-filter-strip"]').exists()).toBe(true)
 
     await wrapper.find('[data-testid="folder-filter-strip-filters"]').trigger('click')
     expect(
       wrapper.find('[data-testid="folder-display-filters"]').attributes('style') ?? '',
-    ).not.toContain('display: none')
+    ).toContain('display: none')
 
     await wrapper.find('[data-testid="folder-filter-strip-peek"]').trigger('click')
     expect(
@@ -602,31 +602,31 @@ describe('FolderCompareView', () => {
   it('toggles rules and filters panels from the session toolbar', async () => {
     const wrapper = mountFolderCompareView()
 
-    expect(wrapper.find('[data-testid="folder-criteria"]').attributes('style') ?? '').not.toContain(
+    expect(wrapper.find('[data-testid="folder-criteria"]').attributes('style') ?? '').toContain(
       'display: none',
     )
     expect(
       wrapper.find('[data-testid="folder-display-filters"]').attributes('style') ?? '',
-    ).not.toContain('display: none')
+    ).toContain('display: none')
 
     await wrapper.find('[data-testid="folder-session-toolbar-rules"]').trigger('click')
-    expect(wrapper.find('[data-testid="folder-criteria"]').attributes('style') ?? '').toContain(
+    expect(wrapper.find('[data-testid="folder-criteria"]').attributes('style') ?? '').not.toContain(
       'display: none',
     )
 
     await wrapper.find('[data-testid="folder-session-toolbar-filters"]').trigger('click')
     expect(
       wrapper.find('[data-testid="folder-display-filters"]').attributes('style') ?? '',
-    ).toContain('display: none')
+    ).not.toContain('display: none')
 
     await wrapper.find('[data-testid="folder-session-toolbar-rules"]').trigger('click')
     await wrapper.find('[data-testid="folder-session-toolbar-filters"]').trigger('click')
-    expect(wrapper.find('[data-testid="folder-criteria"]').attributes('style') ?? '').not.toContain(
+    expect(wrapper.find('[data-testid="folder-criteria"]').attributes('style') ?? '').toContain(
       'display: none',
     )
     expect(
       wrapper.find('[data-testid="folder-display-filters"]').attributes('style') ?? '',
-    ).not.toContain('display: none')
+    ).toContain('display: none')
   })
 
   it('filters the folder tree to files only from the session toolbar', async () => {
diff --git a/src/views/TextCompareView.test.ts b/src/views/TextCompareView.test.ts
index 5551458b..6bfbfc79 100644
--- a/src/views/TextCompareView.test.ts
+++ b/src/views/TextCompareView.test.ts
@@ -176,7 +176,7 @@ describe('TextCompareView', () => {
     )
     expect(
       wrapper.find('[data-testid="text-session-toolbar-rules"]').attributes('data-active'),
-    ).toBe('true')
+    ).toBe('false')
     expect(
       wrapper.find('[data-testid="text-session-toolbar-bar"]').attributes('data-large-buttons'),
     ).toBe('true')
@@ -204,13 +204,6 @@ describe('TextCompareView', () => {
   it('toggles the text rules panel from the session toolbar', async () => {
     const wrapper = mountTextCompareView()
 
-    expect(
-      wrapper.find('[data-testid="text-rules-panel"]').attributes('style') ?? '',
-    ).not.toContain('display: none')
-    expect(
-      wrapper.find('[data-testid="text-session-toolbar-rules"]').attributes('data-active'),
-    ).toBe('true')
-    await wrapper.find('[data-testid="text-session-toolbar-rules"]').trigger('click')
     expect(wrapper.find('[data-testid="text-rules-panel"]').attributes('style') ?? '').toContain(
       'display: none',
     )
@@ -221,6 +214,13 @@ describe('TextCompareView', () => {
     expect(
       wrapper.find('[data-testid="text-rules-panel"]').attributes('style') ?? '',
     ).not.toContain('display: none')
+    expect(
+      wrapper.find('[data-testid="text-session-toolbar-rules"]').attributes('data-active'),
+    ).toBe('true')
+    await wrapper.find('[data-testid="text-session-toolbar-rules"]').trigger('click')
+    expect(wrapper.find('[data-testid="text-rules-panel"]').attributes('style') ?? '').toContain(
+      'display: none',
+    )
   })
 
   it('opens context chrome and adjusts surrounding lines from the session toolbar', async () => {

From 07d5e7dc13123daf926f45229a2e0d738c6f1d75 Mon Sep 17 00:00:00 2001
From: Yukon <126093594+baseGame@users.noreply.github.com>
Date: Wed, 14 Oct 2026 16:23:19 +0800
Subject: [PATCH 6/9] Bump version to 1.3.2

Prepare the release cut with package, Tauri, and workspace crate versions.
---
 package.json              |  2 +-
 src-tauri/Cargo.lock      | 64 +++++++++++++++++++--------------------
 src-tauri/Cargo.toml      |  2 +-
 src-tauri/tauri.conf.json |  2 +-
 4 files changed, 35 insertions(+), 35 deletions(-)

diff --git a/package.json b/package.json
index 4fce4e78..e07e2d12 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "open-diff",
-  "version": "1.3.1",
+  "version": "1.3.2",
   "private": true,
   "license": "Apache-2.0",
   "repository": {
diff --git a/src-tauri/Cargo.lock b/src-tauri/Cargo.lock
index 7b32808e..2de85cb3 100644
--- a/src-tauri/Cargo.lock
+++ b/src-tauri/Cargo.lock
@@ -70,7 +70,7 @@ dependencies = [
 
 [[package]]
 name = "archive-core"
-version = "1.3.1"
+version = "1.3.2"
 dependencies = [
  "flate2",
  "rars",
@@ -596,7 +596,7 @@ dependencies = [
 
 [[package]]
 name = "cli-core"
-version = "1.3.1"
+version = "1.3.2"
 dependencies = [
  "diff-core",
  "file-core",
@@ -612,7 +612,7 @@ dependencies = [
 
 [[package]]
 name = "clipboard-core"
-version = "1.3.1"
+version = "1.3.2"
 dependencies = [
  "serde",
  "shared-types",
@@ -936,7 +936,7 @@ dependencies = [
 
 [[package]]
 name = "diff-core"
-version = "1.3.1"
+version = "1.3.2"
 dependencies = [
  "format-core",
  "regex",
@@ -1044,7 +1044,7 @@ dependencies = [
 
 [[package]]
 name = "document-core"
-version = "1.3.1"
+version = "1.3.2"
 dependencies = [
  "format-core",
  "logging-core",
@@ -1264,7 +1264,7 @@ dependencies = [
 
 [[package]]
 name = "file-core"
-version = "1.3.1"
+version = "1.3.2"
 dependencies = [
  "encoding_rs",
  "libc",
@@ -1307,7 +1307,7 @@ checksum = "3f9eec918d3f24069decb9af1554cad7c880e2da24a9afd88aca000531ab82c1"
 
 [[package]]
 name = "folder-core"
-version = "1.3.1"
+version = "1.3.2"
 dependencies = [
  "diff-core",
  "job-core",
@@ -1318,7 +1318,7 @@ dependencies = [
 
 [[package]]
 name = "folder-merge-core"
-version = "1.3.1"
+version = "1.3.2"
 dependencies = [
  "serde",
 ]
@@ -1382,7 +1382,7 @@ dependencies = [
 
 [[package]]
 name = "format-core"
-version = "1.3.1"
+version = "1.3.2"
 dependencies = [
  "serde",
 ]
@@ -1802,7 +1802,7 @@ checksum = "7f24254aa9a54b5c858eaee2f5bccdb46aaf0e486a595ed5fd8f86ba55232a70"
 
 [[package]]
 name = "hex-core"
-version = "1.3.1"
+version = "1.3.2"
 dependencies = [
  "serde",
  "vfs-core",
@@ -2088,7 +2088,7 @@ dependencies = [
 
 [[package]]
 name = "image-core"
-version = "1.3.1"
+version = "1.3.2"
 dependencies = [
  "image",
  "serde",
@@ -2226,7 +2226,7 @@ dependencies = [
 
 [[package]]
 name = "job-core"
-version = "1.3.1"
+version = "1.3.2"
 dependencies = [
  "serde",
 ]
@@ -2411,7 +2411,7 @@ checksum = "0ceec5bc11778974d1bcb055b18002eba7f4b3518b6a0081b3af5f21666da9ad"
 
 [[package]]
 name = "logging-core"
-version = "1.3.1"
+version = "1.3.2"
 dependencies = [
  "serde",
  "serde_json",
@@ -2436,7 +2436,7 @@ dependencies = [
 
 [[package]]
 name = "media-core"
-version = "1.3.1"
+version = "1.3.2"
 dependencies = [
  "serde",
 ]
@@ -2458,7 +2458,7 @@ dependencies = [
 
 [[package]]
 name = "merge-core"
-version = "1.3.1"
+version = "1.3.2"
 dependencies = [
  "serde",
 ]
@@ -2808,7 +2808,7 @@ checksum = "9f7c3e4beb33f85d45ae3e3a1792185706c8e16d043238c593331cc7cd313b50"
 
 [[package]]
 name = "open-diff-app"
-version = "1.3.1"
+version = "1.3.2"
 dependencies = [
  "archive-core",
  "cli-core",
@@ -2976,7 +2976,7 @@ checksum = "9b4f627cb1b25917193a259e49bdad08f671f8d9708acfd5fe0a8c1455d87220"
 
 [[package]]
 name = "performance-core"
-version = "1.3.1"
+version = "1.3.2"
 
 [[package]]
 name = "phf"
@@ -3095,7 +3095,7 @@ dependencies = [
 
 [[package]]
 name = "policy-core"
-version = "1.3.1"
+version = "1.3.2"
 dependencies = [
  "serde",
  "serde_json",
@@ -3413,7 +3413,7 @@ checksum = "349e79c5a22cd52d15fe4d364428b1c1040a6b2025a763c59f645a955ceae1ef"
 
 [[package]]
 name = "registry-core"
-version = "1.3.1"
+version = "1.3.2"
 dependencies = [
  "regf-rs",
  "serde",
@@ -3422,7 +3422,7 @@ dependencies = [
 
 [[package]]
 name = "remote-core"
-version = "1.3.1"
+version = "1.3.2"
 dependencies = [
  "hmac 0.12.1",
  "logging-core",
@@ -3436,7 +3436,7 @@ dependencies = [
 
 [[package]]
 name = "report-core"
-version = "1.3.1"
+version = "1.3.2"
 dependencies = [
  "logging-core",
  "serde",
@@ -3676,7 +3676,7 @@ checksum = "94143f37725109f92c262ed2cf5e59bce7498c01bcc1502d7b9afe439a4e9f49"
 
 [[package]]
 name = "script-core"
-version = "1.3.1"
+version = "1.3.2"
 dependencies = [
  "archive-core",
  "diff-core",
@@ -3908,7 +3908,7 @@ dependencies = [
 
 [[package]]
 name = "session-core"
-version = "1.3.1"
+version = "1.3.2"
 dependencies = [
  "serde",
  "serde_json",
@@ -3916,7 +3916,7 @@ dependencies = [
 
 [[package]]
 name = "settings-core"
-version = "1.3.1"
+version = "1.3.2"
 dependencies = [
  "format-core",
  "remote-core",
@@ -3972,7 +3972,7 @@ dependencies = [
 
 [[package]]
 name = "shared-types"
-version = "1.3.1"
+version = "1.3.2"
 dependencies = [
  "serde",
  "serde_json",
@@ -3980,7 +3980,7 @@ dependencies = [
 
 [[package]]
 name = "shell-core"
-version = "1.3.1"
+version = "1.3.2"
 
 [[package]]
 name = "shlex"
@@ -4024,7 +4024,7 @@ checksum = "8ed6a63f02c8539c91a8685a86f4099661ba3da017932f6ebbea6de3f0fa7c90"
 
 [[package]]
 name = "snapshot-core"
-version = "1.3.1"
+version = "1.3.2"
 dependencies = [
  "serde",
  "serde_json",
@@ -4201,7 +4201,7 @@ dependencies = [
 
 [[package]]
 name = "sync-core"
-version = "1.3.1"
+version = "1.3.2"
 dependencies = [
  "folder-core",
  "logging-core",
@@ -4244,7 +4244,7 @@ dependencies = [
 
 [[package]]
 name = "table-core"
-version = "1.3.1"
+version = "1.3.2"
 dependencies = [
  "calamine",
  "rust_xlsxwriter",
@@ -5003,7 +5003,7 @@ checksum = "8ecb6da28b8a351d773b68d5825ac39017e680750f980f3a1a85cd8dd28a47c1"
 
 [[package]]
 name = "update-core"
-version = "1.3.1"
+version = "1.3.2"
 dependencies = [
  "policy-core",
  "serde",
@@ -5094,7 +5094,7 @@ checksum = "03c2856837ef78f57382f06b2b8563a2f512f7185d732608fd9176cb3b8edf0e"
 
 [[package]]
 name = "version-core"
-version = "1.3.1"
+version = "1.3.2"
 dependencies = [
  "serde",
 ]
@@ -5107,7 +5107,7 @@ checksum = "0b928f33d975fc6ad9f86c8f283853ad26bdd5b10b7f1542aa2fa15e2289105a"
 
 [[package]]
 name = "vfs-core"
-version = "1.3.1"
+version = "1.3.2"
 dependencies = [
  "serde",
 ]
diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml
index c01fc84b..5fe97d1d 100644
--- a/src-tauri/Cargo.toml
+++ b/src-tauri/Cargo.toml
@@ -36,7 +36,7 @@ members = [
 resolver = "2"
 
 [workspace.package]
-version = "1.3.1"
+version = "1.3.2"
 edition = "2021"
 authors = ["Open Diff Contributors"]
 license = "Apache-2.0"
diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
index 97dcb0ed..ba0a65d5 100644
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -1,7 +1,7 @@
 {
   "$schema": "https://schema.tauri.app/config/2",
   "productName": "OpenDiff",
-  "version": "1.3.1",
+  "version": "1.3.2",
   "identifier": "io.github.kygo8.open-diff",
   "build": {
     "beforeDevCommand": "corepack pnpm dev",

From db1f5d41e17bb08892031db494412c8c1e288ef6 Mon Sep 17 00:00:00 2001
From: Yukon <126093594+baseGame@users.noreply.github.com>
Date: Wed, 14 Oct 2026 16:32:59 +0800
Subject: [PATCH 7/9] Align macOS bundleVersion with 1.3.2

Keep packaging metadata in sync with the product version bump.
---
 src-tauri/tauri.macos.conf.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src-tauri/tauri.macos.conf.json b/src-tauri/tauri.macos.conf.json
index 9d8cd4cf..efe3195a 100644
--- a/src-tauri/tauri.macos.conf.json
+++ b/src-tauri/tauri.macos.conf.json
@@ -5,7 +5,7 @@
     "icon": ["icons/icon.icns"],
     "macOS": {
       "bundleName": "OpenDiff",
-      "bundleVersion": "1.3.1",
+      "bundleVersion": "1.3.2",
       "minimumSystemVersion": "11.0",
       "hardenedRuntime": true,
       "exceptionDomain": "github.com",

From 8f9de4dcebc568734d7bdde6320dc0876b5b57a2 Mon Sep 17 00:00:00 2001
From: Yukon <126093594+baseGame@users.noreply.github.com>
Date: Wed, 14 Oct 2026 16:44:40 +0800
Subject: [PATCH 8/9] Keep Compare/Run CTAs visible and align status-bar e2e

Hide only export docks and specialty headers so session CTAs stay
actionable, and expect the demo-height status bar in Playwright.
---
 src/styles/htmlDemoSimplifyChrome.test.ts | 12 ++++++---
 src/styles/main.css                       | 30 +++++++++++++++++------
 tests/e2e/ui-design-alignment.spec.ts     |  2 +-
 3 files changed, 33 insertions(+), 11 deletions(-)

diff --git a/src/styles/htmlDemoSimplifyChrome.test.ts b/src/styles/htmlDemoSimplifyChrome.test.ts
index ce6e750d..6f105ca1 100644
--- a/src/styles/htmlDemoSimplifyChrome.test.ts
+++ b/src/styles/htmlDemoSimplifyChrome.test.ts
@@ -8,6 +8,7 @@ const css = readFileSync(resolve(root, 'src/styles/main.css'), 'utf8')
 const folderView = readFileSync(resolve(root, 'src/views/FolderCompareView.vue'), 'utf8')
 const textView = readFileSync(resolve(root, 'src/views/TextCompareView.vue'), 'utf8')
 const filters = readFileSync(resolve(root, 'src/app/folderDisplayFilters.ts'), 'utf8')
+const e2e = readFileSync(resolve(root, 'tests/e2e/ui-design-alignment.spec.ts'), 'utf8')
 
 describe('HTML demo simplify chrome', () => {
   it('defaults Rules and Filters panels off to match demo hierarchy', () => {
@@ -17,9 +18,7 @@ describe('HTML demo simplify chrome', () => {
     expect(filters).toMatch(/showFiltersPanel:\s*parsed\.showFiltersPanel === true/)
   })
 
-  it('tucks non-demo action docks and specialty headers via CSS', () => {
-    expect(css).toMatch(/\.folder-actions[\s\S]*?display:\s*none\s*!important/)
-    expect(css).toMatch(/\.workbench-toolbar\.compare-toolbar[\s\S]*?display:\s*none\s*!important/)
+  it('tucks non-demo headers and export docks while keeping Compare/Run CTAs', () => {
     expect(css).toMatch(/\.hex-header[\s\S]*?display:\s*none\s*!important/)
     expect(css).toMatch(/\.picture-header[\s\S]*?display:\s*none\s*!important/)
     expect(css).toMatch(/\.file-format-view \.format-io-panel[\s\S]*?display:\s*none\s*!important/)
@@ -29,5 +28,12 @@ describe('HTML demo simplify chrome', () => {
     )
     expect(css).toMatch(/\.merge-header[\s\S]*?display:\s*none\s*!important/)
     expect(css).toMatch(/\.hex-report-panel[\s\S]*?display:\s*none\s*!important/)
+    expect(css).toMatch(
+      /\.folder-actions button\[data-testid\^=.export-.[^\]]*\][\s\S]*?display:\s*none\s*!important/,
+    )
+    expect(css).toMatch(
+      /\.workbench-toolbar\.compare-toolbar,\s*\.text-compare-view \.compare-toolbar\s*\{[\s\S]*?min-height:\s*28px/,
+    )
+    expect(e2e).toMatch(/toHaveCSS\('height', '26px'\)/)
   })
 })
diff --git a/src/styles/main.css b/src/styles/main.css
index 8841ab0f..85281525 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -5295,8 +5295,8 @@ html[data-show-path-bars='0'] .path-pair-bar {
 
 /* ---- HTML demo simplify: tuck non-demo chrome (handlers stay in DOM) ---- */
 
-/* Extra action docks / hints not in the HTML demo chrome */
-.folder-actions,
+/* Extra action docks / hints not in the HTML demo chrome.
+   Keep primary Compare / Run controls visible for session CTAs. */
 .folder-root-summary,
 .archive-path-hint,
 .folder-compare-view .folder-toolbar > button[data-testid='open-folder-session-settings'],
@@ -5305,9 +5305,6 @@ html[data-show-path-bars='0'] .path-pair-bar {
 .format-header .eyebrow,
 .profile-header .eyebrow,
 .file-format-view .format-io-panel,
-.workbench-toolbar.compare-toolbar,
-.text-compare-view .compare-toolbar,
-.folder-merge-view .folder-actions,
 .folder-status-legend-slot,
 .hex-header,
 .picture-header,
@@ -5323,17 +5320,36 @@ html[data-show-path-bars='0'] .path-pair-bar {
 .version-report-panel,
 .table-report-actions,
 .hex-summary,
-.hex-run-diff,
 button[data-testid='open-hex-session-settings'],
 button[data-testid='open-picture-session-settings'],
 button[data-testid='open-table-session-settings'],
 button[data-testid='open-media-session-settings'],
 button[data-testid='open-registry-session-settings'],
 button[data-testid='open-version-session-settings'],
-button[data-testid='open-text-session-settings'] {
+button[data-testid='open-text-session-settings'],
+.folder-actions button[data-testid^='export-'],
+.folder-actions .n-button[data-testid^='export-'],
+.compare-toolbar button[data-testid^='export-'],
+.compare-toolbar .toolbar-button[data-testid^='export-'] {
   display: none !important;
 }
 
+/* Aux text toolbar: keep Run/Undo/Copy; densify instead of removing */
+.workbench-toolbar.compare-toolbar,
+.text-compare-view .compare-toolbar {
+  flex-wrap: wrap !important;
+  gap: 2px !important;
+  min-height: 28px !important;
+  max-height: none !important;
+  padding: 2px 4px !important;
+}
+
+.folder-actions,
+.folder-merge-view .folder-actions {
+  gap: 4px !important;
+  padding: 2px 4px !important;
+}
+
 /* Specialty path meta strips — demo dual-paths are bare */
 .hex-path-meta-strip,
 .picture-compare-view .path-meta-footer,
diff --git a/tests/e2e/ui-design-alignment.spec.ts b/tests/e2e/ui-design-alignment.spec.ts
index cbefb853..904f3b5f 100644
--- a/tests/e2e/ui-design-alignment.spec.ts
+++ b/tests/e2e/ui-design-alignment.spec.ts
@@ -36,7 +36,7 @@ for (const [name, route] of routes) {
     )
     await expect(page.locator('.menu-bar')).toHaveCSS('height', '23.5px')
     await expect(page.locator('.sidebar')).toBeHidden()
-    await expect(page.locator('.status-bar')).toHaveCSS('height', '19.5px')
+    await expect(page.locator('.status-bar')).toHaveCSS('height', '26px')
     await expect(page.locator('.command-bar')).toHaveCount(0)
     await expect(page.locator('.pathbar')).toHaveCount(0)
     await expect(page.locator('.page-head')).toHaveCount(0)

From 779e04c57e473f7a886b9e0815a541ef15b28579 Mon Sep 17 00:00:00 2001
From: Yukon <126093594+baseGame@users.noreply.github.com>
Date: Wed, 14 Oct 2026 16:53:26 +0800
Subject: [PATCH 9/9] Open Rules before whitespace toggle in text smoke e2e

Rules stay off by default; the smoke test opens the panel first.
---
 tests/e2e/text-compare.smoke.spec.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/tests/e2e/text-compare.smoke.spec.ts b/tests/e2e/text-compare.smoke.spec.ts
index 6f7b0092..9c49af5e 100644
--- a/tests/e2e/text-compare.smoke.spec.ts
+++ b/tests/e2e/text-compare.smoke.spec.ts
@@ -104,6 +104,8 @@ test('opens the home page and runs a text comparison', async ({ page }) => {
   await expect(page.getByTestId('run-diff')).toBeVisible()
   await expect(page.locator('body')).not.toContainText('generated-120.log')
 
+  await page.getByTestId('text-session-toolbar-rules').click()
+  await expect(page.getByTestId('text-rules-panel')).toBeVisible()
   await page.getByTestId('ignore-whitespace').check()
   await page.getByTestId('run-diff').click()