diff --git a/app/layout.tsx b/app/layout.tsx
index bb741c3..d108f76 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -2,7 +2,6 @@ import type { Metadata } from "next";
import "katex/dist/katex.min.css";
import "./globals.css";
import { AppShell, SidebarProvider } from "@/components/sidebar";
-import { TreePanelModeProvider } from "@/components/tree-panel";
import { ActivityDock, ActivityProvider } from "@/components/activity-dock";
export const metadata: Metadata = {
@@ -15,15 +14,13 @@ export default function RootLayout({ children }: { children: React.ReactNode })
-
-
+ {children}
{/* The reserved bottom-right corner of every view — renders
nothing while no background process runs. */}
-
-
+
);
diff --git a/components/chat.tsx b/components/chat.tsx
index 3af89ae..274ae5c 100644
--- a/components/chat.tsx
+++ b/components/chat.tsx
@@ -25,8 +25,6 @@ import { PlanBlock, PlanPopup } from "@/components/plan-block";
import type { PlanBlockData } from "@/src/core";
import { QuestionDock } from "@/components/question-dock";
import { SidebarToggle } from "@/components/sidebar";
-import { SubAgentsPanel } from "@/components/sub-agents-panel";
-import { TreePanel } from "@/components/tree-panel";
import type { ArtifactPartProps, JobRecord, Phase3, QuestionAnswerData, TeacherUIMessage, TurnUsage } from "@/src/core";
import { PhaseChip, PhaseDivider, planNodeCount } from "@/components/phase-divider";
import { findPendingToolCall, phaseAt3, phaseTimeline } from "@/src/core";
@@ -471,13 +469,6 @@ export function Chat({
- {/* Right sidebar, a full-height sibling of the middle column: the
- live sub-agent fleet (when running) above the plan tree — the
- fleet panel renders nothing while idle, so the column is all plan. */}
-
-
-
-
{planOpen && setPlanOpen(false)} />}
diff --git a/components/sub-agents-panel.tsx b/components/sub-agents-panel.tsx
deleted file mode 100644
index 4e644e0..0000000
--- a/components/sub-agents-panel.tsx
+++ /dev/null
@@ -1,108 +0,0 @@
-"use client";
-
-import { BotIcon, PenToolIcon, PlayIcon, SearchIcon } from "lucide-react";
-import type { JobKind, JobRecord } from "@/src/core";
-import { useTreePanelMode } from "@/components/tree-panel";
-
-/**
- * The sub-agents sidebar section (vision §2.5 live observability): what the
- * teacher's background fleet is doing RIGHT NOW in this session — one card
- * per running sub-agent with its live activity line (current tool + args)
- * and elapsed time, fed by the central jobs poll.
- *
- * Renders nothing when the fleet is idle (zero clutter); finished jobs
- * vanish from the list — their artifacts live in the transcript. Sits at
- * the top of the right sidebar, above the plan-tree panel.
- */
-
-const KIND_META: Record = {
- research: { label: "Researcher", Icon: SearchIcon },
- demo: { label: "Demo builder", Icon: PlayIcon },
- visual: { label: "Figure maker", Icon: PenToolIcon },
-};
-
-/** The collapsed fleet: a quiet strip on the sidebar rail — bot icon +
- * running count, exactly like the plan's node-count rail below it. Click
- * expands the sidebar back to the full fleet list. */
-function SubAgentsRail({ count, onExpand }: { count: number; onExpand: () => void }) {
- return (
-
-
-
- {count} running
-
-
- );
-}
-
-export function SubAgentsPanel({ jobs }: { jobs: JobRecord[] }) {
- const { mode, go } = useTreePanelMode();
- const running = jobs.filter((j) => j.status === "running");
- if (running.length === 0) return null;
- if (mode === "rail")
- return go("list")} />;
- return (
-
- );
-}
-
-function elapsedOf(job: JobRecord): string {
- if (!job.createdAt) return "";
- const seconds = Math.max(0, Math.round((Date.now() - Date.parse(job.createdAt)) / 1000));
- return seconds < 60 ? `${seconds}s` : `${Math.floor(seconds / 60)}m ${seconds % 60}s`;
-}
diff --git a/components/tree-panel.tsx b/components/tree-panel.tsx
deleted file mode 100644
index 1de4af3..0000000
--- a/components/tree-panel.tsx
+++ /dev/null
@@ -1,877 +0,0 @@
-"use client";
-
-import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
-import {
- CheckIcon,
- ChevronsRightIcon,
- ListTreeIcon,
- MaximizeIcon,
- MinusIcon,
- NetworkIcon,
- PlusIcon,
-} from "lucide-react";
-import { cn } from "@/lib/utils";
-import { planNodeStatus, type PlanNode, type PlanNodeStatus, type PlanTree } from "@/src/core";
-
-/**
-* The persistent plan-tree panel (vision §2 "Persistent tree view", W7).
-*
-* A collapsible column on the right side of the session: the whole tree, at
-* all times, with per-node status (done / current / next / upcoming) derived
-* from the SAME object the teacher edits — no separate state channel. The
-* data source is the transcript itself: every plan_* tool returns the full
-* updated tree in its output, so the panel scans backward for the LATEST
-* output-available plan part and renders its tree. Live during streaming:
-* set_current / mark_done outputs flip the panel mid-session.
-*
-* The panel and the agent's tools share one object with two faces (agent
-* edits it, UI renders it) — the phase seam in the transcript
-* (PhaseDivider, message-level) marks the transition; THIS panel is the
-* surface for every plan_* part (they render nothing inline, by design).
-*
-* Three modes, one persisted preference: the LIST (nested — the default,
-* and the always-visible "collapsed" view), the GRAPH (expanded: a
-* hand-built mermaid-style diagram — full styling control, no mermaid
-* renderer — with drag-pan + wheel-zoom whose FLOOR is fit-to-panel), and
-* the RAIL (thin strip). Quiet register throughout (matches the phase
-* dividers): hairline borders, muted text, one highlighted node for the
-* current position. Hidden below `xl` (CSS-only).
-*/
-
-/** localStorage: the mode persists as "lh:tree-panel-mode"
- * ("rail" | "list" | "graph"); the pre-graph key
- * ("lh:tree-panel-collapsed": "1" rail / "0" list) is the fallback. */
-/** The panel width per mode — the aside AND its fixed inner layer (see
- * TreePanel: the inner layer must not squish while the aside animates). */
-const PANEL_WIDTH: Record = {
- rail: "w-10",
- list: "w-64",
- graph: "w-96",
-};
-
-const MODE_KEY = "lh:tree-panel-mode";
-const LEGACY_KEY = "lh:tree-panel-collapsed";
-
-/** The three panel modes: rail (fully collapsed) | list (default) | graph. */
-type PanelMode = "rail" | "list" | "graph";
-
-/**
-* Minimal structural slice of a UI message — anything with typed parts.
-* (Same shape-of-shapes trick as src/core/phases.ts.)
-*/
-export interface TreePanelMessage {
- parts: ReadonlyArray<{ type: string; state?: string; output?: unknown }>;
-}
-
-/**
-* The latest plan tree in the transcript: scans messages (and parts) backward
-* for the LAST `tool-plan_*` part with an output available and returns its
-* `output.tree`. A failed op ({ok:false}) still carries the current tree, so
-* it counts; a malformed/missing output falls through to the next candidate.
-* Null when no plan output exists yet (probe phase / pre-plan sessions).
-*/
-export function latestTree(
- messages: readonly TreePanelMessage[],
-): PlanTree | null {
- for (let m = messages.length - 1; m >= 0; m--) {
- const parts = messages[m]?.parts;
- if (!parts) continue;
- for (let p = parts.length - 1; p >= 0; p--) {
- const part = parts[p]!;
- if (
- !part.type.startsWith("tool-plan_") ||
- part.state !== "output-available"
- )
- continue;
- const output = part.output as { tree?: PlanTree } | undefined;
- if (output?.tree && Array.isArray(output.tree.nodes)) return output.tree;
- }
- }
- return null;
-}
-
-/** Topological layout of a tree: display order + dependency depth per node. */
-export interface TopoLayout {
- /** Nodes in topological order (prerequisites first), deterministically tie-broken by authoring order. */
- order: PlanNode[];
- /** Longest-path depth from a root — drives indentation (a DAG, not a tree: a node indents under its DEEPEST prerequisite). */
- depth: Map;
-}
-
-/** Kahn's algorithm over the tree's `requires` edges. Server ops already guarantee a DAG. */
-export function topoLayout(tree: PlanTree): TopoLayout {
- const index = new Map(tree.nodes.map((n, i) => [n.id, i] as const));
- const indegree = new Map(
- tree.nodes.map((n) => [n.id, 0] as const),
- );
- const dependents = new Map();
- for (const e of tree.edges) {
- if (!index.has(e.from) || !index.has(e.to)) continue; // defensive: dangling ids
- indegree.set(e.to, (indegree.get(e.to) ?? 0) + 1);
- const list = dependents.get(e.from);
- if (list) list.push(e.to);
- else dependents.set(e.from, [e.to]);
- }
-
- // Deterministic: among the ready nodes always emit the earliest-authored first.
- const ready = tree.nodes
- .filter((n) => (indegree.get(n.id) ?? 0) === 0)
- .map((n) => n.id);
- const order: PlanNode[] = [];
- const depth = new Map();
- const byId = new Map(tree.nodes.map((n) => [n.id, n] as const));
- while (ready.length > 0) {
- ready.sort((a, b) => (index.get(a) ?? 0) - (index.get(b) ?? 0));
- const id = ready.shift()!;
- const node = byId.get(id);
- if (node) order.push(node);
- let d = 0;
- for (const e of tree.edges) {
- if (e.to === id) d = Math.max(d, (depth.get(e.from) ?? 0) + 1);
- }
- depth.set(id, d);
- for (const t of dependents.get(id) ?? []) {
- const left = (indegree.get(t) ?? 0) - 1;
- indegree.set(t, left);
- if (left === 0) ready.push(t);
- }
- }
- // Unreachable only if the DAG invariant broke; keep every node visible regardless.
- for (const n of tree.nodes) {
- if (!depth.has(n.id)) {
- order.push(n);
- depth.set(n.id, 0);
- }
- }
- return { order, depth };
-}
-
-/**
-* The "next" node (vision §2 lists it as a distinct state): the first
-* upcoming node in topological order whose prerequisites are ALL done — the
-* head of the unlocked frontier. Null when nothing is ready (or all done).
-*/
-export function nextNodeId(
- tree: PlanTree,
- order: readonly PlanNode[],
-): string | null {
- const done = new Set(tree.doneNodeIds);
- for (const n of order) {
- if (planNodeStatus(tree, n.id) !== "upcoming") continue;
- const blocked = tree.edges.some((e) => e.to === n.id && !done.has(e.from));
- if (!blocked) return n.id;
- }
- return null;
-}
-
-// ─── panel ───────────────────────────────────────────────────────────────────
-
-/**
- * The panel mode lives in the ROOT layout, not in TreePanel. TreePanel is
- * per-page (chat sessions remount it on every navigation), so a local copy
- * would paint its default first and then "correct" to the stored mode —
- * with the animated frame, opening a session visibly opened-then-closed
- * the panel. In the root layout the mode survives navigations untouched,
- * exactly like the left sidebar's open state (SidebarProvider).
- */
-const TreePanelModeContext = createContext<{ mode: PanelMode; go: (next: PanelMode) => void }>({
- mode: "list",
- go: () => {},
-});
-
-/** The right sidebar's shared mode — every section of the sidebar (plan,
- * sub-agents) collapses and expands in lockstep through this hook. */
-export function useTreePanelMode() {
- return useContext(TreePanelModeContext);
-}
-
-/** Root-layout persistence of the panel mode (rail | list | graph). */
-export function TreePanelModeProvider({ children }: { children: React.ReactNode }) {
- // SSR default: "list" — server and client first-render agree (no
- // hydration mismatch). The stored preference applies on mount, and
- // the provider itself never remounts, so after that first correction
- // the mode is simply THERE on every session you open.
- const [mode, setMode] = useState("list");
-
- useEffect(() => {
- try {
- const stored = window.localStorage.getItem(MODE_KEY);
- if (stored === "rail" || stored === "list" || stored === "graph") {
- setMode(stored);
- } else {
- // legacy key (pre-graph): "1" = the collapsed rail
- const legacy = window.localStorage.getItem(LEGACY_KEY);
- if (legacy === "1") setMode("rail");
- }
- } catch {
- // private mode / storage disabled — the preference is simply not persisted
- }
- }, []);
-
- const go = useCallback((next: PanelMode) => {
- setMode(next);
- try {
- window.localStorage.setItem(MODE_KEY, next);
- } catch {
- // see above
- }
- }, []);
-
- return {children};
-}
-
-export function TreePanel({
- messages,
-}: {
- messages: readonly TreePanelMessage[];
-}) {
- const tree = useMemo(() => latestTree(messages), [messages]);
- const { mode, go } = useTreePanelMode();
-
- // Empty state: no tree yet → the panel does not render at all. It appears
- // the moment plan_init's output lands and updates live from there.
- if (!tree || tree.nodes.length === 0) return null;
-
- // ONE animated container, exactly like the left sidebar: the aside
- // animates its width (sidebar-motion transition cascades from the
- // provider and is mount-gated there) while the inner layer keeps a
- // FIXED width and is clipped by overflow-hidden — content never
- // reflows mid-transition, so no scrollbar flash or overshoot. The
- // mode's content just swaps instantly inside the steady frame.
- return (
-
- );
-}
-
-/** The collapsed panel: a thin strip with the map icon + quiet progress. */
-export function TreePanelRail({
- doneCount,
- totalCount,
- onExpand,
-}: {
- doneCount: number;
- totalCount: number;
- onExpand: () => void;
-}) {
- return (
-