feat(devtools): simplify tracing + professional dark theme#40
Open
feat(devtools): simplify tracing + professional dark theme#40
Conversation
cpluss
force-pushed
the
cpluss/devtools-spec
branch
from
f63c8c6 to
b0a0de9
Compare
Adds a Chrome DevTools-style inspector for Cria prompts that leverages OpenTelemetry traces to provide visibility into prompt composition, token budgeting, and the fitting process. - New @fastpaca/cria-devtools package with OTLP receiver and React UI - Session list with status filtering (All/Ok/Error) - Detail view with Headers/Payload/Fit Loop/Timing/Raw tabs - Live SSE streaming for real-time session updates - Before/after message snapshots showing fit transformations - Updated hello-world example with OTel instrumentation
- Tighter spacing and smaller font sizes for data-dense display - Side-by-side layout with fixed-width details panel - Added 🦙 alpaca emoji to header for brand identity - System fonts for better performance - Subtle pulse animation on live indicator - Improved responsive breakpoints
- Chrome DevTools-inspired dark theme (#0d0d0d background) - Larger font sizes for readability (12-16px range) - Resizable split panel with drag handle - Yellow accent color from fastpaca brand - Sharp edges, no rounded corners - Prevent flash of white on page load - Extract SessionDetails component for maintainability - Default to "Sent" (after) view in Payload tab - Remove duplicate Headers/Raw tabs (keeping Raw only)
- Remove topbar branding and LIVE indicator - Remove redundant summary grid in detail panel - Simplify color palette from 7 grays to pure black/white - Default to Payload tab instead of Headers - Fix truncated "SUCCESS" badge - Reduce CSS from 796 to 496 lines The new design follows fastpaca's principle: show the content, not the chrome.
- Group assistant messages with their tool invocations visually - Add timeline connectors showing message flow - Deep JSON parsing for nested stringified data - Brutalist design matching fastpaca.com aesthetic (sharp edges) - Add rich example for testing complex conversations
Refresh all devtools screenshots with the current UI state showing the professional dark theme with weather-assistant example data.
- Rename "Fit Loop" tab to "Diff" for clarity - Remove Timing tab (duration already shown in session header) - Clean up unused timing CSS (~1KB reduction)
- Remove 60 lines of dead CSS (unused tool-calls-list, pill classes) - Consolidate useResizablePanel and useResizableColumn into single useResizable hook - Replace 80-line custom LCS diff algorithm with fast-diff library - Replace manual validation with Zod schema for session imports - Simplify stableKeyForValue function Total: 168 lines removed (247 deletions - 79 insertions)
- Consolidate formatTime/formatDateTime into single formatDate function - Add reusable ToggleGroup and MetaItem components - Add cx() helper for className construction - Simplify deepParseJson using Object.fromEntries - Remove hashString function, use stable index keys for diff ops - Replace all toggle-group patterns with ToggleGroup component - Replace all meta-item patterns with MetaItem component Net reduction of 35 lines while improving component reusability.
Split the 1800-line app.tsx into focused modules: - app.tsx (456 lines): Main app with sessions table - components/common.tsx: Shared UI (ToggleGroup, MetaItem, etc.) - components/diff.tsx: Diff view components - components/json-viewer.tsx: JSON tree viewer - components/messages.tsx: Message/timeline components - components/session.tsx: Session detail panels - hooks/: useResizable, useSessionStream - utils/: cx, format, json, download utilities Total: ~1860 lines across 12 files (no barrel files per lint rules)
cpluss
force-pushed
the
cpluss/devtools-spec
branch
from
ab540cd to
bb1ca1f
Compare
Reduces devtools tracing setup from ~20 lines of OpenTelemetry boilerplate to a single line: `cria.devtools()`. - Add src/devtools.ts with enableDevtools(), shutdownDevtools(), and getGlobalDevtoolsHooks() for auto-injection - Add devtools property to cria namespace object - Auto-inject devtools hooks in render() when enabled - Add OpenTelemetry as optional peer dependencies - Update docs and examples with simplified API
cpluss
changed the title
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
This PR includes two improvements to DevTools:
1. Simplified Tracing Setup (NEW)
Reduces devtools tracing from ~20 lines of OpenTelemetry boilerplate to one line:
Changes:
src/devtools.tswithenableDevtools(),shutdownDevtools(),getGlobalDevtoolsHooks()devtoolsproperty tocrianamespacerender()when devtools is enabled2. Professional Dark Theme (Previous)
Simplifies the Cria DevTools UI: black background, white text, yellow accent.
Test Plan
npm exec -- ultracite checkpassesnpm testpasses (111/111)cria-devtoolsanddevtools-smokeexample