@hasna/logs 0.3.25 → 0.3.27

package/dashboard/src/pages/Perf.tsx

@@ -1,75 +0,0 @@
-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

@@ -1,67 +0,0 @@
-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

@@ -1,67 +0,0 @@
-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

@@ -1,65 +0,0 @@
-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

@@ -1,28 +0,0 @@
-{
-  "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

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

package/dashboard/tsconfig.node.json

@@ -1,26 +0,0 @@
-{
-  "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

@@ -1,14 +0,0 @@
-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/count-x3n7qg3c.js

@@ -1,9 +0,0 @@
-// @bun
-import {
-  countLogs
-} from "./index-edn08m6f.js";
-import"./index-997bkzr2.js";
-import"./index-re3ntm60.js";
-export {
-  countLogs
-};