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/package.json b/webui/package.json
index 0248c77..ef77988 100644
--- a/webui/package.json
+++ b/webui/package.json
@@ -12,7 +12,7 @@
"scripts": {
"playwright-install": "playwright install",
"check": "tsc --noEmit",
- "demo": "vite --open src/web-components/demo/index.html",
+ "demo": "vite --open /src/web-components/demo/index.html",
"demo:mermaid": "vite --open src/web-components/demo/mermaid-test/index.html",
"dev": "vite --port 5173 --strictPort --host 127.0.0.1",
"format": "prettier ./src --write",