jpmschweitzer/clide
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

route every tool use through the collapser (T-305 P3)

Browse Source 
Every tool use now renders as a ClideCollapserCard over a one-item list
(a single tool is a list of one) — no separate single-card path. The
collapser carries the echoed last line, the count, and the aggregate
status (spinner while in-flight, check/cross once resolved); the inner
content card holds the call body + folded CALL/PROMPT/RESULT segments and
its own per-item mark. Inside a run (activity/edits/agent), tools render
as the bare inner content card so collapsers don't nest.

ConversationCard gains a `margin` param so inner cards carry no stream
margin; the collapser pads its inner canvas evenly on all sides (the
inner card no longer jams under the header). Rewrote the conversation_view
tests for the new structure and added a single-tool golden.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
jpmschweitzer
2026-06-10 11:39:38 +02:00
co-authored by Claude Opus 4.8
parent 24739b0515
commit a73f0485c3
9 changed files with 219 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files
test/builtin/claude/conversation_view_test.dart
+32 -20
View File
@@ -190,7 +190,17 @@ void main() {
final stream = StreamController<ConversationItem>.broadcast();
final c = ConversationController(stream: stream.stream);
addTearDown(c.dispose);
await tester.pumpWidget(harness(f, ConversationView(controller: c, foldLevel: FoldLevel.none)));
await tester.pumpWidget(harness(
f,
Builder(
// The in-flight Bash collapser shows a live spinner (T-305); disable
// animations so it renders static and pumpAndSettle can settle.
builder: (ctx) => MediaQuery(
data: MediaQuery.of(ctx).copyWith(disableAnimations: true),
child: ConversationView(controller: c, foldLevel: FoldLevel.none),
),
),
));
stream.add(AssistantToolUse(uuid: 'A', timestamp: _t, isSidechain: false, toolUseId: 'A', name: 'Bash', input: const {'command': 'echo a'}));
stream.add(AssistantThinkingMessage(uuid: 'B', timestamp: _t, isSidechain: false, thinking: 'thinking body'));
await tester.pumpAndSettle();
@@ -413,8 +423,8 @@ void main() {
// Collapsed by default: the prompt is hidden.
expect(find.text('find all the widgets'), findsNothing);
// Expand the Agent card → a "prompt" segment reveals the folded prompt.
await tester.tap(find.bySemanticsLabel('Expand'));
// Expand the Agent collapser → a "prompt" segment reveals the folded prompt.
await tester.tap(find.bySemanticsLabel('Task, 1 step, collapsed'));
await tester.pumpAndSettle();
expect(find.text('prompt'), findsOneWidget); // segment sub-label
expect(find.text('find all the widgets'), findsOneWidget);
@@ -438,9 +448,9 @@ void main() {
UserMessage(uuid: 'pB', timestamp: _t, isSidechain: true, parentUuid: 'mB', text: 'PROMPT FOR B'),
UserMessage(uuid: 'pA', timestamp: _t, isSidechain: true, parentUuid: 'mA', text: 'PROMPT FOR A'),
]);
// Two collapsed Agent cards; the first Expand caret belongs to card A.
// Two collapsed Agent collapsers; the first belongs to card A.
expect(find.text('you'), findsNothing);
await tester.tap(find.bySemanticsLabel('Expand').first);
await tester.tap(find.bySemanticsLabel('Task, 1 step, collapsed').first);
await tester.pumpAndSettle();
// Only card A is expanded → its prompt (A) shows; B's stays folded away.
// Nearest-preceding would have put A's prompt under B, revealing nothing.
@@ -475,8 +485,8 @@ void main() {
// The Task's returned result (main chain) — equals the run's final prose.
ToolResultMessage(uuid: 'tr', timestamp: _t, isSidechain: false, parentUuid: 'mA', toolUseId: 'tA', content: 'THE FINAL ANSWER', isError: false),
]);
// Expand the Agent card (its "result" segment would show here if kept)…
await tester.tap(find.bySemanticsLabel('Expand'));
// Expand the Agent collapser (its "result" segment would show here if kept)…
await tester.tap(find.bySemanticsLabel('Task, 1 step, collapsed'));
await tester.pumpAndSettle();
// …and the nested run.
await tester.tap(find.bySemanticsLabel('agent run, 1 step, collapsed'));
@@ -563,10 +573,12 @@ void main() {
toolUseOutcomes: {'x1': true}, // approved
);
final handle = tester.ensureSemantics();
expect(find.text('Write'), findsOneWidget); // shown (resolved)
expect(find.bySemanticsLabel('Expand'), findsOneWidget); // collapsed caret
// T-262: the resolved card also folds its result + a success check.
expect(find.bySemanticsLabel('succeeded'), findsOneWidget);
expect(find.text('Write'), findsOneWidget); // shown (resolved) — collapser label
// T-305: the resolved tool is its own collapser, collapsed by default.
expect(find.bySemanticsLabel('Write, 1 step, collapsed'), findsOneWidget);
// T-262: the resolved card folds its result + carries a success check on
// the collapser (the inner card is hidden while collapsed).
expect(find.byWidgetPredicate((w) => w is ClideStatusIndicator && w.status == ClideRunStatus.success), findsOneWidget);
handle.dispose();
});
@@ -583,10 +595,10 @@ void main() {
await pumpWith(tester, [
_tool('Bash', {'command': 'ls -la'})
]);
// Card starts collapsed — the command appears as the collapsed summary.
// Collapser starts collapsed — the command appears as the echoed summary.
expect(find.text('ls -la'), findsOneWidget);
// Expand to verify the body is a bash code block.
await tester.tap(find.byType(ClideIcon));
// Expand the collapser to verify the inner body is a bash code block.
await tester.tap(find.bySemanticsLabel('Bash, 1 step, collapsed'));
await tester.pump();
final blocks = tester.widgetList<ClideCodeBlock>(find.byType(ClideCodeBlock)).toList();
expect(blocks.any((b) => b.language == 'bash' && b.source.contains('ls -la')), isTrue);
@@ -608,14 +620,14 @@ void main() {
]);
// No standalone success result card — it's folded into the Read card.
expect(find.text('Read · result'), findsNothing);
// The merged card shows a success check.
expect(find.bySemanticsLabel('succeeded'), findsOneWidget);
// The collapser shows a success check while collapsed.
expect(find.byWidgetPredicate((w) => w is ClideStatusIndicator && w.status == ClideRunStatus.success), findsOneWidget);
// Collapsed by default: neither the call body nor the result is shown yet.
expect(find.text('final answer = 42;'), findsNothing);
// Expand: the call segment, a "result" sub-label, and the folded result
// as a colorized code block (Read → grammar from the .dart path).
await tester.tap(find.bySemanticsLabel('Expand'));
await tester.tap(find.bySemanticsLabel('Read, 1 step, collapsed'));
await tester.pumpAndSettle();
expect(find.text('result'), findsOneWidget); // segment sub-label
final blocks = tester.widgetList<ClideCodeBlock>(find.byType(ClideCodeBlock)).toList();
@@ -639,7 +651,7 @@ void main() {
_tool('Bash', {'command': 'echo hi'}),
_result('hi\nthere'),
]);
await tester.tap(find.bySemanticsLabel('Expand'));
await tester.tap(find.bySemanticsLabel('Bash, 1 step, collapsed'));
await tester.pumpAndSettle();
final blocks = tester.widgetList<ClideCodeBlock>(find.byType(ClideCodeBlock)).toList();
expect(blocks.any((b) => b.language == 'bash' && b.source == 'hi\nthere'), isTrue);
@@ -654,8 +666,8 @@ void main() {
// The error stays a separate prominent card…
expect(find.text('Bash · error'), findsOneWidget);
expect(find.text('permission denied'), findsOneWidget);
// …and the call card carries a red failure mark for symmetry (note C).
expect(find.bySemanticsLabel('failed'), findsOneWidget);
// …and the call collapser carries a red failure mark for symmetry (note C).
expect(find.byWidgetPredicate((w) => w is ClideStatusIndicator && w.status == ClideRunStatus.error), findsOneWidget);
handle.dispose();
});
test/goldens/collapser_card_goldens_test.dart
+1 -1
View File
@@ -15,7 +15,7 @@ void main() {
// A stand-in inner item card: content + its own per-item status mark (the
// collapser carries the aggregate; items keep their own — T-305).
Widget item(String label, ClideRunStatus status) => Padding(
padding: const EdgeInsets.only(bottom: 8),
padding: const EdgeInsets.only(bottom: 10),
child: DecoratedBox(
decoration: BoxDecoration(
border: Border.all(color: const Color(0xFF393E48)),
test/goldens/goldens/linux/collapser_card.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 35 KiB

After

Width:  |  Height:  |  Size: 35 KiB

test/goldens/goldens/linux/tool_collapser.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

test/goldens/tool_collapser_goldens_test.dart
+74
View File
@@ -0,0 +1,74 @@
import 'package:alchemist/alchemist.dart';
import 'package:clide/builtin/claude/src/conversation_card.dart';
import 'package:clide/widgets/widgets.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter_test/flutter_test.dart';
import '../helpers/kernel_fixture.dart';
import '../helpers/widget_harness.dart';
/// Visualises the T-305 single-tool rendering: every tool use is a collapser
/// over a one-item list. Collapsed → ticker (label + echoed line + 1 step +
/// status). Expanded → the inner content card (body + folded result + its own
/// per-item mark; the collapser carries the aggregate).
void main() {
late KernelFixture f;
setUp(() async => f = await KernelFixture.create());
tearDown(() async => f.dispose());
Widget bashContent() => const ConversationCard(
variant: ConversationCardVariant.bordered,
accent: Color(0xFF4C9AFF),
label: 'Bash',
status: ConversationCardStatus.success,
body: Text('npm test', style: TextStyle(fontSize: 12, color: Color(0xFF9DA5B4)), textDirection: TextDirection.ltr),
extraSegments: [
CardSegment(
label: 'result', child: Text('All 42 tests passed', style: TextStyle(fontSize: 12, color: Color(0xFF9DA5B4)), textDirection: TextDirection.ltr)),
],
);
goldenTest(
'single tool collapser (T-305): collapsed ticker + expanded inner card',
fileName: 'tool_collapser',
builder: () => GoldenTestGroup(
columns: 1,
children: [
GoldenTestScenario(
name: 'collapsed — Bash, 1 step',
child: SizedBox(
width: 420,
child: harness(
f,
ClideCollapserCard(
label: 'Bash',
color: const Color(0xFF4C9AFF),
collapsedSummary: 'npm test',
counter: '1 step',
status: ClideRunStatus.success,
children: [bashContent()],
),
),
),
),
GoldenTestScenario(
name: 'expanded — inner content card',
child: SizedBox(
width: 420,
child: harness(
f,
ClideCollapserCard(
label: 'Bash',
color: const Color(0xFF4C9AFF),
counter: '1 step',
status: ClideRunStatus.success,
initiallyExpanded: true,
children: [bashContent()],
),
),
),
),
],
),
);
}