From da90538c443d3f40873b53af191700c2c9683e24 Mon Sep 17 00:00:00 2001
From: Hamel Husain <hamel.husain@gmail.com>
Date: Mon, 16 Feb 2026 14:02:49 -0800
Subject: [PATCH] feat(app): add cell execution state indicators and flush
 partial stdout
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add visual feedback during cell execution (issue #38) and fix prompts
without trailing newlines being buffered indefinitely (issue #99).

Execution state machine: idle → pending → running → success/error with
colored left-border indicators and bracket notation in the gutter.
Timeout-based flush (150ms) for partial stdout lines in both the React
component and data layer, with IOPub classification deferral preserved.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 app/src/components/Actions/Actions.test.tsx   | 210 +++++++++++++++++-
 app/src/components/Actions/Actions.tsx        | 121 +++++++---
 .../components/Actions/CellConsole.test.tsx   | 153 ++++++++++++-
 app/src/components/Actions/CellConsole.tsx    |  20 ++
 app/src/index.css                             |  25 ++-
 app/src/lib/notebookData.ts                   |  38 +++-
 app/test/browser/test-notebook-ui.sh          |  21 ++
 .../notebooks/stdin-prompt-test.runme.md      |  31 +++
 8 files changed, 582 insertions(+), 37 deletions(-)
 create mode 100644 app/test/fixtures/notebooks/stdin-prompt-test.runme.md

diff --git a/app/src/components/Actions/Actions.test.tsx b/app/src/components/Actions/Actions.test.tsx
index 28b4042..c4f166f 100644
--- a/app/src/components/Actions/Actions.test.tsx
+++ b/app/src/components/Actions/Actions.test.tsx
@@ -4,7 +4,7 @@ import { render, screen, act, fireEvent } from "@testing-library/react";
 import { create } from "@bufbuild/protobuf";
 import React from "react";
 
-import { parser_pb } from "../../runme/client";
+import { parser_pb, RunmeMetadataKey } from "../../runme/client";
 import type { CellData } from "../../lib/notebookData";
 import { Action } from "./Actions";
 
@@ -60,6 +60,47 @@ vi.mock("@runmedev/renderers", () => ({
 
 vi.mock("../../contexts/CellContext", () => ({}));
 
+// Fake streams for testing PID/exitCode callbacks through CellConsole subscriptions.
+class FakeStreams {
+  private pidCbs = new Set<(pid: number) => void>();
+  private exitCbs = new Set<(code: number) => void>();
+  private stdoutCbs = new Set<(data: Uint8Array) => void>();
+  private stderrCbs = new Set<(data: Uint8Array) => void>();
+
+  stdout = {
+    subscribe: (cb: (data: Uint8Array) => void) => {
+      this.stdoutCbs.add(cb);
+      return { unsubscribe: () => this.stdoutCbs.delete(cb) };
+    },
+  };
+  stderr = {
+    subscribe: (cb: (data: Uint8Array) => void) => {
+      this.stderrCbs.add(cb);
+      return { unsubscribe: () => this.stderrCbs.delete(cb) };
+    },
+  };
+  pid = {
+    subscribe: (cb: (pid: number) => void) => {
+      this.pidCbs.add(cb);
+      return { unsubscribe: () => this.pidCbs.delete(cb) };
+    },
+  };
+  exitCode = {
+    subscribe: (cb: (code: number) => void) => {
+      this.exitCbs.add(cb);
+      return { unsubscribe: () => this.exitCbs.delete(cb) };
+    },
+  };
+
+  emitPid(pid: number) { this.pidCbs.forEach((cb) => cb(pid)); }
+  emitExitCode(code: number) { this.exitCbs.forEach((cb) => cb(code)); }
+  emitStdout(data: Uint8Array) { this.stdoutCbs.forEach((cb) => cb(data)); }
+
+  setCallback() {}
+  sendExecuteRequest() {}
+  close() {}
+}
+
 // Minimal stub CellData to drive runID changes.
 class StubCellData {
   snapshot: parser_pb.Cell;
@@ -103,13 +144,16 @@ class StubCellData {
     this.runListeners.forEach((l) => l(id));
   }
 
+  fakeStreams: FakeStreams | null = null;
+
   getStreams() {
-    return null;
+    return this.fakeStreams;
   }
   addBefore() {}
   addAfter() {}
   remove() {}
   run() {}
+  setRunner() {}
 }
 
 describe("Action component", () => {
@@ -189,4 +233,166 @@ describe("Action component", () => {
     expect(updatedCell.kind).toBe(parser_pb.CellKind.MARKUP);
     expect(updatedCell.languageId).toBe("markdown");
   });
+
+  it("shows idle bracket [ ] before first run", () => {
+    const cell = create(parser_pb.CellSchema, {
+      refId: "cell-idle",
+      kind: parser_pb.CellKind.CODE,
+      languageId: "bash",
+      outputs: [],
+      metadata: {},
+      value: "echo hello",
+    });
+    const stub = new StubCellData(cell);
+
+    render(<Action cellData={stub as unknown as CellData} isFirst={false} />);
+
+    const bracket = screen.getByTestId("cell-bracket");
+    expect(bracket.textContent).toBe("[ ]");
+  });
+
+  it("shows pending state immediately on run click", async () => {
+    const cell = create(parser_pb.CellSchema, {
+      refId: "cell-pend",
+      kind: parser_pb.CellKind.CODE,
+      languageId: "bash",
+      outputs: [],
+      metadata: {},
+      value: "echo hello",
+    });
+    const stub = new StubCellData(cell);
+    stub.fakeStreams = new FakeStreams();
+
+    render(<Action cellData={stub as unknown as CellData} isFirst={false} />);
+
+    const cellCard = document.getElementById("cell-card-cell-pend")!;
+    expect(cellCard.getAttribute("data-exec-state")).toBe("idle");
+
+    await act(async () => {
+      fireEvent.click(screen.getByLabelText("Run code"));
+    });
+
+    expect(cellCard.getAttribute("data-exec-state")).toBe("pending");
+    const bracket = screen.getByTestId("cell-bracket");
+    expect(bracket.textContent).toBe("[*]");
+  });
+
+  it("transitions to running state on PID", async () => {
+    const cell = create(parser_pb.CellSchema, {
+      refId: "cell-run",
+      kind: parser_pb.CellKind.CODE,
+      languageId: "bash",
+      outputs: [],
+      metadata: {},
+      value: "echo hello",
+    });
+    const stub = new StubCellData(cell);
+    const streams = new FakeStreams();
+    stub.fakeStreams = streams;
+
+    render(<Action cellData={stub as unknown as CellData} isFirst={false} />);
+
+    // Wait for CellConsole's useEffect to subscribe to streams
+    await act(async () => { await Promise.resolve(); });
+
+    // Click run to enter pending state
+    await act(async () => {
+      fireEvent.click(screen.getByLabelText("Run code"));
+    });
+
+    const cellCard = document.getElementById("cell-card-cell-run")!;
+    expect(cellCard.getAttribute("data-exec-state")).toBe("pending");
+
+    // Emit PID to transition to running
+    await act(async () => {
+      streams.emitPid(42);
+    });
+
+    expect(cellCard.getAttribute("data-exec-state")).toBe("running");
+  });
+
+  it("transitions to success state on exitCode 0", async () => {
+    const cell = create(parser_pb.CellSchema, {
+      refId: "cell-ok",
+      kind: parser_pb.CellKind.CODE,
+      languageId: "bash",
+      outputs: [],
+      metadata: {},
+      value: "echo hello",
+    });
+    cell.metadata[RunmeMetadataKey.Sequence] = "1";
+    const stub = new StubCellData(cell);
+    const streams = new FakeStreams();
+    stub.fakeStreams = streams;
+
+    render(<Action cellData={stub as unknown as CellData} isFirst={false} />);
+    await act(async () => { await Promise.resolve(); });
+
+    // Run → PID → exit 0
+    await act(async () => { fireEvent.click(screen.getByLabelText("Run code")); });
+    await act(async () => { streams.emitPid(42); });
+    await act(async () => { streams.emitExitCode(0); });
+
+    const cellCard = document.getElementById("cell-card-cell-ok")!;
+    expect(cellCard.getAttribute("data-exec-state")).toBe("success");
+
+    const bracket = screen.getByTestId("cell-bracket");
+    expect(bracket.textContent).toBe("[1]");
+  });
+
+  it("transitions to error state on non-zero exitCode", async () => {
+    const cell = create(parser_pb.CellSchema, {
+      refId: "cell-err",
+      kind: parser_pb.CellKind.CODE,
+      languageId: "bash",
+      outputs: [],
+      metadata: {},
+      value: "exit 1",
+    });
+    const stub = new StubCellData(cell);
+    const streams = new FakeStreams();
+    stub.fakeStreams = streams;
+
+    render(<Action cellData={stub as unknown as CellData} isFirst={false} />);
+    await act(async () => { await Promise.resolve(); });
+
+    await act(async () => { fireEvent.click(screen.getByLabelText("Run code")); });
+    await act(async () => { streams.emitPid(42); });
+    await act(async () => { streams.emitExitCode(1); });
+
+    const cellCard = document.getElementById("cell-card-cell-err")!;
+    expect(cellCard.getAttribute("data-exec-state")).toBe("error");
+
+    const bracket = screen.getByTestId("cell-bracket");
+    expect(bracket.textContent).toBe("[!]");
+  });
+
+  it("resets to pending on re-run after success", async () => {
+    const cell = create(parser_pb.CellSchema, {
+      refId: "cell-rerun",
+      kind: parser_pb.CellKind.CODE,
+      languageId: "bash",
+      outputs: [],
+      metadata: {},
+      value: "echo hello",
+    });
+    const stub = new StubCellData(cell);
+    const streams = new FakeStreams();
+    stub.fakeStreams = streams;
+
+    render(<Action cellData={stub as unknown as CellData} isFirst={false} />);
+    await act(async () => { await Promise.resolve(); });
+
+    // First run → success
+    await act(async () => { fireEvent.click(screen.getByLabelText("Run code")); });
+    await act(async () => { streams.emitPid(42); });
+    await act(async () => { streams.emitExitCode(0); });
+
+    const cellCard = document.getElementById("cell-card-cell-rerun")!;
+    expect(cellCard.getAttribute("data-exec-state")).toBe("success");
+
+    // Re-run → should go back to pending
+    await act(async () => { fireEvent.click(screen.getByLabelText("Run code")); });
+    expect(cellCard.getAttribute("data-exec-state")).toBe("pending");
+  });
 });
diff --git a/app/src/components/Actions/Actions.tsx b/app/src/components/Actions/Actions.tsx
index d541944..fcb5cb6 100644
--- a/app/src/components/Actions/Actions.tsx
+++ b/app/src/components/Actions/Actions.tsx
@@ -27,9 +27,11 @@ import Editor from "./Editor";
 import MarkdownCell from "./MarkdownCell";
 import { IOPUB_INCOMPLETE_METADATA_KEY } from "../../lib/ipykernel";
 import {
+  ErrorIcon,
   PlayIcon,
   PlusIcon,
   SpinnerIcon,
+  SuccessIcon,
   TrashIcon,
 } from "./icons";
 //import { useRun } from "../../lib/useRun.js";
@@ -71,31 +73,59 @@ TabPanel.displayName = "TabPanel";
 // them. Inactive tabs are taken out of flow via absolute positioning and hidden
 // visibility so they don't visually overlap yet retain their state.
 
+export type CellExecState = "idle" | "pending" | "running" | "success" | "error";
+
 /** Compact icon-only run button that sits in the cell toolbar.
- *  Shows a spinner while running, otherwise always shows the play icon. */
+ *  Shows a spinner while pending/running, success/error icons after completion. */
 function RunActionButton({
-  pid,
+  execState,
+  exitCode,
   onClick,
 }: {
-  pid: number | null;
+  execState: CellExecState;
+  exitCode: number | null;
   onClick: () => void;
 }) {
-  const isRunning = pid !== null;
+  const [faded, setFaded] = useState(false);
+
+  useEffect(() => {
+    if (execState === "success") {
+      setFaded(false);
+      const timer = setTimeout(() => setFaded(true), 2000);
+      return () => clearTimeout(timer);
+    }
+    setFaded(false);
+  }, [execState]);
+
+  let icon: React.ReactNode;
+  if (execState === "pending" || execState === "running") {
+    icon = (
+      <div className="animate-spin">
+        <SpinnerIcon />
+      </div>
+    );
+  } else if (execState === "success" && !faded) {
+    icon = <SuccessIcon />;
+  } else if (execState === "error" && exitCode !== null) {
+    icon = <ErrorIcon exitCode={exitCode} />;
+  } else {
+    icon = <PlayIcon />;
+  }
 
   return (
     <button
       type="button"
       onClick={onClick}
-      aria-label={isRunning ? "Running..." : "Run code"}
+      aria-label={
+        execState === "pending" || execState === "running"
+          ? "Running..."
+          : execState === "error"
+            ? `Error (exit ${exitCode})`
+            : "Run code"
+      }
       className="icon-btn h-7 w-7"
     >
-      {isRunning ? (
-        <div className="animate-spin">
-          <SpinnerIcon />
-        </div>
-      ) : (
-        <PlayIcon />
-      )}
+      {icon}
     </button>
   );
 }
@@ -313,15 +343,38 @@ export function Action({ cellData, isFirst }: { cellData: CellData; isFirst: boo
   const [markdownEditRequest, setMarkdownEditRequest] = useState(0);
   const [pid, setPid] = useState<number | null>(null);
   const [exitCode, setExitCode] = useState<number | null>(null);
+  const [pending, setPending] = useState(false);
 
-  // When an exit code arrives, clear the pid so the spinner stops.
+  // When an exit code arrives, clear the pid and pending so the state resolves.
   const handleExitCode = useCallback((code: number | null) => {
     setExitCode(code);
+    setPending(false);
     if (code !== null) {
       setPid(null);
     }
   }, []);
 
+  // When a PID arrives, clear pending (transitions to "running").
+  const handlePid = useCallback((newPid: number | null) => {
+    setPid(newPid);
+    if (newPid !== null) {
+      setPending(false);
+    }
+  }, []);
+
+  const execState: CellExecState = useMemo(() => {
+    if (exitCode !== null) {
+      return exitCode === 0 ? "success" : "error";
+    }
+    if (pid !== null) {
+      return "running";
+    }
+    if (pending) {
+      return "pending";
+    }
+    return "idle";
+  }, [exitCode, pid, pending]);
+
   useEffect(() => {
     if (!contextMenu) {
       return;
@@ -366,6 +419,9 @@ export function Action({ cellData, isFirst }: { cellData: CellData; isFirst: boo
   }, [contextMenu]);
 
   const runCode = useCallback(() => {
+    setPending(true);
+    setPid(null);
+    setExitCode(null);
     cellData.run();
   }, [cellData]);
 
@@ -384,15 +440,12 @@ export function Action({ cellData, isFirst }: { cellData: CellData; isFirst: boo
   }, [cellData]);
 
   const sequenceLabel = useMemo(() => {
-    if (!cell) {
-      return " ";
-    }
+    if (execState === "error") return "!";
+    if (execState === "pending" || execState === "running") return "*";
+    if (!cell) return " ";
     const seq = Number(cell.metadata[RunmeMetadataKey.Sequence]);
-    if (!seq) {
-      return " ";
-    }
-    return seq.toString();
-  }, [cell, pid, exitCode]);
+    return seq ? seq.toString() : " ";
+  }, [cell, execState]);
 
   const selectedLanguage = useMemo(() => {
     if (!cell) {
@@ -443,7 +496,7 @@ export function Action({ cellData, isFirst }: { cellData: CellData; isFirst: boo
         <WebContainerConsole
           key={`webcontainer-${cell.refId}`}
           cell={cell}
-          onPid={setPid}
+          onPid={handlePid}
           onExitCode={handleExitCode}
         />
       );
@@ -488,7 +541,7 @@ export function Action({ cellData, isFirst }: { cellData: CellData; isFirst: boo
       <CellConsole
         key={`console-${cell?.refId ?? "cell"}-${runID}`}
         cellData={cellData}
-        onPid={setPid}
+        onPid={handlePid}
         onExitCode={handleExitCode}
       />
     );
@@ -661,6 +714,7 @@ export function Action({ cellData, isFirst }: { cellData: CellData; isFirst: boo
         <div
           id={`cell-card-${cell.refId}`}
           className="cell-card"
+          data-exec-state={execState}
         >
           {/* Code editor section — overflow-hidden keeps border-radius clipping on the editor */}
           <div className="overflow-hidden rounded-t-nb-md">
@@ -720,14 +774,23 @@ export function Action({ cellData, isFirst }: { cellData: CellData; isFirst: boo
                   </option>
                 ))}
               </select>
-              {sequenceLabel.trim() && (
-                <span className="text-[11px] font-mono text-nb-text-faint">
-                  [{sequenceLabel}]
-                </span>
-              )}
+              <span
+                className={`text-[11px] font-mono ${
+                  execState === "error"
+                    ? "text-red-500"
+                    : execState === "pending" || execState === "running"
+                      ? "text-amber-500"
+                      : execState === "success"
+                        ? "text-green-600"
+                        : "text-nb-text-faint"
+                }`}
+                data-testid="cell-bracket"
+              >
+                [{sequenceLabel}]
+              </span>
             </div>
             <div className="flex items-center gap-1">
-              <RunActionButton pid={pid} onClick={runCode} />
+              <RunActionButton execState={execState} exitCode={exitCode} onClick={runCode} />
               <button
                 type="button"
                 aria-label="Delete cell"
diff --git a/app/src/components/Actions/CellConsole.test.tsx b/app/src/components/Actions/CellConsole.test.tsx
index 1e1f622..fa7807d 100644
--- a/app/src/components/Actions/CellConsole.test.tsx
+++ b/app/src/components/Actions/CellConsole.test.tsx
@@ -1,7 +1,7 @@
 // @vitest-environment jsdom
 import { act } from "react";
 import ReactDOM from "react-dom/client";
-import { describe, expect, it, vi } from "vitest";
+import { afterEach, describe, expect, it, vi } from "vitest";
 
 // Mock runmedev/renderers to avoid registering the real web component,
 // which depends on adoptedStyleSheets and other browser-only APIs.
@@ -17,8 +17,50 @@ import { parser_pb, MimeType } from "../../contexts/CellContext";
 import { create } from "@bufbuild/protobuf";
 import CellConsole from "./CellConsole";
 
+// Fake streams for controlling stdout/pid/exitCode in tests.
+class FakeStreams {
+  private pidCbs = new Set<(pid: number) => void>();
+  private exitCbs = new Set<(code: number) => void>();
+  private stdoutCbs = new Set<(data: Uint8Array) => void>();
+  private stderrCbs = new Set<(data: Uint8Array) => void>();
+
+  stdout = {
+    subscribe: (cb: (data: Uint8Array) => void) => {
+      this.stdoutCbs.add(cb);
+      return { unsubscribe: () => this.stdoutCbs.delete(cb) };
+    },
+  };
+  stderr = {
+    subscribe: (cb: (data: Uint8Array) => void) => {
+      this.stderrCbs.add(cb);
+      return { unsubscribe: () => this.stderrCbs.delete(cb) };
+    },
+  };
+  pid = {
+    subscribe: (cb: (pid: number) => void) => {
+      this.pidCbs.add(cb);
+      return { unsubscribe: () => this.pidCbs.delete(cb) };
+    },
+  };
+  exitCode = {
+    subscribe: (cb: (code: number) => void) => {
+      this.exitCbs.add(cb);
+      return { unsubscribe: () => this.exitCbs.delete(cb) };
+    },
+  };
+
+  emitPid(pid: number) { this.pidCbs.forEach((cb) => cb(pid)); }
+  emitExitCode(code: number) { this.exitCbs.forEach((cb) => cb(code)); }
+  emitStdout(data: Uint8Array) { this.stdoutCbs.forEach((cb) => cb(data)); }
+
+  setCallback() {}
+  sendExecuteRequest() {}
+  close() {}
+}
+
 class FakeCellData {
   snapshot: parser_pb.Cell;
+  fakeStreams: FakeStreams | null = null;
 
   constructor(cell: parser_pb.Cell) {
     this.snapshot = cell;
@@ -29,7 +71,11 @@ class FakeCellData {
   }
 
   getStreams() {
-    return undefined;
+    return this.fakeStreams;
+  }
+
+  getRunID() {
+    return "run-test";
   }
 }
 
@@ -109,3 +155,106 @@ describe("CellConsole", () => {
     expect(texts.join("")).toContain("hello world");
   });
 });
+
+describe("CellConsole stdout flush", () => {
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  function getTerminalText(container: HTMLElement): string {
+    const consoleEl = container.querySelector("console-view") as FakeConsoleView | null;
+    const spans = consoleEl?.querySelectorAll(".xterm-rows span") ?? [];
+    return Array.from(spans).map((s) => s.textContent).join("");
+  }
+
+  async function renderWithStreams() {
+    if (!customElements.get("console-view")) {
+      customElements.define("console-view", FakeConsoleView);
+    }
+
+    const cell = create(parser_pb.CellSchema, {
+      refId: "cell-flush",
+      kind: parser_pb.CellKind.CODE,
+      outputs: [],
+      metadata: {},
+    });
+
+    const streams = new FakeStreams();
+    const cellData = new FakeCellData(cell);
+    cellData.fakeStreams = streams;
+
+    const div = document.createElement("div");
+    document.body.appendChild(div);
+
+    await act(async () => {
+      const root = ReactDOM.createRoot(div);
+      root.render(
+        <CellConsole cellData={cellData as any} onExitCode={() => {}} onPid={() => {}} />,
+      );
+      await Promise.resolve();
+    });
+
+    return { streams, div };
+  }
+
+  it("flushes partial stdout line after timeout", async () => {
+    vi.useFakeTimers();
+    const { streams, div } = await renderWithStreams();
+
+    // Emit partial line (no newline)
+    await act(async () => {
+      streams.emitStdout(new TextEncoder().encode("Password:"));
+    });
+
+    // Before timer fires, partial line should still be buffered
+    expect(getTerminalText(div)).not.toContain("Password:");
+
+    // Advance timer past 150ms flush threshold
+    await act(async () => {
+      vi.advanceTimersByTime(200);
+    });
+
+    expect(getTerminalText(div)).toContain("Password:");
+    document.body.removeChild(div);
+  });
+
+  it("does not double-write when newline arrives after flush", async () => {
+    vi.useFakeTimers();
+    const { streams, div } = await renderWithStreams();
+
+    // Emit partial line
+    await act(async () => {
+      streams.emitStdout(new TextEncoder().encode("Password:"));
+    });
+
+    // Flush via timer
+    await act(async () => {
+      vi.advanceTimersByTime(200);
+    });
+
+    // Now send the trailing newline
+    await act(async () => {
+      streams.emitStdout(new TextEncoder().encode("\n"));
+    });
+
+    // "Password:" should appear exactly once
+    const text = getTerminalText(div);
+    expect(text.match(/Password:/g)?.length).toBe(1);
+    document.body.removeChild(div);
+  });
+
+  it("complete lines are written immediately", async () => {
+    const { streams, div } = await renderWithStreams();
+
+    // Emit complete lines
+    await act(async () => {
+      streams.emitStdout(new TextEncoder().encode("hello\nworld\n"));
+    });
+
+    // Both lines should appear immediately without needing a timer
+    const text = getTerminalText(div);
+    expect(text).toContain("hello");
+    expect(text).toContain("world");
+    document.body.removeChild(div);
+  });
+});
diff --git a/app/src/components/Actions/CellConsole.tsx b/app/src/components/Actions/CellConsole.tsx
index 16adccb..ba72096 100644
--- a/app/src/components/Actions/CellConsole.tsx
+++ b/app/src/components/Actions/CellConsole.tsx
@@ -129,6 +129,7 @@ const CellConsole = ({ cellData, onExitCode, onPid }: CellConsoleProps) => {
   const winsizeRef = useRef<{ cols: number; rows: number }>({ cols: 0, rows: 0 });
   const wroteInitialForRun = useRef<string | null>(null);
   const stdoutBufferRef = useRef("");
+  const flushTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   const cell =
     useSyncExternalStore(
@@ -251,6 +252,12 @@ const CellConsole = ({ cellData, onExitCode, onPid }: CellConsoleProps) => {
 
     if (stream) { 
       const stdoutSub = stream.stdout.subscribe((data: Uint8Array) => {
+        // Clear any pending flush timer since we're processing new data.
+        if (flushTimerRef.current) {
+          clearTimeout(flushTimerRef.current);
+          flushTimerRef.current = null;
+        }
+
         const chunkText = textDecoder.decode(data);
         stdoutBufferRef.current += chunkText;
 
@@ -268,6 +275,15 @@ const CellConsole = ({ cellData, onExitCode, onPid }: CellConsoleProps) => {
           }
           writeToTerminal(textEncoder.encode(`${line}\n`));
         });
+
+        // If there's a partial line remaining, schedule a flush so prompts
+        // like "Password:" that don't end with \n still appear.
+        if (stdoutBufferRef.current) {
+          flushTimerRef.current = setTimeout(() => {
+            flushTimerRef.current = null;
+            flushStdoutBuffer();
+          }, 150);
+        }
       });
       disposers.push(() => stdoutSub.unsubscribe());
 
@@ -289,6 +305,10 @@ const CellConsole = ({ cellData, onExitCode, onPid }: CellConsoleProps) => {
     }
     
     return () => {
+      if (flushTimerRef.current) {
+        clearTimeout(flushTimerRef.current);
+        flushTimerRef.current = null;
+      }
       disposers.forEach((fn) => fn());
     };
     // Only recreate subscriptions/console when the run changes; callbacks are stable.
diff --git a/app/src/index.css b/app/src/index.css
index 0356f2d..35a035e 100644
--- a/app/src/index.css
+++ b/app/src/index.css
@@ -146,10 +146,25 @@
      while the output section manages its own overflow to keep scrollbars visible. */
   .cell-card {
     @apply rounded-nb-md border border-nb-border-strong bg-white shadow-paper;
+    @apply border-l-[3px] border-l-transparent;
     @apply transition-shadow duration-200;
     @apply focus-within:ring-1 focus-within:ring-nb-accent focus-within:ring-offset-1;
   }
 
+  .cell-card[data-exec-state="pending"],
+  .cell-card[data-exec-state="running"] {
+    @apply border-l-amber-400;
+    animation: pulse-border 1.5s ease-in-out infinite;
+  }
+
+  .cell-card[data-exec-state="success"] {
+    @apply border-l-green-400;
+  }
+
+  .cell-card[data-exec-state="error"] {
+    @apply border-l-red-400;
+  }
+
   /* Thin toolbar row inside a cell card (between editor and output) */
   .cell-toolbar {
     @apply flex items-center justify-between border-t border-nb-tray-border px-3 py-1;
@@ -214,7 +229,15 @@
 }
 
 /* ═══════════════════════════════════════════════════════════════════
-   6. Vendor overrides
+   6. Animations
+   ═══════════════════════════════════════════════════════════════════ */
+@keyframes pulse-border {
+  0%, 100% { border-left-color: #fbbf24; }
+  50% { border-left-color: transparent; }
+}
+
+/* ═══════════════════════════════════════════════════════════════════
+   7. Vendor overrides
    ═══════════════════════════════════════════════════════════════════ */
 
 /* Monaco dark-theme: dark gutter with subtle right divider */
diff --git a/app/src/lib/notebookData.ts b/app/src/lib/notebookData.ts
index d9dde07..78736a1 100644
--- a/app/src/lib/notebookData.ts
+++ b/app/src/lib/notebookData.ts
@@ -68,6 +68,7 @@ export const bindStreamsToCell: StreamBinder = ({
    * the start of the stream or when a newline boundary is reached.
    */
   let stdoutBuffer = "";
+  let flushTimer: ReturnType<typeof setTimeout> | null = null;
   const textDecoder = new TextDecoder();
   const textEncoder = new TextEncoder();
 
@@ -197,8 +198,11 @@ export const bindStreamsToCell: StreamBinder = ({
   /**
    * appendStdoutChunk parses stdout chunks into lines, detects IOPub messages,
    * and routes them into an IOPub buffer while preserving normal stdout.
+   *
+   * Returns `true` if the chunk was deferred (first partial line awaiting
+   * classification), meaning the caller should NOT schedule a flush timer.
    */
-  const appendStdoutChunk = (chunk: Uint8Array) => {
+  const appendStdoutChunk = (chunk: Uint8Array): boolean => {
     const chunkText = textDecoder.decode(chunk);
     const hadBuffer = stdoutBuffer.length > 0;
     stdoutBuffer += chunkText;
@@ -208,7 +212,7 @@ export const bindStreamsToCell: StreamBinder = ({
 
     if (!hadBuffer && lines.length === 0 && stdoutBuffer) {
       // Stream just started with a partial line; we'll classify it once a newline arrives.
-      return;
+      return true;
     }
 
     lines.forEach((line) => {
@@ -223,6 +227,8 @@ export const bindStreamsToCell: StreamBinder = ({
         textEncoder.encode(`${line}\n`),
       );
     });
+
+    return false;
   };
 
   /**
@@ -251,7 +257,21 @@ export const bindStreamsToCell: StreamBinder = ({
   };
 
   const subs = [
-    streams.stdout.subscribe((data) => appendStdoutChunk(data)),
+    streams.stdout.subscribe((data) => {
+      if (flushTimer) {
+        clearTimeout(flushTimer);
+        flushTimer = null;
+      }
+      const deferred = appendStdoutChunk(data);
+      // Schedule a flush for partial lines so prompts without trailing \n appear.
+      // Skip when deferred (first partial chunk awaiting IOPub classification).
+      if (stdoutBuffer && !deferred) {
+        flushTimer = setTimeout(() => {
+          flushTimer = null;
+          flushStdoutBuffer();
+        }, 150);
+      }
+    }),
     streams.stderr.subscribe((data) =>
       appendBuffer(MimeType.VSCodeNotebookStdErr, data),
     ),
@@ -262,6 +282,10 @@ export const bindStreamsToCell: StreamBinder = ({
       updateCell(updated);
     }),
     streams.exitCode.subscribe((code) => {
+      if (flushTimer) {
+        clearTimeout(flushTimer);
+        flushTimer = null;
+      }
       const updated = getCell(refId);
       if (!updated || !updated.metadata) return;
       updated.metadata[RunmeMetadataKey.ExitCode] = code.toString();
@@ -276,6 +300,10 @@ export const bindStreamsToCell: StreamBinder = ({
       // no-op for now
     }),
     streams.errors.subscribe((err) => {
+      if (flushTimer) {
+        clearTimeout(flushTimer);
+        flushTimer = null;
+      }
       console.error("Stream error", err);
       const now = Date.now();
       if (now - lastToastAt >= toastThrottleMs) {
@@ -297,6 +325,10 @@ export const bindStreamsToCell: StreamBinder = ({
 
   return {
     dispose() {
+      if (flushTimer) {
+        clearTimeout(flushTimer);
+        flushTimer = null;
+      }
       subs.forEach((s) => s.unsubscribe());
       streams.close();
     },
diff --git a/app/test/browser/test-notebook-ui.sh b/app/test/browser/test-notebook-ui.sh
index 68d473f..cd75c29 100755
--- a/app/test/browser/test-notebook-ui.sh
+++ b/app/test/browser/test-notebook-ui.sh
@@ -300,6 +300,27 @@ fi
 
 screenshot "07-notebook-rendered"
 
+# ============================================================
+# Phase 8: Verify exec-state and bracket UI elements
+# ============================================================
+log ""
+log "=== Phase 8: Cell execution state UI ==="
+
+# Check that cell-card elements have the data-exec-state attribute
+page_html=$(agent-browser eval "document.documentElement.outerHTML" 2>/dev/null || true)
+if echo "$page_html" | grep -q 'data-exec-state'; then
+    pass "Cell card has data-exec-state attribute"
+else
+    fail "Cell card missing data-exec-state attribute"
+fi
+
+# Check that the bracket label element exists in the toolbar
+if echo "$page_html" | grep -q 'data-testid="cell-bracket"'; then
+    pass "Cell bracket label rendered in toolbar"
+else
+    fail "Cell bracket label NOT found in toolbar"
+fi
+
 # ============================================================
 # Cleanup and Summary
 # ============================================================
diff --git a/app/test/fixtures/notebooks/stdin-prompt-test.runme.md b/app/test/fixtures/notebooks/stdin-prompt-test.runme.md
new file mode 100644
index 0000000..66f26e8
--- /dev/null
+++ b/app/test/fixtures/notebooks/stdin-prompt-test.runme.md
@@ -0,0 +1,31 @@
+---
+runme:
+  id: stdin-prompt-test
+  version: v3
+---
+
+# Stdin Prompt Test
+
+## Echo then prompt
+
+```bash {"name":"echo-then-prompt"}
+echo "Before prompt"
+read -p "Enter your name: " name
+echo "Hello, $name"
+```
+
+## Password-style prompt (no echo)
+
+```bash {"name":"password-prompt"}
+read -sp "Password: " pass
+echo ""
+echo "Got password of length ${#pass}"
+```
+
+## Simple y/n confirmation
+
+```bash {"name":"yn-confirm"}
+echo "About to do something"
+read -p "Continue? [y/n] " answer
+echo "You said: $answer"
+```