feat(browser): spin up browser cells from the command center

packages/core/src/command-center/cells.ts

@@ -1,6 +1,12 @@
 import type { AgentSession, WorkspaceMode } from "@posthog/shared";
 import type { Task } from "@posthog/shared/domain-types";
-import { getTerminalCellId, isBrainrotCell, isTerminalCell } from "./grid";
+import {
+  getBrowserCellUrl,
+  getTerminalCellId,
+  isBrainrotCell,
+  isBrowserCell,
+  isTerminalCell,
+} from "./grid";
 import { type CellStatus, deriveStatus, getRepoName } from "./status";
 
 export interface CommandCenterCellData {
@@ -15,6 +21,9 @@ export interface CommandCenterCellData {
   isBrainrot: boolean;
   // Standalone terminal slot, independent of any agent run.
   terminalId: string | null;
+  // Standalone browser slot. Empty string is a valid browser cell, so callers
+  // must check `!== null`, not truthiness.
+  browserUrl: string | null;
 }
 
 export interface BuildCellsInput {
@@ -32,6 +41,7 @@ const EMPTY_CELL_DATA = {
   workspaceMode: null,
   isBrainrot: false,
   terminalId: null,
+  browserUrl: null,
 };
 
 export function buildCommandCenterCells(
@@ -52,6 +62,14 @@ export function buildCommandCenterCells(
       };
     }
 
+    if (isBrowserCell(cellValue)) {
+      return {
+        ...EMPTY_CELL_DATA,
+        cellIndex,
+        browserUrl: getBrowserCellUrl(cellValue),
+      };
+    }
+
     const taskId = cellValue;
     const task = taskId ? taskById.get(taskId) : undefined;
     const session = taskId ? sessionByTaskId.get(taskId) : undefined;

packages/core/src/command-center/grid.test.ts

@@ -2,12 +2,15 @@ import { describe, expect, it } from "vitest";
 import {
   BRAINROT_CELL,
   clampZoom,
+  getBrowserCellUrl,
   getCellCount,
   getCellSessionId,
   getGridDimensions,
   getTerminalCellId,
   isBrainrotCell,
+  isBrowserCell,
   isTerminalCell,
+  makeBrowserCellValue,
   makeTerminalCellValue,
   resizeCells,
 } from "./grid";
@@ -83,6 +86,35 @@ describe("terminal cells", () => {
   });
 });
 
+describe("browser cells", () => {
+  it.each([
+    "about:blank",
+    "https://posthog.com",
+    // A url containing the delimiter and prefix-like text must survive intact.
+    "https://example.com/x?to=__browser__:https://evil.com",
+  ])("round-trips %j through the cell value", (url) => {
+    const value = makeBrowserCellValue(url);
+    expect(isBrowserCell(value)).toBe(true);
+    expect(getBrowserCellUrl(value)).toBe(url);
+  });
+
+  it("round-trips an empty url (blank browser cell)", () => {
+    const value = makeBrowserCellValue("");
+    expect(isBrowserCell(value)).toBe(true);
+    expect(getBrowserCellUrl(value)).toBe("");
+  });
+
+  it.each([
+    { value: "some-task-uuid", expected: false },
+    { value: BRAINROT_CELL, expected: false },
+    { value: makeTerminalCellValue("t1"), expected: false },
+    { value: null, expected: false },
+  ])("isBrowserCell($value) -> $expected", ({ value, expected }) => {
+    expect(isBrowserCell(value)).toBe(expected);
+    expect(getBrowserCellUrl(value)).toBeNull();
+  });
+});
+
 describe("getCellSessionId", () => {
   it("formats the cell session id", () => {
     expect(getCellSessionId(2)).toBe("cc-cell-2");

packages/core/src/command-center/grid.ts

@@ -35,6 +35,23 @@ export function getTerminalCellId(value: string | null): string | null {
     : null;
 }
 
+// Reserved prefix for standalone browser cells; the whole remainder is the
+// url, so urls containing ":" or the prefix text are safe. Never collides with
+// task ids (uuids), BRAINROT_CELL, or terminal cells.
+export const BROWSER_CELL_PREFIX = "__browser__:";
+
+export function isBrowserCell(value: string | null): value is string {
+  return value?.startsWith(BROWSER_CELL_PREFIX) ?? false;
+}
+
+export function makeBrowserCellValue(url: string): string {
+  return `${BROWSER_CELL_PREFIX}${url}`;
+}
+
+export function getBrowserCellUrl(value: string | null): string | null {
+  return isBrowserCell(value) ? value.slice(BROWSER_CELL_PREFIX.length) : null;
+}
+
 export function getGridDimensions(preset: LayoutPreset): GridDimensions {
   const [cols, rows] = preset.split("x").map(Number);
   return { cols, rows };

packages/ui/src/features/command-center/commandCenterStore.ts

@@ -2,7 +2,9 @@ import {
   BRAINROT_CELL,
   clampZoom,
   getCellCount,
+  isBrowserCell,
   type LayoutPreset,
+  makeBrowserCellValue,
   makeTerminalCellValue,
   resizeCells,
   ZOOM_STEP,
@@ -35,6 +37,8 @@ interface CommandCenterStoreActions {
   assignTask: (cellIndex: number, taskId: string) => void;
   setBrainrotCell: (cellIndex: number) => void;
   setTerminalCell: (cellIndex: number, terminalId: string) => void;
+  setBrowserCell: (cellIndex: number, url: string) => void;
+  updateBrowserCellUrl: (cellIndex: number, url: string) => void;
   autofillCells: (taskIds: string[]) => void;
   clearCell: (cellIndex: number) => void;
   removeTaskById: (taskId: string) => void;
@@ -132,6 +136,31 @@ export const useCommandCenterStore = create<CommandCenterStore>()(
           };
         }),
 
+      setBrowserCell: (cellIndex, url) =>
+        set((state) => {
+          if (cellIndex < 0 || cellIndex >= state.cells.length) return state;
+          const cells = [...state.cells];
+          cells[cellIndex] = makeBrowserCellValue(url);
+          return {
+            cells,
+            activeTaskId: null,
+            activeCellIndex: cellIndex,
+            creatingCells: state.creatingCells.filter((i) => i !== cellIndex),
+            hasAutofilled: true,
+          };
+        }),
+
+      // Guarded so a stale navigation callback firing after the cell was
+      // replaced can't clobber whatever now occupies it.
+      updateBrowserCellUrl: (cellIndex, url) =>
+        set((state) => {
+          if (cellIndex < 0 || cellIndex >= state.cells.length) return state;
+          if (!isBrowserCell(state.cells[cellIndex])) return state;
+          const cells = [...state.cells];
+          cells[cellIndex] = makeBrowserCellValue(url);
+          return { cells };
+        }),
+
       autofillCells: (taskIds) =>
         set((state) => {
           // Grid already full: nothing to place, but the bootstrap is done.