agentfit 0.1.0 → 0.1.2

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>
+  )
+}

package/components/ui/carousel.tsx

@@ -0,0 +1,242 @@
+"use client"
+
+import * as React from "react"
+import useEmblaCarousel, {
+  type UseEmblaCarouselType,
+} from "embla-carousel-react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { IconChevronLeft, IconChevronRight } from "@tabler/icons-react"
+
+type CarouselApi = UseEmblaCarouselType[1]
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
+type CarouselOptions = UseCarouselParameters[0]
+type CarouselPlugin = UseCarouselParameters[1]
+
+type CarouselProps = {
+  opts?: CarouselOptions
+  plugins?: CarouselPlugin
+  orientation?: "horizontal" | "vertical"
+  setApi?: (api: CarouselApi) => void
+}
+
+type CarouselContextProps = {
+  carouselRef: ReturnType<typeof useEmblaCarousel>[0]
+  api: ReturnType<typeof useEmblaCarousel>[1]
+  scrollPrev: () => void
+  scrollNext: () => void
+  canScrollPrev: boolean
+  canScrollNext: boolean
+} & CarouselProps
+
+const CarouselContext = React.createContext<CarouselContextProps | null>(null)
+
+function useCarousel() {
+  const context = React.useContext(CarouselContext)
+
+  if (!context) {
+    throw new Error("useCarousel must be used within a <Carousel />")
+  }
+
+  return context
+}
+
+function Carousel({
+  orientation = "horizontal",
+  opts,
+  setApi,
+  plugins,
+  className,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & CarouselProps) {
+  const [carouselRef, api] = useEmblaCarousel(
+    {
+      ...opts,
+      axis: orientation === "horizontal" ? "x" : "y",
+    },
+    plugins
+  )
+  const [canScrollPrev, setCanScrollPrev] = React.useState(false)
+  const [canScrollNext, setCanScrollNext] = React.useState(false)
+
+  const onSelect = React.useCallback((api: CarouselApi) => {
+    if (!api) return
+    setCanScrollPrev(api.canScrollPrev())
+    setCanScrollNext(api.canScrollNext())
+  }, [])
+
+  const scrollPrev = React.useCallback(() => {
+    api?.scrollPrev()
+  }, [api])
+
+  const scrollNext = React.useCallback(() => {
+    api?.scrollNext()
+  }, [api])
+
+  const handleKeyDown = React.useCallback(
+    (event: React.KeyboardEvent<HTMLDivElement>) => {
+      if (event.key === "ArrowLeft") {
+        event.preventDefault()
+        scrollPrev()
+      } else if (event.key === "ArrowRight") {
+        event.preventDefault()
+        scrollNext()
+      }
+    },
+    [scrollPrev, scrollNext]
+  )
+
+  React.useEffect(() => {
+    if (!api || !setApi) return
+    setApi(api)
+  }, [api, setApi])
+
+  React.useEffect(() => {
+    if (!api) return
+    onSelect(api)
+    api.on("reInit", onSelect)
+    api.on("select", onSelect)
+
+    return () => {
+      api?.off("select", onSelect)
+    }
+  }, [api, onSelect])
+
+  return (
+    <CarouselContext.Provider
+      value={{
+        carouselRef,
+        api: api,
+        opts,
+        orientation:
+          orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+        scrollPrev,
+        scrollNext,
+        canScrollPrev,
+        canScrollNext,
+      }}
+    >
+      <div
+        onKeyDownCapture={handleKeyDown}
+        className={cn("relative", className)}
+        role="region"
+        aria-roledescription="carousel"
+        data-slot="carousel"
+        {...props}
+      >
+        {children}
+      </div>
+    </CarouselContext.Provider>
+  )
+}
+
+function CarouselContent({ className, ...props }: React.ComponentProps<"div">) {
+  const { carouselRef, orientation } = useCarousel()
+
+  return (
+    <div
+      ref={carouselRef}
+      className="overflow-hidden"
+      data-slot="carousel-content"
+    >
+      <div
+        className={cn(
+          "flex",
+          orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
+          className
+        )}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function CarouselItem({ className, ...props }: React.ComponentProps<"div">) {
+  const { orientation } = useCarousel()
+
+  return (
+    <div
+      role="group"
+      aria-roledescription="slide"
+      data-slot="carousel-item"
+      className={cn(
+        "min-w-0 shrink-0 grow-0 basis-full",
+        orientation === "horizontal" ? "pl-4" : "pt-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CarouselPrevious({
+  className,
+  variant = "outline",
+  size = "icon-sm",
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  const { orientation, scrollPrev, canScrollPrev } = useCarousel()
+
+  return (
+    <Button
+      data-slot="carousel-previous"
+      variant={variant}
+      size={size}
+      className={cn(
+        "absolute touch-manipulation rounded-full",
+        orientation === "horizontal"
+          ? "top-1/2 -left-12 -translate-y-1/2"
+          : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+        className
+      )}
+      disabled={!canScrollPrev}
+      onClick={scrollPrev}
+      {...props}
+    >
+      <IconChevronLeft />
+      <span className="sr-only">Previous slide</span>
+    </Button>
+  )
+}
+
+function CarouselNext({
+  className,
+  variant = "outline",
+  size = "icon-sm",
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  const { orientation, scrollNext, canScrollNext } = useCarousel()
+
+  return (
+    <Button
+      data-slot="carousel-next"
+      variant={variant}
+      size={size}
+      className={cn(
+        "absolute touch-manipulation rounded-full",
+        orientation === "horizontal"
+          ? "top-1/2 -right-12 -translate-y-1/2"
+          : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+        className
+      )}
+      disabled={!canScrollNext}
+      onClick={scrollNext}
+      {...props}
+    >
+      <IconChevronRight />
+      <span className="sr-only">Next slide</span>
+    </Button>
+  )
+}
+
+export {
+  type CarouselApi,
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselPrevious,
+  CarouselNext,
+  useCarousel,
+}

package/components/ui/sidebar.tsx

@@ -27,7 +27,7 @@ import { IconLayoutSidebar } from "@tabler/icons-react"
 
 const SIDEBAR_COOKIE_NAME = "sidebar_state"
 const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
-const SIDEBAR_WIDTH = "16rem"
+const SIDEBAR_WIDTH = "14rem"
 const SIDEBAR_WIDTH_MOBILE = "18rem"
 const SIDEBAR_WIDTH_ICON = "3rem"
 const SIDEBAR_KEYBOARD_SHORTCUT = "b"

package/components/ui/sonner.tsx

@@ -0,0 +1,51 @@
+"use client"
+
+import { useTheme } from "next-themes"
+import { Toaster as Sonner, type ToasterProps } from "sonner"
+import { IconCircleCheck, IconInfoCircle, IconAlertTriangle, IconAlertOctagon, IconLoader } from "@tabler/icons-react"
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme()
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      position="top-center"
+      richColors
+      icons={{
+        success: (
+          <IconCircleCheck className="size-4" />
+        ),
+        info: (
+          <IconInfoCircle className="size-4" />
+        ),
+        warning: (
+          <IconAlertTriangle className="size-4" />
+        ),
+        error: (
+          <IconAlertOctagon className="size-4" />
+        ),
+        loading: (
+          <IconLoader className="size-4 animate-spin" />
+        ),
+      }}
+      style={
+        {
+          "--normal-bg": "var(--popover)",
+          "--normal-text": "var(--popover-foreground)",
+          "--normal-border": "var(--border)",
+          "--border-radius": "var(--radius)",
+        } as React.CSSProperties
+      }
+      toastOptions={{
+        classNames: {
+          toast: "cn-toast",
+        },
+      }}
+      {...props}
+    />
+  )
+}
+
+export { Toaster }

package/electron/entitlements.mac.plist

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+    <key>com.apple.security.cs.allow-jit</key>
+    <true/>
+    <key>com.apple.security.cs.allow-unsigned-executable-memory</key>
+    <true/>
+    <key>com.apple.security.cs.allow-dyld-environment-variables</key>
+    <true/>
+    <key>com.apple.security.network.client</key>
+    <true/>
+    <key>com.apple.security.files.user-selected.read-write</key>
+    <true/>
+</dict>
+</plist>

package/electron/init-db.mjs

@@ -0,0 +1,37 @@
+/**
+ * Database initialization script.
+ * Spawned by Electron main process with ELECTRON_RUN_AS_NODE=1.
+ * Reads schema.sql and executes it against the SQLite database.
+ * Uses @libsql/client which is already bundled — works on macOS, Linux, and Windows.
+ *
+ * Usage: node init-db.mjs <db-path> <schema-sql-path>
+ */
+
+import { readFileSync } from 'fs'
+import { createRequire } from 'module'
+import path from 'path'
+
+const [dbPath, schemaPath] = process.argv.slice(2)
+
+// In packaged app, @libsql/client lives inside electron/server/node_modules
+const serverDir = path.join(path.dirname(new URL(import.meta.url).pathname), 'server')
+const require = createRequire(path.join(serverDir, 'package.json'))
+const { createClient } = require('@libsql/client')
+
+if (!dbPath || !schemaPath) {
+  console.error('Usage: node init-db.mjs <db-path> <schema-sql-path>')
+  process.exit(1)
+}
+
+const client = createClient({ url: `file:${dbPath}` })
+const sql = readFileSync(schemaPath, 'utf-8')
+
+try {
+  await client.executeMultiple(sql)
+  console.log('Database ready.')
+} catch (err) {
+  console.error(`Database init error: ${err.message}`)
+  process.exit(1)
+} finally {
+  client.close()
+}

package/electron/main.mjs

@@ -0,0 +1,203 @@
+import { app, BrowserWindow, shell, dialog } from 'electron'
+import { execSync, spawn } from 'child_process'
+import { existsSync } from 'fs'
+import path from 'path'
+import http from 'http'
+
+const isPacked = app.isPackaged
+
+// In packed app, asarUnpacked content is at app.asar.unpacked
+const SERVER_DIR = isPacked
+  ? path.join(process.resourcesPath, 'app.asar.unpacked', 'electron', 'server')
+  : path.join(import.meta.dirname, 'server')
+
+const PRISMA_DIR = isPacked
+  ? path.join(process.resourcesPath, 'prisma')
+  : path.join(import.meta.dirname, '..', 'prisma')
+
+const USER_DATA = app.getPath('userData')
+const DB_PATH = path.join(USER_DATA, 'agentfit.db')
+const PORT = 13749
+
+let serverProcess = null
+let mainWindow = null
+
+function log(msg) {
+  try {
+    console.log(`[AgentFit] ${msg}`)
+  } catch {
+    // Ignore EPIPE — no terminal in packaged app
+  }
+}
+
+// Prevent uncaught EPIPE from crashing the app
+process.on('uncaughtException', (err) => {
+  if (err.code === 'EPIPE') return
+  throw err
+})
+
+function ensureDatabase() {
+  const schemaSQL = path.join(PRISMA_DIR, 'schema.sql')
+  const initScript = isPacked
+    ? path.join(process.resourcesPath, 'app.asar.unpacked', 'electron', 'init-db.mjs')
+    : path.join(import.meta.dirname, 'init-db.mjs')
+
+  if (!existsSync(schemaSQL)) {
+    throw new Error(`schema.sql not found at ${schemaSQL}. Run "npm run prisma:schema-sql" first.`)
+  }
+
+  log(existsSync(DB_PATH) ? 'Checking database schema...' : 'Creating database...')
+
+  // Run init-db.mjs using Electron's bundled Node.js runtime.
+  // Uses @libsql/client (already bundled) — works on macOS, Linux, and Windows.
+  // schema.sql uses IF NOT EXISTS — safe to run on existing DBs.
+  try {
+    execSync(
+      `"${process.execPath}" "${initScript}" "${DB_PATH}" "${schemaSQL}"`,
+      {
+        stdio: 'pipe',
+        timeout: 15000,
+        env: { ...process.env, ELECTRON_RUN_AS_NODE: '1' },
+      }
+    )
+    log('Database ready.')
+  } catch (err) {
+    const stderr = err.stderr?.toString() || err.message
+    log(`Database setup warning: ${stderr}`)
+  }
+}
+
+function startServer() {
+  return new Promise((resolve, reject) => {
+    const serverJs = path.join(SERVER_DIR, 'server.js')
+
+    if (!existsSync(serverJs)) {
+      reject(new Error(`Server not found at ${serverJs}. Run "npm run electron:prepare" first.`))
+      return
+    }
+
+    log(`Starting server from ${serverJs}`)
+
+    // In packaged Electron, process.execPath is the Electron binary.
+    // We need to set ELECTRON_RUN_AS_NODE=1 so it acts as plain Node.js.
+    serverProcess = spawn(process.execPath, [serverJs], {
+      cwd: SERVER_DIR,
+      stdio: ['ignore', 'pipe', 'pipe'],
+      env: {
+        ...process.env,
+        ELECTRON_RUN_AS_NODE: '1',
+        PORT: String(PORT),
+        HOSTNAME: '127.0.0.1',
+        DATABASE_URL: `file:${DB_PATH}`,
+        NODE_ENV: 'production',
+      },
+    })
+
+    serverProcess.stdout?.on('data', (d) => log(d.toString().trim()))
+    serverProcess.stderr?.on('data', (d) => log(d.toString().trim()))
+    serverProcess.on('error', (err) => {
+      log(`Server process error: ${err.message}`)
+      reject(err)
+    })
+    serverProcess.on('exit', (code) => {
+      if (code !== null && code !== 0) {
+        log(`Server exited with code ${code}`)
+      }
+    })
+
+    // Poll until ready
+    let attempts = 0
+    const check = () => {
+      attempts++
+      http.get(`http://127.0.0.1:${PORT}`, () => resolve()).on('error', () => {
+        if (attempts >= 60) reject(new Error('Server failed to start within 30s'))
+        else setTimeout(check, 500)
+      })
+    }
+    setTimeout(check, 1000)
+  })
+}
+
+function createWindow() {
+  mainWindow = new BrowserWindow({
+    width: 1400,
+    height: 900,
+    minWidth: 900,
+    minHeight: 600,
+    title: 'AgentFit',
+    webPreferences: {
+      nodeIntegration: false,
+      contextIsolation: true,
+    },
+  })
+
+  mainWindow.loadURL(`http://127.0.0.1:${PORT}`)
+
+  mainWindow.webContents.setWindowOpenHandler(({ url }) => {
+    shell.openExternal(url)
+    return { action: 'deny' }
+  })
+
+  mainWindow.on('closed', () => {
+    mainWindow = null
+  })
+}
+
+function showSplash() {
+  const splash = new BrowserWindow({
+    width: 400,
+    height: 300,
+    frame: false,
+    transparent: true,
+    resizable: false,
+    alwaysOnTop: true,
+  })
+
+  splash.loadURL(`data:text/html,
+    <html>
+    <body style="display:flex;align-items:center;justify-content:center;height:100vh;margin:0;font-family:system-ui;background:rgba(0,0,0,0.85);color:white;border-radius:16px;-webkit-app-region:drag;">
+      <div style="text-align:center">
+        <h1 style="font-size:28px;margin-bottom:8px">AgentFit</h1>
+        <p style="opacity:0.7;font-size:14px">Starting server...</p>
+      </div>
+    </body>
+    </html>
+  `)
+
+  return splash
+}
+
+app.whenReady().then(async () => {
+  const splash = showSplash()
+
+  try {
+    ensureDatabase()
+    await startServer()
+    splash.close()
+    createWindow()
+  } catch (err) {
+    splash.close()
+    log(`Startup error: ${err.message}`)
+    dialog.showErrorBox('AgentFit Startup Error', `Failed to start: ${err.message}`)
+    app.quit()
+  }
+})
+
+app.on('window-all-closed', () => {
+  if (serverProcess) {
+    serverProcess.kill('SIGTERM')
+    serverProcess = null
+  }
+  app.quit()
+})
+
+app.on('before-quit', () => {
+  if (serverProcess) {
+    serverProcess.kill('SIGTERM')
+    serverProcess = null
+  }
+})
+
+app.on('activate', () => {
+  if (mainWindow === null) createWindow()
+})