refine dashboard settings and inbox UX

2026-05-02 14:22:49 +09:00
parent 7f77327041
commit fb32726ac0
9 changed files with 99 additions and 230 deletions
--- a/apps/dashboard/src/ServicePanel.test.ts
+++ b/apps/dashboard/src/ServicePanel.test.ts
@@ -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,
--- a/apps/dashboard/src/ServicePanel.tsx
+++ b/apps/dashboard/src/ServicePanel.tsx
@@ -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');
--- a/apps/dashboard/src/SettingsPanel.test.ts
+++ b/apps/dashboard/src/SettingsPanel.test.ts
@@ -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('계정');
--- a/apps/dashboard/src/SettingsPanel.tsx
+++ b/apps/dashboard/src/SettingsPanel.tsx
@@ -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"
--- a/apps/dashboard/src/i18n.ts
+++ b/apps/dashboard/src/i18n.ts
@@ -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: '全体',
--- a/apps/dashboard/src/styles.css
+++ b/apps/dashboard/src/styles.css
@@ -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,