diff --git a/src/tools/platform/skills.ts b/src/tools/platform/skills.ts
index ac247f11..8aa17a08 100644
--- a/src/tools/platform/skills.ts
+++ b/src/tools/platform/skills.ts
@@ -25,6 +25,7 @@ import { EventSourcedConversationStore } from "../../conversation/event-sourced-
 import type { ConversationEvent, SkillsLoadedEvent } from "../../conversation/types.ts";
 import { textContent } from "../../engine/content-helpers.ts";
 import type { EventSink, ToolResult } from "../../engine/types.ts";
+import { ORG_ADMIN_ROLES } from "../../identity/types.ts";
 import { getRequestContext } from "../../runtime/request-context.ts";
 import type { Runtime } from "../../runtime/runtime.ts";
 import { parseSkillFile, readSkillMtime } from "../../skills/loader.ts";
@@ -1108,8 +1109,6 @@ interface PermissionDecision {
   reason?: string;
 }
 
-const ORG_ADMIN_ROLES = new Set(["admin", "owner"]);
-
 type AccessMode = "read" | "write";
 
 /**
diff --git a/web/src/pages/settings/SkillsTab.tsx b/web/src/pages/settings/SkillsTab.tsx
index 24605bef..e209c9ec 100644
--- a/web/src/pages/settings/SkillsTab.tsx
+++ b/web/src/pages/settings/SkillsTab.tsx
@@ -1,5 +1,6 @@
-import { Lightbulb, Plus, Trash2 } from "lucide-react";
+import { Lightbulb, Plus, Trash2, User } from "lucide-react";
 import { useCallback, useEffect, useMemo, useState } from "react";
+import { Link } from "react-router-dom";
 import type { ToolInput } from "../../_generated/platform-schemas/catalog";
 import { callTool } from "../../api/client";
 import { Badge } from "../../components/ui/badge";
@@ -53,37 +54,65 @@ const STATUS_BADGE: Record<Status, string> = {
 export function SkillsTab() {
   return (
     <RequireActiveWorkspace>
-      <SkillsBrowser />
+      <SkillsBrowser surface="workspace" />
     </RequireActiveWorkspace>
   );
 }
 
 /**
- * Shared skills browser. The workspace tab renders it with no lock so users
- * can see/filter every scope they have access to; the org-admin tab renders
- * it with `lockedScope="org"` so only org-tier skills are listed, the scope
- * filter UI is suppressed, and the create form has no scope picker (org is
- * the only writable target on that surface).
+ * Shared skills browser. Three surfaces:
  *
- * Per SKILLS_SURFACE.md, Phase 2 will refactor the workspace tab to grouped
- * sections (workspace + inherited-org + inherited-bundles + personal-footer).
- * That work touches this same component; the `lockedScope` param is the
- * minimal Phase 1 hook so we don't ship duplicated state machines.
+ *   - Workspace tab (`surface: "workspace"`) — grouped sections (workspace
+ *     editable, inherited-from-org disabled, inherited-from-bundles disabled),
+ *     plus a personal-skills footer link. Scope filter and create-scope
+ *     picker are suppressed; create is locked to "workspace".
+ *   - Org-admin tab (`lockedScope: "org"`) — single-section view of org-tier
+ *     skills only. Scope filter and create-scope picker are suppressed;
+ *     create is locked to "org".
+ *   - Default (no prop) — every scope visible with filter UI. No live
+ *     route uses this today; kept for the Phase 1 test seam and as a
+ *     debugging surface.
+ *
+ * Per SKILLS_SURFACE.md (Phase 2). The `surface` prop is intentionally
+ * additive to `lockedScope` so the two surfaces can evolve independently
+ * — they share the underlying state machine but render different layouts.
  */
 type DetailMode = "view" | "edit";
 
-export function SkillsBrowser({ lockedScope }: { lockedScope?: Scope } = {}) {
+interface SkillsBrowserProps {
+  /** Single-scope view. Hides the scope filter; locks the create form to
+   * the given writable scope when "org" / "workspace" / "user". */
+  lockedScope?: Scope;
+  /** Layout variant. `"workspace"` renders the four-section workspace tab
+   * (workspace editable + inherited-org + inherited-bundles + personal
+   * footer) with the scope filter hidden and create locked to workspace. */
+  surface?: "workspace";
+}
+
+export function SkillsBrowser({ lockedScope, surface }: SkillsBrowserProps = {}) {
+  const isWorkspaceSurface = surface === "workspace";
+  // Workspace surface needs every scope's skills in one fetch so the
+  // inherited sections and personal-footer count are accurate. Org surface
+  // continues to pre-scope its fetch via `lockedScope`. The default ("show
+  // everything") path uses whatever the user selects in the filter.
+  const initialScopeFilter: Scope | "all" = isWorkspaceSurface ? "all" : (lockedScope ?? "all");
+  const createLockedScope: WritableScope | undefined = isWorkspaceSurface
+    ? "workspace"
+    : lockedScope === "org"
+      ? "org"
+      : undefined;
   const [skills, setSkills] = useState<ListedSkill[]>([]);
   const [selectedId, setSelectedId] = useState<string | null>(null);
   const [detail, setDetail] = useState<ReadSkill | null>(null);
   const [detailLoading, setDetailLoading] = useState(false);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
-  // When the surface is scope-locked, the filter UI is hidden and the lock
-  // value is the effective filter — `setScopeFilter` becomes a no-op via the
-  // hidden control. Default the state to the lock so the first fetch is
-  // already scoped (no flash of "all").
-  const [scopeFilter, setScopeFilter] = useState<Scope | "all">(lockedScope ?? "all");
+  // When the surface is scope-locked OR is the workspace tab, the scope
+  // filter UI is hidden. For the lock case, default the state to the lock
+  // so the first fetch is already scoped (no flash of "all"). For the
+  // workspace tab, default to "all" — the grouped layout pulls every scope
+  // in one request and partitions in the renderer.
+  const [scopeFilter, setScopeFilter] = useState<Scope | "all">(initialScopeFilter);
   const [statusFilter, setStatusFilter] = useState<Status | "all">("active");
   const [mode, setMode] = useState<DetailMode>("view");
   const [creating, setCreating] = useState(false);
@@ -246,7 +275,36 @@ export function SkillsBrowser({ lockedScope }: { lockedScope?: Scope } = {}) {
     [runMutation],
   );
 
-  const grouped = useMemo(() => groupByScope(skills), [skills]);
+  const grouped = useMemo(
+    () => groupByScope(skills, { excludeUser: isWorkspaceSurface }),
+    [skills, isWorkspaceSurface],
+  );
+  // Personal-skills count for the workspace-surface footer. Computed from
+  // the same fetch — the workspace tab already pulls every scope so the
+  // count is free.
+  const personalCount = useMemo(
+    () => (isWorkspaceSurface ? skills.filter((s) => s.scope === "user").length : 0),
+    [skills, isWorkspaceSurface],
+  );
+  // Workspace surface: only "workspace" skills are editable in place; org
+  // and bundle rows show their detail body read-only, with org rows
+  // surfacing a deep link to /org/skills (the org-admin surface) so admins
+  // can edit there. Org surface: only "org" is editable; bundles
+  // read-only. Anything outside those rules falls through to the existing
+  // bundle-as-read-only behavior in SkillDetailView.
+  const detailReadOnly = ((): boolean => {
+    if (!detail) return false;
+    if (detail.scope === "bundle") return true;
+    if (isWorkspaceSurface) return detail.scope !== "workspace";
+    if (lockedScope) return detail.scope !== lockedScope;
+    return false;
+  })();
+  const detailInheritedFrom = ((): { label: string; href: string } | undefined => {
+    if (!detail || !detailReadOnly) return undefined;
+    if (detail.scope === "org") return { label: "Edit in org settings", href: "/org/skills" };
+    if (detail.scope === "user") return { label: "Edit in your profile", href: "/profile" };
+    return undefined;
+  })();
 
   return (
     <div className="space-y-4">
@@ -272,6 +330,12 @@ export function SkillsBrowser({ lockedScope }: { lockedScope?: Scope } = {}) {
             every member. Authored here or as markdown files under{" "}
             <code>~/.nimblebrain/skills/</code>.
           </>
+        ) : isWorkspaceSurface ? (
+          <>
+            Skills shape your agent's behavior in this workspace. Workspace skills are editable
+            here; organization and bundle skills are inherited and read-only. Personal skills follow
+            you across every workspace and are managed in your profile.
+          </>
         ) : (
           <>
             Layer 3 cross-bundle agent orchestration content (voice, workflow, personal, tool
@@ -289,6 +353,7 @@ export function SkillsBrowser({ lockedScope }: { lockedScope?: Scope } = {}) {
         onScopeChange={setScopeFilter}
         onStatusChange={setStatusFilter}
         lockedScope={lockedScope}
+        hideScopeFilter={isWorkspaceSurface}
       />
 
       {loading && <div className="text-sm text-muted-foreground">Loading skills…</div>}
@@ -313,14 +378,19 @@ export function SkillsBrowser({ lockedScope }: { lockedScope?: Scope } = {}) {
 
       {!loading && (creating || skills.length > 0) && (
         <div className="grid gap-6 lg:grid-cols-[minmax(0,1fr)_minmax(0,1.4fr)]">
-          <SkillList grouped={grouped} selectedId={selectedId} onSelect={handleSelect} />
+          <div className="space-y-4">
+            <SkillList
+              grouped={grouped}
+              selectedId={selectedId}
+              onSelect={handleSelect}
+              surface={surface}
+            />
+            {isWorkspaceSurface && <PersonalFooter count={personalCount} />}
+          </div>
           {creating ? (
             <CreateForm
               pending={actionPending}
-              // Only "org" is a live caller today (Phase 1). Phase 2 will
-              // add "workspace" / "user" callers and broaden this narrowing
-              // when those branches actually ship.
-              lockedScope={lockedScope === "org" ? "org" : undefined}
+              lockedScope={createLockedScope}
               onCancel={() => {
                 setCreating(false);
                 setError(null);
@@ -334,6 +404,8 @@ export function SkillsBrowser({ lockedScope }: { lockedScope?: Scope } = {}) {
               loading={detailLoading}
               mode={mode}
               actionPending={actionPending}
+              readOnly={detailReadOnly}
+              inheritedFrom={detailInheritedFrom}
               onEdit={() => {
                 setError(null);
                 setMode("edit");
@@ -372,10 +444,23 @@ interface GroupedSkills {
   skills: ListedSkill[];
 }
 
-function groupByScope(skills: ListedSkill[]): GroupedSkills[] {
-  const order: Scope[] = ["user", "workspace", "org", "bundle"];
+/**
+ * Group skills by scope, in the order each surface wants to see them.
+ *
+ *   - Workspace surface (`excludeUser: true`) shows workspace first
+ *     (editable), then org and bundle (inherited / read-only). User-tier
+ *     skills are surfaced separately via the personal-footer count, not
+ *     as a section in the main list.
+ *   - Other surfaces (`excludeUser: false`) show every scope, ordered
+ *     user → workspace → org → bundle — the historical browse order.
+ */
+function groupByScope(skills: ListedSkill[], opts?: { excludeUser?: boolean }): GroupedSkills[] {
+  const order: Scope[] = opts?.excludeUser
+    ? ["workspace", "org", "bundle"]
+    : ["user", "workspace", "org", "bundle"];
   const map = new Map<Scope, ListedSkill[]>();
   for (const s of skills) {
+    if (opts?.excludeUser && s.scope === "user") continue;
     const list = map.get(s.scope) ?? [];
     list.push(s);
     map.set(s.scope, list);
@@ -393,53 +478,119 @@ const SCOPE_LABEL: Record<Scope, string> = {
   bundle: "Bundle (Layer 1)",
 };
 
+/**
+ * Section header label on the workspace surface — names that make the
+ * inheritance relationship explicit ("Inherited from org") rather than
+ * the bare scope name. Falls back to SCOPE_LABEL on other surfaces.
+ */
+const WORKSPACE_SURFACE_SECTION_LABEL: Record<Scope, string> = {
+  workspace: "Workspace",
+  org: "Inherited from organization",
+  bundle: "Inherited from bundles",
+  user: "User", // unreachable in practice — workspace surface excludes user
+};
+
 function SkillList({
   grouped,
   selectedId,
   onSelect,
+  surface,
 }: {
   grouped: GroupedSkills[];
   selectedId: string | null;
   onSelect: (id: string) => void;
+  surface?: "workspace";
 }) {
+  const labelFor = (scope: Scope) =>
+    surface === "workspace" ? WORKSPACE_SURFACE_SECTION_LABEL[scope] : SCOPE_LABEL[scope];
   return (
     <div className="space-y-4">
-      {grouped.map((group) => (
-        <section key={group.scope} className="space-y-1.5">
-          <h3 className="text-xs font-semibold uppercase tracking-wide text-muted-foreground px-1">
-            {SCOPE_LABEL[group.scope]}{" "}
-            <span className="text-muted-foreground/60 font-normal">({group.skills.length})</span>
-          </h3>
-          <div className="grid gap-1">
-            {group.skills.map((s) => (
-              <SkillRow
-                key={s.id}
-                skill={s}
-                selected={s.id === selectedId}
-                onSelect={() => onSelect(s.id)}
-              />
-            ))}
-          </div>
-        </section>
-      ))}
+      {grouped.map((group) => {
+        // Workspace surface: workspace is the only editable scope. Org and
+        // bundle rows render dimmed to communicate "you can't edit these
+        // from here" — the selected detail panel surfaces the deep-link
+        // alternative.
+        const inherited = surface === "workspace" && group.scope !== "workspace";
+        return (
+          <section key={group.scope} className="space-y-1.5">
+            <h3 className="text-xs font-semibold uppercase tracking-wide text-muted-foreground px-1">
+              {labelFor(group.scope)}{" "}
+              <span className="text-muted-foreground/60 font-normal">({group.skills.length})</span>
+            </h3>
+            <div className="grid gap-1">
+              {group.skills.map((s) => (
+                <SkillRow
+                  key={s.id}
+                  skill={s}
+                  selected={s.id === selectedId}
+                  onSelect={() => onSelect(s.id)}
+                  inherited={inherited}
+                />
+              ))}
+            </div>
+          </section>
+        );
+      })}
     </div>
   );
 }
 
+/**
+ * Workspace-tab footer summarizing the user's personal skills.
+ *
+ * Personal (user-tier) skills follow the identity across every workspace,
+ * so they're authored at the identity-level surface (`/profile`), not
+ * inside any one workspace. The workspace tab surfaces them here as a
+ * count plus a link out, matching the spec's "footer summary, not an
+ * authoring affordance" framing.
+ *
+ * Phase 3 will promote `/profile` to a tabbed surface and route this link
+ * at `/profile/skills`; for now `/profile` is the stable target.
+ */
+function PersonalFooter({ count }: { count: number }) {
+  return (
+    <Card className="border-dashed">
+      <CardContent className="py-3 px-4 flex items-center justify-between gap-3">
+        <div className="flex items-center gap-2 text-xs text-muted-foreground">
+          <User className="h-3.5 w-3.5" />
+          <span>
+            {count === 0
+              ? "No personal skills active here"
+              : `${count} personal skill${count === 1 ? "" : "s"} active here`}
+          </span>
+          <span className="text-muted-foreground/60">— follow you across every workspace</span>
+        </div>
+        <Link
+          to="/profile"
+          className="text-xs text-primary underline-offset-4 hover:underline whitespace-nowrap"
+        >
+          Edit in profile →
+        </Link>
+      </CardContent>
+    </Card>
+  );
+}
+
 function SkillRow({
   skill,
   selected,
   onSelect,
+  inherited,
 }: {
   skill: ListedSkill;
   selected: boolean;
   onSelect: () => void;
+  /** When true, render dimmed so the read-only relationship is visible
+   * before the user clicks. The row stays clickable so the detail panel
+   * still shows the body. */
+  inherited?: boolean;
 }) {
   return (
     <Card
       className={cn(
         "cursor-pointer transition-colors",
         selected ? "ring-1 ring-primary border-primary/40" : "hover:bg-muted/40",
+        inherited && !selected && "opacity-70",
       )}
     >
       <CardContent className="py-2.5 px-3">
@@ -492,6 +643,13 @@ interface SkillDetailProps {
   onToggleStatus: () => void;
   onMoveScope: (target: WritableScope) => void;
   placeholder: boolean;
+  /** When true, hide edit / delete / status / move-scope affordances and
+   * (optionally) surface `inheritedFrom` as a deep-link out to the surface
+   * where the skill IS editable. Bundles are always read-only; this
+   * extends that treatment to org-tier skills viewed from the workspace
+   * surface (or any scope viewed from outside its writable surface). */
+  readOnly?: boolean;
+  inheritedFrom?: { label: string; href: string };
 }
 
 function SkillDetail(props: SkillDetailProps) {
@@ -512,7 +670,7 @@ function SkillDetail(props: SkillDetailProps) {
       </Card>
     );
   }
-  if (mode === "edit") {
+  if (mode === "edit" && !props.readOnly) {
     return (
       <SkillEditor
         detail={detail}
@@ -526,6 +684,8 @@ function SkillDetail(props: SkillDetailProps) {
     <SkillDetailView
       detail={detail}
       actionPending={props.actionPending}
+      readOnly={props.readOnly ?? false}
+      inheritedFrom={props.inheritedFrom}
       onEdit={props.onEdit}
       onDelete={props.onDelete}
       onToggleStatus={props.onToggleStatus}
@@ -541,7 +701,9 @@ function SkillDetailView({
   onDelete,
   onToggleStatus,
   onMoveScope,
-}: { detail: ReadSkill } & Pick<
+  readOnly,
+  inheritedFrom,
+}: { detail: ReadSkill; readOnly: boolean; inheritedFrom?: { label: string; href: string } } & Pick<
   SkillDetailProps,
   "actionPending" | "onEdit" | "onDelete" | "onToggleStatus" | "onMoveScope"
 >) {
@@ -562,7 +724,7 @@ function SkillDetailView({
                 {currentStatus}
               </Badge>
             </div>
-            {!isBundle && (
+            {!readOnly && (
               <div className="flex items-center gap-1">
                 <Button size="sm" variant="outline" onClick={onEdit} disabled={actionPending}>
                   Edit
@@ -591,13 +753,26 @@ function SkillDetailView({
                 </Button>
               </div>
             )}
+            {readOnly && inheritedFrom && (
+              <Link
+                to={inheritedFrom.href}
+                className="text-xs text-primary underline-offset-4 hover:underline"
+              >
+                {inheritedFrom.label} →
+              </Link>
+            )}
           </div>
           {m.description && <p className="text-xs text-muted-foreground">{m.description}</p>}
-          {isBundle && (
+          {readOnly && isBundle && (
             <p className="text-[11px] text-muted-foreground italic">
               Bundle (Layer 1) skills are vendored — edit them through the bundle's own settings.
             </p>
           )}
+          {readOnly && !isBundle && (
+            <p className="text-[11px] text-muted-foreground italic">
+              Inherited from {detail.scope} scope — read-only from this surface.
+            </p>
+          )}
         </header>
 
         <dl className="grid grid-cols-[auto_1fr] gap-x-3 gap-y-1 text-xs">
@@ -959,6 +1134,7 @@ function Filters({
   onScopeChange,
   onStatusChange,
   lockedScope,
+  hideScopeFilter,
 }: {
   scope: Scope | "all";
   status: Status | "all";
@@ -966,12 +1142,16 @@ function Filters({
   onStatusChange: (s: Status | "all") => void;
   /** When set, suppress the scope selector — the surface is scope-locked. */
   lockedScope?: Scope;
+  /** When true, suppress the scope selector for a grouped layout that
+   * partitions scopes in the renderer rather than filtering at fetch time. */
+  hideScopeFilter?: boolean;
 }) {
   const selectClass =
     "rounded-md border bg-background px-2 py-1 text-xs focus:outline-none focus:ring-1 focus:ring-ring";
+  const showScopeFilter = lockedScope === undefined && !hideScopeFilter;
   return (
     <div className="flex flex-wrap items-center gap-2">
-      {lockedScope === undefined && (
+      {showScopeFilter && (
         <select
           value={scope}
           onChange={(e) => onScopeChange(e.target.value as Scope | "all")}
diff --git a/web/test/SkillsBrowser.workspace.test.tsx b/web/test/SkillsBrowser.workspace.test.tsx
new file mode 100644
index 00000000..4cf08697
--- /dev/null
+++ b/web/test/SkillsBrowser.workspace.test.tsx
@@ -0,0 +1,286 @@
+/**
+ * Behavioral tests for `<SkillsBrowser surface="workspace" />` — the
+ * grouped workspace-tab layout (Phase 2 of SKILLS_SURFACE.md).
+ *
+ * What this surface owes its user:
+ *
+ *   1. Scope filter is hidden (sections are the partition; no filter UI).
+ *   2. The list groups by scope in the order: workspace, inherited org,
+ *      inherited bundles. User-tier skills are NOT a section — they
+ *      surface only as a count in the personal footer.
+ *   3. The create form is locked to scope="workspace" (Phase 2's key
+ *      regression risk — the spec calls this out as the load-bearing
+ *      assertion for the workspace surface, mirror of Phase 1's same
+ *      assertion for the org surface).
+ *   4. A personal-skills footer renders with the user-tier count and a
+ *      deep-link to `/profile` (Phase 3 promotes to `/profile/skills`).
+ *
+ * The role-gate test (orgRoleGate.test.ts) and the org-surface test
+ * (SkillsBrowser.org.test.tsx) cover the org-admin surface separately.
+ */
+
+import { afterEach, describe, expect, mock, test } from "bun:test";
+import { realClient } from "./setup";
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+// Patch globals happy-dom forgets on its Window stub. See
+// SkillsBrowser.org.test.tsx for the rationale; same fix.
+{
+  const win = (globalThis as unknown as { window: Record<string, unknown> }).window;
+  if (win) {
+    win.SyntaxError ??= SyntaxError;
+    win.TypeError ??= TypeError;
+  }
+}
+
+type CallToolArgs = {
+  server: string;
+  tool: string;
+  args: Record<string, unknown>;
+};
+const callToolCalls: CallToolArgs[] = [];
+
+// Skills list fixture spanning all four scopes — the workspace surface
+// has to partition them in the renderer rather than fetch-filter, so the
+// test catalog has to include every scope at once.
+const SKILLS_FIXTURE = [
+  {
+    id: "/tmp/skills/ws/workflow.md",
+    name: "workflow",
+    description: "Workspace-tier rule",
+    scope: "workspace",
+    layer: 3,
+    status: "active",
+    type: "skill",
+    priority: 50,
+    tokens: 100,
+  },
+  {
+    id: "/tmp/skills/org/voice.md",
+    name: "voice",
+    description: "Org-tier voice rules",
+    scope: "org",
+    layer: 3,
+    status: "active",
+    type: "context",
+    priority: 30,
+    tokens: 50,
+  },
+  {
+    id: "skill://bundle/usage",
+    name: "bundle-skill",
+    description: "Bundle (Layer 1)",
+    scope: "bundle",
+    layer: 1,
+    status: "active",
+    type: "skill",
+    priority: 50,
+    tokens: 80,
+  },
+  {
+    id: "/tmp/skills/user/personal-1.md",
+    name: "personal-1",
+    description: "Personal skill A",
+    scope: "user",
+    layer: 3,
+    status: "active",
+    type: "skill",
+    priority: 50,
+    tokens: 25,
+  },
+  {
+    id: "/tmp/skills/user/personal-2.md",
+    name: "personal-2",
+    description: "Personal skill B",
+    scope: "user",
+    layer: 3,
+    status: "active",
+    type: "skill",
+    priority: 50,
+    tokens: 35,
+  },
+];
+
+mock.module("../src/api/client", () => ({
+  ...realClient,
+  callTool: async (server: string, tool: string, args: Record<string, unknown>) => {
+    callToolCalls.push({ server, tool, args });
+    if (server === "skills" && tool === "list") {
+      return { structuredContent: { skills: SKILLS_FIXTURE }, isError: false };
+    }
+    if (server === "skills" && tool === "create") {
+      return {
+        structuredContent: { id: "/tmp/skills/ws/test-skill.md" },
+        isError: false,
+      };
+    }
+    if (server === "skills" && tool === "read") {
+      // Return the org-tier skill body for any read — tests assert
+      // the read-only treatment for inherited rows, not the body itself.
+      return {
+        structuredContent: {
+          id: args.id,
+          content: "## Org voice rules\n\nUse plain English.",
+          layer: 3,
+          scope: "org",
+          source: { path: "/tmp/skills/org/voice.md" },
+          metadata: {
+            name: "voice",
+            description: "Org-tier voice rules",
+            type: "context",
+            priority: 30,
+            status: "active",
+          },
+        },
+        isError: false,
+      };
+    }
+    return { structuredContent: {}, isError: false };
+  },
+}));
+
+const React = await import("react");
+const ReactDOMClient = await import("react-dom/client");
+const { act } = await import("react");
+const { MemoryRouter } = await import("react-router-dom");
+const { SkillsBrowser } = await import("../src/pages/settings/SkillsTab");
+
+interface Mounted {
+  container: HTMLDivElement;
+  unmount(): void;
+}
+
+let mounted: Mounted | null = null;
+afterEach(() => {
+  mounted?.unmount();
+  mounted = null;
+  callToolCalls.length = 0;
+});
+
+async function mount(element: React.ReactElement): Promise<Mounted> {
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  const root = ReactDOMClient.createRoot(container);
+  await act(async () => {
+    root.render(React.createElement(MemoryRouter, null, element));
+  });
+  await act(async () => {
+    await Promise.resolve();
+  });
+  await act(async () => {
+    await Promise.resolve();
+  });
+  return {
+    container,
+    unmount() {
+      root.unmount();
+      container.remove();
+    },
+  };
+}
+
+function clickButtonByText(container: HTMLElement, text: string): boolean {
+  for (const el of Array.from(container.querySelectorAll("button"))) {
+    if (el.textContent?.includes(text)) {
+      el.click();
+      return true;
+    }
+  }
+  return false;
+}
+
+function sectionHeaders(container: HTMLElement): string[] {
+  return Array.from(container.querySelectorAll("h3")).map((el) => el.textContent?.trim() ?? "");
+}
+
+describe("SkillsBrowser with surface='workspace' (the /w/:slug/settings/skills surface)", () => {
+  test("does not render the scope filter selector", async () => {
+    mounted = await mount(React.createElement(SkillsBrowser, { surface: "workspace" }));
+    const filterSelect = mounted.container.querySelector('select[aria-label="Filter by scope"]');
+    expect(filterSelect).toBeNull();
+    // Status filter still renders — it's orthogonal.
+    const statusSelect = mounted.container.querySelector('select[aria-label="Filter by status"]');
+    expect(statusSelect).not.toBeNull();
+  });
+
+  test("renders workspace, inherited-org, and inherited-bundles sections (no user section)", async () => {
+    mounted = await mount(React.createElement(SkillsBrowser, { surface: "workspace" }));
+    const headers = sectionHeaders(mounted.container);
+    const joined = headers.join(" | ");
+    expect(joined).toContain("Workspace");
+    expect(joined).toContain("Inherited from organization");
+    expect(joined).toContain("Inherited from bundles");
+    // User-tier section MUST NOT render — personal skills surface only
+    // as the footer count, not as an editable section.
+    expect(joined).not.toContain("User");
+    // Section order: workspace before inherited-org before inherited-bundles.
+    const wsIdx = headers.findIndex((h) => h.startsWith("Workspace"));
+    const orgIdx = headers.findIndex((h) => h.startsWith("Inherited from organization"));
+    const bundleIdx = headers.findIndex((h) => h.startsWith("Inherited from bundles"));
+    expect(wsIdx).toBeGreaterThan(-1);
+    expect(orgIdx).toBeGreaterThan(wsIdx);
+    expect(bundleIdx).toBeGreaterThan(orgIdx);
+  });
+
+  test("personal-skills footer shows the correct count and links to /profile", async () => {
+    mounted = await mount(React.createElement(SkillsBrowser, { surface: "workspace" }));
+    // Fixture has 2 user-tier skills.
+    const text = mounted.container.textContent ?? "";
+    expect(text).toContain("2 personal skills active here");
+    const link = Array.from(mounted.container.querySelectorAll("a")).find((a) =>
+      a.textContent?.includes("Edit in profile"),
+    );
+    expect(link).toBeDefined();
+    expect(link?.getAttribute("href")).toBe("/profile");
+  });
+
+  test("create form is locked to scope='workspace'", async () => {
+    mounted = await mount(React.createElement(SkillsBrowser, { surface: "workspace" }));
+    await act(async () => {
+      clickButtonByText(mounted!.container, "New skill");
+    });
+    // Scope picker MUST NOT render.
+    expect(mounted.container.querySelector("#skill-scope")).toBeNull();
+    // Fill name + submit.
+    const nameInput = mounted.container.querySelector("#skill-name") as HTMLInputElement | null;
+    expect(nameInput).not.toBeNull();
+    await act(async () => {
+      const setter = Object.getOwnPropertyDescriptor(
+        HTMLInputElement.prototype,
+        "value",
+      )?.set;
+      setter?.call(nameInput, "new-ws-skill");
+      const WindowEvent = (globalThis as unknown as { window: { Event: typeof Event } }).window
+        .Event;
+      nameInput!.dispatchEvent(new WindowEvent("input", { bubbles: true }));
+    });
+    await act(async () => {
+      clickButtonByText(mounted!.container, "Create");
+    });
+    await act(async () => {
+      await Promise.resolve();
+    });
+
+    const createCall = callToolCalls.find((c) => c.server === "skills" && c.tool === "create");
+    expect(createCall).toBeDefined();
+    // THE load-bearing assertion: regardless of internal form state, the
+    // workspace surface submits scope: "workspace". If a future edit
+    // drops the lock-default in `useState<WritableScope>(lockedScope ??
+    // "workspace")`, the server's checkPathAccess can't catch an admin
+    // authoring into the wrong scope. Test pins what the gate can't.
+    expect(createCall!.args.scope).toBe("workspace");
+    expect((createCall!.args.manifest as { name?: string }).name).toBe("new-ws-skill");
+  });
+
+  test("initial skills.list fetch is unfiltered (the renderer partitions)", async () => {
+    mounted = await mount(React.createElement(SkillsBrowser, { surface: "workspace" }));
+    const listCall = callToolCalls.find((c) => c.server === "skills" && c.tool === "list");
+    expect(listCall).toBeDefined();
+    // No scope on the args — the workspace surface needs every scope in
+    // one fetch so the inherited sections and the personal-footer count
+    // are accurate. Status filter still applies ("active" default).
+    expect(listCall!.args.scope).toBeUndefined();
+    expect(listCall!.args.status).toBe("active");
+  });
+});