lopata 0.0.1

package/runtime/dashboard/sql-browser/table-sidebar.tsx

@@ -0,0 +1,38 @@
+import type { D1Table } from "../rpc/types";
+
+export function TableSidebar({ tables, selected, onSelect }: {
+  tables?: D1Table[] | null;
+  selected: string | null;
+  onSelect: (name: string) => void;
+}) {
+  if (!tables?.length) {
+    return (
+      <div class="w-52 flex-shrink-0">
+        <div class="text-xs font-semibold text-text-muted uppercase tracking-wider mb-2 px-2">Tables</div>
+        <div class="text-xs text-text-muted px-2">No tables</div>
+      </div>
+    );
+  }
+
+  return (
+    <div class="w-52 flex-shrink-0">
+      <div class="text-xs font-semibold text-text-muted uppercase tracking-wider mb-2 px-2">Tables</div>
+      <div class="space-y-0.5">
+        {tables.map(t => (
+          <button
+            key={t.name}
+            onClick={() => onSelect(t.name)}
+            class={`w-full text-left px-3 py-2 rounded-md text-sm transition-colors flex items-center justify-between ${
+              selected === t.name
+                ? "bg-ink text-surface"
+                : "text-text-data hover:bg-panel-hover"
+            }`}
+          >
+            <span class="font-mono text-xs truncate">{t.name}</span>
+            <span class={`text-xs tabular-nums ${selected === t.name ? "text-text-dim" : "text-text-muted"}`}>{t.rows}</span>
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}

package/runtime/dashboard/sql-browser/types.ts

@@ -0,0 +1,61 @@
+import type { D1Table, QueryResult } from "../rpc/types";
+
+// ─── Schema types ────────────────────────────────────────────────────
+
+export interface ForeignKeyInfo {
+  targetTable: string;
+  targetColumn: string;
+}
+
+export interface ColumnInfo {
+  name: string;
+  type: string;
+  notNull: boolean;
+  defaultValue: string | null;
+  autoIncrement: boolean;
+  foreignKey: ForeignKeyInfo | null;
+}
+
+export interface TableSchema {
+  columns: ColumnInfo[];
+  primaryKeys: string[];
+}
+
+// ─── Browser types ───────────────────────────────────────────────────
+
+export interface SqlBrowserProps {
+  tables?: D1Table[] | null;
+  execQuery: (sql: string) => Promise<QueryResult>;
+  historyScope?: string;
+  basePath?: string;
+  routeTab?: Tab;
+  routeTable?: string | null;
+  routeQuery?: URLSearchParams;
+}
+
+export type Tab = "data" | "schema" | "sql";
+
+export type SortDir = "ASC" | "DESC";
+
+export const PAGE_SIZE = 50;
+
+export const TABS: { key: Tab; label: string }[] = [
+  { key: "data", label: "Data Browser" },
+  { key: "schema", label: "Schema" },
+  { key: "sql", label: "SQL Console" },
+];
+
+// ─── History types ───────────────────────────────────────────────────
+
+export interface HistoryEntry {
+  sql: string;
+  ts: number;
+}
+
+export interface BrowserHistoryEntry {
+  table: string;
+  filters: Record<string, string>;
+  sortCol: string | null;
+  sortDir: SortDir;
+  ts: number;
+}

package/runtime/dashboard/sql-browser/utils.ts

@@ -0,0 +1,167 @@
+import type { TableSchema, ColumnInfo, ForeignKeyInfo } from "./types";
+
+// ─── Schema parsing ──────────────────────────────────────────────────
+
+export function parseCreateTable(sql: string): TableSchema {
+  const columns: ColumnInfo[] = [];
+  const primaryKeys: string[] = [];
+
+  // Extract the part between the outer parentheses
+  const bodyMatch = sql.match(/\((.+)\)\s*$/s);
+  if (!bodyMatch) return { columns, primaryKeys };
+
+  // Split on commas that are not inside nested parens
+  const parts: string[] = [];
+  let depth = 0;
+  let current = "";
+  for (const ch of bodyMatch[1]!) {
+    if (ch === "(") depth++;
+    else if (ch === ")") depth--;
+    else if (ch === "," && depth === 0) {
+      parts.push(current.trim());
+      current = "";
+      continue;
+    }
+    current += ch;
+  }
+  if (current.trim()) parts.push(current.trim());
+
+  const foreignKeys: Record<string, ForeignKeyInfo> = {};
+
+  for (const part of parts) {
+    // Table-level PRIMARY KEY(col1, col2)
+    const pkMatch = part.match(/^PRIMARY\s+KEY\s*\((.+)\)/i);
+    if (pkMatch) {
+      for (const col of pkMatch[1]!.split(",")) {
+        const name = col.trim().replace(/^["'`]|["'`]$/g, "");
+        if (name && !primaryKeys.includes(name)) primaryKeys.push(name);
+      }
+      continue;
+    }
+
+    // Table-level FOREIGN KEY(col) REFERENCES table(col)
+    const fkMatch = part.match(/^(?:CONSTRAINT\s+["'`]?\w+["'`]?\s+)?FOREIGN\s+KEY\s*\(["'`]?(\w+)["'`]?\)\s*REFERENCES\s+["'`]?(\w+)["'`]?\s*\(["'`]?(\w+)["'`]?\)/i);
+    if (fkMatch) {
+      foreignKeys[fkMatch[1]!] = { targetTable: fkMatch[2]!, targetColumn: fkMatch[3]! };
+      continue;
+    }
+
+    // Skip other constraints (UNIQUE, CHECK)
+    if (/^(UNIQUE|CHECK|CONSTRAINT)\s/i.test(part)) continue;
+
+    // Column definition
+    const colMatch = part.match(/^["'`]?(\w+)["'`]?\s+(.*)/s);
+    if (!colMatch) continue;
+
+    const name = colMatch[1]!;
+    const rest = colMatch[2]!;
+    const typePart = rest.match(/^(\w[\w\s()]*?)(?:\s+(?:NOT|NULL|DEFAULT|PRIMARY|UNIQUE|CHECK|REFERENCES|AUTOINCREMENT|AUTO_INCREMENT)|$)/i);
+    const type = typePart ? typePart[1]!.trim() : rest.split(/\s/)[0] ?? "";
+    const notNull = /\bNOT\s+NULL\b/i.test(rest);
+    const autoIncrement = /\b(?:AUTOINCREMENT|AUTO_INCREMENT)\b/i.test(rest);
+    const defaultMatch = rest.match(/\bDEFAULT\s+(\S+)/i);
+    const defaultValue = defaultMatch ? defaultMatch[1]! : null;
+
+    // Inline REFERENCES
+    const refMatch = rest.match(/\bREFERENCES\s+["'`]?(\w+)["'`]?\s*\(["'`]?(\w+)["'`]?\)/i);
+    const foreignKey: ForeignKeyInfo | null = refMatch
+      ? { targetTable: refMatch[1]!, targetColumn: refMatch[2]! }
+      : null;
+
+    columns.push({ name, type, notNull, defaultValue, autoIncrement, foreignKey });
+
+    if (/\bPRIMARY\s+KEY\b/i.test(rest)) {
+      if (!primaryKeys.includes(name)) primaryKeys.push(name);
+    }
+  }
+
+  // Apply table-level FK constraints to columns
+  for (const col of columns) {
+    if (!col.foreignKey && foreignKeys[col.name]) {
+      col.foreignKey = foreignKeys[col.name]!;
+    }
+  }
+
+  return { columns, primaryKeys };
+}
+
+// ─── SQL helpers ─────────────────────────────────────────────────────
+
+export function sqlLiteral(value: unknown): string {
+  if (value === null || value === undefined) return "NULL";
+  if (typeof value === "number") return String(value);
+  if (typeof value === "boolean") return value ? "1" : "0";
+  return `'${String(value).replace(/'/g, "''")}'`;
+}
+
+export function quoteId(name: string): string {
+  return `"${name.replace(/"/g, '""')}"`;
+}
+
+function parseFilterExpr(col: string, expr: string): string | null {
+  const trimmed = expr.trim();
+  if (!trimmed) return null;
+
+  const lower = trimmed.toLowerCase();
+  if (lower === "null") return `${quoteId(col)} IS NULL`;
+  if (lower === "!null" || lower === "not null") return `${quoteId(col)} IS NOT NULL`;
+
+  // Operators: >=, <=, !=, >, <, =
+  const opMatch = trimmed.match(/^(>=|<=|!=|>|<|=)\s*(.+)$/);
+  if (opMatch) {
+    const [, op, val] = opMatch;
+    return `${quoteId(col)} ${op} ${sqlLiteral(val!)}`;
+  }
+
+  // LIKE pattern (contains %)
+  if (trimmed.includes("%")) {
+    return `${quoteId(col)} LIKE ${sqlLiteral(trimmed)}`;
+  }
+
+  // Negation: !value
+  if (trimmed.startsWith("!")) {
+    return `${quoteId(col)} != ${sqlLiteral(trimmed.slice(1))}`;
+  }
+
+  // Default: contains
+  return `${quoteId(col)} LIKE ${sqlLiteral("%" + trimmed + "%")}`;
+}
+
+export function buildWhereClause(filters: Record<string, string>): string {
+  const conditions: string[] = [];
+  for (const [col, expr] of Object.entries(filters)) {
+    const cond = parseFilterExpr(col, expr);
+    if (cond) conditions.push(cond);
+  }
+  return conditions.length > 0 ? ` WHERE ${conditions.join(" AND ")}` : "";
+}
+
+// ─── Export helpers ──────────────────────────────────────────────────
+
+function downloadBlob(content: string, filename: string, mimeType: string) {
+  const blob = new Blob([content], { type: mimeType });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = filename;
+  a.click();
+  URL.revokeObjectURL(url);
+}
+
+export function exportCSV(columns: string[], rows: Record<string, unknown>[], tableName: string) {
+  const escape = (v: unknown) => {
+    if (v === null || v === undefined) return "";
+    const s = String(v);
+    if (s.includes(",") || s.includes('"') || s.includes("\n")) {
+      return `"${s.replace(/"/g, '""')}"`;
+    }
+    return s;
+  };
+  const header = columns.map(escape).join(",");
+  const body = rows.map(row => columns.map(col => escape(row[col])).join(",")).join("\n");
+  downloadBlob(header + "\n" + body, `${tableName}.csv`, "text/csv");
+}
+
+export function exportJSON(rows: Record<string, unknown>[], tableName: string) {
+  downloadBlob(JSON.stringify(rows, null, 2), `${tableName}.json`, "application/json");
+}

package/runtime/dashboard/style.css

@@ -0,0 +1,177 @@
+@import "tailwindcss" source(".");
+
+html {
+  font-size: 110%;
+}
+
+@theme {
+  --color-surface: #f9fafb;
+  --color-surface-raised: #f3f4f6;
+  --color-surface-hover: #f3f4f6;
+  --color-surface-dim: #e5e7eb;
+  --color-ink: #1A1A1A;
+  --color-ink-muted: #333333;
+  --color-accent-lime: #DFFF40;
+  --color-accent-blue: #9BB5FC;
+  --color-accent-olive: #7C8B00;
+  --color-panel: #ffffff;
+  --color-panel-secondary: #f9fafb;
+  --color-panel-hover: #f3f4f6;
+  --color-panel-active: #e5e7eb;
+  --color-border: #e5e7eb;
+  --color-border-subtle: #f3f4f6;
+  --color-border-row: #f9fafb;
+  --color-text-secondary: #6b7280;
+  --color-text-muted: #9ca3af;
+  --color-text-dim: #d1d5db;
+  --color-text-data: #4b5563;
+  --color-bar: #f3f4f6;
+  --color-code-bg: #f9fafb;
+  --color-link: #2563eb;
+  --shadow-card: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --shadow-card-hover: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
+  --shadow-lime-glow: none;
+  --shadow-focus: 0 0 0 2px rgba(0, 0, 0, 0.06);
+  --shadow-focus-soft: 0 0 0 1px rgba(0, 0, 0, 0.04);
+  --radius-card: 10px;
+  --color-error-highlight: #fef2f2;
+  --color-error-ring: #fca5a5;
+  --color-error-icon-bg: #fef2f2;
+  --color-error-icon-text: #ef4444;
+  --color-btn-danger-hover-bg: #fef2f2;
+  --color-btn-danger-hover-text: #dc2626;
+  --color-btn-danger-hover-border: #fecaca;
+  --color-badge-red-bg: #fef2f2;
+  --color-badge-red-text: #b91c1c;
+  --color-badge-blue-bg: #eff6ff;
+  --color-badge-blue-text: #1d4ed8;
+  --color-badge-purple-bg: #faf5ff;
+  --color-badge-purple-text: #7e22ce;
+  --color-badge-orange-bg: #fff7ed;
+  --color-badge-orange-text: #c2410c;
+  --color-badge-yellow-bg: #fefce8;
+  --color-badge-yellow-text: #a16207;
+  --color-badge-emerald-bg: #ecfdf5;
+  --color-badge-emerald-text: #047857;
+  --color-span-ok: #059669;
+  --color-span-error: #ef4444;
+}
+
+/* Explicit dark mode */
+html[data-theme="dark"] {
+  --color-surface: #0c0c0c;
+  --color-surface-raised: #1a1a1a;
+  --color-surface-hover: #1e1e1e;
+  --color-surface-dim: #2a2a2a;
+  --color-ink: #f5f5f5;
+  --color-ink-muted: #d4d4d4;
+  --color-panel: #161616;
+  --color-panel-secondary: #1a1a1a;
+  --color-panel-hover: #1e1e1e;
+  --color-panel-active: #2a2a2a;
+  --color-border: #2a2a2a;
+  --color-border-subtle: #1e1e1e;
+  --color-border-row: #141414;
+  --color-text-secondary: #a3a3a3;
+  --color-text-muted: #737373;
+  --color-text-dim: #525252;
+  --color-text-data: #d4d4d4;
+  --color-bar: #1c1c1c;
+  --color-code-bg: #1c1c1c;
+  --color-link: #60a5fa;
+  --shadow-card: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
+  --shadow-card-hover: 0 1px 3px 0 rgba(0, 0, 0, 0.4);
+  --shadow-focus: 0 0 0 2px rgba(255, 255, 255, 0.1);
+  --shadow-focus-soft: 0 0 0 1px rgba(255, 255, 255, 0.06);
+  --color-error-highlight: rgba(127, 29, 29, 0.4);
+  --color-error-ring: #7f1d1d;
+  --color-error-icon-bg: rgba(127, 29, 29, 0.4);
+  --color-error-icon-text: #f87171;
+  --color-btn-danger-hover-bg: rgba(127, 29, 29, 0.3);
+  --color-btn-danger-hover-text: #f87171;
+  --color-btn-danger-hover-border: #991b1b;
+  --color-badge-red-bg: rgba(127, 29, 29, 0.4);
+  --color-badge-red-text: #f87171;
+  --color-badge-blue-bg: rgba(23, 37, 84, 0.4);
+  --color-badge-blue-text: #60a5fa;
+  --color-badge-purple-bg: rgba(59, 7, 100, 0.4);
+  --color-badge-purple-text: #c084fc;
+  --color-badge-orange-bg: rgba(124, 45, 18, 0.4);
+  --color-badge-orange-text: #fb923c;
+  --color-badge-yellow-bg: rgba(113, 63, 18, 0.4);
+  --color-badge-yellow-text: #facc15;
+  --color-badge-emerald-bg: rgba(6, 78, 59, 0.4);
+  --color-badge-emerald-text: #34d399;
+  --color-span-ok: #047857;
+  --color-span-error: #ef4444;
+}
+
+/* Auto dark mode (follows system when no explicit theme) */
+@media (prefers-color-scheme: dark) {
+  html:not([data-theme="light"]):not([data-theme="dark"]) {
+    --color-surface: #0c0c0c;
+    --color-surface-raised: #1a1a1a;
+    --color-surface-hover: #1e1e1e;
+    --color-surface-dim: #2a2a2a;
+    --color-ink: #f5f5f5;
+    --color-ink-muted: #d4d4d4;
+    --color-panel: #161616;
+    --color-panel-secondary: #1a1a1a;
+    --color-panel-hover: #1e1e1e;
+    --color-panel-active: #2a2a2a;
+    --color-border: #2a2a2a;
+    --color-border-subtle: #1e1e1e;
+    --color-border-row: #141414;
+    --color-text-secondary: #a3a3a3;
+    --color-text-muted: #737373;
+    --color-text-dim: #525252;
+    --color-text-data: #d4d4d4;
+    --color-bar: #1c1c1c;
+    --color-code-bg: #1c1c1c;
+    --color-link: #60a5fa;
+    --shadow-card: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
+    --shadow-card-hover: 0 1px 3px 0 rgba(0, 0, 0, 0.4);
+    --shadow-focus: 0 0 0 2px rgba(255, 255, 255, 0.1);
+    --shadow-focus-soft: 0 0 0 1px rgba(255, 255, 255, 0.06);
+    --color-error-highlight: rgba(127, 29, 29, 0.4);
+    --color-error-ring: #7f1d1d;
+    --color-error-icon-bg: rgba(127, 29, 29, 0.4);
+    --color-error-icon-text: #f87171;
+    --color-btn-danger-hover-bg: rgba(127, 29, 29, 0.3);
+    --color-btn-danger-hover-text: #f87171;
+    --color-btn-danger-hover-border: #991b1b;
+    --color-badge-red-bg: rgba(127, 29, 29, 0.4);
+    --color-badge-red-text: #f87171;
+    --color-badge-blue-bg: rgba(23, 37, 84, 0.4);
+    --color-badge-blue-text: #60a5fa;
+    --color-badge-purple-bg: rgba(59, 7, 100, 0.4);
+    --color-badge-purple-text: #c084fc;
+    --color-badge-orange-bg: rgba(124, 45, 18, 0.4);
+    --color-badge-orange-text: #fb923c;
+    --color-badge-yellow-bg: rgba(113, 63, 18, 0.4);
+    --color-badge-yellow-text: #facc15;
+    --color-badge-emerald-bg: rgba(6, 78, 59, 0.4);
+    --color-badge-emerald-text: #34d399;
+    --color-span-ok: #047857;
+    --color-span-error: #ef4444;
+  }
+}
+
+/* Scrollbar — not possible via Tailwind */
+.scrollbar-thin::-webkit-scrollbar {
+  width: 6px;
+}
+.scrollbar-thin::-webkit-scrollbar-track {
+  background: transparent;
+}
+.scrollbar-thin::-webkit-scrollbar-thumb {
+  background: var(--color-text-dim);
+  border-radius: 3px;
+}
+
+/* Danger button hover */
+.btn-danger:hover {
+  background: var(--color-btn-danger-hover-bg);
+  color: var(--color-btn-danger-hover-text);
+  border-color: var(--color-btn-danger-hover-border);
+}

package/runtime/dashboard/views/ai.tsx

@@ -0,0 +1,152 @@
+import { useState } from "preact/hooks";
+import { formatTime } from "../lib";
+import { useQuery, useMutation } from "../rpc/hooks";
+import { EmptyState, Table, PageHeader, PillButton, DeleteButton, StatusBadge, ServiceInfo, RefreshButton } from "../components";
+
+const AI_STATUS_COLORS: Record<string, string> = {
+	ok: "bg-emerald-100 text-emerald-700",
+	error: "bg-red-100 text-red-700",
+};
+
+export function AiView({ route }: { route: string }) {
+	const parts = route.split("/").filter(Boolean);
+	if (parts.length >= 2) return <AiDetail id={parts[1]!} />;
+	return <AiList />;
+}
+
+function AiList() {
+	const [modelFilter, setModelFilter] = useState("");
+	const [statusFilter, setStatusFilter] = useState("");
+	const { data: requests, refetch } = useQuery("ai.list", {
+		model: modelFilter || undefined,
+		status: statusFilter || undefined,
+	});
+	const { data: stats } = useQuery("ai.stats");
+	const { data: models } = useQuery("ai.models");
+	const { data: configGroups } = useQuery("config.forService", { type: "ai" });
+	const deleteReq = useMutation("ai.delete");
+
+	const handleDelete = async (id: string) => {
+		if (!confirm("Delete this AI request log?")) return;
+		await deleteReq.mutate({ id });
+		refetch();
+	};
+
+	return (
+		<div class="p-8 max-w-6xl">
+			<PageHeader title="Workers AI" subtitle={`${stats?.total ?? 0} request(s)`} actions={<RefreshButton onClick={refetch} />} />
+			<div class="flex gap-6 items-start">
+				<div class="flex-1 min-w-0">
+					<div class="mb-6 flex gap-2 items-center flex-wrap">
+						<PillButton onClick={() => setStatusFilter("")} active={statusFilter === ""}>
+							All
+						</PillButton>
+						<PillButton onClick={() => setStatusFilter("ok")} active={statusFilter === "ok"}>
+							OK
+						</PillButton>
+						<PillButton onClick={() => setStatusFilter("error")} active={statusFilter === "error"}>
+							Error
+						</PillButton>
+						{(models?.length ?? 0) > 0 && (
+							<select
+								value={modelFilter}
+								onChange={e => setModelFilter((e.target as HTMLSelectElement).value)}
+								class="ml-2 text-xs bg-panel-secondary border border-border rounded-md px-2 py-1 outline-none"
+							>
+								<option value="">All models</option>
+								{models!.map(m => (
+									<option key={m} value={m}>{m}</option>
+								))}
+							</select>
+						)}
+					</div>
+					{!requests?.length ? (
+						<EmptyState message="No AI requests found" />
+					) : (
+						<Table
+							headers={["Model", "Status", "Duration", "Stream", "Time", ""]}
+							rows={requests.map(r => [
+								<a href={`#/ai/${r.id}`} class="font-mono text-xs text-blue-600 hover:underline max-w-[200px] truncate block">{r.model}</a>,
+								<StatusBadge status={r.status} colorMap={AI_STATUS_COLORS} />,
+								<span class="text-xs text-text-muted tabular-nums">{r.duration_ms}ms</span>,
+								r.is_streaming ? <span class="text-xs text-purple-500">yes</span> : <span class="text-xs text-text-dim">no</span>,
+								<span class="text-xs text-text-muted">{formatTime(r.created_at)}</span>,
+								<DeleteButton onClick={() => handleDelete(r.id)} />,
+							])}
+						/>
+					)}
+				</div>
+				<ServiceInfo
+					description="Workers AI binding — proxies requests to Cloudflare AI API."
+					stats={[
+						{ label: "Total", value: stats?.total ?? 0 },
+						{ label: "Avg duration", value: `${stats?.avgDuration ?? 0}ms` },
+						...(stats?.byStatus ? Object.entries(stats.byStatus).map(([k, v]) => ({ label: k, value: v })) : []),
+					]}
+					configGroups={configGroups}
+					links={[
+						{ label: "Workers AI docs", href: "https://developers.cloudflare.com/workers-ai/" },
+						{ label: "Models", href: "https://developers.cloudflare.com/workers-ai/models/" },
+					]}
+				/>
+			</div>
+		</div>
+	);
+}
+
+function AiDetail({ id }: { id: string }) {
+	const { data } = useQuery("ai.get", { id });
+
+	if (!data) {
+		return (
+			<div class="p-8">
+				<a href="#/ai" class="text-sm text-blue-600 hover:underline mb-4 inline-block">Back to AI requests</a>
+				<EmptyState message="Request not found" />
+			</div>
+		);
+	}
+
+	return (
+		<div class="p-8 max-w-4xl">
+			<a href="#/ai" class="text-sm text-blue-600 hover:underline mb-4 inline-block">Back to AI requests</a>
+			<div class="bg-panel border border-border rounded-lg p-6">
+				<div class="flex items-center justify-between mb-4">
+					<h2 class="text-lg font-semibold text-ink">AI Request Detail</h2>
+					<StatusBadge status={data.status} colorMap={AI_STATUS_COLORS} />
+				</div>
+				<div class="grid grid-cols-2 gap-4 mb-4 text-sm">
+					<div>
+						<span class="text-text-muted">Model:</span>{" "}
+						<span class="font-mono">{data.model}</span>
+					</div>
+					<div>
+						<span class="text-text-muted">Duration:</span>{" "}
+						<span class="tabular-nums">{data.duration_ms}ms</span>
+					</div>
+					<div>
+						<span class="text-text-muted">Streaming:</span>{" "}
+						{data.is_streaming ? "Yes" : "No"}
+					</div>
+					<div>
+						<span class="text-text-muted">Time:</span>{" "}
+						{formatTime(data.created_at)}
+					</div>
+					{data.error && (
+						<div class="col-span-2">
+							<span class="text-text-muted">Error:</span>{" "}
+							<span class="text-red-600">{data.error}</span>
+						</div>
+					)}
+				</div>
+				<div class="mb-4">
+					<div class="text-xs text-text-muted mb-2">Input</div>
+					<pre class="bg-panel-secondary border border-border rounded-lg p-4 text-xs font-mono overflow-x-auto whitespace-pre-wrap max-h-64 overflow-y-auto">{data.input_summary ?? "<empty>"}</pre>
+				</div>
+				<div>
+					<div class="text-xs text-text-muted mb-2">Output</div>
+					<pre class="bg-panel-secondary border border-border rounded-lg p-4 text-xs font-mono overflow-x-auto whitespace-pre-wrap max-h-64 overflow-y-auto">{data.output_summary ?? "<empty>"}</pre>
+				</div>
+			</div>
+		</div>
+	);
+}