The home page, README and demo show the new screenshots

README.md

@@ -30,6 +30,11 @@
     <td align="center" width="33%"><a href="docs/mods.md#-lines-above-the-prompt"><img src="images/gallery/lines.png" alt="token-weather, usage-meter and other Claude Code status lines stacked above the prompt" width="260"></a><br>🌦️ <b>token-weather and friends</b><br>lines above the prompt</td>
     <td align="center" width="33%"><a href="#mission-control"><img src="images/gallery/mission-control.png" alt="mission-control: Claude Code subagents, tool calls and the files they touch, live" width="260"></a><br>🛰️ <b>mission-control</b><br>agents and the code they touch</td>
   </tr>
+  <tr>
+    <td align="center" width="33%"><a href="docs/mods.md#-switchboard"><img src="images/switchboard.png" alt="switchboard: subagents routed from opus to sonnet and haiku, with confidence and cost" width="260"></a><br>🔀 <b>switchboard</b><br>cheaper models for subagents</td>
+    <td align="center" width="33%"><a href="docs/mods.md#-agent-radar"><img src="images/agent-radar.png" alt="agent-radar: a running subagent and two background shells with their latest output" width="260"></a><br>📡 <b>agent-radar</b><br>subagents and shells, live</td>
+    <td align="center" width="33%"><a href="docs/mods.md#-reels-and-snake"><img src="images/snake.png" alt="snake: a game of Snake in a Claude Code pane" width="260"></a><br>🐍 <b>snake</b><br>a game while Claude works</td>
+  </tr>
 </table>
 
 ## 🚀 Install

docs/demo.md

@@ -73,3 +73,69 @@ Steps through the last turn's edits.
 Shown with token-weather above it.
 
 ![where-am-i](../images/where-am-i.png)
+
+## ⏱️ cache-clock
+
+A warm one-hour cache, under your own status line.
+
+![cache-clock](../images/cache-clock.png)
+
+## ➡️ next-steps
+
+Three next prompts: type a number to send one.
+
+![next-steps](../images/next-steps.png)
+
+## 💰 usage-meter
+
+Five-hour and weekly usage, with when each resets.
+
+![usage-meter](../images/usage-meter.png)
+
+## 💳 openai-balance
+
+The estimated balance, today's spend and the last call's model.
+
+![openai-balance](../images/openai-balance.png)
+
+## 🪙 openrouter-balance
+
+A regular API key: what its limit leaves and today's spend.
+
+![openrouter-balance](../images/openrouter-balance.png)
+
+## 📡 agent-radar
+
+A subagent and two background shells, each with its latest line.
+
+![agent-radar](../images/agent-radar.png)
+
+## 🔀 switchboard
+
+One subagent kept on opus, two switched to cheaper models.
+
+![switchboard](../images/switchboard.png)
+
+## 👀 glance
+
+The next meeting, a PR waiting on you, an issue and a DM, on one line.
+
+![glance](../images/glance.png)
+
+## 🚦 merge-gate
+
+A PR with CI green and the Codex review still to come.
+
+![merge-gate](../images/merge-gate.png)
+
+## 💾 session-saver
+
+Where you left off last time, the next step and your note.
+
+![session-saver](../images/session-saver.png)
+
+## 🐍 snake
+
+Snake in a pane, mid-game.
+
+![snake](../images/snake.png)

site/index.html

@@ -88,14 +88,14 @@ <h3 id="cat-see"><span class="sq" aria-hidden="true">■</span> See what&#x27;s
       <li class="row has-thumb"><a href="mods/mission-control/"><span class="row-text"><span class="row-name">mission-control</span><span class="row-desc">Live map of agents, tool calls and the code they touch</span><code class="cmd">/mission</code></span><span class="row-thumb"><img style="max-width:252px" src="images/gallery/mission-control.png" width="505" height="158" alt="mission-control code map: logout.ts, login.tsx, client.ts, session.ts and users.ts linked by import arrows" decoding="async" loading="lazy"></span></a></li>
       <li class="row has-thumb"><a href="mods/context-bar/"><span class="row-text"><span class="row-name">context-bar</span><span class="row-desc">Your context window as one stacked bar, a color per category</span><code class="cmd">/context-bar</code></span><span class="row-thumb"><img style="max-width:889px" src="images/context-bar.png" width="1778" height="234" alt="context-bar: 273k of 1M tokens used, compacts at 967k, 27 percent. A stacked bar splits system prompt, tools, MCP instructions, agents, memory files, skills and messages" decoding="async" loading="lazy"></span></a></li>
       <li class="row has-thumb"><a href="mods/token-weather/"><span class="row-text"><span class="row-name">token-weather</span><span class="row-desc">Context fill from Clear to Compact soon, plus a prompt-cache countdown</span></span><span class="row-thumb"><img style="max-width:659px" src="images/gallery/lines.png" width="1318" height="100" alt="Two lines above the prompt: browser-lanes says the browser is not attached, token-weather says Cloudy, 44% of context" decoding="async" loading="lazy"></span></a></li>
-      <li class="row"><a href="mods/cache-clock/"><span class="row-text"><span class="row-name">cache-clock</span><span class="row-desc">A prompt-cache countdown under your status line, with hit rate and misses</span><code class="cmd">/cache-clock setup</code></span></a></li>
+      <li class="row has-thumb"><a href="mods/cache-clock/"><span class="row-text"><span class="row-name">cache-clock</span><span class="row-desc">A prompt-cache countdown under your status line, with hit rate and misses</span><code class="cmd">/cache-clock setup</code></span><span class="row-thumb"><img style="max-width:426px" src="images/cache-clock.png" width="852" height="98" alt="cache-clock: under the status line, cache 1h, a green bar, 38m left, hit 91%, misses 0" decoding="async" loading="lazy"></span></a></li>
       <li class="row has-thumb"><a href="mods/where-am-i/"><span class="row-text"><span class="row-name">where-am-i</span><span class="row-desc">Goal, doing now, waiting on you, next step</span><code class="cmd">/where</code></span><span class="row-thumb"><img style="max-width:530px" src="images/gallery/where-am-i.png" width="1061" height="132" alt="where-am-i lines: the goal, what Claude is doing now, and what is waiting on you" decoding="async" loading="lazy"></span></a></li>
-      <li class="row"><a href="mods/next-steps/"><span class="row-text"><span class="row-name">next-steps</span><span class="row-desc">2 or 3 likely next prompts after each turn, one key to draft one</span></span></a></li>
-      <li class="row"><a href="mods/usage-meter/"><span class="row-text"><span class="row-name">usage-meter</span><span class="row-desc">5-hour and 7-day plan usage, the reset countdown and the session&#x27;s cost</span></span></a></li>
+      <li class="row has-thumb"><a href="mods/next-steps/"><span class="row-text"><span class="row-name">next-steps</span><span class="row-desc">2 or 3 likely next prompts after each turn, one key to draft one</span></span><span class="row-thumb"><img style="max-width:964px" src="images/next-steps.png" width="1928" height="64" alt="next-steps: three numbered suggestions for the next prompt, and 0 to dismiss" decoding="async" loading="lazy"></span></a></li>
+      <li class="row has-thumb"><a href="mods/usage-meter/"><span class="row-text"><span class="row-name">usage-meter</span><span class="row-desc">5-hour and 7-day plan usage, the reset countdown and the session&#x27;s cost</span></span><span class="row-thumb"><img style="max-width:598px" src="images/usage-meter.png" width="1196" height="64" alt="usage-meter: 5h usage 46% resetting in 2h10, 7d usage 78% resetting in 3d4h, and $4.27 this session" decoding="async" loading="lazy"></span></a></li>
       <li class="row has-thumb"><a href="mods/heatmap/"><span class="row-text"><span class="row-name">heatmap</span><span class="row-desc">A GitHub-style grid of your Claude Code time, with your streak and top projects</span><code class="cmd">/heatmap</code></span><span class="row-thumb"><img style="max-width:418px" src="images/gallery/heatmap.png" width="836" height="412" alt="heatmap: a year of Claude Code activity as orange squares, with a 25-day streak, peak hours and top projects" decoding="async" loading="lazy"></span></a></li>
-      <li class="row"><a href="mods/openai-balance/"><span class="row-text"><span class="row-name">openai-balance</span><span class="row-desc">Your OpenAI API credit, today&#x27;s spend, where it went and the last call</span><code class="cmd">/openai-balance</code></span></a></li>
-      <li class="row"><a href="mods/openrouter-balance/"><span class="row-text"><span class="row-name">openrouter-balance</span><span class="row-desc">Your OpenRouter credit, today&#x27;s spend and where it mostly went</span><code class="cmd">/openrouter-balance</code></span></a></li>
-      <li class="row"><a href="mods/agent-radar/"><span class="row-text"><span class="row-name">agent-radar</span><span class="row-desc">One live line per running subagent or background shell</span><code class="cmd">/radar</code></span></a></li>
+      <li class="row has-thumb"><a href="mods/openai-balance/"><span class="row-text"><span class="row-name">openai-balance</span><span class="row-desc">Your OpenAI API credit, today&#x27;s spend, where it went and the last call</span><code class="cmd">/openai-balance</code></span><span class="row-thumb"><img style="max-width:627px" src="images/openai-balance.png" width="1254" height="70" alt="openai-balance: about $13.67 of $13.82 left with a green gauge, $0.21 spent today, last call on gpt-5" decoding="async" loading="lazy"></span></a></li>
+      <li class="row has-thumb"><a href="mods/openrouter-balance/"><span class="row-text"><span class="row-name">openrouter-balance</span><span class="row-desc">Your OpenRouter credit, today&#x27;s spend and where it mostly went</span><code class="cmd">/openrouter-balance</code></span><span class="row-thumb"><img style="max-width:310px" src="images/openrouter-balance.png" width="620" height="33" alt="openrouter-balance: $2.67 of a $3.00 key limit left with a gauge, $0.33 spent today" decoding="async" loading="lazy"></span></a></li>
+      <li class="row has-thumb"><a href="mods/agent-radar/"><span class="row-text"><span class="row-name">agent-radar</span><span class="row-desc">One live line per running subagent or background shell</span><code class="cmd">/radar</code></span><span class="row-thumb"><img style="max-width:660px" src="images/agent-radar.png" width="1320" height="132" alt="agent-radar: a review subagent at 24s with 14 tools, and two background shells, web tests and Watch CI, with their latest output" decoding="async" loading="lazy"></span></a></li>
       <li class="row has-thumb"><a href="mods/review-watch/"><span class="row-text"><span class="row-name">review-watch</span><span class="row-desc">One live line per running code review, Codex or a review subagent</span></span><span class="row-thumb"><img style="max-width:556px" src="images/review-watch.png" width="1112" height="116" alt="review-watch: an agent review on haiku at 5s and a codex review at 6s, with Codex&#x27;s latest line, starting review of 3 files" decoding="async" loading="lazy"></span></a></li>
       <li class="row has-thumb"><a href="mods/browser-lanes/"><span class="row-text"><span class="row-name">browser-lanes</span><span class="row-desc">Whether this session has a browser, and who holds it</span><code class="cmd">/browser</code></span><span class="row-thumb"><img style="max-width:883px" src="images/bands.png" width="1766" height="180" alt="browser-lanes line in red: browser NOT attached, another Claude holds the shared profile, above token-weather and where-am-i" decoding="async" loading="lazy"></span></a></li>
       <li class="row has-thumb"><a href="mods/prayer-times/"><span class="row-text"><span class="row-name">prayer-times</span><span class="row-desc">The current prayer and how long is left, the next one, and zawal</span><code class="cmd">/prayers</code></span><span class="row-thumb"><img style="max-width:330px" src="images/prayer-times.png" width="660" height="35" alt="prayer-times line: Dhuhr, 1h 26m left, next Asr 16:32" decoding="async" loading="lazy"></span></a></li>
@@ -107,7 +107,7 @@ <h3 id="cat-see"><span class="sq" aria-hidden="true">■</span> See what&#x27;s
     <h3 id="cat-spend"><span class="sq" aria-hidden="true">■</span> Spend less</h3>
     <p class="cat-desc">Puts each subagent on the model the job needs.</p>
     <ul class="rows">
-      <li class="row"><a href="mods/switchboard/"><span class="row-text"><span class="row-name">switchboard</span><span class="row-desc">Picks the model for each subagent that doesn&#x27;t name one, and shows what each cost</span><code class="cmd">/route</code></span></a></li>
+      <li class="row has-thumb"><a href="mods/switchboard/"><span class="row-text"><span class="row-name">switchboard</span><span class="row-desc">Picks the model for each subagent that doesn&#x27;t name one, and shows what each cost</span><code class="cmd">/route</code></span><span class="row-thumb"><img style="max-width:528px" src="images/switchboard.png" width="1056" height="132" alt="switchboard: three subagents, one kept on opus, two switched to sonnet and haiku, with how sure the picker was and the cost" decoding="async" loading="lazy"></span></a></li>
     </ul>
   </section>
   <section class="cat c-guard" aria-labelledby="cat-guard">
@@ -121,18 +121,18 @@ <h3 id="cat-guard"><span class="sq" aria-hidden="true">■</span> Guard your rep
     <h3 id="cat-setup"><span class="sq" aria-hidden="true">■</span> Fork and adapt</h3>
     <p class="cat-desc">Built around one person&#x27;s tools and rules. Fork them and change the rules to yours.</p>
     <ul class="rows">
-      <li class="row"><a href="mods/glance/"><span class="row-text"><span class="row-name">glance</span><span class="row-desc">Next meeting, PRs, Linear issues and Slack DMs in one line</span><code class="cmd">/glance</code></span></a></li>
-      <li class="row"><a href="mods/merge-gate/"><span class="row-text"><span class="row-name">merge-gate</span><span class="row-desc">Holds gh pr merge until CI is green and Codex reviewed once</span><code class="cmd">/gate</code></span></a></li>
+      <li class="row has-thumb"><a href="mods/glance/"><span class="row-text"><span class="row-name">glance</span><span class="row-desc">Next meeting, PRs, Linear issues and Slack DMs in one line</span><code class="cmd">/glance</code></span><span class="row-thumb"><img style="max-width:1035px" src="images/glance.png" width="2070" height="64" alt="glance: Standup in 12 min, web#482 review requested, ENG-214 In Progress, and a DM from Alex" decoding="async" loading="lazy"></span></a></li>
+      <li class="row has-thumb"><a href="mods/merge-gate/"><span class="row-text"><span class="row-name">merge-gate</span><span class="row-desc">Holds gh pr merge until CI is green and Codex reviewed once</span><code class="cmd">/gate</code></span><span class="row-thumb"><img style="max-width:582px" src="images/merge-gate.png" width="1164" height="64" alt="merge-gate: PR #482, CI 14 passed, Codex 0 of 1, and the PR title" decoding="async" loading="lazy"></span></a></li>
       <li class="row has-thumb"><a href="mods/rulebook-guard/"><span class="row-text"><span class="row-name">rulebook-guard</span><span class="row-desc">Rewrites em dashes, asks before --amend, unformatted pushes and personal info</span></span><span class="row-thumb"><img style="max-width:893px" src="images/rulebook-guard.png" width="1786" height="281" alt="Rulebook Guard asks: This is git commit --amend. Your rule: make a new commit instead. Allow it anyway? Options: Block it, Allow once, Type something" decoding="async" loading="lazy"></span></a></li>
-      <li class="row"><a href="mods/session-saver/"><span class="row-text"><span class="row-name">session-saver</span><span class="row-desc">Saves where you left off and shows it on resume</span><code class="cmd">/park</code></span></a></li>
+      <li class="row has-thumb"><a href="mods/session-saver/"><span class="row-text"><span class="row-name">session-saver</span><span class="row-desc">Saves where you left off and shows it on resume</span><code class="cmd">/park</code></span><span class="row-thumb"><img style="max-width:1011px" src="images/session-saver.png" width="2022" height="98" alt="session-saver: Last time, 3h ago, where you left off, the next step, and a note" decoding="async" loading="lazy"></span></a></li>
     </ul>
   </section>
   <section class="cat c-fun" aria-labelledby="cat-fun">
     <h3 id="cat-fun"><span class="sq" aria-hidden="true">■</span> For fun</h3>
     <p class="cat-desc">Opt-in. Nothing opens until you ask.</p>
     <ul class="rows">
       <li class="row has-thumb"><a href="mods/reels/"><span class="row-text"><span class="row-name">reels</span><span class="row-desc">YouTube Shorts while Claude works, paused when it&#x27;s done</span><code class="cmd">/reels</code></span><span class="row-thumb"><img style="max-width:104px" src="images/reels-poster.png" width="208" height="392" alt="The reels pane playing a YouTube Short next to the chat" decoding="async" loading="lazy"></span></a></li>
-      <li class="row"><a href="mods/snake/"><span class="row-text"><span class="row-name">snake</span><span class="row-desc">Snake while Claude works</span><code class="cmd">/snake</code></span></a></li>
+      <li class="row has-thumb"><a href="mods/snake/"><span class="row-text"><span class="row-name">snake</span><span class="row-desc">Snake while Claude works</span><code class="cmd">/snake</code></span><span class="row-thumb"><img style="max-width:457px" src="images/snake.png" width="914" height="574" alt="snake: a game in a pane, score 13, best 14, a green snake and red food" decoding="async" loading="lazy"></span></a></li>
       <li class="row has-thumb"><a href="mods/now-playing/"><span class="row-text"><span class="row-name">now-playing</span><span class="row-desc">Spotify&#x27;s track, progress and the lyric being sung, with buttons</span><code class="cmd">/music</code></span><span class="row-thumb"><img style="max-width:480px" src="images/now-playing.png" width="960" height="67" alt="now-playing: the track and artist, a green progress bar at 2:39 of 3:05, previous, pause and next buttons, and the lyric line below" decoding="async" loading="lazy"></span></a></li>
     </ul>
   </section>