@saadnvd1/agent-os 0.3.700 → 0.3.723

package/components/SessionList/SessionRow.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { AGENT_ROLE_DEFS, isAgentRole } from "@/lib/models/agent-roles";
 import { isFork } from "@/lib/sessions/fork";
 import { memo, useState } from "react";
 import { useSnapshot } from "valtio";
@@ -126,19 +127,30 @@ export const SessionRow = memo(function SessionRow({
             }}
           />
         ) : (
-          <span
-            className={cn(
-              "truncate text-sm",
-              muted && !active ? "text-muted-foreground" : "text-foreground",
-              active && "font-medium"
+          <span className="flex min-w-0 items-center gap-1.5">
+            {isAgentRole(session.agent_role) && (
+              <span
+                title={AGENT_ROLE_DEFS[session.agent_role].label}
+                className="bg-accent text-primary grid h-4 w-4 shrink-0 place-items-center rounded text-[10px] font-semibold"
+              >
+                {AGENT_ROLE_DEFS[session.agent_role].label[0]}
+              </span>
             )}
-          >
-            {session.name}
+            <span
+              className={cn(
+                "truncate text-sm",
+                muted && !active ? "text-muted-foreground" : "text-foreground",
+                active && "font-medium"
+              )}
+            >
+              {session.name}
+            </span>
           </span>
         )}
         <RowSubtitle
           session={session}
           hideHost={inMachineShelf}
+          groupName={row.groupName}
           detail={row.status?.detail}
           live={
             row.need

package/components/SessionList/SessionRowMenu.tsx

@@ -15,6 +15,7 @@ import {
   KanbanSquare,
   Link,
   Share2,
+  Download,
   Loader2,
   Pencil,
   Pin,
@@ -49,6 +50,7 @@ import type { SidebarRow } from "@/lib/sidebar/shelves";
 import { useRowContext } from "./RowContext";
 import { MoveMenuItems } from "@/components/Tasks/MoveMenuItems";
 import { shareUiActions } from "@/stores/shareUi";
+import { exportUiActions } from "@/stores/exportUi";
 import { copySessionLink } from "@/hooks/useCopyToClipboard";
 import { useLinkedHostNames } from "@/data/hosts";
 import { remoteBlocks, remoteNote } from "@/lib/hosts/remote-menu";
@@ -61,6 +63,7 @@ import {
   type RowMenuItem,
 } from "@/lib/sidebar/row-menu";
 import { Expander, MenuItem, PARTS, icon, type MenuKind } from "./RowMenuParts";
+import { MoveToGroupMenu } from "./MoveToGroupMenu";
 
 const GROUP_ICON: Record<RowMenuGroup, typeof Copy> = {
   open: ExternalLink,
@@ -105,6 +108,12 @@ export function SessionRowMenu({
     ctx.projects.find((p) => p.id === session.project_id)?.workspace_id ??
     null;
 
+  // The server files by the project's workspace first.
+  const groupWorkspaceId =
+    ctx.projects.find((p) => p.id === session.project_id)?.workspace_id ??
+    session.workspace_id ??
+    null;
+
   const plan = rowMenu({
     session,
     row,
@@ -189,6 +198,10 @@ export function SessionRowMenu({
             title: session.name,
           })
         );
+      case "export":
+        return item("Export for AI…", Download, () =>
+          exportUiActions.open(session.id, session.name)
+        );
       case "fork":
         return item("Fork session", Copy, () => ctx.onFork(session.id));
       case "fresh-start":
@@ -222,6 +235,16 @@ export function SessionRowMenu({
             {projects}
           </Expander>
         );
+      case "move-group":
+        return (
+          <MoveToGroupMenu
+            key={it}
+            kind={kind}
+            sessionId={session.id}
+            groupId={session.session_group_id}
+            workspaceId={groupWorkspaceId}
+          />
+        );
       case "check-ins":
         return item("Schedule check-ins", Clock, () =>
           schedulesUiActions.openDraft(workspaceId!, {

package/components/SessionList/SessionShelves.tsx

@@ -14,6 +14,7 @@ import { sidebarUiActions } from "@/stores/sidebarUi";
 import { cn } from "@/lib/utils";
 import { usePendingCardSessions } from "@/data/learning-cards";
 import { SessionRow } from "./SessionRow";
+import { GroupShelves } from "./GroupShelves";
 import { OrchestratorPinRow, OrchestratorStartRow } from "./OrchestratorPinRow";
 import { QueuedRow } from "./QueuedRow";
 import type { QueuedRow as QueuedRowData } from "@/lib/sidebar/queued";
@@ -117,6 +118,7 @@ export function SessionShelves({
   doneCollapsed,
   snoozedCollapsed,
   donePages,
+  workspaceNames,
 }: {
   shelves: Shelves;
   queued: QueuedRowData[];
@@ -124,6 +126,7 @@ export function SessionShelves({
   doneCollapsed: boolean;
   snoozedCollapsed: boolean;
   donePages: number;
+  workspaceNames?: Map<string, string>;
 }) {
   const folds = { doneCollapsed, snoozedCollapsed, donePages };
   const shown = shelves.done.slice(0, doneLimit(donePages));
@@ -142,6 +145,7 @@ export function SessionShelves({
     shelves.orchestrators.length +
       toStart.length +
       shelves.pinned.length +
+      shelves.groups.length +
       shelves.needsYou.length +
       shelves.working.length +
       shelves.inReview.length +
@@ -167,6 +171,7 @@ export function SessionShelves({
           ))}
         </Shelf>
       )}
+      <GroupShelves groups={shelves.groups} workspaceNames={workspaceNames} />
       {shelves.needsYou.length > 0 && (
         <Shelf label="Needs you" count={shelves.needsYou.length} accent>
           {shelves.needsYou.map((r) => (

package/components/SessionList/SidebarBody.tsx

@@ -63,6 +63,7 @@ export function SidebarBody({
   const count =
     shelves.orchestrators.length +
     shelves.pinned.length +
+    shelves.groups.length +
     shelves.needsYou.length +
     shelves.working.length +
     shelves.inReview.length +
@@ -125,6 +126,11 @@ export function SidebarBody({
         doneCollapsed={ui.doneCollapsed}
         snoozedCollapsed={ui.snoozedCollapsed}
         donePages={ui.donePages}
+        workspaceNames={
+          data.workspace
+            ? undefined
+            : new Map(data.workspaces.map((w) => [w.id, w.name]))
+        }
       />
       <MachineShelves groups={data.machines} />
       <SidebarExtras

package/components/SessionList/SidebarContextMenu.test.ts

@@ -0,0 +1,104 @@
+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";
+
+const mutate = vi.fn();
+vi.mock("@/data/session-groups", () => ({
+  useCreateGroup: () => ({ mutate }),
+}));
+
+// Radix menus need a real browser; render the item inline.
+vi.mock("@/components/ui/context-menu", async () => {
+  const { createElement: h } = await import("react");
+  const part = (p: { children?: unknown }) =>
+    h("div", null, p.children as never);
+  return {
+    ContextMenu: part,
+    ContextMenuTrigger: part,
+    ContextMenuContent: part,
+    ContextMenuItem: (p: { children?: unknown; onSelect?: () => void }) =>
+      h("button", { onClick: p.onSelect }, p.children as never),
+  };
+});
+
+vi.mock("@/components/ui/dialog", async () => {
+  const { createElement: h } = await import("react");
+  const part = (p: { children?: unknown; open?: boolean }) =>
+    p.open === false ? null : h("div", null, p.children as never);
+  return {
+    Dialog: part,
+    DialogContent: part,
+    DialogHeader: part,
+    DialogTitle: part,
+  };
+});
+
+import { SidebarContextMenu, isEditableTarget } from "./SidebarContextMenu";
+
+(
+  globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }
+).IS_REACT_ACT_ENVIRONMENT = true;
+
+let root: Root;
+let host: HTMLElement;
+beforeEach(() => {
+  mutate.mockClear();
+  host = document.createElement("div");
+  document.body.append(host);
+  root = createRoot(host);
+  act(() =>
+    root.render(createElement(SidebarContextMenu, { workspaceId: "w1" }, "x"))
+  );
+});
+afterEach(() => {
+  act(() => root.unmount());
+  host.remove();
+  document.body.innerHTML = "";
+});
+
+const openDialog = () =>
+  act(() => {
+    host.querySelector("button")!.click();
+  });
+const type = (value: string) => {
+  const input = document.body.querySelector("input")!;
+  act(() => {
+    Object.getOwnPropertyDescriptor(
+      HTMLInputElement.prototype,
+      "value"
+    )!.set!.call(input, value);
+    input.dispatchEvent(new window.Event("input", { bubbles: true }));
+  });
+};
+const submit = () =>
+  act(() => {
+    document.body
+      .querySelector("form")!
+      .dispatchEvent(
+        new window.Event("submit", { bubbles: true, cancelable: true })
+      );
+  });
+
+describe("SidebarContextMenu", () => {
+  it("creates a group in the workspace from the typed name", () => {
+    openDialog();
+    type("  Docs  ");
+    submit();
+    expect(mutate).toHaveBeenCalledWith({ name: "Docs", workspaceId: "w1" });
+  });
+
+  it("does nothing for an empty name", () => {
+    openDialog();
+    type("   ");
+    submit();
+    expect(mutate).not.toHaveBeenCalled();
+  });
+
+  it("leaves text fields to the browser's menu", () => {
+    const input = document.createElement("input");
+    const div = document.createElement("div");
+    expect(isEditableTarget(input)).toBe(true);
+    expect(isEditableTarget(div)).toBe(false);
+  });
+});

package/components/SessionList/SidebarContextMenu.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import { useState, type MouseEvent, type ReactNode } from "react";
+import { FolderPlus } from "lucide-react";
+import * as CM from "@/components/ui/context-menu";
+import { WorkspaceNameDialog } from "@/components/Workspaces";
+import { useCreateGroup } from "@/data/session-groups";
+
+export function isEditableTarget(target: EventTarget | null): boolean {
+  return (
+    target instanceof HTMLElement &&
+    !!target.closest("input, textarea, select, [contenteditable='true']")
+  );
+}
+
+// Right-click anywhere in the session list (empty space or a group header)
+// offers "New group". Rows keep their own menu, which wins because it has
+// already handled the event; text fields keep the browser's.
+export function SidebarContextMenu({
+  workspaceId,
+  children,
+}: {
+  workspaceId: string | null;
+  children?: ReactNode;
+}) {
+  const createGroup = useCreateGroup();
+  const [naming, setNaming] = useState(false);
+
+  return (
+    <>
+      <CM.ContextMenu>
+        <CM.ContextMenuTrigger
+          asChild
+          onContextMenuCapture={(e: MouseEvent) => {
+            if (isEditableTarget(e.target)) e.stopPropagation();
+          }}
+        >
+          {children}
+        </CM.ContextMenuTrigger>
+        <CM.ContextMenuContent className="w-44">
+          <CM.ContextMenuItem
+            className="min-h-11 md:min-h-8"
+            onSelect={() => setNaming(true)}
+          >
+            <FolderPlus className="mr-2 h-3.5 w-3.5" />
+            New group
+          </CM.ContextMenuItem>
+        </CM.ContextMenuContent>
+      </CM.ContextMenu>
+      <WorkspaceNameDialog
+        open={naming}
+        title="New group"
+        submitLabel="Create"
+        onSubmit={(name) => createGroup.mutate({ name, workspaceId })}
+        onClose={() => setNaming(false)}
+      />
+    </>
+  );
+}

package/components/SessionList/SidebarHeader.tsx

@@ -15,6 +15,7 @@ import {
   MoreHorizontal,
   Pin,
   PinOff,
+  Network,
   Plus,
   Server,
   Settings,
@@ -30,6 +31,7 @@ import {
 import { Button } from "@/components/ui/button";
 import type { Workspace } from "@/lib/db";
 import { archivedUiActions } from "@/stores/archivedUi";
+import { claimsUiActions } from "@/stores/claimsUi";
 import { bookmarksUiActions } from "@/stores/bookmarksUi";
 import { inboxUiActions } from "@/stores/inboxUi";
 import { newDraft } from "@/stores/drafts";
@@ -134,6 +136,9 @@ export function SidebarHeader(props: SidebarHeaderProps) {
             }),
             separator(),
             menuItem("Machines", props.onManageHosts, { icon: Server }),
+            menuItem("Work across machines", () => claimsUiActions.open(), {
+              icon: Network,
+            }),
             menuItem("Settings", () => settingsUiActions.open(), {
               icon: Settings,
             }),

package/components/SessionList/WorkspaceSwitcher.tsx

@@ -8,6 +8,7 @@ import {
   ChevronDown,
   CircleCheck,
   Clock,
+  Folder,
   FolderPlus,
   Gauge,
   LayoutGrid,
@@ -32,6 +33,7 @@ import { orchestratorOpenActions } from "@/stores/orchestratorOpen";
 import { sidebarUiActions } from "@/stores/sidebarUi";
 import { schedulesUiActions } from "@/stores/schedulesUi";
 import { recipesUiActions } from "@/stores/recipesUi";
+import { useCreateGroup } from "@/data/session-groups";
 import { useAddExistingProject } from "@/components/Projects/AddProject/useAddExistingProject";
 
 const icon = "mr-2 h-3.5 w-3.5";
@@ -49,7 +51,8 @@ export function WorkspaceSwitcher({
   const update = useUpdateWorkspace();
   const remove = useDeleteWorkspace();
   const addExisting = useAddExistingProject();
-  const [dialog, setDialog] = useState<"new" | "rename" | null>(null);
+  const createGroup = useCreateGroup();
+  const [dialog, setDialog] = useState<"new" | "rename" | "group" | null>(null);
   const name = current?.name ?? "All workspaces";
 
   return (
@@ -89,6 +92,12 @@ export function WorkspaceSwitcher({
             <Plus className={icon} />
             New workspace
           </DM.DropdownMenuItem>
+          {current && (
+            <DM.DropdownMenuItem onClick={() => setDialog("group")}>
+              <Folder className={icon} />
+              New group
+            </DM.DropdownMenuItem>
+          )}
           {!current && (
             <>
               <DM.DropdownMenuItem onClick={() => recipesUiActions.open(null)}>
@@ -175,14 +184,22 @@ export function WorkspaceSwitcher({
         </DM.DropdownMenuContent>
       </DM.DropdownMenu>
       <WorkspaceNameDialog
-        open={dialog === "new" || dialog === "rename"}
-        title={dialog === "rename" ? "Rename workspace" : "New workspace"}
+        open={dialog !== null}
+        title={
+          dialog === "rename"
+            ? "Rename workspace"
+            : dialog === "group"
+              ? "New group"
+              : "New workspace"
+        }
         initialName={dialog === "rename" ? current?.name : ""}
         submitLabel={dialog === "rename" ? "Rename" : "Create"}
         onSubmit={(name) =>
-          dialog === "rename" && current
-            ? update.mutate({ id: current.id, name })
-            : create.mutate(name)
+          dialog === "group"
+            ? createGroup.mutate({ name, workspaceId: current?.id ?? null })
+            : dialog === "rename" && current
+              ? update.mutate({ id: current.id, name })
+              : create.mutate(name)
         }
         onClose={() => setDialog(null)}
       />

package/components/SessionList/index.tsx

@@ -21,6 +21,7 @@ import { SidebarSearch } from "./SidebarSearch";
 import { ProjectFilter } from "./ProjectFilter";
 import { SelectionToolbar } from "./SelectionToolbar";
 import { SidebarBody } from "./SidebarBody";
+import { SidebarContextMenu } from "./SidebarContextMenu";
 import { SidebarDialogs, type SidebarDialog } from "./SidebarDialogs";
 import type { SessionListProps } from "./SessionList.types";
 
@@ -193,20 +194,23 @@ export function SessionList({
       )}
 
       <ScrollArea className="w-full flex-1">
-        <div className="max-w-full px-1.5 pb-6">
-          <RowProvider value={rowContext}>
-            <SidebarBody
-              data={data}
-              onNewProject={addProject}
-              devServerHandlers={{
-                onStop: mutations.handleStopDevServer,
-                onRestart: mutations.handleRestartDevServer,
-                onRemove: mutations.handleRemoveDevServer,
-                onViewLogs: (serverId) => setDialog({ kind: "logs", serverId }),
-              }}
-            />
-          </RowProvider>
-        </div>
+        <SidebarContextMenu workspaceId={data.workspace?.id ?? null}>
+          <div className="min-h-[60vh] max-w-full px-1.5 pb-6">
+            <RowProvider value={rowContext}>
+              <SidebarBody
+                data={data}
+                onNewProject={addProject}
+                devServerHandlers={{
+                  onStop: mutations.handleStopDevServer,
+                  onRestart: mutations.handleRestartDevServer,
+                  onRemove: mutations.handleRemoveDevServer,
+                  onViewLogs: (serverId) =>
+                    setDialog({ kind: "logs", serverId }),
+                }}
+              />
+            </RowProvider>
+          </div>
+        </SidebarContextMenu>
       </ScrollArea>
 
       <SidebarDialogs

package/components/SessionList/useSidebarData.ts

@@ -3,9 +3,11 @@
 import { useCallback, useMemo } from "react";
 import { useSnapshot } from "valtio";
 import type { Session } from "@/lib/db";
+import type { SessionGroup } from "@/lib/sidebar/shelves";
 import {
   buildShelves,
   inWorkspace,
+  orderGroups,
   projectsInWorkspace,
 } from "@/lib/sidebar/shelves";
 import type { TaskState } from "@/lib/tasks/state";
@@ -25,6 +27,7 @@ import type { SessionStatus } from "./SessionList.types";
 
 // One empty list for queries still loading, so memos below hold.
 const NONE: never[] = [];
+const NONE_GROUPS: SessionGroup[] = [];
 
 // Everything the flat list needs: the current workspace's sessions, sorted
 // onto shelves by the remembered filters.
@@ -55,6 +58,7 @@ export function useSidebarData(
     () => sessionsQuery.data?.sessions ?? [],
     [sessionsQuery.data]
   );
+  const allGroups = sessionsQuery.data?.sessionGroups ?? NONE_GROUPS;
   // Keyed by its contents: the hosts query hands back a new object each time.
   const linkedKey = JSON.stringify(useLinkedHostNames());
   const linked = useMemo(
@@ -102,6 +106,10 @@ export function useSidebarData(
       ),
       projectId: project?.id ?? null,
       currentOrchestrators,
+      groups: orderGroups(
+        allGroups.filter((g) => !workspace || g.workspace_id === workspace.id),
+        workspaces.map((w) => w.id)
+      ),
     };
     // The rollups count the whole list; the filter only narrows what shows.
     const all = buildShelves(input);
@@ -120,6 +128,7 @@ export function useSidebarData(
     now,
     linked,
     sessions,
+    allGroups,
     projects,
     workspaces,
     tasks,
@@ -235,6 +244,7 @@ export function useSidebarData(
   return {
     ui,
     shelves,
+    groups: allGroups,
     queued,
     toStart,
     machines,