add Claude meta sidebar — activity + team roster
test / unit + widget + golden + a11y (push) Failing after 28s
test / integration_test (xvfb) (push) Has been skipped
test / bundle smoke (xvfb 5s) (push) Has been skipped
test / daemon subprocess + web WASM smoke (push) Has been skipped
test / dart doc (lib API) (push) Failing after 25s

An always-pickable left-panel tab. Shows Claude activity read from
~/.claude/stats-cache.json (latest day's messages/sessions/tool-calls +
lifetime totals, polled) and, when a tmux agent team is running, a roster
of its members (colour · name · agent type · model) from the observer's
join/left events — nothing re-tailed here.

Scoped down from the original ticket: the account/team token budget isn't
programmatically exposed under subscription auth (TUI-only; upstream
#44328) and live per-member status needs the teammate status stream wired
onto the bus — filed as T-158 and T-157 respectively.

T-141.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-05-23 22:49:37 +02:00
co-authored by Claude Opus 4.7
parent 8907abeca7
commit 3038cd5eed
8 changed files with 382 additions and 0 deletions
@@ -0,0 +1,174 @@
/// Claude meta sidebar (T-141): an always-pickable left-panel tab showing
/// Claude *activity* (from `~/.claude/stats-cache.json`, polled) and, when a
/// tmux agent team is running, a roster of its members (from the
/// TeamObserver's join/left events — not re-tailed here).
///
/// The account/team token budget is intentionally absent: it isn't
/// programmatically exposed under subscription auth (see project memory /
/// GitHub anthropics/claude-code#44328). Live per-member status (mode /
/// context) is a follow-up that needs the teammate status stream on the bus.
library;
import 'dart:async';
import 'dart:io';
import 'package:clide/builtin/claude/src/claude_stats.dart';
import 'package:clide/builtin/claude/src/claude_status.dart' show shortModelLabel;
import 'package:clide/builtin/claude/src/team_panel_host.dart' show teamColor;
import 'package:clide/kernel/kernel.dart';
import 'package:clide/widgets/widgets.dart';
import 'package:flutter/widgets.dart';
class ClaudeMetaSidebar extends StatefulWidget {
const ClaudeMetaSidebar({super.key, this.statsLoader, this.pollInterval = const Duration(seconds: 20)});
/// Loads the activity stats; defaults to reading `~/.claude/stats-cache.json`.
/// Injected in tests so they don't touch the real filesystem.
final Future<ClaudeStats> Function()? statsLoader;
/// How often to reload the stats. `Duration.zero` disables polling
/// (initial load only) — used by tests to avoid a pending timer.
final Duration pollInterval;
@override
State<ClaudeMetaSidebar> createState() => _ClaudeMetaSidebarState();
}
class _ClaudeMetaSidebarState extends State<ClaudeMetaSidebar> {
ClaudeStats _stats = const ClaudeStats();
final List<TeamMemberJoined> _members = [];
StreamSubscription<TeamMemberJoined>? _joinSub;
StreamSubscription<TeamMemberLeft>? _leftSub;
Timer? _timer;
late final Future<ClaudeStats> Function() _load;
bool _subscribed = false;
@override
void initState() {
super.initState();
_load = widget.statsLoader ?? _fileLoader();
unawaited(_refreshStats());
if (widget.pollInterval > Duration.zero) {
_timer = Timer.periodic(widget.pollInterval, (_) => unawaited(_refreshStats()));
}
}
static Future<ClaudeStats> Function() _fileLoader() {
final home = Platform.environment['HOME'];
final file = home == null ? null : File('$home/.claude/stats-cache.json');
return () async {
if (file == null || !await file.exists()) return const ClaudeStats();
try {
return parseClaudeStats(await file.readAsString());
} catch (_) {
return const ClaudeStats();
}
};
}
@override
void didChangeDependencies() {
super.didChangeDependencies();
if (_subscribed) return;
_subscribed = true;
final events = ClideKernel.of(context).events;
_joinSub = events.on<TeamMemberJoined>().listen((m) {
if (_members.any((x) => x.agentId == m.agentId)) return;
setState(() => _members.add(m));
});
_leftSub = events.on<TeamMemberLeft>().listen((m) {
setState(() => _members.removeWhere((x) => x.agentId == m.agentId));
});
}
Future<void> _refreshStats() async {
final stats = await _load();
if (mounted) setState(() => _stats = stats);
}
@override
void dispose() {
_timer?.cancel();
_joinSub?.cancel();
_leftSub?.cancel();
super.dispose();
}
@override
Widget build(BuildContext context) {
final tokens = ClideTheme.of(context).surface;
return ListView(
padding: const EdgeInsets.all(12),
children: [
_sectionHeader(tokens, 'Activity'),
_activity(tokens),
const SizedBox(height: 16),
_sectionHeader(tokens, 'Team${_members.isEmpty ? '' : ' · ${_members.length}'}'),
_roster(tokens),
],
);
}
Widget _sectionHeader(SurfaceTokens tokens, String label) => Padding(
padding: const EdgeInsets.only(bottom: 6),
child: ClideText(label, fontSize: clideFontSmall, color: tokens.globalTextMuted),
);
Widget _activity(SurfaceTokens tokens) {
final latest = _stats.latest;
if (latest == null) {
return ClideText('No activity recorded yet.', muted: true, fontSize: clideFontSmall);
}
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
ClideText(latest.date, fontSize: clideFontSmall, color: tokens.globalForeground),
const SizedBox(height: 2),
ClideText(
'${latest.messageCount} msgs · ${latest.sessionCount} sessions · ${latest.toolCallCount} tools',
muted: true,
fontSize: clideFontSmall,
),
const SizedBox(height: 6),
ClideText(
'Lifetime: ${_stats.lifetimeMessages} msgs over ${_stats.activeDays} days',
muted: true,
fontSize: clideFontSmall,
),
],
);
}
Widget _roster(SurfaceTokens tokens) {
if (_members.isEmpty) {
return ClideText('No team active.', muted: true, fontSize: clideFontSmall);
}
return Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [for (final m in _members) _memberRow(tokens, m)],
);
}
Widget _memberRow(SurfaceTokens tokens, TeamMemberJoined m) {
final color = teamColor(m.color, fallback: tokens.globalForeground);
final sub = [m.agentType, if (m.model != null) shortModelLabel(m.model!)].join(' · ');
return Padding(
padding: const EdgeInsets.symmetric(vertical: 4),
child: Row(
children: [
Container(width: 8, height: 8, decoration: BoxDecoration(color: color, shape: BoxShape.circle)),
const SizedBox(width: 8),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
ClideText(m.name, fontSize: clideFontSmall, color: tokens.globalForeground, maxLines: 1, overflow: TextOverflow.ellipsis),
ClideText(sub, muted: true, fontSize: clideFontSmall, maxLines: 1, overflow: TextOverflow.ellipsis),
],
),
),
],
),
);
}
}
+68
View File
@@ -0,0 +1,68 @@
/// Reads Claude Code's `~/.claude/stats-cache.json` — per-day activity
/// (message / session / tool-call counts) — for the meta sidebar (T-141).
/// Flutter-free so it unit-tests under `dart test`. This is activity, not the
/// account budget; the budget isn't programmatically exposed (see
/// project memory / GitHub anthropics/claude-code#44328).
library;
import 'dart:convert';
class DailyActivity {
const DailyActivity({
required this.date,
required this.messageCount,
required this.sessionCount,
required this.toolCallCount,
});
final String date; // "YYYY-MM-DD" (sorts chronologically as a string)
final int messageCount;
final int sessionCount;
final int toolCallCount;
}
class ClaudeStats {
const ClaudeStats({this.lastComputed, this.daily = const []});
final String? lastComputed;
final List<DailyActivity> daily;
/// The most recent day on record, or null if there's no activity.
DailyActivity? get latest {
if (daily.isEmpty) return null;
return daily.reduce((a, b) => a.date.compareTo(b.date) >= 0 ? a : b);
}
int get activeDays => daily.length;
int get lifetimeMessages => daily.fold(0, (a, d) => a + d.messageCount);
int get lifetimeSessions => daily.fold(0, (a, d) => a + d.sessionCount);
int get lifetimeToolCalls => daily.fold(0, (a, d) => a + d.toolCallCount);
}
/// Parse the stats-cache JSON. Returns empty stats on any malformed input —
/// the sidebar degrades to "no activity" rather than throwing.
ClaudeStats parseClaudeStats(String jsonStr) {
Object? j;
try {
j = jsonDecode(jsonStr);
} catch (_) {
return const ClaudeStats();
}
if (j is! Map) return const ClaudeStats();
final daily = <DailyActivity>[];
final da = j['dailyActivity'];
if (da is List) {
for (final e in da) {
if (e is! Map) continue;
daily.add(DailyActivity(
date: '${e['date']}',
messageCount: _int(e['messageCount']),
sessionCount: _int(e['sessionCount']),
toolCallCount: _int(e['toolCallCount']),
));
}
}
return ClaudeStats(lastComputed: j['lastComputedDate'] as String?, daily: daily);
}
int _int(Object? v) => v is num ? v.toInt() : 0;
+12
View File
@@ -6,6 +6,7 @@ import 'package:clide/builtin/claude/src/claude_config.dart';
import 'package:clide/builtin/claude/src/claude_session_host.dart';
import 'package:clide/builtin/claude/src/session_naming.dart';
import 'package:clide/builtin/claude/src/pane_context_status.dart';
import 'package:clide/builtin/claude/src/claude_meta_sidebar.dart';
import 'package:clide/builtin/claude/src/session_index.dart';
import 'package:clide/builtin/claude/src/session_storage.dart';
import 'package:clide/builtin/claude/src/team_observer.dart';
@@ -13,6 +14,7 @@ import 'package:clide/builtin/claude/src/team_panel_host.dart';
import 'package:clide/builtin/claude/src/tmux_session.dart' as tmux;
import 'package:clide/extension/extension.dart';
import 'package:clide/kernel/kernel.dart';
import 'package:clide/widgets/widgets.dart';
import 'package:flutter/widgets.dart';
class ClaudeExtension extends ClideExtension {
@@ -68,6 +70,16 @@ class ClaudeExtension extends ClideExtension {
title: 'Claude: session storage (disk usage + cleanup)',
run: _manageStorage,
),
// Always-pickable left-panel tab: Claude activity (from
// stats-cache.json) + the team roster when a team is running (T-141).
TabContribution(
id: 'claude.meta',
slot: Slots.sidebar,
title: 'Activity',
icon: PhosphorIcons.robot,
priority: 60,
build: (_) => const ClaudeMetaSidebar(),
),
// In-pane status slot (T-145): the active Claude pane publishes
// its model · permission-mode · context line here.
StatusItemContribution(