{
+ if (elementRef && typeof elementRef === "object") {
+ (elementRef as { current: HTMLDivElement | null }).current = el;
+ }
+ }}
+ />
+ ),
ResizablePanel: ({
children,
id,
@@ -177,6 +185,8 @@ describe("SessionView", () => {
it("syncs drag resizes back into the store and persists the split", () => {
render();
const entry = panels.get("inspector")!;
+ // rrp marks the separator active for the duration of a pointer drag.
+ screen.getByTestId("resize-handle").setAttribute("data-separator", "active");
// Dragging past minSize collapses the panel → store follows.
act(() => entry.onResize?.({ asPercentage: 0, inPixels: 0 }));
@@ -188,12 +198,56 @@ describe("SessionView", () => {
expect(window.localStorage.getItem("ao.inspector.split")).toBe("31.5");
});
+ // Regression: rrp v4 reports observed DOM sizes, so the flex-grow
+ // transition animating an imperative collapse fires onResize with transient
+ // non-zero sizes. Mirroring those into the store re-opened the panel
+ // mid-animation — the topbar toggle looked dead and a mount-time 0-size
+ // event flipped a fresh profile to collapsed. Only drag events (separator
+ // active) may write back.
+ it("ignores onResize churn while the separator is not being dragged", () => {
+ render();
+ const entry = panels.get("inspector")!;
+
+ // Mount-time/layout event at 0% must not collapse the store…
+ act(() => entry.onResize?.({ asPercentage: 0, inPixels: 0 }));
+ expect(useUiStore.getState().isInspectorOpen).toBe(true);
+
+ // …and a mid-collapse transition frame must not re-open or persist.
+ act(() => useUiStore.getState().toggleInspector());
+ act(() => entry.onResize?.({ asPercentage: 12.4, inPixels: 160 }));
+ expect(useUiStore.getState().isInspectorOpen).toBe(false);
+ expect(window.localStorage.getItem("ao.inspector.split")).toBeNull();
+ });
+
it("restores the persisted split width", () => {
window.localStorage.setItem("ao.inspector.split", "40");
render();
expect(panelSizes("inspector")[0]).toBe("40%");
});
+ // Regression: rrp only derives a panel's constraints one commit after it
+ // registers into a live group. Driving the imperative API in the commit
+ // where the inspector mounts (orchestrator → worker navigation; SessionView
+ // itself stays mounted) threw "Panel constraints not found for Panel
+ // inspector" and unwound the route to the error boundary. The panel must
+ // mount already in sync via defaultSize instead.
+ it("mounts the inspector in sync when navigating from an orchestrator session, without the imperative API", () => {
+ useUiStore.setState({ isInspectorOpen: false });
+ const { rerender } = render();
+ expect(screen.queryByTestId("panel-inspector")).not.toBeInTheDocument();
+
+ // Toggled open while on the orchestrator (shell topbar button) — the
+ // panel that mounts later must pick this up from defaultSize alone.
+ act(() => useUiStore.getState().toggleInspector());
+ rerender();
+
+ expect(panelSizes("inspector")[0]).toMatch(/^[1-9]\d*(\.\d+)?%$/);
+ const handle = panels.get("inspector")!.handle;
+ expect(handle.expand).not.toHaveBeenCalled();
+ expect(handle.collapse).not.toHaveBeenCalled();
+ expect(handle.resize).not.toHaveBeenCalled();
+ });
+
it("renders no inspector panel or handle for orchestrator sessions", () => {
render();
diff --git a/frontend/src/renderer/components/SessionView.tsx b/frontend/src/renderer/components/SessionView.tsx
index f3c0a54..8f19ad3 100644
--- a/frontend/src/renderer/components/SessionView.tsx
+++ b/frontend/src/renderer/components/SessionView.tsx
@@ -1,9 +1,7 @@
-import { useEffect, useRef, useState } from "react";
-import { useNavigate } from "@tanstack/react-router";
+import { useEffect, useRef } from "react";
import type { PanelImperativeHandle, PanelSize } from "react-resizable-panels";
import { CenterPane } from "./CenterPane";
import { SessionInspector } from "./SessionInspector";
-import { Topbar } from "./Topbar";
import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "./ui/resizable";
import { useUiStore } from "../stores/ui-store";
import { useShell } from "../lib/shell-context";
@@ -23,24 +21,22 @@ function initialSplitPercent(): number {
type SessionViewProps = {
sessionId: string;
- /** When entered via /projects/$projectId/sessions/... — used for the back-nav target. */
- projectId?: string;
};
-// The session detail screen: the persistent terminal + git rail. Rendered by
-// both the project-scoped and cross-project session routes. The terminal lives
-// here (not in the shell) — switching sessions only changes route params, so
-// TanStack Router keeps this component mounted and the terminal re-points its
-// mux without remounting (useTerminalSession). Leaving for the board unmounts
-// it; the server's output ring replays on return.
+// The session detail screen: the persistent terminal + git rail, under the
+// shell-owned ShellTopbar. Rendered by both the project-scoped and
+// cross-project session routes. The terminal lives here (not in the shell) —
+// switching sessions only changes route params, so TanStack Router keeps this
+// component mounted and the terminal re-points its mux without remounting
+// (useTerminalSession). Leaving for the board unmounts it; a fresh server-side
+// zellij attach repaints the pane on return.
//
// The split is shadcn's resizable (react-resizable-panels v4) with a fully
// collapsible inspector: the panel is `collapsible` and driven to 0% via the
-// imperative API from the ui-store (Topbar button / ⌘⇧B), animated by the
+// imperative API from the ui-store (topbar button / ⌘⇧B), animated by the
// flex-grow transition in styles.css. Content keeps a stable min-width inside
// the clipped panel so nothing reflows mid-animation; split width persists.
-export function SessionView({ sessionId, projectId }: SessionViewProps) {
- const navigate = useNavigate();
+export function SessionView({ sessionId }: SessionViewProps) {
const workspaceQuery = useWorkspaceQuery();
const workspaces = workspaceQuery.data ?? [];
const { theme } = useUiStore();
@@ -48,24 +44,32 @@ export function SessionView({ sessionId, projectId }: SessionViewProps) {
const toggleInspector = useUiStore((state) => state.toggleInspector);
const { daemonStatus } = useShell();
const inspectorRef = useRef(null);
+ const inspectorSeparatorRef = useRef(null);
const session = workspaces.flatMap((workspace) => workspace.sessions).find((s) => s.id === sessionId);
const isOrchestrator = session ? isOrchestratorSession(session) : false;
- const workspace =
- (session && workspaces.find((w) => w.id === session.workspaceId)) ??
- (projectId ? workspaces.find((w) => w.id === projectId) : undefined);
// Orchestrator sessions are terminal-only; only worker sessions have the rail.
const hasInspector = !isOrchestrator;
- // Frozen at mount: rrp re-registers the panel (a layout effect keyed on
- // defaultSize, among others) whenever this prop's identity changes, and the
- // imperative collapse()/expand() below can race that re-registration within
- // the same commit — rrp then throws "Panel constraints not found for Panel
+ // Computed when the inspector panel mounts and frozen while it stays
+ // mounted: rrp re-registers the panel (a layout effect keyed on defaultSize,
+ // among others) whenever this prop's identity changes, and the imperative
+ // collapse()/expand() below can race that re-registration within the same
+ // commit — rrp then throws "Panel constraints not found for Panel
// inspector", which unwinds the whole route to the router's CatchBoundary
// (the toggle button looks dead and the session view is torn down).
- // defaultSize only matters at first mount; afterwards the imperative API
- // owns the size, so it must never track live open/closed state.
- const [inspectorDefaultSize] = useState(() => (isInspectorOpen ? `${initialSplitPercent()}%` : "0%"));
+ // Re-derived per panel mount (not once per SessionView mount — navigating
+ // orchestrator → worker keeps this component mounted while the panel
+ // remounts) so a freshly mounted panel reflects the store on its own,
+ // without an imperative fix-up in the mount commit. Afterwards the
+ // imperative API owns the size, so this must never track live open state.
+ const inspectorDefaultSizeRef = useRef(null);
+ if (!hasInspector) {
+ inspectorDefaultSizeRef.current = null;
+ } else if (inspectorDefaultSizeRef.current === null) {
+ inspectorDefaultSizeRef.current = isInspectorOpen ? `${initialSplitPercent()}%` : "0%";
+ }
+ const inspectorDefaultSize = inspectorDefaultSizeRef.current ?? "0%";
useEffect(() => {
if (!hasInspector) return;
@@ -79,8 +83,14 @@ export function SessionView({ sessionId, projectId }: SessionViewProps) {
return () => window.removeEventListener("keydown", handleKeyDown);
}, [hasInspector, toggleInspector]);
- // Drive the collapsible panel from the store so the Topbar button, ⌘⇧B, and
- // drag-to-collapse all stay in sync.
+ // Drive the collapsible panel from the store so the topbar button, ⌘⇧B, and
+ // drag-to-collapse all stay in sync. hasInspector must NOT be a dep: when
+ // the inspector panel mounts into the already-live group (orchestrator →
+ // worker navigation), rrp only derives the new panel's constraints in the
+ // next commit, so an expand()/collapse() in the mount commit throws "Panel
+ // constraints not found for Panel inspector" and unwinds the route. The
+ // panel mounts in sync via inspectorDefaultSize above; only later toggles
+ // need the imperative API, by which point registration has settled.
useEffect(() => {
const panel = inspectorRef.current;
if (!panel) return;
@@ -92,11 +102,22 @@ export function SessionView({ sessionId, projectId }: SessionViewProps) {
} else {
panel.collapse();
}
- }, [hasInspector, isInspectorOpen]);
+ }, [isInspectorOpen]);
// Persist drags and mirror collapse state (dragging past minSize collapses)
// back into the store. Read the store imperatively to avoid a stale closure.
+ // Gated on an actively dragged separator: rrp v4 derives sizes from the
+ // observed DOM layout, so the flex-grow transition that animates
+ // expand()/collapse() (styles.css) fires onResize with transient
+ // mid-animation sizes too. Writing those back turned the imperative
+ // collapse into a feedback loop — a mid-collapse size read as "dragged
+ // back open", re-toggled the store, and the panel bounced back (the
+ // topbar button looked dead). rrp marks the separator
+ // data-separator="active" only during a pointer drag — the same hook the
+ // transition-suppressing CSS keys on, so drag writes are never transition
+ // frames.
const handleInspectorResize = (size: PanelSize) => {
+ if (inspectorSeparatorRef.current?.getAttribute("data-separator") !== "active") return;
const open = useUiStore.getState().isInspectorOpen;
if (size.asPercentage > 0) {
window.localStorage?.setItem(inspectorSplitStorageKey, String(size.asPercentage));
@@ -116,16 +137,6 @@ export function SessionView({ sessionId, projectId }: SessionViewProps) {
return (
-
- workspace
- ? void navigate({ to: "/projects/$projectId", params: { projectId: workspace.id } })
- : void navigate({ to: "/" })
- }
- projectLabel={workspace?.name}
- session={session}
- view={isOrchestrator ? "orchestrator" : "session"}
- />
{/* react-resizable-panels v4: bare numbers are PIXELS; percentages must
be strings. Numeric sizes here once clamped the inspector to 45px. */}
@@ -134,7 +145,10 @@ export function SessionView({ sessionId, projectId }: SessionViewProps) {
{hasInspector ? (
<>
-
+ w.id === projectId) : all;
const sessions = workspaces.flatMap((w) => workerSessions(w.sessions));
- const projectLabel = projectId ? (workspaces[0]?.name ?? projectId) : "agent-orchestrator";
const byZone = new Map();
for (const session of sessions) {
@@ -84,6 +84,9 @@ export function SessionsBoard({ projectId }: SessionsBoardProps) {
(byZone.get(zone) ?? byZone.set(zone, []).get(zone)!).push(session);
}
const done = byZone.get("done") ?? [];
+ // Collapsed by default, like agent-orchestrator's done-bar: finished and
+ // killed sessions cost one quiet line under the board until expanded.
+ const [doneExpanded, setDoneExpanded] = useState(false);
const openSession = (session: WorkspaceSession) =>
void navigate({
@@ -93,7 +96,6 @@ export function SessionsBoard({ projectId }: SessionsBoardProps) {
return (
+ {/* agent-orchestrator's done-bar (Dashboard.tsx + globals.css):
+ a full-width chevron + label + count toggle row. min-h matches
+ the sidebar footer (7px pad ×2 + 37px Settings button) so this
+ border-t aligns with the sidebar's footer border. The button is
+ 37px (not the 35.5px its text-[13px] implies) because the
+ unlayered `button { font: inherit }` in styles.css outranks
+ Tailwind's layered text utilities, leaving it at 14px/21px. */}
+
+ {doneExpanded && (
+
+ {done.map((s) => (
+
+ ))}
+
+ )}
)}
diff --git a/frontend/src/renderer/components/ShellTopbar.tsx b/frontend/src/renderer/components/ShellTopbar.tsx
new file mode 100644
index 0000000..c1e378e
--- /dev/null
+++ b/frontend/src/renderer/components/ShellTopbar.tsx
@@ -0,0 +1,215 @@
+import { useQueryClient } from "@tanstack/react-query";
+import { useNavigate, useParams } from "@tanstack/react-router";
+import { GitBranch, LayoutGrid, PanelRightClose, PanelRightOpen, Waypoints } from "lucide-react";
+import { useState } from "react";
+import {
+ findProjectOrchestrator,
+ isOrchestratorSession,
+ workerDisplayStatus,
+ type WorkerDisplayStatus,
+ type WorkspaceSession,
+} from "../types/workspace";
+import { useWorkspaceQuery, workspaceQueryKey } from "../hooks/useWorkspaceQuery";
+import { spawnOrchestrator } from "../lib/spawn-orchestrator";
+import { useUiStore } from "../stores/ui-store";
+import { cn } from "../lib/utils";
+
+const isMac = typeof navigator !== "undefined" && /Mac|iPod|iPhone|iPad/.test(navigator.userAgent);
+const dragStyle = isMac ? ({ WebkitAppRegion: "drag" } as React.CSSProperties) : undefined;
+const noDragStyle = isMac ? ({ WebkitAppRegion: "no-drag" } as React.CSSProperties) : undefined;
+
+// Session status → pill tone, mirroring agent-orchestrator's StatusBadge
+// (working=orange & breathing, input=amber, fail=red, ready=green, done=neutral).
+// Tones are theme vars so the pill tracks the light/dark status palettes.
+const STATUS_PILL: Record = {
+ working: { label: "Working", tone: "var(--orange)", breathe: true },
+ needs_you: { label: "Needs input", tone: "var(--amber)", breathe: false },
+ ci_failed: { label: "CI failed", tone: "var(--red)", breathe: false },
+ mergeable: { label: "Ready", tone: "var(--green)", breathe: false },
+ done: { label: "Done", tone: "var(--fg-muted)", breathe: false },
+};
+
+// The one app topbar (.dashboard-app-header), rendered by the shell layout
+// across the full window width — above both the sidebar and the route outlet —
+// so the crumb and actions sit at identical offsets on every screen and the
+// macOS traffic lights + TitlebarNav cluster live in its left inset
+// (.is-under-titlebar-nav pads past them). The
+// variant is derived from the route, not props: a sessionId in the URL swaps
+// the lead to the session identity (orchestrator crumb + mode badge, or worker
+// branch + status pill) and the actions to Kanban/inspector controls;
+// otherwise it's the dashboard crumb plus the Orchestrator launcher when a
+// project is in scope. Merges the old DashboardTopbar/Topbar pair —
+// agent-orchestrator keeps those as two components aligned only by CSS.
+export function ShellTopbar() {
+ const navigate = useNavigate();
+ const queryClient = useQueryClient();
+ const params = useParams({ strict: false }) as { projectId?: string; sessionId?: string };
+ const isInspectorOpen = useUiStore((state) => state.isInspectorOpen);
+ const toggleInspector = useUiStore((state) => state.toggleInspector);
+ const [isSpawning, setIsSpawning] = useState(false);
+ const all = useWorkspaceQuery().data ?? [];
+
+ const session = params.sessionId
+ ? all.flatMap((workspace) => workspace.sessions).find((s) => s.id === params.sessionId)
+ : undefined;
+ const isSessionRoute = Boolean(params.sessionId);
+ const isOrchestrator = session ? isOrchestratorSession(session) : false;
+ // Project in scope: the session's workspace wins over the route param so the
+ // cross-project /sessions/$sessionId route still resolves a crumb. A
+ // projectId that no longer resolves (stale route after the project was
+ // removed, or data still loading) shows an empty crumb — never the raw
+ // route slug. "agent-orchestrator" is the root-board crumb only.
+ const projectId = session?.workspaceId ?? params.projectId;
+ const project = projectId ? all.find((workspace) => workspace.id === projectId) : undefined;
+ const projectLabel = project?.name ?? session?.workspaceName ?? (projectId ? "" : "agent-orchestrator");
+ const orchestrator = projectId ? findProjectOrchestrator(all, projectId) : undefined;
+
+ const openBoard = () =>
+ projectId ? void navigate({ to: "/projects/$projectId", params: { projectId } }) : void navigate({ to: "/" });
+
+ const openOrchestrator = async () => {
+ if (!projectId) return;
+ if (orchestrator) {
+ void navigate({
+ to: "/projects/$projectId/sessions/$sessionId",
+ params: { projectId, sessionId: orchestrator.id },
+ });
+ return;
+ }
+ setIsSpawning(true);
+ try {
+ const sessionId = await spawnOrchestrator(projectId);
+ await queryClient.invalidateQueries({ queryKey: workspaceQueryKey });
+ void navigate({
+ to: "/projects/$projectId/sessions/$sessionId",
+ params: { projectId, sessionId },
+ });
+ } catch (error) {
+ console.error("Failed to spawn orchestrator:", error);
+ } finally {
+ setIsSpawning(false);
+ }
+ };
+
+ return (
+
+
+
+ );
+}
+
+// StatusBadge --pill: tinted bordered pill (inset 25%-tone hairline + 7%-tone
+// fill) with a 6px dot that breathes while the agent is working.
+function SessionStatusPill({ session }: { session: WorkspaceSession }) {
+ const { label, tone, breathe } = STATUS_PILL[workerDisplayStatus(session)];
+ return (
+
+
+ {label}
+
+ );
+}
diff --git a/frontend/src/renderer/components/Sidebar.tsx b/frontend/src/renderer/components/Sidebar.tsx
index 80137a0..45c645f 100644
--- a/frontend/src/renderer/components/Sidebar.tsx
+++ b/frontend/src/renderer/components/Sidebar.tsx
@@ -1,7 +1,13 @@
import { useNavigate, useParams, useRouterState } from "@tanstack/react-router";
import { ChevronRight, GitPullRequest, Moon, Plus, Search, Settings, Sun, Waypoints } from "lucide-react";
import { useState } from "react";
-import { attentionZone, type WorkspaceSession, type WorkspaceSummary, workerSessions } from "../types/workspace";
+import {
+ attentionZone,
+ sessionIsActive,
+ type WorkspaceSession,
+ type WorkspaceSummary,
+ workerSessions,
+} from "../types/workspace";
import { aoBridge } from "../lib/bridge";
import { useEventsConnection } from "../hooks/useEventsConnection";
import { useResizable } from "../hooks/useResizable";
@@ -35,12 +41,11 @@ import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip";
import { cn } from "../lib/utils";
import { useUiStore } from "../stores/ui-store";
-// macOS hiddenInset traffic lights (x:14, y:14) occupy the sidebar's top-left;
-// the sidebar gives them a real 40px titlebar strip (draggable; the fixed
-// TitlebarNav overlay sits beside the lights), and the collapsed icon rail
-// keeps a matching 40px inset. Windows/Linux keep the verbatim 14px padding.
+// The macOS hiddenInset traffic lights and the fixed TitlebarNav overlay live
+// in the full-width topbar's left inset (_shell renders the bar above the
+// sidebar row); the sidebar itself starts below the 56px header, so its border
+// never crosses the titlebar strip.
const isMac = typeof navigator !== "undefined" && /Mac|iPod|iPhone|iPad/.test(navigator.userAgent);
-const dragStyle = isMac ? ({ WebkitAppRegion: "drag" } as React.CSSProperties) : undefined;
const noDragStyle = isMac ? ({ WebkitAppRegion: "no-drag" } as React.CSSProperties) : undefined;
type SidebarProps = {
@@ -63,7 +68,6 @@ function useSelection() {
activeSessionId: params.sessionId,
goHome: () => void navigate({ to: "/" }),
goPrs: () => void navigate({ to: "/prs" }),
- goReview: () => void navigate({ to: "/review" }),
goSettings: (projectId: string) => void navigate({ to: "/projects/$projectId/settings", params: { projectId } }),
goProject: (projectId: string) => void navigate({ to: "/projects/$projectId", params: { projectId } }),
goSession: (projectId: string, sessionId: string) =>
@@ -119,13 +123,11 @@ export function Sidebar({ daemonStatus, workspaceError, workspaces, onCreateProj
});
return (
-
-
- {/* Titlebar strip: a draggable 40px inset under the traffic lights and
- the fixed TitlebarNav overlay (rendered once by the shell), kept in
- both sidebar states. */}
- {isMac && }
-
+ // The container is fixed-positioned by the shadcn primitive; offset it
+ // below the 56px shell topbar so the bar runs edge-to-edge above it
+ // (same override as shadcn's header-above-sidebar block).
+
+
{/* Brand (project-sidebar__brand); in the icon rail it becomes the old
36px board button wrapping the 22px accent mark. */}
@@ -241,10 +243,6 @@ export function Sidebar({ daemonStatus, workspaceError, workspaces, onCreateProj
Pull requests
-
-
- Reviews
-
Search
@@ -316,6 +314,9 @@ function ProjectItem({
onNewWorker: () => void;
}) {
const projectActive = selection.activeProjectId === workspace.id && !selection.activeSessionId;
+ // Live workers only: merged/terminated sessions leave the sidebar and stay
+ // reachable through the board's Done / Terminated bar (SessionsBoard).
+ const sessions = workerSessions(workspace.sessions).filter(sessionIsActive);
const onProjectClick = () => {
if (!expanded) {
@@ -359,7 +360,7 @@ function ProjectItem({
{workspace.name.charAt(0).toUpperCase()}{workspace.name}
- {workerSessions(workspace.sessions).length}
+ {sessions.length}
{/* project-sidebar__proj-actions — reveal over the count slot on hover */}
@@ -369,7 +370,12 @@ function ProjectItem({
showOnHover
aria-label={`New worker in ${workspace.name}`}
onClick={onNewWorker}
- className="right-1.5 h-[22px] w-[22px] rounded-[5px] text-passive transition-opacity hover:bg-interactive-active hover:text-foreground peer-data-[size=default]/menu-button:top-1"
+ // No top override: the base's peer-data-[size=default]:top-1.5
+ // (6px) centers this 22px action in the 34px row. AO's 50%/
+ // translateY(-50%) can't be cloned here — the absolute context
+ // is the whole menu li including the expanded sessions list,
+ // so a percentage top centers on the group, not the row.
+ className="right-1.5 h-[22px] w-[22px] rounded-[5px] text-passive transition-opacity hover:bg-interactive-active hover:text-foreground"
>
@@ -377,10 +383,12 @@ function ProjectItem({
New worker in {workspace.name}
- {/* project-sidebar__sessions */}
- {expanded && workerSessions(workspace.sessions).length > 0 && (
-
- {workerSessions(workspace.sessions).map((session) => {
+ {/* project-sidebar__sessions. Divergence from AO (user decision
+ 2026-06-12): no left indent or tree guide line — every sidebar row
+ (project or worker) spans the same full width. */}
+ {expanded && sessions.length > 0 && (
+
+ {sessions.map((session) => {
const active = selection.activeSessionId === session.id;
return (
diff --git a/frontend/src/renderer/components/TitlebarNav.tsx b/frontend/src/renderer/components/TitlebarNav.tsx
index 7614d6b..da9070f 100644
--- a/frontend/src/renderer/components/TitlebarNav.tsx
+++ b/frontend/src/renderer/components/TitlebarNav.tsx
@@ -1,5 +1,6 @@
-import { useCanGoBack, useRouter, useRouterState } from "@tanstack/react-router";
+import { useCanGoBack, useRouter } from "@tanstack/react-router";
import { ArrowLeft, ArrowRight, PanelLeft } from "lucide-react";
+import { useEffect, useState } from "react";
import { useUiStore } from "../stores/ui-store";
const isMac = typeof navigator !== "undefined" && /Mac|iPod|iPhone|iPad/.test(navigator.userAgent);
@@ -9,18 +10,37 @@ const noDragStyle = isMac ? ({ WebkitAppRegion: "no-drag" } as React.CSSProperti
// the traffic lights, VS Code-style. Approved divergence from the web
// reference, which has no window chrome (DESIGN.md banner, 2026-06-10).
// Rendered once by the shell as a fixed overlay (.titlebar-nav in styles.css)
-// so the buttons occupy the exact same spot whether the sidebar is expanded
-// or collapsed; the collapsed-rail topbars pad past it (.is-under-titlebar-nav).
+// over the full-width topbar's left inset, so the buttons occupy the exact
+// same spot whether the sidebar is expanded or collapsed; the topbar starts
+// its content past the cluster (.is-under-titlebar-nav).
+// The installed router has no useCanGoForward, and deriving one as
+// `__TSR_index < history.length - 1` (the upstream hook's approach) is wrong
+// here: window.history.length also counts entries the router never created —
+// the WebContents' initial blank entry, pre-router loads — so the tip of the
+// stack still reads as "forward available" and the arrow no-ops. Instead,
+// track the highest router index reachable on the live stack: a PUSH discards
+// the forward entries (the new index is the tip); BACK/FORWARD/GO only move
+// within it. After a mid-stack reload the tip resets to the current entry —
+// forward greys out rather than dangle on entries we can no longer see.
+function useCanGoForward(): boolean {
+ const router = useRouter();
+ const [canGoForward, setCanGoForward] = useState(false);
+ useEffect(() => {
+ let tip = router.history.location.state.__TSR_index;
+ return router.history.subscribe(({ location, action }) => {
+ const index = location.state.__TSR_index;
+ tip = action.type === "PUSH" ? index : Math.max(tip, index);
+ setCanGoForward(index < tip);
+ });
+ }, [router]);
+ return canGoForward;
+}
+
export function TitlebarNav() {
const { isSidebarOpen, toggleSidebar } = useUiStore();
const router = useRouter();
const canGoBack = useCanGoBack();
- // No useCanGoForward in the installed router; derive it from the history
- // index the same way useCanGoBack does (any back/forward/push re-renders
- // via the location store, so history.length is read fresh).
- const canGoForward = useRouterState({
- select: (state) => state.location.state.__TSR_index < router.history.length - 1,
- });
+ const canGoForward = useCanGoForward();
if (!isMac) return null;
diff --git a/frontend/src/renderer/components/Topbar.tsx b/frontend/src/renderer/components/Topbar.tsx
deleted file mode 100644
index 60aec71..0000000
--- a/frontend/src/renderer/components/Topbar.tsx
+++ /dev/null
@@ -1,124 +0,0 @@
-import { GitBranch, LayoutGrid, PanelRightClose, PanelRightOpen, Waypoints } from "lucide-react";
-import { type WorkbenchView, useUiStore } from "../stores/ui-store";
-import type { WorkerDisplayStatus, WorkspaceSession } from "../types/workspace";
-import { workerDisplayStatus } from "../types/workspace";
-import { cn } from "../lib/utils";
-
-// Session status → pill tone, mirroring agent-orchestrator's StatusBadge
-// (working=orange & breathing, input=amber, fail=red, ready=green, done=neutral).
-// Tones are theme vars so the pill tracks the light/dark status palettes.
-const STATUS_PILL: Record = {
- working: { label: "Working", tone: "var(--orange)", breathe: true },
- needs_you: { label: "Needs input", tone: "var(--amber)", breathe: false },
- ci_failed: { label: "CI failed", tone: "var(--red)", breathe: false },
- mergeable: { label: "Ready", tone: "var(--green)", breathe: false },
- done: { label: "Done", tone: "var(--fg-muted)", breathe: false },
-};
-
-const isMac = typeof navigator !== "undefined" && /Mac|iPod|iPhone|iPad/.test(navigator.userAgent);
-const dragStyle = isMac ? ({ WebkitAppRegion: "drag" } as React.CSSProperties) : undefined;
-const noDragStyle = isMac ? ({ WebkitAppRegion: "no-drag" } as React.CSSProperties) : undefined;
-
-type TopbarProps = {
- view: WorkbenchView;
- session?: WorkspaceSession;
- /** Project crumb for orchestrator sessions (matches AO topbar-project-line). */
- projectLabel?: string;
- /** Back-to-board navigation for the Kanban / Open Kanban button. */
- onOpenBoard?: () => void;
-};
-
-export function Topbar({ view, session, projectLabel, onOpenBoard }: TopbarProps) {
- const isSidebarOpen = useUiStore((state) => state.isSidebarOpen);
- const isInspectorOpen = useUiStore((state) => state.isInspectorOpen);
- const toggleInspector = useUiStore((state) => state.toggleInspector);
-
- return (
-
-
-
- {/* Inspector collapse (worker sessions only — orchestrators have no rail). */}
- {view === "session" && (
-
- )}
-
-
- );
-}
-
-// StatusBadge --pill: tinted bordered pill (inset 25%-tone hairline + 7%-tone
-// fill) with a 6px dot that breathes while the agent is working.
-function SessionStatusPill({ session }: { session: WorkspaceSession }) {
- const { label, tone, breathe } = STATUS_PILL[workerDisplayStatus(session)];
- return (
-
-
- {label}
-
- );
-}
diff --git a/frontend/src/renderer/routeTree.gen.ts b/frontend/src/renderer/routeTree.gen.ts
index 0ba366e..ffe4cdc 100644
--- a/frontend/src/renderer/routeTree.gen.ts
+++ b/frontend/src/renderer/routeTree.gen.ts
@@ -11,8 +11,6 @@
import { Route as rootRouteImport } from "./routes/__root";
import { Route as ShellRouteImport } from "./routes/_shell";
import { Route as ShellIndexRouteImport } from "./routes/_shell.index";
-import { Route as ShellReviewsRouteImport } from "./routes/_shell.reviews";
-import { Route as ShellReviewRouteImport } from "./routes/_shell.review";
import { Route as ShellPrsRouteImport } from "./routes/_shell.prs";
import { Route as ShellSessionsSessionIdRouteImport } from "./routes/_shell.sessions.$sessionId";
import { Route as ShellProjectsProjectIdRouteImport } from "./routes/_shell.projects.$projectId";
@@ -28,16 +26,6 @@ const ShellIndexRoute = ShellIndexRouteImport.update({
path: "/",
getParentRoute: () => ShellRoute,
} as any);
-const ShellReviewsRoute = ShellReviewsRouteImport.update({
- id: "/reviews",
- path: "/reviews",
- getParentRoute: () => ShellRoute,
-} as any);
-const ShellReviewRoute = ShellReviewRouteImport.update({
- id: "/review",
- path: "/review",
- getParentRoute: () => ShellRoute,
-} as any);
const ShellPrsRoute = ShellPrsRouteImport.update({
id: "/prs",
path: "/prs",
@@ -67,8 +55,6 @@ const ShellProjectsProjectIdSessionsSessionIdRoute = ShellProjectsProjectIdSessi
export interface FileRoutesByFullPath {
"/": typeof ShellIndexRoute;
"/prs": typeof ShellPrsRoute;
- "/review": typeof ShellReviewRoute;
- "/reviews": typeof ShellReviewsRoute;
"/projects/$projectId": typeof ShellProjectsProjectIdRoute;
"/sessions/$sessionId": typeof ShellSessionsSessionIdRoute;
"/projects/$projectId/settings": typeof ShellProjectsProjectIdSettingsRoute;
@@ -76,8 +62,6 @@ export interface FileRoutesByFullPath {
}
export interface FileRoutesByTo {
"/prs": typeof ShellPrsRoute;
- "/review": typeof ShellReviewRoute;
- "/reviews": typeof ShellReviewsRoute;
"/": typeof ShellIndexRoute;
"/projects/$projectId": typeof ShellProjectsProjectIdRoute;
"/sessions/$sessionId": typeof ShellSessionsSessionIdRoute;
@@ -88,8 +72,6 @@ export interface FileRoutesById {
__root__: typeof rootRouteImport;
"/_shell": typeof ShellRouteWithChildren;
"/_shell/prs": typeof ShellPrsRoute;
- "/_shell/review": typeof ShellReviewRoute;
- "/_shell/reviews": typeof ShellReviewsRoute;
"/_shell/": typeof ShellIndexRoute;
"/_shell/projects/$projectId": typeof ShellProjectsProjectIdRoute;
"/_shell/sessions/$sessionId": typeof ShellSessionsSessionIdRoute;
@@ -101,8 +83,6 @@ export interface FileRouteTypes {
fullPaths:
| "/"
| "/prs"
- | "/review"
- | "/reviews"
| "/projects/$projectId"
| "/sessions/$sessionId"
| "/projects/$projectId/settings"
@@ -110,8 +90,6 @@ export interface FileRouteTypes {
fileRoutesByTo: FileRoutesByTo;
to:
| "/prs"
- | "/review"
- | "/reviews"
| "/"
| "/projects/$projectId"
| "/sessions/$sessionId"
@@ -121,8 +99,6 @@ export interface FileRouteTypes {
| "__root__"
| "/_shell"
| "/_shell/prs"
- | "/_shell/review"
- | "/_shell/reviews"
| "/_shell/"
| "/_shell/projects/$projectId"
| "/_shell/sessions/$sessionId"
@@ -150,20 +126,6 @@ declare module "@tanstack/react-router" {
preLoaderRoute: typeof ShellIndexRouteImport;
parentRoute: typeof ShellRoute;
};
- "/_shell/reviews": {
- id: "/_shell/reviews";
- path: "/reviews";
- fullPath: "/reviews";
- preLoaderRoute: typeof ShellReviewsRouteImport;
- parentRoute: typeof ShellRoute;
- };
- "/_shell/review": {
- id: "/_shell/review";
- path: "/review";
- fullPath: "/review";
- preLoaderRoute: typeof ShellReviewRouteImport;
- parentRoute: typeof ShellRoute;
- };
"/_shell/prs": {
id: "/_shell/prs";
path: "/prs";
@@ -204,8 +166,6 @@ declare module "@tanstack/react-router" {
interface ShellRouteChildren {
ShellPrsRoute: typeof ShellPrsRoute;
- ShellReviewRoute: typeof ShellReviewRoute;
- ShellReviewsRoute: typeof ShellReviewsRoute;
ShellIndexRoute: typeof ShellIndexRoute;
ShellProjectsProjectIdRoute: typeof ShellProjectsProjectIdRoute;
ShellSessionsSessionIdRoute: typeof ShellSessionsSessionIdRoute;
@@ -215,8 +175,6 @@ interface ShellRouteChildren {
const ShellRouteChildren: ShellRouteChildren = {
ShellPrsRoute: ShellPrsRoute,
- ShellReviewRoute: ShellReviewRoute,
- ShellReviewsRoute: ShellReviewsRoute,
ShellIndexRoute: ShellIndexRoute,
ShellProjectsProjectIdRoute: ShellProjectsProjectIdRoute,
ShellSessionsSessionIdRoute: ShellSessionsSessionIdRoute,
diff --git a/frontend/src/renderer/routes/_shell.projects.$projectId_.sessions.$sessionId.tsx b/frontend/src/renderer/routes/_shell.projects.$projectId_.sessions.$sessionId.tsx
index 0a2b226..894f510 100644
--- a/frontend/src/renderer/routes/_shell.projects.$projectId_.sessions.$sessionId.tsx
+++ b/frontend/src/renderer/routes/_shell.projects.$projectId_.sessions.$sessionId.tsx
@@ -6,6 +6,6 @@ export const Route = createFileRoute("/_shell/projects/$projectId_/sessions/$ses
});
function ProjectSessionRoute() {
- const { projectId, sessionId } = Route.useParams();
- return ;
+ const { sessionId } = Route.useParams();
+ return ;
}
diff --git a/frontend/src/renderer/routes/_shell.review.tsx b/frontend/src/renderer/routes/_shell.review.tsx
deleted file mode 100644
index e1583bd..0000000
--- a/frontend/src/renderer/routes/_shell.review.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import { createFileRoute } from "@tanstack/react-router";
-import { ReviewDashboard } from "../components/ReviewDashboard";
-
-export const Route = createFileRoute("/_shell/review")({
- component: ReviewDashboard,
-});
diff --git a/frontend/src/renderer/routes/_shell.reviews.tsx b/frontend/src/renderer/routes/_shell.reviews.tsx
deleted file mode 100644
index ecb1de8..0000000
--- a/frontend/src/renderer/routes/_shell.reviews.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import { createFileRoute, redirect } from "@tanstack/react-router";
-
-// /reviews is an alias for /review (matches agent-orchestrator).
-export const Route = createFileRoute("/_shell/reviews")({
- beforeLoad: () => {
- throw redirect({ to: "/review" });
- },
-});
diff --git a/frontend/src/renderer/routes/_shell.tsx b/frontend/src/renderer/routes/_shell.tsx
index 9c7f012..343cfd2 100644
--- a/frontend/src/renderer/routes/_shell.tsx
+++ b/frontend/src/renderer/routes/_shell.tsx
@@ -1,6 +1,7 @@
import { createFileRoute, Outlet, useNavigate } from "@tanstack/react-router";
import { useQueryClient } from "@tanstack/react-query";
import { useCallback, useEffect, useState } from "react";
+import { ShellTopbar } from "../components/ShellTopbar";
import { Sidebar } from "../components/Sidebar";
import { SidebarProvider } from "../components/ui/sidebar";
import { SpawnWorkerModal } from "../components/SpawnWorkerModal";
@@ -151,37 +152,48 @@ function ShellLayout() {
return (
- {/* Controlled by the ui-store so TitlebarNav / Topbar toggles (which call
- the store directly) stay in sync. --sidebar-width chains to the
- drag-resizable --ao-sidebar-w set on :root by useResizable. */}
- open !== isSidebarOpen && toggleSidebar()}
- open={isSidebarOpen}
- style={
- { "--sidebar-width": "var(--ao-sidebar-w, 240px)", "--sidebar-width-icon": "48px" } as React.CSSProperties
- }
- >
-
-
-
-
- {/* Fixed macOS titlebar cluster beside the traffic lights — rendered
- once here so the toggle/history buttons never move when the
- sidebar collapses or expands. MUST come after the sidebar/topbars
- in the DOM: Electron builds the window-drag region in document
- order (drag rects add, no-drag rects subtract), so the cluster's
- no-drag holes only survive if they're processed after the drag
- strips they overlap. Rendered first, real clicks get swallowed by
- window-drag even though DOM hit-testing looks correct. */}
-
-
+ {/* The topbar spans the full window width above the sidebar row (the
+ macOS traffic lights + TitlebarNav cluster sit in its left inset),
+ and the sidebar hangs below it — so the sidebar border stops at the
+ header instead of cutting through the titlebar strip. The bar lives
+ in the layout, not the screens, so the crumb and actions never shift
+ when the outlet content swaps. */}
+
+
+ {/* Controlled by the ui-store so TitlebarNav / Topbar toggles (which
+ call the store directly) stay in sync. --sidebar-width chains to
+ the drag-resizable --ao-sidebar-w set on :root by useResizable. */}
+ open !== isSidebarOpen && toggleSidebar()}
+ open={isSidebarOpen}
+ style={
+ { "--sidebar-width": "var(--ao-sidebar-w, 240px)", "--sidebar-width-icon": "48px" } as React.CSSProperties
+ }
+ >
+
+
+
+
+
+
+ {/* Fixed macOS titlebar cluster beside the traffic lights — rendered
+ once here so the toggle/history buttons never move when the
+ sidebar collapses or expands. MUST come after the topbar in the
+ DOM: Electron builds the window-drag region in document order
+ (drag rects add, no-drag rects subtract), so the cluster's
+ no-drag holes only survive if they're processed after the drag
+ strips they overlap. Rendered first, real clicks get swallowed
+ by window-drag even though DOM hit-testing looks correct. */}
+
+
+
): WorkspaceSession {
@@ -77,6 +79,37 @@ describe("sessionIsActive", () => {
});
});
+describe("findProjectOrchestrator", () => {
+ function workspaceWith(sessions: WorkspaceSession[]): WorkspaceSummary {
+ return { id: "skills", name: "skills", path: "/tmp/skills", sessions };
+ }
+
+ it("skips a terminated orchestrator that precedes the live one", () => {
+ // Regression: the daemon lists sessions by spawn number, so a dead
+ // orchestrator (zellij session deleted) sorts before its live successor.
+ // Picking it sent the Orchestrator button to an instant "[process exited]".
+ const dead = sessionWith({ id: "skills-4", kind: "orchestrator", status: "terminated" });
+ const live = sessionWith({ id: "skills-5", kind: "orchestrator", status: "needs_input" });
+ const worker = sessionWith({ id: "skills-6", kind: "worker", status: "working" });
+ expect(findProjectOrchestrator([workspaceWith([dead, live, worker])], "skills")).toBe(live);
+ });
+
+ it("returns undefined when every orchestrator is terminated", () => {
+ const dead = sessionWith({ id: "skills-4", kind: "orchestrator", status: "terminated" });
+ expect(findProjectOrchestrator([workspaceWith([dead])], "skills")).toBeUndefined();
+ });
+
+ it("ignores live workers when looking for an orchestrator", () => {
+ const worker = sessionWith({ id: "skills-6", kind: "worker", status: "working" });
+ expect(findProjectOrchestrator([workspaceWith([worker])], "skills")).toBeUndefined();
+ });
+
+ it("returns undefined for an unknown project", () => {
+ const live = sessionWith({ id: "skills-5", kind: "orchestrator", status: "working" });
+ expect(findProjectOrchestrator([workspaceWith([live])], "other")).toBeUndefined();
+ });
+});
+
describe("sessionNeedsAttention", () => {
it.each(["needs_input", "changes_requested", "review_pending", "ci_failed"] as const)("is true for %s", (status) => {
expect(sessionNeedsAttention(sessionWith({ status }))).toBe(true);
diff --git a/frontend/src/renderer/types/workspace.ts b/frontend/src/renderer/types/workspace.ts
index d3db317..d401f48 100644
--- a/frontend/src/renderer/types/workspace.ts
+++ b/frontend/src/renderer/types/workspace.ts
@@ -123,12 +123,20 @@ export function isOrchestratorSession(session: WorkspaceSession): boolean {
return session.kind === "orchestrator" || session.id.endsWith("-orchestrator");
}
+/**
+ * The project's LIVE orchestrator, if any. Terminated orchestrator rows stay in
+ * the session list (the daemon returns all sessions, ordered by spawn number),
+ * so an earlier dead orchestrator must not shadow a live one — its zellij
+ * session is deleted and attaching to it dead-ends in an instant
+ * "[process exited]". No live orchestrator → undefined, so the topbar offers
+ * Spawn instead of navigating to a dead session.
+ */
export function findProjectOrchestrator(
workspaces: WorkspaceSummary[],
projectId: string,
): WorkspaceSession | undefined {
const workspace = workspaces.find((w) => w.id === projectId);
- return workspace?.sessions.find(isOrchestratorSession);
+ return workspace?.sessions.find((session) => isOrchestratorSession(session) && sessionIsActive(session));
}
export function workerSessions(sessions: WorkspaceSession[]): WorkspaceSession[] {