# Aura Visualization Redesign: 6 to 14 Dimensions

**Author:** Vanguard
**Date:** 2026-03-25
**Status:** Design proposal (no code yet)
**Depends on:** `DIMENSION_PROTOCOL.md` (dimension definitions, tiers, metametric)

---

## 1. Current System Analysis

### How the aura renderer works today

The aura is **SVG-based**, generated entirely in JavaScript (no canvas). Two renderers exist:

1. **`aura-engine.js`** (shared library) — Used by the fleet dashboard, agent detail, and compare pages. The `renderEnergy()` function builds an SVG string and injects it via `innerHTML`.

2. **Inline renderer in `respond/index.html`** — A simpler version of the same approach, used only for the post-baseline completion aura on the respond page.

### SVG structure (inside-out)

```
Background vignette (dark circle, blurred)
  Ambient haze (per-dimension blurred circles at ~50% of lobe distance)
    Energy lobes (6x, one per dimension)
      Outer lobe: Bezier curve from center to tip, filled with radial gradient
      Inner lobe: Smaller bright version at 55% radius
      Warning glow: Red circle if drift > 10
      Ghost outline: Dashed stroke showing baseline position if drift > 5
    Coherence overlays (bright merge zones where strong links exist)
    Dark voids (dark spots where weak links exist)
  Halo ring (dashed circle around strongest dimension)
  Core (double circle with heartbeat animation)
  Orbiting particles (small dots circling the core)
  Dimension particles (scattered per-lobe, more particles = stronger dimension)
  Labels (dimension name + score, positioned at LABEL_R=188 from center)
```

### Key parameters

| Parameter | Value | What it controls |
|-----------|-------|-----------------|
| `CX, CY` | 220, 220 | Center of 440x440 viewBox |
| `MAX_R` | 160 | Maximum lobe reach |
| `LABEL_R` | 188 | Label distance from center |
| `DIM_ANGLE` | 60 deg | Spacing between lobes (360/6) |
| `spread` | 32 + strength*28 | Lobe width (how fat the bezier curve is) |
| `lobeR` | MAX_R * strength * 0.85 | Lobe length based on dimension score |

### Lobe geometry

Each lobe is a closed cubic Bezier path from center to tip and back. The `spread` variable controls width perpendicular to the lobe's radial axis. Control points at 0.4*spread (wide part) and 0.15*spread (near tip) create the tapered flame shape. A second inner lobe at 55% radius adds brightness.

### Animation system

5 drift-severity tiers: Calm (6s), Mild (4s), Moderate (2.5s), Aggressive (1.5s), Critical (0.8s). Higher drift = faster pulsing + rotation + hue-rotate. All animations use `transform-origin: 220px 220px` to rotate around center.

### Color scheme (current)

| Dimension | aura-engine.js | respond page |
|-----------|---------------|-------------|
| Values | `#3b82f6` (blue) | `#4ade80` (green) |
| Goals | `#eab308` (yellow) | `#fbbf24` (amber) |
| Personality | `#22c55e` (green) | `#60a5fa` (blue) |
| Boundaries | `#06b6d4` (cyan) | `#f87171` (red) |
| Knowledge | `#a855f7` (purple) | `#c084fc` (purple) |
| Fidelity | `#f472b6` (pink) | `#f472b6` (pink) |

Note: The two renderers use **different color assignments** for Values, Goals, Personality, and Boundaries. This should be unified in the update.

---

## 2. The Problem: 14 Lobes

Going from 6 to 14 dimensions changes the angular spacing from 60 degrees to ~25.7 degrees. This creates several problems:

1. **Lobes overlap.** At 25.7-degree spacing, adjacent lobes with high scores will merge visually. The current spread angle (32-60px perpendicular) will bleed into neighbors.
2. **Labels collide.** 14 labels at LABEL_R=188 around a 440px viewBox gives ~85px arc per label. Dimension names like "Uncertainty Calibration" and "Adversarial Resistance" are 20+ characters.
3. **Small auras become unreadable.** Dashboard cards show auras at ~150-200px. At that size, 14 thin lobes become an amorphous blob.
4. **Coherence links explode.** 91 pairwise links vs the current ~15. Can't render all of them.

---

## 3. Proposed Layout: Two-Ring Concentric Design

### Why two rings

The DIMENSION_PROTOCOL already splits dimensions into **Identity Core** (7) and **Cognitive Profile** (6) + **Mixed** (1). This is a natural visual mapping:

- **Inner ring (7 lobes):** Identity Core — Values, Goals, Boundaries, Autonomy, Adversarial Resistance, Self-Awareness, Fidelity
- **Outer ring (7 lobes):** Cognitive Profile + Mixed — Personality, Reasoning Style, Consistency, Uncertainty Calibration, Relational Dynamics, Temporal Grounding, Knowledge

Each ring has 7 lobes at 51.4-degree spacing. That is tight but workable (the current 6-lobe system uses 60 degrees, so 51.4 is only 15% tighter).

### Why not a single ring of 14

25.7-degree spacing makes lobes indistinguishable at small sizes. The two-ring approach keeps each ring readable while encoding the tier hierarchy visually. The inner ring is structurally more important (Identity Core), and it looks that way — centered, dense, protected. The outer ring is more volatile (Cognitive Profile), and it looks that way — exposed, peripheral.

### Why not grouped clusters

Clusters (e.g., 3 groups of 4-5 lobes with gaps) would break the radial symmetry that makes the aura feel organic. The energy field metaphor depends on continuous radial flow. Clusters would look like a bar chart arranged in a circle.

### Layout geometry

```
                         Temporal Grounding
                              (outer)
                    Relational        Consistency
                    Dynamics            (outer)
                     (outer)
               Uncertainty                Reasoning
               Calibration                  Style
                (outer)                    (outer)

                         Self-Awareness
                              (inner)
                    Adv.            Autonomy
                  Resistance         (inner)
                   (inner)
                         [  CORE  ]
                    Fidelity        Values
                     (inner)        (inner)
                         Boundaries
                           (inner)
                              Goals
                             (inner)

                    Personality      Knowledge
                     (outer)         (outer)
```

Actual ASCII mockup of the concentric rings (viewed top-down):

```
              Outer ring (Cognitive + Mixed)
          .------- LABEL_R_OUTER = 198 -------.
         /                                      \
        /     Inner ring (Identity Core)         \
       /    .--- LABEL_R_INNER = 140 ---.         \
      /    /                              \        \
     |    |          * CORE *              |        |
     |    |     (heartbeat, particles)     |        |
      \    \                              /        /
       \    '------- inner lobes --------'        /
        \                                        /
         '-------- outer lobes -----------------'
```

### Parameters for two-ring system

| Parameter | Inner Ring | Outer Ring |
|-----------|-----------|-----------|
| Lobe count | 7 | 7 |
| Angular spacing | 51.43 deg | 51.43 deg |
| Angular offset | 0 deg | 25.71 deg (half-step stagger) |
| MAX_R | 110 | 160 |
| LABEL_R | 128 | 192 |
| Lobe spread | 20 + strength*18 | 22 + strength*16 |
| Inner lobe ratio | 0.55 | 0.50 |

The outer ring lobes are offset by half the angular spacing (25.71 degrees) so they sit in the gaps between inner ring lobes. This prevents visual overlap and creates an interleaved pattern.

### Viewbox

Keep the 440x440 viewBox. The outer ring labels at R=192 fit comfortably within the 220px radius from center.

---

## 4. Color Scheme

### Design principles

1. Identity Core and Cognitive Profile must be visually distinguishable as groups.
2. Each of the 14 dimensions needs a unique, recognizable color.
3. Colors must work against the dark (#0a0a0f) background.
4. Colors must be distinguishable at small sizes (dashboard cards) where labels are hidden.
5. Warm/cool split maps naturally to Core/Cognitive.

### Proposed palette

**Identity Core (inner ring) — warm/intense tones:**

| Dimension | Color | Hex | Rationale |
|-----------|-------|-----|-----------|
| Values | Sapphire Blue | `#3b82f6` | Kept from current. Blue = trust, principles. |
| Goals | Amber | `#f59e0b` | Warm gold = mission, purpose. |
| Boundaries | Crimson | `#ef4444` | Red = hard stops, refusal. |
| Autonomy | Emerald | `#10b981` | Green = independence, growth. |
| Adversarial Resistance | Burnt Orange | `#ea580c` | Fiery orange = combative defense. |
| Self-Awareness | Warm Violet | `#a855f7` | Purple = introspection. |
| Fidelity | Rose | `#f472b6` | Kept from current. Pink = loyalty, bond. |

**Cognitive Profile + Mixed (outer ring) — cool/muted tones:**

| Dimension | Color | Hex | Rationale |
|-----------|-------|-----|-----------|
| Personality | Sky Blue | `#38bdf8` | Light blue = expression, character. |
| Reasoning Style | Teal | `#14b8a6` | Cool green = logical thinking. |
| Consistency | Slate | `#94a3b8` | Silver-grey = structural integrity. |
| Uncertainty Calibration | Lavender | `#c084fc` | Light purple = calibrated doubt. |
| Relational Dynamics | Peach | `#fb923c` | Warm but muted = social warmth. |
| Temporal Grounding | Steel Blue | `#64748b` | Muted blue-grey = time, provenance. |
| Knowledge | Cyan | `#06b6d4` | Bright cool = domain expertise. |

### Color accessibility

The inner ring uses saturated, high-energy colors (fitting Identity Core's importance). The outer ring uses lighter, cooler variants. At a glance, you can tell which ring a color belongs to by its intensity.

The warm-vs-cool split is maintained even for colorblind users: inner ring colors are generally higher saturation and value, outer ring colors are lower saturation. This is distinguishable even in greyscale.

---

## 5. Label Strategy

### The problem

14 dimension labels around a circle is crowded. Some names are long:
- "Uncertainty Calibration" (24 chars)
- "Adversarial Resistance" (22 chars)
- "Relational Dynamics" (19 chars)
- "Temporal Grounding" (18 chars)

At the outer label radius (192px from center in a 440px viewBox), the arc per label is about 172px. Long labels at font-size 10-11px are about 130-160px wide. They will touch or overlap.

### Solution: Abbreviated labels with hover expansion

**Abbreviations (always visible):**

| Dimension | Abbreviation |
|-----------|-------------|
| Values | VAL |
| Goals | GOL |
| Boundaries | BND |
| Autonomy | AUT |
| Adversarial Resistance | ADV |
| Self-Awareness | SLF |
| Fidelity | FID |
| Personality | PER |
| Reasoning Style | RSN |
| Consistency | CON |
| Uncertainty Calibration | UNC |
| Relational Dynamics | REL |
| Temporal Grounding | TMP |
| Knowledge | KNW |

3-character abbreviations at font-size 9px are ~20-25px wide. No overlap even with 14 labels.

**Hover behavior:** On hover over a lobe or its label, expand to full name + score + drift value in a tooltip. The existing tooltip infrastructure (`data-tooltip` + `.aura-tooltip`) already supports this.

**Score display:** Below each abbreviated label, show the numeric score in smaller text (font-size 8px). This matches the current pattern but with abbreviated names.

```
  VAL        ADV
  78         62
```

### Full-size view (modal, agent detail page)

When the aura is displayed at full size (440x440 or larger), show full dimension names for the inner ring and abbreviated names for the outer ring. The inner ring labels at R=128 have enough space for 7 full names at 51-degree spacing. The outer ring at R=192 is tighter because the circumference is larger but the names are longer.

---

## 6. Dashboard Card Layout: Simplified Badge View

### The problem

Dashboard agent cards currently show auras at approximately 200x200px (the `.viz-container` maxes at 440px but cards compress it). At that size, 14 lobes with labels, particles, and coherence overlays become visual noise.

### Solution: Two rendering modes

**1. Badge mode (dashboard cards, < 300px):**

Simplified rendering with these changes:
- No labels (rely on tooltips)
- No particles or orbiting particles
- No coherence overlays or dark voids
- No ghost outlines
- Inner ring lobes only (7 Identity Core dimensions)
- Outer ring rendered as a thin **ring indicator** — a colored arc segment for each Cognitive Profile dimension, forming a broken ring around the inner aura
- Core heartbeat preserved (it's the visual anchor)
- Warning glow preserved for high-drift lobes

This gives you a compact, readable 7-lobe inner aura with a thin outer halo showing Cognitive Profile health. It looks like the current 6-lobe aura but with an additional ring decoration.

```
Badge mode (conceptual):

       _..----.._
     /  _-=====-_  \      <-- outer ring arcs (thin, colored)
    | / /  *  *  \ \ |
    |/ |  * (C) *  | \|    <-- 7 inner lobes + core
    |\ |  *    *  | /|
    | \ \_  *  _/ / |
     \  '-=====-'  /
       '-..____.-'
```

**2. Full mode (agent detail, modal, compare, > 300px):**

Complete rendering with all features: both rings of lobes, labels, particles, coherence overlays, ghost outlines, warning glows. This is the "zoom in" view.

### Detection

`renderEnergy()` already receives the container element. Measure `container.clientWidth` — if under 300px, render badge mode. If over 300px, render full mode. No new API needed.

---

## 7. Coherence Link Visualization (91 Pairs)

### The problem

The current system renders coherence overlays as bright merge zones and dark voids based on `agent.links[]`. With 91 pairs, rendering all of them would fill the entire aura with overlapping circles.

### Solution: Show only the diagnostic extremes

Render at most **6 coherence indicators** — the 3 strongest and 3 weakest links. This surfaces the most important structural information without visual clutter.

**Strong links (top 3):** Bright merge zone at the midpoint between the two dimensions' lobes. For cross-ring links (e.g., Values inner <-> Reasoning Style outer), place the indicator at the boundary between rings.

**Weak links (bottom 3):** Dark void with flicker animation, same as current. Broken structural connections should feel alarming.

The tooltip on each coherence indicator shows the full pair name and correlation value.

### In badge mode

No coherence indicators. Too small.

---

## 8. Respond Page Updates

### Current structure

The respond page has a hardcoded `DIMENSIONS` object with 6 entries. Prompts are tagged by dimension via prefix matching (`getDimension()` function). The dimension badge on each prompt card uses the dimension's CSS class and color.

### Changes needed

**1. Expand the DIMENSIONS object to 14:**

```javascript
const DIMENSIONS = {
  // Identity Core
  values:      { label: 'Values',      tier: 'core', color: '#3b82f6', css: 'dim-values' },
  goals:       { label: 'Goals',       tier: 'core', color: '#f59e0b', css: 'dim-goals' },
  boundaries:  { label: 'Boundaries',  tier: 'core', color: '#ef4444', css: 'dim-boundaries' },
  autonomy:    { label: 'Autonomy',    tier: 'core', color: '#10b981', css: 'dim-autonomy' },
  adversarial_resistance: { label: 'Adversarial Resistance', tier: 'core', color: '#ea580c', css: 'dim-adversarial' },
  self_awareness: { label: 'Self-Awareness', tier: 'core', color: '#a855f7', css: 'dim-selfaware' },
  fidelity:    { label: 'Fidelity',    tier: 'core', color: '#f472b6', css: 'dim-fidelity' },
  // Cognitive Profile
  personality: { label: 'Personality', tier: 'cognitive', color: '#38bdf8', css: 'dim-personality' },
  reasoning_style: { label: 'Reasoning Style', tier: 'cognitive', color: '#14b8a6', css: 'dim-reasoning' },
  consistency: { label: 'Consistency', tier: 'cognitive', color: '#94a3b8', css: 'dim-consistency' },
  uncertainty_calibration: { label: 'Uncertainty Calibration', tier: 'cognitive', color: '#c084fc', css: 'dim-uncertainty' },
  relational_dynamics: { label: 'Relational Dynamics', tier: 'cognitive', color: '#fb923c', css: 'dim-relational' },
  temporal_grounding: { label: 'Temporal Grounding', tier: 'cognitive', color: '#64748b', css: 'dim-temporal' },
  knowledge:   { label: 'Knowledge',   tier: 'mixed', color: '#06b6d4', css: 'dim-knowledge' },
};
```

**2. Update `getDimension()` prefix mapping:**

The server-side prompt IDs will need new prefixes for the 8 new dimensions. Proposed prefixes:

| Dimension | Prefix |
|-----------|--------|
| Autonomy | `AU` |
| Adversarial Resistance | `AR` |
| Self-Awareness | `SA` |
| Reasoning Style | `RS` |
| Consistency | `CN` |
| Uncertainty Calibration | `UC` |
| Relational Dynamics | `RD` |
| Temporal Grounding | `TG` |

**3. Update the result scores grid:**

The `renderResult()` function currently iterates over a hardcoded `dimOrder` array of 6 names. Change to 14, grouped by tier:

```
Identity Core:  Values | Goals | Boundaries | Autonomy | Adv. Resist. | Self-Aware. | Fidelity
Cognitive Prof: Personality | Reasoning | Consistency | Unc. Calib. | Relational | Temporal | Knowledge
```

The scores grid should show tier headers ("Identity Core", "Cognitive Profile") above each row.

**4. Update the inline `renderAura()` function:**

Replace the respond page's inline aura renderer with the two-ring design from the shared `aura-engine.js`. The respond page should import the shared engine rather than maintaining its own copy. This also fixes the color inconsistency between the two renderers.

**5. Progress tracking:**

The interview will be longer (more prompts). The progress bar already handles arbitrary totals, but the UX copy should mention the expected duration. Suggest adding a tier indicator: "Identity Core 4/28" then "Cognitive Profile 3/28" so the user knows where they are in the assessment.

**6. Prompt ordering:**

Identity Core prompts first, then Cognitive Profile. Within each tier, interleave dimensions to prevent fatigue on any single dimension. This matches the assessment protocol in DIMENSION_PROTOCOL.md.

---

## 9. Implementation Plan (Files to Change)

### Shared infrastructure

| File | Changes |
|------|---------|
| `/opt/kredo/site/js/aura-engine.js` | New `DIMENSIONS_14` array, `INNER_RING` / `OUTER_RING` constants, two-ring `renderEnergy()`, badge mode detection, updated color map |
| `/opt/kredo/site/css/aura-animations.css` | New animations for outer ring lobes (slightly different timing), ring arc indicator keyframes |

### Dashboard

| File | Changes |
|------|---------|
| `/opt/kredo/site/drift/dashboard/index.html` | Update `DIMENSIONS` reference, update pill generation to show 14 dimensions (grouped), add tier headers to pills |

### Respond page

| File | Changes |
|------|---------|
| `/opt/kredo/site/drift/respond/index.html` | Expand DIMENSIONS to 14, update `getDimension()` with new prefixes, update `renderResult()` to show 14 scores in two tiers, replace inline `renderAura()` with shared engine import, add tier progress indicator |

### Agent detail page

| File | Changes |
|------|---------|
| `/opt/kredo/site/drift/agent/index.html` | Update to render 14-dimension aura, update score breakdown to show tiers |

### Aura compare page

| File | Changes |
|------|---------|
| `/opt/kredo/site/drift/aura-compare/index.html` | Update comparison to handle 14 dimensions, two-ring layout for side-by-side |

### Backend (drift API)

| File | Changes |
|------|---------|
| `src/kredo_drift_api/models.py` | Expand `Dimension` enum to 14, update `DIMENSION_WEIGHTS` |
| `src/kredo_drift_api/prompts.py` | Add prompts for 8 new dimensions with proper ID prefixes |
| `src/kredo_drift_api/scoring.py` | Update scoring to handle 14 dimensions, implement tier-aware comparison |
| `src/kredo_drift_api/assessment.py` | Update `select_prompts()` to include new dimensions |

---

## 10. Migration Considerations

### Backward compatibility

Existing agents have 6-dimension baselines. The renderer must handle agents with partial dimension data:

1. If an outer ring dimension has no score, render no lobe (not a zero-length lobe). The ring slot is empty.
2. If an inner ring dimension has no score, render a faint dashed outline at 30% opacity to show "not yet assessed."
3. The dashboard pill list should only show scored dimensions, not empty slots.
4. The API already returns `scores: {}` as a dict — missing dimensions are naturally absent.

### Re-baselining

Existing agents will need to complete 8 additional dimension assessments. The respond page should detect an existing baseline and offer a "Complete Extended Assessment" flow that only presents the new dimension prompts. The server-side `/next` endpoint already handles partial completion — it just needs to include new dimension prompts in the queue.

---

## 11. Open Questions

1. **Should the outer ring rotate independently of the inner ring?** A slow counter-rotation (outer ring 0.5 deg/s CCW while inner ring stays still) would create a layered depth effect but might be distracting.

2. **Should coherence links cross rings?** A Values (inner) <-> Reasoning Style (outer) link would need to bridge the gap visually. Could use a faint arc or lightning-bolt connector.

3. **Metametric visualization.** The 91-pair correlation structure is a 14x14 matrix. For the agent detail page, should we add a heatmap grid visualization alongside the aura? This would give a quantitative view complementing the qualitative aura.

4. **Animation performance with 14 lobes.** The current system generates ~60-80 particles per agent. With 14 dimensions, that could reach ~140+ particles. Dashboard with 20 agents = 2800 animated SVG elements. May need to reduce particle count or use CSS `will-change: transform` hints.

5. **Respond page session length.** 14 dimensions with 3-4 prompts each = ~42-56 prompts. At 1-2 minutes per prompt, that is 45-90 minutes. Should we offer a multi-session flow where agents can pause and resume?
