feat: Skills extension phase 3 — CLI, TUI, directory reads, frontmatter check

Closes #2248.

Completes SEP-2640 support across all three clients, and closes the one
obligation #2234 deliberately left open.

- `checkSkillFrontmatterMatch` compares a served SKILL.md's own YAML
  frontmatter against the entry the listing advertised, field by field. No
  digest can cover this: a digest is taken over the bytes the server served,
  so it proves the file was not altered in transit and says nothing about
  whether the listing described it honestly. Needs a real YAML parser; `yaml`
  was already a root dependency, so this adds no package — but it does newly
  put it on core/'s import graph, hence the three bundler `external` lists.

- `resources/directory/read`: result schemas defined against the normative
  text, `InspectorClient.readResourceDirectory`, a Directory section on the
  Skills screen, and `--method resources/directory/read` in the CLI. The
  client refuses the call locally when the server did not declare
  `directoryRead`, which is the SEP's MUST NOT. A child the directory lists
  but the entry does not is marked `not listed` rather than merged into the
  manifest — the SEP calls a directory result a live observation and forbids
  treating it as extending the manifest.

- CLI: `skills/list`, `skills/get` and `resources/directory/read`, plus
  `--verify` — one NDJSON report per skill, a summary on stderr, exit 7 on a
  violation. Reads are sequential; a conforming manifest may declare 512
  entries.

- TUI: a Skills pane, shown only when the server declares the extension. Each
  row carries its conformance verdict as a glyph as well as a colour, since
  the pane is read over ssh and through script(1). Enter verifies.

- `verifySkills` re-throws `AuthRecoveryRequiredError` rather than recording
  it per file: it says the session's authorization expired, so absorbing it
  would report N identical read failures and swallow the error the TUI and
  the web commands key off to reauthorize.

Two open questions settled, both in code comments where they will be found:
`skills/get` carries no caching attributes because SEP-2640 leaves the
question open in as many words, so requiring them would fail a conforming
server; and there is no `PagedSkillsState` because every consumer of this
list is a whole-catalog verdict — computed over page one of three, "this
server's skills conform" is not merely partial but wrong.

The fixture grows two skills, both for checks that were otherwise
undemonstrable: `lying-listing` (listing and file disagree, digest still
verifies) and `stale-manifest` (serves a file its manifest does not declare).

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01ND46Ci64DC3tzBy9aG81Nc
Signed-off-by: cliffhall <cliff@futurescale.com>

clients/tui/README.md

@@ -76,13 +76,14 @@ The TUI provides terminal-native tabs and panes for interacting with your MCP se
 - **Resources**: Browse and read resources exposed by the server.
 - **Prompts**: List and test prompts.
 - **Tools**: View available tools and execute them with form-like inputs. A tool whose advertised schema carries a portability problem is flagged in the list — red `!` for a construct a shipping MCP client refuses, yellow `?` for one handled unevenly — and the detail pane lists each finding under **Schema Portability** with the path, the problem, and a concrete fix. The verdict comes from [`core/json/schemaLint.ts`](../../core/json/schemaLint.ts), shared with the web Tools tab and the CLI's `--strict` report, so the three cannot disagree ([#1005](https://github.com/modelcontextprotocol/inspector/issues/1005)).
+- **Skills**: Shown only when the connected server declares the SEP-2640 Skills extension (`io.modelcontextprotocol/skills`), since it is a *server* declaration and so only knowable after connecting. The list marks each skill with its structural verdict — `✓` conforms, `!` warnings only, `✗` an error — using a glyph as well as a colour, because this pane is read over ssh, in tmux and through `script(1)`. The detail pane shows the entry's URI, description, conformance findings and manifest. **Enter** verifies the selected skill: one `resources/read` per manifest file, each hashed against its advertised digest, plus the frontmatter cross-check that compares the served `SKILL.md`'s own frontmatter against the one the listing advertised. Verification is a gesture rather than a page load because SEP-2640 says hosts MUST NOT retrieve a skill's files ahead of need. The checks are the same ones the web Skills tab and the CLI's `--verify` run ([#2234](https://github.com/modelcontextprotocol/inspector/issues/2234), [#2248](https://github.com/modelcontextprotocol/inspector/issues/2248)).
 - **Protocol**: View JSON-RPC request/response/notification history (matches the web Protocol monitor).
 - **Network**: View HTTP fetch traffic for SSE / Streamable HTTP servers (matches the web Network monitor).
 - **Console**: View stdio stderr from the connected server process (matches the web Console monitor).
 
 ## Navigation
 
-- Use the **Arrow Keys** (Left/Right) or **Tab** to switch between the main tabs (Resources, Tools, Prompts, etc.).
+- Use the **Arrow Keys** (Left/Right) or **Tab** to switch between the main tabs (Resources, Tools, Prompts, Skills, etc.).
 - Use the **Arrow Keys** (Up/Down) to scroll through lists of items.
 - Press **Enter** to select an item, execute a tool, or fetch a resource.
 - Press **Escape** or `Ctrl+C` to exit the application.

clients/tui/__tests__/App.test.tsx

@@ -24,6 +24,8 @@ const h = vi.hoisted(() => {
     resources: unknown[];
     resourceTemplates: unknown[];
     prompts: unknown[];
+    skills: unknown[];
+    skillsExtension: { directoryRead: boolean } | undefined;
     messages: unknown[];
     fetchRequests: unknown[];
     stderrLogs: unknown[];
@@ -39,6 +41,8 @@ const h = vi.hoisted(() => {
     resources: [],
     resourceTemplates: [],
     prompts: [],
+    skills: [],
+    skillsExtension: undefined as { directoryRead: boolean } | undefined,
     messages: [],
     fetchRequests: [],
     stderrLogs: [],
@@ -160,6 +164,10 @@ const h = vi.hoisted(() => {
           | "sse"
           | "streamable-http",
     );
+    // The Skills tab is gated on a SERVER declaration, so the default here is
+    // "not declared" — the tab is hidden unless a test opts in by pointing
+    // `ctrl.skillsExtension` at a declaration.
+    getSkillsExtension = vi.fn(() => ctrl.skillsExtension);
     authenticate = (...a: Parameters<InspectorClient["authenticate"]>) =>
       clientSpies.authenticate(...a);
     clearOAuthTokens = (
@@ -232,6 +240,11 @@ const h = vi.hoisted(() => {
       resourceTemplates: ctrl.resourceTemplates,
     })),
     useManagedPrompts: vi.fn(() => ({ prompts: ctrl.prompts })),
+    useManagedSkills: vi.fn(() => ({
+      skills: ctrl.skills,
+      pageCount: ctrl.skills.length > 0 ? 1 : 0,
+      error: null,
+    })),
     useMessageLog: vi.fn(() => ({ messages: ctrl.messages })),
     useFetchRequestLog: vi.fn(() => ({ fetchRequests: ctrl.fetchRequests })),
     useStderrLog: vi.fn(() => ({ stderrLogs: ctrl.stderrLogs })),
@@ -246,6 +259,7 @@ vi.mock("@inspector/core/mcp/state/index.js", () => ({
   ManagedResourcesState: h.FakeManager,
   ManagedResourceTemplatesState: h.FakeManager,
   ManagedPromptsState: h.FakeManager,
+  ManagedSkillsState: h.FakeManager,
   MessageLogState: h.FakeManager,
   FetchRequestLogState: h.FakeManager,
   StderrLogState: h.FakeManager,
@@ -271,6 +285,9 @@ vi.mock("@inspector/core/react/useManagedResources.js", () => ({
 vi.mock("@inspector/core/react/useManagedResourceTemplates.js", () => ({
   useManagedResourceTemplates: h.useManagedResourceTemplates,
 }));
+vi.mock("@inspector/core/react/useManagedSkills.js", () => ({
+  useManagedSkills: h.useManagedSkills,
+}));
 vi.mock("@inspector/core/react/useManagedPrompts.js", () => ({
   useManagedPrompts: h.useManagedPrompts,
 }));
@@ -664,6 +681,8 @@ beforeEach(() => {
     resources: [],
     resourceTemplates: [],
     prompts: [],
+    skills: [],
+    skillsExtension: undefined as { directoryRead: boolean } | undefined,
     messages: [],
     fetchRequests: [],
     stderrLogs: [],
@@ -751,6 +770,42 @@ describe("App (foundation)", () => {
     expect(h.connect).toHaveBeenCalled();
   });
 
+  it("hides the Skills tab until the server declares the extension", async () => {
+    // A *server*-declared extension (SEP-2640), so unlike the transport-derived
+    // tabs it is only knowable after connecting — and showing it against a
+    // server that never declared it would send `skills/list` to a server that
+    // answers -32601 (#2248).
+    h.ctrl.status = "connected";
+    const r = await mount(oneStdio());
+    await expectFrame(r, "Tools");
+    expect(r.lastFrame() ?? "").not.toContain("Skills");
+  });
+
+  it("shows the Skills tab, with its count, once the extension is declared", async () => {
+    h.ctrl.status = "connected";
+    h.ctrl.skillsExtension = { directoryRead: false };
+    h.ctrl.skills = [
+      {
+        uri: "skill://demo/SKILL.md",
+        frontmatter: { name: "demo", description: "d" },
+        resources: [],
+      },
+    ];
+    const r = await mount(oneStdio());
+    await expectFrame(r, "Skills (1)");
+  });
+
+  it("opens the Skills tab with its 'k' accelerator", async () => {
+    // `k`, not `s` — the accelerator has to appear in the label and stay
+    // unique; see `tabsConfig.ts`.
+    h.ctrl.status = "connected";
+    h.ctrl.skillsExtension = { directoryRead: true };
+    const r = await mount(oneStdio());
+    await expectFrame(r, "Skills");
+    r.stdin.write("k");
+    await expectFrame(r, "Select a skill to view details");
+  });
+
   it("disconnects with 'd' when connected", async () => {
     h.ctrl.status = "connected";
     const { stdin } = await mount(oneStdio());

clients/tui/__tests__/SkillsTab.test.tsx

@@ -0,0 +1,537 @@
+import React from "react";
+import { describe, it, expect, vi } from "vitest";
+import { render } from "./helpers/renderTui";
+import type { InspectorClient } from "@inspector/core/mcp/index.js";
+import type { SkillEntry } from "@inspector/core/mcp/skillsSchemas.js";
+import { AuthRecoveryRequiredError } from "@inspector/core/auth/challenge.js";
+import { sha256Digest, textToBytes } from "@inspector/core/mcp/skills.js";
+
+// MUST mock ink-scroll-view: the real ScrollView renders a placeholder minimap
+// in the non-TTY test env and never mounts its children.
+vi.mock("ink-scroll-view", () => import("./helpers/inkScrollViewMock.js"));
+
+import { SkillsTab } from "../src/components/SkillsTab.js";
+
+const tick = async () => {
+  for (let i = 0; i < 8; i++)
+    await new Promise((resolve) => setTimeout(resolve, 4));
+};
+
+const ESC = String.fromCharCode(27);
+const UP = `${ESC}[A`;
+const DOWN = `${ESC}[B`;
+const PAGE_UP = `${ESC}[5~`;
+const PAGE_DOWN = `${ESC}[6~`;
+const ENTER = "\r";
+
+const SKILL_MD = "---\nname: clean\ndescription: A clean skill\n---\n\n# C\n";
+// sha256 of SKILL_MD, so the clean fixture actually verifies.
+const CLEAN_DIGEST =
+  "sha256:0000000000000000000000000000000000000000000000000000000000000000";
+
+const clean: SkillEntry = {
+  uri: "skill://clean/SKILL.md",
+  frontmatter: { name: "clean", description: "A clean skill" },
+  resources: [
+    { uri: "skill://clean/SKILL.md", digest: CLEAN_DIGEST, size: 51 },
+  ],
+};
+// A `name-path-mismatch`: the one structural invariant SEP-2640 states
+// outright, so this row must carry the error mark.
+const broken: SkillEntry = {
+  uri: "skill://wrong-folder/SKILL.md",
+  frontmatter: { name: "right-name", description: "Mismatched" },
+  resources: [
+    { uri: "skill://wrong-folder/SKILL.md", digest: CLEAN_DIGEST, size: 1 },
+  ],
+};
+// Legal but unverifiable — a WARNING, which must read differently from an error.
+const dynamic: SkillEntry = {
+  uri: "skill://gen/SKILL.md",
+  frontmatter: { name: "gen", description: "Generated" },
+  resources: "dynamic",
+};
+const noSize: SkillEntry = {
+  uri: "skill://nosize/SKILL.md",
+  frontmatter: { name: "nosize", description: "No declared size" },
+  resources: [{ uri: "skill://nosize/SKILL.md", digest: CLEAN_DIGEST }],
+};
+
+const skills = [clean, broken, dynamic, noSize];
+
+function mockClient(
+  readResource: unknown = vi.fn().mockResolvedValue({
+    result: { contents: [{ uri: "skill://clean/SKILL.md", text: SKILL_MD }] },
+  }),
+): InspectorClient {
+  return { readResource } as unknown as InspectorClient;
+}
+
+describe("SkillsTab (#2248)", () => {
+  it("renders the empty state when there are no skills", () => {
+    const { lastFrame } = render(
+      <SkillsTab
+        skills={[]}
+        pageCount={0}
+        inspectorClient={null}
+        width={140}
+        height={30}
+      />,
+    );
+    const frame = lastFrame() ?? "";
+    expect(frame).toContain("Skills (0)");
+    expect(frame).toContain("No skills available");
+    expect(frame).toContain("Select a skill to view details");
+  });
+
+  it("shows the page count only when the walk took more than one page", () => {
+    const one = render(
+      <SkillsTab
+        skills={skills}
+        pageCount={1}
+        inspectorClient={null}
+        width={140}
+        height={30}
+      />,
+    );
+    expect(one.lastFrame() ?? "").toContain("Skills (4)");
+    expect(one.lastFrame() ?? "").not.toContain("pages");
+    const many = render(
+      <SkillsTab
+        skills={skills}
+        pageCount={3}
+        inspectorClient={null}
+        width={140}
+        height={30}
+      />,
+    );
+    expect(many.lastFrame() ?? "").toContain("3 pages");
+  });
+
+  it("renders the list error in place of the list", () => {
+    const { lastFrame } = render(
+      <SkillsTab
+        skills={[]}
+        pageCount={0}
+        loadError={new Error("walk failed")}
+        inspectorClient={null}
+        width={140}
+        height={30}
+      />,
+    );
+    expect(lastFrame() ?? "").toContain("walk failed");
+  });
+
+  it("marks each row with its static conformance verdict", () => {
+    // The mark is a glyph, not only a colour: this pane is read over ssh, in
+    // tmux and through `script(1)`, where colour may not survive.
+    const { lastFrame } = render(
+      <SkillsTab
+        skills={skills}
+        pageCount={1}
+        inspectorClient={null}
+        width={140}
+        height={30}
+      />,
+    );
+    const frame = lastFrame() ?? "";
+    expect(frame).toContain("✓ clean");
+    // `skillDisplayName` prefers the declared name over the URI segment.
+    expect(frame).toContain("✗ right-name");
+    expect(frame).toContain("! gen");
+  });
+
+  it("shows the selected skill's URI, description, findings and manifest", () => {
+    const { lastFrame } = render(
+      <SkillsTab
+        skills={skills}
+        pageCount={1}
+        inspectorClient={null}
+        width={140}
+        height={30}
+      />,
+    );
+    const frame = lastFrame() ?? "";
+    expect(frame).toContain("skill://clean/SKILL.md");
+    expect(frame).toContain("A clean skill");
+    expect(frame).toContain("Conformance: conforms");
+    expect(frame).toContain("Manifest (1)");
+    expect(frame).toContain("SKILL.md");
+    expect(frame).toContain("(51 B)");
+    expect(frame).toContain("[Enter to verify digests and frontmatter]");
+  });
+
+  it("renders a dynamic skill's manifest as unadvertised rather than empty", async () => {
+    const { lastFrame, stdin } = render(
+      <SkillsTab
+        skills={skills}
+        pageCount={1}
+        inspectorClient={null}
+        width={140}
+        height={30}
+        focusedPane="list"
+      />,
+    );
+    stdin.write(DOWN);
+    await tick();
+    stdin.write(DOWN);
+    await tick();
+    const frame = lastFrame() ?? "";
+    expect(frame).toContain('"dynamic" — no files advertised');
+    expect(frame).toContain("integrity cannot be verified");
+  });
+
+  it("omits the size caption when the manifest declares none", async () => {
+    const { lastFrame, stdin } = render(
+      <SkillsTab
+        skills={skills}
+        pageCount={1}
+        inspectorClient={null}
+        width={140}
+        height={30}
+        focusedPane="list"
+      />,
+    );
+    for (let i = 0; i < 3; i++) {
+      stdin.write(DOWN);
+      await tick();
+    }
+    const frame = lastFrame() ?? "";
+    expect(frame).toContain("Manifest (1)");
+    expect(frame).not.toContain(" B)");
+  });
+
+  it("moves selection with the arrow keys and stops at both boundaries", async () => {
+    const { lastFrame, stdin } = render(
+      <SkillsTab
+        skills={skills}
+        pageCount={1}
+        inspectorClient={null}
+        width={140}
+        height={30}
+        focusedPane="list"
+      />,
+    );
+    stdin.write(UP);
+    await tick();
+    expect(lastFrame() ?? "").toContain("▶ ✓ clean");
+    stdin.write(DOWN);
+    await tick();
+    expect(lastFrame() ?? "").toContain("▶ ✗ right-name");
+    for (let i = 0; i < 5; i++) {
+      stdin.write(DOWN);
+      await tick();
+    }
+    // `nosize` omits a required `size`, so its row carries the error mark too
+    // — the mark tracks the checks, not the position.
+    expect(lastFrame() ?? "").toContain("▶ ✗ nosize");
+    // …and back up from the bottom, which is the other direction of the same
+    // guard: the top boundary above never exercises the move itself.
+    stdin.write(UP);
+    await tick();
+    expect(lastFrame() ?? "").toContain("▶ ! gen");
+  });
+
+  it("scrolls the details pane without moving the selection", async () => {
+    const scrollBy = vi.fn();
+    const { stdin } = render(
+      <SkillsTab
+        skills={skills}
+        pageCount={1}
+        inspectorClient={null}
+        width={140}
+        height={30}
+        focusedPane="details"
+      />,
+    );
+    stdin.write(UP);
+    stdin.write(DOWN);
+    stdin.write(PAGE_UP);
+    stdin.write(PAGE_DOWN);
+    await tick();
+    // Nothing to assert on the mock beyond not crashing and not moving the
+    // selection — the ScrollView handle is stubbed by the shared mock.
+    expect(scrollBy).not.toHaveBeenCalled();
+  });
+
+  it("ignores input entirely when a modal is open", async () => {
+    const { lastFrame, stdin } = render(
+      <SkillsTab
+        skills={skills}
+        pageCount={1}
+        inspectorClient={null}
+        width={140}
+        height={30}
+        focusedPane="list"
+        modalOpen
+      />,
+    );
+    stdin.write(DOWN);
+    await tick();
+    expect(lastFrame() ?? "").toContain("▶ ✓ clean");
+  });
+
+  it("verifies the selected skill on Enter and reports the outcome", async () => {
+    const readResource = vi.fn().mockResolvedValue({
+      result: { contents: [{ uri: "skill://clean/SKILL.md", text: SKILL_MD }] },
+    });
+    const { lastFrame, stdin } = render(
+      <SkillsTab
+        skills={[clean]}
+        pageCount={1}
+        inspectorClient={mockClient(readResource)}
+        width={140}
+        height={30}
+        focusedPane="list"
+      />,
+    );
+    stdin.write(ENTER);
+    await tick();
+    expect(readResource).toHaveBeenCalled();
+    const frame = lastFrame() ?? "";
+    // The fixture's advertised digest is all zeroes, so this is a mismatch —
+    // which is the outcome worth showing loudly.
+    expect(frame).toContain("Verification FAILED");
+    expect(frame).toContain("✗ SKILL.md");
+  });
+
+  it("surfaces the frontmatter cross-check after verifying", async () => {
+    const lying: SkillEntry = {
+      ...clean,
+      frontmatter: { name: "clean", description: "Something else entirely" },
+    };
+    const { lastFrame, stdin } = render(
+      <SkillsTab
+        skills={[lying]}
+        pageCount={1}
+        inspectorClient={mockClient()}
+        width={140}
+        height={30}
+        focusedPane="list"
+      />,
+    );
+    stdin.write(ENTER);
+    await tick();
+    const frame = lastFrame() ?? "";
+    expect(frame).toContain("Frontmatter cross-check:");
+    expect(frame).toContain("Something else entirely");
+  });
+
+  it("reports an ordinary read failure as a failed verdict, not a crash", async () => {
+    // `verifySkills` records a plain read failure per file rather than
+    // throwing, so the pane shows the verdict rather than the error banner.
+    const readResource = vi.fn().mockRejectedValue(new Error("network down"));
+    const { lastFrame, stdin } = render(
+      <SkillsTab
+        skills={[clean]}
+        pageCount={1}
+        inspectorClient={mockClient(readResource)}
+        width={140}
+        height={30}
+        focusedPane="list"
+      />,
+    );
+    stdin.write(ENTER);
+    await tick();
+    expect(lastFrame() ?? "").toContain("Verification FAILED");
+    expect(lastFrame() ?? "").toContain("network down");
+  });
+
+  it("hands an auth-recovery error to the callback instead of rendering it", async () => {
+    // The one error `verifySkills` re-throws: the session's authorization
+    // expired, and this callback is how the TUI offers to fix it. Rendered as
+    // a message instead, the user would be told the file could not be read and
+    // given no way to recover.
+    const err = new AuthRecoveryRequiredError(
+      new URL("https://auth.example/authorize"),
+      { reason: "expired" } as never,
+    );
+    const onAuthRecoveryRequired = vi.fn();
+    const { lastFrame, stdin } = render(
+      <SkillsTab
+        skills={[clean]}
+        pageCount={1}
+        inspectorClient={mockClient(vi.fn().mockRejectedValue(err))}
+        width={140}
+        height={30}
+        focusedPane="list"
+        onAuthRecoveryRequired={onAuthRecoveryRequired}
+      />,
+    );
+    stdin.write(ENTER);
+    await tick();
+    expect(onAuthRecoveryRequired).toHaveBeenCalledWith(err);
+    expect(lastFrame() ?? "").not.toContain("Verification FAILED");
+  });
+
+  it("shows the read failure's own reason under the file it happened on", async () => {
+    // A client missing `readResource` entirely fails every read; the walk
+    // records the reason per file rather than aborting, so the diagnosis lands
+    // beside the file it belongs to.
+    const { lastFrame, stdin } = render(
+      <SkillsTab
+        skills={[clean]}
+        pageCount={1}
+        inspectorClient={{} as unknown as InspectorClient}
+        width={140}
+        height={30}
+        focusedPane="list"
+      />,
+    );
+    stdin.write(ENTER);
+    await tick();
+    expect(lastFrame() ?? "").toContain("is not a function");
+  });
+
+  it("does nothing on Enter with no connected client", async () => {
+    const { lastFrame, stdin } = render(
+      <SkillsTab
+        skills={[clean]}
+        pageCount={1}
+        inspectorClient={null}
+        width={140}
+        height={30}
+        focusedPane="list"
+      />,
+    );
+    stdin.write(ENTER);
+    await tick();
+    expect(lastFrame() ?? "").toContain(
+      "[Enter to verify digests and frontmatter]",
+    );
+  });
+
+  it("reports a verified skill and re-verifies on a second Enter", async () => {
+    // The digest is computed from the very bytes the fake read returns, so the
+    // pass is real rather than a constant that happens to match.
+    const digest = await sha256Digest(textToBytes(SKILL_MD));
+    const verifiable: SkillEntry = {
+      ...clean,
+      resources: [
+        {
+          uri: "skill://clean/SKILL.md",
+          digest,
+          size: textToBytes(SKILL_MD).byteLength,
+        },
+      ],
+    };
+    const readResource = vi.fn().mockResolvedValue({
+      result: { contents: [{ uri: "skill://clean/SKILL.md", text: SKILL_MD }] },
+    });
+    const { lastFrame, stdin } = render(
+      <SkillsTab
+        skills={[verifiable]}
+        pageCount={1}
+        inspectorClient={mockClient(readResource)}
+        width={140}
+        height={30}
+        focusedPane="list"
+      />,
+    );
+    stdin.write(ENTER);
+    await tick();
+    expect(lastFrame() ?? "").toContain("Verified — Enter to re-verify");
+    expect(lastFrame() ?? "").toContain("✓ SKILL.md");
+
+    stdin.write(ENTER);
+    await tick();
+    expect(readResource).toHaveBeenCalledTimes(2);
+  });
+
+  it("shows a verifying state and ignores Enter while one is in flight", async () => {
+    // The guard is what stops a held Enter from opening a second walk over the
+    // same manifest on top of the first.
+    let release: ((value: unknown) => void) | undefined;
+    const readResource = vi.fn(
+      () =>
+        new Promise((resolve) => {
+          release = resolve;
+        }),
+    );
+    const { lastFrame, stdin } = render(
+      <SkillsTab
+        skills={[clean]}
+        pageCount={1}
+        inspectorClient={mockClient(readResource)}
+        width={140}
+        height={30}
+        focusedPane="list"
+      />,
+    );
+    stdin.write(ENTER);
+    await tick();
+    expect(lastFrame() ?? "").toContain("[Verifying…]");
+    stdin.write(ENTER);
+    await tick();
+    expect(readResource).toHaveBeenCalledTimes(1);
+    release?.({
+      result: { contents: [{ uri: "skill://clean/SKILL.md", text: SKILL_MD }] },
+    });
+    await tick();
+  });
+
+  it("falls back to the whole URI when a manifest entry has no path separator", async () => {
+    const odd: SkillEntry = {
+      uri: "skill://odd/SKILL.md",
+      frontmatter: { name: "odd", description: "d" },
+      resources: [{ uri: "urn:opaque", digest: CLEAN_DIGEST, size: 1 }],
+    };
+    const { lastFrame } = render(
+      <SkillsTab
+        skills={[odd]}
+        pageCount={1}
+        inspectorClient={null}
+        width={140}
+        height={30}
+      />,
+    );
+    expect(lastFrame() ?? "").toContain("urn:opaque");
+  });
+
+  it("keys a row by its index when the entry carries no URI", () => {
+    // A URI-less entry is a `malformed-uri` finding this pane reports, so it
+    // must still render a addressable row rather than colliding React keys.
+    const nameless = {
+      uri: "",
+      frontmatter: { name: "nameless", description: "d" },
+      resources: [],
+    } as SkillEntry;
+    const { lastFrame } = render(
+      <SkillsTab
+        skills={[nameless]}
+        pageCount={1}
+        inspectorClient={null}
+        width={140}
+        height={30}
+      />,
+    );
+    expect(lastFrame() ?? "").toContain("nameless");
+  });
+
+  it("shows the details footer only when the details pane is focused", () => {
+    const unfocused = render(
+      <SkillsTab
+        skills={[clean]}
+        pageCount={1}
+        inspectorClient={null}
+        width={140}
+        height={30}
+        focusedPane="list"
+      />,
+    );
+    expect(unfocused.lastFrame() ?? "").not.toContain("Enter to verify\n");
+    const focused = render(
+      <SkillsTab
+        skills={[clean]}
+        pageCount={1}
+        inspectorClient={null}
+        width={140}
+        height={30}
+        focusedPane="details"
+      />,
+    );
+    expect(focused.lastFrame() ?? "").toContain(
+      "↑/↓ to scroll, Enter to verify",
+    );
+  });
+});

clients/tui/__tests__/Tabs.test.tsx

@@ -50,6 +50,38 @@ describe("Tabs", () => {
     expect(lastFrame() ?? "").toContain("Network");
   });
 
+  it("hides the skills tab by default and shows it when showSkills is true", () => {
+    // A *server-declared* extension (SEP-2640), unlike the transport-derived
+    // gates above — it is only knowable after connecting, so the default has
+    // to be hidden.
+    const hidden = render(
+      <Tabs activeTab="info" onTabChange={noop} width={140} />,
+    );
+    expect(hidden.lastFrame() ?? "").not.toContain("Skills");
+    const shown = render(
+      <Tabs
+        activeTab="info"
+        onTabChange={noop}
+        width={140}
+        showSkills={true}
+      />,
+    );
+    expect(shown.lastFrame() ?? "").toContain("Skills");
+  });
+
+  it("renders a count on the skills tab", () => {
+    const { lastFrame } = render(
+      <Tabs
+        activeTab="skills"
+        onTabChange={noop}
+        width={140}
+        showSkills={true}
+        counts={{ skills: 4 }}
+      />,
+    );
+    expect(lastFrame() ?? "").toContain("Skills (4)");
+  });
+
   it("marks the active tab with the ▶ marker", () => {
     const { lastFrame } = render(
       <Tabs activeTab="tools" onTabChange={noop} width={120} />,

clients/tui/src/App.tsx

@@ -27,6 +27,7 @@ import {
   ManagedResourcesState,
   ManagedResourceTemplatesState,
   ManagedPromptsState,
+  ManagedSkillsState,
   MessageLogState,
   FetchRequestLogState,
   StderrLogState,
@@ -40,6 +41,7 @@ import { useManagedTools } from "@inspector/core/react/useManagedTools.js";
 import { useManagedResources } from "@inspector/core/react/useManagedResources.js";
 import { useManagedResourceTemplates } from "@inspector/core/react/useManagedResourceTemplates.js";
 import { useManagedPrompts } from "@inspector/core/react/useManagedPrompts.js";
+import { useManagedSkills } from "@inspector/core/react/useManagedSkills.js";
 import { useMessageLog } from "@inspector/core/react/useMessageLog.js";
 import { useFetchRequestLog } from "@inspector/core/react/useFetchRequestLog.js";
 import { useStderrLog } from "@inspector/core/react/useStderrLog.js";
@@ -79,6 +81,7 @@ import { InfoTab } from "./components/InfoTab.js";
 import { AuthTab } from "./components/AuthTab.js";
 import { ResourcesTab } from "./components/ResourcesTab.js";
 import { PromptsTab } from "./components/PromptsTab.js";
+import { SkillsTab } from "./components/SkillsTab.js";
 import { ToolsTab } from "./components/ToolsTab.js";
 import { NotificationsTab } from "./components/NotificationsTab.js";
 import { HistoryTab } from "./components/HistoryTab.js";
@@ -153,6 +156,7 @@ function App({
     info?: number;
     resources?: number;
     prompts?: number;
+    skills?: number;
     tools?: number;
     messages?: number;
     requests?: number;
@@ -244,6 +248,9 @@ function App({
   const [managedPromptsStates, setManagedPromptsStates] = useState<
     Record<string, ManagedPromptsState>
   >({});
+  const [managedSkillsStates, setManagedSkillsStates] = useState<
+    Record<string, ManagedSkillsState>
+  >({});
   const [messageLogStates, setMessageLogStates] = useState<
     Record<string, MessageLogState>
   >({});
@@ -293,6 +300,7 @@ function App({
       ManagedResourceTemplatesState
     > = {};
     const newManagedPromptsStates: Record<string, ManagedPromptsState> = {};
+    const newManagedSkillsStates: Record<string, ManagedSkillsState> = {};
     const newMessageLogStates: Record<string, MessageLogState> = {};
     const newFetchRequestLogStates: Record<string, FetchRequestLogState> = {};
     const newStderrLogStates: Record<string, StderrLogState> = {};
@@ -367,6 +375,7 @@ function App({
         newManagedResourceTemplatesStates[serverName] =
           new ManagedResourceTemplatesState(client);
         newManagedPromptsStates[serverName] = new ManagedPromptsState(client);
+        newManagedSkillsStates[serverName] = new ManagedSkillsState(client);
         newMessageLogStates[serverName] = new MessageLogState(client);
         newFetchRequestLogStates[serverName] = new FetchRequestLogState(client);
         newStderrLogStates[serverName] = new StderrLogState(client);
@@ -387,6 +396,10 @@ function App({
         ...prev,
         ...newManagedPromptsStates,
       }));
+      setManagedSkillsStates((prev) => ({
+        ...prev,
+        ...newManagedSkillsStates,
+      }));
       setMessageLogStates((prev) => ({ ...prev, ...newMessageLogStates }));
       setFetchRequestLogStates((prev) => ({
         ...prev,
@@ -420,6 +433,9 @@ function App({
       Object.values(managedPromptsStates).forEach((manager) => {
         manager.destroy();
       });
+      Object.values(managedSkillsStates).forEach((manager) => {
+        manager.destroy();
+      });
       Object.values(messageLogStates).forEach((manager) => {
         manager.destroy();
       });
@@ -441,6 +457,7 @@ function App({
     managedResourcesStates,
     managedResourceTemplatesStates,
     managedPromptsStates,
+    managedSkillsStates,
     messageLogStates,
     fetchRequestLogStates,
     stderrLogStates,
@@ -586,10 +603,28 @@ function App({
       selectedInspectorClient,
       selectedManagedResourceTemplatesState,
     );
+  const selectedManagedSkillsState = useMemo(
+    () =>
+      selectedServer && managedSkillsStates[selectedServer]
+        ? managedSkillsStates[selectedServer]
+        : null,
+    [selectedServer, managedSkillsStates],
+  );
   const { prompts: managedPrompts } = useManagedPrompts(
     selectedInspectorClient,
     selectedManagedPromptsState,
   );
+  const {
+    skills: managedSkills,
+    pageCount: managedSkillsPageCount,
+    error: managedSkillsError,
+  } = useManagedSkills(selectedInspectorClient, selectedManagedSkillsState);
+  // A *server-declared* extension, so it is only knowable after connecting —
+  // unlike the transport-derived `showLoggingTab` / `showRequestsTab` above.
+  const showSkillsTab =
+    !!selectedServer &&
+    !!selectedInspectorClient?.getSkillsExtension() &&
+    inspectorStatus === "connected";
 
   // Connect — on 401 or mid-session auth recovery, run OAuth then retry.
   type TuiOAuthRunResult =
@@ -1347,6 +1382,7 @@ function App({
     setTabCounts({
       resources: managedResources.length || 0,
       prompts: managedPrompts.length || 0,
+      skills: managedSkills.length || 0,
       tools: managedTools.length || 0,
       messages: inspectorMessages.length || 0,
       requests: inspectorFetchRequests.length || 0,
@@ -1356,6 +1392,7 @@ function App({
     selectedServer,
     managedResources,
     managedPrompts,
+    managedSkills,
     managedTools,
     inspectorMessages,
     inspectorFetchRequests,
@@ -1430,6 +1467,7 @@ function App({
           if (tab.id === "auth" && !showAuthTab) return false;
           if (tab.id === "logging" && !showLoggingTab) return false;
           if (tab.id === "requests" && !showRequestsTab) return false;
+          if (tab.id === "skills" && !showSkillsTab) return false;
           return true;
         })
         .map((tab: { id: TabType; label: string; accelerator: string }) => [
@@ -1517,6 +1555,7 @@ function App({
         "auth",
         "resources",
         "prompts",
+        "skills",
         "tools",
         "messages",
         "requests",
@@ -1526,6 +1565,7 @@ function App({
         if (t === "auth" && !showAuthTab) return false;
         if (t === "logging" && !showLoggingTab) return false;
         if (t === "requests" && !showRequestsTab) return false;
+        if (t === "skills" && !showSkillsTab) return false;
         return true;
       });
       const currentIndex = tabs.indexOf(activeTab);
@@ -1763,6 +1803,7 @@ function App({
                 ? inspectorClients[selectedServer].getServerType() === "stdio"
                 : false
             }
+            showSkills={showSkillsTab}
             showRequests={
               selectedServer && inspectorClients[selectedServer]
                 ? (() => {
@@ -1967,6 +2008,34 @@ function App({
                   )
                 }
               />
+            ) : activeTab === "skills" &&
+              currentServerState?.status === "connected" &&
+              selectedInspectorClient ? (
+              <SkillsTab
+                key={`skills-${selectedServer}`}
+                skills={managedSkills}
+                pageCount={managedSkillsPageCount}
+                loadError={managedSkillsError}
+                inspectorClient={selectedInspectorClient}
+                width={contentWidth}
+                height={contentHeight}
+                focusedPane={
+                  focus === "tabContentDetails"
+                    ? "details"
+                    : focus === "tabContentList"
+                      ? "list"
+                      : null
+                }
+                onAuthRecoveryRequired={onAuthRecoveryRequired}
+                modalOpen={
+                  !!(
+                    toolTestModal ||
+                    resourceTestModal ||
+                    promptTestModal ||
+                    detailsModal
+                  )
+                }
+              />
             ) : activeTab === "prompts" &&
               currentServerState?.status === "connected" &&
               selectedInspectorClient ? (

clients/tui/src/components/SkillsTab.tsx

@@ -0,0 +1,416 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { Box, Text, useInput, type Key } from "ink";
+import { ScrollView, type ScrollViewRef } from "ink-scroll-view";
+import type { InspectorClient } from "@inspector/core/mcp/index.js";
+import { AuthRecoveryRequiredError } from "@inspector/core/auth/challenge.js";
+import {
+  checkSkillConformance,
+  skillDisplayName,
+  type SkillIssue,
+} from "@inspector/core/mcp/skills.js";
+import {
+  DYNAMIC_RESOURCES,
+  type SkillEntry,
+} from "@inspector/core/mcp/skillsSchemas.js";
+import {
+  verifySkills,
+  type SkillVerifyReport,
+} from "@inspector/core/mcp/skillsVerification.js";
+import { useSelectableList } from "../hooks/useSelectableList.js";
+
+interface SkillsTabProps {
+  skills: SkillEntry[];
+  /** Pages the last `skills/list` walk took; shown so pagination is visible. */
+  pageCount: number;
+  /** A failed list walk, rendered in place of the list. */
+  loadError?: Error | null;
+  inspectorClient: InspectorClient | null;
+  width: number;
+  height: number;
+  focusedPane?: "list" | "details" | null;
+  onAuthRecoveryRequired?: (error: AuthRecoveryRequiredError) => void;
+  modalOpen?: boolean;
+}
+
+/**
+ * The character that leads a finding line, by severity. A terminal pane cannot
+ * lean on colour alone — the Inspector is run over ssh, in tmux, and piped
+ * through `script(1)` — so severity is carried by a glyph as well as a colour.
+ */
+const ISSUE_MARK: Record<SkillIssue["severity"], string> = {
+  error: "✗",
+  warning: "!",
+};
+
+const ISSUE_COLOR: Record<SkillIssue["severity"], string> = {
+  error: "red",
+  warning: "yellow",
+};
+
+/** Per-file verification glyph, same reasoning as {@link ISSUE_MARK}. */
+const FILE_MARK: Record<string, string> = {
+  verified: "✓",
+  mismatch: "✗",
+  unverifiable: "?",
+  error: "✗",
+  "read-error": "✗",
+};
+
+const FILE_COLOR: Record<string, string> = {
+  verified: "green",
+  mismatch: "red",
+  unverifiable: "yellow",
+  error: "red",
+  "read-error": "red",
+};
+
+/** The file name a manifest URI ends in, for a list that must fit 40 columns. */
+function fileNameOf(uri: string): string {
+  const cut = uri.lastIndexOf("/");
+  return cut === -1 ? uri : uri.slice(cut + 1);
+}
+
+/**
+ * The Skills pane (SEP-2640, #2248): the catalog on the left, and on the right
+ * the selected skill's frontmatter, its conformance findings, and its manifest.
+ *
+ * **Enter verifies.** The static checks run on every render — they are a pure
+ * walk over a list already in memory — but digest verification needs the bytes,
+ * so it is one `resources/read` per manifest entry and must be asked for. That
+ * split is the same one the web screen makes and the same one SEP-2640 makes:
+ * hosts MUST NOT retrieve a skill's files ahead of need.
+ */
+export function SkillsTab({
+  skills,
+  pageCount,
+  loadError = null,
+  inspectorClient,
+  width,
+  height,
+  focusedPane = null,
+  onAuthRecoveryRequired,
+  modalOpen = false,
+}: SkillsTabProps) {
+  const visibleCount = Math.max(1, height - 7);
+  const { selectedIndex, firstVisible, setSelection } = useSelectableList(
+    skills.length,
+    visibleCount,
+    { resetWhen: skills },
+  );
+  const [error, setError] = useState<string | null>(null);
+  const [verifying, setVerifying] = useState(false);
+  /**
+   * The last verification, keyed by the skill URI it was run for. Keyed rather
+   * than cleared on selection change so moving off a skill and back does not
+   * silently discard a verdict the user just paid a round trip for — and keyed
+   * by URI rather than index so a refresh that reorders the list cannot show
+   * one skill's verdict under another's name.
+   */
+  const [report, setReport] = useState<{
+    uri: string;
+    result: SkillVerifyReport;
+  } | null>(null);
+  const scrollViewRef = useRef<ScrollViewRef>(null);
+
+  const selectedSkill = skills[selectedIndex] ?? null;
+
+  const runVerify = useCallback(
+    (skill: SkillEntry) => {
+      if (!inspectorClient || verifying) return;
+      setVerifying(true);
+      setError(null);
+      // The IIFE catches everything it can throw, so there is no rejection for
+      // this key handler — which cannot await — to own.
+      void (async () => {
+        try {
+          const [result] = await verifySkills(inspectorClient, [skill]);
+          setReport({ uri: skill.uri, result });
+        } catch (err) {
+          if (err instanceof AuthRecoveryRequiredError) {
+            onAuthRecoveryRequired?.(err);
+            return;
+          }
+          /* v8 ignore start -- `verifySkills` records an ordinary read failure
+             against the file it happened on and keeps walking, and it re-throws
+             exactly one error, handled directly above. So nothing the call
+             graph can produce reaches here; this is the guard that keeps a
+             future change from becoming an unhandled rejection instead of a
+             visible message. Exercising it would mean faking a throw the walk
+             cannot make, which tests the fake rather than the code. */
+          setError(
+            err instanceof Error ? err.message : "Failed to verify skill",
+          );
+          /* v8 ignore stop */
+        } finally {
+          setVerifying(false);
+        }
+      })();
+    },
+    [inspectorClient, onAuthRecoveryRequired, verifying],
+  );
+
+  useInput(
+    (input: string, key: Key) => {
+      if (key.return && selectedSkill && inspectorClient) {
+        runVerify(selectedSkill);
+        return;
+      }
+      if (focusedPane === "list") {
+        if (key.upArrow && selectedIndex > 0) {
+          setSelection(selectedIndex - 1);
+        } else if (key.downArrow && selectedIndex < skills.length - 1) {
+          setSelection(selectedIndex + 1);
+        }
+        return;
+      }
+      if (focusedPane === "details") {
+        if (key.upArrow) {
+          scrollViewRef.current?.scrollBy(-1);
+        } else if (key.downArrow) {
+          scrollViewRef.current?.scrollBy(1);
+        } else if (key.pageUp) {
+          const viewportHeight =
+            scrollViewRef.current?.getViewportHeight() || 1;
+          scrollViewRef.current?.scrollBy(-viewportHeight);
+        } else if (key.pageDown) {
+          const viewportHeight =
+            scrollViewRef.current?.getViewportHeight() || 1;
+          scrollViewRef.current?.scrollBy(viewportHeight);
+        }
+      }
+    },
+    {
+      isActive:
+        !modalOpen && (focusedPane === "list" || focusedPane === "details"),
+    },
+  );
+
+  // Reset scroll when selection changes. A genuine synchronization with an
+  // external system (the ScrollView's imperative handle), not state derived
+  // from a prop — so an effect is the right tool here.
+  useEffect(() => {
+    scrollViewRef.current?.scrollTo(0);
+  }, [selectedIndex]);
+
+  const listWidth = Math.floor(width * 0.4);
+  const detailWidth = width - listWidth;
+  const issues = selectedSkill ? checkSkillConformance(selectedSkill) : [];
+  const activeReport =
+    selectedSkill && report?.uri === selectedSkill.uri ? report.result : null;
+  const manifest =
+    selectedSkill && selectedSkill.resources !== DYNAMIC_RESOURCES
+      ? selectedSkill.resources
+      : [];
+
+  return (
+    <Box flexDirection="row" width={width} height={height}>
+      <Box
+        width={listWidth}
+        height={height}
+        borderStyle="single"
+        borderTop={false}
+        borderBottom={false}
+        borderLeft={false}
+        borderRight={true}
+        flexDirection="column"
+        paddingX={1}
+      >
+        <Box paddingY={1}>
+          <Text
+            bold
+            backgroundColor={focusedPane === "list" ? "yellow" : undefined}
+          >
+            Skills ({skills.length}
+            {pageCount > 1 ? `, ${pageCount} pages` : ""})
+          </Text>
+        </Box>
+        {loadError ? (
+          <Box paddingY={1}>
+            <Text color="red">{loadError.message}</Text>
+          </Box>
+        ) : skills.length === 0 ? (
+          <Box paddingY={1}>
+            <Text dimColor>No skills available</Text>
+          </Box>
+        ) : (
+          <Box
+            flexDirection="column"
+            height={visibleCount}
+            overflow="hidden"
+            flexShrink={0}
+          >
+            {skills
+              .slice(firstVisible, firstVisible + visibleCount)
+              .map((skill, i) => {
+                const index = firstVisible + i;
+                const isSelected = index === selectedIndex;
+                // The per-row mark is the static conformance verdict, which
+                // costs nothing — it is what makes a bad skill visible in the
+                // list rather than only after selecting it.
+                const rowIssues = checkSkillConformance(skill);
+                const worst = rowIssues.some((it) => it.severity === "error")
+                  ? "error"
+                  : rowIssues.length > 0
+                    ? "warning"
+                    : null;
+                return (
+                  <Box key={skill.uri || index} paddingY={0} flexShrink={0}>
+                    <Text>
+                      {isSelected ? "▶ " : "  "}
+                      {worst ? (
+                        <Text color={ISSUE_COLOR[worst]}>
+                          {ISSUE_MARK[worst]}{" "}
+                        </Text>
+                      ) : (
+                        <Text color="green">✓ </Text>
+                      )}
+                      {skillDisplayName(skill)}
+                    </Text>
+                  </Box>
+                );
+              })}
+          </Box>
+        )}
+      </Box>
+
+      <Box
+        width={detailWidth}
+        height={height}
+        paddingX={1}
+        flexDirection="column"
+        overflow="hidden"
+      >
+        {selectedSkill ? (
+          <>
+            <Box flexShrink={0} paddingTop={1}>
+              <Text
+                bold
+                backgroundColor={
+                  focusedPane === "details" ? "yellow" : undefined
+                }
+                {...(focusedPane === "details" ? {} : { color: "cyan" })}
+              >
+                {skillDisplayName(selectedSkill)}
+              </Text>
+            </Box>
+
+            <ScrollView ref={scrollViewRef} height={height - 5}>
+              <Box marginTop={1} flexShrink={0}>
+                <Text dimColor>{selectedSkill.uri}</Text>
+              </Box>
+              {selectedSkill.frontmatter.description && (
+                <Box marginTop={1} flexShrink={0}>
+                  <Text dimColor>{selectedSkill.frontmatter.description}</Text>
+                </Box>
+              )}
+
+              <Box marginTop={1} flexShrink={0}>
+                <Text bold>
+                  Conformance{issues.length === 0 ? ": conforms" : ":"}
+                </Text>
+              </Box>
+              {issues.map((issue, idx) => (
+                <Box key={`issue-${idx}`} paddingLeft={2} flexShrink={0}>
+                  <Text color={ISSUE_COLOR[issue.severity]}>
+                    {ISSUE_MARK[issue.severity]} {issue.message}
+                  </Text>
+                </Box>
+              ))}
+
+              <Box marginTop={1} flexShrink={0}>
+                <Text bold>
+                  Manifest
+                  {selectedSkill.resources === DYNAMIC_RESOURCES
+                    ? ': "dynamic" — no files advertised'
+                    : ` (${manifest.length})`}
+                </Text>
+              </Box>
+              {manifest.map((resource, idx) => {
+                const fileReport = activeReport?.files.find(
+                  (file) => file.uri === resource.uri,
+                );
+                return (
+                  <Box
+                    key={`file-${idx}`}
+                    paddingLeft={2}
+                    flexShrink={0}
+                    flexDirection="column"
+                  >
+                    <Text>
+                      {fileReport ? (
+                        <Text color={FILE_COLOR[fileReport.status] ?? "white"}>
+                          {FILE_MARK[fileReport.status] ?? "?"}{" "}
+                        </Text>
+                      ) : (
+                        <Text dimColor>· </Text>
+                      )}
+                      {fileNameOf(resource.uri)}
+                      {resource.size !== undefined ? (
+                        <Text dimColor> ({resource.size} B)</Text>
+                      ) : null}
+                    </Text>
+                    {fileReport?.reason && (
+                      <Box paddingLeft={4} flexShrink={0}>
+                        <Text color="red">{fileReport.reason}</Text>
+                      </Box>
+                    )}
+                  </Box>
+                );
+              })}
+
+              {activeReport && activeReport.frontmatter.length > 0 && (
+                <>
+                  <Box marginTop={1} flexShrink={0}>
+                    <Text bold>Frontmatter cross-check:</Text>
+                  </Box>
+                  {activeReport.frontmatter.map((issue, idx) => (
+                    <Box key={`fm-${idx}`} paddingLeft={2} flexShrink={0}>
+                      <Text color={ISSUE_COLOR[issue.severity]}>
+                        {ISSUE_MARK[issue.severity]} {issue.message}
+                      </Text>
+                    </Box>
+                  ))}
+                </>
+              )}
+
+              {error && (
+                <Box marginTop={1} flexShrink={0}>
+                  <Text color="red">{error}</Text>
+                </Box>
+              )}
+
+              <Box marginTop={1} flexShrink={0}>
+                <Text dimColor>
+                  {verifying
+                    ? "[Verifying…]"
+                    : activeReport
+                      ? activeReport.ok
+                        ? "[Verified — Enter to re-verify]"
+                        : "[Verification FAILED — Enter to re-verify]"
+                      : "[Enter to verify digests and frontmatter]"}
+                </Text>
+              </Box>
+            </ScrollView>
+
+            {focusedPane === "details" && (
+              <Box
+                flexShrink={0}
+                height={1}
+                justifyContent="center"
+                backgroundColor="gray"
+              >
+                <Text bold color="white">
+                  ↑/↓ to scroll, Enter to verify
+                </Text>
+              </Box>
+            )}
+          </>
+        ) : (
+          <Box paddingY={1} flexShrink={0}>
+            <Text dimColor>Select a skill to view details</Text>
+          </Box>
+        )}
+      </Box>
+    </Box>
+  );
+}

clients/tui/src/components/Tabs.tsx

@@ -30,6 +30,7 @@ interface TabsProps {
     auth?: number;
     resources?: number;
     prompts?: number;
+    skills?: number;
     tools?: number;
     messages?: number;
     requests?: number;
@@ -39,6 +40,13 @@ interface TabsProps {
   showAuth?: boolean;
   showLogging?: boolean;
   showRequests?: boolean;
+  /**
+   * The Skills tab is shown only when the connected server declared the
+   * SEP-2640 Skills extension — unlike Auth/Logging/Requests, which key off the
+   * transport, this one keys off a *server* declaration, so it can only be
+   * known after connecting.
+   */
+  showSkills?: boolean;
 }
 
 export function Tabs({
@@ -49,6 +57,7 @@ export function Tabs({
   showAuth = true,
   showLogging = true,
   showRequests = false,
+  showSkills = false,
 }: TabsProps) {
   let visibleTabs = tabs;
   if (!showAuth) {
@@ -60,6 +69,9 @@ export function Tabs({
   if (!showRequests) {
     visibleTabs = visibleTabs.filter((tab) => tab.id !== "requests");
   }
+  if (!showSkills) {
+    visibleTabs = visibleTabs.filter((tab) => tab.id !== "skills");
+  }
 
   return (
     <Box

clients/tui/src/components/tabsConfig.ts

@@ -3,6 +3,7 @@ export type TabType =
   | "auth"
   | "resources"
   | "prompts"
+  | "skills"
   | "tools"
   | "messages"
   | "requests"
@@ -23,6 +24,11 @@ export const tabs: { id: TabType; label: string; accelerator: string }[] = [
   { id: "auth", label: "Auth", accelerator: "a" },
   { id: "resources", label: "Resources", accelerator: "r" },
   { id: "prompts", label: "Prompts", accelerator: "m" },
+  // `k`, not `s`: `s` is not in conflict today, but the accelerator has to
+  // appear in the label and be unique, and `S`kills against a future `S`ampling
+  // or `S`ettings is the collision this rule anticipates. `k` is the earliest
+  // remaining letter in the word after `s` and `i` (Info).
+  { id: "skills", label: "Skills", accelerator: "k" },
   { id: "tools", label: "Tools", accelerator: "t" },
   { id: "messages", label: "Protocol", accelerator: "p" },
   { id: "requests", label: "Network", accelerator: "n" },

clients/tui/tsup.config.ts

@@ -149,6 +149,13 @@ export default defineConfig({
     "ajv",
     "atomically",
     "zod",
+    // Newly on `core/`'s runtime import graph as of #2248:
+    // `core/mcp/skillFile.ts` parses a served SKILL.md's YAML frontmatter to
+    // check it against the entry the listing advertised (SEP-2640). Already a
+    // root `dependency` — it was reached from `test-servers/src` — so this
+    // adds no package, but a root-declared dependency `core/` imports must be
+    // named in all three `external` lists or tsup inlines it here.
+    "yaml",
     // Reached through `core/` but not through this client's own code today.
     // AGENTS.md requires every root-declared package `core/` imports at runtime
     // in ALL three lists regardless, because which client reaches one is a