@saadnvd1/agent-os 0.3.723 → 0.3.731

package/components/Report/ReportView.tsx

@@ -0,0 +1,289 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import {
+  AlertTriangle,
+  ArrowRight,
+  CheckCircle2,
+  Hand,
+  Loader2,
+  RefreshCw,
+  type LucideIcon,
+} from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { StatusPill } from "@/components/ui/status-pill";
+import { useGenerateReport, useTaskMode, useTaskReport } from "@/data/reports";
+import {
+  MODE_COPY,
+  type EvidenceRef,
+  type HealthReport,
+  type LineTone,
+} from "@/lib/reports/types";
+import { DraftCard } from "./DraftCard";
+import { EstimateBar } from "./EstimateBar";
+import { EvidenceSheet } from "./EvidenceSheet";
+import { ModeChooser } from "./ModeChooser";
+
+const TONES: Record<LineTone, { icon: LucideIcon; cls: string; word: string }> =
+  {
+    done: {
+      icon: CheckCircle2,
+      cls: "text-green-600 dark:text-green-400",
+      word: "Done",
+    },
+    warn: {
+      icon: AlertTriangle,
+      cls: "text-amber-600 dark:text-amber-400",
+      word: "Needs attention",
+    },
+    blocked: {
+      icon: Hand,
+      cls: "text-red-600 dark:text-red-400",
+      word: "Blocked",
+    },
+    next: { icon: ArrowRight, cls: "text-primary", word: "Next" },
+  };
+
+const STATE_TONE = {
+  merged: "green",
+  done: "green",
+  working: "primary",
+  review: "primary",
+  "checks-failing": "red",
+  blocked: "red",
+} as const;
+
+const when = (iso: string) =>
+  new Date(
+    iso.includes("T") ? iso : `${iso.replace(" ", "T")}Z`
+  ).toLocaleTimeString([], {
+    hour: "numeric",
+    minute: "2-digit",
+  });
+
+// A task's plain-English health report: what's done, what needs attention,
+// what's next, each line backed by evidence that opens underneath.
+export function ReportView({
+  sessionId,
+  name,
+}: {
+  sessionId: string;
+  name?: string;
+}) {
+  const { data, isPending, isError, error } = useTaskReport(sessionId);
+  const generate = useGenerateReport(sessionId);
+  const setMode = useTaskMode(sessionId);
+  const [open, setOpen] = useState<EvidenceRef | null>(null);
+  const [changingMode, setChangingMode] = useState(false);
+  const asked = useRef(false);
+
+  const report = data?.report ?? null;
+  // Opening the view builds the first report, or a fresh one when the head moved.
+  useEffect(() => {
+    if (!data || asked.current || data.generating) return;
+    if (!report || report.stale) {
+      asked.current = true;
+      generate.mutate();
+    }
+  }, [data, report, generate]);
+
+  if (isPending)
+    return <div className="bg-muted/40 m-4 h-40 animate-pulse rounded-lg" />;
+  if (isError)
+    return <p className="text-destructive p-4 text-sm">{error.message}</p>;
+
+  const mode = data.mode;
+  const busy = data.generating || generate.isPending;
+
+  return (
+    <div className="h-full overflow-y-auto">
+      <div className="mx-auto max-w-2xl space-y-5 px-4 py-4">
+        <header className="space-y-2">
+          <div className="flex flex-wrap items-center gap-2">
+            <h2 className="text-lg font-semibold">Your Project Progress</h2>
+            {report && (
+              <StatusPill
+                tone={
+                  STATE_TONE[report.state as keyof typeof STATE_TONE] ?? "muted"
+                }
+              >
+                {report.state.replace("-", " ")}
+              </StatusPill>
+            )}
+            <button
+              type="button"
+              onClick={() => setChangingMode((c) => !c)}
+              aria-expanded={changingMode}
+              className="bg-secondary ml-auto inline-flex min-h-11 items-center rounded-lg px-3 text-xs"
+            >
+              {MODE_COPY[mode.mode].label}
+              {mode.source === "task" ? " · this task" : ""}
+            </button>
+          </div>
+          {name && (
+            <p className="text-muted-foreground truncate text-sm">{name}</p>
+          )}
+          {changingMode && (
+            <div className="bg-muted/40 space-y-2 rounded-lg p-3">
+              <ModeChooser
+                mode={mode.mode}
+                onChange={(m) => setMode.mutate(m)}
+                disabled={setMode.isPending}
+              />
+              {mode.source === "task" && (
+                <Button
+                  variant="ghost"
+                  className="min-h-11"
+                  onClick={() => setMode.mutate(null)}
+                >
+                  Use the workspace default
+                </Button>
+              )}
+            </div>
+          )}
+        </header>
+
+        {!report ? (
+          <div className="bg-card space-y-3 rounded-xl p-5 text-center shadow-sm">
+            <p className="text-sm">
+              {busy
+                ? "Reading the evidence…"
+                : "No report has been built for this task yet."}
+            </p>
+            {busy ? (
+              <Loader2 className="mx-auto h-5 w-5 animate-spin" />
+            ) : (
+              <Button className="min-h-11" onClick={() => generate.mutate()}>
+                Build the report
+              </Button>
+            )}
+          </div>
+        ) : (
+          <ReportBody
+            report={report}
+            sessionId={sessionId}
+            mode={mode.mode}
+            busy={busy}
+            onRefresh={() => generate.mutate()}
+            onOpen={setOpen}
+          />
+        )}
+      </div>
+      <EvidenceSheet
+        evidence={open}
+        stale={!!open?.sha && !!report?.head && open.sha !== report.head}
+        onClose={() => setOpen(null)}
+      />
+    </div>
+  );
+}
+
+function ReportBody({
+  report,
+  sessionId,
+  mode,
+  busy,
+  onRefresh,
+  onOpen,
+}: {
+  report: HealthReport;
+  sessionId: string;
+  mode: string;
+  busy: boolean;
+  onRefresh: () => void;
+  onOpen: (e: EvidenceRef) => void;
+}) {
+  const byId = new Map(report.evidence.map((e) => [e.id, e]));
+  const chips = (ids: string[]) =>
+    ids
+      .map((id) => byId.get(id))
+      .filter((e): e is EvidenceRef => !!e)
+      .map((e) => (
+        <button
+          key={e.id}
+          type="button"
+          onClick={() => onOpen(e)}
+          className="bg-secondary text-muted-foreground hover:text-foreground relative max-w-full truncate rounded-md px-2 py-0.5 text-[11px] before:absolute before:inset-x-0 before:-inset-y-3"
+        >
+          {e.label}
+        </button>
+      ));
+
+  return (
+    <>
+      {report.stale && (
+        <p className="rounded-lg bg-amber-500/10 px-3 py-2 text-sm text-amber-700 dark:text-amber-400">
+          New work was pushed since this report.
+        </p>
+      )}
+      <section className="bg-card space-y-4 rounded-xl p-4 shadow-sm">
+        <EstimateBar estimate={report.estimate} />
+        <p className="text-base font-medium">{report.headline}</p>
+        <ul className="space-y-3">
+          {report.lines.map((l) => {
+            const t = TONES[l.tone];
+            return (
+              <li key={l.id} className="flex gap-3">
+                <t.icon
+                  className={`mt-0.5 h-5 w-5 shrink-0 ${t.cls}`}
+                  aria-label={t.word}
+                />
+                <div className="min-w-0 flex-1 space-y-1.5">
+                  <p className="text-sm">{l.text}</p>
+                  <div className="flex flex-wrap gap-1.5">
+                    {chips(l.evidence)}
+                  </div>
+                </div>
+              </li>
+            );
+          })}
+        </ul>
+      </section>
+
+      {report.recommendation && (
+        <section className="bg-card space-y-2 rounded-xl p-4 shadow-sm">
+          <h3 className="text-sm font-semibold">Analyst recommendation</h3>
+          <p className="text-sm">{report.recommendation.text}</p>
+          <div className="flex flex-wrap gap-1.5">
+            {chips(report.recommendation.evidence)}
+          </div>
+        </section>
+      )}
+
+      {report.draft && mode !== "manual" && (
+        <DraftCard
+          key={`${report.draft.source}:${report.draft.id}`}
+          sessionId={sessionId}
+          draft={report.draft}
+        />
+      )}
+
+      <footer className="text-muted-foreground flex flex-wrap items-center gap-x-3 gap-y-1 text-xs">
+        <span>
+          Built from {report.evidence.length} item
+          {report.evidence.length === 1 ? "" : "s"} · {when(report.createdAt)}
+          {report.source === "model" && report.model
+            ? ` · ${report.model}`
+            : " · no model"}
+        </span>
+        {report.dropped > 0 && (
+          <span>
+            {report.dropped} unsupported claim{report.dropped === 1 ? "" : "s"}{" "}
+            left out
+          </span>
+        )}
+        <Button
+          variant="ghost"
+          className="ml-auto min-h-11"
+          disabled={busy}
+          onClick={onRefresh}
+        >
+          <RefreshCw
+            className={`mr-1.5 h-3.5 w-3.5 ${busy ? "animate-spin" : ""}`}
+          />
+          Refresh
+        </Button>
+      </footer>
+    </>
+  );
+}

package/components/SessionList/GroupShelves.tsx

@@ -18,6 +18,7 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { cn } from "@/lib/utils";
 import { SessionRow } from "./SessionRow";
+import { useDropZone } from "./useGroupDrag";
 
 function GroupHeader({
   shelf,
@@ -154,6 +155,51 @@ function GroupHeader({
   );
 }
 
+function GroupSection({
+  shelf,
+  siblings,
+  workspaceName,
+}: {
+  shelf: GroupShelf;
+  siblings: GroupShelf[];
+  workspaceName?: string;
+}) {
+  const { group } = shelf;
+  const update = useUpdateGroup();
+  const drop = useDropZone(
+    { groupId: group.id, workspaceId: group.workspace_id },
+    group.collapsed
+      ? () => update.mutate({ id: group.id, collapsed: false })
+      : undefined
+  );
+  const empty = !group.collapsed && shelf.rows.length === 0;
+  return (
+    <section
+      aria-label={group.name}
+      data-drop-over={drop.over || undefined}
+      className={cn(
+        "rounded-lg transition-colors",
+        drop.over && "bg-primary/10 ring-primary/50 ring-1"
+      )}
+      {...drop.props}
+    >
+      <GroupHeader
+        shelf={shelf}
+        siblings={siblings}
+        workspaceName={workspaceName}
+      />
+      {empty && (
+        <p className="text-muted-foreground/70 px-2.5 pb-2 text-xs">
+          Nothing here yet · drag a session in, or use its ⋯ menu
+        </p>
+      )}
+      {(group.collapsed ? [] : shelf.rows).map((r) => (
+        <SessionRow key={r.session.id} row={r} muted={r.settled === "auto"} />
+      ))}
+    </section>
+  );
+}
+
 // The user's groups, in order, between Pinned and the status shelves. A
 // folded group keeps its header and counts; an auto-settled member is muted.
 export function GroupShelves({
@@ -166,30 +212,19 @@ export function GroupShelves({
 }) {
   return groups.map((shelf) => {
     const { group } = shelf;
-    const siblings = groups.filter(
-      (g) => g.group.workspace_id === group.workspace_id
-    );
-    const empty = !group.collapsed && shelf.rows.length === 0;
     return (
-      <section key={group.id} aria-label={group.name}>
-        <GroupHeader
-          shelf={shelf}
-          siblings={siblings}
-          workspaceName={
-            workspaceNames && group.workspace_id
-              ? workspaceNames.get(group.workspace_id)
-              : undefined
-          }
-        />
-        {empty && (
-          <p className="text-muted-foreground/70 px-2.5 pb-2 text-xs">
-            Nothing here yet · move a session in from its ⋯ menu
-          </p>
+      <GroupSection
+        key={group.id}
+        shelf={shelf}
+        siblings={groups.filter(
+          (g) => g.group.workspace_id === group.workspace_id
         )}
-        {(group.collapsed ? [] : shelf.rows).map((r) => (
-          <SessionRow key={r.session.id} row={r} muted={r.settled === "auto"} />
-        ))}
-      </section>
+        workspaceName={
+          workspaceNames && group.workspace_id
+            ? workspaceNames.get(group.workspace_id)
+            : undefined
+        }
+      />
     );
   });
 }

package/components/SessionList/MoveToGroupMenu.test.ts

@@ -0,0 +1,77 @@
+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 { sessionKeys } from "@/data/sessions/keys";
+import type { SessionGroup } from "@/lib/sidebar/shelves";
+import { groupTargets } from "./SidebarContextMenu";
+
+// Radix menus need a real browser; plain elements show what the menu offers.
+vi.mock("./RowMenuParts", async () => {
+  const { createElement: h } = await import("react");
+  const part = (p: { children?: unknown }) =>
+    h("div", null, p.children as never);
+  return {
+    icon: "",
+    MenuItem: part,
+    Expander: 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 group = (id: string, name: string, workspace_id: string | null) =>
+  ({ id, name, workspace_id, sort_order: 0 }) as SessionGroup;
+
+async function menuText(groups: SessionGroup[], workspaceId: string | null) {
+  const { MoveToGroupMenu } = await import("./MoveToGroupMenu");
+  const client = new QueryClient();
+  client.setQueryData(sessionKeys.list(), {
+    sessions: [],
+    sessionGroups: groups,
+  });
+  await act(async () =>
+    root.render(
+      createElement(
+        QueryClientProvider,
+        { client },
+        createElement(MoveToGroupMenu, {
+          kind: "dropdown",
+          sessionId: "s1",
+          groupId: null,
+          workspaceId,
+        })
+      )
+    )
+  );
+  return host.textContent ?? "";
+}
+
+describe("Move to group", () => {
+  it("offers an empty group, and one made from the all-workspaces view", async () => {
+    // Viewing every workspace, "New group" files the group under a workspace
+    // (it used to be none, which no session can join).
+    const [target] = groupTargets(null, [{ id: "w1", name: "Work" }]);
+    const text = await menuText(
+      [group("g1", "Fresh", target.id), group("g2", "Elsewhere", "w2")],
+      "w1"
+    );
+    expect(text).toContain("Fresh");
+    expect(text).not.toContain("Elsewhere");
+  });
+});

package/components/SessionList/SessionRow.tsx

@@ -26,6 +26,7 @@ import { RowShell, type RowMenuKind } from "./RowShell";
 import { CardBadge, NestRail, RowDot, RowRename, UnreadDot } from "./RowParts";
 import { RowSubtitle } from "./RowSubtitle";
 import { OrchestratorAsks } from "./OrchestratorAsks";
+import { useRowDrag } from "./useGroupDrag";
 
 // One session: status dot, title over its project, and on the right what
 // needs you or when it last moved. Workers sit under their conductor. Drawn
@@ -64,6 +65,16 @@ export const SessionRow = memo(function SessionRow({
     ctx.onSelect(session.id);
   };
 
+  // The server files by the project's workspace first.
+  const workspaceId =
+    ctx.projects.find((p) => p.id === session.project_id)?.workspace_id ??
+    session.workspace_id ??
+    null;
+  const drag = useRowDrag(
+    { id: session.id, groupId: session.session_group_id ?? null, workspaceId },
+    !renaming
+  );
+
   const badge = rowStatusBadge(row);
   const cardCount = usePendingCardSessions().get(session.id) ?? 0;
 
@@ -77,7 +88,7 @@ export const SessionRow = memo(function SessionRow({
   );
 
   return (
-    <div data-session-row={session.id}>
+    <div data-session-row={session.id} {...drag}>
       <RowShell
         title={session.name}
         tipKey={`session:${session.id}`}

package/components/SessionList/SessionRowMenu.tsx

@@ -27,6 +27,7 @@ import {
   RotateCcw,
   Sparkles,
   Trash2,
+  Eye,
 } from "lucide-react";
 import type { Session } from "@/lib/db";
 import { selectionActions } from "@/stores/sessionSelection";
@@ -51,6 +52,7 @@ import { useRowContext } from "./RowContext";
 import { MoveMenuItems } from "@/components/Tasks/MoveMenuItems";
 import { shareUiActions } from "@/stores/shareUi";
 import { exportUiActions } from "@/stores/exportUi";
+import { analystUiActions } from "@/stores/analystUi";
 import { copySessionLink } from "@/hooks/useCopyToClipboard";
 import { useLinkedHostNames } from "@/data/hosts";
 import { remoteBlocks, remoteNote } from "@/lib/hosts/remote-menu";
@@ -202,6 +204,10 @@ export function SessionRowMenu({
         return item("Export for AI…", Download, () =>
           exportUiActions.open(session.id, session.name)
         );
+      case "add-analyst":
+        return item("Add analyst…", Eye, () =>
+          analystUiActions.open(session.id, session.name)
+        );
       case "fork":
         return item("Fork session", Copy, () => ctx.onFork(session.id));
       case "fresh-start":

package/components/SessionList/SidebarContextMenu.test.ts

@@ -34,7 +34,11 @@ vi.mock("@/components/ui/dialog", async () => {
   };
 });
 
-import { SidebarContextMenu, isEditableTarget } from "./SidebarContextMenu";
+import {
+  SidebarContextMenu,
+  groupTargets,
+  isEditableTarget,
+} from "./SidebarContextMenu";
 
 (
   globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }
@@ -102,3 +106,19 @@ describe("SidebarContextMenu", () => {
     expect(isEditableTarget(div)).toBe(false);
   });
 });
+
+describe("groupTargets", () => {
+  const ws = [
+    { id: "w1", name: "Work" },
+    { id: "w2", name: "Home" },
+  ];
+  it("uses the selected workspace", () => {
+    expect(groupTargets("w2", ws)).toEqual([{ id: "w2", label: "New group" }]);
+  });
+  it("never offers a group of no workspace when workspaces exist", () => {
+    expect(groupTargets(null, [ws[0]])).toEqual([
+      { id: "w1", label: "New group" },
+    ]);
+    expect(groupTargets(null, ws).map((t) => t.id)).toEqual(["w1", "w2"]);
+  });
+});

package/components/SessionList/SidebarContextMenu.tsx

@@ -16,15 +16,33 @@ export function isEditableTarget(target: EventTarget | null): boolean {
 // 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.
+// A group belongs to one workspace and only that workspace's sessions can
+// join it. With a workspace selected the group goes there; viewing all of
+// them, the choice is one entry per workspace (a group of no workspace could
+// hold nothing).
+export function groupTargets(
+  workspaceId: string | null,
+  workspaces: readonly { id: string; name: string }[]
+): { id: string | null; label: string }[] {
+  if (workspaceId || workspaces.length === 0)
+    return [{ id: workspaceId, label: "New group" }];
+  if (workspaces.length === 1)
+    return [{ id: workspaces[0].id, label: "New group" }];
+  return workspaces.map((w) => ({ id: w.id, label: `New group in ${w.name}` }));
+}
+
 export function SidebarContextMenu({
   workspaceId,
+  workspaces = [],
   children,
 }: {
   workspaceId: string | null;
+  workspaces?: readonly { id: string; name: string }[];
   children?: ReactNode;
 }) {
   const createGroup = useCreateGroup();
   const [naming, setNaming] = useState(false);
+  const [target, setTarget] = useState<string | null>(workspaceId);
 
   return (
     <>
@@ -37,21 +55,27 @@ export function SidebarContextMenu({
         >
           {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 className="w-52">
+          {groupTargets(workspaceId, workspaces).map((t) => (
+            <CM.ContextMenuItem
+              key={t.id ?? "none"}
+              className="min-h-11 md:min-h-8"
+              onSelect={() => {
+                setTarget(t.id);
+                setNaming(true);
+              }}
+            >
+              <FolderPlus className="mr-2 h-3.5 w-3.5" />
+              <span className="truncate">{t.label}</span>
+            </CM.ContextMenuItem>
+          ))}
         </CM.ContextMenuContent>
       </CM.ContextMenu>
       <WorkspaceNameDialog
         open={naming}
         title="New group"
         submitLabel="Create"
-        onSubmit={(name) => createGroup.mutate({ name, workspaceId })}
+        onSubmit={(name) => createGroup.mutate({ name, workspaceId: target })}
         onClose={() => setNaming(false)}
       />
     </>

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 { useDropZone } from "./useGroupDrag";
 import { SidebarContextMenu } from "./SidebarContextMenu";
 import { SidebarDialogs, type SidebarDialog } from "./SidebarDialogs";
 import type { SessionListProps } from "./SessionList.types";
@@ -43,6 +44,8 @@ export function SessionList({
   pinControls,
 }: SessionListProps) {
   const data = useSidebarData(sessionStatuses);
+  // Dropping outside every group takes a session out of its group.
+  const outside = useDropZone(null);
   useSessionTips(data);
   const { shelves, ui, project } = data;
   const mutations = useSessionListMutations({ onSelectSession: onSelect });
@@ -194,8 +197,14 @@ export function SessionList({
       )}
 
       <ScrollArea className="w-full flex-1">
-        <SidebarContextMenu workspaceId={data.workspace?.id ?? null}>
-          <div className="min-h-[60vh] max-w-full px-1.5 pb-6">
+        <SidebarContextMenu
+          workspaceId={data.workspace?.id ?? null}
+          workspaces={data.workspaces}
+        >
+          <div
+            className="min-h-[60vh] max-w-full px-1.5 pb-6"
+            {...outside.props}
+          >
             <RowProvider value={rowContext}>
               <SidebarBody
                 data={data}