fix: match homepage mock pane chrome and sidebar to tui rendering

2 files changed, 84 insertions, 35 deletions

diff --git a/website/css/style.css b/website/css/style.css
index 76d739af..06aae519 100644
--- a/website/css/style.css
+++ b/website/css/style.css
@@ -1278,14 +1278,15 @@ samp {
     border-radius: 50%;
 }
 
-.mock-sidebar-spacer {
-    flex: 1;
-    min-height: 4rem;
+/* Two equal halves, like the TUI's default sidebar_section_split of 0.5. */
+.mock-sidebar-half {
+    flex: 1 1 0;
+    min-height: 0;
+    overflow: hidden;
 }
 
-.herdr-ui-mock .mock-sidebar-spacer {
-    flex: 1 1 0;
-    min-height: 0.5rem;
+.mock-sidebar-agents {
+    border-top: 1px solid var(--term-border);
 }
 
 .mock-sidebar-row,
@@ -1313,6 +1314,10 @@ samp {
     padding: 0.38rem 0.7rem;
 }
 
+.mock-agent.active {
+    background: var(--term-active-bg);
+}
+
 .mock-agent > span {
     color: var(--term-green-bright);
     line-height: 1.1;
@@ -1370,22 +1375,63 @@ samp {
 .mock-panes {
     display: grid;
     grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
-    gap: 0.45rem;
+    gap: 1ch;
     min-height: 0;
-    padding: 0.45rem;
+    padding: 0;
 }
 
 .mock-pane {
+    position: relative;
     min-width: 0;
     overflow: hidden;
+    background: var(--term-bg);
+    padding: 1lh 1.4ch;
+}
+
+/* Border line runs through the middle of the edge cell, like a box-drawing glyph. */
+.mock-pane::before {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    translate: -50% -50%;
+    width: calc(100% - 1ch);
+    height: calc(100% - 1lh);
     border: 1px solid var(--term-border);
+    pointer-events: none;
+}
+
+.mock-pane.focused::before {
+    border-color: var(--accent);
+}
+
+/* Pane title embedded in the top border, one cell in from the left. */
+.mock-pane[data-title]::after {
+    content: attr(data-title);
+    position: absolute;
+    top: 0.5lh;
+    left: 2ch;
+    translate: 0 -50%;
+    padding: 0 0.6ch;
     background: var(--term-bg);
-    padding: 0.75rem;
+    color: var(--term-muted);
+    line-height: 1.1;
+    pointer-events: none;
+}
+
+.mock-pane.focused[data-title]::after {
+    color: var(--accent);
+    font-weight: 700;
 }
 
-.mock-pane.focused {
-    border: 2px solid var(--term-tab-active-bg);
-    padding: calc(0.75rem - 1px);
+/* Single-pane tabs draw no pane chrome, matching the TUI's multi-pane gate. */
+.mock-panes.single .mock-pane::before,
+.mock-panes.single .mock-pane::after {
+    content: none;
+}
+
+.mock-panes.single .mock-pane {
+    padding: 0.5lh 1.4ch;
 }
 
 .mock-prompt {
@@ -2726,10 +2772,6 @@ td:last-child {
         padding: 0.24rem 0.45rem;
     }
 
-    .herdr-ui-mock .mock-sidebar-spacer {
-        flex: 0 0 0.35rem;
-    }
-
     .mock-tabs {
         height: 1.05rem;
     }
@@ -2742,15 +2784,7 @@ td:last-child {
     .mock-panes {
         grid-template-columns: 1fr;
         gap: 0;
-        padding: 0.35rem;
-    }
-
-    .mock-pane {
-        padding: 0.45rem;
-    }
-
-    .mock-pane.focused {
-        padding: calc(0.45rem - 1px);
+        padding: 0;
     }
 
     .mock-pane:nth-child(2) {
@@ -3422,10 +3456,6 @@ td:last-child {
     margin-top: 0.18em;
 }
 
-.herdr-ui-mock .mock-sidebar-spacer {
-    min-height: 0.2rem;
-}
-
 /* attach: sidebar populates once on load; view switches fade without movement */
 @keyframes mock-attach {
     from {
diff --git a/website/index.html b/website/index.html
index 61a45624..b883c506 100644
--- a/website/index.html
+++ b/website/index.html
@@ -57,7 +57,7 @@
                 document.documentElement.setAttribute("data-palette", saved || system);
             })();
         </script>
-        <link rel="stylesheet" href="/css/style.css?v=42" />
+        <link rel="stylesheet" href="/css/style.css?v=45" />
     </head>
     <body>
         <header class="site-header">
@@ -197,6 +197,7 @@
                         aria-label="Interactive Herdr session mock with workspaces, tabs, agent states, and terminal panes running Claude Code and Codex"
                     >
                         <aside class="mock-sidebar">
+                            <div class="mock-sidebar-half">
                             <div class="mock-sidebar-title">spaces</div>
                             <div class="mock-space active" data-ws="herdr">
                                 <span class="mock-dot dot-working"></span>
@@ -210,12 +211,14 @@
                                 <span class="mock-dot dot-done"></span>
                                 <div><strong>qmp</strong><small>autoresearch/qmp-ra…</small></div>
                             </div>
-                            <div class="mock-sidebar-spacer"></div>
-                            <div class="mock-agent-title"><span>agents</span><span>all</span></div>
-                            <div class="mock-agent working" data-agent="herdr" data-kind="claude" data-ws-link="herdr" data-tab-link="main"><span class="braille-spinner"></span><div><strong>herdr</strong><small>working · claude</small></div></div>
+                            </div>
+                            <div class="mock-sidebar-half mock-sidebar-agents">
+                            <div class="mock-agent-title"><span>agents</span><span>grouped</span></div>
+                            <div class="mock-agent working active" data-agent="herdr" data-kind="claude" data-ws-link="herdr" data-tab-link="main"><span class="braille-spinner"></span><div><strong>herdr</strong><small>working · claude</small></div></div>
                             <div class="mock-agent" data-agent="explore" data-kind="opencode" data-ws-link="herdr" data-tab-link="opencode"><span>✓</span><div><strong>explore</strong><small>idle · opencode</small></div></div>
                             <div class="mock-agent blocked" data-agent="llm-proxy" data-kind="claude" data-ws-link="llm-proxy" data-tab-link="main"><span>◉</span><div><strong>llm-proxy</strong><small>blocked · claude</small></div></div>
                             <div class="mock-agent done" data-agent="qmp" data-kind="codex" data-ws-link="qmp" data-tab-link="main"><span>●</span><div><strong>qmp</strong><small>done · codex</small></div></div>
+                            </div>
                         </aside>
                         <section class="mock-main">
                             <div class="mock-view active" data-view="herdr">
@@ -223,7 +226,7 @@
                                     <span data-tab="opencode">opencode</span><span class="active" data-tab="main">herdr</span><span>+</span>
                                 </div>
                                 <div class="mock-panes active" data-tab="main">
-                                    <div class="mock-pane focused tui">
+                                    <div class="mock-pane focused tui" data-title="claude">
                                         <div class="cc-head"><span class="cc-mark">✻</span> <b>Claude Code</b> <span class="dim">v2.1.168</span></div>
                                         <div class="dim">&nbsp;&nbsp;~/Projects/herdr · master</div>
                                         <br />
@@ -246,7 +249,7 @@
                                             <div class="dim">&gt;&gt; bypass permissions on (shift+tab to cycle)</div>
                                         </div>
                                     </div>
-                                    <div class="mock-pane">
+                                    <div class="mock-pane" data-title="bun">
                                         <div class="mock-prompt"><span>~/Projects/herdr</span> <em>master</em></div>
                                         <div><b>❯</b> <span class="cmd">bun</span> run dev</div>
                                         <div class="dim">$ node scripts/prepare-docs.mjs && astro dev</div>
@@ -1172,6 +1175,20 @@ $ herdr</code></pre>
                 var mock = document.getElementById("herd-mock");
                 if (!mock) return;
 
+                function syncAgents() {
+                    var view = mock.querySelector(".mock-view.active");
+                    var tab = view && view.querySelector(".mock-tabs span.active");
+                    var ws = view && view.getAttribute("data-view");
+                    var tabId = tab && tab.getAttribute("data-tab");
+                    mock.querySelectorAll(".mock-agent").forEach(function (a) {
+                        a.classList.toggle(
+                            "active",
+                            a.getAttribute("data-ws-link") === ws &&
+                                a.getAttribute("data-tab-link") === tabId
+                        );
+                    });
+                }
+
                 function selectTab(tab) {
                     var target = tab.getAttribute("data-tab");
                     if (!target) return;
@@ -1183,6 +1200,7 @@ $ herdr</code></pre>
                     view.querySelectorAll(".mock-panes").forEach(function (panes) {
                         panes.classList.toggle("active", panes.getAttribute("data-tab") === target);
                     });
+                    syncAgents();
                 }
 
                 function activateWorkspace(id, tabId) {
@@ -1197,6 +1215,7 @@ $ herdr</code></pre>
                         var tab = view && view.querySelector('.mock-tabs span[data-tab="' + tabId + '"]');
                         if (tab) selectTab(tab);
                     }
+                    syncAgents();
                 }
 
                 mock.querySelectorAll(".mock-space").forEach(function (ws) {