feat: refactor the Skills detail pane into collapsible sections (#2263)

The pane was one scrolling column: SKILL.md sat below the manifest behind a
"View SKILL.md" button, the frontmatter pushed it further out of view, and
nothing could be put away.

It is now a flex column that does not scroll as a whole. Conformance,
Resources, Frontmatter and Skill Resource are four collapsible sections of one
`disclosure` accordion, and the file viewer claims the remaining height and
scrolls internally.

The viewer's flex-basis is 0, not auto, and that is load-bearing: `auto` makes
an item's basis its content height, and a rendered document is ~1,795px for the
data-analysis fixture. That basis joined the sum the container distributes,
over-constraining the column so the shrink factors crushed the siblings —
Conformance to a 2px panel, Resources to zero — with their contents spilling
over the headers below. Collapsing the viewer removed the giant basis, so the
symptom appeared on collapse-then-reopen. Open sections also carry a `mih`
floor, since the disclosure CSS sets `min-height: 0` on an active item.

Frontmatter now follows the displayed file rather than the selected skill.
Both halves come from one `splitSkillFile` call, so the section and the viewer
cannot disagree, and a file with no frontmatter renders no section at all.

Also: SKILL.md loads on selection (a `resources/read` is not a load under
SEP-2640), the manifest highlights on hover with each URI a button that swaps
the viewed file, both whole-skill actions moved to the pane header, and the
Conformance badge goes yellow for a warnings-only entry instead of green.

Flat CSS properties moved out of call sites into theme variants (ThemeText
gains four; a new ThemeTable takes the manifest font size).

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

clients/web/src/theme/Table.ts

@@ -0,0 +1,14 @@
+import { Table } from "@mantine/core";
+
+export const ThemeTable = Table.extend({
+  // The Skills resource manifest (#2263). `striped`, `withTableBorder`,
+  // `highlightOnHover` and `verticalSpacing` are Mantine's own API and stay
+  // props at the call site; the font size is a flat CSS property, so it lives
+  // here rather than as an `fz` prop on the screen's `.withProps()` constant.
+  styles: (_theme, props) => {
+    if (props.variant === "manifest") {
+      return { table: { fontSize: "var(--mantine-font-size-xs)" } };
+    }
+    return {};
+  },
+});

clients/web/src/theme/Text.ts

@@ -42,6 +42,42 @@ export const ThemeText = Text.extend({
     // footer's `space-between` Group. Both are grey, single-line, and out of the
     // text-selection flow. (Superseded the fixed bottom-corner badges of #1639
     // now that the footer is a real, full-width AppShell row.)
+    // The four typographic treatments the Skills screen repeats (#2263). They
+    // live here rather than as `fw`/`size`/`c`/`ff` props on the screen's
+    // `.withProps()` constants because they are flat CSS properties, which
+    // AGENTS.md places in the theme; the constants keep only layout.
+    //
+    // `sectionHeading` labels a collapsible section; `skillTitle` names the
+    // selected skill; `monoCaption` is the dimmed monospace line used for URIs
+    // and digests; `emptyState` is the centred placeholder shown before a
+    // selection exists.
+    if (props.variant === "sectionHeading") {
+      return {
+        root: { fontWeight: 600, fontSize: "var(--mantine-font-size-sm)" },
+      };
+    }
+    if (props.variant === "skillTitle") {
+      return {
+        root: { fontWeight: 600, fontSize: "var(--mantine-font-size-lg)" },
+      };
+    }
+    if (props.variant === "monoCaption") {
+      return {
+        root: {
+          fontSize: "var(--mantine-font-size-xs)",
+          fontFamily: "var(--mantine-font-family-monospace)",
+          color: "var(--inspector-text-secondary)",
+        },
+      };
+    }
+    if (props.variant === "emptyState") {
+      return {
+        root: {
+          color: "var(--inspector-text-secondary)",
+          textAlign: "center",
+        },
+      };
+    }
     if (
       props.variant === "versionBadge" ||
       props.variant === "copyrightBadge"

clients/web/src/theme/index.ts

@@ -16,6 +16,7 @@ export { ThemePaper } from "./Paper";
 export { ThemeScrollArea, ThemeScrollAreaAutosize } from "./ScrollArea";
 export { ThemeSelect } from "./Select";
 export { ThemeSwitch } from "./Switch";
+export { ThemeTable } from "./Table";
 export { ThemeText } from "./Text";
 export { ThemeTextInput } from "./TextInput";
 export { ThemeTitle } from "./Title";

clients/web/src/theme/theme.ts

@@ -19,6 +19,7 @@ import {
   ThemeScrollAreaAutosize,
   ThemeSelect,
   ThemeSwitch,
+  ThemeTable,
   ThemeText,
   ThemeTextInput,
   ThemeTitle,
@@ -201,6 +202,7 @@ export const theme = createTheme({
     ScrollAreaAutosize: ThemeScrollAreaAutosize,
     Select: ThemeSelect,
     Switch: ThemeSwitch,
+    Table: ThemeTable,
     Text: ThemeText,
     TextInput: ThemeTextInput,
     Title: ThemeTitle,