naps62/maestro
Archived
1
0
Fork 0
Code Issues 9 Pull Requests Actions Packages Projects Releases Wiki Activity

feat(maestro): port preview mode to React (#251)

Browse Source 
Extends layoutStore with previewSession/commitPreview, mirroring
multiview.ts's preview controller: a throwaway tab for a session no pane
holds, byte-for-byte restore on end, and every real layout-changing action
drops an active preview first. Never schedules a save while a preview is up.

Adds usePreview, wrapping the store actions with previewSchedule.ts's
120ms leading-edge throttle, plus a touch guard and an immediate `end()`
for real changes. MultiView/TabBar render the preview hue on the pane
titlebar, canvas ring/chip, and the throwaway tab (dashed, unclickable).
This commit is contained in:
Miguel Palhas
2026-09-09 01:39:05 +01:00
parent e9e98e0c49
commit ea8c42bfb2
7 changed files with 613 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/components/layout/MultiView.test.tsx
+57 -1
View File
@@ -1,5 +1,5 @@
// @vitest-environment happy-dom
import { cleanup, fireEvent, render, screen } from "@testing-library/react";
import { act, cleanup, fireEvent, render, screen } from "@testing-library/react";
import { afterEach, describe, expect, it, vi } from "vitest";
import { leaves } from "../../layout.js";
@@ -93,4 +93,60 @@ describe("MultiView", () => {
render(<MultiView store={s} />);
expect(screen.getByTestId("terminal-s1")).toBeTruthy();
});
describe("preview mode (docs/PREVIEW.md)", () => {
it("shows a session no pane holds in a throwaway tab, marked as a preview", () => {
const s = store();
s.getState().openSession("s1");
render(<MultiView store={s} sessions={new Map([["s1", session("s1")]])} />);
act(() => s.getState().previewSession("s9"));
// s1's own tab is still in the strip — the preview never touched it.
expect(screen.getByText("Tab 1 · 1")).toBeTruthy();
const pane = document.querySelector('[data-session-id="s9"]');
expect(pane).toBeTruthy();
expect(pane!.querySelector(".bg-preview-tint")).toBeTruthy();
expect(screen.getByText("preview")).toBeTruthy();
});
it("puts the layout back byte for byte once the preview ends", () => {
const s = store();
s.getState().openSession("s1");
render(<MultiView store={s} sessions={new Map([["s1", session("s1")]])} />);
const before = JSON.stringify(s.getState().layout);
act(() => s.getState().previewSession("s9"));
act(() => s.getState().previewSession(null));
expect(JSON.stringify(s.getState().layout)).toBe(before);
expect(screen.queryByText("preview")).toBeNull();
});
it("does not grab the keyboard while previewing", () => {
const s = store();
s.getState().openSession("s1");
render(<MultiView store={s} sessions={new Map([["s1", session("s1")]])} />);
act(() => s.getState().previewSession("s9"));
const pane = document.querySelector('[data-session-id="s9"]') as HTMLElement;
expect(pane.querySelector('[data-testid="terminal-s9"]')).toBeTruthy();
// TerminalPane's `focus` prop is verified by TerminalPane's own tests;
// here the preview must never end up as the active-tab's accent pane.
expect(pane.className).not.toContain("border-accent");
});
it("clicking into a previewed pane commits it: no more preview, nothing moves a second time", () => {
const s = store();
s.getState().openSession("s1");
render(<MultiView store={s} sessions={new Map([["s1", session("s1")]])} />);
act(() => s.getState().previewSession("s9"));
const pane = document.querySelector('[data-session-id="s9"]') as HTMLElement;
fireEvent.pointerDown(pane);
expect(s.getState().preview).toBeNull();
expect(screen.queryByText("preview")).toBeNull();
expect(leaves(s.getState().layout.tabs[1].root).map((l) => l.sessionId)).toEqual(["s9"]);
});
});
});
web/src/components/layout/MultiView.tsx
+42 -8
View File
@@ -1,5 +1,5 @@
// React port of multiview.ts's tab + split tree (issue #249). Preview mode
// (docs/PREVIEW.md) is issue #251; sidebar drag-to-dock and the mobile
// React port of multiview.ts's tab + split tree (issue #249) plus its preview
// mode (issue #251, docs/PREVIEW.md). Sidebar drag-to-dock and the mobile
// single-pane collapse stay with whichever issue wires this into the shell
// (#253) — this renders the tree itself: tabs, nested splits, pane chrome.
@@ -8,6 +8,7 @@ import { useEffect, useRef } from "react";
import { useStore } from "zustand";
import { activeTab, type Dir, type Node } from "../../layout.js";
import { usePreview } from "../../hooks/usePreview.js";
import type { LayoutStore, LayoutStoreApi } from "../../stores/layoutStore.js";
import type { Session, Uuid } from "../../types.js";
import { PaneContainer } from "./PaneContainer.js";
@@ -26,6 +27,8 @@ export interface MultiViewProps {
export function MultiView({ store, sessions, onDisconnect, emptyState }: MultiViewProps) {
const layout = useStore(store, (s: LayoutStore) => s.layout);
const tab = activeTab(layout);
const { previewedSessionId, commit: commitPreview } = usePreview({ store });
const isPreviewing = previewedSessionId !== null;
const reconciledRef = useRef(false);
useEffect(() => {
@@ -37,9 +40,17 @@ export function MultiView({ store, sessions, onDisconnect, emptyState }: MultiVi
return (
<div className="mv flex h-full min-h-0 flex-col">
<TabBar store={store} />
<div className="mv-canvas min-h-0 flex-1">
<div className="mv-canvas relative min-h-0 flex-1">
{tab.root ? (
<SplitNode node={tab.root} tab={tab} store={store} sessions={sessions} onDisconnect={onDisconnect} />
<SplitNode
node={tab.root}
tab={tab}
store={store}
sessions={sessions}
onDisconnect={onDisconnect}
previewedSessionId={previewedSessionId}
commitPreview={commitPreview}
/>
) : (
(emptyState ?? (
<div className="mv-empty flex h-full items-center justify-center p-sp-4 text-fs-13 text-faint">
@@ -47,6 +58,14 @@ export function MultiView({ store, sessions, onDisconnect, emptyState }: MultiVi
</div>
))
)}
{isPreviewing && (
<>
<div className="mv-preview-ring pointer-events-none absolute inset-0 rounded-r-2 border border-dashed border-preview-ring" />
<div className="mv-preview-chip pointer-events-none absolute right-sp-2 top-sp-2 z-sticky rounded-r-pill bg-preview px-sp-2 py-[2px] text-fs-11 text-preview-ink">
preview
</div>
</>
)}
</div>
</div>
);
@@ -57,6 +76,8 @@ interface TreeProps {
store: LayoutStoreApi;
sessions?: ReadonlyMap<Uuid, Session>;
onDisconnect?: (sessionId: Uuid) => void;
previewedSessionId: Uuid | null;
commitPreview: (sessionId: Uuid) => void;
}
function SplitNode({ node, ...rest }: TreeProps & { node: Node }) {
@@ -127,21 +148,34 @@ function Pane({
store,
sessions,
onDisconnect,
previewedSessionId,
commitPreview,
}: TreeProps & { leaf: Extract<Node, { kind: "leaf" }>; isFocused: boolean }) {
const session = leaf.sessionId ? sessions?.get(leaf.sessionId) : undefined;
const isPreview = leaf.sessionId !== null && leaf.sessionId === previewedSessionId;
const splitFocused = (dir: Dir) => store.getState().splitFocused(leaf.id, dir);
return (
<div
className={
"mv-pane flex h-full min-h-0 min-w-0 flex-col border " +
(isFocused ? "border-accent" : "border-border-strong")
(isFocused && !isPreview ? "border-accent" : "border-border-strong")
}
data-leaf-id={leaf.id}
data-session-id={leaf.sessionId ?? undefined}
onPointerDownCapture={() => store.getState().focusLeaf(leaf.id)}
onPointerDownCapture={() => {
// Clicking into a previewed pane is the operator choosing it
// (docs/PREVIEW.md).
if (isPreview) commitPreview(leaf.sessionId!);
store.getState().focusLeaf(leaf.id);
}}
>
<div className="mv-pane-header flex items-center justify-between gap-sp-2 border-b border-border-strong bg-surface px-sp-2 py-sp-1 text-fs-12">
<div
className={
"mv-pane-header flex items-center justify-between gap-sp-2 border-b border-border-strong px-sp-2 py-sp-1 text-fs-12 " +
(isPreview ? "bg-preview-tint text-preview" : "bg-surface")
}
>
{leaf.sessionId ? (
<PaneTitle sessionId={leaf.sessionId} session={session} />
) : (
@@ -189,7 +223,7 @@ function Pane({
<PaneContainer
sessionId={leaf.sessionId}
session={session}
focus={isFocused}
focus={isFocused && previewedSessionId === null}
onClosed={() => store.getState().closeSession(leaf.sessionId!)}
/>
) : (
web/src/components/layout/TabBar.tsx
+14 -3
View File
@@ -13,6 +13,7 @@ export interface TabBarProps {
export function TabBar({ store }: TabBarProps) {
const layout = useStore(store, (s: LayoutStore) => s.layout);
const previewTempTabId = useStore(store, (s: LayoutStore) => s.preview?.tempTabId ?? null);
const [draggingId, setDraggingId] = useState<string | null>(null);
const [overId, setOverId] = useState<string | null>(null);
@@ -22,6 +23,9 @@ export function TabBar({ store }: TabBarProps) {
const count = leaves(tab.root).filter((l) => l.sessionId).length;
const isActive = tab.id === layout.activeTabId;
const isDropTarget = overId === tab.id && draggingId !== null && draggingId !== tab.id;
// A preview's throwaway tab is not a place to go — it goes on its
// own the moment the preview ends (docs/PREVIEW.md).
const isPreviewTab = tab.id === previewTempTabId;
return (
<button
key={tab.id}
@@ -32,7 +36,11 @@ export function TabBar({ store }: TabBarProps) {
data-tab-id={tab.id}
className={
"mv-tab flex items-center gap-sp-1 rounded-t-r-1 px-sp-2 py-sp-1 " +
(isActive ? "bg-surface-2 text-ink" : "text-faint hover:text-ink") +
(isPreviewTab
? "border border-dashed border-preview-ring italic text-preview"
: isActive
? "bg-surface-2 text-ink"
: "text-faint hover:text-ink") +
(isDropTarget ? " outline outline-2 outline-accent" : "")
}
onDragStart={(e) => {
@@ -57,13 +65,16 @@ export function TabBar({ store }: TabBarProps) {
setDraggingId(null);
setOverId(null);
}}
onClick={() => store.getState().selectTab(tab.id)}
onClick={() => {
if (isPreviewTab) return;
store.getState().selectTab(tab.id);
}}
>
<span>
{tab.title}
{count ? ` · ${count}` : ""}
</span>
{layout.tabs.length > 1 && (
{layout.tabs.length > 1 && !isPreviewTab && (
<span
className="mv-tab-close text-faint hover:text-ink"
title="Close tab"