@saadnvd1/agent-os 0.3.611 → 0.3.612

package/components/Pane/MobileTabBar.tsx

@@ -17,69 +17,26 @@ import {
   ChevronDown,
   ChevronLeft,
   ChevronRight,
+  Ellipsis,
   Circle,
-  FolderOpen,
-  GitBranch,
   Menu,
   Plus,
   Search,
+  Star,
   Share2,
-  Terminal as TerminalIcon,
   TextSearch,
-  Users,
-  ScrollText,
-  Package,
 } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { useAwayQuery } from "@/data/away";
 import { awayUntil } from "@/components/Away/time";
 import type { Session, Project } from "@/lib/db";
-import type { LucideIcon } from "lucide-react";
 import { HostBadge } from "@/components/Hosts/HostBadge";
+import { bookmarksUiActions } from "@/stores/bookmarksUi";
 import { shareUiActions } from "@/stores/shareUi";
 import { MoveMenuItems } from "@/components/Tasks/MoveMenuItems";
 import { ChatBookmarksButton } from "@/components/Bookmarks/ChatBookmarksButton";
 import type { ViewMode } from "@/contexts/PaneContext";
-
-interface ViewModeButtonProps {
-  mode: ViewMode;
-  currentMode: ViewMode;
-  icon: LucideIcon;
-  label?: string;
-  onClick: (mode: ViewMode) => void;
-  badge?: React.ReactNode;
-}
-
-function ViewModeButton({
-  mode,
-  currentMode,
-  icon: Icon,
-  label,
-  onClick,
-  badge,
-}: ViewModeButtonProps) {
-  return (
-    <button
-      type="button"
-      aria-label={label}
-      aria-pressed={currentMode === mode}
-      onClick={(e) => {
-        e.stopPropagation();
-        onClick(mode);
-      }}
-      className={cn(
-        "rounded p-1.5 transition-colors",
-        badge && "flex items-center gap-0.5",
-        currentMode === mode
-          ? "bg-secondary text-foreground"
-          : "text-muted-foreground"
-      )}
-    >
-      <Icon className="h-4 w-4" />
-      {badge}
-    </button>
-  );
-}
+import { MobileViewPicker } from "./MobileViewPicker";
 
 interface MobileTabBarProps {
   session: Session | null | undefined;
@@ -205,7 +162,7 @@ export function MobileTabBar({
           onClick={handlePrev}
           onTouchEnd={(e) => e.stopPropagation()}
           disabled={!hasPrev || isNavigating}
-          className="hover:bg-accent flex h-8 w-8 shrink-0 items-center justify-center rounded-md disabled:pointer-events-none disabled:opacity-50"
+          className="hover:bg-accent flex h-8 w-8 shrink-0 items-center justify-center rounded-md disabled:pointer-events-none disabled:opacity-50 max-[429px]:hidden"
         >
           <ChevronLeft className="h-4 w-4" />
         </button>
@@ -304,7 +261,7 @@ export function MobileTabBar({
           onClick={handleNext}
           onTouchEnd={(e) => e.stopPropagation()}
           disabled={!hasNext || isNavigating}
-          className="hover:bg-accent flex h-8 w-8 shrink-0 items-center justify-center rounded-md disabled:pointer-events-none disabled:opacity-50"
+          className="hover:bg-accent flex h-8 w-8 shrink-0 items-center justify-center rounded-md disabled:pointer-events-none disabled:opacity-50 max-[429px]:hidden"
         >
           <ChevronRight className="h-4 w-4" />
         </button>
@@ -313,7 +270,7 @@ export function MobileTabBar({
       {bookmarksSessionId && (
         <ChatBookmarksButton
           sessionId={bookmarksSessionId}
-          className="-my-1.5 h-11 min-w-11"
+          className="-my-1.5 h-11 min-w-11 max-[429px]:hidden"
         />
       )}
       {onFind && (
@@ -325,7 +282,7 @@ export function MobileTabBar({
             e.stopPropagation();
             onFind();
           }}
-          className="-my-1.5 h-11 w-11 shrink-0"
+          className="-my-1.5 h-11 w-11 shrink-0 max-[429px]:hidden"
         >
           <TextSearch className="h-4 w-4" />
         </Button>
@@ -338,11 +295,49 @@ export function MobileTabBar({
           e.stopPropagation();
           paletteActions.open();
         }}
-        // A 44px target in a 32px bar row.
-        className="-my-1.5 h-11 w-11 shrink-0"
+        // 44px targets in a 32px bar row, via -my-1.5.
+        className="-my-1.5 h-11 w-11 shrink-0 max-[429px]:hidden"
       >
         <Search className="h-4 w-4" />
       </Button>
+      {/* Below 430px Find, Palette and Bookmarks fold into one menu. */}
+      <DropdownMenu modal={false}>
+        <DropdownMenuTrigger asChild>
+          <Button
+            variant="ghost"
+            size="icon-sm"
+            aria-label="More"
+            onClick={(e) => e.stopPropagation()}
+            className="-my-1.5 hidden h-11 w-11 shrink-0 max-[429px]:flex"
+          >
+            <Ellipsis className="h-4 w-4" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end" className="min-w-48">
+          {onFind && (
+            <DropdownMenuItem className="h-11 gap-2" onSelect={onFind}>
+              <TextSearch className="h-4 w-4" />
+              Find in conversation
+            </DropdownMenuItem>
+          )}
+          <DropdownMenuItem
+            className="h-11 gap-2"
+            onSelect={() => paletteActions.open()}
+          >
+            <Search className="h-4 w-4" />
+            Command palette
+          </DropdownMenuItem>
+          {bookmarksSessionId && (
+            <DropdownMenuItem
+              className="h-11 gap-2"
+              onSelect={() => bookmarksUiActions.openChat(bookmarksSessionId)}
+            >
+              <Star className="h-4 w-4" />
+              Bookmarks
+            </DropdownMenuItem>
+          )}
+        </DropdownMenuContent>
+      </DropdownMenu>
       <Button
         variant="ghost"
         size="icon-sm"
@@ -358,60 +353,15 @@ export function MobileTabBar({
       <SessionPrStage sessionId={session?.id} />
       <ViewSwitch session={session} />
 
-      {/* View mode toggle */}
       {session?.working_directory && (
-        <div className="bg-accent/50 flex shrink-0 items-center rounded-md p-0.5">
-          <ViewModeButton
-            mode="terminal"
-            currentMode={viewMode}
-            icon={TerminalIcon}
-            onClick={onViewModeChange}
-          />
-          {isLocalSession && (
-            <ViewModeButton
-              mode="files"
-              currentMode={viewMode}
-              icon={FolderOpen}
-              onClick={onViewModeChange}
-            />
-          )}
-          {isLocalSession && (
-            <ViewModeButton
-              mode="git"
-              currentMode={viewMode}
-              icon={GitBranch}
-              onClick={onViewModeChange}
-            />
-          )}
-          <ViewModeButton
-            mode="artifacts"
-            currentMode={viewMode}
-            icon={Package}
-            label="Artifacts"
-            onClick={onViewModeChange}
-          />
-          {hasLog && (
-            <ViewModeButton
-              mode="log"
-              currentMode={viewMode}
-              icon={ScrollText}
-              onClick={onViewModeChange}
-            />
-          )}
-          {isConductor && (
-            <ViewModeButton
-              mode="workers"
-              currentMode={viewMode}
-              icon={Users}
-              onClick={onViewModeChange}
-              badge={
-                <span className="bg-primary/20 text-primary rounded px-1 text-[10px]">
-                  {workerCount}
-                </span>
-              }
-            />
-          )}
-        </div>
+        <MobileViewPicker
+          viewMode={viewMode}
+          onViewModeChange={onViewModeChange}
+          isLocalSession={isLocalSession}
+          hasLog={hasLog}
+          isConductor={isConductor}
+          workerCount={workerCount}
+        />
       )}
     </div>
   );

package/components/Pane/MobileViewPicker.test.ts

@@ -0,0 +1,92 @@
+import "@/components/Chat/composer/test-dom";
+import { act, createElement } from "react";
+import { createRoot } from "react-dom/client";
+import { describe, expect, it, vi } from "vitest";
+import { MobileViewPicker, mobileViews } from "./MobileViewPicker";
+
+// Radix dispatches CustomEvents; the node global is not jsdom's.
+Object.defineProperty(globalThis, "CustomEvent", {
+  value: (window as unknown as { CustomEvent: unknown }).CustomEvent,
+  configurable: true,
+});
+
+const all = {
+  isLocalSession: true,
+  hasLog: true,
+  isConductor: true,
+  workerCount: 3,
+};
+
+describe("mobileViews", () => {
+  it("lists every view, Artifacts included", () => {
+    expect(mobileViews(all).map((v) => v.label)).toEqual([
+      "Chat",
+      "Files",
+      "Git",
+      "Artifacts",
+      "Log",
+      "Workers",
+    ]);
+    expect(mobileViews(all).at(-1)?.count).toBe(3);
+  });
+
+  it("hides views that do not apply", () => {
+    expect(
+      mobileViews({
+        isLocalSession: false,
+        isConductor: false,
+        workerCount: 0,
+      }).map((v) => v.label)
+    ).toEqual(["Chat", "Artifacts"]);
+  });
+});
+
+describe("MobileViewPicker", () => {
+  async function open(viewMode: "terminal" | "artifacts", onChange = vi.fn()) {
+    const el = document.createElement("div");
+    document.body.appendChild(el);
+    const root = createRoot(el);
+    await act(async () => {
+      root.render(
+        createElement(MobileViewPicker, {
+          ...all,
+          viewMode,
+          onViewModeChange: onChange,
+        })
+      );
+    });
+    const trigger = el.querySelector("button") as HTMLButtonElement;
+    await act(async () => {
+      trigger.dispatchEvent(
+        new KeyboardEvent("keydown", { key: "Enter", bubbles: true })
+      );
+    });
+    return { trigger, onChange };
+  }
+
+  it("shows the current view and lists all views in the menu", async () => {
+    const { trigger } = await open("artifacts");
+    expect(trigger.textContent).toContain("Artifacts");
+    const items = [...document.querySelectorAll('[role="menuitem"]')];
+    expect(items.map((i) => i.textContent)).toEqual([
+      "Chat",
+      "Files",
+      "Git",
+      "Artifacts",
+      "Log",
+      "Workers3",
+    ]);
+    expect(items[3].getAttribute("aria-current")).toBe("true");
+  });
+
+  it("selecting an item calls the view-change handler", async () => {
+    const { onChange } = await open("terminal");
+    const log = [...document.querySelectorAll('[role="menuitem"]')].find((i) =>
+      i.textContent?.startsWith("Log")
+    ) as HTMLElement;
+    await act(async () => {
+      log.click();
+    });
+    expect(onChange).toHaveBeenCalledWith("log");
+  });
+});

package/components/Pane/MobileViewPicker.tsx

@@ -0,0 +1,106 @@
+"use client";
+
+import {
+  Check,
+  ChevronDown,
+  FolderOpen,
+  GitBranch,
+  Package,
+  ScrollText,
+  Terminal as TerminalIcon,
+  Users,
+  type LucideIcon,
+} from "lucide-react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import type { ViewMode } from "@/contexts/PaneContext";
+
+export interface MobileView {
+  mode: ViewMode;
+  label: string;
+  icon: LucideIcon;
+  count?: number;
+}
+
+export interface MobileViewAvailability {
+  isLocalSession: boolean;
+  hasLog?: boolean;
+  isConductor: boolean;
+  workerCount: number;
+}
+
+// The one list of views on a phone; the picker renders it.
+export function mobileViews({
+  isLocalSession,
+  hasLog,
+  isConductor,
+  workerCount,
+}: MobileViewAvailability): MobileView[] {
+  const views: (MobileView | false)[] = [
+    { mode: "terminal", label: "Chat", icon: TerminalIcon },
+    isLocalSession && { mode: "files", label: "Files", icon: FolderOpen },
+    isLocalSession && { mode: "git", label: "Git", icon: GitBranch },
+    { mode: "artifacts", label: "Artifacts", icon: Package },
+    !!hasLog && { mode: "log", label: "Log", icon: ScrollText },
+    isConductor && {
+      mode: "workers",
+      label: "Workers",
+      icon: Users,
+      count: workerCount,
+    },
+  ];
+  return views.filter((v): v is MobileView => !!v);
+}
+
+export function MobileViewPicker({
+  viewMode,
+  onViewModeChange,
+  ...availability
+}: MobileViewAvailability & {
+  viewMode: ViewMode;
+  onViewModeChange: (mode: ViewMode) => void;
+}) {
+  const views = mobileViews(availability);
+  const current = views.find((v) => v.mode === viewMode) ?? views[0];
+  const CurrentIcon = current.icon;
+
+  return (
+    <DropdownMenu modal={false}>
+      <DropdownMenuTrigger asChild>
+        <button
+          type="button"
+          aria-label={`View: ${current.label}`}
+          onClick={(e) => e.stopPropagation()}
+          className="bg-accent/50 relative flex h-8 shrink-0 items-center gap-1 rounded-md px-2 text-xs after:absolute after:inset-x-0 after:-inset-y-1.5 after:content-['']"
+        >
+          <CurrentIcon className="h-4 w-4" />
+          <span className="max-[359px]:hidden">{current.label}</span>
+          <ChevronDown className="text-muted-foreground h-3 w-3" />
+        </button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="min-w-40">
+        {views.map(({ mode, label, icon: Icon, count }) => (
+          <DropdownMenuItem
+            key={mode}
+            aria-current={mode === current.mode}
+            onSelect={() => onViewModeChange(mode)}
+            className="h-11 gap-2"
+          >
+            <Icon className="h-4 w-4" />
+            <span className="flex-1">{label}</span>
+            {count !== undefined && (
+              <span className="bg-primary/20 text-primary rounded px-1 text-[10px]">
+                {count}
+              </span>
+            )}
+            {mode === current.mode && <Check className="h-4 w-4" />}
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

package/package.json

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