Multi-Profile Support

​

Profile System

​

Profile Interface

interface Profile {
  id: string;
  name: string;
  data: DashboardData;
}

• id: Unique identifier for the profile
• name: Display name shown in the UI
• data: Complete analytics data for that profile

​

Dashboard Props

export function Dashboard({
  data,
  profiles,
  activeProfileId,
  onSwitchProfile,
  onAddProfile,
}: {
  data: DashboardData;
  profiles?: Profile[];
  activeProfileId?: string;
  onSwitchProfile?: (id: string) => void;
  onAddProfile?: () => void;
}) {
  // ...
}

​

Profile Switcher

​

Display Condition

const showProfileSwitcher = profiles && profiles.length > 1;

​

Implementation

{showProfileSwitcher && (
  <Select value={activeProfileId} onValueChange={onSwitchProfile}>
    <SelectTrigger className="w-[180px]">
      <SelectValue placeholder="Profile" />
    </SelectTrigger>
    <SelectContent>
      {profiles.map((p) => (
        <SelectItem key={p.id} value={p.id}>
          {p.name}
        </SelectItem>
      ))}
    </SelectContent>
  </Select>
)}

• 180px width for adequate label space
• Dropdown with all available profiles
• Controlled component (value managed by parent)
• Calls onSwitchProfile callback on selection

​

Add Profile Button

​

Display Condition

1. onAddProfile callback is provided
2. At least one profile exists

{onAddProfile && profiles && profiles.length > 0 && (
  <button
    onClick={onAddProfile}
    className="rounded-lg bg-[#1a1a1a] border border-white/10 px-3 py-2 text-xs text-gray-400 hover:text-white hover:bg-[#2a2a2a] transition-colors"
  >
    + Profile
  </button>
)}

• Dark background with subtle border
• Small text (xs)
• Hover effects for better UX
• Plus icon prefix

​

Dashboard Data Structure

export interface DashboardData {
  stats: StatsCache | null;
  sessions: SessionMeta[];
  history: HistoryEntry[];
  memories: ProjectMemory[];
  account?: AccountInfo;
  exportedAt?: string;
}

• stats: Aggregated statistics and charts data
• sessions: All session metadata
• history: Complete prompt history
• memories: Project-specific memory files
• account: User/organization identifiers
• exportedAt: Timestamp of data export

​

Use Cases

​

Personal vs. Work

• Personal coding projects
• Work/enterprise account
• Side projects or consulting work

• Which environment you’re more active in
• Different tool usage patterns
• Model preferences across contexts

​

Team Comparison

• Load multiple team member profiles
• Compare coding patterns
• Identify best practices
• Understand tool adoption

​

Before/After Analysis

• Different time periods
• Before and after learning new tools
• A/B testing prompt strategies

​

Multi-Organization

• Track activity per client
• Compare project complexity
• Analyze time distribution

​

Profile Management

​

Switching Profiles

1. Parent updates activeProfileId
2. Parent passes new data prop
3. Dashboard re-renders with new profile’s data
4. All components update automatically

​

Adding Profiles

1. Opens a file picker or input dialog
2. Loads data from selected source
3. Adds to profiles array
4. Switches to new profile

​

Header Layout

<div className="flex items-center gap-3">
  {projects.length > 0 && (
    <Select value={selectedProject} onValueChange={setSelectedProject}>
      {/* Project selector */}
    </Select>
  )}

  {showProfileSwitcher && (
    <Select value={activeProfileId} onValueChange={onSwitchProfile}>
      {/* Profile selector */}
    </Select>
  )}

  {onAddProfile && profiles && profiles.length > 0 && (
    <button onClick={onAddProfile}>
      {/* Add profile button */}
    </button>
  )}
</div>

• Horizontal flex layout
• 12px gap between elements
• Right-aligned in header
• Responsive on mobile

​

Account Information

​

Account Info Structure

export interface AccountInfo {
  accountUUID?: string;
  organizationUUID?: string;
  appVersion?: string;
}

• Distinguish between different accounts
• Track which app version generated data
• Organize profiles by organization

​

Project Filtering Across Profiles

const projects = useMemo(() => {
  const map = new Map<string, string>();
  for (const s of data.sessions) {
    if (s.project_path && !map.has(s.project_path)) {
      const segments = s.project_path.replace(/\/$/, "").split("/");
      map.set(s.project_path, segments[segments.length - 1] || s.project_path);
    }
  }
  return Array.from(map.entries())
    .sort((a, b) => a[1].localeCompare(b[1]))
    .map(([value, label]) => ({ value, label }));
}, [data.sessions]);

• Project list updates to reflect new profile’s projects
• Selected project resets to “All Projects”
• Filtered data reflects new profile + project combination

​

Export and Import

​

Exporting

export interface DashboardData {
  // ... data fields
  exportedAt?: string;
}

• Version control
• Data freshness validation
• Historical analysis

​

Data Portability

• Saving snapshots of analytics
• Sharing anonymized data
• Backup and archival
• Cross-machine comparison

​

Performance Considerations

​

Lazy Loading

• Other profiles remain in memory but not in DOM
• Switching is instant (no re-fetch needed)
• Component state is preserved per profile

​

Memory Management

• Consider loading profiles on-demand
• Cache only recently accessed profiles
• Provide profile unload functionality

​

Related Features

• Overview - All features work per-profile
• Session Explorer - Compare session patterns across profiles
• Activity Tracking - See activity differences between profiles
• Cost Tracking - Compare costs across different accounts