@saadnvd1/agent-os 0.3.608 → 0.3.610

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>