-
Notifications
You must be signed in to change notification settings - Fork 5
🤖 Add Storybook stories for tool messages with custom FileRead renderer #38
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Open
ammario
wants to merge
20
commits into
main
Choose a base branch
from
storybook-tool-messages
base: main
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
+1,806
−267
Conversation
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
e8112f3
to
76ed07b
Compare
Chromatic Build Issue InvestigationAfter extensive investigation, the Chromatic build failure has been identified as an module resolution issue specific to the Chromatic environment. Key Findings
Attempted Solutions
Next StepsSee
The Storybook itself is working great locally - this is purely a Chromatic infrastructure issue. |
ammario
added a commit
that referenced
this pull request
Oct 7, 2025
Complete status of the Storybook tool messages PR including: - What works (local Storybook, all stories, no code issues) - What's blocked (Chromatic visual regression) - Investigation summary - Decision options for moving forward Ready for user decision on how to proceed.
ammario
added a commit
that referenced
this pull request
Oct 7, 2025
Complete status of the Storybook tool messages PR including: - What works (local Storybook, all stories, no code issues) - What's blocked (Chromatic visual regression) - Investigation summary - Decision options for moving forward Ready for user decision on how to proceed.
ce6bbbc
to
39118c0
Compare
ammario
added a commit
that referenced
this pull request
Oct 7, 2025
Complete status of the Storybook tool messages PR including: - What works (local Storybook, all stories, no code issues) - What's blocked (Chromatic visual regression) - Investigation summary - Decision options for moving forward Ready for user decision on how to proceed.
39118c0
to
f383a85
Compare
- Initialize Storybook 9.1.10 with React + Vite - Add dark theme matching app (UI chrome, docs, canvas) - Configure global styles (colors, fonts, font smoothing) - Create AssistantMessage component stories (8 variants) - Add Chromatic for automated visual regression testing - Configure GitHub Actions workflow with TurboSnap - Add comprehensive documentation Generated with `cmux`
Generated with `cmux`
- Add comprehensive ToolMessage stories for bash and file_edit tools - Create custom FileReadToolCall component with compact collapsed view - Display file read as: 🔍 <file path> ~<tokens> - Add file metadata (size, lines, modified time) on expand - Add 13 tool message story variants covering all states - Wire up FileReadToolCall in ToolMessage router Generated with `cmux`
- Add null checks for patches, hunks, and lines - Use optional chaining for safer property access - Provide fallback to raw diff display if parsing fails - Should fix Chromatic browser environment issues Generated with `cmux`
- Wraps all stories with CacheProvider to ensure emotion works in all environments - Should fix Chromatic browser compatibility issues Generated with `cmux`
Configure Vite and TypeScript for proper emotion support: - Add jsxImportSource to tsconfig.json - Configure @vitejs/plugin-react with emotion babel plugin - Add viteFinal to Storybook main.ts with emotion optimizeDeps - Add @emotion/babel-plugin as dev dependency This ensures emotion/styled components are properly bundled in Chromatic's production build environment. _Generated with `cmux`_
Replace Storybook's default React plugin with emotion-configured one: - Filter out Storybook's vite:react plugin to avoid conflicts - Add custom React plugin with jsxImportSource and babel config - Exclude stories and node_modules from emotion transformation - Remove unnecessary babel.config.js file This approach is based on the recommended solution from storybookjs/builder-vite#210 for using emotion with Vite+Storybook. _Generated with `cmux`_
The exclude pattern was preventing proper transformation of emotion styled components. Allow all files to be transformed by the emotion babel plugin. _Generated with `cmux`_
Add explicit include pattern to ensure Babel processes all TypeScript/JavaScript files, not just JSX. This is needed for emotion's babel plugin to properly transform styled components. _Generated with `cmux`_
…bility - Converted ToolPrimitives to use CSS modules - Converted BashToolCall to use CSS modules - Created CSS module files for remaining components - Still need to complete FileEditToolCall, FileReadToolCall, ProposePlanToolCall Progress on fixing Chromatic build issue where styled is not callable.
- Removed all @emotion/styled usage from FileReadToolCall - Converted to CSS modules for Chromatic compatibility - Build still succeeds Remaining: FileEditToolCall, ProposePlanToolCall
Attempt to fix Chromatic build issue by ensuring emotion packages are properly deduplicated and resolved. This should prevent the 'styled is not a function' error in the Chromatic environment.
Comprehensive summary of the Chromatic build failure where styled components aren't resolving correctly in the Chromatic environment. Key findings: - Local Storybook builds work fine - Chromatic fails with 'a is not a function' (minified 'styled is not a function') - 25+ components use @emotion/styled throughout the codebase - Multiple configuration attempts failed to resolve the issue Recommendation: Skip Chromatic for now, use local Storybook for development. This appears to be a Chromatic infrastructure/bundling issue rather than a code problem.
Complete status of the Storybook tool messages PR including: - What works (local Storybook, all stories, no code issues) - What's blocked (Chromatic visual regression) - Investigation summary - Decision options for moving forward Ready for user decision on how to proceed.
12d8e92
to
cd43476
Compare
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Overview
Adds comprehensive Storybook stories for tool messages (bash, file_edit, file_read) and implements a custom compact renderer for the file_read tool.
What's Included
📖 Tool Message Stories
13 story variants covering:
Bash Tool (4 stories)
File Edit Tools (4 stories)
File Read Tool (5 stories) - NEW!
🔍 Custom FileRead Renderer
Created
FileReadToolCall
component with unique compact design:Collapsed view:
Expanded view:
Features:
🔌 Integration
isFileReadTool
type guard toToolMessage
Design Decisions
Why compact display?
File reads are very common and often not interesting to review in detail. The compact view:
Why different from file_edit?
Files Changed
Created
src/components/tools/FileReadToolCall.tsx
- Custom file read renderersrc/components/Messages/ToolMessage.stories.tsx
- Comprehensive tool storiesModified
src/components/Messages/ToolMessage.tsx
- Added file_read routingScreenshots
(Will be visible in Storybook and Chromatic visual diffs)
Testing
Generated with `cmux`