diff options
Diffstat (limited to 'web/style.css')
| -rw-r--r-- | web/style.css | 365 |
1 files changed, 365 insertions, 0 deletions
diff --git a/web/style.css b/web/style.css index abbf3b9..b11faf6 100644 --- a/web/style.css +++ b/web/style.css @@ -1868,12 +1868,18 @@ dialog label select:focus { } .story-status-badge[data-status="PENDING"] { background: var(--state-pending); } +.story-status-badge[data-status="DISCOVERY"] { background: var(--state-pending); } +.story-status-badge[data-status="FRAMING"] { background: var(--state-pending); } +.story-status-badge[data-status="BACKLOG"] { background: var(--state-pending); } +.story-status-badge[data-status="PRIORITIZED"] { background: var(--state-queued); } .story-status-badge[data-status="IN_PROGRESS"] { background: var(--state-running); } .story-status-badge[data-status="SHIPPABLE"] { background: var(--state-completed); } .story-status-badge[data-status="DEPLOYED"] { background: #60a5fa; } .story-status-badge[data-status="VALIDATING"] { background: #c084fc; } .story-status-badge[data-status="REVIEW_READY"] { background: var(--state-completed); } .story-status-badge[data-status="NEEDS_FIX"] { background: var(--state-failed); color: #fff; } +.story-status-badge[data-status="DONE"] { background: var(--state-completed); } +.story-status-badge[data-status="CANCELLED"] { background: var(--state-cancelled); } .story-meta { display: flex; @@ -2005,6 +2011,12 @@ dialog label select:focus { .event-timeline__item--subtask_spawned { border-left-color: var(--accent); } .event-timeline__item--execution_started, .event-timeline__item--execution_ended { border-left-color: var(--state-running); } +.event-timeline__item--eval_verdict { border-left-color: var(--state-completed); } +.event-timeline__item--arbitration_decided { border-left-color: var(--accent); } +.event-timeline__item--human_accepted { border-left-color: var(--state-completed); } +.event-timeline__item--retro_captured { border-left-color: var(--state-timed-out); } +.event-timeline__item--epic_proposed { border-left-color: var(--accent); } +.event-timeline__item--escalated { border-left-color: var(--state-budget-exceeded); } .event-timeline__actor { flex: 0 0 auto; text-transform: uppercase; @@ -2043,3 +2055,356 @@ dialog label select:focus { border-color: var(--state-budget-exceeded); color: var(--state-budget-exceeded); } + +/* ── Stories tab: Kanban board ────────────────────────────────────────────── */ +/* main{max-width:640px} stays untouched for every other tab; the board opts + out locally (negative margins) and scrolls horizontally within itself so + a 7-column board never forces the whole page to scroll sideways. */ + +[data-panel="stories"] { + max-width: none; + margin: 0 -1rem; + padding: 0 1rem; +} + +.stories-toolbar { + display: flex; + justify-content: flex-end; + margin-bottom: 0.75rem; +} + +.view-toggle { + display: inline-flex; + border: 1px solid var(--border); + border-radius: 0.375rem; + overflow: hidden; +} + +.view-toggle-btn { + font-size: 0.8rem; + font-weight: 600; + padding: 0.35em 0.9em; + border: none; + background: transparent; + color: var(--text-muted); + cursor: pointer; +} + +.view-toggle-btn + .view-toggle-btn { + border-left: 1px solid var(--border); +} + +.view-toggle-btn.active { + background: var(--accent); + color: #0f172a; +} + +.stories-board { + display: flex; + align-items: flex-start; + gap: 0.75rem; + overflow-x: auto; + padding-bottom: 0.5rem; +} + +.stories-column { + flex: 0 0 200px; + width: 200px; + background: var(--bg); + border: 1px solid var(--border); + border-radius: 0.5rem; + padding: 0.625rem; + display: flex; + flex-direction: column; + gap: 0.5rem; + transition: border-color 0.15s, background 0.15s; +} + +.stories-column.drag-over { + border-color: var(--accent); + background: var(--surface); +} + +.stories-column-header { + display: flex; + align-items: baseline; + justify-content: space-between; + font-size: 0.75rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.03em; + color: var(--text-muted); + padding-bottom: 0.4rem; + border-bottom: 1px solid var(--border); +} + +.stories-column-count { + font-weight: 700; + color: var(--text); + background: var(--surface); + border-radius: 999px; + padding: 0 0.45em; + font-size: 0.7rem; +} + +.stories-column-list { + display: flex; + flex-direction: column; + gap: 0.5rem; + min-height: 40px; + max-height: 60vh; + overflow-y: auto; +} + +.story-card { + cursor: grab; +} + +.story-card.dragging { + opacity: 0.4; +} + +.story-card-header { + flex-wrap: wrap; +} + +.story-eval-indicator { + font-size: 0.72rem; + color: var(--text-muted); + margin-top: 0.1rem; +} + +.story-modal-actions { + display: flex; + align-items: center; + gap: 0.5rem; + margin-top: 0.5rem; +} + +/* ── Stories tab: Epic swimlanes ──────────────────────────────────────────── */ + +.epic-swimlanes { + display: flex; + flex-direction: column; + gap: 1rem; +} + +.epic-swimlane { + border: 1px solid var(--border); + border-radius: 0.5rem; + background: var(--bg); + padding: 0.75rem; +} + +.epic-swimlane-header { + display: flex; + align-items: center; + gap: 1rem; + margin-bottom: 0.625rem; +} + +.epic-swimlane-name { + font-weight: 700; + font-size: 0.92rem; + flex-shrink: 0; +} + +.epic-progress { + display: flex; + align-items: center; + gap: 0.5rem; + flex: 1; + min-width: 0; +} + +/* Meter: fill is a single hue (success), track is a lighter neutral step — + same-ramp read, not a multi-color segmented bar. */ +.epic-progress-track { + flex: 1; + height: 6px; + border-radius: 999px; + background: var(--border); + overflow: hidden; +} + +.epic-progress-fill { + height: 100%; + background: var(--state-completed); + border-radius: 999px; + transition: width 0.2s; +} + +.epic-progress-label { + font-size: 0.75rem; + color: var(--text-muted); + white-space: nowrap; + flex-shrink: 0; +} + +.epic-swimlane-stories { + display: flex; + gap: 0.625rem; + overflow-x: auto; + padding-bottom: 0.25rem; +} + +.epic-swimlane-stories .story-card { + flex: 0 0 220px; + width: 220px; + cursor: pointer; +} + +/* ── Story detail modal ───────────────────────────────────────────────────── */ + +#story-modal { + max-width: 900px; + width: 92vw; + max-height: 88vh; + overflow-y: auto; +} + +.story-modal-body { + display: flex; + flex-direction: column; + gap: 1.25rem; +} + +.ac-list { + margin: 0.25rem 0 0; + padding-left: 1.25rem; +} + +.ac-list li { + padding: 0.15rem 0; + font-size: 0.875rem; +} + +.ac-list.empty { + list-style: none; + padding-left: 0; + color: var(--text-muted); + font-size: 0.85rem; +} + +/* ── Story task-tree DAG ──────────────────────────────────────────────────── */ + +.dag-container { + overflow: auto; + max-height: 440px; + border: 1px solid var(--border); + border-radius: 0.5rem; + background: var(--bg); + padding: 0.5rem; +} + +.dag-svg { + display: block; +} + +.dag-node-rect { + stroke: rgba(15, 23, 42, 0.35); + stroke-width: 1; +} + +.dag-node-rect[data-state="PENDING"] { fill: var(--state-pending); } +.dag-node-rect[data-state="QUEUED"] { fill: var(--state-queued); } +.dag-node-rect[data-state="RUNNING"] { fill: var(--state-running); } +.dag-node-rect[data-state="READY"] { fill: var(--state-running); } +.dag-node-rect[data-state="COMPLETED"] { fill: var(--state-completed); } +.dag-node-rect[data-state="FAILED"] { fill: var(--state-failed); } +.dag-node-rect[data-state="TIMED_OUT"] { fill: var(--state-timed-out); } +.dag-node-rect[data-state="CANCELLED"] { fill: var(--state-cancelled); } +.dag-node-rect[data-state="BUDGET_EXCEEDED"] { fill: var(--state-budget-exceeded); } +.dag-node-rect[data-state="BLOCKED"] { fill: var(--state-blocked); } + +.dag-node-name, .dag-node-sub { + font-family: inherit; + fill: #0f172a; +} + +.dag-node-name { + font-size: 11px; + font-weight: 700; +} + +.dag-node-sub { + font-size: 9px; + opacity: 0.85; +} + +.dag-edge { + stroke: var(--text-muted); + stroke-width: 1.5; + fill: none; +} + +.dag-edge--depends { + stroke-dasharray: 4 3; +} + +.dag-arrow-head { + fill: var(--text-muted); +} + +.dag-legend { + display: flex; + flex-wrap: wrap; + gap: 0.4rem 0.9rem; + margin-top: 0.75rem; + font-size: 0.72rem; + color: var(--text-muted); +} + +.dag-legend-item { + display: inline-flex; + align-items: center; + gap: 0.3rem; +} + +.dag-legend-swatch { + width: 10px; + height: 10px; + border-radius: 2px; + display: inline-block; +} + +.dag-legend-swatch[data-state="PENDING"] { background: var(--state-pending); } +.dag-legend-swatch[data-state="QUEUED"] { background: var(--state-queued); } +.dag-legend-swatch[data-state="RUNNING"] { background: var(--state-running); } +.dag-legend-swatch[data-state="READY"] { background: var(--state-running); } +.dag-legend-swatch[data-state="COMPLETED"] { background: var(--state-completed); } +.dag-legend-swatch[data-state="FAILED"] { background: var(--state-failed); } +.dag-legend-swatch[data-state="TIMED_OUT"] { background: var(--state-timed-out); } +.dag-legend-swatch[data-state="CANCELLED"] { background: var(--state-cancelled); } +.dag-legend-swatch[data-state="BUDGET_EXCEEDED"] { background: var(--state-budget-exceeded); } +.dag-legend-swatch[data-state="BLOCKED"] { background: var(--state-blocked); } + +.dag-edge-legend { + display: flex; + flex-wrap: wrap; + gap: 0.4rem 1.2rem; + margin-top: 0.35rem; + font-size: 0.72rem; + color: var(--text-muted); +} + +.dag-edge-legend-swatch { + display: inline-block; + width: 18px; + border-top: 2px solid var(--text-muted); + margin-right: 0.35rem; + vertical-align: middle; +} + +.dag-edge-legend-swatch--depends { + border-top-style: dashed; +} + +@media (max-width: 640px) { + #story-modal { + max-width: 100vw; + width: 100vw; + max-height: 100vh; + border-radius: 0; + } +} |