From 4b88d269e34cf05a41975f44a8589fcf5c89c7b4 Mon Sep 17 00:00:00 2001
From: Vassiliy Yegorov <va@egorovanet.ru>
Date: Tue, 9 Jun 2026 21:29:26 +0700
Subject: [PATCH] =?UTF-8?q?feat(app):=20LayoutEngine=20=E2=80=94=20recursi?=
 =?UTF-8?q?ve=20split=20render,=20splitter=20resize,=20stopped=20overlay?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 app/src/LayoutEngine.tsx | 90 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 90 insertions(+)
 create mode 100644 app/src/LayoutEngine.tsx

diff --git a/app/src/LayoutEngine.tsx b/app/src/LayoutEngine.tsx
new file mode 100644
index 0000000..2ca517e
--- /dev/null
+++ b/app/src/LayoutEngine.tsx
@@ -0,0 +1,90 @@
+import { useRef } from "react";
+import { TerminalView } from "./TerminalView";
+import type { LayoutNode } from "./layoutTypes";
+import { setRatios, restartSurface } from "./socketBridge";
+
+interface Props {
+  workspaceId: string;
+  layout: LayoutNode | null;
+  /** surface_id -> running flag, from the latest status/events. */
+  running: Record<string, boolean>;
+}
+
+export function LayoutEngine({ workspaceId, layout, running }: Props) {
+  if (!layout) {
+    return <div style={{ color: "#666", padding: 24 }}>Empty workspace — apply a preset to add panels.</div>;
+  }
+  return <Node workspaceId={workspaceId} node={layout} path={[]} running={running} />;
+}
+
+function Node({ workspaceId, node, path, running }: { workspaceId: string; node: LayoutNode; path: number[]; running: Record<string, boolean> }) {
+  if ("leaf" in node) {
+    const id = node.leaf.surface_id;
+    if (running[id] === false) {
+      return (
+        <div style={{ display: "flex", alignItems: "center", justifyContent: "center", height: "100%", width: "100%", background: "#0A0D12", color: "#8B97A6", flexDirection: "column", gap: 10 }}>
+          <div style={{ fontFamily: "monospace", fontSize: 13 }}>Process exited</div>
+          <button onClick={() => void restartSurface(id)} style={{ padding: "6px 14px" }}>⏎ Restart</button>
+        </div>
+      );
+    }
+    return <TerminalView key={id} surfaceId={id} />;
+  }
+
+  const { orient, ratios, children } = node.split;
+  const dir = orient === "h" ? "row" : "column";
+  return (
+    <div style={{ display: "flex", flexDirection: dir, width: "100%", height: "100%" }}>
+      {children.map((child, i) => (
+        <Pane key={i} grow={ratios[i] ?? 1} isLast={i === children.length - 1} orient={orient}
+          onResize={(deltaFrac) => {
+            const next = [...ratios];
+            next[i] = Math.max(0.05, next[i] + deltaFrac);
+            next[i + 1] = Math.max(0.05, (next[i + 1] ?? 1) - deltaFrac);
+            void setRatios(workspaceId, path, next);
+          }}>
+          <Node workspaceId={workspaceId} node={child} path={[...path, i]} running={running} />
+        </Pane>
+      ))}
+    </div>
+  );
+}
+
+function Pane({ grow, isLast, orient, onResize, children }: { grow: number; isLast: boolean; orient: "h" | "v"; onResize: (deltaFrac: number) => void; children: React.ReactNode }) {
+  const ref = useRef<HTMLDivElement>(null);
+  const startDrag = (e: React.MouseEvent) => {
+    e.preventDefault();
+    const parent = ref.current?.parentElement;
+    if (!parent) return;
+    const total = orient === "h" ? parent.clientWidth : parent.clientHeight;
+    const start = orient === "h" ? e.clientX : e.clientY;
+    let last = start;
+    const move = (ev: MouseEvent) => {
+      const cur = orient === "h" ? ev.clientX : ev.clientY;
+      const delta = (cur - last) / total;
+      last = cur;
+      onResize(delta);
+    };
+    const up = () => {
+      window.removeEventListener("mousemove", move);
+      window.removeEventListener("mouseup", up);
+    };
+    window.addEventListener("mousemove", move);
+    window.addEventListener("mouseup", up);
+  };
+  return (
+    <>
+      <div ref={ref} style={{ flexGrow: grow, flexBasis: 0, minWidth: 0, minHeight: 0, overflow: "hidden", position: "relative" }}>
+        {children}
+      </div>
+      {!isLast && (
+        <div onMouseDown={startDrag}
+          style={{
+            flex: "0 0 4px",
+            cursor: orient === "h" ? "col-resize" : "row-resize",
+            background: "#232A33",
+          }} />
+      )}
+    </>
+  );
+}