Skip to content

Commit 307fac7

Browse files
sizzlebopsizzlebop
committed
feat: better visual tool output
1 parent d2db2b1 commit 307fac7

File tree

7 files changed

+1213
-0
lines changed

7 files changed

+1213
-0
lines changed

‎demo/enable-enhanced-tools.md‎

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
# Enhanced Tool Display Demo 🎨
2+
3+
This demonstrates the new beautiful, interactive tool calling display system for Bibble.
4+
5+
## How to Enable
6+
7+
The enhanced tool display is enabled by default, but you can control it with:
8+
9+
```bash
10+
# Enable enhanced tool display (default)
11+
export BIBBLE_ENHANCED_TOOLS=true
12+
node dist/index.js chat
13+
14+
# Disable enhanced tool display (fallback to legacy)
15+
export BIBBLE_ENHANCED_TOOLS=false
16+
node dist/index.js chat
17+
```
18+
19+
## Features Showcase
20+
21+
The enhanced system provides:
22+
23+
### 🎭 **Beautiful Headers**
24+
- Gradient "Tool Call" banner with Pink Pixel branding
25+
- Dynamic status badges (Running, Success, Error, Cancelled)
26+
- Tool name with distinctive icons
27+
- Execution timing information
28+
- Boxed layout with rounded corners
29+
30+
### 📤 **Parameters Section**
31+
- Boxed input parameters with magenta border
32+
- Pretty-printed JSON formatting
33+
- Syntax highlighting for readability
34+
- Collapsible/expandable content
35+
36+
### 📥 **Results Section**
37+
- Boxed output with cyan border
38+
- Intelligent content detection and formatting
39+
- Tables for structured data (arrays of objects)
40+
- Lists for simple arrays
41+
- Syntax-highlighted JSON for complex objects
42+
- Clickable URLs (where terminal supports it)
43+
- File path highlighting
44+
45+
### 🎯 **Smart Formatting**
46+
- **Arrays of objects** → Beautiful tables with truncated content
47+
- **Simple arrays** → Numbered lists
48+
- **Objects** → Key-value bullet lists
49+
- **URLs** → Clickable links with underlining
50+
- **File paths** → Green highlighting
51+
- **JSON** → Full syntax highlighting
52+
- **Text** → Smart line wrapping and indentation
53+
54+
### ⚡ **Interactive Features**
55+
- Copy tool results to clipboard with `c` key
56+
- Expand/collapse sections with `space` key
57+
- Quit view with `q` key
58+
- Helpful keyboard shortcuts footer
59+
60+
### 🌈 **Pink Pixel Styling**
61+
- Consistent brand gradients (pink → cyan, cyan → green)
62+
- Professional status icons and symbols
63+
- Beautiful separators between tool calls
64+
- Proper spacing and visual hierarchy
65+
66+
## Example Output Structure
67+
68+
```
69+
╭─ ⚙️ Tool Call [Success] search_files • Started 14:23:15, took 234ms ─╮
70+
│ │
71+
╰────────────────────────────────────────────────────────────────────╯
72+
73+
┌─ ► Parameters ───────────────────────────────────────────────────────┐
74+
│ │
75+
│ { │
76+
│ "pattern": "*.ts", │
77+
│ "directory": "/src", │
78+
│ "maxResults": 10 │
79+
│ } │
80+
│ │
81+
└──────────────────────────────────────────────────────────────────────┘
82+
83+
┌─ ▾ Results ──────────────────────────────────────────────────────────┐
84+
│ │
85+
│ ╭─────────────────┬──────────┬─────────────────────────────────────╮ │
86+
│ │ name │ size │ modified │ │
87+
│ ├─────────────────┼──────────┼─────────────────────────────────────┤ │
88+
│ │ src/index.ts │ 15.2KB │ 2024-02-01 14:22:33 │ │
89+
│ │ src/types.ts │ 2.1KB │ 2024-02-01 12:15:21 │ │
90+
│ │ src/config.ts │ 5.8KB │ 2024-01-31 16:45:12 │ │
91+
│ ╰─────────────────┴──────────┴─────────────────────────────────────╯ │
92+
│ │
93+
│ ... and 7 more rows │
94+
│ │
95+
└──────────────────────────────────────────────────────────────────────┘
96+
97+
[space] expand • [c] copy • [q] quit view
98+
99+
────────────────────────────────────────────────────────────────────────
100+
```
101+
102+
## Testing the System
103+
104+
To test with actual tool calls:
105+
106+
1. **Build the project**: `npm run build`
107+
108+
2. **Start a chat session**:
109+
```bash
110+
BIBBLE_ENHANCED_TOOLS=true node dist/index.js chat
111+
```
112+
113+
3. **Trigger a tool call**: Ask the assistant to perform a task that uses MCP tools, like:
114+
- "List the files in this directory"
115+
- "Search for TypeScript files"
116+
- "What's the weather in San Francisco?"
117+
- "Get the current git status"
118+
119+
4. **Observe the beautiful output!** The enhanced display will show:
120+
- Gorgeous gradient headers
121+
- Boxed parameter and result sections
122+
- Smart content formatting
123+
- Interactive keyboard hints
124+
125+
The system gracefully falls back to the legacy display if there are any issues, ensuring compatibility.
126+
127+
## Implementation Details
128+
129+
- **File**: `src/ui/tool-display.ts`
130+
- **Integration**: `src/ui/chat.ts` (enhanced `displayToolCall` method)
131+
- **Dependencies**: `cli-highlight`, `clipboardy`, `json-stringify-pretty-compact`
132+
- **Backward Compatibility**: Legacy display preserved as fallback
133+
- **Feature Flag**: `BIBBLE_ENHANCED_TOOLS` environment variable

‎demo/tool-display-demo.js‎

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
#!/usr/bin/env node
2+
3+
// Demo script showcasing the enhanced tool display system
4+
// This demonstrates the beautiful, interactive tool call rendering
5+
6+
// Since we can't import the TypeScript files directly in Node.js,
7+
// let's create a simple test that shows what the enhanced display would look like
8+
9+
console.log('\n🎨 Enhanced Tool Display Demo - Pink Pixel Style\n');
10+
11+
// Demo 1: File listing result
12+
console.log('📁 Demo 1: File Listing Tool Call');
13+
const fileListMessage = {
14+
role: MessageRole.Tool,
15+
toolName: 'list_files',
16+
content: JSON.stringify([
17+
{ name: 'package.json', size: '1.8KB', modified: '2024-02-01' },
18+
{ name: 'README.md', size: '15.2KB', modified: '2024-02-01' },
19+
{ name: 'src', size: '-', modified: '2024-01-30', type: 'directory' },
20+
{ name: 'dist', size: '-', modified: '2024-02-01', type: 'directory' },
21+
])
22+
};
23+
24+
toolDisplay.displayCall(fileListMessage, {
25+
showTimings: false,
26+
enableInteractive: false,
27+
maxTableRows: 10
28+
});
29+
30+
// Demo 2: API response
31+
setTimeout(() => {
32+
console.log('\n🌐 Demo 2: API Response Tool Call');
33+
const apiMessage = {
34+
role: MessageRole.Tool,
35+
toolName: 'fetch_weather',
36+
content: JSON.stringify({
37+
location: 'San Francisco, CA',
38+
temperature: '22°C',
39+
condition: 'Partly Cloudy',
40+
humidity: '65%',
41+
wind_speed: '12 mph',
42+
forecast: [
43+
{ day: 'Today', high: '24°C', low: '18°C', condition: 'Partly Cloudy' },
44+
{ day: 'Tomorrow', high: '26°C', low: '19°C', condition: 'Sunny' },
45+
{ day: 'Friday', high: '23°C', low: '17°C', condition: 'Cloudy' }
46+
]
47+
})
48+
};
49+
50+
toolDisplay.displayCall(apiMessage, {
51+
showTimings: false,
52+
enableInteractive: false,
53+
maxTableRows: 5
54+
});
55+
}, 1500);
56+
57+
// Demo 3: Search results
58+
setTimeout(() => {
59+
console.log('\n🔍 Demo 3: Search Results Tool Call');
60+
const searchMessage = {
61+
role: MessageRole.Tool,
62+
toolName: 'search_codebase',
63+
content: JSON.stringify([
64+
'src/components/Button.tsx',
65+
'src/components/Modal.tsx',
66+
'src/ui/theme.ts',
67+
'src/utils/helpers.js',
68+
'tests/components/Button.test.tsx'
69+
])
70+
};
71+
72+
toolDisplay.displayCall(searchMessage, {
73+
showTimings: false,
74+
enableInteractive: false,
75+
maxJsonLines: 15
76+
});
77+
}, 3000);
78+
79+
// Demo 4: Error handling
80+
setTimeout(() => {
81+
console.log('\n❌ Demo 4: Error Tool Call');
82+
const errorMessage = {
83+
role: MessageRole.Tool,
84+
toolName: 'compile_code',
85+
content: JSON.stringify({
86+
success: false,
87+
error: 'Type error in src/index.ts:42',
88+
details: 'Property "name" does not exist on type "User"',
89+
suggestions: [
90+
'Check if the property name is correct',
91+
'Ensure the interface is imported',
92+
'Add the missing property to the interface'
93+
]
94+
})
95+
};
96+
97+
toolDisplay.displayCall(errorMessage, {
98+
showTimings: false,
99+
enableInteractive: false
100+
});
101+
}, 4500);
102+
103+
// Demo 5: Simple text result
104+
setTimeout(() => {
105+
console.log('\n📝 Demo 5: Text Result Tool Call');
106+
const textMessage = {
107+
role: MessageRole.Tool,
108+
toolName: 'generate_summary',
109+
content: 'This project implements a CLI chatbot with MCP support. It features beautiful terminal UI with gradients, interactive components, and sophisticated tool call display. The system supports multiple AI providers and can be extended with custom tools.'
110+
};
111+
112+
toolDisplay.displayCall(textMessage, {
113+
showTimings: false,
114+
enableInteractive: false
115+
});
116+
117+
console.log('\n✨ Demo Complete! The enhanced tool display system provides:');
118+
console.log(' • Beautiful gradient headers with status badges');
119+
console.log(' • Boxed parameter and result sections');
120+
console.log(' • Intelligent formatting (tables, lists, JSON)');
121+
console.log(' • Syntax highlighting for JSON content');
122+
console.log(' • Interactive features (copy, expand/collapse)');
123+
console.log(' • Pink Pixel branded styling throughout');
124+
console.log('\nSet BIBBLE_ENHANCED_TOOLS=true to enable in chat! 🚀\n');
125+
}, 6000);

0 commit comments

Comments
 (0)