@saadnvd1/agent-os 0.3.698 → 0.3.715

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

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,

package/components/Welcome/ConnectBlock.tsx

@@ -29,7 +29,7 @@ function Command() {
   );
 }
 
-function LinkForm() {
+export function LinkForm() {
   const [code, setCode] = useState("");
   const link = useLinkConnect();
   const submit = () => {

package/components/ui/notice.tsx

@@ -0,0 +1,46 @@
+import type { ReactNode } from "react";
+import { AlertTriangle, Info } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+const TONES = {
+  info: {
+    box: "bg-muted/60",
+    icon: <Info className="text-muted-foreground mt-0.5 h-4 w-4 shrink-0" />,
+  },
+  warning: {
+    box: "bg-amber-500/10",
+    icon: (
+      <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0 text-amber-600 dark:text-amber-400" />
+    ),
+  },
+} as const;
+
+/** A short message in a tinted box, with an optional action on the right. */
+export function Notice({
+  tone = "info",
+  action,
+  className,
+  children,
+}: {
+  tone?: keyof typeof TONES;
+  action?: ReactNode;
+  className?: string;
+  children: ReactNode;
+}) {
+  return (
+    <div
+      role="status"
+      className={cn(
+        "flex flex-col gap-2 rounded-lg p-3 text-sm sm:flex-row sm:items-center",
+        TONES[tone].box,
+        className
+      )}
+    >
+      <div className="flex min-w-0 flex-1 gap-2">
+        {TONES[tone].icon}
+        <div className="min-w-0 flex-1">{children}</div>
+      </div>
+      {action}
+    </div>
+  );
+}

package/components/ui/status-pill.tsx

@@ -0,0 +1,39 @@
+import type { ComponentProps } from "react";
+import { cn } from "@/lib/utils";
+
+const TONES = {
+  amber: "bg-amber-500/15 text-amber-700 dark:text-amber-400",
+  muted: "bg-muted text-muted-foreground",
+} as const;
+
+/** A small coloured pill for a status. A button when it has an onClick. */
+export function StatusPill({
+  tone,
+  className,
+  onClick,
+  ...props
+}: Omit<ComponentProps<"span">, "onClick"> & {
+  tone: keyof typeof TONES;
+  onClick?: () => void;
+}) {
+  const classes = cn(
+    "inline-flex max-w-full min-w-0 items-center gap-1 rounded-md px-1.5 py-0.5 text-[11px] font-semibold",
+    TONES[tone],
+    className
+  );
+  if (!onClick) return <span className={classes} {...props} />;
+  return (
+    <button
+      type="button"
+      onClick={(e) => {
+        e.stopPropagation();
+        onClick();
+      }}
+      className={cn(
+        classes,
+        "relative cursor-pointer before:absolute before:-inset-x-1 before:-inset-y-3 hover:brightness-110"
+      )}
+      {...(props as ComponentProps<"button">)}
+    />
+  );
+}

package/data/claims/index.ts

@@ -0,0 +1,2 @@
+export { claimKeys } from "./keys";
+export { useClaims, useCheckStart } from "./queries";

package/data/claims/keys.ts

@@ -0,0 +1,5 @@
+export const claimKeys = {
+  all: ["claims"] as const,
+  list: (project?: string) =>
+    [...claimKeys.all, "list", project ?? ""] as const,
+};