Overhaul UI with chat-like interface
Major UI improvements:
- Revamp timeline messages with chat-like interface
- User messages now on right with white text on blue background
- Agent/tool messages on left with black text on grey background
- Chat bubbles extend up to 80% of screen width
- Maintain left-aligned text for code readability
- Move metadata to outer gutters
- Show turn duration for end-of-turn messages
- Integrate tool calls within agent message bubbles
- Add thinking indicator with animated dots when LLM is processing
- Replace buttons with intuitive icons (copy, info, etc.)
- Improve tool call presentation
- Simplify to single row design with all essential info
- Add clear status indicators for success/pending/error
- Fix horizontal scrolling for long commands and outputs
- Prevent tool name truncation
- Improve spacing and alignment throughout
- Enhance header and status displays
- Move Last Commit to dedicated third column in header grid
- Add proper labeling with two-row structure
- Provide consistent styling across all status elements
- Other UI refinements
- Add root URL redirection to demo page
- Fix spacing throughout the interface
- Optimize CSS for better performance
- Ensure consistent styling across components
- Improve command output display and wrapping
Co-Authored-By: sketch <hello@sketch.dev>
diff --git a/webui/src/web-components/demo/sketch-timeline.demo.html b/webui/src/web-components/demo/sketch-timeline.demo.html
index 58ff5d9..9c817d8 100644
--- a/webui/src/web-components/demo/sketch-timeline.demo.html
+++ b/webui/src/web-components/demo/sketch-timeline.demo.html
@@ -8,38 +8,129 @@
{
type: "user",
content: "a user message",
+ timestamp: "2025-04-14T16:39:30.639533919Z",
+ conversation_id: "conv-123456",
+ idx: 0,
},
{
type: "agent",
- content: "an agent message",
+ content: "an agent message with usage information",
+ timestamp: "2025-04-14T16:39:31.639533919Z",
+ conversation_id: "conv-123456",
+ idx: 1,
+ usage: {
+ input_tokens: 4,
+ cache_creation_input_tokens: 2620,
+ cache_read_input_tokens: 0,
+ output_tokens: 106,
+ cost_usd: 0.011427,
+ },
},
{
type: "agent",
- content: "an agent message",
+ content: "an agent message with a single tool call",
+ timestamp: "2025-04-14T16:39:32.639533919Z",
+ conversation_id: "conv-123456",
+ idx: 2,
+ tool_calls: [
+ {
+ name: "bash",
+ input: 'find . -type f -name "*.go" | wc -l',
+ tool_call_id: "call_12345",
+ args: '{"command": "find . -type f -name \\"*.go\\" | wc -l"}',
+ result: "486",
+ },
+ ],
},
{
type: "agent",
- content: "an agent message",
+ content:
+ "an agent message with a bash command that is extremely long and would create a horizontal scrollbar",
+ timestamp: "2025-04-14T16:39:32.739533919Z",
+ conversation_id: "conv-123456",
+ idx: 2.5,
+ tool_calls: [
+ {
+ name: "bash",
+ input:
+ 'find /app -type f -name "*.ts" -o -name "*.js" -o -name "*.tsx" -o -name "*.jsx" | xargs grep -l "useState" | while read file; do echo "File: $file"; grep -n "useState" $file | head -5; echo; done | head -50',
+ tool_call_id: "call_verylongbash",
+ args: '{"command": "find /app -type f -name \\"*.ts\\" -o -name \\"*.js\\" -o -name \\"*.tsx\\" -o -name \\"*.jsx\\" | xargs grep -l \\"useState\\" | while read file; do echo \\"File: $file\\"; grep -n \\"useState\\" $file | head -5; echo; done | head -50"}',
+ result:
+ 'File: /app/webui/src/web-components/sketch-chat-input.ts\n97: useState,\n\nFile: /app/webui/src/web-components/sketch-diff-view.ts\n47:import { createRef, ref, useState } from "lit/directives/ref.js";\n110: const [selectedFiles, setSelectedFiles] = useState([]);\n',
+ },
+ ],
+ },
+ {
+ type: "agent",
+ content:
+ "an agent message with a bash command that has a very long output that would create a horizontal scrollbar",
+ timestamp: "2025-04-14T16:39:32.839533919Z",
+ conversation_id: "conv-123456",
+ idx: 2.7,
+ tool_calls: [
+ {
+ name: "bash",
+ input: "cat /app/webui/package.json | grep -A 5 dependencies",
+ tool_call_id: "call_longoutput",
+ args: '{"command": "cat /app/webui/package.json | grep -A 5 dependencies"}',
+ result:
+ ' "dependencies": {\n "@xterm/addon-fit": "^0.10.0",\n "@xterm/xterm": "^5.5.0",\n "diff2html": "3.4.51",\n "lit": "^3.2.1",\n "marked": "^15.0.7",\n "mermaid": "^11.6.0",\n "sanitize-html": "^2.15.0",\n "vega": "^5.33.0",\n "vega-embed": "^6.29.0",\n "vega-lite": "^5.23.0",\n "react": "^18.2.0",\n "react-dom": "^18.2.0",\n "styled-components": "^6.1.8",\n "tailwindcss": "^3.4.1",\n "typescript": "^5.3.3",\n "zod": "^3.22.4",\n "@types/react": "^18.2.55",\n "@types/react-dom": "^18.2.19",\n "eslint": "^8.56.0",\n "prettier": "^3.2.5"\n },',
+ },
+ ],
+ },
+ {
+ type: "agent",
+ content:
+ "an agent message with two tool calls that will show how the width behaves with very long content that should push the boundaries of the UI layout with really wide tool calls that might stretch beyond the regular message content width",
+ timestamp: "2025-04-14T16:39:33.639533919Z",
+ conversation_id: "conv-123456",
+ idx: 3,
+ tool_calls: [
+ {
+ name: "keyword_search",
+ input: "Search for files related to the timeline component",
+ tool_call_id: "call_67890",
+ args: '{"query": "Find all files related to the timeline component in the project", "search_terms": ["timeline", "message", "component", "web-components"]}',
+ result:
+ "Found 3 files: sketch-timeline.ts, sketch-timeline-message.ts, sketch-timeline.demo.html",
+ },
+ {
+ name: "patch",
+ input: "Update the timeline component CSS",
+ tool_call_id: "call_abcdef",
+ args: '{"path": "/app/webui/src/web-components/sketch-timeline.ts", "patches": [{"operation": "replace", "oldText": "width: 100%;", "newText": "width: auto; max-width: 100%;"}, {"operation": "replace", "oldText": "margin-bottom: 20px;", "newText": "margin-bottom: 24px;"}]}',
+ result: "Applied all patches successfully",
+ },
+ ],
},
{
type: "user",
- content: "a user message",
- },
- {
- type: "user",
- content: "a user message",
+ content: "another user message",
+ timestamp: "2025-04-14T16:39:34.639533919Z",
+ conversation_id: "conv-123456",
+ idx: 4,
},
{
type: "agent",
- content: "an agent message",
- },
- {
- type: "user",
- content: "a user message",
+ content: "an agent message with detailed information and usage data",
+ timestamp: "2025-04-14T16:39:35.639533919Z",
+ conversation_id: "conv-123456",
+ idx: 5,
+ usage: {
+ input_tokens: 125,
+ cache_creation_input_tokens: 0,
+ cache_read_input_tokens: 3050,
+ output_tokens: 245,
+ cost_usd: 0.023456,
+ },
},
{
type: "tool",
content: "a tool use message",
+ timestamp: "2025-04-14T16:39:36.639533919Z",
+ conversation_id: "conv-123456",
+ idx: 6,
},
{
type: "commit",
@@ -54,14 +145,24 @@
"sketch/create-readmemd-for-web-components-directory",
},
],
- timestamp: "2025-04-14T16:39:33.639533919Z",
- conversation_id: "",
- idx: 17,
+ timestamp: "2025-04-14T16:39:37.639533919Z",
+ conversation_id: "conv-123456",
+ idx: 7,
},
{
type: "agent",
content: "an end-of-turn agent message",
end_of_turn: true,
+ timestamp: "2025-04-14T16:39:38.639533919Z",
+ conversation_id: "conv-123456",
+ idx: 8,
+ usage: {
+ input_tokens: 85,
+ cache_creation_input_tokens: 1240,
+ cache_read_input_tokens: 750,
+ output_tokens: 178,
+ cost_usd: 0.018976,
+ },
},
];