feat(tokens+ui): real-token compaction gate, workflow viz, onboarding polish

- token-truth: single source for real conversation size; corrects the
  Claude-2-BPE estimator's ~35% undercount so compaction/triage gates fire
  before the hard context limit (wired into chat-history, agent-turn-queue)
- README/site: swap company logos for a dynamic-workflow flow-graph section
- SetupBanner / MainPage onboarding tweaks

Author: EvanZhang008

README.md

@@ -10,19 +10,6 @@
 
 <p align="center"><b>▶️ <a href="https://youtu.be/uN4WCZ-n2mw">Watch the 3-minute demo on YouTube</a></b></p>
 
-<p align="center"><sub><b>USED BY ENGINEERS AT</b></sub></p>
-<p align="center">
-  <picture>
-    <source media="(prefers-color-scheme: dark)" srcset="docs/logo-amazon-white.svg" />
-    <img src="docs/logo-amazon-dark.svg" alt="Amazon" height="26" />
-  </picture>
-  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-  <picture>
-    <source media="(prefers-color-scheme: dark)" srcset="docs/logo-doordash-white.svg" />
-    <img src="docs/logo-doordash-dark.svg" alt="DoorDash" height="26" />
-  </picture>
-</p>
-
 **An AI agent that manages your projects, notes, and coding sessions — with the missing web UI for Claude Code built in.**
 
 Open Walnut is not just a dashboard — it's an AI-native app. A built-in AI agent with 30+ tools manages your tasks, spawns and monitors Claude Code sessions, and builds a **self-organizing knowledge base** that gets smarter the more you use it. Raw daily observations auto-distill into organized topic pages. Old noise decays. Important patterns persist. It also gives Claude Code a proper web interface: real-time streaming, multi-session monitoring, visual task boards, and a personal notes vault. Think of it as an AI butler with a perfect memory and a beautiful UI.
@@ -35,6 +22,7 @@ Open Walnut is not just a dashboard — it's an AI-native app. A built-in AI age
 - [See it in action](#see-it-in-action)
 - [Drive local and remote machines from one tab](#drive-local-and-remote-machines-from-one-tab)
 - [Review what the agent changed](#review-what-the-agent-changed)
+- [See dynamic workflows as a live flow-graph](#see-dynamic-workflows-as-a-live-flow-graph)
 - [Key Features](#key-features)
 - [Multi-Agent — But Human-Centered](#multi-agent--but-human-centered)
 - [Quick Start](#quick-start) | **[Getting Started Guide](GETTING_STARTED.md)**
@@ -138,6 +126,19 @@ Click a session's **Changed** chip for a full-screen diff: every file it edited,
 
 ![Click a line in the diff to leave a PR-style comment and hand it back to the agent](docs/session-changed-comment.png)
 
+## See dynamic workflows as a live flow-graph
+
+**Claude Code can fan out into a dynamic multi-agent workflow — Open Walnut is the place you actually *watch* it run.**
+
+![Open Walnut visualizing a Claude Code dynamic workflow as a phase flow-graph: a FAN OUT stage of 4 parallel subagents feeding a SYNTHESIZE stage, each agent showing its model, tokens, and duration](docs/workflow-viz.png)
+
+When a session spawns a dynamic workflow, Walnut renders it as a **phase flow-graph** in real time — each phase (fan-out, synthesize, …) as a column, each subagent as a node with its live status, model, token spend, and duration. No more guessing what the parallel agents are doing from a wall of interleaved text.
+
+- **Full Claude Code dynamic-workflow support** — phases, parallel fan-out, and sequential stages are parsed straight from the session stream and laid out as they happen.
+- **Drill into any subagent** — click a node to open that subagent's full transcript; **View script** shows the workflow that's driving it.
+- **Survives a reload** — the graph is rebuilt from the workflow's on-disk manifest, so refreshing the page (or reconnecting to a remote host) restores the whole flow, not just the latest line.
+- **Collapsible & full-screen** — fold it away while you work, or pop the whole panel full-screen to follow a big fan-out.
+
 ## Key Features
 
 ### Claude Code Web UI

docs/logo-amazon-dark.svg

@@ -60,16 +60,6 @@
   .sub{font-size:clamp(16px,2.4vw,21px);color:var(--muted);max-width:680px;margin:18px auto 0}
   .cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:30px}
 
-  /* trusted-by logo strip */
-  .trusted{margin-top:34px}
-  .trusted .label{font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#6f7b9c;margin-bottom:18px}
-  .logos{display:flex;gap:56px;align-items:center;justify-content:center;flex-wrap:wrap}
-  .logos img{height:30px;width:auto;display:block;opacity:.78;filter:grayscale(100%);transition:.25s}
-  .logos img:hover{opacity:1;filter:grayscale(0%)}
-  @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
-  .logos img{animation:floaty 4s ease-in-out infinite}
-  .logos img:nth-child(2){animation-delay:.8s}
-
   /* video */
   .video-wrap{max-width:880px;margin:42px auto 0;border-radius:16px;overflow:hidden;
     border:1px solid var(--line);box-shadow:0 30px 80px rgba(0,0,0,.5);position:relative;aspect-ratio:16/9;background:#000}
@@ -124,14 +114,6 @@ <h1>The open-source home for<br/>all your <span class="hl">Claude Code</span></h
       <a class="btn btn-primary" href="https://github.com/EvanZhang008/open-walnut">★ Star on GitHub</a>
       <a class="btn btn-ghost" href="https://youtu.be/uN4WCZ-n2mw">▶ Watch the demo</a>
     </div>
-    <div class="trusted">
-      <div class="label">Used by engineers at</div>
-      <div class="logos">
-        <img src="assets/logo-amazon.svg" alt="Amazon" />
-        <img src="assets/logo-doordash.svg" alt="DoorDash" />
-      </div>
-    </div>
-
     <div class="video-wrap">
       <iframe src="https://www.youtube.com/embed/uN4WCZ-n2mw" title="Walnut demo" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
     </div>
@@ -199,6 +181,15 @@ <h3>Review what the agent changed</h3>
       <img src="assets/session-changed.png" alt="A GitHub-style per-session diff in Walnut showing exactly what one Claude Code session changed"/>
     </div>
 
+    <div class="feature">
+      <div class="ftext">
+        <h3>See dynamic workflows as a live flow-graph</h3>
+        <p>Claude Code can fan out into a <b>dynamic multi-agent workflow</b> — Walnut is where you actually <i>watch</i> it run. Each phase becomes a column, each subagent a node with its live status, model, token spend, and duration.</p>
+        <p><b>Full Claude Code dynamic-workflow support</b>: parallel fan-out and sequential stages are parsed straight from the session stream. <b>Click any node</b> for that subagent's full transcript; it even <b>survives a reload</b>, rebuilt from the on-disk manifest.</p>
+      </div>
+      <img src="assets/workflow-viz.png" alt="Walnut visualizing a Claude Code dynamic workflow as a phase flow-graph: a FAN OUT stage of 4 parallel subagents feeding a SYNTHESIZE stage, each node showing model, tokens, and duration"/>
+    </div>
+
     <div class="grid">
       <div class="gcard"><h4>🖥️ Multi-session dashboard</h4><p>Run and monitor dozens of Claude Code sessions side by side, with live status, mid-session model switching, and plan → execute.</p></div>
       <div class="gcard"><h4>✅ Tasks that drive sessions</h4><p>A 4-layer Category → Project → Task → Subtask hierarchy with priorities, due dates, dependencies, and tags — each task wired to its Claude Code session.</p></div>