@payconductor/houndsman 0.3.0 → 0.4.0

package/src/server/client/constants.ts

@@ -2,7 +2,15 @@
  * Constantes de apresentação do cliente (labels, ordem, emojis).
  */
 
-import type { Decision, ExecState, RunStatus, RunSummary, Severity } from "./types";
+import type {
+	ArtifactKind,
+	ArtifactMeta,
+	Decision,
+	ExecState,
+	RunStatus,
+	RunSummary,
+	Severity,
+} from "./types";
 
 /** Rótulo de exibição de cada severidade (o CSS dá a cor via `sev-<nivel>`). */
 export const SEVERITY_LABELS: Record<Severity, string> = {
@@ -58,34 +66,132 @@ export function describeRunStatus(
 	return { kind: status, label: RUN_STATUS_LABELS[status], timeout: false };
 }
 
-/** Artefatos que podem ser lidos na aba "Artefatos". */
-export const ARTIFACTS = [
-	"manifest.json",
-	"classification.json",
-	"candidates.json",
-	"context-summary.json",
-	"review.md",
-] as const;
-
-export type ArtifactName = (typeof ARTIFACTS)[number];
-
-/** Descrição de cada artefato (mostrada ao selecioná-lo na aba). */
-export const ARTIFACT_INFO: Record<ArtifactName, string> = {
-	"manifest.json":
-		"Resumo da execução: watchdogs ativos, arquivos, orçamento, churn, Jev e contexto da PR.",
-	"classification.json":
-		"Classificação do diff: watchdogs ativados por arquivo, status (A/M/D/R) e churn por arquivo.",
-	"candidates.json":
-		"Indícios da pré-análise Jev (regra + arquivo + confiança) — não são achados.",
-	"context-summary.json":
-		"Resumo da PR (objetivo, motivação e alterações) gerado no Passo 0.",
-	"review.md": "Relatório consolidado da revisão — o entregável.",
+/** Ordem canônica dos tipos de artefato na lista da UI. */
+const KIND_ORDER: ArtifactKind[] = [
+	"review",
+	"domain-review",
+	"verify",
+	"brief",
+	"manifest",
+	"classification",
+	"candidates",
+	"context",
+	"context-brief",
+	"context-summary",
+	"finding-report",
+	"other",
+];
+
+/** Grupo visual de cada tipo (relatórios, briefs, núcleo, contexto…). */
+const GROUP_BY_KIND: Record<ArtifactKind, { key: string; label: string; order: number }> =
+	{
+		review: { key: "report", label: "Relatórios", order: 0 },
+		"domain-review": { key: "report", label: "Relatórios", order: 0 },
+		verify: { key: "verify", label: "Verificação", order: 1 },
+		brief: { key: "brief", label: "Briefs (auditoria)", order: 2 },
+		manifest: { key: "core", label: "Núcleo da revisão", order: 3 },
+		classification: { key: "core", label: "Núcleo da revisão", order: 3 },
+		candidates: { key: "core", label: "Núcleo da revisão", order: 3 },
+		context: { key: "context", label: "Contexto da PR", order: 4 },
+		"context-brief": { key: "context", label: "Contexto da PR", order: 4 },
+		"context-summary": { key: "context", label: "Contexto da PR", order: 4 },
+		"finding-report": { key: "other", label: "Outros", order: 5 },
+		other: { key: "other", label: "Outros", order: 5 },
+	};
+
+/** Rótulo curto do tipo (badge do item). */
+export const ARTIFACT_KIND_LABELS: Record<ArtifactKind, string> = {
+	review: "relatório",
+	"domain-review": "domínio",
+	verify: "verify",
+	brief: "brief",
+	manifest: "manifesto",
+	classification: "classificação",
+	candidates: "jev",
+	context: "contexto",
+	"context-brief": "brief ctx",
+	"context-summary": "resumo ctx",
+	"finding-report": "findings",
+	other: "outro",
 };
 
+/** Nome exibido (briefs perdem o prefixo `briefs/`). */
+export function displayArtifactName(meta: ArtifactMeta): string {
+	return meta.name.startsWith("briefs/")
+		? meta.name.slice("briefs/".length)
+		: meta.name;
+}
+
+/** Descrição curta do artefato (cabeçalho do painel). */
+export function describeArtifact(meta: ArtifactMeta): string {
+	switch (meta.kind) {
+		case "review":
+			return "Relatório consolidado da revisão — o entregável.";
+		case "domain-review":
+			return "Relatório isolado do domínio: achados daquele watchdog.";
+		case "verify":
+			return "Resultado do `findings verify` (resolvidos, persistentes e incertos).";
+		case "brief":
+			return "Instruções enviadas ao subagente (auditoria do prompt).";
+		case "manifest":
+			return "Resumo da execução: watchdogs, arquivos, orçamento, churn, Jev e contexto.";
+		case "classification":
+			return "Classificação do diff: watchdogs ativados por arquivo, status (A/M/D/R) e churn.";
+		case "candidates":
+			return "Indícios da pré-análise Jev (regra + arquivo + confiança) — não são achados.";
+		case "context":
+			return "Payload bruto da PR coletado via `gh` (ou marcador de indisponível).";
+		case "context-brief":
+			return "Brief do subagente que resume o contexto da PR.";
+		case "context-summary":
+			return "Resumo da PR (objetivo, motivação e alterações) gerado no Passo 0.";
+		default:
+			return meta.name;
+	}
+}
+
+/** `true` se o conteúdo deve ser renderizado com destaque de JSON. */
+export function isJsonArtifact(meta: ArtifactMeta | undefined): boolean {
+	if (!meta) return false;
+	return meta.contentType.includes("json") || meta.name.toLowerCase().endsWith(".json");
+}
+
+/** Agrupa os artefatos para a navegação lateral (ordem estável). */
+export function groupArtifacts(
+	items: ArtifactMeta[],
+): { key: string; label: string; items: ArtifactMeta[] }[] {
+	const groups = new Map<
+		string,
+		{ key: string; label: string; order: number; items: ArtifactMeta[] }
+	>();
+	for (const item of items) {
+		const meta = GROUP_BY_KIND[item.kind] ?? GROUP_BY_KIND.other;
+		const group = groups.get(meta.key) ?? {
+			key: meta.key,
+			label: meta.label,
+			order: meta.order,
+			items: [],
+		};
+		group.items.push(item);
+		groups.set(meta.key, group);
+	}
+	return [...groups.values()]
+		.sort((a, b) => a.order - b.order)
+		.map((group) => ({
+			key: group.key,
+			label: group.label,
+			items: group.items.sort(
+				(a, b) =>
+					KIND_ORDER.indexOf(a.kind) - KIND_ORDER.indexOf(b.kind) ||
+					a.name.localeCompare(b.name),
+			),
+		}));
+}
+
 /** Legenda única de cada aba (explica o que a aba é; mostrada quando selecionada). */
 export const TAB_CAPTIONS = {
 	findings:
 		"Triagem dos achados da revisão: decida Executar, Ignorar ou deixe Pendente — o comentário orienta o auto-fix. Agente: houndsman findings list --decision pending --json · findings done <id>.",
 	artifacts:
-		"Artefatos brutos da run: manifesto, classificação, candidatos Jev, contexto da PR e o relatório consolidado (review.md).",
+		"Artefatos persistidos da run: relatórios, briefs de auditoria, manifesto, classificação, Jev, contexto da PR e verificação. JSON com destaque de sintaxe.",
 } as const;

package/src/server/client/json-highlight.ts

@@ -0,0 +1,55 @@
+/**
+ * Destaque de sintaxe JSON (cliente) — implementação própria e leve.
+ *
+ * Não puxa lib de highlight: tokeniza o texto já formatado e devolve spans.
+ * Funciona para qualquer JSON gerado pelo houndsman (manifest, classification,
+ * context, candidates, …).
+ */
+
+export type JsonTokenType = "plain" | "key" | "string" | "number" | "literal" | "punct";
+
+export type JsonToken = { text: string; type: JsonTokenType };
+
+const TOKEN =
+	/("(?:\\.|[^"\\])*")(\s*:)?|(-?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?)|\b(true|false|null)\b|([{}[\],:])/g;
+
+/** Pretty-print best-effort; devolve o original se não for JSON válido. */
+export function formatJson(text: string): string {
+	try {
+		return JSON.stringify(JSON.parse(text), null, 2);
+	} catch {
+		return text;
+	}
+}
+
+/** Tokeniza o JSON preservando o texto original (inclusive espaços/quebras). */
+export function highlightJson(text: string): JsonToken[] {
+	const tokens: JsonToken[] = [];
+	let last = 0;
+	for (const match of text.matchAll(TOKEN)) {
+		const index = match.index ?? 0;
+		if (index > last) {
+			tokens.push({ text: text.slice(last, index), type: "plain" });
+		}
+		if (match[1] !== undefined) {
+			tokens.push({
+				text: match[1],
+				type: match[2] !== undefined ? "key" : "string",
+			});
+			if (match[2] !== undefined) {
+				tokens.push({ text: match[2], type: "punct" });
+			}
+		} else if (match[3] !== undefined) {
+			tokens.push({ text: match[3], type: "number" });
+		} else if (match[4] !== undefined) {
+			tokens.push({ text: match[4], type: "literal" });
+		} else if (match[5] !== undefined) {
+			tokens.push({ text: match[5], type: "punct" });
+		}
+		last = index + match[0].length;
+	}
+	if (last < text.length) {
+		tokens.push({ text: text.slice(last), type: "plain" });
+	}
+	return tokens;
+}

package/src/server/client/markdown.ts

@@ -0,0 +1,153 @@
+/**
+ * Markdown mínimo do campo `action` (cliente).
+ *
+ * Suporta o suficiente para instruções curtas: parágrafos, quebras de linha,
+ * listas, blockquote, blocos de código e formatação inline (`code`, **bold**,
+ * *itálico*, links). Sem lib externa e sem HTML cru.
+ */
+
+export type MarkdownBlock =
+	| { type: "paragraph"; text: string }
+	| { type: "list"; ordered: boolean; items: string[] }
+	| { type: "code"; language: string | null; code: string }
+	| { type: "quote"; text: string };
+
+export type InlineToken =
+	| { type: "text"; text: string }
+	| { type: "code"; text: string }
+	| { type: "strong"; text: string }
+	| { type: "em"; text: string }
+	| { type: "link"; text: string; url: string };
+
+const FENCE = /^\s*```(\S*)\s*$/;
+const BULLET = /^\s*[-*+]\s+(.*)$/;
+const ORDERED = /^\s*\d+\.\s+(.*)$/;
+const QUOTE = /^\s*>\s?(.*)$/;
+
+function isBlockStart(line: string): boolean {
+	return (
+		FENCE.test(line) || BULLET.test(line) || ORDERED.test(line) || QUOTE.test(line)
+	);
+}
+
+/** Divide o texto em blocos simples (sem aninhamento profundo). */
+export function parseMarkdown(text: string): MarkdownBlock[] {
+	const lines = text.replace(/\r\n?/g, "\n").split("\n");
+	const blocks: MarkdownBlock[] = [];
+	let index = 0;
+
+	while (index < lines.length) {
+		const line = lines[index];
+		if (line.trim().length === 0) {
+			index++;
+			continue;
+		}
+
+		const fence = FENCE.exec(line);
+		if (fence) {
+			const language = fence[1] || null;
+			const code: string[] = [];
+			index++;
+			while (index < lines.length && !FENCE.test(lines[index])) {
+				code.push(lines[index]);
+				index++;
+			}
+			if (index < lines.length) index++;
+			blocks.push({ type: "code", language, code: code.join("\n") });
+			continue;
+		}
+
+		if (BULLET.test(line)) {
+			const items: string[] = [];
+			while (index < lines.length) {
+				const item = BULLET.exec(lines[index]);
+				if (!item) break;
+				items.push(item[1]);
+				index++;
+			}
+			blocks.push({ type: "list", ordered: false, items });
+			continue;
+		}
+
+		if (ORDERED.test(line)) {
+			const items: string[] = [];
+			while (index < lines.length) {
+				const item = ORDERED.exec(lines[index]);
+				if (!item) break;
+				items.push(item[1]);
+				index++;
+			}
+			blocks.push({ type: "list", ordered: true, items });
+			continue;
+		}
+
+		if (QUOTE.test(line)) {
+			const quote: string[] = [];
+			while (index < lines.length) {
+				const item = QUOTE.exec(lines[index]);
+				if (!item) break;
+				quote.push(item[1]);
+				index++;
+			}
+			blocks.push({ type: "quote", text: quote.join("\n") });
+			continue;
+		}
+
+		const paragraph: string[] = [line];
+		index++;
+		while (
+			index < lines.length &&
+			lines[index].trim().length > 0 &&
+			!isBlockStart(lines[index])
+		) {
+			paragraph.push(lines[index]);
+			index++;
+		}
+		blocks.push({ type: "paragraph", text: paragraph.join("\n") });
+	}
+
+	return blocks;
+}
+
+/** Tokeniza formatação inline preservando o texto e a ordem dos marcadores. */
+export function parseInline(text: string): InlineToken[] {
+	const tokens: InlineToken[] = [];
+	// Ordem importa: code/bold antes de itálico; `_` exige fronteira de palavra.
+	const pattern =
+		/`[^`\n]+`|\*\*[^*\n]+\*\*|__[^_\n]+__|\*[^*\n]+\*|(?<![\w])_[^_\n]+_(?![\w])|\[[^\]\n]+\]\([^)\s]+\)/g;
+	let last = 0;
+	for (const match of text.matchAll(pattern)) {
+		const start = match.index ?? 0;
+		if (start > last) {
+			tokens.push({ type: "text", text: text.slice(last, start) });
+		}
+		const raw = match[0];
+		if (raw.startsWith("`")) {
+			tokens.push({ type: "code", text: raw.slice(1, -1) });
+		} else if (raw.startsWith("**") || raw.startsWith("__")) {
+			tokens.push({ type: "strong", text: raw.slice(2, -2) });
+		} else if (raw.startsWith("*") || raw.startsWith("_")) {
+			tokens.push({ type: "em", text: raw.slice(1, -1) });
+		} else {
+			const link = /^\[([^\]]+)\]\(([^)\s]+)\)$/.exec(raw);
+			if (link) {
+				tokens.push({ type: "link", text: link[1], url: link[2] });
+			} else {
+				tokens.push({ type: "text", text: raw });
+			}
+		}
+		last = start + raw.length;
+	}
+	if (last < text.length) {
+		tokens.push({ type: "text", text: text.slice(last) });
+	}
+	return tokens;
+}
+
+/** URL segura para links de markdown (evita `javascript:` e afins). */
+export function safeUrl(url: string): string | null {
+	const value = url.trim();
+	if (/^(https?:|mailto:)/i.test(value)) return value;
+	if (value.startsWith("/") && !value.startsWith("//")) return value;
+	return null;
+}

package/src/server/client/types.ts

@@ -50,6 +50,29 @@ export type Summary = {
 	bySeverity: Record<Severity, number>;
 };
 
+/** Espécie de artefato persistido (espelha `core/storage/types.ts`). */
+export type ArtifactKind =
+	| "brief"
+	| "classification"
+	| "manifest"
+	| "candidates"
+	| "context"
+	| "context-brief"
+	| "context-summary"
+	| "finding-report"
+	| "review"
+	| "domain-review"
+	| "verify"
+	| "other";
+
+/** Metadados de artefato retornados pela API (sem conteúdo). */
+export type ArtifactMeta = {
+	name: string;
+	kind: ArtifactKind;
+	contentType: string;
+	updatedAt: string;
+};
+
 export type RunSummary = {
 	slug: string;
 	branch: string;

package/src/server/index.ts

@@ -1,9 +1,9 @@
 /**
  * Servidor local do houndsman (`Bun.serve`) — UI de triagem + artefatos.
  *
- * Serve um SPA Preact (bundle em memória) + uma API JSON sobre o `state.json`
- * das runs em `.houndsman/.runs/`. Sem dependências além do Bun e do Preact.
- * Bind padrão em `127.0.0.1` — ferramenta local, sem autenticação.
+ * Serve um SPA Preact (bundle em memória) + uma API JSON sobre o storage global
+ * (SQLite por default), escopada ao repositório do cwd. Sem dependências além do
+ * Bun e do Preact. Bind padrão em `127.0.0.1` — ferramenta local, sem autenticação.
  */
 
 import { mediaPath } from "../core/assets";
@@ -14,6 +14,9 @@ import {
 	type GhRunner,
 	type SubmitSelection,
 } from "../core/github-review";
+import { createStorage } from "../core/storage/factory";
+import { resolveRepoIdentity } from "../core/storage/repo-identity";
+import type { RepoIdentity, StorageProvider } from "../core/storage/types";
 import { buildClientBundle } from "./client-build";
 import { RunRepository } from "./run-repository";
 
@@ -53,7 +56,11 @@ function notFound(detail = "não encontrado"): Response {
 // ---------------------------------------------------------------------------
 
 /** Repositório das runs (dados) — ver `run-repository.ts`. */
-type ServerDeps = { ghRunner?: GhRunner };
+type ServerDeps = {
+	ghRunner?: GhRunner;
+	storage?: StorageProvider;
+	repo?: RepoIdentity;
+};
 
 // ---------------------------------------------------------------------------
 // Rotas
@@ -142,6 +149,9 @@ async function route(
 		if (!artifact) return notFound(`artefato '${name}' não encontrado`);
 		return text(artifact.content, artifact.type);
 	}
+	if (rest === "/artifacts" && request.method === "GET") {
+		return json({ artifacts: runs.artifacts(slug) ?? [] });
+	}
 
 	return notFound();
 }
@@ -152,7 +162,10 @@ export class HoundsmanServer {
 	private readonly ghRunner: GhRunner;
 
 	constructor(config: HoundsmanConfig, deps: ServerDeps = {}) {
-		this.runs = RunRepository.fromConfig(config);
+		this.runs = new RunRepository(
+			deps.storage ?? createStorage(config),
+			deps.repo ?? resolveRepoIdentity(),
+		);
 		this.ghRunner = deps.ghRunner ?? defaultGhRunner;
 	}
 
@@ -173,11 +186,26 @@ export class HoundsmanServer {
 		server: BunServer;
 		url: string;
 	} {
+		// Manutenção do banco no start: compacta o que sobrou de runs antigas.
+		try {
+			this.runs.maintain();
+		} catch (error) {
+			console.warn(
+				`[houndsman] VACUUM falhou (seguindo sem compactar): ${
+					error instanceof Error ? error.message : String(error)
+				}`,
+			);
+		}
 		const host = options.host ?? "127.0.0.1";
 		const port = options.port ?? 7331;
 		const server = Bun.serve({ hostname: host, port, fetch: this.handler });
 		return { server, url: `http://${host}:${server.port}` };
 	}
+
+	/** Fecha o provider (após `server.stop()`). */
+	dispose(): void {
+		this.runs.dispose();
+	}
 }
 
 /** Cria o handler de requisições (testável sem abrir porta). */
@@ -194,11 +222,18 @@ export type ServerOptions = {
 	host?: string;
 	/** Runner do `gh` (injetável nos testes). */
 	ghRunner?: GhRunner;
+	/** Provider/storage injetável (testes). */
+	storage?: StorageProvider;
+	repo?: RepoIdentity;
 };
 
 /** Sobe o servidor e devolve a instância + URL. */
 export function startServer(options: ServerOptions): { server: BunServer; url: string } {
-	return new HoundsmanServer(options.config, { ghRunner: options.ghRunner }).start({
+	return new HoundsmanServer(options.config, {
+		ghRunner: options.ghRunner,
+		storage: options.storage,
+		repo: options.repo,
+	}).start({
 		port: options.port,
 		host: options.host,
 	});
@@ -227,7 +262,7 @@ html, body { height:100%; }
 body { margin:0; font-size:14px; background:var(--bg); color:var(--fg); font-family:var(--font-sans); -webkit-font-smoothing:antialiased; }
 body::before { content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
   background:radial-gradient(820px 420px at 8% -12%, rgba(240,165,44,.08), transparent 62%); }
-code, pre, .mono { font-family:var(--font-mono); }
+code, pre, .mono { font-family:var(--font-mono); tab-size:4; }
 ::-webkit-scrollbar { width:10px; height:10px; }
 ::-webkit-scrollbar-thumb { background:rgba(255,255,255,.1); border:2px solid transparent; border-radius:999px; background-clip:padding-box; }
 ::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,.18); background-clip:padding-box; }
@@ -369,13 +404,35 @@ code, pre, .mono { font-family:var(--font-mono); }
 .meta { display:inline-flex; align-items:center; gap:7px; }
 .meta-k { font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2); }
 .meta code { padding:2px 6px; font-size:11.5px; color:var(--fg); background:rgba(255,255,255,.04); border:1px solid var(--border); border-radius:6px; }
-.action-block { display:flex; gap:11px; padding:16px; background:var(--accent-soft); border:1px solid var(--accent-line); border-radius:var(--radius); }
-.action-icon { flex:none; display:inline-block; margin-right:5px; margin-bottom:-5px; color:var(--accent); }
-.action-label { display:inline-block; font-size:10px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin-right:5px; }
-.action-block p { margin:0; font-size:13px; color:#f0ece6; }
+.action-block { display:flex; gap:11px; padding:0; background:transparent; border:0; border-radius:0; }
+.action-icon { flex:none; display:inline-block; margin-top:3px; margin-right:2px; color:var(--accent); }
+.action-text { flex:1; min-width:0; }
+.action-label { display:block; margin-bottom:4px; font-size:10px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); }
+.action-text p, .md-p { margin:0 0 6px; font-size:13px; line-height:1.65; color:#f0ece6; white-space:pre-wrap; }
+.action-text p:last-child { margin-bottom:0; }
+.md-list { margin:0 0 6px; padding-left:20px; font-size:13px; line-height:1.65; color:#f0ece6; }
+.md-list li { margin:0 0 2px; }
+.md-quote { margin:0 0 6px; padding:2px 0 2px 10px; border-left:2px solid var(--accent-line); color:var(--muted); font-size:13px; line-height:1.65; }
+.action-text code, .md-code { font-family:var(--font-mono); font-size:11.5px; padding:1px 5px; color:#f0ece6; background:rgba(255,255,255,.06); border:1px solid var(--border); border-radius:5px; }
+.action-text a { color:var(--accent-strong); text-decoration:underline; text-underline-offset:2px; }
+.action-text strong { color:#fff; font-weight:600; }
+.action-text em { color:#e9e4dc; }
+.md-code-block { margin:6px 0; padding:10px 12px; max-height:320px; overflow:auto; white-space:pre; font-size:11.5px; line-height:1.6; color:#cdc7bf; background:#0b0b0e; border-radius:10px; }
 .decision-tags-block { display:flex; align-items:center; gap:8px; }
 .evidence { margin:0; padding: 16px; white-space:break-spaces; font-size:12px; line-height:1.6; color:#cdc7bf;
   background:#0b0b0e; border:1px solid var(--border); border-radius:var(--radius); }
+.evidence-block { display:flex; flex-direction:column; gap:6px; }
+.evidence-head { display:flex; justify-content:flex-end; }
+.code-lang { font-family:var(--font-mono); font-size:9.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2); }
+.code-evidence { white-space:pre; overflow:auto; }
+.tok-keyword { color:#c792ea; }
+.tok-string { color:#9ddc8a; }
+.tok-comment { color:#6d6862; font-style:italic; }
+.tok-number { color:#8fc7ff; }
+.tok-type { color:var(--accent-strong); }
+.tok-function { color:#82aaff; }
+.tok-property { color:#e6c07b; }
+.tok-punct { color:#8d8a85; }
 .tags { display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin-left: auto; }
 .tags-label { display:inline-flex; align-items:center; gap:6px; font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2); }
 .tag { display:inline-flex; align-items:center; gap:6px; padding:3px 9px; font-family:var(--font-mono); font-size:11px; color:var(--muted);
@@ -398,11 +455,34 @@ code, pre, .mono { font-family:var(--font-mono); }
   font-family:var(--font-mono); font-size:11px; color:var(--muted); }
 .comment-status.saved { color:var(--success); }
 .artifacts { display:flex; flex-direction:column; }
-.artifact-tabs { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }
-.artifact-tabs .chip { border:1px solid var(--border); background:var(--surface-2); }
-.artifact-desc { margin:0 0 12px; color:var(--muted); font-size:12.5px; line-height:1.55; }
-.artifact-view { margin:0; padding:14px; max-height:70vh; overflow:auto; font-size:12px; line-height:1.6; color:#cdc7bf;
+.artifact-layout { display:grid; grid-template-columns:minmax(190px,250px) minmax(0,1fr); gap:16px; align-items:start; }
+.artifact-list { display:flex; flex-direction:column; gap:14px; max-height:72vh; overflow:auto; padding:2px 4px 2px 0; }
+.artifact-group { display:flex; flex-direction:column; gap:4px; }
+.artifact-group-label { margin:0 0 2px; font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
+.artifact-item { display:flex; flex-direction:column; gap:2px; text-align:left; cursor:pointer; font:inherit; color:var(--muted);
+  padding:8px 10px; background:transparent; border:1px solid transparent; border-radius:10px;
+  transition:background .15s ease, border-color .15s ease, color .15s ease; }
+.artifact-item:hover { color:var(--fg); background:var(--surface-2); border-color:var(--border); }
+.artifact-item.active { color:var(--fg); background:var(--accent-soft); border-color:var(--accent-line); }
+.artifact-item-name { font-family:var(--font-mono); font-size:11.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+.artifact-item-kind { font-size:9.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2); }
+.artifact-item.active .artifact-item-kind { color:var(--accent); }
+.artifact-pane { min-width:0; }
+.artifact-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:12px; }
+.artifact-title { margin:0 0 5px; font-family:var(--font-mono); font-size:13px; font-weight:600; word-break:break-word; }
+.artifact-desc { margin:0; max-width:78ch; color:var(--muted); font-size:12.5px; line-height:1.55; }
+.artifact-kind-badge { flex:none; display:inline-flex; align-items:center; padding:3px 9px; font-size:10px; font-weight:700;
+  letter-spacing:.08em; text-transform:uppercase; color:var(--accent); background:var(--accent-soft);
+  border:1px solid var(--accent-line); border-radius:999px; }
+.artifact-view { margin:0; padding:14px 16px; max-height:70vh; overflow:auto; font-size:12px; line-height:1.6; color:#cdc7bf;
   background:#0b0b0e; border:1px solid var(--border); border-radius:var(--radius); }
+.json-view { white-space:pre; }
+.json-key { color:var(--accent-strong); }
+.json-string { color:#9ddc8a; }
+.json-number { color:#8fc7ff; }
+.json-literal { color:#d7a6ff; }
+.json-punct { color:#8d8a85; }
+@media (max-width:900px) { .artifact-layout { grid-template-columns:1fr; } .artifact-list { max-height:240px; } }
 .sent-tag { display:inline-flex; align-items:center; gap:5px; padding:2px 8px; font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
   color:var(--success); background:rgba(69,192,122,.12); border:1px solid rgba(69,192,122,.32); border-radius:999px; text-decoration:none; }
 .sent-tag:hover { color:#fff; }