@saadnvd1/agent-os 0.3.723 → 0.3.731

package/components/SessionList/useGroupDrag.ts

@@ -0,0 +1,83 @@
+import { useEffect, useRef, useState, type DragEvent } from "react";
+import { useAssignGroup } from "@/data/session-groups";
+import {
+  DRAG_TYPE,
+  dragging,
+  dropOutcome,
+  setDragging,
+  type DraggedSession,
+  type DropTarget,
+} from "@/lib/sidebar/groupDrop";
+
+// A session row you can pick up. Whole-row drag; the row's own click and
+// menus are untouched, and touch keeps using Move to group.
+export function useRowDrag(dragged: DraggedSession, enabled: boolean) {
+  return {
+    draggable: enabled,
+    onDragStart: (e: DragEvent) => {
+      setDragging(dragged);
+      e.dataTransfer.effectAllowed = "move";
+      e.dataTransfer.setData(DRAG_TYPE, dragged.id);
+    },
+    onDragEnd: () => setDragging(null),
+  };
+}
+
+const EXPAND_AFTER_MS = 600;
+
+// Where a dragged session can land. A group passes itself as the target; the
+// list around the groups passes null, which takes the session out of its group.
+export function useDropZone(
+  target: DropTarget | null,
+  // A folded group opens when a valid drag rests on it.
+  onRest?: () => void
+) {
+  const assign = useAssignGroup();
+  const [over, setOver] = useState(false);
+  const timer = useRef<ReturnType<typeof setTimeout>>(undefined);
+  const stopRest = () => clearTimeout(timer.current);
+  useEffect(() => stopRest, []);
+
+  const outcome = () => {
+    const d = dragging();
+    return d ? { d, out: dropOutcome(d, target) } : null;
+  };
+  const leave = () => {
+    stopRest();
+    setOver(false);
+  };
+
+  return {
+    over,
+    props: {
+      onDragOver: (e: DragEvent) => {
+        const o = outcome();
+        if (!o?.out) return;
+        e.preventDefault();
+        e.stopPropagation();
+        e.dataTransfer.dropEffect = "move";
+        if (target) {
+          setOver(true);
+          if (onRest && !timer.current)
+            timer.current = setTimeout(onRest, EXPAND_AFTER_MS);
+        }
+      },
+      onDragLeave: (e: DragEvent) => {
+        if (!e.currentTarget.contains(e.relatedTarget as Node | null)) {
+          leave();
+          timer.current = undefined;
+        }
+      },
+      onDrop: (e: DragEvent) => {
+        const o = outcome();
+        leave();
+        timer.current = undefined;
+        if (!o?.out) return;
+        e.preventDefault();
+        e.stopPropagation();
+        setDragging(null);
+        assign.mutate({ ids: [o.d.id], groupId: o.out.groupId });
+      },
+    },
+  };
+}

package/components/Sessions/RolePill.tsx

@@ -18,6 +18,7 @@ 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,
@@ -55,6 +56,12 @@ export function RolePill({
   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(),

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>
+  );
+}

package/components/Tasks/Loop/LoopView.tsx

@@ -0,0 +1,350 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import {
+  Check,
+  CircleDashed,
+  CircleX,
+  Pause,
+  Play,
+  Send,
+  SkipForward,
+  Square,
+} from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Notice } from "@/components/ui/notice";
+import { StatusPill } from "@/components/ui/status-pill";
+import {
+  useEditLoop,
+  useNextInstruction,
+  useRunLoop,
+  useStopLoop,
+} from "@/data/loops";
+import type { Criterion, CycleRow, LoopView as View } from "@/lib/loops/types";
+import { STOP_LABEL, minutesText } from "./labels";
+
+const CYCLE_LABEL: Record<CycleRow["state"], string> = {
+  claimed: "Gathering evidence",
+  decided: "Analyst decided",
+  counting: "Sending soon",
+  sending: "Sending",
+  sent: "Sent",
+  skipped: "Nothing to send",
+  stopped: "Stopped",
+  superseded: "You took over",
+  error: "Error",
+};
+
+function Stat({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="bg-foreground/[0.04] min-w-0 rounded-lg px-3 py-2">
+      <p className="text-muted-foreground text-[11px]">{label}</p>
+      <p className="truncate text-sm font-semibold tabular-nums">{value}</p>
+    </div>
+  );
+}
+
+function CriterionRow({
+  c,
+  canEdit,
+  onWaive,
+}: {
+  c: Criterion;
+  canEdit: boolean;
+  onWaive: () => void;
+}) {
+  const Icon =
+    c.status === "met"
+      ? Check
+      : c.status === "failing"
+        ? CircleX
+        : CircleDashed;
+  return (
+    <li className="flex items-start gap-2 text-sm">
+      <Icon
+        className={`mt-0.5 h-4 w-4 shrink-0 ${
+          c.status === "met"
+            ? "text-emerald-500"
+            : c.status === "failing"
+              ? "text-red-500"
+              : "text-muted-foreground"
+        }`}
+      />
+      <div className="min-w-0 flex-1">
+        <p
+          className={
+            c.status === "waived" ? "text-muted-foreground line-through" : ""
+          }
+        >
+          {c.text}
+        </p>
+        {c.evidence && (
+          <p className="text-muted-foreground font-mono text-[11px] break-words">
+            {c.evidence.kind}: {c.evidence.ref}
+            {c.evidence.note && ` · ${c.evidence.note}`}
+            {c.status === "met" && !c.verified && " · unverified"}
+          </p>
+        )}
+      </div>
+      {canEdit && c.status !== "met" && c.status !== "waived" && (
+        <Button
+          size="sm"
+          variant="ghost"
+          className="h-11 md:h-8"
+          onClick={onWaive}
+        >
+          Waive
+        </Button>
+      )}
+    </li>
+  );
+}
+
+function NextBar({ taskId, cycle }: { taskId: string; cycle: CycleRow }) {
+  const next = useNextInstruction(taskId);
+  const [now, setNow] = useState(() => Date.now());
+  const [text, setText] = useState(cycle.instruction ?? "");
+  const [editing, setEditing] = useState(false);
+  useEffect(() => {
+    const t = setInterval(() => setNow(Date.now()), 1000);
+    return () => clearInterval(t);
+  }, []);
+  const left = cycle.sendAt
+    ? Math.max(0, Math.ceil((cycle.sendAt - now) / 1000))
+    : null;
+  return (
+    <div className="bg-primary/10 space-y-2 rounded-xl p-3">
+      <div className="flex items-center justify-between gap-2">
+        <h3 className="text-sm font-medium">Next instruction</h3>
+        <span className="text-muted-foreground text-xs tabular-nums">
+          {left === null ? "held" : `sends in ${left}s`}
+        </span>
+      </div>
+      {editing ? (
+        <textarea
+          value={text}
+          onChange={(e) => setText(e.target.value)}
+          rows={5}
+          aria-label="Next instruction"
+          className="bg-background/60 w-full rounded-lg p-2 text-sm outline-none"
+        />
+      ) : (
+        <p className="text-sm whitespace-pre-wrap">{cycle.instruction}</p>
+      )}
+      {next.error && (
+        <p className="text-xs text-red-500">{next.error.message}</p>
+      )}
+      <div className="flex flex-wrap gap-2">
+        <Button
+          size="sm"
+          className="h-11 md:h-8"
+          disabled={next.isPending}
+          onClick={() =>
+            next.mutate({
+              action: "send",
+              instruction: editing ? text : undefined,
+            })
+          }
+        >
+          <Send /> Send now
+        </Button>
+        <Button
+          size="sm"
+          variant="outline"
+          className="h-11 md:h-8"
+          onClick={() => setEditing((e) => !e)}
+        >
+          {editing ? "Done editing" : "Edit"}
+        </Button>
+        <Button
+          size="sm"
+          variant="outline"
+          className="h-11 md:h-8"
+          onClick={() => next.mutate({ action: "hold" })}
+        >
+          <Pause /> Hold
+        </Button>
+        <Button
+          size="sm"
+          variant="outline"
+          className="h-11 md:h-8"
+          onClick={() => next.mutate({ action: "skip" })}
+        >
+          <SkipForward /> Skip
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+function Cycle({ c }: { c: CycleRow }) {
+  const ev = c.evidence;
+  return (
+    <li className="bg-foreground/[0.03] space-y-1.5 rounded-xl p-3">
+      <div className="flex items-center justify-between gap-2">
+        <h4 className="text-sm font-medium">Cycle {c.n}</h4>
+        <StatusPill tone={c.state === "error" ? "amber" : "muted"}>
+          {CYCLE_LABEL[c.state]}
+        </StatusPill>
+      </div>
+      {ev && (
+        <div className="flex flex-wrap gap-1.5">
+          {ev.commands.map((cmd) => (
+            <StatusPill
+              key={cmd.name}
+              tone={cmd.exitCode === 0 ? "muted" : "amber"}
+            >
+              {cmd.name}{" "}
+              {cmd.skipped
+                ? "skipped"
+                : cmd.exitCode === 0
+                  ? "passed"
+                  : `${cmd.failed.length || cmd.errors.length} failing`}
+            </StatusPill>
+          ))}
+          {!c.changed && <StatusPill tone="muted">no change</StatusPill>}
+        </div>
+      )}
+      {c.analysis?.summary && <p className="text-sm">{c.analysis.summary}</p>}
+      {c.analysis?.findings.map((f, i) => (
+        <p key={i} className="text-muted-foreground text-xs break-words">
+          {f.severity === "blocking" ? "Blocking" : "Minor"}: {f.text}
+          {f.file && (
+            <span className="font-mono">
+              {" "}
+              ({f.file}
+              {f.line ? `:${f.line}` : ""})
+            </span>
+          )}
+        </p>
+      ))}
+      {c.instructionSent && (
+        <p className="text-xs break-words">
+          <span className="text-muted-foreground">
+            {c.sender === "user" ? "You sent: " : "Sent: "}
+          </span>
+          {c.instructionSent}
+        </p>
+      )}
+      {!c.instructionSent && c.instruction && c.state !== "counting" && (
+        <p className="text-muted-foreground text-xs break-words">
+          Not sent: {c.instruction}
+        </p>
+      )}
+      {c.error && <p className="text-xs break-words text-red-500">{c.error}</p>}
+    </li>
+  );
+}
+
+export function LoopView({ taskId, view }: { taskId: string; view: View }) {
+  const stop = useStopLoop(taskId);
+  const run = useRunLoop(taskId);
+  const edit = useEditLoop(taskId);
+  const { loop, criteria, cycles } = view;
+  const live = loop.state === "running";
+  const met = criteria.filter(
+    (c) => c.status === "met" || c.status === "waived"
+  ).length;
+  const counting = cycles.find((c) => c.state === "counting" && c.instruction);
+  const limitStop = loop.stopReason?.startsWith("limit:");
+  const error =
+    stop.error?.message ?? run.error?.message ?? edit.error?.message;
+
+  return (
+    <div className="space-y-4">
+      <div className="grid grid-cols-2 gap-2 sm:grid-cols-4">
+        <Stat label="Criteria" value={`${met}/${criteria.length}`} />
+        <Stat label="Cycles" value={`${cycles[0]?.n ?? 0}/${loop.maxCycles}`} />
+        <Stat
+          label="Spend"
+          value={`$${view.spentUsd.toFixed(2)} / $${loop.maxCostUsd}`}
+        />
+        <Stat label="Elapsed" value={minutesText(view.elapsedMs)} />
+      </div>
+      {!live && loop.stopReason && (
+        <Notice
+          tone={
+            loop.stopReason === "done" || loop.stopReason === "stopped"
+              ? "info"
+              : "warning"
+          }
+          action={
+            limitStop ? (
+              <Button
+                size="sm"
+                className="h-11 md:h-8"
+                disabled={edit.isPending}
+                onClick={() =>
+                  edit.mutate({
+                    extend: { cycles: 4, costUsd: 5, minutes: 60 },
+                  })
+                }
+              >
+                Continue
+              </Button>
+            ) : undefined
+          }
+        >
+          <p className="font-medium">{STOP_LABEL[loop.stopReason]}</p>
+          {loop.stopDetail && loop.stopReason !== "stopped" && (
+            <p className="text-muted-foreground">{loop.stopDetail}</p>
+          )}
+        </Notice>
+      )}
+      {live && view.holdReason && <Notice>{view.holdReason}</Notice>}
+      {live && counting && (
+        <NextBar key={counting.id} taskId={taskId} cycle={counting} />
+      )}
+      {error && <Notice tone="warning">{error}</Notice>}
+      <section className="space-y-2">
+        <h3 className="text-sm font-medium">Acceptance checklist</h3>
+        <ul className="space-y-2">
+          {criteria.map((c) => (
+            <CriterionRow
+              key={c.id}
+              c={c}
+              canEdit={live}
+              onWaive={() => edit.mutate({ waive: [c.id] })}
+            />
+          ))}
+        </ul>
+      </section>
+      {live && (
+        <div className="flex flex-wrap gap-2">
+          <Button
+            size="sm"
+            variant="outline"
+            className="h-11 md:h-8"
+            disabled={run.isPending}
+            onClick={() => run.mutate()}
+          >
+            <Play /> Run a cycle now
+          </Button>
+          <Button
+            size="sm"
+            variant="outline"
+            className="h-11 md:h-8"
+            disabled={stop.isPending}
+            onClick={() => stop.mutate()}
+          >
+            <Square /> Stop loop
+          </Button>
+        </div>
+      )}
+      <section className="space-y-2">
+        <h3 className="text-sm font-medium">Cycles</h3>
+        {cycles.length === 0 ? (
+          <p className="text-muted-foreground text-sm">
+            The first cycle starts when the coding agent finishes a turn.
+          </p>
+        ) : (
+          <ul className="space-y-2">
+            {cycles.map((c) => (
+              <Cycle key={c.id} c={c} />
+            ))}
+          </ul>
+        )}
+      </section>
+    </div>
+  );
+}

package/components/Tasks/Loop/labels.ts

@@ -0,0 +1,17 @@
+import type { StopReason } from "@/lib/loops/types";
+
+export const STOP_LABEL: Record<StopReason, string> = {
+  stopped: "Stopped by you",
+  blocked: "Needs you",
+  done: "All criteria met",
+  repeat: "The same failure kept coming back",
+  no_progress: "No progress",
+  "limit:cycles": "Reached its cycle limit",
+  "limit:cost": "Reached its cost cap",
+  "limit:time": "Reached its time limit",
+};
+
+export const minutesText = (ms: number) => {
+  const m = Math.max(0, Math.round(ms / 60000));
+  return m < 60 ? `${m}m` : `${Math.floor(m / 60)}h ${m % 60}m`;
+};