portable-agent-layer 0.31.0 → 0.32.0

package/assets/skills/consulting-report/SKILL.md

@@ -60,10 +60,13 @@ Run with **Node**, not Bun — Playwright's `chromium.launch()` hangs under Bun
 │   ├── layout.tsx        # font wiring (Inter + Source Serif 4)
 │   ├── page.tsx          # the report's layout — edit freely
 │   └── globals.css       # design tokens via @theme + custom CSS
-├── components/           # 9 ported components — edit if you need new shapes
+├── components/           # report primitives — edit if you need new shapes
 │   ├── cover-page.tsx
+│   ├── table-of-contents.tsx
 │   ├── section.tsx
 │   ├── exhibit.tsx
+│   ├── stat-grid.tsx
+│   ├── comparison-table.tsx
 │   ├── finding-card.tsx
 │   ├── recommendation-card.tsx
 │   ├── severity-badge.tsx
@@ -83,8 +86,11 @@ Run with **Node**, not Bun — Playwright's `chromium.launch()` hangs under Bun
 ## Component Cheatsheet
 
 - `<CoverPage clientName reportTitle reportDate classification consultancyName preTitle />` — full-bleed cover
-- `<Section title>` — top-level section with bottom-rule heading
+- `<TableOfContents items={[{id, title}, …]} title?>` — linked TOC, anchors to section IDs
+- `<Section id title>` — top-level section with bottom-rule heading; `id` enables TOC links
 - `<Exhibit number title source?>` — bordered card for figures, tables, side data
+- `<StatGrid stats={[{value, label, caption?}, …]} />` — large-number grid for executive summary
+- `<ComparisonTable leftLabel rightLabel rows={[{metric, left, right}, …]} metricLabel?>` — current vs. target side-by-side
 - `<FindingCard finding={f} index={i} />` — driven by `Finding` type, includes severity badge
 - `<RecommendationCard recommendation={r} index={i} />` — driven by `Recommendation` type, includes priority badge
 - `<Callout label?>` — left-rule emphasis block (default label "Key Takeaway")

package/assets/skills/consulting-report/demo/app/globals.css

@@ -266,6 +266,121 @@ body {
   margin-top: 0.25rem;
 }
 
+/* Table of Contents */
+.toc {
+  page-break-after: always;
+  margin-bottom: 3rem;
+}
+.toc h2 {
+  font-family: var(--font-heading);
+  font-size: 1.75rem;
+  font-weight: 600;
+  color: var(--color-foreground);
+  margin-bottom: 1.5rem;
+  padding-bottom: 0.5rem;
+  border-bottom: 2px solid var(--color-primary);
+}
+.toc ol {
+  list-style: none;
+  padding-left: 0;
+  margin: 0;
+}
+.toc li {
+  margin: 0.75rem 0;
+  border-bottom: 1px dotted var(--color-border-emphasis);
+  padding-bottom: 0.5rem;
+}
+.toc a {
+  display: flex;
+  gap: 1rem;
+  align-items: baseline;
+  color: var(--color-foreground);
+  text-decoration: none;
+}
+.toc-number {
+  font-family: var(--font-sans);
+  font-weight: 600;
+  font-size: 0.875rem;
+  color: var(--color-primary);
+  width: 2rem;
+  flex-shrink: 0;
+}
+.toc-title {
+  font-family: var(--font-heading);
+  font-weight: 500;
+  font-size: 1rem;
+}
+
+/* Stat grid */
+.stat-grid {
+  display: grid;
+  gap: 1.5rem;
+  margin: 1.5rem 0;
+  padding: 1.5rem;
+  background: var(--color-background-secondary);
+  border-radius: 0.5rem;
+  border: 1px solid var(--color-border);
+  page-break-inside: avoid;
+}
+.stat {
+  text-align: left;
+}
+.stat-value {
+  font-family: var(--font-sans);
+  font-size: 2.5rem;
+  font-weight: 700;
+  color: var(--color-primary);
+  letter-spacing: -0.02em;
+  line-height: 1;
+}
+.stat-label {
+  margin-top: 0.5rem;
+  font-family: var(--font-sans);
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: var(--color-foreground);
+}
+.stat-caption {
+  margin-top: 0.25rem;
+  font-family: var(--font-body);
+  font-size: 0.8125rem;
+  color: var(--color-muted);
+}
+
+/* Comparison table */
+.comparison-table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 1.5rem 0;
+  font-family: var(--font-body);
+  font-size: 0.9375rem;
+  page-break-inside: avoid;
+}
+.comparison-table th {
+  font-family: var(--font-sans);
+  font-size: 0.7rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--color-primary);
+  padding: 0.75rem 1rem;
+  border-bottom: 2px solid var(--color-primary);
+  text-align: left;
+}
+.comparison-table td {
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid var(--color-border-subtle);
+  vertical-align: top;
+}
+.comparison-table .metric {
+  font-family: var(--font-sans);
+  font-weight: 600;
+  color: var(--color-foreground);
+}
+.comparison-table tbody tr:last-child td {
+  border-bottom: none;
+}
+
 /* Cover page */
 .cover-page {
   min-height: 100vh;

package/assets/skills/consulting-report/demo/app/page.tsx

@@ -1,13 +1,28 @@
 import { AlertTriangle, CheckCircle2, Lightbulb, Target } from "lucide-react";
 import { Callout } from "@/components/callout";
+import { ComparisonTable } from "@/components/comparison-table";
 import { CoverPage } from "@/components/cover-page";
 import { Exhibit } from "@/components/exhibit";
 import { FindingCard } from "@/components/finding-card";
 import { RecommendationCard } from "@/components/recommendation-card";
 import { Section } from "@/components/section";
+import { StatGrid } from "@/components/stat-grid";
+import { TableOfContents } from "@/components/table-of-contents";
 import { Timeline } from "@/components/timeline";
 import { reportData } from "@/lib/report-data";
 
+const sections = [
+  { id: "executive-summary", title: "Executive Summary" },
+  { id: "situation-assessment", title: "Situation Assessment" },
+  { id: "key-findings", title: "Key Findings" },
+  { id: "risk-analysis", title: "Risk Analysis" },
+  { id: "strategic-opportunity", title: "Strategic Opportunity" },
+  { id: "recommendations", title: "Strategic Recommendations" },
+  { id: "target-state", title: "Target State Vision" },
+  { id: "roadmap", title: "Implementation Roadmap" },
+  { id: "call-to-action", title: "Call to Action" },
+];
+
 export default function ReportPage() {
   const data = reportData;
 
@@ -23,29 +38,34 @@ export default function ReportPage() {
       />
 
       <div className="report-container">
-        <Section title="Executive Summary">
+        <TableOfContents items={sections} />
+
+        <Section id="executive-summary" title="Executive Summary">
           <p className="text-lg mb-6">{data.executiveSummary.context}</p>
 
-          <Exhibit number={1} title="Assessment Methodology">
-            <div className="flex items-start gap-8">
-              <div>
-                <p className="text-3xl font-bold text-primary">
-                  {data.executiveSummary.methodology.interviewCount}
-                </p>
-                <p className="text-sm text-muted">Interviews Conducted</p>
-              </div>
-              <div className="flex-1">
-                <p className="text-sm font-semibold text-foreground mb-2">
-                  Roles Interviewed:
+          <StatGrid
+            stats={[
+              {
+                value: String(data.executiveSummary.methodology.interviewCount),
+                label: "Interviews",
+                caption: "across leadership and engineering",
+              },
+              { value: "3×", label: "MTTR", caption: "vs. peer benchmark" },
+              {
+                value: "71%",
+                label: "Concentration",
+                caption: "on-call held by 3 engineers",
+              },
+            ]}
+          />
+
+          <Exhibit number={1} title="Roles Interviewed">
+            <div className="grid grid-cols-2 gap-1">
+              {data.executiveSummary.methodology.roles.map((role) => (
+                <p key={role} className="text-sm text-muted">
+                  {role}
                 </p>
-                <div className="grid grid-cols-2 gap-1">
-                  {data.executiveSummary.methodology.roles.map((role) => (
-                    <p key={role} className="text-sm text-muted">
-                      {role}
-                    </p>
-                  ))}
-                </div>
-              </div>
+              ))}
             </div>
           </Exhibit>
 
@@ -75,7 +95,7 @@ export default function ReportPage() {
           </ul>
         </Section>
 
-        <Section title="Situation Assessment">
+        <Section id="situation-assessment" title="Situation Assessment">
           <div className="grid gap-6">
             <div>
               <h3 className="text-lg font-semibold mb-2 flex items-center gap-2">
@@ -95,7 +115,7 @@ export default function ReportPage() {
           </div>
         </Section>
 
-        <Section title="Key Findings">
+        <Section id="key-findings" title="Key Findings">
           <p className="text-muted mb-6">
             Our analysis identified {data.findings.length} significant findings that
             require attention. Each finding is supported by evidence gathered during our
@@ -108,7 +128,7 @@ export default function ReportPage() {
           </div>
         </Section>
 
-        <Section title="Risk Analysis">
+        <Section id="risk-analysis" title="Risk Analysis">
           <div className="grid gap-6">
             <Exhibit number={3} title="Existential Risks">
               <div className="space-y-3">
@@ -142,7 +162,7 @@ export default function ReportPage() {
           </div>
         </Section>
 
-        <Section title="Strategic Opportunity">
+        <Section id="strategic-opportunity" title="Strategic Opportunity">
           <Callout label="The Path Forward">{data.strategicOpportunity.goodNews}</Callout>
 
           <h3 className="text-lg font-semibold mt-6 mb-3 flex items-center gap-2">
@@ -162,7 +182,7 @@ export default function ReportPage() {
           </ul>
         </Section>
 
-        <Section title="Strategic Recommendations">
+        <Section id="recommendations" title="Strategic Recommendations">
           <p className="text-muted mb-6">
             Recommendations are prioritized by urgency and impact.
           </p>
@@ -173,9 +193,36 @@ export default function ReportPage() {
           </div>
         </Section>
 
-        <Section title="Target State Vision">
+        <Section id="target-state" title="Target State Vision">
           <p className="text-lg mb-6">{data.targetState.description}</p>
 
+          <ComparisonTable
+            leftLabel="Today"
+            rightLabel="Target"
+            rows={[
+              {
+                metric: "MTTR",
+                left: "3× peer benchmark",
+                right: "Within 1.5× peer benchmark",
+              },
+              {
+                metric: "Rollback path",
+                left: "Manual, untested",
+                right: "Single-command, validated monthly",
+              },
+              {
+                metric: "On-call coverage",
+                left: "3 engineers carry 71%",
+                right: "8 engineers, max 15% each",
+              },
+              {
+                metric: "Runbook freshness",
+                left: "7 of 14 stale (>18 months)",
+                right: "Tracked as service-owner KPI",
+              },
+            ]}
+          />
+
           <Exhibit number={5} title="Key Capabilities Enabled">
             <div className="grid md:grid-cols-3 gap-4">
               {data.targetState.keyCapabilities.map((capability) => (
@@ -201,7 +248,7 @@ export default function ReportPage() {
           </ul>
         </Section>
 
-        <Section title="Implementation Roadmap">
+        <Section id="roadmap" title="Implementation Roadmap">
           <p className="text-muted mb-6">
             The transformation should be executed in phases, with clear milestones and
             decision points.
@@ -211,7 +258,7 @@ export default function ReportPage() {
           </Exhibit>
         </Section>
 
-        <Section title="Call to Action">
+        <Section id="call-to-action" title="Call to Action">
           <div className="bg-primary/5 rounded-2xl p-8 border border-primary/20">
             <h3 className="text-xl font-semibold mb-4">Immediate Next Steps</h3>
             <ol className="space-y-3 mb-6">

package/assets/skills/consulting-report/demo/components/comparison-table.tsx

@@ -0,0 +1,40 @@
+interface ComparisonRow {
+  metric: string;
+  left: string;
+  right: string;
+}
+
+interface ComparisonTableProps {
+  leftLabel: string;
+  rightLabel: string;
+  rows: ComparisonRow[];
+  metricLabel?: string;
+}
+
+export function ComparisonTable({
+  leftLabel,
+  rightLabel,
+  rows,
+  metricLabel = "Metric",
+}: ComparisonTableProps) {
+  return (
+    <table className="comparison-table">
+      <thead>
+        <tr>
+          <th>{metricLabel}</th>
+          <th>{leftLabel}</th>
+          <th>{rightLabel}</th>
+        </tr>
+      </thead>
+      <tbody>
+        {rows.map((row) => (
+          <tr key={row.metric}>
+            <td className="metric">{row.metric}</td>
+            <td>{row.left}</td>
+            <td>{row.right}</td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+}

package/assets/skills/consulting-report/demo/components/section.tsx

@@ -1,14 +1,15 @@
 import { cn } from "@/lib/utils";
 
 interface SectionProps {
+  id?: string;
   title: string;
   children: React.ReactNode;
   className?: string;
 }
 
-export function Section({ title, children, className }: SectionProps) {
+export function Section({ id, title, children, className }: SectionProps) {
   return (
-    <section className={cn("report-section", className)}>
+    <section id={id} className={cn("report-section", className)}>
       <h2>{title}</h2>
       {children}
     </section>

package/assets/skills/consulting-report/demo/components/stat-grid.tsx

@@ -0,0 +1,26 @@
+interface Stat {
+  value: string;
+  label: string;
+  caption?: string;
+}
+
+interface StatGridProps {
+  stats: Stat[];
+}
+
+export function StatGrid({ stats }: StatGridProps) {
+  return (
+    <div
+      className="stat-grid"
+      style={{ gridTemplateColumns: `repeat(${stats.length}, minmax(0, 1fr))` }}
+    >
+      {stats.map((s) => (
+        <div key={s.label} className="stat">
+          <div className="stat-value">{s.value}</div>
+          <div className="stat-label">{s.label}</div>
+          {s.caption && <div className="stat-caption">{s.caption}</div>}
+        </div>
+      ))}
+    </div>
+  );
+}

package/assets/skills/consulting-report/demo/components/table-of-contents.tsx

@@ -0,0 +1,27 @@
+interface TocItem {
+  id: string;
+  title: string;
+}
+
+interface TableOfContentsProps {
+  items: TocItem[];
+  title?: string;
+}
+
+export function TableOfContents({ items, title = "Contents" }: TableOfContentsProps) {
+  return (
+    <nav className="toc">
+      <h2>{title}</h2>
+      <ol>
+        {items.map((item, i) => (
+          <li key={item.id}>
+            <a href={`#${item.id}`}>
+              <span className="toc-number">{(i + 1).toString().padStart(2, "0")}</span>
+              <span className="toc-title">{item.title}</span>
+            </a>
+          </li>
+        ))}
+      </ol>
+    </nav>
+  );
+}

package/assets/skills/consulting-report/template/app/globals.css

@@ -266,6 +266,121 @@ body {
   margin-top: 0.25rem;
 }
 
+/* Table of Contents */
+.toc {
+  page-break-after: always;
+  margin-bottom: 3rem;
+}
+.toc h2 {
+  font-family: var(--font-heading);
+  font-size: 1.75rem;
+  font-weight: 600;
+  color: var(--color-foreground);
+  margin-bottom: 1.5rem;
+  padding-bottom: 0.5rem;
+  border-bottom: 2px solid var(--color-primary);
+}
+.toc ol {
+  list-style: none;
+  padding-left: 0;
+  margin: 0;
+}
+.toc li {
+  margin: 0.75rem 0;
+  border-bottom: 1px dotted var(--color-border-emphasis);
+  padding-bottom: 0.5rem;
+}
+.toc a {
+  display: flex;
+  gap: 1rem;
+  align-items: baseline;
+  color: var(--color-foreground);
+  text-decoration: none;
+}
+.toc-number {
+  font-family: var(--font-sans);
+  font-weight: 600;
+  font-size: 0.875rem;
+  color: var(--color-primary);
+  width: 2rem;
+  flex-shrink: 0;
+}
+.toc-title {
+  font-family: var(--font-heading);
+  font-weight: 500;
+  font-size: 1rem;
+}
+
+/* Stat grid */
+.stat-grid {
+  display: grid;
+  gap: 1.5rem;
+  margin: 1.5rem 0;
+  padding: 1.5rem;
+  background: var(--color-background-secondary);
+  border-radius: 0.5rem;
+  border: 1px solid var(--color-border);
+  page-break-inside: avoid;
+}
+.stat {
+  text-align: left;
+}
+.stat-value {
+  font-family: var(--font-sans);
+  font-size: 2.5rem;
+  font-weight: 700;
+  color: var(--color-primary);
+  letter-spacing: -0.02em;
+  line-height: 1;
+}
+.stat-label {
+  margin-top: 0.5rem;
+  font-family: var(--font-sans);
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: var(--color-foreground);
+}
+.stat-caption {
+  margin-top: 0.25rem;
+  font-family: var(--font-body);
+  font-size: 0.8125rem;
+  color: var(--color-muted);
+}
+
+/* Comparison table */
+.comparison-table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 1.5rem 0;
+  font-family: var(--font-body);
+  font-size: 0.9375rem;
+  page-break-inside: avoid;
+}
+.comparison-table th {
+  font-family: var(--font-sans);
+  font-size: 0.7rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--color-primary);
+  padding: 0.75rem 1rem;
+  border-bottom: 2px solid var(--color-primary);
+  text-align: left;
+}
+.comparison-table td {
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid var(--color-border-subtle);
+  vertical-align: top;
+}
+.comparison-table .metric {
+  font-family: var(--font-sans);
+  font-weight: 600;
+  color: var(--color-foreground);
+}
+.comparison-table tbody tr:last-child td {
+  border-bottom: none;
+}
+
 /* Cover page */
 .cover-page {
   min-height: 100vh;

package/assets/skills/consulting-report/template/app/page.tsx

@@ -1,13 +1,28 @@
 import { AlertTriangle, CheckCircle2, Lightbulb, Target } from "lucide-react";
 import { Callout } from "@/components/callout";
+import { ComparisonTable } from "@/components/comparison-table";
 import { CoverPage } from "@/components/cover-page";
 import { Exhibit } from "@/components/exhibit";
 import { FindingCard } from "@/components/finding-card";
 import { RecommendationCard } from "@/components/recommendation-card";
 import { Section } from "@/components/section";
+import { StatGrid } from "@/components/stat-grid";
+import { TableOfContents } from "@/components/table-of-contents";
 import { Timeline } from "@/components/timeline";
 import { reportData } from "@/lib/report-data";
 
+const sections = [
+  { id: "executive-summary", title: "Executive Summary" },
+  { id: "situation-assessment", title: "Situation Assessment" },
+  { id: "key-findings", title: "Key Findings" },
+  { id: "risk-analysis", title: "Risk Analysis" },
+  { id: "strategic-opportunity", title: "Strategic Opportunity" },
+  { id: "recommendations", title: "Strategic Recommendations" },
+  { id: "target-state", title: "Target State Vision" },
+  { id: "roadmap", title: "Implementation Roadmap" },
+  { id: "call-to-action", title: "Call to Action" },
+];
+
 export default function ReportPage() {
   const data = reportData;
 
@@ -23,29 +38,29 @@ export default function ReportPage() {
       />
 
       <div className="report-container">
-        <Section title="Executive Summary">
+        <TableOfContents items={sections} />
+
+        <Section id="executive-summary" title="Executive Summary">
           <p className="text-lg mb-6">{data.executiveSummary.context}</p>
 
-          <Exhibit number={1} title="Assessment Methodology">
-            <div className="flex items-start gap-8">
-              <div>
-                <p className="text-3xl font-bold text-primary">
-                  {data.executiveSummary.methodology.interviewCount}
-                </p>
-                <p className="text-sm text-muted">Interviews Conducted</p>
-              </div>
-              <div className="flex-1">
-                <p className="text-sm font-semibold text-foreground mb-2">
-                  Roles Interviewed:
+          <StatGrid
+            stats={[
+              {
+                value: String(data.executiveSummary.methodology.interviewCount),
+                label: "Interviews",
+              },
+              { value: "—", label: "Headline metric", caption: "replace with your own" },
+              { value: "—", label: "Headline metric", caption: "replace with your own" },
+            ]}
+          />
+
+          <Exhibit number={1} title="Roles Interviewed">
+            <div className="grid grid-cols-2 gap-1">
+              {data.executiveSummary.methodology.roles.map((role) => (
+                <p key={role} className="text-sm text-muted">
+                  {role}
                 </p>
-                <div className="grid grid-cols-2 gap-1">
-                  {data.executiveSummary.methodology.roles.map((role) => (
-                    <p key={role} className="text-sm text-muted">
-                      {role}
-                    </p>
-                  ))}
-                </div>
-              </div>
+              ))}
             </div>
           </Exhibit>
 
@@ -75,7 +90,7 @@ export default function ReportPage() {
           </ul>
         </Section>
 
-        <Section title="Situation Assessment">
+        <Section id="situation-assessment" title="Situation Assessment">
           <div className="grid gap-6">
             <div>
               <h3 className="text-lg font-semibold mb-2 flex items-center gap-2">
@@ -95,7 +110,7 @@ export default function ReportPage() {
           </div>
         </Section>
 
-        <Section title="Key Findings">
+        <Section id="key-findings" title="Key Findings">
           <p className="text-muted mb-6">
             Our analysis identified {data.findings.length} significant findings that
             require attention. Each finding is supported by evidence gathered during our
@@ -108,7 +123,7 @@ export default function ReportPage() {
           </div>
         </Section>
 
-        <Section title="Risk Analysis">
+        <Section id="risk-analysis" title="Risk Analysis">
           <div className="grid gap-6">
             <Exhibit number={3} title="Existential Risks">
               <div className="space-y-3">
@@ -142,7 +157,7 @@ export default function ReportPage() {
           </div>
         </Section>
 
-        <Section title="Strategic Opportunity">
+        <Section id="strategic-opportunity" title="Strategic Opportunity">
           <Callout label="The Path Forward">{data.strategicOpportunity.goodNews}</Callout>
 
           <h3 className="text-lg font-semibold mt-6 mb-3 flex items-center gap-2">
@@ -162,7 +177,7 @@ export default function ReportPage() {
           </ul>
         </Section>
 
-        <Section title="Strategic Recommendations">
+        <Section id="recommendations" title="Strategic Recommendations">
           <p className="text-muted mb-6">
             Recommendations are prioritized by urgency and impact.
           </p>
@@ -173,9 +188,21 @@ export default function ReportPage() {
           </div>
         </Section>
 
-        <Section title="Target State Vision">
+        <Section id="target-state" title="Target State Vision">
           <p className="text-lg mb-6">{data.targetState.description}</p>
 
+          <ComparisonTable
+            leftLabel="Today"
+            rightLabel="Target"
+            rows={[
+              {
+                metric: "Replace with metric",
+                left: "Current state value",
+                right: "Target state value",
+              },
+            ]}
+          />
+
           <Exhibit number={5} title="Key Capabilities Enabled">
             <div className="grid md:grid-cols-3 gap-4">
               {data.targetState.keyCapabilities.map((capability) => (
@@ -201,7 +228,7 @@ export default function ReportPage() {
           </ul>
         </Section>
 
-        <Section title="Implementation Roadmap">
+        <Section id="roadmap" title="Implementation Roadmap">
           <p className="text-muted mb-6">
             The transformation should be executed in phases, with clear milestones and
             decision points.
@@ -211,7 +238,7 @@ export default function ReportPage() {
           </Exhibit>
         </Section>
 
-        <Section title="Call to Action">
+        <Section id="call-to-action" title="Call to Action">
           <div className="bg-primary/5 rounded-2xl p-8 border border-primary/20">
             <h3 className="text-xl font-semibold mb-4">Immediate Next Steps</h3>
             <ol className="space-y-3 mb-6">

package/assets/skills/consulting-report/template/components/comparison-table.tsx

@@ -0,0 +1,40 @@
+interface ComparisonRow {
+  metric: string;
+  left: string;
+  right: string;
+}
+
+interface ComparisonTableProps {
+  leftLabel: string;
+  rightLabel: string;
+  rows: ComparisonRow[];
+  metricLabel?: string;
+}
+
+export function ComparisonTable({
+  leftLabel,
+  rightLabel,
+  rows,
+  metricLabel = "Metric",
+}: ComparisonTableProps) {
+  return (
+    <table className="comparison-table">
+      <thead>
+        <tr>
+          <th>{metricLabel}</th>
+          <th>{leftLabel}</th>
+          <th>{rightLabel}</th>
+        </tr>
+      </thead>
+      <tbody>
+        {rows.map((row) => (
+          <tr key={row.metric}>
+            <td className="metric">{row.metric}</td>
+            <td>{row.left}</td>
+            <td>{row.right}</td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+}

package/assets/skills/consulting-report/template/components/section.tsx

@@ -1,14 +1,15 @@
 import { cn } from "@/lib/utils";
 
 interface SectionProps {
+  id?: string;
   title: string;
   children: React.ReactNode;
   className?: string;
 }
 
-export function Section({ title, children, className }: SectionProps) {
+export function Section({ id, title, children, className }: SectionProps) {
   return (
-    <section className={cn("report-section", className)}>
+    <section id={id} className={cn("report-section", className)}>
       <h2>{title}</h2>
       {children}
     </section>

package/assets/skills/consulting-report/template/components/stat-grid.tsx

@@ -0,0 +1,26 @@
+interface Stat {
+  value: string;
+  label: string;
+  caption?: string;
+}
+
+interface StatGridProps {
+  stats: Stat[];
+}
+
+export function StatGrid({ stats }: StatGridProps) {
+  return (
+    <div
+      className="stat-grid"
+      style={{ gridTemplateColumns: `repeat(${stats.length}, minmax(0, 1fr))` }}
+    >
+      {stats.map((s) => (
+        <div key={s.label} className="stat">
+          <div className="stat-value">{s.value}</div>
+          <div className="stat-label">{s.label}</div>
+          {s.caption && <div className="stat-caption">{s.caption}</div>}
+        </div>
+      ))}
+    </div>
+  );
+}

package/assets/skills/consulting-report/template/components/table-of-contents.tsx

@@ -0,0 +1,27 @@
+interface TocItem {
+  id: string;
+  title: string;
+}
+
+interface TableOfContentsProps {
+  items: TocItem[];
+  title?: string;
+}
+
+export function TableOfContents({ items, title = "Contents" }: TableOfContentsProps) {
+  return (
+    <nav className="toc">
+      <h2>{title}</h2>
+      <ol>
+        {items.map((item, i) => (
+          <li key={item.id}>
+            <a href={`#${item.id}`}>
+              <span className="toc-number">{(i + 1).toString().padStart(2, "0")}</span>
+              <span className="toc-title">{item.title}</span>
+            </a>
+          </li>
+        ))}
+      </ol>
+    </nav>
+  );
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "portable-agent-layer",
-  "version": "0.31.0",
+  "version": "0.32.0",
   "description": "PAL — Portable Agent Layer: persistent personal context for AI coding assistants",
   "type": "module",
   "bin": {