Context is Everything logo

3. UI Inventory

Page-by-page specification of every user-facing screen, derived from component source code.

Layout Shell

Component: App.jsx → Shell.jsx

┌──────────────────────────────────────────────────┐
│ Header                                            │
│ [Logo] [Project Selector ▼] [DarkMode] [Account] │
├─────────┬────────────────────────────────────────┤
│ Sidebar │ Main Content                            │
│         │                                         │
│ Icons:  │ (varies by active panel)               │
│ 💬 Chat │                                         │
│ 📁 Files│                                         │
│ 📚 Know.│                                         │
│ ⚡ Skills│                                        │
│ 📅 Sched│                                         │
│ 🎤 Meet.│                                         │
│ 🔧 Git  │                                         │
│ 🛠 Tools│                                         │
│ ⚙ Admin │                                         │
├─────────┴────────────────────────────────────────┤
│ FloatingIconBar (quick settings, bug report)      │
└──────────────────────────────────────────────────┘

Responsive behavior: Sidebar collapses to icon-only on narrow viewports. MobileNav component provides bottom navigation on mobile.

Login Page

Component: LoginForm.jsx

Element Type Details
Username Text input Required
Password Password input Required
Login button Submit POST /api/auth/login
Forgot password Link Navigates to reset flow

States:

  • Default: Empty form
  • Error: "Invalid credentials" banner
  • Loading: Button disabled with spinner
  • Setup required: Redirect to /setup if no users exist

Onboarding Flow

Component: OrganizationSetupScreen.jsx → WelcomeScreen.jsx

Screen 1: Welcome

  • Title: "Welcome Your New AI Team Member"
  • Company name or website URL input
  • Auto-detection of company from URL
  • Button: "Start Sasha's First Day →"

Screen 2: API Key Setup

  • Claude API key configuration
  • Option to skip for limited functionality
  • Test key validation

Screen 3: Live Learning

  • Real-time progress as Claude researches the company
  • Streaming status updates
  • Completion screen with training summary
  • Button: "Start Working with Your New Team Member →"

States: Step indicator (1/2/3), skip available on step 2, loading during research on step 3.

Main Chat Interface

Component: ChatInterface.jsx

Element Type Details
Message list Scrollable area User and assistant messages
Input textarea Multi-line text Auto-resize, Shift+Enter for newline
Send button Icon button Submits message via WebSocket
Attachment button Icon button File upload for context
Stop button Icon button Cancel active generation
Session history Sidebar panel Past conversations with search

Message rendering:

  • Markdown with react-markdown + remark-gfm
  • Code blocks with syntax highlighting (rehype-highlight)
  • Mermaid diagrams rendered inline
  • Tool calls displayed in collapsible ToolCallGroup sections
  • Emoji to Phosphor icon conversion

States:

  • Idle: Input enabled, no activity
  • Streaming: Response appearing token-by-token, stop button visible
  • Error: Error message displayed, retry option
  • Empty: Welcome message with suggested prompts

File Manager

Component: FileTree.jsx (~4000 lines)

Element Type Details
File tree Hierarchical list Expandable folders, file type icons
View toggle Button group Simple / Compact / Detailed views
Upload button Button Opens file upload dialog
Search Text input Filter files by name
Context menu Right-click menu Open, rename, move, delete, download
Preview panel Side panel InlinePreviewPanel for selected file

File operations:

  • Upload (drag-drop or button)
  • Download individual files
  • Move between folders/projects
  • Delete with confirmation modal
  • Create new folder

Viewers by file type:

  • Markdown: MarkdownPreview
  • Code: CodeEditor (CodeMirror)
  • PDF: PDFViewer
  • Images: ImageViewer
  • CSV: CSVViewer
  • Text: TextViewer

States:

  • Loading: Skeleton loader during file list fetch
  • Empty: "No files" message with upload CTA
  • Error: Error banner with retry
  • Delete confirmation: Modal with warning for system files

Knowledge Base

Component: CentralKnowledgeInfo.jsx + MarkdownPreview.jsx

Element Type Details
Doc tree Hierarchical list Browse knowledge base markdown files
Preview Rendered HTML Markdown preview with styling
Download Button group PDF, DOCX, Markdown download options
Search Text input Search across knowledge docs

Skills Panel

Component: SkillsPanel.jsx

Element Type Details
Skill list Card list Name, description, category, star indicator
Create button Button New skill creation
Search Text input Filter skills
Category tabs Tab bar Filter by skill category
Run button Button Execute skill immediately
Edit button Button Open in WorkflowEditor

Workflow Editor

Component: WorkflowEditor.jsx

Element Type Details
Canvas React Flow Visual node-edge graph
Code editor CodeMirror Raw markdown editing
Split view Toggle Canvas + code side by side
Inspector Side panel Step/skill properties editor
Toolbar Button bar Add step, zoom, fit, layout

Node types:

  • TriggerNode -- Manual/API/Scheduled trigger
  • StepNode -- Workflow step (colored by type)
  • SkillNode -- Skill reference
  • CodeNode -- Code block
  • ArtifactNode -- Output files
  • ErrorInfoNode -- Error conditions
  • SupportingFileNode -- Related files

Step type colors:

  • Transform: blue
  • Skill: purple
  • Tool: green
  • Decision: amber
  • Gate: red
  • Parallel/subagent_bundle: teal
  • End: gray

Schedules Panel

Component: SchedulesPanel.jsx

Element Type Details
Schedule list Table Name, cron expression, status, last run, next run
Create button Button New schedule dialog
Enable/disable toggle Switch Toggle schedule active state
Run now Button Execute immediately
Edit Button Edit cron expression and prompt
Delete Button Delete with confirmation

Meeting Panel

Component: CallBotPanel.jsx + MeetingTranscript.jsx

Element Type Details
Start button Button Begin meeting capture
Stop button Button End meeting capture
Status indicator Badge Active/idle/analyzing
Transcript Scrollable text Live transcript display
Analyze button Button Run AI analysis on transcript
Quick links Card list Saved meeting actions
Advisors Card list Available AI advisors

Git Panel

Component: GitPanel.jsx

Element Type Details
Status File list Modified, staged, untracked files
Diff viewer QuickDiff Side-by-side or unified diff
Commit form Text input + button Message input, commit button
Branch selector Dropdown Switch branches
Push/pull Buttons Sync with remote
History Commit list Recent commits with messages

Settings / Tools Panel

Component: ToolsPanel.jsx + ToolsSettings.jsx

Element Type Details
MCP services Card list Registered MCP integrations
Configure Button per service Open configuration modal
Status indicator Badge Connected/disconnected per service
Personas Card list Available AI personas
Guides Card list Active guides/context
Output styles Card list Response formatting options

Admin Pages

Component: Various under admin/

User Management

Element Type Details
User table Table Username, role, last login, actions
Create user Button + modal Username, password, admin flag
Edit user Modal Change role, reset password
Delete user Button Confirmation required
Welcome email Button Send onboarding email

AI Provider Configuration

Element Type Details
Provider cards ProviderCard Claude Direct, AWS Bedrock
Configure Modal API keys, region, model selection
Test Button Validate connection
Model selector Dropdown Available models
Context mode Toggle Standard vs 1M context

Analytics Dashboard

Component: ReportingPage.jsx

Element Type Details
Date range filter DateRangeFilter From/to date selection
User filter UserFilter Filter by user
Usage charts Recharts Token usage, session counts
Report sections ExpandableReportSection Collapsible metric groups
Pagination Pagination Page through results

Reusable Component Candidates

Component Used In Purpose
Toast / ToastContainer Global Notification system
ErrorBoundary App wrapper Error fallback UI
DarkModeToggle Header Theme switching
ProtectedRoute Router Auth guard wrapper
ui/badge, button, input Throughout Shadcn-style primitives
HistorySearchPalette Chat Cmd+K search dialog
DebugConsole Dev only Development debugging

Common States

All pages implement these states consistently:

State Pattern
Loading Spinner or skeleton loader
Empty Descriptive message + CTA button
Error Red banner with error message, retry button
Success Green toast notification
Confirmation Modal dialog for destructive actions