@saadnvd1/agent-os 0.3.588 → 0.3.592

package/app/globals.css

@@ -131,6 +131,17 @@
   animation: status-pulse 1.6s ease-in-out infinite;
 }
 
+/* Shown only once something has taken a moment: a quick send never flashes it. */
+@keyframes status-late {
+  from {
+    opacity: 0;
+  }
+}
+
+@utility status-late {
+  animation: status-late 0.2s ease-out 0.6s both;
+}
+
 @media (prefers-reduced-motion: reduce) {
   .status-live {
     animation: none;

package/components/Chat/ChatPanel.tsx

@@ -51,6 +51,7 @@ import { FIND_EVENT, isFindKey, useFind } from "./useFind";
 import { McpServers } from "./McpServers";
 import { ArtifactCard } from "./Artifact";
 import { PlanCard } from "./PlanCard";
+import { ChatIdle } from "./idle";
 import { ContextMeter } from "./ContextMeter";
 import { SetupCard } from "./SetupCard";
 import { UserTurn } from "./EventRow";
@@ -77,6 +78,7 @@ import {
   CommandOutput,
   Compacted,
   SkillChip,
+  UserMessage,
   ErrorMessage,
   NoteLine,
   Reasoning,
@@ -86,10 +88,10 @@ import {
 
 interface ItemActions {
   respond: (id: string, answer: ApprovalDecision) => void;
-  // Absent while the agent is working, and inside undone messages.
+  // Absent inside undone messages; hidden while the agent works (ChatIdle).
   onCarryPlan?: (id: string) => void;
   onKeepPlanning?: () => void;
-  // Absent while the agent is working, and inside undone messages.
+  // Absent inside undone messages; hidden while the agent works (ChatIdle).
   onUndo?: (id: string) => void;
   onQuote?: (text: string) => void;
 }
@@ -294,6 +296,9 @@ export function ChatPanel({
     loadTaskOutput,
     taskOutputs,
     queue,
+    pending,
+    retrySend,
+    dropSend,
     queueEdit,
     queueMove,
     queueDelete,
@@ -606,12 +611,12 @@ export function ChatPanel({
   const actions: ItemActions = useMemo(
     () => ({
       respond,
-      onUndo: idle ? (id) => undo(id, true) : undefined,
-      onCarryPlan: idle ? carryPlan : undefined,
+      onUndo: (id) => undo(id, true),
+      onCarryPlan: carryPlan,
       onKeepPlanning: focusComposer,
       onQuote: (text) => setInsert(quoteInsert(text)),
     }),
-    [respond, idle, undo, carryPlan, focusComposer]
+    [respond, undo, carryPlan, focusComposer]
   );
 
   return (
@@ -653,13 +658,42 @@ export function ChatPanel({
                       </div>
                     )}
                     <SetupCard sessionId={sessionId} />
-                    {blocks.length === 0 && !queue.length && (
-                      <p className="text-muted-foreground py-16 text-center text-sm">
-                        Ask anything to start.
-                      </p>
-                    )}
+                    {blocks.length === 0 &&
+                      !queue.length &&
+                      !pending.length && (
+                        <p className="text-muted-foreground py-16 text-center text-sm">
+                          Ask anything to start.
+                        </p>
+                      )}
                   </div>
-                  <TimelineRows blocks={blocks} actions={actions} />
+                  <ChatIdle.Provider value={idle}>
+                    <TimelineRows blocks={blocks} actions={actions} />
+                  </ChatIdle.Provider>
+                  {pending.map((p) => (
+                    <div
+                      key={p.id}
+                      className="mx-auto w-full max-w-3xl px-4 pb-4"
+                    >
+                      <UserMessage
+                        item={{
+                          id: p.id,
+                          kind: "user",
+                          text: p.text,
+                          images: p.images,
+                          createdAt: p.at,
+                        }}
+                        pending={{
+                          status: p.status,
+                          error: p.error,
+                          onRetry: () => retrySend(p.id),
+                          onEdit: () => {
+                            dropSend(p.id);
+                            setPrefill({ text: p.text, at: Date.now() });
+                          },
+                        }}
+                      />
+                    </div>
+                  ))}
                 </div>
               </BookmarkChatContext.Provider>
             </ToolBodies.Provider>

package/components/Chat/Messages.test.ts

@@ -1,7 +1,7 @@
 import { createElement } from "react";
 import { renderToStaticMarkup } from "react-dom/server";
 import { describe, expect, it, vi } from "vitest";
-import { AssistantMessage } from "./Messages";
+import { AssistantMessage, UserMessage } from "./Messages";
 
 const item = {
   id: "a1",
@@ -47,3 +47,42 @@ describe("AssistantMessage quote action", () => {
     expect(html).not.toContain("Quote message");
   });
 });
+
+describe("a sent message not in the chat yet", () => {
+  const user = { id: "user-c-1", kind: "user", text: "An article" } as never;
+  const render = (status: "sending" | "accepted" | "failed") =>
+    renderToStaticMarkup(
+      createElement(UserMessage, {
+        item: user,
+        pending: {
+          status,
+          error: "connection lost",
+          onRetry: vi.fn(),
+          onEdit: vi.fn(),
+        },
+      })
+    );
+
+  it("shows the text at once, dimmed, with its progress", () => {
+    expect(render("sending")).toContain("An article");
+    expect(render("sending")).toContain("opacity-60");
+    expect(render("sending")).toContain("Sending");
+    expect(render("accepted")).toContain("Starting the agent");
+  });
+
+  it("says a failed one wasn't sent, with Retry and Edit", () => {
+    const html = render("failed");
+    expect(html).toContain("Not sent · connection lost");
+    expect(html).toContain(">Retry</button>");
+    expect(html).toContain(">Edit</button>");
+    expect(html).not.toContain("opacity-60");
+  });
+
+  it("a message in the chat shows no status", () => {
+    const html = renderToStaticMarkup(
+      createElement(UserMessage, { item: user })
+    );
+    expect(html).not.toContain("Sending");
+    expect(html).not.toContain("Not sent");
+  });
+});

package/components/Chat/Messages.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { memo } from "react";
 import {
   Check,
   ChevronRight,
@@ -9,6 +10,7 @@ import {
   Sparkles,
 } from "lucide-react";
 import type { ChatItem } from "@/lib/chat/events";
+import type { PendingSend } from "@/lib/chat/pending";
 import { cn } from "@/lib/utils";
 import { leadingCommand } from "@/lib/chat/commands";
 import { compactedLine } from "@/lib/chat/stale";
@@ -68,7 +70,9 @@ function Prose({ text }: { text: string }) {
   );
 }
 
-function UserText({ text }: { text: string }) {
+// Memoized: a chat full of pasted articles re-renders its rows when a turn
+// starts and ends, and splitting and linking each one again is the cost.
+const UserText = memo(function UserText({ text }: { text: string }) {
   return (
     <>
       {splitUserText(text).map((part, i) => {
@@ -89,45 +93,111 @@ function UserText({ text }: { text: string }) {
       })}
     </>
   );
+});
+
+// A sent message not in the chat yet (lib/chat/pending).
+export interface PendingStatus {
+  status: PendingSend["status"];
+  error?: string;
+  onRetry: () => void;
+  onEdit: () => void;
+}
+
+function StatusButton({
+  onClick,
+  children,
+}: {
+  onClick: () => void;
+  children: string;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className="text-foreground hover:bg-foreground/[0.06] min-h-11 rounded-md px-2 underline underline-offset-2 md:min-h-7"
+    >
+      {children}
+    </button>
+  );
+}
+
+function SendStatus({ pending }: { pending: PendingStatus }) {
+  if (pending.status === "failed")
+    return (
+      <div
+        data-copy-skip
+        role="alert"
+        className="text-destructive flex items-center gap-1 font-mono text-[11px]"
+      >
+        <span>Not sent · {pending.error}</span>
+        <StatusButton onClick={pending.onRetry}>Retry</StatusButton>
+        <StatusButton onClick={pending.onEdit}>Edit</StatusButton>
+      </div>
+    );
+  return (
+    <div
+      data-copy-skip
+      aria-live="polite"
+      className="text-muted-foreground status-late flex items-center gap-1.5 font-mono text-[11px]"
+    >
+      <span className="status-live bg-muted-foreground h-1.5 w-1.5 rounded-full" />
+      {pending.status === "accepted" ? "Starting the agent" : "Sending"}
+    </div>
+  );
 }
 
 export function UserMessage({
   item,
   onUndo,
+  pending,
 }: {
   item: Of<"user">;
   onUndo?: () => void;
+  pending?: PendingStatus;
 }) {
-  return (
-    <BookmarkPress itemId={item.id}>
-      <div className="group flex flex-col items-end gap-1">
-        {item.from && (
-          <span data-copy-skip className="label-mono text-muted-foreground">
-            from {item.from}
-          </span>
-        )}
-        {item.images?.length ? (
-          <div data-copy-skip className="flex flex-wrap justify-end gap-1.5">
-            {item.images.map((img, i) => (
-              <ImageThumb
-                key={i}
-                src={`data:${img.mediaType};base64,${img.data}`}
-              />
-            ))}
-          </div>
-        ) : null}
-        {item.text && (
-          <div className="bg-foreground/[0.07] max-w-[85%] rounded-2xl rounded-br-md px-3.5 py-2 text-sm whitespace-pre-wrap">
-            <UserText text={item.text} />
-          </div>
-        )}
+  const message = (
+    <div className="group flex flex-col items-end gap-1">
+      {item.from && (
+        <span data-copy-skip className="label-mono text-muted-foreground">
+          from {item.from}
+        </span>
+      )}
+      {item.images?.length ? (
+        <div data-copy-skip className="flex flex-wrap justify-end gap-1.5">
+          {item.images.map((img, i) => (
+            <ImageThumb
+              key={i}
+              src={`data:${img.mediaType};base64,${img.data}`}
+            />
+          ))}
+        </div>
+      ) : null}
+      {item.text && (
+        <div
+          className={cn(
+            "bg-foreground/[0.07] max-w-[85%] rounded-2xl rounded-br-md px-3.5 py-2 text-sm whitespace-pre-wrap",
+            pending &&
+              (pending.status === "failed"
+                ? "ring-destructive ring-1 ring-inset"
+                : "opacity-60")
+          )}
+        >
+          <UserText text={item.text} />
+        </div>
+      )}
+      {pending ? (
+        <SendStatus pending={pending} />
+      ) : (
         <div className="-mr-1.5 flex items-center">
           {onUndo && <UndoButton onClick={onUndo} />}
           <BookmarkButton itemId={item.id} />
         </div>
-      </div>
-    </BookmarkPress>
+      )}
+    </div>
   );
+  // Not in the chat yet: nothing to star.
+  if (pending) return message;
+  return <BookmarkPress itemId={item.id}>{message}</BookmarkPress>;
 }
 
 export function AssistantMessage({

package/components/Chat/PlanCard.tsx

@@ -3,6 +3,7 @@
 import { Check, ListChecks } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import type { ChatItem } from "@/lib/chat/events";
+import { useChatIdle } from "./idle";
 import { Markdown } from "./Markdown";
 
 type PlanItem = Extract<ChatItem, { kind: "plan" }>;
@@ -14,10 +15,11 @@ export function PlanCard({
   onKeepPlanning,
 }: {
   item: PlanItem;
-  // Absent while a turn runs.
+  // Absent inside undone messages; a running turn disables it too.
   onCarryOut?: () => void;
   onKeepPlanning: () => void;
 }) {
+  const idle = useChatIdle();
   return (
     <div className="bg-primary/[0.06] space-y-3 rounded-xl p-3">
       <div className="text-primary flex items-center gap-2 text-xs font-medium">
@@ -41,7 +43,7 @@ export function PlanCard({
           </Button>
           <Button
             className="h-11 md:h-9"
-            disabled={!onCarryOut}
+            disabled={!onCarryOut || !idle}
             onClick={onCarryOut}
           >
             Carry it out

package/components/Chat/Undo.tsx

@@ -14,6 +14,7 @@ import type { UndoPreview } from "@/lib/chat/events";
 import type { UndoItem } from "@/lib/chat/group";
 import { shortPath } from "@/lib/chat/diff";
 import { cn } from "@/lib/utils";
+import { useChatIdle } from "./idle";
 import { useRowState } from "./rowState";
 
 const counts = (p: { insertions?: number; deletions?: number }) =>
@@ -86,7 +87,9 @@ export function UndoDialog({
   );
 }
 
+// Shown only while the chat is idle.
 export function UndoButton({ onClick }: { onClick: () => void }) {
+  if (!useChatIdle()) return null;
   return (
     <button
       type="button"

package/components/Chat/idle.ts

@@ -0,0 +1,9 @@
+"use client";
+
+import { createContext, useContext } from "react";
+
+// Whether the chat can take an undo or carry out a plan (no turn running,
+// connected). A context rather than a prop, so a turn starting or ending
+// re-renders those buttons and not every row of a long conversation.
+export const ChatIdle = createContext(true);
+export const useChatIdle = () => useContext(ChatIdle);

package/data/chat/useChat.ts

@@ -23,6 +23,26 @@ import type {
 import type { SearchResult } from "@/lib/chat/find";
 import { addBody, touchBody } from "@/lib/chat/bodyCache";
 import { backgroundFailure, type TaskOutput } from "@/lib/chat/background";
+import {
+  NOT_SENT,
+  clientId,
+  overSends,
+  toResend,
+  type PendingSend,
+} from "@/lib/chat/pending";
+import { usePending } from "./usePending";
+
+// A pending send as the socket's `send`, under its own id.
+const sendFrame = (
+  p: Pick<PendingSend, "id" | "text" | "images" | "compact">
+) =>
+  JSON.stringify({
+    type: "send",
+    text: p.text,
+    images: p.images,
+    clientId: p.id,
+    ...(p.compact && { compact: true }),
+  });
 
 // The index of the item with `id`, searched from the end: what changes is
 // almost always the latest.
@@ -180,6 +200,12 @@ export function useChat(
     onUndoneRef.current = onUndone;
   });
   const wsRef = useRef<WebSocket | null>(null);
+  const {
+    pending,
+    pendingRef,
+    dispatch: pend,
+    restore: restorePending,
+  } = usePending(sessionId, connected);
 
   useEffect(() => {
     let closed = false;
@@ -214,7 +240,18 @@ export function useChat(
         `${protocol}//${window.location.host}/ws/chat?session=${encodeURIComponent(sessionId)}&paged=1`
       );
       wsRef.current = ws;
-      ws.onopen = () => setConnected(true);
+      ws.onopen = () => {
+        setConnected(true);
+        restorePending();
+        // Sends the last socket took and may have lost: the server drops
+        // any it already has.
+        for (const p of overSends(pendingRef.current))
+          pend({ type: "failed", id: p.id, error: NOT_SENT });
+        for (const p of toResend(pendingRef.current)) {
+          ws.send(sendFrame(p));
+          pend({ type: "resent", id: p.id, now: Date.now() });
+        }
+      };
       ws.onmessage = (event) => {
         const m = JSON.parse(event.data) as ChatServerMessage;
         if (m.type === "snapshot") {
@@ -235,8 +272,17 @@ export function useChat(
           setQueue(m.queue ?? []);
           setSuggestion(m.suggestion ?? null);
           setLoadedFor(sessionId);
+          pend({
+            type: "resolved",
+            ids: [...m.items, ...(m.queue ?? [])].map((i) => i.id),
+          });
         } else if (m.type === "queue") {
           setQueue(m.queue);
+          pend({ type: "resolved", ids: m.queue.map((q) => q.id) });
+        } else if (m.type === "accepted") {
+          pend({ type: "accepted", id: m.id, now: Date.now() });
+        } else if (m.type === "send_failed") {
+          pend({ type: "failed", id: m.id, error: m.message });
         } else if (m.type === "suggestion") {
           setSuggestion(m.text);
         } else if (m.type === "files") {
@@ -303,6 +349,8 @@ export function useChat(
             addBody(prev, m.id, m.body, visibleBodies.current)
           );
         } else if (m.type === "item") {
+          if (m.item.kind === "user")
+            pend({ type: "resolved", ids: [m.item.id] });
           withDeltas(() => {
             const routed = routeItem(
               itemsRef.current,
@@ -346,25 +394,44 @@ export function useChat(
       document.removeEventListener("visibilitychange", onVisible);
       wsRef.current?.close();
     };
-  }, [sessionId, setItems, setEarlierTasks]);
+  }, [sessionId, setItems, setEarlierTasks, pend, pendingRef, restorePending]);
 
   const queryClient = useQueryClient();
   const send = useCallback(
     // `compact`: the reader let a stale chat compact first (lib/chat/stale).
+    // It shows as a pending bubble at once, until it's in the chat.
     (text: string, images?: ChatImage[], compact?: boolean) => {
+      const p = { id: clientId(), text, images, compact };
+      pend({ type: "add", send: p, now: Date.now() });
       const ws = wsRef.current;
-      if (!ws) return;
-      ws.send(
-        JSON.stringify({
-          type: "send",
-          text,
-          images,
-          ...(compact && { compact: true }),
-        })
-      );
-      if (ws.readyState === WebSocket.OPEN) markRunning(queryClient, sessionId);
+      if (ws?.readyState !== WebSocket.OPEN) {
+        pend({ type: "failed", id: p.id, error: NOT_SENT });
+        return;
+      }
+      ws.send(sendFrame(p));
+      markRunning(queryClient, sessionId);
     },
-    [queryClient, sessionId]
+    [queryClient, sessionId, pend]
+  );
+
+  const retrySend = useCallback(
+    (id: string) => {
+      const p = pendingRef.current.find((s) => s.id === id);
+      const ws = wsRef.current;
+      if (!p) return;
+      if (ws?.readyState !== WebSocket.OPEN) {
+        pend({ type: "failed", id, error: NOT_SENT });
+        return;
+      }
+      ws.send(sendFrame(p));
+      pend({ type: "resent", id, now: Date.now() });
+    },
+    [pend, pendingRef]
+  );
+
+  const dropSend = useCallback(
+    (id: string) => pend({ type: "drop", id }),
+    [pend]
   );
 
   const interrupt = useCallback(() => {
@@ -549,6 +616,9 @@ export function useChat(
     loadTaskOutput,
     taskOutputs,
     queue,
+    pending,
+    retrySend,
+    dropSend,
     queueEdit,
     queueMove,
     queueDelete,

package/data/chat/usePending.ts

@@ -0,0 +1,70 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import {
+  loadPending,
+  pendingReducer,
+  savePending,
+  type PendingAction,
+  type PendingSend,
+} from "@/lib/chat/pending";
+
+const NONE: PendingSend[] = [];
+
+// The composer's sends not yet in the chat (lib/chat/pending), kept in this
+// browser per session. `dispatch` and `restore` are stable and read no
+// render's state, so the socket's handlers can call them.
+export function usePending(sessionId: string, connected: boolean) {
+  const [state, setState] = useState({ session: sessionId, list: NONE });
+  // Another session's sends never show here, even for the render before
+  // its own are restored.
+  const pending = state.session === sessionId ? state.list : NONE;
+  const ref = useRef<PendingSend[]>(NONE);
+  const session = useRef(sessionId);
+  const restored = useRef<string | null>(null);
+  useEffect(() => {
+    session.current = sessionId;
+    ref.current = NONE;
+  }, [sessionId]);
+
+  const replace = useCallback((list: PendingSend[]) => {
+    ref.current = list;
+    setState({ session: session.current, list });
+  }, []);
+  const dispatch = useCallback(
+    (action: PendingAction) => {
+      const next = pendingReducer(ref.current, action);
+      if (next === ref.current) return;
+      replace(next);
+      savePending(session.current, next);
+    },
+    [replace]
+  );
+  // Once per session, as its socket first opens: what an earlier page left
+  // mid-send, to be sent again.
+  const restore = useCallback(() => {
+    if (restored.current === session.current) return;
+    restored.current = session.current;
+    const now = Date.now();
+    replace(
+      loadPending(session.current).map((p) =>
+        p.status === "failed"
+          ? p
+          : { ...p, status: "sending" as const, at: now }
+      )
+    );
+  }, [replace]);
+
+  // Timeouts only count while connected: a reconnect sends them again.
+  const live = connected && pending.some((p) => p.status !== "failed");
+  useEffect(() => {
+    if (!live) return;
+    const timer = setInterval(
+      () => dispatch({ type: "tick", now: Date.now() }),
+      1000
+    );
+    return () => clearInterval(timer);
+  }, [live, dispatch]);
+
+  return { pending, pendingRef: ref, dispatch, restore };
+}

package/lib/bus/format.ts

@@ -15,16 +15,19 @@ export interface BusMessageView {
 }
 
 const INLINE_LIMIT = 600;
+// A relayed line stays under the linked machine's own cap (tasks/[id]/message).
+export const RELAY_LIMIT = 30_000;
 
 // Enough of a session id to address it (aos send takes a unique prefix).
 export const shortId = (id: string) => id.slice(0, 8);
 
-// Typed into the recipient's terminal. Long bodies are left for `aos inbox`.
-export function wakeLine(m: {
-  fromName: string;
-  fromId: string | null;
-  body: string;
-}): string {
+// Typed into the recipient's terminal. Long bodies are left for `aos inbox`,
+// unless `inline`: the recipient's AgentOS is another machine's, whose inbox
+// never held the message, so the whole body goes in the line.
+export function wakeLine(
+  m: { fromName: string; fromId: string | null; body: string },
+  opts: { inline?: boolean } = {}
+): string {
   const short = m.fromId ? shortId(m.fromId) : null;
   const who = short
     ? `"${m.fromName}" (${short})`
@@ -32,8 +35,13 @@ export function wakeLine(m: {
       ? "the user (via AgentOS)"
       : `${m.fromName} (via AgentOS)`;
   const oneLine = m.body.replace(/\s*\n\s*/g, " ").trim();
-  const text =
-    oneLine.length <= INLINE_LIMIT
+  const text = opts.inline
+    ? `: ${
+        oneLine.length <= RELAY_LIMIT
+          ? oneLine
+          : `${oneLine.slice(0, RELAY_LIMIT)} [cut: ${oneLine.length - RELAY_LIMIT} more chars; ask the sender to resend the rest]`
+      }`
+    : oneLine.length <= INLINE_LIMIT
       ? `: ${oneLine}`
       : ` (${m.body.length} chars). Read it with: aos inbox`;
   // By id: a reply can't break when either side is renamed.

package/lib/bus/index.ts

@@ -333,7 +333,12 @@ export async function sendMessage(opts: {
   await statusDetector.refreshCache();
   const delivery = await deliver(
     to,
-    opts.line ?? wakeLine({ fromName, fromId: from?.id ?? null, body }),
+    opts.line ??
+      wakeLine(
+        { fromName, fromId: from?.id ?? null, body },
+        // The linked machine's inbox never held a long body.
+        { inline: isHeldRemote(to) }
+      ),
     {
       name: fromName,
       messageId: id,