@saadnvd1/agent-os 0.3.723 → 0.3.728

package/components/Analyst/ReviewCard.tsx

@@ -0,0 +1,272 @@
+"use client";
+
+import { useState } from "react";
+import { AlertTriangle, Check, Loader2, RotateCcw, Send } from "lucide-react";
+import { toast } from "sonner";
+import { Button } from "@/components/ui/button";
+import { StatusPill } from "@/components/ui/status-pill";
+import { Textarea } from "@/components/ui/textarea";
+import { useBookmarkChat } from "@/components/Bookmarks/context";
+import { useChatItem } from "@/components/Chat/itemContext";
+import {
+  useAskAgain,
+  useDismissRecommendation,
+  useSendRecommendation,
+  useSessionAnalyst,
+} from "@/data/analyst";
+import { parseReviewJson } from "@/lib/analyst/parseReview";
+import type { Issue, Recommendation } from "@/lib/analyst/types";
+import { cn } from "@/lib/utils";
+import { cardView } from "./cardState";
+import { SignalChips } from "./SignalChips";
+
+const SEVERITY_DOT: Record<Issue["severity"], string> = {
+  high: "bg-red-500",
+  medium: "bg-amber-500",
+  low: "bg-muted-foreground/50",
+};
+
+const fail = (e: Error) => toast.error(e.message);
+
+/**
+ * An analyst's `agentos-review` block, drawn as a card: its summary, the
+ * issues it flagged and the prompt it recommends, with Send to Coding Agent,
+ * Edit and Dismiss while the stored card is open.
+ */
+export function ReviewCard({ code }: { code: string }) {
+  const item = useChatItem();
+  const sessionId = useBookmarkChat()?.sessionId;
+  const { data: link } = useSessionAnalyst(sessionId);
+  const parsed = parseReviewJson(code);
+  const rec =
+    (item &&
+      link &&
+      link.analyst.id === sessionId &&
+      link.recommendations.find((r) => r.analystItemId === item.itemId)) ||
+    null;
+
+  if (!parsed.ok)
+    return (
+      <div className="bg-foreground/[0.04] text-muted-foreground not-prose my-3 space-y-2 rounded-xl px-3 py-2.5 text-xs">
+        <div className="flex items-center gap-2">
+          {item?.streaming ? (
+            <>
+              <Loader2 className="h-3.5 w-3.5 animate-spin" /> Writing the
+              review…
+            </>
+          ) : (
+            <>
+              <AlertTriangle className="h-3.5 w-3.5 shrink-0 text-amber-500" />
+              {parsed.error}
+            </>
+          )}
+        </div>
+        {rec && link && !item?.streaming && (
+          <Actions
+            linkId={link.id}
+            coderName={link.coder.name}
+            rec={rec}
+            prompt={null}
+            view={cardView(rec, null, link.coderLastTurn)}
+          />
+        )}
+      </div>
+    );
+
+  const review = parsed.review;
+  const view = cardView(
+    rec,
+    rec?.verdict ?? review.verdict,
+    link?.coderLastTurn ?? null
+  );
+
+  return (
+    <div className="bg-card hairline not-prose my-3 space-y-3 rounded-xl p-3 text-sm">
+      <div className="flex items-center gap-2">
+        <StatusPill tone={view.tone}>{view.label}</StatusPill>
+        <span className="text-muted-foreground text-xs">Analyst review</span>
+      </div>
+      <p className="leading-relaxed">{review.summary}</p>
+      {rec?.signals && <SignalChips signals={rec.signals} />}
+      {review.issues.length > 0 && (
+        <ul className="space-y-2">
+          {review.issues.map((issue, i) => (
+            <li key={i} className="flex gap-2">
+              <span
+                aria-label={`${issue.severity} severity`}
+                className={cn(
+                  "mt-1.5 h-2 w-2 shrink-0 rounded-full",
+                  SEVERITY_DOT[issue.severity]
+                )}
+              />
+              <div className="min-w-0">
+                <div className="font-medium">{issue.title}</div>
+                {issue.where && (
+                  <div className="text-muted-foreground truncate font-mono text-[11px]">
+                    {issue.where}
+                  </div>
+                )}
+                {issue.detail && (
+                  <div className="text-muted-foreground text-xs leading-relaxed">
+                    {issue.detail}
+                  </div>
+                )}
+              </div>
+            </li>
+          ))}
+        </ul>
+      )}
+      {view.notes.map((note) => (
+        <div
+          key={note}
+          className="flex items-start gap-2 rounded-lg bg-amber-500/10 px-2.5 py-2 text-xs text-amber-700 dark:text-amber-400"
+        >
+          <AlertTriangle className="mt-px h-3.5 w-3.5 shrink-0" />
+          {note}
+        </div>
+      ))}
+      {rec && link ? (
+        <Actions
+          linkId={link.id}
+          coderName={link.coder.name}
+          rec={rec}
+          prompt={review.prompt ?? null}
+          view={view}
+        />
+      ) : (
+        review.prompt && <PromptBox text={review.prompt} />
+      )}
+    </div>
+  );
+}
+
+function PromptBox({ text, muted }: { text: string; muted?: boolean }) {
+  return (
+    <div
+      className={cn(
+        "bg-foreground/[0.04] max-h-60 overflow-y-auto rounded-lg px-3 py-2 text-[13px] leading-relaxed whitespace-pre-wrap",
+        muted && "text-muted-foreground"
+      )}
+    >
+      {text}
+    </div>
+  );
+}
+
+function Actions({
+  linkId,
+  coderName,
+  rec,
+  prompt,
+  view,
+}: {
+  linkId: string;
+  coderName: string;
+  rec: Recommendation;
+  prompt: string | null;
+  view: ReturnType<typeof cardView>;
+}) {
+  const [draft, setDraft] = useState<string | null>(null);
+  const send = useSendRecommendation(linkId);
+  const dismiss = useDismissRecommendation(linkId);
+  const again = useAskAgain(linkId);
+  const busy = send.isPending || dismiss.isPending || again.isPending;
+
+  if (rec.state === "sent")
+    return (
+      <div className="space-y-1.5">
+        <div className="text-muted-foreground flex items-center gap-1.5 text-xs">
+          <Check className="h-3.5 w-3.5 text-green-500" /> Sent to {coderName}
+        </div>
+        {rec.sentText && <PromptBox text={rec.sentText} muted />}
+      </div>
+    );
+
+  if (draft !== null)
+    return (
+      <div className="space-y-2">
+        <Textarea
+          autoFocus
+          value={draft}
+          onChange={(e) => setDraft(e.target.value)}
+          aria-label="Prompt for the coding agent"
+          className="min-h-[160px]"
+        />
+        <div className="flex flex-wrap gap-2">
+          <Button
+            size="sm"
+            className="h-11 md:h-8"
+            disabled={busy || !draft.trim()}
+            onClick={() =>
+              send.mutate(
+                { recId: rec.id, text: draft.trim() },
+                { onError: fail, onSuccess: () => setDraft(null) }
+              )
+            }
+          >
+            <Send /> Send to Coding Agent
+          </Button>
+          <Button
+            size="sm"
+            variant="ghost"
+            className="h-11 md:h-8"
+            onClick={() => setDraft(null)}
+          >
+            Cancel
+          </Button>
+        </div>
+      </div>
+    );
+
+  return (
+    <div className="space-y-2">
+      {prompt && <PromptBox text={prompt} muted={rec.state !== "open"} />}
+      <div className="flex flex-wrap gap-2">
+        {view.canSend && (
+          <Button
+            size="sm"
+            className="h-11 md:h-8"
+            disabled={busy}
+            onClick={() => send.mutate({ recId: rec.id }, { onError: fail })}
+          >
+            {send.isPending ? <Loader2 className="animate-spin" /> : <Send />}
+            Send to Coding Agent
+          </Button>
+        )}
+        {view.canWrite && (
+          <Button
+            size="sm"
+            variant="outline"
+            className="h-11 md:h-8"
+            disabled={busy}
+            onClick={() => setDraft(prompt ?? "")}
+          >
+            {view.canSend ? "Edit" : "Ask coding agent anyway"}
+          </Button>
+        )}
+        {view.canAskAgain && (
+          <Button
+            size="sm"
+            variant="outline"
+            className="h-11 md:h-8"
+            disabled={busy}
+            onClick={() => again.mutate(rec.id, { onError: fail })}
+          >
+            <RotateCcw /> Ask again
+          </Button>
+        )}
+        {view.canDismiss && (
+          <Button
+            size="sm"
+            variant="ghost"
+            className="h-11 md:h-8"
+            disabled={busy}
+            onClick={() => dismiss.mutate(rec.id, { onError: fail })}
+          >
+            Dismiss
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}

package/components/Analyst/SignalChips.tsx

@@ -0,0 +1,39 @@
+import type { DigestSignals } from "@/lib/analyst/types";
+import { cn } from "@/lib/utils";
+
+const plural = (n: number, one: string) => `${n} ${one}${n === 1 ? "" : "s"}`;
+
+const shortCommand = (c: string) => (c.length > 40 ? `${c.slice(0, 39)}…` : c);
+
+/** What the reviewed turns did, read without a model: the facts under the card. */
+export function SignalChips({ signals: s }: { signals: DigestSignals }) {
+  const chips: { text: string; tone?: "good" | "bad" }[] = [];
+  chips.push({ text: plural(s.toolCalls, "tool call") });
+  if (s.filesChanged.length)
+    chips.push({ text: plural(s.filesChanged.length, "file") + " changed" });
+  for (const c of s.checks)
+    chips.push({
+      text: `${shortCommand(c.command)} ${c.passed ? "passed" : "failed"}`,
+      tone: c.passed ? "good" : "bad",
+    });
+  if (s.failedTools)
+    chips.push({ text: plural(s.failedTools, "failed tool"), tone: "bad" });
+  if (s.errors) chips.push({ text: plural(s.errors, "error"), tone: "bad" });
+  return (
+    <div className="flex flex-wrap gap-1.5">
+      {chips.map((c) => (
+        <span
+          key={c.text}
+          className={cn(
+            "bg-foreground/[0.05] text-muted-foreground max-w-full truncate rounded-md px-1.5 py-0.5 font-mono text-[11px]",
+            c.tone === "good" &&
+              "bg-green-500/10 text-green-700 dark:text-green-400",
+            c.tone === "bad" && "bg-red-500/10 text-red-700 dark:text-red-400"
+          )}
+        >
+          {c.text}
+        </span>
+      ))}
+    </div>
+  );
+}

package/components/Analyst/StartAnalystSheet.tsx

@@ -0,0 +1,109 @@
+"use client";
+
+import { useState } from "react";
+import { useSnapshot } from "valtio";
+import { Loader2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Switch } from "@/components/ui/switch";
+import { RoleModelSelect } from "@/components/Models/RoleModelSelect";
+import { analystUi, analystUiActions } from "@/stores/analystUi";
+import { useStartAnalystBeside } from "./pair";
+
+// Pairs an analyst with a chat: it reviews each turn the coding agent
+// finishes and recommends the next prompt, which the user sends or not.
+export function StartAnalystSheet() {
+  const ui = useSnapshot(analystUi);
+  return (
+    <Dialog open={ui.open} onOpenChange={(o) => !o && analystUiActions.close()}>
+      {ui.open && ui.sessionId && (
+        <StartAnalystForm
+          key={ui.sessionId}
+          sessionId={ui.sessionId}
+          name={ui.name}
+          paneId={ui.paneId}
+        />
+      )}
+    </Dialog>
+  );
+}
+
+function StartAnalystForm({
+  sessionId,
+  name,
+  paneId,
+}: {
+  sessionId: string;
+  name: string;
+  paneId: string | null;
+}) {
+  const [model, setModel] = useState<string | null>(null);
+  const [reviewLast, setReviewLast] = useState(false);
+  const start = useStartAnalystBeside();
+
+  return (
+    <DialogContent className="sm:max-w-[460px]">
+      <DialogHeader>
+        <DialogTitle>Add an analyst</DialogTitle>
+        <DialogDescription>
+          A second chat that reviews each turn of{" "}
+          <span className="text-foreground font-medium">{name}</span>, explains
+          it in plain English, flags issues and drafts the next prompt. Nothing
+          reaches the coding agent until you press Send.
+        </DialogDescription>
+      </DialogHeader>
+      <div className="space-y-1.5">
+        <label
+          htmlFor="analyst-model"
+          className="text-muted-foreground text-xs font-medium uppercase"
+        >
+          Analyst model
+        </label>
+        <RoleModelSelect
+          id="analyst-model"
+          value={model}
+          inheritLabel="The analyst role's model"
+          claudeOnly
+          onChange={setModel}
+        />
+      </div>
+      <label className="flex min-h-11 items-center justify-between gap-3 text-sm">
+        <span>Review the last turn now</span>
+        <Switch checked={reviewLast} onCheckedChange={setReviewLast} />
+      </label>
+      <div className="flex justify-end gap-2">
+        <Button
+          variant="ghost"
+          className="h-11 md:h-9"
+          onClick={() => analystUiActions.close()}
+        >
+          Cancel
+        </Button>
+        <Button
+          className="h-11 md:h-9"
+          disabled={start.isPending}
+          onClick={async () => {
+            const link = await start.run(
+              {
+                coderSessionId: sessionId,
+                analystModel: model ?? undefined,
+                reviewLast,
+              },
+              paneId ?? undefined
+            );
+            if (link) analystUiActions.close();
+          }}
+        >
+          {start.isPending && <Loader2 className="animate-spin" />}
+          Add analyst
+        </Button>
+      </div>
+    </DialogContent>
+  );
+}

package/components/Analyst/cardState.test.ts

@@ -0,0 +1,109 @@
+import { describe, expect, it } from "vitest";
+import type { DigestSignals, Recommendation } from "@/lib/analyst/types";
+import { cardView } from "./cardState";
+
+const signals = (over: Partial<DigestSignals> = {}): DigestSignals => ({
+  turns: 1,
+  toolCalls: 3,
+  failedTools: 0,
+  checks: [],
+  filesChanged: [],
+  durationMs: 1000,
+  costUsd: 0,
+  interrupted: false,
+  errors: 0,
+  noToolTurns: 0,
+  readWeb: false,
+  ...over,
+});
+
+const rec = (over: Partial<Recommendation> = {}): Recommendation => ({
+  id: "r1",
+  linkId: "l1",
+  analystItemId: "a1",
+  coderThrough: "t1",
+  verdict: "continue",
+  summary: "Did the thing",
+  issues: [],
+  signals: signals(),
+  prompt: "Run the tests",
+  state: "open",
+  error: null,
+  sentText: null,
+  sentItemId: null,
+  edited: false,
+  createdAt: 1,
+  decidedAt: null,
+  ...over,
+});
+
+describe("cardView", () => {
+  it("offers Send, Edit and Dismiss on an open card with a prompt", () => {
+    const v = cardView(rec(), "continue", "t1");
+    expect(v).toMatchObject({
+      label: "Next prompt",
+      canSend: true,
+      canWrite: true,
+      canDismiss: true,
+      canAskAgain: false,
+      notes: [],
+    });
+  });
+
+  it("is read-only without a stored card", () => {
+    const v = cardView(null, "continue", "t1");
+    expect(v.canSend || v.canWrite || v.canDismiss).toBe(false);
+  });
+
+  it("has no Send on a blocked or needs-you card, but lets the user write one", () => {
+    for (const verdict of ["blocked", "needs_you"] as const) {
+      const v = cardView(rec({ verdict }), verdict, "t1");
+      expect(v.canSend).toBe(false);
+      expect(v.canWrite).toBe(true);
+    }
+  });
+
+  it("warns when the coding agent has moved on", () => {
+    const v = cardView(rec(), "continue", "t2");
+    expect(v.canSend).toBe(true);
+    expect(v.notes).toContain(
+      "The coding agent has moved on since this review"
+    );
+  });
+
+  it("flags a turn with no tool calls and web reads", () => {
+    const v = cardView(
+      rec({ signals: signals({ noToolTurns: 1, readWeb: true }) }),
+      "continue",
+      "t1"
+    );
+    expect(v.notes).toEqual([
+      "The coding agent's turn ended without a single tool call",
+      "It read web content: check the prompt before sending",
+    ]);
+  });
+
+  it("offers Ask again on an invalid card, with its error", () => {
+    const v = cardView(
+      rec({ state: "invalid", error: "No block", verdict: null }),
+      null,
+      "t1"
+    );
+    expect(v).toMatchObject({
+      canAskAgain: true,
+      canSend: false,
+      notes: ["No block"],
+    });
+  });
+
+  it("is settled once sent, dismissed or superseded", () => {
+    for (const state of ["sent", "dismissed", "superseded"] as const) {
+      const v = cardView(rec({ state }), "continue", "t2");
+      expect(v.canSend || v.canWrite || v.canDismiss).toBe(false);
+      expect(v.notes).toEqual([]);
+    }
+    expect(
+      cardView(rec({ state: "sent", edited: true }), "continue", "t1").label
+    ).toBe("Sent, edited");
+  });
+});

package/components/Analyst/cardState.ts

@@ -0,0 +1,95 @@
+import type { Recommendation, Verdict } from "@/lib/analyst/types";
+
+export type CardTone = "primary" | "green" | "amber" | "red" | "muted";
+
+export interface CardView {
+  label: string;
+  tone: CardTone;
+  // Send the prompt as written (or edited).
+  canSend: boolean;
+  // A blocked or needs-you card has no Send; the user can still write one.
+  canWrite: boolean;
+  canDismiss: boolean;
+  canAskAgain: boolean;
+  // Why to look twice before sending, or what happened to it.
+  notes: string[];
+}
+
+const VERDICT_LABEL: Record<Verdict, [string, CardTone]> = {
+  continue: ["Next prompt", "primary"],
+  done: ["Looks done", "green"],
+  blocked: ["Blocked", "red"],
+  needs_you: ["Needs you", "amber"],
+};
+
+const plural = (n: number, one: string) => `${n} ${one}${n === 1 ? "" : "s"}`;
+
+/**
+ * What a review card shows and offers. `rec` is the stored card for the
+ * block, or null when there is none (an old review, an ended pairing): then
+ * it's read-only.
+ */
+export function cardView(
+  rec: Recommendation | null,
+  verdict: Verdict | null,
+  coderLastTurn: string | null
+): CardView {
+  const [vLabel, vTone] = verdict
+    ? VERDICT_LABEL[verdict]
+    : (["Review", "muted"] as const);
+  const view: CardView = {
+    label: vLabel,
+    tone: vTone,
+    canSend: false,
+    canWrite: false,
+    canDismiss: false,
+    canAskAgain: false,
+    notes: [],
+  };
+  if (!rec) return view;
+
+  const s = rec.signals;
+  if (s?.noToolTurns && s.noToolTurns === s.turns)
+    view.notes.push(
+      s.turns === 1
+        ? "The coding agent's turn ended without a single tool call"
+        : `None of the ${plural(s.turns, "turn")} made a tool call`
+    );
+  if (s?.interrupted) view.notes.push("The coding agent was interrupted");
+
+  switch (rec.state) {
+    case "sent":
+      return {
+        ...view,
+        label: rec.edited ? "Sent, edited" : "Sent",
+        tone: "muted",
+        notes: [],
+      };
+    case "dismissed":
+      return { ...view, label: "Dismissed", tone: "muted", notes: [] };
+    case "superseded":
+      return { ...view, label: "Superseded", tone: "muted", notes: [] };
+    case "invalid":
+      return {
+        ...view,
+        label: "Couldn't read",
+        tone: "red",
+        canAskAgain: true,
+        canDismiss: true,
+        notes: [rec.error || "The review block was invalid"],
+      };
+  }
+
+  // Open.
+  if (rec.coderThrough && coderLastTurn && rec.coderThrough !== coderLastTurn)
+    view.notes.push("The coding agent has moved on since this review");
+  if (s?.readWeb)
+    view.notes.push("It read web content: check the prompt before sending");
+  const sendable = verdict === "continue" || verdict === "done";
+  return {
+    ...view,
+    canSend: sendable && !!rec.prompt,
+    canWrite: true,
+    canDismiss: true,
+  };
+}