@saadnvd1/agent-os 0.3.821 → 0.3.825

package/components/Chat/Forks.tsx

@@ -0,0 +1,278 @@
+"use client";
+
+import { useState } from "react";
+import { GitFork, Plus, Square } from "lucide-react";
+import { toast } from "sonner";
+import { useExperiment } from "@/data/experiments";
+import { useClientConfig } from "@/data/client-config/queries";
+import {
+  useCancelForks,
+  useForkChildren,
+  useStartForks,
+  type ChildView,
+} from "@/data/fork";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { StatusPill } from "@/components/ui/status-pill";
+import { Switch } from "@/components/ui/switch";
+import { Textarea } from "@/components/ui/textarea";
+import { SessionAnchor } from "./SessionAnchor";
+
+type Tone = "amber" | "muted" | "green" | "primary" | "red";
+
+export function stateLabel(c: ChildView): { text: string; tone: Tone } {
+  if (c.state === "queued") return { text: "Waiting", tone: "muted" };
+  if (c.state === "starting") return { text: "Starting", tone: "muted" };
+  if (c.state === "running") return { text: "Working", tone: "primary" };
+  if (c.state === "needs_input") return { text: "Needs you", tone: "amber" };
+  if (c.outcome === "failed") return { text: "Failed", tone: "red" };
+  if (c.outcome === "cancelled") return { text: "Stopped", tone: "muted" };
+  return { text: "Done", tone: "green" };
+}
+
+function Row({
+  c,
+  onStop,
+  stopping,
+}: {
+  c: ChildView;
+  onStop: () => void;
+  stopping: boolean;
+}) {
+  const { text, tone } = stateLabel(c);
+  const open = c.state !== "settled";
+  const note =
+    c.summary ??
+    (c.asks
+      ? `Asks: ${c.asks}`
+      : c.state === "queued"
+        ? "Waiting for room"
+        : null);
+  return (
+    <li className="flex min-h-11 items-center gap-2 px-3 py-1.5">
+      <StatusPill tone={tone} className="shrink-0">
+        {text}
+      </StatusPill>
+      <div className="min-w-0 flex-1">
+        <p className="truncate text-sm font-medium">
+          {c.n}. {c.label.replace(/^\d+\.\s*/, "")}
+        </p>
+        {note && (
+          <p className="text-muted-foreground truncate text-xs">
+            {note}
+            {c.resultKind === "implicit" && c.outcome === "ok"
+              ? " · ended without reporting"
+              : ""}
+          </p>
+        )}
+      </div>
+      <SessionAnchor
+        sessionId={c.id}
+        className="text-primary flex min-h-11 shrink-0 items-center px-2 text-sm"
+      >
+        Open
+      </SessionAnchor>
+      {open && (
+        <Button
+          size="sm"
+          variant="ghost"
+          aria-label={`Stop fork ${c.n}`}
+          className="size-11 shrink-0"
+          disabled={stopping}
+          onClick={onStop}
+        >
+          <Square aria-hidden className="size-4" />
+        </Button>
+      )}
+    </li>
+  );
+}
+
+// Above the composer: this session's forks and where each stands.
+export function ForksStrip({ sessionId }: { sessionId: string }) {
+  const on = useExperiment("forks");
+  const { data } = useForkChildren(sessionId, on);
+  const cancel = useCancelForks(sessionId);
+  const [collapsed, setCollapsed] = useState(false);
+  if (!on || !data) return null;
+  if (data.asChild) return <ForkOfBanner info={data.asChild} />;
+  const { children } = data;
+  if (!children.length) return null;
+  const open = children.filter((c) => c.state !== "settled").length;
+  const stop = (ref?: string) =>
+    cancel.mutate(ref ? { ref } : { all: true }, {
+      onError: (e) => toast.error(e.message),
+    });
+  return (
+    <section
+      aria-label="Forks"
+      className="bg-card popover-surface mb-2 overflow-hidden rounded-2xl"
+    >
+      <div className="flex min-h-11 items-center gap-2 px-3">
+        <GitFork
+          aria-hidden
+          className="text-muted-foreground size-4 shrink-0"
+        />
+        <button
+          type="button"
+          aria-expanded={!collapsed}
+          onClick={() => setCollapsed((v) => !v)}
+          className="min-h-11 min-w-0 flex-1 text-left text-sm font-medium"
+        >
+          Forks
+          <span className="text-muted-foreground ml-2 font-normal">
+            {open ? `${open} working` : "all done"} · {children.length} total
+          </span>
+        </button>
+        {open > 0 && (
+          <Button
+            size="sm"
+            variant="ghost"
+            className="min-h-11"
+            disabled={cancel.isPending}
+            onClick={() => stop()}
+          >
+            Stop all
+          </Button>
+        )}
+      </div>
+      {!collapsed && (
+        <ul className="border-border max-h-60 divide-y overflow-y-auto border-t">
+          {children.map((c) => (
+            <Row
+              key={c.id}
+              c={c}
+              stopping={cancel.isPending}
+              onStop={() => stop(String(c.n))}
+            />
+          ))}
+        </ul>
+      )}
+    </section>
+  );
+}
+
+function ForkOfBanner({
+  info,
+}: {
+  info: NonNullable<
+    NonNullable<ReturnType<typeof useForkChildren>["data"]>["asChild"]
+  >;
+}) {
+  return (
+    <section
+      aria-label="Fork of"
+      className="bg-card popover-surface mb-2 flex min-h-11 items-center gap-2 rounded-2xl px-3 py-1.5"
+    >
+      <GitFork aria-hidden className="text-muted-foreground size-4 shrink-0" />
+      <p className="min-w-0 flex-1 text-sm">
+        Fork {info.n} of{" "}
+        <SessionAnchor sessionId={info.parentId} className="text-primary">
+          {info.parentName}
+        </SessionAnchor>
+        <span className="text-muted-foreground block text-xs">
+          {info.worktree
+            ? "Works in its own checkout. "
+            : "Reads the parent's checkout, doesn't change it. "}
+          Finishes with a result for the parent.
+        </span>
+      </p>
+    </section>
+  );
+}
+
+// "/fork": instructions for N copies of this session.
+export function ForkDialog({
+  sessionId,
+  open,
+  onOpenChange,
+}: {
+  sessionId: string;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}) {
+  const start = useStartForks(sessionId);
+  const max = useClientConfig().data?.forks?.maxPerFork ?? 8;
+  const [texts, setTexts] = useState<string[]>([""]);
+  const [worktree, setWorktree] = useState(false);
+  const filled = texts.map((t) => t.trim()).filter(Boolean);
+  const submit = () =>
+    start.mutate(
+      { instructions: filled, worktree },
+      {
+        onSuccess: (r) => {
+          toast.success(
+            `Started ${r.children.length} ${r.children.length === 1 ? "fork" : "forks"}`
+          );
+          setTexts([""]);
+          setWorktree(false);
+          onOpenChange(false);
+        },
+        onError: (e) => toast.error(e.message),
+      }
+    );
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-h-[90dvh] overflow-y-auto sm:max-w-lg">
+        <DialogHeader>
+          <DialogTitle>Fork this session</DialogTitle>
+          <DialogDescription>
+            Each copy knows what this session knows and works in the background.
+            You keep going; results are added to your next message.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="space-y-2">
+          {texts.map((t, i) => (
+            <Textarea
+              key={i}
+              value={t}
+              rows={2}
+              aria-label={`Fork ${i + 1}`}
+              placeholder={`What should fork ${i + 1} do?`}
+              onChange={(e) =>
+                setTexts(texts.map((x, j) => (j === i ? e.target.value : x)))
+              }
+            />
+          ))}
+          {texts.length < max && (
+            <Button
+              type="button"
+              variant="ghost"
+              size="sm"
+              className="min-h-11"
+              onClick={() => setTexts([...texts, ""])}
+            >
+              <Plus aria-hidden className="size-4" /> Another
+            </Button>
+          )}
+          <label className="flex min-h-11 items-center justify-between gap-3 text-sm">
+            <span>
+              Own checkout
+              <span className="text-muted-foreground block text-xs">
+                For forks that edit code. Off: they read this checkout and leave
+                it alone.
+              </span>
+            </span>
+            <Switch checked={worktree} onCheckedChange={setWorktree} />
+          </label>
+        </div>
+        <DialogFooter>
+          <Button
+            className="min-h-11"
+            disabled={!filled.length || start.isPending}
+            onClick={submit}
+          >
+            {filled.length > 1 ? `Start ${filled.length} forks` : "Start fork"}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/components/Chat/ReplyingTo.tsx

@@ -0,0 +1,24 @@
+"use client";
+
+// Above the composer while it answers a question from the orchestrator's strip.
+export function ReplyingTo({
+  text,
+  onStop,
+}: {
+  text: string;
+  onStop: () => void;
+}) {
+  return (
+    <div className="text-muted-foreground mb-2 flex min-h-11 items-center gap-2 rounded-lg px-2 text-xs">
+      <span className="min-w-0 flex-1 truncate">Answering: {text}</span>
+      <button
+        type="button"
+        onClick={onStop}
+        aria-label="Stop answering"
+        className="hover:text-foreground flex size-11 shrink-0 items-center justify-center"
+      >
+        ×
+      </button>
+    </div>
+  );
+}

package/components/Chat/TimelineRows.tsx

@@ -0,0 +1,194 @@
+"use client";
+
+import type { StepCounts } from "@/lib/chat/tool-outcome";
+import { Fragment, memo, useMemo } from "react";
+import {
+  groupTimeline,
+  sameBlock,
+  STANDALONE_TOOLS,
+  type TimelineBlock,
+} from "@/lib/chat/group";
+import type { ApprovalDecision, ChatItem } from "@/lib/chat/events";
+import { Approval } from "./Approval";
+import { SubagentCard } from "./Subagent";
+import { UndoneBlock } from "./Undo";
+import { ToolGroup } from "./Tools";
+import { McpServers } from "./McpServers";
+import { ArtifactCard } from "./Artifact";
+import { PlanCard } from "./PlanCard";
+import { UserTurn } from "./EventRow";
+import { EventGroup } from "./EventTurns";
+import { NewDivider } from "./NewDivider";
+import {
+  AssistantMessage,
+  CommandOutput,
+  Compacted,
+  SkillChip,
+  ErrorMessage,
+  NoteLine,
+  Reasoning,
+  Todos,
+  TurnEnd,
+} from "./Messages";
+
+export interface ItemActions {
+  respond: (id: string, answer: ApprovalDecision) => void;
+  // Absent inside undone messages; hidden while the agent works (ChatIdle).
+  onCarryPlan?: (id: string) => void;
+  onKeepPlanning?: () => void;
+  // Absent inside undone messages; hidden while the agent works (ChatIdle).
+  onUndo?: (id: string) => void;
+  onQuote?: (text: string) => void;
+}
+
+function Item({
+  item,
+  actions,
+  steps,
+}: {
+  item: ChatItem;
+  actions: ItemActions;
+  steps?: StepCounts;
+}) {
+  switch (item.kind) {
+    case "user":
+      return (
+        <UserTurn
+          item={item}
+          onUndo={
+            item.checkpoint && actions.onUndo
+              ? () => actions.onUndo?.(item.id)
+              : undefined
+          }
+        />
+      );
+    case "assistant":
+      return <AssistantMessage item={item} onQuote={actions.onQuote} />;
+    case "reasoning":
+      return <Reasoning item={item} />;
+    case "todos":
+      return <Todos item={item} />;
+    case "turn_end":
+      return <TurnEnd item={item} steps={steps} />;
+    case "error":
+      return <ErrorMessage item={item} />;
+    case "command_output":
+      return <CommandOutput item={item} />;
+    case "mcp":
+      return <McpServers item={item} />;
+    case "compacted":
+      return <Compacted item={item} />;
+    case "note":
+      return <NoteLine item={item} />;
+    case "artifact":
+      return <ArtifactCard item={item} />;
+    case "approval":
+      return <Approval item={item} respond={actions.respond} />;
+    case "plan":
+      return (
+        <PlanCard
+          item={item}
+          onCarryOut={
+            actions.onCarryPlan
+              ? () => actions.onCarryPlan?.(item.id)
+              : undefined
+          }
+          onKeepPlanning={() => actions.onKeepPlanning?.()}
+        />
+      );
+    case "tool":
+      return item.name === "Skill" ? (
+        <SkillChip item={item} />
+      ) : STANDALONE_TOOLS.has(item.name) ? (
+        <SubagentCard item={item} />
+      ) : null;
+    default:
+      return null;
+  }
+}
+
+function Timeline({
+  blocks,
+  actions,
+}: {
+  blocks: TimelineBlock[];
+  actions: ItemActions;
+}) {
+  return blocks.map((b) => (
+    <Block
+      key={b.type === "item" ? b.item.id : b.id}
+      block={b}
+      actions={actions}
+    />
+  ));
+}
+
+const blockKey = (b: TimelineBlock) => (b.type === "item" ? b.item.id : b.id);
+
+// One block, re-rendered only when its items or the actions change: a long
+// conversation doesn't redraw every message for each streamed word.
+const Block = memo(
+  function Block({
+    block: b,
+    actions,
+  }: {
+    block: TimelineBlock;
+    actions: ItemActions;
+  }) {
+    const respond = actions.respond;
+    const undoneActions = useMemo(
+      () => ({ respond, onQuote: actions.onQuote }),
+      [respond, actions.onQuote]
+    );
+    return b.type === "tools" ? (
+      <ToolGroup tools={b.tools} />
+    ) : b.type === "events" ? (
+      <EventGroup
+        id={b.id}
+        turns={b.turns}
+        renderReplies={(items) => (
+          <Timeline blocks={groupTimeline(items)} actions={undoneActions} />
+        )}
+      />
+    ) : b.type === "undone" ? (
+      <UndoneBlock
+        undo={b.undo}
+        count={b.items.filter((i) => i.kind === "user").length}
+      >
+        <Timeline blocks={groupTimeline(b.items)} actions={undoneActions} />
+      </UndoneBlock>
+    ) : (
+      <div data-item={b.item.id}>
+        <Item item={b.item} actions={actions} steps={b.steps} />
+      </div>
+    );
+  },
+  (prev, next) =>
+    prev.actions === next.actions && sameBlock(prev.block, next.block)
+);
+
+// The conversation's rows in the page's flow, not a virtualized list: a
+// selection follows the DOM, and a list that recycles and re-orders its rows
+// breaks it (docs/decisions/2026-10-11-chat-timeline-in-flow.md).
+export function TimelineRows({
+  blocks,
+  actions,
+  newFrom,
+}: {
+  blocks: TimelineBlock[];
+  actions: ItemActions;
+  // The block the reader hasn't seen yet begins at, when they were away.
+  newFrom?: string | null;
+}) {
+  return blocks.map((b) => (
+    <Fragment key={blockKey(b)}>
+      {newFrom === blockKey(b) && <NewDivider />}
+      <div
+        data-block={blockKey(b)}
+        className="chat-row mx-auto w-full max-w-3xl px-4 pb-4"
+      >
+        <Block block={b} actions={actions} />
+      </div>
+    </Fragment>
+  ));
+}

package/components/Pane/DesktopTabBar.tsx

@@ -36,10 +36,8 @@ interface DesktopTabBarProps {
   sessions: Session[];
   viewMode: ViewMode;
   isFocused: boolean;
-  isConductor: boolean;
   hasLog?: boolean;
   hasReport?: boolean;
-  workerCount: number;
   canSplit: boolean;
   canClose: boolean;
   hasAttachedTmux: boolean;
@@ -68,10 +66,8 @@ export function DesktopTabBar({
   sessions,
   viewMode,
   isFocused,
-  isConductor,
   hasLog,
   hasReport,
-  workerCount,
   canSplit,
   canClose,
   hasAttachedTmux,
@@ -184,10 +180,8 @@ export function DesktopTabBar({
             isChat={session.view === "chat"}
             viewMode={viewMode}
             isLocalSession={isLocalSession}
-            isConductor={isConductor}
             hasLog={hasLog}
             hasReport={hasReport}
-            workerCount={workerCount}
             showGit={showGit}
             gitDrawerOpen={gitDrawerOpen}
             shellDrawerOpen={shellDrawerOpen}

package/components/Pane/MobileTabBar.tsx

@@ -54,10 +54,8 @@ interface MobileTabBarProps {
   sessions: Session[];
   projects: Project[];
   viewMode: ViewMode;
-  isConductor: boolean;
   hasLog?: boolean;
   hasReport?: boolean;
-  workerCount: number;
   // Local, and the folder is not known to be outside a git repository.
   showGit: boolean;
   onMenuClick?: () => void;
@@ -75,10 +73,8 @@ export function MobileTabBar({
   sessions,
   projects,
   viewMode,
-  isConductor,
   hasLog,
   hasReport,
-  workerCount,
   showGit,
   onMenuClick,
   onViewModeChange,
@@ -403,8 +399,6 @@ export function MobileTabBar({
           showGit={showGit}
           hasLog={hasLog}
           hasReport={hasReport}
-          isConductor={isConductor}
-          workerCount={workerCount}
         />
       )}
     </div>

package/components/Pane/MobileViewPicker.test.ts

@@ -14,8 +14,6 @@ const all = {
   isLocalSession: true,
   showGit: true,
   hasLog: true,
-  isConductor: true,
-  workerCount: 3,
 };
 
 describe("mobileViews", () => {
@@ -26,9 +24,7 @@ describe("mobileViews", () => {
       "Git",
       "Artifacts",
       "Log",
-      "Workers",
     ]);
-    expect(mobileViews(all).at(-1)?.count).toBe(3);
   });
 
   it("hides views that do not apply", () => {
@@ -36,15 +32,13 @@ describe("mobileViews", () => {
       mobileViews({
         isLocalSession: false,
         showGit: false,
-        isConductor: false,
-        workerCount: 0,
       }).map((v) => v.label)
     ).toEqual(["Chat", "Artifacts"]);
   });
 
   it("drops only Git when the folder is not a repo", () => {
     expect(mobileViews({ ...all, showGit: false }).map((v) => v.label)).toEqual(
-      ["Chat", "Files", "Artifacts", "Log", "Workers"]
+      ["Chat", "Files", "Artifacts", "Log"]
     );
   });
 });
@@ -82,7 +76,6 @@ describe("MobileViewPicker", () => {
       "Git",
       "Artifacts",
       "Log",
-      "Workers3",
     ]);
     expect(items[3].getAttribute("aria-current")).toBe("true");
   });

package/components/Pane/MobileViewPicker.tsx

@@ -9,7 +9,6 @@ import {
   ScrollText,
   ClipboardList,
   Terminal as TerminalIcon,
-  Users,
   type LucideIcon,
 } from "lucide-react";
 import {
@@ -33,8 +32,6 @@ export interface MobileViewAvailability {
   showGit: boolean;
   hasLog?: boolean;
   hasReport?: boolean;
-  isConductor: boolean;
-  workerCount: number;
 }
 
 // The one list of views on a phone; the picker renders it.
@@ -43,8 +40,6 @@ export function mobileViews({
   showGit,
   hasLog,
   hasReport,
-  isConductor,
-  workerCount,
 }: MobileViewAvailability): MobileView[] {
   const views: (MobileView | false)[] = [
     { mode: "terminal", label: "Chat", icon: TerminalIcon },
@@ -53,12 +48,6 @@ export function mobileViews({
     { mode: "artifacts", label: "Artifacts", icon: Package },
     !!hasReport && { mode: "report", label: "Report", icon: ClipboardList },
     !!hasLog && { mode: "log", label: "Log", icon: ScrollText },
-    isConductor && {
-      mode: "workers",
-      label: "Workers",
-      icon: Users,
-      count: workerCount,
-    },
   ];
   return views.filter((v): v is MobileView => !!v);
 }

package/components/Pane/PaneViewToggle.test.ts

@@ -56,8 +56,6 @@ describe("PaneViewToggle", () => {
           viewMode: "terminal",
           isLocalSession: true,
           showGit,
-          isConductor: false,
-          workerCount: 0,
           gitDrawerOpen: false,
           shellDrawerOpen: false,
           onViewModeChange: () => {},

package/components/Pane/PaneViewToggle.tsx

@@ -7,7 +7,6 @@ import {
   Package,
   ScrollText,
   ClipboardList,
-  Users,
 } from "lucide-react";
 import {
   Tooltip,
@@ -25,11 +24,9 @@ interface PaneViewToggleProps {
   isLocalSession: boolean;
   // Local, and the folder is not known to be outside a git repository.
   showGit: boolean;
-  isConductor: boolean;
   // The task merged and has a log.
   hasLog?: boolean;
   hasReport?: boolean;
-  workerCount: number;
   gitDrawerOpen: boolean;
   shellDrawerOpen: boolean;
   onViewModeChange: (mode: ViewMode) => void;
@@ -85,10 +82,8 @@ export function PaneViewToggle({
   viewMode,
   isLocalSession,
   showGit,
-  isConductor,
   hasLog,
   hasReport,
-  workerCount,
   gitDrawerOpen,
   shellDrawerOpen,
   onViewModeChange,
@@ -159,18 +154,6 @@ export function PaneViewToggle({
           <ScrollText className="h-3.5 w-3.5" />
         </ToggleButton>
       )}
-      {isConductor && (
-        <ToggleButton
-          label="Workers"
-          active={viewMode === "workers"}
-          onClick={() => onViewModeChange("workers")}
-        >
-          <Users className="h-3.5 w-3.5" />
-          <span className="bg-primary text-primary-foreground absolute -top-1 -right-1 flex h-3.5 min-w-3.5 items-center justify-center rounded-full text-[9px] font-medium">
-            {workerCount}
-          </span>
-        </ToggleButton>
-      )}
     </div>
   );
 }