@saadnvd1/agent-os 0.3.549 → 0.3.550

package/components/SessionList/QuickChangeRow.tsx

@@ -4,6 +4,8 @@ import { GitPullRequest } from "lucide-react";
 import type { SidebarRow } from "@/lib/sidebar/shelves";
 import { TASK_STATE } from "@/components/Tasks/task-state-labels";
 import { cn } from "@/lib/utils";
+import { RowShell } from "./RowShell";
+import { SessionRowMenu } from "./SessionRowMenu";
 
 // One of an orchestrator's quick changes, under it: its name, its PR and
 // where CI stands. It has no agent to open, so the row opens its PR.
@@ -14,45 +16,50 @@ export function QuickChangeRow({ row }: { row: SidebarRow }) {
   const label = !session.pr_number
     ? "Editing, no PR yet"
     : `PR #${session.pr_number}${state ? ` · ${state.label}` : ""}`;
+  const leading = (
+    <GitPullRequest
+      aria-hidden
+      className={cn(
+        "h-3.5 w-3.5 shrink-0",
+        state?.tone ?? "text-muted-foreground"
+      )}
+    />
+  );
   const body = (
     <>
-      <GitPullRequest
-        aria-hidden
+      <span className="text-foreground truncate text-[13px]">
+        {session.name}
+      </span>
+      <span
         className={cn(
-          "h-3.5 w-3.5 shrink-0",
-          state?.tone ?? "text-muted-foreground"
+          "mt-0.5 truncate text-xs",
+          session.pr_number && state ? state.tone : "text-muted-foreground"
         )}
-      />
-      <span className="flex min-w-0 flex-1 flex-col leading-tight">
-        <span className="text-foreground truncate text-[13px]">
-          {session.name}
-        </span>
-        <span
-          className={cn(
-            "mt-0.5 truncate text-xs",
-            session.pr_number && state ? state.tone : "text-muted-foreground"
-          )}
-        >
-          {label}
-        </span>
+      >
+        {label}
       </span>
     </>
   );
-  const frame =
-    "ml-5 flex min-h-11 items-center gap-2 rounded-md px-2.5 py-1 md:min-h-9";
-  return pr ? (
-    <a
-      href={pr}
-      target="_blank"
-      rel="noreferrer"
-      title={`Quick change: ${session.name}\n${label}`}
-      className={cn(frame, "hover:bg-muted/60 transition-colors")}
-    >
-      {body}
-    </a>
-  ) : (
-    <div title={`Quick change: ${session.name}\n${label}`} className={frame}>
-      {body}
+  const openPr = pr ? () => window.open(pr, "_blank") : undefined;
+  return (
+    <div className="ml-5">
+      <RowShell
+        title={`Quick change: ${session.name}\n${label}`}
+        onActivate={openPr}
+        onClick={openPr}
+        leading={leading}
+        menu={(kind) => (
+          <SessionRowMenu
+            session={session}
+            row={row}
+            kind={kind}
+            onRename={() => {}}
+          />
+        )}
+        menuLabel="Quick change actions"
+      >
+        {body}
+      </RowShell>
     </div>
   );
 }

package/components/SessionList/SessionRowMenu.test.ts

@@ -0,0 +1,152 @@
+import "@/components/Chat/composer/test-dom";
+import { act, createElement } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import type { Session } from "@/lib/db/types";
+import type { SidebarRow } from "@/lib/sidebar/shelves";
+import { RowProvider, type RowContextValue } from "./RowContext";
+import { SessionRowMenu } from "./SessionRowMenu";
+
+// Radix's focus handling needs a real browser; plain elements show what the
+// menu offers.
+vi.mock("@/components/ui/dropdown-menu", async (importOriginal) => {
+  const { createElement: h } = await import("react");
+  const part = (props: { children?: unknown; onClick?: () => void }) =>
+    h("div", { onClick: props.onClick }, props.children as never);
+  return {
+    ...(await importOriginal<object>()),
+    DropdownMenuItem: part,
+    DropdownMenuSeparator: part,
+    DropdownMenuSub: part,
+    DropdownMenuSubTrigger: part,
+    DropdownMenuSubContent: part,
+  };
+});
+
+(
+  globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }
+).IS_REACT_ACT_ENVIRONMENT = true;
+
+let root: Root;
+let host: HTMLElement;
+beforeEach(() => {
+  host = document.createElement("div");
+  document.body.append(host);
+  root = createRoot(host);
+});
+afterEach(() => {
+  act(() => root.unmount());
+  host.remove();
+});
+
+const ctx: RowContextValue = {
+  summarizingSessionId: null,
+  projects: [],
+  projectNames: new Map(),
+  workspaceNames: new Map(),
+  orchestrators: [],
+  runningByWorkspace: new Map(),
+  queuedByWorkspace: new Map(),
+  rollups: new Map(),
+  orchestratorNames: new Map(),
+  orderedIds: () => [],
+  cardUrl: () => null,
+  onSelect: vi.fn(),
+  onRename: vi.fn(),
+  onFork: vi.fn(),
+  onSummarize: vi.fn(),
+  onDelete: vi.fn(),
+  onMoveToProject: vi.fn(),
+  onPin: vi.fn(),
+  onFresh: vi.fn(),
+};
+
+async function menuText(session: Partial<Session>) {
+  const full = { id: "s1", name: "Fix typo", ...session } as Session;
+  const row: SidebarRow = {
+    session: full,
+    status: undefined,
+    need: null,
+    unread: false,
+    working: false,
+    activeAt: 0,
+    workers: [],
+  };
+  await act(async () =>
+    root.render(
+      createElement(
+        QueryClientProvider,
+        { client: new QueryClient() },
+        createElement(
+          RowProvider,
+          { value: ctx },
+          createElement(SessionRowMenu, {
+            session: full,
+            row,
+            kind: "dropdown",
+            onRename: () => {},
+          })
+        )
+      )
+    )
+  );
+  return document.body.textContent ?? "";
+}
+
+describe("SessionRowMenu", () => {
+  it("gives a quick change Done, Archive and Delete", async () => {
+    const text = await menuText({
+      quick_of: "o1",
+      task_status: "running",
+      role: null,
+    });
+    expect(text).toContain("Done");
+    expect(text).toContain("Archive");
+    expect(text).toContain("Delete session");
+  });
+
+  it("gives an orchestrator neither Done nor Archive", async () => {
+    const text = await menuText({ role: "orchestrator" });
+    expect(text).not.toContain("Done");
+    expect(text).not.toContain("Archive");
+  });
+});
+
+describe("QuickChangeRow", () => {
+  it("has a row menu to finish it from", async () => {
+    const { QuickChangeRow } = await import("./QuickChangeRow");
+    const session = {
+      id: "q1",
+      name: "Fix typo",
+      quick_of: "o1",
+      task_status: "running",
+    } as Session;
+    await act(async () =>
+      root.render(
+        createElement(
+          QueryClientProvider,
+          { client: new QueryClient() },
+          createElement(
+            RowProvider,
+            { value: ctx },
+            createElement(QuickChangeRow, {
+              row: {
+                session,
+                status: undefined,
+                need: null,
+                unread: false,
+                working: false,
+                activeAt: 0,
+                workers: [],
+              },
+            })
+          )
+        )
+      )
+    );
+    expect(
+      host.querySelector('[aria-label="Quick change actions"]')
+    ).not.toBeNull();
+  });
+});

package/components/SessionList/SessionRowMenu.tsx

@@ -148,6 +148,28 @@ 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>
+      </>
+    );
+
   return (
     <>
       {session.branch_name && (

package/package.json

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