fix(web): canary header matches PersonaGeneration / DeckyFleet

Switches the page header to the standard .fleet-root .page-header /
.page-title-group / h1 / .page-sub / .actions pattern used by every
other top-level page. Drops the redundant AUTOMATION supertitle (the
sidebar group already labels that) and the inline Target icon next
to the title. Action buttons use the project's btn / btn violet
classes for visual parity with ADD PERSONA / BULK UPLOAD.
This commit is contained in:
2026-04-27 13:29:37 -04:00
parent 11b0a99914
commit fcdb32908d

View File

@@ -1,6 +1,6 @@
import React, { useEffect, useMemo, useRef, useState } from 'react'; import React, { useEffect, useMemo, useRef, useState } from 'react';
import { import {
Target, Plus, Upload, X, AlertTriangle, Search, Plus, Upload, X, AlertTriangle, Search,
} from '../icons'; } from '../icons';
import api from '../utils/api'; import api from '../utils/api';
import { useEscapeKey } from '../hooks/useEscapeKey'; import { useEscapeKey } from '../hooks/useEscapeKey';
@@ -448,22 +448,20 @@ const CanaryTokens: React.FC = () => {
}; };
return ( return (
<div style={{ padding: '24px', color: 'var(--text-color)' }}> <div className="fleet-root canary-tokens-root" style={{ padding: '24px', color: 'var(--text-color)' }}>
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '24px' }}> <div className="page-header">
<div> <div className="page-title-group">
<div style={{ fontSize: '0.7rem', color: 'var(--dim-color)', letterSpacing: '0.1em' }}>AUTOMATION</div> <h1>CANARY TOKENS</h1>
<div style={{ fontSize: '1.5rem', fontWeight: 'bold', display: 'flex', alignItems: 'center', gap: '10px' }}> <span className="page-sub">
<Target size={22} /> CANARY TOKENS {tokens.length} TOKEN{tokens.length === 1 ? '' : 'S'} · {counts.planted} PLANTED · {counts.hits} TOTAL HIT{counts.hits === 1 ? '' : 'S'} · {blobs.length} UPLOADED BLOB{blobs.length === 1 ? '' : 'S'}
</div> </span>
</div> </div>
<div style={{ display: 'flex', gap: '8px' }}> <div className="actions">
<button onClick={() => setShowUpload(true)} style={BTN_GHOST}> <button className="btn" onClick={() => setShowUpload(true)}>
<Upload size={14} style={{ marginRight: '6px', verticalAlign: 'middle' }} /> <Upload size={12} /> UPLOAD ARTIFACT
UPLOAD ARTIFACT
</button> </button>
<button onClick={() => setShowCreate(true)} style={BTN_PRIMARY} title="Alt+C"> <button className="btn violet" onClick={() => setShowCreate(true)} title="Alt+C">
<Plus size={14} style={{ marginRight: '6px', verticalAlign: 'middle' }} /> <Plus size={12} /> NEW TOKEN
NEW TOKEN
</button> </button>
</div> </div>
</div> </div>