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

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

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

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

@@ -1,5 +1,13 @@
 # Changelog
 
+## [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.0.1}/PKG-INFO

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

{remo_cli-4.0.0 → remo_cli-4.0.1}/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.0.1}/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.0.1}/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";
@@ -84,6 +91,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) {
@@ -142,6 +214,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 +411,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) {
@@ -501,6 +609,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 +624,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"}`}

{remo_cli-4.0.0 → remo_cli-4.0.1}/frontend/src/theme/terminalThemes.test.ts

@@ -14,6 +14,19 @@ import {
 
 const HEX = /^#[0-9a-fA-F]{6}$/;
 
+/** WCAG relative luminance, then the standard contrast ratio. */
+function luminance(hex: string): number {
+  const channels = [1, 3, 5]
+    .map((i) => parseInt(hex.slice(i, i + 2), 16) / 255)
+    .map((c) => (c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4)));
+  return 0.2126 * channels[0] + 0.7152 * channels[1] + 0.0722 * channels[2];
+}
+
+function contrast(a: string, b: string): number {
+  const [hi, lo] = [luminance(a), luminance(b)].sort((x, y) => y - x);
+  return (hi + 0.05) / (lo + 0.05);
+}
+
 // The 22 ITheme fields every palette must set. Listed literally rather than
 // derived from a sample theme, so a field dropped from every palette at once
 // still fails here.
@@ -63,6 +76,44 @@ describe("terminal themes", () => {
     expect(autoTerminalTheme(false).variant).toBe("light");
   });
 
+  // Every colour the Remo pair can PRINT must be legible on its own
+  // background. This is the regression guard for a real report: Remo Light
+  // shipped `white` at #d5d8db and `brightWhite` at #fbfcfd — 1.27:1 and
+  // 1.09:1 — so Claude Code's "Cooked for 9s" and "(shift+tab to cycle)" hints
+  // were invisible, and bold made it worse, since xterm draws bold with the
+  // BRIGHT colour.
+  //
+  // Scoped to the two themes we author: the third-party ports are faithful
+  // copies and several of them would fail this (Gruvbox Light sets colour 0 to
+  // its own background), which is theirs to define, not ours to "fix".
+  //
+  // `black` is exempt: sitting near the background is what colour 0 is FOR in a
+  // dark theme, and apps use it as a background fill far more than as text.
+  describe.each([
+    ["remo-dark", "#040608"],
+    ["remo-light", "#eff2f6"],
+  ])("%s stays legible on its own background", (id, bg) => {
+    const theme = TERMINAL_THEMES.find((t) => t.id === id)!;
+    const printable = Object.entries(theme.colors).filter(
+      ([slot]) =>
+        !["background", "cursorAccent", "selectionBackground", "selectionForeground", "black"].includes(
+          slot,
+        ),
+    );
+
+    it.each(printable)("%s (%s) clears 3:1", (slot, hex) => {
+      expect(contrast(hex, bg), `${id}.${slot} ${hex} on ${bg}`).toBeGreaterThanOrEqual(3);
+    });
+
+    it("keeps bold white stronger than normal white, not weaker", () => {
+      // Bold is drawn with brightWhite; if it were the paler of the two, bold
+      // text would recede exactly where it should stand out.
+      expect(contrast(theme.colors.brightWhite, bg)).toBeGreaterThan(
+        contrast(theme.colors.white, bg),
+      );
+    });
+  });
+
   // The palette is a hand-derived snapshot of theme/tokens.css (it cannot
   // reference the tokens live), so pin the anchors that make it "matching":
   // the terminal background IS --bg-term, and the foreground IS --text.

{remo_cli-4.0.0 → remo_cli-4.0.1}/frontend/src/theme/terminalThemes.ts

@@ -127,6 +127,15 @@ export const TERMINAL_THEMES: TerminalTheme[] = [
     variant: "light",
     // On a light background the "bright" half goes DARKER, not lighter — the
     // same inversion Solarized Light uses, so bold text stays legible.
+    //
+    // That inversion has to include the WHITE pair, which is the trap Solarized
+    // Light and Catppuccin Latte both fall into: a literal white `white` sits at
+    // ~1.1:1 on a light background and simply is not there. Terminal apps print
+    // colour 7/15 as TEXT constantly (Claude Code's "Cooked for 9s" and
+    // "(shift+tab to cycle)" hints among them), so here they are the two darkest
+    // neutrals — 6.3:1 and 13:1 — with brightWhite the stronger of the pair, so
+    // bold still reads as emphasis. Reported from a live session; the contrast
+    // floor is asserted in terminalThemes.test.ts.
     colors: {
       background: "#eff2f6",
       foreground: "#242930",
@@ -141,7 +150,7 @@ export const TERMINAL_THEMES: TerminalTheme[] = [
       blue: "#007bb2",
       magenta: "#ad36a7",
       cyan: "#008389",
-      white: "#d5d8db",
+      white: "#535960",
       brightBlack: "#6c727a",
       brightRed: "#a9000c",
       brightGreen: "#007026",
@@ -149,7 +158,7 @@ export const TERMINAL_THEMES: TerminalTheme[] = [
       brightBlue: "#0064a1",
       brightMagenta: "#950891",
       brightCyan: "#006b71",
-      brightWhite: "#fbfcfd",
+      brightWhite: "#242930",
     },
   },
   // --- Curated third-party schemes -----------------------------------------

{remo_cli-4.0.0 → remo_cli-4.0.1}/pyproject.toml

@@ -4,7 +4,7 @@ build-backend = "hatchling.build"
 
 [project]
 name = "remo-cli"
-version = "4.0.0"
+version = "4.0.1"
 description = "Remote development environment CLI"
 readme = "README.md"
 license = "MIT"

{remo_cli-4.0.0 → remo_cli-4.0.1}/uv.lock

@@ -1038,7 +1038,7 @@ wheels = [
 
 [[package]]
 name = "remo-cli"
-version = "4.0.0"
+version = "4.0.1"
 source = { editable = "." }
 dependencies = [
     { name = "ansible-core" },

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

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