Feature Epic: Seamless Claude.ai Integration with Embedded Dashboard & On-Page Features

[jms830]

Vision

Transform Eidolon from a separate dashboard experience into a seamless, integrated enhancement of the Claude.ai interface itself. Users should be able to access all Eidolon features (workspace sync, search, tags, project management) without leaving Claude.ai.

Motivation

Current UX Flow:

1. User browses Claude.ai
2. Wants to sync/search/manage projects
3. Must click extension → open dashboard in new tab
4. Perform actions in separate interface
5. Return to Claude.ai

Desired UX Flow:

1. User browses Claude.ai with Eidolon features integrated directly into the page
2. Access workspace sync, search, tags, etc. without context switching
3. Optionally open full dashboard for advanced operations

Proposed Approaches

Option 1: Embedded Dashboard Sidebar

Add a toggleable sidebar on Claude.ai pages that embeds the full Eidolon dashboard.

Features:

• Floating toggle button (e.g., near user icon in bottom-left corner)
• Slide-out sidebar with embedded dashboard iframe or shadow DOM
• Full access to all Eidolon features without leaving Claude.ai
• Resizable/collapsible for different screen sizes
• Keyboard shortcut to toggle (e.g., Ctrl+Shift+E)

Technical Considerations:

• Use content script (claude.content.ts already exists) to inject sidebar
• Shadow DOM for style isolation
• Message passing to background script for API operations
• Consider performance impact of embedding full dashboard

UX Benefits:

• Zero context switching
• Can reference conversations while managing projects
• Quick access to sync status and workspace diff

Option 2: Enhanced Claude.ai Page with Feature Overlays

Add Eidolon features as native-looking UI overlays directly on Claude.ai pages.

Potential Feature Integrations:

Project Selector Enhancement:

• Add workspace sync status indicator next to project dropdown
• Quick "Sync Now" button inline with project selector
• Visual diff indicator ("5 files changed locally")

Conversation List Enhancements:

• Add tag badges to conversations
• Inline search/filter for conversations (beyond Claude's built-in search)
• Bulk actions (delete, tag, export) via checkbox selection

Chat Interface Additions:

• "Add to Project" button for code snippets in chat
• "Export Conversation" dropdown (Markdown, JSON, CSV)
• Workspace diff checker modal accessible from chat toolbar

Top Navigation Bar:

• "Eidolon Dashboard" button next to existing Claude.ai navigation
• Workspace sync status indicator (green checkmark, yellow pending, red conflict)
• Notification badge for sync conflicts

Technical Considerations:

• DOM injection and mutation observers to detect page changes
• CSS that matches Claude.ai design system (dark mode support)
• Event listeners for Claude.ai's dynamic content loading
• Conflict avoidance with Claude.ai's own UI updates

UX Benefits:

• Features feel like native Claude.ai functionality
• Minimal visual disruption
• Progressive disclosure (only show features when relevant)

Option 3: Simple Dashboard Button + Context Menu

Minimal integration approach focusing on discoverability.

Features:

• Add "Eidolon Dashboard" button above/near user icon (bottom-left corner)
• Enhanced right-click context menus on Claude.ai elements:
  • Right-click conversation → "Tag with Eidolon", "Export", "Add to Workspace"
  • Right-click project → "Sync Project", "View in Dashboard", "Diff Workspace"
  • Right-click code block → "Add to Project Knowledge"

Technical Considerations:

• Lightweight content script injection
• Standard browser context menus via browser.contextMenus API
• Minimal DOM manipulation

UX Benefits:

• Non-intrusive
• Familiar interaction patterns (context menus)
• Quick dashboard access when needed

Technical Implementation Details

Content Script Architecture

Current state:

• entrypoints/claude.content.ts already exists for Claude.ai integration
• Uses defineContentScript() with matches for *://claude.ai/*

Enhancements needed:

• Detect page type (chat, project, settings) to show relevant features
• Inject UI components using Shadow DOM for isolation
• Listen for Claude.ai route changes (SPA navigation)
• Coordinate with background script for API operations

UI Component Injection

Shadow DOM Approach:

const container = document.createElement('div');
container.id = 'eidolon-sidebar';
const shadow = container.attachShadow({ mode: 'open' });

// Inject styles and components into shadow root
shadow.innerHTML = `
  <style>
    /* Isolated styles that won't conflict with Claude.ai */
  </style>
  <div class="sidebar">
    <!-- Dashboard UI -->
  </div>
`;

document.body.appendChild(container);

Benefits:

• Complete style isolation
• No CSS conflicts with Claude.ai
• Can use existing dashboard components

State Synchronization

• Share state between dashboard tab, sidebar, and content script overlays
• Use browser.storage.onChanged listeners for real-time updates
• Optimistic UI updates with background sync

Design System Integration

• Match Claude.ai's color palette (purple gradients, dark mode)
• Use similar typography and spacing
• Animate transitions to feel native
• Respect user's theme preference (light/dark)

User Personas & Use Cases

Persona 1: Power User - Workspace Sync Focus

Goal: Keep local codebase synced with Claude.ai projects

Current Pain: Must open dashboard, check diff, initiate sync, return to chat

Ideal Experience:

• Sees sync status indicator in top-right of Claude.ai
• Clicks indicator → inline diff modal appears
• Reviews changes, clicks "Sync" → done without leaving page
• Gets notification when sync completes

Persona 2: Researcher - Conversation Management

Goal: Organize and export hundreds of research conversations

Current Pain: Manually opening dashboard to tag, search, export conversations

Ideal Experience:

• Tags conversations directly from conversation list via right-click
• Uses enhanced search (beyond Claude's native search) to filter by tag
• Bulk selects conversations and exports to Markdown in one click

Persona 3: Team Collaborator - Project Knowledge Sharing

Goal: Extract useful code/docs from chats to share in project knowledge

Current Pain: Copy-paste from chat → open dashboard → find project → paste content

Ideal Experience:

• Right-clicks code block in chat → "Add to Project Knowledge"
• Selects project from dropdown
• File automatically uploaded, sees confirmation toast

Phased Implementation

Phase 1: Dashboard Button (Quick Win)

• Add floating "Eidolon" button near user icon
• Opens dashboard in sidebar or new tab
• Keyboard shortcut support
• Effort: Small | Impact: Medium

Phase 2: Sync Status Indicator

• Visual indicator in top navigation showing workspace sync status
• Click to view diff inline
• Quick sync action button
• Effort: Medium | Impact: High (addresses Feature Request: Firefox Workspace Sync Support #8 workflow)

Phase 3: Enhanced Context Menus

• Right-click actions on conversations, projects, code blocks
• Tag management, export options, workspace operations
• Effort: Medium | Impact: Medium

Phase 4: Embedded Sidebar Dashboard

• Full dashboard accessible via sidebar
• All features available without leaving Claude.ai
• Resizable, collapsible, keyboard accessible
• Effort: Large | Impact: High

Phase 5: Native-Style Feature Overlays

• Deep integration with Claude.ai UI
• Tag badges, inline search, bulk actions
• Feels like first-party feature
• Effort: Large | Impact: Very High

Design Mockups (Future)

• Dashboard button placement mockup
• Sidebar layout mockup
• Sync status indicator states
• Inline diff modal design
• Context menu options

Success Metrics

• Reduced context switching: % decrease in dashboard tab opens
• Increased feature usage: % increase in sync operations, tagging, exports
• User satisfaction: Feedback on integration feeling "native"
• Performance: No noticeable impact on Claude.ai page load/interaction

Related Issues

• Feature Request: Firefox Workspace Sync Support #8 - Firefox Workspace Sync Limitations (affects sync indicator implementation)

Open Questions

1. Which approach resonates most with users? (Conduct user research/feedback)
2. Should sidebar be persistent across sessions? (Remember open/closed state)
3. How to handle Claude.ai UI changes? (Defensive coding, selectors strategy)
4. Should we match Claude.ai design 100% or maintain Eidolon branding?
5. Performance budget? (Max acceptable impact on page load time)

Technical Risks

• Claude.ai UI Changes: Their DOM structure may change, breaking our integrations
  • Mitigation: Use resilient selectors, version detection, graceful degradation
• Performance Impact: Injecting UI could slow down Claude.ai
  • Mitigation: Lazy load features, optimize bundle size, measure performance
• Style Conflicts: Our CSS could clash with Claude.ai
  • Mitigation: Shadow DOM isolation, scoped styles
• Session Management: Ensuring seamless authentication across integrated features
  • Mitigation: Reuse existing session validation, handle auth errors gracefully

Resources & References

• Chrome Extension Content Scripts
• Shadow DOM for Style Isolation
• WXT Content Script UI
• Example extensions with similar integration:
  • Notion Web Clipper (sidebar integration)
  • Grammarly (inline feature overlays)
  • 1Password (context menu + inline buttons)

Community Input Welcome

This is a large epic with multiple possible directions. Community feedback on:

• Which approach (sidebar vs overlays vs minimal) is most valuable?
• Which features would you use most on Claude.ai page?
• Any other integration ideas?

---

Labels: enhancement, epic, ux-improvement, integration
Milestone: Future (not assigned to specific version)
Priority: Medium (quality-of-life improvement, not blocking)