marcopanandClaude Fable 5
4cd1cbc493
Colors (GSD palette) untouched. New visual vocabulary across the whole GUI: - warm-tinted layered shadow tokens (--shadow-xs/sm/md) replacing flat rings; cards/dialogs framed with hairline border + real elevation - strict radii scale: xl cards / lg inputs / md controls / 2xl dialogs; buttons move from pills to rounded-md - third type register: --font-mono + tabular-nums on SQL, timers, dates, ids; standardized .thot-label micro-label tier - prose: framed tables with uppercase headers, elevated code blocks - SqlViewer badges moved from hardcoded Tailwind greens/reds to success/ destructive token tints; ResultsPanel inline styles replaced with classes - artifact gate: first option rendered as filled primary action Verified offline via Playwright against a mock backend replaying a real psd session (no VPN needed). tsc clean, 115/115 vitest. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
52 lines
1.5 KiB
TypeScript
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="text-destructive text-xs">{error}</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>
|
|
);
|
|
}
|