portable-agent-layer 0.30.1 → 0.31.0

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

@@ -0,0 +1,344 @@
+@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;
+}
+
+/* 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>
+  );
+}

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

@@ -0,0 +1,255 @@
+import { AlertTriangle, CheckCircle2, Lightbulb, Target } from "lucide-react";
+import { Callout } from "@/components/callout";
+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 { Timeline } from "@/components/timeline";
+import { reportData } from "@/lib/report-data";
+
+export default function ReportPage() {
+  const data = reportData;
+
+  return (
+    <div>
+      <CoverPage
+        clientName={data.clientName}
+        reportTitle={data.reportTitle}
+        reportDate={data.reportDate}
+        classification={data.classification}
+        consultancyName={data.consultancyName}
+        preTitle={data.preTitle}
+      />
+
+      <div className="report-container">
+        <Section 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:
+                </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>
+
+          <Exhibit number={2} title="Key Findings Summary">
+            <ul className="space-y-2">
+              {data.executiveSummary.keyFindings.map((finding, i) => (
+                <li key={finding} className="flex items-start gap-3">
+                  <span className="text-primary font-bold font-sans">{i + 1}.</span>
+                  <span>{finding}</span>
+                </li>
+              ))}
+            </ul>
+          </Exhibit>
+
+          <Callout label="Primary Recommendation">
+            {data.executiveSummary.primaryRecommendation}
+          </Callout>
+
+          <h3 className="text-lg font-semibold mt-6 mb-3">Expected Outcomes</h3>
+          <ul className="space-y-2">
+            {data.executiveSummary.expectedOutcomes.map((outcome) => (
+              <li key={outcome} className="flex items-center gap-3">
+                <CheckCircle2 className="h-5 w-5 text-success shrink-0" />
+                <span>{outcome}</span>
+              </li>
+            ))}
+          </ul>
+        </Section>
+
+        <Section title="Situation Assessment">
+          <div className="grid gap-6">
+            <div>
+              <h3 className="text-lg font-semibold mb-2 flex items-center gap-2">
+                <Target className="h-5 w-5 text-primary" />
+                What You Asked For
+              </h3>
+              <p>{data.situationAssessment.clientAsk}</p>
+            </div>
+            <div>
+              <h3 className="text-lg font-semibold mb-2">Current State</h3>
+              <p>{data.situationAssessment.currentState}</p>
+            </div>
+            <div>
+              <h3 className="text-lg font-semibold mb-2">Why This Matters Now</h3>
+              <p>{data.situationAssessment.whyNow}</p>
+            </div>
+          </div>
+        </Section>
+
+        <Section 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
+            assessment.
+          </p>
+          <div className="space-y-4">
+            {data.findings.map((finding, index) => (
+              <FindingCard key={finding.id} finding={finding} index={index} />
+            ))}
+          </div>
+        </Section>
+
+        <Section title="Risk Analysis">
+          <div className="grid gap-6">
+            <Exhibit number={3} title="Existential Risks">
+              <div className="space-y-3">
+                {data.riskAnalysis.existentialRisks.map((risk) => (
+                  <div
+                    key={risk}
+                    className="flex items-start gap-3 p-3 bg-destructive/5 rounded-lg border border-destructive/20"
+                  >
+                    <AlertTriangle className="h-5 w-5 text-destructive shrink-0 mt-0.5" />
+                    <span>{risk}</span>
+                  </div>
+                ))}
+              </div>
+            </Exhibit>
+
+            <Exhibit number={4} title="Competitive Threats">
+              <ul className="space-y-2">
+                {data.riskAnalysis.competitiveThreats.map((threat, i) => (
+                  <li key={threat} className="flex items-start gap-3">
+                    <span className="text-warning font-bold font-sans">{i + 1}.</span>
+                    <span>{threat}</span>
+                  </li>
+                ))}
+              </ul>
+            </Exhibit>
+
+            <div>
+              <h3 className="text-lg font-semibold mb-2">Timeline Pressures</h3>
+              <p>{data.riskAnalysis.timelinePressures}</p>
+            </div>
+          </div>
+        </Section>
+
+        <Section 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">
+            <Lightbulb className="h-5 w-5 text-accent" />
+            What This Requires
+          </h3>
+          <ul className="space-y-3">
+            {data.strategicOpportunity.requirements.map((req, i) => (
+              <li
+                key={req}
+                className="flex items-start gap-3 p-3 bg-accent/5 rounded-lg border border-accent/20"
+              >
+                <span className="text-accent font-bold font-sans">{i + 1}.</span>
+                <span>{req}</span>
+              </li>
+            ))}
+          </ul>
+        </Section>
+
+        <Section title="Strategic Recommendations">
+          <p className="text-muted mb-6">
+            Recommendations are prioritized by urgency and impact.
+          </p>
+          <div className="space-y-4">
+            {data.recommendations.map((rec, index) => (
+              <RecommendationCard key={rec.id} recommendation={rec} index={index} />
+            ))}
+          </div>
+        </Section>
+
+        <Section title="Target State Vision">
+          <p className="text-lg mb-6">{data.targetState.description}</p>
+
+          <Exhibit number={5} title="Key Capabilities Enabled">
+            <div className="grid md:grid-cols-3 gap-4">
+              {data.targetState.keyCapabilities.map((capability) => (
+                <div
+                  key={capability}
+                  className="p-4 bg-success/5 rounded-lg border border-success/20 text-center"
+                >
+                  <CheckCircle2 className="h-8 w-8 text-success mx-auto mb-2" />
+                  <span className="font-medium">{capability}</span>
+                </div>
+              ))}
+            </div>
+          </Exhibit>
+
+          <h3 className="text-lg font-semibold mt-6 mb-3">Success Metrics</h3>
+          <ul className="space-y-2">
+            {data.targetState.successMetrics.map((metric) => (
+              <li key={metric} className="flex items-center gap-3">
+                <span className="w-2 h-2 bg-primary rounded-full" />
+                <span>{metric}</span>
+              </li>
+            ))}
+          </ul>
+        </Section>
+
+        <Section title="Implementation Roadmap">
+          <p className="text-muted mb-6">
+            The transformation should be executed in phases, with clear milestones and
+            decision points.
+          </p>
+          <Exhibit number={6} title="Phased Implementation Plan">
+            <Timeline phases={data.roadmap} />
+          </Exhibit>
+        </Section>
+
+        <Section 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">
+              {data.callToAction.immediateSteps.map((step, i) => (
+                <li key={step} className="flex items-start gap-3">
+                  <span className="shrink-0 w-7 h-7 rounded-full bg-primary text-white flex items-center justify-center font-bold text-sm">
+                    {i + 1}
+                  </span>
+                  <span className="pt-0.5">{step}</span>
+                </li>
+              ))}
+            </ol>
+
+            <h3 className="text-xl font-semibold mb-4">Decision Points Required</h3>
+            <ul className="space-y-2 mb-6">
+              {data.callToAction.decisionPoints.map((point) => (
+                <li key={point} className="flex items-center gap-3">
+                  <span className="w-2 h-2 bg-accent rounded-full" />
+                  <span>{point}</span>
+                </li>
+              ))}
+            </ul>
+
+            <Callout label="Commitment Required">
+              {data.callToAction.commitmentRequired}
+            </Callout>
+          </div>
+        </Section>
+
+        <div className="mt-12 pt-8 border-t border-border text-center text-sm text-muted">
+          <p className="font-semibold text-foreground mb-1">{data.classification}</p>
+          <p>
+            This report was prepared for {data.clientName} and contains confidential
+            information.
+          </p>
+          <p className="mt-2">{data.reportDate}</p>
+        </div>
+      </div>
+    </div>
+  );
+}