feat: Add Storybook component library with 46 presentational components#1156
Draft
feat: Add Storybook component library with 46 presentational components#1156
Conversation
* Broke v2_tech_stack.md into v2_web_client.md, v2_server.md, and v2_storage.md * Added v2 components with information on the presenttional components pattern.
Defines all presentational components to be built in Storybook with Mantine, organized bottom-up (atoms, molecules, organisms, layouts) with props interfaces, Mantine implementation notes, story variations, build order, and configuration. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
* Added storybook build plan
…ts with Storybook stories - Mantine theme with component extensions (Badge, Card, Paper, Button, etc.) - CSS custom properties for design tokens (--inspector-* vars) - Dark/light mode support with auto detection - 12 atoms: StatusIndicator, AnnotationBadge, CapabilityItem, LogEntry, ProgressDisplay, ContentViewer, ListChangedIndicator, CopyButton, ConnectionToggle, TransportBadge, InlineError, MessageBubble - 25 molecules: ServerCard, AddServerMenu, SchemaForm, ToolListItem, ToolDetailPanel, ResultPanel, ResourceListItem, ResourcePreviewPanel, ResourceTemplateInput, PromptArgumentsForm, PromptMessagesDisplay, LogControls, TaskCard, HistoryEntry, ServerInfoContent, ServerSettingsForm, RootsTable, SamplingRequestPanel, ElicitationFormPanel, ElicitationUrlPanel, InlineSamplingRequest, InlineElicitationRequest, PendingClientRequests, ImportServerJsonPanel, ExperimentalFeaturesPanel - Exclude storybook-static from version control - Exclude .stories.tsx from app tsconfig (Storybook-only modules) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- ServerListScreen: Home page with server card grid and add server menu - ToolsScreen: Three-panel layout (tool list, detail/form, results) - ResourcesScreen: Two-panel with accordion sections and content preview - PromptsScreen: Two-panel with prompt selection and message display - LoggingScreen: Two-panel with log controls and real-time log stream - TasksScreen: Active and completed task card sections - HistoryScreen: Request history with search, filter, and pinned entries Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
…ories - HomeLayout: AppShell with header (title + theme toggle) for disconnected state - ConnectedLayout: AppShell with server name, status indicator, tab navigation, theme toggle, and disconnect button for connected state All 6 phases of the Storybook component plan are now complete: 12 atoms, 25 molecules, 7 organisms, 2 layouts = 46 components total Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Replace placeholder Paper elements with actual ServerListScreen organism containing properly configured ServerCard components. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
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
2 participants
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
specification/v2_ux_storybook.md) defining all components, props, stories, and build order--inspector-*design tokens), and dark/light mode supportAll components follow the presentational/container pattern — they receive data and callbacks via props with no store access, making them testable in Storybook isolation.
Example Storybook Screenshots
Desktop
Tablet
Large Mobile
Outline
Measure
Test plan
npm run buildsucceedsnpm run lintsucceedsnpm run format:checksucceedsnpm run storybook:buildsucceedsnpm run storybookand visually verify components in light/dark mode🤖 Generated with Claude Code