Overview tiles + conversation window; archive inactive sessions

The Overview's default is now a compact tile grid: status dot, one-line
prompt, and a state line (spinning "running", "✓ done", "stopped") per
session, groups wrapped in a fine fieldset-style outline, and an accent
ring only on your-turn tiles fresher than a day. Clicking a tile opens
a conversation window over the grid — the full card (turn arrows, live
running state, reply) plus open-pane and close. The old list stays one
toggle away (icon segment next to the filters, both centered in the
bottom bar); the reply line everywhere is now a textarea where
shift+enter inserts a newline.

Sessions with no activity beyond a configurable window (Settings: 1
week / 1 month / never, default 1 month) are archived: hidden from the
sidebar and overview, nothing stored or deleted — flipping the setting
instantly (un)archives, working sessions and shells/files panes are
exempt. The sidebar legend (now working / idle / stopped) gains a quiet
"archived" checkbox to reveal them greyed out, and the tree notes "not
showing N archived sessions" at its foot.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

server/src/index.js

@@ -329,6 +329,11 @@ function loadAmConfig() {
       // 0 = always ask first.
       askAboveUsd: Number.isFinite(saved.jobs?.askAboveUsd) ? Math.max(0, saved.jobs.askAboveUsd) : 0,
     },
+    // Sessions with no activity beyond this window are hidden from the sidebar
+    // and overview (derived client-side; nothing is deleted).
+    archive: {
+      after: ['week', 'month', 'never'].includes(saved.archive?.after) ? saved.archive.after : 'month',
+    },
   };
 }
 app.get('/api/config', (_req, res) => res.json({ ...loadAmConfig(), defaultArtifactsSpace: defaultArtifactsSpace() }));
@@ -341,6 +346,7 @@ app.put('/api/config', (req, res) => {
       visibility: b.artifacts?.visibility === 'public' ? 'public' : 'private',
     },
     jobs: { askAboveUsd: Math.max(0, Number(b.jobs?.askAboveUsd) || 0) },
+    archive: { after: ['week', 'month', 'never'].includes(b.archive?.after) ? b.archive.after : 'month' },
   };
   try { fs.writeFileSync(AM_CONFIG_FILE, JSON.stringify(cfg, null, 2)); } catch {}
   generateEnvSkill(loadSecretNotes());

web/src/App.tsx

@@ -11,6 +11,7 @@ import Locked from './components/Locked';
 import Welcome from './components/Welcome';
 import * as api from './api';
 import type { Cli, GridSpec, MoveTarget, OverviewFilter, Session, Tree } from './types';
+import { GridGlyph, ListGlyph } from './components/icons';
 
 // Phone-sized viewport: the app becomes two full-screen views (list ⇄ pane).
 function useIsMobile() {
@@ -57,6 +58,15 @@ export default function App() {
   // Transient error toast for failed mutations (create/delete/move/…).
   const [toast, setToast] = useState<string | null>(null);
   const showErr = (msg: string) => (e: unknown) => { console.error(msg, e); setToast(msg); window.setTimeout(() => setToast(null), 4000); };
+  // Overview presentation: tiles (default) or the classic list.
+  const [ovView, setOvViewRaw] = useState<'tiles' | 'list'>(() =>
+    (localStorage.getItem('am-ov-view') === 'list' ? 'list' : 'tiles'));
+  const setOvView = (v: 'tiles' | 'list') => { setOvViewRaw(v); localStorage.setItem('am-ov-view', v); };
+  // Archiving: sessions quiet for longer than the configured window are hidden
+  // from the sidebar and overview unless "archived" is checked. Derived, never
+  // stored — flipping the setting instantly (un)archives.
+  const [showArchived, setShowArchived] = useState(false);
+  const [archiveAfter, setArchiveAfter] = useState<'week' | 'month' | 'never'>('month');
   const [zoom, setZoom] = useState<number>(() => {
     const z = parseInt(localStorage.getItem('am-zoom') || '100', 10);
     return Number.isFinite(z) ? z : 100;
@@ -152,6 +162,25 @@ export default function App() {
     return () => { alive = false; clearInterval(t); };
   }, []);
 
+  // Archive threshold from the operator config; refresh when settings closes
+  // (that's where it's edited).
+  useEffect(() => {
+    if (settingsOpen) return;
+    api.getConfig().then((c) => setArchiveAfter(c.archive?.after ?? 'month')).catch(() => {});
+  }, [settingsOpen]);
+  const archivedIds = useMemo(() => {
+    const out = new Set<string>();
+    if (archiveAfter === 'never') return out;
+    const cut = Date.now() - (archiveAfter === 'week' ? 7 : 30) * 864e5;
+    for (const s of tree.sessions) {
+      // Shells and file panes have no trace clock — never archive them.
+      if (s.cli === 'shell' || s.cli === 'files' || s.state === 'working') continue;
+      const last = ages[s.id] || Date.parse(s.createdAt) || 0;
+      if (last && last < cut) out.add(s.id);
+    }
+    return out;
+  }, [tree.sessions, ages, archiveAfter]);
+
   const cliMap = useMemo(() => Object.fromEntries(clis.map((c) => [c.id, c])), [clis]);
   const sessById = useMemo(() => Object.fromEntries(tree.sessions.map((s) => [s.id, s])), [tree.sessions]);
   const groupById = useMemo(() => Object.fromEntries(tree.groups.map((g) => [g.id, g])), [tree.groups]);
@@ -438,6 +467,9 @@ export default function App() {
         theme={theme}
         onToggleTheme={toggleTheme}
         onQuickStart={quickStart}
+        archived={archivedIds}
+        showArchived={showArchived}
+        onToggleArchived={() => setShowArchived((v) => !v)}
       />
 
       <div className="main">
@@ -464,6 +496,9 @@ export default function App() {
               clis={clis}
               tree={tree}
               filter={ovFilter}
+              view={ovView}
+              archived={archivedIds}
+              showArchived={showArchived}
               onOpen={(sid) => {
                 const g = tree.groups.find((x) => x.sessionIds.includes(sid));
                 openSession(sid, g?.id);
@@ -496,7 +531,7 @@ export default function App() {
           )}
         </div>
         {activeRef === 'overview' && (
-          <div className="zoombar">
+          <div className="zoombar ov-bar">
             <div className="seg ov-seg">
               {(['all', 'waiting', 'working', 'quiet'] as OverviewFilter[]).map((f) => (
                 <button key={f} className={ovFilter === f ? 'on' : ''} onClick={() => setOvFilter(f)}>
@@ -504,7 +539,10 @@ export default function App() {
                 </button>
               ))}
             </div>
-            <span className="spacer" />
+            <div className="seg ov-seg ov-viewseg">
+              <button className={ovView === 'tiles' ? 'on' : ''} title="Tiles" onClick={() => setOvView('tiles')}><GridGlyph /></button>
+              <button className={ovView === 'list' ? 'on' : ''} title="List" onClick={() => setOvView('list')}><ListGlyph /></button>
+            </div>
           </div>
         )}
         {showZoom && (

web/src/api.ts

@@ -60,6 +60,7 @@ export const relaunchSpace = (): Promise<{ ok: boolean; reason?: string }> =>
 export interface AmConfig {
   artifacts: { enabled: boolean; space: string; visibility: 'public' | 'private' };
   jobs: { askAboveUsd: number };
+  archive: { after: 'week' | 'month' | 'never' };
   defaultArtifactsSpace?: string;
 }
 export const getConfig = (): Promise<AmConfig> => fetch('/api/config').then(json);

web/src/components/Overview.tsx

@@ -25,10 +25,11 @@ const Caret = () => (
   <svg className="ov-caret" viewBox="0 0 10 10" aria-hidden="true"><path d="M1.8 3.2h6.4L5 7.4z" fill="currentColor" /></svg>
 );
 
-function Card({ s, color, onOpen }: {
+function Card({ s, color, onOpen, onClose }: {
   s: MetaSession;
   color?: string;
   onOpen: (sid: string) => void;
+  onClose?: () => void; // present when the card lives in the conversation window
 }) {
   const d = s.digest;
   const [draft, setDraft] = useState('');
@@ -37,7 +38,7 @@ function Card({ s, color, onOpen }: {
   const [sentAt, setSentAt] = useState(0);
   const [expanded, setExpanded] = useState(false);
   const [histIdx, setHistIdx] = useState(0); // 0 = live view, n = n-th exchange back
-  const inputRef = useRef<HTMLInputElement>(null);
+  const inputRef = useRef<HTMLTextAreaElement>(null);
 
   // After you send (or when the transcript shows a prompt newer than the last
   // answer), the old answer is stale — a spinner takes its place.
@@ -62,7 +63,7 @@ function Card({ s, color, onOpen }: {
       setDraft('');
       setSentAt(Date.now());
       setHistIdx(0);
-      inputRef.current?.blur();
+      if (inputRef.current) { inputRef.current.style.height = 'auto'; inputRef.current.blur(); }
     } catch {
       setFailed(true);
       setTimeout(() => setFailed(false), 4000);
@@ -93,6 +94,7 @@ function Card({ s, color, onOpen }: {
         {ago && <span className="ov-ago">· {ago}</span>}
         <span className="spacer" />
         <span className="ov-go">open ↗</span>
+        {onClose && <button className="ov-x" onClick={(e) => { e.stopPropagation(); onClose(); }} title="Close">✕</button>}
       </div>
 
       {promptText ? (
@@ -140,8 +142,9 @@ function Card({ s, color, onOpen }: {
 
       <div className="ov-live">
         <span className="ov-p mono">❯</span>
-        <input
+        <textarea
           ref={inputRef}
+          rows={1}
           value={draft}
           disabled={sending}
           placeholder={sending ? 'sending…' : 'reply…'}
@@ -149,34 +152,73 @@ function Card({ s, color, onOpen }: {
           autoCorrect="off"
           autoCapitalize="off"
           spellCheck={false}
-          enterKeyHint="send"
-          onChange={(e) => setDraft(e.target.value)}
+          onChange={(e) => { setDraft(e.target.value); e.currentTarget.style.height = 'auto'; e.currentTarget.style.height = `${e.currentTarget.scrollHeight}px`; }}
           // iOS doesn't resize the layout for the keyboard — scroll the
           // input into view once the keyboard has animated in.
           onFocus={(e) => { const el = e.currentTarget; setTimeout(() => el.scrollIntoView({ block: 'center', behavior: 'smooth' }), 300); }}
           onKeyDown={(e) => {
-            if (e.key === 'Enter') send();
+            if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); send(); }
             if (e.key === 'Escape') { setDraft(''); inputRef.current?.blur(); }
           }}
         />
-        {draft.trim() && <span className="ov-hint">↵ send</span>}
+        {draft.trim() && <span className="ov-hint">↵ send · ⇧↵ newline</span>}
       </div>
       {failed && <div className="ov-note">failed to reach the agent</div>}
     </div>
   );
 }
 
+/** Compact tile: status + prompt + state; click opens the conversation window. */
+function Tile({ s, color, dim, onOpen }: { s: MetaSession; color?: string; dim?: boolean; onOpen: () => void }) {
+  const d = s.digest;
+  const running = !!d?.running || s.state === 'working';
+  const last = Math.max(d?.lastAssistantTs || 0, d?.lastPromptTs || 0) || Date.parse(s.createdAt) || 0;
+  // ring = waiting on you AND recent — a fleet where everything is "waiting
+  // since last week" shouldn't glow everywhere
+  const fresh = s.state === 'waiting' && Date.now() - last < 24 * 3600e3;
+  return (
+    <div className={`ovt-tile${fresh ? ' attn' : ''}${dim ? ' archived' : ''}`} onClick={onOpen}>
+      <div className="ovt-head">
+        <span className={`status ${s.state}`} />
+        <Logo cli={s.cli} size={12} tint={color} />
+        <span className="ovt-name mono">{s.name}</span>
+        <span className="ovt-ago">{fmtAgo(last)}</span>
+      </div>
+      {d?.lastPromptText
+        ? <div className="ovt-prompt" title={d.lastPromptText}>{d.lastPromptText}</div>
+        : <div className="ovt-prompt none">no prompt yet</div>}
+      {running
+        ? <div className="ovt-state running mono">running</div>
+        : s.state === 'stopped'
+          ? <div className="ovt-state stopped mono">stopped</div>
+          : d?.lastAssistantText
+            ? <div className="ovt-state done mono">✓ done</div>
+            : <div className="ovt-state idle mono">idle</div>}
+    </div>
+  );
+}
+
 /** Mission control: one reading column — group capsules with their agents as
  *  slabs, loose agents as standalone panels. */
-export default function Overview({ clis, tree, filter, onOpen }: {
+export default function Overview({ clis, tree, filter, view, archived, showArchived, onOpen }: {
   clis: Cli[];
   tree: Tree;
   filter: OverviewFilter; // controlled by the bottom bar in App
+  view: 'tiles' | 'list'; // controlled by the bottom bar in App
+  archived: Set<string>;
+  showArchived: boolean;
   onOpen: (sid: string) => void;
 }) {
   const [meta, setMeta] = useState<Record<string, MetaSession> | null>(null);
   const [collapsed, setCollapsed] = useState<Set<string>>(new Set());
   const [durs, setDurs] = useState<Record<string, number>>({});
+  const [openId, setOpenId] = useState<string | null>(null); // conversation window
+  useEffect(() => {
+    if (!openId) return;
+    const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape') setOpenId(null); };
+    document.addEventListener('keydown', onKey);
+    return () => document.removeEventListener('keydown', onKey);
+  }, [openId]);
 
   useEffect(() => {
     let alive = true;
@@ -195,7 +237,8 @@ export default function Overview({ clis, tree, filter, onOpen }: {
 
   if (!meta) return <div className="ov-wrap"><div className="ov-feed"><div className="usage-msg mono">reading traces…<span className="et-cursor" /></div></div></div>;
 
-  const visible = (s: MetaSession) => filter === 'all' || bucket(s.state) === filter;
+  const visible = (s: MetaSession) =>
+    (filter === 'all' || bucket(s.state) === filter) && (showArchived || !archived.has(s.id));
 
   // Collapse at constant velocity: duration follows the group's height.
   const toggleGroup = (gid: string, el: HTMLElement) => {
@@ -215,6 +258,60 @@ export default function Overview({ clis, tree, filter, onOpen }: {
     );
   };
 
+  // ---- tile view: loose sessions pack into grids, groups get a fine outline ----
+  const tileFor = (s: Session) => {
+    const m = dataFor(s);
+    if (!visible(m)) return null;
+    return <Tile key={s.id} s={m} color={colorOf[s.cli]} dim={archived.has(s.id)} onOpen={() => setOpenId(s.id)} />;
+  };
+  const tileBlocks: ReactNode[] = [];
+  let looseTiles: ReactNode[] = [];
+  const flushLoose = () => {
+    if (looseTiles.length) tileBlocks.push(<div className="ovt-grid" key={`loose-${tileBlocks.length}`}>{looseTiles}</div>);
+    looseTiles = [];
+  };
+  for (const ref of tree.order) {
+    if (ref.startsWith('s:')) {
+      const s = sessById[ref.slice(2)];
+      if (s && eligible(s)) { const t = tileFor(s); if (t) looseTiles.push(t); }
+    } else {
+      const g = groupById[ref.slice(2)];
+      if (!g) continue;
+      const members = g.sessionIds.map((id) => sessById[id]).filter(Boolean).filter(eligible) as Session[];
+      const shown = members.map(tileFor).filter(Boolean);
+      if (!shown.length) continue;
+      flushLoose();
+      tileBlocks.push(
+        <div key={g.id} className="ovt-group">
+          <span className="ovt-glabel mono">{g.name}<span className="ovt-gn"> {shown.length}</span></span>
+          <div className="ovt-grid">{shown}</div>
+        </div>,
+      );
+    }
+  }
+  flushLoose();
+
+  const openSess = openId ? sessById[openId] : null;
+  const windowEl = openSess && (
+    <div className="ovw-backdrop" onClick={() => setOpenId(null)}>
+      <div className="ovw-win" onClick={(e) => e.stopPropagation()}>
+        <Card s={dataFor(openSess)} color={colorOf[openSess.cli]} onOpen={onOpen} onClose={() => setOpenId(null)} />
+      </div>
+    </div>
+  );
+
+  if (view === 'tiles') {
+    return (
+      <div className="ov-wrap">
+        <div className="ov-feed ovt-feed">
+          {tileBlocks.length === 0 && <div className="usage-msg mono">{filter === 'all' ? 'no agents yet — shells and file panes don’t appear here.' : 'nothing in this state.'}</div>}
+          {tileBlocks}
+        </div>
+        {windowEl}
+      </div>
+    );
+  }
+
   const blocks: ReactNode[] = [];
   for (const ref of tree.order) {
     if (ref.startsWith('s:')) {

web/src/components/SettingsView.tsx

@@ -341,6 +341,22 @@ export default function SettingsView({
                     />
                   </span>
                 </div>
+
+                <div className="setting-row">
+                  <div>
+                    <div className="s-label">Archive inactive sessions</div>
+                    <div className="s-help">Sessions with no activity beyond this window disappear from the sidebar and overview. Nothing is deleted; the "archived" checkbox in the sidebar brings them back.</div>
+                  </div>
+                  <span className="cfg-ctl">
+                    <div className="seg cfg-seg">
+                      {(['week', 'month', 'never'] as const).map((a) => (
+                        <button key={a} className={cfg.archive.after === a ? 'on' : ''} onClick={() => setCfg({ ...cfg, archive: { after: a } })}>
+                          {a === 'week' ? '1 week' : a === 'month' ? '1 month' : 'never'}
+                        </button>
+                      ))}
+                    </div>
+                  </span>
+                </div>
               </>
             )}
 

web/src/components/Sidebar.tsx

@@ -21,6 +21,7 @@ export default function Sidebar({
   clis, tree, activeRef, focusedId, defaultPath, ages,
   onActivate, onOpenSession, onNewSession, onNewGroup, onRenameGroup, onRenameSession, onDeleteGroup,
   onStopSession, onDeleteSession, onMove, onDragState, onOpenSettings, theme, onToggleTheme, onQuickStart,
+  archived, showArchived, onToggleArchived,
 }: {
   clis: Cli[];
   tree: Tree;
@@ -42,12 +43,18 @@ export default function Sidebar({
   onDragState?: (ref: string | null) => void; // lets the stage offer per-tile drop targets
   theme: 'light' | 'dark';
   onToggleTheme: () => void;
-  onQuickStart: (cli: string, prompt: string) => void;
+  onQuickStart: (cli: string, prompt: string, name?: string, path?: string) => void;
+  archived: Set<string>;
+  showArchived: boolean;
+  onToggleArchived: () => void;
 }) {
   const [panel, setPanel] = useState<'none' | 'create' | 'quick'>('none');
+  const [quickMode, setQuickMode] = useState<'agent' | 'group'>('agent');
   const [quickCli, setQuickCli] = useState<string | null>(null);
   const [quickPrompt, setQuickPrompt] = useState('');
-  const [createTab, setCreateTab] = useState<'agent' | 'group'>('agent');
+  const [quickMore, setQuickMore] = useState(false); // reveals name + folder
+  const [quickName, setQuickName] = useState('');
+  const [quickLoc, setQuickLoc] = useState('.');
   // When creation was launched from a group's + the new agent lands there.
   const [createTarget, setCreateTarget] = useState<string | null>(null);
   const [groupName, setGroupName] = useState('');
@@ -65,12 +72,12 @@ export default function Sidebar({
   const waiting = tree.sessions.filter((s) => s.state === 'waiting').length;
 
   const clearDrag = () => { setDragRef(null); setDrop(null); onDragState?.(null); };
+  // Archived sessions vanish from the tree unless the legend checkbox is on.
+  const isHidden = (id: string) => !showArchived && archived.has(id);
   const bump = (id: string, d: number) => setCart((c) => ({ ...c, [id]: Math.max(0, (c[id] || 0) + d) }));
   const closePanel = () => { setPanel('none'); setCreateTarget(null); };
-  const openCreate = (tab: 'agent' | 'group', target: string | null = null) => {
-    setCreateTab(tab);
+  const openCreate = (target: string | null = null) => {
     setCreateTarget(target);
-    setGroupLoc(defaultPath || '.');
     setPanel('create');
   };
   // Quickstart: one harness pick + one prompt, agent launches in workspace/.
@@ -145,7 +152,7 @@ export default function Sidebar({
     return (
       <div
         key={s.id}
-        className={`row session${active ? ' active' : ''}${nested ? ' nested' : ''}${dragRef === ref ? ' dragging' : ''}${dnd.className}`}
+        className={`row session${active ? ' active' : ''}${nested ? ' nested' : ''}${archived.has(s.id) ? ' archived' : ''}${dragRef === ref ? ' dragging' : ''}${dnd.className}`}
         draggable={dnd.draggable}
         onDragStart={dnd.onDragStart} onDragEnd={dnd.onDragEnd} onDragOver={dnd.onDragOver} onDrop={dnd.onDrop}
         onClick={() => onOpenSession(s.id, groupId)}
@@ -341,9 +348,20 @@ export default function Sidebar({
         {tree.order.length === 0 && (
           <div className="empty-hint">Nothing yet. Add an agent with the + above.<br />Drag an agent onto another to group them.</div>
         )}
-        {tree.order.map((ref) => (ref.startsWith('s:')
-          ? (sessById[ref.slice(2)] ? SessionRow(sessById[ref.slice(2)]) : null)
-          : (groupById[ref.slice(2)] ? GroupBlock(groupById[ref.slice(2)]) : null)))}
+        {tree.order.map((ref) => {
+          if (ref.startsWith('s:')) {
+            const s = sessById[ref.slice(2)];
+            return s && !isHidden(s.id) ? SessionRow(s) : null;
+          }
+          const g = groupById[ref.slice(2)];
+          if (!g) return null;
+          // a group whose members are ALL archived disappears with them
+          const anyVisible = g.sessionIds.length === 0 || g.sessionIds.some((sid) => sessById[sid] && !isHidden(sid));
+          return anyVisible ? GroupBlock(g) : null;
+        })}
+        {!showArchived && archived.size > 0 && (
+          <div className="arch-note">not showing {archived.size} archived session{archived.size === 1 ? '' : 's'}</div>
+        )}
       </div>
 
       {/* Quick-add utilities: created instantly with a default name (double-
@@ -359,9 +377,15 @@ export default function Sidebar({
 
       <div className="legend">
         <span><span className="status working" /> working</span>
-        <span><span className="status waiting" /> your turn</span>
-        <span><span className="status idle" /> idle</span>
+        <span><span className="status waiting" /> idle</span>
         <span><span className="status stopped" /> stopped</span>
+        {archived.size > 0 && (
+          <label className="legend-arch" title="Sessions with no activity beyond the archive window (Settings)">
+            <input type="checkbox" checked={showArchived} onChange={onToggleArchived} />
+            <span className="lbox" />
+            archived
+          </label>
+        )}
       </div>
     </aside>
   );

web/src/components/icons.tsx

@@ -35,6 +35,15 @@ export const SlidersGlyph = ({ className }: { className?: string }) => (
   </G>
 );
 
+export const ListGlyph = ({ className }: { className?: string }) => (
+  <G className={className}>
+    <path d="M5.6 4.2h8.2M5.6 8h8.2M5.6 11.8h8.2" />
+    <circle cx="2.6" cy="4.2" r="0.9" fill="currentColor" stroke="none" />
+    <circle cx="2.6" cy="8" r="0.9" fill="currentColor" stroke="none" />
+    <circle cx="2.6" cy="11.8" r="0.9" fill="currentColor" stroke="none" />
+  </G>
+);
+
 export const BoltGlyph = ({ className }: { className?: string }) => (
   <G className={className}>
     <path d="M8.9 1.6 3.9 8.9h3.2l-1 5.5 5-7.3H7.9l1-5.5z" strokeLinejoin="round" />

web/src/styles.css

@@ -72,6 +72,10 @@ body {
 .stage { flex: 1; min-height: 0; }
 .zoombar { display: flex; align-items: center; gap: 4px; padding: 4px 8px; margin-top: 8px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg); flex: none; }
 .zoombar .spacer { flex: 1; }
+/* overview bottom bar: filter + view segments, centered */
+.zoombar.ov-bar { justify-content: center; gap: 8px; }
+.ov-viewseg button { display: inline-flex; align-items: center; padding: 4.5px 9px; }
+.ov-viewseg svg { width: 13px; height: 13px; }
 
 /* transparent CLI logos; invert the mostly-black ones in dark mode */
 .cli-logo { flex: none; display: inline-flex; align-items: center; justify-content: center; }
@@ -268,16 +272,44 @@ body {
   50% { content: '⠼'; } 62.5% { content: '⠴'; } 75% { content: '⠦'; } 87.5% { content: '⠧'; }
 }
 
+/* ---- overview tile view: compact grid, groups outlined fieldset-style ---- */
+.ovt-feed { gap: 16px; }
+.ovt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(225px, 1fr)); gap: 10px; }
+.ovt-tile { background: var(--panel); border: 1px solid var(--border); border-radius: 11px; padding: 10px 12px 9px; cursor: pointer; display: flex; flex-direction: column; gap: 6px; min-width: 0; transition: border-color 0.12s, transform 0.12s; }
+.ovt-tile:hover { border-color: var(--border-strong); transform: translateY(-1px); }
+.ovt-tile.attn { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent); }
+.ovt-head { display: flex; align-items: center; gap: 7px; min-width: 0; }
+.ovt-name { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ovt-ago { color: var(--muted); font-size: 11px; flex: none; margin-left: auto; }
+.ovt-prompt { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ovt-prompt::before { content: '❯ '; font-family: var(--font-mono); color: var(--accent); font-weight: 700; }
+.ovt-prompt.none { color: var(--muted); font-style: italic; }
+.ovt-prompt.none::before { color: var(--border-strong); }
+.ovt-state { font-size: 10.5px; color: var(--muted); }
+.ovt-state.running { color: var(--accent); }
+.ovt-state.running::before { content: '⠋ '; display: inline-block; animation: ov-spin 0.9s steps(1) infinite; }
+.ovt-state.stopped { opacity: 0.7; }
+.ovt-group { position: relative; border: 1px solid var(--border); border-radius: 13px; padding: 12px 10px 10px; margin-top: 6px; }
+.ovt-glabel { position: absolute; top: -8px; left: 14px; background: var(--bg); padding: 0 7px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; color: var(--muted); }
+.ovt-gn { color: var(--border-strong); }
+/* conversation window: the full card, centered over the grid */
+.ovw-backdrop { position: fixed; inset: 0; z-index: 120; display: flex; align-items: flex-start; justify-content: center; padding: 7vh 20px 20px; background: color-mix(in srgb, #000 52%, transparent); backdrop-filter: blur(3px); animation: rise-in 0.15s ease-out; }
+.ovw-win { width: 100%; max-width: 640px; max-height: 82vh; overflow-y: auto; background: var(--panel); border: 1px solid var(--border); border-radius: 13px; box-shadow: 0 24px 60px rgb(0 0 0 / 0.4); }
+.ovw-win .ov-card { padding: 14px 17px 12px; }
+.ov-x { background: none; border: none; color: var(--muted); font-size: 13px; cursor: pointer; padding: 0 2px 0 8px; flex: none; }
+.ov-x:hover { color: var(--text); }
+
 /* reply: a quiet, always-there input line — its ❯ mirrors the prompt's */
 .ov-live { display: flex; gap: 8px; align-items: center; border-top: 1px solid var(--border); padding-top: 7px; font-size: 13px; }
 .ov-live .ov-p { color: var(--accent); font-weight: 700; font-size: 13px; }
-.ov-live input { flex: 1; min-width: 0; border: none; background: none; font: inherit; font-size: 13px; color: var(--text); outline: none; padding: 2px 0; }
-.ov-live input::placeholder { color: var(--muted); opacity: 0.7; }
+.ov-live textarea { flex: 1; min-width: 0; border: none; background: none; font: inherit; font-size: 13px; line-height: 1.45; color: var(--text); outline: none; padding: 2px 0; resize: none; overflow: hidden; max-height: 140px; }
+.ov-live textarea::placeholder { color: var(--muted); opacity: 0.7; }
 .ov-hint { font-size: 10.5px; color: var(--muted); flex: none; }
 .ov-note { font-size: 11px; color: var(--danger); }
 
 /* tree */
-.tree { flex: 1; overflow-y: auto; padding: 6px 8px 10px; }
+.tree { flex: 1; overflow-y: auto; padding: 6px 8px 10px; display: flex; flex-direction: column; }
+.tree > * { flex: none; } /* rows keep their natural height; the arch-note's margin-top:auto sinks it */
 .empty-hint { color: var(--muted); font-size: 12px; padding: 12px 10px; line-height: 1.5; }
 .empty-hint.nested { padding: 6px 10px 8px 38px; font-size: 11.5px; }
 
@@ -360,8 +392,19 @@ body {
 .controls .fp-path { font-size: 12px; }
 .controls .seg button { font-family: var(--font-mono); font-size: 11.5px; padding: 4px 8px; }
 
-.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 { display: flex; flex-wrap: wrap; align-items: center; 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; }
+/* archived toggle: a quiet custom checkbox speaking the app's language */
+.legend-arch { position: relative; display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
+.legend-arch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
+.legend-arch .lbox { width: 11px; height: 11px; flex: none; border: 1px solid var(--border-strong); border-radius: 3.5px; background: var(--panel-2); display: inline-flex; align-items: center; justify-content: center; transition: background 0.12s, border-color 0.12s; }
+.legend-arch:hover .lbox { border-color: var(--muted); }
+.legend-arch input:checked ~ .lbox { background: var(--accent); border-color: var(--accent); }
+.legend-arch input:checked ~ .lbox::after { content: ''; width: 5px; height: 2.5px; border-left: 1.5px solid var(--accent-fg); border-bottom: 1.5px solid var(--accent-fg); transform: rotate(-45deg) translateY(-1px); }
+/* archived rows/tiles: present but visibly parked */
+.row.archived .name, .row.archived .cli-logo { opacity: 0.45; }
+.ovt-tile.archived .ovt-head { opacity: 0.55; }
+.arch-note { font-size: 10.5px; color: var(--muted); font-style: italic; text-align: center; padding: 14px 12px 4px; margin-top: auto; }
 
 /* main: tiles */
 .tiles { height: 100%; display: grid; gap: 12px; }
@@ -749,7 +792,7 @@ a.btn-ghost { text-decoration: none; }
   /* 16px inputs stop iOS zoom-on-focus — touch devices only, so a narrow
      DESKTOP window keeps the reply line at card size */
   @media (pointer: coarse) {
-    .widget input, .widget select, .row .rename, .secret-desc, .fp-input, .pane-head .ph-title-input, .ov-live input { font-size: 16px; }
+    .widget input, .widget select, .row .rename, .secret-desc, .fp-input, .pane-head .ph-title-input, .ov-live textarea { font-size: 16px; }
   }
   .ov-headrow { flex-wrap: wrap; }
   /* install page: the decorative sidebar makes no sense on a phone */