tr]:last:border-b-0", className)}
+ {...props}
+ />
+ );
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+ return (
+ |
+ );
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+ return (
+ [role=checkbox]]:translate-y-[2px]",
+ className,
+ )}
+ {...props}
+ />
+ );
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+ return (
+ | [role=checkbox]]:translate-y-[2px]",
+ className,
+ )}
+ {...props}
+ />
+ );
+}
+
+function TableCaption({ className, ...props }: React.ComponentProps<"caption">) {
+ return (
+
+ );
+}
+
+export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption };
diff --git a/frontend/src/renderer/hooks/use-mobile.tsx b/frontend/src/renderer/hooks/use-mobile.tsx
new file mode 100644
index 000000000..21e5c1f0d
--- /dev/null
+++ b/frontend/src/renderer/hooks/use-mobile.tsx
@@ -0,0 +1,19 @@
+import * as React from "react";
+
+const MOBILE_BREAKPOINT = 768;
+
+export function useIsMobile() {
+ const [isMobile, setIsMobile] = React.useState(undefined);
+
+ React.useEffect(() => {
+ const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+ const onChange = () => {
+ setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+ };
+ mql.addEventListener("change", onChange);
+ setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+ return () => mql.removeEventListener("change", onChange);
+ }, []);
+
+ return !!isMobile;
+}
diff --git a/frontend/src/renderer/hooks/useResizable.ts b/frontend/src/renderer/hooks/useResizable.ts
new file mode 100644
index 000000000..4f66eb680
--- /dev/null
+++ b/frontend/src/renderer/hooks/useResizable.ts
@@ -0,0 +1,76 @@
+import { useCallback, useEffect, useRef } from "react";
+
+interface UseResizableOptions {
+ /** CSS custom property to drive (set on :root), e.g. "--ao-sidebar-w". */
+ cssVar: string;
+ /** localStorage key to persist the width. */
+ storageKey: string;
+ defaultWidth: number;
+ min: number;
+ max: number;
+ /**
+ * Which edge the drag handle sits on relative to the panel it resizes.
+ * "right" (sidebar handle) grows with rightward drag; "left" (inspector
+ * handle) grows with leftward drag.
+ */
+ edge: "left" | "right";
+}
+
+/**
+ * Pointer-driven panel resize, cloned from agent-orchestrator's useResizable.
+ * Persists the width to localStorage and applies it via a CSS custom property
+ * on :root (so the consuming layout reads it with `width: var(--cssVar, default)`),
+ * avoiding any inline `style=`.
+ */
+export function useResizable({ cssVar, storageKey, defaultWidth, min, max, edge }: UseResizableOptions) {
+ const widthRef = useRef(defaultWidth);
+
+ const apply = useCallback(
+ (next: number) => {
+ const clamped = Math.min(max, Math.max(min, next));
+ widthRef.current = clamped;
+ document.documentElement.style.setProperty(cssVar, `${clamped}px`);
+ },
+ [cssVar, max, min],
+ );
+
+ // Restore persisted width on mount.
+ useEffect(() => {
+ const saved = Number(window.localStorage.getItem(storageKey));
+ apply(Number.isFinite(saved) && saved > 0 ? saved : defaultWidth);
+ return () => {
+ document.documentElement.style.removeProperty(cssVar);
+ };
+ }, [apply, cssVar, defaultWidth, storageKey]);
+
+ const onPointerDown = useCallback(
+ (event: React.PointerEvent) => {
+ event.preventDefault();
+ const startX = event.clientX;
+ const startWidth = widthRef.current;
+ const sign = edge === "right" ? 1 : -1;
+ document.body.classList.add("is-resizing-x");
+
+ const onMove = (e: PointerEvent) => {
+ apply(startWidth + sign * (e.clientX - startX));
+ };
+ const onUp = () => {
+ window.removeEventListener("pointermove", onMove);
+ window.removeEventListener("pointerup", onUp);
+ document.body.classList.remove("is-resizing-x");
+ window.localStorage.setItem(storageKey, String(widthRef.current));
+ };
+ window.addEventListener("pointermove", onMove);
+ window.addEventListener("pointerup", onUp);
+ },
+ [apply, edge, storageKey],
+ );
+
+ /** Double-click the handle to reset to the default width. */
+ const onDoubleClick = useCallback(() => {
+ apply(defaultWidth);
+ window.localStorage.setItem(storageKey, String(defaultWidth));
+ }, [apply, defaultWidth, storageKey]);
+
+ return { onPointerDown, onDoubleClick };
+}
diff --git a/frontend/src/renderer/hooks/useTerminalSession.test.tsx b/frontend/src/renderer/hooks/useTerminalSession.test.tsx
index af97483a1..882ad7e52 100644
--- a/frontend/src/renderer/hooks/useTerminalSession.test.tsx
+++ b/frontend/src/renderer/hooks/useTerminalSession.test.tsx
@@ -167,9 +167,20 @@ describe("useTerminalSession", () => {
terminal.typeKeys("ls\r");
expect(muxes[0].inputs).toEqual([["handle-1", "ls\r"]]);
terminal.emitResize(120, 40);
+ act(() => void vi.advanceTimersByTime(100));
expect(muxes[0].resizes).toContainEqual(["handle-1", 120, 40]);
});
+ it("collapses a drag's burst of grid changes into one trailing PTY resize", () => {
+ const { terminal, muxes } = setup();
+ const initialResizes = muxes[0].resizes.length; // connect() sends the opening size
+ terminal.emitResize(100, 30);
+ terminal.emitResize(110, 34);
+ terminal.emitResize(120, 40);
+ act(() => void vi.advanceTimersByTime(100));
+ expect(muxes[0].resizes.slice(initialResizes)).toEqual([["handle-1", 120, 40]]);
+ });
+
it("marks exit in the terminal and refetches workspace state instead of writing status", () => {
const { view, terminal, muxes, invalidateSpy } = setup();
act(() => muxes[0].emitExit("handle-1"));
diff --git a/frontend/src/renderer/hooks/useTerminalSession.ts b/frontend/src/renderer/hooks/useTerminalSession.ts
index dcfb8eee4..4d2a240c7 100644
--- a/frontend/src/renderer/hooks/useTerminalSession.ts
+++ b/frontend/src/renderer/hooks/useTerminalSession.ts
@@ -24,8 +24,10 @@ export type AttachableTerminal = {
write: (data: Uint8Array) => void;
writeln: (line: string) => void;
/**
- * Erase screen + scrollback while preserving terminal modes. A full reset
- * drops zellij mouse tracking, so wheel scroll stops after reconnect.
+ * Erase screen + scrollback and home the cursor, preserving terminal modes.
+ * Never a full reset (RIS): that would drop the mouse-tracking mode zellij
+ * enabled at attach, which the ring replay cannot re-establish — killing
+ * wheel scroll (see XtermTerminal's CLEAR_SEQUENCE).
*/
clear: () => void;
onData: (listener: (data: string) => void) => { dispose: () => void };
@@ -49,6 +51,10 @@ export type UseTerminalSessionOptions = {
const RETRY_BASE_MS = 500;
const RETRY_MAX_MS = 8_000;
+// Trailing debounce on grid changes: a pane drag emits a burst of intermediate
+// sizes; the attached program should get one SIGWINCH when the drag settles,
+// not dozens (yyork's terminal-panel does the same at its socket layer).
+const RESIZE_DEBOUNCE_MS = 100;
function defaultCreateMux(): TerminalMux {
// Resolved per connect, not per hook: a daemon restart can change the port.
@@ -73,6 +79,7 @@ export function useTerminalSession(session: WorkspaceSession | undefined, option
handle: null as string | null,
disposers: [] as Array<() => void>,
retryTimer: null as ReturnType | null,
+ resizeTimer: null as ReturnType | null,
attempts: 0,
firstAttach: true,
detached: true,
@@ -93,6 +100,10 @@ export function useTerminalSession(session: WorkspaceSession | undefined, option
clearTimeout(r.retryTimer);
r.retryTimer = null;
}
+ if (r.resizeTimer) {
+ clearTimeout(r.resizeTimer);
+ r.resizeTimer = null;
+ }
r.disposers.forEach((dispose) => dispose());
r.disposers = [];
r.mux?.dispose();
@@ -148,18 +159,26 @@ export function useTerminalSession(session: WorkspaceSession | undefined, option
}),
);
const input = terminal.onData((data) => mux.sendInput(handle, data));
- const resize = terminal.onResize(({ cols, rows }) => mux.resize(handle, cols, rows));
+ // xterm only fires onResize when the grid actually changed; the debounce
+ // additionally collapses a drag's burst of changes into one PTY resize.
+ const resize = terminal.onResize(({ cols, rows }) => {
+ if (r.resizeTimer) clearTimeout(r.resizeTimer);
+ r.resizeTimer = setTimeout(() => {
+ r.resizeTimer = null;
+ mux.resize(handle, cols, rows);
+ }, RESIZE_DEBOUNCE_MS);
+ });
r.disposers.push(
() => input.dispose(),
() => resize.dispose(),
);
- if (r.firstAttach) {
- terminal.writeln(`\x1b[2mAttaching to ${sessionRef.current?.title ?? handle}…\x1b[0m`);
- } else {
- // The server replays the recent-output ring on open (backend
- // internal/terminal/ring.go); clear the stale screen so it isn't doubled.
- // Screen-clear only, never reset(): RIS wipes zellij's mouse mode.
+ // Connection status is chrome (the pane's banner), never buffer content —
+ // the PTY owns the buffer. On reattach the server replays the recent-output
+ // ring (backend internal/terminal/ring.go); clear the stale screen so it
+ // isn't doubled. Screen-clear only, never reset(): RIS would wipe zellij's
+ // mouse-tracking mode and freeze wheel scrolling after every reconnect.
+ if (!r.firstAttach) {
terminal.clear();
}
r.firstAttach = false;
diff --git a/frontend/src/renderer/hooks/useWorkspaceQuery.ts b/frontend/src/renderer/hooks/useWorkspaceQuery.ts
index 18c00974f..12b432f8c 100644
--- a/frontend/src/renderer/hooks/useWorkspaceQuery.ts
+++ b/frontend/src/renderer/hooks/useWorkspaceQuery.ts
@@ -29,18 +29,24 @@ async function fetchWorkspaces(): Promise {
workspaceName: project.name,
title: session.displayName ?? session.issueId ?? session.id,
provider: toAgentProvider(session.harness),
- branch: "",
+ kind: session.kind === "orchestrator" ? "orchestrator" : session.kind === "worker" ? "worker" : undefined,
+ branch: `session/${session.id}`,
status: toSessionStatus(session.status, session.isTerminated),
- updatedAt: new Date(session.updatedAt).toLocaleTimeString([], { hour: "numeric", minute: "2-digit" }),
+ createdAt: session.createdAt,
+ updatedAt: session.updatedAt,
})),
}));
}
+// Shared so route loaders can prefetch via queryClient.ensureQueryData (paired
+// with the router's defaultPreload: "intent") and the hook reads the same cache.
+export const workspaceQueryOptions = {
+ queryKey: workspaceQueryKey,
+ queryFn: fetchWorkspaces,
+ retry: 1,
+ refetchInterval: 15_000,
+};
+
export function useWorkspaceQuery() {
- return useQuery({
- queryKey: workspaceQueryKey,
- queryFn: fetchWorkspaces,
- retry: 1,
- refetchInterval: 15_000,
- });
+ return useQuery(workspaceQueryOptions);
}
diff --git a/frontend/src/renderer/lib/api-client.ts b/frontend/src/renderer/lib/api-client.ts
index c1aff35e3..c2bd44d16 100644
--- a/frontend/src/renderer/lib/api-client.ts
+++ b/frontend/src/renderer/lib/api-client.ts
@@ -72,3 +72,20 @@ export const apiClient = createClient({
baseUrl: initialApiBaseUrl,
fetch: runtimeFetch,
});
+
+/**
+ * Human-readable message from an openapi-fetch `error` value. The daemon's
+ * error body is `{ error, code, message, requestId }` (backend apierr) — a
+ * plain object, so `String(error)` renders "[object Object]". Falls back
+ * through Error instances and strings.
+ */
+export function apiErrorMessage(error: unknown, fallback = "Request failed"): string {
+ if (error instanceof Error) return error.message;
+ if (typeof error === "string" && error !== "") return error;
+ if (typeof error === "object" && error !== null) {
+ const body = error as { message?: unknown; error?: unknown };
+ if (typeof body.message === "string" && body.message !== "") return body.message;
+ if (typeof body.error === "string" && body.error !== "") return body.error;
+ }
+ return fallback;
+}
diff --git a/frontend/src/renderer/lib/format-time.ts b/frontend/src/renderer/lib/format-time.ts
new file mode 100644
index 000000000..445e0b0cd
--- /dev/null
+++ b/frontend/src/renderer/lib/format-time.ts
@@ -0,0 +1,14 @@
+/** Compact relative time — ported from agent-orchestrator session-detail-utils. */
+export function formatTimeCompact(isoDate: string | null | undefined): string {
+ if (!isoDate) return "just now";
+ const ts = new Date(isoDate).getTime();
+ if (!Number.isFinite(ts)) return "just now";
+ const diffMs = Date.now() - ts;
+ if (diffMs <= 0) return "just now";
+ const diffMins = Math.floor(diffMs / 60000);
+ const diffHours = Math.floor(diffMins / 60);
+ if (diffMins < 1) return "just now";
+ if (diffMins < 60) return `${diffMins}m ago`;
+ if (diffHours < 24) return `${diffHours}h ago`;
+ return `${Math.floor(diffHours / 24)}d ago`;
+}
diff --git a/frontend/src/renderer/lib/mock-data.ts b/frontend/src/renderer/lib/mock-data.ts
index 71e8ac117..d838046b0 100644
--- a/frontend/src/renderer/lib/mock-data.ts
+++ b/frontend/src/renderer/lib/mock-data.ts
@@ -15,7 +15,8 @@ export const mockWorkspaces: WorkspaceSummary[] = [
provider: "claude-code",
branch: "feat/refactor-mux",
status: "working",
- updatedAt: "now",
+ updatedAt: new Date().toISOString(),
+ createdAt: new Date(Date.now() - 4 * 60 * 60 * 1000).toISOString(),
changedFiles: [
{
path: "internal/mux/terminal_mux.go",
@@ -40,7 +41,8 @@ export const mockWorkspaces: WorkspaceSummary[] = [
provider: "codex",
branch: "fix/webgl-fallback",
status: "needs_input",
- updatedAt: "now",
+ updatedAt: new Date().toISOString(),
+ createdAt: new Date(Date.now() - 4 * 60 * 60 * 1000).toISOString(),
},
],
},
diff --git a/frontend/src/renderer/lib/shell-context.ts b/frontend/src/renderer/lib/shell-context.ts
new file mode 100644
index 000000000..a1f9cb323
--- /dev/null
+++ b/frontend/src/renderer/lib/shell-context.ts
@@ -0,0 +1,24 @@
+import { createContext, useContext } from "react";
+import type { useDaemonStatus } from "../hooks/useDaemonStatus";
+import type { AgentProvider } from "../types/workspace";
+
+// Shared state the persistent _shell layout owns and route content reads. The
+// daemon status effect (IPC poll + event transport) must run exactly once, so
+// it lives in the shell and is handed down here rather than re-run per route.
+export type ShellContextValue = {
+ daemonStatus: ReturnType;
+ /** Open the spawn-worker modal, optionally pre-selecting a project. */
+ openSpawn: (projectId?: string) => void;
+ createProject: (input: { path: string }) => Promise;
+ createTask: (input: { projectId: string; prompt: string; branch?: string; harness?: AgentProvider }) => Promise;
+};
+
+const ShellContext = createContext(null);
+
+export const ShellProvider = ShellContext.Provider;
+
+export function useShell(): ShellContextValue {
+ const ctx = useContext(ShellContext);
+ if (!ctx) throw new Error("useShell must be used within the _shell layout route");
+ return ctx;
+}
diff --git a/frontend/src/renderer/lib/spawn-orchestrator.ts b/frontend/src/renderer/lib/spawn-orchestrator.ts
new file mode 100644
index 000000000..15d73b863
--- /dev/null
+++ b/frontend/src/renderer/lib/spawn-orchestrator.ts
@@ -0,0 +1,18 @@
+import { apiClient } from "./api-client";
+
+/** Spawn the project's orchestrator session via the daemon API. */
+export async function spawnOrchestrator(projectId: string): Promise {
+ const { data, error, response } = await apiClient.POST("/api/v1/orchestrators", {
+ body: { projectId },
+ });
+
+ if (error || !data?.orchestrator?.id) {
+ const message =
+ error && typeof error === "object" && "message" in error && typeof error.message === "string"
+ ? error.message
+ : `Failed to spawn orchestrator (${response.status})`;
+ throw new Error(message);
+ }
+
+ return data.orchestrator.id;
+}
diff --git a/frontend/src/renderer/lib/terminal-themes.ts b/frontend/src/renderer/lib/terminal-themes.ts
new file mode 100644
index 000000000..01ad4f916
--- /dev/null
+++ b/frontend/src/renderer/lib/terminal-themes.ts
@@ -0,0 +1,62 @@
+import type { ITheme } from "@xterm/xterm";
+
+/** xterm palettes harmonized to styles.css tokens (agent-orchestrator pattern). */
+export function buildTerminalThemes(): { dark: ITheme; light: ITheme } {
+ const accent = {
+ cursor: "#f59f4c",
+ selDark: "rgba(77, 141, 255, 0.30)",
+ selLight: "rgba(37, 99, 235, 0.25)",
+ };
+
+ const dark: ITheme = {
+ background: "#15171b",
+ foreground: "#d7d7d2",
+ cursor: accent.cursor,
+ cursorAccent: "#15171b",
+ selectionBackground: accent.selDark,
+ selectionInactiveBackground: "rgba(128, 128, 128, 0.2)",
+ black: "#15171b",
+ red: "#ef6b6b",
+ green: "#74b98a",
+ yellow: "#e8c14a",
+ blue: "#4d8dff",
+ magenta: "#a78bfa",
+ cyan: "#6fb3c9",
+ white: "#d7d7d2",
+ brightBlack: "#7c7c7c",
+ brightRed: "#ff8a8a",
+ brightGreen: "#8fd6a6",
+ brightYellow: "#f0d06b",
+ brightBlue: "#7eaaff",
+ brightMagenta: "#c4b0fc",
+ brightCyan: "#8fcfe0",
+ brightWhite: "#f4f5f7",
+ };
+
+ const light: ITheme = {
+ background: "#fafafa",
+ foreground: "#24292f",
+ cursor: accent.cursor,
+ cursorAccent: "#fafafa",
+ selectionBackground: accent.selLight,
+ selectionInactiveBackground: "rgba(128, 128, 128, 0.15)",
+ black: "#24292f",
+ red: "#b42318",
+ green: "#1a7f37",
+ yellow: "#9a6b00",
+ blue: "#2563eb",
+ magenta: "#8e24aa",
+ cyan: "#0b7285",
+ white: "#4b5563",
+ brightBlack: "#374151",
+ brightRed: "#912018",
+ brightGreen: "#176639",
+ brightYellow: "#6f4a00",
+ brightBlue: "#1d4ed8",
+ brightMagenta: "#7b1fa2",
+ brightCyan: "#155e75",
+ brightWhite: "#374151",
+ };
+
+ return { dark, light };
+}
diff --git a/frontend/src/renderer/routeTree.gen.ts b/frontend/src/renderer/routeTree.gen.ts
index 20a1f6f6e..0ba366e13 100644
--- a/frontend/src/renderer/routeTree.gen.ts
+++ b/frontend/src/renderer/routeTree.gen.ts
@@ -9,85 +9,224 @@
// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
import { Route as rootRouteImport } from "./routes/__root";
-import { Route as IndexRouteImport } from "./routes/index";
-import { Route as WorkspacesWorkspaceIdRouteImport } from "./routes/workspaces.$workspaceId";
-import { Route as WorkspacesWorkspaceIdSessionsSessionIdRouteImport } from "./routes/workspaces.$workspaceId_.sessions.$sessionId";
+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";
+import { Route as ShellProjectsProjectIdSettingsRouteImport } from "./routes/_shell.projects.$projectId_.settings";
+import { Route as ShellProjectsProjectIdSessionsSessionIdRouteImport } from "./routes/_shell.projects.$projectId_.sessions.$sessionId";
-const IndexRoute = IndexRouteImport.update({
+const ShellRoute = ShellRouteImport.update({
+ id: "/_shell",
+ getParentRoute: () => rootRouteImport,
+} as any);
+const ShellIndexRoute = ShellIndexRouteImport.update({
id: "/",
path: "/",
- getParentRoute: () => rootRouteImport,
+ getParentRoute: () => ShellRoute,
} as any);
-const WorkspacesWorkspaceIdRoute = WorkspacesWorkspaceIdRouteImport.update({
- id: "/workspaces/$workspaceId",
- path: "/workspaces/$workspaceId",
- getParentRoute: () => rootRouteImport,
+const ShellReviewsRoute = ShellReviewsRouteImport.update({
+ id: "/reviews",
+ path: "/reviews",
+ getParentRoute: () => ShellRoute,
} as any);
-const WorkspacesWorkspaceIdSessionsSessionIdRoute = WorkspacesWorkspaceIdSessionsSessionIdRouteImport.update({
- id: "/workspaces/$workspaceId_/sessions/$sessionId",
- path: "/workspaces/$workspaceId/sessions/$sessionId",
- getParentRoute: () => rootRouteImport,
+const ShellReviewRoute = ShellReviewRouteImport.update({
+ id: "/review",
+ path: "/review",
+ getParentRoute: () => ShellRoute,
+} as any);
+const ShellPrsRoute = ShellPrsRouteImport.update({
+ id: "/prs",
+ path: "/prs",
+ getParentRoute: () => ShellRoute,
+} as any);
+const ShellSessionsSessionIdRoute = ShellSessionsSessionIdRouteImport.update({
+ id: "/sessions/$sessionId",
+ path: "/sessions/$sessionId",
+ getParentRoute: () => ShellRoute,
+} as any);
+const ShellProjectsProjectIdRoute = ShellProjectsProjectIdRouteImport.update({
+ id: "/projects/$projectId",
+ path: "/projects/$projectId",
+ getParentRoute: () => ShellRoute,
+} as any);
+const ShellProjectsProjectIdSettingsRoute = ShellProjectsProjectIdSettingsRouteImport.update({
+ id: "/projects/$projectId_/settings",
+ path: "/projects/$projectId/settings",
+ getParentRoute: () => ShellRoute,
+} as any);
+const ShellProjectsProjectIdSessionsSessionIdRoute = ShellProjectsProjectIdSessionsSessionIdRouteImport.update({
+ id: "/projects/$projectId_/sessions/$sessionId",
+ path: "/projects/$projectId/sessions/$sessionId",
+ getParentRoute: () => ShellRoute,
} as any);
export interface FileRoutesByFullPath {
- "/": typeof IndexRoute;
- "/workspaces/$workspaceId": typeof WorkspacesWorkspaceIdRoute;
- "/workspaces/$workspaceId/sessions/$sessionId": typeof WorkspacesWorkspaceIdSessionsSessionIdRoute;
+ "/": typeof ShellIndexRoute;
+ "/prs": typeof ShellPrsRoute;
+ "/review": typeof ShellReviewRoute;
+ "/reviews": typeof ShellReviewsRoute;
+ "/projects/$projectId": typeof ShellProjectsProjectIdRoute;
+ "/sessions/$sessionId": typeof ShellSessionsSessionIdRoute;
+ "/projects/$projectId/settings": typeof ShellProjectsProjectIdSettingsRoute;
+ "/projects/$projectId/sessions/$sessionId": typeof ShellProjectsProjectIdSessionsSessionIdRoute;
}
export interface FileRoutesByTo {
- "/": typeof IndexRoute;
- "/workspaces/$workspaceId": typeof WorkspacesWorkspaceIdRoute;
- "/workspaces/$workspaceId/sessions/$sessionId": typeof WorkspacesWorkspaceIdSessionsSessionIdRoute;
+ "/prs": typeof ShellPrsRoute;
+ "/review": typeof ShellReviewRoute;
+ "/reviews": typeof ShellReviewsRoute;
+ "/": typeof ShellIndexRoute;
+ "/projects/$projectId": typeof ShellProjectsProjectIdRoute;
+ "/sessions/$sessionId": typeof ShellSessionsSessionIdRoute;
+ "/projects/$projectId/settings": typeof ShellProjectsProjectIdSettingsRoute;
+ "/projects/$projectId/sessions/$sessionId": typeof ShellProjectsProjectIdSessionsSessionIdRoute;
}
export interface FileRoutesById {
__root__: typeof rootRouteImport;
- "/": typeof IndexRoute;
- "/workspaces/$workspaceId": typeof WorkspacesWorkspaceIdRoute;
- "/workspaces/$workspaceId_/sessions/$sessionId": typeof WorkspacesWorkspaceIdSessionsSessionIdRoute;
+ "/_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;
+ "/_shell/projects/$projectId_/settings": typeof ShellProjectsProjectIdSettingsRoute;
+ "/_shell/projects/$projectId_/sessions/$sessionId": typeof ShellProjectsProjectIdSessionsSessionIdRoute;
}
export interface FileRouteTypes {
fileRoutesByFullPath: FileRoutesByFullPath;
- fullPaths: "/" | "/workspaces/$workspaceId" | "/workspaces/$workspaceId/sessions/$sessionId";
+ fullPaths:
+ | "/"
+ | "/prs"
+ | "/review"
+ | "/reviews"
+ | "/projects/$projectId"
+ | "/sessions/$sessionId"
+ | "/projects/$projectId/settings"
+ | "/projects/$projectId/sessions/$sessionId";
fileRoutesByTo: FileRoutesByTo;
- to: "/" | "/workspaces/$workspaceId" | "/workspaces/$workspaceId/sessions/$sessionId";
- id: "__root__" | "/" | "/workspaces/$workspaceId" | "/workspaces/$workspaceId_/sessions/$sessionId";
+ to:
+ | "/prs"
+ | "/review"
+ | "/reviews"
+ | "/"
+ | "/projects/$projectId"
+ | "/sessions/$sessionId"
+ | "/projects/$projectId/settings"
+ | "/projects/$projectId/sessions/$sessionId";
+ id:
+ | "__root__"
+ | "/_shell"
+ | "/_shell/prs"
+ | "/_shell/review"
+ | "/_shell/reviews"
+ | "/_shell/"
+ | "/_shell/projects/$projectId"
+ | "/_shell/sessions/$sessionId"
+ | "/_shell/projects/$projectId_/settings"
+ | "/_shell/projects/$projectId_/sessions/$sessionId";
fileRoutesById: FileRoutesById;
}
export interface RootRouteChildren {
- IndexRoute: typeof IndexRoute;
- WorkspacesWorkspaceIdRoute: typeof WorkspacesWorkspaceIdRoute;
- WorkspacesWorkspaceIdSessionsSessionIdRoute: typeof WorkspacesWorkspaceIdSessionsSessionIdRoute;
+ ShellRoute: typeof ShellRouteWithChildren;
}
declare module "@tanstack/react-router" {
interface FileRoutesByPath {
- "/": {
- id: "/";
+ "/_shell": {
+ id: "/_shell";
+ path: "";
+ fullPath: "/";
+ preLoaderRoute: typeof ShellRouteImport;
+ parentRoute: typeof rootRouteImport;
+ };
+ "/_shell/": {
+ id: "/_shell/";
path: "/";
fullPath: "/";
- preLoaderRoute: typeof IndexRouteImport;
- parentRoute: typeof rootRouteImport;
+ preLoaderRoute: typeof ShellIndexRouteImport;
+ parentRoute: typeof ShellRoute;
};
- "/workspaces/$workspaceId": {
- id: "/workspaces/$workspaceId";
- path: "/workspaces/$workspaceId";
- fullPath: "/workspaces/$workspaceId";
- preLoaderRoute: typeof WorkspacesWorkspaceIdRouteImport;
- parentRoute: typeof rootRouteImport;
+ "/_shell/reviews": {
+ id: "/_shell/reviews";
+ path: "/reviews";
+ fullPath: "/reviews";
+ preLoaderRoute: typeof ShellReviewsRouteImport;
+ parentRoute: typeof ShellRoute;
};
- "/workspaces/$workspaceId_/sessions/$sessionId": {
- id: "/workspaces/$workspaceId_/sessions/$sessionId";
- path: "/workspaces/$workspaceId/sessions/$sessionId";
- fullPath: "/workspaces/$workspaceId/sessions/$sessionId";
- preLoaderRoute: typeof WorkspacesWorkspaceIdSessionsSessionIdRouteImport;
- parentRoute: typeof rootRouteImport;
+ "/_shell/review": {
+ id: "/_shell/review";
+ path: "/review";
+ fullPath: "/review";
+ preLoaderRoute: typeof ShellReviewRouteImport;
+ parentRoute: typeof ShellRoute;
+ };
+ "/_shell/prs": {
+ id: "/_shell/prs";
+ path: "/prs";
+ fullPath: "/prs";
+ preLoaderRoute: typeof ShellPrsRouteImport;
+ parentRoute: typeof ShellRoute;
+ };
+ "/_shell/sessions/$sessionId": {
+ id: "/_shell/sessions/$sessionId";
+ path: "/sessions/$sessionId";
+ fullPath: "/sessions/$sessionId";
+ preLoaderRoute: typeof ShellSessionsSessionIdRouteImport;
+ parentRoute: typeof ShellRoute;
+ };
+ "/_shell/projects/$projectId": {
+ id: "/_shell/projects/$projectId";
+ path: "/projects/$projectId";
+ fullPath: "/projects/$projectId";
+ preLoaderRoute: typeof ShellProjectsProjectIdRouteImport;
+ parentRoute: typeof ShellRoute;
+ };
+ "/_shell/projects/$projectId_/settings": {
+ id: "/_shell/projects/$projectId_/settings";
+ path: "/projects/$projectId/settings";
+ fullPath: "/projects/$projectId/settings";
+ preLoaderRoute: typeof ShellProjectsProjectIdSettingsRouteImport;
+ parentRoute: typeof ShellRoute;
+ };
+ "/_shell/projects/$projectId_/sessions/$sessionId": {
+ id: "/_shell/projects/$projectId_/sessions/$sessionId";
+ path: "/projects/$projectId/sessions/$sessionId";
+ fullPath: "/projects/$projectId/sessions/$sessionId";
+ preLoaderRoute: typeof ShellProjectsProjectIdSessionsSessionIdRouteImport;
+ parentRoute: typeof ShellRoute;
};
}
}
+interface ShellRouteChildren {
+ ShellPrsRoute: typeof ShellPrsRoute;
+ ShellReviewRoute: typeof ShellReviewRoute;
+ ShellReviewsRoute: typeof ShellReviewsRoute;
+ ShellIndexRoute: typeof ShellIndexRoute;
+ ShellProjectsProjectIdRoute: typeof ShellProjectsProjectIdRoute;
+ ShellSessionsSessionIdRoute: typeof ShellSessionsSessionIdRoute;
+ ShellProjectsProjectIdSettingsRoute: typeof ShellProjectsProjectIdSettingsRoute;
+ ShellProjectsProjectIdSessionsSessionIdRoute: typeof ShellProjectsProjectIdSessionsSessionIdRoute;
+}
+
+const ShellRouteChildren: ShellRouteChildren = {
+ ShellPrsRoute: ShellPrsRoute,
+ ShellReviewRoute: ShellReviewRoute,
+ ShellReviewsRoute: ShellReviewsRoute,
+ ShellIndexRoute: ShellIndexRoute,
+ ShellProjectsProjectIdRoute: ShellProjectsProjectIdRoute,
+ ShellSessionsSessionIdRoute: ShellSessionsSessionIdRoute,
+ ShellProjectsProjectIdSettingsRoute: ShellProjectsProjectIdSettingsRoute,
+ ShellProjectsProjectIdSessionsSessionIdRoute: ShellProjectsProjectIdSessionsSessionIdRoute,
+};
+
+const ShellRouteWithChildren = ShellRoute._addFileChildren(ShellRouteChildren);
+
const rootRouteChildren: RootRouteChildren = {
- IndexRoute: IndexRoute,
- WorkspacesWorkspaceIdRoute: WorkspacesWorkspaceIdRoute,
- WorkspacesWorkspaceIdSessionsSessionIdRoute: WorkspacesWorkspaceIdSessionsSessionIdRoute,
+ ShellRoute: ShellRouteWithChildren,
};
export const routeTree = rootRouteImport._addFileChildren(rootRouteChildren)._addFileTypes();
diff --git a/frontend/src/renderer/routes/_shell.index.tsx b/frontend/src/renderer/routes/_shell.index.tsx
new file mode 100644
index 000000000..6bfeef7fc
--- /dev/null
+++ b/frontend/src/renderer/routes/_shell.index.tsx
@@ -0,0 +1,6 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { SessionsBoard } from "../components/SessionsBoard";
+
+export const Route = createFileRoute("/_shell/")({
+ component: () => ,
+});
diff --git a/frontend/src/renderer/routes/_shell.projects.$projectId.tsx b/frontend/src/renderer/routes/_shell.projects.$projectId.tsx
new file mode 100644
index 000000000..3c641245e
--- /dev/null
+++ b/frontend/src/renderer/routes/_shell.projects.$projectId.tsx
@@ -0,0 +1,11 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { SessionsBoard } from "../components/SessionsBoard";
+
+export const Route = createFileRoute("/_shell/projects/$projectId")({
+ component: ProjectBoardRoute,
+});
+
+function ProjectBoardRoute() {
+ const { projectId } = Route.useParams();
+ return ;
+}
diff --git a/frontend/src/renderer/routes/_shell.projects.$projectId_.sessions.$sessionId.tsx b/frontend/src/renderer/routes/_shell.projects.$projectId_.sessions.$sessionId.tsx
new file mode 100644
index 000000000..0a2b22616
--- /dev/null
+++ b/frontend/src/renderer/routes/_shell.projects.$projectId_.sessions.$sessionId.tsx
@@ -0,0 +1,11 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { SessionView } from "../components/SessionView";
+
+export const Route = createFileRoute("/_shell/projects/$projectId_/sessions/$sessionId")({
+ component: ProjectSessionRoute,
+});
+
+function ProjectSessionRoute() {
+ const { projectId, sessionId } = Route.useParams();
+ return ;
+}
diff --git a/frontend/src/renderer/routes/_shell.projects.$projectId_.settings.tsx b/frontend/src/renderer/routes/_shell.projects.$projectId_.settings.tsx
new file mode 100644
index 000000000..dd97630f9
--- /dev/null
+++ b/frontend/src/renderer/routes/_shell.projects.$projectId_.settings.tsx
@@ -0,0 +1,11 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { ProjectSettingsForm } from "../components/ProjectSettingsForm";
+
+export const Route = createFileRoute("/_shell/projects/$projectId_/settings")({
+ component: ProjectSettingsRoute,
+});
+
+function ProjectSettingsRoute() {
+ const { projectId } = Route.useParams();
+ return ;
+}
diff --git a/frontend/src/renderer/routes/_shell.prs.tsx b/frontend/src/renderer/routes/_shell.prs.tsx
new file mode 100644
index 000000000..bf2f3cb22
--- /dev/null
+++ b/frontend/src/renderer/routes/_shell.prs.tsx
@@ -0,0 +1,6 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { PullRequestsPage } from "../components/PullRequestsPage";
+
+export const Route = createFileRoute("/_shell/prs")({
+ component: PullRequestsPage,
+});
diff --git a/frontend/src/renderer/routes/_shell.review.tsx b/frontend/src/renderer/routes/_shell.review.tsx
new file mode 100644
index 000000000..e1583bd23
--- /dev/null
+++ b/frontend/src/renderer/routes/_shell.review.tsx
@@ -0,0 +1,6 @@
+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
new file mode 100644
index 000000000..ecb1de893
--- /dev/null
+++ b/frontend/src/renderer/routes/_shell.reviews.tsx
@@ -0,0 +1,8 @@
+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.sessions.$sessionId.tsx b/frontend/src/renderer/routes/_shell.sessions.$sessionId.tsx
new file mode 100644
index 000000000..d7b0f6ae8
--- /dev/null
+++ b/frontend/src/renderer/routes/_shell.sessions.$sessionId.tsx
@@ -0,0 +1,11 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { SessionView } from "../components/SessionView";
+
+export const Route = createFileRoute("/_shell/sessions/$sessionId")({
+ component: SessionRoute,
+});
+
+function SessionRoute() {
+ const { sessionId } = Route.useParams();
+ return ;
+}
diff --git a/frontend/src/renderer/routes/_shell.tsx b/frontend/src/renderer/routes/_shell.tsx
new file mode 100644
index 000000000..9c7f0122f
--- /dev/null
+++ b/frontend/src/renderer/routes/_shell.tsx
@@ -0,0 +1,194 @@
+import { createFileRoute, Outlet, useNavigate } from "@tanstack/react-router";
+import { useQueryClient } from "@tanstack/react-query";
+import { useCallback, useEffect, useState } from "react";
+import { Sidebar } from "../components/Sidebar";
+import { SidebarProvider } from "../components/ui/sidebar";
+import { SpawnWorkerModal } from "../components/SpawnWorkerModal";
+import { TitlebarNav } from "../components/TitlebarNav";
+import { useDaemonStatus } from "../hooks/useDaemonStatus";
+import { useWorkspaceQuery, workspaceQueryKey, workspaceQueryOptions } from "../hooks/useWorkspaceQuery";
+import { apiClient, apiErrorMessage } from "../lib/api-client";
+import { ShellProvider } from "../lib/shell-context";
+import { readStoredTheme, type Theme, useUiStore } from "../stores/ui-store";
+import { toAgentProvider, toSessionStatus, type AgentProvider, type WorkspaceSummary } from "../types/workspace";
+
+export const Route = createFileRoute("/_shell")({
+ // Prefetch the workspace list for the whole shell (parent loaders run before
+ // children); pairs with the router's defaultPreload: "intent" so a hovered
+ // nav target is warm before the click.
+ loader: ({ context }) => context.queryClient.ensureQueryData(workspaceQueryOptions),
+ component: ShellLayout,
+});
+
+function systemTheme(): Theme {
+ return window.matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark";
+}
+
+function errorMessage(error: unknown) {
+ return error instanceof Error ? error.message : "Could not load projects";
+}
+
+// Persistent app shell: the Sidebar + shared state survive route changes; only
+// the content (board / session / settings / …) swaps. Lifted out of
+// the old single , with selection now owned by the router (route params)
+// instead of Zustand. The daemon-status effect runs here exactly once.
+function ShellLayout() {
+ const navigate = useNavigate();
+ const queryClient = useQueryClient();
+ const workspaceQuery = useWorkspaceQuery();
+ const workspaces = workspaceQuery.data ?? [];
+ const daemonStatus = useDaemonStatus(queryClient);
+ const { theme, setTheme, isSidebarOpen, toggleSidebar } = useUiStore();
+ const [spawnOpen, setSpawnOpen] = useState(false);
+ const [spawnProjectId, setSpawnProjectId] = useState(undefined);
+
+ const openSpawn = useCallback((projectId?: string) => {
+ setSpawnProjectId(projectId);
+ setSpawnOpen(true);
+ }, []);
+
+ const updateWorkspaces = useCallback(
+ (updater: (workspaces: WorkspaceSummary[]) => WorkspaceSummary[]) => {
+ queryClient.setQueryData(workspaceQueryKey, (current = []) => updater(current));
+ },
+ [queryClient],
+ );
+
+ const createProject = useCallback(
+ async (input: { path: string }) => {
+ const { data, error } = await apiClient.POST("/api/v1/projects", { body: { path: input.path } });
+ if (error) throw new Error(apiErrorMessage(error));
+ if (!data?.project) throw new Error("Project creation returned no project");
+
+ const workspace: WorkspaceSummary = {
+ id: data.project.id,
+ name: data.project.name,
+ path: data.project.path,
+ type: "main",
+ sessions: [],
+ };
+ updateWorkspaces((current) => [workspace, ...current.filter((item) => item.id !== workspace.id)]);
+ void navigate({ to: "/projects/$projectId", params: { projectId: workspace.id } });
+ },
+ [navigate, updateWorkspaces],
+ );
+
+ const createTask = useCallback(
+ async (input: { projectId: string; prompt: string; branch?: string; harness?: AgentProvider }) => {
+ const { data, error } = await apiClient.POST("/api/v1/sessions", {
+ body: {
+ projectId: input.projectId,
+ kind: "worker",
+ harness: input.harness,
+ prompt: input.prompt,
+ branch: input.branch || undefined,
+ },
+ });
+ if (error || !data?.session) throw new Error(error ? apiErrorMessage(error) : "No session returned");
+
+ const session = data.session;
+ updateWorkspaces((current) =>
+ current.map((item) =>
+ item.id === input.projectId
+ ? {
+ ...item,
+ sessions: [
+ {
+ id: session.id,
+ terminalHandleId: session.terminalHandleId,
+ workspaceId: item.id,
+ workspaceName: item.name,
+ title: input.prompt,
+ provider: toAgentProvider(session.harness),
+ branch: input.branch ?? "",
+ status: toSessionStatus(session.status, session.isTerminated),
+ updatedAt: "now",
+ },
+ ...item.sessions.filter((existing) => existing.id !== session.id),
+ ],
+ }
+ : item,
+ ),
+ );
+ void navigate({
+ to: "/projects/$projectId/sessions/$sessionId",
+ params: { projectId: input.projectId, sessionId: session.id },
+ });
+ },
+ [navigate, updateWorkspaces],
+ );
+
+ useEffect(() => {
+ document.documentElement.dataset.theme = theme;
+ document.documentElement.style.colorScheme = theme;
+ }, [theme]);
+
+ // Follow OS appearance only until the user picks a theme explicitly.
+ useEffect(() => {
+ if (readStoredTheme()) return;
+
+ const mediaQuery = window.matchMedia("(prefers-color-scheme: light)");
+ const handleChange = () => setTheme(systemTheme());
+ mediaQuery.addEventListener("change", handleChange);
+ return () => mediaQuery.removeEventListener("change", handleChange);
+ }, [setTheme]);
+
+ // ⌘B lives in SidebarProvider (shadcn's built-in shortcut), which routes
+ // through onOpenChange back into the ui-store.
+ useEffect(() => {
+ const handleKeyDown = (event: KeyboardEvent) => {
+ if ((event.metaKey || event.ctrlKey) && /^[1-9]$/.test(event.key)) {
+ const workspace = workspaces[Number(event.key) - 1];
+ if (workspace) {
+ event.preventDefault();
+ void navigate({ to: "/projects/$projectId", params: { projectId: workspace.id } });
+ }
+ }
+ };
+ window.addEventListener("keydown", handleKeyDown);
+ return () => window.removeEventListener("keydown", handleKeyDown);
+ }, [navigate, workspaces]);
+
+ 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. */}
+
+
+
+
+ );
+}
diff --git a/frontend/src/renderer/routes/index.tsx b/frontend/src/renderer/routes/index.tsx
deleted file mode 100644
index 9d84ea16a..000000000
--- a/frontend/src/renderer/routes/index.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import { createFileRoute } from "@tanstack/react-router";
-import { App } from "../App";
-
-export const Route = createFileRoute("/")({
- component: App,
-});
diff --git a/frontend/src/renderer/routes/workspaces.$workspaceId.tsx b/frontend/src/renderer/routes/workspaces.$workspaceId.tsx
deleted file mode 100644
index 23ee006bd..000000000
--- a/frontend/src/renderer/routes/workspaces.$workspaceId.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { createFileRoute } from "@tanstack/react-router";
-import { App } from "../App";
-
-export const Route = createFileRoute("/workspaces/$workspaceId")({
- component: WorkspaceRoute,
-});
-
-function WorkspaceRoute() {
- const { workspaceId } = Route.useParams();
- return ;
-}
diff --git a/frontend/src/renderer/routes/workspaces.$workspaceId_.sessions.$sessionId.tsx b/frontend/src/renderer/routes/workspaces.$workspaceId_.sessions.$sessionId.tsx
deleted file mode 100644
index 4ebff9898..000000000
--- a/frontend/src/renderer/routes/workspaces.$workspaceId_.sessions.$sessionId.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { createFileRoute } from "@tanstack/react-router";
-import { App } from "../App";
-
-export const Route = createFileRoute("/workspaces/$workspaceId_/sessions/$sessionId")({
- component: SessionRoute,
-});
-
-function SessionRoute() {
- const { workspaceId, sessionId } = Route.useParams();
- return ;
-}
diff --git a/frontend/src/renderer/stores/ui-store.ts b/frontend/src/renderer/stores/ui-store.ts
index 8ae619a1b..fd33ebb06 100644
--- a/frontend/src/renderer/stores/ui-store.ts
+++ b/frontend/src/renderer/stores/ui-store.ts
@@ -1,27 +1,30 @@
import { create } from "zustand";
export type Theme = "light" | "dark";
-/** Orchestrator-led: the app lands on the orchestrator; a worker row drills in. */
+/** Whether a terminal pane shows the orchestrator or a worker session. */
export type WorkbenchView = "orchestrator" | "session";
-/** Worker topbar view toggles — Changes (Git rail) is the default. */
+/** Worker detail view toggles — Changes (Git rail) is the default. */
export type WorkbenchTab = "changes" | "files" | "terminal";
+// Selection (which project/session is open) now lives in the URL — the router
+// is the single source of truth, read via route params. This store holds only
+// ephemeral, route-independent UI: theme, sidebar/inspector collapse, and the
+// active workbench tab within a session.
type UiState = {
- view: WorkbenchView;
workbenchTab: WorkbenchTab;
isSidebarOpen: boolean;
- selectedSessionId: string | null;
- selectedWorkspaceId: string | null;
+ isInspectorOpen: boolean;
theme: Theme;
setWorkbenchTab: (tab: WorkbenchTab) => void;
- setSystemTheme: (theme: Theme) => void;
+ setTheme: (theme: Theme) => void;
+ toggleTheme: () => void;
toggleSidebar: () => void;
- selectOrchestrator: () => void;
- selectWorkspace: (workspaceId: string) => void;
- selectSession: (sessionId: string, workspaceId?: string) => void;
+ toggleInspector: () => void;
};
const sidebarStorageKey = "ao.sidebar.open";
+const inspectorStorageKey = "ao.inspector.open";
+const themeStorageKey = "ao.theme";
function getLocalStorage() {
if (typeof window === "undefined" || !window.localStorage) return null;
@@ -32,34 +35,52 @@ function initialSidebarOpen() {
return getLocalStorage()?.getItem(sidebarStorageKey) !== "false";
}
-function initialTheme(): Theme {
- if (typeof window === "undefined") return "dark";
+function initialInspectorOpen() {
+ return getLocalStorage()?.getItem(inspectorStorageKey) !== "false";
+}
+function systemTheme(): Theme {
+ if (typeof window === "undefined") return "dark";
return window.matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark";
}
+function initialTheme(): Theme {
+ const stored = getLocalStorage()?.getItem(themeStorageKey);
+ if (stored === "light" || stored === "dark") return stored;
+ return systemTheme();
+}
+
+export function readStoredTheme(): Theme | null {
+ const stored = getLocalStorage()?.getItem(themeStorageKey);
+ return stored === "light" || stored === "dark" ? stored : null;
+}
+
export const useUiStore = create((set) => ({
- view: "orchestrator",
workbenchTab: "changes",
isSidebarOpen: initialSidebarOpen(),
- selectedSessionId: null,
- selectedWorkspaceId: null,
+ isInspectorOpen: initialInspectorOpen(),
theme: initialTheme(),
setWorkbenchTab: (workbenchTab) => set({ workbenchTab }),
- setSystemTheme: (theme) => set({ theme }),
+ setTheme: (theme) => {
+ getLocalStorage()?.setItem(themeStorageKey, theme);
+ set({ theme });
+ },
+ toggleTheme: () =>
+ set((state) => {
+ const theme = state.theme === "dark" ? "light" : "dark";
+ getLocalStorage()?.setItem(themeStorageKey, theme);
+ return { theme };
+ }),
toggleSidebar: () =>
set((state) => {
const isSidebarOpen = !state.isSidebarOpen;
getLocalStorage()?.setItem(sidebarStorageKey, String(isSidebarOpen));
return { isSidebarOpen };
}),
- selectOrchestrator: () => set({ view: "orchestrator" }),
- selectWorkspace: (selectedWorkspaceId) => set({ selectedWorkspaceId }),
- selectSession: (selectedSessionId, workspaceId) =>
- set((state) => ({
- selectedSessionId,
- selectedWorkspaceId: workspaceId ?? state.selectedWorkspaceId,
- view: "session",
- workbenchTab: "changes",
- })),
+ toggleInspector: () =>
+ set((state) => {
+ const isInspectorOpen = !state.isInspectorOpen;
+ getLocalStorage()?.setItem(inspectorStorageKey, String(isInspectorOpen));
+ return { isInspectorOpen };
+ }),
}));
diff --git a/frontend/src/renderer/styles.css b/frontend/src/renderer/styles.css
index 8cc7748bf..991bf166b 100644
--- a/frontend/src/renderer/styles.css
+++ b/frontend/src/renderer/styles.css
@@ -10,19 +10,37 @@
--font-sans:
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Helvetica Neue",
sans-serif;
- --font-mono: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+ /* Nerd Font stack (ported from yyork): the terminal reads --font-mono so
+ * agent TUIs get powerline separators and file-type icons. These are
+ * system-installed fonts — the app bundles none — and the browser picks the
+ * first one present, falling back to plain monospace (no icon glyphs) if a
+ * user has no Nerd Font. JetBrainsMono Nerd Font is the primary target. */
+ --font-mono:
+ "JetBrainsMono Nerd Font Mono", "JetBrainsMono Nerd Font", "FiraCode Nerd Font Mono", "FiraCode Nerd Font",
+ "MesloLGS NF", "CaskaydiaCove Nerd Font Mono", "CaskaydiaCove Nerd Font", "Hack Nerd Font Mono", "Hack Nerd Font",
+ "Symbols Nerd Font Mono", "Symbols Nerd Font", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+ "Liberation Mono", "Courier New", monospace;
/* Surfaces */
--color-background: var(--bg);
--color-foreground: var(--fg);
--color-surface: var(--bg-1);
--color-card: var(--bg-1);
+ --color-card-foreground: var(--fg);
--color-raised: var(--bg-2);
--color-overlay: var(--bg-3);
--color-popover: var(--bg-1);
--color-popover-foreground: var(--fg);
- --color-sidebar: var(--bg);
+ /* shadcn input border uses border-input; map to our hairline border */
+ --color-input: var(--border);
+ --color-sidebar: var(--sidebar-bg);
--color-sidebar-foreground: var(--fg-muted);
+ --color-sidebar-primary: var(--accent);
+ --color-sidebar-primary-foreground: var(--accent-fg);
+ --color-sidebar-accent: var(--bg-2);
+ --color-sidebar-accent-foreground: var(--fg);
+ --color-sidebar-border: var(--border);
+ --color-sidebar-ring: var(--accent);
--color-terminal: var(--term-bg);
/* Text */
@@ -45,12 +63,22 @@
--color-border: var(--border);
--color-border-strong: var(--border-1);
- /* Status — map 1:1 to the daemon's derived statuses */
+ /* Status — map 1:1 to the daemon's derived statuses (agent-orchestrator
+ * palette): working=orange, needs-you=amber, mergeable=green, fail=red. */
+ --color-working: var(--orange);
--color-success: var(--green);
--color-success-strong: var(--green-strong);
--color-warning: var(--amber);
--color-error: var(--red);
+ /* shadcn "destructive" → our error red (Button destructive, Alert, etc.) */
+ --color-destructive: var(--red);
+ --color-destructive-foreground: #ffffff;
+
+ /* Theme-adaptive interactive surfaces (sidebar hovers, tabs, kanban chrome) */
+ --color-interactive-hover: var(--interactive-hover);
+ --color-interactive-active: var(--interactive-active);
+
--radius-sm: 4px;
--radius-md: 6px;
--radius-lg: 8px;
@@ -62,31 +90,41 @@
}
:root {
- /* Dark — primary. sRGB approximations of emdash's display-p3 neutral ramp. */
- --bg: #111111;
- --bg-1: #191919;
- --bg-2: #222222;
- --bg-3: #2a2a2a;
- --fg: #eeeeee;
- --fg-muted: #b4b4b4;
- --fg-passive: #6e6e6e;
- --border: #3a3a3a;
- --border-1: #484848;
- --accent: #5b9dff;
- --accent-fg: #0b0d12;
- --accent-weak: rgb(91 157 255 / 0.16);
- --accent-dim: #2a4a7a;
- --green: #6cb16c;
- --green-strong: #7bd88f;
- --amber: #ffcc4a;
- --red: #d4544f;
- --term-bg: #161616;
+ /* Dark — cloned from the agent-orchestrator web app (packages/web). #0a0b0d
+ * base, #15171b is the only bordered surface, hairline white-alpha lines,
+ * blue accent, orange=working / amber=needs-you / green=mergeable / red=fail. */
+ --bg: #0a0b0d;
+ --bg-1: #15171b;
+ --bg-2: #1b1d22;
+ --bg-3: #212329;
+ --fg: #f4f5f7;
+ --fg-muted: #9ba1aa;
+ --fg-passive: #646a73;
+ --border: rgb(255 255 255 / 0.06);
+ --border-1: rgb(255 255 255 / 0.1);
+ --accent: #4d8dff;
+ --accent-fg: #ffffff;
+ --accent-weak: rgb(77 141 255 / 0.16);
+ --accent-dim: #24406e;
+ --orange: #f59f4c;
+ --green: #74b98a;
+ --green-strong: #74b98a;
+ --amber: #e8c14a;
+ --red: #ef6b6b;
+ /* Terminal — dark palette (light override below). */
+ --term-bg: #15171b;
--term-fg: #d7d7d2;
- --term-green: #7bd88f;
+ --term-green: #74b98a;
--term-dim: #7c7c7c;
- --term-blue: #5b9dff;
- --term-amber: #ffcc4a;
- --shadow: 0 1px 0 rgb(0 0 0 / 0.4), 0 12px 32px rgb(0 0 0 / 0.45);
+ --term-blue: #4d8dff;
+ --term-amber: #e8c14a;
+ --shadow: 0 1px 0 rgb(0 0 0 / 0.4), 0 12px 32px rgb(0 0 0 / 0.5);
+ /* Sidebar surface sits a step below --bg (cloned #08090b). */
+ --sidebar-bg: #08090b;
+ --interactive-hover: rgb(255 255 255 / 0.04);
+ --interactive-active: rgb(255 255 255 / 0.07);
+ --kanban-column-bg: rgb(255 255 255 / 0.018);
+ --kanban-pending-glow: rgb(255 255 255 / 0.02);
}
:root[data-theme="light"] {
@@ -104,17 +142,22 @@
--accent-fg: #ffffff;
--accent-weak: rgb(37 99 235 / 0.12);
--accent-dim: #bcd2f7;
+ --sidebar-bg: var(--bg);
+ --orange: #c2410c;
--green: #1a7f37;
--green-strong: #1a7f37;
--amber: #9a6b00;
--red: #c0392b;
- /* Terminal keeps its own dark palette in both themes (it is the agent CLI). */
- --term-bg: #161616;
- --term-fg: #d7d7d2;
- --term-green: #7bd88f;
- --term-dim: #7c7c7c;
- --term-blue: #5b9dff;
- --term-amber: #ffcc4a;
+ --interactive-hover: rgb(0 0 0 / 0.04);
+ --interactive-active: rgb(0 0 0 / 0.07);
+ --kanban-column-bg: rgb(0 0 0 / 0.02);
+ --kanban-pending-glow: rgb(0 0 0 / 0.03);
+ --term-bg: #fafafa;
+ --term-fg: #24292f;
+ --term-green: #1a7f37;
+ --term-dim: #6b7280;
+ --term-blue: #2563eb;
+ --term-amber: #9a6b00;
--shadow: 0 1px 0 rgb(0 0 0 / 0.03), 0 12px 30px rgb(20 30 50 / 0.1);
}
@@ -150,6 +193,14 @@ select {
height: 100%;
}
+:root[data-theme="light"] .xterm .xterm-viewport::-webkit-scrollbar-thumb {
+ background: rgb(0 0 0 / 0.12);
+}
+
+:root[data-theme="light"] .xterm .xterm-viewport:hover::-webkit-scrollbar-thumb {
+ background: rgb(0 0 0 / 0.2);
+}
+
@keyframes status-pulse {
0%,
100% {
@@ -179,3 +230,746 @@ select {
transform: translate(-50%, -50%) scale(1);
}
}
+
+/* ── Resizable panel handles (sidebar + inspector) ──────────────────────── */
+.resize-handle {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ width: 7px;
+ z-index: 5;
+ cursor: col-resize;
+ background: transparent;
+ touch-action: none;
+}
+
+.resize-handle--right {
+ right: -3px;
+}
+
+.resize-handle--left {
+ left: -3px;
+}
+
+.resize-handle::after {
+ content: "";
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 50%;
+ width: 1px;
+ transform: translateX(-50%);
+ background: transparent;
+ transition: background 0.12s ease;
+}
+
+.resize-handle:hover::after,
+body.is-resizing-x .resize-handle::after {
+ background: var(--color-accent);
+}
+
+body.is-resizing-x {
+ cursor: col-resize;
+ user-select: none;
+}
+
+/* No width transition while actively dragging the sidebar resize handle
+ * (shadcn's sidebar animates width for collapse/expand). */
+body.is-resizing-x [data-slot="sidebar-gap"],
+body.is-resizing-x [data-slot="sidebar-container"] {
+ transition: none;
+}
+
+/* ── Dashboard / session topbar (agent-orchestrator .dashboard-app-header) ─ */
+.dashboard-app-header {
+ display: flex;
+ height: 56px;
+ flex-shrink: 0;
+ align-items: center;
+ gap: 13px;
+ padding: 0 20px;
+ border-bottom: 1px solid var(--border);
+ background: var(--bg);
+ z-index: 10;
+}
+
+.dashboard-app-header__project {
+ font-size: 14.5px;
+ font-weight: 600;
+ letter-spacing: -0.01em;
+ line-height: 1;
+ color: var(--fg);
+ white-space: nowrap;
+}
+
+.topbar-project-line {
+ display: inline-flex;
+ min-width: 0;
+ align-items: center;
+ gap: 6px;
+}
+
+.dashboard-app-header__tabs {
+ display: inline-flex;
+ align-items: center;
+ gap: 2px;
+}
+
+.dashboard-app-header__tab {
+ display: inline-flex;
+ height: 28px;
+ align-items: center;
+ border-radius: 6px;
+ padding: 0 11px;
+ font-size: 12.5px;
+ line-height: 1;
+ color: var(--fg-passive);
+ transition:
+ background 0.12s ease,
+ color 0.12s ease;
+}
+
+.dashboard-app-header__tab:hover {
+ color: var(--fg);
+}
+
+.dashboard-app-header__tab.is-active {
+ background: var(--interactive-active);
+ color: var(--fg);
+}
+
+.dashboard-app-header__spacer {
+ flex: 1;
+ min-width: 0;
+}
+
+.dashboard-app-header__actions {
+ display: flex;
+ flex-shrink: 0;
+ align-items: center;
+ gap: 6px;
+}
+
+.dashboard-app-header__icon-btn {
+ display: grid;
+ width: 34px;
+ height: 34px;
+ place-items: center;
+ border-radius: 7px;
+ color: var(--fg-muted);
+ transition:
+ background 0.12s ease,
+ color 0.12s ease;
+}
+
+.dashboard-app-header__icon-btn:hover {
+ background: var(--interactive-hover);
+ color: var(--fg);
+}
+
+.dashboard-app-header__primary-btn {
+ display: inline-flex;
+ height: 34px;
+ align-items: center;
+ gap: 6px;
+ border-radius: 7px;
+ padding: 0 15px;
+ font-size: 13px;
+ font-weight: 600;
+ line-height: 1;
+ background: var(--accent);
+ color: var(--accent-fg);
+ transition: filter 0.12s ease;
+}
+
+.dashboard-app-header__primary-btn:hover {
+ filter: brightness(1.08);
+}
+
+.dashboard-app-header__primary-btn:disabled {
+ opacity: 0.6;
+}
+
+.dashboard-app-header__accent-btn {
+ display: inline-flex;
+ height: 34px;
+ align-items: center;
+ gap: 6px;
+ border-radius: 7px;
+ border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
+ padding: 0 15px;
+ font-size: 13px;
+ font-weight: 600;
+ line-height: 1;
+ background: var(--accent-weak);
+ color: var(--accent);
+ transition: background 0.12s ease;
+}
+
+.dashboard-app-header__accent-btn:hover {
+ background: color-mix(in srgb, var(--accent-weak) 80%, transparent);
+}
+
+.session-topbar.dashboard-app-header {
+ height: 56px;
+ gap: 13px;
+ padding: 0 16px 0 14px;
+}
+
+.session-topbar__lead {
+ display: flex;
+ min-width: 0;
+ align-items: center;
+ gap: 13px;
+}
+
+/* ── macOS titlebar cluster (TitlebarNav) ─────────────────────────────────
+ * Fixed beside the traffic lights so the toggle/history buttons occupy the
+ * exact same spot in both sidebar states. Lights span x=14–66 (y center 20);
+ * 28px buttons in a 40px strip share that center, and the 6.5px icon inset
+ * puts the first glyph at ~76px — the standard 10px gap after the lights. */
+.titlebar-nav {
+ position: fixed;
+ top: 0;
+ left: 70px;
+ z-index: 20;
+ display: flex;
+ height: 40px;
+ align-items: center;
+ gap: 2px;
+}
+
+.titlebar-nav__btn {
+ width: 28px;
+ height: 28px;
+}
+
+/* Collapsed-rail topbars start their content past the fixed cluster:
+ * cluster right edge 70 + 3×28 + 2×2 = 158px, + the header's 13px gap,
+ * − the 48px icon rail = 123px. Transition mirrors the sidebar's width
+ * animation (200ms linear) so content tracks the moving sidebar edge. */
+.dashboard-app-header {
+ transition: padding-left 0.2s linear;
+}
+
+.dashboard-app-header.is-under-titlebar-nav {
+ padding-left: 123px;
+}
+
+.topbar-project-pills-group {
+ display: inline-flex;
+ min-width: 0;
+ align-items: center;
+ gap: 8px;
+}
+
+.topbar-identity-sep {
+ font-size: 12px;
+ line-height: 1;
+ color: var(--fg-passive);
+}
+
+.session-detail-mode-badge {
+ display: inline-flex;
+ height: 24px;
+ align-items: center;
+ gap: 4px;
+ border: 1px solid var(--border);
+ border-radius: 6px;
+ padding: 0 8px;
+ font-size: 10px;
+ font-weight: 600;
+ line-height: 1;
+ letter-spacing: 0.05em;
+}
+
+.session-detail-mode-badge--neutral {
+ background: var(--surface);
+ color: var(--fg-muted);
+}
+
+.session-topbar__identity {
+ display: flex;
+ min-width: 0;
+ align-items: center;
+ gap: 11px;
+}
+
+.session-topbar__branch {
+ display: inline-flex;
+ min-width: 0;
+ align-items: center;
+ gap: 5px;
+ font-family: var(--font-mono);
+ font-size: 10.5px;
+ line-height: 1;
+ color: var(--fg-passive);
+}
+
+/* ── Session inspector rail (agent-orchestrator SessionInspector) ───────── */
+.session-inspector {
+ display: flex;
+ height: 100%;
+ min-height: 0;
+ flex-direction: column;
+ overflow: hidden;
+ background: var(--bg);
+ border-left: 1px solid var(--border);
+}
+
+.session-inspector__tabs {
+ display: flex;
+ align-items: center;
+ gap: 3px;
+ height: 47px;
+ flex-shrink: 0;
+ padding: 0 11px;
+ border-bottom: 1px solid var(--border);
+}
+
+.session-inspector__tab {
+ flex: 1;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ gap: 6px;
+ min-width: 0;
+ padding: 7px 6px;
+ border-radius: 7px;
+ font-size: 11.5px;
+ font-weight: 600;
+ color: var(--fg-passive);
+ cursor: pointer;
+ transition:
+ background 0.12s ease,
+ color 0.12s ease;
+}
+
+.session-inspector__tab:hover {
+ background: var(--interactive-hover);
+ color: var(--fg);
+}
+
+.session-inspector__tab.is-active {
+ background: var(--interactive-active);
+ color: var(--fg);
+}
+
+.session-inspector__tab-icon {
+ display: inline-flex;
+ flex-shrink: 0;
+}
+
+.session-inspector__tab-icon svg {
+ width: 14px;
+ height: 14px;
+}
+
+.session-inspector__tab-label {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.session-inspector__body {
+ flex: 1;
+ min-height: 0;
+ overflow-y: auto;
+ padding: 18px 18px 40px;
+}
+
+/* Inspector resize handle (shadcn resizable separator, AO visual): a 7px
+ * transparent grab strip whose centered 1px line lights accent on hover, drag
+ * (rrp sets data-separator="active"), and keyboard focus. */
+.session-inspector__resize-handle {
+ width: 7px;
+ cursor: col-resize;
+ background: transparent;
+ touch-action: none;
+}
+
+.session-inspector__resize-handle::after {
+ content: "";
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 50%;
+ width: 1px;
+ transform: translateX(-50%);
+ background: transparent;
+ transition: background 0.12s ease;
+}
+
+.session-inspector__resize-handle:hover::after,
+.session-inspector__resize-handle:focus-visible::after,
+.session-inspector__resize-handle[data-separator="active"]::after {
+ background: var(--accent);
+}
+
+/* Collapse/expand animation for the inspector panel: rrp v4 drives panel
+ * sizes via flex-grow, which is animatable. Suppress it while the separator
+ * is actively dragged so resizing tracks the pointer 1:1. */
+.session-split #inspector[data-panel] {
+ transition: flex-grow 0.2s linear;
+}
+
+.session-split:has([data-separator="active"]) #inspector[data-panel] {
+ transition: none;
+}
+
+.inspector-section {
+ margin-bottom: 22px;
+}
+
+.inspector-section__head {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 11px;
+ font-size: 10.5px;
+ font-weight: 600;
+ text-transform: uppercase;
+ letter-spacing: 0.09em;
+ color: var(--fg-passive);
+}
+
+.inspector-section__link {
+ font-size: 11px;
+ font-weight: 500;
+ text-transform: none;
+ letter-spacing: 0;
+ color: var(--accent);
+}
+
+.inspector-section__link:hover {
+ text-decoration: underline;
+}
+
+.inspector-empty {
+ font-size: 12px;
+ color: var(--fg-muted);
+ line-height: 1.5;
+}
+
+.inspector-empty--center {
+ padding: 24px 8px;
+ text-align: center;
+}
+
+.inspector-empty--browser {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 9px;
+ padding: 48px 18px;
+ text-align: center;
+}
+
+.inspector-empty--browser svg {
+ width: 30px;
+ height: 30px;
+ color: var(--fg-passive);
+}
+
+.inspector-empty--browser p {
+ font-size: 12.5px;
+ color: var(--fg-muted);
+}
+
+.inspector-empty--browser span {
+ font-size: 11.5px;
+ color: var(--fg-passive);
+ line-height: 1.5;
+}
+
+.inspector-kv {
+ display: flex;
+ flex-direction: column;
+ gap: 1px;
+}
+
+.inspector-kv__row {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ padding: 6px 2px;
+ font-size: 12.5px;
+}
+
+.inspector-kv__k {
+ width: 74px;
+ flex-shrink: 0;
+ color: var(--fg-muted);
+}
+
+.inspector-kv__v {
+ min-width: 0;
+ color: var(--fg);
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.inspector-kv__v--mono {
+ font-family: var(--font-mono);
+ font-size: 11.5px;
+}
+
+.inspector-timeline {
+ position: relative;
+ padding-left: 20px;
+}
+
+.inspector-timeline::before {
+ content: "";
+ position: absolute;
+ left: 5px;
+ top: 4px;
+ bottom: 6px;
+ width: 1px;
+ background: var(--border);
+}
+
+.inspector-timeline__ev {
+ position: relative;
+ padding: 0 0 15px;
+}
+
+.inspector-timeline__ev:last-child {
+ padding-bottom: 0;
+}
+
+.inspector-timeline__node {
+ position: absolute;
+ left: -18px;
+ top: 3px;
+ width: 9px;
+ height: 9px;
+ border-radius: 50%;
+ background: var(--fg-passive);
+ box-shadow: 0 0 0 3px var(--bg);
+}
+
+.inspector-timeline__ev--now .inspector-timeline__node {
+ background: var(--orange);
+ box-shadow:
+ 0 0 0 3px var(--bg),
+ 0 0 8px var(--orange);
+}
+
+.inspector-timeline__ev--good .inspector-timeline__node {
+ background: var(--green);
+}
+
+.inspector-timeline__ev--warn .inspector-timeline__node {
+ background: var(--amber);
+}
+
+.inspector-timeline__et {
+ font-size: 12px;
+ color: var(--fg);
+ line-height: 1.45;
+}
+
+.inspector-timeline__et b {
+ font-weight: 600;
+}
+
+.inspector-timeline__badge {
+ display: inline-flex;
+ vertical-align: middle;
+}
+
+.inspector-timeline__detail {
+ color: var(--fg-muted);
+}
+
+.inspector-timeline__ets {
+ font-size: 10.5px;
+ color: var(--fg-passive);
+ font-family: var(--font-mono);
+ margin-top: 2px;
+}
+
+/* Changes tab — git rail (second screenshot) */
+.inspector-changes__head {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ margin: -6px -6px 10px;
+ padding: 0 6px 10px;
+ border-bottom: 1px solid var(--border);
+}
+
+.inspector-changes__title {
+ font-size: 13px;
+ font-weight: 600;
+ color: var(--fg);
+}
+
+.inspector-changes__count {
+ font-family: var(--font-mono);
+ font-size: 11px;
+ color: var(--fg-passive);
+}
+
+.inspector-changes__actions {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ margin-bottom: 8px;
+ font-size: 12px;
+}
+
+.inspector-changes__action {
+ display: inline-flex;
+ align-items: center;
+ gap: 6px;
+ color: var(--fg-muted);
+ transition: color 0.12s ease;
+}
+
+.inspector-changes__action:hover {
+ color: var(--fg);
+}
+
+.inspector-changes__action--danger {
+ color: var(--red);
+}
+
+.inspector-changes__action--danger:hover {
+ opacity: 0.85;
+}
+
+.inspector-changes__action--end {
+ margin-left: auto;
+}
+
+.inspector-changes__list {
+ min-height: 120px;
+ margin-bottom: 12px;
+}
+
+.inspector-changes__file {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ height: 28px;
+ padding: 0 8px;
+ border-radius: 6px;
+ font-family: var(--font-mono);
+ font-size: 12px;
+ transition: background 0.12s ease;
+}
+
+.inspector-changes__file:hover {
+ background: var(--interactive-hover);
+}
+
+.inspector-changes__path {
+ min-width: 0;
+ flex: 1;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ color: var(--fg);
+}
+
+.inspector-changes__add {
+ flex-shrink: 0;
+ color: var(--green);
+}
+
+.inspector-changes__del {
+ flex-shrink: 0;
+ color: var(--red);
+}
+
+.inspector-changes__stage {
+ width: 13px;
+ height: 13px;
+ flex-shrink: 0;
+ color: var(--fg-passive);
+}
+
+.inspector-changes__stage.is-staged {
+ color: var(--accent);
+}
+
+.inspector-changes__commit {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ padding-top: 12px;
+ border-top: 1px solid var(--border);
+}
+
+.inspector-changes__input,
+.inspector-changes__textarea {
+ width: 100%;
+ border-radius: 6px;
+ border: 1px solid var(--border);
+ background: transparent;
+ padding: 6px 10px;
+ font-size: 12.5px;
+ color: var(--fg);
+}
+
+.inspector-changes__input::placeholder,
+.inspector-changes__textarea::placeholder {
+ color: var(--fg-passive);
+}
+
+.inspector-changes__input:focus-visible,
+.inspector-changes__textarea:focus-visible {
+ border-color: var(--accent);
+ outline: 2px solid var(--accent-weak);
+ outline-offset: 0;
+}
+
+.inspector-changes__textarea {
+ resize: none;
+}
+
+.inspector-changes__footer {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ margin-top: 12px;
+ padding-top: 12px;
+ border-top: 1px solid var(--border);
+ font-family: var(--font-mono);
+ font-size: 11px;
+ color: var(--fg-passive);
+}
+
+.inspector-changes__footer svg {
+ width: 12px;
+ height: 12px;
+ flex-shrink: 0;
+}
+
+.inspector-changes__branch {
+ min-width: 0;
+ flex: 1;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ color: var(--fg-muted);
+}
+
+.inspector-changes__pr {
+ display: inline-flex;
+ flex-shrink: 0;
+ align-items: center;
+ gap: 4px;
+ border-radius: 6px;
+ border: 1px solid var(--border);
+ padding: 2px 8px;
+ color: var(--fg-muted);
+ transition: background 0.12s ease;
+}
+
+.inspector-changes__pr:hover {
+ background: var(--interactive-hover);
+}
diff --git a/frontend/src/renderer/types/workspace.test.ts b/frontend/src/renderer/types/workspace.test.ts
index ccbfb1b0e..deefad752 100644
--- a/frontend/src/renderer/types/workspace.test.ts
+++ b/frontend/src/renderer/types/workspace.test.ts
@@ -1,11 +1,14 @@
import { describe, expect, it } from "vitest";
import {
+ attentionZone,
sessionIsActive,
sessionNeedsAttention,
toAgentProvider,
toSessionStatus,
workerDisplayStatus,
workerStatusPulses,
+ type AttentionZone,
+ type SessionStatus,
type WorkspaceSession,
} from "./workspace";
@@ -26,7 +29,6 @@ function sessionWith(overrides: Partial): WorkspaceSession {
describe("toSessionStatus", () => {
it("passes through a known status", () => {
expect(toSessionStatus("mergeable")).toBe("mergeable");
- expect(toSessionStatus("no_signal")).toBe("no_signal");
});
it("overrides to terminated when the session is terminated", () => {
@@ -51,7 +53,6 @@ describe("workerDisplayStatus", () => {
["needs_input", "needs_you"],
["changes_requested", "needs_you"],
["review_pending", "needs_you"],
- ["no_signal", "needs_you"],
["ci_failed", "ci_failed"],
["approved", "mergeable"],
["mergeable", "mergeable"],
@@ -106,3 +107,29 @@ describe("toAgentProvider", () => {
expect(toAgentProvider(undefined)).toBe("codex");
});
});
+
+describe("attentionZone", () => {
+ const cases: Array<[SessionStatus, AttentionZone]> = [
+ ["mergeable", "merge"],
+ ["approved", "merge"],
+ ["needs_input", "action"],
+ ["ci_failed", "action"],
+ ["changes_requested", "action"],
+ ["review_pending", "pending"],
+ ["pr_open", "pending"],
+ ["draft", "pending"],
+ ["working", "working"],
+ ["idle", "working"],
+ ["merged", "done"],
+ ["terminated", "done"],
+ ];
+
+ it.each(cases)("buckets %s into the %s zone", (status, zone) => {
+ expect(attentionZone(sessionWith({ status }))).toBe(zone);
+ });
+
+ it("prioritizes merge as the highest-ROI zone", () => {
+ // merge is checked before action/pending so an approved PR always surfaces.
+ expect(attentionZone(sessionWith({ status: "approved" }))).toBe("merge");
+ });
+});
diff --git a/frontend/src/renderer/types/workspace.ts b/frontend/src/renderer/types/workspace.ts
index 70ad080bf..d3db3178f 100644
--- a/frontend/src/renderer/types/workspace.ts
+++ b/frontend/src/renderer/types/workspace.ts
@@ -10,7 +10,6 @@ export type SessionStatus =
| "merged"
| "needs_input"
| "idle"
- | "no_signal"
| "terminated";
const sessionStatuses = new Set([
@@ -25,7 +24,6 @@ const sessionStatuses = new Set([
"merged",
"needs_input",
"idle",
- "no_signal",
"terminated",
]);
@@ -67,6 +65,8 @@ export type ChangedFile = {
staged?: boolean;
};
+export type SessionKind = "worker" | "orchestrator";
+
export type WorkspaceSession = {
id: string;
terminalHandleId?: string;
@@ -74,8 +74,12 @@ export type WorkspaceSession = {
workspaceName: string;
title: string;
provider: AgentProvider;
+ kind?: SessionKind;
branch: string;
status: SessionStatus;
+ /** ISO timestamp from the daemon — used for relative time in the inspector. */
+ createdAt?: string;
+ /** ISO timestamp from the daemon. */
updatedAt: string;
/** The session's git diff against its base, when known. */
changedFiles?: ChangedFile[];
@@ -101,9 +105,6 @@ export function workerDisplayStatus(session: WorkspaceSession): WorkerDisplaySta
case "needs_input":
case "changes_requested":
case "review_pending":
- // no_signal: the daemon has never heard from this agent — a human
- // should look at the pane, so it surfaces as needs-you.
- case "no_signal":
return "needs_you";
case "ci_failed":
return "ci_failed";
@@ -118,6 +119,22 @@ export function workerDisplayStatus(session: WorkspaceSession): WorkerDisplaySta
}
}
+export function isOrchestratorSession(session: WorkspaceSession): boolean {
+ return session.kind === "orchestrator" || session.id.endsWith("-orchestrator");
+}
+
+export function findProjectOrchestrator(
+ workspaces: WorkspaceSummary[],
+ projectId: string,
+): WorkspaceSession | undefined {
+ const workspace = workspaces.find((w) => w.id === projectId);
+ return workspace?.sessions.find(isOrchestratorSession);
+}
+
+export function workerSessions(sessions: WorkspaceSession[]): WorkspaceSession[] {
+ return sessions.filter((s) => !isOrchestratorSession(s));
+}
+
export function sessionIsActive(session: WorkspaceSession): boolean {
return session.status !== "merged" && session.status !== "terminated";
}
@@ -144,6 +161,55 @@ export function workerStatusPulses(status: WorkerDisplayStatus): boolean {
return status === "working" || status === "needs_you";
}
+/**
+ * Kanban attention zone, ordered by human-action urgency — ported from
+ * agent-orchestrator's getAttentionLevel (packages/web/src/lib/types.ts),
+ * collapsed to its default "simple" set and rebound to reverbcode's
+ * {@link SessionStatus}. The board groups sessions into these columns so the
+ * highest-ROrI work (a one-click merge) sits leftmost.
+ */
+export type AttentionZone = "merge" | "action" | "pending" | "working" | "done";
+
+/** Columns left→right, most-urgent first. "done" is the archive column. */
+export const attentionZoneOrder: AttentionZone[] = ["merge", "action", "pending", "working", "done"];
+
+export const attentionZoneLabel: Record = {
+ merge: "Ready to merge",
+ action: "Needs you",
+ pending: "Pending",
+ working: "Working",
+ done: "Done",
+};
+
+export function attentionZone(session: WorkspaceSession): AttentionZone {
+ switch (session.status) {
+ // Terminal — archive.
+ case "merged":
+ case "terminated":
+ return "done";
+ // One click to clear — highest ROI, checked first.
+ case "approved":
+ case "mergeable":
+ return "merge";
+ // Agent waiting on a human (respond) or a problem to investigate (review);
+ // agent-orchestrator collapses these into one "action" zone by default.
+ case "needs_input":
+ case "ci_failed":
+ case "changes_requested":
+ return "action";
+ // Waiting on an external reviewer / CI — nothing to do right now.
+ case "review_pending":
+ case "pr_open":
+ case "draft":
+ return "pending";
+ // Agents doing their thing — don't interrupt.
+ case "working":
+ case "idle":
+ default:
+ return "working";
+ }
+}
+
export type WorkspaceSummary = {
id: string;
name: string;
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
index d2bb8837e..45e11d243 100644
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -17,7 +17,11 @@
"noUnusedLocals": true,
"noUnusedParameters": true,
"noImplicitReturns": true,
- "noFallthroughCasesInSwitch": true
+ "noFallthroughCasesInSwitch": true,
+ "baseUrl": ".",
+ "paths": {
+ "@/*": ["./src/renderer/*"]
+ }
},
"include": [
"src/**/*.ts",
diff --git a/frontend/vite.renderer.config.ts b/frontend/vite.renderer.config.ts
index 9db36de86..d5ede3499 100644
--- a/frontend/vite.renderer.config.ts
+++ b/frontend/vite.renderer.config.ts
@@ -1,7 +1,9 @@
// defineConfig comes from vitest/config (a superset of vite's) so the `test`
-// block below typechecks; the produced config is a plain vite config object.
+// block typechecks; vitest itself must be pointed at this file explicitly
+// (package.json test script) because it only auto-discovers vite.config.*.
import { defineConfig } from "vitest/config";
import type { Plugin } from "vite";
+import { fileURLToPath, URL } from "node:url";
import { TanStackRouterVite } from "@tanstack/router-plugin/vite";
import react from "@vitejs/plugin-react";
import tailwindcss from "@tailwindcss/vite";
@@ -37,6 +39,12 @@ const injectCspMeta: Plugin = {
};
export default defineConfig({
+ // "@/" → the renderer root (src/renderer), the shadcn/ui import convention.
+ resolve: {
+ alias: {
+ "@": fileURLToPath(new URL("./src/renderer", import.meta.url)),
+ },
+ },
// Dev proxy for VITE_NO_ELECTRON=1 browser preview — forwards /api and /mux
// to the daemon so the renderer can be tested against a running daemon from
// a plain browser without an Electron shell.
|