@saadnvd1/agent-os 0.3.715 → 0.3.723

package/app/page.tsx

@@ -138,6 +138,10 @@ const ShareDialog = dynamic(
   () => import("@/components/Share/ShareDialog").then((m) => m.ShareDialog),
   { ssr: false }
 );
+const ExportSheet = dynamic(
+  () => import("@/components/Export/ExportSheet").then((m) => m.ExportSheet),
+  { ssr: false }
+);
 const CommandPalette = dynamic(
   () =>
     import("@/components/CommandPalette/CommandPalette").then(
@@ -166,6 +170,7 @@ const AppDialogs = memo(function AppDialogs({
       <ClaimsSheet />
       <MoveDialog />
       <ShareDialog />
+      <ExportSheet />
       <AwayReport />
       <IncomingLinks />
       <CommandPalette />

package/components/Chat/Messages.tsx

@@ -1,9 +1,11 @@
 "use client";
 
 import { memo } from "react";
+import { useSnapshot } from "valtio";
 import {
   Check,
   ChevronRight,
+  Download,
   Circle,
   CircleDot,
   Quote,
@@ -24,6 +26,8 @@ import { Markdown } from "./Markdown";
 import { openSessionLink } from "./session-link";
 import { UndoButton } from "./Undo";
 import { useRowState } from "./rowState";
+import { useBookmarkChat } from "@/components/Bookmarks/context";
+import { exportUi, exportUiActions, pickedRange } from "@/stores/exportUi";
 import {
   BookmarkButton,
   TurnBookmark,
@@ -153,6 +157,71 @@ function SendStatus({ pending }: { pending: PendingStatus }) {
   );
 }
 
+// The turn this message begins, while turns are being picked for an export.
+function useExportTurn(itemId: string): number | null {
+  const ui = useSnapshot(exportUi);
+  if (!ui.selecting) return null;
+  return ui.turns.find((t) => t.id === itemId)?.n ?? null;
+}
+
+// A tick in the gutter and a tinted row: tap anywhere on it to pick the turn.
+function TurnTick({
+  turn,
+  children,
+}: {
+  turn: number;
+  children: React.ReactNode;
+}) {
+  const { pick } = useSnapshot(exportUi);
+  const range = pickedRange(pick);
+  const on = !!range && turn >= range.from && turn <= range.to;
+  return (
+    <div
+      className={cn(
+        "-mx-2 flex items-start gap-2 rounded-xl px-2",
+        on && "bg-primary/10"
+      )}
+    >
+      <button
+        type="button"
+        role="checkbox"
+        aria-checked={on}
+        aria-label={`Turn ${turn}`}
+        onClick={() => exportUiActions.tap(turn)}
+        className={cn(
+          "mt-1 flex h-11 min-w-11 shrink-0 flex-col items-center justify-center rounded-md border text-[11px]",
+          on
+            ? "border-primary bg-primary text-primary-foreground"
+            : "text-muted-foreground"
+        )}
+      >
+        {on ? <Check className="h-4 w-4" /> : turn}
+      </button>
+      <div className="min-w-0 flex-1">{children}</div>
+    </div>
+  );
+}
+
+// Export this message's turn and everything after it.
+function ExportFromHere({ itemId }: { itemId: string }) {
+  const chat = useBookmarkChat();
+  if (!chat) return null;
+  return (
+    <button
+      type="button"
+      aria-label="Export from here"
+      title="Export from here"
+      onClick={(e) => {
+        e.stopPropagation();
+        exportUiActions.open(chat.sessionId, "", itemId);
+      }}
+      className="text-muted-foreground hover:text-foreground hover:bg-foreground/[0.06] flex h-11 w-11 shrink-0 items-center justify-center rounded-md opacity-40 group-hover:opacity-100 focus-visible:opacity-100 md:h-7 md:w-7 md:opacity-0"
+    >
+      <Download className="h-3.5 w-3.5" />
+    </button>
+  );
+}
+
 export function UserMessage({
   item,
   onUndo,
@@ -162,6 +231,7 @@ export function UserMessage({
   onUndo?: () => void;
   pending?: PendingStatus;
 }) {
+  const turn = useExportTurn(item.id);
   const message = (
     <div className="group flex flex-col items-end gap-1">
       {item.from && (
@@ -204,6 +274,7 @@ export function UserMessage({
       ) : (
         <div className="-mr-1.5 flex items-center">
           {onUndo && <UndoButton onClick={onUndo} />}
+          <ExportFromHere itemId={item.id} />
           <BookmarkButton itemId={item.id} />
         </div>
       )}
@@ -211,7 +282,8 @@ export function UserMessage({
   );
   // Not in the chat yet: nothing to star.
   if (pending) return message;
-  return <BookmarkPress itemId={item.id}>{message}</BookmarkPress>;
+  const row = <BookmarkPress itemId={item.id}>{message}</BookmarkPress>;
+  return turn ? <TurnTick turn={turn}>{row}</TurnTick> : row;
 }
 
 export function AssistantMessage({
@@ -221,6 +293,8 @@ export function AssistantMessage({
   item: Of<"assistant">;
   onQuote?: (text: string) => void;
 }) {
+  // A reply whose only content was a tool call AgentOS ran for it.
+  if (!item.streaming && !item.text.trim()) return null;
   return (
     <BookmarkPress itemId={item.id}>
       <div className="group">
@@ -300,18 +374,38 @@ export function Todos({ item }: { item: Of<"todos"> }) {
 
 export function TurnEnd({ item }: { item: Of<"turn_end"> }) {
   const secs = item.durationMs ? Math.round(item.durationMs / 1000) : null;
+  const early = !item.interrupted && item.ended;
   const label = item.interrupted
     ? "Stopped"
-    : secs !== null
-      ? `Done in ${secs}s`
-      : "Done";
+    : early
+      ? secs !== null
+        ? `Ended early in ${secs}s`
+        : "Ended early"
+      : secs !== null
+        ? `Done in ${secs}s`
+        : "Done";
   return (
-    <div className="group text-muted-foreground/60 flex items-center gap-3 font-mono text-[11px]">
-      <span className="bg-foreground/[0.06] h-px flex-1" />
-      {label}
-      <TurnBookmark turnEndId={item.id} />
-      <span className="bg-foreground/[0.06] h-px flex-1" />
-    </div>
+    <>
+      {early && (
+        <div
+          role="status"
+          className="rounded-xl bg-amber-500/10 px-3.5 py-2.5 text-sm text-amber-700 dark:text-amber-300"
+        >
+          {early.notice}
+          {item.finishReason && (
+            <span className="mt-1 block font-mono text-[11px] opacity-80">
+              finish reason: {item.finishReason}
+            </span>
+          )}
+        </div>
+      )}
+      <div className="group text-muted-foreground/60 flex items-center gap-3 font-mono text-[11px]">
+        <span className="bg-foreground/[0.06] h-px flex-1" />
+        {label}
+        <TurnBookmark turnEndId={item.id} />
+        <span className="bg-foreground/[0.06] h-px flex-1" />
+      </div>
+    </>
   );
 }
 

package/components/Draft/DraftChips.tsx

@@ -21,6 +21,7 @@ import { useAgentStatusQuery } from "@/data/agents";
 import { useProjectMachinesQuery } from "@/data/projects";
 import { modelChoices, useModelsQuery } from "@/data/models";
 import type { AgentProbe } from "@/lib/agents/probe";
+import { RoleChips } from "./RoleChips";
 import { ChipHeading, ChipItem, ChipMenu, ChipToggle } from "./Chip";
 import {
   DEFAULT_PRIORITY,
@@ -168,7 +169,7 @@ export function DraftChips({
         </ChipMenu>
       )}
 
-      {!draft.openPr && (
+      {!draft.openPr && !draft.agentRole && (
         <ChipMenu icon={Bot} name="Agent" label={agentLabel(draft.agentType)}>
           {AGENT_OPTIONS.map((o) => (
             <ChipItem
@@ -189,6 +190,10 @@ export function DraftChips({
         </ChipMenu>
       )}
 
+      {!draft.openPr && local && (
+        <RoleChips draft={draft} onChange={onChange} />
+      )}
+
       {project && local && git?.isGitRepo && (
         <ChipMenu
           icon={GitBranch}

package/components/Draft/DraftPanel.tsx

@@ -14,6 +14,8 @@ import { useHostsQuery } from "@/data/hosts";
 import { useGitCheck } from "@/data/git/queries";
 import { useSelectedWorkspace } from "@/hooks/useSelectedWorkspace";
 import { useLaunchSession } from "@/data/sessions";
+import { ModelUnavailableError } from "@/data/sessions/queries";
+import { isAgentRole } from "@/lib/models/agent-roles";
 import { useCreateTask } from "@/data/tasks";
 import { useCheckStart } from "@/data/claims";
 import { StartClaimsNotice } from "@/components/Claims";
@@ -23,6 +25,7 @@ import { setPendingPrompt } from "@/stores/initialPrompt";
 import { draftsActions, draftsStore, newDraft } from "@/stores/drafts";
 import { DraftChips } from "./DraftChips";
 import { DraftHeading } from "./DraftHeading";
+import { ModelUnavailableDialog } from "./ModelUnavailableDialog";
 import { draftModels } from "./draftModels";
 
 // A new session before its first send: choices on top, a composer below.
@@ -63,6 +66,13 @@ export function DraftPanel({
     text: string;
     warnings: StartWarning[];
   } | null>(null);
+  // A role's model server that didn't answer, with what was being sent.
+  const [down, setDown] = useState<{
+    error: ModelUnavailableError;
+    text: string;
+    images: ChatImage[];
+    files: ChatFile[];
+  } | null>(null);
   const pending =
     launch.isPending || createTask.isPending || checkStart.isPending;
 
@@ -81,7 +91,7 @@ export function DraftPanel({
     text: string,
     images: ChatImage[],
     files: ChatFile[],
-    claim?: { after?: string }
+    claim?: { after?: string; onUnavailable?: "fallback" }
   ) => {
     try {
       if (draft.openPr) {
@@ -129,7 +139,17 @@ export function DraftPanel({
             ? draft.hostId
             : undefined,
         agentType: draft.agentType,
-        model: draft.model,
+        model: isAgentRole(draft.agentRole)
+          ? (draft.roleModel ?? "")
+          : draft.model,
+        ...(isAgentRole(draft.agentRole)
+          ? {
+              agentRole: draft.agentRole,
+              ...(claim?.onUnavailable && {
+                onUnavailable: claim.onUnavailable,
+              }),
+            }
+          : {}),
         access: draft.access,
         useWorktree: draft.useWorktree && !!git?.isGitRepo,
         baseBranch: draft.baseBranch,
@@ -153,6 +173,10 @@ export function DraftPanel({
         session.host_id
       );
     } catch (error) {
+      if (error instanceof ModelUnavailableError) {
+        setDown({ error, text, images, files });
+        return;
+      }
       setPrefill({ text, at: Date.now() });
       toast.error(error instanceof Error ? error.message : String(error));
     }
@@ -172,6 +196,31 @@ export function DraftPanel({
           git={git}
           onChange={(patch) => draftsActions.update(draft.id, patch)}
         />
+        <ModelUnavailableDialog
+          error={down?.error ?? null}
+          busy={pending}
+          onClose={() => {
+            if (down) setPrefill({ text: down.text, at: Date.now() });
+            setDown(null);
+          }}
+          onRetry={() => {
+            const d = down;
+            setDown(null);
+            if (d) void send(d.text, d.images, d.files);
+          }}
+          onFallback={() => {
+            const d = down;
+            setDown(null);
+            if (d)
+              void send(d.text, d.images, d.files, {
+                onUnavailable: "fallback",
+              });
+          }}
+          onPick={() => {
+            if (down) setPrefill({ text: down.text, at: Date.now() });
+            setDown(null);
+          }}
+        />
         {held && (
           <StartClaimsNotice
             warnings={held.warnings}

package/components/Draft/ModelUnavailableDialog.tsx

@@ -0,0 +1,78 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { AGENT_ROLE_DEFS, isAgentRole } from "@/lib/models/agent-roles";
+import type { ModelUnavailableError } from "@/data/sessions/queries";
+
+// A session in a role couldn't start: its model's server isn't answering.
+// A local model never turns into a cloud one on its own: starting on the
+// role's fallback is a choice made here.
+export function ModelUnavailableDialog({
+  error,
+  busy,
+  onRetry,
+  onFallback,
+  onPick,
+  onClose,
+}: {
+  error: ModelUnavailableError | null;
+  busy: boolean;
+  onRetry: () => void;
+  onFallback: () => void;
+  onPick: () => void;
+  onClose: () => void;
+}) {
+  const role =
+    error && isAgentRole(error.role)
+      ? AGENT_ROLE_DEFS[error.role].label
+      : "role";
+  const name = (ref: string) => ref.split("/").slice(1).join("/");
+  return (
+    <Dialog open={!!error} onOpenChange={(o) => !o && onClose()}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Can&apos;t start the {role}</DialogTitle>
+          <DialogDescription>
+            {error ? `${name(error.ref)}'s server isn't answering.` : ""}
+          </DialogDescription>
+        </DialogHeader>
+        {error && (
+          <p className="bg-muted/60 text-muted-foreground rounded-lg px-3 py-2 font-mono text-xs break-words">
+            {error.message}
+          </p>
+        )}
+        <div className="flex flex-col gap-2">
+          <Button className="h-11" disabled={busy} onClick={onRetry}>
+            Retry
+          </Button>
+          {error?.fallback && (
+            <Button
+              variant="outline"
+              className="h-11"
+              disabled={busy}
+              onClick={onFallback}
+            >
+              Start on {name(error.fallback)}
+            </Button>
+          )}
+          <Button variant="outline" className="h-11" onClick={onPick}>
+            Pick another model
+          </Button>
+        </div>
+        {error?.fallback && (
+          <p className="text-muted-foreground text-xs">
+            Starting on the fallback sends your code to wherever that model
+            runs.
+          </p>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}

package/components/Draft/RoleChips.tsx

@@ -0,0 +1,110 @@
+"use client";
+
+import { Cpu, Users } from "lucide-react";
+import {
+  AvailabilityDot,
+  LocalityBadge,
+} from "@/components/Models/ModelBadges";
+import { useAgentRolesQuery, useModelChoices } from "@/data/models";
+import type { Draft } from "@/lib/drafts";
+import {
+  AGENT_ROLES,
+  AGENT_ROLE_DEFS,
+  isAgentRole,
+} from "@/lib/models/agent-roles";
+import { ChipItem, ChipMenu } from "./Chip";
+
+// A draft's role and the model it runs on. The role's binding gives the
+// model (Settings > Agent roles); the model chip overrides it for this
+// session. Both lists come from the server.
+export function RoleChips({
+  draft,
+  onChange,
+}: {
+  draft: Draft;
+  onChange: (patch: Partial<Draft>) => void;
+}) {
+  const roles = useAgentRolesQuery("settings");
+  const { data: choices = [] } = useModelChoices(!!draft.agentRole);
+  const role = isAgentRole(draft.agentRole) ? draft.agentRole : null;
+  const bound = roles.data?.roles.find((r) => r.id === role);
+  const override = draft.roleModel
+    ? choices.find((c) => c.ref === draft.roleModel)
+    : undefined;
+  const current = override ?? bound?.choice ?? null;
+  const modelName = (ref: string | undefined | null) =>
+    ref ? ref.split("/").slice(1).join("/") : "…";
+  return (
+    <>
+      <ChipMenu
+        icon={Users}
+        name="Role"
+        label={role ? AGENT_ROLE_DEFS[role].label : "No role"}
+      >
+        <ChipItem
+          checked={!role}
+          onSelect={() => onChange({ agentRole: null, roleModel: null })}
+          hint="A plain session on the interactive model"
+        >
+          No role
+        </ChipItem>
+        {AGENT_ROLES.map((r) => {
+          const view = roles.data?.roles.find((x) => x.id === r);
+          return (
+            <ChipItem
+              key={r}
+              checked={r === role}
+              onSelect={() =>
+                onChange({ agentRole: r, roleModel: null, openPr: false })
+              }
+              hint={`${AGENT_ROLE_DEFS[r].purpose}${view?.binding ? ` · ${modelName(view.binding.ref)}` : ""}`}
+            >
+              {AGENT_ROLE_DEFS[r].label}
+            </ChipItem>
+          );
+        })}
+      </ChipMenu>
+      {role && (
+        <ChipMenu
+          icon={Cpu}
+          name="Model"
+          label={
+            draft.roleModel
+              ? modelName(draft.roleModel)
+              : `Role model: ${modelName(bound?.binding?.ref)}`
+          }
+        >
+          <ChipItem
+            checked={!draft.roleModel}
+            onSelect={() => onChange({ roleModel: null })}
+            hint={bound?.binding ? modelName(bound.binding.ref) : undefined}
+          >
+            Role model
+          </ChipItem>
+          {choices.map((c) => (
+            <ChipItem
+              key={c.ref}
+              checked={c.ref === draft.roleModel}
+              onSelect={() => onChange({ roleModel: c.ref })}
+              hint={c.group}
+            >
+              <span className="flex items-center gap-1.5">
+                <AvailabilityDot availability={c.availability} />
+                {c.label}
+                <LocalityBadge locality={c.locality} />
+              </span>
+            </ChipItem>
+          ))}
+        </ChipMenu>
+      )}
+      {role && current?.availability.state === "down" && (
+        <span
+          role="status"
+          className="text-destructive flex h-11 items-center text-xs md:h-8"
+        >
+          {modelName(current.ref)} isn&apos;t answering
+        </span>
+      )}
+    </>
+  );
+}

package/components/Export/ExportActions.tsx

@@ -0,0 +1,136 @@
+"use client";
+
+import { useState } from "react";
+import { toast } from "sonner";
+import { Check, Copy, Download, Loader2, Share2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { writeClipboard } from "@/hooks/useCopyToClipboard";
+import { fetchExport, type ExportEstimate } from "@/data/exports";
+import type { ExportRequest } from "@/lib/export/view";
+
+type Busy = "copy" | "download" | "share" | null;
+
+function save(blob: Blob, name: string) {
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = name;
+  a.click();
+  URL.revokeObjectURL(url);
+}
+
+// Copy for agent, Download and (where the browser can) Share. Never blocked
+// by a sensitive-data warning, only by the size limit.
+export function ExportActions({
+  sessionId,
+  title,
+  req,
+  est,
+}: {
+  sessionId: string;
+  title: string;
+  req: ExportRequest;
+  est: ExportEstimate | null;
+}) {
+  const [busy, setBusy] = useState<Busy>(null);
+  const [copied, setCopied] = useState(false);
+  // Only rendered on the client (the sheet loads with ssr off).
+  const [canShare] = useState(() => {
+    try {
+      const probe = new File([""], "x.md", { type: "text/markdown" });
+      return !!navigator.canShare?.({ files: [probe] });
+    } catch {
+      return false;
+    }
+  });
+
+  const wire = JSON.parse(JSON.stringify(req)) as ExportRequest;
+  const file = () => fetchExport(sessionId, wire, title, est?.selected ?? null);
+  const disabled = !est || est.tooBig || busy !== null;
+
+  const run =
+    (kind: Exclude<Busy, null>, work: () => Promise<void>) => async () => {
+      setBusy(kind);
+      try {
+        await work();
+      } catch (err) {
+        if ((err as Error).name !== "AbortError")
+          toast.error((err as Error).message || "Export failed");
+      } finally {
+        setBusy(null);
+      }
+    };
+
+  const copy = run("copy", async () => {
+    const pending = file();
+    // Safari only allows a copy started inside the tap: hand it the promise.
+    if (typeof ClipboardItem !== "undefined" && navigator.clipboard?.write) {
+      await navigator.clipboard.write([
+        new ClipboardItem({
+          "text/plain": pending.then(
+            (f) => new Blob([f.blob], { type: "text/plain" })
+          ),
+        }),
+      ]);
+    } else {
+      await writeClipboard(await (await pending).blob.text());
+    }
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1500);
+    toast.success("Copied. Paste it into your AI chat.");
+  });
+
+  const download = run("download", async () => {
+    const f = await file();
+    save(f.blob, f.name);
+  });
+
+  const share = run("share", async () => {
+    const f = await file();
+    const shared = new File([f.blob], f.name, { type: f.blob.type });
+    if (!navigator.canShare?.({ files: [shared] })) return save(f.blob, f.name);
+    await navigator.share({ files: [shared], title });
+  });
+
+  const Spin = <Loader2 className="h-4 w-4 animate-spin" />;
+  return (
+    <div className="flex flex-col gap-2 sm:flex-row sm:justify-end">
+      <Button
+        className="min-h-11 sm:order-last"
+        disabled={disabled}
+        onClick={copy}
+      >
+        {busy === "copy" ? (
+          Spin
+        ) : copied ? (
+          <Check className="h-4 w-4" />
+        ) : (
+          <Copy className="h-4 w-4" />
+        )}
+        {req.format === "md" ? "Copy for agent" : "Copy"}
+      </Button>
+      <div className="flex gap-2">
+        <Button
+          variant="outline"
+          className="min-h-11 flex-1 sm:flex-none"
+          disabled={disabled}
+          onClick={download}
+        >
+          {busy === "download" ? Spin : <Download className="h-4 w-4" />}
+          Download
+        </Button>
+        {canShare && (
+          <Button
+            variant="outline"
+            className="min-h-11 flex-1 sm:flex-none"
+            disabled={disabled}
+            onClick={share}
+          >
+            {busy === "share" ? Spin : <Share2 className="h-4 w-4" />}
+            Share…
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}