agentfit 0.1.0 → 0.1.2

package/components/screenshots-analysis.tsx

@@ -12,6 +12,8 @@ import {
 } from '@/components/ui/chart'
 import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from 'recharts'
 import { Badge } from '@/components/ui/badge'
+import { PaginationControls } from '@/components/pagination-controls'
+import { usePagination } from '@/hooks/use-pagination'
 import { formatCost, formatNumber } from '@/lib/format'
 import {
   Camera,
@@ -21,6 +23,14 @@ import {
   Image as ImageIcon,
 } from 'lucide-react'
 
+interface ImageInfo {
+  filename: string
+  sessionId: string
+  timestamp: string
+  sizeBytes: number
+  project: string
+}
+
 interface ImageAnalysis {
   overview: {
     totalImages: number
@@ -55,13 +65,7 @@ interface ImageAnalysis {
     cost: number
     date: string
   }[]
-  recentImages: {
-    filename: string
-    sessionId: string
-    timestamp: string
-    sizeBytes: number
-    project: string
-  }[]
+  allImages: ImageInfo[]
 }
 
 const projectConfig = {
@@ -315,45 +319,46 @@ export function ScreenshotsAnalysis() {
         </CardContent>
       </Card>
 
-      {/* Recent images gallery */}
-      <Card>
-        <CardHeader>
-          <CardTitle>Recent Images</CardTitle>
-          <CardDescription>Latest images from your sessions</CardDescription>
-        </CardHeader>
-        <CardContent>
-          <div className="columns-1 gap-4 sm:columns-2 lg:columns-3">
-            {data.recentImages.map((img) => (
-              <div
-                key={img.filename}
-                className="group relative mb-4 break-inside-avoid overflow-hidden rounded-xl border bg-card shadow-sm transition-all duration-300 hover:shadow-lg hover:-translate-y-0.5"
-              >
-                <div className="relative">
-                  <img
-                    src={`/api/images/${img.filename}`}
-                    alt={`Image from ${img.project}`}
-                    className="w-full object-cover object-top"
-                    loading="lazy"
-                  />
-                  {/* Hover overlay */}
-                  <div className="absolute inset-0 bg-black/0 transition-colors duration-300 group-hover:bg-black/5" />
-                  {/* Project badge — always visible */}
-                  <div className="absolute top-2.5 left-2.5">
-                    <span className="inline-flex items-center rounded-md bg-black/60 px-2 py-0.5 text-[11px] font-medium text-white backdrop-blur-sm">
-                      {img.project}
-                    </span>
-                  </div>
-                </div>
-                {/* Metadata footer */}
-                <div className="flex items-center justify-between px-3 py-2.5 text-[11px] text-muted-foreground">
-                  <span>{new Date(img.timestamp).toLocaleDateString(undefined, { month: 'short', day: 'numeric' })}</span>
-                  <span>{Math.round(img.sizeBytes / 1024)} KB</span>
-                </div>
-              </div>
-            ))}
-          </div>
-        </CardContent>
-      </Card>
+      {/* All images grid with pagination */}
+      <ImageGallery images={data.allImages} />
     </div>
   )
 }
+
+function ImageGallery({ images }: { images: ImageInfo[] }) {
+  const pagination = usePagination(images, 16)
+
+  if (images.length === 0) return null
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>All Images</CardTitle>
+        <CardDescription>{images.length} images across all sessions</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-4">
+          {pagination.pageItems.map((img) => (
+            <div
+              key={img.filename}
+              className="group relative overflow-hidden rounded-xl border bg-card shadow-sm transition-all duration-300 hover:shadow-lg hover:-translate-y-0.5"
+            >
+              <img
+                src={`/api/images/${img.filename}`}
+                alt={`Image from ${img.project}`}
+                className="aspect-video w-full object-cover object-top"
+                loading="lazy"
+              />
+              <div className="flex items-center justify-between px-3 py-2 text-[11px] text-muted-foreground">
+                <span className="font-medium text-foreground">{img.project}</span>
+                <span>{new Date(img.timestamp).toLocaleDateString(undefined, { month: 'short', day: 'numeric' })}</span>
+                <span>{Math.round(img.sizeBytes / 1024)} KB</span>
+              </div>
+            </div>
+          ))}
+        </div>
+        <PaginationControls pagination={pagination} noun="images" />
+      </CardContent>
+    </Card>
+  )
+}

package/components/session-chatlog.tsx

@@ -0,0 +1,124 @@
+'use client'
+
+import { useState } from 'react'
+import { User, Brain, Wrench, CheckCircle, XCircle, Settings, ChevronDown, ChevronRight, Image } from 'lucide-react'
+import type { ChatMessage } from '@/lib/session-detail'
+
+const ROLE_CONFIG: Record<string, { color: string; bg: string; icon: typeof User; label: string }> = {
+  user:        { color: '#3b82f6', bg: '#eff6ff', icon: User, label: 'User Input' },
+  assistant:   { color: '#8b5cf6', bg: '#faf5ff', icon: Brain, label: 'Assistant' },
+  tool_result: { color: '#22c55e', bg: '#f0fdf4', icon: CheckCircle, label: 'Tool Result' },
+  system:      { color: '#94a3b8', bg: '#f8fafc', icon: Settings, label: 'System' },
+}
+
+function ChatEntry({ message, index }: { message: ChatMessage; index: number }) {
+  const [expanded, setExpanded] = useState(false)
+  const config = ROLE_CONFIG[message.role] || ROLE_CONFIG.system
+  const Icon = message.toolName ? Wrench : (message.isThinking ? Brain : config.icon)
+  const isLong = message.content.length > 150
+
+  let label = config.label
+  if (message.toolName) label = message.toolName
+  else if (message.isThinking) label = 'Thinking'
+  else if (message.role === 'tool_result' && message.content.includes('error')) {
+    label = 'Error'
+  }
+
+  return (
+    <div
+      className="flex gap-3 py-2"
+      style={{ borderLeft: `3px solid ${config.color}`, paddingLeft: 12 }}
+    >
+      <div className="shrink-0 mt-0.5">
+        <div
+          className="flex h-6 w-6 items-center justify-center rounded-full"
+          style={{ backgroundColor: config.bg }}
+        >
+          <Icon className="h-3.5 w-3.5" style={{ color: config.color }} />
+        </div>
+      </div>
+      <div className="flex-1 min-w-0">
+        <div className="flex items-center gap-2 mb-0.5">
+          <span className="text-xs font-semibold" style={{ color: config.color }}>
+            #{message.stepIndex} {label}
+          </span>
+          {message.isSidechain && (
+            <span className="text-[10px] bg-muted px-1.5 py-0.5 rounded">sub-agent</span>
+          )}
+          {message.images && message.images > 0 && (
+            <span className="flex items-center gap-0.5 text-[10px] text-muted-foreground">
+              <Image className="h-3 w-3" /> {message.images}
+            </span>
+          )}
+          <span className="text-[10px] text-muted-foreground">
+            {message.timestamp ? new Date(message.timestamp).toLocaleTimeString() : ''}
+          </span>
+        </div>
+        <div
+          className={`text-xs leading-relaxed text-foreground/80 ${
+            !expanded && isLong ? 'line-clamp-3' : ''
+          }`}
+          style={{ whiteSpace: 'pre-wrap', wordBreak: 'break-word' }}
+        >
+          {message.content}
+        </div>
+        {isLong && (
+          <button
+            onClick={() => setExpanded(!expanded)}
+            className="flex items-center gap-0.5 mt-1 text-[11px] text-primary hover:underline"
+          >
+            {expanded ? <ChevronDown className="h-3 w-3" /> : <ChevronRight className="h-3 w-3" />}
+            {expanded ? 'Show less' : 'Show more'}
+          </button>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export function SessionChatLog({ messages }: { messages: ChatMessage[] }) {
+  const [filter, setFilter] = useState<string>('all')
+
+  const filtered = filter === 'all'
+    ? messages
+    : messages.filter(m => m.role === filter || (filter === 'tool' && (m.toolName || m.role === 'tool_result')))
+
+  return (
+    <div className="space-y-2">
+      {/* Filter buttons */}
+      <div className="flex gap-1.5 pb-2 border-b">
+        {[
+          { key: 'all', label: 'All', count: messages.length },
+          { key: 'user', label: 'User', count: messages.filter(m => m.role === 'user').length },
+          { key: 'assistant', label: 'Assistant', count: messages.filter(m => m.role === 'assistant' && !m.toolName).length },
+          { key: 'tool', label: 'Tools', count: messages.filter(m => m.toolName || m.role === 'tool_result').length },
+        ].map(f => (
+          <button
+            key={f.key}
+            onClick={() => setFilter(f.key)}
+            className={`rounded-md px-2.5 py-1 text-xs font-medium transition-colors ${
+              filter === f.key
+                ? 'bg-primary text-primary-foreground'
+                : 'bg-muted text-muted-foreground hover:text-foreground'
+            }`}
+          >
+            {f.label} ({f.count})
+          </button>
+        ))}
+      </div>
+
+      {/* Messages */}
+      <div className="space-y-0.5 max-h-[600px] overflow-y-auto pr-2">
+        {filtered.map((msg, i) => (
+          <ChatEntry key={msg.id} message={msg} index={i} />
+        ))}
+      </div>
+
+      {messages.length > 200 && (
+        <div className="text-xs text-muted-foreground text-center pt-2">
+          Showing {filtered.length} of {messages.length} messages
+        </div>
+      )}
+    </div>
+  )
+}

package/components/session-timeline.tsx

@@ -0,0 +1,184 @@
+'use client'
+
+import { useMemo, useState } from 'react'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { Badge } from '@/components/ui/badge'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
+import type { SessionSummary } from '@/lib/parse-logs'
+import { formatCost, formatDuration, formatNumber } from '@/lib/format'
+
+const MODEL_COLORS: Record<string, string> = {
+  'claude-opus-4-6': 'oklch(0.65 0.12 250)',
+  'claude-sonnet-4-6': 'oklch(0.70 0.12 200)',
+  'claude-haiku-4-5': 'oklch(0.75 0.10 155)',
+  'default': 'oklch(0.70 0.08 200)',
+}
+
+function getModelColor(model: string): string {
+  for (const [key, color] of Object.entries(MODEL_COLORS)) {
+    if (key !== 'default' && model.includes(key.replace('claude-', ''))) return color
+  }
+  return MODEL_COLORS.default
+}
+
+interface DayRow {
+  date: string
+  sessions: SessionSummary[]
+  earliest: number // ms timestamp
+  latest: number
+}
+
+export function SessionTimeline({ sessions }: { sessions: SessionSummary[] }) {
+  const [hoveredSession, setHoveredSession] = useState<string | null>(null)
+
+  const { days, dayStart, dayEnd } = useMemo(() => {
+    const dayMap = new Map<string, SessionSummary[]>()
+    for (const s of sessions) {
+      if (!s.startTime) continue
+      const date = s.startTime.slice(0, 10)
+      if (!dayMap.has(date)) dayMap.set(date, [])
+      dayMap.get(date)!.push(s)
+    }
+
+    const rows: DayRow[] = []
+    for (const [date, daySessions] of dayMap) {
+      const times = daySessions.flatMap(s => {
+        const start = new Date(s.startTime).getTime()
+        const end = s.endTime ? new Date(s.endTime).getTime() : start + s.durationMinutes * 60000
+        return [start, end]
+      })
+      rows.push({
+        date,
+        sessions: daySessions.sort((a, b) => a.startTime.localeCompare(b.startTime)),
+        earliest: Math.min(...times),
+        latest: Math.max(...times),
+      })
+    }
+
+    rows.sort((a, b) => b.date.localeCompare(a.date))
+
+    // Use 0:00 - 24:00 as the timeline range
+    return {
+      days: rows.slice(0, 30), // last 30 days
+      dayStart: 0,
+      dayEnd: 24 * 60, // in minutes
+    }
+  }, [sessions])
+
+  if (days.length === 0) {
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle>Session Timeline</CardTitle>
+          <CardDescription>No sessions with timestamp data</CardDescription>
+        </CardHeader>
+      </Card>
+    )
+  }
+
+  const totalMinutes = dayEnd - dayStart
+  const hourMarkers = Array.from({ length: 25 }, (_, i) => i)
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Session Timeline</CardTitle>
+        <CardDescription>
+          Daily session activity — each bar is a session, width = duration, color = model.
+          Showing last {days.length} active days.
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <div className="overflow-x-auto">
+          {/* Hour labels */}
+          <div className="flex items-end mb-1" style={{ paddingLeft: 90 }}>
+            <div className="relative w-full" style={{ height: 16 }}>
+              {hourMarkers.filter(h => h % 3 === 0).map(h => (
+                <span
+                  key={h}
+                  className="absolute text-[10px] text-muted-foreground -translate-x-1/2"
+                  style={{ left: `${(h * 60 / totalMinutes) * 100}%` }}
+                >
+                  {h === 0 ? '12a' : h < 12 ? `${h}a` : h === 12 ? '12p' : `${h - 12}p`}
+                </span>
+              ))}
+            </div>
+          </div>
+
+          {/* Rows */}
+          <div className="space-y-0.5">
+            {days.map(day => (
+              <div key={day.date} className="flex items-center gap-2" style={{ height: 28 }}>
+                {/* Date label */}
+                <div className="w-[80px] shrink-0 text-right text-xs text-muted-foreground font-mono">
+                  {day.date.slice(5)}
+                </div>
+
+                {/* Timeline bar */}
+                <div className="relative flex-1 h-full rounded-sm bg-muted/30">
+                  {/* Hour gridlines */}
+                  {hourMarkers.filter(h => h % 6 === 0).map(h => (
+                    <div
+                      key={h}
+                      className="absolute top-0 h-full w-px bg-border/50"
+                      style={{ left: `${(h * 60 / totalMinutes) * 100}%` }}
+                    />
+                  ))}
+
+                  {/* Session blocks */}
+                  {day.sessions.map(s => {
+                    const startDate = new Date(s.startTime)
+                    const startMin = startDate.getHours() * 60 + startDate.getMinutes()
+                    const duration = Math.max(s.durationMinutes, 3) // min 3min width for visibility
+                    const leftPct = (startMin / totalMinutes) * 100
+                    const widthPct = Math.min((duration / totalMinutes) * 100, 100 - leftPct)
+                    const isHovered = hoveredSession === s.sessionId
+
+                    return (
+                      <Tooltip key={s.sessionId}>
+                        <TooltipTrigger
+                          render={
+                            <div
+                              className="absolute top-0.5 bottom-0.5 rounded-sm cursor-default transition-opacity"
+                              style={{
+                                left: `${leftPct}%`,
+                                width: `${Math.max(widthPct, 0.3)}%`,
+                                backgroundColor: getModelColor(s.model),
+                                opacity: isHovered ? 1 : 0.75,
+                                zIndex: isHovered ? 10 : 1,
+                              }}
+                              onMouseEnter={() => setHoveredSession(s.sessionId)}
+                              onMouseLeave={() => setHoveredSession(null)}
+                            />
+                          }
+                        />
+                        <TooltipContent side="top" className="text-xs">
+                          <div className="space-y-1">
+                            <div className="font-semibold">{s.project}</div>
+                            <div>{s.model}</div>
+                            <div>{formatDuration(s.durationMinutes)} | {formatNumber(s.totalMessages)} msgs | {formatCost(s.costUSD)}</div>
+                            <div>{new Date(s.startTime).toLocaleTimeString()} – {s.endTime ? new Date(s.endTime).toLocaleTimeString() : '?'}</div>
+                          </div>
+                        </TooltipContent>
+                      </Tooltip>
+                    )
+                  })}
+                </div>
+              </div>
+            ))}
+          </div>
+
+          {/* Legend */}
+          <div className="mt-4 flex items-center gap-4 text-xs text-muted-foreground">
+            {Object.entries(MODEL_COLORS).filter(([k]) => k !== 'default').map(([model, color]) => (
+              <span key={model} className="flex items-center gap-1.5">
+                <span className="inline-block h-3 w-3 rounded-sm" style={{ backgroundColor: color }} />
+                {model.replace('claude-', '')}
+              </span>
+            ))}
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}

package/components/session-workflow.tsx

@@ -0,0 +1,183 @@
+'use client'
+
+import { useMemo, useCallback } from 'react'
+import {
+  ReactFlow,
+  Background,
+  Controls,
+  MiniMap,
+  useReactFlow,
+  ReactFlowProvider,
+  type Node,
+  type Edge,
+  Position,
+  MarkerType,
+} from '@xyflow/react'
+import '@xyflow/react/dist/style.css'
+import dagre from 'dagre'
+import type { WorkflowNode, WorkflowEdge } from '@/lib/session-detail'
+
+// ─── Node Colors ─────────────────────────────────────────────────────
+
+const NODE_STYLES: Record<string, { bg: string; border: string; text: string }> = {
+  user_input:    { bg: '#eff6ff', border: '#3b82f6', text: '#1e40af' },
+  thinking:      { bg: '#faf5ff', border: '#8b5cf6', text: '#6d28d9' },
+  text_response: { bg: '#f0fdf4', border: '#22c55e', text: '#166534' },
+  tool_call:     { bg: '#ecfdf5', border: '#10b981', text: '#065f46' },
+  tool_result:   { bg: '#f0fdf4', border: '#22c55e', text: '#166534' },
+  system:        { bg: '#f8fafc', border: '#94a3b8', text: '#475569' },
+}
+
+const ERROR_STYLE = { bg: '#fef2f2', border: '#ef4444', text: '#991b1b' }
+
+// ─── Dagre Layout ────────────────────────────────────────────────────
+
+function layoutNodes(
+  wfNodes: WorkflowNode[],
+  wfEdges: WorkflowEdge[]
+): { nodes: Node[]; edges: Edge[] } {
+  const g = new dagre.graphlib.Graph()
+  g.setDefaultEdgeLabel(() => ({}))
+  g.setGraph({ rankdir: 'TB', ranksep: 50, nodesep: 40, marginx: 20, marginy: 20 })
+
+  const limitedNodes = wfNodes.slice(0, 200)
+  const nodeIds = new Set(limitedNodes.map(n => n.id))
+  const nodeWidth = 260
+
+  for (const node of limitedNodes) {
+    g.setNode(node.id, { width: nodeWidth, height: 80 })
+  }
+
+  for (const edge of wfEdges) {
+    if (nodeIds.has(edge.source) && nodeIds.has(edge.target)) {
+      g.setEdge(edge.source, edge.target)
+    }
+  }
+
+  dagre.layout(g)
+
+  const nodes: Node[] = limitedNodes.map(node => {
+    const pos = g.node(node.id)
+    const style = node.isError ? ERROR_STYLE : (NODE_STYLES[node.nodeType] || NODE_STYLES.system)
+
+    return {
+      id: node.id,
+      position: { x: (pos?.x || 0) - nodeWidth / 2, y: (pos?.y || 0) - 40 },
+      width: nodeWidth,
+      height: 80,
+      measured: { width: nodeWidth, height: 80 },
+      data: {
+        color: style.border,
+        label: (
+          <div className="text-left px-2 py-1 overflow-hidden">
+            <div className="flex items-center gap-1.5 mb-0.5">
+              <span
+                className="inline-block h-2 w-2 rounded-full shrink-0"
+                style={{ backgroundColor: style.border }}
+              />
+              <span className="text-[11px] font-semibold truncate" style={{ color: style.text }}>
+                {node.label}
+              </span>
+              {node.toolName && (
+                <span className="text-[10px] text-muted-foreground">
+                  #{node.stepIndex}
+                </span>
+              )}
+            </div>
+            <div className="text-[10px] text-muted-foreground leading-tight line-clamp-2">
+              {node.contentPreview || '...'}
+            </div>
+          </div>
+        ),
+      },
+      style: {
+        width: nodeWidth,
+        minHeight: 60,
+        backgroundColor: style.bg,
+        border: `1.5px solid ${style.border}`,
+        borderRadius: 8,
+        fontSize: 11,
+        padding: 0,
+      },
+      sourcePosition: Position.Bottom,
+      targetPosition: Position.Top,
+    }
+  })
+
+  const edges: Edge[] = wfEdges
+    .filter(e => nodeIds.has(e.source) && nodeIds.has(e.target))
+    .map(e => ({
+      id: e.id,
+      source: e.source,
+      target: e.target,
+      style: { stroke: '#94a3b8', strokeWidth: 1.5 },
+      markerEnd: { type: MarkerType.ArrowClosed, width: 10, height: 10, color: '#94a3b8' },
+    }))
+
+  return { nodes, edges }
+}
+
+// ─── Inner component (needs ReactFlowProvider) ──────────────────────
+
+function WorkflowInner({ nodes, edges }: { nodes: Node[]; edges: Edge[] }) {
+  const { fitView } = useReactFlow()
+
+  // On initial render, zoom to the first 5 nodes
+  const onInit = useCallback(() => {
+    const firstNodeIds = nodes.slice(0, 5).map(n => n.id)
+    setTimeout(() => {
+      fitView({ nodes: firstNodeIds.map(id => ({ id })), padding: 0.3, duration: 300 })
+    }, 100)
+  }, [nodes, fitView])
+
+  return (
+    <ReactFlow
+      nodes={nodes}
+      edges={edges}
+      onInit={onInit}
+      nodesDraggable
+      nodesConnectable={false}
+      minZoom={0.05}
+      maxZoom={2}
+      defaultEdgeOptions={{ animated: false }}
+    >
+      <Background gap={16} size={1} />
+      <Controls showInteractive={false} />
+      <MiniMap
+        nodeColor={(node) => (node.data as Record<string, string>)?.color || '#94a3b8'}
+        nodeStrokeWidth={0}
+        maskColor="rgba(0,0,0,0.08)"
+        style={{ width: 200, height: 160 }}
+        pannable
+        zoomable
+      />
+    </ReactFlow>
+  )
+}
+
+// ─── Exported Component ──────────────────────────────────────────────
+
+export function SessionWorkflow({
+  nodes: wfNodes,
+  edges: wfEdges,
+}: {
+  nodes: WorkflowNode[]
+  edges: WorkflowEdge[]
+}) {
+  const { nodes, edges } = useMemo(
+    () => layoutNodes(wfNodes, wfEdges),
+    [wfNodes, wfEdges]
+  )
+
+  if (nodes.length === 0) {
+    return <div className="text-muted-foreground text-sm p-4">No workflow data</div>
+  }
+
+  return (
+    <div style={{ height: 700 }} className="w-full rounded-lg border bg-background">
+      <ReactFlowProvider>
+        <WorkflowInner nodes={nodes} edges={edges} />
+      </ReactFlowProvider>
+    </div>
+  )
+}

package/components/sessions-table.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import { useState } from 'react'
+import Link from 'next/link'
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
 import {
   Table,
@@ -20,6 +21,7 @@ import {
 import { Badge } from '@/components/ui/badge'
 import { PaginationControls } from '@/components/pagination-controls'
 import { usePagination } from '@/hooks/use-pagination'
+import { Eye } from 'lucide-react'
 import type { SessionSummary } from '@/lib/parse-logs'
 import { formatCost, formatTokens, formatDuration, formatNumber } from '@/lib/format'
 
@@ -67,11 +69,12 @@ export function SessionsTable({ sessions }: { sessions: SessionSummary[] }) {
               <TableHead className="text-right">Cost</TableHead>
               <TableHead className="text-right">Duration</TableHead>
               <TableHead className="text-right">Tools</TableHead>
+              <TableHead className="w-[60px]"></TableHead>
             </TableRow>
           </TableHeader>
           <TableBody>
             {pagination.pageItems.map((s) => (
-              <TableRow key={s.sessionId}>
+              <TableRow key={s.sessionId} className="hover:bg-muted/50">
                 <TableCell className="whitespace-nowrap text-sm">
                   {s.startTime ? new Date(s.startTime).toLocaleDateString() : 'N/A'}
                 </TableCell>
@@ -86,6 +89,11 @@ export function SessionsTable({ sessions }: { sessions: SessionSummary[] }) {
                 <TableCell className="text-right">{formatCost(s.costUSD)}</TableCell>
                 <TableCell className="text-right">{formatDuration(s.durationMinutes)}</TableCell>
                 <TableCell className="text-right">{formatNumber(s.toolCallsTotal)}</TableCell>
+                <TableCell>
+                  <Link href={`/sessions/${s.sessionId}`} className="inline-flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground hover:bg-muted hover:text-foreground transition-colors">
+                    <Eye className="h-4 w-4" />
+                  </Link>
+                </TableCell>
               </TableRow>
             ))}
           </TableBody>