@ibgib/space-gib 0.0.35 → 0.0.36

package/src/client/css/tutorial.css

@@ -0,0 +1,327 @@
+/**
+ * tutorial.css — Styles for the Space-Gib Interactive Tutorial & Spotlight Tour
+ */
+
+.tutorial-overlay-container {
+    position: fixed;
+    inset: 0;
+    z-index: 10000;
+    pointer-events: none;
+    overflow: hidden;
+    transition: opacity 0.3s ease;
+}
+
+/* Semi-transparent dimmer backdrop (active only when no spotlight target) */
+.tutorial-backdrop {
+    position: absolute;
+    inset: 0;
+    background: rgba(8, 10, 15, 0.82);
+    backdrop-filter: blur(4px);
+    -webkit-backdrop-filter: blur(4px);
+    pointer-events: auto;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+}
+
+.tutorial-backdrop.backdrop-active {
+    opacity: 1;
+}
+
+/* Glowing spotlight ring around the active target with 100% crystal-clear cutout */
+.tutorial-spotlight-ring {
+    position: absolute;
+    border-radius: 8px;
+    background: transparent !important;
+    box-shadow: 0 0 0 9999px rgba(8, 10, 15, 0.82),
+                0 0 0 3px rgba(255, 204, 0, 0.85),
+                0 0 25px 6px rgba(255, 180, 0, 0.45);
+    pointer-events: none;
+    transition: top 0.35s cubic-bezier(0.2, 0.9, 0.3, 1),
+                left 0.35s cubic-bezier(0.2, 0.9, 0.3, 1),
+                width 0.35s cubic-bezier(0.2, 0.9, 0.3, 1),
+                height 0.35s cubic-bezier(0.2, 0.9, 0.3, 1),
+                opacity 0.25s ease;
+    z-index: 10001;
+}
+
+/* Animated Virtual Mouse Cursor */
+.tutorial-cursor {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 32px;
+    height: 32px;
+    z-index: 10006;
+    pointer-events: none;
+    opacity: 0;
+    transform: translate(-9999px, -9999px);
+    transition: opacity 0.25s ease;
+}
+
+.tutorial-cursor.visible {
+    opacity: 1;
+}
+
+.tutorial-cursor-pointer {
+    filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.7));
+    transition: transform 0.12s ease;
+    transform-origin: 0 0;
+}
+
+.tutorial-cursor.clicking .tutorial-cursor-pointer {
+    transform: scale(0.82);
+}
+
+.tutorial-cursor-ripple {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    border: 2px solid #ffd700;
+    background: rgba(255, 215, 0, 0.25);
+    box-shadow: 0 0 16px rgba(255, 215, 0, 0.85);
+    transform: translate(-18px, -18px) scale(0);
+    opacity: 0;
+    pointer-events: none;
+}
+
+.tutorial-cursor.clicking .tutorial-cursor-ripple {
+    animation: cursor-ripple-anim 0.55s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
+}
+
+@keyframes cursor-ripple-anim {
+    0% {
+        transform: translate(-18px, -18px) scale(0.2);
+        opacity: 1;
+    }
+    100% {
+        transform: translate(-18px, -18px) scale(2.5);
+        opacity: 0;
+    }
+}
+
+/* Movable Golden Beacon Button */
+.tutorial-beacon {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 18px;
+    background: linear-gradient(135deg, #ffd700 0%, #ff9900 100%);
+    color: #121212;
+    font-family: inherit;
+    font-size: 0.95rem;
+    font-weight: 700;
+    border: 2px solid rgba(255, 255, 255, 0.8);
+    border-radius: 9999px;
+    box-shadow: 0 4px 20px rgba(255, 180, 0, 0.65), 0 0 30px rgba(255, 215, 0, 0.4);
+    cursor: pointer;
+    pointer-events: auto;
+    z-index: 10002;
+    transition: top 0.35s cubic-bezier(0.2, 0.9, 0.3, 1),
+                left 0.35s cubic-bezier(0.2, 0.9, 0.3, 1),
+                transform 0.2s ease,
+                box-shadow 0.2s ease,
+                opacity 0.25s ease;
+    animation: beacon-pulse 2s infinite ease-in-out;
+}
+
+.tutorial-beacon:hover {
+    transform: scale(1.06);
+    box-shadow: 0 6px 28px rgba(255, 190, 0, 0.85), 0 0 40px rgba(255, 230, 100, 0.6);
+}
+
+.tutorial-beacon:active {
+    transform: scale(0.96);
+}
+
+.tutorial-beacon-icon {
+    font-size: 1.15rem;
+    line-height: 1;
+}
+
+.tutorial-beacon-text {
+    letter-spacing: 0.02em;
+}
+
+@keyframes beacon-pulse {
+    0%, 100% {
+        box-shadow: 0 4px 20px rgba(255, 180, 0, 0.65), 0 0 15px rgba(255, 215, 0, 0.4);
+    }
+    50% {
+        box-shadow: 0 4px 30px rgba(255, 200, 0, 0.9), 0 0 35px rgba(255, 230, 50, 0.7);
+    }
+}
+
+/* Floating Glassmorphic Narration Card */
+.tutorial-card {
+    position: absolute;
+    width: 440px;
+    max-width: calc(100vw - 32px);
+    background: rgba(18, 22, 34, 0.95);
+    backdrop-filter: blur(16px);
+    -webkit-backdrop-filter: blur(16px);
+    border: 1px solid rgba(255, 215, 0, 0.35);
+    border-radius: 14px;
+    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.75), 0 0 20px rgba(255, 200, 0, 0.15);
+    padding: 22px 24px;
+    color: #e2e8f0;
+    pointer-events: auto;
+    z-index: 10002;
+    transition: top 0.35s cubic-bezier(0.2, 0.9, 0.3, 1),
+                left 0.35s cubic-bezier(0.2, 0.9, 0.3, 1),
+                opacity 0.25s ease;
+}
+
+.tutorial-card.placement-center {
+    top: 50% !important;
+    left: 50% !important;
+    transform: translate(-50%, -50%);
+    width: 620px;
+    border-color: rgba(255, 215, 0, 0.45);
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.85), 0 0 40px rgba(255, 200, 0, 0.25);
+}
+
+.tutorial-card-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 12px;
+}
+
+.tutorial-step-badge {
+    font-size: 0.75rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: #ffd700;
+    background: rgba(255, 215, 0, 0.12);
+    padding: 4px 10px;
+    border-radius: 9999px;
+    border: 1px solid rgba(255, 215, 0, 0.3);
+}
+
+.tutorial-card-close {
+    background: none;
+    border: none;
+    color: #94a3b8;
+    font-size: 1.25rem;
+    cursor: pointer;
+    padding: 4px 8px;
+    border-radius: 6px;
+    transition: color 0.15s ease, background 0.15s ease;
+}
+
+.tutorial-card-close:hover {
+    color: #ffffff;
+    background: rgba(255, 255, 255, 0.1);
+}
+
+.tutorial-card-title {
+    margin: 0 0 12px 0;
+    font-size: 1.25rem;
+    font-weight: 700;
+    color: #ffffff;
+    line-height: 1.35;
+}
+
+.tutorial-card-body {
+    font-size: 0.92rem;
+    line-height: 1.6;
+    color: #cbd5e1;
+    margin-bottom: 20px;
+    max-height: 55vh;
+    overflow-y: auto;
+}
+
+.tutorial-card-body p {
+    margin: 0 0 10px 0;
+}
+
+.tutorial-card-body p:last-child {
+    margin-bottom: 0;
+}
+
+.tutorial-card-body strong {
+    color: #f8fafc;
+}
+
+.tutorial-card-body em {
+    color: #ffd700;
+    font-style: normal;
+}
+
+.tutorial-card-footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-top: 14px;
+    border-top: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.tutorial-progress-dots {
+    display: flex;
+    gap: 6px;
+}
+
+.tutorial-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 9999px;
+    background: rgba(255, 255, 255, 0.2);
+    transition: background 0.25s ease, transform 0.25s ease;
+}
+
+.tutorial-dot.active {
+    background: #ffd700;
+    transform: scale(1.25);
+    box-shadow: 0 0 8px #ffd700;
+}
+
+.tutorial-card-actions {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.tutorial-btn-skip {
+    background: none;
+    border: none;
+    color: #94a3b8;
+    font-size: 0.85rem;
+    cursor: pointer;
+    padding: 6px 12px;
+    border-radius: 6px;
+    transition: color 0.15s ease;
+}
+
+.tutorial-btn-skip:hover {
+    color: #ffffff;
+}
+
+.tutorial-btn-next {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    background: linear-gradient(135deg, #ffd700 0%, #ffaa00 100%);
+    color: #0f172a;
+    font-weight: 700;
+    font-size: 0.9rem;
+    padding: 8px 18px;
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    box-shadow: 0 4px 14px rgba(255, 180, 0, 0.4);
+    transition: transform 0.15s ease, box-shadow 0.15s ease;
+}
+
+.tutorial-btn-next:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 6px 20px rgba(255, 180, 0, 0.6);
+}
+
+.tutorial-btn-next:active {
+    transform: translateY(1px);
+}

package/src/client/style.css

@@ -13,3 +13,4 @@
 @import './css/cosmic.css';
 @import './css/activity-bar.css';
 @import './css/onboarding.css';
+@import './css/tutorial.css';

package/src/client/ui/component/cosmos-navigator/cosmos-navigator.mts

@@ -578,6 +578,37 @@ export class CosmosNavigatorComponentInstance
         }
     }
 
+    /**
+     * Programmatically launches the Code Galaxy satellite without a prompt modal.
+     * Ideal for automated tutorials, tours, and scripted actions.
+     */
+    public async launchCodeGalaxyProgrammatic(galaxyName: string = 'code-1'): Promise<AttachedSpace | null> {
+        let activeCosmos = this.getActiveCosmos();
+        if (!activeCosmos && this.cosmoses.length > 0) {
+            this.selectCosmos(this.cosmoses[0].id);
+            activeCosmos = this.getActiveCosmos();
+        }
+        if (!activeCosmos) return null;
+
+        const sourceBtn = this.el.btnSatCodeEl || this.el.btnNodeSuperspaceEl;
+        const sourceWrapper = (sourceBtn?.closest('.satellite-wrapper') as HTMLElement) || sourceBtn;
+
+        let space = activeCosmos.spaces.find(s => s.id === galaxyName || s.name === galaxyName);
+        if (!space) {
+            space = await this.createAndAttachGalaxy({
+                cosmosId: activeCosmos.id,
+                galaxyName,
+                discriminator: GalaxyPresetType.code,
+                skipEvent: true,
+            });
+        }
+
+        if (space) {
+            return this.handleSpaceClick(space, sourceBtn, sourceWrapper);
+        }
+        return null;
+    }
+
     public async handleSatTextClick(): Promise<void> {
         const activeCosmos = this.getActiveCosmos();
         if (!activeCosmos) return;

package/src/client/ui/component/tutorial/index.mts

@@ -0,0 +1,9 @@
+/**
+ * @module tutorial
+ *
+ * Space-Gib Tutorial Runner & Interactive Spotlight Tour framework.
+ */
+
+export * from './tutorial-types.mjs';
+export * from './tutorial-controller.mjs';
+export * from './scripts/pitch-tour-script.mjs';

package/src/client/ui/component/tutorial/scripts/pitch-tour-script.mts

@@ -0,0 +1,265 @@
+/**
+ * @module pitch-tour-script
+ *
+ * The Founder Pitch Tour script for Space-Gib.
+ * Walks through the full ibgib cosmology contrasting each layer against the legacy
+ * Git/GitHub/GitLab stack, with automated in-between mouse click animations,
+ * culminating in a transparent founder investment thesis.
+ */
+
+import { TutorialScript } from '../tutorial-types.mjs';
+import { findElementDeep } from '../tutorial-controller.mjs';
+
+export const PITCH_TOUR_SCRIPT_ID = 'space-gib-founder-pitch-tour';
+
+export const PITCH_TOUR_SCRIPT: TutorialScript = {
+    id: PITCH_TOUR_SCRIPT_ID,
+    title: 'The Post-Git Frontier: Founder Pitch Tour',
+    steps: [
+        // =====================================================================
+        // STEP 1: Introduction & The Post-Git Thesis
+        // =====================================================================
+        {
+            id: 'step-1-thesis',
+            title: 'The Post-Git Frontier: Unlocking Autonomous AI Agents',
+            narration: `
+                <p>The fundamental bottleneck for AI software engineering is <strong>not</strong> the models—it is <strong>Git</strong>.</p>
+                <p>Modern agent harnesses, coding assistants, and CI/CD pipelines are chained to a 2005 architecture designed for human developers emailing diff patches. When autonomous agents code concurrently, the Git stack collapses:</p>
+                <ul>
+                    <li><strong>Git & Worktrees:</strong> Fragile locks, merge conflicts that stop the world, detached HEADs.</li>
+                    <li><strong>Package Managers (npm, PyPI):</strong> External out-of-band registries vulnerable to supply chain hijacking.</li>
+                    <li><strong>Asset Managers (Git LFS):</strong> Fragile pointer files pointing to separate, proprietary blob servers.</li>
+                    <li><strong>External Comms (GitHub Issues, Slack, Discord):</strong> Trapped in centralized corporate silos separated from code history.</li>
+                </ul>
+                <p><strong>The Solution: A Unified Merkle Cosmology.</strong> Let us begin with the birth of our workspace.</p>
+                <p><em>Click [Ignite the Big Bang ➔] to witness the workspace creation.</em></p>
+            `,
+            targetElementId: undefined, // center placement
+            placement: 'center',
+            beaconLabel: 'Begin Pitch ✨',
+            buttonText: 'Ignite the Big Bang ➔',
+            action: async (ctx) => {
+                await ctx.shell?.showCosmos?.();
+            },
+            transitionAction: async (ctx, controller) => {
+                // Ensure Cosmos is showing
+                await ctx.shell?.showCosmos?.();
+                const cosmosNav = ctx.shell?.getCosmosNavigator?.();
+                const singularityBtn = findElementDeep('btn-singularity');
+
+                if (singularityBtn && (!cosmosNav || !cosmosNav.hasBigBangExploded)) {
+                    // Glide virtual mouse to the Singularity button and click it
+                    await controller.animateMouseClick(singularityBtn, { durationMs: 800 });
+
+                    // Trigger the physical Big Bang sequence
+                    await new Promise<void>((resolve) => {
+                        if (cosmosNav?.triggerBigBangSequence) {
+                            cosmosNav.triggerBigBangSequence(() => {
+                                resolve();
+                            });
+                        } else {
+                            singularityBtn.click();
+                            setTimeout(resolve, 1400);
+                        }
+                    });
+                    // Allow the Cosmos stage and revolving satellites to blossom
+                    await new Promise((r) => setTimeout(r, 650));
+                } else {
+                    // Already exploded, ensure Cosmos stage is visible
+                    await ctx.shell?.showCosmos?.();
+                    await new Promise((r) => setTimeout(r, 400));
+                }
+            },
+        },
+
+        // =====================================================================
+        // STEP 2: The Cosmos (Root Container)
+        // =====================================================================
+        {
+            id: 'step-2-cosmos-container',
+            title: '1. The Cosmos: Supercharged Monorepo Container',
+            narration: `
+                <p>Welcome to the <strong>Cosmos</strong>—the root container that replaces multi-repo sprawl and fractured monorepo tooling.</p>
+                <p>In traditional setups, coordinating multiple repositories, Git submodules, or Lerna/Turborepo workspaces requires fragile symlinks, separate CI configs, and constant sync friction.</p>
+                <p>In <code>ibgib</code>, a <strong>Cosmos</strong> is a unified, sovereign Merkle coordinate space. It hosts interconnected <strong>Galaxies</strong>—each with discrete cryptographic boundaries, bound together by inverted soft links.</p>
+                <p>Watch as we spawn our primary workspace: a <strong>Code Galaxy</strong>.</p>
+            `,
+            targetElementId: 'node-superspace-wrapper',
+            placement: 'bottom',
+            beaconLabel: 'Code Galaxy 🚀',
+            buttonText: 'Birth Code Galaxy ➔',
+            action: async (ctx) => {
+                await ctx.shell?.showCosmos?.();
+            },
+            transitionAction: async (ctx, controller) => {
+                const btnSatCode = findElementDeep('btn-sat-code');
+                const cosmosNav = ctx.shell?.getCosmosNavigator?.();
+
+                if (btnSatCode) {
+                    // Move virtual mouse cursor to the revolving Code Galaxy satellite
+                    await controller.animateMouseClick(btnSatCode, { durationMs: 800 });
+                }
+
+                // Trigger programmatic launch of the Code Galaxy projectile
+                if (cosmosNav?.launchCodeGalaxyProgrammatic) {
+                    await cosmosNav.launchCodeGalaxyProgrammatic('code-1');
+                    // Wait for the projectile to fly across the screen, dock into the activity bar, and expand panels
+                    await new Promise((r) => setTimeout(r, 1800));
+                } else {
+                    ctx.shell?.expandActivityBar?.();
+                    ctx.shell?.expandLeftPanel?.();
+                    ctx.shell?.showLeftPanelView?.('code', 'code-1');
+                    await new Promise((r) => setTimeout(r, 600));
+                }
+            },
+        },
+
+        // =====================================================================
+        // STEP 3: Class I: Code Galaxy (The Git Replacement)
+        // =====================================================================
+        {
+            id: 'step-3-code-galaxy',
+            title: '2. Code Galaxy: Accretive Merkle Branches & Zero Push Rejections',
+            narration: `
+                <p>The <strong>Code Galaxy</strong> is our native replacement for a Git repository.</p>
+                <p>Notice the File Explorer on the left. In <code>ibgib</code>, every file, folder, and branch is an immutable, content-addressed Merkle node.</p>
+                <p><strong>Why this defeats Git for AI Agents:</strong></p>
+                <ul>
+                    <li><strong>Accretive 3-Way Graft Merging:</strong> In Git, concurrent agent pushes fail with non-fast-forward push rejections. In <code>ibgib</code>, concurrent agent commits graft accretively without blocking repository state.</li>
+                    <li><strong>No Detached HEADs:</strong> Timelines are monotonic and cryptographically sovereign.</li>
+                    <li><strong>Instant Worktrees:</strong> Multiple agents can branch and execute simultaneously in-memory without cloning gigabytes of files to disk.</li>
+                </ul>
+            `,
+            targetElementId: 'code-file-explorer-container',
+            placement: 'right',
+            beaconLabel: 'Code Substrate 📁',
+            buttonText: 'Inspect In-Band Discourse ➔',
+            action: async (ctx) => {
+                ctx.shell?.expandLeftPanel?.();
+                ctx.shell?.showLeftPanelView?.('code', ctx.galaxyName || 'code-1');
+            },
+            transitionAction: async (ctx, controller) => {
+                // Select a file in the explorer and open editor & right companion panel
+                const files = ['README.md', 'app.ts', 'index.ts'];
+                for (const f of files) {
+                    try {
+                        ctx.shell?.fileExplorerInstance?.selectFile?.(f);
+                        break;
+                    } catch { /* continue */ }
+                }
+                await ctx.shell?.showCode?.();
+                ctx.shell?.expandRightPanel?.();
+                await new Promise((r) => setTimeout(r, 650));
+            },
+        },
+
+        // =====================================================================
+        // STEP 4: Class IV: Metatext Galaxy (In-Band Discourse)
+        // =====================================================================
+        {
+            id: 'step-4-metatext-galaxy',
+            title: '3. Metatext Galaxy: In-Band Discourse & Reviews (.ib.*.md)',
+            narration: `
+                <p>Look at the right panel. In legacy software engineering, code lives in Git, but discussions, PR reviews, bug reports, and agent rationale are locked in proprietary third-party silos: <strong>GitHub Issues, Jira, Slack, or Discord</strong>.</p>
+                <p>When an AI agent writes code, its reasoning and discussion are lost from the repository's cryptographic history.</p>
+                <p>In <code>ibgib</code>, <strong>Metatext Galaxies</strong> embed discussions, companion reviews, and prompt rationale <strong>in-band in the exact same Merkle DAG</strong> using companion files (<code>.ib.*.md</code>).</p>
+                <p>Code and rationale evolve together. You own your code <em>and</em> the conversation that created it.</p>
+            `,
+            targetElementId: 'right-panel',
+            placement: 'left',
+            beaconLabel: 'In-Band State 💬',
+            buttonText: 'Explore Package Galaxy ➔',
+            action: async (ctx) => {
+                ctx.shell?.expandRightPanel?.();
+            },
+            transitionAction: async (ctx, controller) => {
+                ctx.shell?.collapseRightPanel?.();
+                ctx.shell?.expandLeftPanel?.();
+                await new Promise((r) => setTimeout(r, 500));
+            },
+        },
+
+        // =====================================================================
+        // STEP 5: Class II: Package Galaxy (Monotonic Releases)
+        // =====================================================================
+        {
+            id: 'step-5-package-galaxy',
+            title: '4. Package Galaxy: Monotonic Append-Only Releases',
+            narration: `
+                <p>Modern software supply chains rely on centralized registries (<strong>npm, PyPI, Cargo, Crates</strong>) that are vulnerable to token theft, registry outages, and malicious typosquatting.</p>
+                <p>A <strong>Package Galaxy</strong> provides monotonic, append-only cryptographic release checkpoints (<code>v1.0.0</code>, <code>v1.0.1</code>).</p>
+                <p>Each release is an immutable Merkle root signed by the creator's cryptographic Keystone identity.</p>
+                <p>Downstream consumers verify and pull the exact dependency graph directly from sovereign spaces—with zero middlemen, zero spoofing, and zero central points of failure.</p>
+            `,
+            targetElementId: 'code-changes-container',
+            placement: 'right',
+            beaconLabel: 'Package Integrity 📦',
+            buttonText: 'Explore Asset Galaxy ➔',
+            action: async (ctx) => {
+                ctx.shell?.expandLeftPanel?.();
+            },
+            transitionAction: async (ctx, controller) => {
+                const btnClone = findElementDeep('btn-header-clone');
+                if (btnClone) {
+                    await controller.animateMouseClick(btnClone, { durationMs: 700 });
+                }
+                await new Promise((r) => setTimeout(r, 450));
+            },
+        },
+
+        // =====================================================================
+        // STEP 6: Asset Galaxy (Binary Content vs Git LFS)
+        // =====================================================================
+        {
+            id: 'step-6-asset-galaxy',
+            title: '5. Asset Galaxy: Content-Addressed Binary Sovereignty',
+            narration: `
+                <p>Git was never built for binary files. <strong>Git LFS</strong> is a fragile hack: text pointers in Git that point to separate cloud servers. If the LFS server goes down or credentials expire, builds fail completely.</p>
+                <p>In <code>ibgib</code>, <strong>Asset Galaxies</strong> treat large binaries, AI weights, model tensors, datasets, and media as first-class, content-addressed Merkle stones.</p>
+                <p>Deduplication is cryptographic and native.</p>
+                <p>And with <strong>Zero Platform Lock-In</strong>, clicking <strong>Clone</strong> allows you to export raw files, zip archives, or Git repositories directly to disk at any time.</p>
+            `,
+            targetElementId: 'btn-header-clone',
+            placement: 'bottom',
+            beaconLabel: 'Zero Lock-In ⤓',
+            buttonText: 'The Founder Ask ➔',
+            action: async (ctx) => {
+                ctx.shell?.expandLeftPanel?.();
+            },
+            transitionAction: async (ctx, controller) => {
+                await controller.animateMouseClick(
+                    { x: window.innerWidth / 2, y: window.innerHeight / 2 },
+                    { durationMs: 600 }
+                );
+                await new Promise((r) => setTimeout(r, 350));
+            },
+        },
+
+        // =====================================================================
+        // STEP 7: The Founder Ask & Investment Realities
+        // =====================================================================
+        {
+            id: 'step-7-founder-ask',
+            title: 'The Ask: Fueling the Solo Founder Behind the Protocol',
+            narration: `
+                <p>Currently, the live monorepo source code is not served directly through this web client because we are in the process of finalizing the MVP CLI sync pipeline.</p>
+                <p><strong>The Reality:</strong> I am building this entire protocol as a solo founder, currently coding at <strong>50% capacity</strong> due to everyday survival stresses and single-income family debt—competing against well-funded teams with $100Ks or $1Ms in venture investment.</p>
+                <p>A modest seed investment ($50k–$150k) takes me to <strong>100% full-time capacity</strong> to deliver the post-git infrastructure the agentic era urgently demands.</p>
+                <p><strong>Founder Expectations & Terms:</strong></p>
+                <ul>
+                    <li><strong>Talk is cheap:</strong> I have no budget for travel and cannot afford a laptop capable of running Zoom reliably. If an investor wants in-person meetings or video calls, please fund the travel or hardware.</li>
+                    <li><strong>Open-Source Core:</strong> The core protocol <em>must remain open-source</em> (dogfooded in its own decentralized repository).</li>
+                    <li><strong>The Commercial Moat:</strong> The immense business upside lies in the hosted platform, the agentic supply chain infrastructure, and the downstream multi-app cosmology (educational LMS suites, knowledge graphs, and enterprise sync).</li>
+                </ul>
+                <p><em>If you believe that AI agents will do 90% of coding going forward, invest now in the protocol built from the ground up for that future.</em></p>
+                <p style="margin-top:16px; padding:12px; background:rgba(255,215,0,0.1); border-radius:8px; border:1px solid rgba(255,215,0,0.35); text-align:center;">
+                    <strong>Direct Founder Contact:</strong> <a href="mailto:bill@ibgib.space" style="color:#ffd700; text-decoration:underline; font-weight:700;">bill@ibgib.space</a>
+                </p>
+            `,
+            targetElementId: undefined, // center placement
+            placement: 'center',
+            beaconLabel: 'Invest in ibgib 💰',
+            buttonText: 'Complete Tour ✨',
+        },
+    ],
+};