) => void;
+}) {
+ if (!hasWorktrees) {
+ return No worktrees
;
+ }
+
+ const allWorktrees: { path: string; branch: string }[] = [];
+ for (const child of children) {
+ allWorktrees.push({ path: child.cwd, branch: child.branch ?? child.name });
+ }
+ for (const wt of worktrees) {
+ if (!children.some((c) => c.cwd === wt.path)) {
+ allWorktrees.push({ path: wt.path, branch: wt.branch ?? "detached" });
+ }
+ }
+
+ return (
+
+ {allWorktrees.map((wt) => (
+
+ ))}
+
+ );
+}
+
+function SessionList({ sessions }: { sessions: SessionSummary[] }) {
+ return (
+
+ {sessions.map((session, i) => {
+ const meta = getSessionModeMeta(session.mode);
+ const Icon = meta.icon;
+ return (
+ 0 && "border-t border-border",
+ "text-foreground hover:bg-surface-1",
+ )}
+ >
+
+
+ {formatSessionLabel(session.label, session.mode)}
+
+ {meta.label}
+
+ );
+ })}
+
+ );
+}
+
+function EmptyState({ onAddProject }: { onAddProject: () => void }) {
+ return (
+
+
No projects yet
+
+ Projects appear automatically when an agent creates a session, or you can add one manually.
+
+
+
+
+
+
+
+
+ {loading && isEmpty && (
+
Loading PRs…
+ )}
+
+ {!loading && isEmpty && (
+
+ {error ?? "No pull requests found across your projects"}
+
+ )}
+
+ {!isEmpty && (
+
+
+
+ {groups.open.length > 0 && (
+
+ {groups.open.map((pr) => (
+
+ ))}
+
+ )}
+ {groups.draft.length > 0 && (
+
+ {groups.draft.map((pr) => (
+
+ ))}
+
+ )}
+ {groups.merged.length > 0 && (
+
+ {groups.merged.map((pr) => (
+
+ ))}
+
+ )}
+
+
+
+ )}
+
+
+
Pull Requests
+ scrollToGroup("pr-group-open")}
+ />
+ scrollToGroup("pr-group-draft")}
+ />
+ scrollToGroup("pr-group-merged")}
+ />
+
+ );
+}
diff --git a/apps/frontend/src/components/landing/git-dashboard/PRGroup.tsx b/apps/frontend/src/components/landing/git-dashboard/PRGroup.tsx
new file mode 100644
index 000000000..42fb6928a
--- /dev/null
+++ b/apps/frontend/src/components/landing/git-dashboard/PRGroup.tsx
@@ -0,0 +1,24 @@
+import type { LucideIcon } from "lucide-react";
+
+interface PRGroupProps {
+ id?: string;
+ title: string;
+ icon: LucideIcon;
+ count: number;
+ children: React.ReactNode;
+}
+
+export function PRGroup({ id, title, icon: Icon, count, children }: PRGroupProps) {
+ return (
+
+
+
+ {title}
+
+ {count}
+
+
+
{children}
+
+ {children}
+
+ );
+}
+
+export function AppSettingsDialog() {
+ const open = useAppStore((s) => s.settingsOpen);
+ const setOpen = useAppStore((s) => s.setSettingsOpen);
+ const [activeTab, setActiveTab] = useState("general");
+ const [themePreview, setThemePreview] = useState(false);
+
+ useEffect(() => {
+ if (!themePreview) return;
+ const handler = (e: KeyboardEvent) => {
+ if (e.key === "Escape") {
+ setThemePreview(false);
+ setOpen(true);
+ }
+ };
+ window.addEventListener("keydown", handler);
+ return () => window.removeEventListener("keydown", handler);
+ }, [themePreview, setOpen]);
+
+ // Force re-mount of tab content when dialog opens to ensure fresh state
+ const [mountKey, setMountKey] = useState(0);
+ useEffect(() => {
+ if (open) setMountKey((k) => k + 1);
+ }, [open]);
+
+ // Detect origin from the active session (if any)
+ const activeSessionId = useAppStore((s) => s.activeSessionId);
+ const visitedSessions = useAppStore((s) => s.visitedSessions);
+ const activeOrigin = activeSessionId
+ ? ((visitedSessions[activeSessionId]?.bootstrap.session.origin as string | undefined) ?? null)
+ : null;
+
+ // Fetch git user and config from daemon on open
+ const [gitUser, setGitUser] = useState();
+ const [legacyTabMode, setLegacyTabMode] = useState(false);
+
+ useEffect(() => {
+ if (!open) return;
+ fetch("/daemon/git/user")
+ .then((r) => (r.ok ? r.json() : null))
+ .then((data) => {
+ if (data?.gitUser) setGitUser(data.gitUser);
+ })
+ .catch(() => {});
+ fetch("/daemon/config")
+ .then((r) => (r.ok ? r.json() : null))
+ .then((data) => {
+ if (data?.config) {
+ configStore.init(data.config);
+ setLegacyTabMode(!!data.config.legacyTabMode);
+ }
+ })
+ .catch(() => {});
+ }, [open]);
+
+ // Daemon-routed fetch for tabs that need server calls without session context
+ const daemonFetch = useCallback((input: string, init?: RequestInit) => {
+ const path =
+ typeof input === "string" && input.startsWith("/api/") ? `/daemon${input.slice(4)}` : input;
+ return fetch(path, init);
+ }, []);
+
+ // AI provider state — fetched once when dialog opens
+ const [aiProviders, setAiProviders] = useState<
+ Array<{ id: string; name: string; capabilities: Record }>
+ >([]);
+ const [aiProviderId, setAiProviderId] = useState(
+ () => getAIProviderSettings().providerId,
+ );
+
+ // Re-read AI provider on each open (could have changed via per-surface settings)
+ useEffect(() => {
+ if (open) setAiProviderId(getAIProviderSettings().providerId);
+ }, [open]);
+
+ useEffect(() => {
+ if (!open) return;
+ const apiBase = activeSessionId ? `/s/${activeSessionId}/api` : null;
+ if (!apiBase) return;
+ fetch(`${apiBase}/ai/capabilities`)
+ .then((r) => (r.ok ? r.json() : null))
+ .then((data) => {
+ if (data?.providers) setAiProviders(data.providers);
+ })
+ .catch(() => {});
+ }, [open, activeSessionId]);
+
+ const handleAiProviderChange = useCallback((providerId: string | null) => {
+ setAiProviderId(providerId);
+ const current = getAIProviderSettings();
+ saveAIProviderSettings({ ...current, providerId });
+ }, []);
+
+ return (
+ <>
+
+
+ {themePreview &&
+ createPortal(
+
+
+
+
+
+ Theme Preview
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/apps/frontend/src/components/ui/button.tsx b/apps/frontend/src/components/ui/button.tsx
new file mode 100644
index 000000000..acf8c3d9e
--- /dev/null
+++ b/apps/frontend/src/components/ui/button.tsx
@@ -0,0 +1,77 @@
+import { Slot, Slottable } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import type * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+ "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-[13px] font-medium transition-[color,background-color,box-shadow] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+ {
+ variants: {
+ variant: {
+ default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+ destructive:
+ "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40",
+ outline:
+ "border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground",
+ secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+ ghost: "hover:bg-accent hover:text-accent-foreground",
+ link: "text-primary underline-offset-4 hover:underline",
+ },
+ size: {
+ default: "h-9 px-4 py-2",
+ xxs: "h-6 rounded-md gap-1.5 px-2.5",
+ xs: "h-7 rounded-md gap-1.5 px-2.5",
+ sm: "h-8 rounded-md gap-1.5 px-3",
+ lg: "h-10 rounded-md px-6",
+ icon: "size-9",
+ },
+ },
+ defaultVariants: {
+ variant: "default",
+ size: "default",
+ },
+ },
+);
+
+type ButtonIcon = React.ReactNode;
+
+function Button({
+ children,
+ className,
+ variant,
+ size,
+ asChild = false,
+ iconLeft,
+ iconRight,
+ ...props
+}: React.ComponentProps<"button"> &
+ VariantProps & {
+ asChild?: boolean;
+ iconLeft?: ButtonIcon;
+ iconRight?: ButtonIcon;
+ }) {
+ const Comp = asChild ? Slot : "button";
+
+ return (
+
+ {iconLeft ? (
+
+ {iconLeft}
+
+ ) : null}
+ {children}
+ {iconRight ? (
+
+ {iconRight}
+
+ ) : null}
+
+ );
+}
+
+export { Button, buttonVariants };
diff --git a/apps/frontend/src/components/ui/dialog.tsx b/apps/frontend/src/components/ui/dialog.tsx
new file mode 100644
index 000000000..1a98f2f22
--- /dev/null
+++ b/apps/frontend/src/components/ui/dialog.tsx
@@ -0,0 +1,106 @@
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+const Dialog = DialogPrimitive.Root;
+const DialogTrigger = DialogPrimitive.Trigger;
+const DialogPortal = DialogPrimitive.Portal;
+const DialogClose = DialogPrimitive.Close;
+
+const DialogOverlay = React.forwardRef<
+ React.ComponentRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+const DialogContent = React.forwardRef<
+ React.ComponentRef,
+ React.ComponentPropsWithoutRef & {
+ hideClose?: boolean;
+ }
+>(({ className, children, hideClose, ...props }, ref) => (
+
+
+
+ {children}
+ {!hideClose && (
+
+
+ Close
+
+ )}
+
+
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+function DialogHeader({ className, ...props }: React.HTMLAttributes) {
+ return (
+
+ );
+}
+
+const DialogTitle = React.forwardRef<
+ React.ComponentRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+
+const DialogDescription = React.forwardRef<
+ React.ComponentRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+export {
+ Dialog,
+ DialogPortal,
+ DialogOverlay,
+ DialogClose,
+ DialogTrigger,
+ DialogContent,
+ DialogHeader,
+ DialogTitle,
+ DialogDescription,
+};
diff --git a/apps/frontend/src/components/ui/input.tsx b/apps/frontend/src/components/ui/input.tsx
new file mode 100644
index 000000000..13fc29e98
--- /dev/null
+++ b/apps/frontend/src/components/ui/input.tsx
@@ -0,0 +1,21 @@
+import type * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+ return (
+
+ );
+}
+
+export { Input };
diff --git a/apps/frontend/src/components/ui/separator.tsx b/apps/frontend/src/components/ui/separator.tsx
new file mode 100644
index 000000000..856296e91
--- /dev/null
+++ b/apps/frontend/src/components/ui/separator.tsx
@@ -0,0 +1,28 @@
+"use client";
+
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import type * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Separator({
+ className,
+ orientation = "horizontal",
+ decorative = true,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ );
+}
+
+export { Separator };
diff --git a/apps/frontend/src/components/ui/sheet.tsx b/apps/frontend/src/components/ui/sheet.tsx
new file mode 100644
index 000000000..4873123f8
--- /dev/null
+++ b/apps/frontend/src/components/ui/sheet.tsx
@@ -0,0 +1,130 @@
+"use client";
+
+import { X } from "lucide-react";
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+import type * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Sheet({ ...props }: React.ComponentProps) {
+ return ;
+}
+
+function SheetTrigger({ ...props }: React.ComponentProps) {
+ return ;
+}
+
+function SheetClose({ ...props }: React.ComponentProps) {
+ return ;
+}
+
+function SheetPortal({ ...props }: React.ComponentProps) {
+ return ;
+}
+
+function SheetOverlay({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ );
+}
+
+function SheetContent({
+ className,
+ children,
+ side = "right",
+ ...props
+}: React.ComponentProps & {
+ side?: "top" | "right" | "bottom" | "left";
+}) {
+ return (
+
+
+
+ {children}
+
+
+ Close
+
+
+
+ );
+}
+
+function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ );
+}
+
+function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ );
+}
+
+function SheetTitle({ className, ...props }: React.ComponentProps) {
+ return (
+
+ );
+}
+
+function SheetDescription({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ );
+}
+
+export {
+ Sheet,
+ SheetTrigger,
+ SheetClose,
+ SheetContent,
+ SheetHeader,
+ SheetFooter,
+ SheetTitle,
+ SheetDescription,
+};
diff --git a/apps/frontend/src/components/ui/sidebar.tsx b/apps/frontend/src/components/ui/sidebar.tsx
new file mode 100644
index 000000000..21ea19364
--- /dev/null
+++ b/apps/frontend/src/components/ui/sidebar.tsx
@@ -0,0 +1,713 @@
+"use client";
+
+import { PanelLeft } from "lucide-react";
+import { Slot } from "@radix-ui/react-slot";
+import type { VariantProps } from "class-variance-authority";
+import { cva } from "class-variance-authority";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Separator } from "@/components/ui/separator";
+import {
+ Sheet,
+ SheetContent,
+ SheetDescription,
+ SheetHeader,
+ SheetTitle,
+} from "@/components/ui/sheet";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+
+const SIDEBAR_STORAGE_KEY = "sidebar_state";
+const SIDEBAR_WIDTH = "244px"; // 16rem
+const SIDEBAR_WIDTH_MOBILE = "260px"; // 18rem
+const SIDEBAR_WIDTH_ICON = "3rem";
+const SIDEBAR_KEYBOARD_SHORTCUT = "b";
+
+const MOBILE_BREAKPOINT = 1024;
+
+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;
+}
+
+type SidebarContext = {
+ state: "expanded" | "collapsed";
+ open: boolean;
+ setOpen: (open: boolean) => void;
+ openMobile: boolean;
+ setOpenMobile: (open: boolean) => void;
+ isMobile: boolean;
+ toggleSidebar: () => void;
+};
+
+const SidebarContext = React.createContext(null);
+
+function useSidebar() {
+ const context = React.useContext(SidebarContext);
+ if (!context) {
+ throw new Error("useSidebar must be used within a SidebarProvider.");
+ }
+
+ return context;
+}
+
+function SidebarProvider({
+ defaultOpen = true,
+ open: openProp,
+ onOpenChange: setOpenProp,
+ className,
+ style,
+ children,
+ ...props
+}: React.ComponentProps<"div"> & {
+ defaultOpen?: boolean;
+ open?: boolean;
+ onOpenChange?: (open: boolean) => void;
+}) {
+ const isMobile = useIsMobile();
+ const [openMobile, setOpenMobile] = React.useState(false);
+
+ // This is the internal state of the sidebar.
+ // We use openProp and setOpenProp for control from outside the component.
+ const [_open, _setOpen] = React.useState(() => {
+ if (typeof window === "undefined") {
+ return defaultOpen;
+ }
+
+ const storedOpenState = window.localStorage.getItem(SIDEBAR_STORAGE_KEY);
+ return storedOpenState === null ? defaultOpen : storedOpenState === "true";
+ });
+ const open = openProp ?? _open;
+ const setOpen = React.useCallback(
+ (value: boolean | ((value: boolean) => boolean)) => {
+ const openState = typeof value === "function" ? value(open) : value;
+ if (setOpenProp) {
+ setOpenProp(openState);
+ } else {
+ _setOpen(openState);
+ }
+
+ window.localStorage.setItem(SIDEBAR_STORAGE_KEY, String(openState));
+ },
+ [setOpenProp, open],
+ );
+
+ // Helper to toggle the sidebar.
+ const toggleSidebar = React.useCallback(() => {
+ return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);
+ }, [isMobile, setOpen]);
+
+ // Adds a keyboard shortcut to toggle the sidebar.
+ React.useEffect(() => {
+ const handleKeyDown = (event: KeyboardEvent) => {
+ if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
+ event.preventDefault();
+ toggleSidebar();
+ }
+ };
+
+ window.addEventListener("keydown", handleKeyDown);
+ return () => window.removeEventListener("keydown", handleKeyDown);
+ }, [toggleSidebar]);
+
+ // We add a state so that we can do data-state="expanded" or "collapsed".
+ // This makes it easier to style the sidebar with Tailwind classes.
+ const state = open ? "expanded" : "collapsed";
+
+ const contextValue = React.useMemo(
+ () => ({
+ state,
+ open,
+ setOpen,
+ isMobile,
+ openMobile,
+ setOpenMobile,
+ toggleSidebar,
+ }),
+ [state, open, setOpen, isMobile, openMobile, toggleSidebar],
+ );
+
+ return (
+
+
+
+ {children}
+
+
+
+ );
+}
+
+function Sidebar({
+ side = "left",
+ variant = "sidebar",
+ collapsible = "offcanvas",
+ className,
+ children,
+ ...props
+}: React.ComponentProps<"div"> & {
+ side?: "left" | "right";
+ variant?: "sidebar" | "floating" | "inset";
+ collapsible?: "offcanvas" | "icon" | "none";
+}) {
+ const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
+
+ if (collapsible === "none") {
+ return (
+
+ {children}
+
+ );
+ }
+
+ if (isMobile) {
+ return (
+
+
+
+ Sidebar
+ Displays the mobile sidebar.
+
+ {children}
+
+
+ );
+ }
+
+ return (
+
+ );
+}
+
+function SidebarTrigger({ className, onClick, ...props }: React.ComponentProps) {
+ const { toggleSidebar } = useSidebar();
+
+ return (
+ }
+ className={cn("h-7 w-7 hover:bg-muted hover:text-foreground", className)}
+ onClick={(event) => {
+ onClick?.(event);
+ toggleSidebar();
+ }}
+ {...props}
+ >
+ Toggle Sidebar
+
+ );
+}
+
+function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
+ const { toggleSidebar } = useSidebar();
+
+ return (
+
+ );
+}
+
+function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
+ return (
+
+ );
+}
+
+function SidebarInput({ className, ...props }: React.ComponentProps) {
+ return (
+
+ );
+}
+
+function SidebarHeader({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ );
+}
+
+function SidebarFooter({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ );
+}
+
+function SidebarSeparator({ className, ...props }: React.ComponentProps) {
+ return (
+
+ );
+}
+
+function SidebarContent({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ );
+}
+
+function SidebarGroup({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ );
+}
+
+function SidebarGroupLabel({
+ className,
+ asChild = false,
+ ...props
+}: React.ComponentProps<"div"> & { asChild?: boolean }) {
+ const Comp = asChild ? Slot : "div";
+
+ return (
+ svg]:size-4 [&>svg]:shrink-0",
+ "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
+ className,
+ )}
+ {...props}
+ />
+ );
+}
+
+function SidebarGroupAction({
+ className,
+ asChild = false,
+ ...props
+}: React.ComponentProps<"button"> & { asChild?: boolean }) {
+ const Comp = asChild ? Slot : "button";
+
+ return (
+ svg]:size-4 [&>svg]:shrink-0",
+ // Increases the hit area of the button on mobile.
+ "after:absolute after:-inset-2 md:after:hidden",
+ "group-data-[collapsible=icon]:hidden",
+ className,
+ )}
+ {...props}
+ />
+ );
+}
+
+function SidebarGroupContent({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ );
+}
+
+function SidebarMenu({ className, ...props }: React.ComponentProps<"ul">) {
+ return (
+
+ );
+}
+
+function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
+ return (
+
+ );
+}
+
+const sidebarMenuButtonVariants = cva(
+ "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+ {
+ variants: {
+ variant: {
+ default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+ outline:
+ "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
+ },
+ size: {
+ default: "h-8 text-sm",
+ sm: "h-7 text-xs",
+ lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!",
+ },
+ },
+ defaultVariants: {
+ variant: "default",
+ size: "default",
+ },
+ },
+);
+
+function SidebarMenuButton({
+ asChild = false,
+ isActive = false,
+ variant = "default",
+ size = "default",
+ tooltip,
+ className,
+ ...props
+}: React.ComponentProps<"button"> & {
+ asChild?: boolean;
+ isActive?: boolean;
+ tooltip?: string | React.ComponentProps;
+} & VariantProps) {
+ const Comp = asChild ? Slot : "button";
+ const { isMobile, state } = useSidebar();
+
+ const button = (
+
+ );
+
+ if (!tooltip) {
+ return button;
+ }
+
+ if (typeof tooltip === "string") {
+ tooltip = {
+ children: tooltip,
+ };
+ }
+
+ return (
+
+ {button}
+
+
+ );
+}
+
+function SidebarMenuAction({
+ className,
+ asChild = false,
+ showOnHover = false,
+ ...props
+}: React.ComponentProps<"button"> & {
+ asChild?: boolean;
+ showOnHover?: boolean;
+}) {
+ const Comp = asChild ? Slot : "button";
+
+ return (
+ svg]:size-4 [&>svg]:shrink-0",
+ // Increases the hit area of the button on mobile.
+ "after:absolute after:-inset-2 md:after:hidden",
+ "peer-data-[size=sm]/menu-button:top-1",
+ "peer-data-[size=default]/menu-button:top-1.5",
+ "peer-data-[size=lg]/menu-button:top-2.5",
+ "group-data-[collapsible=icon]:hidden",
+ showOnHover &&
+ "peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0",
+ className,
+ )}
+ {...props}
+ />
+ );
+}
+
+function SidebarMenuBadge({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ );
+}
+
+function SidebarMenuSkeleton({
+ className,
+ showIcon = false,
+ ...props
+}: React.ComponentProps<"div"> & {
+ showIcon?: boolean;
+}) {
+ // Random width between 50 to 90%.
+ const width = React.useMemo(() => {
+ return `${Math.floor(Math.random() * 40) + 50}%`;
+ }, []);
+
+ return (
+
+ {showIcon && }
+
+
+ );
+}
+
+function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">) {
+ return (
+
+ );
+}
+
+function SidebarMenuSubItem({ className, ...props }: React.ComponentProps<"li">) {
+ return (
+
+ );
+}
+
+function SidebarMenuSubButton({
+ asChild = false,
+ size = "md",
+ isActive = false,
+ className,
+ ...props
+}: React.ComponentProps<"a"> & {
+ asChild?: boolean;
+ size?: "sm" | "md";
+ isActive?: boolean;
+}) {
+ const Comp = asChild ? Slot : "a";
+
+ return (
+ svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+ "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
+ size === "sm" && "text-xs",
+ size === "md" && "text-sm",
+ "group-data-[collapsible=icon]:hidden",
+ className,
+ )}
+ {...props}
+ />
+ );
+}
+
+export {
+ Sidebar,
+ SidebarContent,
+ SidebarFooter,
+ SidebarGroup,
+ SidebarGroupAction,
+ SidebarGroupContent,
+ SidebarGroupLabel,
+ SidebarHeader,
+ SidebarInput,
+ SidebarInset,
+ SidebarMenu,
+ SidebarMenuAction,
+ SidebarMenuBadge,
+ SidebarMenuButton,
+ SidebarMenuItem,
+ SidebarMenuSkeleton,
+ SidebarMenuSub,
+ SidebarMenuSubButton,
+ SidebarMenuSubItem,
+ SidebarProvider,
+ SidebarRail,
+ SidebarSeparator,
+ SidebarTrigger,
+ useSidebar,
+};
diff --git a/apps/frontend/src/components/ui/skeleton.tsx b/apps/frontend/src/components/ui/skeleton.tsx
new file mode 100644
index 000000000..92742193f
--- /dev/null
+++ b/apps/frontend/src/components/ui/skeleton.tsx
@@ -0,0 +1,13 @@
+import { cn } from "@/lib/utils";
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ );
+}
+
+export { Skeleton };
diff --git a/apps/frontend/src/components/ui/tabs.tsx b/apps/frontend/src/components/ui/tabs.tsx
new file mode 100644
index 000000000..323007d42
--- /dev/null
+++ b/apps/frontend/src/components/ui/tabs.tsx
@@ -0,0 +1,46 @@
+import * as React from "react";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import { cn } from "@/lib/utils";
+
+const Tabs = TabsPrimitive.Root;
+
+const TabsList = React.forwardRef<
+ React.ComponentRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+));
+TabsList.displayName = TabsPrimitive.List.displayName;
+
+const TabsTrigger = React.forwardRef<
+ React.ComponentRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+
+const TabsContent = React.forwardRef<
+ React.ComponentRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };
diff --git a/apps/frontend/src/components/ui/tooltip.tsx b/apps/frontend/src/components/ui/tooltip.tsx
new file mode 100644
index 000000000..27c0376e1
--- /dev/null
+++ b/apps/frontend/src/components/ui/tooltip.tsx
@@ -0,0 +1,56 @@
+"use client";
+
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import type * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function TooltipProvider({
+ delayDuration = 0,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ );
+}
+
+function Tooltip({ ...props }: React.ComponentProps) {
+ return (
+
+
+
+ );
+}
+
+function TooltipTrigger({ ...props }: React.ComponentProps) {
+ return ;
+}
+
+function TooltipContent({
+ className,
+ sideOffset = 8,
+ children,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+
+ {children}
+
+
+ );
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
diff --git a/apps/frontend/src/daemon/api/client.ts b/apps/frontend/src/daemon/api/client.ts
new file mode 100644
index 000000000..0e2583de1
--- /dev/null
+++ b/apps/frontend/src/daemon/api/client.ts
@@ -0,0 +1,539 @@
+import {
+ PLANNOTATOR_DAEMON_PROTOCOL,
+ type DaemonErrorResponse,
+} from "@plannotator/shared/daemon-protocol";
+import type {
+ DaemonStatusSnapshot,
+ DeleteSessionResponse,
+ ProjectEntry,
+ ProjectListResponse,
+ SessionBootstrap,
+ SessionListResponse,
+ SessionResponse,
+ SessionSummary,
+ WorktreeListResponse,
+ DirectoryListResponse,
+ PRListResponse,
+ PRDetailedListResponse,
+} from "../contracts";
+import {
+ DaemonHubActionError,
+ DaemonHubOpenError,
+ getDaemonHubClient,
+ type WebSocketFactory,
+} from "../events/hub-client";
+import type { DaemonApiError, DaemonApiResult } from "./errors";
+
+type FetchLike = typeof fetch;
+
+export interface DaemonApiClientOptions {
+ baseUrl?: string;
+ fetch?: FetchLike;
+ webSocketFactory?: WebSocketFactory;
+}
+
+export type SessionAction =
+ | "plan-approve"
+ | "plan-deny"
+ | "review-approve"
+ | "review-feedback"
+ | "review-exit"
+ | "annotate-approve"
+ | "annotate-feedback"
+ | "annotate-exit"
+ | "archive-done"
+ | "goal-setup-submit"
+ | "goal-setup-exit";
+
+export interface DaemonApiClient {
+ getStatus(): Promise>;
+ listSessions(options?: { clean?: boolean }): Promise>;
+ getSession(sessionId: string): Promise>;
+ getSessionBootstrap(sessionId: string): Promise>;
+ cancelSession(sessionId: string, reason?: string): Promise>;
+ deleteSession(sessionId: string): Promise>;
+ getWebSocketUrl(): string;
+ getSessionApiUrl(sessionId: string, path: string): string;
+ probeSessionApi(
+ sessionId: string,
+ path: string,
+ init?: RequestInit,
+ ): Promise>;
+ runSessionAction(
+ session: SessionSummary,
+ action: SessionAction,
+ ): Promise>;
+ listProjects(): Promise>;
+ addProject(
+ cwd: string,
+ name?: string,
+ ): Promise>;
+ removeProject(cwd: string, clean?: boolean): Promise>;
+ listWorktrees(cwd: string): Promise>;
+ listDirectories(path?: string): Promise>;
+ listPRs(cwd: string): Promise>;
+ listDetailedPRs(cwd: string): Promise>;
+ createReviewSession(cwd: string, prUrl?: string): Promise>;
+ createArchiveSession(cwd: string): Promise>;
+}
+
+type ResponseGuard = (value: unknown) => value is T;
+
+function encodeSessionId(sessionId: string): string {
+ return encodeURIComponent(sessionId);
+}
+
+function joinUrl(baseUrl: string | undefined, path: string): string {
+ if (!baseUrl) return path;
+ const normalizedBase = baseUrl.endsWith("/") ? baseUrl : `${baseUrl}/`;
+ return new URL(path, normalizedBase).toString();
+}
+
+function websocketUrl(baseUrl: string | undefined, path: string): string {
+ const joined = joinUrl(baseUrl, path);
+ const url = joined.startsWith("/")
+ ? new URL(joined, typeof window === "undefined" ? "http://localhost" : window.location.href)
+ : new URL(joined);
+ url.protocol = url.protocol === "https:" ? "wss:" : "ws:";
+ return url.toString();
+}
+
+function normalizeSessionApiPath(path: string): string {
+ const prefixed = path.startsWith("/") ? path : `/${path}`;
+ if (prefixed === "/api") return "";
+ if (prefixed.startsWith("/api/")) return prefixed.slice(4);
+ return prefixed;
+}
+
+function isRecord(value: unknown): value is Record {
+ return typeof value === "object" && value !== null;
+}
+
+function hasOkTrue(value: unknown): value is Record & { ok: true } {
+ return isRecord(value) && value.ok === true;
+}
+
+function isDaemonErrorResponse(value: unknown): value is DaemonErrorResponse {
+ return (
+ isRecord(value) &&
+ value.ok === false &&
+ value.protocol === PLANNOTATOR_DAEMON_PROTOCOL &&
+ isRecord(value.error) &&
+ typeof value.error.code === "string" &&
+ typeof value.error.message === "string"
+ );
+}
+
+function isDaemonStatus(value: unknown): value is DaemonStatusSnapshot {
+ return (
+ hasOkTrue(value) &&
+ value.protocol === PLANNOTATOR_DAEMON_PROTOCOL &&
+ typeof value.pid === "number" &&
+ isRecord(value.endpoint) &&
+ typeof value.endpoint.baseUrl === "string" &&
+ typeof value.startedAt === "string" &&
+ typeof value.activeSessionCount === "number" &&
+ typeof value.sessionCount === "number"
+ );
+}
+
+function isUnknownPayload(_value: unknown): _value is unknown {
+ return true;
+}
+
+function isSessionSummary(value: unknown): boolean {
+ return (
+ isRecord(value) &&
+ typeof value.id === "string" &&
+ typeof value.mode === "string" &&
+ typeof value.status === "string" &&
+ typeof value.url === "string" &&
+ typeof value.project === "string" &&
+ typeof value.label === "string" &&
+ typeof value.createdAt === "string" &&
+ typeof value.updatedAt === "string"
+ );
+}
+
+function isSessionList(value: unknown): value is SessionListResponse {
+ return (
+ hasOkTrue(value) && Array.isArray(value.sessions) && value.sessions.every(isSessionSummary)
+ );
+}
+
+function isSessionResponse(value: unknown): value is SessionResponse {
+ return hasOkTrue(value) && isSessionSummary((value as { session?: unknown }).session);
+}
+
+function isDeleteSessionResponse(value: unknown): value is DeleteSessionResponse {
+ return hasOkTrue(value);
+}
+
+function isProjectEntry(value: unknown): boolean {
+ return (
+ isRecord(value) &&
+ typeof value.name === "string" &&
+ typeof value.cwd === "string" &&
+ typeof value.lastSeen === "string"
+ );
+}
+
+function isProjectList(value: unknown): value is ProjectListResponse {
+ return hasOkTrue(value) && Array.isArray(value.projects) && value.projects.every(isProjectEntry);
+}
+
+function isProjectResponse(value: unknown): value is { ok: true; project: ProjectEntry } {
+ return hasOkTrue(value) && isProjectEntry((value as { project?: unknown }).project);
+}
+
+function isWorktreeList(value: unknown): value is WorktreeListResponse {
+ return hasOkTrue(value) && Array.isArray((value as { worktrees?: unknown }).worktrees);
+}
+
+function isDirectoryList(value: unknown): value is DirectoryListResponse {
+ return hasOkTrue(value) && Array.isArray((value as { dirs?: unknown }).dirs);
+}
+
+function isPRList(value: unknown): value is PRListResponse {
+ return hasOkTrue(value) && Array.isArray((value as { prs?: unknown }).prs);
+}
+
+function isPRDetailedList(value: unknown): value is PRDetailedListResponse {
+ return hasOkTrue(value) && Array.isArray((value as { prs?: unknown }).prs);
+}
+
+function isSessionBootstrap(value: unknown): value is SessionBootstrap {
+ return (
+ isSessionResponse(value) &&
+ typeof (value as { apiBase?: unknown }).apiBase === "string" &&
+ isRecord((value as { capabilities?: unknown }).capabilities) &&
+ Array.isArray((value as { supportedSessionViews?: unknown }).supportedSessionViews)
+ );
+}
+
+function httpError(status: number, message: string, payload?: unknown): DaemonApiError {
+ return {
+ kind: "http-error",
+ status,
+ message,
+ ...(payload !== undefined && { payload }),
+ };
+}
+
+function errorMessageFromPayload(payload: unknown, fallback: string): string {
+ if (isRecord(payload)) {
+ if (typeof payload.message === "string") return payload.message;
+ if (typeof payload.error === "string") return payload.error;
+ if (isRecord(payload.error) && typeof payload.error.message === "string") {
+ return payload.error.message;
+ }
+ }
+ return fallback;
+}
+
+async function requestJson(
+ fetchImpl: FetchLike,
+ url: string,
+ guard: ResponseGuard,
+ init?: RequestInit,
+): Promise> {
+ let response: Response;
+ try {
+ response = await fetchImpl(url, init);
+ } catch (cause) {
+ return {
+ ok: false,
+ error: {
+ kind: "network-error",
+ message: cause instanceof Error ? cause.message : "Network request failed.",
+ cause,
+ },
+ };
+ }
+
+ const body = await response.text();
+ let payload: unknown;
+ try {
+ payload = body ? JSON.parse(body) : null;
+ } catch {
+ return {
+ ok: false,
+ error: {
+ kind: "invalid-json",
+ status: response.status,
+ body,
+ message: "Daemon returned a non-JSON response.",
+ },
+ };
+ }
+
+ if (isDaemonErrorResponse(payload)) {
+ return {
+ ok: false,
+ error: {
+ kind: "daemon-error",
+ status: response.status,
+ code: payload.error.code,
+ message: payload.error.message,
+ },
+ };
+ }
+
+ if (!response.ok) {
+ return { ok: false, error: httpError(response.status, response.statusText || "HTTP error.") };
+ }
+
+ if (!guard(payload)) {
+ return {
+ ok: false,
+ error: {
+ kind: "invalid-payload",
+ message: "Daemon response did not match the frontend contract.",
+ value: payload,
+ },
+ };
+ }
+
+ return { ok: true, data: payload };
+}
+
+function jsonPost(body: unknown): RequestInit {
+ return {
+ method: "POST",
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify(body),
+ };
+}
+
+function requestForAction(action: SessionAction): { path: string; init: RequestInit } {
+ switch (action) {
+ case "plan-approve":
+ return { path: "/api/approve", init: jsonPost({ planSave: { enabled: false } }) };
+ case "plan-deny":
+ return {
+ path: "/api/deny",
+ init: jsonPost({ feedback: "Plan denied.", planSave: { enabled: false } }),
+ };
+ case "review-approve":
+ return {
+ path: "/api/feedback",
+ init: jsonPost({ approved: true, feedback: "LGTM", annotations: [] }),
+ };
+ case "review-feedback":
+ return {
+ path: "/api/feedback",
+ init: jsonPost({ approved: false, feedback: "", annotations: [] }),
+ };
+ case "review-exit":
+ return { path: "/api/exit", init: jsonPost({}) };
+ case "annotate-approve":
+ return { path: "/api/approve", init: jsonPost({}) };
+ case "annotate-feedback":
+ return { path: "/api/feedback", init: jsonPost({ feedback: "", annotations: [] }) };
+ case "annotate-exit":
+ return { path: "/api/exit", init: jsonPost({}) };
+ case "archive-done":
+ return { path: "/api/done", init: jsonPost({}) };
+ case "goal-setup-submit":
+ return { path: "/api/goal-setup/submit", init: jsonPost({ answers: [], facts: [] }) };
+ case "goal-setup-exit":
+ return { path: "/api/exit", init: jsonPost({}) };
+ }
+}
+
+export function createDaemonApiClient(options: DaemonApiClientOptions = {}): DaemonApiClient {
+ const fetchImpl = options.fetch ?? fetch;
+ const getSessionApiUrl = (sessionId: string, path: string) =>
+ joinUrl(
+ options.baseUrl,
+ `/s/${encodeSessionId(sessionId)}/api${normalizeSessionApiPath(path)}`,
+ );
+ const probeSessionApi = (sessionId: string, path: string, init?: RequestInit) =>
+ requestJson(fetchImpl, getSessionApiUrl(sessionId, path), isUnknownPayload, init);
+
+ return {
+ getStatus() {
+ return requestJson(fetchImpl, joinUrl(options.baseUrl, "/daemon/status"), isDaemonStatus);
+ },
+
+ listSessions(listOptions = {}) {
+ const path = listOptions.clean ? "/daemon/sessions?clean=1" : "/daemon/sessions";
+ return requestJson(fetchImpl, joinUrl(options.baseUrl, path), isSessionList);
+ },
+
+ getSession(sessionId) {
+ return requestJson(
+ fetchImpl,
+ joinUrl(options.baseUrl, `/daemon/sessions/${encodeSessionId(sessionId)}`),
+ isSessionResponse,
+ );
+ },
+
+ getSessionBootstrap(sessionId) {
+ return requestJson(
+ fetchImpl,
+ joinUrl(options.baseUrl, `/s/${encodeSessionId(sessionId)}/api/session`),
+ isSessionBootstrap,
+ );
+ },
+
+ cancelSession(sessionId, reason) {
+ return requestJson(
+ fetchImpl,
+ joinUrl(options.baseUrl, `/daemon/sessions/${encodeSessionId(sessionId)}/cancel`),
+ isSessionResponse,
+ {
+ method: "POST",
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify({ reason }),
+ },
+ );
+ },
+
+ deleteSession(sessionId) {
+ return requestJson(
+ fetchImpl,
+ joinUrl(options.baseUrl, `/daemon/sessions/${encodeSessionId(sessionId)}`),
+ isDeleteSessionResponse,
+ { method: "DELETE" },
+ );
+ },
+
+ getWebSocketUrl() {
+ return websocketUrl(options.baseUrl, "/daemon/ws");
+ },
+
+ getSessionApiUrl(sessionId, path) {
+ return getSessionApiUrl(sessionId, path);
+ },
+
+ probeSessionApi(sessionId, path, init) {
+ return probeSessionApi(sessionId, path, init);
+ },
+
+ async runSessionAction(session, action) {
+ const request = requestForAction(action);
+ const body = request.init.body ? JSON.parse(String(request.init.body)) : undefined;
+ try {
+ const result = await getDaemonHubClient(
+ websocketUrl(options.baseUrl, "/daemon/ws"),
+ options.webSocketFactory,
+ ).runAction({
+ sessionId: session.id,
+ method: request.init.method ?? "GET",
+ path: request.path,
+ body,
+ });
+ if (result.status < 200 || result.status >= 300) {
+ return {
+ ok: false,
+ error: httpError(
+ result.status,
+ errorMessageFromPayload(result.payload, "Daemon action failed."),
+ result.payload,
+ ),
+ };
+ }
+ return { ok: true, data: result.payload };
+ } catch (cause) {
+ if (
+ cause instanceof DaemonHubOpenError ||
+ (cause instanceof DaemonHubActionError && cause.code === "unauthorized")
+ ) {
+ return probeSessionApi(session.id, request.path, request.init);
+ }
+ return {
+ ok: false,
+ error: {
+ kind: "network-error",
+ message: cause instanceof Error ? cause.message : "Daemon action failed.",
+ cause,
+ },
+ };
+ }
+ },
+
+ listProjects() {
+ return requestJson(fetchImpl, joinUrl(options.baseUrl, "/daemon/projects"), isProjectList);
+ },
+
+ addProject(cwd, name) {
+ return requestJson(
+ fetchImpl,
+ joinUrl(options.baseUrl, "/daemon/projects"),
+ isProjectResponse,
+ jsonPost({ cwd, ...(name && { name }) }),
+ );
+ },
+
+ removeProject(cwd, clean) {
+ const params = new URLSearchParams({ cwd });
+ if (clean) params.set("clean", "1");
+ return requestJson(
+ fetchImpl,
+ joinUrl(options.baseUrl, `/daemon/projects?${params}`),
+ isDeleteSessionResponse,
+ { method: "DELETE" },
+ );
+ },
+
+ listDirectories(path = "~") {
+ return requestJson(
+ fetchImpl,
+ joinUrl(options.baseUrl, `/daemon/fs/list?path=${encodeURIComponent(path)}`),
+ isDirectoryList,
+ );
+ },
+
+ listWorktrees(cwd) {
+ return requestJson(
+ fetchImpl,
+ joinUrl(options.baseUrl, `/daemon/projects/worktrees?cwd=${encodeURIComponent(cwd)}`),
+ isWorktreeList,
+ );
+ },
+
+ listPRs(cwd) {
+ return requestJson(
+ fetchImpl,
+ joinUrl(options.baseUrl, `/daemon/projects/prs?cwd=${encodeURIComponent(cwd)}`),
+ isPRList,
+ );
+ },
+
+ listDetailedPRs(cwd) {
+ return requestJson(
+ fetchImpl,
+ joinUrl(options.baseUrl, `/daemon/projects/prs/detailed?cwd=${encodeURIComponent(cwd)}`),
+ isPRDetailedList,
+ );
+ },
+
+ createReviewSession(cwd, prUrl) {
+ return requestJson(
+ fetchImpl,
+ joinUrl(options.baseUrl, "/daemon/sessions"),
+ isSessionResponse,
+ jsonPost({
+ request: {
+ action: "review",
+ origin: "plannotator-frontend",
+ cwd,
+ ...(prUrl && { prUrl }),
+ },
+ }),
+ );
+ },
+
+ createArchiveSession(cwd) {
+ return requestJson(
+ fetchImpl,
+ joinUrl(options.baseUrl, "/daemon/sessions"),
+ isSessionResponse,
+ jsonPost({ request: { action: "archive", origin: "plannotator-frontend", cwd } }),
+ );
+ },
+ };
+}
+
+export const daemonApiClient = createDaemonApiClient();
diff --git a/apps/frontend/src/daemon/api/errors.ts b/apps/frontend/src/daemon/api/errors.ts
new file mode 100644
index 000000000..12311e761
--- /dev/null
+++ b/apps/frontend/src/daemon/api/errors.ts
@@ -0,0 +1,45 @@
+import type { DaemonErrorCode } from "@plannotator/shared/daemon-protocol";
+
+export type DaemonApiError =
+ | {
+ kind: "network-error";
+ message: string;
+ cause?: unknown;
+ }
+ | {
+ kind: "invalid-json";
+ status: number;
+ body: string;
+ message: string;
+ }
+ | {
+ kind: "daemon-error";
+ status: number;
+ code: DaemonErrorCode;
+ message: string;
+ }
+ | {
+ kind: "http-error";
+ status: number;
+ message: string;
+ payload?: unknown;
+ }
+ | {
+ kind: "invalid-payload";
+ message: string;
+ value: unknown;
+ };
+
+export type DaemonApiResult =
+ | {
+ ok: true;
+ data: T;
+ }
+ | {
+ ok: false;
+ error: DaemonApiError;
+ };
+
+export function errorMessage(error: DaemonApiError): string {
+ return error.message;
+}
diff --git a/apps/frontend/src/daemon/contracts.ts b/apps/frontend/src/daemon/contracts.ts
new file mode 100644
index 000000000..0dea63f8b
--- /dev/null
+++ b/apps/frontend/src/daemon/contracts.ts
@@ -0,0 +1,126 @@
+import type {
+ DaemonEndpoint,
+ DaemonEvent,
+ DaemonProjectEntry,
+ DaemonSessionBootstrapResponse,
+ DaemonSessionStatus,
+ DaemonSessionSummary,
+ DaemonSessionView,
+ DaemonStatus,
+ DaemonWebSocketServerMessage,
+} from "@plannotator/shared/daemon-protocol";
+
+export type SessionView = DaemonSessionView;
+export type SessionMode = SessionView | (string & {});
+
+export interface SessionSummary extends Omit {
+ mode: SessionMode;
+}
+
+export interface DaemonStatusSnapshot extends Omit {
+ endpoint: DaemonEndpoint;
+}
+
+export interface SessionBootstrap extends Omit {
+ session: SessionSummary;
+}
+
+export interface SessionListResponse {
+ ok: true;
+ sessions: SessionSummary[];
+}
+
+export interface SessionResponse {
+ ok: true;
+ session: SessionSummary;
+}
+
+export interface DeleteSessionResponse {
+ ok: true;
+}
+
+export type ProjectEntry = DaemonProjectEntry;
+
+export interface ProjectListResponse {
+ ok: true;
+ projects: ProjectEntry[];
+}
+
+export interface WorktreeEntry {
+ path: string;
+ branch: string | null;
+ head: string;
+ lastActive: number;
+}
+
+export interface WorktreeListResponse {
+ ok: true;
+ worktrees: WorktreeEntry[];
+}
+
+export interface DirectoryEntry {
+ name: string;
+ path: string;
+}
+
+export interface DirectoryListResponse {
+ ok: true;
+ path: string;
+ dirs: DirectoryEntry[];
+}
+
+export interface PRListItem {
+ id: string;
+ number: number;
+ title: string;
+ author: string;
+ url: string;
+ baseBranch: string;
+ headBranch: string;
+ state: "open" | "closed" | "merged";
+}
+
+export interface PRDetailedListItem extends PRListItem {
+ additions: number;
+ deletions: number;
+ commentCount: number;
+ updatedAt: string;
+ isDraft: boolean;
+ reviewDecision: string;
+}
+
+export interface PRDetailedListResponse {
+ ok: true;
+ prs: PRDetailedListItem[];
+ platform: "github" | "gitlab" | null;
+ error?: "no-remote" | "no-cli" | "auth-failed";
+ message?: string;
+}
+
+export interface PRListResponse {
+ ok: true;
+ prs: PRListItem[];
+ platform: "github" | "gitlab" | null;
+ defaultBranch?: string;
+ error?: "no-remote" | "no-cli" | "auth-failed";
+ message?: string;
+}
+
+export type SessionLifecycleStatus = DaemonSessionStatus;
+export type DaemonServerMessage = DaemonWebSocketServerMessage;
+
+export type DaemonLifecycleEvent =
+ | (Omit, "sessions"> & {
+ sessions: SessionSummary[];
+ })
+ | Extract
+ | Extract
+ | (Omit<
+ Extract<
+ DaemonEvent,
+ { type: "session-created" | "session-updated" | "session-removed" | "session-notify" }
+ >,
+ "session"
+ > & {
+ session: SessionSummary;
+ });
diff --git a/apps/frontend/src/daemon/events/event-store.ts b/apps/frontend/src/daemon/events/event-store.ts
new file mode 100644
index 000000000..9201b4183
--- /dev/null
+++ b/apps/frontend/src/daemon/events/event-store.ts
@@ -0,0 +1,107 @@
+import { create } from "zustand";
+import { immer } from "zustand/middleware/immer";
+import type { DaemonLifecycleEvent, DaemonStatusSnapshot, SessionSummary } from "../contracts";
+
+const MAX_EVENTS = 100;
+const TERMINAL_STATUSES = new Set(["completed", "cancelled", "expired", "failed"]);
+
+export type DaemonConnectionState = "idle" | "connecting" | "open" | "closed" | "polling" | "error";
+
+export interface DaemonEventState {
+ connectionState: DaemonConnectionState;
+ events: DaemonLifecycleEvent[];
+ sessions: SessionSummary[];
+ status?: DaemonStatusSnapshot;
+ lastError?: string;
+ lastUpdatedAt?: string;
+}
+
+export interface DaemonEventStoreActions {
+ setConnectionState(state: DaemonConnectionState): void;
+ setError(message: string): void;
+ replaceSessions(sessions: SessionSummary[]): void;
+ applyEvent(event: DaemonLifecycleEvent): void;
+ reset(): void;
+}
+
+export type DaemonEventStore = DaemonEventState & DaemonEventStoreActions;
+
+function createInitialState(): DaemonEventState {
+ return {
+ connectionState: "idle",
+ events: [],
+ sessions: [],
+ };
+}
+
+export function applyDaemonEvent(state: DaemonEventState, event: DaemonLifecycleEvent): void {
+ state.events = [event, ...state.events].slice(0, MAX_EVENTS);
+ state.lastUpdatedAt = event.at;
+
+ if (event.type === "snapshot") {
+ state.status = event.status;
+ state.sessions = event.sessions;
+ return;
+ }
+
+ if (event.type === "daemon-status") {
+ state.status = event.status;
+ return;
+ }
+
+ if (event.type === "daemon-error") {
+ state.lastError = event.message;
+ return;
+ }
+
+ if (event.type === "debug-log") {
+ return;
+ }
+
+ const existingIndex = state.sessions.findIndex((session) => session.id === event.session.id);
+ if (event.type === "session-removed") {
+ if (existingIndex >= 0) state.sessions.splice(existingIndex, 1);
+ return;
+ }
+
+ if (existingIndex >= 0) {
+ state.sessions[existingIndex] = event.session;
+ } else {
+ state.sessions.unshift(event.session);
+ }
+}
+
+export const useDaemonEventStore = create()(
+ immer((set) => ({
+ ...createInitialState(),
+
+ setConnectionState(connectionState) {
+ set((state) => {
+ state.connectionState = connectionState;
+ });
+ },
+
+ setError(message) {
+ set((state) => {
+ state.connectionState = "error";
+ state.lastError = message;
+ });
+ },
+
+ replaceSessions(sessions) {
+ set((state) => {
+ state.sessions = sessions;
+ });
+ },
+
+ applyEvent(event) {
+ set((state) => {
+ applyDaemonEvent(state, event);
+ });
+ },
+
+ reset() {
+ set(createInitialState());
+ },
+ })),
+);
diff --git a/apps/frontend/src/daemon/events/event-stream.ts b/apps/frontend/src/daemon/events/event-stream.ts
new file mode 100644
index 000000000..a6f77ea5f
--- /dev/null
+++ b/apps/frontend/src/daemon/events/event-stream.ts
@@ -0,0 +1,205 @@
+import type { DaemonApiClient } from "../api/client";
+import type { DaemonApiResult } from "../api/errors";
+import type {
+ DaemonLifecycleEvent,
+ DaemonStatusSnapshot,
+ DaemonServerMessage,
+ SessionListResponse,
+} from "../contracts";
+import {
+ getDaemonHubClient,
+ type DaemonHubConnectionState,
+ type WebSocketFactory,
+} from "./hub-client";
+
+export interface DaemonEventStreamOptions {
+ client: Pick;
+ onEvent(event: DaemonLifecycleEvent): void;
+ onState(state: DaemonHubConnectionState | "polling"): void;
+ onError(message: string): void;
+ onSessionNotify?(session: { id: string; mode: string; project: string; label: string }): void;
+ webSocketFactory?: WebSocketFactory;
+ fallbackPollMs?: number;
+}
+
+export interface DaemonEventStreamController {
+ stop(): void;
+ reportActiveSession(sessionId: string | null): void;
+}
+
+const DAEMON_EVENT_TYPES = [
+ "snapshot",
+ "daemon-status",
+ "session-created",
+ "session-updated",
+ "session-removed",
+ "session-notify",
+ "daemon-error",
+ "debug-log",
+] as const;
+const DEFAULT_FALLBACK_POLL_MS = 2_000;
+
+export function parseDaemonEventPayload(payload: unknown): DaemonLifecycleEvent | null {
+ const value = payload as Partial | null;
+ if (!value || typeof value !== "object" || typeof value.type !== "string") return null;
+ if (!DAEMON_EVENT_TYPES.includes(value.type as (typeof DAEMON_EVENT_TYPES)[number])) return null;
+ if (typeof value.at !== "string") return null;
+ return value as DaemonLifecycleEvent;
+}
+
+export function connectDaemonEvents(
+ options: DaemonEventStreamOptions,
+): DaemonEventStreamController {
+ let stopped = false;
+ let pollingTimer: ReturnType | undefined;
+ let pollingInFlight = false;
+ const client = getDaemonHubClient(options.client.getWebSocketUrl(), options.webSocketFactory);
+ const fallbackPollMs = options.fallbackPollMs ?? DEFAULT_FALLBACK_POLL_MS;
+
+ const emitSnapshot = async () => {
+ if (stopped || pollingInFlight) return;
+ pollingInFlight = true;
+ let statusResult: DaemonApiResult;
+ let sessionsResult: DaemonApiResult;
+ try {
+ [statusResult, sessionsResult] = await Promise.all([
+ options.client.getStatus(),
+ options.client.listSessions({ clean: true }),
+ ]);
+ } catch (err) {
+ if (!stopped) {
+ options.onError(err instanceof Error ? err.message : "Daemon polling failed.");
+ }
+ return;
+ } finally {
+ pollingInFlight = false;
+ }
+ if (stopped) return;
+ emitPollingResult(statusResult, sessionsResult, {
+ onEvent: options.onEvent,
+ onError: options.onError,
+ onState: options.onState,
+ });
+ };
+
+ let currentActiveSessionId: string | null = null;
+ const pendingNotifications: { id: string; mode: string; project: string; label: string }[] = [];
+
+ const sendClientState = () => {
+ client.sendClientState(!document.hidden, currentActiveSessionId);
+ };
+
+ const handleVisibilityChange = () => {
+ if (stopped) return;
+ sendClientState();
+ if (!document.hidden && pendingNotifications.length > 0 && options.onSessionNotify) {
+ for (const n of pendingNotifications.splice(0)) {
+ options.onSessionNotify(n);
+ }
+ }
+ };
+ document.addEventListener("visibilitychange", handleVisibilityChange);
+
+ const unsubscribe = client.subscribeDaemon(
+ (message) => {
+ if (stopped) return;
+ const event = messageToDaemonEvent(message);
+ if (!event) return;
+ if (event.type === "session-notify" && "session" in event && options.onSessionNotify) {
+ const s = event.session;
+ if (!document.hidden) {
+ options.onSessionNotify({ id: s.id, mode: s.mode, project: s.project, label: s.label });
+ } else {
+ pendingNotifications.push({ id: s.id, mode: s.mode, project: s.project, label: s.label });
+ }
+ }
+ options.onEvent(event);
+ },
+ (state) => {
+ if (stopped) return;
+ options.onState(state);
+ if (state === "open") {
+ stopPolling();
+ sendClientState();
+ }
+ if (state === "error" || state === "closed") startPolling();
+ },
+ (message) => {
+ if (!stopped) options.onError(message);
+ },
+ );
+
+ return { stop, reportActiveSession };
+
+ function reportActiveSession(sessionId: string | null): void {
+ currentActiveSessionId = sessionId;
+ sendClientState();
+ }
+
+ function stop() {
+ stopped = true;
+ document.removeEventListener("visibilitychange", handleVisibilityChange);
+ stopPolling();
+ unsubscribe();
+ }
+
+ function startPolling(): void {
+ if (stopped || pollingTimer) return;
+ void emitSnapshot();
+ pollingTimer = setInterval(() => {
+ void emitSnapshot();
+ }, fallbackPollMs);
+ pollingTimer.unref?.();
+ }
+
+ function stopPolling(): void {
+ if (!pollingTimer) return;
+ clearInterval(pollingTimer);
+ pollingTimer = undefined;
+ }
+}
+
+function messageToDaemonEvent(message: DaemonServerMessage): DaemonLifecycleEvent | null {
+ if (message.type === "snapshot" && message.scope.family === "daemon") {
+ const payload = message.payload as {
+ status?: DaemonStatusSnapshot;
+ sessions?: SessionListResponse["sessions"];
+ };
+ if (!payload.status || !Array.isArray(payload.sessions)) return null;
+ return {
+ type: "snapshot",
+ at: message.at,
+ status: payload.status,
+ sessions: payload.sessions,
+ };
+ }
+ if (message.type !== "event" || message.scope.family !== "daemon") return null;
+ return parseDaemonEventPayload(message.payload);
+}
+
+function emitPollingResult(
+ statusResult: DaemonApiResult,
+ sessionsResult: DaemonApiResult,
+ options: Pick,
+): void {
+ const at = new Date().toISOString();
+ if (!statusResult.ok) {
+ options.onError(statusResult.error.message);
+ return;
+ }
+
+ options.onState("polling");
+
+ if (!sessionsResult.ok) {
+ options.onError(sessionsResult.error.message);
+ options.onEvent({ type: "daemon-status", at, status: statusResult.data });
+ return;
+ }
+
+ options.onEvent({
+ type: "snapshot",
+ at,
+ status: statusResult.data,
+ sessions: sessionsResult.data.sessions,
+ });
+}
diff --git a/apps/frontend/src/daemon/events/hub-client.ts b/apps/frontend/src/daemon/events/hub-client.ts
new file mode 100644
index 000000000..c96983bab
--- /dev/null
+++ b/apps/frontend/src/daemon/events/hub-client.ts
@@ -0,0 +1,322 @@
+import {
+ type DaemonWebSocketFactory,
+ type DaemonWebSocketLike,
+ type DaemonWebSocketClientMessage,
+ type DaemonWebSocketServerMessage,
+ parseDaemonWebSocketServerMessageText,
+} from "@plannotator/shared/daemon-protocol";
+
+export type WebSocketLike = DaemonWebSocketLike;
+export type WebSocketFactory = DaemonWebSocketFactory;
+
+export interface DaemonHubActionResult {
+ status: number;
+ payload?: unknown;
+}
+
+export type DaemonHubConnectionState = "connecting" | "open" | "closed" | "error";
+
+export class DaemonHubOpenError extends Error {
+ constructor(message = "Daemon WebSocket connection failed.") {
+ super(message);
+ this.name = "DaemonHubOpenError";
+ }
+}
+
+export class DaemonHubActionError extends Error {
+ constructor(
+ message = "Daemon WebSocket action failed.",
+ readonly code?: string,
+ ) {
+ super(message);
+ this.name = "DaemonHubActionError";
+ }
+}
+
+interface ActionWaiter {
+ resolve(result: DaemonHubActionResult): void;
+ reject(error: Error): void;
+}
+
+const OPEN = 1;
+let requestSequence = 0;
+const clients = new Map();
+
+function nextRequestId(prefix: string): string {
+ requestSequence += 1;
+ return `${prefix}-${Date.now().toString(36)}-${requestSequence}`;
+}
+
+function defaultWebSocketFactory(): WebSocketFactory {
+ return (url) => new WebSocket(url) as WebSocketLike;
+}
+
+export class DaemonHubClient {
+ private socket?: WebSocketLike;
+ private readonly daemonSubscribers = new Set<(message: DaemonWebSocketServerMessage) => void>();
+ private readonly stateSubscribers = new Set<(state: DaemonHubConnectionState) => void>();
+ private readonly errorSubscribers = new Set<(message: string) => void>();
+ private readonly actionWaiters = new Map();
+ private openPromise?: Promise;
+ private resolveOpen?: () => void;
+ private rejectOpen?: (error: Error) => void;
+ private reconnectTimer?: ReturnType;
+ private daemonSubscribed = false;
+
+ constructor(
+ private readonly url: string,
+ private readonly factory: WebSocketFactory = defaultWebSocketFactory(),
+ ) {}
+
+ subscribeDaemon(
+ onMessage: (message: DaemonWebSocketServerMessage) => void,
+ onState: (state: DaemonHubConnectionState) => void,
+ onError: (message: string) => void,
+ ): () => void {
+ this.daemonSubscribers.add(onMessage);
+ this.stateSubscribers.add(onState);
+ this.errorSubscribers.add(onError);
+ void this.ensureOpen()
+ .then(() => {
+ this.ensureDaemonSubscription();
+ })
+ .catch((err) => {
+ if (this.errorSubscribers.has(onError)) onError(err.message);
+ });
+ return () => {
+ this.daemonSubscribers.delete(onMessage);
+ this.stateSubscribers.delete(onState);
+ this.errorSubscribers.delete(onError);
+ this.closeIfIdle();
+ };
+ }
+
+ async runAction(input: {
+ sessionId: string;
+ method: string;
+ path: string;
+ body?: unknown;
+ }): Promise {
+ await this.ensureOpen();
+ const requestId = nextRequestId("action");
+ return new Promise((resolve, reject) => {
+ this.actionWaiters.set(requestId, { resolve, reject });
+ try {
+ this.send({
+ type: "action",
+ requestId,
+ sessionId: input.sessionId,
+ method: input.method,
+ path: input.path,
+ ...(input.body !== undefined && { body: input.body }),
+ });
+ } catch (err) {
+ this.actionWaiters.delete(requestId);
+ reject(err instanceof Error ? err : new Error("Daemon WebSocket action failed."));
+ }
+ });
+ }
+
+ stop(): void {
+ this.clearReconnect();
+ this.daemonSubscribers.clear();
+ this.stateSubscribers.clear();
+ this.errorSubscribers.clear();
+ const socket = this.socket;
+ this.socket = undefined;
+ this.daemonSubscribed = false;
+ socket?.close();
+ this.rejectActionWaiters(new Error("Daemon WebSocket closed."));
+ }
+
+ private ensureOpen(): Promise {
+ if (this.socket?.readyState === OPEN) return Promise.resolve();
+ if (this.openPromise) return this.openPromise;
+
+ this.emitState("connecting");
+ let socket: WebSocketLike;
+ try {
+ socket = this.factory(this.url);
+ } catch (cause) {
+ const error = new DaemonHubOpenError(
+ cause instanceof Error ? cause.message : "Daemon WebSocket connection failed.",
+ );
+ this.emitError(error.message);
+ this.emitState("error");
+ return Promise.reject(error);
+ }
+ this.socket = socket;
+ this.openPromise = new Promise((resolve, reject) => {
+ this.resolveOpen = resolve;
+ this.rejectOpen = reject;
+ });
+ socket.onopen = () => {
+ if (this.socket !== socket) return;
+ this.daemonSubscribed = false;
+ this.emitState("open");
+ this.resolveOpen?.();
+ this.openPromise = undefined;
+ this.ensureDaemonSubscription();
+ };
+ socket.onmessage = (event) => {
+ if (this.socket !== socket) return;
+ this.handleMessage(event.data);
+ };
+ socket.onerror = () => {
+ if (this.socket !== socket) return;
+ const wasOpening = !!this.openPromise;
+ const error = new DaemonHubOpenError();
+ this.emitError(error.message);
+ this.emitState("error");
+ this.rejectOpen?.(error);
+ this.openPromise = undefined;
+ this.socket = undefined;
+ this.daemonSubscribed = false;
+ if (!wasOpening) this.rejectActionWaiters(new Error("Daemon WebSocket closed."));
+ socket.close();
+ this.scheduleReconnect();
+ };
+ socket.onclose = () => {
+ if (this.socket !== socket) return;
+ const wasOpening = !!this.openPromise;
+ if (wasOpening)
+ this.rejectOpen?.(new DaemonHubOpenError("Daemon WebSocket closed before opening."));
+ this.daemonSubscribed = false;
+ this.emitState("closed");
+ this.socket = undefined;
+ this.openPromise = undefined;
+ this.rejectActionWaiters(new Error("Daemon WebSocket closed."));
+ this.scheduleReconnect();
+ };
+ return this.openPromise;
+ }
+
+ private handleMessage(data: string): void {
+ const message = parseDaemonWebSocketServerMessageText(data);
+ if (!message) {
+ this.emitError("Daemon WebSocket sent an invalid message.");
+ return;
+ }
+ if (message.type === "action-result") {
+ const waiter = this.actionWaiters.get(message.requestId);
+ if (!waiter) return;
+ this.actionWaiters.delete(message.requestId);
+ waiter.resolve({ status: message.status, payload: message.payload });
+ this.closeIfIdle();
+ return;
+ }
+ if (message.type === "error" && message.requestId) {
+ const waiter = this.actionWaiters.get(message.requestId);
+ if (!waiter) return;
+ this.actionWaiters.delete(message.requestId);
+ waiter.reject(new DaemonHubActionError(message.message, message.code));
+ this.closeIfIdle();
+ return;
+ }
+ if (message.type === "error") {
+ this.emitError(message.message);
+ this.emitState("error");
+ this.rejectActionWaiters(new Error(message.message));
+ const socket = this.socket;
+ this.socket = undefined;
+ this.daemonSubscribed = false;
+ socket?.close();
+ return;
+ }
+ if (
+ message.type === "event" ||
+ message.type === "snapshot" ||
+ message.type === "pong" ||
+ message.type === "heartbeat"
+ ) {
+ for (const subscriber of this.daemonSubscribers) subscriber(message);
+ }
+ }
+
+ sendClientState(visible: boolean, activeSessionId: string | null): void {
+ if (this.socket?.readyState !== OPEN) return;
+ this.send({ type: "client-state", visible, activeSessionId });
+ }
+
+ private send(message: DaemonWebSocketClientMessage): void {
+ if (this.socket?.readyState !== OPEN) {
+ throw new DaemonHubOpenError("Daemon WebSocket is not open.");
+ }
+ this.socket.send(JSON.stringify(message));
+ }
+
+ private ensureDaemonSubscription(): void {
+ if (this.daemonSubscribers.size === 0 || this.daemonSubscribed) return;
+ if (this.socket?.readyState !== OPEN) return;
+ this.send({
+ type: "subscribe",
+ scopes: [{ family: "daemon" }],
+ });
+ this.daemonSubscribed = true;
+ }
+
+ private sendDaemonUnsubscribe(): void {
+ if (!this.daemonSubscribed || this.socket?.readyState !== OPEN) return;
+ this.send({
+ type: "unsubscribe",
+ scopes: [{ family: "daemon" }],
+ });
+ this.daemonSubscribed = false;
+ }
+
+ private scheduleReconnect(): void {
+ if (this.daemonSubscribers.size === 0 || this.reconnectTimer) return;
+ this.reconnectTimer = setTimeout(() => {
+ this.reconnectTimer = undefined;
+ if (this.daemonSubscribers.size === 0) return;
+ void this.ensureOpen().catch((err) => {
+ this.emitError(err.message);
+ });
+ }, 500);
+ }
+
+ private clearReconnect(): void {
+ if (!this.reconnectTimer) return;
+ clearTimeout(this.reconnectTimer);
+ this.reconnectTimer = undefined;
+ }
+
+ private closeIfIdle(): void {
+ if (this.daemonSubscribers.size > 0 || this.actionWaiters.size > 0) return;
+ this.clearReconnect();
+ this.sendDaemonUnsubscribe();
+ const socket = this.socket;
+ if (this.openPromise) {
+ this.rejectOpen?.(new DaemonHubOpenError("Daemon WebSocket closed before opening."));
+ this.openPromise = undefined;
+ }
+ this.resolveOpen = undefined;
+ this.rejectOpen = undefined;
+ this.socket = undefined;
+ socket?.close();
+ }
+
+ private rejectActionWaiters(error: Error): void {
+ for (const waiter of this.actionWaiters.values()) {
+ waiter.reject(error);
+ }
+ this.actionWaiters.clear();
+ }
+
+ private emitState(state: DaemonHubConnectionState): void {
+ for (const subscriber of this.stateSubscribers) subscriber(state);
+ }
+
+ private emitError(message: string): void {
+ for (const subscriber of this.errorSubscribers) subscriber(message);
+ }
+}
+
+export function getDaemonHubClient(url: string, factory?: WebSocketFactory): DaemonHubClient {
+ if (factory) return new DaemonHubClient(url, factory);
+ const existing = clients.get(url);
+ if (existing) return existing;
+ const client = new DaemonHubClient(url);
+ clients.set(url, client);
+ return client;
+}
diff --git a/apps/frontend/src/daemon/events/use-daemon-events.ts b/apps/frontend/src/daemon/events/use-daemon-events.ts
new file mode 100644
index 000000000..9a8524c01
--- /dev/null
+++ b/apps/frontend/src/daemon/events/use-daemon-events.ts
@@ -0,0 +1,55 @@
+import { useCallback, useEffect, useRef } from "react";
+import { toast } from "sonner";
+import { useRouter } from "@tanstack/react-router";
+import { daemonApiClient, type DaemonApiClient } from "../api/client";
+import { connectDaemonEvents, type DaemonEventStreamController } from "./event-stream";
+import { useDaemonEventStore } from "./event-store";
+import { getSessionModeMeta, formatSessionLabel } from "../../shared/session-meta";
+
+export function useDaemonEvents(client: DaemonApiClient = daemonApiClient, enabled = true) {
+ const applyEvent = useDaemonEventStore((state) => state.applyEvent);
+ const setConnectionState = useDaemonEventStore((state) => state.setConnectionState);
+ const setError = useDaemonEventStore((state) => state.setError);
+ const controllerRef = useRef(null);
+ const router = useRouter();
+
+ const handleSessionNotify = useCallback(
+ (session: { id: string; mode: string; project: string; label: string }) => {
+ const meta = getSessionModeMeta(session.mode);
+ const displayLabel = formatSessionLabel(session.label, session.mode);
+ toast(`${meta.label} — ${session.project}`, {
+ description: displayLabel !== session.project ? displayLabel : undefined,
+ duration: 8000,
+ action: {
+ label: "Open",
+ onClick: () =>
+ router.navigate({ to: "/s/$sessionId", params: { sessionId: session.id } }),
+ },
+ });
+ },
+ [router],
+ );
+
+ useEffect(() => {
+ if (!enabled) return undefined;
+ const controller = connectDaemonEvents({
+ client,
+ onEvent: applyEvent,
+ onState: setConnectionState,
+ onError: setError,
+ onSessionNotify: handleSessionNotify,
+ });
+ controllerRef.current = controller;
+
+ return () => {
+ controller.stop();
+ controllerRef.current = null;
+ };
+ }, [applyEvent, client, enabled, handleSessionNotify, setConnectionState, setError]);
+
+ const reportActiveSession = useCallback((sessionId: string | null) => {
+ controllerRef.current?.reportActiveSession(sessionId);
+ }, []);
+
+ return { reportActiveSession };
+}
diff --git a/apps/frontend/src/lib/utils.ts b/apps/frontend/src/lib/utils.ts
new file mode 100644
index 000000000..365058ceb
--- /dev/null
+++ b/apps/frontend/src/lib/utils.ts
@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+ return twMerge(clsx(inputs));
+}
diff --git a/apps/frontend/src/main.tsx b/apps/frontend/src/main.tsx
new file mode 100644
index 000000000..6e67ff792
--- /dev/null
+++ b/apps/frontend/src/main.tsx
@@ -0,0 +1,22 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { RouterProvider } from "@tanstack/react-router";
+import { ThemeProvider } from "@plannotator/ui/components/ThemeProvider";
+import { createAppRouter } from "./app/router";
+import "./styles.css";
+
+const rootElement = document.getElementById("root");
+
+if (!rootElement) {
+ throw new Error("Plannotator frontend root element was not found.");
+}
+
+const router = createAppRouter();
+
+createRoot(rootElement).render(
+
+
+
+
+ ,
+);
diff --git a/apps/frontend/src/routeTree.gen.ts b/apps/frontend/src/routeTree.gen.ts
new file mode 100644
index 000000000..8585fff6a
--- /dev/null
+++ b/apps/frontend/src/routeTree.gen.ts
@@ -0,0 +1,77 @@
+/* eslint-disable */
+
+// @ts-nocheck
+
+// noinspection JSUnusedGlobalSymbols
+
+// This file was automatically generated by TanStack Router.
+// You should NOT make any changes in this file as it will be overwritten.
+// 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 SSessionIdRouteImport } from "./routes/s.$sessionId"
+
+const IndexRoute = IndexRouteImport.update({
+ id: "/",
+ path: "/",
+ getParentRoute: () => rootRouteImport,
+} as any)
+const SSessionIdRoute = SSessionIdRouteImport.update({
+ id: "/s/$sessionId",
+ path: "/s/$sessionId",
+ getParentRoute: () => rootRouteImport,
+} as any)
+
+export interface FileRoutesByFullPath {
+ "/": typeof IndexRoute
+ "/s/$sessionId": typeof SSessionIdRoute
+}
+export interface FileRoutesByTo {
+ "/": typeof IndexRoute
+ "/s/$sessionId": typeof SSessionIdRoute
+}
+export interface FileRoutesById {
+ __root__: typeof rootRouteImport
+ "/": typeof IndexRoute
+ "/s/$sessionId": typeof SSessionIdRoute
+}
+export interface FileRouteTypes {
+ fileRoutesByFullPath: FileRoutesByFullPath
+ fullPaths: "/" | "/s/$sessionId"
+ fileRoutesByTo: FileRoutesByTo
+ to: "/" | "/s/$sessionId"
+ id: "__root__" | "/" | "/s/$sessionId"
+ fileRoutesById: FileRoutesById
+}
+export interface RootRouteChildren {
+ IndexRoute: typeof IndexRoute
+ SSessionIdRoute: typeof SSessionIdRoute
+}
+
+declare module "@tanstack/react-router" {
+ interface FileRoutesByPath {
+ "/": {
+ id: "/"
+ path: "/"
+ fullPath: "/"
+ preLoaderRoute: typeof IndexRouteImport
+ parentRoute: typeof rootRouteImport
+ }
+ "/s/$sessionId": {
+ id: "/s/$sessionId"
+ path: "/s/$sessionId"
+ fullPath: "/s/$sessionId"
+ preLoaderRoute: typeof SSessionIdRouteImport
+ parentRoute: typeof rootRouteImport
+ }
+ }
+}
+
+const rootRouteChildren: RootRouteChildren = {
+ IndexRoute: IndexRoute,
+ SSessionIdRoute: SSessionIdRoute,
+}
+export const routeTree = rootRouteImport
+ ._addFileChildren(rootRouteChildren)
+ ._addFileTypes()
diff --git a/apps/frontend/src/routes/__root.tsx b/apps/frontend/src/routes/__root.tsx
new file mode 100644
index 000000000..97136e407
--- /dev/null
+++ b/apps/frontend/src/routes/__root.tsx
@@ -0,0 +1,7 @@
+import { createRootRouteWithContext } from "@tanstack/react-router";
+import { Layout } from "../app/Layout";
+import type { AppRouterContext } from "../app/router";
+
+export const Route = createRootRouteWithContext()({
+ component: Layout,
+});
diff --git a/apps/frontend/src/routes/index.tsx b/apps/frontend/src/routes/index.tsx
new file mode 100644
index 000000000..6900aeb67
--- /dev/null
+++ b/apps/frontend/src/routes/index.tsx
@@ -0,0 +1,12 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { LandingPage } from "../components/landing/LandingPage";
+import { useAppStore } from "../stores/app-store";
+
+export const Route = createFileRoute("/")({
+ component: DashboardRoute,
+});
+
+function DashboardRoute() {
+ const setAddProjectOpen = useAppStore((s) => s.setAddProjectOpen);
+ return setAddProjectOpen(true)} />;
+}
diff --git a/apps/frontend/src/routes/s.$sessionId.tsx b/apps/frontend/src/routes/s.$sessionId.tsx
new file mode 100644
index 000000000..9345bf8a3
--- /dev/null
+++ b/apps/frontend/src/routes/s.$sessionId.tsx
@@ -0,0 +1,51 @@
+import { useEffect } from "react";
+import { createFileRoute } from "@tanstack/react-router";
+import { SidebarTrigger } from "@/components/ui/sidebar";
+import type { SessionBootstrap } from "../daemon/contracts";
+import type { DaemonApiResult } from "../daemon/api/errors";
+import { appStore } from "../stores/app-store";
+
+const SESSION_ID_PATTERN = /^[A-Za-z0-9][A-Za-z0-9_-]{2,127}$/;
+
+export const Route = createFileRoute("/s/$sessionId")({
+ params: {
+ parse: ({ sessionId }) => {
+ if (!SESSION_ID_PATTERN.test(sessionId)) return false;
+ return { sessionId };
+ },
+ stringify: ({ sessionId }) => ({ sessionId }),
+ },
+ loader: ({ context, params }) => context.daemonClient.getSessionBootstrap(params.sessionId),
+ component: SessionRoute,
+});
+
+function SessionRoute() {
+ const result: DaemonApiResult = Route.useLoaderData();
+ const { sessionId } = Route.useParams();
+
+ useEffect(() => {
+ if (result.ok) {
+ appStore.getState().activateSession(sessionId, result.data);
+ } else {
+ appStore.getState().deactivateSession();
+ }
+ }, [sessionId, result]);
+
+ if (!result.ok) {
+ return (
+
+
+
+
+
Session could not be loaded.
+
+
+