Initial commit: Claude Code session viewer (Flutter macOS)
A desktop app that parses Claude Code .jsonl session logs and provides a rich UI for exploring conversations, tool usage, subagents, and token consumption. Features include project browser with auto-discovery of ~/.claude/projects, conversation timeline with inline subagent expansion, agents overview, toolbelt chart, and token usage dashboard. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,62 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:provider/provider.dart';
|
||||
import '../../providers/session_provider.dart';
|
||||
import '../../screens/agents/agents_screen.dart';
|
||||
import '../../screens/home/home_screen.dart';
|
||||
import '../../screens/timeline/timeline_screen.dart';
|
||||
import '../../screens/tokens/tokens_screen.dart';
|
||||
import '../../screens/toolbelt/toolbelt_screen.dart';
|
||||
import 'sidebar.dart';
|
||||
|
||||
class AppShell extends StatefulWidget {
|
||||
const AppShell({super.key});
|
||||
|
||||
@override
|
||||
State<AppShell> createState() => _AppShellState();
|
||||
}
|
||||
|
||||
class _AppShellState extends State<AppShell> {
|
||||
SidebarScreen _screen = SidebarScreen.home;
|
||||
|
||||
void _onScreenSelected(SidebarScreen screen) {
|
||||
setState(() => _screen = screen);
|
||||
}
|
||||
|
||||
void _onSessionLoaded() {
|
||||
setState(() => _screen = SidebarScreen.timeline);
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final provider = context.watch<SessionProvider>();
|
||||
final hasSession = provider.session != null;
|
||||
|
||||
return Row(
|
||||
children: [
|
||||
Sidebar(
|
||||
selected: _screen,
|
||||
onSelect: _onScreenSelected,
|
||||
hasSession: hasSession,
|
||||
),
|
||||
Expanded(
|
||||
child: _buildScreen(),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildScreen() {
|
||||
switch (_screen) {
|
||||
case SidebarScreen.home:
|
||||
return HomeScreen(onSessionLoaded: _onSessionLoaded);
|
||||
case SidebarScreen.timeline:
|
||||
return const TimelineScreen();
|
||||
case SidebarScreen.agents:
|
||||
return const AgentsScreen();
|
||||
case SidebarScreen.toolbelt:
|
||||
return const ToolbeltScreen();
|
||||
case SidebarScreen.tokens:
|
||||
return const TokensScreen();
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,188 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import '../../theme/app_theme.dart';
|
||||
|
||||
enum SidebarScreen { home, timeline, agents, toolbelt, tokens }
|
||||
|
||||
class Sidebar extends StatelessWidget {
|
||||
final SidebarScreen selected;
|
||||
final ValueChanged<SidebarScreen> onSelect;
|
||||
final bool hasSession;
|
||||
|
||||
const Sidebar({
|
||||
super.key,
|
||||
required this.selected,
|
||||
required this.onSelect,
|
||||
required this.hasSession,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
width: 220,
|
||||
decoration: const BoxDecoration(
|
||||
color: AppColors.surface,
|
||||
border: Border(
|
||||
right: BorderSide(color: AppColors.surfaceBorder, width: 1),
|
||||
),
|
||||
),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
children: [
|
||||
const SizedBox(height: 40),
|
||||
Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
|
||||
child: Row(
|
||||
children: [
|
||||
Container(
|
||||
width: 28,
|
||||
height: 28,
|
||||
decoration: BoxDecoration(
|
||||
color: AppColors.assistant.withAlpha(30),
|
||||
borderRadius: BorderRadius.circular(6),
|
||||
),
|
||||
child: const Icon(
|
||||
Icons.terminal,
|
||||
size: 16,
|
||||
color: AppColors.assistant,
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 10),
|
||||
const Text(
|
||||
'Session Viewer',
|
||||
style: TextStyle(
|
||||
fontSize: 14,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: AppColors.textPrimary,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
_SidebarItem(
|
||||
icon: Icons.folder_open,
|
||||
label: 'Open Session',
|
||||
isSelected: selected == SidebarScreen.home,
|
||||
onTap: () => onSelect(SidebarScreen.home),
|
||||
),
|
||||
if (hasSession) ...[
|
||||
const Padding(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
|
||||
child: Text(
|
||||
'SESSION',
|
||||
style: TextStyle(
|
||||
fontSize: 10,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: AppColors.textMuted,
|
||||
letterSpacing: 1.2,
|
||||
),
|
||||
),
|
||||
),
|
||||
_SidebarItem(
|
||||
icon: Icons.timeline,
|
||||
label: 'Timeline',
|
||||
isSelected: selected == SidebarScreen.timeline,
|
||||
onTap: () => onSelect(SidebarScreen.timeline),
|
||||
),
|
||||
_SidebarItem(
|
||||
icon: Icons.smart_toy_outlined,
|
||||
label: 'Agents',
|
||||
isSelected: selected == SidebarScreen.agents,
|
||||
onTap: () => onSelect(SidebarScreen.agents),
|
||||
),
|
||||
_SidebarItem(
|
||||
icon: Icons.build_outlined,
|
||||
label: 'Toolbelt',
|
||||
isSelected: selected == SidebarScreen.toolbelt,
|
||||
onTap: () => onSelect(SidebarScreen.toolbelt),
|
||||
),
|
||||
_SidebarItem(
|
||||
icon: Icons.data_usage,
|
||||
label: 'Token Usage',
|
||||
isSelected: selected == SidebarScreen.tokens,
|
||||
onTap: () => onSelect(SidebarScreen.tokens),
|
||||
),
|
||||
],
|
||||
const Spacer(),
|
||||
Padding(
|
||||
padding: const EdgeInsets.all(16),
|
||||
child: Text(
|
||||
'Claude Session Viewer v0.1',
|
||||
style: TextStyle(
|
||||
fontSize: 10,
|
||||
color: AppColors.textMuted.withAlpha(128),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _SidebarItem extends StatefulWidget {
|
||||
final IconData icon;
|
||||
final String label;
|
||||
final bool isSelected;
|
||||
final VoidCallback onTap;
|
||||
|
||||
const _SidebarItem({
|
||||
required this.icon,
|
||||
required this.label,
|
||||
required this.isSelected,
|
||||
required this.onTap,
|
||||
});
|
||||
|
||||
@override
|
||||
State<_SidebarItem> createState() => _SidebarItemState();
|
||||
}
|
||||
|
||||
class _SidebarItemState extends State<_SidebarItem> {
|
||||
bool _hovered = false;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return MouseRegion(
|
||||
onEnter: (_) => setState(() => _hovered = true),
|
||||
onExit: (_) => setState(() => _hovered = false),
|
||||
child: GestureDetector(
|
||||
onTap: widget.onTap,
|
||||
child: Container(
|
||||
margin: const EdgeInsets.symmetric(horizontal: 8, vertical: 1),
|
||||
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
|
||||
decoration: BoxDecoration(
|
||||
color: widget.isSelected
|
||||
? AppColors.assistant.withAlpha(20)
|
||||
: _hovered
|
||||
? AppColors.surfaceLight
|
||||
: Colors.transparent,
|
||||
borderRadius: BorderRadius.circular(6),
|
||||
),
|
||||
child: Row(
|
||||
children: [
|
||||
Icon(
|
||||
widget.icon,
|
||||
size: 18,
|
||||
color: widget.isSelected
|
||||
? AppColors.assistant
|
||||
: AppColors.textSecondary,
|
||||
),
|
||||
const SizedBox(width: 10),
|
||||
Text(
|
||||
widget.label,
|
||||
style: TextStyle(
|
||||
fontSize: 13,
|
||||
fontWeight:
|
||||
widget.isSelected ? FontWeight.w600 : FontWeight.w400,
|
||||
color: widget.isSelected
|
||||
? AppColors.textPrimary
|
||||
: AppColors.textSecondary,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user