dev-loops 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (156) hide show
  1. package/.pi/dev-loop/defaults.yaml +477 -0
  2. package/AGENTS.md +25 -0
  3. package/CHANGELOG.md +18 -0
  4. package/LICENSE +21 -0
  5. package/README.md +178 -0
  6. package/agents/dev-loop.agent.md +82 -0
  7. package/agents/developer.agent.md +37 -0
  8. package/agents/docs.agent.md +33 -0
  9. package/agents/fixer.agent.md +53 -0
  10. package/agents/quality.agent.md +28 -0
  11. package/agents/refiner.agent.md +87 -0
  12. package/agents/review.agent.md +64 -0
  13. package/cli/index.mjs +424 -0
  14. package/extension/README.md +233 -0
  15. package/extension/checks.ts +94 -0
  16. package/extension/index.ts +131 -0
  17. package/extension/post-merge-update.ts +512 -0
  18. package/extension/presentation.ts +107 -0
  19. package/lib/dev-loops-core.mjs +284 -0
  20. package/package.json +103 -0
  21. package/scripts/README.md +1007 -0
  22. package/scripts/_cli-primitives.mjs +10 -0
  23. package/scripts/_core-helpers.mjs +30 -0
  24. package/scripts/docs/validate-links.mjs +567 -0
  25. package/scripts/docs/validate-no-duplicate-rules.mjs +250 -0
  26. package/scripts/github/_review-thread-mutations.mjs +214 -0
  27. package/scripts/github/capture-review-threads.mjs +180 -0
  28. package/scripts/github/create-draft-pr.mjs +108 -0
  29. package/scripts/github/detect-checkpoint-evidence.mjs +393 -0
  30. package/scripts/github/detect-linked-issue-pr.mjs +331 -0
  31. package/scripts/github/manage-sub-issues.mjs +394 -0
  32. package/scripts/github/probe-copilot-review.mjs +323 -0
  33. package/scripts/github/ready-for-review.mjs +93 -0
  34. package/scripts/github/reconcile-draft-gate.mjs +328 -0
  35. package/scripts/github/reply-resolve-review-thread.mjs +42 -0
  36. package/scripts/github/reply-resolve-review-threads.mjs +329 -0
  37. package/scripts/github/request-copilot-review.mjs +551 -0
  38. package/scripts/github/resolve-tracker-local-spec.mjs +205 -0
  39. package/scripts/github/stage-reviewer-draft.mjs +191 -0
  40. package/scripts/github/upsert-checkpoint-verdict.mjs +694 -0
  41. package/scripts/github/verify-fresh-review-context.mjs +125 -0
  42. package/scripts/github/write-gate-findings-log.mjs +212 -0
  43. package/scripts/loop/_checkpoint-io.mjs +55 -0
  44. package/scripts/loop/_checkpoint-paths.mjs +28 -0
  45. package/scripts/loop/_handoff-contract.mjs +230 -0
  46. package/scripts/loop/_inspect-run-viewer-adapter.mjs +345 -0
  47. package/scripts/loop/_loop-evidence.mjs +32 -0
  48. package/scripts/loop/_pr-runner-coordination.mjs +611 -0
  49. package/scripts/loop/_stale-runner-detection.mjs +145 -0
  50. package/scripts/loop/_steering-state-file.mjs +134 -0
  51. package/scripts/loop/build-handoff-envelope.mjs +181 -0
  52. package/scripts/loop/checkpoint-contract.mjs +49 -0
  53. package/scripts/loop/conductor-monitor.mjs +1850 -0
  54. package/scripts/loop/conductor.mjs +214 -0
  55. package/scripts/loop/copilot-pr-handoff.mjs +493 -0
  56. package/scripts/loop/debt-remediate.mjs +304 -0
  57. package/scripts/loop/detect-change-scope.mjs +102 -0
  58. package/scripts/loop/detect-copilot-loop-state.mjs +454 -0
  59. package/scripts/loop/detect-copilot-session-activity.mjs +186 -0
  60. package/scripts/loop/detect-initial-copilot-pr-state.mjs +318 -0
  61. package/scripts/loop/detect-internal-only-pr.mjs +270 -0
  62. package/scripts/loop/detect-issue-refinement-artifact.mjs +163 -0
  63. package/scripts/loop/detect-pr-gate-coordination-state.mjs +509 -0
  64. package/scripts/loop/detect-reviewer-loop-state.mjs +231 -0
  65. package/scripts/loop/detect-stale-runner.mjs +250 -0
  66. package/scripts/loop/detect-tracker-first-loop-state.mjs +76 -0
  67. package/scripts/loop/detect-tracker-pr-state.mjs +102 -0
  68. package/scripts/loop/info.mjs +267 -0
  69. package/scripts/loop/inspect-run-viewer/cli.mjs +117 -0
  70. package/scripts/loop/inspect-run-viewer/constants.mjs +80 -0
  71. package/scripts/loop/inspect-run-viewer/graph.mjs +757 -0
  72. package/scripts/loop/inspect-run-viewer/handoff-envelope-renderer.mjs +398 -0
  73. package/scripts/loop/inspect-run-viewer/inbox.mjs +308 -0
  74. package/scripts/loop/inspect-run-viewer/managed-instance.mjs +750 -0
  75. package/scripts/loop/inspect-run-viewer/rendering.mjs +411 -0
  76. package/scripts/loop/inspect-run-viewer/server.mjs +638 -0
  77. package/scripts/loop/inspect-run-viewer/shared.mjs +103 -0
  78. package/scripts/loop/inspect-run-viewer/status.mjs +715 -0
  79. package/scripts/loop/inspect-run-viewer-ci-changes.mjs +77 -0
  80. package/scripts/loop/inspect-run-viewer.mjs +82 -0
  81. package/scripts/loop/inspect-run.mjs +382 -0
  82. package/scripts/loop/outer-loop.mjs +419 -0
  83. package/scripts/loop/pr-runner-coordination.mjs +143 -0
  84. package/scripts/loop/pre-commit-branch-guard.mjs +68 -0
  85. package/scripts/loop/pre-flight-gate.mjs +236 -0
  86. package/scripts/loop/pre-pr-ready-gate.mjs +183 -0
  87. package/scripts/loop/pre-push-main-guard.mjs +103 -0
  88. package/scripts/loop/pre-write-remote-freshness-guard.mjs +32 -0
  89. package/scripts/loop/print-gates.mjs +42 -0
  90. package/scripts/loop/resolve-dev-loop-startup.mjs +533 -0
  91. package/scripts/loop/run-conductor-cycle.mjs +322 -0
  92. package/scripts/loop/run-queue.mjs +124 -0
  93. package/scripts/loop/run-refinement-audit.mjs +513 -0
  94. package/scripts/loop/run-watch-cycle.mjs +358 -0
  95. package/scripts/loop/steer-loop.mjs +841 -0
  96. package/scripts/loop/ui-designer-review-contract.mjs +76 -0
  97. package/scripts/loop/watch-initial-copilot-pr.mjs +253 -0
  98. package/scripts/projects/add-queue-item.mjs +528 -0
  99. package/scripts/projects/ensure-queue-board.mjs +837 -0
  100. package/scripts/projects/list-queue-items.mjs +489 -0
  101. package/scripts/projects/move-queue-item.mjs +549 -0
  102. package/scripts/projects/reorder-queue-item.mjs +518 -0
  103. package/scripts/refine/_refine-helpers.mjs +258 -0
  104. package/scripts/refine/prose-linkage-detector.mjs +92 -0
  105. package/scripts/refine/refinement-completeness-checker.mjs +88 -0
  106. package/scripts/refine/scope-boundary-cross-checker.mjs +163 -0
  107. package/scripts/refine/tree-integrity-validator.mjs +211 -0
  108. package/scripts/refine/verify.mjs +178 -0
  109. package/scripts/repo-wiki-local.mjs +156 -0
  110. package/scripts/repo-wiki.mjs +119 -0
  111. package/skills/copilot-pr-followup/SKILL.md +380 -0
  112. package/skills/dev-loop/SKILL.md +141 -0
  113. package/skills/dev-loop/scripts/dev-mode-context.mjs +152 -0
  114. package/skills/dev-loop/scripts/dev-mode-context.test.mjs +80 -0
  115. package/skills/dev-loop/scripts/init-phase.mjs +71 -0
  116. package/skills/dev-loop/scripts/log-bash-exit-1.mjs +25 -0
  117. package/skills/dev-loop/scripts/phase-files.mjs +29 -0
  118. package/skills/dev-loop/scripts/post-gate-verdict-fallback.mjs +480 -0
  119. package/skills/dev-loop/scripts/post-gate-verdict-fallback.test.mjs +732 -0
  120. package/skills/dev-loop/scripts/render-template.mjs +82 -0
  121. package/skills/dev-loop/scripts/render-template.test.mjs +63 -0
  122. package/skills/dev-loop/templates/bootstrap-agents.md +26 -0
  123. package/skills/dev-loop/templates/bootstrap-implementation-state.md +31 -0
  124. package/skills/dev-loop/templates/bootstrap-implementation-workflow.md +17 -0
  125. package/skills/dev-loop/templates/dev-mode-retrospective.md +15 -0
  126. package/skills/dev-loop/templates/dev-mode-review.md +17 -0
  127. package/skills/dev-loop/templates/dev-mode-skill-changes.md +11 -0
  128. package/skills/dev-loop/templates/merged-phase-plan.md +19 -0
  129. package/skills/dev-loop/templates/phase-doc.md +27 -0
  130. package/skills/dev-loop/templates/phase-summary.md +13 -0
  131. package/skills/dev-loop/templates/phase-variant.md +15 -0
  132. package/skills/dev-loop/templates/retrospective.md +11 -0
  133. package/skills/dev-loop/templates/review.md +32 -0
  134. package/skills/dev-loop/templates/ui-vision-review.md +55 -0
  135. package/skills/docs/acceptance-criteria-verification.md +21 -0
  136. package/skills/docs/anti-patterns.md +21 -0
  137. package/skills/docs/artifact-authority-contract.md +119 -0
  138. package/skills/docs/confirmation-rules.md +28 -0
  139. package/skills/docs/copilot-ci-status-contract.md +52 -0
  140. package/skills/docs/copilot-loop-operations.md +233 -0
  141. package/skills/docs/debt-remediation-contract.md +107 -0
  142. package/skills/docs/entrypoint-strategies.md +115 -0
  143. package/skills/docs/epic-tree-refinement-procedure.md +234 -0
  144. package/skills/docs/issue-intake-procedure.md +235 -0
  145. package/skills/docs/main-agent-contract.md +72 -0
  146. package/skills/docs/merge-preconditions.md +29 -0
  147. package/skills/docs/pr-lifecycle-contract.md +209 -0
  148. package/skills/docs/public-dev-loop-contract.md +497 -0
  149. package/skills/docs/retrospective-checkpoint-contract.md +159 -0
  150. package/skills/docs/stop-conditions.md +29 -0
  151. package/skills/docs/structural-quality.md +42 -0
  152. package/skills/docs/tracker-first-loop-state.md +281 -0
  153. package/skills/docs/validation-policy.md +27 -0
  154. package/skills/docs/workflow-handoff-contract.md +135 -0
  155. package/skills/final-approval/SKILL.md +19 -0
  156. package/skills/local-implementation/SKILL.md +640 -0
package/scripts/loop/inspect-run-viewer/rendering.mjs ADDED
@@ -0,0 +1,411 @@
1
+ import {
2
+ DEFAULT_INBOX_MODE,
3
+ DEFAULT_INBOX_PAGE,
4
+ DEFAULT_INBOX_PR_STATE,
5
+ DEFAULT_INBOX_UPDATED_WITHIN_DAYS,
6
+ } from "./constants.mjs";
7
+ import {
8
+ buildInspectionMermaidGraph,
9
+ loadMermaidBrowserScript,
10
+ renderMermaidBootScript,
11
+ renderStateVisualizationSection,
12
+ resetMermaidBrowserScriptCache,
13
+ } from "./graph.mjs";
14
+ import { renderInboxShellScript, renderInboxSidebar } from "./inbox.mjs";
15
+ import {
16
+ deriveInboxSignalFromSnapshot,
17
+ renderCopilotLayerSection,
18
+ renderCurrentStateBanner,
19
+ renderOuterLoopSummarySection,
20
+ renderOverviewSection,
21
+ renderReviewerLayerSection,
22
+ renderSteeringSummarySection,
23
+ } from "./status.mjs";
24
+ import {
25
+ escapeHtml,
26
+ normalizeInboxSignal,
27
+ renderSnapshotStateLabel,
28
+ renderTargetKey,
29
+ } from "./shared.mjs";
30
+ import { renderHandoffEnvelopeSection } from "./handoff-envelope-renderer.mjs";
31
+
32
+ export {
33
+ buildInspectionMermaidGraph,
34
+ deriveInboxSignalFromSnapshot,
35
+ loadMermaidBrowserScript,
36
+ normalizeInboxSignal,
37
+ renderTargetKey,
38
+ resetMermaidBrowserScriptCache,
39
+ };
40
+
41
+ export function renderInspectRunViewerHtml({
42
+ repo = null,
43
+ target = null,
44
+ snapshot = null,
45
+ handoffEnvelope = null,
46
+ error = null,
47
+ inboxItems = [],
48
+ selectedTitle = null,
49
+ scopeOptions = [],
50
+ inboxUpdatedWithinDays = DEFAULT_INBOX_UPDATED_WITHIN_DAYS,
51
+ inboxState = DEFAULT_INBOX_PR_STATE,
52
+ inboxMode = DEFAULT_INBOX_MODE,
53
+ inboxPage = DEFAULT_INBOX_PAGE,
54
+ inboxTotalPages = 1,
55
+ }) {
56
+ const normalizedSnapshot = snapshot ?? null;
57
+ const graph = target ? buildInspectionMermaidGraph(normalizedSnapshot) : null;
58
+ const stateLabel = renderSnapshotStateLabel(normalizedSnapshot);
59
+ const selectedInboxItem = target === null
60
+ ? null
61
+ : inboxItems.find((item) => renderTargetKey(item.target) === renderTargetKey(target)) ?? null;
62
+ const effectiveSelectedTitle = selectedTitle ?? selectedInboxItem?.title ?? null;
63
+ const scopeFilter = typeof repo === "string" && repo.length > 0 ? repo : null;
64
+ const scopeLabel = scopeFilter ?? "all repos";
65
+ const title = target
66
+ ? `${target.repo}#${target.pr} inspection snapshot`
67
+ : `${scopeLabel} PR inspection dashboard`;
68
+
69
+ return `<!doctype html>
70
+ <html lang="en">
71
+ <head>
72
+ <meta charset="utf-8" />
73
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
74
+ <title>${escapeHtml(title)}</title>
75
+ <style>
76
+ *, *::before, *::after { box-sizing: border-box; }
77
+ body { font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; margin: 1.25rem; max-width: none; line-height: 1.55; color: #20384f; background: #fff; }
78
+ code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; }
79
+ code { padding: 0.12rem 0.38rem; border-radius: 0.42rem; background: #f4f8fd; color: #20496f; font-size: 0.94em; line-height: 1.45; overflow-wrap: anywhere; }
80
+ pre { margin: 0; padding: 0.95rem 1rem; border: 1px solid #dbe6f3; border-radius: 0.85rem; background: #f8fbff; overflow: auto; line-height: 1.6; }
81
+ pre code { padding: 0; border-radius: 0; background: transparent; color: inherit; }
82
+ .inspection-shell { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.35rem; align-items: start; }
83
+ .assigned-pr-inbox { position: sticky; top: 1.25rem; width: 22rem; max-width: 100%; border: 1px solid #d9e5f2; border-radius: 0.8rem; padding: 0.9rem; background: #fbfdff; max-height: calc(100vh - 2.5rem); overflow: auto; box-sizing: border-box; box-shadow: 0 1px 2px rgba(35, 69, 102, 0.05); }
84
+ .assigned-pr-inbox[data-sidebar-collapsed="true"] { width: 2.35rem; overflow: hidden; padding: 0.28rem; border-color: transparent; background: transparent; box-shadow: none; }
85
+ .assigned-pr-inbox[data-sidebar-collapsed="true"] h2,
86
+ .assigned-pr-inbox[data-sidebar-collapsed="true"] .assigned-pr-controls,
87
+ .assigned-pr-inbox[data-sidebar-collapsed="true"] .assigned-pr-filter-note,
88
+ .assigned-pr-inbox[data-sidebar-collapsed="true"] .inbox-search-label,
89
+ .assigned-pr-inbox[data-sidebar-collapsed="true"] .inbox-search-input,
90
+ .assigned-pr-inbox[data-sidebar-collapsed="true"] .assigned-pr-list,
91
+ .assigned-pr-inbox[data-sidebar-collapsed="true"] .assigned-pr-empty,
92
+ .assigned-pr-inbox[data-sidebar-collapsed="true"] .assigned-pr-pagination { display: none; }
93
+ .assigned-pr-inbox-header { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.7rem; }
94
+ .assigned-pr-inbox-header h2 { margin: 0; font-size: 1rem; line-height: 1.3; flex: 1; }
95
+ .assigned-pr-controls { display: flex; flex-wrap: wrap; gap: 0.55rem 0.6rem; margin-bottom: 0.55rem; align-items: center; }
96
+ .assigned-pr-control-row { display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; }
97
+ .assigned-pr-scope-row { align-items: center; }
98
+ .assigned-pr-secondary-controls { flex: 999 1 18rem; flex-wrap: nowrap; }
99
+ .assigned-pr-filter-label { display: inline-block; min-width: 3.6rem; margin: 0; font-size: 0.74rem; font-weight: 700; color: #355061; text-transform: uppercase; letter-spacing: 0.03em; }
100
+ .assigned-pr-select { flex: 1; min-width: 0; max-width: 100%; border: 1px solid #bfd0e2; border-radius: 0.5rem; padding: 0.4rem 0.55rem; font: inherit; font-size: 0.83rem; line-height: 1.35; color: #355061; background: #fff; }
101
+ .assigned-pr-select-mid { flex: 0 1 auto; width: min(7.25rem, 100%); max-width: 7.25rem; min-width: 5.2rem; }
102
+ .assigned-pr-select-sm { flex: 0 1 auto; width: min(4.8rem, 100%); max-width: 4.8rem; min-width: 3.6rem; }
103
+ .assigned-pr-select-updated { margin-left: auto; }
104
+ .inbox-collapse-toggle { border: none; outline: none; box-shadow: none; appearance: none; -webkit-appearance: none; background: #355061; color: #fff; border-radius: 0.4rem; padding: 0.2rem 0.32rem; cursor: pointer; font-size: 1rem; line-height: 1; }
105
+ .inbox-search-label { display: block; font-size: 0.82rem; font-weight: 600; color: #355061; margin-bottom: 0.3rem; margin-top: 0.2rem; }
106
+ .inbox-search-input { width: 100%; border: 1px solid #bfd0e2; border-radius: 0.5rem; padding: 0.42rem 0.55rem; margin-bottom: 0.7rem; }
107
+ .assigned-pr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
108
+ .assigned-pr-row { border: 1px solid #d6e0ea; border-left: 0.32rem solid #8ca3b8; border-radius: 0.6rem; background: #fff; }
109
+ .assigned-pr-row.assigned-pr-row-attention { border-left-color: #c87400; }
110
+ .assigned-pr-row.assigned-pr-row-pending { border-left-color: #b88900; }
111
+ .assigned-pr-row.assigned-pr-row-gate { border-left-color: #6f42c1; }
112
+ .assigned-pr-row.assigned-pr-row-ready { border-left-color: #2e7d32; }
113
+ .assigned-pr-row.assigned-pr-row-closed { border-left-color: #7a8694; }
114
+ .assigned-pr-row.assigned-pr-row-unknown { border-left-color: #8ca3b8; }
115
+ .assigned-pr-row.assigned-pr-row-waiting { border-left-color: #1565c0; }
116
+ .assigned-pr-link { display: block; padding: 0.56rem 0.65rem; color: inherit; text-decoration: none; }
117
+ .assigned-pr-row.is-selected .assigned-pr-link { box-shadow: inset 0 0 0 1px #1565c0; border-radius: 0.3rem; }
118
+ .assigned-pr-title-line { display: flex; align-items: flex-start; gap: 0.5rem; }
119
+ .assigned-pr-id-col { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; min-width: 2.4rem; margin-right: 0.15rem; }
120
+ .assigned-pr-id { font-weight: 700; line-height: 1.2; }
121
+ .assigned-pr-signal-emoji { font-size: 0.65rem; line-height: 1.2; }
122
+ .assigned-pr-title { font-weight: 600; min-width: 0; flex: 1 1 auto; line-height: 1.45; }
123
+ .assigned-pr-line + .assigned-pr-line { margin-top: 0.28rem; }
124
+ .assigned-pr-meta { display: flex; flex-wrap: wrap; gap: 0.3rem 0.45rem; font-size: 0.78rem; line-height: 1.45; color: #486174; }
125
+ .assigned-pr-meta-primary { justify-content: space-between; align-items: baseline; gap: 0.5rem; }
126
+ .assigned-pr-meta-primary .assigned-pr-repo { text-align: left; min-width: 0; }
127
+ .assigned-pr-meta-primary .assigned-pr-updated { margin-left: auto; text-align: right; white-space: nowrap; }
128
+ .assigned-pr-pagination { display: flex; align-items: center; justify-content: center; gap: 0.6rem; margin-top: 0.75rem; }
129
+ .assigned-pr-page-link { color: #5b2ca0; text-decoration: none; font-weight: 700; }
130
+ .assigned-pr-page-link.is-disabled { color: #9aa9b8; pointer-events: none; }
131
+ .assigned-pr-page-status { font-weight: 700; color: #253b53; }
132
+ .inspection-main { min-width: 0; }
133
+ .current-pr-state-banner { position: relative; border: 1px solid #d7e3f4; border-radius: 1rem; background: linear-gradient(180deg, #ffffff 0%, #f6fbff 100%); box-shadow: 0 1px 2px rgba(35, 69, 102, 0.06); padding: 1.2rem 1.3rem 4.65rem; margin-top: 0; display: grid; gap: 0.9rem; }
134
+ .current-pr-state-heading-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.9rem; }
135
+ .current-pr-state-heading-copy { min-width: 0; display: grid; gap: 0.35rem; }
136
+ .current-pr-state-kicker { margin: 0; font-size: 0.82rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #486174; }
137
+ .current-pr-state-kicker a { color: #355061; text-decoration: none; }
138
+ .current-pr-state-kicker a:hover { text-decoration: underline; }
139
+ .current-pr-state-mode-indicator { flex: 0 0 auto; font-size: 1.75rem; line-height: 1; margin-top: 0.08rem; }
140
+ .current-pr-state-banner h1 { margin: 0; font-size: 2rem; line-height: 1.12; color: #18324a; overflow-wrap: anywhere; }
141
+ .current-pr-state-copy-flow { display: grid; gap: 0.7rem; min-width: 0; }
142
+ .current-pr-state-summary-headline { margin: 0; color: #1565c0; font-size: 1.08rem; line-height: 1.35; }
143
+ .current-pr-state-detail { margin: 0; color: #274766; font-size: 1rem; line-height: 1.6; max-width: 78ch; }
144
+ .current-pr-state-meta { margin: 0; color: #5a758b; font-size: 0.84rem; line-height: 1.5; }
145
+ .current-pr-state-note { margin: 0; color: #5a758b; font-size: 0.92rem; line-height: 1.55; max-width: 78ch; }
146
+ .current-pr-state-badge-row { margin-top: 0; }
147
+ .current-pr-state-controls { position: absolute; right: 1.3rem; bottom: 1.2rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.5rem 0.6rem; max-width: calc(100% - 2.6rem); }
148
+ .current-pr-state-auto-reload-label { display: inline-flex; align-items: center; gap: 0.32rem; margin: 0; font-size: 0.78rem; font-weight: 700; color: #486174; }
149
+ .current-pr-state-auto-reload-select { min-width: 7.4rem; border: 1px solid #bfd0e2; border-radius: 0.5rem; padding: 0.4rem 0.55rem; font: inherit; font-size: 0.83rem; line-height: 1.35; color: #355061; background: #fff; }
150
+ .current-pr-state-reload { flex: 0 0 auto; }
151
+ .current-pr-state-reload[hidden] { display: none; }
152
+ .viewer-badge-row { display: flex; flex-wrap: wrap; gap: 0.5rem 0.6rem; align-items: flex-start; }
153
+ .viewer-card-grid { display: grid; gap: 1.15rem; align-items: start; }
154
+ .viewer-card-grid-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
155
+ .viewer-card-grid-layers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
156
+ .viewer-tab-section { border: none; background: none; padding: 0; margin-top: 1.15rem; }
157
+ .viewer-tab-shell { position: sticky; top: 0.8rem; z-index: 4; border: 1px solid #d7e3f4; border-radius: 0.95rem; background: rgba(251, 253, 255, 0.96); backdrop-filter: blur(6px); padding: 0.4rem; margin-top: 1rem; box-shadow: 0 1px 2px rgba(35, 69, 102, 0.06); }
158
+ .viewer-tabs { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0; }
159
+ .viewer-tab { padding: 0.68rem 1rem; cursor: pointer; border: 1px solid transparent; border-radius: 0.7rem; background: transparent; font: inherit; font-weight: 700; line-height: 1.25; color: #486174; transition: color 0.15s, border-color 0.15s, background 0.15s, box-shadow 0.15s; }
160
+ .viewer-tab:hover { color: #1565c0; background: #f4f9ff; }
161
+ .viewer-tab.active { color: #1565c0; background: #fff; border-color: #c8d9ec; box-shadow: 0 1px 2px rgba(35, 69, 102, 0.08); }
162
+ .tab-content { display: none; }
163
+ .tab-content.active { display: block; }
164
+ .viewer-card { min-width: 0; }
165
+ .viewer-card-body,
166
+ .handoff-card-body,
167
+ .viewer-card-list-block,
168
+ .viewer-graph-header,
169
+ .handoff-hero-copy { display: grid; gap: 0.7rem; min-width: 0; }
170
+ .viewer-card-list-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.9rem; margin-top: 1rem; }
171
+ .viewer-card-list-block h4,
172
+ .viewer-card-subsection h4,
173
+ .viewer-graph-header h3 { margin: 0; font-size: 0.9rem; font-weight: 700; line-height: 1.35; color: #486174; }
174
+ .viewer-card-subsection { margin-top: 1.1rem; display: grid; gap: 0.55rem; }
175
+ .viewer-card-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
176
+ .viewer-card-list li { border: 1px solid #dbe6f3; border-radius: 0.65rem; background: #fbfdff; padding: 0.65rem 0.8rem; color: #23384d; line-height: 1.5; }
177
+ .viewer-card-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin-top: 1.1rem; }
178
+ .viewer-action-button { border: 1px solid #bfd0e2; border-radius: 0.55rem; background: #fff; color: #355061; padding: 0.5rem 0.78rem; font: inherit; font-weight: 700; line-height: 1.35; cursor: pointer; }
179
+ .viewer-action-button:hover { background: #f4f9ff; }
180
+ .viewer-inline-link { color: #2456a6; font-weight: 600; line-height: 1.4; text-decoration: none; }
181
+ .viewer-inline-link:hover { text-decoration: underline; }
182
+ .viewer-stat-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
183
+ .viewer-stat-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
184
+ .viewer-next-action { margin-bottom: 0; }
185
+ .viewer-graph-header { margin-bottom: 0; }
186
+ .viewer-graph-description { margin: 0.7rem 0 0 0; color: #6b8296; font-size: 0.82rem; line-height: 1.5; }
187
+ .state-graph-block { margin-top: 0.25rem; }
188
+ .state-graph-frame { margin-top: 0.75rem; min-width: 0; border: 1px solid #d7e3f4; border-radius: 0.85rem; background: linear-gradient(180deg, #fbfdff 0%, #f4f8fc 100%); overflow: hidden; }
189
+ .state-graph-toolbar { display: flex; align-items: center; gap: 0.55rem; padding: 0.75rem 0.85rem; border-bottom: 1px solid #d7e3f4; background: rgba(255,255,255,0.85); }
190
+ .state-graph-toolbar button { border: 1px solid #9fb6cb; background: #fff; border-radius: 0.45rem; padding: 0.38rem 0.72rem; font: inherit; font-weight: 600; line-height: 1.25; cursor: pointer; }
191
+ .state-graph-toolbar button:hover { background: #f3f8fd; }
192
+ .state-graph-zoom-value { margin-left: auto; font-size: 0.92rem; line-height: 1.4; color: #486174; }
193
+ .viewer-graph-body,
194
+ .state-graph-block { min-width: 0; }
195
+ .mermaid-state-graph { min-height: 21rem; min-width: 0; max-width: 100%; padding: 1rem; overflow: auto; cursor: grab; user-select: none; touch-action: none; }
196
+ .mermaid-state-graph[data-dragging="true"] { cursor: grabbing; }
197
+ .mermaid-state-graph[data-rendered="pending"] { color: #5a7184; opacity: 0; pointer-events: none; }
198
+ .mermaid-state-graph[data-rendered="settling"] { opacity: 0; pointer-events: none; }
199
+ .mermaid-state-graph svg { display: block; width: 100%; height: auto; transition: width 120ms ease; }
200
+ .state-graph-cues { display: flex; flex-wrap: wrap; gap: 0.55rem 0.85rem; margin: 1rem 0 0.2rem 0; }
201
+ .state-graph-cue { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.9rem; line-height: 1.45; color: #355061; }
202
+ .state-graph-cue-chip { display: inline-flex; align-items: center; justify-content: center; min-width: 2.5rem; padding: 0.22rem 0.58rem; border-radius: 999px; border: 1px solid #90a4ae; background: #fff; font-weight: 700; line-height: 1.2; }
203
+ .state-graph-cue-chip-start { border-color: #78909c; background: #f5f7f9; }
204
+ .state-graph-cue-chip-current { border-color: #1565c0; background: #e3f2fd; }
205
+ .state-graph-cue-chip-next { border-color: #5c6bc0; background: #f3f4ff; }
206
+ .state-graph-cue-chip-end { border-color: #2e7d32; background: #e8f5e9; }
207
+ .state-graph-cue-chip-loop { border-color: #ef6c00; background: #fff3e0; }
208
+ .state-graph-details { margin-top: 0.9rem; }
209
+ .state-graph-details summary { cursor: pointer; font-weight: 600; line-height: 1.4; color: #355061; }
210
+ .state-graph-help { margin: 0.85rem 0 1rem 1.2rem; padding: 0; line-height: 1.55; color: #425d70; }
211
+ .state-graph-help li + li { margin-top: 0.4rem; }
212
+ .state-graph-render-error { margin: 0; padding: 1rem; line-height: 1.55; color: #7f4b00; }
213
+ .state-graph-summaries { margin: 1rem 0 0 0; padding-left: 1.2rem; line-height: 1.55; }
214
+ .state-graph-summary + .state-graph-summary { margin-top: 0.45rem; }
215
+ dl { display: grid; grid-template-columns: 14rem 1fr; gap: 0.5rem 0.95rem; }
216
+ dt { font-weight: 600; line-height: 1.4; }
217
+ dd { margin: 0; line-height: 1.55; overflow-wrap: anywhere; }
218
+ section { border: 1px solid #ddd; border-radius: 0.5rem; padding: 0.9rem; margin-top: 1.1rem; }
219
+ .handoff-envelope-section { border-color: #d7e3f4; background: linear-gradient(180deg, #fbfdff 0%, #f7fbff 100%); padding: 1.05rem 1.15rem; }
220
+ .handoff-hero { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(18rem, 0.9fr); gap: 1.15rem; align-items: start; }
221
+ .handoff-hero h2 { margin: 0; font-size: 1.9rem; line-height: 1.14; overflow-wrap: anywhere; }
222
+ .handoff-card-kicker { margin: 0; font-size: 0.76rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #486174; }
223
+ .handoff-hero-meta { margin: 0; line-height: 1.55; color: #486174; }
224
+ .handoff-hero-badges { display: flex; flex-wrap: wrap; gap: 0.5rem 0.6rem; margin-top: 0; }
225
+ .handoff-layout { display: grid; grid-template-columns: minmax(17rem, 24rem) minmax(0, 1fr); gap: 1.15rem; margin-top: 1.15rem; align-items: start; }
226
+ .handoff-column { display: grid; gap: 1.15rem; align-content: start; }
227
+ .handoff-card { border: 1px solid #d7e3f4; border-radius: 0.85rem; background: #fff; box-shadow: 0 1px 2px rgba(35, 69, 102, 0.06); padding: 1.1rem 1.15rem; display: grid; gap: 0.75rem; align-content: start; }
228
+ .handoff-card h3 { margin: 0; font-size: 1.05rem; line-height: 1.3; color: #23384d; }
229
+ .handoff-card-tight { height: 100%; }
230
+ .handoff-card-emphasis { background: linear-gradient(180deg, #ffffff 0%, #f6faff 100%); }
231
+ .handoff-stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; }
232
+ .handoff-stat { border: 1px solid #dbe6f3; border-radius: 0.7rem; background: #fbfdff; padding: 0.8rem 0.9rem; }
233
+ .handoff-stat-label { display: block; font-size: 0.76rem; font-weight: 700; line-height: 1.35; color: #567086; margin-bottom: 0.35rem; }
234
+ .handoff-stat-value { display: block; color: #20384f; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
235
+ .handoff-empty-state { border: 1px dashed #b8c9db; border-radius: 0.85rem; background: #fff; padding: 1.35rem; display: grid; gap: 0.6rem; }
236
+ .handoff-empty-state h2 { margin: 0; line-height: 1.2; }
237
+ .handoff-empty-state p { margin: 0; line-height: 1.6; }
238
+ .handoff-kv { display: grid; grid-template-columns: minmax(9rem, 12rem) minmax(0, 1fr); gap: 0.8rem 1rem; margin: 0; }
239
+ .handoff-kv-compact { grid-template-columns: minmax(9rem, 15rem) minmax(0, 1fr); }
240
+ .handoff-kv-row { display: contents; }
241
+ .handoff-kv dt { font-size: 0.79rem; font-weight: 700; line-height: 1.4; color: #4c6478; word-break: break-word; }
242
+ .handoff-kv dd { margin: 0; min-width: 0; line-height: 1.55; color: #23384d; word-break: break-word; }
243
+ .handoff-badge { display: inline-flex; align-items: center; justify-content: center; padding: 0.28rem 0.7rem; border-radius: 999px; border: 1px solid #b8c9db; background: #f6f9fc; color: #355061; font-size: 0.84rem; font-weight: 700; line-height: 1.25; }
244
+ .handoff-badge-success { border-color: #9dd4a2; background: #edf8ee; color: #25632a; }
245
+ .handoff-badge-warning { border-color: #f2c37b; background: #fff4de; color: #915800; }
246
+ .handoff-badge-danger { border-color: #efb0b0; background: #fff0f0; color: #9f2c2c; }
247
+ .handoff-badge-info { border-color: #b5cdef; background: #edf4ff; color: #2456a6; }
248
+ .handoff-badge-muted { border-color: #d5dde7; background: #f5f7fa; color: #5e7283; }
249
+ .handoff-badge-neutral { border-color: #d5dde7; background: #f5f7fa; color: #5e7283; }
250
+ .handoff-next-action { font-size: 1rem; line-height: 1.6; color: #1f354b; padding: 1rem 1.05rem; border: 1px solid #dce8f5; border-radius: 0.8rem; background: linear-gradient(180deg, #fbfdff 0%, #f4f9ff 100%); }
251
+ .handoff-next-action p { margin: 0; }
252
+ .handoff-subsection + .handoff-subsection { margin-top: 1.1rem; }
253
+ .handoff-subgrid { display: grid; grid-template-columns: 1.6fr minmax(12rem, 0.9fr); gap: 1.05rem; align-items: start; }
254
+ .handoff-subsection { display: grid; gap: 0.55rem; }
255
+ .handoff-subsection h4 { margin: 0; font-size: 0.85rem; font-weight: 700; line-height: 1.35; color: #486174; }
256
+ .handoff-chip-list,
257
+ .handoff-read-list,
258
+ .handoff-criteria-list { margin: 0; padding: 0; list-style: none; }
259
+ .handoff-chip-list { display: flex; flex-wrap: wrap; gap: 0.55rem 0.6rem; align-items: flex-start; }
260
+ .handoff-chip-list li,
261
+ .handoff-read-list li { min-width: 0; }
262
+ .handoff-chip-list code,
263
+ .handoff-read-list code,
264
+ .handoff-kv code,
265
+ .viewer-card code,
266
+ .current-pr-state-banner code { overflow-wrap: anywhere; }
267
+ .handoff-read-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem; }
268
+ .handoff-read-list li { padding: 0.62rem 0.78rem; border: 1px solid #dbe6f3; border-radius: 0.65rem; background: #fbfdff; line-height: 1.5; }
269
+ .handoff-read-list code { color: #20496f; }
270
+ .handoff-criteria-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; }
271
+ .handoff-criteria-item { border: 1px solid #dbe6f3; border-left: 0.32rem solid #6d90c6; border-radius: 0.75rem; padding: 0.85rem; background: #fbfdff; }
272
+ .handoff-criteria-header { display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; margin-bottom: 0.55rem; }
273
+ .handoff-criteria-item p { margin: 0; line-height: 1.55; color: #304a62; }
274
+ .handoff-empty-copy,
275
+ .handoff-empty-value { color: #708497; }
276
+ .current-pr-state-banner section,
277
+ .current-pr-state-banner .state-graph-block,
278
+ .current-pr-state-banner .current-pr-state-visualization { border: none; padding: 0; margin-top: 0; }
279
+ @media (max-width: 1100px) {
280
+ .viewer-card-grid-overview,
281
+ .viewer-card-grid-layers,
282
+ .viewer-card-list-grid,
283
+ .viewer-stat-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
284
+ }
285
+ @media (max-width: 900px) {
286
+ body { margin: 1rem; }
287
+ .inspection-shell { grid-template-columns: minmax(0, 1fr); }
288
+ .assigned-pr-inbox { position: static; max-height: none; }
289
+ .handoff-hero,
290
+ .handoff-layout,
291
+ .handoff-subgrid,
292
+ .handoff-criteria-list,
293
+ .handoff-read-list,
294
+ .viewer-card-grid-overview,
295
+ .viewer-card-grid-layers,
296
+ .viewer-card-list-grid { grid-template-columns: 1fr; }
297
+ .handoff-stat-grid,
298
+ .viewer-stat-grid-2,
299
+ .viewer-stat-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
300
+ }
301
+ @media (max-width: 640px) {
302
+ body { margin: 0.75rem; }
303
+ section,
304
+ .handoff-envelope-section { padding: 0.9rem; }
305
+ .viewer-tab-shell { top: 0.5rem; }
306
+ .state-graph-toolbar { flex-wrap: wrap; }
307
+ .state-graph-zoom-value { margin-left: 0; }
308
+ .assigned-pr-secondary-controls { flex-wrap: wrap; }
309
+ .assigned-pr-select-mid,
310
+ .assigned-pr-select-sm,
311
+ .assigned-pr-select-updated { width: 100%; max-width: none; margin-left: 0; flex: 1 1 6rem; }
312
+ .current-pr-state-banner { padding-bottom: 0.9rem; }
313
+ .current-pr-state-controls { position: static; justify-content: flex-start; max-width: none; }
314
+ .current-pr-state-auto-reload-select { min-width: 0; flex: 1 1 8rem; }
315
+ .handoff-kv,
316
+ .handoff-kv-compact,
317
+ .handoff-stat-grid,
318
+ .viewer-stat-grid-2,
319
+ .viewer-stat-grid-3 { grid-template-columns: 1fr; }
320
+ .viewer-action-button,
321
+ .viewer-inline-link { width: 100%; }
322
+ }
323
+ </style>
324
+ </head>
325
+ <body>
326
+ <div class="inspection-shell">
327
+ ${renderInboxSidebar(inboxItems, target, { scopeFilter, scopeOptions, updatedWithinDays: inboxUpdatedWithinDays, state: inboxState, mode: inboxMode, page: inboxPage, totalPages: inboxTotalPages })}
328
+ <main class="inspection-main">
329
+ ${target === null
330
+ ? `<section class="current-pr-state-banner" aria-label="${escapeHtml(scopeLabel)} PR inspection dashboard">
331
+ <div class="current-pr-state-heading-row">
332
+ <div class="current-pr-state-heading-copy">
333
+ <p class="current-pr-state-kicker">Inspection dashboard</p>
334
+ <h1>${escapeHtml(scopeLabel)} PR inspection dashboard</h1>
335
+ </div>
336
+ </div>
337
+ <p class="current-pr-state-summary-headline"><strong>No PR selected</strong></p>
338
+ <p class="current-pr-state-detail">This local/operator dashboard is read-only. inspect-run remains authoritative for inspection/status state while this UI owns inbox discovery plus read-only presentation/prioritization.</p>
339
+ <p class="current-pr-state-note">No assigned PR in ${escapeHtml(scopeLabel)} matched the current view yet. Pick a PR from the sidebar, widen the state or updated filters, or move to another inbox page.</p>
340
+ </section>
341
+ <section class="viewer-tab-section" aria-label="Dashboard empty state">
342
+ <div class="handoff-empty-state">
343
+ <h2>Choose a PR from sidebar</h2>
344
+ <p>The dashboard can span all assigned repos or be narrowed to one repo. Sidebar defaults to open PRs from last 7 days and paginates through result set.</p>
345
+ </div>
346
+ </section>`
347
+ : `${renderCurrentStateBanner(normalizedSnapshot, target, stateLabel, effectiveSelectedTitle)}
348
+ <div class="viewer-tab-shell" role="tablist" aria-label="Inspect run viewer tabs">
349
+ <div class="viewer-tabs">
350
+ <button id="tab-btn-overview" class="viewer-tab active" role="tab" aria-selected="true" aria-controls="tab-overview" data-tab="overview" onclick="switchTab('overview')">Overview</button>
351
+ <button id="tab-btn-graph" class="viewer-tab" role="tab" aria-selected="false" aria-controls="tab-graph" data-tab="graph" onclick="switchTab('graph')">Graph</button>
352
+ <button id="tab-btn-layers" class="viewer-tab" role="tab" aria-selected="false" aria-controls="tab-layers" data-tab="layers" onclick="switchTab('layers')">Layers</button>
353
+ <button id="tab-btn-handoff" class="viewer-tab" role="tab" aria-selected="false" aria-controls="tab-handoff" data-tab="handoff" onclick="switchTab('handoff')">Agent handoff</button>
354
+ </div>
355
+ </div>
356
+ <div class="tab-content active" id="tab-overview" role="tabpanel" aria-labelledby="tab-btn-overview">
357
+ ${renderOverviewSection(normalizedSnapshot)}
358
+ </div>
359
+ <div class="tab-content" id="tab-graph" role="tabpanel" aria-labelledby="tab-btn-graph">
360
+ <section class="viewer-tab-section" aria-label="Graph">
361
+ <article class="handoff-card handoff-card-emphasis viewer-card">
362
+ <p class="handoff-card-kicker">Graph</p>
363
+ <div class="viewer-graph-header">
364
+ <h3>Full state machine graph</h3>
365
+ </div>
366
+ ${graph === null
367
+ ? `<p>${escapeHtml(error?.message ?? "Unable to load inspect-run snapshot.")}</p><p>Snapshot unavailable, so no state graph can be rendered yet. Use the Reload snapshot control to refresh.</p>`
368
+ : `<div class="viewer-graph-body">${renderStateVisualizationSection(normalizedSnapshot, graph)}</div>`}
369
+ <p class="viewer-graph-description">Use zoom controls, drag, and the graph guide below to inspect current and next-state cues.</p>
370
+ </article>
371
+ </section>
372
+ </div>
373
+ <div class="tab-content" id="tab-layers" role="tabpanel" aria-labelledby="tab-btn-layers">
374
+ <section class="viewer-tab-section" aria-label="Layers">
375
+ <div class="viewer-card-grid viewer-card-grid-layers">
376
+ ${renderOuterLoopSummarySection(normalizedSnapshot)}
377
+ ${renderCopilotLayerSection(normalizedSnapshot?.layers?.copilot, normalizedSnapshot)}
378
+ ${renderReviewerLayerSection(normalizedSnapshot?.layers?.reviewer)}
379
+ ${renderSteeringSummarySection(normalizedSnapshot?.layers?.steering)}
380
+ </div>
381
+ </section>
382
+ </div>
383
+ <div class="tab-content" id="tab-handoff" role="tabpanel" aria-labelledby="tab-btn-handoff">
384
+ ${renderHandoffEnvelopeSection(handoffEnvelope)}
385
+ </div>`}
386
+ </main>
387
+ </div>
388
+ ${renderInboxShellScript()}
389
+ <script>
390
+ function switchTab(tabName) {
391
+ document.querySelectorAll('.viewer-tab').forEach(t => {
392
+ t.classList.remove('active');
393
+ t.setAttribute('aria-selected', 'false');
394
+ });
395
+
396
+ document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
397
+ const activeTab = document.querySelector('.viewer-tab[data-tab="' + tabName + '"]');
398
+ if (!activeTab) { return; }
399
+ activeTab.classList.add('active');
400
+ activeTab.setAttribute('aria-selected', 'true');
401
+ const panel = document.getElementById('tab-' + tabName);
402
+ if (panel) {
403
+ panel.classList.add('active');
404
+ }
405
+ document.dispatchEvent(new CustomEvent('inspect-run-viewer:tabchange', { detail: { tabName } }));
406
+ }
407
+ </script>
408
+ ${graph === null ? "" : renderMermaidBootScript()}
409
+ </body>
410
+ </html>`;
411
+ }