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:
@@ -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
|
||||
|
||||
@@ -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>
|
||||
|
||||
39
decnet_web/src/realism/labels.ts
Normal file
39
decnet_web/src/realism/labels.ts
Normal 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_');
|
||||
}
|
||||
Reference in New Issue
Block a user