# 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 |