@saadnvd1/agent-os 0.3.723 → 0.3.728

package/components/Report/EstimateBar.tsx

@@ -0,0 +1,51 @@
+import type { Estimate } from "@/lib/reports/types";
+import { estimateLabel, estimatePercent } from "@/lib/reports/types";
+
+// The percentage never shows without its label: it is an estimate, and the
+// label says how it was counted.
+export function EstimateBar({ estimate }: { estimate: Estimate }) {
+  const pct = estimatePercent(estimate);
+  const how =
+    estimate.basis === "acceptance"
+      ? "Acceptance items the plan listed, counted when a passing test, check or review backs them."
+      : "The plan has no acceptance items, so this counts delivery stages: plan, push, pull request, CI, review, merge.";
+  return (
+    <div className="space-y-2" title={how}>
+      <div className="flex items-baseline justify-between gap-3">
+        <span className="text-muted-foreground text-xs">
+          {estimateLabel(estimate)}
+        </span>
+        <span className="text-sm font-semibold tabular-nums">{pct}%</span>
+      </div>
+      <div
+        role="progressbar"
+        aria-valuemin={0}
+        aria-valuemax={estimate.total}
+        aria-valuenow={estimate.done}
+        aria-label={estimateLabel(estimate)}
+        className="bg-muted h-2 overflow-hidden rounded-full"
+      >
+        <div
+          className="bg-primary h-full rounded-full"
+          style={{ width: `${pct}%` }}
+        />
+      </div>
+      <details className="text-xs">
+        <summary className="text-muted-foreground flex min-h-11 cursor-pointer items-center">
+          How this is counted
+        </summary>
+        <p className="text-muted-foreground pb-2">{how}</p>
+        <ul className="space-y-1 pb-1">
+          {estimate.items.map((i) => (
+            <li key={i.label} className="flex gap-2">
+              <span aria-hidden>{i.verified ? "✓" : "○"}</span>
+              <span className={i.verified ? "" : "text-muted-foreground"}>
+                {i.label}
+              </span>
+            </li>
+          ))}
+        </ul>
+      </details>
+    </div>
+  );
+}

package/components/Report/EvidenceSheet.tsx

@@ -0,0 +1,98 @@
+"use client";
+
+import { ExternalLink } from "lucide-react";
+import {
+  ASheet,
+  ASheetContent,
+  ASheetDescription,
+  ASheetHeader,
+  ASheetTitle,
+} from "@/components/a/ASheet";
+import { StatusPill } from "@/components/ui/status-pill";
+import { useMediaQuery } from "@/hooks/useMediaQuery";
+import type { EvidenceRef } from "@/lib/reports/types";
+
+const TONE = {
+  pass: "green",
+  fail: "red",
+  pending: "amber",
+  info: "muted",
+} as const;
+const WORD = {
+  pass: "Passed",
+  fail: "Failed",
+  pending: "Waiting",
+  info: "Info",
+} as const;
+
+// What a report line rests on. The text is untrusted output: shown, never run.
+export function EvidenceSheet({
+  evidence,
+  stale,
+  onClose,
+}: {
+  evidence: EvidenceRef | null;
+  stale: boolean;
+  onClose: () => void;
+}) {
+  const wide = useMediaQuery("(min-width: 768px)");
+  return (
+    <ASheet open={!!evidence} onOpenChange={(o) => !o && onClose()}>
+      <ASheetContent
+        side={wide ? "right" : "bottom"}
+        className={wide ? "w-full max-w-md" : "max-h-[80dvh] rounded-t-2xl"}
+      >
+        {evidence && (
+          <>
+            <ASheetHeader className="pr-12">
+              <ASheetTitle className="break-words">
+                {evidence.label}
+              </ASheetTitle>
+              <ASheetDescription className="flex flex-wrap items-center gap-2">
+                <StatusPill tone={TONE[evidence.status]}>
+                  {WORD[evidence.status]}
+                </StatusPill>
+                <span>{evidence.kind}</span>
+                {evidence.sha && (
+                  <span className="font-mono">{evidence.sha.slice(0, 7)}</span>
+                )}
+                {stale && evidence.sha && <span>older push</span>}
+              </ASheetDescription>
+            </ASheetHeader>
+            <div className="min-h-0 flex-1 space-y-3 overflow-y-auto px-4 pb-6">
+              {evidence.excerpt ? (
+                <pre className="bg-muted/60 max-h-[50dvh] overflow-auto rounded-lg p-3 text-xs break-words whitespace-pre-wrap">
+                  {evidence.excerpt}
+                </pre>
+              ) : (
+                <p className="text-muted-foreground text-sm">
+                  No output was kept for this one.
+                </p>
+              )}
+              <div className="flex flex-wrap gap-2">
+                {evidence.url && (
+                  <a
+                    href={evidence.url}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="bg-secondary inline-flex min-h-11 items-center gap-1.5 rounded-lg px-3 text-sm"
+                  >
+                    Open in CI <ExternalLink className="h-3.5 w-3.5" />
+                  </a>
+                )}
+                {evidence.href && (
+                  <a
+                    href={evidence.href}
+                    className="bg-secondary inline-flex min-h-11 items-center rounded-lg px-3 text-sm"
+                  >
+                    Show in the task
+                  </a>
+                )}
+              </div>
+            </div>
+          </>
+        )}
+      </ASheetContent>
+    </ASheet>
+  );
+}

package/components/Report/ModeChooser.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import { Segmented } from "@/components/ui/segmented";
+import {
+  MODE_COPY,
+  OPERATING_MODES,
+  type OperatingMode,
+} from "@/lib/reports/types";
+
+const OPTIONS = OPERATING_MODES.map((m) => ({
+  value: m,
+  label: MODE_COPY[m].label,
+  hint: MODE_COPY[m].blurb,
+}));
+
+// Manual / Assisted / Autonomous, with what the chosen one does underneath.
+export function ModeChooser({
+  mode,
+  onChange,
+  disabled,
+  note,
+}: {
+  mode: OperatingMode;
+  onChange: (m: OperatingMode) => void;
+  disabled?: boolean;
+  note?: string;
+}) {
+  return (
+    <div className="space-y-1.5">
+      <Segmented
+        label="Operating mode"
+        value={mode}
+        options={OPTIONS}
+        onChange={onChange}
+        disabled={disabled}
+      />
+      <p className="text-muted-foreground text-xs">
+        {MODE_COPY[mode].blurb}
+        {note ? ` ${note}` : ""}
+      </p>
+    </div>
+  );
+}

package/components/Report/ReportView.tsx

@@ -0,0 +1,289 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import {
+  AlertTriangle,
+  ArrowRight,
+  CheckCircle2,
+  Hand,
+  Loader2,
+  RefreshCw,
+  type LucideIcon,
+} from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { StatusPill } from "@/components/ui/status-pill";
+import { useGenerateReport, useTaskMode, useTaskReport } from "@/data/reports";
+import {
+  MODE_COPY,
+  type EvidenceRef,
+  type HealthReport,
+  type LineTone,
+} from "@/lib/reports/types";
+import { DraftCard } from "./DraftCard";
+import { EstimateBar } from "./EstimateBar";
+import { EvidenceSheet } from "./EvidenceSheet";
+import { ModeChooser } from "./ModeChooser";
+
+const TONES: Record<LineTone, { icon: LucideIcon; cls: string; word: string }> =
+  {
+    done: {
+      icon: CheckCircle2,
+      cls: "text-green-600 dark:text-green-400",
+      word: "Done",
+    },
+    warn: {
+      icon: AlertTriangle,
+      cls: "text-amber-600 dark:text-amber-400",
+      word: "Needs attention",
+    },
+    blocked: {
+      icon: Hand,
+      cls: "text-red-600 dark:text-red-400",
+      word: "Blocked",
+    },
+    next: { icon: ArrowRight, cls: "text-primary", word: "Next" },
+  };
+
+const STATE_TONE = {
+  merged: "green",
+  done: "green",
+  working: "primary",
+  review: "primary",
+  "checks-failing": "red",
+  blocked: "red",
+} as const;
+
+const when = (iso: string) =>
+  new Date(
+    iso.includes("T") ? iso : `${iso.replace(" ", "T")}Z`
+  ).toLocaleTimeString([], {
+    hour: "numeric",
+    minute: "2-digit",
+  });
+
+// A task's plain-English health report: what's done, what needs attention,
+// what's next, each line backed by evidence that opens underneath.
+export function ReportView({
+  sessionId,
+  name,
+}: {
+  sessionId: string;
+  name?: string;
+}) {
+  const { data, isPending, isError, error } = useTaskReport(sessionId);
+  const generate = useGenerateReport(sessionId);
+  const setMode = useTaskMode(sessionId);
+  const [open, setOpen] = useState<EvidenceRef | null>(null);
+  const [changingMode, setChangingMode] = useState(false);
+  const asked = useRef(false);
+
+  const report = data?.report ?? null;
+  // Opening the view builds the first report, or a fresh one when the head moved.
+  useEffect(() => {
+    if (!data || asked.current || data.generating) return;
+    if (!report || report.stale) {
+      asked.current = true;
+      generate.mutate();
+    }
+  }, [data, report, generate]);
+
+  if (isPending)
+    return <div className="bg-muted/40 m-4 h-40 animate-pulse rounded-lg" />;
+  if (isError)
+    return <p className="text-destructive p-4 text-sm">{error.message}</p>;
+
+  const mode = data.mode;
+  const busy = data.generating || generate.isPending;
+
+  return (
+    <div className="h-full overflow-y-auto">
+      <div className="mx-auto max-w-2xl space-y-5 px-4 py-4">
+        <header className="space-y-2">
+          <div className="flex flex-wrap items-center gap-2">
+            <h2 className="text-lg font-semibold">Your Project Progress</h2>
+            {report && (
+              <StatusPill
+                tone={
+                  STATE_TONE[report.state as keyof typeof STATE_TONE] ?? "muted"
+                }
+              >
+                {report.state.replace("-", " ")}
+              </StatusPill>
+            )}
+            <button
+              type="button"
+              onClick={() => setChangingMode((c) => !c)}
+              aria-expanded={changingMode}
+              className="bg-secondary ml-auto inline-flex min-h-11 items-center rounded-lg px-3 text-xs"
+            >
+              {MODE_COPY[mode.mode].label}
+              {mode.source === "task" ? " · this task" : ""}
+            </button>
+          </div>
+          {name && (
+            <p className="text-muted-foreground truncate text-sm">{name}</p>
+          )}
+          {changingMode && (
+            <div className="bg-muted/40 space-y-2 rounded-lg p-3">
+              <ModeChooser
+                mode={mode.mode}
+                onChange={(m) => setMode.mutate(m)}
+                disabled={setMode.isPending}
+              />
+              {mode.source === "task" && (
+                <Button
+                  variant="ghost"
+                  className="min-h-11"
+                  onClick={() => setMode.mutate(null)}
+                >
+                  Use the workspace default
+                </Button>
+              )}
+            </div>
+          )}
+        </header>
+
+        {!report ? (
+          <div className="bg-card space-y-3 rounded-xl p-5 text-center shadow-sm">
+            <p className="text-sm">
+              {busy
+                ? "Reading the evidence…"
+                : "No report has been built for this task yet."}
+            </p>
+            {busy ? (
+              <Loader2 className="mx-auto h-5 w-5 animate-spin" />
+            ) : (
+              <Button className="min-h-11" onClick={() => generate.mutate()}>
+                Build the report
+              </Button>
+            )}
+          </div>
+        ) : (
+          <ReportBody
+            report={report}
+            sessionId={sessionId}
+            mode={mode.mode}
+            busy={busy}
+            onRefresh={() => generate.mutate()}
+            onOpen={setOpen}
+          />
+        )}
+      </div>
+      <EvidenceSheet
+        evidence={open}
+        stale={!!open?.sha && !!report?.head && open.sha !== report.head}
+        onClose={() => setOpen(null)}
+      />
+    </div>
+  );
+}
+
+function ReportBody({
+  report,
+  sessionId,
+  mode,
+  busy,
+  onRefresh,
+  onOpen,
+}: {
+  report: HealthReport;
+  sessionId: string;
+  mode: string;
+  busy: boolean;
+  onRefresh: () => void;
+  onOpen: (e: EvidenceRef) => void;
+}) {
+  const byId = new Map(report.evidence.map((e) => [e.id, e]));
+  const chips = (ids: string[]) =>
+    ids
+      .map((id) => byId.get(id))
+      .filter((e): e is EvidenceRef => !!e)
+      .map((e) => (
+        <button
+          key={e.id}
+          type="button"
+          onClick={() => onOpen(e)}
+          className="bg-secondary text-muted-foreground hover:text-foreground relative max-w-full truncate rounded-md px-2 py-0.5 text-[11px] before:absolute before:inset-x-0 before:-inset-y-3"
+        >
+          {e.label}
+        </button>
+      ));
+
+  return (
+    <>
+      {report.stale && (
+        <p className="rounded-lg bg-amber-500/10 px-3 py-2 text-sm text-amber-700 dark:text-amber-400">
+          New work was pushed since this report.
+        </p>
+      )}
+      <section className="bg-card space-y-4 rounded-xl p-4 shadow-sm">
+        <EstimateBar estimate={report.estimate} />
+        <p className="text-base font-medium">{report.headline}</p>
+        <ul className="space-y-3">
+          {report.lines.map((l) => {
+            const t = TONES[l.tone];
+            return (
+              <li key={l.id} className="flex gap-3">
+                <t.icon
+                  className={`mt-0.5 h-5 w-5 shrink-0 ${t.cls}`}
+                  aria-label={t.word}
+                />
+                <div className="min-w-0 flex-1 space-y-1.5">
+                  <p className="text-sm">{l.text}</p>
+                  <div className="flex flex-wrap gap-1.5">
+                    {chips(l.evidence)}
+                  </div>
+                </div>
+              </li>
+            );
+          })}
+        </ul>
+      </section>
+
+      {report.recommendation && (
+        <section className="bg-card space-y-2 rounded-xl p-4 shadow-sm">
+          <h3 className="text-sm font-semibold">Analyst recommendation</h3>
+          <p className="text-sm">{report.recommendation.text}</p>
+          <div className="flex flex-wrap gap-1.5">
+            {chips(report.recommendation.evidence)}
+          </div>
+        </section>
+      )}
+
+      {report.draft && mode !== "manual" && (
+        <DraftCard
+          key={`${report.draft.source}:${report.draft.id}`}
+          sessionId={sessionId}
+          draft={report.draft}
+        />
+      )}
+
+      <footer className="text-muted-foreground flex flex-wrap items-center gap-x-3 gap-y-1 text-xs">
+        <span>
+          Built from {report.evidence.length} item
+          {report.evidence.length === 1 ? "" : "s"} · {when(report.createdAt)}
+          {report.source === "model" && report.model
+            ? ` · ${report.model}`
+            : " · no model"}
+        </span>
+        {report.dropped > 0 && (
+          <span>
+            {report.dropped} unsupported claim{report.dropped === 1 ? "" : "s"}{" "}
+            left out
+          </span>
+        )}
+        <Button
+          variant="ghost"
+          className="ml-auto min-h-11"
+          disabled={busy}
+          onClick={onRefresh}
+        >
+          <RefreshCw
+            className={`mr-1.5 h-3.5 w-3.5 ${busy ? "animate-spin" : ""}`}
+          />
+          Refresh
+        </Button>
+      </footer>
+    </>
+  );
+}

package/components/SessionList/SessionRowMenu.tsx

@@ -27,6 +27,7 @@ import {
   RotateCcw,
   Sparkles,
   Trash2,
+  Eye,
 } from "lucide-react";
 import type { Session } from "@/lib/db";
 import { selectionActions } from "@/stores/sessionSelection";
@@ -51,6 +52,7 @@ 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";
@@ -202,6 +204,10 @@ export function SessionRowMenu({
         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

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