remo-cli 2.2.0rc9__tar.gz → 2.2.0rc10__tar.gz

{remo_cli-2.2.0rc9 → remo_cli-2.2.0rc10}/PKG-INFO

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

{remo_cli-2.2.0rc9 → remo_cli-2.2.0rc10}/docs/web-session-interface.md

@@ -100,8 +100,11 @@ The SPA is a two-pane **web console**:
   target as a grid.
 - **Terminal pane** (right). Clicking a row opens that target **solo** (single view); ⌘/Ctrl-click a
   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** (the arrangement persists until the grid is
-  rebuilt); the **◻** control solos a tile; **Esc** collapses the grid back to the focused terminal;
+  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, **hovering a tile focuses it**
+  (focus-follows-mouse) so keystrokes go where the pointer is — no click needed. The **◻** control solos
+  a tile; **Esc** collapses the grid back to the focused terminal;
   number keys **1–9** jump to the numbered sessions (⌘ 1–9 add to the grid). Hidden terminals stay
   connected and keep their scrollback. Each terminal header shows `provider · instance · region`
   (doubling as the drag handle), connection state, and a

{remo_cli-2.2.0rc9 → remo_cli-2.2.0rc10}/frontend/package-lock.json

@@ -8,6 +8,7 @@
       "name": "remo-web-frontend",
       "version": "0.0.0",
       "dependencies": {
+        "@dnd-kit/core": "^6.3.1",
         "@fontsource/fira-code": "^5.2.7",
         "@fontsource/ibm-plex-mono": "^5.2.7",
         "@fontsource/jetbrains-mono": "^5.2.8",
@@ -559,6 +560,45 @@
         "node": ">=20.19.0"
       }
     },
+    "node_modules/@dnd-kit/accessibility": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/accessibility/-/accessibility-3.1.1.tgz",
+      "integrity": "sha512-2P+YgaXF+gRsIihwwY1gCsQSYnu9Zyj2py8kY5fFvUM1qm2WA2u639R6YNVfU4GWr+ZM5mqEsfHZZLoRONbemw==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@dnd-kit/core": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/core/-/core-6.3.1.tgz",
+      "integrity": "sha512-xkGBRQQab4RLwgXxoqETICr6S5JlogafbhNsidmrkVv2YRs5MLwpjoF2qpiGjQt8S9AoxtIV603s0GIUpY5eYQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@dnd-kit/accessibility": "^3.1.1",
+        "@dnd-kit/utilities": "^3.2.2",
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@dnd-kit/utilities": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/utilities/-/utilities-3.2.2.tgz",
+      "integrity": "sha512-+MKAJEOfaBe5SmV6t34p80MMKhjvUz0vRrvVJbPT0WElzaOJ/1xs+D+KDv+tD/NE5ujfrChEcshd4fLn0wpiqg==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
     "node_modules/@esbuild/aix-ppc64": {
       "version": "0.21.5",
       "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz",
@@ -3462,6 +3502,12 @@
         "node": ">=20"
       }
     },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
+    },
     "node_modules/typescript": {
       "version": "5.9.3",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",

{remo_cli-2.2.0rc9 → remo_cli-2.2.0rc10}/frontend/package.json

@@ -15,6 +15,7 @@
     "test:e2e": "playwright test --config ../playwright.config.ts"
   },
   "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
     "@fontsource/fira-code": "^5.2.7",
     "@fontsource/ibm-plex-mono": "^5.2.7",
     "@fontsource/jetbrains-mono": "^5.2.8",

{remo_cli-2.2.0rc9 → remo_cli-2.2.0rc10}/frontend/src/components/TerminalCard.css

@@ -53,20 +53,54 @@
 .terminal-card--grid .terminal-card-grip {
   gap: 8px;
 }
-.terminal-card-grip[draggable="true"] {
+.terminal-card-grip--handle {
   cursor: grab;
+  touch-action: none; /* let the TouchSensor own press-and-hold drags */
 }
-.terminal-card-grip[draggable="true"]:active {
+.terminal-card-grip--handle:active {
   cursor: grabbing;
 }
 
-/* Reorder drag feedback. */
+/* Reorder drag feedback. The source tile dims; the tile the drop will land on
+ * (swap target) gets a bold dashed outline showing where the window will go. */
 .terminal-card--dragging {
-  opacity: 0.5;
+  opacity: 0.4;
 }
 .terminal-card--drop-target {
-  border-color: color-mix(in oklch, var(--accent) 65%, var(--border));
-  box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 22%, transparent);
+  outline: 2px dashed color-mix(in oklch, var(--accent) 85%, white);
+  outline-offset: -3px;
+  background: color-mix(in oklch, var(--accent) 12%, var(--bg-term));
+}
+
+/* The floating window-outline ghost rendered in the dnd-kit DragOverlay while
+ * dragging. Fills the overlay box (sized to the dragged tile), so it reads as
+ * the window itself following the cursor. */
+.terminal-drag-ghost {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  display: flex;
+  align-items: flex-start;
+  border-radius: var(--radius-lg);
+  border: 2px dashed color-mix(in oklch, var(--accent) 80%, white);
+  background: color-mix(in oklch, var(--accent) 16%, transparent);
+  box-shadow: 0 12px 30px oklch(0 0 0 / 0.35);
+  cursor: grabbing;
+  overflow: hidden;
+}
+.terminal-drag-ghost-title {
+  margin: 8px 12px;
+  padding: 3px 10px;
+  font-family: var(--font-mono);
+  font-weight: 600;
+  font-size: 12px;
+  color: var(--text);
+  background: color-mix(in oklch, var(--bg-header) 85%, transparent);
+  border-radius: 6px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: calc(100% - 24px);
 }
 
 .terminal-card-provider-dot {

{remo_cli-2.2.0rc9 → remo_cli-2.2.0rc10}/frontend/src/components/TerminalCard.tsx

@@ -10,6 +10,7 @@
 // terminal surface (which would tear down the live connection).
 
 import { useCallback, useEffect, useRef, useState } from "react";
+import { useDraggable, useDroppable } from "@dnd-kit/core";
 import type { SessionTarget, TypedError } from "../api/client";
 import { providerMeta } from "./providerMeta";
 import {
@@ -42,18 +43,6 @@ export type TerminalCardMode = "single" | "grid";
  * Drives the window-control cluster's active/disabled state. */
 export type TerminalViewState = "normal" | "grid" | "fullscreen";
 
-/** Drag-to-reorder wiring for a grid tile. Present only when reordering is
- * possible (a grid of two-plus); the header acts as the drag handle and the
- * whole tile is a drop target — dropping swaps the two tiles' positions. */
-export interface TerminalReorder {
-  isDragging: boolean;
-  isDropTarget: boolean;
-  onDragStart: () => void;
-  onDragEnter: () => void;
-  onDrop: () => void;
-  onDragEnd: () => void;
-}
-
 interface TerminalCardProps {
   target: SessionTarget;
   /** Registry region for this target's instance (badge only). */
@@ -66,8 +55,9 @@ interface TerminalCardProps {
   /** The display mode this card is currently in (window-control cluster state). */
   viewState: TerminalViewState;
   onClose: () => void;
-  /** Drag-to-reorder wiring; present only for a reorderable grid tile. */
-  reorder?: TerminalReorder;
+  /** 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;
   /** Window-control "Normal": solo this terminal into the single view. */
   onNormal: () => void;
   /** Window-control "Grid": show the grid — omitted when none is available. */
@@ -76,6 +66,9 @@ interface TerminalCardProps {
   onToggleFullscreen: () => void;
   /** Called when the user clicks into the surface (focus this terminal). */
   onFocusRequest?: () => void;
+  /** Focus-follows-mouse: called when the pointer enters this tile (grid only),
+   * so hovering changes focus without a click. No-op'd mid-drag by the caller. */
+  onHoverFocus?: () => void;
   /** Called when output arrives while this card is hidden (rail activity dot). */
   onActivity?: () => void;
   /** Called when the remote process exits (session may have ended) or the
@@ -100,11 +93,12 @@ export function TerminalCard({
   isFocused,
   viewState,
   onClose,
-  reorder,
+  reorderEnabled,
   onNormal,
   onGrid,
   onToggleFullscreen,
   onFocusRequest,
+  onHoverFocus,
   onActivity,
   onEnded,
 }: TerminalCardProps): JSX.Element {
@@ -130,6 +124,22 @@ export function TerminalCard({
   const [needsManualReconnect, setNeedsManualReconnect] = useState(false);
   const [error, setError] = useState<TypedError | 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
+  // the DragOverlay pattern (WorkspacePane), so the source stays put (dimmed)
+  // and we never apply `draggable.transform`.
+  const draggable = useDraggable({ id: target.id, disabled: !reorderEnabled });
+  const droppable = useDroppable({ id: target.id, disabled: !reorderEnabled });
+  const setDraggableRef = draggable.setNodeRef;
+  const setDroppableRef = droppable.setNodeRef;
+  const setTileRef = useCallback(
+    (node: HTMLDivElement | null) => {
+      setDraggableRef(node);
+      setDroppableRef(node);
+    },
+    [setDraggableRef, setDroppableRef],
+  );
+
   useEffect(() => {
     isFocusedRef.current = isFocused;
   }, [isFocused]);
@@ -299,38 +309,29 @@ export function TerminalCard({
   const prov = providerMeta(target.instance_type);
   const badge = [prov.label, target.instance_name, region].filter(Boolean).join(" · ");
 
-  const dragClasses = reorder
-    ? `${reorder.isDragging ? " terminal-card--dragging" : ""}${reorder.isDropTarget ? " terminal-card--drop-target" : ""}`
-    : "";
+  const isDragging = draggable.isDragging;
+  // Highlight the tile the drop will land on (swap target) — but not the source.
+  const isDropTarget = Boolean(reorderEnabled) && droppable.isOver && !isDragging;
+  const dragClasses = `${isDragging ? " terminal-card--dragging" : ""}${isDropTarget ? " terminal-card--drop-target" : ""}`;
 
   return (
     <div
+      ref={setTileRef}
       className={`terminal-card terminal-card--${mode}${isFocused ? " terminal-card--focused" : ""}${dragClasses}`}
       data-testid={`terminal-card-${target.id}`}
       data-focused={isFocused}
       data-connection-state={connectionState}
       style={{ display: isVisible ? undefined : "none" }}
-      // Whole tile is the drop target for a reorder drag (see the header grip).
-      onDragOver={reorder ? (e) => e.preventDefault() : undefined}
-      onDragEnter={reorder ? (e) => { e.preventDefault(); reorder.onDragEnter(); } : undefined}
-      onDrop={reorder ? (e) => { e.preventDefault(); reorder.onDrop(); } : undefined}
+      onMouseEnter={onHoverFocus}
     >
       <header className="terminal-card-header">
         {/* The header (left of the controls) is the drag handle for reordering
          * grid tiles; it no longer solos on click — the ◻ control does that. */}
         <div
-          className="terminal-card-grip"
-          draggable={reorder ? true : undefined}
-          onDragStart={
-            reorder
-              ? (e) => {
-                  e.dataTransfer.setData("text/plain", target.id);
-                  e.dataTransfer.effectAllowed = "move";
-                  reorder.onDragStart();
-                }
-              : undefined
-          }
-          onDragEnd={reorder ? () => reorder.onDragEnd() : undefined}
+          ref={reorderEnabled ? draggable.setActivatorNodeRef : undefined}
+          className={`terminal-card-grip${reorderEnabled ? " terminal-card-grip--handle" : ""}`}
+          {...(reorderEnabled ? draggable.listeners : {})}
+          {...(reorderEnabled ? draggable.attributes : {})}
         >
           <span className="terminal-card-provider-dot" style={{ background: prov.color }} />
           <div className="terminal-card-identity">

{remo_cli-2.2.0rc9 → remo_cli-2.2.0rc10}/frontend/src/components/WorkspacePane.tsx

@@ -3,6 +3,18 @@
 // laid out as a single view (one visible) or a responsive grid (two-plus).
 
 import { useMemo, useState } from "react";
+import {
+  DndContext,
+  DragOverlay,
+  KeyboardSensor,
+  PointerSensor,
+  TouchSensor,
+  closestCenter,
+  useSensor,
+  useSensors,
+  type DragEndEvent,
+  type DragStartEvent,
+} from "@dnd-kit/core";
 import type { SessionTarget } from "../api/client";
 import { requestBrowserFullscreen } from "../lib/fullscreen";
 import { useWorkspace } from "../state/workspace";
@@ -46,10 +58,16 @@ export function WorkspacePane({
   const workspace = useWorkspace();
   const { attached, visible, focusedId, prevGrid, maximizedId } = workspace;
 
-  // Transient drag-to-reorder state (which tile is being dragged, and which it's
-  // hovering over). Not persisted — only the resulting order (`visible`) is.
-  const [dragId, setDragId] = useState<string | null>(null);
-  const [overId, setOverId] = useState<string | null>(null);
+  // dnd-kit reorder: `activeId` is the tile currently being dragged (drives the
+  // floating DragOverlay ghost). Only the resulting order (`visible`) persists.
+  const [activeId, setActiveId] = useState<string | null>(null);
+  const sensors = useSensors(
+    // A small move starts a drag, so plain clicks (buttons, focus) still work.
+    useSensor(PointerSensor, { activationConstraint: { distance: 6 } }),
+    // Touch: a short press-and-hold starts a drag, leaving taps/scroll intact.
+    useSensor(TouchSensor, { activationConstraint: { delay: 180, tolerance: 8 } }),
+    useSensor(KeyboardSensor),
+  );
 
   // Render visible tiles in `visible` order (so the grid layout follows the
   // reorderable order + the number badges), then the hidden-but-attached cards
@@ -111,69 +129,85 @@ export function WorkspacePane({
 
   // Reordering is possible only within a real grid (two-plus visible tiles).
   const reorderable = !maximized && mode === "grid" && visible.length > 1;
-  const clearDrag = (): void => {
-    setDragId(null);
-    setOverId(null);
+  const activeTarget = activeId ? targetsById.get(activeId) : undefined;
+
+  const onDragStart = (e: DragStartEvent): void => setActiveId(String(e.active.id));
+  const onDragEnd = (e: DragEndEvent): void => {
+    const { active, over } = e;
+    setActiveId(null);
+    if (over && active.id !== over.id) {
+      workspace.swapVisible(String(active.id), String(over.id));
+    }
   };
 
   return (
     <main className="workspace" data-testid="workspace">
-      <div
-        className={`workspace-body workspace-body--${mode}${maximized ? " workspace-body--maximized" : ""}`}
-        style={
-          mode === "grid"
-            ? {
-                gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))`,
-                gridTemplateRows: `repeat(${rows}, minmax(0, 1fr))`,
-              }
-            : undefined
-        }
+      <DndContext
+        sensors={sensors}
+        collisionDetection={closestCenter}
+        onDragStart={onDragStart}
+        onDragEnd={onDragEnd}
+        onDragCancel={() => setActiveId(null)}
       >
-        {orderedTargets.map((target) => {
-          const id = target.id;
-          const isVisible = maximized ? id === maximized : visible.includes(id);
-          const viewState = maximized === id ? "fullscreen" : mode === "grid" ? "grid" : "normal";
-          const reorder =
-            reorderable && isVisible
+        <div
+          className={`workspace-body workspace-body--${mode}${maximized ? " workspace-body--maximized" : ""}`}
+          style={
+            mode === "grid"
               ? {
-                  isDragging: dragId === id,
-                  isDropTarget: overId === id && dragId !== null && dragId !== id,
-                  onDragStart: () => setDragId(id),
-                  onDragEnter: () => {
-                    if (dragId && dragId !== id) {
-                      setOverId(id);
-                    }
-                  },
-                  onDrop: () => {
-                    if (dragId && dragId !== id) {
-                      workspace.swapVisible(dragId, id);
-                    }
-                    clearDrag();
-                  },
-                  onDragEnd: clearDrag,
+                  gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))`,
+                  gridTemplateRows: `repeat(${rows}, minmax(0, 1fr))`,
                 }
-              : undefined;
-          return (
-            <TerminalCard
-              key={id}
-              target={target}
-              region={regionByKey.get(`${target.instance_type}::${target.instance_name}`)}
-              mode={mode}
-              isVisible={isVisible}
-              isFocused={focusedId === id}
-              viewState={viewState}
-              reorder={reorder}
-              onClose={() => workspace.closeTerm(id)}
-              onNormal={() => workspace.soloTile(id)}
-              onGrid={canGrid ? workspace.backToGrid : undefined}
-              onToggleFullscreen={() => toggleFullscreen(id)}
-              onFocusRequest={() => workspace.setFocused(id)}
-              onActivity={() => workspace.markUnread(id)}
-              onEnded={() => onTerminalEnded(target)}
-            />
-          );
-        })}
-      </div>
+              : undefined
+          }
+        >
+          {orderedTargets.map((target) => {
+            const id = target.id;
+            const isVisible = maximized ? id === maximized : visible.includes(id);
+            const viewState =
+              maximized === id ? "fullscreen" : mode === "grid" ? "grid" : "normal";
+            return (
+              <TerminalCard
+                key={id}
+                target={target}
+                region={regionByKey.get(`${target.instance_type}::${target.instance_name}`)}
+                mode={mode}
+                isVisible={isVisible}
+                isFocused={focusedId === id}
+                viewState={viewState}
+                reorderEnabled={reorderable && isVisible}
+                onClose={() => workspace.closeTerm(id)}
+                onNormal={() => workspace.soloTile(id)}
+                onGrid={canGrid ? workspace.backToGrid : undefined}
+                onToggleFullscreen={() => toggleFullscreen(id)}
+                onFocusRequest={() => workspace.setFocused(id)}
+                onHoverFocus={
+                  mode === "grid" && !maximized
+                    ? () => {
+                        // Focus-follows-mouse: hovering a grid tile focuses it,
+                        // but never while dragging (would fight the reorder).
+                        if (!activeId && focusedId !== id) {
+                          workspace.setFocused(id);
+                        }
+                      }
+                    : undefined
+                }
+                onActivity={() => workspace.markUnread(id)}
+                onEnded={() => onTerminalEnded(target)}
+              />
+            );
+          })}
+        </div>
+
+        {/* Floating "window outline" ghost that follows the cursor while dragging
+         * a grid tile. dropAnimation off — the tiles swap instantly on drop. */}
+        <DragOverlay dropAnimation={null}>
+          {activeTarget ? (
+            <div className="terminal-drag-ghost" aria-hidden="true">
+              <span className="terminal-drag-ghost-title">{activeTarget.project}</span>
+            </div>
+          ) : null}
+        </DragOverlay>
+      </DndContext>
     </main>
   );
 }

{remo_cli-2.2.0rc9 → remo_cli-2.2.0rc10}/pyproject.toml

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

{remo_cli-2.2.0rc9 → remo_cli-2.2.0rc10}/uv.lock

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