From 70e74406e59a167f2f2e3476962118a6f80cb756 Mon Sep 17 00:00:00 2001
From: Chaitanya Chandurkar <chaitanya.chandurkar@gopuff.com>
Date: Thu, 10 Sep 2026 11:59:43 -0400
Subject: [PATCH 1/5] style(ui): sidebar/analysis-panel spacing tweak, tooltip
 icons for array matching hints

- Reduce sidebar/analysis-panel section top margin (32px -> 20px)
- Replace inline array-matching toggle-hint text with ? tooltip icons,
  matching the existing sidebar Comparison section pattern
---
 .../analysis-panel.component.css              |  2 +-
 .../array-matching.component.css              | 34 +++++++++---
 .../array-matching.component.html             | 54 ++++++++++++++++---
 .../array-matching.component.ts               |  3 +-
 .../components/sidebar/sidebar.component.css  |  2 +-
 5 files changed, 80 insertions(+), 15 deletions(-)

diff --git a/packages/ui/src/app/components/analysis-panel/analysis-panel.component.css b/packages/ui/src/app/components/analysis-panel/analysis-panel.component.css
index 9d6a2db..da754bb 100644
--- a/packages/ui/src/app/components/analysis-panel/analysis-panel.component.css
+++ b/packages/ui/src/app/components/analysis-panel/analysis-panel.component.css
@@ -75,7 +75,7 @@
   display: flex;
   flex-direction: column;
   gap: 2px;
-  margin-top: 32px;
+  margin-top: 20px;
 }
 
 .panel-section:first-of-type {
diff --git a/packages/ui/src/app/components/array-matching/array-matching.component.css b/packages/ui/src/app/components/array-matching/array-matching.component.css
index c484bdd..80e1a08 100644
--- a/packages/ui/src/app/components/array-matching/array-matching.component.css
+++ b/packages/ui/src/app/components/array-matching/array-matching.component.css
@@ -20,7 +20,7 @@ app-array-picker {
 
 .toggle-row {
   display: flex;
-  align-items: flex-start;
+  align-items: center;
   gap: 9px;
   border-radius: var(--radius);
   padding: 6px 8px;
@@ -36,7 +36,7 @@ app-array-picker {
 }
 
 .toggle-row input {
-  margin: 1px 0 0;
+  margin: 0;
   accent-color: var(--primary);
   cursor: pointer;
 }
@@ -47,6 +47,7 @@ app-array-picker {
 }
 
 .toggle-text {
+  flex: 1;
   display: flex;
   flex-direction: column;
   gap: 2px;
@@ -58,9 +59,29 @@ app-array-picker {
   font: 500 12px var(--sans);
 }
 
-.toggle-hint {
-  color: var(--muted-foreground);
-  font: 11px/1.4 var(--sans);
+.hint-icon {
+  flex: none;
+  width: 16px;
+  height: 16px;
+  display: grid;
+  place-items: center;
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  background: transparent;
+  color: var(--subtle-foreground);
+  font: 600 10px var(--sans);
+  line-height: 1;
+  cursor: help;
+}
+
+.hint-icon:hover {
+  color: var(--foreground);
+  border-color: var(--border-strong);
+}
+
+.hint-icon:focus-visible {
+  outline: 2px solid var(--primary);
+  outline-offset: 2px;
 }
 
 .field-list {
@@ -171,7 +192,8 @@ app-array-picker {
 }
 
 .matching-fieldset:disabled .toggle-row,
-.matching-fieldset:disabled .toggle-row input {
+.matching-fieldset:disabled .toggle-row input,
+.matching-fieldset:disabled .hint-icon {
   cursor: not-allowed;
 }
 
diff --git a/packages/ui/src/app/components/array-matching/array-matching.component.html b/packages/ui/src/app/components/array-matching/array-matching.component.html
index 46d8112..6aa2e1e 100644
--- a/packages/ui/src/app/components/array-matching/array-matching.component.html
+++ b/packages/ui/src/app/components/array-matching/array-matching.component.html
@@ -6,24 +6,45 @@
       <input type="radio" name="matching-strategy-disabled" checked disabled />
       <span class="toggle-text">
         <span class="toggle-name">Auto</span>
-        <span class="toggle-hint">JSON Semantic Diff chooses the best identity.</span>
       </span>
+      <button
+        type="button"
+        class="hint-icon"
+        appTooltip="JSON Semantic Diff chooses the best identity."
+        aria-label="What does Auto matching do?"
+      >
+        ?
+      </button>
     </label>
 
     <label class="toggle-row">
       <input type="radio" name="matching-strategy-disabled" disabled />
       <span class="toggle-text">
         <span class="toggle-name">Match by fields</span>
-        <span class="toggle-hint">Pick one or more fields that identify a record.</span>
       </span>
+      <button
+        type="button"
+        class="hint-icon"
+        appTooltip="Pick one or more fields that identify a record."
+        aria-label="What does Match by fields do?"
+      >
+        ?
+      </button>
     </label>
 
     <label class="toggle-row">
       <input type="radio" name="matching-strategy-disabled" disabled />
       <span class="toggle-text">
         <span class="toggle-name">Position</span>
-        <span class="toggle-hint">Compare elements by array position.</span>
       </span>
+      <button
+        type="button"
+        class="hint-icon"
+        appTooltip="Compare elements by array position."
+        aria-label="What does Position matching do?"
+      >
+        ?
+      </button>
     </label>
 
     <div class="matching-actions">
@@ -38,16 +59,30 @@
     <input type="radio" name="matching-strategy" [checked]="strategy() === 'auto'" (change)="strategy.set('auto')" />
     <span class="toggle-text">
       <span class="toggle-name">Auto</span>
-      <span class="toggle-hint">JSON Semantic Diff chooses the best identity.</span>
     </span>
+    <button
+      type="button"
+      class="hint-icon"
+      appTooltip="JSON Semantic Diff chooses the best identity."
+      aria-label="What does Auto matching do?"
+    >
+      ?
+    </button>
   </label>
 
   <label class="toggle-row" [class.is-active]="strategy() === 'key'">
     <input type="radio" name="matching-strategy" [checked]="strategy() === 'key'" (change)="strategy.set('key')" />
     <span class="toggle-text">
       <span class="toggle-name">Match by fields</span>
-      <span class="toggle-hint">Pick one or more fields that identify a record.</span>
     </span>
+    <button
+      type="button"
+      class="hint-icon"
+      appTooltip="Pick one or more fields that identify a record."
+      aria-label="What does Match by fields do?"
+    >
+      ?
+    </button>
   </label>
 
   @if (strategy() === 'key') {
@@ -84,8 +119,15 @@
     <input type="radio" name="matching-strategy" [checked]="strategy() === 'position'" (change)="strategy.set('position')" />
     <span class="toggle-text">
       <span class="toggle-name">Position</span>
-      <span class="toggle-hint">Compare elements by array position.</span>
     </span>
+    <button
+      type="button"
+      class="hint-icon"
+      appTooltip="Compare elements by array position."
+      aria-label="What does Position matching do?"
+    >
+      ?
+    </button>
   </label>
 
   @if (context.analysis.duplicateKeyCount) {
diff --git a/packages/ui/src/app/components/array-matching/array-matching.component.ts b/packages/ui/src/app/components/array-matching/array-matching.component.ts
index 758d65b..3dfcd77 100644
--- a/packages/ui/src/app/components/array-matching/array-matching.component.ts
+++ b/packages/ui/src/app/components/array-matching/array-matching.component.ts
@@ -10,6 +10,7 @@ import {
 } from 'json-semantic-diff';
 import { percent } from '../../shared/format';
 import { MatchingOverrideChange, overridePatternFor } from '../../shared/node-actions';
+import { TooltipDirective } from '../../shared/tooltip/tooltip.directive';
 import { ArrayPickerComponent } from '../array-picker/array-picker.component';
 
 /** One configurable array: its core analysis plus the node holding the rows. */
@@ -30,7 +31,7 @@ type Strategy = 'auto' | 'key' | 'position';
 @Component({
   selector: 'app-array-matching',
   standalone: true,
-  imports: [ArrayPickerComponent],
+  imports: [ArrayPickerComponent, TooltipDirective],
   changeDetection: ChangeDetectionStrategy.OnPush,
   templateUrl: './array-matching.component.html',
   styleUrl: './array-matching.component.css'
diff --git a/packages/ui/src/app/components/sidebar/sidebar.component.css b/packages/ui/src/app/components/sidebar/sidebar.component.css
index 1203698..c8fcca6 100644
--- a/packages/ui/src/app/components/sidebar/sidebar.component.css
+++ b/packages/ui/src/app/components/sidebar/sidebar.component.css
@@ -62,7 +62,7 @@
   display: flex;
   flex-direction: column;
   gap: 2px;
-  margin-top: 32px;
+  margin-top: 20px;
 }
 
 .sidebar-section:first-of-type {

From 8b02285c620beb41d0f6b79d1c389dac7db363c2 Mon Sep 17 00:00:00 2001
From: Chaitanya Chandurkar <chaitanya.chandurkar@gopuff.com>
Date: Thu, 10 Sep 2026 12:45:58 -0400
Subject: [PATCH 2/5] style(ui): switch-style toggles for sidebar width,
 Firefox pseudo-element fix, and toolbar 'Changes only' checkbox

- Reduce left sidebar width 300px -> 270px
- Add -moz-appearance: none fallback so the switch thumb renders in Firefox
- Apply the same pill-switch re-skin to the toolbar's 'Changes only' checkbox
---
 .../components/sidebar/sidebar.component.css  | 54 +++++++++++++++++--
 packages/ui/src/app/home/home.component.css   | 48 ++++++++++++++++-
 2 files changed, 95 insertions(+), 7 deletions(-)

diff --git a/packages/ui/src/app/components/sidebar/sidebar.component.css b/packages/ui/src/app/components/sidebar/sidebar.component.css
index c8fcca6..a6c5049 100644
--- a/packages/ui/src/app/components/sidebar/sidebar.component.css
+++ b/packages/ui/src/app/components/sidebar/sidebar.component.css
@@ -81,16 +81,37 @@
 .toggle-row {
   display: flex;
   align-items: center;
-  gap: 9px;
+  gap: 6px;
   border-radius: var(--radius);
   padding: 6px 8px;
   cursor: pointer;
 }
 
+/*
+ * Re-skinned native checkbox: keeps <input type="checkbox"> for free
+ * keyboard support/screen-reader semantics, appearance:none just strips the
+ * default box so a pill track + sliding thumb can be drawn instead.
+ */
 .toggle-row input {
+  flex: none;
   margin: 0;
-  accent-color: var(--primary);
+  appearance: none;
+
+  /* Firefox (Gecko) doesn't render ::before/::after on <input> at all unless
+   * -moz-appearance is explicitly reset - Chrome/Safari/Edge already allow it
+   * without this. Without this line the switch's thumb is invisible in Firefox. */
+  /* stylelint-disable-next-line property-no-vendor-prefix -- required, not accidental prefix creep; see comment above */
+  -moz-appearance: none;
+  width: 24px;
+  height: 14px;
+  border: 1px solid var(--border-strong);
+  border-radius: 999px;
+  background: var(--muted);
   cursor: pointer;
+  position: relative;
+  transition:
+    background-color 0.15s ease,
+    border-color 0.15s ease;
 }
 
 .toggle-row:has(input:focus-visible) {
@@ -113,8 +134,8 @@
 
 .hint-icon {
   flex: none;
-  width: 16px;
-  height: 16px;
+  width: 14px;
+  height: 14px;
   display: grid;
   place-items: center;
   border: 1px solid var(--border);
@@ -232,6 +253,29 @@
   outline-color: var(--danger);
 }
 
+/* Toggle-switch thumb/checked state; kept below .ignore-row's `input` rules to satisfy stylelint's no-descending-specificity ordering. */
+.toggle-row input::after {
+  content: '';
+  position: absolute;
+  top: 1px;
+  left: 1px;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: var(--card);
+  box-shadow: 0 1px 2px rgb(0 0 0 / 25%);
+  transition: transform 0.15s ease;
+}
+
+.toggle-row input:checked {
+  background: var(--primary);
+  border-color: var(--primary);
+}
+
+.toggle-row input:checked::after {
+  transform: translateX(10px);
+}
+
 .ignore-error {
   margin-top: 4px;
   font: 11px / 1.3 var(--sans);
@@ -367,7 +411,7 @@
   display: flex;
   align-items: center;
   gap: 6px;
-  font: 500 11px var(--mono);
+  font: 400 11px var(--mono);
   color: var(--subtle-foreground);
   letter-spacing: 0.02em;
 }
diff --git a/packages/ui/src/app/home/home.component.css b/packages/ui/src/app/home/home.component.css
index 3b750d8..16f97cd 100644
--- a/packages/ui/src/app/home/home.component.css
+++ b/packages/ui/src/app/home/home.component.css
@@ -9,7 +9,7 @@
 }
 
 app-sidebar {
-  flex: 0 0 300px;
+  flex: 0 0 270px;
   min-width: 0;
   border-right: 1px solid var(--border);
 }
@@ -310,9 +310,53 @@ h1 span {
   border-radius: var(--radius);
 }
 
+/*
+ * Re-skinned native checkbox: keeps <input type="checkbox"> for free
+ * keyboard support/screen-reader semantics, appearance:none just strips the
+ * default box so a pill track + sliding thumb can be drawn instead.
+ */
 .toolbar-toggle input {
-  accent-color: var(--primary);
+  flex: none;
+  margin: 0;
+  appearance: none;
+
+  /* Firefox (Gecko) doesn't render ::before/::after on <input> at all unless
+   * -moz-appearance is explicitly reset - Chrome/Safari/Edge already allow it
+   * without this. Without this line the switch's thumb is invisible in Firefox. */
+  /* stylelint-disable-next-line property-no-vendor-prefix -- required, not accidental prefix creep; see comment above */
+  -moz-appearance: none;
+  width: 24px;
+  height: 14px;
+  border: 1px solid var(--border-strong);
+  border-radius: 999px;
+  background: var(--muted);
   cursor: pointer;
+  position: relative;
+  transition:
+    background-color 0.15s ease,
+    border-color 0.15s ease;
+}
+
+.toolbar-toggle input::after {
+  content: '';
+  position: absolute;
+  top: 1px;
+  left: 1px;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: var(--card);
+  box-shadow: 0 1px 2px rgb(0 0 0 / 25%);
+  transition: transform 0.15s ease;
+}
+
+.toolbar-toggle input:checked {
+  background: var(--primary);
+  border-color: var(--primary);
+}
+
+.toolbar-toggle input:checked::after {
+  transform: translateX(10px);
 }
 
 .nav-group {

From e4b2665fe941bba74840c0ca7feb8af252fe8059 Mon Sep 17 00:00:00 2001
From: Chaitanya Chandurkar <chaitanya.chandurkar@gopuff.com>
Date: Thu, 10 Sep 2026 13:53:47 -0400
Subject: [PATCH 3/5] style(ui): fix invisible switch thumb in dark theme

Thumb used var(--card), which is identical to the track's var(--muted)
background in dark theme. Switch to var(--muted-foreground) for contrast
in both themes and both checked/unchecked states.
---
 .../ui/src/app/components/sidebar/sidebar.component.css   | 8 +++++++-
 packages/ui/src/app/home/home.component.css               | 8 +++++++-
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/packages/ui/src/app/components/sidebar/sidebar.component.css b/packages/ui/src/app/components/sidebar/sidebar.component.css
index a6c5049..c5d3ddf 100644
--- a/packages/ui/src/app/components/sidebar/sidebar.component.css
+++ b/packages/ui/src/app/components/sidebar/sidebar.component.css
@@ -262,7 +262,12 @@
   width: 10px;
   height: 10px;
   border-radius: 50%;
-  background: var(--card);
+
+  /* var(--card) is a no-go here: it's identical to var(--muted) (the track's
+   * unchecked background) in dark theme, making the thumb invisible.
+   * var(--muted-foreground) contrasts against the track in both themes and
+   * both checked/unchecked states. */
+  background: var(--muted-foreground);
   box-shadow: 0 1px 2px rgb(0 0 0 / 25%);
   transition: transform 0.15s ease;
 }
@@ -274,6 +279,7 @@
 
 .toggle-row input:checked::after {
   transform: translateX(10px);
+  background: #fff;
 }
 
 .ignore-error {
diff --git a/packages/ui/src/app/home/home.component.css b/packages/ui/src/app/home/home.component.css
index 16f97cd..20088c6 100644
--- a/packages/ui/src/app/home/home.component.css
+++ b/packages/ui/src/app/home/home.component.css
@@ -345,7 +345,12 @@ h1 span {
   width: 10px;
   height: 10px;
   border-radius: 50%;
-  background: var(--card);
+
+  /* var(--card) is a no-go here: it's identical to var(--muted) (the track's
+   * unchecked background) in dark theme, making the thumb invisible.
+   * var(--muted-foreground) contrasts against the track in both themes and
+   * both checked/unchecked states. */
+  background: var(--muted-foreground);
   box-shadow: 0 1px 2px rgb(0 0 0 / 25%);
   transition: transform 0.15s ease;
 }
@@ -357,6 +362,7 @@ h1 span {
 
 .toolbar-toggle input:checked::after {
   transform: translateX(10px);
+  background: #fff;
 }
 
 .nav-group {

From 060f4464a5c45a3e2d128a19cad0cb8109e740aa Mon Sep 17 00:00:00 2001
From: Chaitanya Chandurkar <chaitanya.chandurkar@gopuff.com>
Date: Thu, 10 Sep 2026 16:02:34 -0400
Subject: [PATCH 4/5] feat(ui): make analysis panel collapsible with mobile
 trigger bar

- Add collapse/expand toggle to the analysis panel resize handle, with
  localStorage persistence separate from the dragged width.
- Move the two mobile drawer trigger buttons out of SidebarComponent/
  AnalysisPanelComponent into a shared HomeComponent .mobile-panel-bar
  styled as a continuation of the app header.
- Re-skin the Comparison section's checkboxes as pill switches
  (CSS-only, native <input type="checkbox"> semantics preserved),
  with a -moz-appearance fix for Firefox ::after support.
- Fix reload flashes: analysis panel collapsed state and width both
  start from Angular defaults (avoiding a hydration mismatch) and are
  corrected via afterNextRender; a pre-hydration index.html script
  applies both as pure visual overrides ahead of first paint. The
  collapsed override lives in the global styles.css (component-scoped
  :root selectors are dead CSS under Angular's view encapsulation,
  which scopes every compound selector including :root). The width
  override is an injected global <style> tag, removed once Angular's
  own signal is corrected so it never pins a later drag-resize. A
  home.component.ts effect keeps the collapsed data-attribute in sync
  with the live signal so expanding after a collapsed reload works.
---
 .../analysis-panel.component.css              |  39 -----
 .../analysis-panel.component.html             |  17 +-
 .../analysis-panel.component.ts               |  49 +++---
 .../components/sidebar/sidebar.component.css  |  26 ---
 .../components/sidebar/sidebar.component.html |  13 +-
 .../components/sidebar/sidebar.component.ts   |  46 +++--
 packages/ui/src/app/home/home.component.css   | 163 ++++++++++++++++++
 packages/ui/src/app/home/home.component.html  |  73 +++++++-
 packages/ui/src/app/home/home.component.ts    | 106 +++++++++++-
 .../ui/src/app/shared/resizable-panel.spec.ts |  23 +++
 packages/ui/src/app/shared/resizable-panel.ts |  31 ++++
 packages/ui/src/index.html                    |  49 ++++++
 packages/ui/src/styles.css                    |  30 ++++
 13 files changed, 534 insertions(+), 131 deletions(-)

diff --git a/packages/ui/src/app/components/analysis-panel/analysis-panel.component.css b/packages/ui/src/app/components/analysis-panel/analysis-panel.component.css
index da754bb..8bf09e4 100644
--- a/packages/ui/src/app/components/analysis-panel/analysis-panel.component.css
+++ b/packages/ui/src/app/components/analysis-panel/analysis-panel.component.css
@@ -5,41 +5,6 @@
   min-height: 0;
 }
 
-.panel-toggle {
-  display: none;
-  align-items: center;
-  gap: 7px;
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  background: var(--card);
-  color: var(--foreground);
-  font: 500 12px var(--sans);
-  padding: 8px 12px;
-  cursor: pointer;
-}
-
-.panel-toggle:hover {
-  background: var(--accent);
-}
-
-.panel-toggle:focus-visible {
-  outline: 2px solid var(--primary);
-  outline-offset: 2px;
-}
-
-.toggle-badge {
-  display: inline-flex;
-  min-width: 16px;
-  height: 16px;
-  align-items: center;
-  justify-content: center;
-  border-radius: 999px;
-  background: var(--primary);
-  color: var(--primary-foreground);
-  font: 700 10px var(--mono);
-  padding: 0 4px;
-}
-
 .panel-backdrop {
   display: none;
 }
@@ -495,10 +460,6 @@ app-array-picker {
     height: auto;
   }
 
-  .panel-toggle {
-    display: inline-flex;
-  }
-
   .panel-backdrop {
     display: block;
     position: fixed;
diff --git a/packages/ui/src/app/components/analysis-panel/analysis-panel.component.html b/packages/ui/src/app/components/analysis-panel/analysis-panel.component.html
index e348954..e32cc7a 100644
--- a/packages/ui/src/app/components/analysis-panel/analysis-panel.component.html
+++ b/packages/ui/src/app/components/analysis-panel/analysis-panel.component.html
@@ -1,18 +1,3 @@
-<button
-  #toggleButton
-  type="button"
-  class="panel-toggle"
-  data-tour="analysis-toggle"
-  aria-controls="app-analysis-panel"
-  [attr.aria-expanded]="open()"
-  (click)="toggle()"
->
-  Analysis
-  @if (result(); as diff) {
-    <span class="toggle-badge">{{ diff.summary.totalChanges }}</span>
-  }
-</button>
-
 @if (open()) {
   <!-- Click-outside-to-dismiss only; Escape is already handled at the document level (see onEscape). -->
   <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->
@@ -20,7 +5,7 @@
 }
 
 <aside id="app-analysis-panel" class="analysis-panel" [class.is-open]="open()" aria-label="Analysis">
-  <button type="button" class="drawer-close" (click)="close(true)" aria-label="Close analysis">×</button>
+  <button type="button" class="drawer-close" (click)="closeAndRestoreFocus()" aria-label="Close analysis">×</button>
 
   @if (result(); as diff) {
     <section class="panel-section">
diff --git a/packages/ui/src/app/components/analysis-panel/analysis-panel.component.ts b/packages/ui/src/app/components/analysis-panel/analysis-panel.component.ts
index 835bfab..bbff034 100644
--- a/packages/ui/src/app/components/analysis-panel/analysis-panel.component.ts
+++ b/packages/ui/src/app/components/analysis-panel/analysis-panel.component.ts
@@ -1,15 +1,4 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  ElementRef,
-  afterNextRender,
-  computed,
-  effect,
-  input,
-  output,
-  signal,
-  viewChild
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, afterNextRender, computed, effect, input, model, output, signal } from '@angular/core';
 import { ArrayMatchAnalysis, CandidateStats, DiffResult, ScoreBreakdownTerm } from 'json-semantic-diff';
 import { DIFF_EXAMPLES, DiffExample } from '../../examples';
 import { decimalPercent, percent } from '../../shared/format';
@@ -28,8 +17,10 @@ import { pickRandomExample } from './analysis-panel-example';
  * mutates comparison options, it just always shows the currently selected one.
  *
  * Above the drawer breakpoint it is a flex column with its own scroll. Below
- * it, the panel becomes an off-canvas drawer behind a toggle button - the same
- * signal-driven pattern used by `SidebarComponent`.
+ * it, the panel becomes an off-canvas drawer, driven by the `open` model() -
+ * the same pattern used by `SidebarComponent`. Its trigger button lives in
+ * HomeComponent's shared mobile panel bar rather than here; see that
+ * component's doc comment and `SidebarComponent`'s for why.
  */
 @Component({
   selector: 'app-analysis-panel',
@@ -43,8 +34,6 @@ import { pickRandomExample } from './analysis-panel-example';
   }
 })
 export class AnalysisPanelComponent {
-  private readonly toggleButton = viewChild.required<ElementRef<HTMLButtonElement>>('toggleButton');
-
   readonly result = input<DiffResult | null>(null);
   /** The array currently explained; the parent defaults this to `primaryAnalysis`. */
   readonly analysis = input<ArrayMatchAnalysis | null>(null);
@@ -60,8 +49,20 @@ export class AnalysisPanelComponent {
   /** Fired when the user clicks the empty-state "Try [Example] example" link. */
   readonly exampleRequested = output<DiffExample>();
 
-  /** Drawer state; only meaningful below the breakpoint, where the toggle shows. */
-  readonly open = signal(false);
+  /**
+   * Drawer state; only meaningful below the breakpoint, where the trigger
+   * button shows. A model() rather than a plain signal so the mobile trigger
+   * button - which lives in HomeComponent's shared panel bar, not here, see
+   * that component's doc comment - can drive it via `[(open)]`.
+   */
+  readonly open = model(false);
+
+  /**
+   * Escape and the drawer's own "×" close the drawer AND should return focus
+   * to the external trigger button; HomeComponent listens for this to do
+   * that, since it owns that button and this component has no reference to it.
+   */
+  readonly restoreFocusRequested = output<void>();
 
   /**
    * Always starts with DIFF_EXAMPLES[0] so server-prerendered HTML and the
@@ -118,13 +119,17 @@ export class AnalysisPanelComponent {
   onEscape(event: Event): void {
     const target = event.target as Element | null;
     if (target?.closest?.('.cdk-overlay-container')) return;
-    this.close(true);
+    this.closeAndRestoreFocus();
   }
 
-  close(restoreFocus = false): void {
-    if (!this.open()) return;
+  close(): void {
     this.open.set(false);
-    if (restoreFocus) this.toggleButton().nativeElement.focus();
+  }
+
+  closeAndRestoreFocus(): void {
+    if (!this.open()) return;
+    this.close();
+    this.restoreFocusRequested.emit();
   }
 
   /** Heading for the selected-key section, branching on provenance not mechanism. */
diff --git a/packages/ui/src/app/components/sidebar/sidebar.component.css b/packages/ui/src/app/components/sidebar/sidebar.component.css
index c5d3ddf..8be2750 100644
--- a/packages/ui/src/app/components/sidebar/sidebar.component.css
+++ b/packages/ui/src/app/components/sidebar/sidebar.component.css
@@ -5,28 +5,6 @@
   min-height: 0;
 }
 
-.sidebar-toggle {
-  display: none;
-  align-items: center;
-  gap: 7px;
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  background: var(--card);
-  color: var(--foreground);
-  font: 500 12px var(--sans);
-  padding: 8px 12px;
-  cursor: pointer;
-}
-
-.sidebar-toggle:hover {
-  background: var(--accent);
-}
-
-.sidebar-toggle:focus-visible {
-  outline: 2px solid var(--primary);
-  outline-offset: 2px;
-}
-
 .sidebar-backdrop {
   display: none;
 }
@@ -452,10 +430,6 @@
     height: auto;
   }
 
-  .sidebar-toggle {
-    display: inline-flex;
-  }
-
   .sidebar-backdrop {
     display: block;
     position: fixed;
diff --git a/packages/ui/src/app/components/sidebar/sidebar.component.html b/packages/ui/src/app/components/sidebar/sidebar.component.html
index 196c08f..ad95787 100644
--- a/packages/ui/src/app/components/sidebar/sidebar.component.html
+++ b/packages/ui/src/app/components/sidebar/sidebar.component.html
@@ -1,14 +1,3 @@
-<button
-  #toggleButton
-  type="button"
-  class="sidebar-toggle"
-  aria-controls="app-sidebar-panel"
-  [attr.aria-expanded]="open()"
-  (click)="toggle()"
->
-  <span aria-hidden="true">☰</span> Setup
-</button>
-
 @if (open()) {
   <!-- Click-outside-to-dismiss only; Escape is already handled at the document level (see onEscape). -->
   <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->
@@ -16,7 +5,7 @@
 }
 
 <aside id="app-sidebar-panel" class="sidebar-panel" [class.is-open]="open()" aria-label="Comparison setup">
-  <button type="button" class="drawer-close" (click)="close(true)" aria-label="Close setup">×</button>
+  <button type="button" class="drawer-close" (click)="closeAndRestoreFocus()" aria-label="Close setup">×</button>
 
   <section class="sidebar-section" aria-labelledby="sidebar-examples-heading">
     <h3 id="sidebar-examples-heading" class="sidebar-heading">Examples</h3>
diff --git a/packages/ui/src/app/components/sidebar/sidebar.component.ts b/packages/ui/src/app/components/sidebar/sidebar.component.ts
index 817ed0c..72389f3 100644
--- a/packages/ui/src/app/components/sidebar/sidebar.component.ts
+++ b/packages/ui/src/app/components/sidebar/sidebar.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, ElementRef, afterNextRender, effect, input, output, signal, viewChild } from '@angular/core';
+import { ChangeDetectionStrategy, Component, afterNextRender, effect, input, model, output, signal } from '@angular/core';
 import { isValidIgnorePattern } from 'json-semantic-diff';
 import { version } from '../../../../package.json';
 import { DIFF_EXAMPLES, DiffExample } from '../../examples';
@@ -13,9 +13,14 @@ import { ExamplePickerComponent } from '../example-picker/example-picker.compone
  * examples, view/normalization toggles, ignore rules and array matching.
  *
  * Above the drawer breakpoint it is a sticky grid column. Below it, the panel
- * becomes an off-canvas drawer behind a toggle button, driven purely by a
- * signal - no overlay container is needed because the panel has no anchor to
- * track and never has to escape a clipping ancestor.
+ * becomes an off-canvas drawer, driven by the `open` model() - no overlay
+ * container is needed because the panel has no anchor to track and never has
+ * to escape a clipping ancestor. The trigger button that opens it lives in
+ * HomeComponent's shared mobile panel bar (`.mobile-panel-bar`), not here:
+ * a lone "Setup" button at one edge of the screen and a lone "Analysis"
+ * button at the other, each stranded in its own full-height flex column,
+ * read as bolted-on rather than a single deliberate control surface. Housing
+ * both triggers together lets them share one small toolbar instead.
  */
 @Component({
   selector: 'app-sidebar',
@@ -31,8 +36,6 @@ import { ExamplePickerComponent } from '../example-picker/example-picker.compone
 export class SidebarComponent {
   readonly version = version;
 
-  private readonly toggleButton = viewChild.required<ElementRef<HTMLButtonElement>>('toggleButton');
-
   /** Comparison toggles, owned by the app. */
   readonly normalizeTimestamps = input(false);
   readonly numericStringsAsNumbers = input(false);
@@ -56,8 +59,23 @@ export class SidebarComponent {
   /** Fired when the user picks a different array via the matching section's own select. */
   readonly arraySelected = output<string>();
 
-  /** Drawer state; only meaningful below the breakpoint, where the toggle shows. */
-  readonly open = signal(false);
+  /**
+   * Drawer state; only meaningful below the breakpoint, where the trigger
+   * button shows. A model() rather than a plain signal so the mobile trigger
+   * button - which lives in HomeComponent's shared panel bar, not here, see
+   * that component's doc comment - can drive it via `[(open)]`.
+   */
+  readonly open = model(false);
+
+  /**
+   * Escape and the drawer's own "×" close the drawer AND should return focus
+   * to the external trigger button; HomeComponent listens for this to do
+   * that, since it owns that button and this component has no reference to
+   * it. Loading an example / the guided tour's own close()/toggle() calls
+   * deliberately don't emit this - focus already belongs somewhere sensible
+   * in those cases (the example picker, a tour popover).
+   */
+  readonly restoreFocusRequested = output<void>();
 
   /** Inline validation error for the ignore path input. */
   readonly ignoreError = signal<string | null>(null);
@@ -82,13 +100,17 @@ export class SidebarComponent {
   onEscape(event: Event): void {
     const target = event.target as Element | null;
     if (target?.closest?.('.cdk-overlay-container')) return;
-    this.close(true);
+    this.closeAndRestoreFocus();
   }
 
-  close(restoreFocus = false): void {
-    if (!this.open()) return;
+  close(): void {
     this.open.set(false);
-    if (restoreFocus) this.toggleButton().nativeElement.focus();
+  }
+
+  closeAndRestoreFocus(): void {
+    if (!this.open()) return;
+    this.close();
+    this.restoreFocusRequested.emit();
   }
 
   /** Reads the new state off a checkbox change event. */
diff --git a/packages/ui/src/app/home/home.component.css b/packages/ui/src/app/home/home.component.css
index 20088c6..99b467a 100644
--- a/packages/ui/src/app/home/home.component.css
+++ b/packages/ui/src/app/home/home.component.css
@@ -2,6 +2,81 @@
   display: contents;
 }
 
+/*
+ * Unified stand-in for the sidebar's/analysis panel's own off-canvas
+ * trigger buttons below their drawer breakpoints (see SidebarComponent's
+ * doc comment for the full rationale): one slim bar, styled like a
+ * continuation of the site header, instead of two buttons stranded at
+ * opposite screen edges. Hidden entirely above 1280px, where both panels
+ * are always-visible flex columns with no drawer to trigger.
+ */
+.mobile-panel-bar {
+  display: none;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 10px clamp(16px, 3vw, 28px);
+  background: var(--card);
+  border-bottom: 1px solid var(--border);
+}
+
+.mobile-panel-btn {
+  display: none;
+  align-items: center;
+  gap: 7px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--card);
+  color: var(--foreground);
+  font: 500 12px var(--sans);
+  padding: 7px 12px;
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+}
+
+.mobile-panel-btn:hover {
+  background: var(--accent);
+}
+
+.mobile-panel-btn:focus-visible {
+  outline: 2px solid var(--primary);
+  outline-offset: 2px;
+}
+
+/* Pushes the analysis toggle to the far right whenever setup is also showing (<=1100px); flex's own flex-end already right-aligns it when setup is hidden. */
+.mobile-panel-btn.setup-toggle {
+  margin-right: auto;
+}
+
+.mobile-panel-badge {
+  display: inline-flex;
+  min-width: 16px;
+  height: 16px;
+  align-items: center;
+  justify-content: center;
+  border-radius: 999px;
+  background: var(--primary);
+  color: var(--primary-foreground);
+  font: 700 10px var(--mono);
+  padding: 0 4px;
+}
+
+@media (width <= 1280px) {
+  .mobile-panel-bar {
+    display: flex;
+  }
+
+  .analysis-toggle {
+    display: inline-flex;
+  }
+}
+
+@media (width <= 1100px) {
+  .setup-toggle {
+    display: inline-flex;
+  }
+}
+
 .shell-row {
   flex: 1;
   min-height: 0;
@@ -20,6 +95,7 @@ app-sidebar {
   cursor: col-resize;
   touch-action: none;
   border-left: 1px solid var(--border);
+  transition: flex-basis 0.15s ease;
 }
 
 .panel-resize-handle::after {
@@ -38,14 +114,94 @@ app-sidebar {
   background: var(--primary);
 }
 
+/* Collapsed: a little wider so the chevron chip stays an easy target, and a
+   faint fill so the strip itself reads as "there's something hidden here". */
+.panel-resize-handle.is-collapsed {
+  flex-basis: 14px;
+  background: var(--muted);
+}
+
+/*
+ * Collapse/expand affordance embedded in the resize handle rather than a
+ * separate toolbar button, so it reads as "more of the same control" rather
+ * than new chrome. Sized well past the 6px handle so it stays an easy click
+ * target; position:absolute keeps it from affecting the handle's own layout
+ * width. Its own pointerdown is stopped before it reaches the handle (see
+ * template) so clicking it toggles collapse instead of starting a drag.
+ */
+.panel-collapse-toggle {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 40px;
+  padding: 0;
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  background: var(--card);
+  color: var(--muted-foreground);
+  cursor: pointer;
+
+  /* Generated content (::after below) paints after real children regardless
+   * of source order, so without an explicit z-index it would sit on top of
+   * this button and swallow its clicks. */
+  z-index: 1;
+  transition:
+    color 0.15s ease,
+    border-color 0.15s ease;
+}
+
+.panel-collapse-toggle:hover {
+  color: var(--foreground);
+  border-color: var(--border-strong);
+}
+
+.panel-collapse-toggle:focus-visible {
+  outline: 2px solid var(--primary);
+  outline-offset: 2px;
+}
+
+.panel-collapse-toggle svg {
+  display: block;
+  flex-shrink: 0;
+}
+
+/* Echoes the mobile toggle's .toggle-badge: a hint that the hidden panel still has something to show. */
+.collapse-badge {
+  position: absolute;
+  top: -5px;
+  right: -5px;
+  min-width: 14px;
+  height: 14px;
+  padding: 0 3px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 999px;
+  background: var(--primary);
+  color: var(--primary-foreground);
+  font: 700 9px var(--mono);
+}
+
 app-analysis-panel {
   flex: 0 0 auto;
   min-width: 0;
+  overflow: hidden;
+  transition: width 0.18s ease;
+}
+
+app-analysis-panel.no-transition {
+  transition: none;
 }
 
 @media (width <= 1100px) {
   app-sidebar {
     flex: 0 0 auto;
+    align-self: flex-start;
     border-right: 0;
   }
 }
@@ -57,7 +213,10 @@ app-analysis-panel {
 
   app-analysis-panel {
     flex: 0 0 auto;
+    align-self: flex-start;
     width: auto !important;
+    overflow: visible;
+    transition: none;
   }
 }
 
@@ -417,6 +576,10 @@ h1 span {
   .hero-leave {
     animation-duration: 0.01ms;
   }
+
+  app-analysis-panel {
+    transition: none;
+  }
 }
 
 @media (width <= 900px) {
diff --git a/packages/ui/src/app/home/home.component.html b/packages/ui/src/app/home/home.component.html
index 73c96dc..549528d 100644
--- a/packages/ui/src/app/home/home.component.html
+++ b/packages/ui/src/app/home/home.component.html
@@ -1,5 +1,44 @@
+
+<!--
+  Below the drawer breakpoints, this replaces the two panels' own trigger
+  buttons (see SidebarComponent's doc comment for why they were pulled out
+  of the panels and unified here): one shared bar instead of a lone "Setup"
+  button stranded at one edge of the screen and a lone "Analysis" button
+  stranded at the other. "Setup" only shows once the sidebar itself has gone
+  off-canvas (<=1100px); "Analysis" once the analysis panel has (<=1280px) -
+  same breakpoints the two panels already used, just applied to buttons that
+  now live in one place.
+-->
+<div class="mobile-panel-bar">
+  <button
+    #sidebarToggleButton
+    type="button"
+    class="mobile-panel-btn setup-toggle"
+    aria-controls="app-sidebar-panel"
+    [attr.aria-expanded]="sidebarDrawerOpen()"
+    (click)="sidebarDrawerOpen.set(!sidebarDrawerOpen())"
+  >
+    <span aria-hidden="true">☰</span> Setup
+  </button>
+  <button
+    #analysisToggleButton
+    type="button"
+    class="mobile-panel-btn analysis-toggle"
+    data-tour="analysis-toggle"
+    aria-controls="app-analysis-panel"
+    [attr.aria-expanded]="analysisDrawerOpen()"
+    (click)="analysisDrawerOpen.set(!analysisDrawerOpen())"
+  >
+    Analysis
+    @if (workspace.result(); as diff) {
+      <span class="mobile-panel-badge">{{ diff.summary.totalChanges }}</span>
+    }
+  </button>
+</div>
+
 <div class="shell-row">
   <app-sidebar
+    [(open)]="sidebarDrawerOpen"
     [normalizeTimestamps]="workspace.options().normalizeTimestamps"
     [numericStringsAsNumbers]="workspace.options().numericStringsAsNumbers"
     [nullEqualsMissing]="workspace.options().nullEqualsMissing"
@@ -15,6 +54,7 @@
     (ignoreRemoved)="workspace.removeIgnore($event)"
     (overrideChanged)="workspace.applyMatchingOverride($event)"
     (arraySelected)="workspace.openAnalysis($event)"
+    (restoreFocusRequested)="restoreSidebarToggleFocus()"
   />
 
   <main class="main-column">
@@ -168,15 +208,43 @@ <h1>Understand what changed,<br /><span>not just where.</span></h1>
   <div
     class="panel-resize-handle"
     [class.is-resizing]="resizingAnalysisPanel()"
+    [class.is-collapsed]="analysisPanelCollapsed()"
     (pointerdown)="startPanelResize($event)"
     (pointermove)="onPanelResizeMove($event)"
     (pointerup)="endPanelResize($event)"
     (pointercancel)="endPanelResize($event)"
-  ></div>
+  >
+    <button
+      type="button"
+      class="panel-collapse-toggle"
+      aria-controls="app-analysis-panel"
+      [attr.aria-expanded]="!analysisPanelCollapsed()"
+      [attr.aria-label]="analysisPanelCollapsed() ? 'Expand analysis panel' : 'Collapse analysis panel'"
+      (pointerdown)="$event.stopPropagation()"
+      (click)="toggleAnalysisPanelCollapsed()"
+    >
+      <svg width="14" height="14" viewBox="0 0 14 14" aria-hidden="true" focusable="false">
+        <path
+          [attr.d]="analysisPanelCollapsed() ? 'M9 2L4 7l5 5' : 'M5 2l5 5-5 5'"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="1.6"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </svg>
+      @if (analysisPanelCollapsed() && workspace.result()) {
+        <span class="collapse-badge">{{ workspace.result()?.summary?.totalChanges }}</span>
+      }
+    </button>
+  </div>
 
   <app-analysis-panel
     data-tour="analysis-panel"
-    [style.width.px]="analysisPanelWidth()"
+    [(open)]="analysisDrawerOpen"
+    [class.is-collapsed]="analysisPanelCollapsed()"
+    [class.no-transition]="resizingAnalysisPanel()"
+    [style.width.px]="effectiveAnalysisPanelWidth()"
     [result]="workspace.result()"
     [analysis]="workspace.displayedAnalysis()"
     [selectedPath]="workspace.selectedAnalysis()?.path ?? workspace.result()?.primaryAnalysis?.path ?? null"
@@ -184,6 +252,7 @@ <h1>Understand what changed,<br /><span>not just where.</span></h1>
     (arraySelected)="workspace.openAnalysis($event)"
     (nodeSelected)="workspace.selectNode($event)"
     (exampleRequested)="workspace.loadExample($event)"
+    (restoreFocusRequested)="restoreAnalysisToggleFocus()"
   />
 </div>
 
diff --git a/packages/ui/src/app/home/home.component.ts b/packages/ui/src/app/home/home.component.ts
index c1474d4..767f09f 100644
--- a/packages/ui/src/app/home/home.component.ts
+++ b/packages/ui/src/app/home/home.component.ts
@@ -1,4 +1,15 @@
-import { AnimationCallbackEvent, ChangeDetectionStrategy, Component, afterNextRender, inject, signal } from '@angular/core';
+import {
+  AnimationCallbackEvent,
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  afterNextRender,
+  computed,
+  effect,
+  inject,
+  signal,
+  viewChild
+} from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { NavigationCancel, NavigationEnd, NavigationError, NavigationStart, Router } from '@angular/router';
 import { filter } from 'rxjs';
@@ -15,7 +26,9 @@ import {
   ANALYSIS_PANEL_MAX_WIDTH,
   ANALYSIS_PANEL_MIN_WIDTH,
   clampWidth,
+  readStoredAnalysisPanelCollapsed,
   readStoredAnalysisPanelWidth,
+  storeAnalysisPanelCollapsed,
   storeAnalysisPanelWidth
 } from '../shared/resizable-panel';
 import { WorkspaceStateService } from './workspace-state.service';
@@ -44,19 +57,83 @@ export class HomeComponent {
   readonly analysisPanelWidth = signal(ANALYSIS_PANEL_DEFAULT_WIDTH);
   readonly resizingAnalysisPanel = signal(false);
 
+  /**
+   * Below the drawer breakpoints, `<app-sidebar>`/`<app-analysis-panel>` no
+   * longer render their own trigger buttons - two lone buttons stranded at
+   * opposite edges of the screen, each in its own full-height flex column,
+   * read as bolted-on rather than intentional. Both triggers live together
+   * here instead, in `.mobile-panel-bar`, and drive each panel's drawer via
+   * `[(open)]`. See SidebarComponent's doc comment for the full rationale.
+   */
+  readonly sidebarDrawerOpen = signal(false);
+  readonly analysisDrawerOpen = signal(false);
+
+  private readonly sidebarToggleButton = viewChild<ElementRef<HTMLButtonElement>>('sidebarToggleButton');
+  private readonly analysisToggleButton = viewChild<ElementRef<HTMLButtonElement>>('analysisToggleButton');
+
+  /**
+   * Collapsing hides the panel without discarding `analysisPanelWidth` - the
+   * width the user dragged it to is preserved so expanding (via the handle's
+   * chevron, or by dragging the handle itself) restores exactly what they
+   * had. Kept separate from `analysisPanelWidth` rather than overloading it
+   * with a 0 sentinel, which would lose that width on collapse.
+   */
+  /**
+   * Starts `false` even though the persisted value may be `true` - this
+   * component is hydrated from build-time-prerendered HTML (see
+   * AGENTS.md's Prerendering section), which has no `localStorage` and
+   * always bakes in `false`. Starting from the real stored value here would
+   * make the client's first render disagree with that prerendered DOM and
+   * trip an Angular hydration mismatch. The inline script in `src/index.html`
+   * (`data-analysis-panel-collapsed`) is what actually prevents the reload
+   * flash, via a pure CSS override that doesn't touch what Angular thinks is
+   * rendered - mirroring the `tourSeen`/theme scripts there. This signal is
+   * then corrected to the real value below, once hydration has settled.
+   */
+  readonly analysisPanelCollapsed = signal(false);
+
+  /** What the panel's `[style.width.px]` actually renders: 0 while collapsed, the real width otherwise. */
+  readonly effectiveAnalysisPanelWidth = computed(() => (this.analysisPanelCollapsed() ? 0 : this.analysisPanelWidth()));
+
   private panelResizeStartX = 0;
   private panelResizeStartWidth = 0;
 
-  private readonly applyStoredPanelWidth = afterNextRender(() => {
+  private readonly applyStoredPanelState = afterNextRender(() => {
     const storedWidth = readStoredAnalysisPanelWidth();
     if (storedWidth !== null) {
       this.analysisPanelWidth.set(clampWidth(storedWidth, ANALYSIS_PANEL_MIN_WIDTH, ANALYSIS_PANEL_MAX_WIDTH));
     }
+    this.analysisPanelCollapsed.set(readStoredAnalysisPanelCollapsed());
+    // The pre-hydration script in `index.html` injects a temporary global
+    // `<style id="analysis-panel-width-override">` tag so a reload never
+    // flashes the default width before snapping to the real one. Now that
+    // Angular's own signal has been corrected to that same value above, the
+    // override has done its job - remove it so it never pins a later
+    // user-driven resize to a stale width.
+    document.getElementById('analysis-panel-width-override')?.remove();
   });
 
   private readonly navigatingToHowItWorks = signal(false);
 
   constructor() {
+    // The pre-hydration script in `index.html` sets `data-analysis-panel-collapsed`
+    // once, before Angular ever runs, purely to avoid a reload flash (see the
+    // signal's doc comment above). Nothing then updates that attribute again -
+    // so without this effect, expanding the panel afterwards (chevron or drag)
+    // would leave the stale attribute in place, and the global `!important`
+    // CSS override keyed off it (in `src/styles.css`) would keep pinning the
+    // panel to width 0 forever. This effect keeps the attribute in sync with
+    // the real signal for the rest of the page's lifetime.
+    effect(() => {
+      const collapsed = this.analysisPanelCollapsed();
+      if (typeof document === 'undefined') return;
+      if (collapsed) {
+        document.documentElement.dataset['analysisPanelCollapsed'] = 'true';
+      } else {
+        delete document.documentElement.dataset['analysisPanelCollapsed'];
+      }
+    });
+
     const router = inject(Router);
     router.events
       .pipe(filter((e): e is NavigationStart => e instanceof NavigationStart))
@@ -96,6 +173,14 @@ export class HomeComponent {
 
   startPanelResize(event: PointerEvent): void {
     event.preventDefault();
+    // Dragging a collapsed handle re-expands it: unhide first so the drag
+    // resizes from the panel's last real width instead of the 0 it's
+    // rendering at, which would otherwise make the first pixels of the drag
+    // do nothing.
+    if (this.analysisPanelCollapsed()) {
+      this.analysisPanelCollapsed.set(false);
+      storeAnalysisPanelCollapsed(false);
+    }
     this.panelResizeStartX = event.clientX;
     this.panelResizeStartWidth = this.analysisPanelWidth();
     this.resizingAnalysisPanel.set(true);
@@ -117,7 +202,24 @@ export class HomeComponent {
     storeAnalysisPanelWidth(this.analysisPanelWidth());
   }
 
+  /** The handle's chevron button: collapses/expands without touching the stored width. */
+  toggleAnalysisPanelCollapsed(): void {
+    const next = !this.analysisPanelCollapsed();
+    this.analysisPanelCollapsed.set(next);
+    storeAnalysisPanelCollapsed(next);
+  }
+
   isChecked(event: Event): boolean {
     return (event.target as HTMLInputElement).checked;
   }
+
+  /** SidebarComponent emits this when Escape/its own "×" close the drawer; see its doc comment. */
+  restoreSidebarToggleFocus(): void {
+    this.sidebarToggleButton()?.nativeElement.focus();
+  }
+
+  /** AnalysisPanelComponent emits this when Escape/its own "×" close the drawer; see its doc comment. */
+  restoreAnalysisToggleFocus(): void {
+    this.analysisToggleButton()?.nativeElement.focus();
+  }
 }
diff --git a/packages/ui/src/app/shared/resizable-panel.spec.ts b/packages/ui/src/app/shared/resizable-panel.spec.ts
index 2e6c6e1..47a1419 100644
--- a/packages/ui/src/app/shared/resizable-panel.spec.ts
+++ b/packages/ui/src/app/shared/resizable-panel.spec.ts
@@ -1,9 +1,12 @@
 import { describe, expect, it } from 'vitest';
 import {
+  ANALYSIS_PANEL_COLLAPSED_STORAGE_KEY,
   ANALYSIS_PANEL_WIDTH_STORAGE_KEY,
   clampWidth,
   parsePanelWidth,
+  readStoredAnalysisPanelCollapsed,
   readStoredAnalysisPanelWidth,
+  storeAnalysisPanelCollapsed,
   storeAnalysisPanelWidth
 } from './resizable-panel';
 
@@ -58,3 +61,23 @@ describe('analysis panel width storage', () => {
     expect(readStoredAnalysisPanelWidth()).toBeNull();
   });
 });
+
+describe('analysis panel collapsed storage', () => {
+  it('defaults to expanded (false) when nothing is stored', () => {
+    localStorage.removeItem(ANALYSIS_PANEL_COLLAPSED_STORAGE_KEY);
+    expect(readStoredAnalysisPanelCollapsed()).toBe(false);
+  });
+
+  it('round-trips a stored collapsed choice', () => {
+    storeAnalysisPanelCollapsed(true);
+    expect(readStoredAnalysisPanelCollapsed()).toBe(true);
+    storeAnalysisPanelCollapsed(false);
+    expect(readStoredAnalysisPanelCollapsed()).toBe(false);
+  });
+
+  it('treats any non-"true" stored value as expanded', () => {
+    localStorage.setItem(ANALYSIS_PANEL_COLLAPSED_STORAGE_KEY, 'nonsense');
+    expect(readStoredAnalysisPanelCollapsed()).toBe(false);
+    localStorage.removeItem(ANALYSIS_PANEL_COLLAPSED_STORAGE_KEY);
+  });
+});
diff --git a/packages/ui/src/app/shared/resizable-panel.ts b/packages/ui/src/app/shared/resizable-panel.ts
index f622321..c68e7b1 100644
--- a/packages/ui/src/app/shared/resizable-panel.ts
+++ b/packages/ui/src/app/shared/resizable-panel.ts
@@ -45,3 +45,34 @@ export function storeAnalysisPanelWidth(width: number): void {
     /* ignored */
   }
 }
+
+/**
+ * Separate from the width itself: collapsing hides the panel without
+ * discarding the width the user dragged it to, so re-expanding (via the
+ * collapse toggle or by dragging the handle) restores exactly what they had.
+ */
+export const ANALYSIS_PANEL_COLLAPSED_STORAGE_KEY = 'json-semantic-diff.analysisPanelCollapsed';
+
+/**
+ * Returns false (i.e. "expanded") when storage is unavailable (private mode,
+ * blocked cookies, or a non-browser environment such as build-time
+ * prerendering) or when there is no saved choice.
+ */
+export function readStoredAnalysisPanelCollapsed(): boolean {
+  if (typeof localStorage === 'undefined') return false;
+  try {
+    return localStorage.getItem(ANALYSIS_PANEL_COLLAPSED_STORAGE_KEY) === 'true';
+  } catch {
+    return false;
+  }
+}
+
+/** Storage failures are non-fatal: the collapsed state still applies for this session. */
+export function storeAnalysisPanelCollapsed(collapsed: boolean): void {
+  if (typeof localStorage === 'undefined') return;
+  try {
+    localStorage.setItem(ANALYSIS_PANEL_COLLAPSED_STORAGE_KEY, String(collapsed));
+  } catch {
+    /* ignored */
+  }
+}
diff --git a/packages/ui/src/index.html b/packages/ui/src/index.html
index 4635572..242aca1 100644
--- a/packages/ui/src/index.html
+++ b/packages/ui/src/index.html
@@ -101,6 +101,55 @@
       var tourSeen =
         tourStored === 'permanent' || (tourStored && Date.now() - Number(tourStored) < 14 * 24 * 60 * 60 * 1000);
       if (tourSeen) document.documentElement.dataset.tourSeen = 'true';
+
+      // Visually collapses the analysis panel before first paint if it was
+      // left collapsed, so a reload never flashes it open. Angular's
+      // analysisPanelCollapsed signal must still start false (see
+      // home.component.ts) to avoid a hydration mismatch - this is a pure
+      // CSS visual override on top of that, not a change to what Angular
+      // itself thinks is rendered, so it can't create a mismatch. Mirrors
+      // ANALYSIS_PANEL_COLLAPSED_STORAGE_KEY in
+      // src/app/shared/resizable-panel.ts - change both together.
+      var analysisPanelCollapsed = false;
+      try {
+        analysisPanelCollapsed = localStorage.getItem('json-semantic-diff.analysisPanelCollapsed') === 'true';
+      } catch (e) {
+        /* storage blocked */
+      }
+      if (analysisPanelCollapsed) document.documentElement.dataset.analysisPanelCollapsed = 'true';
+
+      // Applies the saved analysis panel width before first paint so a reload
+      // never flashes the default width before snapping to the real one.
+      // Angular's analysisPanelWidth signal must still start at
+      // ANALYSIS_PANEL_DEFAULT_WIDTH (see home.component.ts) to avoid a
+      // hydration mismatch - this is a pure CSS visual override via a
+      // dynamically injected <style> tag (not part of any Angular-compiled
+      // stylesheet, so Angular's per-selector _ngcontent scoping can't make it
+      // dead CSS the way a component-scoped rule would). Removed once
+      // Angular's own signal has been corrected to the same value (see
+      // applyStoredPanelState in home.component.ts), so it never overrides a
+      // later user-driven resize. Mirrors ANALYSIS_PANEL_WIDTH_STORAGE_KEY/
+      // ANALYSIS_PANEL_MIN_WIDTH/ANALYSIS_PANEL_MAX_WIDTH in
+      // src/app/shared/resizable-panel.ts - change all together.
+      var storedWidthRaw = null;
+      var storedWidth = NaN;
+      var widthOverrideStyle = null;
+      if (!analysisPanelCollapsed) {
+        try {
+          storedWidthRaw = localStorage.getItem('json-semantic-diff.analysisPanelWidth');
+        } catch (e) {
+          /* storage blocked */
+        }
+        storedWidth = storedWidthRaw ? parseInt(storedWidthRaw, 10) : NaN;
+        if (!isNaN(storedWidth)) {
+          storedWidth = Math.min(480, Math.max(260, storedWidth));
+          widthOverrideStyle = document.createElement('style');
+          widthOverrideStyle.id = 'analysis-panel-width-override';
+          widthOverrideStyle.textContent =
+            '@media (width > 1280px) { app-analysis-panel { width: ' + storedWidth + 'px !important; } }';
+          document.head.appendChild(widthOverrideStyle);
+        }
+      }
     </script>
   </head>
   <body>
diff --git a/packages/ui/src/styles.css b/packages/ui/src/styles.css
index c1ecc54..f4da291 100644
--- a/packages/ui/src/styles.css
+++ b/packages/ui/src/styles.css
@@ -435,6 +435,36 @@ textarea:focus-visible {
   border-top-color: var(--card);
 }
 
+/*
+ * Pre-hydration paint override: forces the same visual result as
+ * `.panel-resize-handle.is-collapsed`/`effectiveAnalysisPanelWidth() === 0`
+ * before Angular has hydrated and corrected `analysisPanelCollapsed` (see
+ * that signal's doc comment in home.component.ts). Driven by the
+ * `data-analysis-panel-collapsed` attribute set synchronously in
+ * `src/index.html`'s inline script, never by Angular's own bindings - so it
+ * can't cause a hydration mismatch. `!important` is required since it must
+ * beat the bound `[style.width.px]` inline style.
+ *
+ * Lives here (global styles.css), not in home.component.css: Angular's
+ * emulated view encapsulation prepends its `_ngcontent` scoping attribute to
+ * EVERY compound selector in a rule, including `:root` - but `:root` is
+ * `<html>`, outside any component's template, and can never carry that
+ * attribute. A scoped version of this rule is therefore permanently dead CSS
+ * (confirmed via the compiled output: `[_ngcontent-x]:root[...]` never
+ * matches). Global stylesheets aren't scoped, so `:root` here works as
+ * intended - matching how `:root[data-theme='dark']` above is also global.
+ */
+@media (width > 1280px) {
+  :root[data-analysis-panel-collapsed='true'] app-analysis-panel {
+    width: 0 !important;
+  }
+
+  :root[data-analysis-panel-collapsed='true'] .panel-resize-handle {
+    flex-basis: 14px;
+    background: var(--muted);
+  }
+}
+
 .driver-popover-arrow-side-bottom {
   border-bottom-color: var(--card);
 }

From 971cf87eac77e66ea1e1a62a3ed2faafef412bb2 Mon Sep 17 00:00:00 2001
From: Chaitanya Chandurkar <chaitanya.chandurkar@gopuff.com>
Date: Mon, 14 Sep 2026 17:21:47 -0400
Subject: [PATCH 5/5] feat(ui): fix sidebar panel

---
 packages/ui/src/app/home/home.component.css | 30 ++++++-------
 packages/ui/src/app/home/home.component.ts  | 49 ++++++++++++++++-----
 2 files changed, 51 insertions(+), 28 deletions(-)

diff --git a/packages/ui/src/app/home/home.component.css b/packages/ui/src/app/home/home.component.css
index 99b467a..cb9d65b 100644
--- a/packages/ui/src/app/home/home.component.css
+++ b/packages/ui/src/app/home/home.component.css
@@ -98,29 +98,26 @@ app-sidebar {
   transition: flex-basis 0.15s ease;
 }
 
-.panel-resize-handle::after {
-  content: '';
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 2px;
-  width: 2px;
-  border-radius: var(--radius);
-  background: transparent;
-}
-
-.panel-resize-handle:hover::after,
-.panel-resize-handle.is-resizing::after {
-  background: var(--primary);
+.panel-resize-handle:hover {
+  background: var(--primary-hover);
 }
 
 /* Collapsed: a little wider so the chevron chip stays an easy target, and a
    faint fill so the strip itself reads as "there's something hidden here". */
 .panel-resize-handle.is-collapsed {
   flex-basis: 14px;
+  cursor: pointer;
   background: var(--muted);
 }
 
+.panel-resize-handle.is-collapsed:hover {
+  background: var(--primary-hover);
+}
+
+/* .panel-resize-handle.is-collapsed::after {
+  display: none;
+} */
+
 /*
  * Collapse/expand affordance embedded in the resize handle rather than a
  * separate toolbar button, so it reads as "more of the same control" rather
@@ -173,8 +170,9 @@ app-sidebar {
 /* Echoes the mobile toggle's .toggle-badge: a hint that the hidden panel still has something to show. */
 .collapse-badge {
   position: absolute;
-  top: -5px;
-  right: -5px;
+  top: -10px;
+
+  /* right: -5px; */
   min-width: 14px;
   height: 14px;
   padding: 0 3px;
diff --git a/packages/ui/src/app/home/home.component.ts b/packages/ui/src/app/home/home.component.ts
index 767f09f..3ed0b15 100644
--- a/packages/ui/src/app/home/home.component.ts
+++ b/packages/ui/src/app/home/home.component.ts
@@ -33,6 +33,9 @@ import {
 } from '../shared/resizable-panel';
 import { WorkspaceStateService } from './workspace-state.service';
 
+/** Pointer movement (px) required before a resize-handle pointerdown counts as a drag rather than a click. */
+const PANEL_DRAG_THRESHOLD_PX = 4;
+
 @Component({
   selector: 'app-home',
   standalone: true,
@@ -97,6 +100,8 @@ export class HomeComponent {
 
   private panelResizeStartX = 0;
   private panelResizeStartWidth = 0;
+  private panelResizeActive = false;
+  private panelDragConfirmed = false;
 
   private readonly applyStoredPanelState = afterNextRender(() => {
     const storedWidth = readStoredAnalysisPanelWidth();
@@ -173,32 +178,52 @@ export class HomeComponent {
 
   startPanelResize(event: PointerEvent): void {
     event.preventDefault();
-    // Dragging a collapsed handle re-expands it: unhide first so the drag
-    // resizes from the panel's last real width instead of the 0 it's
-    // rendering at, which would otherwise make the first pixels of the drag
-    // do nothing.
-    if (this.analysisPanelCollapsed()) {
-      this.analysisPanelCollapsed.set(false);
-      storeAnalysisPanelCollapsed(false);
-    }
+    // Don't act on collapse/resizing state yet - a plain click fires
+    // pointerdown+pointerup with no real movement in between, and doing any
+    // of that here would apply within the same event-handler call as the
+    // eventual pointerup, so Angular's (zoneless, batched) next render would
+    // apply the resulting width change and `.no-transition` class together,
+    // skipping the CSS transition entirely. See onPanelResizeMove/endPanelResize.
     this.panelResizeStartX = event.clientX;
     this.panelResizeStartWidth = this.analysisPanelWidth();
-    this.resizingAnalysisPanel.set(true);
+    this.panelResizeActive = true;
+    this.panelDragConfirmed = false;
     (event.target as HTMLElement).setPointerCapture(event.pointerId);
   }
 
   onPanelResizeMove(event: PointerEvent): void {
-    if (!this.resizingAnalysisPanel()) return;
+    if (!this.panelResizeActive) return;
+    // Collapsed handle can only be opened by a click (or the chevron
+    // button), never a drag - ignore movement entirely until the panel is
+    // expanded.
+    if (this.analysisPanelCollapsed()) return;
     const delta = this.panelResizeStartX - event.clientX;
+    if (!this.panelDragConfirmed) {
+      // Ignore small jitters so a plain click never registers as a drag.
+      if (Math.abs(delta) < PANEL_DRAG_THRESHOLD_PX) return;
+      this.panelDragConfirmed = true;
+      this.resizingAnalysisPanel.set(true);
+    }
     const viewportWidth = typeof window !== 'undefined' ? window.innerWidth : ANALYSIS_PANEL_MAX_WIDTH;
     const maxWidth = Math.min(ANALYSIS_PANEL_MAX_WIDTH, viewportWidth * 0.4);
     this.analysisPanelWidth.set(clampWidth(this.panelResizeStartWidth + delta, ANALYSIS_PANEL_MIN_WIDTH, maxWidth));
   }
 
   endPanelResize(event: PointerEvent): void {
-    if (!this.resizingAnalysisPanel()) return;
-    this.resizingAnalysisPanel.set(false);
+    if (!this.panelResizeActive) return;
+    this.panelResizeActive = false;
     (event.target as HTMLElement).releasePointerCapture(event.pointerId);
+    if (!this.panelDragConfirmed) {
+      // No real drag happened - treat it as a click, toggling collapsed
+      // exactly like the chevron button so it animates via the normal width
+      // transition instead of the drag path's instant `.no-transition` jump.
+      if (this.analysisPanelCollapsed()) {
+        this.analysisPanelCollapsed.set(false);
+        storeAnalysisPanelCollapsed(false);
+      }
+      return;
+    }
+    this.resizingAnalysisPanel.set(false);
     storeAnalysisPanelWidth(this.analysisPanelWidth());
   }