remo-cli 4.0.1__tar.gz → 4.1.0__tar.gz

remo_cli-4.1.0/.release-please-manifest.json

@@ -0,0 +1,3 @@
+{
+  ".": "4.1.0"
+}

{remo_cli-4.0.1 → remo_cli-4.1.0}/AGENTS.md

@@ -117,6 +117,7 @@ frontend/                  # remo-web browser SPA (Vite + React + TypeScript)
 ├── src/
 │   ├── api/client.ts        # REST + WS terminal client (remo-terminal.v1 subprotocol)
 │   ├── components/          # Dashboard, InstanceGroup, TargetCard, GridView, TabView, TerminalCard
+│   │                        #   + masterLayout.ts (pure pane geometry: uniform grid + master/stack tiling)
 │   ├── state/                # discovery.ts, workspace.ts (layout persisted to localStorage)
 │   └── terminal/              # RendererAdapter (seam), XtermRenderer (the one engine), TerminalConnection, keymap
 
@@ -135,7 +136,8 @@ ansible/                   # Ansible playbooks (invoked by Python via subprocess
 └── requirements.yml
 
 scripts/                   # Repo-root utility scripts (not part of the installed package)
-└── export_openapi.py        # Exports frontend/src/api/generated/{openapi.json,terminal-frames.json} (feature 020)
+├── export_openapi.py        # Exports frontend/src/api/generated/{openapi.json,terminal-frames.json} (feature 020)
+└── palette-check.sh         # Prints every ANSI colour x normal/bold/dim/bright in a live terminal — audits a theme's legibility where contrast maths can't
 
 pyproject.toml             # Build config, dependencies (incl. `web` extra), console_scripts entry point
 ```

{remo_cli-4.0.1 → remo_cli-4.1.0}/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [4.1.0](https://github.com/get2knowio/remo/compare/v4.0.1...v4.1.0) (2026-08-04)
+
+
+### Features
+
+* **web:** tile a terminal to a pane edge as a master area ([#137](https://github.com/get2knowio/remo/issues/137)) ([41802fb](https://github.com/get2knowio/remo/commit/41802fb17ae5741918a31ee9d662aa90808ebb9a))
+
 ## [4.0.1](https://github.com/get2knowio/remo/compare/v4.0.0...v4.0.1) (2026-08-03)
 
 

{remo_cli-4.0.1 → remo_cli-4.1.0}/CLAUDE.md

@@ -117,6 +117,7 @@ frontend/                  # remo-web browser SPA (Vite + React + TypeScript)
 ├── src/
 │   ├── api/client.ts        # REST + WS terminal client (remo-terminal.v1 subprotocol)
 │   ├── components/          # Dashboard, InstanceGroup, TargetCard, GridView, TabView, TerminalCard
+│   │                        #   + masterLayout.ts (pure pane geometry: uniform grid + master/stack tiling)
 │   ├── state/                # discovery.ts, workspace.ts (layout persisted to localStorage), settings.ts (display prefs: site light/dark mode, accent, fonts, terminal theme + per-target overrides)
 │   ├── terminal/              # RendererAdapter (seam), XtermRenderer (the one engine), TerminalConnection, keymap
 │   └── theme/                 # tokens.css (light-dark() palette, one pair per token), fonts.ts, terminalThemes.ts (8 terminal color schemes: a token-derived Remo Dark/Light pair the default 'auto' selection tracks, plus 6 curated third-party)
@@ -136,7 +137,8 @@ ansible/                   # Ansible playbooks (invoked by Python via subprocess
 └── requirements.yml
 
 scripts/                   # Repo-root utility scripts (not part of the installed package)
-└── export_openapi.py        # Exports frontend/src/api/generated/{openapi.json,terminal-frames.json} (feature 020)
+├── export_openapi.py        # Exports frontend/src/api/generated/{openapi.json,terminal-frames.json} (feature 020)
+└── palette-check.sh         # Prints every ANSI colour x normal/bold/dim/bright in a live terminal — audits a theme's legibility where contrast maths can't
 
 pyproject.toml             # Build config, dependencies (incl. `web` extra), console_scripts entry point
 ```

{remo_cli-4.0.1 → remo_cli-4.1.0}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: remo-cli
-Version: 4.0.1
+Version: 4.1.0
 Summary: Remote development environment CLI
 License-Expression: MIT
 License-File: LICENSE

{remo_cli-4.0.1 → remo_cli-4.1.0}/docs/web-session-interface.md

@@ -108,7 +108,16 @@ The SPA is a two-pane **web console**:
   row (or its `+` button) **adds** it to a responsive grid (1/2/3 columns by count). In a grid, **drag
   a tile's header onto another to swap their positions** — a window outline follows the cursor and the
   swap target shows a dashed outline (mouse or touch press-and-hold; keyboard-accessible via the
-  handle); the arrangement persists until the grid is rebuilt. In a grid, **resting the pointer on a
+  handle); the arrangement persists until the grid is rebuilt. **Drag a tile to a pane edge instead of
+  onto another tile** and it takes that whole side as a *master area* — full height on the left/right,
+  full width on the top/bottom — with the remaining tiles tiling the leftover strip (the dwm/xmonad
+  master+stack model). A translucent band marks each edge while dragging and fills in when the drop
+  would land there. The **▦** control in a tile's header cycles the same thing without a drag
+  (▌ left → ▀ top → ▐ right → ▄ bottom → back to the even grid), which is the practical path on a touch
+  device. The master takes 60% by default, closing it promotes the head of the stack rather than
+  un-tiling everything, and the arrangement persists across reload alongside the tile order. This is
+  what lets three terminals fill the pane without the empty fourth cell a 2x2 grid would leave. In a
+  grid, **resting the pointer on a
   tile focuses it** (focus-follows-mouse, with a short dwell so passing through tiles doesn't steal
   focus) — keystrokes go where the pointer is, no click needed. The **◻** control solos a tile; **Esc**
   collapses the grid back to the focused terminal;

{remo_cli-4.0.1 → remo_cli-4.1.0}/frontend/src/components/TerminalCard.tsx

@@ -30,6 +30,7 @@ import {
   type TerminalFontOptions,
 } from "../state/settings";
 import { TERMINAL_THEMES, type TerminalThemeColors } from "../theme/terminalThemes";
+import type { MasterSide } from "../state/workspace";
 import { removeLatency, reportLatency } from "../state/latency";
 import type { RendererAdapter } from "../terminal/RendererAdapter";
 import { createDefaultRenderer } from "../terminal/defaultRenderer";
@@ -41,6 +42,16 @@ const DEFAULT_ROWS = 24;
 /** How much to shrink the terminal font in a grid tile when "scale to fit". */
 const GRID_FIT_SCALE = 0.8;
 
+/** Glyph + label per tiling state. The glyph is a half block drawing where the
+ * master area sits, so the button reads as a picture of the layout. */
+const MASTER_GLYPH: Record<MasterSide | "grid", { glyph: string; title: string }> = {
+  grid: { glyph: "▦", title: "Tile this terminal to the left" },
+  left: { glyph: "▌", title: "Mastering the left — tile to the top" },
+  top: { glyph: "▀", title: "Mastering the top — tile to the right" },
+  right: { glyph: "▐", title: "Mastering the right — tile to the bottom" },
+  bottom: { glyph: "▄", title: "Mastering the bottom — back to the even grid" },
+};
+
 const STATE_LABELS: Record<TerminalConnectionState, string> = {
   connecting: "Connecting…",
   ready: "Connected",
@@ -70,6 +81,16 @@ interface TerminalCardProps {
   /** When true, the header acts as a dnd-kit drag handle and the tile is a drop
    * target (grid reorder). The DndContext + swap live in WorkspacePane. */
   reorderEnabled?: boolean;
+  /** This tile's slot in a master/stack tiling, as a CSS `grid-area`. Undefined
+   * in the uniform grid, where tiles auto-place exactly as they always have.
+   * Applied to the card's OWN root element — never a wrapper, see WorkspacePane. */
+  gridArea?: string;
+  /** Which side this tile masters, or null when it is a plain stack tile.
+   * Undefined hides the tiling control entirely (single view, fullscreen). */
+  masterSide?: MasterSide | null;
+  /** Advance this tile through the tiling cycle (left -> top -> right -> bottom
+   * -> uniform grid). */
+  onCycleTile?: () => void;
   /** Window-control "Normal": solo this terminal into the single view. */
   onNormal: () => void;
   /** Window-control "Grid": show the grid — omitted when none is available. */
@@ -173,6 +194,9 @@ export function TerminalCard({
   viewState,
   onClose,
   reorderEnabled,
+  gridArea,
+  masterSide,
+  onCycleTile,
   onNormal,
   onGrid,
   onToggleFullscreen,
@@ -544,6 +568,7 @@ export function TerminalCard({
       style={
         {
           display: isVisible ? undefined : "none",
+          gridArea,
           "--bg-term": theme.colors.background,
         } as CSSProperties
       }
@@ -672,6 +697,26 @@ export function TerminalCard({
               </div>
             )}
           </div>
+          {/* Tiling control. Cycles rather than opening a menu: it is one tap on
+           * a touch device, where dragging to a 64px edge band with a thumb is
+           * the awkward path. The half-block glyphs draw where the master area
+           * lands, so the current state is legible without the tooltip. */}
+          {onCycleTile && (
+            <button
+              type="button"
+              className={`tc-btn tc-btn--icon${masterSide ? " tc-btn--active" : ""}`}
+              data-testid={`terminal-tile-${target.id}`}
+              title={MASTER_GLYPH[masterSide ?? "grid"].title}
+              aria-label={MASTER_GLYPH[masterSide ?? "grid"].title}
+              aria-pressed={Boolean(masterSide)}
+              onClick={(e) => {
+                e.stopPropagation();
+                onCycleTile();
+              }}
+            >
+              {MASTER_GLYPH[masterSide ?? "grid"].glyph}
+            </button>
+          )}
           {/* Window-control cluster: mutually-exclusive display modes ordered
            * by how much space they take — Grid (smaller/tiled) → Normal (fills
            * the app's main pane) → Fullscreen (whole window) — plus close. The

remo_cli-4.1.0/frontend/src/components/WorkspacePane.css

@@ -0,0 +1,139 @@
+.workspace {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  background: var(--bg-pane);
+}
+
+.workspace-body {
+  flex: 1;
+  min-height: 0;
+  padding: 12px;
+  gap: 10px;
+}
+
+.workspace-body--single {
+  display: flex;
+  flex-direction: column;
+}
+
+.workspace-body--grid {
+  display: grid;
+}
+
+/* Containing block for the snap zones below, and a stop for touch scroll
+ * chaining while dragging a tile around. */
+.workspace-body {
+  position: relative;
+  overscroll-behavior: contain;
+}
+
+/* --- edge drop targets (master/stack tiling) ---
+ *
+ * `pointer-events: none` is load-bearing, not a tidy-up: dnd-kit resolves drops
+ * from measured rects rather than hit-testing, so these can blanket the pane
+ * edges without intercepting anything — including the rail's resize handle,
+ * which overhangs 3px into this pane's left edge.
+ *
+ * z-index 20 sits in the free band between the rail divider (8) and the terminal
+ * theme popup (60). */
+.workspace-snap {
+  position: absolute;
+  z-index: 20;
+  pointer-events: none;
+  opacity: 0;
+  border-radius: var(--radius-lg);
+  border: 2px dashed transparent;
+  background: color-mix(in oklch, var(--accent) 14%, transparent);
+}
+@media (prefers-reduced-motion: no-preference) {
+  .workspace-snap {
+    transition: opacity 120ms ease;
+  }
+}
+/* Visible but quiet while a drag is in flight, solid once it would land here. */
+.workspace-snap--armed {
+  opacity: 0.4;
+}
+.workspace-snap--over {
+  opacity: 1;
+  border-color: var(--accent-strong);
+  background: color-mix(in oklch, var(--accent) 28%, transparent);
+}
+
+.workspace-snap--left,
+.workspace-snap--right {
+  top: 0;
+  bottom: 0;
+  width: min(64px, 18%);
+}
+.workspace-snap--left {
+  left: 0;
+}
+.workspace-snap--right {
+  right: 0;
+}
+
+/* Inset horizontally by the same band, so the CORNERS belong unambiguously to
+ * left/right — the vertical split is what this feature is for, and an overlap
+ * would resolve a corner by centre distance, i.e. arbitrarily. */
+.workspace-snap--top,
+.workspace-snap--bottom {
+  left: min(64px, 18%);
+  right: min(64px, 18%);
+  height: min(64px, 18%);
+}
+.workspace-snap--top {
+  top: 0;
+}
+.workspace-snap--bottom {
+  bottom: 0;
+}
+
+/* Empty state */
+.workspace-empty {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: 24px;
+  color: var(--text-dim);
+}
+
+.workspace-empty-art {
+  font-family: var(--font-mono);
+  font-size: 13px;
+  line-height: 1.25;
+  color: color-mix(in oklch, var(--accent) 55%, var(--text-faint));
+  margin: 0 0 18px;
+}
+
+.workspace-empty-title {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--text-1);
+  margin-bottom: 7px;
+}
+
+.workspace-empty-text {
+  font-size: 12.5px;
+  max-width: 340px;
+  line-height: 1.6;
+  margin: 0 0 4px;
+}
+
+.workspace-empty-text kbd,
+.workspace-empty-text span {
+  color: var(--text-1);
+  font-family: var(--font-mono);
+}
+
+.workspace-empty-hint {
+  font-size: 11.5px;
+  color: var(--text-faint);
+  font-family: var(--font-mono);
+}

remo_cli-4.1.0/frontend/src/components/WorkspacePane.test.tsx

@@ -0,0 +1,175 @@
+// WorkspacePane's wiring: does the computed layout actually reach the DOM, and
+// — the one that matters — can a layout change ever remount a TerminalCard?
+//
+// A remount re-runs the card's [target.id] effect, whose cleanup calls
+// connection.close() and adapter.dispose(): the SSH connection drops and the
+// scrollback goes with it. Master/stack changes which slot a tile occupies on
+// every mastership change, so this is the feature's central structural risk.
+// The guarantee is "one flat keyed child list; slots are grid-area styles on
+// each card's own root, never wrapper elements", and the test below is what
+// proves it rather than merely documenting it.
+
+import { act, render, screen } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import type { SessionTarget } from "../api/client";
+
+const adapters: { dispose: ReturnType<typeof vi.fn> }[] = [];
+
+vi.mock("../terminal/defaultRenderer", () => ({
+  createDefaultRenderer: vi.fn(() => {
+    const adapter = {
+      open: vi.fn(),
+      write: vi.fn(),
+      onData: vi.fn().mockReturnValue(() => {}),
+      fit: vi.fn().mockReturnValue({ cols: 80, rows: 24 }),
+      resize: vi.fn(),
+      applyFont: vi.fn(),
+      applyTheme: vi.fn(),
+      focus: vi.fn(),
+      onTitleChange: vi.fn().mockReturnValue(() => {}),
+      onSelectionChange: vi.fn().mockReturnValue(() => {}),
+      getSelection: vi.fn().mockReturnValue(null),
+      copySelection: vi.fn().mockResolvedValue(false),
+      dispose: vi.fn(),
+    };
+    adapters.push(adapter);
+    return adapter;
+  }),
+}));
+
+vi.mock("../terminal/TerminalConnection", () => ({
+  TerminalConnection: class {
+    needsManualReconnect = false;
+    connect = vi.fn().mockResolvedValue(undefined);
+    close = vi.fn().mockResolvedValue(undefined);
+    sendInput = vi.fn();
+    sendResize = vi.fn();
+  },
+}));
+
+// jsdom has neither; useDroppable and TerminalCard both observe their nodes.
+class NoopResizeObserver {
+  observe(): void {}
+  unobserve(): void {}
+  disconnect(): void {}
+}
+globalThis.ResizeObserver = NoopResizeObserver as unknown as typeof ResizeObserver;
+
+const target = (id: string): SessionTarget =>
+  ({ id, project: id, instance_type: "incus", instance_name: "box" }) as unknown as SessionTarget;
+
+async function mount(ids: string[]) {
+  vi.resetModules();
+  window.localStorage.clear();
+  adapters.length = 0;
+  const workspaceMod = await import("../state/workspace");
+  const { WorkspacePane } = await import("./WorkspacePane");
+  const targetsById = new Map(ids.map((id) => [id, target(id)]));
+
+  const view = render(
+    <WorkspacePane
+      targetsById={targetsById}
+      regionByKey={new Map()}
+      onTerminalEnded={() => {}}
+      onTerminalStarted={() => {}}
+      narrow={false}
+    />,
+  );
+  // Drive the store directly: the rail isn't mounted here.
+  const store = renderStore(workspaceMod);
+  act(() => store.openMany(ids.map(target)));
+  return { view, store };
+}
+
+/** The store's actions, outside React. `useWorkspace` returns them, but this
+ * file never renders a consumer of its own. */
+function renderStore(mod: typeof import("../state/workspace")) {
+  let api!: ReturnType<typeof mod.useWorkspace>;
+  function Probe(): null {
+    api = mod.useWorkspace();
+    return null;
+  }
+  render(<Probe />);
+  return new Proxy({} as ReturnType<typeof mod.useWorkspace>, {
+    get: (_t, key) => api[key as keyof typeof api],
+  });
+}
+
+const body = (): HTMLElement => screen.getByTestId("workspace").querySelector(".workspace-body")!;
+
+beforeEach(() => {
+  window.localStorage.clear();
+});
+
+describe("WorkspacePane layout wiring", () => {
+  it("renders the uniform grid exactly as before when nothing is tiled", async () => {
+    await mount(["a", "b", "c"]);
+    expect(body().style.gridTemplateColumns).toBe("repeat(2, minmax(0, 1fr))");
+    expect(body().style.gridTemplateRows).toBe("repeat(2, minmax(0, 1fr))");
+    // No explicit placement: tiles auto-place, as they always have.
+    expect(screen.getByTestId("terminal-card-a").style.gridArea).toBe("");
+  });
+
+  it("pushes the master template and every tile's slot into the DOM", async () => {
+    const { store } = await mount(["a", "b", "c"]);
+    act(() => store.setMaster("c", "right"));
+
+    expect(body().style.gridTemplateColumns).toBe("repeat(1, minmax(0, 40fr)) minmax(0, 60fr)");
+    expect(screen.getByTestId("terminal-card-c").style.gridArea).toBe("1 / 2 / 3 / 3");
+    expect(screen.getByTestId("terminal-card-a").style.gridArea).toBe("1 / 1 / 2 / 2");
+    expect(screen.getByTestId("terminal-card-b").style.gridArea).toBe("2 / 1 / 3 / 2");
+  });
+
+  it("offers the four edge zones only while a reorder is possible", async () => {
+    const { store } = await mount(["a", "b", "c"]);
+    expect(screen.getAllByTestId(/^snap-zone-/)).toHaveLength(4);
+
+    // Single view: nothing to reorder, nothing to snap onto.
+    act(() => store.selectOnly(target("a")));
+    expect(screen.queryAllByTestId(/^snap-zone-/)).toHaveLength(0);
+  });
+
+  it("hides the edge zones while a terminal is fullscreen", async () => {
+    const { store } = await mount(["a", "b"]);
+    act(() => store.maximize("a"));
+    expect(screen.queryAllByTestId(/^snap-zone-/)).toHaveLength(0);
+  });
+
+  // THE structural guarantee. Mutation: wrap the master (or the stack) in a
+  // slot <div> in WorkspacePane and this must fail — a card changing parent
+  // remounts, dropping its SSH connection and scrollback.
+  it("never remounts a terminal across layout changes", async () => {
+    const { store } = await mount(["a", "b", "c"]);
+    const surfaceBefore = screen.getByTestId("terminal-surface-a");
+    const buildsBefore = adapters.length;
+
+    act(() => store.setMaster("a", "left"));
+    act(() => store.setMaster("a", "top"));
+    act(() => store.setMaster("b", "right"));
+    act(() => store.clearMaster());
+
+    expect(Object.is(screen.getByTestId("terminal-surface-a"), surfaceBefore)).toBe(true);
+    expect(adapters).toHaveLength(buildsBefore);
+    for (const adapter of adapters) {
+      expect(adapter.dispose).not.toHaveBeenCalled();
+    }
+  });
+
+  it("cycles a tile through the sides from its header control", async () => {
+    const { store } = await mount(["a", "b"]);
+    const button = (): HTMLElement => screen.getByTestId("terminal-tile-a");
+
+    act(() => button().click());
+    expect(store.layout).toMatchObject({ kind: "master", id: "a", side: "left" });
+    expect(button().getAttribute("aria-pressed")).toBe("true");
+
+    act(() => button().click());
+    expect(store.layout).toMatchObject({ side: "top" });
+
+    act(() => button().click());
+    act(() => button().click());
+    act(() => button().click());
+    expect(store.layout).toEqual({ kind: "grid" });
+    expect(button().getAttribute("aria-pressed")).toBe("false");
+  });
+});