@saadnvd1/agent-os 0.3.723 → 0.3.728

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

package/components/Tasks/TaskRow.tsx

@@ -21,6 +21,7 @@ import { cn } from "@/lib/utils";
 import { SimulatorIndicator } from "@/components/Simulator";
 import { PlanReview } from "./PlanReview";
 import { MoveTaskButton } from "./MoveTaskButton";
+import { LoopButton } from "./Loop/LoopButton";
 import { ResumeOnModel } from "./ResumeOnModel";
 import { TASK_STATE as STATE } from "./task-state-labels";
 import { formatTokens } from "@/components/Usage/format";
@@ -119,6 +120,7 @@ export function TaskRow({ task }: { task: TaskView }) {
           )}
           {!task.hostId && <SimulatorIndicator sessionId={task.id} />}
           <MoveTaskButton task={task} onError={setMoveError} />
+          {!task.hostId && <LoopButton taskId={task.id} name={task.name} />}
           {!task.hostId && <ResumeOnModel task={task} />}
           <span className="flex-1" />
           {confirmDrop ? (

package/components/Workspaces/WorkspaceModeForm.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import { ModeChooser } from "@/components/Report/ModeChooser";
+import { useSetWorkspaceMode, useWorkspaceMode } from "@/data/reports";
+
+// A workspace's default operating mode; a task can override it.
+export function WorkspaceModeForm({ workspaceId }: { workspaceId: string }) {
+  const { data: mode } = useWorkspaceMode(workspaceId);
+  const set = useSetWorkspaceMode(workspaceId);
+  if (!mode) return null;
+  return (
+    <div className="space-y-1.5">
+      <h4 className="text-sm font-medium">Operating mode</h4>
+      <ModeChooser
+        mode={mode}
+        onChange={(m) => set.mutate(m)}
+        disabled={set.isPending}
+        note="New tasks start in this mode; any task can change its own."
+      />
+    </div>
+  );
+}

package/components/Workspaces/WorkspaceSettings.tsx

@@ -9,6 +9,7 @@ import { McpServersForm } from "./McpServersForm";
 import { HqFolderForm } from "./HqFolderForm";
 import { ProjectTiersForm } from "./ProjectTiersForm";
 import { StallForm } from "./StallForm";
+import { WorkspaceModeForm } from "./WorkspaceModeForm";
 import { WorkspaceModelsForm } from "./WorkspaceModelsForm";
 import { AwayWindowForm } from "@/components/Away/AwayWindowForm";
 
@@ -46,6 +47,7 @@ export function WorkspaceSettings() {
             key={`${w.id}:${w.max_running_tasks ?? "off"}`}
             workspace={w}
           />
+          <WorkspaceModeForm workspaceId={w.id} />
           <RulesForm workspaceId={w.id} />
           <WorkspaceModelsForm workspaceId={w.id} />
           <McpServersForm workspace={w} />

package/components/ui/segmented.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+
+export interface SegmentedOption<T extends string> {
+  value: T;
+  label: string;
+  hint?: string;
+}
+
+/** One choice out of a few, side by side. Radio semantics, 44px targets. */
+export function Segmented<T extends string>({
+  value,
+  options,
+  onChange,
+  label,
+  disabled,
+}: {
+  value: T;
+  options: SegmentedOption<T>[];
+  onChange: (v: T) => void;
+  label: string;
+  disabled?: boolean;
+}) {
+  return (
+    <div
+      role="radiogroup"
+      aria-label={label}
+      className="bg-muted/60 grid auto-cols-fr grid-flow-col gap-1 rounded-lg p-1"
+    >
+      {options.map((o) => {
+        const on = o.value === value;
+        return (
+          <button
+            key={o.value}
+            type="button"
+            role="radio"
+            aria-checked={on}
+            title={o.hint}
+            disabled={disabled}
+            onClick={() => !on && onChange(o.value)}
+            className={cn(
+              "min-h-11 rounded-md px-2 text-sm font-medium transition-colors disabled:opacity-50",
+              on
+                ? "bg-card text-foreground shadow-sm"
+                : "text-muted-foreground hover:text-foreground"
+            )}
+          >
+            {o.label}
+          </button>
+        );
+      })}
+    </div>
+  );
+}

package/components/ui/status-pill.tsx

@@ -4,6 +4,9 @@ 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",
+  green: "bg-green-500/15 text-green-700 dark:text-green-400",
+  primary: "bg-primary/15 text-primary",
+  red: "bg-red-500/15 text-red-700 dark:text-red-400",
 } as const;
 
 /** A small coloured pill for a status. A button when it has an onClick. */

package/contexts/PaneContext.tsx

@@ -23,11 +23,13 @@ import {
   loadPaneState,
   showDraft,
   MAX_PANES,
+  openBeside as openBesideIn,
+  type OpenSession,
 } from "@/lib/panes";
 import { useViewport } from "@/hooks/useViewport";
 
 export type ViewMode =
-  "terminal" | "files" | "git" | "workers" | "log" | "artifacts";
+  "terminal" | "files" | "git" | "workers" | "log" | "artifacts" | "report";
 
 export interface PaneViewState {
   viewMode: ViewMode;
@@ -59,6 +61,8 @@ interface PaneContextValue {
     hostId?: string
   ) => void;
   detachSession: (paneId: string) => void;
+  // Shows a session beside a pane: its pane if open, else a split or a tab.
+  openBeside: (paneId: string, open: OpenSession) => void;
   openDraft: (paneId: string, draftId: string) => void;
   getPaneData: (paneId: string) => PaneData;
   getActiveTab: (paneId: string) => TabData | null;
@@ -270,6 +274,21 @@ export function PaneProvider({ children }: { children: ReactNode }) {
     []
   );
 
+  // A phone shows one pane: the session takes this one's place.
+  const openBeside = useCallback(
+    (paneId: string, open: OpenSession) => {
+      if (isMobile)
+        attachSession(
+          paneId,
+          open.sessionId,
+          open.tmux,
+          open.hostId ?? undefined
+        );
+      else setState((prev) => openBesideIn(prev, paneId, open));
+    },
+    [isMobile, attachSession]
+  );
+
   // Detach session from active tab
   const detachSession = useCallback((paneId: string) => {
     setState((prev) => {
@@ -393,6 +412,7 @@ export function PaneProvider({ children }: { children: ReactNode }) {
         switchTab,
         attachSession,
         detachSession,
+        openBeside,
         openDraft,
         getPaneData,
         getActiveTab,

package/data/loops/index.ts

@@ -0,0 +1,3 @@
+export { loopKeys } from "./keys";
+export { useTaskLoop, useLoopSummaries } from "./queries";
+export * from "./mutations";