@saadnvd1/agent-os 0.3.602 → 0.3.605

package/components/Pane/PaneMenu.test.ts

@@ -0,0 +1,118 @@
+import "@/components/Chat/composer/test-dom";
+import { act, createElement } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import type { Session } from "@/lib/db/types";
+import { bookmarksUi } from "@/stores/bookmarksUi";
+import { docsUi } from "@/stores/docsUi";
+import { paletteUi } from "@/stores/palette";
+
+const data = vi.hoisted(() => ({
+  bookmarks: [] as unknown[],
+  docs: null as { id: string } | null,
+}));
+vi.mock("@/data/bookmarks", () => ({
+  useSessionBookmarks: () => ({ data: data.bookmarks }),
+}));
+vi.mock("@/data/lumifyhub/docs", () => ({
+  useDocsWorkspace: () => data.docs,
+}));
+vi.mock("@/components/Tasks/MoveMenuItems", () => ({
+  MoveMenuItems: () => null,
+}));
+// Radix's focus handling needs a real browser; plain elements show what the
+// menu offers.
+vi.mock("@/components/ui/dropdown-menu", async () => {
+  const { createElement: h } = await import("react");
+  const part =
+    (tag: string) => (props: { children?: unknown; onSelect?: () => void }) =>
+      h(tag, { onClick: props.onSelect }, props.children as never);
+  return {
+    DropdownMenu: part("div"),
+    DropdownMenuTrigger: part("div"),
+    DropdownMenuContent: part("div"),
+    DropdownMenuLabel: part("div"),
+    DropdownMenuItem: part("button"),
+    DropdownMenuSeparator: part("hr"),
+    DropdownMenuShortcut: part("span"),
+  };
+});
+
+import { PaneMenu } from "./PaneMenu";
+
+(
+  globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }
+).IS_REACT_ACT_ENVIRONMENT = true;
+
+const session = {
+  id: "s1",
+  name: "Chat",
+  project_id: "p1",
+  view: "chat",
+} as Session;
+
+describe("PaneMenu", () => {
+  let host: HTMLElement;
+  let root: Root;
+  beforeEach(() => {
+    host = document.createElement("div");
+    document.body.appendChild(host);
+    root = createRoot(host);
+    data.bookmarks = [];
+    data.docs = null;
+    paletteUi.open = false;
+    bookmarksUi.chatSessionId = null;
+    docsUi.workspaceId = null;
+  });
+  afterEach(() => {
+    act(() => root.unmount());
+    host.remove();
+  });
+  const render = (bookmarksSessionId: string | null = "s1") =>
+    act(() => {
+      root.render(
+        createElement(PaneMenu, {
+          session,
+          bookmarksSessionId,
+          canSplit: true,
+          canClose: true,
+          hasAttachedTmux: false,
+          onSplitHorizontal: () => {},
+          onSplitVertical: () => {},
+          onClose: () => {},
+          onDetach: () => {},
+        })
+      );
+    });
+  const item = (text: string) =>
+    [...host.querySelectorAll("button")].find((b) =>
+      b.textContent?.startsWith(text)
+    );
+
+  it("always offers the command palette with its shortcut, and opens it", () => {
+    render(null);
+    const palette = item("Command palette");
+    expect(palette?.textContent).toContain("⌘K");
+    act(() => palette?.click());
+    expect(paletteUi.open).toBe(true);
+  });
+
+  it("offers Bookmarks with its count for a chat only", () => {
+    data.bookmarks = [{}, {}, {}];
+    render();
+    expect(item("Bookmarks")?.textContent).toContain("3");
+    act(() => root.unmount());
+    root = createRoot(host);
+    render(null);
+    expect(item("Bookmarks")).toBeUndefined();
+  });
+
+  it("offers Docs only when the project's workspace has them", () => {
+    render();
+    expect(item("Docs")).toBeUndefined();
+    data.docs = { id: "w1" };
+    render();
+    act(() => item("Docs")?.click());
+    expect(docsUi.workspaceId).toBe("w1");
+  });
+});

package/components/Pane/PaneMenu.tsx

@@ -2,12 +2,15 @@
 
 import { toast } from "sonner";
 import {
+  BookOpen,
+  Command,
   Copy,
   Link,
   MoreHorizontal,
   Share2,
   SplitSquareHorizontal,
   SplitSquareVertical,
+  Star,
   Unplug,
   X,
 } from "lucide-react";
@@ -18,15 +21,23 @@ import {
   DropdownMenuItem,
   DropdownMenuLabel,
   DropdownMenuSeparator,
+  DropdownMenuShortcut,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { copySessionLink, writeClipboard } from "@/hooks/useCopyToClipboard";
 import type { Session } from "@/lib/db";
 import { shareUiActions } from "@/stores/shareUi";
+import { useSessionBookmarks } from "@/data/bookmarks";
+import { useDocsWorkspace } from "@/data/lumifyhub/docs";
+import { bookmarksUiActions } from "@/stores/bookmarksUi";
+import { docsUiActions } from "@/stores/docsUi";
+import { paletteActions } from "@/stores/palette";
 import { MoveMenuItems } from "@/components/Tasks/MoveMenuItems";
 
 interface PaneMenuProps {
   session: Session | null | undefined;
+  // The chat on show, for its bookmarks; null for a terminal or another view.
+  bookmarksSessionId?: string | null;
   canSplit: boolean;
   canClose: boolean;
   hasAttachedTmux: boolean;
@@ -40,6 +51,7 @@ interface PaneMenuProps {
 // the bar.
 export function PaneMenu({
   session,
+  bookmarksSessionId,
   canSplit,
   canClose,
   hasAttachedTmux,
@@ -48,6 +60,8 @@ export function PaneMenu({
   onClose,
   onDetach,
 }: PaneMenuProps) {
+  const { data: bookmarks = [] } = useSessionBookmarks(bookmarksSessionId);
+  const docs = useDocsWorkspace(session?.project_id);
   const copyId = async (id: string) => {
     try {
       await writeClipboard(id);
@@ -112,6 +126,29 @@ export function PaneMenu({
             />
           </>
         )}
+        {bookmarksSessionId && (
+          <DropdownMenuItem
+            onSelect={() => bookmarksUiActions.openChat(bookmarksSessionId)}
+          >
+            <Star className="h-4 w-4" />
+            Bookmarks
+            {bookmarks.length > 0 && (
+              <DropdownMenuShortcut>{bookmarks.length}</DropdownMenuShortcut>
+            )}
+          </DropdownMenuItem>
+        )}
+        <DropdownMenuItem onSelect={paletteActions.open}>
+          <Command className="h-4 w-4" />
+          Command palette
+          <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>
+        </DropdownMenuItem>
+        {docs && (
+          <DropdownMenuItem onSelect={() => docsUiActions.open(docs.id)}>
+            <BookOpen className="h-4 w-4" />
+            Docs
+          </DropdownMenuItem>
+        )}
+        <DropdownMenuSeparator />
         {hasAttachedTmux && (
           <DropdownMenuItem onSelect={onDetach}>
             <Unplug className="h-4 w-4" />

package/components/SessionList/OrchestratorPinRow.tsx

@@ -14,6 +14,7 @@ import { cn } from "@/lib/utils";
 import { orchestratorOpenActions } from "@/stores/orchestratorOpen";
 import { useRowContext } from "./RowContext";
 import { SessionRowMenu } from "./SessionRowMenu";
+import { ActiveTick } from "./RowShell";
 import { RowRename, UnreadDot } from "./RowParts";
 import { QuickChangeRow } from "./QuickChangeRow";
 import { NestRail } from "./RowParts";
@@ -59,10 +60,11 @@ export const OrchestratorPinRow = memo(function OrchestratorPinRow({
       onActivate={() => !renaming && ctx.onSelect(session.id)}
       className={
         active
-          ? "bg-primary/10 border-primary/30"
+          ? "bg-foreground/[0.07]"
           : "bg-muted/50 hover:bg-muted has-[[data-chip]:hover]:bg-muted/50"
       }
     >
+      {active && <ActiveTick />}
       <Workflow
         aria-hidden
         className={cn(

package/components/SessionList/RowShell.tsx

@@ -7,6 +7,17 @@ import * as DM from "@/components/ui/dropdown-menu";
 import * as CM from "@/components/ui/context-menu";
 import { cn } from "@/lib/utils";
 
+// The open row's accent: a thin rounded tick at the left edge, inside the
+// row so the list's overflow can't clip it.
+export function ActiveTick() {
+  return (
+    <span
+      aria-hidden
+      className="bg-primary pointer-events-none absolute inset-y-[9px] left-0 w-[3px] rounded-full"
+    />
+  );
+}
+
 export type RowMenuKind = "dropdown" | "context";
 
 // Every sidebar row's frame: a leading mark, title over subtitle, what's on
@@ -66,10 +77,11 @@ export function RowShell({
         highlight === "selected"
           ? "bg-primary/15"
           : highlight === "active"
-            ? "bg-primary/10"
-            : "hover:bg-foreground/[0.04]"
+            ? "bg-foreground/[0.07]"
+            : "hover:bg-foreground/[0.025]"
       )}
     >
+      {highlight === "active" && <ActiveTick />}
       {leading}
       <span className="@container flex min-w-0 flex-1 flex-col leading-tight">
         {children}

package/components/SessionList/SidebarHeader.tsx

@@ -31,11 +31,10 @@ import { Button } from "@/components/ui/button";
 import type { Workspace } from "@/lib/db";
 import { archivedUiActions } from "@/stores/archivedUi";
 import { bookmarksUiActions } from "@/stores/bookmarksUi";
-import { tasksUiActions } from "@/stores/tasksUi";
+import { inboxUiActions } from "@/stores/inboxUi";
 import { newDraft } from "@/stores/drafts";
 import { schedulesUiActions } from "@/stores/schedulesUi";
 import { recipesUiActions } from "@/stores/recipesUi";
-import { busUiActions } from "@/stores/busUi";
 import { settingsUiActions } from "@/stores/settingsUi";
 import { usageUiActions } from "@/stores/usageUi";
 import { WorkspaceSwitcher } from "./WorkspaceSwitcher";
@@ -99,7 +98,9 @@ export function SidebarHeader(props: SidebarHeaderProps) {
             </Button>
           }
           items={[
-            menuItem("Tasks", tasksUiActions.openPanel, { icon: ListTodo }),
+            menuItem("Tasks", () => inboxUiActions.open("tasks"), {
+              icon: ListTodo,
+            }),
             // Opens Settings > Schedules.
             menuItem("Schedules", () => schedulesUiActions.open(workspaceId), {
               icon: Clock,
@@ -115,7 +116,9 @@ export function SidebarHeader(props: SidebarHeaderProps) {
             menuItem("Recipes", () => recipesUiActions.open(workspaceId), {
               icon: ChefHat,
             }),
-            menuItem("Messages", busUiActions.open, { icon: MessagesSquare }),
+            menuItem("Messages", () => inboxUiActions.open("messages"), {
+              icon: MessagesSquare,
+            }),
             ...(props.onOpenDocs
               ? [menuItem("Docs", props.onOpenDocs, { icon: BookOpen })]
               : []),

package/components/Tasks/TaskRow.tsx

@@ -15,7 +15,7 @@ import { isFinished } from "@/lib/tasks/state";
 import { useArmTask, useDropTask, useSignOffTask } from "@/data/tasks";
 import { useResurrectSession } from "@/data/done";
 import { tmuxAttachActions } from "@/stores/tmuxAttach";
-import { tasksUiActions } from "@/stores/tasksUi";
+import { inboxUiActions } from "@/stores/inboxUi";
 import { recipesUiActions } from "@/stores/recipesUi";
 import { cn } from "@/lib/utils";
 import { SimulatorIndicator } from "@/components/Simulator";
@@ -103,7 +103,7 @@ export function TaskRow({ task }: { task: TaskView }) {
             onClick={() => {
               if (task.hostError) return;
               tmuxAttachActions.request(task.tmuxName, task.hostId ?? "local");
-              tasksUiActions.setPanelOpen(false);
+              inboxUiActions.setOpen(false);
             }}
           >
             <SquareTerminal className="h-3.5 w-3.5" />
@@ -191,7 +191,7 @@ export function TaskRow({ task }: { task: TaskView }) {
             className="text-muted-foreground h-11 md:h-8"
             onClick={() => {
               recipesUiActions.saveSessionAs(task.id);
-              tasksUiActions.setPanelOpen(false);
+              inboxUiActions.setOpen(false);
             }}
           >
             <ChefHat className="h-3.5 w-3.5" />

package/components/Tasks/TasksPanel.tsx

@@ -0,0 +1,63 @@
+"use client";
+
+import { Plus } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { useTasksQuery } from "@/data/tasks";
+import { isFinished, needsHuman } from "@/lib/tasks/state";
+import { inboxUiActions } from "@/stores/inboxUi";
+import { newDraft } from "@/stores/drafts";
+import { TaskRow } from "./TaskRow";
+import { BoardTodoSection } from "@/components/LumifyHub";
+import { StacksSection } from "@/components/Stacks";
+import { FeaturesSection } from "@/components/Features";
+
+export function TasksPanel() {
+  const { data: tasks = [], isPending } = useTasksQuery();
+  const active = tasks.filter((t) => !isFinished(t.state));
+  // Whatever needs a human first.
+  active.sort(
+    (a, b) => Number(needsHuman(b.state)) - Number(needsHuman(a.state))
+  );
+  const done = tasks.filter((t) => !active.includes(t)).slice(0, 10);
+
+  return (
+    <div className="space-y-3 [&>*]:min-w-0">
+      <div className="flex justify-end">
+        <Button
+          size="sm"
+          onClick={() => {
+            inboxUiActions.setOpen(false);
+            newDraft({ kind: "current", openPr: true });
+          }}
+        >
+          <Plus className="h-4 w-4" />
+          New task
+        </Button>
+      </div>
+      {isPending && (
+        <div className="bg-muted/40 h-16 animate-pulse rounded-xl" />
+      )}
+      {!isPending && tasks.length === 0 && (
+        <p className="text-muted-foreground py-6 text-center text-sm">
+          No tasks yet. Start one and keep working while it runs.
+        </p>
+      )}
+      <div className="space-y-2">
+        {active.map((t) => (
+          <TaskRow key={t.id} task={t} />
+        ))}
+      </div>
+      <FeaturesSection />
+      <StacksSection />
+      <BoardTodoSection />
+      {done.length > 0 && (
+        <div className="space-y-2">
+          <p className="label-mono text-muted-foreground pt-2">Finished</p>
+          {done.map((t) => (
+            <TaskRow key={t.id} task={t} />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/components/Tasks/index.ts

@@ -1,2 +1,2 @@
-export { TasksDialog } from "./TasksDialog";
+export { TasksPanel } from "./TasksPanel";
 export { useTasksNeedingYou } from "./useTasksNeedingYou";

package/components/views/DesktopAppActions.tsx

@@ -1,27 +1,16 @@
 "use client";
 
-import { Command, PanelLeft, PanelLeftClose, Plus } from "lucide-react";
+import { PanelLeft, PanelLeftClose, Plus } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
-import { TasksButton } from "@/components/Tasks/TasksButton";
-import { MessagesButton } from "@/components/Bus/MessagesButton";
-import { DocsButton } from "@/components/LumifyHub/Docs/DocsButton";
-import { NotificationsMenu } from "@/components/NotificationsMenu";
-import type { ViewProps } from "./types";
+import { InboxButton } from "@/components/Inbox/InboxButton";
 import { newDraft } from "@/stores/drafts";
-import { paletteActions } from "@/stores/palette";
-import { useClock } from "@/hooks/useMinuteTick";
-import { inBell } from "@/lib/sidebar/shelves";
 import { DRAFT_KEYS } from "@/lib/drafts";
 
-// Labels collapse to icons when the pane bar carrying these is narrow
-// (a split), via the bar's container query.
-export const BAR_LABEL = "hidden @5xl/bar:inline";
-
 export function SidebarToggle({
   isPinned,
   togglePin,
@@ -56,71 +45,29 @@ export function SidebarToggle({
   );
 }
 
-type AppActionsProps = Pick<
-  ViewProps,
-  | "sessions"
-  | "sessionStatuses"
-  | "activeSession"
-  | "notificationSettings"
-  | "attachToSession"
->;
-
-export function DesktopAppActions({
-  sessions,
-  sessionStatuses,
-  activeSession,
-  notificationSettings,
-  attachToSession,
-}: AppActionsProps) {
-  const now = useClock();
+export function DesktopAppActions() {
   return (
     <div
       className="flex shrink-0 items-center gap-0.5"
       onClick={(e) => e.stopPropagation()}
     >
+      <InboxButton />
       <Tooltip>
         <TooltipTrigger asChild>
           <Button
-            variant="ghost"
             size="icon-sm"
-            aria-label="Command palette"
-            className="h-7 w-7"
-            onClick={paletteActions.open}
+            aria-label="New session"
+            className="ml-1 h-7 w-7"
+            onClick={() => newDraft({ kind: "current" })}
           >
-            <Command className="h-4 w-4" />
+            <Plus className="h-4 w-4" />
           </Button>
         </TooltipTrigger>
         <TooltipContent>
-          <p>Command palette</p>
-          <p className="text-muted-foreground text-xs">⌘K</p>
+          <p>New session</p>
+          <p className="text-muted-foreground text-xs">{DRAFT_KEYS.current}</p>
         </TooltipContent>
       </Tooltip>
-      <NotificationsMenu
-        settings={notificationSettings}
-        waitingSessions={sessions
-          .filter((s) => inBell(s, sessionStatuses[s.id], now))
-          .map((s) => ({ id: s.id, name: s.name }))}
-        onSelectSession={(id) => {
-          const session = sessions.find((s) => s.id === id);
-          if (session) attachToSession(session);
-        }}
-      />
-      <MessagesButton labelClassName={BAR_LABEL} />
-      <TasksButton labelClassName={BAR_LABEL} />
-      <DocsButton
-        projectId={activeSession?.project_id}
-        labelClassName={BAR_LABEL}
-      />
-      <Button
-        size="sm"
-        aria-label="New session"
-        title={`New session (${DRAFT_KEYS.current})`}
-        className="ml-1 h-7 gap-1 px-2"
-        onClick={() => newDraft({ kind: "current" })}
-      >
-        <Plus className="h-4 w-4" />
-        <span className="hidden @3xl/bar:inline">New session</span>
-      </Button>
     </div>
   );
 }

package/components/views/DesktopView.tsx

@@ -17,8 +17,6 @@ export function DesktopView({
   focusedActiveTab,
   showQuickSwitcher,
   setShowQuickSwitcher,
-  notificationSettings,
-  attachToSession,
   selectSession,
   openSessionInNewTab,
   handleNewSessionInProject,
@@ -61,15 +59,7 @@ export function DesktopView({
             leading={
               <SidebarToggle isPinned={isPinned} togglePin={togglePin} />
             }
-            trailing={
-              <DesktopAppActions
-                sessions={sessions}
-                sessionStatuses={sessionStatuses}
-                activeSession={activeSession}
-                notificationSettings={notificationSettings}
-                attachToSession={attachToSession}
-              />
-            }
+            trailing={<DesktopAppActions />}
           >
             <PaneLayout renderPane={renderPane} />
           </PaneBarSlotsProvider>

package/hooks/useInbox.ts

@@ -0,0 +1,69 @@
+"use client";
+
+import { useEffect, useMemo } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { useSnapshot } from "valtio";
+import { useSessionsQuery } from "@/data/sessions/queries";
+import { fetchStatuses } from "@/data/statuses/queries";
+import { statusKeys } from "@/data/sessions/keys";
+import { useOrchestratorsQuery } from "@/data/orchestrators";
+import { useTasksQuery } from "@/data/tasks";
+import { useBusMessages } from "@/data/bus";
+import { useClock } from "@/hooks/useMinuteTick";
+import { inBell } from "@/lib/sidebar/shelves";
+import { needsHuman } from "@/lib/tasks/state";
+import {
+  inboxCounts,
+  needsYouRows,
+  unreadCount,
+  type InboxCounts,
+  type NeedsRow,
+} from "@/lib/inbox/counts";
+import { inboxUi, inboxUiActions } from "@/stores/inboxUi";
+
+// Everything waiting on him, from the queries the old panels already used.
+export function useInbox(): { rows: NeedsRow[]; counts: InboxCounts } {
+  const now = useClock();
+  const { data: sessions } = useSessionsQuery();
+  const { data: statuses } = useQuery({
+    queryKey: statusKeys.all,
+    queryFn: fetchStatuses,
+    staleTime: 2000,
+  });
+  const { data: overviews } = useOrchestratorsQuery();
+  const { data: tasks } = useTasksQuery();
+  const { data: messages } = useBusMessages();
+  const { seenMessageId } = useSnapshot(inboxUi);
+
+  useEffect(() => {
+    inboxUiActions.loadSeen();
+  }, []);
+  // First run: what is already there isn't new.
+  useEffect(() => {
+    if (!messages || inboxUi.seenMessageId !== null) return;
+    inboxUiActions.markSeen(messages.reduce((n, m) => Math.max(n, m.id), 0));
+  }, [messages, seenMessageId]);
+
+  const rows = useMemo(
+    () =>
+      needsYouRows({
+        waiting: (sessions?.sessions ?? [])
+          .filter((s) => inBell(s, statuses?.statuses[s.id], now))
+          .map((s) => ({ id: s.id, name: s.name })),
+        overviews: overviews ?? [],
+      }),
+    [sessions, statuses, overviews, now]
+  );
+  const counts = useMemo(
+    () =>
+      inboxCounts({
+        rows,
+        tasksNeedingYou: (tasks ?? [])
+          .filter((t) => needsHuman(t.state))
+          .map((t) => t.id),
+        unread: unreadCount(messages ?? [], seenMessageId),
+      }),
+    [rows, tasks, messages, seenMessageId]
+  );
+  return { rows, counts };
+}