3 files changed, 694 insertions, 0 deletions
diff --git a/src/features/workspaces/ui/WorkspaceCard.svelte b/src/features/workspaces/ui/WorkspaceCard.svelte
new file mode 100644
index 0000000..6de4109
--- /dev/null
+++ b/src/features/workspaces/ui/WorkspaceCard.svelte
@@ -0,0 +1,279 @@
+<script lang="ts">
+  import type { ComputerEntry, WorkspaceEntry } from "@dispatch/wire";
+  import { untrack } from "svelte";
+  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,
+  }: {
+    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;
+  } = $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;
+    }
+  }
+
+  // ── 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>
+  </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>
diff --git a/src/features/workspaces/ui/WorkspaceCard.test.ts b/src/features/workspaces/ui/WorkspaceCard.test.ts
new file mode 100644
index 0000000..72f4e60
--- /dev/null
+++ b/src/features/workspaces/ui/WorkspaceCard.test.ts
@@ -0,0 +1,305 @@
+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/WorkspacesHome.svelte b/src/features/workspaces/ui/WorkspacesHome.svelte
new file mode 100644
index 0000000..d97eab7
--- /dev/null
+++ b/src/features/workspaces/ui/WorkspacesHome.svelte
@@ -0,0 +1,110 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+  import type { ComputerEntry } from "@dispatch/wire";
+  import type { WorkspaceStore } from "../store.svelte";
+  import { isValidSlug, workspacePath } from "../logic/route";
+  import WorkspaceCard from "./WorkspaceCard.svelte";
+
+  let {
+    store,
+    onNavigate,
+    computers,
+    hasActive,
+  }: {
+    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.
+     * Wired by the composition root to the app store. Absent → no indicator.
+     */
+    hasActive?: (workspaceId: string) => boolean;
+  } = $props();
+
+  onMount(() => {
+    void store.refresh();
+  });
+
+  let newSlug = $state("");
+  let slugError = $state<string | null>(null);
+
+  const slugValid = $derived(newSlug.length > 0 && isValidSlug(newSlug));
+
+  function createWorkspace(): void {
+    const slug = newSlug.trim();
+    if (!isValidSlug(slug)) {
+      slugError = "Lowercase letters, digits, and hyphens (1–40 chars).";
+      return;
+    }
+    slugError = null;
+    newSlug = "";
+    onNavigate(workspacePath(slug));
+  }
+</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>
+    <a
+      href="/default"
+      class="btn btn-ghost btn-sm"
+      onclick={(e) => {
+        e.preventDefault();
+        onNavigate("/default");
+      }}
+    >
+      Default
+    </a>
+  </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">
+    {#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.
+      </p>
+    {:else}
+      <ul class="flex flex-col gap-2">
+        {#each store.list as ws (ws.id)}
+          <WorkspaceCard
+            {ws}
+            {store}
+            {onNavigate}
+            {computers}
+            {...(hasActive ? { hasActive } : {})}
+          />
+        {/each}
+      </ul>
+    {/if}
+  </div>
+</div>