@saadnvd1/agent-os 0.3.715 → 0.3.728

package/components/Pane/index.tsx

@@ -16,6 +16,7 @@ import { cn } from "@/lib/utils";
 import { ConductorPanel } from "@/components/ConductorPanel";
 import { useFileEditor } from "@/hooks/useFileEditor";
 import { MobileTabBar } from "./MobileTabBar";
+import { PairSwitch } from "@/components/Analyst/PairSwitch";
 import { openFind } from "@/components/Chat/useFind";
 import { DesktopTabBar } from "./DesktopTabBar";
 import {
@@ -46,6 +47,10 @@ const ArtifactsPanel = dynamic(
     ),
   { ssr: false }
 );
+const ReportView = dynamic(
+  () => import("@/components/Report/ReportView").then((mod) => mod.ReportView),
+  { ssr: false }
+);
 const LogDocument = dynamic(
   () =>
     import("@/components/SessionLogs/LogDocument").then(
@@ -215,6 +220,7 @@ export const Pane = memo(function Pane({
     !!session?.task_prompt &&
     (session.task_status === "merged" || session.pr_status === "merged");
   const hasLog = !!useTaskLogQuery(session?.id, merged).data;
+  const hasReport = !!session?.task_prompt;
 
   // Get current project and its repositories
   const currentProject = useMemo(() => {
@@ -471,6 +477,7 @@ export const Pane = memo(function Pane({
           viewMode={viewMode}
           isConductor={isConductor}
           hasLog={hasLog}
+          hasReport={hasReport}
           workerCount={workerCount}
           showGit={showGit}
           onMenuClick={onMenuClick}
@@ -494,6 +501,7 @@ export const Pane = memo(function Pane({
           isFocused={isFocused}
           isConductor={isConductor}
           hasLog={hasLog}
+          hasReport={hasReport}
           workerCount={workerCount}
           canSplit={canSplit}
           canClose={canClose}
@@ -514,6 +522,7 @@ export const Pane = memo(function Pane({
           bookmarksSessionId={bookmarksSessionId}
         />
       )}
+      {isMobile && <PairSwitch session={session} paneId={paneId} />}
 
       {/* Content Area - Mobile: simple flex, Desktop: resizable panels */}
       {isMobile ? (
@@ -558,6 +567,11 @@ export const Pane = memo(function Pane({
             </div>
           )}
 
+          {/* Report */}
+          {viewMode === "report" && session && (
+            <ReportView sessionId={session.id} name={session.name} />
+          )}
+
           {/* Log */}
           {viewMode === "log" && session && (
             <LogDocument sessionId={session.id} />
@@ -629,6 +643,11 @@ export const Pane = memo(function Pane({
                     </div>
                   )}
 
+                  {/* Report */}
+                  {viewMode === "report" && session && (
+                    <ReportView sessionId={session.id} name={session.name} />
+                  )}
+
                   {/* Log */}
                   {viewMode === "log" && session && (
                     <LogDocument sessionId={session.id} />

package/components/Report/DraftCard.tsx

@@ -0,0 +1,89 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Textarea } from "@/components/ui/textarea";
+import { useReportDraft } from "@/data/reports";
+import type { NextPromptDraft } from "@/lib/reports/types";
+
+// The analyst's drafted next prompt, shown in full. Approve & send is the one
+// click; nothing is sent without it.
+export function DraftCard({
+  sessionId,
+  draft,
+}: {
+  sessionId: string;
+  draft: NextPromptDraft;
+}) {
+  const act = useReportDraft(sessionId);
+  const [editing, setEditing] = useState(false);
+  const [text, setText] = useState(draft.text);
+  const ref = { source: draft.source, id: draft.id, linkId: draft.linkId };
+  const decided = draft.status !== "pending";
+
+  if (decided)
+    return (
+      <p className="text-muted-foreground bg-muted/40 rounded-lg px-3 py-2 text-sm">
+        {draft.status === "sent"
+          ? "Sent to the coding agent."
+          : draft.status === "dismissed"
+            ? "Draft dismissed."
+            : "A newer report replaced this draft."}
+      </p>
+    );
+
+  return (
+    <section
+      aria-label="Drafted next prompt"
+      className="bg-card space-y-3 rounded-xl p-4 shadow-sm"
+    >
+      <h3 className="text-sm font-semibold">Drafted next prompt</h3>
+      {editing ? (
+        <Textarea
+          value={text}
+          onChange={(e) => setText(e.target.value)}
+          rows={6}
+          aria-label="Edit the prompt"
+        />
+      ) : (
+        <p className="bg-muted/50 rounded-lg p-3 text-sm whitespace-pre-wrap">
+          {draft.text}
+        </p>
+      )}
+      {act.isError && (
+        <p className="text-destructive text-sm">{act.error.message}</p>
+      )}
+      <div className="flex flex-wrap gap-2">
+        <Button
+          className="min-h-11 flex-1"
+          disabled={act.isPending || !text.trim()}
+          onClick={() =>
+            act.mutate({
+              ...ref,
+              action: "send",
+              text: editing ? text : undefined,
+            })
+          }
+        >
+          Approve &amp; send
+        </Button>
+        <Button
+          variant="secondary"
+          className="min-h-11"
+          disabled={act.isPending}
+          onClick={() => setEditing((e) => !e)}
+        >
+          {editing ? "Cancel edit" : "Edit"}
+        </Button>
+        <Button
+          variant="ghost"
+          className="min-h-11"
+          disabled={act.isPending}
+          onClick={() => act.mutate({ ...ref, action: "dismiss" })}
+        >
+          Dismiss
+        </Button>
+      </div>
+    </section>
+  );
+}

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/SessionRow.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { AGENT_ROLE_DEFS, isAgentRole } from "@/lib/models/agent-roles";
 import { isFork } from "@/lib/sessions/fork";
 import { memo, useState } from "react";
 import { useSnapshot } from "valtio";
@@ -126,14 +127,24 @@ export const SessionRow = memo(function SessionRow({
             }}
           />
         ) : (
-          <span
-            className={cn(
-              "truncate text-sm",
-              muted && !active ? "text-muted-foreground" : "text-foreground",
-              active && "font-medium"
+          <span className="flex min-w-0 items-center gap-1.5">
+            {isAgentRole(session.agent_role) && (
+              <span
+                title={AGENT_ROLE_DEFS[session.agent_role].label}
+                className="bg-accent text-primary grid h-4 w-4 shrink-0 place-items-center rounded text-[10px] font-semibold"
+              >
+                {AGENT_ROLE_DEFS[session.agent_role].label[0]}
+              </span>
             )}
-          >
-            {session.name}
+            <span
+              className={cn(
+                "truncate text-sm",
+                muted && !active ? "text-muted-foreground" : "text-foreground",
+                active && "font-medium"
+              )}
+            >
+              {session.name}
+            </span>
           </span>
         )}
         <RowSubtitle