@saadnvd1/agent-os 0.3.608 → 0.3.609

package/components/Chat/composer/useCoarsePointer.ts

@@ -1,20 +1,8 @@
 "use client";
 
-import { useSyncExternalStore } from "react";
-
-const QUERY = "(pointer: coarse)";
-
-function subscribe(listener: () => void) {
-  const mq = window.matchMedia(QUERY);
-  mq.addEventListener("change", listener);
-  return () => mq.removeEventListener("change", listener);
-}
+import { useMediaQuery } from "@/hooks/useMediaQuery";
 
 // A touch screen with no keyboard to speak of: taps, not shortcuts.
 export function useCoarsePointer(): boolean {
-  return useSyncExternalStore(
-    subscribe,
-    () => window.matchMedia(QUERY).matches,
-    () => false
-  );
+  return useMediaQuery("(pointer: coarse)");
 }

package/components/SessionList/OrchestratorPinRow.tsx

@@ -14,7 +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 { ActiveTick, ROW_MENU_CONTENT } from "./RowShell";
 import { RowRename, UnreadDot } from "./RowParts";
 import { QuickChangeRow } from "./QuickChangeRow";
 import { NestRail } from "./RowParts";
@@ -158,7 +158,7 @@ export const OrchestratorPinRow = memo(function OrchestratorPinRow({
         </DM.DropdownMenuTrigger>
         <DM.DropdownMenuContent
           align="end"
-          className="w-56"
+          className={ROW_MENU_CONTENT}
           onClick={(e) => e.stopPropagation()}
         >
           {menu("dropdown")}
@@ -171,7 +171,7 @@ export const OrchestratorPinRow = memo(function OrchestratorPinRow({
     <>
       <CM.ContextMenu>
         <CM.ContextMenuTrigger asChild>{content}</CM.ContextMenuTrigger>
-        <CM.ContextMenuContent className="w-56">
+        <CM.ContextMenuContent className={ROW_MENU_CONTENT}>
           {menu("context")}
         </CM.ContextMenuContent>
       </CM.ContextMenu>

package/components/SessionList/RowMenuParts.tsx

@@ -0,0 +1,90 @@
+"use client";
+
+import { useState, type ComponentProps, type ElementType } from "react";
+import { ChevronDown } from "lucide-react";
+import * as DM from "@/components/ui/dropdown-menu";
+import * as CM from "@/components/ui/context-menu";
+import { useCompactMenu } from "@/hooks/useCompactMenu";
+import { cn } from "@/lib/utils";
+
+export const PARTS = {
+  dropdown: {
+    Item: DM.DropdownMenuItem,
+    Separator: DM.DropdownMenuSeparator,
+    Sub: DM.DropdownMenuSub,
+    SubTrigger: DM.DropdownMenuSubTrigger,
+    SubContent: DM.DropdownMenuSubContent,
+  },
+  context: {
+    Item: CM.ContextMenuItem,
+    Separator: CM.ContextMenuSeparator,
+    Sub: CM.ContextMenuSub,
+    SubTrigger: CM.ContextMenuSubTrigger,
+    SubContent: CM.ContextMenuSubContent,
+  },
+};
+
+export type MenuKind = keyof typeof PARTS;
+
+export const icon = "mr-2 h-3.5 w-3.5";
+
+// An item that is a 44px target on a phone.
+export function MenuItem({
+  kind,
+  className,
+  ...props
+}: { kind: MenuKind } & ComponentProps<typeof DM.DropdownMenuItem>) {
+  const compact = useCompactMenu();
+  const Item = PARTS[kind].Item as typeof DM.DropdownMenuItem;
+  return <Item className={cn(compact && "min-h-11", className)} {...props} />;
+}
+
+// A submenu on a desktop; on a phone or touch screen, a row that opens its
+// items in place (a flyout can't be held open by a finger, and the list
+// beneath it keeps scrolling as one).
+export function Expander({
+  kind,
+  icon: Icon,
+  label,
+  children,
+}: {
+  kind: MenuKind;
+  icon: ElementType;
+  label: string;
+  children: React.ReactNode;
+}) {
+  const compact = useCompactMenu();
+  const [open, setOpen] = useState(false);
+  const { Sub, SubTrigger, SubContent } = PARTS[kind];
+  if (!compact)
+    return (
+      <Sub>
+        <SubTrigger>
+          <Icon className={icon} />
+          {label}
+        </SubTrigger>
+        <SubContent>{children}</SubContent>
+      </Sub>
+    );
+  return (
+    <>
+      <MenuItem
+        kind={kind}
+        aria-expanded={open}
+        onSelect={(e) => {
+          e.preventDefault();
+          setOpen((o) => !o);
+        }}
+      >
+        <Icon className={icon} />
+        {label}
+        <ChevronDown
+          className={cn("ml-auto transition-transform", open && "rotate-180")}
+        />
+      </MenuItem>
+      {open && (
+        <div className="border-border ml-4 border-l pl-1">{children}</div>
+      )}
+    </>
+  );
+}

package/components/SessionList/RowShell.tsx

@@ -18,6 +18,10 @@ export function ActiveTick() {
   );
 }
 
+// A phone gets the full width, a desktop a fixed column; either scrolls when
+// the window is short (the menu primitives cap their height).
+export const ROW_MENU_CONTENT = "w-56 max-md:w-[calc(100vw-1rem)]";
+
 export type RowMenuKind = "dropdown" | "context";
 
 // Every sidebar row's frame: a leading mark, title over subtitle, what's on
@@ -109,7 +113,7 @@ export function RowShell({
           </DM.DropdownMenuTrigger>
           <DM.DropdownMenuContent
             align="end"
-            className="w-56"
+            className={ROW_MENU_CONTENT}
             onClick={(e) => e.stopPropagation()}
           >
             {menu("dropdown")}
@@ -122,7 +126,7 @@ export function RowShell({
   return (
     <CM.ContextMenu>
       <CM.ContextMenuTrigger asChild>{content}</CM.ContextMenuTrigger>
-      <CM.ContextMenuContent className="w-56">
+      <CM.ContextMenuContent className={ROW_MENU_CONTENT}>
         {menu("context")}
       </CM.ContextMenuContent>
     </CM.ContextMenu>

package/components/SessionList/SessionRowMenu.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { Fragment } from "react";
 import {
   CheckSquare,
   AlarmClock,
@@ -26,8 +27,6 @@ import {
   Sparkles,
   Trash2,
 } from "lucide-react";
-import * as DM from "@/components/ui/dropdown-menu";
-import * as CM from "@/components/ui/context-menu";
 import type { Session } from "@/lib/db";
 import { selectionActions } from "@/stores/sessionSelection";
 import { schedulesUiActions } from "@/stores/schedulesUi";
@@ -53,90 +52,27 @@ import { MoveMenuItems } from "@/components/Tasks/MoveMenuItems";
 import { shareUiActions } from "@/stores/shareUi";
 import { copySessionLink } from "@/hooks/useCopyToClipboard";
 import { useLinkedHostNames } from "@/data/hosts";
-import { remoteBlocks } from "@/lib/hosts/remote-menu";
+import { remoteBlocks, remoteNote } from "@/lib/hosts/remote-menu";
+import { movableSession } from "@/lib/tasks/move-targets";
+import { useMoveTargets } from "@/data/tasks/move";
+import {
+  rowMenu,
+  groupLabel,
+  type RowMenuGroup,
+  type RowMenuItem,
+} from "@/lib/sidebar/row-menu";
+import { Expander, MenuItem, PARTS, icon, type MenuKind } from "./RowMenuParts";
 
-const PARTS = {
-  dropdown: {
-    Item: DM.DropdownMenuItem,
-    Separator: DM.DropdownMenuSeparator,
-    Sub: DM.DropdownMenuSub,
-    SubTrigger: DM.DropdownMenuSubTrigger,
-    SubContent: DM.DropdownMenuSubContent,
-  },
-  context: {
-    Item: CM.ContextMenuItem,
-    Separator: CM.ContextMenuSeparator,
-    Sub: CM.ContextMenuSub,
-    SubTrigger: CM.ContextMenuSubTrigger,
-    SubContent: CM.ContextMenuSubContent,
-  },
+const GROUP_ICON: Record<RowMenuGroup, typeof Copy> = {
+  open: ExternalLink,
+  share: Share2,
+  restart: Copy,
+  move: FolderInput,
+  automate: Clock,
 };
 
-const icon = "mr-2 h-3.5 w-3.5";
-
-interface BlockedProps {
-  kind: keyof typeof PARTS;
-  icon: typeof Copy;
-  label: string;
-  why: string;
-}
-
-// An action that can't run here yet: shown, disabled, with why.
-function BlockedItem({ kind, icon: Icon, label, why }: BlockedProps) {
-  const Item = PARTS[kind].Item;
-  return (
-    // Disabled, but the reason keeps full contrast: only the label dims.
-    <Item disabled className="items-start data-[disabled]:opacity-100">
-      <Icon className={`${icon} mt-0.5 opacity-50`} />
-      <span className="flex min-w-0 flex-col">
-        <span className="text-muted-foreground">{label}</span>
-        <span className="text-muted-foreground text-xs leading-tight">
-          {why}
-        </span>
-      </span>
-    </Item>
-  );
-}
-
-// Done and Archive, as the session's kind allows.
-function FinishItems({
-  session,
-  plain,
-  Item,
-}: {
-  session: Session;
-  plain: boolean;
-  Item: (typeof PARTS)[keyof typeof PARTS]["Item"];
-}) {
-  const markDone = useDoneAction();
-  const archive = useArchiveAction();
-  const restore = useResurrectAction();
-  const actions = finishActions(session, plain);
-  return (
-    <>
-      {actions.includes("done") && (
-        <Item onClick={() => markDone(session)}>
-          <CircleCheck className={icon} />
-          Done
-        </Item>
-      )}
-      {actions.includes("restore") && (
-        <Item onClick={() => restore(session)}>
-          <RotateCcw className={icon} />
-          Restore
-        </Item>
-      )}
-      {actions.includes("archive") && (
-        <Item onClick={() => archive(session)}>
-          <Archive className={icon} />
-          Archive
-        </Item>
-      )}
-    </>
-  );
-}
-
-// The row's ⋯ menu (and right-click menu): everything a session can do.
+// The row's ⋯ menu (and right-click menu): everything a session can do. What
+// it offers is decided in lib/sidebar/row-menu; this only draws it.
 export function SessionRowMenu({
   session,
   row,
@@ -146,16 +82,18 @@ export function SessionRowMenu({
   session: Session;
   // Where it sits, for Snooze, Mark done and Reopen (not on an orchestrator).
   row?: SidebarRow;
-  kind: keyof typeof PARTS;
+  kind: MenuKind;
   onRename: () => void;
 }) {
   const ctx = useRowContext();
   const shelf = useShelfActions();
-  const plain = !!row && !row.task && !session.task_status;
-  const { Item, Separator, Sub, SubTrigger, SubContent } = PARTS[kind];
+  const markDone = useDoneAction();
+  const archive = useArchiveAction();
+  const restore = useResurrectAction();
+  const { Separator } = PARTS[kind];
   const linked = useLinkedHostNames();
-  // A linked machine's session: what can't reach it yet shows why.
-  const blocked = remoteBlocks(session, (id) => linked[id]);
+  const remote = remoteBlocks(session, (id) => linked[id]);
+  const targets = useMoveTargets(movableSession(session));
   const summarizing = ctx.summarizingSessionId === session.id;
   const cardUrl = ctx.cardUrl(session.id);
   const others = ctx.projects.filter(
@@ -168,31 +106,203 @@ export function SessionRowMenu({
     ctx.projects.find((p) => p.id === session.project_id)?.workspace_id ??
     null;
 
-  // A quick change has no agent: no fork, fresh start, snooze or move, just
-  // its PR and the ways to finish it.
-  if (session.quick_of)
-    return (
-      <>
-        {session.pr_url && (
-          <Item onClick={() => window.open(session.pr_url!, "_blank")}>
-            <GitPullRequest className={icon} />
-            Open PR #{session.pr_number}
-          </Item>
-        )}
-        <FinishItems session={session} plain={plain} Item={Item} />
-        <Item
-          onClick={() => ctx.onDelete(session.id)}
-          className="text-red-500 focus:text-red-500"
-        >
-          <Trash2 className={icon} />
-          Delete session
-        </Item>
-      </>
+  const plan = rowMenu({
+    session,
+    row,
+    remote: !!remote,
+    canOpenInTab: !!ctx.onOpenInTab,
+    hasCard: !!cardUrl,
+    recipeRun: !!recipeRun,
+    hasWorkspace: !!workspaceId,
+    machineTargets: targets.length,
+    otherProjects: others.length,
+  });
+
+  const item = (
+    label: string,
+    Icon: typeof Copy,
+    onClick: () => void,
+    extra?: { className?: string; disabled?: boolean; spin?: boolean }
+  ) => (
+    <MenuItem
+      key={label}
+      kind={kind}
+      onClick={onClick}
+      disabled={extra?.disabled}
+      className={extra?.className}
+    >
+      <Icon className={`${icon}${extra?.spin ? "animate-spin" : ""}`} />
+      {label}
+    </MenuItem>
+  );
+  const open = (url: string) => () => window.open(url, "_blank");
+  const projects = others.map((p) => (
+    <MenuItem
+      key={p.id}
+      kind={kind}
+      onClick={() => ctx.onMoveToProject(session.id, p.id)}
+    >
+      {p.name}
+    </MenuItem>
+  ));
+  const wake = (ms: number | null) =>
+    ms && (
+      <span className="text-muted-foreground ml-3 text-xs">
+        {wakeLabel(ms)}
+      </span>
     );
 
+  const render = (it: RowMenuItem, inGroup: boolean) => {
+    switch (it) {
+      case "rename":
+        return item("Rename", Pencil, onRename);
+      case "pin":
+        return item("Pin", Pin, () => ctx.onPin(session.id, true));
+      case "unpin":
+        return item("Unpin", PinOff, () => ctx.onPin(session.id, false));
+      case "select":
+        return item("Select", CheckSquare, () =>
+          selectionActions.toggle(session.id, false, ctx.orderedIds())
+        );
+      case "open-tab":
+        return item("Open in new tab", ExternalLink, () =>
+          ctx.onOpenInTab?.(session.id)
+        );
+      case "open-pr":
+        return item(
+          `Open PR #${session.pr_number}`,
+          GitPullRequest,
+          open(session.pr_url!)
+        );
+      case "card":
+        return item("LumifyHub card", KanbanSquare, open(cardUrl!));
+      case "open-recipe":
+        return item("Open recipe", Repeat, () =>
+          recipesUiActions.openRecipe(recipeRun!.id)
+        );
+      case "copy-link":
+        return item("Copy link", Link, () => copySessionLink(session.id));
+      case "share":
+        return item("Share…", Share2, () =>
+          shareUiActions.open({
+            kind: "chat",
+            sessionId: session.id,
+            title: session.name,
+          })
+        );
+      case "fork":
+        return item("Fork session", Copy, () => ctx.onFork(session.id));
+      case "fresh-start":
+        return item(
+          summarizing ? "Summarizing..." : "Fresh start",
+          summarizing ? Loader2 : Sparkles,
+          () => ctx.onSummarize(session.id),
+          { disabled: summarizing, spin: summarizing }
+        );
+      case "new-conversation":
+        return item("New conversation (keep brief)", RotateCcw, () =>
+          ctx.onFresh(session.id)
+        );
+      case "move-machine":
+        return (
+          <MoveMenuItems key={it} session={session} Item={PARTS[kind].Item} />
+        );
+      case "move-project":
+        return inGroup ? (
+          <div key={it}>
+            {targets.length > 0 && <Separator />}
+            {projects}
+          </div>
+        ) : (
+          <Expander
+            key={it}
+            kind={kind}
+            icon={FolderInput}
+            label="Move to project"
+          >
+            {projects}
+          </Expander>
+        );
+      case "check-ins":
+        return item("Schedule check-ins", Clock, () =>
+          schedulesUiActions.openDraft(workspaceId!, {
+            kind: "message",
+            targetSessionId: session.id,
+            name: `Check-in: ${session.name}`.slice(0, 80),
+          })
+        );
+      case "save-recipe":
+        return item("Save as recipe", ChefHat, () =>
+          recipesUiActions.saveSessionAs(session.id, workspaceId)
+        );
+      case "run-again":
+        return item("Run again", Play, () =>
+          recipesUiActions.openRecipe(recipeRun!.id, true)
+        );
+      case "snooze":
+        return (
+          <Expander key={it} kind={kind} icon={AlarmClock} label="Snooze">
+            {SNOOZE_PRESETS.map((p) => (
+              <MenuItem
+                key={p.key}
+                kind={kind}
+                onClick={() => shelf.snooze(session, p.key)}
+              >
+                {p.label}
+                {wake(snoozePreset(p.key).getTime())}
+              </MenuItem>
+            ))}
+          </Expander>
+        );
+      case "unsnooze":
+        return item("Unsnooze", AlarmClock, () => shelf.unsnooze(session));
+      case "pause":
+        return (
+          <Expander key={it} kind={kind} icon={Pause} label="Pause">
+            {PAUSE_PRESETS.map((p) => (
+              <MenuItem
+                key={p.key}
+                kind={kind}
+                onClick={() => shelf.pause(session, p.key)}
+              >
+                {p.label}
+                {wake(pauseUntil(p.key)?.getTime() ?? null)}
+              </MenuItem>
+            ))}
+            <MenuItem
+              kind={kind}
+              onClick={() => shelf.pause(session, "until-resumed", true)}
+            >
+              Pause now (interrupt its step)
+            </MenuItem>
+          </Expander>
+        );
+      case "resume":
+        return item(
+          session.pause_state === "paused" ? "Resume now" : "Keep running",
+          Play,
+          () => shelf.resume(session)
+        );
+      case "settle":
+        return item("Mark done", CircleCheck, () => shelf.settle(session));
+      case "reopen":
+        return item("Reopen", RotateCcw, () => shelf.reopen(session));
+      case "done":
+        return item("Done", CircleCheck, () => markDone(session));
+      case "restore":
+        return item("Restore", RotateCcw, () => restore(session));
+      case "archive":
+        return item("Archive", Archive, () => archive(session));
+      case "delete":
+        return item("Delete session", Trash2, () => ctx.onDelete(session.id), {
+          className: "text-red-500 focus:text-red-500",
+        });
+    }
+  };
+
   return (
     <>
-      {session.branch_name && (
+      {session.branch_name && !session.quick_of && (
         <>
           <div className="text-muted-foreground flex flex-col gap-0.5 px-2 py-1.5 text-xs">
             <span className="flex items-center gap-1.5">
@@ -208,278 +318,32 @@ export function SessionRowMenu({
           <Separator />
         </>
       )}
-      <Item onClick={() => ctx.onPin(session.id, !session.pinned)}>
-        {session.pinned ? (
-          <PinOff className={icon} />
-        ) : (
-          <Pin className={icon} />
-        )}
-        {session.pinned ? "Unpin" : "Pin"}
-      </Item>
-      {ctx.onOpenInTab && (
-        <Item onClick={() => ctx.onOpenInTab?.(session.id)}>
-          <ExternalLink className={icon} />
-          Open in new tab
-        </Item>
-      )}
-      <Item onClick={() => copySessionLink(session.id)}>
-        <Link className={icon} />
-        Copy link
-      </Item>
-      {session.view === "chat" && (
-        <Item
-          onClick={() =>
-            shareUiActions.open({
-              kind: "chat",
-              sessionId: session.id,
-              title: session.name,
-            })
-          }
-        >
-          <Share2 className={icon} />
-          Share…
-        </Item>
-      )}
-      <Item onClick={onRename}>
-        <Pencil className={icon} />
-        Rename
-      </Item>
-      {session.agent_type === "claude" && !session.role && blocked && (
-        <BlockedItem
-          kind={kind}
-          icon={Copy}
-          label="Fork session"
-          why={blocked.fork}
-        />
+      {plan.remoteNote && remote && (
+        <div className="text-muted-foreground px-2 py-1.5 text-xs leading-tight">
+          {remoteNote(linked[session.host_id!] ?? "its machine")}
+        </div>
       )}
-      {!session.role && blocked && (
-        <BlockedItem
-          kind={kind}
-          icon={Sparkles}
-          label="Fresh start"
-          why={blocked.freshStart}
-        />
-      )}
-      {session.agent_type === "claude" && !session.role && !blocked && (
-        <Item onClick={() => ctx.onFork(session.id)}>
-          <Copy className={icon} />
-          Fork session
-        </Item>
-      )}
-      {!session.role && !blocked && (
-        <Item
-          onClick={() => ctx.onSummarize(session.id)}
-          disabled={summarizing}
-        >
-          {summarizing ? (
-            <Loader2 className={`${icon} animate-spin`} />
-          ) : (
-            <Sparkles className={icon} />
-          )}
-          {summarizing ? "Summarizing..." : "Fresh start"}
-        </Item>
-      )}
-      {(session.role === "orchestrator" || !!session.has_brief) &&
-        session.view === "chat" &&
-        !session.archived_at &&
-        !blocked && (
-          <Item onClick={() => ctx.onFresh(session.id)}>
-            <RotateCcw className={icon} />
-            New conversation (keep brief)
-          </Item>
-        )}
-      {session.pr_url && (
-        <Item onClick={() => window.open(session.pr_url!, "_blank")}>
-          <GitPullRequest className={icon} />
-          Open PR #{session.pr_number}
-        </Item>
-      )}
-      {cardUrl && (
-        <Item onClick={() => window.open(cardUrl, "_blank")}>
-          <KanbanSquare className={icon} />
-          LumifyHub card
-        </Item>
-      )}
-      <MoveMenuItems session={session} Item={Item} />
-      {!session.role && others.length > 0 && blocked && (
-        <BlockedItem
-          kind={kind}
-          icon={FolderInput}
-          label="Move to project"
-          why={blocked.moveToProject}
-        />
-      )}
-      {!session.role && others.length > 0 && !blocked && (
-        <Sub>
-          <SubTrigger>
-            <FolderInput className={icon} />
-            Move to project
-          </SubTrigger>
-          <SubContent>
-            {others.map((p) => (
-              <Item
-                key={p.id}
-                onClick={() => ctx.onMoveToProject(session.id, p.id)}
+      {plan.sections.map((section, i) => (
+        <Fragment key={i}>
+          {i > 0 && <Separator />}
+          {section.map((entry) =>
+            typeof entry === "string" ? (
+              render(entry, false)
+            ) : (
+              <Expander
+                key={entry.group}
+                kind={kind}
+                icon={GROUP_ICON[entry.group]}
+                label={groupLabel(entry.group)}
               >
-                {p.name}
-              </Item>
-            ))}
-          </SubContent>
-        </Sub>
-      )}
-      {workspaceId &&
-        session.role !== "orchestrator" &&
-        (!session.task_status || session.task_status === "running") &&
-        blocked && (
-          <BlockedItem
-            kind={kind}
-            icon={Clock}
-            label="Schedule check-ins"
-            why={blocked.schedule}
-          />
-        )}
-      {workspaceId &&
-        session.role !== "orchestrator" &&
-        (!session.task_status || session.task_status === "running") &&
-        !blocked && (
-          <Item
-            onClick={() =>
-              schedulesUiActions.openDraft(workspaceId, {
-                kind: "message",
-                targetSessionId: session.id,
-                name: `Check-in: ${session.name}`.slice(0, 80),
-              })
-            }
-          >
-            <Clock className={icon} />
-            Schedule check-ins
-          </Item>
-        )}
-      {recipeRun && (
-        <>
-          <Item onClick={() => recipesUiActions.openRecipe(recipeRun.id)}>
-            <Repeat className={icon} />
-            Open recipe
-          </Item>
-          <Item onClick={() => recipesUiActions.openRecipe(recipeRun.id, true)}>
-            <Play className={icon} />
-            Run again
-          </Item>
-        </>
-      )}
-      {!recipeRun && !session.role && !session.quick_of && (
-        <Item
-          onClick={() =>
-            recipesUiActions.saveSessionAs(session.id, workspaceId)
-          }
-        >
-          <ChefHat className={icon} />
-          Save as recipe
-        </Item>
-      )}
-      <Item
-        onClick={() =>
-          selectionActions.toggle(session.id, false, ctx.orderedIds())
-        }
-      >
-        <CheckSquare className={icon} />
-        Select
-      </Item>
-      {!session.role && (
-        <>
-          <Separator />
-          {row?.wakesAt ? (
-            <Item onClick={() => shelf.unsnooze(session)}>
-              <AlarmClock className={icon} />
-              Unsnooze
-            </Item>
-          ) : (
-            !session.pinned &&
-            row && (
-              <Sub>
-                <SubTrigger>
-                  <AlarmClock className={icon} />
-                  Snooze
-                </SubTrigger>
-                <SubContent>
-                  {SNOOZE_PRESETS.map((p) => (
-                    <Item
-                      key={p.key}
-                      onClick={() => shelf.snooze(session, p.key)}
-                    >
-                      {p.label}
-                      <span className="text-muted-foreground ml-3 text-xs">
-                        {wakeLabel(snoozePreset(p.key).getTime())}
-                      </span>
-                    </Item>
-                  ))}
-                </SubContent>
-              </Sub>
+                {entry.items.map((it) => (
+                  <Fragment key={it}>{render(it, true)}</Fragment>
+                ))}
+              </Expander>
             )
           )}
-          {session.task_status || session.view === "chat" ? (
-            session.pause_state === "paused" ||
-            session.pause_state === "pausing" ? (
-              <Item onClick={() => shelf.resume(session)}>
-                <Play className={icon} />
-                {session.pause_state === "paused"
-                  ? "Resume now"
-                  : "Keep running"}
-              </Item>
-            ) : session.pause_state ? null : (
-              <Sub>
-                <SubTrigger>
-                  <Pause className={icon} />
-                  Pause
-                </SubTrigger>
-                <SubContent>
-                  {PAUSE_PRESETS.map((p) => {
-                    const at = pauseUntil(p.key);
-                    return (
-                      <Item
-                        key={p.key}
-                        onClick={() => shelf.pause(session, p.key)}
-                      >
-                        {p.label}
-                        {at && (
-                          <span className="text-muted-foreground ml-3 text-xs">
-                            {wakeLabel(at.getTime())}
-                          </span>
-                        )}
-                      </Item>
-                    );
-                  })}
-                  <Item
-                    onClick={() => shelf.pause(session, "until-resumed", true)}
-                  >
-                    Pause now (interrupt its step)
-                  </Item>
-                </SubContent>
-              </Sub>
-            )
-          ) : null}
-          {plain &&
-            (row.settled ? (
-              <Item onClick={() => shelf.reopen(session)}>
-                <RotateCcw className={icon} />
-                Reopen
-              </Item>
-            ) : (
-              <Item onClick={() => shelf.settle(session)}>
-                <CircleCheck className={icon} />
-                Mark done
-              </Item>
-            ))}
-          <FinishItems session={session} plain={plain} Item={Item} />
-          <Item
-            onClick={() => ctx.onDelete(session.id)}
-            className="text-red-500 focus:text-red-500"
-          >
-            <Trash2 className={icon} />
-            Delete session
-          </Item>
-        </>
-      )}
+        </Fragment>
+      ))}
     </>
   );
 }

package/components/ui/context-menu.tsx

@@ -45,8 +45,9 @@ const ContextMenuSubContent = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <ContextMenuPrimitive.SubContent
     ref={ref}
+    collisionPadding={8}
     className={cn(
-      "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 popover-surface text-popover-foreground z-50 min-w-[8rem] overflow-hidden rounded-xl p-1.5",
+      "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 popover-surface text-popover-foreground z-50 max-h-(--radix-context-menu-content-available-height) min-w-[8rem] overflow-x-hidden overflow-y-auto overscroll-contain rounded-xl p-1.5",
       className
     )}
     {...props}
@@ -61,8 +62,9 @@ const ContextMenuContent = React.forwardRef<
   <ContextMenuPrimitive.Portal>
     <ContextMenuPrimitive.Content
       ref={ref}
+      collisionPadding={8}
       className={cn(
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 popover-surface text-popover-foreground z-50 min-w-[8rem] overflow-hidden rounded-xl p-1.5",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 popover-surface text-popover-foreground z-50 max-h-(--radix-context-menu-content-available-height) min-w-[8rem] overflow-x-hidden overflow-y-auto overscroll-contain rounded-xl p-1.5",
         className
       )}
       {...props}

package/components/ui/dropdown-menu.tsx

@@ -34,6 +34,7 @@ function DropdownMenuTrigger({
 function DropdownMenuContent({
   className,
   sideOffset = 4,
+  collisionPadding = 8,
   ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
   return (
@@ -41,8 +42,9 @@ function DropdownMenuContent({
       <DropdownMenuPrimitive.Content
         data-slot="dropdown-menu-content"
         sideOffset={sideOffset}
+        collisionPadding={collisionPadding}
         className={cn(
-          "popover-surface text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-xl p-1.5",
+          "popover-surface text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto overscroll-contain rounded-xl p-1.5",
           className
         )}
         {...props}
@@ -229,8 +231,9 @@ function DropdownMenuSubContent({
   return (
     <DropdownMenuPrimitive.SubContent
       data-slot="dropdown-menu-sub-content"
+      collisionPadding={8}
       className={cn(
-        "popover-surface text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-xl p-1.5",
+        "popover-surface text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto overscroll-contain rounded-xl p-1.5",
         className
       )}
       {...props}

package/components/ui/menu-fit.test.ts

@@ -0,0 +1,36 @@
+import { readFileSync } from "node:fs";
+import { describe, expect, it } from "vitest";
+
+// Where a menu opens (flip, shift, the 8px gap) is floating-ui's job inside
+// Radix, and Radix can't mount in the suite's fake DOM. What is ours is that
+// every menu surface hands its height to the room left on screen and scrolls
+// past it instead of clipping, so that is what this pins. The geometry itself
+// is checked in a browser.
+const surfaces = (file: string) =>
+  readFileSync(new URL(file, import.meta.url), "utf8")
+    .split("\n")
+    .filter((l) => l.includes("popover-surface"));
+
+describe.each([
+  ["./dropdown-menu.tsx", "dropdown-menu"],
+  ["./context-menu.tsx", "context-menu"],
+])("%s", (file, name) => {
+  const lines = surfaces(file);
+
+  it("has a menu and a submenu surface", () => {
+    expect(lines).toHaveLength(2);
+  });
+
+  it.each([0, 1])("caps surface %i to the space available and scrolls", (i) => {
+    expect(lines[i]).toContain(
+      `max-h-(--radix-${name}-content-available-height)`
+    );
+    expect(lines[i]).toContain("overflow-y-auto");
+    expect(lines[i]).not.toContain("overflow-hidden");
+  });
+
+  it("keeps menus off the window edge", () => {
+    const src = readFileSync(new URL(file, import.meta.url), "utf8");
+    expect(src.match(/collisionPadding/g)?.length).toBeGreaterThanOrEqual(2);
+  });
+});

package/hooks/useCompactMenu.ts

@@ -0,0 +1,9 @@
+"use client";
+
+import { useMediaQuery } from "./useMediaQuery";
+
+// A phone or a touch screen: menus use one scrolling list with sections that
+// open in place, not flyouts a finger can't hold open.
+export function useCompactMenu(): boolean {
+  return useMediaQuery("(max-width: 767px), (pointer: coarse)");
+}

package/hooks/useMediaQuery.ts

@@ -0,0 +1,20 @@
+"use client";
+
+import { useSyncExternalStore } from "react";
+
+const supported = () =>
+  typeof window !== "undefined" && typeof window.matchMedia === "function";
+
+// Whether a CSS media query matches now, and stays in step as it changes.
+export function useMediaQuery(query: string): boolean {
+  return useSyncExternalStore(
+    (listener) => {
+      if (!supported()) return () => {};
+      const mq = window.matchMedia(query);
+      mq.addEventListener("change", listener);
+      return () => mq.removeEventListener("change", listener);
+    },
+    () => supported() && window.matchMedia(query).matches,
+    () => false
+  );
+}

package/lib/hosts/remote-menu.ts

@@ -13,6 +13,10 @@ export const REMOTE_UNSUPPORTED = {
   schedule: (host: string) => `Check-ins can't message ${host} yet`,
 };
 
+// The one line that replaces the hidden items.
+export const remoteNote = (host: string) =>
+  `Runs on ${host}: fork, fresh start, project moves and check-ins happen there`;
+
 export type RemoteAction = keyof typeof REMOTE_UNSUPPORTED;
 
 /**

package/lib/sidebar/row-menu.ts

@@ -0,0 +1,168 @@
+import type { Session } from "@/lib/db/types";
+import type { SidebarRow } from "./shelves";
+import { finishActions } from "./row-actions";
+
+// What a session row's ⋯ / right-click menu offers, as data: which items,
+// in which sections, and which sit together in a submenu. The component only
+// draws it. An item that doesn't apply is absent, never shown disabled.
+export type RowMenuItem =
+  | "rename"
+  | "pin"
+  | "unpin"
+  | "select"
+  | "open-tab"
+  | "open-pr"
+  | "card"
+  | "open-recipe"
+  | "copy-link"
+  | "share"
+  | "fork"
+  | "fresh-start"
+  | "new-conversation"
+  | "move-machine"
+  | "move-project"
+  | "check-ins"
+  | "save-recipe"
+  | "run-again"
+  | "snooze"
+  | "unsnooze"
+  | "pause"
+  | "resume"
+  | "settle"
+  | "reopen"
+  | "done"
+  | "restore"
+  | "archive"
+  | "delete";
+
+export type RowMenuGroup = "open" | "share" | "restart" | "move" | "automate";
+
+export type RowMenuEntry =
+  | RowMenuItem
+  | { group: RowMenuGroup; items: RowMenuItem[] };
+
+export interface RowMenuInput {
+  session: Pick<
+    Session,
+    | "role"
+    | "quick_of"
+    | "pinned"
+    | "view"
+    | "agent_type"
+    | "task_status"
+    | "pr_url"
+    | "has_brief"
+    | "archived_at"
+    | "pause_state"
+  >;
+  row?: Pick<SidebarRow, "task" | "wakesAt" | "settled">;
+  // A linked machine runs it: what can't reach it yet is left out.
+  remote: boolean;
+  canOpenInTab: boolean;
+  hasCard: boolean;
+  recipeRun: boolean;
+  hasWorkspace: boolean;
+  machineTargets: number;
+  otherProjects: number;
+}
+
+export interface RowMenuPlan {
+  sections: RowMenuEntry[][];
+  // Say once why Fork, Fresh start, project moves and check-ins are missing.
+  remoteNote: boolean;
+}
+
+const GROUP_LABEL: Record<RowMenuGroup, string> = {
+  open: "Open",
+  share: "Share",
+  restart: "Fork or restart",
+  move: "Move",
+  automate: "Automate",
+};
+export const groupLabel = (g: RowMenuGroup) => GROUP_LABEL[g];
+
+// A group of one is just that item; an empty one is nothing.
+function group(
+  g: RowMenuGroup,
+  items: (RowMenuItem | false)[]
+): RowMenuEntry[] {
+  const kept = items.filter((i): i is RowMenuItem => !!i);
+  if (kept.length === 0) return [];
+  return kept.length === 1 ? kept : [{ group: g, items: kept }];
+}
+
+export function rowMenu(input: RowMenuInput): RowMenuPlan {
+  const { session: s, row, remote } = input;
+  const plain = !!row && !row.task && !s.task_status;
+  const finish = finishActions(s, plain);
+  const sections: RowMenuEntry[][] = [];
+
+  // A quick change has no agent: its PR and the ways to finish it.
+  if (s.quick_of) {
+    sections.push(s.pr_url ? ["open-pr"] : []);
+    sections.push(finish.filter((a) => a !== "archive"));
+    sections.push(["archive", "delete"]);
+    return {
+      sections: sections.filter((x) => x.length),
+      remoteNote: false,
+    };
+  }
+
+  const orchestrator = s.role === "orchestrator";
+  const agentRow = !s.role;
+  const live = !remote;
+
+  sections.push(["rename", s.pinned ? "unpin" : "pin", "select"]);
+
+  sections.push([
+    ...group("open", [
+      input.canOpenInTab && "open-tab",
+      !!s.pr_url && "open-pr",
+      input.hasCard && "card",
+      input.recipeRun && "open-recipe",
+    ]),
+    ...group("share", ["copy-link", s.view === "chat" && "share"]),
+    ...group("restart", [
+      s.agent_type === "claude" && agentRow && live && "fork",
+      agentRow && live && "fresh-start",
+      (orchestrator || !!s.has_brief) &&
+        s.view === "chat" &&
+        !s.archived_at &&
+        live &&
+        "new-conversation",
+    ]),
+    ...group("move", [
+      input.machineTargets > 0 && "move-machine",
+      agentRow && input.otherProjects > 0 && live && "move-project",
+    ]),
+    ...group("automate", [
+      input.hasWorkspace &&
+        !orchestrator &&
+        (!s.task_status || s.task_status === "running") &&
+        live &&
+        "check-ins",
+      input.recipeRun ? "run-again" : agentRow && "save-recipe",
+    ]),
+  ]);
+
+  if (agentRow) {
+    const state: RowMenuEntry[] = [];
+    if (row?.wakesAt) state.push("unsnooze");
+    else if (!s.pinned && row) state.push("snooze");
+    const finished = !!s.task_status && s.task_status !== "running";
+    if ((s.task_status || s.view === "chat") && !finished) {
+      if (s.pause_state === "paused" || s.pause_state === "pausing")
+        state.push("resume");
+      else if (!s.pause_state) state.push("pause");
+    }
+    if (plain) state.push(row.settled ? "reopen" : "settle");
+    state.push(...finish.filter((a) => a !== "archive"));
+    sections.push(state);
+    sections.push(["archive", "delete"]);
+  }
+
+  return {
+    sections: sections.filter((x) => x.length),
+    remoteNote: remote && agentRow,
+  };
+}

package/package.json

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