@saadnvd1/agent-os 0.3.603 → 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/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 };
+}

package/lib/inbox/counts.ts

@@ -0,0 +1,140 @@
+// What the Inbox lists and counts. Pure and client-safe, so the button, the
+// panel and the tests share one rule.
+
+import {
+  needsYouItems,
+  type NeedsYouItem,
+} from "../orchestrator/needs-you-items";
+import type { AskView, QuestionView } from "../orchestrator/ask-view";
+
+export type InboxTab = "needs" | "tasks" | "messages";
+export const INBOX_TABS: readonly InboxTab[] = ["needs", "tasks", "messages"];
+
+export interface NeedsRow {
+  key: string;
+  kind: "input" | "ask" | "question";
+  title: string;
+  sub: string;
+  at: number;
+  // The session or task this is about, when known; what keeps one session
+  // from being counted twice.
+  sessionId: string | null;
+  workspaceId: string | null;
+  ask?: AskView;
+  question?: QuestionView;
+}
+
+export interface OverviewLike {
+  workspaceId: string;
+  asks: AskView[];
+  questions: QuestionView[];
+  dismissed: string[];
+}
+
+const TASK_PREFIX = "task:";
+
+export function needsYouRows(input: {
+  waiting: { id: string; name: string }[];
+  overviews: OverviewLike[];
+}): NeedsRow[] {
+  const rows: NeedsRow[] = [];
+  for (const o of input.overviews) {
+    const items = needsYouItems({
+      asks: o.asks,
+      questions: o.questions,
+      dismissed: o.dismissed,
+    });
+    for (const item of items) {
+      const row = fromItem(item, o.workspaceId);
+      if (row) rows.push(row);
+    }
+  }
+  const covered = new Set(
+    rows.flatMap((r) => (r.sessionId ? [r.sessionId] : []))
+  );
+  for (const s of input.waiting)
+    if (!covered.has(s.id))
+      rows.push({
+        key: `input:${s.id}`,
+        kind: "input",
+        title: s.name,
+        sub: "Waiting for input",
+        at: 0,
+        sessionId: s.id,
+        workspaceId: null,
+      });
+  return rows.sort((a, b) => b.at - a.at);
+}
+
+function fromItem(item: NeedsYouItem, workspaceId: string): NeedsRow | null {
+  if (item.kind === "ask")
+    return {
+      key: item.key,
+      kind: "ask",
+      title: item.title,
+      sub: item.sub,
+      at: item.at,
+      sessionId: item.ask.subject.startsWith(TASK_PREFIX)
+        ? item.ask.subject.slice(TASK_PREFIX.length)
+        : null,
+      workspaceId,
+      ask: item.ask,
+    };
+  if (item.kind === "question")
+    return {
+      key: item.key,
+      kind: "question",
+      title: item.title,
+      sub: item.sub,
+      at: item.at,
+      sessionId: item.question.task,
+      workspaceId,
+      question: item.question,
+    };
+  return null;
+}
+
+export function unreadCount(
+  messages: { id: number }[],
+  seenId: number | null
+): number {
+  if (seenId === null) return 0;
+  return messages.filter((m) => m.id > seenId).length;
+}
+
+export interface InboxCounts {
+  needs: number;
+  tasks: number;
+  messages: number;
+  total: number;
+}
+
+// The badge counts each session once: a task needing you that is already a
+// Needs-you row (waiting for input, or the subject of an ask) adds nothing.
+export function inboxCounts(input: {
+  rows: NeedsRow[];
+  tasksNeedingYou: string[];
+  unread: number;
+}): InboxCounts {
+  const covered = new Set(
+    input.rows.flatMap((r) => (r.sessionId ? [r.sessionId] : []))
+  );
+  const extraTasks = input.tasksNeedingYou.filter((id) => !covered.has(id));
+  return {
+    needs: input.rows.length,
+    tasks: input.tasksNeedingYou.length,
+    messages: input.unread,
+    total: input.rows.length + extraTasks.length + input.unread,
+  };
+}
+
+// Needs you when it has items, else the tab he used last.
+export function pickTab(input: {
+  explicit?: InboxTab;
+  needs: number;
+  last: InboxTab | null;
+}): InboxTab {
+  if (input.explicit) return input.explicit;
+  if (input.needs > 0) return "needs";
+  return input.last ?? "needs";
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saadnvd1/agent-os",
-  "version": "0.3.603",
+  "version": "0.3.605",
   "description": "Self-hosted web UI for managing Claude Code sessions",
   "bin": {
     "agent-os": "scripts/agent-os"