remo-cli 4.0.0__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.0 → 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.0 → remo_cli-4.1.0}/CHANGELOG.md

@@ -1,5 +1,20 @@
 # 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)
+
+
+### Bug Fixes
+
+* **web:** let the terminal-theme menu scroll instead of being clipped ([#134](https://github.com/get2knowio/remo/issues/134)) ([ffb34e7](https://github.com/get2knowio/remo/commit/ffb34e72cc9d1744130130934538d38af217ec73))
+* **web:** make Remo Light's white family visible — `white` and `brightWhite` were 1.27:1 and 1.09:1 against the background, hiding dim and bold text ([#134](https://github.com/get2knowio/remo/issues/134)) ([c5bc07a](https://github.com/get2knowio/remo/commit/c5bc07a7))
+
 ## [4.0.0](https://github.com/get2knowio/remo/compare/v3.1.0...v4.0.0) (2026-08-03)
 
 

{remo_cli-4.0.0 → 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.0 → remo_cli-4.1.0}/PKG-INFO

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

{remo_cli-4.0.0 → 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.0 → remo_cli-4.1.0}/frontend/src/components/TerminalCard.css

@@ -228,16 +228,23 @@
   border-color: var(--accent-strong);
 }
 
+/* Positioned against the viewport from JS (themeMenuPosition) — `position`,
+ * `top`/`bottom`, `left` and `max-height` all arrive as inline styles. It has
+ * to escape `.terminal-card`'s `overflow: hidden`, which used to clip the list
+ * inside a short grid tile with no way to scroll to the rest. */
 .tc-theme-menu {
-  position: absolute;
-  top: calc(100% + 6px);
-  right: 0;
-  z-index: 20;
+  position: fixed;
+  z-index: 60;
   min-width: 216px;
+  max-width: calc(100vw - 16px);
   padding: 5px;
   display: flex;
   flex-direction: column;
   gap: 2px;
+  overflow-y: auto;
+  /* Stop at the menu's own edges instead of scrolling the page behind it —
+   * the whole reported symptom was a swipe here moving the whole console. */
+  overscroll-behavior: contain;
   background: var(--bg-elev);
   border: 1px solid var(--border-strong);
   border-radius: 10px;

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

@@ -7,6 +7,7 @@ import { act, render, screen } from "@testing-library/react";
 import { DndContext } from "@dnd-kit/core";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import type { SessionTarget } from "../api/client";
+import { themeMenuPosition } from "./TerminalCard";
 import type { RendererAdapter } from "../terminal/RendererAdapter";
 
 const adapters: RendererAdapter[] = [];
@@ -196,3 +197,59 @@ describe("TerminalCard terminal theme", () => {
     expect(screen.queryByRole("menu")).not.toBeInTheDocument();
   });
 });
+
+// The reported bug: in a 2x2 grid on a small display the theme list was cut off
+// at the card's edge (`.terminal-card` sets `overflow: hidden`) and swiping it
+// scrolled the whole page instead. The menu is now placed against the viewport
+// with a computed max-height, which is what gives it something to scroll.
+describe("themeMenuPosition", () => {
+  const VIEWPORT = { width: 1024, height: 768 };
+
+  it("opens below the swatch when there is room, right-aligned to it", () => {
+    const pos = themeMenuPosition({ top: 100, bottom: 126, right: 500 }, VIEWPORT);
+    expect(pos.placement).toBe("below");
+    expect(pos.style).toMatchObject({ position: "fixed", top: 132, left: 500 - 216 });
+  });
+
+  it("caps the height to the space available, so the list scrolls instead of overflowing", () => {
+    // Room below is 768 - 560 - 6 - 8 = 194: enough to stay below, but well
+    // short of the ~300px the nine-entry list wants. That gap is the scroll.
+    const pos = themeMenuPosition({ top: 534, bottom: 560, right: 500 }, VIEWPORT);
+    expect(pos.placement).toBe("below");
+    expect(pos.style.maxHeight).toBe(194);
+  });
+
+  it("floors the height so a cramped anchor still shows a usable list", () => {
+    // Below is only 154 here, and above (560) is roomier — so it flips, rather
+    // than rendering a sliver.
+    const pos = themeMenuPosition({ top: 574, bottom: 600, right: 500 }, VIEWPORT);
+    expect(pos.placement).toBe("above");
+    expect(pos.style.maxHeight).toBe(560);
+  });
+
+  it("flips above the swatch when below is too cramped and above is roomier", () => {
+    const pos = themeMenuPosition({ top: 700, bottom: 726, right: 500 }, VIEWPORT);
+    expect(pos.placement).toBe("above");
+    // Anchored by its bottom edge, so it grows upward without needing its height.
+    expect(pos.style.bottom).toBe(768 - 700 + 6);
+    expect(pos.style.top).toBeUndefined();
+  });
+
+  it("never places the menu off the right edge", () => {
+    const pos = themeMenuPosition({ top: 40, bottom: 66, right: 1020 }, VIEWPORT);
+    expect(pos.style.left).toBe(1024 - 216 - 8);
+  });
+
+  it("never places the menu off the left edge on a narrow screen", () => {
+    const pos = themeMenuPosition({ top: 40, bottom: 66, right: 120 }, { width: 380, height: 800 });
+    expect(pos.style.left).toBe(8);
+  });
+
+  // A card mid-teardown (or jsdom, which reports zeroes) must not produce a
+  // negative max-height and an unusable sliver of a menu.
+  it("stays usable for a degenerate anchor", () => {
+    const pos = themeMenuPosition({ top: 0, bottom: 0, right: 0 }, { width: 0, height: 0 });
+    expect(pos.style.maxHeight as number).toBeGreaterThan(0);
+    expect(pos.style.left as number).toBeGreaterThanOrEqual(0);
+  });
+});

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

@@ -9,7 +9,14 @@
 // single↔grid only re-renders the header chrome and never remounts the
 // terminal surface (which would tear down the live connection).
 
-import { useCallback, useEffect, useRef, useState, type CSSProperties } from "react";
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+  type CSSProperties,
+} from "react";
 import { useDraggable, useDroppable } from "@dnd-kit/core";
 import type { SessionTarget, TypedError } from "../api/client";
 import { providerMeta } from "./providerMeta";
@@ -23,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";
@@ -34,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",
@@ -63,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. */
@@ -84,6 +112,71 @@ interface TerminalCardProps {
   onStarted?: () => void;
 }
 
+/** Where the terminal-theme popup goes, as viewport-relative inline styles. */
+export interface ThemeMenuPosition {
+  style: CSSProperties;
+  /** Which side of the swatch the menu opened on (asserted in tests). */
+  placement: "below" | "above";
+}
+
+/** Gap between the swatch and the menu, and the minimum breathing room kept
+ * against the viewport edges. */
+const THEME_MENU_GAP = 6;
+const THEME_MENU_MARGIN = 8;
+/** Matches the menu's min-width in TerminalCard.css. */
+const THEME_MENU_WIDTH = 216;
+/** Below this, "below the swatch" is too cramped to be worth using. */
+const THEME_MENU_MIN_USABLE = 160;
+
+/**
+ * Place the theme popup against the VIEWPORT rather than the card.
+ *
+ * A grid tile on a small screen (a 2x2 layout on an iPad, say) is routinely
+ * shorter than the nine-entry theme list, and `.terminal-card` sets
+ * `overflow: hidden` — so an absolutely-positioned menu was silently clipped at
+ * the card's edge with no way to reach the rest. Fixed positioning escapes that
+ * clip, and the computed `maxHeight` is what gives the menu something to scroll
+ * (paired with `overscroll-behavior: contain` in CSS, so the scroll stops at the
+ * menu instead of running the page).
+ *
+ * Opens downward by default, flipping above the swatch when there is more room
+ * there, and clamps horizontally so the menu can never sit off-screen.
+ */
+export function themeMenuPosition(
+  anchor: { top: number; bottom: number; right: number },
+  viewport: { width: number; height: number } = {
+    width: window.innerWidth,
+    height: window.innerHeight,
+  },
+): ThemeMenuPosition {
+  const roomBelow = viewport.height - anchor.bottom - THEME_MENU_GAP - THEME_MENU_MARGIN;
+  const roomAbove = anchor.top - THEME_MENU_GAP - THEME_MENU_MARGIN;
+  const placement: "below" | "above" =
+    roomBelow < THEME_MENU_MIN_USABLE && roomAbove > roomBelow ? "above" : "below";
+
+  // Right-align to the swatch, then clamp both edges into the viewport.
+  const left = Math.max(
+    THEME_MENU_MARGIN,
+    Math.min(anchor.right - THEME_MENU_WIDTH, viewport.width - THEME_MENU_WIDTH - THEME_MENU_MARGIN),
+  );
+  // Never negative: a zero-height anchor (jsdom, or a card mid-teardown) would
+  // otherwise ask for a negative max-height and render an unusable sliver.
+  const maxHeight = Math.max(THEME_MENU_MIN_USABLE, placement === "above" ? roomAbove : roomBelow);
+
+  return {
+    placement,
+    style:
+      placement === "above"
+        ? {
+            position: "fixed",
+            bottom: viewport.height - anchor.top + THEME_MENU_GAP,
+            left,
+            maxHeight,
+          }
+        : { position: "fixed", top: anchor.bottom + THEME_MENU_GAP, left, maxHeight },
+  };
+}
+
 function effectiveFont(settings: SettingsState, mode: TerminalCardMode): TerminalFontOptions {
   const base = terminalFontOptions(settings);
   if (mode === "grid" && settings.gridFit) {
@@ -101,6 +194,9 @@ export function TerminalCard({
   viewState,
   onClose,
   reorderEnabled,
+  gridArea,
+  masterSide,
+  onCycleTile,
   onNormal,
   onGrid,
   onToggleFullscreen,
@@ -142,6 +238,9 @@ export function TerminalCard({
   const [copied, setCopied] = useState(false);
   const [themeMenuOpen, setThemeMenuOpen] = useState(false);
   const themeMenuRef = useRef<HTMLDivElement | null>(null);
+  const themeButtonRef = useRef<HTMLButtonElement | null>(null);
+  // Viewport-relative placement for the theme popup; null until measured.
+  const [themeMenuPos, setThemeMenuPos] = useState<ThemeMenuPosition | null>(null);
 
   // dnd-kit reorder: the tile is both a draggable (handle = header grip, below)
   // and a droppable (swap target). Disabled outside a reorderable grid. We use
@@ -336,6 +435,39 @@ export function TerminalCard({
     }
   }, [isFocused, isVisible]);
 
+  // Measure the popup's placement before paint, and keep it anchored while it
+  // is open. A grid tile can be far smaller than the list, so the menu is
+  // positioned against the VIEWPORT (see ThemeMenuPosition) rather than the
+  // card, which clips its overflow.
+  useLayoutEffect(() => {
+    if (!themeMenuOpen) {
+      setThemeMenuPos(null);
+      return undefined;
+    }
+    const measure = (): void => {
+      const button = themeButtonRef.current;
+      if (button) {
+        setThemeMenuPos(themeMenuPosition(button.getBoundingClientRect()));
+      }
+    };
+    measure();
+    // A rotate/resize moves the anchor; so does scrolling the pane under it.
+    // Scrolling INSIDE the menu must not re-anchor (it would fight the user),
+    // and element scrolls only reach window listeners in the capture phase.
+    const onScroll = (e: Event): void => {
+      if (themeMenuRef.current?.contains(e.target as Node)) {
+        return;
+      }
+      measure();
+    };
+    window.addEventListener("resize", measure);
+    window.addEventListener("scroll", onScroll, true);
+    return () => {
+      window.removeEventListener("resize", measure);
+      window.removeEventListener("scroll", onScroll, true);
+    };
+  }, [themeMenuOpen]);
+
   // Dismiss the theme popup on Escape or a click anywhere outside it.
   useEffect(() => {
     if (!themeMenuOpen) {
@@ -436,6 +568,7 @@ export function TerminalCard({
       style={
         {
           display: isVisible ? undefined : "none",
+          gridArea,
           "--bg-term": theme.colors.background,
         } as CSSProperties
       }
@@ -501,6 +634,7 @@ export function TerminalCard({
           <div className="tc-theme" ref={themeMenuRef}>
             <button
               type="button"
+              ref={themeButtonRef}
               className="tc-btn tc-btn--swatch"
               data-testid={`terminal-theme-${target.id}`}
               title={`Terminal theme: ${theme.label}${hasThemeOverride ? "" : " (default)"}`}
@@ -515,8 +649,8 @@ export function TerminalCard({
             >
               A
             </button>
-            {themeMenuOpen && (
-              <div className="tc-theme-menu" role="menu">
+            {themeMenuOpen && themeMenuPos && (
+              <div className="tc-theme-menu" role="menu" style={themeMenuPos.style}>
                 <button
                   type="button"
                   className={`tc-theme-item${hasThemeOverride ? "" : " tc-theme-item--on"}`}
@@ -563,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);
+}