clean up more styles + add lint

eslint.config.js

···
 import { defineConfig } from "eslint/config";
 import reactHooks from "eslint-plugin-react-hooks";
 import tseslint from "typescript-eslint";
+import { noMixedClassPrefixes } from "./eslint/no-mixed-class-prefixes.js";
 
 export default defineConfig([
   {
···
   },
   reactHooks.configs.flat.recommended,
   tseslint.configs.base,
+  {
+    files: ["**/*.tsx", "**/*.jsx"],
+    plugins: {
+      local: {
+        rules: {
+          "no-mixed-class-prefixes": noMixedClassPrefixes,
+        },
+      },
+    },
+    rules: {
+      "local/no-mixed-class-prefixes": "error",
+    },
+  },
 ]);

eslint/no-mixed-class-prefixes.js

···
+// @ts-check
+
+/**
+ * ESLint rule to enforce CSS class naming conventions:
+ * 1. CSS imports must match the component file name
+ * 2. All classNames in the file must use the file's prefix (poor man's CSS modules)
+ */
+
+/** @type {import('eslint').Rule.RuleModule} */
+export const noMixedClassPrefixes = {
+  meta: {
+    type: "problem",
+    docs: {
+      description: "Enforce CSS class naming matches component file name",
+    },
+    schema: [],
+    messages: {
+      mismatchedClass: "Class '{{className}}' must start with '{{expectedPrefix}}' (the file name)",
+      mismatchedCssImport:
+        "CSS file '{{cssFile}}' does not match component file '{{componentFile}}'",
+    },
+  },
+
+  create(context) {
+    const filename = context.filename || context.getFilename();
+    const basename = filename.split("/").pop() || "";
+    const filePrefix = basename.replace(/\.(tsx?|jsx?)$/, "");
+
+    // Only apply to PascalCase component files
+    if (!/^[A-Z]/.test(filePrefix)) {
+      return {};
+    }
+
+    /**
+     * Check if className is valid for this file
+     * Valid: FilePrefix, FilePrefix-foo, FilePrefix--bar, FilePrefix-foo--bar
+     * @param {string} className
+     * @returns {boolean}
+     */
+    function isValidClassName(className) {
+      if (className === filePrefix) return true;
+      if (className.startsWith(filePrefix + "-")) return true;
+      return false;
+    }
+
+    /**
+     * Check classes in a string
+     * @param {import('estree').Node} node
+     * @param {string} value
+     */
+    function checkClassString(node, value) {
+      const classes = value.split(/\s+/).filter(Boolean);
+
+      for (const className of classes) {
+        // Only check PascalCase classes (component classes)
+        if (!/^[A-Z]/.test(className)) continue;
+
+        if (!isValidClassName(className)) {
+          context.report({
+            node,
+            messageId: "mismatchedClass",
+            data: {
+              className,
+              expectedPrefix: filePrefix,
+            },
+          });
+        }
+      }
+    }
+
+    return {
+      // Check CSS imports match file name
+      ImportDeclaration(node) {
+        const source = node.source.value;
+        if (typeof source !== "string") return;
+        if (!source.endsWith(".css")) return;
+
+        const cssBasename = source.split("/").pop() || "";
+        const cssPrefix = cssBasename.replace(/\.css$/, "");
+
+        if (cssPrefix !== filePrefix) {
+          context.report({
+            node,
+            messageId: "mismatchedCssImport",
+            data: {
+              cssFile: cssBasename,
+              componentFile: basename,
+            },
+          });
+        }
+      },
+
+      // Check className attributes
+      JSXAttribute(node) {
+        if (node.name.name !== "className") return;
+
+        const value = node.value;
+
+        // className="foo bar"
+        if (value && value.type === "Literal" && typeof value.value === "string") {
+          checkClassString(value, value.value);
+        }
+
+        // className={...}
+        if (value && value.type === "JSXExpressionContainer") {
+          const expr = value.expression;
+
+          // className={"foo bar"}
+          if (expr.type === "Literal" && typeof expr.value === "string") {
+            checkClassString(expr, expr.value);
+          }
+
+          // className={`foo ${bar}`}
+          if (expr.type === "TemplateLiteral") {
+            for (const quasi of expr.quasis) {
+              if (quasi.value.raw) {
+                checkClassString(quasi, quasi.value.raw);
+              }
+            }
+          }
+        }
+      },
+    };
+  },
+};

src/client/ui/App.css

···
   color: var(--text-bright);
 }
 
-/* ExampleSelect */
+/* App-exampleSelect */
 
-.ExampleSelect {
+.App-exampleSelect {
   display: flex;
   align-items: center;
   gap: 10px;
···
   border-left: 1px solid var(--border);
 }
 
-.ExampleSelect-label {
+.App-exampleSelect-label {
   font-size: 11px;
   color: var(--text-dim);
   text-transform: uppercase;
   letter-spacing: 0.5px;
 }
 
-.ExampleSelect-selectWrapper {
+.App-exampleSelect-selectWrapper {
   min-width: 150px;
 }
 
-.ExampleSelect-saveBtn,
-.ExampleSelect-embedBtn {
+.App-exampleSelect-saveBtn,
+.App-exampleSelect-embedBtn {
   background: var(--surface);
   border: 1px solid var(--border);
   color: var(--text);
···
   justify-content: center;
 }
 
-.ExampleSelect-saveBtn:hover:not(:disabled),
-.ExampleSelect-embedBtn:hover:not(:disabled) {
+.App-exampleSelect-saveBtn:hover:not(:disabled),
+.App-exampleSelect-embedBtn:hover:not(:disabled) {
   border-color: #444;
   background: #2a2a2a;
 }
 
-.ExampleSelect-saveBtn:disabled,
-.ExampleSelect-embedBtn:disabled {
+.App-exampleSelect-saveBtn:disabled,
+.App-exampleSelect-embedBtn:disabled {
   opacity: 0.4;
   cursor: not-allowed;
 }
 
-/* BuildSwitcher */
+/* App-buildSwitcher */
 
-.BuildSwitcher {
+.App-buildSwitcher {
   display: flex;
   align-items: center;
   gap: 8px;
 }
 
-.BuildSwitcher-label {
+.App-buildSwitcher-label {
   font-size: 11px;
   color: var(--text-dim);
   text-transform: uppercase;
   letter-spacing: 0.5px;
 }
 
-.BuildSwitcher-version {
+.App-buildSwitcher-version {
   min-width: 150px;
 }
 
-.BuildSwitcher-mode {
+.App-buildSwitcher-mode {
   min-width: 70px;
 }
 
-/* EmbedModal */
+/* App-embedModal */
 
-.EmbedModal-overlay {
+.App-embedModal-overlay {
   position: fixed;
   inset: 0;
   background: rgba(0, 0, 0, 0.7);
···
   z-index: 1000;
 }
 
-.EmbedModal {
+.App-embedModal {
   background: var(--surface);
   border: 1px solid var(--border);
   border-radius: 8px;
···
   flex-direction: column;
 }
 
-.EmbedModal-header {
+.App-embedModal-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
···
   border-bottom: 1px solid var(--border);
 }
 
-.EmbedModal-title {
+.App-embedModal-title {
   margin: 0;
   font-size: 16px;
   font-weight: 600;
   color: var(--text-bright);
 }
 
-.EmbedModal-closeBtn {
+.App-embedModal-closeBtn {
   background: none;
   border: none;
   color: var(--text-dim);
···
   line-height: 1;
 }
 
-.EmbedModal-closeBtn:hover {
+.App-embedModal-closeBtn:hover {
   color: var(--text-bright);
 }
 
-.EmbedModal-body {
+.App-embedModal-body {
   padding: 16px;
   overflow: auto;
 }
 
-.EmbedModal-description {
+.App-embedModal-description {
   margin: 0 0 12px;
   font-size: 13px;
   color: var(--text);
 }
 
-.EmbedModal-textarea {
+.App-embedModal-textarea {
   width: 100%;
   height: 250px;
   background: var(--bg);
···
   resize: none;
 }
 
-.EmbedModal-textarea:focus {
+.App-embedModal-textarea:focus {
   outline: none;
   border-color: #555;
 }
 
-.EmbedModal-footer {
+.App-embedModal-footer {
   padding: 16px;
   border-top: 1px solid var(--border);
   display: flex;
   justify-content: flex-end;
 }
 
-.EmbedModal-copyBtn {
+.App-embedModal-copyBtn {
   background: #ffd54f;
   border: none;
   color: #000;
···
   cursor: pointer;
 }
 
-.EmbedModal-copyBtn:hover {
+.App-embedModal-copyBtn:hover {
   background: #ffe566;
 }
 
 /* Responsive */
 
 @media (max-width: 900px) {
-  .ExampleSelect-label,
-  .BuildSwitcher-label {
+  .App-exampleSelect-label,
+  .App-buildSwitcher-label {
     display: none;
   }
 }
···
     display: none;
   }
 
-  .ExampleSelect {
+  .App-exampleSelect {
     border-left: none;
   }
 
···
     min-width: 0;
   }
 
-  .ExampleSelect {
+  .App-exampleSelect {
     padding-left: 6px;
     margin-left: 2px;
     gap: 4px;
   }
 
-  .ExampleSelect-selectWrapper {
+  .App-exampleSelect-selectWrapper {
     min-width: 0;
   }
 
-  .BuildSwitcher-version,
-  .BuildSwitcher-mode {
+  .App-buildSwitcher-version,
+  .App-buildSwitcher-mode {
     min-width: 0;
   }
 
-  .BuildSwitcher {
+  .App-buildSwitcher {
     padding-left: 6px;
     gap: 4px;
   }
···
     font-size: 10px;
   }
 
-  .ExampleSelect {
+  .App-exampleSelect {
     padding-left: 4px;
     margin-left: 0;
     border-left: none;
   }
 
-  .ExampleSelect-selectWrapper {
+  .App-exampleSelect-selectWrapper {
     max-width: 110px;
   }
 
-  .BuildSwitcher {
+  .App-buildSwitcher {
     padding-left: 4px;
     border-left: none;
   }
 
-  .BuildSwitcher-version,
-  .BuildSwitcher-mode {
+  .App-buildSwitcher-version,
+  .App-buildSwitcher-mode {
     max-width: 80px;
   }
 }
 
 @media (max-width: 360px) {
-  .BuildSwitcher-version,
-  .BuildSwitcher-mode {
+  .App-buildSwitcher-version,
+  .App-buildSwitcher-mode {
     max-width: 75px;
   }
 }

src/client/ui/App.tsx

···
   };
 
   return (
-    <div className="BuildSwitcher">
-      <label className="BuildSwitcher-label">React</label>
-      <div className="BuildSwitcher-version">
+    <div className="App-buildSwitcher">
+      <label className="App-buildSwitcher-label">React</label>
+      <div className="App-buildSwitcher-version">
         <Select value={version} onChange={handleVersionChange} disabled={isDisabled}>
           {(REACT_VERSIONS as string[]).map((v) => (
             <option key={v} value={v}>
···
           ))}
         </Select>
       </div>
-      <div className="BuildSwitcher-mode">
+      <div className="App-buildSwitcher-mode">
         <Select value={isDev ? "dev" : "prod"} onChange={handleModeChange} disabled={isDisabled}>
           <option value="prod">prod</option>
           <option value="dev">dev</option>
···
   };
 
   return (
-    <div className="EmbedModal-overlay" onClick={onClose}>
-      <div className="EmbedModal" onClick={(e: MouseEvent) => e.stopPropagation()}>
-        <div className="EmbedModal-header">
-          <h2 className="EmbedModal-title">Embed this example</h2>
-          <button className="EmbedModal-closeBtn" onClick={onClose}>
+    <div className="App-embedModal-overlay" onClick={onClose}>
+      <div className="App-embedModal" onClick={(e: MouseEvent) => e.stopPropagation()}>
+        <div className="App-embedModal-header">
+          <h2 className="App-embedModal-title">Embed this example</h2>
+          <button className="App-embedModal-closeBtn" onClick={onClose}>
             &times;
           </button>
         </div>
-        <div className="EmbedModal-body">
-          <p className="EmbedModal-description">Copy and paste this code into your HTML:</p>
+        <div className="App-embedModal-body">
+          <p className="App-embedModal-description">Copy and paste this code into your HTML:</p>
           <textarea
             ref={textareaRef}
-            className="EmbedModal-textarea"
+            className="App-embedModal-textarea"
             readOnly
             value={embedCode}
             onClick={(e) => (e.target as HTMLTextAreaElement).select()}
           />
         </div>
-        <div className="EmbedModal-footer">
-          <button className="EmbedModal-copyBtn" onClick={handleCopy}>
+        <div className="App-embedModal-footer">
+          <button className="App-embedModal-copyBtn" onClick={handleCopy}>
             {copied ? "Copied!" : "Copy to clipboard"}
           </button>
         </div>
···
     <>
       <header className="App-header">
         <h1 className="App-title">RSC Explorer</h1>
-        <div className="ExampleSelect">
-          <label className="ExampleSelect-label">Example</label>
-          <div className="ExampleSelect-selectWrapper">
+        <div className="App-exampleSelect">
+          <label className="App-exampleSelect-label">Example</label>
+          <div className="App-exampleSelect-selectWrapper">
             <Select value={currentSample ?? ""} onChange={handleSampleChange}>
               {!currentSample && <option value="">Custom</option>}
               {Object.entries(SAMPLES).map(([key, sample]) => (
···
             </Select>
           </div>
           <button
-            className="ExampleSelect-saveBtn"
+            className="App-exampleSelect-saveBtn"
             onClick={handleSave}
             disabled={!isDirty}
             title="Save to URL"
···
             </svg>
           </button>
           <button
-            className="ExampleSelect-embedBtn"
+            className="App-exampleSelect-embedBtn"
             onClick={() => setShowEmbedModal(true)}
             title="Embed"
           >

src/client/ui/CodeEditor.css

···
 /* CodeEditor component styles */
 
-.CodeEditor-container {
+.CodeEditor {
   flex: 1;
   min-height: 0;
   position: relative;
···
   background: var(--bg);
 }
 
-.CodeEditor-container .cm-editor {
+.CodeEditor .cm-editor {
   position: absolute !important;
   top: 0;
   left: 0;
···
   background: transparent;
 }
 
-.CodeEditor-container .cm-editor .cm-scroller {
+.CodeEditor .cm-editor .cm-scroller {
   overflow: auto !important;
 }

src/client/ui/CodeEditor.tsx

···
 import { tags } from "@lezer/highlight";
 import { history, historyKeymap, defaultKeymap } from "@codemirror/commands";
 import { closeBrackets, closeBracketsKeymap } from "@codemirror/autocomplete";
+import { Pane } from "./Pane.tsx";
 import "./CodeEditor.css";
 
 const highlightStyle = HighlightStyle.define([
···
   defaultValue: string;
   onChange: (code: string) => void;
   label: string;
-  paneClass?: string;
 };
 
-export function CodeEditor({
-  defaultValue,
-  onChange,
-  label,
-  paneClass,
-}: CodeEditorProps): React.ReactElement {
+export function CodeEditor({ defaultValue, onChange, label }: CodeEditorProps): React.ReactElement {
   const [initialDefaultValue] = useState(defaultValue);
   const containerRef = useRef<HTMLDivElement>(null);
 
···
   }, [initialDefaultValue]);
 
   return (
-    <div className={`Workspace-pane${paneClass ? ` ${paneClass}` : ""}`}>
-      <div className="Workspace-paneHeader">{label}</div>
-      <div className="CodeEditor-container" ref={containerRef} />
-    </div>
+    <Pane label={label}>
+      <div className="CodeEditor" ref={containerRef} />
+    </Pane>
   );
 }

src/client/ui/FlightLog.css

···
   }
 }
 
-/* FlightLogEntry */
+/* FlightLog-entry */
 
-.FlightLogEntry {
+.FlightLog-entry {
   background: var(--surface);
   border: 1px solid var(--border);
   border-radius: 4px;
···
   border-left: 3px solid #555;
 }
 
-.FlightLogEntry + .FlightLogEntry {
+.FlightLog-entry + .FlightLog-entry {
   margin-top: 12px;
 }
 
-.FlightLogEntry--active {
+.FlightLog-entry--active {
   border-left-color: #ffd54f;
 }
 
-.FlightLogEntry--done {
+.FlightLog-entry--done {
   border-left-color: #555;
   opacity: 0.8;
 }
 
-.FlightLogEntry--pending {
+.FlightLog-entry--pending {
   border-left-color: #333;
   opacity: 0.4;
 }
 
-.FlightLogEntry-header {
+.FlightLog-entry-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
···
   border-bottom: 1px solid var(--border);
 }
 
-.FlightLogEntry-label {
+.FlightLog-entry-label {
   color: var(--text);
   font-weight: 500;
 }
 
-.FlightLogEntry-headerRight {
+.FlightLog-entry-headerRight {
   display: flex;
   align-items: center;
   gap: 8px;
 }
 
-.FlightLogEntry-deleteBtn {
+.FlightLog-entry-deleteBtn {
   background: transparent;
   border: none;
   color: var(--text-dim);
···
     color 0.15s;
 }
 
-.FlightLogEntry-deleteBtn:hover {
+.FlightLog-entry-deleteBtn:hover {
   opacity: 1;
   color: #e57373;
 }
 
-.FlightLogEntry-request {
+.FlightLog-entry-request {
   padding: 8px 10px;
   background: rgba(0, 0, 0, 0.2);
   border-bottom: 1px solid var(--border);
 }
 
-.FlightLogEntry-requestArgs {
+.FlightLog-entry-requestArgs {
   margin: 0;
   font-family: var(--font-mono);
   font-size: 11px;
···
   word-break: break-all;
 }
 
-/* RenderLogView */
+/* FlightLog-renderView */
 
-.RenderLogView {
+.FlightLog-renderView {
   border-top: 1px solid var(--border);
   padding: 8px;
 }
 
-.RenderLogView-split {
+.FlightLog-renderView-split {
   display: flex;
   gap: 8px;
   align-items: stretch;
 }
 
-.RenderLogView-linesWrapper {
+.FlightLog-linesWrapper {
   flex: 1;
   min-width: 0;
   position: relative;
   min-height: 150px;
 }
 
-.RenderLogView-lines {
+.FlightLog-lines {
   position: absolute;
   top: 0;
   left: 0;
···
   overflow: auto;
 }
 
-.RenderLogView-line {
+.FlightLog-line {
   display: block;
   padding: 6px 8px;
   margin-bottom: 3px;
···
   transition: all 0.15s ease;
 }
 
-.RenderLogView-line:last-child {
+.FlightLog-line:last-child {
   margin-bottom: 0;
 }
 
-.RenderLogView-line--done {
+.FlightLog-line--done {
   color: #999;
   background: rgba(255, 255, 255, 0.03);
   border-left-color: #555;
 }
 
-.RenderLogView-line--next {
+.FlightLog-line--next {
   color: #e0e0e0;
   background: rgba(255, 213, 79, 0.12);
   border-left-color: #ffd54f;
 }
 
-.RenderLogView-line--pending {
+.FlightLog-line--pending {
   color: #444;
   background: transparent;
   border-left-color: #333;
   opacity: 0.4;
 }
 
-.RenderLogView-tree {
+.FlightLog-tree {
   flex: 1;
   min-width: 0;
   border-radius: 4px;
···
   flex-direction: column;
 }
 
-.RenderLogView-tree:has(.FlightTreeView) {
+.FlightLog-tree:has(.TreeView) {
   background: #000;
 }
 
-/* RawActionForm */
+/* FlightLog-rawForm */
 
-.RawActionForm {
+.FlightLog-rawForm {
   margin-top: 8px;
   padding: 10px;
   background: var(--surface);
···
   gap: 8px;
 }
 
-.RawActionForm-textarea {
+.FlightLog-rawForm-textarea {
   width: 100%;
   padding: 8px;
   background: var(--bg);
···
   min-height: 100px;
 }
 
-.RawActionForm-textarea:focus {
+.FlightLog-rawForm-textarea:focus {
   outline: none;
   border-color: #555;
 }
 
-.RawActionForm-buttons {
+.FlightLog-rawForm-buttons {
   display: flex;
   gap: 8px;
 }
 
-.RawActionForm-submitBtn {
+.FlightLog-rawForm-submitBtn {
   padding: 5px 12px;
   border-radius: 3px;
   font-size: 11px;
···
   color: #000;
 }
 
-.RawActionForm-submitBtn:disabled {
+.FlightLog-rawForm-submitBtn:disabled {
   background: #555;
   color: #888;
   cursor: not-allowed;
 }
 
-.RawActionForm-cancelBtn {
+.FlightLog-rawForm-cancelBtn {
   padding: 5px 12px;
   border-radius: 3px;
   font-size: 11px;
···
   color: var(--text-dim);
 }
 
-.RawActionForm-cancelBtn:hover {
+.FlightLog-rawForm-cancelBtn:hover {
   border-color: #555;
   color: var(--text);
 }
 
-/* AddActionButton */
+/* FlightLog-addButton */
 
-.AddActionButton-wrapper {
+.FlightLog-addButton-wrapper {
   display: flex;
   justify-content: center;
   margin-top: 8px;
 }
 
-.AddActionButton {
+.FlightLog-addButton {
   width: 24px;
   height: 24px;
   padding: 0;
···
   transition: all 0.15s;
 }
 
-.AddActionButton:hover {
+.FlightLog-addButton:hover {
   background: #3a3a3a;
   border-color: #666;
   color: var(--text);
···
 /* Responsive */
 
 @media (max-width: 768px) {
-  .RawActionForm-textarea {
+  .FlightLog-rawForm-textarea {
     font-size: 16px !important;
   }
 }

src/client/ui/FlightLog.tsx

···
 
   const getLineClass = (i: number): string => {
     const globalChunk = chunkStart + i;
-    if (globalChunk < cursor) return "RenderLogView-line--done";
-    if (globalChunk === cursor) return "RenderLogView-line--next";
-    return "RenderLogView-line--pending";
+    if (globalChunk < cursor) return "FlightLog-line--done";
+    if (globalChunk === cursor) return "FlightLog-line--next";
+    return "FlightLog-line--pending";
   };
 
   const showTree = cursor >= chunkStart;
 
   return (
-    <div className="RenderLogView">
-      <div className="RenderLogView-split">
-        <div className="RenderLogView-linesWrapper">
-          <pre className="RenderLogView-lines">
+    <div className="FlightLog-renderView">
+      <div className="FlightLog-renderView-split">
+        <div className="FlightLog-linesWrapper">
+          <pre className="FlightLog-lines">
             {rows.map((line, i) => (
               <span
                 key={i}
                 ref={i === nextLineIndex ? activeRef : null}
-                className={`RenderLogView-line ${getLineClass(i)}`}
+                className={`FlightLog-line ${getLineClass(i)}`}
               >
                 {escapeHtml(line)}
               </span>
             ))}
           </pre>
         </div>
-        <div className="RenderLogView-tree">
+        <div className="FlightLog-tree">
           {showTree && <FlightTreeView flightPromise={flightPromise ?? null} inEntry />}
         </div>
       </div>
···
   onDelete,
 }: FlightLogEntryProps): React.ReactElement {
   const modifierClass = entry.isActive
-    ? "FlightLogEntry--active"
+    ? "FlightLog-entry--active"
     : entry.isDone
-      ? "FlightLogEntry--done"
-      : "FlightLogEntry--pending";
+      ? "FlightLog-entry--done"
+      : "FlightLog-entry--pending";
 
   return (
-    <div className={`FlightLogEntry ${modifierClass}`}>
-      <div className="FlightLogEntry-header">
-        <span className="FlightLogEntry-label">
+    <div className={`FlightLog-entry ${modifierClass}`}>
+      <div className="FlightLog-entry-header">
+        <span className="FlightLog-entry-label">
           {entry.type === "render" ? "Render" : `Action: ${entry.name}`}
         </span>
-        <span className="FlightLogEntry-headerRight">
+        <span className="FlightLog-entry-headerRight">
           {entry.canDelete && (
             <button
-              className="FlightLogEntry-deleteBtn"
+              className="FlightLog-entry-deleteBtn"
               onClick={() => onDelete(index)}
               title="Delete"
             >
···
         </span>
       </div>
       {entry.type === "action" && entry.args && (
-        <div className="FlightLogEntry-request">
-          <pre className="FlightLogEntry-requestArgs">{entry.args}</pre>
+        <div className="FlightLog-entry-request">
+          <pre className="FlightLog-entry-requestArgs">{entry.args}</pre>
         </div>
       )}
       <RenderLogView entry={entry} cursor={cursor} />
···
       ))}
       {availableActions.length > 0 &&
         (showRawInput ? (
-          <div className="RawActionForm">
+          <div className="FlightLog-rawForm">
             <Select value={selectedAction} onChange={(e) => setSelectedAction(e.target.value)}>
               {availableActions.map((action) => (
                 <option key={action} value={action}>
···
               placeholder="Paste a request payload from a real action"
               value={rawPayload}
               onChange={(e) => setRawPayload(e.target.value)}
-              className="RawActionForm-textarea"
+              className="FlightLog-rawForm-textarea"
               rows={6}
             />
-            <div className="RawActionForm-buttons">
+            <div className="FlightLog-rawForm-buttons">
               <button
-                className="RawActionForm-submitBtn"
+                className="FlightLog-rawForm-submitBtn"
                 onClick={handleAddRaw}
                 disabled={!rawPayload.trim()}
               >
                 Add
               </button>
-              <button className="RawActionForm-cancelBtn" onClick={() => setShowRawInput(false)}>
+              <button
+                className="FlightLog-rawForm-cancelBtn"
+                onClick={() => setShowRawInput(false)}
+              >
                 Cancel
               </button>
             </div>
           </div>
         ) : (
-          <div className="AddActionButton-wrapper">
-            <button className="AddActionButton" onClick={handleShowRawInput} title="Add action">
+          <div className="FlightLog-addButton-wrapper">
+            <button className="FlightLog-addButton" onClick={handleShowRawInput} title="Add action">
               +
             </button>
           </div>

src/client/ui/LivePreview.tsx

···
 import React, { Suspense, Component, useState, useEffect, type ReactNode } from "react";
 import type { EntryView, Thenable } from "../runtime/index.ts";
+import { Pane } from "./Pane.tsx";
 import "./LivePreview.css";
 
 type PreviewErrorBoundaryProps = {
···
   }
 
   return (
-    <div className="Workspace-pane Workspace-pane--preview">
-      <div className="Workspace-paneHeader">preview</div>
+    <Pane label="preview">
       <div className="LivePreview-playback">
         <div className="LivePreview-controls">
           <button
···
           </PreviewErrorBoundary>
         ) : null}
       </div>
-    </div>
+    </Pane>
   );
 }

src/client/ui/Pane.css

···
+/* Pane component styles */
+
+.Pane {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.Pane-header {
+  padding: 6px 12px;
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  color: var(--text-dim);
+  flex-shrink: 0;
+  border-bottom: 1px solid var(--border);
+}

src/client/ui/Pane.tsx

···
+import React, { type ReactNode } from "react";
+import "./Pane.css";
+
+type PaneProps = {
+  label: string;
+  children: ReactNode;
+};
+
+export function Pane({ label, children }: PaneProps): React.ReactElement {
+  return (
+    <div className="Pane">
+      <div className="Pane-header">{label}</div>
+      {children}
+    </div>
+  );
+}

src/client/ui/TreeView.css

···
 /* TreeView component styles */
 
-.FlightTreeView {
+.TreeView {
   flex: 1;
   min-height: 0;
   padding: 12px;
···
   background: var(--bg);
 }
 
-.FlightTreeView--inEntry {
+.TreeView--inEntry {
   padding: 8px;
   font-size: 11px;
   line-height: 1.6;
 }
 
-.FlightTreeView-output {
+.TreeView-output {
   margin: 0;
   white-space: pre-wrap;
   word-break: break-word;
   color: var(--text);
 }
 
-/* PendingFallback */
+/* TreeView-pending */
 
-.PendingFallback {
+.TreeView-pending {
   display: inline-block;
   color: #64b5f6;
   background: rgba(100, 181, 246, 0.15);
···
   font-size: 10px;
   font-weight: 500;
   letter-spacing: 0.5px;
-  animation: pendingPulse 2s ease-in-out infinite;
+  animation: treeViewPendingPulse 2s ease-in-out infinite;
 }
 
-@keyframes pendingPulse {
+@keyframes treeViewPendingPulse {
   0%,
   100% {
     opacity: 0.7;
···
   }
 }
 
-/* ErrorFallback */
+/* TreeView-error */
 
-.ErrorFallback {
+.TreeView-error {
   display: inline-block;
   color: #e57373;
   background: rgba(229, 115, 115, 0.15);
···
   letter-spacing: 0.5px;
 }
 
-/* JSXValue types */
+/* TreeView value types */
 
-.JSXValue-null {
+.TreeView-null {
   color: #5c6370;
   font-style: italic;
 }
 
-.JSXValue-undefined {
+.TreeView-undefined {
   color: #5c6370;
   font-style: italic;
 }
 
-.JSXValue-string {
+.TreeView-string {
   color: #98c379;
 }
 
-.JSXValue-number {
+.TreeView-number {
   color: #d19a66;
 }
 
-.JSXValue-boolean {
+.TreeView-boolean {
   color: #56b6c2;
 }
 
-.JSXValue-symbol {
+.TreeView-symbol {
   color: #c678dd;
 }
 
-.JSXValue-function {
+.TreeView-function {
   color: #61afef;
   font-style: italic;
 }
 
-.JSXValue-circular {
+.TreeView-circular {
   color: #e57373;
   font-style: italic;
 }
 
-.JSXValue-date {
+.TreeView-date {
   color: #e5c07b;
 }
 
-.JSXValue-collection {
+.TreeView-collection {
   color: var(--text-dim);
 }
 
-.JSXValue-iterator {
+.TreeView-iterator {
   color: var(--text-dim);
   font-style: italic;
 }
 
-.JSXValue-stream {
+.TreeView-stream {
   color: var(--text-dim);
   font-style: italic;
 }
 
-.JSXValue-key {
+.TreeView-key {
   color: #61afef;
 }
 
-.JSXValue-empty {
+.TreeView-empty {
   color: #5c6370;
   font-style: italic;
 }
 
-.JSXValue-unknown {
+.TreeView-unknown {
   color: var(--text-dim);
 }
 
-/* JSXElement */
+/* TreeView element */
 
-.JSXElement-tag {
+.TreeView-tag {
   color: #e06c75;
 }
 
-.JSXElement-clientTag {
+.TreeView-clientTag {
   color: #c678dd;
 }
 
-.JSXElement-reactTag {
+.TreeView-reactTag {
   color: #e5c07b;
 }
 
-.JSXElement-propName {
+.TreeView-propName {
   color: #61afef;
 }
 
-.JSXElement-children {
+.TreeView-children {
   margin-left: 16px;
   border-left: 1px solid #333;
   padding-left: 12px;

src/client/ui/TreeView.tsx

···
 }
 
 function PendingFallback(): React.ReactElement {
-  return <span className="PendingFallback">Pending</span>;
+  return <span className="TreeView-pending">Pending</span>;
 }
 
 type ErrorFallbackProps = {
···
 
 function ErrorFallback({ error }: ErrorFallbackProps): React.ReactElement {
   const message = error instanceof Error ? error.message : String(error);
-  return <span className="ErrorFallback">Error: {message}</span>;
+  return <span className="TreeView-error">Error: {message}</span>;
 }
 
 type ErrorBoundaryProps = {
···
 
 // `ancestors` tracks the current path for cycle detection
 function JSXValue({ value, indent = 0, ancestors = [] }: JSXValueProps): React.ReactElement {
-  if (value === null) return <span className="JSXValue-null">null</span>;
-  if (value === undefined) return <span className="JSXValue-undefined">undefined</span>;
+  if (value === null) return <span className="TreeView-null">null</span>;
+  if (value === undefined) return <span className="TreeView-undefined">undefined</span>;
 
   if (typeof value === "string") {
     const display = value.length > 50 ? value.slice(0, 50) + "..." : value;
-    return <span className="JSXValue-string">"{escapeHtml(display)}"</span>;
+    return <span className="TreeView-string">"{escapeHtml(display)}"</span>;
   }
   if (typeof value === "number") {
     const display = Object.is(value, -0) ? "-0" : String(value);
-    return <span className="JSXValue-number">{display}</span>;
+    return <span className="TreeView-number">{display}</span>;
   }
   if (typeof value === "bigint") {
-    return <span className="JSXValue-number">{String(value)}n</span>;
+    return <span className="TreeView-number">{String(value)}n</span>;
   }
-  if (typeof value === "boolean") return <span className="JSXValue-boolean">{String(value)}</span>;
+  if (typeof value === "boolean") return <span className="TreeView-boolean">{String(value)}</span>;
   if (typeof value === "symbol") {
-    return <span className="JSXValue-symbol">{value.toString()}</span>;
+    return <span className="TreeView-symbol">{value.toString()}</span>;
   }
   if (typeof value === "function") {
     return (
-      <span className="JSXValue-function">
+      <span className="TreeView-function">
         [Function: {(value as { name?: string }).name || "anonymous"}]
       </span>
     );
···
 
   if (typeof value === "object" && value !== null) {
     if (ancestors.includes(value)) {
-      return <span className="JSXValue-circular">[Circular]</span>;
+      return <span className="TreeView-circular">[Circular]</span>;
     }
   }
 
···
     typeof value === "object" && value !== null ? [...ancestors, value] : ancestors;
 
   if (value instanceof Date) {
-    return <span className="JSXValue-date">Date({value.toISOString()})</span>;
+    return <span className="TreeView-date">Date({value.toISOString()})</span>;
   }
 
   if (value instanceof Map) {
-    if (value.size === 0) return <span className="JSXValue-collection">Map(0) {"{}"}</span>;
+    if (value.size === 0) return <span className="TreeView-collection">Map(0) {"{}"}</span>;
     const pad = "  ".repeat(indent + 1);
     const closePad = "  ".repeat(indent);
     return (
       <>
-        <span className="JSXValue-collection">
+        <span className="TreeView-collection">
           Map({value.size}) {"{\n"}
         </span>
         {Array.from(value.entries()).map(([k, v], i) => (
···
   }
 
   if (value instanceof Set) {
-    if (value.size === 0) return <span className="JSXValue-collection">Set(0) {"{}"}</span>;
+    if (value.size === 0) return <span className="TreeView-collection">Set(0) {"{}"}</span>;
     const pad = "  ".repeat(indent + 1);
     const closePad = "  ".repeat(indent);
     return (
       <>
-        <span className="JSXValue-collection">
+        <span className="TreeView-collection">
           Set({value.size}) {"{\n"}
         </span>
         {Array.from(value).map((v, i) => (
···
 
   if (value instanceof FormData) {
     const entries = Array.from(value.entries());
-    if (entries.length === 0) return <span className="JSXValue-collection">FormData {"{}"}</span>;
+    if (entries.length === 0) return <span className="TreeView-collection">FormData {"{}"}</span>;
     const pad = "  ".repeat(indent + 1);
     const closePad = "  ".repeat(indent);
     return (
       <>
-        <span className="JSXValue-collection">FormData {"{\n"}</span>
+        <span className="TreeView-collection">FormData {"{\n"}</span>
         {entries.map(([k, v], i) => (
           <React.Fragment key={i}>
             {pad}
-            <span className="JSXValue-key">{k}</span>:{" "}
+            <span className="TreeView-key">{k}</span>:{" "}
             <JSXValue value={v} indent={indent + 1} ancestors={nextAncestors} />
             {i < entries.length - 1 ? "," : ""}
             {"\n"}
···
 
   if (value instanceof Blob) {
     return (
-      <span className="JSXValue-collection">
+      <span className="TreeView-collection">
         Blob({value.size} bytes, "{value.type || "application/octet-stream"}")
       </span>
     );
···
     const preview = Array.from(arr.slice(0, 5)).join(", ");
     const suffix = arr.length > 5 ? ", ..." : "";
     return (
-      <span className="JSXValue-collection">
+      <span className="TreeView-collection">
         {name}({arr.length}) [{preview}
         {suffix}]
       </span>
     );
   }
   if (value instanceof ArrayBuffer) {
-    return <span className="JSXValue-collection">ArrayBuffer({value.byteLength} bytes)</span>;
+    return <span className="TreeView-collection">ArrayBuffer({value.byteLength} bytes)</span>;
   }
 
   if (Array.isArray(value)) {
···
 
     const renderItem = (i: number): React.ReactElement => {
       if (!(i in value)) {
-        return <span className="JSXValue-empty">empty</span>;
+        return <span className="TreeView-empty">empty</span>;
       }
       return <JSXValue value={value[i]} indent={indent + 1} ancestors={nextAncestors} />;
     };
···
     const obj = value as Record<string | symbol, unknown>;
 
     if (typeof obj.next === "function" && typeof obj[Symbol.iterator] === "function") {
-      return <span className="JSXValue-iterator">Iterator {"{}"}</span>;
+      return <span className="TreeView-iterator">Iterator {"{}"}</span>;
     }
 
     if (typeof obj[Symbol.asyncIterator] === "function") {
-      return <span className="JSXValue-iterator">AsyncIterator {"{}"}</span>;
+      return <span className="TreeView-iterator">AsyncIterator {"{}"}</span>;
     }
 
     if (value instanceof ReadableStream) {
-      return <span className="JSXValue-stream">ReadableStream {"{}"}</span>;
+      return <span className="TreeView-stream">ReadableStream {"{}"}</span>;
     }
 
     if (typeof obj.then === "function") {
···
           {"{ "}
           {entries.map(([k, v], i) => (
             <React.Fragment key={k}>
-              <span className="JSXValue-key">{k}</span>:{" "}
+              <span className="TreeView-key">{k}</span>:{" "}
               <JSXValue value={v} indent={indent} ancestors={nextAncestors} />
               {i < entries.length - 1 ? ", " : ""}
             </React.Fragment>
···
         {entries.map(([k, v], i) => (
           <React.Fragment key={k}>
             {pad}
-            <span className="JSXValue-key">{k}</span>:{" "}
+            <span className="TreeView-key">{k}</span>:{" "}
             <JSXValue value={v} indent={indent + 1} ancestors={nextAncestors} />
             {i < entries.length - 1 ? "," : ""}
             {"\n"}
···
     );
   }
 
-  return <span className="JSXValue-unknown">{String(value)}</span>;
+  return <span className="TreeView-unknown">{String(value)}</span>;
 }
 
 type JSXElementProps = {
···
   const padInner = "  ".repeat(indent + 1);
 
   let tagName: string;
-  let tagClass = "JSXElement-tag";
+  let tagClass = "TreeView-tag";
   if (typeof type === "string") {
     tagName = type;
   } else if (typeof type === "function") {
     const funcType = type as { displayName?: string; name?: string };
     tagName = funcType.displayName || funcType.name || "Component";
-    tagClass = "JSXElement-clientTag";
+    tagClass = "TreeView-clientTag";
   } else if (typeof type === "symbol") {
     switch (type) {
       case Symbol.for("react.fragment"):
···
       default:
         tagName = "Unknown";
     }
-    tagClass = "JSXElement-reactTag";
+    tagClass = "TreeView-reactTag";
   } else if (type && typeof type === "object" && (type as { $$typeof?: symbol }).$$typeof) {
     const lazyType = type as ReactLazy;
     if (lazyType.$$typeof === Symbol.for("react.lazy")) {
···
       );
     }
     tagName = "Component";
-    tagClass = "JSXElement-clientTag";
+    tagClass = "TreeView-clientTag";
   } else {
     tagName = "Unknown";
   }
···
         {key != null && (
           <>
             {" "}
-            <span className="JSXElement-propName">key</span>=
-            <span className="JSXValue-string">"{key}"</span>
+            <span className="TreeView-propName">key</span>=
+            <span className="TreeView-string">"{key}"</span>
           </>
         )}
         {propEntries.map(([k, v]) => (
···
       {key != null && (
         <>
           {" "}
-          <span className="JSXElement-propName">key</span>=
-          <span className="JSXValue-string">"{key}"</span>
+          <span className="TreeView-propName">key</span>=
+          <span className="TreeView-string">"{key}"</span>
         </>
       )}
       {propEntries.map(([k, v]) => (
···
     return (
       <>
         {" "}
-        <span className="JSXElement-propName">{name}</span>=
-        <span className="JSXValue-string">"{escapeHtml(value)}"</span>
+        <span className="TreeView-propName">{name}</span>=
+        <span className="TreeView-string">"{escapeHtml(value)}"</span>
       </>
     );
   }
···
     return (
       <>
         {" "}
-        <span className="JSXElement-propName">{name}</span>={"{"}
+        <span className="TreeView-propName">{name}</span>={"{"}
         {"\n"}
         {pad}
         <JSXValue value={value} indent={indent} ancestors={ancestors} />
···
     return (
       <>
         {" "}
-        <span className="JSXElement-propName">{name}</span>={"{["}
+        <span className="TreeView-propName">{name}</span>={"{["}
         {"\n"}
         {value.map((v, i) => (
           <React.Fragment key={i}>
···
   return (
     <>
       {" "}
-      <span className="JSXElement-propName">{name}</span>={"{"}
+      <span className="TreeView-propName">{name}</span>={"{"}
       <JSXValue value={value} indent={indent} ancestors={ancestors} />
       {"}"}
     </>
···
   flightPromise,
   inEntry,
 }: FlightTreeViewProps): React.ReactElement {
-  const className = inEntry ? "FlightTreeView FlightTreeView--inEntry" : "FlightTreeView";
+  const className = inEntry ? "TreeView TreeView--inEntry" : "TreeView";
 
   if (!flightPromise) {
     return (
       <div className={className}>
-        <pre className="FlightTreeView-output">
+        <pre className="TreeView-output">
           <PendingFallback />
         </pre>
       </div>
···
 
   return (
     <div className={className}>
-      <pre className="FlightTreeView-output">
+      <pre className="TreeView-output">
         <ErrorBoundary>
           <Suspense fallback={<PendingFallback />}>
             <Await promise={flightPromise}>

src/client/ui/Workspace.css

···
   overflow: hidden;
 }
 
-.Workspace-pane {
+/* Grid positioning */
+
+.Workspace-server,
+.Workspace-client,
+.Workspace-flight,
+.Workspace-preview {
   display: flex;
-  flex-direction: column;
-  overflow: hidden;
+  min-width: 0;
+  min-height: 0;
 }
 
-.Workspace-pane--server {
+.Workspace-server > *,
+.Workspace-client > *,
+.Workspace-flight > *,
+.Workspace-preview > * {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+}
+
+.Workspace-server {
   grid-area: server;
   border-right: 1px solid var(--border);
   border-bottom: 1px solid var(--border);
 }
 
-.Workspace-pane--client {
+.Workspace-client {
   grid-area: client;
   border-right: 1px solid var(--border);
 }
 
-.Workspace-pane--flight {
+.Workspace-flight {
   grid-area: flight;
   border-bottom: 1px solid var(--border);
 }
 
-.Workspace-pane--preview {
+.Workspace-preview {
   grid-area: preview;
 }
 
-.Workspace-paneHeader {
-  padding: 6px 12px;
-  font-size: 10px;
-  text-transform: uppercase;
-  letter-spacing: 1px;
-  color: var(--text-dim);
-  flex-shrink: 0;
-  border-bottom: 1px solid var(--border);
-}
+/* Loading states */
 
-/* WorkspaceLoading states */
-
-.WorkspaceLoading-output {
+.Workspace-loadingOutput {
   flex: 1;
   min-height: 0;
   margin: 0;
···
   color: var(--text-dim);
 }
 
-.WorkspaceLoading-preview {
+.Workspace-loadingPreview {
   flex: 1;
   padding: 20px;
   background: #fff;
···
   line-height: 1.5;
 }
 
-.WorkspaceLoading-empty {
+.Workspace-loadingEmpty {
   color: var(--text-dim);
   font-style: italic;
 }
 
-.WorkspaceLoading-empty--waiting::after {
+.Workspace-loadingEmpty--waiting::after {
   content: "...";
-  animation: workspaceLoadingPulse 1.5s ease-in-out infinite;
+  animation: workspacePulse 1.5s ease-in-out infinite;
 }
 
-@keyframes workspaceLoadingPulse {
+/* Error states */
+
+.Workspace-errorOutput {
+  flex: 1;
+  min-height: 0;
+  margin: 0;
+  padding: 12px;
+  font-family: var(--font-mono);
+  font-size: 12px;
+  line-height: 1.6;
+  overflow: auto;
+  white-space: pre-wrap;
+  word-break: break-all;
+  background: var(--bg);
+  color: #e57373;
+}
+
+.Workspace-errorPreview {
+  flex: 1;
+  padding: 20px;
+  background: #fff;
+  color: #111;
+  overflow: auto;
+  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
+  font-size: 16px;
+  line-height: 1.5;
+}
+
+.Workspace-errorMessage {
+  color: #c0392b;
+  font-style: italic;
+}
+
+@keyframes workspacePulse {
   0%,
   100% {
     opacity: 0.3;

src/client/ui/Workspace.tsx

···
 import { CodeEditor } from "./CodeEditor.tsx";
 import { FlightLog } from "./FlightLog.tsx";
 import { LivePreview } from "./LivePreview.tsx";
+import { Pane } from "./Pane.tsx";
 import "./Workspace.css";
 
 type WorkspaceProps = {
···
 
   return (
     <main className="Workspace">
-      <CodeEditor
-        label="server"
-        defaultValue={serverCode}
-        onChange={handleServerChange}
-        paneClass="Workspace-pane--server"
-      />
-      <CodeEditor
-        label="client"
-        defaultValue={clientCode}
-        onChange={handleClientChange}
-        paneClass="Workspace-pane--client"
-      />
+      <div className="Workspace-server">
+        <CodeEditor label="server" defaultValue={serverCode} onChange={handleServerChange} />
+      </div>
+      <div className="Workspace-client">
+        <CodeEditor label="client" defaultValue={clientCode} onChange={handleClientChange} />
+      </div>
       {session ? (
         <WorkspaceContent session={session} onReset={reset} key={session.id} />
       ) : (
···
 function WorkspaceLoading(): React.ReactElement {
   return (
     <>
-      <div className="Workspace-pane Workspace-pane--flight">
-        <div className="Workspace-paneHeader">flight</div>
-        <div className="WorkspaceLoading-output">
-          <span className="WorkspaceLoading-empty WorkspaceLoading-empty--waiting">Compiling</span>
-        </div>
+      <div className="Workspace-flight">
+        <Pane label="flight">
+          <div className="Workspace-loadingOutput">
+            <span className="Workspace-loadingEmpty Workspace-loadingEmpty--waiting">
+              Compiling
+            </span>
+          </div>
+        </Pane>
       </div>
-      <div className="Workspace-pane Workspace-pane--preview">
-        <div className="Workspace-paneHeader">preview</div>
-        <div className="WorkspaceLoading-preview">
-          <span className="WorkspaceLoading-empty WorkspaceLoading-empty--waiting">Compiling</span>
-        </div>
+      <div className="Workspace-preview">
+        <Pane label="preview">
+          <div className="Workspace-loadingPreview">
+            <span className="Workspace-loadingEmpty Workspace-loadingEmpty--waiting">
+              Compiling
+            </span>
+          </div>
+        </Pane>
       </div>
     </>
   );
···
   if (session.state.status === "error") {
     return (
       <>
-        <div className="Workspace-pane Workspace-pane--flight">
-          <div className="Workspace-paneHeader">flight</div>
-          <pre className="FlightLog-output FlightLog-output--error">{session.state.message}</pre>
+        <div className="Workspace-flight">
+          <Pane label="flight">
+            <pre className="Workspace-errorOutput">{session.state.message}</pre>
+          </Pane>
         </div>
-        <div className="Workspace-pane Workspace-pane--preview">
-          <div className="Workspace-paneHeader">preview</div>
-          <div className="LivePreview-container">
-            <span className="LivePreview-empty LivePreview-empty--error">Compilation error</span>
-          </div>
+        <div className="Workspace-preview">
+          <Pane label="preview">
+            <div className="Workspace-errorPreview">
+              <span className="Workspace-errorMessage">Compilation error</span>
+            </div>
+          </Pane>
         </div>
       </>
     );
···
 
   return (
     <>
-      <div className="Workspace-pane Workspace-pane--flight">
-        <div className="Workspace-paneHeader">flight</div>
-        <FlightLog
+      <div className="Workspace-flight">
+        <Pane label="flight">
+          <FlightLog
+            entries={entries}
+            cursor={cursor}
+            availableActions={availableActions}
+            onAddRawAction={(name, payload) => session.addRawAction(name, payload)}
+            onDeleteEntry={(idx) => session.timeline.deleteEntry(idx)}
+          />
+        </Pane>
+      </div>
+      <div className="Workspace-preview">
+        <LivePreview
           entries={entries}
           cursor={cursor}
-          availableActions={availableActions}
-          onAddRawAction={(name, payload) => session.addRawAction(name, payload)}
-          onDeleteEntry={(idx) => session.timeline.deleteEntry(idx)}
+          totalChunks={totalChunks}
+          isAtStart={isAtStart}
+          isAtEnd={isAtEnd}
+          onStep={() => session.timeline.stepForward()}
+          onSkip={() => session.timeline.skipToEntryEnd()}
+          onReset={onReset}
         />
       </div>
-      <LivePreview
-        entries={entries}
-        cursor={cursor}
-        totalChunks={totalChunks}
-        isAtStart={isAtStart}
-        isAtEnd={isAtEnd}
-        onStep={() => session.timeline.stepForward()}
-        onSkip={() => session.timeline.skipToEntryEnd()}
-        onReset={onReset}
-      />
     </>
   );
 }