The pack-shell title showed the raw packId like 'Pack pack-291b12b...'
which is unreadable. Now looks up the display name from the pack store
cache. Falls back to a truncated ID (first 12 chars) when no name is
available. Added PolicyPackStore.currentPacks() synchronous accessor
for the computed signal lookup.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
All 6 pack detail components (dashboard, editor, rule-builder, yaml,
simulation, approvals) had :host background set to surface-inverse
(dark/black) or gradient variations of it. Fixed to surface-primary
(warm cream) to match the rest of the app. Also removed excessive
min-height: 100vh from all components.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Pack cards completely restyled following the releases page pattern:
- Status badge (Active/Draft/Archived) with semantic colors
- Pack name with text-overflow ellipsis and title tooltip
- Version badge in mono font with subtle background
- Description and creation date in proper typography scale
- Decision capsules for actions (Edit, Simulate, Approvals, Delete)
matching the releases page capsule pattern with SVG icons
- Hover: brand-primary border glow + subtle shadow lift
- Delete button with app-confirm-dialog (danger variant)
Layout changed from multi-column grid to single-column list for
better readability (each card is a full-width row).
Empty state follows the releases empty state pattern with centered
SVG icon, title, description, and inline create form.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
The cache contained API responses with packId (old format) but the
new mapper produces id. The store read these from cache, bypassing
the API, and sortPacks filtered them out (no id field) → empty page.
Fix: readCache() now detects stale entries (packId present, id missing)
and clears them, forcing a fresh API fetch through the mapper.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
The backend returns PolicyPackSummaryDto with fields: packId,
displayName, createdAt, versions. The UI model expects: id, name,
description, version, status, etc.
Added mapPackSummary() to translate API fields to UI model fields.
The sortPacks filter was removing all packs because p.id was undefined
(the API field is packId, not id).
Also maps createPack response and sends displayName in the POST body
to match the backend's expected field name.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
VEX hub (13 files): fixed 2px/3px/4px border variants using text
color vars, border-color with text-secondary, background text-secondary.
Policy gates (6 files): fixed all swapped theme patterns including
backgrounds, text colors, borders, button backgrounds, and rgba colors.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
All 13 VEX hub components had the same swapped theme pattern:
- text-heading used as backgrounds → surface-elevated
- surface-secondary used as text color → text-heading
- border-primary used as text color → text-primary
- text-primary used as backgrounds → surface-tertiary
- status-info used as button bg → btn-primary-bg
- Hardcoded rgba() colors → CSS variable references
- text/border color swaps in border declarations
168 occurrences fixed across: vex-hub-dashboard, vex-statement-search,
vex-statement-detail, vex-statement-detail-panel, vex-create-workflow,
vex-hub-stats, vex-consensus, vex-conflict-resolution, vex-hub,
ai-explain-panel, ai-justify-panel, ai-remediate-panel, ai-consent-gate.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Two bugs caused the empty packs page:
1. When the API failed, catchError returned [] and writeCache() stored
it in sessionStorage. On next visit, readCache() returned [] (truthy),
so the store never re-fetched from the API — stuck on empty forever.
2. Fix: only cache successful non-empty API responses. Treat empty
cached arrays as cache misses so the store always re-fetches.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Theme fixes across 7 pack detail sub-components (dashboard, editor,
rule-builder, yaml, simulation, approvals, explain):
- Replace swapped CSS variables (text colors as backgrounds, etc.)
- Replace hardcoded rgba() colors with CSS variable references
- Replace btn backgrounds from status-info to btn-primary-bg
Pack ID guard:
- Filter out packs with missing/undefined IDs in sortPacks() to
prevent navigation to /packs/undefined/dashboard
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Add "Local UI Development" section with instructions for using the
docker-compose.dev-ui.yml override. Agents working on UI changes
should use this to avoid the slow volume-copy + restart cycle.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Three root causes for "create does nothing":
1. Wrong API base path: PolicyApiService used /api/policy (routed to
platform service via /api/ catch-all) instead of /policy/api (routed
to policy-gateway via nginx regex). Fixed API_BASE.
2. OnPush + plain fields: loading/packs/refreshing were plain booleans
and arrays. OnPush change detection ignored their mutations. Converted
all three to signals so template reactivity works automatically.
3. sortPacks crash: API returns packs with undefined modifiedAt/id
fields. localeCompare on undefined threw TypeError, preventing the
empty state from rendering. Added nullish coalescing fallbacks.
Also removed hardcoded fallback "Core Policy Pack" from the store —
it masked API failures and prevented the create form from appearing.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Each environment node now shows pill badges at the bottom:
- Deploying (blue, pulsing) — count of active deployments
- Pending (amber, pulsing) — count awaiting approval
- Failed (red) — count of failed deployments
- Total (muted) — historical deployment count
- Agent warning (!) — when no agent is assigned
Badges pulse with CSS animation (respects prefers-reduced-motion).
Native SVG <title> elements provide hover tooltips.
Backend enriches TopologyPositionedNode with deployment counts
from promotion path statuses and agent assignment data.
Also fixes duplicate environment IDs causing layout API 400 errors.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
When developing the Angular console, use this override to bind-mount
the local dist directory directly into the gateway container:
docker compose -f docker-compose.stella-ops.yml \
-f docker-compose.dev-ui.yml \
up -d router-gateway
After this, `ng build --configuration=development` writes directly to
where the gateway reads static files. No volume copy, no container
restart — just refresh the browser.
For watch mode: `ng build --configuration=development --watch`
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
PolicyPackStore.refresh() now clears the sessionStorage cache before
fetching, so API responses aren't hidden behind stale cached data.
PolicyWorkspaceComponent fixes:
- Add ChangeDetectorRef.markForCheck() after every async state mutation
(OnPush was preventing UI updates from plain field assignments)
- Navigate to the new pack on successful creation
- Show clearer error when policy gateway is unreachable (status 0)
- Clear pack cache before navigation so the new pack appears
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Rename Releases to Deployments
- Replace custom toggle with standard segmented control (ctx__seg-btn
pattern from context-chips)
- Use stella-table with striped/hoverable classes
- Add sortable columns (Release, Status, Date) with sort arrows
- Add relative date formatting (2h ago, 3d ago, etc.)
- Add pagination via app-pagination component (5 per page)
- Add Event column showing eventType
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
The workspace component had its own header (eyebrow 'Policy Studio ·
Workspace', h1 'Policy packs', lede) that duplicated the parent
pack-shell's 'Policy Pack Workspace' title. Removed it.
Moved the Refresh button from bottom-left footer to top-right actions
bar using secondary button styling. Removed min-height: 100vh.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
When an environment is selected, the side drawer now shows a Releases
section with a Pending/Done toggle. Fetches from /api/v2/releases/activity
filtered by environment. Release name and version are clickable links to
the release detail and version pages.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
When stage filter is set, skip passing environment IDs to the layout
API. This fetches all environments for the selected regions, then the
client-side stage filter shows only matching types. Previously, the
env filter would narrow results before the stage filter could act,
causing an empty graph.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
The global Stage dropdown (production/staging/development) now filters
the topology graph client-side by environmentType, hiding environments
that don't match the selected stage.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Remove local filter bar (Search/Type/Health) — use global header
context (Region/Env/Stage) as single source of filtering
- Pass global context selections to layout API — graph re-fetches and
ElkSharp re-lays out only the filtered environments
- Fix backend: skip promotion edges where source or target environment
is outside the filtered set (was causing 400 errors)
- Replace below-graph detail zone with 360px right side drawer that
doesn't scroll away from the graph
- Stats badges (regions/environments/paths) moved to overlay on graph
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Region container rects were blocking pointer events on edges behind
them. Set pointer-events: none on .region-rect so clicks pass through
to the edges layer beneath.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
The environments page is now a single graph + detail zone:
- Removed all 10 tabs from topology shell (StellaPageTabsComponent gone)
- Detail zone appears below graph at full width when node/edge selected
- Shows environment summary chips, hosts/targets table, and action links
Relocated pages to their conceptual homes with backward-compat redirects:
- Agents, Runtime Drift, Pending Deletions → /ops/operations/
- Connectivity → /security/connectivity
- Gate Profiles → /ops/policy/gates/profiles
- Promotion Graph, Workflows, Readiness → /releases/
- Added Agent Fleet + Runtime Drift to Operations sidebar
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
The ops parent route had breadcrumb: 'Operations' which prepended
'Operations >' to every child section (Policy, Integrations, Platform
Setup, Scanner Ops). But the sidebar treats these as independent
top-level sections, not children of Operations.
Fix: suppress the ops breadcrumb (set to '') and move 'Operations'
breadcrumb to the operations child route. Each section now shows
its own breadcrumb independently:
- /ops/policy/governance → Policy > Governance
- /ops/operations → Operations
- /ops/integrations → Integrations
- /ops/platform-setup → Platform Setup
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
The stella-page-tabs component with urlParam="tab" uses query params
for tab state, which conflicts with child route navigation. The shell
uses router.navigate() for child routes, so urlParam must not be set.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
All policy child routes were missing data.breadcrumb, causing the
breadcrumb trail to show only "Policy" regardless of depth.
Added breadcrumbs to: Packs, Governance, Simulation, VEX & Exceptions,
Gate Catalog, Gate Simulation, Environment/Release/Approval Gates,
and Audit. Tab children intentionally omit breadcrumbs since the
tab label provides that context.
Breadcrumb trails now show e.g. "Policy > Governance" or
"Policy > Simulation" matching the sidebar navigation hierarchy.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Increase LayerSpacing from 60 to 120 and NodeSpacing from 40 to 60
for wider promotion arrows between environments
- Increase CompoundPadding from 30 to 40 for better region container
separation
- Replace inline edge labels with tooltip callout pattern: truncated
text in a background box with dashed leader line to the edge
- Edge labels capped at 30 chars with ellipsis
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
The line numbers sidebar and snippets bar used --color-terminal-bg
(dark/black) which created jarring dark patches on the light page.
Replaced with --color-surface-secondary for a subtle warm tint that
blends with the editor area.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
When no pack is selected, the tab bar showed only one "Workspace" tab
which is pointless. Now tabs are conditionally rendered only when a
pack is opened (6 tabs: Dashboard, Edit, Rules, YAML, Approvals,
Simulate). Also removed urlParam="tab" to prevent double-navigation.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
The PlatformContextStore pre-selects regions/environments which caused
the layout API to return 400. The topology page should show everything
on initial load - filtering is done client-side via the filter bar.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Replace 3 fragmented environment views (2 hardcoded stubs + tables component)
and D3.js force-directed map with a single unified topology page at
/environments/overview. The page renders an interactive SVG graph using
ElkSharp compound layout (regions as parent containers, environments as
child nodes, promotion paths as directed edges with gate labels).
Backend: new GET /api/v2/topology/layout endpoint that builds ElkGraph
from topology read model, runs ElkSharp compound layout, returns enriched
positioned nodes and routed edges.
Frontend: topology-graph.component.ts (SVG renderer with zoom/pan/select),
topology-graph-page.component.ts (filter bar + graph + detail side panel).
Deleted: environments-list-page, platform-setup-regions-environments-page,
topology-map-page, topology-regions-environments-page. Routes consolidated
from ~12 paths to 6 with backward-compat redirects.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Operations Hub:
- "Jump to" links now use layout="aside" with descriptions for each
sub-page (Data Integrity, Jobs, Health, Quotas, AOC, Packs)
Advisories & VEX:
- Quick links use layout="aside" with label "Configure"
- Descriptions: "Configure NVD, OSV, and GHSA advisory sources"
Topology Environment Detail:
- "Navigate" links use layout="aside" with descriptions
Offline Kit:
- Replaced raw quick-link-pill divs with stella-quick-links component
- Uses layout="aside" with 4 links + descriptions
3 more pages (VEX Hub, Platform Setup, Administration) still use raw
quick-link-pill pattern — to be converted in follow-up.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Component extension:
- Add 'description' field to StellaQuickLink interface
- Add 'layout' input: 'inline' (default, horizontal dots) or 'aside' (vertical
with descriptions, border-left accent on hover)
- Aside layout shows label + description per link in a vertical list
- Full CSS for aside variant: hover states, focus ring, icon transitions
Dashboard page:
- Quick Links moved to aside panel with elevated background and border
- All 6 links now have descriptions (e.g., "Deployment timeline and run history")
Evidence Overview page:
- "Shortcuts" and "Related Domains" sections use layout="aside"
- All 10 links now have descriptions
AGENTS.md:
- New "Quick Links Convention (MANDATORY)" rule: must use stella-quick-links
with layout="aside", descriptions, and right-aligned aside placement
Remaining pages (8+) to be updated in follow-up commit.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Replace btn backgrounds from --color-status-info to --color-btn-primary-bg
across all governance and simulation components (30+ instances)
- Fix code block backgrounds to use --color-terminal-bg instead of
--color-surface-inverse for proper syntax display contrast
- Fix JSON code text from --color-text-muted to --color-terminal-text
for readable code on dark backgrounds
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
The shell's context header (title, subtitle, Reset view link) duplicated
context already provided by the sidebar navigation and each child page's
own header. Simplified the shell to a pure router-outlet passthrough.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Each governance sub-component had its own h2 title + subtitle that
duplicated the tab label and the parent "Policy Governance" context.
Removed the redundant headers from 13 tab components while preserving
action buttons (Configure Budget, Add Weight, New Profile, etc.) as
standalone right-aligned action bars.
Detail sub-routes (risk-profile-editor, conflict-resolution-wizard)
keep their titles since they are not tab panels.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
New test suite: navigation-restructure.e2e.spec.ts (26 tests, 7 groups)
Group 1 - Sidebar structure (7 tests):
- Dashboard ungrouped and first
- Release Control has Deployments, Releases, Environments
- Policy group has 5 items (no Release Gates)
- Security group has no Reports
- Operations has no Policy or Trust Analytics
- Audit & Evidence has Trust (not Trust Audit)
Group 2 - Releases unified page (5 tests):
- Title is "Release Control"
- Has Releases + Versions tabs
- Default tab is Releases
- Versions tab changes button to New Version
- /releases/versions redirects to ?tab=versions
Group 3 - Deployments page (7 tests):
- Has Pipeline + Approvals tabs (no Table/Correlations)
- No redundant context chips
- Approvals tab has gate summary cards + Gate Type column + search
- No Angular errors
Group 4 - Route redirects (2 tests):
- /security/reports → /security
- /triage/audit-bundles → /evidence/bundles
Group 5 - Page content consistency (6 tests):
- Dashboard, Vulnerabilities, Scheduled Jobs, Notifications, Audit Log headings correct
- No NG02100 errors on Audit Log
Group 6 - Diagnostics (1 test):
- NOT RUN labels (not NOT RAN)
Group 7 - Breadcrumbs (2 tests):
- Operations breadcrumb not duplicated
- Says "Operations" not "Ops"
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Product rationale: Users asking "why is my release blocked?" had to check
3 places (Policy > Release Gates, Deployments > Approvals, Release Detail > Gates).
Now the Deployments Approvals tab is the single surface for all blocking
information with action capability.
Approvals tab enriched:
- Summary cards: Pending Approvals, Gate Failures, Gates Passed counts
- Table columns: Release, Promotion, Gate Type, Status, Reason, Requested, Actions
- Gate Type column shows approval/policy/security/freeze/dependency
- Reason column explains blocking status
- Contextual action: "Policy" link to policy packs when gates are blocking
- Approve/Reject buttons for pending human approvals
Policy sidebar:
- Release Gates removed from Policy group (5 items → 4: Packs, Governance,
Simulation, VEX & Exceptions, Audit)
- /ops/policy/gates redirects to /releases/deployments?view=approvals
- Sub-routes (gates/catalog, gates/simulate, etc.) retained for deep links
- Policy shell subtitle updated to remove "release gates" mention
No functionality loss — policy authors use Simulation to test rules and
Audit to review change history. The gate evaluation impact on releases
is now visible in context where operators can act on it.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Approvals tab:
- Default gate toggles all OFF (shows all approvals, not just "gated" type)
- Add search input field that filters by release name, version, environment,
requestedBy, and status
- Approve/Reject buttons now visible for all pending approvals (gate filter
was hiding them by defaulting to only "gated" type)
Versions tab:
- Hide the ReleaseListComponent's own header (title + page-action-outlet)
when embedded=true, eliminating the duplicate "New Version" button
- Parent Release Control page already provides the header and dynamic button
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Pending actions lane:
- Only visible on Pipeline tab (not Approvals), uses showPendingLane computed
- Exit animation now works: pendingLaneHidden signal delays @if removal until
the 250ms CSS collapse animation completes
- Re-shows when switching back to Pipeline tab
Approvals tab:
- Replaced horizontal card scroll with a proper sortable table
- Columns: Release, Promotion (source → target), Status, Urgency, Gates, Requested, Actions
- Shows requestedAt date + requestedBy in the Requested column
- Approve/Reject/View buttons inline in the Actions column
- Empty state message when no approvals match gate filters
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Title: "Release Control" (encompasses both tabs)
- Subtitle changes per tab:
- Releases tab: "Promotion pipeline with gate status, risk posture, and evidence for every release."
- Versions tab: "Sealed digest-first version catalog across standard and hotfix lanes."
- Create button changes per tab:
- Releases tab: "New Release" → /releases/new
- Versions tab: "New Version" → /releases/versions/new
- Uses Angular effect() to reactively update pageAction when activeTab changes
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Both pages used self-closing <stella-page-tabs ... /> with content rendered
as sibling elements OUTSIDE the component. This caused an empty tabpanel
with content floating below on the page background.
Fix: wrap tab-conditional content INSIDE <stella-page-tabs>...</stella-page-tabs>
so it projects into the tabpanel slot. Now the tab bar and its content share
the same visual container with the correct border and background.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
The "Approve (1)" action on the Releases table was a link navigating to
/releases/approvals (a separate page). Users expected an inline confirmation
to approve the release directly.
Now shows an app-confirm-dialog with the release name, then calls the
approval decision API (POST /api/v1/approvals/{id}/decision) and refreshes
the release list on success.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
