function ForgeCopyButton(props) {
  var _copied = React.useState(false);
  var copied = _copied[0], setCopied = _copied[1];

  function handleCopy() {
    navigator.clipboard.writeText(props.text).then(function () {
      setCopied(true);
      setTimeout(function () { setCopied(false); }, 1500);
    });
  }

  return (
    <button className="fg-copy" onClick={handleCopy} title="Copy to clipboard" type="button">
      {copied ? 'copied' : 'copy'}
    </button>
  );
}

/* ───────────────────── ForgeAbout ───────────────────── */

function ForgeAbout(props) {
  var navigate = props.navigate;
  var tactics = window.FORGE_TACTICS || [];

  return (
    <div className="fg-content">
      <div className="fg-breadcrumb">
        <a href="/forge" onClick={function (e) { e.preventDefault(); navigate('forge'); }}>Matrix</a>
        <span className="fg-breadcrumb-sep">/</span>
        <span>About</span>
      </div>

      <h1>About F.O.R.G.E</h1>

      <div className="fg-content-section">
        <h2>The Problem</h2>
        <p>Everyone is building with AI agents. Nobody agrees on how.</p>
        <p>Vendors ship runtimes and APIs. Researchers publish theoretical frameworks. But practitioners - the people actually deploying agentic AI into production - have no shared vocabulary, no structured methodology, and no way to evaluate whether their approach will survive contact with reality.</p>
        <p>When an AI agent nearly force-pushed to a production repository, there was no playbook for what governance should look like. When a ten-agent team needed to coordinate across domains, there was no established pattern for parallel dispatch. When sessions reset and context evaporated, there was no standard for knowledge persistence.</p>
        <p>We built all of it from scratch. Then we organized what we learned so nobody else has to.</p>
      </div>

      <div className="fg-content-section">
        <h2>Why a Framework?</h2>
        <p>I swore I would never write a framework. Frameworks are what happens when someone with a whiteboard and a title decides to solve a problem they've never actually had. I've sat through enough of those meetings to know better.</p>
        <p>But here's what changed: I watched the results. Teams without operational methodology, without governance, without structured context recovery, without defined authority, produce <em>dangerous</em> output. Agents that force-push to production. Hallucinated facts that ship to customers. Scope that expands until the project collapses under its own weight. These are not theoretical risks. They are the stories that make the news, the ones where the headline is "AI breaks everything" when the real headline should be "team deployed AI without a methodology."</p>
        <p>If you're not getting good results with AI agents, there is a point where it stops being the model's fault and starts being an operational problem. The models are good enough. The tooling is good enough. What's missing is the discipline, the same discipline that any high-performing team in any domain has always needed. This framework exists because proven engineering principles from QA, military operations, red teaming, and systems architecture transfer directly to AI collaboration, and the teams that apply them are getting dramatically better results than the teams that don't.</p>
        <p>I built this because it worked for us, and I'm publishing it because it will work for you.</p>
      </div>

      <div className="fg-content-section">
        <h2>What F.O.R.G.E Is</h2>
        <p><strong>F.O.R.G.E</strong> (Framework for Organized, Resilient, Governed Engineering and Development of Agentic AI) is an Agentic AI Creation Framework. It provides 73 methods organized across 8 tactical pillars - a structured, navigable taxonomy for building, governing, and scaling AI agent systems at any level of application.</p>
        <p>Modeled after <strong>MITRE ATT&amp;CK</strong> - the framework that gave cybersecurity a common language for adversary behavior - F.O.R.G.E gives agentic AI a common language for <em>building</em> behavior. Each method is specific, actionable, and comes with implementation guidance, success indicators, and failure modes.</p>
        <p>This is not theory. Every method exists because something went right - or more often, because something went wrong and we built the system to prevent it from happening again.</p>
      </div>

      <div className="fg-content-section">
        <h2>Who It's For</h2>
        <p>F.O.R.G.E scales to any level of agentic AI application:</p>
        <ul>
          <li><strong>Solo practitioners</strong> running 1-3 AI agents: Start with Foundation and Knowledge (~10 core methods)</li>
          <li><strong>Teams</strong> of 2-5 humans with multiple agents: Add Governance and Team Design (~25 methods)</li>
          <li><strong>Organizations</strong> running scaled AI operations: Implement the full framework (all 73 methods)</li>
        </ul>
        <p>If you are using AI agents in production - or planning to - F.O.R.G.E gives you the vocabulary and the playbook.</p>
      </div>

      <div className="fg-content-section">
        <h2>The Eight Pillars</h2>
        <div style={{overflowX: 'auto'}}>
          <table className="fg-table">
            <thead>
              <tr>
                <th>Pillar</th>
                <th>What It Covers</th>
              </tr>
            </thead>
            <tbody>
              {tactics.map(function (t) {
                return (
                  <tr key={t.id}>
                    <td><strong style={{color: t.color}}>{t.name}</strong></td>
                    <td>{t.desc}</td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      </div>

      <div className="fg-content-section">
        <h2>Origin</h2>
        <p>F.O.R.G.E was developed by Pete McKernan, drawing from 20 years of operational experience: military command (92 Marines in combat operations), red team operations at the highest classification levels, QA engineering, adversarial security research, and game design.</p>
        <p>The methodology was forged - literally - during the first two weeks of running a production agentic AI team: 10 specialized agents, 463,000 words of output, a patent filing, multiple software products, and a governance system built because an agent almost destroyed a repository.</p>
        <p>Every structure in F.O.R.G.E maps to proven patterns from domains where getting it wrong has real consequences. Trust tiers are security clearances. Mission briefings are agent invocations. Standing orders are persistent directives. Session handoffs are shift-change briefs. The patterns transfer because the underlying problem - coordinating distributed teams under uncertainty - is identical.</p>
      </div>

      <div className="fg-content-section">
        <h2>Framework Structure</h2>
        <p>F.O.R.G.E uses a matrix structure inspired by MITRE ATT&amp;CK:</p>
        <ul>
          <li><strong>Tactics</strong> (columns) represent the 8 strategic pillars of agentic AI development</li>
          <li><strong>Methods</strong> (cells) represent 73 specific practices within each tactic</li>
          <li>Each method includes a description, implementation guide, success indicators, and failure modes</li>
          <li>Methods are identified by ID (e.g., FG-0101) for precise cross-referencing</li>
        </ul>
      </div>

      <div className="fg-content-section">
        <h2>Version History</h2>
        <div style={{overflowX: 'auto'}}>
          <table className="fg-table">
            <thead>
              <tr>
                <th>Version</th>
                <th>Date</th>
                <th>Changes</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>v1.2</td>
                <td>2026-06-28</td>
                <td>Initial release. 8 tactics, 73 methods.</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      <div className="fg-content-section">
        <h2>Contribute</h2>
        <p>F.O.R.G.E grows from real experience. If you've found a pattern that works, a method that's missing, or a sub-method that would make an existing technique more concrete, we want to hear about it.</p>
        <ul>
          <li><strong>Propose a sub-method:</strong> <a href="https://github.com/itsbroken-ai/forge/issues/new?template=sub-method-proposal.yml" target="_blank" rel="noopener">Open an issue</a> with what you've learned</li>
          <li><strong>Propose a technique:</strong> <a href="https://github.com/itsbroken-ai/forge/issues/new?template=technique-proposal.yml" target="_blank" rel="noopener">Open an issue</a> for new methods the framework doesn't cover</li>
          <li><strong>Read the guide:</strong> <a href="https://github.com/itsbroken-ai/forge/blob/main/CONTRIBUTING.md" target="_blank" rel="noopener">CONTRIBUTING.md</a> explains the process and standards</li>
        </ul>
      </div>

      <div className="fg-content-section">
        <h2>Contact</h2>
        <p>F.O.R.G.E is maintained by Pete McKernan. For questions or feedback: <a href="mailto:Human_P@itsbroken.ai">Human_P@itsbroken.ai</a>. Read more at <a href="https://itsbroken.ai" onClick={function (e) { e.preventDefault(); navigate(''); }}>itsbroken.ai</a>.</p>
      </div>
    </div>
  );
}

/* ───────────────────── ForgeGettingStarted ───────────────────── */

function ForgeGettingStarted(props) {
  var navigate = props.navigate;

  return (
    <div className="fg-content">
      <div className="fg-breadcrumb">
        <a href="/forge" onClick={function (e) { e.preventDefault(); navigate('forge'); }}>Matrix</a>
        <span className="fg-breadcrumb-sep">/</span>
        <span>Getting Started</span>
      </div>

      <h1>Getting Started with F.O.R.G.E</h1>

      <div className="fg-content-section">
        <h2>Step 1: Understand the Matrix</h2>
        <p>The F.O.R.G.E matrix organizes agentic AI development methods into 8 tactical pillars. Start by reading the <a href="/forge" onClick={function (e) { e.preventDefault(); navigate('forge'); }}>matrix overview</a> to understand the full scope of the framework.</p>
        <p>Each column represents a tactic (a strategic area of agentic AI development). Each cell within a column represents a method (a specific practice you can implement).</p>
      </div>

      <div className="fg-content-section">
        <h2>Step 2: Assess Your Current State</h2>
        <p>Walk through each tactic and honestly evaluate which methods your team already uses, partially implements, or hasn't considered. Most teams will find they're strong in some areas and have gaps in others.</p>
        <p><strong>Common patterns:</strong></p>
        <ul>
          <li><strong>Technical teams</strong> tend to be strong in Execution and Quality but weak in Governance and Knowledge</li>
          <li><strong>Enterprise teams</strong> tend to be strong in Governance but weak in Team Design and Evolution</li>
          <li><strong>Solo practitioners</strong> tend to be strong in Foundation but weak in everything that requires structure</li>
        </ul>
      </div>

      <div className="fg-content-section">
        <h2>Step 3: Start with Foundation</h2>
        <p>The Foundation tactic (FT01) contains the philosophical underpinnings that inform everything else. If you don't have clarity on <em>why</em> you're collaborating with AI and <em>what</em> each party brings to the table, the operational methods won't stick.</p>
        <p>Key starting methods:</p>
        <ul>
          <li><a href="/forge/technique/FG-0101" onClick={function (e) { e.preventDefault(); navigate('forge/technique/FG-0101'); }}>FG-0101: Two-Layer Integration</a> - Understand what you bring vs. what AI brings</li>
          <li><a href="/forge/technique/FG-0102" onClick={function (e) { e.preventDefault(); navigate('forge/technique/FG-0102'); }}>FG-0102: Agent Protection Policy</a> - Decide how you'll treat AI agents</li>
          <li><a href="/forge/technique/FG-0103" onClick={function (e) { e.preventDefault(); navigate('forge/technique/FG-0103'); }}>FG-0103: People Over Process</a> - Set the right priorities</li>
        </ul>
      </div>

      <div className="fg-content-section">
        <h2>Step 4: Establish Governance</h2>
        <p>Before scaling your AI collaboration, establish the rules. Without governance, AI agents will make decisions you didn't authorize, access information they shouldn't, and create chaos that scales faster than you can fix it.</p>
        <p>Minimum viable governance:</p>
        <ul>
          <li><a href="/forge/technique/FG-0201" onClick={function (e) { e.preventDefault(); navigate('forge/technique/FG-0201'); }}>FG-0201: Authority Architecture</a> - Who has final say?</li>
          <li><a href="/forge/technique/FG-0202" onClick={function (e) { e.preventDefault(); navigate('forge/technique/FG-0202'); }}>FG-0202: Operational Directives</a> - What rules are inviolable?</li>
          <li><a href="/forge/technique/FG-0203" onClick={function (e) { e.preventDefault(); navigate('forge/technique/FG-0203'); }}>FG-0203: Trust Tiers</a> - What can each agent access?</li>
        </ul>
      </div>

      <div className="fg-content-section">
        <h2>Step 5: Design Your Team</h2>
        <p>One generalist AI agent will give you generalist results. Specialized agents with distinct roles create focused, higher-quality output and reduce the "well, it depends" hedging that comes from asking one entity to hold contradictory requirements.</p>
        <p>Start with <a href="/forge/technique/FG-0301" onClick={function (e) { e.preventDefault(); navigate('forge/technique/FG-0301'); }}>FG-0301: Agent Specialization</a> and build from there.</p>
      </div>

      <div className="fg-content-section">
        <h2>Step 6: Build Knowledge Systems</h2>
        <p>The number one complaint about AI collaboration: "It doesn't remember anything." This is a solvable problem, but only if you build the systems to solve it. The Knowledge tactic (FT07) covers everything from session handoffs to institutional memory.</p>
      </div>

      <div className="fg-content-section">
        <h2>Step 7: Iterate</h2>
        <p>F.O.R.G.E is not a checklist you complete once. It's a framework you grow into. Start with the methods that address your biggest pain points, measure the results, and expand from there. The Evolution tactic (FT08) covers how to track progress and adapt the framework to your needs.</p>
      </div>

      <div className="fg-content-section">
        <h2>Implementation Tiers</h2>
        <p>Adopt F.O.R.G.E at the level that matches your scale:</p>
        <div style={{overflowX: 'auto'}}>
          <table className="fg-table">
            <thead>
              <tr>
                <th>Tier</th>
                <th>Scale</th>
                <th>Focus</th>
                <th>Methods</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td><strong>Solo</strong></td>
                <td>1 human, 1-3 AI agents</td>
                <td>Foundation + Knowledge</td>
                <td>~10 core methods</td>
              </tr>
              <tr>
                <td><strong>Team</strong></td>
                <td>2-5 humans, multiple AI agents</td>
                <td>+ Governance + Team Design</td>
                <td>~25 methods</td>
              </tr>
              <tr>
                <td><strong>Organization</strong></td>
                <td>5+ humans, scaled AI operations</td>
                <td>Full framework</td>
                <td>All 73 methods</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      <div className="fg-content-section">
        <h2>Step 8: Contribute Back</h2>
        <p>F.O.R.G.E was built from one team's experience, but it grows from everyone's. If you discover a pattern that works, a method that's missing, or a sub-method that would make a technique more concrete, contribute it back.</p>
        <ul>
          <li><a href="https://github.com/itsbroken-ai/forge/issues/new?template=sub-method-proposal.yml" target="_blank" rel="noopener">Propose a sub-method</a> based on what you've learned</li>
          <li><a href="https://github.com/itsbroken-ai/forge/issues/new?template=technique-proposal.yml" target="_blank" rel="noopener">Propose a new technique</a> for domains the framework doesn't cover yet</li>
          <li>Read the <a href="https://github.com/itsbroken-ai/forge/blob/main/CONTRIBUTING.md" target="_blank" rel="noopener">contribution guide</a> for the full process</li>
        </ul>
        <p>Your war stories become someone else's playbook. That's how the framework scales.</p>
      </div>
    </div>
  );
}

/* ───────────────────── ForgeTerms ───────────────────── */

function ForgeTerms(props) {
  var navigate = props.navigate;

  React.useEffect(function () {
    var meta = document.createElement('meta');
    meta.name = 'robots';
    meta.content = 'noindex';
    document.head.appendChild(meta);
    return function () {
      document.head.removeChild(meta);
    };
  }, []);

  return (
    <div className="fg-content">
      <div className="fg-breadcrumb">
        <a href="/forge" onClick={function (e) { e.preventDefault(); navigate('forge'); }}>Matrix</a>
        <span className="fg-breadcrumb-sep">/</span>
        <span>Terms</span>
      </div>

      <h1>Terms of Use</h1>

      <div className="fg-content-section">
        <h2>Intellectual Property</h2>
        <p>F.O.R.G.E (Framework for Organized, Resilient, Governed Engineering and Development of Agentic AI) is the intellectual property of Pete McKernan and the Cipher Circle. All rights reserved.</p>
        <p>The following are protected intellectual property:</p>
        <ul>
          <li>The <strong>F.O.R.G.E</strong> name, acronym, and associated branding</li>
          <li>The <strong>framework taxonomy</strong> including all tactic definitions (FT01-FT08), method definitions (FG-0101 through FG-0803), and the matrix organizational structure</li>
          <li>The <strong>method identification system</strong> (FG-#### numbering schema)</li>
          <li>All <strong>written content</strong> including descriptions, implementation guides, success indicators, and failure mode analyses</li>
          <li>The <strong>visual design</strong> and trade dress of the F.O.R.G.E matrix presentation</li>
          <li>All <strong>source code</strong> for the site generator, templates, and interactive features</li>
        </ul>
      </div>

      <div className="fg-content-section">
        <h2>Permitted Use</h2>
        <p>You <strong>may</strong>:</p>
        <ul>
          <li>Reference F.O.R.G.E methods by ID (e.g., "FG-0101: Two-Layer Integration") in articles, talks, and educational materials with proper attribution</li>
          <li>Link to any page on this site</li>
          <li>Use the framework for your own internal team development</li>
          <li>Discuss, critique, or review the framework publicly</li>
          <li>Quote brief excerpts (under 300 words) with attribution for commentary, criticism, or educational purposes under fair use</li>
        </ul>
      </div>

      <div className="fg-content-section">
        <h2>Restricted Use</h2>
        <p>You <strong>may not</strong> without written permission:</p>
        <ul>
          <li>Reproduce, redistribute, or republish the framework content in whole or substantial part</li>
          <li>Create derivative frameworks, taxonomies, or competing products based on F.O.R.G.E structure or content</li>
          <li>Use the F.O.R.G.E name, branding, or method IDs in commercial products, services, or training materials</li>
          <li>Scrape, mirror, or create automated copies of this site or its data</li>
          <li>Remove or alter copyright notices, attribution, or authorship information</li>
          <li>Use F.O.R.G.E content to train machine learning models or AI systems</li>
          <li>Claim authorship of or affiliation with F.O.R.G.E without authorization</li>
        </ul>
      </div>

      <div className="fg-content-section">
        <h2>Commercial Licensing</h2>
        <p>Organizations wishing to incorporate F.O.R.G.E into commercial training, consulting, tooling, or products should contact us at <a href="https://itsbroken.ai" onClick={function (e) { e.preventDefault(); navigate(''); }}>itsbroken.ai</a> to discuss licensing.</p>
      </div>

      <div className="fg-content-section">
        <h2>Attribution Requirements</h2>
        <p>When referencing F.O.R.G.E, use the following attribution format:</p>
        <blockquote>
          <p>F.O.R.G.E - Agentic AI Creation Framework by Pete McKernan / Cipher Circle. <a href="https://forge.itsbroken.ai" target="_blank" rel="noopener">forge.itsbroken.ai</a></p>
        </blockquote>
      </div>

      <div className="fg-content-section">
        <h2>Trademark Notice</h2>
        <p>"F.O.R.G.E" and "Cipher Circle" are trademarks of Pete McKernan. The F.O.R.G.E method identification system (FG-####), tactic identification system (FT##), and the matrix organizational structure constitute protected trade dress.</p>
      </div>

      <div className="fg-content-section">
        <h2>Copyright</h2>
        <p>&copy; 2026 Pete McKernan / Cipher Circle. All rights reserved.</p>
        <p>The content of this site, including all text, data structures, code, and visual design, is protected by copyright law. Unauthorized reproduction or distribution is prohibited.</p>
      </div>

      <div className="fg-content-section">
        <h2>Contact</h2>
        <p>For licensing inquiries, permissions, or to report IP violations, visit <a href="https://itsbroken.ai" onClick={function (e) { e.preventDefault(); navigate(''); }}>itsbroken.ai</a>.</p>
      </div>
    </div>
  );
}

/* ───────────────────── ForgeTechniqueDetail ───────────────────── */

function ForgeTechniqueDetail(props) {
  var id = props.id;
  var navigate = props.navigate;

  var techniques = window.FORGE_TECHNIQUES || [];
  var tactics = window.FORGE_TACTICS || [];

  var technique = null;
  for (var i = 0; i < techniques.length; i++) {
    if (techniques[i].id.toLowerCase() === id.toLowerCase()) {
      technique = techniques[i];
      break;
    }
  }

  if (!technique) {
    return (
      <div className="fg-content">
        <div className="fg-breadcrumb">
          <a href="/forge" onClick={function (e) { e.preventDefault(); navigate('forge'); }}>Matrix</a>
          <span className="fg-breadcrumb-sep">/</span>
          <span>Not Found</span>
        </div>
        <h1>Method Not Found</h1>
        <p>No method found with ID "{id}". <a href="/forge" onClick={function (e) { e.preventDefault(); navigate('forge'); }}>Return to the matrix</a>.</p>
      </div>
    );
  }

  var tactic = null;
  for (var j = 0; j < tactics.length; j++) {
    if (tactics[j].id === technique.tactic_id) {
      tactic = tactics[j];
      break;
    }
  }
  if (!tactic) { tactic = { id: '', name: 'Unknown', color: '#888' }; }

  return (
    <div className="fg-detail">
      <div className="fg-breadcrumb">
        <a href="/forge" onClick={function (e) { e.preventDefault(); navigate('forge'); }}>Matrix</a>
        <span className="fg-breadcrumb-sep">/</span>
        <a href={'/forge?tactic=' + tactic.id} onClick={function (e) { e.preventDefault(); navigate('forge?tactic=' + tactic.id); }} style={{color: tactic.color}}>{tactic.name}</a>
        <span className="fg-breadcrumb-sep">/</span>
        <span>{technique.id}</span>
      </div>

      <div className="fg-detail-head">
        <div className="fg-detail-id" style={{color: tactic.color}}>{technique.id}</div>
        <h1 className="fg-detail-name">{technique.name}</h1>
        <span className="fg-detail-tactic-badge" style={{color: tactic.color, borderColor: tactic.color}}>{tactic.name}</span>
        <span className="fg-detail-version">v{technique.version}</span>
      </div>

      <div className="fg-section">
        <div className="fg-section-label">Description</div>
        <div className="fg-section-text">{technique.desc}</div>
      </div>

      <div className="fg-section">
        <div className="fg-section-label">Implementation</div>
        <div className="cs-code-wrap">
          <div className="fg-section-text">{technique.implementation}</div>
          <ForgeCopyButton text={technique.implementation} />
        </div>
      </div>

      <div className="fg-indicators">
        <div className="fg-section">
          <div className="fg-section-label">Success Indicators</div>
          <ul className="fg-indicator-list">
            {technique.success && technique.success.map(function (s, i) {
              return <li key={i} className="fg-indicator-item"><span className="fg-indicator-icon" style={{color: '#3ABF7C'}}>+</span>{s}</li>;
            })}
          </ul>
        </div>
        <div className="fg-section">
          <div className="fg-section-label">Failure Modes</div>
          <ul className="fg-indicator-list">
            {technique.failures && technique.failures.map(function (f, i) {
              return <li key={i} className="fg-indicator-item"><span className="fg-indicator-icon" style={{color: '#E8635A'}}>!</span>{f}</li>;
            })}
          </ul>
        </div>
      </div>

      {technique.subs && technique.subs.length > 0 && (
        <div className="fg-section">
          <div className="fg-section-label">Sub-Methods <span style={{opacity: 0.5}}>{technique.subs.length}</span></div>
          <div className="fg-sub-cards">
            {technique.subs.map(function (sm) {
              return (
                <div key={sm.id} className="fg-sub-card" style={{borderLeftColor: tactic.color}}>
                  <div className="fg-sub-card-id">{sm.id}</div>
                  <div className="fg-sub-card-name">{sm.name}</div>
                  <div className="fg-sub-card-desc">{sm.desc}</div>
                </div>
              );
            })}
          </div>
        </div>
      )}

      {technique.war_story && (
        <div className="fg-section">
          <div className="fg-section-label">War Story</div>
          <div className="fg-war-story">
            <div className="fg-war-story-text">{technique.war_story}</div>
          </div>
        </div>
      )}

      {technique.related && technique.related.length > 0 && (
        <div className="fg-section">
          <div className="fg-section-label">Related</div>
          <div className="fg-related">
            {technique.related.map(function (rid, i) {
              return (
                <a key={i} href={'/forge/technique/' + rid} className="fg-related-pill" onClick={function (e) { e.preventDefault(); navigate('forge/technique/' + rid); }}>
                  {rid}
                </a>
              );
            })}
          </div>
        </div>
      )}

      {technique.tags && technique.tags.length > 0 && (
        <div className="fg-section">
          <div className="fg-section-label">Tags</div>
          <div className="fg-tags">
            {technique.tags.map(function (tag, i) {
              return <span key={i} className="fg-tag">{tag}</span>;
            })}
          </div>
        </div>
      )}

      <div className="fg-section">
        <div className="fg-section-label">Terminal</div>
        <div className="cs-code-wrap">
          <div className="fg-curl">{technique.curl}</div>
          <ForgeCopyButton text={technique.curl} />
        </div>
      </div>
    </div>
  );
}

/* ───────────────────── ForgeMatrix ───────────────────── */

function ForgeMatrix(props) {
  var navigate = props.navigate;
  var initialTactic = props.initialTactic;

  var framework = window.FORGE_FRAMEWORK || { name: 'F.O.R.G.E', version: '1.2' };
  var tactics = window.FORGE_TACTICS || [];
  var techniques = window.FORGE_TECHNIQUES || [];

  var _search = React.useState('');
  var search = _search[0], setSearch = _search[1];

  var savedLayout = null;
  try { savedLayout = localStorage.getItem('forge-layout'); } catch (e) {}
  var _layout = React.useState(savedLayout === 'flat' ? 'flat' : 'side');
  var layout = _layout[0], setLayout = _layout[1];

  var _selectedTactic = React.useState(initialTactic || null);
  var selectedTactic = _selectedTactic[0], setSelectedTactic = _selectedTactic[1];

  var _expandedSubs = React.useState({});
  var expandedSubs = _expandedSubs[0], setExpandedSubs = _expandedSubs[1];

  var _showApi = React.useState(false);
  var showApi = _showApi[0], setShowApi = _showApi[1];

  var searchRef = React.useRef(null);

  var API_REF = '# List all tactics\ncurl https://itsbroken.ai/api/forge?action=tactics\n\n# Get techniques for a tactic\ncurl https://itsbroken.ai/api/forge?action=techniques&tactic_id=FT01\n\n# Get a specific technique\ncurl https://itsbroken.ai/api/forge?action=technique&id=FG-0101\n\n# Search techniques\ncurl https://itsbroken.ai/api/forge?action=search&q=governance';

  React.useEffect(function () {
    function handleKey(e) {
      if (e.key === '/' && document.activeElement !== searchRef.current && !['INPUT','TEXTAREA','SELECT'].includes(document.activeElement.tagName) && !document.activeElement.isContentEditable) {
        e.preventDefault();
        if (searchRef.current) searchRef.current.focus();
      }
      if (e.key === 'Escape' && document.activeElement === searchRef.current) {
        setSearch('');
        searchRef.current.blur();
      }
    }
    document.addEventListener('keydown', handleKey);
    return function () { document.removeEventListener('keydown', handleKey); };
  }, []);

  function changeLayout(l) {
    setLayout(l);
    try { localStorage.setItem('forge-layout', l); } catch (e) {}
  }

  function toggleSub(techId) {
    setExpandedSubs(function (prev) {
      var next = {};
      for (var k in prev) { next[k] = prev[k]; }
      next[techId] = !prev[techId];
      return next;
    });
  }

  function selectTactic(tacId) {
    setSelectedTactic(tacId);
  }

  var q = search.trim().toLowerCase();

  function isTechniqueVisible(t) {
    if (!q) return true;
    var haystack = (t.id + ' ' + t.name + ' ' + t.desc + ' ' + (t.tags || []).join(' ')).toLowerCase();
    return haystack.indexOf(q) >= 0;
  }

  var visibleTactics = tactics.filter(function (tac) {
    if (selectedTactic && tac.id !== selectedTactic) return false;
    var tacTechs = techniques.filter(function (t) { return t.tactic_id === tac.id; });
    if (q) return tacTechs.some(function (t) { return isTechniqueVisible(t); });
    return true;
  });

  var totalCount = techniques.length;
  var visibleCount = 0;
  techniques.forEach(function (t) {
    if (selectedTactic && t.tactic_id !== selectedTactic) return;
    if (isTechniqueVisible(t)) visibleCount++;
  });

  return (
    <div className="fg-wrap">
      <div className="fg-head">
        <div className="fg-titlewrap">
          <div className="fg-eyebrow">itsbroken.ai</div>
          <h2>F.O.R.G.E.</h2>
          <div className="fg-subtitle">Agentic AI Framework &mdash; {framework.version}</div>
        </div>
        <div className="fg-head-links">
          <button type="button" className="fg-head-link" onClick={function () { navigate('forge/about'); }}>About</button>
          <button type="button" className="fg-head-link" onClick={function () { navigate('forge/getting-started'); }}>Getting Started</button>
          <a href="https://github.com/itsbroken-ai/forge" className="fg-head-link" target="_blank" rel="noopener">Contribute</a>
        </div>
        <span className="fg-count">{search.trim() ? visibleCount + ' / ' + totalCount + ' methods' : totalCount + ' methods'}</span>
      </div>

      <div className="fg-stripe">
        {tactics.map(function (t) {
          return <div key={t.id} className="fg-stripe-seg" style={{background: t.color}} />;
        })}
      </div>

      <div className="cs-api-ref">
        <button className="cs-api-toggle" type="button" onClick={function () { setShowApi(!showApi); }}>
          {showApi ? '- ' : '+ '}API Reference
        </button>
        {showApi && (
          <div className="cs-api-body">
            <p>Query the FORGE framework programmatically. All endpoints return JSON with CORS enabled.</p>
            <div className="cs-code-wrap">
              <pre>{API_REF}</pre>
              <ForgeCopyButton text={API_REF} />
            </div>
          </div>
        )}
      </div>

      <div className="fg-toolbar">
        <div className="fg-search-wrap">
          <span className="fg-search-prompt">$</span>
          <input
            className="fg-search"
            ref={searchRef}
            placeholder="search methods, ids, tags... ( / )"
            value={search}
            onChange={function (e) { setSearch(e.target.value); }}
          />
        </div>
        <div className="fg-tactic-pills">
          <button
            className={'fg-tactic-pill' + (selectedTactic === null ? ' active' : '')}
            type="button"
            onClick={function () { selectTactic(null); }}
          >all</button>
          {tactics.map(function (t) {
            return (
              <button
                key={t.id}
                className={'fg-tactic-pill' + (selectedTactic === t.id ? ' active' : '')}
                type="button"
                onClick={function () { selectTactic(t.id); }}
              >
                <span className="fg-pill-dot" style={{background: t.color}}></span>
                {t.name}
              </button>
            );
          })}
        </div>
        <div className="fg-layout-btns">
          <button
            className={'fg-layout-btn' + (layout === 'side' ? ' active' : '')}
            type="button"
            onClick={function () { changeLayout('side'); }}
          >side</button>
          <button
            className={'fg-layout-btn' + (layout === 'flat' ? ' active' : '')}
            type="button"
            onClick={function () { changeLayout('flat'); }}
          >flat</button>
        </div>
      </div>

      <div className={'fg-matrix' + (layout === 'flat' ? ' fg-matrix--flat' : '')}>
        {visibleTactics.map(function (tac) {
          var tacTechs = techniques.filter(function (t) {
            return t.tactic_id === tac.id && isTechniqueVisible(t);
          });
          return (
            <div key={tac.id} className="fg-col" style={{'--pc': tac.color}}>
              <div className="fg-col-head" onClick={function () { navigate('forge?tactic=' + tac.id); }}>
                <div className="fg-col-id">{tac.id}</div>
                <div className="fg-col-name">{tac.name}</div>
                <div className="fg-col-count">{tac.count} methods</div>
              </div>
              <div className="fg-col-techniques">
                {tacTechs.map(function (t) {
                  var expanded = !!expandedSubs[t.id];
                  return (
                    <div key={t.id} className="fg-cell" style={{'--pc': tac.color}}>
                      <div className="fg-cell-top" onClick={function () { navigate('forge/technique/' + t.id); }}>
                        <span className="fg-cell-id">{t.id}</span>
                        <span className="fg-cell-name">{t.name}</span>
                      </div>
                      {t.subs && t.subs.length > 0 && (
                        <div className="fg-cell-bottom">
                          <button className="fg-cell-sub-badge" type="button" onClick={function (e) { e.stopPropagation(); toggleSub(t.id); }}>
                            {t.subs.length}
                          </button>
                        </div>
                      )}
                      {expanded && t.subs && (
                        <div className="fg-cell-subs">
                          {t.subs.map(function (sm) {
                            return (
                              <div key={sm.id} className="fg-cell-sub" onClick={function () { navigate('forge/technique/' + t.id); }}>
                                <span className="fg-cell-sub-id">{sm.id}</span> {sm.name}
                              </div>
                            );
                          })}
                        </div>
                      )}
                    </div>
                  );
                })}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

/* ───────────────────── Main Forge Component ───────────────────── */

function Forge(props) {
  var navigate = props.navigate;
  var subRoute = props.subRoute;
  var initialTactic = props.initialTactic;

  if (subRoute && subRoute.indexOf('technique/') === 0) {
    var techId = subRoute.replace('technique/', '');
    return React.createElement(ForgeTechniqueDetail, { id: techId, navigate: navigate });
  }

  if (subRoute === 'about') {
    return React.createElement(ForgeAbout, { navigate: navigate });
  }

  if (subRoute === 'getting-started') {
    return React.createElement(ForgeGettingStarted, { navigate: navigate });
  }

  if (subRoute === 'terms') {
    return React.createElement(ForgeTerms, { navigate: navigate });
  }

  return React.createElement(ForgeMatrix, { navigate: navigate, initialTactic: initialTactic });
}

window.Forge = Forge;
