@saadnvd1/agent-os 0.3.700 → 0.3.723

package/components/Sessions/RolePill.tsx

@@ -0,0 +1,196 @@
+"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 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]) => {
+    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/ui/notice.tsx

@@ -0,0 +1,46 @@
+import type { ReactNode } from "react";
+import { AlertTriangle, Info } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+const TONES = {
+  info: {
+    box: "bg-muted/60",
+    icon: <Info className="text-muted-foreground mt-0.5 h-4 w-4 shrink-0" />,
+  },
+  warning: {
+    box: "bg-amber-500/10",
+    icon: (
+      <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0 text-amber-600 dark:text-amber-400" />
+    ),
+  },
+} as const;
+
+/** A short message in a tinted box, with an optional action on the right. */
+export function Notice({
+  tone = "info",
+  action,
+  className,
+  children,
+}: {
+  tone?: keyof typeof TONES;
+  action?: ReactNode;
+  className?: string;
+  children: ReactNode;
+}) {
+  return (
+    <div
+      role="status"
+      className={cn(
+        "flex flex-col gap-2 rounded-lg p-3 text-sm sm:flex-row sm:items-center",
+        TONES[tone].box,
+        className
+      )}
+    >
+      <div className="flex min-w-0 flex-1 gap-2">
+        {TONES[tone].icon}
+        <div className="min-w-0 flex-1">{children}</div>
+      </div>
+      {action}
+    </div>
+  );
+}

package/components/ui/status-pill.tsx

@@ -0,0 +1,39 @@
+import type { ComponentProps } from "react";
+import { cn } from "@/lib/utils";
+
+const TONES = {
+  amber: "bg-amber-500/15 text-amber-700 dark:text-amber-400",
+  muted: "bg-muted text-muted-foreground",
+} as const;
+
+/** A small coloured pill for a status. A button when it has an onClick. */
+export function StatusPill({
+  tone,
+  className,
+  onClick,
+  ...props
+}: Omit<ComponentProps<"span">, "onClick"> & {
+  tone: keyof typeof TONES;
+  onClick?: () => void;
+}) {
+  const classes = cn(
+    "inline-flex max-w-full min-w-0 items-center gap-1 rounded-md px-1.5 py-0.5 text-[11px] font-semibold",
+    TONES[tone],
+    className
+  );
+  if (!onClick) return <span className={classes} {...props} />;
+  return (
+    <button
+      type="button"
+      onClick={(e) => {
+        e.stopPropagation();
+        onClick();
+      }}
+      className={cn(
+        classes,
+        "relative cursor-pointer before:absolute before:-inset-x-1 before:-inset-y-3 hover:brightness-110"
+      )}
+      {...(props as ComponentProps<"button">)}
+    />
+  );
+}

package/data/analyst/index.ts

@@ -0,0 +1,3 @@
+export { analystKeys } from "./keys";
+export { useAnalystLink, useSessionAnalyst } from "./queries";
+export * from "./mutations";

package/data/analyst/keys.ts

@@ -0,0 +1,6 @@
+export const analystKeys = {
+  all: ["analyst"] as const,
+  link: (id: string) => [...analystKeys.all, "link", id] as const,
+  ofSession: (sessionId: string) =>
+    [...analystKeys.all, "session", sessionId] as const,
+};

package/data/analyst/mutations.ts

@@ -0,0 +1,116 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import type { AnalystLinkView, Recommendation } from "@/lib/analyst/types";
+import { sessionKeys } from "../sessions/keys";
+import { analystKeys } from "./keys";
+
+async function call<T>(
+  url: string,
+  method: string,
+  body?: unknown
+): Promise<T> {
+  const res = await fetch(url, {
+    method,
+    headers: { "Content-Type": "application/json" },
+    body: body === undefined ? undefined : JSON.stringify(body),
+  });
+  const data = await res.json().catch(() => ({}));
+  if (!res.ok) throw new Error(data.error || "Something went wrong");
+  return data as T;
+}
+
+const link = (id: string) => `/api/analyst/${encodeURIComponent(id)}`;
+const rec = (id: string, recId: string, action: string) =>
+  `${link(id)}/recommendations/${encodeURIComponent(recId)}/${action}`;
+
+function useRefresh() {
+  const client = useQueryClient();
+  return () => {
+    void client.invalidateQueries({ queryKey: analystKeys.all });
+  };
+}
+
+export interface StartAnalystInput {
+  coderSessionId?: string;
+  newCoder?: {
+    projectId: string;
+    agentType: string;
+    model?: string;
+    prompt?: string;
+    useWorktree?: boolean;
+  };
+  analystModel?: string;
+  reviewLast?: boolean;
+}
+
+export function useStartAnalyst() {
+  const client = useQueryClient();
+  return useMutation({
+    mutationFn: (input: StartAnalystInput) =>
+      call<{ link: AnalystLinkView }>("/api/analyst", "POST", input).then(
+        (r) => r.link
+      ),
+    onSuccess: () => {
+      void client.invalidateQueries({ queryKey: analystKeys.all });
+      void client.invalidateQueries({ queryKey: sessionKeys.all });
+    },
+  });
+}
+
+export function useSendRecommendation(linkId: string) {
+  const refresh = useRefresh();
+  return useMutation({
+    mutationFn: ({ recId, text }: { recId: string; text?: string }) =>
+      call<{ recommendation: Recommendation }>(
+        rec(linkId, recId, "send"),
+        "POST",
+        text === undefined ? {} : { text }
+      ),
+    onSettled: refresh,
+  });
+}
+
+export function useDismissRecommendation(linkId: string) {
+  const refresh = useRefresh();
+  return useMutation({
+    mutationFn: (recId: string) =>
+      call(rec(linkId, recId, "dismiss"), "POST", {}),
+    onSettled: refresh,
+  });
+}
+
+export function useAskAgain(linkId: string) {
+  const refresh = useRefresh();
+  return useMutation({
+    mutationFn: (recId: string) =>
+      call(rec(linkId, recId, "again"), "POST", {}),
+    onSettled: refresh,
+  });
+}
+
+export function useReviewNow(linkId: string) {
+  const refresh = useRefresh();
+  return useMutation({
+    mutationFn: () => call(`${link(linkId)}/review`, "POST", {}),
+    onSettled: refresh,
+  });
+}
+
+export function useSetAnalystPaused(linkId: string) {
+  const refresh = useRefresh();
+  return useMutation({
+    mutationFn: (paused: boolean) => call(link(linkId), "PATCH", { paused }),
+    onSettled: refresh,
+  });
+}
+
+export function useEndAnalyst(linkId: string) {
+  const client = useQueryClient();
+  return useMutation({
+    mutationFn: (endAnalyst: boolean) =>
+      call(link(linkId), "DELETE", { endAnalyst }),
+    onSettled: () => {
+      void client.invalidateQueries({ queryKey: analystKeys.all });
+      void client.invalidateQueries({ queryKey: sessionKeys.all });
+    },
+  });
+}

package/data/analyst/queries.ts

@@ -0,0 +1,35 @@
+import { useQuery } from "@tanstack/react-query";
+import type { AnalystLinkView } from "@/lib/analyst/types";
+import { usePollWhenOffline } from "../push/connection";
+import { analystKeys } from "./keys";
+
+async function read(url: string): Promise<AnalystLinkView | null> {
+  const res = await fetch(url);
+  if (res.status === 404) return null;
+  const body = await res.json().catch(() => ({}));
+  if (!res.ok) throw new Error(body.error || "Couldn't load the analyst");
+  return body.link ?? null;
+}
+
+// The pairing a session is in, as coder or analyst, or null. Pushed when a
+// pairing or a card changes; it polls only while the stream is down.
+export function useSessionAnalyst(sessionId: string | undefined) {
+  return useQuery({
+    queryKey: analystKeys.ofSession(sessionId ?? ""),
+    queryFn: () =>
+      read(`/api/sessions/${encodeURIComponent(sessionId!)}/analyst`),
+    enabled: !!sessionId,
+    staleTime: 5000,
+    refetchInterval: usePollWhenOffline(15000),
+  });
+}
+
+export function useAnalystLink(linkId: string | undefined) {
+  return useQuery({
+    queryKey: analystKeys.link(linkId ?? ""),
+    queryFn: () => read(`/api/analyst/${encodeURIComponent(linkId!)}`),
+    enabled: !!linkId,
+    staleTime: 5000,
+    refetchInterval: usePollWhenOffline(15000),
+  });
+}

package/data/claims/index.ts

@@ -0,0 +1,2 @@
+export { claimKeys } from "./keys";
+export { useClaims, useCheckStart } from "./queries";

package/data/claims/keys.ts

@@ -0,0 +1,5 @@
+export const claimKeys = {
+  all: ["claims"] as const,
+  list: (project?: string) =>
+    [...claimKeys.all, "list", project ?? ""] as const,
+};

package/data/claims/queries.ts

@@ -0,0 +1,47 @@
+import { useMutation, useQuery } from "@tanstack/react-query";
+import type { ClaimsView } from "@/lib/claims/view";
+import type { StartWarning } from "@/lib/claims/startWarning";
+import { usePollWhenOffline } from "../push/connection";
+import { claimKeys } from "./keys";
+
+// Claims here and on linked machines. Pushed when a claim changes; it polls
+// only while the stream is down.
+export function useClaims(opts: { project?: string; enabled?: boolean } = {}) {
+  const { project, enabled = true } = opts;
+  return useQuery({
+    queryKey: claimKeys.list(project),
+    queryFn: async (): Promise<ClaimsView> => {
+      const res = await fetch(
+        `/api/claims${project ? `?project=${encodeURIComponent(project)}` : ""}`
+      );
+      if (!res.ok) throw new Error("Failed to load claims");
+      return res.json();
+    },
+    enabled,
+    staleTime: 5000,
+    refetchInterval: usePollWhenOffline(15000),
+  });
+}
+
+export interface StartCheckInput {
+  projectId: string;
+  name?: string;
+  prompt: string;
+  branch?: string | null;
+}
+
+// Who else is on the work a person is about to start. A failure means no
+// warning: it never stops a start.
+export function useCheckStart() {
+  return useMutation({
+    mutationFn: async (input: StartCheckInput): Promise<StartWarning[]> => {
+      const res = await fetch("/api/claims/check", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(input),
+      });
+      if (!res.ok) return [];
+      return ((await res.json()) as { overlaps: StartWarning[] }).overlaps;
+    },
+  });
+}

package/data/exports/index.ts

@@ -0,0 +1,2 @@
+export * from "./keys";
+export * from "./queries";

package/data/exports/keys.ts

@@ -0,0 +1,3 @@
+export const exportKeys = {
+  all: ["exports"] as const,
+};

package/data/exports/queries.ts

@@ -0,0 +1,51 @@
+import { useMutation } from "@tanstack/react-query";
+import {
+  exportFileName,
+  rangeSlug,
+  type ExportEstimate,
+  type ExportRequest,
+} from "@/lib/export/view";
+
+export type {
+  ExportEstimate,
+  ExportRequest,
+  ExportTurnInfo,
+  ExportWarning,
+} from "@/lib/export/view";
+
+const post = (url: string, body: unknown) =>
+  fetch(url, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(body),
+  });
+
+async function failure(res: Response): Promise<never> {
+  const data = await res.json().catch(() => ({}));
+  throw new Error(data.error || "Export failed");
+}
+
+/** What an export would hold: size, turns, warnings. No file text. */
+export function useExportEstimate(sessionId: string) {
+  return useMutation({
+    mutationFn: async (req: ExportRequest): Promise<ExportEstimate> => {
+      const res = await post(`/api/sessions/${sessionId}/export/estimate`, req);
+      return res.ok ? res.json() : failure(res);
+    },
+  });
+}
+
+/** The file itself, as the server built it. */
+export async function fetchExport(
+  sessionId: string,
+  req: ExportRequest,
+  title: string,
+  sel: { from: number; to: number; of: number } | null
+): Promise<{ blob: Blob; name: string }> {
+  const res = await post(`/api/sessions/${sessionId}/export`, req);
+  if (!res.ok) return failure(res);
+  return {
+    blob: await res.blob(),
+    name: exportFileName(title, sel ? rangeSlug(sel) : "all", req.format),
+  };
+}