Project Filtering

​

Overview

​

How Project Filtering Works

1. Sessions — All session metadata including duration, messages, and tool counts
2. History — Prompt history entries
3. Tools — Tool usage statistics derived from filtered sessions

​

Using the Project Filter

​

Filter Location

{projects.length > 0 && (
  <Select value={selectedProject} onValueChange={setSelectedProject}>
    <SelectTrigger className="w-[200px]">
      <SelectValue placeholder="All Projects" />
    </SelectTrigger>
    <SelectContent>
      <SelectItem value="all">All Projects</SelectItem>
      {projects.map((p) => (
        <SelectItem key={p.value} value={p.value}>
          {p.label}
        </SelectItem>
      ))}
    </SelectContent>
  </Select>
)}

​

Available Options

• All Projects — Shows data across all your coding sessions
• Individual Projects — One option per unique project_path from your sessions

​

Project Extraction Logic

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]);

​

How Project Names are Displayed

1. Takes the full project_path (e.g., /Users/ishan/projects/my-app)
2. Removes trailing slashes
3. Splits by / separator
4. Extracts the last segment (my-app)
5. Falls back to full path if no segments exist
6. Sorts alphabetically by display name

​

What Gets Filtered

​

Sessions Table

const filteredSessions = useMemo(
  () =>
    selectedProject === "all"
      ? data.sessions
      : data.sessions.filter((s) => s.project_path === selectedProject),
  [data.sessions, selectedProject]
);

• Session duration and timestamps
• Message counts (user + assistant)
• Token usage (input + output)
• Tool call counts
• Git commits and pushes
• Code changes (lines added/removed, files modified)
• First prompt text

​

Prompt History

const filteredHistory = useMemo(
  () =>
    selectedProject === "all"
      ? data.history
      : data.history.filter((h) => h.project === selectedProject),
  [data.history, selectedProject]
);

• Prompt display text
• Timestamps
• Pasted contents
• Associated project

​

Tool Usage

// Each SessionMeta has:
tool_counts: Record<string, number>  // e.g. {"Read": 42, "Edit": 15, "Bash": 8}

• Read
• Edit
• Write
• Bash
• Glob
• Grep
• Task
• WebFetch
• And any other tools used during sessions

​

What’s NOT Filtered

​

Stats Overview Cards

<StatsOverview stats={data.stats} sessions={data.sessions} onNavigate={setActiveTab} />

• Total sessions
• Total messages
• Total tool calls
• Lines added/removed
• Files modified
• Average session duration
• Total cost (USD)

​

Activity Heatmap

<ActivityHeatmap stats={data.stats} />

​

Hour Chart

<HourChart stats={data.stats} />

​

Model Breakdown

<ModelBreakdown stats={data.stats} />

​

Daily Tokens Chart

<DailyTokensChart stats={data.stats} />

​

Filter State Management

const [selectedProject, setSelectedProject] = useState("all");

• Default value: "all"
• Persists during the session (not saved to localStorage)
• Resets to “all” when you refresh the page or switch profiles

​

Performance Considerations

​

Memoization

const filteredSessions = useMemo(
  () => /* filtering logic */,
  [data.sessions, selectedProject]
);

1. The data.sessions array changes (new data loaded)
2. The selectedProject value changes (user selects different project)

​

Filtering Complexity

• Sessions: O(n) where n = number of sessions
• History: O(n) where n = number of history entries
• Projects extraction: O(n) where n = number of sessions

​

Tab Navigation with Filtering

<TabsList className="grid w-full grid-cols-5">
  <TabsTrigger value="activity">Activity</TabsTrigger>
  <TabsTrigger value="sessions">Sessions</TabsTrigger>
  <TabsTrigger value="models">Models</TabsTrigger>
  <TabsTrigger value="tools">Tools</TabsTrigger>
  <TabsTrigger value="history">Prompts</TabsTrigger>
</TabsList>

​

Filtering by Tab

​

Matching Logic

data.sessions.filter((s) => s.project_path === selectedProject)

• Exact string match (case-sensitive)
• No fuzzy matching or partial matches
• Empty or null project_path values won’t match any project filter

​

Project Path Handling

​

From SessionMeta

interface SessionMeta {
  project_path: string;  // Absolute path to project directory
  // ... other fields
}

​

From HistoryEntry

interface HistoryEntry {
  project: string;  // Project path
  // ... other fields
}

​

Example Use Cases

​

Analyzing a Specific Project

1. Select your project from the dropdown
2. Go to Sessions tab to see all sessions for that project
3. Go to Tools tab to see which tools you used most
4. Go to Prompts tab to review your prompts for that codebase

​

Comparing Projects

1. Select “All Projects” and note tool usage patterns
2. Select “Project A” and check tool counts
3. Select “Project B” and compare

​

Finding Project-Specific Prompts

1. Select your project from the dropdown
2. Go to Prompts tab
3. Use the search bar to find specific prompts within that project

​

Next Steps