Deploy GoalOS by AbteeX AI Labs Space

README.md

@@ -1,10 +1,46 @@
 ---
-title: GoalOS
-emoji: 🏆
-colorFrom: blue
-colorTo: purple
+title: GoalOS by AbteeX AI Labs
+emoji: 🧭
+colorFrom: indigo
+colorTo: pink
 sdk: static
+app_file: index.html
 pinned: false
+short_description: Cinematic demo and docs for the GoalOS intent layer.
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# GoalOS by AbteeX AI Labs
+
+GoalOS is the intent layer for AI agents: a structured, machine-readable graph of goals, priorities, blockers, permissions, and progress that every connected tool can read from the same source of truth.
+
+This Space is a launch-grade product surface for GoalOS:
+
+- cinematic demo
+- package and install surfaces
+- docs hub
+- GitHub links
+- deployable static bundle
+
+## Included in this Space
+
+- `index.html`: the main cinematic landing page
+- `docs/index.html`: the in-Space documentation hub
+- `assets/styles.css`: visual system and layout
+- `assets/app.js`: copy helpers, demo playback, scroll effects, and UI interactions
+
+## Core GoalOS surfaces
+
+- TypeScript core: `@goalos/core`
+- Python SDK: `goalos`
+- CLI: `goalos`
+- MCP server: `@goalos/mcp-server`
+- OpenAPI and spec docs in the GitHub repository
+
+## Canonical repository
+
+- GitHub: `https://github.com/Aimaghsoodi/GoalOS`
+- Website: `https://aimaghsoodi.github.io/GoalOS/`
+
+## Brand
+
+`GoalOS by AbteeX AI Labs`

assets/app.js

@@ -0,0 +1,414 @@
+(function () {
+  const toast = document.querySelector('[data-toast]');
+  const revealables = document.querySelectorAll('.reveal');
+
+  function showToast(message) {
+    if (!toast) return;
+    toast.textContent = message;
+    toast.classList.add('is-visible');
+    window.clearTimeout(showToast.timeout);
+    showToast.timeout = window.setTimeout(() => {
+      toast.classList.remove('is-visible');
+    }, 1800);
+  }
+
+  async function copyText(text) {
+    try {
+      await navigator.clipboard.writeText(text);
+      showToast('Copied to clipboard');
+    } catch (error) {
+      showToast('Copy failed');
+    }
+  }
+
+  document.querySelectorAll('[data-copy]').forEach((button) => {
+    button.addEventListener('click', () => {
+      copyText(button.getAttribute('data-copy') || '');
+    });
+  });
+
+  document.querySelectorAll('[data-copy-source]').forEach((button) => {
+    button.addEventListener('click', () => {
+      const sourceId = button.getAttribute('data-copy-source');
+      const source = document.getElementById(sourceId);
+      if (source) {
+        copyText(source.textContent || '');
+      }
+    });
+  });
+
+  if ('IntersectionObserver' in window) {
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          entry.target.classList.add('is-visible');
+          observer.unobserve(entry.target);
+        }
+      });
+    }, { threshold: 0.16 });
+
+    revealables.forEach((node) => observer.observe(node));
+  } else {
+    revealables.forEach((node) => node.classList.add('is-visible'));
+  }
+
+  const sectionNav = document.querySelector('[data-section-nav]');
+  if (sectionNav) {
+    const links = [...sectionNav.querySelectorAll('a[href^="#"]')];
+    const sectionMap = new Map(
+      links
+        .map((link) => {
+          const section = document.querySelector(link.getAttribute('href'));
+          return section ? [section, link] : null;
+        })
+        .filter(Boolean)
+    );
+
+    if ('IntersectionObserver' in window && sectionMap.size > 0) {
+      const navObserver = new IntersectionObserver((entries) => {
+        entries.forEach((entry) => {
+          const link = sectionMap.get(entry.target);
+          if (link) {
+            link.classList.toggle('is-current', entry.isIntersecting);
+          }
+        });
+      }, { rootMargin: '-25% 0px -60% 0px', threshold: 0.01 });
+
+      sectionMap.forEach((_, section) => navObserver.observe(section));
+    }
+  }
+
+  const demoRoot = document.querySelector('[data-demo-root]');
+
+  if (!demoRoot) return;
+
+  const actButtonContainer = demoRoot.querySelector('[data-act-buttons]');
+  const sceneButtonContainer = demoRoot.querySelector('[data-scene-buttons]');
+  const progressBar = demoRoot.querySelector('[data-demo-progress]');
+  const labelNode = demoRoot.querySelector('[data-scene-label]');
+  const titleNode = demoRoot.querySelector('[data-scene-title]');
+  const summaryNode = demoRoot.querySelector('[data-scene-summary]');
+  const highlightNode = demoRoot.querySelector('[data-scene-highlight]');
+  const metricNode = demoRoot.querySelector('[data-scene-metrics]');
+  const codeNode = demoRoot.querySelector('[data-scene-code]');
+  const graphNode = demoRoot.querySelector('[data-scene-graph]');
+  const eventNode = demoRoot.querySelector('[data-scene-events]');
+  const counterNode = demoRoot.querySelector('[data-scene-counter]');
+  const controls = demoRoot.querySelectorAll('[data-demo-action]');
+
+  const acts = [
+    {
+      id: 'team',
+      label: 'Act I',
+      title: 'Team Command Center',
+      scenes: [
+        {
+          label: 'Launch week / 09:00',
+          title: 'The full team reads the same board.',
+          summary: 'Engineering, research, marketing, and ops all enter the week with one live graph instead of fragmented prompts and Slack summaries.',
+          highlight: 'GoalOS establishes a common intent layer before any tool starts making local optimizations.',
+          metrics: [
+            ['Critical priorities', '6 live'],
+            ['Blocked goals', '2 resolved'],
+            ['Agents aligned', '4 surfaces'],
+            ['Launch horizon', '72 hours'],
+          ],
+          code: `goalos_get_context({\n  horizon: "this_week",\n  domain: ["product", "research", "marketing", "ops"]\n})`,
+          graph: [
+            ['Launch public beta', 'critical', 'Ship, docs, and onboarding all converge here.', ['deadline: Fri', 'owner: launch lead']],
+            ['Finalize retrieval eval', 'cyan', 'Research validation gates the launch claim.', ['research', 'eval']],
+            ['Publish launch film', 'orange', 'Marketing depends on accurate release language.', ['creative', 'release']],
+            ['Legal + pricing sign-off', 'gold', 'Ops holds the final release switch.', ['ops', 'risk']],
+          ],
+          events: [
+            'Claude reprioritizes docs because release notes are blocking the hero page.',
+            'Research agent downgrades an experiment branch that no longer affects launch risk.',
+            'Marketing pauses paid acquisition until pricing copy and legal review converge.',
+          ],
+        },
+        {
+          label: 'Launch week / 11:20',
+          title: 'The graph catches a cross-functional collision.',
+          summary: 'A brand-new blocker appears: legal review touches pricing copy, which impacts the launch film, which impacts the homepage hero.',
+          highlight: 'Instead of each team discovering the conflict late, GoalOS updates the dependency map instantly.',
+          metrics: [
+            ['New blocker', 'pricing/legal'],
+            ['Affected teams', '3'],
+            ['Time saved', 'hours not days'],
+            ['Status shift', 'high → critical'],
+          ],
+          code: `goalos_add_dependency("launch-film", {\n  type: "requires",\n  targetGoalId: "pricing-signoff",\n  description: "Headline claim needs approved pricing language"\n})`,
+          graph: [
+            ['Pricing sign-off', 'magenta', 'Now marked as the unlock for external messaging.', ['critical path', 'legal']],
+            ['Launch film', 'orange', 'Creative output waits on the approved value claim.', ['asset', 'blocked']],
+            ['Homepage hero', 'cyan', 'Hero copy inherits the approved promise stack.', ['web', 'copy']],
+            ['Beta announcement', 'success', 'Queued but safe to hold until dependencies clear.', ['scheduled', 'ready state']],
+          ],
+          events: [
+            'GoalOS pushes the dependency update to every connected tool surface.',
+            'Engineering retains velocity because infra work is not actually on the critical path.',
+            'Operators get a cleaner escalation path instead of a vague “launch feels risky.”',
+          ],
+        },
+        {
+          label: 'Launch week / 15:45',
+          title: 'Agents reflow the plan without human re-briefing.',
+          summary: 'Once the dependency changes land, every connected surface updates what “important” means now.',
+          highlight: 'No one needs to rewrite the same context into Claude, LangChain, the CLI, and internal launch docs.',
+          metrics: [
+            ['Reprioritized tasks', '11'],
+            ['Context handoffs', '0 repeated'],
+            ['MCP clients', 'goal-aware'],
+            ['Release confidence', 'climbing'],
+          ],
+          code: `goalos_get_priorities({\n  count: 5,\n  horizon: "today"\n})`,
+          graph: [
+            ['Docs polish', 'gold', 'Moved upward because launch clarity now matters more than optional refactors.', ['docs', 'today']],
+            ['Onboarding flow QA', 'cyan', 'Still active but no longer competing with launch messaging.', ['product', 'active']],
+            ['Press notes', 'orange', 'Synced to approved launch claim automatically.', ['marketing', 'aligned']],
+            ['Infra cleanup', 'success', 'Safely pushed after launch without confusion.', ['deferred', 'safe']],
+          ],
+          events: [
+            'CLI status board updates the launch tree with new top priorities.',
+            'Claude Desktop retrieves the new context and drafts release notes against the right constraints.',
+            'Ops confirms the team is finally working against one live mission picture.',
+          ],
+        },
+      ],
+    },
+    {
+      id: 'personal',
+      label: 'Act II',
+      title: 'Personal AI Chief of Staff',
+      scenes: [
+        {
+          label: 'Founder mode / 06:30',
+          title: 'The founder graph includes life, energy, and strategic work.',
+          summary: 'GoalOS can represent work and personal operating constraints together: launch prep, recovery windows, learning goals, and meeting-critical prep.',
+          highlight: 'The personal layer keeps assistants useful without turning into generic memory sludge.',
+          metrics: [
+            ['Deep work block', '09:00–11:30'],
+            ['Recovery guardrail', 'sleep protected'],
+            ['Meetings today', '3 high stakes'],
+            ['Personal goals', 'health + learning'],
+          ],
+          code: `graph.addGoal({\n  title: "Protect founder deep work block",\n  status: "active",\n  priority: { level: "high", score: 88 },\n  domain: "personal_ops"\n})`,
+          graph: [
+            ['Investor prep', 'magenta', 'Requires a protected block and current launch metrics.', ['fundraising', 'today']],
+            ['Sleep + recovery', 'success', 'A constraint, not a nice-to-have.', ['health', 'guardrail']],
+            ['Team briefing', 'cyan', 'Consumes the same launch graph the team sees.', ['ops', 'sync']],
+            ['Reading / synthesis', 'gold', 'Keeps long-term reasoning from collapsing into reaction mode.', ['learning', 'weekly']],
+          ],
+          events: [
+            'Personal assistant agent avoids scheduling over the deep work block.',
+            'Meeting prep draws only the goals that actually influence investor narrative.',
+            'Health and recovery goals remain visible instead of being sacrificed silently.',
+          ],
+        },
+        {
+          label: 'Founder mode / 18:10',
+          title: 'The day closes with context preserved.',
+          summary: 'After the founder finishes the day, the graph preserves what changed, what slipped, and what tomorrow needs.',
+          highlight: 'GoalOS turns “keep me aligned” into a durable operating layer instead of a temporary chat state.',
+          metrics: [
+            ['Completed', '7 goals'],
+            ['Deferred safely', '3'],
+            ['Tomorrow carryover', '2 critical'],
+            ['Human re-brief', 'not needed'],
+          ],
+          code: `goalos_complete_goal("investor-brief")\ngoalos_update_goal("launch-film", {\n  status: "planned"\n})`,
+          graph: [
+            ['Investor prep', 'success', 'Closed with updated notes and preserved context.', ['done', 'captured']],
+            ['Founder focus block', 'success', 'Protected and logged as an enabling constraint.', ['healthy', 'repeat']],
+            ['Tomorrow launch sync', 'cyan', 'Already staged with the right dependencies.', ['next up', 'ready']],
+            ['Personal admin', 'orange', 'Explicitly deferred without contaminating core priorities.', ['deferred', 'clear']],
+          ],
+          events: [
+            'Tomorrow’s top priorities are generated from the graph, not memory of today’s chaos.',
+            'Personal admin is moved out of the critical lane with zero ambiguity.',
+            'Every assistant wakes up tomorrow with the same aligned picture.',
+          ],
+        },
+      ],
+    },
+  ];
+
+  const demoState = {
+    actIndex: 0,
+    sceneIndex: 0,
+    playing: true,
+  };
+
+  const SCENE_INTERVAL_MS = 5200;
+  let sceneTimer = null;
+
+  function statusClass(status) {
+    switch (status) {
+      case 'critical':
+      case 'cyan':
+        return 'is-cyan';
+      case 'orange':
+        return 'is-orange';
+      case 'gold':
+        return 'is-gold';
+      case 'magenta':
+        return 'is-magenta';
+      case 'success':
+        return 'is-success';
+      default:
+        return 'is-cyan';
+    }
+  }
+
+  function totalSceneCount() {
+    return acts.reduce((total, act) => total + act.scenes.length, 0);
+  }
+
+  function flatSceneIndex() {
+    let count = 0;
+    for (let i = 0; i < demoState.actIndex; i += 1) {
+      count += acts[i].scenes.length;
+    }
+    return count + demoState.sceneIndex + 1;
+  }
+
+  function renderActButtons() {
+    actButtonContainer.innerHTML = '';
+    acts.forEach((act, index) => {
+      const button = document.createElement('button');
+      button.className = `chip-button${index === demoState.actIndex ? ' is-active' : ''}`;
+      button.type = 'button';
+      button.textContent = `${act.label} · ${act.title}`;
+      button.addEventListener('click', () => {
+        demoState.actIndex = index;
+        demoState.sceneIndex = 0;
+        render();
+        restartTimer();
+      });
+      actButtonContainer.appendChild(button);
+    });
+  }
+
+  function renderSceneButtons(activeAct) {
+    sceneButtonContainer.innerHTML = '';
+    activeAct.scenes.forEach((scene, index) => {
+      const button = document.createElement('button');
+      button.className = `chip-button chip-button--small${index === demoState.sceneIndex ? ' is-active' : ''}`;
+      button.type = 'button';
+      button.textContent = scene.title;
+      button.addEventListener('click', () => {
+        demoState.sceneIndex = index;
+        render();
+        restartTimer();
+      });
+      sceneButtonContainer.appendChild(button);
+    });
+  }
+
+  function renderScene(scene) {
+    labelNode.textContent = scene.label;
+    titleNode.textContent = scene.title;
+    summaryNode.textContent = scene.summary;
+    highlightNode.textContent = scene.highlight;
+    codeNode.textContent = scene.code;
+    counterNode.textContent = `${flatSceneIndex()} / ${totalSceneCount()}`;
+
+    metricNode.innerHTML = '';
+    scene.metrics.forEach(([label, value]) => {
+      const card = document.createElement('article');
+      card.className = 'demo-metric';
+      card.innerHTML = `<span>${label}</span><strong>${value}</strong>`;
+      metricNode.appendChild(card);
+    });
+
+    graphNode.innerHTML = '';
+    scene.graph.forEach(([title, status, description, meta]) => {
+      const card = document.createElement('article');
+      card.className = 'graph-card';
+      card.innerHTML = `
+        <span class="graph-card__status ${statusClass(status)}">${status}</span>
+        <h4>${title}</h4>
+        <p>${description}</p>
+        <div class="graph-card__meta">${meta.map((item) => `<span>${item}</span>`).join('')}</div>
+      `;
+      graphNode.appendChild(card);
+    });
+
+    eventNode.innerHTML = '';
+    scene.events.forEach((event) => {
+      const item = document.createElement('li');
+      item.textContent = event;
+      eventNode.appendChild(item);
+    });
+
+    progressBar.style.width = `${(flatSceneIndex() / totalSceneCount()) * 100}%`;
+  }
+
+  function renderControlLabels() {
+    controls.forEach((button) => {
+      if (button.getAttribute('data-demo-action') === 'toggle') {
+        button.textContent = demoState.playing ? 'Pause' : 'Play';
+      }
+    });
+  }
+
+  function render() {
+    const activeAct = acts[demoState.actIndex];
+    const activeScene = activeAct.scenes[demoState.sceneIndex];
+
+    renderActButtons();
+    renderSceneButtons(activeAct);
+    renderScene(activeScene);
+    renderControlLabels();
+  }
+
+  function advanceScene() {
+    const activeAct = acts[demoState.actIndex];
+    if (demoState.sceneIndex < activeAct.scenes.length - 1) {
+      demoState.sceneIndex += 1;
+    } else if (demoState.actIndex < acts.length - 1) {
+      demoState.actIndex += 1;
+      demoState.sceneIndex = 0;
+    } else {
+      demoState.actIndex = 0;
+      demoState.sceneIndex = 0;
+    }
+
+    render();
+    restartTimer();
+  }
+
+  function stopTimer() {
+    if (sceneTimer) {
+      window.clearTimeout(sceneTimer);
+      sceneTimer = null;
+    }
+  }
+
+  function restartTimer() {
+    stopTimer();
+    if (!demoState.playing) return;
+    sceneTimer = window.setTimeout(advanceScene, SCENE_INTERVAL_MS);
+  }
+
+  controls.forEach((button) => {
+    button.addEventListener('click', () => {
+      const action = button.getAttribute('data-demo-action');
+      if (action === 'toggle') {
+        demoState.playing = !demoState.playing;
+        renderControlLabels();
+        restartTimer();
+      }
+      if (action === 'replay') {
+        demoState.actIndex = 0;
+        demoState.sceneIndex = 0;
+        demoState.playing = true;
+        render();
+        restartTimer();
+      }
+    });
+  });
+
+  render();
+  restartTimer();
+})();

assets/styles.css

@@ -0,0 +1,1193 @@
+:root {
+  --bg: #060816;
+  --bg-deep: #03050f;
+  --panel: rgba(10, 14, 34, 0.74);
+  --panel-strong: rgba(13, 18, 42, 0.9);
+  --panel-soft: rgba(255, 255, 255, 0.03);
+  --line: rgba(255, 255, 255, 0.1);
+  --line-strong: rgba(255, 255, 255, 0.2);
+  --text: #f9fbff;
+  --muted: #aab7d5;
+  --muted-strong: #d7def1;
+  --cyan: #00d1ff;
+  --orange: #ff7a18;
+  --gold: #ffd166;
+  --magenta: #ff4ecd;
+  --success: #5af0a5;
+  --shadow: 0 24px 90px rgba(0, 0, 0, 0.45);
+  --radius: 28px;
+  --radius-sm: 16px;
+  --shell: 1220px;
+  --font-display: "Syne", sans-serif;
+  --font-body: "IBM Plex Sans", sans-serif;
+  --font-mono: "IBM Plex Mono", monospace;
+  --ease: cubic-bezier(0.2, 1, 0.22, 1);
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  margin: 0;
+  min-height: 100vh;
+  background:
+    radial-gradient(circle at 12% 16%, rgba(0, 209, 255, 0.19), transparent 24%),
+    radial-gradient(circle at 85% 18%, rgba(255, 122, 24, 0.2), transparent 24%),
+    radial-gradient(circle at 50% 82%, rgba(255, 78, 205, 0.12), transparent 28%),
+    linear-gradient(180deg, #050714 0%, #060816 48%, #03050f 100%);
+  color: var(--text);
+  font-family: var(--font-body);
+  line-height: 1.6;
+  overflow-x: hidden;
+  color-scheme: dark;
+}
+
+body::after {
+  content: "";
+  position: fixed;
+  inset: 0;
+  background: linear-gradient(180deg, rgba(255,255,255,0.04), transparent 18%, transparent 82%, rgba(255,255,255,0.03));
+  pointer-events: none;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+button,
+input,
+textarea,
+select {
+  font: inherit;
+}
+
+button {
+  background: none;
+  border: 0;
+  color: inherit;
+  cursor: pointer;
+}
+
+code,
+pre {
+  font-family: var(--font-mono);
+}
+
+pre {
+  margin: 0;
+  white-space: pre-wrap;
+}
+
+.skip-link {
+  position: absolute;
+  left: -999px;
+  top: 12px;
+}
+
+.skip-link:focus {
+  left: 12px;
+  z-index: 30;
+  padding: 10px 14px;
+  border-radius: 999px;
+  background: var(--panel-strong);
+  border: 1px solid var(--line-strong);
+}
+
+.aurora,
+.grid-noise {
+  pointer-events: none;
+  position: fixed;
+  inset: 0;
+}
+
+.aurora {
+  filter: blur(90px);
+  opacity: 0.55;
+}
+
+.aurora-a {
+  background: radial-gradient(circle at 15% 15%, rgba(0, 209, 255, 0.18), transparent 34%);
+  animation: drift-a 18s ease-in-out infinite;
+}
+
+.aurora-b {
+  background: radial-gradient(circle at 84% 18%, rgba(255, 122, 24, 0.16), transparent 32%);
+  animation: drift-b 24s ease-in-out infinite;
+}
+
+.aurora-c {
+  background: radial-gradient(circle at 52% 82%, rgba(255, 78, 205, 0.12), transparent 28%);
+  animation: drift-c 20s ease-in-out infinite;
+}
+
+.grid-noise {
+  background-image:
+    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
+  background-size: 32px 32px;
+  mask-image: radial-gradient(circle at center, black 45%, transparent 90%);
+}
+
+.shell {
+  width: min(var(--shell), calc(100vw - 40px));
+  margin: 0 auto;
+  position: relative;
+  z-index: 2;
+}
+
+.site-header {
+  position: sticky;
+  top: 0;
+  z-index: 20;
+  backdrop-filter: blur(18px);
+  background: rgba(5, 7, 20, 0.45);
+  border-bottom: 1px solid rgba(255,255,255,0.06);
+}
+
+.site-header__inner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 24px;
+  padding: 18px 0;
+}
+
+.brand {
+  display: inline-flex;
+  align-items: center;
+  gap: 14px;
+}
+
+.brand strong,
+.brand h1 {
+  display: block;
+  font-family: var(--font-display);
+  font-size: 1.05rem;
+  letter-spacing: -0.03em;
+}
+
+.brand span span {
+  display: block;
+  color: var(--muted);
+  font-size: 0.84rem;
+}
+
+.brand__mark {
+  width: 52px;
+  height: 52px;
+  border-radius: 18px;
+  display: grid;
+  place-items: center;
+  background:
+    linear-gradient(145deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03)),
+    rgba(255,255,255,0.02);
+  border: 1px solid rgba(255,255,255,0.08);
+  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 18px 40px rgba(0,0,0,0.25);
+}
+
+.brand__mark svg {
+  width: 34px;
+  height: 34px;
+}
+
+.brand__mark--small {
+  width: 44px;
+  height: 44px;
+}
+
+.brand__mark--small::before {
+  content: "";
+  width: 24px;
+  height: 24px;
+  border-radius: 8px;
+  background: linear-gradient(135deg, var(--cyan), var(--orange), var(--gold));
+  box-shadow: 0 0 20px rgba(0, 209, 255, 0.4);
+}
+
+.site-nav {
+  display: flex;
+  align-items: center;
+  gap: 18px;
+  flex-wrap: wrap;
+}
+
+.site-nav a {
+  color: var(--muted);
+  font-size: 0.95rem;
+  transition: color 180ms var(--ease), transform 180ms var(--ease);
+}
+
+.site-nav a:hover,
+.site-nav a:focus-visible {
+  color: var(--text);
+  transform: translateY(-1px);
+}
+
+.hero {
+  padding: 64px 0 42px;
+}
+
+.hero__grid {
+  display: grid;
+  grid-template-columns: 1.05fr 0.95fr;
+  gap: 34px;
+  align-items: center;
+}
+
+.eyebrow {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  margin: 0 0 16px;
+  color: var(--gold);
+  font-family: var(--font-mono);
+  font-size: 0.78rem;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+}
+
+.eyebrow::before {
+  content: "";
+  width: 22px;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, var(--gold));
+}
+
+.hero h1,
+.section-heading h2,
+.docs-sidebar h1,
+.docs-section h2 {
+  margin: 0;
+  font-family: var(--font-display);
+  line-height: 0.96;
+  letter-spacing: -0.06em;
+}
+
+.hero h1 {
+  font-size: clamp(3.4rem, 8vw, 6.6rem);
+  max-width: 11ch;
+}
+
+.hero__lede,
+.section-heading p,
+.docs-sidebar__lede,
+.docs-section p {
+  margin: 18px 0 0;
+  color: var(--muted);
+  font-size: 1.05rem;
+  max-width: 64ch;
+}
+
+.hero__actions,
+.docs-cta__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  margin-top: 30px;
+}
+
+.button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 50px;
+  padding: 0 22px;
+  border-radius: 999px;
+  border: 1px solid rgba(255,255,255,0.08);
+  background: rgba(255,255,255,0.04);
+  transition: transform 180ms var(--ease), border-color 180ms var(--ease), background 180ms var(--ease);
+}
+
+.button:hover,
+.button:focus-visible,
+.chip-button:hover,
+.chip-button:focus-visible {
+  transform: translateY(-1px);
+}
+
+.button--primary {
+  color: #04111c;
+  background: linear-gradient(135deg, var(--cyan), #7af6ff 48%, var(--gold));
+  border-color: rgba(255,255,255,0.18);
+  font-weight: 700;
+}
+
+.button--ghost {
+  color: var(--muted-strong);
+}
+
+.hero__stats {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 12px;
+  margin-top: 28px;
+}
+
+.metric-card,
+.surface-card,
+.step-card,
+.docs-card,
+.docs-link-card,
+.docs-callout,
+.demo-console,
+.docs-cta,
+.stage-frame,
+.docs-snippet,
+.docs-codeblock,
+.docs-link-card {
+  background:
+    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)),
+    var(--panel);
+  border: 1px solid rgba(255,255,255,0.08);
+  box-shadow: var(--shadow);
+}
+
+.metric-card {
+  padding: 16px 18px;
+  border-radius: 20px;
+}
+
+.metric-card__label,
+.surface-card__meta,
+.panel-heading span,
+.docs-snippet__topline span,
+.docs-codeblock__topline span {
+  display: block;
+  color: var(--gold);
+  font-family: var(--font-mono);
+  font-size: 0.74rem;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+}
+
+.metric-card strong {
+  display: block;
+  margin-top: 8px;
+  font-size: 0.98rem;
+  line-height: 1.35;
+}
+
+.stage-frame {
+  border-radius: 34px;
+  overflow: hidden;
+  position: relative;
+}
+
+.stage-frame__chrome {
+  display: flex;
+  gap: 8px;
+  padding: 16px 18px;
+  border-bottom: 1px solid rgba(255,255,255,0.08);
+}
+
+.stage-frame__chrome span {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: rgba(255,255,255,0.18);
+}
+
+.stage-frame__content {
+  padding: 22px;
+}
+
+.stage-kicker,
+.status-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 14px;
+  border-radius: 999px;
+  border: 1px solid rgba(255,255,255,0.08);
+  background: rgba(255,255,255,0.03);
+  color: var(--muted-strong);
+}
+
+.status-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--success);
+  box-shadow: 0 0 12px rgba(90, 240, 165, 0.8);
+}
+
+.orbital-board {
+  position: relative;
+  height: 330px;
+  margin: 24px 0;
+  border-radius: 28px;
+  background:
+    radial-gradient(circle at center, rgba(0,209,255,0.16), transparent 28%),
+    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
+  border: 1px solid rgba(255,255,255,0.08);
+  overflow: hidden;
+}
+
+.orbital-board::before,
+.orbital-board::after {
+  content: "";
+  position: absolute;
+  inset: 24px;
+  border-radius: 50%;
+  border: 1px solid rgba(255,255,255,0.07);
+}
+
+.orbital-board::after {
+  inset: 64px;
+}
+
+.orbital-board__center {
+  position: absolute;
+  inset: 50%;
+  width: 150px;
+  height: 150px;
+  transform: translate(-50%, -50%);
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+  text-align: center;
+  background:
+    radial-gradient(circle at top, rgba(255,255,255,0.2), transparent 45%),
+    linear-gradient(135deg, rgba(0,209,255,0.16), rgba(255,122,24,0.18), rgba(255,209,102,0.18));
+  border: 1px solid rgba(255,255,255,0.1);
+  box-shadow: 0 0 80px rgba(0,209,255,0.18);
+}
+
+.orbital-board__center span {
+  color: var(--muted);
+  font-family: var(--font-mono);
+  font-size: 0.74rem;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+.orbital-board__center strong {
+  display: block;
+  font-family: var(--font-display);
+  font-size: 2rem;
+  margin-top: -18px;
+}
+
+.orbital-node {
+  position: absolute;
+  min-width: 118px;
+  padding: 10px 14px;
+  border-radius: 999px;
+  background: rgba(255,255,255,0.06);
+  border: 1px solid rgba(255,255,255,0.1);
+  text-align: center;
+  font-size: 0.92rem;
+  backdrop-filter: blur(12px);
+}
+
+.orbital-node--cyan { top: 12%; left: 14%; box-shadow: 0 0 30px rgba(0,209,255,0.2); }
+.orbital-node--orange { top: 18%; right: 14%; box-shadow: 0 0 30px rgba(255,122,24,0.2); }
+.orbital-node--gold { bottom: 18%; left: 12%; box-shadow: 0 0 30px rgba(255,209,102,0.16); }
+.orbital-node--magenta { bottom: 14%; right: 10%; box-shadow: 0 0 30px rgba(255,78,205,0.2); }
+
+.stage-tape {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.stage-tape span {
+  padding: 8px 12px;
+  border-radius: 999px;
+  background: rgba(255,255,255,0.04);
+  border: 1px solid rgba(255,255,255,0.08);
+  color: var(--muted);
+  font-family: var(--font-mono);
+  font-size: 0.76rem;
+}
+
+.stage-panels {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 14px;
+  margin-top: 18px;
+}
+
+.stage-panel {
+  padding: 16px;
+  border-radius: 22px;
+  background: rgba(255,255,255,0.04);
+  border: 1px solid rgba(255,255,255,0.08);
+}
+
+.stage-panel span {
+  color: var(--muted);
+  font-family: var(--font-mono);
+  font-size: 0.74rem;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+.stage-panel strong {
+  display: block;
+  margin-top: 8px;
+  font-size: 1.05rem;
+}
+
+.stage-panel p {
+  margin: 8px 0 0;
+  color: var(--muted);
+}
+
+.section {
+  padding: 80px 0;
+}
+
+.section-heading {
+  max-width: 760px;
+}
+
+.section-heading h2,
+.docs-section h2 {
+  font-size: clamp(2.2rem, 5vw, 4rem);
+}
+
+.section--demo {
+  padding-top: 48px;
+}
+
+.demo-console {
+  border-radius: 32px;
+  overflow: hidden;
+  margin-top: 30px;
+}
+
+.demo-console__toolbar,
+.demo-console__timeline {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 18px 22px;
+  border-bottom: 1px solid rgba(255,255,255,0.08);
+}
+
+.demo-console__timeline {
+  justify-content: flex-start;
+  flex-wrap: wrap;
+  border-top: 1px solid rgba(255,255,255,0.08);
+  border-bottom: none;
+}
+
+.demo-console__tabs,
+.demo-console__controls {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.chip-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 38px;
+  padding: 0 14px;
+  border-radius: 999px;
+  color: var(--muted-strong);
+  background: rgba(255,255,255,0.05);
+  border: 1px solid rgba(255,255,255,0.08);
+  transition: transform 180ms var(--ease), background 180ms var(--ease), border-color 180ms var(--ease), color 180ms var(--ease);
+}
+
+.chip-button.is-active {
+  color: #05121a;
+  background: linear-gradient(135deg, var(--cyan), var(--gold));
+  border-color: transparent;
+}
+
+.chip-button--small {
+  min-height: 32px;
+  padding: 0 12px;
+  font-size: 0.84rem;
+}
+
+.chip-button--link {
+  display: inline-flex;
+  margin-top: 10px;
+}
+
+.demo-console__progress {
+  position: relative;
+  height: 4px;
+  background: rgba(255,255,255,0.06);
+}
+
+.demo-console__progress-fill {
+  position: absolute;
+  inset: 0 auto 0 0;
+  width: 0;
+  background: linear-gradient(90deg, var(--cyan), var(--orange), var(--gold));
+  transition: width 320ms var(--ease);
+}
+
+.demo-console__body {
+  display: grid;
+  grid-template-columns: 0.92fr 1.08fr;
+  gap: 22px;
+  padding: 24px;
+}
+
+.demo-narrative,
+.demo-graph-panel,
+.demo-events-panel {
+  border-radius: 24px;
+  background: rgba(255,255,255,0.03);
+  border: 1px solid rgba(255,255,255,0.08);
+  padding: 20px;
+}
+
+.demo-label {
+  margin: 0;
+  color: var(--gold);
+  font-family: var(--font-mono);
+  text-transform: uppercase;
+  letter-spacing: 0.16em;
+  font-size: 0.76rem;
+}
+
+.demo-narrative h3 {
+  margin: 14px 0 10px;
+  font-family: var(--font-display);
+  font-size: clamp(2rem, 4vw, 3rem);
+  line-height: 0.98;
+  letter-spacing: -0.04em;
+}
+
+.demo-summary,
+.demo-highlight {
+  margin: 0;
+}
+
+.demo-summary {
+  color: var(--muted-strong);
+}
+
+.demo-highlight {
+  margin-top: 14px;
+  color: var(--text);
+  font-weight: 600;
+}
+
+.demo-metrics {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+  margin: 22px 0;
+}
+
+.demo-metric {
+  padding: 14px 16px;
+  border-radius: 18px;
+  background: rgba(255,255,255,0.04);
+  border: 1px solid rgba(255,255,255,0.08);
+}
+
+.demo-metric span {
+  display: block;
+  color: var(--muted);
+  font-size: 0.84rem;
+}
+
+.demo-metric strong {
+  display: block;
+  margin-top: 8px;
+  font-size: 1.15rem;
+}
+
+.demo-code {
+  border-radius: 20px;
+  background: #050915;
+  border: 1px solid rgba(255,255,255,0.08);
+  overflow: hidden;
+}
+
+.demo-code__topline,
+.panel-heading,
+.docs-snippet__topline,
+.docs-codeblock__topline {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.demo-code__topline,
+.docs-codeblock__topline {
+  padding: 14px 16px;
+  border-bottom: 1px solid rgba(255,255,255,0.08);
+}
+
+.demo-code pre,
+.docs-codeblock pre,
+.surface-card pre,
+.docs-snippet pre {
+  overflow: auto;
+}
+
+.demo-code code,
+.docs-codeblock code,
+.surface-card code,
+.docs-snippet code {
+  display: block;
+  padding: 16px;
+  color: #d4e0ff;
+}
+
+.demo-wall {
+  display: grid;
+  gap: 18px;
+}
+
+.panel-heading strong {
+  font-size: 0.9rem;
+  color: var(--muted-strong);
+}
+
+.graph-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+  margin-top: 18px;
+}
+
+.graph-card {
+  padding: 15px 16px;
+  border-radius: 18px;
+  background: rgba(255,255,255,0.04);
+  border: 1px solid rgba(255,255,255,0.08);
+  min-height: 130px;
+}
+
+.graph-card__status {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--muted);
+  font-size: 0.8rem;
+}
+
+.graph-card__status::before {
+  content: "";
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--cyan);
+  box-shadow: 0 0 12px rgba(0,209,255,0.7);
+}
+
+.graph-card__status.is-orange::before { background: var(--orange); box-shadow: 0 0 12px rgba(255,122,24,0.7); }
+.graph-card__status.is-gold::before { background: var(--gold); box-shadow: 0 0 12px rgba(255,209,102,0.7); }
+.graph-card__status.is-magenta::before { background: var(--magenta); box-shadow: 0 0 12px rgba(255,78,205,0.7); }
+.graph-card__status.is-success::before { background: var(--success); box-shadow: 0 0 12px rgba(90,240,165,0.7); }
+
+.graph-card h4 {
+  margin: 12px 0 8px;
+  font-size: 1.05rem;
+}
+
+.graph-card p {
+  margin: 0;
+  color: var(--muted);
+  font-size: 0.92rem;
+}
+
+.graph-card__meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 14px;
+}
+
+.graph-card__meta span {
+  padding: 6px 10px;
+  border-radius: 999px;
+  background: rgba(255,255,255,0.04);
+  border: 1px solid rgba(255,255,255,0.08);
+  font-size: 0.76rem;
+  color: var(--muted-strong);
+}
+
+.event-stream {
+  list-style: none;
+  margin: 18px 0 0;
+  padding: 0;
+  display: grid;
+  gap: 12px;
+}
+
+.event-stream li {
+  position: relative;
+  padding: 14px 16px 14px 20px;
+  border-radius: 18px;
+  background: rgba(255,255,255,0.04);
+  border: 1px solid rgba(255,255,255,0.08);
+  color: var(--muted-strong);
+}
+
+.event-stream li::before {
+  content: "";
+  position: absolute;
+  top: 18px;
+  left: 10px;
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background: var(--cyan);
+}
+
+.surface-grid,
+.step-grid,
+.docs-card-grid,
+.docs-link-grid,
+.docs-snippet-grid {
+  display: grid;
+  gap: 16px;
+}
+
+.surface-grid {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  margin-top: 30px;
+}
+
+.surface-card {
+  padding: 20px;
+  border-radius: 24px;
+}
+
+.surface-card h3,
+.step-card h3,
+.docs-card h3,
+.docs-link-card strong {
+  margin: 10px 0 10px;
+  font-family: var(--font-display);
+  font-size: 1.35rem;
+  letter-spacing: -0.03em;
+}
+
+.surface-card p,
+.step-card p,
+.docs-card p,
+.docs-link-card span {
+  margin: 0;
+  color: var(--muted);
+}
+
+.surface-card pre {
+  margin-top: 16px;
+  border-radius: 18px;
+  background: #040815;
+  border: 1px solid rgba(255,255,255,0.08);
+}
+
+.surface-card .chip-button {
+  margin-top: 12px;
+}
+
+.step-grid {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  margin-top: 28px;
+}
+
+.step-card {
+  padding: 18px;
+  border-radius: 22px;
+  background: rgba(255,255,255,0.04);
+  border: 1px solid rgba(255,255,255,0.08);
+}
+
+.step-card span {
+  color: var(--gold);
+  font-family: var(--font-mono);
+  font-size: 0.82rem;
+}
+
+.section--docs {
+  padding-top: 30px;
+}
+
+.docs-cta {
+  padding: 28px;
+  border-radius: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 24px;
+}
+
+.docs-layout {
+  display: grid;
+  grid-template-columns: 300px 1fr;
+  gap: 28px;
+  padding: 44px 0 70px;
+}
+
+.docs-sidebar {
+  position: sticky;
+  top: 94px;
+  align-self: start;
+  padding: 28px;
+  border-radius: 28px;
+  background:
+    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)),
+    var(--panel);
+  border: 1px solid rgba(255,255,255,0.08);
+}
+
+.docs-sidebar h1 {
+  font-size: clamp(2.2rem, 4vw, 3.8rem);
+}
+
+.docs-sidebar__nav {
+  display: grid;
+  gap: 10px;
+  margin-top: 24px;
+}
+
+.docs-sidebar__nav a {
+  padding: 10px 12px;
+  border-radius: 16px;
+  color: var(--muted);
+  background: rgba(255,255,255,0.03);
+  border: 1px solid transparent;
+}
+
+.docs-sidebar__nav a.is-current,
+.docs-sidebar__nav a:hover,
+.docs-sidebar__nav a:focus-visible {
+  color: var(--text);
+  border-color: rgba(255,255,255,0.12);
+}
+
+.docs-content {
+  display: grid;
+  gap: 18px;
+}
+
+.docs-section {
+  padding: 28px;
+  border-radius: 28px;
+  background:
+    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)),
+    var(--panel);
+  border: 1px solid rgba(255,255,255,0.08);
+  scroll-margin-top: 104px;
+}
+
+.docs-callout {
+  margin-top: 18px;
+  padding: 16px 18px;
+  border-radius: 20px;
+}
+
+.docs-callout strong {
+  display: inline-block;
+  margin-right: 8px;
+}
+
+.docs-snippet-grid,
+.docs-card-grid {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  margin-top: 20px;
+}
+
+.docs-link-grid {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  margin-top: 16px;
+}
+
+.docs-snippet,
+.docs-card,
+.docs-link-card,
+.docs-codeblock {
+  border-radius: 22px;
+}
+
+.docs-snippet,
+.docs-card,
+.docs-link-card {
+  padding: 18px;
+}
+
+.docs-codeblock {
+  margin-top: 18px;
+  overflow: hidden;
+}
+
+.docs-list {
+  margin: 18px 0 0;
+  padding-left: 20px;
+  color: var(--muted-strong);
+}
+
+.docs-list li + li {
+  margin-top: 10px;
+}
+
+.site-footer {
+  padding: 30px 0 42px;
+  border-top: 1px solid rgba(255,255,255,0.08);
+}
+
+.site-footer__grid {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 18px;
+  flex-wrap: wrap;
+}
+
+.footer-links {
+  display: flex;
+  gap: 16px;
+  flex-wrap: wrap;
+  color: var(--muted);
+}
+
+.footer-links a:hover,
+.footer-links a:focus-visible {
+  color: var(--text);
+}
+
+.toast {
+  position: fixed;
+  left: 50%;
+  bottom: 24px;
+  transform: translateX(-50%) translateY(30px);
+  min-width: 180px;
+  padding: 12px 18px;
+  border-radius: 999px;
+  background: rgba(7, 11, 26, 0.92);
+  border: 1px solid rgba(255,255,255,0.1);
+  color: var(--text);
+  opacity: 0;
+  pointer-events: none;
+  transition: transform 220ms var(--ease), opacity 220ms var(--ease);
+  z-index: 40;
+}
+
+.toast.is-visible {
+  opacity: 1;
+  transform: translateX(-50%) translateY(0);
+}
+
+.reveal {
+  opacity: 0;
+  transform: translateY(30px);
+  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
+}
+
+.reveal.is-visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.reveal-delay-1 {
+  transition-delay: 100ms;
+}
+
+@keyframes drift-a {
+  0%, 100% { transform: translate3d(0, 0, 0); }
+  50% { transform: translate3d(40px, -20px, 0); }
+}
+
+@keyframes drift-b {
+  0%, 100% { transform: translate3d(0, 0, 0); }
+  50% { transform: translate3d(-35px, 24px, 0); }
+}
+
+@keyframes drift-c {
+  0%, 100% { transform: translate3d(0, 0, 0); }
+  50% { transform: translate3d(18px, -28px, 0); }
+}
+
+@media (max-width: 1100px) {
+  .hero__grid,
+  .demo-console__body,
+  .docs-layout {
+    grid-template-columns: 1fr;
+  }
+
+  .docs-sidebar {
+    position: static;
+  }
+
+  .surface-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .step-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 720px) {
+  .site-header__inner,
+  .docs-cta,
+  .site-footer__grid {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .hero {
+    padding-top: 36px;
+  }
+
+  .hero__stats,
+  .surface-grid,
+  .step-grid,
+  .docs-card-grid,
+  .docs-link-grid,
+  .docs-snippet-grid,
+  .graph-grid,
+  .demo-metrics,
+  .stage-panels {
+    grid-template-columns: 1fr;
+  }
+
+  .site-nav {
+    gap: 12px;
+  }
+
+  .shell {
+    width: min(var(--shell), calc(100vw - 24px));
+  }
+
+  .section,
+  .docs-layout {
+    padding-top: 54px;
+    padding-bottom: 54px;
+  }
+
+  .demo-console__toolbar,
+  .demo-console__timeline,
+  .demo-console__body,
+  .docs-sidebar,
+  .docs-section,
+  .docs-cta,
+  .stage-frame__content {
+    padding: 18px;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation: none !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}

docs/index.html

@@ -0,0 +1,272 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="GoalOS by AbteeX AI Labs documentation hub for Hugging Face visitors.">
+  <meta name="theme-color" content="#060816">
+  <meta name="color-scheme" content="dark">
+  <title>GoalOS Docs | AbteeX AI Labs</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600;700&family=Syne:wght@500;700;800&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="../assets/styles.css">
+</head>
+<body class="space-docs">
+  <a class="skip-link" href="#docs-main">Skip to content</a>
+  <div class="aurora aurora-a"></div>
+  <div class="aurora aurora-b"></div>
+  <div class="grid-noise"></div>
+
+  <header class="site-header site-header--docs">
+    <div class="shell site-header__inner">
+      <a class="brand" href="../index.html">
+        <span class="brand__mark brand__mark--small"></span>
+        <span>
+          <strong>GoalOS</strong>
+          <span>by AbteeX AI Labs</span>
+        </span>
+      </a>
+
+      <nav class="site-nav" aria-label="Docs navigation">
+        <a href="../index.html">Demo</a>
+        <a href="#quickstart">Quickstart</a>
+        <a href="#surfaces">Surfaces</a>
+        <a href="#transport">Transport</a>
+      </nav>
+    </div>
+  </header>
+
+  <main id="docs-main" class="docs-layout shell">
+    <aside class="docs-sidebar">
+      <p class="eyebrow">Docs Hub</p>
+      <h1>GoalOS docs for Hugging Face visitors.</h1>
+      <p class="docs-sidebar__lede">
+        Start here if you want the shortest path from “interesting idea” to “working implementation”.
+      </p>
+
+      <nav class="docs-sidebar__nav" data-section-nav>
+        <a href="#what-is-goalos">What is GoalOS</a>
+        <a href="#quickstart">Quickstart</a>
+        <a href="#surfaces">Package surfaces</a>
+        <a href="#graph-model">Graph model</a>
+        <a href="#transport">Transport layers</a>
+        <a href="#deploy">HF publish flow</a>
+        <a href="#deeper-links">Deeper links</a>
+      </nav>
+    </aside>
+
+    <article class="docs-content">
+      <section id="what-is-goalos" class="docs-section">
+        <p class="eyebrow">Overview</p>
+        <h2>What GoalOS actually is</h2>
+        <p>
+          GoalOS is a protocol and package surface for representing human intent in a structured graph that AI systems can reason over. It models goals, dependencies, permissions, status, priorities, and time horizons so multiple tools stop acting like isolated copilots and start coordinating against the same operational picture.
+        </p>
+        <div class="docs-callout">
+          <strong>Important:</strong>
+          <span>GoalOS is not just memory and not just task tracking. It is the intent layer that sits above both.</span>
+        </div>
+      </section>
+
+      <section id="quickstart" class="docs-section">
+        <p class="eyebrow">Quickstart</p>
+        <h2>Install the surface that matches your stack</h2>
+
+        <div class="docs-snippet-grid">
+          <article class="docs-snippet">
+            <div class="docs-snippet__topline">
+              <span>TypeScript core</span>
+              <button class="chip-button chip-button--small" type="button" data-copy="npm install @goalos/core">Copy</button>
+            </div>
+            <pre><code>npm install @goalos/core</code></pre>
+          </article>
+
+          <article class="docs-snippet">
+            <div class="docs-snippet__topline">
+              <span>Python SDK</span>
+              <button class="chip-button chip-button--small" type="button" data-copy="pip install goalos">Copy</button>
+            </div>
+            <pre><code>pip install goalos</code></pre>
+          </article>
+
+          <article class="docs-snippet">
+            <div class="docs-snippet__topline">
+              <span>CLI</span>
+              <button class="chip-button chip-button--small" type="button" data-copy="npm install -g goalos">Copy</button>
+            </div>
+            <pre><code>npm install -g goalos</code></pre>
+          </article>
+
+          <article class="docs-snippet">
+            <div class="docs-snippet__topline">
+              <span>MCP server</span>
+              <button class="chip-button chip-button--small" type="button" data-copy="npm install -g @goalos/mcp-server">Copy</button>
+            </div>
+            <pre><code>npm install -g @goalos/mcp-server</code></pre>
+          </article>
+        </div>
+
+        <div class="docs-codeblock">
+          <div class="docs-codeblock__topline">
+            <span>TypeScript example</span>
+            <button class="chip-button chip-button--small" type="button" data-copy-source="ts-example">Copy</button>
+          </div>
+          <pre><code id="ts-example">import { IntentGraphClass } from '@goalos/core';
+
+const graph = IntentGraphClass.create('founder@abteex.com', 'Launch Board');
+
+const launch = graph.addGoal({
+  title: 'Launch GoalOS public demo',
+  status: 'active',
+  priority: { level: 'critical' },
+  domain: 'product',
+  successCriteria: ['Space is live', 'Docs are public'],
+});
+
+graph.addGoal({
+  title: 'Ship Hugging Face cinematic demo',
+  parentId: launch.id,
+  status: 'active',
+  priority: { level: 'high' },
+  tags: ['launch', 'demo'],
+});</code></pre>
+        </div>
+
+        <div class="docs-codeblock">
+          <div class="docs-codeblock__topline">
+            <span>Python example</span>
+            <button class="chip-button chip-button--small" type="button" data-copy-source="py-example">Copy</button>
+          </div>
+          <pre><code id="py-example">from goalos import IntentGraphManager, Priority
+
+graph = IntentGraphManager.create(owner="abteex", name="Personal Chief of Staff")
+
+graph.add_goal(
+    title="Protect deep work block",
+    priority=Priority(level="high", score=80),
+    domain="personal_ops",
+)</code></pre>
+        </div>
+      </section>
+
+      <section id="surfaces" class="docs-section">
+        <p class="eyebrow">Surfaces</p>
+        <h2>Package surfaces</h2>
+        <div class="docs-card-grid">
+          <article class="docs-card">
+            <h3>@goalos/core</h3>
+            <p>The canonical TypeScript engine for goals, graphs, priority, validation, merge logic, permissions, and queries.</p>
+          </article>
+          <article class="docs-card">
+            <h3>goalos CLI</h3>
+            <p>Terminal-first graph creation, inspection, status review, prioritization, validation, import/export, and serving.</p>
+          </article>
+          <article class="docs-card">
+            <h3>@goalos/mcp-server</h3>
+            <p>Connect GoalOS to Claude Desktop and other MCP clients so they can read and update intent-aware context.</p>
+          </article>
+          <article class="docs-card">
+            <h3>goalos Python SDK</h3>
+            <p>Python-native graph modeling and automation workflows with strong typing and API-friendly data structures.</p>
+          </article>
+        </div>
+      </section>
+
+      <section id="graph-model" class="docs-section">
+        <p class="eyebrow">Model</p>
+        <h2>Core graph semantics</h2>
+        <ul class="docs-list">
+          <li><strong>Goal:</strong> a unit of intent with status, domain, priority, time horizon, and success criteria.</li>
+          <li><strong>Hierarchy:</strong> parent-child relationships for strategic goals and execution work.</li>
+          <li><strong>Dependency:</strong> explicit blockers, enablers, and related goals across teams or tools.</li>
+          <li><strong>Permissions:</strong> scoped capabilities so agents do not get global write access by default.</li>
+          <li><strong>Priority engine:</strong> dynamic urgency based on deadlines, blockers, and current execution state.</li>
+        </ul>
+      </section>
+
+      <section id="transport" class="docs-section">
+        <p class="eyebrow">Transport</p>
+        <h2>How GoalOS reaches other systems</h2>
+        <div class="docs-card-grid">
+          <article class="docs-card">
+            <h3>CLI</h3>
+            <p>Ideal for local graphs, shell-driven workflows, and automation glue.</p>
+          </article>
+          <article class="docs-card">
+            <h3>MCP</h3>
+            <p>Ideal for AI desktop clients and tool-calling agents that need structured context.</p>
+          </article>
+          <article class="docs-card">
+            <h3>OpenAPI</h3>
+            <p>Ideal for hosted clients, custom GPT actions, and HTTP-native orchestrators.</p>
+          </article>
+        </div>
+
+        <div class="docs-codeblock">
+          <div class="docs-codeblock__topline">
+            <span>MCP config sketch</span>
+            <button class="chip-button chip-button--small" type="button" data-copy-source="mcp-example">Copy</button>
+          </div>
+          <pre><code id="mcp-example">{
+  "mcpServers": {
+    "goalos": {
+      "command": "npx",
+      "args": ["@goalos/mcp-server"]
+    }
+  }
+}</code></pre>
+        </div>
+      </section>
+
+      <section id="deploy" class="docs-section">
+        <p class="eyebrow">Publish</p>
+        <h2>How this Hugging Face Space is deployed</h2>
+        <p>
+          This repo includes a self-contained Static Space bundle in <code>hf/space/</code> plus helper scripts for verification and publishing.
+        </p>
+
+        <div class="docs-codeblock">
+          <div class="docs-codeblock__topline">
+            <span>Local commands</span>
+            <button class="chip-button chip-button--small" type="button" data-copy-source="publish-example">Copy</button>
+          </div>
+          <pre><code id="publish-example">pnpm hf:space:verify
+pnpm hf:space:publish</code></pre>
+        </div>
+
+        <p>
+          The publish helper creates or reuses <code>AbteeXAILab/GoalOS</code> as a public Static Space and uploads the contents of <code>hf/space/</code>.
+        </p>
+      </section>
+
+      <section id="deeper-links" class="docs-section">
+        <p class="eyebrow">More</p>
+        <h2>Go deeper</h2>
+        <div class="docs-link-grid">
+          <a class="docs-link-card" href="https://github.com/Aimaghsoodi/GoalOS" target="_blank" rel="noopener noreferrer">
+            <strong>Canonical GitHub repository</strong>
+            <span>Source, packages, issues, and release history.</span>
+          </a>
+          <a class="docs-link-card" href="https://github.com/Aimaghsoodi/GoalOS/tree/main/spec" target="_blank" rel="noopener noreferrer">
+            <strong>Spec directory</strong>
+            <span>OpenAPI, schema files, examples, and protocol references.</span>
+          </a>
+          <a class="docs-link-card" href="https://github.com/Aimaghsoodi/GoalOS/tree/main/examples" target="_blank" rel="noopener noreferrer">
+            <strong>Examples</strong>
+            <span>Cloudflare Worker, Claude Desktop, LangChain, and CrewAI integrations.</span>
+          </a>
+          <a class="docs-link-card" href="https://aimaghsoodi.github.io/GoalOS/" target="_blank" rel="noopener noreferrer">
+            <strong>Existing website</strong>
+            <span>The broader public website this Space complements.</span>
+          </a>
+        </div>
+      </section>
+    </article>
+  </main>
+
+  <div class="toast" aria-live="polite" aria-atomic="true" data-toast></div>
+
+  <script src="../assets/app.js"></script>
+</body>
+</html>

index.html

@@ -1,19 +1,337 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="GoalOS by AbteeX AI Labs. A futurist Hugging Face Space for the intent layer that coordinates people, teams, and AI agents.">
+  <meta name="theme-color" content="#060816">
+  <meta name="color-scheme" content="dark">
+  <title>GoalOS by AbteeX AI Labs</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600;700&family=Syne:wght@500;700;800&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="./assets/styles.css">
+</head>
+<body class="space-home">
+  <a class="skip-link" href="#main">Skip to content</a>
+  <div class="aurora aurora-a"></div>
+  <div class="aurora aurora-b"></div>
+  <div class="aurora aurora-c"></div>
+  <div class="grid-noise"></div>
+
+  <header class="site-header" id="top">
+    <div class="shell site-header__inner">
+      <a class="brand" href="#top" aria-label="GoalOS by AbteeX AI Labs">
+        <span class="brand__mark">
+          <svg viewBox="0 0 64 64" aria-hidden="true">
+            <defs>
+              <linearGradient id="brandGradient" x1="8" y1="8" x2="56" y2="56" gradientUnits="userSpaceOnUse">
+                <stop offset="0%" stop-color="#00d1ff"></stop>
+                <stop offset="55%" stop-color="#ff7a18"></stop>
+                <stop offset="100%" stop-color="#ffd166"></stop>
+              </linearGradient>
+            </defs>
+            <path d="M32 4 56 18v28L32 60 8 46V18Z" fill="none" stroke="url(#brandGradient)" stroke-width="3"></path>
+            <circle cx="32" cy="20" r="6" fill="url(#brandGradient)"></circle>
+            <circle cx="19" cy="37" r="4" fill="#00d1ff"></circle>
+            <circle cx="45" cy="37" r="4" fill="#ff7a18"></circle>
+            <path d="M32 26 19 33M32 26l13 7M19 41h26" stroke="url(#brandGradient)" stroke-width="3" stroke-linecap="round"></path>
+          </svg>
+        </span>
+        <span>
+          <strong>GoalOS</strong>
+          <span>by AbteeX AI Labs</span>
+        </span>
+      </a>
+
+      <nav class="site-nav" aria-label="Primary">
+        <a href="#demo">Demo</a>
+        <a href="#surfaces">Surfaces</a>
+        <a href="./docs/index.html">Docs</a>
+        <a href="https://github.com/Aimaghsoodi/GoalOS" target="_blank" rel="noopener noreferrer">GitHub</a>
+      </nav>
+    </div>
+  </header>
+
+  <main id="main">
+    <section class="hero">
+      <div class="shell hero__grid">
+        <div class="hero__copy reveal">
+          <p class="eyebrow">Hugging Face Launch Surface</p>
+          <h1>One intent layer for teams, humans, and every AI agent in the loop.</h1>
+          <p class="hero__lede">
+            GoalOS gives engineering, research, marketing, founders, and AI copilots one shared graph of what matters now, what is blocked, and what must happen next.
+          </p>
+
+          <div class="hero__actions">
+            <a class="button button--primary" href="#demo">Play Cinematic Demo</a>
+            <a class="button button--ghost" href="./docs/index.html">Open Docs</a>
+            <a class="button button--ghost" href="https://github.com/Aimaghsoodi/GoalOS" target="_blank" rel="noopener noreferrer">View GitHub</a>
+          </div>
+
+          <div class="hero__stats">
+            <article class="metric-card">
+              <span class="metric-card__label">Team alignment</span>
+              <strong>Cross-agent context without prompt drift</strong>
+            </article>
+            <article class="metric-card">
+              <span class="metric-card__label">Surfaces</span>
+              <strong>TypeScript, Python, CLI, MCP, OpenAPI</strong>
+            </article>
+            <article class="metric-card">
+              <span class="metric-card__label">Launch mode</span>
+              <strong>Public HF Space + cinematic product demo</strong>
+            </article>
+          </div>
+        </div>
+
+        <div class="hero__stage reveal reveal-delay-1">
+          <div class="stage-frame">
+            <div class="stage-frame__chrome">
+              <span></span>
+              <span></span>
+              <span></span>
+            </div>
+
+            <div class="stage-frame__content">
+              <div class="stage-kicker">
+                <span class="status-dot"></span>
+                Mission board online
+              </div>
+
+              <div class="orbital-board">
+                <div class="orbital-board__center">
+                  <span>Intent Core</span>
+                  <strong>GoalOS</strong>
+                </div>
+                <div class="orbital-node orbital-node--cyan">Product</div>
+                <div class="orbital-node orbital-node--orange">Research</div>
+                <div class="orbital-node orbital-node--gold">Marketing</div>
+                <div class="orbital-node orbital-node--magenta">Personal Ops</div>
+              </div>
+
+              <div class="stage-tape">
+                <span>claude-desktop</span>
+                <span>langchain</span>
+                <span>crewai</span>
+                <span>custom openapi client</span>
+              </div>
+
+              <div class="stage-panels">
+                <article class="stage-panel">
+                  <span>Today</span>
+                  <strong>6 critical moves</strong>
+                  <p>GoalOS ranks the graph using blockers, deadlines, and team-level dependencies.</p>
+                </article>
+                <article class="stage-panel">
+                  <span>Now playing</span>
+                  <strong>Team Command Center</strong>
+                  <p>AI tools stop optimizing in isolation and start coordinating against the same launch graph.</p>
+                </article>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section class="section section--demo" id="demo">
+      <div class="shell">
+        <div class="section-heading reveal">
+          <p class="eyebrow">Cinematic Demo</p>
+          <h2>Two stories. One graph. Zero context loss.</h2>
+          <p>
+            This demo is scripted to show the exact shift GoalOS creates: first at team level, then at personal level.
+          </p>
+        </div>
+
+        <div class="demo-console reveal reveal-delay-1" data-demo-root>
+          <div class="demo-console__toolbar">
+            <div class="demo-console__tabs" data-act-buttons></div>
+            <div class="demo-console__controls">
+              <button class="chip-button" type="button" data-demo-action="toggle">Pause</button>
+              <button class="chip-button" type="button" data-demo-action="replay">Replay</button>
+            </div>
+          </div>
+
+          <div class="demo-console__progress">
+            <div class="demo-console__progress-fill" data-demo-progress></div>
+          </div>
+
+          <div class="demo-console__body">
+            <div class="demo-narrative">
+              <p class="demo-label" data-scene-label></p>
+              <h3 data-scene-title></h3>
+              <p class="demo-summary" data-scene-summary></p>
+              <p class="demo-highlight" data-scene-highlight></p>
+
+              <div class="demo-metrics" data-scene-metrics></div>
+
+              <div class="demo-code">
+                <div class="demo-code__topline">
+                  <span>Live action</span>
+                  <button class="chip-button chip-button--small" type="button" data-copy-source="demo-code">Copy</button>
+                </div>
+                <pre><code id="demo-code" data-scene-code></code></pre>
+              </div>
+            </div>
+
+            <div class="demo-wall">
+              <div class="demo-graph-panel">
+                <div class="panel-heading">
+                  <span>Intent graph snapshot</span>
+                  <strong data-scene-counter></strong>
+                </div>
+                <div class="graph-grid" data-scene-graph></div>
+              </div>
+
+              <div class="demo-events-panel">
+                <div class="panel-heading">
+                  <span>Agent event stream</span>
+                  <strong>Live coordination</strong>
+                </div>
+                <ul class="event-stream" data-scene-events></ul>
+              </div>
+            </div>
+          </div>
+
+          <div class="demo-console__timeline" data-scene-buttons></div>
+        </div>
+      </div>
+    </section>
+
+    <section class="section" id="surfaces">
+      <div class="shell">
+        <div class="section-heading reveal">
+          <p class="eyebrow">Package Surfaces</p>
+          <h2>Everything you need to wire GoalOS into a real stack.</h2>
+          <p>
+            GoalOS is packaged for application code, automation pipelines, terminal workflows, MCP clients, and custom integrations.
+          </p>
+        </div>
+
+        <div class="surface-grid reveal reveal-delay-1">
+          <article class="surface-card">
+            <div class="surface-card__meta">TypeScript core</div>
+            <h3>@goalos/core</h3>
+            <p>Use the intent graph engine directly inside product code, orchestration services, or server-side workflows.</p>
+            <pre><code>npm install @goalos/core</code></pre>
+            <button class="chip-button" type="button" data-copy="npm install @goalos/core">Copy install</button>
+          </article>
+
+          <article class="surface-card">
+            <div class="surface-card__meta">Python SDK</div>
+            <h3>goalos</h3>
+            <p>Mirror GoalOS primitives in Python with typed models and API-friendly graph operations.</p>
+            <pre><code>pip install goalos</code></pre>
+            <button class="chip-button" type="button" data-copy="pip install goalos">Copy install</button>
+          </article>
+
+          <article class="surface-card">
+            <div class="surface-card__meta">CLI</div>
+            <h3>goalos</h3>
+            <p>Create, inspect, prioritize, validate, and serve your graph from the terminal.</p>
+            <pre><code>npm install -g goalos</code></pre>
+            <button class="chip-button" type="button" data-copy="npm install -g goalos">Copy install</button>
+          </article>
+
+          <article class="surface-card">
+            <div class="surface-card__meta">MCP server</div>
+            <h3>@goalos/mcp-server</h3>
+            <p>Expose GoalOS as a structured context provider to Claude Desktop and any MCP-compatible client.</p>
+            <pre><code>npm install -g @goalos/mcp-server</code></pre>
+            <button class="chip-button" type="button" data-copy="npm install -g @goalos/mcp-server">Copy install</button>
+          </article>
+
+          <article class="surface-card">
+            <div class="surface-card__meta">OpenAPI + spec</div>
+            <h3>spec/openapi.yaml</h3>
+            <p>Bring GoalOS into custom GPT actions, orchestrators, and HTTP-native integrations.</p>
+            <pre><code>spec/openapi.yaml</code></pre>
+            <a class="chip-button chip-button--link" href="https://github.com/Aimaghsoodi/GoalOS/tree/main/spec" target="_blank" rel="noopener noreferrer">Open spec</a>
+          </article>
+        </div>
+      </div>
+    </section>
+
+    <section class="section section--how">
+      <div class="shell">
+        <div class="section-heading reveal">
+          <p class="eyebrow">How It Works</p>
+          <h2>Define intent once. Let every tool reason against the same operating picture.</h2>
+        </div>
+
+        <div class="step-grid reveal reveal-delay-1">
+          <article class="step-card">
+            <span>01</span>
+            <h3>Model the graph</h3>
+            <p>Encode goals, sub-goals, deadlines, blockers, permissions, and success criteria in a structured graph.</p>
+          </article>
+          <article class="step-card">
+            <span>02</span>
+            <h3>Connect agents</h3>
+            <p>Expose GoalOS via code, CLI, MCP, or OpenAPI so your tools read from a shared context layer.</p>
+          </article>
+          <article class="step-card">
+            <span>03</span>
+            <h3>Resolve collisions</h3>
+            <p>Priorities shift automatically when blockers appear, deadlines move, or team focus changes.</p>
+          </article>
+          <article class="step-card">
+            <span>04</span>
+            <h3>Coordinate outcomes</h3>
+            <p>Founders, operators, and AI systems now act against one stateful picture instead of isolated prompts.</p>
+          </article>
+        </div>
+      </div>
+    </section>
+
+    <section class="section section--docs">
+      <div class="shell">
+        <div class="docs-cta reveal">
+          <div>
+            <p class="eyebrow">Docs Hub</p>
+            <h2>Walk from launch page into real implementation detail.</h2>
+            <p>
+              The in-Space docs cover quickstart installs, package surfaces, CLI and MCP setup, graph semantics, and the Hugging Face publish flow used for this launch.
+            </p>
+          </div>
+
+          <div class="docs-cta__actions">
+            <a class="button button--primary" href="./docs/index.html">Read the docs</a>
+            <a class="button button--ghost" href="https://github.com/Aimaghsoodi/GoalOS/tree/main/examples" target="_blank" rel="noopener noreferrer">Open examples</a>
+          </div>
+        </div>
+      </div>
+    </section>
+  </main>
+
+  <footer class="site-footer">
+    <div class="shell site-footer__grid">
+      <div>
+        <div class="brand brand--footer">
+          <span class="brand__mark brand__mark--small"></span>
+          <span>
+            <strong>GoalOS</strong>
+            <span>by AbteeX AI Labs</span>
+          </span>
+        </div>
+        <p>
+          Public Hugging Face launch surface for the open-source intent layer that keeps people and AI agents aligned.
+        </p>
+      </div>
+
+      <div class="footer-links">
+        <a href="./docs/index.html">Docs</a>
+        <a href="https://github.com/Aimaghsoodi/GoalOS" target="_blank" rel="noopener noreferrer">GitHub</a>
+        <a href="https://aimaghsoodi.github.io/GoalOS/" target="_blank" rel="noopener noreferrer">Website</a>
+        <a href="https://github.com/Aimaghsoodi/GoalOS/blob/main/LICENSE" target="_blank" rel="noopener noreferrer">MIT License</a>
+      </div>
+    </div>
+  </footer>
+
+  <div class="toast" aria-live="polite" aria-atomic="true" data-toast></div>
+
+  <script src="./assets/app.js"></script>
+</body>
 </html>