rose-ash/sx/sx/plans/sx-web-platform.sx

;; 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 ~plans/sx-web-platform/plan-sx-web-platform-content ()
  (~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 :class "overflow-x-auto mt-4"
        (table :class "w-full text-sm text-left"
          (thead
            (tr :class "border-b border-stone-200"
              (th :class "py-2 px-3 font-semibold text-stone-700" "Layer")
              (th :class "py-2 px-3 font-semibold text-stone-700" "System")
              (th :class "py-2 px-3 font-semibold text-stone-700" "Role")))
          (tbody :class "text-stone-600"
            (tr :class "border-b border-stone-100"
              (td :class "py-2 px-3 font-semibold" "Author")
              (td :class "py-2 px-3" "Embedded editor + Claude Code")
              (td :class "py-2 px-3" "Write SX in the browser with AI assistance"))
            (tr :class "border-b border-stone-100"
              (td :class "py-2 px-3 font-semibold" "Stage")
              (td :class "py-2 px-3" "Content-addressed components")
              (td :class "py-2 px-3" "CID-identified artifacts, preview before publish"))
            (tr :class "border-b border-stone-100"
              (td :class "py-2 px-3 font-semibold" "Test")
              (td :class "py-2 px-3" "sx-ci")
              (td :class "py-2 px-3" "Run test suites against staged changes"))
            (tr :class "border-b border-stone-100"
              (td :class "py-2 px-3 font-semibold" "Publish")
              (td :class "py-2 px-3" "sx-activity")
              (td :class "py-2 px-3" "Federated distribution via ActivityPub"))
            (tr :class "border-b border-stone-100"
              (td :class "py-2 px-3 font-semibold" "Store")
              (td :class "py-2 px-3" "IPFS")
              (td :class "py-2 px-3" "Content-addressed storage, permanent availability"))
            (tr :class "border-b border-stone-100"
              (td :class "py-2 px-3 font-semibold" "Verify")
              (td :class "py-2 px-3" "Environment images")
              (td :class "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 :class "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 :class "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 :class "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 :class "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")))))