@payconductor/houndsman 0.3.0 → 0.5.0

package/src/server/client/ArtifactsPanel.tsx

@@ -1,48 +1,169 @@
 /**
- * Painel de artefatos: abas para ver o conteúdo bruto dos arquivos da run.
+ * Painel de artefatos: lista todos os artefatos persistidos da run e renderiza
+ * o conteúdo bruto. JSON ganha destaque de sintaxe; markdown é renderizado com
+ * o mesmo parser/highlight do restante da UI. Briefs e relatórios ficam
+ * auditáveis pela mesma navegação.
  */
 
-import { useEffect, useState } from "preact/hooks";
-import { ARTIFACT_INFO, ARTIFACTS, type ArtifactName } from "./constants";
+import { useEffect, useMemo, useState } from "preact/hooks";
+import { MarkdownText } from "./MarkdownText";
+import { api } from "./utils/api";
+import {
+	ARTIFACT_KIND_LABELS,
+	describeArtifact,
+	displayArtifactName,
+	groupArtifacts,
+	isJsonArtifact,
+	isMarkdownArtifact,
+} from "./utils/constants";
+import { formatJson, highlightJson } from "./utils/json-highlight";
+import type { ArtifactMeta } from "./utils/types";
+
+/** Prefere o relatório consolidado; senão, o primeiro artefato disponível. */
+function pickDefault(items: ArtifactMeta[]): string {
+	return (items.find((item) => item.name === "review.md") ?? items[0])?.name ?? "";
+}
+
+/** JSON com destaque de sintaxe (tokens em spans, sem lib externa). */
+function JsonView({ content }: { content: string }) {
+	const tokens = useMemo(() => highlightJson(formatJson(content)), [content]);
+	return (
+		<pre class="artifact-view json-view">
+			{tokens.map((token) => (
+				<span class={token.type === "plain" ? undefined : `json-${token.type}`}>
+					{token.text}
+				</span>
+			))}
+		</pre>
+	);
+}
 
 export function ArtifactsPanel({ slug }: { slug: string }) {
-	const [name, setName] = useState<ArtifactName>(ARTIFACTS[0]);
+	const [items, setItems] = useState<ArtifactMeta[]>([]);
+	const [name, setName] = useState("");
 	const [content, setContent] = useState("");
 	const [error, setError] = useState("");
+	const [loading, setLoading] = useState(false);
+
+	useEffect(() => {
+		let cancelled = false;
+		setError("");
+		api<{ artifacts: ArtifactMeta[] }>(`/api/runs/${slug}/artifacts`)
+			.then(({ artifacts }) => {
+				if (cancelled) return;
+				setItems(artifacts);
+				setName((current) =>
+					artifacts.some((item) => item.name === current)
+						? current
+						: pickDefault(artifacts),
+				);
+			})
+			.catch((err) => {
+				if (cancelled) return;
+				setItems([]);
+				setName("");
+				setError(String(err));
+			});
+		return () => {
+			cancelled = true;
+		};
+	}, [slug]);
 
 	useEffect(() => {
+		if (!name) {
+			setContent("");
+			return;
+		}
+		let cancelled = false;
+		setLoading(true);
 		setError("");
-		fetch(`/api/runs/${slug}/artifacts/${name}`)
+		fetch(`/api/runs/${slug}/artifacts/${encodeURI(name)}`)
 			.then(async (res) => {
 				if (!res.ok) throw new Error(`HTTP ${res.status}`);
-				setContent(await res.text());
+				const text = await res.text();
+				if (!cancelled) setContent(text);
 			})
 			.catch((err) => {
+				if (cancelled) return;
 				setContent("");
 				setError(String(err));
+			})
+			.finally(() => {
+				if (!cancelled) setLoading(false);
 			});
+		return () => {
+			cancelled = true;
+		};
 	}, [slug, name]);
 
+	const groups = useMemo(() => groupArtifacts(items), [items]);
+	const selected = useMemo(
+		() => items.find((item) => item.name === name),
+		[items, name],
+	);
+
 	return (
 		<div class="artifacts">
-			<div class="artifact-tabs">
-				{ARTIFACTS.map((artifact) => (
-					<button
-						type="button"
-						title={ARTIFACT_INFO[artifact]}
-						class={`chip${artifact === name ? " active" : ""}`}
-						onClick={() => setName(artifact)}
-					>
-						{artifact}
-					</button>
-				))}
+			<div class="artifact-layout">
+				<nav class="artifact-list" aria-label="Artefatos da revisão">
+					{groups.map((group) => (
+						<div class="artifact-group" key={group.key}>
+							<p class="artifact-group-label">{group.label}</p>
+							{group.items.map((item) => (
+								<button
+									type="button"
+									key={item.name}
+									title={item.name}
+									class={`artifact-item${item.name === name ? " active" : ""}`}
+									onClick={() => setName(item.name)}
+								>
+									<span class="artifact-item-name">
+										{displayArtifactName(item)}
+									</span>
+									<span class="artifact-item-kind">
+										{ARTIFACT_KIND_LABELS[item.kind] ?? item.kind}
+									</span>
+								</button>
+							))}
+						</div>
+					))}
+					{items.length === 0 && !loading && (
+						<p class="empty">Nenhum artefato persistido nesta run.</p>
+					)}
+				</nav>
+
+				<section class="artifact-pane">
+					{selected ? (
+						<header class="artifact-head">
+							<div>
+								<h3 class="artifact-title">{selected.name}</h3>
+								<p class="artifact-desc">{describeArtifact(selected)}</p>
+							</div>
+							<span class="artifact-kind-badge">
+								{ARTIFACT_KIND_LABELS[selected.kind] ?? selected.kind}
+							</span>
+						</header>
+					) : null}
+
+					{error ? (
+						<p class="error">{error}</p>
+					) : loading ? (
+						<p class="empty">Carregando artefato…</p>
+					) : selected ? (
+						isJsonArtifact(selected) ? (
+							<JsonView content={content} />
+						) : isMarkdownArtifact(selected) ? (
+							<div class="artifact-view artifact-markdown">
+								<MarkdownText text={content} />
+							</div>
+						) : (
+							<pre class="artifact-view">{content || "—"}</pre>
+						)
+					) : (
+						<p class="empty">Selecione um artefato para visualizar.</p>
+					)}
+				</section>
 			</div>
-			<p class="artifact-desc">{ARTIFACT_INFO[name]}</p>
-			{error ? (
-				<p class="error">{error}</p>
-			) : (
-				<pre class="artifact-view">{content}</pre>
-			)}
 		</div>
 	);
 }

package/src/server/client/AutoRefresh.tsx

@@ -6,7 +6,7 @@
  */
 
 import { useEffect, useState } from "preact/hooks";
-import { formatElapsed } from "./format";
+import { formatElapsed } from "./utils/format";
 
 export function AutoRefresh({
 	lastSync,

package/src/server/client/Filters.tsx

@@ -3,9 +3,14 @@
  * o toggle "ausentes".
  */
 
-import { DECISION_LABELS, DECISIONS, SEVERITY_LABELS, SEVERITY_ORDER } from "./constants";
 import { Search, Watch } from "./icons";
-import type { Decision, Severity } from "./types";
+import {
+	DECISION_LABELS,
+	DECISIONS,
+	SEVERITY_LABELS,
+	SEVERITY_ORDER,
+} from "./utils/constants";
+import type { Decision, Severity } from "./utils/types";
 
 export type FiltersState = {
 	query: string;

package/src/server/client/FindingCard.tsx

@@ -6,20 +6,23 @@
  * poluição visual da triagem; reabrir volta a expandir.
  */
 
-import { useCallback, useEffect, useRef, useState } from "preact/hooks";
-import { api } from "./api";
-import { DECISION_LABELS, DECISIONS, SEVERITY_LABELS } from "./constants";
-import { vscodeFileLink } from "./format";
+import { useCallback, useEffect, useMemo, useRef, useState } from "preact/hooks";
 import {
 	Check,
 	ChevronRight,
 	CodeIcon,
 	ExternalLink,
+	GitHub,
 	Sparkles,
 	Spinner,
 	Watch,
 } from "./icons";
-import type { Finding } from "./types";
+import { MarkdownText } from "./MarkdownText";
+import { api } from "./utils/api";
+import { highlightCode, languageFromFile } from "./utils/code-highlight";
+import { DECISION_LABELS, DECISIONS, SEVERITY_LABELS } from "./utils/constants";
+import { vscodeFileLink } from "./utils/format";
+import type { Finding } from "./utils/types";
 
 /** Debounce do auto-save do comentário (ms). */
 const AUTOSAVE_MS = 700;
@@ -102,6 +105,13 @@ export function FindingCard({
 
 	const location = finding.line ? `${finding.file}:${finding.line}` : finding.file;
 	const href = finding.absFile ? vscodeFileLink(finding.absFile, finding.line) : null;
+	const highlighted = useMemo(
+		() =>
+			finding.evidence
+				? highlightCode(finding.evidence, languageFromFile(finding.file))
+				: null,
+		[finding.evidence, finding.file],
+	);
 	const toggle = () => setOpen((current) => !current);
 
 	return (
@@ -146,17 +156,20 @@ export function FindingCard({
 				{finding.github &&
 					(finding.github.url ? (
 						<a
-							class="sent-tag"
+							class="sent-tag gh"
 							href={finding.github.url}
 							target="_blank"
 							rel="noreferrer"
-							title="Comentário enviado à PR"
+							title={`Comentário enviado ao GitHub (PR #${finding.github.pr}) — abrir`}
 						>
-							<ExternalLink size={12} /> enviado
+							<GitHub size={12} /> enviado ao GitHub
 						</a>
 					) : (
-						<span class="sent-tag" title="Comentário enviado à PR">
-							<ExternalLink size={12} /> enviado
+						<span
+							class="sent-tag gh"
+							title={`Comentário enviado ao GitHub (PR #${finding.github.pr})`}
+						>
+							<GitHub size={12} /> enviado ao GitHub
 						</span>
 					))}
 				<span class="spacer" />
@@ -186,14 +199,36 @@ export function FindingCard({
 					<div class="meta-row">{finding.rule}</div>
 
 					<div class="action-block">
-						<p>
-							<Sparkles size={16} class="action-icon" />
+						<Sparkles size={16} class="action-icon" />
+						<div class="action-text">
 							<span class="action-label">Ação:</span>
-							{finding.action}
-						</p>
+							<MarkdownText text={finding.action} />
+						</div>
 					</div>
 
-					{finding.evidence && <pre class="evidence">{finding.evidence}</pre>}
+					{finding.evidence &&
+						(highlighted ? (
+							<div class="evidence-block">
+								<div class="evidence-head">
+									<span class="code-lang">{highlighted.label}</span>
+								</div>
+								<pre class="evidence code-evidence">
+									{highlighted.tokens.map((token) => (
+										<span
+											class={
+												token.type === "plain"
+													? undefined
+													: `tok-${token.type}`
+											}
+										>
+											{token.text}
+										</span>
+									))}
+								</pre>
+							</div>
+						) : (
+							<pre class="evidence">{finding.evidence}</pre>
+						))}
 
 					<div class="decision-tags-block">
 						<div class="decisions">

package/src/server/client/FindingsList.tsx

@@ -3,10 +3,10 @@
  */
 
 import { useMemo } from "preact/hooks";
-import { SEVERITY_LABELS, SEVERITY_ORDER } from "./constants";
 import { FindingCard } from "./FindingCard";
 import { Alert } from "./icons";
-import type { Finding, Severity } from "./types";
+import { SEVERITY_LABELS, SEVERITY_ORDER } from "./utils/constants";
+import type { Finding, Severity } from "./utils/types";
 
 export function FindingsList({
 	slug,

package/src/server/client/MarkdownText.tsx

@@ -0,0 +1,181 @@
+/**
+ * Render de markdown mínimo para o campo `action` do finding e artefatos.
+ *
+ * Sem HTML cru: tudo vira nós do Preact. Blocos de código reutilizam o
+ * highlight de código; links passam por `safeUrl` e caminhos de arquivo ganham
+ * destaque próprio.
+ */
+
+import { useMemo } from "preact/hooks";
+import { highlightCode, languageFromName } from "./utils/code-highlight";
+import {
+	type InlineToken,
+	isFilePath,
+	type MarkdownBlock,
+	parseInline,
+	parseMarkdown,
+	safeUrl,
+} from "./utils/markdown";
+
+function renderInlineToken(token: InlineToken) {
+	switch (token.type) {
+		case "code":
+			return (
+				<code class={`md-code${isFilePath(token.text) ? " md-path" : ""}`}>
+					{token.text}
+				</code>
+			);
+		case "path":
+			return <code class="md-path">{token.text}</code>;
+		case "strong":
+			return <strong>{token.text}</strong>;
+		case "em":
+			return <em>{token.text}</em>;
+		case "link": {
+			const label = token.text.replace(/^`+|`+$/g, "");
+			const url = safeUrl(token.url);
+			if (url) {
+				return (
+					<a href={url} target="_blank" rel="noreferrer">
+						{label}
+					</a>
+				);
+			}
+			return isFilePath(label) || isFilePath(token.url) ? (
+				<code class="md-path">{label}</code>
+			) : (
+				token.text
+			);
+		}
+		default:
+			return token.text;
+	}
+}
+
+function InlineTokens({ text }: { text: string }) {
+	const tokens = useMemo(() => parseInline(text), [text]);
+	return <>{tokens.map((token) => renderInlineToken(token))}</>;
+}
+
+function CodeBlock({ code, language }: { code: string; language: string | null }) {
+	const highlighted = useMemo(
+		() => highlightCode(code, languageFromName(language)),
+		[code, language],
+	);
+	return (
+		<pre class="md-code-block">
+			{highlighted
+				? highlighted.tokens.map((token) => (
+						<span
+							class={
+								token.type === "plain" ? undefined : `tok-${token.type}`
+							}
+						>
+							{token.text}
+						</span>
+					))
+				: code}
+		</pre>
+	);
+}
+
+/** Renderiza blocos markdown já parseados (seções de artefato, ação etc.). */
+export function MarkdownBlocks({ blocks }: { blocks: MarkdownBlock[] }) {
+	return (
+		<>
+			{blocks.map((block) => {
+				switch (block.type) {
+					case "paragraph":
+						return (
+							<p class="md-p">
+								<InlineTokens text={block.text} />
+							</p>
+						);
+					case "heading": {
+						const level = Math.min(Math.max(block.level, 1), 6);
+						const Tag = `h${level}` as
+							| "h1"
+							| "h2"
+							| "h3"
+							| "h4"
+							| "h5"
+							| "h6";
+						return (
+							<Tag class={`md-h md-h${level}`}>
+								<InlineTokens text={block.text} />
+							</Tag>
+						);
+					}
+					case "list": {
+						const items = block.items.map((item) => (
+							<li>
+								<InlineTokens text={item} />
+							</li>
+						));
+						return block.ordered ? (
+							<ol class="md-list">{items}</ol>
+						) : (
+							<ul class="md-list">{items}</ul>
+						);
+					}
+					case "table":
+						return (
+							<div class="md-table-wrap">
+								<table class="md-table">
+									<thead>
+										<tr>
+											{block.header.map((cell, column) => (
+												<th
+													style={{
+														textAlign: block.align[column],
+													}}
+												>
+													<InlineTokens text={cell} />
+												</th>
+											))}
+										</tr>
+									</thead>
+									<tbody>
+										{block.rows.map((row) => (
+											<tr key={row.join("|")}>
+												{block.header.map((_, column) => (
+													<td
+														style={{
+															textAlign:
+																block.align[column],
+														}}
+													>
+														<InlineTokens
+															text={row[column] ?? ""}
+														/>
+													</td>
+												))}
+											</tr>
+										))}
+									</tbody>
+								</table>
+							</div>
+						);
+					case "code":
+						return <CodeBlock code={block.code} language={block.language} />;
+					case "quote":
+						return (
+							<blockquote class="md-quote">
+								<InlineTokens text={block.text} />
+							</blockquote>
+						);
+					case "hr":
+						return <hr class="md-hr" />;
+					default:
+						return null;
+				}
+			})}
+		</>
+	);
+}
+
+/** Renderiza o markdown do action/artefato preservando blocos e listas. */
+export function MarkdownText({ text }: { text: string }) {
+	const blocks = useMemo(() => parseMarkdown(text), [text]);
+	return <MarkdownBlocks blocks={blocks} />;
+}