webui: convert SketchCallStatus to Tailwind CSS with comprehensive demo support
Convert SketchCallStatus component from shadow DOM CSS to Tailwind classes
while maintaining test compatibility and adding complete demo infrastructure.
Problems Solved:
Shadow DOM Styling Limitations:
- SketchCallStatus used CSS-in-JS with shadow DOM preventing Tailwind integration
- Custom CSS animations and styling duplicated Tailwind functionality
- Component couldn't benefit from design system consistency
- Difficult to maintain custom CSS alongside Tailwind-based components
Missing Demo Infrastructure:
- No demo fixtures for testing SketchCallStatus component states
- Component not included in demo runner for development testing
- Manual testing required for visual verification of component behavior
Test Compatibility Issues:
- Conversion to Tailwind removed semantic class names expected by tests
- Need to maintain backward compatibility with existing test suite
Solution Implementation:
Tailwind CSS Conversion:
- Changed SketchCallStatus to inherit from SketchTailwindElement
- Replaced CSS-in-JS styles with Tailwind utility classes
- Converted animations using @keyframes in inline <style> tag
- Maintained exact visual appearance while using Tailwind classes
Component State Styling:
- LLM indicator: bg-yellow-100 text-amber-500 when active, text-gray-400 when idle
- Tool indicator: bg-blue-100 text-blue-500 when active, text-gray-400 when idle
- Status banner: bg-green-50 text-green-700 (idle), bg-orange-50 text-orange-600 (working), bg-red-50 text-red-600 (disconnected)
- Gentle pulse animation preserved with animate-gentle-pulse class
Test Compatibility Maintenance:
- Added semantic CSS classes back to elements (.llm-indicator, .tool-indicator, .status-banner)
- Added .active class when indicators are in active state
- Added status state classes (status-idle, status-working, status-disconnected)
- Maintains backward compatibility with existing Playwright tests
Demo Fixtures Implementation:
- Added call-status.ts with CallStatusState interface and sample states
- Created demo fixtures: idleCallStatus, workingCallStatus, heavyWorkingCallStatus, disconnectedCallStatus, workingDisconnectedCallStatus
- Fixed TypeScript module export issues using 'export type' syntax
- Comprehensive sketch-call-status.demo.ts with interactive controls
- Added component to demo-runner.ts knownComponents list
Interactive Demo Features:
- Status variations section showing all possible states
- Interactive demo with buttons to add/remove LLM calls and tool calls
- Toggle connection state and change agent state functionality
- Reset button to return to idle state
- Real-time simulation of activity changes
Files Modified:
- sketch/webui/src/web-components/sketch-call-status.ts: Converted to SketchTailwindElement with Tailwind classes and semantic class names
- sketch/webui/src/web-components/demo/demo-fixtures/call-status.ts: Added call status demo data
- sketch/webui/src/web-components/demo/demo-fixtures/index.ts: Export call status fixtures with proper TypeScript module exports
- sketch/webui/src/web-components/demo/sketch-call-status.demo.ts: Complete demo implementation with interactive controls
- sketch/webui/src/web-components/demo/demo-framework/demo-runner.ts: Added sketch-call-status to knownComponents
Testing and Validation:
- Verified component renders correctly with Tailwind classes
- Confirmed all state variations display proper colors and animations
- Tested interactive demo controls function correctly
- Validated component appears in demo runner list
- Ensured test compatibility with semantic class preservation
The conversion maintains visual fidelity and test compatibility while enabling
better integration with the Tailwind-based design system and providing
comprehensive demo infrastructure for development and testing.
Co-Authored-By: sketch <hello@sketch.dev>
Change-ID: s3437e5020555164dk
diff --git a/webui/src/web-components/demo/demo-fixtures/call-status.ts b/webui/src/web-components/demo/demo-fixtures/call-status.ts
new file mode 100644
index 0000000..b3c7bec
--- /dev/null
+++ b/webui/src/web-components/demo/demo-fixtures/call-status.ts
@@ -0,0 +1,51 @@
+/**
+ * Shared fake call status data for demos
+ */
+
+export interface CallStatusState {
+ llmCalls: number;
+ toolCalls: string[];
+ agentState: string | null;
+ isIdle: boolean;
+ isDisconnected: boolean;
+}
+
+export const idleCallStatus: CallStatusState = {
+ llmCalls: 0,
+ toolCalls: [],
+ agentState: null,
+ isIdle: true,
+ isDisconnected: false,
+};
+
+export const workingCallStatus: CallStatusState = {
+ llmCalls: 1,
+ toolCalls: ["patch", "bash"],
+ agentState: "analyzing code",
+ isIdle: false,
+ isDisconnected: false,
+};
+
+export const heavyWorkingCallStatus: CallStatusState = {
+ llmCalls: 3,
+ toolCalls: ["keyword_search", "patch", "bash", "think", "codereview"],
+ agentState: "refactoring components",
+ isIdle: false,
+ isDisconnected: false,
+};
+
+export const disconnectedCallStatus: CallStatusState = {
+ llmCalls: 0,
+ toolCalls: [],
+ agentState: null,
+ isIdle: true,
+ isDisconnected: true,
+};
+
+export const workingDisconnectedCallStatus: CallStatusState = {
+ llmCalls: 2,
+ toolCalls: ["browser_navigate", "patch"],
+ agentState: "testing changes",
+ isIdle: false,
+ isDisconnected: true,
+};
diff --git a/webui/src/web-components/demo/demo-fixtures/index.ts b/webui/src/web-components/demo/demo-fixtures/index.ts
index 627b257..0bfcc9d 100644
--- a/webui/src/web-components/demo/demo-fixtures/index.ts
+++ b/webui/src/web-components/demo/demo-fixtures/index.ts
@@ -32,6 +32,16 @@
createViewModeTestButtons,
} from "./view-mode-select";
+// Call status
+export {
+ idleCallStatus,
+ workingCallStatus,
+ heavyWorkingCallStatus,
+ disconnectedCallStatus,
+ workingDisconnectedCallStatus,
+} from "./call-status";
+export type { CallStatusState } from "./call-status";
+
// Common demo utilities
export const demoStyles = {
container: `