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.

decnet_web/src/components/RealismConfig/RealismConfig.tsx

@@ -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

decnet_web/src/components/SyntheticFiles/SyntheticFiles.tsx

@@ -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>