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,29 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:provider/provider.dart';
|
||||
import 'providers/session_provider.dart';
|
||||
import 'theme/app_theme.dart';
|
||||
import 'widgets/navigation/app_shell.dart';
|
||||
|
||||
void main() {
|
||||
runApp(const ClaudeSessionViewerApp());
|
||||
}
|
||||
|
||||
class ClaudeSessionViewerApp extends StatelessWidget {
|
||||
const ClaudeSessionViewerApp({super.key});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return ChangeNotifierProvider(
|
||||
create: (_) => SessionProvider(),
|
||||
child: MaterialApp(
|
||||
title: 'Claude Session Viewer',
|
||||
debugShowCheckedModeBanner: false,
|
||||
theme: AppTheme.dark,
|
||||
home: const Scaffold(
|
||||
backgroundColor: AppColors.background,
|
||||
body: AppShell(),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,100 @@
|
||||
import 'content_block.dart';
|
||||
import 'log_entry.dart';
|
||||
import 'token_usage.dart';
|
||||
|
||||
class AgentInfo {
|
||||
final String id;
|
||||
final String name;
|
||||
final String? subagentType;
|
||||
final String? description;
|
||||
final String? prompt;
|
||||
final String? model;
|
||||
final List<LogEntry> messages;
|
||||
final List<ToolUseBlock> toolsUsed;
|
||||
final TokenUsage aggregatedUsage;
|
||||
|
||||
AgentInfo({
|
||||
required this.id,
|
||||
required this.name,
|
||||
this.subagentType,
|
||||
this.description,
|
||||
this.prompt,
|
||||
this.model,
|
||||
required this.messages,
|
||||
required this.toolsUsed,
|
||||
required this.aggregatedUsage,
|
||||
});
|
||||
|
||||
Set<String> get uniqueToolNames => toolsUsed.map((t) => t.name).toSet();
|
||||
|
||||
Map<String, int> get toolUsageCounts {
|
||||
final counts = <String, int>{};
|
||||
for (final tool in toolsUsed) {
|
||||
counts[tool.name] = (counts[tool.name] ?? 0) + 1;
|
||||
}
|
||||
return counts;
|
||||
}
|
||||
|
||||
int get messageCount => messages.length;
|
||||
int get userMessageCount =>
|
||||
messages.where((m) => m.type == 'user').length;
|
||||
int get assistantMessageCount =>
|
||||
messages.where((m) => m.type == 'assistant').length;
|
||||
}
|
||||
|
||||
class SessionLog {
|
||||
final String? sessionId;
|
||||
final String? cwd;
|
||||
final String? version;
|
||||
final String? gitBranch;
|
||||
final List<LogEntry> allEntries;
|
||||
final List<LogEntry> mainConversation;
|
||||
final List<AgentInfo> agents;
|
||||
final AgentInfo mainAgent;
|
||||
final TokenUsage totalUsage;
|
||||
final Map<String, List<ToolUseBlock>> toolsByName;
|
||||
final DateTime? startTime;
|
||||
final DateTime? endTime;
|
||||
|
||||
/// Lookup subagent by ID (matches both full id and partial)
|
||||
late final Map<String, AgentInfo> agentById = {
|
||||
for (final a in agents) a.id: a,
|
||||
};
|
||||
|
||||
SessionLog({
|
||||
this.sessionId,
|
||||
this.cwd,
|
||||
this.version,
|
||||
this.gitBranch,
|
||||
required this.allEntries,
|
||||
required this.mainConversation,
|
||||
required this.agents,
|
||||
required this.mainAgent,
|
||||
required this.totalUsage,
|
||||
required this.toolsByName,
|
||||
this.startTime,
|
||||
this.endTime,
|
||||
});
|
||||
|
||||
/// Find an agent that matches a tool_use id (Agent tool calls use
|
||||
/// the tool_use block id, subagent files use a shortened agentId)
|
||||
AgentInfo? findAgentForToolUse(String toolUseId) {
|
||||
// Direct match
|
||||
if (agentById.containsKey(toolUseId)) return agentById[toolUseId];
|
||||
// Partial match: subagent file ids are shortened (e.g. "a014e30b71de602bb")
|
||||
for (final agent in agents) {
|
||||
if (agent.id == 'main') continue;
|
||||
if (toolUseId.contains(agent.id) || agent.id.contains(toolUseId)) {
|
||||
return agent;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
Duration? get duration {
|
||||
if (startTime != null && endTime != null) {
|
||||
return endTime!.difference(startTime!);
|
||||
}
|
||||
return null;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,116 @@
|
||||
class ContentBlock {
|
||||
final String type;
|
||||
final Map<String, dynamic> raw;
|
||||
|
||||
ContentBlock({required this.type, required this.raw});
|
||||
|
||||
factory ContentBlock.fromJson(Map<String, dynamic> json) {
|
||||
final type = json['type'] as String? ?? 'unknown';
|
||||
switch (type) {
|
||||
case 'text':
|
||||
return TextBlock.fromJson(json);
|
||||
case 'thinking':
|
||||
return ThinkingBlock.fromJson(json);
|
||||
case 'tool_use':
|
||||
return ToolUseBlock.fromJson(json);
|
||||
default:
|
||||
return ContentBlock(type: type, raw: json);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
class TextBlock extends ContentBlock {
|
||||
final String text;
|
||||
|
||||
TextBlock({required this.text, required Map<String, dynamic> raw})
|
||||
: super(type: 'text', raw: raw);
|
||||
|
||||
factory TextBlock.fromJson(Map<String, dynamic> json) {
|
||||
return TextBlock(
|
||||
text: json['text'] as String? ?? '',
|
||||
raw: json,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class ThinkingBlock extends ContentBlock {
|
||||
final String thinking;
|
||||
final String? signature;
|
||||
|
||||
ThinkingBlock({
|
||||
required this.thinking,
|
||||
this.signature,
|
||||
required Map<String, dynamic> raw,
|
||||
}) : super(type: 'thinking', raw: raw);
|
||||
|
||||
factory ThinkingBlock.fromJson(Map<String, dynamic> json) {
|
||||
return ThinkingBlock(
|
||||
thinking: json['thinking'] as String? ?? '',
|
||||
signature: json['signature'] as String?,
|
||||
raw: json,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class ToolUseBlock extends ContentBlock {
|
||||
final String id;
|
||||
final String name;
|
||||
final Map<String, dynamic> input;
|
||||
ToolResultData? linkedResult;
|
||||
|
||||
ToolUseBlock({
|
||||
required this.id,
|
||||
required this.name,
|
||||
required this.input,
|
||||
this.linkedResult,
|
||||
required Map<String, dynamic> raw,
|
||||
}) : super(type: 'tool_use', raw: raw);
|
||||
|
||||
factory ToolUseBlock.fromJson(Map<String, dynamic> json) {
|
||||
return ToolUseBlock(
|
||||
id: json['id'] as String? ?? '',
|
||||
name: json['name'] as String? ?? '',
|
||||
input: (json['input'] as Map<String, dynamic>?) ?? {},
|
||||
raw: json,
|
||||
);
|
||||
}
|
||||
|
||||
bool get isAgentCall => name == 'Agent';
|
||||
String? get subagentType => isAgentCall ? input['subagent_type'] as String? : null;
|
||||
String? get agentDescription => isAgentCall ? input['description'] as String? : null;
|
||||
String? get agentPrompt => isAgentCall ? input['prompt'] as String? : null;
|
||||
}
|
||||
|
||||
class ToolResultData {
|
||||
final String toolUseId;
|
||||
final dynamic content;
|
||||
final bool isError;
|
||||
final Map<String, dynamic> raw;
|
||||
|
||||
ToolResultData({
|
||||
required this.toolUseId,
|
||||
this.content,
|
||||
this.isError = false,
|
||||
required this.raw,
|
||||
});
|
||||
|
||||
String get textContent {
|
||||
if (content is String) return content;
|
||||
if (content is List) {
|
||||
return (content as List)
|
||||
.where((c) => c is Map && c['type'] == 'text')
|
||||
.map((c) => c['text'] as String? ?? '')
|
||||
.join('\n');
|
||||
}
|
||||
return content?.toString() ?? '';
|
||||
}
|
||||
|
||||
factory ToolResultData.fromJson(Map<String, dynamic> json) {
|
||||
return ToolResultData(
|
||||
toolUseId: json['tool_use_id'] as String? ?? '',
|
||||
content: json['content'],
|
||||
isError: json['is_error'] as bool? ?? false,
|
||||
raw: json,
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,296 @@
|
||||
import 'content_block.dart';
|
||||
import 'token_usage.dart';
|
||||
|
||||
class LogEntry {
|
||||
final String? uuid;
|
||||
final String? parentUuid;
|
||||
final String? sessionId;
|
||||
final DateTime? timestamp;
|
||||
final String? cwd;
|
||||
final String? version;
|
||||
final String? gitBranch;
|
||||
final String type;
|
||||
final bool isSidechain;
|
||||
final Map<String, dynamic> raw;
|
||||
|
||||
LogEntry({
|
||||
this.uuid,
|
||||
this.parentUuid,
|
||||
this.sessionId,
|
||||
this.timestamp,
|
||||
this.cwd,
|
||||
this.version,
|
||||
this.gitBranch,
|
||||
required this.type,
|
||||
this.isSidechain = false,
|
||||
required this.raw,
|
||||
});
|
||||
|
||||
factory LogEntry.fromJson(Map<String, dynamic> json) {
|
||||
final type = json['type'] as String? ?? 'unknown';
|
||||
switch (type) {
|
||||
case 'user':
|
||||
return UserEntry.fromJson(json);
|
||||
case 'assistant':
|
||||
return AssistantEntry.fromJson(json);
|
||||
case 'system':
|
||||
return SystemEntry.fromJson(json);
|
||||
case 'progress':
|
||||
return ProgressEntry.fromJson(json);
|
||||
case 'file-history-snapshot':
|
||||
return FileSnapshotEntry.fromJson(json);
|
||||
default:
|
||||
return _baseFromJson(json, type);
|
||||
}
|
||||
}
|
||||
|
||||
static LogEntry _baseFromJson(Map<String, dynamic> json, String type) {
|
||||
return LogEntry(
|
||||
uuid: json['uuid'] as String?,
|
||||
parentUuid: json['parentUuid'] as String?,
|
||||
sessionId: json['sessionId'] as String?,
|
||||
timestamp: _parseTimestamp(json['timestamp']),
|
||||
cwd: json['cwd'] as String?,
|
||||
version: json['version'] as String?,
|
||||
gitBranch: json['gitBranch'] as String?,
|
||||
type: type,
|
||||
isSidechain: json['isSidechain'] as bool? ?? false,
|
||||
raw: json,
|
||||
);
|
||||
}
|
||||
|
||||
static DateTime? _parseTimestamp(dynamic ts) {
|
||||
if (ts is String) return DateTime.tryParse(ts);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
class UserEntry extends LogEntry {
|
||||
final dynamic content;
|
||||
|
||||
UserEntry({
|
||||
required this.content,
|
||||
required super.uuid,
|
||||
required super.parentUuid,
|
||||
required super.sessionId,
|
||||
required super.timestamp,
|
||||
required super.cwd,
|
||||
required super.version,
|
||||
required super.gitBranch,
|
||||
required super.isSidechain,
|
||||
required super.raw,
|
||||
}) : super(type: 'user');
|
||||
|
||||
String get promptText {
|
||||
if (content is String) return content;
|
||||
return '';
|
||||
}
|
||||
|
||||
bool get isToolResult => content is List;
|
||||
|
||||
List<ToolResultData> get toolResults {
|
||||
if (content is! List) return [];
|
||||
return (content as List)
|
||||
.where((c) => c is Map<String, dynamic> && c['type'] == 'tool_result')
|
||||
.map((c) => ToolResultData.fromJson(c as Map<String, dynamic>))
|
||||
.toList();
|
||||
}
|
||||
|
||||
factory UserEntry.fromJson(Map<String, dynamic> json) {
|
||||
final message = json['message'] as Map<String, dynamic>? ?? {};
|
||||
return UserEntry(
|
||||
content: message['content'],
|
||||
uuid: json['uuid'] as String?,
|
||||
parentUuid: json['parentUuid'] as String?,
|
||||
sessionId: json['sessionId'] as String?,
|
||||
timestamp: LogEntry._parseTimestamp(json['timestamp']),
|
||||
cwd: json['cwd'] as String?,
|
||||
version: json['version'] as String?,
|
||||
gitBranch: json['gitBranch'] as String?,
|
||||
isSidechain: json['isSidechain'] as bool? ?? false,
|
||||
raw: json,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class AssistantEntry extends LogEntry {
|
||||
final String? model;
|
||||
final String? messageId;
|
||||
final List<ContentBlock> contentBlocks;
|
||||
final TokenUsage? usage;
|
||||
final String? stopReason;
|
||||
|
||||
AssistantEntry({
|
||||
this.model,
|
||||
this.messageId,
|
||||
required this.contentBlocks,
|
||||
this.usage,
|
||||
this.stopReason,
|
||||
required super.uuid,
|
||||
required super.parentUuid,
|
||||
required super.sessionId,
|
||||
required super.timestamp,
|
||||
required super.cwd,
|
||||
required super.version,
|
||||
required super.gitBranch,
|
||||
required super.isSidechain,
|
||||
required super.raw,
|
||||
}) : super(type: 'assistant');
|
||||
|
||||
List<TextBlock> get textBlocks =>
|
||||
contentBlocks.whereType<TextBlock>().toList();
|
||||
List<ThinkingBlock> get thinkingBlocks =>
|
||||
contentBlocks.whereType<ThinkingBlock>().toList();
|
||||
List<ToolUseBlock> get toolUseBlocks =>
|
||||
contentBlocks.whereType<ToolUseBlock>().toList();
|
||||
|
||||
bool get hasText => textBlocks.isNotEmpty;
|
||||
bool get hasThinking => thinkingBlocks.isNotEmpty;
|
||||
bool get hasToolUse => toolUseBlocks.isNotEmpty;
|
||||
|
||||
factory AssistantEntry.fromJson(Map<String, dynamic> json) {
|
||||
final message = json['message'] as Map<String, dynamic>? ?? {};
|
||||
final contentList = message['content'] as List<dynamic>? ?? [];
|
||||
final usageJson = message['usage'] as Map<String, dynamic>?;
|
||||
|
||||
return AssistantEntry(
|
||||
model: message['model'] as String?,
|
||||
messageId: message['id'] as String?,
|
||||
contentBlocks: contentList
|
||||
.whereType<Map<String, dynamic>>()
|
||||
.map((c) => ContentBlock.fromJson(c))
|
||||
.toList(),
|
||||
usage: usageJson != null ? TokenUsage.fromJson(usageJson) : null,
|
||||
stopReason: message['stop_reason'] as String?,
|
||||
uuid: json['uuid'] as String?,
|
||||
parentUuid: json['parentUuid'] as String?,
|
||||
sessionId: json['sessionId'] as String?,
|
||||
timestamp: LogEntry._parseTimestamp(json['timestamp']),
|
||||
cwd: json['cwd'] as String?,
|
||||
version: json['version'] as String?,
|
||||
gitBranch: json['gitBranch'] as String?,
|
||||
isSidechain: json['isSidechain'] as bool? ?? false,
|
||||
raw: json,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class SystemEntry extends LogEntry {
|
||||
final String? subtype;
|
||||
final int? durationMs;
|
||||
final String? slug;
|
||||
|
||||
SystemEntry({
|
||||
this.subtype,
|
||||
this.durationMs,
|
||||
this.slug,
|
||||
required super.uuid,
|
||||
required super.parentUuid,
|
||||
required super.sessionId,
|
||||
required super.timestamp,
|
||||
required super.cwd,
|
||||
required super.version,
|
||||
required super.gitBranch,
|
||||
required super.isSidechain,
|
||||
required super.raw,
|
||||
}) : super(type: 'system');
|
||||
|
||||
factory SystemEntry.fromJson(Map<String, dynamic> json) {
|
||||
return SystemEntry(
|
||||
subtype: json['subtype'] as String?,
|
||||
durationMs: json['durationMs'] as int?,
|
||||
slug: json['slug'] as String?,
|
||||
uuid: json['uuid'] as String?,
|
||||
parentUuid: json['parentUuid'] as String?,
|
||||
sessionId: json['sessionId'] as String?,
|
||||
timestamp: LogEntry._parseTimestamp(json['timestamp']),
|
||||
cwd: json['cwd'] as String?,
|
||||
version: json['version'] as String?,
|
||||
gitBranch: json['gitBranch'] as String?,
|
||||
isSidechain: json['isSidechain'] as bool? ?? false,
|
||||
raw: json,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class ProgressEntry extends LogEntry {
|
||||
final String? slug;
|
||||
final String? toolUseID;
|
||||
final String? parentToolUseID;
|
||||
final Map<String, dynamic> data;
|
||||
|
||||
ProgressEntry({
|
||||
this.slug,
|
||||
this.toolUseID,
|
||||
this.parentToolUseID,
|
||||
required this.data,
|
||||
required super.uuid,
|
||||
required super.parentUuid,
|
||||
required super.sessionId,
|
||||
required super.timestamp,
|
||||
required super.cwd,
|
||||
required super.version,
|
||||
required super.gitBranch,
|
||||
required super.isSidechain,
|
||||
required super.raw,
|
||||
}) : super(type: 'progress');
|
||||
|
||||
Map<String, dynamic>? get progressMessage =>
|
||||
data['message'] as Map<String, dynamic>?;
|
||||
|
||||
factory ProgressEntry.fromJson(Map<String, dynamic> json) {
|
||||
return ProgressEntry(
|
||||
slug: json['slug'] as String?,
|
||||
toolUseID: json['toolUseID'] as String?,
|
||||
parentToolUseID: json['parentToolUseID'] as String?,
|
||||
data: (json['data'] as Map<String, dynamic>?) ?? {},
|
||||
uuid: json['uuid'] as String?,
|
||||
parentUuid: json['parentUuid'] as String?,
|
||||
sessionId: json['sessionId'] as String?,
|
||||
timestamp: LogEntry._parseTimestamp(json['timestamp']),
|
||||
cwd: json['cwd'] as String?,
|
||||
version: json['version'] as String?,
|
||||
gitBranch: json['gitBranch'] as String?,
|
||||
isSidechain: json['isSidechain'] as bool? ?? false,
|
||||
raw: json,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class FileSnapshotEntry extends LogEntry {
|
||||
final String? messageId;
|
||||
final Map<String, dynamic> snapshot;
|
||||
final bool isSnapshotUpdate;
|
||||
|
||||
FileSnapshotEntry({
|
||||
this.messageId,
|
||||
required this.snapshot,
|
||||
this.isSnapshotUpdate = false,
|
||||
required super.uuid,
|
||||
required super.parentUuid,
|
||||
required super.sessionId,
|
||||
required super.timestamp,
|
||||
required super.cwd,
|
||||
required super.version,
|
||||
required super.gitBranch,
|
||||
required super.isSidechain,
|
||||
required super.raw,
|
||||
}) : super(type: 'file-history-snapshot');
|
||||
|
||||
factory FileSnapshotEntry.fromJson(Map<String, dynamic> json) {
|
||||
return FileSnapshotEntry(
|
||||
messageId: json['messageId'] as String?,
|
||||
snapshot: (json['snapshot'] as Map<String, dynamic>?) ?? {},
|
||||
isSnapshotUpdate: json['isSnapshotUpdate'] as bool? ?? false,
|
||||
uuid: json['uuid'] as String?,
|
||||
parentUuid: json['parentUuid'] as String?,
|
||||
sessionId: json['sessionId'] as String?,
|
||||
timestamp: LogEntry._parseTimestamp(json['timestamp']),
|
||||
cwd: json['cwd'] as String?,
|
||||
version: json['version'] as String?,
|
||||
gitBranch: json['gitBranch'] as String?,
|
||||
isSidechain: json['isSidechain'] as bool? ?? false,
|
||||
raw: json,
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
class TokenUsage {
|
||||
final int inputTokens;
|
||||
final int outputTokens;
|
||||
final int cacheCreationInputTokens;
|
||||
final int cacheReadInputTokens;
|
||||
|
||||
const TokenUsage({
|
||||
this.inputTokens = 0,
|
||||
this.outputTokens = 0,
|
||||
this.cacheCreationInputTokens = 0,
|
||||
this.cacheReadInputTokens = 0,
|
||||
});
|
||||
|
||||
int get totalTokens =>
|
||||
inputTokens + outputTokens + cacheCreationInputTokens + cacheReadInputTokens;
|
||||
|
||||
TokenUsage operator +(TokenUsage other) => TokenUsage(
|
||||
inputTokens: inputTokens + other.inputTokens,
|
||||
outputTokens: outputTokens + other.outputTokens,
|
||||
cacheCreationInputTokens:
|
||||
cacheCreationInputTokens + other.cacheCreationInputTokens,
|
||||
cacheReadInputTokens:
|
||||
cacheReadInputTokens + other.cacheReadInputTokens,
|
||||
);
|
||||
|
||||
factory TokenUsage.fromJson(Map<String, dynamic> json) {
|
||||
return TokenUsage(
|
||||
inputTokens: json['input_tokens'] as int? ?? 0,
|
||||
outputTokens: json['output_tokens'] as int? ?? 0,
|
||||
cacheCreationInputTokens:
|
||||
json['cache_creation_input_tokens'] as int? ?? 0,
|
||||
cacheReadInputTokens: json['cache_read_input_tokens'] as int? ?? 0,
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,117 @@
|
||||
import 'package:flutter/foundation.dart';
|
||||
import '../models/agent_info.dart';
|
||||
import '../models/log_entry.dart';
|
||||
import '../services/jsonl_parser.dart';
|
||||
|
||||
class SessionProvider with ChangeNotifier {
|
||||
final JsonlParser _parser = JsonlParser();
|
||||
|
||||
SessionLog? _session;
|
||||
bool _isLoading = false;
|
||||
String? _error;
|
||||
String? _filePath;
|
||||
|
||||
// Filter state
|
||||
String? _selectedAgentId;
|
||||
Set<String> _visibleTypes = {'user', 'assistant', 'system'};
|
||||
String _searchQuery = '';
|
||||
|
||||
SessionLog? get session => _session;
|
||||
bool get isLoading => _isLoading;
|
||||
String? get error => _error;
|
||||
String? get filePath => _filePath;
|
||||
String? get selectedAgentId => _selectedAgentId;
|
||||
Set<String> get visibleTypes => _visibleTypes;
|
||||
String get searchQuery => _searchQuery;
|
||||
|
||||
AgentInfo? get selectedAgent {
|
||||
if (_session == null || _selectedAgentId == null) return null;
|
||||
return _session!.agents
|
||||
.where((a) => a.id == _selectedAgentId)
|
||||
.firstOrNull;
|
||||
}
|
||||
|
||||
List<LogEntry> get filteredEntries {
|
||||
if (_session == null) return [];
|
||||
|
||||
List<LogEntry> entries;
|
||||
if (_selectedAgentId != null && _selectedAgentId != 'main') {
|
||||
final agent = selectedAgent;
|
||||
entries = agent?.messages ?? [];
|
||||
} else {
|
||||
entries = _session!.mainConversation;
|
||||
}
|
||||
|
||||
return entries.where((e) {
|
||||
if (!_visibleTypes.contains(e.type)) return false;
|
||||
if (_searchQuery.isNotEmpty) {
|
||||
return _entryMatchesSearch(e, _searchQuery.toLowerCase());
|
||||
}
|
||||
return true;
|
||||
}).toList();
|
||||
}
|
||||
|
||||
bool _entryMatchesSearch(LogEntry entry, String query) {
|
||||
if (entry is UserEntry) {
|
||||
return entry.promptText.toLowerCase().contains(query);
|
||||
}
|
||||
if (entry is AssistantEntry) {
|
||||
for (final block in entry.textBlocks) {
|
||||
if (block.text.toLowerCase().contains(query)) return true;
|
||||
}
|
||||
for (final block in entry.toolUseBlocks) {
|
||||
if (block.name.toLowerCase().contains(query)) return true;
|
||||
if (block.input.toString().toLowerCase().contains(query)) return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
Future<void> loadSession(String filePath) async {
|
||||
_isLoading = true;
|
||||
_error = null;
|
||||
_filePath = filePath;
|
||||
_selectedAgentId = null;
|
||||
_searchQuery = '';
|
||||
notifyListeners();
|
||||
|
||||
try {
|
||||
_session = await _parser.parseFile(filePath);
|
||||
_error = null;
|
||||
} catch (e) {
|
||||
_error = e.toString();
|
||||
_session = null;
|
||||
}
|
||||
|
||||
_isLoading = false;
|
||||
notifyListeners();
|
||||
}
|
||||
|
||||
void selectAgent(String? agentId) {
|
||||
_selectedAgentId = agentId;
|
||||
notifyListeners();
|
||||
}
|
||||
|
||||
void toggleTypeFilter(String type) {
|
||||
if (_visibleTypes.contains(type)) {
|
||||
_visibleTypes = Set.from(_visibleTypes)..remove(type);
|
||||
} else {
|
||||
_visibleTypes = Set.from(_visibleTypes)..add(type);
|
||||
}
|
||||
notifyListeners();
|
||||
}
|
||||
|
||||
void setSearchQuery(String query) {
|
||||
_searchQuery = query;
|
||||
notifyListeners();
|
||||
}
|
||||
|
||||
void clearSession() {
|
||||
_session = null;
|
||||
_filePath = null;
|
||||
_error = null;
|
||||
_selectedAgentId = null;
|
||||
_searchQuery = '';
|
||||
notifyListeners();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,338 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:provider/provider.dart';
|
||||
import '../../models/agent_info.dart';
|
||||
import '../../providers/session_provider.dart';
|
||||
import '../../theme/app_theme.dart';
|
||||
import '../../widgets/common/expandable_card.dart';
|
||||
|
||||
class AgentsScreen extends StatelessWidget {
|
||||
const AgentsScreen({super.key});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final provider = context.watch<SessionProvider>();
|
||||
final session = provider.session;
|
||||
if (session == null) {
|
||||
return const Center(
|
||||
child: Text('No session loaded',
|
||||
style: TextStyle(color: AppColors.textMuted)),
|
||||
);
|
||||
}
|
||||
|
||||
return Scaffold(
|
||||
backgroundColor: AppColors.background,
|
||||
body: ListView(
|
||||
padding: const EdgeInsets.all(24),
|
||||
children: [
|
||||
const Text(
|
||||
'Agents Overview',
|
||||
style: TextStyle(
|
||||
fontSize: 20,
|
||||
fontWeight: FontWeight.bold,
|
||||
color: AppColors.textPrimary,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
Text(
|
||||
'${session.agents.length} agent(s) used in this session',
|
||||
style: const TextStyle(fontSize: 13, color: AppColors.textSecondary),
|
||||
),
|
||||
const SizedBox(height: 24),
|
||||
|
||||
// Summary cards
|
||||
Wrap(
|
||||
spacing: 12,
|
||||
runSpacing: 12,
|
||||
children: [
|
||||
_SummaryCard(
|
||||
label: 'Total Agents',
|
||||
value: '${session.agents.length}',
|
||||
icon: Icons.smart_toy_outlined,
|
||||
color: AppColors.agent,
|
||||
),
|
||||
_SummaryCard(
|
||||
label: 'Total Tools Used',
|
||||
value: '${session.toolsByName.length}',
|
||||
icon: Icons.build_outlined,
|
||||
color: AppColors.tool,
|
||||
),
|
||||
_SummaryCard(
|
||||
label: 'Total Tokens',
|
||||
value: _formatTokens(session.totalUsage.totalTokens),
|
||||
icon: Icons.data_usage,
|
||||
color: AppColors.assistant,
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 24),
|
||||
|
||||
// Agent cards
|
||||
for (final agent in session.agents) ...[
|
||||
_AgentCard(agent: agent),
|
||||
const SizedBox(height: 12),
|
||||
],
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
String _formatTokens(int tokens) {
|
||||
if (tokens >= 1000000) return '${(tokens / 1000000).toStringAsFixed(1)}M';
|
||||
if (tokens >= 1000) return '${(tokens / 1000).toStringAsFixed(1)}K';
|
||||
return '$tokens';
|
||||
}
|
||||
}
|
||||
|
||||
class _SummaryCard extends StatelessWidget {
|
||||
final String label;
|
||||
final String value;
|
||||
final IconData icon;
|
||||
final Color color;
|
||||
|
||||
const _SummaryCard({
|
||||
required this.label,
|
||||
required this.value,
|
||||
required this.icon,
|
||||
required this.color,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
width: 200,
|
||||
padding: const EdgeInsets.all(16),
|
||||
decoration: BoxDecoration(
|
||||
color: AppColors.surface,
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
border: Border.all(color: AppColors.surfaceBorder),
|
||||
),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Icon(icon, size: 20, color: color),
|
||||
const SizedBox(height: 12),
|
||||
Text(
|
||||
value,
|
||||
style: TextStyle(
|
||||
fontSize: 24,
|
||||
fontWeight: FontWeight.bold,
|
||||
color: color,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 4),
|
||||
Text(
|
||||
label,
|
||||
style: const TextStyle(fontSize: 12, color: AppColors.textMuted),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _AgentCard extends StatelessWidget {
|
||||
final AgentInfo agent;
|
||||
|
||||
const _AgentCard({required this.agent});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final isMain = agent.id == 'main';
|
||||
final color = isMain ? AppColors.assistant : AppColors.agent;
|
||||
|
||||
return ExpandableCard(
|
||||
initiallyExpanded: isMain,
|
||||
backgroundColor: isMain ? AppColors.assistantBg : AppColors.agentBg,
|
||||
borderColor: color.withAlpha(40),
|
||||
header: Row(
|
||||
children: [
|
||||
Icon(
|
||||
isMain ? Icons.smart_toy : Icons.smart_toy_outlined,
|
||||
size: 16,
|
||||
color: color,
|
||||
),
|
||||
const SizedBox(width: 8),
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
agent.name,
|
||||
style: TextStyle(
|
||||
fontSize: 13,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: color,
|
||||
),
|
||||
),
|
||||
if (agent.subagentType != null)
|
||||
Text(
|
||||
agent.subagentType!,
|
||||
style: const TextStyle(
|
||||
fontSize: 11, color: AppColors.textMuted),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
if (agent.model != null)
|
||||
Container(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 2),
|
||||
decoration: BoxDecoration(
|
||||
color: AppColors.surfaceLight,
|
||||
borderRadius: BorderRadius.circular(3),
|
||||
),
|
||||
child: Text(
|
||||
agent.model!,
|
||||
style: const TextStyle(
|
||||
fontSize: 10,
|
||||
color: AppColors.textSecondary,
|
||||
fontFamily: 'JetBrains Mono'),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
children: [
|
||||
// Stats row
|
||||
Row(
|
||||
children: [
|
||||
_StatChip('Messages', '${agent.messageCount}'),
|
||||
const SizedBox(width: 8),
|
||||
_StatChip('Tool Calls', '${agent.toolsUsed.length}'),
|
||||
const SizedBox(width: 8),
|
||||
_StatChip(
|
||||
'Input Tokens',
|
||||
_formatTokens(agent.aggregatedUsage.inputTokens),
|
||||
),
|
||||
const SizedBox(width: 8),
|
||||
_StatChip(
|
||||
'Output Tokens',
|
||||
_formatTokens(agent.aggregatedUsage.outputTokens),
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 12),
|
||||
|
||||
// Description
|
||||
if (agent.description != null) ...[
|
||||
const Text(
|
||||
'DESCRIPTION',
|
||||
style: TextStyle(
|
||||
fontSize: 10,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: AppColors.textMuted,
|
||||
letterSpacing: 1,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 4),
|
||||
Text(
|
||||
agent.description!,
|
||||
style: const TextStyle(
|
||||
fontSize: 12, color: AppColors.textSecondary),
|
||||
),
|
||||
const SizedBox(height: 12),
|
||||
],
|
||||
|
||||
// Prompt
|
||||
if (agent.prompt != null) ...[
|
||||
ExpandableCard(
|
||||
backgroundColor: AppColors.surface,
|
||||
borderColor: AppColors.surfaceBorder,
|
||||
header: const Text(
|
||||
'Agent Prompt',
|
||||
style: TextStyle(fontSize: 11, color: AppColors.textMuted),
|
||||
),
|
||||
child: SelectableText(
|
||||
agent.prompt!,
|
||||
style: const TextStyle(
|
||||
fontSize: 12,
|
||||
color: AppColors.textSecondary,
|
||||
height: 1.5,
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
],
|
||||
|
||||
// Toolbelt
|
||||
if (agent.uniqueToolNames.isNotEmpty) ...[
|
||||
const Text(
|
||||
'TOOLBELT',
|
||||
style: TextStyle(
|
||||
fontSize: 10,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: AppColors.textMuted,
|
||||
letterSpacing: 1,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 6),
|
||||
Wrap(
|
||||
spacing: 6,
|
||||
runSpacing: 6,
|
||||
children: agent.toolUsageCounts.entries.map((e) {
|
||||
return Container(
|
||||
padding:
|
||||
const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
|
||||
decoration: BoxDecoration(
|
||||
color: AppColors.toolBg,
|
||||
borderRadius: BorderRadius.circular(4),
|
||||
border: Border.all(color: AppColors.tool.withAlpha(40)),
|
||||
),
|
||||
child: Text(
|
||||
'${e.key} (${e.value})',
|
||||
style: const TextStyle(
|
||||
fontSize: 11,
|
||||
color: AppColors.tool,
|
||||
fontFamily: 'JetBrains Mono',
|
||||
),
|
||||
),
|
||||
);
|
||||
}).toList(),
|
||||
),
|
||||
],
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
String _formatTokens(int tokens) {
|
||||
if (tokens >= 1000000) return '${(tokens / 1000000).toStringAsFixed(1)}M';
|
||||
if (tokens >= 1000) return '${(tokens / 1000).toStringAsFixed(1)}K';
|
||||
return '$tokens';
|
||||
}
|
||||
}
|
||||
|
||||
class _StatChip extends StatelessWidget {
|
||||
final String label;
|
||||
final String value;
|
||||
|
||||
const _StatChip(this.label, this.value);
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
|
||||
decoration: BoxDecoration(
|
||||
color: AppColors.surfaceLight,
|
||||
borderRadius: BorderRadius.circular(4),
|
||||
),
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Text(
|
||||
'$label: ',
|
||||
style: const TextStyle(fontSize: 11, color: AppColors.textMuted),
|
||||
),
|
||||
Text(
|
||||
value,
|
||||
style: const TextStyle(
|
||||
fontSize: 11,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: AppColors.textPrimary,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,870 @@
|
||||
import 'dart:io';
|
||||
import 'package:file_picker/file_picker.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:provider/provider.dart';
|
||||
import '../../providers/session_provider.dart';
|
||||
import '../../theme/app_theme.dart';
|
||||
|
||||
// ─── Data models ─────────────────────────────────────────────
|
||||
|
||||
class _Project {
|
||||
final String dirPath;
|
||||
final String rawDirName;
|
||||
final String displayName;
|
||||
final String fullPath; // the actual filesystem path it maps to
|
||||
final List<_SessionFile> sessions;
|
||||
final DateTime lastModified;
|
||||
|
||||
_Project({
|
||||
required this.dirPath,
|
||||
required this.rawDirName,
|
||||
required this.displayName,
|
||||
required this.fullPath,
|
||||
required this.sessions,
|
||||
required this.lastModified,
|
||||
});
|
||||
|
||||
int get sessionCount => sessions.length;
|
||||
}
|
||||
|
||||
class _SessionFile {
|
||||
final File file;
|
||||
final FileStat stat;
|
||||
final String sessionId;
|
||||
|
||||
_SessionFile({
|
||||
required this.file,
|
||||
required this.stat,
|
||||
required this.sessionId,
|
||||
});
|
||||
}
|
||||
|
||||
// ─── Color helpers for project icons ─────────────────────────
|
||||
|
||||
const _projectColors = [
|
||||
Color(0xFF3B82F6),
|
||||
Color(0xFF10B981),
|
||||
Color(0xFFA855F7),
|
||||
Color(0xFFF59E0B),
|
||||
Color(0xFFEF4444),
|
||||
Color(0xFF06B6D4),
|
||||
Color(0xFFF97316),
|
||||
Color(0xFF8B5CF6),
|
||||
Color(0xFFEC4899),
|
||||
Color(0xFF14B8A6),
|
||||
];
|
||||
|
||||
Color _colorForProject(String name) {
|
||||
final hash = name.codeUnits.fold<int>(0, (prev, c) => prev + c);
|
||||
return _projectColors[hash % _projectColors.length];
|
||||
}
|
||||
|
||||
const _projectIcons = [
|
||||
Icons.folder_outlined,
|
||||
Icons.code,
|
||||
Icons.terminal,
|
||||
Icons.cloud_outlined,
|
||||
Icons.devices_outlined,
|
||||
Icons.science_outlined,
|
||||
Icons.hub_outlined,
|
||||
Icons.inventory_2_outlined,
|
||||
Icons.web_outlined,
|
||||
Icons.phone_iphone_outlined,
|
||||
];
|
||||
|
||||
IconData _iconForProject(String name) {
|
||||
final lower = name.toLowerCase();
|
||||
if (lower.contains('flutter') || lower.contains('app')) return Icons.phone_iphone_outlined;
|
||||
if (lower.contains('api') || lower.contains('backend')) return Icons.cloud_outlined;
|
||||
if (lower.contains('docker') || lower.contains('helm') || lower.contains('kubernetes') || lower.contains('talos')) return Icons.dns_outlined;
|
||||
if (lower.contains('web') || lower.contains('frontend')) return Icons.web_outlined;
|
||||
if (lower.contains('agent') || lower.contains('claude') || lower.contains('auto')) return Icons.smart_toy_outlined;
|
||||
if (lower.contains('dashboard') || lower.contains('cortex')) return Icons.dashboard_outlined;
|
||||
if (lower.contains('doc')) return Icons.description_outlined;
|
||||
final hash = name.codeUnits.fold<int>(0, (prev, c) => prev + c);
|
||||
return _projectIcons[hash % _projectIcons.length];
|
||||
}
|
||||
|
||||
// ─── Main widget ─────────────────────────────────────────────
|
||||
|
||||
class HomeScreen extends StatefulWidget {
|
||||
final VoidCallback onSessionLoaded;
|
||||
const HomeScreen({super.key, required this.onSessionLoaded});
|
||||
|
||||
@override
|
||||
State<HomeScreen> createState() => _HomeScreenState();
|
||||
}
|
||||
|
||||
class _HomeScreenState extends State<HomeScreen> {
|
||||
List<_Project> _projects = [];
|
||||
bool _scanning = true;
|
||||
String _searchQuery = '';
|
||||
_Project? _selectedProject;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
_scanProjects();
|
||||
}
|
||||
|
||||
/// Converts the encoded dir name to a human-readable project name.
|
||||
/// "-Users-mathias-Documents-workspaces-svrnty-talos-rpi5" → "svrnty / talos-rpi5"
|
||||
/// "-Users-mathias" → "~ (home)"
|
||||
/// "-Applications-Auto-Claude-app-Contents-Resources-backend" → "Auto-Claude / backend"
|
||||
String _parsePrettyName(String dirName) {
|
||||
// Reconstruct the original path: leading - is /, inner - are /
|
||||
// But careful: "a-gent-maf-debug" is a single folder name with dashes.
|
||||
// The trick: the encoded path uses - as separator for EVERY path component.
|
||||
// We know the common prefixes so we can strip them.
|
||||
String path = dirName;
|
||||
|
||||
// Strip known prefixes to get to the interesting part
|
||||
final prefixes = [
|
||||
'-Users-mathias-Documents-workspaces-',
|
||||
'-Users-mathias-Documents-',
|
||||
'-Users-mathias-',
|
||||
'-Applications-',
|
||||
];
|
||||
|
||||
String prefix = '';
|
||||
for (final p in prefixes) {
|
||||
if (path.startsWith(p)) {
|
||||
prefix = p;
|
||||
path = path.substring(p.length);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if (path.isEmpty) {
|
||||
if (dirName == '-Users-mathias') return '~ (home)';
|
||||
return dirName;
|
||||
}
|
||||
|
||||
// Now `path` is something like "svrnty-talos-rpi5--out-fondation"
|
||||
// Double dashes (--) were actual dashes in folder names? No — they represent
|
||||
// a subfolder that itself has a dash. We need to figure out the actual
|
||||
// filesystem path. Let's just check if the reconstructed path exists.
|
||||
final home = Platform.environment['HOME'] ?? '';
|
||||
final reconstructed = _reconstructPath(dirName, home);
|
||||
if (reconstructed != null) {
|
||||
// Get last 2 meaningful segments
|
||||
final segs = reconstructed.split('/').where((s) => s.isNotEmpty).toList();
|
||||
// Remove common uninteresting segments
|
||||
final skip = {'Users', 'mathias', 'Documents', 'workspaces', 'Applications', 'Contents', 'Resources'};
|
||||
final meaningful = segs.where((s) => !skip.contains(s)).toList();
|
||||
if (meaningful.length >= 2) {
|
||||
return '${meaningful[meaningful.length - 2]} / ${meaningful.last}';
|
||||
}
|
||||
if (meaningful.isNotEmpty) return meaningful.last;
|
||||
}
|
||||
|
||||
// Fallback: just clean up the raw name
|
||||
return path.replaceAll('--', ' / ').replaceAll('-', ' ');
|
||||
}
|
||||
|
||||
/// Try to reconstruct the actual filesystem path from the encoded dir name.
|
||||
String? _reconstructPath(String dirName, String home) {
|
||||
// The encoding is: replace / with - and prepend -
|
||||
// So /Users/mathias/foo becomes -Users-mathias-foo
|
||||
// Problem: folder names with dashes are ambiguous.
|
||||
// Strategy: try splitting greedily from left, checking if dirs exist.
|
||||
if (!dirName.startsWith('-')) return null;
|
||||
final candidate = dirName.replaceFirst('-', '/');
|
||||
|
||||
// Try the obvious: replace all - with /
|
||||
final simple = candidate.replaceAll('-', '/');
|
||||
if (Directory(simple).existsSync()) return simple;
|
||||
|
||||
// Otherwise, do a greedy left-to-right directory walk
|
||||
final parts = dirName.substring(1).split('-');
|
||||
String current = '';
|
||||
final resolved = <String>[];
|
||||
|
||||
for (int i = 0; i < parts.length; i++) {
|
||||
if (current.isEmpty) {
|
||||
current = parts[i];
|
||||
} else {
|
||||
current = '$current-${parts[i]}';
|
||||
}
|
||||
|
||||
final testPath = '/${resolved.join('/')}/$current';
|
||||
if (Directory(testPath).existsSync() || File(testPath).existsSync()) {
|
||||
resolved.add(current);
|
||||
current = '';
|
||||
}
|
||||
}
|
||||
if (current.isNotEmpty) resolved.add(current);
|
||||
|
||||
final result = '/${resolved.join('/')}';
|
||||
if (Directory(result).existsSync()) return result;
|
||||
return result; // return anyway as best guess
|
||||
}
|
||||
|
||||
Future<void> _scanProjects() async {
|
||||
final home = Platform.environment['HOME'];
|
||||
if (home == null) return;
|
||||
final claudeDir = Directory('$home/.claude/projects');
|
||||
if (!await claudeDir.exists()) {
|
||||
setState(() => _scanning = false);
|
||||
return;
|
||||
}
|
||||
|
||||
final projects = <_Project>[];
|
||||
|
||||
await for (final projectDir in claudeDir.list()) {
|
||||
if (projectDir is! Directory) continue;
|
||||
final dirName = projectDir.path.split('/').last;
|
||||
|
||||
final sessions = <_SessionFile>[];
|
||||
|
||||
// Scan .jsonl files in the project dir
|
||||
try {
|
||||
await for (final entity in projectDir.list()) {
|
||||
if (entity is File &&
|
||||
entity.path.endsWith('.jsonl') &&
|
||||
!entity.path.endsWith('sessions-index.json')) {
|
||||
try {
|
||||
final stat = entity.statSync();
|
||||
final fileName = entity.path.split('/').last;
|
||||
sessions.add(_SessionFile(
|
||||
file: entity,
|
||||
stat: stat,
|
||||
sessionId: fileName.replaceAll('.jsonl', ''),
|
||||
));
|
||||
} catch (_) {}
|
||||
}
|
||||
}
|
||||
} catch (_) {}
|
||||
|
||||
// Also scan sessions/ subdirectory
|
||||
final sessionsDir = Directory('${projectDir.path}/sessions');
|
||||
if (await sessionsDir.exists()) {
|
||||
try {
|
||||
await for (final entity in sessionsDir.list()) {
|
||||
if (entity is File && entity.path.endsWith('.jsonl')) {
|
||||
try {
|
||||
final stat = entity.statSync();
|
||||
final fileName = entity.path.split('/').last;
|
||||
sessions.add(_SessionFile(
|
||||
file: entity,
|
||||
stat: stat,
|
||||
sessionId: fileName.replaceAll('.jsonl', ''),
|
||||
));
|
||||
} catch (_) {}
|
||||
}
|
||||
}
|
||||
} catch (_) {}
|
||||
}
|
||||
|
||||
if (sessions.isEmpty) continue;
|
||||
|
||||
sessions.sort((a, b) => b.stat.modified.compareTo(a.stat.modified));
|
||||
|
||||
final fullPath = _reconstructPath(dirName, home) ?? dirName;
|
||||
|
||||
projects.add(_Project(
|
||||
dirPath: projectDir.path,
|
||||
rawDirName: dirName,
|
||||
displayName: _parsePrettyName(dirName),
|
||||
fullPath: fullPath,
|
||||
sessions: sessions,
|
||||
lastModified: sessions.first.stat.modified,
|
||||
));
|
||||
}
|
||||
|
||||
projects.sort((a, b) => b.lastModified.compareTo(a.lastModified));
|
||||
|
||||
if (mounted) {
|
||||
setState(() {
|
||||
_projects = projects;
|
||||
_scanning = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
Future<void> _pickFile() async {
|
||||
final home = Platform.environment['HOME'] ?? '';
|
||||
final result = await FilePicker.platform.pickFiles(
|
||||
type: FileType.custom,
|
||||
allowedExtensions: ['jsonl'],
|
||||
initialDirectory: '$home/.claude/projects',
|
||||
);
|
||||
if (result != null && result.files.single.path != null) {
|
||||
await _loadFile(result.files.single.path!);
|
||||
}
|
||||
}
|
||||
|
||||
Future<void> _loadFile(String path) async {
|
||||
final provider = context.read<SessionProvider>();
|
||||
await provider.loadSession(path);
|
||||
if (provider.error == null && mounted) {
|
||||
widget.onSessionLoaded();
|
||||
}
|
||||
}
|
||||
|
||||
List<_Project> get _filteredProjects {
|
||||
if (_searchQuery.isEmpty) return _projects;
|
||||
final q = _searchQuery.toLowerCase();
|
||||
return _projects.where((p) =>
|
||||
p.displayName.toLowerCase().contains(q) ||
|
||||
p.fullPath.toLowerCase().contains(q)).toList();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final provider = context.watch<SessionProvider>();
|
||||
|
||||
return Scaffold(
|
||||
backgroundColor: AppColors.background,
|
||||
body: Padding(
|
||||
padding: const EdgeInsets.all(24),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
children: [
|
||||
// Header with breadcrumb
|
||||
_buildHeader(provider),
|
||||
const SizedBox(height: 16),
|
||||
_buildSearchBar(),
|
||||
const SizedBox(height: 16),
|
||||
|
||||
if (provider.isLoading)
|
||||
const Padding(
|
||||
padding: EdgeInsets.only(bottom: 12),
|
||||
child: LinearProgressIndicator(
|
||||
color: AppColors.assistant,
|
||||
backgroundColor: AppColors.surfaceLight,
|
||||
),
|
||||
),
|
||||
|
||||
if (provider.error != null)
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(bottom: 12),
|
||||
child: Container(
|
||||
padding: const EdgeInsets.all(12),
|
||||
decoration: BoxDecoration(
|
||||
color: AppColors.errorBg,
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
border: Border.all(color: AppColors.error.withAlpha(80)),
|
||||
),
|
||||
child: Text(
|
||||
provider.error!,
|
||||
style: const TextStyle(color: AppColors.error, fontSize: 13),
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
// Content
|
||||
if (_scanning)
|
||||
const Expanded(
|
||||
child: Center(
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
CircularProgressIndicator(color: AppColors.assistant),
|
||||
SizedBox(height: 12),
|
||||
Text('Scanning projects...',
|
||||
style: TextStyle(color: AppColors.textMuted, fontSize: 13)),
|
||||
],
|
||||
),
|
||||
),
|
||||
)
|
||||
else if (_selectedProject != null)
|
||||
Expanded(child: _buildSessionList(_selectedProject!))
|
||||
else
|
||||
Expanded(child: _buildProjectGrid()),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
// ─── Header with breadcrumb ──────────────────────────────
|
||||
|
||||
Widget _buildHeader(SessionProvider provider) {
|
||||
return Row(
|
||||
children: [
|
||||
const Icon(Icons.terminal, size: 24, color: AppColors.assistant),
|
||||
const SizedBox(width: 10),
|
||||
// Breadcrumb
|
||||
InkWell(
|
||||
onTap: () => setState(() => _selectedProject = null),
|
||||
borderRadius: BorderRadius.circular(4),
|
||||
child: Text(
|
||||
'Projects',
|
||||
style: TextStyle(
|
||||
fontSize: 18,
|
||||
fontWeight: FontWeight.bold,
|
||||
color: _selectedProject != null
|
||||
? AppColors.assistant
|
||||
: AppColors.textPrimary,
|
||||
decoration: _selectedProject != null
|
||||
? TextDecoration.underline
|
||||
: TextDecoration.none,
|
||||
decorationColor: AppColors.assistant,
|
||||
),
|
||||
),
|
||||
),
|
||||
if (_selectedProject != null) ...[
|
||||
const Padding(
|
||||
padding: EdgeInsets.symmetric(horizontal: 8),
|
||||
child: Icon(Icons.chevron_right, size: 18, color: AppColors.textMuted),
|
||||
),
|
||||
Flexible(
|
||||
child: Text(
|
||||
_selectedProject!.displayName,
|
||||
style: const TextStyle(
|
||||
fontSize: 18,
|
||||
fontWeight: FontWeight.bold,
|
||||
color: AppColors.textPrimary,
|
||||
),
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
],
|
||||
const Spacer(),
|
||||
Text(
|
||||
_selectedProject != null
|
||||
? '${_selectedProject!.sessionCount} session${_selectedProject!.sessionCount == 1 ? '' : 's'}'
|
||||
: '${_projects.length} projects',
|
||||
style: const TextStyle(fontSize: 12, color: AppColors.textMuted),
|
||||
),
|
||||
const SizedBox(width: 12),
|
||||
ElevatedButton.icon(
|
||||
onPressed: _pickFile,
|
||||
icon: const Icon(Icons.folder_open, size: 14),
|
||||
label: const Text('Browse'),
|
||||
style: ElevatedButton.styleFrom(
|
||||
backgroundColor: AppColors.surfaceLight,
|
||||
foregroundColor: AppColors.textPrimary,
|
||||
padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 8),
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(6),
|
||||
side: const BorderSide(color: AppColors.surfaceBorder),
|
||||
),
|
||||
textStyle: const TextStyle(fontSize: 12),
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
// ─── Search bar ──────────────────────────────────────────
|
||||
|
||||
Widget _buildSearchBar() {
|
||||
return TextField(
|
||||
onChanged: (v) => setState(() => _searchQuery = v),
|
||||
style: const TextStyle(fontSize: 13, color: AppColors.textPrimary),
|
||||
decoration: InputDecoration(
|
||||
hintText: _selectedProject != null
|
||||
? 'Search sessions...'
|
||||
: 'Search projects...',
|
||||
hintStyle: const TextStyle(fontSize: 13, color: AppColors.textMuted),
|
||||
prefixIcon: const Icon(Icons.search, size: 18, color: AppColors.textMuted),
|
||||
isDense: true,
|
||||
contentPadding: const EdgeInsets.symmetric(vertical: 12),
|
||||
filled: true,
|
||||
fillColor: AppColors.surface,
|
||||
border: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
borderSide: const BorderSide(color: AppColors.surfaceBorder),
|
||||
),
|
||||
enabledBorder: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
borderSide: const BorderSide(color: AppColors.surfaceBorder),
|
||||
),
|
||||
focusedBorder: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
borderSide: const BorderSide(color: AppColors.assistant),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
// ─── Project grid ────────────────────────────────────────
|
||||
|
||||
Widget _buildProjectGrid() {
|
||||
final filtered = _filteredProjects;
|
||||
if (filtered.isEmpty) {
|
||||
return const Center(
|
||||
child: Text('No projects found', style: TextStyle(color: AppColors.textMuted)),
|
||||
);
|
||||
}
|
||||
|
||||
return LayoutBuilder(builder: (context, constraints) {
|
||||
final crossAxisCount = constraints.maxWidth > 900
|
||||
? 4
|
||||
: constraints.maxWidth > 600
|
||||
? 3
|
||||
: 2;
|
||||
|
||||
return GridView.builder(
|
||||
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
|
||||
crossAxisCount: crossAxisCount,
|
||||
mainAxisSpacing: 12,
|
||||
crossAxisSpacing: 12,
|
||||
childAspectRatio: 1.6,
|
||||
),
|
||||
itemCount: filtered.length,
|
||||
itemBuilder: (context, index) => _ProjectCard(
|
||||
project: filtered[index],
|
||||
onTap: () => setState(() {
|
||||
_selectedProject = filtered[index];
|
||||
_searchQuery = '';
|
||||
}),
|
||||
),
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
// ─── Session list (inside a project) ─────────────────────
|
||||
|
||||
Widget _buildSessionList(_Project project) {
|
||||
final sessions = _searchQuery.isEmpty
|
||||
? project.sessions
|
||||
: project.sessions.where((s) =>
|
||||
s.sessionId.toLowerCase().contains(_searchQuery.toLowerCase())).toList();
|
||||
|
||||
if (sessions.isEmpty) {
|
||||
return const Center(
|
||||
child: Text('No matching sessions', style: TextStyle(color: AppColors.textMuted)),
|
||||
);
|
||||
}
|
||||
|
||||
return Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
children: [
|
||||
// Project info bar
|
||||
Container(
|
||||
padding: const EdgeInsets.all(14),
|
||||
margin: const EdgeInsets.only(bottom: 12),
|
||||
decoration: BoxDecoration(
|
||||
color: AppColors.surface,
|
||||
borderRadius: BorderRadius.circular(10),
|
||||
border: Border.all(color: AppColors.surfaceBorder),
|
||||
),
|
||||
child: Row(
|
||||
children: [
|
||||
Container(
|
||||
width: 36,
|
||||
height: 36,
|
||||
decoration: BoxDecoration(
|
||||
color: _colorForProject(project.displayName).withAlpha(25),
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
),
|
||||
child: Icon(
|
||||
_iconForProject(project.displayName),
|
||||
size: 18,
|
||||
color: _colorForProject(project.displayName),
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 12),
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
project.displayName,
|
||||
style: const TextStyle(
|
||||
fontSize: 14,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: AppColors.textPrimary,
|
||||
),
|
||||
),
|
||||
Text(
|
||||
project.fullPath,
|
||||
style: const TextStyle(
|
||||
fontSize: 11,
|
||||
color: AppColors.textMuted,
|
||||
fontFamily: 'JetBrains Mono',
|
||||
),
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
// Session list
|
||||
Expanded(
|
||||
child: ListView.builder(
|
||||
itemCount: sessions.length,
|
||||
itemBuilder: (context, index) {
|
||||
final session = sessions[index];
|
||||
return _SessionTile(
|
||||
session: session,
|
||||
index: index,
|
||||
isActive: context.read<SessionProvider>().filePath == session.file.path,
|
||||
onTap: () => _loadFile(session.file.path),
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
// ─── Formatting helpers ──────────────────────────────────
|
||||
|
||||
static String formatDate(DateTime date) {
|
||||
final now = DateTime.now();
|
||||
final diff = now.difference(date);
|
||||
if (diff.inMinutes < 60) return '${diff.inMinutes}m ago';
|
||||
if (diff.inHours < 24) return '${diff.inHours}h ago';
|
||||
if (diff.inDays < 7) return '${diff.inDays}d ago';
|
||||
final months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
|
||||
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
|
||||
return '${months[date.month - 1]} ${date.day}';
|
||||
}
|
||||
|
||||
static String formatDateTime(DateTime date) {
|
||||
final months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
|
||||
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
|
||||
return '${months[date.month - 1]} ${date.day}, ${date.year} at '
|
||||
'${date.hour.toString().padLeft(2, '0')}:${date.minute.toString().padLeft(2, '0')}';
|
||||
}
|
||||
|
||||
static String formatSize(int bytes) {
|
||||
final kb = bytes / 1024;
|
||||
final mb = kb / 1024;
|
||||
if (mb >= 1) return '${mb.toStringAsFixed(1)} MB';
|
||||
return '${kb.toStringAsFixed(0)} KB';
|
||||
}
|
||||
}
|
||||
|
||||
// ─── Project card widget ───────────────────────────────────
|
||||
|
||||
class _ProjectCard extends StatefulWidget {
|
||||
final _Project project;
|
||||
final VoidCallback onTap;
|
||||
|
||||
const _ProjectCard({required this.project, required this.onTap});
|
||||
|
||||
@override
|
||||
State<_ProjectCard> createState() => _ProjectCardState();
|
||||
}
|
||||
|
||||
class _ProjectCardState extends State<_ProjectCard> {
|
||||
bool _hovered = false;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final color = _colorForProject(widget.project.displayName);
|
||||
final icon = _iconForProject(widget.project.displayName);
|
||||
|
||||
return MouseRegion(
|
||||
onEnter: (_) => setState(() => _hovered = true),
|
||||
onExit: (_) => setState(() => _hovered = false),
|
||||
child: GestureDetector(
|
||||
onTap: widget.onTap,
|
||||
child: AnimatedContainer(
|
||||
duration: const Duration(milliseconds: 150),
|
||||
padding: const EdgeInsets.all(16),
|
||||
decoration: BoxDecoration(
|
||||
color: _hovered ? AppColors.surfaceLight : AppColors.surface,
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
border: Border.all(
|
||||
color: _hovered ? color.withAlpha(60) : AppColors.surfaceBorder,
|
||||
width: _hovered ? 1.5 : 1,
|
||||
),
|
||||
boxShadow: _hovered
|
||||
? [BoxShadow(color: color.withAlpha(15), blurRadius: 20, spreadRadius: 2)]
|
||||
: null,
|
||||
),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Row(
|
||||
children: [
|
||||
Container(
|
||||
width: 36,
|
||||
height: 36,
|
||||
decoration: BoxDecoration(
|
||||
color: color.withAlpha(25),
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
),
|
||||
child: Icon(icon, size: 18, color: color),
|
||||
),
|
||||
const Spacer(),
|
||||
Container(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 3),
|
||||
decoration: BoxDecoration(
|
||||
color: color.withAlpha(15),
|
||||
borderRadius: BorderRadius.circular(10),
|
||||
),
|
||||
child: Text(
|
||||
'${widget.project.sessionCount}',
|
||||
style: TextStyle(
|
||||
fontSize: 11,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: color,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
const Spacer(),
|
||||
Text(
|
||||
widget.project.displayName,
|
||||
style: const TextStyle(
|
||||
fontSize: 13,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: AppColors.textPrimary,
|
||||
),
|
||||
maxLines: 2,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
const SizedBox(height: 4),
|
||||
Text(
|
||||
_HomeScreenState.formatDate(widget.project.lastModified),
|
||||
style: const TextStyle(fontSize: 11, color: AppColors.textMuted),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// ─── Session tile widget ───────────────────────────────────
|
||||
|
||||
class _SessionTile extends StatefulWidget {
|
||||
final _SessionFile session;
|
||||
final int index;
|
||||
final bool isActive;
|
||||
final VoidCallback onTap;
|
||||
|
||||
const _SessionTile({
|
||||
required this.session,
|
||||
required this.index,
|
||||
required this.isActive,
|
||||
required this.onTap,
|
||||
});
|
||||
|
||||
@override
|
||||
State<_SessionTile> createState() => _SessionTileState();
|
||||
}
|
||||
|
||||
class _SessionTileState extends State<_SessionTile> {
|
||||
bool _hovered = false;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final dt = widget.session.stat.modified;
|
||||
final isActive = widget.isActive;
|
||||
|
||||
return MouseRegion(
|
||||
onEnter: (_) => setState(() => _hovered = true),
|
||||
onExit: (_) => setState(() => _hovered = false),
|
||||
child: GestureDetector(
|
||||
onTap: widget.onTap,
|
||||
child: AnimatedContainer(
|
||||
duration: const Duration(milliseconds: 120),
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 14),
|
||||
margin: const EdgeInsets.only(bottom: 6),
|
||||
decoration: BoxDecoration(
|
||||
color: isActive
|
||||
? AppColors.assistant.withAlpha(12)
|
||||
: _hovered
|
||||
? AppColors.surfaceLight
|
||||
: AppColors.surface,
|
||||
borderRadius: BorderRadius.circular(10),
|
||||
border: Border.all(
|
||||
color: isActive
|
||||
? AppColors.assistant.withAlpha(50)
|
||||
: _hovered
|
||||
? AppColors.surfaceBorder.withAlpha(200)
|
||||
: AppColors.surfaceBorder,
|
||||
),
|
||||
),
|
||||
child: Row(
|
||||
children: [
|
||||
// Session number circle
|
||||
Container(
|
||||
width: 36,
|
||||
height: 36,
|
||||
decoration: BoxDecoration(
|
||||
color: isActive
|
||||
? AppColors.assistant.withAlpha(30)
|
||||
: AppColors.surfaceLight,
|
||||
borderRadius: BorderRadius.circular(18),
|
||||
),
|
||||
child: Center(
|
||||
child: Text(
|
||||
'${widget.index + 1}',
|
||||
style: TextStyle(
|
||||
fontSize: 13,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: isActive ? AppColors.assistant : AppColors.textSecondary,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 14),
|
||||
// Session info
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
_HomeScreenState.formatDateTime(dt),
|
||||
style: TextStyle(
|
||||
fontSize: 13,
|
||||
fontWeight: isActive ? FontWeight.w600 : FontWeight.w500,
|
||||
color: isActive ? AppColors.assistant : AppColors.textPrimary,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 3),
|
||||
Text(
|
||||
widget.session.sessionId,
|
||||
style: const TextStyle(
|
||||
fontSize: 11,
|
||||
color: AppColors.textMuted,
|
||||
fontFamily: 'JetBrains Mono',
|
||||
),
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 12),
|
||||
// Size + relative time
|
||||
Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.end,
|
||||
children: [
|
||||
Text(
|
||||
_HomeScreenState.formatSize(widget.session.stat.size),
|
||||
style: const TextStyle(
|
||||
fontSize: 12,
|
||||
color: AppColors.textSecondary,
|
||||
fontFamily: 'JetBrains Mono',
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 2),
|
||||
Text(
|
||||
_HomeScreenState.formatDate(dt),
|
||||
style: const TextStyle(
|
||||
fontSize: 11,
|
||||
color: AppColors.textMuted,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(width: 8),
|
||||
Icon(
|
||||
Icons.chevron_right,
|
||||
size: 18,
|
||||
color: isActive
|
||||
? AppColors.assistant
|
||||
: _hovered
|
||||
? AppColors.textSecondary
|
||||
: Colors.transparent,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,274 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:provider/provider.dart';
|
||||
import '../../models/log_entry.dart';
|
||||
import '../../providers/session_provider.dart';
|
||||
import '../../theme/app_theme.dart';
|
||||
import 'widgets/assistant_message_card.dart';
|
||||
import 'widgets/system_message_card.dart';
|
||||
import 'widgets/user_message_card.dart';
|
||||
|
||||
class TimelineScreen extends StatelessWidget {
|
||||
const TimelineScreen({super.key});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final provider = context.watch<SessionProvider>();
|
||||
final session = provider.session;
|
||||
if (session == null) {
|
||||
return const Center(
|
||||
child: Text('No session loaded', style: TextStyle(color: AppColors.textMuted)),
|
||||
);
|
||||
}
|
||||
|
||||
final entries = provider.filteredEntries;
|
||||
|
||||
return Scaffold(
|
||||
backgroundColor: AppColors.background,
|
||||
body: Column(
|
||||
children: [
|
||||
_FilterBar(provider: provider),
|
||||
Expanded(
|
||||
child: entries.isEmpty
|
||||
? const Center(
|
||||
child: Text('No matching entries',
|
||||
style: TextStyle(color: AppColors.textMuted)),
|
||||
)
|
||||
: ListView.builder(
|
||||
padding: const EdgeInsets.fromLTRB(24, 8, 24, 24),
|
||||
itemCount: entries.length,
|
||||
itemBuilder: (context, index) {
|
||||
return _buildEntryCard(entries[index], index);
|
||||
},
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildEntryCard(LogEntry entry, int index) {
|
||||
if (entry is UserEntry && !entry.isToolResult) {
|
||||
return Padding(
|
||||
padding: const EdgeInsets.only(bottom: 8),
|
||||
child: UserMessageCard(entry: entry, index: index),
|
||||
);
|
||||
}
|
||||
if (entry is AssistantEntry) {
|
||||
return Padding(
|
||||
padding: const EdgeInsets.only(bottom: 8),
|
||||
child: AssistantMessageCard(entry: entry, index: index),
|
||||
);
|
||||
}
|
||||
if (entry is SystemEntry) {
|
||||
return Padding(
|
||||
padding: const EdgeInsets.only(bottom: 8),
|
||||
child: SystemMessageCard(entry: entry),
|
||||
);
|
||||
}
|
||||
return const SizedBox.shrink();
|
||||
}
|
||||
}
|
||||
|
||||
class _FilterBar extends StatelessWidget {
|
||||
final SessionProvider provider;
|
||||
|
||||
const _FilterBar({required this.provider});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final session = provider.session!;
|
||||
|
||||
return Container(
|
||||
padding: const EdgeInsets.fromLTRB(24, 16, 24, 12),
|
||||
decoration: const BoxDecoration(
|
||||
color: AppColors.surface,
|
||||
border: Border(
|
||||
bottom: BorderSide(color: AppColors.surfaceBorder, width: 1),
|
||||
),
|
||||
),
|
||||
child: Row(
|
||||
children: [
|
||||
// Session info
|
||||
Expanded(
|
||||
child: Row(
|
||||
children: [
|
||||
Text(
|
||||
session.sessionId?.substring(0, 8) ?? 'Session',
|
||||
style: const TextStyle(
|
||||
fontSize: 14,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: AppColors.textPrimary,
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 12),
|
||||
if (session.version != null)
|
||||
_InfoChip(label: 'v${session.version}'),
|
||||
const SizedBox(width: 8),
|
||||
_InfoChip(
|
||||
label: '${provider.filteredEntries.length} entries'),
|
||||
const SizedBox(width: 8),
|
||||
_InfoChip(
|
||||
label:
|
||||
'${_formatTokens(session.totalUsage.totalTokens)} tokens'),
|
||||
],
|
||||
),
|
||||
),
|
||||
// Agent filter
|
||||
if (session.agents.length > 1) ...[
|
||||
const SizedBox(width: 12),
|
||||
Container(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 8),
|
||||
decoration: BoxDecoration(
|
||||
color: AppColors.surfaceLight,
|
||||
borderRadius: BorderRadius.circular(6),
|
||||
border: Border.all(color: AppColors.surfaceBorder),
|
||||
),
|
||||
child: DropdownButtonHideUnderline(
|
||||
child: DropdownButton<String?>(
|
||||
value: provider.selectedAgentId,
|
||||
isDense: true,
|
||||
dropdownColor: AppColors.surfaceLight,
|
||||
style: const TextStyle(
|
||||
fontSize: 12, color: AppColors.textPrimary),
|
||||
hint: const Text('All Agents',
|
||||
style: TextStyle(
|
||||
fontSize: 12, color: AppColors.textSecondary)),
|
||||
items: [
|
||||
const DropdownMenuItem(
|
||||
value: null,
|
||||
child: Text('All Agents'),
|
||||
),
|
||||
...session.agents.map((a) => DropdownMenuItem(
|
||||
value: a.id,
|
||||
child: Text(a.name,
|
||||
overflow: TextOverflow.ellipsis),
|
||||
)),
|
||||
],
|
||||
onChanged: (v) => provider.selectAgent(v),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
const SizedBox(width: 12),
|
||||
// Type toggles
|
||||
_TypeToggle(
|
||||
label: 'User',
|
||||
color: AppColors.user,
|
||||
active: provider.visibleTypes.contains('user'),
|
||||
onTap: () => provider.toggleTypeFilter('user'),
|
||||
),
|
||||
const SizedBox(width: 4),
|
||||
_TypeToggle(
|
||||
label: 'Assistant',
|
||||
color: AppColors.assistant,
|
||||
active: provider.visibleTypes.contains('assistant'),
|
||||
onTap: () => provider.toggleTypeFilter('assistant'),
|
||||
),
|
||||
const SizedBox(width: 4),
|
||||
_TypeToggle(
|
||||
label: 'System',
|
||||
color: AppColors.system,
|
||||
active: provider.visibleTypes.contains('system'),
|
||||
onTap: () => provider.toggleTypeFilter('system'),
|
||||
),
|
||||
const SizedBox(width: 12),
|
||||
// Search
|
||||
SizedBox(
|
||||
width: 180,
|
||||
child: TextField(
|
||||
onChanged: provider.setSearchQuery,
|
||||
style: const TextStyle(fontSize: 12, color: AppColors.textPrimary),
|
||||
decoration: InputDecoration(
|
||||
hintText: 'Search...',
|
||||
hintStyle:
|
||||
const TextStyle(fontSize: 12, color: AppColors.textMuted),
|
||||
prefixIcon: const Icon(Icons.search,
|
||||
size: 16, color: AppColors.textMuted),
|
||||
isDense: true,
|
||||
contentPadding: const EdgeInsets.symmetric(vertical: 8),
|
||||
filled: true,
|
||||
fillColor: AppColors.surfaceLight,
|
||||
border: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(6),
|
||||
borderSide:
|
||||
const BorderSide(color: AppColors.surfaceBorder),
|
||||
),
|
||||
enabledBorder: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(6),
|
||||
borderSide:
|
||||
const BorderSide(color: AppColors.surfaceBorder),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
String _formatTokens(int tokens) {
|
||||
if (tokens >= 1000000) return '${(tokens / 1000000).toStringAsFixed(1)}M';
|
||||
if (tokens >= 1000) return '${(tokens / 1000).toStringAsFixed(1)}K';
|
||||
return '$tokens';
|
||||
}
|
||||
}
|
||||
|
||||
class _InfoChip extends StatelessWidget {
|
||||
final String label;
|
||||
const _InfoChip({required this.label});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 3),
|
||||
decoration: BoxDecoration(
|
||||
color: AppColors.surfaceLight,
|
||||
borderRadius: BorderRadius.circular(4),
|
||||
),
|
||||
child: Text(
|
||||
label,
|
||||
style: const TextStyle(fontSize: 11, color: AppColors.textMuted),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _TypeToggle extends StatelessWidget {
|
||||
final String label;
|
||||
final Color color;
|
||||
final bool active;
|
||||
final VoidCallback onTap;
|
||||
|
||||
const _TypeToggle({
|
||||
required this.label,
|
||||
required this.color,
|
||||
required this.active,
|
||||
required this.onTap,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return InkWell(
|
||||
onTap: onTap,
|
||||
borderRadius: BorderRadius.circular(4),
|
||||
child: Container(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
|
||||
decoration: BoxDecoration(
|
||||
color: active ? color.withAlpha(25) : Colors.transparent,
|
||||
borderRadius: BorderRadius.circular(4),
|
||||
border: Border.all(
|
||||
color: active ? color.withAlpha(80) : AppColors.surfaceBorder,
|
||||
),
|
||||
),
|
||||
child: Text(
|
||||
label,
|
||||
style: TextStyle(
|
||||
fontSize: 11,
|
||||
color: active ? color : AppColors.textMuted,
|
||||
fontWeight: active ? FontWeight.w600 : FontWeight.w400,
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,706 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_markdown/flutter_markdown.dart';
|
||||
import 'package:provider/provider.dart';
|
||||
import '../../../models/agent_info.dart';
|
||||
import '../../../models/content_block.dart';
|
||||
import '../../../models/log_entry.dart';
|
||||
import '../../../providers/session_provider.dart';
|
||||
import '../../../theme/app_theme.dart';
|
||||
import '../../../widgets/common/expandable_card.dart';
|
||||
import '../../../widgets/common/json_tree_view.dart';
|
||||
|
||||
class AssistantMessageCard extends StatelessWidget {
|
||||
final AssistantEntry entry;
|
||||
final int index;
|
||||
|
||||
const AssistantMessageCard({
|
||||
super.key,
|
||||
required this.entry,
|
||||
required this.index,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
decoration: BoxDecoration(
|
||||
color: AppColors.assistantBg,
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
border: Border.all(color: AppColors.assistant.withAlpha(40)),
|
||||
),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
children: [
|
||||
// Header
|
||||
Padding(
|
||||
padding: const EdgeInsets.fromLTRB(14, 10, 14, 8),
|
||||
child: Row(
|
||||
children: [
|
||||
Container(
|
||||
width: 22,
|
||||
height: 22,
|
||||
decoration: BoxDecoration(
|
||||
color: AppColors.assistant.withAlpha(40),
|
||||
borderRadius: BorderRadius.circular(4),
|
||||
),
|
||||
child: const Icon(Icons.smart_toy,
|
||||
size: 14, color: AppColors.assistant),
|
||||
),
|
||||
const SizedBox(width: 8),
|
||||
Text(
|
||||
entry.model ?? 'Assistant',
|
||||
style: const TextStyle(
|
||||
fontSize: 12,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: AppColors.assistant,
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 8),
|
||||
Text(
|
||||
'#$index',
|
||||
style: const TextStyle(
|
||||
fontSize: 11, color: AppColors.textMuted),
|
||||
),
|
||||
const Spacer(),
|
||||
if (entry.usage != null) ...[
|
||||
_TokenBadge(
|
||||
label: 'in',
|
||||
value: entry.usage!.inputTokens,
|
||||
color: AppColors.user,
|
||||
),
|
||||
const SizedBox(width: 6),
|
||||
_TokenBadge(
|
||||
label: 'out',
|
||||
value: entry.usage!.outputTokens,
|
||||
color: AppColors.assistant,
|
||||
),
|
||||
if (entry.usage!.cacheReadInputTokens > 0) ...[
|
||||
const SizedBox(width: 6),
|
||||
_TokenBadge(
|
||||
label: 'cache',
|
||||
value: entry.usage!.cacheReadInputTokens,
|
||||
color: AppColors.tool,
|
||||
),
|
||||
],
|
||||
const SizedBox(width: 12),
|
||||
],
|
||||
if (entry.timestamp != null)
|
||||
Text(
|
||||
_formatTime(entry.timestamp!),
|
||||
style: const TextStyle(
|
||||
fontSize: 11, color: AppColors.textMuted),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
|
||||
// Thinking blocks
|
||||
if (entry.hasThinking)
|
||||
Padding(
|
||||
padding: const EdgeInsets.fromLTRB(14, 0, 14, 6),
|
||||
child: ExpandableCard(
|
||||
backgroundColor: AppColors.surfaceLight,
|
||||
borderColor: AppColors.surfaceBorder,
|
||||
header: Row(
|
||||
children: [
|
||||
const Icon(Icons.psychology,
|
||||
size: 14, color: AppColors.agent),
|
||||
const SizedBox(width: 6),
|
||||
const Text(
|
||||
'Thinking',
|
||||
style: TextStyle(
|
||||
fontSize: 12,
|
||||
fontWeight: FontWeight.w500,
|
||||
color: AppColors.agent,
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 8),
|
||||
Text(
|
||||
entry.thinkingBlocks.first.thinking.isEmpty
|
||||
? '(encrypted)'
|
||||
: '${entry.thinkingBlocks.first.thinking.length} chars',
|
||||
style: const TextStyle(
|
||||
fontSize: 11, color: AppColors.textMuted),
|
||||
),
|
||||
],
|
||||
),
|
||||
child: entry.thinkingBlocks.first.thinking.isEmpty
|
||||
? const Text(
|
||||
'Thinking content is encrypted and not available.',
|
||||
style: TextStyle(
|
||||
fontSize: 12,
|
||||
color: AppColors.textMuted,
|
||||
fontStyle: FontStyle.italic,
|
||||
),
|
||||
)
|
||||
: SelectableText(
|
||||
entry.thinkingBlocks.first.thinking,
|
||||
style: const TextStyle(
|
||||
fontFamily: 'JetBrains Mono',
|
||||
fontSize: 12,
|
||||
color: AppColors.textSecondary,
|
||||
height: 1.5,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
// Text blocks
|
||||
for (final block in entry.textBlocks)
|
||||
Padding(
|
||||
padding: const EdgeInsets.fromLTRB(14, 0, 14, 8),
|
||||
child: MarkdownBody(
|
||||
data: block.text,
|
||||
selectable: true,
|
||||
styleSheet: MarkdownStyleSheet(
|
||||
p: const TextStyle(
|
||||
fontSize: 13,
|
||||
color: AppColors.textPrimary,
|
||||
height: 1.5,
|
||||
),
|
||||
code: const TextStyle(
|
||||
fontFamily: 'JetBrains Mono',
|
||||
fontSize: 12,
|
||||
color: AppColors.tool,
|
||||
backgroundColor: AppColors.surfaceLight,
|
||||
),
|
||||
codeblockDecoration: BoxDecoration(
|
||||
color: AppColors.surfaceLight,
|
||||
borderRadius: BorderRadius.circular(6),
|
||||
border: Border.all(color: AppColors.surfaceBorder),
|
||||
),
|
||||
codeblockPadding: const EdgeInsets.all(12),
|
||||
h1: const TextStyle(
|
||||
fontSize: 18,
|
||||
fontWeight: FontWeight.bold,
|
||||
color: AppColors.textPrimary),
|
||||
h2: const TextStyle(
|
||||
fontSize: 16,
|
||||
fontWeight: FontWeight.bold,
|
||||
color: AppColors.textPrimary),
|
||||
h3: const TextStyle(
|
||||
fontSize: 14,
|
||||
fontWeight: FontWeight.bold,
|
||||
color: AppColors.textPrimary),
|
||||
listBullet: const TextStyle(
|
||||
fontSize: 13, color: AppColors.textSecondary),
|
||||
blockquoteDecoration: BoxDecoration(
|
||||
border: Border(
|
||||
left: BorderSide(
|
||||
color: AppColors.assistant.withAlpha(80), width: 3),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
// Tool use blocks
|
||||
if (entry.hasToolUse)
|
||||
Padding(
|
||||
padding: const EdgeInsets.fromLTRB(14, 0, 14, 8),
|
||||
child: Column(
|
||||
children: entry.toolUseBlocks
|
||||
.map((block) => Padding(
|
||||
padding: const EdgeInsets.only(bottom: 6),
|
||||
child: _ToolUseCard(block: block),
|
||||
))
|
||||
.toList(),
|
||||
),
|
||||
),
|
||||
|
||||
// Raw JSON expandable
|
||||
Padding(
|
||||
padding: const EdgeInsets.fromLTRB(14, 0, 14, 8),
|
||||
child: ExpandableCard(
|
||||
backgroundColor: AppColors.surface,
|
||||
borderColor: AppColors.surfaceBorder,
|
||||
header: const Row(
|
||||
children: [
|
||||
Icon(Icons.data_object, size: 14, color: AppColors.textMuted),
|
||||
SizedBox(width: 6),
|
||||
Text(
|
||||
'Raw JSON',
|
||||
style: TextStyle(fontSize: 11, color: AppColors.textMuted),
|
||||
),
|
||||
],
|
||||
),
|
||||
child: JsonTreeView(data: entry.raw),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
String _formatTime(DateTime dt) {
|
||||
return '${dt.hour.toString().padLeft(2, '0')}:'
|
||||
'${dt.minute.toString().padLeft(2, '0')}:'
|
||||
'${dt.second.toString().padLeft(2, '0')}';
|
||||
}
|
||||
}
|
||||
|
||||
// ─── Tool use card (handles both regular tools and Agent calls) ───
|
||||
|
||||
class _ToolUseCard extends StatelessWidget {
|
||||
final ToolUseBlock block;
|
||||
|
||||
const _ToolUseCard({required this.block});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final isAgent = block.isAgentCall;
|
||||
final color = isAgent ? AppColors.agent : AppColors.tool;
|
||||
final bgColor = isAgent ? AppColors.agentBg : AppColors.toolBg;
|
||||
final hasResult = block.linkedResult != null;
|
||||
final isError = block.linkedResult?.isError ?? false;
|
||||
|
||||
// Look up subagent info if this is an Agent call
|
||||
AgentInfo? subagent;
|
||||
if (isAgent) {
|
||||
final session = context.read<SessionProvider>().session;
|
||||
subagent = session?.findAgentForToolUse(block.id);
|
||||
}
|
||||
|
||||
return ExpandableCard(
|
||||
backgroundColor: bgColor,
|
||||
borderColor: color.withAlpha(40),
|
||||
header: Row(
|
||||
children: [
|
||||
Icon(
|
||||
isAgent ? Icons.smart_toy_outlined : Icons.build_outlined,
|
||||
size: 14,
|
||||
color: color,
|
||||
),
|
||||
const SizedBox(width: 6),
|
||||
Text(
|
||||
block.name,
|
||||
style: TextStyle(
|
||||
fontSize: 12,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: color,
|
||||
),
|
||||
),
|
||||
if (isAgent && block.subagentType != null) ...[
|
||||
const SizedBox(width: 6),
|
||||
Container(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 1),
|
||||
decoration: BoxDecoration(
|
||||
color: color.withAlpha(20),
|
||||
borderRadius: BorderRadius.circular(3),
|
||||
),
|
||||
child: Text(
|
||||
block.subagentType!,
|
||||
style: TextStyle(fontSize: 10, color: color),
|
||||
),
|
||||
),
|
||||
],
|
||||
if (isAgent && block.agentDescription != null) ...[
|
||||
const SizedBox(width: 8),
|
||||
Expanded(
|
||||
child: Text(
|
||||
block.agentDescription!,
|
||||
style: const TextStyle(
|
||||
fontSize: 11, color: AppColors.textSecondary),
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
] else
|
||||
const Spacer(),
|
||||
// Subagent stats
|
||||
if (subagent != null) ...[
|
||||
Container(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 1),
|
||||
decoration: BoxDecoration(
|
||||
color: AppColors.surfaceLight,
|
||||
borderRadius: BorderRadius.circular(3),
|
||||
),
|
||||
child: Text(
|
||||
'${subagent.messages.where((m) => m.type == 'assistant').length} turns',
|
||||
style: const TextStyle(fontSize: 10, color: AppColors.textMuted),
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 4),
|
||||
if (subagent.toolsUsed.isNotEmpty)
|
||||
Container(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 1),
|
||||
decoration: BoxDecoration(
|
||||
color: AppColors.surfaceLight,
|
||||
borderRadius: BorderRadius.circular(3),
|
||||
),
|
||||
child: Text(
|
||||
'${subagent.toolsUsed.length} tools',
|
||||
style: const TextStyle(fontSize: 10, color: AppColors.textMuted),
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 4),
|
||||
],
|
||||
if (hasResult)
|
||||
Icon(
|
||||
isError ? Icons.error_outline : Icons.check_circle_outline,
|
||||
size: 14,
|
||||
color: isError ? AppColors.error : AppColors.assistant,
|
||||
),
|
||||
],
|
||||
),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
children: [
|
||||
// Arguments
|
||||
const Text(
|
||||
'ARGUMENTS',
|
||||
style: TextStyle(
|
||||
fontSize: 10,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: AppColors.textMuted,
|
||||
letterSpacing: 1,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 4),
|
||||
Container(
|
||||
padding: const EdgeInsets.all(8),
|
||||
decoration: BoxDecoration(
|
||||
color: AppColors.surface,
|
||||
borderRadius: BorderRadius.circular(6),
|
||||
),
|
||||
child: JsonTreeView(
|
||||
data: block.input,
|
||||
initiallyExpanded: true,
|
||||
),
|
||||
),
|
||||
|
||||
// Subagent conversation (inline nested timeline)
|
||||
if (subagent != null) ...[
|
||||
const SizedBox(height: 12),
|
||||
_SubagentTimeline(agent: subagent),
|
||||
],
|
||||
|
||||
// Result
|
||||
if (hasResult) ...[
|
||||
const SizedBox(height: 12),
|
||||
Text(
|
||||
isError ? 'ERROR' : 'RESULT',
|
||||
style: TextStyle(
|
||||
fontSize: 10,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: isError ? AppColors.error : AppColors.textMuted,
|
||||
letterSpacing: 1,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 4),
|
||||
Container(
|
||||
padding: const EdgeInsets.all(8),
|
||||
constraints: const BoxConstraints(maxHeight: 400),
|
||||
decoration: BoxDecoration(
|
||||
color: isError ? AppColors.errorBg : AppColors.surface,
|
||||
borderRadius: BorderRadius.circular(6),
|
||||
border: isError
|
||||
? Border.all(color: AppColors.error.withAlpha(40))
|
||||
: null,
|
||||
),
|
||||
child: SingleChildScrollView(
|
||||
child: SelectableText(
|
||||
block.linkedResult!.textContent,
|
||||
style: TextStyle(
|
||||
fontFamily: 'JetBrains Mono',
|
||||
fontSize: 12,
|
||||
color: isError
|
||||
? AppColors.error
|
||||
: AppColors.textSecondary,
|
||||
height: 1.5,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
|
||||
// Raw tool_use JSON
|
||||
const SizedBox(height: 12),
|
||||
ExpandableCard(
|
||||
backgroundColor: AppColors.surface,
|
||||
borderColor: AppColors.surfaceBorder,
|
||||
header: const Row(
|
||||
children: [
|
||||
Icon(Icons.data_object, size: 12, color: AppColors.textMuted),
|
||||
SizedBox(width: 4),
|
||||
Text(
|
||||
'Raw Tool JSON',
|
||||
style: TextStyle(fontSize: 10, color: AppColors.textMuted),
|
||||
),
|
||||
],
|
||||
),
|
||||
child: JsonTreeView(data: block.raw),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// ─── Inline subagent conversation ────────────────────────────
|
||||
|
||||
class _SubagentTimeline extends StatelessWidget {
|
||||
final AgentInfo agent;
|
||||
|
||||
const _SubagentTimeline({required this.agent});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
// Filter to user and assistant messages only
|
||||
final messages = agent.messages
|
||||
.where((m) => m.type == 'user' || m.type == 'assistant')
|
||||
.toList();
|
||||
|
||||
if (messages.isEmpty) {
|
||||
return const Text(
|
||||
'No subagent conversation data available.',
|
||||
style: TextStyle(fontSize: 12, color: AppColors.textMuted, fontStyle: FontStyle.italic),
|
||||
);
|
||||
}
|
||||
|
||||
return ExpandableCard(
|
||||
backgroundColor: AppColors.agentBg,
|
||||
borderColor: AppColors.agent.withAlpha(30),
|
||||
header: Row(
|
||||
children: [
|
||||
const Icon(Icons.account_tree_outlined, size: 14, color: AppColors.agent),
|
||||
const SizedBox(width: 6),
|
||||
Text(
|
||||
'Subagent Conversation (${messages.length} messages)',
|
||||
style: const TextStyle(
|
||||
fontSize: 12,
|
||||
fontWeight: FontWeight.w500,
|
||||
color: AppColors.agent,
|
||||
),
|
||||
),
|
||||
if (agent.model != null) ...[
|
||||
const Spacer(),
|
||||
Container(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 1),
|
||||
decoration: BoxDecoration(
|
||||
color: AppColors.surfaceLight,
|
||||
borderRadius: BorderRadius.circular(3),
|
||||
),
|
||||
child: Text(
|
||||
agent.model!,
|
||||
style: const TextStyle(
|
||||
fontSize: 10,
|
||||
color: AppColors.textSecondary,
|
||||
fontFamily: 'JetBrains Mono',
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
],
|
||||
),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
children: [
|
||||
// Toolbelt summary
|
||||
if (agent.uniqueToolNames.isNotEmpty) ...[
|
||||
Wrap(
|
||||
spacing: 4,
|
||||
runSpacing: 4,
|
||||
children: agent.toolUsageCounts.entries.map((e) {
|
||||
return Container(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 2),
|
||||
decoration: BoxDecoration(
|
||||
color: AppColors.tool.withAlpha(15),
|
||||
borderRadius: BorderRadius.circular(3),
|
||||
border: Border.all(color: AppColors.tool.withAlpha(30)),
|
||||
),
|
||||
child: Text(
|
||||
'${e.key} (${e.value})',
|
||||
style: const TextStyle(
|
||||
fontSize: 10,
|
||||
color: AppColors.tool,
|
||||
fontFamily: 'JetBrains Mono',
|
||||
),
|
||||
),
|
||||
);
|
||||
}).toList(),
|
||||
),
|
||||
const SizedBox(height: 10),
|
||||
],
|
||||
// Messages
|
||||
for (int i = 0; i < messages.length; i++) ...[
|
||||
_SubagentMessageTile(entry: messages[i], index: i),
|
||||
if (i < messages.length - 1) const SizedBox(height: 4),
|
||||
],
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _SubagentMessageTile extends StatelessWidget {
|
||||
final LogEntry entry;
|
||||
final int index;
|
||||
|
||||
const _SubagentMessageTile({required this.entry, required this.index});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
if (entry is UserEntry) {
|
||||
return _buildUserTile(entry as UserEntry);
|
||||
}
|
||||
if (entry is AssistantEntry) {
|
||||
return _buildAssistantTile(entry as AssistantEntry);
|
||||
}
|
||||
return const SizedBox.shrink();
|
||||
}
|
||||
|
||||
Widget _buildUserTile(UserEntry user) {
|
||||
if (user.isToolResult) return const SizedBox.shrink();
|
||||
return Container(
|
||||
padding: const EdgeInsets.all(10),
|
||||
decoration: BoxDecoration(
|
||||
color: AppColors.userBg,
|
||||
borderRadius: BorderRadius.circular(6),
|
||||
border: Border.all(color: AppColors.user.withAlpha(25)),
|
||||
),
|
||||
child: Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
const Icon(Icons.person, size: 12, color: AppColors.user),
|
||||
const SizedBox(width: 6),
|
||||
Expanded(
|
||||
child: SelectableText(
|
||||
user.promptText,
|
||||
style: const TextStyle(fontSize: 12, color: AppColors.textPrimary, height: 1.4),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildAssistantTile(AssistantEntry assistant) {
|
||||
return Container(
|
||||
padding: const EdgeInsets.all(10),
|
||||
decoration: BoxDecoration(
|
||||
color: AppColors.surface,
|
||||
borderRadius: BorderRadius.circular(6),
|
||||
border: Border.all(color: AppColors.surfaceBorder),
|
||||
),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
children: [
|
||||
// Header row
|
||||
Row(
|
||||
children: [
|
||||
const Icon(Icons.smart_toy, size: 12, color: AppColors.assistant),
|
||||
const SizedBox(width: 6),
|
||||
Text(
|
||||
assistant.model ?? 'assistant',
|
||||
style: const TextStyle(fontSize: 10, color: AppColors.assistant, fontWeight: FontWeight.w600),
|
||||
),
|
||||
const Spacer(),
|
||||
if (assistant.usage != null)
|
||||
Text(
|
||||
'in:${_fmt(assistant.usage!.inputTokens)} out:${_fmt(assistant.usage!.outputTokens)}',
|
||||
style: const TextStyle(fontSize: 9, color: AppColors.textMuted, fontFamily: 'JetBrains Mono'),
|
||||
),
|
||||
],
|
||||
),
|
||||
// Text content
|
||||
for (final block in assistant.textBlocks) ...[
|
||||
const SizedBox(height: 6),
|
||||
SelectableText(
|
||||
block.text,
|
||||
style: const TextStyle(fontSize: 12, color: AppColors.textPrimary, height: 1.4),
|
||||
),
|
||||
],
|
||||
// Tool uses
|
||||
for (final tool in assistant.toolUseBlocks) ...[
|
||||
const SizedBox(height: 6),
|
||||
ExpandableCard(
|
||||
backgroundColor: AppColors.toolBg,
|
||||
borderColor: AppColors.tool.withAlpha(30),
|
||||
header: Row(
|
||||
children: [
|
||||
const Icon(Icons.build_outlined, size: 12, color: AppColors.tool),
|
||||
const SizedBox(width: 4),
|
||||
Text(
|
||||
tool.name,
|
||||
style: const TextStyle(fontSize: 11, fontWeight: FontWeight.w600, color: AppColors.tool),
|
||||
),
|
||||
const Spacer(),
|
||||
if (tool.linkedResult != null)
|
||||
Icon(
|
||||
tool.linkedResult!.isError ? Icons.error_outline : Icons.check_circle_outline,
|
||||
size: 12,
|
||||
color: tool.linkedResult!.isError ? AppColors.error : AppColors.assistant,
|
||||
),
|
||||
],
|
||||
),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
children: [
|
||||
JsonTreeView(data: tool.input, initiallyExpanded: true),
|
||||
if (tool.linkedResult != null) ...[
|
||||
const SizedBox(height: 8),
|
||||
Container(
|
||||
constraints: const BoxConstraints(maxHeight: 200),
|
||||
child: SingleChildScrollView(
|
||||
child: SelectableText(
|
||||
tool.linkedResult!.textContent,
|
||||
style: TextStyle(
|
||||
fontFamily: 'JetBrains Mono',
|
||||
fontSize: 11,
|
||||
color: tool.linkedResult!.isError ? AppColors.error : AppColors.textSecondary,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
String _fmt(int v) {
|
||||
if (v >= 1000) return '${(v / 1000).toStringAsFixed(1)}K';
|
||||
return '$v';
|
||||
}
|
||||
}
|
||||
|
||||
// ─── Token badge ─────────────────────────────────────────────
|
||||
|
||||
class _TokenBadge extends StatelessWidget {
|
||||
final String label;
|
||||
final int value;
|
||||
final Color color;
|
||||
|
||||
const _TokenBadge({
|
||||
required this.label,
|
||||
required this.value,
|
||||
required this.color,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 2),
|
||||
decoration: BoxDecoration(
|
||||
color: color.withAlpha(15),
|
||||
borderRadius: BorderRadius.circular(3),
|
||||
),
|
||||
child: Text(
|
||||
'$label: ${_format(value)}',
|
||||
style: TextStyle(
|
||||
fontSize: 10,
|
||||
color: color.withAlpha(200),
|
||||
fontFamily: 'JetBrains Mono',
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
String _format(int v) {
|
||||
if (v >= 1000) return '${(v / 1000).toStringAsFixed(1)}K';
|
||||
return '$v';
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,64 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import '../../../models/log_entry.dart';
|
||||
import '../../../theme/app_theme.dart';
|
||||
import '../../../widgets/common/expandable_card.dart';
|
||||
import '../../../widgets/common/json_tree_view.dart';
|
||||
|
||||
class SystemMessageCard extends StatelessWidget {
|
||||
final SystemEntry entry;
|
||||
|
||||
const SystemMessageCard({super.key, required this.entry});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
decoration: BoxDecoration(
|
||||
color: AppColors.systemBg,
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
border: Border.all(color: AppColors.system.withAlpha(30)),
|
||||
),
|
||||
padding: const EdgeInsets.all(12),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
children: [
|
||||
Row(
|
||||
children: [
|
||||
const Icon(Icons.info_outline,
|
||||
size: 14, color: AppColors.system),
|
||||
const SizedBox(width: 6),
|
||||
Text(
|
||||
entry.subtype ?? 'System',
|
||||
style: const TextStyle(
|
||||
fontSize: 12,
|
||||
fontWeight: FontWeight.w500,
|
||||
color: AppColors.system,
|
||||
),
|
||||
),
|
||||
if (entry.durationMs != null) ...[
|
||||
const Spacer(),
|
||||
Text(
|
||||
'${(entry.durationMs! / 1000).toStringAsFixed(1)}s',
|
||||
style: const TextStyle(
|
||||
fontSize: 11,
|
||||
color: AppColors.textMuted,
|
||||
fontFamily: 'JetBrains Mono',
|
||||
),
|
||||
),
|
||||
],
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 6),
|
||||
ExpandableCard(
|
||||
backgroundColor: AppColors.surface,
|
||||
borderColor: AppColors.surfaceBorder,
|
||||
header: const Text(
|
||||
'Raw',
|
||||
style: TextStyle(fontSize: 11, color: AppColors.textMuted),
|
||||
),
|
||||
child: JsonTreeView(data: entry.raw),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,81 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import '../../../models/log_entry.dart';
|
||||
import '../../../theme/app_theme.dart';
|
||||
|
||||
class UserMessageCard extends StatelessWidget {
|
||||
final UserEntry entry;
|
||||
final int index;
|
||||
|
||||
const UserMessageCard({super.key, required this.entry, required this.index});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
decoration: BoxDecoration(
|
||||
color: AppColors.userBg,
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
border: Border.all(color: AppColors.user.withAlpha(40)),
|
||||
),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
children: [
|
||||
// Header
|
||||
Padding(
|
||||
padding: const EdgeInsets.fromLTRB(14, 10, 14, 8),
|
||||
child: Row(
|
||||
children: [
|
||||
Container(
|
||||
width: 22,
|
||||
height: 22,
|
||||
decoration: BoxDecoration(
|
||||
color: AppColors.user.withAlpha(40),
|
||||
borderRadius: BorderRadius.circular(4),
|
||||
),
|
||||
child: const Icon(Icons.person, size: 14, color: AppColors.user),
|
||||
),
|
||||
const SizedBox(width: 8),
|
||||
const Text(
|
||||
'User',
|
||||
style: TextStyle(
|
||||
fontSize: 12,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: AppColors.user,
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 8),
|
||||
Text(
|
||||
'#$index',
|
||||
style: const TextStyle(fontSize: 11, color: AppColors.textMuted),
|
||||
),
|
||||
const Spacer(),
|
||||
if (entry.timestamp != null)
|
||||
Text(
|
||||
_formatTime(entry.timestamp!),
|
||||
style: const TextStyle(fontSize: 11, color: AppColors.textMuted),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
// Content
|
||||
Padding(
|
||||
padding: const EdgeInsets.fromLTRB(14, 0, 14, 12),
|
||||
child: SelectableText(
|
||||
entry.promptText,
|
||||
style: const TextStyle(
|
||||
fontSize: 13,
|
||||
color: AppColors.textPrimary,
|
||||
height: 1.5,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
String _formatTime(DateTime dt) {
|
||||
return '${dt.hour.toString().padLeft(2, '0')}:'
|
||||
'${dt.minute.toString().padLeft(2, '0')}:'
|
||||
'${dt.second.toString().padLeft(2, '0')}';
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,374 @@
|
||||
import 'package:fl_chart/fl_chart.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:provider/provider.dart';
|
||||
import '../../models/log_entry.dart';
|
||||
import '../../providers/session_provider.dart';
|
||||
import '../../theme/app_theme.dart';
|
||||
|
||||
class TokensScreen extends StatelessWidget {
|
||||
const TokensScreen({super.key});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final provider = context.watch<SessionProvider>();
|
||||
final session = provider.session;
|
||||
if (session == null) {
|
||||
return const Center(
|
||||
child: Text('No session loaded',
|
||||
style: TextStyle(color: AppColors.textMuted)),
|
||||
);
|
||||
}
|
||||
|
||||
final usage = session.totalUsage;
|
||||
final assistantEntries = session.allEntries
|
||||
.whereType<AssistantEntry>()
|
||||
.where((e) => e.usage != null)
|
||||
.toList();
|
||||
|
||||
return Scaffold(
|
||||
backgroundColor: AppColors.background,
|
||||
body: ListView(
|
||||
padding: const EdgeInsets.all(24),
|
||||
children: [
|
||||
const Text(
|
||||
'Token Usage',
|
||||
style: TextStyle(
|
||||
fontSize: 20,
|
||||
fontWeight: FontWeight.bold,
|
||||
color: AppColors.textPrimary,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 24),
|
||||
|
||||
// Summary cards
|
||||
Row(
|
||||
children: [
|
||||
Expanded(
|
||||
child: _TokenCard(
|
||||
label: 'Input Tokens',
|
||||
value: usage.inputTokens,
|
||||
color: AppColors.user,
|
||||
icon: Icons.arrow_downward,
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 12),
|
||||
Expanded(
|
||||
child: _TokenCard(
|
||||
label: 'Output Tokens',
|
||||
value: usage.outputTokens,
|
||||
color: AppColors.assistant,
|
||||
icon: Icons.arrow_upward,
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 12),
|
||||
Expanded(
|
||||
child: _TokenCard(
|
||||
label: 'Cache Created',
|
||||
value: usage.cacheCreationInputTokens,
|
||||
color: AppColors.tool,
|
||||
icon: Icons.cached,
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 12),
|
||||
Expanded(
|
||||
child: _TokenCard(
|
||||
label: 'Cache Read',
|
||||
value: usage.cacheReadInputTokens,
|
||||
color: AppColors.agent,
|
||||
icon: Icons.speed,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 12),
|
||||
Container(
|
||||
padding: const EdgeInsets.all(16),
|
||||
decoration: BoxDecoration(
|
||||
color: AppColors.surface,
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
border: Border.all(color: AppColors.surfaceBorder),
|
||||
),
|
||||
child: Row(
|
||||
children: [
|
||||
const Text(
|
||||
'Total Tokens: ',
|
||||
style: TextStyle(
|
||||
fontSize: 14, color: AppColors.textSecondary),
|
||||
),
|
||||
Text(
|
||||
_formatTokens(usage.totalTokens),
|
||||
style: const TextStyle(
|
||||
fontSize: 18,
|
||||
fontWeight: FontWeight.bold,
|
||||
color: AppColors.textPrimary,
|
||||
),
|
||||
),
|
||||
const Spacer(),
|
||||
if (session.duration != null) ...[
|
||||
const Text(
|
||||
'Session Duration: ',
|
||||
style: TextStyle(
|
||||
fontSize: 14, color: AppColors.textSecondary),
|
||||
),
|
||||
Text(
|
||||
_formatDuration(session.duration!),
|
||||
style: const TextStyle(
|
||||
fontSize: 18,
|
||||
fontWeight: FontWeight.bold,
|
||||
color: AppColors.textPrimary,
|
||||
),
|
||||
),
|
||||
],
|
||||
],
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 24),
|
||||
|
||||
// Per-agent breakdown
|
||||
if (session.agents.length > 1) ...[
|
||||
const Text(
|
||||
'TOKENS BY AGENT',
|
||||
style: TextStyle(
|
||||
fontSize: 11,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: AppColors.textMuted,
|
||||
letterSpacing: 1.2,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 12),
|
||||
Container(
|
||||
height: 200,
|
||||
padding: const EdgeInsets.all(16),
|
||||
decoration: BoxDecoration(
|
||||
color: AppColors.surface,
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
border: Border.all(color: AppColors.surfaceBorder),
|
||||
),
|
||||
child: Row(
|
||||
children: [
|
||||
Expanded(
|
||||
child: PieChart(
|
||||
PieChartData(
|
||||
sectionsSpace: 2,
|
||||
centerSpaceRadius: 40,
|
||||
sections: session.agents
|
||||
.where(
|
||||
(a) => a.aggregatedUsage.totalTokens > 0)
|
||||
.toList()
|
||||
.asMap()
|
||||
.entries
|
||||
.map((e) {
|
||||
final agent = e.value;
|
||||
final color = AppColors.chartPalette[
|
||||
e.key % AppColors.chartPalette.length];
|
||||
return PieChartSectionData(
|
||||
color: color,
|
||||
value:
|
||||
agent.aggregatedUsage.totalTokens.toDouble(),
|
||||
title: '',
|
||||
radius: 30,
|
||||
);
|
||||
}).toList(),
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 24),
|
||||
Expanded(
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: session.agents
|
||||
.where(
|
||||
(a) => a.aggregatedUsage.totalTokens > 0)
|
||||
.toList()
|
||||
.asMap()
|
||||
.entries
|
||||
.map((e) {
|
||||
final agent = e.value;
|
||||
final color = AppColors.chartPalette[
|
||||
e.key % AppColors.chartPalette.length];
|
||||
return Padding(
|
||||
padding: const EdgeInsets.only(bottom: 6),
|
||||
child: Row(
|
||||
children: [
|
||||
Container(
|
||||
width: 10,
|
||||
height: 10,
|
||||
decoration: BoxDecoration(
|
||||
color: color,
|
||||
borderRadius: BorderRadius.circular(2),
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 8),
|
||||
Expanded(
|
||||
child: Text(
|
||||
agent.name,
|
||||
style: const TextStyle(
|
||||
fontSize: 12,
|
||||
color: AppColors.textSecondary,
|
||||
),
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
Text(
|
||||
_formatTokens(
|
||||
agent.aggregatedUsage.totalTokens),
|
||||
style: const TextStyle(
|
||||
fontSize: 12,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: AppColors.textPrimary,
|
||||
fontFamily: 'JetBrains Mono',
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}).toList(),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 24),
|
||||
],
|
||||
|
||||
// Per-message table
|
||||
const Text(
|
||||
'PER-MESSAGE BREAKDOWN',
|
||||
style: TextStyle(
|
||||
fontSize: 11,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: AppColors.textMuted,
|
||||
letterSpacing: 1.2,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 12),
|
||||
Container(
|
||||
decoration: BoxDecoration(
|
||||
color: AppColors.surface,
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
border: Border.all(color: AppColors.surfaceBorder),
|
||||
),
|
||||
child: DataTable(
|
||||
headingRowColor: WidgetStateProperty.all(AppColors.surfaceLight),
|
||||
dataRowColor: WidgetStateProperty.all(Colors.transparent),
|
||||
columnSpacing: 24,
|
||||
headingTextStyle: const TextStyle(
|
||||
fontSize: 11,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: AppColors.textMuted,
|
||||
),
|
||||
dataTextStyle: const TextStyle(
|
||||
fontSize: 12,
|
||||
color: AppColors.textPrimary,
|
||||
fontFamily: 'JetBrains Mono',
|
||||
),
|
||||
columns: const [
|
||||
DataColumn(label: Text('#')),
|
||||
DataColumn(label: Text('Time')),
|
||||
DataColumn(label: Text('Model')),
|
||||
DataColumn(label: Text('Input'), numeric: true),
|
||||
DataColumn(label: Text('Output'), numeric: true),
|
||||
DataColumn(label: Text('Cache Create'), numeric: true),
|
||||
DataColumn(label: Text('Cache Read'), numeric: true),
|
||||
DataColumn(label: Text('Total'), numeric: true),
|
||||
],
|
||||
rows: assistantEntries.asMap().entries.map((e) {
|
||||
final entry = e.value;
|
||||
final u = entry.usage!;
|
||||
return DataRow(cells: [
|
||||
DataCell(Text('${e.key + 1}')),
|
||||
DataCell(Text(entry.timestamp != null
|
||||
? '${entry.timestamp!.hour.toString().padLeft(2, '0')}:${entry.timestamp!.minute.toString().padLeft(2, '0')}:${entry.timestamp!.second.toString().padLeft(2, '0')}'
|
||||
: '-')),
|
||||
DataCell(Text(entry.model ?? '-',
|
||||
style: const TextStyle(fontSize: 10))),
|
||||
DataCell(Text(_formatTokens(u.inputTokens))),
|
||||
DataCell(Text(_formatTokens(u.outputTokens))),
|
||||
DataCell(
|
||||
Text(_formatTokens(u.cacheCreationInputTokens))),
|
||||
DataCell(Text(_formatTokens(u.cacheReadInputTokens))),
|
||||
DataCell(Text(
|
||||
_formatTokens(u.totalTokens),
|
||||
style: const TextStyle(fontWeight: FontWeight.w600),
|
||||
)),
|
||||
]);
|
||||
}).toList(),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
String _formatTokens(int tokens) {
|
||||
if (tokens >= 1000000) return '${(tokens / 1000000).toStringAsFixed(1)}M';
|
||||
if (tokens >= 1000) return '${(tokens / 1000).toStringAsFixed(1)}K';
|
||||
return '$tokens';
|
||||
}
|
||||
|
||||
String _formatDuration(Duration d) {
|
||||
final minutes = d.inMinutes;
|
||||
final seconds = d.inSeconds % 60;
|
||||
if (minutes > 0) return '${minutes}m ${seconds}s';
|
||||
return '${seconds}s';
|
||||
}
|
||||
}
|
||||
|
||||
class _TokenCard extends StatelessWidget {
|
||||
final String label;
|
||||
final int value;
|
||||
final Color color;
|
||||
final IconData icon;
|
||||
|
||||
const _TokenCard({
|
||||
required this.label,
|
||||
required this.value,
|
||||
required this.color,
|
||||
required this.icon,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
padding: const EdgeInsets.all(16),
|
||||
decoration: BoxDecoration(
|
||||
color: AppColors.surface,
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
border: Border.all(color: AppColors.surfaceBorder),
|
||||
),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Row(
|
||||
children: [
|
||||
Icon(icon, size: 16, color: color),
|
||||
const SizedBox(width: 6),
|
||||
Text(
|
||||
label,
|
||||
style:
|
||||
const TextStyle(fontSize: 12, color: AppColors.textMuted),
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
Text(
|
||||
_format(value),
|
||||
style: TextStyle(
|
||||
fontSize: 22,
|
||||
fontWeight: FontWeight.bold,
|
||||
color: color,
|
||||
fontFamily: 'JetBrains Mono',
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
String _format(int v) {
|
||||
if (v >= 1000000) return '${(v / 1000000).toStringAsFixed(1)}M';
|
||||
if (v >= 1000) return '${(v / 1000).toStringAsFixed(1)}K';
|
||||
return '$v';
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,286 @@
|
||||
import 'package:fl_chart/fl_chart.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:provider/provider.dart';
|
||||
import '../../models/content_block.dart';
|
||||
import '../../providers/session_provider.dart';
|
||||
import '../../theme/app_theme.dart';
|
||||
import '../../widgets/common/expandable_card.dart';
|
||||
import '../../widgets/common/json_tree_view.dart';
|
||||
|
||||
class ToolbeltScreen extends StatelessWidget {
|
||||
const ToolbeltScreen({super.key});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final provider = context.watch<SessionProvider>();
|
||||
final session = provider.session;
|
||||
if (session == null) {
|
||||
return const Center(
|
||||
child: Text('No session loaded',
|
||||
style: TextStyle(color: AppColors.textMuted)),
|
||||
);
|
||||
}
|
||||
|
||||
final toolsByName = session.toolsByName;
|
||||
final sortedTools = toolsByName.entries.toList()
|
||||
..sort((a, b) => b.value.length.compareTo(a.value.length));
|
||||
|
||||
return Scaffold(
|
||||
backgroundColor: AppColors.background,
|
||||
body: ListView(
|
||||
padding: const EdgeInsets.all(24),
|
||||
children: [
|
||||
const Text(
|
||||
'Toolbelt',
|
||||
style: TextStyle(
|
||||
fontSize: 20,
|
||||
fontWeight: FontWeight.bold,
|
||||
color: AppColors.textPrimary,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
Text(
|
||||
'${toolsByName.length} unique tools, ${toolsByName.values.fold<int>(0, (sum, list) => sum + list.length)} total invocations',
|
||||
style:
|
||||
const TextStyle(fontSize: 13, color: AppColors.textSecondary),
|
||||
),
|
||||
const SizedBox(height: 24),
|
||||
|
||||
// Horizontal bar chart
|
||||
if (sortedTools.isNotEmpty) ...[
|
||||
Container(
|
||||
height: (sortedTools.length.clamp(1, 15) * 40.0) + 32,
|
||||
padding: const EdgeInsets.all(16),
|
||||
decoration: BoxDecoration(
|
||||
color: AppColors.surface,
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
border: Border.all(color: AppColors.surfaceBorder),
|
||||
),
|
||||
child: BarChart(
|
||||
BarChartData(
|
||||
alignment: BarChartAlignment.spaceAround,
|
||||
maxY: sortedTools.first.value.length.toDouble() * 1.15,
|
||||
barGroups: sortedTools
|
||||
.take(15)
|
||||
.toList()
|
||||
.asMap()
|
||||
.entries
|
||||
.map((e) {
|
||||
return BarChartGroupData(
|
||||
x: e.key,
|
||||
barRods: [
|
||||
BarChartRodData(
|
||||
toY: e.value.value.length.toDouble(),
|
||||
color: AppColors.chartPalette[
|
||||
e.key % AppColors.chartPalette.length],
|
||||
width: 22,
|
||||
borderRadius: const BorderRadius.only(
|
||||
topLeft: Radius.circular(4),
|
||||
topRight: Radius.circular(4),
|
||||
),
|
||||
),
|
||||
],
|
||||
showingTooltipIndicators: [0],
|
||||
);
|
||||
}).toList(),
|
||||
titlesData: FlTitlesData(
|
||||
leftTitles: const AxisTitles(
|
||||
sideTitles: SideTitles(showTitles: false),
|
||||
),
|
||||
rightTitles: const AxisTitles(
|
||||
sideTitles: SideTitles(showTitles: false),
|
||||
),
|
||||
topTitles: const AxisTitles(
|
||||
sideTitles: SideTitles(showTitles: false),
|
||||
),
|
||||
bottomTitles: AxisTitles(
|
||||
sideTitles: SideTitles(
|
||||
showTitles: true,
|
||||
getTitlesWidget: (value, meta) {
|
||||
final idx = value.toInt();
|
||||
if (idx >= sortedTools.length || idx >= 15) {
|
||||
return const SizedBox.shrink();
|
||||
}
|
||||
return Padding(
|
||||
padding: const EdgeInsets.only(top: 6),
|
||||
child: Text(
|
||||
sortedTools[idx].key,
|
||||
style: const TextStyle(
|
||||
fontSize: 11,
|
||||
color: AppColors.textSecondary,
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
reservedSize: 24,
|
||||
),
|
||||
),
|
||||
),
|
||||
gridData: FlGridData(
|
||||
show: true,
|
||||
drawVerticalLine: false,
|
||||
getDrawingHorizontalLine: (value) => FlLine(
|
||||
color: AppColors.surfaceBorder,
|
||||
strokeWidth: 1,
|
||||
),
|
||||
),
|
||||
borderData: FlBorderData(show: false),
|
||||
barTouchData: BarTouchData(
|
||||
enabled: true,
|
||||
touchTooltipData: BarTouchTooltipData(
|
||||
tooltipPadding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
|
||||
tooltipMargin: 4,
|
||||
getTooltipColor: (_) => AppColors.surfaceLight,
|
||||
getTooltipItem: (group, groupIndex, rod, rodIndex) {
|
||||
return BarTooltipItem(
|
||||
'${rod.toY.toInt()} calls',
|
||||
const TextStyle(
|
||||
fontSize: 11,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: AppColors.textPrimary,
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 24),
|
||||
],
|
||||
|
||||
// Tool details
|
||||
for (final entry in sortedTools) ...[
|
||||
_ToolDetailCard(
|
||||
toolName: entry.key,
|
||||
invocations: entry.value,
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
],
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _ToolDetailCard extends StatelessWidget {
|
||||
final String toolName;
|
||||
final List<ToolUseBlock> invocations;
|
||||
|
||||
const _ToolDetailCard({
|
||||
required this.toolName,
|
||||
required this.invocations,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return ExpandableCard(
|
||||
backgroundColor: AppColors.toolBg,
|
||||
borderColor: AppColors.tool.withAlpha(40),
|
||||
header: Row(
|
||||
children: [
|
||||
const Icon(Icons.build_outlined, size: 14, color: AppColors.tool),
|
||||
const SizedBox(width: 8),
|
||||
Text(
|
||||
toolName,
|
||||
style: const TextStyle(
|
||||
fontSize: 13,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: AppColors.tool,
|
||||
),
|
||||
),
|
||||
const Spacer(),
|
||||
Container(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 2),
|
||||
decoration: BoxDecoration(
|
||||
color: AppColors.tool.withAlpha(20),
|
||||
borderRadius: BorderRadius.circular(3),
|
||||
),
|
||||
child: Text(
|
||||
'${invocations.length} calls',
|
||||
style: const TextStyle(fontSize: 10, color: AppColors.tool),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
children: invocations.asMap().entries.map((e) {
|
||||
final block = e.value;
|
||||
final hasResult = block.linkedResult != null;
|
||||
final isError = block.linkedResult?.isError ?? false;
|
||||
|
||||
return Padding(
|
||||
padding: const EdgeInsets.only(bottom: 8),
|
||||
child: ExpandableCard(
|
||||
backgroundColor: AppColors.surface,
|
||||
borderColor: AppColors.surfaceBorder,
|
||||
header: Row(
|
||||
children: [
|
||||
Text(
|
||||
'Call #${e.key + 1}',
|
||||
style: const TextStyle(
|
||||
fontSize: 11, color: AppColors.textSecondary),
|
||||
),
|
||||
const Spacer(),
|
||||
if (hasResult)
|
||||
Icon(
|
||||
isError
|
||||
? Icons.error_outline
|
||||
: Icons.check_circle_outline,
|
||||
size: 14,
|
||||
color: isError ? AppColors.error : AppColors.assistant,
|
||||
),
|
||||
],
|
||||
),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
children: [
|
||||
const Text(
|
||||
'ARGUMENTS',
|
||||
style: TextStyle(
|
||||
fontSize: 10,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: AppColors.textMuted,
|
||||
letterSpacing: 1,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 4),
|
||||
JsonTreeView(data: block.input, initiallyExpanded: true),
|
||||
if (hasResult) ...[
|
||||
const SizedBox(height: 8),
|
||||
Text(
|
||||
isError ? 'ERROR' : 'RESULT',
|
||||
style: TextStyle(
|
||||
fontSize: 10,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: isError ? AppColors.error : AppColors.textMuted,
|
||||
letterSpacing: 1,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 4),
|
||||
Container(
|
||||
constraints: const BoxConstraints(maxHeight: 200),
|
||||
child: SingleChildScrollView(
|
||||
child: SelectableText(
|
||||
block.linkedResult!.textContent,
|
||||
style: TextStyle(
|
||||
fontFamily: 'JetBrains Mono',
|
||||
fontSize: 11,
|
||||
color: isError
|
||||
? AppColors.error
|
||||
: AppColors.textSecondary,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}).toList(),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,278 @@
|
||||
import 'dart:convert';
|
||||
import 'dart:io';
|
||||
|
||||
import '../models/agent_info.dart';
|
||||
import '../models/content_block.dart';
|
||||
import '../models/log_entry.dart';
|
||||
import '../models/token_usage.dart';
|
||||
|
||||
class JsonlParser {
|
||||
Future<SessionLog> parseFile(String filePath) async {
|
||||
final file = File(filePath);
|
||||
final lines = await file.readAsLines(encoding: utf8);
|
||||
|
||||
final entries = <LogEntry>[];
|
||||
for (final line in lines) {
|
||||
if (line.trim().isEmpty) continue;
|
||||
try {
|
||||
final json = jsonDecode(line) as Map<String, dynamic>;
|
||||
entries.add(LogEntry.fromJson(json));
|
||||
} catch (_) {}
|
||||
}
|
||||
|
||||
// Resolve the subagents directory from the session file path
|
||||
// e.g. /path/to/project/64a8386a.jsonl → /path/to/project/64a8386a/subagents/
|
||||
final sessionFileName = file.uri.pathSegments.last.replaceAll('.jsonl', '');
|
||||
final parentDir = file.parent.path;
|
||||
final subagentsDir = Directory('$parentDir/$sessionFileName/subagents');
|
||||
|
||||
// Load all subagent .jsonl files
|
||||
final subagentFiles = <String, List<LogEntry>>{};
|
||||
final subagentMeta = <String, Map<String, dynamic>>{};
|
||||
if (await subagentsDir.exists()) {
|
||||
await for (final entity in subagentsDir.list()) {
|
||||
if (entity is File && entity.path.endsWith('.jsonl')) {
|
||||
final agentFileName = entity.uri.pathSegments.last;
|
||||
// agent-a014e30b71de602bb.jsonl → a014e30b71de602bb
|
||||
final agentId = agentFileName
|
||||
.replaceAll('.jsonl', '')
|
||||
.replaceFirst('agent-', '');
|
||||
|
||||
final agentEntries = <LogEntry>[];
|
||||
try {
|
||||
final agentLines = await entity.readAsLines(encoding: utf8);
|
||||
for (final line in agentLines) {
|
||||
if (line.trim().isEmpty) continue;
|
||||
try {
|
||||
final json = jsonDecode(line) as Map<String, dynamic>;
|
||||
agentEntries.add(LogEntry.fromJson(json));
|
||||
} catch (_) {}
|
||||
}
|
||||
} catch (_) {}
|
||||
if (agentEntries.isNotEmpty) {
|
||||
subagentFiles[agentId] = agentEntries;
|
||||
}
|
||||
} else if (entity is File && entity.path.endsWith('.meta.json')) {
|
||||
try {
|
||||
final metaContent = await entity.readAsString();
|
||||
final meta = jsonDecode(metaContent) as Map<String, dynamic>;
|
||||
final agentFileName = entity.uri.pathSegments.last;
|
||||
final agentId = agentFileName
|
||||
.replaceAll('.meta.json', '')
|
||||
.replaceFirst('agent-', '');
|
||||
subagentMeta[agentId] = meta;
|
||||
} catch (_) {}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return _buildSessionLog(entries, subagentFiles, subagentMeta);
|
||||
}
|
||||
|
||||
SessionLog _buildSessionLog(
|
||||
List<LogEntry> entries,
|
||||
Map<String, List<LogEntry>> subagentFiles,
|
||||
Map<String, Map<String, dynamic>> subagentMeta,
|
||||
) {
|
||||
// Extract metadata from first user/assistant entry
|
||||
String? sessionId, cwd, version, gitBranch;
|
||||
for (final entry in entries) {
|
||||
if (entry.sessionId != null) {
|
||||
sessionId = entry.sessionId;
|
||||
cwd = entry.cwd;
|
||||
version = entry.version;
|
||||
gitBranch = entry.gitBranch;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// Link tool results to tool use blocks in main session
|
||||
_linkToolResults(entries);
|
||||
|
||||
// Link tool results inside each subagent session
|
||||
for (final agentEntries in subagentFiles.values) {
|
||||
_linkToolResults(agentEntries);
|
||||
}
|
||||
|
||||
// Separate main conversation from progress entries
|
||||
final mainConversation = entries
|
||||
.where((e) => e.type != 'progress' && e.type != 'file-history-snapshot')
|
||||
.toList();
|
||||
|
||||
// Build agent info
|
||||
final agents = _buildAgents(
|
||||
mainConversation,
|
||||
subagentFiles,
|
||||
subagentMeta,
|
||||
);
|
||||
final mainAgent = agents.firstWhere((a) => a.id == 'main');
|
||||
|
||||
// Compute total usage
|
||||
var totalUsage = const TokenUsage();
|
||||
for (final agent in agents) {
|
||||
totalUsage = totalUsage + agent.aggregatedUsage;
|
||||
}
|
||||
|
||||
// Build tools by name index
|
||||
final toolsByName = <String, List<ToolUseBlock>>{};
|
||||
for (final agent in agents) {
|
||||
for (final tool in agent.toolsUsed) {
|
||||
toolsByName.putIfAbsent(tool.name, () => []).add(tool);
|
||||
}
|
||||
}
|
||||
|
||||
// Timestamps
|
||||
final timestamps = entries
|
||||
.where((e) => e.timestamp != null)
|
||||
.map((e) => e.timestamp!)
|
||||
.toList();
|
||||
timestamps.sort();
|
||||
|
||||
return SessionLog(
|
||||
sessionId: sessionId,
|
||||
cwd: cwd,
|
||||
version: version,
|
||||
gitBranch: gitBranch,
|
||||
allEntries: entries,
|
||||
mainConversation: mainConversation,
|
||||
agents: agents,
|
||||
mainAgent: mainAgent,
|
||||
totalUsage: totalUsage,
|
||||
toolsByName: toolsByName,
|
||||
startTime: timestamps.isNotEmpty ? timestamps.first : null,
|
||||
endTime: timestamps.isNotEmpty ? timestamps.last : null,
|
||||
);
|
||||
}
|
||||
|
||||
void _linkToolResults(List<LogEntry> entries) {
|
||||
final resultMap = <String, ToolResultData>{};
|
||||
for (final entry in entries) {
|
||||
if (entry is UserEntry && entry.isToolResult) {
|
||||
for (final result in entry.toolResults) {
|
||||
resultMap[result.toolUseId] = result;
|
||||
}
|
||||
}
|
||||
}
|
||||
for (final entry in entries) {
|
||||
if (entry is AssistantEntry) {
|
||||
for (final block in entry.toolUseBlocks) {
|
||||
block.linkedResult = resultMap[block.id];
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
List<AgentInfo> _buildAgents(
|
||||
List<LogEntry> mainEntries,
|
||||
Map<String, List<LogEntry>> subagentFiles,
|
||||
Map<String, Map<String, dynamic>> subagentMeta,
|
||||
) {
|
||||
final agents = <AgentInfo>[];
|
||||
|
||||
// Main agent tools and usage
|
||||
final mainToolUses = <ToolUseBlock>[];
|
||||
String? mainModel;
|
||||
var mainUsage = const TokenUsage();
|
||||
|
||||
for (final entry in mainEntries) {
|
||||
if (entry is AssistantEntry) {
|
||||
mainModel ??= entry.model;
|
||||
if (entry.usage != null) {
|
||||
mainUsage = mainUsage + entry.usage!;
|
||||
}
|
||||
for (final block in entry.toolUseBlocks) {
|
||||
if (!block.isAgentCall) {
|
||||
mainToolUses.add(block);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
agents.add(AgentInfo(
|
||||
id: 'main',
|
||||
name: 'Main Assistant',
|
||||
model: mainModel,
|
||||
messages: mainEntries,
|
||||
toolsUsed: mainToolUses,
|
||||
aggregatedUsage: mainUsage,
|
||||
));
|
||||
|
||||
// Find Agent tool calls from the main conversation to get descriptions
|
||||
final agentToolCalls = <String, ToolUseBlock>{};
|
||||
for (final entry in mainEntries) {
|
||||
if (entry is AssistantEntry) {
|
||||
for (final block in entry.toolUseBlocks) {
|
||||
if (block.isAgentCall) {
|
||||
agentToolCalls[block.id] = block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Build subagent infos from the actual subagent .jsonl files
|
||||
for (final entry in subagentFiles.entries) {
|
||||
final agentId = entry.key;
|
||||
final agentEntries = entry.value;
|
||||
final meta = subagentMeta[agentId] ?? {};
|
||||
|
||||
// Extract tool uses, model, and usage from subagent entries
|
||||
final subToolUses = <ToolUseBlock>[];
|
||||
var subUsage = const TokenUsage();
|
||||
String? subModel;
|
||||
|
||||
for (final e in agentEntries) {
|
||||
if (e is AssistantEntry) {
|
||||
subModel ??= e.model;
|
||||
if (e.usage != null) {
|
||||
subUsage = subUsage + e.usage!;
|
||||
}
|
||||
for (final block in e.toolUseBlocks) {
|
||||
if (!block.isAgentCall) {
|
||||
subToolUses.add(block);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Try to match this subagent to an Agent tool call for description/prompt.
|
||||
// The agentId in the file might be a prefix of the tool_use id.
|
||||
ToolUseBlock? matchedCall;
|
||||
for (final call in agentToolCalls.entries) {
|
||||
if (call.key.contains(agentId) || agentId.contains(call.key)) {
|
||||
matchedCall = call.value;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// Also check the slug from the first entry to match
|
||||
String? slug;
|
||||
for (final e in agentEntries) {
|
||||
if (e.raw.containsKey('slug')) {
|
||||
slug = e.raw['slug'] as String?;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
final agentType = meta['agentType'] as String? ??
|
||||
matchedCall?.subagentType;
|
||||
final description = matchedCall?.agentDescription ??
|
||||
slug ??
|
||||
agentType ??
|
||||
'Subagent';
|
||||
|
||||
agents.add(AgentInfo(
|
||||
id: agentId,
|
||||
name: description,
|
||||
subagentType: agentType,
|
||||
description: matchedCall?.agentDescription,
|
||||
prompt: matchedCall?.agentPrompt,
|
||||
model: subModel,
|
||||
messages: agentEntries,
|
||||
toolsUsed: subToolUses,
|
||||
aggregatedUsage: subUsage,
|
||||
));
|
||||
}
|
||||
|
||||
return agents;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,96 @@
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
class AppColors {
|
||||
// Surfaces
|
||||
static const Color background = Color(0xFF0F1117);
|
||||
static const Color surface = Color(0xFF161923);
|
||||
static const Color surfaceLight = Color(0xFF1E2130);
|
||||
static const Color surfaceBorder = Color(0xFF2A2D3A);
|
||||
|
||||
// Text
|
||||
static const Color textPrimary = Color(0xFFF0F0F5);
|
||||
static const Color textSecondary = Color(0xFF9CA3AF);
|
||||
static const Color textMuted = Color(0xFF6B7280);
|
||||
|
||||
// Role colors
|
||||
static const Color user = Color(0xFF3B82F6);
|
||||
static const Color userBg = Color(0xFF1E293B);
|
||||
static const Color assistant = Color(0xFF10B981);
|
||||
static const Color assistantBg = Color(0xFF0F2922);
|
||||
static const Color system = Color(0xFF6B7280);
|
||||
static const Color systemBg = Color(0xFF1F2028);
|
||||
static const Color agent = Color(0xFFA855F7);
|
||||
static const Color agentBg = Color(0xFF1E1530);
|
||||
static const Color tool = Color(0xFFF59E0B);
|
||||
static const Color toolBg = Color(0xFF271F0F);
|
||||
static const Color error = Color(0xFFEF4444);
|
||||
static const Color errorBg = Color(0xFF2D1515);
|
||||
|
||||
// Chart colors
|
||||
static const List<Color> chartPalette = [
|
||||
Color(0xFF3B82F6),
|
||||
Color(0xFF10B981),
|
||||
Color(0xFFA855F7),
|
||||
Color(0xFFF59E0B),
|
||||
Color(0xFFEF4444),
|
||||
Color(0xFF06B6D4),
|
||||
Color(0xFFF97316),
|
||||
Color(0xFF8B5CF6),
|
||||
Color(0xFFEC4899),
|
||||
Color(0xFF14B8A6),
|
||||
];
|
||||
|
||||
static Color roleColor(String type) {
|
||||
switch (type) {
|
||||
case 'user':
|
||||
return user;
|
||||
case 'assistant':
|
||||
return assistant;
|
||||
case 'system':
|
||||
return system;
|
||||
case 'agent':
|
||||
return agent;
|
||||
case 'tool':
|
||||
return tool;
|
||||
default:
|
||||
return textMuted;
|
||||
}
|
||||
}
|
||||
|
||||
static Color roleBgColor(String type) {
|
||||
switch (type) {
|
||||
case 'user':
|
||||
return userBg;
|
||||
case 'assistant':
|
||||
return assistantBg;
|
||||
case 'system':
|
||||
return systemBg;
|
||||
case 'agent':
|
||||
return agentBg;
|
||||
case 'tool':
|
||||
return toolBg;
|
||||
default:
|
||||
return surface;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
class AppTheme {
|
||||
static ThemeData get dark {
|
||||
return ThemeData.dark().copyWith(
|
||||
scaffoldBackgroundColor: AppColors.background,
|
||||
cardColor: AppColors.surface,
|
||||
dividerColor: AppColors.surfaceBorder,
|
||||
colorScheme: const ColorScheme.dark(
|
||||
primary: AppColors.assistant,
|
||||
surface: AppColors.surface,
|
||||
error: AppColors.error,
|
||||
),
|
||||
textTheme: ThemeData.dark().textTheme.apply(
|
||||
fontFamily: 'Inter',
|
||||
bodyColor: AppColors.textPrimary,
|
||||
displayColor: AppColors.textPrimary,
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,113 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import '../../theme/app_theme.dart';
|
||||
|
||||
class ExpandableCard extends StatefulWidget {
|
||||
final Widget header;
|
||||
final Widget child;
|
||||
final bool initiallyExpanded;
|
||||
final Color? backgroundColor;
|
||||
final Color? borderColor;
|
||||
|
||||
const ExpandableCard({
|
||||
super.key,
|
||||
required this.header,
|
||||
required this.child,
|
||||
this.initiallyExpanded = false,
|
||||
this.backgroundColor,
|
||||
this.borderColor,
|
||||
});
|
||||
|
||||
@override
|
||||
State<ExpandableCard> createState() => _ExpandableCardState();
|
||||
}
|
||||
|
||||
class _ExpandableCardState extends State<ExpandableCard>
|
||||
with SingleTickerProviderStateMixin {
|
||||
late bool _expanded;
|
||||
late AnimationController _controller;
|
||||
late Animation<double> _rotation;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
_expanded = widget.initiallyExpanded;
|
||||
_controller = AnimationController(
|
||||
duration: const Duration(milliseconds: 200),
|
||||
vsync: this,
|
||||
value: _expanded ? 1.0 : 0.0,
|
||||
);
|
||||
_rotation = Tween<double>(begin: 0, end: 0.25).animate(
|
||||
CurvedAnimation(parent: _controller, curve: Curves.easeInOut),
|
||||
);
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_controller.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
void _toggle() {
|
||||
setState(() {
|
||||
_expanded = !_expanded;
|
||||
if (_expanded) {
|
||||
_controller.forward();
|
||||
} else {
|
||||
_controller.reverse();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
decoration: BoxDecoration(
|
||||
color: widget.backgroundColor ?? AppColors.surface,
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
border: Border.all(
|
||||
color: widget.borderColor ?? AppColors.surfaceBorder,
|
||||
width: 1,
|
||||
),
|
||||
),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
children: [
|
||||
InkWell(
|
||||
onTap: _toggle,
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
|
||||
child: Row(
|
||||
children: [
|
||||
RotationTransition(
|
||||
turns: _rotation,
|
||||
child: const Icon(
|
||||
Icons.chevron_right,
|
||||
size: 18,
|
||||
color: AppColors.textSecondary,
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 8),
|
||||
Expanded(child: widget.header),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
ClipRect(
|
||||
child: AnimatedCrossFade(
|
||||
firstChild: const SizedBox.shrink(),
|
||||
secondChild: Padding(
|
||||
padding: const EdgeInsets.fromLTRB(12, 0, 12, 12),
|
||||
child: widget.child,
|
||||
),
|
||||
crossFadeState: _expanded
|
||||
? CrossFadeState.showSecond
|
||||
: CrossFadeState.showFirst,
|
||||
duration: const Duration(milliseconds: 200),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,336 @@
|
||||
import 'dart:convert';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter/services.dart';
|
||||
import '../../theme/app_theme.dart';
|
||||
|
||||
class JsonTreeView extends StatelessWidget {
|
||||
final dynamic data;
|
||||
final int depth;
|
||||
final bool initiallyExpanded;
|
||||
|
||||
const JsonTreeView({
|
||||
super.key,
|
||||
required this.data,
|
||||
this.depth = 0,
|
||||
this.initiallyExpanded = false,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
if (data is Map<String, dynamic>) {
|
||||
return _MapNode(
|
||||
map: data as Map<String, dynamic>,
|
||||
depth: depth,
|
||||
initiallyExpanded: initiallyExpanded || depth == 0,
|
||||
);
|
||||
} else if (data is List) {
|
||||
return _ListNode(
|
||||
list: data as List,
|
||||
depth: depth,
|
||||
initiallyExpanded: initiallyExpanded || depth == 0,
|
||||
);
|
||||
} else {
|
||||
return _ValueNode(value: data, depth: depth);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
class _MapNode extends StatefulWidget {
|
||||
final Map<String, dynamic> map;
|
||||
final int depth;
|
||||
final bool initiallyExpanded;
|
||||
|
||||
const _MapNode({
|
||||
required this.map,
|
||||
required this.depth,
|
||||
this.initiallyExpanded = false,
|
||||
});
|
||||
|
||||
@override
|
||||
State<_MapNode> createState() => _MapNodeState();
|
||||
}
|
||||
|
||||
class _MapNodeState extends State<_MapNode> {
|
||||
late bool _expanded;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
_expanded = widget.initiallyExpanded;
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
if (widget.map.isEmpty) {
|
||||
return Text('{}', style: _valueStyle);
|
||||
}
|
||||
|
||||
return Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
InkWell(
|
||||
onTap: () => setState(() => _expanded = !_expanded),
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Icon(
|
||||
_expanded ? Icons.expand_more : Icons.chevron_right,
|
||||
size: 14,
|
||||
color: AppColors.textMuted,
|
||||
),
|
||||
const SizedBox(width: 4),
|
||||
Text(
|
||||
'{${widget.map.length} keys}',
|
||||
style: _hintStyle,
|
||||
),
|
||||
if (widget.depth == 0) ...[
|
||||
const SizedBox(width: 8),
|
||||
_CopyButton(data: widget.map),
|
||||
],
|
||||
],
|
||||
),
|
||||
),
|
||||
if (_expanded)
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(left: 16),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: widget.map.entries.map((e) {
|
||||
return Padding(
|
||||
padding: const EdgeInsets.symmetric(vertical: 1),
|
||||
child: Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
'${e.key}: ',
|
||||
style: _keyStyle,
|
||||
),
|
||||
Expanded(
|
||||
child: JsonTreeView(
|
||||
data: e.value,
|
||||
depth: widget.depth + 1,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}).toList(),
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _ListNode extends StatefulWidget {
|
||||
final List list;
|
||||
final int depth;
|
||||
final bool initiallyExpanded;
|
||||
|
||||
const _ListNode({
|
||||
required this.list,
|
||||
required this.depth,
|
||||
this.initiallyExpanded = false,
|
||||
});
|
||||
|
||||
@override
|
||||
State<_ListNode> createState() => _ListNodeState();
|
||||
}
|
||||
|
||||
class _ListNodeState extends State<_ListNode> {
|
||||
late bool _expanded;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
_expanded = widget.initiallyExpanded;
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
if (widget.list.isEmpty) {
|
||||
return Text('[]', style: _valueStyle);
|
||||
}
|
||||
|
||||
return Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
InkWell(
|
||||
onTap: () => setState(() => _expanded = !_expanded),
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Icon(
|
||||
_expanded ? Icons.expand_more : Icons.chevron_right,
|
||||
size: 14,
|
||||
color: AppColors.textMuted,
|
||||
),
|
||||
const SizedBox(width: 4),
|
||||
Text(
|
||||
'[${widget.list.length} items]',
|
||||
style: _hintStyle,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
if (_expanded)
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(left: 16),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: widget.list.asMap().entries.map((e) {
|
||||
return Padding(
|
||||
padding: const EdgeInsets.symmetric(vertical: 1),
|
||||
child: Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
'${e.key}: ',
|
||||
style: _indexStyle,
|
||||
),
|
||||
Expanded(
|
||||
child: JsonTreeView(
|
||||
data: e.value,
|
||||
depth: widget.depth + 1,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}).toList(),
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _ValueNode extends StatelessWidget {
|
||||
final dynamic value;
|
||||
final int depth;
|
||||
|
||||
const _ValueNode({required this.value, required this.depth});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
if (value == null) {
|
||||
return Text('null', style: _nullStyle);
|
||||
}
|
||||
if (value is bool) {
|
||||
return Text('$value', style: _boolStyle);
|
||||
}
|
||||
if (value is num) {
|
||||
return Text('$value', style: _numberStyle);
|
||||
}
|
||||
final str = value.toString();
|
||||
if (str.length > 200) {
|
||||
return _LongStringNode(text: str);
|
||||
}
|
||||
return SelectableText('"$str"', style: _stringStyle);
|
||||
}
|
||||
}
|
||||
|
||||
class _LongStringNode extends StatefulWidget {
|
||||
final String text;
|
||||
const _LongStringNode({required this.text});
|
||||
|
||||
@override
|
||||
State<_LongStringNode> createState() => _LongStringNodeState();
|
||||
}
|
||||
|
||||
class _LongStringNodeState extends State<_LongStringNode> {
|
||||
bool _expanded = false;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
InkWell(
|
||||
onTap: () => setState(() => _expanded = !_expanded),
|
||||
child: Text(
|
||||
_expanded
|
||||
? '"${widget.text}"'
|
||||
: '"${widget.text.substring(0, 200)}..." (${widget.text.length} chars)',
|
||||
style: _stringStyle,
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _CopyButton extends StatelessWidget {
|
||||
final dynamic data;
|
||||
const _CopyButton({required this.data});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return InkWell(
|
||||
onTap: () {
|
||||
final json = const JsonEncoder.withIndent(' ').convert(data);
|
||||
Clipboard.setData(ClipboardData(text: json));
|
||||
ScaffoldMessenger.of(context).showSnackBar(
|
||||
const SnackBar(
|
||||
content: Text('Copied to clipboard'),
|
||||
duration: Duration(seconds: 1),
|
||||
),
|
||||
);
|
||||
},
|
||||
child: const Icon(
|
||||
Icons.copy,
|
||||
size: 14,
|
||||
color: AppColors.textMuted,
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const _keyStyle = TextStyle(
|
||||
fontFamily: 'JetBrains Mono',
|
||||
fontSize: 12,
|
||||
color: AppColors.user,
|
||||
);
|
||||
|
||||
const _indexStyle = TextStyle(
|
||||
fontFamily: 'JetBrains Mono',
|
||||
fontSize: 12,
|
||||
color: AppColors.textMuted,
|
||||
);
|
||||
|
||||
const _valueStyle = TextStyle(
|
||||
fontFamily: 'JetBrains Mono',
|
||||
fontSize: 12,
|
||||
color: AppColors.textSecondary,
|
||||
);
|
||||
|
||||
const _stringStyle = TextStyle(
|
||||
fontFamily: 'JetBrains Mono',
|
||||
fontSize: 12,
|
||||
color: Color(0xFF10B981),
|
||||
);
|
||||
|
||||
const _numberStyle = TextStyle(
|
||||
fontFamily: 'JetBrains Mono',
|
||||
fontSize: 12,
|
||||
color: Color(0xFFF59E0B),
|
||||
);
|
||||
|
||||
const _boolStyle = TextStyle(
|
||||
fontFamily: 'JetBrains Mono',
|
||||
fontSize: 12,
|
||||
color: Color(0xFFA855F7),
|
||||
);
|
||||
|
||||
const _nullStyle = TextStyle(
|
||||
fontFamily: 'JetBrains Mono',
|
||||
fontSize: 12,
|
||||
color: AppColors.textMuted,
|
||||
fontStyle: FontStyle.italic,
|
||||
);
|
||||
|
||||
const _hintStyle = TextStyle(
|
||||
fontFamily: 'JetBrains Mono',
|
||||
fontSize: 12,
|
||||
color: AppColors.textMuted,
|
||||
);
|
||||
@@ -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