@hasna/logs 0.0.1 → 0.2.0

package/dashboard/src/pages/Issues.tsx

@@ -0,0 +1,50 @@
+import { useEffect, useState } from 'react'
+import { get, put, type Issue } from '../api'
+
+const STATUS_COLOR: Record<string, string> = { open: '#f87171', resolved: '#4ade80', ignored: '#64748b' }
+
+export function Issues() {
+  const [issues, setIssues] = useState<Issue[]>([])
+  const [status, setStatus] = useState('open')
+
+  const load = () => get<Issue[]>(`/issues?status=${status}&limit=100`).then(setIssues).catch(() => {})
+  useEffect(() => { load() }, [status])
+
+  const updateStatus = async (id: string, s: string) => {
+    await put(`/issues/${id}`, { status: s })
+    load()
+  }
+
+  return (
+    <div>
+      <div style={{ display: 'flex', gap: 12, marginBottom: 16, alignItems: 'center' }}>
+        <h2 style={{ margin: 0, color: '#38bdf8' }}>Issues</h2>
+        {['open', 'resolved', 'ignored'].map(s => (
+          <button key={s} onClick={() => setStatus(s)} style={{ background: status === s ? '#1e40af' : '#1e293b', color: '#e2e8f0', border: 'none', padding: '4px 12px', borderRadius: 4, cursor: 'pointer', textTransform: 'capitalize' }}>{s}</button>
+        ))}
+        <span style={{ color: '#64748b', fontSize: 12 }}>{issues.length} issue(s)</span>
+      </div>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+        {issues.length === 0 && <div style={{ color: '#64748b', padding: 20, textAlign: 'center' }}>No {status} issues 🎉</div>}
+        {issues.map(issue => (
+          <div key={issue.id} style={{ background: '#1e293b', borderRadius: 8, padding: '12px 16px', display: 'flex', gap: 16, alignItems: 'flex-start' }}>
+            <div style={{ flex: 1 }}>
+              <div style={{ display: 'flex', gap: 8, alignItems: 'center', marginBottom: 4 }}>
+                <span style={{ color: STATUS_COLOR[issue.status] ?? '#e2e8f0', fontWeight: 700, fontSize: 12 }}>{issue.level.toUpperCase()}</span>
+                {issue.service && <span style={{ color: '#7dd3fc', fontSize: 12 }}>{issue.service}</span>}
+                <span style={{ color: '#64748b', fontSize: 11 }}>×{issue.count}</span>
+                <span style={{ color: '#475569', fontSize: 11 }}>last: {issue.last_seen.slice(0, 16).replace('T', ' ')}</span>
+              </div>
+              <div style={{ color: '#e2e8f0', fontSize: 13 }}>{issue.message_template}</div>
+            </div>
+            <div style={{ display: 'flex', gap: 6 }}>
+              {issue.status !== 'resolved' && <button onClick={() => updateStatus(issue.id, 'resolved')} style={{ background: '#166534', color: '#4ade80', border: 'none', padding: '3px 8px', borderRadius: 4, cursor: 'pointer', fontSize: 12 }}>Resolve</button>}
+              {issue.status !== 'ignored' && <button onClick={() => updateStatus(issue.id, 'ignored')} style={{ background: '#1e293b', color: '#64748b', border: '1px solid #334155', padding: '3px 8px', borderRadius: 4, cursor: 'pointer', fontSize: 12 }}>Ignore</button>}
+              {issue.status !== 'open' && <button onClick={() => updateStatus(issue.id, 'open')} style={{ background: '#7f1d1d', color: '#f87171', border: 'none', padding: '3px 8px', borderRadius: 4, cursor: 'pointer', fontSize: 12 }}>Reopen</button>}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}

package/dashboard/src/pages/Perf.tsx

@@ -0,0 +1,75 @@
+import { useEffect, useState } from 'react'
+import { LineChart, Line, XAxis, YAxis, Tooltip, ResponsiveContainer } from 'recharts'
+import { get, type Project, type PerfSnapshot } from '../api'
+
+function ScoreBadge({ score }: { score: number | null }) {
+  const color = score === null ? '#64748b' : score >= 90 ? '#4ade80' : score >= 50 ? '#fbbf24' : '#f87171'
+  return <span style={{ color, fontWeight: 700, fontSize: 18 }}>{score !== null ? Math.round(score) : '—'}</span>
+}
+
+export function Perf() {
+  const [projects, setProjects] = useState<Project[]>([])
+  const [selected, setSelected] = useState<string>('')
+  const [trend, setTrend] = useState<PerfSnapshot[]>([])
+
+  useEffect(() => {
+    get<Project[]>('/projects').then(p => { setProjects(p); if (p[0]) setSelected(p[0].id) }).catch(() => {})
+  }, [])
+
+  useEffect(() => {
+    if (!selected) return
+    get<PerfSnapshot[]>(`/perf/trend?project_id=${selected}&limit=30`).then(setTrend).catch(() => {})
+  }, [selected])
+
+  const chartData = [...trend].reverse().map(s => ({
+    time: s.timestamp.slice(5, 16).replace('T', ' '),
+    score: s.score !== null ? Math.round(s.score) : null,
+    lcp: s.lcp !== null ? Math.round(s.lcp) : null,
+    fcp: s.fcp !== null ? Math.round(s.fcp) : null,
+  }))
+
+  return (
+    <div>
+      <div style={{ display: 'flex', gap: 12, marginBottom: 16, alignItems: 'center' }}>
+        <h2 style={{ margin: 0, color: '#38bdf8' }}>Performance</h2>
+        <select value={selected} onChange={e => setSelected(e.target.value)} style={{ background: '#1e293b', border: '1px solid #334155', color: '#e2e8f0', padding: '4px 8px', borderRadius: 4 }}>
+          {projects.map(p => <option key={p.id} value={p.id}>{p.name}</option>)}
+        </select>
+      </div>
+
+      {trend.length > 0 && (
+        <div style={{ display: 'flex', gap: 16, marginBottom: 20, flexWrap: 'wrap' }}>
+          {[
+            { label: 'Score', value: trend[0]?.score ?? null },
+            { label: 'LCP (ms)', value: trend[0]?.lcp !== null && trend[0]?.lcp !== undefined ? Math.round(trend[0].lcp) : null },
+            { label: 'FCP (ms)', value: trend[0]?.fcp !== null && trend[0]?.fcp !== undefined ? Math.round(trend[0].fcp) : null },
+            { label: 'CLS', value: trend[0]?.cls !== null && trend[0]?.cls !== undefined ? trend[0].cls.toFixed(3) : null },
+          ].map(stat => (
+            <div key={stat.label} style={{ background: '#1e293b', borderRadius: 8, padding: '12px 20px', textAlign: 'center', minWidth: 100 }}>
+              <ScoreBadge score={Number(stat.value)} />
+              <div style={{ color: '#64748b', fontSize: 12, marginTop: 4 }}>{stat.label}</div>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {chartData.length > 1 ? (
+        <div style={{ background: '#1e293b', borderRadius: 8, padding: 20 }}>
+          <div style={{ color: '#94a3b8', marginBottom: 12, fontSize: 13 }}>Performance Score Over Time</div>
+          <ResponsiveContainer width="100%" height={250}>
+            <LineChart data={chartData}>
+              <XAxis dataKey="time" stroke="#64748b" tick={{ fill: '#94a3b8', fontSize: 11 }} />
+              <YAxis domain={[0, 100]} stroke="#64748b" tick={{ fill: '#94a3b8', fontSize: 12 }} />
+              <Tooltip contentStyle={{ background: '#0f172a', border: '1px solid #334155', color: '#e2e8f0' }} />
+              <Line type="monotone" dataKey="score" stroke="#38bdf8" strokeWidth={2} dot={false} />
+            </LineChart>
+          </ResponsiveContainer>
+        </div>
+      ) : (
+        <div style={{ color: '#64748b', padding: 40, textAlign: 'center', background: '#1e293b', borderRadius: 8 }}>
+          {projects.length === 0 ? 'No projects yet. Register one via CLI or MCP.' : 'No performance data yet. Run a scan job to collect metrics.'}
+        </div>
+      )}
+    </div>
+  )
+}

package/dashboard/src/pages/Projects.tsx

@@ -0,0 +1,67 @@
+import { useEffect, useState } from 'react'
+import { get, post, type Project } from '../api'
+
+export function Projects() {
+  const [projects, setProjects] = useState<Project[]>([])
+  const [form, setForm] = useState({ name: '', github_repo: '', base_url: '' })
+  const [pageForm, setPageForm] = useState({ project_id: '', url: '', name: '' })
+
+  const load = () => get<Project[]>('/projects').then(setProjects).catch(() => {})
+  useEffect(() => { load() }, [])
+
+  const create = async () => {
+    if (!form.name) return
+    await post('/projects', form)
+    setForm({ name: '', github_repo: '', base_url: '' })
+    load()
+  }
+
+  const addPage = async () => {
+    if (!pageForm.project_id || !pageForm.url) return
+    await post(`/projects/${pageForm.project_id}/pages`, { url: pageForm.url, name: pageForm.name })
+    setPageForm(f => ({ ...f, url: '', name: '' }))
+  }
+
+  return (
+    <div>
+      <h2 style={{ color: '#38bdf8', marginBottom: 16 }}>Projects</h2>
+
+      <div style={{ background: '#1e293b', borderRadius: 8, padding: 16, marginBottom: 16 }}>
+        <div style={{ color: '#94a3b8', fontSize: 13, marginBottom: 10 }}>Register Project</div>
+        <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
+          <input placeholder="Name *" value={form.name} onChange={e => setForm(f => ({ ...f, name: e.target.value }))} style={{ background: '#0f172a', border: '1px solid #334155', color: '#e2e8f0', padding: '4px 8px', borderRadius: 4, fontFamily: 'monospace' }} />
+          <input placeholder="GitHub repo" value={form.github_repo} onChange={e => setForm(f => ({ ...f, github_repo: e.target.value }))} style={{ background: '#0f172a', border: '1px solid #334155', color: '#e2e8f0', padding: '4px 8px', borderRadius: 4, width: 220, fontFamily: 'monospace' }} />
+          <input placeholder="Base URL" value={form.base_url} onChange={e => setForm(f => ({ ...f, base_url: e.target.value }))} style={{ background: '#0f172a', border: '1px solid #334155', color: '#e2e8f0', padding: '4px 8px', borderRadius: 4, width: 200, fontFamily: 'monospace' }} />
+          <button onClick={create} style={{ background: '#1e40af', color: '#e2e8f0', border: 'none', padding: '4px 16px', borderRadius: 4, cursor: 'pointer' }}>+ Create</button>
+        </div>
+      </div>
+
+      <div style={{ background: '#1e293b', borderRadius: 8, padding: 16, marginBottom: 20 }}>
+        <div style={{ color: '#94a3b8', fontSize: 13, marginBottom: 10 }}>Register Page</div>
+        <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
+          <select value={pageForm.project_id} onChange={e => setPageForm(f => ({ ...f, project_id: e.target.value }))} style={{ background: '#0f172a', border: '1px solid #334155', color: '#e2e8f0', padding: '4px 8px', borderRadius: 4 }}>
+            <option value="">Select project</option>
+            {projects.map(p => <option key={p.id} value={p.id}>{p.name}</option>)}
+          </select>
+          <input placeholder="URL *" value={pageForm.url} onChange={e => setPageForm(f => ({ ...f, url: e.target.value }))} style={{ background: '#0f172a', border: '1px solid #334155', color: '#e2e8f0', padding: '4px 8px', borderRadius: 4, width: 250, fontFamily: 'monospace' }} />
+          <input placeholder="Name" value={pageForm.name} onChange={e => setPageForm(f => ({ ...f, name: e.target.value }))} style={{ background: '#0f172a', border: '1px solid #334155', color: '#e2e8f0', padding: '4px 8px', borderRadius: 4, fontFamily: 'monospace' }} />
+          <button onClick={addPage} style={{ background: '#1e40af', color: '#e2e8f0', border: 'none', padding: '4px 16px', borderRadius: 4, cursor: 'pointer' }}>+ Add Page</button>
+        </div>
+      </div>
+
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+        {projects.length === 0 && <div style={{ color: '#64748b', padding: 20, textAlign: 'center' }}>No projects yet.</div>}
+        {projects.map(p => (
+          <div key={p.id} style={{ background: '#1e293b', borderRadius: 8, padding: '12px 16px' }}>
+            <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
+              <span style={{ color: '#e2e8f0', fontWeight: 600 }}>{p.name}</span>
+              <span style={{ color: '#475569', fontSize: 11 }}>{p.id}</span>
+              {p.base_url && <a href={p.base_url} target="_blank" rel="noreferrer" style={{ color: '#38bdf8', fontSize: 12 }}>{p.base_url}</a>}
+              {p.github_repo && <span style={{ color: '#7dd3fc', fontSize: 12 }}>⎋ {p.github_repo}</span>}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}

package/dashboard/src/pages/Summary.tsx

@@ -0,0 +1,67 @@
+import { useEffect, useState } from 'react'
+import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer, Legend } from 'recharts'
+import { get, type LogSummary, type Health } from '../api'
+
+export function Summary() {
+  const [summary, setSummary] = useState<LogSummary[]>([])
+  const [health, setHealth] = useState<Health | null>(null)
+
+  useEffect(() => {
+    get<LogSummary[]>('/logs/summary?since=' + new Date(Date.now() - 24 * 3600 * 1000).toISOString()).then(setSummary).catch(() => {})
+    fetch('/health').then(r => r.json()).then(setHealth).catch(() => {})
+  }, [])
+
+  // Group by service for chart
+  const byService = summary.reduce<Record<string, { service: string; error: number; warn: number; fatal: number }>>((acc, s) => {
+    const svc = s.service ?? 'unknown'
+    if (!acc[svc]) acc[svc] = { service: svc, error: 0, warn: 0, fatal: 0 }
+    if (s.level === 'error') acc[svc]!.error += s.count
+    if (s.level === 'warn') acc[svc]!.warn += s.count
+    if (s.level === 'fatal') acc[svc]!.fatal += s.count
+    return acc
+  }, {})
+  const chartData = Object.values(byService).sort((a, b) => (b.error + b.fatal) - (a.error + a.fatal))
+
+  return (
+    <div>
+      <h2 style={{ color: '#38bdf8', marginBottom: 16 }}>Summary (last 24h)</h2>
+
+      {health && (
+        <div style={{ display: 'flex', gap: 16, marginBottom: 24, flexWrap: 'wrap' }}>
+          {[
+            { label: 'Total Logs', value: health.total_logs.toLocaleString(), color: '#38bdf8' },
+            { label: 'Projects', value: health.projects, color: '#7dd3fc' },
+            { label: 'Open Issues', value: health.open_issues, color: health.open_issues > 0 ? '#f87171' : '#4ade80' },
+            { label: 'Errors', value: (health.logs_by_level['error'] ?? 0) + (health.logs_by_level['fatal'] ?? 0), color: '#f87171' },
+            { label: 'Warnings', value: health.logs_by_level['warn'] ?? 0, color: '#fbbf24' },
+            { label: 'Uptime', value: `${Math.floor(health.uptime_seconds / 60)}m`, color: '#4ade80' },
+          ].map(stat => (
+            <div key={stat.label} style={{ background: '#1e293b', borderRadius: 8, padding: '12px 20px', minWidth: 120, textAlign: 'center' }}>
+              <div style={{ color: stat.color, fontSize: 24, fontWeight: 700 }}>{stat.value}</div>
+              <div style={{ color: '#64748b', fontSize: 12, marginTop: 4 }}>{stat.label}</div>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {chartData.length > 0 ? (
+        <div style={{ background: '#1e293b', borderRadius: 8, padding: 20 }}>
+          <div style={{ color: '#94a3b8', marginBottom: 12, fontSize: 13 }}>Errors & Warnings by Service</div>
+          <ResponsiveContainer width="100%" height={300}>
+            <BarChart data={chartData}>
+              <XAxis dataKey="service" stroke="#64748b" tick={{ fill: '#94a3b8', fontSize: 12 }} />
+              <YAxis stroke="#64748b" tick={{ fill: '#94a3b8', fontSize: 12 }} />
+              <Tooltip contentStyle={{ background: '#0f172a', border: '1px solid #334155', color: '#e2e8f0' }} />
+              <Legend wrapperStyle={{ color: '#94a3b8' }} />
+              <Bar dataKey="fatal" fill="#c084fc" stackId="a" />
+              <Bar dataKey="error" fill="#f87171" stackId="a" />
+              <Bar dataKey="warn" fill="#fbbf24" stackId="a" />
+            </BarChart>
+          </ResponsiveContainer>
+        </div>
+      ) : (
+        <div style={{ color: '#64748b', padding: 40, textAlign: 'center', background: '#1e293b', borderRadius: 8 }}>No errors or warnings in the last 24h 🎉</div>
+      )}
+    </div>
+  )
+}

package/dashboard/src/pages/Tail.tsx

@@ -0,0 +1,65 @@
+import { useEffect, useRef, useState } from 'react'
+import type { LogRow } from '../api'
+
+const LEVEL_COLOR: Record<string, string> = {
+  debug: '#64748b', info: '#22d3ee', warn: '#fbbf24', error: '#f87171', fatal: '#c084fc'
+}
+
+export function Tail() {
+  const [logs, setLogs] = useState<LogRow[]>([])
+  const [paused, setPaused] = useState(false)
+  const [filter, setFilter] = useState('')
+  const bottomRef = useRef<HTMLDivElement>(null)
+  const esRef = useRef<EventSource | null>(null)
+
+  useEffect(() => {
+    const es = new EventSource('/api/logs/stream')
+    esRef.current = es
+    es.onmessage = (e) => {
+      if (paused) return
+      try {
+        const log = JSON.parse(e.data) as LogRow
+        setLogs(prev => [...prev.slice(-499), log])
+      } catch {}
+    }
+    return () => es.close()
+  }, [paused])
+
+  useEffect(() => {
+    if (!paused) bottomRef.current?.scrollIntoView({ behavior: 'smooth' })
+  }, [logs, paused])
+
+  const filtered = filter
+    ? logs.filter(l => l.message.toLowerCase().includes(filter.toLowerCase()) || (l.service ?? '').includes(filter))
+    : logs
+
+  return (
+    <div>
+      <div style={{ display: 'flex', gap: 12, marginBottom: 12, alignItems: 'center' }}>
+        <h2 style={{ margin: 0, color: '#38bdf8' }}>Live Tail</h2>
+        <input
+          placeholder="Filter..."
+          value={filter}
+          onChange={e => setFilter(e.target.value)}
+          style={{ background: '#1e293b', border: '1px solid #334155', color: '#e2e8f0', padding: '4px 8px', borderRadius: 4, fontFamily: 'monospace' }}
+        />
+        <button onClick={() => setPaused(p => !p)} style={{ background: paused ? '#22d3ee' : '#334155', color: paused ? '#0f172a' : '#e2e8f0', border: 'none', padding: '4px 12px', borderRadius: 4, cursor: 'pointer' }}>
+          {paused ? '▶ Resume' : '⏸ Pause'}
+        </button>
+        <button onClick={() => setLogs([])} style={{ background: '#334155', color: '#e2e8f0', border: 'none', padding: '4px 12px', borderRadius: 4, cursor: 'pointer' }}>Clear</button>
+        <span style={{ color: '#64748b', fontSize: 12 }}>{filtered.length} logs</span>
+      </div>
+      <div style={{ background: '#020617', borderRadius: 8, padding: 12, height: 'calc(100vh - 160px)', overflowY: 'auto', fontSize: 13 }}>
+        {filtered.map(log => (
+          <div key={log.id} style={{ display: 'flex', gap: 12, marginBottom: 2, lineHeight: 1.5 }}>
+            <span style={{ color: '#475569', minWidth: 200 }}>{log.timestamp.slice(0, 19).replace('T', ' ')}</span>
+            <span style={{ color: LEVEL_COLOR[log.level] ?? '#e2e8f0', minWidth: 50, fontWeight: 700 }}>{log.level.toUpperCase()}</span>
+            <span style={{ color: '#7dd3fc', minWidth: 100 }}>{log.service ?? '-'}</span>
+            <span style={{ color: '#e2e8f0', wordBreak: 'break-all' }}>{log.message}</span>
+          </div>
+        ))}
+        <div ref={bottomRef} />
+      </div>
+    </div>
+  )
+}

package/dashboard/tsconfig.app.json

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2023",
+    "useDefineForClassFields": true,
+    "lib": ["ES2023", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}

package/dashboard/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

package/dashboard/tsconfig.node.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/dashboard/vite.config.ts

@@ -0,0 +1,14 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+  plugins: [react()],
+  base: '/dashboard/',
+  build: { outDir: 'dist' },
+  server: {
+    proxy: {
+      '/api': 'http://localhost:3460',
+      '/health': 'http://localhost:3460',
+    }
+  }
+})

package/dist/cli/index.js

@@ -2,7 +2,7 @@
 // @bun
 import {
   runJob
-} from "../index-dh02dp7n.js";
+} from "../index-2p6ynjet.js";
 import {
   createPage,
   createProject,
@@ -10,17 +10,21 @@ import {
   ingestLog,
   listPages,
   listProjects,
+  summarizeLogs
+} from "../index-77ss2sf4.js";
+import {
+  createJob,
+  listJobs
+} from "../jobs-124e878j.js";
+import {
   searchLogs,
-  summarizeLogs,
   tailLogs
-} from "../index-zj6ymcv7.js";
+} from "../query-0qv7fvzt.js";
 import {
   __commonJS,
   __require,
-  __toESM,
-  createJob,
-  listJobs
-} from "../index-4mnved04.js";
+  __toESM
+} from "../index-g8dczzvv.js";
 
 // node_modules/commander/lib/error.js
 var require_error = __commonJS((exports) => {
@@ -2231,7 +2235,7 @@ program2.command("scan").description("Run an immediate scan for a job").option("
     process.exit(1);
   }
   const db = getDb();
-  const job = (await import("../jobs-zv49jh0y.js")).getJob(db, opts.job);
+  const job = (await import("../jobs-124e878j.js")).getJob(db, opts.job);
   if (!job) {
     console.error("Job not found");
     process.exit(1);
@@ -2240,13 +2244,113 @@ program2.command("scan").description("Run an immediate scan for a job").option("
   await runJob(db, job.id, job.project_id, job.page_id ?? undefined);
   console.log("Scan complete.");
 });
+program2.command("watch").description("Stream new logs in real time with color coding").option("--project <id>").option("--level <levels>", "Comma-separated levels").option("--service <name>").action(async (opts) => {
+  const db = getDb();
+  const { searchLogs: searchLogs2 } = await import("../query-0qv7fvzt.js");
+  const COLORS = {
+    debug: "\x1B[90m",
+    info: "\x1B[36m",
+    warn: "\x1B[33m",
+    error: "\x1B[31m",
+    fatal: "\x1B[35m"
+  };
+  const RESET = "\x1B[0m";
+  const BOLD = "\x1B[1m";
+  let lastTimestamp = new Date().toISOString();
+  let errorCount = 0;
+  let warnCount = 0;
+  process.stdout.write(`\x1B[2J\x1B[H`);
+  console.log(`${BOLD}@hasna/logs watch${RESET} \u2014 Ctrl+C to exit
+`);
+  const poll = () => {
+    const rows = searchLogs2(db, {
+      project_id: opts.project,
+      level: opts.level ? opts.level.split(",") : undefined,
+      service: opts.service,
+      since: lastTimestamp,
+      limit: 100
+    }).reverse();
+    for (const row of rows) {
+      if (row.timestamp <= lastTimestamp)
+        continue;
+      lastTimestamp = row.timestamp;
+      if (row.level === "error" || row.level === "fatal")
+        errorCount++;
+      if (row.level === "warn")
+        warnCount++;
+      const color = COLORS[row.level] ?? "";
+      const ts = row.timestamp.slice(11, 19);
+      const svc = (row.service ?? "-").padEnd(12);
+      const lvl = row.level.toUpperCase().padEnd(5);
+      console.log(`${color}${ts}  ${BOLD}${lvl}${RESET}${color}  ${svc}  ${row.message}${RESET}`);
+    }
+    process.stdout.write(`\x1B]2;logs: ${errorCount}E ${warnCount}W\x07`);
+  };
+  const interval = setInterval(poll, 500);
+  process.on("SIGINT", () => {
+    clearInterval(interval);
+    console.log(`
+
+Errors: ${errorCount}  Warnings: ${warnCount}`);
+    process.exit(0);
+  });
+});
+program2.command("export").description("Export logs to JSON or CSV").option("--project <id>").option("--since <time>", "Relative time or ISO").option("--level <level>").option("--service <name>").option("--format <fmt>", "json or csv", "json").option("--output <file>", "Output file (default: stdout)").option("--limit <n>", "Max rows", "100000").action(async (opts) => {
+  const { exportToCsv, exportToJson } = await import("../export-yjaw2sr3.js");
+  const { createWriteStream } = await import("fs");
+  const db = getDb();
+  const options = {
+    project_id: opts.project,
+    since: parseRelativeTime(opts.since),
+    level: opts.level,
+    service: opts.service,
+    limit: Number(opts.limit)
+  };
+  let count = 0;
+  if (opts.output) {
+    const stream = createWriteStream(opts.output);
+    const write = (s) => stream.write(s);
+    count = opts.format === "csv" ? exportToCsv(db, options, write) : exportToJson(db, options, write);
+    stream.end();
+    console.error(`Exported ${count} log(s) to ${opts.output}`);
+  } else {
+    const write = (s) => process.stdout.write(s);
+    count = opts.format === "csv" ? exportToCsv(db, options, write) : exportToJson(db, options, write);
+    process.stderr.write(`
+Exported ${count} log(s)
+`);
+  }
+});
+program2.command("health").description("Show server health and DB stats").action(async () => {
+  const { getHealth } = await import("../health-f2qrebqc.js");
+  const h = getHealth(getDb());
+  console.log(JSON.stringify(h, null, 2));
+});
 program2.command("mcp").description("Start the MCP server").option("--claude", "Install into Claude Code").option("--codex", "Install into Codex").option("--gemini", "Install into Gemini").action(async (opts) => {
   if (opts.claude || opts.codex || opts.gemini) {
-    const bin = process.execPath;
-    const script = new URL(import.meta.url).pathname;
+    const { execSync } = await import("child_process");
+    const selfPath = process.argv[1] ?? new URL(import.meta.url).pathname;
+    const mcpBin = selfPath.replace(/cli\/index\.(ts|js)$/, "mcp/index.$1");
+    const runtime = process.execPath;
     if (opts.claude) {
-      const { execSync } = await import("child_process");
-      execSync(`claude mcp add --transport stdio --scope user logs -- ${bin} ${script} mcp`, { stdio: "inherit" });
+      const cmd = `claude mcp add --transport stdio --scope user logs -- ${runtime} ${mcpBin}`;
+      console.log(`Running: ${cmd}`);
+      execSync(cmd, { stdio: "inherit" });
+      console.log("\u2713 Installed logs-mcp into Claude Code");
+    }
+    if (opts.codex) {
+      const config = `[mcp_servers.logs]
+command = "${runtime}"
+args = ["${mcpBin}"]`;
+      console.log(`Add to ~/.codex/config.toml:
+
+` + config);
+    }
+    if (opts.gemini) {
+      const config = JSON.stringify({ mcpServers: { logs: { command: runtime, args: [mcpBin] } } }, null, 2);
+      console.log(`Add to ~/.gemini/settings.json mcpServers:
+
+` + config);
     }
     return;
   }