12 files changed, 1740 insertions, 0 deletions
diff --git a/src/features/workspaces/adapter/http.test.ts b/src/features/workspaces/adapter/http.test.ts
new file mode 100644
index 0000000..18d8939
--- /dev/null
+++ b/src/features/workspaces/adapter/http.test.ts
@@ -0,0 +1,189 @@
+import { describe, expect, it, vi } from "vitest";
+import { createWorkspaceHttp } from "./http";
+
+/** Build a fake `fetch` returning a canned Response. */
+function fakeFetch(responses: Array<{ status?: number; body?: unknown } | Error>): typeof fetch {
+  let i = 0;
+  return vi.fn(async () => {
+    const next = responses[i++];
+    if (next === undefined) throw new Error("fakeFetch: no more canned responses");
+    if (next instanceof Error) throw next;
+    const status = next.status ?? 200;
+    const body = next.body;
+    return {
+      ok: status >= 200 && status < 300,
+      status,
+      async json() {
+        return body;
+      },
+    } as Response;
+  }) as unknown as typeof fetch;
+}
+
+const BASE = "http://x";
+
+describe("createWorkspaceHttp", () => {
+  it("list returns the workspaces", async () => {
+    const fetchImpl = fakeFetch([
+      {
+        body: {
+          workspaces: [
+            {
+              id: "a",
+              title: "A",
+              defaultCwd: null,
+              createdAt: 1,
+              lastActivityAt: 2,
+              conversationCount: 3,
+            },
+          ],
+        },
+      },
+    ]);
+    const http = createWorkspaceHttp(BASE, fetchImpl);
+    const list = await http.list();
+    expect(list).toHaveLength(1);
+    expect(list[0]?.id).toBe("a");
+    expect(list[0]?.conversationCount).toBe(3);
+    expect(fetchImpl).toHaveBeenCalledWith(`${BASE}/workspaces`);
+  });
+
+  it("list returns [] on a failed response (non-fatal)", async () => {
+    const http = createWorkspaceHttp(BASE, fakeFetch([{ status: 500 }]));
+    expect(await http.list()).toEqual([]);
+  });
+
+  it("list returns [] on a network error", async () => {
+    const http = createWorkspaceHttp(BASE, fakeFetch([new Error("network")]));
+    expect(await http.list()).toEqual([]);
+  });
+
+  it("ensure PUTs the id + returns the workspace", async () => {
+    const ws = { id: "my-ws", title: "my-ws", defaultCwd: null, createdAt: 10, lastActivityAt: 10 };
+    const fetchImpl = fakeFetch([{ body: ws }]);
+    const http = createWorkspaceHttp(BASE, fetchImpl);
+    const result = await http.ensure("my-ws");
+    expect(result).toEqual({ ok: true, value: ws });
+    expect(fetchImpl).toHaveBeenCalledWith(
+      `${BASE}/workspaces/my-ws`,
+      expect.objectContaining({ method: "PUT" }),
+    );
+  });
+
+  it("ensure surfaces the backend error on a 400 (invalid slug)", async () => {
+    const http = createWorkspaceHttp(
+      BASE,
+      fakeFetch([{ status: 400, body: { error: "invalid slug" } }]),
+    );
+    const result = await http.ensure("UPPER");
+    expect(result).toEqual({ ok: false, error: "invalid slug" });
+  });
+
+  it("get returns null on 404", async () => {
+    const http = createWorkspaceHttp(BASE, fakeFetch([{ status: 404 }]));
+    expect(await http.get("nope")).toBeNull();
+  });
+
+  it("get returns the workspace on 200", async () => {
+    const ws = { id: "x", title: "X", defaultCwd: "/home", createdAt: 1, lastActivityAt: 2 };
+    const http = createWorkspaceHttp(BASE, fakeFetch([{ body: ws }]));
+    expect(await http.get("x")).toEqual(ws);
+  });
+
+  it("setTitle PUTs the title", async () => {
+    const ws = { id: "a", title: "Renamed", defaultCwd: null, createdAt: 1, lastActivityAt: 2 };
+    const fetchImpl = fakeFetch([{ body: ws }]);
+    const http = createWorkspaceHttp(BASE, fetchImpl);
+    const result = await http.setTitle("a", "Renamed");
+    expect(result).toEqual({ ok: true, value: ws });
+    const call = (fetchImpl as unknown as ReturnType<typeof vi.fn>).mock.calls[0];
+    expect(call?.[0]).toBe(`${BASE}/workspaces/a/title`);
+    expect(JSON.parse(call?.[1]?.body)).toEqual({ title: "Renamed" });
+  });
+
+  it("setDefaultCwd PUTs null to clear", async () => {
+    const ws = { id: "a", title: "A", defaultCwd: null, createdAt: 1, lastActivityAt: 2 };
+    const fetchImpl = fakeFetch([{ body: ws }]);
+    const http = createWorkspaceHttp(BASE, fetchImpl);
+    await http.setDefaultCwd("a", null);
+    const call = (fetchImpl as unknown as ReturnType<typeof vi.fn>).mock.calls[0];
+    expect(call?.[0]).toBe(`${BASE}/workspaces/a/default-cwd`);
+    expect(JSON.parse(call?.[1]?.body)).toEqual({ defaultCwd: null });
+  });
+
+  it("delete returns closedCount", async () => {
+    const fetchImpl = fakeFetch([{ body: { workspaceId: "a", closedCount: 4 } }]);
+    const http = createWorkspaceHttp(BASE, fetchImpl);
+    const result = await http.delete("a");
+    expect(result).toEqual({ ok: true, value: { closedCount: 4 } });
+    expect(fetchImpl).toHaveBeenCalledWith(
+      `${BASE}/workspaces/a`,
+      expect.objectContaining({ method: "DELETE" }),
+    );
+  });
+
+  it("delete surfaces 409 for 'default'", async () => {
+    const http = createWorkspaceHttp(
+      BASE,
+      fakeFetch([{ status: 409, body: { error: "cannot delete default" } }]),
+    );
+    const result = await http.delete("default");
+    expect(result).toEqual({ ok: false, error: "cannot delete default" });
+  });
+
+  it("star PUTs /star with no body and returns the updated workspace", async () => {
+    const ws = {
+      id: "a",
+      title: "A",
+      defaultCwd: null,
+      defaultComputerId: null,
+      starred: true,
+      createdAt: 1,
+      lastActivityAt: 2,
+    };
+    const fetchImpl = fakeFetch([{ body: ws }]);
+    const http = createWorkspaceHttp(BASE, fetchImpl);
+    const result = await http.star("a");
+    expect(result).toEqual({ ok: true, value: ws });
+    const call = (fetchImpl as unknown as ReturnType<typeof vi.fn>).mock.calls[0];
+    expect(call?.[0]).toBe(`${BASE}/workspaces/a/star`);
+    expect(call?.[1]).toEqual({ method: "PUT" });
+  });
+
+  it("unstar DELETEs /star with no body and returns the updated workspace", async () => {
+    const ws = {
+      id: "a",
+      title: "A",
+      defaultCwd: null,
+      defaultComputerId: null,
+      starred: false,
+      createdAt: 1,
+      lastActivityAt: 2,
+    };
+    const fetchImpl = fakeFetch([{ body: ws }]);
+    const http = createWorkspaceHttp(BASE, fetchImpl);
+    const result = await http.unstar("a");
+    expect(result).toEqual({ ok: true, value: ws });
+    const call = (fetchImpl as unknown as ReturnType<typeof vi.fn>).mock.calls[0];
+    expect(call?.[0]).toBe(`${BASE}/workspaces/a/star`);
+    expect(call?.[1]).toEqual({ method: "DELETE" });
+  });
+
+  it("star surfaces a 400 for an invalid slug", async () => {
+    const http = createWorkspaceHttp(
+      BASE,
+      fakeFetch([{ status: 400, body: { error: "invalid slug" } }]),
+    );
+    const result = await http.star("UPPER");
+    expect(result).toEqual({ ok: false, error: "invalid slug" });
+  });
+
+  it("unstar surfaces the backend error on failure", async () => {
+    const http = createWorkspaceHttp(
+      BASE,
+      fakeFetch([{ status: 500, body: { error: "Failed to unstar workspace" } }]),
+    );
+    const result = await http.unstar("a");
+    expect(result).toEqual({ ok: false, error: "Failed to unstar workspace" });
+  });
+});
diff --git a/src/features/workspaces/adapter/http.ts b/src/features/workspaces/adapter/http.ts
new file mode 100644
index 0000000..5673881
--- /dev/null
+++ b/src/features/workspaces/adapter/http.ts
@@ -0,0 +1,187 @@
+import type {
+  DeleteWorkspaceResponse,
+  EnsureWorkspaceRequest,
+  SetWorkspaceDefaultComputerRequest,
+  SetWorkspaceDefaultCwdRequest,
+  SetWorkspaceTitleRequest,
+  Workspace,
+  WorkspaceEntry,
+  WorkspaceListResponse,
+  WorkspaceResponse,
+} from "@dispatch/transport-contract";
+
+/**
+ * Workspace HTTP effects — the injected edge that talks to the backend's
+ * workspace endpoints. Mirrors the store's fetch pattern: `httpBase` + an
+ * injected `fetchImpl` (so it is testable without the network). Returns typed
+ * `WorkspaceResult<T>` (`{ok,value}` | `{ok:false,error}`) for mutating ops so a
+ * caller can surface the backend's `{ error }` reason; reads return data or a
+ * safe empty/null on failure (non-fatal — the UI falls back gracefully).
+ *
+ * Endpoints ([email protected]):
+ * - `GET /workspaces` → list
+ * - `PUT /workspaces/:id` (create-on-miss, idempotent) → ensure
+ * - `GET /workspaces/:id` (404 → null) → get
+ * - `PUT /workspaces/:id/title` → rename
+ * - `PUT /workspaces/:id/default-cwd` → set/clear default cwd
+ * - `PUT /workspaces/:id/default-computer` → set/clear default computer (SSH handoff #2)
+ * - `PUT /workspaces/:id/star` (create-on-miss) → star (concurrency priority)
+ * - `DELETE /workspaces/:id/star` (create-on-miss) → unstar
+ * - `DELETE /workspaces/:id` (409 for "default") → delete
+ */
+export type WorkspaceResult<T> =
+  | { readonly ok: true; readonly value: T }
+  | { readonly ok: false; readonly error: string };
+
+export interface WorkspaceHttp {
+  list(): Promise<readonly WorkspaceEntry[]>;
+  ensure(id: string, body?: EnsureWorkspaceRequest): Promise<WorkspaceResult<Workspace>>;
+  get(id: string): Promise<Workspace | null>;
+  setTitle(id: string, title: string): Promise<WorkspaceResult<Workspace>>;
+  setDefaultCwd(id: string, defaultCwd: string | null): Promise<WorkspaceResult<Workspace>>;
+  setDefaultComputer(id: string, computerId: string | null): Promise<WorkspaceResult<Workspace>>;
+  /** Star a workspace (concurrency priority). Create-on-miss; no body. */
+  star(id: string): Promise<WorkspaceResult<Workspace>>;
+  /** Unstar a workspace. Create-on-miss; no body. */
+  unstar(id: string): Promise<WorkspaceResult<Workspace>>;
+  delete(id: string): Promise<WorkspaceResult<{ closedCount: number }>>;
+}
+
+async function errText(res: Response): Promise<string> {
+  try {
+    const body = (await res.json()) as { error?: string };
+    return body.error ?? `HTTP ${res.status}`;
+  } catch {
+    return `HTTP ${res.status}`;
+  }
+}
+
+export function createWorkspaceHttp(httpBase: string, fetchImpl: typeof fetch): WorkspaceHttp {
+  return {
+    async list(): Promise<readonly WorkspaceEntry[]> {
+      try {
+        const res = await fetchImpl(`${httpBase}/workspaces`);
+        if (!res.ok) return [];
+        const data = (await res.json()) as WorkspaceListResponse;
+        return data.workspaces;
+      } catch {
+        return [];
+      }
+    },
+
+    async ensure(id, body): Promise<WorkspaceResult<Workspace>> {
+      try {
+        const res = await fetchImpl(`${httpBase}/workspaces/${encodeURIComponent(id)}`, {
+          method: "PUT",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify(body ?? {}),
+        });
+        if (!res.ok) return { ok: false, error: await errText(res) };
+        return { ok: true, value: (await res.json()) as WorkspaceResponse };
+      } catch (err) {
+        return {
+          ok: false,
+          error: err instanceof Error ? err.message : "Workspace request failed",
+        };
+      }
+    },
+
+    async get(id): Promise<Workspace | null> {
+      try {
+        const res = await fetchImpl(`${httpBase}/workspaces/${encodeURIComponent(id)}`);
+        if (res.status === 404 || !res.ok) return null;
+        return (await res.json()) as WorkspaceResponse;
+      } catch {
+        return null;
+      }
+    },
+
+    async setTitle(id, title): Promise<WorkspaceResult<Workspace>> {
+      try {
+        const res = await fetchImpl(`${httpBase}/workspaces/${encodeURIComponent(id)}/title`, {
+          method: "PUT",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ title } satisfies SetWorkspaceTitleRequest),
+        });
+        if (!res.ok) return { ok: false, error: await errText(res) };
+        return { ok: true, value: (await res.json()) as WorkspaceResponse };
+      } catch (err) {
+        return { ok: false, error: err instanceof Error ? err.message : "Rename failed" };
+      }
+    },
+
+    async setDefaultCwd(id, defaultCwd): Promise<WorkspaceResult<Workspace>> {
+      try {
+        const res = await fetchImpl(
+          `${httpBase}/workspaces/${encodeURIComponent(id)}/default-cwd`,
+          {
+            method: "PUT",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ defaultCwd } satisfies SetWorkspaceDefaultCwdRequest),
+          },
+        );
+        if (!res.ok) return { ok: false, error: await errText(res) };
+        return { ok: true, value: (await res.json()) as WorkspaceResponse };
+      } catch (err) {
+        return { ok: false, error: err instanceof Error ? err.message : "Set default cwd failed" };
+      }
+    },
+
+    async setDefaultComputer(id, computerId): Promise<WorkspaceResult<Workspace>> {
+      try {
+        const res = await fetchImpl(
+          `${httpBase}/workspaces/${encodeURIComponent(id)}/default-computer`,
+          {
+            method: "PUT",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ computerId } satisfies SetWorkspaceDefaultComputerRequest),
+          },
+        );
+        if (!res.ok) return { ok: false, error: await errText(res) };
+        return { ok: true, value: (await res.json()) as WorkspaceResponse };
+      } catch (err) {
+        return {
+          ok: false,
+          error: err instanceof Error ? err.message : "Set default computer failed",
+        };
+      }
+    },
+
+    async star(id): Promise<WorkspaceResult<Workspace>> {
+      try {
+        const res = await fetchImpl(`${httpBase}/workspaces/${encodeURIComponent(id)}/star`, {
+          method: "PUT",
+        });
+        if (!res.ok) return { ok: false, error: await errText(res) };
+        return { ok: true, value: (await res.json()) as WorkspaceResponse };
+      } catch (err) {
+        return { ok: false, error: err instanceof Error ? err.message : "Star failed" };
+      }
+    },
+
+    async unstar(id): Promise<WorkspaceResult<Workspace>> {
+      try {
+        const res = await fetchImpl(`${httpBase}/workspaces/${encodeURIComponent(id)}/star`, {
+          method: "DELETE",
+        });
+        if (!res.ok) return { ok: false, error: await errText(res) };
+        return { ok: true, value: (await res.json()) as WorkspaceResponse };
+      } catch (err) {
+        return { ok: false, error: err instanceof Error ? err.message : "Unstar failed" };
+      }
+    },
+
+    async delete(id): Promise<WorkspaceResult<{ closedCount: number }>> {
+      try {
+        const res = await fetchImpl(`${httpBase}/workspaces/${encodeURIComponent(id)}`, {
+          method: "DELETE",
+        });
+        if (!res.ok) return { ok: false, error: await errText(res) };
+        const data = (await res.json()) as DeleteWorkspaceResponse;
+        return { ok: true, value: { closedCount: data.closedCount } };
+      } catch (err) {
+        return { ok: false, error: err instanceof Error ? err.message : "Delete failed" };
+      }
+    },
+  };
+}
diff --git a/src/features/workspaces/index.ts b/src/features/workspaces/index.ts
new file mode 100644
index 0000000..dab1dec
--- /dev/null
+++ b/src/features/workspaces/index.ts
@@ -0,0 +1,21 @@
+export type { WorkspaceHttp, WorkspaceResult } from "./adapter/http";
+export { createWorkspaceHttp } from "./adapter/http";
+export type { Route } from "./logic/route";
+export {
+  DEFAULT_WORKSPACE_ID,
+  isValidSlug,
+  parsePath,
+  WORKSPACE_SLUG_RE,
+  workspacePath,
+} from "./logic/route";
+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 { default as WorkspacesHome } from "./ui/WorkspacesHome.svelte";
+
+/** Public module manifest — aggregated by the shell's "Loaded Modules" view. */
+export const manifest = {
+  name: "workspaces",
+  description: "URL-driven conversation grouping with a backend-owned default cwd",
+} as const;
diff --git a/src/features/workspaces/logic/route.test.ts b/src/features/workspaces/logic/route.test.ts
new file mode 100644
index 0000000..96e0ff3
--- /dev/null
+++ b/src/features/workspaces/logic/route.test.ts
@@ -0,0 +1,77 @@
+import { describe, expect, it } from "vitest";
+import {
+  DEFAULT_WORKSPACE_ID,
+  isValidSlug,
+  parsePath,
+  WORKSPACE_SLUG_RE,
+  workspacePath,
+} from "./route";
+
+describe("parsePath", () => {
+  it("treats the root path as home", () => {
+    expect(parsePath("/")).toEqual({ kind: "home" });
+    expect(parsePath("")).toEqual({ kind: "home" });
+  });
+
+  it("trims surrounding slashes", () => {
+    expect(parsePath("//")).toEqual({ kind: "home" });
+    expect(parsePath("/my-ws/")).toEqual({ kind: "workspace", id: "my-ws" });
+  });
+
+  it("parses a single segment as a workspace id", () => {
+    expect(parsePath("/default")).toEqual({ kind: "workspace", id: "default" });
+    expect(parsePath("/my-workspace")).toEqual({ kind: "workspace", id: "my-workspace" });
+    expect(parsePath("/ws1")).toEqual({ kind: "workspace", id: "ws1" });
+  });
+
+  it("takes only the first segment of a deeper path", () => {
+    expect(parsePath("/foo/bar")).toEqual({ kind: "workspace", id: "foo" });
+    expect(parsePath("/foo/bar/baz")).toEqual({ kind: "workspace", id: "foo" });
+  });
+
+  it("URL-decodes the segment", () => {
+    expect(parsePath("/my%20ws")).toEqual({ kind: "workspace", id: "my ws" });
+  });
+
+  it("does not validate the slug — an invalid id is still a workspace route", () => {
+    expect(parsePath("/UPPER")).toEqual({ kind: "workspace", id: "UPPER" });
+    expect(parsePath("/has space")).toEqual({ kind: "workspace", id: "has space" });
+  });
+});
+
+describe("isValidSlug", () => {
+  it("accepts lowercase alphanumeric + internal hyphens", () => {
+    expect(isValidSlug("default")).toBe(true);
+    expect(isValidSlug("my-workspace")).toBe(true);
+    expect(isValidSlug("a")).toBe(true);
+    expect(isValidSlug("ws-1")).toBe(true);
+  });
+
+  it("accepts up to 40 chars", () => {
+    expect(isValidSlug("a".repeat(40))).toBe(true);
+  });
+
+  it("rejects empty and too-long", () => {
+    expect(isValidSlug("")).toBe(false);
+    expect(isValidSlug("a".repeat(41))).toBe(false);
+  });
+
+  it("rejects uppercase, spaces, and leading/trailing hyphens", () => {
+    expect(isValidSlug("MyWS")).toBe(false);
+    expect(isValidSlug("has space")).toBe(false);
+    expect(isValidSlug("-leading")).toBe(false);
+    expect(isValidSlug("trailing-")).toBe(false);
+    expect(isValidSlug("double--hyphen")).toBe(true); // internal doubles are allowed by the regex
+  });
+
+  it("WORKSPACE_SLUG_RE matches the default id", () => {
+    expect(WORKSPACE_SLUG_RE.test(DEFAULT_WORKSPACE_ID)).toBe(true);
+  });
+});
+
+describe("workspacePath", () => {
+  it("builds the URL path for a workspace id", () => {
+    expect(workspacePath("default")).toBe("/default");
+    expect(workspacePath("my-ws")).toBe("/my-ws");
+  });
+});
diff --git a/src/features/workspaces/logic/route.ts b/src/features/workspaces/logic/route.ts
new file mode 100644
index 0000000..015c6d6
--- /dev/null
+++ b/src/features/workspaces/logic/route.ts
@@ -0,0 +1,63 @@
+/**
+ * Pure routing logic for the workspaces feature — zero DOM, zero effects, zero Svelte.
+ *
+ * The app is URL-driven: the root path `/` is the workspaces HOME (lists all
+ * workspaces); a single path segment `/<id>` opens the workspace with that id
+ * (the slug). This module holds the pure mapping from a pathname to a `Route`,
+ * plus the slug-validation rules mirrored from the backend's `PUT /workspaces/:id`.
+ */
+
+/**
+ * The workspace slug regex (mirrors the backend's `PUT /workspaces/:id`
+ * validation): 1–40 chars, lowercase alphanumeric with internal hyphens only
+ * (no leading/trailing hyphen). `"default"` matches and is a valid (but
+ * non-deletable) id.
+ */
+export const WORKSPACE_SLUG_RE = /^[a-z0-9](?:[a-z0-9-]{0,38}[a-z0-9])?$/;
+
+/** A route derived from the URL path. */
+export type Route = { readonly kind: "home" } | { readonly kind: "workspace"; readonly id: string };
+
+/** The reserved id of the always-present fallback workspace. */
+export const DEFAULT_WORKSPACE_ID = "default";
+
+/**
+ * Parse a pathname into a `Route`. `/` (or empty) → home; a leading segment →
+ * the workspace with that id (URL-decoded, surrounding slashes trimmed). Deeper
+ * paths take their FIRST segment (nested routes are not used in v1). Pure:
+ * pathname in, route out. Does NOT validate the slug — an invalid id still
+ * produces a `workspace` route; the backend's ensure call rejects it (the FE
+ * surfaces the error).
+ */
+export function parsePath(pathname: string): Route {
+  const trimmed = pathname.replace(/^\/+|\/+$/g, "");
+  if (trimmed === "") return { kind: "home" };
+  const first = trimmed.split("/")[0] ?? "";
+  const id = safeDecode(first);
+  if (id === "") return { kind: "home" };
+  return { kind: "workspace", id };
+}
+
+/**
+ * Whether a slug is valid for a NEW workspace (the form the backend accepts).
+ * Used by the home view's "new workspace" input before navigating.
+ */
+export function isValidSlug(slug: string): boolean {
+  return WORKSPACE_SLUG_RE.test(slug);
+}
+
+/**
+ * Build the URL path for a workspace id. Used when navigating to / linking a
+ * workspace. Pure: id in, path string out.
+ */
+export function workspacePath(id: string): string {
+  return `/${id}`;
+}
+
+function safeDecode(segment: string): string {
+  try {
+    return decodeURIComponent(segment);
+  } catch {
+    return segment;
+  }
+}
diff --git a/src/features/workspaces/logic/view-model.test.ts b/src/features/workspaces/logic/view-model.test.ts
new file mode 100644
index 0000000..44d2f31
--- /dev/null
+++ b/src/features/workspaces/logic/view-model.test.ts
@@ -0,0 +1,179 @@
+import type { WorkspaceEntry } from "@dispatch/wire";
+import { describe, expect, it } from "vitest";
+import { applyStarred, pageTitle, relativeTime, sortWorkspaces } from "./view-model";
+
+describe("relativeTime", () => {
+  const now = 1_000_000_000_000; // 2001-09-09
+
+  it("is 'now' within a minute", () => {
+    expect(relativeTime(now, now)).toBe("now");
+    expect(relativeTime(now - 59_000, now)).toBe("now");
+  });
+
+  it("is minutes under an hour", () => {
+    expect(relativeTime(now - 5 * 60_000, now)).toBe("5m");
+    expect(relativeTime(now - 59 * 60_000, now)).toBe("59m");
+  });
+
+  it("is hours under a day", () => {
+    expect(relativeTime(now - 2 * 60 * 60_000, now)).toBe("2h");
+  });
+
+  it("is days under a week", () => {
+    expect(relativeTime(now - 3 * 24 * 60 * 60_000, now)).toBe("3d");
+  });
+
+  it("is a short date beyond a week", () => {
+    // 7+ days ago: just check it is a MM/DD string.
+    const s = relativeTime(now - 10 * 24 * 60 * 60_000, now);
+    expect(s).toMatch(/^\d{2}\/\d{2}$/);
+  });
+});
+
+describe("pageTitle", () => {
+  // Minimal valid WorkspaceEntry (the irrelevant metadata is zeroed).
+  const ws = (id: string, title: string): WorkspaceEntry => ({
+    id,
+    title,
+    defaultCwd: null,
+    defaultComputerId: null,
+    starred: false,
+    createdAt: 0,
+    lastActivityAt: 0,
+    conversationCount: 0,
+  });
+
+  it("is 'Dispatch' for the home route", () => {
+    expect(pageTitle({ kind: "home" }, [])).toBe("Dispatch");
+    expect(pageTitle({ kind: "home" }, [ws("default", "Default")])).toBe("Dispatch");
+  });
+
+  it("is 'Dispatch: {title}' for a workspace with a display title", () => {
+    const list = [ws("default", "Default"), ws("my-ws", "My Workspace")];
+    expect(pageTitle({ kind: "workspace", id: "my-ws" }, list)).toBe("Dispatch: My Workspace");
+  });
+
+  it("falls back to the slug (id) until the list has loaded the workspace", () => {
+    expect(pageTitle({ kind: "workspace", id: "pending" }, [])).toBe("Dispatch: pending");
+  });
+
+  it("uses the id as the title when it was never customized (defaults to id)", () => {
+    const list = [ws("default", "default")];
+    expect(pageTitle({ kind: "workspace", id: "default" }, list)).toBe("Dispatch: default");
+  });
+
+  it("matches by id, not title", () => {
+    const list = [ws("a", "shared-title"), ws("b", "shared-title")];
+    expect(pageTitle({ kind: "workspace", id: "b" }, list)).toBe("Dispatch: shared-title");
+  });
+});
+
+describe("sortWorkspaces", () => {
+  const entry = (id: string, starred: boolean, lastActivityAt: number): WorkspaceEntry => ({
+    id,
+    title: id,
+    defaultCwd: null,
+    defaultComputerId: null,
+    starred,
+    createdAt: 0,
+    lastActivityAt,
+    conversationCount: 0,
+  });
+
+  it("puts starred workspaces before unstarred", () => {
+    const list = [entry("plain", false, 9_000), entry("star", true, 1_000)];
+    expect(sortWorkspaces(list).map((w) => w.id)).toEqual(["star", "plain"]);
+  });
+
+  it("within the starred group, sorts by lastActivityAt desc", () => {
+    const list = [
+      entry("old-star", true, 1_000),
+      entry("new-star", true, 5_000),
+      entry("plain", false, 9_000),
+    ];
+    expect(sortWorkspaces(list).map((w) => w.id)).toEqual(["new-star", "old-star", "plain"]);
+  });
+
+  it("within the unstarred group, sorts by lastActivityAt desc", () => {
+    const list = [
+      entry("star", true, 1_000),
+      entry("old-plain", false, 1_000),
+      entry("new-plain", false, 5_000),
+    ];
+    expect(sortWorkspaces(list).map((w) => w.id)).toEqual(["star", "new-plain", "old-plain"]);
+  });
+
+  it("returns a new array (does not mutate the input)", () => {
+    const list = [entry("plain", false, 9_000), entry("star", true, 1_000)];
+    const sorted = sortWorkspaces(list);
+    expect(sorted).not.toBe(list);
+    // Input order is preserved (not mutated).
+    expect(list.map((w) => w.id)).toEqual(["plain", "star"]);
+    expect(sorted.map((w) => w.id)).toEqual(["star", "plain"]);
+  });
+
+  it("handles an empty list", () => {
+    expect(sortWorkspaces([])).toEqual([]);
+  });
+
+  it("is stable for equal lastActivityAt within a group", () => {
+    const list = [
+      entry("first", false, 5_000),
+      entry("second", false, 5_000),
+      entry("third", false, 5_000),
+    ];
+    expect(sortWorkspaces(list).map((w) => w.id)).toEqual(["first", "second", "third"]);
+  });
+});
+
+describe("applyStarred", () => {
+  const entry = (id: string, starred: boolean): WorkspaceEntry => ({
+    id,
+    title: id,
+    defaultCwd: null,
+    defaultComputerId: null,
+    starred,
+    createdAt: 0,
+    lastActivityAt: 0,
+    conversationCount: 0,
+  });
+
+  it("sets the named workspace's starred flag", () => {
+    const list = [entry("a", false), entry("b", false)];
+    const next = applyStarred(list, "b", true);
+    expect(next.map((w) => [w.id, w.starred])).toEqual([
+      ["a", false],
+      ["b", true],
+    ]);
+  });
+
+  it("returns a new array (does not mutate the input)", () => {
+    const list = [entry("a", false)];
+    const next = applyStarred(list, "a", true);
+    expect(next).not.toBe(list);
+    expect(list[0]?.starred).toBe(false);
+    expect(next[0]?.starred).toBe(true);
+  });
+
+  it("leaves other entries referentially unchanged (only the target is replaced)", () => {
+    const a = entry("a", false);
+    const b = entry("b", false);
+    const next = applyStarred([a, b], "b", true);
+    expect(next[0]).toBe(a);
+    expect(next[1]).not.toBe(b);
+  });
+
+  it("leaves the list unchanged when the id is absent (not yet loaded)", () => {
+    const list = [entry("a", false)];
+    const next = applyStarred(list, "missing", true);
+    expect(next.map((w) => [w.id, w.starred])).toEqual([["a", false]]);
+  });
+
+  it("can revert by re-applying the previous value", () => {
+    const list = [entry("a", false)];
+    const optimistic = applyStarred(list, "a", true);
+    expect(optimistic[0]?.starred).toBe(true);
+    const reverted = applyStarred(optimistic, "a", false);
+    expect(reverted[0]?.starred).toBe(false);
+  });
+});
diff --git a/src/features/workspaces/logic/view-model.ts b/src/features/workspaces/logic/view-model.ts
new file mode 100644
index 0000000..b994b7c
--- /dev/null
+++ b/src/features/workspaces/logic/view-model.ts
@@ -0,0 +1,71 @@
+/**
+ * Pure view-model helpers for the workspaces feature — zero DOM, zero effects.
+ */
+
+import type { WorkspaceEntry } from "@dispatch/wire";
+import type { Route } from "./route";
+
+/**
+ * The browser tab / page (`document.title`) text for a route. The home route
+ * (`/`) is "Dispatch"; a workspace route (`/<id>`) is "Dispatch: {title}",
+ * using the workspace's display title and falling back to the URL slug (`id`)
+ * until the workspace list has loaded it — the backend defaults a workspace's
+ * title to its id, so the slug is the correct transient value. Pure: route +
+ * workspaces in, string out.
+ */
+export function pageTitle(route: Route, workspaces: readonly WorkspaceEntry[]): string {
+  if (route.kind === "home") return "Dispatch";
+  const ws = workspaces.find((w) => w.id === route.id);
+  return `Dispatch: ${ws?.title ?? route.id}`;
+}
+
+/**
+ * Sort workspaces for display: starred first, then most-recently-active. Pure:
+ * the list in, a NEW sorted array out (the input is not mutated). Starred
+ * workspaces jump to the top (the FE-side echo of their concurrency-priority);
+ * within each group (starred / not) `lastActivityAt` desc breaks ties, matching
+ * the backend's list ordering. Stable for equal `lastActivityAt`.
+ */
+export function sortWorkspaces<T extends WorkspaceEntry>(workspaces: readonly T[]): T[] {
+  return [...workspaces].sort((a, b) => {
+    if (a.starred !== b.starred) return a.starred ? -1 : 1;
+    return b.lastActivityAt - a.lastActivityAt;
+  });
+}
+
+/**
+ * Return a NEW list with the one workspace's `starred` flag set (immutably —
+ * the entry is replaced, the rest keep their identity). Pure: the optimistic
+ * star/unstar transformation shared by the apply + the error revert. A missing
+ * `id` (not yet in the list — e.g. starring a workspace the home view hasn't
+ * loaded) leaves the list unchanged; the backend's create-on-miss still applies
+ * server-side and a subsequent refresh reconciles.
+ */
+export function applyStarred<T extends WorkspaceEntry>(
+  workspaces: readonly T[],
+  id: string,
+  starred: boolean,
+): T[] {
+  return workspaces.map((w) => (w.id === id ? { ...w, starred } : w));
+}
+
+/**
+ * Format an epoch-ms timestamp as a short relative string ("now", "3m", "2h",
+ * "5d", or a date). Pure: `now` + `then` in, string out. Future timestamps
+ * (a workspace just created) read as "now".
+ */
+export function relativeTime(then: number, now: number): string {
+  const diff = now - then;
+  if (diff < 60_000) return "now";
+  const mins = Math.floor(diff / 60_000);
+  if (mins < 60) return `${mins}m`;
+  const hours = Math.floor(mins / 60);
+  if (hours < 24) return `${hours}h`;
+  const days = Math.floor(hours / 24);
+  if (days < 7) return `${days}d`;
+  // Beyond a week: a short date (MM/DD). Uses UTC parts for determinism in tests.
+  const d = new Date(then);
+  const month = String(d.getUTCMonth() + 1).padStart(2, "0");
+  const day = String(d.getUTCDate()).padStart(2, "0");
+  return `${month}/${day}`;
+}
diff --git a/src/features/workspaces/store.svelte.ts b/src/features/workspaces/store.svelte.ts
new file mode 100644
index 0000000..22d73b5
--- /dev/null
+++ b/src/features/workspaces/store.svelte.ts
@@ -0,0 +1,114 @@
+import type { EnsureWorkspaceRequest } from "@dispatch/transport-contract";
+import type { Workspace, WorkspaceEntry } from "@dispatch/wire";
+import type { WorkspaceHttp, WorkspaceResult } from "./adapter/http";
+import { applyStarred, sortWorkspaces } from "./logic/view-model";
+
+/**
+ * Workspace store — a thin reactive wrapper over the pure HTTP edge. Owns the
+ * list + loading/error state; mutations call the injected `WorkspaceHttp` and
+ * refresh the list. State is per-instance (no ambient store); subscriptions are
+ * owned by the composition root.
+ */
+export interface WorkspaceStore {
+  /**
+   * All workspaces, sorted for display: starred first (their FE-side echo of
+   * concurrency-priority), then most-recently-active. The backing list is the
+   * backend's `lastActivityAt`-desc order; this getter re-sorts reactively.
+   */
+  readonly list: readonly WorkspaceEntry[];
+  readonly loading: boolean;
+  readonly error: string | null;
+  /** Refresh the list from the backend. */
+  refresh(): Promise<void>;
+  /** `PUT /workspaces/:id` (create-on-miss). Returns the workspace or an error. */
+  ensure(id: string, body?: EnsureWorkspaceRequest): Promise<WorkspaceResult<Workspace>>;
+  /** Rename a workspace (display only; id unchanged). */
+  rename(id: string, title: string): Promise<WorkspaceResult<Workspace>>;
+  /** Set/clear a workspace's default cwd. */
+  setDefaultCwd(id: string, defaultCwd: string | null): Promise<WorkspaceResult<Workspace>>;
+  /** Set/clear a workspace's default computer (SSH `Host` alias; null = local). */
+  setDefaultComputer(id: string, computerId: string | null): Promise<WorkspaceResult<Workspace>>;
+  /**
+   * Toggle a workspace's star (concurrency priority). Optimistic: the local
+   * `starred` flag flips immediately and the sorted list re-orders; on error it
+   * reverts to the prior value. No full refresh on success (avoids flicker).
+   */
+  setStarred(id: string, starred: boolean): Promise<WorkspaceResult<Workspace>>;
+  /** Delete a workspace (closes its conversations, reassigns to "default"). */
+  remove(id: string): Promise<WorkspaceResult<{ closedCount: number }>>;
+}
+
+export function createWorkspaceStore(http: WorkspaceHttp): WorkspaceStore {
+  let list = $state<readonly WorkspaceEntry[]>([]);
+  // Sorted view (starred first, then most-recent) — derived so it recomputes
+  // only when the backing list changes, not on every read.
+  let sorted = $derived(sortWorkspaces(list));
+  let loading = $state(false);
+  let error = $state<string | null>(null);
+
+  return {
+    get list(): readonly WorkspaceEntry[] {
+      return sorted;
+    },
+    get loading(): boolean {
+      return loading;
+    },
+    get error(): string | null {
+      return error;
+    },
+
+    async refresh(): Promise<void> {
+      loading = true;
+      error = null;
+      try {
+        list = await http.list();
+      } catch (err) {
+        error = err instanceof Error ? err.message : "Failed to load workspaces";
+      } finally {
+        loading = false;
+      }
+    },
+
+    async ensure(id, body): Promise<WorkspaceResult<Workspace>> {
+      const result = await http.ensure(id, body);
+      if (result.ok) void this.refresh();
+      return result;
+    },
+
+    async rename(id, title): Promise<WorkspaceResult<Workspace>> {
+      const result = await http.setTitle(id, title);
+      if (result.ok) void this.refresh();
+      return result;
+    },
+
+    async setDefaultCwd(id, defaultCwd): Promise<WorkspaceResult<Workspace>> {
+      const result = await http.setDefaultCwd(id, defaultCwd);
+      if (result.ok) void this.refresh();
+      return result;
+    },
+
+    async setDefaultComputer(id, computerId): Promise<WorkspaceResult<Workspace>> {
+      const result = await http.setDefaultComputer(id, computerId);
+      if (result.ok) void this.refresh();
+      return result;
+    },
+
+    async setStarred(id, starred): Promise<WorkspaceResult<Workspace>> {
+      const prev = list.find((w) => w.id === id)?.starred ?? false;
+      // Optimistic: flip immediately (the sorted getter re-orders reactively).
+      list = applyStarred(list, id, starred);
+      const result = starred ? await http.star(id) : await http.unstar(id);
+      if (!result.ok) {
+        // Revert the optimistic flip on failure.
+        list = applyStarred(list, id, prev);
+      }
+      return result;
+    },
+
+    async remove(id): Promise<WorkspaceResult<{ closedCount: number }>> {
+      const result = await http.delete(id);
+      if (result.ok) void this.refresh();
+      return result;
+    },
+  };
+}
diff --git a/src/features/workspaces/store.test.ts b/src/features/workspaces/store.test.ts
new file mode 100644
index 0000000..4caac9f
--- /dev/null
+++ b/src/features/workspaces/store.test.ts
@@ -0,0 +1,145 @@
+import type { Workspace, WorkspaceEntry } from "@dispatch/wire";
+import { describe, expect, it, vi } from "vitest";
+import type { WorkspaceResult } from "./adapter/http";
+import { createWorkspaceStore } from "./store.svelte";
+
+function entry(overrides: Partial<WorkspaceEntry> = {}): WorkspaceEntry {
+  return {
+    id: "a",
+    title: "A",
+    defaultCwd: null,
+    defaultComputerId: null,
+    starred: false,
+    createdAt: 1,
+    lastActivityAt: 2,
+    conversationCount: 0,
+    ...overrides,
+  };
+}
+
+/** A fake `WorkspaceHttp` with stubbed star/unstar + a controllable list. */
+function fakeHttp(opts: {
+  list?: readonly WorkspaceEntry[];
+  star?: (id: string) => Promise<WorkspaceResult<Workspace>>;
+  unstar?: (id: string) => Promise<WorkspaceResult<Workspace>>;
+}) {
+  return {
+    list: vi.fn(async (): Promise<readonly WorkspaceEntry[]> => opts.list ?? []),
+    ensure: vi.fn(),
+    get: vi.fn(),
+    setTitle: vi.fn(),
+    setDefaultCwd: vi.fn(),
+    setDefaultComputer: vi.fn(),
+    star:
+      opts.star ??
+      vi.fn(
+        async (id: string): Promise<WorkspaceResult<Workspace>> => ({
+          ok: true,
+          value: entry({ id, starred: true }),
+        }),
+      ),
+    unstar:
+      opts.unstar ??
+      vi.fn(
+        async (id: string): Promise<WorkspaceResult<Workspace>> => ({
+          ok: true,
+          value: entry({ id, starred: false }),
+        }),
+      ),
+    delete: vi.fn(),
+  };
+}
+
+describe("createWorkspaceStore — setStarred", () => {
+  it("optimistically flips starred to true before the request resolves", async () => {
+    const http = fakeHttp({ list: [entry({ id: "a", starred: false })] });
+    const store = createWorkspaceStore(http);
+    await store.refresh();
+
+    let observedDuringCall = false;
+    http.star = vi.fn(async (_id: string): Promise<WorkspaceResult<Workspace>> => {
+      // While the request is in flight, the store already shows the new state.
+      observedDuringCall = store.list[0]?.starred === true;
+      return { ok: true, value: entry({ id: "a", starred: true }) };
+    });
+
+    await store.setStarred("a", true);
+
+    expect(observedDuringCall).toBe(true);
+    expect(http.star).toHaveBeenCalledWith("a");
+    expect(store.list[0]?.starred).toBe(true);
+  });
+
+  it("calls unstar (DELETE) when starring false", async () => {
+    const http = fakeHttp({ list: [entry({ id: "a", starred: true })] });
+    const store = createWorkspaceStore(http);
+    await store.refresh();
+
+    await store.setStarred("a", false);
+
+    expect(http.unstar).toHaveBeenCalledWith("a");
+    expect(http.star).not.toHaveBeenCalled();
+    expect(store.list[0]?.starred).toBe(false);
+  });
+
+  it("reverts the optimistic flip on error", async () => {
+    const http = fakeHttp({ list: [entry({ id: "a", starred: false })] });
+    const store = createWorkspaceStore(http);
+    await store.refresh();
+
+    http.star = vi.fn(
+      async (): Promise<WorkspaceResult<Workspace>> => ({ ok: false, error: "boom" }),
+    );
+
+    const result = await store.setStarred("a", true);
+
+    expect(result).toEqual({ ok: false, error: "boom" });
+    // Reverted to the prior value.
+    expect(store.list[0]?.starred).toBe(false);
+  });
+
+  it("does not set the store-wide load error on a star failure", async () => {
+    const http = fakeHttp({ list: [entry({ id: "a", starred: false })] });
+    const store = createWorkspaceStore(http);
+    await store.refresh();
+
+    http.star = vi.fn(
+      async (): Promise<WorkspaceResult<Workspace>> => ({ ok: false, error: "boom" }),
+    );
+    await store.setStarred("a", true);
+
+    expect(store.error).toBeNull();
+  });
+
+  it("re-sorts so starred workspaces bubble to the top", async () => {
+    const http = fakeHttp({
+      list: [
+        entry({ id: "plain", starred: false, lastActivityAt: 9_000 }),
+        entry({ id: "star", starred: false, lastActivityAt: 1_000 }),
+      ],
+    });
+    const store = createWorkspaceStore(http);
+    await store.refresh();
+
+    // Before: backend order (most-active first).
+    expect(store.list.map((w) => w.id)).toEqual(["plain", "star"]);
+
+    await store.setStarred("star", true);
+
+    // After: starred jumps above the more-recent unstarred workspace.
+    expect(store.list.map((w) => w.id)).toEqual(["star", "plain"]);
+  });
+
+  it("treats a missing id as not-starred and still calls through (create-on-miss)", async () => {
+    const http = fakeHttp({ list: [] });
+    const store = createWorkspaceStore(http);
+    await store.refresh();
+
+    const result = await store.setStarred("ghost", true);
+
+    expect(result.ok).toBe(true);
+    expect(http.star).toHaveBeenCalledWith("ghost");
+    // The list is unchanged (the workspace wasn't loaded); a refresh reconciles.
+    expect(store.list).toHaveLength(0);
+  });
+});
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>