claude-bot/EJClaw
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refine dashboard settings and inbox UX

Browse Source
This commit is contained in:
ejclaw
2026-05-02 04:32:16 +09:00
parent 443154d2e5
commit 896cc59fe1
9 changed files with 99 additions and 230 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
apps/dashboard/src/ServicePanel.test.ts
View File

@@ -85,22 +85,6 @@ const baseProps: ServicePanelProps = {
},
],
{
inbox: [
{
createdAt: '2026-04-28T04:10:00.000Z',
groupFolder: 'eyejokerdb',
groupKey: 'ci',
id: 'ci-1',
kind: 'ci-failure',
lastOccurredAt: '2026-04-28T04:12:00.000Z',
occurrences: 2,
occurredAt: '2026-04-28T04:10:00.000Z',
severity: 'error',
source: 'status-snapshot',
summary: 'CI failed',
title: 'CI failed',
},
],
operations: {
serviceRestarts: [
{
@@ -113,6 +97,13 @@ const baseProps: ServicePanelProps = {
},
],
},
tasks: {
active: 0,
completed: 0,
paused: 2,
total: 2,
watchers: { active: 0, completed: 0, paused: 2 },
},
},
),
serviceActionKey: null,

6
apps/dashboard/src/ServicePanel.tsx
View File

@@ -67,11 +67,7 @@ export function ServicePanel({
},
{ pendingTasks: 0, pendingMessageRooms: 0 },
);
const ciFailures = overview.inbox.reduce(
(count, item) =>
item.kind === 'ci-failure' ? count + item.occurrences : count,
0,
);
const ciFailures = overview.tasks.watchers.paused;
const healthLevel: HealthLevel =
down > 0 ? 'down' : stale > 0 || ciFailures > 0 ? 'stale' : 'ok';
const affectedServices = serviceLevels.filter((item) => item.level !== 'ok');

7
apps/dashboard/src/SettingsPanel.test.ts
View File

@@ -21,7 +21,8 @@ describe('SettingsPanel', () => {
const html = renderToStaticMarkup(createElement(SettingsPanel, baseProps));
expect(html).toContain('settings-panel');
expect(html).toContain('settings-hero');
expect(html).not.toContain('settings-hero');
expect(html).toContain('settings-sidebar');
expect(html).toContain('settings-nav');
expect(html).toContain(t.settings.nicknameLabel);
expect(html).toContain('value="Night Owl"');
@@ -41,7 +42,9 @@ describe('SettingsPanel', () => {
expect(html).toContain('aria-controls="settings-codex"');
expect(html).not.toContain('href="#settings-codex"');
expect(html).toContain('/goal');
expect(html).toContain('변경 적용');
expect(html).toContain('settings-apply-card');
expect(html).not.toContain('settings-apply-bar');
expect(html).toContain('저장 후 재시작');
expect(html).toContain('불러오는 중');
expect(html).toContain('Claude');
expect(html).toContain('계정');

41
apps/dashboard/src/SettingsPanel.tsx
View File

@@ -62,9 +62,11 @@ export function SettingsPanel({
}: SettingsPanelProps) {
return (
<div className="settings-panel">
<SettingsHero />
<div className="settings-layout">
<SettingsNav />
<aside className="settings-sidebar" aria-label="설정 탐색과 적용">
<SettingsNav />
<SettingsApplyCard onRestartStack={onRestartStack} />
</aside>
<main className="settings-content" aria-label="설정 항목">
<section className="settings-section" id="settings-general">
<SettingsSectionHeading
@@ -109,8 +111,6 @@ export function SettingsPanel({
</div>
</section>
<SettingsApplyBar onRestartStack={onRestartStack} />
<ModelSettings />
<MoaSettingsPanel />
@@ -134,26 +134,6 @@ export function SettingsPanel({
);
}
function SettingsHero() {
return (
<header className="settings-hero">
<div>
<span className="settings-kicker">Operations console</span>
<h2>설정</h2>
<p>
모델, MoA, Codex 실험 기능, 계정을 한 화면에서 조정합니다. 런타임에
반영되는 항목은 저장 후 한 번만 재시작하면 됩니다.
</p>
</div>
<div className="settings-hero-badges" aria-label="주요 설정">
<span>Codex /goal</span>
<span>MoA</span>
<span>Accounts</span>
</div>
</header>
);
}
function SettingsNav() {
const scrollToSection = (targetId: string) => {
document
@@ -197,16 +177,13 @@ function SettingsSectionHeading({
);
}
function SettingsApplyBar({ onRestartStack }: { onRestartStack: () => void }) {
function SettingsApplyCard({ onRestartStack }: { onRestartStack: () => void }) {
return (
<section className="settings-apply-bar" aria-label="변경 적용">
<section className="settings-apply-card" aria-label="변경 적용">
<div>
<span className="settings-kicker">Apply changes</span>
<strong>변경 적용</strong>
<small>
모델, MoA, Codex 실험 기능, 계정 변경은 저장 후 스택 재시작으로
적용됩니다.
</small>
<span className="settings-kicker">Apply</span>
<strong>저장 후 재시작</strong>
<small>모델, MoA, Codex, 계정 변경은 스택 재시작 후 반영됩니다.</small>
</div>
<button
className="settings-restart"

16
apps/dashboard/src/i18n.ts
View File

@@ -351,7 +351,7 @@ export const messages = {
heartbeat: '하트비트',
healthSignals: '운영 신호',
inbox: 'Inbox',
inboxQueue: 'Queue',
inboxQueue: '처리할 액션',
usage: '사용량',
usageWindow: '남음 / 속도',
rooms: '룸',
@@ -392,7 +392,7 @@ export const messages = {
},
},
inbox: {
empty: 'Inbox 없음.',
empty: '처리할 Inbox 액션 없음.',
cardsAria: 'Inbox 항목',
summary: 'Inbox 요약',
total: '전체',
@@ -609,7 +609,7 @@ export const messages = {
heartbeat: 'Heartbeat',
healthSignals: 'Signals',
inbox: 'Inbox',
inboxQueue: 'Queue',
inboxQueue: 'Action queue',
usage: 'Usage',
usageWindow: 'Remaining / speed',
rooms: 'Rooms',
@@ -650,7 +650,7 @@ export const messages = {
},
},
inbox: {
empty: 'No queued work.',
empty: 'No Inbox actions.',
cardsAria: 'Inbox items',
summary: 'Inbox summary',
total: 'Total',
@@ -867,7 +867,7 @@ export const messages = {
heartbeat: '心跳',
healthSignals: '运行信号',
inbox: '收件',
inboxQueue: '待处理',
inboxQueue: '待处理操作',
usage: '用量',
usageWindow: '剩余 / 速度',
rooms: '房间',
@@ -908,7 +908,7 @@ export const messages = {
},
},
inbox: {
empty: '暂无收件。',
empty: '暂无待处理收件操作。',
cardsAria: '收件项',
summary: '收件摘要',
total: '全部',
@@ -1127,7 +1127,7 @@ export const messages = {
heartbeat: 'ハートビート',
healthSignals: '運用シグナル',
inbox: '受信',
inboxQueue: '対応待ち',
inboxQueue: '対応アクション',
usage: '使用量',
usageWindow: '残量 / 速度',
rooms: 'ルーム',
@@ -1168,7 +1168,7 @@ export const messages = {
},
},
inbox: {
empty: '受信なし。',
empty: '対応する受信アクションはありません。',
cardsAria: '受信項目',
summary: '受信サマリー',
total: '全体',

125
apps/dashboard/src/styles.css
View File

@@ -628,65 +628,10 @@ button:disabled {
.settings-panel {
display: grid;
gap: 18px;
max-width: 1160px;
width: 100%;
}
.settings-hero {
position: relative;
overflow: hidden;
display: flex;
gap: 18px;
align-items: flex-end;
justify-content: space-between;
padding: 20px;
border: 1px solid rgba(214, 130, 88, 0.18);
border-radius: 18px;
background:
radial-gradient(
circle at 12% 0%,
rgba(214, 130, 88, 0.2),
transparent 28rem
),
linear-gradient(135deg, rgba(255, 255, 255, 0.055), transparent 52%),
var(--panel);
box-shadow: var(--card-shadow-strong);
}
.settings-hero::after {
content: '';
position: absolute;
right: -70px;
top: -90px;
width: 260px;
height: 260px;
border: 1px solid rgba(214, 130, 88, 0.2);
border-radius: 999px;
background: rgba(214, 130, 88, 0.04);
pointer-events: none;
}
.settings-hero > div {
position: relative;
z-index: 1;
}
.settings-hero h2 {
margin: 4px 0 6px;
font-size: clamp(26px, 4vw, 42px);
line-height: 0.95;
letter-spacing: -0.05em;
}
.settings-hero p {
max-width: 62ch;
margin: 0;
color: var(--muted);
font-size: 13px;
line-height: 1.7;
}
.settings-kicker {
color: var(--accent-strong);
font-size: 10px;
@@ -695,24 +640,6 @@ button:disabled {
text-transform: uppercase;
}
.settings-hero-badges {
display: flex;
gap: 6px;
flex-wrap: wrap;
justify-content: flex-end;
min-width: 220px;
}
.settings-hero-badges span {
padding: 6px 9px;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 999px;
background: rgba(255, 255, 255, 0.045);
color: var(--bg-ink);
font-size: 11px;
font-weight: 700;
}
.settings-layout {
display: grid;
grid-template-columns: 220px minmax(0, 1fr);
@@ -720,9 +647,14 @@ button:disabled {
align-items: start;
}
.settings-nav {
.settings-sidebar {
position: sticky;
top: 72px;
display: grid;
gap: 10px;
}
.settings-nav {
display: grid;
gap: 8px;
padding: 10px;
@@ -891,39 +823,34 @@ button:disabled {
background: rgba(255, 255, 255, 0.018);
}
.settings-apply-bar {
position: sticky;
top: 72px;
z-index: 5;
display: flex;
.settings-apply-card {
display: grid;
gap: 12px;
align-items: center;
justify-content: space-between;
padding: 14px 16px;
padding: 13px;
border: 1px solid rgba(214, 130, 88, 0.32);
border-radius: 16px;
background:
linear-gradient(135deg, rgba(214, 130, 88, 0.2), transparent 56%),
rgba(16, 20, 18, 0.96);
box-shadow: 0 14px 36px rgba(0, 0, 0, 0.28);
backdrop-filter: blur(16px);
linear-gradient(145deg, rgba(214, 130, 88, 0.16), transparent 62%),
rgba(19, 24, 22, 0.88);
box-shadow: var(--card-shadow);
}
.settings-apply-bar > div {
.settings-apply-card > div {
display: grid;
gap: 3px;
min-width: 0;
}
.settings-apply-bar strong {
.settings-apply-card strong {
color: var(--bg-ink);
font-size: 15px;
letter-spacing: -0.02em;
}
.settings-apply-bar small {
.settings-apply-card small {
color: var(--muted);
font-size: 11px;
line-height: 1.45;
}
.settings-row-inline {
@@ -1272,23 +1199,25 @@ button:disabled {
grid-template-columns: 1fr;
}
.settings-nav {
.settings-sidebar {
position: static;
}
.settings-nav {
grid-template-columns: repeat(5, minmax(120px, 1fr));
overflow-x: auto;
}
.settings-apply-card {
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
}
}
@media (max-width: 720px) {
.settings-hero,
.settings-apply-bar {
.settings-apply-card {
align-items: stretch;
flex-direction: column;
}
.settings-hero-badges {
justify-content: flex-start;
min-width: 0;
grid-template-columns: 1fr;
}
.settings-form-grid,

35
scripts/dashboard-ux.ts
View File

@@ -8,6 +8,7 @@ import { createServer, type ViteDevServer } from 'vite';
interface MockApiState {
codexFeatures: { goals: boolean };
codexFeatureUpdates: number;
ciWatcherFailures: number;
restartRequests: number;
}
@@ -110,6 +111,30 @@ async function main() {
},
);
await runScenario(
'inbox stays focused on actionable work',
browser,
baseUrl,
async (page, state) => {
state.ciWatcherFailures = 2;
await page.goto(new URL('/#/inbox', baseUrl).toString(), {
waitUntil: 'networkidle',
});
await assertVisible(page.locator('#inbox .empty-state'));
assert.equal(await page.getByText(/CI 실패|CI failure/).count(), 0);
assert.equal(
await page.getByRole('button', { name: 'Dismiss' }).count(),
0,
);
// This scenario protects the Inbox information architecture. The
// accessibility scan stays scoped to Settings, where this UX suite
// currently has stable interactive coverage.
},
);
console.log('dashboard:ux passed');
} finally {
await browser.close();
@@ -156,6 +181,7 @@ function createMockApiState(): MockApiState {
return {
codexFeatures: { goals: false },
codexFeatureUpdates: 0,
ciWatcherFailures: 0,
restartRequests: 0,
};
}
@@ -165,9 +191,10 @@ async function openSettings(page: Page, baseUrl: string) {
waitUntil: 'networkidle',
});
await assertVisible(page.locator('.settings-panel'));
await assertVisible(page.locator('.settings-hero'));
assert.equal(await page.locator('.settings-hero').count(), 0);
await assertVisible(page.locator('.settings-sidebar'));
await assertVisible(page.locator('.settings-nav'));
await assertVisible(page.locator('.settings-apply-bar'));
await assertVisible(page.locator('.settings-apply-card'));
assert.equal(
await page.getByRole('button', { name: '스택 재시작' }).count(),
1,
@@ -209,9 +236,9 @@ async function handleMockApi(route: Route, state: MockApiState) {
tasks: {
total: 0,
active: 0,
paused: 0,
paused: state.ciWatcherFailures,
completed: 0,
watchers: { active: 0, paused: 0, completed: 0 },
watchers: { active: 0, paused: state.ciWatcherFailures, completed: 0 },
},
usage: { rows: [], fetchedAt: null },
operations: { serviceRestarts: [] },

24
src/web-dashboard-data.test.ts
View File

@@ -761,7 +761,7 @@ describe('web dashboard room activity data', () => {
});
describe('web dashboard inbox data', () => {
it('builds typed inbox items from pending rooms, paired tasks, and CI failures', () => {
it('builds typed inbox items from pending rooms and paired tasks only', () => {
const snapshots: StatusSnapshot[] = [
{
serviceId: 'codex-main',
@@ -840,7 +840,6 @@ describe('web dashboard inbox data', () => {
});
expect(overview.inbox.map((item) => item.kind)).toEqual([
'ci-failure',
'approval',
'reviewer-request',
'pending-room',
@@ -866,18 +865,17 @@ describe('web dashboard inbox data', () => {
occurredAt: '2026-04-26T05:03:00.000Z',
}),
);
const ciFailure = overview.inbox.find((item) => item.kind === 'ci-failure');
expect(ciFailure).toMatchObject({
id: 'ci:ci-2',
severity: 'error',
occurrences: 2,
source: 'scheduled-task',
taskId: 'ci-2',
lastOccurredAt: '2026-04-26T05:07:00.000Z',
});
expect(ciFailure?.summary).toContain('BOT_TOKEN=<redacted>');
expect(ciFailure?.summary).not.toContain('plain-secret-value');
expect(overview.inbox.some((item) => item.kind === 'ci-failure')).toBe(
false,
);
expect(overview.inbox.some((item) => item.taskId === 'ci-1')).toBe(false);
expect(overview.inbox.some((item) => item.taskId === 'ci-2')).toBe(false);
expect(overview.inbox.some((item) => item.taskId === 'cron-1')).toBe(false);
expect(overview.inbox.some((item) => item.taskId === 'done-1')).toBe(false);
expect(overview.tasks.watchers).toEqual({
active: 1,
paused: 1,
completed: 0,
});
});
});

52
src/web-dashboard-data.ts
View File

@@ -183,10 +183,6 @@ function buildPromptPreview(prompt: string): string {
return truncateText(redactSensitiveText(prompt).replace(/\s+/g, ' ').trim());
}
function buildInboxPreview(value: string): string {
return truncateText(redactSensitiveText(value).replace(/\s+/g, ' ').trim());
}
function buildRoomBody(value: string): string {
return redactSensitiveText(value).trim();
}
@@ -254,14 +250,6 @@ function normalizeStructuredVisibleContent(value: string): {
return splitLegacyImageTags(value);
}
function stableHash(value: string): string {
let hash = 0;
for (let index = 0; index < value.length; index += 1) {
hash = (hash * 31 + value.charCodeAt(index)) | 0;
}
return Math.abs(hash).toString(36);
}
function collectUsageRows(snapshots: StatusSnapshot[]): UsageRowSnapshot[] {
const rows: UsageRowSnapshot[] = [];
const seen = new Set<string>();
@@ -282,21 +270,6 @@ function collectUsageRows(snapshots: StatusSnapshot[]): UsageRowSnapshot[] {
return rows;
}
function failedTaskResult(task: ScheduledTask): string | null {
if (!task.last_result) return null;
const normalized = task.last_result.toLowerCase();
if (
normalized.includes('fail') ||
normalized.includes('error') ||
normalized.includes('timeout') ||
normalized.includes('cancel') ||
normalized.includes('reject')
) {
return buildInboxPreview(task.last_result);
}
return null;
}
function pairedTaskInboxKind(
status: PairedTask['status'],
): InboxItemKind | null {
@@ -383,31 +356,6 @@ function collectInboxItems(args: {
});
}
for (const task of args.tasks) {
if (!isWatchCiTask(task)) continue;
const result = failedTaskResult(task);
if (!result) continue;
items.push({
id: `ci:${task.id}`,
groupKey: `ci:${stableHash(result.toLowerCase())}`,
kind: 'ci-failure',
severity: task.status === 'paused' ? 'error' : 'warn',
title: 'CI watcher failed',
summary: result,
occurredAt: task.last_run ?? task.created_at,
lastOccurredAt: task.last_run ?? task.created_at,
createdAt: args.createdAt,
occurrences: 1,
source: 'scheduled-task',
roomJid: task.chat_jid,
groupFolder: task.group_folder,
serviceId: task.agent_type ?? undefined,
taskId: task.id,
taskStatus: task.status,
});
}
const severityRank: Record<InboxItemSeverity, number> = {
error: 0,
warn: 1,