{ "phase_id": "phase-02", "category_id": "architecture_engineering_core", "doc_id": "panel_component_contract", "source_path": "/home/yeff/public_html/devon/panel/data/panel_component_contract.json", "documentation_branch_status": "CUSTOM_BRANCH", "bucket_statuses_from_docs_index": { "Prerequisites": "ACTIVE", "Installation": "ACTIVE", "Configuration": "ACTIVE", "Validation": "ACTIVE", "Observable Evidence": "ACTIVE", "Failure Modes & Recovery": "ACTIVE", "Completion & Promotion": "ACTIVE" }, "exported_at": "2026-04-28T05:56:48.644291+00:00", "export_rule": "docs/json export generated from real panel/data source plus docs/index.php branch evidence; no authored content invented by export patch", "source_payload": { "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" ] } } } }