@saadnvd1/agent-os 0.3.723 → 0.3.731

package/components/Pane/PaneMenu.tsx

@@ -12,6 +12,7 @@ import {
   SplitSquareHorizontal,
   SplitSquareVertical,
   Star,
+  Eye,
   Unplug,
   X,
 } from "lucide-react";
@@ -29,6 +30,8 @@ import { copySessionLink, writeClipboard } from "@/hooks/useCopyToClipboard";
 import type { Session } from "@/lib/db";
 import { shareUiActions } from "@/stores/shareUi";
 import { exportUiActions } from "@/stores/exportUi";
+import { analystUiActions } from "@/stores/analystUi";
+import { useCanAddAnalyst } from "@/components/Analyst/pair";
 import { useSessionBookmarks } from "@/data/bookmarks";
 import { useDocsWorkspace } from "@/data/lumifyhub/docs";
 import { bookmarksUiActions } from "@/stores/bookmarksUi";
@@ -38,6 +41,7 @@ import { MoveMenuItems } from "@/components/Tasks/MoveMenuItems";
 
 interface PaneMenuProps {
   session: Session | null | undefined;
+  paneId?: string;
   // The chat on show, for its bookmarks; null for a terminal or another view.
   bookmarksSessionId?: string | null;
   canSplit: boolean;
@@ -53,6 +57,7 @@ interface PaneMenuProps {
 // the bar.
 export function PaneMenu({
   session,
+  paneId,
   bookmarksSessionId,
   canSplit,
   canClose,
@@ -64,6 +69,7 @@ export function PaneMenu({
 }: PaneMenuProps) {
   const { data: bookmarks = [] } = useSessionBookmarks(bookmarksSessionId);
   const docs = useDocsWorkspace(session?.project_id);
+  const canAddAnalyst = useCanAddAnalyst(session);
   const copyId = async (id: string) => {
     try {
       await writeClipboard(id);
@@ -127,6 +133,16 @@ export function PaneMenu({
                 Export for AI…
               </DropdownMenuItem>
             )}
+            {canAddAnalyst && session && (
+              <DropdownMenuItem
+                onSelect={() =>
+                  analystUiActions.open(session.id, session.name, paneId)
+                }
+              >
+                <Eye className="h-4 w-4" />
+                Add analyst…
+              </DropdownMenuItem>
+            )}
             <DropdownMenuSeparator />
             <MoveMenuItems
               session={session}

package/components/Pane/PaneViewToggle.tsx

@@ -6,6 +6,7 @@ import {
   Home,
   Package,
   ScrollText,
+  ClipboardList,
   Users,
 } from "lucide-react";
 import {
@@ -27,6 +28,7 @@ interface PaneViewToggleProps {
   isConductor: boolean;
   // The task merged and has a log.
   hasLog?: boolean;
+  hasReport?: boolean;
   workerCount: number;
   gitDrawerOpen: boolean;
   shellDrawerOpen: boolean;
@@ -85,6 +87,7 @@ export function PaneViewToggle({
   showGit,
   isConductor,
   hasLog,
+  hasReport,
   workerCount,
   gitDrawerOpen,
   shellDrawerOpen,
@@ -138,6 +141,15 @@ export function PaneViewToggle({
           <Package className="h-3.5 w-3.5" />
         </ToggleButton>
       )}
+      {hasReport && (
+        <ToggleButton
+          label="Report"
+          active={viewMode === "report"}
+          onClick={() => onViewModeChange("report")}
+        >
+          <ClipboardList className="h-3.5 w-3.5" />
+        </ToggleButton>
+      )}
       {hasLog && (
         <ToggleButton
           label="Log"

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