@payconductor/houndsman 0.1.4 → 0.2.0

package/src/server/client/FindingCard.tsx

@@ -1,12 +1,31 @@
 /**
- * Cartão de um finding: dados + decisão (Executar/Ignorar), comentário e "feito".
+ * Cartão de um finding: identidade (severidade + local), ação recomendada,
+ * evidência, watchdogs, decisão segmentada e comentário com auto-save.
+ *
+ * Colapso: marcar como feito recolhe o cartão (título tachado) para limpar a
+ * poluição visual da triagem; reabrir volta a expandir.
  */
 
-import { useCallback, useEffect, useState } from "preact/hooks";
+import { useCallback, useEffect, useRef, useState } from "preact/hooks";
 import { api } from "./api";
-import { DECISION_LABELS, DECISIONS, EXEC_LABELS, SEVERITY_EMOJI } from "./constants";
+import { DECISION_LABELS, DECISIONS, SEVERITY_LABELS } from "./constants";
+import { vscodeFileLink } from "./format";
+import {
+	Check,
+	ChevronRight,
+	CodeIcon,
+	ExternalLink,
+	Sparkles,
+	Spinner,
+	Watch,
+} from "./icons";
 import type { Finding } from "./types";
 
+/** Debounce do auto-save do comentário (ms). */
+const AUTOSAVE_MS = 700;
+/** Tempo que o "✓ Salvo" fica visível antes de voltar ao estado neutro (ms). */
+const SAVED_VISIBLE_MS = 1800;
+
 export function FindingCard({
 	slug,
 	finding,
@@ -16,13 +35,33 @@ export function FindingCard({
 	finding: Finding;
 	onUpdated: (finding: Finding) => void;
 }) {
-	const [comment, setComment] = useState(finding.comment ?? "");
+	const isDone = finding.execState === "done";
+	const [open, setOpen] = useState(!isDone);
 	const [busy, setBusy] = useState(false);
+	const [comment, setComment] = useState(finding.comment ?? "");
+	const [saveState, setSaveState] = useState<"idle" | "saving" | "saved">("idle");
+	/** Último valor confirmado pelo servidor — evita sobrescrever o que foi digitado. */
+	const savedRef = useRef(finding.comment ?? "");
+
+	// O cartão acompanha o estado de execução: feito colapsa, reaberto expande.
+	useEffect(() => {
+		setOpen(finding.execState !== "done" && finding.decision !== "ignore");
+	}, [isDone]);
 
+	// Só reidrata o comentário quando o servidor tem um valor novo e nada local pendente.
 	useEffect(() => {
-		setComment(finding.comment ?? "");
+		const incoming = finding.comment ?? "";
+		if (incoming === savedRef.current) return;
+		savedRef.current = incoming;
+		setComment(incoming);
 	}, [finding.comment]);
 
+	useEffect(() => {
+		if (saveState !== "saved") return;
+		const id = setTimeout(() => setSaveState("idle"), SAVED_VISIBLE_MS);
+		return () => clearTimeout(id);
+	}, [saveState]);
+
 	const patch = useCallback(
 		async (body: Record<string, unknown>) => {
 			setBusy(true);
@@ -36,6 +75,7 @@ export function FindingCard({
 					},
 				);
 				onUpdated(updated);
+				return updated;
 			} finally {
 				setBusy(false);
 			}
@@ -43,80 +83,181 @@ export function FindingCard({
 		[finding.id, onUpdated, slug],
 	);
 
+	// Auto-save do comentário (debounce): nada a salvar = nada a fazer.
+	useEffect(() => {
+		const value = comment.trim();
+		if (value === savedRef.current.trim()) return;
+		setSaveState("saving");
+		const id = setTimeout(async () => {
+			try {
+				await patch({ comment: value });
+				savedRef.current = value;
+				setSaveState("saved");
+			} catch {
+				setSaveState("idle");
+			}
+		}, AUTOSAVE_MS);
+		return () => clearTimeout(id);
+	}, [comment, patch]);
+
 	const location = finding.line ? `${finding.file}:${finding.line}` : finding.file;
-	const count = finding.count > 1 ? `×${finding.count}` : "";
-	const isDone = finding.execState === "done";
+	const href = finding.absFile ? vscodeFileLink(finding.absFile, finding.line) : null;
+	const toggle = () => setOpen((current) => !current);
 
 	return (
 		<article
-			class={`card sev-${finding.severity}${finding.present ? "" : " absent"}`}
+			class={`card sev-${finding.severity}${finding.present ? "" : " absent"}${
+				isDone ? " done" : ""
+			}`}
 		>
-			<header class="card-head">
-				<span class="sev">
-					{SEVERITY_EMOJI[finding.severity]} {finding.severity}
-				</span>
-				<code class="loc">{location}</code>
-				{count && <span class="count">{count}</span>}
+			<div class="card-head">
+				<button
+					type="button"
+					class={`chev${open ? " open" : ""}`}
+					aria-expanded={open}
+					title={open ? "Recolher finding" : "Expandir finding"}
+					onClick={toggle}
+				>
+					<ChevronRight size={16} />
+				</button>
+				<span class="sev-badge">{SEVERITY_LABELS[finding.severity]}</span>
+				{href ? (
+					<a class="loc" href={href} title={`Abrir ${location} no VS Code`}>
+						<CodeIcon size={13} />
+						{location}
+						<ExternalLink size={12} class="ext" />
+					</a>
+				) : (
+					<code class="loc static" title={location}>
+						<CodeIcon size={13} />
+						{location}
+					</code>
+				)}
+				{finding.count > 1 && (
+					<span class="count" title="ocorrências idênticas colapsadas">
+						×{finding.count}
+					</span>
+				)}
+				{!finding.present && (
+					<span class="tag" title="Não aparece no último relatório consolidado">
+						ausente
+					</span>
+				)}
+				{finding.github &&
+					(finding.github.url ? (
+						<a
+							class="sent-tag"
+							href={finding.github.url}
+							target="_blank"
+							rel="noreferrer"
+							title="Comentário enviado à PR"
+						>
+							<ExternalLink size={12} /> enviado
+						</a>
+					) : (
+						<span class="sent-tag" title="Comentário enviado à PR">
+							<ExternalLink size={12} /> enviado
+						</span>
+					))}
 				<span class="spacer" />
-				<code class="id" title="id do finding">
-					{finding.id}
-				</code>
-			</header>
-			<h3 class="rule">{finding.rule}</h3>
-			<p class="msg">{finding.message}</p>
-			<p class="action">
-				<strong>Ação:</strong> {finding.action}
-			</p>
-			{finding.evidence && <pre class="evidence">{finding.evidence}</pre>}
-			<footer class="card-foot">
-				<span class="watchdogs">{finding.watchdogIds.join(", ") || "—"}</span>
-				<span class="exec-state">{EXEC_LABELS[finding.execState]}</span>
-			</footer>
-			<div class="decisions">
-				{DECISIONS.map((decision) => (
-					<button
-						type="button"
-						title={`Marcar como ${DECISION_LABELS[decision]}`}
-						class={`btn dec-${decision}${finding.decision === decision ? " active" : ""}`}
-						disabled={busy}
-						onClick={() =>
-							patch({ decision, comment: comment.trim() || undefined })
-						}
-					>
-						{DECISION_LABELS[decision]}
-					</button>
-				))}
+				<button
+					type="button"
+					class={`done-btn${isDone ? " is-done" : ""}`}
+					disabled={busy}
+					title={isDone ? "Reabrir este finding" : "Marcar como feito"}
+					onClick={() => void patch({ execState: isDone ? "pending" : "done" })}
+				>
+					{isDone ? (
+						<>
+							<Check size={14} /> Feito
+						</>
+					) : (
+						"Marcar como feito"
+					)}
+				</button>
 			</div>
-			<div class="comment-row">
-				<textarea
-					title="Comentário ou instrução adicional para o auto-fix"
-					placeholder="Comentário / instrução para o auto-fix (opcional)"
-					value={comment}
-					onInput={(event) =>
-						setComment((event.target as HTMLTextAreaElement).value)
-					}
-				/>
-				<div class="comment-actions">
-					<button
-						type="button"
-						title="Salvar o comentário neste finding"
-						class="btn"
-						disabled={busy}
-						onClick={() => patch({ comment: comment.trim() })}
-					>
-						Salvar comentário
-					</button>
-					<button
-						type="button"
-						title="Alternar o estado de execução deste finding (feito/pendente)"
-						class={`btn done${isDone ? " active" : ""}`}
-						disabled={busy}
-						onClick={() => patch({ execState: isDone ? "pending" : "done" })}
-					>
-						{isDone ? "✓ Feito" : "Marcar feito"}
-					</button>
+
+			<h3 class="card-title">
+				{open ? finding.message : truncateText(finding.message, 225)}
+			</h3>
+
+			{open && (
+				<div class="card-body">
+					<div class="meta-row">{finding.rule}</div>
+
+					<div class="action-block">
+						<p>
+							<Sparkles size={16} class="action-icon" />
+							<span class="action-label">Ação:</span>
+							{finding.action}
+						</p>
+					</div>
+
+					{finding.evidence && <pre class="evidence">{finding.evidence}</pre>}
+
+					<div class="decision-tags-block">
+						<div class="decisions">
+							{DECISIONS.map((decision) => (
+								<button
+									type="button"
+									title={`Marcar como ${DECISION_LABELS[decision]}`}
+									class={`dec-btn dec-${decision}${
+										finding.decision === decision ? " active" : ""
+									}`}
+									disabled={busy}
+									onClick={() => void patch({ decision })}
+								>
+									{DECISION_LABELS[decision]}
+								</button>
+							))}
+						</div>
+
+						<span class="meta">
+							<span class="meta-k">exec</span>
+							<code>{finding.execState}</code>
+						</span>
+
+						<div class="tags">
+							<span class="tags-label">
+								<Watch size={13} /> Watchdogs
+							</span>
+							{(finding.watchdogIds.length > 0
+								? finding.watchdogIds
+								: ["—"]
+							).map((id) => (
+								<span class="tag" key={id}>
+									{id}
+								</span>
+							))}
+						</div>
+					</div>
+
+					<div class="comment">
+						<textarea
+							title="Comentário ou instrução adicional para o auto-fix"
+							placeholder="Comentário / instrução para o auto-fix — salvo automaticamente"
+							value={comment}
+							onInput={(event) =>
+								setComment((event.target as HTMLTextAreaElement).value)
+							}
+						/>
+						{saveState === "saving" && (
+							<span class="comment-status">
+								<Spinner size={12} class="icon spin" /> Salvando…
+							</span>
+						)}
+						{saveState === "saved" && (
+							<span class="comment-status saved">
+								<Check size={12} /> Salvo
+							</span>
+						)}
+					</div>
 				</div>
-			</div>
+			)}
 		</article>
 	);
 }
+
+function truncateText(text: string, maxLength: number): string {
+	return text.length > maxLength ? `${text.slice(0, maxLength)}…` : text;
+}

package/src/server/client/FindingsList.tsx

@@ -1,10 +1,11 @@
 /**
- * Lista de findings agrupada por severidade (❌ > ⚠️ > 💡 > 🔎).
+ * Lista de findings agrupada por severidade (blocking > attention > suggestion > nit).
  */
 
 import { useMemo } from "preact/hooks";
-import { SEVERITY_EMOJI, SEVERITY_ORDER } from "./constants";
+import { SEVERITY_LABELS, SEVERITY_ORDER } from "./constants";
 import { FindingCard } from "./FindingCard";
+import { Alert } from "./icons";
 import type { Finding, Severity } from "./types";
 
 export function FindingsList({
@@ -33,10 +34,11 @@ export function FindingsList({
 				const items = grouped.get(severity) ?? [];
 				if (items.length === 0) return null;
 				return (
-					<section class="sev-group">
-						<h2>
-							{SEVERITY_EMOJI[severity]} {severity}{" "}
-							<span class="n">({items.length})</span>
+					<section class={`sev-group sev-${severity}`} key={severity}>
+						<h2 class="sev-head">
+							<Alert size={14} />
+							{SEVERITY_LABELS[severity]}
+							<span class="n">{items.length}</span>
 						</h2>
 						{items.map((finding) => (
 							<FindingCard

package/src/server/client/RunList.tsx

@@ -1,8 +1,11 @@
 /**
- * Sidebar: logo do houndsman + lista de runs (branch e nº de findings).
+ * Sidebar: logo do houndsman + lista de execuções (mais recentes primeiro),
+ * com data/hora, relação de findings presentes e badge de correção pronta.
  */
 
 import { describeRunStatus } from "./constants";
+import { formatRunTime } from "./format";
+import { BranchIcon, Clock, Sparkles } from "./icons";
 import type { RunSummary } from "./types";
 
 export function RunList({
@@ -17,16 +20,18 @@ export function RunList({
 	return (
 		<aside class="sidebar">
 			<div class="brand">
-				<img class="logo" src="/assets/logo.png" alt="houndsman" />
+				<img class="logo" src="/assets/logo.png" alt="" />
 				<div>
 					<h1>Houndsman</h1>
 					<p class="sub">Revisões e triagem</p>
 				</div>
 			</div>
+			<p class="section-label">Execuções</p>
 			<nav class="runs">
 				{runs.length === 0 && <p class="empty">Nenhuma run encontrada.</p>}
 				{runs.map((run) => {
 					const status = describeRunStatus(run);
+					const fixReady = status?.kind === "fix_done";
 					return (
 						<button
 							type="button"
@@ -34,14 +39,32 @@ export function RunList({
 							class={`run${run.slug === slug ? " active" : ""}`}
 							onClick={() => onSelect(run.slug)}
 						>
-							<span class="run-branch">{run.branch}</span>
+							<span class="run-top">
+								<BranchIcon size={14} class="run-icon" />
+								<span class="run-branch">{run.branch}</span>
+							</span>
 							<span class="run-meta">
-								{run.summary.present}/{run.summary.total} presentes
+								<span class="run-when">
+									<Clock size={12} />
+									{formatRunTime(run.updatedAt) || "sem data"}
+								</span>
+								<span
+									class="run-count"
+									title={`${run.summary.present} de ${run.summary.total} findings presentes`}
+								>
+									{run.summary.present}/{run.summary.total}
+								</span>
 							</span>
-							{status && (
-								<span class={`run-status status-${status.kind}`}>
-									{status.label}
+							{fixReady ? (
+								<span class="run-badge">
+									<Sparkles size={12} /> Correção pronta
 								</span>
+							) : (
+								status && (
+									<span class={`run-status status-${status.kind}`}>
+										{status.label}
+									</span>
+								)
 							)}
 						</button>
 					);