@saadnvd1/agent-os 0.3.591 → 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/chat/client-send.ts

@@ -3,20 +3,27 @@ import type { CompactFirst } from "./stale";
 
 // What a browser's send may carry: its text and images, and whether the
 // reader chose to compact a stale chat first. Who a message is from (`from`,
-// `peer`, `origin`) is set by the server alone, never by a client.
+// `peer`, `origin`) is set by the server alone, never by a client. Its own
+// id for the message is kept only in a shape no server id takes.
 export function clientSend(msg: unknown): {
   text: string;
   images?: ChatImage[];
   compact?: CompactFirst;
+  id?: string;
 } {
   const m = (msg ?? {}) as {
     text?: unknown;
     images?: unknown;
     compact?: unknown;
+    clientId?: unknown;
   };
   return {
     text: typeof m.text === "string" ? m.text : "",
     images: Array.isArray(m.images) ? (m.images as ChatImage[]) : undefined,
     ...(m.compact === true && { compact: "yes" as const }),
+    ...(isClientId(m.clientId) && { id: m.clientId }),
   };
 }
+
+export const isClientId = (id: unknown): id is string =>
+  typeof id === "string" && /^user-c-[A-Za-z0-9-]{8,64}$/.test(id);

package/lib/chat/demo.ts

@@ -5,6 +5,7 @@
  */
 
 import { randomUUID } from "crypto";
+import { clientSend } from "./client-send";
 import type { ChatConversation } from "./driver";
 import type { ChatClientMessage, ChatServerMessage } from "./events";
 import { demoConversation } from "./drivers/demo";
@@ -37,7 +38,11 @@ function conversation(sessionId: string): ChatConversation {
   return c;
 }
 
-export function sendDemoChat(sessionId: string, text: string): void {
+export function sendDemoChat(
+  sessionId: string,
+  text: string,
+  id = `user-${Date.now()}-${randomUUID().slice(0, 5)}`
+): void {
   const trimmed = text.trim();
   if (!trimmed) return;
   getSession(sessionId);
@@ -45,7 +50,7 @@ export function sendDemoChat(sessionId: string, text: string): void {
   if (count >= MAX_SENDS) throw new Error(DEMO_REFUSAL);
   sends.set(sessionId, count + 1);
   const item = {
-    id: `user-${Date.now()}-${randomUUID().slice(0, 5)}`,
+    id,
     kind: "user" as const,
     text: DEMO_VISITOR_TEXT,
     tagged: true as const,
@@ -84,7 +89,21 @@ export function handleDemoChat(
   msg: ChatClientMessage,
   reply: (m: ChatServerMessage) => void
 ): void {
-  if (msg.type === "send") return sendDemoChat(sessionId, String(msg.text));
+  if (msg.type === "send") {
+    const { id } = clientSend(msg);
+    if (!id) return sendDemoChat(sessionId, String(msg.text));
+    reply({ type: "accepted", id });
+    try {
+      return sendDemoChat(sessionId, String(msg.text), id);
+    } catch (err) {
+      reply({
+        type: "send_failed",
+        id,
+        message: err instanceof Error ? err.message : String(err),
+      });
+      throw err;
+    }
+  }
   if (msg.type === "interrupt") {
     void conversations.get(sessionId)?.interrupt();
     return;

package/lib/chat/drivers/claude.ts

@@ -183,6 +183,19 @@ export const claudeDriver: ChatDriver = {
     );
     let access = options.access;
     let plan = !options.permissionMode && !!options.plan;
+    // The mode the CLI is in. Asking again for the same one waits on the
+    // CLI starting up (seconds, on a new worker) for nothing.
+    let applied = sdkMode(access, plan);
+    const applyMode = async () => {
+      const mode = sdkMode(access, plan);
+      if (mode === applied) return;
+      const before = applied;
+      applied = mode;
+      await q.setPermissionMode(mode).catch((error: unknown) => {
+        if (applied === mode) applied = before;
+        throw error;
+      });
+    };
     const q = query({
       prompt: input,
       options: {
@@ -344,12 +357,12 @@ export const claudeDriver: ChatDriver = {
       async setAccess(next) {
         access = next;
         if (options.permissionMode || plan) return;
-        await q.setPermissionMode(sdkMode(access, plan));
+        await applyMode();
       },
       async setPlan(next) {
         if (options.permissionMode) return;
         plan = next;
-        await q.setPermissionMode(sdkMode(access, plan));
+        await applyMode();
       },
       respond(id, answer) {
         approvals.respond(id, answer);

package/lib/chat/drivers/opencode.ts

@@ -209,6 +209,7 @@ export const openCodeDriver: ChatDriver = {
         model = openCodeModel(next);
       },
       async setAccess(next) {
+        if (next === access) return;
         access = next;
         await ready;
         await setRules();

package/lib/chat/events.ts

@@ -381,11 +381,16 @@ export type ChatServerMessage =
       ok: boolean;
       error?: string;
     }
-  | { type: "undone"; from: string; text: string };
+  | { type: "undone"; from: string; text: string }
+  // A send with a `clientId` was taken in (before any worker is up), or
+  // failed. The message itself still comes as an item or in the queue.
+  | { type: "accepted"; id: string }
+  | { type: "send_failed"; id: string; message: string };
 
 // What a browser sends.
 export type ChatClientMessage =
-  | { type: "send"; text: string; images?: ChatImage[] }
+  // `clientId` (`user-c-…`) becomes the message's id: a resend is a no-op.
+  | { type: "send"; text: string; images?: ChatImage[]; clientId?: string }
   | { type: "queue_edit"; id: string; text: string }
   | { type: "queue_move"; id: string; by: -1 | 1 }
   | { type: "queue_delete"; id: string }

package/lib/chat/pending.ts

@@ -0,0 +1,169 @@
+import type { ChatImage } from "./events";
+
+// A message the composer sent that isn't in the chat or its queue yet. It
+// shows as a bubble at once, and stays (as failed, with Retry) if it never
+// arrives, so a long paste is never lost to a dead socket.
+export interface PendingSend {
+  id: string;
+  text: string;
+  images?: ChatImage[];
+  compact?: boolean;
+  // "sending": not taken in yet. "accepted": the server has it and is
+  // starting the agent.
+  status: "sending" | "accepted" | "failed";
+  error?: string;
+  // When it was last sent or accepted, for the timeouts below.
+  at: number;
+  // Sends so far; each reconnect resends once, up to MAX_SENDS.
+  sends: number;
+}
+
+export type PendingAction =
+  | {
+      type: "add";
+      send: Omit<PendingSend, "status" | "at" | "sends">;
+      now: number;
+    }
+  // Sent again on a new socket, or by Retry.
+  | { type: "resent"; id: string; now: number }
+  | { type: "accepted"; id: string; now: number }
+  | { type: "failed"; id: string; error: string }
+  // Ids now in the chat or its queue: those sends are done.
+  | { type: "resolved"; ids: Iterable<string> }
+  | { type: "drop"; id: string }
+  | { type: "tick"; now: number };
+
+// No answer at all: the socket is likely dead though not yet closed.
+export const SEND_TIMEOUT_MS = 10_000;
+// Taken in but never shown: a new agent takes seconds, not a minute.
+export const ACCEPTED_TIMEOUT_MS = 60_000;
+export const MAX_SENDS = 3;
+
+export const NOT_SENT = "connection lost";
+const NO_ANSWER = "no answer from AgentOS";
+const NEVER_ARRIVED = "the agent didn't take it";
+
+export function pendingReducer(
+  state: PendingSend[],
+  action: PendingAction
+): PendingSend[] {
+  const update = (id: string, fn: (p: PendingSend) => PendingSend | null) => {
+    const i = state.findIndex((p) => p.id === id);
+    if (i === -1) return state;
+    const next = fn(state[i]);
+    if (next === state[i]) return state;
+    const out = state.slice();
+    if (next) out[i] = next;
+    else out.splice(i, 1);
+    return out;
+  };
+  switch (action.type) {
+    case "add":
+      if (state.some((p) => p.id === action.send.id)) return state;
+      return [
+        ...state,
+        { ...action.send, status: "sending", at: action.now, sends: 1 },
+      ];
+    case "resent":
+      return update(action.id, (p) => ({
+        ...p,
+        status: "sending",
+        error: undefined,
+        at: action.now,
+        sends: p.sends + 1,
+      }));
+    case "accepted":
+      return update(action.id, (p) =>
+        p.status === "sending"
+          ? { ...p, status: "accepted", at: action.now }
+          : p
+      );
+    case "failed":
+      return update(action.id, (p) => ({
+        ...p,
+        status: "failed",
+        error: action.error,
+      }));
+    case "resolved": {
+      const ids = new Set(action.ids);
+      const kept = state.filter((p) => !ids.has(p.id));
+      return kept.length === state.length ? state : kept;
+    }
+    case "drop":
+      return update(action.id, () => null);
+    case "tick": {
+      let changed = false;
+      const next = state.map((p) => {
+        const limit =
+          p.status === "sending"
+            ? SEND_TIMEOUT_MS
+            : p.status === "accepted"
+              ? ACCEPTED_TIMEOUT_MS
+              : Infinity;
+        if (action.now - p.at < limit) return p;
+        changed = true;
+        return {
+          ...p,
+          status: "failed" as const,
+          error: p.status === "sending" ? NO_ANSWER : NEVER_ARRIVED,
+        };
+      });
+      return changed ? next : state;
+    }
+  }
+}
+
+// What a new socket sends again: anything not failed and not over its sends.
+// Safe to repeat: the server drops an id already in the chat or its queue.
+export const toResend = (state: PendingSend[]) =>
+  state.filter((p) => p.status !== "failed" && p.sends < MAX_SENDS);
+
+// A new socket that can't send again what's still pending marks it failed.
+export const overSends = (state: PendingSend[]) =>
+  state.filter((p) => p.status !== "failed" && p.sends >= MAX_SENDS);
+
+// getRandomValues, not randomUUID: a phone on plain http over the tailnet
+// isn't a secure context.
+export const clientId = () =>
+  `user-c-${Array.from(crypto.getRandomValues(new Uint8Array(12)), (b) =>
+    b.toString(16).padStart(2, "0")
+  ).join("")}`;
+
+const keyFor = (sessionId: string) => `agentos:pending:${sessionId}`;
+
+// Kept in this browser so a reload doesn't lose a failed article. Over
+// quota, images go first and the words stay.
+export function savePending(sessionId: string, state: PendingSend[]): void {
+  try {
+    const key = keyFor(sessionId);
+    if (!state.length) return localStorage.removeItem(key);
+    for (const kept of [
+      state,
+      state.map((p) => ({ ...p, images: undefined })),
+    ]) {
+      try {
+        localStorage.setItem(key, JSON.stringify(kept));
+        return;
+      } catch {
+        // Too big; try without images.
+      }
+    }
+  } catch {
+    // Storage unavailable.
+  }
+}
+
+export function loadPending(sessionId: string): PendingSend[] {
+  try {
+    const raw = localStorage.getItem(keyFor(sessionId));
+    const list = raw ? (JSON.parse(raw) as PendingSend[]) : [];
+    // From an earlier page: each is sent once more on connecting.
+    return Array.isArray(list)
+      ? list.filter(
+          (p) => typeof p?.id === "string" && typeof p.text === "string"
+        )
+      : [];
+  } catch {
+    return [];
+  }
+}

package/lib/chat/runner.ts

@@ -384,6 +384,10 @@ const sentBy = ({ from, peer, origin }: SentBy): SentBy => ({
   origin,
 });
 
+// Already a message in the chat or its queue.
+const taken = (sessionId: string, id: string) =>
+  hasItem(sessionId, id) || listQueue(sessionId).some((q) => q.id === id);
+
 export async function sendChat(
   sessionId: string,
   input: {
@@ -393,16 +397,20 @@ export async function sendChat(
     queue?: boolean;
     // Compact a stale chat first (lib/chat/stale).
     compact?: CompactFirst;
+    // The client's own id for it, so a resend after a reconnect is a no-op.
+    id?: string;
   } & SentBy
 ): Promise<void> {
   const text = input.text.trim();
   if (!text && !input.images?.length) return;
+  if (input.id && taken(sessionId, input.id)) return;
   refuseAway(sessionId);
+  const id = input.id ?? `user-${Date.now()}-${randomUUID().slice(0, 5)}`;
   // Its worktree is still being set up, its task hasn't launched (held by
   // Pause, say), or it's moving or landing: the message waits its turn.
   if (settingUp(sessionId) || launchPending(sessionId) || chatHold(sessionId)) {
     enqueue(sessionId, {
-      id: `user-${Date.now()}-${randomUUID().slice(0, 5)}`,
+      id,
       text,
       images: input.images,
       ...sentBy(input),
@@ -411,7 +419,8 @@ export async function sendChat(
     return;
   }
   const live = await ensureLive(sessionId);
-  const id = `user-${Date.now()}-${randomUUID().slice(0, 5)}`;
+  // Sent again while the worker was starting.
+  if (input.id && taken(sessionId, id)) return;
   if (queuedIfHeld(sessionId, { ...input, id, text })) return;
   live.worker.command({
     type: "send",

package/lib/chat/socket.ts

@@ -145,7 +145,18 @@ function onChatMessage(
     void Promise.resolve(p).catch(fail);
   if (msg.type === "send") {
     const send = clientSend(msg);
-    run(sendChat(sessionId, { ...send, queue: true }));
+    const id = send.id;
+    // Taken in now: a new worker can take seconds to start.
+    if (id) reply({ type: "accepted", id });
+    void sendChat(sessionId, { ...send, queue: true }).catch((err) => {
+      if (id)
+        reply({
+          type: "send_failed",
+          id,
+          message: err instanceof Error ? err.message : String(err),
+        });
+      fail(err);
+    });
     // "Session 4" is named after its first message.
     run(titleChatFromMessage(sessionId, send.text));
   } else if (msg.type === "queue_edit" && typeof msg.text === "string")

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saadnvd1/agent-os",
-  "version": "0.3.591",
+  "version": "0.3.592",
   "description": "Self-hosted web UI for managing Claude Code sessions",
   "bin": {
     "agent-os": "scripts/agent-os"