Skip to main content

UI Audit and Fixes - 2025-10-20

Issues Identified​

1. Profile Page Missing Billing Information ❌​

Current State: profile-page.tsx shows basic profile (name, email, bio) but missing billing fields

Backend Fields Available (models.rs:205-213):

  • company - Company name
  • phone - Phone number (E.164 format: +1234567890)
  • address_line1 - Street address
  • address_line2 - Apt/Suite
  • city - City
  • state - 2-letter US state code
  • postal_code - ZIP/Postal code
  • country - ISO 3166-1 alpha-2 (US, CA, GB)

Fix Required: Add "Billing Information" section to ProfilePage

2. SidePanel Shows Placeholders Instead of Functional UI ❌​

Current Issues:

llm Chat Tab (side-panel.tsx:161-171):

<Text fontSize="sm" color="gray.500">
  llm Chat integration will be connected here.
</Text>

❌ Not functional - just placeholder text

Sessions Tab (side-panel.tsx:174-186):

<Text fontSize="xs" color="gray.500">
  Manage multiple workspace sessions here.
  Each session provides an isolated development environment...
</Text>

❌ Not functional - just placeholder text ❌ Doesn't show actual sessions from sessionStore ❌ Doesn't integrate with SessionTabManager

Models Tab (side-panel.tsx:188-203):

<Text fontSize="xs" color="gray.500">
  Select and configure llm models:
</Text>
<VStack align="stretch" spacing={2} fontSize="xs">
  <Text>• Primary Model: LM Studio (local)</Text>
  <Text>• Secondary Model: Claude Code (API)</Text>
  ...
</VStack>

❌ Not functional - just placeholder text ❌ No actual model selection UI

Fix Required:

  • Create functional llm Chat component with file management, prompt window
  • Integrate Sessions tab with sessionStore to show/switch actual sessions
  • Create functional Models selector with actual LM Studio integration

3. No Navigation Back to IDE ❌​

Current State:

  • Profile page at /profile has no way to return to IDE at /ide
  • Documentation pages have no breadcrumbs or back button
  • Header has logo/brand but doesn't link back to IDE

Fix Required:

  • Add "Back to IDE" button in Header when on non-IDE pages
  • Or add breadcrumb navigation
  • Or make logo always navigate to /ide (or last active session)

4. Tab UI Not Clear Enough ⚠️​

User Feedback: "when we add a session by clicking on the '+' the interface is not really showing that we have a new tab"

Current Implementation (session-tab-manager.tsx:150-200):

  • Tabs DO render with session names
  • Tabs DO have borders and styling
  • BUT: May not be visually distinct enough

Fix Applied (commit debf72c):

  • ✅ Clear borders (2px blue for active, 1px gray for inactive)
  • ✅ Distinct backgrounds (white/dark for active, lighter gray for inactive)
  • ✅ Better spacing (4px padding, 150px max width)
  • ✅ Hover effects
  • ✅ Blue solid "+" button (was ghost, now more visible)

Needs Testing: Deploy Build #20 to verify tab visibility

Fixes Required​

Priority 1: Critical Functionality ⚠️​

  1. SidePanel - llm Chat Tab

    • Create llmchat-panel.tsx component
    • File upload/management interface
    • Prompt input with multi-line support
    • Chat history display
    • Model selection dropdown
    • Token usage display

  2. SidePanel - Sessions Tab

    • Show list of sessions from sessionStore.sessions
    • Highlight current session
    • Click to switch session (call setCurrentSession())
    • Integration with SessionTabManager

  3. SidePanel - Models Tab

    • List LM Studio models (from llmService.getModels())
    • Select primary/secondary models
    • Show model info (size, type, context length)
    • Mode selection (Single/Parallel/Sequential/Consensus)

Priority 2: Profile & Navigation​

  1. ProfilePage - Billing Section

    • Add "Billing Information" tab or accordion
    • Form fields for all 8 billing fields
    • Validation (E.164 phone, ISO country codes)
    • Save to backend via userService.updateProfile()

  2. Navigation

    • Add "Back to IDE" button in Header (when not on /ide route)
    • Or: Make logo navigate to /ide
    • Or: Add breadcrumbs component

Priority 3: Polish​

  1. WebSocket Connection Indicator

    • ✅ Already implemented (connection-status.tsx)
    • Shows in top-right of theia IDE
    • Green/Yellow/Red states

  2. Tab UI Improvements

    • ✅ Already implemented (session-tab-manager.tsx)
    • Needs deployment to verify

Implementation Plan​

Step 1: Create llm Chat Component​

// src/components/SidePanel/llmchat-panel.tsx
- Chat message list (scrollable)
- Prompt input (multi-line textarea)
- File attachment button
- Model selector dropdown
- Send button
- Clear conversation button

Step 2: Create Sessions List Component​

// src/components/SidePanel/SessionsPanel.tsx
- Map sessionStore.sessions to list items
- Show session.name, session.type
- Highlight currentSession
- Click handler: setCurrentSession(session)
- Create session button (calls createSession())

Step 3: Create Models Selector Component​

// src/components/SidePanel/ModelsPanel.tsx
- Fetch models from llmService.getModels()
- Display model list with radio buttons
- Show model metadata (size, context_length)
- Save selection to localStorage or sessionStore

Step 4: Add Billing to Profile​

// src/pages/profile-page.tsx
- Add <Accordion> or <Tabs> for "Billing Information"
- Form fields for company, phone, address, etc.
- Validation (phone: E.164, country: ISO alpha-2)
- Update userService.updateProfile() call

Step 5: Add Navigation​

// src/components/header.tsx
- Use useLocation() to detect current route
- Show "Back to IDE" button if not on /ide
- Or: Make logo onClick={() => navigate('/ide')}

Files to Modify​

  1. ✅ src/components/connection-status.tsx - DONE (commit debf72c)
  2. ✅ src/components/theia-embed.tsx - DONE (commit debf72c)
  3. ✅ src/components/session-tabs/session-tab-manager.tsx - DONE (commit debf72c)
  4. ❌ src/components/side-panel.tsx - NEEDS WORK
  5. ❌ src/components/SidePanel/llmchat-panel.tsx - NEW FILE
  6. ❌ src/components/SidePanel/SessionsPanel.tsx - NEW FILE
  7. ❌ src/components/SidePanel/ModelsPanel.tsx - NEW FILE
  8. ❌ src/pages/profile-page.tsx - NEEDS WORK
  9. ❌ src/components/header.tsx - NEEDS WORK

Testing Checklist​

After deployment:

  • Profile page shows billing fields (company, phone, address, etc.)
  • Billing fields save correctly to backend
  • llm Chat tab shows functional chat interface
  • Sessions tab shows list of actual sessions
  • Clicking session in side panel switches main IDE view
  • Models tab shows LM Studio models
  • Model selection persists across page reloads
  • "Back to IDE" navigation works from Profile/Docs pages
  • WebSocket connection indicator shows green when connected
  • Session tabs are visually distinct (blue border for active)
  • Clicking "+" creates new tab with clear visual indication

Status: Document created 2025-10-20 Next: Implement llmChatPanel, SessionsPanel, ModelsPanel