feat(realism-ui): human-readable content_class labels

Single source of truth in decnet_web/src/realism/labels.ts: maps each
ContentClass enum value to a friendly display name ("Note",
"Cron Log", "Canary · AWS Credentials", …). Used by RealismConfig
(weight tables + class filter dropdown) and SyntheticFiles (table row
+ drawer detail).

Canary classes get a subtle amber accent so the dashboard's read of
"this row is callback-bearing" doesn't depend on prefix-spotting in
mono text. Raw enum value still appears in dim mono next to the label
so an operator copy/pasting from logs or grepping the codebase still
finds it.

No backend change: the wire shape is still the snake_case enum; the
beautification is render-time only.
This commit is contained in:
2026-04-27 18:04:33 -04:00
parent 56a88d7bd4
commit 2950fc216e
3 changed files with 66 additions and 5 deletions

View File

@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
import api from '../../utils/api';
import { useToast } from '../Toasts/useToast';
import { Sliders, Save, RotateCcw } from '../../icons';
import { contentClassLabel, isCanaryClass } from '../../realism/labels';
// ─── Types ───────────────────────────────────────────────────────────────────
@@ -70,8 +71,15 @@ const WeightTable: React.FC<{
<tbody>
{weights.map((w, i) => (
<tr key={w.content_class} style={{ borderBottom: '1px solid rgba(255,255,255,0.04)' }}>
<td className="mono" style={{ padding: '6px 12px', width: '40%' }}>
{w.content_class}
<td style={{ padding: '6px 12px', width: '45%' }}>
<span style={{ color: isCanaryClass(w.content_class) ? '#ffaa66' : 'inherit' }}>
{contentClassLabel(w.content_class)}
</span>
<span className="mono" style={{
marginLeft: 8, fontSize: '0.7rem', color: 'var(--dim-color)',
}}>
{w.content_class}
</span>
</td>
<td style={{ padding: '6px 12px', width: '30%' }}>
<input

View File

@@ -3,6 +3,7 @@ import api from '../../utils/api';
import { useEscapeKey } from '../../hooks/useEscapeKey';
import { useFocusTrap } from '../../hooks/useFocusTrap';
import { X, FileText } from '../../icons';
import { contentClassLabel, isCanaryClass } from '../../realism/labels';
// ─── Types ───────────────────────────────────────────────────────────────────
@@ -142,7 +143,15 @@ const SyntheticFileDrawer: React.FC<DrawerProps> = ({ uuid, deckies, onClose })
<>
<div style={{ display: 'grid', gridTemplateColumns: '140px 1fr', rowGap: '6px', fontSize: '0.85rem', marginBottom: '16px' }}>
<div style={{ color: 'var(--dim-color)' }}>PERSONA</div><div>{row.persona}</div>
<div style={{ color: 'var(--dim-color)' }}>CONTENT CLASS</div><div className="mono">{row.content_class}</div>
<div style={{ color: 'var(--dim-color)' }}>CONTENT CLASS</div>
<div>
<span style={{ color: isCanaryClass(row.content_class) ? '#ffaa66' : 'inherit' }}>
{contentClassLabel(row.content_class)}
</span>
<span className="mono" style={{ marginLeft: 8, fontSize: '0.75rem', color: 'var(--dim-color)' }}>
{row.content_class}
</span>
</div>
<div style={{ color: 'var(--dim-color)' }}>EDIT COUNT</div><div>{row.edit_count}</div>
<div style={{ color: 'var(--dim-color)' }}>CREATED</div><div>{fmt(row.created_at)}</div>
<div style={{ color: 'var(--dim-color)' }}>LAST MODIFIED</div><div>{fmt(row.last_modified)}</div>
@@ -282,7 +291,7 @@ const SyntheticFiles: React.FC = () => {
>
<option value="">All</option>
{CONTENT_CLASSES.map((c) => (
<option key={c} value={c}>{c}</option>
<option key={c} value={c}>{contentClassLabel(c)}</option>
))}
</select>
</label>
@@ -322,7 +331,12 @@ const SyntheticFiles: React.FC = () => {
<td style={{ padding: '8px 12px' }}>{deckyLabel(r.decky_uuid, deckies)}</td>
<td className="mono" style={{ padding: '8px 12px', wordBreak: 'break-all' }}>{r.path}</td>
<td style={{ padding: '8px 12px' }}>{r.persona}</td>
<td className="mono" style={{ padding: '8px 12px' }}>{r.content_class}</td>
<td style={{
padding: '8px 12px',
color: isCanaryClass(r.content_class) ? '#ffaa66' : 'inherit',
}}>
{contentClassLabel(r.content_class)}
</td>
<td style={{ padding: '8px 12px' }}>{fmt(r.last_modified)}</td>
<td style={{ padding: '8px 12px' }}>{r.edit_count}</td>
<td className="mono" style={{ padding: '8px 12px', opacity: 0.7 }}>{r.content_hash.slice(0, 12)}</td>

View File

@@ -0,0 +1,39 @@
/* Human-readable labels for realism content classes.
*
* Source of truth for the enum values is decnet/realism/taxonomy.py.
* This module is the only place display text lives — every UI surface
* that renders a content_class should call ``contentClassLabel(value)``
* so the label vocabulary stays consistent across the dashboard. */
const LABELS: Record<string, string> = {
// User classes — files written by personas during work hours.
note: 'Note',
todo: 'TODO List',
draft: 'Draft Document',
script: 'Shell / Python Script',
// System classes — plausible OS-side filler.
log_cron: 'Cron Log',
log_daemon: 'Daemon Log',
cache_tmp: 'Cache / Temp File',
// Canary classes — callback-bearing artifacts.
canary_aws_creds: 'Canary · AWS Credentials',
canary_env_file: 'Canary · .env File',
canary_git_config: 'Canary · git config',
canary_ssh_key: 'Canary · SSH Private Key',
canary_honeydoc: 'Canary · HTML Honeydoc',
canary_honeydoc_docx: 'Canary · DOCX Honeydoc',
canary_honeydoc_pdf: 'Canary · PDF Honeydoc',
canary_mysql_dump: 'Canary · MySQL Dump',
};
export function contentClassLabel(value: string): string {
return LABELS[value] ?? value;
}
/* Returns true when the value is a canary class. Used to style canary
* rows differently in tables (subtle red accent, etc). */
export function isCanaryClass(value: string): boolean {
return value.startsWith('canary_');
}