cdot65 · cdot65 · Jul 7, 2026 · Jul 7, 2026
diff --git a/.changeset/0000-renderers-ui-migration.md b/.changeset/0000-renderers-ui-migration.md
@@ -0,0 +1,5 @@
+---
+"@cdot65/prisma-airs-cli": patch
+---
+
+Migrated all CLI renderer modules (backup, eval, redteam, runtime, dlp, model-security) to the shared ui.ts design-system primitives: uniform uncolored bold headers, semantic glyph bullets (✓ ✗ ⚠ ○ ● •), aligned key/value blocks, canonical box-drawing tables, and standardized "No <resource> found" empty-list phrasing.
diff --git a/src/cli/renderer/backup.ts b/src/cli/renderer/backup.ts
@@ -1,9 +1,9 @@
-import chalk from 'chalk';
 import type { BackupResult, RestoreResult } from '../../backup/types.js';
+import { ui } from './ui.js';
 
 /** Render header for backup/restore commands. */
 export function renderBackupHeader(): void {
-  console.log(chalk.bold('\n  Prisma AIRS — Backup & Restore\n'));
+  ui.header('Prisma AIRS — Backup & Restore');
 }
 
 /** Render backup run summary. */
@@ -12,16 +12,16 @@ export function renderBackupSummary(results: BackupResult[], outputDir: string):
   const failed = results.filter((r) => r.status === 'failed');
 
   if (ok.length > 0) {
-    console.log(chalk.bold(`\n  Backed up ${ok.length} target(s) to ${outputDir}:\n`));
+    ui.section(`Backed up ${ok.length} target(s) to ${outputDir}:`);
     for (const r of ok) {
-      console.log(`    ${chalk.green('✓')} ${r.name} → ${chalk.dim(r.filename)}`);
+      ui.bullet(`${r.name} → ${r.filename}`, 'success');
     }
   }
 
   if (failed.length > 0) {
-    console.log(chalk.bold(`\n  Failed (${failed.length}):\n`));
+    ui.section(`Failed (${failed.length}):`);
     for (const r of failed) {
-      console.log(`    ${chalk.red('✗')} ${r.name}: ${r.error}`);
+      ui.bullet(`${r.name}: ${r.error}`, 'error');
     }
   }
 
@@ -33,22 +33,17 @@ export function renderRestoreSummary(results: RestoreResult[]): void {
   const groups = { created: 0, updated: 0, skipped: 0, failed: 0 };
   for (const r of results) groups[r.action]++;
 
-  console.log(chalk.bold('\n  Restore results:\n'));
+  ui.section('Restore results:');
   for (const r of results) {
-    const icon =
-      r.action === 'failed'
-        ? chalk.red('✗')
-        : r.action === 'skipped'
-          ? chalk.yellow('○')
-          : chalk.green('✓');
+    const kind = r.action === 'failed' ? 'error' : r.action === 'skipped' ? 'skip' : 'success';
     const suffix = r.error ? `: ${r.error}` : '';
-    console.log(`    ${icon} ${r.name} — ${r.action}${suffix}`);
+    ui.bullet(`${r.name} — ${r.action}${suffix}`, kind);
   }
 
   const parts: string[] = [];
   if (groups.created) parts.push(`${groups.created} created`);
   if (groups.updated) parts.push(`${groups.updated} updated`);
   if (groups.skipped) parts.push(`${groups.skipped} skipped`);
-  if (groups.failed) parts.push(chalk.red(`${groups.failed} failed`));
+  if (groups.failed) parts.push(`${groups.failed} failed`);
   console.log(`\n  Total: ${parts.join(', ')}\n`);
 }
diff --git a/src/cli/renderer/dlp.ts b/src/cli/renderer/dlp.ts
@@ -1,10 +1,12 @@
 import chalk from 'chalk';
 import { dump as yamlDump } from 'js-yaml';
 import { formatOutput, type OutputFormat } from './common.js';
+import { ui } from './ui.js';
 
 // biome-ignore lint/suspicious/noExplicitAny: renderer accepts arbitrary SDK payloads
 type Any = any;
 
+/** Status → inline color (value coloring within composed list lines). */
 function statusColor(status: string | undefined): string {
   switch (status) {
     case 'active':
@@ -64,18 +66,18 @@ function emitList(
     return;
   }
   if (content.length === 0) {
-    console.log(chalk.dim(`  No ${header.toLowerCase()} found.\n`));
+    ui.emptyList(header.toLowerCase());
     return;
   }
   if (fmt === 'pretty') {
-    console.log(chalk.bold(`\n  ${header}:\n`));
+    ui.section(`${header}:`);
     for (const item of content) console.log(prettyLine(item));
     const meta = pageMeta(page, content.length);
-    console.log(
-      chalk.dim(
-        `\n  page=${meta.number} size=${meta.size} returned=${meta.returned} total=${meta.total ?? '?'}\n`,
-      ),
+    console.log();
+    ui.dim(
+      `page=${meta.number} size=${meta.size} returned=${meta.returned} total=${meta.total ?? '?'}`,
     );
+    console.log();
     return;
   }
   console.log(formatOutput(rows, columns, fmt));
@@ -110,12 +112,13 @@ function emitDetail(
     return;
   }
   if (fmt === 'pretty') {
-    console.log(chalk.bold(`\n  ${title}:\n`));
-    const w = Math.max(...fields.map((f) => f.label.length));
+    ui.section(`${title}:`);
+    const pairs: Array<[string, unknown]> = [];
     for (const f of fields) {
       if (f.value === undefined || f.value === null || f.value === '') continue;
-      console.log(`    ${f.label.padEnd(w)}  ${f.value}`);
+      pairs.push([f.label, f.value]);
     }
+    ui.keyValue(pairs);
     console.log();
     return;
   }
@@ -135,7 +138,7 @@ function ackObject(verb: string, item: Any): Record<string, unknown> {
   return out;
 }
 
-function emitAck(verb: string, color: (s: string) => string, item: Any, fmt: OutputFormat): void {
+function emitAck(verb: string, item: Any, fmt: OutputFormat): void {
   if (fmt === 'json' || fmt === 'yaml') {
     emitStructured(ackObject(verb, item), fmt);
     return;
@@ -146,12 +149,12 @@ function emitAck(verb: string, color: (s: string) => string, item: Any, fmt: Out
     console.log(formatOutput([row], cols, fmt));
     return;
   }
-  const ver = item?.version != null ? chalk.dim(` v${item.version}`) : '';
-  console.log(`  ${color(verb)} ${chalk.dim(item?.id ?? '')}  ${item?.name ?? ''}${ver}`);
+  const ver = item?.version != null ? ` v${item.version}` : '';
+  ui.success(`${verb} ${item?.id ?? ''}  ${item?.name ?? ''}${ver}`);
 }
 
-function emitIdAck(verb: string, color: (s: string) => string, id: string): void {
-  console.log(`  ${color(verb)} ${chalk.dim(id)}`);
+function emitIdAck(verb: string, id: string): void {
+  ui.success(`${verb} ${id}`);
 }
 
 // ---------------------------------------------------------------------------
@@ -213,7 +216,7 @@ export const dlpFilteringProfiles = {
     );
   },
   renderReplaced(item: Any, fmt: OutputFormat) {
-    emitAck('replaced', chalk.green, item, fmt);
+    emitAck('replaced', item, fmt);
   },
 };
 
@@ -281,16 +284,16 @@ export const dlpPatterns = {
     );
   },
   renderCreated(item: Any, fmt: OutputFormat) {
-    emitAck('created', chalk.green, item, fmt);
+    emitAck('created', item, fmt);
   },
   renderReplaced(item: Any, fmt: OutputFormat) {
-    emitAck('replaced', chalk.green, item, fmt);
+    emitAck('replaced', item, fmt);
   },
   renderPatched(item: Any, fmt: OutputFormat) {
-    emitAck('patched', chalk.green, item, fmt);
+    emitAck('patched', item, fmt);
   },
   renderArchived(id: string) {
-    emitIdAck('archived', chalk.yellow, id);
+    emitIdAck('archived', id);
   },
 };
 
@@ -345,13 +348,13 @@ export const dlpProfiles = {
     );
   },
   renderCreated(item: Any, fmt: OutputFormat) {
-    emitAck('created', chalk.green, item, fmt);
+    emitAck('created', item, fmt);
   },
   renderReplaced(item: Any, fmt: OutputFormat) {
-    emitAck('replaced', chalk.green, item, fmt);
+    emitAck('replaced', item, fmt);
   },
   renderPatched(item: Any, fmt: OutputFormat) {
-    emitAck('patched', chalk.green, item, fmt);
+    emitAck('patched', item, fmt);
   },
 };
 
@@ -409,18 +412,18 @@ export const dlpDictionaries = {
     );
   },
   renderCreated(item: Any, fmt: OutputFormat) {
-    emitAck('created', chalk.green, item, fmt);
+    emitAck('created', item, fmt);
   },
   renderReplaced(item: Any, fmt: OutputFormat) {
-    emitAck('replaced', chalk.green, item, fmt);
+    emitAck('replaced', item, fmt);
   },
   renderPatched(item: Any, fmt: OutputFormat) {
-    emitAck('patched', chalk.green, item, fmt);
+    emitAck('patched', item, fmt);
   },
   renderReplaced204Fallback(id: string) {
-    console.log(`  ${chalk.green('replaced')} ${chalk.dim(id)} (state not echoed by region)`);
+    ui.success(`replaced ${id} (state not echoed by region)`);
   },
   renderDeleted(id: string) {
-    emitIdAck('deleted', chalk.yellow, id);
+    emitIdAck('deleted', id);
   },
 };
diff --git a/src/cli/renderer/eval.ts b/src/cli/renderer/eval.ts
@@ -1,5 +1,6 @@
 import chalk from 'chalk';
 import type { EfficacyMetrics, TestResult } from '../../core/types.js';
+import { ui } from './ui.js';
 
 export interface EvalOutput {
   profile: string;
@@ -56,43 +57,45 @@ export function buildEvalOutput(
 }
 
 export function renderEvalTerminal(output: EvalOutput): void {
+  // Inline value coloring: coverage thresholds have no ui primitive.
   const coverageColor =
     output.metrics.coverage >= 0.9
       ? chalk.green
       : output.metrics.coverage >= 0.7
         ? chalk.yellow
         : chalk.red;
 
-  console.log(chalk.bold('\n  Eval Results'));
-  console.log(chalk.dim('  ─────────────────────────'));
-  console.log(`  Profile: ${chalk.white(output.profile)}`);
-  console.log(`  Topic:   ${chalk.white(output.topic)}`);
-  console.log(`  Intent:  ${chalk.white(output.intent)}`);
+  ui.header('Eval Results');
+  ui.keyValue([
+    ['Profile', output.profile],
+    ['Topic', output.topic],
+    ['Intent', output.intent],
+  ]);
 
-  console.log(chalk.bold('\n  Metrics:'));
-  console.log(`    Coverage:  ${coverageColor(`${(output.metrics.coverage * 100).toFixed(1)}%`)}`);
-  console.log(`    TPR:       ${(output.metrics.tpr * 100).toFixed(1)}%`);
-  console.log(`    TNR:       ${(output.metrics.tnr * 100).toFixed(1)}%`);
-  console.log(`    F1:        ${output.metrics.f1.toFixed(3)}`);
-  console.log(
-    chalk.dim(
-      `    TP: ${output.metrics.tp}  TN: ${output.metrics.tn}  ` +
-        `FP: ${output.metrics.fp}  FN: ${output.metrics.fn}  ` +
-        `Total: ${output.metrics.total}`,
-    ),
+  ui.section('Metrics:');
+  ui.keyValue([
+    ['Coverage', coverageColor(`${(output.metrics.coverage * 100).toFixed(1)}%`)],
+    ['TPR', `${(output.metrics.tpr * 100).toFixed(1)}%`],
+    ['TNR', `${(output.metrics.tnr * 100).toFixed(1)}%`],
+    ['F1', output.metrics.f1.toFixed(3)],
+  ]);
+  ui.dim(
+    `TP: ${output.metrics.tp}  TN: ${output.metrics.tn}  ` +
+      `FP: ${output.metrics.fp}  FN: ${output.metrics.fn}  ` +
+      `Total: ${output.metrics.total}`,
   );
 
   if (output.false_positives.length > 0) {
-    console.log(chalk.bold.yellow('\n  False Positives:'));
+    ui.section('False Positives:');
     for (const fp of output.false_positives) {
-      console.log(`    ${chalk.yellow('●')} ${fp.prompt}`);
+      ui.bullet(fp.prompt, 'flag');
     }
   }
 
   if (output.false_negatives.length > 0) {
-    console.log(chalk.bold.red('\n  False Negatives:'));
+    ui.section('False Negatives:');
     for (const fn of output.false_negatives) {
-      console.log(`    ${chalk.red('●')} ${fn.prompt}`);
+      ui.bullet(fn.prompt, 'flag');
     }
   }