agentfit 0.1.0 → 0.1.1

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>

package/components/tool-flow-graph.tsx

@@ -0,0 +1,144 @@
+'use client'
+
+import { useMemo } from 'react'
+import {
+  ReactFlow,
+  Background,
+  Controls,
+  type Node,
+  type Edge,
+  Position,
+  MarkerType,
+} from '@xyflow/react'
+import '@xyflow/react/dist/style.css'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import type { UsageData } from '@/lib/parse-logs'
+import { computeToolFlow } from '@/lib/tool-flow'
+import { formatNumber } from '@/lib/format'
+
+const TOOL_COLORS: Record<string, string> = {
+  Read: '#6b9bd2',
+  Edit: '#7bc8a4',
+  Write: '#7bc8a4',
+  Bash: '#d4a574',
+  Grep: '#6b9bd2',
+  Glob: '#6b9bd2',
+  Agent: '#b8a9d4',
+  Skill: '#b8a9d4',
+  WebSearch: '#d4a5a5',
+  WebFetch: '#d4a5a5',
+}
+
+function getToolColor(tool: string): string {
+  return TOOL_COLORS[tool] || '#94a3b8'
+}
+
+export function ToolFlowGraph({ data }: { data: UsageData }) {
+  const flow = useMemo(() => computeToolFlow(data), [data])
+
+  const { nodes, edges } = useMemo(() => {
+    if (flow.nodes.length === 0) return { nodes: [], edges: [] }
+
+    const maxCount = Math.max(...flow.nodes.map(n => n.count))
+    const centerX = 400
+    const centerY = 300
+    const radius = 220
+
+    const rfNodes: Node[] = flow.nodes.map((n, i) => {
+      const angle = (i / flow.nodes.length) * 2 * Math.PI - Math.PI / 2
+      const size = 40 + (n.count / maxCount) * 60
+
+      return {
+        id: n.id,
+        position: {
+          x: centerX + radius * Math.cos(angle) - size / 2,
+          y: centerY + radius * Math.sin(angle) - size / 2,
+        },
+        data: {
+          label: (
+            <div className="flex flex-col items-center gap-0.5">
+              <span className="text-xs font-semibold">{n.id}</span>
+              <span className="text-[10px] text-muted-foreground">{formatNumber(n.count)}</span>
+            </div>
+          ),
+        },
+        style: {
+          width: size,
+          height: size,
+          borderRadius: '50%',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          backgroundColor: getToolColor(n.id),
+          border: '2px solid rgba(255,255,255,0.2)',
+          color: '#fff',
+          fontSize: 11,
+        },
+        sourcePosition: Position.Right,
+        targetPosition: Position.Left,
+      }
+    })
+
+    const maxEdgeCount = Math.max(...flow.edges.map(e => e.count), 1)
+
+    const rfEdges: Edge[] = flow.edges.map((e, i) => ({
+      id: `e-${i}`,
+      source: e.source,
+      target: e.target,
+      animated: e.count > maxEdgeCount * 0.5,
+      style: {
+        strokeWidth: 1 + (e.count / maxEdgeCount) * 4,
+        opacity: 0.3 + (e.count / maxEdgeCount) * 0.5,
+        stroke: getToolColor(e.source),
+      },
+      markerEnd: {
+        type: MarkerType.ArrowClosed,
+        width: 12,
+        height: 12,
+      },
+      label: e.count > maxEdgeCount * 0.2 ? String(e.count) : undefined,
+      labelStyle: { fontSize: 10, fill: '#94a3b8' },
+    }))
+
+    return { nodes: rfNodes, edges: rfEdges }
+  }, [flow])
+
+  if (flow.nodes.length === 0) {
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle>Tool Flow</CardTitle>
+          <CardDescription>Not enough tool data for visualization</CardDescription>
+        </CardHeader>
+      </Card>
+    )
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Tool Flow Graph</CardTitle>
+        <CardDescription>
+          How tools connect — node size = usage frequency, edge thickness = co-occurrence strength.
+          Top {flow.nodes.length} tools with {flow.edges.length} connections.
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <div style={{ height: 600 }} className="rounded-lg border bg-background">
+          <ReactFlow
+            nodes={nodes}
+            edges={edges}
+            fitView
+            nodesDraggable
+            nodesConnectable={false}
+            minZoom={0.3}
+            maxZoom={2}
+          >
+            <Background gap={20} size={1} />
+            <Controls showInteractive={false} />
+          </ReactFlow>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}