@saadnvd1/agent-os 0.3.700 → 0.3.715

package/components/SessionList/MoveToGroupMenu.tsx

@@ -0,0 +1,105 @@
+"use client";
+
+import { useState } from "react";
+import { Check, Folder, Plus, X } from "lucide-react";
+import { useSessionsQuery } from "@/data/sessions";
+import { useAssignGroup, useCreateGroup } from "@/data/session-groups";
+import { Input } from "@/components/ui/input";
+import { Expander, MenuItem, icon, type MenuKind } from "./RowMenuParts";
+
+// "Move to group": the groups of the session's workspace with the current
+// one ticked, a way out, and an inline field that makes a new group and
+// files the session into it.
+export function MoveToGroupMenu({
+  kind,
+  sessionId,
+  groupId,
+  workspaceId,
+}: {
+  kind: MenuKind;
+  sessionId: string;
+  groupId: string | null | undefined;
+  workspaceId: string | null;
+}) {
+  const { data } = useSessionsQuery();
+  const assign = useAssignGroup();
+  const create = useCreateGroup();
+  const [naming, setNaming] = useState(false);
+  const [name, setName] = useState("");
+  const groups = (data?.sessionGroups ?? [])
+    .filter((g) => g.workspace_id === workspaceId)
+    .sort((a, b) => a.sort_order - b.sort_order);
+
+  const make = async () => {
+    const next = name.trim();
+    if (!next) return;
+    const { sessionGroup } = await create.mutateAsync({
+      name: next,
+      workspaceId,
+    });
+    assign.mutate({ ids: [sessionId], groupId: sessionGroup.id });
+    setNaming(false);
+    setName("");
+  };
+
+  return (
+    <Expander kind={kind} icon={Folder} label="Move to group">
+      {groups.map((g) => (
+        <MenuItem
+          key={g.id}
+          kind={kind}
+          onClick={() =>
+            assign.mutate({
+              ids: [sessionId],
+              groupId: g.id === groupId ? null : g.id,
+            })
+          }
+        >
+          <Check className={`${icon} ${g.id === groupId ? "" : "invisible"}`} />
+          <span className="truncate">{g.name}</span>
+        </MenuItem>
+      ))}
+      {groupId && (
+        <MenuItem
+          kind={kind}
+          onClick={() => assign.mutate({ ids: [sessionId], groupId: null })}
+        >
+          <X className={icon} />
+          Remove from group
+        </MenuItem>
+      )}
+      {naming ? (
+        <div className="px-1.5 py-1">
+          <Input
+            autoFocus
+            value={name}
+            maxLength={60}
+            placeholder="Group name"
+            aria-label="New group name"
+            className="h-11 md:h-8"
+            onChange={(e) => setName(e.target.value)}
+            onKeyDown={(e) => {
+              // Keys here are typing, not the menu's typeahead.
+              e.stopPropagation();
+              if (e.key === "Enter") void make();
+            }}
+          />
+          <p className="text-muted-foreground/70 px-1 pt-1 text-[11px]">
+            ↵ create
+          </p>
+        </div>
+      ) : (
+        <MenuItem
+          kind={kind}
+          onSelect={(e) => {
+            e.preventDefault();
+            setNaming(true);
+          }}
+        >
+          <Plus className={icon} />
+          New group…
+        </MenuItem>
+      )}
+    </Expander>
+  );
+}

package/components/SessionList/RowSubtitle.tsx

@@ -9,6 +9,7 @@ import { headerParts } from "@/lib/orchestrator/header-line";
 import { cn } from "@/lib/utils";
 import { usageLabel, useSessionUsage } from "@/data/load";
 import { useRowContext } from "./RowContext";
+import { OverlapPill } from "@/components/Claims/OverlapPill";
 import { pauseSubtitle } from "@/lib/sidebar/paused";
 
 const ATTENTION = (part: string) => part === "paused" || /\basks?$/.test(part);
@@ -22,11 +23,14 @@ export function RowSubtitle({
   detail,
   live,
   hideHost = false,
+  groupName,
 }: {
   session: Session;
   detail?: string | null;
   live?: LiveInput;
   hideHost?: boolean;
+  // Set on a finished session that keeps its group: Done shows where it goes back to.
+  groupName?: string;
 }) {
   const ctx = useRowContext();
   // What its processes use, on a busy session: "3.1 cores · 4.2 GB".
@@ -63,6 +67,7 @@ export function RowSubtitle({
   return (
     <span className="flex min-w-0 items-center gap-1.5">
       <LiveLine {...live} />
+      {session.overlap && <OverlapPill overlap={session.overlap} />}
       {pause && (
         <span className="flex min-w-0 items-center gap-1 text-xs text-amber-600 dark:text-amber-400">
           <Pause aria-hidden className="h-3 w-3 shrink-0" />
@@ -102,13 +107,14 @@ export function RowSubtitle({
           </span>
         </span>
       )}
-      {(project || detail || usage || session.placed_note) && (
+      {(project || detail || usage || session.placed_note || groupName) && (
         <span className="text-muted-foreground/70 min-w-0 truncate text-xs">
           {[
             usage && usageLabel(usage),
             detail?.slice(0, 200),
             session.placed_note,
             project,
+            groupName,
           ]
             .filter(Boolean)
             .join(" · ")}

package/components/SessionList/SelectionToolbar.tsx

@@ -3,7 +3,17 @@
 import { useEffect, useCallback, useState } from "react";
 import { useSnapshot } from "valtio";
 import { Button } from "@/components/ui/button";
-import { Trash2, X } from "lucide-react";
+import { Check, Folder, Trash2, X } from "lucide-react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { useSessionsQuery } from "@/data/sessions";
+import { useAssignGroup } from "@/data/session-groups";
+import { useSelectedWorkspace } from "@/hooks/useSelectedWorkspace";
 import { selectionStore, selectionActions } from "@/stores/sessionSelection";
 import {
   Dialog,
@@ -32,6 +42,19 @@ export function SelectionToolbar({
   const selectedCount = selectedIds.size;
   const [showDeleteDialog, setShowDeleteDialog] = useState(false);
   const [isDeleting, setIsDeleting] = useState(false);
+  const { workspace } = useSelectedWorkspace();
+  const { data } = useSessionsQuery();
+  const assign = useAssignGroup();
+  const groups = (data?.sessionGroups ?? []).filter(
+    (g) => !workspace || g.workspace_id === workspace.id
+  );
+  const moveTo = (groupId: string | null) => {
+    const ids = selectionActions.getSelectedIds();
+    assign.mutate(
+      { ids, groupId },
+      { onSuccess: () => selectionActions.clear() }
+    );
+  };
 
   const handleSelectAll = useCallback(() => {
     selectionActions.selectAll(allSessionIds);
@@ -101,6 +124,34 @@ export function SelectionToolbar({
               Select all
             </Button>
           )}
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="ghost" size="sm" className="h-7 gap-1 text-xs">
+                <Folder className="h-3 w-3" />
+                Move to group
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end" className="w-52">
+              {groups.map((g) => (
+                <DropdownMenuItem
+                  key={g.id}
+                  className="min-h-11 md:min-h-8"
+                  onSelect={() => moveTo(g.id)}
+                >
+                  <Check className="invisible mr-2 h-3.5 w-3.5" />
+                  <span className="truncate">{g.name}</span>
+                </DropdownMenuItem>
+              ))}
+              {groups.length > 0 && <DropdownMenuSeparator />}
+              <DropdownMenuItem
+                className="min-h-11 md:min-h-8"
+                onSelect={() => moveTo(null)}
+              >
+                <X className="mr-2 h-3.5 w-3.5" />
+                Remove from group
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
           <Tooltip>
             <TooltipTrigger asChild>
               <Button

package/components/SessionList/SessionRow.tsx

@@ -139,6 +139,7 @@ export const SessionRow = memo(function SessionRow({
         <RowSubtitle
           session={session}
           hideHost={inMachineShelf}
+          groupName={row.groupName}
           detail={row.status?.detail}
           live={
             row.need

package/components/SessionList/SessionRowMenu.tsx

@@ -61,6 +61,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 +106,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,
@@ -222,6 +229,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