{
  "canon_meta": {
    "canon_id": "devon-panel-component-contract",
    "version": "1.0.0",
    "status": "ACTIVE",
    "contract_mode": "component_level_ui_governance"
  },
  "component_contract": {
    "objective": "Define the canonical visual and behavioral contract for every major UI component of the Devon Operator Panel, ensuring implementation consistency, evidence-driven rendering and deployment-order-first navigation.\n",
    "global_rules": [
      "component_names_are_canonical",
      "no_fake_status_rendering",
      "no_mock_progress",
      "all_status_badges_must_bind_to_evidence",
      "all_navigation_must_follow_deployment_order",
      "all drawers must be context-aware",
      "every component must expose loading_empty_error_ready states",
      "every component must support project_scope and server_scope context",
      "every component must be readable in desktop first, then tablet/mobile",
      "no technology-first labeling in primary navigation"
    ],
    "components": [
      {
        "component_id": "topbar_shell",
        "display_name": "Topbar Shell",
        "role": "global context and fast actions",
        "placement": "topbar",
        "required_props": [
          "current_project",
          "current_server",
          "current_stage",
          "global_status_counters",
          "search_query"
        ],
        "required_slots": [
          "left_cluster",
          "center_cluster",
          "right_cluster"
        ],
        "required_actions": [
          "project_select",
          "server_select",
          "stage_select",
          "search_submit",
          "quick_action_trigger"
        ],
        "states": [
          "loading",
          "ready",
          "empty",
          "error"
        ]
      },
      {
        "component_id": "deployment_stage_tree",
        "display_name": "Deployment Stage Tree",
        "role": "primary left navigation",
        "placement": "left_sidebar",
        "required_props": [
          "ordered_stage_groups",
          "selected_stage",
          "stage_status_counts"
        ],
        "required_render_fields": [
          "deployment_order",
          "stage_label",
          "pass_count",
          "fail_count",
          "missing_count"
        ],
        "required_actions": [
          "select_stage",
          "expand_stage",
          "collapse_stage"
        ],
        "states": [
          "loading",
          "ready",
          "empty",
          "error"
        ]
      },
      {
        "component_id": "content_index_links",
        "display_name": "Content Index Links",
        "role": "section/card shortcuts",
        "placement": "left_sidebar",
        "required_props": [
          "content_index_items",
          "selected_section",
          "selected_card"
        ],
        "required_render_fields": [
          "nav_id",
          "label",
          "target_section",
          "primary_card_ids"
        ],
        "required_actions": [
          "jump_to_section",
          "jump_to_card"
        ],
        "states": [
          "loading",
          "ready",
          "empty",
          "error"
        ]
      },
      {
        "component_id": "status_counter_strip",
        "display_name": "Status Counter Strip",
        "role": "global PASS FAIL MISSING visibility",
        "placement": "topbar",
        "required_props": [
          "total_items",
          "pass_count",
          "fail_count",
          "missing_count",
          "by_stage_counts"
        ],
        "required_render_fields": [
          "total_items",
          "pass_count",
          "fail_count",
          "missing_count"
        ],
        "required_actions": [
          "filter_pass",
          "filter_fail",
          "filter_missing"
        ],
        "states": [
          "loading",
          "ready",
          "empty",
          "error"
        ]
      },
      {
        "component_id": "card_grid",
        "display_name": "Card Grid",
        "role": "render cards by selected stage/section",
        "placement": "center_workspace",
        "required_props": [
          "selected_stage",
          "selected_section",
          "card_rows"
        ],
        "required_render_fields": [
          "card_id",
          "display_name",
          "subcategory",
          "objective",
          "status",
          "dependency_count",
          "evidence_count"
        ],
        "required_actions": [
          "open_card",
          "open_contract",
          "open_evidence",
          "open_dependencies",
          "open_timeline"
        ],
        "states": [
          "loading",
          "ready",
          "empty",
          "error"
        ]
      },
      {
        "component_id": "workspace_tabs",
        "display_name": "Workspace Tabs",
        "role": "center view switching",
        "placement": "center_workspace",
        "required_props": [
          "available_tabs",
          "active_tab",
          "selected_context"
        ],
        "required_render_fields": [
          "tab_id",
          "label"
        ],
        "required_actions": [
          "switch_tab"
        ],
        "states": [
          "loading",
          "ready",
          "empty",
          "error"
        ]
      },
      {
        "component_id": "workspace_header",
        "display_name": "Workspace Header",
        "role": "selected context summary",
        "placement": "center_workspace",
        "required_props": [
          "current_section_title",
          "current_card_title",
          "current_subcategory_title",
          "current_status_badge",
          "breadcrumb"
        ],
        "required_render_fields": [
          "current_section_title",
          "current_card_title",
          "current_subcategory_title",
          "current_status_badge",
          "breadcrumb"
        ],
        "required_actions": [
          "breadcrumb_jump",
          "status_badge_click"
        ],
        "states": [
          "loading",
          "ready",
          "empty",
          "error"
        ]
      },
      {
        "component_id": "preview_panel",
        "display_name": "Preview Panel",
        "role": "default primary visual output",
        "placement": "center_workspace",
        "required_props": [
          "selected_context",
          "selected_matrix_row"
        ],
        "required_render_fields": [
          "display_name",
          "objective",
          "status",
          "summary"
        ],
        "required_actions": [
          "expand_preview",
          "open_artifact"
        ],
        "states": [
          "loading",
          "ready",
          "empty",
          "error"
        ]
      },
      {
        "component_id": "artifact_panel",
        "display_name": "Artifact Panel",
        "role": "artifact visualization",
        "placement": "center_workspace",
        "required_props": [
          "artifact_ref",
          "artifact_type",
          "artifact_content"
        ],
        "required_render_fields": [
          "artifact_ref",
          "artifact_type"
        ],
        "required_actions": [
          "copy_artifact",
          "open_diff"
        ],
        "states": [
          "loading",
          "ready",
          "empty",
          "error"
        ]
      },
      {
        "component_id": "contract_panel",
        "display_name": "Contract Panel",
        "role": "show canonical contract blocks",
        "placement": "center_workspace",
        "required_props": [
          "contract_ref",
          "contract_blocks"
        ],
        "required_render_fields": [
          "required_blocks",
          "identity",
          "interfaces",
          "dependencies",
          "configuration_contract",
          "operational_contract",
          "evidence_contract",
          "validation_pipeline",
          "status_rules"
        ],
        "required_actions": [
          "expand_block",
          "collapse_block",
          "copy_contract_ref"
        ],
        "states": [
          "loading",
          "ready",
          "empty",
          "error"
        ]
      },
      {
        "component_id": "diff_panel",
        "display_name": "Diff Panel",
        "role": "change inspection",
        "placement": "center_workspace",
        "required_props": [
          "diff_content",
          "diff_source",
          "diff_target"
        ],
        "required_render_fields": [
          "diff_source",
          "diff_target"
        ],
        "required_actions": [
          "expand_diff",
          "copy_diff"
        ],
        "states": [
          "loading",
          "ready",
          "empty",
          "error"
        ]
      },
      {
        "component_id": "logs_panel",
        "display_name": "Logs Panel",
        "role": "runtime and validation logs",
        "placement": "center_workspace",
        "required_props": [
          "log_entries",
          "log_scope"
        ],
        "required_render_fields": [
          "timestamp",
          "source",
          "level",
          "message"
        ],
        "required_actions": [
          "filter_logs",
          "expand_log"
        ],
        "states": [
          "loading",
          "ready",
          "empty",
          "error"
        ]
      },
      {
        "component_id": "metrics_panel",
        "display_name": "Metrics Panel",
        "role": "runtime metrics and counters",
        "placement": "center_workspace",
        "required_props": [
          "metric_series",
          "metric_scope"
        ],
        "required_render_fields": [
          "metric_name",
          "metric_value",
          "metric_unit"
        ],
        "required_actions": [
          "filter_metrics",
          "expand_metric"
        ],
        "states": [
          "loading",
          "ready",
          "empty",
          "error"
        ]
      },
      {
        "component_id": "timeline_panel",
        "display_name": "Timeline Panel",
        "role": "validation promotion rollback sequence",
        "placement": "center_workspace",
        "required_props": [
          "timeline_events",
          "timeline_scope"
        ],
        "required_render_fields": [
          "timestamp",
          "event_type",
          "event_status",
          "event_summary"
        ],
        "required_actions": [
          "expand_event",
          "filter_timeline"
        ],
        "states": [
          "loading",
          "ready",
          "empty",
          "error"
        ]
      },
      {
        "component_id": "evidence_drawer",
        "display_name": "Evidence Drawer",
        "role": "primary right-side evidence context",
        "placement": "right_stack",
        "required_props": [
          "evidence_expected",
          "evidence_found",
          "checks",
          "current_status",
          "last_validation"
        ],
        "required_render_fields": [
          "evidence_expected",
          "checks",
          "current_status",
          "last_validation"
        ],
        "required_actions": [
          "expand_evidence",
          "open_check_details",
          "filter_same_status"
        ],
        "states": [
          "loading",
          "ready",
          "empty",
          "error"
        ]
      },
      {
        "component_id": "contract_drawer",
        "display_name": "Contract Drawer",
        "role": "quick contract summary",
        "placement": "right_stack",
        "required_props": [
          "contract_ref",
          "required_blocks",
          "configuration_contract",
          "operational_contract"
        ],
        "required_render_fields": [
          "contract_ref",
          "required_blocks"
        ],
        "required_actions": [
          "open_full_contract",
          "copy_contract_ref"
        ],
        "states": [
          "loading",
          "ready",
          "empty",
          "error"
        ]
      },
      {
        "component_id": "dependency_drawer",
        "display_name": "Dependency Drawer",
        "role": "show blockers and hard dependencies",
        "placement": "right_stack",
        "required_props": [
          "hard_dependencies",
          "blockers",
          "upstream",
          "downstream"
        ],
        "required_render_fields": [
          "hard_dependencies",
          "blockers"
        ],
        "required_actions": [
          "open_dependency_node",
          "filter_blocked_items"
        ],
        "states": [
          "loading",
          "ready",
          "empty",
          "error"
        ]
      },
      {
        "component_id": "memory_scope_drawer",
        "display_name": "Memory Scope Drawer",
        "role": "show memory routing context",
        "placement": "right_stack",
        "required_props": [
          "memory_partition_class",
          "routing_keys",
          "read_policy",
          "write_policy"
        ],
        "required_render_fields": [
          "memory_partition_class",
          "routing_keys",
          "read_policy",
          "write_policy"
        ],
        "required_actions": [
          "open_memory_contract",
          "inspect_routing_keys"
        ],
        "states": [
          "loading",
          "ready",
          "empty",
          "error"
        ]
      },
      {
        "component_id": "server_scope_drawer",
        "display_name": "Server Scope Drawer",
        "role": "show server execution context",
        "placement": "right_stack",
        "required_props": [
          "server_id",
          "role",
          "allowed_projects",
          "sandbox_capable",
          "promotion_capable"
        ],
        "required_render_fields": [
          "server_id",
          "role",
          "allowed_projects",
          "sandbox_capable",
          "promotion_capable"
        ],
        "required_actions": [
          "open_server_contract",
          "inspect_allowed_projects"
        ],
        "states": [
          "loading",
          "ready",
          "empty",
          "error"
        ]
      },
      {
        "component_id": "validation_drawer",
        "display_name": "Validation Drawer",
        "role": "show validation pipeline status",
        "placement": "right_stack",
        "required_props": [
          "pipeline_ref",
          "validation_steps",
          "current_validation_state"
        ],
        "required_render_fields": [
          "pipeline_ref",
          "validation_steps",
          "current_validation_state"
        ],
        "required_actions": [
          "open_pipeline",
          "inspect_step"
        ],
        "states": [
          "loading",
          "ready",
          "empty",
          "error"
        ]
      }
    ],
    "component_binding_rules": {
      "selected_stage_source": "11_panel_content_index.yaml",
      "selected_card_source": "02_panel_canonical_tree.yaml",
      "matrix_row_source": "08_canonical_matrix_v1.yaml",
      "contract_source": "03_card_contract_minimums.yaml",
      "memory_source": "04_memory_canonical_architecture.yaml",
      "server_source": "05_server_registry_canonical.yaml",
      "sandbox_source": "06_sandbox_environment_canonical.yaml",
      "pipeline_source": "07_subcategory_pipelines.yaml"
    },
    "required_ui_states": [
      "loading",
      "ready",
      "empty",
      "error"
    ],
    "responsive_policy": {
      "desktop": "three_column_workspace",
      "tablet": "overlay_side_panels",
      "mobile": "stacked_workspace_with_offcanvas_side_panels"
    },
    "implementation_gate": {
      "frontend_may_start_only_if": [
        "10_panel_data_contract.yaml exists",
        "11_panel_content_index.yaml exists",
        "12_panel_ui_blueprint.yaml exists",
        "13_panel_component_contract.yaml exists"
      ]
    }
  }
}