portable-agent-layer 0.30.1 → 0.32.0

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

@@ -0,0 +1,459 @@
+@import "tailwindcss";
+
+@theme {
+  --color-background: #ffffff;
+  --color-background-secondary: #f8fafc;
+  --color-background-tertiary: #f1f5f9;
+  --color-background-elevated: #e2e8f0;
+
+  --color-foreground: #0f172a;
+  --color-muted: #475569;
+  --color-muted-dark: #94a3b8;
+
+  --color-border: #e2e8f0;
+  --color-border-subtle: #f1f5f9;
+  --color-border-emphasis: #cbd5e1;
+
+  --color-primary: #1d4ed8;
+  --color-accent: #7c3aed;
+  --color-success: #16a34a;
+  --color-warning: #d97706;
+  --color-destructive: #dc2626;
+
+  --color-section: #f8fafc;
+  --color-callout: #eff6ff;
+
+  --font-sans: var(--font-inter), system-ui, sans-serif;
+  --font-serif: var(--font-source-serif), Georgia, serif;
+  --font-heading: var(--font-inter), system-ui, sans-serif;
+  --font-body: var(--font-source-serif), Georgia, serif;
+}
+
+@source "./**/*.{ts,tsx}";
+@source "../components/**/*.{ts,tsx}";
+
+body {
+  font-family: var(--font-body);
+  background: var(--color-background);
+  color: var(--color-foreground);
+  line-height: 1.7;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* McKinsey-style report layout */
+.report-container {
+  max-width: 850px;
+  margin: 0 auto;
+  padding: 2rem;
+}
+
+.report-section {
+  margin-bottom: 3rem;
+  page-break-inside: avoid;
+}
+
+.report-section 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);
+}
+
+.report-section h3 {
+  font-family: var(--font-heading);
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: var(--color-foreground);
+  margin-bottom: 1rem;
+}
+
+/* Exhibit */
+.exhibit {
+  background: var(--color-background-secondary);
+  border: 1px solid var(--color-border);
+  border-radius: 0.5rem;
+  padding: 1.5rem;
+  margin: 1.5rem 0;
+}
+.exhibit-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  margin-bottom: 1rem;
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid var(--color-border-subtle);
+}
+.exhibit-number {
+  font-family: var(--font-sans);
+  font-weight: 600;
+  color: var(--color-primary);
+  font-size: 0.875rem;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+}
+.exhibit-title {
+  font-family: var(--font-heading);
+  font-weight: 600;
+  color: var(--color-foreground);
+}
+
+/* Callout */
+.callout {
+  background: var(--color-callout);
+  border-left: 4px solid var(--color-primary);
+  padding: 1.25rem 1.5rem;
+  margin: 1.5rem 0;
+  border-radius: 0 0.5rem 0.5rem 0;
+}
+.callout-label {
+  font-family: var(--font-sans);
+  font-weight: 600;
+  color: var(--color-primary);
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  margin-bottom: 0.5rem;
+}
+.callout-content {
+  font-size: 1.125rem;
+  font-weight: 500;
+  color: var(--color-foreground);
+}
+
+/* Quote block */
+.quote-block {
+  position: relative;
+  padding: 1.5rem 2rem;
+  margin: 1.5rem 0;
+  background: var(--color-background-secondary);
+  border-radius: 0.5rem;
+  border: 1px solid var(--color-border-subtle);
+}
+.quote-block::before {
+  content: "\201C";
+  position: absolute;
+  top: 0.5rem;
+  left: 0.75rem;
+  font-size: 3rem;
+  color: var(--color-primary);
+  opacity: 0.5;
+  font-family: Georgia, serif;
+  line-height: 1;
+}
+.quote-text {
+  font-style: italic;
+  color: var(--color-foreground);
+  font-size: 1.0625rem;
+  line-height: 1.7;
+}
+.quote-attribution {
+  margin-top: 0.75rem;
+  font-size: 0.875rem;
+  color: var(--color-muted);
+}
+
+/* Severity badges */
+.severity-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.25rem 0.75rem;
+  border-radius: 9999px;
+  font-family: var(--font-sans);
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+.severity-critical {
+  background: rgba(220, 38, 38, 0.1);
+  color: var(--color-destructive);
+  border: 1px solid rgba(220, 38, 38, 0.3);
+}
+.severity-high {
+  background: rgba(234, 88, 12, 0.1);
+  color: #ea580c;
+  border: 1px solid rgba(234, 88, 12, 0.3);
+}
+.severity-medium {
+  background: rgba(217, 119, 6, 0.1);
+  color: var(--color-warning);
+  border: 1px solid rgba(217, 119, 6, 0.3);
+}
+.severity-low {
+  background: rgba(22, 163, 74, 0.1);
+  color: var(--color-success);
+  border: 1px solid rgba(22, 163, 74, 0.3);
+}
+
+/* Finding card */
+.finding-card {
+  background: var(--color-background-secondary);
+  border: 1px solid var(--color-border);
+  border-radius: 0.5rem;
+  padding: 1.5rem;
+  margin-bottom: 1rem;
+}
+.finding-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 0.75rem;
+}
+.finding-title {
+  font-family: var(--font-heading);
+  font-weight: 600;
+  color: var(--color-foreground);
+  font-size: 1.0625rem;
+}
+.finding-evidence {
+  font-size: 0.9375rem;
+  color: var(--color-muted);
+  margin-top: 0.5rem;
+}
+
+/* Timeline */
+.timeline {
+  position: relative;
+  padding-left: 2rem;
+}
+.timeline::before {
+  content: "";
+  position: absolute;
+  left: 0.5rem;
+  top: 0;
+  bottom: 0;
+  width: 2px;
+  background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-accent) 100%);
+}
+.timeline-item {
+  position: relative;
+  padding-bottom: 1.5rem;
+}
+.timeline-item::before {
+  content: "";
+  position: absolute;
+  /* Center dot on the vertical line: line is at left:0.5rem (8px) +1px,
+     timeline-item starts at padding 2rem (32px). Dot half-width 6px → place
+     left at -1.8125rem so dot center lands at 9px from .timeline left. */
+  left: -1.8125rem;
+  top: 0.4rem;
+  width: 0.75rem;
+  height: 0.75rem;
+  border-radius: 50%;
+  background: var(--color-primary);
+}
+.timeline-phase {
+  font-family: var(--font-sans);
+  font-weight: 600;
+  color: var(--color-primary);
+  font-size: 0.875rem;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+}
+.timeline-title {
+  font-family: var(--font-heading);
+  font-weight: 600;
+  color: var(--color-foreground);
+  margin-top: 0.25rem;
+}
+.timeline-description {
+  color: var(--color-muted);
+  font-size: 0.9375rem;
+  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;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 4rem;
+  page-break-after: always;
+  background: linear-gradient(180deg, var(--color-background) 0%, var(--color-background-secondary) 100%);
+}
+.cover-classification {
+  font-family: var(--font-sans);
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--color-destructive);
+  text-transform: uppercase;
+  letter-spacing: 0.15em;
+  margin-bottom: 4rem;
+}
+.cover-title {
+  font-family: var(--font-heading);
+  font-size: 3rem;
+  font-weight: 600;
+  color: var(--color-foreground);
+  line-height: 1.2;
+  margin-bottom: 1rem;
+  letter-spacing: -0.02em;
+}
+.cover-subtitle {
+  font-family: var(--font-heading);
+  font-size: 1.5rem;
+  color: var(--color-muted);
+  margin-bottom: 4rem;
+  font-weight: 400;
+}
+.cover-meta {
+  margin-top: auto;
+  padding-top: 1.5rem;
+  border-top: 1px solid var(--color-border);
+}
+.cover-date {
+  font-family: var(--font-sans);
+  font-size: 1rem;
+  color: var(--color-muted);
+}
+
+/* Print styles — what Playwright sees */
+@media print {
+  body {
+    font-size: 11pt;
+  }
+  .report-container {
+    max-width: none;
+    padding: 0;
+  }
+  .report-section,
+  .callout,
+  .exhibit,
+  .finding-card,
+  .quote-block {
+    break-inside: avoid;
+  }
+  .cover-page {
+    page-break-after: always;
+  }
+  a {
+    text-decoration: none;
+    color: var(--color-foreground);
+  }
+}
+
+/* Page setup for PDF */
+@page {
+  size: A4;
+  margin: 18mm 16mm;
+}

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

@@ -0,0 +1,32 @@
+import type { Metadata } from "next";
+import { Inter, Source_Serif_4 } from "next/font/google";
+import "./globals.css";
+
+const inter = Inter({
+  subsets: ["latin"],
+  variable: "--font-inter",
+  display: "swap",
+});
+
+const sourceSerif = Source_Serif_4({
+  subsets: ["latin"],
+  variable: "--font-source-serif",
+  display: "swap",
+});
+
+export const metadata: Metadata = {
+  title: "Consulting Report",
+  description: "Strategic assessment and recommendations.",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{ children: React.ReactNode }>) {
+  return (
+    <html lang="en" className={`${inter.variable} ${sourceSerif.variable}`}>
+      <body className="bg-background font-body text-foreground antialiased">
+        {children}
+      </body>
+    </html>
+  );
+}