# rocket — full component source

> A distinctive shadcn registry of data & observability components — query builders, JSON inspectors, diff viewers, log streams, metric charts, trace waterfalls and more. Install them into your app with the shadcn CLI.

Install any component with: `npx shadcn@latest add https://rocket.gozturk.dev/r/<name>.json`

## Log Stream

A live-tail log stream with level filters and counts, message search, auto-scroll with a 'new lines' indicator, and expandable rows for structured detail.

- Page: https://rocket.gozturk.dev/log-stream
- Install: `npx shadcn@latest add https://rocket.gozturk.dev/r/log-stream.json`
- Source: `components/ui/log-stream.tsx`

```tsx
"use client";

import { ArrowDown, ChevronRight, Search } from "lucide-react";
import { AnimatePresence, motion } from "motion/react";
import type { ReactNode } from "react";
import { useEffect, useMemo, useRef, useState } from "react";
import { cn } from "@/lib/utils";

export type LogLevel = "debug" | "info" | "warn" | "error";

export interface LogEntry {
  id: string;
  time: string | number | Date;
  level: LogLevel;
  message: string;
  detail?: unknown;
}

export interface LogStreamProps {
  entries: LogEntry[];
  defaultLevels?: LogLevel[];
  searchable?: boolean;
  autoScroll?: boolean;
  height?: number;
  className?: string;
}

const LEVELS: LogLevel[] = ["debug", "info", "warn", "error"];

const LEVEL_BADGE: Record<LogLevel, string> = {
  debug: "bg-muted text-muted-foreground",
  error: "bg-red-500/15 text-red-600 dark:text-red-400",
  info: "bg-blue-500/15 text-blue-600 dark:text-blue-400",
  warn: "bg-amber-500/15 text-amber-600 dark:text-amber-400",
};

const LEVEL_BAR: Record<LogLevel, string> = {
  debug: "bg-muted-foreground/30",
  error: "bg-red-500",
  info: "bg-blue-500",
  warn: "bg-amber-500",
};

function useMounted() {
  const [m, setM] = useState(false);
  useEffect(() => setM(true), []);
  return m;
}

function pad(n: number): string {
  return n < 10 ? `0${n}` : String(n);
}

function formatTime(time: string | number | Date): string {
  const d = time instanceof Date ? time : new Date(time);
  if (Number.isNaN(d.getTime())) return "--:--:--";
  return `${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`;
}

function levelCounts(entries: LogEntry[]): Record<LogLevel, number> {
  const c: Record<LogLevel, number> = { debug: 0, error: 0, info: 0, warn: 0 };
  for (const e of entries) c[e.level]++;
  return c;
}

function detailText(detail: unknown): string {
  if (typeof detail === "string") return detail;
  try {
    return JSON.stringify(detail, null, 2);
  } catch {
    return String(detail);
  }
}

function Highlight({ text, query }: { text: string; query: string }) {
  if (!query) return <>{text}</>;
  const lower = text.toLowerCase();
  const q = query.toLowerCase();
  const parts: ReactNode[] = [];
  let i = 0;
  let idx = lower.indexOf(q);
  let n = 0;
  while (idx !== -1) {
    if (idx > i) parts.push(text.slice(i, idx));
    parts.push(
      <mark
        className="rounded bg-yellow-300/50 text-foreground dark:bg-yellow-500/30"
        key={`m${n}`}
      >
        {text.slice(idx, idx + q.length)}
      </mark>,
    );
    n++;
    i = idx + q.length;
    idx = lower.indexOf(q, i);
  }
  if (i < text.length) parts.push(text.slice(i));
  return <>{parts}</>;
}

function LogRow({
  entry,
  query,
  expanded,
  onToggle,
  mounted,
}: {
  entry: LogEntry;
  query: string;
  expanded: boolean;
  onToggle: () => void;
  mounted: boolean;
}) {
  const hasDetail = entry.detail !== undefined;
  const inner = (
    <>
      <span className={cn("mt-1 h-3 w-0.5 shrink-0 rounded", LEVEL_BAR[entry.level])} />
      <span className="shrink-0 text-[10px] text-muted-foreground tabular-nums leading-5">
        {mounted ? formatTime(entry.time) : "··:··:··"}
      </span>
      <span
        className={cn(
          "shrink-0 rounded px-1 font-medium text-[10px] uppercase leading-5",
          LEVEL_BADGE[entry.level],
        )}
      >
        {entry.level}
      </span>
      <span className="flex-1 whitespace-pre-wrap break-words leading-5">
        <Highlight query={query} text={entry.message} />
      </span>
      {hasDetail ? (
        <ChevronRight
          className={cn(
            "mt-1 size-3 shrink-0 text-muted-foreground transition-transform",
            expanded && "rotate-90",
          )}
        />
      ) : null}
    </>
  );

  return (
    <div className="group/log">
      {hasDetail ? (
        <button
          className="flex w-full items-start gap-2 px-2 py-0.5 text-left hover:bg-muted/40"
          onClick={onToggle}
          type="button"
        >
          {inner}
        </button>
      ) : (
        <div className="flex items-start gap-2 px-2 py-0.5">{inner}</div>
      )}
      <AnimatePresence initial={false}>
        {expanded && hasDetail ? (
          <motion.pre
            animate={{ height: "auto", opacity: 1 }}
            className="overflow-x-auto bg-muted/40 px-3 py-2 text-[11px] text-muted-foreground leading-relaxed"
            exit={{ height: 0, opacity: 0 }}
            initial={{ height: 0, opacity: 0 }}
            transition={{ duration: 0.15 }}
          >
            {detailText(entry.detail)}
          </motion.pre>
        ) : null}
      </AnimatePresence>
    </div>
  );
}

export function LogStream({
  entries,
  defaultLevels = LEVELS,
  searchable = true,
  autoScroll = true,
  height = 320,
  className,
}: LogStreamProps) {
  const mounted = useMounted();
  const [activeLevels, setActiveLevels] = useState<Set<LogLevel>>(() => new Set(defaultLevels));
  const [query, setQuery] = useState("");
  const [expanded, setExpanded] = useState<Set<string>>(() => new Set());
  const [newCount, setNewCount] = useState(0);

  const viewportRef = useRef<HTMLDivElement>(null);
  const atBottomRef = useRef(true);
  const prevLenRef = useRef(entries.length);

  const counts = useMemo(() => levelCounts(entries), [entries]);
  const q = query.trim().toLowerCase();
  const visible = useMemo(
    () =>
      entries.filter(
        (e) => activeLevels.has(e.level) && (q === "" || e.message.toLowerCase().includes(q)),
      ),
    [entries, activeLevels, q],
  );

  const scrollToBottom = (smooth: boolean) => {
    const el = viewportRef.current;
    if (el) el.scrollTo({ behavior: smooth ? "smooth" : "auto", top: el.scrollHeight });
  };

  // Pin to bottom on first mount.
  // biome-ignore lint/correctness/useExhaustiveDependencies: intentional
  useEffect(() => {
    scrollToBottom(false);
  }, []);

  // On new entries: auto-scroll if pinned to bottom, else bump the new-count.
  // biome-ignore lint/correctness/useExhaustiveDependencies: intentional
  useEffect(() => {
    const prev = prevLenRef.current;
    const curr = entries.length;
    prevLenRef.current = curr;
    if (curr <= prev) return;
    if (autoScroll && atBottomRef.current) scrollToBottom(false);
    else setNewCount((c) => c + (curr - prev));
  }, [entries.length, autoScroll]);

  const onScroll = () => {
    const el = viewportRef.current;
    if (!el) return;
    const atBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 24;
    atBottomRef.current = atBottom;
    if (atBottom) setNewCount(0);
  };

  const toggleLevel = (level: LogLevel) =>
    setActiveLevels((prev) => {
      const next = new Set(prev);
      if (next.has(level)) next.delete(level);
      else next.add(level);
      return next;
    });

  const toggleExpand = (id: string) =>
    setExpanded((prev) => {
      const next = new Set(prev);
      if (next.has(id)) next.delete(id);
      else next.add(id);
      return next;
    });

  const jumpToBottom = () => {
    scrollToBottom(true);
    setNewCount(0);
  };

  return (
    <div
      className={cn(
        "flex flex-col overflow-hidden rounded-lg border border-border bg-card font-mono text-xs",
        className,
      )}
    >
      <div className="flex flex-wrap items-center gap-1.5 border-border border-b px-2 py-1.5 font-sans">
        {LEVELS.map((level) => (
          <button
            className={cn(
              "flex items-center gap-1 rounded px-1.5 py-0.5 text-[11px] transition-colors",
              activeLevels.has(level)
                ? LEVEL_BADGE[level]
                : "text-muted-foreground/50 hover:text-muted-foreground",
            )}
            key={level}
            onClick={() => toggleLevel(level)}
            type="button"
          >
            <span className="uppercase">{level}</span>
            <span className="tabular-nums opacity-70">{counts[level]}</span>
          </button>
        ))}
        {searchable ? (
          <div className="relative ml-auto">
            <Search className="absolute top-1.5 left-2 size-3 text-muted-foreground" />
            <input
              className="h-6 w-32 rounded border border-border bg-transparent pl-6 text-xs outline-none focus:border-ring"
              onChange={(e) => setQuery(e.target.value)}
              placeholder="Filter…"
              value={query}
            />
          </div>
        ) : null}
      </div>

      <div className="relative">
        <div className="overflow-y-auto" onScroll={onScroll} ref={viewportRef} style={{ height }}>
          {visible.length === 0 ? (
            <p className="px-3 py-4 text-center font-sans text-muted-foreground text-xs italic">
              No logs
            </p>
          ) : (
            <AnimatePresence initial={false}>
              {visible.map((entry) => (
                <motion.div
                  animate={{ opacity: 1 }}
                  initial={{ opacity: 0 }}
                  key={entry.id}
                  layout
                  transition={{ duration: 0.15 }}
                >
                  <LogRow
                    entry={entry}
                    expanded={expanded.has(entry.id)}
                    mounted={mounted}
                    onToggle={() => toggleExpand(entry.id)}
                    query={q}
                  />
                </motion.div>
              ))}
            </AnimatePresence>
          )}
        </div>
        <AnimatePresence>
          {newCount > 0 ? (
            <motion.button
              animate={{ opacity: 1, y: 0 }}
              className="absolute bottom-2 left-1/2 flex -translate-x-1/2 items-center gap-1 rounded-full bg-foreground px-2.5 py-1 font-medium font-sans text-[11px] text-background shadow"
              exit={{ opacity: 0, y: 6 }}
              initial={{ opacity: 0, y: 6 }}
              onClick={jumpToBottom}
              type="button"
            >
              {newCount} new <ArrowDown className="size-3" />
            </motion.button>
          ) : null}
        </AnimatePresence>
      </div>
    </div>
  );
}

export default LogStream;
```

## Trace Waterfall

A distributed-trace waterfall: an indented span tree beside time-positioned duration bars, with a time ruler, service colors, error highlighting, collapsible subtrees and hover detail.

- Page: https://rocket.gozturk.dev/trace-waterfall
- Install: `npx shadcn@latest add https://rocket.gozturk.dev/r/trace-waterfall.json`
- Source: `components/ui/trace-waterfall.tsx`

```tsx
"use client";

import { ChevronRight } from "lucide-react";
import { AnimatePresence, motion } from "motion/react";
import { useMemo, useState } from "react";
import { cn } from "@/lib/utils";

export interface TraceSpan {
  id: string;
  parentId?: string | null;
  name: string;
  service?: string;
  start: number;
  duration: number;
  status?: "ok" | "error";
}

export interface TraceWaterfallProps {
  spans: TraceSpan[];
  defaultCollapsedDepth?: number;
  showRuler?: boolean;
  className?: string;
}

interface SpanNode {
  span: TraceSpan;
  children: SpanNode[];
  depth: number;
}

interface Row {
  node: SpanNode;
  hasChildren: boolean;
  collapsed: boolean;
}

const PALETTE = ["#3b82f6", "#a855f7", "#10b981", "#f59e0b", "#06b6d4", "#ec4899"];
const ERROR_COLOR = "#ef4444";

function palette(service: string | undefined): string {
  if (!service) return "#6b7280";
  let h = 0;
  for (let i = 0; i < service.length; i++) h = (h * 31 + service.charCodeAt(i)) >>> 0;
  return PALETTE[h % PALETTE.length];
}

function formatMs(ms: number): string {
  if (ms >= 1000) return `${(ms / 1000).toFixed(2)}s`;
  if (ms >= 100) return `${Math.round(ms)}ms`;
  if (ms >= 10) return `${ms.toFixed(1)}ms`;
  return `${ms.toFixed(2)}ms`;
}

function buildTree(spans: TraceSpan[]): SpanNode[] {
  const byId = new Map<string, SpanNode>();
  for (const s of spans) byId.set(s.id, { children: [], depth: 0, span: s });
  const roots: SpanNode[] = [];
  for (const s of spans) {
    const node = byId.get(s.id);
    if (!node) continue;
    const parent = s.parentId != null ? byId.get(s.parentId) : undefined;
    if (parent) parent.children.push(node);
    else roots.push(node);
  }
  const sortRec = (nodes: SpanNode[], depth: number) => {
    nodes.sort((a, b) => a.span.start - b.span.start);
    for (const n of nodes) {
      n.depth = depth;
      sortRec(n.children, depth + 1);
    }
  };
  sortRec(roots, 0);
  return roots;
}

function traceTotal(spans: TraceSpan[]): number {
  let max = 0;
  for (const s of spans) max = Math.max(max, s.start + s.duration);
  return Math.max(max, 1);
}

function defaultCollapsed(roots: SpanNode[], depth: number | undefined): Set<string> {
  const set = new Set<string>();
  if (depth === undefined) return set;
  const walk = (nodes: SpanNode[]) => {
    for (const n of nodes) {
      if (n.depth >= depth && n.children.length > 0) set.add(n.span.id);
      walk(n.children);
    }
  };
  walk(roots);
  return set;
}

function flatten(roots: SpanNode[], collapsed: Set<string>): Row[] {
  const rows: Row[] = [];
  const walk = (nodes: SpanNode[]) => {
    for (const node of nodes) {
      const hasChildren = node.children.length > 0;
      const isCollapsed = collapsed.has(node.span.id);
      rows.push({ collapsed: isCollapsed, hasChildren, node });
      if (hasChildren && !isCollapsed) walk(node.children);
    }
  };
  walk(roots);
  return rows;
}

const TICKS = [0, 0.25, 0.5, 0.75, 1];

export function TraceWaterfall({
  spans,
  defaultCollapsedDepth,
  showRuler = true,
  className,
}: TraceWaterfallProps) {
  const roots = useMemo(() => buildTree(spans), [spans]);
  const total = useMemo(() => traceTotal(spans), [spans]);
  const [collapsed, setCollapsed] = useState<Set<string>>(() =>
    defaultCollapsed(roots, defaultCollapsedDepth),
  );
  const [hovered, setHovered] = useState<string | null>(null);

  const rows = useMemo(() => flatten(roots, collapsed), [roots, collapsed]);
  const hoveredSpan = hovered ? spans.find((s) => s.id === hovered) : null;

  const toggle = (id: string) =>
    setCollapsed((prev) => {
      const next = new Set(prev);
      if (next.has(id)) next.delete(id);
      else next.add(id);
      return next;
    });

  if (spans.length === 0) {
    return (
      <div
        className={cn(
          "rounded-lg border border-border bg-card p-4 text-center text-muted-foreground text-xs italic",
          className,
        )}
      >
        No spans
      </div>
    );
  }

  return (
    <div
      className={cn("overflow-hidden rounded-lg border border-border bg-card text-xs", className)}
    >
      {showRuler ? (
        <div className="flex border-border border-b font-sans">
          <div className="w-[38%] shrink-0 px-2 py-1.5 font-medium text-muted-foreground">Span</div>
          <div className="relative h-7 flex-1">
            {TICKS.map((tk) => (
              <span
                className="absolute top-1.5 text-[10px] text-muted-foreground tabular-nums"
                key={tk}
                style={{
                  left: `${tk * 100}%`,
                  transform:
                    tk === 1 ? "translateX(-100%)" : tk === 0 ? "none" : "translateX(-50%)",
                }}
              >
                {formatMs(tk * total)}
              </span>
            ))}
          </div>
        </div>
      ) : null}

      <div className="relative max-h-80 overflow-y-auto overflow-x-hidden">
        {showRuler ? (
          <div className="pointer-events-none absolute inset-0 left-[38%]">
            {TICKS.slice(1).map((tk) => (
              <span
                className="absolute top-0 bottom-0 w-px bg-border/60"
                key={tk}
                style={{ left: `${tk * 100}%` }}
              />
            ))}
          </div>
        ) : null}

        <AnimatePresence initial={false}>
          {rows.map((row) => {
            const s = row.node.span;
            const color = s.status === "error" ? ERROR_COLOR : palette(s.service);
            const left = (s.start / total) * 100;
            const width = Math.max((s.duration / total) * 100, 0.5);
            return (
              <motion.div
                animate={{ opacity: 1 }}
                className={cn(
                  "flex items-center hover:bg-muted/40",
                  hovered === s.id && "bg-muted/40",
                )}
                exit={{ opacity: 0 }}
                initial={{ opacity: 0 }}
                key={s.id}
                layout
                onMouseEnter={() => setHovered(s.id)}
                onMouseLeave={() => setHovered((h) => (h === s.id ? null : h))}
                transition={{ duration: 0.12 }}
              >
                <div
                  className="flex w-[38%] shrink-0 items-center gap-1 py-1 pr-2"
                  style={{ paddingLeft: 8 + row.node.depth * 14 }}
                >
                  {row.hasChildren ? (
                    <button
                      className="text-muted-foreground hover:text-foreground"
                      onClick={() => toggle(s.id)}
                      type="button"
                    >
                      <ChevronRight
                        className={cn("size-3 transition-transform", !row.collapsed && "rotate-90")}
                      />
                    </button>
                  ) : (
                    <span className="inline-block w-3 shrink-0" />
                  )}
                  {s.status === "error" ? (
                    <span className="size-1.5 shrink-0 rounded-full bg-red-500" />
                  ) : null}
                  <span className="truncate font-medium">{s.name}</span>
                  {s.service ? (
                    <span className="shrink-0 text-[10px] text-muted-foreground">{s.service}</span>
                  ) : null}
                </div>

                <div className="relative h-5 flex-1">
                  <div
                    className="absolute top-1 h-3 rounded-sm"
                    style={{ background: color, left: `${left}%`, width: `${width}%` }}
                  />
                  <span
                    className="absolute top-0.5 whitespace-nowrap pl-1 text-[10px] text-muted-foreground tabular-nums"
                    style={{ left: `${Math.min(left + width, 100)}%` }}
                  >
                    {formatMs(s.duration)}
                  </span>
                </div>
              </motion.div>
            );
          })}
        </AnimatePresence>
      </div>

      <div className="flex flex-wrap items-center gap-x-2 border-border border-t px-2 py-1.5 font-sans text-[11px] text-muted-foreground">
        {hoveredSpan ? (
          <>
            <span
              className="size-2 shrink-0 rounded-full"
              style={{
                background:
                  hoveredSpan.status === "error" ? ERROR_COLOR : palette(hoveredSpan.service),
              }}
            />
            <span className="font-medium text-foreground">{hoveredSpan.name}</span>
            {hoveredSpan.service ? <span>· {hoveredSpan.service}</span> : null}
            <span>· {formatMs(hoveredSpan.duration)}</span>
            <span>· {((hoveredSpan.duration / total) * 100).toFixed(1)}% of trace</span>
            <span>· start +{formatMs(hoveredSpan.start)}</span>
            {hoveredSpan.status === "error" ? (
              <span className="text-red-600 dark:text-red-400">· error</span>
            ) : null}
          </>
        ) : (
          <span>Hover a span for detail · total {formatMs(total)}</span>
        )}
      </div>
    </div>
  );
}

export default TraceWaterfall;
```

## Query Builder

A visual, nested AND/OR query builder with a typed field schema and a read-only SQL/JSON live preview with copy.

- Page: https://rocket.gozturk.dev/query-builder
- Install: `npx shadcn@latest add https://rocket.gozturk.dev/r/query-builder.json`
- Source: `components/ui/query-builder.tsx`

```tsx
"use client";

import { Copy, Plus, X } from "lucide-react";
import { AnimatePresence, motion } from "motion/react";
import { useEffect, useRef, useState } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { cn } from "@/lib/utils";

export type FieldType = "text" | "number" | "select" | "boolean" | "date";

export interface QueryField {
  name: string;
  label?: string;
  type: FieldType;
  options?: { label: string; value: string }[];
}

export interface QueryRule {
  id: string;
  field: string;
  operator: string;
  value: unknown;
}

export interface QueryGroup {
  id: string;
  combinator: "and" | "or";
  rules: QueryNode[];
}

export type QueryNode = QueryRule | QueryGroup;

export interface QueryBuilderProps {
  fields: QueryField[];
  value?: QueryGroup;
  defaultValue?: QueryGroup;
  onChange?: (group: QueryGroup) => void;
  maxDepth?: number;
  className?: string;
}

type Arity = "unary" | "binary" | "multi";

interface OperatorDef {
  key: string;
  label: string;
  sql: string;
  arity: Arity;
}

const OPERATORS: Record<FieldType, OperatorDef[]> = {
  boolean: [{ arity: "unary", key: "is", label: "is", sql: "=" }],
  date: [
    { arity: "unary", key: "eq", label: "on", sql: "=" },
    { arity: "unary", key: "before", label: "before", sql: "<" },
    { arity: "unary", key: "after", label: "after", sql: ">" },
    { arity: "binary", key: "between", label: "between", sql: "BETWEEN" },
  ],
  number: [
    { arity: "unary", key: "eq", label: "=", sql: "=" },
    { arity: "unary", key: "neq", label: "≠", sql: "!=" },
    { arity: "unary", key: "gt", label: ">", sql: ">" },
    { arity: "unary", key: "gte", label: "≥", sql: ">=" },
    { arity: "unary", key: "lt", label: "<", sql: "<" },
    { arity: "unary", key: "lte", label: "≤", sql: "<=" },
    { arity: "binary", key: "between", label: "between", sql: "BETWEEN" },
  ],
  select: [
    { arity: "multi", key: "in", label: "is any of", sql: "IN" },
    { arity: "multi", key: "notIn", label: "is none of", sql: "NOT IN" },
    { arity: "unary", key: "eq", label: "is", sql: "=" },
    { arity: "unary", key: "neq", label: "is not", sql: "!=" },
  ],
  text: [
    { arity: "unary", key: "eq", label: "equals", sql: "=" },
    { arity: "unary", key: "neq", label: "not equals", sql: "!=" },
    { arity: "unary", key: "contains", label: "contains", sql: "LIKE" },
    { arity: "unary", key: "startsWith", label: "starts with", sql: "LIKE" },
    { arity: "unary", key: "endsWith", label: "ends with", sql: "LIKE" },
  ],
};

function fieldByName(fields: QueryField[], name: string): QueryField | undefined {
  return fields.find((f) => f.name === name);
}

function operatorsFor(field: QueryField | undefined): OperatorDef[] {
  return field ? OPERATORS[field.type] : [];
}

function operatorDef(field: QueryField | undefined, key: string): OperatorDef | undefined {
  return operatorsFor(field).find((o) => o.key === key);
}

function defaultValueFor(field: QueryField): unknown {
  const op = OPERATORS[field.type][0];
  if (field.type === "boolean") return true;
  if (op.arity === "multi") return [] as string[];
  if (op.arity === "binary") return ["", ""];
  return "";
}

function valueForArity(arity: Arity, type: FieldType): unknown {
  if (type === "boolean") return true;
  if (arity === "multi") return [] as string[];
  if (arity === "binary") return ["", ""];
  return "";
}

function isGroup(node: QueryNode): node is QueryGroup {
  return "combinator" in node;
}

function formatScalar(value: unknown, type: FieldType): string {
  if (type === "boolean") return value ? "TRUE" : "FALSE";
  if (type === "number") {
    const n = String(value ?? "").trim();
    return n === "" ? "NULL" : n;
  }
  return `'${String(value ?? "").replace(/'/g, "''")}'`;
}

function ruleToSQL(rule: QueryRule, fields: QueryField[]): string | null {
  const field = fieldByName(fields, rule.field);
  if (!field) return null;
  const op = operatorDef(field, rule.operator);
  if (!op) return null;
  const col = field.name;

  if (op.arity === "multi") {
    const values = Array.isArray(rule.value) ? rule.value : [];
    if (values.length === 0) return null;
    const list = values.map((v) => formatScalar(v, field.type)).join(", ");
    return `${col} ${op.sql} (${list})`;
  }

  if (op.arity === "binary") {
    const [a, b] = Array.isArray(rule.value) ? rule.value : ["", ""];
    return `${col} ${op.sql} ${formatScalar(a, field.type)} AND ${formatScalar(b, field.type)}`;
  }

  if (op.key === "contains")
    return `${col} LIKE '%${String(rule.value ?? "").replace(/'/g, "''")}%'`;
  if (op.key === "startsWith")
    return `${col} LIKE '${String(rule.value ?? "").replace(/'/g, "''")}%'`;
  if (op.key === "endsWith")
    return `${col} LIKE '%${String(rule.value ?? "").replace(/'/g, "''")}'`;
  return `${col} ${op.sql} ${formatScalar(rule.value, field.type)}`;
}

function groupToSQL(group: QueryGroup, fields: QueryField[]): string | null {
  const parts = group.rules
    .map((node) => (isGroup(node) ? groupToSQL(node, fields) : ruleToSQL(node, fields)))
    .filter((p): p is string => p !== null && p !== "");
  if (parts.length === 0) return null;
  const joiner = group.combinator === "and" ? " AND " : " OR ";
  const body = parts.join(joiner);
  return parts.length > 1 ? `(${body})` : body;
}

export function toSQL(group: QueryGroup, fields: QueryField[]): string {
  const sql = groupToSQL(group, fields);
  if (!sql) return "";
  return sql.startsWith("(") && sql.endsWith(")") ? sql.slice(1, -1) : sql;
}

const RAIL = {
  and: { line: "bg-blue-500/30", pill: "bg-blue-500/15 text-blue-500" },
  or: { line: "bg-purple-500/30", pill: "bg-purple-500/16 text-purple-500" },
} as const;

function useIdFactory() {
  const counter = useRef(0);
  return useRef(() => `qb-${++counter.current}`).current;
}

function ValueInput({
  field,
  op,
  value,
  onChange,
}: {
  field: QueryField;
  op: OperatorDef;
  value: unknown;
  onChange: (value: unknown) => void;
}) {
  if (field.type === "boolean") {
    return (
      <Select onValueChange={(v) => onChange(v === "true")} value={value ? "true" : "false"}>
        <SelectTrigger className="h-8 w-[110px]">
          <SelectValue />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="true">true</SelectItem>
          <SelectItem value="false">false</SelectItem>
        </SelectContent>
      </Select>
    );
  }

  if (op.arity === "multi" && field.options) {
    const selected = Array.isArray(value) ? (value as string[]) : [];
    const toggle = (v: string) =>
      onChange(selected.includes(v) ? selected.filter((s) => s !== v) : [...selected, v]);
    return (
      <div className="flex flex-wrap gap-1">
        {field.options.map((opt) => (
          <button
            className={cn(
              "rounded-md border px-2 py-1 text-xs transition-colors",
              selected.includes(opt.value)
                ? "border-foreground/30 bg-foreground/10"
                : "border-border bg-transparent text-muted-foreground hover:bg-muted",
            )}
            key={opt.value}
            onClick={() => toggle(opt.value)}
            type="button"
          >
            {opt.label}
          </button>
        ))}
      </div>
    );
  }

  if (op.arity === "unary" && field.type === "select" && field.options) {
    return (
      <Select onValueChange={onChange} value={String(value ?? "")}>
        <SelectTrigger className="h-8 w-[150px]">
          <SelectValue placeholder="value" />
        </SelectTrigger>
        <SelectContent>
          {field.options.map((opt) => (
            <SelectItem key={opt.value} value={opt.value}>
              {opt.label}
            </SelectItem>
          ))}
        </SelectContent>
      </Select>
    );
  }

  const inputType = field.type === "number" ? "number" : field.type === "date" ? "date" : "text";

  if (op.arity === "binary") {
    const [a, b] = Array.isArray(value) ? (value as string[]) : ["", ""];
    return (
      <div className="flex items-center gap-1.5">
        <Input
          className="h-8 w-[120px]"
          onChange={(e) => onChange([e.target.value, b])}
          type={inputType}
          value={a}
        />
        <span className="text-muted-foreground text-xs">and</span>
        <Input
          className="h-8 w-[120px]"
          onChange={(e) => onChange([a, e.target.value])}
          type={inputType}
          value={b}
        />
      </div>
    );
  }

  return (
    <Input
      className="h-8 w-[150px]"
      onChange={(e) => onChange(e.target.value)}
      placeholder="value"
      type={inputType}
      value={String(value ?? "")}
    />
  );
}

function RuleRow({
  rule,
  fields,
  onChange,
  onRemove,
}: {
  rule: QueryRule;
  fields: QueryField[];
  onChange: (next: QueryRule) => void;
  onRemove: () => void;
}) {
  const field = fieldByName(fields, rule.field);
  const ops = operatorsFor(field);
  const op = operatorDef(field, rule.operator) ?? ops[0];

  const onFieldChange = (name: string | null) => {
    if (!name) return;
    const nextField = fieldByName(fields, name);
    if (!nextField) return;
    const firstOp = OPERATORS[nextField.type][0];
    onChange({ ...rule, field: name, operator: firstOp.key, value: defaultValueFor(nextField) });
  };

  const onOperatorChange = (key: string | null) => {
    if (!key) return;
    const nextOp = operatorDef(field, key);
    if (!nextOp || !field) return;
    const arityChanged = nextOp.arity !== op.arity;
    onChange({
      ...rule,
      operator: key,
      value: arityChanged ? valueForArity(nextOp.arity, field.type) : rule.value,
    });
  };

  return (
    <div className="flex flex-wrap items-center gap-2 rounded-lg border border-border/60 bg-muted/40 px-2.5 py-2">
      <Select onValueChange={onFieldChange} value={rule.field}>
        <SelectTrigger className="h-8 w-[140px] font-medium">
          <SelectValue />
        </SelectTrigger>
        <SelectContent>
          {fields.map((f) => (
            <SelectItem key={f.name} value={f.name}>
              {f.label ?? f.name}
            </SelectItem>
          ))}
        </SelectContent>
      </Select>

      <Select onValueChange={onOperatorChange} value={rule.operator}>
        <SelectTrigger className="h-8 w-[130px] text-muted-foreground">
          <SelectValue />
        </SelectTrigger>
        <SelectContent>
          {ops.map((o) => (
            <SelectItem key={o.key} value={o.key}>
              {o.label}
            </SelectItem>
          ))}
        </SelectContent>
      </Select>

      {field ? (
        <ValueInput
          field={field}
          onChange={(v) => onChange({ ...rule, value: v })}
          op={op}
          value={rule.value}
        />
      ) : null}

      <Button
        aria-label="Remove condition"
        className="ml-auto size-7 text-muted-foreground hover:text-foreground"
        onClick={onRemove}
        size="icon"
        type="button"
        variant="ghost"
      >
        <X className="size-3.5" />
      </Button>
    </div>
  );
}

function GroupView({
  group,
  fields,
  depth,
  maxDepth,
  newRule,
  newGroup,
  onChange,
  onRemove,
}: {
  group: QueryGroup;
  fields: QueryField[];
  depth: number;
  maxDepth: number;
  newRule: () => QueryRule;
  newGroup: () => QueryGroup;
  onChange: (next: QueryGroup) => void;
  onRemove?: () => void;
}) {
  const rail = RAIL[group.combinator];
  const toggleCombinator = () =>
    onChange({ ...group, combinator: group.combinator === "and" ? "or" : "and" });

  const updateChild = (id: string, next: QueryNode) =>
    onChange({ ...group, rules: group.rules.map((n) => (n.id === id ? next : n)) });
  const removeChild = (id: string) =>
    onChange({ ...group, rules: group.rules.filter((n) => n.id !== id) });

  return (
    <div className="flex gap-2.5">
      <div className="flex flex-col items-center pt-0.5">
        <button
          aria-label={`Toggle combinator, currently ${group.combinator}`}
          className={cn(
            "inline-flex items-center rounded-full px-2.5 py-1 font-semibold text-[11px] uppercase tracking-wide transition-colors",
            rail.pill,
          )}
          onClick={toggleCombinator}
          type="button"
        >
          {group.combinator}
        </button>
        <div className={cn("my-1 w-0.5 flex-1 rounded", rail.line)} />
      </div>

      <div className="flex-1 space-y-2">
        <AnimatePresence initial={false}>
          {group.rules.map((node) => (
            <motion.div
              animate={{ opacity: 1, y: 0 }}
              exit={{ height: 0, opacity: 0 }}
              initial={{ opacity: 0, y: -4 }}
              key={node.id}
              layout
              transition={{ duration: 0.15 }}
            >
              {isGroup(node) ? (
                <GroupView
                  depth={depth + 1}
                  fields={fields}
                  group={node}
                  maxDepth={maxDepth}
                  newGroup={newGroup}
                  newRule={newRule}
                  onChange={(next) => updateChild(node.id, next)}
                  onRemove={() => removeChild(node.id)}
                />
              ) : (
                <RuleRow
                  fields={fields}
                  onChange={(next) => updateChild(node.id, next)}
                  onRemove={() => removeChild(node.id)}
                  rule={node}
                />
              )}
            </motion.div>
          ))}
        </AnimatePresence>

        {group.rules.length === 0 ? (
          <p className="px-1 py-1.5 text-muted-foreground text-xs italic">No conditions yet</p>
        ) : null}

        <div className="flex items-center gap-1.5">
          <Button
            className="h-7 gap-1 text-xs"
            onClick={() => onChange({ ...group, rules: [...group.rules, newRule()] })}
            size="sm"
            type="button"
            variant="outline"
          >
            <Plus className="size-3" /> Condition
          </Button>
          {depth < maxDepth ? (
            <Button
              className="h-7 gap-1 text-muted-foreground text-xs"
              onClick={() => onChange({ ...group, rules: [...group.rules, newGroup()] })}
              size="sm"
              type="button"
              variant="ghost"
            >
              <Plus className="size-3" /> Group
            </Button>
          ) : null}
          {onRemove ? (
            <Button
              aria-label="Remove group"
              className="ml-auto size-7 text-muted-foreground hover:text-foreground"
              onClick={onRemove}
              size="icon"
              type="button"
              variant="ghost"
            >
              <X className="size-3.5" />
            </Button>
          ) : null}
        </div>
      </div>
    </div>
  );
}

function useCopy() {
  const [copied, setCopied] = useState(false);
  useEffect(() => {
    if (!copied) return;
    const t = setTimeout(() => setCopied(false), 1500);
    return () => clearTimeout(t);
  }, [copied]);
  const copy = (text: string) => {
    void navigator.clipboard?.writeText(text);
    setCopied(true);
  };
  return { copied, copy };
}

function CopyButton({ text }: { text: string }) {
  const { copied, copy } = useCopy();
  return (
    <Button
      aria-label="Copy"
      className="absolute top-2 right-2 size-7 text-muted-foreground hover:text-foreground"
      onClick={() => copy(text)}
      size="icon"
      type="button"
      variant="ghost"
    >
      {copied ? <span className="text-[10px]">✓</span> : <Copy className="size-3.5" />}
    </Button>
  );
}

function PreviewPanel({ group, fields }: { group: QueryGroup; fields: QueryField[] }) {
  const sql = toSQL(group, fields);
  const json = JSON.stringify(group, null, 2);
  const sqlText = sql || "-- no conditions yet";

  return (
    <Tabs className="rounded-lg border border-border bg-muted/30" defaultValue="sql">
      <div className="flex items-center justify-between border-border border-b px-2 py-1.5">
        <TabsList className="h-7 bg-transparent p-0">
          <TabsTrigger className="h-6 px-2 text-xs" value="sql">
            SQL
          </TabsTrigger>
          <TabsTrigger className="h-6 px-2 text-xs" value="json">
            JSON
          </TabsTrigger>
        </TabsList>
      </div>
      <TabsContent className="relative m-0" value="sql">
        <CopyButton text={sqlText} />
        <pre className="overflow-x-auto p-3 text-xs leading-relaxed">
          <code>{sqlText}</code>
        </pre>
      </TabsContent>
      <TabsContent className="relative m-0" value="json">
        <CopyButton text={json} />
        <pre className="overflow-x-auto p-3 text-xs leading-relaxed">
          <code>{json}</code>
        </pre>
      </TabsContent>
    </Tabs>
  );
}

const EMPTY_ROOT: QueryGroup = { combinator: "and", id: "root", rules: [] };

export function QueryBuilder({
  fields,
  value,
  defaultValue,
  onChange,
  maxDepth = 3,
  className,
}: QueryBuilderProps) {
  const nextId = useIdFactory();
  const [internal, setInternal] = useState<QueryGroup>(defaultValue ?? EMPTY_ROOT);
  const isControlled = value !== undefined;
  const group = isControlled ? value : internal;

  const firstField = fields[0];
  const newRule = (): QueryRule => ({
    field: firstField?.name ?? "",
    id: nextId(),
    operator: firstField ? OPERATORS[firstField.type][0].key : "eq",
    value: firstField ? defaultValueFor(firstField) : "",
  });
  const newGroup = (): QueryGroup => ({ combinator: "and", id: nextId(), rules: [] });

  const update = (next: QueryGroup) => {
    if (!isControlled) setInternal(next);
    onChange?.(next);
  };

  return (
    <div className={cn("space-y-4", className)}>
      <GroupView
        depth={0}
        fields={fields}
        group={group}
        maxDepth={maxDepth}
        newGroup={newGroup}
        newRule={newRule}
        onChange={update}
      />
      <PreviewPanel fields={fields} group={group} />
    </div>
  );
}

export default QueryBuilder;
```

## Timeline

A nested, collapsible event timeline with one continuous connector line.

- Page: https://rocket.gozturk.dev/timeline
- Install: `npx shadcn@latest add https://rocket.gozturk.dev/r/timeline.json`
- Source: `components/ui/timeline.tsx`

```tsx
"use client";

import {
  ChevronRight,
  CircleCheck,
  CircleDot,
  CircleX,
  Clock,
  type LucideIcon,
  Plus,
} from "lucide-react";
import { AnimatePresence, motion } from "motion/react";
import { useCallback, useLayoutEffect, useRef, useState } from "react";
import { cn } from "@/lib/utils";

export type TimelineStatus = "error" | "success" | "warning" | "pending" | "info";

export interface TimelineItem {
  id?: string;
  title?: string;
  time?: string;
  description?: string;
  status?: TimelineStatus;
  children?: TimelineItem[];
  defaultOpen?: boolean;
}

export interface TimelineProps {
  items?: TimelineItem[];
  className?: string;
}

interface FlatRow {
  isGroup: boolean;
  item: TimelineItem;
  key: string;
  level: number;
  open: boolean;
}

interface MarkerPoint {
  cx: number;
  top: number;
  bottom: number;
}

/**
 * Status → icon + color mapping for leaf timeline events.
 * Status colors stay on raw palette tokens (with dark variants) since these are
 * semantic accents, not theme surface colors.
 */
const STATUS: Record<TimelineStatus, { className: string; icon: LucideIcon }> = {
  error: { className: "text-red-500 dark:text-red-400", icon: CircleX },
  info: { className: "text-muted-foreground", icon: CircleDot },
  pending: { className: "text-amber-500 dark:text-amber-400", icon: Clock },
  success: { className: "text-green-600 dark:text-green-400", icon: CircleCheck },
  warning: { className: "text-amber-500 dark:text-amber-400", icon: CircleDot },
};

const INDENT = 22; // px each nesting level shifts right
const RADIUS = 8; // px connector corner radius
const GAP = 10; // px vertical approach into a marker after a turn

function EventMarker({ status }: { status?: TimelineStatus }) {
  const { icon: Icon, className } = STATUS[status ?? "info"] ?? STATUS.info;
  return <Icon className={cn("size-4.5", className)} strokeWidth={2} />;
}

function GroupToggle({ open, onClick }: { open: boolean; onClick: () => void }) {
  return (
    <button
      aria-expanded={open}
      aria-label={open ? "Collapse group" : "Expand group"}
      className="flex size-4.5 items-center justify-center rounded-full border bg-background text-muted-foreground transition-colors hover:text-foreground"
      onClick={onClick}
      type="button"
    >
      <Plus className={cn("size-3 transition-transform", open && "rotate-45")} strokeWidth={2.5} />
    </button>
  );
}

function Row({
  row,
  markerRef,
}: {
  row: FlatRow & { onToggle: () => void };
  markerRef: (el: HTMLDivElement | null) => void;
}) {
  const { item, level, isGroup, open, onToggle } = row;

  return (
    <div className="relative flex items-start gap-2" style={{ paddingLeft: level * INDENT }}>
      <div className="relative z-10 shrink-0" ref={markerRef}>
        {isGroup ? (
          <GroupToggle onClick={onToggle} open={open} />
        ) : (
          <EventMarker status={item.status} />
        )}
      </div>

      <div className="min-w-0 flex-1 pb-4">
        {isGroup ? (
          <button className="flex items-center gap-1.5 text-left" onClick={onToggle} type="button">
            {item.title && (
              <span className="font-medium text-foreground text-sm">{item.title}</span>
            )}
            <span className="text-muted-foreground text-xs">
              {item.title
                ? `${item.children?.length ?? 0} events`
                : `${item.children?.length ?? 0} more events`}
            </span>
            <ChevronRight
              className={cn(
                "size-3.5 text-muted-foreground transition-transform",
                open && "rotate-90",
              )}
            />
          </button>
        ) : (
          <div className="space-y-0.5">
            <div className="flex flex-wrap items-center gap-x-2">
              <span className="font-medium text-foreground text-sm">{item.title}</span>
              {item.time && <span className="text-muted-foreground text-xs">{item.time}</span>}
            </div>
            {item.description && (
              <p className="text-muted-foreground text-xs">{item.description}</p>
            )}
          </div>
        )}
      </div>
    </div>
  );
}

/** Collect keys of groups that should start open. */
function collectOpen(items: TimelineItem[], parentKey: string, acc: Set<string>): Set<string> {
  items.forEach((item, i) => {
    const key = item.id ?? `${parentKey}/${i}`;
    if (Array.isArray(item.children) && item.children.length > 0) {
      if (item.defaultOpen) acc.add(key);
      collectOpen(item.children, key, acc);
    }
  });
  return acc;
}

/** Flatten the visible tree (respecting open state) into ordered rows. */
function flatten(
  items: TimelineItem[],
  openIds: Set<string>,
  level: number,
  parentKey: string,
  acc: FlatRow[],
): FlatRow[] {
  items.forEach((item, i) => {
    const key = item.id ?? `${parentKey}/${i}`;
    const isGroup = Array.isArray(item.children) && item.children.length > 0;
    const open = isGroup && openIds.has(key);
    acc.push({ isGroup, item, key, level, open });
    if (open && item.children) flatten(item.children, openIds, level + 1, key, acc);
  });
  return acc;
}

/**
 * Build a single SVG path that links each marker to the next as one continuous
 * line. Same-column hops are straight verticals; column changes weave through a
 * rounded elbow that descends at the source column, runs a floor, then drops
 * into the next marker. Coordinates are snapped to the pixel grid (+0.5) so the
 * 1px stroke stays crisp on the straight runs.
 */
function buildPath(points: (MarkerPoint | null)[]): string {
  const segs: string[] = [];
  for (let i = 0; i < points.length - 1; i++) {
    const a = points[i];
    const b = points[i + 1];
    if (!a || !b) continue;

    const x1 = Math.round(a.cx) + 0.5;
    const x2 = Math.round(b.cx) + 0.5;
    const y1 = Math.round(a.bottom) + 0.5;
    const y2 = Math.round(b.top) + 0.5;

    if (x1 === x2) {
      segs.push(`M${x1} ${y1}L${x2} ${y2}`);
      continue;
    }

    const dir = x2 > x1 ? 1 : -1;
    const turnY = Math.round(y2 - GAP) + 0.5;
    const r = Math.min(RADIUS, Math.max(0, turnY - y1), Math.abs(x2 - x1) / 2);

    segs.push(
      `M${x1} ${y1}` +
        `L${x1} ${turnY - r}` +
        `Q${x1} ${turnY} ${x1 + dir * r} ${turnY}` +
        `L${x2 - dir * r} ${turnY}` +
        `Q${x2} ${turnY} ${x2} ${turnY + r}` +
        `L${x2} ${y2}`,
    );
  }
  return segs.join(" ");
}

/**
 * Timeline — renders a (optionally nested) timeline of events as one continuous
 * line that weaves into and out of collapsible groups.
 *
 * The connector is a single SVG path measured from the live marker positions, so
 * it stays seamless across row boundaries (no per-row border segments to align)
 * and re-traces itself as groups expand/collapse via a ResizeObserver.
 */
export function Timeline({ items = [], className }: TimelineProps) {
  const [openIds, setOpenIds] = useState<Set<string>>(() => collectOpen(items, "", new Set()));
  const [path, setPath] = useState("");

  const containerRef = useRef<HTMLDivElement>(null);
  const markerRefs = useRef(new Map<string, HTMLDivElement>());

  const toggle = (key: string) =>
    setOpenIds((prev) => {
      const next = new Set(prev);
      if (next.has(key)) {
        next.delete(key);
      } else {
        next.add(key);
      }
      return next;
    });

  const rows = flatten(items, openIds, 0, "", []);

  const measure = useCallback(() => {
    const container = containerRef.current;
    if (!container) return;
    const base = container.getBoundingClientRect();
    const points: (MarkerPoint | null)[] = rows.map((row) => {
      const el = markerRefs.current.get(row.key);
      if (!el) return null;
      const r = el.getBoundingClientRect();
      return {
        bottom: r.bottom - base.top,
        cx: r.left - base.left + r.width / 2,
        top: r.top - base.top,
      };
    });
    setPath(buildPath(points));
  }, [rows]);

  // Re-trace after every commit (open/close, content changes) and on any size
  // change — the latter covers the height-animation frames and viewport resizes.
  useLayoutEffect(() => {
    measure();
    const container = containerRef.current;
    if (!container) return;
    const ro = new ResizeObserver(() => measure());
    ro.observe(container);
    return () => ro.disconnect();
  }, [measure]);

  return (
    <div className={cn("relative flex flex-col", className)} ref={containerRef}>
      <svg
        aria-hidden
        className="pointer-events-none absolute inset-0 z-0 h-full w-full overflow-visible text-border"
        fill="none"
      >
        <path d={path} stroke="currentColor" strokeWidth="1" />
      </svg>

      <AnimatePresence initial={false}>
        {rows.map((row) => (
          <motion.div
            animate={{ height: "auto", opacity: 1 }}
            className="overflow-hidden"
            exit={{ height: 0, opacity: 0 }}
            initial={{ height: 0, opacity: 0 }}
            key={row.key}
            transition={{ duration: 0.18, ease: "easeOut" }}
          >
            <Row
              markerRef={(el) => {
                if (el) markerRefs.current.set(row.key, el);
                else markerRefs.current.delete(row.key);
              }}
              row={{ ...row, onToggle: () => toggle(row.key) }}
            />
          </motion.div>
        ))}
      </AnimatePresence>
    </div>
  );
}
```

## JSON Inspector

A collapsible, searchable, code-editor-style JSON tree viewer with type coloring, line numbers, match highlighting and per-node path/value copy.

- Page: https://rocket.gozturk.dev/json-inspector
- Install: `npx shadcn@latest add https://rocket.gozturk.dev/r/json-inspector.json`
- Source: `components/ui/json-inspector.tsx`

```tsx
"use client";

import { Braces, Check, ChevronRight, Copy, type LucideIcon, Search, X } from "lucide-react";
import { AnimatePresence, motion } from "motion/react";
import type { ReactNode } from "react";
import { useEffect, useMemo, useRef, useState } from "react";
import {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupInput,
  InputGroupText,
} from "@/components/ui/input-group";
import { cn } from "@/lib/utils";

export interface JsonInspectorProps {
  data: unknown;
  defaultExpandedDepth?: number;
  searchable?: boolean;
  showLineNumbers?: boolean;
  rootName?: string;
  className?: string;
}

type ValueType = "string" | "number" | "boolean" | "null" | "undefined" | "object" | "array";
type Path = (string | number)[];

interface FlatRow {
  id: string;
  path: Path;
  depth: number;
  keyLabel?: string | number;
  variant: "open" | "close" | "primitive";
  bracket?: "{" | "}" | "[" | "]";
  value?: unknown;
  raw?: unknown;
  valueType: ValueType;
  size?: number;
  collapsed?: boolean;
  expandable?: boolean;
  trailingComma?: boolean;
}

type ParseResult = { ok: true; value: unknown } | { ok: false; error: string; raw: string };

function parseInput(data: unknown): ParseResult {
  if (typeof data === "string") {
    try {
      return { ok: true, value: JSON.parse(data) };
    } catch (err) {
      return { error: err instanceof Error ? err.message : "Invalid JSON", ok: false, raw: data };
    }
  }
  return { ok: true, value: data };
}

function typeOf(value: unknown): ValueType {
  if (value === null) return "null";
  if (value === undefined) return "undefined";
  if (Array.isArray(value)) return "array";
  const t = typeof value;
  if (t === "string" || t === "number" || t === "boolean" || t === "object") return t;
  return "string";
}

function isContainer(t: ValueType): boolean {
  return t === "object" || t === "array";
}

function keyOf(path: Path): string {
  return JSON.stringify(path);
}

function entriesOf(value: unknown, type: ValueType): [string | number, unknown][] {
  if (type === "array") return (value as unknown[]).map((v, i) => [i, v]);
  return Object.entries(value as Record<string, unknown>);
}

const IDENT = /^[A-Za-z_$][A-Za-z0-9_$]*$/;

function pathToString(path: Path, rootName: string): string {
  let s = rootName;
  for (const seg of path) {
    if (typeof seg === "number") s += `[${seg}]`;
    else if (IDENT.test(seg)) s += `.${seg}`;
    else s += `[${JSON.stringify(seg)}]`;
  }
  return s;
}

function formatPrimitive(value: unknown, type: ValueType): string {
  if (type === "string") return JSON.stringify(value);
  if (type === "null") return "null";
  if (type === "undefined") return "undefined";
  return String(value);
}

function primitiveText(value: unknown): string {
  if (value === null) return "null";
  if (value === undefined) return "undefined";
  return String(value);
}

function valueText(raw: unknown): string {
  const t = typeOf(raw);
  if (isContainer(t)) return JSON.stringify(raw, null, 2);
  if (t === "string") return raw as string;
  return primitiveText(raw);
}

function sizeLabel(row: FlatRow): string {
  const n = row.size ?? 0;
  return row.valueType === "array"
    ? `${n} item${n === 1 ? "" : "s"}`
    : `${n} key${n === 1 ? "" : "s"}`;
}

function defaultOpen(value: unknown, depth: number): Set<string> {
  const open = new Set<string>();
  function walk(v: unknown, path: Path) {
    const t = typeOf(v);
    if (!isContainer(t)) return;
    if (path.length < depth) {
      open.add(keyOf(path));
      for (const [k, child] of entriesOf(v, t)) walk(child, [...path, k]);
    }
  }
  walk(value, []);
  return open;
}

function allContainers(value: unknown): Set<string> {
  const out = new Set<string>();
  function walk(v: unknown, path: Path) {
    const t = typeOf(v);
    if (!isContainer(t)) return;
    out.add(keyOf(path));
    for (const [k, child] of entriesOf(v, t)) walk(child, [...path, k]);
  }
  walk(value, []);
  return out;
}

function computeSearch(value: unknown, query: string): { visible: Set<string>; matches: number } {
  const visible = new Set<string>();
  const q = query.toLowerCase();
  let matches = 0;

  function markAll(v: unknown, path: Path) {
    visible.add(keyOf(path));
    const t = typeOf(v);
    if (isContainer(t)) for (const [k, child] of entriesOf(v, t)) markAll(child, [...path, k]);
  }

  function walk(v: unknown, path: Path, keyLabel: string | number | undefined): boolean {
    const t = typeOf(v);
    const keyMatch = keyLabel !== undefined && String(keyLabel).toLowerCase().includes(q);
    if (isContainer(t)) {
      if (keyMatch) {
        matches++;
        markAll(v, path);
        return true;
      }
      let childVisible = false;
      for (const [k, child] of entriesOf(v, t)) {
        if (walk(child, [...path, k], k)) childVisible = true;
      }
      if (childVisible) {
        visible.add(keyOf(path));
        return true;
      }
      return false;
    }
    const valMatch = primitiveText(v).toLowerCase().includes(q);
    if (keyMatch || valMatch) {
      matches++;
      visible.add(keyOf(path));
      return true;
    }
    return false;
  }

  walk(value, [], undefined);
  return { matches, visible };
}

interface SearchState {
  active: boolean;
  visible: Set<string>;
  matches: number;
}

function flatten(value: unknown, openPaths: Set<string>, search: SearchState): FlatRow[] {
  const rows: FlatRow[] = [];

  function isOpen(path: Path): boolean {
    if (search.active) return true;
    return openPaths.has(keyOf(path));
  }

  function pushNode(
    v: unknown,
    path: Path,
    keyLabel: string | number | undefined,
    trailingComma: boolean,
  ) {
    const k = keyOf(path);
    if (search.active && !search.visible.has(k)) return;
    const type = typeOf(v);
    const depth = path.length;

    if (!isContainer(type)) {
      rows.push({
        depth,
        id: k,
        keyLabel,
        path,
        raw: v,
        trailingComma,
        value: v,
        valueType: type,
        variant: "primitive",
      });
      return;
    }

    const entries = entriesOf(v, type);
    const childEntries = search.active
      ? entries.filter(([ck]) => search.visible.has(keyOf([...path, ck])))
      : entries;
    const open = isOpen(path) && childEntries.length > 0;
    const isArray = type === "array";

    rows.push({
      bracket: isArray ? "[" : "{",
      collapsed: !open,
      depth,
      expandable: entries.length > 0,
      id: k,
      keyLabel,
      path,
      raw: v,
      size: entries.length,
      trailingComma: open ? false : trailingComma,
      valueType: type,
      variant: "open",
    });

    if (!open) return;

    childEntries.forEach(([ck, cv], i) => {
      pushNode(cv, [...path, ck], ck, i < childEntries.length - 1);
    });

    rows.push({
      bracket: isArray ? "]" : "}",
      depth,
      id: `${k}:close`,
      path,
      trailingComma,
      valueType: type,
      variant: "close",
    });
  }

  pushNode(value, [], undefined, false);
  return rows;
}

function useCopy() {
  const [copied, setCopied] = useState(false);
  useEffect(() => {
    if (!copied) return;
    const t = setTimeout(() => setCopied(false), 1500);
    return () => clearTimeout(t);
  }, [copied]);
  return {
    copied,
    copy: (text: string) => {
      void navigator.clipboard?.writeText(text);
      setCopied(true);
    },
  };
}

function Highlight({ text, query }: { text: string; query: string }) {
  if (!query) return <>{text}</>;
  const lower = text.toLowerCase();
  const q = query.toLowerCase();
  const parts: ReactNode[] = [];
  let i = 0;
  let idx = lower.indexOf(q);
  let n = 0;
  while (idx !== -1) {
    if (idx > i) parts.push(text.slice(i, idx));
    parts.push(
      <mark
        className="rounded bg-yellow-300/50 text-foreground dark:bg-yellow-500/30"
        key={`m${n}`}
      >
        {text.slice(idx, idx + q.length)}
      </mark>,
    );
    n++;
    i = idx + q.length;
    idx = lower.indexOf(q, i);
  }
  if (i < text.length) parts.push(text.slice(i));
  return <>{parts}</>;
}

function CopyAction({
  text,
  label,
  icon: Icon,
}: {
  text: string;
  label: string;
  icon: LucideIcon;
}) {
  const { copied, copy } = useCopy();
  return (
    <button
      aria-label={`Copy ${label}`}
      className={cn(
        "flex items-center gap-1 rounded px-1 py-0.5 font-sans text-[10px] transition-colors hover:bg-muted",
        copied
          ? "text-emerald-600 dark:text-emerald-400"
          : "text-muted-foreground hover:text-foreground",
      )}
      onClick={() => copy(text)}
      title={`Copy ${label}`}
      type="button"
    >
      {copied ? <Check className="size-3" /> : <Icon className="size-3" />}
      {copied ? "Copied" : label}
    </button>
  );
}

const TYPE_CLASS: Record<ValueType, string> = {
  array: "text-muted-foreground",
  boolean: "text-blue-600 dark:text-blue-400",
  null: "text-muted-foreground italic",
  number: "text-orange-600 dark:text-orange-400",
  object: "text-muted-foreground",
  string: "text-emerald-600 dark:text-emerald-400",
  undefined: "text-muted-foreground italic",
};

function Row({
  row,
  lineNo,
  query,
  rootName,
  showLineNumbers,
  onToggle,
}: {
  row: FlatRow;
  lineNo: number;
  query: string;
  rootName: string;
  showLineNumbers: boolean;
  onToggle: () => void;
}) {
  const showKey = typeof row.keyLabel === "string";
  return (
    <div className="group/row flex items-start gap-1.5 hover:bg-muted/40">
      {showLineNumbers ? (
        <span className="w-8 shrink-0 select-none pr-1 text-right text-[10px] text-muted-foreground/50 tabular-nums leading-5">
          {lineNo}
        </span>
      ) : null}
      <div className="flex-1 whitespace-pre leading-5" style={{ paddingLeft: row.depth * 14 }}>
        {row.variant !== "close" && row.expandable ? (
          <button
            aria-label={row.collapsed ? "Expand" : "Collapse"}
            className="mr-0.5 inline-flex translate-y-px text-muted-foreground hover:text-foreground"
            onClick={onToggle}
            type="button"
          >
            <ChevronRight
              className={cn("size-3 transition-transform", !row.collapsed && "rotate-90")}
            />
          </button>
        ) : (
          <span className="mr-0.5 inline-block w-3" />
        )}
        {showKey ? (
          <span className="text-foreground">
            <Highlight query={query} text={`"${row.keyLabel}"`} />
            {": "}
          </span>
        ) : null}
        {row.variant === "primitive" ? (
          <span className={TYPE_CLASS[row.valueType]}>
            <Highlight query={query} text={formatPrimitive(row.value, row.valueType)} />
          </span>
        ) : null}
        {row.variant === "open" ? (
          row.collapsed ? (
            row.size === 0 ? (
              <span className="text-muted-foreground">
                {row.bracket}
                {row.bracket === "[" ? "]" : "}"}
              </span>
            ) : (
              <span className="text-muted-foreground">
                {row.bracket} … {row.bracket === "[" ? "]" : "}"}{" "}
                <span className="text-[10px]">{sizeLabel(row)}</span>
              </span>
            )
          ) : (
            <span className="text-muted-foreground">{row.bracket}</span>
          )
        ) : null}
        {row.variant === "close" ? (
          <span className="text-muted-foreground">{row.bracket}</span>
        ) : null}
        {row.trailingComma ? <span className="text-muted-foreground">,</span> : null}
      </div>
      {row.variant !== "close" ? (
        <span className="flex shrink-0 items-center gap-0.5 pr-1 opacity-0 transition-opacity group-focus-within/row:opacity-100 group-hover/row:opacity-100">
          <CopyAction icon={Braces} label="path" text={pathToString(row.path, rootName)} />
          <CopyAction icon={Copy} label="value" text={valueText(row.raw)} />
        </span>
      ) : null}
    </div>
  );
}

export function JsonInspector({
  data,
  defaultExpandedDepth = 1,
  searchable = true,
  showLineNumbers = true,
  rootName = "root",
  className,
}: JsonInspectorProps) {
  const parsed = useMemo(() => parseInput(data), [data]);
  const [query, setQuery] = useState("");
  const [openPaths, setOpenPaths] = useState<Set<string>>(() =>
    parsed.ok ? defaultOpen(parsed.value, defaultExpandedDepth) : new Set(),
  );

  const search = useMemo<SearchState>(() => {
    if (!parsed.ok || !searchable || query.trim() === "") {
      return { active: false, matches: 0, visible: new Set() };
    }
    return { active: true, ...computeSearch(parsed.value, query.trim()) };
  }, [parsed, query, searchable]);

  const rows = useMemo(
    () => (parsed.ok ? flatten(parsed.value, openPaths, search) : []),
    [parsed, openPaths, search],
  );

  const searchRef = useRef<HTMLDivElement>(null);
  const focusSearch = () => searchRef.current?.querySelector("input")?.focus();

  // biome-ignore lint/correctness/useExhaustiveDependencies: false positive, we only want to bind this once when searchable is enabled
  useEffect(() => {
    if (!searchable) return;
    const onKey = (e: KeyboardEvent) => {
      if (e.key !== "/") return;
      const el = document.activeElement;
      const tag = el?.tagName;
      if (tag === "INPUT" || tag === "TEXTAREA" || (el as HTMLElement | null)?.isContentEditable) {
        return;
      }
      e.preventDefault();
      focusSearch();
    };
    document.addEventListener("keydown", onKey);
    return () => document.removeEventListener("keydown", onKey);
  }, [searchable]);

  if (!parsed.ok) {
    return (
      <div
        className={cn(
          "rounded-lg border border-destructive/40 bg-destructive/5 p-3 font-mono text-xs",
          className,
        )}
      >
        <p className="mb-2 font-medium font-sans text-destructive">Invalid JSON — {parsed.error}</p>
        <pre className="overflow-x-auto whitespace-pre-wrap text-muted-foreground">
          {parsed.raw}
        </pre>
      </div>
    );
  }

  const toggle = (path: Path) => {
    const k = keyOf(path);
    setOpenPaths((prev) => {
      const next = new Set(prev);
      if (next.has(k)) next.delete(k);
      else next.add(k);
      return next;
    });
  };

  return (
    <div className={cn("rounded-lg border border-border bg-muted/20 font-mono text-xs", className)}>
      <div className="flex items-center gap-2 border-border border-b px-2 py-1.5">
        {searchable ? (
          <InputGroup className="h-7 flex-1 font-sans" ref={searchRef}>
            <InputGroupAddon align="inline-start">
              <Search className="size-3.5" />
            </InputGroupAddon>
            <InputGroupInput
              className="text-xs"
              onChange={(e) => setQuery(e.target.value)}
              onKeyDown={(e) => {
                if (e.key === "Escape") {
                  setQuery("");
                  e.currentTarget.blur();
                }
              }}
              placeholder="Search keys or values…"
              value={query}
            />
            <InputGroupAddon align="inline-end">
              {search.active ? (
                <InputGroupText className="text-xs">
                  {search.matches} match{search.matches === 1 ? "" : "es"}
                </InputGroupText>
              ) : null}
              {query ? (
                <InputGroupButton
                  aria-label="Clear search"
                  onClick={() => {
                    setQuery("");
                    focusSearch();
                  }}
                  size="icon-xs"
                >
                  <X className="size-3.5" />
                </InputGroupButton>
              ) : (
                <kbd className="rounded border border-border bg-muted px-1 text-[10px] text-muted-foreground">
                  /
                </kbd>
              )}
            </InputGroupAddon>
          </InputGroup>
        ) : null}
        <div className="ml-auto flex shrink-0 gap-1 font-sans">
          <button
            className="rounded px-1.5 py-0.5 text-muted-foreground text-xs hover:bg-muted hover:text-foreground"
            onClick={() => setOpenPaths(allContainers(parsed.value))}
            type="button"
          >
            Expand all
          </button>
          <button
            className="rounded px-1.5 py-0.5 text-muted-foreground text-xs hover:bg-muted hover:text-foreground"
            onClick={() => setOpenPaths(new Set())}
            type="button"
          >
            Collapse all
          </button>
        </div>
      </div>
      <div className="overflow-x-auto py-1.5">
        {rows.length === 0 ? (
          <p className="px-3 py-2 font-sans text-muted-foreground text-xs italic">
            {search.active ? "No matches" : "Empty"}
          </p>
        ) : (
          <AnimatePresence initial={false}>
            {rows.map((row, i) => (
              <motion.div
                animate={{ opacity: 1 }}
                exit={{ opacity: 0 }}
                initial={{ opacity: 0 }}
                key={row.id}
                layout
                transition={{ duration: 0.12 }}
              >
                <Row
                  lineNo={i + 1}
                  onToggle={() => toggle(row.path)}
                  query={search.active ? query.trim() : ""}
                  rootName={rootName}
                  row={row}
                  showLineNumbers={showLineNumbers}
                />
              </motion.div>
            ))}
          </AnimatePresence>
        )}
      </div>
    </div>
  );
}

export default JsonInspector;
```

## Activity Feed

An avatar-led activity feed with type badges, attachments, date grouping and a live indicator.

- Page: https://rocket.gozturk.dev/activity-feed
- Install: `npx shadcn@latest add https://rocket.gozturk.dev/r/activity-feed.json`
- Source: `components/ui/activity-feed.tsx`

```tsx
"use client";

import {
  AtSign,
  Bell,
  CircleDot,
  GitCommit,
  GitMerge,
  type LucideIcon,
  MessageSquare,
  Rocket,
  Star,
} from "lucide-react";
import { AnimatePresence, motion } from "motion/react";
import { useEffect, useState } from "react";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { cn } from "@/lib/utils";

export type ActivityType = "comment" | "commit" | "merge" | "issue" | "star" | "deploy" | "mention";

export interface ActivityActor {
  name: string;
  avatarUrl?: string;
  fallback?: string;
}

export interface ActivityAttachment {
  kind: "quote" | "image" | "link";
  text?: string;
  imageUrl?: string;
  href?: string;
  meta?: string;
  alt?: string;
}

export interface ActivityItem {
  id?: string;
  actor: ActivityActor;
  type?: ActivityType;
  icon?: LucideIcon;
  action: string;
  target?: string;
  time: string | number | Date;
  attachment?: ActivityAttachment;
  live?: boolean;
}

export interface ActivityFeedProps {
  items: ActivityItem[];
  className?: string;
  groupByDate?: boolean;
  stickyHeaders?: boolean;
}

const TYPE_BADGE: Record<ActivityType, { icon: LucideIcon; className: string }> = {
  comment: { className: "text-sky-500 dark:text-sky-400", icon: MessageSquare },
  commit: { className: "text-violet-500 dark:text-violet-400", icon: GitCommit },
  deploy: { className: "text-emerald-600 dark:text-emerald-400", icon: Rocket },
  issue: { className: "text-amber-500 dark:text-amber-400", icon: CircleDot },
  mention: { className: "text-blue-500 dark:text-blue-400", icon: AtSign },
  merge: { className: "text-green-600 dark:text-green-400", icon: GitMerge },
  star: { className: "text-amber-500 dark:text-amber-400", icon: Star },
};

/** False on the server and first client render, true after mount. */
function useMounted() {
  const [mounted, setMounted] = useState(false);
  useEffect(() => setMounted(true), []);
  return mounted;
}

function toDate(value: string | number | Date): Date | null {
  const d = value instanceof Date ? value : new Date(value);
  return Number.isNaN(d.getTime()) ? null : d;
}

const shortDate = (d: Date) =>
  new Intl.DateTimeFormat("en-US", { day: "numeric", month: "short" }).format(d);

/** Relative time once mounted; stable absolute date on server / first paint. */
function timeAgo(value: string | number | Date, mounted: boolean): string {
  const d = toDate(value);
  if (!d) return typeof value === "string" ? value : "";
  if (!mounted) return shortDate(d);
  const secs = Math.max(0, Math.floor((Date.now() - d.getTime()) / 1000));
  if (secs < 60) return "just now";
  const mins = Math.floor(secs / 60);
  if (mins < 60) return `${mins}m ago`;
  const hours = Math.floor(mins / 60);
  if (hours < 24) return `${hours}h ago`;
  const days = Math.floor(hours / 24);
  if (days < 7) return `${days}d ago`;
  return shortDate(d);
}

/** Group bucket label: Today/Yesterday after mount, else absolute date. */
function dayBucket(value: string | number | Date, mounted: boolean): string {
  const d = toDate(value);
  if (!d) return "";
  if (mounted) {
    const startOfDay = (x: Date) => new Date(x.getFullYear(), x.getMonth(), x.getDate()).getTime();
    const diffDays = Math.round((startOfDay(new Date()) - startOfDay(d)) / 86400000);
    if (diffDays <= 0) return "Today";
    if (diffDays === 1) return "Yesterday";
  }
  return shortDate(d);
}

function initials(name: string): string {
  return name
    .split(/\s+/)
    .filter(Boolean)
    .slice(0, 2)
    .map((w) => w[0]?.toUpperCase() ?? "")
    .join("");
}

function LiveDot() {
  return (
    <span aria-hidden className="relative inline-flex size-1.5">
      <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-green-500 opacity-75" />
      <span className="relative inline-flex size-1.5 rounded-full bg-green-500" />
    </span>
  );
}

function TypeBadge({ type, icon }: { type?: ActivityType; icon?: LucideIcon }) {
  const base = type ? TYPE_BADGE[type] : undefined;
  const Icon = icon ?? base?.icon ?? Bell;
  const color = base?.className ?? "text-muted-foreground";
  return (
    <span className="absolute -right-1 -bottom-1 flex size-4 items-center justify-center rounded-full border bg-background">
      <Icon className={cn("size-2.5", color)} strokeWidth={2.5} />
    </span>
  );
}

function Attachment({ attachment }: { attachment: ActivityAttachment }) {
  if (attachment.kind === "quote") {
    return (
      <blockquote className="mt-2 border-l-2 pl-3 text-muted-foreground text-sm italic">
        {attachment.text}
      </blockquote>
    );
  }
  if (attachment.kind === "image") {
    return (
      // biome-ignore lint/performance/noImgElement: registry component stays framework-agnostic (no next/image)
      <img
        alt={attachment.alt ?? ""}
        className="mt-2 max-h-48 w-full rounded-lg border object-cover"
        src={attachment.imageUrl}
      />
    );
  }
  const card = (
    <div className="mt-2 rounded-lg border bg-muted/40 p-3">
      <div className="font-medium text-foreground text-sm">{attachment.text}</div>
      {attachment.meta && <div className="text-muted-foreground text-xs">{attachment.meta}</div>}
    </div>
  );
  return attachment.href ? (
    <a className="block" href={attachment.href} rel="noreferrer" target="_blank">
      {card}
    </a>
  ) : (
    card
  );
}

function Row({ item, live, mounted }: { item: ActivityItem; live: boolean; mounted: boolean }) {
  return (
    <div className="flex items-start gap-3">
      <div className="relative shrink-0">
        <Avatar className="size-9">
          {item.actor.avatarUrl && <AvatarImage alt={item.actor.name} src={item.actor.avatarUrl} />}
          <AvatarFallback>{item.actor.fallback ?? initials(item.actor.name)}</AvatarFallback>
        </Avatar>
        <TypeBadge icon={item.icon} type={item.type} />
      </div>

      <div className="min-w-0 flex-1 pb-1">
        <div className="flex flex-wrap items-center gap-x-1.5">
          <span className="text-sm leading-snug">
            <span className="font-medium text-foreground">{item.actor.name}</span>
            <span className="text-muted-foreground"> {item.action} </span>
            {item.target && <span className="font-medium text-foreground">{item.target}</span>}
          </span>
          <span className="flex items-center gap-1 text-muted-foreground text-xs">
            {live && <LiveDot />}
            {timeAgo(item.time, mounted)}
          </span>
        </div>
        {item.attachment && <Attachment attachment={item.attachment} />}
      </div>
    </div>
  );
}

/**
 * ActivityFeed — an avatar-led activity feed. Each row shows an actor avatar with
 * an event-type badge, a rich action line, a relative timestamp, and an optional
 * attachment (quote / image / link). Items group by date and the newest (or any
 * `live`) item gets a pulsing indicator; new items animate in when prepended.
 */
export function ActivityFeed({
  items,
  className,
  groupByDate = true,
  stickyHeaders = false,
}: ActivityFeedProps) {
  const mounted = useMounted();
  const anyLive = items.some((it) => it.live);
  const isLive = (item: ActivityItem, index: number) => (anyLive ? !!item.live : index === 0);
  const keyOf = (item: ActivityItem, index: number) => item.id ?? String(index);

  if (!groupByDate) {
    return (
      <div className={cn("flex flex-col gap-5", className)}>
        <AnimatePresence initial={false}>
          {items.map((item, i) => (
            <motion.div
              animate={{ height: "auto", opacity: 1, y: 0 }}
              className="overflow-hidden"
              exit={{ height: 0, opacity: 0 }}
              initial={{ height: 0, opacity: 0, y: -8 }}
              key={keyOf(item, i)}
              transition={{ duration: 0.2, ease: "easeOut" }}
            >
              <Row item={item} live={isLive(item, i)} mounted={mounted} />
            </motion.div>
          ))}
        </AnimatePresence>
      </div>
    );
  }

  const groups: { label: string; items: { item: ActivityItem; index: number }[] }[] = [];
  items.forEach((item, index) => {
    const label = dayBucket(item.time, mounted) || "—";
    const last = groups[groups.length - 1];
    if (last && last.label === label) last.items.push({ index, item });
    else groups.push({ items: [{ index, item }], label });
  });

  return (
    <div className={cn("flex flex-col", className)}>
      {groups.map((group) => (
        <div key={`${group.label}-${group.items[0].index}`}>
          <div
            className={cn(
              "mt-6 mb-3 font-medium text-muted-foreground text-xs uppercase tracking-wide first:mt-0",
              stickyHeaders && "sticky top-0 z-10 bg-background py-1",
            )}
          >
            {group.label}
          </div>
          <div className="flex flex-col gap-5">
            <AnimatePresence initial={false}>
              {group.items.map(({ item, index }) => (
                <motion.div
                  animate={{ height: "auto", opacity: 1, y: 0 }}
                  className="overflow-hidden"
                  exit={{ height: 0, opacity: 0 }}
                  initial={{ height: 0, opacity: 0, y: -8 }}
                  key={keyOf(item, index)}
                  transition={{ duration: 0.2, ease: "easeOut" }}
                >
                  <Row item={item} live={isLive(item, index)} mounted={mounted} />
                </motion.div>
              ))}
            </AnimatePresence>
          </div>
        </div>
      ))}
    </div>
  );
}
```

## Comment Thread

A threaded comment discussion with depth-capped nesting, avatar rows, reactions, replies and collapsible subtrees.

- Page: https://rocket.gozturk.dev/comment-thread
- Install: `npx shadcn@latest add https://rocket.gozturk.dev/r/comment-thread.json`
- Source: `components/ui/comment-thread.tsx`

```tsx
"use client";

import { ChevronDown, Pin, Reply, SmilePlus } from "lucide-react";
import { AnimatePresence, motion } from "motion/react";
import { useEffect, useRef, useState } from "react";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { cn } from "@/lib/utils";

export interface CommentAuthor {
  name: string;
  avatarUrl?: string;
  fallback?: string;
}

export interface CommentReaction {
  emoji: string;
  count: number;
  reacted?: boolean;
}

export interface CommentNode {
  id: string;
  author: CommentAuthor;
  body: string;
  time: string | number | Date;
  reactions?: CommentReaction[];
  replies?: CommentNode[];
  pinned?: boolean;
  edited?: boolean;
}

export interface CommentThreadProps {
  comments: CommentNode[];
  currentUser?: CommentAuthor;
  maxDepth?: number;
  onReply?: (parentId: string, body: string) => void;
  onReact?: (commentId: string, emoji: string) => void;
  className?: string;
}

const EMOJI_SET = ["👍", "❤️", "🎉", "😄", "👀"];

/** False on the server and first client render, true after mount. */
function useMounted() {
  const [mounted, setMounted] = useState(false);
  useEffect(() => setMounted(true), []);
  return mounted;
}

function toDate(value: string | number | Date): Date | null {
  const d = value instanceof Date ? value : new Date(value);
  return Number.isNaN(d.getTime()) ? null : d;
}

const shortDate = (d: Date) =>
  new Intl.DateTimeFormat("en-US", { day: "numeric", month: "short" }).format(d);

/** Relative time once mounted; stable absolute date on server / first paint. */
function timeAgo(value: string | number | Date, mounted: boolean): string {
  const d = toDate(value);
  if (!d) return typeof value === "string" ? value : "";
  if (!mounted) return shortDate(d);
  const secs = Math.max(0, Math.floor((Date.now() - d.getTime()) / 1000));
  if (secs < 60) return "just now";
  const mins = Math.floor(secs / 60);
  if (mins < 60) return `${mins}m ago`;
  const hours = Math.floor(mins / 60);
  if (hours < 24) return `${hours}h ago`;
  const days = Math.floor(hours / 24);
  if (days < 7) return `${days}d ago`;
  return shortDate(d);
}

function initials(name: string): string {
  return name
    .split(/\s+/)
    .filter(Boolean)
    .slice(0, 2)
    .map((w) => w[0]?.toUpperCase() ?? "")
    .join("");
}

/** Total number of descendant replies under a node. */
function countDescendants(node: CommentNode): number {
  return (node.replies ?? []).reduce((sum, r) => sum + 1 + countDescendants(r), 0);
}

/** Immutably apply `fn` to the node with `id`, anywhere in the tree. */
function mapTree(
  nodes: CommentNode[],
  id: string,
  fn: (n: CommentNode) => CommentNode,
): CommentNode[] {
  return nodes.map((n) => {
    if (n.id === id) return fn(n);
    if (n.replies?.length) return { ...n, replies: mapTree(n.replies, id, fn) };
    return n;
  });
}

/** Toggle the current user's reaction for `emoji` on a node. */
function toggleReaction(node: CommentNode, emoji: string): CommentNode {
  const existing = node.reactions ?? [];
  const idx = existing.findIndex((r) => r.emoji === emoji);
  if (idx === -1) {
    return { ...node, reactions: [...existing, { count: 1, emoji, reacted: true }] };
  }
  const target = existing[idx];
  const nextCount = target.reacted ? target.count - 1 : target.count + 1;
  const reactions = existing
    .map((r, i) => (i === idx ? { ...r, count: nextCount, reacted: !target.reacted } : r))
    .filter((r) => r.count > 0);
  return { ...node, reactions };
}

/** Append a reply under a node. */
function addReply(node: CommentNode, reply: CommentNode): CommentNode {
  return { ...node, replies: [...(node.replies ?? []), reply] };
}

/** Render a body string, highlighting @mentions. */
function Mentions({ body }: { body: string }) {
  const parts = body.split(/(@[\w-]+)/g);
  return (
    <>
      {parts.map((part, i) =>
        part.startsWith("@") ? (
          // biome-ignore lint/suspicious/noArrayIndexKey: key combines index + content; split array never reorders
          <span className="font-medium text-primary" key={`${i}-${part}`}>
            {part}
          </span>
        ) : (
          part
        ),
      )}
    </>
  );
}

function EmojiPicker({ onPick }: { onPick: (emoji: string) => void }) {
  return (
    <div className="absolute bottom-full left-0 z-20 mb-1 flex gap-0.5 rounded-full border bg-background p-1 shadow-sm">
      {EMOJI_SET.map((emoji) => (
        <button
          className="flex size-7 items-center justify-center rounded-full text-sm transition-colors hover:bg-muted"
          key={emoji}
          onClick={() => onPick(emoji)}
          type="button"
        >
          {emoji}
        </button>
      ))}
    </div>
  );
}

function ReactionBar({
  reactions,
  onToggle,
}: {
  reactions: CommentReaction[];
  onToggle: (emoji: string) => void;
}) {
  const [pickerOpen, setPickerOpen] = useState(false);
  return (
    <div className="mt-1.5 flex flex-wrap items-center gap-1">
      {reactions.map((r) => (
        <button
          className={cn(
            "flex items-center gap-1 rounded-full border px-2 py-0.5 text-xs transition-colors",
            r.reacted
              ? "border-primary/30 bg-primary/10 text-foreground"
              : "bg-background text-muted-foreground hover:text-foreground",
          )}
          key={r.emoji}
          onClick={() => onToggle(r.emoji)}
          type="button"
        >
          <span>{r.emoji}</span>
          <span className="tabular-nums">{r.count}</span>
        </button>
      ))}
      <div className="relative">
        <button
          aria-label="Add reaction"
          className="flex size-6 items-center justify-center rounded-full border bg-background text-muted-foreground transition-colors hover:text-foreground"
          onClick={() => setPickerOpen((v) => !v)}
          type="button"
        >
          <SmilePlus className="size-3.5" />
        </button>
        {pickerOpen && (
          <EmojiPicker
            onPick={(emoji) => {
              onToggle(emoji);
              setPickerOpen(false);
            }}
          />
        )}
      </div>
    </div>
  );
}

function Composer({
  author,
  onCancel,
  onSubmit,
}: {
  author: CommentAuthor;
  onCancel: () => void;
  onSubmit: (body: string) => void;
}) {
  const [value, setValue] = useState("");
  const submit = () => {
    const trimmed = value.trim();
    if (!trimmed) return;
    onSubmit(trimmed);
    setValue("");
  };
  return (
    <div className="mt-2 flex items-start gap-2">
      <Avatar className="size-7 shrink-0">
        {author.avatarUrl && <AvatarImage alt={author.name} src={author.avatarUrl} />}
        <AvatarFallback>{author.fallback ?? initials(author.name)}</AvatarFallback>
      </Avatar>
      <div className="min-w-0 flex-1">
        <textarea
          className="w-full resize-none rounded-lg border bg-background px-3 py-2 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring/40"
          onChange={(e) => setValue(e.target.value)}
          onKeyDown={(e) => {
            if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) submit();
            if (e.key === "Escape") onCancel();
          }}
          placeholder="Write a reply…"
          rows={2}
          value={value}
        />
        <div className="mt-1.5 flex items-center gap-2">
          <button
            className="rounded-md bg-primary px-3 py-1 font-medium text-primary-foreground text-xs disabled:opacity-50"
            disabled={!value.trim()}
            onClick={submit}
            type="button"
          >
            Reply
          </button>
          <button
            className="rounded-md px-3 py-1 text-muted-foreground text-xs transition-colors hover:text-foreground"
            onClick={onCancel}
            type="button"
          >
            Cancel
          </button>
        </div>
      </div>
    </div>
  );
}

interface NodeCtx {
  collapsed: Set<string>;
  currentUser: CommentAuthor;
  maxDepth: number;
  mounted: boolean;
  onReact: (id: string, emoji: string) => void;
  onReply: (parentId: string, body: string) => void;
  onToggleCollapse: (id: string) => void;
  replyingTo: string | null;
  setReplyingTo: (id: string | null) => void;
}

function CommentNodeView({ ctx, depth, node }: { ctx: NodeCtx; depth: number; node: CommentNode }) {
  const replies = node.replies ?? [];
  const hasReplies = replies.length > 0;
  const isCollapsed = ctx.collapsed.has(node.id);
  const indentChildren = depth < ctx.maxDepth;
  const total = countDescendants(node);

  return (
    <div className="relative">
      <div className="flex items-start gap-2.5">
        <Avatar className="size-8 shrink-0">
          {node.author.avatarUrl && (
            <AvatarImage alt={node.author.name} src={node.author.avatarUrl} />
          )}
          <AvatarFallback>{node.author.fallback ?? initials(node.author.name)}</AvatarFallback>
        </Avatar>

        <div className="min-w-0 flex-1">
          <div className="flex flex-wrap items-center gap-x-2">
            <span className="font-medium text-foreground text-sm">{node.author.name}</span>
            {node.pinned && (
              <span className="flex items-center gap-1 text-muted-foreground text-xs">
                <Pin className="size-3" />
                Pinned
              </span>
            )}
            <span className="text-muted-foreground text-xs">{timeAgo(node.time, ctx.mounted)}</span>
            {node.edited && <span className="text-muted-foreground text-xs">· edited</span>}
          </div>

          <p className="mt-0.5 whitespace-pre-wrap text-foreground text-sm leading-snug">
            <Mentions body={node.body} />
          </p>

          <ReactionBar
            onToggle={(emoji) => ctx.onReact(node.id, emoji)}
            reactions={node.reactions ?? []}
          />

          <div className="mt-1.5 flex items-center gap-3 text-muted-foreground text-xs">
            <button
              className="flex items-center gap-1 transition-colors hover:text-foreground"
              onClick={() => ctx.setReplyingTo(ctx.replyingTo === node.id ? null : node.id)}
              type="button"
            >
              <Reply className="size-3.5" />
              Reply
            </button>
            {hasReplies && (
              <button
                aria-expanded={!isCollapsed}
                className="flex items-center gap-1 transition-colors hover:text-foreground"
                onClick={() => ctx.onToggleCollapse(node.id)}
                type="button"
              >
                <ChevronDown
                  className={cn("size-3.5 transition-transform", isCollapsed && "-rotate-90")}
                />
                {total} {total === 1 ? "reply" : "replies"}
              </button>
            )}
          </div>

          {ctx.replyingTo === node.id && (
            <Composer
              author={ctx.currentUser}
              onCancel={() => ctx.setReplyingTo(null)}
              onSubmit={(body) => ctx.onReply(node.id, body)}
            />
          )}
        </div>
      </div>

      {hasReplies && (
        <AnimatePresence initial={false}>
          {!isCollapsed && (
            <motion.div
              animate={{ height: "auto", opacity: 1 }}
              className="overflow-hidden"
              exit={{ height: 0, opacity: 0 }}
              initial={{ height: 0, opacity: 0 }}
              key="replies"
              transition={{ duration: 0.2, ease: "easeOut" }}
            >
              {indentChildren ? (
                <div className="relative mt-1 ml-4 border-border border-l pl-5">
                  {replies.map((child) => (
                    <div className="relative pt-3" key={child.id}>
                      <span
                        aria-hidden
                        className="absolute top-0 -left-5 h-7 w-5 rounded-bl-[10px] border-border border-b border-l"
                      />
                      <CommentNodeView ctx={ctx} depth={depth + 1} node={child} />
                    </div>
                  ))}
                </div>
              ) : (
                <div className="mt-3 flex flex-col gap-3">
                  {replies.map((child) => (
                    <CommentNodeView ctx={ctx} depth={depth} key={child.id} node={child} />
                  ))}
                </div>
              )}
            </motion.div>
          )}
        </AnimatePresence>
      )}
    </div>
  );
}

/**
 * CommentThread — a threaded comment discussion. Replies nest with a CSS
 * threading connector up to `maxDepth`, then flatten. Each comment supports
 * reactions, an inline reply composer, and a collapsible subtree. State is
 * internal (seeded from `comments`); `onReply` / `onReact` notify a parent.
 */
export function CommentThread({
  comments,
  currentUser,
  maxDepth = 2,
  onReply,
  onReact,
  className,
}: CommentThreadProps) {
  const mounted = useMounted();
  const [tree, setTree] = useState<CommentNode[]>(() => comments);
  const [collapsed, setCollapsed] = useState<Set<string>>(() => new Set());
  const [replyingTo, setReplyingTo] = useState<string | null>(null);
  const idCounter = useRef(0);

  const me: CommentAuthor = currentUser ?? { name: "You" };

  const handleReact = (id: string, emoji: string) => {
    setTree((prev) => mapTree(prev, id, (n) => toggleReaction(n, emoji)));
    onReact?.(id, emoji);
  };

  const handleReply = (parentId: string, body: string) => {
    idCounter.current += 1;
    const reply: CommentNode = {
      author: me,
      body,
      id: `reply-${idCounter.current}`,
      time: new Date(),
    };
    setTree((prev) => mapTree(prev, parentId, (n) => addReply(n, reply)));
    setReplyingTo(null);
    onReply?.(parentId, body);
  };

  const toggleCollapse = (id: string) =>
    setCollapsed((prev) => {
      const next = new Set(prev);
      if (next.has(id)) next.delete(id);
      else next.add(id);
      return next;
    });

  if (tree.length === 0) return null;

  const ctx: NodeCtx = {
    collapsed,
    currentUser: me,
    maxDepth,
    mounted,
    onReact: handleReact,
    onReply: handleReply,
    onToggleCollapse: toggleCollapse,
    replyingTo,
    setReplyingTo,
  };

  return (
    <div className={cn("flex flex-col gap-4", className)}>
      {tree.map((node) => (
        <CommentNodeView ctx={ctx} depth={0} key={node.id} node={node} />
      ))}
    </div>
  );
}
```

## Stat Tile

A KPI stat tile with an animated count-up value, trend delta with semantic coloring (invertable), and a recharts sparkline with gradient fill.

- Page: https://rocket.gozturk.dev/stat-tile
- Install: `npx shadcn@latest add https://rocket.gozturk.dev/r/stat-tile.json`
- Source: `components/ui/stat-tile.tsx`

```tsx
"use client";

import { type LucideIcon, Minus, TrendingDown, TrendingUp } from "lucide-react";
import { animate as animateValue } from "motion/react";
import { useEffect, useId, useRef, useState } from "react";
import { Area, AreaChart, ResponsiveContainer } from "recharts";
import { cn } from "@/lib/utils";

export interface StatTileProps {
  label: string;
  value: number;
  data?: number[];
  delta?: number;
  invertDelta?: boolean;
  icon?: LucideIcon;
  period?: string;
  prefix?: string;
  suffix?: string;
  format?: (n: number) => string;
  animate?: boolean;
  className?: string;
}

type Tone = "good" | "bad" | "neutral";

function toneOf(delta: number | undefined, invert: boolean): Tone {
  if (delta === undefined || delta === 0) return "neutral";
  const positive = delta > 0;
  const good = invert ? !positive : positive;
  return good ? "good" : "bad";
}

function decimalsOf(n: number): number {
  if (Number.isInteger(n)) return 0;
  const s = String(n);
  const i = s.indexOf(".");
  return i === -1 ? 0 : s.length - i - 1;
}

const TONE_TEXT: Record<Tone, string> = {
  bad: "text-red-600 dark:text-red-400",
  good: "text-emerald-600 dark:text-emerald-400",
  neutral: "text-muted-foreground",
};

const TONE_STROKE: Record<Tone, string> = {
  bad: "#ef4444",
  good: "#10b981",
  neutral: "#94a3b8",
};

function AnimatedNumber({
  value,
  animate: doAnimate,
  format,
}: {
  value: number;
  animate: boolean;
  format: (n: number) => string;
}) {
  const [display, setDisplay] = useState(() => format(value));
  const formatRef = useRef(format);
  formatRef.current = format;
  const decimals = decimalsOf(value);

  useEffect(() => {
    const fmt = formatRef.current;
    const reduce =
      typeof window !== "undefined" &&
      window.matchMedia?.("(prefers-reduced-motion: reduce)")?.matches;
    if (!doAnimate || reduce) {
      setDisplay(fmt(value));
      return;
    }
    const controls = animateValue(0, value, {
      duration: 0.8,
      ease: "easeOut",
      onUpdate: (latest) => {
        const rounded = decimals === 0 ? Math.round(latest) : Number(latest.toFixed(decimals));
        setDisplay(fmt(rounded));
      },
    });
    return () => controls.stop();
  }, [value, doAnimate, decimals]);

  return <span className="tabular-nums">{display}</span>;
}

function Sparkline({
  data,
  stroke,
  gradientId,
}: {
  data: number[];
  stroke: string;
  gradientId: string;
}) {
  const chartData = data.map((v) => ({ v }));
  return (
    <div className="h-10 w-full">
      <ResponsiveContainer height="100%" width="100%">
        <AreaChart data={chartData} margin={{ bottom: 0, left: 0, right: 0, top: 2 }}>
          <defs>
            <linearGradient id={gradientId} x1="0" x2="0" y1="0" y2="1">
              <stop offset="0%" stopColor={stroke} stopOpacity={0.3} />
              <stop offset="100%" stopColor={stroke} stopOpacity={0} />
            </linearGradient>
          </defs>
          <Area
            dataKey="v"
            dot={false}
            fill={`url(#${gradientId})`}
            stroke={stroke}
            strokeWidth={1.5}
            type="monotone"
          />
        </AreaChart>
      </ResponsiveContainer>
    </div>
  );
}

export function StatTile({
  label,
  value,
  data,
  delta,
  invertDelta = false,
  icon: Icon,
  period,
  prefix,
  suffix,
  format,
  animate = true,
  className,
}: StatTileProps) {
  const gradientId = `spark-${useId().replace(/:/g, "")}`;
  const tone = toneOf(delta, invertDelta);
  const TrendIcon =
    delta === undefined || delta === 0 ? Minus : delta > 0 ? TrendingUp : TrendingDown;
  const formatValue = format ?? ((n: number) => new Intl.NumberFormat("en-US").format(n));

  return (
    <div
      className={cn("flex flex-col gap-3 rounded-xl border border-border bg-card p-4", className)}
    >
      <div className="flex items-center gap-2 text-muted-foreground">
        {Icon ? <Icon className="size-4" /> : null}
        <span className="font-medium text-sm">{label}</span>
      </div>

      <div className="font-semibold text-3xl text-foreground leading-none">
        {prefix ? <span className="text-muted-foreground">{prefix}</span> : null}
        <AnimatedNumber animate={animate} format={formatValue} value={value} />
        {suffix ? (
          <span className="ml-0.5 font-normal text-muted-foreground text-xl">{suffix}</span>
        ) : null}
      </div>

      {delta !== undefined ? (
        <div className={cn("flex items-center gap-1 text-xs", TONE_TEXT[tone])}>
          <TrendIcon className="size-3.5" />
          <span className="font-medium">
            {delta > 0 ? "+" : delta < 0 ? "-" : ""}
            {Math.abs(delta)}%
          </span>
          {period ? <span className="text-muted-foreground">{period}</span> : null}
        </div>
      ) : null}

      {data && data.length > 0 ? (
        <Sparkline data={data} gradientId={gradientId} stroke={TONE_STROKE[tone]} />
      ) : null}
    </div>
  );
}

export default StatTile;
```

## Diff Viewer

A code-editor-style structural diff viewer for two JSON values, with unified/split toggle, an only-changes filter, type coloring and add/remove/change counts.

- Page: https://rocket.gozturk.dev/diff-viewer
- Install: `npx shadcn@latest add https://rocket.gozturk.dev/r/diff-viewer.json`
- Source: `components/ui/diff-viewer.tsx`

```tsx
"use client";

import { Columns2, Rows3 } from "lucide-react";
import { AnimatePresence, motion } from "motion/react";
import type { ReactNode } from "react";
import { useMemo, useState } from "react";
import { cn } from "@/lib/utils";

export interface DiffViewerProps {
  before: unknown;
  after: unknown;
  defaultView?: "unified" | "split";
  defaultOnlyChanges?: boolean;
  showLineNumbers?: boolean;
  className?: string;
}

type ValueType = "string" | "number" | "boolean" | "null" | "undefined" | "object" | "array";
type DiffStatus = "added" | "removed" | "changed" | "unchanged";
type Path = (string | number)[];
type ParseResult = { ok: true; value: unknown } | { ok: false; error: string; raw: string };

function parseInput(data: unknown): ParseResult {
  if (typeof data === "string") {
    try {
      return { ok: true, value: JSON.parse(data) };
    } catch (err) {
      return { error: err instanceof Error ? err.message : "Invalid JSON", ok: false, raw: data };
    }
  }
  return { ok: true, value: data };
}

function typeOf(value: unknown): ValueType {
  if (value === null) return "null";
  if (value === undefined) return "undefined";
  if (Array.isArray(value)) return "array";
  const t = typeof value;
  if (t === "string" || t === "number" || t === "boolean" || t === "object") return t;
  return "string";
}

function isContainer(t: ValueType): boolean {
  return t === "object" || t === "array";
}

function entriesOf(value: unknown, type: ValueType): [string | number, unknown][] {
  if (type === "array") return (value as unknown[]).map((v, i) => [i, v]);
  return Object.entries(value as Record<string, unknown>);
}

function keyOf(path: Path): string {
  return JSON.stringify(path);
}

function formatPrimitive(value: unknown, type: ValueType): string {
  if (type === "string") return JSON.stringify(value);
  if (type === "null") return "null";
  if (type === "undefined") return "undefined";
  return String(value);
}

/** Display string for a value: primitives formatted, containers summarized. */
function display(value: unknown, type?: ValueType): string {
  const t = type ?? typeOf(value);
  if (isContainer(t)) return t === "array" ? "[ … ]" : "{ … }";
  return formatPrimitive(value, t);
}

interface DiffNode {
  status: DiffStatus;
  type: ValueType;
  oldValue?: unknown;
  newValue?: unknown;
  children?: { key: string | number; node: DiffNode }[];
}

/** Build a one-sided subtree where every node has `status` (added or removed). */
function buildSide(value: unknown, status: "added" | "removed"): DiffNode {
  const type = typeOf(value);
  if (isContainer(type)) {
    const children = entriesOf(value, type).map(([key, v]) => ({
      key,
      node: buildSide(v, status),
    }));
    return { children, status, type };
  }
  return status === "added" ? { newValue: value, status, type } : { oldValue: value, status, type };
}

function diffChildren(before: unknown, after: unknown, type: ValueType) {
  const out: { key: string | number; node: DiffNode }[] = [];
  if (type === "array") {
    const b = before as unknown[];
    const a = after as unknown[];
    const len = Math.max(b.length, a.length);
    for (let i = 0; i < len; i++) {
      const inB = i < b.length;
      const inA = i < a.length;
      if (inB && inA) out.push({ key: i, node: diffTree(b[i], a[i]) });
      else if (inA) out.push({ key: i, node: buildSide(a[i], "added") });
      else out.push({ key: i, node: buildSide(b[i], "removed") });
    }
    return out;
  }
  const b = before as Record<string, unknown>;
  const a = after as Record<string, unknown>;
  const keys: string[] = [];
  for (const k of Object.keys(b)) keys.push(k);
  for (const k of Object.keys(a)) if (!(k in b)) keys.push(k);
  for (const k of keys) {
    const inB = k in b;
    const inA = k in a;
    if (inB && inA) out.push({ key: k, node: diffTree(b[k], a[k]) });
    else if (inA) out.push({ key: k, node: buildSide(a[k], "added") });
    else out.push({ key: k, node: buildSide(b[k], "removed") });
  }
  return out;
}

function diffTree(before: unknown, after: unknown): DiffNode {
  const bt = typeOf(before);
  const at = typeOf(after);
  if (isContainer(bt) && isContainer(at) && bt === at) {
    const children = diffChildren(before, after, at);
    const changed = children.some((c) => c.node.status !== "unchanged");
    return { children, status: changed ? "changed" : "unchanged", type: at };
  }
  // primitive vs primitive, or any structural mismatch → leaf compare
  if (Object.is(before, after)) {
    return { newValue: after, oldValue: before, status: "unchanged", type: at };
  }
  return { newValue: after, oldValue: before, status: "changed", type: at };
}

function countStatuses(root: DiffNode): { added: number; removed: number; changed: number } {
  const c = { added: 0, changed: 0, removed: 0 };
  function walk(n: DiffNode) {
    if (n.status === "added") {
      c.added++;
      return;
    }
    if (n.status === "removed") {
      c.removed++;
      return;
    }
    if (n.status === "changed") {
      if (n.children) for (const ch of n.children) walk(ch.node);
      else c.changed++;
    }
  }
  walk(root);
  return c;
}

interface DiffRow {
  id: string;
  depth: number;
  keyLabel?: string | number;
  status: DiffStatus;
  variant: "open" | "close" | "primitive";
  bracket?: "{" | "}" | "[" | "]";
  valueType: ValueType;
  oldValue?: unknown;
  newValue?: unknown;
  trailingComma?: boolean;
}

function hasChange(n: DiffNode): boolean {
  return n.status !== "unchanged";
}

function flattenDiff(root: DiffNode, onlyChanges: boolean): DiffRow[] {
  const rows: DiffRow[] = [];

  function pushNode(
    node: DiffNode,
    path: Path,
    keyLabel: string | number | undefined,
    trailingComma: boolean,
  ) {
    if (onlyChanges && !hasChange(node)) return;
    const k = keyOf(path);
    const depth = path.length;

    if (node.children && isContainer(node.type)) {
      const isArray = node.type === "array";
      rows.push({
        bracket: isArray ? "[" : "{",
        depth,
        id: k,
        keyLabel,
        status: node.status,
        trailingComma: false,
        valueType: node.type,
        variant: "open",
      });
      const visible = onlyChanges ? node.children.filter((c) => hasChange(c.node)) : node.children;
      visible.forEach((c, i) => {
        pushNode(c.node, [...path, c.key], c.key, i < visible.length - 1);
      });
      rows.push({
        bracket: isArray ? "]" : "}",
        depth,
        id: `${k}:close`,
        status: node.status,
        trailingComma,
        valueType: node.type,
        variant: "close",
      });
      return;
    }

    rows.push({
      depth,
      id: k,
      keyLabel,
      newValue: node.newValue,
      oldValue: node.oldValue,
      status: node.status,
      trailingComma,
      valueType: node.type,
      variant: "primitive",
    });
  }

  pushNode(root, [], undefined, false);
  return rows;
}

const STATUS_ROW: Record<DiffStatus, string> = {
  added: "bg-emerald-500/10",
  changed: "bg-amber-500/10",
  removed: "bg-red-500/10",
  unchanged: "",
};

const STATUS_SIGN: Record<DiffStatus, string> = {
  added: "+",
  changed: "~",
  removed: "-",
  unchanged: " ",
};

const STATUS_TEXT: Record<DiffStatus, string> = {
  added: "text-emerald-600 dark:text-emerald-400",
  changed: "text-amber-600 dark:text-amber-400",
  removed: "text-red-600 dark:text-red-400",
  unchanged: "text-muted-foreground",
};

/** The value (or bracket) portion of a row. `which` selects the side for changed rows. */
function valueNode(row: DiffRow, which: "unified" | "old" | "new"): ReactNode {
  if (row.variant !== "primitive") {
    return <span className="text-muted-foreground">{row.bracket}</span>;
  }
  if (row.status === "changed") {
    if (which === "old") {
      return (
        <span className="text-red-600 line-through dark:text-red-400">{display(row.oldValue)}</span>
      );
    }
    if (which === "new") {
      return (
        <span className="text-emerald-600 dark:text-emerald-400">{display(row.newValue)}</span>
      );
    }
    return (
      <>
        <span className="text-red-600 line-through opacity-70 dark:text-red-400">
          {display(row.oldValue)}
        </span>
        <span className="mx-1 text-muted-foreground">→</span>
        <span className="text-emerald-600 dark:text-emerald-400">{display(row.newValue)}</span>
      </>
    );
  }
  const value = row.status === "removed" ? row.oldValue : row.newValue;
  return <span className={STATUS_TEXT[row.status]}>{display(value, row.valueType)}</span>;
}

/** Indented key + value content for one cell/line. */
function lineContent(row: DiffRow, which: "unified" | "old" | "new"): ReactNode {
  const showKey = typeof row.keyLabel === "string";
  return (
    <div className="flex-1 whitespace-pre" style={{ paddingLeft: row.depth * 14 }}>
      {showKey ? <span className="text-foreground">{`"${row.keyLabel}"`}: </span> : null}
      {valueNode(row, which)}
      {row.trailingComma ? <span className="text-muted-foreground">,</span> : null}
    </div>
  );
}

function Gutter({ n, show }: { n: number | null; show: boolean }) {
  if (!show) return null;
  return (
    <span className="w-7 shrink-0 select-none pr-1 text-right text-[10px] text-muted-foreground/50 tabular-nums leading-5">
      {n ?? ""}
    </span>
  );
}

function UnifiedLine({
  row,
  lineNo,
  showLineNumbers,
}: {
  row: DiffRow;
  lineNo: number;
  showLineNumbers: boolean;
}) {
  return (
    <div className={cn("flex items-start gap-1.5 px-2 leading-5", STATUS_ROW[row.status])}>
      <Gutter n={lineNo} show={showLineNumbers} />
      <span className={cn("w-3 shrink-0 select-none text-center", STATUS_TEXT[row.status])}>
        {STATUS_SIGN[row.status]}
      </span>
      {lineContent(row, "unified")}
    </div>
  );
}

function SplitLine({
  row,
  lineNo,
  showLineNumbers,
}: {
  row: DiffRow;
  lineNo: number;
  showLineNumbers: boolean;
}) {
  const leftShown = row.status !== "added";
  const rightShown = row.status !== "removed";
  const leftBg =
    row.status === "removed"
      ? "bg-red-500/10"
      : row.status === "changed"
        ? "bg-amber-500/10"
        : row.status === "added"
          ? "bg-muted/20"
          : "";
  const rightBg =
    row.status === "added"
      ? "bg-emerald-500/10"
      : row.status === "changed"
        ? "bg-amber-500/10"
        : row.status === "removed"
          ? "bg-muted/20"
          : "";
  return (
    <div className="grid grid-cols-2 leading-5">
      <div className={cn("flex items-start gap-1.5 border-border border-r px-2", leftBg)}>
        <Gutter n={leftShown ? lineNo : null} show={showLineNumbers} />
        {leftShown ? lineContent(row, "old") : <div className="flex-1" />}
      </div>
      <div className={cn("flex items-start gap-1.5 px-2", rightBg)}>
        <Gutter n={rightShown ? lineNo : null} show={showLineNumbers} />
        {rightShown ? lineContent(row, "new") : <div className="flex-1" />}
      </div>
    </div>
  );
}

export function DiffViewer({
  before,
  after,
  defaultView = "unified",
  defaultOnlyChanges = false,
  showLineNumbers = true,
  className,
}: DiffViewerProps) {
  const beforeParsed = useMemo(() => parseInput(before), [before]);
  const afterParsed = useMemo(() => parseInput(after), [after]);
  const [view, setView] = useState<"unified" | "split">(defaultView);
  const [onlyChanges, setOnlyChanges] = useState(defaultOnlyChanges);

  const tree = useMemo(
    () =>
      beforeParsed.ok && afterParsed.ok ? diffTree(beforeParsed.value, afterParsed.value) : null,
    [beforeParsed, afterParsed],
  );
  const counts = useMemo(
    () => (tree ? countStatuses(tree) : { added: 0, changed: 0, removed: 0 }),
    [tree],
  );
  const rows = useMemo(() => (tree ? flattenDiff(tree, onlyChanges) : []), [tree, onlyChanges]);

  if (!beforeParsed.ok || !afterParsed.ok) {
    const err = !beforeParsed.ok ? beforeParsed : (afterParsed as { error: string; raw: string });
    return (
      <div
        className={cn(
          "rounded-lg border border-destructive/40 bg-destructive/5 p-3 font-mono text-xs",
          className,
        )}
      >
        <p className="mb-2 font-medium font-sans text-destructive">Invalid JSON — {err.error}</p>
        <pre className="overflow-x-auto whitespace-pre-wrap text-muted-foreground">{err.raw}</pre>
      </div>
    );
  }

  const segBtn = (active: boolean) =>
    cn(
      "flex items-center gap-1 rounded px-2 py-0.5 text-xs transition-colors",
      active ? "bg-muted text-foreground" : "text-muted-foreground hover:text-foreground",
    );

  return (
    <div className={cn("rounded-lg border border-border bg-muted/20 font-mono text-xs", className)}>
      <div className="flex flex-wrap items-center gap-2 border-border border-b px-2 py-1.5 font-sans">
        <div className="flex rounded-md border border-border p-0.5">
          <button
            className={segBtn(view === "unified")}
            onClick={() => setView("unified")}
            type="button"
          >
            <Rows3 className="size-3" /> Unified
          </button>
          <button
            className={segBtn(view === "split")}
            onClick={() => setView("split")}
            type="button"
          >
            <Columns2 className="size-3" /> Split
          </button>
        </div>
        <button
          className={segBtn(onlyChanges)}
          onClick={() => setOnlyChanges((v) => !v)}
          type="button"
        >
          Only changes
        </button>
        <div className="ml-auto flex items-center gap-2 text-xs tabular-nums">
          <span className="text-emerald-600 dark:text-emerald-400">+{counts.added}</span>
          <span className="text-red-600 dark:text-red-400">-{counts.removed}</span>
          <span className="text-amber-600 dark:text-amber-400">~{counts.changed}</span>
        </div>
      </div>

      <div className="overflow-x-auto py-1.5">
        {rows.length === 0 ? (
          <p className="px-3 py-2 font-sans text-muted-foreground text-xs italic">No differences</p>
        ) : (
          <AnimatePresence initial={false} mode="wait">
            <motion.div
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
              initial={{ opacity: 0 }}
              key={view}
              transition={{ duration: 0.12 }}
            >
              {rows.map((row, i) =>
                view === "unified" ? (
                  <UnifiedLine
                    key={row.id}
                    lineNo={i + 1}
                    row={row}
                    showLineNumbers={showLineNumbers}
                  />
                ) : (
                  <SplitLine
                    key={row.id}
                    lineNo={i + 1}
                    row={row}
                    showLineNumbers={showLineNumbers}
                  />
                ),
              )}
            </motion.div>
          </AnimatePresence>
        )}
      </div>
    </div>
  );
}

export default DiffViewer;
```

## Metric Chart

An observability time-series chart with threshold lines, event annotations, breach shading, and a crosshair tooltip with a click-to-toggle legend.

- Page: https://rocket.gozturk.dev/metric-chart
- Install: `npx shadcn@latest add https://rocket.gozturk.dev/r/metric-chart.json`
- Source: `components/ui/metric-chart.tsx`

```tsx
"use client";

import { useMemo, useState } from "react";
import {
  CartesianGrid,
  Line,
  LineChart,
  ReferenceArea,
  ReferenceLine,
  ResponsiveContainer,
  Tooltip,
  XAxis,
  YAxis,
} from "recharts";
import { cn } from "@/lib/utils";

export interface MetricPoint {
  t: number | string | Date;
  v: number;
}

export interface MetricSeries {
  key: string;
  label: string;
  color?: string;
  points: MetricPoint[];
}

export interface MetricThreshold {
  value: number;
  label?: string;
  severity?: "warning" | "critical";
}

export interface MetricAnnotation {
  t: number | string | Date;
  label: string;
  description?: string;
}

export interface MetricChartProps {
  series: MetricSeries[];
  thresholds?: MetricThreshold[];
  annotations?: MetricAnnotation[];
  unit?: string;
  height?: number;
  shadeBreaches?: boolean;
  className?: string;
}

const PALETTE = ["#3b82f6", "#a855f7", "#10b981", "#f59e0b", "#ef4444", "#06b6d4"];

const SEVERITY_COLOR: Record<"warning" | "critical", string> = {
  critical: "#ef4444",
  warning: "#f59e0b",
};

function palette(i: number): string {
  return PALETTE[i % PALETTE.length];
}

function toMs(t: number | string | Date): number {
  if (t instanceof Date) return t.getTime();
  if (typeof t === "number") return t;
  const d = new Date(t);
  return Number.isNaN(d.getTime()) ? 0 : d.getTime();
}

function pad(n: number): string {
  return n < 10 ? `0${n}` : String(n);
}

function formatTime(t: number): string {
  const d = new Date(t);
  if (Number.isNaN(d.getTime())) return "";
  return `${pad(d.getHours())}:${pad(d.getMinutes())}`;
}

type Row = { t: number } & Record<string, number | undefined>;

function mergeSeries(series: MetricSeries[]): Row[] {
  const map = new Map<number, Row>();
  for (const s of series) {
    for (const p of s.points) {
      const ts = toMs(p.t);
      let row = map.get(ts);
      if (!row) {
        row = { t: ts };
        map.set(ts, row);
      }
      row[s.key] = p.v;
    }
  }
  return [...map.values()].sort((a, b) => a.t - b.t);
}

export function MetricChart({
  series,
  thresholds = [],
  annotations = [],
  unit = "",
  height = 240,
  shadeBreaches,
  className,
}: MetricChartProps) {
  const [hidden, setHidden] = useState<Set<string>>(() => new Set());

  const data = useMemo(() => mergeSeries(series), [series]);
  const yMax = useMemo(() => {
    let m = 0;
    for (const s of series) for (const p of s.points) m = Math.max(m, p.v);
    for (const th of thresholds) m = Math.max(m, th.value);
    return Math.ceil(m * 1.05);
  }, [series, thresholds]);

  const shade = shadeBreaches ?? thresholds.length > 0;
  const colors = series.map((s, i) => s.color ?? palette(i));
  const showLegend = series.length > 1;

  const toggle = (key: string) =>
    setHidden((prev) => {
      const next = new Set(prev);
      if (next.has(key)) next.delete(key);
      else next.add(key);
      return next;
    });

  return (
    <div className={cn("rounded-lg border border-border bg-card p-3", className)}>
      <div style={{ height }}>
        <ResponsiveContainer height="100%" width="100%">
          <LineChart data={data} margin={{ bottom: 4, left: -8, right: 16, top: 18 }}>
            <CartesianGrid stroke="var(--border)" strokeDasharray="3 3" vertical={false} />
            <XAxis
              axisLine={false}
              dataKey="t"
              domain={["dataMin", "dataMax"]}
              scale="time"
              tick={{ fill: "var(--muted-foreground)", fontSize: 11 }}
              tickFormatter={formatTime}
              tickLine={false}
              type="number"
            />
            <YAxis
              axisLine={false}
              domain={[0, yMax]}
              tick={{ fill: "var(--muted-foreground)", fontSize: 11 }}
              tickFormatter={(v) => `${v}${unit}`}
              tickLine={false}
              width={48}
            />
            <Tooltip
              content={({ active, label, payload }) => {
                if (!active || !payload || payload.length === 0) return null;
                const ts = typeof label === "number" ? label : Number(label);
                const ann = annotations.find((a) => toMs(a.t) === ts);
                return (
                  <div className="rounded-md border border-border bg-popover px-2.5 py-1.5 text-xs shadow-md">
                    <div className="mb-1 font-medium text-muted-foreground">{formatTime(ts)}</div>
                    {payload.map((p) => (
                      <div className="flex items-center gap-1.5" key={String(p.dataKey)}>
                        <span className="size-2 rounded-full" style={{ background: p.color }} />
                        <span className="text-muted-foreground">{p.name}</span>
                        <span className="ml-auto font-medium tabular-nums">
                          {p.value}
                          {unit}
                        </span>
                      </div>
                    ))}
                    {ann ? (
                      <div className="mt-1 border-border border-t pt-1 text-amber-600 dark:text-amber-400">
                        {ann.label}
                        {ann.description ? `: ${ann.description}` : ""}
                      </div>
                    ) : null}
                  </div>
                );
              }}
              cursor={{
                stroke: "var(--muted-foreground)",
                strokeDasharray: "3 3",
                strokeOpacity: 0.4,
              }}
            />

            {shade
              ? thresholds.map((th) => (
                  <ReferenceArea
                    fill={SEVERITY_COLOR[th.severity ?? "warning"]}
                    fillOpacity={0.06}
                    ifOverflow="extendDomain"
                    key={`area-${th.value}`}
                    y1={th.value}
                    y2={yMax}
                  />
                ))
              : null}

            {thresholds.map((th) => (
              <ReferenceLine
                key={`th-${th.value}`}
                label={{
                  fill: SEVERITY_COLOR[th.severity ?? "warning"],
                  fontSize: 10,
                  position: "insideTopRight",
                  value: th.label ?? `${th.value}${unit}`,
                }}
                stroke={SEVERITY_COLOR[th.severity ?? "warning"]}
                strokeDasharray="4 3"
                y={th.value}
              />
            ))}

            {annotations.map((a) => (
              <ReferenceLine
                key={`an-${toMs(a.t)}`}
                label={{
                  fill: "var(--muted-foreground)",
                  fontSize: 10,
                  position: "insideTopRight",
                  value: a.label,
                }}
                stroke="var(--muted-foreground)"
                strokeDasharray="3 3"
                strokeOpacity={0.5}
                x={toMs(a.t)}
              />
            ))}

            {series.map((s, i) => (
              <Line
                connectNulls
                dataKey={s.key}
                dot={false}
                hide={hidden.has(s.key)}
                key={s.key}
                name={s.label}
                stroke={colors[i]}
                strokeWidth={1.5}
                type="monotone"
              />
            ))}
          </LineChart>
        </ResponsiveContainer>
      </div>

      {showLegend ? (
        <div className="mt-2 flex flex-wrap items-center gap-3 px-1">
          {series.map((s, i) => {
            const off = hidden.has(s.key);
            return (
              <button
                className={cn(
                  "flex items-center gap-1.5 text-xs transition-opacity",
                  off && "opacity-40",
                )}
                key={s.key}
                onClick={() => toggle(s.key)}
                type="button"
              >
                <span className="size-2.5 rounded-full" style={{ background: colors[i] }} />
                <span className={cn(off && "line-through")}>{s.label}</span>
              </button>
            );
          })}
        </div>
      ) : null}
    </div>
  );
}

export default MetricChart;
```

## Latency Histogram

A latency distribution histogram with p50/p95/p99 markers, percentile-zone bar coloring, hover bucket counts and a summary stat row; accepts raw samples or pre-bucketed bins.

- Page: https://rocket.gozturk.dev/latency-histogram
- Install: `npx shadcn@latest add https://rocket.gozturk.dev/r/latency-histogram.json`
- Source: `components/ui/latency-histogram.tsx`

```tsx
"use client";

import { motion } from "motion/react";
import { useMemo, useState } from "react";
import { cn } from "@/lib/utils";

export interface HistogramBin {
  from: number;
  to: number;
  count: number;
}

export interface Percentile {
  label: string;
  value: number;
}

export interface LatencyHistogramProps {
  samples?: number[];
  bins?: HistogramBin[];
  percentiles?: Percentile[];
  bucketCount?: number;
  unit?: string;
  height?: number;
  className?: string;
}

interface Stats {
  min: number;
  median: number;
  p95: number;
  p99: number;
  max: number;
}

const ZONE_NORMAL = "#3b82f6";
const ZONE_WARN = "#f59e0b";
const ZONE_CRIT = "#ef4444";

function quantileSorted(sorted: number[], p: number): number {
  if (sorted.length === 0) return 0;
  const rank = Math.ceil((p / 100) * sorted.length);
  const idx = Math.min(Math.max(rank - 1, 0), sorted.length - 1);
  return sorted[idx];
}

function computeBins(samples: number[], bucketCount: number): HistogramBin[] {
  if (samples.length === 0) return [];
  let min = Number.POSITIVE_INFINITY;
  let max = Number.NEGATIVE_INFINITY;
  for (const s of samples) {
    if (s < min) min = s;
    if (s > max) max = s;
  }
  if (min === max) max = min + 1;
  const n = Math.max(1, bucketCount);
  const width = (max - min) / n;
  const bins: HistogramBin[] = [];
  for (let i = 0; i < n; i++) {
    bins.push({ count: 0, from: min + i * width, to: min + (i + 1) * width });
  }
  for (const s of samples) {
    let idx = Math.floor((s - min) / width);
    if (idx >= n) idx = n - 1;
    if (idx < 0) idx = 0;
    bins[idx].count++;
  }
  return bins;
}

function computePercentiles(samples: number[]): Percentile[] {
  const sorted = [...samples].sort((a, b) => a - b);
  return [
    { label: "p50", value: quantileSorted(sorted, 50) },
    { label: "p95", value: quantileSorted(sorted, 95) },
    { label: "p99", value: quantileSorted(sorted, 99) },
  ];
}

function summaryFromSamples(samples: number[]): Stats {
  const sorted = [...samples].sort((a, b) => a - b);
  return {
    max: sorted[sorted.length - 1],
    median: quantileSorted(sorted, 50),
    min: sorted[0],
    p95: quantileSorted(sorted, 95),
    p99: quantileSorted(sorted, 99),
  };
}

function quantileFromBins(bins: HistogramBin[], p: number): number {
  const total = bins.reduce((s, b) => s + b.count, 0);
  if (total === 0) return 0;
  const target = (p / 100) * total;
  let cum = 0;
  for (const b of bins) {
    cum += b.count;
    if (cum >= target) return (b.from + b.to) / 2;
  }
  const last = bins[bins.length - 1];
  return last ? (last.from + last.to) / 2 : 0;
}

function summaryFromBins(bins: HistogramBin[]): Stats {
  return {
    max: bins.length ? bins[bins.length - 1].to : 0,
    median: quantileFromBins(bins, 50),
    min: bins.length ? bins[0].from : 0,
    p95: quantileFromBins(bins, 95),
    p99: quantileFromBins(bins, 99),
  };
}

function fmt(n: number, unit: string): string {
  const r = Math.abs(n) >= 100 ? Math.round(n) : Math.round(n * 10) / 10;
  return `${r}${unit}`;
}

function zoneColor(mid: number, p95: number | undefined, p99: number | undefined): string {
  if (p99 !== undefined && mid >= p99) return ZONE_CRIT;
  if (p95 !== undefined && mid >= p95) return ZONE_WARN;
  return ZONE_NORMAL;
}

function Stat({ label, value, accent }: { label: string; value: string; accent?: string }) {
  return (
    <span className="flex items-center gap-1">
      <span className="text-muted-foreground">{label}</span>
      <span className="font-medium tabular-nums" style={accent ? { color: accent } : undefined}>
        {value}
      </span>
    </span>
  );
}

export function LatencyHistogram({
  samples,
  bins,
  percentiles,
  bucketCount = 24,
  unit = "",
  height = 180,
  className,
}: LatencyHistogramProps) {
  const [hovered, setHovered] = useState<number | null>(null);

  const data = useMemo(() => {
    if (samples && samples.length > 0) {
      return {
        histBins: computeBins(samples, bucketCount),
        pcts: percentiles ?? computePercentiles(samples),
        stats: summaryFromSamples(samples),
      };
    }
    if (bins && bins.length > 0) {
      return { histBins: bins, pcts: percentiles ?? [], stats: summaryFromBins(bins) };
    }
    return null;
  }, [samples, bins, percentiles, bucketCount]);

  if (!data) {
    return (
      <div
        className={cn(
          "rounded-lg border border-border bg-card p-4 text-center text-muted-foreground text-xs italic",
          className,
        )}
      >
        No data
      </div>
    );
  }

  const { histBins, pcts, stats } = data;
  const min = histBins[0].from;
  const max = histBins[histBins.length - 1].to;
  const span = max - min || 1;
  const maxCount = histBins.reduce((m, b) => Math.max(m, b.count), 0);
  const total = histBins.reduce((s, b) => s + b.count, 0);
  const p95 = pcts.find((p) => p.label === "p95")?.value;
  const p99 = pcts.find((p) => p.label === "p99")?.value;

  return (
    <div className={cn("rounded-lg border border-border bg-card p-3", className)}>
      <div className="mb-3 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs">
        <Stat label="min" value={fmt(stats.min, unit)} />
        <Stat label="median" value={fmt(stats.median, unit)} />
        <Stat accent={ZONE_WARN} label="p95" value={fmt(stats.p95, unit)} />
        <Stat accent={ZONE_CRIT} label="p99" value={fmt(stats.p99, unit)} />
        <Stat label="max" value={fmt(stats.max, unit)} />
      </div>

      <div className="relative" style={{ height }}>
        {pcts.map((p) => {
          const x = ((p.value - min) / span) * 100;
          if (x < 0 || x > 100) return null;
          return (
            <div
              className="pointer-events-none absolute top-0 bottom-0 z-10"
              key={p.label}
              style={{ left: `${x}%` }}
            >
              <div className="h-full border-foreground/40 border-l border-dashed" />
              <span className="absolute top-0 left-0 -translate-x-1/2 whitespace-nowrap rounded bg-background/80 px-1 text-[9px] text-muted-foreground">
                {p.label} {fmt(p.value, unit)}
              </span>
            </div>
          );
        })}

        <div className="flex h-full items-end gap-px">
          {histBins.map((b, i) => {
            const h = maxCount > 0 ? (b.count / maxCount) * 100 : 0;
            const mid = (b.from + b.to) / 2;
            return (
              <motion.div
                animate={{ height: `${h}%` }}
                className={cn(
                  "flex-1 rounded-t-sm transition-opacity",
                  hovered !== null && hovered !== i && "opacity-50",
                )}
                initial={{ height: 0 }}
                key={`${b.from}-${b.to}`}
                onMouseEnter={() => setHovered(i)}
                onMouseLeave={() => setHovered((x) => (x === i ? null : x))}
                style={{ background: zoneColor(mid, p95, p99) }}
                transition={{ delay: i * 0.01, duration: 0.4 }}
              />
            );
          })}
        </div>
      </div>

      <div className="mt-1 flex justify-between text-[10px] text-muted-foreground tabular-nums">
        <span>{fmt(min, unit)}</span>
        <span>{fmt((min + max) / 2, unit)}</span>
        <span>{fmt(max, unit)}</span>
      </div>

      <div className="mt-1 text-[11px] text-muted-foreground">
        {hovered !== null && histBins[hovered] ? (
          <span className="tabular-nums">
            {fmt(histBins[hovered].from, unit)}–{fmt(histBins[hovered].to, unit)} ·{" "}
            {histBins[hovered].count} (
            {total > 0 ? ((histBins[hovered].count / total) * 100).toFixed(1) : "0"}%)
          </span>
        ) : (
          <span>Hover a bar · {total} samples</span>
        )}
      </div>
    </div>
  );
}

export default LatencyHistogram;
```

## Status Grid

A statuspage-style service health grid: category-grouped rows with current status, uptime, a per-service metric and a 90-day uptime strip, plus an overall status banner and legend.

- Page: https://rocket.gozturk.dev/status-grid
- Install: `npx shadcn@latest add https://rocket.gozturk.dev/r/status-grid.json`
- Source: `components/ui/status-grid.tsx`

```tsx
"use client";

import { ChevronRight } from "lucide-react";
import { AnimatePresence, motion } from "motion/react";
import { useMemo, useState } from "react";
import { cn } from "@/lib/utils";

export type ServiceStatus = "operational" | "degraded" | "down" | "maintenance";

export interface DayStatus {
  date: string | number | Date;
  status: ServiceStatus;
  note?: string;
}

export interface Service {
  id: string;
  name: string;
  status: ServiceStatus;
  uptime?: number;
  metric?: string;
  category?: string;
  history?: DayStatus[];
}

export interface StatusGridProps {
  services: Service[];
  defaultCollapsed?: string[];
  historyDays?: number;
  className?: string;
}

const STATUS_ORDER: Record<ServiceStatus, number> = {
  degraded: 2,
  down: 3,
  maintenance: 1,
  operational: 0,
};

const STATUS_META: Record<ServiceStatus, { label: string; color: string }> = {
  degraded: { color: "#f59e0b", label: "Degraded" },
  down: { color: "#ef4444", label: "Down" },
  maintenance: { color: "#3b82f6", label: "Maintenance" },
  operational: { color: "#10b981", label: "Operational" },
};

const BANNER: Record<ServiceStatus, string> = {
  degraded: "Degraded performance",
  down: "Major outage",
  maintenance: "Under maintenance",
  operational: "All systems operational",
};

const ALL_STATUSES: ServiceStatus[] = ["operational", "degraded", "down", "maintenance"];

function worstStatus(statuses: ServiceStatus[]): ServiceStatus {
  let worst: ServiceStatus = "operational";
  for (const s of statuses) {
    if (STATUS_ORDER[s] > STATUS_ORDER[worst]) worst = s;
  }
  return worst;
}

function groupByCategory(services: Service[]): { category: string; services: Service[] }[] {
  const order: string[] = [];
  const map = new Map<string, Service[]>();
  for (const svc of services) {
    const cat = svc.category ?? "Other";
    if (!map.has(cat)) {
      map.set(cat, []);
      order.push(cat);
    }
    map.get(cat)?.push(svc);
  }
  return order.map((category) => ({ category, services: map.get(category) ?? [] }));
}

function padHistory(history: DayStatus[], days: number): (DayStatus | null)[] {
  const trimmed = history.length > days ? history.slice(history.length - days) : history;
  const pad = Math.max(0, days - trimmed.length);
  return [...Array.from({ length: pad }, () => null), ...trimmed];
}

function shortDate(date: string | number | Date): string {
  const d = date instanceof Date ? date : new Date(date);
  if (Number.isNaN(d.getTime())) return String(date);
  return new Intl.DateTimeFormat("en-US", {
    day: "numeric",
    month: "short",
    timeZone: "UTC",
  }).format(d);
}

function ServiceRow({
  service,
  historyDays,
  hovered,
  onHover,
}: {
  service: Service;
  historyDays: number;
  hovered: { serviceId: string; dayIndex: number } | null;
  onHover: (next: { serviceId: string; dayIndex: number } | null) => void;
}) {
  const meta = STATUS_META[service.status];
  const days = padHistory(service.history ?? [], historyDays);
  return (
    <div className="flex items-center gap-3 py-2 pr-3 pl-9">
      <span className="size-2 shrink-0 rounded-full" style={{ background: meta.color }} />
      <span className="truncate font-medium font-sans">{service.name}</span>
      {service.metric ? (
        <span className="shrink-0 rounded bg-muted px-1.5 py-0.5 font-sans text-[10px] text-muted-foreground tabular-nums">
          {service.metric}
        </span>
      ) : null}
      <div className="ml-auto flex items-center gap-3">
        {service.uptime !== undefined ? (
          <span className="shrink-0 font-sans text-[11px] text-muted-foreground tabular-nums">
            {service.uptime}%
          </span>
        ) : null}
        <div className="flex h-6 w-36 items-stretch gap-px sm:w-56">
          {days.map((day, i) => {
            const active = hovered?.serviceId === service.id && hovered.dayIndex === i;
            return (
              <button
                aria-label={
                  day ? `${shortDate(day.date)}: ${STATUS_META[day.status].label}` : "No data"
                }
                className={cn(
                  "flex-1 rounded-[1px] transition-opacity",
                  active ? "opacity-100" : "opacity-90",
                )}
                key={`${service.id}-${i}`}
                onMouseEnter={() => onHover({ dayIndex: i, serviceId: service.id })}
                onMouseLeave={() =>
                  onHover(
                    hovered?.serviceId === service.id && hovered.dayIndex === i ? null : hovered,
                  )
                }
                style={{
                  background: day ? STATUS_META[day.status].color : "var(--muted-foreground)",
                  opacity: day ? undefined : 0.2,
                }}
                type="button"
              />
            );
          })}
        </div>
      </div>
    </div>
  );
}

export function StatusGrid({
  services,
  defaultCollapsed = [],
  historyDays = 90,
  className,
}: StatusGridProps) {
  const [collapsed, setCollapsed] = useState<Set<string>>(() => new Set(defaultCollapsed));
  const [hovered, setHovered] = useState<{ serviceId: string; dayIndex: number } | null>(null);

  const groups = useMemo(() => groupByCategory(services), [services]);
  const overall = useMemo(() => worstStatus(services.map((s) => s.status)), [services]);
  const hoverInfo = useMemo(() => {
    if (!hovered) return null;
    const svc = services.find((s) => s.id === hovered.serviceId);
    if (!svc) return null;
    const day = padHistory(svc.history ?? [], historyDays)[hovered.dayIndex];
    return { day, name: svc.name };
  }, [hovered, services, historyDays]);

  if (services.length === 0) {
    return (
      <div
        className={cn(
          "rounded-lg border border-border bg-card p-4 text-center text-muted-foreground text-xs italic",
          className,
        )}
      >
        No services
      </div>
    );
  }

  const toggle = (cat: string) =>
    setCollapsed((prev) => {
      const next = new Set(prev);
      if (next.has(cat)) next.delete(cat);
      else next.add(cat);
      return next;
    });

  return (
    <div
      className={cn("overflow-hidden rounded-lg border border-border bg-card text-xs", className)}
    >
      <div
        className="flex flex-wrap items-center justify-between gap-3 border-border border-b px-3 py-2.5"
        style={{ background: `${STATUS_META[overall].color}14` }}
      >
        <div className="flex items-center gap-2">
          <span
            className="size-2.5 rounded-full"
            style={{ background: STATUS_META[overall].color }}
          />
          <span
            className="font-medium font-sans text-sm"
            style={{ color: STATUS_META[overall].color }}
          >
            {BANNER[overall]}
          </span>
        </div>
        <div className="flex flex-wrap items-center gap-2.5 font-sans text-[10px] text-muted-foreground">
          {ALL_STATUSES.map((s) => (
            <span className="flex items-center gap-1" key={s}>
              <span
                className="size-1.5 rounded-full"
                style={{ background: STATUS_META[s].color }}
              />
              {STATUS_META[s].label}
            </span>
          ))}
        </div>
      </div>

      <div className="divide-y divide-border">
        {groups.map((group) => {
          const isCollapsed = collapsed.has(group.category);
          const opCount = group.services.filter((s) => s.status === "operational").length;
          return (
            <div key={group.category}>
              <button
                className="flex w-full items-center gap-2 px-3 py-2 text-left hover:bg-muted/40"
                onClick={() => toggle(group.category)}
                type="button"
              >
                <ChevronRight
                  className={cn(
                    "size-3.5 text-muted-foreground transition-transform",
                    !isCollapsed && "rotate-90",
                  )}
                />
                <span className="font-medium font-sans text-sm">{group.category}</span>
                <span className="ml-auto font-sans text-[11px] text-muted-foreground tabular-nums">
                  {opCount}/{group.services.length} operational
                </span>
              </button>
              <AnimatePresence initial={false}>
                {isCollapsed ? null : (
                  <motion.div
                    animate={{ height: "auto", opacity: 1 }}
                    className="overflow-hidden"
                    exit={{ height: 0, opacity: 0 }}
                    initial={{ height: 0, opacity: 0 }}
                    transition={{ duration: 0.18 }}
                  >
                    {group.services.map((svc) => (
                      <ServiceRow
                        historyDays={historyDays}
                        hovered={hovered}
                        key={svc.id}
                        onHover={setHovered}
                        service={svc}
                      />
                    ))}
                  </motion.div>
                )}
              </AnimatePresence>
            </div>
          );
        })}
      </div>

      <div className="border-border border-t px-3 py-2 font-sans text-[11px] text-muted-foreground">
        {hoverInfo ? (
          hoverInfo.day ? (
            <span>
              <span className="font-medium text-foreground">{hoverInfo.name}</span> ·{" "}
              {shortDate(hoverInfo.day.date)} ·{" "}
              <span style={{ color: STATUS_META[hoverInfo.day.status].color }}>
                {STATUS_META[hoverInfo.day.status].label}
              </span>
              {hoverInfo.day.note ? ` · ${hoverInfo.day.note}` : ""}
            </span>
          ) : (
            <span>
              <span className="font-medium text-foreground">{hoverInfo.name}</span> · No data
            </span>
          )
        ) : (
          <span>Hover a day in a timeline for detail</span>
        )}
      </div>
    </div>
  );
}

export default StatusGrid;
```

## Cohort Heatmap

A cohort retention heatmap: cohort rows by period columns with intensity-colored cells, in-cell percentages, a column-average row, a color legend and hover detail. Accepts retained counts (+size) or raw percentages.

- Page: https://rocket.gozturk.dev/cohort-heatmap
- Install: `npx shadcn@latest add https://rocket.gozturk.dev/r/cohort-heatmap.json`
- Source: `components/ui/cohort-heatmap.tsx`

```tsx
"use client";

import { motion } from "motion/react";
import { Fragment, useMemo, useState } from "react";
import { cn } from "@/lib/utils";

export interface Cohort {
  label: string;
  size?: number;
  values: number[];
}

export interface CohortHeatmapProps {
  cohorts: Cohort[];
  periodLabels?: string[];
  className?: string;
}

function clamp(n: number, lo: number, hi: number): number {
  return Math.min(Math.max(n, lo), hi);
}

function cellPercent(value: number, size?: number): number {
  if (size !== undefined) return size === 0 ? 0 : clamp((value / size) * 100, 0, 100);
  return clamp(value, 0, 100);
}

function periodCount(cohorts: Cohort[]): number {
  return cohorts.reduce((m, c) => Math.max(m, c.values.length), 0);
}

function columnAverages(cohorts: Cohort[], periods: number): (number | null)[] {
  const out: (number | null)[] = [];
  for (let p = 0; p < periods; p++) {
    let sum = 0;
    let n = 0;
    for (const c of cohorts) {
      if (p < c.values.length) {
        sum += cellPercent(c.values[p], c.size);
        n++;
      }
    }
    out.push(n > 0 ? sum / n : null);
  }
  return out;
}

function intensityColor(percent: number): string {
  const a = 0.08 + 0.82 * (percent / 100);
  return `rgba(16, 185, 129, ${a.toFixed(3)})`;
}

function textColor(percent: number): string {
  return percent >= 50 ? "#ffffff" : "var(--foreground)";
}

export function CohortHeatmap({ cohorts, periodLabels, className }: CohortHeatmapProps) {
  const [hovered, setHovered] = useState<{ cohortIndex: number; period: number } | null>(null);

  const periods = useMemo(() => periodCount(cohorts), [cohorts]);
  const averages = useMemo(() => columnAverages(cohorts, periods), [cohorts, periods]);

  if (cohorts.length === 0 || periods === 0) {
    return (
      <div
        className={cn(
          "rounded-lg border border-border bg-card p-4 text-center text-muted-foreground text-xs italic",
          className,
        )}
      >
        No cohorts
      </div>
    );
  }

  const labelFor = (p: number) => periodLabels?.[p] ?? String(p);

  let hoverInfo: {
    cohort: string;
    period: string;
    percent: number;
    count?: number;
    size?: number;
  } | null = null;
  if (hovered) {
    const c = cohorts[hovered.cohortIndex];
    if (c && hovered.period < c.values.length) {
      const value = c.values[hovered.period];
      hoverInfo = {
        cohort: c.label,
        count: c.size !== undefined ? value : undefined,
        percent: Math.round(cellPercent(value, c.size)),
        period: labelFor(hovered.period),
        size: c.size,
      };
    }
  }

  return (
    <div className={cn("rounded-lg border border-border bg-card p-3 text-xs", className)}>
      <div className="mb-3 flex items-center gap-2 font-sans text-[10px] text-muted-foreground">
        <span>0%</span>
        <div
          className="h-2 w-32 rounded"
          style={{
            background: "linear-gradient(to right, rgba(16,185,129,0.08), rgba(16,185,129,0.9))",
          }}
        />
        <span>100%</span>
        <span className="ml-1">retention</span>
      </div>

      <div className="overflow-x-auto">
        <div
          className="grid gap-0.5"
          style={{
            gridTemplateColumns: `minmax(80px, max-content) repeat(${periods}, minmax(26px, 1fr))`,
          }}
        >
          <div className="px-1 py-1 font-sans text-[10px] text-muted-foreground">Cohort</div>
          {Array.from({ length: periods }, (_, p) => (
            <div
              className="px-0.5 py-1 text-center font-sans text-[10px] text-muted-foreground tabular-nums"
              key={`head-${labelFor(p)}-${p}`}
            >
              {labelFor(p)}
            </div>
          ))}

          {cohorts.map((c, ci) => (
            <Fragment key={`${c.label}-${ci}`}>
              <div className="flex items-center gap-1.5 px-1 py-0.5 font-sans">
                <span className="truncate font-medium">{c.label}</span>
                {c.size !== undefined ? (
                  <span className="shrink-0 rounded bg-muted px-1 text-[9px] text-muted-foreground tabular-nums">
                    {c.size}
                  </span>
                ) : null}
              </div>
              {Array.from({ length: periods }, (_, p) => {
                if (p >= c.values.length) return <div key={`${ci}-${p}`} />;
                const pct = cellPercent(c.values[p], c.size);
                const active = hovered?.cohortIndex === ci && hovered.period === p;
                return (
                  <motion.button
                    animate={{ opacity: 1 }}
                    className={cn(
                      "flex aspect-square min-h-6 items-center justify-center rounded-[2px] font-medium text-[10px] tabular-nums transition-shadow",
                      active && "ring-2 ring-foreground/40",
                    )}
                    initial={{ opacity: 0 }}
                    key={`${ci}-${p}`}
                    onMouseEnter={() => setHovered({ cohortIndex: ci, period: p })}
                    onMouseLeave={() =>
                      setHovered((h) => (h?.cohortIndex === ci && h.period === p ? null : h))
                    }
                    style={{ background: intensityColor(pct), color: textColor(pct) }}
                    transition={{ delay: (ci + p) * 0.008, duration: 0.2 }}
                    type="button"
                  >
                    {Math.round(pct)}
                  </motion.button>
                );
              })}
            </Fragment>
          ))}

          <div className="px-1 py-0.5 font-medium font-sans text-muted-foreground">Avg</div>
          {averages.map((avg, p) =>
            avg === null ? (
              <div key={`avg-${p}`} />
            ) : (
              <div
                className="flex aspect-square min-h-6 items-center justify-center rounded-[2px] font-medium text-[10px] tabular-nums"
                key={`avg-${p}`}
                style={{ background: intensityColor(avg), color: textColor(avg) }}
              >
                {Math.round(avg)}
              </div>
            ),
          )}
        </div>
      </div>

      <div className="mt-2 font-sans text-[11px] text-muted-foreground">
        {hoverInfo ? (
          <span>
            <span className="font-medium text-foreground">{hoverInfo.cohort}</span> ·{" "}
            {hoverInfo.period} ·{" "}
            {hoverInfo.count !== undefined ? `${hoverInfo.count}/${hoverInfo.size} · ` : ""}
            {hoverInfo.percent}%
          </span>
        ) : (
          <span>Hover a cell for detail</span>
        )}
      </div>
    </div>
  );
}

export default CohortHeatmap;
```

## Audit Trail

A field-level audit trail / changelog: who created/updated/deleted what, when, with old→new field diffs, action badges, date grouping, relative time, actor avatars and actor/action filters.

- Page: https://rocket.gozturk.dev/audit-trail
- Install: `npx shadcn@latest add https://rocket.gozturk.dev/r/audit-trail.json`
- Source: `components/ui/audit-trail.tsx`

```tsx
"use client";

import { ChevronRight, type LucideIcon, Pencil, Plus, Trash2 } from "lucide-react";
import { AnimatePresence, motion } from "motion/react";
import { useEffect, useMemo, useState } from "react";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { cn } from "@/lib/utils";

export type AuditAction = "created" | "updated" | "deleted";

export interface FieldChange {
  field: string;
  before?: unknown;
  after?: unknown;
}

export interface AuditActor {
  name: string;
  avatarUrl?: string;
}

export interface AuditEntry {
  id: string;
  actor: AuditActor;
  action: AuditAction;
  target: string;
  time: string | number | Date;
  changes?: FieldChange[];
}

export interface AuditTrailProps {
  entries: AuditEntry[];
  defaultExpanded?: boolean;
  groupByDate?: boolean;
  filterable?: boolean;
  className?: string;
}

const ACTION_META: Record<AuditAction, { color: string; verb: string; Icon: LucideIcon }> = {
  created: { color: "#10b981", Icon: Plus, verb: "created" },
  deleted: { color: "#ef4444", Icon: Trash2, verb: "deleted" },
  updated: { color: "#3b82f6", Icon: Pencil, verb: "updated" },
};

const ACTIONS: AuditAction[] = ["created", "updated", "deleted"];

function useMounted() {
  const [m, setM] = useState(false);
  useEffect(() => setM(true), []);
  return m;
}

function toDate(value: string | number | Date): Date | null {
  const d = value instanceof Date ? value : new Date(value);
  return Number.isNaN(d.getTime()) ? null : d;
}

function pad(n: number): string {
  return n < 10 ? `0${n}` : String(n);
}

function dayKey(d: Date): string {
  return `${d.getUTCFullYear()}-${pad(d.getUTCMonth() + 1)}-${pad(d.getUTCDate())}`;
}

function dayLabelFromKey(key: string): string {
  const [y, m, dd] = key.split("-").map(Number);
  const d = new Date(Date.UTC(y, m - 1, dd));
  return new Intl.DateTimeFormat("en-US", {
    day: "numeric",
    month: "short",
    timeZone: "UTC",
  }).format(d);
}

function shortDate(d: Date): string {
  return new Intl.DateTimeFormat("en-US", {
    day: "numeric",
    month: "short",
    timeZone: "UTC",
  }).format(d);
}

function timeAgo(value: string | number | Date, mounted: boolean): string {
  const d = toDate(value);
  if (!d) return "";
  if (!mounted) return shortDate(d);
  const secs = Math.max(0, Math.floor((Date.now() - d.getTime()) / 1000));
  if (secs < 60) return "just now";
  const mins = Math.floor(secs / 60);
  if (mins < 60) return `${mins}m ago`;
  const hours = Math.floor(mins / 60);
  if (hours < 24) return `${hours}h ago`;
  const days = Math.floor(hours / 24);
  if (days < 7) return `${days}d ago`;
  return shortDate(d);
}

function initials(name: string): string {
  return name
    .split(/\s+/)
    .filter(Boolean)
    .slice(0, 2)
    .map((w) => w[0]?.toUpperCase() ?? "")
    .join("");
}

function formatValue(v: unknown): string {
  if (v === null) return "null";
  if (v === undefined) return "—";
  if (typeof v === "string") return JSON.stringify(v);
  if (Array.isArray(v)) return "[…]";
  if (typeof v === "object") return "{…}";
  return String(v);
}

function sortByTimeDesc(entries: AuditEntry[]): AuditEntry[] {
  return [...entries].sort((a, b) => {
    const da = toDate(a.time)?.getTime() ?? 0;
    const db = toDate(b.time)?.getTime() ?? 0;
    return db - da;
  });
}

function groupByDay(entries: AuditEntry[]): { key: string; entries: AuditEntry[] }[] {
  const order: string[] = [];
  const map = new Map<string, AuditEntry[]>();
  for (const e of entries) {
    const d = toDate(e.time);
    const key = d ? dayKey(d) : "unknown";
    if (!map.has(key)) {
      map.set(key, []);
      order.push(key);
    }
    map.get(key)?.push(e);
  }
  return order.map((key) => ({ entries: map.get(key) ?? [], key }));
}

function FieldDiff({ change, action }: { change: FieldChange; action: AuditAction }) {
  return (
    <div className="flex flex-wrap items-center gap-1.5 leading-5">
      <span className="font-medium text-foreground">{change.field}</span>
      <span className="text-muted-foreground">:</span>
      {action !== "created" ? (
        <span className="text-red-600 line-through dark:text-red-400">
          {formatValue(change.before)}
        </span>
      ) : null}
      {action === "updated" ? <span className="text-muted-foreground">→</span> : null}
      {action !== "deleted" ? (
        <span className="text-emerald-600 dark:text-emerald-400">{formatValue(change.after)}</span>
      ) : null}
    </div>
  );
}

function AuditEntryRow({
  entry,
  mounted,
  expanded,
  onToggle,
}: {
  entry: AuditEntry;
  mounted: boolean;
  expanded: boolean;
  onToggle: () => void;
}) {
  const meta = ACTION_META[entry.action];
  const changeCount = entry.changes?.length ?? 0;
  return (
    <div className="flex gap-2.5 px-3 py-2.5">
      <Avatar className="size-7 shrink-0">
        {entry.actor.avatarUrl ? (
          <AvatarImage alt={entry.actor.name} src={entry.actor.avatarUrl} />
        ) : null}
        <AvatarFallback className="text-[10px]">{initials(entry.actor.name)}</AvatarFallback>
      </Avatar>
      <div className="min-w-0 flex-1">
        <div className="flex items-start gap-2">
          <div className="min-w-0 flex-1 leading-5">
            <meta.Icon
              className="mr-1 inline size-3.5 align-[-2px]"
              style={{ color: meta.color }}
            />
            <span className="font-medium text-foreground">{entry.actor.name}</span>{" "}
            <span className="text-muted-foreground">{meta.verb}</span>{" "}
            <span className="font-medium text-foreground">{entry.target}</span>
          </div>
          <span className="shrink-0 text-[11px] text-muted-foreground tabular-nums">
            {timeAgo(entry.time, mounted)}
          </span>
        </div>
        {changeCount > 0 ? (
          <>
            <button
              className="mt-1 flex items-center gap-1 text-[11px] text-muted-foreground transition-colors hover:text-foreground"
              onClick={onToggle}
              type="button"
            >
              <ChevronRight
                className={cn("size-3 transition-transform", expanded && "rotate-90")}
              />
              {changeCount} field{changeCount === 1 ? "" : "s"}
            </button>
            <AnimatePresence initial={false}>
              {expanded ? (
                <motion.div
                  animate={{ height: "auto", opacity: 1 }}
                  className="overflow-hidden"
                  exit={{ height: 0, opacity: 0 }}
                  initial={{ height: 0, opacity: 0 }}
                  transition={{ duration: 0.15 }}
                >
                  <div className="mt-1.5 space-y-1 rounded-md border border-border bg-muted/40 px-2.5 py-2 font-mono text-[11px]">
                    {entry.changes?.map((c) => (
                      <FieldDiff action={entry.action} change={c} key={c.field} />
                    ))}
                  </div>
                </motion.div>
              ) : null}
            </AnimatePresence>
          </>
        ) : null}
      </div>
    </div>
  );
}

export function AuditTrail({
  entries,
  defaultExpanded = false,
  groupByDate = true,
  filterable = true,
  className,
}: AuditTrailProps) {
  const mounted = useMounted();
  const [toggled, setToggled] = useState<Set<string>>(() => new Set());
  const [actorFilter, setActorFilter] = useState<Set<string>>(() => new Set());
  const [actionFilter, setActionFilter] = useState<Set<AuditAction>>(() => new Set());

  const actors = useMemo(() => {
    const seen = new Map<string, AuditActor>();
    for (const e of entries) if (!seen.has(e.actor.name)) seen.set(e.actor.name, e.actor);
    return [...seen.values()];
  }, [entries]);

  const filtered = useMemo(() => {
    const sorted = sortByTimeDesc(entries);
    return sorted.filter(
      (e) =>
        (actorFilter.size === 0 || actorFilter.has(e.actor.name)) &&
        (actionFilter.size === 0 || actionFilter.has(e.action)),
    );
  }, [entries, actorFilter, actionFilter]);

  const groups = useMemo(
    () => (groupByDate ? groupByDay(filtered) : [{ entries: filtered, key: "all" }]),
    [filtered, groupByDate],
  );

  const isExpanded = (id: string) => (toggled.has(id) ? !defaultExpanded : defaultExpanded);
  const toggle = (id: string) =>
    setToggled((prev) => {
      const next = new Set(prev);
      if (next.has(id)) next.delete(id);
      else next.add(id);
      return next;
    });

  const toggleSet = <T,>(setter: (fn: (prev: Set<T>) => Set<T>) => void, value: T) =>
    setter((prev) => {
      const next = new Set(prev);
      if (next.has(value)) next.delete(value);
      else next.add(value);
      return next;
    });

  const now = mounted ? Date.now() : 0;
  const todayKey = mounted ? dayKey(new Date(now)) : "";
  const yesterdayKey = mounted ? dayKey(new Date(now - 86_400_000)) : "";
  const labelFor = (key: string) => {
    if (key === "all" || key === "unknown") return null;
    if (mounted && key === todayKey) return "Today";
    if (mounted && key === yesterdayKey) return "Yesterday";
    return dayLabelFromKey(key);
  };

  return (
    <div className={cn("rounded-lg border border-border bg-card text-xs", className)}>
      {filterable ? (
        <div className="flex flex-wrap items-center gap-1.5 border-border border-b px-3 py-2">
          {actors.map((a) => {
            const on = actorFilter.has(a.name);
            return (
              <button
                className={cn(
                  "flex items-center gap-1 rounded-full border px-1.5 py-0.5 text-[11px] transition-colors",
                  on
                    ? "border-foreground/30 bg-muted text-foreground"
                    : "border-border text-muted-foreground hover:text-foreground",
                )}
                key={a.name}
                onClick={() => toggleSet(setActorFilter, a.name)}
                type="button"
              >
                <Avatar className="size-4">
                  {a.avatarUrl ? <AvatarImage alt={a.name} src={a.avatarUrl} /> : null}
                  <AvatarFallback className="text-[8px]">{initials(a.name)}</AvatarFallback>
                </Avatar>
                {a.name}
              </button>
            );
          })}
          <span className="mx-0.5 h-3 w-px bg-border" />
          {ACTIONS.map((act) => {
            const on = actionFilter.has(act);
            return (
              <button
                className={cn(
                  "rounded-full border px-1.5 py-0.5 text-[11px] capitalize transition-colors",
                  on
                    ? "border-current"
                    : "border-border text-muted-foreground hover:text-foreground",
                )}
                key={act}
                onClick={() => toggleSet(setActionFilter, act)}
                style={on ? { color: ACTION_META[act].color } : undefined}
                type="button"
              >
                {act}
              </button>
            );
          })}
        </div>
      ) : null}

      {filtered.length === 0 ? (
        <p className="px-3 py-6 text-center text-muted-foreground text-xs italic">No activity</p>
      ) : (
        groups.map((group) => (
          <div key={group.key}>
            {labelFor(group.key) ? (
              <div className="sticky top-0 border-border border-b bg-card/95 px-3 py-1.5 font-medium text-[11px] text-muted-foreground uppercase tracking-wide backdrop-blur">
                {labelFor(group.key)}
              </div>
            ) : null}
            <div className="divide-y divide-border/60">
              {group.entries.map((entry) => (
                <AuditEntryRow
                  entry={entry}
                  expanded={isExpanded(entry.id)}
                  key={entry.id}
                  mounted={mounted}
                  onToggle={() => toggle(entry.id)}
                />
              ))}
            </div>
          </div>
        ))
      )}
    </div>
  );
}

export default AuditTrail;
```

## Alert Feed

An interactive alert/incident feed: severity-grouped rows with acknowledge/resolve actions, a firing-count summary banner, severity/status filters, relative duration and a collapsible resolved section.

- Page: https://rocket.gozturk.dev/alert-feed
- Install: `npx shadcn@latest add https://rocket.gozturk.dev/r/alert-feed.json`
- Source: `components/ui/alert-feed.tsx`

```tsx
"use client";

import {
  Check,
  ChevronRight,
  Info,
  type LucideIcon,
  OctagonAlert,
  TriangleAlert,
} from "lucide-react";
import { AnimatePresence, motion } from "motion/react";
import { useEffect, useMemo, useState } from "react";
import { cn } from "@/lib/utils";

export type Severity = "critical" | "warning" | "info";
export type AlertStatus = "firing" | "acknowledged" | "resolved";

export interface Alert {
  id: string;
  severity: Severity;
  status: AlertStatus;
  title: string;
  source?: string;
  description?: string;
  startedAt: string | number | Date;
}

export interface AlertFeedProps {
  alerts: Alert[];
  defaultHideResolved?: boolean;
  filterable?: boolean;
  onAcknowledge?: (id: string) => void;
  onResolve?: (id: string) => void;
  className?: string;
}

const SEVERITY_META: Record<
  Severity,
  { color: string; label: string; Icon: LucideIcon; rank: number }
> = {
  critical: { color: "#ef4444", Icon: OctagonAlert, label: "Critical", rank: 2 },
  info: { color: "#3b82f6", Icon: Info, label: "Info", rank: 0 },
  warning: { color: "#f59e0b", Icon: TriangleAlert, label: "Warning", rank: 1 },
};

const STATUS_META: Record<AlertStatus, { color: string; label: string }> = {
  acknowledged: { color: "#3b82f6", label: "Acknowledged" },
  firing: { color: "#ef4444", label: "Firing" },
  resolved: { color: "#10b981", label: "Resolved" },
};

const SEVERITIES: Severity[] = ["critical", "warning", "info"];
const STATUSES: AlertStatus[] = ["firing", "acknowledged", "resolved"];

function statusActive(st: AlertStatus): boolean {
  return st !== "resolved";
}

function useMounted() {
  const [m, setM] = useState(false);
  useEffect(() => setM(true), []);
  return m;
}

function toDate(value: string | number | Date): Date | null {
  const d = value instanceof Date ? value : new Date(value);
  return Number.isNaN(d.getTime()) ? null : d;
}

function shortDate(d: Date): string {
  return new Intl.DateTimeFormat("en-US", {
    day: "numeric",
    month: "short",
    timeZone: "UTC",
  }).format(d);
}

function timeAgo(value: string | number | Date, mounted: boolean): string {
  const d = toDate(value);
  if (!d) return "";
  if (!mounted) return shortDate(d);
  const secs = Math.max(0, Math.floor((Date.now() - d.getTime()) / 1000));
  if (secs < 60) return "just now";
  const mins = Math.floor(secs / 60);
  if (mins < 60) return `${mins}m ago`;
  const hours = Math.floor(mins / 60);
  if (hours < 24) return `${hours}h ago`;
  const days = Math.floor(hours / 24);
  if (days < 7) return `${days}d ago`;
  return shortDate(d);
}

function sortAlerts(alerts: Alert[], statusOf: (a: Alert) => AlertStatus): Alert[] {
  return [...alerts].sort((a, b) => {
    const aActive = statusActive(statusOf(a)) ? 0 : 1;
    const bActive = statusActive(statusOf(b)) ? 0 : 1;
    if (aActive !== bActive) return aActive - bActive;
    const sev = SEVERITY_META[b.severity].rank - SEVERITY_META[a.severity].rank;
    if (sev !== 0) return sev;
    return (toDate(b.startedAt)?.getTime() ?? 0) - (toDate(a.startedAt)?.getTime() ?? 0);
  });
}

function AlertRow({
  alert,
  status,
  mounted,
  actionable,
  onAck,
  onResolve,
}: {
  alert: Alert;
  status: AlertStatus;
  mounted: boolean;
  actionable: boolean;
  onAck?: () => void;
  onResolve?: () => void;
}) {
  const sev = SEVERITY_META[alert.severity];
  const stat = STATUS_META[status];
  return (
    <div className="flex items-stretch gap-2.5 px-3 py-2.5">
      <span className="w-0.5 shrink-0 rounded" style={{ background: sev.color }} />
      <sev.Icon className="mt-0.5 size-4 shrink-0" style={{ color: sev.color }} />
      <div className="min-w-0 flex-1">
        <div className="flex items-start gap-2">
          <div className="min-w-0 flex-1 leading-5">
            <span className="font-medium text-foreground">{alert.title}</span>
            {alert.source ? (
              <span className="ml-1.5 rounded bg-muted px-1 py-0.5 text-[10px] text-muted-foreground">
                {alert.source}
              </span>
            ) : null}
            {alert.description ? (
              <p className="mt-0.5 text-[11px] text-muted-foreground leading-4">
                {alert.description}
              </p>
            ) : null}
          </div>
          <div className="flex shrink-0 flex-col items-end gap-1">
            <span className="text-[11px] text-muted-foreground tabular-nums">
              {timeAgo(alert.startedAt, mounted)}
            </span>
            <span
              className="flex items-center gap-1 rounded-full px-1.5 py-0.5 font-medium text-[10px]"
              style={{ background: `${stat.color}1f`, color: stat.color }}
            >
              <span className="size-1.5 rounded-full" style={{ background: stat.color }} />
              {stat.label}
            </span>
          </div>
        </div>
        {actionable && status !== "resolved" ? (
          <div className="mt-1.5 flex gap-1.5">
            {status === "firing" ? (
              <button
                className="rounded border border-border px-1.5 py-0.5 text-[11px] text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
                onClick={onAck}
                type="button"
              >
                Ack
              </button>
            ) : null}
            <button
              className="rounded border border-border px-1.5 py-0.5 text-[11px] text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
              onClick={onResolve}
              type="button"
            >
              Resolve
            </button>
          </div>
        ) : null}
      </div>
    </div>
  );
}

export function AlertFeed({
  alerts,
  defaultHideResolved = true,
  filterable = true,
  onAcknowledge,
  onResolve,
  className,
}: AlertFeedProps) {
  const mounted = useMounted();
  const [overrides, setOverrides] = useState<Map<string, AlertStatus>>(() => new Map());
  const [sevFilter, setSevFilter] = useState<Set<Severity>>(() => new Set());
  const [statusFilter, setStatusFilter] = useState<Set<AlertStatus>>(() => new Set());
  const [showResolved, setShowResolved] = useState(!defaultHideResolved);

  const statusOf = (a: Alert): AlertStatus => overrides.get(a.id) ?? a.status;

  const acknowledge = (id: string) => {
    setOverrides((m) => new Map(m).set(id, "acknowledged"));
    onAcknowledge?.(id);
  };
  const resolve = (id: string) => {
    setOverrides((m) => new Map(m).set(id, "resolved"));
    onResolve?.(id);
  };

  const toggleSev = (s: Severity) =>
    setSevFilter((prev) => {
      const next = new Set(prev);
      if (next.has(s)) next.delete(s);
      else next.add(s);
      return next;
    });
  const toggleStatus = (s: AlertStatus) =>
    setStatusFilter((prev) => {
      const next = new Set(prev);
      if (next.has(s)) next.delete(s);
      else next.add(s);
      return next;
    });

  const derived = useMemo(() => {
    const statusFn = (a: Alert) => overrides.get(a.id) ?? a.status;
    const sorted = sortAlerts(alerts, statusFn);
    const filtered = sorted.filter(
      (a) =>
        (sevFilter.size === 0 || sevFilter.has(a.severity)) &&
        (statusFilter.size === 0 || statusFilter.has(statusFn(a))),
    );
    const active = filtered.filter((a) => statusActive(statusFn(a)));
    const resolved = filtered.filter((a) => !statusActive(statusFn(a)));
    const counts: Record<Severity, number> = { critical: 0, info: 0, warning: 0 };
    let worst: Severity | null = null;
    for (const a of alerts) {
      if (statusFn(a) === "firing") {
        counts[a.severity]++;
        if (!worst || SEVERITY_META[a.severity].rank > SEVERITY_META[worst].rank)
          worst = a.severity;
      }
    }
    return { active, counts, resolved, worst };
  }, [alerts, overrides, sevFilter, statusFilter]);

  const { active, resolved, counts, worst } = derived;
  const bannerColor = worst ? SEVERITY_META[worst].color : "#10b981";
  const bannerText = worst
    ? `${SEVERITIES.filter((s) => counts[s] > 0)
        .map((s) => `${counts[s]} ${s}`)
        .join(" · ")} firing`
    : "All clear";

  return (
    <div
      className={cn("overflow-hidden rounded-lg border border-border bg-card text-xs", className)}
    >
      <div
        className="flex items-center gap-2 border-border border-b px-3 py-2.5 font-sans"
        style={{ background: `${bannerColor}14` }}
      >
        {worst ? (
          <span className="size-2.5 rounded-full" style={{ background: bannerColor }} />
        ) : (
          <Check className="size-4" style={{ color: bannerColor }} />
        )}
        <span className="font-medium text-sm" style={{ color: bannerColor }}>
          {bannerText}
        </span>
      </div>

      {filterable ? (
        <div className="flex flex-wrap items-center gap-1.5 border-border border-b px-3 py-2 font-sans">
          {SEVERITIES.map((s) => {
            const on = sevFilter.has(s);
            return (
              <button
                className={cn(
                  "rounded-full border px-1.5 py-0.5 text-[11px] capitalize transition-colors",
                  on
                    ? "border-current"
                    : "border-border text-muted-foreground hover:text-foreground",
                )}
                key={s}
                onClick={() => toggleSev(s)}
                style={on ? { color: SEVERITY_META[s].color } : undefined}
                type="button"
              >
                {s}
              </button>
            );
          })}
          <span className="mx-0.5 h-3 w-px bg-border" />
          {STATUSES.map((s) => {
            const on = statusFilter.has(s);
            return (
              <button
                className={cn(
                  "rounded-full border px-1.5 py-0.5 text-[11px] capitalize transition-colors",
                  on
                    ? "border-foreground/30 bg-muted text-foreground"
                    : "border-border text-muted-foreground hover:text-foreground",
                )}
                key={s}
                onClick={() => toggleStatus(s)}
                type="button"
              >
                {s}
              </button>
            );
          })}
        </div>
      ) : null}

      {active.length === 0 && resolved.length === 0 ? (
        <p className="px-3 py-6 text-center text-muted-foreground text-xs italic">No alerts</p>
      ) : (
        <>
          <div className="divide-y divide-border/60">
            <AnimatePresence initial={false}>
              {active.map((a) => (
                <motion.div
                  animate={{ opacity: 1 }}
                  exit={{ opacity: 0 }}
                  initial={{ opacity: 0 }}
                  key={a.id}
                  layout
                >
                  <AlertRow
                    actionable
                    alert={a}
                    mounted={mounted}
                    onAck={() => acknowledge(a.id)}
                    onResolve={() => resolve(a.id)}
                    status={statusOf(a)}
                  />
                </motion.div>
              ))}
            </AnimatePresence>
            {active.length === 0 ? (
              <p className="px-3 py-4 text-center text-muted-foreground text-xs italic">
                No active alerts
              </p>
            ) : null}
          </div>

          {resolved.length > 0 ? (
            <div className="border-border border-t">
              <button
                className="flex w-full items-center gap-1.5 px-3 py-2 text-left font-sans text-[11px] text-muted-foreground hover:bg-muted/40"
                onClick={() => setShowResolved((v) => !v)}
                type="button"
              >
                <ChevronRight
                  className={cn("size-3.5 transition-transform", showResolved && "rotate-90")}
                />
                {resolved.length} resolved
              </button>
              <AnimatePresence initial={false}>
                {showResolved ? (
                  <motion.div
                    animate={{ height: "auto", opacity: 1 }}
                    className="overflow-hidden"
                    exit={{ height: 0, opacity: 0 }}
                    initial={{ height: 0, opacity: 0 }}
                    transition={{ duration: 0.18 }}
                  >
                    <div className="divide-y divide-border/60 opacity-70">
                      {resolved.map((a) => (
                        <AlertRow
                          actionable={false}
                          alert={a}
                          key={a.id}
                          mounted={mounted}
                          status="resolved"
                        />
                      ))}
                    </div>
                  </motion.div>
                ) : null}
              </AnimatePresence>
            </div>
          ) : null}
        </>
      )}
    </div>
  );
}

export default AlertFeed;
```

## Data Freshness

A data-freshness / pipeline-status board: SLA-derived fresh/stale (with failed/running override), a status summary banner, a per-source SLA bar, next-run schedule, source-type icons and row counts.

- Page: https://rocket.gozturk.dev/data-freshness
- Install: `npx shadcn@latest add https://rocket.gozturk.dev/r/data-freshness.json`
- Source: `components/ui/data-freshness.tsx`

```tsx
"use client";

import { Activity, FileText, Globe, type LucideIcon, Table2 } from "lucide-react";
import { motion } from "motion/react";
import { useEffect, useMemo, useState } from "react";
import { cn } from "@/lib/utils";

export type SourceType = "table" | "stream" | "api" | "file";
export type SourceStatus = "fresh" | "stale" | "failed" | "running";

export interface DataSource {
  id: string;
  name: string;
  type?: SourceType;
  updatedAt: string | number | Date;
  sla: number;
  status?: "failed" | "running";
  nextRun?: string | number | Date;
  schedule?: string;
  rows?: number;
}

export interface DataFreshnessProps {
  sources: DataSource[];
  className?: string;
}

const STATUS_META: Record<SourceStatus, { color: string; label: string; rank: number }> = {
  failed: { color: "#ef4444", label: "Failed", rank: 3 },
  fresh: { color: "#10b981", label: "Fresh", rank: 0 },
  running: { color: "#3b82f6", label: "Running", rank: 1 },
  stale: { color: "#f59e0b", label: "Stale", rank: 2 },
};

const TYPE_META: Record<SourceType, { Icon: LucideIcon }> = {
  api: { Icon: Globe },
  file: { Icon: FileText },
  stream: { Icon: Activity },
  table: { Icon: Table2 },
};

const STATUS_ORDER: SourceStatus[] = ["fresh", "running", "stale", "failed"];

function useMounted() {
  const [m, setM] = useState(false);
  useEffect(() => setM(true), []);
  return m;
}

function clamp(n: number, lo: number, hi: number): number {
  return Math.min(Math.max(n, lo), hi);
}

function toDate(value: string | number | Date): Date | null {
  const d = value instanceof Date ? value : new Date(value);
  return Number.isNaN(d.getTime()) ? null : d;
}

function relParts(secs: number): string {
  const mins = Math.floor(secs / 60);
  if (mins < 60) return `${mins}m`;
  const hours = Math.floor(mins / 60);
  if (hours < 24) return `${hours}h`;
  return `${Math.floor(hours / 24)}d`;
}

function timeAgo(value: string | number | Date, mounted: boolean): string {
  const d = toDate(value);
  if (!d || !mounted) return "";
  const secs = Math.max(0, Math.floor((Date.now() - d.getTime()) / 1000));
  if (secs < 60) return "just now";
  return `${relParts(secs)} ago`;
}

function timeUntil(value: string | number | Date, mounted: boolean): string {
  const d = toDate(value);
  if (!d || !mounted) return "";
  const secs = Math.floor((d.getTime() - Date.now()) / 1000);
  if (secs <= 0) return "due now";
  return `in ${relParts(secs)}`;
}

function formatRows(n: number): string {
  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;
  if (n >= 1000) return `${(n / 1000).toFixed(1)}k`;
  return String(n);
}

function freshnessOf(
  source: DataSource,
  now: number,
  mounted: boolean,
): { status: SourceStatus; slaPct: number } {
  if (source.status === "failed") return { slaPct: 100, status: "failed" };
  if (source.status === "running") return { slaPct: 100, status: "running" };
  if (!mounted) return { slaPct: 0, status: "fresh" };
  const d = toDate(source.updatedAt);
  const age = d ? Math.max(0, now - d.getTime()) : 0;
  const pct = source.sla > 0 ? clamp((age / source.sla) * 100, 0, 100) : 0;
  return { slaPct: pct, status: age <= source.sla ? "fresh" : "stale" };
}

function slaColor(pct: number, status: SourceStatus): string {
  if (status === "failed") return "#ef4444";
  if (status === "running") return "#3b82f6";
  if (status === "stale" || pct >= 100) return "#ef4444";
  if (pct >= 70) return "#f59e0b";
  return "#10b981";
}

function SourceRow({
  source,
  status,
  slaPct,
  mounted,
}: {
  source: DataSource;
  status: SourceStatus;
  slaPct: number;
  mounted: boolean;
}) {
  const sm = STATUS_META[status];
  const TypeIcon = TYPE_META[source.type ?? "table"].Icon;
  const barColor = slaColor(slaPct, status);
  return (
    <div className="flex items-center gap-3 px-3 py-2.5">
      <span className="w-0.5 shrink-0 self-stretch rounded" style={{ background: sm.color }} />
      <TypeIcon className="size-4 shrink-0 text-muted-foreground" />
      <div className="min-w-0 flex-1">
        <div className="flex items-center gap-2">
          <span className="truncate font-medium font-mono text-foreground">{source.name}</span>
          {source.rows !== undefined ? (
            <span className="shrink-0 rounded bg-muted px-1 text-[10px] text-muted-foreground tabular-nums">
              {formatRows(source.rows)} rows
            </span>
          ) : null}
        </div>
        <div className="mt-0.5 flex flex-wrap items-center gap-x-2 text-[10px] text-muted-foreground">
          {source.schedule ? <span>{source.schedule}</span> : null}
          {mounted ? <span>updated {timeAgo(source.updatedAt, mounted)}</span> : null}
        </div>
        <div className="mt-1 h-1 w-full overflow-hidden rounded-full bg-muted">
          {status === "running" ? (
            <motion.div
              animate={{ x: ["-100%", "300%"] }}
              className="h-full w-1/3 rounded-full"
              style={{ background: barColor }}
              transition={{ duration: 1.2, ease: "linear", repeat: Number.POSITIVE_INFINITY }}
            />
          ) : (
            <div
              className="h-full rounded-full transition-all"
              style={{ background: barColor, width: `${slaPct}%` }}
            />
          )}
        </div>
      </div>
      <div className="flex shrink-0 flex-col items-end gap-1">
        <span
          className="flex items-center gap-1 rounded-full px-1.5 py-0.5 font-medium text-[10px]"
          style={{ background: `${sm.color}1f`, color: sm.color }}
        >
          <span className="size-1.5 rounded-full" style={{ background: sm.color }} />
          {sm.label}
        </span>
        {source.nextRun && mounted ? (
          <span className="text-[10px] text-muted-foreground">
            next run {timeUntil(source.nextRun, mounted)}
          </span>
        ) : null}
      </div>
    </div>
  );
}

export function DataFreshness({ sources, className }: DataFreshnessProps) {
  const mounted = useMounted();
  const now = mounted ? Date.now() : 0;

  const rows = useMemo(() => {
    const computed = sources.map((source) => ({ source, ...freshnessOf(source, now, mounted) }));
    return computed.sort((a, b) => {
      const r = STATUS_META[b.status].rank - STATUS_META[a.status].rank;
      return r !== 0 ? r : b.slaPct - a.slaPct;
    });
  }, [sources, now, mounted]);

  const { counts, worst } = useMemo(() => {
    const c: Record<SourceStatus, number> = { failed: 0, fresh: 0, running: 0, stale: 0 };
    let w: SourceStatus = "fresh";
    for (const r of rows) {
      c[r.status]++;
      if (STATUS_META[r.status].rank > STATUS_META[w].rank) w = r.status;
    }
    return { counts: c, worst: w };
  }, [rows]);

  if (sources.length === 0) {
    return (
      <div
        className={cn(
          "rounded-lg border border-border bg-card p-4 text-center text-muted-foreground text-xs italic",
          className,
        )}
      >
        No sources
      </div>
    );
  }

  const allFresh = worst === "fresh";
  const bannerColor = STATUS_META[worst].color;
  const bannerText = allFresh
    ? "All sources fresh"
    : STATUS_ORDER.filter((s) => counts[s] > 0)
        .map((s) => `${counts[s]} ${s}`)
        .join(" · ");

  return (
    <div
      className={cn("overflow-hidden rounded-lg border border-border bg-card text-xs", className)}
    >
      <div
        className="flex items-center gap-2 border-border border-b px-3 py-2.5 font-sans"
        style={{ background: `${bannerColor}14` }}
      >
        <span className="size-2.5 rounded-full" style={{ background: bannerColor }} />
        <span className="font-medium text-sm" style={{ color: bannerColor }}>
          {bannerText}
        </span>
      </div>
      <div className="divide-y divide-border/60">
        {rows.map(({ source, status, slaPct }) => (
          <SourceRow
            key={source.id}
            mounted={mounted}
            slaPct={slaPct}
            source={source}
            status={status}
          />
        ))}
      </div>
    </div>
  );
}

export default DataFreshness;
```

## Data Grid

A query-result data grid: type-aware cells, sortable columns, global search + faceted column filters, column visibility, row selection and pagination.

- Page: https://rocket.gozturk.dev/data-grid
- Install: `npx shadcn@latest add https://rocket.gozturk.dev/r/data-grid.json`
- Source: `components/ui/data-grid.tsx`

```tsx
"use client";

import {
  Check,
  ChevronDown,
  ChevronLeft,
  ChevronRight,
  ChevronsUpDown,
  ChevronUp,
  Columns3,
  ListFilter,
  Search,
} from "lucide-react";
import { useMemo, useState } from "react";
import { Checkbox } from "@/components/ui/checkbox";
import {
  DropdownMenu,
  DropdownMenuCheckboxItem,
  DropdownMenuContent,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Input } from "@/components/ui/input";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { cn } from "@/lib/utils";

export type ColumnType = "text" | "number" | "boolean" | "date" | "badge";

export interface Column {
  key: string;
  label: string;
  type?: ColumnType;
  sortable?: boolean;
  facet?: boolean;
  align?: "left" | "right";
}

export interface DataGridProps {
  columns: Column[];
  rows: Record<string, unknown>[];
  idKey?: string;
  pageSize?: number;
  selectable?: boolean;
  searchable?: boolean;
  className?: string;
}

const BADGE_PALETTE = ["#3b82f6", "#8b5cf6", "#10b981", "#f59e0b", "#ef4444", "#06b6d4", "#ec4899"];
const numberFmt = new Intl.NumberFormat("en-US");
const dateFmt = new Intl.DateTimeFormat("en-US", {
  day: "numeric",
  month: "short",
  timeZone: "UTC",
  year: "numeric",
});

function rowKeyOf(row: Record<string, unknown>, idKey: string, index: number): string {
  const v = row[idKey];
  return v === undefined || v === null ? String(index) : String(v);
}

function toDate(value: unknown): Date | null {
  if (value instanceof Date) return Number.isNaN(value.getTime()) ? null : value;
  if (typeof value === "string" || typeof value === "number") {
    const d = new Date(value);
    return Number.isNaN(d.getTime()) ? null : d;
  }
  return null;
}

function compareValues(a: unknown, b: unknown, type: ColumnType): number {
  const an = a === null || a === undefined;
  const bn = b === null || b === undefined;
  if (an && bn) return 0;
  if (an) return 1;
  if (bn) return -1;
  if (type === "number") return Number(a) - Number(b);
  if (type === "boolean") return a === b ? 0 : a ? 1 : -1;
  if (type === "date") return (toDate(a)?.getTime() ?? 0) - (toDate(b)?.getTime() ?? 0);
  return String(a).localeCompare(String(b));
}

function formatCell(value: unknown, type: ColumnType): string {
  if (value === null || value === undefined) return "—";
  if (type === "number") return numberFmt.format(Number(value));
  if (type === "date") {
    const d = toDate(value);
    return d ? dateFmt.format(d) : String(value);
  }
  if (type === "boolean") return value ? "Yes" : "No";
  return String(value);
}

function badgeColor(value: string): string {
  let h = 0;
  for (let i = 0; i < value.length; i++) h = (h * 31 + value.charCodeAt(i)) >>> 0;
  return BADGE_PALETTE[h % BADGE_PALETTE.length];
}

function matchesSearch(row: Record<string, unknown>, columns: Column[], q: string): boolean {
  const needle = q.toLowerCase();
  return columns.some((c) =>
    String(row[c.key] ?? "")
      .toLowerCase()
      .includes(needle),
  );
}

function facetValues(
  rows: Record<string, unknown>[],
  key: string,
): { value: string; count: number }[] {
  const m = new Map<string, number>();
  for (const r of rows) {
    const v = String(r[key] ?? "—");
    m.set(v, (m.get(v) ?? 0) + 1);
  }
  return [...m.entries()]
    .map(([value, count]) => ({ count, value }))
    .sort((a, b) => a.value.localeCompare(b.value));
}

export function DataGrid({
  columns,
  rows,
  idKey = "id",
  pageSize = 8,
  selectable = true,
  searchable = true,
  className,
}: DataGridProps) {
  const [sort, setSort] = useState<{ key: string; dir: "asc" | "desc" } | null>(null);
  const [search, setSearch] = useState("");
  const [facetFilters, setFacetFilters] = useState<Map<string, Set<string>>>(() => new Map());
  const [hiddenCols, setHiddenCols] = useState<Set<string>>(() => new Set());
  const [page, setPage] = useState(0);
  const [selected, setSelected] = useState<Set<string>>(() => new Set());

  const colByKey = useMemo(() => {
    const m = new Map<string, Column>();
    for (const c of columns) m.set(c.key, c);
    return m;
  }, [columns]);

  const visibleCols = columns.filter((c) => !hiddenCols.has(c.key));
  const facetCols = columns.filter((c) => c.facet);

  const keyed = useMemo(
    () => rows.map((row, index) => ({ key: rowKeyOf(row, idKey, index), row })),
    [rows, idKey],
  );

  const filtered = useMemo(() => {
    return keyed.filter(({ row }) => {
      if (search && !matchesSearch(row, columns, search)) return false;
      for (const [key, set] of facetFilters) {
        if (set.size > 0 && !set.has(String(row[key] ?? "—"))) return false;
      }
      return true;
    });
  }, [keyed, columns, search, facetFilters]);

  const sorted = useMemo(() => {
    if (!sort) return filtered;
    const col = colByKey.get(sort.key);
    const type = col?.type ?? "text";
    const dir = sort.dir === "asc" ? 1 : -1;
    return [...filtered].sort(
      (a, b) => dir * compareValues(a.row[sort.key], b.row[sort.key], type),
    );
  }, [filtered, sort, colByKey]);

  const pageCount = Math.max(1, Math.ceil(sorted.length / pageSize));
  const safePage = Math.min(page, pageCount - 1);
  const pageRows = sorted.slice(safePage * pageSize, safePage * pageSize + pageSize);

  const allKeys = sorted.map((r) => r.key);
  const allSelected = allKeys.length > 0 && allKeys.every((k) => selected.has(k));
  const someSelected = allKeys.some((k) => selected.has(k));

  const resetPage = () => setPage(0);

  const handleSort = (key: string) => {
    setSort((prev) => {
      if (!prev || prev.key !== key) return { dir: "asc", key };
      if (prev.dir === "asc") return { dir: "desc", key };
      return null;
    });
  };

  const toggleFacet = (key: string, value: string) => {
    setFacetFilters((prev) => {
      const next = new Map(prev);
      const set = new Set(next.get(key) ?? []);
      if (set.has(value)) set.delete(value);
      else set.add(value);
      next.set(key, set);
      return next;
    });
    resetPage();
  };

  const toggleCol = (key: string) => {
    setHiddenCols((prev) => {
      const next = new Set(prev);
      if (next.has(key)) next.delete(key);
      else next.add(key);
      return next;
    });
  };

  const toggleRow = (key: string) => {
    setSelected((prev) => {
      const next = new Set(prev);
      if (next.has(key)) next.delete(key);
      else next.add(key);
      return next;
    });
  };

  const toggleAll = () => {
    setSelected((prev) => {
      const next = new Set(prev);
      if (allSelected) for (const k of allKeys) next.delete(k);
      else for (const k of allKeys) next.add(k);
      return next;
    });
  };

  const renderCell = (col: Column, value: unknown) => {
    if (value === null || value === undefined)
      return <span className="text-muted-foreground">—</span>;
    if (col.type === "boolean") {
      return value ? (
        <Check className="size-3.5 text-emerald-500" />
      ) : (
        <span className="text-muted-foreground">No</span>
      );
    }
    if (col.type === "badge") {
      const v = String(value);
      const c = badgeColor(v);
      return (
        <span
          className="rounded-full px-1.5 py-0.5 font-medium text-[11px]"
          style={{ background: `${c}1f`, color: c }}
        >
          {v}
        </span>
      );
    }
    return (
      <span className={col.type === "number" ? "tabular-nums" : undefined}>
        {formatCell(value, col.type ?? "text")}
      </span>
    );
  };

  const alignClass = (col: Column) =>
    (col.align ?? (col.type === "number" ? "right" : "left")) === "right"
      ? "text-right"
      : "text-left";

  return (
    <div className={cn("rounded-lg border border-border bg-card text-xs", className)}>
      <div className="flex flex-wrap items-center gap-2 border-border border-b p-2">
        {searchable ? (
          <div className="relative">
            <Search className="absolute top-1/2 left-2 size-3.5 -translate-y-1/2 text-muted-foreground" />
            <Input
              className="h-8 w-44 pl-7 text-xs"
              onChange={(e) => {
                setSearch(e.target.value);
                resetPage();
              }}
              placeholder="Search…"
              value={search}
            />
          </div>
        ) : null}

        {facetCols.map((col) => {
          const selectedVals = facetFilters.get(col.key) ?? new Set<string>();
          const values = facetValues(rows, col.key);
          return (
            <DropdownMenu key={col.key}>
              <DropdownMenuTrigger
                className={cn(
                  "inline-flex h-8 items-center gap-1 rounded-md border border-border px-2 text-xs transition-colors hover:bg-muted",
                  selectedVals.size > 0 && "border-foreground/30 text-foreground",
                )}
              >
                <ListFilter className="size-3.5" />
                {col.label}
                {selectedVals.size > 0 ? ` (${selectedVals.size})` : ""}
              </DropdownMenuTrigger>
              <DropdownMenuContent align="start">
                <div className="px-1.5 py-1 font-medium text-muted-foreground text-xs">
                  {col.label}
                </div>
                {values.map((v) => (
                  <DropdownMenuCheckboxItem
                    checked={selectedVals.has(v.value)}
                    key={v.value}
                    onCheckedChange={() => toggleFacet(col.key, v.value)}
                  >
                    <span className="capitalize">{v.value}</span>
                    <span className="ml-auto pl-3 text-muted-foreground tabular-nums">
                      {v.count}
                    </span>
                  </DropdownMenuCheckboxItem>
                ))}
              </DropdownMenuContent>
            </DropdownMenu>
          );
        })}

        <DropdownMenu>
          <DropdownMenuTrigger className="ml-auto inline-flex h-8 items-center gap-1 rounded-md border border-border px-2 text-xs transition-colors hover:bg-muted">
            <Columns3 className="size-3.5" />
            Columns
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end">
            <div className="px-1.5 py-1 font-medium text-muted-foreground text-xs">
              Toggle columns
            </div>
            {columns.map((col) => (
              <DropdownMenuCheckboxItem
                checked={!hiddenCols.has(col.key)}
                key={col.key}
                onCheckedChange={() => toggleCol(col.key)}
              >
                {col.label}
              </DropdownMenuCheckboxItem>
            ))}
          </DropdownMenuContent>
        </DropdownMenu>

        {selectable && selected.size > 0 ? (
          <span className="text-muted-foreground">{selected.size} selected</span>
        ) : null}
      </div>

      <Table>
        <TableHeader>
          <TableRow>
            {selectable ? (
              <TableHead className="w-8">
                <Checkbox
                  aria-label="Select all"
                  checked={allSelected}
                  indeterminate={someSelected && !allSelected}
                  onCheckedChange={() => toggleAll()}
                />
              </TableHead>
            ) : null}
            {visibleCols.map((col) => {
              const sortable = col.sortable ?? true;
              const active = sort?.key === col.key;
              return (
                <TableHead className={alignClass(col)} key={col.key}>
                  {sortable ? (
                    <button
                      className="inline-flex items-center gap-1 transition-colors hover:text-foreground"
                      onClick={() => handleSort(col.key)}
                      type="button"
                    >
                      {col.label}
                      {active ? (
                        sort.dir === "asc" ? (
                          <ChevronUp className="size-3.5" />
                        ) : (
                          <ChevronDown className="size-3.5" />
                        )
                      ) : (
                        <ChevronsUpDown className="size-3.5 text-muted-foreground/50" />
                      )}
                    </button>
                  ) : (
                    col.label
                  )}
                </TableHead>
              );
            })}
          </TableRow>
        </TableHeader>
        <TableBody>
          {pageRows.length === 0 ? (
            <TableRow>
              <TableCell
                className="py-8 text-center text-muted-foreground italic"
                colSpan={visibleCols.length + (selectable ? 1 : 0)}
              >
                No results
              </TableCell>
            </TableRow>
          ) : (
            pageRows.map(({ row, key }) => (
              <TableRow className={cn(selected.has(key) && "bg-muted/40")} key={key}>
                {selectable ? (
                  <TableCell className="w-8">
                    <Checkbox
                      aria-label="Select row"
                      checked={selected.has(key)}
                      onCheckedChange={() => toggleRow(key)}
                    />
                  </TableCell>
                ) : null}
                {visibleCols.map((col) => (
                  <TableCell className={alignClass(col)} key={col.key}>
                    {renderCell(col, row[col.key])}
                  </TableCell>
                ))}
              </TableRow>
            ))
          )}
        </TableBody>
      </Table>

      <div className="flex items-center justify-between gap-2 border-border border-t p-2 text-muted-foreground">
        <span>
          {sorted.length} of {rows.length} row{rows.length === 1 ? "" : "s"}
          {selectable && selected.size > 0 ? ` · ${selected.size} selected` : ""}
        </span>
        <div className="flex items-center gap-2">
          <button
            className="inline-flex h-7 items-center gap-1 rounded-md border border-border px-2 transition-colors hover:bg-muted disabled:pointer-events-none disabled:opacity-50"
            disabled={safePage <= 0}
            onClick={() => setPage((p) => Math.max(0, p - 1))}
            type="button"
          >
            <ChevronLeft className="size-3.5" />
            Prev
          </button>
          <span className="tabular-nums">
            Page {safePage + 1} / {pageCount}
          </span>
          <button
            className="inline-flex h-7 items-center gap-1 rounded-md border border-border px-2 transition-colors hover:bg-muted disabled:pointer-events-none disabled:opacity-50"
            disabled={safePage >= pageCount - 1}
            onClick={() => setPage((p) => Math.min(pageCount - 1, p + 1))}
            type="button"
          >
            Next
            <ChevronRight className="size-3.5" />
          </button>
        </div>
      </div>
    </div>
  );
}

export default DataGrid;
```

## Schema Diagram

An ER / schema diagram: table cards with typed columns and PK/FK/unique/index badges, drawn FK→PK relationship lines with cardinality markers, relationship hover-highlight and collapsible tables.

- Page: https://rocket.gozturk.dev/schema-diagram
- Install: `npx shadcn@latest add https://rocket.gozturk.dev/r/schema-diagram.json`
- Source: `components/ui/schema-diagram.tsx`

```tsx
"use client";

import {
  ChevronDown,
  ChevronRight,
  GripVertical,
  KeyRound,
  Link2,
  Maximize2,
  Minus,
  Plus,
  RotateCcw,
  Search,
  Table2,
} from "lucide-react";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { cn } from "@/lib/utils";

export interface SchemaColumn {
  name: string;
  type: string;
  pk?: boolean;
  fk?: { table: string; column: string };
  nullable?: boolean;
  unique?: boolean;
  index?: boolean;
}

export interface SchemaTable {
  name: string;
  columns: SchemaColumn[];
}

export interface SchemaDiagramProps {
  tables: SchemaTable[];
  className?: string;
}

interface Edge {
  id: string;
  sourceTable: string;
  sourceColumn: string;
  targetTable: string;
  targetColumn: string;
}

interface Line {
  id: string;
  d: string;
  sourceTable: string;
  targetTable: string;
}

interface Point {
  x: number;
  y: number;
}

const MIN_ZOOM = 0.4;
const MAX_ZOOM = 2;

function clamp(n: number, lo: number, hi: number): number {
  return Math.min(Math.max(n, lo), hi);
}

function buildEdges(tables: SchemaTable[]): Edge[] {
  const tableMap = new Map(tables.map((t) => [t.name, t]));
  const edges: Edge[] = [];
  for (const t of tables) {
    for (const c of t.columns) {
      const fk = c.fk;
      if (!fk) continue;
      const target = tableMap.get(fk.table);
      if (!target?.columns.some((tc) => tc.name === fk.column)) continue;
      edges.push({
        id: `${t.name}.${c.name}->${fk.table}.${fk.column}`,
        sourceColumn: c.name,
        sourceTable: t.name,
        targetColumn: fk.column,
        targetTable: fk.table,
      });
    }
  }
  return edges;
}

function neighborsOf(table: string, edges: Edge[]): Set<string> {
  const s = new Set<string>([table]);
  for (const e of edges) {
    if (e.sourceTable === table) s.add(e.targetTable);
    if (e.targetTable === table) s.add(e.sourceTable);
  }
  return s;
}

function Badge({ children }: { children: React.ReactNode }) {
  return (
    <span className="shrink-0 rounded bg-muted px-1 py-px font-medium text-[9px] text-muted-foreground">
      {children}
    </span>
  );
}

function TableCard({
  table,
  collapsed,
  dim,
  dragging,
  highlightAnchors,
  style,
  onToggle,
  onHover,
  onColHover,
  onGripDown,
  onGripMove,
  onGripUp,
}: {
  table: SchemaTable;
  collapsed: boolean;
  dim: boolean;
  dragging: boolean;
  highlightAnchors: Set<string>;
  style?: React.CSSProperties;
  onToggle: () => void;
  onHover: (name: string | null) => void;
  onColHover: (col: { table: string; column: string } | null) => void;
  onGripDown: (e: React.PointerEvent) => void;
  onGripMove: (e: React.PointerEvent) => void;
  onGripUp: (e: React.PointerEvent) => void;
}) {
  const visibleCols = collapsed ? table.columns.filter((c) => c.pk || c.fk) : table.columns;
  const hiddenCount = table.columns.length - visibleCols.length;
  return (
    // biome-ignore lint/a11y/noStaticElementInteractions: hover only drives a visual relationship highlight
    <div
      className={cn(
        "relative z-10 w-56 overflow-hidden rounded-lg border border-border bg-background shadow-sm transition-opacity",
        dim && "opacity-20",
        dragging && "z-20 shadow-lg ring-1 ring-foreground/20",
      )}
      data-table={table.name}
      onMouseEnter={() => onHover(table.name)}
      onMouseLeave={() => onHover(null)}
      style={style}
    >
      <div className="flex items-center border-border border-b bg-muted/40 pr-2">
        <button
          aria-label={`Drag ${table.name}`}
          className="flex cursor-grab touch-none items-center py-1.5 pr-0.5 pl-1.5 text-muted-foreground active:cursor-grabbing"
          onPointerCancel={onGripUp}
          onPointerDown={onGripDown}
          onPointerMove={onGripMove}
          onPointerUp={onGripUp}
          type="button"
        >
          <GripVertical className="size-3.5 shrink-0" />
        </button>
        <button
          className="flex flex-1 items-center gap-1.5 py-1.5 pr-1 text-left font-semibold transition-colors hover:text-foreground"
          onClick={onToggle}
          type="button"
        >
          {collapsed ? (
            <ChevronRight className="size-3.5 shrink-0" />
          ) : (
            <ChevronDown className="size-3.5 shrink-0" />
          )}
          <Table2 className="size-3.5 shrink-0 text-muted-foreground" />
          <span className="truncate font-mono">{table.name}</span>
        </button>
      </div>
      <div className="divide-y divide-border/50">
        {visibleCols.map((c) => {
          const anchor = `${table.name}.${c.name}`;
          const hl = highlightAnchors.has(anchor);
          return (
            // biome-ignore lint/a11y/noStaticElementInteractions: column hover highlights its FK relationship
            <div
              className={cn("flex items-center gap-1.5 px-2.5 py-1", hl && "bg-blue-500/10")}
              data-anchor={anchor}
              key={c.name}
              onMouseEnter={
                c.fk ? () => onColHover({ column: c.name, table: table.name }) : undefined
              }
              onMouseLeave={c.fk ? () => onColHover(null) : undefined}
            >
              <span className="flex w-3.5 shrink-0 justify-center">
                {c.pk ? (
                  <KeyRound className="size-3 text-amber-500" />
                ) : c.fk ? (
                  <Link2 className="size-3 text-blue-500" />
                ) : null}
              </span>
              <span className={cn("truncate font-mono", c.pk && "font-semibold")}>{c.name}</span>
              <span className="ml-auto flex items-center gap-1">
                <span className="font-mono text-[10px] text-muted-foreground">{c.type}</span>
                {c.fk ? (
                  <Badge>
                    → {c.fk.table}.{c.fk.column}
                  </Badge>
                ) : null}
                {c.unique ? <Badge>UNIQUE</Badge> : null}
                {c.index && !c.pk ? <Badge>IDX</Badge> : null}
                {c.nullable === false && !c.pk ? <Badge>NOT NULL</Badge> : null}
              </span>
            </div>
          );
        })}
      </div>
      {hiddenCount > 0 ? (
        <div className="px-2.5 py-1 text-[10px] text-muted-foreground italic">
          +{hiddenCount} more
        </div>
      ) : null}
    </div>
  );
}

function ToolbarButton({
  label,
  onClick,
  children,
}: {
  label: string;
  onClick: () => void;
  children: React.ReactNode;
}) {
  return (
    <button
      aria-label={label}
      className="flex size-7 items-center justify-center rounded-md border border-border text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
      onClick={onClick}
      type="button"
    >
      {children}
    </button>
  );
}

export function SchemaDiagram({ tables, className }: SchemaDiagramProps) {
  const containerRef = useRef<HTMLDivElement | null>(null);
  const [lines, setLines] = useState<Line[]>([]);
  const [boardSize, setBoardSize] = useState({ h: 0, w: 0 });
  const [collapsed, setCollapsed] = useState<Set<string>>(() => new Set());
  const [hovered, setHovered] = useState<string | null>(null);
  const [hoveredCol, setHoveredCol] = useState<{ table: string; column: string } | null>(null);
  const [search, setSearch] = useState("");
  const [positions, setPositions] = useState<Map<string, Point>>(() => new Map());
  const [draggingName, setDraggingName] = useState<string | null>(null);
  const [zoom, setZoomState] = useState(1);
  const [pan, setPanState] = useState<Point>({ x: 0, y: 0 });
  const [panning, setPanning] = useState(false);

  const zoomRef = useRef(1);
  const panRef = useRef<Point>({ x: 0, y: 0 });
  const dragRef = useRef<{
    name: string;
    startX: number;
    startY: number;
    origX: number;
    origY: number;
  } | null>(null);
  const panStartRef = useRef<{
    startX: number;
    startY: number;
    origX: number;
    origY: number;
  } | null>(null);

  const edges = useMemo(() => buildEdges(tables), [tables]);
  const measured = tables.length > 0 && tables.every((t) => positions.has(t.name));

  const setView = useCallback((z: number, p: Point) => {
    zoomRef.current = z;
    panRef.current = p;
    setZoomState(z);
    setPanState(p);
  }, []);

  const refresh = useCallback(() => {
    const container = containerRef.current;
    if (!container) return;
    const cRect = container.getBoundingClientRect();
    const z = zoomRef.current;
    const px = panRef.current.x;
    const py = panRef.current.y;
    const rectOf = (selector: string) => {
      const el = container.querySelector(selector);
      return el ? el.getBoundingClientRect() : null;
    };
    const next: Line[] = [];
    for (const e of edges) {
      const sA = rectOf(`[data-anchor="${e.sourceTable}.${e.sourceColumn}"]`);
      const tA = rectOf(`[data-anchor="${e.targetTable}.${e.targetColumn}"]`);
      const sC = rectOf(`[data-table="${e.sourceTable}"]`);
      const tC = rectOf(`[data-table="${e.targetTable}"]`);
      if (!sA || !tA || !sC || !tC) continue;
      const goRight = tC.left + tC.width / 2 >= sC.left + sC.width / 2;
      const x1 = ((goRight ? sC.right : sC.left) - cRect.left - px) / z;
      const y1 = (sA.top + sA.height / 2 - cRect.top - py) / z;
      const x2 = ((goRight ? tC.left : tC.right) - cRect.left - px) / z;
      const y2 = (tA.top + tA.height / 2 - cRect.top - py) / z;
      const dx = clamp(Math.abs(x2 - x1) * 0.5, 24, 120);
      const c1 = goRight ? x1 + dx : x1 - dx;
      const c2 = goRight ? x2 - dx : x2 + dx;
      next.push({
        d: `M ${x1.toFixed(1)} ${y1.toFixed(1)} C ${c1.toFixed(1)} ${y1.toFixed(1)}, ${c2.toFixed(1)} ${y2.toFixed(1)}, ${x2.toFixed(1)} ${y2.toFixed(1)}`,
        id: e.id,
        sourceTable: e.sourceTable,
        targetTable: e.targetTable,
      });
    }
    setLines(next);
    let maxRight = 0;
    let maxBottom = 0;
    for (const el of container.querySelectorAll("[data-table]")) {
      const r = el.getBoundingClientRect();
      maxRight = Math.max(maxRight, (r.right - cRect.left - px) / z);
      maxBottom = Math.max(maxBottom, (r.bottom - cRect.top - py) / z);
    }
    if (maxRight > 0 && maxBottom > 0) {
      const w = maxRight + 16;
      const h = maxBottom + 16;
      setBoardSize((prev) =>
        Math.abs(prev.w - w) <= 0.5 && Math.abs(prev.h - h) <= 0.5 ? prev : { h, w },
      );
    }
  }, [edges]);

  useEffect(() => {
    if (measured) return;
    const container = containerRef.current;
    if (!container) return;
    const cRect = container.getBoundingClientRect();
    const next = new Map<string, Point>();
    for (const t of tables) {
      const el = container.querySelector(`[data-table="${t.name}"]`);
      if (!el) continue;
      const r = el.getBoundingClientRect();
      next.set(t.name, { x: r.left - cRect.left, y: r.top - cRect.top });
    }
    if (next.size === tables.length) setPositions(next);
  }, [measured, tables]);

  // biome-ignore lint/correctness/useExhaustiveDependencies: collapsed/positions re-measure lines + board size
  useEffect(() => {
    refresh();
    const container = containerRef.current;
    if (!container) return;
    const ro = new ResizeObserver(() => refresh());
    ro.observe(container);
    for (const el of container.querySelectorAll("[data-table]")) ro.observe(el);
    window.addEventListener("resize", refresh);
    return () => {
      ro.disconnect();
      window.removeEventListener("resize", refresh);
    };
  }, [refresh, collapsed, positions]);

  useEffect(() => {
    const container = containerRef.current;
    if (!container) return;
    const onWheel = (e: WheelEvent) => {
      e.preventDefault();
      const cRect = container.getBoundingClientRect();
      const z = zoomRef.current;
      const nz = clamp(z * (e.deltaY < 0 ? 1.1 : 1 / 1.1), MIN_ZOOM, MAX_ZOOM);
      if (nz === z) return;
      const cx = e.clientX - cRect.left;
      const cy = e.clientY - cRect.top;
      const bx = (cx - panRef.current.x) / z;
      const by = (cy - panRef.current.y) / z;
      setView(nz, { x: cx - bx * nz, y: cy - by * nz });
    };
    container.addEventListener("wheel", onWheel, { passive: false });
    return () => container.removeEventListener("wheel", onWheel);
  }, [setView]);

  const toggle = (name: string) =>
    setCollapsed((prev) => {
      const next = new Set(prev);
      if (next.has(name)) next.delete(name);
      else next.add(name);
      return next;
    });

  const startDrag = (name: string, e: React.PointerEvent) => {
    const pos = positions.get(name) ?? { x: 0, y: 0 };
    dragRef.current = { name, origX: pos.x, origY: pos.y, startX: e.clientX, startY: e.clientY };
    setDraggingName(name);
    e.currentTarget.setPointerCapture(e.pointerId);
    e.preventDefault();
    e.stopPropagation();
  };

  const moveDrag = (e: React.PointerEvent) => {
    const d = dragRef.current;
    if (!d) return;
    const z = zoomRef.current;
    const nx = Math.max(0, d.origX + (e.clientX - d.startX) / z);
    const ny = Math.max(0, d.origY + (e.clientY - d.startY) / z);
    setPositions((prev) => new Map(prev).set(d.name, { x: nx, y: ny }));
  };

  const endDrag = (e: React.PointerEvent) => {
    if (!dragRef.current) return;
    dragRef.current = null;
    setDraggingName(null);
    if (e.currentTarget.hasPointerCapture(e.pointerId))
      e.currentTarget.releasePointerCapture(e.pointerId);
  };

  const startPan = (e: React.PointerEvent) => {
    if ((e.target as HTMLElement).closest("[data-table]")) return;
    panStartRef.current = {
      origX: panRef.current.x,
      origY: panRef.current.y,
      startX: e.clientX,
      startY: e.clientY,
    };
    setPanning(true);
    e.currentTarget.setPointerCapture(e.pointerId);
  };

  const movePan = (e: React.PointerEvent) => {
    const p = panStartRef.current;
    if (!p) return;
    setView(zoomRef.current, {
      x: p.origX + (e.clientX - p.startX),
      y: p.origY + (e.clientY - p.startY),
    });
  };

  const endPan = (e: React.PointerEvent) => {
    if (!panStartRef.current) return;
    panStartRef.current = null;
    setPanning(false);
    if (e.currentTarget.hasPointerCapture(e.pointerId))
      e.currentTarget.releasePointerCapture(e.pointerId);
  };

  const zoomBy = (factor: number) => {
    const container = containerRef.current;
    if (!container) return;
    const cx = container.clientWidth / 2;
    const cy = container.clientHeight / 2;
    const z = zoomRef.current;
    const nz = clamp(z * factor, MIN_ZOOM, MAX_ZOOM);
    const bx = (cx - panRef.current.x) / z;
    const by = (cy - panRef.current.y) / z;
    setView(nz, { x: cx - bx * nz, y: cy - by * nz });
  };

  const fit = () => {
    const container = containerRef.current;
    if (!container || boardSize.w <= 0 || boardSize.h <= 0) return;
    const vw = container.clientWidth;
    const vh = container.clientHeight;
    const nz = clamp(Math.min(vw / boardSize.w, vh / boardSize.h) * 0.95, MIN_ZOOM, MAX_ZOOM);
    setView(nz, {
      x: Math.max(0, (vw - boardSize.w * nz) / 2),
      y: Math.max(0, (vh - boardSize.h * nz) / 2),
    });
  };

  const reset = () => {
    setPositions(new Map());
    setView(1, { x: 0, y: 0 });
  };

  if (tables.length === 0) {
    return (
      <div
        className={cn(
          "rounded-lg border border-border bg-card p-4 text-center text-muted-foreground text-xs italic",
          className,
        )}
      >
        No tables
      </div>
    );
  }

  const isolated = tables.filter(
    (t) => !edges.some((e) => e.sourceTable === t.name || e.targetTable === t.name),
  ).length;

  let focusTables: Set<string> | null = null;
  let focusEdges: Set<string> | null = null;
  const highlightAnchors = new Set<string>();
  if (hoveredCol) {
    const e = edges.find(
      (ed) => ed.sourceTable === hoveredCol.table && ed.sourceColumn === hoveredCol.column,
    );
    if (e) {
      focusTables = new Set([e.sourceTable, e.targetTable]);
      focusEdges = new Set([e.id]);
      highlightAnchors.add(`${e.sourceTable}.${e.sourceColumn}`);
      highlightAnchors.add(`${e.targetTable}.${e.targetColumn}`);
    }
  } else if (hovered) {
    focusTables = neighborsOf(hovered, edges);
    focusEdges = new Set(
      edges.filter((e) => e.sourceTable === hovered || e.targetTable === hovered).map((e) => e.id),
    );
  } else if (search.trim()) {
    const q = search.trim().toLowerCase();
    const matched = new Set(
      tables.filter((t) => t.name.toLowerCase().includes(q)).map((t) => t.name),
    );
    focusTables = matched;
    focusEdges = new Set(
      edges
        .filter((e) => matched.has(e.sourceTable) || matched.has(e.targetTable))
        .map((e) => e.id),
    );
  }

  const lineDim = (ln: Line) => (focusEdges ? !focusEdges.has(ln.id) : false);

  return (
    <div
      className={cn("overflow-hidden rounded-lg border border-border bg-card text-xs", className)}
    >
      <div className="flex flex-wrap items-center gap-2 border-border border-b px-3 py-2 font-sans">
        <span className="text-[11px] text-muted-foreground">
          {tables.length} tables · {edges.length} relations
          {isolated > 0 ? ` · ${isolated} isolated` : ""}
        </span>
        <div className="ml-auto flex items-center gap-1.5">
          <div className="relative">
            <Search className="absolute top-1/2 left-2 size-3.5 -translate-y-1/2 text-muted-foreground" />
            <input
              className="h-7 w-32 rounded-md border border-border bg-background pr-2 pl-7 text-xs outline-none focus:border-foreground/30"
              onChange={(e) => setSearch(e.target.value)}
              placeholder="Find table…"
              value={search}
            />
          </div>
          <ToolbarButton label="Zoom out" onClick={() => zoomBy(1 / 1.2)}>
            <Minus className="size-3.5" />
          </ToolbarButton>
          <span className="w-9 text-center text-[11px] text-muted-foreground tabular-nums">
            {Math.round(zoom * 100)}%
          </span>
          <ToolbarButton label="Zoom in" onClick={() => zoomBy(1.2)}>
            <Plus className="size-3.5" />
          </ToolbarButton>
          <ToolbarButton label="Fit to view" onClick={fit}>
            <Maximize2 className="size-3.5" />
          </ToolbarButton>
          <ToolbarButton label="Reset layout" onClick={reset}>
            <RotateCcw className="size-3.5" />
          </ToolbarButton>
        </div>
      </div>
      <div
        className={cn(
          "relative h-[440px] touch-none overflow-hidden",
          panning ? "cursor-grabbing" : "cursor-grab",
        )}
        onPointerCancel={endPan}
        onPointerDown={startPan}
        onPointerMove={movePan}
        onPointerUp={endPan}
        ref={containerRef}
      >
        <div
          className="absolute top-0 left-0 origin-top-left"
          style={{ transform: `translate(${pan.x}px, ${pan.y}px) scale(${zoom})` }}
        >
          <div
            className={cn("relative", !measured && "flex flex-wrap gap-x-16 gap-y-8 p-4")}
            style={measured ? { height: boardSize.h, width: boardSize.w } : undefined}
          >
            <svg
              aria-hidden="true"
              className="pointer-events-none absolute inset-0 z-0 h-full w-full overflow-visible text-muted-foreground/70"
            >
              <defs>
                <marker
                  id="sd-many"
                  markerHeight="12"
                  markerUnits="userSpaceOnUse"
                  markerWidth="12"
                  orient="auto"
                  refX="10"
                  refY="6"
                >
                  <path
                    d="M10 6 L2 2 M10 6 L2 6 M10 6 L2 10"
                    fill="none"
                    stroke="context-stroke"
                    strokeWidth="1"
                  />
                </marker>
                <marker
                  id="sd-one"
                  markerHeight="12"
                  markerUnits="userSpaceOnUse"
                  markerWidth="12"
                  orient="auto"
                  refX="3"
                  refY="6"
                >
                  <path d="M5 2 L5 10" fill="none" stroke="context-stroke" strokeWidth="1.5" />
                </marker>
              </defs>
              {lines.map((ln) => (
                <path
                  className={cn("transition-opacity", lineDim(ln) && "opacity-15")}
                  d={ln.d}
                  fill="none"
                  key={ln.id}
                  markerEnd="url(#sd-one)"
                  markerStart="url(#sd-many)"
                  stroke="currentColor"
                  strokeWidth={1.25}
                />
              ))}
            </svg>
            {tables.map((t) => {
              const pos = positions.get(t.name);
              return (
                <TableCard
                  collapsed={collapsed.has(t.name)}
                  dim={focusTables ? !focusTables.has(t.name) : false}
                  dragging={draggingName === t.name}
                  highlightAnchors={highlightAnchors}
                  key={t.name}
                  onColHover={setHoveredCol}
                  onGripDown={(e) => startDrag(t.name, e)}
                  onGripMove={moveDrag}
                  onGripUp={endDrag}
                  onHover={setHovered}
                  onToggle={() => toggle(t.name)}
                  style={
                    measured && pos ? { left: pos.x, position: "absolute", top: pos.y } : undefined
                  }
                  table={t}
                />
              );
            })}
          </div>
        </div>
      </div>
    </div>
  );
}

export default SchemaDiagram;
```

## SQL Console

A SQL console/runner: a syntax-highlighted editor, Run (⌘↵) with running/success/error status, duration + row-count, a result table, an error panel and query history. Bring your own onRun executor.

- Page: https://rocket.gozturk.dev/sql-console
- Install: `npx shadcn@latest add https://rocket.gozturk.dev/r/sql-console.json`
- Source: `components/ui/sql-console.tsx`

```tsx
"use client";

import { CheckCircle2, History, Loader2, Play, XCircle } from "lucide-react";
import { useRef, useState } from "react";
import { cn } from "@/lib/utils";

export interface QueryResult {
  columns: string[];
  rows: unknown[][];
  rowCount?: number;
  durationMs?: number;
  error?: string;
}

export interface SqlConsoleProps {
  initialQuery?: string;
  onRun: (sql: string) => QueryResult | Promise<QueryResult>;
  className?: string;
}

type RunStatus = "idle" | "running" | "success" | "error";

interface HistoryEntry {
  id: number;
  sql: string;
  status: "success" | "error";
  durationMs: number;
  rowCount: number;
}

interface Token {
  type: "comment" | "string" | "number" | "keyword" | "punct" | "text";
  text: string;
}

const SQL_KEYWORDS = new Set([
  "select",
  "from",
  "where",
  "and",
  "or",
  "not",
  "null",
  "is",
  "in",
  "like",
  "between",
  "join",
  "inner",
  "left",
  "right",
  "outer",
  "full",
  "cross",
  "on",
  "group",
  "by",
  "order",
  "having",
  "limit",
  "offset",
  "as",
  "distinct",
  "count",
  "sum",
  "avg",
  "min",
  "max",
  "insert",
  "into",
  "values",
  "update",
  "set",
  "delete",
  "create",
  "table",
  "drop",
  "alter",
  "asc",
  "desc",
  "union",
  "all",
  "case",
  "when",
  "then",
  "else",
  "end",
  "true",
  "false",
  "with",
]);

const TOKEN_CLASS: Record<Token["type"], string> = {
  comment: "text-muted-foreground italic",
  keyword: "text-blue-400",
  number: "text-amber-400",
  punct: "text-foreground",
  string: "text-emerald-400",
  text: "text-foreground",
};

function tokenizeSql(sql: string): Token[] {
  const tokens: Token[] = [];
  const re =
    /(--[^\n]*|\/\*[\s\S]*?\*\/)|('(?:[^'\\]|\\.)*')|(\b\d+(?:\.\d+)?\b)|([A-Za-z_][A-Za-z0-9_]*)|(\s+)|([^\s])/g;
  for (const m of sql.matchAll(re)) {
    if (m[1] !== undefined) tokens.push({ text: m[1], type: "comment" });
    else if (m[2] !== undefined) tokens.push({ text: m[2], type: "string" });
    else if (m[3] !== undefined) tokens.push({ text: m[3], type: "number" });
    else if (m[4] !== undefined)
      tokens.push({ text: m[4], type: SQL_KEYWORDS.has(m[4].toLowerCase()) ? "keyword" : "text" });
    else if (m[5] !== undefined) tokens.push({ text: m[5], type: "text" });
    else tokens.push({ text: m[0], type: "punct" });
  }
  return tokens;
}

function formatDuration(ms: number): string {
  return ms < 1000 ? `${Math.round(ms)} ms` : `${(ms / 1000).toFixed(2)} s`;
}

function formatCell(v: unknown): string {
  if (v === null || v === undefined) return "—";
  if (typeof v === "string") return v;
  if (typeof v === "object") return JSON.stringify(v);
  return String(v);
}

export function SqlConsole({ initialQuery = "", onRun, className }: SqlConsoleProps) {
  const [query, setQuery] = useState(initialQuery);
  const [status, setStatus] = useState<RunStatus>("idle");
  const [result, setResult] = useState<QueryResult | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [durationMs, setDurationMs] = useState(0);
  const [rowCount, setRowCount] = useState(0);
  const [history, setHistory] = useState<HistoryEntry[]>([]);
  const preRef = useRef<HTMLPreElement | null>(null);
  const idRef = useRef(0);

  const pushHistory = (st: "success" | "error", dur: number, count: number) => {
    idRef.current += 1;
    const entry: HistoryEntry = {
      durationMs: dur,
      id: idRef.current,
      rowCount: count,
      sql: query,
      status: st,
    };
    setHistory((prev) => [entry, ...prev].slice(0, 8));
  };

  const run = async () => {
    if (status === "running" || !query.trim()) return;
    setStatus("running");
    setError(null);
    const t0 = performance.now();
    try {
      const res = await onRun(query);
      const dur = res.durationMs ?? Math.round(performance.now() - t0);
      if (res.error) {
        setError(res.error);
        setResult(null);
        setStatus("error");
        pushHistory("error", dur, 0);
      } else {
        const count = res.rowCount ?? res.rows.length;
        setResult(res);
        setDurationMs(dur);
        setRowCount(count);
        setStatus("success");
        pushHistory("success", dur, count);
      }
    } catch (e) {
      const dur = Math.round(performance.now() - t0);
      setError(e instanceof Error ? e.message : String(e));
      setResult(null);
      setStatus("error");
      pushHistory("error", dur, 0);
    }
  };

  const syncScroll = (e: React.UIEvent<HTMLTextAreaElement>) => {
    const pre = preRef.current;
    if (pre) {
      pre.scrollTop = e.currentTarget.scrollTop;
      pre.scrollLeft = e.currentTarget.scrollLeft;
    }
  };

  const onKeyDown = (e: React.KeyboardEvent) => {
    if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
      e.preventDefault();
      run();
    }
  };

  return (
    <div
      className={cn("overflow-hidden rounded-lg border border-border bg-card text-xs", className)}
    >
      <div className="flex items-center justify-between gap-2 px-3 py-2">
        <button
          className="flex items-center gap-1.5 rounded-md bg-primary px-2.5 py-1 font-medium text-primary-foreground text-xs transition-opacity hover:opacity-90 disabled:opacity-50"
          disabled={status === "running" || !query.trim()}
          onClick={run}
          type="button"
        >
          {status === "running" ? (
            <Loader2 className="size-3.5 animate-spin" />
          ) : (
            <Play className="size-3.5" />
          )}
          Run
          <kbd className="ml-1 rounded bg-primary-foreground/20 px-1 py-px text-[9px]">⌘↵</kbd>
        </button>
        <span className="text-[11px] text-muted-foreground">
          {status === "running" ? (
            <span className="flex items-center gap-1">
              <Loader2 className="size-3.5 animate-spin" /> Running…
            </span>
          ) : status === "success" ? (
            <span className="flex items-center gap-1 text-emerald-500">
              <CheckCircle2 className="size-3.5" /> Done
            </span>
          ) : status === "error" ? (
            <span className="flex items-center gap-1 text-red-500">
              <XCircle className="size-3.5" /> Error
            </span>
          ) : null}
        </span>
      </div>

      <div className="relative h-40 overflow-hidden border-border border-y bg-muted/20 font-mono text-xs leading-5">
        <pre
          aria-hidden="true"
          className="pointer-events-none absolute inset-0 m-0 overflow-auto whitespace-pre-wrap break-words p-3"
          ref={preRef}
        >
          {tokenizeSql(query).map((t, i) => (
            <span className={TOKEN_CLASS[t.type]} key={i}>
              {t.text}
            </span>
          ))}
          {"\n"}
        </pre>
        <textarea
          className="absolute inset-0 m-0 resize-none overflow-auto whitespace-pre-wrap break-words bg-transparent p-3 text-transparent caret-foreground outline-none"
          onChange={(e) => setQuery(e.target.value)}
          onKeyDown={onKeyDown}
          onScroll={syncScroll}
          spellCheck={false}
          value={query}
        />
      </div>

      {status === "idle" ? (
        <div className="p-6 text-center text-muted-foreground text-xs">
          Run a query to see results
        </div>
      ) : status === "running" ? (
        <div className="flex items-center gap-2 p-6 text-muted-foreground text-xs">
          <Loader2 className="size-3.5 animate-spin" /> Running…
        </div>
      ) : status === "error" ? (
        <div className="m-3 rounded-md border border-red-500/30 bg-red-500/10 p-3 font-mono text-[11px] text-red-500">
          {error}
        </div>
      ) : result ? (
        <>
          <div className="flex items-center gap-1.5 border-border border-b px-3 py-1.5 text-[11px] text-muted-foreground">
            <CheckCircle2 className="size-3.5 text-emerald-500" />
            {rowCount} row{rowCount === 1 ? "" : "s"} · {formatDuration(durationMs)}
          </div>
          <div className="max-h-64 overflow-auto">
            <table className="w-full text-left text-xs">
              <thead className="sticky top-0 bg-card">
                <tr className="border-border border-b">
                  {result.columns.map((c) => (
                    <th
                      className="whitespace-nowrap px-3 py-1.5 font-medium font-mono text-muted-foreground"
                      key={c}
                    >
                      {c}
                    </th>
                  ))}
                </tr>
              </thead>
              <tbody>
                {result.rows.slice(0, 50).map((row, ri) => (
                  <tr className="border-border/50 border-b" key={ri}>
                    {result.columns.map((c, ci) => (
                      <td className="whitespace-nowrap px-3 py-1 font-mono" key={c}>
                        {row[ci] === null || row[ci] === undefined ? (
                          <span className="text-muted-foreground">—</span>
                        ) : (
                          formatCell(row[ci])
                        )}
                      </td>
                    ))}
                  </tr>
                ))}
              </tbody>
            </table>
            {result.rows.length > 50 ? (
              <div className="px-3 py-1.5 text-[10px] text-muted-foreground italic">
                +{result.rows.length - 50} more rows
              </div>
            ) : null}
          </div>
        </>
      ) : null}

      {history.length > 0 ? (
        <div className="border-border border-t">
          <div className="flex items-center gap-1.5 px-3 py-1.5 text-[10px] text-muted-foreground uppercase tracking-wide">
            <History className="size-3" /> Recent
          </div>
          <div className="divide-y divide-border/50">
            {history.map((h) => (
              <button
                className="flex w-full items-center gap-2 px-3 py-1.5 text-left transition-colors hover:bg-muted/40"
                key={h.id}
                onClick={() => setQuery(h.sql)}
                type="button"
              >
                <span
                  className="size-1.5 shrink-0 rounded-full"
                  style={{ background: h.status === "success" ? "#10b981" : "#ef4444" }}
                />
                <span className="flex-1 truncate font-mono text-[11px]">
                  {h.sql.replace(/\s+/g, " ").trim()}
                </span>
                <span className="shrink-0 text-[10px] text-muted-foreground tabular-nums">
                  {h.status === "success" ? `${h.rowCount} rows · ` : ""}
                  {formatDuration(h.durationMs)}
                </span>
              </button>
            ))}
          </div>
        </div>
      ) : null}
    </div>
  );
}

export default SqlConsole;
```

## Data Lineage

A layered data-lineage / DAG viewer: auto-laid-out source→transform→output nodes with dependency edges, direction-selectable transitive lineage tracing, node type/status indicators and an upstream/downstream impact summary.

- Page: https://rocket.gozturk.dev/data-lineage
- Install: `npx shadcn@latest add https://rocket.gozturk.dev/r/data-lineage.json`
- Source: `components/ui/data-lineage.tsx`

```tsx
"use client";

import { ArrowDown, ArrowUp, BarChart3, Cog, Database, type LucideIcon } from "lucide-react";
import { useMemo, useState } from "react";
import { cn } from "@/lib/utils";

export type NodeType = "source" | "transform" | "output";
export type NodeStatus = "fresh" | "stale" | "failed";

export interface LineageNode {
  id: string;
  label: string;
  type?: NodeType;
  status?: NodeStatus;
  sublabel?: string;
}

export interface LineageEdge {
  from: string;
  to: string;
}

export interface DataLineageProps {
  nodes: LineageNode[];
  edges: LineageEdge[];
  className?: string;
}

type Direction = "up" | "down" | "both";

const NODE_W = 168;
const NODE_H = 52;
const COL_GAP = 64;
const ROW_GAP = 20;
const HEADER_H = 24;

const TYPE_META: Record<NodeType, { color: string; label: string; Icon: LucideIcon }> = {
  output: { color: "#10b981", Icon: BarChart3, label: "Outputs" },
  source: { color: "#3b82f6", Icon: Database, label: "Sources" },
  transform: { color: "#8b5cf6", Icon: Cog, label: "Transforms" },
};

const STATUS_META: Record<NodeStatus, { color: string; label: string }> = {
  failed: { color: "#ef4444", label: "Failed" },
  fresh: { color: "#10b981", label: "Fresh" },
  stale: { color: "#f59e0b", label: "Stale" },
};

function computeLevels(nodes: LineageNode[], edges: LineageEdge[]): Map<string, number> {
  const ids = new Set(nodes.map((n) => n.id));
  const valid = edges.filter((e) => ids.has(e.from) && ids.has(e.to));
  const level = new Map<string, number>();
  for (const n of nodes) level.set(n.id, 0);
  for (let i = 0; i < nodes.length; i++) {
    let changed = false;
    for (const e of valid) {
      const next = (level.get(e.from) ?? 0) + 1;
      if (next > (level.get(e.to) ?? 0)) {
        level.set(e.to, next);
        changed = true;
      }
    }
    if (!changed) break;
  }
  return level;
}

interface LayoutResult {
  positions: Map<string, { x: number; y: number; level: number }>;
  columns: string[][];
  boardW: number;
  boardH: number;
}

function layout(nodes: LineageNode[], edges: LineageEdge[]): LayoutResult {
  const level = computeLevels(nodes, edges);
  const maxLevel = Math.max(0, ...nodes.map((n) => level.get(n.id) ?? 0));
  const columns: string[][] = Array.from({ length: maxLevel + 1 }, () => []);
  for (const n of nodes) columns[level.get(n.id) ?? 0].push(n.id);
  const maxCount = Math.max(1, ...columns.map((c) => c.length));
  const boardH = maxCount * (NODE_H + ROW_GAP) - ROW_GAP;
  const boardW = (maxLevel + 1) * (NODE_W + COL_GAP) - COL_GAP;
  const positions = new Map<string, { x: number; y: number; level: number }>();
  columns.forEach((col, lvl) => {
    const colH = col.length * (NODE_H + ROW_GAP) - ROW_GAP;
    const startY = (boardH - colH) / 2;
    col.forEach((id, i) => {
      positions.set(id, {
        level: lvl,
        x: lvl * (NODE_W + COL_GAP),
        y: startY + i * (NODE_H + ROW_GAP),
      });
    });
  });
  return { boardH, boardW, columns, positions };
}

function buildAdj(edges: LineageEdge[]): {
  out: Map<string, string[]>;
  inc: Map<string, string[]>;
} {
  const out = new Map<string, string[]>();
  const inc = new Map<string, string[]>();
  for (const e of edges) {
    if (!out.has(e.from)) out.set(e.from, []);
    out.get(e.from)?.push(e.to);
    if (!inc.has(e.to)) inc.set(e.to, []);
    inc.get(e.to)?.push(e.from);
  }
  return { inc, out };
}

function bfs(start: string, adj: Map<string, string[]>): Set<string> {
  const seen = new Set<string>();
  const queue: string[] = [start];
  while (queue.length > 0) {
    const cur = queue.shift();
    if (cur === undefined) break;
    for (const nx of adj.get(cur) ?? []) {
      if (!seen.has(nx)) {
        seen.add(nx);
        queue.push(nx);
      }
    }
  }
  return seen;
}

function traceLineage(
  id: string,
  dir: Direction,
  adj: { out: Map<string, string[]>; inc: Map<string, string[]> },
): { traced: Set<string>; up: Set<string>; down: Set<string> } {
  const up = bfs(id, adj.inc);
  const down = bfs(id, adj.out);
  const traced = new Set<string>([id]);
  if (dir === "up" || dir === "both") for (const n of up) traced.add(n);
  if (dir === "down" || dir === "both") for (const n of down) traced.add(n);
  return { down, traced, up };
}

function columnHeader(ids: string[], nodeMap: Map<string, LineageNode>, level: number): string {
  const types = new Set(ids.map((id) => nodeMap.get(id)?.type).filter(Boolean));
  if (types.size === 1) {
    const [t] = [...types];
    if (t) return TYPE_META[t].label;
  }
  return `Layer ${level + 1}`;
}

function NodeCard({
  node,
  x,
  y,
  dim,
  onHover,
}: {
  node: LineageNode;
  x: number;
  y: number;
  dim: boolean;
  onHover: (id: string | null) => void;
}) {
  const tm = node.type ? TYPE_META[node.type] : null;
  const sm = node.status ? STATUS_META[node.status] : null;
  const Icon = tm?.Icon ?? Database;
  const color = tm?.color ?? "#888888";
  return (
    // biome-ignore lint/a11y/noStaticElementInteractions: hover drives a visual lineage trace
    <div
      className={cn(
        "absolute flex items-center gap-2 rounded-lg border border-border bg-background px-2.5 shadow-sm transition-opacity",
        dim && "opacity-20",
      )}
      onMouseEnter={() => onHover(node.id)}
      onMouseLeave={() => onHover(null)}
      style={{ height: NODE_H, left: x, top: y, width: NODE_W }}
    >
      <span
        className="flex size-6 shrink-0 items-center justify-center rounded-md"
        style={{ background: `${color}1f`, color }}
      >
        <Icon className="size-3.5" />
      </span>
      <div className="min-w-0 flex-1">
        <div className="flex items-center gap-1">
          <span className="truncate font-medium font-mono">{node.label}</span>
          {sm ? (
            <span
              className="size-1.5 shrink-0 rounded-full"
              style={{ background: sm.color }}
              title={sm.label}
            />
          ) : null}
        </div>
        {node.sublabel ? (
          <div className="truncate text-[10px] text-muted-foreground">{node.sublabel}</div>
        ) : null}
      </div>
    </div>
  );
}

export function DataLineage({ nodes, edges, className }: DataLineageProps) {
  const [hovered, setHovered] = useState<string | null>(null);
  const [direction, setDirection] = useState<Direction>("both");

  const nodeMap = useMemo(() => new Map(nodes.map((n) => [n.id, n])), [nodes]);
  const { positions, columns, boardW, boardH } = useMemo(
    () => layout(nodes, edges),
    [nodes, edges],
  );
  const adj = useMemo(() => buildAdj(edges), [edges]);

  if (nodes.length === 0) {
    return (
      <div
        className={cn(
          "rounded-lg border border-border bg-card p-4 text-center text-muted-foreground text-xs italic",
          className,
        )}
      >
        No nodes
      </div>
    );
  }

  const trace = hovered ? traceLineage(hovered, direction, adj) : null;
  const tracedNodes = trace?.traced ?? null;
  const validEdges = edges.filter((e) => positions.has(e.from) && positions.has(e.to));
  const edgeActive = (e: LineageEdge) =>
    tracedNodes ? tracedNodes.has(e.from) && tracedNodes.has(e.to) : false;

  const directions: { key: Direction; label: string }[] = [
    { key: "up", label: "Upstream" },
    { key: "both", label: "Both" },
    { key: "down", label: "Downstream" },
  ];

  return (
    <div
      className={cn("overflow-hidden rounded-lg border border-border bg-card text-xs", className)}
    >
      <div className="flex flex-wrap items-center gap-2 border-border border-b px-3 py-2 font-sans">
        <span className="flex items-center gap-1 text-[11px] text-muted-foreground">
          {hovered && trace ? (
            <>
              <ArrowUp className="size-3" />
              {trace.up.size} upstream
              <span className="mx-1">·</span>
              <ArrowDown className="size-3" />
              {trace.down.size} downstream
              <span className="mx-1">—</span>
              <span className="text-foreground">{nodeMap.get(hovered)?.label}</span>
            </>
          ) : (
            `${nodes.length} nodes · ${validEdges.length} edges`
          )}
        </span>
        <div className="ml-auto flex items-center overflow-hidden rounded-md border border-border">
          {directions.map((d) => (
            <button
              className={cn(
                "px-2 py-0.5 text-[11px] transition-colors",
                direction === d.key
                  ? "bg-muted text-foreground"
                  : "text-muted-foreground hover:text-foreground",
              )}
              key={d.key}
              onClick={() => setDirection(d.key)}
              type="button"
            >
              {d.label}
            </button>
          ))}
        </div>
      </div>

      <div className="overflow-x-auto p-4">
        <div className="relative" style={{ height: boardH + HEADER_H, width: boardW }}>
          {columns.map((col, lvl) => (
            <div
              className="absolute truncate text-[10px] text-muted-foreground uppercase tracking-wide"
              key={`col-${lvl}`}
              style={{ left: lvl * (NODE_W + COL_GAP), top: 0, width: NODE_W }}
            >
              {columnHeader(col, nodeMap, lvl)}
            </div>
          ))}

          <svg
            aria-hidden="true"
            className="pointer-events-none absolute inset-0 overflow-visible text-muted-foreground/60"
          >
            <defs>
              <marker
                id="dl-arrow"
                markerHeight="8"
                markerUnits="userSpaceOnUse"
                markerWidth="8"
                orient="auto"
                refX="7"
                refY="4"
              >
                <path d="M1 1 L7 4 L1 7" fill="none" stroke="context-stroke" strokeWidth="1" />
              </marker>
            </defs>
            {validEdges.map((e) => {
              const s = positions.get(e.from);
              const t = positions.get(e.to);
              if (!s || !t) return null;
              const sx = s.x + NODE_W;
              const sy = s.y + NODE_H / 2 + HEADER_H;
              const tx = t.x;
              const ty = t.y + NODE_H / 2 + HEADER_H;
              const dx = Math.max(24, (tx - sx) * 0.5);
              const active = edgeActive(e);
              return (
                <path
                  className={cn(
                    "transition-opacity",
                    trace && !active && "opacity-15",
                    active && "text-foreground",
                  )}
                  d={`M ${sx} ${sy} C ${sx + dx} ${sy}, ${tx - dx} ${ty}, ${tx} ${ty}`}
                  fill="none"
                  key={`${e.from}->${e.to}`}
                  markerEnd="url(#dl-arrow)"
                  stroke="currentColor"
                  strokeWidth={active ? 1.5 : 1}
                />
              );
            })}
          </svg>

          {nodes.map((n) => {
            const pos = positions.get(n.id);
            if (!pos) return null;
            return (
              <NodeCard
                dim={tracedNodes ? !tracedNodes.has(n.id) : false}
                key={n.id}
                node={n}
                onHover={setHovered}
                x={pos.x}
                y={pos.y + HEADER_H}
              />
            );
          })}
        </div>
      </div>
    </div>
  );
}

export default DataLineage;
```

## Resource Monitor

A live resource monitor: per-resource 270° radial gauges with threshold zones, a history sparkline with peak/avg, a health summary banner and a pause/play live toggle. Self-updating (random walk) with a live prop.

- Page: https://rocket.gozturk.dev/resource-monitor
- Install: `npx shadcn@latest add https://rocket.gozturk.dev/r/resource-monitor.json`
- Source: `components/ui/resource-monitor.tsx`

```tsx
"use client";

import { Pause, Play } from "lucide-react";
import { useEffect, useState } from "react";
import { cn } from "@/lib/utils";

export interface ResourceMetric {
  id: string;
  label: string;
  value: number;
  max?: number;
  unit?: string;
  warn?: number;
  critical?: number;
  history?: number[];
}

export interface ResourceMonitorProps {
  metrics: ResourceMetric[];
  live?: boolean;
  intervalMs?: number;
  className?: string;
}

type Status = "ok" | "warn" | "critical";

const HISTORY_CAP = 32;
const GAUGE_START = -135;
const GAUGE_END = 135;

const STATUS_META: Record<Status, { color: string; label: string }> = {
  critical: { color: "#ef4444", label: "critical" },
  ok: { color: "#10b981", label: "ok" },
  warn: { color: "#f59e0b", label: "warn" },
};

function clamp(n: number, lo: number, hi: number): number {
  return Math.min(Math.max(n, lo), hi);
}

function thresholds(m: ResourceMetric): { max: number; warn: number; crit: number } {
  const max = m.max ?? 100;
  return { crit: m.critical ?? max * 0.9, max, warn: m.warn ?? max * 0.7 };
}

function statusOf(value: number, warn: number, crit: number): Status {
  if (value >= crit) return "critical";
  if (value >= warn) return "warn";
  return "ok";
}

function worstStatus(statuses: Status[]): Status {
  if (statuses.includes("critical")) return "critical";
  if (statuses.includes("warn")) return "warn";
  return "ok";
}

function pointOnArc(cx: number, cy: number, r: number, deg: number): { x: number; y: number } {
  const a = ((deg - 90) * Math.PI) / 180;
  return { x: cx + r * Math.cos(a), y: cy + r * Math.sin(a) };
}

function arc(cx: number, cy: number, r: number, startDeg: number, endDeg: number): string {
  const s = pointOnArc(cx, cy, r, startDeg);
  const e = pointOnArc(cx, cy, r, endDeg);
  const large = endDeg - startDeg > 180 ? 1 : 0;
  return `M ${s.x.toFixed(2)} ${s.y.toFixed(2)} A ${r} ${r} 0 ${large} 1 ${e.x.toFixed(2)} ${e.y.toFixed(2)}`;
}

function degForFrac(frac: number): number {
  return GAUGE_START + clamp(frac, 0, 1) * (GAUGE_END - GAUGE_START);
}

function useMounted() {
  const [m, setM] = useState(false);
  useEffect(() => setM(true), []);
  return m;
}

function Gauge({
  value,
  max,
  warn,
  crit,
  unit,
  color,
}: {
  value: number;
  max: number;
  warn: number;
  crit: number;
  unit: string;
  color: string;
}) {
  const cx = 50;
  const cy = 46;
  const r = 38;
  const warnDeg = degForFrac(warn / max);
  const critDeg = degForFrac(crit / max);
  const frac = clamp(value / max, 0, 1);
  return (
    <svg className="w-full" style={{ maxWidth: 128 }} viewBox="0 0 100 80">
      <path
        d={arc(cx, cy, r, GAUGE_START, warnDeg)}
        fill="none"
        stroke="#10b981"
        strokeLinecap="round"
        strokeOpacity={0.25}
        strokeWidth={7}
      />
      <path
        d={arc(cx, cy, r, warnDeg, critDeg)}
        fill="none"
        stroke="#f59e0b"
        strokeOpacity={0.25}
        strokeWidth={7}
      />
      <path
        d={arc(cx, cy, r, critDeg, GAUGE_END)}
        fill="none"
        stroke="#ef4444"
        strokeLinecap="round"
        strokeOpacity={0.25}
        strokeWidth={7}
      />
      <path
        d={arc(cx, cy, r, GAUGE_START, GAUGE_END)}
        fill="none"
        pathLength={100}
        stroke={color}
        strokeDasharray={100}
        strokeDashoffset={100 - frac * 100}
        strokeLinecap="round"
        strokeWidth={7}
        style={{ transition: "stroke-dashoffset 0.6s ease, stroke 0.3s ease" }}
      />
      <text
        className="fill-foreground font-bold"
        style={{ fontSize: 18 }}
        textAnchor="middle"
        x={cx}
        y={cy + 2}
      >
        {Math.round(value)}
      </text>
      <text
        className="fill-muted-foreground"
        style={{ fontSize: 8 }}
        textAnchor="middle"
        x={cx}
        y={cy + 13}
      >
        {unit}
      </text>
    </svg>
  );
}

function Sparkline({ history, max, color }: { history: number[]; max: number; color: string }) {
  const w = 120;
  const h = 22;
  if (history.length < 2) return <div className="h-[22px]" />;
  const n = history.length;
  const avg = history.reduce((a, b) => a + b, 0) / n;
  const peak = Math.max(...history);
  const peakIdx = history.indexOf(peak);
  const pts = history
    .map((v, i) => `${(i / (n - 1)) * w},${h - clamp(v / max, 0, 1) * h}`)
    .join(" ");
  const avgY = h - clamp(avg / max, 0, 1) * h;
  const px = (peakIdx / (n - 1)) * w;
  const py = h - clamp(peak / max, 0, 1) * h;
  return (
    <svg
      aria-hidden="true"
      className="w-full text-muted-foreground"
      preserveAspectRatio="none"
      style={{ height: 22 }}
      viewBox={`0 0 ${w} ${h}`}
    >
      <line
        stroke="currentColor"
        strokeDasharray="2 2"
        strokeOpacity={0.4}
        vectorEffect="non-scaling-stroke"
        x1={0}
        x2={w}
        y1={avgY}
        y2={avgY}
      />
      <polyline
        fill="none"
        points={pts}
        stroke={color}
        strokeWidth={1.5}
        vectorEffect="non-scaling-stroke"
      />
      <circle cx={px} cy={py} fill={color} r={2} vectorEffect="non-scaling-stroke" />
    </svg>
  );
}

export function ResourceMonitor({
  metrics,
  live = true,
  intervalMs = 1500,
  className,
}: ResourceMonitorProps) {
  const mounted = useMounted();
  const [running, setRunning] = useState(live);
  const [data, setData] = useState<Map<string, { value: number; history: number[] }>>(() => {
    const m = new Map<string, { value: number; history: number[] }>();
    for (const met of metrics)
      m.set(met.id, { history: met.history ?? [met.value], value: met.value });
    return m;
  });

  useEffect(() => {
    setData((prev) => {
      const next = new Map<string, { value: number; history: number[] }>();
      for (const met of metrics) {
        next.set(
          met.id,
          prev.get(met.id) ?? { history: met.history ?? [met.value], value: met.value },
        );
      }
      return next;
    });
  }, [metrics]);

  useEffect(() => {
    if (!mounted || !live || !running) return;
    const id = setInterval(() => {
      setData((prev) => {
        const next = new Map(prev);
        for (const met of metrics) {
          const cur = next.get(met.id);
          if (!cur) continue;
          const { max } = thresholds(met);
          const delta = (Math.random() - 0.5) * max * 0.12;
          const pull = (met.value - cur.value) * 0.06;
          const value = clamp(cur.value + delta + pull, 0, max);
          const history = [...cur.history, value].slice(-HISTORY_CAP);
          next.set(met.id, { history, value });
        }
        return next;
      });
    }, intervalMs);
    return () => clearInterval(id);
  }, [mounted, live, running, intervalMs, metrics]);

  if (metrics.length === 0) {
    return (
      <div
        className={cn(
          "rounded-lg border border-border bg-card p-4 text-center text-muted-foreground text-xs italic",
          className,
        )}
      >
        No metrics
      </div>
    );
  }

  const items = metrics.map((met) => {
    const d = data.get(met.id) ?? { history: met.history ?? [met.value], value: met.value };
    const { max, warn, crit } = thresholds(met);
    const status = statusOf(d.value, warn, crit);
    return {
      crit,
      history: d.history,
      max,
      metric: met,
      status,
      unit: met.unit ?? "%",
      value: d.value,
      warn,
    };
  });

  const worst = worstStatus(items.map((i) => i.status));
  const warnCount = items.filter((i) => i.status === "warn").length;
  const critCount = items.filter((i) => i.status === "critical").length;
  const bannerColor = STATUS_META[worst].color;
  const bannerText =
    worst === "ok"
      ? "All healthy"
      : [
          critCount > 0 ? `${critCount} critical` : null,
          warnCount > 0 ? `${warnCount} warning` : null,
        ]
          .filter(Boolean)
          .join(" · ");

  return (
    <div
      className={cn("overflow-hidden rounded-lg border border-border bg-card text-xs", className)}
    >
      <div className="flex items-center justify-between gap-2 border-border border-b px-3 py-2 font-sans">
        <span
          className="flex items-center gap-1.5 font-medium text-sm"
          style={{ color: bannerColor }}
        >
          <span className="size-2 rounded-full" style={{ background: bannerColor }} />
          {bannerText}
        </span>
        <button
          className="flex items-center gap-1 rounded-md border border-border px-2 py-0.5 text-[11px] text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
          onClick={() => setRunning((r) => !r)}
          type="button"
        >
          {running ? <Pause className="size-3" /> : <Play className="size-3" />}
          {running ? "Pause" : "Play"}
          {live && running && mounted ? (
            <span className="ml-1 flex items-center gap-1">
              <span className="size-1.5 animate-pulse rounded-full bg-emerald-500" />
              {intervalMs / 1000}s
            </span>
          ) : null}
        </button>
      </div>

      <div className="grid grid-cols-2 gap-3 p-3 sm:grid-cols-3 md:grid-cols-4">
        {items.map((it) => {
          const color = STATUS_META[it.status].color;
          const peak = it.history.length > 0 ? Math.max(...it.history) : it.value;
          return (
            <div
              className="flex flex-col items-center gap-1 rounded-lg border border-border bg-background p-2"
              key={it.metric.id}
            >
              <Gauge
                color={color}
                crit={it.crit}
                max={it.max}
                unit={it.unit}
                value={it.value}
                warn={it.warn}
              />
              <span className="font-medium">{it.metric.label}</span>
              <div className="w-full">
                <Sparkline color={color} history={it.history} max={it.max} />
                <div className="text-center text-[10px] text-muted-foreground">
                  peak {Math.round(peak)}
                  {it.unit}
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

export default ResourceMonitor;
```

## Request Inspector

A DevTools-style HTTP request inspector: a method/url/status summary with Headers, Payload, Timing-waterfall and Response (JSON-formatted) tabs, plus copy buttons.

- Page: https://rocket.gozturk.dev/request-inspector
- Install: `npx shadcn@latest add https://rocket.gozturk.dev/r/request-inspector.json`
- Source: `components/ui/request-inspector.tsx`

```tsx
"use client";

import { Check, Copy } from "lucide-react";
import { useState } from "react";
import { cn } from "@/lib/utils";

export interface TimingPhases {
  blocked?: number;
  dns?: number;
  connect?: number;
  ssl?: number;
  wait?: number;
  download?: number;
}

export interface HttpRequest {
  method: string;
  url: string;
  status: number;
  statusText?: string;
  requestHeaders?: Record<string, string>;
  responseHeaders?: Record<string, string>;
  requestBody?: string;
  responseBody?: string;
  timing?: TimingPhases;
  size?: number;
}

export interface RequestInspectorProps {
  request: HttpRequest;
  className?: string;
}

type Tab = "headers" | "payload" | "timing" | "response";

interface JsonToken {
  type: "key" | "string" | "number" | "keyword" | "punct" | "text";
  text: string;
}

const PHASE_ORDER = ["blocked", "dns", "connect", "ssl", "wait", "download"] as const;

const PHASE_META: Record<(typeof PHASE_ORDER)[number], { color: string; label: string }> = {
  blocked: { color: "#9ca3af", label: "Blocked" },
  connect: { color: "#f59e0b", label: "Connecting" },
  dns: { color: "#8b5cf6", label: "DNS Lookup" },
  download: { color: "#10b981", label: "Content Download" },
  ssl: { color: "#ec4899", label: "SSL" },
  wait: { color: "#3b82f6", label: "Waiting (TTFB)" },
};

const METHOD_COLOR: Record<string, string> = {
  DELETE: "#ef4444",
  GET: "#3b82f6",
  PATCH: "#f59e0b",
  POST: "#10b981",
  PUT: "#f59e0b",
};

const JSON_CLASS: Record<JsonToken["type"], string> = {
  key: "text-blue-400",
  keyword: "text-purple-400",
  number: "text-amber-400",
  punct: "text-foreground",
  string: "text-emerald-400",
  text: "text-foreground",
};

function methodColor(method: string): string {
  return METHOD_COLOR[method.toUpperCase()] ?? "#8b8b8b";
}

function statusMeta(status: number): { klass: string; color: string } {
  if (status >= 500) return { color: "#ef4444", klass: "5xx" };
  if (status >= 400) return { color: "#f59e0b", klass: "4xx" };
  if (status >= 300) return { color: "#3b82f6", klass: "3xx" };
  if (status >= 200) return { color: "#10b981", klass: "2xx" };
  return { color: "#8b8b8b", klass: "—" };
}

function formatBytes(n: number): string {
  if (n < 1024) return `${n} B`;
  if (n < 1024 * 1024) return `${(n / 1024).toFixed(1)} KB`;
  return `${(n / 1024 / 1024).toFixed(1)} MB`;
}

function formatMs(n: number): string {
  return n < 1000 ? `${Math.round(n)} ms` : `${(n / 1000).toFixed(2)} s`;
}

function parseQuery(url: string): { key: string; value: string }[] {
  const qIdx = url.indexOf("?");
  if (qIdx === -1) return [];
  try {
    const params = new URLSearchParams(url.slice(qIdx + 1));
    return [...params.entries()].map(([key, value]) => ({ key, value }));
  } catch {
    return [];
  }
}

function prettyJson(raw: string): { text: string; ok: boolean } {
  try {
    return { ok: true, text: JSON.stringify(JSON.parse(raw), null, 2) };
  } catch {
    return { ok: false, text: raw };
  }
}

function tokenizeJson(text: string): JsonToken[] {
  const tokens: JsonToken[] = [];
  const re =
    /("(?:[^"\\]|\\.)*"\s*:)|("(?:[^"\\]|\\.)*")|(-?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?)|\b(true|false|null)\b|(\s+)|([^\s])/g;
  for (const m of text.matchAll(re)) {
    if (m[1] !== undefined) tokens.push({ text: m[1], type: "key" });
    else if (m[2] !== undefined) tokens.push({ text: m[2], type: "string" });
    else if (m[3] !== undefined) tokens.push({ text: m[3], type: "number" });
    else if (m[4] !== undefined) tokens.push({ text: m[4], type: "keyword" });
    else if (m[5] !== undefined) tokens.push({ text: m[5], type: "text" });
    else tokens.push({ text: m[0], type: "punct" });
  }
  return tokens;
}

function totalTiming(t: TimingPhases): number {
  return PHASE_ORDER.reduce((s, k) => s + (t[k] ?? 0), 0);
}

function HeaderGroup({ title, rows }: { title: string; rows: { key: string; value: string }[] }) {
  if (rows.length === 0) return null;
  return (
    <div className="mb-3 last:mb-0">
      <div className="mb-1 font-semibold text-[10px] text-muted-foreground uppercase tracking-wide">
        {title}
      </div>
      <div className="divide-y divide-border/50">
        {rows.map((r) => (
          <div className="flex gap-3 py-1 font-mono" key={r.key}>
            <span className="w-40 shrink-0 truncate text-muted-foreground">{r.key}</span>
            <span className="min-w-0 flex-1 break-all">{r.value}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function JsonView({ raw }: { raw: string }) {
  const { text, ok } = prettyJson(raw);
  if (!ok) {
    return (
      <pre className="overflow-auto whitespace-pre-wrap break-all font-mono text-[11px] leading-5">
        {text}
      </pre>
    );
  }
  return (
    <pre className="overflow-auto whitespace-pre font-mono text-[11px] leading-5">
      {tokenizeJson(text).map((t, i) => (
        <span className={JSON_CLASS[t.type]} key={i}>
          {t.text}
        </span>
      ))}
    </pre>
  );
}

export function RequestInspector({ request, className }: RequestInspectorProps) {
  const [tab, setTab] = useState<Tab>("headers");
  const [copied, setCopied] = useState<string | null>(null);

  const copy = (key: string, text: string) => {
    navigator.clipboard?.writeText(text);
    setCopied(key);
    setTimeout(() => setCopied((c) => (c === key ? null : c)), 1200);
  };

  const sm = statusMeta(request.status);
  const mColor = methodColor(request.method);
  const total = request.timing ? totalTiming(request.timing) : null;
  const reqBody = request.requestBody;
  const respBody = request.responseBody;

  const general = [
    { key: "Request URL", value: request.url },
    { key: "Request Method", value: request.method },
    {
      key: "Status Code",
      value: `${request.status}${request.statusText ? ` ${request.statusText}` : ""}`,
    },
  ];
  const reqHeaders = request.requestHeaders
    ? Object.entries(request.requestHeaders).map(([key, value]) => ({ key, value }))
    : [];
  const resHeaders = request.responseHeaders
    ? Object.entries(request.responseHeaders).map(([key, value]) => ({ key, value }))
    : [];
  const query = parseQuery(request.url);

  const timingSegments: {
    key: string;
    label: string;
    color: string;
    left: number;
    width: number;
    dur: number;
  }[] = [];
  if (request.timing) {
    const t = request.timing;
    const denom = totalTiming(t) || 1;
    let off = 0;
    for (const k of PHASE_ORDER) {
      const dur = t[k] ?? 0;
      if (dur <= 0) continue;
      timingSegments.push({
        color: PHASE_META[k].color,
        dur,
        key: k,
        label: PHASE_META[k].label,
        left: (off / denom) * 100,
        width: (dur / denom) * 100,
      });
      off += dur;
    }
  }

  const tabs: { key: Tab; label: string }[] = [
    { key: "headers", label: "Headers" },
    { key: "payload", label: "Payload" },
    { key: "timing", label: "Timing" },
    { key: "response", label: "Response" },
  ];

  return (
    <div
      className={cn("overflow-hidden rounded-lg border border-border bg-card text-xs", className)}
    >
      <div className="flex items-center gap-2 border-border border-b px-3 py-2">
        <span
          className="shrink-0 rounded px-1.5 py-0.5 font-semibold text-[10px] uppercase"
          style={{ background: `${mColor}1f`, color: mColor }}
        >
          {request.method}
        </span>
        <span className="group flex min-w-0 flex-1 items-center gap-1">
          <span className="truncate font-mono">{request.url}</span>
          <button
            className="shrink-0 text-muted-foreground opacity-0 transition-opacity hover:text-foreground group-hover:opacity-100"
            onClick={() => copy("url", request.url)}
            type="button"
          >
            {copied === "url" ? <Check className="size-3" /> : <Copy className="size-3" />}
          </button>
        </span>
        <span
          className="flex shrink-0 items-center gap-1 rounded px-1.5 py-0.5 font-medium text-[10px]"
          style={{ background: `${sm.color}1f`, color: sm.color }}
        >
          <span className="size-1.5 rounded-full" style={{ background: sm.color }} />
          {request.status}
          {request.statusText ? ` ${request.statusText}` : ""}
        </span>
        <span className="shrink-0 text-[11px] text-muted-foreground tabular-nums">
          {total !== null ? formatMs(total) : null}
          {total !== null && request.size !== undefined ? " · " : ""}
          {request.size !== undefined ? formatBytes(request.size) : null}
        </span>
      </div>

      <div className="flex border-border border-b font-sans">
        {tabs.map((t) => (
          <button
            className={cn(
              "border-transparent border-b-2 px-3 py-1.5 text-[11px] transition-colors",
              tab === t.key
                ? "border-foreground text-foreground"
                : "text-muted-foreground hover:text-foreground",
            )}
            key={t.key}
            onClick={() => setTab(t.key)}
            type="button"
          >
            {t.label}
          </button>
        ))}
      </div>

      <div className="max-h-80 overflow-auto p-3">
        {tab === "headers" ? (
          <>
            <HeaderGroup rows={general} title="General" />
            <HeaderGroup rows={reqHeaders} title="Request Headers" />
            <HeaderGroup rows={resHeaders} title="Response Headers" />
          </>
        ) : null}

        {tab === "payload" ? (
          query.length === 0 && !reqBody ? (
            <p className="py-6 text-center text-muted-foreground italic">No payload</p>
          ) : (
            <>
              <HeaderGroup rows={query} title="Query String Parameters" />
              {reqBody ? (
                <div>
                  <div className="mb-1 font-semibold text-[10px] text-muted-foreground uppercase tracking-wide">
                    Request Body
                  </div>
                  <JsonView raw={reqBody} />
                </div>
              ) : null}
            </>
          )
        ) : null}

        {tab === "timing" ? (
          timingSegments.length === 0 ? (
            <p className="py-6 text-center text-muted-foreground italic">No timing data</p>
          ) : (
            <div className="space-y-1.5">
              {timingSegments.map((seg) => (
                <div className="flex items-center gap-2" key={seg.key}>
                  <span className="w-28 shrink-0 text-muted-foreground">{seg.label}</span>
                  <div className="relative h-3 flex-1 overflow-hidden rounded bg-muted/40">
                    <div
                      className="absolute h-3 rounded"
                      style={{
                        background: seg.color,
                        left: `${seg.left}%`,
                        width: `${Math.max(seg.width, 1)}%`,
                      }}
                    />
                  </div>
                  <span className="w-14 shrink-0 text-right tabular-nums">{formatMs(seg.dur)}</span>
                </div>
              ))}
              <div className="flex items-center gap-2 border-border border-t pt-1.5 font-medium">
                <span className="w-28 shrink-0">Total</span>
                <div className="flex-1" />
                <span className="w-14 shrink-0 text-right tabular-nums">
                  {formatMs(total ?? 0)}
                </span>
              </div>
            </div>
          )
        ) : null}

        {tab === "response" ? (
          respBody ? (
            <div>
              <div className="mb-2 flex items-center justify-between">
                <span className="text-muted-foreground">
                  {request.size !== undefined ? formatBytes(request.size) : ""}
                </span>
                <button
                  className="flex items-center gap-1 rounded border border-border px-1.5 py-0.5 text-[11px] text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
                  onClick={() => copy("resp", respBody)}
                  type="button"
                >
                  {copied === "resp" ? <Check className="size-3" /> : <Copy className="size-3" />}
                  {copied === "resp" ? "Copied" : "Copy"}
                </button>
              </div>
              <JsonView raw={respBody} />
            </div>
          ) : (
            <p className="py-6 text-center text-muted-foreground italic">No response body</p>
          )
        ) : null}
      </div>
    </div>
  );
}

export default RequestInspector;
```

## Data Quality

A data-quality / test report: validation checks (not_null, unique, freshness, range…) with pass/warn/fail status, a summary banner with pass-rate, status filters and expandable failure detail.

- Page: https://rocket.gozturk.dev/data-quality
- Install: `npx shadcn@latest add https://rocket.gozturk.dev/r/data-quality.json`
- Source: `components/ui/data-quality.tsx`

```tsx
"use client";

import { ChevronRight, CircleCheck, CircleX, type LucideIcon, TriangleAlert } from "lucide-react";
import { AnimatePresence, motion } from "motion/react";
import { useMemo, useState } from "react";
import { cn } from "@/lib/utils";

export type CheckStatus = "pass" | "warn" | "fail";
export type CheckKind =
  | "not_null"
  | "unique"
  | "freshness"
  | "range"
  | "accepted_values"
  | "row_count"
  | "custom";

export interface QualityCheck {
  id: string;
  name: string;
  kind?: CheckKind;
  column?: string;
  status: CheckStatus;
  value?: number | string;
  threshold?: number | string;
  message?: string;
}

export interface DataQualityProps {
  dataset?: string;
  rows?: number;
  checks: QualityCheck[];
  className?: string;
}

const STATUS_META: Record<
  CheckStatus,
  { color: string; label: string; Icon: LucideIcon; rank: number }
> = {
  fail: { color: "#ef4444", Icon: CircleX, label: "Failed", rank: 2 },
  pass: { color: "#10b981", Icon: CircleCheck, label: "Passed", rank: 0 },
  warn: { color: "#f59e0b", Icon: TriangleAlert, label: "Warning", rank: 1 },
};

const STATUS_ORDER: CheckStatus[] = ["fail", "warn", "pass"];

const KIND_LABEL: Record<CheckKind, string> = {
  accepted_values: "accepted values",
  custom: "custom",
  freshness: "freshness",
  not_null: "not null",
  range: "range",
  row_count: "row count",
  unique: "unique",
};

function sortChecks(checks: QualityCheck[]): QualityCheck[] {
  return [...checks].sort((a, b) => {
    const r = STATUS_META[b.status].rank - STATUS_META[a.status].rank;
    if (r !== 0) return r;
    const ca = a.column ?? "￿";
    const cb = b.column ?? "￿";
    if (ca !== cb) return ca.localeCompare(cb);
    return a.name.localeCompare(b.name);
  });
}

function summarize(checks: QualityCheck[]): {
  passed: number;
  warn: number;
  failed: number;
  total: number;
  passRate: number;
} {
  let passed = 0;
  let warn = 0;
  let failed = 0;
  for (const c of checks) {
    if (c.status === "pass") passed++;
    else if (c.status === "warn") warn++;
    else failed++;
  }
  const total = checks.length;
  return { failed, passed, passRate: total ? passed / total : 1, total, warn };
}

function worstStatus(checks: QualityCheck[]): CheckStatus {
  let worst: CheckStatus = "pass";
  for (const c of checks) {
    if (STATUS_META[c.status].rank > STATUS_META[worst].rank) worst = c.status;
  }
  return worst;
}

function formatRows(n: number): string {
  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;
  if (n >= 1000) return `${(n / 1000).toFixed(1)}k`;
  return String(n);
}

function Badge({ children, mono }: { children: React.ReactNode; mono?: boolean }) {
  return (
    <span
      className={cn(
        "shrink-0 rounded bg-muted px-1 py-px text-[10px] text-muted-foreground",
        mono && "font-mono",
      )}
    >
      {children}
    </span>
  );
}

export function DataQuality({ dataset, rows, checks, className }: DataQualityProps) {
  const [filter, setFilter] = useState<Set<CheckStatus>>(() => new Set());
  const [expanded, setExpanded] = useState<Set<string>>(() => new Set());

  const sorted = useMemo(() => sortChecks(checks), [checks]);
  const summary = useMemo(() => summarize(checks), [checks]);
  const worst = useMemo(() => worstStatus(checks), [checks]);

  const toggleFilter = (s: CheckStatus) =>
    setFilter((prev) => {
      const next = new Set(prev);
      if (next.has(s)) next.delete(s);
      else next.add(s);
      return next;
    });
  const toggleExpand = (id: string) =>
    setExpanded((prev) => {
      const next = new Set(prev);
      if (next.has(id)) next.delete(id);
      else next.add(id);
      return next;
    });

  if (checks.length === 0) {
    return (
      <div
        className={cn(
          "rounded-lg border border-border bg-card p-4 text-center text-muted-foreground text-xs italic",
          className,
        )}
      >
        No checks
      </div>
    );
  }

  const visible = sorted.filter((c) => filter.size === 0 || filter.has(c.status));
  const worstColor = STATUS_META[worst].color;
  const bannerText =
    worst === "pass"
      ? "All checks passed"
      : [
          summary.failed > 0 ? `${summary.failed} failed` : null,
          summary.warn > 0 ? `${summary.warn} warning` : null,
        ]
          .filter(Boolean)
          .join(" · ");
  const countOf = (s: CheckStatus) =>
    s === "fail" ? summary.failed : s === "warn" ? summary.warn : summary.passed;

  return (
    <div
      className={cn("overflow-hidden rounded-lg border border-border bg-card text-xs", className)}
    >
      <div className="flex flex-wrap items-center justify-between gap-2 border-border border-b px-3 py-2.5 font-sans">
        <div className="flex items-center gap-2">
          <span className="font-medium text-sm" style={{ color: worstColor }}>
            {bannerText}
          </span>
          {dataset || rows !== undefined ? (
            <span className="text-[11px] text-muted-foreground">
              {dataset}
              {dataset && rows !== undefined ? " · " : ""}
              {rows !== undefined ? `${formatRows(rows)} rows` : ""}
            </span>
          ) : null}
        </div>
        <div className="flex items-center gap-2">
          <span className="text-[11px] text-muted-foreground tabular-nums">
            {summary.passed}/{summary.total} passed
          </span>
          <div className="h-1.5 w-24 overflow-hidden rounded-full bg-muted">
            <div
              className="h-full rounded-full"
              style={{ background: worstColor, width: `${summary.passRate * 100}%` }}
            />
          </div>
        </div>
      </div>

      <div className="flex flex-wrap items-center gap-1.5 border-border border-b px-3 py-2 font-sans">
        {STATUS_ORDER.map((s) => {
          const meta = STATUS_META[s];
          const on = filter.has(s);
          return (
            <button
              className={cn(
                "flex items-center gap-1 rounded-full border px-1.5 py-0.5 text-[11px] transition-colors",
                on ? "border-current" : "border-border text-muted-foreground hover:text-foreground",
              )}
              key={s}
              onClick={() => toggleFilter(s)}
              style={on ? { color: meta.color } : undefined}
              type="button"
            >
              {meta.label}
              <span className="tabular-nums">{countOf(s)}</span>
            </button>
          );
        })}
      </div>

      {visible.length === 0 ? (
        <p className="px-3 py-6 text-center text-muted-foreground italic">No checks</p>
      ) : (
        <div className="divide-y divide-border/60">
          {visible.map((c) => {
            const meta = STATUS_META[c.status];
            const hasMessage = Boolean(c.message);
            const isOpen = expanded.has(c.id);
            const inner = (
              <>
                <meta.Icon className="size-3.5 shrink-0" style={{ color: meta.color }} />
                <span className="truncate font-medium">{c.name}</span>
                {c.kind ? <Badge>{KIND_LABEL[c.kind]}</Badge> : null}
                {c.column ? <Badge mono>{c.column}</Badge> : null}
                <span className="ml-auto flex shrink-0 items-center gap-1 font-mono text-[11px]">
                  {c.value !== undefined ? (
                    <span style={{ color: meta.color }}>{c.value}</span>
                  ) : null}
                  {c.value !== undefined && c.threshold !== undefined ? (
                    <span className="text-muted-foreground">/</span>
                  ) : null}
                  {c.threshold !== undefined ? (
                    <span className="text-muted-foreground">{c.threshold}</span>
                  ) : null}
                </span>
              </>
            );
            return (
              <div key={c.id}>
                {hasMessage ? (
                  <button
                    className="flex w-full items-center gap-2 px-3 py-2 text-left transition-colors hover:bg-muted/40"
                    onClick={() => toggleExpand(c.id)}
                    type="button"
                  >
                    {inner}
                    <ChevronRight
                      className={cn(
                        "size-3.5 shrink-0 text-muted-foreground transition-transform",
                        isOpen && "rotate-90",
                      )}
                    />
                  </button>
                ) : (
                  <div className="flex items-center gap-2 px-3 py-2">{inner}</div>
                )}
                <AnimatePresence initial={false}>
                  {hasMessage && isOpen ? (
                    <motion.div
                      animate={{ height: "auto", opacity: 1 }}
                      className="overflow-hidden"
                      exit={{ height: 0, opacity: 0 }}
                      initial={{ height: 0, opacity: 0 }}
                      transition={{ duration: 0.18 }}
                    >
                      <div className="px-3 pb-2.5 pl-8 font-mono text-[11px] text-muted-foreground">
                        {c.message}
                      </div>
                    </motion.div>
                  ) : null}
                </AnimatePresence>
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
}

export default DataQuality;
```

## Treemap

A squarified treemap: value-proportional nested rectangles colored by category, with a legend and hover detail (value, % of total). Pure computed layout.

- Page: https://rocket.gozturk.dev/treemap
- Install: `npx shadcn@latest add https://rocket.gozturk.dev/r/treemap.json`
- Source: `components/ui/treemap.tsx`

```tsx
"use client";

import { useState } from "react";
import { cn } from "@/lib/utils";

export interface TreemapNode {
  id: string;
  label: string;
  value: number;
  category?: string;
}

export interface TreemapProps {
  nodes: TreemapNode[];
  title?: string;
  unit?: string;
  className?: string;
}

interface Rect {
  node: TreemapNode;
  x: number;
  y: number;
  w: number;
  h: number;
}

const BOX_W = 100;
const BOX_H = 62;
const NEUTRAL = "#71717a";
const PALETTE = [
  "#3b82f6",
  "#8b5cf6",
  "#10b981",
  "#f59e0b",
  "#06b6d4",
  "#ec4899",
  "#ef4444",
  "#84cc16",
];

function formatValue(n: number): string {
  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;
  if (n >= 1000) return `${(n / 1000).toFixed(1)}k`;
  return Number.isInteger(n) ? String(n) : n.toFixed(1);
}

function pctLabel(value: number, total: number): string {
  const p = total > 0 ? (value / total) * 100 : 0;
  return p < 1 ? "<1" : String(Math.round(p));
}

function categoryColors(nodes: TreemapNode[]): Map<string, string> {
  const cats: string[] = [];
  for (const n of nodes) {
    const c = n.category;
    if (c && !cats.includes(c)) cats.push(c);
  }
  const m = new Map<string, string>();
  cats.forEach((c, i) => {
    m.set(c, PALETTE[i % PALETTE.length]);
  });
  return m;
}

function worstRatio(areas: number[], side: number): number {
  if (areas.length === 0) return Number.POSITIVE_INFINITY;
  const sum = areas.reduce((s, a) => s + a, 0);
  const max = Math.max(...areas);
  const min = Math.min(...areas);
  const s2 = side * side;
  const sum2 = sum * sum;
  return Math.max((s2 * max) / sum2, sum2 / (s2 * min));
}

function squarify(nodes: TreemapNode[], x0: number, y0: number, w: number, h: number): Rect[] {
  const items = nodes.filter((n) => n.value > 0).sort((a, b) => b.value - a.value);
  if (items.length === 0 || w <= 0 || h <= 0) return [];
  const total = items.reduce((s, n) => s + n.value, 0);
  const boxArea = w * h;
  const scaled = items.map((n) => ({ area: (n.value / total) * boxArea, node: n }));

  const rects: Rect[] = [];
  let x = x0;
  let y = y0;
  let rw = w;
  let rh = h;
  let row: { area: number; node: TreemapNode }[] = [];

  const layoutRow = (r: { area: number; node: TreemapNode }[]) => {
    const sum = r.reduce((s, it) => s + it.area, 0);
    if (sum <= 0) return;
    if (rw >= rh) {
      const colW = sum / rh;
      let cy = y;
      for (const it of r) {
        const cellH = (it.area / sum) * rh;
        rects.push({ h: cellH, node: it.node, w: colW, x, y: cy });
        cy += cellH;
      }
      x += colW;
      rw -= colW;
    } else {
      const rowH = sum / rw;
      let cx = x;
      for (const it of r) {
        const cellW = (it.area / sum) * rw;
        rects.push({ h: rowH, node: it.node, w: cellW, x: cx, y });
        cx += cellW;
      }
      y += rowH;
      rh -= rowH;
    }
  };

  for (const item of scaled) {
    const side = Math.min(rw, rh);
    const current = row.map((it) => it.area);
    const next = [...current, item.area];
    if (row.length === 0 || worstRatio(next, side) <= worstRatio(current, side)) {
      row.push(item);
    } else {
      layoutRow(row);
      row = [item];
    }
  }
  if (row.length > 0) layoutRow(row);

  return rects;
}

export function Treemap({ nodes, title, unit, className }: TreemapProps) {
  const [hovered, setHovered] = useState<string | null>(null);

  const valid = nodes.filter((n) => n.value > 0);

  if (valid.length === 0) {
    return (
      <div
        className={cn(
          "rounded-lg border border-border bg-card p-4 text-center text-muted-foreground text-xs italic",
          className,
        )}
      >
        No data
      </div>
    );
  }

  const total = valid.reduce((s, n) => s + n.value, 0);
  const colors = categoryColors(valid);
  const cats = [...colors.keys()];
  const rects = squarify(valid, 0, 0, BOX_W, BOX_H);
  const unitStr = unit ? ` ${unit}` : "";
  const hoveredNode = hovered ? (valid.find((n) => n.id === hovered) ?? null) : null;

  return (
    <div className={cn("rounded-lg border border-border bg-card p-3 text-xs", className)}>
      <div className="mb-2 flex flex-wrap items-center justify-between gap-2">
        <span className="font-medium">
          {title}
          <span className="ml-1.5 text-muted-foreground">
            Σ {formatValue(total)}
            {unitStr}
          </span>
        </span>
        {cats.length > 0 ? (
          <div className="flex flex-wrap items-center gap-2">
            {cats.map((c) => (
              <span className="flex items-center gap-1 text-[10px] text-muted-foreground" key={c}>
                <span className="size-2 rounded-sm" style={{ background: colors.get(c) }} />
                {c}
              </span>
            ))}
          </div>
        ) : null}
      </div>

      <div className="relative h-64 w-full overflow-hidden rounded">
        {rects.map((r) => {
          const color = (r.node.category && colors.get(r.node.category)) || NEUTRAL;
          const isHover = hovered === r.node.id;
          const dim = hovered !== null && !isHover;
          const showLabel = r.w >= 12 && r.h >= 8;
          const showValue = showLabel && r.h >= 13;
          return (
            // biome-ignore lint/a11y/noStaticElementInteractions: hover drives a visual detail highlight
            <div
              className={cn(
                "absolute overflow-hidden rounded-[3px] p-1 transition-opacity",
                dim && "opacity-30",
              )}
              key={r.node.id}
              onMouseEnter={() => setHovered(r.node.id)}
              onMouseLeave={() => setHovered(null)}
              style={{
                background: color,
                height: `${(r.h / BOX_H) * 100}%`,
                left: `${r.x}%`,
                outline: isHover ? "1.5px solid var(--foreground)" : undefined,
                top: `${(r.y / BOX_H) * 100}%`,
                width: `${r.w}%`,
              }}
            >
              {showLabel ? (
                <div className="truncate font-medium text-[10px] text-white">{r.node.label}</div>
              ) : null}
              {showValue ? (
                <div className="truncate text-[9px] text-white/75">
                  {formatValue(r.node.value)}
                  {unitStr}
                </div>
              ) : null}
            </div>
          );
        })}
      </div>

      <div className="mt-2 text-[11px] text-muted-foreground">
        {hoveredNode ? (
          <span>
            <span className="font-medium text-foreground">{hoveredNode.label}</span> ·{" "}
            {formatValue(hoveredNode.value)}
            {unitStr} · {pctLabel(hoveredNode.value, total)}%
            {hoveredNode.category ? ` · ${hoveredNode.category}` : ""}
          </span>
        ) : (
          "Hover a cell for detail"
        )}
      </div>
    </div>
  );
}

export default Treemap;
```

## Calendar Heatmap

A GitHub-contributions-style calendar heatmap: per-day values laid out as weeks × weekdays with intensity colors, month/weekday labels, a legend and hover detail. Pure UTC layout.

- Page: https://rocket.gozturk.dev/calendar-heatmap
- Install: `npx shadcn@latest add https://rocket.gozturk.dev/r/calendar-heatmap.json`
- Source: `components/ui/calendar-heatmap.tsx`

```tsx
"use client";

import { useState } from "react";
import { cn } from "@/lib/utils";

export interface HeatmapDay {
  date: string;
  value: number;
}

export interface CalendarHeatmapProps {
  data: HeatmapDay[];
  unit?: string;
  weekStartsOn?: 0 | 1;
  className?: string;
}

interface GridDay {
  date: number;
  value: number;
  level: number;
  row: number;
}

interface GridColumn {
  col: number;
  monthLabel: string | null;
  days: GridDay[];
}

interface Grid {
  columns: GridColumn[];
  max: number;
  total: number;
  activeDays: number;
  weekdayLabels: string[];
}

const DAY_MS = 86_400_000;
const CELL = 11;
const GAP = 3;

const LEVEL_BG = [
  "rgba(128, 128, 128, 0.16)",
  "rgba(16, 185, 129, 0.3)",
  "rgba(16, 185, 129, 0.5)",
  "rgba(16, 185, 129, 0.72)",
  "rgba(16, 185, 129, 1)",
];

const DAY_FMT = new Intl.DateTimeFormat("en-US", {
  day: "numeric",
  month: "short",
  timeZone: "UTC",
  weekday: "short",
});
const MONTH_FMT = new Intl.DateTimeFormat("en-US", { month: "short", timeZone: "UTC" });
const WD_FMT = new Intl.DateTimeFormat("en-US", { timeZone: "UTC", weekday: "short" });

function parseUTC(date: string): number | null {
  const m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(date);
  if (!m) return null;
  const t = Date.UTC(Number(m[1]), Number(m[2]) - 1, Number(m[3]));
  return Number.isNaN(t) ? null : t;
}

function weekdayUTC(epoch: number): number {
  return new Date(epoch).getUTCDay();
}

function levelOf(value: number, max: number): number {
  if (value <= 0 || max <= 0) return 0;
  return Math.min(4, Math.max(1, Math.ceil((value / max) * 4)));
}

function fmtCount(n: number): string {
  return n >= 1000 ? `${(n / 1000).toFixed(1)}k` : String(n);
}

function fmtDay(epoch: number): string {
  return DAY_FMT.format(new Date(epoch));
}

function buildGrid(data: HeatmapDay[], weekStartsOn: 0 | 1): Grid | null {
  const valueByEpoch = new Map<number, number>();
  for (const d of data) {
    const e = parseUTC(d.date);
    if (e === null) continue;
    valueByEpoch.set(e, (valueByEpoch.get(e) ?? 0) + d.value);
  }
  if (valueByEpoch.size === 0) return null;

  const epochs = [...valueByEpoch.keys()].sort((a, b) => a - b);
  const minE = epochs[0];
  const maxE = epochs[epochs.length - 1];
  const minWd = (weekdayUTC(minE) - weekStartsOn + 7) % 7;
  const gridStart = minE - minWd * DAY_MS;

  let max = 0;
  let total = 0;
  let activeDays = 0;
  for (const v of valueByEpoch.values()) {
    if (v > max) max = v;
    total += v;
    if (v > 0) activeDays++;
  }

  const colMap = new Map<number, GridColumn>();
  for (let e = gridStart; e <= maxE; e += DAY_MS) {
    const col = Math.floor((e - gridStart) / (7 * DAY_MS));
    const row = (weekdayUTC(e) - weekStartsOn + 7) % 7;
    const inRange = e >= minE && e <= maxE;
    const value = inRange ? (valueByEpoch.get(e) ?? 0) : -1;
    let column = colMap.get(col);
    if (!column) {
      column = { col, days: [], monthLabel: null };
      colMap.set(col, column);
    }
    column.days.push({ date: e, level: value < 0 ? -1 : levelOf(value, max), row, value });
  }

  const columns = [...colMap.values()].sort((a, b) => a.col - b.col);
  let prevMonth = -1;
  for (const column of columns) {
    const firstDay = column.days.find((d) => d.value >= 0) ?? column.days[0];
    const month = new Date(firstDay.date).getUTCMonth();
    if (month !== prevMonth) {
      column.monthLabel = MONTH_FMT.format(new Date(firstDay.date));
      prevMonth = month;
    }
  }

  const base = Date.UTC(2023, 0, 1 + weekStartsOn);
  const weekdayLabels: string[] = [];
  for (let r = 0; r < 7; r++) weekdayLabels.push(WD_FMT.format(new Date(base + r * DAY_MS)));

  return { activeDays, columns, max, total, weekdayLabels };
}

export function CalendarHeatmap({ data, unit, weekStartsOn = 0, className }: CalendarHeatmapProps) {
  const [hovered, setHovered] = useState<{ date: number; value: number } | null>(null);
  const grid = buildGrid(data, weekStartsOn);

  if (!grid) {
    return (
      <div
        className={cn(
          "rounded-lg border border-border bg-card p-4 text-center text-muted-foreground text-xs italic",
          className,
        )}
      >
        No data
      </div>
    );
  }

  const unitStr = unit ? ` ${unit}` : "";

  return (
    <div className={cn("rounded-lg border border-border bg-card p-3 text-xs", className)}>
      <div className="mb-3 flex flex-wrap items-center justify-between gap-2">
        <span className="font-medium">
          Σ {fmtCount(grid.total)}
          {unitStr}
          <span className="ml-1.5 text-muted-foreground">· {grid.activeDays} active days</span>
        </span>
        <div className="flex items-center gap-1 text-[10px] text-muted-foreground">
          Less
          {LEVEL_BG.map((bg, i) => (
            <span
              className="rounded-[2px]"
              key={i}
              style={{ background: bg, height: CELL, width: CELL }}
            />
          ))}
          More
        </div>
      </div>

      <div className="overflow-x-auto">
        <div className="flex gap-1.5 text-[9px]">
          <div className="flex flex-col" style={{ gap: GAP, paddingTop: 16 }}>
            {grid.weekdayLabels.map((wd, r) => (
              <div
                className="text-muted-foreground"
                key={r}
                style={{ height: CELL, lineHeight: `${CELL}px` }}
              >
                {r % 2 === 1 ? wd : ""}
              </div>
            ))}
          </div>

          <div>
            <div className="mb-[3px] flex" style={{ gap: GAP }}>
              {grid.columns.map((c) => (
                <div
                  className="whitespace-nowrap text-muted-foreground"
                  key={c.col}
                  style={{ height: 13, width: CELL }}
                >
                  {c.monthLabel ?? ""}
                </div>
              ))}
            </div>
            <div className="flex" style={{ gap: GAP }}>
              {grid.columns.map((c) => (
                <div className="flex flex-col" key={c.col} style={{ gap: GAP }}>
                  {Array.from({ length: 7 }, (_, r) => {
                    const day = c.days.find((d) => d.row === r);
                    if (!day || day.level < 0) {
                      return <div key={r} style={{ height: CELL, width: CELL }} />;
                    }
                    const isHover = hovered?.date === day.date;
                    return (
                      // biome-ignore lint/a11y/noStaticElementInteractions: hover drives a visual day detail
                      <div
                        className={cn("rounded-[2px]", isHover && "ring-1 ring-foreground")}
                        key={r}
                        onMouseEnter={() => setHovered({ date: day.date, value: day.value })}
                        onMouseLeave={() => setHovered(null)}
                        style={{ background: LEVEL_BG[day.level], height: CELL, width: CELL }}
                      />
                    );
                  })}
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      <div className="mt-3 text-[11px] text-muted-foreground">
        {hovered ? (
          <span>
            <span className="font-medium text-foreground">{fmtDay(hovered.date)}</span> ·{" "}
            {fmtCount(hovered.value)}
            {unitStr}
          </span>
        ) : (
          "Hover a day for detail"
        )}
      </div>
    </div>
  );
}

export default CalendarHeatmap;
```

## Funnel Chart

A conversion funnel: centered tapering step bars with counts, % of first, step-over-step drop-off connectors, an overall conversion badge and hover detail. Pure computed layout.

- Page: https://rocket.gozturk.dev/funnel-chart
- Install: `npx shadcn@latest add https://rocket.gozturk.dev/r/funnel-chart.json`
- Source: `components/ui/funnel-chart.tsx`

```tsx
"use client";

import { ArrowDown } from "lucide-react";
import { useState } from "react";
import { cn } from "@/lib/utils";

export interface FunnelStep {
  id: string;
  label: string;
  value: number;
}

export interface FunnelChartProps {
  steps: FunnelStep[];
  unit?: string;
  className?: string;
}

interface ComputedStep {
  step: FunnelStep;
  pctOfFirst: number;
  pctOfPrev: number;
  prevPctOfFirst: number;
  drop: number;
  dropPct: number;
}

const BAR_COLOR = "#3b82f6";

function fmtCount(n: number): string {
  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;
  if (n >= 1000) return `${(n / 1000).toFixed(1)}k`;
  return String(n);
}

function fmtPct(p: number): string {
  if (p <= 0) return "0";
  if (p < 1) return "<1";
  if (p < 10) return p.toFixed(1);
  return String(Math.round(p));
}

function computeSteps(steps: FunnelStep[]): ComputedStep[] {
  const first = steps[0]?.value ?? 0;
  const out: ComputedStep[] = [];
  let prev = first;
  let prevPctOfFirst = 100;
  steps.forEach((step, i) => {
    const pctOfFirst = first > 0 ? (step.value / first) * 100 : 0;
    const pctOfPrev = i === 0 ? 100 : prev > 0 ? (step.value / prev) * 100 : 0;
    const drop = i === 0 ? 0 : Math.max(0, prev - step.value);
    const dropPct = i === 0 || prev <= 0 ? 0 : (drop / prev) * 100;
    out.push({
      drop,
      dropPct,
      pctOfFirst,
      pctOfPrev,
      prevPctOfFirst: i === 0 ? pctOfFirst : prevPctOfFirst,
      step,
    });
    prevPctOfFirst = pctOfFirst;
    prev = step.value;
  });
  return out;
}

export function FunnelChart({ steps, unit, className }: FunnelChartProps) {
  const [hovered, setHovered] = useState<string | null>(null);

  if (steps.length === 0) {
    return (
      <div
        className={cn(
          "rounded-lg border border-border bg-card p-4 text-center text-muted-foreground text-xs italic",
          className,
        )}
      >
        No steps
      </div>
    );
  }

  const computed = computeSteps(steps);
  const first = steps[0].value;
  const last = steps[steps.length - 1].value;
  const overall = first > 0 ? (last / first) * 100 : 0;
  const unitStr = unit ? ` ${unit}` : "";
  const hoveredStep = hovered ? (computed.find((c) => c.step.id === hovered) ?? null) : null;

  return (
    <div className={cn("rounded-lg border border-border bg-card p-3 text-xs", className)}>
      <div className="mb-3 flex flex-wrap items-center justify-between gap-2">
        <span className="font-medium">
          Σ {fmtCount(first)}
          {unitStr}
          <span className="ml-1 text-muted-foreground">entered</span>
        </span>
        <span className="rounded-full bg-emerald-500/15 px-2 py-0.5 font-medium text-[11px] text-emerald-500">
          {fmtPct(overall)}% overall
        </span>
      </div>

      <div className="space-y-1">
        {computed.map((c, i) => {
          const isHover = hovered === c.step.id;
          const dim = hovered !== null && !isHover;
          return (
            <div key={c.step.id}>
              {i > 0 ? (
                <div className="flex items-center justify-center gap-1 py-0.5 text-[10px]">
                  {c.drop > 0 ? (
                    <span className="flex items-center gap-0.5 text-red-400/80">
                      <ArrowDown className="size-2.5" />
                      {fmtCount(c.drop)} lost · {fmtPct(c.dropPct)}%
                    </span>
                  ) : (
                    <span className="text-muted-foreground">no drop-off</span>
                  )}
                </div>
              ) : null}
              {/* biome-ignore lint/a11y/noStaticElementInteractions: hover drives a visual step detail */}
              <div
                className={cn("relative h-7 transition-opacity", dim && "opacity-40")}
                onMouseEnter={() => setHovered(c.step.id)}
                onMouseLeave={() => setHovered(null)}
              >
                <div
                  className="absolute inset-y-0 left-1/2 -translate-x-1/2 rounded bg-muted/40"
                  style={{ width: `${Math.max(c.prevPctOfFirst, 2)}%` }}
                />
                <div
                  className={cn(
                    "absolute inset-y-0 left-1/2 -translate-x-1/2 rounded transition-all",
                    isHover && "ring-1 ring-foreground",
                  )}
                  style={{ background: BAR_COLOR, width: `${Math.max(c.pctOfFirst, 2)}%` }}
                />
                <div className="pointer-events-none absolute inset-0 flex items-center justify-between px-2">
                  <span className="truncate font-medium text-white mix-blend-difference">
                    {c.step.label}
                  </span>
                  <span className="shrink-0 text-white tabular-nums mix-blend-difference">
                    {fmtCount(c.step.value)}
                    <span className="ml-1 opacity-70">({fmtPct(c.pctOfFirst)}%)</span>
                  </span>
                </div>
              </div>
            </div>
          );
        })}
      </div>

      <div className="mt-3 text-[11px] text-muted-foreground">
        {hoveredStep ? (
          <span>
            <span className="font-medium text-foreground">{hoveredStep.step.label}</span> ·{" "}
            {fmtCount(hoveredStep.step.value)}
            {unitStr} · {fmtPct(hoveredStep.pctOfPrev)}% of previous ·{" "}
            {fmtPct(hoveredStep.pctOfFirst)}% of first
          </span>
        ) : (
          "Hover a step for detail"
        )}
      </div>
    </div>
  );
}

export default FunnelChart;
```

## Data Dictionary

A searchable data dictionary / catalog browser: column metadata (type, table, tags, PII, samples) with match-highlighted search, table filter chips, a PII-only toggle and expandable rows.

- Page: https://rocket.gozturk.dev/data-dictionary
- Install: `npx shadcn@latest add https://rocket.gozturk.dev/r/data-dictionary.json`
- Source: `components/ui/data-dictionary.tsx`

```tsx
"use client";

import { ChevronRight, Search, ShieldAlert } from "lucide-react";
import { AnimatePresence, motion } from "motion/react";
import { useMemo, useState } from "react";
import { cn } from "@/lib/utils";

export interface DictionaryColumn {
  name: string;
  type: string;
  table: string;
  description?: string;
  tags?: string[];
  pii?: boolean;
  nullable?: boolean;
  sample?: string[];
}

export interface DataDictionaryProps {
  columns: DictionaryColumn[];
  className?: string;
}

function keyOf(c: DictionaryColumn): string {
  return `${c.table}.${c.name}`;
}

function matches(c: DictionaryColumn, q: string): boolean {
  const n = q.toLowerCase();
  return (
    c.name.toLowerCase().includes(n) ||
    c.table.toLowerCase().includes(n) ||
    (c.description?.toLowerCase().includes(n) ?? false)
  );
}

function Highlighted({ text, q }: { text: string; q: string }) {
  if (!q) return <>{text}</>;
  const idx = text.toLowerCase().indexOf(q.toLowerCase());
  if (idx === -1) return <>{text}</>;
  return (
    <>
      {text.slice(0, idx)}
      <span className="rounded-sm bg-amber-500/30">{text.slice(idx, idx + q.length)}</span>
      {text.slice(idx + q.length)}
    </>
  );
}

function Badge({ children, mono }: { children: React.ReactNode; mono?: boolean }) {
  return (
    <span
      className={cn(
        "shrink-0 rounded bg-muted px-1 py-px text-[10px] text-muted-foreground",
        mono && "font-mono",
      )}
    >
      {children}
    </span>
  );
}

export function DataDictionary({ columns, className }: DataDictionaryProps) {
  const [query, setQuery] = useState("");
  const [tableFilter, setTableFilter] = useState<Set<string>>(() => new Set());
  const [piiOnly, setPiiOnly] = useState(false);
  const [expanded, setExpanded] = useState<Set<string>>(() => new Set());

  const tables = useMemo(() => {
    const t: string[] = [];
    for (const c of columns) {
      if (!t.includes(c.table)) t.push(c.table);
    }
    return t;
  }, [columns]);

  const piiCount = columns.filter((c) => c.pii).length;
  const q = query.trim();

  const visible = columns.filter(
    (c) =>
      (q === "" || matches(c, q)) &&
      (tableFilter.size === 0 || tableFilter.has(c.table)) &&
      (!piiOnly || c.pii === true),
  );

  const toggleTable = (t: string) =>
    setTableFilter((prev) => {
      const next = new Set(prev);
      if (next.has(t)) next.delete(t);
      else next.add(t);
      return next;
    });

  const toggleExpand = (k: string) =>
    setExpanded((prev) => {
      const next = new Set(prev);
      if (next.has(k)) next.delete(k);
      else next.add(k);
      return next;
    });

  return (
    <div
      className={cn("overflow-hidden rounded-lg border border-border bg-card text-xs", className)}
    >
      <div className="flex flex-wrap items-center gap-2 border-border border-b px-3 py-2 font-sans">
        <span className="text-[11px] text-muted-foreground">
          {columns.length} columns · {tables.length} tables · {piiCount} PII
        </span>
        <div className="ml-auto flex flex-wrap items-center gap-1.5">
          <div className="relative">
            <Search className="absolute top-1/2 left-2 size-3.5 -translate-y-1/2 text-muted-foreground" />
            <input
              className="h-7 w-40 rounded-md border border-border bg-background pr-2 pl-7 text-xs outline-none focus:border-foreground/30"
              onChange={(e) => setQuery(e.target.value)}
              placeholder="Search columns…"
              value={query}
            />
          </div>
          {tables.map((t) => {
            const on = tableFilter.has(t);
            return (
              <button
                className={cn(
                  "rounded-full border px-1.5 py-0.5 font-mono text-[11px] transition-colors",
                  on
                    ? "border-foreground/30 bg-muted text-foreground"
                    : "border-border text-muted-foreground hover:text-foreground",
                )}
                key={t}
                onClick={() => toggleTable(t)}
                type="button"
              >
                {t}
              </button>
            );
          })}
          <button
            className={cn(
              "flex items-center gap-1 rounded-full border px-1.5 py-0.5 text-[11px] transition-colors",
              piiOnly
                ? "border-amber-500/50 text-amber-500"
                : "border-border text-muted-foreground hover:text-foreground",
            )}
            onClick={() => setPiiOnly((v) => !v)}
            type="button"
          >
            <ShieldAlert className="size-3" />
            PII
          </button>
        </div>
      </div>

      {visible.length === 0 ? (
        <p className="px-3 py-6 text-center text-muted-foreground italic">No columns match</p>
      ) : (
        <div className="divide-y divide-border/60">
          {visible.map((c) => {
            const k = keyOf(c);
            const isOpen = expanded.has(k);
            return (
              <div key={k}>
                <button
                  className="flex w-full items-center gap-2 px-3 py-2 text-left transition-colors hover:bg-muted/40"
                  onClick={() => toggleExpand(k)}
                  type="button"
                >
                  <ChevronRight
                    className={cn(
                      "size-3.5 shrink-0 text-muted-foreground transition-transform",
                      isOpen && "rotate-90",
                    )}
                  />
                  <span className="truncate font-medium font-mono">
                    <Highlighted q={q} text={c.name} />
                  </span>
                  <span className="shrink-0 font-mono text-[10px] text-muted-foreground">
                    {c.type}
                  </span>
                  <span className="ml-auto flex shrink-0 items-center gap-1">
                    <Badge mono>
                      <Highlighted q={q} text={c.table} />
                    </Badge>
                    {c.tags?.map((tag) => (
                      <Badge key={tag}>{tag}</Badge>
                    ))}
                    {c.pii ? (
                      <span className="flex items-center gap-0.5 rounded bg-amber-500/15 px-1 py-px font-medium text-[10px] text-amber-500">
                        <ShieldAlert className="size-2.5" />
                        PII
                      </span>
                    ) : null}
                  </span>
                </button>
                <AnimatePresence initial={false}>
                  {isOpen ? (
                    <motion.div
                      animate={{ height: "auto", opacity: 1 }}
                      className="overflow-hidden"
                      exit={{ height: 0, opacity: 0 }}
                      initial={{ height: 0, opacity: 0 }}
                      transition={{ duration: 0.18 }}
                    >
                      <div className="space-y-1.5 px-3 pb-2.5 pl-8">
                        {c.description ? (
                          <p className="text-muted-foreground leading-5">
                            <Highlighted q={q} text={c.description} />
                          </p>
                        ) : null}
                        <div className="flex flex-wrap items-center gap-1.5">
                          {c.nullable !== undefined ? (
                            <Badge>{c.nullable ? "nullable" : "not null"}</Badge>
                          ) : null}
                          {c.sample && c.sample.length > 0 ? (
                            <>
                              <span className="text-[10px] text-muted-foreground">Sample:</span>
                              {c.sample.map((s) => (
                                <Badge key={s} mono>
                                  {s}
                                </Badge>
                              ))}
                            </>
                          ) : null}
                        </div>
                        {!c.description &&
                        c.nullable === undefined &&
                        (!c.sample || c.sample.length === 0) ? (
                          <p className="text-muted-foreground italic">No additional metadata</p>
                        ) : null}
                      </div>
                    </motion.div>
                  ) : null}
                </AnimatePresence>
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
}

export default DataDictionary;
```

## Cron Builder

A visual cron/schedule builder: presets (minute/hourly/daily/weekly/monthly/custom) with field editors, a live expression with copy, a human-readable description, validation errors and the next 3 run times (UTC).

- Page: https://rocket.gozturk.dev/cron-builder
- Install: `npx shadcn@latest add https://rocket.gozturk.dev/r/cron-builder.json`
- Source: `components/ui/cron-builder.tsx`

```tsx
"use client";

import { Check, Copy } from "lucide-react";
import { useEffect, useRef, useState } from "react";
import { cn } from "@/lib/utils";

export interface CronBuilderProps {
  value?: string;
  onChange?: (cron: string) => void;
  className?: string;
}

type Preset = "minute" | "hourly" | "daily" | "weekly" | "monthly" | "custom";

interface BuilderState {
  preset: Preset;
  minute: number;
  hour: number;
  dom: number;
  dows: Set<number>;
  rawFields: string[];
}

interface CronSets {
  minute: Set<number>;
  hour: Set<number>;
  dom: Set<number>;
  month: Set<number>;
  dow: Set<number>;
}

const PRESETS: { key: Preset; label: string }[] = [
  { key: "minute", label: "Every minute" },
  { key: "hourly", label: "Hourly" },
  { key: "daily", label: "Daily" },
  { key: "weekly", label: "Weekly" },
  { key: "monthly", label: "Monthly" },
  { key: "custom", label: "Custom" },
];

const RAW_LABELS = ["min", "hour", "day", "month", "weekday"];
const DOW_LABELS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
const MONTH_LABELS = [
  "Jan",
  "Feb",
  "Mar",
  "Apr",
  "May",
  "Jun",
  "Jul",
  "Aug",
  "Sep",
  "Oct",
  "Nov",
  "Dec",
];

const RUN_DAY_FMT = new Intl.DateTimeFormat("en-US", {
  day: "numeric",
  month: "short",
  timeZone: "UTC",
  weekday: "short",
});

function pad2(n: number): string {
  return n < 10 ? `0${n}` : String(n);
}

function useMounted() {
  const [m, setM] = useState(false);
  useEffect(() => setM(true), []);
  return m;
}

function parseField(expr: string, min: number, max: number): Set<number> | null {
  if (expr === "") return null;
  const out = new Set<number>();
  for (const part of expr.split(",")) {
    const m = /^(\*|\d+(?:-\d+)?)(?:\/(\d+))?$/.exec(part);
    if (!m) return null;
    const step = m[2] ? Number(m[2]) : 1;
    if (step < 1) return null;
    let lo = min;
    let hi = max;
    if (m[1] !== "*") {
      const [a, b] = m[1].split("-").map(Number);
      lo = a;
      hi = b ?? (m[2] ? max : a);
    }
    if (lo < min || hi > max || lo > hi) return null;
    for (let v = lo; v <= hi; v += step) out.add(v);
  }
  return out.size > 0 ? out : null;
}

function parseCron(cron: string): { sets: CronSets } | { error: string } {
  const fields = cron.trim().split(/\s+/);
  if (fields.length !== 5) return { error: "expected 5 fields" };
  const names = ["minute", "hour", "day-of-month", "month", "day-of-week"];
  const ranges: [number, number][] = [
    [0, 59],
    [0, 23],
    [1, 31],
    [1, 12],
    [0, 7],
  ];
  const parsed: Set<number>[] = [];
  for (let i = 0; i < 5; i++) {
    const s = parseField(fields[i], ranges[i][0], ranges[i][1]);
    if (!s) return { error: `invalid ${names[i]} field` };
    parsed.push(s);
  }
  const dow = new Set<number>();
  for (const v of parsed[4]) dow.add(v === 7 ? 0 : v);
  return { sets: { dom: parsed[2], dow, hour: parsed[1], minute: parsed[0], month: parsed[3] } };
}

function isFull(s: Set<number>, min: number, max: number): boolean {
  return s.size === max - min + 1;
}

function listOf(s: Set<number>, fmt?: (n: number) => string): string {
  const arr = [...s].sort((a, b) => a - b);
  const shown = arr.slice(0, 6).map((n) => (fmt ? fmt(n) : String(n)));
  return arr.length > 6 ? `${shown.join(", ")}, …` : shown.join(", ");
}

function describe(sets: CronSets): string {
  const minFull = isFull(sets.minute, 0, 59);
  const hourFull = isFull(sets.hour, 0, 23);
  const domFull = isFull(sets.dom, 1, 31);
  const monthFull = isFull(sets.month, 1, 12);
  const dowFull = isFull(sets.dow, 0, 6);

  if (minFull && hourFull && domFull && monthFull && dowFull) return "Every minute";

  let time: string;
  const minuteOne = [...sets.minute][0];
  const hourOne = [...sets.hour][0];
  if (sets.minute.size === 1 && sets.hour.size === 1) {
    time = `At ${pad2(hourOne)}:${pad2(minuteOne)}`;
  } else if (sets.minute.size === 1 && hourFull) {
    time = `At minute ${minuteOne} past every hour`;
  } else if (minFull && sets.hour.size === 1) {
    time = `Every minute past ${pad2(hourOne)}:00`;
  } else {
    time = `At minutes ${listOf(sets.minute)}`;
    if (sets.hour.size === 1) time += ` past ${pad2(hourOne)}:00`;
    else if (!hourFull) time += ` past hours ${listOf(sets.hour)}`;
  }

  const day: string[] = [];
  if (!dowFull) day.push(`on ${listOf(sets.dow, (n) => DOW_LABELS[n])}`);
  if (!domFull) day.push(`on day ${listOf(sets.dom)}`);
  if (!monthFull) day.push(`in ${listOf(sets.month, (n) => MONTH_LABELS[n - 1])}`);
  return `${time} ${day.length > 0 ? day.join(" ") : "every day"}`;
}

function dayMatches(sets: CronSets, d: Date): boolean {
  if (!sets.month.has(d.getUTCMonth() + 1)) return false;
  const domRestricted = !isFull(sets.dom, 1, 31);
  const dowRestricted = !isFull(sets.dow, 0, 6);
  const domOk = sets.dom.has(d.getUTCDate());
  const dowOk = sets.dow.has(d.getUTCDay());
  if (domRestricted && dowRestricted) return domOk || dowOk;
  if (domRestricted) return domOk;
  if (dowRestricted) return dowOk;
  return true;
}

function nextRuns(sets: CronSets, fromMs: number, count: number): Date[] {
  const out: Date[] = [];
  const startMs = Math.ceil((fromMs + 1) / 60_000) * 60_000;
  const start = new Date(startMs);
  const hours = [...sets.hour].sort((a, b) => a - b);
  const minutes = [...sets.minute].sort((a, b) => a - b);
  const day0 = Date.UTC(start.getUTCFullYear(), start.getUTCMonth(), start.getUTCDate());
  for (let i = 0; i < 366 && out.length < count; i++) {
    const d = new Date(day0 + i * 86_400_000);
    if (!dayMatches(sets, d)) continue;
    for (const h of hours) {
      for (const m of minutes) {
        const t = Date.UTC(d.getUTCFullYear(), d.getUTCMonth(), d.getUTCDate(), h, m);
        if (t >= startMs) {
          out.push(new Date(t));
          if (out.length >= count) return out;
        }
      }
    }
  }
  return out;
}

function fmtRun(d: Date): string {
  return `${RUN_DAY_FMT.format(d)} · ${pad2(d.getUTCHours())}:${pad2(d.getUTCMinutes())} UTC`;
}

function buildCron(s: BuilderState): string {
  switch (s.preset) {
    case "minute":
      return "* * * * *";
    case "hourly":
      return `${s.minute} * * * *`;
    case "daily":
      return `${s.minute} ${s.hour} * * *`;
    case "weekly": {
      const d = [...s.dows].sort((a, b) => a - b).join(",");
      return `${s.minute} ${s.hour} * * ${d || "*"}`;
    }
    case "monthly":
      return `${s.minute} ${s.hour} ${s.dom} * *`;
    default:
      return s.rawFields.join(" ");
  }
}

function padFields(value: string): string[] {
  const f = value.trim().split(/\s+/).slice(0, 5);
  while (f.length < 5) f.push("*");
  return f;
}

function detectInitial(value: string): BuilderState {
  const def: BuilderState = {
    dom: 1,
    dows: new Set([1]),
    hour: 9,
    minute: 0,
    preset: "custom",
    rawFields: padFields(value),
  };
  const f = value.trim().split(/\s+/);
  if (f.length !== 5) return def;
  const num = (s: string) => (/^\d+$/.test(s) ? Number(s) : null);
  const [mi, h, dm, mo, dw] = f;
  const miN = num(mi);
  const hN = num(h);
  const dmN = num(dm);
  if (mi === "*" && h === "*" && dm === "*" && mo === "*" && dw === "*") {
    return { ...def, preset: "minute" };
  }
  if (miN !== null && miN <= 59 && h === "*" && dm === "*" && mo === "*" && dw === "*") {
    return { ...def, minute: miN, preset: "hourly" };
  }
  if (miN !== null && miN <= 59 && hN !== null && hN <= 23 && dm === "*" && mo === "*") {
    if (dw === "*") {
      if (dmN === null) return { ...def, hour: hN, minute: miN, preset: "daily" };
    } else if (/^\d+(,\d+)*$/.test(dw)) {
      const dows = new Set(dw.split(",").map((x) => (Number(x) === 7 ? 0 : Number(x))));
      if ([...dows].every((d) => d >= 0 && d <= 6)) {
        return { ...def, dows, hour: hN, minute: miN, preset: "weekly" };
      }
    }
  }
  if (
    miN !== null &&
    miN <= 59 &&
    hN !== null &&
    hN <= 23 &&
    dmN !== null &&
    dmN >= 1 &&
    dmN <= 31 &&
    mo === "*" &&
    dw === "*"
  ) {
    return { ...def, dom: dmN, hour: hN, minute: miN, preset: "monthly" };
  }
  return def;
}

export function CronBuilder({ value = "0 9 * * 1", onChange, className }: CronBuilderProps) {
  const [state, setState] = useState<BuilderState>(() => detectInitial(value));
  const [copied, setCopied] = useState(false);
  const mounted = useMounted();

  const cron = buildCron(state);
  const lastRef = useRef(cron);
  useEffect(() => {
    if (lastRef.current !== cron) {
      lastRef.current = cron;
      onChange?.(cron);
    }
  }, [cron, onChange]);

  const parsed = parseCron(cron);
  const runs = mounted && "sets" in parsed ? nextRuns(parsed.sets, Date.now(), 3) : [];

  const setPreset = (p: Preset) =>
    setState((s) =>
      p === "custom"
        ? { ...s, preset: p, rawFields: buildCron(s).split(" ") }
        : { ...s, preset: p },
    );
  const update = (patch: Partial<BuilderState>) => setState((s) => ({ ...s, ...patch }));
  const toggleDow = (d: number) =>
    setState((s) => {
      const next = new Set(s.dows);
      if (next.has(d)) next.delete(d);
      else next.add(d);
      return { ...s, dows: next };
    });
  const setRawField = (i: number, v: string) =>
    setState((s) => {
      const f = [...s.rawFields];
      f[i] = v;
      return { ...s, rawFields: f };
    });
  const copy = () => {
    navigator.clipboard?.writeText(cron);
    setCopied(true);
    setTimeout(() => setCopied(false), 1200);
  };

  const numSelect = (
    val: number,
    set: (n: number) => void,
    min: number,
    max: number,
    fmt: (n: number) => string,
  ) => (
    <select
      className="h-7 rounded-md border border-border bg-background px-1.5 font-mono text-xs outline-none focus:border-foreground/30"
      onChange={(e) => set(Number(e.target.value))}
      value={val}
    >
      {Array.from({ length: max - min + 1 }, (_, i) => min + i).map((n) => (
        <option key={n} value={n}>
          {fmt(n)}
        </option>
      ))}
    </select>
  );

  const timeSelects = (
    <>
      <span className="text-muted-foreground">At</span>
      {numSelect(state.hour, (n) => update({ hour: n }), 0, 23, pad2)}
      <span className="text-muted-foreground">:</span>
      {numSelect(state.minute, (n) => update({ minute: n }), 0, 59, pad2)}
    </>
  );

  return (
    <div
      className={cn("overflow-hidden rounded-lg border border-border bg-card text-xs", className)}
    >
      <div className="flex flex-wrap items-center gap-1 border-border border-b px-3 py-2 font-sans">
        {PRESETS.map((p) => (
          <button
            className={cn(
              "rounded-md px-2 py-1 text-[11px] transition-colors",
              state.preset === p.key
                ? "bg-muted font-medium text-foreground"
                : "text-muted-foreground hover:text-foreground",
            )}
            key={p.key}
            onClick={() => setPreset(p.key)}
            type="button"
          >
            {p.label}
          </button>
        ))}
      </div>

      <div className="flex min-h-12 flex-wrap items-center gap-2 px-3 py-2.5 font-sans">
        {state.preset === "minute" ? (
          <span className="text-muted-foreground">Runs every minute.</span>
        ) : null}
        {state.preset === "hourly" ? (
          <>
            <span className="text-muted-foreground">At minute</span>
            {numSelect(state.minute, (n) => update({ minute: n }), 0, 59, pad2)}
            <span className="text-muted-foreground">past every hour</span>
          </>
        ) : null}
        {state.preset === "daily" ? (
          <>
            {timeSelects}
            <span className="text-muted-foreground">every day</span>
          </>
        ) : null}
        {state.preset === "weekly" ? (
          <>
            {timeSelects}
            <span className="text-muted-foreground">on</span>
            <span className="flex items-center gap-1">
              {DOW_LABELS.map((label, d) => {
                const on = state.dows.has(d);
                return (
                  <button
                    className={cn(
                      "rounded-full border px-1.5 py-0.5 text-[11px] transition-colors",
                      on
                        ? "border-foreground/30 bg-muted font-medium text-foreground"
                        : "border-border text-muted-foreground hover:text-foreground",
                    )}
                    key={label}
                    onClick={() => toggleDow(d)}
                    type="button"
                  >
                    {label}
                  </button>
                );
              })}
            </span>
          </>
        ) : null}
        {state.preset === "monthly" ? (
          <>
            {timeSelects}
            <span className="text-muted-foreground">on day</span>
            {numSelect(state.dom, (n) => update({ dom: n }), 1, 31, String)}
            <span className="text-muted-foreground">of the month</span>
          </>
        ) : null}
        {state.preset === "custom" ? (
          <div className="flex flex-wrap items-end gap-1.5">
            {state.rawFields.map((f, i) => (
              <label className="flex flex-col gap-0.5" key={RAW_LABELS[i]}>
                <span className="text-[9px] text-muted-foreground uppercase">{RAW_LABELS[i]}</span>
                <input
                  className="h-7 w-16 rounded-md border border-border bg-background px-1.5 text-center font-mono text-xs outline-none focus:border-foreground/30"
                  onChange={(e) => setRawField(i, e.target.value)}
                  value={f}
                />
              </label>
            ))}
          </div>
        ) : null}
      </div>

      <div className="space-y-2 border-border border-t px-3 py-2.5">
        <div className="flex items-center gap-2">
          <code className="font-mono text-sm">{cron}</code>
          <button
            className="flex items-center gap-1 rounded border border-border px-1.5 py-0.5 text-[11px] text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
            onClick={copy}
            type="button"
          >
            {copied ? <Check className="size-3 text-emerald-500" /> : <Copy className="size-3" />}
            {copied ? "Copied" : "Copy"}
          </button>
        </div>
        {"error" in parsed ? (
          <p className="font-mono text-[11px] text-red-500">{parsed.error}</p>
        ) : (
          <>
            <p className="text-muted-foreground">{describe(parsed.sets)}</p>
            <div className="flex flex-wrap items-center gap-x-2 gap-y-1 text-[11px] text-muted-foreground">
              <span className="font-medium text-foreground">Next:</span>
              {mounted && runs.length > 0 ? (
                runs.map((r) => (
                  <span className="font-mono" key={r.getTime()}>
                    {fmtRun(r)}
                  </span>
                ))
              ) : (
                <span>—</span>
              )}
            </div>
          </>
        )}
      </div>
    </div>
  );
}

export default CronBuilder;
```

## Field Mapper

An ETL field mapper: map source fields to a target schema with per-field transform selects, type-mismatch warnings, required validation, name-based auto-map and a mapping summary.

- Page: https://rocket.gozturk.dev/field-mapper
- Install: `npx shadcn@latest add https://rocket.gozturk.dev/r/field-mapper.json`
- Source: `components/ui/field-mapper.tsx`

```tsx
"use client";

import { ArrowRight, Wand2, X } from "lucide-react";
import { useState } from "react";
import { cn } from "@/lib/utils";

export interface MapperField {
  name: string;
  type: string;
  required?: boolean;
}

export interface FieldMapping {
  target: string;
  source: string | null;
  transform: string | null;
}

export interface FieldMapperProps {
  sourceFields: MapperField[];
  targetFields: MapperField[];
  defaultMapping?: Record<string, string>;
  onChange?: (mapping: FieldMapping[]) => void;
  className?: string;
}

interface Entry {
  source: string | null;
  transform: string | null;
}

const TRANSFORMS = ["cast", "trim", "lowercase", "uppercase"];

function normalize(name: string): string {
  return name.toLowerCase().replace(/[^a-z0-9]/g, "");
}

function autoMatch(target: string, sourceFields: MapperField[]): string | null {
  const t = normalize(target);
  for (const s of sourceFields) {
    if (normalize(s.name) === t) return s.name;
  }
  for (const s of sourceFields) {
    const n = normalize(s.name);
    if (Math.min(n.length, t.length) >= 3 && (n.includes(t) || t.includes(n))) return s.name;
  }
  return null;
}

function isMismatch(
  sourceType: string | undefined,
  targetType: string,
  transform: string | null,
): boolean {
  return sourceType !== undefined && sourceType !== targetType && transform !== "cast";
}

function seed(
  defaultMapping: Record<string, string> | undefined,
  targetFields: MapperField[],
): Map<string, Entry> {
  const m = new Map<string, Entry>();
  for (const t of targetFields) {
    m.set(t.name, { source: defaultMapping?.[t.name] ?? null, transform: null });
  }
  return m;
}

export function FieldMapper({
  sourceFields,
  targetFields,
  defaultMapping,
  onChange,
  className,
}: FieldMapperProps) {
  const [mapping, setMapping] = useState<Map<string, Entry>>(() =>
    seed(defaultMapping, targetFields),
  );

  const entryOf = (name: string): Entry => mapping.get(name) ?? { source: null, transform: null };

  const commit = (next: Map<string, Entry>) => {
    setMapping(next);
    onChange?.(
      targetFields.map((t) => {
        const e = next.get(t.name) ?? { source: null, transform: null };
        return { source: e.source, target: t.name, transform: e.transform };
      }),
    );
  };

  const setSource = (target: string, source: string | null) => {
    const next = new Map(mapping);
    const cur = entryOf(target);
    next.set(target, { source, transform: source === null ? null : cur.transform });
    commit(next);
  };

  const setTransform = (target: string, transform: string | null) => {
    const next = new Map(mapping);
    next.set(target, { ...entryOf(target), transform });
    commit(next);
  };

  const autoMap = () => {
    const next = new Map(mapping);
    for (const t of targetFields) {
      const cur = next.get(t.name) ?? { source: null, transform: null };
      if (cur.source !== null) continue;
      const match = autoMatch(t.name, sourceFields);
      if (match) next.set(t.name, { source: match, transform: null });
    }
    commit(next);
  };

  const clear = () => commit(seed(undefined, targetFields));

  if (targetFields.length === 0) {
    return (
      <div
        className={cn(
          "rounded-lg border border-border bg-card p-4 text-center text-muted-foreground text-xs italic",
          className,
        )}
      >
        No target fields
      </div>
    );
  }

  const sourceByName = new Map(sourceFields.map((s) => [s.name, s]));
  let mapped = 0;
  let requiredUnmapped = 0;
  for (const t of targetFields) {
    const e = entryOf(t.name);
    if (e.source !== null) mapped++;
    else if (t.required) requiredUnmapped++;
  }

  return (
    <div
      className={cn("overflow-hidden rounded-lg border border-border bg-card text-xs", className)}
    >
      <div className="flex flex-wrap items-center justify-between gap-2 border-border border-b px-3 py-2 font-sans">
        <span className="text-[11px]">
          <span className="font-medium">
            {mapped} / {targetFields.length} mapped
          </span>
          {requiredUnmapped > 0 ? (
            <span className="ml-1.5 text-red-500">· {requiredUnmapped} required unmapped</span>
          ) : null}
        </span>
        <div className="flex items-center gap-1.5">
          <button
            className="flex items-center gap-1 rounded-md border border-border px-2 py-1 text-[11px] text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
            onClick={autoMap}
            type="button"
          >
            <Wand2 className="size-3" />
            Auto-map
          </button>
          <button
            className="flex items-center gap-1 rounded-md border border-border px-2 py-1 text-[11px] text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
            onClick={clear}
            type="button"
          >
            <X className="size-3" />
            Clear
          </button>
        </div>
      </div>

      <div className="divide-y divide-border/60">
        {targetFields.map((t) => {
          const e = entryOf(t.name);
          const src = e.source !== null ? sourceByName.get(e.source) : undefined;
          const mismatch = isMismatch(src?.type, t.type, e.transform);
          const reqEmpty = Boolean(t.required) && e.source === null;
          return (
            <div
              className={cn(
                "flex flex-wrap items-center gap-2 border-l-2 px-3 py-2",
                reqEmpty ? "border-l-red-500/60" : "border-l-transparent",
              )}
              key={t.name}
            >
              <span className="flex w-44 shrink-0 items-baseline gap-1">
                <span className="truncate font-medium font-mono">{t.name}</span>
                {t.required ? <span className="text-red-500">*</span> : null}
                <span className="font-mono text-[10px] text-muted-foreground">{t.type}</span>
              </span>
              <ArrowRight
                className={cn(
                  "size-3.5 shrink-0",
                  e.source !== null ? "text-foreground" : "text-muted-foreground/40",
                )}
              />
              <select
                aria-label={`Source for ${t.name}`}
                className="h-7 rounded-md border border-border bg-background px-1.5 font-mono text-xs outline-none focus:border-foreground/30"
                onChange={(ev) =>
                  setSource(t.name, ev.target.value === "" ? null : ev.target.value)
                }
                value={e.source ?? ""}
              >
                <option value="">—</option>
                {sourceFields.map((s) => (
                  <option key={s.name} value={s.name}>
                    {s.name} ({s.type})
                  </option>
                ))}
              </select>
              <select
                aria-label={`Transform for ${t.name}`}
                className="h-7 rounded-md border border-border bg-background px-1.5 text-xs outline-none focus:border-foreground/30 disabled:opacity-40"
                disabled={e.source === null}
                onChange={(ev) =>
                  setTransform(t.name, ev.target.value === "" ? null : ev.target.value)
                }
                value={e.transform ?? ""}
              >
                <option value="">no transform</option>
                {TRANSFORMS.map((tr) => (
                  <option key={tr} value={tr}>
                    {tr}
                  </option>
                ))}
              </select>
              {mismatch ? (
                <span className="rounded bg-amber-500/15 px-1 py-px font-medium text-[10px] text-amber-500">
                  type mismatch
                </span>
              ) : null}
            </div>
          );
        })}
      </div>
    </div>
  );
}

export default FieldMapper;
```

## Routing Rules

An ordered, first-match-wins alert routing rules editor: per-rule severity chips, service pattern, channel, enable toggle, reorder/remove/add — plus a live dry-run tester that highlights the matching rule.

- Page: https://rocket.gozturk.dev/routing-rules
- Install: `npx shadcn@latest add https://rocket.gozturk.dev/r/routing-rules.json`
- Source: `components/ui/routing-rules.tsx`

```tsx
"use client";

import { ChevronDown, ChevronUp, Plus, Trash2 } from "lucide-react";
import { useRef, useState } from "react";
import { cn } from "@/lib/utils";

export type Severity = "critical" | "warning" | "info";

export interface RoutingRule {
  id: string;
  name: string;
  severities: Severity[];
  servicePattern: string;
  channel: string;
  enabled: boolean;
}

export interface RoutingRulesProps {
  rules: RoutingRule[];
  channels: string[];
  onChange?: (rules: RoutingRule[]) => void;
  className?: string;
}

const SEVERITIES: Severity[] = ["critical", "warning", "info"];

const SEVERITY_COLOR: Record<Severity, string> = {
  critical: "#ef4444",
  info: "#3b82f6",
  warning: "#f59e0b",
};

function matchRule(rule: RoutingRule, severity: Severity, service: string): boolean {
  if (!rule.enabled) return false;
  if (rule.severities.length > 0 && !rule.severities.includes(severity)) return false;
  const pattern = rule.servicePattern.trim().toLowerCase();
  if (pattern !== "" && !service.toLowerCase().includes(pattern)) return false;
  return true;
}

function firstMatch(rules: RoutingRule[], severity: Severity, service: string): RoutingRule | null {
  for (const rule of rules) {
    if (matchRule(rule, severity, service)) return rule;
  }
  return null;
}

export function RoutingRules({
  rules: initialRules,
  channels,
  onChange,
  className,
}: RoutingRulesProps) {
  const [rules, setRules] = useState<RoutingRule[]>(initialRules);
  const [testSeverity, setTestSeverity] = useState<Severity>("critical");
  const [testService, setTestService] = useState("");
  const idRef = useRef(0);

  const commit = (next: RoutingRule[]) => {
    setRules(next);
    onChange?.(next);
  };

  const updateRule = (id: string, patch: Partial<RoutingRule>) =>
    commit(rules.map((r) => (r.id === id ? { ...r, ...patch } : r)));

  const toggleSeverity = (id: string, sev: Severity) =>
    commit(
      rules.map((r) => {
        if (r.id !== id) return r;
        const severities = r.severities.includes(sev)
          ? r.severities.filter((s) => s !== sev)
          : [...r.severities, sev];
        return { ...r, severities };
      }),
    );

  const move = (id: string, dir: -1 | 1) => {
    const idx = rules.findIndex((r) => r.id === id);
    const to = idx + dir;
    if (idx === -1 || to < 0 || to >= rules.length) return;
    const next = [...rules];
    const [item] = next.splice(idx, 1);
    next.splice(to, 0, item);
    commit(next);
  };

  const removeRule = (id: string) => commit(rules.filter((r) => r.id !== id));

  const addRule = () => {
    idRef.current += 1;
    commit([
      ...rules,
      {
        channel: channels[0] ?? "",
        enabled: true,
        id: `new-${idRef.current}`,
        name: "New rule",
        servicePattern: "",
        severities: [],
      },
    ]);
  };

  const matched = firstMatch(rules, testSeverity, testService);

  return (
    <div
      className={cn("overflow-hidden rounded-lg border border-border bg-card text-xs", className)}
    >
      <div className="flex flex-wrap items-center justify-between gap-2 border-border border-b px-3 py-2 font-sans">
        <span className="text-[11px]">
          <span className="font-medium">{rules.length} rules</span>
          <span className="ml-1.5 text-muted-foreground">· first match wins</span>
        </span>
        <button
          className="flex items-center gap-1 rounded-md border border-border px-2 py-1 text-[11px] text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
          onClick={addRule}
          type="button"
        >
          <Plus className="size-3" />
          Add rule
        </button>
      </div>

      {rules.length === 0 ? (
        <p className="px-3 py-6 text-center text-muted-foreground italic">No rules — add one</p>
      ) : (
        <div className="divide-y divide-border/60">
          {rules.map((rule, i) => {
            const isMatch = matched?.id === rule.id;
            return (
              <div
                className={cn(
                  "flex flex-wrap items-center gap-2 px-3 py-2 transition-colors",
                  !rule.enabled && "opacity-50",
                  isMatch && "bg-emerald-500/5 ring-1 ring-emerald-500/50 ring-inset",
                )}
                key={rule.id}
              >
                <span className="w-4 shrink-0 font-mono text-[10px] text-muted-foreground">
                  {i + 1}
                </span>
                <input
                  aria-label={`Name for rule ${i + 1}`}
                  className="h-7 w-28 rounded-md border border-border bg-background px-1.5 text-xs outline-none focus:border-foreground/30"
                  onChange={(e) => updateRule(rule.id, { name: e.target.value })}
                  value={rule.name}
                />
                <span className="flex items-center gap-1">
                  {SEVERITIES.map((sev) => {
                    const on = rule.severities.includes(sev);
                    return (
                      <button
                        className={cn(
                          "rounded-full border px-1.5 py-0.5 text-[10px] transition-colors",
                          on
                            ? "border-current font-medium"
                            : "border-border text-muted-foreground hover:text-foreground",
                        )}
                        key={sev}
                        onClick={() => toggleSeverity(rule.id, sev)}
                        style={on ? { color: SEVERITY_COLOR[sev] } : undefined}
                        type="button"
                      >
                        {sev}
                      </button>
                    );
                  })}
                </span>
                <input
                  aria-label={`Service pattern for rule ${i + 1}`}
                  className="h-7 w-28 rounded-md border border-border bg-background px-1.5 font-mono text-xs outline-none focus:border-foreground/30"
                  onChange={(e) => updateRule(rule.id, { servicePattern: e.target.value })}
                  placeholder="any service"
                  value={rule.servicePattern}
                />
                <select
                  aria-label={`Channel for rule ${i + 1}`}
                  className="h-7 rounded-md border border-border bg-background px-1.5 font-mono text-xs outline-none focus:border-foreground/30"
                  onChange={(e) => updateRule(rule.id, { channel: e.target.value })}
                  value={rule.channel}
                >
                  {channels.map((c) => (
                    <option key={c} value={c}>
                      {c}
                    </option>
                  ))}
                </select>
                <button
                  className={cn(
                    "rounded-full border px-1.5 py-0.5 text-[10px] transition-colors",
                    rule.enabled
                      ? "border-emerald-500/50 font-medium text-emerald-500"
                      : "border-border text-muted-foreground hover:text-foreground",
                  )}
                  onClick={() => updateRule(rule.id, { enabled: !rule.enabled })}
                  type="button"
                >
                  {rule.enabled ? "on" : "off"}
                </button>
                <span className="ml-auto flex shrink-0 items-center gap-0.5">
                  <button
                    aria-label={`Move rule ${i + 1} up`}
                    className="rounded p-1 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:pointer-events-none disabled:opacity-30"
                    disabled={i === 0}
                    onClick={() => move(rule.id, -1)}
                    type="button"
                  >
                    <ChevronUp className="size-3.5" />
                  </button>
                  <button
                    aria-label={`Move rule ${i + 1} down`}
                    className="rounded p-1 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:pointer-events-none disabled:opacity-30"
                    disabled={i === rules.length - 1}
                    onClick={() => move(rule.id, 1)}
                    type="button"
                  >
                    <ChevronDown className="size-3.5" />
                  </button>
                  <button
                    aria-label={`Delete rule ${i + 1}`}
                    className="rounded p-1 text-muted-foreground transition-colors hover:bg-muted hover:text-red-500"
                    onClick={() => removeRule(rule.id)}
                    type="button"
                  >
                    <Trash2 className="size-3.5" />
                  </button>
                </span>
              </div>
            );
          })}
        </div>
      )}

      <div className="space-y-2 border-border border-t bg-muted/20 px-3 py-2.5 font-sans">
        <div className="flex flex-wrap items-center gap-2">
          <span className="font-medium text-[11px]">Test an alert</span>
          <select
            aria-label="Test severity"
            className="h-7 rounded-md border border-border bg-background px-1.5 text-xs outline-none focus:border-foreground/30"
            onChange={(e) => setTestSeverity(e.target.value as Severity)}
            value={testSeverity}
          >
            {SEVERITIES.map((sev) => (
              <option key={sev} value={sev}>
                {sev}
              </option>
            ))}
          </select>
          <input
            aria-label="Test service"
            className="h-7 w-36 rounded-md border border-border bg-background px-1.5 font-mono text-xs outline-none focus:border-foreground/30"
            onChange={(e) => setTestService(e.target.value)}
            placeholder="service name"
            value={testService}
          />
        </div>
        <p className="text-[11px]">
          {matched ? (
            <span className="text-emerald-500">
              → routes to <span className="font-medium font-mono">{matched.channel}</span> via “
              {matched.name}”
            </span>
          ) : (
            <span className="text-red-400">no rule matches — alert dropped</span>
          )}
        </p>
      </div>
    </div>
  );
}

export default RoutingRules;
```

## JSON Path Picker

A JSON path picker: click any node in a collapsible JSON tree to build a live JSONPath expression with breadcrumb navigation, a value preview with type info, and copy.

- Page: https://rocket.gozturk.dev/json-path-picker
- Install: `npx shadcn@latest add https://rocket.gozturk.dev/r/json-path-picker.json`
- Source: `components/ui/json-path-picker.tsx`

```tsx
"use client";

import { Check, ChevronDown, ChevronRight, Copy } from "lucide-react";
import { useState } from "react";
import { cn } from "@/lib/utils";

export interface JsonPathPickerProps {
  data: unknown;
  onSelect?: (path: string) => void;
  className?: string;
}

type Segment = string | number;

const IDENT_RE = /^[A-Za-z_$][A-Za-z0-9_$]*$/;

function keyOf(segs: Segment[]): string {
  return JSON.stringify(segs);
}

function formatPath(segs: Segment[]): string {
  let out = "$";
  for (const s of segs) {
    if (typeof s === "number") out += `[${s}]`;
    else if (IDENT_RE.test(s)) out += `.${s}`;
    else out += `["${s.replace(/"/g, '\\"')}"]`;
  }
  return out;
}

function isContainer(v: unknown): v is Record<string, unknown> | unknown[] {
  return typeof v === "object" && v !== null;
}

function valueAt(data: unknown, segs: Segment[]): unknown {
  let cur: unknown = data;
  for (const s of segs) {
    if (!isContainer(cur)) return undefined;
    cur = Array.isArray(cur) ? cur[s as number] : (cur as Record<string, unknown>)[s as string];
  }
  return cur;
}

function typeLabel(v: unknown): string {
  if (v === undefined) return "undefined";
  if (v === null) return "null";
  if (Array.isArray(v)) return `array · ${v.length} item${v.length === 1 ? "" : "s"}`;
  if (typeof v === "object") {
    const n = Object.keys(v as object).length;
    return `object · ${n} key${n === 1 ? "" : "s"}`;
  }
  return typeof v;
}

function previewOf(v: unknown): string {
  if (v === undefined) return "—";
  const text = JSON.stringify(v, null, 2) ?? "undefined";
  const lines = text.split("\n");
  return lines.length > 10 ? `${lines.slice(0, 10).join("\n")}\n…` : text;
}

function primitiveClass(v: unknown): string {
  if (typeof v === "string") return "text-emerald-400";
  if (typeof v === "number") return "text-amber-400";
  if (typeof v === "boolean") return "text-purple-400";
  return "text-muted-foreground";
}

function primitiveText(v: unknown): string {
  return typeof v === "string" ? `"${v}"` : String(v);
}

interface TreeNodeProps {
  value: unknown;
  segs: Segment[];
  label: string;
  depth: number;
  expanded: Set<string>;
  selectedKey: string;
  onToggle: (k: string) => void;
  onPick: (segs: Segment[]) => void;
}

function TreeNode({
  value,
  segs,
  label,
  depth,
  expanded,
  selectedKey,
  onToggle,
  onPick,
}: TreeNodeProps) {
  const k = keyOf(segs);
  const isSel = selectedKey === k;
  const container = isContainer(value);
  const isOpen = container && expanded.has(k);
  const entries: [Segment, unknown][] = container
    ? Array.isArray(value)
      ? value.map((v, i) => [i, v] as [Segment, unknown])
      : Object.entries(value).map(([key, v]) => [key, v] as [Segment, unknown])
    : [];
  const summary = container
    ? Array.isArray(value)
      ? `[…] ${value.length} item${value.length === 1 ? "" : "s"}`
      : `{…} ${Object.keys(value).length} key${Object.keys(value).length === 1 ? "" : "s"}`
    : null;

  return (
    <div>
      <div
        className={cn(
          "flex items-center gap-1 rounded-sm py-0.5 pr-2",
          isSel && "bg-muted ring-1 ring-foreground/30 ring-inset",
        )}
        style={{ paddingLeft: depth * 14 + 4 }}
      >
        {container ? (
          <button
            aria-label={isOpen ? `Collapse ${label}` : `Expand ${label}`}
            className="shrink-0 rounded text-muted-foreground hover:text-foreground"
            onClick={() => onToggle(k)}
            type="button"
          >
            {isOpen ? <ChevronDown className="size-3" /> : <ChevronRight className="size-3" />}
          </button>
        ) : (
          <span className="w-3 shrink-0" />
        )}
        <button
          className="flex min-w-0 flex-1 items-center gap-1.5 text-left"
          onClick={() => onPick(segs)}
          type="button"
        >
          <span className="shrink-0 text-blue-400">{label}</span>
          {container ? (
            isOpen ? null : (
              <span className="truncate text-[10px] text-muted-foreground">{summary}</span>
            )
          ) : (
            <span className={cn("truncate", primitiveClass(value))}>{primitiveText(value)}</span>
          )}
        </button>
      </div>
      {container && isOpen
        ? entries.map(([seg, child]) => (
            <TreeNode
              depth={depth + 1}
              expanded={expanded}
              key={String(seg)}
              label={typeof seg === "number" ? `[${seg}]` : seg}
              onPick={onPick}
              onToggle={onToggle}
              segs={[...segs, seg]}
              selectedKey={selectedKey}
              value={child}
            />
          ))
        : null}
    </div>
  );
}

export function JsonPathPicker({ data, onSelect, className }: JsonPathPickerProps) {
  const [selected, setSelected] = useState<Segment[]>([]);
  const [expanded, setExpanded] = useState<Set<string>>(() => new Set([keyOf([])]));
  const [copied, setCopied] = useState(false);

  const pick = (segs: Segment[]) => {
    setSelected(segs);
    setExpanded((prev) => {
      const next = new Set(prev);
      for (let i = 0; i <= segs.length; i++) {
        next.add(keyOf(segs.slice(0, i)));
      }
      return next;
    });
    onSelect?.(formatPath(segs));
  };

  const toggle = (k: string) =>
    setExpanded((prev) => {
      const next = new Set(prev);
      if (next.has(k)) next.delete(k);
      else next.add(k);
      return next;
    });

  const copy = () => {
    navigator.clipboard?.writeText(formatPath(selected));
    setCopied(true);
    setTimeout(() => setCopied(false), 1200);
  };

  const value = valueAt(data, selected);
  const path = formatPath(selected);
  const crumbs: { label: string; segs: Segment[] }[] = [{ label: "$", segs: [] }];
  selected.forEach((s, i) => {
    crumbs.push({
      label: typeof s === "number" ? `[${s}]` : String(s),
      segs: selected.slice(0, i + 1),
    });
  });

  return (
    <div
      className={cn("overflow-hidden rounded-lg border border-border bg-card text-xs", className)}
    >
      <div className="max-h-64 overflow-auto p-2 font-mono">
        <TreeNode
          depth={0}
          expanded={expanded}
          label="$"
          onPick={pick}
          onToggle={toggle}
          segs={[]}
          selectedKey={keyOf(selected)}
          value={data}
        />
      </div>

      <div className="space-y-2 border-border border-t px-3 py-2.5">
        <div className="flex flex-wrap items-center gap-0.5 font-sans text-[11px]">
          {crumbs.map((c, i) => (
            <span className="flex items-center gap-0.5" key={keyOf(c.segs)}>
              {i > 0 ? <span className="text-muted-foreground">›</span> : null}
              <button
                className={cn(
                  "rounded px-1 py-0.5 font-mono transition-colors",
                  i === crumbs.length - 1
                    ? "bg-muted font-medium text-foreground"
                    : "text-muted-foreground hover:text-foreground",
                )}
                onClick={() => pick(c.segs)}
                type="button"
              >
                {c.label}
              </button>
            </span>
          ))}
        </div>

        <div className="flex items-center gap-2">
          <code className="min-w-0 flex-1 truncate font-mono text-sm">{path}</code>
          <button
            className="flex shrink-0 items-center gap-1 rounded border border-border px-1.5 py-0.5 text-[11px] text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
            onClick={copy}
            type="button"
          >
            {copied ? <Check className="size-3 text-emerald-500" /> : <Copy className="size-3" />}
            {copied ? "Copied" : "Copy"}
          </button>
        </div>

        <div className="space-y-1">
          <span className="text-[10px] text-muted-foreground uppercase tracking-wide">
            {typeLabel(value)}
          </span>
          <pre className="max-h-40 overflow-auto whitespace-pre rounded bg-muted/30 p-2 font-mono text-[11px] leading-5">
            {previewOf(value)}
          </pre>
        </div>
      </div>
    </div>
  );
}

export default JsonPathPicker;
```

## Regex Tester

A regex / log-pattern tester: pattern input with flag chips and validation errors, per-line match indicators with highlighted match spans, and a capture-group table (indexed + named) for the selected line.

- Page: https://rocket.gozturk.dev/regex-tester
- Install: `npx shadcn@latest add https://rocket.gozturk.dev/r/regex-tester.json`
- Source: `components/ui/regex-tester.tsx`

```tsx
"use client";

import { Check, X } from "lucide-react";
import { useState } from "react";
import { cn } from "@/lib/utils";

export interface RegexTesterProps {
  initialPattern?: string;
  initialFlags?: string;
  initialSample?: string;
  className?: string;
}

type Flag = "i" | "g";

interface Span {
  start: number;
  end: number;
}

interface LineResult {
  line: string;
  spans: Span[];
  first: RegExpMatchArray | null;
}

interface GroupRow {
  label: string;
  value: string | undefined;
}

function compile(pattern: string, flagStr: string): { re: RegExp } | { error: string } | null {
  if (pattern === "") return null;
  try {
    return { re: new RegExp(pattern, flagStr) };
  } catch (e) {
    return { error: e instanceof Error ? e.message : String(e) };
  }
}

function testLine(line: string, reG: RegExp, globalMode: boolean): LineResult {
  const all = [...line.matchAll(reG)];
  const considered = globalMode ? all : all.slice(0, 1);
  const spans: Span[] = [];
  for (const m of considered) {
    const text = m[0] ?? "";
    if (text.length === 0) continue;
    const start = m.index ?? 0;
    spans.push({ end: start + text.length, start });
  }
  return { first: all[0] ?? null, line, spans };
}

function groupRows(m: RegExpMatchArray): GroupRow[] {
  const rows: GroupRow[] = [{ label: "#0", value: m[0] }];
  for (let i = 1; i < m.length; i++) {
    rows.push({ label: `#${i}`, value: m[i] });
  }
  if (m.groups) {
    for (const [name, value] of Object.entries(m.groups)) {
      rows.push({ label: name, value });
    }
  }
  return rows;
}

function Highlighted({ line, spans }: { line: string; spans: Span[] }) {
  if (spans.length === 0) return <>{line}</>;
  const parts: React.ReactNode[] = [];
  let pos = 0;
  spans.forEach((s, i) => {
    if (s.start > pos) {
      parts.push(line.slice(pos, s.start));
    }
    parts.push(
      <span className="rounded-sm bg-amber-500/30" key={i}>
        {line.slice(s.start, s.end)}
      </span>,
    );
    pos = s.end;
  });
  if (pos < line.length) {
    parts.push(line.slice(pos));
  }
  return <>{parts}</>;
}

export function RegexTester({
  initialPattern = "",
  initialFlags = "",
  initialSample = "",
  className,
}: RegexTesterProps) {
  const [pattern, setPattern] = useState(initialPattern);
  const [flags, setFlags] = useState<Set<Flag>>(
    () => new Set((["i", "g"] as Flag[]).filter((f) => initialFlags.includes(f))),
  );
  const [sample, setSample] = useState(initialSample);
  const [selectedLine, setSelectedLine] = useState<number | null>(null);

  const flagStr = (["i", "g"] as Flag[]).filter((f) => flags.has(f)).join("");
  const compiled = compile(pattern, flagStr);
  const lines = sample.split("\n");

  let results: LineResult[] | null = null;
  if (compiled && "re" in compiled) {
    const reG = new RegExp(pattern, flagStr.includes("g") ? flagStr : `${flagStr}g`);
    results = lines.map((line) => testLine(line, reG, flags.has("g")));
  }

  const matchCount = results ? results.filter((r) => r.first !== null).length : 0;
  const firstMatching = results ? results.findIndex((r) => r.first !== null) : -1;
  const sel =
    selectedLine !== null && selectedLine < lines.length
      ? selectedLine
      : firstMatching !== -1
        ? firstMatching
        : null;
  const selResult = sel !== null && results ? results[sel] : null;

  const toggleFlag = (f: Flag) =>
    setFlags((prev) => {
      const next = new Set(prev);
      if (next.has(f)) next.delete(f);
      else next.add(f);
      return next;
    });

  return (
    <div
      className={cn("overflow-hidden rounded-lg border border-border bg-card text-xs", className)}
    >
      <div className="space-y-1.5 border-border border-b px-3 py-2.5">
        <div className="flex items-center gap-1.5">
          <span className="font-mono text-muted-foreground">/</span>
          <input
            aria-label="Pattern"
            className="h-7 min-w-0 flex-1 rounded-md border border-border bg-background px-1.5 font-mono text-xs outline-none focus:border-foreground/30"
            onChange={(e) => setPattern(e.target.value)}
            placeholder="pattern"
            spellCheck={false}
            value={pattern}
          />
          <span className="font-mono text-muted-foreground">/</span>
          {(["i", "g"] as Flag[]).map((f) => (
            <button
              className={cn(
                "rounded border px-1.5 py-0.5 font-mono text-[11px] transition-colors",
                flags.has(f)
                  ? "border-foreground/30 bg-muted font-medium text-foreground"
                  : "border-border text-muted-foreground hover:text-foreground",
              )}
              key={f}
              onClick={() => toggleFlag(f)}
              type="button"
            >
              {f}
            </button>
          ))}
        </div>
        {compiled && "error" in compiled ? (
          <p className="font-mono text-[11px] text-red-500">{compiled.error}</p>
        ) : null}
      </div>

      <div className="border-border border-b p-2">
        <textarea
          aria-label="Sample text"
          className="h-24 w-full resize-y rounded-md border border-border bg-background p-2 font-mono text-xs leading-5 outline-none focus:border-foreground/30"
          onChange={(e) => setSample(e.target.value)}
          spellCheck={false}
          value={sample}
        />
      </div>

      <div className="px-3 py-1.5 text-[11px] text-muted-foreground">
        {compiled === null
          ? "Enter a pattern"
          : "error" in compiled
            ? "Fix the pattern to see matches"
            : `${matchCount} of ${lines.length} lines match`}
      </div>

      <div className="max-h-48 divide-y divide-border/60 overflow-auto border-border border-t font-mono">
        {lines.map((line, i) => {
          const r = results?.[i] ?? null;
          const matched = r?.first != null;
          const isSel = sel === i && results !== null;
          return (
            <button
              className={cn(
                "flex w-full items-start gap-1.5 px-3 py-1 text-left",
                results !== null && "hover:bg-muted/40",
                isSel && "bg-muted/60 ring-1 ring-foreground/30 ring-inset",
              )}
              disabled={results === null}
              key={i}
              onClick={() => setSelectedLine(i)}
              type="button"
            >
              {results !== null ? (
                matched ? (
                  <Check className="mt-0.5 size-3 shrink-0 text-emerald-500" />
                ) : (
                  <X className="mt-0.5 size-3 shrink-0 text-muted-foreground/50" />
                )
              ) : (
                <span className="w-3 shrink-0" />
              )}
              <span className="whitespace-pre-wrap break-all">
                {r ? <Highlighted line={line} spans={r.spans} /> : line}
              </span>
            </button>
          );
        })}
      </div>

      <div className="space-y-1 border-border border-t px-3 py-2.5">
        <span className="text-[10px] text-muted-foreground uppercase tracking-wide">
          {sel !== null ? `Capture groups · line ${sel + 1}` : "Capture groups"}
        </span>
        {selResult?.first ? (
          <div className="divide-y divide-border/50">
            {groupRows(selResult.first).map((g) => (
              <div className="flex gap-3 py-1 font-mono" key={g.label}>
                <span className="w-20 shrink-0 truncate text-muted-foreground">{g.label}</span>
                {g.value === undefined ? (
                  <span className="text-muted-foreground">—</span>
                ) : (
                  <span className="min-w-0 flex-1 break-all">{g.value}</span>
                )}
              </div>
            ))}
          </div>
        ) : (
          <p className="text-muted-foreground italic">
            {selResult ? "no match on this line" : "—"}
          </p>
        )}
      </div>
    </div>
  );
}

export default RegexTester;
```

## SLO Calculator

An SLO / error-budget calculator: target presets + custom input and a time window produce allowed downtime (total, per-day, per-week), a request-based error budget, and a burn tracker with status.

- Page: https://rocket.gozturk.dev/slo-calculator
- Install: `npx shadcn@latest add https://rocket.gozturk.dev/r/slo-calculator.json`
- Source: `components/ui/slo-calculator.tsx`

```tsx
"use client";

import { useState } from "react";
import { cn } from "@/lib/utils";

export interface SloCalculatorProps {
  defaultTarget?: number;
  defaultWindowDays?: number;
  className?: string;
}

const TARGET_PRESETS = [99, 99.5, 99.9, 99.95, 99.99];
const WINDOWS = [7, 30, 90] as const;
type WindowDays = (typeof WINDOWS)[number];

function fmtDuration(totalSeconds: number): string {
  if (totalSeconds <= 0) return "0s";
  if (totalSeconds < 1) return `${totalSeconds.toFixed(1)}s`;
  let rest = Math.floor(totalSeconds + 1e-6);
  const units = [
    { label: "d", secs: 86_400 },
    { label: "h", secs: 3600 },
    { label: "m", secs: 60 },
    { label: "s", secs: 1 },
  ];
  const parts: string[] = [];
  for (const u of units) {
    const v = Math.floor(rest / u.secs);
    if (v > 0) {
      parts.push(`${v}${u.label}`);
      rest -= v * u.secs;
    }
    if (parts.length === 2) break;
  }
  return parts.length > 0 ? parts.join(" ") : "0s";
}

function fmtCount(n: number): string {
  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;
  if (n >= 1000) return `${(n / 1000).toFixed(1)}k`;
  return String(n);
}

function parseNum(s: string): number {
  const n = Number.parseFloat(s);
  return Number.isFinite(n) && n > 0 ? n : 0;
}

export function SloCalculator({
  defaultTarget = 99.9,
  defaultWindowDays = 30,
  className,
}: SloCalculatorProps) {
  const [targetInput, setTargetInput] = useState(String(defaultTarget));
  const [windowDays, setWindowDays] = useState<WindowDays>(
    (WINDOWS as readonly number[]).includes(defaultWindowDays)
      ? (defaultWindowDays as WindowDays)
      : 30,
  );
  const [requestsPerDay, setRequestsPerDay] = useState("250000");
  const [downtimeMin, setDowntimeMin] = useState("0");

  const target = Number.parseFloat(targetInput);
  const valid = Number.isFinite(target) && target > 0 && target < 100;
  const frac = valid ? 1 - target / 100 : 0;

  const allowedSec = windowDays * 86_400 * frac;
  const perDaySec = 86_400 * frac;
  const perWeekSec = 604_800 * frac;
  const reqPerDay = parseNum(requestsPerDay);
  const allowedFailures = Math.round(reqPerDay * windowDays * frac);
  const downSec = parseNum(downtimeMin) * 60;
  const burnPct = allowedSec > 0 ? (downSec / allowedSec) * 100 : 0;
  const remainingSec = Math.max(0, allowedSec - downSec);
  const status =
    burnPct >= 100
      ? { color: "#ef4444", label: "budget exhausted" }
      : burnPct >= 75
        ? { color: "#f59e0b", label: "at risk" }
        : { color: "#10b981", label: "on track" };

  const chip = (on: boolean) =>
    cn(
      "rounded-full border px-2 py-0.5 font-mono text-[11px] transition-colors",
      on
        ? "border-foreground/30 bg-muted font-medium text-foreground"
        : "border-border text-muted-foreground hover:text-foreground",
    );

  return (
    <div className={cn("rounded-lg border border-border bg-card text-xs", className)}>
      <div className="space-y-2 border-border border-b px-3 py-2.5">
        <div className="flex flex-wrap items-center gap-1.5">
          <span className="w-12 text-muted-foreground">Target</span>
          {TARGET_PRESETS.map((p) => (
            <button
              className={chip(valid && target === p)}
              key={p}
              onClick={() => setTargetInput(String(p))}
              type="button"
            >
              {p}%
            </button>
          ))}
          <span className="flex items-center gap-1">
            <input
              aria-label="Target percentage"
              className={cn(
                "h-7 w-20 rounded-md border bg-background px-1.5 text-right font-mono text-xs outline-none focus:border-foreground/30",
                valid ? "border-border" : "border-red-500/60",
              )}
              onChange={(e) => setTargetInput(e.target.value)}
              value={targetInput}
            />
            <span className="text-muted-foreground">%</span>
          </span>
        </div>
        {valid ? null : (
          <p className="text-[11px] text-red-500">enter a target between 0 and 100</p>
        )}
        <div className="flex flex-wrap items-center gap-1.5">
          <span className="w-12 text-muted-foreground">Window</span>
          {WINDOWS.map((w) => (
            <button
              className={chip(windowDays === w)}
              key={w}
              onClick={() => setWindowDays(w)}
              type="button"
            >
              {w}d
            </button>
          ))}
        </div>
      </div>

      <div className="space-y-3 px-3 py-2.5">
        <div>
          <div className="text-[10px] text-muted-foreground uppercase tracking-wide">
            Allowed downtime
          </div>
          <div className="font-mono text-lg">
            {valid ? fmtDuration(allowedSec) : "—"}
            <span className="ml-1.5 font-sans text-[11px] text-muted-foreground">
              per {windowDays}d window
            </span>
          </div>
          <div className="mt-0.5 flex gap-4 font-mono text-[11px] text-muted-foreground">
            <span>per day {valid ? fmtDuration(perDaySec) : "—"}</span>
            <span>per week {valid ? fmtDuration(perWeekSec) : "—"}</span>
          </div>
        </div>

        <div className="flex flex-wrap items-center gap-2">
          <span className="text-muted-foreground">Requests per day</span>
          <input
            aria-label="Requests per day"
            className="h-7 w-24 rounded-md border border-border bg-background px-1.5 text-right font-mono text-xs outline-none focus:border-foreground/30"
            onChange={(e) => setRequestsPerDay(e.target.value)}
            value={requestsPerDay}
          />
          <span className="font-mono">
            {valid ? `≈ ${fmtCount(allowedFailures)} failed requests / ${windowDays}d` : "—"}
          </span>
        </div>

        <div className="space-y-1">
          <div className="flex flex-wrap items-center gap-2">
            <span className="text-muted-foreground">Downtime so far (min)</span>
            <input
              aria-label="Downtime so far in minutes"
              className="h-7 w-20 rounded-md border border-border bg-background px-1.5 text-right font-mono text-xs outline-none focus:border-foreground/30"
              onChange={(e) => setDowntimeMin(e.target.value)}
              value={downtimeMin}
            />
            {valid ? (
              <span
                className="rounded-full px-1.5 py-0.5 font-medium text-[10px]"
                style={{ background: `${status.color}1f`, color: status.color }}
              >
                {status.label}
              </span>
            ) : null}
          </div>
          {valid ? (
            <>
              <div className="h-1.5 w-full overflow-hidden rounded-full bg-muted">
                <div
                  className="h-full rounded-full transition-all"
                  style={{ background: status.color, width: `${Math.min(burnPct, 100)}%` }}
                />
              </div>
              <div className="font-mono text-[11px] text-muted-foreground">
                {burnPct.toFixed(1)}% used · {fmtDuration(remainingSec)} left
              </div>
            </>
          ) : null}
        </div>
      </div>
    </div>
  );
}

export default SloCalculator;
```

## Access Matrix

A roles × resources access-matrix editor: cells cycle none → read → write, row/column headers bulk-assign, with a live grant summary and per-role counts.

- Page: https://rocket.gozturk.dev/access-matrix
- Install: `npx shadcn@latest add https://rocket.gozturk.dev/r/access-matrix.json`
- Source: `components/ui/access-matrix.tsx`

```tsx
"use client";

import { Fragment, useState } from "react";
import { cn } from "@/lib/utils";

export type Permission = "none" | "read" | "write";

export interface AccessMatrixProps {
  roles: string[];
  resources: string[];
  defaultGrants?: Record<string, Permission>;
  onChange?: (grants: Record<string, Permission>) => void;
  className?: string;
}

const NEXT: Record<Permission, Permission> = {
  none: "read",
  read: "write",
  write: "none",
};

const PERM_META: Record<Permission, { label: string; color: string | null }> = {
  none: { color: null, label: "—" },
  read: { color: "#3b82f6", label: "R" },
  write: { color: "#10b981", label: "W" },
};

function keyOf(role: string, resource: string): string {
  return `${role}:${resource}`;
}

function bulkNext(values: Permission[]): Permission {
  const first = values[0] ?? "none";
  const uniform = values.every((v) => v === first);
  return uniform ? NEXT[first] : "read";
}

export function AccessMatrix({
  roles,
  resources,
  defaultGrants,
  onChange,
  className,
}: AccessMatrixProps) {
  const [grants, setGrants] = useState<Record<string, Permission>>(() => ({
    ...defaultGrants,
  }));

  const permOf = (role: string, resource: string): Permission =>
    grants[keyOf(role, resource)] ?? "none";

  const commit = (next: Record<string, Permission>) => {
    setGrants(next);
    onChange?.(next);
  };

  const cycleCell = (role: string, resource: string) => {
    const k = keyOf(role, resource);
    commit({ ...grants, [k]: NEXT[permOf(role, resource)] });
  };

  const bulkRole = (role: string) => {
    const target = bulkNext(resources.map((res) => permOf(role, res)));
    const next = { ...grants };
    for (const res of resources) {
      next[keyOf(role, res)] = target;
    }
    commit(next);
  };

  const bulkResource = (resource: string) => {
    const target = bulkNext(roles.map((role) => permOf(role, resource)));
    const next = { ...grants };
    for (const role of roles) {
      next[keyOf(role, resource)] = target;
    }
    commit(next);
  };

  if (roles.length === 0 || resources.length === 0) {
    return (
      <div
        className={cn(
          "rounded-lg border border-border bg-card p-4 text-center text-muted-foreground text-xs italic",
          className,
        )}
      >
        No roles or resources
      </div>
    );
  }

  let granted = 0;
  let writes = 0;
  for (const role of roles) {
    for (const res of resources) {
      const p = permOf(role, res);
      if (p !== "none") granted++;
      if (p === "write") writes++;
    }
  }
  const total = roles.length * resources.length;

  const countsFor = (role: string) => {
    let r = 0;
    let w = 0;
    for (const res of resources) {
      const p = permOf(role, res);
      if (p === "read") r++;
      if (p === "write") w++;
    }
    return `${r}R ${w}W`;
  };

  return (
    <div className={cn("rounded-lg border border-border bg-card text-xs", className)}>
      <div className="flex flex-wrap items-center justify-between gap-2 border-border border-b px-3 py-2 font-sans">
        <span className="text-[11px]">
          <span className="font-medium">
            {granted} of {total} granted
          </span>
          <span className="ml-1.5 text-muted-foreground">· {writes} write</span>
        </span>
        <span className="flex items-center gap-2 text-[10px] text-muted-foreground">
          <span>— none</span>
          <span style={{ color: PERM_META.read.color ?? undefined }}>R read</span>
          <span style={{ color: PERM_META.write.color ?? undefined }}>W write</span>
        </span>
      </div>

      <div className="overflow-x-auto p-2">
        <div
          className="grid gap-px rounded bg-border/60"
          style={{
            gridTemplateColumns: `max-content repeat(${roles.length}, minmax(64px, 1fr))`,
          }}
        >
          <div className="bg-card" />
          {roles.map((role) => (
            <button
              aria-label={`Set all for ${role}`}
              className="bg-card px-2 py-1.5 text-center font-medium font-sans transition-colors hover:bg-muted"
              key={role}
              onClick={() => bulkRole(role)}
              type="button"
            >
              {role}
            </button>
          ))}

          {resources.map((resource) => (
            <Fragment key={resource}>
              <button
                aria-label={`Set all for ${resource}`}
                className="bg-card px-2 py-1.5 text-left font-mono transition-colors hover:bg-muted"
                onClick={() => bulkResource(resource)}
                type="button"
              >
                {resource}
              </button>
              {roles.map((role) => {
                const p = permOf(role, resource);
                const meta = PERM_META[p];
                return (
                  <button
                    aria-label={`${role} on ${resource}: ${p}`}
                    className={cn(
                      "flex h-8 items-center justify-center font-medium font-mono transition-colors",
                      p === "none" ? "bg-card text-muted-foreground/50 hover:bg-muted" : "",
                    )}
                    key={role}
                    onClick={() => cycleCell(role, resource)}
                    style={
                      meta.color ? { background: `${meta.color}1f`, color: meta.color } : undefined
                    }
                    type="button"
                  >
                    {meta.label}
                  </button>
                );
              })}
            </Fragment>
          ))}

          <div className="bg-card" />
          {roles.map((role) => (
            <div
              className="bg-card px-2 py-1 text-center font-mono text-[10px] text-muted-foreground"
              key={role}
            >
              {countsFor(role)}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

export default AccessMatrix;
```

## Backoff Planner

A retry/backoff schedule planner: strategy (fixed/linear/exponential), base delay, multiplier, cap and retry count produce a deterministic attempt table with per-attempt delays, cap badges, cumulative wait and a worst-case total — with a full-jitter range mode.

- Page: https://rocket.gozturk.dev/backoff-planner
- Install: `npx shadcn@latest add https://rocket.gozturk.dev/r/backoff-planner.json`
- Source: `components/ui/backoff-planner.tsx`

```tsx
"use client";

import { useState } from "react";
import { cn } from "@/lib/utils";

export type Strategy = "fixed" | "linear" | "exponential";

export interface BackoffPlannerProps {
  defaultStrategy?: Strategy;
  defaultBaseMs?: number;
  defaultMaxRetries?: number;
  className?: string;
}

interface Attempt {
  n: number;
  delay: number;
  capped: boolean;
  cumulative: number;
}

const STRATEGIES: Strategy[] = ["fixed", "linear", "exponential"];

function clampNum(n: number, lo: number, hi: number): number {
  return Math.min(Math.max(n, lo), hi);
}

function fmtMs(ms: number): string {
  if (ms < 1000) return `${Math.round(ms)}ms`;
  const s = ms / 1000;
  if (s < 60) {
    return `${Math.round(s * 10) / 10}s`;
  }
  let rest = Math.floor(s + 1e-6);
  const units = [
    { label: "h", secs: 3600 },
    { label: "m", secs: 60 },
    { label: "s", secs: 1 },
  ];
  const parts: string[] = [];
  for (const u of units) {
    const v = Math.floor(rest / u.secs);
    if (v > 0) {
      parts.push(`${v}${u.label}`);
      rest -= v * u.secs;
    }
    if (parts.length === 2) break;
  }
  return parts.length > 0 ? parts.join(" ") : "0s";
}

function buildAttempts(
  strategy: Strategy,
  base: number,
  mult: number,
  cap: number,
  retries: number,
): Attempt[] {
  const out: Attempt[] = [];
  let cumulative = 0;
  for (let n = 1; n <= retries; n++) {
    const raw =
      strategy === "fixed" ? base : strategy === "linear" ? base * n : base * mult ** (n - 1);
    const delay = cap > 0 ? Math.min(raw, cap) : raw;
    cumulative += delay;
    out.push({ capped: cap > 0 && raw > cap, cumulative, delay, n });
  }
  return out;
}

export function BackoffPlanner({
  defaultStrategy = "exponential",
  defaultBaseMs = 1000,
  defaultMaxRetries = 6,
  className,
}: BackoffPlannerProps) {
  const [strategy, setStrategy] = useState<Strategy>(defaultStrategy);
  const [baseMs, setBaseMs] = useState(String(defaultBaseMs));
  const [multiplier, setMultiplier] = useState("2");
  const [capMs, setCapMs] = useState("30000");
  const [retries, setRetries] = useState(String(defaultMaxRetries));
  const [jitter, setJitter] = useState(false);

  const base = Number.parseFloat(baseMs);
  const baseValid = Number.isFinite(base) && base > 0;
  const multParsed = Number.parseFloat(multiplier);
  const mult = Number.isFinite(multParsed) && multParsed >= 1 ? multParsed : 2;
  const capParsed = Number.parseFloat(capMs);
  const cap = Number.isFinite(capParsed) && capParsed > 0 ? capParsed : 0;
  const retriesParsed = Number.parseFloat(retries);
  const retriesN = Number.isFinite(retriesParsed) ? clampNum(Math.round(retriesParsed), 1, 20) : 1;

  const attempts = baseValid ? buildAttempts(strategy, base, mult, cap, retriesN) : [];
  const total = attempts.length > 0 ? attempts[attempts.length - 1].cumulative : 0;

  const chip = (on: boolean) =>
    cn(
      "rounded-full border px-2 py-0.5 font-mono text-[11px] transition-colors",
      on
        ? "border-foreground/30 bg-muted font-medium text-foreground"
        : "border-border text-muted-foreground hover:text-foreground",
    );

  const numClass =
    "h-7 rounded-md border border-border bg-background px-1.5 text-right font-mono text-xs outline-none focus:border-foreground/30";

  return (
    <div className={cn("rounded-lg border border-border bg-card text-xs", className)}>
      <div className="space-y-2 border-border border-b px-3 py-2.5">
        <div className="flex flex-wrap items-center gap-1.5">
          {STRATEGIES.map((s) => (
            <button
              className={chip(strategy === s)}
              key={s}
              onClick={() => setStrategy(s)}
              type="button"
            >
              {s}
            </button>
          ))}
          <button
            className={cn(chip(jitter), "ml-auto")}
            onClick={() => setJitter((v) => !v)}
            type="button"
          >
            full jitter
          </button>
        </div>
        <div className="flex flex-wrap items-center gap-x-3 gap-y-1.5">
          <label className="flex items-center gap-1">
            <span className="text-muted-foreground">base</span>
            <input
              aria-label="Base delay in ms"
              className={cn(numClass, "w-20", baseValid ? "border-border" : "border-red-500/60")}
              onChange={(e) => setBaseMs(e.target.value)}
              value={baseMs}
            />
            <span className="text-muted-foreground">ms</span>
          </label>
          {strategy === "exponential" ? (
            <label className="flex items-center gap-1">
              <span className="text-muted-foreground">×</span>
              <input
                aria-label="Multiplier"
                className={cn(numClass, "w-12")}
                onChange={(e) => setMultiplier(e.target.value)}
                value={multiplier}
              />
            </label>
          ) : null}
          <label className="flex items-center gap-1">
            <span className="text-muted-foreground">cap</span>
            <input
              aria-label="Max delay cap in ms"
              className={cn(numClass, "w-20")}
              onChange={(e) => setCapMs(e.target.value)}
              value={capMs}
            />
            <span className="text-muted-foreground">ms · 0 = no cap</span>
          </label>
          <label className="flex items-center gap-1">
            <span className="text-muted-foreground">retries</span>
            <input
              aria-label="Max retries"
              className={cn(numClass, "w-12")}
              onChange={(e) => setRetries(e.target.value)}
              value={retries}
            />
          </label>
        </div>
        {baseValid ? null : <p className="text-[11px] text-red-500">enter a base delay &gt; 0</p>}
      </div>

      {baseValid ? (
        <>
          <div className="grid grid-cols-[2.5rem_1fr_1fr] gap-2 px-3 py-1.5 text-[10px] text-muted-foreground uppercase tracking-wide">
            <span>#</span>
            <span>delay</span>
            <span>total waited</span>
          </div>
          <div className="divide-y divide-border/60 font-mono">
            {attempts.map((a) => (
              <div
                className="grid grid-cols-[2.5rem_1fr_1fr] items-center gap-2 px-3 py-1"
                key={a.n}
              >
                <span className="text-muted-foreground">#{a.n}</span>
                <span className="flex items-center gap-1.5">
                  {jitter ? `0 – ${fmtMs(a.delay)}` : fmtMs(a.delay)}
                  {a.capped ? (
                    <span className="rounded bg-amber-500/15 px-1 py-px font-medium font-sans text-[10px] text-amber-500">
                      capped
                    </span>
                  ) : null}
                </span>
                <span>{fmtMs(a.cumulative)}</span>
              </div>
            ))}
          </div>
          <div className="border-border border-t px-3 py-2">
            total wait{jitter ? " (worst case)" : ""}:{" "}
            <span className="font-medium font-mono">{fmtMs(total)}</span>
            <span className="ml-1 text-muted-foreground">after {retriesN} retries</span>
          </div>
        </>
      ) : null}
    </div>
  );
}

export default BackoffPlanner;
```

## ID Inspector

A UUID/ULID inspector: paste an identifier to detect its type and version, decode the embedded timestamp (UUID v1/v7, ULID), and see a color-banded segment view (time / randomness / version bits) with a field breakdown.

- Page: https://rocket.gozturk.dev/id-inspector
- Install: `npx shadcn@latest add https://rocket.gozturk.dev/r/id-inspector.json`
- Source: `components/ui/id-inspector.tsx`

```tsx
"use client";

import { useState } from "react";
import { cn } from "@/lib/utils";

export type ParsedId =
  | {
      kind: "uuid";
      normalized: string;
      tsMs: number | null;
      variant: string;
      version: number;
    }
  | { kind: "ulid"; normalized: string; tsMs: number };

export interface IdInspectorProps {
  className?: string;
  defaultValue?: string;
}

const UUID_RE = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/;
const ULID_RE = /^[0-9A-HJKMNP-TV-Z]{26}$/;
const CROCKFORD = "0123456789ABCDEFGHJKMNPQRSTVWXYZ";
const GREGORIAN_OFFSET_100NS = BigInt("122192928000000000");

const COLOR_META = "#a855f7";
const COLOR_RANDOM = "#3b82f6";
const COLOR_TIME = "#f59e0b";
const COLOR_ULID = "#10b981";

const SAMPLES = [
  { label: "UUID v4", value: "f47ac10b-58cc-4372-a567-0e02b2c3d479" },
  { label: "UUID v7", value: "019bc1a3-0583-7abc-8def-0123456789ab" },
  { label: "ULID", value: "01ARZ3NDEKTSV4RRFFQ69G5FAV" },
];

const TS_DATE = new Intl.DateTimeFormat("en-US", {
  day: "numeric",
  month: "short",
  timeZone: "UTC",
  weekday: "short",
  year: "numeric",
});

function pad2(n: number): string {
  return String(n).padStart(2, "0");
}

function fmtTs(ms: number): string {
  const d = new Date(ms);
  const time = `${pad2(d.getUTCHours())}:${pad2(d.getUTCMinutes())}:${pad2(d.getUTCSeconds())}.${String(d.getUTCMilliseconds()).padStart(3, "0")}`;
  return `${TS_DATE.format(d)} · ${time} UTC`;
}

function variantLabel(c: string): string {
  if (c >= "0" && c <= "7") return "NCS (reserved)";
  if (c === "8" || c === "9" || c === "a" || c === "b") return "RFC 4122";
  if (c === "c" || c === "d") return "Microsoft (reserved)";
  return "future (reserved)";
}

function uuidTimestamp(normalized: string, version: number): number | null {
  if (version === 7) {
    return Number.parseInt(normalized.slice(0, 8) + normalized.slice(9, 13), 16);
  }
  if (version === 1) {
    const hex = normalized.slice(15, 18) + normalized.slice(9, 13) + normalized.slice(0, 8);
    const ts = BigInt(`0x${hex}`);
    if (ts < GREGORIAN_OFFSET_100NS) return null;
    return Number((ts - GREGORIAN_OFFSET_100NS) / BigInt(10000));
  }
  return null;
}

export function parseId(input: string): ParsedId | null {
  const trimmed = input.trim();
  const lower = trimmed.toLowerCase();
  if (UUID_RE.test(lower)) {
    const version = Number.parseInt(lower.charAt(14), 16);
    return {
      kind: "uuid",
      normalized: lower,
      tsMs: uuidTimestamp(lower, version),
      variant: variantLabel(lower.charAt(19)),
      version,
    };
  }
  const upper = trimmed.toUpperCase();
  if (ULID_RE.test(upper)) {
    let ms = 0;
    for (let i = 0; i < 10; i++) {
      ms = ms * 32 + CROCKFORD.indexOf(upper.charAt(i));
    }
    return { kind: "ulid", normalized: upper, tsMs: ms };
  }
  return null;
}

function charColor(i: number, parsed: ParsedId): string | null {
  if (parsed.kind === "ulid") return i < 10 ? COLOR_TIME : COLOR_RANDOM;
  if (parsed.normalized.charAt(i) === "-") return null;
  if (i === 14 || i === 19) return COLOR_META;
  const isTime =
    parsed.version === 7 ? i < 13 : parsed.version === 1 ? i < 13 || (i >= 15 && i <= 17) : false;
  return isTime ? COLOR_TIME : COLOR_RANDOM;
}

function randomHexChars(version: number): number {
  const timeChars = version === 7 ? 12 : version === 1 ? 15 : 0;
  return 32 - timeChars - 2;
}

export function IdInspector({ className, defaultValue = "" }: IdInspectorProps) {
  const [value, setValue] = useState(defaultValue);
  const [copied, setCopied] = useState(false);

  const trimmed = value.trim();
  const parsed = trimmed === "" ? null : parseId(trimmed);

  const handleCopy = () => {
    const text = parsed ? parsed.normalized : trimmed;
    if (text === "") return;
    navigator.clipboard.writeText(text).then(() => {
      setCopied(true);
      setTimeout(() => {
        setCopied(false);
      }, 1200);
    });
  };

  const badgeColor = parsed?.kind === "ulid" ? COLOR_ULID : COLOR_RANDOM;
  const badgeLabel =
    parsed === null ? "" : parsed.kind === "ulid" ? "ULID" : `UUID v${parsed.version}`;

  return (
    <div
      className={cn(
        "rounded-lg border border-border bg-card text-card-foreground text-xs",
        className,
      )}
    >
      <div className="flex flex-wrap items-center gap-2 border-border border-b p-3">
        <input
          aria-label="Identifier"
          className="h-7 min-w-0 flex-1 rounded-md border border-border bg-transparent px-2 font-mono text-xs outline-none focus:border-ring"
          onChange={(e) => {
            setValue(e.target.value);
          }}
          placeholder="paste a UUID or ULID"
          spellCheck={false}
          type="text"
          value={value}
        />
        <button
          className="h-7 rounded-md border border-border px-2 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
          onClick={handleCopy}
          type="button"
        >
          {copied ? "Copied" : "Copy"}
        </button>
        <div className="flex w-full items-center gap-1.5">
          <span className="text-muted-foreground">samples:</span>
          {SAMPLES.map((s) => (
            <button
              className="rounded-md border border-border px-1.5 py-0.5 font-mono text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
              key={s.label}
              onClick={() => {
                setValue(s.value);
              }}
              type="button"
            >
              {s.label}
            </button>
          ))}
        </div>
      </div>
      <div className="p-3">
        {trimmed === "" ? (
          <p className="text-muted-foreground">Paste an identifier or pick a sample</p>
        ) : parsed === null ? (
          <p style={{ color: "#ef4444" }}>unrecognized format — expected a UUID or ULID</p>
        ) : (
          <div className="flex flex-col gap-3">
            <div className="flex flex-wrap items-center gap-2">
              <span
                className="rounded px-1.5 py-0.5 font-medium font-mono"
                style={{
                  backgroundColor: `${badgeColor}1f`,
                  color: badgeColor,
                }}
              >
                {badgeLabel}
              </span>
              <span className="ml-auto flex items-center gap-2 text-[10px] text-muted-foreground">
                <span className="flex items-center gap-1">
                  <span className="size-2 rounded-[2px]" style={{ backgroundColor: COLOR_TIME }} />
                  time
                </span>
                <span className="flex items-center gap-1">
                  <span
                    className="size-2 rounded-[2px]"
                    style={{ backgroundColor: COLOR_RANDOM }}
                  />
                  randomness
                </span>
                {parsed.kind === "uuid" && (
                  <span className="flex items-center gap-1">
                    <span
                      className="size-2 rounded-[2px]"
                      style={{ backgroundColor: COLOR_META }}
                    />
                    version / variant
                  </span>
                )}
              </span>
            </div>
            <div className="break-all font-mono text-sm tracking-wide">
              {parsed.normalized.split("").map((ch, i) => {
                const color = charColor(i, parsed);
                return (
                  <span
                    className={color === null ? "text-muted-foreground" : undefined}
                    key={i}
                    style={color === null ? undefined : { color }}
                  >
                    {ch}
                  </span>
                );
              })}
            </div>
            <div className="grid grid-cols-[6rem_1fr] gap-y-1.5">
              <span className="text-muted-foreground">type</span>
              <span className="font-mono">{badgeLabel}</span>
              {parsed.kind === "uuid" && (
                <>
                  <span className="text-muted-foreground">variant</span>
                  <span className="font-mono">{parsed.variant}</span>
                </>
              )}
              <span className="text-muted-foreground">timestamp</span>
              {parsed.tsMs === null ? (
                <span className="text-muted-foreground">no embedded timestamp (random)</span>
              ) : (
                <span className="flex flex-wrap items-baseline gap-x-2 font-mono">
                  <span style={{ color: COLOR_TIME }}>{fmtTs(parsed.tsMs)}</span>
                  <span className="text-muted-foreground">unix {parsed.tsMs}</span>
                </span>
              )}
              <span className="text-muted-foreground">randomness</span>
              <span className="font-mono text-muted-foreground">
                {parsed.kind === "ulid"
                  ? "16 chars (80 bits)"
                  : `${randomHexChars(parsed.version)} hex chars`}
              </span>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

export default IdInspector;
```

## JWT Decoder

A JWT decoder: paste a token to see header and payload claim tables with time claims (exp/iat/nbf) rendered as UTC dates, a color-banded segment view, known-claim annotations and a deterministic lifetime summary — decode only, no signature verification.

- Page: https://rocket.gozturk.dev/jwt-decoder
- Install: `npx shadcn@latest add https://rocket.gozturk.dev/r/jwt-decoder.json`
- Source: `components/ui/jwt-decoder.tsx`

```tsx
"use client";

import { useState } from "react";
import { cn } from "@/lib/utils";

export type ParsedJwt =
  | {
      header: Record<string, unknown>;
      ok: true;
      parts: [string, string, string];
      payload: Record<string, unknown>;
    }
  | { error: string; ok: false };

export interface JwtDecoderProps {
  className?: string;
  defaultValue?: string;
}

const COLOR_ERROR = "#ef4444";
const COLOR_HEADER = "#3b82f6";
const COLOR_PAYLOAD = "#10b981";
const COLOR_SIG = "#a855f7";
const COLOR_TIME = "#f59e0b";

const KNOWN_CLAIMS: Record<string, string> = {
  aud: "audience",
  exp: "expires",
  iat: "issued at",
  iss: "issuer",
  jti: "JWT ID",
  nbf: "not before",
  sub: "subject",
};

const TIME_CLAIMS = new Set(["exp", "iat", "nbf"]);

const TS_DATE = new Intl.DateTimeFormat("en-US", {
  day: "numeric",
  month: "short",
  timeZone: "UTC",
  weekday: "short",
  year: "numeric",
});

function pad2(n: number): string {
  return String(n).padStart(2, "0");
}

function fmtTs(sec: number): string {
  const d = new Date(sec * 1000);
  const time = `${pad2(d.getUTCHours())}:${pad2(d.getUTCMinutes())}:${pad2(d.getUTCSeconds())}`;
  return `${TS_DATE.format(d)} · ${time} UTC`;
}

function fmtDur(seconds: number): string {
  const h = Math.floor(seconds / 3600);
  const m = Math.floor((seconds % 3600) / 60);
  const s = Math.floor(seconds % 60);
  if (h > 0) return m > 0 ? `${h}h ${m}m` : `${h}h`;
  if (m > 0) return s > 0 ? `${m}m ${s}s` : `${m}m`;
  return `${s}s`;
}

function b64url(json: string): string {
  return btoa(json).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
}

export const JWT_SAMPLE_TOKEN = [
  b64url(JSON.stringify({ alg: "HS256", typ: "JWT" })),
  b64url(
    JSON.stringify({
      aud: "api://default",
      exp: 1768483845,
      iat: 1768480245,
      iss: "https://auth.example.com",
      sub: "user_42",
    }),
  ),
  "c2lnbmF0dXJlLW5vdC12ZXJpZmllZA",
].join(".");

function decodeSegment(seg: string): Record<string, unknown> | null {
  const b64 = seg.replace(/-/g, "+").replace(/_/g, "/");
  const padded = b64 + "=".repeat((4 - (b64.length % 4)) % 4);
  try {
    const bytes = Uint8Array.from(atob(padded), (c) => c.charCodeAt(0));
    const parsed: unknown = JSON.parse(new TextDecoder().decode(bytes));
    if (typeof parsed === "object" && parsed !== null && !Array.isArray(parsed)) {
      return parsed as Record<string, unknown>;
    }
    return null;
  } catch {
    return null;
  }
}

export function parseJwt(input: string): ParsedJwt {
  const parts = input.trim().split(".");
  if (parts.length !== 3) {
    return {
      error: `expected 3 dot-separated segments, got ${parts.length}`,
      ok: false,
    };
  }
  const rawHeader = parts[0] ?? "";
  const rawPayload = parts[1] ?? "";
  const rawSig = parts[2] ?? "";
  const header = decodeSegment(rawHeader);
  if (header === null) {
    return { error: "invalid header (not base64url JSON)", ok: false };
  }
  const payload = decodeSegment(rawPayload);
  if (payload === null) {
    return { error: "invalid payload (not base64url JSON)", ok: false };
  }
  return {
    header,
    ok: true,
    parts: [rawHeader, rawPayload, rawSig],
    payload,
  };
}

function renderValue(key: string, value: unknown) {
  if (TIME_CLAIMS.has(key) && typeof value === "number") {
    return (
      <span className="flex flex-wrap items-baseline gap-x-2">
        <span style={{ color: COLOR_TIME }}>{fmtTs(value)}</span>
        <span className="text-muted-foreground">unix {value}</span>
      </span>
    );
  }
  if (typeof value === "string") return <span>{value}</span>;
  return <span>{JSON.stringify(value)}</span>;
}

function FieldRows({ annotate, fields }: { annotate: boolean; fields: Record<string, unknown> }) {
  return (
    <div className="grid grid-cols-[6rem_1fr] gap-y-1.5">
      {Object.entries(fields).map(([key, value]) => {
        const note = annotate ? KNOWN_CLAIMS[key] : undefined;
        return (
          <div className="contents" key={key}>
            <span className="text-muted-foreground">
              <span className="font-mono">{key}</span>
              {note !== undefined && <span className="ml-1 text-[10px]">({note})</span>}
            </span>
            <span className="break-all font-mono">{renderValue(key, value)}</span>
          </div>
        );
      })}
    </div>
  );
}

export function JwtDecoder({ className, defaultValue = "" }: JwtDecoderProps) {
  const [value, setValue] = useState(defaultValue);

  const trimmed = value.trim();
  const parsed = trimmed === "" ? null : parseJwt(trimmed);
  const decoded = parsed?.ok ? parsed : null;

  const alg = decoded === null ? undefined : decoded.header.alg;
  const exp = decoded === null ? undefined : decoded.payload.exp;
  const iat = decoded === null ? undefined : decoded.payload.iat;
  const lifetime =
    typeof exp === "number" && typeof iat === "number" && exp > iat ? fmtDur(exp - iat) : null;

  return (
    <div
      className={cn(
        "rounded-lg border border-border bg-card text-card-foreground text-xs",
        className,
      )}
    >
      <div className="flex flex-col gap-2 border-border border-b p-3">
        <textarea
          aria-label="JWT"
          className="min-h-0 w-full resize-y break-all rounded-md border border-border bg-transparent px-2 py-1.5 font-mono text-xs outline-none focus:border-ring"
          onChange={(e) => {
            setValue(e.target.value);
          }}
          placeholder="paste a JWT"
          rows={3}
          spellCheck={false}
          value={value}
        />
        <div className="flex items-center gap-1.5">
          <button
            className="rounded-md border border-border px-1.5 py-0.5 font-mono text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
            onClick={() => {
              setValue(JWT_SAMPLE_TOKEN);
            }}
            type="button"
          >
            load sample
          </button>
        </div>
      </div>
      <div className="p-3">
        {trimmed === "" ? (
          <p className="text-muted-foreground">Paste a JWT or load the sample</p>
        ) : parsed !== null && !parsed.ok ? (
          <p style={{ color: COLOR_ERROR }}>{parsed.error}</p>
        ) : (
          decoded !== null && (
            <div className="flex flex-col gap-3">
              <div className="flex flex-wrap items-center gap-2">
                <span
                  className="rounded px-1.5 py-0.5 font-medium font-mono"
                  style={{
                    backgroundColor: `${COLOR_HEADER}1f`,
                    color: COLOR_HEADER,
                  }}
                >
                  {typeof alg === "string" ? `JWT · ${alg}` : "JWT"}
                </span>
                <span className="ml-auto flex items-center gap-2 text-[10px] text-muted-foreground">
                  <span className="flex items-center gap-1">
                    <span
                      className="size-2 rounded-[2px]"
                      style={{ backgroundColor: COLOR_HEADER }}
                    />
                    header
                  </span>
                  <span className="flex items-center gap-1">
                    <span
                      className="size-2 rounded-[2px]"
                      style={{ backgroundColor: COLOR_PAYLOAD }}
                    />
                    payload
                  </span>
                  <span className="flex items-center gap-1">
                    <span className="size-2 rounded-[2px]" style={{ backgroundColor: COLOR_SIG }} />
                    signature
                  </span>
                </span>
              </div>
              <div className="break-all font-mono">
                <span style={{ color: COLOR_HEADER }}>{decoded.parts[0]}</span>
                <span className="text-muted-foreground">.</span>
                <span style={{ color: COLOR_PAYLOAD }}>{decoded.parts[1]}</span>
                <span className="text-muted-foreground">.</span>
                <span style={{ color: COLOR_SIG }}>{decoded.parts[2]}</span>
              </div>
              <div className="flex flex-col gap-1.5">
                <p className="font-medium text-[10px] text-muted-foreground uppercase tracking-wide">
                  header
                </p>
                <FieldRows annotate={false} fields={decoded.header} />
              </div>
              <div className="flex flex-col gap-1.5">
                <p className="font-medium text-[10px] text-muted-foreground uppercase tracking-wide">
                  claims
                </p>
                <FieldRows annotate={true} fields={decoded.payload} />
              </div>
              <div className="flex flex-col gap-1 border-border border-t pt-2">
                {lifetime !== null && (
                  <p>
                    <span className="text-muted-foreground">lifetime:</span>{" "}
                    <span className="font-medium font-mono">{lifetime}</span>
                  </p>
                )}
                <p className="text-[10px] text-muted-foreground">
                  signature not verified (decode only)
                </p>
              </div>
            </div>
          )
        )}
      </div>
    </div>
  );
}

export default JwtDecoder;
```

## Connection String Builder

A live database connection-string builder: pick an engine (Postgres/MySQL/Redis/MongoDB), fill host, port, database and credentials, and get a color-highlighted URI with URL-encoded credentials, masked password with show/hide, an SSL toggle and one-click copy.

- Page: https://rocket.gozturk.dev/connection-string-builder
- Install: `npx shadcn@latest add https://rocket.gozturk.dev/r/connection-string-builder.json`
- Source: `components/ui/connection-string-builder.tsx`

```tsx
"use client";

import { useState } from "react";
import { cn } from "@/lib/utils";

export type Engine = "mongodb" | "mysql" | "postgres" | "redis";

export interface ConnectionStringBuilderProps {
  className?: string;
  defaultEngine?: Engine;
}

export interface UriInput {
  database: string;
  host: string;
  password: string;
  port: string;
  ssl: boolean;
  user: string;
}

export interface UriParts {
  credentials: string;
  database: string;
  hostPort: string;
  params: string;
  scheme: string;
}

const COLOR_CREDS = "#a855f7";
const COLOR_DB = "#10b981";
const COLOR_HOST = "#f59e0b";
const COLOR_SCHEME = "#3b82f6";

const ENGINES: Engine[] = ["postgres", "mysql", "redis", "mongodb"];

interface EngineMeta {
  defaultPort: number;
  scheme: string;
  sslParam: string | null;
}

const ENGINE_META: Record<Engine, EngineMeta> = {
  mongodb: { defaultPort: 27017, scheme: "mongodb", sslParam: "tls=true" },
  mysql: { defaultPort: 3306, scheme: "mysql", sslParam: "ssl-mode=REQUIRED" },
  postgres: {
    defaultPort: 5432,
    scheme: "postgresql",
    sslParam: "sslmode=require",
  },
  redis: { defaultPort: 6379, scheme: "redis", sslParam: null },
};

export function buildUri(engine: Engine, input: UriInput): UriParts | null {
  const host = input.host.trim();
  if (host === "") return null;
  const meta = ENGINE_META[engine];
  const scheme = engine === "redis" && input.ssl ? "rediss://" : `${meta.scheme}://`;
  const portN = Number.parseInt(input.port, 10);
  const port = Number.isFinite(portN) && portN > 0 ? portN : meta.defaultPort;
  const user = input.user.trim();
  const credentials =
    user === ""
      ? ""
      : input.password === ""
        ? `${encodeURIComponent(user)}@`
        : `${encodeURIComponent(user)}:${encodeURIComponent(input.password)}@`;
  const db = input.database.trim();
  const database = db === "" ? "" : `/${encodeURIComponent(db)}`;
  const params = input.ssl && meta.sslParam !== null ? `?${meta.sslParam}` : "";
  return { credentials, database, hostPort: `${host}:${port}`, params, scheme };
}

export function maskCredentials(credentials: string, password: string): string {
  if (password === "" || credentials === "") return credentials;
  const idx = credentials.indexOf(":");
  if (idx === -1) return credentials;
  return `${credentials.slice(0, idx)}:••••@`;
}

function LegendDot({ color, label }: { color: string; label: string }) {
  return (
    <span className="flex items-center gap-1">
      <span className="size-2 rounded-[2px]" style={{ backgroundColor: color }} />
      {label}
    </span>
  );
}

export function ConnectionStringBuilder({
  className,
  defaultEngine = "postgres",
}: ConnectionStringBuilderProps) {
  const [engine, setEngine] = useState<Engine>(defaultEngine);
  const [host, setHost] = useState("localhost");
  const [port, setPort] = useState("");
  const [database, setDatabase] = useState("analytics");
  const [user, setUser] = useState("app");
  const [password, setPassword] = useState("s3cr3t@9");
  const [ssl, setSsl] = useState(false);
  const [show, setShow] = useState(false);
  const [copied, setCopied] = useState(false);

  const meta = ENGINE_META[engine];
  const parts = buildUri(engine, { database, host, password, port, ssl, user });
  const fullUri =
    parts === null
      ? ""
      : `${parts.scheme}${parts.credentials}${parts.hostPort}${parts.database}${parts.params}`;

  const handleCopy = () => {
    if (fullUri === "") return;
    navigator.clipboard.writeText(fullUri).then(() => {
      setCopied(true);
      setTimeout(() => {
        setCopied(false);
      }, 1200);
    });
  };

  const fields: {
    label: string;
    placeholder: string;
    set: (v: string) => void;
    type: string;
    value: string;
  }[] = [
    {
      label: "Host",
      placeholder: "localhost",
      set: setHost,
      type: "text",
      value: host,
    },
    {
      label: "Port",
      placeholder: String(meta.defaultPort),
      set: setPort,
      type: "text",
      value: port,
    },
    {
      label: "Database",
      placeholder: "database",
      set: setDatabase,
      type: "text",
      value: database,
    },
    {
      label: "User",
      placeholder: "user",
      set: setUser,
      type: "text",
      value: user,
    },
    {
      label: "Password",
      placeholder: "password",
      set: setPassword,
      type: show ? "text" : "password",
      value: password,
    },
  ];

  return (
    <div
      className={cn(
        "rounded-lg border border-border bg-card text-card-foreground text-xs",
        className,
      )}
    >
      <div className="flex flex-wrap items-center gap-1.5 border-border border-b p-3">
        {ENGINES.map((e) => (
          <button
            className={cn(
              "rounded-md border border-border px-1.5 py-0.5 font-mono transition-colors",
              e === engine
                ? "bg-muted text-foreground"
                : "text-muted-foreground hover:bg-muted hover:text-foreground",
            )}
            key={e}
            onClick={() => {
              setEngine(e);
            }}
            type="button"
          >
            {e}
          </button>
        ))}
        <button
          className={cn(
            "ml-auto rounded-md border border-border px-1.5 py-0.5 font-mono transition-colors",
            ssl
              ? "bg-muted text-foreground"
              : "text-muted-foreground hover:bg-muted hover:text-foreground",
          )}
          onClick={() => {
            setSsl((s) => !s);
          }}
          type="button"
        >
          ssl
        </button>
      </div>
      <div className="flex flex-wrap items-end gap-2 border-border border-b p-3">
        {fields.map((f) => (
          <label className="flex flex-col gap-1" key={f.label}>
            <span className="text-[10px] text-muted-foreground lowercase">{f.label}</span>
            <input
              aria-label={f.label}
              className="h-7 w-28 rounded-md border border-border bg-transparent px-2 font-mono text-xs outline-none focus:border-ring"
              onChange={(e) => {
                f.set(e.target.value);
              }}
              placeholder={f.placeholder}
              spellCheck={false}
              type={f.type}
              value={f.value}
            />
          </label>
        ))}
      </div>
      <div className="flex flex-col gap-2 p-3">
        <div className="flex items-center gap-2 text-[10px] text-muted-foreground">
          <span className="font-medium uppercase tracking-wide">connection string</span>
          <span className="ml-auto flex items-center gap-2">
            <LegendDot color={COLOR_SCHEME} label="scheme" />
            <LegendDot color={COLOR_CREDS} label="credentials" />
            <LegendDot color={COLOR_HOST} label="host" />
            <LegendDot color={COLOR_DB} label="database" />
          </span>
        </div>
        {parts === null ? (
          <p className="text-muted-foreground">enter a host</p>
        ) : (
          <div className="flex items-start gap-2">
            <p className="min-w-0 flex-1 break-all font-mono">
              <span style={{ color: COLOR_SCHEME }}>{parts.scheme}</span>
              <span style={{ color: COLOR_CREDS }}>
                {show ? parts.credentials : maskCredentials(parts.credentials, password)}
              </span>
              <span style={{ color: COLOR_HOST }}>{parts.hostPort}</span>
              <span style={{ color: COLOR_DB }}>{parts.database}</span>
              <span className="text-muted-foreground">{parts.params}</span>
            </p>
            <button
              className="rounded-md border border-border px-1.5 py-0.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
              onClick={() => {
                setShow((s) => !s);
              }}
              type="button"
            >
              {show ? "hide" : "show"}
            </button>
            <button
              className="rounded-md border border-border px-1.5 py-0.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
              onClick={handleCopy}
              type="button"
            >
              {copied ? "Copied" : "Copy"}
            </button>
          </div>
        )}
      </div>
    </div>
  );
}

export default ConnectionStringBuilder;
```

## Rate Limit Simulator

A deterministic token-bucket rate-limit simulator: set capacity, refill rate, incoming traffic and a pattern (steady/spike/ramp) to get a second-by-second table of tokens, allowed and denied requests with totals and a does-refill-keep-up verdict.

- Page: https://rocket.gozturk.dev/rate-limit-simulator
- Install: `npx shadcn@latest add https://rocket.gozturk.dev/r/rate-limit-simulator.json`
- Source: `components/ui/rate-limit-simulator.tsx`

```tsx
"use client";

import { useState } from "react";
import { cn } from "@/lib/utils";

export type Pattern = "ramp" | "spike" | "steady";

export interface RateLimitSimulatorProps {
  className?: string;
  defaultCapacity?: number;
  defaultRate?: number;
  defaultRefill?: number;
}

export interface Tick {
  allowed: number;
  denied: number;
  requests: number;
  t: number;
  tokens: number;
}

const COLOR_ALLOWED = "#10b981";
const COLOR_DENIED = "#ef4444";
const COLOR_WARN = "#f59e0b";

const PATTERNS: Pattern[] = ["steady", "spike", "ramp"];

function clamp(n: number, min: number, max: number): number {
  return Math.min(max, Math.max(min, n));
}

function fmtNum(n: number): string {
  return Number.isInteger(n) ? String(n) : n.toFixed(1);
}

export function requestsAt(pattern: Pattern, rate: number, t: number, duration: number): number {
  if (pattern === "spike") return t === 1 ? rate * 3 : rate;
  if (pattern === "ramp") return Math.round((2 * rate * t) / duration);
  return rate;
}

export function simulate(
  pattern: Pattern,
  capacity: number,
  refill: number,
  rate: number,
  duration: number,
): Tick[] {
  const ticks: Tick[] = [];
  let tokens = capacity;
  for (let t = 1; t <= duration; t++) {
    tokens = Math.min(capacity, tokens + refill);
    const requests = requestsAt(pattern, rate, t, duration);
    const allowed = Math.min(requests, tokens);
    ticks.push({ allowed, denied: requests - allowed, requests, t, tokens });
    tokens -= allowed;
  }
  return ticks;
}

export function RateLimitSimulator({
  className,
  defaultCapacity = 10,
  defaultRate = 8,
  defaultRefill = 5,
}: RateLimitSimulatorProps) {
  const [pattern, setPattern] = useState<Pattern>("steady");
  const [capacity, setCapacity] = useState(String(defaultCapacity));
  const [refill, setRefill] = useState(String(defaultRefill));
  const [rate, setRate] = useState(String(defaultRate));
  const [duration, setDuration] = useState("10");

  const capN = Number.parseFloat(capacity);
  const capValid = Number.isFinite(capN) && capN > 0;
  const refillParsed = Number.parseFloat(refill);
  const refillN = Number.isFinite(refillParsed) && refillParsed >= 0 ? refillParsed : 5;
  const rateParsed = Number.parseFloat(rate);
  const rateN = Number.isFinite(rateParsed) && rateParsed > 0 ? rateParsed : 8;
  const durationParsed = Number.parseFloat(duration);
  const durationN = Number.isNaN(durationParsed) ? 10 : clamp(Math.round(durationParsed), 1, 30);

  const ticks = capValid ? simulate(pattern, capN, refillN, rateN, durationN) : [];
  let totalAllowed = 0;
  let totalDenied = 0;
  let totalRequests = 0;
  for (const tick of ticks) {
    totalAllowed += tick.allowed;
    totalDenied += tick.denied;
    totalRequests += tick.requests;
  }
  const pct = totalRequests > 0 ? Math.round((totalDenied / totalRequests) * 100) : 0;
  const exceeds = rateN > refillN;

  const fields: {
    invalid: boolean;
    label: string;
    set: (v: string) => void;
    suffix: string | null;
    value: string;
  }[] = [
    {
      invalid: !capValid,
      label: "Bucket capacity",
      set: setCapacity,
      suffix: null,
      value: capacity,
    },
    {
      invalid: false,
      label: "Refill per second",
      set: setRefill,
      suffix: "token/s",
      value: refill,
    },
    {
      invalid: false,
      label: "Incoming requests per second",
      set: setRate,
      suffix: "req/s",
      value: rate,
    },
    {
      invalid: false,
      label: "Duration in seconds",
      set: setDuration,
      suffix: "s",
      value: duration,
    },
  ];

  return (
    <div
      className={cn(
        "rounded-lg border border-border bg-card text-card-foreground text-xs",
        className,
      )}
    >
      <div className="flex flex-wrap items-center gap-2 border-border border-b p-3">
        <div className="flex items-center gap-1.5">
          {PATTERNS.map((p) => (
            <button
              className={cn(
                "rounded-md border border-border px-1.5 py-0.5 font-mono transition-colors",
                p === pattern
                  ? "bg-muted text-foreground"
                  : "text-muted-foreground hover:bg-muted hover:text-foreground",
              )}
              key={p}
              onClick={() => {
                setPattern(p);
              }}
              type="button"
            >
              {p}
            </button>
          ))}
        </div>
        <div className="flex flex-wrap items-center gap-2">
          {fields.map((f) => (
            <span className="flex items-center gap-1" key={f.label}>
              <input
                aria-label={f.label}
                className={cn(
                  "h-7 w-16 rounded-md border bg-transparent px-2 text-right font-mono text-xs outline-none focus:border-ring",
                  f.invalid ? "border-red-500" : "border-border",
                )}
                onChange={(e) => {
                  f.set(e.target.value);
                }}
                spellCheck={false}
                type="text"
                value={f.value}
              />
              {f.suffix !== null && <span className="text-muted-foreground">{f.suffix}</span>}
            </span>
          ))}
        </div>
      </div>
      {capValid ? (
        <>
          <div className="divide-y divide-border font-mono">
            <div className="grid grid-cols-[2.5rem_1fr_1fr_1fr_1fr] gap-2 px-3 py-1.5 text-[10px] text-muted-foreground uppercase tracking-wide">
              <span>t</span>
              <span>tokens</span>
              <span>requests</span>
              <span>allowed</span>
              <span>denied</span>
            </div>
            {ticks.map((tick) => (
              <div className="grid grid-cols-[2.5rem_1fr_1fr_1fr_1fr] gap-2 px-3 py-1" key={tick.t}>
                <span className="text-muted-foreground">t{tick.t}</span>
                <span>{fmtNum(tick.tokens)}</span>
                <span>{fmtNum(tick.requests)}</span>
                <span style={{ color: COLOR_ALLOWED }}>{fmtNum(tick.allowed)}</span>
                {tick.denied > 0 ? (
                  <span style={{ color: COLOR_DENIED }}>{fmtNum(tick.denied)}</span>
                ) : (
                  <span className="text-muted-foreground">0</span>
                )}
              </div>
            ))}
          </div>
          <div className="flex flex-col gap-1 border-border border-t p-3">
            <p>
              <span className="text-muted-foreground">total:</span>{" "}
              <span className="font-medium font-mono" style={{ color: COLOR_ALLOWED }}>
                {fmtNum(totalAllowed)} allowed
              </span>{" "}
              <span className="text-muted-foreground">·</span>{" "}
              <span className="font-medium font-mono" style={{ color: COLOR_DENIED }}>
                {fmtNum(totalDenied)} denied ({pct}%)
              </span>
            </p>
            {exceeds ? (
              <p style={{ color: COLOR_WARN }}>
                sustained {fmtNum(rateN)} req/s exceeds refill {fmtNum(refillN)}
                /s — denials grow without backoff
              </p>
            ) : (
              <p className="text-muted-foreground">refill keeps up — bucket absorbs bursts</p>
            )}
          </div>
        </>
      ) : (
        <p className="p-3" style={{ color: COLOR_DENIED }}>
          enter a capacity &gt; 0
        </p>
      )}
    </div>
  );
}

export default RateLimitSimulator;
```

## Storage Estimator

A live table-storage estimator: build a mini schema (column types, nullability, average sizes for variable types) and get a per-row byte breakdown (tuple header, null bitmap, columns) and a total size estimate for any row count — simplified Postgres-like model.

- Page: https://rocket.gozturk.dev/storage-estimator
- Install: `npx shadcn@latest add https://rocket.gozturk.dev/r/storage-estimator.json`
- Source: `components/ui/storage-estimator.tsx`

```tsx
"use client";

import { useState } from "react";
import { cn } from "@/lib/utils";

export type ColType =
  | "bigint"
  | "boolean"
  | "double"
  | "integer"
  | "jsonb"
  | "text"
  | "timestamp"
  | "uuid";

export interface Column {
  avgBytes: number;
  name: string;
  nullable: boolean;
  type: ColType;
}

export interface StorageEstimatorProps {
  className?: string;
  defaultColumns?: Column[];
  defaultRowCount?: number;
}

interface EditColumn {
  avgBytes: string;
  name: string;
  nullable: boolean;
  type: ColType;
}

const COLOR_ERROR = "#ef4444";
const HEADER_BYTES = 24;
const VARLENA_BYTES = 4;

const TYPE_BYTES: Record<ColType, number | null> = {
  bigint: 8,
  boolean: 1,
  double: 8,
  integer: 4,
  jsonb: null,
  text: null,
  timestamp: 8,
  uuid: 16,
};

const COL_TYPES: ColType[] = [
  "bigint",
  "boolean",
  "double",
  "integer",
  "jsonb",
  "text",
  "timestamp",
  "uuid",
];

const NUM = new Intl.NumberFormat("en-US");

const DEFAULT_COLUMNS: Column[] = [
  { avgBytes: 0, name: "id", nullable: false, type: "uuid" },
  { avgBytes: 0, name: "user_id", nullable: false, type: "bigint" },
  { avgBytes: 0, name: "created_at", nullable: false, type: "timestamp" },
  { avgBytes: 12, name: "status", nullable: false, type: "text" },
  { avgBytes: 256, name: "payload", nullable: false, type: "jsonb" },
  { avgBytes: 0, name: "active", nullable: true, type: "boolean" },
];

export function isVariable(type: ColType): boolean {
  return TYPE_BYTES[type] === null;
}

export function colBytes(type: ColType, avgBytes: number): number {
  const fixed = TYPE_BYTES[type];
  if (fixed !== null) return fixed;
  const avg = Number.isFinite(avgBytes) && avgBytes >= 0 ? Math.round(avgBytes) : 0;
  return avg + VARLENA_BYTES;
}

export function fmtBytes(n: number): string {
  if (n < 1024) return `${Math.round(n)} B`;
  let v = n;
  let unit = "B";
  for (const u of ["KiB", "MiB", "GiB", "TiB"]) {
    v /= 1024;
    unit = u;
    if (v < 1024) break;
  }
  return `${v.toFixed(1)} ${unit}`;
}

export function StorageEstimator({
  className,
  defaultColumns = DEFAULT_COLUMNS,
  defaultRowCount = 1_000_000,
}: StorageEstimatorProps) {
  const [columns, setColumns] = useState<EditColumn[]>(
    defaultColumns.map((c) => ({
      avgBytes: String(c.avgBytes),
      name: c.name,
      nullable: c.nullable,
      type: c.type,
    })),
  );
  const [rowCount, setRowCount] = useState(String(defaultRowCount));

  const rowsParsed = Number.parseFloat(rowCount);
  const rowsValid = Number.isFinite(rowsParsed) && rowsParsed >= 1;
  const rowsN = rowsValid ? Math.round(rowsParsed) : 0;

  const perCol = columns.map((c) => colBytes(c.type, Number.parseFloat(c.avgBytes)));
  const columnsBytes = perCol.reduce((a, b) => a + b, 0);
  const bitmapBytes = columns.some((c) => c.nullable) ? Math.ceil(columns.length / 8) : 0;
  const rowBytes = HEADER_BYTES + bitmapBytes + columnsBytes;
  const totalBytes = rowBytes * rowsN;

  const update = (i: number, patch: Partial<EditColumn>) => {
    setColumns((cols) => cols.map((c, j) => (j === i ? { ...c, ...patch } : c)));
  };
  const remove = (i: number) => {
    setColumns((cols) => cols.filter((_, j) => j !== i));
  };
  const add = () => {
    setColumns((cols) => [
      ...cols,
      {
        avgBytes: "0",
        name: `col_${cols.length + 1}`,
        nullable: false,
        type: "integer",
      },
    ]);
  };

  return (
    <div
      className={cn(
        "rounded-lg border border-border bg-card text-card-foreground text-xs",
        className,
      )}
    >
      <div className="flex flex-col gap-1.5 border-border border-b p-3">
        {columns.length === 0 && <p className="text-muted-foreground">no columns — add one</p>}
        {columns.map((c, i) => (
          <div className="flex flex-wrap items-center gap-1.5" key={i}>
            <input
              aria-label={`Column ${i + 1} name`}
              className="h-7 w-28 rounded-md border border-border bg-transparent px-2 font-mono text-xs outline-none focus:border-ring"
              onChange={(e) => {
                update(i, { name: e.target.value });
              }}
              spellCheck={false}
              type="text"
              value={c.name}
            />
            <select
              aria-label={`Column ${i + 1} type`}
              className="h-7 rounded-md border border-border bg-transparent px-1 font-mono text-xs outline-none focus:border-ring"
              onChange={(e) => {
                update(i, { type: e.target.value as ColType });
              }}
              value={c.type}
            >
              {COL_TYPES.map((t) => (
                <option key={t} value={t}>
                  {t}
                </option>
              ))}
            </select>
            {isVariable(c.type) && (
              <span className="flex items-center gap-1">
                <input
                  aria-label={`Column ${i + 1} average bytes`}
                  className="h-7 w-16 rounded-md border border-border bg-transparent px-2 text-right font-mono text-xs outline-none focus:border-ring"
                  onChange={(e) => {
                    update(i, { avgBytes: e.target.value });
                  }}
                  spellCheck={false}
                  type="text"
                  value={c.avgBytes}
                />
                <span className="text-muted-foreground">B avg</span>
              </span>
            )}
            <button
              aria-label={`Toggle nullable for ${c.name}`}
              className={cn(
                "rounded-md border border-border px-1.5 py-0.5 font-mono transition-colors",
                c.nullable
                  ? "bg-muted text-foreground"
                  : "text-muted-foreground hover:bg-muted hover:text-foreground",
              )}
              onClick={() => {
                update(i, { nullable: !c.nullable });
              }}
              type="button"
            >
              null?
            </button>
            <span className="ml-auto font-mono text-muted-foreground">
              {fmtBytes(perCol[i] ?? 0)}
            </span>
            <button
              aria-label={`Remove ${c.name}`}
              className="rounded-md border border-border px-1.5 py-0.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
              onClick={() => {
                remove(i);
              }}
              type="button"
            >
              ×
            </button>
          </div>
        ))}
        <button
          className="self-start rounded-md border border-border px-1.5 py-0.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
          onClick={add}
          type="button"
        >
          + add column
        </button>
      </div>
      <div className="flex flex-col gap-2 p-3">
        <div className="flex items-center gap-2">
          <span className="text-muted-foreground">rows:</span>
          <input
            aria-label="Row count"
            className={cn(
              "h-7 w-28 rounded-md border bg-transparent px-2 text-right font-mono text-xs outline-none focus:border-ring",
              rowsValid ? "border-border" : "border-red-500",
            )}
            onChange={(e) => {
              setRowCount(e.target.value);
            }}
            spellCheck={false}
            type="text"
            value={rowCount}
          />
        </div>
        <p className="font-mono">
          row size: header {HEADER_BYTES} B
          {bitmapBytes > 0 ? ` + null bitmap ${bitmapBytes} B` : ""} + columns{" "}
          {NUM.format(columnsBytes)} B ={" "}
          <span className="font-medium">{NUM.format(rowBytes)} B/row</span>
        </p>
        {rowsValid ? (
          <p className="font-mono">
            total: × {NUM.format(rowsN)} rows ≈{" "}
            <span className="font-medium">{fmtBytes(totalBytes)}</span>
          </p>
        ) : (
          <p style={{ color: COLOR_ERROR }}>enter a row count ≥ 1</p>
        )}
        <p className="text-[10px] text-muted-foreground">
          simplified postgres-like model — ignores alignment padding and TOAST
        </p>
      </div>
    </div>
  );
}

export default StorageEstimator;
```

## Logfmt Inspector

A logfmt ⇄ JSON converter: paste a logfmt log line to get a typed key/value table (string/number/boolean/duration/null), a color-banded segment view and pretty JSON output — or flip direction to serialize a JSON object back to logfmt.

- Page: https://rocket.gozturk.dev/logfmt-inspector
- Install: `npx shadcn@latest add https://rocket.gozturk.dev/r/logfmt-inspector.json`
- Source: `components/ui/logfmt-inspector.tsx`

```tsx
"use client";

import { useState } from "react";
import { cn } from "@/lib/utils";

export type ValType = "boolean" | "duration" | "null" | "number" | "string";

export type Dir = "json" | "logfmt";

export interface Pair {
  display: string;
  json: unknown;
  key: string;
  type: ValType;
}

export type ParseResult =
  | { ok: true; output: string; pairs: Pair[] }
  | { error: string; ok: false };

export interface LogfmtInspectorProps {
  className?: string;
  defaultDir?: Dir;
  defaultValue?: string;
}

const COLOR_ERROR = "#ef4444";
const COLOR_KEY = "#38bdf8";

const TYPE_COLOR: Record<ValType, string> = {
  boolean: "#f59e0b",
  duration: "#ec4899",
  null: "#94a3b8",
  number: "#a855f7",
  string: "#10b981",
};

const NUM_RE = /^-?(?:0|[1-9]\d*)(?:\.\d+)?$/;
const DUR_RE = /^-?(?:\d+(?:\.\d+)?)(?:ns|us|µs|ms|s|m|h|d)$/;

export const LOGFMT_SAMPLE =
  'level=error msg="payment timeout" dur=3000ms user=cus_12af ok=false retries=3 trace=null';

function classifyBare(raw: string): { json: unknown; type: ValType } {
  if (raw === "true") return { json: true, type: "boolean" };
  if (raw === "false") return { json: false, type: "boolean" };
  if (raw === "null") return { json: null, type: "null" };
  if (NUM_RE.test(raw)) return { json: Number(raw), type: "number" };
  if (DUR_RE.test(raw)) return { json: raw, type: "duration" };
  return { json: raw, type: "string" };
}

export function parseLogfmt(line: string): Pair[] {
  const pairs: Pair[] = [];
  const n = line.length;
  let i = 0;
  while (i < n) {
    while (i < n && line.charAt(i) === " ") {
      i++;
    }
    if (i >= n) break;
    let key = "";
    while (i < n) {
      const c = line.charAt(i);
      if (c === "=" || c === " ") break;
      key += c;
      i++;
    }
    if (line.charAt(i) === "=") {
      i++;
      let raw = "";
      let quoted = false;
      if (line.charAt(i) === '"') {
        quoted = true;
        i++;
        while (i < n && line.charAt(i) !== '"') {
          const c = line.charAt(i);
          if (c === "\\" && i + 1 < n) {
            const nx = line.charAt(i + 1);
            if (nx === '"' || nx === "\\") {
              raw += nx;
              i += 2;
              continue;
            }
            if (nx === "n") {
              raw += "\n";
              i += 2;
              continue;
            }
            if (nx === "t") {
              raw += "\t";
              i += 2;
              continue;
            }
          }
          raw += c;
          i++;
        }
        i++;
      } else {
        while (i < n) {
          const c = line.charAt(i);
          if (c === " ") break;
          raw += c;
          i++;
        }
      }
      if (key !== "") {
        const cls = quoted ? { json: raw, type: "string" as ValType } : classifyBare(raw);
        pairs.push({ display: raw, json: cls.json, key, type: cls.type });
      }
    } else if (key !== "") {
      pairs.push({ display: "true", json: true, key, type: "boolean" });
    }
  }
  return pairs;
}

function pairFromJson(key: string, v: unknown): Pair {
  if (v === null) return { display: "null", json: null, key, type: "null" };
  if (typeof v === "boolean") return { display: String(v), json: v, key, type: "boolean" };
  if (typeof v === "number") return { display: String(v), json: v, key, type: "number" };
  if (typeof v === "string") {
    return { display: v, json: v, key, type: DUR_RE.test(v) ? "duration" : "string" };
  }
  const s = JSON.stringify(v);
  return { display: s, json: v, key, type: "string" };
}

function quote(s: string): string {
  return `"${s.replace(/\\/g, "\\\\").replace(/"/g, '\\"')}"`;
}

function needsQuote(s: string): boolean {
  if (s === "") return true;
  if (/[\s="]/.test(s)) return true;
  if (s === "true" || s === "false" || s === "null") return true;
  return NUM_RE.test(s) || DUR_RE.test(s);
}

function valueText(p: Pair): string {
  if (p.type === "null") return "null";
  if (p.type === "boolean") return p.json === true ? "true" : "false";
  if (p.type === "number") return String(p.json);
  const s = typeof p.json === "string" ? p.json : JSON.stringify(p.json);
  return needsQuote(s) ? quote(s) : s;
}

function toLogfmt(pairs: Pair[]): string {
  return pairs.map((p) => `${p.key}=${valueText(p)}`).join(" ");
}

function toJsonString(pairs: Pair[]): string {
  const obj: Record<string, unknown> = {};
  for (const p of pairs) {
    obj[p.key] = p.json;
  }
  return JSON.stringify(obj, null, 2);
}

export function convert(value: string, dir: Dir): ParseResult {
  if (dir === "logfmt") {
    const pairs = parseLogfmt(value);
    return { ok: true, output: toJsonString(pairs), pairs };
  }
  let parsed: unknown;
  try {
    parsed = JSON.parse(value);
  } catch {
    return { error: "invalid JSON", ok: false };
  }
  if (typeof parsed !== "object" || parsed === null || Array.isArray(parsed)) {
    return { error: "expected a JSON object", ok: false };
  }
  const pairs: Pair[] = [];
  for (const [key, v] of Object.entries(parsed as Record<string, unknown>)) {
    pairs.push(pairFromJson(key, v));
  }
  return { ok: true, output: toLogfmt(pairs), pairs };
}

const DIRS: { from: string; to: string; value: Dir }[] = [
  { from: "logfmt", to: "json", value: "logfmt" },
  { from: "json", to: "logfmt", value: "json" },
];

export function LogfmtInspector({
  className,
  defaultDir = "logfmt",
  defaultValue = LOGFMT_SAMPLE,
}: LogfmtInspectorProps) {
  const [dir, setDir] = useState<Dir>(defaultDir);
  const [value, setValue] = useState(defaultValue);
  const [copied, setCopied] = useState(false);

  const trimmed = value.trim();
  const result = trimmed === "" ? null : convert(value, dir);
  const outLabel = dir === "logfmt" ? "JSON" : "logfmt";

  function switchTo(next: Dir) {
    if (next === dir) return;
    const conv = convert(value, dir);
    if (conv.ok) setValue(conv.output);
    setDir(next);
  }

  function copyOutput(output: string) {
    void navigator.clipboard.writeText(output).then(() => {
      setCopied(true);
      setTimeout(() => {
        setCopied(false);
      }, 1200);
    });
  }

  return (
    <div
      className={cn(
        "rounded-lg border border-border bg-card text-card-foreground text-xs",
        className,
      )}
    >
      <div className="flex flex-col gap-2 border-border border-b p-3">
        <div className="flex items-center gap-1.5">
          {DIRS.map((d) => (
            <button
              className={cn(
                "rounded-md border border-border px-1.5 py-0.5 font-mono transition-colors",
                d.value === dir
                  ? "bg-muted text-foreground"
                  : "text-muted-foreground hover:bg-muted hover:text-foreground",
              )}
              key={d.value}
              onClick={() => {
                switchTo(d.value);
              }}
              type="button"
            >
              {d.from} → {d.to}
            </button>
          ))}
        </div>
        <textarea
          aria-label="Input"
          className="min-h-0 w-full resize-y break-all rounded-md border border-border bg-transparent px-2 py-1.5 font-mono text-xs outline-none focus:border-ring"
          onChange={(e) => {
            setValue(e.target.value);
          }}
          placeholder={dir === "logfmt" ? 'level=error msg="..."' : '{ "level": "error" }'}
          rows={2}
          spellCheck={false}
          value={value}
        />
        <div className="flex items-center gap-1.5">
          <button
            className="rounded-md border border-border px-1.5 py-0.5 font-mono text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
            onClick={() => {
              setDir("logfmt");
              setValue(LOGFMT_SAMPLE);
            }}
            type="button"
          >
            load sample
          </button>
        </div>
      </div>
      <div className="p-3">
        {result === null ? (
          <p className="text-muted-foreground">Paste a {dir} line or load the sample</p>
        ) : !result.ok ? (
          <p style={{ color: COLOR_ERROR }}>{result.error}</p>
        ) : result.pairs.length === 0 ? (
          <p className="text-muted-foreground">no key=value pairs found</p>
        ) : (
          <div className="flex flex-col gap-3">
            <div className="break-all font-mono leading-relaxed">
              {result.pairs.map((p, idx) => (
                <span key={`${p.key}-${idx}`}>
                  {idx > 0 && " "}
                  <span style={{ color: COLOR_KEY }}>{p.key}</span>
                  <span className="text-muted-foreground">=</span>
                  <span style={{ color: TYPE_COLOR[p.type] }}>{valueText(p)}</span>
                </span>
              ))}
            </div>
            <div className="grid grid-cols-[8rem_5rem_1fr] gap-x-2 gap-y-1.5">
              {result.pairs.map((p, idx) => (
                <div className="contents" key={`${p.key}-${idx}`}>
                  <span className="truncate font-mono" style={{ color: COLOR_KEY }}>
                    {p.key}
                  </span>
                  <span
                    className="justify-self-start rounded px-1 py-0.5 font-medium font-mono text-[10px]"
                    style={{
                      backgroundColor: `${TYPE_COLOR[p.type]}1f`,
                      color: TYPE_COLOR[p.type],
                    }}
                  >
                    {p.type}
                  </span>
                  <span className="break-all font-mono" style={{ color: TYPE_COLOR[p.type] }}>
                    {p.type === "null" ? <span className="italic">null</span> : valueText(p)}
                  </span>
                </div>
              ))}
            </div>
            <div className="flex flex-col gap-1.5 border-border border-t pt-2">
              <div className="flex items-center justify-between">
                <span className="font-medium text-[10px] text-muted-foreground uppercase tracking-wide">
                  {outLabel}
                </span>
                <button
                  className="rounded-md border border-border px-1.5 py-0.5 font-mono text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
                  onClick={() => {
                    copyOutput(result.output);
                  }}
                  type="button"
                >
                  {copied ? "Copied" : "Copy"}
                </button>
              </div>
              <pre className="overflow-x-auto whitespace-pre rounded-md border border-border bg-muted/30 p-2 font-mono text-[11px] leading-relaxed">
                {result.output}
              </pre>
            </div>
            <p className="text-[10px] text-muted-foreground">
              quoted values stay strings; bare true/false/null/numbers are typed
            </p>
          </div>
        )}
      </div>
    </div>
  );
}

export default LogfmtInspector;
```

## Webhook Signature Verifier

A live webhook HMAC signature verifier: paste a payload, signing secret and the provider's expected signature, pick an algorithm (SHA-256/SHA-1/SHA-512) and encoding (hex/base64), and get the computed HMAC plus a constant-time valid/mismatch verdict. Auto-detects Stripe and prefixed signature formats.

- Page: https://rocket.gozturk.dev/webhook-signature-verifier
- Install: `npx shadcn@latest add https://rocket.gozturk.dev/r/webhook-signature-verifier.json`
- Source: `components/ui/webhook-signature-verifier.tsx`

```tsx
"use client";

import { useEffect, useState } from "react";
import { cn } from "@/lib/utils";

export type Algo = "SHA-1" | "SHA-256" | "SHA-512";

export type Encoding = "base64" | "hex";

export type Scheme = "plain" | "prefixed" | "stripe";

export interface ParsedExpected {
  scheme: Scheme;
  sig: string;
  timestamp: string | null;
}

export interface WebhookSignatureVerifierProps {
  className?: string;
  defaultAlgo?: Algo;
  defaultEncoding?: Encoding;
  defaultExpected?: string;
  defaultPayload?: string;
  defaultSecret?: string;
}

const COLOR_ERROR = "#ef4444";
const COLOR_OK = "#10b981";
const COLOR_SIG = "#10b981";

const ALGOS: Algo[] = ["SHA-256", "SHA-1", "SHA-512"];
const ENCODINGS: Encoding[] = ["hex", "base64"];

const SAMPLE_SECRET = "whsec_rocket_demo";
const SAMPLE_PAYLOAD = '{"amount":2000,"id":"evt_1","type":"payment.succeeded"}';
const SAMPLE_EXPECTED = "65c947b44930d1189aef8973a3fc0c2bb8ace5e18fbca9be35b743732bb87a2a";

export function parseExpected(raw: string): ParsedExpected {
  const s = raw.trim();
  if (s === "") return { scheme: "plain", sig: "", timestamp: null };
  if (s.includes("v1=") && s.includes("t=")) {
    let timestamp: string | null = null;
    let sig = "";
    for (const part of s.split(",")) {
      const eq = part.indexOf("=");
      if (eq < 0) continue;
      const k = part.slice(0, eq).trim();
      const v = part.slice(eq + 1).trim();
      if (k === "t") timestamp = v;
      if (k === "v1" && sig === "") sig = v;
    }
    return { scheme: "stripe", sig, timestamp };
  }
  const m = s.match(/^(sha256|sha1|sha512)=(.*)$/);
  if (m) return { scheme: "prefixed", sig: (m[2] ?? "").trim(), timestamp: null };
  return { scheme: "plain", sig: s, timestamp: null };
}

export function timingSafeEqual(a: string, b: string): boolean {
  if (a.length !== b.length) return false;
  let diff = 0;
  for (let i = 0; i < a.length; i++) {
    diff |= a.charCodeAt(i) ^ b.charCodeAt(i);
  }
  return diff === 0;
}

async function computeHmac(
  secret: string,
  message: string,
  algo: Algo,
): Promise<{ base64: string; hex: string }> {
  const enc = new TextEncoder();
  const key = await crypto.subtle.importKey(
    "raw",
    enc.encode(secret),
    { hash: algo, name: "HMAC" },
    false,
    ["sign"],
  );
  const buf = await crypto.subtle.sign("HMAC", key, enc.encode(message));
  const bytes = new Uint8Array(buf);
  let hex = "";
  let bin = "";
  for (const b of bytes) {
    hex += b.toString(16).padStart(2, "0");
    bin += String.fromCharCode(b);
  }
  return { base64: btoa(bin), hex };
}

export function WebhookSignatureVerifier({
  className,
  defaultAlgo = "SHA-256",
  defaultEncoding = "hex",
  defaultExpected = SAMPLE_EXPECTED,
  defaultPayload = SAMPLE_PAYLOAD,
  defaultSecret = SAMPLE_SECRET,
}: WebhookSignatureVerifierProps) {
  const [algo, setAlgo] = useState<Algo>(defaultAlgo);
  const [encoding, setEncoding] = useState<Encoding>(defaultEncoding);
  const [payload, setPayload] = useState(defaultPayload);
  const [secret, setSecret] = useState(defaultSecret);
  const [expected, setExpected] = useState(defaultExpected);
  const [sig, setSig] = useState<{ base64: string; hex: string } | null>(null);
  const [computing, setComputing] = useState(true);
  const [copied, setCopied] = useState(false);

  const parsed = parseExpected(expected);
  const signedMessage =
    parsed.scheme === "stripe" && parsed.timestamp !== null
      ? `${parsed.timestamp}.${payload}`
      : payload;
  const payloadBytes = new TextEncoder().encode(payload).length;

  useEffect(() => {
    let cancelled = false;
    setComputing(true);
    computeHmac(secret, signedMessage, algo)
      .then((res) => {
        if (!cancelled) {
          setSig(res);
          setComputing(false);
        }
      })
      .catch(() => {
        if (!cancelled) {
          setSig(null);
          setComputing(false);
        }
      });
    return () => {
      cancelled = true;
    };
  }, [algo, secret, signedMessage]);

  const computed = sig === null ? null : encoding === "hex" ? sig.hex : sig.base64;
  const normComputed =
    computed === null ? null : encoding === "hex" ? computed.toLowerCase() : computed;
  const normExpected = encoding === "hex" ? parsed.sig.toLowerCase() : parsed.sig;
  const match =
    parsed.sig === "" || normComputed === null ? null : timingSafeEqual(normComputed, normExpected);

  function copySig() {
    if (computed === null) return;
    void navigator.clipboard.writeText(computed).then(() => {
      setCopied(true);
      setTimeout(() => {
        setCopied(false);
      }, 1200);
    });
  }

  return (
    <div
      className={cn(
        "rounded-lg border border-border bg-card text-card-foreground text-xs",
        className,
      )}
    >
      <div className="flex flex-col gap-2 border-border border-b p-3">
        <div className="flex flex-wrap items-center gap-3">
          <span className="flex items-center gap-1.5">
            <span className="text-[10px] text-muted-foreground uppercase tracking-wide">algo</span>
            {ALGOS.map((a) => (
              <button
                className={cn(
                  "rounded-md border border-border px-1.5 py-0.5 font-mono transition-colors",
                  a === algo
                    ? "bg-muted text-foreground"
                    : "text-muted-foreground hover:bg-muted hover:text-foreground",
                )}
                key={a}
                onClick={() => {
                  setAlgo(a);
                }}
                type="button"
              >
                {a}
              </button>
            ))}
          </span>
          <span className="flex items-center gap-1.5">
            <span className="text-[10px] text-muted-foreground uppercase tracking-wide">enc</span>
            {ENCODINGS.map((e) => (
              <button
                className={cn(
                  "rounded-md border border-border px-1.5 py-0.5 font-mono transition-colors",
                  e === encoding
                    ? "bg-muted text-foreground"
                    : "text-muted-foreground hover:bg-muted hover:text-foreground",
                )}
                key={e}
                onClick={() => {
                  setEncoding(e);
                }}
                type="button"
              >
                {e}
              </button>
            ))}
          </span>
        </div>
        <label className="flex flex-col gap-1">
          <span className="text-[10px] text-muted-foreground uppercase tracking-wide">payload</span>
          <textarea
            aria-label="Payload"
            className="min-h-0 w-full resize-y break-all rounded-md border border-border bg-transparent px-2 py-1.5 font-mono text-xs outline-none focus:border-ring"
            onChange={(e) => {
              setPayload(e.target.value);
            }}
            rows={3}
            spellCheck={false}
            value={payload}
          />
        </label>
        <label className="flex flex-col gap-1">
          <span className="text-[10px] text-muted-foreground uppercase tracking-wide">
            signing secret
          </span>
          <input
            aria-label="Signing secret"
            className="h-7 w-full rounded-md border border-border bg-transparent px-2 font-mono text-xs outline-none focus:border-ring"
            onChange={(e) => {
              setSecret(e.target.value);
            }}
            spellCheck={false}
            type="text"
            value={secret}
          />
        </label>
        <label className="flex flex-col gap-1">
          <span className="text-[10px] text-muted-foreground uppercase tracking-wide">
            expected signature
          </span>
          <input
            aria-label="Expected signature"
            className="h-7 w-full rounded-md border border-border bg-transparent px-2 font-mono text-xs outline-none focus:border-ring"
            onChange={(e) => {
              setExpected(e.target.value);
            }}
            placeholder="sha256=… or t=…,v1=… or raw"
            spellCheck={false}
            type="text"
            value={expected}
          />
        </label>
      </div>
      <div className="flex flex-col gap-2 p-3">
        <div className="flex items-center justify-between">
          <span className="font-medium text-[10px] text-muted-foreground uppercase tracking-wide">
            HMAC-{algo} · {encoding}
          </span>
          <button
            className="rounded-md border border-border px-1.5 py-0.5 font-mono text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
            onClick={copySig}
            type="button"
          >
            {copied ? "Copied" : "Copy"}
          </button>
        </div>
        {computing || computed === null ? (
          <p className="font-mono text-muted-foreground">computing…</p>
        ) : (
          <p className="break-all font-mono" style={{ color: COLOR_SIG }}>
            {computed}
          </p>
        )}
        {parsed.scheme === "stripe" && parsed.timestamp !== null && (
          <p className="text-[10px] text-muted-foreground">
            Stripe scheme — signing{" "}
            <span className="font-mono">{parsed.timestamp}.&lt;payload&gt;</span>
          </p>
        )}
        {parsed.scheme === "prefixed" && (
          <p className="text-[10px] text-muted-foreground">
            stripped algorithm prefix from expected
          </p>
        )}
        <div className="flex items-center gap-2 border-border border-t pt-2">
          {match === null ? (
            <span className="text-muted-foreground">enter an expected signature to compare</span>
          ) : match ? (
            <span className="font-medium" style={{ color: COLOR_OK }}>
              ✓ signature valid
            </span>
          ) : (
            <span className="font-medium" style={{ color: COLOR_ERROR }}>
              ✗ mismatch
            </span>
          )}
          <span className="ml-auto text-muted-foreground">
            {payloadBytes} byte{payloadBytes === 1 ? "" : "s"} payload
          </span>
        </div>
      </div>
    </div>
  );
}

export default WebhookSignatureVerifier;
```

## Log Scrubber

A live PII redactor for logs and text: toggle built-in detectors (email, IPv4, credit card, JWT/token, UUID) plus a custom regex, pick a mask mode (type label, keep-last-4, or full bullets), and get scrubbed output with highlighted masks, per-rule match counts and one-click copy.

- Page: https://rocket.gozturk.dev/log-scrubber
- Install: `npx shadcn@latest add https://rocket.gozturk.dev/r/log-scrubber.json`
- Source: `components/ui/log-scrubber.tsx`

```tsx
"use client";

import { useState } from "react";
import { cn } from "@/lib/utils";

export type MaskMode = "full" | "label" | "partial";

export interface ScrubRule {
  label: string;
  re: RegExp;
}

export interface Segment {
  masked: boolean;
  text: string;
}

export interface ScrubResult {
  counts: Record<string, number>;
  segments: Segment[];
  total: number;
}

export interface LogScrubberProps {
  className?: string;
  defaultMode?: MaskMode;
  defaultValue?: string;
}

const COLOR_MASK = "#f59e0b";
const COLOR_ERROR = "#ef4444";

const MODES: MaskMode[] = ["label", "partial", "full"];

export const BUILTIN_RULES: { key: string; label: string; re: RegExp }[] = [
  { key: "email", label: "email", re: /[\w.+-]+@[\w-]+\.[\w.-]+/g },
  { key: "ip", label: "ip", re: /\b(?:\d{1,3}\.){3}\d{1,3}\b/g },
  { key: "card", label: "card", re: /\b\d{4}[ -]?\d{4}[ -]?\d{4}[ -]?\d{4}\b/g },
  { key: "jwt", label: "token", re: /\beyJ[\w-]+\.[\w-]+\.[\w-]+/g },
  {
    key: "uuid",
    label: "uuid",
    re: /\b[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}\b/g,
  },
];

export const SCRUBBER_SAMPLE = `2026-06-15T08:01:13Z user ada@acme.io logged in from 10.0.12.5
card 4242 4242 4242 4242 token eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ4In0.abc123
trace 019bc1a3-0583-7abc-8def-0123456789ab done`;

function maskText(s: string, label: string, mode: MaskMode): string {
  if (mode === "label") return `‹${label}›`;
  if (mode === "full") return "•".repeat(s.length);
  return s.length > 4 ? "•".repeat(s.length - 4) + s.slice(-4) : "•".repeat(s.length);
}

export function scrub(text: string, rules: ScrubRule[], mode: MaskMode): ScrubResult {
  const spans: { end: number; label: string; start: number; text: string }[] = [];
  for (const r of rules) {
    r.re.lastIndex = 0;
    for (let m = r.re.exec(text); m !== null; m = r.re.exec(text)) {
      const full = m[0] ?? "";
      if (full === "") {
        r.re.lastIndex++;
        continue;
      }
      spans.push({ end: m.index + full.length, label: r.label, start: m.index, text: full });
    }
  }
  spans.sort((a, b) => a.start - b.start || b.end - b.start - (a.end - a.start));
  const counts: Record<string, number> = {};
  const segments: Segment[] = [];
  let pos = 0;
  let last = -1;
  let total = 0;
  for (const sp of spans) {
    if (sp.start < last) continue;
    if (sp.start > pos) segments.push({ masked: false, text: text.slice(pos, sp.start) });
    segments.push({ masked: true, text: maskText(sp.text, sp.label, mode) });
    counts[sp.label] = (counts[sp.label] ?? 0) + 1;
    total++;
    pos = sp.end;
    last = sp.end;
  }
  if (pos < text.length) segments.push({ masked: false, text: text.slice(pos) });
  return { counts, segments, total };
}

export function LogScrubber({
  className,
  defaultMode = "label",
  defaultValue = SCRUBBER_SAMPLE,
}: LogScrubberProps) {
  const [text, setText] = useState(defaultValue);
  const [mode, setMode] = useState<MaskMode>(defaultMode);
  const [enabled, setEnabled] = useState<Record<string, boolean>>(() =>
    Object.fromEntries(BUILTIN_RULES.map((r) => [r.key, true])),
  );
  const [custom, setCustom] = useState("");
  const [copied, setCopied] = useState(false);

  const rules: ScrubRule[] = BUILTIN_RULES.filter((r) => enabled[r.key]).map((r) => ({
    label: r.label,
    re: r.re,
  }));
  let customError = false;
  if (custom.trim() !== "") {
    try {
      rules.push({ label: "custom", re: new RegExp(custom, "g") });
    } catch {
      customError = true;
    }
  }

  const result = scrub(text, rules, mode);
  const maskedText = result.segments.map((s) => s.text).join("");
  const countList = [...BUILTIN_RULES.map((r) => r.label), "custom"]
    .filter((label, i, arr) => arr.indexOf(label) === i)
    .filter((label) => (result.counts[label] ?? 0) > 0)
    .map((label) => ({ label, n: result.counts[label] ?? 0 }));

  function copyOutput() {
    void navigator.clipboard.writeText(maskedText).then(() => {
      setCopied(true);
      setTimeout(() => {
        setCopied(false);
      }, 1200);
    });
  }

  return (
    <div
      className={cn(
        "rounded-lg border border-border bg-card text-card-foreground text-xs",
        className,
      )}
    >
      <div className="flex flex-col gap-2 border-border border-b p-3">
        <div className="flex flex-wrap items-center gap-3">
          <span className="flex flex-wrap items-center gap-1.5">
            <span className="text-[10px] text-muted-foreground uppercase tracking-wide">rules</span>
            {BUILTIN_RULES.map((r) => (
              <button
                className={cn(
                  "rounded-md border border-border px-1.5 py-0.5 font-mono transition-colors",
                  enabled[r.key]
                    ? "bg-muted text-foreground"
                    : "text-muted-foreground line-through hover:bg-muted hover:text-foreground",
                )}
                key={r.key}
                onClick={() => {
                  setEnabled((prev) => ({ ...prev, [r.key]: !prev[r.key] }));
                }}
                type="button"
              >
                {r.key}
              </button>
            ))}
          </span>
          <span className="flex items-center gap-1.5">
            <span className="text-[10px] text-muted-foreground uppercase tracking-wide">mask</span>
            {MODES.map((m) => (
              <button
                className={cn(
                  "rounded-md border border-border px-1.5 py-0.5 font-mono transition-colors",
                  m === mode
                    ? "bg-muted text-foreground"
                    : "text-muted-foreground hover:bg-muted hover:text-foreground",
                )}
                key={m}
                onClick={() => {
                  setMode(m);
                }}
                type="button"
              >
                {m}
              </button>
            ))}
          </span>
        </div>
        <span className="flex items-center gap-1.5">
          <span className="text-[10px] text-muted-foreground uppercase tracking-wide">custom</span>
          <input
            aria-label="Custom regex"
            className={cn(
              "h-7 flex-1 rounded-md border bg-transparent px-2 font-mono text-xs outline-none focus:border-ring",
              customError ? "border-red-500" : "border-border",
            )}
            onChange={(e) => {
              setCustom(e.target.value);
            }}
            placeholder="optional regex, e.g. cus_\w+"
            spellCheck={false}
            type="text"
            value={custom}
          />
          {customError && <span style={{ color: COLOR_ERROR }}>invalid regex</span>}
        </span>
        <textarea
          aria-label="Log text"
          className="min-h-0 w-full resize-y break-all rounded-md border border-border bg-transparent px-2 py-1.5 font-mono text-xs outline-none focus:border-ring"
          onChange={(e) => {
            setText(e.target.value);
          }}
          rows={4}
          spellCheck={false}
          value={text}
        />
      </div>
      <div className="flex flex-col gap-2 p-3">
        <div className="flex items-center justify-between">
          <span className="font-medium text-[10px] text-muted-foreground uppercase tracking-wide">
            scrubbed
          </span>
          <button
            className="rounded-md border border-border px-1.5 py-0.5 font-mono text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
            onClick={copyOutput}
            type="button"
          >
            {copied ? "Copied" : "Copy"}
          </button>
        </div>
        <pre className="overflow-x-auto whitespace-pre-wrap break-all rounded-md border border-border bg-muted/30 p-2 font-mono text-[11px] leading-relaxed">
          {result.segments.map((s, i) =>
            s.masked ? (
              <span key={i} style={{ backgroundColor: `${COLOR_MASK}26`, color: COLOR_MASK }}>
                {s.text}
              </span>
            ) : (
              <span key={i}>{s.text}</span>
            ),
          )}
        </pre>
        <div className="flex flex-wrap items-center gap-1.5 border-border border-t pt-2">
          {result.total === 0 ? (
            <span className="text-muted-foreground">no matches</span>
          ) : (
            <>
              {countList.map((c) => (
                <span
                  className="rounded px-1 py-0.5 font-mono text-[10px]"
                  key={c.label}
                  style={{ backgroundColor: `${COLOR_MASK}1f`, color: COLOR_MASK }}
                >
                  {c.label} ×{c.n}
                </span>
              ))}
              <span className="ml-auto text-muted-foreground">
                {result.total} redaction{result.total === 1 ? "" : "s"}
              </span>
            </>
          )}
        </div>
      </div>
    </div>
  );
}

export default LogScrubber;
```

## Timestamp Converter

A live timestamp converter for logs: paste an epoch (seconds or millis, auto-detected) or an ISO 8601 / date string and get epoch seconds, epoch millis, ISO 8601, a human-readable UTC date, multi-zone wall-clock times (UTC, New York, Istanbul, Tokyo) with offsets, and a relative time — all copy-ready.

- Page: https://rocket.gozturk.dev/timestamp-converter
- Install: `npx shadcn@latest add https://rocket.gozturk.dev/r/timestamp-converter.json`
- Source: `components/ui/timestamp-converter.tsx`

```tsx
"use client";

import { useState } from "react";
import { cn } from "@/lib/utils";

export type TsUnit = "auto" | "ms" | "s";

export type ParsedTimestamp = { ms: number; ok: true } | { error: string; ok: false };

export interface TimestampConverterProps {
  baseTime?: number;
  className?: string;
  defaultUnit?: TsUnit;
  defaultValue?: string;
}

const COLOR_TIME = "#f59e0b";
const COLOR_ERROR = "#ef4444";

const UNITS: TsUnit[] = ["auto", "s", "ms"];

const ZONES: { label: string; tz: string }[] = [
  { label: "UTC", tz: "UTC" },
  { label: "New York", tz: "America/New_York" },
  { label: "Istanbul", tz: "Europe/Istanbul" },
  { label: "Tokyo", tz: "Asia/Tokyo" },
];

const UTC_WD = new Intl.DateTimeFormat("en-US", { timeZone: "UTC", weekday: "short" });
const UTC_MO = new Intl.DateTimeFormat("en-US", { month: "short", timeZone: "UTC" });

const DEFAULT_BASE = 1_781_524_800_000;

function pad2(n: number): string {
  return String(n).padStart(2, "0");
}

export function parseTimestamp(raw: string, unit: TsUnit): ParsedTimestamp {
  const s = raw.trim();
  if (s === "") return { error: "", ok: false };
  if (/^-?\d+$/.test(s)) {
    const n = Number(s);
    const ms = unit === "ms" ? n : unit === "s" ? n * 1000 : Math.abs(n) >= 1e12 ? n : n * 1000;
    if (!Number.isFinite(ms) || Number.isNaN(new Date(ms).getTime())) {
      return { error: "out of range", ok: false };
    }
    return { ms, ok: true };
  }
  const parsed = Date.parse(s);
  if (Number.isNaN(parsed)) return { error: "unrecognized timestamp", ok: false };
  return { ms: parsed, ok: true };
}

function humanUtc(d: Date): string {
  return `${UTC_WD.format(d)}, ${UTC_MO.format(d)} ${d.getUTCDate()} ${d.getUTCFullYear()} · ${pad2(d.getUTCHours())}:${pad2(d.getUTCMinutes())}:${pad2(d.getUTCSeconds())} UTC`;
}

function fmtZone(d: Date, tz: string): string {
  const parts = new Intl.DateTimeFormat("en-US", {
    day: "2-digit",
    hour: "2-digit",
    hourCycle: "h23",
    minute: "2-digit",
    month: "2-digit",
    second: "2-digit",
    timeZone: tz,
    year: "numeric",
  }).formatToParts(d);
  const g = (t: string) => parts.find((x) => x.type === t)?.value ?? "";
  return `${g("year")}-${g("month")}-${g("day")} ${g("hour")}:${g("minute")}:${g("second")}`;
}

function zoneOffset(d: Date, tz: string): string {
  const parts = new Intl.DateTimeFormat("en-US", {
    timeZone: tz,
    timeZoneName: "shortOffset",
  }).formatToParts(d);
  return parts.find((x) => x.type === "timeZoneName")?.value ?? "";
}

export function relativeTime(deltaMs: number): string {
  if (Math.abs(deltaMs) < 1000) return "just now";
  const past = deltaMs >= 0;
  const total = Math.abs(deltaMs) / 1000;
  const units: [string, number][] = [
    ["year", 31_536_000],
    ["day", 86_400],
    ["hour", 3600],
    ["minute", 60],
    ["second", 1],
  ];
  for (const [name, sec] of units) {
    if (total >= sec || name === "second") {
      const n = Math.floor(total / sec);
      const label = `${n} ${name}${n === 1 ? "" : "s"}`;
      return past ? `${label} ago` : `in ${label}`;
    }
  }
  return "just now";
}

export function TimestampConverter({
  baseTime = DEFAULT_BASE,
  className,
  defaultUnit = "auto",
  defaultValue = "1781510400",
}: TimestampConverterProps) {
  const [value, setValue] = useState(defaultValue);
  const [unit, setUnit] = useState<TsUnit>(defaultUnit);
  const [copiedKey, setCopiedKey] = useState<string | null>(null);

  const parsed = parseTimestamp(value, unit);
  const date = parsed.ok ? new Date(parsed.ms) : null;

  function copy(key: string, text: string) {
    void navigator.clipboard.writeText(text).then(() => {
      setCopiedKey(key);
      setTimeout(() => {
        setCopiedKey(null);
      }, 1200);
    });
  }

  const rows: { copy?: string; key: string; label: string; value: string }[] =
    parsed.ok && date !== null
      ? [
          {
            copy: String(Math.floor(parsed.ms / 1000)),
            key: "s",
            label: "epoch (s)",
            value: String(Math.floor(parsed.ms / 1000)),
          },
          { copy: String(parsed.ms), key: "ms", label: "epoch (ms)", value: String(parsed.ms) },
          {
            copy: date.toISOString(),
            key: "iso",
            label: "ISO 8601",
            value: date.toISOString(),
          },
          { key: "utc", label: "UTC", value: humanUtc(date) },
        ]
      : [];

  return (
    <div
      className={cn(
        "rounded-lg border border-border bg-card text-card-foreground text-xs",
        className,
      )}
    >
      <div className="flex flex-col gap-2 border-border border-b p-3">
        <span className="flex flex-wrap items-center gap-2">
          <input
            aria-label="Timestamp"
            className={cn(
              "h-7 flex-1 rounded-md border bg-transparent px-2 font-mono text-xs outline-none focus:border-ring",
              !parsed.ok && parsed.error !== "" ? "border-red-500" : "border-border",
            )}
            onChange={(e) => {
              setValue(e.target.value);
            }}
            placeholder="epoch or ISO 8601"
            spellCheck={false}
            type="text"
            value={value}
          />
          <span className="flex items-center gap-1.5">
            <span className="text-[10px] text-muted-foreground uppercase tracking-wide">unit</span>
            {UNITS.map((u) => (
              <button
                className={cn(
                  "rounded-md border border-border px-1.5 py-0.5 font-mono transition-colors",
                  u === unit
                    ? "bg-muted text-foreground"
                    : "text-muted-foreground hover:bg-muted hover:text-foreground",
                )}
                key={u}
                onClick={() => {
                  setUnit(u);
                }}
                type="button"
              >
                {u}
              </button>
            ))}
          </span>
        </span>
      </div>
      <div className="p-3">
        {!parsed.ok ? (
          parsed.error === "" ? (
            <p className="text-muted-foreground">Enter an epoch or ISO 8601 timestamp</p>
          ) : (
            <p style={{ color: COLOR_ERROR }}>{parsed.error}</p>
          )
        ) : (
          date !== null && (
            <div className="flex flex-col gap-3">
              <div className="grid grid-cols-[6rem_1fr_auto] items-center gap-x-2 gap-y-1.5">
                {rows.map((r) => (
                  <div className="contents" key={r.key}>
                    <span className="text-muted-foreground">{r.label}</span>
                    <span className="break-all font-mono" style={{ color: COLOR_TIME }}>
                      {r.value}
                    </span>
                    {r.copy !== undefined ? (
                      <button
                        className="rounded-md border border-border px-1.5 py-0.5 font-mono text-[10px] text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
                        onClick={() => {
                          copy(r.key, r.copy ?? "");
                        }}
                        type="button"
                      >
                        {copiedKey === r.key ? "Copied" : "Copy"}
                      </button>
                    ) : (
                      <span />
                    )}
                  </div>
                ))}
              </div>
              <div className="flex flex-col gap-1 border-border border-t pt-2">
                <p className="font-medium text-[10px] text-muted-foreground uppercase tracking-wide">
                  time zones
                </p>
                <div className="grid grid-cols-[6rem_1fr_auto] gap-x-2 gap-y-1.5">
                  {ZONES.map((z) => (
                    <div className="contents" key={z.tz}>
                      <span className="text-muted-foreground">{z.label}</span>
                      <span className="break-all font-mono">{fmtZone(date, z.tz)}</span>
                      <span className="font-mono text-[10px] text-muted-foreground">
                        {zoneOffset(date, z.tz)}
                      </span>
                    </div>
                  ))}
                </div>
              </div>
              <p className="border-border border-t pt-2 text-muted-foreground">
                <span className="font-medium" style={{ color: COLOR_TIME }}>
                  {relativeTime(baseTime - parsed.ms)}
                </span>{" "}
                relative to {new Date(baseTime).toISOString()}
              </p>
            </div>
          )
        )}
      </div>
    </div>
  );
}

export default TimestampConverter;
```

## JSON Schema Inferer

A live JSON Schema / TypeScript type inferer: paste a sample JSON payload and get a draft-07 JSON Schema or an equivalent TypeScript type — with integer/number distinction, string format detection (date-time/date/email/uuid), nested objects, array item merging and optional-field detection across array items.

- Page: https://rocket.gozturk.dev/json-schema-inferer
- Install: `npx shadcn@latest add https://rocket.gozturk.dev/r/json-schema-inferer.json`
- Source: `components/ui/json-schema-inferer.tsx`

```tsx
"use client";

import { useState } from "react";
import { cn } from "@/lib/utils";

export type OutputMode = "schema" | "typescript";

export interface Schema {
  $schema?: string;
  anyOf?: Schema[];
  format?: string;
  items?: Schema;
  properties?: Record<string, Schema>;
  required?: string[];
  type?: string | string[];
}

export interface JsonSchemaInfererProps {
  className?: string;
  defaultMode?: OutputMode;
  defaultValue?: string;
}

const COLOR_ERROR = "#ef4444";
const SCHEMA_URI = "http://json-schema.org/draft-07/schema#";

const MODES: { label: string; value: OutputMode }[] = [
  { label: "JSON Schema", value: "schema" },
  { label: "TypeScript", value: "typescript" },
];

const ISO_DT = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(?:\.\d+)?(?:Z|[+-]\d{2}:\d{2})$/;
const ISO_D = /^\d{4}-\d{2}-\d{2}$/;
const EMAIL = /^[^@\s]+@[^@\s]+\.[^@\s]+$/;
const UUID = /^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}$/;
const IDENT = /^[A-Za-z_$][\w$]*$/;

export const SCHEMA_SAMPLE = `{
  "id": "usr_8x21",
  "active": true,
  "score": 4.5,
  "age": 30,
  "email": "ada@acme.io",
  "createdAt": "2026-06-15T08:00:00Z",
  "roles": ["admin", "engineer"],
  "profile": { "city": "London", "verified": false },
  "orders": [
    { "id": "ord_1", "total": 129.99 },
    { "id": "ord_2", "total": 14.5, "coupon": "SAVE10" }
  ],
  "lastSeen": null
}`;

const KIND_ORDER = ["object", "array", "string", "number", "integer", "boolean", "null"];

function kindOf(v: unknown): string {
  if (v === null) return "null";
  if (Array.isArray(v)) return "array";
  if (typeof v === "object") return "object";
  if (typeof v === "boolean") return "boolean";
  if (typeof v === "number") return Number.isInteger(v) ? "integer" : "number";
  if (typeof v === "string") return "string";
  return "null";
}

function strFormat(s: string): string | null {
  if (ISO_DT.test(s)) return "date-time";
  if (ISO_D.test(s)) return "date";
  if (EMAIL.test(s)) return "email";
  if (UUID.test(s)) return "uuid";
  return null;
}

function single(norm: string[], values: unknown[]): Schema {
  if (norm.length > 1) {
    return { type: [...norm].sort() };
  }
  const k = norm[0] ?? "null";
  if (k === "object") {
    const objs = values.filter((v) => kindOf(v) === "object") as Record<string, unknown>[];
    const keyOrder: string[] = [];
    const seen = new Set<string>();
    for (const o of objs) {
      for (const key of Object.keys(o)) {
        if (!seen.has(key)) {
          seen.add(key);
          keyOrder.push(key);
        }
      }
    }
    const properties: Record<string, Schema> = {};
    const required: string[] = [];
    for (const key of keyOrder) {
      const present = objs.filter((o) => Object.hasOwn(o, key));
      properties[key] = inferMany(present.map((o) => o[key]));
      if (present.length === objs.length) required.push(key);
    }
    const out: Schema = { type: "object" };
    out.properties = properties;
    if (required.length > 0) out.required = required;
    return out;
  }
  if (k === "array") {
    const arrs = values.filter((v) => kindOf(v) === "array") as unknown[][];
    const all: unknown[] = [];
    for (const a of arrs) {
      for (const el of a) all.push(el);
    }
    const out: Schema = { type: "array" };
    out.items = inferMany(all);
    return out;
  }
  if (k === "string") {
    const strs = values.filter((v) => typeof v === "string") as string[];
    const fmts = [...new Set(strs.map(strFormat))];
    const out: Schema = { type: "string" };
    if (fmts.length === 1 && fmts[0]) out.format = fmts[0];
    return out;
  }
  return { type: k };
}

export function inferMany(values: unknown[]): Schema {
  if (values.length === 0) return {};
  const kinds = [...new Set(values.map(kindOf))];
  const norm = [
    ...new Set(kinds.map((k) => (k === "integer" && kinds.includes("number") ? "number" : k))),
  ];
  const complex = norm.some((k) => k === "object" || k === "array");
  if (norm.length === 1 || !complex) {
    return single(norm, values);
  }
  const groups: Record<string, unknown[]> = {};
  for (const v of values) {
    let k = kindOf(v);
    if (k === "integer" && kinds.includes("number")) k = "number";
    const g = groups[k] ?? [];
    g.push(v);
    groups[k] = g;
  }
  const anyOf: Schema[] = [];
  for (const k of KIND_ORDER) {
    const g = groups[k];
    if (g) anyOf.push(single([k], g));
  }
  return { anyOf };
}

export function toSchemaString(root: unknown): string {
  return JSON.stringify({ $schema: SCHEMA_URI, ...inferMany([root]) }, null, 2);
}

function tsScalar(t: string | undefined): string {
  if (t === "integer" || t === "number") return "number";
  if (t === "boolean") return "boolean";
  if (t === "null") return "null";
  if (t === "string") return "string";
  return "unknown";
}

function tsType(sch: Schema, indent: number): string {
  if (sch.anyOf) return sch.anyOf.map((s) => tsType(s, indent)).join(" | ");
  if (Array.isArray(sch.type)) return sch.type.map((t) => tsScalar(t)).join(" | ");
  if (sch.type === "object") {
    const props = sch.properties ?? {};
    const keys = Object.keys(props);
    if (keys.length === 0) return "Record<string, unknown>";
    const req = new Set(sch.required ?? []);
    const pad = "  ".repeat(indent + 1);
    const lines = keys.map((k) => {
      const name = IDENT.test(k) ? k : JSON.stringify(k);
      return `${pad}${name}${req.has(k) ? "" : "?"}: ${tsType(props[k] ?? {}, indent + 1)};`;
    });
    return `{\n${lines.join("\n")}\n${"  ".repeat(indent)}}`;
  }
  if (sch.type === "array") {
    const it = tsType(sch.items ?? {}, indent);
    return /[ |{}]/.test(it) ? `Array<${it}>` : `${it}[]`;
  }
  return tsScalar(sch.type);
}

export function toTypeScriptString(root: unknown): string {
  return `type Root = ${tsType(inferMany([root]), 0)};`;
}

export function JsonSchemaInferer({
  className,
  defaultMode = "schema",
  defaultValue = SCHEMA_SAMPLE,
}: JsonSchemaInfererProps) {
  const [value, setValue] = useState(defaultValue);
  const [mode, setMode] = useState<OutputMode>(defaultMode);
  const [copied, setCopied] = useState(false);

  const trimmed = value.trim();
  let parsed: unknown;
  let error = "";
  if (trimmed === "") {
    error = "empty";
  } else {
    try {
      parsed = JSON.parse(trimmed);
    } catch {
      error = "invalid JSON";
    }
  }
  const output =
    error === "" ? (mode === "schema" ? toSchemaString(parsed) : toTypeScriptString(parsed)) : "";

  function copyOutput() {
    void navigator.clipboard.writeText(output).then(() => {
      setCopied(true);
      setTimeout(() => {
        setCopied(false);
      }, 1200);
    });
  }

  return (
    <div
      className={cn(
        "rounded-lg border border-border bg-card text-card-foreground text-xs",
        className,
      )}
    >
      <div className="flex flex-col gap-2 border-border border-b p-3">
        <textarea
          aria-label="JSON sample"
          className={cn(
            "min-h-0 w-full resize-y break-all rounded-md border bg-transparent px-2 py-1.5 font-mono text-xs outline-none focus:border-ring",
            error === "invalid JSON" ? "border-red-500" : "border-border",
          )}
          onChange={(e) => {
            setValue(e.target.value);
          }}
          rows={6}
          spellCheck={false}
          value={value}
        />
        <div className="flex items-center gap-1.5">
          {MODES.map((m) => (
            <button
              className={cn(
                "rounded-md border border-border px-1.5 py-0.5 font-mono transition-colors",
                m.value === mode
                  ? "bg-muted text-foreground"
                  : "text-muted-foreground hover:bg-muted hover:text-foreground",
              )}
              key={m.value}
              onClick={() => {
                setMode(m.value);
              }}
              type="button"
            >
              {m.label}
            </button>
          ))}
        </div>
      </div>
      <div className="flex flex-col gap-2 p-3">
        {error !== "" ? (
          <p style={{ color: error === "invalid JSON" ? COLOR_ERROR : undefined }}>
            {error === "invalid JSON" ? (
              "invalid JSON"
            ) : (
              <span className="text-muted-foreground">Paste a sample JSON payload</span>
            )}
          </p>
        ) : (
          <>
            <div className="flex items-center justify-between">
              <span className="font-medium text-[10px] text-muted-foreground uppercase tracking-wide">
                {mode === "schema" ? "draft-07 schema" : "typescript"}
              </span>
              <button
                className="rounded-md border border-border px-1.5 py-0.5 font-mono text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
                onClick={copyOutput}
                type="button"
              >
                {copied ? "Copied" : "Copy"}
              </button>
            </div>
            <pre className="overflow-x-auto whitespace-pre rounded-md border border-border bg-muted/30 p-2 font-mono text-[11px] leading-relaxed">
              {output}
            </pre>
            <p className="text-[10px] text-muted-foreground">
              inferred from a single sample — optional fields are only detected across array items
            </p>
          </>
        )}
      </div>
    </div>
  );
}

export default JsonSchemaInferer;
```

## URL Inspector

A live URL inspector: paste any URL to break it into scheme, host, port (explicit or default), path segments and hash, with a percent-decoded query-parameter table — copy any value, or drop tracking params to rebuild a clean normalized URL.

- Page: https://rocket.gozturk.dev/url-inspector
- Install: `npx shadcn@latest add https://rocket.gozturk.dev/r/url-inspector.json`
- Source: `components/ui/url-inspector.tsx`

```tsx
"use client";

import { useState } from "react";
import { cn } from "@/lib/utils";

export interface UrlInspectorProps {
  className?: string;
  defaultValue?: string;
}

const COLOR_ERROR = "#ef4444";
const COLOR_VAL = "#f59e0b";
const COLOR_KEY = "#38bdf8";

const DEFAULT_PORTS: Record<string, string> = {
  "ftp:": "21",
  "http:": "80",
  "https:": "443",
  "ws:": "80",
  "wss:": "443",
};

export const URL_SAMPLE =
  "https://api.acme.io/v1/orders?status=active&limit=20&utm_source=newsletter&tag=a%20b#section-2";

export function UrlInspector({ className, defaultValue = URL_SAMPLE }: UrlInspectorProps) {
  const [value, setValue] = useState(defaultValue);
  const [copiedKey, setCopiedKey] = useState<string | null>(null);

  const trimmed = value.trim();
  let url: URL | null = null;
  let invalid = false;
  if (trimmed !== "") {
    try {
      url = new URL(trimmed);
    } catch {
      invalid = true;
    }
  }

  const entries = url === null ? [] : [...url.searchParams.entries()];
  const segments = url === null ? [] : url.pathname.split("/").filter(Boolean);

  function copy(key: string, text: string) {
    void navigator.clipboard.writeText(text).then(() => {
      setCopiedKey(key);
      setTimeout(() => {
        setCopiedKey(null);
      }, 1200);
    });
  }

  function drop(i: number) {
    try {
      const u = new URL(value.trim());
      const all = [...u.searchParams.entries()];
      const sp = new URLSearchParams();
      all.forEach(([k, v], idx) => {
        if (idx !== i) sp.append(k, v);
      });
      u.search = sp.toString();
      setValue(u.href);
    } catch {
      return;
    }
  }

  const breakdown: { label: string; value: string }[] =
    url === null
      ? []
      : [
          { label: "scheme", value: url.protocol.replace(/:$/, "") },
          { label: "host", value: url.hostname },
          {
            label: "port",
            value:
              url.port !== ""
                ? url.port
                : DEFAULT_PORTS[url.protocol] !== undefined
                  ? `${DEFAULT_PORTS[url.protocol]} (default)`
                  : "—",
          },
          { label: "path", value: url.pathname },
          { label: "hash", value: url.hash !== "" ? url.hash.slice(1) : "—" },
        ];

  return (
    <div
      className={cn(
        "rounded-lg border border-border bg-card text-card-foreground text-xs",
        className,
      )}
    >
      <div className="flex flex-col gap-2 border-border border-b p-3">
        <input
          aria-label="URL"
          className={cn(
            "h-7 w-full rounded-md border bg-transparent px-2 font-mono text-xs outline-none focus:border-ring",
            invalid ? "border-red-500" : "border-border",
          )}
          onChange={(e) => {
            setValue(e.target.value);
          }}
          placeholder="https://host/path?query"
          spellCheck={false}
          type="text"
          value={value}
        />
      </div>
      <div className="p-3">
        {trimmed === "" ? (
          <p className="text-muted-foreground">Paste a URL to inspect</p>
        ) : invalid || url === null ? (
          <p style={{ color: COLOR_ERROR }}>invalid URL</p>
        ) : (
          <div className="flex flex-col gap-3">
            <div className="grid grid-cols-[4rem_1fr] items-center gap-x-2 gap-y-1.5">
              {breakdown.map((b) => (
                <div className="contents" key={b.label}>
                  <span className="text-muted-foreground">{b.label}</span>
                  <span className="break-all font-mono">{b.value}</span>
                </div>
              ))}
            </div>
            {segments.length > 0 && (
              <div className="flex flex-wrap items-center gap-1.5">
                <span className="text-[10px] text-muted-foreground uppercase tracking-wide">
                  segments
                </span>
                {segments.map((s, i) => (
                  <span
                    className="rounded border border-border px-1.5 py-0.5 font-mono text-muted-foreground"
                    key={`${i}-${s}`}
                  >
                    {s}
                  </span>
                ))}
              </div>
            )}
            <div className="flex flex-col gap-1.5 border-border border-t pt-2">
              <p className="font-medium text-[10px] text-muted-foreground uppercase tracking-wide">
                query ({entries.length})
              </p>
              {entries.length === 0 ? (
                <p className="text-muted-foreground">no query parameters</p>
              ) : (
                <div className="grid grid-cols-[1fr_1fr_auto_auto] items-center gap-x-2 gap-y-1.5">
                  {entries.map(([k, v], i) => (
                    <div className="contents" key={`${i}-${k}`}>
                      <span className="truncate font-mono" style={{ color: COLOR_KEY }}>
                        {k}
                      </span>
                      <span className="break-all font-mono" style={{ color: COLOR_VAL }}>
                        {v === "" ? (
                          <span className="text-muted-foreground italic">(empty)</span>
                        ) : (
                          v
                        )}
                      </span>
                      <button
                        aria-label={`Copy ${k}`}
                        className="rounded-md border border-border px-1.5 py-0.5 font-mono text-[10px] text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
                        onClick={() => {
                          copy(`p${i}`, v);
                        }}
                        type="button"
                      >
                        {copiedKey === `p${i}` ? "Copied" : "Copy"}
                      </button>
                      <button
                        aria-label={`Drop ${k}`}
                        className="rounded-md border border-border px-1.5 py-0.5 font-mono text-[10px] text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
                        onClick={() => {
                          drop(i);
                        }}
                        type="button"
                      >
                        ×
                      </button>
                    </div>
                  ))}
                </div>
              )}
            </div>
            <div className="flex items-center justify-between gap-2 border-border border-t pt-2">
              <span className="min-w-0 flex-1 break-all font-mono text-muted-foreground">
                {url.href}
              </span>
              <button
                className="shrink-0 rounded-md border border-border px-1.5 py-0.5 font-mono text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
                onClick={() => {
                  copy("norm", url?.href ?? "");
                }}
                type="button"
              >
                {copiedKey === "norm" ? "Copied" : "Copy"}
              </button>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

export default UrlInspector;
```

## CSV ⇄ JSON Converter

A two-way CSV ⇄ JSON converter: paste CSV to get a typed array of objects (RFC-4180 quoting, numbers/booleans/null inference, quoted cells stay strings) or flip direction to serialize a JSON array back to CSV. Delimiter chips (comma/tab/semicolon) with auto-detection, row/column counts and copy.

- Page: https://rocket.gozturk.dev/csv-json-converter
- Install: `npx shadcn@latest add https://rocket.gozturk.dev/r/csv-json-converter.json`
- Source: `components/ui/csv-json-converter.tsx`

```tsx
"use client";

import { useState } from "react";
import { cn } from "@/lib/utils";

export type CsvDir = "csv" | "json";

export type CsvResult =
  | { cols: number; ok: true; output: string; rows: number }
  | { error: string; ok: false };

export interface CsvJsonConverterProps {
  className?: string;
  defaultDelimiter?: string;
  defaultDir?: CsvDir;
  defaultValue?: string;
}

interface Cell {
  q: boolean;
  v: string;
}

const COLOR_ERROR = "#ef4444";
const NUM_RE = /^-?(?:0|[1-9]\d*)(?:\.\d+)?$/;

const DELIMS: { label: string; value: string }[] = [
  { label: "comma", value: "," },
  { label: "tab", value: "\t" },
  { label: "semicolon", value: ";" },
];

const DIRS: { from: string; to: string; value: CsvDir }[] = [
  { from: "csv", to: "json", value: "csv" },
  { from: "json", to: "csv", value: "json" },
];

export const CSV_SAMPLE = `id,name,active,score,note
1,Ada,true,4.5,"hello, world"
2,Linus,false,9,
3,Grace,true,,"quote ""x"""`;

export function detectDelimiter(text: string): string {
  const firstLine = text.split("\n")[0] ?? "";
  let best = ",";
  let bestN = -1;
  for (const d of [",", "\t", ";"]) {
    const n = firstLine.split(d).length - 1;
    if (n > bestN) {
      bestN = n;
      best = d;
    }
  }
  return best;
}

function parseRows(text: string, delim: string): Cell[][] {
  const rows: Cell[][] = [];
  let row: Cell[] = [];
  let v = "";
  let everQ = false;
  let inQ = false;
  const n = text.length;
  let i = 0;
  const pushField = () => {
    row.push({ q: everQ, v });
    v = "";
    everQ = false;
  };
  while (i < n) {
    const c = text.charAt(i);
    if (inQ) {
      if (c === '"') {
        if (text.charAt(i + 1) === '"') {
          v += '"';
          i += 2;
          continue;
        }
        inQ = false;
        i++;
        continue;
      }
      v += c;
      i++;
      continue;
    }
    if (c === '"') {
      inQ = true;
      everQ = true;
      i++;
      continue;
    }
    if (c === delim) {
      pushField();
      i++;
      continue;
    }
    if (c === "\n") {
      pushField();
      rows.push(row);
      row = [];
      i++;
      continue;
    }
    if (c === "\r") {
      i++;
      continue;
    }
    v += c;
    i++;
  }
  pushField();
  rows.push(row);
  const lastRow = rows[rows.length - 1];
  if (rows.length > 1 && lastRow?.length === 1 && lastRow[0]?.q === false && lastRow[0]?.v === "") {
    rows.pop();
  }
  return rows;
}

function inferCell(cell: Cell): unknown {
  if (cell.q) return cell.v;
  const s = cell.v;
  if (s === "") return null;
  if (s === "true") return true;
  if (s === "false") return false;
  if (NUM_RE.test(s)) return Number(s);
  return s;
}

export function csvToJson(text: string, delim: string): Record<string, unknown>[] {
  const rows = parseRows(text, delim);
  const headerRow = rows[0];
  if (rows.length === 0 || headerRow === undefined) return [];
  const header = headerRow.map((c) => c.v);
  const out: Record<string, unknown>[] = [];
  for (let r = 1; r < rows.length; r++) {
    const cells = rows[r] ?? [];
    const obj: Record<string, unknown> = {};
    header.forEach((h, j) => {
      const cell = cells[j];
      obj[h] = cell === undefined ? null : inferCell(cell);
    });
    out.push(obj);
  }
  return out;
}

function needsQuote(s: string, delim: string): boolean {
  if (s === "") return true;
  if (s.includes(delim) || s.includes('"') || s.includes("\n") || s.includes("\r")) return true;
  if (s === "true" || s === "false") return true;
  return NUM_RE.test(s);
}

function quote(s: string): string {
  return `"${s.replace(/"/g, '""')}"`;
}

function serializeCell(val: unknown, delim: string): string {
  if (val === null || val === undefined) return "";
  if (typeof val === "boolean") return val ? "true" : "false";
  if (typeof val === "number") return String(val);
  if (typeof val === "string") return needsQuote(val, delim) ? quote(val) : val;
  return quote(JSON.stringify(val));
}

export function jsonToCsv(arr: Record<string, unknown>[], delim: string): string {
  const keys: string[] = [];
  const seen = new Set<string>();
  for (const o of arr) {
    for (const k of Object.keys(o)) {
      if (!seen.has(k)) {
        seen.add(k);
        keys.push(k);
      }
    }
  }
  const lines = [keys.map((k) => (needsQuote(k, delim) ? quote(k) : k)).join(delim)];
  for (const o of arr) {
    lines.push(keys.map((k) => serializeCell(o[k], delim)).join(delim));
  }
  return lines.join("\n");
}

export function convert(value: string, dir: CsvDir, delim: string): CsvResult {
  if (dir === "csv") {
    const data = csvToJson(value, delim);
    const rows = parseRows(value, delim);
    const cols = rows[0]?.length ?? 0;
    return { cols, ok: true, output: JSON.stringify(data, null, 2), rows: data.length };
  }
  let parsed: unknown;
  try {
    parsed = JSON.parse(value);
  } catch {
    return { error: "invalid JSON", ok: false };
  }
  if (!Array.isArray(parsed)) {
    return { error: "expected an array of objects", ok: false };
  }
  for (const el of parsed) {
    if (typeof el !== "object" || el === null || Array.isArray(el)) {
      return { error: "expected an array of objects", ok: false };
    }
  }
  const arr = parsed as Record<string, unknown>[];
  const output = jsonToCsv(arr, delim);
  const cols = output === "" ? 0 : (output.split("\n")[0] ?? "").split(delim).length;
  return { cols, ok: true, output, rows: arr.length };
}

export function CsvJsonConverter({
  className,
  defaultDelimiter = ",",
  defaultDir = "csv",
  defaultValue = CSV_SAMPLE,
}: CsvJsonConverterProps) {
  const [value, setValue] = useState(defaultValue);
  const [dir, setDir] = useState<CsvDir>(defaultDir);
  const [delim, setDelim] = useState(defaultDelimiter);
  const [delimTouched, setDelimTouched] = useState(false);
  const [copied, setCopied] = useState(false);

  const trimmed = value.trim();
  const result = trimmed === "" ? null : convert(value, dir, delim);
  const outLabel = dir === "csv" ? "JSON" : "CSV";

  function switchTo(next: CsvDir) {
    if (next === dir) return;
    const conv = convert(value, dir, delim);
    if (conv.ok) setValue(conv.output);
    setDir(next);
  }

  function changeDelim(d: string) {
    setDelim(d);
    setDelimTouched(true);
  }

  function onText(v: string) {
    setValue(v);
    if (dir === "csv" && !delimTouched) setDelim(detectDelimiter(v));
  }

  function copyOutput(output: string) {
    void navigator.clipboard.writeText(output).then(() => {
      setCopied(true);
      setTimeout(() => {
        setCopied(false);
      }, 1200);
    });
  }

  return (
    <div
      className={cn(
        "rounded-lg border border-border bg-card text-card-foreground text-xs",
        className,
      )}
    >
      <div className="flex flex-col gap-2 border-border border-b p-3">
        <div className="flex flex-wrap items-center gap-3">
          <span className="flex items-center gap-1.5">
            {DIRS.map((d) => (
              <button
                className={cn(
                  "rounded-md border border-border px-1.5 py-0.5 font-mono transition-colors",
                  d.value === dir
                    ? "bg-muted text-foreground"
                    : "text-muted-foreground hover:bg-muted hover:text-foreground",
                )}
                key={d.value}
                onClick={() => {
                  switchTo(d.value);
                }}
                type="button"
              >
                {d.from} → {d.to}
              </button>
            ))}
          </span>
          <span className="flex items-center gap-1.5">
            <span className="text-[10px] text-muted-foreground uppercase tracking-wide">delim</span>
            {DELIMS.map((d) => (
              <button
                className={cn(
                  "rounded-md border border-border px-1.5 py-0.5 font-mono transition-colors",
                  d.value === delim
                    ? "bg-muted text-foreground"
                    : "text-muted-foreground hover:bg-muted hover:text-foreground",
                )}
                key={d.value}
                onClick={() => {
                  changeDelim(d.value);
                }}
                type="button"
              >
                {d.label}
              </button>
            ))}
          </span>
        </div>
        <textarea
          aria-label="Input"
          className="min-h-0 w-full resize-y break-all rounded-md border border-border bg-transparent px-2 py-1.5 font-mono text-xs outline-none focus:border-ring"
          onChange={(e) => {
            onText(e.target.value);
          }}
          rows={6}
          spellCheck={false}
          value={value}
        />
      </div>
      <div className="flex flex-col gap-2 p-3">
        {result === null ? (
          <p className="text-muted-foreground">Paste {dir === "csv" ? "CSV" : "a JSON array"}</p>
        ) : !result.ok ? (
          <p style={{ color: COLOR_ERROR }}>{result.error}</p>
        ) : (
          <>
            <div className="flex items-center justify-between">
              <span className="font-medium text-[10px] text-muted-foreground uppercase tracking-wide">
                {outLabel} · {result.rows} row{result.rows === 1 ? "" : "s"} × {result.cols} col
                {result.cols === 1 ? "" : "s"}
              </span>
              <button
                className="rounded-md border border-border px-1.5 py-0.5 font-mono text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
                onClick={() => {
                  copyOutput(result.output);
                }}
                type="button"
              >
                {copied ? "Copied" : "Copy"}
              </button>
            </div>
            <pre className="overflow-x-auto whitespace-pre rounded-md border border-border bg-muted/30 p-2 font-mono text-[11px] leading-relaxed">
              {result.output}
            </pre>
            <p className="text-[10px] text-muted-foreground">
              quoted cells stay strings; bare true/false/numbers are typed, empty → null
            </p>
          </>
        )}
      </div>
    </div>
  );
}

export default CsvJsonConverter;
```

## cURL Converter

A curl-to-fetch converter: paste a curl command and get a structured breakdown (method, URL, headers, body) plus equivalent JavaScript fetch() code. Handles quotes, line continuations, -X/-H/-d/-u/-G flags (basic auth, query promotion) and copy.

- Page: https://rocket.gozturk.dev/curl-converter
- Install: `npx shadcn@latest add https://rocket.gozturk.dev/r/curl-converter.json`
- Source: `components/ui/curl-converter.tsx`

```tsx
"use client";

import { useState } from "react";
import { cn } from "@/lib/utils";

export interface ParsedCurl {
  body: string;
  headers: [string, string][];
  method: string;
  url: string | null;
}

export interface CurlConverterProps {
  className?: string;
  defaultValue?: string;
}

const COLOR_ERROR = "#ef4444";

const METHOD_COLOR: Record<string, string> = {
  DELETE: "#ef4444",
  GET: "#3b82f6",
  PATCH: "#a855f7",
  POST: "#10b981",
  PUT: "#f59e0b",
};

const DATA_FLAGS = [
  "-d",
  "--data",
  "--data-raw",
  "--data-binary",
  "--data-ascii",
  "--data-urlencode",
];
const ARG_FLAGS = new Set([
  ...DATA_FLAGS,
  "-A",
  "-H",
  "-X",
  "-b",
  "-e",
  "-u",
  "--cookie",
  "--header",
  "--referer",
  "--request",
  "--url",
  "--user",
  "--user-agent",
]);
const BOOL_FLAGS = new Set([
  "--compressed",
  "--fail",
  "--globoff",
  "--include",
  "--insecure",
  "--location",
  "--show-error",
  "--silent",
  "--verbose",
  "-f",
  "-g",
  "-i",
  "-k",
  "-s",
  "-v",
]);

export const CURL_SAMPLE = `curl -X POST https://api.acme.io/v1/orders \\
  -H "Content-Type: application/json" \\
  -H "Authorization: Bearer sk_live_123" \\
  -d '{"sku":"TSHIRT-M","qty":2}'`;

export function tokenizeCurl(s: string): string[] {
  const tokens: string[] = [];
  const n = s.length;
  let cur = "";
  let has = false;
  let i = 0;
  while (i < n) {
    const c = s.charAt(i);
    if (c === "\\" && s.charAt(i + 1) === "\n") {
      i += 2;
      continue;
    }
    if (c === " " || c === "\t" || c === "\n" || c === "\r") {
      if (has) {
        tokens.push(cur);
        cur = "";
        has = false;
      }
      i++;
      continue;
    }
    if (c === "'") {
      has = true;
      i++;
      while (i < n && s.charAt(i) !== "'") {
        cur += s.charAt(i);
        i++;
      }
      i++;
      continue;
    }
    if (c === '"') {
      has = true;
      i++;
      while (i < n && s.charAt(i) !== '"') {
        if (s.charAt(i) === "\\" && i + 1 < n) {
          const nx = s.charAt(i + 1);
          if (nx === '"' || nx === "\\" || nx === "$" || nx === "`") {
            cur += nx;
            i += 2;
            continue;
          }
        }
        cur += s.charAt(i);
        i++;
      }
      i++;
      continue;
    }
    if (c === "\\" && i + 1 < n) {
      has = true;
      cur += s.charAt(i + 1);
      i += 2;
      continue;
    }
    has = true;
    cur += c;
    i++;
  }
  if (has) tokens.push(cur);
  return tokens;
}

function basicAuth(userpass: string): string {
  try {
    return `Basic ${btoa(userpass)}`;
  } catch {
    return `Basic ${userpass}`;
  }
}

export function parseCurl(input: string): ParsedCurl {
  const toks = tokenizeCurl(input);
  let url: string | null = null;
  let method: string | null = null;
  let useGet = false;
  const headers: [string, string][] = [];
  const data: string[] = [];
  let i = toks[0] === "curl" ? 1 : 0;
  for (; i < toks.length; i++) {
    const tk = toks[i] ?? "";
    const next = () => {
      i += 1;
      return toks[i] ?? "";
    };
    if (tk === "-X" || tk === "--request") {
      method = next();
    } else if (tk === "-H" || tk === "--header") {
      const h = next();
      const ci = h.indexOf(":");
      if (ci >= 0) headers.push([h.slice(0, ci).trim(), h.slice(ci + 1).trim()]);
    } else if (DATA_FLAGS.includes(tk)) {
      data.push(next());
    } else if (tk === "-u" || tk === "--user") {
      headers.push(["Authorization", basicAuth(next())]);
    } else if (tk === "-b" || tk === "--cookie") {
      headers.push(["Cookie", next()]);
    } else if (tk === "-A" || tk === "--user-agent") {
      headers.push(["User-Agent", next()]);
    } else if (tk === "-e" || tk === "--referer") {
      headers.push(["Referer", next()]);
    } else if (tk === "-G" || tk === "--get") {
      useGet = true;
    } else if (tk === "--url") {
      url = next();
    } else if (BOOL_FLAGS.has(tk)) {
      // ignore valueless flag
    } else if (tk.startsWith("-")) {
      if (ARG_FLAGS.has(tk)) next();
    } else if (url === null) {
      url = tk;
    }
  }
  let body = data.join("&");
  if (url !== null && useGet && body !== "") {
    url += (url.includes("?") ? "&" : "?") + body;
    body = "";
  }
  return { body, headers, method: method ?? (body !== "" ? "POST" : "GET"), url };
}

function jsString(s: string): string {
  if (!s.includes("'") && !s.includes("\n") && !s.includes("\\")) return `'${s}'`;
  return JSON.stringify(s);
}

export function toFetch(p: ParsedCurl): string | null {
  if (p.url === null) return null;
  const hasOpts = p.method !== "GET" || p.headers.length > 0 || p.body !== "";
  if (!hasOpts) return `fetch(${jsString(p.url)});`;
  const inner: string[] = [];
  if (p.method !== "GET") inner.push(`  method: ${jsString(p.method)}`);
  if (p.headers.length > 0) {
    const hl = p.headers.map(([k, v]) => `    ${jsString(k)}: ${jsString(v)}`).join(",\n");
    inner.push(`  headers: {\n${hl}\n  }`);
  }
  if (p.body !== "") inner.push(`  body: ${jsString(p.body)}`);
  return `fetch(${jsString(p.url)}, {\n${inner.join(",\n")}\n});`;
}

export function CurlConverter({ className, defaultValue = CURL_SAMPLE }: CurlConverterProps) {
  const [value, setValue] = useState(defaultValue);
  const [copied, setCopied] = useState(false);

  const trimmed = value.trim();
  const parsed = trimmed === "" ? null : parseCurl(value);
  const fetchCode = parsed === null ? null : toFetch(parsed);

  function copyOutput(text: string) {
    void navigator.clipboard.writeText(text).then(() => {
      setCopied(true);
      setTimeout(() => {
        setCopied(false);
      }, 1200);
    });
  }

  const methodColor =
    parsed === null ? undefined : (METHOD_COLOR[parsed.method] ?? "var(--muted-foreground)");

  return (
    <div
      className={cn(
        "rounded-lg border border-border bg-card text-card-foreground text-xs",
        className,
      )}
    >
      <div className="flex flex-col gap-2 border-border border-b p-3">
        <textarea
          aria-label="curl command"
          className="min-h-0 w-full resize-y break-all rounded-md border border-border bg-transparent px-2 py-1.5 font-mono text-xs outline-none focus:border-ring"
          onChange={(e) => {
            setValue(e.target.value);
          }}
          placeholder="curl https://api.example.com -H ..."
          rows={5}
          spellCheck={false}
          value={value}
        />
        <div className="flex items-center gap-1.5">
          <button
            className="rounded-md border border-border px-1.5 py-0.5 font-mono text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
            onClick={() => {
              setValue(CURL_SAMPLE);
            }}
            type="button"
          >
            load sample
          </button>
        </div>
      </div>
      <div className="flex flex-col gap-3 p-3">
        {parsed === null ? (
          <p className="text-muted-foreground">Paste a curl command</p>
        ) : parsed.url === null ? (
          <p style={{ color: COLOR_ERROR }}>no URL found</p>
        ) : (
          <>
            <div className="flex flex-wrap items-center gap-2">
              <span
                className="rounded px-1.5 py-0.5 font-medium font-mono"
                style={{ backgroundColor: `${methodColor}1f`, color: methodColor }}
              >
                {parsed.method}
              </span>
              <span className="min-w-0 flex-1 break-all font-mono">{parsed.url}</span>
            </div>
            {parsed.headers.length > 0 && (
              <div className="flex flex-col gap-1.5">
                <p className="font-medium text-[10px] text-muted-foreground uppercase tracking-wide">
                  headers ({parsed.headers.length})
                </p>
                <div className="grid grid-cols-[10rem_1fr] gap-x-2 gap-y-1.5">
                  {parsed.headers.map(([k, v], idx) => (
                    <div className="contents" key={`${idx}-${k}`}>
                      <span className="truncate font-mono text-muted-foreground">{k}</span>
                      <span className="break-all font-mono">{v}</span>
                    </div>
                  ))}
                </div>
              </div>
            )}
            {parsed.body !== "" && (
              <div className="flex flex-col gap-1.5">
                <p className="font-medium text-[10px] text-muted-foreground uppercase tracking-wide">
                  body
                </p>
                <p className="break-all font-mono">{parsed.body}</p>
              </div>
            )}
            {fetchCode !== null && (
              <div className="flex flex-col gap-1.5 border-border border-t pt-2">
                <div className="flex items-center justify-between">
                  <span className="font-medium text-[10px] text-muted-foreground uppercase tracking-wide">
                    fetch()
                  </span>
                  <button
                    className="rounded-md border border-border px-1.5 py-0.5 font-mono text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
                    onClick={() => {
                      copyOutput(fetchCode);
                    }}
                    type="button"
                  >
                    {copied ? "Copied" : "Copy"}
                  </button>
                </div>
                <pre className="overflow-x-auto whitespace-pre rounded-md border border-border bg-muted/30 p-2 font-mono text-[11px] leading-relaxed">
                  {fetchCode}
                </pre>
              </div>
            )}
          </>
        )}
      </div>
    </div>
  );
}

export default CurlConverter;
```

## Env Linter

A live .env file linter: paste environment variables to get a parsed key/value table (sensitive values masked with a reveal toggle) and per-line findings — invalid key names, missing '=', unclosed quotes, spaces around '=', unquoted values with spaces, duplicate keys and undefined variable references, with an error/warning summary.

- Page: https://rocket.gozturk.dev/env-linter
- Install: `npx shadcn@latest add https://rocket.gozturk.dev/r/env-linter.json`
- Source: `components/ui/env-linter.tsx`

```tsx
"use client";

import { useState } from "react";
import { cn } from "@/lib/utils";

export type EnvLevel = "error" | "info" | "warn";

export interface EnvEntry {
  key: string;
  line: number;
  quoted: boolean;
  sensitive: boolean;
  single: boolean;
  value: string;
}

export interface EnvFinding {
  level: EnvLevel;
  line: number;
  msg: string;
}

export interface EnvLintResult {
  count: number;
  entries: EnvEntry[];
  errors: number;
  findings: EnvFinding[];
  warns: number;
}

export interface EnvLinterProps {
  className?: string;
  defaultValue?: string;
}

const KEY_RE = /^[A-Za-z_][A-Za-z0-9_]*$/;
const SENSITIVE_RE = /SECRET|TOKEN|PASSWORD|PASSWD|PRIVATE|CREDENTIAL|KEY/i;
const REF_RE = /\$\{([A-Za-z_][A-Za-z0-9_]*)\}|\$([A-Za-z_][A-Za-z0-9_]*)/g;
const LEVEL_ORDER: EnvLevel[] = ["error", "warn", "info"];

const LEVEL_COLOR: Record<EnvLevel, string> = {
  error: "#ef4444",
  info: "#3b82f6",
  warn: "#f59e0b",
};

export const ENV_SAMPLE = `# App config
NODE_ENV=production
PORT = 3000
API_KEY="sk_live_abc123"
DATABASE_URL=postgres://u:p@host/db
EMPTY=
bad-key=oops
MISSING_VALUE
GREETING=hello world
HOST=\${HOSTNAME}
NODE_ENV=staging`;

export function lintEnv(text: string): EnvLintResult {
  const lines = text.split("\n");
  const entries: EnvEntry[] = [];
  const findings: EnvFinding[] = [];
  const firstLine: Record<string, number> = {};
  lines.forEach((line, idx) => {
    const ln = idx + 1;
    const lt = line.replace(/^\s+/, "");
    if (lt === "" || lt.startsWith("#")) return;
    const s = lt.replace(/^export\s+/, "");
    const eq = s.indexOf("=");
    if (eq < 0) {
      findings.push({ level: "error", line: ln, msg: "missing '='" });
      return;
    }
    const keyRaw = s.slice(0, eq);
    const valueRaw = s.slice(eq + 1);
    if (/\s$/.test(keyRaw) || /^\s/.test(valueRaw)) {
      findings.push({ level: "warn", line: ln, msg: "spaces around '=' (will be trimmed)" });
    }
    const key = keyRaw.trim();
    if (!KEY_RE.test(key)) {
      findings.push({ level: "error", line: ln, msg: `invalid key name "${key}"` });
      return;
    }
    const vt = valueRaw.trim();
    const first = vt.charAt(0);
    const last = vt.charAt(vt.length - 1);
    let value = vt;
    let quoted = false;
    let single = false;
    if (vt.length >= 2 && ((first === '"' && last === '"') || (first === "'" && last === "'"))) {
      quoted = true;
      single = first === "'";
      value = vt.slice(1, -1);
    } else if (first === '"' || first === "'") {
      findings.push({ level: "error", line: ln, msg: "unclosed quote" });
    } else if (/\s/.test(vt)) {
      findings.push({ level: "warn", line: ln, msg: "unquoted value with spaces" });
    }
    if (vt === "") findings.push({ level: "info", line: ln, msg: "empty value" });
    const seenAt = firstLine[key];
    if (seenAt !== undefined) {
      findings.push({ level: "warn", line: ln, msg: `duplicate key (overrides line ${seenAt})` });
    } else {
      firstLine[key] = ln;
    }
    entries.push({ key, line: ln, quoted, sensitive: SENSITIVE_RE.test(key), single, value });
  });
  const defined = new Set(entries.map((e) => e.key));
  for (const e of entries) {
    if (e.single) continue;
    REF_RE.lastIndex = 0;
    for (let m = REF_RE.exec(e.value); m !== null; m = REF_RE.exec(e.value)) {
      const v = m[1] ?? m[2] ?? "";
      if (!defined.has(v)) {
        findings.push({ level: "warn", line: e.line, msg: `references undefined \${${v}}` });
      }
    }
  }
  findings.sort(
    (a, b) => a.line - b.line || LEVEL_ORDER.indexOf(a.level) - LEVEL_ORDER.indexOf(b.level),
  );
  const errors = findings.filter((f) => f.level === "error").length;
  const warns = findings.filter((f) => f.level === "warn").length;
  return { count: entries.length, entries, errors, findings, warns };
}

export function EnvLinter({ className, defaultValue = ENV_SAMPLE }: EnvLinterProps) {
  const [value, setValue] = useState(defaultValue);
  const [reveal, setReveal] = useState(false);

  const result = lintEnv(value);

  return (
    <div
      className={cn(
        "rounded-lg border border-border bg-card text-card-foreground text-xs",
        className,
      )}
    >
      <div className="flex flex-col gap-2 border-border border-b p-3">
        <textarea
          aria-label="env file"
          className="min-h-0 w-full resize-y break-all rounded-md border border-border bg-transparent px-2 py-1.5 font-mono text-xs outline-none focus:border-ring"
          onChange={(e) => {
            setValue(e.target.value);
          }}
          placeholder="KEY=value"
          rows={7}
          spellCheck={false}
          value={value}
        />
        <div className="flex items-center gap-1.5">
          <button
            className={cn(
              "rounded-md border border-border px-1.5 py-0.5 font-mono transition-colors",
              reveal
                ? "bg-muted text-foreground"
                : "text-muted-foreground hover:bg-muted hover:text-foreground",
            )}
            onClick={() => {
              setReveal((p) => !p);
            }}
            type="button"
          >
            reveal secrets
          </button>
          <button
            className="rounded-md border border-border px-1.5 py-0.5 font-mono text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
            onClick={() => {
              setValue(ENV_SAMPLE);
            }}
            type="button"
          >
            load sample
          </button>
        </div>
      </div>
      <div className="flex flex-col gap-3 p-3">
        <div className="flex flex-wrap items-center gap-2 font-mono">
          <span>
            <span className="font-medium">{result.count}</span>{" "}
            <span className="text-muted-foreground">variable{result.count === 1 ? "" : "s"}</span>
          </span>
          <span className="text-muted-foreground">·</span>
          <span style={{ color: result.errors > 0 ? LEVEL_COLOR.error : undefined }}>
            {result.errors} error{result.errors === 1 ? "" : "s"}
          </span>
          <span className="text-muted-foreground">·</span>
          <span style={{ color: result.warns > 0 ? LEVEL_COLOR.warn : undefined }}>
            {result.warns} warning{result.warns === 1 ? "" : "s"}
          </span>
        </div>
        {result.findings.length > 0 && (
          <div className="flex flex-col gap-1 border-border border-t pt-2">
            {result.findings.map((f, i) => (
              <div className="flex items-baseline gap-2" key={`${f.line}-${i}`}>
                <span className="shrink-0 font-mono text-[10px] text-muted-foreground">
                  L{f.line}
                </span>
                <span
                  className="shrink-0 font-medium font-mono text-[10px] uppercase"
                  style={{ color: LEVEL_COLOR[f.level] }}
                >
                  {f.level}
                </span>
                <span className="break-all font-mono">{f.msg}</span>
              </div>
            ))}
          </div>
        )}
        {result.entries.length > 0 && (
          <div className="grid grid-cols-[10rem_1fr] gap-x-2 gap-y-1.5 border-border border-t pt-2">
            {result.entries.map((e) => (
              <div className="contents" key={`${e.line}-${e.key}`}>
                <span className="truncate font-mono text-muted-foreground">{e.key}</span>
                <span className="break-all font-mono">
                  {e.value === "" ? (
                    <span className="text-muted-foreground italic">(empty)</span>
                  ) : e.sensitive && !reveal ? (
                    <span className="text-muted-foreground">{"•".repeat(8)}</span>
                  ) : (
                    e.value
                  )}
                </span>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}

export default EnvLinter;
```

## Log Pattern Extractor

A log pattern extractor: paste raw log lines and cluster them into templates by masking variable tokens (timestamps, IPs, UUIDs, numbers, durations, hex, ids and key=value values), then see each template with its frequency, percentage and an example — sorted by count with a min-count filter.

- Page: https://rocket.gozturk.dev/log-patterns
- Install: `npx shadcn@latest add https://rocket.gozturk.dev/r/log-patterns.json`
- Source: `components/ui/log-patterns.tsx`

```tsx
"use client";

import { useState } from "react";
import { cn } from "@/lib/utils";

export interface PatternGroup {
  count: number;
  example: string;
  pct: number;
  template: string;
}

export interface ExtractResult {
  groups: PatternGroup[];
  patterns: number;
  total: number;
}

export interface LogPatternsProps {
  className?: string;
  defaultMinCount?: number;
  defaultValue?: string;
}

const COLOR_MASK = "#f59e0b";

const ISO_DT = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(?:\.\d+)?(?:Z|[+-]\d{2}:\d{2})?$/;
const TIME = /^\d{2}:\d{2}:\d{2}(?:\.\d+)?$/;
const IP = /^\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}$/;
const UUID = /^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}$/;
const DUR = /^\d+(?:\.\d+)?(?:ns|us|µs|ms|s|m|h)$/;
const NUM = /^-?\d+(?:\.\d+)?$/;
const HEX = /^(?:0x)?[0-9a-fA-F]{6,}$/;
const PLACEHOLDER_SPLIT = /(<[a-z]+>)/g;
const IS_PLACEHOLDER = /^<[a-z]+>$/;

export const PATTERNS_SAMPLE = `2026-06-15T08:01:13Z ERROR payments timeout after 3000ms user=cus_12af
2026-06-15T08:01:14Z INFO api request completed in 142ms
2026-06-15T08:02:02Z ERROR payments timeout after 5000ms user=cus_98zz
2026-06-15T08:03:11Z WARN api slow response 920ms
2026-06-15T08:03:15Z INFO api request completed in 88ms
2026-06-15T08:04:01Z INFO api request completed in 210ms
2026-06-15T08:04:09Z ERROR db connection refused 10.0.12.5`;

function classify(tok: string): string | null {
  if (ISO_DT.test(tok) || TIME.test(tok)) return "<ts>";
  if (IP.test(tok)) return "<ip>";
  if (UUID.test(tok)) return "<uuid>";
  if (DUR.test(tok)) return "<dur>";
  if (NUM.test(tok)) return "<num>";
  if (HEX.test(tok) && /[a-fA-F]/.test(tok)) return "<hex>";
  if (/[A-Za-z]/.test(tok) && /\d/.test(tok) && tok.length > 3) return "<id>";
  return null;
}

function maskToken(tok: string): string {
  const eq = tok.indexOf("=");
  if (eq > 0) {
    const k = tok.slice(0, eq);
    const v = tok.slice(eq + 1);
    return `${k}=${classify(v) ?? v}`;
  }
  return classify(tok) ?? tok;
}

export function templatize(line: string): string {
  return line
    .split(/(\s+)/)
    .map((p) => (/^\s+$/.test(p) ? p : maskToken(p)))
    .join("");
}

export function extractPatterns(text: string, minCount: number): ExtractResult {
  const lines = text.split("\n").filter((l) => l.trim() !== "");
  const map = new Map<string, PatternGroup>();
  for (const line of lines) {
    const t = templatize(line);
    const existing = map.get(t);
    if (existing) {
      existing.count++;
    } else {
      map.set(t, { count: 1, example: line, pct: 0, template: t });
    }
  }
  const total = lines.length;
  const groups = [...map.values()]
    .sort((a, b) => b.count - a.count)
    .filter((g) => g.count >= minCount);
  for (const g of groups) {
    g.pct = total > 0 ? Math.round((g.count / total) * 100) : 0;
  }
  return { groups, patterns: map.size, total };
}

function ColoredTemplate({ template }: { template: string }) {
  const parts = template.split(PLACEHOLDER_SPLIT);
  return (
    <>
      {parts.map((part, i) =>
        IS_PLACEHOLDER.test(part) ? (
          <span key={i} style={{ color: COLOR_MASK }}>
            {part}
          </span>
        ) : (
          <span key={i}>{part}</span>
        ),
      )}
    </>
  );
}

export function LogPatterns({
  className,
  defaultMinCount = 1,
  defaultValue = PATTERNS_SAMPLE,
}: LogPatternsProps) {
  const [value, setValue] = useState(defaultValue);
  const [minCount, setMinCount] = useState(String(defaultMinCount));

  const parsedMin = Number.parseInt(minCount, 10);
  const min = Number.isNaN(parsedMin) || parsedMin < 1 ? 1 : parsedMin;
  const trimmed = value.trim();
  const result = trimmed === "" ? null : extractPatterns(value, min);

  return (
    <div
      className={cn(
        "rounded-lg border border-border bg-card text-card-foreground text-xs",
        className,
      )}
    >
      <div className="flex flex-col gap-2 border-border border-b p-3">
        <textarea
          aria-label="Log lines"
          className="min-h-0 w-full resize-y break-all rounded-md border border-border bg-transparent px-2 py-1.5 font-mono text-xs outline-none focus:border-ring"
          onChange={(e) => {
            setValue(e.target.value);
          }}
          placeholder="paste log lines"
          rows={7}
          spellCheck={false}
          value={value}
        />
        <span className="flex items-center gap-1.5">
          <span className="text-[10px] text-muted-foreground uppercase tracking-wide">
            min count
          </span>
          <input
            aria-label="Minimum count"
            className="h-7 w-16 rounded-md border border-border bg-transparent px-2 text-right font-mono text-xs outline-none focus:border-ring"
            onChange={(e) => {
              setMinCount(e.target.value);
            }}
            spellCheck={false}
            type="text"
            value={minCount}
          />
        </span>
      </div>
      <div className="flex flex-col gap-2 p-3">
        {result === null ? (
          <p className="text-muted-foreground">Paste log lines to cluster</p>
        ) : (
          <>
            <p className="font-mono">
              <span className="font-medium">{result.total}</span>{" "}
              <span className="text-muted-foreground">line{result.total === 1 ? "" : "s"} →</span>{" "}
              <span className="font-medium">{result.patterns}</span>{" "}
              <span className="text-muted-foreground">
                pattern{result.patterns === 1 ? "" : "s"}
              </span>
            </p>
            <div className="flex flex-col divide-y divide-border">
              {result.groups.length === 0 ? (
                <p className="text-muted-foreground">no patterns ≥ {min}</p>
              ) : (
                result.groups.map((g) => (
                  <div className="flex flex-col gap-1 py-2 first:pt-0" key={g.template}>
                    <div className="flex items-baseline gap-2">
                      <span
                        className="shrink-0 font-medium font-mono"
                        style={{ color: COLOR_MASK }}
                      >
                        ×{g.count}
                      </span>
                      <span className="shrink-0 font-mono text-[10px] text-muted-foreground">
                        {g.pct}%
                      </span>
                      <span className="break-all font-mono">
                        <ColoredTemplate template={g.template} />
                      </span>
                    </div>
                    <span className="truncate pl-8 font-mono text-[10px] text-muted-foreground">
                      {g.example}
                    </span>
                  </div>
                ))
              )}
            </div>
          </>
        )}
      </div>
    </div>
  );
}

export default LogPatterns;
```

## Alert Rule Builder

A threshold-based alert rule editor: per-rule metric, aggregation, comparison operator, threshold, 'for' duration and severity, with enable toggles and a live PromQL-style expression plus a YAML/JSON preview with copy.

- Page: https://rocket.gozturk.dev/alert-rule-builder
- Install: `npx shadcn@latest add https://rocket.gozturk.dev/r/alert-rule-builder.json`
- Source: `components/ui/alert-rule-builder.tsx`

```tsx
"use client";

import { Copy, Plus, X } from "lucide-react";
import { AnimatePresence, motion } from "motion/react";
import { useEffect, useRef, useState } from "react";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Switch } from "@/components/ui/switch";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { cn } from "@/lib/utils";

export type Aggregation = "avg" | "sum" | "min" | "max" | "p95" | "p99";
export type ComparisonOperator = ">" | ">=" | "<" | "<=" | "==" | "!=";
export type Severity = "critical" | "warning" | "info";

export interface AlertMetric {
  name: string;
  label?: string;
  unit?: string;
}

export interface AlertRule {
  id: string;
  name: string;
  metric: string;
  aggregation: Aggregation;
  operator: ComparisonOperator;
  threshold: string;
  forDuration: string;
  severity: Severity;
  enabled: boolean;
}

export interface AlertRuleBuilderProps {
  metrics: AlertMetric[];
  value?: AlertRule[];
  defaultValue?: AlertRule[];
  onChange?: (rules: AlertRule[]) => void;
  className?: string;
}

const AGGREGATIONS: { value: Aggregation; label: string }[] = [
  { label: "avg", value: "avg" },
  { label: "sum", value: "sum" },
  { label: "min", value: "min" },
  { label: "max", value: "max" },
  { label: "p95", value: "p95" },
  { label: "p99", value: "p99" },
];

const OPERATORS: { value: ComparisonOperator; label: string }[] = [
  { label: ">", value: ">" },
  { label: "≥", value: ">=" },
  { label: "<", value: "<" },
  { label: "≤", value: "<=" },
  { label: "=", value: "==" },
  { label: "≠", value: "!=" },
];

const SEVERITY_META: Record<Severity, { color: string; label: string }> = {
  critical: { color: "#ef4444", label: "Critical" },
  info: { color: "#3b82f6", label: "Info" },
  warning: { color: "#f59e0b", label: "Warning" },
};

const SEVERITIES: Severity[] = ["critical", "warning", "info"];

function metricUnit(metrics: AlertMetric[], name: string): string {
  return metrics.find((m) => m.name === name)?.unit ?? "";
}

function ruleToExpr(rule: AlertRule, metrics: AlertMetric[]): string {
  const unit = metricUnit(metrics, rule.metric);
  return `${rule.aggregation}(${rule.metric}) ${rule.operator} ${rule.threshold}${unit} for ${rule.forDuration || "0s"}`;
}

function rulesToYAML(rules: AlertRule[]): string {
  if (rules.length === 0) return "# no rules yet";
  return rules
    .map((r) =>
      [
        `- alert: ${r.name || "unnamed"}`,
        `  expr: ${r.aggregation}(${r.metric}) ${r.operator} ${r.threshold}`,
        `  for: ${r.forDuration || "0s"}`,
        `  severity: ${r.severity}`,
        `  enabled: ${r.enabled}`,
      ].join("\n"),
    )
    .join("\n");
}

function useIdFactory() {
  const counter = useRef(0);
  return useRef(() => `ar-${++counter.current}`).current;
}

function useCopy() {
  const [copied, setCopied] = useState(false);
  useEffect(() => {
    if (!copied) return;
    const t = setTimeout(() => setCopied(false), 1500);
    return () => clearTimeout(t);
  }, [copied]);
  const copy = (text: string) => {
    void navigator.clipboard?.writeText(text);
    setCopied(true);
  };
  return { copied, copy };
}

function CopyButton({ text }: { text: string }) {
  const { copied, copy } = useCopy();
  return (
    <Button
      aria-label="Copy"
      className="absolute top-2 right-2 size-7 text-muted-foreground hover:text-foreground"
      onClick={() => copy(text)}
      size="icon"
      type="button"
      variant="ghost"
    >
      {copied ? <span className="text-[10px]">✓</span> : <Copy className="size-3.5" />}
    </Button>
  );
}

function SeverityPicker({ value, onChange }: { value: Severity; onChange: (s: Severity) => void }) {
  return (
    <div className="flex gap-1">
      {SEVERITIES.map((s) => {
        const meta = SEVERITY_META[s];
        const on = value === s;
        return (
          <button
            className={cn(
              "rounded-full border px-2 py-0.5 text-[11px] capitalize transition-colors",
              on ? "border-current" : "border-border text-muted-foreground hover:text-foreground",
            )}
            key={s}
            onClick={() => onChange(s)}
            style={on ? { color: meta.color } : undefined}
            type="button"
          >
            {meta.label}
          </button>
        );
      })}
    </div>
  );
}

function RuleRow({
  rule,
  metrics,
  onChange,
  onRemove,
}: {
  rule: AlertRule;
  metrics: AlertMetric[];
  onChange: (next: AlertRule) => void;
  onRemove: () => void;
}) {
  const meta = SEVERITY_META[rule.severity];
  return (
    <div
      className={cn(
        "space-y-2.5 rounded-lg border border-border/60 bg-muted/40 px-3 py-2.5 transition-opacity",
        !rule.enabled && "opacity-50",
      )}
    >
      <div className="flex items-center gap-2">
        <span className="size-1.5 shrink-0 rounded-full" style={{ background: meta.color }} />
        <Input
          className="h-7 flex-1 border-none bg-transparent px-1 font-medium shadow-none focus-visible:ring-1"
          onChange={(e) => onChange({ ...rule, name: e.target.value })}
          placeholder="Rule name"
          value={rule.name}
        />
        <Switch
          aria-label="Enabled"
          checked={rule.enabled}
          onCheckedChange={(checked) => onChange({ ...rule, enabled: checked })}
          size="sm"
        />
        <Button
          aria-label="Remove rule"
          className="size-7 text-muted-foreground hover:text-foreground"
          onClick={onRemove}
          size="icon"
          type="button"
          variant="ghost"
        >
          <X className="size-3.5" />
        </Button>
      </div>

      <div className="flex flex-wrap items-center gap-1.5">
        <Select
          onValueChange={(v) => onChange({ ...rule, aggregation: v as Aggregation })}
          value={rule.aggregation}
        >
          <SelectTrigger className="h-8 w-[84px]">
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            {AGGREGATIONS.map((a) => (
              <SelectItem key={a.value} value={a.value}>
                {a.label}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>

        <Select onValueChange={(v) => v && onChange({ ...rule, metric: v })} value={rule.metric}>
          <SelectTrigger className="h-8 w-[170px] font-medium">
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            {metrics.map((m) => (
              <SelectItem key={m.name} value={m.name}>
                {m.label ?? m.name}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>

        <Select
          onValueChange={(v) => onChange({ ...rule, operator: v as ComparisonOperator })}
          value={rule.operator}
        >
          <SelectTrigger className="h-8 w-[64px] text-muted-foreground">
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            {OPERATORS.map((o) => (
              <SelectItem key={o.value} value={o.value}>
                {o.label}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>

        <Input
          className="h-8 w-[90px]"
          onChange={(e) => onChange({ ...rule, threshold: e.target.value })}
          type="number"
          value={rule.threshold}
        />

        <span className="text-muted-foreground text-xs">for</span>

        <Input
          className="h-8 w-[70px]"
          onChange={(e) => onChange({ ...rule, forDuration: e.target.value })}
          placeholder="5m"
          value={rule.forDuration}
        />

        <span className="mx-0.5 h-4 w-px bg-border" />

        <SeverityPicker
          onChange={(s) => onChange({ ...rule, severity: s })}
          value={rule.severity}
        />
      </div>

      <p className="truncate rounded bg-background px-2 py-1 font-mono text-[11px] text-muted-foreground">
        {ruleToExpr(rule, metrics)}
      </p>
    </div>
  );
}

function PreviewPanel({ rules }: { rules: AlertRule[] }) {
  const yaml = rulesToYAML(rules);
  const json = JSON.stringify(rules, null, 2);

  return (
    <Tabs className="rounded-lg border border-border bg-muted/30" defaultValue="yaml">
      <div className="flex items-center justify-between border-border border-b px-2 py-1.5">
        <TabsList className="h-7 bg-transparent p-0">
          <TabsTrigger className="h-6 px-2 text-xs" value="yaml">
            YAML
          </TabsTrigger>
          <TabsTrigger className="h-6 px-2 text-xs" value="json">
            JSON
          </TabsTrigger>
        </TabsList>
        {rules.length > 0 ? (
          <Badge className="mr-1" variant="outline">
            {rules.filter((r) => r.enabled).length}/{rules.length} enabled
          </Badge>
        ) : null}
      </div>
      <TabsContent className="relative m-0" value="yaml">
        <CopyButton text={yaml} />
        <pre className="overflow-x-auto p-3 text-xs leading-relaxed">
          <code>{yaml}</code>
        </pre>
      </TabsContent>
      <TabsContent className="relative m-0" value="json">
        <CopyButton text={json} />
        <pre className="overflow-x-auto p-3 text-xs leading-relaxed">
          <code>{json}</code>
        </pre>
      </TabsContent>
    </Tabs>
  );
}

export function AlertRuleBuilder({
  metrics,
  value,
  defaultValue,
  onChange,
  className,
}: AlertRuleBuilderProps) {
  const nextId = useIdFactory();
  const [internal, setInternal] = useState<AlertRule[]>(defaultValue ?? []);
  const isControlled = value !== undefined;
  const rules = isControlled ? value : internal;

  const firstMetric = metrics[0];
  const newRule = (): AlertRule => ({
    aggregation: "avg",
    enabled: true,
    forDuration: "5m",
    id: nextId(),
    metric: firstMetric?.name ?? "",
    name: "",
    operator: ">",
    severity: "warning",
    threshold: "",
  });

  const update = (next: AlertRule[]) => {
    if (!isControlled) setInternal(next);
    onChange?.(next);
  };

  const updateRule = (id: string, next: AlertRule) =>
    update(rules.map((r) => (r.id === id ? next : r)));
  const removeRule = (id: string) => update(rules.filter((r) => r.id !== id));

  return (
    <div className={cn("space-y-4", className)}>
      <div className="space-y-2">
        <AnimatePresence initial={false}>
          {rules.map((rule) => (
            <motion.div
              animate={{ opacity: 1, y: 0 }}
              exit={{ height: 0, opacity: 0 }}
              initial={{ opacity: 0, y: -4 }}
              key={rule.id}
              layout
              transition={{ duration: 0.15 }}
            >
              <RuleRow
                metrics={metrics}
                onChange={(next) => updateRule(rule.id, next)}
                onRemove={() => removeRule(rule.id)}
                rule={rule}
              />
            </motion.div>
          ))}
        </AnimatePresence>

        {rules.length === 0 ? (
          <p className="px-1 py-1.5 text-muted-foreground text-xs italic">No alert rules yet</p>
        ) : null}

        <Button
          className="h-7 gap-1 text-xs"
          onClick={() => update([...rules, newRule()])}
          size="sm"
          type="button"
          variant="outline"
        >
          <Plus className="size-3" /> Rule
        </Button>
      </div>

      <PreviewPanel rules={rules} />
    </div>
  );
}

export default AlertRuleBuilder;
```

## Query Plan Visualizer

A Postgres EXPLAIN ANALYZE plan viewer: paste plan text to get a collapsible node tree with per-node cost/rows/width, actual timing, a self-cost bar, and estimate-vs-actual row misestimate flags — plus planning/execution time summary.

- Page: https://rocket.gozturk.dev/query-plan-visualizer
- Install: `npx shadcn@latest add https://rocket.gozturk.dev/r/query-plan-visualizer.json`
- Source: `components/ui/query-plan-visualizer.tsx`

```tsx
"use client";

import { ChevronRight } from "lucide-react";
import { useMemo, useState } from "react";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Switch } from "@/components/ui/switch";
import { Textarea } from "@/components/ui/textarea";
import { cn } from "@/lib/utils";

export interface PlanNode {
  id: string;
  label: string;
  costStart: number;
  costEnd: number;
  planRows: number;
  width: number;
  actualStart?: number;
  actualEnd?: number;
  actualRows?: number;
  loops?: number;
  details: string[];
  children: PlanNode[];
}

export interface ParsedPlan {
  root: PlanNode | null;
  planningTimeMs?: number;
  executionTimeMs?: number;
  error?: string;
}

export interface QueryPlanVisualizerProps {
  value?: string;
  defaultValue?: string;
  onChange?: (text: string) => void;
  className?: string;
}

const NODE_RE =
  /^(\s*)(?:->\s+)?(.+?)\s+\(cost=([\d.]+)\.\.([\d.]+)\s+rows=(\d+)\s+width=(\d+)\)(?:\s+\(actual time=([\d.]+)\.\.([\d.]+)\s+rows=(\d+)\s+loops=(\d+)\))?\s*$/;
const PLANNING_RE = /^Planning Time:\s*([\d.]+)\s*ms/i;
const EXECUTION_RE = /^Execution Time:\s*([\d.]+)\s*ms/i;
const BORDER_RE = /^[\s|+-]*$/;

export const EXPLAIN_SAMPLE = `Sort  (cost=125.66..129.41 rows=1500 width=48) (actual time=1.230..1.245 rows=1500 loops=1)
  Sort Key: o.created_at DESC
  Sort Method: quicksort  Memory: 133kB
  ->  Hash Join  (cost=64.62..131.25 rows=1500 width=48) (actual time=0.612..1.023 rows=1500 loops=1)
        Hash Cond: (o.customer_id = c.id)
        ->  Seq Scan on orders o  (cost=0.00..55.50 rows=1500 width=24) (actual time=0.012..0.410 rows=1500 loops=1)
              Filter: (status = 'completed'::text)
              Rows Removed by Filter: 320
        ->  Hash  (cost=48.00..48.00 rows=1200 width=28) (actual time=0.480..0.480 rows=1200 loops=1)
              Buckets: 2048  Batches: 1  Memory Usage: 73kB
              ->  Seq Scan on customers c  (cost=0.00..48.00 rows=1200 width=28) (actual time=0.005..0.220 rows=1200 loops=1)
Planning Time: 0.223 ms
Execution Time: 1.489 ms`;

function makeId(counter: { n: number }): string {
  return `plan-${counter.n++}`;
}

export function parseExplain(text: string): ParsedPlan {
  const counter = { n: 0 };
  const stack: { node: PlanNode; indent: number }[] = [];
  let root: PlanNode | null = null;
  let planningTimeMs: number | undefined;
  let executionTimeMs: number | undefined;

  for (const raw of text.split("\n")) {
    const line = raw.replace(/\s+$/, "");
    if (line.trim() === "" || BORDER_RE.test(line) || /^QUERY PLAN$/i.test(line.trim())) continue;

    const m = NODE_RE.exec(line);
    if (m) {
      const indent = m[1].length;
      const node: PlanNode = {
        actualEnd: m[8] !== undefined ? Number.parseFloat(m[8]) : undefined,
        actualRows: m[9] !== undefined ? Number.parseInt(m[9], 10) : undefined,
        actualStart: m[7] !== undefined ? Number.parseFloat(m[7]) : undefined,
        children: [],
        costEnd: Number.parseFloat(m[4]),
        costStart: Number.parseFloat(m[3]),
        details: [],
        id: makeId(counter),
        label: m[2].trim(),
        loops: m[10] !== undefined ? Number.parseInt(m[10], 10) : undefined,
        planRows: Number.parseInt(m[5], 10),
        width: Number.parseInt(m[6], 10),
      };
      while (stack.length && stack[stack.length - 1].indent >= indent) stack.pop();
      if (stack.length === 0) {
        if (!root) root = node;
      } else {
        stack[stack.length - 1].node.children.push(node);
      }
      stack.push({ indent, node });
      continue;
    }

    const pm = PLANNING_RE.exec(line.trim());
    if (pm) {
      planningTimeMs = Number.parseFloat(pm[1]);
      continue;
    }
    const em = EXECUTION_RE.exec(line.trim());
    if (em) {
      executionTimeMs = Number.parseFloat(em[1]);
      continue;
    }
    if (stack.length) stack[stack.length - 1].node.details.push(line.trim());
  }

  if (!root) {
    return {
      error: 'No plan node found — expected a line like "... (cost=0.00..1.00 rows=1 width=4)".',
      root: null,
    };
  }
  return { executionTimeMs, planningTimeMs, root };
}

function countNodes(node: PlanNode): number {
  return 1 + node.children.reduce((sum, c) => sum + countNodes(c), 0);
}

function selfCost(node: PlanNode): number {
  const childrenCost = node.children.reduce((sum, c) => sum + c.costEnd, 0);
  return Math.max(node.costEnd - childrenCost, 0);
}

function rowRatio(node: PlanNode): number | null {
  if (node.actualRows === undefined) return null;
  if (node.planRows === 0) return node.actualRows === 0 ? 1 : Number.POSITIVE_INFINITY;
  return node.actualRows / node.planRows;
}

function formatMs(ms: number): string {
  if (ms >= 1000) return `${(ms / 1000).toFixed(2)}s`;
  if (ms >= 100) return `${Math.round(ms)}ms`;
  if (ms >= 10) return `${ms.toFixed(1)}ms`;
  return `${ms.toFixed(2)}ms`;
}

function formatRatio(ratio: number): string {
  if (!Number.isFinite(ratio)) return "∞×";
  if (ratio >= 10) return `${Math.round(ratio)}×`;
  return `${ratio.toFixed(1)}×`;
}

interface Row {
  node: PlanNode;
  depth: number;
  hasChildren: boolean;
  collapsed: boolean;
}

function flatten(node: PlanNode, depth: number, collapsed: Set<string>, out: Row[]) {
  const hasChildren = node.children.length > 0;
  const isCollapsed = collapsed.has(node.id);
  out.push({ collapsed: isCollapsed, depth, hasChildren, node });
  if (hasChildren && !isCollapsed) {
    for (const child of node.children) flatten(child, depth + 1, collapsed, out);
  }
}

function PlanRow({
  row,
  rootCost,
  flagMisestimates,
  onToggle,
}: {
  row: Row;
  rootCost: number;
  flagMisestimates: boolean;
  onToggle: () => void;
}) {
  const { node, depth, hasChildren, collapsed } = row;
  const barPct = rootCost > 0 ? Math.max((selfCost(node) / rootCost) * 100, 1) : 0;
  const ratio = rowRatio(node);
  const misestimate = flagMisestimates && ratio !== null && (ratio >= 5 || ratio <= 0.2);

  return (
    <div className="border-border/60 border-b py-1.5 last:border-b-0">
      <div
        className="flex items-start gap-1.5"
        style={{ paddingLeft: 8 + depth * 14, paddingRight: 8 }}
      >
        {hasChildren ? (
          <Button
            aria-label={collapsed ? "Expand node" : "Collapse node"}
            className="mt-0.5 size-4 shrink-0 text-muted-foreground hover:text-foreground"
            onClick={onToggle}
            size="icon"
            type="button"
            variant="ghost"
          >
            <ChevronRight
              className={cn("size-3 transition-transform", !collapsed && "rotate-90")}
            />
          </Button>
        ) : (
          <span className="mt-0.5 inline-block size-4 shrink-0" />
        )}

        <div className="min-w-0 flex-1">
          <div className="flex flex-wrap items-baseline gap-x-2 gap-y-0.5">
            <span className="font-medium">{node.label}</span>
            <span className="text-[11px] text-muted-foreground tabular-nums">
              cost={node.costStart.toFixed(2)}..{node.costEnd.toFixed(2)}
            </span>
            <span className="text-[11px] text-muted-foreground tabular-nums">
              rows={node.planRows}
            </span>
            {node.actualRows !== undefined ? (
              <span className="text-[11px] text-muted-foreground tabular-nums">
                actual {formatMs(node.actualStart ?? 0)}..{formatMs(node.actualEnd ?? 0)} rows=
                {node.actualRows} loops={node.loops}
              </span>
            ) : null}
            {misestimate && ratio !== null ? (
              <Badge className="h-4 px-1 text-[10px]" variant="destructive">
                {formatRatio(ratio)} rows
              </Badge>
            ) : null}
          </div>

          <div className="relative mt-1 h-1.5 w-full max-w-48 overflow-hidden rounded-full bg-muted">
            <div
              className={cn(
                "h-full rounded-full",
                misestimate ? "bg-destructive" : "bg-primary/70",
              )}
              style={{ width: `${barPct}%` }}
            />
          </div>

          {!collapsed && node.details.length > 0 ? (
            <div className="mt-1 flex flex-col gap-0.5">
              {node.details.map((d, i) => (
                <span
                  className="break-all text-[11px] text-muted-foreground italic"
                  key={`${node.id}-d${i}`}
                >
                  {d}
                </span>
              ))}
            </div>
          ) : null}
        </div>
      </div>
    </div>
  );
}

export function QueryPlanVisualizer({
  value,
  defaultValue = EXPLAIN_SAMPLE,
  onChange,
  className,
}: QueryPlanVisualizerProps) {
  const [internal, setInternal] = useState(defaultValue);
  const isControlled = value !== undefined;
  const text = isControlled ? value : internal;

  const [collapsed, setCollapsed] = useState<Set<string>>(() => new Set());
  const [flagMisestimates, setFlagMisestimates] = useState(true);

  const setText = (next: string) => {
    if (!isControlled) setInternal(next);
    onChange?.(next);
  };

  const parsed = useMemo(() => parseExplain(text), [text]);
  const rows = useMemo(() => {
    if (!parsed.root) return [];
    const out: Row[] = [];
    flatten(parsed.root, 0, collapsed, out);
    return out;
  }, [parsed.root, collapsed]);

  const toggle = (id: string) =>
    setCollapsed((prev) => {
      const next = new Set(prev);
      if (next.has(id)) next.delete(id);
      else next.add(id);
      return next;
    });

  const nodeCount = parsed.root ? countNodes(parsed.root) : 0;
  const rootCost = parsed.root?.costEnd ?? 0;

  return (
    <div
      className={cn("overflow-hidden rounded-lg border border-border bg-card text-xs", className)}
    >
      <div className="space-y-2 border-border border-b p-3">
        <Textarea
          className="min-h-24 font-mono text-[11px]"
          onChange={(e) => setText(e.target.value)}
          placeholder="Paste EXPLAIN ANALYZE output…"
          spellCheck={false}
          value={text}
        />
        <div className="flex flex-wrap items-center gap-3">
          <Button
            className="h-7 text-xs"
            onClick={() => setText(EXPLAIN_SAMPLE)}
            size="sm"
            type="button"
            variant="outline"
          >
            Load sample
          </Button>
          <div className="flex items-center gap-1.5 text-muted-foreground">
            <Switch
              aria-label="Flag row misestimates"
              checked={flagMisestimates}
              id="flag-misestimates"
              onCheckedChange={setFlagMisestimates}
              size="sm"
            />
            <label htmlFor="flag-misestimates">Flag row misestimates</label>
          </div>
        </div>
      </div>

      {parsed.error ? (
        <p className="px-3 py-6 text-center text-muted-foreground text-xs italic">{parsed.error}</p>
      ) : (
        <>
          <div className="max-h-96 overflow-y-auto">
            {rows.map((row) => (
              <PlanRow
                flagMisestimates={flagMisestimates}
                key={row.node.id}
                onToggle={() => toggle(row.node.id)}
                rootCost={rootCost}
                row={row}
              />
            ))}
          </div>
          <div className="flex flex-wrap items-center gap-2 border-border border-t px-3 py-2 text-[11px] text-muted-foreground">
            <Badge variant="outline">{nodeCount} nodes</Badge>
            {parsed.planningTimeMs !== undefined ? (
              <Badge variant="outline">Planning {formatMs(parsed.planningTimeMs)}</Badge>
            ) : null}
            {parsed.executionTimeMs !== undefined ? (
              <Badge variant="outline">Execution {formatMs(parsed.executionTimeMs)}</Badge>
            ) : null}
          </div>
        </>
      )}
    </div>
  );
}

export default QueryPlanVisualizer;
```

## Index Advisor

A composite-index advisor: define query patterns (equality columns + an optional range/order column), and get leftmost-prefix-deduped CREATE INDEX recommendations with per-pattern 'new index' vs 'covered by' status and copy-ready SQL.

- Page: https://rocket.gozturk.dev/index-advisor
- Install: `npx shadcn@latest add https://rocket.gozturk.dev/r/index-advisor.json`
- Source: `components/ui/index-advisor.tsx`

```tsx
"use client";

import { Copy, Plus, X } from "lucide-react";
import { useMemo, useRef, useState } from "react";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
import { cn } from "@/lib/utils";

export interface QueryPattern {
  id: string;
  label: string;
  equalityColumns: string[];
  rangeColumn?: string;
}

export interface IndexAdvisorProps {
  table?: string;
  columns?: string[];
  defaultPatterns?: QueryPattern[];
  className?: string;
}

export interface RecommendedIndex {
  columns: string[];
  patternIds: string[];
}

const NONE = "__none__";

export const INDEX_ADVISOR_SAMPLE_COLUMNS = [
  "id",
  "customer_id",
  "status",
  "region",
  "created_at",
  "total",
];

export const INDEX_ADVISOR_SAMPLE_PATTERNS: QueryPattern[] = [
  {
    equalityColumns: ["customer_id", "status"],
    id: "p1",
    label: "Recent orders for a customer",
    rangeColumn: "created_at",
  },
  {
    equalityColumns: ["customer_id"],
    id: "p2",
    label: "All orders for a customer",
  },
  {
    equalityColumns: ["region"],
    id: "p3",
    label: "Orders by region, newest first",
    rangeColumn: "created_at",
  },
];

function useIdFactory() {
  const counter = useRef(0);
  return useRef(() => `idx-${++counter.current}`).current;
}

function patternTuple(pattern: QueryPattern): string[] {
  const cols = [...pattern.equalityColumns];
  if (pattern.rangeColumn && !cols.includes(pattern.rangeColumn)) cols.push(pattern.rangeColumn);
  return cols;
}

function isPrefixOf(a: string[], b: string[]): boolean {
  if (a.length > b.length) return false;
  return a.every((c, i) => c === b[i]);
}

export function recommendIndexes(patterns: QueryPattern[]): {
  indexes: RecommendedIndex[];
  coverage: Map<string, string[]>;
} {
  const tuples = patterns
    .map((p) => ({ id: p.id, tuple: patternTuple(p) }))
    .filter((t) => t.tuple.length > 0);

  const maximal: { tuple: string[]; patternIds: string[] }[] = [];
  for (const { tuple } of tuples) {
    const key = tuple.join("|");
    if (maximal.some((m) => m.tuple.join("|") === key)) continue;
    const isStrictPrefixOfAnother = tuples.some(
      (other) =>
        other.tuple.join("|") !== key &&
        isPrefixOf(tuple, other.tuple) &&
        other.tuple.length > tuple.length,
    );
    if (!isStrictPrefixOfAnother) maximal.push({ patternIds: [], tuple });
  }

  const coverage = new Map<string, string[]>();
  for (const { id, tuple } of tuples) {
    const covering = maximal.find((m) => isPrefixOf(tuple, m.tuple));
    if (covering) {
      covering.patternIds.push(id);
      coverage.set(id, covering.tuple);
    }
  }

  return {
    coverage,
    indexes: maximal.map((m) => ({ columns: m.tuple, patternIds: m.patternIds })),
  };
}

function indexName(table: string, columns: string[]): string {
  return `idx_${table}_${columns.join("_")}`;
}

function indexSQL(table: string, columns: string[]): string {
  return `CREATE INDEX ${indexName(table, columns)} ON ${table} (${columns.join(", ")});`;
}

function useCopy() {
  const [copied, setCopied] = useState<string | null>(null);
  const copy = (key: string, text: string) => {
    void navigator.clipboard?.writeText(text);
    setCopied(key);
    setTimeout(() => setCopied((c) => (c === key ? null : c)), 1500);
  };
  return { copied, copy };
}

function PatternRow({
  pattern,
  columns,
  onChange,
  onRemove,
  covering,
}: {
  pattern: QueryPattern;
  columns: string[];
  onChange: (next: QueryPattern) => void;
  onRemove: () => void;
  covering?: string[];
}) {
  const tuple = patternTuple(pattern);
  const isNewIndex = covering && covering.join("|") === tuple.join("|");

  return (
    <div className="space-y-2 rounded-lg border border-border/60 bg-muted/40 px-3 py-2.5">
      <div className="flex items-center gap-2">
        <Input
          className="h-7 flex-1 border-none bg-transparent px-1 font-medium shadow-none focus-visible:ring-1"
          onChange={(e) => onChange({ ...pattern, label: e.target.value })}
          placeholder="Query pattern name"
          value={pattern.label}
        />
        <Button
          aria-label="Remove pattern"
          className="size-7 text-muted-foreground hover:text-foreground"
          onClick={onRemove}
          size="icon"
          type="button"
          variant="ghost"
        >
          <X className="size-3.5" />
        </Button>
      </div>

      <div className="flex flex-wrap items-center gap-2">
        <span className="text-[11px] text-muted-foreground">WHERE =</span>
        <ToggleGroup
          multiple
          onValueChange={(cols) => onChange({ ...pattern, equalityColumns: cols })}
          spacing={1}
          value={pattern.equalityColumns}
        >
          {columns.map((c) => (
            <ToggleGroupItem className="h-7 px-2 text-xs" key={c} size="sm" value={c}>
              {c}
            </ToggleGroupItem>
          ))}
        </ToggleGroup>
      </div>

      <div className="flex flex-wrap items-center gap-2">
        <span className="text-[11px] text-muted-foreground">RANGE / ORDER BY</span>
        <Select
          onValueChange={(v) =>
            v && onChange({ ...pattern, rangeColumn: v === NONE ? undefined : v })
          }
          value={pattern.rangeColumn ?? NONE}
        >
          <SelectTrigger className="h-7 w-[150px] text-xs">
            <SelectValue>{(v: string) => (v === NONE ? "None" : v)}</SelectValue>
          </SelectTrigger>
          <SelectContent>
            <SelectItem value={NONE}>None</SelectItem>
            {columns.map((c) => (
              <SelectItem key={c} value={c}>
                {c}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
      </div>

      {tuple.length > 0 ? (
        <div className="flex flex-wrap items-center gap-1.5 border-border/60 border-t pt-2 text-[11px]">
          <span className="font-mono text-muted-foreground">({tuple.join(", ")})</span>
          {isNewIndex ? (
            <Badge className="h-4 px-1 text-[10px]" variant="outline">
              new index
            </Badge>
          ) : covering ? (
            <Badge className="h-4 px-1 text-[10px]" variant="secondary">
              covered by ({covering.join(", ")})
            </Badge>
          ) : null}
        </div>
      ) : (
        <p className="text-[11px] text-muted-foreground italic">
          Pick at least one equality column
        </p>
      )}
    </div>
  );
}

export function IndexAdvisor({
  table = "orders",
  columns = INDEX_ADVISOR_SAMPLE_COLUMNS,
  defaultPatterns = INDEX_ADVISOR_SAMPLE_PATTERNS,
  className,
}: IndexAdvisorProps) {
  const nextId = useIdFactory();
  const [patterns, setPatterns] = useState<QueryPattern[]>(defaultPatterns);
  const { copied, copy } = useCopy();

  const { indexes, coverage } = useMemo(() => recommendIndexes(patterns), [patterns]);

  const updatePattern = (id: string, next: QueryPattern) =>
    setPatterns((prev) => prev.map((p) => (p.id === id ? next : p)));
  const removePattern = (id: string) => setPatterns((prev) => prev.filter((p) => p.id !== id));
  const addPattern = () =>
    setPatterns((prev) => [
      ...prev,
      { equalityColumns: [], id: nextId(), label: "", rangeColumn: undefined },
    ]);

  return (
    <div className={cn("space-y-4", className)}>
      <div className="space-y-2">
        {patterns.map((p) => (
          <PatternRow
            columns={columns}
            covering={coverage.get(p.id)}
            key={p.id}
            onChange={(next) => updatePattern(p.id, next)}
            onRemove={() => removePattern(p.id)}
            pattern={p}
          />
        ))}
        {patterns.length === 0 ? (
          <p className="px-1 py-1.5 text-muted-foreground text-xs italic">No query patterns yet</p>
        ) : null}
        <Button
          className="h-7 gap-1 text-xs"
          onClick={addPattern}
          size="sm"
          type="button"
          variant="outline"
        >
          <Plus className="size-3" /> Query pattern
        </Button>
      </div>

      <div className="rounded-lg border border-border bg-muted/30">
        <div className="flex items-center justify-between border-border border-b px-3 py-1.5">
          <span className="font-medium text-xs">Recommended indexes</span>
          <Badge variant="outline">
            {indexes.length} index{indexes.length === 1 ? "" : "es"}
          </Badge>
        </div>
        {indexes.length === 0 ? (
          <p className="px-3 py-4 text-center text-muted-foreground text-xs italic">
            No indexes recommended yet
          </p>
        ) : (
          <div className="divide-y divide-border/60">
            {indexes.map((idx) => {
              const sql = indexSQL(table, idx.columns);
              const key = idx.columns.join("|");
              return (
                <div className="flex items-center justify-between gap-2 px-3 py-2" key={key}>
                  <div className="min-w-0 flex-1">
                    <code className="block truncate font-mono text-[11px]">{sql}</code>
                    <span className="text-[10px] text-muted-foreground">
                      serves {idx.patternIds.length} pattern{idx.patternIds.length === 1 ? "" : "s"}
                    </span>
                  </div>
                  <Button
                    aria-label="Copy SQL"
                    className="size-7 shrink-0 text-muted-foreground hover:text-foreground"
                    onClick={() => copy(key, sql)}
                    size="icon"
                    type="button"
                    variant="ghost"
                  >
                    {copied === key ? (
                      <span className="text-[10px]">✓</span>
                    ) : (
                      <Copy className="size-3.5" />
                    )}
                  </Button>
                </div>
              );
            })}
          </div>
        )}
      </div>
    </div>
  );
}

export default IndexAdvisor;
```

## Cache Control Inspector

An HTTP caching header analyzer: paste response headers to parse Cache-Control directives and get separate browser vs shared-cache (CDN/proxy) verdicts — cacheable Yes/No, TTL, remaining freshness after Age, and revalidation/Vary notes.

- Page: https://rocket.gozturk.dev/cache-control-inspector
- Install: `npx shadcn@latest add https://rocket.gozturk.dev/r/cache-control-inspector.json`
- Source: `components/ui/cache-control-inspector.tsx`

```tsx
"use client";

import { useMemo, useState } from "react";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Textarea } from "@/components/ui/textarea";
import { cn } from "@/lib/utils";

export interface CacheDirective {
  key: string;
  value?: string;
}

export interface CacheVerdict {
  cacheable: boolean;
  reason: string;
  ttlSeconds?: number;
  remainingSeconds?: number;
  notes: string[];
}

export interface CacheAnalysis {
  headers: Record<string, string>;
  directives: CacheDirective[];
  age: number;
  vary: string[];
  hasEtag: boolean;
  hasLastModified: boolean;
  browser: CacheVerdict;
  shared: CacheVerdict;
}

export interface CacheControlInspectorProps {
  value?: string;
  defaultValue?: string;
  onChange?: (text: string) => void;
  className?: string;
}

const DIRECTIVE_INFO: Record<string, string> = {
  immutable:
    "The response body will not change while still fresh — clients should skip revalidation entirely.",
  "max-age": "Freshness lifetime in seconds for all caches, unless overridden for shared caches.",
  "must-revalidate":
    "Once stale, the cache must revalidate with the origin before reuse — even on a network error.",
  "no-cache": "May be stored, but must be revalidated with the origin before every reuse.",
  "no-store": "Must not be cached anywhere, not even partially.",
  "no-transform": "Caches and proxies must not modify the response body.",
  private: "Only the end client may cache this; shared caches (CDN/proxy) must not store it.",
  "proxy-revalidate": "Same as must-revalidate, but only enforced for shared caches.",
  public: "May be stored by any cache, even responses that would otherwise be non-cacheable.",
  "s-maxage": "Freshness lifetime in seconds for shared caches only — overrides max-age for them.",
  "stale-if-error":
    "If revalidation fails with an origin error, a cache may serve the stale copy for N more seconds.",
  "stale-while-revalidate":
    "After going stale, a cache may serve the stale copy for N more seconds while revalidating in the background.",
};

export const CACHE_CONTROL_SAMPLE = `Cache-Control: public, max-age=300, s-maxage=3600, stale-while-revalidate=60
ETag: "33a64df551425fcc55e4d42a148795d9f25f89"
Last-Modified: Wed, 21 Oct 2026 07:28:00 GMT
Age: 120
Vary: Accept-Encoding`;

function parseHeaders(text: string): Record<string, string> {
  const headers: Record<string, string> = {};
  for (const line of text.split("\n")) {
    const m = /^([A-Za-z-]+)\s*:\s*(.*)$/.exec(line.trim());
    if (!m) continue;
    const key = m[1].toLowerCase();
    if (!(key in headers)) headers[key] = m[2].trim();
  }
  return headers;
}

function parseCacheControl(value: string | undefined): CacheDirective[] {
  if (!value) return [];
  return value
    .split(",")
    .map((part) => part.trim())
    .filter(Boolean)
    .map((part) => {
      const eq = part.indexOf("=");
      if (eq === -1) return { key: part.toLowerCase() };
      return {
        key: part.slice(0, eq).trim().toLowerCase(),
        value: part
          .slice(eq + 1)
          .trim()
          .replace(/^"|"$/g, ""),
      };
    });
}

function directiveNum(directives: CacheDirective[], key: string): number | undefined {
  const d = directives.find((x) => x.key === key);
  if (!d?.value) return undefined;
  const n = Number.parseInt(d.value, 10);
  return Number.isFinite(n) ? n : undefined;
}

function has(directives: CacheDirective[], key: string): boolean {
  return directives.some((d) => d.key === key);
}

export function analyzeCacheHeaders(text: string): CacheAnalysis {
  const headers = parseHeaders(text);
  const directives = parseCacheControl(headers["cache-control"]);
  const age = Number.parseInt(headers.age ?? "0", 10) || 0;
  const vary = (headers.vary ?? "")
    .split(",")
    .map((v) => v.trim())
    .filter(Boolean);
  const hasEtag = "etag" in headers;
  const hasLastModified = "last-modified" in headers;

  const noStore = has(directives, "no-store");
  const noCache = has(directives, "no-cache");
  const isPrivate = has(directives, "private");
  const mustRevalidate = has(directives, "must-revalidate") || has(directives, "proxy-revalidate");
  const swr = directiveNum(directives, "stale-while-revalidate");
  const maxAge = directiveNum(directives, "max-age");
  const sMaxAge = directiveNum(directives, "s-maxage");

  const canRevalidate = hasEtag || hasLastModified;

  const browserNotes: string[] = [];
  if (noCache) browserNotes.push("no-cache: must revalidate before every reuse, even if fresh.");
  if (maxAge === undefined && !noStore)
    browserNotes.push("No max-age/Expires — the browser may apply heuristic freshness.");
  if (swr !== undefined) browserNotes.push(`May serve stale for ${swr}s more while revalidating.`);
  if (!canRevalidate && !noStore)
    browserNotes.push("No ETag/Last-Modified — revalidation would require a full re-fetch.");

  const browser: CacheVerdict = {
    cacheable: !noStore,
    notes: browserNotes,
    reason: noStore ? "no-store forbids caching" : "no directive forbids browser caching",
    remainingSeconds: !noStore && maxAge !== undefined ? Math.max(maxAge - age, 0) : undefined,
    ttlSeconds: noStore ? undefined : maxAge,
  };

  const sharedTtl = sMaxAge ?? maxAge;
  const sharedCacheable = !noStore && !isPrivate;
  const sharedNotes: string[] = [];
  if (isPrivate)
    sharedNotes.push("private: shared caches (CDN/proxy) must not store this response.");
  if (noCache) sharedNotes.push("no-cache: must revalidate before every reuse, even if fresh.");
  if (sMaxAge !== undefined)
    sharedNotes.push(`s-maxage=${sMaxAge} overrides max-age for shared caches.`);
  if (mustRevalidate)
    sharedNotes.push("must-revalidate/proxy-revalidate: cannot serve stale once expired.");
  if (swr !== undefined) sharedNotes.push(`May serve stale for ${swr}s more while revalidating.`);
  if (vary.includes("*")) sharedNotes.push("Vary: * — effectively uncacheable by shared caches.");

  const shared: CacheVerdict = {
    cacheable: sharedCacheable,
    notes: sharedNotes,
    reason: noStore
      ? "no-store forbids caching"
      : isPrivate
        ? "private forbids shared caching"
        : "cacheable by shared caches",
    remainingSeconds:
      sharedCacheable && sharedTtl !== undefined ? Math.max(sharedTtl - age, 0) : undefined,
    ttlSeconds: sharedCacheable ? sharedTtl : undefined,
  };

  return { age, browser, directives, hasEtag, hasLastModified, headers, shared, vary };
}

function formatSeconds(s: number): string {
  if (s >= 86400) return `${(s / 86400).toFixed(1)}d`;
  if (s >= 3600) return `${(s / 3600).toFixed(1)}h`;
  if (s >= 60) return `${(s / 60).toFixed(1)}m`;
  return `${s}s`;
}

function VerdictCard({ title, verdict }: { title: string; verdict: CacheVerdict }) {
  return (
    <div className="flex-1 space-y-2 rounded-lg border border-border/60 bg-muted/40 p-3">
      <div className="flex items-center justify-between">
        <span className="font-medium text-xs">{title}</span>
        <Badge
          className={cn(!verdict.cacheable && "border-destructive/40 text-destructive")}
          variant={verdict.cacheable ? "secondary" : "outline"}
        >
          {verdict.cacheable ? "Cacheable" : "Not cacheable"}
        </Badge>
      </div>
      <p className="text-[11px] text-muted-foreground">{verdict.reason}</p>
      {verdict.cacheable ? (
        <div className="flex flex-wrap gap-x-3 gap-y-1 font-mono text-[11px]">
          <span>
            TTL{" "}
            <span className="text-foreground">
              {verdict.ttlSeconds !== undefined ? formatSeconds(verdict.ttlSeconds) : "heuristic"}
            </span>
          </span>
          {verdict.remainingSeconds !== undefined ? (
            <span>
              remaining{" "}
              <span
                className={cn(
                  "text-foreground",
                  verdict.remainingSeconds === 0 && "text-amber-600 dark:text-amber-400",
                )}
              >
                {verdict.remainingSeconds === 0 ? "stale" : formatSeconds(verdict.remainingSeconds)}
              </span>
            </span>
          ) : null}
        </div>
      ) : null}
      {verdict.notes.length > 0 ? (
        <ul className="space-y-0.5 border-border/60 border-t pt-1.5">
          {verdict.notes.map((n) => (
            <li className="text-[11px] text-muted-foreground italic" key={n}>
              {n}
            </li>
          ))}
        </ul>
      ) : null}
    </div>
  );
}

export function CacheControlInspector({
  value,
  defaultValue = CACHE_CONTROL_SAMPLE,
  onChange,
  className,
}: CacheControlInspectorProps) {
  const [internal, setInternal] = useState(defaultValue);
  const isControlled = value !== undefined;
  const text = isControlled ? value : internal;

  const setText = (next: string) => {
    if (!isControlled) setInternal(next);
    onChange?.(next);
  };

  const analysis = useMemo(() => analyzeCacheHeaders(text), [text]);

  return (
    <div
      className={cn("overflow-hidden rounded-lg border border-border bg-card text-xs", className)}
    >
      <div className="space-y-2 border-border border-b p-3">
        <Textarea
          className="min-h-24 font-mono text-[11px]"
          onChange={(e) => setText(e.target.value)}
          placeholder="Paste response headers…"
          spellCheck={false}
          value={text}
        />
        <Button
          className="h-7 text-xs"
          onClick={() => setText(CACHE_CONTROL_SAMPLE)}
          size="sm"
          type="button"
          variant="outline"
        >
          Load sample
        </Button>
      </div>

      <div className="space-y-3 p-3">
        {analysis.directives.length > 0 ? (
          <div className="flex flex-wrap gap-1.5">
            {analysis.directives.map((d) => (
              <Badge
                className="font-mono"
                key={`${d.key}-${d.value ?? ""}`}
                title={DIRECTIVE_INFO[d.key]}
                variant="outline"
              >
                {d.key}
                {d.value !== undefined ? `=${d.value}` : ""}
              </Badge>
            ))}
          </div>
        ) : (
          <p className="text-muted-foreground italic">No Cache-Control header found.</p>
        )}

        <div className="flex flex-col gap-2 sm:flex-row">
          <VerdictCard title="Browser" verdict={analysis.browser} />
          <VerdictCard title="Shared cache (CDN / proxy)" verdict={analysis.shared} />
        </div>

        <div className="flex flex-wrap items-center gap-2 border-border/60 border-t pt-2 text-[11px] text-muted-foreground">
          <span>Age {analysis.age}s</span>
          <span>·</span>
          <span>{analysis.hasEtag ? "has ETag" : "no ETag"}</span>
          <span>·</span>
          <span>{analysis.hasLastModified ? "has Last-Modified" : "no Last-Modified"}</span>
          {analysis.vary.length > 0 ? (
            <>
              <span>·</span>
              <span>Vary: {analysis.vary.join(", ")}</span>
            </>
          ) : null}
        </div>
      </div>
    </div>
  );
}

export default CacheControlInspector;
```

## GraphQL Query Inspector

A GraphQL document inspector: paste a query/mutation to get a collapsible selection-set tree with args/directives (variable references highlighted), a variables table cross-checked against a pasted Variables JSON for missing required or unused variables.

- Page: https://rocket.gozturk.dev/graphql-query-inspector
- Install: `npx shadcn@latest add https://rocket.gozturk.dev/r/graphql-query-inspector.json`
- Source: `components/ui/graphql-query-inspector.tsx`

```tsx
"use client";

import { ChevronRight } from "lucide-react";
import { useMemo, useState } from "react";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Textarea } from "@/components/ui/textarea";
import { cn } from "@/lib/utils";

export interface GqlField {
  id: string;
  alias?: string;
  name: string;
  argsRaw?: string;
  directivesRaw?: string;
  children: GqlField[];
}

export interface GqlVariable {
  name: string;
  type: string;
  required: boolean;
  defaultRaw?: string;
}

export type OperationType = "query" | "mutation" | "subscription";

export interface ParsedGql {
  operationType: OperationType;
  operationName?: string;
  variables: GqlVariable[];
  root: GqlField[];
  variablesUsed: Set<string>;
  error?: string;
}

export interface GraphqlQueryInspectorProps {
  defaultQuery?: string;
  defaultVariables?: string;
  className?: string;
}

export const GRAPHQL_QUERY_SAMPLE = `query GetUserOrders($userId: ID!, $status: OrderStatus, $limit: Int = 10, $withOrders: Boolean = true) {
  user(id: $userId) {
    id
    name
    email
    orders(status: $status, first: $limit) @include(if: $withOrders) {
      id
      total
      createdAt
      items {
        sku
        quantity
      }
    }
  }
}`;

export const GRAPHQL_VARIABLES_SAMPLE = `{
  "userId": "usr_123"
}`;

interface Cursor {
  pos: number;
}

function skipIgnored(src: string, cur: Cursor) {
  for (;;) {
    const c = src[cur.pos];
    if (c === undefined) return;
    if (c === " " || c === "\t" || c === "\n" || c === "\r" || c === ",") {
      cur.pos++;
      continue;
    }
    if (c === "#") {
      while (cur.pos < src.length && src[cur.pos] !== "\n") cur.pos++;
      continue;
    }
    break;
  }
}

function readIdentifier(src: string, cur: Cursor): string {
  const start = cur.pos;
  while (cur.pos < src.length && /[A-Za-z0-9_]/.test(src[cur.pos])) cur.pos++;
  return src.slice(start, cur.pos);
}

function skipString(src: string, cur: Cursor) {
  if (src.slice(cur.pos, cur.pos + 3) === '"""') {
    cur.pos += 3;
    const end = src.indexOf('"""', cur.pos);
    cur.pos = end === -1 ? src.length : end + 3;
    return;
  }
  cur.pos++;
  while (cur.pos < src.length) {
    const c = src[cur.pos];
    if (c === "\\") {
      cur.pos += 2;
      continue;
    }
    if (c === '"') {
      cur.pos++;
      break;
    }
    cur.pos++;
  }
}

function readEnclosed(src: string, cur: Cursor, open: string, close: string): string {
  const start = cur.pos;
  cur.pos++;
  let depth = 1;
  while (cur.pos < src.length && depth > 0) {
    const c = src[cur.pos];
    if (c === '"') {
      skipString(src, cur);
      continue;
    }
    if (c === open) depth++;
    else if (c === close) depth--;
    if (depth === 0) break;
    cur.pos++;
  }
  const inner = src.slice(start + 1, cur.pos);
  cur.pos++;
  return inner;
}

function splitTopLevel(src: string): string[] {
  const parts: string[] = [];
  const cur: Cursor = { pos: 0 };
  let start = 0;
  let depth = 0;
  while (cur.pos < src.length) {
    const c = src[cur.pos];
    if (c === '"') {
      skipString(src, cur);
      continue;
    }
    if (c === "(" || c === "[" || c === "{") depth++;
    else if (c === ")" || c === "]" || c === "}") depth--;
    else if (c === "," && depth === 0) {
      parts.push(src.slice(start, cur.pos));
      cur.pos++;
      start = cur.pos;
      continue;
    }
    cur.pos++;
  }
  parts.push(src.slice(start));
  return parts;
}

function parseSelectionSet(src: string, cur: Cursor, counter: { n: number }): GqlField[] {
  skipIgnored(src, cur);
  if (src[cur.pos] !== "{") throw new Error("Expected '{' to start a selection set");
  cur.pos++;
  const fields: GqlField[] = [];

  for (;;) {
    skipIgnored(src, cur);
    if (src[cur.pos] === "}") {
      cur.pos++;
      break;
    }
    if (cur.pos >= src.length) throw new Error("Unexpected end of input — missing '}'");

    if (src.slice(cur.pos, cur.pos + 3) === "...") {
      cur.pos += 3;
      skipIgnored(src, cur);
      let onType = false;
      if (src.slice(cur.pos, cur.pos + 2) === "on" && /\s/.test(src[cur.pos + 2] ?? " ")) {
        cur.pos += 2;
        skipIgnored(src, cur);
        readIdentifier(src, cur);
        skipIgnored(src, cur);
        onType = true;
      }
      const fragName = onType ? "" : readIdentifier(src, cur);
      skipIgnored(src, cur);
      if (src[cur.pos] === "{") {
        const inner = parseSelectionSet(src, cur, counter);
        fields.push(...inner);
      } else {
        fields.push({ children: [], id: `f${counter.n++}`, name: `...${fragName}` });
      }
      continue;
    }

    const first = readIdentifier(src, cur);
    if (first === "") throw new Error(`Unexpected character '${src[cur.pos]}'`);
    skipIgnored(src, cur);

    let alias: string | undefined;
    let name = first;
    if (src[cur.pos] === ":") {
      cur.pos++;
      skipIgnored(src, cur);
      alias = first;
      name = readIdentifier(src, cur);
      skipIgnored(src, cur);
    }

    let argsRaw: string | undefined;
    if (src[cur.pos] === "(") {
      argsRaw = readEnclosed(src, cur, "(", ")");
      skipIgnored(src, cur);
    }

    let directivesRaw = "";
    while (src[cur.pos] === "@") {
      const dStart = cur.pos;
      cur.pos++;
      readIdentifier(src, cur);
      skipIgnored(src, cur);
      if (src[cur.pos] === "(") readEnclosed(src, cur, "(", ")");
      directivesRaw += (directivesRaw ? " " : "") + src.slice(dStart, cur.pos);
      skipIgnored(src, cur);
    }

    let children: GqlField[] = [];
    if (src[cur.pos] === "{") children = parseSelectionSet(src, cur, counter);

    fields.push({
      alias,
      argsRaw,
      children,
      directivesRaw: directivesRaw || undefined,
      id: `f${counter.n++}`,
      name,
    });
    skipIgnored(src, cur);
  }

  return fields;
}

export function parseGraphQL(src: string): ParsedGql {
  const cur: Cursor = { pos: 0 };
  const counter = { n: 0 };

  try {
    skipIgnored(src, cur);
    let operationType: OperationType = "query";
    let operationName: string | undefined;
    const variables: GqlVariable[] = [];

    const savedPos = cur.pos;
    const kw = readIdentifier(src, cur);
    if (kw === "query" || kw === "mutation" || kw === "subscription") {
      operationType = kw;
      skipIgnored(src, cur);
      if (/[A-Za-z_]/.test(src[cur.pos] ?? "")) {
        operationName = readIdentifier(src, cur);
        skipIgnored(src, cur);
      }
      if (src[cur.pos] === "(") {
        const raw = readEnclosed(src, cur, "(", ")");
        for (const part of splitTopLevel(raw)) {
          const trimmed = part.trim();
          if (!trimmed) continue;
          const m = /^\$([A-Za-z_][A-Za-z0-9_]*)\s*:\s*([^=]+?)(?:\s*=\s*(.+))?$/.exec(trimmed);
          if (!m) continue;
          const type = m[2].trim();
          variables.push({
            defaultRaw: m[3]?.trim(),
            name: m[1],
            required: type.endsWith("!") && m[3] === undefined,
            type,
          });
        }
      }
      skipIgnored(src, cur);
    } else {
      cur.pos = savedPos;
    }

    const root = parseSelectionSet(src, cur, counter);

    const variablesUsed = new Set<string>();
    const collect = (fields: GqlField[]) => {
      for (const f of fields) {
        for (const raw of [f.argsRaw, f.directivesRaw]) {
          if (!raw) continue;
          for (const vm of raw.matchAll(/\$([A-Za-z_][A-Za-z0-9_]*)/g)) variablesUsed.add(vm[1]);
        }
        collect(f.children);
      }
    };
    collect(root);

    return { operationName, operationType, root, variables, variablesUsed };
  } catch (e) {
    return {
      error: e instanceof Error ? e.message : "Failed to parse GraphQL document",
      operationType: "query",
      root: [],
      variables: [],
      variablesUsed: new Set(),
    };
  }
}

function countFields(fields: GqlField[]): number {
  return fields.reduce((sum, f) => sum + 1 + countFields(f.children), 0);
}

function maxDepth(fields: GqlField[], depth = 1): number {
  if (fields.length === 0) return depth - 1;
  return Math.max(...fields.map((f) => maxDepth(f.children, depth + 1)));
}

function ArgText({ text }: { text: string }) {
  const parts = text.split(/(\$[A-Za-z_][A-Za-z0-9_]*)/g);
  return (
    <>
      {parts.map((p, i) =>
        p.startsWith("$") ? (
          <span className="text-primary" key={`${p}-${i}`}>
            {p}
          </span>
        ) : (
          <span key={`${p}-${i}`}>{p}</span>
        ),
      )}
    </>
  );
}

interface Row {
  field: GqlField;
  depth: number;
  hasChildren: boolean;
  collapsed: boolean;
}

function flatten(fields: GqlField[], depth: number, collapsed: Set<string>, out: Row[]) {
  for (const field of fields) {
    const hasChildren = field.children.length > 0;
    const isCollapsed = collapsed.has(field.id);
    out.push({ collapsed: isCollapsed, depth, field, hasChildren });
    if (hasChildren && !isCollapsed) flatten(field.children, depth + 1, collapsed, out);
  }
}

function FieldRow({ row, onToggle }: { row: Row; onToggle: () => void }) {
  const { field, depth, hasChildren, collapsed } = row;
  return (
    <div
      className="flex items-start gap-1.5 border-border/60 border-b py-1 last:border-b-0"
      style={{ paddingLeft: 8 + depth * 14, paddingRight: 8 }}
    >
      {hasChildren ? (
        <Button
          aria-label={collapsed ? "Expand field" : "Collapse field"}
          className="mt-0.5 size-4 shrink-0 text-muted-foreground hover:text-foreground"
          onClick={onToggle}
          size="icon"
          type="button"
          variant="ghost"
        >
          <ChevronRight className={cn("size-3 transition-transform", !collapsed && "rotate-90")} />
        </Button>
      ) : (
        <span className="mt-0.5 inline-block size-4 shrink-0" />
      )}
      <div className="min-w-0 flex-1 font-mono">
        {field.alias ? <span className="text-muted-foreground">{field.alias}: </span> : null}
        <span className="font-medium">{field.name}</span>
        {field.argsRaw ? (
          <span className="text-muted-foreground">
            (<ArgText text={field.argsRaw} />)
          </span>
        ) : null}
        {field.directivesRaw ? (
          <span className="ml-1.5 text-[11px] text-muted-foreground">
            <ArgText text={field.directivesRaw} />
          </span>
        ) : null}
      </div>
    </div>
  );
}

export function GraphqlQueryInspector({
  defaultQuery = GRAPHQL_QUERY_SAMPLE,
  defaultVariables = GRAPHQL_VARIABLES_SAMPLE,
  className,
}: GraphqlQueryInspectorProps) {
  const [query, setQuery] = useState(defaultQuery);
  const [variablesText, setVariablesText] = useState(defaultVariables);
  const [collapsed, setCollapsed] = useState<Set<string>>(() => new Set());

  const parsed = useMemo(() => parseGraphQL(query), [query]);

  const providedVars = useMemo(() => {
    if (!variablesText.trim()) return { keys: new Set<string>(), valid: true };
    try {
      const obj = JSON.parse(variablesText);
      return { keys: new Set(Object.keys(obj ?? {})), valid: true };
    } catch {
      return { keys: new Set<string>(), valid: false };
    }
  }, [variablesText]);

  const rows = useMemo(() => {
    const out: Row[] = [];
    flatten(parsed.root, 0, collapsed, out);
    return out;
  }, [parsed.root, collapsed]);

  const toggle = (id: string) =>
    setCollapsed((prev) => {
      const next = new Set(prev);
      if (next.has(id)) next.delete(id);
      else next.add(id);
      return next;
    });

  const fieldCount = countFields(parsed.root);
  const depth = maxDepth(parsed.root);

  return (
    <div
      className={cn("overflow-hidden rounded-lg border border-border bg-card text-xs", className)}
    >
      <div className="grid grid-cols-1 gap-2 border-border border-b p-3 sm:grid-cols-[2fr_1fr]">
        <div className="space-y-1.5">
          <span className="text-[11px] text-muted-foreground">Query</span>
          <Textarea
            className="min-h-32 font-mono text-[11px]"
            onChange={(e) => setQuery(e.target.value)}
            placeholder="Paste a GraphQL query…"
            spellCheck={false}
            value={query}
          />
        </div>
        <div className="space-y-1.5">
          <span className="text-[11px] text-muted-foreground">Variables (JSON)</span>
          <Textarea
            className="min-h-32 font-mono text-[11px]"
            onChange={(e) => setVariablesText(e.target.value)}
            placeholder="{}"
            spellCheck={false}
            value={variablesText}
          />
        </div>
      </div>
      <div className="border-border border-b p-2">
        <Button
          className="h-7 text-xs"
          onClick={() => {
            setQuery(GRAPHQL_QUERY_SAMPLE);
            setVariablesText(GRAPHQL_VARIABLES_SAMPLE);
          }}
          size="sm"
          type="button"
          variant="outline"
        >
          Load sample
        </Button>
      </div>

      {parsed.error ? (
        <p className="px-3 py-6 text-center text-muted-foreground text-xs italic">{parsed.error}</p>
      ) : (
        <>
          <div className="flex flex-wrap items-center gap-2 border-border border-b px-3 py-1.5">
            <Badge variant="outline">{parsed.operationType}</Badge>
            {parsed.operationName ? (
              <Badge variant="secondary">{parsed.operationName}</Badge>
            ) : null}
            <Badge variant="outline">{fieldCount} fields</Badge>
            <Badge variant="outline">{depth} levels deep</Badge>
          </div>

          <div className="max-h-72 overflow-y-auto">
            {rows.length === 0 ? (
              <p className="px-3 py-4 text-center text-muted-foreground text-xs italic">
                No fields selected
              </p>
            ) : (
              rows.map((row) => (
                <FieldRow key={row.field.id} onToggle={() => toggle(row.field.id)} row={row} />
              ))
            )}
          </div>

          {parsed.variables.length > 0 ? (
            <div className="border-border border-t p-3">
              <span className="font-medium text-[11px] text-muted-foreground">Variables</span>
              <div className="mt-1.5 flex flex-col gap-1">
                {parsed.variables.map((v) => {
                  const used = parsed.variablesUsed.has(v.name);
                  const missing =
                    providedVars.valid && v.required && !providedVars.keys.has(v.name);
                  return (
                    <div className="flex flex-wrap items-center gap-1.5 font-mono" key={v.name}>
                      <span className="text-primary">${v.name}</span>
                      <span className="text-muted-foreground">: {v.type}</span>
                      {v.defaultRaw !== undefined ? (
                        <span className="text-muted-foreground">= {v.defaultRaw}</span>
                      ) : null}
                      {!used ? (
                        <Badge className="h-4 px-1 text-[10px]" variant="outline">
                          unused
                        </Badge>
                      ) : null}
                      {missing ? (
                        <Badge className="h-4 px-1 text-[10px]" variant="destructive">
                          missing
                        </Badge>
                      ) : null}
                    </div>
                  );
                })}
              </div>
              {!providedVars.valid ? (
                <p className="mt-1.5 text-[11px] text-destructive italic">
                  Variables JSON is invalid — missing-variable checks are skipped.
                </p>
              ) : null}
            </div>
          ) : null}
        </>
      )}
    </div>
  );
}

export default GraphqlQueryInspector;
```

## OpenAPI Explorer

An OpenAPI/Swagger endpoint browser: paste a spec to get tag-grouped, method-colored, searchable/filterable endpoints with expandable parameters, request body content types and response-status tables.

- Page: https://rocket.gozturk.dev/openapi-explorer
- Install: `npx shadcn@latest add https://rocket.gozturk.dev/r/openapi-explorer.json`
- Source: `components/ui/openapi-explorer.tsx`

```tsx
"use client";

import { ChevronRight } from "lucide-react";
import { useMemo, useState } from "react";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
import { cn } from "@/lib/utils";

export interface ApiParameter {
  name: string;
  in: string;
  required: boolean;
  type: string;
}

export interface ApiResponse {
  status: string;
  description?: string;
}

export interface ApiEndpoint {
  id: string;
  method: string;
  path: string;
  summary?: string;
  operationId?: string;
  tags: string[];
  parameters: ApiParameter[];
  requestBodyRequired?: boolean;
  requestBodyContentTypes: string[];
  responses: ApiResponse[];
}

export interface ParsedSpec {
  endpoints: ApiEndpoint[];
  error?: string;
}

export interface OpenApiExplorerProps {
  defaultValue?: string;
  className?: string;
}

const METHODS = ["get", "post", "put", "patch", "delete", "options", "head"] as const;
const METHOD_ORDER: Record<string, number> = Object.fromEntries(
  METHODS.map((m, i) => [m.toUpperCase(), i]),
);

const METHOD_COLOR: Record<string, string> = {
  DELETE: "#ef4444",
  GET: "#3b82f6",
  HEAD: "#6b7280",
  OPTIONS: "#6b7280",
  PATCH: "#a855f7",
  POST: "#10b981",
  PUT: "#f59e0b",
};

export const OPENAPI_SAMPLE = JSON.stringify(
  {
    openapi: "3.0.0",
    paths: {
      "/orders": {
        get: {
          parameters: [{ in: "query", name: "customerId", schema: { type: "string" } }],
          responses: { "200": { description: "A list of orders" } },
          summary: "List orders",
          tags: ["Orders"],
        },
      },
      "/users": {
        get: {
          parameters: [
            { in: "query", name: "limit", schema: { type: "integer" } },
            { in: "query", name: "status", schema: { type: "string" } },
          ],
          responses: { "200": { description: "A list of users" } },
          summary: "List users",
          tags: ["Users"],
        },
        post: {
          requestBody: { content: { "application/json": {} }, required: true },
          responses: {
            "201": { description: "Created" },
            "400": { description: "Validation error" },
          },
          summary: "Create a user",
          tags: ["Users"],
        },
      },
      "/users/{id}": {
        delete: {
          parameters: [{ in: "path", name: "id", required: true, schema: { type: "string" } }],
          responses: {
            "204": { description: "Deleted" },
            "404": { description: "Not found" },
          },
          summary: "Delete a user",
          tags: ["Users"],
        },
        get: {
          parameters: [{ in: "path", name: "id", required: true, schema: { type: "string" } }],
          responses: {
            "200": { description: "The user" },
            "404": { description: "Not found" },
          },
          summary: "Get a user by id",
          tags: ["Users"],
        },
      },
    },
  },
  null,
  2,
);

function mergeParameters(pathParams: unknown, opParams: unknown): ApiParameter[] {
  const merged = new Map<string, ApiParameter>();
  for (const raw of [pathParams, opParams]) {
    if (!Array.isArray(raw)) continue;
    for (const p of raw) {
      if (!p || typeof p !== "object") continue;
      const name = String((p as Record<string, unknown>).name ?? "");
      const location = String((p as Record<string, unknown>).in ?? "");
      if (!name || location === "body") continue;
      const schema = (p as Record<string, unknown>).schema as Record<string, unknown> | undefined;
      merged.set(`${location}:${name}`, {
        in: location,
        name,
        required: Boolean((p as Record<string, unknown>).required),
        type: String(schema?.type ?? (p as Record<string, unknown>).type ?? "any"),
      });
    }
  }
  return [...merged.values()];
}

function bodyParam(pathParams: unknown, opParams: unknown): ApiParameter | undefined {
  for (const raw of [pathParams, opParams]) {
    if (!Array.isArray(raw)) continue;
    const p = raw.find(
      (x) => x && typeof x === "object" && (x as Record<string, unknown>).in === "body",
    );
    if (p) return p as ApiParameter;
  }
  return undefined;
}

export function parseOpenAPI(text: string): ParsedSpec {
  let spec: unknown;
  try {
    spec = JSON.parse(text);
  } catch {
    return { endpoints: [], error: "Invalid JSON." };
  }
  if (!spec || typeof spec !== "object" || !("paths" in spec)) {
    return { endpoints: [], error: 'No "paths" object found — expected an OpenAPI/Swagger spec.' };
  }

  const paths = (spec as Record<string, unknown>).paths;
  if (!paths || typeof paths !== "object") {
    return { endpoints: [], error: '"paths" is not an object.' };
  }
  const consumes = Array.isArray((spec as Record<string, unknown>).consumes)
    ? ((spec as Record<string, unknown>).consumes as string[])
    : ["application/json"];

  const endpoints: ApiEndpoint[] = [];
  for (const [path, item] of Object.entries(paths as Record<string, unknown>)) {
    if (!item || typeof item !== "object") continue;
    const pathItem = item as Record<string, unknown>;
    const pathParams = pathItem.parameters;

    for (const method of METHODS) {
      const op = pathItem[method];
      if (!op || typeof op !== "object") continue;
      const operation = op as Record<string, unknown>;
      const opParams = operation.parameters;

      const requestBody = operation.requestBody as Record<string, unknown> | undefined;
      const body = bodyParam(pathParams, opParams);
      const requestBodyContentTypes = requestBody?.content
        ? Object.keys(requestBody.content as Record<string, unknown>)
        : body
          ? consumes
          : [];
      const requestBodyRequired = requestBody
        ? Boolean(requestBody.required)
        : body
          ? Boolean(body.required)
          : undefined;

      const responses = operation.responses as Record<string, unknown> | undefined;
      const responseList: ApiResponse[] = responses
        ? Object.entries(responses).map(([status, r]) => ({
            description:
              r && typeof r === "object"
                ? String((r as Record<string, unknown>).description ?? "")
                : undefined,
            status,
          }))
        : [];

      const tags =
        Array.isArray(operation.tags) && operation.tags.length > 0
          ? (operation.tags as string[])
          : ["untagged"];

      endpoints.push({
        id: `${method}-${path}`,
        method: method.toUpperCase(),
        operationId: typeof operation.operationId === "string" ? operation.operationId : undefined,
        parameters: mergeParameters(pathParams, opParams),
        path,
        requestBodyContentTypes,
        requestBodyRequired,
        responses: responseList,
        summary: typeof operation.summary === "string" ? operation.summary : undefined,
        tags,
      });
    }
  }

  endpoints.sort((a, b) => {
    if (a.path !== b.path) return a.path.localeCompare(b.path);
    return (METHOD_ORDER[a.method] ?? 99) - (METHOD_ORDER[b.method] ?? 99);
  });

  return { endpoints };
}

function groupByTag(endpoints: ApiEndpoint[]): [string, ApiEndpoint[]][] {
  const groups = new Map<string, ApiEndpoint[]>();
  for (const e of endpoints) {
    const tag = e.tags[0] ?? "untagged";
    const list = groups.get(tag) ?? [];
    list.push(e);
    groups.set(tag, list);
  }
  return [...groups.entries()].sort(([a], [b]) => {
    if (a === "untagged") return 1;
    if (b === "untagged") return -1;
    return a.localeCompare(b);
  });
}

function MethodBadge({ method }: { method: string }) {
  const color = METHOD_COLOR[method] ?? "#6b7280";
  return (
    <span
      className="w-14 shrink-0 rounded px-1.5 py-0.5 text-center font-mono font-semibold text-[10px]"
      style={{ background: `${color}1f`, color }}
    >
      {method}
    </span>
  );
}

function EndpointRow({ endpoint }: { endpoint: ApiEndpoint }) {
  const [open, setOpen] = useState(false);
  const hasDetail =
    endpoint.parameters.length > 0 ||
    endpoint.responses.length > 0 ||
    endpoint.requestBodyContentTypes.length > 0;

  return (
    <div className="border-border/60 border-b last:border-b-0">
      <button
        className="flex w-full items-center gap-2 px-3 py-1.5 text-left hover:bg-muted/40"
        onClick={() => hasDetail && setOpen((v) => !v)}
        type="button"
      >
        {hasDetail ? (
          <ChevronRight
            className={cn(
              "size-3 shrink-0 text-muted-foreground transition-transform",
              open && "rotate-90",
            )}
          />
        ) : (
          <span className="inline-block size-3 shrink-0" />
        )}
        <MethodBadge method={endpoint.method} />
        <span className="truncate font-mono">{endpoint.path}</span>
        {endpoint.summary ? (
          <span className="truncate text-muted-foreground">{endpoint.summary}</span>
        ) : null}
      </button>
      {open ? (
        <div className="space-y-2 px-3 pb-2 pl-[4.5rem] font-mono text-[11px]">
          {endpoint.parameters.length > 0 ? (
            <div>
              <span className="text-muted-foreground">Parameters</span>
              <div className="mt-1 grid grid-cols-[1fr_4rem_5rem_4rem] gap-x-2 gap-y-0.5">
                {endpoint.parameters.map((p) => (
                  <div className="contents" key={`${p.in}-${p.name}`}>
                    <span>{p.name}</span>
                    <span className="text-muted-foreground">{p.in}</span>
                    <span className="text-muted-foreground">{p.type}</span>
                    <span className={cn(!p.required && "text-muted-foreground")}>
                      {p.required ? "required" : "optional"}
                    </span>
                  </div>
                ))}
              </div>
            </div>
          ) : null}
          {endpoint.requestBodyContentTypes.length > 0 ? (
            <div>
              <span className="text-muted-foreground">Request body</span>{" "}
              <span>{endpoint.requestBodyRequired ? "required" : "optional"}</span>{" "}
              <span className="text-muted-foreground">
                ({endpoint.requestBodyContentTypes.join(", ")})
              </span>
            </div>
          ) : null}
          {endpoint.responses.length > 0 ? (
            <div>
              <span className="text-muted-foreground">Responses</span>
              <div className="mt-1 flex flex-wrap gap-2">
                {endpoint.responses.map((r) => (
                  <span key={r.status}>
                    <Badge
                      className={cn(
                        r.status.startsWith("2")
                          ? "border-emerald-500/40 text-emerald-600 dark:text-emerald-400"
                          : r.status.startsWith("4") || r.status.startsWith("5")
                            ? "border-destructive/40 text-destructive"
                            : undefined,
                      )}
                      variant="outline"
                    >
                      {r.status}
                    </Badge>
                    {r.description ? (
                      <span className="ml-1 text-muted-foreground">{r.description}</span>
                    ) : null}
                  </span>
                ))}
              </div>
            </div>
          ) : null}
        </div>
      ) : null}
    </div>
  );
}

export function OpenApiExplorer({
  defaultValue = OPENAPI_SAMPLE,
  className,
}: OpenApiExplorerProps) {
  const [text, setText] = useState(defaultValue);
  const [search, setSearch] = useState("");
  const [methodFilter, setMethodFilter] = useState<string[]>([]);

  const parsed = useMemo(() => parseOpenAPI(text), [text]);
  const availableMethods = useMemo(
    () =>
      METHODS.map((m) => m.toUpperCase()).filter((m) =>
        parsed.endpoints.some((e) => e.method === m),
      ),
    [parsed.endpoints],
  );

  const filtered = useMemo(() => {
    const q = search.trim().toLowerCase();
    return parsed.endpoints.filter((e) => {
      if (methodFilter.length > 0 && !methodFilter.includes(e.method)) return false;
      if (!q) return true;
      return (
        e.path.toLowerCase().includes(q) ||
        (e.summary ?? "").toLowerCase().includes(q) ||
        (e.operationId ?? "").toLowerCase().includes(q)
      );
    });
  }, [parsed.endpoints, search, methodFilter]);

  const groups = useMemo(() => groupByTag(filtered), [filtered]);
  const tagCount = useMemo(
    () => new Set(parsed.endpoints.map((e) => e.tags[0] ?? "untagged")).size,
    [parsed.endpoints],
  );

  return (
    <div
      className={cn("overflow-hidden rounded-lg border border-border bg-card text-xs", className)}
    >
      <div className="space-y-2 border-border border-b p-3">
        <Textarea
          className="min-h-28 font-mono text-[11px]"
          onChange={(e) => setText(e.target.value)}
          placeholder="Paste an OpenAPI/Swagger JSON spec…"
          spellCheck={false}
          value={text}
        />
        <Button
          className="h-7 text-xs"
          onClick={() => setText(OPENAPI_SAMPLE)}
          size="sm"
          type="button"
          variant="outline"
        >
          Load sample
        </Button>
      </div>

      {parsed.error ? (
        <p className="px-3 py-6 text-center text-muted-foreground text-xs italic">{parsed.error}</p>
      ) : (
        <>
          <div className="flex flex-wrap items-center gap-2 border-border border-b p-3">
            <Input
              className="h-7 max-w-56 text-xs"
              onChange={(e) => setSearch(e.target.value)}
              placeholder="Search path, summary, operationId…"
              value={search}
            />
            <ToggleGroup multiple onValueChange={setMethodFilter} spacing={1} value={methodFilter}>
              {availableMethods.map((m) => (
                <ToggleGroupItem
                  className="h-7 px-2 font-mono text-[11px]"
                  key={m}
                  size="sm"
                  value={m}
                >
                  {m}
                </ToggleGroupItem>
              ))}
            </ToggleGroup>
            <Badge className="ml-auto" variant="outline">
              {parsed.endpoints.length} endpoints
            </Badge>
            <Badge variant="outline">{tagCount} tags</Badge>
          </div>

          <div className="max-h-96 overflow-y-auto">
            {groups.length === 0 ? (
              <p className="px-3 py-6 text-center text-muted-foreground text-xs italic">
                No endpoints match
              </p>
            ) : (
              groups.map(([tag, endpoints]) => (
                <div className="border-border border-b last:border-b-0" key={tag}>
                  <div className="bg-muted/40 px-3 py-1 font-medium text-[11px] text-muted-foreground">
                    {tag}{" "}
                    <span className="font-normal">
                      · {endpoints.length} endpoint{endpoints.length === 1 ? "" : "s"}
                    </span>
                  </div>
                  {endpoints.map((e) => (
                    <EndpointRow endpoint={e} key={e.id} />
                  ))}
                </div>
              ))
            )}
          </div>
        </>
      )}
    </div>
  );
}

export default OpenApiExplorer;
```

## Cron Conflict Detector

A multi-schedule cron conflict detector: define named cron jobs and a look-ahead window to compute each job's upcoming runs, flag exact-minute overlaps across jobs, and see per-job run count, average interval and next run time.

- Page: https://rocket.gozturk.dev/cron-conflict-detector
- Install: `npx shadcn@latest add https://rocket.gozturk.dev/r/cron-conflict-detector.json`
- Source: `components/ui/cron-conflict-detector.tsx`

```tsx
"use client";

import { Plus, X } from "lucide-react";
import { useMemo, useRef, useState } from "react";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Switch } from "@/components/ui/switch";
import { cn } from "@/lib/utils";

export interface CronJob {
  id: string;
  name: string;
  expression: string;
  enabled: boolean;
}

export interface CronConflictDetectorProps {
  defaultJobs?: CronJob[];
  className?: string;
}

interface CronSets {
  minute: Set<number>;
  hour: Set<number>;
  dom: Set<number>;
  month: Set<number>;
  dow: Set<number>;
}

interface ConflictGroup {
  time: number;
  jobIds: string[];
}

const PALETTE = ["#3b82f6", "#a855f7", "#10b981", "#f59e0b", "#06b6d4", "#ec4899"];

const WINDOW_OPTIONS = [
  { hours: 1, label: "1 hour" },
  { hours: 6, label: "6 hours" },
  { hours: 24, label: "24 hours" },
  { hours: 24 * 7, label: "7 days" },
];

export const CRON_CONFLICT_SAMPLE: CronJob[] = [
  { enabled: true, expression: "0 2 * * *", id: "j1", name: "nightly-etl" },
  { enabled: true, expression: "0 * * * *", id: "j2", name: "hourly-metrics" },
  { enabled: true, expression: "30 2 * * *", id: "j3", name: "backup" },
  { enabled: true, expression: "*/20 * * * *", id: "j4", name: "cache-warmup" },
];

function useIdFactory() {
  const counter = useRef(0);
  return useRef(() => `cj-${++counter.current}`).current;
}

function palette(name: string): string {
  let h = 0;
  for (let i = 0; i < name.length; i++) h = (h * 31 + name.charCodeAt(i)) >>> 0;
  return PALETTE[h % PALETTE.length];
}

function parseField(expr: string, min: number, max: number): Set<number> | null {
  if (expr === "") return null;
  const out = new Set<number>();
  for (const part of expr.split(",")) {
    const m = /^(\*|\d+(?:-\d+)?)(?:\/(\d+))?$/.exec(part);
    if (!m) return null;
    const step = m[2] ? Number(m[2]) : 1;
    if (step < 1) return null;
    let lo = min;
    let hi = max;
    if (m[1] !== "*") {
      const [a, b] = m[1].split("-").map(Number);
      lo = a;
      hi = b ?? (m[2] ? max : a);
    }
    if (lo < min || hi > max || lo > hi) return null;
    for (let v = lo; v <= hi; v += step) out.add(v);
  }
  return out.size > 0 ? out : null;
}

function parseCron(expression: string): { sets: CronSets } | { error: string } {
  const fields = expression.trim().split(/\s+/);
  if (fields.length !== 5) return { error: "expected 5 space-separated fields" };
  const names = ["minute", "hour", "day-of-month", "month", "day-of-week"];
  const ranges: [number, number][] = [
    [0, 59],
    [0, 23],
    [1, 31],
    [1, 12],
    [0, 7],
  ];
  const parsed: Set<number>[] = [];
  for (let i = 0; i < 5; i++) {
    const s = parseField(fields[i], ranges[i][0], ranges[i][1]);
    if (!s) return { error: `invalid ${names[i]} field` };
    parsed.push(s);
  }
  const dow = new Set<number>();
  for (const v of parsed[4]) dow.add(v === 7 ? 0 : v);
  return { sets: { dom: parsed[2], dow, hour: parsed[1], minute: parsed[0], month: parsed[3] } };
}

function isFull(s: Set<number>, min: number, max: number): boolean {
  return s.size === max - min + 1;
}

function dayMatches(sets: CronSets, d: Date): boolean {
  if (!sets.month.has(d.getUTCMonth() + 1)) return false;
  const domRestricted = !isFull(sets.dom, 1, 31);
  const dowRestricted = !isFull(sets.dow, 0, 6);
  const domOk = sets.dom.has(d.getUTCDate());
  const dowOk = sets.dow.has(d.getUTCDay());
  if (domRestricted && dowRestricted) return domOk || dowOk;
  if (domRestricted) return domOk;
  if (dowRestricted) return dowOk;
  return true;
}

function runsInWindow(sets: CronSets, fromMs: number, toMs: number): number[] {
  const out: number[] = [];
  const startMs = Math.ceil((fromMs + 1) / 60_000) * 60_000;
  const start = new Date(startMs);
  const hours = [...sets.hour].sort((a, b) => a - b);
  const minutes = [...sets.minute].sort((a, b) => a - b);
  const day0 = Date.UTC(start.getUTCFullYear(), start.getUTCMonth(), start.getUTCDate());
  const daysSpan = Math.ceil((toMs - day0) / 86_400_000) + 1;
  for (let i = 0; i < daysSpan; i++) {
    const d = new Date(day0 + i * 86_400_000);
    if (!dayMatches(sets, d)) continue;
    for (const h of hours) {
      for (const m of minutes) {
        const t = Date.UTC(d.getUTCFullYear(), d.getUTCMonth(), d.getUTCDate(), h, m);
        if (t >= startMs && t < toMs) out.push(t);
      }
    }
  }
  out.sort((a, b) => a - b);
  return out;
}

function formatDuration(ms: number): string {
  const mins = ms / 60_000;
  if (mins >= 1440) return `${(mins / 1440).toFixed(1)}d`;
  if (mins >= 60) return `${(mins / 60).toFixed(1)}h`;
  return `${Math.round(mins)}m`;
}

function formatTime(ms: number): string {
  return new Intl.DateTimeFormat("en-US", {
    day: "2-digit",
    hour: "2-digit",
    minute: "2-digit",
    month: "short",
    timeZone: "UTC",
  }).format(new Date(ms));
}

interface JobResult {
  job: CronJob;
  error?: string;
  runs: number[];
  avgIntervalMs?: number;
}

function analyzeJobs(jobs: CronJob[], windowHours: number, nowMs: number) {
  const toMs = nowMs + windowHours * 3_600_000;
  const results: JobResult[] = jobs.map((job) => {
    if (!job.enabled) return { job, runs: [] };
    const parsed = parseCron(job.expression);
    if ("error" in parsed) return { error: parsed.error, job, runs: [] };
    const runs = runsInWindow(parsed.sets, nowMs, toMs);
    let avgIntervalMs: number | undefined;
    if (runs.length > 1) {
      const diffs = runs.slice(1).map((t, i) => t - runs[i]);
      avgIntervalMs = diffs.reduce((a, b) => a + b, 0) / diffs.length;
    }
    return { avgIntervalMs, job, runs };
  });

  const byTime = new Map<number, string[]>();
  for (const r of results) {
    for (const t of r.runs) {
      const list = byTime.get(t) ?? [];
      list.push(r.job.id);
      byTime.set(t, list);
    }
  }
  const conflicts: ConflictGroup[] = [...byTime.entries()]
    .filter(([, ids]) => ids.length > 1)
    .map(([time, jobIds]) => ({ jobIds, time }))
    .sort((a, b) => a.time - b.time);

  return { conflicts, results };
}

function JobRow({
  job,
  result,
  onChange,
  onRemove,
}: {
  job: CronJob;
  result: JobResult;
  onChange: (next: CronJob) => void;
  onRemove: () => void;
}) {
  const color = palette(job.name || job.id);
  return (
    <div
      className={cn(
        "space-y-1.5 rounded-lg border border-border/60 bg-muted/40 px-3 py-2.5",
        !job.enabled && "opacity-50",
      )}
    >
      <div className="flex items-center gap-2">
        <span className="size-1.5 shrink-0 rounded-full" style={{ background: color }} />
        <Input
          className="h-7 flex-1 border-none bg-transparent px-1 font-medium shadow-none focus-visible:ring-1"
          onChange={(e) => onChange({ ...job, name: e.target.value })}
          placeholder="Job name"
          value={job.name}
        />
        <Input
          className="h-7 w-36 font-mono shadow-none"
          onChange={(e) => onChange({ ...job, expression: e.target.value })}
          placeholder="* * * * *"
          value={job.expression}
        />
        <Switch
          aria-label="Enabled"
          checked={job.enabled}
          onCheckedChange={(checked) => onChange({ ...job, enabled: checked })}
          size="sm"
        />
        <Button
          aria-label="Remove job"
          className="size-7 text-muted-foreground hover:text-foreground"
          onClick={onRemove}
          size="icon"
          type="button"
          variant="ghost"
        >
          <X className="size-3.5" />
        </Button>
      </div>
      <div className="pl-3.5 text-[11px] text-muted-foreground">
        {result.error ? (
          <span className="text-destructive">{result.error}</span>
        ) : !job.enabled ? (
          "disabled"
        ) : (
          <>
            {result.runs.length} run{result.runs.length === 1 ? "" : "s"} in window
            {result.avgIntervalMs !== undefined
              ? ` · avg every ${formatDuration(result.avgIntervalMs)}`
              : ""}
            {result.runs.length > 0 ? ` · next ${formatTime(result.runs[0])}` : ""}
          </>
        )}
      </div>
    </div>
  );
}

export function CronConflictDetector({
  defaultJobs = CRON_CONFLICT_SAMPLE,
  className,
}: CronConflictDetectorProps) {
  const nextId = useIdFactory();
  const [jobs, setJobs] = useState<CronJob[]>(defaultJobs);
  const [windowHours, setWindowHours] = useState(6);
  const [now] = useState(() => Date.now());

  const { results, conflicts } = useMemo(
    () => analyzeJobs(jobs, windowHours, now),
    [jobs, windowHours, now],
  );

  const jobName = (id: string) => jobs.find((j) => j.id === id)?.name ?? id;

  const updateJob = (id: string, next: CronJob) =>
    setJobs((prev) => prev.map((j) => (j.id === id ? next : j)));
  const removeJob = (id: string) => setJobs((prev) => prev.filter((j) => j.id !== id));
  const addJob = () =>
    setJobs((prev) => [
      ...prev,
      { enabled: true, expression: "0 * * * *", id: nextId(), name: "" },
    ]);

  return (
    <div className={cn("space-y-4 text-xs", className)}>
      <div className="flex items-center justify-between">
        <span className="text-[11px] text-muted-foreground">Look-ahead window</span>
        <Select onValueChange={(v) => v && setWindowHours(Number(v))} value={String(windowHours)}>
          <SelectTrigger className="h-7 w-[110px] text-xs">
            <SelectValue>
              {(v: string) => WINDOW_OPTIONS.find((w) => String(w.hours) === v)?.label ?? v}
            </SelectValue>
          </SelectTrigger>
          <SelectContent>
            {WINDOW_OPTIONS.map((w) => (
              <SelectItem key={w.hours} value={String(w.hours)}>
                {w.label}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
      </div>

      <div className="space-y-2">
        {results.map((r) => (
          <JobRow
            job={r.job}
            key={r.job.id}
            onChange={(next) => updateJob(r.job.id, next)}
            onRemove={() => removeJob(r.job.id)}
            result={r}
          />
        ))}
        {jobs.length === 0 ? (
          <p className="px-1 py-1.5 text-muted-foreground text-xs italic">No jobs yet</p>
        ) : null}
        <Button
          className="h-7 gap-1 text-xs"
          onClick={addJob}
          size="sm"
          type="button"
          variant="outline"
        >
          <Plus className="size-3" /> Job
        </Button>
      </div>

      <div className="rounded-lg border border-border bg-muted/30">
        <div className="flex items-center justify-between border-border border-b px-3 py-1.5">
          <span className="font-medium">Overlapping runs</span>
          <Badge variant={conflicts.length > 0 ? "destructive" : "outline"}>
            {conflicts.length} conflict{conflicts.length === 1 ? "" : "s"}
          </Badge>
        </div>
        {conflicts.length === 0 ? (
          <p className="px-3 py-4 text-center text-muted-foreground text-xs italic">
            No two jobs fire at the same minute in this window
          </p>
        ) : (
          <div className="max-h-72 divide-y divide-border/60 overflow-y-auto">
            {conflicts.slice(0, 30).map((c) => (
              <div className="flex flex-wrap items-center gap-2 px-3 py-1.5" key={c.time}>
                <span className="w-32 shrink-0 font-mono text-muted-foreground">
                  {formatTime(c.time)}
                </span>
                {c.jobIds.map((id) => (
                  <Badge
                    key={id}
                    style={{ background: `${palette(jobName(id))}1f`, color: palette(jobName(id)) }}
                    variant="outline"
                  >
                    {jobName(id)}
                  </Badge>
                ))}
              </div>
            ))}
            {conflicts.length > 30 ? (
              <p className="px-3 py-1.5 text-[11px] text-muted-foreground">
                +{conflicts.length - 30} more
              </p>
            ) : null}
          </div>
        )}
      </div>
    </div>
  );
}

export default CronConflictDetector;
```