@kirosnn/mosaic 0.0.9 → 0.71.0

package/src/components/main/ChatPage.tsx

@@ -1,33 +1,57 @@
-import { useEffect, useState } from "react";
+import { useEffect, useState, useRef } from "react";
 import { TextAttributes } from "@opentui/core";
 import { renderMarkdownSegment, parseAndWrapMarkdown } from "../../utils/markdown";
 import { getToolParagraphIndent, getToolWrapTarget, getToolWrapWidth } from "../../utils/toolFormatting";
 import { subscribeQuestion, answerQuestion, type QuestionRequest } from "../../utils/questionBridge";
 import { subscribeApproval, respondApproval, type ApprovalRequest } from "../../utils/approvalBridge";
+import { subscribeApprovalMode } from "../../utils/approvalModeBridge";
+import { shouldRequireApprovals } from "../../utils/config";
 import { subscribeFileChanges } from "../../utils/fileChangesBridge";
 import type { FileChanges } from "../../utils/fileChangeTracker";
 import { CustomInput } from "../CustomInput";
 import type { Message } from "./types";
+import type { ImageAttachment } from "../../utils/images";
 import { wrapText } from "./wrapText";
 import { QuestionPanel } from "./QuestionPanel";
 import { ApprovalPanel } from "./ApprovalPanel";
-import { ThinkingIndicatorBlock, getBottomReservedLinesForInputBar, getInputBarBaseLines, getInputAreaTotalLines, formatElapsedTime } from "./ThinkingIndicator";
+import { ThinkingIndicatorBlock, getBottomReservedLinesForInputBar, getInputBarBaseLines, formatElapsedTime } from "./ThinkingIndicator";
 import { renderInlineDiffLine, getDiffLineBackground } from "../../utils/diffRendering";
 
-function renderToolText(content: string, paragraphIndex: number, indent: number) {
+function renderToolText(content: string, paragraphIndex: number, indent: number, wrappedLineIndex: number) {
   if (paragraphIndex === 0) {
-    const match = content.match(/^(.+?)\s*\((.+)\)$/);
-    if (match) {
-      const [, toolName, toolInfo] = match;
-      return (
-        <>
-          <text fg="white">{toolName}</text>
-          <text fg="white" attributes={TextAttributes.DIM}> ({toolInfo})</text>
-        </>
-      );
+    if (wrappedLineIndex === 0) {
+      const match = content.match(/^(.+?)\s*(\(.*)$/);
+      if (match) {
+        const [, toolName, toolInfo] = match;
+        return (
+          <>
+            <text fg="white">{toolName} </text>
+            <text fg="white" attributes={TextAttributes.DIM}>{toolInfo}</text>
+          </>
+        );
+      }
+    } else {
+      return <text fg="white" attributes={TextAttributes.DIM}>{`  ${content || ' '}`}</text>;
     }
   }
 
+  const planMatch = content.match(/^(\s*)>\s*(\[[~x ]\])?\s*(.*)$/);
+  if (planMatch) {
+    const [, leading, bracket, rest] = planMatch;
+    const bracketColor = bracket === '[~]' ? '#ffca38' : 'white';
+    return (
+      <>
+        <text fg="white">{leading || ''}</text>
+        <text fg="#ffca38">{'>'}</text>
+        <text fg="white"> </text>
+        {bracket ? <text fg={bracketColor}>{bracket}</text> : null}
+        {bracket ? <text fg="white"> </text> : null}
+        <text fg="white">{rest || ' '}</text>
+      </>
+    );
+  }
+
+
   const diffLineRender = renderInlineDiffLine(content);
   if (diffLineRender) {
     return diffLineRender;
@@ -36,6 +60,46 @@ function renderToolText(content: string, paragraphIndex: number, indent: number)
   return <text fg="white">{`${' '.repeat(indent)}${content || ' '}`}</text>;
 }
 
+function getPlanProgress(messages: Message[]): { inProgressStep?: string; nextStep?: string } {
+  for (let i = messages.length - 1; i >= 0; i -= 1) {
+    const message = messages[i];
+    if (!message || message.role !== 'tool' || message.toolName !== 'plan') continue;
+    const result = message.toolResult;
+    if (!result || typeof result !== 'object') continue;
+    const obj = result as Record<string, unknown>;
+    const planItems = Array.isArray(obj.plan) ? obj.plan : [];
+    const normalized = planItems
+      .map((item) => {
+        if (!item || typeof item !== 'object') return null;
+        const entry = item as Record<string, unknown>;
+        const step = typeof entry.step === 'string' ? entry.step.trim() : '';
+        const status = typeof entry.status === 'string' ? entry.status : 'pending';
+        if (!step) return null;
+        return { step, status };
+      })
+      .filter((item): item is { step: string; status: string } => !!item);
+
+    if (normalized.length === 0) return {};
+
+    const inProgressIndex = normalized.findIndex(item => item.status === 'in_progress');
+    const inProgressStep = inProgressIndex >= 0 ? normalized[inProgressIndex]?.step : undefined;
+    let nextStep: string | undefined;
+
+    if (inProgressIndex >= 0) {
+      const after = normalized.slice(inProgressIndex + 1).find(item => item.status === 'pending');
+      nextStep = after?.step;
+    }
+
+    if (!nextStep) {
+      nextStep = normalized.find(item => item.status === 'pending')?.step;
+    }
+
+    return { inProgressStep, nextStep };
+  }
+
+  return {};
+}
+
 interface ChatPageProps {
   messages: Message[];
   isProcessing: boolean;
@@ -47,6 +111,7 @@ interface ChatPageProps {
   pasteRequestId: number;
   shortcutsOpen: boolean;
   onSubmit: (value: string, meta?: import("../CustomInput").InputSubmitMeta) => void;
+  pendingImages: ImageAttachment[];
 }
 
 export function ChatPage({
@@ -60,12 +125,15 @@ export function ChatPage({
   pasteRequestId,
   shortcutsOpen,
   onSubmit,
+  pendingImages,
 }: ChatPageProps) {
   const maxWidth = Math.max(20, terminalWidth - 6);
   const [questionRequest, setQuestionRequest] = useState<QuestionRequest | null>(null);
   const [approvalRequest, setApprovalRequest] = useState<ApprovalRequest | null>(null);
   const [fileChanges, setFileChanges] = useState<FileChanges>({ linesAdded: 0, linesRemoved: 0, filesModified: 0 });
   const [, setTimerTick] = useState(0);
+  const [requireApprovals, setRequireApprovals] = useState(shouldRequireApprovals());
+  const scrollboxRef = useRef<any>(null);
 
   useEffect(() => {
     return subscribeQuestion(setQuestionRequest);
@@ -75,6 +143,12 @@ export function ChatPage({
     return subscribeApproval(setApprovalRequest);
   }, []);
 
+  useEffect(() => {
+    return subscribeApprovalMode((require) => {
+      setRequireApprovals(require);
+    });
+  }, []);
+
   useEffect(() => {
     return subscribeFileChanges(setFileChanges);
   }, []);
@@ -88,11 +162,22 @@ export function ChatPage({
     }, 1000);
     return () => clearInterval(interval);
   }, [messages]);
+  useEffect(() => {
+    const sb = scrollboxRef.current;
+    if (sb?.verticalScrollBar) {
+      sb.verticalScrollBar.visible = false;
+    }
+  }, []);
 
+  const planProgress = getPlanProgress(messages);
+  const extraInputLines = pendingImages.length > 0 ? 1 : 0;
+  const inputBarBaseLines = getInputBarBaseLines() + extraInputLines;
   const bottomReservedLines = getBottomReservedLinesForInputBar({
     isProcessing,
     hasQuestion: Boolean(questionRequest) || Boolean(approvalRequest),
-  });
+    inProgressStep: planProgress.inProgressStep,
+    nextStep: planProgress.nextStep,
+  }) + extraInputLines;
   const viewportHeight = Math.max(5, terminalHeight - (bottomReservedLines + 2));
 
   interface RenderItem {
@@ -100,9 +185,11 @@ export function ChatPage({
     type: 'line' | 'question' | 'approval' | 'blend';
     content?: string;
     role: "user" | "assistant" | "tool" | "slash";
+    toolName?: string;
     isFirst: boolean;
     indent?: number;
     paragraphIndex?: number;
+    wrappedLineIndex?: number;
     segments?: import("../../utils/markdown").MarkdownSegment[];
     success?: boolean;
     isError?: boolean;
@@ -114,6 +201,7 @@ export function ChatPage({
     blendWord?: string;
     isRunning?: boolean;
     runningStartTime?: number;
+    isThinking?: boolean;
   }
 
   const allItems: RenderItem[] = [];
@@ -138,6 +226,49 @@ export function ChatPage({
     }
 
     if (messageRole === 'assistant') {
+      if (message.thinkingContent) {
+        const headerLines = wrapText('Thinking:', maxWidth);
+        for (let i = 0; i < headerLines.length; i++) {
+          allItems.push({
+            key: `${messageKey}-thinking-header-${i}`,
+            type: 'line',
+            content: headerLines[i] || '',
+            role: messageRole,
+            isFirst: false,
+            visualLines: 1,
+            isThinking: true
+          });
+        }
+
+        const thinkingLines = message.thinkingContent.split('\n');
+        for (let i = 0; i < thinkingLines.length; i++) {
+          const wrapped = wrapText(thinkingLines[i] || '', Math.max(10, maxWidth - 2));
+          for (let j = 0; j < wrapped.length; j++) {
+            allItems.push({
+              key: `${messageKey}-thinking-${i}-${j}`,
+              type: 'line',
+              content: wrapped[j] || '',
+              role: messageRole,
+              isFirst: false,
+              indent: 2,
+              visualLines: 1,
+              isThinking: true
+            });
+          }
+        }
+
+        allItems.push({
+          key: `${messageKey}-thinking-spacer`,
+          type: 'line',
+          content: '',
+          role: messageRole,
+          isFirst: false,
+          isSpacer: true,
+          visualLines: 1,
+          isThinking: true
+        });
+      }
+
       const blocks = parseAndWrapMarkdown(message.content, maxWidth);
       let isFirstContent = true;
 
@@ -153,6 +284,7 @@ export function ChatPage({
               type: 'line',
               content: wrapped.text || '',
               role: messageRole,
+              toolName: message.toolName,
               isFirst: isFirstContent && j === 0,
               segments: wrapped.segments,
               isError: message.isError,
@@ -165,6 +297,26 @@ export function ChatPage({
         }
       }
     } else {
+      if (messageRole === "user" && message.images && message.images.length > 0) {
+        for (let i = 0; i < message.images.length; i++) {
+          const image = message.images[i]!;
+          allItems.push({
+            key: `${messageKey}-image-${i}`,
+            type: "line",
+            content: `[image] ${image.name}`,
+            role: messageRole,
+            toolName: message.toolName,
+            isFirst: i === 0,
+            indent: 0,
+            paragraphIndex: 0,
+            wrappedLineIndex: 0,
+            success: (messageRole === "tool" || messageRole === "slash") ? message.success : undefined,
+            isSpacer: false,
+            visualLines: 1
+          });
+        }
+      }
+
       const messageText = message.displayContent ?? message.content;
       const paragraphs = messageText.split('\n');
       let isFirstContent = true;
@@ -177,9 +329,11 @@ export function ChatPage({
             type: 'line',
             content: '',
             role: messageRole,
+            toolName: message.toolName,
             isFirst: false,
             indent: messageRole === 'tool' ? getToolParagraphIndent(i) : 0,
             paragraphIndex: i,
+            wrappedLineIndex: 0,
             success: (messageRole === 'tool' || messageRole === 'slash') ? message.success : undefined,
             isSpacer: messageRole !== 'tool' && messageRole !== 'slash',
             visualLines: 1,
@@ -197,9 +351,11 @@ export function ChatPage({
               type: 'line',
               content: wrappedLines[j] || '',
               role: messageRole,
+              toolName: message.toolName,
               isFirst: isFirstContent && i === 0 && j === 0,
               indent,
               paragraphIndex: i,
+              wrappedLineIndex: j,
               success: (messageRole === 'tool' || messageRole === 'slash') ? message.success : undefined,
               isSpacer: false,
               visualLines: 1,
@@ -218,6 +374,7 @@ export function ChatPage({
         type: 'line',
         content: '',
         role: messageRole,
+        toolName: message.toolName,
         isFirst: false,
         indent: 2,
         paragraphIndex: 1,
@@ -242,6 +399,7 @@ export function ChatPage({
       type: 'line',
       content: '',
       role: messageRole,
+      toolName: message.toolName,
       isFirst: false,
       isSpacer: true,
       visualLines: 1
@@ -339,45 +497,29 @@ export function ChatPage({
   const totalVisualLines = allItems.reduce((sum, item) => sum + item.visualLines, 0);
   const maxScrollOffset = Math.max(0, totalVisualLines - viewportHeight);
   const clampedScrollOffset = Math.max(0, Math.min(scrollOffset, maxScrollOffset));
+  const scrollYPosition = Math.max(0, totalVisualLines - viewportHeight - clampedScrollOffset);
 
-  let visibleLines: RenderItem[] = [];
-
-  if (allItems.length === 0) {
-    visibleLines = [];
-  } else {
-    const targetEndLine = totalVisualLines - clampedScrollOffset;
-    const targetStartLine = Math.max(0, targetEndLine - viewportHeight);
-
-    let currentLine = 0;
-    let startIdx = -1;
-    let endIdx = -1;
-
-    for (let i = 0; i < allItems.length; i++) {
-      const item = allItems[i]!;
-      const itemEndLine = currentLine + item.visualLines;
-
-      if (startIdx === -1 && itemEndLine > targetStartLine) {
-        startIdx = i;
-      }
-
-      if (endIdx === -1 && itemEndLine >= targetEndLine) {
-        endIdx = i + 1;
-        break;
-      }
-
-      currentLine = itemEndLine;
+  useEffect(() => {
+    if (scrollboxRef.current && typeof scrollboxRef.current.scrollTop === 'number') {
+      scrollboxRef.current.scrollTop = scrollYPosition;
     }
-
-    if (startIdx === -1) startIdx = 0;
-    if (endIdx === -1) endIdx = allItems.length;
-
-    visibleLines = allItems.slice(startIdx, endIdx);
-  }
+  }, [scrollYPosition]);
 
   return (
     <box flexDirection="column" width="100%" height="100%" position="relative">
-      <box flexGrow={1} flexDirection="column" width="100%" paddingLeft={1} paddingRight={1} paddingTop={1} paddingBottom={bottomReservedLines}>
-        {visibleLines.map((item) => {
+      <scrollbox
+        ref={scrollboxRef}
+        scrollY
+        stickyScroll={scrollOffset === 0}
+        stickyStart="bottom"
+        viewportCulling
+        width="100%"
+        height={viewportHeight}
+        paddingLeft={1}
+        paddingRight={1}
+        paddingTop={1}
+      >
+        {allItems.map((item) => {
           if (item.type === 'question') {
             const req = item.questionRequest;
             if (!req) return null;
@@ -410,7 +552,7 @@ export function ChatPage({
             if (item.blendDuration && item.blendDuration > 60000) {
               const timeStr = formatElapsedTime(item.blendDuration, false);
               return (
-                <box key={item.key} flexDirection="row" width="100%" paddingLeft={1}>
+                <box key={item.key} flexDirection="row" width="100%" paddingLeft={1} marginBottom={1}>
                   <text attributes={TextAttributes.DIM}>⁘ {item.blendWord} for {timeStr}</text>
                 </box>
               );
@@ -419,7 +561,7 @@ export function ChatPage({
           }
 
           const showErrorBar = item.role === "assistant" && item.isError && item.isFirst && item.content;
-          const showToolBar = item.role === "tool" && item.isSpacer === false;
+          const showToolBar = item.role === "tool" && item.isSpacer === false && item.toolName !== "plan";
           const showSlashBar = item.role === "slash" && item.isSpacer === false;
           const showToolBackground = item.role === "tool" && item.isSpacer === false;
           const showSlashBackground = item.role === "slash" && item.isSpacer === false;
@@ -452,11 +594,13 @@ export function ChatPage({
               {showErrorBar && (
                 <text fg="#ff3838">▎ </text>
               )}
-              {item.role === "tool" ? (
+              {item.isThinking ? (
+                <text fg="#9a9a9a" attributes={TextAttributes.DIM}>{`${' '.repeat(item.indent || 0)}${item.content || ' '}`}</text>
+              ) : item.role === "tool" ? (
                 isRunningTool && item.runningStartTime && item.paragraphIndex === 1 ? (
                   <text fg="#ffffff" attributes={TextAttributes.DIM}>  Running... {Math.floor((Date.now() - item.runningStartTime) / 1000)}s</text>
                 ) : (
-                  renderToolText(item.content || ' ', item.paragraphIndex || 0, item.indent || 0)
+                  renderToolText(item.content || ' ', item.paragraphIndex || 0, item.indent || 0, item.wrappedLineIndex || 0)
                 )
               ) : item.role === "user" || item.role === "slash" ? (
                 <text fg="white">{`${' '.repeat(item.indent || 0)}${item.content || ' '}`}</text>
@@ -470,7 +614,7 @@ export function ChatPage({
             </box>
           );
         })}
-      </box>
+      </scrollbox>
 
       <box
         position="absolute"
@@ -484,16 +628,23 @@ export function ChatPage({
         paddingTop={0}
         paddingBottom={0}
         flexShrink={0}
-        minHeight={getInputBarBaseLines()}
+        minHeight={inputBarBaseLines}
         minWidth="100%"
       >
+        {pendingImages.length > 0 && (
+          <box flexDirection="row" width="100%" marginBottom={1}>
+            <text fg="#ffca38">Images: </text>
+            <text fg="gray">{pendingImages.map((img) => img.name).join(", ")}</text>
+          </box>
+        )}
         <box flexDirection="row" alignItems="center" width="100%" flexGrow={1} minWidth={0}>
           <box flexGrow={1} flexShrink={1} minWidth={0}>
             <CustomInput
               onSubmit={onSubmit}
               placeholder="Type your message..."
-              focused={!isProcessing && !shortcutsOpen && !questionRequest && !approvalRequest}
+              focused={!shortcutsOpen && !questionRequest && !approvalRequest}
               pasteRequestId={shortcutsOpen ? 0 : pasteRequestId}
+              submitDisabled={isProcessing || shortcutsOpen || Boolean(questionRequest) || Boolean(approvalRequest)}
             />
           </box>
         </box>
@@ -501,16 +652,24 @@ export function ChatPage({
 
       <box position="absolute" bottom={0} left={0} right={0} flexDirection="row" paddingLeft={1} paddingRight={1} justifyContent="space-between">
         <box flexDirection="row" gap={1}>
-          <text>—</text>
+          <text fg="#ffca38">{requireApprovals ? '' : '⏵⏵ auto-accept edits on'}</text>
+          <text attributes={TextAttributes.DIM}>{requireApprovals ? '' : ' — '}</text>
           <text fg="#4d8f29">+{fileChanges.linesAdded}</text>
           <text fg="#d73a49">-{fileChanges.linesRemoved}</text>
         </box>
         <text attributes={TextAttributes.DIM}>ctrl+o to see commands — ctrl+p to view shortcuts</text>
       </box>
 
-      <box position="absolute" bottom={getInputBarBaseLines() + 1} left={0} right={0} flexDirection="column" paddingLeft={1} paddingRight={1}>
-        <ThinkingIndicatorBlock isProcessing={isProcessing} hasQuestion={Boolean(questionRequest) || Boolean(approvalRequest)} startTime={processingStartTime} tokens={currentTokens} />
+      <box position="absolute" bottom={inputBarBaseLines + 1} left={0} right={0} flexDirection="column" paddingLeft={1} paddingRight={1}>
+        <ThinkingIndicatorBlock
+          isProcessing={isProcessing}
+          hasQuestion={Boolean(questionRequest) || Boolean(approvalRequest)}
+          startTime={processingStartTime}
+          tokens={currentTokens}
+          inProgressStep={planProgress.inProgressStep}
+          nextStep={planProgress.nextStep}
+        />
       </box>
     </box>
   );
-}
+}

package/src/components/main/HomePage.tsx

@@ -17,7 +17,11 @@ const TIPS = [
   "Use /clear to reset the current chat session.",
   "Use Tab to autocomplete commands and arguments.",
   "Use Ctrl + K to clear the current input line.",
+  "Use Ctrl + G to edit the current input in your system editor.",
   "Use /help to display the list of available commands.",
+  "Select text with the mouse to copy it automatically.",
+  "Attach an image with /image <path>.",
+  "Paste an image with Ctrl/Alt + V (or Cmd + V on macOS).",
 ];
 
 export function HomePage({ onSubmit, pasteRequestId, shortcutsOpen }: HomePageProps) {
@@ -108,4 +112,4 @@ export function HomePage({ onSubmit, pasteRequestId, shortcutsOpen }: HomePagePr
       </box>
     </box>
   );
-}
+}

package/src/components/main/ThinkingIndicator.tsx

@@ -7,6 +7,7 @@ interface ThinkingIndicatorProps {
     hasQuestion: boolean;
     startTime?: number | null;
     tokens?: number;
+    nextStep?: string;
 }
 
 export function getInputBarBaseLines(): number {
@@ -22,7 +23,8 @@ export function shouldShowThinkingIndicator({ isProcessing, hasQuestion }: Think
 }
 
 export function getBottomReservedLinesForInputBar(props: ThinkingIndicatorProps): number {
-    return getInputBarBaseLines() + (shouldShowThinkingIndicator(props) ? 2 : 0) + 2;
+    const indicatorLines = shouldShowThinkingIndicator(props) ? (props.nextStep ? 3 : 2) : 0;
+    return getInputBarBaseLines() + indicatorLines + 2;
 }
 
 export function formatElapsedTime(ms: number | null | undefined, fromStartTime: boolean = true): string {
@@ -93,6 +95,14 @@ export function ThinkingIndicatorBlock(props: ThinkingIndicatorProps) {
     return (
         <box flexDirection="column" width="100%">
             <ThinkingIndicator {...props} />
+            {props.nextStep ? (
+                <box flexDirection="row" width="100%" paddingLeft={2}>
+                    <text fg="#ffca38" attributes={TextAttributes.BOLD}>⎿ </text>
+                    <text fg="#ffca38" attributes={TextAttributes.BOLD}>Next:</text>
+                    <text> </text>
+                    <text fg="white" attributes={TextAttributes.DIM}>{props.nextStep}</text>
+                </box>
+            ) : null}
             <box flexDirection="row" width="100%">
                 <text> </text>
             </box>

package/src/components/main/types.ts

@@ -26,15 +26,16 @@ export const THINKING_WORDS = [
     "Revolutionizing"
 ];
 
-export interface Message {
-  id: string;
-  role: "user" | "assistant" | "tool" | "slash";
-  displayRole?: "user" | "assistant" | "tool" | "slash";
-  displayContent?: string;
-  content: string;
-  toolName?: string;
-  toolArgs?: Record<string, unknown>;
-  toolResult?: unknown;
+export interface Message {
+  id: string;
+  role: "user" | "assistant" | "tool" | "slash";
+  displayRole?: "user" | "assistant" | "tool" | "slash";
+  displayContent?: string;
+  content: string;
+  images?: import("../../utils/images").ImageAttachment[];
+  toolName?: string;
+  toolArgs?: Record<string, unknown>;
+  toolResult?: unknown;
   success?: boolean;
   isError?: boolean;
   responseDuration?: number;
@@ -52,4 +53,4 @@ export interface MainProps {
   shortcutsOpen?: boolean;
   commandsOpen?: boolean;
   initialMessage?: string;
-}
+}

package/src/index.tsx

@@ -54,8 +54,9 @@ class CLI {
         parsed.directory = args[i + 1];
         i += 2;
       } else if (arg === 'run') {
-        parsed.initialMessage = args[i + 1];
-        i += 2;
+        const message = args.slice(i + 1).join(' ');
+        if (message) parsed.initialMessage = message;
+        i = args.length;
       } else if (arg === 'uninstall') {
         parsed.uninstall = true;
         if (args[i + 1] === '--force') {
@@ -82,9 +83,6 @@ class CLI {
     const gold = (text: string) => `\x1b[38;2;255;202;56m${text}\x1b[0m`;
 
     console.log('');
-    console.log(gold('███╗   ███╗'));
-    console.log(gold('████╗ ████║'));
-    console.log(gold('███╔████╔███║'));
     console.log(`
 Mosaic - AI-powered coding agent
 

package/src/utils/approvalBridge.ts

@@ -28,6 +28,11 @@ let listeners = new Set<ApprovalListener>();
 let acceptedListeners = new Set<ApprovalAcceptedListener>();
 let pendingResolve: ((response: ApprovalResponse) => void) | null = null;
 let pendingReject: ((reason?: any) => void) | null = null;
+let queuedRequests: {
+  request: ApprovalRequest;
+  resolve: (response: ApprovalResponse) => void;
+  reject: (reason?: any) => void;
+}[] = [];
 
 function notify(): void {
   for (const listener of listeners) {
@@ -69,10 +74,6 @@ export async function requestApproval(
   args: Record<string, unknown>,
   preview: { title: string; content: string; details?: string[] }
 ): Promise<{ approved: boolean; customResponse?: string }> {
-  if (pendingResolve) {
-    throw new Error('An approval request is already pending');
-  }
-
   const request: ApprovalRequest = {
     id: createId(),
     toolName,
@@ -80,12 +81,16 @@ export async function requestApproval(
     args,
   };
 
-  currentRequest = request;
-  notify();
-
   const response = await new Promise<ApprovalResponse>((resolve, reject) => {
+    if (pendingResolve) {
+      queuedRequests.push({ request, resolve, reject });
+      return;
+    }
+
+    currentRequest = request;
     pendingResolve = resolve;
     pendingReject = reject;
+    notify();
   });
 
   return { approved: response.approved, customResponse: response.customResponse };
@@ -114,6 +119,14 @@ export function respondApproval(approved: boolean, customResponse?: string): voi
   }
 
   resolve(response);
+
+  const next = queuedRequests.shift();
+  if (next) {
+    currentRequest = next.request;
+    pendingResolve = next.resolve;
+    pendingReject = next.reject;
+    notify();
+  }
 }
 
 export function cancelApproval(): void {
@@ -126,4 +139,12 @@ export function cancelApproval(): void {
   notify();
 
   reject(new Error('Interrupted by user'));
-}
+
+  const next = queuedRequests.shift();
+  if (next) {
+    currentRequest = next.request;
+    pendingResolve = next.resolve;
+    pendingReject = next.reject;
+    notify();
+  }
+}

package/src/utils/approvalModeBridge.ts

@@ -0,0 +1,17 @@
+import { shouldRequireApprovals } from './config'
+
+type ApprovalModeListener = (requireApprovals: boolean) => void
+
+const listeners = new Set<ApprovalModeListener>()
+
+export function subscribeApprovalMode(listener: ApprovalModeListener): () => void {
+  listeners.add(listener)
+  listener(shouldRequireApprovals())
+  return () => {
+    listeners.delete(listener)
+  }
+}
+
+export function emitApprovalMode(requireApprovals: boolean): void {
+  listeners.forEach((listener) => listener(requireApprovals))
+}