npm - @uniqbit/mate-core - Versions diffs - 0.15.5 → 0.16.0-canary.1 - Mend

@uniqbit/mate-core 0.15.5 → 0.16.0-canary.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (186) hide show

package/claude-plugin/.claude-plugin/plugin.json +2 -2
package/claude-plugin/hooks/hooks.json +3 -6
package/claude-plugin/hooks/session-guidance.mjs +8 -0
package/claude-plugin/hooks/ts-loader.mjs +19 -0
package/package.json +7 -5
package/src/cli/commands/artifact/artifact.ts +19 -3
package/src/cli/commands/artifact/finish/command.ts +183 -57
package/src/cli/commands/artifact/finish/engine.ts +80 -91
package/src/cli/commands/artifact/finish/finisher.ts +26 -33
package/src/cli/commands/artifact/finish/git.ts +34 -23
package/src/cli/commands/artifact/finish/index.ts +9 -3
package/src/cli/commands/artifact/finish/openspec.ts +225 -97
package/src/cli/commands/artifact/pending/command.ts +175 -0
package/src/cli/commands/artifact/pending/discovery.ts +249 -0
package/src/cli/commands/artifact/pending/index.ts +17 -0
package/src/cli/commands/cap/index-cmd.ts +9 -1
package/src/cli/commands/cap/index.ts +2 -6
package/src/cli/commands/cap/tokensave.ts +4 -4
package/src/cli/commands/companion/companion.ts +5 -1
package/src/cli/commands/companion/link.ts +2 -2
package/src/cli/commands/companion/sync.ts +92 -0
package/src/cli/commands/doctor.ts +0 -3
package/src/cli/commands/launch/shared.ts +23 -5
package/src/cli/commands/report/collector.ts +72 -78
package/src/cli/commands/report/contract.ts +40 -1
package/src/cli/commands/report/highlight.ts +27 -0
package/src/cli/commands/report/index.ts +11 -18
package/src/cli/commands/report/renderer.ts +199 -2
package/src/cli/commands/report/types.ts +26 -1
package/src/cli/commands/shared/companion-selection.ts +107 -10
package/src/cli/commands/studio/areas.ts +68 -0
package/src/cli/commands/studio/index.ts +69 -0
package/src/cli/commands/studio/inventory.ts +55 -0
package/src/cli/commands/studio/mate-inventory.ts +43 -0
package/src/cli/commands/studio/openspec-cli.ts +198 -0
package/src/cli/commands/studio/payload.ts +184 -0
package/src/cli/commands/studio/routes.ts +2 -0
package/src/cli/commands/studio/selection.ts +61 -0
package/src/cli/commands/studio/server.ts +201 -0
package/src/cli/commands/studio/snapshot.ts +63 -0
package/src/cli/commands/studio/topology.ts +199 -0
package/src/cli/commands/studio/views/client.ts +197 -0
package/src/cli/commands/studio/views/companion-picker.tsx +91 -0
package/src/cli/commands/studio/views/companion-selector.tsx +90 -0
package/src/cli/commands/studio/views/dashboard/changes.tsx +107 -0
package/src/cli/commands/studio/views/dashboard/index.tsx +19 -0
package/src/cli/commands/studio/views/document.tsx +256 -0
package/src/cli/commands/studio/views/error.tsx +20 -0
package/src/cli/commands/studio/views/model.ts +34 -0
package/src/cli/commands/studio/views/pairings.tsx +38 -0
package/src/cli/commands/studio/views/skills/index.tsx +87 -0
package/src/cli/commands/studio/views/specs/index.tsx +101 -0
package/src/cli/commands/studio/views/styles.ts +389 -0
package/src/cli/commands/studio/views/warnings.tsx +21 -0
package/src/cli/commands/studio/views/workflow/index.tsx +21 -0
package/src/cli/commands/studio/views/workflow/steps.ts +329 -0
package/src/cli/commands/studio/views/workflow/transcript.tsx +190 -0
package/src/cli/commands/unwrap.ts +70 -0
package/src/cli/commands/wrap.ts +164 -0
package/src/cli/main.ts +68 -19
package/src/cli/parse-flags.ts +36 -11
package/src/cli/usage.ts +12 -3
package/src/framework.ts +1 -7
package/src/hooks/session-banner.ts +64 -11
package/src/hooks/session-guidance.ts +40 -0
package/src/hooks/validate-artifact-path.ts +108 -35
package/src/lib/fs-utils.ts +9 -0
package/src/lib/install.ts +33 -0
package/src/lib/orchestrator/adapters/base.ts +14 -125
package/src/lib/orchestrator/adapters/claude.ts +0 -11
package/src/lib/orchestrator/adapters/opencode.ts +2 -32
package/src/lib/orchestrator/companion-git-sync.ts +94 -84
package/src/lib/orchestrator/config-store.ts +2 -21
package/src/lib/orchestrator/editor.ts +12 -22
package/src/lib/orchestrator/framework-context.ts +17 -6
package/src/lib/orchestrator/global-config-store.ts +1 -1
package/src/lib/orchestrator/launcher.ts +97 -7
package/src/lib/orchestrator/opencode-guidance.ts +4 -56
package/src/lib/orchestrator/projection-claude-entry.ts +198 -0
package/src/lib/orchestrator/projection-claude-skills.ts +120 -0
package/src/lib/orchestrator/projection-companion-link.ts +62 -0
package/src/lib/orchestrator/projection-entries.ts +377 -0
package/src/lib/orchestrator/projection-record.ts +56 -0
package/src/lib/orchestrator/projection-runtime-documents.ts +424 -0
package/src/lib/orchestrator/projection-types.ts +169 -0
package/src/lib/orchestrator/repo-local-registry.ts +37 -133
package/src/lib/orchestrator/repo-local-store.ts +96 -0
package/src/lib/orchestrator/setup-compatibilities.ts +1 -9
package/src/lib/orchestrator/types.ts +1 -0
package/src/lib/orchestrator/working-repo-projection.ts +366 -0
package/src/lib/orchestrator/workspace-inventory.ts +1 -1
package/src/lib/package-paths.ts +11 -1
package/src/lib/public-npm.ts +2 -1
package/src/lib/update-checker.ts +15 -9
package/src/opencode/companion-hooks.ts +89 -245
package/src/opencode/companion-policy.ts +35 -10
package/src/opencode/index.ts +1 -0
package/src/opencode/projected-guidance.ts +56 -0
package/src/opencode/tui.tsx +13 -4
package/src/playbooks/companion-guidance.ts +32 -116
package/src/plugins.ts +0 -1
package/src/runtime/companion-git-state.ts +156 -0
package/src/runtime/companion-git.ts +203 -0
package/src/runtime/companion-guidance.ts +222 -0
package/src/runtime/companion-sync.ts +298 -0
package/src/runtime/env-names.ts +30 -0
package/src/runtime/env.ts +67 -35
package/src/runtime/framework.ts +10 -0
package/src/runtime/freshness.ts +58 -0
package/src/runtime/index.ts +104 -0
package/src/runtime/install.ts +30 -0
package/src/runtime/policy.ts +66 -0
package/src/runtime/projected-guidance.ts +45 -0
package/src/runtime/projection.ts +224 -0
package/src/runtime/repo-local.ts +64 -0
package/src/templates/capabilities/openspec-cap/mate-minimal/schema.yaml +56 -0
package/src/templates/capabilities/openspec-cap/mate-minimal/templates/spec.md +48 -0
package/src/templates/capabilities/openspec-cap/mate-minimal/templates/tasks.md +22 -0
package/src/templates/capabilities/openspec-cap/mate-v1/schema.yaml +31 -90
package/src/templates/capabilities/openspec-cap/mate-v1/templates/design.md +3 -0
package/src/templates/capabilities/openspec-cap/mate-v1/templates/explore-brief.md +6 -6
package/src/templates/capabilities/openspec-cap/mate-v1/templates/spec.md +3 -5
package/src/templates/capabilities/openspec-cap/mate-v1/templates/tasks.md +3 -0
package/src/templates/capabilities/openspec-cap/openspec-conventions.yaml +30 -0
package/src/templates/capabilities/react-doctor/claude/hooks/react-doctor.sh +2 -2
package/src/templates/mate-skills/agents/mate-artifact-publish/SKILL.md +185 -0
package/src/templates/mate-skills/agents/mate-artifact-publish/references/openspec.md +227 -0
package/src/templates/mate-skills/agents/mate-domain-modeling/SKILL.md +68 -0
package/src/templates/mate-skills/agents/mate-domain-modeling/references/ADR-FORMAT.md +9 -0
package/src/templates/mate-skills/agents/mate-domain-modeling/references/CONTEXT-FORMAT.md +18 -0
package/src/templates/mate-skills/agents/mate-grill-me/SKILL.md +14 -0
package/src/templates/mate-skills/agents/mate-grill-with-docs/SKILL.md +29 -0
package/src/templates/mate-skills/agents/mate-grilling/SKILL.md +49 -0
package/src/templates/mate-skills/agents/mate-interview-me/SKILL.md +156 -0
package/src/templates/{capabilities/openspec-cap/mate-skills → mate-skills}/agents/mate-openspec-backfill/SKILL.md +4 -2
package/src/templates/mate-skills/agents/mate-show-me/SKILL.md +139 -0
package/src/templates/mate-skills/agents/mate-simplify-code/SKILL.md +503 -0
package/src/templates/mate-skills/claude/mate-artifact-publish/SKILL.md +185 -0
package/src/templates/mate-skills/claude/mate-artifact-publish/references/openspec.md +227 -0
package/src/templates/mate-skills/claude/mate-domain-modeling/SKILL.md +68 -0
package/src/templates/mate-skills/claude/mate-domain-modeling/references/ADR-FORMAT.md +9 -0
package/src/templates/mate-skills/claude/mate-domain-modeling/references/CONTEXT-FORMAT.md +18 -0
package/src/templates/mate-skills/claude/mate-grill-me/SKILL.md +14 -0
package/src/templates/mate-skills/claude/mate-grill-with-docs/SKILL.md +29 -0
package/src/templates/mate-skills/claude/mate-grilling/SKILL.md +49 -0
package/src/templates/mate-skills/claude/mate-interview-me/SKILL.md +156 -0
package/src/templates/mate-skills/claude/mate-openspec-backfill/SKILL.md +67 -0
package/src/templates/mate-skills/claude/mate-show-me/SKILL.md +139 -0
package/src/templates/mate-skills/claude/mate-simplify-code/SKILL.md +503 -0
package/src/templates/report-assets/README.md +32 -0
package/src/templates/report-assets/mermaid.LICENSE +21 -0
package/src/templates/report-assets/mermaid.min.js +4376 -0
package/src/templates/root/TEMPLATE_CLAUDE.md +1 -9
package/src/tools/setup/__snapshots__/runtime-surface-golden.test.ts.snap +1476 -197
package/src/tools/setup/capabilities/graphify.ts +16 -7
package/src/tools/setup/capabilities/openspec.ts +63 -56
package/src/tools/setup/capabilities/tokensave.ts +116 -2
package/src/tools/setup/engine.ts +34 -6
package/src/tools/setup/mate.ts +42 -13
package/src/tools/setup/plugin.ts +9 -0
package/src/tools/setup/plugins/guidance.ts +11 -1
package/src/tools/setup/providers/claude-format.ts +49 -4
package/src/tools/setup/providers/claude-plugin-hooks.ts +117 -0
package/src/tools/setup/providers/claude.ts +55 -220
package/src/tools/setup/providers/opencode.ts +41 -14
package/src/tools/setup/runtime-documents.ts +174 -0
package/src/tools/setup/surface-target.ts +50 -0
package/src/tools/setup/working-repo-cleanup.ts +33 -26
package/src/tools/setup/working-repo-local-state.ts +21 -1
package/src/tools/setup.ts +25 -3
package/wrappers/bin/graphify +57 -8
package/wrappers/bin/openspec +50 -3
package/claude-plugin/hooks/artifact-finish-nudge.mjs +0 -8
package/src/cli/commands/cap/headroom.ts +0 -52
package/src/cli/commands/workspace/list.ts +0 -25
package/src/cli/commands/workspace/materialize.ts +0 -46
package/src/cli/commands/workspace/workspace.ts +0 -22
package/src/hooks/artifact-finish-nudge.ts +0 -244
package/src/lib/orchestrator/headroom/proxy.ts +0 -116
package/src/lib/orchestrator/workspace-materialize.ts +0 -80
package/src/templates/capabilities/openspec-cap/mate-skills/agents/mate-artifact-finish/SKILL.md +0 -51
package/src/templates/capabilities/openspec-cap/mate-skills/agents/mate-artifact-finish/references/openspec.md +0 -134
package/src/templates/capabilities/openspec-cap/mate-skills/claude/mate-artifact-finish/SKILL.md +0 -58
package/src/templates/capabilities/openspec-cap/mate-skills/claude/mate-artifact-finish/references/openspec.md +0 -139
package/src/tools/setup/capabilities/headroom.ts +0 -57
/package/src/cli/commands/{workspace → companion}/open.ts +0 -0

package/src/cli/commands/studio/views/dashboard/index.tsx ADDED Viewed

@@ -0,0 +1,19 @@
+/** @jsxImportSource hono/jsx */
+import type { StudioCompanionPayload } from "../../payload";
+import { Warnings } from "../warnings";
+import { Changes } from "./changes";
+interface DashboardProps {
+  payload: StudioCompanionPayload;
+}
+/** Changes only: specs and skills have their own views. */
+export function Dashboard({ payload }: DashboardProps) {
+  return (
+    <>
+      <Changes changes={payload.changes} />
+      <Warnings warnings={payload.warnings} />
+    </>
+  );
+}

package/src/cli/commands/studio/views/document.tsx ADDED Viewed

@@ -0,0 +1,256 @@
+/** @jsxImportSource hono/jsx */
+import { companionDigest, REFRESH_PARAM, type StudioSelection } from "../selection";
+import { STUDIO_CLIENT_SCRIPT, STUDIO_PREPAINT_SCRIPT } from "./client";
+import { CompanionPicker } from "./companion-picker";
+import { CompanionSelector } from "./companion-selector";
+import { Dashboard } from "./dashboard/index";
+import { CompanionError } from "./error";
+import { formatCollectedAt, type StudioPage } from "./model";
+import { Specs } from "./specs/index";
+import { STUDIO_STYLES } from "./styles";
+import { Skills } from "./skills/index";
+import { Workflow } from "./workflow/index";
+const STUDIO_TITLE = "Mate Studio";
+const VIEW_DETAILS = {
+  dashboard: {
+    eyebrow: "Companion lookup",
+    title: "Overview",
+  },
+  specs: {
+    eyebrow: "Companion lookup",
+    title: "Specs",
+  },
+  workflow: {
+    eyebrow: "Companion lookup",
+    title: "Workflow",
+  },
+  skills: {
+    eyebrow: "Agent guidance",
+    title: "Skills",
+  },
+} as const;
+/**
+ * `<style>` and `<script>` are HTML raw-text elements: a character reference
+ * inside one is not decoded, so escaped content would be broken CSS and broken
+ * JavaScript. They carry authored source only — never a payload value — and are
+ * emitted as literal markup here, which is why no view ever reaches for an
+ * escape hatch around the renderer's escaping.
+ */
+export function renderStudioDocument(page: StudioPage): string {
+  return `<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>${STUDIO_TITLE}</title>
+<style>${STUDIO_STYLES}</style>
+<script>${STUDIO_PREPAINT_SCRIPT}</script>
+</head>
+<body>${String(<StudioShell page={page} />)}
+<script>${STUDIO_CLIENT_SCRIPT}</script>
+</body>
+</html>
+`;
+}
+/**
+ * `data-companion` names the resolved companion only: the browser stores what
+ * it can be served again, never a digest the server just failed to resolve.
+ */
+function StudioShell({ page }: { page: StudioPage }) {
+  return (
+    <>
+      <div
+        className="shell"
+        data-companion={page.companion ? companionDigest(page.companion.path) : undefined}
+      >
+        <Sidebar page={page} />
+        <main className="main">
+          {page.companion ? <PageHeader page={page} /> : null}
+          <Content page={page} />
+        </main>
+      </div>
+      <div className="toast" id="studio-toast" data-shown="false" />
+    </>
+  );
+}
+function Content({ page }: { page: StudioPage }) {
+  if (!page.companion) {
+    return <CompanionPicker inventory={page.inventory} selection={page.selection} />;
+  }
+  if (page.error) {
+    return <CompanionError companionPath={page.error.companionPath} reason={page.error.reason} />;
+  }
+  if (!page.payload) {
+    return (
+      <section className="panel">
+        <p className="empty">No state collected for this companion.</p>
+      </section>
+    );
+  }
+  if (page.selection.view === "workflow") {
+    return <Workflow payload={page.payload} />;
+  }
+  if (page.selection.view === "specs") return <Specs payload={page.payload} />;
+  if (page.selection.view === "skills") return <Skills skills={page.payload.skillInventory} />;
+  return <Dashboard payload={page.payload} />;
+}
+function Sidebar({ page }: { page: StudioPage }) {
+  return (
+    <aside className="rail studio-sidebar" id="studio-rail">
+      <div className="sidebar-brand">
+        <span className="sidebar-brand-mark">M</span>
+        <div className="sidebar-brand-copy">
+          <strong>{STUDIO_TITLE}</strong>
+          <span>Developer lookup</span>
+        </div>
+      </div>
+      <CompanionSelector inventory={page.inventory} selection={page.selection} />
+      <ViewNav selection={page.selection} />
+      <Metrics page={page} />
+      <Footer page={page} />
+    </aside>
+  );
+}
+function PageHeader({ page }: { page: StudioPage }) {
+  if (!page.companion) return null;
+  const details = VIEW_DETAILS[page.selection.view];
+  return (
+    <header className="page-header">
+      <div className="page-heading">
+        <p className="page-eyebrow">{details.eyebrow}</p>
+        <h1>{details.title}</h1>
+      </div>
+      <div className="page-context">
+        <span className="page-context-label">Companion Repository</span>
+        <code>{page.companion.path}</code>
+        <span className="snapshot-status">
+          <span className="snapshot-dot" aria-hidden="true" />
+          {page.collectedAt === null
+            ? "No snapshot"
+            : `Snapshot ${formatCollectedAt(page.collectedAt)}`}
+        </span>
+      </div>
+    </header>
+  );
+}
+/**
+ * Submit buttons, so switching a view is a navigation to the URL naming it and
+ * the browser's history moves between rendered states.
+ */
+function ViewNav({ selection }: { selection: StudioSelection }) {
+  return (
+    <nav className="sidebar-nav" aria-label="Studio views">
+      <span className="sidebar-label">Views</span>
+      <form method="get" action="/">
+        <SelectionFields selection={selection} omit="view" />
+        <div className="sidebar-nav-list">
+          <button
+            type="submit"
+            name="view"
+            value="dashboard"
+            aria-pressed={selection.view === "dashboard"}
+          >
+            <span>Overview</span>
+          </button>
+          <button type="submit" name="view" value="specs" aria-pressed={selection.view === "specs"}>
+            <span>Specs</span>
+          </button>
+          <button
+            type="submit"
+            name="view"
+            value="workflow"
+            aria-pressed={selection.view === "workflow"}
+          >
+            <span>Workflow</span>
+          </button>
+          <button
+            type="submit"
+            name="view"
+            value="skills"
+            aria-pressed={selection.view === "skills"}
+          >
+            <span>Skills</span>
+          </button>
+        </div>
+      </form>
+    </nav>
+  );
+}
+function Metrics({ page }: { page: StudioPage }) {
+  const payload = page.payload;
+  if (!payload) return null;
+  const metrics: [string, number][] = [
+    ["changes", payload.changes.length],
+    ["done", payload.changes.filter((change) => change.status === "complete").length],
+    ["specs", payload.specs.length],
+  ];
+  return (
+    <div className="sidebar-metrics" id="studio-stats">
+      {metrics.map(([label, value]) => (
+        <div key={label} className="sidebar-metric">
+          <strong>{value}</strong>
+          <span>{label}</span>
+        </div>
+      ))}
+    </div>
+  );
+}
+/**
+ * The refresh control is the only thing that collects again, so it is the only
+ * control that names the refresh parameter.
+ */
+function Footer({ page }: { page: StudioPage }) {
+  return (
+    <div className="sidebar-footer">
+      <div className="sidebar-footer-row">
+        <span className="muted">
+          {page.collectedAt === null
+            ? "no state collected"
+            : `state as of ${formatCollectedAt(page.collectedAt)}`}
+        </span>
+        <form method="get" action="/">
+          <SelectionFields selection={page.selection} />
+          <input type="hidden" name={REFRESH_PARAM} value="1" />
+          <button type="submit">Refresh</button>
+        </form>
+      </div>
+      <button id="studio-theme" type="button" data-theme-state="system">
+        Theme: system
+      </button>
+    </div>
+  );
+}
+/** Carries the parts of the selection a control is not itself changing. */
+function SelectionFields({
+  selection,
+  omit,
+}: {
+  selection: StudioSelection;
+  omit?: keyof StudioSelection;
+}) {
+  return (
+    <>
+      {selection.companionDigest && omit !== "companionDigest" ? (
+        <input type="hidden" name="companion" value={selection.companionDigest} />
+      ) : null}
+      {selection.view !== "dashboard" && omit !== "view" ? (
+        <input type="hidden" name="view" value={selection.view} />
+      ) : null}
+    </>
+  );
+}

package/src/cli/commands/studio/views/error.tsx ADDED Viewed

@@ -0,0 +1,20 @@
+/** @jsxImportSource hono/jsx */
+interface CompanionErrorProps {
+  companionPath: string;
+  reason: string;
+}
+/**
+ * A companion that could not be read costs its content, never the page: the
+ * selector stays rendered around this so another companion can be reached.
+ */
+export function CompanionError({ companionPath, reason }: CompanionErrorProps) {
+  return (
+    <section className="panel error">
+      <h3>Could not read this companion</h3>
+      <p className="mono">{companionPath}</p>
+      <p>{reason}</p>
+    </section>
+  );
+}

package/src/cli/commands/studio/views/model.ts ADDED Viewed

@@ -0,0 +1,34 @@
+import type { StudioInventory, StudioInventoryCompanion } from "../inventory";
+import type { StudioCompanionPayload } from "../payload";
+import type { StudioSelection } from "../selection";
+/**
+ * Everything one rendered document is derived from. `payload` and `error` are
+ * mutually exclusive and both are absent until a companion is named, and
+ * `collectedAt` is the moment the served snapshot was collected — not the
+ * moment of this request.
+ */
+export interface StudioPage {
+  inventory: StudioInventory;
+  selection: StudioSelection;
+  companion: StudioInventoryCompanion | null;
+  payload: StudioCompanionPayload | null;
+  error: { companionPath: string; reason: string } | null;
+  collectedAt: number | null;
+}
+/**
+ * Local wall-clock time of a snapshot. Studio serves the browser that runs on
+ * the same machine, so the server's local time is the reader's.
+ */
+export function formatCollectedAt(collectedAt: number): string {
+  const at = new Date(collectedAt);
+  return [at.getHours(), at.getMinutes(), at.getSeconds()]
+    .map((part) => String(part).padStart(2, "0"))
+    .join(":");
+}
+export function healthNote(companion: StudioInventoryCompanion): string {
+  if (companion.health === "ready") return "";
+  return companion.diagnostic ? `${companion.health} — ${companion.diagnostic}` : companion.health;
+}

package/src/cli/commands/studio/views/pairings.tsx ADDED Viewed

@@ -0,0 +1,38 @@
+/** @jsxImportSource hono/jsx */
+import type { StudioInventoryCompanion } from "../inventory";
+interface PairingsProps {
+  companion: StudioInventoryCompanion | null;
+}
+/**
+ * Context, never a selection: everything Studio serves is companion-scoped, so
+ * a Working Repository is listed and never chosen.
+ */
+export function Pairings({ companion }: PairingsProps) {
+  const pairings = companion?.pairings ?? [];
+  return (
+    <div className="sidebar-pairings">
+      <span className="sidebar-label">Working repositories</span>
+      {pairings.length === 0 ? (
+        <p className="empty">no linked working repository</p>
+      ) : (
+        <ul className="plain pairings">
+          {pairings.map((pairing) => (
+            <li key={pairing.repositoryPath} data-repository={pairing.repositoryPath}>
+              <span className="mono">{pairing.repositoryId}</span>
+              {pairing.ambiguous ? <span className="chip">also paired elsewhere</span> : null}
+              {pairing.health === "ready" ? null : (
+                <span className="chip chip-invalid">{pairing.health}</span>
+              )}
+              <br />
+              <span className="muted">{pairing.repositoryPath}</span>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}

package/src/cli/commands/studio/views/skills/index.tsx ADDED Viewed

@@ -0,0 +1,87 @@
+/** @jsxImportSource hono/jsx */
+import type { StudioSkillInventory } from "../../mate-inventory";
+const PROFILES = [
+  { id: "claude", label: "Claude", description: "Skills available to Claude agents." },
+  { id: "opencode", label: "OpenCode", description: "Skills available to OpenCode." },
+  { id: "agents", label: "Agents", description: "Shared skills available to all agents." },
+] as const;
+interface SkillsProps {
+  skills?: StudioSkillInventory;
+}
+/** Lists the skills from each runtime tree without merging away runtime-specific entries. */
+export function Skills({ skills }: SkillsProps) {
+  const inventory = skills ?? { claude: [], opencode: [], agents: [] };
+  const total = inventory.claude.length + inventory.opencode.length + inventory.agents.length;
+  return (
+    <section className="panel skills-panel">
+      <div className="section-header">
+        <div>
+          <h3>Agent Skills</h3>
+          <p className="section-note">Every skill installed in this Companion Repository.</p>
+        </div>
+        <span className="section-count">
+          {total} {total === 1 ? "skill" : "skills"}
+        </span>
+      </div>
+      <div className="skills-tabs" data-skills-root>
+        <div className="skills-tab-list" role="tablist" aria-label="Skill source">
+          {PROFILES.map((profile, index) => {
+            const active = index === 0;
+            const names = inventory[profile.id];
+            return (
+              <button
+                key={profile.id}
+                type="button"
+                role="tab"
+                id={`skills-tab-${profile.id}`}
+                aria-selected={active}
+                aria-controls={`skills-panel-${profile.id}`}
+                data-skill-profile={profile.id}
+              >
+                <strong>{profile.label}</strong>
+                <span>{names.length} skills</span>
+              </button>
+            );
+          })}
+        </div>
+        <div className="skills-panels">
+          {PROFILES.map((profile, index) => {
+            const active = index === 0;
+            const names = inventory[profile.id];
+            return (
+              <div
+                key={profile.id}
+                id={`skills-panel-${profile.id}`}
+                role="tabpanel"
+                aria-labelledby={`skills-tab-${profile.id}`}
+                aria-hidden={!active}
+                data-skill-panel={profile.id}
+                data-active={active}
+                tabIndex={0}
+              >
+                <p className="skills-panel-description">{profile.description}</p>
+                {names.length === 0 ? (
+                  <p className="empty">No {profile.label} skills in this companion.</p>
+                ) : (
+                  <div className="skills-grid">
+                    {names.map((name) => (
+                      <div key={name} className="skill-card">
+                        <code>{name}</code>
+                        <span>/{name}</span>
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </section>
+  );
+}

package/src/cli/commands/studio/views/specs/index.tsx ADDED Viewed

@@ -0,0 +1,101 @@
+/** @jsxImportSource hono/jsx */
+import type { StudioCompanionPayload, StudioSpec } from "../../payload";
+import { Warnings } from "../warnings";
+const UNASSIGNED_AREA = "unassigned";
+/** A spec binds one Area or several, so it appears under each of them. */
+export function groupSpecsByArea(specs: StudioSpec[]): [string, StudioSpec[]][] {
+  const groups = new Map<string, StudioSpec[]>();
+  for (const spec of specs) {
+    const areas = spec.areas.length > 0 ? spec.areas : [UNASSIGNED_AREA];
+    for (const area of areas) {
+      const existing = groups.get(area);
+      if (existing) existing.push(spec);
+      else groups.set(area, [spec]);
+    }
+  }
+  return [...groups.entries()].toSorted((left, right) => left[0].localeCompare(right[0]));
+}
+function specStatus(spec: StudioSpec): { label: string; invalid: boolean } {
+  if (spec.valid === false) return { label: `${spec.issueCount ?? 0} issues`, invalid: true };
+  if (spec.valid === true) return { label: "valid", invalid: false };
+  return { label: "unvalidated", invalid: false };
+}
+interface SpecsProps {
+  payload: StudioCompanionPayload;
+}
+/** Its own view: an Area map is read on its own, not alongside the changes. */
+export function Specs({ payload }: SpecsProps) {
+  return (
+    <>
+      <SpecsByArea specs={payload.specs} />
+      <Warnings warnings={payload.warnings} />
+    </>
+  );
+}
+function SpecsByArea({ specs }: { specs: StudioSpec[] }) {
+  const groups = groupSpecsByArea(specs);
+  return (
+    <section className="panel">
+      <div className="section-header">
+        <div>
+          <h3>Specs by Area</h3>
+          <p className="section-note">Capabilities grouped by the Areas they serve.</p>
+        </div>
+        <span className="section-count">
+          {specs.length} {specs.length === 1 ? "spec" : "specs"}
+        </span>
+      </div>
+      {groups.length === 0 ? (
+        <p className="empty">No specs in this companion.</p>
+      ) : (
+        <div className="specs-area-grid">
+          {groups.map(([area, areaSpecs], index) => (
+            <section key={area} className="specs-area-card" aria-label={`Area ${area}`}>
+              <div className="specs-area-card-head">
+                <div className="specs-area-name">
+                  <span className="specs-area-number">{String(index + 1).padStart(2, "0")}</span>
+                  <h4>{area}</h4>
+                </div>
+                <span className="specs-area-count">{`${areaSpecs.length} specs`}</span>
+              </div>
+              <div className="specs-card-list">
+                {areaSpecs.map((spec) => {
+                  const status = specStatus(spec);
+                  return (
+                    <div key={spec.capability} className="spec-card-row">
+                      <div>
+                        <strong>{spec.capability}</strong>
+                        <div className="spec-card-meta">
+                          <span>
+                            {spec.requirementCount === undefined
+                              ? "requirements unknown"
+                              : `${spec.requirementCount} requirements`}
+                          </span>
+                        </div>
+                      </div>
+                      <span
+                        className={
+                          status.invalid ? "spec-status spec-status-invalid" : "spec-status"
+                        }
+                      >
+                        {status.label}
+                      </span>
+                    </div>
+                  );
+                })}
+              </div>
+            </section>
+          ))}
+        </div>
+      )}
+    </section>
+  );
+}