install-glo 2.0.0

package/README.md

@@ -0,0 +1,92 @@
+# install-glo
+
+An npm package that does two things:
+
+```bash
+npx install-glo          # → animated business card
+npx install-glo ai       # → AI-powered web vitals optimizer
+```
+
+No install required. Just `npx`.
+
+---
+
+## `npx install-glo`
+
+Renders an animated ASCII neuro shader (a port of a WebGL sine-noise algorithm, in Catppuccin Mocha palette), followed by a business card for **Gonzalo "Glo" Maldonado**.
+
+## `npx install-glo ai`
+
+Starts the **GLO Loop** — an iterative web performance optimizer built on the [Vercel AI SDK](https://sdk.vercel.ai).
+
+It does this:
+
+1. **Gather** — Runs Lighthouse on your URL, extracts Core Web Vitals and diagnostics
+2. **Leverage** — Reads your source files (Next.js App Router, Pages Router, configs), sends metrics + code to Claude or GPT-4o via the Vercel AI SDK
+3. **Operate** — AI returns one surgical fix: file path, line number, before/after code, estimated improvement
+4. **Repeat** — Re-runs Lighthouse to measure the effect, loops until the target vital hits "good"
+
+### Quick start
+
+```bash
+# 1. Set a provider key
+export ANTHROPIC_API_KEY=sk-ant-...    # or OPENAI_API_KEY=sk-...
+
+# 2. Start your dev server
+
+# 3. Run it
+npx install-glo ai
+```
+
+It will prompt for:
+- **Page URL** (default: `http://localhost:3000`)
+- **Target vital** — one of LCP, FCP, CLS, TBT, SI, or TTFB
+- **Max loops** (default: 10)
+
+### Supported vitals
+
+| Vital | Full Name | "Good" Threshold |
+|-------|-----------|-------------------|
+| LCP | Largest Contentful Paint | < 2500ms |
+| FCP | First Contentful Paint | < 1800ms |
+| CLS | Cumulative Layout Shift | < 0.1 |
+| TBT | Total Blocking Time | < 200ms |
+| SI | Speed Index | < 3400ms |
+| TTFB | Time to First Byte | < 800ms |
+
+### Requirements
+
+- Chrome or Chromium (Lighthouse runs headless Chrome)
+- `ANTHROPIC_API_KEY` or `OPENAI_API_KEY`
+- A running dev server at the target URL
+
+## `npx install-glo about`
+
+Prints a formatted explainer of what the GLO Loop is and how to use it.
+
+---
+
+## Install as a dependency
+
+```bash
+npm install install-glo
+```
+
+The postinstall script adds two npm scripts to your project:
+
+- `npm run glo-loop` — starts the optimization loop
+- `npm run about-glo-loop` — prints the explainer
+
+## Built with
+
+- [Vercel AI SDK](https://sdk.vercel.ai) (`ai`, `@ai-sdk/anthropic`, `@ai-sdk/openai`)
+- Lighthouse (via headless Chrome)
+- chalk, boxen
+
+## About
+
+Created by **Gonzalo "Glo" Maldonado** — CTO / VP Eng / Technical Co-Founder.
+20+ years, 5 exits (Yammer → Microsoft $1.2B, Nextdoor IPO).
+AI Infrastructure, Distributed Systems, Engineering Leadership.
+
+[intro.co/GonzaloMaldonado](https://intro.co/GonzaloMaldonado) · [sanscourier.ai](https://sanscourier.ai) · [github.com/elg0nz](https://github.com/elg0nz)

package/about.mjs

@@ -0,0 +1,67 @@
+#!/usr/bin/env node
+
+import chalk from "chalk";
+
+const o = chalk.hex("#FF8C00");
+const g = chalk.hex("#4AF626");
+const d = chalk.dim;
+const w = chalk.white;
+
+console.log(`
+${o.bold("  ┌─────────────────────────────────────────────────────┐")}
+${o.bold("  │")}${o.bold("             T H E   G L O   L O O P                ")}${o.bold("│")}
+${o.bold("  │")}${d("   Web Vitals Optimization Engine                    ")}${o.bold("│")}
+${o.bold("  └─────────────────────────────────────────────────────┘")}
+
+${w.bold("  What is it?")}
+
+  A metrics-centric optimization loop for web performance.
+  ${d("Runs Lighthouse, uses AI to diagnose issues, suggests")}
+  ${d("surgical fixes, re-measures. Repeat until your target is met.")}
+
+${w.bold("  The Loop")}
+
+  ${g("G")}${w("ather")}   ${d("→ Run Lighthouse, extract web vitals")}
+  ${g("L")}${w("everage")} ${d("→ AI reads your source code + diagnostics")}
+  ${g("O")}${w("perate")}  ${d("→ Apply fix, re-measure, repeat")}
+
+${w.bold("  Supported Vitals")}
+
+  ${g("LCP")}   ${d("Largest Contentful Paint    (good: <2500ms)")}
+  ${g("FCP")}   ${d("First Contentful Paint      (good: <1800ms)")}
+  ${g("CLS")}   ${d("Cumulative Layout Shift     (good: <0.1)")}
+  ${g("TBT")}   ${d("Total Blocking Time         (good: <200ms)")}
+  ${g("SI")}    ${d("Speed Index                 (good: <3400ms)")}
+  ${g("TTFB")}  ${d("Time to First Byte          (good: <800ms)")}
+
+${w.bold("  Usage")}
+
+  ${w("npm run glo-loop")}
+  ${d("Interactive — asks for URL, target vital, and max loops.")}
+
+  ${d("Requires an AI provider key:")}
+  ${g("export ANTHROPIC_API_KEY=sk-ant-...")}  ${d("(recommended)")}
+  ${g("export OPENAI_API_KEY=sk-...")}
+
+  ${d("Also requires Chrome (for Lighthouse).")}
+
+${w.bold("  Requirements")}
+
+  ${d("Chrome/Chromium installed (Lighthouse uses it)")}
+  ${d("Dev server running on the target URL")}
+  ${d("ANTHROPIC_API_KEY or OPENAI_API_KEY set")}
+
+${w.bold("  Built With")}
+
+  ${d("Vercel AI SDK")} ${w("(npm i ai)")} ${d("+ Lighthouse + your source code.")}
+
+${w.bold("  About the Creator")}
+
+  ${o("Gonzalo \"Glo\" Maldonado")}
+  ${w("CTO / VP Eng / Technical Co-Founder")}
+  ${d("20+ years, 5 exits (Yammer → Microsoft $1.2B, Nextdoor IPO)")}
+  ${d("AI Infrastructure, Distributed Systems, Engineering Leadership")}
+
+  ${o("Book a call:")}  ${w.underline("intro.co/GonzaloMaldonado")}
+  ${o("Website:")}      ${w.underline("sanscourier.ai")}
+`);

package/card.mjs

@@ -0,0 +1,236 @@
+import chalk from "chalk";
+import boxen from "boxen";
+
+// ── Neuro Shader (ASCII port) ──────────────────────────────────────────
+// Simplified port of the SansCourier WebGL neuro noise shader.
+// Uses the same rotate-and-accumulate-sine algorithm, rendered as
+// dithered ASCII characters in Catppuccin Mocha palette.
+
+const CHARS = " .:-=+*#%@";
+const WIDTH = 58;
+const HEIGHT = 18;
+const FRAMES = 42;
+const FRAME_MS = 60;
+
+const catppuccin = {
+  base: "#1e1e2e",
+  blue: "#89b4fa",
+  lavender: "#b4befe",
+  text: "#cdd6f4",
+  orange: "#FF8C00",
+};
+
+function rot2(x, y, a) {
+  const c = Math.cos(a);
+  const s = Math.sin(a);
+  return [c * x - s * y, s * x + c * y];
+}
+
+function neuroShape(ux, uy, t) {
+  let sax = 0,
+    say = 0;
+  let rx = 0,
+    ry = 0;
+  let scale = 8.0;
+  let uvx = ux,
+    uvy = uy;
+
+  for (let j = 0; j < 8; j++) {
+    [uvx, uvy] = rot2(uvx, uvy, 1.0);
+    [sax, say] = rot2(sax, say, 1.0);
+    const lx = uvx * scale + j + sax - t;
+    const ly = uvy * scale + j + say - t;
+    sax += Math.sin(lx);
+    say += Math.sin(ly);
+    rx += (0.5 + 0.5 * Math.cos(lx)) / scale;
+    ry += (0.5 + 0.5 * Math.cos(ly)) / scale;
+    scale *= 1.2;
+  }
+  return rx + ry;
+}
+
+function renderFrame(t) {
+  const lines = [];
+  for (let y = 0; y < HEIGHT; y++) {
+    let line = "";
+    for (let x = 0; x < WIDTH; x++) {
+      const ux = ((x / WIDTH - 0.5) * 2.0 * WIDTH) / HEIGHT;
+      const uy = (y / HEIGHT - 0.5) * 2.0;
+
+      let noise = neuroShape(ux * 0.7, uy * 0.7, t);
+      noise = 1.1 * Math.pow(noise, 2.0);
+      noise = Math.pow(noise, 1.2);
+      noise = Math.min(1.0, noise);
+
+      const idx = Math.floor(noise * (CHARS.length - 1));
+      const ch = CHARS[idx];
+
+      // Color based on intensity - blend from base to blue to text
+      if (noise < 0.25) {
+        line += chalk.hex(catppuccin.base)(ch);
+      } else if (noise < 0.5) {
+        line += chalk.hex(catppuccin.blue)(ch);
+      } else if (noise < 0.75) {
+        line += chalk.hex(catppuccin.lavender)(ch);
+      } else {
+        line += chalk.hex(catppuccin.text)(ch);
+      }
+    }
+    lines.push(line);
+  }
+  return lines.join("\n");
+}
+
+function sleep(ms) {
+  return new Promise((r) => setTimeout(r, ms));
+}
+
+// ── Business Card ──────────────────────────────────────────────────────
+
+function buildCard() {
+  const d = {
+    name: chalk.bold.hex("#FF8C00")("   Gonzalo \"Glo\" Maldonado"),
+    title: chalk.white("   CTO / VP Eng / Technical Co-Founder"),
+    tagline: chalk.dim.italic(
+      "   Ship value. Say what matters. Measure what counts."
+    ),
+    divider: chalk.hex("#FF8C00")(
+      "   ─────────────────────────────────────"
+    ),
+    exits: chalk.white("   5 exits") + chalk.dim(" including:"),
+    exit1:
+      chalk.hex("#4AF626")("     Yammer → Microsoft") +
+      chalk.dim("  ($1.2B)"),
+    exit2: chalk.hex("#4AF626")("     Nextdoor → IPO"),
+    experience:
+      chalk.white("   20+ years") + chalk.dim(" engineering leadership"),
+    focus:
+      chalk.white("   Focus: ") +
+      chalk.dim("AI Infrastructure, Distributed Systems"),
+    web:
+      chalk.hex("#FF8C00")("   web") +
+      chalk.dim("      → ") +
+      chalk.white("sanscourier.ai"),
+    book:
+      chalk.hex("#FF8C00")("   book") +
+      chalk.dim("     → ") +
+      chalk.white("intro.co/GonzaloMaldonado"),
+    linkedin:
+      chalk.hex("#FF8C00")("   linkedin") +
+      chalk.dim(" → ") +
+      chalk.white("linkedin.com/in/elg0nz"),
+    github:
+      chalk.hex("#FF8C00")("   github") +
+      chalk.dim("   → ") +
+      chalk.white("github.com/elg0nz"),
+    email:
+      chalk.hex("#FF8C00")("   email") +
+      chalk.dim("    → ") +
+      chalk.white("glo@sanscourier.ai"),
+    cta:
+      chalk.bold.hex("#FF8C00")("   Ready to talk? ") +
+      chalk.underline.white("intro.co/GonzaloMaldonado"),
+  };
+
+  const card = [
+    "",
+    d.name,
+    d.title,
+    d.tagline,
+    "",
+    d.divider,
+    "",
+    d.exits,
+    d.exit1,
+    d.exit2,
+    d.experience,
+    d.focus,
+    "",
+    d.divider,
+    "",
+    d.web,
+    d.book,
+    d.linkedin,
+    d.github,
+    d.email,
+    "",
+    d.divider,
+    "",
+    d.cta,
+    "",
+  ].join("\n");
+
+  return boxen(card, {
+    padding: 1,
+    margin: 1,
+    borderStyle: "double",
+    borderColor: "#FF8C00",
+  });
+}
+
+// ── Main ───────────────────────────────────────────────────────────────
+
+async function main() {
+  const isTTY = process.stdout.isTTY;
+
+  if (isTTY) {
+    // Hide cursor during animation
+    process.stdout.write("\x1B[?25l");
+
+    const label = chalk.hex(catppuccin.orange)(
+      "  ╔══════════════════════════════════════════════════════════╗"
+    );
+    const labelBottom = chalk.hex(catppuccin.orange)(
+      "  ╚══════════════════════════════════════════════════════════╝"
+    );
+    const brandText = chalk.bold.hex(catppuccin.orange)(
+      "                     sanscourier.ai"
+    );
+
+    for (let f = 0; f < FRAMES; f++) {
+      const t = (f / FRAMES) * Math.PI * 2 * 0.8;
+      const frame = renderFrame(t);
+
+      // Move cursor to top-left and draw
+      process.stdout.write("\x1B[H\x1B[2J");
+      process.stdout.write("\n");
+      process.stdout.write(label + "\n");
+      process.stdout.write(frame + "\n");
+      process.stdout.write(labelBottom + "\n");
+      process.stdout.write(brandText + "\n");
+
+      await sleep(FRAME_MS);
+    }
+
+    // Show cursor again
+    process.stdout.write("\x1B[?25l");
+    process.stdout.write("\x1B[H\x1B[2J");
+  }
+
+  console.log(buildCard());
+  console.log(
+    chalk.dim(
+      "\n  Tip: Run " +
+        chalk.white("npx install-glo") +
+        " anytime to see this card again."
+    )
+  );
+  console.log(
+    chalk.dim(
+      "        Run " +
+        chalk.white("npx install-glo ai") +
+        " to chat with an AI that knows Glo.\n"
+    )
+  );
+
+  // Restore cursor
+  if (isTTY) {
+    process.stdout.write("\x1B[?25h");
+  }
+}
+
+main().catch(() => {
+  // Restore cursor on error
+  process.stdout.write("\x1B[?25h");
+  process.exit(1);
+});

package/glo-loop.mjs

@@ -0,0 +1,674 @@
+#!/usr/bin/env node
+
+import { createInterface } from "node:readline/promises";
+import { execSync } from "node:child_process";
+import { readFileSync, existsSync } from "node:fs";
+import { join, relative } from "node:path";
+import { generateText } from "ai";
+import { createAnthropic } from "@ai-sdk/anthropic";
+import { createOpenAI } from "@ai-sdk/openai";
+import chalk from "chalk";
+
+// ── Provider ───────────────────────────────────────────────────────────
+
+function getModel() {
+  if (process.env.ANTHROPIC_API_KEY) {
+    const anthropic = createAnthropic();
+    return {
+      model: anthropic("claude-sonnet-4-20250514"),
+      label: "Claude (Anthropic)",
+    };
+  }
+  if (process.env.OPENAI_API_KEY) {
+    const openai = createOpenAI();
+    return { model: openai("gpt-4o-mini"), label: "GPT-4o-mini (OpenAI)" };
+  }
+  return null;
+}
+
+// ── Web Vitals ─────────────────────────────────────────────────────────
+
+const VITALS = {
+  LCP: {
+    good: 2500,
+    unit: "ms",
+    name: "Largest Contentful Paint",
+    audit: "largest-contentful-paint",
+  },
+  FCP: {
+    good: 1800,
+    unit: "ms",
+    name: "First Contentful Paint",
+    audit: "first-contentful-paint",
+  },
+  CLS: {
+    good: 0.1,
+    unit: "",
+    name: "Cumulative Layout Shift",
+    audit: "cumulative-layout-shift",
+  },
+  TBT: {
+    good: 200,
+    unit: "ms",
+    name: "Total Blocking Time",
+    audit: "total-blocking-time",
+  },
+  SI: {
+    good: 3400,
+    unit: "ms",
+    name: "Speed Index",
+    audit: "speed-index",
+  },
+  TTFB: {
+    good: 800,
+    unit: "ms",
+    name: "Time to First Byte",
+    audit: "server-response-time",
+  },
+};
+
+// ── Lighthouse ─────────────────────────────────────────────────────────
+
+function checkLighthouse() {
+  try {
+    execSync("npx -y lighthouse --version", { stdio: "pipe" });
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+function runLighthouse(url) {
+  const cmd = [
+    "npx -y lighthouse",
+    `"${url}"`,
+    "--output=json",
+    '--chrome-flags="--headless --no-sandbox"',
+    "--only-categories=performance",
+    "--quiet",
+  ].join(" ");
+
+  const result = execSync(cmd, {
+    maxBuffer: 100 * 1024 * 1024,
+    stdio: ["pipe", "pipe", "pipe"],
+  });
+  return JSON.parse(result.toString());
+}
+
+function extractMetrics(report) {
+  const metrics = {};
+  for (const [key, info] of Object.entries(VITALS)) {
+    const audit = report.audits?.[info.audit];
+    if (audit) {
+      metrics[key] = {
+        value: audit.numericValue,
+        display: audit.displayValue,
+        score: audit.score,
+      };
+    }
+  }
+  metrics.performanceScore = Math.round(
+    (report.categories?.performance?.score || 0) * 100
+  );
+  return metrics;
+}
+
+function extractDiagnostics(report) {
+  const relevant = [
+    "render-blocking-resources",
+    "unused-css-rules",
+    "unused-javascript",
+    "modern-image-formats",
+    "uses-optimized-images",
+    "uses-responsive-images",
+    "offscreen-images",
+    "unminified-css",
+    "unminified-javascript",
+    "dom-size",
+    "critical-request-chains",
+    "largest-contentful-paint-element",
+    "layout-shift-elements",
+    "long-tasks",
+    "mainthread-work-breakdown",
+    "bootup-time",
+    "font-display",
+    "uses-text-compression",
+    "duplicated-javascript",
+    "legacy-javascript",
+    "total-byte-weight",
+  ];
+
+  const issues = [];
+  for (const id of relevant) {
+    const audit = report.audits?.[id];
+    if (audit && audit.score !== null && audit.score < 1) {
+      issues.push({
+        id,
+        title: audit.title,
+        displayValue: audit.displayValue || "",
+        score: audit.score,
+      });
+    }
+  }
+  return issues.sort((a, b) => a.score - b.score); // worst first
+}
+
+// ── Source File Discovery ──────────────────────────────────────────────
+
+function discoverPageFiles(projectRoot, route) {
+  const routePath = route === "/" ? "" : route.replace(/^\//, "");
+  const files = [];
+
+  const candidates = [
+    // Next.js App Router
+    join("app", routePath, "page.tsx"),
+    join("app", routePath, "page.jsx"),
+    join("app", routePath, "page.js"),
+    join("app", routePath, "layout.tsx"),
+    join("app", routePath, "layout.jsx"),
+    join("app", "layout.tsx"),
+    join("app", "layout.jsx"),
+    // src/app
+    join("src", "app", routePath, "page.tsx"),
+    join("src", "app", routePath, "layout.tsx"),
+    join("src", "app", "layout.tsx"),
+    // Next.js Pages Router
+    join("pages", routePath + ".tsx"),
+    join("pages", routePath + ".jsx"),
+    join("pages", routePath, "index.tsx"),
+    join("pages", routePath, "index.jsx"),
+    // Config files relevant to performance
+    "next.config.ts",
+    "next.config.js",
+    "next.config.mjs",
+    "vite.config.ts",
+    "vite.config.js",
+  ];
+
+  for (const rel of candidates) {
+    const full = join(projectRoot, rel);
+    if (existsSync(full)) {
+      try {
+        const content = readFileSync(full, "utf8");
+        if (content.length < 15000) {
+          files.push({ path: rel, content });
+        } else {
+          files.push({
+            path: rel,
+            content: content.slice(0, 15000) + "\n// ... truncated",
+          });
+        }
+      } catch {}
+    }
+  }
+
+  // Scan for component imports from the page file
+  if (files.length > 0) {
+    const pageFile = files[0];
+    const importRegex = /from\s+["']([./][^"']+)["']/g;
+    let match;
+    while ((match = importRegex.exec(pageFile.content)) !== null) {
+      const importPath = match[1];
+      const possiblePaths = [
+        importPath + ".tsx",
+        importPath + ".jsx",
+        importPath + ".ts",
+        importPath + ".js",
+        join(importPath, "index.tsx"),
+      ];
+      for (const p of possiblePaths) {
+        const resolved = join(
+          projectRoot,
+          files[0].path.replace(/[^/]+$/, ""),
+          p
+        );
+        if (existsSync(resolved)) {
+          try {
+            const content = readFileSync(resolved, "utf8");
+            const relPath = relative(projectRoot, resolved);
+            if (!files.find((f) => f.path === relPath)) {
+              files.push({
+                path: relPath,
+                content:
+                  content.length > 8000
+                    ? content.slice(0, 8000) + "\n// ... truncated"
+                    : content,
+              });
+            }
+          } catch {}
+          break;
+        }
+      }
+    }
+  }
+
+  return files;
+}
+
+// ── Display Helpers ────────────────────────────────────────────────────
+
+function formatVital(key, value) {
+  const info = VITALS[key];
+  if (!info || value === undefined || value === null) return null;
+  const passed = key === "CLS" ? value <= info.good : value <= info.good;
+  const formatted =
+    info.unit === "ms" ? `${Math.round(value)}ms` : value.toFixed(3);
+  const icon = passed ? chalk.green("✓") : chalk.red("✗");
+  const color = passed ? chalk.green : chalk.red;
+  return (
+    `    ${chalk.white(key.padEnd(6))}` +
+    `${color(formatted.padStart(9))}` +
+    `  ${chalk.dim(`(good: <${info.good}${info.unit})`)} ${icon}`
+  );
+}
+
+function printBanner() {
+  const lines = [
+    "",
+    chalk.hex("#FF8C00").bold(
+      "  ┌─────────────────────────────────────────────────────┐"
+    ),
+    chalk.hex("#FF8C00").bold("  │") +
+      chalk.hex("#FF8C00").bold(
+        "             T H E   G L O   L O O P                "
+      ) +
+      chalk.hex("#FF8C00").bold("│"),
+    chalk.hex("#FF8C00").bold("  │") +
+      chalk.dim(
+        "   Web Vitals Optimization Engine                    "
+      ) +
+      chalk.hex("#FF8C00").bold("│"),
+    chalk.hex("#FF8C00").bold("  │") +
+      chalk.dim(
+        "                                                     "
+      ) +
+      chalk.hex("#FF8C00").bold("│"),
+    chalk.hex("#FF8C00").bold("  │") +
+      chalk.hex("#4AF626")("    G") +
+      chalk.white("ather    → ") +
+      chalk.dim("run Lighthouse, extract metrics    ") +
+      chalk.hex("#FF8C00").bold("│"),
+    chalk.hex("#FF8C00").bold("  │") +
+      chalk.hex("#4AF626")("    L") +
+      chalk.white("everage  → ") +
+      chalk.dim("AI analyzes code + diagnostics    ") +
+      chalk.hex("#FF8C00").bold("│"),
+    chalk.hex("#FF8C00").bold("  │") +
+      chalk.hex("#4AF626")("    O") +
+      chalk.white("perate   → ") +
+      chalk.dim("apply fix, re-measure, repeat     ") +
+      chalk.hex("#FF8C00").bold("│"),
+    chalk.hex("#FF8C00").bold("  │") +
+      chalk.dim(
+        "                                                     "
+      ) +
+      chalk.hex("#FF8C00").bold("│"),
+    chalk.hex("#FF8C00").bold("  │") +
+      chalk.dim("    ↻ repeat until target met") +
+      chalk.dim(
+        "                         "
+      ) +
+      chalk.hex("#FF8C00").bold("│"),
+    chalk.hex("#FF8C00").bold(
+      "  └─────────────────────────────────────────────────────┘"
+    ),
+    "",
+  ];
+  console.log(lines.join("\n"));
+}
+
+// ── AI Analysis ────────────────────────────────────────────────────────
+
+async function analyzeWithAI(
+  model,
+  targetVital,
+  metrics,
+  diagnostics,
+  sourceFiles,
+  loopNumber,
+  previousSuggestions
+) {
+  const vitalInfo = VITALS[targetVital];
+
+  const sourceContext = sourceFiles
+    .map((f) => `--- ${f.path} ---\n${f.content}`)
+    .join("\n\n");
+
+  const diagText = diagnostics
+    .slice(0, 10)
+    .map(
+      (d) =>
+        `- ${d.title}${d.displayValue ? ` (${d.displayValue})` : ""} [score: ${d.score}]`
+    )
+    .join("\n");
+
+  const metricsText = Object.entries(metrics)
+    .filter(([k]) => k !== "performanceScore")
+    .map(([k, v]) => {
+      const info = VITALS[k];
+      if (!info) return null;
+      const val = info.unit === "ms" ? `${Math.round(v.value)}ms` : v.value?.toFixed(3);
+      const status = v.value <= info.good ? "PASS" : "FAIL";
+      return `  ${k}: ${val} (good: <${info.good}${info.unit}) [${status}]`;
+    })
+    .filter(Boolean)
+    .join("\n");
+
+  const prevContext =
+    previousSuggestions.length > 0
+      ? `\n\nPrevious suggestions already applied:\n${previousSuggestions.map((s, i) => `${i + 1}. ${s}`).join("\n")}\n\nDo NOT repeat these. Find the NEXT optimization.`
+      : "";
+
+  const prompt = `You are a frontend infrastructure engineer optimizing web performance.
+
+## Current Metrics (Loop ${loopNumber})
+Performance Score: ${metrics.performanceScore}/100
+${metricsText}
+
+## Target
+Optimize ${targetVital} (${vitalInfo.name}): currently ${metrics[targetVital]?.value !== undefined ? (vitalInfo.unit === "ms" ? Math.round(metrics[targetVital].value) + "ms" : metrics[targetVital].value.toFixed(3)) : "unknown"}, target: <${vitalInfo.good}${vitalInfo.unit}
+
+## Lighthouse Diagnostics (sorted by severity)
+${diagText || "No failing diagnostics."}
+
+## Source Files
+${sourceContext || "No source files found for this route."}
+${prevContext}
+
+## Instructions
+
+Respond in EXACTLY this format (no markdown fences):
+
+DIAGNOSIS: One sentence explaining what is causing the ${targetVital} issue.
+
+FILE: path/to/file.ext
+LINE: approximate line number (or "new" if adding to config)
+
+BEFORE:
+<exact code to replace, or "N/A" if adding new code>
+
+AFTER:
+<optimized code>
+
+WHY: One sentence on expected impact with estimated improvement in ${vitalInfo.unit || "score"}.
+
+Keep the fix SURGICAL — one change per loop. Prefer high-impact, low-risk changes:
+- Image optimization (priority, sizes, lazy/eager, format)
+- Font loading (display: swap, preload, subset)
+- Bundle optimization (dynamic imports, tree shaking)
+- Render-blocking resources (async, defer, preload)
+- Layout shift prevention (explicit dimensions, aspect-ratio)
+- Server response (caching, compression, CDN)
+- Component-level code splitting`;
+
+  const result = await generateText({
+    model,
+    prompt,
+  });
+
+  return result.text;
+}
+
+// ── Main ───────────────────────────────────────────────────────────────
+
+async function main() {
+  printBanner();
+
+  const resolved = getModel();
+  if (!resolved) {
+    console.log(chalk.white("  Set an API key to power the AI analysis:\n"));
+    console.log(
+      chalk.hex("#4AF626")("    export ANTHROPIC_API_KEY=sk-ant-...") +
+        chalk.dim("  (recommended)")
+    );
+    console.log(chalk.hex("#4AF626")("    export OPENAI_API_KEY=sk-..."));
+    console.log(
+      chalk.dim("\n  Then run: ") +
+        chalk.white("npm run glo-loop") +
+        "\n"
+    );
+    process.exit(1);
+  }
+
+  const { model, label } = resolved;
+  const rl = createInterface({ input: process.stdin, output: process.stdout });
+
+  console.log(chalk.dim(`  AI: ${label} via Vercel AI SDK\n`));
+
+  // ── Collect inputs ────────────────────────────────────────────────
+
+  const url = await rl.question(
+    chalk.hex("#FF8C00")("  Page URL ") +
+      chalk.dim("(default: http://localhost:3000): ")
+  );
+  const targetUrl = url.trim() || "http://localhost:3000";
+
+  // Extract route from URL for source file discovery
+  let route = "/";
+  try {
+    const parsed = new URL(targetUrl);
+    route = parsed.pathname;
+  } catch {}
+
+  console.log("");
+  console.log(chalk.white("  Available web vitals:"));
+  for (const [key, info] of Object.entries(VITALS)) {
+    console.log(
+      chalk.hex("#4AF626")(`    ${key.padEnd(6)}`) +
+        chalk.dim(`${info.name} (good: <${info.good}${info.unit})`)
+    );
+  }
+  console.log("");
+
+  const vitalInput = await rl.question(
+    chalk.hex("#FF8C00")("  Target vital ") + chalk.dim("(default: LCP): ")
+  );
+  const targetVital = (vitalInput.trim().toUpperCase() || "LCP");
+  if (!VITALS[targetVital]) {
+    console.log(chalk.red(`\n  Unknown vital: ${targetVital}`));
+    console.log(chalk.dim(`  Choose from: ${Object.keys(VITALS).join(", ")}\n`));
+    rl.close();
+    process.exit(1);
+  }
+
+  const maxInput = await rl.question(
+    chalk.hex("#FF8C00")("  Max loops ") + chalk.dim("(default: 10): ")
+  );
+  const maxLoops = parseInt(maxInput.trim(), 10) || 10;
+
+  console.log("");
+  console.log(
+    chalk.hex("#FF8C00")("  Target: ") +
+      chalk.white(
+        `${targetVital} < ${VITALS[targetVital].good}${VITALS[targetVital].unit}`
+      ) +
+      chalk.dim(` on ${targetUrl}`)
+  );
+  console.log(
+    chalk.hex("#FF8C00")("  Loops:  ") + chalk.white(`${maxLoops} max`)
+  );
+
+  // Discover source files
+  const projectRoot = process.env.INIT_CWD || process.cwd();
+  const sourceFiles = discoverPageFiles(projectRoot, route);
+  if (sourceFiles.length > 0) {
+    console.log(
+      chalk.hex("#FF8C00")("  Files:  ") +
+        chalk.dim(sourceFiles.map((f) => f.path).join(", "))
+    );
+  }
+
+  const previousSuggestions = [];
+
+  // ── The Loop ────────────────────────────────────────────────────
+
+  for (let loop = 1; loop <= maxLoops; loop++) {
+    console.log(
+      chalk.hex("#FF8C00")(
+        `\n  ── Loop ${loop}/${maxLoops} ${"─".repeat(42)}`
+      )
+    );
+
+    // ── GATHER ──────────────────────────────────────────────────
+
+    console.log(chalk.hex("#4AF626").bold("\n  GATHER"));
+    console.log(chalk.dim("  Running Lighthouse...\n"));
+
+    let report, metrics, diagnostics;
+    try {
+      report = runLighthouse(targetUrl);
+      metrics = extractMetrics(report);
+      diagnostics = extractDiagnostics(report);
+    } catch (err) {
+      console.log(chalk.red(`  Lighthouse failed: ${err.message}`));
+      console.log(chalk.dim("  Is the page running? Is Chrome installed?\n"));
+      const retry = await rl.question(
+        chalk.hex("#FF8C00")("  Retry? ") + chalk.dim("[y/n]: ")
+      );
+      if (retry.trim().toLowerCase() === "y") {
+        loop--;
+        continue;
+      }
+      break;
+    }
+
+    console.log(
+      chalk.white(`    Score   `) +
+        chalk.bold(
+          metrics.performanceScore >= 90
+            ? chalk.green(`${metrics.performanceScore}/100`)
+            : metrics.performanceScore >= 50
+              ? chalk.yellow(`${metrics.performanceScore}/100`)
+              : chalk.red(`${metrics.performanceScore}/100`)
+        )
+    );
+
+    for (const key of Object.keys(VITALS)) {
+      const line = formatVital(key, metrics[key]?.value);
+      if (line) console.log(line);
+    }
+
+    // Check if target is already met
+    const currentValue = metrics[targetVital]?.value;
+    if (currentValue !== undefined && currentValue <= VITALS[targetVital].good) {
+      console.log(
+        chalk.green.bold(
+          `\n  Target met! ${targetVital} = ${VITALS[targetVital].unit === "ms" ? Math.round(currentValue) + "ms" : currentValue.toFixed(3)} (good: <${VITALS[targetVital].good}${VITALS[targetVital].unit})`
+        )
+      );
+      if (loop === 1) {
+        console.log(
+          chalk.dim(
+            "  This page is already performing well for " + targetVital + "."
+          )
+        );
+      } else {
+        console.log(
+          chalk.dim(`  Took ${loop - 1} optimization loop(s).`)
+        );
+      }
+      console.log(
+        chalk.dim(
+          "\n  Want deeper optimization? " +
+            chalk.white.underline("intro.co/GonzaloMaldonado") +
+            "\n"
+        )
+      );
+      break;
+    }
+
+    // ── LEVERAGE ─────────────────────────────────────────────────
+
+    console.log(chalk.hex("#4AF626").bold("\n  LEVERAGE"));
+    console.log(chalk.dim("  Analyzing with AI...\n"));
+
+    let suggestion;
+    try {
+      suggestion = await analyzeWithAI(
+        model,
+        targetVital,
+        metrics,
+        diagnostics,
+        sourceFiles,
+        loop,
+        previousSuggestions
+      );
+    } catch (err) {
+      console.log(chalk.red(`  AI analysis failed: ${err.message}\n`));
+      break;
+    }
+
+    // Display the suggestion
+    for (const line of suggestion.split("\n")) {
+      if (
+        line.startsWith("DIAGNOSIS:") ||
+        line.startsWith("FILE:") ||
+        line.startsWith("LINE:") ||
+        line.startsWith("WHY:")
+      ) {
+        const [label, ...rest] = line.split(":");
+        console.log(
+          chalk.hex("#FF8C00")(`    ${label}:`) +
+            chalk.white(rest.join(":"))
+        );
+      } else if (line.startsWith("BEFORE:") || line.startsWith("AFTER:")) {
+        console.log(chalk.hex("#FF8C00")(`    ${line}`));
+      } else {
+        console.log(chalk.hex("#89b4fa")(`    ${line}`));
+      }
+    }
+
+    // ── OPERATE ─────────────────────────────────────────────────
+
+    console.log(chalk.hex("#4AF626").bold("\n  OPERATE"));
+    const action = await rl.question(
+      chalk.hex("#FF8C00")("  Apply this fix? ") +
+        chalk.dim("[y = apply / s = skip / q = quit]: ")
+    );
+
+    const choice = action.trim().toLowerCase();
+    if (choice === "q" || choice === "quit") {
+      console.log(chalk.dim("\n  Loop ended by user.\n"));
+      break;
+    }
+
+    if (choice === "y" || choice === "yes") {
+      previousSuggestions.push(suggestion.split("\n")[0]); // store diagnosis
+      console.log(
+        chalk.dim(
+          "  Apply the change above to your code, then press Enter to re-measure."
+        )
+      );
+      await rl.question(chalk.dim("  Press Enter when ready..."));
+      // Re-read source files in case they changed
+      const updatedFiles = discoverPageFiles(projectRoot, route);
+      if (updatedFiles.length > 0) {
+        sourceFiles.length = 0;
+        sourceFiles.push(...updatedFiles);
+      }
+    } else {
+      previousSuggestions.push(`SKIPPED: ${suggestion.split("\n")[0]}`);
+      console.log(chalk.dim("  Skipped. Moving to next suggestion.\n"));
+    }
+
+    if (loop === maxLoops) {
+      console.log(
+        chalk.hex("#FF8C00")(`\n  Reached max loops (${maxLoops}).`)
+      );
+      console.log(
+        chalk.dim(
+          "  For deeper performance work: " +
+            chalk.white.underline("intro.co/GonzaloMaldonado") +
+            "\n"
+        )
+      );
+    }
+  }
+
+  rl.close();
+}
+
+main().catch((err) => {
+  console.error(chalk.red(`\n  Error: ${err.message}\n`));
+  process.exit(1);
+});

package/index.mjs

@@ -0,0 +1,16 @@
+#!/usr/bin/env node
+
+// install-glo CLI router
+// npx install-glo       → business card
+// npx install-glo ai    → glo-loop (web vitals optimizer)
+// npx install-glo about → about-glo-loop
+
+const cmd = process.argv[2];
+
+if (cmd === "ai" || cmd === "loop") {
+  await import("./glo-loop.mjs");
+} else if (cmd === "about") {
+  await import("./about.mjs");
+} else {
+  await import("./card.mjs");
+}

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "install-glo",
+  "version": "2.0.0",
+  "description": "GLO Loop — AI-powered web vitals optimization engine built with Vercel AI SDK",
+  "main": "index.mjs",
+  "bin": {
+    "install-glo": "index.mjs",
+    "glo": "index.mjs",
+    "glo-loop": "glo-loop.mjs",
+    "about-glo-loop": "about.mjs"
+  },
+  "scripts": {
+    "postinstall": "node postinstall.mjs"
+  },
+  "type": "module",
+  "keywords": [
+    "web-vitals",
+    "lighthouse",
+    "performance",
+    "optimization",
+    "ai-sdk",
+    "vercel-ai",
+    "lcp",
+    "cls",
+    "core-web-vitals",
+    "devtool",
+    "cli",
+    "gonzalo-maldonado",
+    "sanscourier"
+  ],
+  "author": "Gonzalo Maldonado <glo@sanscourier.ai>",
+  "license": "MIT",
+  "dependencies": {
+    "@ai-sdk/anthropic": "^3.0.63",
+    "@ai-sdk/openai": "^3.0.47",
+    "ai": "^6.0.134",
+    "boxen": "^8.0.1",
+    "chalk": "^5.4.1"
+  }
+}

package/postinstall.mjs

@@ -0,0 +1,43 @@
+#!/usr/bin/env node
+
+import { readFileSync, writeFileSync } from "node:fs";
+import { resolve } from "node:path";
+
+// INIT_CWD is the directory where `npm install` was originally run.
+// This ensures we modify the host project's package.json, not our own.
+const projectRoot = process.env.INIT_CWD || process.cwd();
+const pkgPath = resolve(projectRoot, "package.json");
+
+try {
+  const raw = readFileSync(pkgPath, "utf8");
+  const pkg = JSON.parse(raw);
+
+  // Don't modify our own package.json
+  if (pkg.name === "install-glo") process.exit(0);
+
+  let modified = false;
+  pkg.scripts = pkg.scripts || {};
+
+  if (!pkg.scripts["glo-loop"]) {
+    pkg.scripts["glo-loop"] = "glo-loop";
+    modified = true;
+  }
+
+  if (!pkg.scripts["about-glo-loop"]) {
+    pkg.scripts["about-glo-loop"] = "about-glo-loop";
+    modified = true;
+  }
+
+  if (modified) {
+    // Preserve original formatting (detect indent)
+    const indent = raw.match(/^(\s+)"/m)?.[1] || "  ";
+    writeFileSync(pkgPath, JSON.stringify(pkg, null, indent) + "\n");
+    console.log(
+      "\n  \x1b[38;2;255;140;0m✓\x1b[0m Added scripts to package.json:"
+    );
+    console.log("    \x1b[37mnpm run glo-loop\x1b[0m       → Web vitals optimization loop");
+    console.log("    \x1b[37mnpm run about-glo-loop\x1b[0m → What is the GLO Loop?\n");
+  }
+} catch {
+  // Silently fail — this is a postinstall hook, should never block install
+}