@robota-sdk/agent-ui-web 3.1.1 → 3.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@robota-sdk/agent-ui-web",
-  "version": "3.1.1",
+  "version": "3.2.1",
   "description": "Browser-safe React session presentation, wire reducer, WebSocket client and runtime-host contract for consumer-owned agent renderers.",
   "license": "AGPL-3.0-only OR LicenseRef-Commercial",
   "type": "module",
@@ -60,11 +60,11 @@
     "pretendard": "^1.3.9",
     "react-markdown": "^10.1.0",
     "remark-gfm": "^4.0.1",
-    "@robota-sdk/agent-interface-command": "3.1.1",
-    "@robota-sdk/agent-interface-execution": "3.1.1",
-    "@robota-sdk/agent-interface-session": "3.1.1",
-    "@robota-sdk/agent-interface-transport": "3.1.1",
-    "@robota-sdk/agent-transport": "3.1.1"
+    "@robota-sdk/agent-interface-execution": "3.2.1",
+    "@robota-sdk/agent-interface-session": "3.2.1",
+    "@robota-sdk/agent-transport": "3.2.1",
+    "@robota-sdk/agent-interface-command": "3.2.1",
+    "@robota-sdk/agent-interface-transport": "3.2.1"
   },
   "peerDependencies": {
     "react": ">=18"

package/src/client/desktop-session-client.ts

@@ -0,0 +1,78 @@
+import { decodeFrame, decodeServerMessage } from '@robota-sdk/agent-transport/client';
+
+import type { TClientMessage, TServerMessage } from '@robota-sdk/agent-transport';
+import type { ISessionClientHandle } from '../hooks/session-client-types.js';
+import type { TConnectionStatus } from './ws-session-client.js';
+
+/** The secure desktop preload exposes frames, never an owner credential or a daemon endpoint. */
+export interface IDesktopSessionBridge {
+  subscribe(onFrame: (frame: string) => void, onClose: () => void, onReady: () => void): () => void;
+  send(frame: string): boolean;
+  close(): void;
+}
+
+export function createDesktopSessionClient(
+  bridge: IDesktopSessionBridge,
+  callbacks: {
+    readonly onMessage: (message: TServerMessage) => void;
+    readonly onStatusChange: (status: TConnectionStatus) => void;
+  },
+): ISessionClientHandle {
+  let connected = false;
+  let subscribed = false;
+  let release: (() => void) | undefined;
+  let failed = false;
+  let revoked = false;
+  const close = (): void => {
+    revoked = true;
+    connected = false;
+    if (!failed && subscribed) callbacks.onStatusChange('disconnected');
+  };
+  return {
+    connect() {
+      if (revoked || failed) return;
+      if (subscribed) return;
+      subscribed = true;
+      callbacks.onStatusChange('connecting');
+      try {
+        release = bridge.subscribe(
+          (frame) => {
+            if (!subscribed || failed || revoked) return;
+            const decoded = decodeFrame(frame, decodeServerMessage);
+            if (!decoded.ok) {
+              failed = true;
+              connected = false;
+              bridge.close();
+              callbacks.onStatusChange('error');
+              return;
+            }
+            callbacks.onMessage(decoded.message);
+          },
+          close,
+          () => {
+            if (!subscribed || failed || revoked) return;
+            connected = true;
+            callbacks.onStatusChange('connected');
+            bridge.send(JSON.stringify({ type: 'get-messages' }));
+          },
+        );
+      } catch {
+        close();
+      }
+    },
+    disconnect() {
+      subscribed = false;
+      connected = false;
+      release?.();
+      release = undefined;
+      callbacks.onStatusChange('disconnected');
+    },
+    send(message: TClientMessage) {
+      if (!connected || failed) return;
+      if (!bridge.send(JSON.stringify(message))) {
+        bridge.close();
+        close();
+      }
+    },
+  };
+}

package/src/components/Composer.tsx

@@ -1,6 +1,6 @@
 import { useProductIdentity } from '../product-identity.js';
 import { ArrowUp, Paperclip, Square, Target, X } from 'lucide-react';
-import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { forwardRef, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState } from 'react';
 
 import { commandMenuFor } from '../hooks/command-menu.js';
 import type { ICommandMenuItem } from '../hooks/command-menu.js';
@@ -131,9 +131,11 @@ function writeDraft(namespace: string, sessionId: string | undefined, value: ISt
  * context). The row's controls run the session's own commands (`/provider`, `/mode`, `/effort`), so a
  * setting changes through the one path every client shares.
  */
-export const Composer = forwardRef<
+const ComposerInstance = forwardRef<
   IComposerHandle,
   {
+    /** Volatile drafts stay within this composer lifetime and never access persistent storage. */
+    draftMode?: 'persistent' | 'volatile';
     onSubmit: (prompt: string) => void;
     onCommand: (name: string, args?: string) => void;
     catalog: TCommandCatalog | null;
@@ -177,6 +179,7 @@ export const Composer = forwardRef<
   }
 >(function Composer(
   {
+    draftMode = 'persistent',
     onSubmit,
     onCommand,
     catalog,
@@ -199,6 +202,20 @@ export const Composer = forwardRef<
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   useImperativeHandle(ref, () => ({ focus: () => textareaRef.current?.focus() }), []);
   const sessionId = status?.sessionId;
+  const workspacePath = status?.workspace?.path;
+  const pickerGeneration = useRef(0);
+  const [fileInputEpoch, setFileInputEpoch] = useState(0);
+  const browserPickerOpen = useRef(false);
+  useLayoutEffect(() => {
+    pickerGeneration.current += 1;
+    browserPickerOpen.current = false;
+    return () => { pickerGeneration.current += 1; };
+  }, [sessionId, workspacePath]);
+  const invalidatePickers = (): void => {
+    pickerGeneration.current += 1;
+    browserPickerOpen.current = false;
+    setFileInputEpoch((epoch) => epoch + 1);
+  };
   const sessionIdRef = useRef(sessionId);
   // Whether a REAL session id has ever been seen. A switch goes A -> null -> B — `session_switched`
   // clears `sessionStatus` before `get-status` answers (`useSessionClient.ts`) — so `sessionId` turns
@@ -211,7 +228,7 @@ export const Composer = forwardRef<
   // state below by `setDraft`/`setAttachments`, the only two places that mutate it.
   const stateRef = useRef<IStoredDraft>(EMPTY_DRAFT);
   const [draft, setDraftState] = useState(() => {
-    const initial = readDraft(browserNamespace, sessionId);
+    const initial = draftMode === 'volatile' ? EMPTY_DRAFT : readDraft(browserNamespace, sessionId);
     stateRef.current = initial;
     return initial.text;
   });
@@ -237,7 +254,7 @@ export const Composer = forwardRef<
   const setDraft = (value: string): void => {
     stateRef.current = { ...stateRef.current, text: value };
     setDraftState(value);
-    writeDraft(browserNamespace, sessionIdRef.current, stateRef.current);
+    if (draftMode === 'persistent') writeDraft(browserNamespace, sessionIdRef.current, stateRef.current);
   };
   /** #3282 §4d: attachment chips persist alongside the text, under the same per-session draft key. */
   const setAttachments = (
@@ -246,7 +263,7 @@ export const Composer = forwardRef<
     const next = typeof updater === 'function' ? updater(stateRef.current.attachments) : updater;
     stateRef.current = { ...stateRef.current, attachments: next };
     setAttachmentsState(next);
-    writeDraft(browserNamespace, sessionIdRef.current, stateRef.current);
+    if (draftMode === 'persistent') writeDraft(browserNamespace, sessionIdRef.current, stateRef.current);
   };
   // #3280 §4: a session switch shows THAT session's own saved draft, never what was typed for
   // another one. The session id becoming known for the very FIRST time (the fallback key was in use
@@ -256,6 +273,7 @@ export const Composer = forwardRef<
   // arrives, so keystrokes typed during the round trip never land under the wrong session (or the
   // fallback key).
   useEffect(() => {
+    if (draftMode === 'volatile') return;
     if (sessionId === undefined && hasKnownSessionRef.current) return;
     if (sessionIdRef.current === sessionId) return;
     const firstArrival = !hasKnownSessionRef.current;
@@ -274,24 +292,23 @@ export const Composer = forwardRef<
     setDraftState(stored.text);
     setAttachmentsState(stored.attachments);
     setAttachmentNotice(null); // a notice belongs to the attempt just made in the session left behind
-  }, [browserNamespace, sessionId]);
+  }, [browserNamespace, draftMode, sessionId]);
 
   const submit = (): void => {
     if (!connected) return;
     const text = draft.trim();
     if (!text && attachments.length === 0) return;
+    invalidatePickers();
     onSubmit(buildPromptWithAttachments(text, attachments));
     setDraft('');
     setAttachments([]);
     setAttachmentNotice(null);
   };
-  const workspacePath = status?.workspace?.path;
-  const totalAttachedBytes = attachments.reduce((sum, a) => sum + a.size, 0);
   /** Evaluate every dropped/picked file in order, so a mixed batch attaches what it can. */
   const addCandidates = (candidates: readonly ICandidateFile[]): void => {
     if (candidates.length === 0) return;
-    let total = totalAttachedBytes;
-    let count = attachments.length;
+    let total = stateRef.current.attachments.reduce((sum, attachment) => sum + attachment.size, 0);
+    let count = stateRef.current.attachments.length;
     const added: IDraftAttachment[] = [];
     let notice: string | null = null;
     for (const candidate of candidates) {
@@ -317,22 +334,37 @@ export const Composer = forwardRef<
     absolutePath: getPathForFile ? getPathForFile(file) || undefined : undefined,
   });
   const fileInputRef = useRef<HTMLInputElement>(null);
+  useEffect(() => {
+    const input = fileInputRef.current;
+    if (!input) return;
+    const cancel = (): void => { browserPickerOpen.current = false; };
+    input.addEventListener('cancel', cancel);
+    return () => { input.removeEventListener('cancel', cancel); };
+  }, [sessionId, workspacePath, fileInputEpoch]);
   const handleAttachClick = (): void => {
     if (!connected) return;
     if (pickFiles) {
+      const generation = pickerGeneration.current;
       pickFiles()
-        .then((picked) =>
-          addCandidates(picked.map((f) => ({ name: f.name, size: f.size, absolutePath: f.path }))),
-        )
+        .then((picked) => {
+          if (generation !== pickerGeneration.current) return;
+          addCandidates(picked.map((f) => ({ name: f.name, size: f.size, absolutePath: f.path })));
+        })
         // The host's dialog IPC can reject (e.g. the window closed mid-pick) — say so rather than
         // leaving an unhandled rejection and a button that silently did nothing (rule 5: never fail
         // silently).
-        .catch(() => setAttachmentNotice('Could not open the file picker. Try again.'));
+        .catch(() => {
+          if (generation !== pickerGeneration.current) return;
+          setAttachmentNotice('Could not open the file picker. Try again.');
+        });
       return;
     }
+    if (browserPickerOpen.current) return;
+    browserPickerOpen.current = true;
     fileInputRef.current?.click();
   };
   const handleFileInputChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
+    browserPickerOpen.current = false;
     const files = Array.from(event.target.files ?? []);
     event.target.value = ''; // allow picking the same (rejected) file again after fixing it
     addCandidates(files.map(toCandidateFromFile));
@@ -365,6 +397,7 @@ export const Composer = forwardRef<
   /** Choosing a command from the menu, by mouse or by keyboard (`acceptMenu` below). */
   const chooseMenuItem = (item: ICommandMenuItem): void => {
     if (isImmediateScreenCommand(item)) {
+      invalidatePickers();
       setDraft('');
       onCommand(item.name);
       return;
@@ -541,6 +574,7 @@ export const Composer = forwardRef<
         )}
         <input
           ref={fileInputRef}
+          key={JSON.stringify([sessionId ?? null, workspacePath ?? null, fileInputEpoch])}
           type="file"
           multiple
           onChange={handleFileInputChange}
@@ -637,6 +671,16 @@ export const Composer = forwardRef<
   );
 });
 
+/** Volatile state belongs to one session and never crosses a mode or session boundary. */
+export const Composer = forwardRef<IComposerHandle, React.ComponentProps<typeof ComposerInstance>>(
+  function Composer(props, ref) {
+    const key = props.draftMode === 'volatile'
+      ? JSON.stringify(['volatile', props.status?.sessionId ?? null])
+      : 'persistent';
+    return <ComposerInstance {...props} key={key} ref={ref} />;
+  },
+);
+
 /**
  * The goal being pursued (`/goal`), above the composer while it is active — the objective, how far
  * the turn budget has gone, and a way to stop it (`/goal cancel`).

package/src/components/ExecutionDetailSheet.tsx

@@ -15,6 +15,8 @@ const STATUS_TAG_TONE: Record<string, string> = {
   muted: 'bg-subtle/15 text-subtle',
 };
 
+const FOLLOW_BOTTOM_MARGIN_PX = 32;
+
 const RECORD_KIND_LABEL: Record<IExecutionDetailRecord['kind'], string> = {
   message: '',
   tool_activity: 'Tool',
@@ -39,6 +41,13 @@ export function ExecutionDetailSheet({
   onClose,
   onLoadMore,
   onStop,
+  onSend,
+  inputState,
+  onContinue,
+  mode = 'live',
+  unreadable,
+  onShowEarlier,
+  onShowLive,
 }: {
   entry: IExecutionWorkspaceEntry | null;
   status: TExecutionDetailStatus;
@@ -48,10 +57,45 @@ export function ExecutionDetailSheet({
   onClose: () => void;
   onLoadMore: () => void;
   onStop?: () => void;
+  onSend?: (prompt: string) => void;
+  inputState?: { taskId: string; status: 'pending' | 'sent' | 'failed' };
+  onContinue?: () => void;
+  mode?: 'live' | 'transcript';
+  unreadable?: { locked: number; noKeys: number; doesNotOpen: number };
+  onShowEarlier?: () => void;
+  onShowLive?: () => void;
 }): React.ReactElement | null {
+  const [prompt, setPrompt] = React.useState('');
+  const submitted = React.useRef<string | null>(null);
+  const outputRef = React.useRef<HTMLDivElement | null>(null);
+  const followingRef = React.useRef(true);
+  const isFork = Boolean(entry?.resumeSessionId && entry.controls.includes('attach'));
+  React.useLayoutEffect(() => {
+    followingRef.current = true;
+  }, [entry?.id, mode]);
+  React.useLayoutEffect(() => {
+    const output = outputRef.current;
+    if (output && isFork && mode === 'live' && followingRef.current) {
+      output.scrollTop = output.scrollHeight;
+    }
+  }, [entry?.id, isFork, mode, records]);
+  React.useEffect(() => {
+    setPrompt('');
+    submitted.current = null;
+  }, [entry?.id]);
+  React.useEffect(() => {
+    if (!entry || inputState?.taskId !== entry.sourceId || inputState.status === 'pending') return;
+    if (inputState.status === 'sent' && submitted.current !== null) {
+      const sent = submitted.current;
+      setPrompt((current) => (current.trim() === sent ? '' : current));
+    }
+    submitted.current = null;
+  }, [entry, inputState]);
   if (!entry) return null;
   const described = describeExecutionEntryStatus(entry);
   const canStop = onStop !== undefined && entry.controls.includes('cancel');
+  const ended =
+    entry.status === 'completed' || entry.status === 'failed' || entry.status === 'cancelled';
   const askedLine = entry.headline?.text ?? entry.preview;
 
   return (
@@ -105,11 +149,39 @@ export function ExecutionDetailSheet({
       )}
       {entry.deniedToolCalls !== undefined && entry.deniedToolCalls > 0 && (
         <p className="flex-shrink-0 px-4 pt-2 text-[12px] text-warning">
-          {entry.deniedToolCalls} tool {entry.deniedToolCalls === 1 ? 'call was' : 'calls were'} refused.
+          {entry.deniedToolCalls} tool {entry.deniedToolCalls === 1 ? 'call was' : 'calls were'}{' '}
+          refused.
         </p>
       )}
 
-      <div className="flex-1 space-y-2 overflow-y-auto px-4 py-3">
+      {isFork && onShowEarlier && onShowLive && (
+        <div className="flex gap-3 border-b border-subtle/15 px-4 py-2 text-[12px]">
+          <button type="button" onClick={onShowLive} disabled={mode === 'live'}>
+            Live output
+          </button>
+          <button type="button" onClick={onShowEarlier} disabled={mode === 'transcript'}>
+            Earlier output
+          </button>
+        </div>
+      )}
+      <div
+        ref={outputRef}
+        role={isFork ? (mode === 'live' ? 'log' : 'region') : undefined}
+        aria-label={
+          isFork ? (mode === 'live' ? 'Live fork output' : 'Earlier fork output') : undefined
+        }
+        aria-live={isFork && mode === 'live' ? 'polite' : undefined}
+        aria-relevant={isFork && mode === 'live' ? 'additions text' : undefined}
+        aria-atomic={isFork && mode === 'live' ? false : undefined}
+        tabIndex={isFork ? 0 : undefined}
+        onScroll={(event) => {
+          if (!isFork || mode !== 'live') return;
+          const output = event.currentTarget;
+          followingRef.current =
+            output.scrollHeight - output.scrollTop - output.clientHeight <= FOLLOW_BOTTOM_MARGIN_PX;
+        }}
+        className="flex-1 space-y-2 overflow-y-auto px-4 py-3"
+      >
         {records.map((record) => (
           <div key={record.id} className="text-[13px] leading-relaxed text-foreground">
             {RECORD_KIND_LABEL[record.kind] && (
@@ -124,7 +196,13 @@ export function ExecutionDetailSheet({
           <p className="text-[13px] text-subtle">Loading…</p>
         )}
         {error && <p className="text-[13px] text-destructive">{error}</p>}
-        {!complete && status !== 'loading' && (
+        {unreadable && (
+          <p className="text-[12px] text-warning">
+            Some records could not be read: {unreadable.locked} locked, {unreadable.noKeys} without
+            keys, {unreadable.doesNotOpen} unavailable.
+          </p>
+        )}
+        {(!isFork || mode === 'transcript') && !complete && status !== 'loading' && (
           <button
             type="button"
             onClick={onLoadMore}
@@ -133,10 +211,42 @@ export function ExecutionDetailSheet({
             Load more
           </button>
         )}
-        {!complete && status === 'loading' && records.length > 0 && (
-          <p className="text-[12px] text-subtle">Loading more…</p>
-        )}
+        {(!isFork || mode === 'transcript') &&
+          !complete &&
+          status === 'loading' &&
+          records.length > 0 && <p className="text-[12px] text-subtle">Loading more…</p>}
       </div>
+      {isFork && !ended && entry.controls.includes('send') && onSend && (
+        <form
+          className="border-t border-subtle/15 p-3"
+          onSubmit={(event) => {
+            event.preventDefault();
+            if (!prompt.trim() || submitted.current !== null || inputState?.status === 'pending')
+              return;
+            submitted.current = prompt.trim();
+            onSend(submitted.current);
+          }}
+        >
+          <textarea
+            aria-label="Message the fork"
+            value={prompt}
+            onChange={(event) => setPrompt(event.target.value)}
+            className="w-full rounded border border-subtle/20 bg-background p-2 text-foreground"
+          />
+          <button type="submit" disabled={!prompt.trim() || inputState?.status === 'pending'}>
+            Send to fork
+          </button>
+        </form>
+      )}
+      {isFork && ended && onContinue && (
+        <button
+          type="button"
+          onClick={onContinue}
+          className="border-t border-subtle/15 p-3 text-foreground"
+        >
+          Continue as session
+        </button>
+      )}
     </div>
   );
 }

package/src/components/SessionSurface.tsx

@@ -107,6 +107,7 @@ export function SessionSurface({
   state,
   surface,
   personalUsageEnabled = false,
+  draftMode = 'persistent',
   onReconnect,
   pickFiles,
   getPathForFile,
@@ -117,6 +118,8 @@ export function SessionSurface({
   surface?: string;
   /** Desktop shells opt in; embedded/session-only surfaces keep their existing chat-only contract. */
   personalUsageEnabled?: boolean;
+  /** Secure desktop discards unsent text and attachment paths when the session closes. */
+  draftMode?: 'persistent' | 'volatile';
   /**
    * Present only when the host can restart the runtime after the connection is lost for good (issue
    * #3280 §5, the desktop app); absent in the browser, where the banner says how to reopen it instead.
@@ -356,6 +359,7 @@ export function SessionSurface({
                 {setupRequired ? null : (
                   <Composer
                     ref={composerRef}
+                    draftMode={draftMode}
                     catalog={state.commandCatalog ?? null}
                     status={state.sessionStatus ?? null}
                     connected={state.status === 'connected'}
@@ -425,6 +429,28 @@ export function SessionSurface({
               onClose={() => state.closeExecutionDetail()}
               onLoadMore={() => state.loadMoreExecutionDetail()}
               onStop={openEntry ? () => stopExecutionEntry(openEntry) : undefined}
+              inputState={state.executionDetailInput}
+              mode={state.executionDetailMode}
+              unreadable={state.executionDetailUnreadable}
+              onShowEarlier={state.showEarlierExecutionDetail}
+              onShowLive={state.showLiveExecutionDetail}
+              onSend={
+                openEntry
+                  ? (prompt) =>
+                      state.send({
+                        type: 'send-background-task',
+                        taskId: openEntry.sourceId,
+                        input: { prompt },
+                      })
+                  : undefined
+              }
+              onContinue={
+                openEntry?.resumeSessionId
+                  ? () => {
+                      if (openEntry.resumeSessionId) state.switchSession(openEntry.resumeSessionId);
+                    }
+                  : undefined
+              }
             />
           </div>
         )}

package/src/hooks/session-client-types.ts

@@ -286,6 +286,11 @@ export interface IWsSessionState<TStatus extends string = TConnectionStatus> {
   executionDetailError: string | null;
   /** True once the last page read had no further cursor — nothing more to load. */
   executionDetailComplete: boolean;
+  executionDetailInput?: { taskId: string; status: 'pending' | 'sent' | 'failed' };
+  executionDetailMode?: 'live' | 'transcript';
+  executionDetailUnreadable?: { locked: number; noKeys: number; doesNotOpen: number };
+  showEarlierExecutionDetail?: () => void;
+  showLiveExecutionDetail?: () => void;
   openExecutionDetail: (entryId: string) => void;
   loadMoreExecutionDetail: () => void;
   closeExecutionDetail: () => void;