From 8f4ca2aedcf4ba764fa569505c1485b798f4194c Mon Sep 17 00:00:00 2001
From: Jonathan Singer <jonathansinger@Jonathans-MacBook-Pro.local>
Date: Mon, 20 Jul 2026 16:48:41 -0400
Subject: [PATCH] Add a collapsible sidebar to the local viewer

Toggle it to a narrow icon-only rail; the choice is remembered in
localStorage and each icon keeps a hover tooltip so labels stay findable.
---
 strix/viewer_src/src/components/ProCta.tsx  |  18 +++
 strix/viewer_src/src/components/Sidebar.tsx | 151 +++++++++++++++-----
 2 files changed, 136 insertions(+), 33 deletions(-)

diff --git a/strix/viewer_src/src/components/ProCta.tsx b/strix/viewer_src/src/components/ProCta.tsx
index df82db09..686b4d40 100644
--- a/strix/viewer_src/src/components/ProCta.tsx
+++ b/strix/viewer_src/src/components/ProCta.tsx
@@ -103,12 +103,30 @@ export function ProNavItem({
   feature,
   active,
   onClick,
+  collapsed = false,
 }: {
   feature: ProFeature;
   active?: boolean;
   onClick: () => void;
+  collapsed?: boolean;
 }) {
   const Icon = feature.icon;
+  if (collapsed) {
+    return (
+      <button
+        onClick={onClick}
+        title={`${feature.title} (${feature.tier})`}
+        className={`group flex w-full cursor-pointer items-center justify-center rounded-md px-2.5 py-2 transition-colors ${
+          active
+            ? "text-white"
+            : "text-[#888] hover:bg-[rgba(255,255,255,0.06)] hover:text-white"
+        }`}
+        style={active ? { background: "rgba(255,255,255,0.12)" } : undefined}
+      >
+        <Icon className="h-4 w-4 flex-shrink-0" aria-hidden="true" />
+      </button>
+    );
+  }
   return (
     <button
       onClick={onClick}
diff --git a/strix/viewer_src/src/components/Sidebar.tsx b/strix/viewer_src/src/components/Sidebar.tsx
index 29ede946..46c3a724 100644
--- a/strix/viewer_src/src/components/Sidebar.tsx
+++ b/strix/viewer_src/src/components/Sidebar.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import {
   FileText,
   Bug,
@@ -8,6 +8,8 @@ import {
   ArrowUpRight,
   LogOut,
   ShieldCheck,
+  PanelLeftClose,
+  PanelLeft,
 } from "lucide-react";
 import { SIGNUP_URL, ctaUrl, trackCta } from "@/lib/cta";
 import { ProNavItem } from "@/components/ProCta";
@@ -20,8 +22,14 @@ import type { View } from "@/App";
  * run-history + email-report actions, then the platform features. No section
  * headers. Tier is shown only by the inline Pro/Enterprise tag on platform
  * rows. Matches App.tsx's dark palette.
+ *
+ * Can collapse to a narrow icon-only rail; the collapsed state persists in
+ * localStorage and each icon row keeps a `title` tooltip so the labels stay
+ * discoverable.
  */
 
+const COLLAPSE_KEY = "strix_viewer_sidebar_collapsed";
+
 interface SidebarProps {
   view: View;
   onSelectView: (view: View) => void;
@@ -51,51 +59,104 @@ export default function Sidebar({
   onOpenHistory,
   onForget,
 }: SidebarProps) {
+  const [collapsed, setCollapsed] = useState(false);
+
+  useEffect(() => {
+    try {
+      setCollapsed(localStorage.getItem(COLLAPSE_KEY) === "1");
+    } catch {
+      /* localStorage may be unavailable; default to expanded */
+    }
+  }, []);
+
+  const toggleCollapsed = () => {
+    setCollapsed((prev) => {
+      const next = !prev;
+      try {
+        localStorage.setItem(COLLAPSE_KEY, next ? "1" : "0");
+      } catch {
+        /* best-effort persistence */
+      }
+      return next;
+    });
+  };
+
   return (
-    <aside className="hidden w-72 flex-shrink-0 border-r border-[#222] lg:block">
+    <aside
+      className={`hidden flex-shrink-0 border-r border-[#222] lg:block ${collapsed ? "w-14" : "w-72"}`}
+    >
       <div className="sticky top-0 flex h-screen flex-col overflow-y-auto px-3 py-4">
-        {/* Header: wordmark + Start free + signed-in chip */}
+        {/* Header: wordmark + Explore full platform + signed-in chip */}
         <div className="px-1.5">
-          <a
-            href={ctaUrl("https://app.strix.ai", "logo")}
-            target="_blank"
-            rel="noopener noreferrer"
-            onClick={() => trackCta("logo", "sidebar")}
-            className="flex items-center gap-1.5 opacity-90 transition-opacity hover:opacity-100"
-            title="Open Strix Cloud"
-          >
-            <img src="./logo.png" alt="Strix" className="h-8 w-10 object-cover" />
-            <span className="text-base font-medium tracking-tight text-white">Strix</span>
-          </a>
+          <div className={`flex items-center ${collapsed ? "flex-col gap-2" : "justify-between"}`}>
+            <a
+              href={ctaUrl("https://app.strix.ai", "logo")}
+              target="_blank"
+              rel="noopener noreferrer"
+              onClick={() => trackCta("logo", "sidebar")}
+              className="flex items-center gap-1.5 opacity-90 transition-opacity hover:opacity-100"
+              title="Open Strix Cloud"
+            >
+              <img src="./logo.png" alt="Strix" className="h-8 w-10 object-cover" />
+              {!collapsed && (
+                <span className="text-base font-medium tracking-tight text-white">Strix</span>
+              )}
+            </a>
+            <button
+              onClick={toggleCollapsed}
+              title={collapsed ? "Expand sidebar" : "Collapse sidebar"}
+              aria-label={collapsed ? "Expand sidebar" : "Collapse sidebar"}
+              className="flex-shrink-0 cursor-pointer rounded-md p-1.5 text-[#666] transition-colors hover:bg-[rgba(255,255,255,0.06)] hover:text-white"
+            >
+              {collapsed ? (
+                <PanelLeft className="h-4 w-4" aria-hidden="true" />
+              ) : (
+                <PanelLeftClose className="h-4 w-4" aria-hidden="true" />
+              )}
+            </button>
+          </div>
           <a
             href={ctaUrl(SIGNUP_URL, "sidebar_start_free")}
             target="_blank"
             rel="noopener noreferrer"
             onClick={() => trackCta("sidebar_start_free", "sidebar")}
-            className="mt-3 flex w-full cursor-pointer items-center justify-center gap-1.5 rounded-lg bg-white px-3 py-2 text-sm font-semibold text-black transition-opacity hover:opacity-90"
+            title="Explore full platform"
+            className={`mt-3 flex w-full cursor-pointer items-center justify-center gap-1.5 rounded-lg bg-white font-semibold text-black transition-opacity hover:opacity-90 ${
+              collapsed ? "px-0 py-2" : "px-3 py-2 text-sm"
+            }`}
           >
-            Explore full platform
+            {!collapsed && "Explore full platform"}
             <ArrowUpRight className="h-3.5 w-3.5" aria-hidden="true" />
           </a>
           {verified && email && (
-            <div
-              className="mt-2.5 flex items-center gap-2 rounded-lg px-2.5 py-2"
-              style={{ border: "1px solid #222", background: "rgba(255,255,255,0.02)" }}
-            >
-              <ShieldCheck className="h-3.5 w-3.5 flex-shrink-0 text-emerald-400" aria-hidden="true" />
-              <div className="min-w-0 flex-1">
-                <p className="truncate text-[11px] text-[#666]">Linked email</p>
-                <p className="truncate text-xs text-[#aaa]" title={email}>{email}</p>
-              </div>
-              <button
-                onClick={onForget}
-                title="Forget this email on this machine"
-                className="flex-shrink-0 cursor-pointer text-[#666] transition-colors hover:text-white"
-                aria-label="Forget"
+            collapsed ? (
+              <div
+                className="mt-2.5 flex items-center justify-center rounded-lg py-2"
+                style={{ border: "1px solid #222", background: "rgba(255,255,255,0.02)" }}
+                title={`Linked email: ${email}`}
               >
-                <LogOut className="h-3.5 w-3.5" />
-              </button>
-            </div>
+                <ShieldCheck className="h-3.5 w-3.5 flex-shrink-0 text-emerald-400" aria-hidden="true" />
+              </div>
+            ) : (
+              <div
+                className="mt-2.5 flex items-center gap-2 rounded-lg px-2.5 py-2"
+                style={{ border: "1px solid #222", background: "rgba(255,255,255,0.02)" }}
+              >
+                <ShieldCheck className="h-3.5 w-3.5 flex-shrink-0 text-emerald-400" aria-hidden="true" />
+                <div className="min-w-0 flex-1">
+                  <p className="truncate text-[11px] text-[#666]">Linked email</p>
+                  <p className="truncate text-xs text-[#aaa]" title={email}>{email}</p>
+                </div>
+                <button
+                  onClick={onForget}
+                  title="Forget this email on this machine"
+                  className="flex-shrink-0 cursor-pointer text-[#666] transition-colors hover:text-white"
+                  aria-label="Forget"
+                >
+                  <LogOut className="h-3.5 w-3.5" />
+                </button>
+              </div>
+            )
           )}
         </div>
 
@@ -107,6 +168,7 @@ export default function Sidebar({
             desc="This run's executive report"
             active={view === "overview"}
             onClick={() => onSelectView("overview")}
+            collapsed={collapsed}
           />
           <NavItem
             icon={Bug}
@@ -115,6 +177,7 @@ export default function Sidebar({
             count={issuesCount > 0 ? issuesCount : undefined}
             active={view === "issues"}
             onClick={() => onSelectView("issues")}
+            collapsed={collapsed}
           />
           {agentCount > 0 && (
             <NavItem
@@ -124,6 +187,7 @@ export default function Sidebar({
               count={agentCount}
               active={view === "agents"}
               onClick={() => onSelectView("agents")}
+              collapsed={collapsed}
             />
           )}
           <NavItem
@@ -133,6 +197,7 @@ export default function Sidebar({
             count={runCount > 0 ? runCount : undefined}
             active={view === "history"}
             onClick={onOpenHistory}
+            collapsed={collapsed}
           />
           <NavItem
             icon={Mail}
@@ -140,6 +205,7 @@ export default function Sidebar({
             desc="Get an encrypted PDF by email"
             active={view === "email"}
             onClick={onOpenEmail}
+            collapsed={collapsed}
           />
 
           {PLATFORM_ORDER.map((slug) => {
@@ -151,6 +217,7 @@ export default function Sidebar({
                 feature={feature}
                 active={view === "feature" && activeFeature === slug}
                 onClick={() => onSelectFeature(slug)}
+                collapsed={collapsed}
               />
             );
           })}
@@ -167,6 +234,7 @@ function NavItem({
   count,
   active,
   onClick,
+  collapsed = false,
 }: {
   icon: React.ElementType;
   label: string;
@@ -174,7 +242,24 @@ function NavItem({
   count?: number;
   active?: boolean;
   onClick: () => void;
+  collapsed?: boolean;
 }) {
+  if (collapsed) {
+    return (
+      <button
+        onClick={onClick}
+        title={count != null ? `${label} (${count})` : label}
+        className={`flex w-full cursor-pointer items-center justify-center rounded-md px-2.5 py-2 transition-colors ${
+          active
+            ? "text-white"
+            : "text-[#888] hover:bg-[rgba(255,255,255,0.06)] hover:text-white"
+        }`}
+        style={active ? { background: "rgba(255,255,255,0.12)" } : undefined}
+      >
+        <Icon className="h-4 w-4 flex-shrink-0" aria-hidden="true" />
+      </button>
+    );
+  }
   return (
     <button
       onClick={onClick}