From c58c299581773722141f1016739e3d3640920765 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alejandro=20Guti=C3=A9rrez?= <35082514+alezmad@users.noreply.github.com> Date: Tue, 24 Feb 2026 22:02:54 +0000 Subject: [PATCH] feat: update website to reflect full session monitoring capabilities Rebrand from "TUI launcher" to "multi-project session monitor". Add usage tracking and idle sessions panel sections, new feature blocks for monitoring/usage/notifications/focus, updated keybindings, and revised metadata descriptions. Co-Authored-By: Claude Opus 4.6 --- site/app/layout.tsx | 10 +-- site/app/page.tsx | 166 +++++++++++++++++++++++++++++++++++++------- 2 files changed, 144 insertions(+), 32 deletions(-) diff --git a/site/app/layout.tsx b/site/app/layout.tsx index 4a7b6f0..3acd0b5 100644 --- a/site/app/layout.tsx +++ b/site/app/layout.tsx @@ -14,9 +14,9 @@ const pixel = Silkscreen({ }); export const metadata: Metadata = { - title: "cladm — TUI launcher for Claude Code", + title: "cladm — Monitor & launch Claude Code sessions", description: - "Browse all your projects, see git status at a glance, expand into sessions and branches, then launch everything in parallel Terminal windows.", + "Multi-project Claude Code session monitor. Track busy/idle status in real time, see usage costs, get notified when Claude finishes, and launch everything in parallel.", icons: { icon: [ { url: "/favicon.ico", sizes: "32x32" }, @@ -27,7 +27,7 @@ export const metadata: Metadata = { }, openGraph: { title: "cladm", - description: "TUI launcher for Claude Code sessions", + description: "Monitor & launch Claude Code sessions across all your projects", url: "https://claudm.com", siteName: "cladm", type: "website", @@ -36,14 +36,14 @@ export const metadata: Metadata = { url: "/og-image.png", width: 1200, height: 630, - alt: "cladm — TUI launcher for Claude Code sessions", + alt: "cladm — Monitor & launch Claude Code sessions", }, ], }, twitter: { card: "summary_large_image", title: "cladm", - description: "TUI launcher for Claude Code sessions", + description: "Monitor & launch Claude Code sessions across all your projects", images: ["/og-image.png"], }, }; diff --git a/site/app/page.tsx b/site/app/page.tsx index 9e7fd46..6dd8b22 100644 --- a/site/app/page.tsx +++ b/site/app/page.tsx @@ -16,6 +16,8 @@ import { SpaceInvadersIcon, EyeIcon, BellIcon, + TrendingUpIcon, + ThunderIcon, } from "raster-react"; function PixelDivider() { @@ -137,13 +139,14 @@ export default function Home() {

- TUI LAUNCHER FOR CLAUDE CODE + MULTI-PROJECT CLAUDE CODE MONITOR

- Browse all your projects. See git status at a glance. Monitor - which sessions are busy or idle in real time. Get notified when - Claude finishes. Launch everything in parallel Terminal windows. + Track all your Claude Code sessions in one place. See + busy/idle status in real time, monitor usage costs, get + notified when Claude finishes, and launch everything in + parallel Terminal windows.

{/* Install command */} @@ -273,8 +276,8 @@ export default function Home() {

- cladm detects active Claude Code sessions and shows their real-time status. - When Claude finishes responding, a sound notification plays so you never miss it. + cladm detects all running Claude Code sessions across every project and shows their real-time status. + When any session finishes, a sound plays and the dock icon bounces — so you never miss it, even across dozens of parallel sessions.

@@ -298,10 +301,11 @@ export default function Home() {

- Detection works by monitoring JSONL file modification times in{" "} - ~/.claude/projects/. Sessions - writing within 5 seconds are busy; otherwise idle. Header shows - total busy/idle count across all projects. + Detection reads the tail of each session's JSONL in{" "} + ~/.claude/projects/. A session is + busy if the file was written recently OR the last assistant message + has a pending tool call. This prevents false idle triggers during + long-running tools and subtasks.

@@ -310,6 +314,106 @@ export default function Home() { + {/* ══════ USAGE + IDLE PANELS ══════ */} +
+

+ // USAGE & IDLE PANELS +

+ +
+ {/* Usage panel mock */} +
+
+
+

+ USAGE TRACKING +

+
+
+
+
+
+
Session
+
+ {"████████"} + {"░░░░░░░░░░"} + 22% +
+
resets 3h 2m · $1.82/h
+
+
+
All models $412
+
+ {"████████████"} + {"░░░░░░"} + 69% +
+
+
+
Sonnet $31
+
+ {"█"} + {"░░░░░░░░░░░░░░░░░"} + 5% +
+
+
+
Feb total $1,847
+
$2.41/h avg · 8,234 reqs
+
+
+
+

+ Press u to toggle. Tracks session (5h window), weekly + all-model and sonnet-only costs against configurable plan limits. +

+
+ + {/* Idle sessions panel mock */} +
+
+
+

+ IDLE SESSIONS +

+
+
+
+
+
+ {" TIME PROJECT SESSION"} +
+
+ ◉ + 12s + acme-api + "Fix rate limiter..." +
+
+ ◉ + 2m{" "} + quantum-dash + "Build chart tooltip..." +
+
+ ◉ + 8m{" "} + ml-pipeline + "Add BERT tokenizer..." +
+
+
+

+ Press i to toggle. Shows sessions waiting for your + input, sorted by most recently idle. Press Enter to focus a session's + Terminal tab directly. +

+
+
+
+ + + {/* ══════ FEATURES ══════ */}

@@ -317,6 +421,26 @@ export default function Home() {

+ } + title="LIVE MONITORING" + desc="Track all Claude sessions across every project. Busy/idle status updates in real time with elapsed timers." + /> + } + title="USAGE TRACKING" + desc="Session, weekly, and monthly cost bars. Track all-model and sonnet-only usage against configurable plan limits." + /> + } + title="NOTIFICATIONS" + desc="Sound + dock bounce when any session finishes. Never miss a completed task across dozens of parallel sessions." + /> + } + title="FOCUS SESSION" + desc="Press Enter on any idle session to instantly focus its Terminal tab. Flash animation highlights the window." + /> } title="AUTO-DISCOVERY" @@ -325,28 +449,13 @@ export default function Home() { } title="GIT METADATA" - desc="Branch, sync status (ahead/behind), last commit, dirty state — all loaded in parallel." + desc="Branch, sync status (ahead/behind), last commit, dirty state — all loaded in parallel per project." /> } title="SESSION BROWSER" desc="Expand any project to browse past sessions. See conversation previews and resume directly." /> - } - title="BRANCH SWITCHING" - desc="Select a non-current branch to launch Claude with an auto-prompt to switch and stash." - /> - } - title="LIVE ACTIVITY" - desc="See which sessions are busy or idle in real time. Green dot = Claude is working. Yellow dot + elapsed time = waiting for input." - /> - } - title="DONE SOUND" - desc="Plays a sound when Claude finishes responding. Never miss a completed task — even across multiple sessions." - /> } title="PARALLEL LAUNCH" @@ -376,12 +485,15 @@ export default function Home() { ["Space", "Toggle selection"], ["→", "Expand project"], ["←", "Collapse"], + ["Enter", "Launch selected / focus session"], + ["i", "Toggle idle sessions panel"], + ["u", "Toggle usage panel"], + ["/", "Filter projects"], ["a", "Select all"], ["n", "Deselect all"], ["s", "Cycle sort mode"], ["f", "Open folder in Finder"], ["g", "Go to active session"], - ["Enter", "Launch selected"], ["PgUp PgDn", "Jump 15 rows"], ["q / Esc", "Quit"], ].map(([key, desc]) => (