# Information Architecture — SOPHIAClaw **Version:** 1.0 **Last Updated:** 2026-02-24 **Owner:** CTO, Thalamus AI **Status:** Internal Validation --- ## Architecture Overview The SOPHIAClaw information architecture defines how users navigate through the web dashboard and how information is organized for optimal discoverability and task completion. ### Design Principles 1. **Progressive Disclosure:** Show essential information first, details on demand 2. **Task-Centepurple:** Organize around user goals, not system functions 3. **Consistency:** Same patterns across all sections 4. **Purple Theme Cohesion:** Visual hierarchy supported by the purple gradient palette --- ## Site Structure ``` dashboard.sophiaclaw.ai/ │ ├── 📊 Overview (Landing Page) │ ├── Gateway Status Card │ ├── Quick Stats Row │ ├── Active Channels │ ├── Recent Activity │ └── Cost Summary │ ├── 💬 Conversations │ ├── Conversation List │ ├── Search & Filters │ ├── Conversation Detail View │ └── Export Options │ ├── 🔧 Channels │ ├── Channel Overview │ ├── Telegram Settings │ ├── Discord Settings │ ├── Slack Settings │ └── Add New Channel │ ├── 🛠️ Tools │ ├── Tool Catalog │ ├── Tool Usage Analytics │ ├── Custom Tools │ └── Tool Permissions │ ├── 🧠 Memory & Context │ ├── Active Contexts │ ├── Memory Browser │ ├── Context Settings │ └── Memory Cleanup │ ├── 💰 Cost Tracking │ ├── Cost Dashboard │ ├── Usage Breakdown │ ├── Budget Settings │ └── Billing History │ ├── ⚙️ Settings │ ├── General Settings │ ├── User Management │ ├── Security & Privacy │ ├── Integrations │ ├── API Keys │ └── Notifications │ └── ❓ Help & Support ├── Documentation ├── Keyboard Shortcuts ├── Status Page └── Contact Support ``` --- ## Navigation Structure ### Primary Navigation (Left Sidebar) ``` ┌─────────────────────────────┐ │ 🟣 [Logo] SOPHIAClaw │ ├─────────────────────────────┤ │ │ │ 📊 Overview │ ← Default landing │ │ │ 💬 Conversations │ │ │ │ 🔧 Channels │ │ │ │ 🛠️ Tools │ │ │ │ 🧠 Memory & Context │ │ │ │ 💰 Cost Tracking │ │ │ ├─────────────────────────────┤ │ ⚙️ Settings │ │ │ │ ❓ Help │ │ │ ├─────────────────────────────┤ │ [Avatar] User Profile │ └─────────────────────────────┘ ``` ### Navigation States | State | Visual Treatment | Behavior | | -------------- | ------------------ | ------------------------------ | | **Default** | Gray icon + text | Hover: Light purple background | | **Active** | Purple icon + text | Purple left border accent | | **Expanded** | Down chevron | Shows sub-menu items | | **Collapsed** | Right chevron | Hides sub-menu items | | **New/Unread** | Purple dot badge | Disappears on visit | --- ## Page Templates ### Template 1: Dashboard Overview **Used For:** Overview, Cost Dashboard ``` ┌─────────────────────────────────────────────────────────────────┐ │ Header: Page Title + Actions │ │ [Breadcrumb] [Primary Button] [Secondary] │ ├─────────────────────────────────────────────────────────────────┤ │ │ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │ │ Stat 1 │ │ Stat 2 │ │ Stat 3 │ │ Stat 4 │ │ │ │ Value │ │ Value │ │ Value │ │ Value │ │ │ └──────────┘ └──────────┘ └──────────┘ └──────────┘ │ │ │ │ ┌──────────────────────────┐ ┌──────────────────────────┐ │ │ │ │ │ │ │ │ │ Main Content Area │ │ Secondary/Related │ │ │ │ (Chart/Table/Form) │ │ (Summary/Details) │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ └──────────────────────────┘ └──────────────────────────┘ │ │ │ │ ┌─────────────────────────────────────────────────────────┐ │ │ │ Full-Width Section │ │ │ │ (Timeline/Activity/Additional Data) │ │ │ └─────────────────────────────────────────────────────────┘ │ │ │ └─────────────────────────────────────────────────────────────────┘ ``` ### Template 2: List View **Used For:** Conversations, Channels, Tools ``` ┌─────────────────────────────────────────────────────────────────┐ │ Header: Page Title + Actions │ │ [Breadcrumb] [Add New] [Filters] [Export] │ ├─────────────────────────────────────────────────────────────────┤ │ │ │ ┌─────────────────────────────────────────────────────────┐ │ │ │ 🔍 Search... [Filters ▼] [Sort ▼] │ │ │ └─────────────────────────────────────────────────────────┘ │ │ │ │ ┌─────────────────────────────────────────────────────────┐ │ │ │ ☑️ │ Item 1 │ → │ │ │ │ ├────┼───────────────────────────────────────────────────┤ │ │ │ ☑️ │ Item 2 │ → │ │ │ │ ├────┼───────────────────────────────────────────────────┤ │ │ │ ☑️ │ Item 3 │ → │ │ │ │ └─────────────────────────────────────────────────────────┘ │ │ │ │ ← 1 2 3 ... 10 → Showing 1-10 of 247 │ │ │ └─────────────────────────────────────────────────────────────────┘ ``` ### Template 3: Detail View **Used For:** Conversation Detail, Channel Settings ``` ┌─────────────────────────────────────────────────────────────────┐ │ Header: Item Title + Actions │ │ [← Back] Title/Name [Edit] [Delete] [More ▼] │ ├─────────────────────────────────────────────────────────────────┤ │ │ │ ┌─────────────────────────────────────────────────────────┐ │ │ │ Summary Card │ │ │ │ Key info at a glance (status, dates, metadata) │ │ │ └─────────────────────────────────────────────────────────┘ │ │ │ │ ┌─────────────────────────────────────────────────────────┐ │ │ │ Tab Navigation: [Overview] [Details] [Settings] [Logs] │ │ │ ├─────────────────────────────────────────────────────────┤ │ │ │ │ │ │ │ Active Tab Content │ │ │ │ │ │ │ │ [Content specific to selected tab] │ │ │ │ │ │ │ └─────────────────────────────────────────────────────────┘ │ │ │ └─────────────────────────────────────────────────────────────────┘ ``` ### Template 4: Settings Form **Used For:** All Settings Pages ``` ┌─────────────────────────────────────────────────────────────────┐ │ Header: Settings Title │ │ [Breadcrumb] [Save] │ ├─────────────────────────────────────────────────────────────────┤ │ │ │ ┌─────────────────┐ ┌──────────────────────────────────────┐ │ │ │ │ │ │ │ │ │ Settings │ │ Section 1 │ │ │ │ Navigation │ │ ┌────────────────────────────────┐ │ │ │ │ │ │ │ Setting 1 [Toggle] │ │ │ │ │ • General │ │ ├────────────────────────────────┤ │ │ │ │ • Users │ │ │ Setting 2 [Input ] │ │ │ │ │ • Security │ │ ├────────────────────────────────┤ │ │ │ │ • Integrations │ │ │ Setting 3 [Dropdown▼] │ │ │ │ │ • API Keys │ │ └────────────────────────────────┘ │ │ │ │ • Notif. │ │ │ │ │ │ │ │ Section 2 │ │ │ │ │ │ ┌────────────────────────────────┐ │ │ │ │ │ │ │ [Description text here...] │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ [ Text Area ] │ │ │ │ │ │ │ └────────────────────────────────┘ │ │ │ │ │ │ │ │ │ └─────────────────┘ └──────────────────────────────────────┘ │ │ │ │ [Cancel] [Save Changes]│ └─────────────────────────────────────────────────────────────────┘ ``` --- ## Content Hierarchy ### Level 1: Gateway Status (Always Visible) **Location:** Top bar (sticky) ``` ┌─────────────────────────────────────────────────────────────────┐ │ 🟢 Gateway Online │ 12 Active Conversations │ [User Menu ▼]│ └─────────────────────────────────────────────────────────────────┘ ``` **Elements:** - Gateway status indicator (🟢 Online / 🟡 Degraded / 🔴 Offline) - Active conversation count - User profile menu ### Level 2: Primary Navigation **Location:** Left sidebar Main sections organized by user workflow: 1. **Overview** — Starting point, status check 2. **Conversations** — Primary user activity 3. **Channels** — Configuration and connections 4. **Tools** — Capabilities and permissions 5. **Memory & Context** — Advanced features 6. **Cost Tracking** — Financial oversight ### Level 3: Secondary Navigation **Location:** Sub-menus, tabs, or contextual menus Examples: - Channels → Telegram / Discord / Slack / Add New - Settings → General / Users / Security / Integrations - Conversation Detail → Overview / Transcript / Actions / Export ### Level 4: Content Details **Location:** Main content area Granular information and interactive elements specific to the task. --- ## Key Screens Detail ### Screen 1: Overview Dashboard **URL:** `/overview` **Primary Action:** View gateway health and quick stats **Secondary Actions:** Navigate to detailed views #### Layout ``` ┌─────────────────────────────────────────────────────────────────┐ │ 📊 Overview [Refresh] [Settings] │ ├─────────────────────────────────────────────────────────────────┤ │ │ │ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │ │ │ Gateway │ │ Conversations│ │ Cost Today │ │ │ │ 🟢 Online │ │ 47 Active │ │ $23.50 │ │ │ │ │ │ │ │ │ │ │ │ Uptime: 99.9%│ │ +12% vs yest.│ │ On budget │ │ │ └──────────────┘ └──────────────┘ └──────────────┘ │ │ │ │ ┌──────────────────────────┐ ┌──────────────────────────┐ │ │ │ Active Channels │ │ Recent Activity │ │ │ │ │ │ │ │ │ │ 🟣 Telegram ●●●●●● │ │ • New message - Telegram │ │ │ │ ⚫ Discord ○○○○○○ │ │ • File analyzed (PDF) │ │ │ │ ⚫ Slack ○○○○○○ │ │ • Web search completed │ │ │ │ ⚫ Signal ○○○○○○ │ │ • User joined │ │ │ │ │ │ │ │ │ │ [Manage Channels →] │ │ [View All Activity →] │ │ │ └──────────────────────────┘ └──────────────────────────┘ │ │ │ │ ┌─────────────────────────────────────────────────────────┐ │ │ │ Cost Trend (7 Days) │ │ │ │ [Line Chart: Purple gradient showing daily spend] │ │ │ └─────────────────────────────────────────────────────────┘ │ │ │ └─────────────────────────────────────────────────────────────────┘ ``` #### Components | Component | Type | Interaction | | --------------- | ----------- | ----------------------------------- | | Gateway Status | Status Card | Click → System Health page | | Conversations | Metric Card | Click → Conversations list | | Cost Today | Metric Card | Click → Cost Tracking | | Active Channels | List Card | Click individual → Channel settings | | Recent Activity | Timeline | Click item → Detail view | | Cost Trend | Line Chart | Hover → Tooltip with exact value | --- ### Screen 2: Conversations List **URL:** `/conversations` **Primary Action:** Browse and search conversation history **Secondary Actions:** Filter, export, view details #### Layout ``` ┌─────────────────────────────────────────────────────────────────┐ │ 💬 Conversations [Export] [Filters ▼] [Search 🔍] │ ├─────────────────────────────────────────────────────────────────┤ │ │ │ Filter: [All Channels ▼] [All Users ▼] [Last 7 days ▼] │ │ │ │ ┌─────────────────────────────────────────────────────────┐ │ │ │ ☑️ │ 👤 Alex Chen │ Telegram │ 2 min ago │ 12 msgs│ → │ │ │ │ │ "Can you analyze these logs?" │ │ │ │ ├────┼───────────────────┼──────────┼───────────┼────────┤ │ │ │ ☑️ │ 👤 Sarah Kim │ Telegram │ 1 hr ago │ 8 msgs │ → │ │ │ │ │ "Research on AI trends..." │ │ │ │ ├────┼───────────────────┼──────────┼───────────┼────────┤ │ │ │ ☑️ │ 👤 Jordan Lee │ Telegram │ 3 hrs ago │ 24 msgs│ → │ │ │ │ │ "Daily standup workflow setup" │ │ │ │ └─────────────────────────────────────────────────────────┘ │ │ │ │ ← 1 2 3 → 247 total conversations │ │ │ └─────────────────────────────────────────────────────────────────┘ ``` --- ### Screen 3: Channel Management **URL:** `/channels` **Primary Action:** Connect and manage messaging channels **Secondary Actions:** Configure settings, test connections #### Layout ``` ┌─────────────────────────────────────────────────────────────────┐ │ 🔧 Channels [+ Add Channel] │ ├─────────────────────────────────────────────────────────────────┤ │ │ │ ┌─────────────────────────────────────────────────────────┐ │ │ │ 🟣 Telegram │ │ │ │ │ │ │ │ Status: 🟢 Connected │ │ │ │ Bot: @ThalamusLabzSophiaClawBot │ │ │ │ Users: 12 active │ │ │ │ Messages (24h): 156 │ │ │ │ │ │ │ │ [Settings] [Test] [Disconnect] │ │ │ └─────────────────────────────────────────────────────────┘ │ │ │ │ ┌─────────────────────────────────────────────────────────┐ │ │ │ ⚫ Discord │ │ │ │ │ │ │ │ Status: ⚪ Not Connected │ │ │ │ │ │ │ │ [Connect Now] │ │ │ └─────────────────────────────────────────────────────────┘ │ │ │ │ ┌─────────────────────────────────────────────────────────┐ │ │ │ ⚫ Slack │ │ │ │ │ │ │ │ Status: ⚪ Not Connected │ │ │ │ │ │ │ │ [Connect Now] │ │ │ └─────────────────────────────────────────────────────────┘ │ │ │ └─────────────────────────────────────────────────────────────────┘ ``` --- ### Screen 4: Cost Tracking **URL:** `/costs` **Primary Action:** Monitor and manage AI usage costs **Secondary Actions:** Set budgets, view breakdowns, export reports #### Layout ``` ┌─────────────────────────────────────────────────────────────────┐ │ 💰 Cost Tracking [Export] [Set Budget] │ ├─────────────────────────────────────────────────────────────────┤ │ │ │ Current Period: February 2026 │ │ │ │ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │ │ │ Budget │ │ Spent │ │ Remaining │ │ │ │ $500.00 │ │ $340.50 │ │ $159.50 │ │ │ │ │ │ 68% used │ │ 32% left │ │ │ └──────────────┘ └──────────────┘ └──────────────┘ │ │ │ │ ┌─────────────────────────────────────────────────────────┐ │ │ │ Spend by Category │ │ │ │ [Donut Chart: LLM | Tools | Storage | Other] │ │ │ └─────────────────────────────────────────────────────────┘ │ │ │ │ ┌─────────────────────────────────────────────────────────┐ │ │ │ Daily Spend Trend │ │ │ │ [Bar Chart: Daily spend with purple gradient fill] │ │ │ └─────────────────────────────────────────────────────────┘ │ │ │ │ Top Costs This Month: │ │ 1. LLM API Calls (GPT-4) $180.00 │ │ 2. Tool Execution (Compute) $95.50 │ │ 3. File Storage $45.00 │ │ 4. Web Search API $20.00 │ │ │ └─────────────────────────────────────────────────────────────────┘ ``` --- ## URL Structure | Page | URL | Description | | ------------------- | ------------------------ | ----------------------------- | | Overview | `/overview` | Dashboard landing page | | Conversations | `/conversations` | List all conversations | | Conversation Detail | `/conversations/:id` | Single conversation view | | Channels | `/channels` | Channel management | | Channel Settings | `/channels/:channelId` | Specific channel config | | Tools | `/tools` | Tool catalog and usage | | Tool Detail | `/tools/:toolId` | Individual tool settings | | Memory | `/memory` | Context and memory management | | Costs | `/costs` | Cost tracking dashboard | | Settings | `/settings` | General settings | | User Settings | `/settings/users` | User management | | Security | `/settings/security` | Security configuration | | Integrations | `/settings/integrations` | External integrations | | API Keys | `/settings/api-keys` | API key management | | Help | `/help` | Documentation and support | --- ## Responsive Behavior ### Desktop (> 1200px) - Full sidebar visible - Multi-column layouts - All features accessible ### Tablet (768px - 1199px) - Collapsible sidebar - Two-column layouts where appropriate - Touch-optimized interactions ### Mobile (< 768px) - Bottom navigation bar - Single-column layouts - Swipe gestures for common actions - Modal sheets for detail views --- ## Search & Discovery ### Global Search **Location:** Top bar (accessible from any page) **Scope:** Conversations, settings, documentation **Behavior:** Real-time suggestions as you type ### In-Page Search - Conversations: Search message content - Settings: Search setting names and descriptions - Tools: Search tool names and capabilities ### Filter Patterns - Date ranges (preset + custom) - Channel selection - User selection - Cost ranges - Status filters --- ## Accessibility ### Keyboard Navigation - `Tab` / `Shift+Tab`: Navigate interactive elements - `Enter` / `Space`: Activate buttons and links - `Esc`: Close modals and dropdowns - `?`: Show keyboard shortcuts help - `/`: Focus global search ### Screen Reader Support - ARIA labels on all interactive elements - Skip navigation link - Semantic HTML structure - Status announcements for dynamic content ### Visual Accessibility - Color contrast ratio: 4.5:1 minimum - Focus indicators visible - Reduced motion support - Scalable text (up to 200%) --- ## Changelog | Version | Date | Changes | Author | | ------- | ---------- | ----------------------------------------- | ------ | | 1.0 | 2026-02-24 | Initial information architecture creation | CTO |