{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "logs-panel", "title": "Logs panel", "description": "A live log tail with level and source filter chips, search, and a Live or Paused stream that holds still while the pointer rests on it.", "registryDependencies": [ "https://sproutboat.com/ikada/r/theme.json", "https://sproutboat.com/ikada/r/button.json", "https://sproutboat.com/ikada/r/cn.json", "https://sproutboat.com/ikada/r/format.json", "https://sproutboat.com/ikada/r/icons.json", "https://sproutboat.com/ikada/r/input.json", "https://sproutboat.com/ikada/r/segmented-control.json", "https://sproutboat.com/ikada/r/status.json", "https://sproutboat.com/ikada/r/status-dot.json", "https://sproutboat.com/ikada/r/status-glyph.json" ], "files": [ { "path": "registry/ikada/blocks/logs-panel/logs-panel.tsx", "content": "\"use client\";\n\n/**\n * A live log tail with level and source filter chips, search, and a Live or Paused stream that\n * holds still while the pointer rests on it. Lines are mono, newest first, with UTC timestamps.\n */\nimport { useEffect, useMemo, useRef, useState } from \"react\";\nimport { Button } from \"@/components/ikada/button\";\nimport { Input } from \"@/components/ikada/input\";\nimport { SegmentedControl } from \"@/components/ikada/segmented-control\";\nimport { StatusDot } from \"@/components/ikada/status-dot\";\nimport { StatusGlyph } from \"@/components/ikada/status-glyph\";\nimport type { Status } from \"@/components/ikada/status\";\nimport { cn, focusRing, focusRingInset, pressMotion } from \"@/components/ikada/lib/cn\";\nimport { SearchIcon } from \"@/components/ikada/lib/icons\";\nimport { formatNumber } from \"@/components/ikada/lib/format\";\n\nexport type LogLevel = \"info\" | \"warn\" | \"error\";\n\nexport interface LogLine {\n id: string;\n /** Milliseconds since the epoch. */\n t: number;\n level: LogLevel;\n /** Where the line came from: \"http\", \"console\", \"queue\", \"cron\". */\n source: string;\n message: string;\n /** For request lines. */\n method?: string;\n path?: string;\n status?: number;\n durationMs?: number;\n}\n\nexport interface LogsPanelProps {\n /** Initial lines, newest first. */\n lines?: LogLine[];\n /**\n * Called on an interval while live to produce the next line. Defaults to a deterministic sample\n * generator; pass `null` to stream nothing (wire your own source through `lines`).\n */\n next?: ((index: number, last: LogLine | undefined) => LogLine) | null;\n /** Milliseconds between generated lines. Default 1400. */\n interval?: number;\n /** Lines kept in memory. Default 300. */\n max?: number;\n title?: string;\n className?: string;\n}\n\n/* ---------------------------------------------------------------------------\n * Sample data: a small API on a weekday afternoon. Seeded, so every render matches.\n * ------------------------------------------------------------------------- */\n\nconst START = Date.UTC(2026, 10, 6, 14, 58, 0);\n\nfunction seeded(n: number): number {\n let x = (n + 0x6d2b79f5) | 0;\n x = Math.imul(x ^ (x >>> 15), x | 1);\n x ^= x + Math.imul(x ^ (x >>> 7), x | 61);\n return ((x ^ (x >>> 14)) >>> 0) / 4294967296;\n}\n\nconst ROUTES = [\n { method: \"GET\", path: \"/api/notes\", ms: 18 },\n { method: \"GET\", path: \"/api/notes/8f3a\", ms: 11 },\n { method: \"POST\", path: \"/api/notes\", ms: 42 },\n { method: \"GET\", path: \"/healthz\", ms: 2 },\n { method: \"PUT\", path: \"/api/notes/2c91\", ms: 37 },\n { method: \"GET\", path: \"/api/search?q=raft\", ms: 64 },\n { method: \"DELETE\", path: \"/api/notes/77d0\", ms: 29 },\n];\n\nconst CONSOLE = [\n { level: \"info\", message: \"cache warm: 412 keys in 38 ms\" },\n { level: \"warn\", message: \"slow query on notes_by_tag (812 ms)\" },\n { level: \"info\", message: \"session refreshed for user_19c\" },\n { level: \"error\", message: \"TypeError: Cannot read properties of undefined (reading 'title')\" },\n] as const;\n\n/** One sample line. Mostly requests, some console output, the odd queue or cron run. */\nexport function sampleLine(index: number, last?: LogLine): LogLine {\n const r = seeded(index);\n const t = (last?.t ?? START) + 300 + Math.round(seeded(index + 7919) * 2200);\n const id = `l${index}`;\n if (r < 0.6) {\n const route = ROUTES[Math.floor(seeded(index + 31) * ROUTES.length)] ?? ROUTES[0]!;\n const roll = seeded(index + 97);\n const status =\n route.path === \"/healthz\" ? 200 : roll > 0.95 ? 500 : roll > 0.85 ? 404 : route.method === \"POST\" ? 201 : 200;\n return {\n id,\n t,\n level: status >= 500 ? \"error\" : status >= 400 ? \"warn\" : \"info\",\n source: \"http\",\n method: route.method,\n path: route.path,\n status,\n durationMs: Math.round(route.ms * (0.6 + seeded(index + 13) * 1.2)),\n message: status >= 500 ? \"upstream timed out\" : \"\",\n };\n }\n if (r < 0.85) {\n const line = CONSOLE[Math.floor(seeded(index + 53) * CONSOLE.length)] ?? CONSOLE[0];\n return { id, t, level: line.level, source: \"console\", message: line.message };\n }\n if (r < 0.94) {\n const n = 1 + Math.floor(seeded(index + 3) * 24);\n return { id, t, level: \"info\", source: \"queue\", message: `emails: delivered batch of ${n}` };\n }\n return { id, t, level: \"info\", source: \"cron\", message: \"*/5 * * * * digest: 3 notes summarised\" };\n}\n\n/** Sample data: the last 40 lines, newest first. */\nexport const sampleLines: LogLine[] = (() => {\n const out: LogLine[] = [];\n for (let i = 0; i < 40; i++) out.push(sampleLine(i, out[out.length - 1]));\n return out.reverse();\n})();\n\n/* ---------------------------------------------------------------------------\n * Pieces\n * ------------------------------------------------------------------------- */\n\nconst LEVELS: { value: LogLevel | \"all\"; label: string }[] = [\n { value: \"all\", label: \"All\" },\n { value: \"info\", label: \"Info\" },\n { value: \"warn\", label: \"Warn\" },\n { value: \"error\", label: \"Error\" },\n];\n\nconst levelStatus: Record = { info: \"neutral\", warn: \"warning\", error: \"danger\" };\nconst levelText: Record = { info: \"text-fg-muted\", warn: \"text-warn-fg\", error: \"text-danger-fg\" };\n\n/** 14:58:21.402, always UTC. */\nconst clock = (t: number) => new Date(t).toISOString().slice(11, 23);\n\n/** A toggle chip: quiet outline when off, a soft filled pill when on. */\nfunction Chip({\n pressed,\n onClick,\n children,\n count,\n}: {\n pressed: boolean;\n onClick: () => void;\n children: string;\n count?: number;\n}) {\n return (\n \n {children}\n {count !== undefined ? {count} : null}\n \n );\n}\n\nconst ROW = \"@3xl:grid @3xl:grid-cols-[7.5rem_4.25rem_4.5rem_minmax(0,1fr)_4rem] @3xl:gap-x-3\";\n\nfunction Line({ line }: { line: LogLine }) {\n const request = line.source === \"http\";\n const statusTone =\n (line.status ?? 0) >= 500\n ? \"font-semibold text-danger-fg\"\n : (line.status ?? 0) >= 400\n ? \"text-warn-fg\"\n : \"text-fg-muted\";\n const body = (\n <>\n {request ? (\n <>\n {line.method} \n {line.path}\n {line.status}\n \n ) : null}\n {line.message ? (\n \n {line.message}\n \n ) : null}\n \n );\n return (\n
  • \n
    \n \n \n \n {line.level}\n \n {line.source}\n \n {body}\n \n \n {line.durationMs !== undefined ? `${formatNumber(line.durationMs)} ms` : \"\"}\n \n
    \n

    {body}

    \n
    • \n );\n}\n\n/* ---------------------------------------------------------------------------\n * The panel\n * ------------------------------------------------------------------------- */\n\n/**\n * A live log tail with level and source filter chips, search, and a Live or Paused stream that\n * holds still while the pointer rests on it.\n */\nexport function LogsPanel({\n lines: initial = sampleLines,\n next = sampleLine,\n interval = 1400,\n max = 300,\n title = \"Logs\",\n className,\n}: LogsPanelProps) {\n const [lines, setLines] = useState(initial);\n const [mode, setMode] = useState<\"live\" | \"paused\">(\"live\");\n const [hovering, setHovering] = useState(false);\n const [waiting, setWaiting] = useState([]);\n const [level, setLevel] = useState(\"all\");\n const [sources, setSources] = useState>(new Set());\n const [query, setQuery] = useState(\"\");\n const counter = useRef(initial.length);\n const newest = useRef(initial[0]);\n const held = mode === \"paused\" || hovering;\n\n useEffect(() => setLines(initial), [initial]);\n\n // The stream keeps producing while held; lines queue and land on resume, so nothing moves under the pointer.\n useEffect(() => {\n if (!next) return;\n const timer = setInterval(() => {\n const line = next(counter.current++, newest.current);\n newest.current = line;\n setWaiting((w) => [line, ...w]);\n }, interval);\n return () => clearInterval(timer);\n }, [next, interval]);\n\n useEffect(() => {\n if (held || waiting.length === 0) return;\n setLines((current) => [...waiting, ...current].slice(0, max));\n setWaiting([]);\n }, [held, waiting, max]);\n\n const allSources = useMemo(() => {\n const counts = new Map();\n for (const l of lines) counts.set(l.source, (counts.get(l.source) ?? 0) + 1);\n return [...counts.entries()].sort((a, b) => b[1] - a[1]);\n }, [lines]);\n\n const needle = query.trim().toLowerCase();\n const shown = lines.filter(\n (l) =>\n (level === \"all\" || l.level === level) &&\n (sources.size === 0 || sources.has(l.source)) &&\n (!needle || `${l.method ?? \"\"} ${l.path ?? \"\"} ${l.status ?? \"\"} ${l.message}`.toLowerCase().includes(needle)),\n );\n const filtered = level !== \"all\" || sources.size > 0 || needle !== \"\";\n const clear = () => {\n setLevel(\"all\");\n setSources(new Set());\n setQuery(\"\");\n };\n const toggleSource = (s: string) =>\n setSources((current) => {\n const nextSet = new Set(current);\n if (nextSet.has(s)) nextSet.delete(s);\n else nextSet.add(s);\n return nextSet;\n });\n\n const statusLabel = `${\n mode === \"paused\"\n ? `Paused${waiting.length ? ` · ${waiting.length} new ${waiting.length === 1 ? \"line\" : \"lines\"} waiting` : \"\"}`\n : hovering\n ? \"Held while you read\"\n : \"Live · streaming\"\n } · ${shown.length} ${shown.length === 1 ? \"line\" : \"lines\"}${filtered ? ` of ${lines.length}` : \"\"}`;\n\n return (\n \n
    \n
    \n

    \n {title}\n

    \n
    \n \n setQuery(event.target.value)}\n className=\"ps-9\"\n />\n
    \n \n
    \n
    \n
    \n {LEVELS.map((l) => (\n setLevel(l.value)}>\n {l.label}\n \n ))}\n
    \n \n
    \n {allSources.map(([s, n]) => (\n toggleSource(s)} count={n}>\n {s}\n \n ))}\n
    \n
    \n
    \n\n event.pointerType === \"mouse\" && setHovering(true)}\n onPointerLeave={() => setHovering(false)}\n >\n