runmedev
diff --git a/‎README.md‎
Lines changed: 4 additions & 0 deletions b/‎README.md‎
Lines changed: 4 additions & 0 deletions
diff --git a/‎app/AGENTS.md‎
Lines changed: 2 additions & 0 deletions b/‎app/AGENTS.md‎
Lines changed: 2 additions & 0 deletions
diff --git a/‎app/src/components/Actions/Actions.test.tsx‎
Lines changed: 41 additions & 1 deletion b/‎app/src/components/Actions/Actions.test.tsx‎
Lines changed: 41 additions & 1 deletion
diff --git a/‎app/src/components/Actions/Actions.tsx‎
Lines changed: 38 additions & 79 deletions b/‎app/src/components/Actions/Actions.tsx‎
Lines changed: 38 additions & 79 deletions
@@ -71,6 +71,10 @@ Run the backend-unavailable toast check (backend must be stopped, frontend runni
 cd app && bash test/browser/test-backend-toast.sh
 ```
 
+Developer docs index:
+
+- [`docs-dev/index.md`](docs-dev/index.md)
+
 ## Linting
 
 Lint all packages:
 
@@ -2,6 +2,8 @@
 
 ## Documentation and comments
 
+- User-facing documentation belongs in the repo-root `docs/` directory (not `docs-dev/`).
+- Prefer user-facing documentation in notebook form so examples are executable. For Runme notebooks, prefer JSON notebook files when possible.
 - Functions and classes should have comments explaining what they do
 - Comments should capture important design decisions
 - Comments should explain how state is being managed via contexts and other react features
 
@@ -3,6 +3,7 @@ import { describe, expect, it, vi } from "vitest";
 import { render, screen, act, fireEvent } from "@testing-library/react";
 import { clone, create } from "@bufbuild/protobuf";
 import React from "react";
+import { APPKERNEL_RUNNER_NAME, APPKERNEL_RUNNER_LABEL } from "../../lib/runtime/appKernel";
 
 import { parser_pb, RunmeMetadataKey } from "../../runme/client";
 import type { CellData } from "../../lib/notebookData";
@@ -104,7 +105,22 @@ class StubCellData {
   }
 
   getStreams() {
-    return null;
+    if (!this.getRunID()) {
+      return null;
+    }
+    const sub = () => ({ unsubscribe: () => {} });
+    return {
+      stdout: { subscribe: sub },
+      stderr: { subscribe: sub },
+      pid: { subscribe: sub },
+      exitCode: { subscribe: sub },
+      mimeType: { subscribe: sub },
+      errors: { subscribe: sub },
+      sendExecuteRequest: () => {},
+      setCallback: () => {},
+      close: () => {},
+      connect: () => ({ subscribe: () => ({ unsubscribe: () => {} }) }),
+    } as any;
   }
   addBefore() {}
   addAfter() {}
@@ -215,4 +231,28 @@ describe("Action component", () => {
     expect(updatedCell.kind).toBe(parser_pb.CellKind.MARKUP);
     expect(updatedCell.languageId).toBe("markdown");
   });
+
+  it("includes AppKernel in the runner selector", () => {
+    const cell = create(parser_pb.CellSchema, {
+      refId: "cell-runner-select",
+      kind: parser_pb.CellKind.CODE,
+      languageId: "javascript",
+      outputs: [],
+      metadata: {},
+      value: 'console.log("hi")',
+    });
+    const stub = new StubCellData(cell);
+
+    render(<Action cellData={stub as unknown as CellData} isFirst={false} />);
+
+    const runnerSelect = document.getElementById("runner-select-cell-runner-select") as
+      | HTMLSelectElement
+      | null;
+    expect(runnerSelect).toBeTruthy();
+
+    const appKernelOption = Array.from(runnerSelect!.options).find(
+      (option) => option.value === APPKERNEL_RUNNER_NAME,
+    );
+    expect(appKernelOption?.textContent).toBe(APPKERNEL_RUNNER_LABEL);
+  });
 });
@@ -22,7 +22,6 @@ import { CellData } from "../../lib/notebookData";
 import { useNotebookContext } from "../../contexts/NotebookContext";
 import { useOutput } from "../../contexts/OutputContext";
 import CellConsole, { fontSettings } from "./CellConsole";
-import WebContainerConsole from "./WebContainer";
 import Editor from "./Editor";
 import MarkdownCell from "./MarkdownCell";
 import { IOPUB_INCOMPLETE_METADATA_KEY } from "../../lib/ipykernel";
@@ -36,6 +35,10 @@ import {
 import { useCurrentDoc } from "../../contexts/CurrentDocContext";
 import { useRunners } from "../../contexts/RunnersContext";
 import { DEFAULT_RUNNER_PLACEHOLDER } from "../../lib/runtime/runnersManager";
+import {
+  APPKERNEL_RUNNER_LABEL,
+  APPKERNEL_RUNNER_NAME,
+} from "../../lib/runtime/appKernel";
 import React from "react";
 
 type TabPanelProps = React.HTMLAttributes<HTMLDivElement> & {
@@ -108,14 +111,14 @@ const LANGUAGE_OPTIONS = [
   { label: "JS", value: "javascript" },
 ] as const;
 
-type SupportedLanguage = "bash" | "javascript" | "markdown" | "python";
+type SupportedLanguage =
+  | "bash"
+  | "javascript"
+  | "markdown"
+  | "python";
 
 const outputTextDecoder = new TextDecoder();
-const OUTPUT_SKIP_MIMES = new Set<string>([
-  MimeType.StatefulRunmeTerminal,
-  MimeType.VSCodeNotebookStdOut,
-  MimeType.VSCodeNotebookStdErr,
-]);
+const ALWAYS_SKIP_MIMES = new Set<string>([MimeType.StatefulRunmeTerminal]);
 
 function normalizeLanguageId(
   kind: parser_pb.CellKind,
@@ -237,10 +240,24 @@ function ActionOutputItemView({
 }
 
 function ActionOutputItems({ outputs }: { outputs: parser_pb.CellOutput[] }) {
+  const hasTerminalOutput = outputs.some((output) =>
+    (output.items ?? []).some((item) => item?.mime === MimeType.StatefulRunmeTerminal),
+  );
+
   const displayableItems = outputs.flatMap((output, outputIndex) =>
     (output.items ?? [])
       .map((item, itemIndex) => {
-        if (!item || OUTPUT_SKIP_MIMES.has(item.mime || "")) {
+        if (!item) {
+          return null;
+        }
+        const mime = item.mime || "";
+        if (ALWAYS_SKIP_MIMES.has(mime)) {
+          return null;
+        }
+        if (
+          hasTerminalOutput &&
+          (mime === MimeType.VSCodeNotebookStdOut || mime === MimeType.VSCodeNotebookStdErr)
+        ) {
           return null;
         }
         if (!(item.data instanceof Uint8Array)) {
@@ -423,56 +440,11 @@ export function Action({ cellData, isFirst }: { cellData: CellData; isFirst: boo
   }
 
   const renderedOutputs = useMemo(() => {
-    const languageId = cell?.languageId?.toLowerCase();
-    const isObservable = languageId === "observable" || languageId === "d3";
-    const isJavaScript =
-      languageId === "javascript" ||
-      languageId === "typescript" ||
-      languageId === "js" ||
-      languageId === "ts";
-    const isPython = languageId === "python" || languageId === "py";
-
-    if (!isPython && (isObservable || isJavaScript)) {
-      return (
-        <WebContainerConsole
-          key={`webcontainer-${cell.refId}`}
-          cell={cell}
-          onPid={setPid}
-          onExitCode={handleExitCode}
-        />
-      );
-    }
-
-    // For non-JS/Observable cells, prefer renderer-backed outputs. If none
-    // exist (fresh cell), fall back to the terminal console so the user sees
-    // an output area immediately.
-    // const rendered = cellData.snapshot?.outputs
-    //   .flatMap((o) =>
-    //     (o.items ?? []).map((oi) => {
-    //       const renderer = getRenderer(oi.mime);
-    //       if (!renderer) {
-    //         return null;
-    //       }
-    //       const Component = renderer.component;
-    //       return (
-    //         <Component
-    //           key={`${oi.mime}-${cell.refId}`}
-    //           cell={cell}
-    //           cellData={cellData}
-    //           onPid={setPid}
-    //           onExitCode={handleExitCode}
-    //           {...renderer.props}
-    //         />
-    //       );
-    //     }),
-    //   )
-    //   .filter(Boolean);
-
-    // if (rendered && rendered.length > 0) {
-    //   return rendered;
-    // }
-
-    if (!runID && (cell?.outputs?.length ?? 0) === 0) {
+    const hasTerminalOutput = (cell?.outputs ?? []).some((output) =>
+      (output.items ?? []).some((item) => item.mime === MimeType.StatefulRunmeTerminal),
+    );
+    const hasActiveStream = Boolean(cellData.getStreams());
+    if (!hasTerminalOutput && !hasActiveStream) {
       return null;
     }
 
@@ -696,7 +668,11 @@ export function Action({ cellData, isFirst }: { cellData: CellData; isFirst: boo
                 onChange={(event) => {
                   const nextName = event.target.value;
                   const names = new Set(listRunners().map((r) => r.name));
-                  if (!names.has(nextName) && nextName !== DEFAULT_RUNNER_PLACEHOLDER) {
+                  if (
+                    !names.has(nextName) &&
+                    nextName !== DEFAULT_RUNNER_PLACEHOLDER &&
+                    nextName !== APPKERNEL_RUNNER_NAME
+                  ) {
                     return;
                   }
                   cellData.setRunner(nextName);
@@ -706,6 +682,9 @@ export function Action({ cellData, isFirst }: { cellData: CellData; isFirst: boo
                 <option value="<default>">
                   {defaultRunnerName ? `${defaultRunnerName}` : "default"}
                 </option>
+                <option value={APPKERNEL_RUNNER_NAME}>
+                  {APPKERNEL_RUNNER_LABEL}
+                </option>
                 {listRunners().map((runner) => (
                   <option key={runner.name} value={runner.name}>
                     {runner.name}
@@ -942,26 +921,6 @@ export default function Actions() {
         onPid: (pid: number | null) => void;
         onExitCode: (exitCode: number | null) => void;
       }) => {
-        const languageId = cell.languageId?.toLowerCase();
-        const isJavaScript =
-          languageId === "javascript" ||
-          languageId === "typescript" ||
-          languageId === "js" ||
-          languageId === "ts";
-        const isObservable = languageId === "observable" || languageId === "d3";
-        const isPython = languageId === "python" || languageId === "py";
-
-        if (!isPython && (isObservable || isJavaScript)) {
-          return (
-            <WebContainerConsole
-              key={`webcontainer-${cell.refId}`}
-              cell={cell}
-              onPid={onPid}
-              onExitCode={onExitCode}
-            />
-          );
-        }
-
         return (
           // TODO(jlewi): Why do we pass cell which is parser_pb.Cell? Rather than CellData?
           <CellConsole