@saadnvd1/agent-os 0.3.723 → 0.3.731

package/components/Analyst/PairChip.tsx

@@ -0,0 +1,131 @@
+"use client";
+
+import { toast } from "sonner";
+import { Eye, Loader2 } from "lucide-react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { usePanes } from "@/contexts/PaneContext";
+import {
+  useAskAgain,
+  useEndAnalyst,
+  useReviewNow,
+  useSessionAnalyst,
+  useSetAnalystPaused,
+} from "@/data/analyst";
+import type { Session } from "@/lib/db";
+import { cn } from "@/lib/utils";
+import {
+  PAIR_STATUS_LABEL,
+  pairStatus,
+  partnerOf,
+  paneTmux,
+  type PairStatus,
+} from "./pair";
+
+const DOT: Record<PairStatus, string> = {
+  paused: "bg-muted-foreground/50",
+  reviewing: "bg-primary animate-pulse",
+  recommendation: "bg-primary",
+  watching: "bg-green-500",
+};
+
+const fail = (e: Error) => toast.error(e.message);
+
+// A paired chat's link to the other side, with the pairing's controls.
+// Nothing for a session that isn't paired.
+export function PairChip({
+  session,
+  paneId,
+}: {
+  session: Session | null | undefined;
+  paneId: string;
+}) {
+  const { data: link } = useSessionAnalyst(
+    session?.view === "chat" ? session.id : undefined
+  );
+  const { openBeside } = usePanes();
+  const id = link?.id ?? "";
+  const review = useReviewNow(id);
+  const pause = useSetAnalystPaused(id);
+  const end = useEndAnalyst(id);
+  const again = useAskAgain(id);
+  if (!session || !link || link.endedAt) return null;
+
+  const status = pairStatus(link);
+  const isCoder = link.coder.id === session.id;
+  const partner = partnerOf(link, session.id);
+  const latest = link.recommendations[0];
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <button
+          type="button"
+          onClick={(e) => e.stopPropagation()}
+          title={PAIR_STATUS_LABEL[status]}
+          aria-label={`${isCoder ? "Analyst" : "Reviewing"} ${partner.name}: ${PAIR_STATUS_LABEL[status]}`}
+          className="ring-border/70 bg-muted/60 hover:bg-accent flex h-7 max-w-56 shrink-0 items-center gap-1.5 rounded-full px-2.5 text-xs ring-1 ring-inset"
+        >
+          <Eye className="text-muted-foreground h-3.5 w-3.5 shrink-0" />
+          <span className="truncate">
+            {isCoder ? "Analyst" : "Coding agent"}
+          </span>
+          <span
+            className={cn("h-1.5 w-1.5 shrink-0 rounded-full", DOT[status])}
+          />
+        </button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start" className="w-60">
+        <DropdownMenuLabel className="space-y-0.5">
+          <div className="text-muted-foreground text-[11px] font-normal">
+            {isCoder ? "Reviewed by" : "Reviewing"} ·{" "}
+            {PAIR_STATUS_LABEL[status]}
+          </div>
+          <div className="truncate text-sm">{partner.name}</div>
+        </DropdownMenuLabel>
+        <DropdownMenuItem
+          onSelect={() =>
+            openBeside(paneId, {
+              sessionId: partner.id,
+              tmux: paneTmux(partner),
+            })
+          }
+        >
+          Open {isCoder ? "analyst" : "coding agent"} beside
+        </DropdownMenuItem>
+        <DropdownMenuItem
+          disabled={review.isPending || !!link.pendingDigestId}
+          onSelect={() => review.mutate(undefined, { onError: fail })}
+        >
+          {review.isPending && <Loader2 className="animate-spin" />}
+          {link.pendingDigestId ? "Reviewing…" : "Review now"}
+        </DropdownMenuItem>
+        {latest?.state === "invalid" && (
+          <DropdownMenuItem
+            onSelect={() => again.mutate(latest.id, { onError: fail })}
+          >
+            Ask for the review again
+          </DropdownMenuItem>
+        )}
+        <DropdownMenuItem
+          onSelect={() => pause.mutate(!link.paused, { onError: fail })}
+        >
+          {link.paused ? "Resume reviews" : "Pause reviews"}
+        </DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem
+          variant="destructive"
+          onSelect={() => end.mutate(true, { onError: fail })}
+        >
+          Unlink and finish the analyst
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

package/components/Analyst/PairSwitch.tsx

@@ -0,0 +1,76 @@
+"use client";
+
+import { usePanes } from "@/contexts/PaneContext";
+import { useSessionAnalyst } from "@/data/analyst";
+import type { Session } from "@/lib/db";
+import { cn } from "@/lib/utils";
+import { PAIR_STATUS_LABEL, pairStatus, paneTmux } from "./pair";
+
+// A phone shows one pane: a paired chat switches between its two sides
+// here, with a dot on the analyst while a recommendation waits.
+export function PairSwitch({
+  session,
+  paneId,
+}: {
+  session: Session | null | undefined;
+  paneId: string;
+}) {
+  const { data: link } = useSessionAnalyst(
+    session?.view === "chat" ? session.id : undefined
+  );
+  const { attachSession } = usePanes();
+  if (!session || !link || link.endedAt) return null;
+
+  const status = pairStatus(link);
+  const sides = [
+    { side: link.coder, label: "Coding agent", note: null },
+    {
+      side: link.analyst,
+      label: "Analyst",
+      note: PAIR_STATUS_LABEL[status],
+    },
+  ];
+
+  return (
+    <div
+      role="tablist"
+      aria-label="Paired sessions"
+      className="bg-muted grid grid-cols-2 gap-1 px-2 pb-1.5"
+      onClick={(e) => e.stopPropagation()}
+    >
+      {sides.map(({ side, label, note }) => {
+        const active = side.id === session.id;
+        return (
+          <button
+            key={side.id}
+            type="button"
+            role="tab"
+            aria-selected={active}
+            onClick={() =>
+              !active && attachSession(paneId, side.id, paneTmux(side))
+            }
+            className={cn(
+              "flex h-11 min-w-0 items-center justify-center gap-1.5 rounded-lg text-sm",
+              active
+                ? "bg-background text-foreground font-medium shadow-sm"
+                : "text-muted-foreground"
+            )}
+          >
+            <span className="truncate">{label}</span>
+            {note && status === "recommendation" && !active && (
+              <span
+                aria-label="Recommendation waiting"
+                className="bg-primary h-2 w-2 shrink-0 rounded-full"
+              />
+            )}
+            {note && (
+              <span className="text-muted-foreground shrink-0 text-xs font-normal">
+                {note}
+              </span>
+            )}
+          </button>
+        );
+      })}
+    </div>
+  );
+}

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