feat: bash mode (#267)

<img width="912" height="416" alt="image" src="https://github.com/user-attachments/assets/27bbde75-6bbb-469f-b08b-26c77d449b7e" />

<img width="1682" height="220" alt="image" src="https://github.com/user-attachments/assets/ce29a7df-efb4-489a-bff4-80d1a926878a" />

Author: jonathanlab

apps/array/src/main/preload.ts

@@ -408,4 +408,9 @@ contextBridge.exposeInMainWorld("electronAPI", {
   dockBadge: {
     show: (): Promise<void> => ipcRenderer.invoke("dock-badge:show"),
   },
+  shellExecute: (
+    cwd: string,
+    command: string,
+  ): Promise<{ stdout: string; stderr: string; exitCode: number }> =>
+    ipcRenderer.invoke("shell:execute", cwd, command),
 });

apps/array/src/main/services/shell.ts

@@ -1,3 +1,4 @@
+import { exec } from "node:child_process";
 import { createIpcHandler } from "../lib/ipcHandler";
 import { shellManager } from "../lib/shellManager";
 import { foldersStore } from "../utils/store";
@@ -56,4 +57,23 @@ export function registerShellIpc(): void {
   handle("shell:get-process", (_event, sessionId: string) => {
     return shellManager.getProcess(sessionId);
   });
+
+  handle(
+    "shell:execute",
+    async (
+      _event,
+      cwd: string,
+      command: string,
+    ): Promise<{ stdout: string; stderr: string; exitCode: number }> => {
+      return new Promise((resolve) => {
+        exec(command, { cwd, timeout: 60000 }, (error, stdout, stderr) => {
+          resolve({
+            stdout: stdout || "",
+            stderr: stderr || "",
+            exitCode: error?.code ?? 0,
+          });
+        });
+      });
+    },
+  );
 }

apps/array/src/renderer/features/sessions/components/ConversationView.tsx

@@ -10,8 +10,9 @@ import {
   isJsonRpcNotification,
   isJsonRpcRequest,
   isJsonRpcResponse,
+  type UserShellExecuteParams,
 } from "@shared/types/session-events";
-import { memo, useEffect, useMemo, useRef } from "react";
+import { memo, useLayoutEffect, useMemo, useRef } from "react";
 import { GitActionMessage, parseGitActionMessage } from "./GitActionMessage";
 import { GitActionResult } from "./GitActionResult";
 import { SessionFooter } from "./SessionFooter";
@@ -20,8 +21,13 @@ import {
   SessionUpdateView,
 } from "./session-update/SessionUpdateView";
 import { UserMessage } from "./session-update/UserMessage";
+import {
+  type UserShellExecute,
+  UserShellExecuteView,
+} from "./session-update/UserShellExecuteView";
 
 interface Turn {
+  type: "turn";
   id: string;
   promptId: number;
   userContent: string;
@@ -32,6 +38,8 @@ interface Turn {
   toolCalls: Map<string, ToolCall>;
 }
 
+type ConversationItem = Turn | UserShellExecute;
+
 interface ConversationViewProps {
   events: AcpMessage[];
   isPromptPending: boolean;
@@ -46,31 +54,39 @@ export function ConversationView({
   isCloud = false,
 }: ConversationViewProps) {
   const scrollRef = useRef<HTMLDivElement>(null);
-  const turns = useMemo(() => buildTurns(events), [events]);
-  const lastTurn = turns[turns.length - 1];
+  const items = useMemo(() => buildConversationItems(events), [events]);
+  const lastTurn = items.filter((i): i is Turn => i.type === "turn").pop();
   const lastTurnComplete = lastTurn?.isComplete ?? true;
 
-  useEffect(() => {
+  // Scroll to bottom on initial mount
+  const hasScrolledRef = useRef(false);
+  useLayoutEffect(() => {
+    if (hasScrolledRef.current) return;
     const el = scrollRef.current;
-    if (el) {
+    if (el && items.length > 0) {
       el.scrollTop = el.scrollHeight;
+      hasScrolledRef.current = true;
     }
-  }, []);
+  }, [items]);
 
   return (
     <div
       ref={scrollRef}
       className="scrollbar-hide flex-1 overflow-auto bg-white p-2 pb-16 dark:bg-gray-1"
     >
       <div className="flex flex-col gap-3">
-        {turns.map((turn) => (
-          <TurnView
-            key={turn.id}
-            turn={turn}
-            repoPath={repoPath}
-            isCloud={isCloud}
-          />
-        ))}
+        {items.map((item) =>
+          item.type === "turn" ? (
+            <TurnView
+              key={item.id}
+              turn={item}
+              repoPath={repoPath}
+              isCloud={isCloud}
+            />
+          ) : (
+            <UserShellExecuteView key={item.id} item={item} />
+          ),
+        )}
       </div>
       <SessionFooter
         isPromptPending={isPromptPending || !lastTurnComplete}
@@ -138,20 +154,38 @@ const TurnView = memo(function TurnView({
 
 // --- Event Processing ---
 
-function buildTurns(events: AcpMessage[]): Turn[] {
-  const turns: Turn[] = [];
-  let current: Turn | null = null;
+function buildConversationItems(events: AcpMessage[]): ConversationItem[] {
+  const items: ConversationItem[] = [];
+  let currentTurn: Turn | null = null;
   // Map prompt request IDs to their turns for matching responses
   const pendingPrompts = new Map<number, Turn>();
+  let shellExecuteCounter = 0;
 
   for (const event of events) {
     const msg = event.message;
 
+    // User shell execute notification - standalone item
+    if (
+      isJsonRpcNotification(msg) &&
+      msg.method === "_array/user_shell_execute"
+    ) {
+      const params = msg.params as UserShellExecuteParams;
+      items.push({
+        type: "user_shell_execute",
+        id: `shell-exec-${shellExecuteCounter++}`,
+        command: params.command,
+        cwd: params.cwd,
+        result: params.result,
+      });
+      continue;
+    }
+
     // session/prompt request - starts a new turn
     if (isJsonRpcRequest(msg) && msg.method === "session/prompt") {
       const userContent = extractUserContent(msg.params);
 
-      current = {
+      currentTurn = {
+        type: "turn",
         id: `turn-${msg.id}`,
         promptId: msg.id,
         userContent,
@@ -160,10 +194,10 @@ function buildTurns(events: AcpMessage[]): Turn[] {
         durationMs: 0,
         toolCalls: new Map(),
       };
-      current.durationMs = -event.ts; // Will add end timestamp later
+      currentTurn.durationMs = -event.ts; // Will add end timestamp later
 
-      pendingPrompts.set(msg.id, current);
-      turns.push(current);
+      pendingPrompts.set(msg.id, currentTurn);
+      items.push(currentTurn);
       continue;
     }
 
@@ -182,24 +216,24 @@ function buildTurns(events: AcpMessage[]): Turn[] {
     if (
       isJsonRpcNotification(msg) &&
       msg.method === "session/update" &&
-      current
+      currentTurn
     ) {
       const update = (msg.params as SessionNotification)?.update;
       if (!update) continue;
 
-      processSessionUpdate(current, update);
+      processSessionUpdate(currentTurn, update);
       continue;
     }
 
     // PostHog console messages
     if (
       isJsonRpcNotification(msg) &&
       msg.method === "_posthog/console" &&
-      current
+      currentTurn
     ) {
       const params = msg.params as { level?: string; message?: string };
       if (params?.message) {
-        current.items.push({
+        currentTurn.items.push({
           sessionUpdate: "console",
           level: params.level ?? "info",
           message: params.message,
@@ -209,16 +243,25 @@ function buildTurns(events: AcpMessage[]): Turn[] {
     }
   }
 
-  return turns;
+  return items;
+}
+
+interface TextBlockWithMeta {
+  type: "text";
+  text: string;
+  _meta?: { ui?: { hidden?: boolean } };
 }
 
 function extractUserContent(params: unknown): string {
   const p = params as { prompt?: ContentBlock[] };
   if (!p?.prompt?.length) return "";
 
-  const textBlock = p.prompt.find(
-    (b): b is { type: "text"; text: string } => b.type === "text",
-  );
+  // Find first visible text block (skip hidden context blocks)
+  const textBlock = p.prompt.find((b): b is TextBlockWithMeta => {
+    if (b.type !== "text") return false;
+    const meta = (b as TextBlockWithMeta)._meta;
+    return !meta?.ui?.hidden;
+  });
   return textBlock?.text ?? "";
 }
 

apps/array/src/renderer/features/sessions/components/MessageEditor.tsx

@@ -1,7 +1,8 @@
 import "@features/task-detail/components/TaskInput.css";
 import { ArrowUp, Paperclip, Stop } from "@phosphor-icons/react";
-import { Box, Flex, IconButton, Tooltip } from "@radix-ui/themes";
+import { Box, Flex, IconButton, Text, Tooltip } from "@radix-ui/themes";
 import { logger } from "@renderer/lib/logger";
+import { toast } from "@renderer/utils/toast";
 import type { MentionItem } from "@shared/types";
 import { Extension, type JSONContent } from "@tiptap/core";
 import { Mention } from "@tiptap/extension-mention";
@@ -184,7 +185,10 @@ interface MessageEditorProps {
   repoPath?: string | null;
   disabled?: boolean;
   isLoading?: boolean;
+  isCloud?: boolean;
   onSubmit?: (text: string) => void;
+  onBashCommand?: (command: string) => void;
+  onBashModeChange?: (isBashMode: boolean) => void;
   onCancel?: () => void;
   onAttachFiles?: (files: File[]) => void;
   autoFocus?: boolean;
@@ -202,7 +206,10 @@ export const MessageEditor = forwardRef<
       repoPath,
       disabled = false,
       isLoading = false,
+      isCloud = false,
       onSubmit,
+      onBashCommand,
+      onBashModeChange,
       onCancel,
       onAttachFiles,
       autoFocus = false,
@@ -240,7 +247,6 @@ export const MessageEditor = forwardRef<
     };
     const [mentionItems, setMentionItems] = useState<MentionItem[]>([]);
     const repoPathRef = useRef(repoPath);
-    const onSubmitRef = useRef(onSubmit);
     const componentRef = useRef<ReactRenderer<MentionListRef> | null>(null);
     const commandRef = useRef<
       ((item: { id: string; label: string; type?: string }) => void) | null
@@ -259,20 +265,45 @@ export const MessageEditor = forwardRef<
       repoPathRef.current = repoPath;
     }, [repoPath]);
 
-    useEffect(() => {
-      onSubmitRef.current = onSubmit;
-    }, [onSubmit]);
+    const [isEmpty, setIsEmpty] = useState(true);
+    const [isBashMode, setIsBashMode] = useState(false);
+
+    const handleEditorUpdate = (editor: Editor) => {
+      setIsEmpty(editor.isEmpty);
+      const newBashMode = editor.getText().trimStart().startsWith("!");
+      if (newBashMode !== isBashMode) {
+        setIsBashMode(newBashMode);
+        onBashModeChange?.(newBashMode);
+      }
+      setDraft(sessionId, editor.isEmpty ? null : editor.getJSON());
+    };
+
+    const handleBashSubmit = (text: string) => {
+      if (isCloud) {
+        toast.error("Bash mode is not supported in cloud sessions");
+        return false;
+      }
+      const command = text.slice(1).trim();
+      if (command) {
+        onBashCommand?.(command);
+      }
+      return true;
+    };
 
     const handleSubmit = () => {
       if (!editor || editor.isEmpty) return;
-      const text = editor.getText();
-      onSubmitRef.current?.(text);
+      const text = editor.getText().trim();
+
+      if (text.startsWith("!")) {
+        if (!handleBashSubmit(text)) return;
+      } else {
+        onSubmit?.(text);
+      }
+
       editor.commands.clearContent();
       setDraft(sessionId, null);
     };
 
-    const [isEmpty, setIsEmpty] = useState(true);
-
     const editor = useEditor({
       extensions: [
         StarterKit,
@@ -406,10 +437,7 @@ export const MessageEditor = forwardRef<
         },
       },
       autofocus: autoFocus,
-      onUpdate: ({ editor }) => {
-        setIsEmpty(editor.isEmpty);
-        setDraft(sessionId, editor.isEmpty ? null : editor.getJSON());
-      },
+      onUpdate: ({ editor }) => handleEditorUpdate(editor),
     });
 
     useEffect(() => {
@@ -479,6 +507,11 @@ export const MessageEditor = forwardRef<
               </IconButton>
             </Tooltip>
             <ModelSelector taskId={taskId} disabled={disabled} />
+            {isBashMode && (
+              <Text size="1" className="font-mono text-accent-11">
+                bash mode
+              </Text>
+            )}
           </Flex>
           <Flex gap="4" align="center">
             {isLoading && onCancel ? (