@seqyuan/annodex 0.1.12 → 0.1.13

package/components/ProjectsConfig.tsx

@@ -1,288 +0,0 @@
-"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

@@ -1,91 +0,0 @@
-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

@@ -1,237 +0,0 @@
-"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>
-  );
-}