;; sx-web.org — Online Development Platform
;; Plan: transform sx-web.org from documentation site into a live development
;; environment where content is authored, tested, and deployed in the browser.

(defcomp ()
  (~docs/page :title "sx-web.org Development Platform"

    (~docs/section :title "Vision" :id "vision"
      (p "sx-web.org becomes the development environment for itself. "
         "Authors write essays, examples, components, and specs directly in the browser. "
         "Changes are planned, staged, tested, and deployed without leaving the site. "
         "The documentation is not about the platform — it " (em "is") " the platform.")
      (p "Every artifact is content-addressed on IPFS. Every change flows through sx-activity. "
         "Every deployment runs through sx-ci. Claude Code is embedded as the AI pair programmer. "
         "The entire development lifecycle happens over the web, using the same SX primitives "
         "that the platform is built from."))

    (~docs/section :title "Architecture" :id "architecture"
      (p "The platform composes existing SX subsystems into a unified workflow:")
      (div (~tw :tokens "overflow-x-auto mt-4")
        (table (~tw :tokens "w-full text-sm text-left")
          (thead
            (tr (~tw :tokens "border-b border-stone-200")
              (th (~tw :tokens "py-2 px-3 font-semibold text-stone-700") "Layer")
              (th (~tw :tokens "py-2 px-3 font-semibold text-stone-700") "System")
              (th (~tw :tokens "py-2 px-3 font-semibold text-stone-700") "Role")))
          (tbody (~tw :tokens "text-stone-600")
            (tr (~tw :tokens "border-b border-stone-100")
              (td (~tw :tokens "py-2 px-3 font-semibold") "Author")
              (td (~tw :tokens "py-2 px-3") "Embedded editor + Claude Code")
              (td (~tw :tokens "py-2 px-3") "Write SX in the browser with AI assistance"))
            (tr (~tw :tokens "border-b border-stone-100")
              (td (~tw :tokens "py-2 px-3 font-semibold") "Stage")
              (td (~tw :tokens "py-2 px-3") "Content-addressed components")
              (td (~tw :tokens "py-2 px-3") "CID-identified artifacts, preview before publish"))
            (tr (~tw :tokens "border-b border-stone-100")
              (td (~tw :tokens "py-2 px-3 font-semibold") "Test")
              (td (~tw :tokens "py-2 px-3") "sx-ci")
              (td (~tw :tokens "py-2 px-3") "Run test suites against staged changes"))
            (tr (~tw :tokens "border-b border-stone-100")
              (td (~tw :tokens "py-2 px-3 font-semibold") "Publish")
              (td (~tw :tokens "py-2 px-3") "sx-activity")
              (td (~tw :tokens "py-2 px-3") "Federated distribution via ActivityPub"))
            (tr (~tw :tokens "border-b border-stone-100")
              (td (~tw :tokens "py-2 px-3 font-semibold") "Store")
              (td (~tw :tokens "py-2 px-3") "IPFS")
              (td (~tw :tokens "py-2 px-3") "Content-addressed storage, permanent availability"))
            (tr (~tw :tokens "border-b border-stone-100")
              (td (~tw :tokens "py-2 px-3 font-semibold") "Verify")
              (td (~tw :tokens "py-2 px-3") "Environment images")
              (td (~tw :tokens "py-2 px-3") "Spec CID → image CID → endpoint provenance"))))))

    (~docs/section :title "Embedded Claude Code" :id "claude-code"
      (p "Claude Code sessions run inside the browser as reactive islands. "
         "The AI has access to the full SX component environment — it can read specs, "
         "write components, run tests, and propose changes. All within the user's security context.")
      (p "The session produces SX diffs — not text patches, but structural changes to the component tree. "
         "These diffs are first-class SX values that can be inspected, composed, reverted, and replayed.")
      (ul (~tw :tokens "space-y-2 text-stone-600 list-disc pl-5")
        (li "Read any component definition, spec file, or plan")
        (li "Write new components (essays, examples, specs)")
        (li "Modify existing components with structural diffs")
        (li "Run sx-ci test suites against proposed changes")
        (li "Stage changes as content-addressed preview")
        (li "Publish via sx-activity when approved")))

    (~docs/section :title "Workflow" :id "workflow"
      (p "A typical session — adding a new essay:")
      (ol (~tw :tokens "space-y-3 text-stone-600 list-decimal pl-5")
        (li (strong "Author: ") "Open Claude Code session on sx-web.org. "
            "Describe the essay topic. Claude writes the defcomp in SX.")
        (li (strong "Preview: ") "The component renders live in the browser. "
            "Author reviews, requests changes. Claude iterates.")
        (li (strong "Stage: ") "Component is serialized, CID computed, stored to IPFS. "
            "A preview URL is generated from the CID.")
        (li (strong "Test: ") "sx-ci runs: component renders without error, "
            "all referenced components exist, CSS classes are valid, links resolve.")
        (li (strong "Publish: ") "sx-activity broadcasts the new component. "
            "Federated subscribers receive it. The nav tree updates automatically.")
        (li (strong "Verify: ") "Anyone can follow the CID chain from the served page "
            "back to the spec that generated the evaluator that rendered it.")))

    (~docs/section :title "Content Types" :id "content-types"
      (p "Anything that can be a defcomp can be authored on the platform:")
      (ul (~tw :tokens "space-y-2 text-stone-600 list-disc pl-5")
        (li (strong "Essays") " — opinion pieces, rationales, explorations")
        (li (strong "Examples") " — interactive demos with live code")
        (li (strong "Specs") " — new spec modules authored and tested in-browser")
        (li (strong "Plans") " — architecture documents with embedded diagrams")
        (li (strong "Components") " — reusable UI components shared via IPFS")
        (li (strong "Tests") " — defsuite/deftest written and executed live")))

    (~docs/section :title "Prerequisites" :id "prerequisites"
      (p "Systems that must be complete before the platform can work:")
      (ul (~tw :tokens "space-y-2 text-stone-600 list-disc pl-5")
        (li (strong "Reactive islands (L2+)") " — for the editor and preview panes")
        (li (strong "Content-addressed components") " — CID computation and IPFS storage")
        (li (strong "sx-activity") " — federated publish/subscribe")
        (li (strong "sx-ci") " — test pipelines as SX components")
        (li (strong "Runtime slicing") " — L3 full eval in browser for live preview")
        (li (strong "Environment images") " — for provenance verification")
        (li (strong "Claude Code API integration") " — embedded sessions via API")))))
