context-mode 1.0.80 → 1.0.82

package/insight/src/routes/knowledge.tsx

@@ -0,0 +1,221 @@
+import { createFileRoute, Link } from "@tanstack/react-router";
+import { useEffect, useState } from "react";
+import { api, type ContentDB } from "@/lib/api";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "@/components/ui/tooltip";
+import { timeAgo, dateGroup, parseSourceLabel } from "@/components/analytics";
+import { Database, Layers, Clock, Trash2, ChevronRight } from "lucide-react";
+
+export const Route = createFileRoute("/knowledge")({ component: KnowledgeBase });
+
+interface GroupedSources {
+  label: string;
+  sources: { source: ContentDB["sources"][0]; dbHash: string }[];
+  totalChunks: number;
+}
+
+function KnowledgeBase() {
+  const [dbs, setDbs] = useState<ContentDB[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => { api.content().then(d => { setDbs(d); setLoading(false); }); }, []);
+
+  const handleDelete = async (e: React.MouseEvent, dbHash: string, sourceId: number) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (!confirm("Delete this source and all its chunks?")) return;
+    await api.deleteSource(dbHash, sourceId);
+    api.content().then(setDbs);
+  };
+
+  if (loading) return <p className="text-muted-foreground animate-pulse">Loading knowledge base...</p>;
+
+  const nonEmpty = dbs.filter(db => db.sourceCount > 0);
+
+  // Compute KPI values
+  const totalSources = nonEmpty.reduce((a, db) => a + db.sourceCount, 0);
+  const totalChunks = nonEmpty.reduce((a, db) => a + db.chunkCount, 0);
+
+  // Find freshest indexed_at across all sources
+  let freshestDate: string | null = null;
+  for (const db of nonEmpty) {
+    for (const s of db.sources) {
+      if (s.indexedAt && (!freshestDate || s.indexedAt > freshestDate)) {
+        freshestDate = s.indexedAt;
+      }
+    }
+  }
+
+  // Flatten all sources with their dbHash, then group by date
+  const allSources: { source: ContentDB["sources"][0]; dbHash: string }[] = [];
+  for (const db of nonEmpty) {
+    for (const s of db.sources) {
+      allSources.push({ source: s, dbHash: db.hash });
+    }
+  }
+  // Sort by indexedAt descending
+  allSources.sort((a, b) => (b.source.indexedAt || "").localeCompare(a.source.indexedAt || ""));
+
+  // Group by date
+  const groupOrder = ["Today", "Yesterday", "This Week", "Older"];
+  const groupMap = new Map<string, GroupedSources>();
+  for (const g of groupOrder) groupMap.set(g, { label: g, sources: [], totalChunks: 0 });
+
+  for (const item of allSources) {
+    const g = dateGroup(item.source.indexedAt);
+    const group = groupMap.get(g)!;
+    group.sources.push(item);
+    group.totalChunks += item.source.chunks;
+  }
+
+  const groups = groupOrder.map(g => groupMap.get(g)!).filter(g => g.sources.length > 0);
+
+  if (nonEmpty.length === 0) {
+    return (
+      <div className="space-y-6">
+        <div>
+          <h2 className="text-2xl font-semibold">Knowledge Base</h2>
+          <p className="text-sm text-muted-foreground mt-1">No indexed content yet</p>
+        </div>
+        <Card>
+          <CardContent className="py-12 text-center text-muted-foreground">
+            Use <code className="text-xs bg-secondary px-1.5 py-0.5 rounded">ctx_index</code> or <code className="text-xs bg-secondary px-1.5 py-0.5 rounded">ctx_fetch_and_index</code> to add content.
+          </CardContent>
+        </Card>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h2 className="text-2xl font-semibold">Knowledge Base</h2>
+        <p className="text-sm text-muted-foreground mt-1">
+          {nonEmpty.length} database{nonEmpty.length > 1 ? "s" : ""} with indexed content
+        </p>
+      </div>
+
+      {/* KPI Strip */}
+      <div className="grid grid-cols-3 gap-3">
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between pb-2">
+            <CardTitle className="text-[10px] font-medium text-muted-foreground uppercase tracking-wider">Sources</CardTitle>
+            <Database className="h-4 w-4 text-blue-500" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold tabular-nums">{totalSources}</div>
+            <p className="text-[11px] text-muted-foreground mt-0.5">across {nonEmpty.length} db{nonEmpty.length > 1 ? "s" : ""}</p>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between pb-2">
+            <CardTitle className="text-[10px] font-medium text-muted-foreground uppercase tracking-wider">Chunks</CardTitle>
+            <Layers className="h-4 w-4 text-purple-500" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold tabular-nums">{totalChunks}</div>
+            <p className="text-[11px] text-muted-foreground mt-0.5">{totalSources > 0 ? `~${Math.round(totalChunks / totalSources)} per source` : "no sources"}</p>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between pb-2">
+            <CardTitle className="text-[10px] font-medium text-muted-foreground uppercase tracking-wider">Freshness</CardTitle>
+            <Clock className="h-4 w-4 text-emerald-500" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold tabular-nums">{timeAgo(freshestDate)}</div>
+            <p className="text-[11px] text-muted-foreground mt-0.5">last indexed</p>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Source groups by date */}
+      {groups.map(group => (
+        <div key={group.label}>
+          <div className="flex items-center gap-3 mb-3">
+            <h3 className="text-sm font-semibold uppercase tracking-wide text-muted-foreground">{group.label}</h3>
+            <Badge variant="secondary" className="text-[10px]">{group.sources.length} source{group.sources.length > 1 ? "s" : ""}</Badge>
+            <Badge variant="outline" className="text-[10px]">{group.totalChunks} chunks</Badge>
+          </div>
+          <div className="grid gap-2">
+            {group.sources.map(({ source: s, dbHash }) => {
+              const labels = parseSourceLabel(s.label);
+              return (
+                <Link
+                  key={`${dbHash}-${s.id}`}
+                  to="/knowledge/$dbHash/$sourceId"
+                  params={{ dbHash, sourceId: String(s.id) }}
+                  className="block group"
+                >
+                  <Card className="transition-colors hover:border-primary/30">
+                    <CardContent className="py-3 px-4">
+                      <div className="flex items-center gap-3">
+                        {/* Source labels as badges */}
+                        <div className="flex-1 min-w-0">
+                          <div className="flex flex-wrap gap-1.5 mb-1">
+                            {labels.map((lbl, i) => (
+                              <Badge key={i} variant="secondary" className="text-[10px] font-mono max-w-[200px] truncate">
+                                {lbl}
+                              </Badge>
+                            ))}
+                            {parseSourceLabel(s.label).length < s.label.split(",").length && (
+                              <Badge variant="outline" className="text-[10px] text-muted-foreground">
+                                +{s.label.split(",").length - 3} more
+                              </Badge>
+                            )}
+                          </div>
+                          <TooltipProvider>
+                            <Tooltip>
+                              <TooltipTrigger>
+                                <span className="text-[10px] text-muted-foreground font-mono block truncate max-w-[400px] text-left">
+                                  {s.label}
+                                </span>
+                              </TooltipTrigger>
+                              <TooltipContent side="bottom" className="max-w-lg">
+                                <span className="font-mono text-xs break-all">{s.label}</span>
+                              </TooltipContent>
+                            </Tooltip>
+                          </TooltipProvider>
+                        </div>
+
+                        {/* Chunk counts */}
+                        <div className="flex items-center gap-2 shrink-0">
+                          <Badge variant="secondary" className="text-[10px] tabular-nums">
+                            {s.chunks} chunk{s.chunks !== 1 ? "s" : ""}
+                          </Badge>
+                          {s.codeChunks > 0 && (
+                            <Badge variant="outline" className="text-[10px] tabular-nums text-cyan-500 border-cyan-500/30">
+                              {s.codeChunks} code
+                            </Badge>
+                          )}
+                        </div>
+
+                        {/* Time ago */}
+                        <span className="text-[10px] text-muted-foreground tabular-nums shrink-0 min-w-[50px] text-right">
+                          {timeAgo(s.indexedAt)}
+                        </span>
+
+                        {/* Delete button */}
+                        <Button
+                          variant="ghost" size="icon"
+                          className="h-7 w-7 text-muted-foreground hover:text-destructive opacity-0 group-hover:opacity-100 transition-opacity shrink-0"
+                          onClick={(e) => handleDelete(e, dbHash, s.id)}
+                        >
+                          <Trash2 className="h-3.5 w-3.5" />
+                        </Button>
+
+                        <ChevronRight className="h-4 w-4 text-muted-foreground/40 shrink-0" />
+                      </div>
+                    </CardContent>
+                  </Card>
+                </Link>
+              );
+            })}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}

package/insight/src/routes/knowledge_.$dbHash.$sourceId.tsx

@@ -0,0 +1,137 @@
+import { createFileRoute, Link } from "@tanstack/react-router";
+import { useEffect, useState } from "react";
+import { api, type Chunk } from "@/lib/api";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
+import { RatioBar, COLORS } from "@/components/analytics";
+import { ArrowLeft, ChevronDown, Layers, Code, FileText } from "lucide-react";
+
+export const Route = createFileRoute("/knowledge_/$dbHash/$sourceId")({ component: ChunkView });
+
+function ChunkView() {
+  const { dbHash, sourceId } = Route.useParams();
+  const [chunks, setChunks] = useState<Chunk[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    api.chunks(dbHash, Number(sourceId)).then(c => { setChunks(c); setLoading(false); });
+  }, [dbHash, sourceId]);
+
+  if (loading) return <p className="text-muted-foreground animate-pulse">Loading chunks...</p>;
+
+  const sourceLabel = chunks[0]?.label || dbHash;
+
+  // Compute stats
+  const totalChunks = chunks.length;
+  const codeChunks = chunks.filter(c => c.content_type === "code").length;
+  const textChunks = totalChunks - codeChunks;
+
+  // Content type breakdown
+  const typeCounts: Record<string, number> = {};
+  chunks.forEach(c => { typeCounts[c.content_type] = (typeCounts[c.content_type] || 0) + 1; });
+  const typeEntries = Object.entries(typeCounts).sort((a, b) => b[1] - a[1]);
+
+  // Average content length
+  const avgLen = totalChunks > 0
+    ? Math.round(chunks.reduce((a, c) => a + (c.content?.length || 0), 0) / totalChunks)
+    : 0;
+
+  return (
+    <div className="space-y-6">
+      <Link to="/knowledge" className="flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors">
+        <ArrowLeft className="h-4 w-4" /> Back to Knowledge Base
+      </Link>
+
+      <div>
+        <div className="flex items-center gap-3 mb-2">
+          <h2 className="text-2xl font-semibold">Source Detail</h2>
+          <Badge variant="outline">{dbHash.slice(0, 8)}</Badge>
+        </div>
+        <p className="text-sm text-muted-foreground font-mono break-all">{sourceLabel}</p>
+      </div>
+
+      {/* KPI Strip */}
+      <div className="grid grid-cols-3 gap-3">
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between pb-2">
+            <CardTitle className="text-[10px] font-medium text-muted-foreground uppercase tracking-wider">Chunks</CardTitle>
+            <Layers className="h-4 w-4 text-blue-500" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold tabular-nums">{totalChunks}</div>
+            <p className="text-[11px] text-muted-foreground mt-0.5">~{avgLen} chars avg</p>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between pb-2">
+            <CardTitle className="text-[10px] font-medium text-muted-foreground uppercase tracking-wider">Code</CardTitle>
+            <Code className="h-4 w-4 text-cyan-500" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold tabular-nums">{codeChunks}</div>
+            <p className="text-[11px] text-muted-foreground mt-0.5">{totalChunks > 0 ? `${Math.round(100 * codeChunks / totalChunks)}% of total` : "none"}</p>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between pb-2">
+            <CardTitle className="text-[10px] font-medium text-muted-foreground uppercase tracking-wider">Text</CardTitle>
+            <FileText className="h-4 w-4 text-purple-500" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold tabular-nums">{textChunks}</div>
+            <p className="text-[11px] text-muted-foreground mt-0.5">{totalChunks > 0 ? `${Math.round(100 * textChunks / totalChunks)}% of total` : "none"}</p>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Content type ratio bar */}
+      {typeEntries.length > 1 && (
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-sm">Content Types</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <RatioBar items={typeEntries.map(([type, count], i) => ({
+              label: type, value: count, color: type === "code" ? "#06b6d4" : COLORS[i % COLORS.length],
+            }))} />
+          </CardContent>
+        </Card>
+      )}
+
+      {/* Chunk list */}
+      <div className="space-y-2">
+        {chunks.map((chunk, i) => (
+          <Collapsible key={i}>
+            <Card>
+              <CollapsibleTrigger className="w-full">
+                <CardHeader className="flex flex-row items-center justify-between py-3 cursor-pointer hover:bg-accent/50 transition-colors">
+                  <span className="text-sm font-medium text-left flex-1 truncate">{chunk.title || "(untitled)"}</span>
+                  <div className="flex items-center gap-2">
+                    <Badge variant={chunk.content_type === "code" ? "default" : "secondary"} className="text-[10px]">
+                      {chunk.content_type}
+                    </Badge>
+                    <Badge variant="outline" className="text-[10px] tabular-nums text-muted-foreground">
+                      {chunk.content?.length || 0} chars
+                    </Badge>
+                    <ChevronDown className="h-4 w-4 text-muted-foreground" />
+                  </div>
+                </CardHeader>
+              </CollapsibleTrigger>
+              <CollapsibleContent>
+                <CardContent className="pt-0">
+                  <div className="max-h-80 overflow-y-auto rounded-md border border-border/50 bg-background/50 p-3">
+                    <pre className="text-xs text-muted-foreground whitespace-pre-wrap break-words font-mono leading-relaxed">
+                      {chunk.content}
+                    </pre>
+                  </div>
+                </CardContent>
+              </CollapsibleContent>
+            </Card>
+          </Collapsible>
+        ))}
+      </div>
+    </div>
+  );
+}

package/insight/src/routes/search.tsx

@@ -0,0 +1,97 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { useState } from "react";
+import { api, type Chunk } from "@/lib/api";
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
+import { Search as SearchIcon, ChevronDown } from "lucide-react";
+
+export const Route = createFileRoute("/search")({ component: SearchPage });
+
+function esc(s: string) {
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+
+function SearchPage() {
+  const [query, setQuery] = useState("");
+  const [results, setResults] = useState<Chunk[] | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  const doSearch = async () => {
+    if (!query.trim()) return;
+    setLoading(true);
+    try {
+      setResults(await api.search(query.trim()));
+    } finally { setLoading(false); }
+  };
+
+  return (
+    <div>
+      <h2 className="text-2xl font-semibold mb-6">Search All Memory</h2>
+
+      <div className="flex gap-2 mb-6">
+        <Input
+          value={query}
+          onChange={e => setQuery(e.target.value)}
+          onKeyDown={e => e.key === "Enter" && doSearch()}
+          placeholder='Search across all knowledge bases (full words or partial text)...'
+          className="font-mono text-sm"
+        />
+        <Button onClick={doSearch} disabled={loading} className="gap-2">
+          <SearchIcon className="h-4 w-4" />
+          Search
+        </Button>
+      </div>
+
+      {loading && <p className="text-sm text-muted-foreground">Searching...</p>}
+
+      {results && results.length === 0 && (
+        <Card>
+          <CardContent className="py-12 text-center">
+            <p className="text-muted-foreground">No results for &ldquo;{query}&rdquo;</p>
+            <p className="text-xs text-muted-foreground mt-1">Try different terms, FTS5 syntax (word1 OR word2), or paste partial text</p>
+          </CardContent>
+        </Card>
+      )}
+
+      {results && results.length > 0 && (
+        <div className="space-y-2">
+          <p className="text-sm text-muted-foreground mb-4">{results.length} results</p>
+          {results.map((r, i) => (
+            <Collapsible key={i} defaultOpen={i < 3}>
+              <Card>
+                <CollapsibleTrigger className="w-full">
+                  <CardHeader className="flex flex-row items-center justify-between py-3 cursor-pointer hover:bg-accent/50 transition-colors">
+                    <span className="text-sm font-medium text-left flex-1 truncate">{r.title || "(untitled)"}</span>
+                    <div className="flex items-center gap-2">
+                      {r.dbHash && <Badge variant="outline" className="text-[10px]">{r.dbHash.slice(0, 8)}</Badge>}
+                      <Badge variant={r.content_type === "code" ? "default" : "secondary"} className="text-[10px]">{r.content_type}</Badge>
+                      <ChevronDown className="h-4 w-4 text-muted-foreground" />
+                    </div>
+                  </CardHeader>
+                </CollapsibleTrigger>
+                <CollapsibleContent>
+                  <CardContent className="pt-0">
+                    <ScrollArea className="max-h-64">
+                      <pre
+                        className="text-xs text-muted-foreground whitespace-pre-wrap break-words font-mono leading-relaxed"
+                        dangerouslySetInnerHTML={{
+                          __html: (r.highlighted || esc(r.content))
+                            .replace(/«/g, '<mark class="bg-amber-500/20 text-foreground rounded px-0.5">')
+                            .replace(/»/g, "</mark>"),
+                        }}
+                      />
+                    </ScrollArea>
+                  </CardContent>
+                </CollapsibleContent>
+              </Card>
+            </Collapsible>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/insight/src/routes/sessions.tsx

@@ -0,0 +1,179 @@
+import { createFileRoute, Link } from "@tanstack/react-router";
+import { useEffect, useState } from "react";
+import { api, type SessionDB, type SessionMeta } from "@/lib/api";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { timeAgo, formatDuration } from "@/components/analytics";
+import { Zap, Clock, Activity, ChevronRight, AlertTriangle } from "lucide-react";
+
+export const Route = createFileRoute("/sessions")({ component: Sessions });
+
+function Sessions() {
+  const [dbs, setDbs] = useState<SessionDB[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => { api.sessions().then(d => { setDbs(d); setLoading(false); }); }, []);
+
+  if (loading) return <p className="text-muted-foreground animate-pulse">Loading sessions...</p>;
+
+  const nonEmpty = dbs.filter(db => db.sessions.length > 0);
+
+  if (nonEmpty.length === 0) {
+    return (
+      <div className="space-y-6">
+        <div>
+          <h2 className="text-2xl font-semibold">Sessions</h2>
+          <p className="text-sm text-muted-foreground mt-1">No sessions with events found</p>
+        </div>
+        <Card>
+          <CardContent className="py-12 text-center text-muted-foreground">
+            Sessions appear here once your AI coding tools start generating events.
+          </CardContent>
+        </Card>
+      </div>
+    );
+  }
+
+  // Flatten all sessions
+  const allSessions: { session: SessionMeta; dbHash: string }[] = [];
+  for (const db of nonEmpty) {
+    for (const s of db.sessions) {
+      allSessions.push({ session: s, dbHash: db.hash });
+    }
+  }
+
+  // Compute KPIs
+  const totalSessions = allSessions.length;
+  const totalEvents = allSessions.reduce((a, s) => a + s.session.eventCount, 0);
+
+  // Compute average duration from startedAt to lastEventAt
+  let totalDurationMin = 0;
+  let durCount = 0;
+  for (const { session: s } of allSessions) {
+    if (s.startedAt && s.lastEventAt) {
+      const start = new Date(s.startedAt).getTime();
+      const end = new Date(s.lastEventAt).getTime();
+      if (!isNaN(start) && !isNaN(end) && end > start) {
+        totalDurationMin += (end - start) / 60000;
+        durCount++;
+      }
+    }
+  }
+  const avgDuration = durCount > 0 ? Math.round(totalDurationMin / durCount) : 0;
+
+  // Sort by startedAt descending
+  allSessions.sort((a, b) => (b.session.startedAt || "").localeCompare(a.session.startedAt || ""));
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h2 className="text-2xl font-semibold">Sessions</h2>
+        <p className="text-sm text-muted-foreground mt-1">
+          All recorded AI coding sessions
+        </p>
+      </div>
+
+      {/* KPI Strip */}
+      <div className="grid grid-cols-3 gap-3">
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between pb-2">
+            <CardTitle className="text-[10px] font-medium text-muted-foreground uppercase tracking-wider">Sessions</CardTitle>
+            <Zap className="h-4 w-4 text-blue-500" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold tabular-nums">{totalSessions}</div>
+            <p className="text-[11px] text-muted-foreground mt-0.5">across {nonEmpty.length} db{nonEmpty.length > 1 ? "s" : ""}</p>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between pb-2">
+            <CardTitle className="text-[10px] font-medium text-muted-foreground uppercase tracking-wider">Avg Duration</CardTitle>
+            <Clock className="h-4 w-4 text-purple-500" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold tabular-nums">{formatDuration(avgDuration)}</div>
+            <p className="text-[11px] text-muted-foreground mt-0.5">per session</p>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between pb-2">
+            <CardTitle className="text-[10px] font-medium text-muted-foreground uppercase tracking-wider">Events</CardTitle>
+            <Activity className="h-4 w-4 text-emerald-500" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold tabular-nums">{totalEvents}</div>
+            <p className="text-[11px] text-muted-foreground mt-0.5">{totalSessions > 0 ? `~${Math.round(totalEvents / totalSessions)} per session` : "none"}</p>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Session cards */}
+      <div className="grid gap-2">
+        {allSessions.map(({ session: s, dbHash }) => {
+          // Compute duration
+          let durationMin = 0;
+          if (s.startedAt && s.lastEventAt) {
+            const start = new Date(s.startedAt).getTime();
+            const end = new Date(s.lastEventAt).getTime();
+            if (!isNaN(start) && !isNaN(end) && end > start) {
+              durationMin = (end - start) / 60000;
+            }
+          }
+
+          // Project name: last 2 path segments
+          const projectName = s.projectDir
+            ? s.projectDir.split("/").filter(Boolean).slice(-2).join("/")
+            : "Unknown";
+
+          return (
+            <Link
+              key={`${dbHash}-${s.id}`}
+              to="/sessions/$dbHash/$sessionId"
+              params={{ dbHash, sessionId: s.id }}
+              className="block group"
+            >
+              <Card className="transition-colors hover:border-primary/30">
+                <CardContent className="py-3 px-4">
+                  <div className="flex items-center gap-3">
+                    {/* Project name */}
+                    <div className="flex-1 min-w-0">
+                      <div className="flex items-center gap-2 mb-0.5">
+                        <span className="text-sm font-medium truncate">{projectName}</span>
+                        {s.compactCount > 0 && (
+                          <Badge variant="outline" className="text-[10px] text-amber-500 border-amber-500/30 shrink-0">
+                            <AlertTriangle className="h-2.5 w-2.5 mr-0.5" />
+                            {s.compactCount} compact{s.compactCount > 1 ? "s" : ""}
+                          </Badge>
+                        )}
+                      </div>
+                      <span className="text-[10px] text-muted-foreground font-mono">{s.id.slice(0, 16)}</span>
+                    </div>
+
+                    {/* Duration badge */}
+                    {durationMin > 0 && (
+                      <Badge variant="secondary" className="text-[10px] tabular-nums shrink-0">
+                        {formatDuration(durationMin)}
+                      </Badge>
+                    )}
+
+                    {/* Event count */}
+                    <Badge variant="secondary" className="text-[10px] tabular-nums shrink-0">
+                      {s.eventCount} event{s.eventCount !== 1 ? "s" : ""}
+                    </Badge>
+
+                    {/* Started time */}
+                    <span className="text-[10px] text-muted-foreground tabular-nums shrink-0 min-w-[50px] text-right">
+                      {timeAgo(s.startedAt)}
+                    </span>
+
+                    <ChevronRight className="h-4 w-4 text-muted-foreground/40 shrink-0" />
+                  </div>
+                </CardContent>
+              </Card>
+            </Link>
+          );
+        })}
+      </div>
+    </div>
+  );
+}