diff --git a/apps/web/app/actions/profile.ts b/apps/web/app/actions/profile.ts
new file mode 100644
index 000000000..5db034b14
--- /dev/null
+++ b/apps/web/app/actions/profile.ts
@@ -0,0 +1,85 @@
+"use server";
+
+import { eq } from "drizzle-orm";
+import { revalidatePath } from "next/cache";
+import { redirect } from "next/navigation";
+
+import { schema } from "@codev/db";
+
+import { unstable_update } from "@/auth";
+import { getNewAccountPasswordError } from "@/lib/auth/password-policy";
+import { requireUser } from "@/lib/auth/session";
+import { hashPassword, verifyPassword } from "@/lib/platform/crypto";
+import { getDatabase } from "@/lib/platform/database";
+
+const PROFILE_PATH = "/settings/personal/profile";
+const MAX_DISPLAY_NAME_LENGTH = 80;
+
+export async function updateDisplayName(formData: FormData) {
+  const user = await requireUser();
+  const name = String(formData.get("name") ?? "")
+    .trim()
+    .replace(/\s+/g, " ");
+
+  if (!name || name.length > MAX_DISPLAY_NAME_LENGTH) {
+    redirect(`${PROFILE_PATH}?error=name`);
+  }
+
+  await getDatabase()
+    .update(schema.users)
+    .set({ name, updatedAt: new Date() })
+    .where(eq(schema.users.id, user.id));
+
+  // The session token carries the name shown in the app shell. Refreshing it
+  // is best effort: the database is already correct, and the token catches up
+  // at the next sign-in if this fails.
+  try {
+    await unstable_update({ user: { name } });
+  } catch {
+    // Intentionally ignored.
+  }
+
+  revalidatePath("/settings", "layout");
+  redirect(`${PROFILE_PATH}?name=saved`);
+}
+
+/**
+ * Changes the password of an account that already has one. Unlike
+ * `setAccountPassword`, which only ever fills an empty hash, this requires the
+ * current password, so a hijacked session alone cannot overwrite it.
+ */
+export async function changeAccountPassword(
+  redirectTo: string,
+  formData: FormData,
+) {
+  const user = await requireUser();
+  const current = String(formData.get("current") ?? "");
+  const password = String(formData.get("password") ?? "");
+  const confirm = String(formData.get("confirm") ?? "");
+
+  const [row] = await getDatabase()
+    .select({ passwordHash: schema.users.passwordHash })
+    .from(schema.users)
+    .where(eq(schema.users.id, user.id))
+    .limit(1);
+
+  if (!row?.passwordHash) {
+    redirect(`${redirectTo}?error=nopassword`);
+  }
+  if (!(await verifyPassword(current, row.passwordHash))) {
+    redirect(`${redirectTo}?error=current`);
+  }
+  if (password !== confirm) {
+    redirect(`${redirectTo}?error=match`);
+  }
+  if (getNewAccountPasswordError(password)) {
+    redirect(`${redirectTo}?error=policy`);
+  }
+
+  await getDatabase()
+    .update(schema.users)
+    .set({ passwordHash: await hashPassword(password), updatedAt: new Date() })
+    .where(eq(schema.users.id, user.id));
+
+  redirect(`${redirectTo}?password=changed`);
+}
diff --git a/apps/web/app/api/settings/export/route.ts b/apps/web/app/api/settings/export/route.ts
new file mode 100644
index 000000000..7891b8aae
--- /dev/null
+++ b/apps/web/app/api/settings/export/route.ts
@@ -0,0 +1,66 @@
+import { eq } from "drizzle-orm";
+
+import { schema } from "@codev/db";
+
+import { getConnectedAccounts } from "@/lib/auth/identity";
+import { apiError, getApiUser } from "@/lib/http/api";
+import { getDatabase } from "@/lib/platform/database";
+import { listUserEnvironmentVariables } from "@/lib/providers/user-environment";
+
+/**
+ * A copy of the account facts a member can see in Settings. Secrets are never
+ * included: environment variables are listed by name only, and provider
+ * credentials are not exported at all.
+ */
+export async function GET() {
+  const user = await getApiUser();
+  if (!user) return apiError(new Error("Authentication required."), 401);
+
+  try {
+    const [row] = await getDatabase()
+      .select({
+        name: schema.users.name,
+        email: schema.users.email,
+        login: schema.users.login,
+        createdAt: schema.users.createdAt,
+      })
+      .from(schema.users)
+      .where(eq(schema.users.id, user.id))
+      .limit(1);
+    const accounts = await getConnectedAccounts(user.id);
+    const variables = await listUserEnvironmentVariables(user.id);
+
+    const body = {
+      exportedAt: new Date().toISOString(),
+      profile: {
+        id: user.id,
+        name: row?.name ?? null,
+        email: row?.email ?? null,
+        login: row?.login ?? null,
+        createdAt: row?.createdAt?.toISOString() ?? null,
+      },
+      signInMethods: {
+        google: accounts.google.connected,
+        github: accounts.github.connected
+          ? { login: accounts.github.login ?? null }
+          : false,
+        password: accounts.hasPassword,
+      },
+      environmentVariables: variables.map((variable) => ({
+        name: variable.name,
+        createdAt: variable.createdAt,
+        updatedAt: variable.updatedAt,
+      })),
+    };
+
+    return new Response(JSON.stringify(body, null, 2), {
+      headers: {
+        "Content-Type": "application/json",
+        "Content-Disposition": 'attachment; filename="codev-account.json"',
+        "Cache-Control": "no-store",
+      },
+    });
+  } catch (error) {
+    return apiError(error);
+  }
+}
diff --git a/apps/web/app/app-theme.css b/apps/web/app/app-theme.css
index aa0e30b77..d2c82af02 100644
--- a/apps/web/app/app-theme.css
+++ b/apps/web/app/app-theme.css
@@ -502,6 +502,67 @@
   position: relative;
 }
 
+/* Hide/show control. Expanded, it floats over the sidebar header's right edge;
+   collapsed, the rail becomes a slim column that keeps it reachable. */
+.app-sidebar-rail {
+  position: fixed;
+  top: 14px;
+  left: 176px;
+  z-index: 30;
+}
+
+.app-sidebar-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  opacity: 0.7;
+  transition:
+    background-color 150ms ease,
+    opacity 150ms ease;
+}
+
+.app-sidebar-toggle:hover {
+  background: rgba(var(--ink-rgb), 0.08);
+  opacity: 1;
+}
+
+.app-sidebar-toggle:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
+  opacity: 1;
+}
+
+/* Collapsed: no column is reserved. The toggle floats over the top-left corner
+   with its own surface so it is visible on any page; pages that put content
+   there (the settings nav) offset themselves via the collapsed class. */
+.app-with-sidebar.is-sidebar-collapsed {
+  grid-template-columns: minmax(0, 1fr);
+}
+
+.app-with-sidebar.is-sidebar-collapsed .app-sidebar {
+  display: none;
+}
+
+.app-with-sidebar.is-sidebar-collapsed .app-sidebar-rail {
+  top: 10px;
+  left: 10px;
+}
+
+.app-with-sidebar.is-sidebar-collapsed .app-sidebar-toggle {
+  border: 1px solid var(--line);
+  background: rgba(var(--paper-rgb), 0.92);
+  color: var(--ink);
+  opacity: 1;
+  backdrop-filter: blur(8px);
+}
+
 .dashboard-shell {
   min-height: 100dvh;
   padding: clamp(32px, 5vw, 64px) clamp(20px, 5vw, 64px) 96px;
@@ -794,6 +855,19 @@
     grid-template-rows: auto auto;
   }
 
+  /* The rail is a desktop affordance; the mobile bar is always shown. */
+  .app-sidebar-rail {
+    display: none;
+  }
+
+  .app-with-sidebar.is-sidebar-collapsed {
+    grid-template-columns: 1fr;
+  }
+
+  .app-with-sidebar.is-sidebar-collapsed .app-sidebar {
+    display: flex;
+  }
+
   .app-sidebar {
     flex-direction: row;
     align-items: center;
diff --git a/apps/web/app/gen2/gen2.css b/apps/web/app/gen2/gen2.css
index 25c1acd6b..2efa0c961 100644
--- a/apps/web/app/gen2/gen2.css
+++ b/apps/web/app/gen2/gen2.css
@@ -1,186 +1,10 @@
-.gen2-shell {
-  width: min(960px, 100%);
-  min-height: 100dvh;
-  margin: 0 auto;
-  padding: clamp(32px, 5vw, 64px) clamp(20px, 4vw, 48px) 96px;
-}
-
-.gen2-shell h1 {
-  margin: 0;
-  font-size: clamp(1.75rem, 3vw, 2.25rem);
-  font-weight: 640;
-  letter-spacing: -0.03em;
-  line-height: 1.15;
-}
-
-.gen2-shell h2 {
-  margin: 0 0 12px;
-  font-size: 0.95rem;
-  font-weight: 600;
-}
-
-.gen2-lede {
-  margin: 12px 0 32px;
-  max-width: 42rem;
-  color: var(--muted);
-  font-size: 1.05rem;
-  line-height: 1.6;
-}
-
-.gen2-create,
-.gen2-share,
-.gen2-actions {
+.gen2-share {
   display: flex;
   flex-wrap: wrap;
   align-items: flex-end;
   gap: 12px;
 }
 
-.gen2-shell .primary-button,
-.gen2-shell .secondary-button,
-.gen2-card {
-  cursor: pointer;
-}
-
-.gen2-field {
-  display: flex;
-  flex: 1 1 16rem;
-  flex-direction: column;
-  gap: 8px;
-  color: var(--muted);
-  font-size: 0.8125rem;
-}
-
-.gen2-field input {
-  min-height: 46px;
-  padding: 0 14px;
-  border: 1px solid var(--line);
-  border-radius: 10px;
-  background: var(--surface-2);
-  color: var(--ink);
-  font-size: 0.95rem;
-}
-
-.gen2-field input:focus-visible {
-  outline: 2px solid var(--gold);
-  outline-offset: 2px;
-}
-
-.gen2-list {
-  display: grid;
-  gap: 12px;
-  margin: 40px 0 0;
-  padding: 0;
-  list-style: none;
-}
-
-.gen2-card-row {
-  display: flex;
-  align-items: stretch;
-  gap: 8px;
-}
-
-.gen2-card-row .gen2-card {
-  flex: 1;
-  min-width: 0;
-}
-
-.gen2-card {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 16px;
-  min-height: 72px;
-  padding: 20px 22px;
-  border: 1px solid var(--line);
-  border-radius: 16px;
-  background: var(--surface-2);
-  color: inherit;
-  text-decoration: none;
-  transition:
-    transform 200ms ease,
-    border-color 200ms ease;
-}
-
-.gen2-card:hover {
-  transform: translateY(-2px);
-  border-color: var(--line-strong);
-}
-
-.gen2-card-pending {
-  cursor: default;
-  opacity: 0.72;
-}
-
-.gen2-card:focus-visible {
-  outline: 2px solid var(--gold);
-  outline-offset: 3px;
-}
-
-.gen2-delete-button {
-  display: inline-flex;
-  flex: 0 0 48px;
-  align-items: center;
-  justify-content: center;
-  min-height: 48px;
-  margin-block: auto;
-  padding: 0;
-  border: 1px solid var(--line);
-  border-radius: 14px;
-  background: var(--surface-2);
-  color: var(--muted);
-  cursor: pointer;
-  transition:
-    color 160ms ease,
-    border-color 160ms ease,
-    opacity 160ms ease;
-}
-
-.gen2-delete-button:hover:not(:disabled) {
-  border-color: #ef4444;
-  color: #ef4444;
-}
-
-.gen2-delete-button:focus-visible {
-  outline: 2px solid var(--gold);
-  outline-offset: 2px;
-}
-
-.gen2-delete-button:disabled {
-  cursor: wait;
-  opacity: 0.55;
-}
-
-.gen2-delete-spinner {
-  animation: gen2-delete-spin 900ms linear infinite;
-}
-
-.gen2-action-error {
-  margin: 8px 0 0;
-  color: #ffb3a6;
-  font-size: 0.875rem;
-  line-height: 1.5;
-}
-
-@keyframes gen2-delete-spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-.gen2-empty {
-  margin: 40px 0 0;
-  color: var(--muted);
-}
-
-.gen2-create-limit {
-  flex-basis: 100%;
-  margin: 0;
-  color: var(--muted);
-  font-size: 0.875rem;
-  line-height: 1.5;
-}
-
 .gen2-room-header {
   display: flex;
   flex-wrap: wrap;
@@ -310,10 +134,6 @@
   opacity: 0.62;
 }
 
-.gen2-chat-thread .gen2-empty {
-  margin: 0 0 16px;
-}
-
 .gen2-agent-log {
   min-height: 200px;
   max-height: min(52vh, 440px);
@@ -333,10 +153,6 @@
   list-style: none;
 }
 
-.gen2-agent-log .gen2-empty {
-  margin: 0;
-}
-
 .gen2-agent-composer-hero {
   margin-top: 16px;
 }
@@ -377,29 +193,6 @@
   margin-top: 16px;
 }
 
-.gen2-field textarea {
-  min-height: 92px;
-  padding: 12px 14px;
-  border: 1px solid var(--line);
-  border-radius: 10px;
-  background: var(--surface-2);
-  color: var(--ink);
-  font: inherit;
-  font-size: 0.95rem;
-  line-height: 1.5;
-  resize: vertical;
-}
-
-.gen2-field textarea:focus-visible {
-  outline: 2px solid var(--gold);
-  outline-offset: 2px;
-}
-
-.gen2-field textarea:disabled {
-  cursor: not-allowed;
-  opacity: 0.62;
-}
-
 .gen2-agent-composer-actions {
   display: flex;
   justify-content: flex-end;
@@ -453,10 +246,6 @@
     transition: none;
   }
 
-  .gen2-delete-spinner {
-    animation: none;
-  }
-
   .gen2-card:hover,
   .primary-button:hover {
     transform: none;
@@ -472,144 +261,3 @@
     max-height: 30vh;
   }
 }
-
-@media (max-width: 520px) {
-  .gen2-card {
-    flex-wrap: wrap;
-    justify-content: flex-start;
-    gap: 4px 12px;
-  }
-
-  .gen2-card > strong {
-    flex: 1 0 100%;
-  }
-
-  .gen2-card-repo {
-    flex: 1;
-    min-width: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .gen2-card .gen2-status {
-    min-height: 32px;
-  }
-}
-
-/* --------------------------------------------- create from a repository */
-
-.gen2-create-row {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 10px;
-}
-
-.gen2-create-row .primary-button,
-.gen2-create-row .secondary-button {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.gen2-create-select {
-  min-height: 40px;
-  padding: 0 10px;
-  border: 1px solid var(--line);
-  border-radius: 10px;
-  background: var(--surface-2);
-  color: var(--ink);
-  font-size: 0.8125rem;
-}
-
-.gen2-create-search {
-  display: flex;
-  flex: 1 1 18rem;
-  align-items: center;
-  gap: 8px;
-  padding: 0 12px;
-  min-height: 40px;
-  border: 1px solid var(--line);
-  border-radius: 10px;
-  background: var(--surface-2);
-  color: var(--muted);
-}
-
-.gen2-create-search input {
-  flex: 1;
-  border: 0;
-  background: none;
-  color: var(--ink);
-  font: inherit;
-  font-size: 0.875rem;
-  outline: none;
-}
-
-.gen2-create-select:focus-visible,
-.gen2-create-search:focus-within {
-  outline: 2px solid var(--gold);
-  outline-offset: 1px;
-}
-
-.gen2-repo-list {
-  display: grid;
-  gap: 2px;
-  margin: 14px 0 0;
-  padding: 0;
-  max-height: 20rem;
-  list-style: none;
-  overflow: auto;
-}
-
-.gen2-repo-list button {
-  display: flex;
-  align-items: center;
-  gap: 9px;
-  width: 100%;
-  padding: 9px 12px;
-  border: 0;
-  border-radius: 9px;
-  background: none;
-  color: var(--ink);
-  cursor: pointer;
-  font: inherit;
-  font-size: 0.8125rem;
-  text-align: left;
-}
-
-.gen2-repo-list button:hover:not(:disabled) {
-  background: var(--surface-2);
-}
-
-.gen2-repo-list button:focus-visible {
-  outline: 2px solid var(--gold);
-  outline-offset: -2px;
-}
-
-.gen2-repo-name {
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.gen2-repo-tag,
-.gen2-repo-branch,
-.gen2-card-repo {
-  color: var(--muted);
-  font-size: 0.6875rem;
-}
-
-.gen2-repo-tag {
-  padding: 1px 7px;
-  border: 1px solid var(--line);
-  border-radius: 999px;
-}
-
-.gen2-repo-mark {
-  flex: none;
-  width: 14px;
-  height: 14px;
-}
diff --git a/apps/web/app/gen2/page.tsx b/apps/web/app/gen2/page.tsx
index 00d526cba..4658ab4e4 100644
--- a/apps/web/app/gen2/page.tsx
+++ b/apps/web/app/gen2/page.tsx
@@ -1,5 +1,7 @@
 import type { Metadata } from "next";
 
+import "@/app/product-theme.css";
+
 import { CreateGen2WorkspaceForm } from "@/components/gen2/create-workspace-form";
 import { Gen2WorkspaceList } from "@/components/gen2/workspace-list";
 import { AppChrome } from "@/components/shell/app-chrome";
@@ -19,23 +21,32 @@ export default async function Gen2WorkspacesPage() {
 
   return (
     <AppChrome user={user} sidebar>
-      <main className="gen2-shell">
-        <p className="eyebrow">Gen 2</p>
-        <h1>Cloud workspaces</h1>
-        <p className="gen2-lede">
-          A workspace is a Firecracker instance you can share. Open one and its
-          machine comes up; send the link and anyone you invite works on that
-          same machine, alongside an AI agent.
-        </p>
-        <CreateGen2WorkspaceForm
-          githubConnected={github.connected}
-          ownedWorkspaceCount={
-            workspaces.filter((workspace) => workspace.role === "owner").length
-          }
-          appSlug={process.env.GITHUB_APP_SLUG}
-          connectGitHub={connectGitHubAccount.bind(null, "/gen2")}
-        />
-        <Gen2WorkspaceList workspaces={workspaces} />
+      <main className="product-scope min-h-dvh px-6 py-12 sm:px-12">
+        <div className="mx-auto flex max-w-[960px] flex-col gap-8">
+          <header className="space-y-2">
+            <span className="inline-block text-[11px] font-bold tracking-[0.12em] text-primary uppercase">
+              Gen 2
+            </span>
+            <h1 className="m-0 text-3xl leading-tight font-semibold tracking-tight">
+              Cloud workspaces
+            </h1>
+            <p className="max-w-2xl text-[15px] leading-relaxed text-muted-foreground">
+              A workspace is a cloud computer you and your teammates share, with
+              an AI agent built in. Open one and it starts on its own; send the
+              link and anyone you invite works on that same computer.
+            </p>
+          </header>
+          <CreateGen2WorkspaceForm
+            githubConnected={github.connected}
+            ownedWorkspaceCount={
+              workspaces.filter((workspace) => workspace.role === "owner")
+                .length
+            }
+            appSlug={process.env.GITHUB_APP_SLUG}
+            connectGitHub={connectGitHubAccount.bind(null, "/gen2")}
+          />
+          <Gen2WorkspaceList workspaces={workspaces} />
+        </div>
       </main>
     </AppChrome>
   );
diff --git a/apps/web/app/settings/personal/environment/page.tsx b/apps/web/app/settings/personal/environment/page.tsx
index 62af269db..c88967c2e 100644
--- a/apps/web/app/settings/personal/environment/page.tsx
+++ b/apps/web/app/settings/personal/environment/page.tsx
@@ -2,9 +2,7 @@ import { EnvironmentVariablesPanel } from "@/components/settings/environment-var
 import {
   OrcaPageHeader,
   OrcaPageShell,
-  OrcaSubsectionHeader,
 } from "@/components/settings/orca-style";
-import { Card } from "@/components/ui/card";
 import { listUserEnvironmentVariables } from "@/lib/providers/user-environment";
 import { requireUser } from "@/lib/auth/session";
 
@@ -18,13 +16,7 @@ export default async function PersonalEnvironmentPage() {
         description="Store encrypted key/value pairs for your personal CoDev workflows."
         title="Environment Variables"
       />
-      <Card className="space-y-3">
-        <OrcaSubsectionHeader
-          description="Encrypted at rest. Values are write-only after you save them."
-          title="Personal .env"
-        />
-        <EnvironmentVariablesPanel initialVariables={variables} />
-      </Card>
+      <EnvironmentVariablesPanel initialVariables={variables} />
     </OrcaPageShell>
   );
 }
diff --git a/apps/web/app/settings/personal/integrations/page.tsx b/apps/web/app/settings/personal/integrations/page.tsx
index 8312235e0..b0209fec1 100644
--- a/apps/web/app/settings/personal/integrations/page.tsx
+++ b/apps/web/app/settings/personal/integrations/page.tsx
@@ -2,8 +2,7 @@ import { Settings } from "lucide-react";
 
 import { isGitHubAuthConfigured } from "@codev/config";
 
-import { connectGitHubAccount } from "@/app/actions/github";
-import { Button, LinkButton } from "@/components/ui/button";
+import { LinkButton } from "@/components/ui/button";
 import { GithubMark } from "@/components/settings/github-mark";
 import {
   IntegrationsList,
@@ -16,15 +15,17 @@ import {
 import { getConnectedAccounts } from "@/lib/auth/identity";
 import { requireUser } from "@/lib/auth/session";
 
+/**
+ * GitHub is linked once, as a sign-in method on Profile. This page owns what
+ * happens after that — which repositories the CoDev GitHub App can reach — so
+ * it links back to Profile instead of offering a second "Connect" button that
+ * did the same thing.
+ */
 export default async function PersonalIntegrationsPage() {
   const user = await requireUser();
   const connectedAccounts = await getConnectedAccounts(user.id);
   const github = connectedAccounts.github;
 
-  const connectAction = connectGitHubAccount.bind(
-    null,
-    "/settings/personal/integrations",
-  );
   const installUrl = process.env.GITHUB_APP_SLUG
     ? `https://github.com/apps/${process.env.GITHUB_APP_SLUG}/installations/new`
     : "https://github.com/settings/installations";
@@ -39,7 +40,7 @@ export default async function PersonalIntegrationsPage() {
         ? github.login
           ? `Connected · @${github.login}`
           : "Connected"
-        : "Not connected",
+        : "Not linked. Link your GitHub sign-in on Profile first.",
       action: isGitHubAuthConfigured() ? (
         github.connected ? (
           <LinkButton
@@ -50,14 +51,16 @@ export default async function PersonalIntegrationsPage() {
             variant="outline"
           >
             <Settings aria-hidden className="size-3.5" />
-            Configure
+            Manage repository access
           </LinkButton>
         ) : (
-          <form action={connectAction}>
-            <Button size="sm" type="submit">
-              Connect
-            </Button>
-          </form>
+          <LinkButton
+            href="/settings/personal/profile"
+            size="sm"
+            variant="outline"
+          >
+            Link on Profile
+          </LinkButton>
         )
       ) : null,
     },
diff --git a/apps/web/app/settings/personal/layout.tsx b/apps/web/app/settings/personal/layout.tsx
index cc53a226a..8b257d529 100644
--- a/apps/web/app/settings/personal/layout.tsx
+++ b/apps/web/app/settings/personal/layout.tsx
@@ -1,6 +1,7 @@
 import "../orca-theme.css";
 
 import { AppChrome } from "@/components/shell/app-chrome";
+import { SettingsFeedbackProvider } from "@/components/settings/settings-feedback";
 import { SettingsSidebar } from "@/components/settings/SettingsSidebar";
 import { requireUser } from "@/lib/auth/session";
 
@@ -15,7 +16,9 @@ export default async function PersonalSettingsLayout({
     <AppChrome user={user} sidebar>
       <div className="orca-settings-scope flex min-h-dvh">
         <SettingsSidebar />
-        <main className="min-w-0 flex-1">{children}</main>
+        <main className="min-w-0 flex-1">
+          <SettingsFeedbackProvider>{children}</SettingsFeedbackProvider>
+        </main>
       </div>
     </AppChrome>
   );
diff --git a/apps/web/app/settings/personal/profile/page.tsx b/apps/web/app/settings/personal/profile/page.tsx
index 0737e2a17..0c5c62f6f 100644
--- a/apps/web/app/settings/personal/profile/page.tsx
+++ b/apps/web/app/settings/personal/profile/page.tsx
@@ -1,8 +1,10 @@
 import { isGitHubAuthConfigured } from "@codev/config";
-import { KeyRound, Mail } from "lucide-react";
+import { Download, KeyRound, Mail } from "lucide-react";
 
 import { connectGitHubAccount } from "@/app/actions/github";
-import { Button } from "@/components/ui/button";
+import { updateDisplayName } from "@/app/actions/profile";
+import { Button, LinkButton } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
 import { GithubMark } from "@/components/settings/github-mark";
 import { GoogleMark } from "@/components/settings/google-mark";
 import {
@@ -20,8 +22,19 @@ const passwordErrorCopy: Record<string, string> = {
   match: "Those passwords did not match. Try again.",
   policy: "Choose a stronger password that meets every requirement below.",
   exists: "This account already has a password set.",
+  current: "That is not your current password.",
+  nopassword: "This account has no password to change yet.",
 };
 
+// `error` is shared by the name and password forms; each shows only its own.
+const PASSWORD_ERRORS = new Set([
+  "match",
+  "policy",
+  "exists",
+  "current",
+  "nopassword",
+]);
+
 function initials(
   name: string | null | undefined,
   email: string | null | undefined,
@@ -81,7 +94,12 @@ function SignInMethodRow({
 export default async function PersonalProfilePage({
   searchParams,
 }: {
-  searchParams: Promise<{ github?: string; password?: string; error?: string }>;
+  searchParams: Promise<{
+    github?: string;
+    password?: string;
+    name?: string;
+    error?: string;
+  }>;
 }) {
   const user = await requireUser();
   const connectedAccounts = await getConnectedAccounts(user.id);
@@ -90,7 +108,14 @@ export default async function PersonalProfilePage({
     params.github === "connected" && connectedAccounts.github.connected;
   const passwordJustSet =
     params.password === "set" && connectedAccounts.hasPassword;
-  const passwordError = params.error ? passwordErrorCopy[params.error] : null;
+  const passwordJustChanged =
+    params.password === "changed" && connectedAccounts.hasPassword;
+  const passwordError =
+    params.error && PASSWORD_ERRORS.has(params.error)
+      ? passwordErrorCopy[params.error]
+      : null;
+  const nameError =
+    params.error === "name" ? "Enter a name up to 80 characters long." : null;
 
   return (
     <OrcaPageShell>
@@ -99,19 +124,51 @@ export default async function PersonalProfilePage({
         title="Profile"
       />
 
-      <Card className="flex items-center gap-4 px-6 py-5">
-        <span className="flex size-14 shrink-0 items-center justify-center rounded-full bg-foreground text-lg font-semibold text-background">
-          {initials(user.name, user.email)}
-        </span>
-        <div className="min-w-0 space-y-1">
-          <p className="truncate text-base font-semibold">
-            {user.name || "Unnamed"}
-          </p>
-          <p className="flex items-center gap-1.5 truncate text-sm text-muted-foreground">
-            <Mail aria-hidden className="size-3.5 shrink-0" />
-            {user.email || "No email on file"}
-          </p>
+      <Card className="space-y-4 px-6 py-5">
+        <div className="flex items-center gap-4">
+          <span className="flex size-14 shrink-0 items-center justify-center rounded-full bg-foreground text-lg font-semibold text-background">
+            {initials(user.name, user.email)}
+          </span>
+          <div className="min-w-0 space-y-1">
+            <p className="truncate text-base font-semibold">
+              {user.name || "Unnamed"}
+            </p>
+            <p className="flex items-center gap-1.5 truncate text-sm text-muted-foreground">
+              <Mail aria-hidden className="size-3.5 shrink-0" />
+              {user.email || "No email on file"}
+            </p>
+          </div>
         </div>
+        <form
+          action={updateDisplayName}
+          className="flex flex-wrap items-end gap-3 border-t border-border/60 pt-4"
+        >
+          <label className="block min-w-[14rem] flex-1 space-y-1.5 text-xs">
+            <span className="font-medium text-muted-foreground">
+              Display name
+            </span>
+            <Input
+              autoComplete="name"
+              defaultValue={user.name ?? ""}
+              maxLength={80}
+              name="name"
+              required
+            />
+          </label>
+          <Button size="sm" type="submit" variant="outline">
+            Save name
+          </Button>
+          {params.name === "saved" ? (
+            <p className="w-full text-xs text-emerald-400" role="status">
+              Display name updated.
+            </p>
+          ) : null}
+          {nameError ? (
+            <p className="w-full text-xs text-red-400" role="alert">
+              {nameError}
+            </p>
+          ) : null}
+        </form>
       </Card>
 
       <Card className="space-y-4 px-6 py-5">
@@ -135,8 +192,15 @@ export default async function PersonalProfilePage({
           />
           <SignInMethodRow
             action={
-              !connectedAccounts.github.connected &&
-              isGitHubAuthConfigured() ? (
+              connectedAccounts.github.connected ? (
+                <LinkButton
+                  href="/settings/personal/integrations"
+                  size="sm"
+                  variant="outline"
+                >
+                  Repository access
+                </LinkButton>
+              ) : isGitHubAuthConfigured() ? (
                 <form
                   action={connectGitHubAccount.bind(
                     null,
@@ -174,7 +238,28 @@ export default async function PersonalProfilePage({
         ) : null}
       </Card>
 
-      {connectedAccounts.hasPassword ? null : (
+      {connectedAccounts.hasPassword ? (
+        <Card className="space-y-4 px-6 py-5">
+          <OrcaSubsectionHeader
+            description="Enter your current password to choose a new one."
+            title="Change password"
+          />
+          {passwordJustChanged ? (
+            <p className="text-xs text-emerald-400" role="status">
+              Password changed.
+            </p>
+          ) : null}
+          {passwordError ? (
+            <p className="text-xs text-red-400" role="alert">
+              {passwordError}
+            </p>
+          ) : null}
+          <SetPasswordForm
+            mode="change"
+            redirectTo="/settings/personal/profile"
+          />
+        </Card>
+      ) : (
         <Card className="space-y-4 px-6 py-5">
           <OrcaSubsectionHeader
             description="You signed in with Google or GitHub, so this account has no password yet. Set one to also be able to sign in with your email."
@@ -196,6 +281,22 @@ export default async function PersonalProfilePage({
           )}
         </Card>
       )}
+
+      <Card className="flex flex-wrap items-center justify-between gap-4 px-6 py-5">
+        <OrcaSubsectionHeader
+          description="A JSON copy of your profile, sign-in methods, and the names of your environment variables. Secrets are never included."
+          title="Your data"
+        />
+        <LinkButton
+          download
+          href="/api/settings/export"
+          size="sm"
+          variant="outline"
+        >
+          <Download aria-hidden className="size-3.5" />
+          Download account data
+        </LinkButton>
+      </Card>
     </OrcaPageShell>
   );
 }
diff --git a/apps/web/auth.ts b/apps/web/auth.ts
index ff2516569..93462878f 100644
--- a/apps/web/auth.ts
+++ b/apps/web/auth.ts
@@ -102,7 +102,7 @@ async function clearGithubLinkCookie() {
   }
 }
 
-export const { handlers, auth, signIn, signOut } = NextAuth({
+export const { handlers, auth, signIn, signOut, unstable_update } = NextAuth({
   trustHost: true,
   session: { strategy: "jwt" },
   cookies: {
@@ -404,7 +404,15 @@ export const { handlers, auth, signIn, signOut } = NextAuth({
 
       return true;
     },
-    async jwt({ token, account, profile, user }) {
+    async jwt({ token, account, profile, user, trigger, session }) {
+      // Settings refreshes the shown display name after an edit. Only the name
+      // is taken from the update payload; identity fields never are.
+      if (trigger === "update") {
+        const name = (session as { user?: { name?: unknown } } | undefined)
+          ?.user?.name;
+        if (typeof name === "string" && name.trim()) token.name = name.trim();
+        return token;
+      }
       if (account?.provider === "credentials" && user?.id) {
         token.localUserId = user.id;
       } else if (
diff --git a/apps/web/components/gen2/create-workspace-form.test.tsx b/apps/web/components/gen2/create-workspace-form.test.tsx
index 7169c0dbc..af6bc456a 100644
--- a/apps/web/components/gen2/create-workspace-form.test.tsx
+++ b/apps/web/components/gen2/create-workspace-form.test.tsx
@@ -34,15 +34,31 @@ function stubFetch() {
   );
 }
 
+async function openRepositories() {
+  fireEvent.click(screen.getByRole("radio", { name: /GitHub repository/ }));
+  return screen.findByText("ada/looms");
+}
+
 describe("CreateGen2WorkspaceForm", () => {
   beforeEach(() => {
     vi.clearAllMocks();
     stubFetch();
   });
 
+  it("creates nothing until Create is pressed", async () => {
+    render(<CreateGen2WorkspaceForm githubConnected />);
+    await openRepositories();
+    fireEvent.click(screen.getByRole("button", { name: /ada\/looms/ }));
+    expect(fetch).not.toHaveBeenCalledWith(
+      "/api/gen2/workspaces",
+      expect.anything(),
+    );
+    expect(mocks.push).not.toHaveBeenCalled();
+  });
+
   it("creates a blank workspace and opens it", async () => {
     render(<CreateGen2WorkspaceForm githubConnected={false} />);
-    fireEvent.click(screen.getByRole("button", { name: /Blank workspace/ }));
+    fireEvent.click(screen.getByRole("button", { name: "Create workspace" }));
     await waitFor(() => expect(mocks.push).toHaveBeenCalledWith("/gen2/ws-1"));
     expect(fetch).toHaveBeenCalledWith(
       "/api/gen2/workspaces",
@@ -50,6 +66,30 @@ describe("CreateGen2WorkspaceForm", () => {
     );
   });
 
+  it("sends the optional name", async () => {
+    render(<CreateGen2WorkspaceForm githubConnected={false} />);
+    fireEvent.change(screen.getByLabelText("Name (optional)"), {
+      target: { value: "  Studio  " },
+    });
+    fireEvent.click(screen.getByRole("button", { name: "Create workspace" }));
+    await waitFor(() => expect(mocks.push).toHaveBeenCalled());
+    expect(fetch).toHaveBeenCalledWith(
+      "/api/gen2/workspaces",
+      expect.objectContaining({ body: JSON.stringify({ name: "Studio" }) }),
+    );
+  });
+
+  it("always shows how many workspaces are used", () => {
+    render(
+      <CreateGen2WorkspaceForm
+        githubConnected={false}
+        ownedWorkspaceCount={1}
+      />,
+    );
+    expect(screen.getByText("1 of 2 used")).toBeInTheDocument();
+    expect(screen.queryByRole("status")).toBeNull();
+  });
+
   it("blocks workspace creation when the owner limit is reached", () => {
     render(
       <CreateGen2WorkspaceForm
@@ -58,7 +98,7 @@ describe("CreateGen2WorkspaceForm", () => {
       />,
     );
     expect(
-      screen.getByRole("button", { name: /Blank workspace/ }),
+      screen.getByRole("button", { name: "Create workspace" }),
     ).toBeDisabled();
     expect(screen.getByRole("status")).toHaveTextContent(
       "You own 2 of 2 Gen 2 workspaces. Delete one to create another.",
@@ -67,22 +107,25 @@ describe("CreateGen2WorkspaceForm", () => {
 
   it("offers GitHub when it is not connected yet", () => {
     render(<CreateGen2WorkspaceForm githubConnected={false} />);
+    fireEvent.click(screen.getByRole("radio", { name: /GitHub repository/ }));
     expect(
       screen.getByRole("button", { name: /Connect GitHub/ }),
     ).toBeInTheDocument();
     expect(screen.queryByLabelText("Search repositories")).toBeNull();
   });
 
-  it("lists repositories once GitHub is connected", async () => {
+  it("lists repositories with a heading once GitHub is chosen", async () => {
     render(<CreateGen2WorkspaceForm githubConnected />);
-    expect(await screen.findByText("ada/looms")).toBeInTheDocument();
+    expect(await openRepositories()).toBeInTheDocument();
+    expect(screen.getByText("Your repositories")).toBeInTheDocument();
     expect(screen.getByText("Private")).toBeInTheDocument();
     expect(screen.getByText("trunk")).toBeInTheDocument();
+    expect(screen.getByText("2 repositories")).toBeInTheDocument();
   });
 
   it("filters the list as you type", async () => {
     render(<CreateGen2WorkspaceForm githubConnected />);
-    await screen.findByText("ada/looms");
+    await openRepositories();
     fireEvent.change(screen.getByLabelText("Search repositories"), {
       target: { value: "card" },
     });
@@ -90,9 +133,41 @@ describe("CreateGen2WorkspaceForm", () => {
     expect(screen.getByText("ada/cards")).toBeInTheDocument();
   });
 
+  it("says when the list is cut off", async () => {
+    const many = Array.from({ length: 45 }, (_, index) => ({
+      id: index + 1,
+      full_name: `ada/repo-${index}`,
+      private: false,
+      default_branch: "main",
+    }));
+    vi.stubGlobal(
+      "fetch",
+      vi.fn(async (url: string) => {
+        const path = String(url);
+        if (path.endsWith("/repositories")) {
+          return new Response(JSON.stringify({ repositories: many }));
+        }
+        return new Response(
+          JSON.stringify({
+            installations: [
+              { id: 1, account: { login: "ada", avatar_url: "" } },
+            ],
+          }),
+        );
+      }),
+    );
+    render(<CreateGen2WorkspaceForm githubConnected />);
+    fireEvent.click(screen.getByRole("radio", { name: /GitHub repository/ }));
+    expect(await screen.findByText(/Showing 40 of 45/)).toBeInTheDocument();
+  });
+
   it("creates from the repository that was picked", async () => {
     render(<CreateGen2WorkspaceForm githubConnected />);
-    fireEvent.click(await screen.findByRole("button", { name: /ada\/looms/ }));
+    await openRepositories();
+    const create = screen.getByRole("button", { name: "Create workspace" });
+    expect(create).toBeDisabled();
+    fireEvent.click(screen.getByRole("button", { name: /ada\/looms/ }));
+    fireEvent.click(create);
     await waitFor(() => expect(mocks.push).toHaveBeenCalledWith("/gen2/ws-1"));
     // The browser sends ids only; the control plane resolves the commit and
     // fetches the source, so no repository contents pass through here.
@@ -104,6 +179,37 @@ describe("CreateGen2WorkspaceForm", () => {
     );
   });
 
+  it("shows a retryable error when GitHub cannot be reached", async () => {
+    let failing = true;
+    vi.stubGlobal(
+      "fetch",
+      vi.fn(async (url: string) => {
+        const path = String(url);
+        if (path.endsWith("/installations")) {
+          return failing
+            ? new Response("{}", { status: 502 })
+            : new Response(
+                JSON.stringify({
+                  installations: [
+                    { id: 1, account: { login: "ada", avatar_url: "" } },
+                  ],
+                }),
+              );
+        }
+        return new Response(JSON.stringify({ repositories: REPOS }));
+      }),
+    );
+    render(<CreateGen2WorkspaceForm githubConnected />);
+    fireEvent.click(screen.getByRole("radio", { name: /GitHub repository/ }));
+    expect(await screen.findByRole("alert")).toHaveTextContent(
+      "Couldn't load your repositories",
+    );
+
+    failing = false;
+    fireEvent.click(screen.getByRole("button", { name: "Try again" }));
+    expect(await screen.findByText("ada/looms")).toBeInTheDocument();
+  });
+
   it("reports a create failure instead of navigating", async () => {
     vi.stubGlobal(
       "fetch",
@@ -115,7 +221,7 @@ describe("CreateGen2WorkspaceForm", () => {
       ),
     );
     render(<CreateGen2WorkspaceForm githubConnected={false} />);
-    fireEvent.click(screen.getByRole("button", { name: /Blank workspace/ }));
+    fireEvent.click(screen.getByRole("button", { name: "Create workspace" }));
     expect(await screen.findByRole("alert")).toHaveTextContent(
       "Out of capacity.",
     );
diff --git a/apps/web/components/gen2/create-workspace-form.tsx b/apps/web/components/gen2/create-workspace-form.tsx
index febeafdb0..e0bed0943 100644
--- a/apps/web/components/gen2/create-workspace-form.tsx
+++ b/apps/web/components/gen2/create-workspace-form.tsx
@@ -1,11 +1,24 @@
 "use client";
 
-import { useEffect, useMemo, useState } from "react";
+import { startTransition, useEffect, useMemo, useState } from "react";
 import { useRouter } from "next/navigation";
-import { Plus, Search } from "lucide-react";
+import { Check, LoaderCircle, Plus, Search } from "lucide-react";
 
 import { GithubMark } from "@/components/settings/github-mark";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
 import { GEN2_MAX_OWNED_WORKSPACES } from "@/lib/gen2/constants";
+import { cn } from "@/lib/platform/utils";
 
 type Installation = {
   id: number;
@@ -18,9 +31,17 @@ type Repository = {
   default_branch: string;
 };
 
+type Loaded<T> = { key: string; status: "ok" | "error"; items: T[] };
+
+const REPOSITORY_PAGE_SIZE = 40;
+
 /**
  * Start a workspace: blank, or from a GitHub repository.
  *
+ * Nothing is created until "Create workspace" is pressed: choosing a source and
+ * a repository only fills in the form, so a stray click can't spend one of the
+ * member's few workspaces.
+ *
  * The repository never arrives through the browser. Picking one records the
  * installation and repository ids; the control plane resolves the commit and
  * either hands the guest a plain public clone URL or ships a bounded snapshot
@@ -44,53 +65,110 @@ export function CreateGen2WorkspaceForm({
 }) {
   const router = useRouter();
   const atWorkspaceLimit = ownedWorkspaceCount >= GEN2_MAX_OWNED_WORKSPACES;
-  const [installations, setInstallations] = useState<Installation[]>([]);
+  const [source, setSource] = useState<"blank" | "github">("blank");
+  const [name, setName] = useState("");
+  const [reloadKey, setReloadKey] = useState(0);
+  const [installs, setInstalls] = useState<Loaded<Installation> | null>(null);
   const [installationId, setInstallationId] = useState<number | null>(null);
-  const [repositories, setRepositories] = useState<Repository[]>([]);
+  const [repos, setRepos] = useState<Loaded<Repository> | null>(null);
+  const [selectedRepoId, setSelectedRepoId] = useState<number | null>(null);
   const [query, setQuery] = useState("");
   const [busy, setBusy] = useState(false);
   const [error, setError] = useState("");
 
+  // Loading is derived, not stored: a result belongs to the request key that
+  // produced it, so "no result for the current key yet" means "loading".
+  const installKey = String(reloadKey);
+  const repoKey = `${installationId}:${reloadKey}`;
+  const installsLoading = githubConnected && installs?.key !== installKey;
+  const reposLoading =
+    source === "github" && installationId !== null && repos?.key !== repoKey;
+
   useEffect(() => {
     if (!githubConnected) return;
+    let cancelled = false;
     void (async () => {
-      const response = await fetch("/api/github/installations");
-      if (!response.ok) return;
-      const payload = (await response.json()) as {
-        installations?: Installation[];
-      };
-      setInstallations(payload.installations ?? []);
-      setInstallationId(
-        (current) => current ?? payload.installations?.[0]?.id ?? null,
-      );
+      let loaded: Loaded<Installation>;
+      try {
+        const response = await fetch("/api/github/installations");
+        const payload = response.ok
+          ? ((await response.json()) as { installations?: Installation[] })
+          : null;
+        loaded = {
+          key: installKey,
+          status: payload ? "ok" : "error",
+          items: payload?.installations ?? [],
+        };
+      } catch {
+        loaded = { key: installKey, status: "error", items: [] };
+      }
+      if (cancelled) return;
+      setInstalls(loaded);
+      setInstallationId((current) => current ?? loaded.items[0]?.id ?? null);
     })();
-  }, [githubConnected]);
+    return () => {
+      cancelled = true;
+    };
+  }, [githubConnected, installKey]);
 
   useEffect(() => {
-    if (installationId === null) return;
+    if (source !== "github" || installationId === null) return;
+    let cancelled = false;
     void (async () => {
-      const response = await fetch(
-        `/api/github/installations/${installationId}/repositories`,
-      );
-      if (!response.ok) return;
-      const payload = (await response.json()) as {
-        repositories?: Repository[];
-      };
-      setRepositories(payload.repositories ?? []);
+      let loaded: Loaded<Repository>;
+      try {
+        const response = await fetch(
+          `/api/github/installations/${installationId}/repositories`,
+        );
+        const payload = response.ok
+          ? ((await response.json()) as { repositories?: Repository[] })
+          : null;
+        loaded = {
+          key: repoKey,
+          status: payload ? "ok" : "error",
+          items: payload?.repositories ?? [],
+        };
+      } catch {
+        loaded = { key: repoKey, status: "error", items: [] };
+      }
+      if (!cancelled) setRepos(loaded);
     })();
-  }, [installationId]);
+    return () => {
+      cancelled = true;
+    };
+  }, [source, installationId, repoKey]);
 
-  const visible = useMemo(() => {
+  const repositories = useMemo(
+    () => (repos?.key === repoKey ? repos.items : []),
+    [repos, repoKey],
+  );
+  const matches = useMemo(() => {
     const needle = query.trim().toLowerCase();
-    const matches = needle
+    return needle
       ? repositories.filter((repo) =>
           repo.full_name.toLowerCase().includes(needle),
         )
       : repositories;
-    return matches.slice(0, 40);
   }, [repositories, query]);
+  const visible = matches.slice(0, REPOSITORY_PAGE_SIZE);
+  const selectedRepo =
+    repositories.find((repo) => repo.id === selectedRepoId) ?? null;
+  const loadFailed =
+    installs?.key === installKey && installs.status === "error"
+      ? true
+      : repos?.key === repoKey && repos.status === "error";
+  const canCreate =
+    !busy && !atWorkspaceLimit && (source === "blank" || selectedRepo !== null);
+
+  async function create() {
+    const trimmedName = name.trim();
+    const body: Record<string, unknown> = {};
+    if (trimmedName) body.name = trimmedName;
+    if (source === "github" && selectedRepo && installationId !== null) {
+      body.installationId = installationId;
+      body.repositoryId = selectedRepo.id;
+    }
 
-  async function create(body: Record<string, unknown>) {
     setBusy(true);
     setError("");
     try {
@@ -116,109 +194,288 @@ export function CreateGen2WorkspaceForm({
     }
   }
 
+  const summary =
+    source === "github"
+      ? selectedRepo
+        ? `Creates a workspace from ${selectedRepo.full_name}.`
+        : "Choose a repository to continue."
+      : "Creates an empty workspace.";
+
   return (
-    <section className="gen2-create">
-      <div className="gen2-create-row">
-        <button
-          type="button"
-          className="primary-button"
-          disabled={busy || atWorkspaceLimit}
-          onClick={() => void create({})}
-        >
-          <Plus aria-hidden="true" size={14} />
-          {busy ? "Creating…" : "Blank workspace"}
-        </button>
-
-        {githubConnected ? (
-          <>
-            {installations.length > 1 ? (
-              <select
-                className="gen2-create-select"
-                aria-label="GitHub account"
-                value={installationId ?? ""}
-                onChange={(event) =>
-                  setInstallationId(Number(event.target.value))
-                }
-              >
-                {installations.map((installation) => (
-                  <option key={installation.id} value={installation.id}>
-                    {installation.account.login}
-                  </option>
-                ))}
-              </select>
-            ) : null}
-            <label className="gen2-create-search">
-              <Search aria-hidden="true" size={14} />
-              <input
-                value={query}
-                onChange={(event) => setQuery(event.target.value)}
-                placeholder="Search your repositories"
-                aria-label="Search repositories"
-                autoComplete="off"
-              />
-            </label>
-          </>
-        ) : (
-          <form action={connectGitHub}>
-            <button type="submit" className="secondary-button">
-              <GithubMark className="gen2-repo-mark" /> Connect GitHub
-            </button>
-          </form>
-        )}
-      </div>
-
-      {atWorkspaceLimit ? (
-        <p className="gen2-create-limit" role="status">
-          You own {ownedWorkspaceCount} of {GEN2_MAX_OWNED_WORKSPACES} Gen 2
-          workspaces. Delete one to create another.
-        </p>
-      ) : null}
-
-      {githubConnected && visible.length > 0 ? (
-        <ul className="gen2-repo-list">
-          {visible.map((repo) => (
-            <li key={repo.id}>
-              <button
-                type="button"
-                disabled={busy || atWorkspaceLimit}
-                onClick={() =>
-                  void create({
-                    installationId,
-                    repositoryId: repo.id,
-                  })
-                }
-              >
-                <GithubMark className="gen2-repo-mark" />
-                <span className="gen2-repo-name">{repo.full_name}</span>
-                {repo.private ? (
-                  <span className="gen2-repo-tag">Private</span>
-                ) : null}
-                <span className="gen2-repo-branch">{repo.default_branch}</span>
-              </button>
-            </li>
-          ))}
-        </ul>
-      ) : null}
-
-      {githubConnected && appSlug && repositories.length === 0 ? (
-        <p className="gen2-wb-hint">
-          No repositories yet.{" "}
-          <a
-            href={`https://github.com/apps/${appSlug}/installations/new`}
-            target="_blank"
-            rel="noreferrer"
+    <Card id="new-workspace">
+      <form
+        onSubmit={(event) => {
+          event.preventDefault();
+          if (canCreate) void create();
+        }}
+      >
+        <CardHeader className="flex-row items-start justify-between gap-4 px-6 pt-6">
+          <div className="space-y-1.5">
+            <CardTitle className="text-base">New workspace</CardTitle>
+            <CardDescription>
+              Pick a starting point. Nothing is created until you press Create.
+            </CardDescription>
+          </div>
+          <Badge
+            aria-label={`You own ${ownedWorkspaceCount} of ${GEN2_MAX_OWNED_WORKSPACES} workspaces`}
+            variant={atWorkspaceLimit ? "default" : "muted"}
           >
-            Give CoDev access to some
-          </a>
-          .
-        </p>
-      ) : null}
-
-      {error ? (
-        <p className="form-message error-copy" role="alert">
-          {error}
-        </p>
-      ) : null}
-    </section>
+            {ownedWorkspaceCount} of {GEN2_MAX_OWNED_WORKSPACES} used
+          </Badge>
+        </CardHeader>
+
+        <CardContent className="space-y-5 px-6 pt-5 pb-5">
+          <fieldset className="mx-0 min-w-0 space-y-2 border-0 p-0">
+            <legend className="mb-2 p-0 text-sm font-medium">Start from</legend>
+            <div className="grid gap-2 sm:grid-cols-2" role="radiogroup">
+              {(
+                [
+                  {
+                    id: "blank",
+                    title: "Blank workspace",
+                    hint: "An empty machine to build in",
+                    icon: <Plus aria-hidden="true" size={16} />,
+                  },
+                  {
+                    id: "github",
+                    title: "GitHub repository",
+                    hint: "Clone one of your repositories",
+                    icon: <GithubMark className="size-4" />,
+                  },
+                ] as const
+              ).map((option) => (
+                <button
+                  aria-checked={source === option.id}
+                  className={cn(
+                    "flex cursor-pointer items-center gap-3 rounded-lg border px-4 py-3 text-left text-sm text-foreground transition-colors outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50",
+                    source === option.id
+                      ? "border-primary bg-primary/10"
+                      : "border-border bg-transparent hover:bg-muted",
+                  )}
+                  key={option.id}
+                  onClick={() => setSource(option.id)}
+                  role="radio"
+                  type="button"
+                >
+                  <span className="flex size-8 shrink-0 items-center justify-center rounded-md bg-muted">
+                    {option.icon}
+                  </span>
+                  <span className="min-w-0">
+                    <span className="block font-medium">{option.title}</span>
+                    <span className="block text-xs text-muted-foreground">
+                      {option.hint}
+                    </span>
+                  </span>
+                </button>
+              ))}
+            </div>
+          </fieldset>
+
+          {source === "github" ? (
+            githubConnected ? (
+              <div className="space-y-3">
+                <div className="flex flex-wrap items-center gap-3">
+                  {(installs?.items.length ?? 0) > 1 ? (
+                    <select
+                      aria-label="GitHub account"
+                      className="h-9 rounded-md border border-input bg-background px-3 text-sm outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50"
+                      onChange={(event) => {
+                        setInstallationId(Number(event.target.value));
+                        setSelectedRepoId(null);
+                      }}
+                      value={installationId ?? ""}
+                    >
+                      {installs?.items.map((installation) => (
+                        <option key={installation.id} value={installation.id}>
+                          {installation.account.login}
+                        </option>
+                      ))}
+                    </select>
+                  ) : null}
+                  <div className="relative min-w-[14rem] flex-1">
+                    <Search
+                      aria-hidden="true"
+                      className="pointer-events-none absolute top-1/2 left-3 -translate-y-1/2 text-muted-foreground"
+                      size={14}
+                    />
+                    <Input
+                      aria-label="Search repositories"
+                      autoComplete="off"
+                      className="pl-9"
+                      onChange={(event) => setQuery(event.target.value)}
+                      placeholder="Search your repositories"
+                      value={query}
+                    />
+                  </div>
+                </div>
+
+                <p className="text-sm font-medium">Your repositories</p>
+
+                {installsLoading || reposLoading ? (
+                  <div
+                    aria-busy="true"
+                    aria-label="Loading repositories"
+                    className="space-y-2"
+                    role="status"
+                  >
+                    {[0, 1, 2].map((row) => (
+                      <div
+                        className="h-10 animate-pulse rounded-lg bg-muted motion-reduce:animate-none"
+                        key={row}
+                      />
+                    ))}
+                  </div>
+                ) : loadFailed ? (
+                  <div
+                    className="flex flex-wrap items-center gap-3 rounded-lg border border-destructive/40 px-4 py-3 text-sm"
+                    role="alert"
+                  >
+                    <span className="text-destructive">
+                      Couldn&apos;t load your repositories from GitHub.
+                    </span>
+                    <Button
+                      onClick={() => setReloadKey((value) => value + 1)}
+                      size="sm"
+                      type="button"
+                      variant="outline"
+                    >
+                      Try again
+                    </Button>
+                  </div>
+                ) : visible.length > 0 ? (
+                  <>
+                    <ul
+                      aria-label="Repositories"
+                      className="max-h-72 divide-y divide-border overflow-auto rounded-lg border border-border"
+                    >
+                      {visible.map((repo) => {
+                        const selected = repo.id === selectedRepoId;
+                        return (
+                          <li key={repo.id}>
+                            <button
+                              aria-pressed={selected}
+                              className={cn(
+                                "flex w-full cursor-pointer items-center gap-3 border-0 px-4 py-2.5 text-left text-sm text-foreground transition-colors outline-none focus-visible:bg-muted focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:ring-inset",
+                                selected
+                                  ? "bg-primary/10"
+                                  : "bg-transparent hover:bg-muted",
+                              )}
+                              onClick={() => setSelectedRepoId(repo.id)}
+                              type="button"
+                            >
+                              <GithubMark className="size-4 shrink-0" />
+                              <span className="min-w-0 flex-1 truncate font-medium">
+                                {repo.full_name}
+                              </span>
+                              {repo.private ? (
+                                <Badge variant="outline">Private</Badge>
+                              ) : null}
+                              <span className="shrink-0 font-mono text-xs text-muted-foreground">
+                                {repo.default_branch}
+                              </span>
+                              {selected ? (
+                                <Check
+                                  aria-hidden="true"
+                                  className="size-4 shrink-0 text-primary"
+                                />
+                              ) : null}
+                            </button>
+                          </li>
+                        );
+                      })}
+                    </ul>
+                    <p className="text-xs text-muted-foreground">
+                      {matches.length > visible.length
+                        ? `Showing ${visible.length} of ${matches.length}. Search to narrow the list.`
+                        : `${matches.length} ${matches.length === 1 ? "repository" : "repositories"}`}
+                    </p>
+                  </>
+                ) : query.trim() && repositories.length > 0 ? (
+                  <p className="text-sm text-muted-foreground">
+                    No repositories match &ldquo;{query.trim()}&rdquo;.
+                  </p>
+                ) : (
+                  <p className="text-sm text-muted-foreground">
+                    No repositories yet.
+                    {appSlug ? (
+                      <>
+                        {" "}
+                        <a
+                          className="underline underline-offset-4 hover:text-foreground"
+                          href={`https://github.com/apps/${appSlug}/installations/new`}
+                          rel="noreferrer"
+                          target="_blank"
+                        >
+                          Give CoDev access to some
+                        </a>
+                        .
+                      </>
+                    ) : null}
+                  </p>
+                )}
+              </div>
+            ) : (
+              <div className="flex flex-wrap items-center justify-between gap-3 rounded-lg border border-dashed border-border px-4 py-4">
+                <p className="text-sm text-muted-foreground">
+                  Connect GitHub to start from one of your repositories.
+                </p>
+                {/* Not a submit button: pressing Enter in the name field must
+                    create the workspace, not start the GitHub connection. */}
+                <Button
+                  onClick={() => startTransition(() => connectGitHub?.())}
+                  type="button"
+                  variant="outline"
+                >
+                  <GithubMark className="size-4" /> Connect GitHub
+                </Button>
+              </div>
+            )
+          ) : null}
+
+          <div className="max-w-sm space-y-2">
+            <Label htmlFor="gen2-workspace-name">Name (optional)</Label>
+            <Input
+              autoComplete="off"
+              id="gen2-workspace-name"
+              maxLength={80}
+              onChange={(event) => setName(event.target.value)}
+              placeholder="Untitled workspace"
+              value={name}
+            />
+          </div>
+
+          {atWorkspaceLimit ? (
+            <p className="text-sm text-muted-foreground" role="status">
+              You own {ownedWorkspaceCount} of {GEN2_MAX_OWNED_WORKSPACES} Gen 2
+              workspaces. Delete one to create another.
+            </p>
+          ) : null}
+
+          {error ? (
+            <p className="text-sm text-destructive" role="alert">
+              {error}
+            </p>
+          ) : null}
+        </CardContent>
+
+        <CardFooter className="justify-between gap-4 border-t border-border px-6 py-4">
+          <p className="text-sm text-muted-foreground">{summary}</p>
+          <Button disabled={!canCreate} type="submit">
+            {busy ? (
+              <>
+                <LoaderCircle
+                  aria-hidden="true"
+                  className="animate-spin motion-reduce:animate-none"
+                  size={14}
+                />
+                Creating…
+              </>
+            ) : (
+              "Create workspace"
+            )}
+          </Button>
+        </CardFooter>
+      </form>
+    </Card>
   );
 }
diff --git a/apps/web/components/gen2/workspace-list.test.tsx b/apps/web/components/gen2/workspace-list.test.tsx
index 8b8bbbaf2..8e82a8c87 100644
--- a/apps/web/components/gen2/workspace-list.test.tsx
+++ b/apps/web/components/gen2/workspace-list.test.tsx
@@ -23,34 +23,64 @@ const ownerWorkspace: Gen2Workspace = {
   updatedAt: "2026-09-20T20:00:00.000Z",
 };
 
+function workspaceNamed(name: string, overrides: Partial<Gen2Workspace> = {}) {
+  return {
+    ...ownerWorkspace,
+    id: `id-${name}`,
+    name,
+    ...overrides,
+  } satisfies Gen2Workspace;
+}
+
 describe("Gen2WorkspaceList", () => {
   beforeEach(() => {
     vi.clearAllMocks();
-    vi.stubGlobal(
-      "confirm",
-      vi.fn(() => true),
-    );
     vi.stubGlobal(
       "fetch",
       vi.fn(async () => new Response(null, { status: 204 })),
     );
   });
 
-  it("confirms permanent deletion and refreshes the owner count", async () => {
+  it("deletes only after an in-app confirmation that names what is lost", async () => {
     render(<Gen2WorkspaceList workspaces={[ownerWorkspace]} />);
-    fireEvent.click(screen.getByRole("button", { name: "Delete Studio" }));
+    fireEvent.click(screen.getByRole("button", { name: "Actions for Studio" }));
+    fireEvent.click(screen.getByRole("menuitem", { name: "Delete workspace" }));
 
+    const dialog = screen.getByRole("alertdialog");
+    expect(dialog).toHaveTextContent("all saved files");
+    expect(dialog).toHaveTextContent("every chat and its history");
+    expect(fetch).not.toHaveBeenCalled();
+
+    fireEvent.click(screen.getByRole("button", { name: "Delete workspace" }));
     await waitFor(() =>
       expect(fetch).toHaveBeenCalledWith(
         `/api/gen2/workspaces/${ownerWorkspace.id}`,
         { method: "DELETE" },
       ),
     );
-    expect(window.confirm).toHaveBeenCalledWith(
-      expect.stringContaining("permanently deletes the workspace"),
-    );
     expect(mocks.refresh).toHaveBeenCalledOnce();
-    expect(screen.getByText("No workspaces yet.")).toBeInTheDocument();
+    expect(screen.getByText("No workspaces yet")).toBeInTheDocument();
+  });
+
+  it("keeps the workspace when the confirmation is cancelled", () => {
+    render(<Gen2WorkspaceList workspaces={[ownerWorkspace]} />);
+    fireEvent.click(screen.getByRole("button", { name: "Actions for Studio" }));
+    fireEvent.click(screen.getByRole("menuitem", { name: "Delete workspace" }));
+    fireEvent.click(screen.getByRole("button", { name: "Cancel" }));
+
+    expect(fetch).not.toHaveBeenCalled();
+    expect(screen.queryByRole("alertdialog")).toBeNull();
+    expect(screen.getByText("Studio")).toBeInTheDocument();
+  });
+
+  it("offers no actions on a workspace shared with you", () => {
+    render(
+      <Gen2WorkspaceList
+        workspaces={[workspaceNamed("Team", { role: "editor" })]}
+      />,
+    );
+    expect(screen.getByText("Shared with you")).toBeInTheDocument();
+    expect(screen.queryByRole("button", { name: /Actions for/ })).toBeNull();
   });
 
   it("shows interrupted deletion as retryable and not openable", () => {
@@ -63,11 +93,68 @@ describe("Gen2WorkspaceList", () => {
 
     expect(screen.getByText("Deleting")).toBeInTheDocument();
     expect(screen.queryByRole("link", { name: /Studio/ })).toBeNull();
+    fireEvent.click(screen.getByRole("button", { name: "Actions for Studio" }));
     expect(
-      screen.getByRole("button", { name: "Retry deletion of Studio" }),
+      screen.getByRole("menuitem", { name: "Retry deletion" }),
     ).toBeInTheDocument();
     expect(screen.getByRole("alert")).toHaveTextContent(
       "Deletion did not finish. Retry deletion to continue.",
     );
   });
+
+  it("tells not-started and stopped workspaces apart", () => {
+    render(
+      <Gen2WorkspaceList
+        workspaces={[
+          workspaceNamed("Fresh", { status: "pending" }),
+          workspaceNamed("Paused", { status: "stopped" }),
+        ]}
+      />,
+    );
+    expect(screen.getByText("Not started")).toBeInTheDocument();
+    expect(screen.getByText("Stopped")).toBeInTheDocument();
+  });
+
+  it("explains the empty state and points at the create form", () => {
+    render(<Gen2WorkspaceList workspaces={[]} />);
+    expect(screen.getByText("No workspaces yet")).toBeInTheDocument();
+    expect(
+      screen.getByRole("link", { name: "Create your first workspace" }),
+    ).toHaveAttribute("href", "#new-workspace");
+  });
+
+  it("adds search and sort once there are several workspaces", () => {
+    const few = [workspaceNamed("A"), workspaceNamed("B")];
+    const { unmount } = render(<Gen2WorkspaceList workspaces={few} />);
+    expect(screen.queryByLabelText("Search workspaces")).toBeNull();
+    unmount();
+
+    render(
+      <Gen2WorkspaceList
+        workspaces={[
+          workspaceNamed("Zulu", { updatedAt: "2026-09-29T00:00:00.000Z" }),
+          workspaceNamed("Alpha", { updatedAt: "2026-09-01T00:00:00.000Z" }),
+          workspaceNamed("Mike", { updatedAt: "2026-09-15T00:00:00.000Z" }),
+          workspaceNamed("Echo", { updatedAt: "2026-09-10T00:00:00.000Z" }),
+        ]}
+      />,
+    );
+    const names = () =>
+      screen.getAllByRole("link").map((link) => link.textContent);
+    expect(names()[0]).toContain("Zulu");
+
+    fireEvent.change(screen.getByLabelText("Sort workspaces"), {
+      target: { value: "name" },
+    });
+    expect(names()[0]).toContain("Alpha");
+
+    fireEvent.change(screen.getByLabelText("Search workspaces"), {
+      target: { value: "mik" },
+    });
+    expect(screen.getAllByRole("link")).toHaveLength(1);
+    fireEvent.change(screen.getByLabelText("Search workspaces"), {
+      target: { value: "nothing" },
+    });
+    expect(screen.getByText(/No workspaces match/)).toBeInTheDocument();
+  });
 });
diff --git a/apps/web/components/gen2/workspace-list.tsx b/apps/web/components/gen2/workspace-list.tsx
index 334d6c93b..56de6b835 100644
--- a/apps/web/components/gen2/workspace-list.tsx
+++ b/apps/web/components/gen2/workspace-list.tsx
@@ -1,20 +1,162 @@
 "use client";
 
-import { useState } from "react";
+import { useEffect, useId, useMemo, useRef, useState } from "react";
 import { useRouter } from "next/navigation";
 import Link from "next/link";
-import { LoaderCircle, Trash2 } from "lucide-react";
+import {
+  Cloud,
+  LoaderCircle,
+  MoreHorizontal,
+  Search,
+  Trash2,
+} from "lucide-react";
 import type { Gen2Workspace } from "@codev/contracts";
 
+import { ConfirmDialog } from "@/components/settings/confirm-dialog";
+import { Badge } from "@/components/ui/badge";
+import { Button, LinkButton } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { cn } from "@/lib/platform/utils";
+
+// "Not started" and "Stopped" are different states: the first has never had a
+// machine, the second had one and it was shut down.
 const STATUS_LABEL: Record<Gen2Workspace["status"], string> = {
-  pending: "Idle",
+  pending: "Not started",
   provisioning: "Starting",
   ready: "Ready",
   failed: "Failed",
-  stopped: "Idle",
+  stopped: "Stopped",
   deleting: "Deleting",
 };
 
+const STATUS_DOT: Record<Gen2Workspace["status"], string> = {
+  pending: "bg-muted-foreground/50",
+  provisioning: "bg-amber-400 animate-pulse motion-reduce:animate-none",
+  ready: "bg-emerald-500",
+  failed: "bg-destructive",
+  stopped: "bg-muted-foreground/50",
+  deleting: "bg-destructive",
+};
+
+type SortKey = "updated" | "name";
+
+/** Search and sort earn their space only once there is a list to search. */
+const CONTROLS_THRESHOLD = 4;
+
+const RELATIVE_UNITS: [Intl.RelativeTimeFormatUnit, number][] = [
+  ["year", 365 * 24 * 60 * 60],
+  ["month", 30 * 24 * 60 * 60],
+  ["day", 24 * 60 * 60],
+  ["hour", 60 * 60],
+  ["minute", 60],
+];
+
+function formatUpdated(iso: string): string {
+  const seconds = (new Date(iso).getTime() - Date.now()) / 1000;
+  if (Number.isNaN(seconds)) return "";
+  const formatter = new Intl.RelativeTimeFormat("en", { numeric: "auto" });
+  for (const [unit, size] of RELATIVE_UNITS) {
+    if (Math.abs(seconds) >= size) {
+      return formatter.format(Math.round(seconds / size), unit);
+    }
+  }
+  return "just now";
+}
+
+/**
+ * The per-workspace actions menu. Delete lives here, one step away from the
+ * card, so it is not a misclick beside the link that opens the workspace.
+ */
+function WorkspaceMenu({
+  workspace,
+  busy,
+  disabled,
+  onDelete,
+}: {
+  workspace: Gen2Workspace;
+  busy: boolean;
+  disabled: boolean;
+  onDelete: () => void;
+}) {
+  const [open, setOpen] = useState(false);
+  const rootRef = useRef<HTMLDivElement>(null);
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  const itemRef = useRef<HTMLButtonElement>(null);
+  const menuId = useId();
+  const retry = workspace.status === "deleting";
+
+  useEffect(() => {
+    if (!open) return;
+    itemRef.current?.focus();
+    function onPointerDown(event: PointerEvent) {
+      if (!rootRef.current?.contains(event.target as Node)) setOpen(false);
+    }
+    function onKeyDown(event: KeyboardEvent) {
+      if (event.key === "Escape") {
+        setOpen(false);
+        triggerRef.current?.focus();
+      }
+    }
+    document.addEventListener("pointerdown", onPointerDown);
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      document.removeEventListener("pointerdown", onPointerDown);
+      document.removeEventListener("keydown", onKeyDown);
+    };
+  }, [open]);
+
+  return (
+    <div className="relative" ref={rootRef}>
+      <Button
+        aria-controls={open ? menuId : undefined}
+        aria-expanded={open}
+        aria-haspopup="menu"
+        aria-label={`Actions for ${workspace.name}`}
+        className="size-9"
+        disabled={disabled}
+        onClick={() => setOpen((current) => !current)}
+        ref={triggerRef}
+        size="icon-sm"
+        type="button"
+        variant="secondary"
+      >
+        {busy ? (
+          <LoaderCircle
+            aria-hidden="true"
+            className="animate-spin motion-reduce:animate-none"
+            size={16}
+          />
+        ) : (
+          <MoreHorizontal aria-hidden="true" size={16} />
+        )}
+      </Button>
+      {open ? (
+        <div
+          aria-label={`Actions for ${workspace.name}`}
+          className="absolute top-full right-0 z-20 mt-1 min-w-44 rounded-lg border border-border bg-popover p-1 text-popover-foreground shadow-lg"
+          id={menuId}
+          role="menu"
+        >
+          <button
+            className="flex w-full cursor-pointer items-center gap-2 rounded-md border-0 bg-transparent px-3 py-2 text-left text-sm text-destructive transition-colors outline-none hover:bg-destructive/10 focus-visible:bg-destructive/10"
+            onClick={() => {
+              setOpen(false);
+              onDelete();
+            }}
+            ref={itemRef}
+            role="menuitem"
+            type="button"
+          >
+            <Trash2 aria-hidden="true" size={15} />
+            {retry ? "Retry deletion" : "Delete workspace"}
+          </button>
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
 export function Gen2WorkspaceList({
   workspaces: initialWorkspaces,
 }: {
@@ -22,18 +164,33 @@ export function Gen2WorkspaceList({
 }) {
   const router = useRouter();
   const [workspaces, setWorkspaces] = useState(initialWorkspaces);
+  const [confirming, setConfirming] = useState<Gen2Workspace | null>(null);
   const [deletingId, setDeletingId] = useState<string | null>(null);
+  const [query, setQuery] = useState("");
+  const [sort, setSort] = useState<SortKey>("updated");
   const [actionError, setActionError] = useState<{
     workspaceId: string;
     message: string;
   } | null>(null);
 
-  async function deleteWorkspace(workspace: Gen2Workspace) {
-    const confirmed = window.confirm(
-      `Delete “${workspace.name}”? This permanently deletes the workspace, its saved files, and all chat history for everyone with access.`,
+  const visible = useMemo(() => {
+    const needle = query.trim().toLowerCase();
+    const matches = needle
+      ? workspaces.filter(
+          (workspace) =>
+            workspace.name.toLowerCase().includes(needle) ||
+            (workspace.repository?.fullName.toLowerCase().includes(needle) ??
+              false),
+        )
+      : workspaces;
+    return [...matches].sort((a, b) =>
+      sort === "name"
+        ? a.name.localeCompare(b.name)
+        : b.updatedAt.localeCompare(a.updatedAt),
     );
-    if (!confirmed) return;
+  }, [workspaces, query, sort]);
 
+  async function deleteWorkspace(workspace: Gen2Workspace) {
     setDeletingId(workspace.id);
     setActionError(null);
     try {
@@ -67,90 +224,178 @@ export function Gen2WorkspaceList({
   }
 
   if (workspaces.length === 0) {
-    return <p className="gen2-empty">No workspaces yet.</p>;
+    return (
+      <Card className="flex flex-col items-center gap-3 border-dashed px-6 py-12 text-center">
+        <span className="flex size-11 items-center justify-center rounded-full bg-muted text-muted-foreground">
+          <Cloud aria-hidden="true" size={20} />
+        </span>
+        <div className="space-y-1">
+          <h2 className="m-0 text-base font-semibold">No workspaces yet</h2>
+          <p className="max-w-sm text-sm text-muted-foreground">
+            A workspace is a cloud computer with your code and an AI agent on
+            it. Create one above, then send its link to invite teammates.
+          </p>
+        </div>
+        <LinkButton href="#new-workspace" size="sm">
+          Create your first workspace
+        </LinkButton>
+      </Card>
+    );
   }
 
   return (
-    <ul className="gen2-list">
-      {workspaces.map((workspace) => {
-        const isDeleting = deletingId === workspace.id;
-        const deletionPending = workspace.status === "deleting";
-        const error =
-          actionError?.workspaceId === workspace.id
-            ? actionError.message
-            : null;
-        const cardContent = (
-          <>
-            <strong>{workspace.name}</strong>
-            {workspace.repository ? (
-              <span className="gen2-card-repo">
-                {workspace.repository.fullName}
+    <section aria-label="Your workspaces" className="space-y-3">
+      {workspaces.length >= CONTROLS_THRESHOLD ? (
+        <div className="flex flex-wrap items-center gap-3">
+          <div className="relative min-w-[14rem] flex-1">
+            <Search
+              aria-hidden="true"
+              className="pointer-events-none absolute top-1/2 left-3 -translate-y-1/2 text-muted-foreground"
+              size={14}
+            />
+            <Input
+              aria-label="Search workspaces"
+              autoComplete="off"
+              className="pl-9"
+              onChange={(event) => setQuery(event.target.value)}
+              placeholder="Search workspaces"
+              type="search"
+              value={query}
+            />
+          </div>
+          <select
+            aria-label="Sort workspaces"
+            className="h-9 rounded-md border border-input bg-background px-3 text-sm outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50"
+            onChange={(event) => setSort(event.target.value as SortKey)}
+            value={sort}
+          >
+            <option value="updated">Recently updated</option>
+            <option value="name">Name</option>
+          </select>
+        </div>
+      ) : null}
+
+      {visible.length === 0 ? (
+        <p className="text-sm text-muted-foreground">
+          No workspaces match &ldquo;{query.trim()}&rdquo;.
+        </p>
+      ) : (
+        <ul className="grid gap-3">
+          {visible.map((workspace) => {
+            const isDeleting = deletingId === workspace.id;
+            const deletionPending = workspace.status === "deleting";
+            const error =
+              actionError?.workspaceId === workspace.id
+                ? actionError.message
+                : null;
+            const isOwner = workspace.role === "owner";
+            const cardContent = (
+              <div className="flex min-w-0 flex-1 flex-col gap-1.5">
+                <strong className="truncate text-[15px] font-semibold">
+                  {workspace.name}
+                </strong>
+                <span className="flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-muted-foreground">
+                  <Badge variant={isOwner ? "muted" : "outline"}>
+                    {isOwner ? "Owned by you" : "Shared with you"}
+                  </Badge>
+                  {workspace.repository ? (
+                    <span className="max-w-[16rem] truncate font-mono">
+                      {workspace.repository.fullName}
+                    </span>
+                  ) : null}
+                  <time
+                    dateTime={workspace.updatedAt}
+                    suppressHydrationWarning
+                    title={new Date(workspace.updatedAt).toLocaleString()}
+                  >
+                    Updated {formatUpdated(workspace.updatedAt)}
+                  </time>
+                </span>
+              </div>
+            );
+            const status = (
+              <span className="inline-flex shrink-0 items-center gap-2 text-sm text-muted-foreground">
+                <span
+                  aria-hidden="true"
+                  className={cn(
+                    "size-2 rounded-full",
+                    STATUS_DOT[workspace.status],
+                  )}
+                />
+                {STATUS_LABEL[workspace.status]}
               </span>
-            ) : null}
-            <span className={`gen2-status gen2-status-${workspace.status}`}>
-              <span className="gen2-status-dot" aria-hidden="true" />
-              {STATUS_LABEL[workspace.status]}
-            </span>
-          </>
-        );
-
-        return (
-          <li key={workspace.id}>
-            <div className="gen2-card-row">
-              {deletionPending ? (
-                <div className="gen2-card gen2-card-pending">{cardContent}</div>
-              ) : (
-                <Link className="gen2-card" href={`/gen2/${workspace.id}`}>
-                  {cardContent}
-                </Link>
-              )}
-              {workspace.role === "owner" ? (
-                <button
-                  type="button"
-                  className="gen2-delete-button"
-                  aria-label={
-                    isDeleting
-                      ? `Deleting ${workspace.name}`
-                      : deletionPending
-                        ? `Retry deletion of ${workspace.name}`
-                        : `Delete ${workspace.name}`
-                  }
-                  title={
-                    deletionPending ? "Retry deletion" : "Delete workspace"
-                  }
-                  disabled={deletingId !== null}
-                  onClick={() => void deleteWorkspace(workspace)}
-                >
-                  {isDeleting ? (
-                    <LoaderCircle
-                      className="gen2-delete-spinner"
-                      aria-hidden="true"
-                      size={18}
-                    />
+            );
+
+            return (
+              <li key={workspace.id}>
+                <div className="flex items-center gap-2">
+                  {deletionPending ? (
+                    <Card className="flex min-h-16 flex-1 items-center gap-3 px-4 py-3 opacity-70">
+                      {cardContent}
+                      {status}
+                    </Card>
                   ) : (
-                    <Trash2 aria-hidden="true" size={18} />
+                    <Link
+                      className="flex min-w-0 flex-1 rounded-xl outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50"
+                      href={`/gen2/${workspace.id}`}
+                    >
+                      <Card className="flex min-h-16 w-full items-center gap-3 px-4 py-3 transition-colors hover:border-input hover:bg-secondary">
+                        {cardContent}
+                        {status}
+                      </Card>
+                    </Link>
                   )}
-                </button>
-              ) : null}
-            </div>
-            {deletionPending && !error ? (
-              <p
-                className="gen2-action-error"
-                role={workspace.lastError ? "alert" : "status"}
-              >
-                {workspace.lastError
-                  ? "Deletion did not finish. Retry deletion to continue."
-                  : "Workspace deletion is in progress."}
-              </p>
-            ) : null}
-            {error ? (
-              <p className="gen2-action-error" role="alert">
-                {error}
-              </p>
-            ) : null}
-          </li>
-        );
-      })}
-    </ul>
+                  {isOwner ? (
+                    <WorkspaceMenu
+                      busy={isDeleting}
+                      disabled={deletingId !== null}
+                      onDelete={() => setConfirming(workspace)}
+                      workspace={workspace}
+                    />
+                  ) : null}
+                </div>
+                {deletionPending && !error ? (
+                  <p
+                    className="mt-1.5 text-sm text-destructive"
+                    role={workspace.lastError ? "alert" : "status"}
+                  >
+                    {workspace.lastError
+                      ? "Deletion did not finish. Retry deletion to continue."
+                      : "Workspace deletion is in progress."}
+                  </p>
+                ) : null}
+                {error ? (
+                  <p className="mt-1.5 text-sm text-destructive" role="alert">
+                    {error}
+                  </p>
+                ) : null}
+              </li>
+            );
+          })}
+        </ul>
+      )}
+
+      {confirming ? (
+        <ConfirmDialog
+          busy={deletingId !== null}
+          confirmLabel="Delete workspace"
+          onCancel={() => setConfirming(null)}
+          onConfirm={() => {
+            const target = confirming;
+            setConfirming(null);
+            void deleteWorkspace(target);
+          }}
+          title={`Delete “${confirming.name}”?`}
+        >
+          <p>This permanently deletes, for everyone with access:</p>
+          <ul className="mt-2 list-disc space-y-0.5 pl-5">
+            <li>the workspace and its machine</li>
+            <li>all saved files</li>
+            <li>every chat and its history</li>
+          </ul>
+          <p className="mt-2">This can&apos;t be undone.</p>
+        </ConfirmDialog>
+      ) : null}
+    </section>
   );
 }
diff --git a/apps/web/components/settings/SettingsSidebar.tsx b/apps/web/components/settings/SettingsSidebar.tsx
index 0332a75c0..b3e64f6ec 100644
--- a/apps/web/components/settings/SettingsSidebar.tsx
+++ b/apps/web/components/settings/SettingsSidebar.tsx
@@ -2,9 +2,8 @@
 
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { useState } from "react";
 import type { LucideIcon } from "lucide-react";
-import { ArrowLeft, Blocks, Plug, Search, User } from "lucide-react";
+import { ArrowLeft, Blocks, KeyRound, Plug, User } from "lucide-react";
 
 import { cn } from "@/lib/platform/utils";
 
@@ -12,52 +11,53 @@ type SettingsNavItem = {
   name: string;
   href: string;
   icon: LucideIcon;
-  badge?: string;
-  keywords?: string[];
 };
 
-const personalNav: SettingsNavItem[] = [
-  { name: "Profile", href: "/settings/personal/profile", icon: User },
+type SettingsNavGroup = { label: string; items: SettingsNavItem[] };
+
+// Grouped by what the member is trying to do, not by page count: who they are,
+// what runs their agents, and what those agents can reach.
+const navGroups: SettingsNavGroup[] = [
+  {
+    label: "Account",
+    items: [
+      { name: "Profile", href: "/settings/personal/profile", icon: User },
+    ],
+  },
   {
-    name: "AI Provider Accounts",
-    href: "/settings/personal/providers",
-    icon: Plug,
-    badge: "Optional",
-    keywords: [
-      "openai",
-      "anthropic",
-      "api key",
-      "codex",
-      "claude",
-      "cursor",
-      "connect",
-      "sign in",
+    label: "Agents",
+    items: [
+      {
+        name: "AI Provider Accounts",
+        href: "/settings/personal/providers",
+        icon: Plug,
+      },
+      {
+        name: "Environment Variables",
+        href: "/settings/personal/environment",
+        icon: KeyRound,
+      },
     ],
   },
   {
-    name: "Integrations",
-    href: "/settings/personal/integrations",
-    icon: Blocks,
-    keywords: ["github", "gitlab", "linear", "jira"],
+    label: "Connections",
+    items: [
+      {
+        name: "Integrations",
+        href: "/settings/personal/integrations",
+        icon: Blocks,
+      },
+    ],
   },
 ];
 
-function matchesQuery(item: SettingsNavItem, query: string): boolean {
-  if (!query) return true;
-  const haystack = [item.name, ...(item.keywords ?? [])]
-    .join(" ")
-    .toLowerCase();
-  return haystack.includes(query.toLowerCase());
-}
-
 export function SettingsSidebar() {
   const pathname = usePathname();
-  const [query, setQuery] = useState("");
-  const visibleNav = personalNav.filter((item) => matchesQuery(item, query));
 
   return (
-    <aside className="orca-settings-scope flex w-[280px] shrink-0 flex-col border-r border-worktree-sidebar-border bg-worktree-sidebar">
-      <div className="border-b border-worktree-sidebar-border px-3 py-3">
+    <aside className="orca-settings-scope sticky top-0 flex h-dvh w-[280px] shrink-0 flex-col self-start border-r border-worktree-sidebar-border bg-worktree-sidebar">
+      {/* Leaves room for the app sidebar's floating show button. */}
+      <div className="border-b border-worktree-sidebar-border px-3 py-3 [.is-sidebar-collapsed_&]:pl-12">
         <Link
           className="flex w-full items-center gap-2 rounded-lg px-2.5 py-1.5 text-[13px] text-muted-foreground transition-colors hover:bg-worktree-sidebar-accent/60 hover:text-worktree-sidebar-foreground"
           href="/dashboard"
@@ -67,67 +67,42 @@ export function SettingsSidebar() {
         </Link>
       </div>
 
-      <div className="border-b border-worktree-sidebar-border px-3 py-3">
-        <div className="relative">
-          <Search
-            aria-hidden="true"
-            className="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground"
-          />
-          <input
-            aria-label="Search settings"
-            className="h-9 w-full rounded-md border border-border bg-background/60 pl-9 pr-3 text-[13px] text-worktree-sidebar-foreground placeholder:text-muted-foreground outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50"
-            onChange={(event) => setQuery(event.target.value)}
-            placeholder="Search settings"
-            type="search"
-            value={query}
-          />
-        </div>
-      </div>
-
-      <div className="min-h-0 flex-1 overflow-y-auto px-3 py-4">
-        <div className="space-y-2">
-          <p className="px-3 text-[11px] font-medium tracking-[0.18em] text-muted-foreground uppercase">
-            Personal
-          </p>
-          {visibleNav.length > 0 ? (
-            <nav aria-label="Personal settings" className="space-y-1">
-              {visibleNav.map((item) => {
-                const isActive = pathname === item.href;
-                const Icon = item.icon;
-
-                return (
-                  <Link
-                    aria-current={isActive ? "page" : undefined}
-                    className={cn(
-                      "flex w-full items-center gap-2 rounded-lg border-l-2 border-transparent py-1.5 pr-3 pl-[10px] text-left text-[13px] transition-colors duration-150 outline-none focus-visible:ring-[3px] focus-visible:ring-primary/50",
-                      // A neutral wash plus a thin accent rule on the left,
-                      // not a color wash -- carries "selected" through a
-                      // precise mark instead of a blue block.
-                      isActive
-                        ? "border-primary bg-foreground/5 font-medium text-foreground"
-                        : "text-worktree-sidebar-foreground/60 hover:bg-primary/5 hover:text-worktree-sidebar-foreground",
-                    )}
-                    href={item.href}
-                    key={item.href}
-                  >
-                    <Icon aria-hidden="true" className="size-4 shrink-0" />
-                    <span className="truncate">{item.name}</span>
-                    {item.badge ? (
-                      <span className="ml-auto shrink-0 rounded-full bg-muted px-1.5 py-0.5 text-[9px] font-medium tracking-wider text-muted-foreground uppercase">
-                        {item.badge}
-                      </span>
-                    ) : null}
-                  </Link>
-                );
-              })}
-            </nav>
-          ) : (
-            <p className="px-3 text-xs text-muted-foreground">
-              No matching settings.
+      <nav
+        aria-label="Settings"
+        className="min-h-0 flex-1 space-y-5 overflow-y-auto px-3 py-4"
+      >
+        {navGroups.map((group) => (
+          <div className="space-y-1" key={group.label}>
+            <p className="px-3 pb-1 text-[11px] font-medium tracking-[0.18em] text-muted-foreground uppercase">
+              {group.label}
             </p>
-          )}
-        </div>
-      </div>
+            {group.items.map((item) => {
+              const isActive = pathname === item.href;
+              const Icon = item.icon;
+
+              return (
+                <Link
+                  aria-current={isActive ? "page" : undefined}
+                  className={cn(
+                    "flex min-h-9 w-full items-center gap-2 rounded-lg border-l-2 border-transparent py-1.5 pr-3 pl-[10px] text-left text-[13px] transition-colors duration-150 outline-none focus-visible:ring-[3px] focus-visible:ring-primary/50",
+                    // A neutral wash plus a thin accent rule on the left,
+                    // not a color wash -- carries "selected" through a
+                    // precise mark instead of a blue block.
+                    isActive
+                      ? "border-primary bg-foreground/5 font-medium text-foreground"
+                      : "text-worktree-sidebar-foreground/60 hover:bg-primary/5 hover:text-worktree-sidebar-foreground",
+                  )}
+                  href={item.href}
+                  key={item.href}
+                >
+                  <Icon aria-hidden="true" className="size-4 shrink-0" />
+                  <span className="truncate">{item.name}</span>
+                </Link>
+              );
+            })}
+          </div>
+        ))}
+      </nav>
     </aside>
   );
 }
diff --git a/apps/web/components/settings/confirm-dialog.tsx b/apps/web/components/settings/confirm-dialog.tsx
new file mode 100644
index 000000000..4403ec3cf
--- /dev/null
+++ b/apps/web/components/settings/confirm-dialog.tsx
@@ -0,0 +1,79 @@
+"use client";
+
+import { useEffect, useId, useRef, type ReactNode } from "react";
+
+import { Button } from "@/components/ui/button";
+
+/**
+ * In-app replacement for `window.confirm` on destructive settings actions.
+ * Focus starts on Cancel so an accidental Enter is safe; Escape and a click on
+ * the scrim both cancel.
+ */
+export function ConfirmDialog({
+  title,
+  children,
+  confirmLabel,
+  busy = false,
+  onConfirm,
+  onCancel,
+}: {
+  title: string;
+  children: ReactNode;
+  confirmLabel: string;
+  busy?: boolean;
+  onConfirm: () => void;
+  onCancel: () => void;
+}) {
+  const titleId = useId();
+  const cancelRef = useRef<HTMLButtonElement>(null);
+
+  useEffect(() => {
+    const opener = document.activeElement as HTMLElement | null;
+    cancelRef.current?.focus();
+    return () => opener?.focus?.();
+  }, []);
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4"
+      onClick={(event) => {
+        if (event.target === event.currentTarget) onCancel();
+      }}
+      onKeyDown={(event) => {
+        if (event.key === "Escape") onCancel();
+      }}
+    >
+      <div
+        aria-labelledby={titleId}
+        aria-modal="true"
+        className="w-full max-w-sm space-y-4 rounded-xl border border-border bg-card p-5 shadow-xl"
+        role="alertdialog"
+      >
+        <div className="space-y-1.5">
+          <h2 className="text-base font-semibold" id={titleId}>
+            {title}
+          </h2>
+          <div className="text-sm text-muted-foreground">{children}</div>
+        </div>
+        <div className="flex justify-end gap-2">
+          <Button
+            onClick={onCancel}
+            ref={cancelRef}
+            type="button"
+            variant="secondary"
+          >
+            Cancel
+          </Button>
+          <button
+            className="inline-flex h-9 cursor-pointer items-center justify-center rounded-md bg-destructive px-4 text-sm font-medium text-white transition-colors outline-none hover:bg-destructive/90 focus-visible:ring-[3px] focus-visible:ring-destructive/40 disabled:pointer-events-none disabled:opacity-50"
+            disabled={busy}
+            onClick={onConfirm}
+            type="button"
+          >
+            {confirmLabel}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/components/settings/environment-variables-panel.tsx b/apps/web/components/settings/environment-variables-panel.tsx
index cfa048b57..d1025f4d2 100644
--- a/apps/web/components/settings/environment-variables-panel.tsx
+++ b/apps/web/components/settings/environment-variables-panel.tsx
@@ -2,11 +2,26 @@
 
 import { useRouter } from "next/navigation";
 import { useState } from "react";
-import { Pencil, Plus, Trash2 } from "lucide-react";
+import { ClipboardPaste, KeyRound, Pencil, Plus, Trash2 } from "lucide-react";
 
 import type { EnvironmentVariable } from "@codev/contracts";
 import { Button } from "@/components/ui/button";
+import { ConfirmDialog } from "@/components/settings/confirm-dialog";
+import { useSettingsNotify } from "@/components/settings/settings-feedback";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  environmentNameError,
+  parseDotenv,
+} from "@/components/settings/parse-dotenv";
 
 function maskedValue(lastFour: string | null) {
   if (!lastFour) return "••••••••";
@@ -29,7 +44,20 @@ export function EnvironmentVariablesPanel({
     text: string;
   } | null>(null);
   const [busy, setBusy] = useState(false);
+  const [deleting, setDeleting] = useState<EnvironmentVariable | null>(null);
+  const notify = useSettingsNotify();
   const [showAdd, setShowAdd] = useState(false);
+  const [showImport, setShowImport] = useState(false);
+  const [importText, setImportText] = useState("");
+  const nameError = environmentNameError(name);
+  const parsedImport = parseDotenv(importText);
+
+  // A toast where the settings area provides one; the inline line otherwise.
+  function report(next: { tone: "success" | "warning"; text: string }) {
+    if (notify)
+      notify(next.text, next.tone === "warning" ? "error" : "success");
+    else setMessage(next);
+  }
 
   function refreshList(next: EnvironmentVariable[]) {
     setVariables(next);
@@ -49,7 +77,7 @@ export function EnvironmentVariablesPanel({
       error?: string;
     };
     if (!response.ok || !payload.variable) {
-      setMessage({
+      report({
         tone: "warning",
         text: payload.error ?? "Could not save the variable.",
       });
@@ -64,7 +92,54 @@ export function EnvironmentVariablesPanel({
     setName("");
     setValue("");
     setShowAdd(false);
-    setMessage({ tone: "success", text: `${payload.variable.name} saved.` });
+    report({ tone: "success", text: `${payload.variable.name} saved.` });
+    setBusy(false);
+  }
+
+  /**
+   * Pasted .env text is saved one variable at a time through the same route as
+   * a single add, so every server-side rule (limit, duplicate names, size)
+   * applies unchanged; the result is one summary rather than a toast per line.
+   */
+  async function importVariables() {
+    if (parsedImport.entries.length === 0) return;
+    setBusy(true);
+    setMessage(null);
+    const saved: EnvironmentVariable[] = [];
+    const failed: string[] = [];
+    for (const entry of parsedImport.entries) {
+      const response = await fetch("/api/settings/environment", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(entry),
+      });
+      const payload = (await response.json().catch(() => ({}))) as {
+        variable?: EnvironmentVariable;
+      };
+      if (response.ok && payload.variable) saved.push(payload.variable);
+      else failed.push(entry.name);
+    }
+    if (saved.length > 0) {
+      refreshList(
+        [...variables, ...saved].sort((a, b) => a.name.localeCompare(b.name)),
+      );
+    }
+    if (failed.length === 0) {
+      setImportText("");
+      setShowImport(false);
+    }
+    const parts = [
+      saved.length > 0
+        ? `Imported ${saved.length} variable${saved.length === 1 ? "" : "s"}.`
+        : null,
+      failed.length > 0
+        ? `Not imported (already exist or over the limit): ${failed.join(", ")}.`
+        : null,
+    ].filter(Boolean);
+    report({
+      tone: failed.length > 0 ? "warning" : "success",
+      text: parts.join(" "),
+    });
     setBusy(false);
   }
 
@@ -81,7 +156,7 @@ export function EnvironmentVariablesPanel({
       error?: string;
     };
     if (!response.ok || !payload.variable) {
-      setMessage({
+      report({
         tone: "warning",
         text: payload.error ?? "Could not update the variable.",
       });
@@ -95,12 +170,11 @@ export function EnvironmentVariablesPanel({
     );
     setEditingId(null);
     setEditValue("");
-    setMessage({ tone: "success", text: `${payload.variable.name} updated.` });
+    report({ tone: "success", text: `${payload.variable.name} updated.` });
     setBusy(false);
   }
 
   async function removeVariable(variable: EnvironmentVariable) {
-    if (!window.confirm(`Delete ${variable.name}?`)) return;
     setBusy(true);
     setMessage(null);
     const response = await fetch(`/api/settings/environment/${variable.id}`, {
@@ -110,7 +184,7 @@ export function EnvironmentVariablesPanel({
       const payload = (await response.json().catch(() => null)) as {
         error?: string;
       } | null;
-      setMessage({
+      report({
         tone: "warning",
         text: payload?.error ?? "Could not delete the variable.",
       });
@@ -118,175 +192,332 @@ export function EnvironmentVariablesPanel({
       return;
     }
     refreshList(variables.filter((item) => item.id !== variable.id));
-    setMessage({ tone: "success", text: `${variable.name} deleted.` });
+    report({ tone: "success", text: `${variable.name} deleted.` });
     setBusy(false);
   }
 
   return (
-    <div className="space-y-3">
-      <div className="flex flex-wrap items-start justify-between gap-3">
-        <p className="max-w-[46ch] text-xs text-muted-foreground">
-          Values are encrypted at rest and never shown again after you save. Use
-          them like a personal <code>.env</code> for CoDev workflows.
-        </p>
-        <Button
-          className="shrink-0"
-          disabled={busy}
-          onClick={() => {
-            setShowAdd((current) => !current);
-            setMessage(null);
-          }}
-          size="sm"
-          type="button"
-          variant="outline"
-        >
-          <Plus aria-hidden="true" className="size-3.5" />
-          {showAdd ? "Cancel" : "Add"}
-        </Button>
-      </div>
+    <Card>
+      <CardHeader className="flex-row items-start justify-between gap-4 px-6 pt-6">
+        <div className="min-w-0 space-y-1.5">
+          <CardTitle className="text-base">Personal .env</CardTitle>
+          <CardDescription>
+            Encrypted at rest and write-only: values are never shown again after
+            you save them. They are passed to every Gen 2 agent session you
+            start, like a personal{" "}
+            <code className="font-mono text-xs">.env</code>. Your provider login
+            always wins over a variable with the same name.
+          </CardDescription>
+        </div>
+        {variables.length > 0 || showAdd || showImport ? (
+          <div className="flex shrink-0 items-center gap-2">
+            <Button
+              disabled={busy}
+              onClick={() => {
+                setShowImport((current) => !current);
+                setShowAdd(false);
+                setMessage(null);
+              }}
+              size="sm"
+              type="button"
+              variant={showImport ? "secondary" : "outline"}
+            >
+              <ClipboardPaste aria-hidden="true" className="size-3.5" />
+              Paste .env
+            </Button>
+            <Button
+              disabled={busy}
+              onClick={() => {
+                setShowAdd((current) => !current);
+                setShowImport(false);
+                setMessage(null);
+              }}
+              size="sm"
+              type="button"
+              variant={showAdd ? "secondary" : "outline"}
+            >
+              <Plus aria-hidden="true" className="size-3.5" />
+              Add variable
+            </Button>
+          </div>
+        ) : null}
+      </CardHeader>
 
-      {showAdd ? (
-        <div className="space-y-3 rounded-md border border-border bg-background/40 p-3.5">
-          <label className="grid gap-1.5">
-            <span className="text-[11px] tracking-wide text-muted-foreground uppercase">
-              Key
-            </span>
-            <Input
-              autoComplete="off"
-              className="font-mono"
-              onChange={(event) => setName(event.target.value.toUpperCase())}
-              placeholder="DATABASE_URL"
-              spellCheck={false}
-              value={name}
-            />
-          </label>
-          <label className="grid gap-1.5">
-            <span className="text-[11px] tracking-wide text-muted-foreground uppercase">
-              Value
+      <CardContent className="space-y-4 px-6 pt-5 pb-6">
+        {showAdd ? (
+          <form
+            className="space-y-4 rounded-lg border border-border bg-muted/30 p-4"
+            onSubmit={(event) => {
+              event.preventDefault();
+              if (!busy && name.trim() && value && !nameError)
+                void addVariable();
+            }}
+          >
+            <div className="grid gap-4 sm:grid-cols-2">
+              <div className="space-y-2">
+                <Label htmlFor="env-name">Name</Label>
+                <Input
+                  autoComplete="off"
+                  autoFocus
+                  className="font-mono"
+                  aria-describedby={nameError ? "env-name-error" : undefined}
+                  aria-invalid={nameError ? true : undefined}
+                  id="env-name"
+                  onChange={(event) =>
+                    setName(event.target.value.toUpperCase())
+                  }
+                  placeholder="DATABASE_URL"
+                  spellCheck={false}
+                  value={name}
+                />
+                {nameError ? (
+                  <p
+                    className="text-xs text-destructive"
+                    id="env-name-error"
+                    role="alert"
+                  >
+                    {nameError}
+                  </p>
+                ) : null}
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="env-value">Value</Label>
+                <Input
+                  autoComplete="off"
+                  className="font-mono"
+                  id="env-value"
+                  onChange={(event) => setValue(event.target.value)}
+                  placeholder="Sensitive value"
+                  spellCheck={false}
+                  type="password"
+                  value={value}
+                />
+              </div>
+            </div>
+            <div className="flex justify-end gap-2">
+              <Button
+                disabled={busy}
+                onClick={() => setShowAdd(false)}
+                size="sm"
+                type="button"
+                variant="secondary"
+              >
+                Cancel
+              </Button>
+              <Button
+                disabled={busy || !name.trim() || !value || nameError !== null}
+                size="sm"
+                type="submit"
+              >
+                {busy ? "Saving…" : "Save variable"}
+              </Button>
+            </div>
+          </form>
+        ) : null}
+
+        {showImport ? (
+          <form
+            className="space-y-4 rounded-lg border border-border bg-muted/30 p-4"
+            onSubmit={(event) => {
+              event.preventDefault();
+              void importVariables();
+            }}
+          >
+            <div className="space-y-2">
+              <Label htmlFor="env-import">Paste your .env</Label>
+              <Textarea
+                autoFocus
+                className="min-h-32 rounded-md border border-input bg-background px-3 py-2 font-mono text-xs focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50"
+                id="env-import"
+                onChange={(event) => setImportText(event.target.value)}
+                placeholder={"DATABASE_URL=postgres://...\nAPI_KEY=..."}
+                spellCheck={false}
+                value={importText}
+              />
+              <p aria-live="polite" className="text-xs text-muted-foreground">
+                {importText.trim()
+                  ? `${parsedImport.entries.length} variable${parsedImport.entries.length === 1 ? "" : "s"} ready${parsedImport.skipped.length > 0 ? `; line${parsedImport.skipped.length === 1 ? "" : "s"} ${parsedImport.skipped.join(", ")} can't be used and will be skipped` : ""}. Existing names are not overwritten.`
+                  : "One NAME=value per line. Comments and export prefixes are fine."}
+              </p>
+            </div>
+            <div className="flex justify-end gap-2">
+              <Button
+                disabled={busy}
+                onClick={() => setShowImport(false)}
+                size="sm"
+                type="button"
+                variant="secondary"
+              >
+                Cancel
+              </Button>
+              <Button
+                disabled={busy || parsedImport.entries.length === 0}
+                size="sm"
+                type="submit"
+              >
+                {busy ? "Importing…" : "Import variables"}
+              </Button>
+            </div>
+          </form>
+        ) : null}
+
+        {variables.length === 0 && !showAdd && !showImport ? (
+          <div className="flex flex-col items-center gap-3 rounded-lg border border-dashed border-border px-6 py-10 text-center">
+            <span className="flex size-10 items-center justify-center rounded-full bg-muted text-muted-foreground">
+              <KeyRound aria-hidden="true" className="size-5" />
             </span>
-            <Input
-              autoComplete="off"
-              className="font-mono"
-              onChange={(event) => setValue(event.target.value)}
-              placeholder="Sensitive value"
-              spellCheck={false}
-              type="password"
-              value={value}
-            />
-          </label>
-          <Button
-            disabled={busy || !name.trim() || !value}
-            onClick={() => void addVariable()}
-            size="sm"
-            type="button"
+            <div className="space-y-1">
+              <p className="text-sm font-medium">No variables yet</p>
+              <p className="max-w-xs text-sm text-muted-foreground">
+                Add the keys and settings your agents and sandboxes need, such
+                as <code className="font-mono text-xs">DATABASE_URL</code>.
+              </p>
+            </div>
+            <Button
+              onClick={() => {
+                setShowAdd(true);
+                setMessage(null);
+              }}
+              size="sm"
+              type="button"
+            >
+              <Plus aria-hidden="true" className="size-3.5" />
+              Add variable
+            </Button>
+            <button
+              className="cursor-pointer text-xs text-muted-foreground underline-offset-4 hover:text-foreground hover:underline focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-none"
+              onClick={() => {
+                setShowImport(true);
+                setMessage(null);
+              }}
+              type="button"
+            >
+              or paste a .env file
+            </button>
+          </div>
+        ) : null}
+
+        {variables.length > 0 ? (
+          <ul
+            aria-label="Environment variables"
+            className="divide-y divide-border overflow-hidden rounded-lg border border-border"
           >
-            {busy ? "Saving…" : "Save"}
-          </Button>
-        </div>
-      ) : null}
+            {variables.map((variable) => {
+              const isEditing = editingId === variable.id;
+              return (
+                <li
+                  className="flex flex-wrap items-center justify-between gap-3 px-4 py-3"
+                  key={variable.id}
+                >
+                  <div className="flex min-w-0 flex-1 flex-wrap items-center gap-x-4 gap-y-2">
+                    <code className="text-sm font-medium break-all">
+                      {variable.name}
+                    </code>
+                    {isEditing ? (
+                      <Input
+                        aria-label={`New value for ${variable.name}`}
+                        autoComplete="off"
+                        autoFocus
+                        className="h-8 max-w-64 font-mono text-xs"
+                        onChange={(event) => setEditValue(event.target.value)}
+                        placeholder="Enter a new value"
+                        spellCheck={false}
+                        type="password"
+                        value={editValue}
+                      />
+                    ) : (
+                      <span className="font-mono text-xs tracking-wide text-muted-foreground">
+                        {maskedValue(variable.lastFour)}
+                      </span>
+                    )}
+                  </div>
+                  <div className="flex shrink-0 items-center gap-1.5">
+                    {isEditing ? (
+                      <>
+                        <Button
+                          disabled={busy || !editValue}
+                          onClick={() => void saveEdit(variable.id)}
+                          size="sm"
+                          type="button"
+                        >
+                          Save
+                        </Button>
+                        <Button
+                          disabled={busy}
+                          onClick={() => {
+                            setEditingId(null);
+                            setEditValue("");
+                          }}
+                          size="sm"
+                          type="button"
+                          variant="secondary"
+                        >
+                          Cancel
+                        </Button>
+                      </>
+                    ) : (
+                      <>
+                        <Button
+                          aria-label={`Edit ${variable.name}`}
+                          disabled={busy}
+                          onClick={() => {
+                            setEditingId(variable.id);
+                            setEditValue("");
+                            setMessage(null);
+                          }}
+                          size="icon-sm"
+                          title="Replace value"
+                          type="button"
+                          variant="secondary"
+                        >
+                          <Pencil aria-hidden="true" className="size-3.5" />
+                        </Button>
+                        <Button
+                          aria-label={`Delete ${variable.name}`}
+                          className="hover:text-destructive"
+                          disabled={busy}
+                          onClick={() => setDeleting(variable)}
+                          size="icon-sm"
+                          title="Delete"
+                          type="button"
+                          variant="secondary"
+                        >
+                          <Trash2 aria-hidden="true" className="size-3.5" />
+                        </Button>
+                      </>
+                    )}
+                  </div>
+                </li>
+              );
+            })}
+          </ul>
+        ) : null}
 
-      {variables.length === 0 && !showAdd ? (
-        <div className="grid gap-1.5 rounded-md border border-dashed border-border p-7 text-center">
-          <strong className="text-sm">No environment variables yet</strong>
-          <p className="text-xs text-muted-foreground">
-            Add keys your agents and sandboxes should be able to use later.
+        {message ? (
+          <p
+            className={`text-sm ${message.tone === "warning" ? "text-destructive" : "text-muted-foreground"}`}
+            role={message.tone === "success" ? "status" : "alert"}
+          >
+            {message.text}
           </p>
-        </div>
-      ) : (
-        <ul aria-label="Environment variables" className="space-y-2">
-          {variables.map((variable) => {
-            const isEditing = editingId === variable.id;
-            return (
-              <li
-                className="flex flex-wrap items-center justify-between gap-3 rounded-md border border-border p-3"
-                key={variable.id}
-              >
-                <div className="flex min-w-0 items-center gap-3">
-                  <code className="text-sm font-medium">{variable.name}</code>
-                  {isEditing ? (
-                    <Input
-                      aria-label={`New value for ${variable.name}`}
-                      autoComplete="off"
-                      className="h-8 w-48 font-mono text-xs"
-                      onChange={(event) => setEditValue(event.target.value)}
-                      placeholder="Enter a new value"
-                      spellCheck={false}
-                      type="password"
-                      value={editValue}
-                    />
-                  ) : (
-                    <span className="font-mono text-xs tracking-wide text-muted-foreground">
-                      {maskedValue(variable.lastFour)}
-                    </span>
-                  )}
-                </div>
-                <div className="flex shrink-0 items-center gap-1.5">
-                  {isEditing ? (
-                    <>
-                      <Button
-                        disabled={busy || !editValue}
-                        onClick={() => void saveEdit(variable.id)}
-                        size="sm"
-                        type="button"
-                      >
-                        Save
-                      </Button>
-                      <Button
-                        disabled={busy}
-                        onClick={() => {
-                          setEditingId(null);
-                          setEditValue("");
-                        }}
-                        size="sm"
-                        type="button"
-                        variant="secondary"
-                      >
-                        Cancel
-                      </Button>
-                    </>
-                  ) : (
-                    <>
-                      <Button
-                        aria-label={`Edit ${variable.name}`}
-                        disabled={busy}
-                        onClick={() => {
-                          setEditingId(variable.id);
-                          setEditValue("");
-                          setMessage(null);
-                        }}
-                        size="icon-sm"
-                        type="button"
-                        variant="secondary"
-                      >
-                        <Pencil aria-hidden="true" className="size-3.5" />
-                      </Button>
-                      <Button
-                        aria-label={`Delete ${variable.name}`}
-                        disabled={busy}
-                        onClick={() => void removeVariable(variable)}
-                        size="icon-sm"
-                        type="button"
-                        variant="secondary"
-                      >
-                        <Trash2 aria-hidden="true" className="size-3.5" />
-                      </Button>
-                    </>
-                  )}
-                </div>
-              </li>
-            );
-          })}
-        </ul>
-      )}
+        ) : null}
+      </CardContent>
 
-      {message ? (
-        <p
-          className={`text-xs ${message.tone === "warning" ? "text-destructive" : "text-muted-foreground"}`}
-          role={message.tone === "success" ? "status" : "alert"}
+      {deleting ? (
+        <ConfirmDialog
+          busy={busy}
+          confirmLabel="Delete variable"
+          onCancel={() => setDeleting(null)}
+          onConfirm={() => {
+            const target = deleting;
+            setDeleting(null);
+            void removeVariable(target);
+          }}
+          title={`Delete ${deleting.name}?`}
         >
-          {message.text}
-        </p>
+          Agents and sandboxes lose access to this value. This cannot be undone.
+        </ConfirmDialog>
       ) : null}
-    </div>
+    </Card>
   );
 }
diff --git a/apps/web/components/settings/parse-dotenv.test.ts b/apps/web/components/settings/parse-dotenv.test.ts
new file mode 100644
index 000000000..6cdc6b53e
--- /dev/null
+++ b/apps/web/components/settings/parse-dotenv.test.ts
@@ -0,0 +1,51 @@
+import { describe, expect, it } from "vitest";
+
+import { environmentNameError, parseDotenv } from "./parse-dotenv";
+
+describe("parseDotenv", () => {
+  it("reads assignments, skipping blanks and comments", () => {
+    const result = parseDotenv(
+      [
+        "# database",
+        "",
+        "DATABASE_URL=postgres://x",
+        "export API_KEY='abc'",
+      ].join("\n"),
+    );
+    expect(result.entries).toEqual([
+      { name: "DATABASE_URL", value: "postgres://x" },
+      { name: "API_KEY", value: "abc" },
+    ]);
+    expect(result.skipped).toEqual([]);
+  });
+
+  it("strips inline comments from unquoted values only", () => {
+    const result = parseDotenv('A=one # note\nB="two # kept"');
+    expect(result.entries).toEqual([
+      { name: "A", value: "one" },
+      { name: "B", value: "two # kept" },
+    ]);
+  });
+
+  it("lets a later duplicate win and reports unusable lines", () => {
+    const result = parseDotenv("A=1\nnot an assignment\n1BAD=x\nEMPTY=\nA=2");
+    expect(result.entries).toEqual([{ name: "A", value: "2" }]);
+    expect(result.skipped).toEqual([2, 3, 4]);
+  });
+
+  it("handles CRLF line endings", () => {
+    expect(parseDotenv("A=1\r\nB=2\r\n").entries).toHaveLength(2);
+  });
+});
+
+describe("environmentNameError", () => {
+  it("accepts valid names and blank input", () => {
+    expect(environmentNameError("DATABASE_URL")).toBeNull();
+    expect(environmentNameError("")).toBeNull();
+  });
+
+  it("explains why a name is rejected", () => {
+    expect(environmentNameError("1ABC")).toMatch(/number/);
+    expect(environmentNameError("not valid")).toMatch(/underscores/);
+  });
+});
diff --git a/apps/web/components/settings/parse-dotenv.ts b/apps/web/components/settings/parse-dotenv.ts
new file mode 100644
index 000000000..918378c2a
--- /dev/null
+++ b/apps/web/components/settings/parse-dotenv.ts
@@ -0,0 +1,63 @@
+const NAME_PATTERN = /^[A-Za-z_][A-Za-z0-9_]*$/;
+
+export const ENV_NAME_HINT = "Use letters, numbers, and underscores.";
+
+/** `null` when the name is acceptable, otherwise a message for the member. */
+export function environmentNameError(name: string): string | null {
+  const trimmed = name.trim();
+  if (!trimmed) return null;
+  if (trimmed.length > 128) return "Names can be at most 128 characters.";
+  if (/^[0-9]/.test(trimmed)) return "A name cannot start with a number.";
+  return NAME_PATTERN.test(trimmed) ? null : ENV_NAME_HINT;
+}
+
+export type ParsedDotenv = {
+  entries: { name: string; value: string }[];
+  /** 1-based line numbers that looked like assignments but could not be used. */
+  skipped: number[];
+};
+
+function unquote(raw: string): string {
+  const value = raw.trim();
+  const quote = value[0];
+  if ((quote === '"' || quote === "'") && value.endsWith(quote)) {
+    const inner = value.slice(1, -1);
+    return quote === '"' ? inner.replace(/\\n/g, "\n") : inner;
+  }
+  // An unquoted value ends at an inline ` #` comment.
+  const comment = value.search(/\s#/);
+  return (comment === -1 ? value : value.slice(0, comment)).trim();
+}
+
+/**
+ * Reads pasted `.env` text. Later duplicates win, blank lines and `#` comments
+ * are ignored, and a line that cannot be used is reported rather than dropped
+ * silently so the member knows what was not imported.
+ */
+export function parseDotenv(text: string): ParsedDotenv {
+  const byName = new Map<string, string>();
+  const skipped: number[] = [];
+
+  text.split(/\r?\n/).forEach((line, index) => {
+    const trimmed = line.trim();
+    if (!trimmed || trimmed.startsWith("#")) return;
+    const assignment = trimmed.replace(/^export\s+/, "");
+    const equals = assignment.indexOf("=");
+    if (equals === -1) {
+      skipped.push(index + 1);
+      return;
+    }
+    const name = assignment.slice(0, equals).trim();
+    const value = unquote(assignment.slice(equals + 1));
+    if (environmentNameError(name) !== null || !name || !value) {
+      skipped.push(index + 1);
+      return;
+    }
+    byName.set(name, value);
+  });
+
+  return {
+    entries: [...byName].map(([name, value]) => ({ name, value })),
+    skipped,
+  };
+}
diff --git a/apps/web/components/settings/provider-account-card.test.tsx b/apps/web/components/settings/provider-account-card.test.tsx
index afe4dd855..184558d95 100644
--- a/apps/web/components/settings/provider-account-card.test.tsx
+++ b/apps/web/components/settings/provider-account-card.test.tsx
@@ -534,6 +534,7 @@ describe("ProviderAccountCard", () => {
     );
 
     fireEvent.click(screen.getByRole("button", { name: "Disconnect" }));
+    fireEvent.click(screen.getByRole("button", { name: "Disconnect Cursor" }));
 
     expect(fetchMock).toHaveBeenCalledWith(
       "/api/personal/subscriptions?provider=cursor",
@@ -749,6 +750,7 @@ describe("ProviderAccountCard", () => {
 
       expect(screen.getByText(/ending wxyz/)).toBeInTheDocument();
       fireEvent.click(screen.getByRole("button", { name: "Revoke" }));
+      fireEvent.click(screen.getByRole("button", { name: "Revoke login" }));
       await waitFor(() => {
         expect(fetchMock).toHaveBeenCalledWith(
           "/api/personal/connections?provider=anthropic&kind=claude_cli_token",
diff --git a/apps/web/components/settings/provider-account-card.tsx b/apps/web/components/settings/provider-account-card.tsx
index 3bc98441b..5c3821721 100644
--- a/apps/web/components/settings/provider-account-card.tsx
+++ b/apps/web/components/settings/provider-account-card.tsx
@@ -12,6 +12,8 @@ import { Check, ChevronDown, Copy, KeyRound, Terminal } from "lucide-react";
 
 import { Button } from "@/components/ui/button";
 import { Card } from "@/components/ui/card";
+import { ConfirmDialog } from "@/components/settings/confirm-dialog";
+import { useSettingsNotify } from "@/components/settings/settings-feedback";
 import { Input } from "@/components/ui/input";
 import { ClaudeHostedConnect } from "@/components/settings/claude-hosted-connect";
 import { CodexHostedConnect } from "@/components/settings/codex-hosted-connect";
@@ -40,7 +42,7 @@ function CopyableCommand({ command }: { command: string }) {
   const [copied, setCopied] = useState(false);
 
   return (
-    <div className="flex items-center justify-between gap-2 rounded-md border border-border bg-background px-2.5 py-1.5 font-mono text-[11px]">
+    <div className="flex items-center justify-between gap-2 rounded-md border border-border bg-background px-2.5 py-1.5 font-mono text-xs">
       <span>
         <span className="text-emerald-400">$</span> {command}
       </span>
@@ -82,9 +84,7 @@ function SurfaceToggle({
     <div className="flex items-start justify-between gap-3 border-t border-border/60 py-2">
       <div className="min-w-0 flex-1">
         <p className="text-xs font-medium">{label}</p>
-        {note ? (
-          <p className="text-[11px] text-muted-foreground">{note}</p>
-        ) : null}
+        {note ? <p className="text-xs text-muted-foreground">{note}</p> : null}
       </div>
       <button
         aria-checked={checked}
@@ -142,7 +142,7 @@ function RunsIn({
 }) {
   if (surfaces.length === 0) {
     return (
-      <p className="flex items-center gap-1.5 text-[11px] text-muted-foreground">
+      <p className="flex items-center gap-1.5 text-xs text-muted-foreground">
         <StatusDot connected={false} />
         {connected
           ? "Connected, but nothing here can run it yet"
@@ -156,14 +156,14 @@ function RunsIn({
       ? names[0]
       : `${names.slice(0, -1).join(", ")} and ${names[names.length - 1]}`;
   return (
-    <p className="flex flex-wrap items-center gap-1.5 text-[11px] text-muted-foreground">
+    <p className="flex flex-wrap items-center gap-1.5 text-xs text-muted-foreground">
       <StatusDot connected />
       <span className="sr-only">{`Runs in ${spoken}`}</span>
       <span aria-hidden>Runs in</span>
       {surfaces.map((surface) => (
         <span
           aria-hidden
-          className="rounded-full border border-border/70 px-1.5 py-px text-[10px] font-medium text-foreground/80"
+          className="rounded-full border border-border/70 px-1.5 py-px text-[11px] font-medium text-foreground/80"
           key={surface}
         >
           {SURFACE_LABEL[surface]}
@@ -194,10 +194,10 @@ function FallbackRow({
         <Icon aria-hidden className="size-3.5 shrink-0 text-muted-foreground" />
         <div className="min-w-0 flex-1">
           <p className="text-xs font-medium">{title}</p>
-          <p className="text-[11px] text-muted-foreground">{description}</p>
+          <p className="text-xs text-muted-foreground">{description}</p>
         </div>
         {connected ? (
-          <span className="flex shrink-0 items-center gap-1.5 text-[11px] text-muted-foreground">
+          <span className="flex shrink-0 items-center gap-1.5 text-xs text-muted-foreground">
             <StatusDot connected />
             Connected
           </span>
@@ -244,7 +244,14 @@ export function ProviderAccountCard({
   const [busy, setBusy] = useState<
     "connect" | "disconnect" | "save" | "revoke" | ""
   >("");
-  const [message, setMessage] = useState("");
+  const notify = useSettingsNotify();
+  const [inlineMessage, setInlineMessage] = useState<{
+    text: string;
+    tone: "success" | "error";
+  } | null>(null);
+  const [confirming, setConfirming] = useState<
+    "disconnect" | "revoke-key" | "revoke-cli" | null
+  >(null);
   const [flow, setFlow] = useState<ActiveFlow | null>(null);
   const [connected, setConnected] = useState(
     subscription.status === "connected",
@@ -253,11 +260,26 @@ export function ProviderAccountCard({
   const apiKeyLabel = `${connection.label} API key`;
   const disabled = busy !== "";
 
+  // Results go to a toast where the settings area provides one, and fall back
+  // to an inline line otherwise. An empty string clears the inline line.
+  function report(text: string, tone: "success" | "error") {
+    if (notify) notify(text, tone);
+    else setInlineMessage({ text, tone });
+  }
+  function setMessage(text: string) {
+    if (!text) setInlineMessage(null);
+    else report(text, "success");
+  }
+  function fail(text: string) {
+    report(text, "error");
+  }
+
   // Cursor is the only provider left with a browser sign-in: the tab does
   // the signing in and CoDev learns about it only by polling its own
   // callback. Claude and Codex connect through the rows below instead.
   const pollTimer = useRef<ReturnType<typeof setInterval> | null>(null);
   const pollStartedAt = useRef(0);
+  const stallNoticeShown = useRef(false);
   const isCursor = subscription.provider === "cursor";
   const showClaudeConnect =
     hostedClaudeConnect && subscription.provider === "claude";
@@ -270,6 +292,16 @@ export function ProviderAccountCard({
     runsIn.includes("workspace") || runsIn.includes("gen2");
   const anythingConnected =
     connected || cliTokenConnected || apiKeyState.status === "connected";
+  // Cursor's header button and the hosted Claude/Codex flow are the one
+  // primary way in; without either, the methods below are all there is.
+  const hasPrimaryAction = isCursor || showHostedConnect;
+  const connectedVia = [
+    connected ? "Signed in with a subscription" : null,
+    cliTokenConnected ? "Signed in from the CLI" : null,
+    apiKeyState.status === "connected"
+      ? `API key ending ${apiKeyState.lastFour}`
+      : null,
+  ].filter((item): item is string => item !== null);
   useEffect(
     () => () => {
       if (pollTimer.current) clearInterval(pollTimer.current);
@@ -307,7 +339,7 @@ export function ProviderAccountCard({
       stopPolling();
       setFlow(null);
       setBusy("");
-      setMessage(payload.error ?? `${label} sign-in failed. Start again.`);
+      fail(payload.error ?? `${label} sign-in failed. Start again.`);
       return;
     }
     if (payload.status === "connected") {
@@ -327,8 +359,10 @@ export function ProviderAccountCard({
     if (
       isCursor &&
       pollStartedAt.current > 0 &&
+      !stallNoticeShown.current &&
       Date.now() - pollStartedAt.current > 90_000
     ) {
+      stallNoticeShown.current = true;
       setMessage(
         "Still waiting on Cursor. If you already finished signing in, connect with an API key below instead.",
       );
@@ -353,7 +387,7 @@ export function ProviderAccountCard({
     };
     if (!response.ok) {
       setBusy("");
-      setMessage(payload.error ?? `${label} sign-in could not start.`);
+      fail(payload.error ?? `${label} sign-in could not start.`);
       return;
     }
 
@@ -361,13 +395,14 @@ export function ProviderAccountCard({
       window.open(payload.loginUrl, "_blank", "noopener,noreferrer");
       setFlow({ kind: "polling", loginUrl: payload.loginUrl });
       pollStartedAt.current = Date.now();
+      stallNoticeShown.current = false;
       void poll();
       pollTimer.current = setInterval(() => void poll(), 2000);
       return;
     }
 
     setBusy("");
-    setMessage(`${label} returned an unexpected sign-in response.`);
+    fail(`${label} returned an unexpected sign-in response.`);
   }
 
   function cancelFlow() {
@@ -386,7 +421,7 @@ export function ProviderAccountCard({
       );
       const payload = await response.json().catch(() => null);
       if (!response.ok) {
-        setMessage(payload?.error ?? "The account could not be disconnected.");
+        fail(payload?.error ?? "The account could not be disconnected.");
         return;
       }
       setConnected(false);
@@ -414,7 +449,7 @@ export function ProviderAccountCard({
           error?: string;
         } | null;
         if (!response.ok) {
-          setMessage(payload?.error ?? "The Cursor API key was not accepted.");
+          fail(payload?.error ?? "The Cursor API key was not accepted.");
           return;
         }
         setDraft("");
@@ -429,7 +464,7 @@ export function ProviderAccountCard({
       });
       const payload = await response.json().catch(() => null);
       if (!response.ok) {
-        setMessage(payload?.error ?? "The key could not be saved.");
+        fail(payload?.error ?? "The key could not be saved.");
         return;
       }
       const next = (payload.connections as ProviderConnectionRecord[]).find(
@@ -453,7 +488,7 @@ export function ProviderAccountCard({
       );
       const payload = await response.json().catch(() => null);
       if (!response.ok) {
-        setMessage(payload?.error ?? "The key could not be revoked.");
+        fail(payload?.error ?? "The key could not be revoked.");
         return;
       }
       const next = (payload.connections as ProviderConnectionRecord[]).find(
@@ -496,7 +531,7 @@ export function ProviderAccountCard({
       });
       const payload = await response.json().catch(() => null);
       if (!response.ok) {
-        setMessage(payload?.error ?? "The setting could not be saved.");
+        fail(payload?.error ?? "The setting could not be saved.");
         return;
       }
       setMessage(
@@ -520,7 +555,7 @@ export function ProviderAccountCard({
       );
       const payload = await response.json().catch(() => null);
       if (!response.ok) {
-        setMessage(payload?.error ?? "The CLI login could not be revoked.");
+        fail(payload?.error ?? "The CLI login could not be revoked.");
         return;
       }
       setMessage(`${label} CLI login revoked.`);
@@ -554,7 +589,7 @@ export function ProviderAccountCard({
               </Button>
               <Button
                 disabled={disabled}
-                onClick={() => void disconnect()}
+                onClick={() => setConfirming("disconnect")}
                 size="sm"
                 type="button"
                 variant="outline"
@@ -576,7 +611,7 @@ export function ProviderAccountCard({
         ) : connected ? (
           <Button
             disabled={disabled}
-            onClick={() => void disconnect()}
+            onClick={() => setConfirming("disconnect")}
             size="sm"
             type="button"
             variant="outline"
@@ -625,8 +660,32 @@ export function ProviderAccountCard({
         </div>
       ) : null}
 
-      <div className="mt-3">
-        {true ? (
+      {anythingConnected ? (
+        <p className="mt-2.5 flex items-center gap-1.5 text-xs text-muted-foreground">
+          <Check aria-hidden className="size-3.5 shrink-0 text-emerald-400" />
+          {connectedVia.join(" · ")}
+        </p>
+      ) : null}
+
+      {/* One primary action sits in the header (or the hosted flow above);
+          every other method lives behind a single disclosure so a member sees
+          one way in, not three. */}
+      <details
+        className="group mt-3 rounded-lg border border-border/60 px-3"
+        open={!anythingConnected && !hasPrimaryAction}
+      >
+        <summary className="flex min-h-10 cursor-pointer list-none items-center justify-between gap-2 text-xs font-medium [&::-webkit-details-marker]:hidden">
+          {anythingConnected
+            ? "Manage connection"
+            : hasPrimaryAction
+              ? "Other ways to connect"
+              : "Choose how to connect"}
+          <ChevronDown
+            aria-hidden
+            className="size-3.5 shrink-0 text-muted-foreground transition-transform group-open:rotate-180"
+          />
+        </summary>
+        {
           <FallbackRow
             connected={apiKeyState.status === "connected"}
             // Open only when there is nothing else to use: the connect
@@ -687,7 +746,7 @@ export function ProviderAccountCard({
               {apiKeyState.status === "connected" ? (
                 <Button
                   disabled={disabled}
-                  onClick={() => void revoke()}
+                  onClick={() => setConfirming("revoke-key")}
                   size="sm"
                   type="button"
                   variant="secondary"
@@ -701,7 +760,7 @@ export function ProviderAccountCard({
               you save them.
             </p>
           </FallbackRow>
-        ) : null}
+        }
 
         {subscription.command ? (
           <FallbackRow
@@ -724,7 +783,7 @@ export function ProviderAccountCard({
                 </p>
                 <Button
                   disabled={disabled}
-                  onClick={() => void revokeClaudeCliToken()}
+                  onClick={() => setConfirming("revoke-cli")}
                   size="sm"
                   type="button"
                   variant="outline"
@@ -738,8 +797,13 @@ export function ProviderAccountCard({
             <CopyableCommand command={subscription.command} />
           </FallbackRow>
         ) : null}
+      </details>
 
-        {runsInAWorkspace ? (
+      {runsInAWorkspace ? (
+        <div className="mt-3 space-y-1">
+          <h4 className="text-xs font-semibold">
+            Billing in shared workspaces
+          </h4>
           <SurfaceToggle
             checked={subscription.allowInSharedWorkspaces}
             disabled={disabled}
@@ -749,14 +813,67 @@ export function ProviderAccountCard({
               void setSharedWorkspaceUse("subscription", next)
             }
           />
-        ) : null}
-      </div>
+        </div>
+      ) : null}
 
-      {message ? (
-        <p className="pt-2.5 text-[11px] text-muted-foreground" role="status">
-          {message}
+      {inlineMessage ? (
+        <p
+          className={cn(
+            "pt-2.5 text-xs",
+            inlineMessage.tone === "error"
+              ? "text-destructive"
+              : "text-muted-foreground",
+          )}
+          role={inlineMessage.tone === "error" ? "alert" : "status"}
+        >
+          {inlineMessage.text}
         </p>
       ) : null}
+
+      {confirming === "disconnect" ? (
+        <ConfirmDialog
+          busy={busy !== ""}
+          confirmLabel={`Disconnect ${label}`}
+          onCancel={() => setConfirming(null)}
+          onConfirm={() => {
+            setConfirming(null);
+            void disconnect();
+          }}
+          title={`Disconnect ${label}?`}
+        >
+          Agents will stop running on this {label} login until you connect it
+          again. Any API key you saved stays in place.
+        </ConfirmDialog>
+      ) : null}
+      {confirming === "revoke-key" ? (
+        <ConfirmDialog
+          busy={busy !== ""}
+          confirmLabel="Revoke key"
+          onCancel={() => setConfirming(null)}
+          onConfirm={() => {
+            setConfirming(null);
+            void revoke();
+          }}
+          title={`Revoke the ${label} API key?`}
+        >
+          The saved key is deleted from CoDev. You will need to paste it again
+          to use it.
+        </ConfirmDialog>
+      ) : null}
+      {confirming === "revoke-cli" ? (
+        <ConfirmDialog
+          busy={busy !== ""}
+          confirmLabel="Revoke login"
+          onCancel={() => setConfirming(null)}
+          onConfirm={() => {
+            setConfirming(null);
+            void revokeClaudeCliToken();
+          }}
+          title={`Revoke the ${label} CLI login?`}
+        >
+          Run the CLI command again to reconnect.
+        </ConfirmDialog>
+      ) : null}
     </Card>
   );
 }
diff --git a/apps/web/components/settings/set-password-form.tsx b/apps/web/components/settings/set-password-form.tsx
index 63b0d6d9a..01ac41d1c 100644
--- a/apps/web/components/settings/set-password-form.tsx
+++ b/apps/web/components/settings/set-password-form.tsx
@@ -3,19 +3,43 @@
 import { useState } from "react";
 import { Check, Circle } from "lucide-react";
 
+import { changeAccountPassword } from "@/app/actions/profile";
 import { setAccountPassword } from "@/app/actions/set-password";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { getNewAccountPasswordRequirements } from "@/lib/auth/password-policy";
 import { cn } from "@/lib/platform/utils";
 
-export function SetPasswordForm({ redirectTo }: { redirectTo: string }) {
+export function SetPasswordForm({
+  redirectTo,
+  mode = "set",
+}: {
+  redirectTo: string;
+  /** `change` asks for the current password first and updates the existing one. */
+  mode?: "set" | "change";
+}) {
   const [password, setPassword] = useState("");
   const requirements = getNewAccountPasswordRequirements(password);
-  const action = setAccountPassword.bind(null, redirectTo);
+  const action =
+    mode === "change"
+      ? changeAccountPassword.bind(null, redirectTo)
+      : setAccountPassword.bind(null, redirectTo);
 
   return (
     <form action={action} className="space-y-4">
+      {mode === "change" ? (
+        <label className="block max-w-sm space-y-1.5 text-xs">
+          <span className="font-medium text-muted-foreground">
+            Current password
+          </span>
+          <Input
+            autoComplete="current-password"
+            name="current"
+            required
+            type="password"
+          />
+        </label>
+      ) : null}
       <div className="grid gap-3 sm:grid-cols-2">
         <label className="block space-y-1.5 text-xs">
           <span className="font-medium text-muted-foreground">
@@ -64,7 +88,7 @@ export function SetPasswordForm({ redirectTo }: { redirectTo: string }) {
         ))}
       </ul>
       <Button size="sm" type="submit">
-        Set password
+        {mode === "change" ? "Change password" : "Set password"}
       </Button>
     </form>
   );
diff --git a/apps/web/components/settings/settings-feedback.tsx b/apps/web/components/settings/settings-feedback.tsx
new file mode 100644
index 000000000..014ddd4c1
--- /dev/null
+++ b/apps/web/components/settings/settings-feedback.tsx
@@ -0,0 +1,121 @@
+"use client";
+
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ReactNode,
+} from "react";
+import { AlertCircle, CheckCircle2, X } from "lucide-react";
+
+import { cn } from "@/lib/platform/utils";
+
+type Tone = "success" | "error";
+type Toast = { id: number; tone: Tone; text: string };
+
+const DISMISS_MS = 5000;
+
+const FeedbackContext = createContext<
+  ((text: string, tone?: Tone) => void) | null
+>(null);
+
+/**
+ * Toast notifier for the settings area, or `null` outside a
+ * `SettingsFeedbackProvider`. Callers that can render without the provider
+ * (unit tests, stories) fall back to an inline message.
+ */
+export function useSettingsNotify() {
+  return useContext(FeedbackContext);
+}
+
+/**
+ * Result messages used to render as 11px grey text at the bottom of whichever
+ * card was clicked, well out of view on a long page. A toast lands in one
+ * fixed place regardless of scroll position and announces politely to screen
+ * readers without stealing focus.
+ */
+export function SettingsFeedbackProvider({
+  children,
+}: {
+  children: ReactNode;
+}) {
+  const [toasts, setToasts] = useState<Toast[]>([]);
+  const nextId = useRef(0);
+  const timers = useRef(new Map<number, ReturnType<typeof setTimeout>>());
+
+  const dismiss = useCallback((id: number) => {
+    const timer = timers.current.get(id);
+    if (timer) clearTimeout(timer);
+    timers.current.delete(id);
+    setToasts((current) => current.filter((toast) => toast.id !== id));
+  }, []);
+
+  const notify = useCallback(
+    (text: string, tone: Tone = "success") => {
+      const id = (nextId.current += 1);
+      setToasts((current) => [...current.slice(-2), { id, tone, text }]);
+      timers.current.set(
+        id,
+        setTimeout(() => dismiss(id), DISMISS_MS),
+      );
+    },
+    [dismiss],
+  );
+
+  useEffect(() => {
+    const active = timers.current;
+    return () => {
+      for (const timer of active.values()) clearTimeout(timer);
+    };
+  }, []);
+
+  const value = useMemo(() => notify, [notify]);
+
+  return (
+    <FeedbackContext.Provider value={value}>
+      {children}
+      <div
+        aria-live="polite"
+        className="pointer-events-none fixed right-4 bottom-4 z-50 flex w-[min(24rem,calc(100vw-2rem))] flex-col gap-2"
+      >
+        {toasts.map((toast) => (
+          <div
+            className={cn(
+              "pointer-events-auto flex items-start gap-2.5 rounded-lg border bg-card px-3.5 py-3 text-sm shadow-lg",
+              toast.tone === "error"
+                ? "border-destructive/50"
+                : "border-border",
+            )}
+            key={toast.id}
+            role={toast.tone === "error" ? "alert" : "status"}
+          >
+            {toast.tone === "error" ? (
+              <AlertCircle
+                aria-hidden
+                className="mt-0.5 size-4 shrink-0 text-destructive"
+              />
+            ) : (
+              <CheckCircle2
+                aria-hidden
+                className="mt-0.5 size-4 shrink-0 text-emerald-400"
+              />
+            )}
+            <p className="min-w-0 flex-1 break-words">{toast.text}</p>
+            <button
+              aria-label="Dismiss notification"
+              className="-m-1.5 flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-md text-muted-foreground hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-none"
+              onClick={() => dismiss(toast.id)}
+              type="button"
+            >
+              <X aria-hidden className="size-4" />
+            </button>
+          </div>
+        ))}
+      </div>
+    </FeedbackContext.Provider>
+  );
+}
diff --git a/apps/web/components/shell/app-chrome.tsx b/apps/web/components/shell/app-chrome.tsx
index 48ba01159..b3c15327c 100644
--- a/apps/web/components/shell/app-chrome.tsx
+++ b/apps/web/components/shell/app-chrome.tsx
@@ -4,6 +4,7 @@ import { headers } from "next/headers";
 
 import { isGitHubAuthConfigured } from "@codev/config";
 
+import { AppSidebarFrame } from "@/components/shell/app-sidebar-frame";
 import { AppSidebarNav } from "@/components/shell/app-sidebar-nav";
 import { FeedbackWidget } from "@/components/shell/feedback-widget";
 import { ProfileMenu } from "@/components/shell/profile-menu";
@@ -53,26 +54,27 @@ export async function AppChrome({
 
   if (sidebar) {
     return (
-      <div className="app-page app-with-sidebar">
-        <aside className="app-sidebar">
-          <div className="app-sidebar-header">
-            <Brand isAdminHost={isAdminHost} />
-          </div>
-          <AppSidebarNav showAdmin={showAdmin} isAdminHost={isAdminHost} />
-          <div className="app-sidebar-footer">
-            <ThemeToggle compact />
-            <ProfileMenu
-              user={user}
-              showConnectGitHub={showConnectGitHub}
-              isAdminHost={isAdminHost}
-            />
-          </div>
-        </aside>
-        <div className="app-sidebar-content">
-          {children}
-          <FeedbackWidget />
-        </div>
-      </div>
+      <AppSidebarFrame
+        sidebar={
+          <aside className="app-sidebar" id="app-sidebar">
+            <div className="app-sidebar-header">
+              <Brand isAdminHost={isAdminHost} />
+            </div>
+            <AppSidebarNav showAdmin={showAdmin} isAdminHost={isAdminHost} />
+            <div className="app-sidebar-footer">
+              <ThemeToggle compact />
+              <ProfileMenu
+                user={user}
+                showConnectGitHub={showConnectGitHub}
+                isAdminHost={isAdminHost}
+              />
+            </div>
+          </aside>
+        }
+      >
+        {children}
+        <FeedbackWidget />
+      </AppSidebarFrame>
     );
   }
 
diff --git a/apps/web/components/shell/app-sidebar-frame.tsx b/apps/web/components/shell/app-sidebar-frame.tsx
new file mode 100644
index 000000000..f5b2f3259
--- /dev/null
+++ b/apps/web/components/shell/app-sidebar-frame.tsx
@@ -0,0 +1,82 @@
+"use client";
+
+import { useSyncExternalStore, type ReactNode } from "react";
+import { PanelLeftClose, PanelLeftOpen } from "lucide-react";
+
+const STORAGE_KEY = "codev.app-sidebar.collapsed";
+const SIDEBAR_ID = "app-sidebar";
+
+const listeners = new Set<() => void>();
+// Used when storage is blocked, so the toggle still works for this page view.
+let memoryCollapsed = false;
+
+function subscribe(listener: () => void) {
+  listeners.add(listener);
+  window.addEventListener("storage", listener);
+  return () => {
+    listeners.delete(listener);
+    window.removeEventListener("storage", listener);
+  };
+}
+
+function getSnapshot() {
+  try {
+    return window.localStorage.getItem(STORAGE_KEY) === "1";
+  } catch {
+    return memoryCollapsed;
+  }
+}
+
+function setCollapsedPreference(next: boolean) {
+  memoryCollapsed = next;
+  try {
+    window.localStorage.setItem(STORAGE_KEY, next ? "1" : "0");
+  } catch {
+    // Not persisted; the in-memory value still applies.
+  }
+  listeners.forEach((listener) => listener());
+}
+
+/**
+ * Lays out the app sidebar and its content, and lets the member hide the
+ * sidebar to give the page the full width. The choice is remembered per
+ * browser. The sidebar itself stays server-rendered and is passed in; a hidden
+ * sidebar is removed from the layout (`display: none`), so it cannot be
+ * reached by keyboard while collapsed.
+ */
+export function AppSidebarFrame({
+  sidebar,
+  children,
+}: {
+  sidebar: ReactNode;
+  children: ReactNode;
+}) {
+  // The server always renders the sidebar open; the stored choice applies
+  // after hydration.
+  const collapsed = useSyncExternalStore(subscribe, getSnapshot, () => false);
+  const toggle = () => setCollapsedPreference(!collapsed);
+
+  const Icon = collapsed ? PanelLeftOpen : PanelLeftClose;
+
+  return (
+    <div
+      className={`app-page app-with-sidebar${collapsed ? " is-sidebar-collapsed" : ""}`}
+    >
+      {sidebar}
+      <div className="app-sidebar-rail">
+        <button
+          aria-controls={SIDEBAR_ID}
+          aria-expanded={!collapsed}
+          aria-label={collapsed ? "Show sidebar" : "Hide sidebar"}
+          className="app-sidebar-toggle"
+          onClick={toggle}
+          title={collapsed ? "Show sidebar" : "Hide sidebar"}
+          type="button"
+        >
+          <Icon aria-hidden="true" size={18} />
+        </button>
+      </div>
+      <div className="app-sidebar-content">{children}</div>
+    </div>
+  );
+}
diff --git a/apps/web/components/ui/label.tsx b/apps/web/components/ui/label.tsx
new file mode 100644
index 000000000..33310724b
--- /dev/null
+++ b/apps/web/components/ui/label.tsx
@@ -0,0 +1,16 @@
+import * as React from "react";
+
+import { cn } from "@/lib/platform/utils";
+
+export function Label({ className, ...props }: React.ComponentProps<"label">) {
+  return (
+    <label
+      data-slot="label"
+      className={cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    />
+  );
+}