agentfit 0.1.0

package/components/personality-fit.tsx

@@ -0,0 +1,446 @@
+'use client'
+
+import { useState, useMemo } from 'react'
+import type { UsageData } from '@/lib/parse-logs'
+import { analyzePersonality, type PersonalityProfile, type BigFiveProfile } from '@/lib/personality'
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card'
+import { Badge } from '@/components/ui/badge'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
+import { Button } from '@/components/ui/button'
+import { Copy, Check, Brain, Target, Sparkles, ArrowRight } from 'lucide-react'
+
+const TASK_OPTIONS = [
+  { value: 'frontendDev', label: 'Frontend Development' },
+  { value: 'backendDev', label: 'Backend Development' },
+  { value: 'dataEngineering', label: 'Data Engineering' },
+  { value: 'devOps', label: 'DevOps' },
+  { value: 'debugging', label: 'Debugging' },
+  { value: 'refactoring', label: 'Refactoring' },
+]
+
+const MBTI_DESCRIPTIONS: Record<string, string> = {
+  ISTJ: 'The Inspector — Methodical, detail-oriented, follows established procedures',
+  ISFJ: 'The Protector — Supportive, reliable, focused on preserving working code',
+  INFJ: 'The Counselor — Insightful, sees patterns, anticipates architectural needs',
+  INTJ: 'The Architect — Strategic, independent, designs for long-term quality',
+  ISTP: 'The Craftsman — Practical, efficient, excels at targeted fixes',
+  ISFP: 'The Composer — Adaptable, aesthetic sense, good at UI refinement',
+  INFP: 'The Healer — Idealistic, explores creative solutions, values code clarity',
+  INTP: 'The Thinker — Analytical, explores edge cases, values logical consistency',
+  ESTP: 'The Dynamo — Action-oriented, quick iterations, bias toward execution',
+  ESFP: 'The Performer — Energetic, responsive, generates many alternatives',
+  ENFP: 'The Champion — Enthusiastic explorer, broad tool usage, creative approaches',
+  ENTP: 'The Visionary — Innovative, questions assumptions, proposes novel solutions',
+  ESTJ: 'The Supervisor — Organized, efficient, follows project conventions strictly',
+  ESFJ: 'The Provider — Cooperative, communicative, adapts to user preferences',
+  ENFJ: 'The Teacher — Explains reasoning, mentors through code, proactive guidance',
+  ENTJ: 'The Commander — Decisive, takes charge, designs comprehensive solutions',
+}
+
+function TraitBar({
+  label,
+  value,
+  idealValue,
+  color,
+  leftLabel,
+  rightLabel,
+}: {
+  label: string
+  value: number
+  idealValue?: number
+  color: string
+  leftLabel?: string
+  rightLabel?: string
+}) {
+  return (
+    <div className="space-y-1.5">
+      <div className="flex items-center justify-between text-sm">
+        <span className="font-medium">{label}</span>
+        <span className="text-muted-foreground">{Math.round(value)}/100</span>
+      </div>
+      {(leftLabel || rightLabel) && (
+        <div className="flex justify-between text-xs text-muted-foreground">
+          <span>{leftLabel}</span>
+          <span>{rightLabel}</span>
+        </div>
+      )}
+      <div className="relative h-3 w-full overflow-hidden rounded-full bg-muted">
+        <div
+          className="h-full rounded-full transition-all duration-500"
+          style={{
+            width: `${Math.max(2, value)}%`,
+            backgroundColor: color,
+          }}
+        />
+        {idealValue !== undefined && (
+          <div
+            className="absolute top-0 h-full w-0.5 bg-foreground/60"
+            style={{ left: `${idealValue}%` }}
+            title={`Ideal: ${Math.round(idealValue)}`}
+          />
+        )}
+      </div>
+    </div>
+  )
+}
+
+function MBTIDimension({
+  label,
+  value,
+  leftPole,
+  rightPole,
+}: {
+  label: string
+  value: number
+  leftPole: string
+  rightPole: string
+}) {
+  const normalized = (value + 100) / 2 // -100..+100 → 0..100
+  const isLeft = value < 0
+  return (
+    <div className="space-y-1.5">
+      <div className="flex items-center justify-between text-sm">
+        <span className={`font-medium ${isLeft ? 'text-foreground' : 'text-muted-foreground'}`}>
+          {leftPole}
+        </span>
+        <span className="text-xs text-muted-foreground">{label}</span>
+        <span className={`font-medium ${!isLeft ? 'text-foreground' : 'text-muted-foreground'}`}>
+          {rightPole}
+        </span>
+      </div>
+      <div className="relative h-3 w-full overflow-hidden rounded-full bg-muted">
+        <div className="absolute top-0 left-1/2 h-full w-px bg-foreground/20" />
+        {isLeft ? (
+          <div
+            className="absolute top-0 right-1/2 h-full rounded-l-full transition-all duration-500"
+            style={{ width: `${(100 - normalized)}%`, backgroundColor: 'var(--chart-1)' }}
+          />
+        ) : (
+          <div
+            className="absolute top-0 left-1/2 h-full rounded-r-full transition-all duration-500"
+            style={{ width: `${normalized - 50}%`, backgroundColor: 'var(--chart-2)' }}
+          />
+        )}
+      </div>
+    </div>
+  )
+}
+
+function FitScoreCard({ task, score, isSelected }: { task: string; score: number; isSelected: boolean }) {
+  const taskNames: Record<string, string> = {
+    frontendDev: 'Frontend',
+    backendDev: 'Backend',
+    dataEngineering: 'Data Eng',
+    devOps: 'DevOps',
+    debugging: 'Debug',
+    refactoring: 'Refactor',
+  }
+
+  const getColor = (s: number) => {
+    if (s >= 80) return 'text-foreground'
+    if (s >= 60) return 'text-foreground'
+    if (s >= 40) return 'text-muted-foreground'
+    return 'text-muted-foreground'
+  }
+
+  const getBg = (s: number) => {
+    if (s >= 80) return 'bg-chart-2/10'
+    if (s >= 60) return 'bg-chart-1/10'
+    if (s >= 40) return 'bg-chart-3/10'
+    return 'bg-muted/50'
+  }
+
+  return (
+    <div
+      className={`rounded-lg border p-3 text-center transition-all ${
+        isSelected ? 'border-chart-1 border-2' : ''
+      } ${getBg(score)}`}
+    >
+      <div className="text-xs text-muted-foreground mb-1">{taskNames[task]}</div>
+      <div className={`text-2xl font-bold ${getColor(score)}`}>{score}%</div>
+    </div>
+  )
+}
+
+export function PersonalityFit({ data }: { data: UsageData }) {
+  const [targetTask, setTargetTask] = useState('backendDev')
+  const targetTaskLabel = TASK_OPTIONS.find((t) => t.value === targetTask)?.label || targetTask
+  const [copied, setCopied] = useState(false)
+
+  const profile: PersonalityProfile = useMemo(
+    () => analyzePersonality(data, targetTask),
+    [data, targetTask]
+  )
+
+  const handleCopyPrompt = async () => {
+    await navigator.clipboard.writeText(profile.systemPrompt)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 2000)
+  }
+
+  const bigFiveColors: Record<keyof BigFiveProfile, string> = {
+    openness: 'var(--chart-1)',
+    conscientiousness: 'var(--chart-2)',
+    extraversion: 'var(--chart-3)',
+    agreeableness: 'var(--chart-4)',
+    neuroticism: 'var(--chart-5)',
+  }
+
+  const idealProfile = {
+    frontendDev: { openness: 80, conscientiousness: 60, extraversion: 70, agreeableness: 75, neuroticism: 20 },
+    backendDev: { openness: 50, conscientiousness: 90, extraversion: 40, agreeableness: 60, neuroticism: 15 },
+    dataEngineering: { openness: 45, conscientiousness: 95, extraversion: 35, agreeableness: 55, neuroticism: 10 },
+    devOps: { openness: 55, conscientiousness: 85, extraversion: 50, agreeableness: 65, neuroticism: 15 },
+    debugging: { openness: 70, conscientiousness: 80, extraversion: 55, agreeableness: 50, neuroticism: 25 },
+    refactoring: { openness: 65, conscientiousness: 90, extraversion: 45, agreeableness: 70, neuroticism: 15 },
+  }[targetTask] || { openness: 50, conscientiousness: 50, extraversion: 50, agreeableness: 50, neuroticism: 50 }
+
+  return (
+    <div className="space-y-6">
+      {/* MBTI type */}
+      <Card>
+        <CardHeader className="pb-3">
+          <div className="flex items-center gap-2">
+            <Brain className="h-5 w-5 text-primary" />
+            <CardTitle>Agent Personality Type</CardTitle>
+          </div>
+        </CardHeader>
+        <CardContent>
+          <div className="flex items-center gap-4">
+            <div className="text-4xl font-bold tracking-wider text-primary">
+              {profile.mbtiType}
+            </div>
+            <div className="text-sm text-muted-foreground">
+              {MBTI_DESCRIPTIONS[profile.mbtiType] || 'Unique personality profile'}
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Task Fit Scores */}
+      <Card>
+        <CardHeader>
+          <div className="flex items-center justify-between">
+            <div>
+              <CardTitle>Task Fit Scores</CardTitle>
+              <CardDescription>
+                How well the agent's observed personality matches ideal profiles for each task type
+              </CardDescription>
+            </div>
+            <div className="flex items-center gap-2">
+              <Target className="h-4 w-4 text-muted-foreground" />
+              <span className="text-sm text-muted-foreground">Target Task</span>
+              <Select value={targetTask} onValueChange={(v) => v && setTargetTask(v)}>
+                <SelectTrigger className="w-[200px]">
+                  <SelectValue placeholder={targetTaskLabel}>{targetTaskLabel}</SelectValue>
+                </SelectTrigger>
+                <SelectContent alignItemWithTrigger={false}>
+                  {TASK_OPTIONS.map((opt) => (
+                    <SelectItem key={opt.value} value={opt.value}>
+                      {opt.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+        </CardHeader>
+        <CardContent>
+          <div className="grid grid-cols-3 gap-3 sm:grid-cols-6">
+            {Object.entries(profile.fitScores).map(([task, score]) => (
+              <FitScoreCard
+                key={task}
+                task={task}
+                score={score}
+                isSelected={task === targetTask}
+              />
+            ))}
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Big Five and MBTI side by side */}
+      <div className="grid gap-6 lg:grid-cols-2">
+        {/* Big Five */}
+        <Card>
+          <CardHeader>
+            <CardTitle>Big Five (OCEAN) Profile</CardTitle>
+            <CardDescription>
+              Derived from behavioral signals. Vertical markers show ideal for selected task.
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-5">
+            <TraitBar
+              label="Openness"
+              value={profile.bigFive.openness}
+              idealValue={idealProfile.openness}
+              color={bigFiveColors.openness}
+              leftLabel="Conventional"
+              rightLabel="Exploratory"
+            />
+            <TraitBar
+              label="Conscientiousness"
+              value={profile.bigFive.conscientiousness}
+              idealValue={idealProfile.conscientiousness}
+              color={bigFiveColors.conscientiousness}
+              leftLabel="Flexible"
+              rightLabel="Methodical"
+            />
+            <TraitBar
+              label="Extraversion"
+              value={profile.bigFive.extraversion}
+              idealValue={idealProfile.extraversion}
+              color={bigFiveColors.extraversion}
+              leftLabel="Concise"
+              rightLabel="Verbose"
+            />
+            <TraitBar
+              label="Agreeableness"
+              value={profile.bigFive.agreeableness}
+              idealValue={idealProfile.agreeableness}
+              color={bigFiveColors.agreeableness}
+              leftLabel="Challenging"
+              rightLabel="Compliant"
+            />
+            <TraitBar
+              label="Neuroticism"
+              value={profile.bigFive.neuroticism}
+              idealValue={idealProfile.neuroticism}
+              color={bigFiveColors.neuroticism}
+              leftLabel="Stable"
+              rightLabel="Reactive"
+            />
+          </CardContent>
+        </Card>
+
+        {/* MBTI */}
+        <Card>
+          <CardHeader>
+            <CardTitle>MBTI Dimensions</CardTitle>
+            <CardDescription>
+              Cognitive style inferred from interaction patterns
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-5">
+            <MBTIDimension
+              label="Energy"
+              value={profile.mbti.ei}
+              leftPole="Introversion (I)"
+              rightPole="Extraversion (E)"
+            />
+            <MBTIDimension
+              label="Information"
+              value={profile.mbti.sn}
+              leftPole="Sensing (S)"
+              rightPole="iNtuition (N)"
+            />
+            <MBTIDimension
+              label="Decisions"
+              value={profile.mbti.tf}
+              leftPole="Thinking (T)"
+              rightPole="Feeling (F)"
+            />
+            <MBTIDimension
+              label="Structure"
+              value={profile.mbti.jp}
+              leftPole="Judging (J)"
+              rightPole="Perceiving (P)"
+            />
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Behavioral Signals */}
+      <Card>
+        <CardHeader>
+          <CardTitle>Behavioral Signals</CardTitle>
+          <CardDescription>
+            Raw metrics extracted from conversation traces that drive personality inference
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-5">
+            {[
+              { label: 'Tool Diversity', value: profile.signals.toolDiversity.toFixed(3) },
+              { label: 'Read-Before-Edit', value: profile.signals.readBeforeEditRatio.toFixed(2) },
+              { label: 'Output/Input Ratio', value: profile.signals.outputInputRatio.toFixed(2) },
+              { label: 'Avg Msg Length', value: `${Math.round(profile.signals.avgAssistantMsgLength)} tok` },
+              { label: 'Bash/Total Ratio', value: profile.signals.bashToTotalRatio.toFixed(3) },
+              { label: 'Edit/Read Ratio', value: profile.signals.editToReadRatio.toFixed(2) },
+              { label: 'Tool Entropy', value: profile.signals.toolTransitionEntropy.toFixed(2) },
+              { label: 'Duration CV', value: profile.signals.sessionDurationVariance.toFixed(2) },
+              { label: 'Tools/Message', value: profile.signals.avgToolCallsPerMessage.toFixed(2) },
+              { label: 'Overflow Rate', value: `${(profile.signals.contextOverflowRate * 100).toFixed(1)}%` },
+            ].map(({ label, value }) => (
+              <div key={label} className="rounded-lg border p-3">
+                <div className="text-xs text-muted-foreground">{label}</div>
+                <div className="text-lg font-semibold">{value}</div>
+              </div>
+            ))}
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Recommendations */}
+      {profile.recommendations.length > 0 && (
+        <Card>
+          <CardHeader>
+            <div className="flex items-center gap-2">
+              <Sparkles className="h-5 w-5 text-primary" />
+              <div>
+                <CardTitle>Personality Tuning Recommendations</CardTitle>
+                <CardDescription>
+                  Adjustments to better fit the {TASK_OPTIONS.find(t => t.value === targetTask)?.label} personality profile
+                </CardDescription>
+              </div>
+            </div>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-4">
+              {profile.recommendations.map((rec) => (
+                <div key={rec.trait} className="rounded-lg border p-4">
+                  <div className="flex items-center gap-2 mb-2">
+                    <Badge variant="outline">{rec.trait}</Badge>
+                    <span className="text-sm text-muted-foreground">{rec.current}</span>
+                    <ArrowRight className="h-3 w-3 text-muted-foreground" />
+                    <span className="text-sm font-medium">{rec.ideal}</span>
+                  </div>
+                  <p className="text-sm text-muted-foreground">{rec.promptSnippet}</p>
+                </div>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
+      {/* System Prompt */}
+      <Card>
+        <CardHeader>
+          <div className="flex items-center justify-between">
+            <div>
+              <CardTitle>Generated System Prompt</CardTitle>
+              <CardDescription>
+                Add this to your AI assistant's system prompt to tune its personality for {TASK_OPTIONS.find(t => t.value === targetTask)?.label}
+              </CardDescription>
+            </div>
+            <Button variant="outline" size="sm" onClick={handleCopyPrompt} className="gap-2">
+              {copied ? <Check className="h-3.5 w-3.5" /> : <Copy className="h-3.5 w-3.5" />}
+              {copied ? 'Copied' : 'Copy'}
+            </Button>
+          </div>
+        </CardHeader>
+        <CardContent>
+          <pre className="max-h-96 overflow-auto rounded-lg bg-muted p-4 text-sm whitespace-pre-wrap">
+            {profile.systemPrompt}
+          </pre>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}

package/components/projects-table.tsx

@@ -0,0 +1,70 @@
+'use client'
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table'
+import { PaginationControls } from '@/components/pagination-controls'
+import { usePagination } from '@/hooks/use-pagination'
+import type { ProjectSummary } from '@/lib/parse-logs'
+import { formatCost, formatTokens, formatDuration, formatNumber } from '@/lib/format'
+
+export function ProjectsTable({ projects }: { projects: ProjectSummary[] }) {
+  const pagination = usePagination(projects, 20)
+
+  const topTools = (toolCalls: Record<string, number>) =>
+    Object.entries(toolCalls)
+      .sort((a, b) => b[1] - a[1])
+      .slice(0, 3)
+      .map(([name, count]) => `${name} (${count})`)
+      .join(', ')
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Projects</CardTitle>
+        <CardDescription>{projects.length} projects tracked</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>Project</TableHead>
+              <TableHead className="text-right">Sessions</TableHead>
+              <TableHead className="text-right">Messages</TableHead>
+              <TableHead className="text-right">Tokens</TableHead>
+              <TableHead className="text-right">Cost</TableHead>
+              <TableHead className="text-right">Duration</TableHead>
+              <TableHead>Top Tools</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {pagination.pageItems.map((p) => (
+              <TableRow key={p.name}>
+                <TableCell className="font-medium">{p.name}</TableCell>
+                <TableCell className="text-right">{formatNumber(p.sessions)}</TableCell>
+                <TableCell className="text-right">{formatNumber(p.totalMessages)}</TableCell>
+                <TableCell className="text-right">{formatTokens(p.totalTokens)}</TableCell>
+                <TableCell className="text-right">{formatCost(p.totalCost)}</TableCell>
+                <TableCell className="text-right">
+                  {formatDuration(p.totalDurationMinutes)}
+                </TableCell>
+                <TableCell className="text-xs text-muted-foreground">
+                  {topTools(p.toolCalls)}
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+        {pagination.totalPages > 1 && (
+          <PaginationControls pagination={pagination} noun="projects" />
+        )}
+      </CardContent>
+    </Card>
+  )
+}