portable-agent-layer 0.37.0 → 0.39.0

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

@@ -0,0 +1,87 @@
+import type { ConfigurationParameter } from "@/lib/types";
+
+export type ConfigurationColumn = {
+  /** Property of `ConfigurationParameter` to read for this column. */
+  key: keyof ConfigurationParameter;
+  /** Header text shown in the table. */
+  header: string;
+  /** Optional className applied to all body cells in this column. */
+  cellClassName?: string;
+};
+
+const defaultColumns: ConfigurationColumn[] = [
+  { key: "name", header: "Parameter", cellClassName: "font-sans font-semibold w-[28%]" },
+  { key: "currentValue", header: "Current value", cellClassName: "w-[28%]" },
+  {
+    key: "location",
+    header: "Location",
+    cellClassName: "w-[18%] font-sans text-[0.78rem] text-muted",
+  },
+  {
+    key: "rationale",
+    header: "Tuning rationale",
+    cellClassName: "w-[26%] text-muted text-[0.82rem] italic",
+  },
+];
+
+interface ConfigurationTableProps {
+  parameters: ConfigurationParameter[];
+  /**
+   * Override the default 4-column layout. Pass a different array of
+   * columns to render any subset / superset of `ConfigurationParameter`
+   * fields. Defaults to: Parameter, Current value, Location, Tuning rationale.
+   */
+  columns?: ConfigurationColumn[];
+  /**
+   * Default label for the "tunable" marker, used when a parameter does not
+   * provide its own `tunableLabel`. Defaults to "TUNABLE".
+   */
+  defaultTunableLabel?: string;
+}
+
+const tunableClass =
+  "inline-block ml-2 px-1.5 py-px bg-warning/10 text-warning font-sans text-[0.6rem] font-bold uppercase tracking-widest border border-warning/30 rounded align-middle";
+
+export function ConfigurationTable({
+  parameters,
+  columns = defaultColumns,
+  defaultTunableLabel = "TUNABLE",
+}: ConfigurationTableProps) {
+  const thClass =
+    "font-sans text-[0.68rem] font-bold uppercase tracking-widest text-primary px-2.5 py-2 border-b-2 border-primary text-left";
+  const tdClass = "px-2.5 py-2 border-b border-border-subtle align-top";
+
+  return (
+    <table className="w-full border-collapse my-4 font-body text-[0.85rem] break-inside-avoid">
+      <thead>
+        <tr>
+          {columns.map((c) => (
+            <th key={String(c.key)} className={thClass}>
+              {c.header}
+            </th>
+          ))}
+        </tr>
+      </thead>
+      <tbody>
+        {parameters.map((p) => (
+          <tr key={p.name}>
+            {columns.map((c) => {
+              const value = p[c.key];
+              const isNameCol = c.key === "name";
+              return (
+                <td key={String(c.key)} className={`${tdClass} ${c.cellClassName ?? ""}`}>
+                  {value ?? (c.key === "rationale" ? "—" : "")}
+                  {isNameCol && p.tunable && (
+                    <span className={tunableClass}>
+                      {p.tunableLabel ?? defaultTunableLabel}
+                    </span>
+                  )}
+                </td>
+              );
+            })}
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+}

package/assets/skills/consulting-report/template/components/cover-page.tsx

@@ -16,17 +16,29 @@ export function CoverPage({
   preTitle = "Strategic Assessment",
 }: CoverPageProps) {
   return (
-    <div className="cover-page">
-      <div className="cover-classification">{classification}</div>
+    <div
+      className={[
+        "min-h-screen flex flex-col justify-center p-16",
+        "break-after-page",
+        "bg-gradient-to-b from-background to-background-secondary",
+      ].join(" ")}
+    >
+      <div className="font-sans text-sm font-semibold text-destructive uppercase tracking-[0.15em] mb-16">
+        {classification}
+      </div>
 
       <div className="text-sm tracking-[0.25em] text-primary uppercase mb-4 font-semibold font-sans">
         {preTitle}
       </div>
-      <h1 className="cover-title">{reportTitle}</h1>
-      <p className="cover-subtitle">Prepared for {clientName}</p>
+      <h1 className="font-heading text-5xl font-semibold text-foreground leading-tight mb-4 tracking-tight">
+        {reportTitle}
+      </h1>
+      <p className="font-heading text-2xl text-muted mb-16 font-normal">
+        Prepared for {clientName}
+      </p>
 
-      <div className="cover-meta">
-        <p className="cover-date">{reportDate}</p>
+      <div className="mt-auto pt-6 border-t border-border">
+        <p className="font-sans text-base text-muted">{reportDate}</p>
         <p className="text-muted-dark text-sm mt-2 font-sans">{consultancyName}</p>
       </div>
     </div>

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

@@ -7,15 +7,17 @@ interface ExhibitProps {
 
 export function Exhibit({ number, title, source, children }: ExhibitProps) {
   return (
-    <div className="exhibit">
-      <div className="exhibit-header">
+    <div className="bg-background-secondary border border-border rounded-lg p-6 my-6 break-inside-avoid">
+      <div className="flex justify-between items-baseline mb-4 pb-2 border-b border-border-subtle">
         <div>
-          <span className="exhibit-number">Exhibit {number}</span>
-          <span className="exhibit-title ml-3">{title}</span>
+          <span className="font-sans font-semibold text-primary text-sm uppercase tracking-widest">
+            Exhibit {number}
+          </span>
+          <span className="font-heading font-semibold text-foreground ml-3">{title}</span>
         </div>
         {source && <span className="text-xs text-muted italic">Source: {source}</span>}
       </div>
-      <div className="exhibit-content">{children}</div>
+      <div>{children}</div>
     </div>
   );
 }

package/assets/skills/consulting-report/template/components/finding-card.tsx

@@ -1,4 +1,4 @@
-import type { Finding } from "@/lib/report-data";
+import type { Finding } from "@/lib/types";
 import { SeverityBadge } from "./severity-badge";
 
 interface FindingCardProps {
@@ -8,18 +8,20 @@ interface FindingCardProps {
 
 export function FindingCard({ finding, index }: FindingCardProps) {
   return (
-    <div className="finding-card">
-      <div className="finding-header">
+    <div className="bg-background-secondary border border-border rounded-lg p-6 mb-4 break-inside-avoid">
+      <div className="flex justify-between items-start mb-3">
         <div className="flex items-center gap-4">
           <span className="text-primary font-bold font-sans text-2xl min-w-8">
             {index + 1}.
           </span>
-          <span className="finding-title">{finding.title}</span>
+          <span className="font-heading font-semibold text-foreground text-base">
+            {finding.title}
+          </span>
         </div>
         <SeverityBadge severity={finding.severity} />
       </div>
       <p className="text-foreground mb-2 ml-12">{finding.description}</p>
-      <p className="finding-evidence ml-12">
+      <p className="text-sm text-muted mt-2 ml-12">
         <span className="font-medium text-foreground">Evidence:</span> {finding.evidence}
       </p>
       <p className="text-xs text-muted mt-2 italic ml-12">Source: {finding.source}</p>

package/assets/skills/consulting-report/template/components/quote-block.tsx

@@ -6,9 +6,19 @@ interface QuoteBlockProps {
 
 export function QuoteBlock({ quote, attribution, role }: QuoteBlockProps) {
   return (
-    <div className="quote-block">
-      <p className="quote-text">{quote}</p>
-      <p className="quote-attribution">
+    <div
+      className={[
+        "relative px-8 py-6 my-6 bg-background-secondary rounded-lg",
+        "border border-border-subtle break-inside-avoid",
+        // Decorative opening curly-quote glyph rendered via the ::before
+        // pseudo-element. Kept as utility classes to avoid a CSS file rule.
+        "before:content-['\\201C'] before:absolute before:top-2 before:left-3",
+        "before:text-5xl before:text-primary/50 before:leading-none",
+        "before:font-[Georgia,serif]",
+      ].join(" ")}
+    >
+      <p className="italic text-foreground text-[1.0625rem] leading-relaxed">{quote}</p>
+      <p className="mt-3 text-sm text-muted">
         — {attribution}
         {role && <span className="text-muted">, {role}</span>}
       </p>

package/assets/skills/consulting-report/template/components/recommendation-card.tsx

@@ -1,5 +1,5 @@
 import { ArrowRight, Clock, Zap } from "lucide-react";
-import type { Recommendation } from "@/lib/report-data";
+import type { Recommendation } from "@/lib/types";
 import { cn } from "@/lib/utils";
 
 interface RecommendationCardProps {
@@ -30,11 +30,13 @@ export function RecommendationCard({ recommendation, index }: RecommendationCard
   const Icon = config.icon;
 
   return (
-    <div className="finding-card">
-      <div className="finding-header">
+    <div className="bg-background-secondary border border-border rounded-lg p-6 mb-4 break-inside-avoid">
+      <div className="flex justify-between items-start mb-3">
         <div className="flex items-start gap-3">
           <span className="text-primary font-bold font-sans text-lg">{index + 1}</span>
-          <span className="finding-title">{recommendation.title}</span>
+          <span className="font-heading font-semibold text-foreground text-base">
+            {recommendation.title}
+          </span>
         </div>
         <span
           className={cn(

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

@@ -0,0 +1,104 @@
+import type { Dimension, RubricLevel } from "@/lib/types";
+
+// Default 5-step palette: red → orange → amber → lime → green.
+// Indexed by position in the levels array (0..n-1). For an N-level rubric,
+// we sample evenly across this palette.
+const DEFAULT_PALETTE = [
+  "#dc2626", // red
+  "#ea580c", // orange
+  "#d97706", // amber
+  "#84cc16", // lime
+  "#16a34a", // green
+];
+
+function colorForLevel(index: number, total: number, palette: string[]): string {
+  if (total <= 1) return palette[palette.length - 1];
+  const t = index / (total - 1); // 0..1
+  const pos = t * (palette.length - 1);
+  return palette[Math.round(pos)];
+}
+
+// Mix a hex color toward white by `amount` (0..1). 0.9 → soft tint.
+function lighten(hex: string, amount: number): string {
+  const m = hex.match(/^#([0-9a-f]{6})$/i);
+  if (!m) return hex;
+  const n = parseInt(m[1], 16);
+  const r = (n >> 16) & 255;
+  const g = (n >> 8) & 255;
+  const b = n & 255;
+  const mix = (c: number) => Math.round(c + (255 - c) * amount);
+  const toHex = (c: number) => c.toString(16).padStart(2, "0");
+  return `#${toHex(mix(r))}${toHex(mix(g))}${toHex(mix(b))}`;
+}
+
+interface RubricTableProps {
+  dimension: Dimension;
+  /**
+   * Optional color palette (low → high) used to tint each level's row.
+   * Length is independent of the number of levels — entries are sampled.
+   * Defaults to a 5-step red → green ramp.
+   */
+  palette?: string[];
+}
+
+export function RubricTable({ dimension, palette = DEFAULT_PALETTE }: RubricTableProps) {
+  const levels: RubricLevel[] = dimension.levels;
+  // Sort ascending for palette indexing (low score = first color), then
+  // reverse for display so the highest score sits at the top of the table.
+  const ascending = [...levels].sort((a, b) => a.score - b.score);
+  const sorted = [...ascending].reverse();
+
+  return (
+    <div className="my-5 break-inside-avoid">
+      <table className="w-full border-separate [border-spacing:0_0.3rem] font-body text-[0.85rem]">
+        <tbody>
+          {sorted.map((level) => {
+            const ascIndex = ascending.findIndex((l) => l.score === level.score);
+            const color = colorForLevel(ascIndex, ascending.length, palette);
+            const rowBg = lighten(color, 0.88);
+            const leftStyle = level.highlight
+              ? {
+                  backgroundColor: rowBg,
+                  borderTop: `2px dashed ${color}`,
+                  borderBottom: `2px dashed ${color}`,
+                  borderLeft: `2px dashed ${color}`,
+                }
+              : { backgroundColor: rowBg };
+            const rightStyle = level.highlight
+              ? {
+                  backgroundColor: rowBg,
+                  borderTop: `2px dashed ${color}`,
+                  borderBottom: `2px dashed ${color}`,
+                  borderRight: `2px dashed ${color}`,
+                }
+              : { backgroundColor: rowBg };
+            return (
+              <tr key={level.score}>
+                <td
+                  className="w-[14%] align-middle text-center px-3 py-2.5 rounded-l-md"
+                  style={leftStyle}
+                >
+                  <div
+                    className="font-sans text-2xl font-bold leading-none"
+                    style={{ color }}
+                  >
+                    {level.score}
+                  </div>
+                  <div className="mt-1 font-sans text-[0.7rem] font-semibold uppercase tracking-wide text-foreground">
+                    {level.label}
+                  </div>
+                </td>
+                <td
+                  className="align-middle px-4 py-2.5 rounded-r-md leading-snug text-[0.8125rem] text-foreground"
+                  style={rightStyle}
+                >
+                  {level.anchor}
+                </td>
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+    </div>
+  );
+}

package/assets/skills/consulting-report/template/components/score-badge.tsx

@@ -0,0 +1,51 @@
+import type { CSSProperties } from "react";
+
+// Default 5-step ramp (red → green). For score badges we use slightly more
+// saturated background/border colors than RubricTable's underline ramp.
+const DEFAULT_STEPS: { color: string; bg: string; border: string }[] = [
+  { color: "#dc2626", bg: "rgba(220,38,38,0.12)", border: "rgba(220,38,38,0.40)" }, // 1
+  { color: "#ea580c", bg: "rgba(234,88,12,0.12)", border: "rgba(234,88,12,0.35)" }, // 2
+  { color: "#d97706", bg: "rgba(217,119,6,0.12)", border: "rgba(217,119,6,0.35)" }, // 3
+  { color: "#4d7c0f", bg: "rgba(132,204,22,0.14)", border: "rgba(132,204,22,0.40)" }, // 4
+  { color: "#16a34a", bg: "rgba(22,163,74,0.12)", border: "rgba(22,163,74,0.35)" }, // 5
+];
+
+interface ScoreBadgeProps {
+  score: number;
+  /**
+   * Maximum possible score on the rubric this badge sits on. Used to map
+   * the score onto the color ramp. Defaults to 5.
+   */
+  maxScore?: number;
+  /** Optional palette override. Length-independent (entries are sampled). */
+  palette?: { color: string; bg: string; border: string }[];
+}
+
+function step(score: number, maxScore: number, palette: typeof DEFAULT_STEPS) {
+  if (maxScore <= 1) return palette[palette.length - 1];
+  const clamped = Math.max(1, Math.min(score, maxScore));
+  const t = (clamped - 1) / (maxScore - 1);
+  const idx = Math.round(t * (palette.length - 1));
+  return palette[idx];
+}
+
+export function ScoreBadge({
+  score,
+  maxScore = 5,
+  palette = DEFAULT_STEPS,
+}: ScoreBadgeProps) {
+  const s = step(score, maxScore, palette);
+  const style: CSSProperties = {
+    color: s.color,
+    background: s.bg,
+    borderColor: s.border,
+  };
+  return (
+    <span
+      className="inline-flex items-center justify-center min-w-7 h-7 px-2 rounded-md font-sans text-sm font-bold border border-transparent"
+      style={style}
+    >
+      {score}
+    </span>
+  );
+}

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

@@ -0,0 +1,154 @@
+import type { Scorecard as ScorecardType } from "@/lib/types";
+import { BandBadge, type BandStyle } from "./band-badge";
+import { ScoreBadge } from "./score-badge";
+
+interface ScorecardProps {
+  scorecard: ScorecardType;
+  /**
+   * Optional band style override forwarded to BandBadge. Lets the project
+   * define its own band vocabulary (e.g., "Greenlit / Investigate / Decline").
+   */
+  bandStyles?: Record<string, BandStyle>;
+  /**
+   * Maximum score on each dimension's rubric. Forwarded to ScoreBadge for
+   * color mapping. Defaults to 5.
+   */
+  maxScore?: number;
+}
+
+type GateVerdict = ScorecardType["gates"][number]["verdict"];
+
+const gateColor: Record<GateVerdict, string> = {
+  pass: "text-success",
+  fail: "text-destructive",
+  flag: "text-warning",
+  "n/a": "text-muted",
+};
+
+function gateLabel(verdict: GateVerdict): string {
+  if (verdict === "pass") return "Pass";
+  if (verdict === "fail") return "Fail";
+  if (verdict === "flag") return "Flag";
+  return "N/A";
+}
+
+const sectionLabel =
+  "font-sans text-[0.68rem] font-bold uppercase tracking-widest text-primary mb-2.5";
+
+export function Scorecard({ scorecard, bandStyles, maxScore = 5 }: ScorecardProps) {
+  const maxTotal = scorecard.maxTotal ?? 20;
+  const cellBase = "px-3 py-2 border-b border-border-subtle align-top";
+
+  return (
+    <div className="bg-background-secondary border border-border rounded-xl p-5 my-6 break-inside-avoid">
+      {/* Header */}
+      <div className="flex justify-between items-start gap-4 mb-3 pb-3 border-b border-border-subtle">
+        <div className="flex items-baseline gap-2">
+          <span className="font-sans text-xl font-bold text-primary">
+            {scorecard.index}.
+          </span>
+          <span className="font-heading text-lg font-semibold text-foreground">
+            {scorecard.name}
+          </span>
+        </div>
+        <BandBadge band={scorecard.band} bandStyles={bandStyles} />
+      </div>
+
+      <p className="text-[0.95rem] text-foreground mb-4 leading-relaxed">
+        <span className="font-sans text-[0.7rem] font-bold uppercase tracking-widest text-muted">
+          Outcome:
+        </span>{" "}
+        {scorecard.outcome}
+      </p>
+
+      {/* Gates */}
+      <div className="my-4">
+        <div className={sectionLabel}>Pre-scoring gates</div>
+        <table className="w-full border-collapse text-[0.85rem] font-body">
+          <tbody>
+            {scorecard.gates.map((gate) => (
+              <tr key={gate.name}>
+                <td className={`${cellBase} font-sans font-semibold w-[32%]`}>
+                  {gate.name}
+                </td>
+                <td
+                  className={`${cellBase} w-[18%] font-sans text-[0.78rem] font-bold uppercase tracking-wide ${gateColor[gate.verdict]}`}
+                >
+                  {gateLabel(gate.verdict)}
+                </td>
+                <td className={`${cellBase} text-muted text-[0.8125rem]`}>
+                  {gate.note ?? ""}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+
+      {/* Scores */}
+      <div className="my-4">
+        <div className={sectionLabel}>Dimension scores</div>
+        <table className="w-full border-collapse text-[0.85rem] font-body">
+          <tbody>
+            {scorecard.scores.map((s) => (
+              <tr key={s.dimensionId}>
+                <td className={`${cellBase} font-sans font-semibold w-[22%]`}>
+                  {s.dimensionLabel}
+                </td>
+                <td className={`${cellBase} w-[8%] text-center`}>
+                  <ScoreBadge score={s.score} maxScore={maxScore} />
+                </td>
+                <td className={`${cellBase} text-foreground leading-snug`}>
+                  {s.justification}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+
+      {/* Total row */}
+      <div className="flex justify-between items-center gap-4 mt-4 mb-2 px-4 py-2.5 bg-background border border-border rounded-md">
+        <div className="font-sans text-[0.95rem]">
+          Total: <strong className="text-xl text-primary">{scorecard.total}</strong> /{" "}
+          {maxTotal}
+        </div>
+        {scorecard.vetoTriggered && (
+          <div className="font-sans font-bold text-xs uppercase tracking-wide text-destructive">
+            VETO TRIGGERED: {scorecard.vetoNote}
+          </div>
+        )}
+      </div>
+
+      {scorecard.weightingNote && (
+        <div className="text-[0.85rem] italic text-muted mt-2 px-4 py-2.5 bg-background border-l-[3px] border-accent rounded-r-md">
+          <span className={sectionLabel}>Weighting note:</span> {scorecard.weightingNote}
+        </div>
+      )}
+
+      {/* Recommendation */}
+      <div className="mt-4 pt-3 border-t border-border-subtle">
+        <div className={sectionLabel}>Recommendation</div>
+        <p className="text-[0.9rem] leading-relaxed mt-1 mb-3">
+          {scorecard.recommendation}
+        </p>
+        <dl className="grid grid-cols-3 gap-x-6 gap-y-3 m-0 text-[0.8125rem]">
+          {(
+            [
+              ["First action", scorecard.firstAction],
+              ["Owner", scorecard.owner],
+              ["Next review", scorecard.nextReview],
+            ] as const
+          ).map(([label, value]) => (
+            <div key={label}>
+              <dt className="font-sans text-[0.65rem] font-bold uppercase tracking-widest text-muted mb-1">
+                {label}
+              </dt>
+              <dd className="m-0 text-foreground">{value}</dd>
+            </div>
+          ))}
+        </dl>
+      </div>
+    </div>
+  );
+}

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

@@ -9,7 +9,22 @@ interface SectionProps {
 
 export function Section({ id, title, children, className }: SectionProps) {
   return (
-    <section id={id} className={cn("report-section", className)}>
+    <section
+      id={id}
+      className={cn(
+        "mb-12",
+        // Each top-level Section starts on a new page in print/PDF output.
+        // Harmless for the first section (already at the top of a page after
+        // the TOC's break-after-page).
+        "break-before-page",
+        // Descendant heading styles — applies to any h2..h4 inside the
+        // section body without forcing callers to repeat utility classes.
+        "[&_h2]:font-heading [&_h2]:text-3xl [&_h2]:font-semibold [&_h2]:text-foreground [&_h2]:mb-6 [&_h2]:pb-2 [&_h2]:border-b-2 [&_h2]:border-primary",
+        "[&_h3]:font-heading [&_h3]:text-xl [&_h3]:font-semibold [&_h3]:text-foreground [&_h3]:mt-6 [&_h3]:mb-3",
+        "[&_h4]:font-heading [&_h4]:text-lg [&_h4]:font-semibold [&_h4]:text-foreground [&_h4]:mt-4 [&_h4]:mb-2",
+        className
+      )}
+    >
       <h2>{title}</h2>
       {children}
     </section>

package/assets/skills/consulting-report/template/components/severity-badge.tsx

@@ -6,14 +6,29 @@ interface SeverityBadgeProps {
   severity: Severity;
 }
 
+const base =
+  "inline-flex items-center px-3 py-1 rounded-full font-sans text-xs font-semibold uppercase tracking-wider border";
+
 const severityConfig: Record<Severity, { label: string; className: string }> = {
-  critical: { label: "Critical", className: "severity-critical" },
-  high: { label: "High", className: "severity-high" },
-  medium: { label: "Medium", className: "severity-medium" },
-  low: { label: "Low", className: "severity-low" },
+  critical: {
+    label: "Critical",
+    className: "bg-destructive/10 text-destructive border-destructive/30",
+  },
+  high: {
+    label: "High",
+    className: "bg-[#ea580c]/10 text-[#ea580c] border-[#ea580c]/30",
+  },
+  medium: {
+    label: "Medium",
+    className: "bg-warning/10 text-warning border-warning/30",
+  },
+  low: {
+    label: "Low",
+    className: "bg-success/10 text-success border-success/30",
+  },
 };
 
 export function SeverityBadge({ severity }: SeverityBadgeProps) {
   const config = severityConfig[severity];
-  return <span className={cn("severity-badge", config.className)}>{config.label}</span>;
+  return <span className={cn(base, config.className)}>{config.label}</span>;
 }

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

@@ -11,14 +11,20 @@ interface StatGridProps {
 export function StatGrid({ stats }: StatGridProps) {
   return (
     <div
-      className="stat-grid"
+      className="grid gap-6 my-6 p-6 bg-background-secondary rounded-lg border border-border break-inside-avoid"
       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 key={s.label} className="text-left">
+          <div className="font-sans text-4xl font-bold text-primary -tracking-wider leading-none">
+            {s.value}
+          </div>
+          <div className="mt-2 font-sans text-[0.8125rem] font-semibold text-foreground">
+            {s.label}
+          </div>
+          {s.caption && (
+            <div className="mt-1 font-body text-[0.8125rem] text-muted">{s.caption}</div>
+          )}
         </div>
       ))}
     </div>

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

@@ -10,14 +10,24 @@ interface TableOfContentsProps {
 
 export function TableOfContents({ items, title = "Contents" }: TableOfContentsProps) {
   return (
-    <nav className="toc">
-      <h2>{title}</h2>
-      <ol>
+    <nav className="break-after-page mb-12">
+      <h2 className="font-heading text-3xl font-semibold text-foreground mb-6 pb-2 border-b-2 border-primary">
+        {title}
+      </h2>
+      <ol className="list-none p-0 m-0">
         {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>
+          <li
+            key={item.id}
+            className="my-3 border-b border-dotted border-border-emphasis pb-2"
+          >
+            <a
+              href={`#${item.id}`}
+              className="flex gap-4 items-baseline text-foreground no-underline"
+            >
+              <span className="font-sans font-semibold text-sm text-primary w-8 shrink-0">
+                {(i + 1).toString().padStart(2, "0")}
+              </span>
+              <span className="font-heading font-medium text-base">{item.title}</span>
             </a>
           </li>
         ))}