page: playbook.html
title: SaaS Operating System — Playbook
description: >
  Product-level pillar overview dashboard for the Founder's Technical Playbook.
  Allows switching between products, viewing pillar completion status, and
  navigating to pillar detail, pre-launch checklist, and living document pages.

navigation:
  parent: index.html
  children:
    - path: playbook-pillar.html
      params: [product_id, pillar]
      description: Pillar detail and document editing
    - path: playbook-checklist.html
      params: [product_id]
      description: Pre-launch readiness checklist
    - path: playbook-document.html
      params: []
      description: Living document / full framework reference

api_endpoints:
  - method: GET
    path: /api/playbook/products
    description: Returns all products (active and archived)
    response_shape:
      - id: integer
        product_name: string
        status: "active | archived"

  - method: POST
    path: /api/playbook/products
    description: Creates a new product with default pillars
    request_body:
      product_name: string (required)
      product_description: string (optional)

  - method: GET
    path: /api/playbook/products/{productId}/pillars
    description: Returns all pillars for a product with completion stats
    response_shape:
      - pillar_number: integer
        pillar_name: string
        status: "not_started | in_progress | complete"
        notes: string
        total_docs: integer
        complete_docs: integer
        updated_at: ISO8601 string

ui_components:
  product_selector:
    type: dropdown (select)
    id: product-select
    behavior: triggers loadPillars() on change

  progress_summary:
    id: progress-summary
    description: Aggregate stats bar shown after pillars load
    fields:
      - id: sum-pct
        shows: overall completion percentage
      - id: sum-bar
        shows: gradient fill bar
      - id: sum-complete
        shows: count of complete pillars
      - id: sum-progress
        shows: count of in-progress pillars
      - id: sum-notstarted
        shows: count of not-started pillars

  pillars_grid:
    id: pillars-grid
    layout: CSS grid, auto-fill, minmax 320px
    card_states:
      complete: green left border (#00D9A3)
      in_progress: amber left border (#FFB84D)
      not_started: grey left border (#2A3441)
    card_contents:
      - pillar number (Pillar N)
      - pillar name
      - status badge
      - document progress bar (complete_docs / total_docs)
      - notes preview (truncated at 100 chars)

  add_product_modal:
    trigger: "+ Add Product" button
    fields:
      - id: new-name
        label: Product Name
        required: true
      - id: new-desc
        label: Description
        required: false

toolbar_actions:
  - label: Pre-Launch Checklist →
    id: checklist-link
    type: link
    target: playbook-checklist.html?product_id={currentProductId}
  - label: Living Document
    type: link
    target: playbook-document.html
  - label: + Add Product
    type: button
    action: openAddModal()
  - label: Page Context (YAML)
    type: link
    target: playbook-context.yaml

color_tokens:
  blue: "#4A8CFF / #1E5EFF"
  emerald: "#00D9A3"
  amber: "#FFB84D"
  coral: "#FF6B6B"
  background: "#0B0E13"
  surface: "#151921"
  surface_raised: "#1D2330"
  border: "#2A3441"
  text_primary: "#F1F5F9"
  text_muted: "#94A3B8"
  text_dim: "#64748B"

js_state:
  API: "/api"
  currentProductId: "integer, set on each loadPillars() call"

related_pages:
  - playbook-pillar.html
  - playbook-checklist.html
  - playbook-document.html
  - index.html
