feat(workspaces): Win8 Start-style tile-grid home page

Rebuild the workspace home as a Windows 8 Start-screen-style tile grid,
replacing the max-w-3xl vertical card list.

Pure core (zero DOM/Svelte/fetch, fully unit-tested):
- logic/tile-layout.ts — geometryFor(width, height) resolves WIDE (4 fixed
  ~120px rows, column-wise flow, 4x2 span cap) or TALL (2 fixed columns,
  row-wise flow, 2x2 cap); pack() is the ONLY order->coordinates transform
  (greedy first-fit in fill order, hole-free, render-clamped per geometry);
  firstEmptySlot/insertAtFirstEmptySlot/mergeLayout/resizeTile/moveTile/
  sortByRecentActivity/sanitizeLayout. Persisted data is
  orientation-independent {version:1, tiles:[{id,colSpan,rowSpan,order}]} —
  order + spans only, never positions; the same data renders in either
  geometry (spans clamp for the render, persisted values untouched).
- logic/drag-controller.ts — pure pointer/press state machine: mouse
  threshold-drag + tap-open; touch long-press lifts + selects, pre-lift
  movement cancels so vertical scrolling never fights the gesture.

Shell:
- tile-layout-store.svelte.ts — thin reactive wrapper persisting through
  the injected createLocalStore adapter (dispatch.workspaces.tiles), ops:
  sync/resize/move/placeFirstEmpty/sortByRecentActivity.
- ui/HomeTileGrid.svelte — CSS-grid tile canvas (wide: horizontal scroll +
  snap + wheel pan + pan arrow + scroll indicator; tall: native vertical
  scroll), FLIP-animated reflow, drag ghost, transient resize preview.
- ui/HomeHeader.svelte — fixed chrome: Dispatch display title, New
  workspace popover (same slug validation; creates via create-on-miss and
  does NOT navigate — the new tile lands in the first empty slot in fill
  order and enters rename mode), global Plugins button, sort-by-recent
  overflow; compact icon buttons + bottom sheet on tall screens.
- ui/WorkspaceTile.svelte — tile face (title, /slug, conversation count,
  relative last-activity, live active dots, starred tint); inline rename
  with the old card's semantics.
- ui/TileActionBar.svelte — slides up on select (right-click / long-press):
  Open, Rename, Resize, Star/Unstar, Details, Plugins, Delete (old confirm
  + store call preserved).
- ui/ResizePicker.svelte — Word-style insert-table hover grid (wide 4x2 /
  tall 2x2) with arrow/Enter/Escape support and ghost preview on commit.
- ui/WorkspaceDetails.svelte — flyout holding the old card's default-cwd
  input + default-computer select (same store calls + error states).
- WorkspacesHome.svelte orchestrates; App.svelte untouched (same props).
- WorkspaceCard.svelte is removed (replaced by the tile system).

Manual tile order rules; starred workspaces get a tint (star is no longer
a sort key); workspaces unknown to the layout append at the end.

vitest: jsdom gains PointerEvent (MouseEvent-based) + Element.animate
stubs — the pointer logic is the outermost edge for the drag tests.

Verification: svelte-check 0/0, vitest 1655 passed (102 files, twice),
biome clean, vite build OK.

23 files changed, 3535 insertions, 718 deletions

diff --git a/src/features/workspaces/index.ts b/src/features/workspaces/index.ts
index dab1dec..0aa7fca 100644
--- a/src/features/workspaces/index.ts
+++ b/src/features/workspaces/index.ts
@@ -1,5 +1,11 @@
 export type { WorkspaceHttp, WorkspaceResult } from "./adapter/http";
 export { createWorkspaceHttp } from "./adapter/http";
+export type {
+  DragEmit,
+  DragEvent as DragControllerEvent,
+  DragPhase,
+} from "./logic/drag-controller";
+export { nextDragPhase } from "./logic/drag-controller";
 export type { Route } from "./logic/route";
 export {
   DEFAULT_WORKSPACE_ID,
@@ -8,10 +14,32 @@ export {
   WORKSPACE_SLUG_RE,
   workspacePath,
 } from "./logic/route";
+export type {
+  GridGeometry,
+  Placement,
+  TileGeometryMode,
+  TileLayoutData,
+  TileLayoutEntry,
+} from "./logic/tile-layout";
+export {
+  clampSpan,
+  fillOrderKey,
+  firstEmptySlot,
+  geometryFor,
+  insertAtFirstEmptySlot,
+  mergeLayout,
+  moveTile,
+  pack,
+  resizeTile,
+  sanitizeLayout,
+  sortByRecentActivity,
+  sortTiles,
+} from "./logic/tile-layout";
 export { applyStarred, pageTitle, relativeTime, sortWorkspaces } from "./logic/view-model";
 export type { WorkspaceStore } from "./store.svelte";
 export { createWorkspaceStore } from "./store.svelte";
-export { default as WorkspaceCard } from "./ui/WorkspaceCard.svelte";
+export type { TileLayoutStore } from "./tile-layout-store.svelte";
+export { createTileLayoutStore, TILE_LAYOUT_STORAGE_KEY } from "./tile-layout-store.svelte";
 export { default as WorkspacesHome } from "./ui/WorkspacesHome.svelte";
 
 /** Public module manifest — aggregated by the shell's "Loaded Modules" view. */
diff --git a/src/features/workspaces/logic/drag-controller.test.ts b/src/features/workspaces/logic/drag-controller.test.ts
new file mode 100644
index 0000000..d6dd760
--- /dev/null
+++ b/src/features/workspaces/logic/drag-controller.test.ts
@@ -0,0 +1,173 @@
+import { describe, expect, it } from "vitest";
+import { type DragPhase, type DragTransition, nextDragPhase } from "./drag-controller";
+
+const OPTS = { dragThresholdPx: 6 };
+
+function down(over: Partial<Parameters<typeof nextDragPhase>[1] & { type: "pointer-down" }> = {}) {
+  return {
+    type: "pointer-down" as const,
+    id: "t1",
+    x: 10,
+    y: 10,
+    touch: false,
+    ...over,
+  };
+}
+
+function press(touch = false): DragPhase {
+  return nextDragPhase({ kind: "idle" }, down({ touch }), OPTS).phase;
+}
+
+describe("nextDragPhase — mouse", () => {
+  it("a pointer-down enters the undecided pressing state", () => {
+    expect(press()).toEqual({ kind: "pressing", id: "t1", x: 10, y: 10, touch: false });
+  });
+
+  it("movement past the threshold starts a drag", () => {
+    const transition = nextDragPhase(
+      press(),
+      { type: "pointer-move", x: 20, y: 12, targetIndex: 3 },
+      OPTS,
+    );
+    expect(transition.phase).toEqual({
+      kind: "dragging",
+      id: "t1",
+      x: 20,
+      y: 12,
+      targetIndex: 3,
+      touch: false,
+    });
+    expect(transition.emit).toBeUndefined();
+  });
+
+  it("movement within the threshold stays pressing", () => {
+    const transition = nextDragPhase(
+      press(),
+      { type: "pointer-move", x: 12, y: 14, targetIndex: 0 },
+      OPTS,
+    );
+    expect(transition.phase).toEqual({ kind: "pressing", id: "t1", x: 10, y: 10, touch: false });
+  });
+
+  it("release without moving emits a tap (open the workspace)", () => {
+    const transition = nextDragPhase(press(), { type: "pointer-up" }, OPTS);
+    expect(transition.phase).toEqual({ kind: "idle" });
+    expect(transition.emit).toEqual({ kind: "tap", id: "t1" });
+  });
+
+  it("release while dragging emits a drop with the last tracked index", () => {
+    let transition: DragTransition = nextDragPhase(
+      press(),
+      { type: "pointer-move", x: 30, y: 30, targetIndex: 2 },
+      OPTS,
+    );
+    transition = nextDragPhase(
+      transition.phase,
+      { type: "pointer-move", x: 31, y: 31, targetIndex: 5 },
+      OPTS,
+    );
+    transition = nextDragPhase(transition.phase, { type: "pointer-up" }, OPTS);
+    expect(transition.emit).toEqual({ kind: "drop", id: "t1", targetIndex: 5 });
+    expect(transition.phase).toEqual({ kind: "idle" });
+  });
+});
+
+describe("nextDragPhase — touch", () => {
+  it("a long-press lifts the tile and emits lift (arm the drag + select)", () => {
+    const transition = nextDragPhase(press(true), { type: "long-press" }, OPTS);
+    expect(transition.emit).toEqual({ kind: "lift", id: "t1" });
+    expect(transition.phase).toEqual({
+      kind: "dragging",
+      id: "t1",
+      x: 10,
+      y: 10,
+      targetIndex: -1,
+      touch: true,
+    });
+  });
+
+  it("movement past the threshold BEFORE the lift cancels (vertical scrolling wins)", () => {
+    const transition = nextDragPhase(
+      press(true),
+      { type: "pointer-move", x: 10, y: 80, targetIndex: 0 },
+      OPTS,
+    );
+    expect(transition.phase).toEqual({ kind: "idle" });
+    expect(transition.emit).toBeUndefined();
+  });
+
+  it("movement within the threshold before the lift keeps pressing", () => {
+    const transition = nextDragPhase(
+      press(true),
+      { type: "pointer-move", x: 13, y: 12, targetIndex: 0 },
+      OPTS,
+    );
+    expect(transition.phase?.kind).toBe("pressing");
+  });
+
+  it("after the lift, movement drags (never cancels)", () => {
+    let transition = nextDragPhase(press(true), { type: "long-press" }, OPTS);
+    transition = nextDragPhase(
+      transition.phase,
+      { type: "pointer-move", x: 10, y: 90, targetIndex: 4 },
+      OPTS,
+    );
+    expect(transition.phase).toEqual({
+      kind: "dragging",
+      id: "t1",
+      x: 10,
+      y: 90,
+      targetIndex: 4,
+      touch: true,
+    });
+  });
+
+  it("a long-press never lifts a mouse press (desktop selects via right-click)", () => {
+    const transition = nextDragPhase(press(false), { type: "long-press" }, OPTS);
+    expect(transition.emit).toBeUndefined();
+    expect(transition.phase?.kind).toBe("pressing");
+  });
+
+  it("release while lifted (no movement) drops at the lifted tile's own slot", () => {
+    let transition = nextDragPhase(press(true), { type: "long-press" }, OPTS);
+    transition = nextDragPhase(transition.phase, { type: "pointer-up" }, OPTS);
+    expect(transition.emit).toEqual({ kind: "drop", id: "t1", targetIndex: -1 });
+  });
+});
+
+describe("nextDragPhase — cancellations", () => {
+  it("cancel returns to idle from any phase without emitting", () => {
+    for (const phase of [
+      { kind: "idle" as const },
+      press(),
+      nextDragPhase(press(), { type: "pointer-move", x: 40, y: 40, targetIndex: 1 }, OPTS).phase,
+    ]) {
+      const transition = nextDragPhase(phase, { type: "cancel" }, OPTS);
+      expect(transition.phase).toEqual({ kind: "idle" });
+      expect(transition.emit).toBeUndefined();
+    }
+  });
+
+  it("events in idle are inert", () => {
+    expect(nextDragPhase({ kind: "idle" }, { type: "pointer-up" }, OPTS).phase).toEqual({
+      kind: "idle",
+    });
+    expect(
+      nextDragPhase({ kind: "idle" }, { type: "pointer-move", x: 1, y: 1, targetIndex: 0 }, OPTS)
+        .phase,
+    ).toEqual({ kind: "idle" });
+    expect(nextDragPhase({ kind: "idle" }, { type: "long-press" }, OPTS).phase).toEqual({
+      kind: "idle",
+    });
+  });
+
+  it("a second pointer-down restarts the gesture with the new tile", () => {
+    const dragging = nextDragPhase(
+      press(),
+      { type: "pointer-move", x: 40, y: 40, targetIndex: 1 },
+      OPTS,
+    ).phase;
+    const transition = nextDragPhase(dragging, down({ id: "t2" }), OPTS);
+    expect(transition.phase).toEqual({ kind: "pressing", id: "t2", x: 10, y: 10, touch: false });
+  });
+});
diff --git a/src/features/workspaces/logic/drag-controller.ts b/src/features/workspaces/logic/drag-controller.ts
new file mode 100644
index 0000000..03dcade
--- /dev/null
+++ b/src/features/workspaces/logic/drag-controller.ts
@@ -0,0 +1,159 @@
+/**
+ * Pure drag/press state machine for the home tile grid — zero DOM, zero
+ * timers (the component schedules the long-press timer and dispatches its
+ * firing as an event), zero Svelte.
+ *
+ * Pointer semantics:
+ * - **Mouse**: press → move past the threshold = DRAG; release without
+ *   moving = a TAP (open the workspace). Selection is right-click.
+ * - **Touch**: press → (no movement past the threshold) long-press = LIFT
+ *   (arm the drag + select the tile) → further moves drag. Moving past the
+ *   threshold BEFORE the lift cancels the press — vertical scrolling wins,
+ *   so the two gestures never fight. Release while lifted = DROP.
+ *
+ * Pure: `(phase, event, options) → { phase, emit }`. The component owns the
+ * reactive `$state` and performs the emits (navigate / select / reorder).
+ */
+
+/** Where the interaction currently stands. */
+export type DragPhase =
+  | { readonly kind: "idle" }
+  /** Pointer is down; not yet decided between tap / drag / long-press. */
+  | {
+      readonly kind: "pressing";
+      readonly id: string;
+      readonly x: number;
+      readonly y: number;
+      readonly touch: boolean;
+    }
+  /** The tile is lifted and following the pointer (touch: after the long-press). */
+  | {
+      readonly kind: "dragging";
+      readonly id: string;
+      readonly x: number;
+      readonly y: number;
+      readonly targetIndex: number;
+      readonly touch: boolean;
+    };
+
+/** An action the component should perform as a result of a transition. */
+export type DragEmit =
+  | { readonly kind: "tap"; readonly id: string }
+  | { readonly kind: "lift"; readonly id: string }
+  | { readonly kind: "drop"; readonly id: string; readonly targetIndex: number };
+
+/** Events the component dispatches (DOM events + the long-press timer firing). */
+export type DragEvent =
+  | {
+      readonly type: "pointer-down";
+      readonly id: string;
+      readonly x: number;
+      readonly y: number;
+      readonly touch: boolean;
+    }
+  | {
+      readonly type: "pointer-move";
+      readonly x: number;
+      readonly y: number;
+      readonly targetIndex: number;
+    }
+  | { readonly type: "pointer-up" }
+  | { readonly type: "long-press" }
+  /** pointercancel / blur / the tile unmounting / Escape. */
+  | { readonly type: "cancel" };
+
+export interface DragOptions {
+  /** Pointer travel (px) that turns a press into a drag (or cancels a touch press). */
+  readonly dragThresholdPx: number;
+}
+
+export interface DragTransition {
+  readonly phase: DragPhase;
+  readonly emit?: DragEmit;
+}
+
+const IDLE: DragPhase = { kind: "idle" };
+
+/** Advance the state machine. Pure: phase + event in, NEXT phase + emit out. */
+export function nextDragPhase(
+  phase: DragPhase,
+  event: DragEvent,
+  options: DragOptions,
+): DragTransition {
+  switch (event.type) {
+    case "pointer-down":
+      // A press always restarts (a pointerdown while dragging is a new gesture).
+      return {
+        phase: {
+          kind: "pressing",
+          id: event.id,
+          x: event.x,
+          y: event.y,
+          touch: event.touch,
+        },
+      };
+    case "pointer-move": {
+      if (phase.kind === "pressing") {
+        const travelled = Math.hypot(event.x - phase.x, event.y - phase.y);
+        if (travelled < options.dragThresholdPx) return { phase };
+        // Touch: a big movement before the long-press lift is a SCROLL, not a
+        // drag — abandon the press so the canvas scrolls natively.
+        if (phase.touch) return { phase: IDLE };
+        return {
+          phase: {
+            kind: "dragging",
+            id: phase.id,
+            x: event.x,
+            y: event.y,
+            targetIndex: event.targetIndex,
+            touch: phase.touch,
+          },
+        };
+      }
+      if (phase.kind === "dragging") {
+        return {
+          phase: {
+            ...phase,
+            x: event.x,
+            y: event.y,
+            targetIndex: event.targetIndex,
+          },
+        };
+      }
+      return { phase };
+    }
+    case "pointer-up": {
+      if (phase.kind === "pressing") {
+        // No drag, no lift → a tap.
+        return { phase: IDLE, emit: { kind: "tap", id: phase.id } };
+      }
+      if (phase.kind === "dragging") {
+        return {
+          phase: IDLE,
+          emit: { kind: "drop", id: phase.id, targetIndex: phase.targetIndex },
+        };
+      }
+      return { phase };
+    }
+    case "long-press": {
+      if (phase.kind === "pressing" && phase.touch) {
+        // Touch lift: arm the drag at the press point (the pointer will move
+        // from here) + tell the component to select the tile.
+        return {
+          phase: {
+            kind: "dragging",
+            id: phase.id,
+            x: phase.x,
+            y: phase.y,
+            targetIndex: -1,
+            touch: true,
+          },
+          emit: { kind: "lift", id: phase.id },
+        };
+      }
+      return { phase };
+    }
+    case "cancel":
+      return { phase: IDLE };
+  }
+}
diff --git a/src/features/workspaces/logic/tile-layout.test.ts b/src/features/workspaces/logic/tile-layout.test.ts
new file mode 100644
index 0000000..f2fbc5b
--- /dev/null
+++ b/src/features/workspaces/logic/tile-layout.test.ts
@@ -0,0 +1,440 @@
+import { describe, expect, it } from "vitest";
+import {
+  clampSpan,
+  fillOrderKey,
+  firstEmptySlot,
+  type GridGeometry,
+  geometryFor,
+  insertAtFirstEmptySlot,
+  mergeLayout,
+  moveTile,
+  pack,
+  resizeTile,
+  sanitizeLayout,
+  sortByRecentActivity,
+  type TileLayoutEntry,
+} from "./tile-layout";
+
+const WIDE = geometryFor(1920, 1080);
+const TALL = geometryFor(390, 844);
+
+function tile(id: string, order: number, colSpan = 1, rowSpan = 1): TileLayoutEntry {
+  return { id, order, colSpan, rowSpan };
+}
+
+describe("geometryFor", () => {
+  it("resolves landscape/desktop viewports to the WIDE geometry", () => {
+    const geometry = geometryFor(1920, 1080);
+    expect(geometry.mode).toBe("wide");
+    expect(geometry.flowRows).toBe(4);
+    expect(geometry.flowCols).toBe(0);
+    expect(geometry.maxColSpan).toBe(4);
+    expect(geometry.maxRowSpan).toBe(2);
+    expect(geometry.unit.height).toBeGreaterThan(0);
+    expect(geometry.unit.width).toBeGreaterThan(0);
+  });
+
+  it("resolves portrait/mobile viewports to the TALL geometry", () => {
+    const geometry = geometryFor(390, 844);
+    expect(geometry.mode).toBe("tall");
+    expect(geometry.flowCols).toBe(2);
+    expect(geometry.flowRows).toBe(0);
+    expect(geometry.maxColSpan).toBe(2);
+    expect(geometry.maxRowSpan).toBe(2);
+  });
+
+  it("picks the picker dimensions from the span caps (4×2 wide, 2×2 tall)", () => {
+    // The resize picker IS the span cap: cols × rows of small squares.
+    expect([WIDE.maxColSpan, WIDE.maxRowSpan]).toEqual([4, 2]);
+    expect([TALL.maxColSpan, TALL.maxRowSpan]).toEqual([2, 2]);
+  });
+
+  it("resolves degenerate (unmeasured) sizes to wide", () => {
+    expect(geometryFor(0, 0).mode).toBe("wide");
+  });
+});
+
+describe("clampSpan", () => {
+  it("clamps spans to the geometry caps", () => {
+    expect(clampSpan({ colSpan: 4, rowSpan: 2 }, WIDE)).toEqual({ colSpan: 4, rowSpan: 2 });
+    expect(clampSpan({ colSpan: 9, rowSpan: 9 }, WIDE)).toEqual({ colSpan: 4, rowSpan: 2 });
+    expect(clampSpan({ colSpan: 3, rowSpan: 1 }, TALL)).toEqual({ colSpan: 2, rowSpan: 1 });
+  });
+
+  it("coerces garbage spans to 1×1", () => {
+    expect(clampSpan({ colSpan: 0, rowSpan: -2 }, WIDE)).toEqual({ colSpan: 1, rowSpan: 1 });
+    expect(clampSpan({ colSpan: Number.NaN, rowSpan: 1.9 }, WIDE)).toEqual({
+      colSpan: 1,
+      rowSpan: 1,
+    });
+  });
+});
+
+describe("pack", () => {
+  it("places tiles in order at the first fitting slot (wide, column-wise flow)", () => {
+    const placements = pack([tile("a", 0), tile("b", 1), tile("c", 2), tile("d", 3)], WIDE);
+    expect(placements).toEqual([
+      { id: "a", col: 1, row: 1, colSpan: 1, rowSpan: 1 },
+      { id: "b", col: 1, row: 2, colSpan: 1, rowSpan: 1 },
+      { id: "c", col: 1, row: 3, colSpan: 1, rowSpan: 1 },
+      { id: "d", col: 1, row: 4, colSpan: 1, rowSpan: 1 },
+    ]);
+  });
+
+  it("flows to the next column when the current one is full (wide)", () => {
+    const placements = pack(
+      [tile("a", 0), tile("b", 1), tile("c", 2), tile("d", 3), tile("e", 4)],
+      WIDE,
+    );
+    expect(placements.map((p) => [p.col, p.row])).toEqual([
+      [1, 1],
+      [1, 2],
+      [1, 3],
+      [1, 4],
+      [2, 1],
+    ]);
+  });
+
+  it("respects the persisted order over ids", () => {
+    const placements = pack([tile("z", 0), tile("a", 1)], WIDE);
+    expect(placements.map((p) => p.id)).toEqual(["z", "a"]);
+  });
+
+  it("places a double-height tile at the first slot with room (wide)", () => {
+    const placements = pack([tile("a", 0, 1, 2), tile("b", 1), tile("c", 2)], WIDE);
+    expect(placements.map((p) => [p.id, p.col, p.row, p.rowSpan])).toEqual([
+      ["a", 1, 1, 2],
+      ["b", 1, 3, 1],
+      ["c", 1, 4, 1],
+    ]);
+  });
+
+  it("a tile too tall for the remaining rows moves to the next column (wide)", () => {
+    // a,b,c fill rows 1-3; a 2-row tile does not fit the single remaining row → col 2.
+    const placements = pack(
+      [tile("a", 0), tile("b", 1), tile("c", 2), tile("tall", 3, 1, 2)],
+      WIDE,
+    );
+    expect(placements[3]).toEqual({ id: "tall", col: 2, row: 1, colSpan: 1, rowSpan: 2 });
+  });
+
+  it("flows row-wise across two fixed columns in tall mode", () => {
+    const placements = pack([tile("a", 0), tile("b", 1), tile("c", 2)], TALL);
+    expect(placements.map((p) => [p.col, p.row])).toEqual([
+      [1, 1],
+      [2, 1],
+      [1, 2],
+    ]);
+  });
+
+  it("clamps spans per geometry when packing (persisted spans stay raw)", () => {
+    const tiles = [tile("wide", 0, 3, 1), tile("b", 1, 4, 2)];
+    const placements = pack(tiles, TALL);
+    expect(placements).toEqual([
+      { id: "wide", col: 1, row: 1, colSpan: 2, rowSpan: 1 },
+      { id: "b", col: 1, row: 2, colSpan: 2, rowSpan: 2 },
+    ]);
+    // The input is untouched.
+    expect(tiles[0]).toEqual({ id: "wide", order: 0, colSpan: 3, rowSpan: 1 });
+  });
+
+  it("never overlaps tiles", () => {
+    const tiles = [
+      tile("a", 0, 2, 2),
+      tile("b", 1, 2, 2),
+      tile("c", 2, 4, 1),
+      tile("d", 3),
+      tile("e", 4, 1, 2),
+      tile("f", 5),
+    ];
+    const placements = pack(tiles, WIDE);
+    const seen = new Set<string>();
+    for (const p of placements) {
+      for (let r = p.row; r < p.row + p.rowSpan; r++) {
+        for (let c = p.col; c < p.col + p.colSpan; c++) {
+          const key = `${r}:${c}`;
+          expect(seen.has(key)).toBe(false);
+          seen.add(key);
+        }
+      }
+    }
+  });
+});
+
+describe("fillOrderKey", () => {
+  it("ranks wide slots column-wise (top-to-bottom, then next column)", () => {
+    expect(fillOrderKey(1, 1, WIDE)).toBeLessThan(fillOrderKey(1, 2, WIDE));
+    expect(fillOrderKey(1, 4, WIDE)).toBeLessThan(fillOrderKey(2, 1, WIDE));
+  });
+
+  it("ranks tall slots row-wise (left-to-right, then next row)", () => {
+    expect(fillOrderKey(1, 1, TALL)).toBeLessThan(fillOrderKey(2, 1, TALL));
+    expect(fillOrderKey(2, 1, TALL)).toBeLessThan(fillOrderKey(1, 2, TALL));
+  });
+});
+
+describe("firstEmptySlot", () => {
+  it("finds the first fitting empty slot in fill order", () => {
+    // Wide, rows 1-2 of col 1 occupied by a double-height tile → first empty is (col1,row3).
+    const tiles = [tile("a", 0, 1, 2)];
+    expect(firstEmptySlot(tiles, { colSpan: 1, rowSpan: 1 }, WIDE)).toEqual({ col: 1, row: 3 });
+  });
+
+  it("skips slots too small for the requested footprint", () => {
+    // (col1,row4) is the first empty 1×1 slot after three singles, but a
+    // 2-row tile needs rows 4-5 of a 4-row grid — impossible → next column.
+    const tiles = [tile("a", 0), tile("b", 1), tile("c", 2)];
+    expect(firstEmptySlot(tiles, { colSpan: 1, rowSpan: 1 }, WIDE)).toEqual({ col: 1, row: 4 });
+    expect(firstEmptySlot(tiles, { colSpan: 1, rowSpan: 2 }, WIDE)).toEqual({ col: 2, row: 1 });
+  });
+
+  it("returns the origin for an empty layout", () => {
+    expect(firstEmptySlot([], { colSpan: 1, rowSpan: 1 }, WIDE)).toEqual({ col: 1, row: 1 });
+  });
+
+  it("lands in a brand-new column/row beyond the occupied extent", () => {
+    // Two 4×2 tiles fill columns 1-4 across all 4 rows → the next slot is col 5.
+    const tiles = [tile("a", 0, 4, 2), tile("b", 1, 4, 2)];
+    expect(firstEmptySlot(tiles, { colSpan: 1, rowSpan: 1 }, WIDE)).toEqual({ col: 5, row: 1 });
+  });
+});
+
+describe("insertAtFirstEmptySlot", () => {
+  it("inserts a new tile so it packs into the first empty slot", () => {
+    // A double-height tile fills rows 1-2, a single fills row 3 → the first
+    // empty slot is (col1,row4); the new tile must land exactly there.
+    const tiles = [tile("big", 0, 1, 2), tile("c", 1)];
+    const next = insertAtFirstEmptySlot(tiles, "new", WIDE);
+    expect(next.map((t) => t.id)).toEqual(["big", "c", "new"]);
+    const placements = pack(next, WIDE);
+    expect(placements.map((p) => [p.id, p.col, p.row])).toEqual([
+      ["big", 1, 1],
+      ["c", 1, 3],
+      ["new", 1, 4],
+    ]);
+  });
+
+  it("renumbers orders densely after the insert", () => {
+    const next = insertAtFirstEmptySlot([tile("a", 0, 1, 2), tile("b", 7)], "new", WIDE);
+    expect(next.map((t) => t.order)).toEqual([0, 1, 2]);
+  });
+
+  it("moves an already-present tile instead of duplicating (refresh-race idempotency)", () => {
+    const tiles = [tile("a", 0), tile("x", 1), tile("b", 2, 1, 2)];
+    const first = insertAtFirstEmptySlot(tiles, "x", WIDE);
+    const second = insertAtFirstEmptySlot(first, "x", WIDE);
+    expect(second).toEqual(first);
+    expect(second.filter((t) => t.id === "x")).toHaveLength(1);
+  });
+
+  it("appends when the empty slot is beyond the current extent", () => {
+    const tiles = [tile("a", 0), tile("b", 1), tile("c", 2), tile("d", 3)];
+    const next = insertAtFirstEmptySlot(tiles, "e", WIDE);
+    expect(next.map((t) => t.id)).toEqual(["a", "b", "c", "d", "e"]);
+    expect(pack(next, WIDE).at(-1)).toMatchObject({ id: "e", col: 2, row: 1 });
+  });
+
+  it("preserves the spans of a moved existing tile", () => {
+    const tiles = [tile("x", 0, 2, 2), tile("a", 1), tile("b", 2), tile("c", 3)];
+    const next = insertAtFirstEmptySlot(tiles, "x", WIDE);
+    expect(next.find((t) => t.id === "x")).toMatchObject({ colSpan: 2, rowSpan: 2 });
+  });
+});
+
+describe("resizeTile", () => {
+  it("sets the persisted spans of one tile", () => {
+    const next = resizeTile([tile("a", 0), tile("b", 1)], "b", 4, 2);
+    expect(next.find((t) => t.id === "b")).toMatchObject({ colSpan: 4, rowSpan: 2 });
+    expect(next.find((t) => t.id === "a")).toMatchObject({ colSpan: 1, rowSpan: 1 });
+  });
+
+  it("sanitizes garbage spans to 1 and preserves order", () => {
+    const next = resizeTile([tile("a", 5, 2, 2)], "a", Number.NaN, -3);
+    expect(next).toEqual([{ id: "a", order: 5, colSpan: 1, rowSpan: 1 }]);
+  });
+
+  it("ignores unknown ids", () => {
+    const tiles = [tile("a", 0)];
+    expect(resizeTile(tiles, "nope", 2, 2)).toEqual(tiles);
+  });
+
+  it("does NOT clamp to the current geometry (render-time concern)", () => {
+    // A 4-wide desktop tile resized while wide stays 4-wide in the document;
+    // tall rendering clamps its VIEW.
+    const next = resizeTile([tile("a", 0)], "a", 4, 2);
+    expect(next[0]).toMatchObject({ colSpan: 4, rowSpan: 2 });
+  });
+});
+
+describe("moveTile", () => {
+  it("moves a tile forward, landing after the hovered tile", () => {
+    const next = moveTile([tile("a", 0), tile("b", 1), tile("c", 2), tile("d", 3)], "a", 2);
+    expect(next.map((t) => t.id)).toEqual(["b", "c", "a", "d"]);
+  });
+
+  it("moves a tile backward, landing before the hovered tile", () => {
+    const next = moveTile([tile("a", 0), tile("b", 1), tile("c", 2), tile("d", 3)], "d", 1);
+    expect(next.map((t) => t.id)).toEqual(["a", "d", "b", "c"]);
+  });
+
+  it("renumbers orders densely", () => {
+    const next = moveTile([tile("a", 0), tile("b", 3), tile("c", 9)], "c", 0);
+    expect(next.map((t) => t.order)).toEqual([0, 1, 2]);
+  });
+
+  it("is a no-op for the same index or an unknown id", () => {
+    const tiles = [tile("a", 0), tile("b", 1)];
+    expect(moveTile(tiles, "a", 0)).toEqual(tiles);
+    expect(moveTile(tiles, "x", 1)).toEqual(tiles);
+  });
+
+  it("clamps out-of-range indices", () => {
+    const next = moveTile([tile("a", 0), tile("b", 1)], "a", 99);
+    expect(next.map((t) => t.id)).toEqual(["b", "a"]);
+  });
+});
+
+describe("sortByRecentActivity", () => {
+  it("re-applies the recent-activity order (descending)", () => {
+    const tiles = [tile("a", 0), tile("b", 1), tile("c", 2)];
+    const next = sortByRecentActivity(
+      tiles,
+      new Map([
+        ["a", 100],
+        ["b", 300],
+        ["c", 200],
+      ]),
+    );
+    expect(next.map((t) => t.id)).toEqual(["b", "c", "a"]);
+  });
+
+  it("treats unknown ids as least-recent and renumbers", () => {
+    const tiles = [tile("a", 0), tile("b", 1)];
+    // `a` has recent activity (50); `b` is unknown → least-recent → last.
+    const next = sortByRecentActivity(tiles, new Map([["a", 50]]));
+    expect(next.map((t) => [t.id, t.order])).toEqual([
+      ["a", 0],
+      ["b", 1],
+    ]);
+  });
+});
+
+describe("mergeLayout", () => {
+  it("starts workspaces unknown to the layout (appends after the max order)", () => {
+    const merged = mergeLayout({ version: 1, tiles: [tile("a", 0)] }, ["a", "b", "c"]);
+    expect(merged.map((t) => [t.id, t.order])).toEqual([
+      ["a", 0],
+      ["b", 1],
+      ["c", 2],
+    ]);
+  });
+
+  it("appends unknowns in the live list's order", () => {
+    const merged = mergeLayout({ version: 1, tiles: [tile("z", 0)] }, ["z", "y", "x"]);
+    expect(merged.map((t) => t.id)).toEqual(["z", "y", "x"]);
+  });
+
+  it("drops entries for deleted workspaces", () => {
+    const merged = mergeLayout(
+      { version: 1, tiles: [tile("a", 0), tile("gone", 1), tile("b", 2)] },
+      ["a", "b"],
+    );
+    expect(merged.map((t) => t.id)).toEqual(["a", "b"]);
+  });
+
+  it("keeps manual order (not the list order) for known workspaces", () => {
+    const merged = mergeLayout({ version: 1, tiles: [tile("c", 0), tile("a", 1)] }, ["a", "c"]);
+    expect(merged.map((t) => t.id)).toEqual(["c", "a"]);
+  });
+
+  it("clamps spans in the view when a geometry is given (persisted data unchanged)", () => {
+    const merged = mergeLayout({ version: 1, tiles: [tile("a", 0, 3, 1)] }, ["a"], TALL);
+    expect(merged[0]).toMatchObject({ colSpan: 2, rowSpan: 1 });
+    expect(mergeLayout({ version: 1, tiles: [tile("a", 0, 3, 1)] }, ["a"])).toEqual([
+      { id: "a", order: 0, colSpan: 3, rowSpan: 1 },
+    ]);
+  });
+
+  it("deduplicates corrupted duplicate ids (first by order wins)", () => {
+    const merged = mergeLayout({ version: 1, tiles: [tile("a", 1, 2, 2), tile("a", 0)] }, [
+      "a",
+      "b",
+    ]);
+    expect(merged).toEqual([
+      { id: "a", order: 0, colSpan: 1, rowSpan: 1 },
+      { id: "b", order: 1, colSpan: 1, rowSpan: 1 },
+    ]);
+  });
+
+  it("handles a null/undefined persisted document", () => {
+    expect(mergeLayout(null, ["a"])).toEqual([{ id: "a", colSpan: 1, rowSpan: 1, order: 1 }]);
+    expect(mergeLayout(undefined, [])).toEqual([]);
+  });
+});
+
+describe("sanitizeLayout", () => {
+  it("accepts a valid document", () => {
+    expect(
+      sanitizeLayout({ version: 1, tiles: [{ id: "a", colSpan: 2, rowSpan: 1, order: 0 }] }),
+    ).toEqual({
+      version: 1,
+      tiles: [{ id: "a", colSpan: 2, rowSpan: 1, order: 0 }],
+    });
+  });
+
+  it("rejects foreign versions and malformed documents", () => {
+    expect(sanitizeLayout(null)).toEqual({ version: 1, tiles: [] });
+    expect(sanitizeLayout("nope")).toEqual({ version: 1, tiles: [] });
+    expect(sanitizeLayout({ version: 2, tiles: [] })).toEqual({ version: 1, tiles: [] });
+    expect(sanitizeLayout({ version: 1, tiles: "x" })).toEqual({ version: 1, tiles: [] });
+  });
+
+  it("coerces malformed entries and drops anonymous/duplicate ones", () => {
+    const data = sanitizeLayout({
+      version: 1,
+      tiles: [
+        { id: "a", colSpan: "x", rowSpan: 0, order: "y" },
+        null,
+        { colSpan: 2 },
+        { id: "a", order: 9 },
+        { id: "b", colSpan: 3.9, order: 2.5 },
+      ],
+    });
+    expect(data.tiles).toEqual([
+      { id: "a", colSpan: 1, rowSpan: 1, order: 0 },
+      { id: "b", colSpan: 3, rowSpan: 1, order: 2 },
+    ]);
+  });
+});
+
+describe("geometry-agnostic persistence", () => {
+  it("the SAME persisted data renders in either geometry (positions re-derived, never stored)", () => {
+    const tiles: TileLayoutEntry[] = [
+      tile("a", 0, 4, 2),
+      tile("b", 1),
+      tile("c", 2),
+      tile("d", 3, 2, 2),
+      tile("e", 4),
+    ];
+    const widePlacements = pack(tiles, WIDE);
+    const tallPlacements = pack(tiles, TALL);
+    // Wide flows column-wise across 4 rows; tall flows row-wise across 2 columns.
+    expect(widePlacements[0]).toMatchObject({ id: "a", col: 1, row: 1, colSpan: 4, rowSpan: 2 });
+    expect(widePlacements.at(-1)).toMatchObject({ id: "e" });
+    expect(tallPlacements[0]).toMatchObject({ id: "a", col: 1, row: 1, colSpan: 2, rowSpan: 2 });
+    // The document carries NO orientation/position field — only id/spans/order.
+    expect(Object.keys(tiles[0] ?? {}).sort()).toEqual(["colSpan", "id", "order", "rowSpan"]);
+  });
+});
+
+describe("type surface", () => {
+  it("exposes the geometry fields the picker and grid need", () => {
+    const geometry: GridGeometry = geometryFor(1000, 500);
+    expect([geometry.mode, geometry.flowRows, geometry.flowCols, geometry.unit.gap]).toEqual([
+      "wide",
+      4,
+      0,
+      8,
+    ]);
+  });
+});
diff --git a/src/features/workspaces/logic/tile-layout.ts b/src/features/workspaces/logic/tile-layout.ts
new file mode 100644
index 0000000..17923c0
--- /dev/null
+++ b/src/features/workspaces/logic/tile-layout.ts
@@ -0,0 +1,427 @@
+/**
+ * Pure tile-layout logic for the Win8-Start-style workspace home grid — zero
+ * DOM, zero Svelte, zero effects.
+ *
+ * The PERSISTED data is orientation-independent: `{ version, tiles: [{ id,
+ * colSpan, rowSpan, order }] }` — the manual tile order + requested spans
+ * ONLY, never positions. Positions are re-derived by {@link pack} from the
+ * CURRENT geometry, so the same data renders in either geometry (wide desktop
+ * / tall mobile) with no orientation conversion step: a tile whose persisted
+ * span exceeds the geometry's cap simply renders clamped (the persisted span
+ * is untouched).
+ *
+ * Terminology (distinct from the layout feature's nested split-tree "tile"):
+ * a HOME TILE is one workspace's cell in the flat start-screen grid.
+ */
+
+/** The grid geometry mode: landscape/desktop ("wide") or portrait/mobile ("tall"). */
+export type TileGeometryMode = "wide" | "tall";
+
+/** The px size of one tile unit (one grid cell) + the grid gap. */
+export interface TileUnitSize {
+  /**
+   * The unit's px width. `0` means "fluid" (the tall grid sizes its fixed
+   * columns in `1fr` so two tiles fill a phone's width).
+   */
+  readonly width: number;
+  readonly height: number;
+  readonly gap: number;
+}
+
+/**
+ * The full grid geometry a viewport resolves to. `flowRows`/`flowCols` name
+ * the FIXED track counts across the fill direction's cross axis:
+ * wide mode fixes ROWS (tiles flow column-wise, columns grow unbounded);
+ * tall mode fixes COLS (tiles flow row-wise, rows grow unbounded). `0` =
+ * unbounded. The picker (resize) dimensions equal the span caps.
+ */
+export interface GridGeometry {
+  readonly mode: TileGeometryMode;
+  /** Fixed row tracks (wide: 4; tall: 0 = rows grow unbounded). */
+  readonly flowRows: number;
+  /** Fixed column tracks (tall: 2; wide: 0 = columns grow unbounded). */
+  readonly flowCols: number;
+  /** Maximum horizontal span a tile may occupy in this geometry. */
+  readonly maxColSpan: number;
+  /** Maximum vertical span a tile may occupy in this geometry. */
+  readonly maxRowSpan: number;
+  readonly unit: TileUnitSize;
+}
+
+/** One persisted tile: which workspace it pins, how big it wants to be, and its manual position in the order. */
+export interface TileLayoutEntry {
+  /** The workspace id (the slug). */
+  readonly id: string;
+  readonly colSpan: number;
+  readonly rowSpan: number;
+  /** Lower sorts earlier. Positions are NEVER persisted — only this order. */
+  readonly order: number;
+}
+
+/** The persisted document (localStorage via the injected `LocalStore` adapter). */
+export interface TileLayoutData {
+  readonly version: 1;
+  readonly tiles: readonly TileLayoutEntry[];
+}
+
+/** A tile's resolved footprint on the grid (1-based grid coordinates). */
+export interface Placement {
+  readonly id: string;
+  readonly col: number;
+  readonly row: number;
+  readonly colSpan: number;
+  readonly rowSpan: number;
+}
+
+/** A requested span (pre-clamping). */
+export interface Span {
+  readonly colSpan: number;
+  readonly rowSpan: number;
+}
+
+/** The viewport assumed before the canvas has been measured (a landscape desktop). */
+export const DEFAULT_VIEWPORT = { width: 1280, height: 800 } as const;
+
+const WIDE_UNIT: TileUnitSize = { width: 128, height: 120, gap: 8 };
+const TALL_UNIT: TileUnitSize = { width: 0, height: 120, gap: 8 };
+
+/**
+ * Resolve the grid geometry from the tile canvas' size. Landscape/desktop →
+ * WIDE (4 fixed ~120px rows, column-wise flow, 4×2 span cap); portrait/mobile
+ * → TALL (2 fixed columns, row-wise flow, 2×2 span cap). Degenerate sizes
+ * (not yet measured) resolve to wide. Pure: numbers in, geometry out.
+ */
+export function geometryFor(width: number, height: number): GridGeometry {
+  const tall = width > 0 && height > 0 && height > width;
+  if (tall) {
+    return {
+      mode: "tall",
+      flowRows: 0,
+      flowCols: 2,
+      maxColSpan: 2,
+      maxRowSpan: 2,
+      unit: TALL_UNIT,
+    };
+  }
+  return {
+    mode: "wide",
+    flowRows: 4,
+    flowCols: 0,
+    maxColSpan: 4,
+    maxRowSpan: 2,
+    unit: WIDE_UNIT,
+  };
+}
+
+/** Sort entries by their persisted order (stable — ties keep their relative order). */
+export function sortTiles<T extends TileLayoutEntry>(tiles: readonly T[]): T[] {
+  return [...tiles].sort((a, b) => a.order - b.order);
+}
+
+/** Clamp a requested span to a geometry's caps, coercing garbage (non-positive/NaN) to 1. */
+export function clampSpan<T extends Span>(span: T, geometry: GridGeometry): Span {
+  return {
+    colSpan: clampUnit(span.colSpan, geometry.maxColSpan),
+    rowSpan: clampUnit(span.rowSpan, geometry.maxRowSpan),
+  };
+}
+
+function clampUnit(value: number, max: number): number {
+  if (!Number.isFinite(value)) return 1;
+  const int = Math.floor(value);
+  if (int < 1) return 1;
+  return Math.min(int, max);
+}
+
+/**
+ * A position's rank in the geometry's FILL ORDER — the order slots are visited
+ * when packing: wide fills column-wise (top-to-bottom, then the next column);
+ * tall fills row-wise (left-to-right, then the next row). Pure; only used for
+ * comparisons within one geometry.
+ */
+export function fillOrderKey(col: number, row: number, geometry: GridGeometry): number {
+  if (geometry.mode === "wide") return (col - 1) * geometry.flowRows + (row - 1);
+  return (row - 1) * geometry.flowCols + (col - 1);
+}
+
+function cellsFree(
+  occupied: ReadonlySet<string>,
+  col: number,
+  row: number,
+  colSpan: number,
+  rowSpan: number,
+): boolean {
+  for (let r = row; r < row + rowSpan; r++) {
+    for (let c = col; c < col + colSpan; c++) {
+      if (occupied.has(`${r}:${c}`)) return false;
+    }
+  }
+  return true;
+}
+
+function occupy(
+  occupied: Set<string>,
+  col: number,
+  row: number,
+  colSpan: number,
+  rowSpan: number,
+): void {
+  for (let r = row; r < row + rowSpan; r++) {
+    for (let c = col; c < col + colSpan; c++) {
+      occupied.add(`${r}:${c}`);
+    }
+  }
+}
+
+function maxOccupied(occupied: ReadonlySet<string>, axis: "col" | "row"): number {
+  let max = 0;
+  for (const cell of occupied) {
+    const value = Number.parseInt(
+      axis === "row" ? (cell.split(":")[0] ?? "") : (cell.split(":")[1] ?? ""),
+      10,
+    );
+    if (Number.isFinite(value) && value > max) max = value;
+  }
+  return max;
+}
+
+/**
+ * The first slot (in fill order) where a span-sized footprint fits without
+ * overlapping or exceeding the geometry's fixed cross-axis. Beyond the
+ * occupied region every cell is free, so the scan is bounded by the occupied
+ * extent — the result always exists (the flow is unbounded along its main
+ * axis). Pure: occupancy + span + geometry in, slot out.
+ */
+function firstFit(
+  occupied: ReadonlySet<string>,
+  span: Span,
+  geometry: GridGeometry,
+): { col: number; row: number } {
+  const { colSpan, rowSpan } = clampSpan(span, geometry);
+  if (geometry.mode === "wide") {
+    const maxCol = maxOccupied(occupied, "col");
+    for (let col = 1; col <= maxCol; col++) {
+      for (let row = 1; row <= geometry.flowRows - rowSpan + 1; row++) {
+        if (cellsFree(occupied, col, row, colSpan, rowSpan)) return { col, row };
+      }
+    }
+    return { col: maxCol + 1, row: 1 };
+  }
+  const maxRow = maxOccupied(occupied, "row");
+  for (let row = 1; row <= maxRow; row++) {
+    for (let col = 1; col <= geometry.flowCols - colSpan + 1; col++) {
+      if (cellsFree(occupied, col, row, colSpan, rowSpan)) return { col, row };
+    }
+  }
+  return { col: 1, row: maxRow + 1 };
+}
+
+/**
+ * THE order → coordinates transform: place the tiles (in their persisted
+ * order) into the first fitting slot in the geometry's fill order — greedy
+ * first-fit, so every fitting slot is used before the flow advances (no
+ * intentional holes). Requested spans clamp to the geometry (a 3×1 desktop
+ * tile in tall mode packs as 2×1 — the persisted span is untouched). Pure:
+ * entries + geometry in, a NEW placements array out (in pack order, which
+ * respects the persisted order).
+ */
+export function pack(tiles: readonly TileLayoutEntry[], geometry: GridGeometry): Placement[] {
+  const occupied = new Set<string>();
+  const placements: Placement[] = [];
+  for (const tile of sortTiles(tiles)) {
+    const { colSpan, rowSpan } = clampSpan(tile, geometry);
+    const slot = firstFit(occupied, { colSpan, rowSpan }, geometry);
+    occupy(occupied, slot.col, slot.row, colSpan, rowSpan);
+    placements.push({ id: tile.id, col: slot.col, row: slot.row, colSpan, rowSpan });
+  }
+  return placements;
+}
+
+/**
+ * The first footprint-fitting EMPTY slot in fill order — where a NEW tile of
+ * the given span would go (the header's create flow). Pure: entries + span +
+ * geometry in, a slot placement out (always exists; may be a new column/row
+ * beyond the current extent).
+ */
+export function firstEmptySlot(
+  tiles: readonly TileLayoutEntry[],
+  span: Span,
+  geometry: GridGeometry,
+): { col: number; row: number } {
+  return firstFit(packOccupancy(tiles, geometry), span, geometry);
+}
+
+/** Build the occupancy set of the tiles' packed positions. */
+function packOccupancy(tiles: readonly TileLayoutEntry[], geometry: GridGeometry): Set<string> {
+  const occupied = new Set<string>();
+  for (const placement of pack(tiles, geometry)) {
+    occupy(occupied, placement.col, placement.row, placement.colSpan, placement.rowSpan);
+  }
+  return occupied;
+}
+
+/** Re-assign orders 0..n-1 by array position (the canonical order encoding after structural edits). */
+function renumber(tiles: readonly TileLayoutEntry[]): TileLayoutEntry[] {
+  return tiles.map((tile, index) => (tile.order === index ? tile : { ...tile, order: index }));
+}
+
+/**
+ * Insert (or MOVE an already-present tile to) the first empty slot in fill
+ * order — the header-create placement. The new tile is 1×1, and inserting it
+ * before the first placement that starts AFTER the empty slot makes greedy
+ * packing drop it exactly into that slot. Idempotent: an id already in the
+ * layout is moved (spans preserved), not duplicated — this closes the race
+ * where the list-refresh sync appended the id first. Pure: entries in, a NEW
+ * entries array out (renumbered).
+ */
+export function insertAtFirstEmptySlot(
+  tiles: readonly TileLayoutEntry[],
+  id: string,
+  geometry: GridGeometry,
+): TileLayoutEntry[] {
+  const without = sortTiles(tiles).filter((tile) => tile.id !== id);
+  const slot = firstEmptySlot(without, { colSpan: 1, rowSpan: 1 }, geometry);
+  const slotKey = fillOrderKey(slot.col, slot.row, geometry);
+  const placements = pack(without, geometry);
+  let index = placements.findIndex((p) => fillOrderKey(p.col, p.row, geometry) > slotKey);
+  if (index === -1) index = without.length;
+  const existing = tiles.find((tile) => tile.id === id);
+  const entry: TileLayoutEntry = existing ?? { id, colSpan: 1, rowSpan: 1, order: 0 };
+  return renumber([...without.slice(0, index), entry, ...without.slice(index)]);
+}
+
+/**
+ * Resize one tile: set its persisted spans (sanitized to positive integers —
+ * NOT clamped to the current geometry; clamping is a render-time concern so a
+ * wide-sized tile survives an orientation switch). Unknown ids are ignored.
+ * Pure: entries in, a NEW entries array out.
+ */
+export function resizeTile(
+  tiles: readonly TileLayoutEntry[],
+  id: string,
+  colSpan: number,
+  rowSpan: number,
+): TileLayoutEntry[] {
+  const sanitized: Span = {
+    colSpan: clampUnit(colSpan, Number.MAX_SAFE_INTEGER),
+    rowSpan: clampUnit(rowSpan, Number.MAX_SAFE_INTEGER),
+  };
+  return sortTiles(tiles).map((tile) =>
+    tile.id === id ? { ...tile, colSpan: sanitized.colSpan, rowSpan: sanitized.rowSpan } : tile,
+  );
+}
+
+/**
+ * Move one tile to a position in the manual ORDER (the drag-reorder op). The
+ * target index is in the CURRENT order-sorted array; the tile is removed and
+ * re-inserted at the index, so dragging forward lands after the hovered tile
+ * and dragging backward lands before it (the dragged tile takes the hovered
+ * slot). Positions re-derive from the new order — never stored. Pure.
+ */
+export function moveTile(
+  tiles: readonly TileLayoutEntry[],
+  id: string,
+  toIndex: number,
+): TileLayoutEntry[] {
+  const ordered = sortTiles(tiles);
+  const from = ordered.findIndex((tile) => tile.id === id);
+  if (from === -1 || toIndex === from) return ordered;
+  const without = ordered.filter((tile) => tile.id !== id);
+  const index = Math.max(0, Math.min(Math.floor(toIndex), without.length));
+  const moved = ordered[from];
+  if (!moved) return ordered;
+  return renumber([...without.slice(0, index), moved, ...without.slice(index)]);
+}
+
+/**
+ * Re-apply the recent-activity order (the header overflow "Sort" action):
+ * tiles sort by their workspace's `lastActivityAt` descending (unknown ids
+ * last, ties stable), then orders renumber. Pure.
+ */
+export function sortByRecentActivity(
+  tiles: readonly TileLayoutEntry[],
+  lastActivityById: ReadonlyMap<string, number>,
+): TileLayoutEntry[] {
+  const sorted = sortTiles(tiles).sort(
+    (a, b) => (lastActivityById.get(b.id) ?? 0) - (lastActivityById.get(a.id) ?? 0),
+  );
+  return renumber(sorted);
+}
+
+/**
+ * Merge the persisted layout with the live workspace list: workspaces unknown
+ * to the layout (e.g. auto-created via deep-link) APPEND at the end (default
+ * 1×1, order after the current max); entries for deleted workspaces DROP;
+ * duplicate ids dedup (first wins); the result sorts by order. When a
+ * geometry is given, the returned VIEW clamps spans to it (the persisted
+ * document keeps the raw spans — clamping is transient per geometry). Pure:
+ * both inputs in, a NEW entries array out.
+ */
+export function mergeLayout(
+  persisted: TileLayoutData | null | undefined,
+  workspaceIds: readonly string[],
+  geometry?: GridGeometry,
+): TileLayoutEntry[] {
+  const known = new Set(workspaceIds);
+  const kept: TileLayoutEntry[] = [];
+  const seen = new Set<string>();
+  let maxOrder = 0;
+  for (const tile of sortTiles(persisted?.tiles ?? [])) {
+    if (!known.has(tile.id) || seen.has(tile.id)) continue;
+    seen.add(tile.id);
+    kept.push(tile);
+    if (tile.order > maxOrder) maxOrder = tile.order;
+  }
+  const appended: TileLayoutEntry[] = [];
+  for (const id of workspaceIds) {
+    if (seen.has(id)) continue;
+    seen.add(id);
+    maxOrder += 1;
+    appended.push({ id, colSpan: 1, rowSpan: 1, order: maxOrder });
+  }
+  const merged = [...kept, ...appended];
+  if (!geometry) return merged;
+  return merged.map((tile) => ({ ...tile, ...clampSpan(tile, geometry) }));
+}
+
+/**
+ * Coerce an unknown parsed-JSON value into layout data (the `LocalStore` load
+ * is untyped at the boundary). Anything but `{ version: 1, tiles: [...] }`
+ * yields the empty layout; malformed entries coerce (missing spans → 1,
+ * garbage → dropped). Pure: unknown in, data out.
+ */
+export function sanitizeLayout(raw: unknown): TileLayoutData {
+  if (typeof raw !== "object" || raw === null) return EMPTY_LAYOUT;
+  const version = (raw as { version?: unknown }).version;
+  if (version !== 1) return EMPTY_LAYOUT;
+  const rawTiles = (raw as { tiles?: unknown }).tiles;
+  if (!Array.isArray(rawTiles)) return EMPTY_LAYOUT;
+  const tiles: TileLayoutEntry[] = [];
+  const seen = new Set<string>();
+  for (let index = 0; index < rawTiles.length; index++) {
+    const rawTile = rawTiles[index];
+    if (typeof rawTile !== "object" || rawTile === null) continue;
+    const id = (rawTile as { id?: unknown }).id;
+    if (typeof id !== "string" || id === "" || seen.has(id)) continue;
+    seen.add(id);
+    tiles.push({
+      id,
+      colSpan: coerceSpan((rawTile as { colSpan?: unknown }).colSpan),
+      rowSpan: coerceSpan((rawTile as { rowSpan?: unknown }).rowSpan),
+      order: coerceOrder((rawTile as { order?: unknown }).order, index),
+    });
+  }
+  return { version: 1, tiles };
+}
+
+const EMPTY_LAYOUT: TileLayoutData = { version: 1, tiles: [] };
+
+function coerceSpan(value: unknown): number {
+  if (typeof value !== "number" || !Number.isFinite(value) || value < 1) return 1;
+  return Math.floor(value);
+}
+
+function coerceOrder(value: unknown, fallback: number): number {
+  if (typeof value !== "number" || !Number.isFinite(value)) return fallback;
+  return Math.floor(value);
+}
diff --git a/src/features/workspaces/tile-layout-store.svelte.ts b/src/features/workspaces/tile-layout-store.svelte.ts
new file mode 100644
index 0000000..ce01748
--- /dev/null
+++ b/src/features/workspaces/tile-layout-store.svelte.ts
@@ -0,0 +1,103 @@
+import type { LocalStore } from "../../adapters/local-storage";
+import {
+  type GridGeometry,
+  insertAtFirstEmptySlot,
+  mergeLayout,
+  moveTile,
+  resizeTile,
+  sanitizeLayout,
+  sortByRecentActivity,
+  type TileLayoutData,
+  type TileLayoutEntry,
+} from "./logic/tile-layout";
+
+/**
+ * The localStorage key for the home tile layout (order + spans only — never
+ * positions; positions re-derive from the geometry on every render).
+ */
+export const TILE_LAYOUT_STORAGE_KEY = "dispatch.workspaces.tiles";
+
+/**
+ * Tile-layout store — a thin reactive wrapper over the persisted
+ * orientation-independent layout document, persisted through the INJECTED
+ * `LocalStore` adapter (the repo's local-storage effect). All mutations go
+ * through the pure `logic/tile-layout` ops and write through to persistence.
+ * No ambient state: one instance per home page, created by the page entry
+ * (or injected in tests).
+ */
+export interface TileLayoutStore {
+  /** The persisted entries, order-sorted (raw spans — NOT geometry-clamped). */
+  readonly entries: readonly TileLayoutEntry[];
+  /**
+   * Merge the live workspace ids into the layout: workspaces unknown to the
+   * layout append at the end, entries for deleted workspaces drop. A no-op
+   * (no write) when the merge changes nothing — so an effect that tracks both
+   * the workspace list and this store settles instead of looping.
+   */
+  sync(workspaceIds: readonly string[]): void;
+  /** Resize a tile (persisted spans; render-time clamping is separate). */
+  resize(id: string, colSpan: number, rowSpan: number): void;
+  /** Move a tile to a position in the manual order (drag reorder). */
+  move(id: string, toIndex: number): void;
+  /**
+   * Place (or move an already-present) tile into the FIRST EMPTY SLOT in the
+   * grid's fill order — the header-create flow. Idempotent (see
+   * `insertAtFirstEmptySlot`), closing the refresh race where `sync` appended
+   * the id first.
+   */
+  placeFirstEmpty(id: string, geometry: GridGeometry): void;
+  /** Re-apply the recent-activity order (the header overflow "Sort" action). */
+  sortByRecentActivity(lastActivityById: ReadonlyMap<string, number>): void;
+}
+
+export function createTileLayoutStore(persistence: LocalStore<TileLayoutData>): TileLayoutStore {
+  // Load once at creation; a corrupt/foreign document sanitizes to empty.
+  let data = $state<TileLayoutData>(sanitizeLayout(persistence.load()));
+
+  function commit(tiles: readonly TileLayoutEntry[]): void {
+    data = { version: 1, tiles };
+    persistence.save(data);
+  }
+
+  return {
+    get entries(): readonly TileLayoutEntry[] {
+      return data.tiles;
+    },
+
+    sync(workspaceIds): void {
+      const merged = mergeLayout(data, workspaceIds);
+      if (!sameEntries(merged, data.tiles)) commit(merged);
+    },
+
+    resize(id, colSpan, rowSpan): void {
+      commit(resizeTile(data.tiles, id, colSpan, rowSpan));
+    },
+
+    move(id, toIndex): void {
+      commit(moveTile(data.tiles, id, toIndex));
+    },
+
+    placeFirstEmpty(id, geometry): void {
+      commit(insertAtFirstEmptySlot(data.tiles, id, geometry));
+    },
+
+    sortByRecentActivity(lastActivityById): void {
+      commit(sortByRecentActivity(data.tiles, lastActivityById));
+    },
+  };
+}
+
+/** Structural equality over entries (ids, spans, orders). */
+function sameEntries(a: readonly TileLayoutEntry[], b: readonly TileLayoutEntry[]): boolean {
+  if (a.length !== b.length) return false;
+  return a.every((entry, index) => {
+    const other = b[index];
+    return (
+      other !== undefined &&
+      entry.id === other.id &&
+      entry.colSpan === other.colSpan &&
+      entry.rowSpan === other.rowSpan &&
+      entry.order === other.order
+    );
+  });
+}
diff --git a/src/features/workspaces/tile-layout-store.test.ts b/src/features/workspaces/tile-layout-store.test.ts
new file mode 100644
index 0000000..f8b30f7
--- /dev/null
+++ b/src/features/workspaces/tile-layout-store.test.ts
@@ -0,0 +1,140 @@
+import { describe, expect, it } from "vitest";
+import type { LocalStore } from "../../adapters/local-storage";
+import { geometryFor, type TileLayoutData, type TileLayoutEntry } from "./logic/tile-layout";
+import { createTileLayoutStore } from "./tile-layout-store.svelte";
+
+const WIDE = geometryFor(1920, 1080);
+
+/** An in-memory `LocalStore` (the injected outermost edge — no mocks of our own modules). */
+function memoryStore(initial: TileLayoutData | null = null): LocalStore<TileLayoutData> & {
+  saved: TileLayoutData[];
+} {
+  let value = initial;
+  const saved: TileLayoutData[] = [];
+  return {
+    saved,
+    load: () => value,
+    save(next: TileLayoutData) {
+      saved.push(next);
+      value = next;
+    },
+    clear() {
+      value = null;
+    },
+  };
+}
+
+function tile(id: string, order: number, colSpan = 1, rowSpan = 1): TileLayoutEntry {
+  return { id, order, colSpan, rowSpan };
+}
+
+describe("createTileLayoutStore", () => {
+  it("loads the persisted document at creation", () => {
+    const persistence = memoryStore({ version: 1, tiles: [tile("a", 0, 2, 2)] });
+    const store = createTileLayoutStore(persistence);
+    expect(store.entries).toEqual([tile("a", 0, 2, 2)]);
+  });
+
+  it("sanitizes a corrupt persisted document to empty", () => {
+    const persistence = memoryStore(null);
+    // The adapter's load is untyped at the boundary — simulate garbage.
+    const store = createTileLayoutStore({
+      load: () => ({ junk: true }) as unknown as TileLayoutData,
+      save: () => {},
+      clear: () => {},
+    });
+    expect(store.entries).toEqual([]);
+    expect(persistence.saved).toEqual([]);
+  });
+
+  it("sync appends unknown workspaces and drops deleted ones, persisting once", () => {
+    const persistence = memoryStore({ version: 1, tiles: [tile("a", 0), tile("gone", 1)] });
+    const store = createTileLayoutStore(persistence);
+
+    store.sync(["a", "b"]);
+
+    expect(store.entries.map((t) => t.id)).toEqual(["a", "b"]);
+    expect(persistence.saved).toHaveLength(1);
+    // The max order counts KEPT entries (the dropped one doesn't reserve a slot).
+    expect(persistence.saved[0]).toEqual({
+      version: 1,
+      tiles: [tile("a", 0), { id: "b", colSpan: 1, rowSpan: 1, order: 1 }],
+    });
+  });
+
+  it("sync is a no-op (no write) when the merge changes nothing", () => {
+    const persistence = memoryStore({ version: 1, tiles: [tile("a", 0)] });
+    const store = createTileLayoutStore(persistence);
+
+    store.sync(["a"]);
+    store.sync(["a"]);
+
+    expect(persistence.saved).toHaveLength(0);
+  });
+
+  it("resize persists the new spans without clamping", () => {
+    const persistence = memoryStore({ version: 1, tiles: [tile("a", 0)] });
+    const store = createTileLayoutStore(persistence);
+
+    store.resize("a", 4, 2);
+
+    expect(store.entries).toEqual([tile("a", 0, 4, 2)]);
+    expect(persistence.saved.at(-1)?.tiles).toEqual([tile("a", 0, 4, 2)]);
+  });
+
+  it("move persists the reordered layout", () => {
+    const persistence = memoryStore({
+      version: 1,
+      tiles: [tile("a", 0), tile("b", 1), tile("c", 2)],
+    });
+    const store = createTileLayoutStore(persistence);
+
+    store.move("c", 0);
+
+    expect(store.entries.map((t) => t.id)).toEqual(["c", "a", "b"]);
+    expect(store.entries.map((t) => t.order)).toEqual([0, 1, 2]);
+  });
+
+  it("placeFirstEmpty puts a new id in the first empty slot's fill position", () => {
+    const persistence = memoryStore({
+      version: 1,
+      tiles: [tile("a", 0, 1, 2), tile("b", 1)],
+    });
+    const store = createTileLayoutStore(persistence);
+
+    store.placeFirstEmpty("new", WIDE);
+
+    // a packs rows 1-2, b row 3 → the first empty slot is (col1,row4) → appended.
+    expect(store.entries.map((t) => t.id)).toEqual(["a", "b", "new"]);
+    expect(persistence.saved.at(-1)?.tiles.map((t) => t.id)).toEqual(["a", "b", "new"]);
+  });
+
+  it("placeFirstEmpty is idempotent for an id sync already appended (the refresh race)", () => {
+    const persistence = memoryStore({ version: 1, tiles: [tile("a", 0)] });
+    const store = createTileLayoutStore(persistence);
+    store.sync(["a", "x"]); // the refresh appended the new workspace at the end
+    const before = store.entries;
+
+    store.placeFirstEmpty("x", WIDE);
+
+    expect(store.entries).toEqual(before);
+    expect(store.entries.filter((t) => t.id === "x")).toHaveLength(1);
+  });
+
+  it("sortByRecentActivity re-applies recent-activity order and persists", () => {
+    const persistence = memoryStore({
+      version: 1,
+      tiles: [tile("a", 0), tile("b", 1)],
+    });
+    const store = createTileLayoutStore(persistence);
+
+    store.sortByRecentActivity(
+      new Map([
+        ["a", 10],
+        ["b", 99],
+      ]),
+    );
+
+    expect(store.entries.map((t) => t.id)).toEqual(["b", "a"]);
+  });
+});
diff --git a/src/features/workspaces/ui/HomeHeader.svelte b/src/features/workspaces/ui/HomeHeader.svelte
new file mode 100644
index 0000000..01ac63f
--- /dev/null
+++ b/src/features/workspaces/ui/HomeHeader.svelte
@@ -0,0 +1,171 @@
+<script lang="ts">
+  import { isValidSlug } from "../logic/route";
+
+  /** The create outcome the page reports back to the popover. */
+  export type CreateResult = { readonly ok: true } | { readonly ok: false; readonly error: string };
+
+  let {
+    compact = false,
+    withPlugins = false,
+    withSort = false,
+    onCreate,
+    onOpenPlugins,
+    onSort,
+  }: {
+    /** Tall geometry: the controls collapse to compact icon buttons and the
+     * new-workspace popover becomes a bottom sheet. */
+    compact?: boolean;
+    /** The plugins port is present → the Plugins button renders. */
+    withPlugins?: boolean;
+    /** The Sort overflow action renders (recent-activity re-apply). */
+    withSort?: boolean;
+    /** Create the workspace on the backend (does NOT navigate); the page
+     * places the new tile + enters rename mode. */
+    onCreate: (slug: string) => Promise<CreateResult>;
+    onOpenPlugins: () => void;
+    onSort: () => void;
+  } = $props();
+
+  // ── New workspace popover (today's inline form logic, preserved) ──────────
+  let newSlug = $state("");
+  let slugError = $state<string | null>(null);
+  let popoverOpen = $state(false);
+  let submitting = $state(false);
+  let slugInput = $state<HTMLInputElement | undefined>();
+
+  const slugValid = $derived(newSlug.length > 0 && isValidSlug(newSlug));
+
+  function openPopover(): void {
+    popoverOpen = true;
+    slugError = null;
+    queueMicrotask(() => slugInput?.focus());
+  }
+
+  function closePopover(): void {
+    popoverOpen = false;
+    newSlug = "";
+    slugError = null;
+  }
+
+  async function submit(): Promise<void> {
+    const slug = newSlug.trim();
+    if (!isValidSlug(slug)) {
+      slugError = "Lowercase letters, digits, and hyphens (1–40 chars).";
+      return;
+    }
+    slugError = null;
+    submitting = true;
+    const result = await onCreate(slug);
+    submitting = false;
+    if (!result.ok) {
+      slugError = result.error;
+      return;
+    }
+    closePopover();
+  }
+</script>
+
+<header class="flex shrink-0 items-center justify-between gap-2 px-6 py-4">
+  <h1 class="text-3xl font-black tracking-tight">Dispatch</h1>
+
+  <div class="flex items-center gap-2" class:gap-1={compact}>
+    <!-- New workspace -->
+    <button
+      type="button"
+      class="btn btn-primary btn-sm"
+      class:btn-circle={compact}
+      aria-label="New workspace"
+      title="New workspace"
+      onclick={() => (popoverOpen ? closePopover() : openPopover())}
+    >
+      {#if compact}
+        <span aria-hidden="true" class="text-lg leading-none">+</span>
+      {:else}
+        New workspace
+      {/if}
+    </button>
+
+    {#if withPlugins}
+      <button
+        type="button"
+        class="btn btn-outline btn-sm"
+        class:btn-circle={compact}
+        aria-label="Plugins"
+        title="Open the plugin manager (load/unload plugins globally)"
+        onclick={onOpenPlugins}
+      >
+        {#if compact}
+          <span aria-hidden="true">⚡</span>
+        {:else}
+          Plugins
+        {/if}
+      </button>
+    {/if}
+
+    {#if withSort}
+      <div class="dropdown dropdown-end">
+        <button type="button" class="btn btn-ghost btn-sm" aria-label="More actions" title="More">
+          ⋯
+        </button>
+        <ul class="dropdown-content menu z-50 w-52 rounded-box border border-base-content/15 bg-base-100 p-2 shadow-xl">
+          <li>
+            <button type="button" onclick={onSort}>Sort by recent activity</button>
+          </li>
+        </ul>
+      </div>
+    {/if}
+  </div>
+</header>
+
+{#if popoverOpen}
+  <!-- Backdrop closes the popover. -->
+  <button
+    type="button"
+    class="fixed inset-0 z-40 cursor-default"
+    aria-label="Close new workspace"
+    onclick={closePopover}></button>
+
+  <!-- One popover body; the geometry only changes its positioning (bottom
+       sheet on tall screens, a corner card on wide ones). -->
+  <div
+    class="fixed z-50 border border-base-content/15 bg-base-100 p-4 shadow-2xl"
+    class:inset-x-0={compact}
+    class:bottom-0={compact}
+    class:rounded-t-box={compact}
+    class:top-14={!compact}
+    class:right-6={!compact}
+    class:w-80={!compact}
+    class:rounded-box={!compact}
+  >
+    <form
+      class="flex flex-col gap-2"
+      onsubmit={(e) => {
+        e.preventDefault();
+        void submit();
+      }}
+    >
+      <label for="new-ws" class="text-xs font-semibold uppercase opacity-60">New workspace</label>
+      <input
+        id="new-ws"
+        bind:this={slugInput}
+        class="input input-bordered w-full"
+        placeholder="my-workspace"
+        bind:value={newSlug}
+        autocomplete="off"
+        spellcheck="false"
+      />
+      {#if slugError}<p class="text-xs text-error">{slugError}</p>{/if}
+      <div class="flex justify-end gap-2">
+        {#if compact}
+          <button type="button" class="btn btn-ghost btn-sm" onclick={closePopover}>Cancel</button>
+        {/if}
+        <button type="submit" class="btn btn-primary btn-sm" disabled={!slugValid || submitting}>
+          {#if submitting}
+            <span class="loading loading-spinner loading-xs"></span>
+          {/if}
+          Create
+        </button>
+      </div>
+    </form>
+  </div>
+{/if}
diff --git a/src/features/workspaces/ui/HomeHeader.test.ts b/src/features/workspaces/ui/HomeHeader.test.ts
new file mode 100644
index 0000000..a0afc52
--- /dev/null
+++ b/src/features/workspaces/ui/HomeHeader.test.ts
@@ -0,0 +1,90 @@
+import { render, screen } from "@testing-library/svelte";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+import HomeHeader from "./HomeHeader.svelte";
+
+function props() {
+  return {
+    onCreate: vi.fn(async (_slug: string): Promise<{ ok: true }> => ({ ok: true })),
+    onOpenPlugins: vi.fn(),
+    onSort: vi.fn(),
+  };
+}
+
+describe("HomeHeader", () => {
+  it("renders the display title and the primary New workspace button", () => {
+    const p = props();
+    render(HomeHeader, { props: p });
+    expect(screen.getByRole("heading", { name: "Dispatch" })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "New workspace" })).toBeInTheDocument();
+  });
+
+  it("the Plugins button renders only with the plugins port", () => {
+    const p = props();
+    const without = render(HomeHeader, { props: p });
+    expect(without.queryByRole("button", { name: "Plugins" })).toBeNull();
+    without.unmount();
+
+    render(HomeHeader, { props: { ...p, withPlugins: true } });
+    screen.getByRole("button", { name: "Plugins" }).click();
+    expect(p.onOpenPlugins).toHaveBeenCalledTimes(1);
+  });
+
+  it("the Sort overflow renders only when asked, and dispatches", async () => {
+    const user = userEvent.setup();
+    const p = props();
+    render(HomeHeader, { props: { ...p, withSort: true } });
+
+    await user.click(screen.getByRole("button", { name: "More actions" }));
+    await user.click(screen.getByRole("button", { name: "Sort by recent activity" }));
+    expect(p.onSort).toHaveBeenCalledTimes(1);
+  });
+
+  it("the Create button disables for an invalid slug (validation before submit)", async () => {
+    const user = userEvent.setup();
+    const p = props();
+    render(HomeHeader, { props: p });
+
+    await user.click(screen.getByRole("button", { name: "New workspace" }));
+    const input = screen.getByRole("textbox", { name: "New workspace" });
+    await user.type(input, "Invalid Slug!");
+    expect(screen.getByRole("button", { name: "Create" })).toBeDisabled();
+    expect(p.onCreate).not.toHaveBeenCalled();
+
+    // A valid slug enables it.
+    await user.clear(input);
+    await user.type(input, "my-workspace");
+    expect(screen.getByRole("button", { name: "Create" })).toBeEnabled();
+  });
+
+  it("submitting the form with Enter creates via the callback and closes the popover", async () => {
+    const user = userEvent.setup();
+    const p = props();
+    render(HomeHeader, { props: p });
+
+    await user.click(screen.getByRole("button", { name: "New workspace" }));
+    await user.type(screen.getByRole("textbox", { name: "New workspace" }), "my-workspace{Enter}");
+
+    expect(p.onCreate).toHaveBeenCalledWith("my-workspace");
+  });
+
+  it("a backend error keeps the form open with the message", async () => {
+    const user = userEvent.setup();
+    const onCreate = vi.fn(
+      async (): Promise<{ ok: false; error: string }> => ({ ok: false, error: "taken" }),
+    );
+    render(HomeHeader, { props: { ...props(), onCreate } });
+
+    await user.click(screen.getByRole("button", { name: "New workspace" }));
+    await user.type(screen.getByRole("textbox", { name: "New workspace" }), "my-workspace");
+    await user.click(screen.getByRole("button", { name: "Create" }));
+
+    expect(await screen.findByText("taken")).toBeInTheDocument();
+  });
+
+  it("compact mode collapses the primary button to an icon", () => {
+    const p = props();
+    render(HomeHeader, { props: { ...p, compact: true } });
+    expect(screen.getByRole("button", { name: "New workspace" })).toHaveTextContent("+");
+  });
+});
diff --git a/src/features/workspaces/ui/HomeTileGrid.svelte b/src/features/workspaces/ui/HomeTileGrid.svelte
new file mode 100644
index 0000000..e29b9b1
--- /dev/null
+++ b/src/features/workspaces/ui/HomeTileGrid.svelte
@@ -0,0 +1,307 @@
+<script lang="ts">
+  import type { WorkspaceEntry } from "@dispatch/wire";
+  import { nextDragPhase, type DragEvent, type DragPhase } from "../logic/drag-controller";
+  import type { GridGeometry, Placement, Span } from "../logic/tile-layout";
+  import type { WorkspaceStore } from "../store.svelte";
+  import WorkspaceTile from "./WorkspaceTile.svelte";
+
+  let {
+    geometry,
+    placements,
+    workspacesById,
+    store,
+    selectedId = null,
+    renamingId = null,
+    preview = null,
+    hasActive,
+    onOpen,
+    onSelect,
+    onReorder,
+    onRenameEnd,
+  }: {
+    geometry: GridGeometry;
+    /** Packed placements (in pack order — the manual tile order). */
+    placements: readonly Placement[];
+    workspacesById: ReadonlyMap<string, WorkspaceEntry>;
+    /** Forwarded to tiles for the inline rename (semantics preserved). */
+    store: WorkspaceStore;
+    selectedId?: string | null;
+    renamingId?: string | null;
+    /** The resize picker's transient ghost footprint for this tile. */
+    preview?: { readonly id: string; readonly colSpan: number; readonly rowSpan: number } | null;
+    /** Optional port: does the workspace have an active (generating) conversation. */
+    hasActive?: (workspaceId: string) => boolean;
+    onOpen: (id: string) => void;
+    onSelect: (id: string) => void;
+    /** The drag dropped `id` at `toIndex` in the manual order (-1 = nowhere). */
+    onReorder: (id: string, toIndex: number) => void;
+    onRenameEnd: () => void;
+  } = $props();
+
+  // ── Drag/press state machine (pure logic, wired to pointer events) ────────
+  const DRAG_THRESHOLD_PX = 6;
+  const LONG_PRESS_MS = 500;
+  let phase = $state<DragPhase>({ kind: "idle" });
+  let longPressTimer: ReturnType<typeof setTimeout> | undefined;
+
+  function armLongPress(): void {
+    disarmLongPress();
+    longPressTimer = setTimeout(() => {
+      longPressTimer = undefined;
+      dispatch({ type: "long-press" });
+    }, LONG_PRESS_MS);
+  }
+
+  function disarmLongPress(): void {
+    if (longPressTimer !== undefined) {
+      clearTimeout(longPressTimer);
+      longPressTimer = undefined;
+    }
+  }
+
+  function dispatch(event: DragEvent): void {
+    const transition = nextDragPhase(phase, event, { dragThresholdPx: DRAG_THRESHOLD_PX });
+    phase = transition.phase;
+    const emit = transition.emit;
+    if (emit) {
+      if (emit.kind === "tap") onOpen(emit.id);
+      else if (emit.kind === "lift") onSelect(emit.id);
+      else if (emit.kind === "drop" && emit.targetIndex >= 0) onReorder(emit.id, emit.targetIndex);
+    }
+    // Keep the long-press armed exactly while a TOUCH press is undecided.
+    if (phase.kind === "pressing" && phase.touch) armLongPress();
+    else disarmLongPress();
+  }
+
+  /** The hovered tile's index in the manual order (-1 = not over a tile). */
+  function hoveredIndex(x: number, y: number): number {
+    const hit = document.elementFromPoint(x, y)?.closest("[data-tile-id]");
+    const id = hit?.getAttribute("data-tile-id");
+    if (id === null || id === undefined) return -1;
+    return placements.findIndex((placement) => placement.id === id);
+  }
+
+  /** Interactive targets inside a tile (the rename input) own their gestures. */
+  function insideInteractive(target: EventTarget | null): boolean {
+    const el = target instanceof HTMLElement ? target : null;
+    return el?.closest("input, select, textarea, button, a") !== null;
+  }
+
+  function tilePointerDown(e: PointerEvent, id: string): void {
+    if (e.button !== 0 || insideInteractive(e.target)) return;
+    // Capture so fast drags keep the pointer events on this element.
+    (e.currentTarget as HTMLElement)?.setPointerCapture?.(e.pointerId);
+    dispatch({
+      type: "pointer-down",
+      id,
+      x: e.clientX,
+      y: e.clientY,
+      touch: e.pointerType === "touch",
+    });
+  }
+
+  function tilePointerMove(e: PointerEvent): void {
+    if (phase.kind === "idle" || insideInteractive(e.target)) return;
+    dispatch({
+      type: "pointer-move",
+      x: e.clientX,
+      y: e.clientY,
+      targetIndex: hoveredIndex(e.clientX, e.clientY),
+    });
+  }
+
+  function tilePointerUp(): void {
+    if (phase.kind === "idle") return;
+    dispatch({ type: "pointer-up" });
+  }
+
+  // ── Tile element registry (for the FLIP reflow animation) ─────────────────
+  let tileEls = new Map<string, HTMLElement>();
+  let lastRects = new Map<string, { x: number; y: number }>();
+
+  function trackTile(el: HTMLElement, id: string): { destroy: () => void } {
+    tileEls.set(id, el);
+    return {
+      destroy() {
+        tileEls.delete(id);
+      },
+    };
+  }
+
+  // FLIP: measure after a placements/geometry change and play the inverted
+  // delta — reordering edits the ORDER, the reflow is always derived.
+  $effect(() => {
+    // Track the layout inputs (the DOM reads below are untracked).
+    const ids = new Set(placements.map((placement) => placement.id));
+    void geometry.mode;
+    const rects = new Map<string, { x: number; y: number }>();
+    for (const [id, el] of tileEls) {
+      if (!ids.has(id)) continue;
+      const rect = el.getBoundingClientRect();
+      rects.set(id, { x: rect.left, y: rect.top });
+    }
+    for (const [id, prev] of lastRects) {
+      const next = rects.get(id);
+      const el = tileEls.get(id);
+      if (!next || !el) continue;
+      const dx = prev.x - next.x;
+      const dy = prev.y - next.y;
+      if ((dx !== 0 || dy !== 0) && typeof el.animate === "function") {
+        el.animate(
+          [{ transform: `translate(${dx}px, ${dy}px)` }, { transform: "translate(0, 0)" }],
+          { duration: 200, easing: "ease-out" },
+        );
+      }
+    }
+    lastRects = rects;
+  });
+
+  // ── Wide-mode horizontal panning: wheel + pan arrow + scroll indicator ────
+  let scrollerEl = $state<HTMLDivElement | undefined>();
+  let scrollProgress = $state(0);
+  let canPan = $state(false);
+
+  function updateScroll(): void {
+    const el = scrollerEl;
+    if (!el) return;
+    const max = el.scrollWidth - el.clientWidth;
+    canPan = geometry.mode === "wide" && max > 1;
+    scrollProgress = max > 0 ? el.scrollLeft / max : 0;
+  }
+
+  $effect(() => {
+    // Re-measure when the geometry flips or the content first renders/changes.
+    void geometry.mode;
+    void placements.length;
+    updateScroll();
+  });
+
+  function handleWheel(e: WheelEvent): void {
+    // Vertical wheel pans the wide canvas horizontally.
+    if (geometry.mode !== "wide" || Math.abs(e.deltaY) <= Math.abs(e.deltaX)) return;
+    e.preventDefault();
+    scrollerEl?.scrollBy({ left: e.deltaY });
+  }
+
+  function pan(): void {
+    const el = scrollerEl;
+    if (!el) return;
+    const max = el.scrollWidth - el.clientWidth;
+    const atEnd = el.scrollLeft >= max - 1;
+    // One viewport sideways; past the end, pan back to the start.
+    el.scrollBy({ left: atEnd ? -max - el.clientWidth : el.clientWidth, behavior: "smooth" });
+  }
+
+  // ── Grid + tile styles (the geometry decides; no breakpoint classes) ──────
+  const gridStyle = $derived(
+    geometry.mode === "wide"
+      ? `grid-template-rows: repeat(${geometry.flowRows}, ${geometry.unit.height}px);` +
+          ` grid-auto-flow: column; grid-auto-columns: ${geometry.unit.width}px;` +
+          ` gap: ${geometry.unit.gap}px; width: max-content;`
+      : `grid-template-columns: repeat(${geometry.flowCols}, minmax(0, 1fr));` +
+          ` grid-auto-flow: row; grid-auto-rows: ${geometry.unit.height}px;` +
+          ` gap: ${geometry.unit.gap}px;`,
+  );
+
+  function spanFor(placement: Placement): Span {
+    if (preview && preview.id === placement.id) {
+      return { colSpan: preview.colSpan, rowSpan: preview.rowSpan };
+    }
+    return { colSpan: placement.colSpan, rowSpan: placement.rowSpan };
+  }
+
+  function wrapperStyle(placement: Placement): string {
+    const span = spanFor(placement);
+    return `grid-column: ${placement.col} / span ${span.colSpan}; grid-row: ${placement.row} / span ${span.rowSpan};`;
+  }
+</script>
+
+<div class="relative min-h-0 flex-1">
+  <div
+    bind:this={scrollerEl}
+    class="h-full overscroll-contain"
+    class:overflow-x-auto={geometry.mode === "wide"}
+    class:overflow-y-auto={geometry.mode === "tall"}
+    style={`scroll-snap-type: ${geometry.mode === "wide" ? "x" : "y"} proximity;`}
+    onscroll={updateScroll}
+    onwheel={handleWheel}
+  >
+    <div class="grid" style={gridStyle}>
+      {#each placements as placement (placement.id)}
+        {@const ws = workspacesById.get(placement.id)}
+        {#if ws}
+          <!-- svelte-ignore a11y_no_static_element_interactions, a11y_click_events_have_key_events -->
+          <div
+            data-tile-id={placement.id}
+            class={`flex select-none flex-col overflow-hidden rounded-box border transition-colors ${
+              selectedId === placement.id ? "border-primary/50 ring-2 ring-primary" : ""
+            } ${
+              ws.starred
+                ? "border-primary/40 bg-primary/20"
+                : "border-base-content/10 bg-base-200"
+            } ${phase.kind === "dragging" && phase.id === placement.id ? "opacity-40" : ""}`}
+            style={`${wrapperStyle(placement)} scroll-snap-align: start;`}
+            role="button"
+            tabindex="0"
+            aria-label={`Open workspace ${ws.title}`}
+            use:trackTile={placement.id}
+            onpointerdown={(e) => tilePointerDown(e, placement.id)}
+            onpointermove={tilePointerMove}
+            onpointerup={tilePointerUp}
+            onpointercancel={() => dispatch({ type: "cancel" })}
+            oncontextmenu={(e) => {
+              e.preventDefault();
+              onSelect(placement.id);
+            }}
+            onkeydown={(e) => {
+              if (insideInteractive(e.target)) return;
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                onOpen(placement.id);
+              }
+            }}
+          >
+            <WorkspaceTile
+              {ws}
+              {store}
+              {placement}
+              selected={selectedId === placement.id}
+              renaming={renamingId === placement.id}
+              active={hasActive?.(ws.id) ?? false}
+              {onRenameEnd}
+            />
+          </div>
+        {/if}
+      {/each}
+    </div>
+  </div>
+
+  {#if canPan}
+    <!-- Pan arrow + thin scroll-position indicator (wide geometry only). -->
+    <button
+      type="button"
+      class="btn btn-circle btn-sm absolute right-3 bottom-3 z-10 border-base-content/20 bg-base-100/80 shadow-lg"
+      aria-label="Pan right"
+      title="Pan one screen sideways"
+      onclick={pan}
+    >
+      →
+    </button>
+    <div class="absolute inset-x-0 bottom-0 z-10 h-0.5 bg-base-content/10">
+      <div
+        class="h-full bg-primary transition-[width] duration-100"
+        style={`width: ${Math.round(scrollProgress * 100)}%;`}
+      ></div>
+    </div>
+  {/if}
+</div>
+
+{#if phase.kind === "dragging"}
+  <!-- The drag ghost follows the pointer (transient; never a data change). -->
+  <div
+    class="pointer-events-none fixed z-50 rounded-box border border-primary bg-primary/30 px-3 py-2 text-sm font-bold shadow-2xl"
+    style={`left: ${phase.x + 10}px; top: ${phase.y + 10}px;`}
+  >
+    {workspacesById.get(phase.id)?.title ?? phase.id}
+  </div>
+{/if}
diff --git a/src/features/workspaces/ui/HomeTileGrid.test.ts b/src/features/workspaces/ui/HomeTileGrid.test.ts
new file mode 100644
index 0000000..3229d4e
--- /dev/null
+++ b/src/features/workspaces/ui/HomeTileGrid.test.ts
@@ -0,0 +1,180 @@
+import type { WorkspaceEntry } from "@dispatch/wire";
+import { fireEvent, render, screen } from "@testing-library/svelte";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { geometryFor, type Placement } from "../logic/tile-layout";
+import type { WorkspaceStore } from "../store.svelte";
+import HomeTileGrid from "./HomeTileGrid.svelte";
+
+const WIDE = geometryFor(1920, 1080);
+
+function ws(overrides: Partial<WorkspaceEntry> = {}): WorkspaceEntry {
+  return {
+    id: "a",
+    title: "Workspace A",
+    defaultCwd: null,
+    defaultComputerId: null,
+    starred: false,
+    createdAt: 1,
+    lastActivityAt: 2,
+    conversationCount: 1,
+    ...overrides,
+  };
+}
+
+function placement(id: string, col: number, row: number): Placement {
+  return { id, col, row, colSpan: 1, rowSpan: 1 };
+}
+
+function fakeStore(): WorkspaceStore {
+  return {
+    rename: vi.fn(),
+  } as unknown as WorkspaceStore;
+}
+
+function baseProps() {
+  return {
+    geometry: WIDE,
+    workspacesById: new Map([
+      ["a", ws()],
+      ["b", ws({ id: "b", title: "Workspace B" })],
+    ]),
+    store: fakeStore(),
+    onOpen: vi.fn(),
+    onSelect: vi.fn(),
+    onReorder: vi.fn(),
+    onRenameEnd: vi.fn(),
+  };
+}
+
+describe("HomeTileGrid", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it("renders one tile per placement, positioned by the packed spans", () => {
+    const props = baseProps();
+    const { container } = render(HomeTileGrid, {
+      props: {
+        ...props,
+        placements: [placement("a", 1, 1), placement("b", 2, 1)],
+      },
+    });
+
+    expect(screen.getByRole("button", { name: "Open workspace Workspace A" })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Open workspace Workspace B" })).toBeInTheDocument();
+    const wrappers = container.querySelectorAll("[data-tile-id]");
+    expect(wrappers).toHaveLength(2);
+    expect(wrappers[0]?.getAttribute("style")).toContain("grid-column: 1 / span 1");
+    expect(wrappers[1]?.getAttribute("style")).toContain("grid-column: 2 / span 1");
+  });
+
+  it("a tap (press + release without moving) opens the workspace", async () => {
+    const props = baseProps();
+    render(HomeTileGrid, {
+      props: { ...props, placements: [placement("a", 1, 1)] },
+    });
+
+    const wrapper = screen.getByRole("button", { name: "Open workspace Workspace A" });
+    fireEvent.pointerDown(wrapper, { button: 0, clientX: 10, clientY: 10, pointerType: "mouse" });
+    fireEvent.pointerUp(wrapper);
+
+    expect(props.onOpen).toHaveBeenCalledWith("a");
+    expect(props.onSelect).not.toHaveBeenCalled();
+  });
+
+  it("right-click selects the tile", async () => {
+    const props = baseProps();
+    render(HomeTileGrid, {
+      props: { ...props, placements: [placement("a", 1, 1)] },
+    });
+
+    const wrapper = screen.getByRole("button", { name: "Open workspace Workspace A" });
+    fireEvent.contextMenu(wrapper);
+
+    expect(props.onSelect).toHaveBeenCalledWith("a");
+    expect(props.onOpen).not.toHaveBeenCalled();
+  });
+
+  it("dragging shows the transient ghost, and dropping reorders (when over a target)", async () => {
+    const props = baseProps();
+    const { container } = render(HomeTileGrid, {
+      props: { ...props, placements: [placement("a", 1, 1), placement("b", 2, 1)] },
+    });
+
+    const wrapper = screen.getByRole("button", { name: "Open workspace Workspace A" });
+    // jsdom has no elementFromPoint hit-testing → targetIndex stays -1 (no-op),
+    // but the GHOST must appear while dragging and disappear on drop.
+    Object.defineProperty(document, "elementFromPoint", {
+      configurable: true,
+      value: () => null,
+    });
+    fireEvent.pointerDown(wrapper, { button: 0, clientX: 10, clientY: 10, pointerType: "mouse" });
+    fireEvent.pointerMove(wrapper, { clientX: 80, clientY: 40 });
+
+    expect(container.querySelector(".pointer-events-none.fixed")).not.toBeNull();
+
+    fireEvent.pointerUp(wrapper);
+    expect(container.querySelector(".pointer-events-none.fixed")).toBeNull();
+    // No hit target → no reorder call.
+    expect(props.onReorder).not.toHaveBeenCalled();
+    // And no navigation either (a drag is not a tap).
+    expect(props.onOpen).not.toHaveBeenCalled();
+  });
+
+  it("a touch long-press lifts the tile and selects it (never opens)", async () => {
+    const props = baseProps();
+    render(HomeTileGrid, {
+      props: { ...props, placements: [placement("a", 1, 1)] },
+    });
+
+    const wrapper = screen.getByRole("button", { name: "Open workspace Workspace A" });
+    fireEvent.pointerDown(wrapper, {
+      button: 0,
+      clientX: 10,
+      clientY: 10,
+      pointerType: "touch",
+    });
+    await vi.advanceTimersByTimeAsync(500);
+
+    expect(props.onSelect).toHaveBeenCalledWith("a");
+    expect(props.onOpen).not.toHaveBeenCalled();
+  });
+
+  it("a touch drag that moves before the long-press cancels (scroll wins)", async () => {
+    const props = baseProps();
+    render(HomeTileGrid, {
+      props: { ...props, placements: [placement("a", 1, 1)] },
+    });
+
+    const wrapper = screen.getByRole("button", { name: "Open workspace Workspace A" });
+    fireEvent.pointerDown(wrapper, {
+      button: 0,
+      clientX: 10,
+      clientY: 10,
+      pointerType: "touch",
+    });
+    fireEvent.pointerMove(wrapper, { clientX: 10, clientY: 120 });
+    await vi.advanceTimersByTimeAsync(500);
+
+    expect(props.onSelect).not.toHaveBeenCalled();
+    expect(props.onOpen).not.toHaveBeenCalled();
+  });
+
+  it("previews a transient span for the resizing tile", () => {
+    const props = baseProps();
+    const { container } = render(HomeTileGrid, {
+      props: {
+        ...props,
+        placements: [placement("a", 1, 1)],
+        preview: { id: "a", colSpan: 3, rowSpan: 2 },
+      },
+    });
+
+    const wrapper = container.querySelector("[data-tile-id='a']");
+    expect(wrapper?.getAttribute("style")).toContain("span 3");
+    expect(wrapper?.getAttribute("style")).toContain("span 2");
+  });
+});
diff --git a/src/features/workspaces/ui/ResizePicker.svelte b/src/features/workspaces/ui/ResizePicker.svelte
new file mode 100644
index 0000000..e066519
--- /dev/null
+++ b/src/features/workspaces/ui/ResizePicker.svelte
@@ -0,0 +1,107 @@
+<script lang="ts">
+  import { onMount, untrack } from "svelte";
+  import type { GridGeometry, Span } from "../logic/tile-layout";
+
+  let {
+    geometry,
+    initial,
+    onPreview,
+    onCommit,
+    onCancel,
+  }: {
+    geometry: GridGeometry;
+    /** The tile's current (clamped) spans — the picker's starting cell. */
+    initial: Span;
+    /** Transiently ghost-preview the hovered footprint on the real grid. */
+    onPreview: (span: Span | null) => void;
+    onCommit: (colSpan: number, rowSpan: number) => void;
+    onCancel: () => void;
+  } = $props();
+
+  // The picker IS the span cap: wide = 4×2 small squares, tall = 2×2.
+  const cols = $derived(geometry.maxColSpan);
+  const rows = $derived(geometry.maxRowSpan);
+
+  // The currently hovered cell (c, r) — the highlighted rectangle spans
+  // 1..c × 1..r from the picker's top-left (insert-table style). The picker
+  // mounts fresh per resize session, so seeding from the prop is intended.
+  let hovered = $state({
+    colSpan: untrack(() => Math.min(initial.colSpan, cols)),
+    rowSpan: untrack(() => Math.min(initial.rowSpan, rows)),
+  });
+
+  function hover(colSpan: number, rowSpan: number): void {
+    hovered = { colSpan, rowSpan };
+    onPreview({ colSpan, rowSpan });
+  }
+
+  function commit(): void {
+    onCommit(hovered.colSpan, hovered.rowSpan);
+  }
+
+  function keydown(e: KeyboardEvent): void {
+    if (e.key === "Escape") {
+      e.preventDefault();
+      onCancel();
+      return;
+    }
+    if (e.key === "Enter") {
+      e.preventDefault();
+      commit();
+      return;
+    }
+    let dc = 0;
+    let dr = 0;
+    if (e.key === "ArrowRight") dc = 1;
+    else if (e.key === "ArrowLeft") dc = -1;
+    else if (e.key === "ArrowDown") dr = 1;
+    else if (e.key === "ArrowUp") dr = -1;
+    else return;
+    e.preventDefault();
+    hover(
+      Math.max(1, Math.min(cols, hovered.colSpan + dc)),
+      Math.max(1, Math.min(rows, hovered.rowSpan + dr)),
+    );
+  }
+
+  let root = $state<HTMLDivElement | undefined>();
+  onMount(() => root?.focus());
+</script>
+
+<!-- svelte-ignore a11y_no_noninteractive_element_interactions, a11y_no_noninteractive_tabindex -->
+<div
+  bind:this={root}
+  class="fixed inset-x-0 bottom-20 z-50 mx-auto flex w-max flex-col gap-2 rounded-box border border-base-content/20 bg-base-100 p-3 shadow-2xl outline-none"
+  role="group"
+  aria-label="Resize tile"
+  tabindex="0"
+  onkeydown={keydown}
+  onmouseleave={() => onPreview(null)}
+>
+  <p class="text-xs font-semibold uppercase opacity-60">Resize — click a size</p>
+  <div class="grid gap-1" style={`grid-template-columns: repeat(${cols}, 1.5rem);`}>
+    {#each Array.from({ length: rows }) as _, row (row)}
+      {#each Array.from({ length: cols }) as __, col (col)}
+        <button
+          type="button"
+          class={`size-6 border border-base-content/20 ${
+            col < hovered.colSpan && row < hovered.rowSpan
+              ? "bg-primary/60"
+              : col === hovered.colSpan - 1 && row === hovered.rowSpan - 1
+                ? "bg-primary/20"
+                : ""
+          }`}
+          aria-label={`Resize to ${col + 1} by ${row + 1}`}
+          onmouseenter={() => hover(col + 1, row + 1)}
+          onfocus={() => hover(col + 1, row + 1)}
+          onclick={() => {
+            hover(col + 1, row + 1);
+            commit();
+          }}
+        ></button>
+      {/each}
+    {/each}
+  </div>
+  <p class="text-center font-mono text-xs opacity-70">{hovered.colSpan} × {hovered.rowSpan}</p>
+  <p class="text-center text-[10px] opacity-50">Enter commits · Escape cancels</p>
+</div>
diff --git a/src/features/workspaces/ui/ResizePicker.test.ts b/src/features/workspaces/ui/ResizePicker.test.ts
new file mode 100644
index 0000000..796a556
--- /dev/null
+++ b/src/features/workspaces/ui/ResizePicker.test.ts
@@ -0,0 +1,88 @@
+import { render, screen } from "@testing-library/svelte";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+import { geometryFor } from "../logic/tile-layout";
+import ResizePicker from "./ResizePicker.svelte";
+
+const WIDE = geometryFor(1920, 1080);
+const TALL = geometryFor(390, 844);
+
+function props() {
+  return {
+    onPreview: vi.fn(),
+    onCommit: vi.fn(),
+    onCancel: vi.fn(),
+  };
+}
+
+describe("ResizePicker", () => {
+  it("renders one small square per cap (4×2 wide, 2×2 tall)", () => {
+    const p = props();
+    const wide = render(ResizePicker, {
+      props: { geometry: WIDE, initial: { colSpan: 1, rowSpan: 1 }, ...p },
+    });
+    expect(screen.getAllByRole("button")).toHaveLength(8);
+    wide.unmount();
+
+    render(ResizePicker, {
+      props: { geometry: TALL, initial: { colSpan: 1, rowSpan: 1 }, ...p },
+    });
+    expect(screen.getAllByRole("button")).toHaveLength(4);
+  });
+
+  it("hovering square (r, c) previews that rectangle", async () => {
+    const user = userEvent.setup();
+    const p = props();
+    render(ResizePicker, {
+      props: { geometry: WIDE, initial: { colSpan: 1, rowSpan: 1 }, ...p },
+    });
+
+    await user.hover(screen.getByRole("button", { name: "Resize to 3 by 2" }));
+    expect(p.onPreview).toHaveBeenCalledWith({ colSpan: 3, rowSpan: 2 });
+  });
+
+  it("clicking a square commits that size", async () => {
+    const user = userEvent.setup();
+    const p = props();
+    render(ResizePicker, {
+      props: { geometry: WIDE, initial: { colSpan: 1, rowSpan: 1 }, ...p },
+    });
+
+    await user.click(screen.getByRole("button", { name: "Resize to 2 by 1" }));
+    expect(p.onCommit).toHaveBeenCalledWith(2, 1);
+  });
+
+  it("arrow keys move within the picker, Enter commits, Escape cancels", async () => {
+    const user = userEvent.setup();
+    const p = props();
+    render(ResizePicker, {
+      props: { geometry: WIDE, initial: { colSpan: 2, rowSpan: 1 }, ...p },
+    });
+
+    await user.keyboard("{ArrowRight}");
+    expect(p.onPreview).toHaveBeenLastCalledWith({ colSpan: 3, rowSpan: 1 });
+    await user.keyboard("{ArrowDown}");
+    expect(p.onPreview).toHaveBeenLastCalledWith({ colSpan: 3, rowSpan: 2 });
+    await user.keyboard("{ArrowLeft}");
+    expect(p.onPreview).toHaveBeenLastCalledWith({ colSpan: 2, rowSpan: 2 });
+
+    await user.keyboard("{Enter}");
+    expect(p.onCommit).toHaveBeenCalledWith(2, 2);
+    expect(p.onCancel).not.toHaveBeenCalled();
+
+    await user.keyboard("{Escape}");
+    expect(p.onCancel).toHaveBeenCalledTimes(1);
+  });
+
+  it("leaving the picker clears the preview", async () => {
+    const user = userEvent.setup();
+    const p = props();
+    render(ResizePicker, {
+      props: { geometry: WIDE, initial: { colSpan: 1, rowSpan: 1 }, ...p },
+    });
+
+    await user.hover(screen.getByRole("button", { name: "Resize to 4 by 2" }));
+    await user.unhover(screen.getByRole("button", { name: "Resize to 4 by 2" }));
+    expect(p.onPreview).toHaveBeenLastCalledWith(null);
+  });
+});
diff --git a/src/features/workspaces/ui/TileActionBar.svelte b/src/features/workspaces/ui/TileActionBar.svelte
new file mode 100644
index 0000000..0d8bef5
--- /dev/null
+++ b/src/features/workspaces/ui/TileActionBar.svelte
@@ -0,0 +1,69 @@
+<script lang="ts">
+  import { fly } from "svelte/transition";
+  import type { WorkspaceEntry } from "@dispatch/wire";
+
+  let {
+    ws,
+    withPlugins = false,
+    onOpen,
+    onRename,
+    onResize,
+    onToggleStar,
+    onDetails,
+    onPlugins,
+    onDelete,
+    onClose,
+  }: {
+    ws: WorkspaceEntry;
+    /** The plugins port is present → the Plugins action renders. */
+    withPlugins?: boolean;
+    onOpen: () => void;
+    onRename: () => void;
+    onResize: () => void;
+    onToggleStar: () => void;
+    /** The details flyout (default cwd + default computer). */
+    onDetails: () => void;
+    onPlugins: () => void;
+    onDelete: () => void;
+    onClose: () => void;
+  } = $props();
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions, a11y_click_events_have_key_events -->
+<div
+  class="fixed inset-x-0 bottom-0 z-40 flex justify-center p-4"
+  transition:fly={{ y: 80, duration: 150 }}
+  onclick={(e) => {
+    // The bar owns its clicks — don't let them deselect via the backdrop.
+    e.stopPropagation();
+  }}
+>
+  <div
+    class="flex flex-wrap items-center justify-center gap-1 rounded-box border border-base-content/15 bg-base-100 p-2 shadow-2xl"
+    role="toolbar"
+    aria-label={`Actions for ${ws.title}`}
+  >
+    <button type="button" class="btn btn-primary btn-sm" onclick={onOpen}>Open</button>
+    <button type="button" class="btn btn-ghost btn-sm" onclick={onRename}>Rename</button>
+    <button type="button" class="btn btn-ghost btn-sm" onclick={onResize}>Resize</button>
+    <button type="button" class="btn btn-ghost btn-sm" onclick={onDetails}>Details</button>
+    <button type="button" class="btn btn-ghost btn-sm" onclick={onToggleStar}>
+      {ws.starred ? "Unstar" : "Star"}
+    </button>
+    {#if withPlugins}
+      <button type="button" class="btn btn-ghost btn-sm" onclick={onPlugins}>Plugins</button>
+    {/if}
+    <button
+      type="button"
+      class="btn btn-ghost btn-sm text-error"
+      onclick={onDelete}>Delete</button
+    >
+    <button
+      type="button"
+      class="btn btn-circle btn-ghost btn-sm"
+      aria-label="Close actions"
+      title="Close"
+      onclick={onClose}>✕</button
+    >
+  </div>
+</div>
diff --git a/src/features/workspaces/ui/TileActionBar.test.ts b/src/features/workspaces/ui/TileActionBar.test.ts
new file mode 100644
index 0000000..4b0377e
--- /dev/null
+++ b/src/features/workspaces/ui/TileActionBar.test.ts
@@ -0,0 +1,88 @@
+import type { WorkspaceEntry } from "@dispatch/wire";
+import { render, screen } from "@testing-library/svelte";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+import TileActionBar from "./TileActionBar.svelte";
+
+function ws(overrides: Partial<WorkspaceEntry> = {}): WorkspaceEntry {
+  return {
+    id: "my-ws",
+    title: "My Workspace",
+    defaultCwd: null,
+    defaultComputerId: null,
+    starred: false,
+    createdAt: 1,
+    lastActivityAt: 2,
+    conversationCount: 0,
+    ...overrides,
+  };
+}
+
+function handlers() {
+  return {
+    onOpen: vi.fn(),
+    onRename: vi.fn(),
+    onResize: vi.fn(),
+    onToggleStar: vi.fn(),
+    onDetails: vi.fn(),
+    onPlugins: vi.fn(),
+    onDelete: vi.fn(),
+    onClose: vi.fn(),
+  };
+}
+
+describe("TileActionBar", () => {
+  it("renders the Open · Rename · Resize · Star · Details · Delete actions", () => {
+    const h = handlers();
+    render(TileActionBar, { props: { ws: ws(), ...h } });
+    expect(screen.getByRole("button", { name: "Open" })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Rename" })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Resize" })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Star" })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Details" })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Delete" })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Close actions" })).toBeInTheDocument();
+  });
+
+  it("omits Plugins when no plugins port is present, renders it when one is", () => {
+    const h = handlers();
+    const without = render(TileActionBar, { props: { ws: ws(), ...h } });
+    expect(without.queryByRole("button", { name: "Plugins" })).toBeNull();
+    without.unmount();
+
+    render(TileActionBar, { props: { ws: ws(), withPlugins: true, ...h } });
+    expect(screen.getByRole("button", { name: "Plugins" })).toBeInTheDocument();
+  });
+
+  it("labels the star action by the current state (Star ↔ Unstar)", () => {
+    const h = handlers();
+    const unstarred = render(TileActionBar, { props: { ws: ws({ starred: false }), ...h } });
+    expect(screen.getByRole("button", { name: "Star" })).toBeInTheDocument();
+    unstarred.unmount();
+
+    render(TileActionBar, { props: { ws: ws({ starred: true }), ...h } });
+    expect(screen.getByRole("button", { name: "Unstar" })).toBeInTheDocument();
+  });
+
+  it("dispatches each action", async () => {
+    const user = userEvent.setup();
+    const h = handlers();
+    render(TileActionBar, { props: { ws: ws(), ...h } });
+
+    await user.click(screen.getByRole("button", { name: "Open" }));
+    await user.click(screen.getByRole("button", { name: "Rename" }));
+    await user.click(screen.getByRole("button", { name: "Resize" }));
+    await user.click(screen.getByRole("button", { name: "Star" }));
+    await user.click(screen.getByRole("button", { name: "Details" }));
+    await user.click(screen.getByRole("button", { name: "Delete" }));
+    await user.click(screen.getByRole("button", { name: "Close actions" }));
+
+    expect(h.onOpen).toHaveBeenCalledTimes(1);
+    expect(h.onRename).toHaveBeenCalledTimes(1);
+    expect(h.onResize).toHaveBeenCalledTimes(1);
+    expect(h.onToggleStar).toHaveBeenCalledTimes(1);
+    expect(h.onDetails).toHaveBeenCalledTimes(1);
+    expect(h.onDelete).toHaveBeenCalledTimes(1);
+    expect(h.onClose).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/src/features/workspaces/ui/WorkspaceCard.svelte b/src/features/workspaces/ui/WorkspaceCard.svelte
deleted file mode 100644
index 8c004aa..0000000
--- a/src/features/workspaces/ui/WorkspaceCard.svelte
+++ /dev/null
@@ -1,319 +0,0 @@
-<script lang="ts">
-  import type { ComputerEntry, WorkspaceEntry } from "@dispatch/wire";
-  import { untrack } from "svelte";
-  import { WorkspacePluginModal, type PluginsStore, type WorkspaceLayoutPort } from "../../plugins";
-  import type { WorkspaceStore } from "../store.svelte";
-  import { relativeTime } from "../logic/view-model";
-  import { workspacePath } from "../logic/route";
-  import ComputerSelect from "../../computer/ui/ComputerSelect.svelte";
-
-  let {
-    ws,
-    store,
-    onNavigate,
-    computers,
-    hasActive,
-    plugins,
-    layout,
-  }: {
-    ws: WorkspaceEntry;
-    store: WorkspaceStore;
-    onNavigate: (path: string) => void;
-    /** Discovered computers (`GET /computers`), for the default-computer dropdown. */
-    computers: readonly ComputerEntry[];
-    /**
-     * Optional port: returns whether the workspace has at least one active
-     * (generating / queued) conversation — drives a loading-dots indicator on
-     * the card. Wired by the composition root to the app store's
-     * `workspaceHasActiveConversations`. Absent → no indicator (e.g. tests).
-     */
-    hasActive?: (workspaceId: string) => boolean;
-    /**
-     * Optional plugin store (plan 07): when present, the card renders a
-     * "Plugins" button opening THIS workspace's enablement modal. Absent
-     * (tests) → no button.
-     */
-    plugins?: PluginsStore;
-    /**
-     * Optional layout port (plan 04 §4.4): forwarded to the plugins modal
-     * for the "Reset layout to default" affordance. Absent → the modal's
-     * layout section doesn't render.
-     */
-    layout?: WorkspaceLayoutPort;
-  } = $props();
-
-  // Whether at least one conversation in this workspace is currently active
-  // (generating). Reactive: the composition-root port reads the app store's
-  // reactive tab set + lifecycle statuses, so this re-derives on change.
-  const active = $derived(hasActive?.(ws.id) ?? false);
-
-  // ── Title: double-click to rename inline ──────────────────────────────────
-  let editingTitle = $state(false);
-  let titleDraft = $state("");
-  let titleInput = $state<HTMLInputElement | undefined>();
-  let titleError = $state<string | null>(null);
-
-  function startEditTitle(): void {
-    titleDraft = ws.title;
-    titleError = null;
-    editingTitle = true;
-    queueMicrotask(() => titleInput?.focus());
-  }
-
-  async function saveTitle(): Promise<void> {
-    if (!editingTitle) return;
-    const title = titleDraft.trim();
-    editingTitle = false;
-    if (title === "" || title === ws.title) return;
-    const result = await store.rename(ws.id, title);
-    if (!result.ok) titleError = result.error;
-  }
-
-  function cancelTitle(): void {
-    editingTitle = false;
-    titleError = null;
-  }
-
-  // ── Default cwd: inline input ─────────────────────────────────────────────
-  let cwdDraft = $state(untrack(() => ws.defaultCwd ?? ""));
-  // Reseed when the backend value changes (e.g., after a save or an external
-  // refresh). Mid-edit (same value) does NOT re-run, so typing is never clobbered.
-  $effect(() => {
-    cwdDraft = ws.defaultCwd ?? "";
-  });
-
-  const cwdDirty = $derived(cwdDraft.trim() !== (ws.defaultCwd ?? ""));
-  let savingCwd = $state(false);
-  let cwdError = $state<string | null>(null);
-
-  async function saveCwd(): Promise<void> {
-    if (!cwdDirty || savingCwd) return;
-    savingCwd = true;
-    cwdError = null;
-    const cwd = cwdDraft.trim();
-    const result = await store.setDefaultCwd(ws.id, cwd === "" ? null : cwd);
-    savingCwd = false;
-    if (!result.ok) cwdError = result.error;
-  }
-
-  // ── Default computer: dropdown (Local / discovered SSH aliases) ────────────
-  let savingComputer = $state(false);
-  let computerError = $state<string | null>(null);
-
-  async function saveComputer(computerId: string | null): Promise<void> {
-    if (savingComputer) return;
-    // No-op when unchanged (the select only fires on a real change, but guard).
-    if (computerId === (ws.defaultComputerId ?? null)) return;
-    savingComputer = true;
-    computerError = null;
-    const result = await store.setDefaultComputer(ws.id, computerId);
-    savingComputer = false;
-    if (!result.ok) computerError = result.error;
-  }
-
-  // ── Star (concurrency priority) ──────────────────────────────────────────────
-  let savingStar = $state(false);
-  let starError = $state<string | null>(null);
-
-  async function toggleStar(): Promise<void> {
-    if (savingStar) return;
-    savingStar = true;
-    starError = null;
-    try {
-      // Optimistic: the store flips `starred` immediately and re-sorts; revert
-      // on error is handled there. We read `ws.starred` for the target value.
-      const result = await store.setStarred(ws.id, !ws.starred);
-      if (!result.ok) starError = result.error;
-    } catch (err) {
-      // A throw (e.g. a rejected effect) — surface it; the store already
-      // reverted the optimistic flip if it got far enough to apply it.
-      starError = err instanceof Error ? err.message : "Star toggle failed";
-    } finally {
-      savingStar = false;
-    }
-  }
-
-  // ── Per-workspace plugin modal (plan 07 §7.3) ─────────────────────────────
-  // Enable/disable what THIS workspace uses. Unloaded plugins are greyed out
-  // + unselectable there — only the global manager (page header) loads code.
-  let pluginsOpen = $state(false);
-
-  // ── Delete ─────────────────────────────────────────────────────────────────
-  let deleting = $state(false);
-
-  async function handleDelete(): Promise<void> {
-    if (
-      !window.confirm(
-        `Delete workspace "${ws.title}"? Its conversations will be closed and moved to "default".`,
-      )
-    ) {
-      return;
-    }
-    deleting = true;
-    await store.remove(ws.id);
-    deleting = false;
-  }
-</script>
-
-<li class="flex flex-col gap-2 rounded-box border border-primary bg-primary/10 p-3">
-  <div class="flex items-center gap-2">
-    {#if editingTitle}
-      <input
-        bind:this={titleInput}
-        bind:value={titleDraft}
-        class="input input-bordered input-sm flex-1"
-        aria-label="Workspace title"
-        onkeydown={(e) => {
-          if (e.key === "Enter") saveTitle();
-          else if (e.key === "Escape") cancelTitle();
-        }}
-        onblur={saveTitle}
-      />
-    {:else}
-      <!-- svelte-ignore a11y_no_static_element_interactions, a11y_click_events_have_key_events -->
-      <span
-        class="flex-1 cursor-default truncate font-semibold"
-        title="Double-click to rename"
-        ondblclick={startEditTitle}>{ws.title}</span
-      >
-    {/if}
-    {#if active}
-      <span
-        class="loading loading-dots loading-xs shrink-0 text-primary"
-        aria-label="Workspace has active conversations"
-        title="A conversation in this workspace is generating"></span
-      >
-    {/if}
-    <span class="font-mono text-xs opacity-50">/{ws.id}</span>
-    <button
-      type="button"
-      class="btn btn-ghost btn-xs px-1"
-      disabled={savingStar}
-      aria-pressed={ws.starred}
-      aria-label={ws.starred ? "Unstar workspace" : "Star workspace"}
-      title={ws.starred
-        ? "Starred — its agents get concurrency priority. Click to unstar."
-        : "Star this workspace to give its agents concurrency priority."}
-      onclick={toggleStar}
-    >
-      {#if savingStar}
-        <span class="loading loading-spinner loading-xs"></span>
-      {:else if ws.starred}
-        <span class="text-warning" aria-hidden="true">★</span>
-      {:else}
-        <span class="opacity-40" aria-hidden="true">☆</span>
-      {/if}
-    </button>
-    <span class="ml-auto text-xs opacity-50">
-      {ws.conversationCount}
-      {ws.conversationCount === 1 ? "conversation" : "conversations"}
-      · {relativeTime(ws.lastActivityAt, Date.now())}
-    </span>
-    <button
-      type="button"
-      class="btn btn-ghost btn-xs"
-      disabled={deleting}
-      title="Delete workspace"
-      aria-label="Delete workspace"
-      onclick={handleDelete}
-    >
-      {#if deleting}
-        <span class="loading loading-spinner loading-xs"></span>
-      {:else}
-        ✕
-      {/if}
-    </button>
-  </div>
-
-  {#if titleError}
-    <p class="text-xs text-error">{titleError}</p>
-  {/if}
-
-  {#if starError}
-    <p class="text-xs text-error">{starError}</p>
-  {/if}
-
-  <div class="flex items-center gap-2">
-    <span class="w-8 shrink-0 text-xs opacity-60">cwd</span>
-    <input
-      type="text"
-      class="input input-bordered input-sm flex-1 font-mono text-xs"
-      placeholder="inherits the server default"
-      bind:value={cwdDraft}
-      aria-label="Default working directory"
-      onkeydown={(e) => {
-        if (e.key === "Enter") saveCwd();
-      }}
-    />
-    <button
-      type="button"
-      class="btn btn-primary btn-xs"
-      disabled={!cwdDirty || savingCwd}
-      onclick={saveCwd}
-    >
-      {#if savingCwd}
-        <span class="loading loading-spinner loading-xs"></span>
-      {:else}
-        Set
-      {/if}
-    </button>
-  </div>
-
-  <div class="flex items-center gap-2">
-    <span class="w-8 shrink-0 text-xs opacity-60">ssh</span>
-    <ComputerSelect
-      value={ws.defaultComputerId}
-      {computers}
-      disabled={savingComputer}
-      onSelect={saveComputer}
-    />
-    {#if savingComputer}
-      <span class="loading loading-spinner loading-xs shrink-0"></span>
-    {/if}
-  </div>
-
-  <div class="flex justify-start">
-    <a
-      class="btn"
-      href={workspacePath(ws.id)}
-      onclick={(e) => {
-        e.preventDefault();
-        onNavigate(workspacePath(ws.id));
-      }}
-    >
-      Open
-    </a>
-    {#if plugins}
-      <button
-        type="button"
-        class="btn btn-outline btn-sm ml-2"
-        onclick={() => (pluginsOpen = true)}
-        title="Choose which plugins this workspace uses"
-      >
-        Plugins
-      </button>
-    {/if}
-  </div>
-
-  {#if cwdError}
-    <p class="text-xs text-error">{cwdError}</p>
-  {:else if !cwdDirty && !ws.defaultCwd}
-    <p class="text-xs opacity-50">No default cwd set — conversations inherit the server default.</p>
-  {/if}
-
-  {#if computerError}
-    <p class="text-xs text-error">{computerError}</p>
-  {:else if !ws.defaultComputerId}
-    <p class="text-xs opacity-50">No default computer — conversations run locally (no SSH).</p>
-  {/if}
-</li>
-
-{#if pluginsOpen && plugins}
-  <WorkspacePluginModal
-    workspaceId={ws.id}
-    workspaceTitle={ws.title}
-    {plugins}
-    {...(layout ? { layout } : {})}
-    onClose={() => (pluginsOpen = false)}
-  />
-{/if}
diff --git a/src/features/workspaces/ui/WorkspaceCard.test.ts b/src/features/workspaces/ui/WorkspaceCard.test.ts
deleted file mode 100644
index 72f4e60..0000000
--- a/src/features/workspaces/ui/WorkspaceCard.test.ts
+++ /dev/null
@@ -1,305 +0,0 @@
-import type { WorkspaceEntry } from "@dispatch/wire";
-import { render, screen } from "@testing-library/svelte";
-import userEvent from "@testing-library/user-event";
-import { describe, expect, it, vi } from "vitest";
-import type { WorkspaceResult } from "../adapter/http";
-import type { WorkspaceStore } from "../store.svelte";
-import WorkspaceCard from "./WorkspaceCard.svelte";
-
-function fakeEntry(overrides: Partial<WorkspaceEntry> = {}): WorkspaceEntry {
-  return {
-    id: "my-ws",
-    title: "My Workspace",
-    defaultCwd: null,
-    defaultComputerId: null,
-    starred: false,
-    createdAt: 1,
-    lastActivityAt: 2,
-    conversationCount: 3,
-    ...overrides,
-  };
-}
-
-/** A fake store that records calls + resolves ok. */
-function fakeStore() {
-  return {
-    rename: vi.fn(
-      async (id: string, _title: string): Promise<WorkspaceResult<WorkspaceEntry>> => ({
-        ok: true,
-        value: fakeEntry({ id, title: _title }),
-      }),
-    ),
-    setDefaultCwd: vi.fn(
-      async (id: string, defaultCwd: string | null): Promise<WorkspaceResult<WorkspaceEntry>> => ({
-        ok: true,
-        value: fakeEntry({ id, defaultCwd }),
-      }),
-    ),
-    setDefaultComputer: vi.fn(
-      async (id: string, computerId: string | null): Promise<WorkspaceResult<WorkspaceEntry>> => ({
-        ok: true,
-        value: fakeEntry({ id, defaultComputerId: computerId }),
-      }),
-    ),
-    setStarred: vi.fn(
-      async (id: string, starred: boolean): Promise<WorkspaceResult<WorkspaceEntry>> => ({
-        ok: true,
-        value: fakeEntry({ id, starred }),
-      }),
-    ),
-    remove: vi.fn(
-      async (): Promise<WorkspaceResult<{ closedCount: number }>> => ({
-        ok: true,
-        value: { closedCount: 0 },
-      }),
-    ),
-  };
-}
-
-describe("WorkspaceCard", () => {
-  it("renders the title, slug, and an Open link", () => {
-    const store = fakeStore() as unknown as WorkspaceStore;
-    render(WorkspaceCard, {
-      props: { ws: fakeEntry(), store, onNavigate: vi.fn(), computers: [] },
-    });
-    expect(screen.getByText("My Workspace")).toBeInTheDocument();
-    expect(screen.getByText("/my-ws")).toBeInTheDocument();
-    expect(screen.getByRole("link", { name: "Open" })).toHaveAttribute("href", "/my-ws");
-  });
-
-  it("double-clicking the title reveals an edit input", async () => {
-    const user = userEvent.setup();
-    const store = fakeStore() as unknown as WorkspaceStore;
-    render(WorkspaceCard, {
-      props: { ws: fakeEntry(), store, onNavigate: vi.fn(), computers: [] },
-    });
-
-    await user.dblClick(screen.getByText("My Workspace"));
-    expect(screen.getByLabelText("Workspace title")).toHaveValue("My Workspace");
-  });
-
-  it("renames via the store on Enter", async () => {
-    const user = userEvent.setup();
-    const store = fakeStore() as unknown as WorkspaceStore;
-    render(WorkspaceCard, {
-      props: { ws: fakeEntry(), store, onNavigate: vi.fn(), computers: [] },
-    });
-
-    await user.dblClick(screen.getByText("My Workspace"));
-    const input = screen.getByLabelText("Workspace title");
-    await user.clear(input);
-    await user.type(input, "Renamed{Enter}");
-
-    expect(store.rename).toHaveBeenCalledWith("my-ws", "Renamed");
-  });
-
-  it("enables Set only when the cwd differs, then saves it", async () => {
-    const user = userEvent.setup();
-    const store = fakeStore() as unknown as WorkspaceStore;
-    render(WorkspaceCard, {
-      props: { ws: fakeEntry({ defaultCwd: "/old" }), store, onNavigate: vi.fn(), computers: [] },
-    });
-
-    const input = screen.getByLabelText("Default working directory");
-    expect(input).toHaveValue("/old");
-    expect(screen.getByRole("button", { name: "Set" })).toBeDisabled();
-
-    await user.clear(input);
-    await user.type(input, "/new/path");
-    expect(screen.getByRole("button", { name: "Set" })).toBeEnabled();
-
-    await user.click(screen.getByRole("button", { name: "Set" }));
-    expect(store.setDefaultCwd).toHaveBeenCalledWith("my-ws", "/new/path");
-  });
-
-  it("clears the cwd to null when saved empty (inherits the server default)", async () => {
-    const user = userEvent.setup();
-    const store = fakeStore() as unknown as WorkspaceStore;
-    render(WorkspaceCard, {
-      props: { ws: fakeEntry({ defaultCwd: "/old" }), store, onNavigate: vi.fn(), computers: [] },
-    });
-
-    const input = screen.getByLabelText("Default working directory");
-    await user.clear(input);
-    await user.click(screen.getByRole("button", { name: "Set" }));
-
-    expect(store.setDefaultCwd).toHaveBeenCalledWith("my-ws", null);
-  });
-
-  it("the Open link navigates to the workspace in the same tab (SPA navigation, no new tab)", async () => {
-    const user = userEvent.setup();
-    const store = fakeStore() as unknown as WorkspaceStore;
-    const onNavigate = vi.fn();
-    render(WorkspaceCard, { props: { ws: fakeEntry(), store, onNavigate, computers: [] } });
-
-    const open = screen.getByRole("link", { name: "Open" });
-    // Still a real link (progressive enhancement): href points at the workspace.
-    expect(open).toHaveAttribute("href", "/my-ws");
-    // But it no longer opens a new browser tab.
-    expect(open).not.toHaveAttribute("target", "_blank");
-    // Clicking navigates in-place via the SPA callback.
-    await user.click(open);
-    expect(onNavigate).toHaveBeenCalledTimes(1);
-    expect(onNavigate).toHaveBeenCalledWith("/my-ws");
-  });
-
-  // ── Active indicator (loading dots) ──────────────────────────────────────
-
-  it("shows no loading-dots when no hasActive port is given", () => {
-    const store = fakeStore() as unknown as WorkspaceStore;
-    const { container } = render(WorkspaceCard, {
-      props: { ws: fakeEntry(), store, onNavigate: vi.fn(), computers: [] },
-    });
-    expect(container.querySelector(".loading-dots")).toBeNull();
-  });
-
-  it("shows no loading-dots when hasActive returns false", () => {
-    const store = fakeStore() as unknown as WorkspaceStore;
-    const { container } = render(WorkspaceCard, {
-      props: {
-        ws: fakeEntry(),
-        store,
-        onNavigate: vi.fn(),
-        computers: [],
-        hasActive: () => false,
-      },
-    });
-    expect(container.querySelector(".loading-dots")).toBeNull();
-  });
-
-  it("shows loading-dots when hasActive returns true", () => {
-    const store = fakeStore() as unknown as WorkspaceStore;
-    const { container } = render(WorkspaceCard, {
-      props: {
-        ws: fakeEntry(),
-        store,
-        onNavigate: vi.fn(),
-        computers: [],
-        hasActive: () => true,
-      },
-    });
-    const dots = container.querySelector(".loading-dots");
-    expect(dots).not.toBeNull();
-    // Accessible label ties the indicator to the workspace-active concept.
-    expect(dots?.getAttribute("aria-label")).toBe("Workspace has active conversations");
-  });
-
-  it("forwards the workspace id to hasActive", () => {
-    const store = fakeStore() as unknown as WorkspaceStore;
-    const seen: string[] = [];
-    render(WorkspaceCard, {
-      props: {
-        ws: fakeEntry({ id: "proj-x" }),
-        store,
-        onNavigate: vi.fn(),
-        computers: [],
-        hasActive: (id: string) => {
-          seen.push(id);
-          return false;
-        },
-      },
-    });
-    expect(seen).toEqual(["proj-x"]);
-  });
-
-  it("renders an outline star button for an unstarred workspace", () => {
-    const store = fakeStore() as unknown as WorkspaceStore;
-    render(WorkspaceCard, {
-      props: { ws: fakeEntry({ starred: false }), store, onNavigate: vi.fn(), computers: [] },
-    });
-    const star = screen.getByRole("button", { name: "Star workspace" });
-    expect(star).toHaveAttribute("aria-pressed", "false");
-  });
-
-  it("renders a filled star button for a starred workspace", () => {
-    const store = fakeStore() as unknown as WorkspaceStore;
-    render(WorkspaceCard, {
-      props: { ws: fakeEntry({ starred: true }), store, onNavigate: vi.fn(), computers: [] },
-    });
-    const star = screen.getByRole("button", { name: "Unstar workspace" });
-    expect(star).toHaveAttribute("aria-pressed", "true");
-  });
-
-  it("toggles the star via the store on click", async () => {
-    const user = userEvent.setup();
-    const store = fakeStore() as unknown as WorkspaceStore;
-    render(WorkspaceCard, {
-      props: { ws: fakeEntry({ starred: false }), store, onNavigate: vi.fn(), computers: [] },
-    });
-
-    await user.click(screen.getByRole("button", { name: "Star workspace" }));
-    expect(store.setStarred).toHaveBeenCalledWith("my-ws", true);
-  });
-
-  it("clicking a starred workspace's star calls setStarred(id, false)", async () => {
-    const user = userEvent.setup();
-    const store = fakeStore() as unknown as WorkspaceStore;
-    render(WorkspaceCard, {
-      props: { ws: fakeEntry({ starred: true }), store, onNavigate: vi.fn(), computers: [] },
-    });
-
-    await user.click(screen.getByRole("button", { name: "Unstar workspace" }));
-    expect(store.setStarred).toHaveBeenCalledWith("my-ws", false);
-  });
-
-  it("renders no star error on a successful toggle", async () => {
-    const user = userEvent.setup();
-    const store = fakeStore() as unknown as WorkspaceStore;
-    render(WorkspaceCard, {
-      props: { ws: fakeEntry({ starred: false }), store, onNavigate: vi.fn(), computers: [] },
-    });
-
-    await user.click(screen.getByRole("button", { name: "Star workspace" }));
-    expect(screen.queryByText(/Star toggle failed/i)).not.toBeInTheDocument();
-  });
-
-  it("shows an inline error when setStarred fails (result.ok false)", async () => {
-    const user = userEvent.setup();
-    const store = fakeStore() as unknown as WorkspaceStore;
-    // The store reverts the optimistic flip on failure, so the entry's
-    // `starred` stays false — fake the revert by returning ok:false unchanged.
-    store.setStarred = vi.fn(
-      async (): Promise<WorkspaceResult<WorkspaceEntry>> => ({ ok: false, error: "boom" }),
-    );
-    render(WorkspaceCard, {
-      props: { ws: fakeEntry({ starred: false }), store, onNavigate: vi.fn(), computers: [] },
-    });
-
-    await user.click(screen.getByRole("button", { name: "Star workspace" }));
-
-    expect(screen.getByText("boom")).toBeInTheDocument();
-  });
-
-  it("re-enables the star button after a failure (savingStar resets)", async () => {
-    const user = userEvent.setup();
-    const store = fakeStore() as unknown as WorkspaceStore;
-    store.setStarred = vi.fn(
-      async (): Promise<WorkspaceResult<WorkspaceEntry>> => ({ ok: false, error: "boom" }),
-    );
-    render(WorkspaceCard, {
-      props: { ws: fakeEntry({ starred: false }), store, onNavigate: vi.fn(), computers: [] },
-    });
-
-    const star = screen.getByRole("button", { name: "Star workspace" });
-    await user.click(star);
-    // After the failed toggle, the button is NOT disabled (savingStar reset).
-    expect(star).not.toBeDisabled();
-  });
-
-  it("re-enables the star button even when setStarred throws", async () => {
-    const user = userEvent.setup();
-    const store = fakeStore() as unknown as WorkspaceStore;
-    store.setStarred = vi.fn(async (): Promise<WorkspaceResult<WorkspaceEntry>> => {
-      throw new Error("network");
-    });
-    render(WorkspaceCard, {
-      props: { ws: fakeEntry({ starred: false }), store, onNavigate: vi.fn(), computers: [] },
-    });
-
-    const star = screen.getByRole("button", { name: "Star workspace" });
-    await user.click(star);
-    // savingStar must reset via try/finally even on a throw.
-    expect(star).not.toBeDisabled();
-    expect(screen.getByText("network")).toBeInTheDocument();
-  });
-});
diff --git a/src/features/workspaces/ui/WorkspaceDetails.svelte b/src/features/workspaces/ui/WorkspaceDetails.svelte
new file mode 100644
index 0000000..6595725
--- /dev/null
+++ b/src/features/workspaces/ui/WorkspaceDetails.svelte
@@ -0,0 +1,132 @@
+<script lang="ts">
+  import { untrack } from "svelte";
+  import type { ComputerEntry, WorkspaceEntry } from "@dispatch/wire";
+  import type { WorkspaceStore } from "../store.svelte";
+  import ComputerSelect from "../../computer/ui/ComputerSelect.svelte";
+
+  let {
+    ws,
+    store,
+    computers,
+    onClose,
+  }: {
+    ws: WorkspaceEntry;
+    store: WorkspaceStore;
+    /** Discovered computers (`GET /computers`), for the default-computer dropdown. */
+    computers: readonly ComputerEntry[];
+    onClose: () => void;
+  } = $props();
+
+  // ── Default cwd: input + Set (semantics preserved from the WorkspaceCard) ──
+  let cwdDraft = $state(untrack(() => ws.defaultCwd ?? ""));
+  // Reseed when the backend value changes (e.g., after a save or an external
+  // refresh). Mid-edit (same value) does NOT re-run, so typing is never clobbered.
+  $effect(() => {
+    cwdDraft = ws.defaultCwd ?? "";
+  });
+
+  const cwdDirty = $derived(cwdDraft.trim() !== (ws.defaultCwd ?? ""));
+  let savingCwd = $state(false);
+  let cwdError = $state<string | null>(null);
+
+  async function saveCwd(): Promise<void> {
+    if (!cwdDirty || savingCwd) return;
+    savingCwd = true;
+    cwdError = null;
+    const cwd = cwdDraft.trim();
+    const result = await store.setDefaultCwd(ws.id, cwd === "" ? null : cwd);
+    savingCwd = false;
+    if (!result.ok) cwdError = result.error;
+  }
+
+  // ── Default computer: dropdown (Local / discovered SSH aliases) ────────────
+  let savingComputer = $state(false);
+  let computerError = $state<string | null>(null);
+
+  async function saveComputer(computerId: string | null): Promise<void> {
+    if (savingComputer) return;
+    // No-op when unchanged (the select only fires on a real change, but guard).
+    if (computerId === (ws.defaultComputerId ?? null)) return;
+    savingComputer = true;
+    computerError = null;
+    const result = await store.setDefaultComputer(ws.id, computerId);
+    savingComputer = false;
+    if (!result.ok) computerError = result.error;
+  }
+</script>
+
+<div class="modal modal-open" role="dialog" aria-label={`Workspace details: ${ws.title}`}>
+  <div class="modal-box">
+    <div class="flex items-start justify-between gap-2">
+      <div>
+        <h2 class="text-lg font-bold">{ws.title}</h2>
+        <p class="font-mono text-xs opacity-50">/{ws.id}</p>
+      </div>
+      <button
+        type="button"
+        class="btn btn-circle btn-ghost btn-sm"
+        aria-label="Close details"
+        onclick={onClose}>✕</button
+      >
+    </div>
+
+    <div class="mt-4 flex flex-col gap-3">
+      <div class="flex items-center gap-2">
+        <span class="w-8 shrink-0 text-xs opacity-60">cwd</span>
+        <input
+          type="text"
+          class="input input-bordered input-sm flex-1 font-mono text-xs"
+          placeholder="inherits the server default"
+          bind:value={cwdDraft}
+          aria-label="Default working directory"
+          onkeydown={(e) => {
+            if (e.key === "Enter") void saveCwd();
+          }}
+        />
+        <button
+          type="button"
+          class="btn btn-primary btn-xs"
+          disabled={!cwdDirty || savingCwd}
+          onclick={() => void saveCwd()}
+        >
+          {#if savingCwd}
+            <span class="loading loading-spinner loading-xs"></span>
+          {:else}
+            Set
+          {/if}
+        </button>
+      </div>
+
+      {#if cwdError}
+        <p class="text-xs text-error">{cwdError}</p>
+      {:else if !cwdDirty && !ws.defaultCwd}
+        <p class="text-xs opacity-50">No default cwd set — conversations inherit the server default.</p>
+      {/if}
+
+      <div class="flex items-center gap-2">
+        <span class="w-8 shrink-0 text-xs opacity-60">ssh</span>
+        <ComputerSelect
+          value={ws.defaultComputerId}
+          {computers}
+          disabled={savingComputer}
+          onSelect={(id) => void saveComputer(id)}
+        />
+        {#if savingComputer}
+          <span class="loading loading-spinner loading-xs shrink-0"></span>
+        {/if}
+      </div>
+
+      {#if computerError}
+        <p class="text-xs text-error">{computerError}</p>
+      {:else if !ws.defaultComputerId}
+        <p class="text-xs opacity-50">No default computer — conversations run locally (no SSH).</p>
+      {/if}
+    </div>
+  </div>
+  <!-- Click outside closes. -->
+  <button
+    type="button"
+    class="modal-backdrop"
+    aria-label="Close details backdrop"
+    onclick={onClose}></button>
+</div>
diff --git a/src/features/workspaces/ui/WorkspaceDetails.test.ts b/src/features/workspaces/ui/WorkspaceDetails.test.ts
new file mode 100644
index 0000000..c903ac0
--- /dev/null
+++ b/src/features/workspaces/ui/WorkspaceDetails.test.ts
@@ -0,0 +1,114 @@
+import type { ComputerEntry, WorkspaceEntry } from "@dispatch/wire";
+import { render, screen } from "@testing-library/svelte";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+import type { WorkspaceResult } from "../adapter/http";
+import type { WorkspaceStore } from "../store.svelte";
+import WorkspaceDetails from "./WorkspaceDetails.svelte";
+
+function fakeEntry(overrides: Partial<WorkspaceEntry> = {}): WorkspaceEntry {
+  return {
+    id: "my-ws",
+    title: "My Workspace",
+    defaultCwd: null,
+    defaultComputerId: null,
+    starred: false,
+    createdAt: 1,
+    lastActivityAt: 2,
+    conversationCount: 0,
+    ...overrides,
+  };
+}
+
+function fakeStore(): WorkspaceStore {
+  return {
+    setDefaultCwd: vi.fn(
+      async (id: string, defaultCwd: string | null): Promise<WorkspaceResult<WorkspaceEntry>> => ({
+        ok: true,
+        value: fakeEntry({ id, defaultCwd }),
+      }),
+    ),
+    setDefaultComputer: vi.fn(
+      async (
+        id: string,
+        defaultComputerId: string | null,
+      ): Promise<WorkspaceResult<WorkspaceEntry>> => ({
+        ok: true,
+        value: fakeEntry({ id, defaultComputerId }),
+      }),
+    ),
+  } as unknown as WorkspaceStore;
+}
+
+describe("WorkspaceDetails", () => {
+  it("renders the title, slug, cwd input, and computer select", () => {
+    render(WorkspaceDetails, {
+      props: { ws: fakeEntry(), store: fakeStore(), computers: [], onClose: () => {} },
+    });
+    expect(screen.getByText("My Workspace")).toBeInTheDocument();
+    expect(screen.getByText("/my-ws")).toBeInTheDocument();
+    expect(screen.getByLabelText("Default working directory")).toBeInTheDocument();
+    expect(screen.getByLabelText("Computer")).toBeInTheDocument();
+  });
+
+  it("saves the cwd via the store; an empty value clears to null", async () => {
+    const user = userEvent.setup();
+    const store = fakeStore();
+    const onClose = vi.fn();
+    render(WorkspaceDetails, {
+      props: { ws: fakeEntry({ defaultCwd: "/old" }), store, computers: [], onClose },
+    });
+
+    const input = screen.getByLabelText("Default working directory");
+    await user.clear(input);
+    await user.click(screen.getByRole("button", { name: "Set" }));
+    expect(store.setDefaultCwd).toHaveBeenCalledWith("my-ws", null);
+  });
+
+  it("a failed cwd save surfaces the error", async () => {
+    const user = userEvent.setup();
+    const store = fakeStore();
+    store.setDefaultCwd = vi.fn(
+      async (): Promise<WorkspaceResult<WorkspaceEntry>> => ({ ok: false, error: "nope" }),
+    );
+    render(WorkspaceDetails, {
+      props: { ws: fakeEntry({ defaultCwd: "/old" }), store, computers: [], onClose: () => {} },
+    });
+
+    await user.type(screen.getByLabelText("Default working directory"), "!{Enter}");
+    expect(await screen.findByText("nope")).toBeInTheDocument();
+  });
+
+  it("picking a computer saves it via the store", async () => {
+    const user = userEvent.setup();
+    const store = fakeStore();
+    const computers: ComputerEntry[] = [
+      {
+        alias: "lab",
+        hostName: "lab.example",
+        port: 22,
+        user: "me",
+        identityFile: null,
+        knownHost: true,
+        usageCount: 0,
+      },
+    ];
+    render(WorkspaceDetails, {
+      props: { ws: fakeEntry(), store, computers, onClose: () => {} },
+    });
+
+    await user.selectOptions(screen.getByLabelText("Computer"), "lab");
+    expect(store.setDefaultComputer).toHaveBeenCalledWith("my-ws", "lab");
+  });
+
+  it("the close button dismisses the dialog", async () => {
+    const user = userEvent.setup();
+    const onClose = vi.fn();
+    render(WorkspaceDetails, {
+      props: { ws: fakeEntry(), store: fakeStore(), computers: [], onClose },
+    });
+
+    await user.click(screen.getByRole("button", { name: "Close details" }));
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/src/features/workspaces/ui/WorkspaceTile.svelte b/src/features/workspaces/ui/WorkspaceTile.svelte
new file mode 100644
index 0000000..4059690
--- /dev/null
+++ b/src/features/workspaces/ui/WorkspaceTile.svelte
@@ -0,0 +1,109 @@
+<script lang="ts">
+  import type { WorkspaceEntry } from "@dispatch/wire";
+  import type { WorkspaceStore } from "../store.svelte";
+  import { relativeTime } from "../logic/view-model";
+  import type { Placement } from "../logic/tile-layout";
+
+  let {
+    ws,
+    store,
+    placement,
+    selected = false,
+    renaming = false,
+    active = false,
+    onRenameEnd,
+  }: {
+    ws: WorkspaceEntry;
+    store: WorkspaceStore;
+    /** The tile's resolved footprint (already preview-adjusted by the grid). */
+    placement: Placement;
+    selected?: boolean;
+    /** The parent-driven rename mode (the action bar's Rename action). */
+    renaming?: boolean;
+    /** At least one conversation in this workspace is generating/queued. */
+    active?: boolean;
+    /** The tile finished its rename session (saved or cancelled). */
+    onRenameEnd: () => void;
+  } = $props();
+
+  // ── Title: double-click to rename inline (semantics preserved from the
+  // WorkspaceCard), or enter via the action bar's Rename action (`renaming`).
+  let editing = $state(false);
+  let titleDraft = $state("");
+  let titleInput = $state<HTMLInputElement | undefined>();
+  let titleError = $state<string | null>(null);
+
+  function startEdit(): void {
+    titleDraft = ws.title;
+    titleError = null;
+    editing = true;
+    queueMicrotask(() => titleInput?.focus());
+  }
+
+  // Seed (only) when the parent-driven rename mode turns on.
+  $effect(() => {
+    if (renaming) startEdit();
+  });
+
+  async function saveTitle(): Promise<void> {
+    if (!editing) return;
+    const title = titleDraft.trim();
+    editing = false;
+    onRenameEnd();
+    if (title === "" || title === ws.title) return;
+    const result = await store.rename(ws.id, title);
+    if (!result.ok) titleError = result.error;
+  }
+
+  function cancelTitle(): void {
+    editing = false;
+    titleError = null;
+    onRenameEnd();
+  }
+
+  // The face's semantic key (tests read it).
+  const faceKey = $derived(`tile-${placement.id}`);
+</script>
+
+<div data-tile-face={faceKey} class="flex h-full w-full flex-col gap-1 p-3">
+  {#if editing}
+    <input
+      bind:this={titleInput}
+      bind:value={titleDraft}
+      class="input input-bordered input-sm"
+      aria-label="Workspace title"
+      onkeydown={(e) => {
+        if (e.key === "Enter") void saveTitle();
+        else if (e.key === "Escape") cancelTitle();
+      }}
+      onblur={() => void saveTitle()}
+    />
+  {:else}
+    <!-- svelte-ignore a11y_no_static_element_interactions, a11y_click_events_have_key_events -->
+    <span
+      class="line-clamp-2 cursor-default text-lg leading-tight font-bold"
+      title="Double-click to rename"
+      ondblclick={startEdit}>{ws.title}</span
+    >
+  {/if}
+
+  <span class="font-mono text-xs opacity-50">/{ws.id}</span>
+
+  {#if titleError}
+    <p class="text-xs text-error">{titleError}</p>
+  {/if}
+
+  <div class="mt-auto flex items-center gap-2 text-xs opacity-80">
+    {#if active}
+      <span
+        class="loading loading-dots loading-xs shrink-0 text-primary"
+        aria-label="Workspace has active conversations"
+        title="A conversation in this workspace is generating"></span>
+    {/if}
+    <span>
+      {ws.conversationCount}
+      {ws.conversationCount === 1 ? "conversation" : "conversations"}
+    </span>
+    <span class="ml-auto font-mono opacity-70">{relativeTime(ws.lastActivityAt, Date.now())}</span>
+  </div>
+</div>
diff --git a/src/features/workspaces/ui/WorkspaceTile.test.ts b/src/features/workspaces/ui/WorkspaceTile.test.ts
new file mode 100644
index 0000000..918aa1c
--- /dev/null
+++ b/src/features/workspaces/ui/WorkspaceTile.test.ts
@@ -0,0 +1,157 @@
+import type { WorkspaceEntry } from "@dispatch/wire";
+import { render, screen } from "@testing-library/svelte";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+import type { WorkspaceResult } from "../adapter/http";
+import type { Placement } from "../logic/tile-layout";
+import type { WorkspaceStore } from "../store.svelte";
+import WorkspaceTile from "./WorkspaceTile.svelte";
+
+function fakeEntry(overrides: Partial<WorkspaceEntry> = {}): WorkspaceEntry {
+  return {
+    id: "my-ws",
+    title: "My Workspace",
+    defaultCwd: null,
+    defaultComputerId: null,
+    starred: false,
+    createdAt: 1,
+    lastActivityAt: Date.now() - 90_000, // "1m" relative time
+    conversationCount: 3,
+    ...overrides,
+  };
+}
+
+function fakeStore(): WorkspaceStore {
+  return {
+    rename: vi.fn(
+      async (id: string, title: string): Promise<WorkspaceResult<WorkspaceEntry>> => ({
+        ok: true,
+        value: fakeEntry({ id, title }),
+      }),
+    ),
+  } as unknown as WorkspaceStore;
+}
+
+function fakePlacement(overrides: Partial<Placement> = {}): Placement {
+  return { id: "my-ws", col: 1, row: 1, colSpan: 1, rowSpan: 1, ...overrides };
+}
+
+describe("WorkspaceTile", () => {
+  it("renders the title, slug, conversation count, and relative last-activity", () => {
+    render(WorkspaceTile, {
+      props: {
+        ws: fakeEntry(),
+        store: fakeStore(),
+        placement: fakePlacement(),
+        onRenameEnd: () => {},
+      },
+    });
+    expect(screen.getByText("My Workspace")).toBeInTheDocument();
+    expect(screen.getByText("/my-ws")).toBeInTheDocument();
+    expect(screen.getByText(/3 conversations/)).toBeInTheDocument();
+    expect(screen.getByText("1m")).toBeInTheDocument();
+  });
+
+  it("shows the active indicator only when the active port says so", async () => {
+    const { container, rerender } = render(WorkspaceTile, {
+      props: {
+        ws: fakeEntry(),
+        store: fakeStore(),
+        placement: fakePlacement(),
+        active: true,
+        onRenameEnd: () => {},
+      },
+    });
+    expect(
+      container.querySelector('[aria-label="Workspace has active conversations"]'),
+    ).not.toBeNull();
+
+    await rerender({
+      ws: fakeEntry(),
+      store: fakeStore(),
+      placement: fakePlacement(),
+      active: false,
+      onRenameEnd: () => {},
+    });
+    expect(container.querySelector('[aria-label="Workspace has active conversations"]')).toBeNull();
+  });
+
+  it("double-clicking the title reveals the rename input (semantics preserved)", async () => {
+    const user = userEvent.setup();
+    const store = fakeStore();
+    render(WorkspaceTile, {
+      props: {
+        ws: fakeEntry(),
+        store,
+        placement: fakePlacement(),
+        onRenameEnd: () => {},
+      },
+    });
+
+    await user.dblClick(screen.getByText("My Workspace"));
+    expect(screen.getByLabelText("Workspace title")).toHaveValue("My Workspace");
+  });
+
+  it("the parent-driven rename mode (action bar) opens the same inline editor", async () => {
+    const user = userEvent.setup();
+    const store = fakeStore();
+    render(WorkspaceTile, {
+      props: {
+        ws: fakeEntry(),
+        store,
+        placement: fakePlacement(),
+        renaming: true,
+        onRenameEnd: () => {},
+      },
+    });
+    const input = screen.getByLabelText("Workspace title");
+    expect(input).toHaveValue("My Workspace");
+
+    await user.clear(input);
+    await user.type(input, "Renamed{Enter}");
+    expect(store.rename).toHaveBeenCalledWith("my-ws", "Renamed");
+  });
+
+  it("a failed rename surfaces the error on the face", async () => {
+    const user = userEvent.setup();
+    const store = {
+      rename: vi.fn(
+        async (): Promise<WorkspaceResult<WorkspaceEntry>> => ({
+          ok: false,
+          error: "boom",
+        }),
+      ),
+    } as unknown as WorkspaceStore;
+    render(WorkspaceTile, {
+      props: {
+        ws: fakeEntry(),
+        store,
+        placement: fakePlacement(),
+        renaming: true,
+        onRenameEnd: () => {},
+      },
+    });
+
+    await user.type(screen.getByLabelText("Workspace title"), "x{Enter}");
+    expect(screen.getByText("boom")).toBeInTheDocument();
+  });
+
+  it("an unchanged title does not hit the store and still ends the session", async () => {
+    const user = userEvent.setup();
+    const store = fakeStore();
+    const onRenameEnd = vi.fn();
+    render(WorkspaceTile, {
+      props: {
+        ws: fakeEntry(),
+        store,
+        placement: fakePlacement(),
+        renaming: true,
+        onRenameEnd,
+      },
+    });
+
+    await user.type(screen.getByLabelText("Workspace title"), "{Enter}");
+    expect(store.rename).not.toHaveBeenCalled();
+    expect(onRenameEnd).toHaveBeenCalled();
+  });
+});
diff --git a/src/features/workspaces/ui/WorkspacesHome.svelte b/src/features/workspaces/ui/WorkspacesHome.svelte
index 5a4d88f..276a811 100644
--- a/src/features/workspaces/ui/WorkspacesHome.svelte
+++ b/src/features/workspaces/ui/WorkspacesHome.svelte
@@ -1,10 +1,32 @@
 <script lang="ts">
-  import { onMount } from "svelte";
+  import { onMount, untrack } from "svelte";
   import type { ComputerEntry } from "@dispatch/wire";
-  import { PluginManager, type PluginsStore, type WorkspaceLayoutPort } from "../../plugins";
+  import {
+    PluginManager,
+    WorkspacePluginModal,
+    type PluginsStore,
+    type WorkspaceLayoutPort,
+  } from "../../plugins";
+  import { createLocalStore } from "../../../adapters/local-storage";
   import type { WorkspaceStore } from "../store.svelte";
-  import { isValidSlug, workspacePath } from "../logic/route";
-  import WorkspaceCard from "./WorkspaceCard.svelte";
+  import { workspacePath } from "../logic/route";
+  import {
+    DEFAULT_VIEWPORT,
+    geometryFor,
+    pack,
+    type GridGeometry,
+    type Span,
+  } from "../logic/tile-layout";
+  import {
+    createTileLayoutStore,
+    TILE_LAYOUT_STORAGE_KEY,
+    type TileLayoutStore,
+  } from "../tile-layout-store.svelte";
+  import HomeHeader from "./HomeHeader.svelte";
+  import HomeTileGrid from "./HomeTileGrid.svelte";
+  import TileActionBar from "./TileActionBar.svelte";
+  import ResizePicker from "./ResizePicker.svelte";
+  import WorkspaceDetails from "./WorkspaceDetails.svelte";
 
   let {
     store,
@@ -13,136 +35,291 @@
     hasActive,
     plugins,
     layout,
+    tiles: tilesOverride,
   }: {
     store: WorkspaceStore;
     onNavigate: (path: string) => void;
     computers: readonly ComputerEntry[];
     /**
-     * Optional port forwarded to each {@link WorkspaceCard}: whether the
-     * workspace has at least one active (generating / queued) conversation.
+     * Optional port: whether the workspace has at least one active
+     * (generating / queued) conversation — the tile's live indicator.
      * Wired by the composition root to the app store. Absent → no indicator.
      */
     hasActive?: (workspaceId: string) => boolean;
     /**
-     * The plugin manager store (plan 07): drives the page-header global
-     * "Plugins" button + the per-card workspace modals (forwarded to
-     * {@link WorkspaceCard}). Optional (absent in tests that don't exercise
-     * plugins) → the buttons don't render.
+     * The plugin manager store (plan 07): drives the header's global
+     * "Plugins" button + the action bar's per-workspace Plugins action.
+     * Optional (absent in tests that don't exercise plugins).
      */
     plugins?: PluginsStore;
     /**
-     * The layout port (plan 04 §4.4): forwarded to each {@link WorkspaceCard}
-     * for the plugins modal's "Reset layout to default" affordance. Absent →
-     * the modal's layout section doesn't render.
+     * The layout port (plan 04 §4.4): forwarded to the per-workspace plugins
+     * modal's "Reset layout to default" affordance. Absent → the modal's
+     * layout section doesn't render.
      */
     layout?: WorkspaceLayoutPort;
+    /**
+     * The persisted tile layout store. Absent → created here over the real
+     * localStorage adapter (the page is the effect edge); tests inject one.
+     */
+    tiles?: TileLayoutStore;
   } = $props();
 
   onMount(() => {
     void store.refresh();
   });
 
-  let newSlug = $state("");
-  let slugError = $state<string | null>(null);
+  // ── The persisted tile layout (order + spans only — never positions). ─────
+  // The store is created once per page from the (inert) override prop — the
+  // repo's `untrack` pattern for initial-value captures (cf. App.svelte).
+  const tiles: TileLayoutStore =
+    untrack(() => tilesOverride) ??
+    createTileLayoutStore(
+      createLocalStore(TILE_LAYOUT_STORAGE_KEY, {
+        storage: typeof localStorage !== "undefined" ? localStorage : undefined,
+      }),
+    );
+
+  // Keep the layout merged with the live workspace list: unknown workspaces
+  // (deep-link auto-creates) append at the end; deleted ones drop. The no-op
+  // guard inside sync keeps this effect from looping. Skipped until the first
+  // non-empty list arrives — `sync([])` before the initial `refresh()` resolves
+  // would WIPE the persisted order (the backend always serves "default", so an
+  // empty list only ever means "not loaded yet").
+  $effect(() => {
+    const ids = store.list.map((ws) => ws.id);
+    if (ids.length === 0) return;
+    tiles.sync(ids);
+  });
+
+  // ── The tile canvas' size decides the geometry (ONE pure function — no
+  // breakpoint classes). Unmeasured (tests) → the default landscape viewport.
+  let regionEl = $state<HTMLDivElement | undefined>();
+  let size = $state<{ width: number; height: number } | undefined>();
+  const geometry: GridGeometry = $derived(
+    geometryFor(size?.width ?? DEFAULT_VIEWPORT.width, size?.height ?? DEFAULT_VIEWPORT.height),
+  );
+
+  $effect(() => {
+    const el = regionEl;
+    if (!el || typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver((entries) => {
+      const rect = entries[0]?.contentRect;
+      if (rect) size = { width: rect.width, height: rect.height };
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+  });
+
+  // The grid view: the SAME persisted data packs into either geometry —
+  // positions re-derive here, spans clamp for the RENDER only.
+  const placements = $derived(pack(tiles.entries, geometry));
+  const workspacesById = $derived(new Map(store.list.map((ws) => [ws.id, ws])));
+
+  // ── Selection + action bar ─────────────────────────────────────────────────
+  let selectedId = $state<string | null>(null);
+  const selected = $derived(selectedId !== null ? (workspacesById.get(selectedId) ?? null) : null);
+
+  function select(id: string): void {
+    selectedId = id;
+  }
+
+  function deselect(): void {
+    selectedId = null;
+  }
+
+  // ── Rename mode (the create flow + the action bar's Rename action) ────────
+  let renamingId = $state<string | null>(null);
+
+  // ── Resize picker (transient ghost preview; commit persists) ──────────────
+  let resizing = $state<{ id: string; span: Span | null } | null>(null);
+  const resizingEntry = $derived(
+    resizing ? (tiles.entries.find((tile) => tile.id === resizing?.id) ?? null) : null,
+  );
+
+  function startResize(): void {
+    if (!selected) return;
+    const entry = tiles.entries.find((tile) => tile.id === selected.id);
+    resizing = {
+      id: selected.id,
+      span: entry
+        ? { colSpan: entry.colSpan, rowSpan: entry.rowSpan }
+        : { colSpan: 1, rowSpan: 1 },
+    };
+  }
+
+  function commitResize(colSpan: number, rowSpan: number): void {
+    if (!resizing) return;
+    tiles.resize(resizing.id, colSpan, rowSpan);
+    resizing = null;
+  }
+
+  function cancelResize(): void {
+    resizing = null;
+  }
 
-  const slugValid = $derived(newSlug.length > 0 && isValidSlug(newSlug));
+  // ── Details flyout (the dense per-card settings). Id-based + gated on the
+  // selection, so deselecting (Escape) also dismisses it. ─────────────────────
+  let detailsForId = $state<string | null>(null);
+  const detailsFor = $derived(
+    selectedId !== null && detailsForId === selectedId
+      ? (workspacesById.get(selectedId) ?? null)
+      : null,
+  );
 
-  // Global plugin manager modal (plan 07 §7.2): opened from the header
-  // button; the ONLY surface that loads/unloads code (strict layering).
+  // ── Per-workspace plugin modal ─────────────────────────────────────────────
+  let pluginsModalId = $state<string | null>(null);
+  const pluginsModalFor = $derived(
+    pluginsModalId !== null ? (workspacesById.get(pluginsModalId) ?? null) : null,
+  );
+
+  // Global plugin manager modal (plan 07 §7.2): the ONLY surface that
+  // loads/unloads code (strict layering).
   let managerOpen = $state(false);
 
-  function createWorkspace(): void {
-    const slug = newSlug.trim();
-    if (!isValidSlug(slug)) {
-      slugError = "Lowercase letters, digits, and hyphens (1–40 chars).";
+  // ── Actions (the action bar) ───────────────────────────────────────────────
+  function openWorkspace(id: string): void {
+    deselect();
+    onNavigate(workspacePath(id));
+  }
+
+  async function deleteSelected(): Promise<void> {
+    if (!selected) return;
+    const ws = selected;
+    if (
+      !window.confirm(
+        `Delete workspace "${ws.title}"? Its conversations will be closed and moved to "default".`,
+      )
+    ) {
       return;
     }
-    slugError = null;
-    newSlug = "";
-    onNavigate(workspacePath(slug));
+    const result = await store.remove(ws.id);
+    if (result.ok) deselect();
+  }
+
+  async function toggleStar(): Promise<void> {
+    if (!selected) return;
+    await store.setStarred(selected.id, !selected.starred);
+  }
+
+  // ── Create (header popover): create on the backend — do NOT navigate —
+  // place the new tile in the first empty slot, and go straight into rename.
+  async function createWorkspace(
+    slug: string,
+  ): Promise<{ ok: true } | { ok: false; error: string }> {
+    const result = await store.ensure(slug);
+    if (!result.ok) return { ok: false, error: result.error };
+    await store.refresh();
+    // Idempotent: if the list refresh's sync already appended the id, this
+    // MOVES it into the first empty slot instead of duplicating.
+    tiles.placeFirstEmpty(slug, geometry);
+    renamingId = slug;
+    return { ok: true };
+  }
+
+  // ── Sort overflow: re-apply the recent-activity order ──────────────────────
+  function sortByRecent(): void {
+    const activity = new Map(store.list.map((ws) => [ws.id, ws.lastActivityAt]));
+    tiles.sortByRecentActivity(activity);
+  }
+
+  // Escape unwinds the overlays: resize → selection.
+  function handleKeydown(e: KeyboardEvent): void {
+    if (e.key !== "Escape") return;
+    if (resizing) {
+      cancelResize();
+    } else if (selectedId !== null) {
+      deselect();
+    }
   }
 </script>
 
-<div class="mx-auto flex h-screen w-full max-w-3xl flex-col gap-4 p-6">
-  <header class="flex items-center justify-between">
-    <h1 class="text-2xl font-bold">Workspaces</h1>
-    <div class="flex items-center gap-2">
-      <a
-        href="/default"
-        class="btn btn-ghost btn-sm"
-        onclick={(e) => {
-          e.preventDefault();
-          onNavigate("/default");
-        }}
-      >
-        Default
-      </a>
-      {#if plugins}
-        <button
-          type="button"
-          class="btn btn-outline btn-sm"
-          onclick={() => (managerOpen = true)}
-          title="Open the plugin manager (load/unload plugins globally)"
-        >
-          Plugins
-        </button>
-      {/if}
-    </div>
-  </header>
-
-  <form
-    class="flex items-end gap-2"
-    onsubmit={(e) => {
-      e.preventDefault();
-      createWorkspace();
-    }}
-  >
-    <div class="flex-1">
-      <label for="new-ws" class="mb-1 block text-xs font-semibold uppercase opacity-60"
-        >New workspace</label
-      >
-      <input
-        id="new-ws"
-        class="input input-bordered w-full"
-        placeholder="my-workspace"
-        bind:value={newSlug}
-        autocomplete="off"
-        spellcheck="false"
-      />
-    </div>
-    <button type="submit" class="btn btn-primary btn-sm" disabled={!slugValid}>Create</button>
-  </form>
-  {#if slugError}
-    <p class="text-xs text-error">{slugError}</p>
-  {/if}
-
-  <div class="flex-1 overflow-y-auto">
+<svelte:window onkeydown={handleKeydown} />
+
+<div class="flex h-screen w-full flex-col">
+  <HomeHeader
+    compact={geometry.mode === "tall"}
+    withPlugins={plugins !== undefined}
+    withSort={store.list.length > 1}
+    onCreate={createWorkspace}
+    onOpenPlugins={() => (managerOpen = true)}
+    onSort={() => void sortByRecent()}
+  />
+
+  <div bind:this={regionEl} class="min-h-0 w-full flex-1">
     {#if store.loading && store.list.length === 0}
       <div class="flex h-32 items-center justify-center">
         <span class="loading loading-spinner loading-sm opacity-60"></span>
       </div>
     {:else if store.list.length === 0}
       <p class="py-8 text-center text-sm opacity-60">
-        No workspaces yet. Create one above or visit <code>/your-name</code> in the URL.
+        No workspaces yet. Create one with <strong>New workspace</strong> above, or visit
+        <code>/your-name</code> in the URL.
       </p>
     {:else}
-      <ul class="flex flex-col gap-2">
-        {#each store.list as ws (ws.id)}
-          <WorkspaceCard
-            {ws}
-            {store}
-            {onNavigate}
-            {computers}
-            {...(hasActive ? { hasActive } : {})}
-            {...(plugins ? { plugins } : {})}
-            {...(layout ? { layout } : {})}
-          />
-        {/each}
-      </ul>
+      <HomeTileGrid
+        {geometry}
+        {placements}
+        {workspacesById}
+        {store}
+        {selectedId}
+        {renamingId}
+        preview={
+          resizing?.id !== undefined && resizing.span !== null
+            ? { id: resizing.id, ...resizing.span }
+            : null
+        }
+        {...(hasActive ? { hasActive } : {})}
+        onOpen={openWorkspace}
+        onSelect={select}
+        onReorder={(id, toIndex) => tiles.move(id, toIndex)}
+        onRenameEnd={() => (renamingId = null)}
+      />
     {/if}
   </div>
 </div>
 
+{#if selected && !renamingId}
+  <TileActionBar
+    ws={selected}
+    withPlugins={plugins !== undefined}
+    onOpen={() => openWorkspace(selected.id)}
+    onRename={() => (renamingId = selected.id)}
+    onResize={startResize}
+    onToggleStar={() => void toggleStar()}
+    onDetails={() => (detailsForId = selected.id)}
+    onPlugins={() => (pluginsModalId = selected.id)}
+    onDelete={() => void deleteSelected()}
+    onClose={deselect}
+  />
+{/if}
+
+{#if resizing && resizingEntry}
+  <ResizePicker
+    {geometry}
+    initial={{ colSpan: resizingEntry.colSpan, rowSpan: resizingEntry.rowSpan }}
+    onPreview={(span) => {
+      if (resizing) resizing = { id: resizing.id, span };
+    }}
+    onCommit={commitResize}
+    onCancel={cancelResize}
+  />
+{/if}
+
+{#if detailsFor}
+  <WorkspaceDetails ws={detailsFor} {store} {computers} onClose={() => (detailsForId = null)} />
+{/if}
+
+{#if pluginsModalFor && plugins}
+  <WorkspacePluginModal
+    workspaceId={pluginsModalFor.id}
+    workspaceTitle={pluginsModalFor.title}
+    {plugins}
+    {...(layout ? { layout } : {})}
+    onClose={() => (pluginsModalId = null)}
+  />
+{/if}
+
 {#if managerOpen && plugins}
   <PluginManager {plugins} onClose={() => (managerOpen = false)} />
 {/if}
diff --git a/src/features/workspaces/ui/WorkspacesHome.test.ts b/src/features/workspaces/ui/WorkspacesHome.test.ts
new file mode 100644
index 0000000..eb5b293
--- /dev/null
+++ b/src/features/workspaces/ui/WorkspacesHome.test.ts
@@ -0,0 +1,182 @@
+import type { Workspace, WorkspaceEntry } from "@dispatch/wire";
+import { render, screen, waitFor } from "@testing-library/svelte";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+import type { LocalStore } from "../../../adapters/local-storage";
+import type { WorkspaceHttp, WorkspaceResult } from "../adapter/http";
+import type { TileLayoutData, TileLayoutEntry } from "../logic/tile-layout";
+import { createTileLayoutStore } from "../tile-layout-store.svelte";
+import WorkspacesHome from "./WorkspacesHome.svelte";
+
+function ws(overrides: Partial<WorkspaceEntry> = {}): WorkspaceEntry {
+  return {
+    id: "a",
+    title: "A",
+    defaultCwd: null,
+    defaultComputerId: null,
+    starred: false,
+    createdAt: 1,
+    lastActivityAt: 2,
+    conversationCount: 1,
+    ...overrides,
+  };
+}
+
+/** A fake WorkspaceHttp edge with a controllable list (no mocks of our modules). */
+function fakeHttp(list: WorkspaceEntry[] = [ws()]): WorkspaceHttp {
+  return {
+    list: vi.fn(async (): Promise<WorkspaceEntry[]> => list),
+    // Create-on-miss: the backend persists the new workspace, so the next
+    // `list` serves it too.
+    ensure: vi.fn(async (id: string): Promise<WorkspaceResult<Workspace>> => {
+      if (!list.some((w) => w.id === id)) list.push(ws({ id, title: id }));
+      return { ok: true, value: ws({ id, title: id }) };
+    }),
+    get: vi.fn(),
+    setTitle: vi.fn(),
+    setDefaultCwd: vi.fn(),
+    setDefaultComputer: vi.fn(),
+    star: vi.fn(),
+    unstar: vi.fn(),
+    delete: vi.fn(async (): Promise<WorkspaceResult<{ closedCount: number }>> => {
+      // Mirrors the backend: the workspace leaves the list.
+      list.splice(0);
+      return { ok: true, value: { closedCount: 0 } };
+    }),
+  } as unknown as WorkspaceHttp;
+}
+
+function memoryLayout(initial: TileLayoutData | null = null): LocalStore<TileLayoutData> & {
+  data: TileLayoutData | null;
+} {
+  const store = {
+    data: initial,
+    load: () => store.data,
+    save: (value: TileLayoutData) => {
+      store.data = value;
+    },
+    clear: () => {
+      store.data = null;
+    },
+  };
+  return store;
+}
+
+describe("WorkspacesHome (tile canvas)", () => {
+  it("renders one tile per workspace, in the persisted tile order (not the list order)", async () => {
+    const list = [ws({ id: "a", title: "A" }), ws({ id: "b", title: "B" })];
+    const layout = memoryLayout({
+      version: 1,
+      tiles: [
+        { id: "b", order: 0, colSpan: 1, rowSpan: 1 },
+        { id: "a", order: 1, colSpan: 1, rowSpan: 1 },
+      ],
+    });
+    render(WorkspacesHome, {
+      props: {
+        store: (await import("../store.svelte")).createWorkspaceStore(fakeHttp(list)),
+        onNavigate: vi.fn(),
+        computers: [],
+        tiles: createTileLayoutStore(layout),
+      },
+    });
+
+    await screen.findByRole("button", { name: "Open workspace B" });
+    const wrappers = document.querySelectorAll("[data-tile-id]");
+    expect([...wrappers].map((el) => el.getAttribute("data-tile-id"))).toEqual(["b", "a"]);
+  });
+
+  it("clicking a tile navigates to the workspace path", async () => {
+    const user = userEvent.setup();
+    const onNavigate = vi.fn();
+    render(WorkspacesHome, {
+      props: {
+        store: (await import("../store.svelte")).createWorkspaceStore(fakeHttp()),
+        onNavigate,
+        computers: [],
+        tiles: createTileLayoutStore(memoryLayout()),
+      },
+    });
+
+    const tile = await screen.findByRole("button", { name: "Open workspace A" });
+    await user.click(tile);
+    expect(onNavigate).toHaveBeenCalledWith("/a");
+  });
+
+  it("creating a workspace from the header does NOT navigate; the new tile enters rename mode", async () => {
+    const user = userEvent.setup();
+    const list = [ws({ id: "a", title: "A" })];
+    const onNavigate = vi.fn();
+    const store = (await import("../store.svelte")).createWorkspaceStore(fakeHttp(list));
+    render(WorkspacesHome, {
+      props: {
+        store,
+        onNavigate,
+        computers: [],
+        tiles: createTileLayoutStore(memoryLayout()),
+      },
+    });
+
+    await screen.findByRole("button", { name: "Open workspace A" });
+    await user.click(screen.getByRole("button", { name: "New workspace" }));
+    await user.type(screen.getByRole("textbox", { name: "New workspace" }), "fresh-ws{Enter}");
+
+    await waitFor(() => {
+      expect(screen.getByLabelText("Workspace title", { selector: "input" })).toBeInTheDocument();
+    });
+    expect(onNavigate).not.toHaveBeenCalled();
+    // The backend was asked to create it (create-on-miss).
+    expect(store.list.map((w) => w.id)).toContain("fresh-ws");
+  });
+
+  it("right-clicking a tile opens the action bar; Delete keeps the confirm + store call", async () => {
+    const user = userEvent.setup();
+    const confirmSpy = vi.spyOn(window, "confirm").mockReturnValue(true);
+    const list = [ws({ id: "a", title: "A" })];
+    const store = (await import("../store.svelte")).createWorkspaceStore(fakeHttp(list));
+    render(WorkspacesHome, {
+      props: {
+        store,
+        onNavigate: vi.fn(),
+        computers: [],
+        tiles: createTileLayoutStore(memoryLayout()),
+      },
+    });
+
+    const tile = await screen.findByRole("button", { name: "Open workspace A" });
+    await user.pointer({ keys: "[MouseRight]", target: tile });
+
+    const deleteButton = await screen.findByRole("button", { name: "Delete" });
+    await user.click(deleteButton);
+
+    expect(confirmSpy).toHaveBeenCalledWith(expect.stringContaining('Delete workspace "A"?'));
+    await waitFor(() => {
+      expect(store.list.length).toBe(0);
+    });
+    confirmSpy.mockRestore();
+  });
+
+  it("workspaces unknown to the layout append at the end (deep-link auto-create)", async () => {
+    const list = [ws({ id: "a", title: "A" }), ws({ id: "b", title: "B" })];
+    const layout = memoryLayout({
+      version: 1,
+      tiles: [{ id: "b", order: 0, colSpan: 1, rowSpan: 1 }],
+    });
+    render(WorkspacesHome, {
+      props: {
+        store: (await import("../store.svelte")).createWorkspaceStore(fakeHttp(list)),
+        onNavigate: vi.fn(),
+        computers: [],
+        tiles: createTileLayoutStore(layout),
+      },
+    });
+
+    await screen.findByRole("button", { name: "Open workspace B" });
+    await screen.findByRole("button", { name: "Open workspace A" });
+    const wrappers = document.querySelectorAll("[data-tile-id]");
+    expect([...wrappers].map((el) => el.getAttribute("data-tile-id"))).toEqual(["b", "a"]);
+    // And the sync persisted the appended entry.
+    const entries = (layout.data?.tiles ?? []).map((tile: TileLayoutEntry) => tile.id);
+    expect(entries).toEqual(["b", "a"]);
+  });
+});