@saadnvd1/agent-os 0.3.715 → 0.3.728

package/components/SessionList/SessionRowMenu.tsx

@@ -15,6 +15,7 @@ import {
   KanbanSquare,
   Link,
   Share2,
+  Download,
   Loader2,
   Pencil,
   Pin,
@@ -26,6 +27,7 @@ import {
   RotateCcw,
   Sparkles,
   Trash2,
+  Eye,
 } from "lucide-react";
 import type { Session } from "@/lib/db";
 import { selectionActions } from "@/stores/sessionSelection";
@@ -49,6 +51,8 @@ import type { SidebarRow } from "@/lib/sidebar/shelves";
 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";
@@ -196,6 +200,14 @@ export function SessionRowMenu({
             title: session.name,
           })
         );
+      case "export":
+        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/Sessions/RolePill.tsx

@@ -0,0 +1,203 @@
+"use client";
+
+import { useState } from "react";
+import { toast } from "sonner";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import {
+  AvailabilityDot,
+  LocalityBadge,
+} from "@/components/Models/ModelBadges";
+import { RoleModelSelect } from "@/components/Models/RoleModelSelect";
+import { useCrewQuery, useSwitchSessionModel } from "@/data/models";
+import { useLaunchSession } from "@/data/sessions";
+import { usePanes } from "@/contexts/PaneContext";
+import { analystUiActions } from "@/stores/analystUi";
+import type { Session } from "@/lib/db";
+import {
+  AGENT_ROLES,
+  AGENT_ROLE_DEFS,
+  isAgentRole,
+} from "@/lib/models/agent-roles";
+import { cn } from "@/lib/utils";
+import { uuid } from "@/lib/uuid";
+
+const modelName = (ref: string | null) =>
+  ref ? ref.split("/").slice(1).join("/") : "model";
+
+// The role a running session was started in and the model it runs on, with
+// its crew: the sessions it works with, by @name. Nothing for a session
+// started without a role. `compact` is a phone's small button.
+export function RolePill({
+  session,
+  paneId,
+  compact,
+}: {
+  session: Session | null | undefined;
+  paneId?: string;
+  compact?: boolean;
+}) {
+  const [open, setOpen] = useState(false);
+  const role = isAgentRole(session?.agent_role) ? session.agent_role : null;
+  const crew = useCrewQuery(session?.id, !!role);
+  const switchModel = useSwitchSessionModel(session?.id ?? "");
+  const launch = useLaunchSession();
+  const { attachSession } = usePanes();
+  if (!session || !role) return null;
+  const me = crew.data?.members.find((m) => m.id === session.id);
+  const down = me?.availability === "down";
+  const label = AGENT_ROLE_DEFS[role].label;
+  const others = crew.data?.members.filter((m) => m.id !== session.id) ?? [];
+
+  const add = async (next: (typeof AGENT_ROLES)[number]) => {
+    // A chat's analyst is paired with it, to review each turn.
+    if (next === "analyst" && session.view === "chat") {
+      setOpen(false);
+      analystUiActions.open(session.id, session.name, paneId ?? null);
+      return;
+    }
+    try {
+      const { session: made } = await launch.mutateAsync({
+        id: uuid(),
+        projectId: session.project_id,
+        agentType: "claude",
+        model: "",
+        access: "full",
+        useWorktree: false,
+        baseBranch: null,
+        prompt: "",
+        agentRole: next,
+        crewId: session.crew_id ?? session.id,
+      });
+      if (paneId) attachSession(paneId, made.id, made.tmux_name ?? "");
+      setOpen(false);
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : String(error));
+    }
+  };
+
+  return (
+    <>
+      <button
+        type="button"
+        onClick={(e) => {
+          e.stopPropagation();
+          setOpen(true);
+        }}
+        aria-label={`${label}, ${modelName(me?.ref ?? null)}${down ? ", model not answering" : ""}`}
+        className={cn(
+          "ring-border/70 flex shrink-0 items-center gap-1.5 rounded-full text-xs ring-1 ring-inset",
+          down
+            ? "bg-amber-500/10 text-amber-600 dark:text-amber-400"
+            : "bg-muted/60",
+          compact
+            ? "-my-1.5 h-11 w-11 justify-center rounded-lg ring-0"
+            : "h-7 max-w-64 px-2.5"
+        )}
+      >
+        <span className="bg-accent text-primary grid h-4 w-4 shrink-0 place-items-center rounded text-[10px] font-semibold">
+          {label[0]}
+        </span>
+        {!compact && (
+          <>
+            <span className="truncate">
+              {label}
+              {me?.ref ? ` · ${modelName(me.ref)}` : ""}
+            </span>
+            {me && !down && <LocalityBadge locality={me.locality} />}
+            {down && <span className="shrink-0">unreachable</span>}
+          </>
+        )}
+        {compact && down && (
+          <span className="bg-destructive absolute h-2 w-2 translate-x-3 -translate-y-3 rounded-full" />
+        )}
+      </button>
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>{label} · role and crew</DialogTitle>
+            <DialogDescription>
+              {AGENT_ROLE_DEFS[role].purpose}
+            </DialogDescription>
+          </DialogHeader>
+          <div className="bg-muted/40 space-y-2 rounded-xl p-3">
+            <div className="flex items-center justify-between gap-2">
+              <span className="flex min-w-0 items-center gap-2 text-sm font-medium">
+                <AvailabilityDot
+                  availability={{ state: me?.availability ?? "unknown" }}
+                />
+                <span className="truncate">{modelName(me?.ref ?? null)}</span>
+              </span>
+              {me && <LocalityBadge locality={me.locality} />}
+            </div>
+            {down && (
+              <p role="alert" className="text-destructive text-xs">
+                This model&apos;s server isn&apos;t answering. Your conversation
+                is kept: switch to another model to carry on.
+              </p>
+            )}
+            <RoleModelSelect
+              value={me?.ref ?? null}
+              inheritLabel="Switch model…"
+              disabled={switchModel.isPending}
+              onChange={(ref) =>
+                ref &&
+                switchModel.mutate(ref, {
+                  onError: (e) => toast.error(e.message),
+                  onSuccess: () => toast.success("Switched model"),
+                })
+              }
+            />
+          </div>
+          <div className="space-y-1.5">
+            <h3 className="text-muted-foreground text-xs font-medium uppercase">
+              Crew
+            </h3>
+            {others.length === 0 && (
+              <p className="text-muted-foreground text-sm">
+                Nobody else yet. Add a role to work with this session.
+              </p>
+            )}
+            {others.map((m) => (
+              <div key={m.id} className="flex items-center gap-2 text-sm">
+                <span className="min-w-0 flex-1">
+                  <span className="block truncate">{m.name}</span>
+                  <span className="text-muted-foreground block truncate font-mono text-xs">
+                    {m.agentRole ? `@${m.agentRole}` : "no role"} ·{" "}
+                    {modelName(m.ref)}
+                  </span>
+                </span>
+                <AvailabilityDot availability={{ state: m.availability }} />
+                <LocalityBadge locality={m.locality} />
+              </div>
+            ))}
+          </div>
+          <div className="flex flex-wrap gap-2">
+            {AGENT_ROLES.filter(
+              (r) =>
+                r !== role &&
+                r !== "supervisor" &&
+                !others.some((m) => m.agentRole === r)
+            ).map((r) => (
+              <Button
+                key={r}
+                variant="outline"
+                className="h-11 md:h-9"
+                disabled={launch.isPending}
+                onClick={() => void add(r)}
+              >
+                Add {AGENT_ROLE_DEFS[r].label}
+              </Button>
+            ))}
+          </div>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}

package/components/Settings/SettingsDialog.tsx

@@ -19,6 +19,7 @@ import {
   FlaskConical,
   RefreshCw,
   Smartphone,
+  Users,
   X,
   type LucideIcon,
 } from "lucide-react";
@@ -34,6 +35,7 @@ import { AuditsPanel } from "@/components/Audits/AuditsPanel";
 import { HealthPanel } from "@/components/Health/HealthPanel";
 import { DevicesPanel } from "@/components/Devices";
 import { GlobalMergeSection } from "@/components/Merge/GlobalMergeSection";
+import { AgentRolesSection } from "@/components/Models/AgentRolesSection";
 import { ModelsSection } from "@/components/Models/ModelsSection";
 import { SharedLinksPanel } from "@/components/Shares/SharedLinksPanel";
 import { SchedulesPanel } from "@/components/Schedules";
@@ -87,6 +89,11 @@ export const SECTION_INFO: Record<
     hint: "Which model each kind of work runs on, and providers",
     icon: Cpu,
   },
+  "agent-roles": {
+    label: "Agent roles",
+    hint: "Developer, Analyst, Reviewer and Supervisor: a model each, local or cloud",
+    icon: Users,
+  },
   notifications: {
     label: "Notifications",
     hint: "Sound, browser alerts, your phone",
@@ -145,6 +152,8 @@ function SectionBody({
       return <WorkspaceSettings />;
     case "models":
       return <ModelsSection />;
+    case "agent-roles":
+      return <AgentRolesSection />;
     case "devices":
       return <DevicesPanel />;
     case "shares":

package/components/Share/ShareDialog.tsx

@@ -28,6 +28,7 @@ import {
   type SharePreview,
 } from "@/data/shares";
 import { shareUi, shareUiActions } from "@/stores/shareUi";
+import { exportUiActions } from "@/stores/exportUi";
 import {
   DEFAULT_EXPIRY,
   EXPIRIES,
@@ -271,6 +272,18 @@ function ShareBody({
           {error && preview && (
             <p className="text-destructive text-sm">{error}</p>
           )}
+          {kind === "chat" && sessionId && (
+            <button
+              type="button"
+              onClick={() => {
+                shareUiActions.close();
+                exportUiActions.open(sessionId, target.title);
+              }}
+              className="text-muted-foreground hover:text-foreground min-h-11 self-start text-xs underline underline-offset-2"
+            >
+              Export for AI instead…
+            </button>
+          )}
         </div>
       </div>
 

package/components/Tasks/Loop/LoopButton.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import { useState } from "react";
+import { Repeat } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { StatusPill } from "@/components/ui/status-pill";
+import { useLoopSummaries, useTaskLoop } from "@/data/loops";
+import { LoopSetup } from "./LoopSetup";
+import { LoopView } from "./LoopView";
+
+function LoopBody({ taskId }: { taskId: string }) {
+  const q = useTaskLoop(taskId);
+  const [setup, setSetup] = useState(false);
+  if (q.isPending)
+    return <p className="text-muted-foreground text-sm">Loading…</p>;
+  if (q.isError)
+    return <p className="text-sm text-red-500">{q.error.message}</p>;
+  const view = q.data;
+  const live = view?.loop.state === "running";
+  if (!view || setup) {
+    return <LoopSetup taskId={taskId} onStarted={() => setSetup(false)} />;
+  }
+  return (
+    <div className="space-y-4">
+      <LoopView taskId={taskId} view={view} />
+      {!live && (
+        <Button
+          className="h-11 w-full md:h-9"
+          variant="outline"
+          onClick={() => setSetup(true)}
+        >
+          Start a new loop
+        </Button>
+      )}
+    </div>
+  );
+}
+
+// The pill and button on a task row: the analyst loop for this task.
+export function LoopButton({ taskId, name }: { taskId: string; name: string }) {
+  const [open, setOpen] = useState(false);
+  const summary = useLoopSummaries().data?.[taskId];
+  const live = summary?.state === "running";
+  return (
+    <>
+      {live && summary && (
+        <StatusPill tone="amber">
+          Loop {summary.cycle}/{summary.maxCycles} · {summary.met}/
+          {summary.total}
+        </StatusPill>
+      )}
+      <Button size="sm" variant="outline" onClick={() => setOpen(true)}>
+        <Repeat className="h-3.5 w-3.5" />
+        Loop
+      </Button>
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogContent className="max-h-[90dvh] overflow-y-auto sm:max-w-xl">
+          <DialogHeader>
+            <DialogTitle>Analyst loop</DialogTitle>
+            <DialogDescription className="truncate">{name}</DialogDescription>
+          </DialogHeader>
+          {open && <LoopBody taskId={taskId} />}
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}

package/components/Tasks/Loop/LoopSetup.tsx

@@ -0,0 +1,146 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Plus, Sparkles, X } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Notice } from "@/components/ui/notice";
+import { useDraftCriteria, useStartLoop } from "@/data/loops";
+import { DEFAULT_LIMITS, LIMIT_BOUNDS, type Limits } from "@/lib/loops/types";
+
+const FIELDS: {
+  key: "maxCycles" | "maxCostUsd" | "maxMinutes";
+  label: string;
+  unit: string;
+}[] = [
+  { key: "maxCycles", label: "Cycles", unit: "" },
+  { key: "maxCostUsd", label: "Cost cap", unit: "$" },
+  { key: "maxMinutes", label: "Time", unit: "min" },
+];
+
+const input =
+  "bg-foreground/[0.05] focus-visible:ring-primary/40 min-h-11 w-full rounded-lg px-3 text-sm outline-none focus-visible:ring-[3px] md:min-h-9";
+
+export function LoopSetup({
+  taskId,
+  onStarted,
+}: {
+  taskId: string;
+  onStarted: () => void;
+}) {
+  const draft = useDraftCriteria(taskId);
+  const start = useStartLoop(taskId);
+  const [criteria, setCriteria] = useState<string[]>([""]);
+  const [limits, setLimits] = useState<
+    Pick<Limits, "maxCycles" | "maxCostUsd" | "maxMinutes">
+  >({
+    maxCycles: DEFAULT_LIMITS.maxCycles,
+    maxCostUsd: DEFAULT_LIMITS.maxCostUsd,
+    maxMinutes: DEFAULT_LIMITS.maxMinutes,
+  });
+
+  useEffect(() => {
+    draft.mutate(undefined, {
+      onSuccess: (found) =>
+        found.length && setCriteria(found.map((c) => c.text)),
+    });
+    // Once, when the setup opens.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const filled = criteria.map((c) => c.trim()).filter(Boolean);
+  const set = (i: number, text: string) =>
+    setCriteria((all) => all.map((c, j) => (j === i ? text : c)));
+  const error =
+    start.error?.message ??
+    (draft.isError ? "Couldn't draft the checklist" : null);
+
+  return (
+    <div className="space-y-4">
+      <p className="text-muted-foreground text-sm">
+        After each turn the analyst reads the real diff and test output, marks
+        this checklist with evidence, and sends the coding agent its next
+        instruction. It never merges or publishes.
+      </p>
+      <div className="space-y-2">
+        <div className="flex items-center justify-between">
+          <h3 className="text-sm font-medium">Acceptance criteria</h3>
+          {draft.isPending && (
+            <span className="text-muted-foreground text-xs">Drafting…</span>
+          )}
+        </div>
+        {criteria.map((text, i) => (
+          <div key={i} className="flex items-center gap-2">
+            <input
+              value={text}
+              onChange={(e) => set(i, e.target.value)}
+              placeholder="Something the analyst can check"
+              aria-label={`Criterion ${i + 1}`}
+              className={input}
+            />
+            <Button
+              size="icon"
+              variant="ghost"
+              className="size-11 md:size-9"
+              aria-label="Remove criterion"
+              onClick={() =>
+                setCriteria((all) =>
+                  all.length > 1 ? all.filter((_, j) => j !== i) : [""]
+                )
+              }
+            >
+              <X />
+            </Button>
+          </div>
+        ))}
+        <Button
+          size="sm"
+          variant="ghost"
+          className="h-11 md:h-8"
+          onClick={() => setCriteria((all) => [...all, ""])}
+        >
+          <Plus /> Add criterion
+        </Button>
+      </div>
+      <div className="grid grid-cols-3 gap-2">
+        {FIELDS.map((f) => (
+          <label key={f.key} className="space-y-1 text-xs">
+            <span className="text-muted-foreground">
+              {f.label}
+              {f.unit && ` (${f.unit})`}
+            </span>
+            <input
+              type="number"
+              inputMode="numeric"
+              min={LIMIT_BOUNDS[f.key][0]}
+              max={LIMIT_BOUNDS[f.key][1]}
+              value={limits[f.key]}
+              onChange={(e) =>
+                setLimits((l) => ({ ...l, [f.key]: Number(e.target.value) }))
+              }
+              className={input}
+            />
+          </label>
+        ))}
+      </div>
+      {error && <Notice tone="warning">{error}</Notice>}
+      <Button
+        className="h-11 w-full md:h-9"
+        disabled={!filled.length || start.isPending}
+        onClick={() =>
+          start.mutate(
+            {
+              criteria: filled.map((text) => ({
+                text,
+                source: "user" as const,
+              })),
+              limits,
+            },
+            { onSuccess: onStarted }
+          )
+        }
+      >
+        <Sparkles /> {start.isPending ? "Starting…" : "Start loop"}
+      </Button>
+    </div>
+  );
+}