fix: stabilize analysis chat rendering and traceability

- Preserve leading spaces in Python SSE stream chunks
- Improve AI markdown rendering, spacing, wrapping, and malformed bold handling
- Persist cleaned assistant answers to Golang message history
- Rehydrate traceability after refreshing saved conversations
- Keep chat input fixed while only the message list scrolls
- Silence empty report-version lookup errors before report generation
- Improve dark-mode contrast for emerald surfaces

src/app/components/analysis/AnalysisShell.tsx

@@ -41,6 +41,13 @@ function toUiMessage(message: AnalysisMessage): UiMessage {
 
 const wait = (ms: number) => new Promise((resolve) => window.setTimeout(resolve, ms));
 
+function normalizeAssistantContent(content: string) {
+  return content
+    .replace(/\*\*\s+([^*\n]*?\S)\s*\*\*/g, "**$1**")
+    .replace(/\*\*([^*\n]*?\S)\s+\*\*/g, "**$1**")
+    .trim();
+}
+
 export function AnalysisShell() {
   const navigate = useNavigate();
   const session = useMemo(() => getCurrentSession(), []);
@@ -144,6 +151,23 @@ export function AnalysisShell() {
       }
     }
   };
+  useEffect(() => {
+    if (!activeAnalysis?.id || loadingMessages) return;
+
+    messages
+      .filter(
+        (message) =>
+          message.role === "ai" &&
+          message.status === "complete" &&
+          Boolean(message.messageId) &&
+          !message.traceability &&
+          !message.traceabilityLoading &&
+          !message.traceabilityError
+      )
+      .forEach((message) => {
+        fetchTraceability(activeAnalysis.id, message.messageId, message.id);
+      });
+  }, [activeAnalysis?.id, loadingMessages, messages]);
 
   const runAgentStream = async (kind: "chat" | "help", prompt?: string) => {
     if (!session?.user_id || !activeAnalysis || streamState !== "idle") return;
@@ -195,13 +219,18 @@ export function AnalysisShell() {
 
       if (streamError) return;
 
+      const completedContent = normalizeAssistantContent(finalContent);
       let traceTargetId = aiId;
       setMessages((prev) =>
-        prev.map((msg) => (msg.id === aiId ? { ...msg, status: "complete", messageId: doneMessageId, traceabilityLoading: Boolean(doneMessageId) } : msg))
+        prev.map((msg) =>
+          msg.id === aiId
+            ? { ...msg, content: completedContent || msg.content, status: "complete", messageId: doneMessageId, traceabilityLoading: Boolean(doneMessageId) }
+            : msg
+        )
       );
 
-      if (finalContent.trim()) {
-        const saved = await createAnalysisMessage(activeAnalysis.id, { role: "ai", content: finalContent.trim(), message_id: doneMessageId });
+      if (completedContent) {
+        const saved = await createAnalysisMessage(activeAnalysis.id, { role: "ai", content: completedContent, message_id: doneMessageId });
         traceTargetId = saved.id;
         setMessages((prev) =>
           prev.map((msg) =>
@@ -291,10 +320,10 @@ export function AnalysisShell() {
     activeMenu === "analysis-agent" ? "Analysis Agent" : activeMenu === "knowledge" ? "Knowledge" : "Home";
 
   const renderAnalysisAgent = () => (
-    <div className={cx("grid min-h-screen grid-cols-1", reportCollapsed ? "lg:grid-cols-[minmax(0,1fr)_3.5rem]" : "lg:grid-cols-[minmax(0,1fr)_23rem]")}>
-      <main className="flex min-h-[70vh] min-w-0 flex-col bg-slate-50">
+    <div className={cx("grid h-full min-h-0 grid-cols-1", reportCollapsed ? "lg:grid-cols-[minmax(0,1fr)_3.5rem]" : "lg:grid-cols-[minmax(0,1fr)_23rem]")}>
+      <main className="flex h-full min-h-0 min-w-0 flex-col bg-slate-50">
         <AnalysisHeader analysis={activeAnalysis} staleSources={staleSources} onUpdateDataBind={handleUpdateDataBind} />
-        <div className="min-h-0 flex-1 overflow-y-auto">
+        <div className="min-h-0 flex-1 overflow-y-auto overflow-x-hidden overscroll-contain">
           {loadingMessages ? (
             <div className="flex h-full items-center justify-center text-sm text-slate-500">Loading messages</div>
           ) : (
@@ -408,7 +437,7 @@ export function AnalysisShell() {
         </div>
       )}
 
-      <div className={cx("lg:grid lg:min-h-screen", desktopNavCollapsed ? "lg:grid-cols-[4.5rem_minmax(0,1fr)]" : "lg:grid-cols-[16rem_minmax(0,1fr)]")}>
+      <div className={cx("lg:grid", activeMenu === "analysis-agent" ? "h-[calc(100vh-3.5rem)] min-h-0 overflow-hidden lg:h-screen" : "min-h-screen", desktopNavCollapsed ? "lg:grid-cols-[4.5rem_minmax(0,1fr)]" : "lg:grid-cols-[16rem_minmax(0,1fr)]")}>
         <div className="hidden lg:block">
           <AppNavigation
             active={activeMenu}
@@ -426,7 +455,7 @@ export function AnalysisShell() {
           />
         </div>
 
-        <div className="min-w-0">
+        <div className={cx("min-w-0", activeMenu === "analysis-agent" && "h-full min-h-0 overflow-hidden")}>
           {activeMenu === "home" && <HomeDashboard hasAnalyses={analyses.length > 0} onNavigate={changeMenu} />}
           {activeMenu === "knowledge" && <KnowledgeManagement open onClose={() => changeMenu("home")} variant="page" />}
           {activeMenu === "analysis-agent" && renderAnalysisAgent()}

src/app/components/analysis/ChatInput.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState } from "react";
 import { Loader2, Send } from "lucide-react";
 import { HelpSkillButton } from "./HelpSkillButton";
 
@@ -21,8 +21,8 @@ export function ChatInput({ disabled, streaming, onSend, onHelp }: ChatInputProp
   };
 
   return (
-    <form onSubmit={submit} className="border-t border-slate-200 bg-white p-4">
-      <div className="mx-auto flex max-w-4xl flex-col gap-2 sm:flex-row sm:items-end">
+    <form onSubmit={submit} className="flex-shrink-0 border-t border-slate-200 bg-white p-4">
+      <div className="mx-auto flex max-w-5xl flex-col gap-2 sm:flex-row sm:items-end">
         <textarea
           aria-label="Chat message"
           value={message}
@@ -36,7 +36,7 @@ export function ChatInput({ disabled, streaming, onSend, onHelp }: ChatInputProp
           disabled={disabled || streaming}
           rows={2}
           placeholder="Ask the agent about this analysis"
-          className="min-h-10 flex-1 resize-none rounded-md border border-slate-200 bg-white px-3 py-2 text-sm leading-6 outline-none transition placeholder:text-slate-400 focus:border-emerald-500 focus:ring-2 focus:ring-emerald-100 disabled:bg-slate-50"
+          className="min-h-10 min-w-0 flex-1 resize-none rounded-md border border-slate-200 bg-white px-3 py-2 text-sm leading-6 text-slate-900 outline-none transition placeholder:text-slate-400 focus:border-emerald-500 focus:ring-2 focus:ring-emerald-100 disabled:bg-slate-50"
         />
         <div className="flex gap-2">
           <HelpSkillButton disabled={disabled || streaming} onClick={onHelp} />

src/app/components/analysis/MarkdownContent.tsx

@@ -1,13 +1,88 @@
-import ReactMarkdown from "react-markdown";
+import ReactMarkdown from "react-markdown";
+import type { Components } from "react-markdown";
 import remarkGfm from "remark-gfm";
 import remarkMath from "remark-math";
 import rehypeKatex from "rehype-katex";
 
+function repairMarkdownMarkers(line: string) {
+  return line
+    .replace(/\*\*\s+([^*\n]*?\S)\s*\*\*/g, "**$1**")
+    .replace(/\*\*([^*\n]*?\S)\s+\*\*/g, "**$1**")
+    .replace(/([A-Za-z0-9])(?=\*\*)/g, "$1 ")
+    .replace(/(\*\*[^*]+\*\*)(?=[A-Za-z0-9])/g, "$1 ");
+}
+
+function normalizeReadableMarkdown(content: string) {
+  const lines = content.replace(/\r\n/g, "\n").split("\n");
+  let inCodeBlock = false;
+
+  const normalizedLines = lines.map((line) => {
+    if (line.trimStart().startsWith("```")) {
+      inCodeBlock = !inCodeBlock;
+      return line;
+    }
+
+    if (inCodeBlock) return line;
+
+    return repairMarkdownMarkers(line)
+      .replace(/([.!?])\s*-\s*(?=[A-Z0-9*])/g, "$1\n\n- ")
+      .replace(/(^|\n)-(?=\*\*|[A-Z0-9])/g, "$1- ")
+      .replace(/([,;:])(?=\S)/g, "$1 ")
+      .replace(/([.!?])(?=[A-Z0-9])/g, "$1 ")
+      .replace(/[ \t]{2,}/g, " ");
+  });
+
+  return normalizedLines
+    .map((line, index) => {
+      const trimmed = line.trim();
+      if (!trimmed || /^[-*+]\s/.test(trimmed) || /^\d+\.\s/.test(trimmed)) return line;
+
+      const previous = normalizedLines.slice(0, index).reverse().find((item) => item.trim());
+      const next = normalizedLines.slice(index + 1).find((item) => item.trim());
+      const isStandaloneBold = /^\*\*.+\*\*(?:\s+.+)?$/.test(trimmed);
+      const belongsToBoldList = previous?.trim().endsWith(":") || previous?.trim().startsWith("**") || next?.trim().startsWith("**");
+
+      return isStandaloneBold && belongsToBoldList ? `- ${trimmed}` : line;
+    })
+    .join("\n")
+    .replace(/\n{3,}/g, "\n\n")
+    .trim();
+}
+
+const markdownComponents: Components = {
+  p: ({ children }) => <p className="my-3 leading-7 text-slate-800">{children}</p>,
+  ul: ({ children }) => <ul className="my-3 list-disc space-y-2 pl-5">{children}</ul>,
+  ol: ({ children }) => <ol className="my-3 list-decimal space-y-2 pl-5">{children}</ol>,
+  li: ({ children }) => <li className="pl-1 leading-7 text-slate-800">{children}</li>,
+  strong: ({ children }) => <strong className="font-semibold text-slate-950">{children}</strong>,
+  h1: ({ children }) => <h1 className="mb-3 mt-5 text-xl font-semibold leading-7 text-slate-950">{children}</h1>,
+  h2: ({ children }) => <h2 className="mb-3 mt-5 text-lg font-semibold leading-7 text-slate-950">{children}</h2>,
+  h3: ({ children }) => <h3 className="mb-2 mt-4 text-base font-semibold leading-6 text-slate-950">{children}</h3>,
+  a: ({ children, href }) => (
+    <a href={href} className="font-medium text-emerald-700 underline decoration-emerald-200 underline-offset-4" target="_blank" rel="noreferrer">
+      {children}
+    </a>
+  ),
+  code: ({ children, className }) => {
+    const isBlock = className?.includes("language-");
+    if (isBlock) {
+      return <code className={className}>{children}</code>;
+    }
+    return <code className="rounded bg-slate-100 px-1.5 py-0.5 text-[0.85em] text-slate-900">{children}</code>;
+  },
+  pre: ({ children }) => <pre className="my-3 max-w-full overflow-x-auto rounded-lg bg-slate-950 p-3 text-xs leading-6 text-slate-50">{children}</pre>,
+  table: ({ children }) => <table className="my-4 w-full table-auto border-collapse text-sm">{children}</table>,
+  th: ({ children }) => <th className="border border-slate-200 bg-slate-50 px-3 py-2 text-left font-semibold text-slate-900">{children}</th>,
+  td: ({ children }) => <td className="border border-slate-200 px-3 py-2 align-top text-slate-700">{children}</td>,
+};
+
 export function MarkdownContent({ content }: { content: string }) {
+  const readableContent = normalizeReadableMarkdown(content);
+
   return (
-    <div className="prose prose-sm max-w-none prose-slate prose-headings:mb-2 prose-headings:mt-4 prose-p:my-2 prose-ul:my-2 prose-ol:my-2 prose-li:my-0 prose-code:rounded prose-code:bg-slate-100 prose-code:px-1 prose-code:py-0.5 prose-pre:bg-slate-950 prose-pre:text-slate-50">
-      <ReactMarkdown remarkPlugins={[remarkGfm, remarkMath]} rehypePlugins={[rehypeKatex]}>
-        {content}
+    <div className="agent-markdown max-w-none break-words text-sm leading-7 text-slate-800 [overflow-wrap:anywhere]">
+      <ReactMarkdown remarkPlugins={[remarkGfm, remarkMath]} rehypePlugins={[rehypeKatex]} components={markdownComponents}>
+        {readableContent}
       </ReactMarkdown>
     </div>
   );

src/app/components/analysis/MessageList.tsx

@@ -15,22 +15,22 @@ export function MessageList({ messages }: { messages: UiMessage[] }) {
   }
 
   return (
-    <div className="mx-auto flex w-full max-w-4xl flex-col gap-4 px-4 py-6">
+    <div className="mx-auto flex w-full max-w-5xl flex-col gap-5 px-4 py-6">
       {messages.map((message) => {
         const isUser = message.role === "user";
         return (
-          <article key={message.id} className={cx("flex gap-3", isUser && "justify-end")}>
+          <article key={message.id} className={cx("flex min-w-0 gap-3", isUser && "justify-end")}>
             {!isUser && (
               <div className="mt-1 flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-md bg-slate-900 text-white">
                 <Bot className="h-4 w-4" />
               </div>
             )}
-            <div className={cx("max-w-[84%] rounded-lg border px-4 py-3", isUser ? "border-emerald-100 bg-emerald-50" : "border-slate-200 bg-white")}>
+            <div className={cx("min-w-0 rounded-lg border px-4 py-3 shadow-sm", isUser ? "max-w-[min(36rem,84%)] border-emerald-100 bg-emerald-50" : "w-full max-w-3xl border-slate-200 bg-white")}>
               <div className="mb-1 flex items-center justify-between gap-3 text-[11px] text-slate-400">
                 <span className="font-medium uppercase tracking-wide">{isUser ? "You" : "AI Agent"}</span>
                 <span>{formatDateTime(message.created_at)}</span>
               </div>
-              {isUser ? <p className="whitespace-pre-wrap text-sm leading-6 text-slate-800">{message.content}</p> : <MarkdownContent content={message.content || "..."} />}
+              {isUser ? <p className="whitespace-pre-wrap break-words text-sm leading-6 text-slate-800 [overflow-wrap:anywhere]">{message.content}</p> : <MarkdownContent content={message.content || "..."} />}
               {message.status === "streaming" && message.statusText && <p className="mt-2 text-xs text-slate-500">{message.statusText}</p>}
               {message.status === "error" && <p className="mt-2 text-xs text-red-600">{message.statusText ?? "Stream failed"}</p>}
               {!isUser && (

src/app/components/analysis/ReportSidebar.tsx

@@ -30,7 +30,7 @@ export function ReportSidebar({ analysis, userId, onCollapse }: ReportSidebarPro
   const [error, setError] = useState<string | null>(null);
   const [precondition, setPrecondition] = useState<string | null>(null);
 
-  const loadVersions = async (analysisId: string) => {
+  const loadVersions = async (analysisId: string, options: { silent?: boolean } = {}) => {
     setLoadingVersions(true);
     setError(null);
     try {
@@ -39,9 +39,12 @@ export function ReportSidebar({ analysis, userId, onCollapse }: ReportSidebarPro
       const latest = [...list].sort((a, b) => b.version - a.version)[0];
       setSelectedVersion(latest?.version);
     } catch (err) {
-      setError(err instanceof Error ? err.message : "Failed to load report versions");
       setVersions([]);
       setSelectedVersion(undefined);
+      const isMissingReportCollection = err instanceof AgenticApiError && err.status === 404;
+      if (!options.silent && !isMissingReportCollection) {
+        setError(err instanceof Error ? err.message : "Failed to load report versions");
+      }
     } finally {
       setLoadingVersions(false);
     }
@@ -50,8 +53,11 @@ export function ReportSidebar({ analysis, userId, onCollapse }: ReportSidebarPro
   useEffect(() => {
     setDetail(null);
     setPrecondition(null);
-    if (analysis?.id) loadVersions(analysis.id);
-    else setVersions([]);
+    if (analysis?.id) loadVersions(analysis.id, { silent: true });
+    else {
+      setVersions([]);
+      setSelectedVersion(undefined);
+    }
   }, [analysis?.id]);
 
   useEffect(() => {
@@ -78,7 +84,7 @@ export function ReportSidebar({ analysis, userId, onCollapse }: ReportSidebarPro
     try {
       const report = await generateReport(analysis.id, userId);
       setDetail(report);
-      await loadVersions(analysis.id);
+      await loadVersions(analysis.id, { silent: true });
       setSelectedVersion(report.version);
     } catch (err) {
       if (err instanceof AgenticApiError && err.status === 409) {

src/services/agenticApi.ts

@@ -158,7 +158,10 @@ async function readEventStream(res: Response, onEvent: (event: AgentStreamEvent)
 
     for (const line of lines) {
       if (line.startsWith("event:")) eventName = line.slice(6).trim();
-      if (line.startsWith("data:")) dataLines.push(line.slice(5).trimStart());
+      if (line.startsWith("data:")) {
+        const value = line.startsWith("data: ") ? line.slice(6) : line.slice(5);
+        dataLines.push(value);
+      }
     }
 
     if (dataLines.length === 0) return;

src/styles/theme.css

@@ -263,6 +263,38 @@
     background-color: #1e293b !important;
   }
 
+  .dark .workspace-shell .bg-emerald-50,
+  .dark .workspace-shell .bg-emerald-50\/60,
+  .dark .knowledge-surface .bg-emerald-50,
+  .dark .knowledge-surface .bg-emerald-50\/60,
+  .dark .workspace-shell .hover\:bg-emerald-50:hover,
+  .dark .knowledge-surface .hover\:bg-emerald-50:hover {
+    background-color: #064e3b !important;
+  }
+
+  .dark .workspace-shell .bg-emerald-100,
+  .dark .workspace-shell .hover\:bg-emerald-100:hover,
+  .dark .knowledge-surface .bg-emerald-100,
+  .dark .knowledge-surface .hover\:bg-emerald-100:hover {
+    background-color: #065f46 !important;
+  }
+
+  .dark .workspace-shell .border-emerald-100,
+  .dark .workspace-shell .border-emerald-200,
+  .dark .knowledge-surface .border-emerald-100,
+  .dark .knowledge-surface .border-emerald-200 {
+    border-color: #047857 !important;
+  }
+
+  .dark .workspace-shell .text-emerald-500,
+  .dark .workspace-shell .text-emerald-600,
+  .dark .workspace-shell .text-emerald-700,
+  .dark .knowledge-surface .text-emerald-500,
+  .dark .knowledge-surface .text-emerald-600,
+  .dark .knowledge-surface .text-emerald-700 {
+    color: #6ee7b7 !important;
+  }
+
   .dark .workspace-shell input,
   .dark .workspace-shell textarea,
   .dark .workspace-shell select,