npm - llm-deep-trace - Versions diffs - 0.1.0 - Mend

llm-deep-trace 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (45) hide show

package/LICENSE +21 -0
package/README.md +159 -0
package/bin/llm-deep-trace.js +24 -0
package/next.config.ts +8 -0
package/package.json +56 -0
package/postcss.config.mjs +5 -0
package/public/banner-v2.png +0 -0
package/public/file.svg +1 -0
package/public/globe.svg +1 -0
package/public/logo.png +0 -0
package/public/next.svg +1 -0
package/public/vercel.svg +1 -0
package/public/window.svg +1 -0
package/src/app/api/agent-config/route.ts +31 -0
package/src/app/api/all-sessions/route.ts +9 -0
package/src/app/api/analytics/route.ts +379 -0
package/src/app/api/detect-agents/route.ts +170 -0
package/src/app/api/image/route.ts +73 -0
package/src/app/api/search/route.ts +28 -0
package/src/app/api/session-by-key/route.ts +21 -0
package/src/app/api/sessions/[sessionId]/messages/route.ts +46 -0
package/src/app/api/sse/route.ts +86 -0
package/src/app/favicon.ico +0 -0
package/src/app/globals.css +3518 -0
package/src/app/icon.svg +4 -0
package/src/app/layout.tsx +20 -0
package/src/app/page.tsx +5 -0
package/src/components/AnalyticsDashboard.tsx +393 -0
package/src/components/App.tsx +243 -0
package/src/components/CopyButton.tsx +42 -0
package/src/components/Logo.tsx +20 -0
package/src/components/MainPanel.tsx +1128 -0
package/src/components/MessageRenderer.tsx +983 -0
package/src/components/SessionTree.tsx +505 -0
package/src/components/SettingsPanel.tsx +160 -0
package/src/components/SetupView.tsx +206 -0
package/src/components/Sidebar.tsx +714 -0
package/src/components/ThemeToggle.tsx +54 -0
package/src/lib/client-utils.ts +360 -0
package/src/lib/normalizers.ts +371 -0
package/src/lib/sessions.ts +1223 -0
package/src/lib/store.ts +518 -0
package/src/lib/types.ts +112 -0
package/src/lib/useSSE.ts +81 -0
package/tsconfig.json +34 -0

package/src/app/icon.svg ADDED Viewed

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" fill="none">
+  <rect width="1024" height="1024" rx="200" fill="#0D0D0F"/>
+  <path d="M896 384c0 35.2-28.8 64-64 64s-64-28.8-64-64 28.8-64 64-64 64 28.8 64 64z M240 352c-62.4 0-112-49.6-112-112s49.6-112 112-112 112 49.6 112 112-49.6 112-112 112z M544 688c-80 0-144-64-144-144s64-144 144-144 144 64 144 144-64 144-144 144z M320 832c0-35.2 28.8-64 64-64s64 28.8 64 64-28.8 64-64 64-64-28.8-64-64z M176 656c0-17.6 14.4-32 32-32s32 14.4 32 32-14.4 32-32 32-32-14.4-32-32z M624 216c0-22.4 17.6-40 40-40s40 17.6 40 40-17.6 40-40 40-40-17.6-40-40z M736 560c0-27.2 20.8-48 48-48s48 20.8 48 48-20.8 48-48 48-48-20.8-48-48z" fill="#9B72EF"/>
+</svg>

package/src/app/layout.tsx ADDED Viewed

@@ -0,0 +1,20 @@
+import type { Metadata } from "next";
+import "highlight.js/styles/base16/onedark.css";
+import "./globals.css";
+export const metadata: Metadata = {
+  title: "deep trace",
+  description: "Session browser for AI agent CLIs — Claude Code, Codex, OpenClaw, Kimi and more",
+};
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  );
+}

package/src/app/page.tsx ADDED Viewed

@@ -0,0 +1,5 @@
+import App from "@/components/App";
+export default function Home() {
+  return <App />;
+}

package/src/components/AnalyticsDashboard.tsx ADDED Viewed

@@ -0,0 +1,393 @@
+"use client";
+import { useEffect, useState } from "react";
+interface AnalyticsData {
+  sessionsPerDay: { date: string; count: number; byProvider: Record<string, number> }[];
+  messagesPerDay: { date: string; count: number; byProvider: Record<string, number> }[];
+  providerBreakdown: { provider: string; count: number; sessions: number; messages: number; pct: number }[];
+  topTools: { name: string; count: number }[];
+  tokenTotals: { inputTokens: number; outputTokens: number; avgPerSession: number };
+  sessionLengthDist: { bucket: string; count: number }[];
+  totalSessions: number;
+  totalMessages: number;
+  avgSessionMessages: number;
+  hourOfDay: number[][];
+}
+const PROVIDER_COLORS: Record<string, string> = {
+  kova: "#9B72EF",
+  claude: "#3B82F6",
+  codex: "#F59E0B",
+  kimi: "#06B6D4",
+  gemini: "#22C55E",
+  copilot: "#52525B",
+  factory: "#F97316",
+  opencode: "#14B8A6",
+  aider: "#EC4899",
+  continue: "#8B5CF6",
+  cursor: "#6366F1",
+};
+const WEEKDAYS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+function fmtNum(n: number): string {
+  if (n >= 1_000_000) return (n / 1_000_000).toFixed(1) + "M";
+  if (n >= 1_000) return (n / 1_000).toFixed(1) + "K";
+  return String(n);
+}
+function fmtTokens(n: number): string {
+  if (n >= 1_000_000) return (n / 1_000_000).toFixed(2) + "M";
+  if (n >= 1_000) return (n / 1_000).toFixed(1) + "K";
+  return String(n);
+}
+// ── Stat card ────────────────────────────────────────────
+function StatCard({ label, value, sub }: { label: string; value: string; sub?: string }) {
+  return (
+    <div className="stat-card">
+      <div className="stat-label">{label}</div>
+      <div className="stat-value">{value}</div>
+      {sub && <div className="stat-sub">{sub}</div>}
+    </div>
+  );
+}
+// ── Stacked bar chart (sessions or messages per day) ─────
+function StackedBarChart({
+  data,
+  providers,
+  chartH = 140,
+}: {
+  data: { date: string; count: number; byProvider: Record<string, number> }[];
+  providers: string[];
+  chartH?: number;
+}) {
+  const maxVal = Math.max(...data.map((d) => d.count), 1);
+  const barW = Math.max(4, Math.min(16, Math.floor(560 / data.length) - 2));
+  const gap = Math.max(1, Math.floor(barW / 4));
+  const totalW = data.length * (barW + gap);
+  return (
+    <svg width="100%" viewBox={`0 0 ${totalW} ${chartH}`} preserveAspectRatio="none" style={{ display: "block", height: chartH }}>
+      {data.map((day, i) => {
+        const x = i * (barW + gap);
+        let yOffset = chartH;
+        return (
+          <g key={day.date}>
+            {providers.map((p) => {
+              const v = day.byProvider[p] || 0;
+              if (v === 0) return null;
+              const h = Math.max(1, (v / maxVal) * chartH);
+              yOffset -= h;
+              return (
+                <rect
+                  key={p}
+                  x={x}
+                  y={yOffset}
+                  width={barW}
+                  height={h}
+                  fill={PROVIDER_COLORS[p] || "#555"}
+                  opacity={0.85}
+                >
+                  <title>{day.date} · {p}: {v}</title>
+                </rect>
+              );
+            })}
+            {/* unfilled portion */}
+            {day.count === 0 && (
+              <rect x={x} y={chartH - 2} width={barW} height={2} fill="var(--border)" opacity={0.4} />
+            )}
+          </g>
+        );
+      })}
+    </svg>
+  );
+}
+// ── By-agent breakdown ───────────────────────────────────
+function AgentBreakdown({
+  data,
+  metric,
+}: {
+  data: { provider: string; count: number; sessions: number; messages: number; pct: number }[];
+  metric: "sessions" | "messages";
+}) {
+  const maxVal = Math.max(...data.map((d) => (metric === "sessions" ? d.sessions : d.messages)), 1);
+  return (
+    <div className="agent-breakdown">
+      {data.map((row) => {
+        const val = metric === "sessions" ? row.sessions : row.messages;
+        const pct = Math.round((val / maxVal) * 100);
+        const color = PROVIDER_COLORS[row.provider] || "#555";
+        return (
+          <div key={row.provider} className="agent-breakdown-row">
+            <span className="agent-breakdown-name" style={{ color }}>
+              {row.provider}
+            </span>
+            <div className="agent-breakdown-bar-wrap">
+              <div
+                className="agent-breakdown-bar"
+                style={{ width: `${pct}%`, background: color }}
+              />
+            </div>
+            <span className="agent-breakdown-val">{fmtNum(val)}</span>
+            <span className="agent-breakdown-pct">{Math.round((val / maxVal) * 100)}%</span>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+// ── Time-of-day heatmap ───────────────────────────────────
+function HeatmapGrid({ data }: { data: number[][] }) {
+  // data[weekday 0-6][hour 0-23]
+  const maxVal = Math.max(...data.flat(), 1);
+  const hours = Array.from({ length: 24 }, (_, i) => i);
+  return (
+    <div className="heatmap-wrap">
+      <div className="heatmap-hours-row">
+        <div className="heatmap-day-label" />
+        {hours.map((h) => (
+          <div key={h} className="heatmap-hour-label">
+            {h % 6 === 0 ? `${h}h` : ""}
+          </div>
+        ))}
+      </div>
+      {WEEKDAYS.map((day, wi) => (
+        <div key={day} className="heatmap-row">
+          <div className="heatmap-day-label">{day}</div>
+          {hours.map((h) => {
+            const val = data[wi][h] || 0;
+            const intensity = val / maxVal;
+            return (
+              <div
+                key={h}
+                className="heatmap-cell"
+                style={{
+                  background: val === 0
+                    ? "var(--raised)"
+                    : `rgba(155, 114, 239, ${0.12 + intensity * 0.88})`,
+                }}
+                title={`${day} ${h}:00 — ${val} session${val !== 1 ? "s" : ""}`}
+              />
+            );
+          })}
+        </div>
+      ))}
+    </div>
+  );
+}
+// ── Main dashboard ───────────────────────────────────────
+export default function AnalyticsDashboard() {
+  const [data, setData] = useState<AnalyticsData | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [period, setPeriod] = useState<"7d" | "30d" | "90d" | "all">("30d");
+  const [agentFilter, setAgentFilter] = useState("all");
+  const [metric, setMetric] = useState<"sessions" | "messages">("sessions");
+  useEffect(() => {
+    setLoading(true);
+    setError(null);
+    fetch(`/api/analytics?period=${period}&agent=${agentFilter}`)
+      .then((r) => r.json())
+      .then((d: AnalyticsData) => { setData(d); setLoading(false); })
+      .catch((e) => { setError(String(e)); setLoading(false); });
+  }, [period, agentFilter]);
+  if (loading) return <div className="analytics-loading">Loading analytics…</div>;
+  if (error || !data) return <div className="analytics-loading">Failed to load analytics</div>;
+  const providers = data.providerBreakdown.map((p) => p.provider);
+  const chartData = metric === "sessions" ? data.sessionsPerDay : data.messagesPerDay;
+  // X-axis date labels (show every Nth)
+  const dateLabels = (() => {
+    const n = chartData.length;
+    const step = n <= 10 ? 1 : n <= 30 ? 5 : 10;
+    return chartData.map((d, i) => (i % step === 0 || i === n - 1 ? d.date.slice(5) : ""));
+  })();
+  return (
+    <div className="analytics-dash">
+      {/* Controls */}
+      <div className="analytics-controls">
+        <div className="analytics-filter-group">
+          {(["7d", "30d", "90d", "all"] as const).map((p) => (
+            <button
+              key={p}
+              className={`analytics-pill ${period === p ? "active" : ""}`}
+              onClick={() => setPeriod(p)}
+            >
+              {p === "all" ? "All time" : `Last ${p}`}
+            </button>
+          ))}
+        </div>
+        <select
+          className="analytics-agent-select"
+          value={agentFilter}
+          onChange={(e) => setAgentFilter(e.target.value)}
+        >
+          <option value="all">All agents</option>
+          {providers.map((p) => (
+            <option key={p} value={p}>{p}</option>
+          ))}
+        </select>
+      </div>
+      {/* Stat cards */}
+      <div className="stat-cards-row">
+        <StatCard
+          label="Sessions"
+          value={fmtNum(data.totalSessions)}
+          sub={`in ${period === "all" ? "all time" : `last ${period}`}`}
+        />
+        <StatCard
+          label="Messages"
+          value={fmtNum(data.totalMessages)}
+          sub="total across sessions"
+        />
+        <StatCard
+          label="Avg session"
+          value={`${data.avgSessionMessages} msgs`}
+          sub="messages per session"
+        />
+        <StatCard
+          label="Tokens used"
+          value={fmtTokens(data.tokenTotals.inputTokens + data.tokenTotals.outputTokens)}
+          sub={`${fmtTokens(data.tokenTotals.avgPerSession)} avg/session`}
+        />
+      </div>
+      {/* Sessions / messages over time */}
+      <div className="analytics-section">
+        <div className="analytics-section-header">
+          <span className="analytics-section-title">Activity over time</span>
+          <div className="analytics-filter-group small">
+            <button
+              className={`analytics-pill ${metric === "sessions" ? "active" : ""}`}
+              onClick={() => setMetric("sessions")}
+            >sessions</button>
+            <button
+              className={`analytics-pill ${metric === "messages" ? "active" : ""}`}
+              onClick={() => setMetric("messages")}
+            >messages</button>
+          </div>
+        </div>
+        {/* Provider color legend */}
+        <div className="provider-legend">
+          {providers.filter((p) => data.providerBreakdown.find(r => r.provider === p)!.count > 0).map((p) => (
+            <span key={p} className="legend-item">
+              <span className="legend-dot" style={{ background: PROVIDER_COLORS[p] || "#555" }} />
+              {p}
+            </span>
+          ))}
+        </div>
+        <div className="chart-area">
+          <StackedBarChart data={chartData} providers={providers} />
+        </div>
+        {/* X-axis labels */}
+        <div className="chart-x-labels">
+          {dateLabels.map((label, i) => (
+            <span key={i} className="chart-x-label">{label}</span>
+          ))}
+        </div>
+      </div>
+      {/* By-agent breakdown + time-of-day heatmap side by side */}
+      <div className="analytics-two-col">
+        <div className="analytics-section">
+          <div className="analytics-section-header">
+            <span className="analytics-section-title">By agent</span>
+          </div>
+          <AgentBreakdown data={data.providerBreakdown} metric={metric} />
+        </div>
+        <div className="analytics-section">
+          <div className="analytics-section-header">
+            <span className="analytics-section-title">Time of day</span>
+            <span className="analytics-section-hint">by session file time</span>
+          </div>
+          <HeatmapGrid data={data.hourOfDay} />
+        </div>
+      </div>
+      {/* Top tools */}
+      {data.topTools.length > 0 && (
+        <div className="analytics-section">
+          <div className="analytics-section-header">
+            <span className="analytics-section-title">Top tools (Claude Code)</span>
+          </div>
+          <div className="tool-bars">
+            {data.topTools.map((t, i) => {
+              const max = data.topTools[0].count || 1;
+              return (
+                <div key={t.name} className="tool-bar-row">
+                  <span className="tool-rank">{i + 1}</span>
+                  <span className="tool-name">{t.name}</span>
+                  <div className="tool-bar-wrap">
+                    <div className="tool-bar" style={{ width: `${(t.count / max) * 100}%` }} />
+                  </div>
+                  <span className="tool-count">{fmtNum(t.count)}</span>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      )}
+      {/* Token totals */}
+      <div className="analytics-section">
+        <div className="analytics-section-header">
+          <span className="analytics-section-title">Token usage</span>
+        </div>
+        <div className="token-grid">
+          <div className="token-cell">
+            <span className="token-label">Input</span>
+            <span className="token-value">{fmtTokens(data.tokenTotals.inputTokens)}</span>
+          </div>
+          <div className="token-cell">
+            <span className="token-label">Output</span>
+            <span className="token-value">{fmtTokens(data.tokenTotals.outputTokens)}</span>
+          </div>
+          <div className="token-cell">
+            <span className="token-label">Total</span>
+            <span className="token-value">{fmtTokens(data.tokenTotals.inputTokens + data.tokenTotals.outputTokens)}</span>
+          </div>
+          <div className="token-cell">
+            <span className="token-label">Avg / session</span>
+            <span className="token-value">{fmtTokens(data.tokenTotals.avgPerSession)}</span>
+          </div>
+        </div>
+      </div>
+      {/* Session length distribution */}
+      <div className="analytics-section">
+        <div className="analytics-section-header">
+          <span className="analytics-section-title">Session length distribution</span>
+          <span className="analytics-section-hint">by message count</span>
+        </div>
+        <div className="dist-bars">
+          {data.sessionLengthDist.map((row) => {
+            const max = Math.max(...data.sessionLengthDist.map((r) => r.count), 1);
+            return (
+              <div key={row.bucket} className="dist-row">
+                <span className="dist-label">{row.bucket}</span>
+                <div className="dist-bar-wrap">
+                  <div className="dist-bar" style={{ width: `${(row.count / max) * 100}%` }} />
+                </div>
+                <span className="dist-count">{row.count}</span>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/App.tsx ADDED Viewed

@@ -0,0 +1,243 @@
+"use client";
+import { useEffect, useCallback, useRef, lazy, Suspense, useState } from "react";
+import { useStore } from "@/lib/store";
+import { useSSE } from "@/lib/useSSE";
+import { sessionLabel } from "@/lib/client-utils";
+import Sidebar from "./Sidebar";
+import MainPanel from "./MainPanel";
+import AnalyticsDashboard from "./AnalyticsDashboard";
+import SetupView from "./SetupView";
+const SessionTree = lazy(() => import("./SessionTree"));
+export default function App() {
+  const setSessions = useStore((s) => s.setSessions);
+  const setCurrentSession = useStore((s) => s.setCurrentSession);
+  const currentSessionId = useStore((s) => s.currentSessionId);
+  const sessions = useStore((s) => s.sessions);
+  const currentMessages = useStore((s) => s.currentMessages);
+  const treePanelOpen = useStore((s) => s.treePanelOpen);
+  const setTreePanelOpen = useStore((s) => s.setTreePanelOpen);
+  const treePanelManualClose = useStore((s) => s.treePanelManualClose);
+  const setTreePanelManualClose = useStore((s) => s.setTreePanelManualClose);
+  const treePanelWidth = useStore((s) => s.treePanelWidth);
+  const setTreePanelWidth = useStore((s) => s.setTreePanelWidth);
+  const setTheme = useStore((s) => s.setTheme);
+  const initFromLocalStorage = useStore((s) => s.initFromLocalStorage);
+  const setScrollTargetIndex = useStore((s) => s.setScrollTargetIndex);
+  const activeSessions = useStore((s) => s.activeSessions);
+  const setMessages = useStore((s) => s.setMessages);
+  const sidebarTab = useStore((s) => s.sidebarTab);
+  const treeDragging = useRef(false);
+  const pollTimerRef = useRef<ReturnType<typeof setInterval> | null>(null);
+  const [showSetup, setShowSetup] = useState<boolean | null>(null); // null = not yet checked
+  useEffect(() => {
+    const forceSetup = new URLSearchParams(window.location.search).get("setup") === "1";
+    const done = localStorage.getItem("llm-deep-trace-setup-done");
+    // Returning users (pre-date the setup screen) have other keys set — auto-skip
+    const isReturningUser = !!localStorage.getItem("llm-deep-trace-settings")
+      || !!localStorage.getItem("llm-deep-trace-block-colors");
+    if (isReturningUser && !done) {
+      localStorage.setItem("llm-deep-trace-setup-done", "1");
+    }
+    setShowSetup(forceSetup || (!done && !isReturningUser));
+  }, []);
+  useEffect(() => {
+    initFromLocalStorage();
+    try {
+      const saved = localStorage.getItem("deep-trace-theme") || "system";
+      setTheme(saved);
+    } catch {
+      setTheme("system");
+    }
+    const mq = window.matchMedia("(prefers-color-scheme: dark)");
+    const handler = () => {
+      const theme = useStore.getState().theme;
+      if (theme === "system") {
+        const root = document.documentElement;
+        root.classList.remove("theme-dim", "theme-light");
+        if (!mq.matches) root.classList.add("theme-light");
+      }
+    };
+    mq.addEventListener("change", handler);
+    return () => mq.removeEventListener("change", handler);
+  }, [setTheme, initFromLocalStorage]);
+  useEffect(() => {
+    fetch("/api/all-sessions")
+      .then((r) => r.json())
+      .then((data) => {
+        setSessions(data);
+        if (!currentSessionId && data.length) {
+          const main = data.find(
+            (s: { key: string }) => s.key === "agent:main:main"
+          );
+          setCurrentSession(main ? main.sessionId : data[0].sessionId);
+        }
+      })
+      .catch(() => {});
+  }, [setSessions, setCurrentSession, currentSessionId]);
+  useSSE();
+  // Live tail polling for active sessions
+  useEffect(() => {
+    if (pollTimerRef.current) clearInterval(pollTimerRef.current);
+    if (currentSessionId && activeSessions.has(currentSessionId)) {
+      const sess = sessions.find(s => s.sessionId === currentSessionId);
+      const source = sess?.source || "kova";
+      pollTimerRef.current = setInterval(() => {
+        fetch(`/api/sessions/${currentSessionId}/messages?source=${source}`)
+          .then((r) => r.json())
+          .then((entries) => {
+            if (Array.isArray(entries)) setMessages(entries);
+          })
+          .catch(() => {});
+      }, 3000);
+    }
+    return () => {
+      if (pollTimerRef.current) clearInterval(pollTimerRef.current);
+    };
+  }, [currentSessionId, activeSessions, sessions, setMessages]);
+  // Auto-show/hide tree panel based on subagents
+  useEffect(() => {
+    if (!currentSessionId) return;
+    const sess = sessions.find((s) => s.sessionId === currentSessionId);
+    if (!sess) return;
+    if (sess.hasSubagents) {
+      if (!treePanelManualClose) {
+        setTreePanelOpen(true);
+      }
+    } else {
+      setTreePanelOpen(false);
+    }
+  }, [currentSessionId, sessions, treePanelManualClose, setTreePanelOpen]);
+  // Reset manual close when switching sessions
+  useEffect(() => {
+    setTreePanelManualClose(false);
+  }, [currentSessionId, setTreePanelManualClose]);
+  const handleScrollToMessage = useCallback(
+    (messageIndex: number) => {
+      setScrollTargetIndex(messageIndex);
+    },
+    [setScrollTargetIndex]
+  );
+  const handleNavigateSession = useCallback(
+    (keyOrId: string) => {
+      if (!keyOrId) return;
+      const target = sessions.find(
+        (s) =>
+          s.sessionId === keyOrId ||
+          s.key === keyOrId ||
+          s.sessionId.startsWith(keyOrId) ||
+          s.sessionId.includes(keyOrId) ||
+          s.key.endsWith("/" + keyOrId.slice(0, 8)) ||
+          ("agent-" + keyOrId) === s.sessionId
+      );
+      if (target) {
+        setCurrentSession(target.sessionId);
+      }
+    },
+    [sessions, setCurrentSession]
+  );
+  const handleCloseTree = useCallback(() => {
+    setTreePanelOpen(false);
+    setTreePanelManualClose(true);
+  }, [setTreePanelOpen, setTreePanelManualClose]);
+  const handleToggleTree = useCallback(() => {
+    if (treePanelOpen) {
+      handleCloseTree();
+    } else {
+      setTreePanelOpen(true);
+      setTreePanelManualClose(false);
+    }
+  }, [treePanelOpen, handleCloseTree, setTreePanelOpen, setTreePanelManualClose]);
+  // Tree panel drag-to-resize
+  const handleTreeMouseDown = useCallback((e: React.MouseEvent) => {
+    e.preventDefault();
+    treeDragging.current = true;
+    document.body.style.cursor = "col-resize";
+    document.body.style.userSelect = "none";
+    const startX = e.clientX;
+    const startW = treePanelWidth;
+    const onMove = (ev: MouseEvent) => {
+      if (!treeDragging.current) return;
+      const newW = startW - (ev.clientX - startX);
+      setTreePanelWidth(newW);
+    };
+    const onUp = () => {
+      treeDragging.current = false;
+      document.body.style.cursor = "";
+      document.body.style.userSelect = "";
+      document.removeEventListener("mousemove", onMove);
+      document.removeEventListener("mouseup", onUp);
+    };
+    document.addEventListener("mousemove", onMove);
+    document.addEventListener("mouseup", onUp);
+  }, [treePanelWidth, setTreePanelWidth]);
+  const sess = sessions.find((s) => s.sessionId === currentSessionId);
+  const sessLabel = sess
+    ? sessionLabel(sess)
+    : currentSessionId
+      ? currentSessionId.slice(0, 14) + "\u2026"
+      : "Session";
+  // Show setup on first run (null = still checking localStorage, avoid flash)
+  if (showSetup === null) return null;
+  if (showSetup) return <SetupView onDone={() => setShowSetup(false)} />;
+  return (
+    <div className="app-shell">
+      <Sidebar />
+      {sidebarTab === "analytics" ? <AnalyticsDashboard /> : <MainPanel />}
+      {/* Right pane tray handle */}
+      <div
+        className={`tray-handle ${treePanelOpen ? "open" : ""}`}
+        onClick={handleToggleTree}
+        title={treePanelOpen ? "Close conversation map" : "Open conversation map"}
+      >
+        <svg width="6" height="24" viewBox="0 0 6 24" fill="none">
+          <rect x="1" y="8" width="1.5" height="8" rx="0.75" fill="currentColor" />
+          <rect x="3.5" y="8" width="1.5" height="8" rx="0.75" fill="currentColor" />
+        </svg>
+      </div>
+      {treePanelOpen && currentSessionId && (
+        <div className="tree-panel-wrap" style={{ width: treePanelWidth }}>
+          <div className="tree-resize-handle" onMouseDown={handleTreeMouseDown} />
+          <Suspense fallback={<div className="tree-panel"><div className="loading-state"><div className="spinner" />Loading&hellip;</div></div>}>
+            <SessionTree
+              messages={currentMessages}
+              sessionId={currentSessionId}
+              sessionLabel={sessLabel}
+              allSessions={sessions}
+              onScrollToMessage={handleScrollToMessage}
+              onNavigateSession={handleNavigateSession}
+              onClose={handleCloseTree}
+            />
+          </Suspense>
+        </div>
+      )}
+    </div>
+  );
+}