AM ligature mark; grid overview icon; sidebar polish (frame gap, play, mono panels, collapse count); settings de-box

web/src/components/Locked.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { SlidersGlyph, SunGlyph, PulseGlyph, PlusGlyph, AmMark } from './icons';
+import { SlidersGlyph, SunGlyph, GridGlyph, PlusGlyph, AmMark } from './icons';
 import Logo from './Logo';
 
 // A frozen, slightly dimmed replica of the real sidebar so the install page
@@ -40,7 +40,7 @@ function MockSidebar() {
       <div className="ov-fixed">
         <div className="row ov-row">
           <span className="status ov-spacer" />
-          <span className="ov-tile"><PulseGlyph /></span>
+          <span className="ov-tile"><GridGlyph /></span>
           <span className="name">overview</span>
         </div>
       </div>

web/src/components/Sidebar.tsx

@@ -4,7 +4,7 @@ import { STATE_LABEL } from '../types';
 import Logo from './Logo';
 import NewSession from './NewSession';
 import FolderPicker from './FolderPicker';
-import { SlidersGlyph, SunGlyph, MoonGlyph, CloseGlyph, PencilGlyph, StopGlyph, PulseGlyph, PlusGlyph, AmMark } from './icons';
+import { SlidersGlyph, SunGlyph, MoonGlyph, CloseGlyph, PencilGlyph, StopGlyph, PlayGlyph, GridGlyph, PlusGlyph, AmMark } from './icons';
 
 type Zone = 'before' | 'after' | 'on';
 
@@ -149,7 +149,9 @@ export default function Sidebar({
         )}
         <span className="age">{fmtAgo(ages?.[s.id])}</span>
         <span className="row-actions">
-          {s.running && <button className="mini-btn" title="Stop" onClick={(e) => { e.stopPropagation(); onStopSession(s.id); }}><StopGlyph /></button>}
+          {s.running
+            ? <button className="mini-btn" title="Stop" onClick={(e) => { e.stopPropagation(); onStopSession(s.id); }}><StopGlyph /></button>
+            : <button className="mini-btn" title="Start" onClick={(e) => { e.stopPropagation(); onOpenSession(s.id, groupId); }}><PlayGlyph /></button>}
           <button className="mini-btn" title="Delete" onClick={(e) => { e.stopPropagation(); onDeleteSession(s.id); }}><CloseGlyph /></button>
         </span>
       </div>
@@ -183,7 +185,7 @@ export default function Sidebar({
           ) : (
             <>
               <span className="name">{g.name}</span>
-              <span className="count">{g.sessionIds.length}</span>
+              {!open && <span className="count">{g.sessionIds.length}</span>}
               <span className="row-actions">
                 <button className="mini-btn" title="Rename" onClick={(e) => { e.stopPropagation(); startEdit(ref, g.name); }}><PencilGlyph /></button>
                 <button className="mini-btn" title="Delete group" onClick={(e) => { e.stopPropagation(); onDeleteGroup(g.id); }}><CloseGlyph /></button>
@@ -274,7 +276,7 @@ export default function Sidebar({
           title="All agents: digests, states, replies"
         >
           <span className="status ov-spacer" />
-          <span className="ov-tile"><PulseGlyph /></span>
+          <span className="ov-tile"><GridGlyph /></span>
           <span className="name">overview</span>
           {waiting > 0 && <span className="ov-wait">{waiting} waiting</span>}
         </div>

web/src/components/icons.tsx

@@ -67,6 +67,12 @@ export const CloseGlyph = ({ className }: { className?: string }) => (
   </G>
 );
 
+export const PlayGlyph = ({ className }: { className?: string }) => (
+  <G className={className}>
+    <path d="M5.6 3.9v8.2L12.4 8z" />
+  </G>
+);
+
 export const StopGlyph = ({ className }: { className?: string }) => (
   <svg className={className} viewBox="0 0 16 16" fill="currentColor">
     <rect x="4.4" y="4.4" width="7.2" height="7.2" rx="1.4" />
@@ -98,18 +104,27 @@ export const PulseGlyph = ({ className }: { className?: string }) => (
   </G>
 );
 
+// Overview: four panes at a glance — what the page literally is.
+export const GridGlyph = ({ className }: { className?: string }) => (
+  <G className={className}>
+    <rect x="2.2" y="2.2" width="4.8" height="4.8" rx="0.8" />
+    <rect x="9" y="2.2" width="4.8" height="4.8" rx="0.8" />
+    <rect x="2.2" y="9" width="4.8" height="4.8" rx="0.8" />
+    <rect x="9" y="9" width="4.8" height="4.8" rx="0.8" />
+  </G>
+);
+
 export const PlusGlyph = ({ className }: { className?: string }) => (
   <G className={className}>
     <path d="M8 3.2v9.6M3.2 8h9.6" />
   </G>
 );
 
-// The AM monogram: rectangular A (two verticals, top bar, crossbar) and
-// M (three verticals joined at the top). One 4-unit stroke, 4-unit counters.
+// The AM ligature: rectangular A and M sharing their middle stroke under one
+// continuous roof. One 4-unit stroke, 4-unit counters.
 export const AmMark = ({ className }: { className?: string }) => (
-  <svg className={className} viewBox="0 0 38 24" fill="currentColor" aria-label="Agent Manager">
-    <path fillRule="evenodd" d="M0 0H12V24H8V14H4V24H0ZM4 4H8V10H4Z" />
-    <path d="M18 0H38V24H34V4H30V24H26V4H22V24H18Z" />
+  <svg className={className} viewBox="0 0 28 24" fill="currentColor" aria-label="Agent Manager">
+    <path fillRule="evenodd" d="M0 0H28V24H24V4H20V24H16V4H12V24H8V14H4V24H0ZM4 4H8V10H4Z" />
   </svg>
 );
 

web/src/styles.css

@@ -87,7 +87,7 @@ body {
 .brand h1 { font-size: 14px; margin: 0; letter-spacing: -0.01em; white-space: nowrap; }
 .brand .brand-actions { display: flex; gap: 4px; flex: none; }
 /* AM monogram — the brand mark */
-.am-mark { width: 21px; height: 13px; color: var(--accent); flex: none; display: block; }
+.am-mark { width: 16px; height: 13.7px; color: var(--accent); flex: none; display: block; }
 .icon-btn.add-btn { color: var(--accent); }
 .icon-btn.add-btn:hover, .icon-btn.add-btn.on { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); color: var(--accent); }
 .icon-btn { background: transparent; border: 1px solid var(--border); color: var(--muted); border-radius: var(--r-md); width: 32px; height: 30px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
@@ -308,7 +308,10 @@ body {
 .row.group-head .name { flex: initial; font-size: 11.5px; font-weight: 400; color: var(--text); }
 .row.group-head:hover .name { color: var(--accent); }
 .row.group-head .rename { width: 130px; flex: none; }
-.row.group-head .row-actions { position: static; transform: none; background: var(--panel); }
+/* actions must not reserve space when hidden — an invisible-but-present span
+   would stretch the label's frame punch-out and leave a gap in the border */
+.row.group-head .row-actions { position: static; transform: none; background: var(--panel); display: none; opacity: 1; pointer-events: auto; }
+.row.group-head:hover .row-actions, .row.group-head:focus-within .row-actions { display: flex; }
 .row.group-head:hover .count { display: none; }
 /* per-group + on the frame line, revealed on hover */
 .g-add { position: absolute; top: -9px; right: 8px; background: var(--panel); border: none; color: var(--muted); padding: 0 4px; cursor: pointer; opacity: 0; transition: opacity 0.12s; z-index: 1; }
@@ -326,8 +329,12 @@ body {
 .status.stopped { background: transparent; border: 1.5px solid var(--muted); opacity: 0.5; }
 
 /* quick-add utilities (shell / files) pinned above the legend */
-.quick-add { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--border); }
-.quick-add .btn-ghost { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 6px 8px; font-size: 12.5px; }
+.quick-add { display: flex; gap: 6px; padding: 10px 10px; border-top: 1px solid var(--border); }
+.quick-add .btn-ghost { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 5.5px 8px; font-family: var(--font-mono); font-size: 12px; font-weight: 500; border-radius: var(--r-sm); }
+/* the create panel speaks the same dense mono voice as the rows */
+.controls .btn-primary, .controls .btn-ghost { font-family: var(--font-mono); font-size: 12px; font-weight: 500; padding: 6px 10px; border-radius: var(--r-sm); }
+.controls .widget input, .controls .widget select, .controls .agent-pick, .controls .fp-current { font-size: 12.5px; }
+.controls .seg button { font-family: var(--font-mono); }
 
 .legend { display: flex; flex-wrap: wrap; gap: 6px 12px; padding: 10px 16px; border-top: 1px solid var(--border); font-size: 10.5px; color: var(--muted); }
 .legend span { display: inline-flex; align-items: center; gap: 5px; }
@@ -486,9 +493,9 @@ a.btn-ghost { text-decoration: none; }
 .s-help { color: var(--muted); font-size: 12.5px; line-height: 1.5; margin: 2px 0 0; }
 .s-muted { color: var(--muted); }
 /* agents: one hairline row per CLI — dot · logo · name · version · state */
-/* no overflow clip: the (i) setup hint pops outside the row */
-.agent-rows { display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg); margin-top: 8px; }
-.agent-row { display: flex; align-items: center; gap: 10px; padding: 9px 14px; font-size: 13px; }
+/* plain hairline rows — no box (sidebar voice: boundaries only where they mean something) */
+.agent-rows { display: flex; flex-direction: column; margin-top: 4px; }
+.agent-row { display: flex; align-items: center; gap: 10px; padding: 9px 2px; font-size: 13px; }
 .agent-row + .agent-row { border-top: 1px solid var(--border); }
 .agent-row .spacer { flex: 1; }
 .ar-name { white-space: nowrap; font-weight: 500; }
@@ -513,8 +520,8 @@ a.btn-ghost { text-decoration: none; }
   transition: opacity 0.12s ease, transform 0.12s ease;
 }
 .tip:hover::after, .tip:focus-visible::after { opacity: 1; transform: none; }
-.kv { display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-xl); overflow: hidden; margin-top: 8px; }
-.kv > div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 16px; border-bottom: 1px solid var(--border); font-size: 13px; }
+.kv { display: flex; flex-direction: column; margin-top: 4px; }
+.kv > div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 2px; border-bottom: 1px solid var(--border); font-size: 13px; }
 .kv > div:last-child { border-bottom: none; }
 .kv span { color: var(--muted); }
 .kv b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 65%; }