@saadnvd1/agent-os 0.3.715 → 0.3.728

package/components/Models/AgentRolesSection.tsx

@@ -0,0 +1,132 @@
+"use client";
+
+import { useState } from "react";
+import { useAgentRolesQuery, useSaveAgentRoles } from "@/data/models";
+import { useProjectsQuery } from "@/data/projects/queries";
+import { useWorkspacesQuery } from "@/data/workspaces";
+import type { RoleMap } from "@/lib/models/config";
+import type { RoleScope } from "@/lib/models/agent-roles-view";
+import { cn } from "@/lib/utils";
+import { AgentRoleCard } from "./AgentRoleCard";
+
+const SCOPES: { id: RoleScope; label: string }[] = [
+  { id: "settings", label: "Default" },
+  { id: "workspace", label: "Workspace" },
+  { id: "project", label: "Project" },
+];
+
+// Settings > Agent roles: the model each of Developer, Analyst, Reviewer and
+// Supervisor runs on, for everything or for one workspace or project.
+export function AgentRolesSection() {
+  const [scope, setScope] = useState<RoleScope>("settings");
+  const [target, setTarget] = useState<string | null>(null);
+  const workspaces = useWorkspacesQuery();
+  const projects = useProjectsQuery();
+  const options =
+    scope === "workspace"
+      ? (workspaces.data ?? []).map((w) => ({ id: w.id, name: w.name }))
+      : scope === "project"
+        ? (projects.data ?? [])
+            .filter((p) => !p.is_uncategorized)
+            .map((p) => ({ id: p.id, name: p.name }))
+        : [];
+  const id = scope === "settings" ? null : (target ?? options[0]?.id ?? null);
+  const { data, isPending, isError, error } = useAgentRolesQuery(scope, id);
+  const save = useSaveAgentRoles(scope, id);
+
+  const saved = (key: "value" | "fallback"): RoleMap =>
+    Object.fromEntries(
+      (data?.roles ?? [])
+        .filter((r) => r[key])
+        .map((r) => [r.modelRole, r[key] as string])
+    );
+  const setRole = (modelRole: string, ref: string | null) => {
+    const roles: RoleMap = { ...saved("value") };
+    if (ref) roles[modelRole as keyof RoleMap] = ref;
+    else delete roles[modelRole as keyof RoleMap];
+    save.mutate({ roles });
+  };
+  const setFallback = (modelRole: string, ref: string | null) => {
+    const fallbacks: RoleMap = { ...saved("fallback") };
+    if (ref) fallbacks[modelRole as keyof RoleMap] = ref;
+    else delete fallbacks[modelRole as keyof RoleMap];
+    save.mutate({ roles: saved("value"), fallbacks });
+  };
+
+  return (
+    <div className="space-y-4">
+      <div
+        role="tablist"
+        className="bg-muted inline-flex max-w-full gap-0.5 overflow-x-auto rounded-xl p-0.5"
+      >
+        {SCOPES.map((s) => (
+          <button
+            key={s.id}
+            role="tab"
+            aria-selected={scope === s.id}
+            type="button"
+            onClick={() => {
+              setScope(s.id);
+              setTarget(null);
+            }}
+            className={cn(
+              "h-11 rounded-lg px-3 text-sm whitespace-nowrap md:h-8",
+              scope === s.id
+                ? "bg-background text-foreground ring-border ring-1"
+                : "text-muted-foreground hover:text-foreground"
+            )}
+          >
+            {s.label}
+          </button>
+        ))}
+      </div>
+      {scope !== "settings" && (
+        <select
+          aria-label={scope === "workspace" ? "Workspace" : "Project"}
+          value={id ?? ""}
+          onChange={(e) => setTarget(e.target.value)}
+          className="border-input bg-background h-11 w-full rounded-md border px-3 text-sm md:h-9"
+        >
+          {options.length === 0 && <option value="">None yet</option>}
+          {options.map((o) => (
+            <option key={o.id} value={o.id}>
+              {o.name}
+            </option>
+          ))}
+        </select>
+      )}
+      <p className="text-muted-foreground text-xs">
+        The model each role runs on. A workspace or project can override these,
+        and a session can when it starts. A Pi model (a server you run) runs
+        sessions started in the role; tasks and the merge gate stay on Claude
+        Code models. Planning, gate review, scope check, helpers and watchers
+        are in Models.
+      </p>
+      {scope !== "settings" && !id ? (
+        <p className="text-muted-foreground text-sm">
+          There is no {scope} to set roles for yet.
+        </p>
+      ) : isPending ? (
+        <div className="bg-muted/40 h-64 animate-pulse rounded-lg" />
+      ) : isError ? (
+        <p className="text-destructive text-sm">{error.message}</p>
+      ) : data ? (
+        <ul className="space-y-2.5">
+          {data.roles.map((r) => (
+            <AgentRoleCard
+              key={r.id}
+              role={r}
+              scope={scope}
+              pending={save.isPending}
+              onChange={(ref) => setRole(r.modelRole, ref)}
+              onFallback={(ref) => setFallback(r.modelRole, ref)}
+            />
+          ))}
+        </ul>
+      ) : null}
+      {save.isError && (
+        <p className="text-destructive text-xs">{save.error.message}</p>
+      )}
+    </div>
+  );
+}

package/components/Models/ModelBadges.tsx

@@ -0,0 +1,48 @@
+import type { Availability } from "@/lib/models/availability";
+import type { Locality } from "@/lib/models/locality";
+import { cn } from "@/lib/utils";
+
+// Whether a model runs on this machine's own networks or in the cloud.
+export function LocalityBadge({ locality }: { locality: Locality }) {
+  return (
+    <span
+      className={cn(
+        "inline-flex h-5 shrink-0 items-center rounded-full px-2 text-[11px] font-medium",
+        locality === "local"
+          ? "bg-emerald-500/15 text-emerald-700 dark:text-emerald-400"
+          : "bg-muted text-muted-foreground ring-border ring-1 ring-inset"
+      )}
+    >
+      {locality === "local" ? "Local" : "Cloud"}
+    </span>
+  );
+}
+
+const DOT = {
+  up: "bg-emerald-500",
+  down: "bg-destructive",
+  unknown: "bg-muted-foreground/50",
+} as const;
+
+const TITLE = {
+  up: "Answering",
+  down: "Not answering",
+  unknown: "Not checked",
+} as const;
+
+// The last availability check: green answering, red not, grey not checked.
+export function AvailabilityDot({
+  availability,
+}: {
+  availability: Pick<Availability, "state"> | undefined;
+}) {
+  const state = availability?.state ?? "unknown";
+  return (
+    <span
+      role="img"
+      aria-label={TITLE[state]}
+      title={TITLE[state]}
+      className={cn("inline-block h-2 w-2 shrink-0 rounded-full", DOT[state])}
+    />
+  );
+}

package/components/Models/ModelsSection.tsx

@@ -11,6 +11,7 @@ import {
   type ModelProvider,
 } from "@/lib/models/providers";
 import { SubagentModels } from "./SubagentModels";
+import { INTERNAL_MODEL_ROLES } from "@/lib/models/agent-roles";
 import { MODEL_ROLES, ROLE_LABELS } from "@/lib/models/roles";
 import { ModelSelect } from "./ModelSelect";
 import { ProviderCard } from "./ProviderCard";
@@ -58,11 +59,12 @@ export function ModelsSection() {
     <div className="space-y-6">
       <section className="space-y-2">
         <p className="text-muted-foreground text-sm">
-          Which model each kind of work runs on. A workspace can set its own
+          Which model each kind of work runs on. Developer, Analyst, Reviewer
+          and Supervisor are in Agent roles. A workspace can set its own
           (Settings › Workspaces), and a task its own when it starts or resumes.
         </p>
         <ul className="space-y-2">
-          {MODEL_ROLES.map((role) => (
+          {INTERNAL_MODEL_ROLES(MODEL_ROLES).map((role) => (
             <li
               key={role}
               className="bg-muted/40 space-y-1.5 rounded-lg px-3 py-2.5"

package/components/Models/RoleModelSelect.tsx

@@ -0,0 +1,87 @@
+"use client";
+
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { useModelChoices } from "@/data/models";
+import type { ModelChoice } from "@/lib/models/catalog";
+import { AvailabilityDot, LocalityBadge } from "./ModelBadges";
+
+const INHERIT = "__inherit";
+
+function Row({ choice }: { choice: ModelChoice }) {
+  return (
+    <span className="flex min-w-0 flex-1 items-center gap-2">
+      <AvailabilityDot availability={choice.availability} />
+      <span className="truncate">{choice.label}</span>
+      <LocalityBadge locality={choice.locality} />
+    </span>
+  );
+}
+
+// A model picker over the server's list: grouped by provider, each model
+// labelled Local or Cloud with whether its server answers. `claudeOnly`
+// leaves out the models that run through Pi.
+export function RoleModelSelect({
+  id,
+  value,
+  inheritLabel,
+  claudeOnly,
+  gateOnly,
+  disabled,
+  onChange,
+}: {
+  id?: string;
+  value: string | null;
+  inheritLabel: string;
+  claudeOnly?: boolean;
+  // Only models that can serve a merge gate are selectable.
+  gateOnly?: boolean;
+  disabled?: boolean;
+  onChange: (ref: string | null) => void;
+}) {
+  const { data } = useModelChoices();
+  const choices = (data ?? []).filter((c) => !claudeOnly || c.agent !== "pi");
+  const groups = [...new Set(choices.map((c) => c.group))];
+  const current = value ? choices.find((c) => c.ref === value) : undefined;
+  return (
+    <Select
+      value={value ?? INHERIT}
+      onValueChange={(v) => onChange(v === INHERIT ? null : v)}
+      disabled={disabled}
+    >
+      <SelectTrigger id={id} className="h-11 md:h-9">
+        <SelectValue>
+          {current ? <Row choice={current} /> : (value ?? inheritLabel)}
+        </SelectValue>
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value={INHERIT}>{inheritLabel}</SelectItem>
+        {value && !current && <SelectItem value={value}>{value}</SelectItem>}
+        {groups.map((g) => (
+          <SelectGroup key={g}>
+            <SelectLabel>{g}</SelectLabel>
+            {choices
+              .filter((c) => c.group === g)
+              .map((c) => (
+                <SelectItem
+                  key={c.ref}
+                  value={c.ref}
+                  disabled={gateOnly && !c.gateCapable}
+                  className="min-h-11 md:min-h-0"
+                >
+                  <Row choice={c} />
+                </SelectItem>
+              ))}
+          </SelectGroup>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+}

package/components/Pane/DesktopTabBar.tsx

@@ -15,6 +15,8 @@ import type { Session } from "@/lib/db";
 import { PaneViewToggle } from "./PaneViewToggle";
 import { PaneMenu } from "./PaneMenu";
 import { HostBadge } from "@/components/Hosts/HostBadge";
+import { RolePill } from "@/components/Sessions/RolePill";
+import { PairChip } from "@/components/Analyst/PairChip";
 import { usePaneBarSlots } from "./PaneBarSlots";
 import { ChatBookmarksButton } from "@/components/Bookmarks/ChatBookmarksButton";
 import type { ViewMode } from "@/contexts/PaneContext";
@@ -36,6 +38,7 @@ interface DesktopTabBarProps {
   isFocused: boolean;
   isConductor: boolean;
   hasLog?: boolean;
+  hasReport?: boolean;
   workerCount: number;
   canSplit: boolean;
   canClose: boolean;
@@ -67,6 +70,7 @@ export function DesktopTabBar({
   isFocused,
   isConductor,
   hasLog,
+  hasReport,
   workerCount,
   canSplit,
   canClose,
@@ -161,6 +165,8 @@ export function DesktopTabBar({
       </div>
 
       <div className="flex shrink-0 items-center gap-1.5">
+        <RolePill session={session} paneId={paneId} />
+        <PairChip session={session} paneId={paneId} />
         <HostBadge hostId={session?.host_id} />
         <ContextMeter sessionId={session?.id} />
         <SessionPrStage sessionId={session?.id} />
@@ -180,6 +186,7 @@ export function DesktopTabBar({
             isLocalSession={isLocalSession}
             isConductor={isConductor}
             hasLog={hasLog}
+            hasReport={hasReport}
             workerCount={workerCount}
             showGit={showGit}
             gitDrawerOpen={gitDrawerOpen}
@@ -192,6 +199,7 @@ export function DesktopTabBar({
         <div className="flex items-center">
           <PaneMenu
             session={session}
+            paneId={paneId}
             bookmarksSessionId={bookmarksSessionId}
             canSplit={canSplit}
             canClose={canClose}

package/components/Pane/MobileTabBar.tsx

@@ -24,15 +24,21 @@ import {
   Search,
   Star,
   Share2,
+  Download,
   TextSearch,
+  Eye,
 } 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 { HostBadge } from "@/components/Hosts/HostBadge";
+import { RolePill } from "@/components/Sessions/RolePill";
 import { bookmarksUiActions } from "@/stores/bookmarksUi";
 import { shareUiActions } from "@/stores/shareUi";
+import { exportUiActions } from "@/stores/exportUi";
+import { analystUiActions } from "@/stores/analystUi";
+import { useCanAddAnalyst } from "@/components/Analyst/pair";
 import { MoveMenuItems } from "@/components/Tasks/MoveMenuItems";
 import { ChatBookmarksButton } from "@/components/Bookmarks/ChatBookmarksButton";
 import type { ViewMode } from "@/contexts/PaneContext";
@@ -47,6 +53,7 @@ interface MobileTabBarProps {
   viewMode: ViewMode;
   isConductor: boolean;
   hasLog?: boolean;
+  hasReport?: boolean;
   workerCount: number;
   // Local, and the folder is not known to be outside a git repository.
   showGit: boolean;
@@ -67,6 +74,7 @@ export function MobileTabBar({
   viewMode,
   isConductor,
   hasLog,
+  hasReport,
   workerCount,
   showGit,
   onMenuClick,
@@ -125,6 +133,7 @@ export function MobileTabBar({
   };
 
   const isLocalSession = !session?.host_id || session.host_id === "local";
+  const canAddAnalyst = useCanAddAnalyst(session);
 
   return (
     <div
@@ -219,6 +228,24 @@ export function MobileTabBar({
                   <Share2 className="h-4 w-4" />
                   Share…
                 </DropdownMenuItem>
+                <DropdownMenuItem
+                  onSelect={() =>
+                    exportUiActions.open(session.id, session.name)
+                  }
+                >
+                  <Download className="h-4 w-4" />
+                  Export for AI…
+                </DropdownMenuItem>
+                {canAddAnalyst && (
+                  <DropdownMenuItem
+                    onSelect={() =>
+                      analystUiActions.open(session.id, session.name)
+                    }
+                  >
+                    <Eye className="h-4 w-4" />
+                    Add analyst…
+                  </DropdownMenuItem>
+                )}
                 <DropdownMenuSeparator />
               </>
             )}
@@ -270,6 +297,7 @@ export function MobileTabBar({
         </button>
       </div>
 
+      <RolePill session={session} compact />
       {bookmarksSessionId && (
         <ChatBookmarksButton
           sessionId={bookmarksSessionId}
@@ -363,6 +391,7 @@ export function MobileTabBar({
           isLocalSession={isLocalSession}
           showGit={showGit}
           hasLog={hasLog}
+          hasReport={hasReport}
           isConductor={isConductor}
           workerCount={workerCount}
         />

package/components/Pane/MobileViewPicker.tsx

@@ -7,6 +7,7 @@ import {
   GitBranch,
   Package,
   ScrollText,
+  ClipboardList,
   Terminal as TerminalIcon,
   Users,
   type LucideIcon,
@@ -31,6 +32,7 @@ export interface MobileViewAvailability {
   // Local, and the folder is not known to be outside a git repository.
   showGit: boolean;
   hasLog?: boolean;
+  hasReport?: boolean;
   isConductor: boolean;
   workerCount: number;
 }
@@ -40,6 +42,7 @@ export function mobileViews({
   isLocalSession,
   showGit,
   hasLog,
+  hasReport,
   isConductor,
   workerCount,
 }: MobileViewAvailability): MobileView[] {
@@ -48,6 +51,7 @@ export function mobileViews({
     isLocalSession && { mode: "files", label: "Files", icon: FolderOpen },
     showGit && { mode: "git", label: "Git", icon: GitBranch },
     { mode: "artifacts", label: "Artifacts", icon: Package },
+    !!hasReport && { mode: "report", label: "Report", icon: ClipboardList },
     !!hasLog && { mode: "log", label: "Log", icon: ScrollText },
     isConductor && {
       mode: "workers",

package/components/Pane/PaneMenu.test.ts

@@ -6,10 +6,12 @@ import type { Session } from "@/lib/db/types";
 import { bookmarksUi } from "@/stores/bookmarksUi";
 import { docsUi } from "@/stores/docsUi";
 import { paletteUi } from "@/stores/palette";
+import { analystUi } from "@/stores/analystUi";
 
 const data = vi.hoisted(() => ({
   bookmarks: [] as unknown[],
   docs: null as { id: string } | null,
+  canAddAnalyst: false,
 }));
 vi.mock("@/data/bookmarks", () => ({
   useSessionBookmarks: () => ({ data: data.bookmarks }),
@@ -17,6 +19,9 @@ vi.mock("@/data/bookmarks", () => ({
 vi.mock("@/data/lumifyhub/docs", () => ({
   useDocsWorkspace: () => data.docs,
 }));
+vi.mock("@/components/Analyst/pair", () => ({
+  useCanAddAnalyst: () => data.canAddAnalyst,
+}));
 vi.mock("@/components/Tasks/MoveMenuItems", () => ({
   MoveMenuItems: () => null,
 }));
@@ -60,6 +65,8 @@ describe("PaneMenu", () => {
     root = createRoot(host);
     data.bookmarks = [];
     data.docs = null;
+    data.canAddAnalyst = false;
+    analystUi.open = false;
     paletteUi.open = false;
     bookmarksUi.chatSessionId = null;
     docsUi.workspaceId = null;
@@ -73,6 +80,7 @@ describe("PaneMenu", () => {
       root.render(
         createElement(PaneMenu, {
           session,
+          paneId: "pane-1",
           bookmarksSessionId,
           canSplit: true,
           canClose: true,
@@ -115,4 +123,17 @@ describe("PaneMenu", () => {
     act(() => item("Docs")?.click());
     expect(docsUi.workspaceId).toBe("w1");
   });
+
+  it("offers Add analyst only when the chat can have one, beside this pane", () => {
+    render();
+    expect(item("Add analyst")).toBeUndefined();
+    data.canAddAnalyst = true;
+    render();
+    act(() => item("Add analyst")?.click());
+    expect(analystUi).toMatchObject({
+      open: true,
+      sessionId: "s1",
+      paneId: "pane-1",
+    });
+  });
 });

package/components/Pane/PaneMenu.tsx

@@ -8,9 +8,11 @@ import {
   Link,
   MoreHorizontal,
   Share2,
+  Download,
   SplitSquareHorizontal,
   SplitSquareVertical,
   Star,
+  Eye,
   Unplug,
   X,
 } from "lucide-react";
@@ -27,6 +29,9 @@ import {
 import { copySessionLink, writeClipboard } from "@/hooks/useCopyToClipboard";
 import type { Session } from "@/lib/db";
 import { shareUiActions } from "@/stores/shareUi";
+import { exportUiActions } from "@/stores/exportUi";
+import { analystUiActions } from "@/stores/analystUi";
+import { useCanAddAnalyst } from "@/components/Analyst/pair";
 import { useSessionBookmarks } from "@/data/bookmarks";
 import { useDocsWorkspace } from "@/data/lumifyhub/docs";
 import { bookmarksUiActions } from "@/stores/bookmarksUi";
@@ -36,6 +41,7 @@ import { MoveMenuItems } from "@/components/Tasks/MoveMenuItems";
 
 interface PaneMenuProps {
   session: Session | null | undefined;
+  paneId?: string;
   // The chat on show, for its bookmarks; null for a terminal or another view.
   bookmarksSessionId?: string | null;
   canSplit: boolean;
@@ -51,6 +57,7 @@ interface PaneMenuProps {
 // the bar.
 export function PaneMenu({
   session,
+  paneId,
   bookmarksSessionId,
   canSplit,
   canClose,
@@ -62,6 +69,7 @@ export function PaneMenu({
 }: PaneMenuProps) {
   const { data: bookmarks = [] } = useSessionBookmarks(bookmarksSessionId);
   const docs = useDocsWorkspace(session?.project_id);
+  const canAddAnalyst = useCanAddAnalyst(session);
   const copyId = async (id: string) => {
     try {
       await writeClipboard(id);
@@ -117,6 +125,24 @@ export function PaneMenu({
                 Share…
               </DropdownMenuItem>
             )}
+            {session.view === "chat" && (
+              <DropdownMenuItem
+                onSelect={() => exportUiActions.open(session.id, session.name)}
+              >
+                <Download className="h-4 w-4" />
+                Export for AI…
+              </DropdownMenuItem>
+            )}
+            {canAddAnalyst && session && (
+              <DropdownMenuItem
+                onSelect={() =>
+                  analystUiActions.open(session.id, session.name, paneId)
+                }
+              >
+                <Eye className="h-4 w-4" />
+                Add analyst…
+              </DropdownMenuItem>
+            )}
             <DropdownMenuSeparator />
             <MoveMenuItems
               session={session}

package/components/Pane/PaneViewToggle.tsx

@@ -6,6 +6,7 @@ import {
   Home,
   Package,
   ScrollText,
+  ClipboardList,
   Users,
 } from "lucide-react";
 import {
@@ -27,6 +28,7 @@ interface PaneViewToggleProps {
   isConductor: boolean;
   // The task merged and has a log.
   hasLog?: boolean;
+  hasReport?: boolean;
   workerCount: number;
   gitDrawerOpen: boolean;
   shellDrawerOpen: boolean;
@@ -85,6 +87,7 @@ export function PaneViewToggle({
   showGit,
   isConductor,
   hasLog,
+  hasReport,
   workerCount,
   gitDrawerOpen,
   shellDrawerOpen,
@@ -138,6 +141,15 @@ export function PaneViewToggle({
           <Package className="h-3.5 w-3.5" />
         </ToggleButton>
       )}
+      {hasReport && (
+        <ToggleButton
+          label="Report"
+          active={viewMode === "report"}
+          onClick={() => onViewModeChange("report")}
+        >
+          <ClipboardList className="h-3.5 w-3.5" />
+        </ToggleButton>
+      )}
       {hasLog && (
         <ToggleButton
           label="Log"