Files
ThothII/frontend/src/viewers/MarkdownView.tsx
T
marcopanandClaude Opus 4.6 6ee5bda7f0 feat: gate decision-type validation, force-advance, and frontend fixes
Gate (tht-gate.js):
- Pre-validate decision types against workflow.yaml before showing reviewer widget
- Reject decisions emitted by later phases (min-phase check)
- Copy top-level `kind` into artifact when model forgets it (prevents loop)
- Force-advance on reviewer_decide/schema_linking when advance:true — skip
  redundant reviewer_confirm gate

Backend:
- Emit agent_end on clean Pi exit (code 0 + bridge idle) instead of marking failed

Frontend:
- Strip <think> tags from transcript and activity panel
- Fix mermaid render with offscreen container + cleanup
- Graceful mermaid error: show source code instead of red error, fall back to table

Workflow:
- F2 now emits table_promoted and table_excluded (early schema linking decisions)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-07-19 14:14:44 +02:00

52 lines
1.5 KiB
TypeScript

import { useEffect, useState } from "react";
import ReactMarkdown from "react-markdown";
import remarkGfm from "remark-gfm";
import type { Components } from "react-markdown";
import { renderMermaid } from "./mermaid";
function MermaidBlock({ code }: { code: string }) {
const [svg, setSvg] = useState<string>("");
const [error, setError] = useState<string>("");
useEffect(() => {
renderMermaid(code)
.then(setSvg)
.catch((e: unknown) =>
setError(e instanceof Error ? e.message : String(e))
);
}, [code]);
if (error) return <pre className="overflow-auto rounded-lg bg-muted p-3 text-xs opacity-60">{code}</pre>;
if (!svg) return <pre className="text-xs opacity-50">{code}</pre>;
// eslint-disable-next-line react/no-danger
return <div dangerouslySetInnerHTML={{ __html: svg }} />;
}
const components: Components = {
code({ className, children }) {
const lang = /language-(\w+)/.exec(className ?? "")?.[1];
const code = String(children).replace(/\n$/, "");
if (lang === "mermaid") {
return <MermaidBlock code={code} />;
}
return (
<code className={className}>
{children}
</code>
);
},
pre({ children }) {
return <pre className="overflow-auto rounded-lg bg-muted p-3 text-sm shadow-xs">{children}</pre>;
},
};
export function MarkdownView({ source }: { source: string }) {
return (
<div className="markdown-view thot-prose">
<ReactMarkdown remarkPlugins={[remarkGfm]} components={components}>
{source}
</ReactMarkdown>
</div>
);
}