/* Why — in-depth framework explanations.
 * Accordion-based reference page covering Pertel modes, Schedii modes,
 * Neurodivii lenses, and AkrosInfra characteristics.
 */

const { useState } = React;

function HostNavWhy() {
  return (
    <div className="topnav host-nav">
      <a href="pertel.html" style={{display:'flex', alignItems:'center'}}>
        <img src="assets/pertel-logo.png" alt="Pertel"
             style={{height: 24, width: 'auto', display: 'block'}} />
      </a>
      <div className="topnav-spacer" />
      <a href="pertel.html" className="topnav-btn">
        <span className="sig">[</span><span>Pertel</span>
      </a>
      <a href="index.html" className="topnav-btn">
        <span className="sig">$</span><span>Install</span>
      </a>
      <a href="theory.html" className="topnav-btn">
        <span className="sig">§</span><span>Theory</span>
      </a>
    </div>
  );
}

/* Accordion item — single component used everywhere */
function Acc({ id, cmd, name, tag, status, accent, lead, body, dl, openId, setOpenId }) {
  const open = openId === id;
  return (
    <div className="acc" data-open={open ? 'true' : 'false'} data-accent={accent}>
      <button className="acc-head" onClick={() => setOpenId(open ? null : id)}>
        <span className="acc-chev">
          <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <path d="M4 2l4 4-4 4" />
          </svg>
        </span>
        <span className="acc-cmd">{cmd}</span>
        <span className="acc-title">
          <span className="acc-name">{name}</span>
          {tag && <span className="acc-tag">{tag}</span>}
        </span>
        {status && (
          <span className="acc-status" style={{color: status.color}}>
            <span className="d" style={{background:status.color, boxShadow:`0 0 6px ${status.color}80`}} />
            {status.text}
          </span>
        )}
      </button>
      <div className="acc-body">
        <div>
          <div className="acc-content">
            {lead && <p className="acc-lead">{lead}</p>}
            {body && body.map((p, i) => <p key={i}>{p}</p>)}
            {dl && (
              <dl className="acc-dl">
                {dl.map((row, i) => (
                  <React.Fragment key={i}>
                    <dt>{row[0]}</dt>
                    <dd>{row[1]}</dd>
                  </React.Fragment>
                ))}
              </dl>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}

function WhyApp() {
  const [openId, setOpenId] = useState(null);
  const a = (id) => ({ id, openId, setOpenId });

  return (
    <div
      data-theme="light"
      data-palette="cyan"
      style={{
        minHeight: '100vh',
        background: 'var(--color-background)',
        color: 'var(--color-foreground)',
        position: 'relative',
        overflowX: 'hidden',
      }}
    >
      <div className="orb-bg"><span /></div>
      <div style={{position:'relative', zIndex: 1}}>
        <HostNavWhy />

        <div className="dirB">
          <div className="frame">

            {/* Hero */}
            <section className="hero-top">
              <div className="eyebrow">
                <span className="dot" />
                <span>in-depth · drop-downs</span>
              </div>
              <h1>Why <em>this.</em></h1>
              <p className="sub">
                The deep version of every mode, lens, and principle. Pertel,
                Schedii, the Neurodivii lenses, and the AkrosInfra characteristics
                that won't transplant.
              </p>
            </section>

            {/* Pertel — all modes */}
            <section className="why-section" style={{marginTop:24}}>
              <div className="why-section-h">
                <h2>Pertel — <em>all modes.</em></h2>
                <span className="sub">flags on @sch</span>
                <span className="right">@sch -d · @sch -f · @sch p</span>
              </div>

              <Acc {...a('p-dash')}
                cmd="@sch -d" name="Pertel Dash" tag="lite intelligence"
                status={{text:'ALPHA', color:'#06b6d4'}}
                lead={<>The <em>lite</em> Pertel. Memory, append-only markdown logs, doc handoff between sessions.</>}
                body={[
                  <>Pertel Dash keeps your conversation outside the model. Sessions live as markdown files in a local <code>.pertel/</code> folder. Every turn is appended, every fact you tag is pinned, and every handoff bundles facts + transcript for the next model.</>,
                  <>Use it when you don't need the workbench — just the conversation memory and the survival across model swaps.</>,
                ]}
                dl={[
                  ['command', <code>@sch -d</code>],
                  ['storage', <>local <code>.pertel/*.md</code></>],
                  ['tools', <><code>begin</code> · <code>remember</code> · <code>recall</code> · <code>handoff</code> · <code>tail</code> · <code>forget</code></>],
                  ['side effects', 'none (markdown only)'],
                  ['ask it', '"what did we say last time?" · "don\u2019t blow my context."'],
                ]}
              />

              <Acc {...a('p-sift')}
                cmd="@sch -f" name="Pertel Sift" tag="filter · AkrosInfra"
                status={{text:'ALPHA', color:'#fbbf24'}} accent="amber"
                lead={<>The <em>filter.</em> Sifts your work through the Schedii Bible + AkrosInfra frameworks.</>}
                body={[
                  <>Drop an idea, draft, plan, or code into <code>@sch -f</code>. The filter scores against the bible, returns reasons, and re-separates what survives. Not a guarantee — worth the pass.</>,
                  <>Sift runs in three lenses, plus full and custom. See the next section.</>,
                ]}
                dl={[
                  ['command', <code>@sch -f</code>],
                  ['lenses', 'mm · ndv · ndvr · full · custom'],
                  ['frameworks', 'Reminiscence Meter · Verify Before Done · Safe-Write · Stable-ID Worklist · Discipline-as-MCP'],
                  ['returns', 'kept · killed · re-separated · reasons attached'],
                  ['ask it', '"sift this against the bible." · "what would the framework kill?"'],
                ]}
              />

              <Acc {...a('p-full')}
                cmd="@sch p" name="Pertel" tag="full · all capability"
                status={{text:'ALPHA', color:'#06b6d4'}}
                lead={<>The <em>full</em> stack. Workbench + Dash + Sift + discovery, in one namespace.</>}
                body={[
                  <>When you want everything Pertel does in one mode. The serious mode. Has access to the Schedii workbench (brands, queue, drafts, publish), the Dash memory layer, the Sift filter, and discovery.</>,
                  <>Use when the work crosses surfaces — memory ↔ workbench ↔ filter in one session.</>,
                ]}
                dl={[
                  ['command', <code>@sch p</code>],
                  ['includes', '@sch (workbench) + -d + -f + discovery'],
                  ['storage', <>local <code>.pertel/</code> + schedii backend</>],
                  ['side effects', 'mutates — proposes first, confirm to apply'],
                  ['ask it', '"ship this." · "where are we?" · "remember + filter + post."'],
                ]}
              />
            </section>

            {/* Schedii — all modes */}
            <section className="why-section">
              <div className="why-section-h">
                <h2>Schedii — <em>all modes.</em></h2>
                <span className="sub">the base workbench</span>
                <span className="right">@sch (no flag)</span>
              </div>

              <Acc {...a('s-base')}
                cmd="@sch" name="Schedii base" tag="workbench"
                status={{text:'BETA', color:'#22d3ee'}}
                lead={<>The Schedii workbench, exposed as <em>MCP tools.</em></>}
                body={[
                  <>Without a flag, <code>@sch</code> is the workbench namespace. Every surface is callable: brands, posts, queue, integrations, drafts, scheduling, inbox, analytics.</>,
                  <>All mutations follow the propose-confirm pattern: the model proposes a payload, the engine returns a <code>confirmToken</code>, the user (or AI agent) confirms to apply.</>,
                ]}
                dl={[
                  ['command', <code>@sch</code>],
                  ['surfaces', 'brands · posts · queue · calendar · connections · drafts · inbox · analytics'],
                  ['tools', <>brand.list · queue.list · draft.create · publish · health · context_pack</>],
                  ['contract', 'workspace-scoped · dry-run by default · evidence returned'],
                  ['ask it', '"list_queue" · "draft a post for bluesky" · "publish at 18:42"'],
                ]}
              />

              <Acc {...a('s-resources')}
                cmd="schedii://" name="Resources" tag="readable surfaces"
                lead={<>Every Schedii surface gets a <em>stable URI.</em></>}
                body={[
                  <>The Chance Rate audit converts every Schedii page into an addressable resource: <code>schedii://surface/dashboard</code>, <code>schedii://surface/calendar</code>, <code>schedii://surface/connections</code>, and so on.</>,
                  <>Resources are read on demand by the model. They never mutate. They are the AI client's reference layer.</>,
                ]}
                dl={[
                  ['scheme', <code>schedii://surface/&lt;name&gt;</code>],
                  ['cacheable', 'yes'],
                  ['mutates', 'no'],
                  ['examples', <><code>schedii://surface/posts</code> · <code>schedii://surface/calendar</code></>],
                ]}
              />

              <Acc {...a('s-prompts')}
                cmd="prompts/" name="Prompts" tag="rituals you trigger by name"
                lead={<>Rituals exposed as <em>callable prompts.</em></>}
                body={[
                  <>The session ritual (begin, wrap, audit) becomes a named prompt the AI client lists in its prompt picker. Type <code>/begin</code>, the framework wording is delivered consistently every time.</>,
                  <>Replaces "paste this prompt into your AI" with "pick this prompt by name."</>,
                ]}
                dl={[
                  ['examples', <><code>schedii.begin_session</code> · <code>schedii.wrap_session</code> · <code>schedii.audit_drift</code></>],
                  ['triggered by', 'user (not the model)'],
                  ['format', 'structured prompt text + parameters'],
                ]}
              />
            </section>

            {/* Neurodivii lenses */}
            <section className="why-section">
              <div className="why-section-h">
                <h2>Neurodivii — <em>the lenses.</em></h2>
                <span className="sub">how Pertel F thinks</span>
                <span className="right">@sch -f · mm · ndv · ndvr</span>
              </div>

              <Acc {...a('l-mm')}
                cmd="@sch -f mm" name="MmM" tag="Metered Mind Map"
                accent="amber"
                lead={<>A <em>graph-based</em> filter. Concepts become nodes; relations become edges.</>}
                body={[
                  <>Salience is measured at each node. Edges carry weight. The filter walks the strongest paths and reports the weakest joints — the places the argument relies on something thin.</>,
                  <>Best when the work has structure (a plan, a model, a system) and you want to see where it bends.</>,
                ]}
                dl={[
                  ['shape', 'directed weighted graph'],
                  ['measures', 'node salience · edge strength · path coverage'],
                  ['reports', 'strongest path · weakest joint · orphan nodes'],
                  ['ask it', '"where does this plan rely on something thin?"'],
                ]}
              />

              <Acc {...a('l-ndv')}
                cmd="@sch -f ndv" name="Neurodivii" tag="neurodivergent lens"
                accent="amber"
                lead={<><em>Re-weights signal</em> so unusual angles survive the standard cut.</>}
                body={[
                  <>The canonical pass kills outliers by default — that's the whole point of a filter. Neurodivii re-weights so the "what if?" gets a second look before the filter decides.</>,
                  <>Best when conventional review is too quick to discard the unusual. The lens preserves angle without preserving noise.</>,
                ]}
                dl={[
                  ['re-weights', 'novelty · cross-domain · unusual structure'],
                  ['preserves', 'the angle, not the noise'],
                  ['runs after', 'standard pass (then re-evaluates the rejects)'],
                  ['ask it', '"what would a standard review have killed that\u2019s worth a second look?"'],
                ]}
              />

              <Acc {...a('l-ndvr')}
                cmd="@sch -f ndvr" name="Neurodivii + Reason" tag="ND lens · with reasoning trace"
                accent="amber"
                lead={<>Same lens, <em>plus the why.</em></>}
                body={[
                  <>Every keep, kill, and re-separation comes back with the reasoning attached. Auditable, traceable, defensible. The filter that explains itself.</>,
                  <>Use when the decision matters and someone needs to read the reasoning — pre-publish audits, post-mortem, anything you'd be asked to justify.</>,
                ]}
                dl={[
                  ['returns', 'verdict + reasoning trace per item'],
                  ['traceable', 'yes — full chain'],
                  ['auditable', 'yes — every step persisted'],
                  ['ask it', '"sift this and tell me why for each call."'],
                ]}
              />
            </section>

            {/* Uncopiable characteristics */}
            <section className="why-section">
              <div className="why-section-h">
                <h2>What <em>won't transplant.</em></h2>
                <span className="sub">AkrosInfra characteristics</span>
                <span className="right">the part that isn't features</span>
              </div>

              <Acc {...a('u-discipline')}
                cmd="§ 01" name="Discipline as MCP" tag="not a prompt library"
                lead={<>The methodology is the product. <em>The MCP is the interface.</em></>}
                body={[
                  <>Most "AI tools" are a wrapper around a prompt. AkrosInfra inverts that: the discipline is a set of named operators (Verify Before Done, Safe-Write, Stable-ID, Reminiscence Meter), and the MCP exposes each one as a Resource, Prompt, or Tool.</>,
                  <>Copy the prompts, miss the discipline. The thing that's hard isn't the wording — it's the rule set every action is checked against.</>,
                ]}
              />

              <Acc {...a('u-rocksand')}
                cmd="§ 02" name="Rock / Sand contract" tag="boundary as architecture"
                lead={<>Some rules <em>never bend.</em> Some preferences scale with context.</>}
                body={[
                  <>Rocks: backend is the boundary, workspaceId on every request, no direct DB access, no silent provider fallback, every mutation has a dry-run, every mutation returns evidence, errors surface loudly. These do not negotiate.</>,
                  <>Sand: local-first, installable later, HTTP transport later, hosted dashboard only if useful. These bend with the season.</>,
                  <>The thing that's uncopiable is knowing which is which without re-deciding every time.</>,
                ]}
              />

              <Acc {...a('u-memory')}
                cmd="§ 03" name="Memory pipeline" tag="conveyor with consolidation gates"
                lead={<>Memory is a <em>conveyor,</em> not a database row.</>}
                body={[
                  <>HOT (identity) · WARM (semantic) · COOL (consolidation staging) · COLD (episodic firehose). Promotion is a graph operation: visible, notification-firing, reversible.</>,
                  <>Reframing is non-destructive (REFRAME, BRIDGE, MERGE — never delete). Temporal validity (<code>validityStart</code> / <code>validityEnd</code>) means old facts get a successor edge, not erasure. Ebbinghaus decay with a retrieval boost.</>,
                  <>Five-axis salience: recency · frequency · emotion · novelty · alignment. The emotion axis is load-bearing.</>,
                ]}
              />

              <Acc {...a('u-verify')}
                cmd="§ 04" name="Verify Before Done" tag="evidence beats confidence"
                lead={<>Every "done" claim ships with <em>evidence.</em></>}
                body={[
                  <>Diff, log, test, response, screenshot, or inspection note. Confident language without evidence is a discipline violation.</>,
                  <>The AI proposes. The user disposes. The engine guards. None of those steps is optional — and none of them are vibes.</>,
                ]}
              />

              <Acc {...a('u-safewrite')}
                cmd="§ 05" name="Safe-Write Engine" tag="propose → preview → apply"
                lead={<>Files are <em>not memes.</em> Mutations route through a guarded engine.</>}
                body={[
                  <>Every tool that writes goes through Safe-Write. No tool calls <code>fs.writeFile</code> directly. Operation categories are explicit: create-new (free), modify (diff + confirm), overwrite (force + backup), delete (refused — use archive), destructive (refused — human-typed approval).</>,
                  <>Assume every write fires twice. Guards, idempotency, expected-state checks. Reversibility is the moat.</>,
                ]}
              />

              <Acc {...a('u-reminiscence')}
                cmd="§ 06" name="Reminiscence Meter" tag="originality is auditable"
                lead={<>Compatibility is allowed. Copying is not. <em>The meter knows the difference.</em></>}
                body={[
                  <>Every surface scores against its closest rival across six weighted axes: visual (30%) · layout (20%) · interaction (25%) · naming (10%) · motion (10%) · iconography (5%).</>,
                  <>Healthy band: 21–45%. Below: derivative. Above: gratuitously novel. The point isn't perfection — it's that originality is measurable and the rule is the same across surfaces.</>,
                ]}
              />

              <Acc {...a('u-stableid')}
                cmd="§ 07" name="Stable-ID Worklist" tag="append-only IDs"
                lead={<>Tasks have <em>permanent IDs.</em> The taxonomy is fixed.</>}
                body={[
                  <>T (task) · H (hypothesis) · S (surface) · U (user-story) · R (rock). IDs never get reassigned. The worklist is append-only.</>,
                  <>Reference T17 across docs, sessions, models — it always means the same thing. The cost of looking up a name is zero; the cost of getting one wrong is everything.</>,
                ]}
              />

              <Acc {...a('u-identity')}
                cmd="§ 08" name="Identity continuity" tag="three angles · seven files"
                lead={<>The state lives in files, <em>read first every session.</em></>}
                body={[
                  <>Seven canonical state files: <code>CLAUDE.md</code> · <code>NOW.md</code> · <code>ROADMAP.md</code> · <code>CHANGELOG.md</code> · <code>PLAN.md</code> · <code>MEMORY.md</code> · <code>.claude/commands/begin.md</code>. Not six, not eight. Adding an eighth because it "feels useful" creates drift.</>,
                  <>Three canonical angles per identity: Primary · Conversational · Environmental. New angles are sand; these three are rock.</>,
                ]}
              />

              <Acc {...a('u-output')}
                cmd="§ 09" name="Structured tool output" tag="never free-text-only"
                lead={<>Every tool returns the <em>same shape.</em></>}
                body={[
                  <>{`{ status, changed_files, proposed_files, evidence, warnings, next_actions }`}. The model sees the schema, the user sees the result, the next tool reads the output. Free-text-only output is rejected at the contract level.</>,
                  <>This is the part that lets multiple models pick the work up mid-session — because every prior step is parsed, not narrated.</>,
                ]}
              />
            </section>

            {/* Footer */}
            <div className="foot" style={{marginTop: 56}}>
              <span><b>mcp.schedii.app</b></span>
              <span>why · in-depth</span>
              <span>framework · <a href="docs/AkrosInfra_Unified_Framework.md" style={{color:'#06b6d4', textDecoration:'none'}}>AkrosInfra unified</a></span>
              <span className="right">snapshot · 2026-05-22</span>
              <span>akros · infra</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<WhyApp />);