@seqyuan/annodex 0.1.10 → 0.1.12

package/components/ProjectsConfig.tsx

@@ -0,0 +1,288 @@
+"use client";
+
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import type { ProjectInfo } from "@/lib/types";
+import { ProjectFolderPicker } from "./ProjectFolderPicker";
+
+interface ProjectsConfigProps {
+  activeCwd: string | null;
+  onSelectProject?: (cwd: string) => void;
+  onProjectsChanged?: () => void;
+}
+
+function formatRelativeTime(dateStr: string | null): string {
+  if (!dateStr) return "Never";
+  const date = new Date(dateStr);
+  const now = new Date();
+  const diff = now.getTime() - date.getTime();
+  const mins = Math.floor(diff / 60000);
+  const hours = Math.floor(diff / 3600000);
+  const days = Math.floor(diff / 86400000);
+  if (mins < 1) return "just now";
+  if (mins < 60) return `${mins}m ago`;
+  if (hours < 24) return `${hours}h ago`;
+  if (days < 7) return `${days}d ago`;
+  return date.toLocaleDateString();
+}
+
+function shortenPath(cwd: string): string {
+  const parts = cwd.split(/[\\/]/).filter(Boolean);
+  if (parts.length <= 3) return cwd;
+  return `.../${parts.slice(-3).join("/")}`;
+}
+
+function projectLastAccessed(project: ProjectInfo): string | null {
+  return project.lastAccessed ?? project.created ?? null;
+}
+
+export function ProjectsConfig({ activeCwd, onSelectProject, onProjectsChanged }: ProjectsConfigProps) {
+  const [projects, setProjects] = useState<ProjectInfo[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [pathValue, setPathValue] = useState("");
+  const [folderPickerOpen, setFolderPickerOpen] = useState(false);
+  const [busy, setBusy] = useState<string | null>(null);
+  const [editingCwd, setEditingCwd] = useState<string | null>(null);
+  const [renameValue, setRenameValue] = useState("");
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const loadProjects = useCallback(async () => {
+    try {
+      setLoading(true);
+      const res = await fetch("/api/projects?sessionStats=1");
+      const data = await res.json() as { projects?: ProjectInfo[]; error?: string };
+      if (!res.ok || data.error) throw new Error(data.error ?? `HTTP ${res.status}`);
+      setProjects(data.projects ?? []);
+      setError(null);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    void loadProjects();
+  }, [loadProjects]);
+
+  const totals = useMemo(() => ({
+    projects: projects.length,
+    chats: projects.reduce((sum, project) => sum + project.chatCount, 0),
+  }), [projects]);
+
+  const addProject = useCallback(async () => {
+    const cwd = pathValue.trim();
+    if (!cwd) return;
+    setBusy("add");
+    setError(null);
+    try {
+      const res = await fetch("/api/projects", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ cwd }),
+      });
+      const data = await res.json() as { error?: string };
+      if (!res.ok || data.error) throw new Error(data.error ?? `HTTP ${res.status}`);
+      setPathValue("");
+      onProjectsChanged?.();
+      onSelectProject?.(cwd);
+      void loadProjects();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setBusy(null);
+    }
+  }, [loadProjects, onProjectsChanged, onSelectProject, pathValue]);
+
+  const addSelectedProject = useCallback(async (cwd: string) => {
+    setBusy("add");
+    setError(null);
+    try {
+      const res = await fetch("/api/projects", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ cwd }),
+      });
+      const data = await res.json() as { error?: string };
+      if (!res.ok || data.error) throw new Error(data.error ?? `HTTP ${res.status}`);
+      setPathValue("");
+      setFolderPickerOpen(false);
+      onProjectsChanged?.();
+      onSelectProject?.(cwd);
+      void loadProjects();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setBusy(null);
+    }
+  }, [loadProjects, onProjectsChanged, onSelectProject]);
+
+  const saveRename = useCallback(async (cwd: string) => {
+    setBusy(`rename:${cwd}`);
+    setError(null);
+    try {
+      const res = await fetch("/api/projects", {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ cwd, name: renameValue }),
+      });
+      const data = await res.json() as { error?: string };
+      if (!res.ok || data.error) throw new Error(data.error ?? `HTTP ${res.status}`);
+      setEditingCwd(null);
+      setRenameValue("");
+      await loadProjects();
+      onProjectsChanged?.();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setBusy(null);
+    }
+  }, [loadProjects, onProjectsChanged, renameValue]);
+
+  const removeProject = useCallback(async (cwd: string) => {
+    setBusy(`remove:${cwd}`);
+    setError(null);
+    try {
+      const res = await fetch("/api/projects", {
+        method: "DELETE",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ cwd }),
+      });
+      const data = await res.json() as { error?: string };
+      if (!res.ok || data.error) throw new Error(data.error ?? `HTTP ${res.status}`);
+      await loadProjects();
+      onProjectsChanged?.();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setBusy(null);
+    }
+  }, [loadProjects, onProjectsChanged]);
+
+  const beginRename = useCallback((project: ProjectInfo) => {
+    setEditingCwd(project.cwd);
+    setRenameValue(project.name ?? project.displayName);
+    window.setTimeout(() => inputRef.current?.select(), 0);
+  }, []);
+
+  return (
+    <div style={{ height: "100%", overflowY: "auto", padding: 20 }}>
+      <div style={{ maxWidth: 900, display: "flex", flexDirection: "column", gap: 14 }}>
+        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12 }}>
+          <div>
+            <div style={{ fontSize: 15, fontWeight: 750, color: "var(--text)" }}>Projects</div>
+            <div style={{ marginTop: 4, fontSize: 12, color: "var(--text-muted)" }}>
+              {totals.projects} projects / {totals.chats} chats
+            </div>
+          </div>
+          <button
+            type="button"
+            onClick={() => void loadProjects()}
+            style={{ height: 30, padding: "0 10px", border: "1px solid var(--border)", borderRadius: 6, background: "var(--bg-panel)", color: "var(--text-muted)", cursor: "pointer", fontSize: 12 }}
+          >
+            Refresh
+          </button>
+        </div>
+
+        <div style={{ border: "1px solid var(--border)", borderRadius: 8, background: "var(--bg-panel)", padding: 12 }}>
+          <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
+            <input
+              value={pathValue}
+              onChange={(event) => setPathValue(event.target.value)}
+              onKeyDown={(event) => {
+                if (event.key === "Enter") void addProject();
+              }}
+              placeholder="/path/to/project"
+              style={{ flex: 1, minWidth: 0, height: 32, padding: "0 10px", border: "1px solid var(--border)", borderRadius: 6, background: "var(--bg)", color: "var(--text)", fontFamily: "var(--font-mono)", fontSize: 12, outline: "none" }}
+            />
+            <button
+              type="button"
+              onClick={() => setFolderPickerOpen(true)}
+              style={{ height: 32, padding: "0 12px", border: "1px solid var(--border)", borderRadius: 6, background: "var(--bg)", color: "var(--text-muted)", cursor: "pointer", fontSize: 12 }}
+            >
+              Browse
+            </button>
+            <button
+              type="button"
+              disabled={!pathValue.trim() || busy === "add"}
+              onClick={() => void addProject()}
+              style={{ height: 32, padding: "0 12px", border: "none", borderRadius: 6, background: pathValue.trim() ? "var(--accent)" : "var(--bg-hover)", color: pathValue.trim() ? "#fff" : "var(--text-dim)", cursor: pathValue.trim() ? "pointer" : "default", fontSize: 12, fontWeight: 650 }}
+            >
+              Add
+            </button>
+          </div>
+        </div>
+
+        {error && (
+          <div style={{ padding: "9px 11px", border: "1px solid rgba(248,113,113,0.35)", borderRadius: 7, color: "#f87171", background: "rgba(248,113,113,0.08)", fontSize: 12 }}>
+            {error}
+          </div>
+        )}
+
+        <div style={{ border: "1px solid var(--border)", borderRadius: 8, overflow: "hidden" }}>
+          {loading ? (
+            <div style={{ padding: 16, color: "var(--text-muted)", fontSize: 12 }}>Loading...</div>
+          ) : projects.length === 0 ? (
+            <div style={{ padding: 16, color: "var(--text-muted)", fontSize: 12 }}>No projects yet.</div>
+          ) : (
+            projects.map((project) => {
+              const active = project.cwd === activeCwd;
+              const editing = editingCwd === project.cwd;
+              const last = projectLastAccessed(project);
+              return (
+                <div key={project.cwd} style={{ display: "grid", gridTemplateColumns: "minmax(0, 1fr) auto", gap: 12, alignItems: "center", padding: "12px 14px", borderBottom: "1px solid var(--border)", background: active ? "var(--bg-selected)" : "var(--bg)" }}>
+                  <div style={{ minWidth: 0 }}>
+                    {editing ? (
+                      <input
+                        ref={inputRef}
+                        value={renameValue}
+                        onChange={(event) => setRenameValue(event.target.value)}
+                        onKeyDown={(event) => {
+                          if (event.key === "Enter") void saveRename(project.cwd);
+                          if (event.key === "Escape") setEditingCwd(null);
+                        }}
+                        style={{ width: "min(360px, 100%)", height: 30, padding: "0 9px", border: "1px solid var(--accent)", borderRadius: 6, background: "var(--bg)", color: "var(--text)", fontSize: 13, outline: "none" }}
+                      />
+                    ) : (
+                      <div style={{ color: "var(--text)", fontSize: 13, fontWeight: active ? 750 : 650, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
+                        {project.displayName}
+                      </div>
+                    )}
+                    <div style={{ marginTop: 4, color: "var(--text-dim)", fontSize: 11, fontFamily: "var(--font-mono)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }} title={project.cwd}>
+                      {shortenPath(project.cwd)}
+                    </div>
+                    <div style={{ marginTop: 5, color: "var(--text-muted)", fontSize: 11 }}>
+                      {project.chatCount} chats / last {formatRelativeTime(last)}{!project.exists ? " / path missing" : ""}
+                    </div>
+                  </div>
+                  <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
+                    {editing ? (
+                      <>
+                        <button type="button" disabled={busy === `rename:${project.cwd}`} onClick={() => void saveRename(project.cwd)} style={{ height: 28, padding: "0 9px", border: "none", borderRadius: 6, background: "var(--accent)", color: "#fff", cursor: "pointer", fontSize: 12 }}>Save</button>
+                        <button type="button" onClick={() => setEditingCwd(null)} style={{ height: 28, padding: "0 9px", border: "1px solid var(--border)", borderRadius: 6, background: "var(--bg-panel)", color: "var(--text-muted)", cursor: "pointer", fontSize: 12 }}>Cancel</button>
+                      </>
+                    ) : (
+                      <>
+                        <button type="button" onClick={() => onSelectProject?.(project.cwd)} style={{ height: 28, padding: "0 9px", border: "1px solid var(--border)", borderRadius: 6, background: active ? "var(--accent)" : "var(--bg-panel)", color: active ? "#fff" : "var(--text-muted)", cursor: "pointer", fontSize: 12 }}>
+                          {active ? "Current" : "Switch"}
+                        </button>
+                        <button type="button" onClick={() => beginRename(project)} style={{ height: 28, padding: "0 9px", border: "1px solid var(--border)", borderRadius: 6, background: "var(--bg-panel)", color: "var(--text-muted)", cursor: "pointer", fontSize: 12 }}>Rename</button>
+                        <button type="button" disabled={busy === `remove:${project.cwd}`} onClick={() => void removeProject(project.cwd)} style={{ height: 28, padding: "0 9px", border: "1px solid rgba(248,113,113,0.35)", borderRadius: 6, background: "transparent", color: "#f87171", cursor: "pointer", fontSize: 12 }}>Remove</button>
+                      </>
+                    )}
+                  </div>
+                </div>
+              );
+            })
+          )}
+        </div>
+      </div>
+      <ProjectFolderPicker
+        open={folderPickerOpen}
+        initialPath={activeCwd}
+        onClose={() => setFolderPickerOpen(false)}
+        onSelect={(path) => void addSelectedProject(path)}
+      />
+    </div>
+  );
+}

package/components/ProviderIcons.tsx

@@ -0,0 +1,91 @@
+import React from "react";
+
+type IconProps = { size?: number | string; style?: React.CSSProperties };
+
+function svgIcon(path: React.ReactNode, viewBox = "0 0 24 24"): React.ComponentType<IconProps> {
+  const Icon = ({ size = 24, style }: IconProps) => (
+    <svg width={size} height={size} viewBox={viewBox} fill="none" style={style}>
+      {path}
+    </svg>
+  );
+  Icon.displayName = "ProviderIcon";
+  return Icon;
+}
+
+// Simple geometric provider icons. Mono icons use currentColor; Color icons use their brand color.
+
+export const AnthropicIcon = svgIcon(
+  <path d="M17.5 3H6.5L3 21h4l1.2-6h7.6l1.2 6h4L17.5 3zm-2.3 9H8.8L12 5.5 15.2 12z" fill="currentColor" />
+);
+export const OpenAIIcon = svgIcon(
+  <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" />
+);
+export const GoogleIcon = svgIcon(
+  <><path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 01-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z" fill="#4285F4"/><path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/><path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"/><path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/></>
+);
+export const DeepSeekIcon = svgIcon(
+  <><rect x="2" y="4" width="20" height="16" rx="3" fill="#4D6BFE"/><text x="12" y="16" textAnchor="middle" fill="white" fontSize="10" fontWeight="bold" fontFamily="sans-serif">DS</text></>
+);
+export const GroqIcon = svgIcon(
+  <path d="M4 4h16v16H4z" fill="#F55036"/>, "0 0 24 24"
+);
+export const MistralIcon = svgIcon(
+  <path d="M4 4h5v5H4zm5.5 0h5v5h-5zM15 4h5v5h-5zM4 9.5h5v5H4zm5.5 5.5h5v5h-5zM15 9.5h5v5h-5z" fill="#FA6F00"/>
+);
+export const MoonshotIcon = svgIcon(
+  <circle cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="1.5" fill="none"/>, "0 0 24 24"
+);
+export const MinimaxIcon = svgIcon(
+  <><rect x="2" y="4" width="20" height="16" rx="3" fill="#00D4AA"/><text x="12" y="16" textAnchor="middle" fill="white" fontSize="9" fontWeight="bold" fontFamily="sans-serif">MM</text></>
+);
+export const FireworksIcon = svgIcon(
+  <circle cx="12" cy="12" r="10" fill="#FF5722"/>, "0 0 24 24"
+);
+export const HuggingFaceIcon = svgIcon(
+  <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 5h2v3h-2V7zm0 4h2v2h-2v-2zm3 5H7v-2h7v2z" fill="#FFD21E"/>
+);
+export const CerebrasIcon = svgIcon(
+  <><rect x="2" y="4" width="20" height="16" rx="3" fill="#E84026"/><text x="12" y="16" textAnchor="middle" fill="white" fontSize="9" fontWeight="bold" fontFamily="sans-serif">CB</text></>
+);
+export const OpenRouterIcon = svgIcon(
+  <path d="M12 2l9 5v10l-9 5-9-5V7l9-5z" stroke="currentColor" strokeWidth="1.5" fill="none"/>
+);
+export const XAIIcon = svgIcon(
+  <path d="M4 4l8 8 8-8M4 20l8-8 8 8" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
+);
+export const CloudflareIcon = svgIcon(
+  <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 5l4 3-4 3V7z" fill="#F38020"/>
+);
+export const VercelIcon = svgIcon(
+  <path d="M12 2L22 20H2L12 2z" fill="currentColor"/>
+);
+export const GithubCopilotIcon = svgIcon(
+  <circle cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="1.5" fill="none"/>, "0 0 24 24"
+);
+export const AwsIcon = svgIcon(
+  <path d="M3 15h2l1-3h2l1 3h2V9H9v3L8 9H6l-1 3V9H3v6zm9 0h2v-2h2v-2h-2V9h-2v2h-2v2h2v2z" fill="#FF9900"/>
+);
+export const AzureIcon = svgIcon(
+  <path d="M12 2L3 18h5l4-6 4 6h5L12 2z" fill="#0078D4"/>
+);
+export const KimiIcon = svgIcon(
+  <><rect x="2" y="4" width="20" height="16" rx="3" fill="#6C5CE7"/><text x="12" y="16" textAnchor="middle" fill="white" fontSize="10" fontWeight="bold" fontFamily="sans-serif">Ki</text></>
+);
+export const QwenIcon = svgIcon(
+  <><rect x="2" y="4" width="20" height="16" rx="3" fill="#615CED"/><text x="12" y="16" textAnchor="middle" fill="white" fontSize="9" fontWeight="bold" fontFamily="sans-serif">QW</text></>
+);
+export const ZhipuIcon = svgIcon(
+  <><rect x="2" y="4" width="20" height="16" rx="3" fill="#3859FF"/><text x="12" y="16" textAnchor="middle" fill="white" fontSize="9" fontWeight="bold" fontFamily="sans-serif">ZP</text></>
+);
+export const CohereIcon = svgIcon(
+  <path d="M4 8h16v2H4zm0 4h12v2H4zm0 4h8v2H4z" fill="#3059B1"/>
+);
+export const PerplexityIcon = svgIcon(
+  <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" stroke="#1DB954" strokeWidth="1.5" fill="none" strokeLinejoin="round"/>
+);
+export const TogetherIcon = svgIcon(
+  <circle cx="12" cy="12" r="10" fill="#0F6CBD"/>, "0 0 24 24"
+);
+export const GrokIcon = svgIcon(
+  <circle cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="1.5" fill="none"/>, "0 0 24 24"
+);

package/components/ReportPanel.tsx

@@ -0,0 +1,237 @@
+"use client";
+
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { MarkdownRenderer } from "@/components/MarkdownRenderer";
+import type { AnalysisReport, AnalysisReportSection } from "@/lib/report-store";
+
+interface Props {
+  sessionId: string | null;
+  cwd?: string;
+  refreshKey?: number;
+  onOpenFile?: (filePath: string, fileName: string) => void;
+}
+
+type ViewMode = "preview" | "sections" | "changes" | "source";
+
+function statusLabel(status: AnalysisReportSection["status"]): string {
+  if (status === "needs_review") return "Needs review";
+  return status.slice(0, 1).toUpperCase() + status.slice(1);
+}
+
+function statusColor(status: AnalysisReportSection["status"]): string {
+  if (status === "verified") return "#16a34a";
+  if (status === "outdated") return "#ef4444";
+  if (status === "needs_review") return "rgba(234,179,8,0.95)";
+  return "var(--text-dim)";
+}
+
+function sectionSnippet(markdown: string): string {
+  const cleaned = markdown.replace(/[#*_`>|-]/g, " ").replace(/\s+/g, " ").trim();
+  return cleaned || "No curated content yet.";
+}
+
+export function ReportPanel({ sessionId, cwd, refreshKey = 0, onOpenFile }: Props) {
+  const [report, setReport] = useState<AnalysisReport | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [generating, setGenerating] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [viewMode, setViewMode] = useState<ViewMode>("preview");
+
+  useEffect(() => {
+    if (!sessionId) {
+      setReport(null);
+      setError(null);
+      return;
+    }
+    let cancelled = false;
+    setLoading(true);
+    setError(null);
+    fetch(`/api/reports/${encodeURIComponent(sessionId)}`)
+      .then((res) => res.ok ? res.json() : res.json().then((data) => Promise.reject(new Error(data.error ?? `HTTP ${res.status}`))))
+      .then((data: { report: AnalysisReport }) => {
+        if (!cancelled) setReport(data.report);
+      })
+      .catch((err) => {
+        if (!cancelled) setError(err instanceof Error ? err.message : String(err));
+      })
+      .finally(() => {
+        if (!cancelled) setLoading(false);
+      });
+    return () => { cancelled = true; };
+  }, [sessionId, refreshKey]);
+
+  const handleGenerate = useCallback(() => {
+    if (!sessionId) return;
+    setGenerating(true);
+    setError(null);
+    fetch(`/api/reports/${encodeURIComponent(sessionId)}`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ action: "generate" }),
+    })
+      .then((res) => res.ok ? res.json() : res.json().then((data) => Promise.reject(new Error(data.error ?? `HTTP ${res.status}`))))
+      .then((data: { report: AnalysisReport }) => {
+        setReport(data.report);
+        setViewMode("preview");
+      })
+      .catch((err) => setError(err instanceof Error ? err.message : String(err)))
+      .finally(() => setGenerating(false));
+  }, [sessionId]);
+
+  const sourceBasePath = useMemo(() => {
+    if (!cwd) return undefined;
+    return `${cwd.replace(/\/+$/, "")}/analysis_report.md`;
+  }, [cwd]);
+  const populatedSections = useMemo(
+    () => report?.sections.filter((section) => section.markdown.trim()) ?? [],
+    [report],
+  );
+
+  if (!sessionId) {
+    return (
+      <div style={{ height: "100%", display: "flex", alignItems: "center", justifyContent: "center", padding: 24, color: "var(--text-dim)", fontSize: 12, textAlign: "center" }}>
+        Select or start a session to build an analysis report.
+      </div>
+    );
+  }
+
+  return (
+    <div style={{ height: "100%", display: "flex", flexDirection: "column", overflow: "hidden" }}>
+      <div style={{
+        display: "flex",
+        alignItems: "center",
+        gap: 6,
+        padding: "8px 10px",
+        borderBottom: "1px solid var(--border)",
+        background: "var(--bg)",
+        flexShrink: 0,
+      }}>
+        {(["preview", "sections", "changes", "source"] as ViewMode[]).map((mode) => (
+          <button
+            key={mode}
+            type="button"
+            onClick={() => setViewMode(mode)}
+            style={{
+              height: 28,
+              padding: "0 9px",
+              border: "1px solid var(--border)",
+              borderRadius: 7,
+              background: viewMode === mode ? "var(--bg-selected)" : "var(--bg-panel)",
+              color: viewMode === mode ? "var(--text)" : "var(--text-muted)",
+              cursor: "pointer",
+              fontSize: 11,
+              textTransform: "capitalize",
+            }}
+          >
+            {mode}
+          </button>
+        ))}
+        <div style={{ flex: 1 }} />
+        <button
+          type="button"
+          onClick={handleGenerate}
+          disabled={generating}
+          title="Refresh analysis report from this session"
+          style={{
+            height: 28,
+            padding: "0 10px",
+            border: "1px solid rgba(37,99,235,0.45)",
+            borderRadius: 7,
+            background: "var(--bg-selected)",
+            color: "var(--accent)",
+            cursor: generating ? "default" : "pointer",
+            fontSize: 11,
+            fontWeight: 600,
+            opacity: generating ? 0.65 : 1,
+          }}
+        >
+          {generating ? "Updating..." : "Update"}
+        </button>
+      </div>
+
+      {error && (
+        <div style={{ padding: "8px 12px", color: "#ef4444", fontSize: 12, borderBottom: "1px solid var(--border)", background: "rgba(239,68,68,0.08)" }}>
+          {error}
+        </div>
+      )}
+
+      {loading ? (
+        <div style={{ flex: 1, display: "flex", alignItems: "center", justifyContent: "center", color: "var(--text-muted)", fontSize: 12 }}>
+          Loading report...
+        </div>
+      ) : !report ? (
+        <div style={{ flex: 1, display: "flex", alignItems: "center", justifyContent: "center", color: "var(--text-dim)", fontSize: 12 }}>
+          No report available.
+        </div>
+      ) : (
+        <div style={{ flex: 1, overflow: "auto" }}>
+          {viewMode === "preview" && (
+            <MarkdownRenderer
+              content={report.markdown}
+              className="markdown-body markdown-file-preview"
+              style={{ padding: "22px 26px 40px", maxWidth: 860, margin: "0 auto" }}
+              codeBlockVariant="file"
+              baseFilePath={sourceBasePath}
+              onOpenLocalFile={onOpenFile}
+            />
+          )}
+
+          {viewMode === "sections" && (
+            <div style={{ padding: 12, display: "flex", flexDirection: "column", gap: 10 }}>
+              {populatedSections.map((section) => (
+                <div
+                  key={section.id}
+                  style={{
+                    border: "1px solid var(--border)",
+                    borderRadius: 8,
+                    background: "var(--bg)",
+                    overflow: "hidden",
+                  }}
+                >
+                  <div style={{ display: "flex", alignItems: "center", gap: 8, padding: "9px 11px", borderBottom: "1px solid var(--border)", background: "var(--bg-panel)" }}>
+                    <div style={{ fontSize: 12, fontWeight: 700, color: "var(--text)", flex: 1 }}>{section.title}</div>
+                    <span style={{ fontSize: 10, color: statusColor(section.status), border: `1px solid ${statusColor(section.status)}`, borderRadius: 999, padding: "2px 7px" }}>
+                      {statusLabel(section.status)}
+                    </span>
+                  </div>
+                  <div style={{ padding: "9px 11px", color: "var(--text-muted)", fontSize: 12, lineHeight: 1.5 }}>
+                    {sectionSnippet(section.markdown)}
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+
+          {viewMode === "changes" && (
+            <div style={{ padding: 14 }}>
+              {report.changes.length === 0 ? (
+                <div style={{ color: "var(--text-dim)", fontSize: 12 }}>No report changes yet.</div>
+              ) : report.changes.map((change) => (
+                <div key={change.id} style={{ padding: "10px 0", borderBottom: "1px solid var(--border)" }}>
+                  <div style={{ fontSize: 12, fontWeight: 700, color: "var(--text)", marginBottom: 4 }}>{change.title}</div>
+                  <div style={{ fontSize: 11, color: "var(--text-dim)", marginBottom: 6 }}>{new Date(change.timestamp).toLocaleString()}</div>
+                  <div style={{ fontSize: 12, color: "var(--text-muted)", lineHeight: 1.5 }}>{change.detail}</div>
+                </div>
+              ))}
+            </div>
+          )}
+
+          {viewMode === "source" && (
+            <pre style={{
+              margin: 0,
+              padding: 18,
+              whiteSpace: "pre-wrap",
+              wordBreak: "break-word",
+              fontFamily: "var(--font-mono)",
+              fontSize: 12,
+              lineHeight: 1.55,
+              color: "var(--text-muted)",
+            }}>
+              {report.markdown}
+            </pre>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}