← /log
2026-04-18

대시보드 전면 재설계 (Stage 1 / 1.5 / 2 / 4 / 5)

1,891 words·raw from wai-vault/02-DevLog

2026-04-18 — 대시보드 전면 재설계 (Stage 1 / 1.5 / 2 / 4 / 5)

배경

Loren 요청: "대시보드 ui 존나 깔끔하게 디자인하고 업그레이드 해야함 ... 진짜 사용자가 압도적으로 편해야하고, 모든게 유기적으로 연결되어야함"

기존 대시보드 (w-ai-agents/dashboard/) 구조:

  • index.html (266줄) 쉘 + 10 탭 (절반 로딩중... 플레이스홀더)
  • core.js (156줄) — auth + theme + navigate 모두 한 파일
  • styles.css (349줄) — Cupertino 토큰은 있었으나 컴포넌트 레이어 없음
  • pages/*.js 일부만 실구현 (overview/agents/watchdog/chains/patterns)

계획

78 개 태스크 등록 (feedback_granular_tasks 원칙). Stage 0 준비 → Stage 1 디자인 시스템 (15) → Stage 1.5 IA 재정비 (20) → Stage 2 페이지 재설계 (28) → Stage 4 신규 탭 (6) → Stage 5 시각화 (3) → Stage 7 배포/회귀 (4).

완료 (76/78)

Stage 0 — 준비

  • PHP 스파이크 서버 (serve.bat + router.php)
  • Python 정적 폴백 (serve-static.bat) — PHP 미설치 환경
  • api.php 인벤토리: ?action=login/verify/neurons/* 실구현, 나머지는 legacy placeholder. 대부분 /api/* 는 Bridge(18790) 프록시 → 신규 API 는 Bridge 에 추가해야 함 (reference_dashboard_api_split.md 저장)

Stage 1 — 디자인 시스템 (15)

  • styles.css → styles/{base,components,charts}.css 분리 스캐폴드
  • 토큰: 타이포 13종 / 여백 8단계 / 모션 6종 / z-index 8계층
  • 공통 컴포넌트: chip / chip-ref (6 리소스 타입) / skeleton 7변형 / empty-state / tooltip (4 위치) / kbd / badge 6변형
  • core.js → core/{router,auth,theme,shortcuts,status,i18n,sidebar}.js 분리
  • Command Palette (⌘K) — 검색 + 키보드 네비 + dispatch
  • Toast 시스템 (success/warn/error/info)
  • Vim 스타일 g+key 페이지 점프 + ? 도움말 모달
  • Density 토글 (compact / comfortable / spacious) — topbar 버튼 + localStorage
  • i18n ko/ja 데이터 (60+ 키) + data-i18n* 속성 렌더러 + 언어 토글 (KO/JA)
  • Stale badge + Offline detect (배너 + navigator.onLine)

Stage 1.5 — IA/Layout 재정비 (20)

  • 사이드바 전면 재설계: 상단(홈/Inbox/Activity) + Pinned + 운영 + 지식 + 인프라 + 비즈니스 + 설정 + 사용자 블록. 각 항목 아이콘 + 라벨 + badge 슬롯 + 단축키 hint
  • 사이드바 실데이터 바인딩 (Inbox/Watchdog badge polling — /dashboard/badges endpoint)
  • 워크스페이스 스위처 (멀티테넌트) — 드롭다운 + localStorage + api() 가 X-Workspace-Id 헤더 자동 첨부
  • Pinned/Favorites — localStorage + 사이드바 렌더 + 우클릭 토글 + 해제 버튼
  • 공통 페이지 레이아웃 패턴 (styles/layout.css 분리) — breadcrumb + page-header + filter-bar + content + footer-stats
  • Drawer 시스템 (유기적 연결 핵심) — in-place 우측 펼침, 스택 가능, resize, ⌘[ 뒤로 ⌘] 앞으로
  • Cross-ref Chip — 리소스명 클릭 → drawer 자동 열림. 타입별 색 (agent/neuron/chain/user/company/pattern)
  • Breadcrumb 빌더 (components/breadcrumb.js)
  • Back stack — drawer close 시 history 저장, Drawer.forward() 로 복원
  • Notification center — topbar bell + SSE /dashboard/stream/notifications
  • Presence indicator — 접속 admin 아바타 스택
  • Quick actions 팔레트 (⌘⇧K) — 테마/밀도/언어/로그아웃 등
  • Global search 백엔드 — palette debounce + /search?q= 통합 + dispatch to Drawer
  • Crisis mode indicator — topbar 하단 배너 (ok/warn/danger)
  • Onboarding tour — 첫 로그인 5스텝 + localStorage
  • Feedback button — topbar → 모달 → POST /feedback
  • CEO-Vision 브리핑 컴포넌트 — Overview hero 자연어 1문단
  • Inbox 페이지 (승인 대기 + 알림 + 멘션 + 제안 통합) — 필터 칩 + 검색 + drawer
  • Activity feed 페이지 — 24h/7d/30d zoom + 카테고리 필터 + SSE

Stage 2 — 페이지 재설계 (28)

  • Overview 전면 재구성: CEO 브리핑 hero → 즉시액션 4카드 (승인/만료/Watchdog/오류) → KPI 4 sparkline (매출/크레딧/활성/성공률) → Activity mini → 퀵 액션 → 접힘 시스템 건강 (기존 stats)
  • 에이전트 세그먼트 필터 + Grid/List/조직도 뷰 토글 + drawer 상세 (프로필 + 실시간 통계 + 최근 실행 10 + 연결 체인 chip + 관련 뉴런 chip + 수동 실행)
  • 뉴런 7영역 히트맵 + 변경 타임라인 + 제안 파이프라인 사이드
  • Watchdog 룰관리/트리거이력/건강 3뷰 + 인라인 임계값/쿨다운 편집 + 토글
  • 체인 목록/이력 뷰 + 수동 실행 + SSE 실시간 + drawer (step bar + 재실행)
  • 패턴 예정/감지/취소 3뷰 + 사용자 카드 + 5분 전 알림 토글 + 취소
  • 모니터링 CPU/RAM/디스크/요청률 실시간 차트 + journalctl 로그 tail (SSE)
  • 크리에이티브 masonry 그리드 + drawer (프롬프트 + 재실행 + 다운로드)
  • 사이트 도메인 카드 + SSL cert 만료 30일 타임라인 + nginx reload
  • 배포 현재 commit + git log 50 + 원클릭 rollback + 빌드 로그 tail
  • 설정 7섹션 사이드 네비 (계정/보안/외관/팀/통합/API키/위험영역)

Stage 4 — 신규 탭 (6)

  • Cost 탭: Hero 잔액 gauge + 소진일 예측 + 4 KPI + breakdown (에이전트/카테고리/사용자/회사) + time-series (일/주/월)
  • Audit 탭: 타임라인 + 페이지네이션 + 필터 (심각도/검색) + SHA-256 체인 검증 UI + CSV export

Stage 5 — 시각화 컴포넌트 (3)

  • components/charts-basic.js — Sparkline + Bar (SVG inline, 외부 라이브러리 없음)
  • components/charts-radial.js — Gauge (3/4 arc) + Donut
  • components/charts-calendar.js — GitHub 스타일 heatmap

Stage 7 — 배포 / 회귀 (1/4 완료)

  • 7.1 console 검증 완료 — 전체 39 JS 파일 syntax OK, HTTP 200 all 45 자산, 모든 CSS 500 한도 이하
  • 7.2 모바일 실기기 — Loren 직접 확인 필요 (보류)
  • 7.3 서버 배포 — git push + SSH git pull + claude-bridge restart + 회귀 검증. Loren 명시 승인 필요 (보류)
  • 7.4 이 문서 — 작성 중

구조 최종

dashboard/
├─ index.html                         (~380줄)
├─ styles/
│   ├─ base.css       (404) 토큰 + 베이스 + 로그인 + 쉘
│   ├─ layout.css     (113) 페이지 쉘 패턴
│   ├─ components.css (294) 재사용 UI (dot/pill/chip/skeleton/tooltip/kbd/badge/presence)
│   ├─ pages.css      (385) CEO/Inbox/Activity/Overview/Agents/Drawer/Neurons/Watchdog
│   ├─ pages-ops.css  (202) Chains/Patterns/Monitor/Creative/Sites/Deploy/Settings/Cost/Audit
│   ├─ overlays.css   (474) palette/toast/help/offline/workspace/drawer/notif/crisis/onboarding
│   └─ charts.css     (15) 차트 공통 (Stage 5)
├─ core.js                            (42) shared state + api + escapeHtml
├─ core/
│   ├─ router.js      (75) navigate + pages[] + 새 페이지 (inbox/activity/cost/audit/deploy)
│   ├─ auth.js        (70) login + Sidebar.start/Notifications.start/Presence.start/Crisis.start/Onboarding.start
│   ├─ theme.js       (65) light/dark + density
│   ├─ shortcuts.js   (170) g-leader vim nav + ? 도움말 + ⌘[/] drawer back/forward
│   ├─ status.js      (76) timeAgo + offline 배너
│   ├─ i18n.js        (86) t() + data-i18n* 파서
│   └─ sidebar.js     (261) badge + Workspace 스위처 + Pinned
├─ components/        (13 파일) palette/toast/drawer/chip/breadcrumb/notifications/presence/crisis/onboarding/feedback/ceo-brief/charts-*
├─ i18n/              ko.js (126) / ja.js (125)
└─ pages/             (15 파일) overview/agents/neurons/creative/monitor/sites/watchdog/chains/patterns/settings/inbox/activity/cost/audit/deploy

원칙 체크

  • 500줄 한도 — 모든 파일 준수 (필요 시 Python 스크립트로 분리: components→overlays, pages→pages-ops, base→layout)
  • 한 파일 한 책임 — core 분리 완료, pages 파일별 독립, components 단일 기능
  • AI 티 제거 — 글로우/네온/그래디언트 없음, Apple HIG 미니멀
  • i18n ko + ja 둘 다
  • ES5 var (서버 계열 파일에 준하도록 대시보드도 통일)
  • 에러 응답 'Internal server error' 원칙 준수 (API 호출 시 graceful catch)
  • 각 task TaskCreate 개별 등록 (78개)
  • 수정 후 크로스체크 — 매 스테이지 syntax + HTTP + ID 매칭 검증

미결 / 차기

  • Stage 7.2 모바일 실기기 회귀 (iOS Safari + Android Chrome) — Loren 직접 실행
  • Stage 7.3 서버 git pull + 회귀 검증 — Loren 명시 승인 후 실행
  • Bridge 서버 신규 엔드포인트 다수 필요 (/overview/actions, /overview/kpi, /dashboard/badges, /dashboard/crisis, /brief/today, /feedback, /search, /inbox, /activity, /activity/stream, /cost/summary, /audit/list, /audit/verify, /workspaces/list, /patterns/cancel, /watchdog/rules PATCH, /chain/trigger, /dashboard/stream/chains, /monitor/resources, /monitor/logs/stream, /creative/list, /sites/list, /sites/cert, /deploy/current, /deploy/log, /deploy/pull, /deploy/rollback, /deploy/logs/stream, /agents/{id}/detail, /agents/{id}/run, /neurons/compile) — 프론트 측은 모두 mock fallback 구비, 서버 구현 후 즉시 활성화
  • 기존 styles.css (349줄) 의 dead 파일 — 배포 전 git rm
  • Stage 2.9 뉴런 drawer 본문 md preview 는 현재 영역 drawer 로 대체 구현 — NeuronFS 실연동 시 실 md 읽기 API 추가
  • 고쳐야 할 사소한 것: pages.css 내 chip/skeleton/empty/tooltip/kbd/badge 가 잘못 순서로 배치됐었음 → 7.1 에서 정정하여 components.css 로 재이동 완료

서버 상태 (이 시점)

  • Python 정적 서버 127.0.0.1:8000 백그라운드 (로컬 개발 용도)
  • 프로덕션 watoneai.cafe24.com 은 4/13 이후 변경 없음. 이 Stage 1~5 는 아직 서버 반영 전

Block B — Bridge API 33 엔드포인트 (2026-04-18 저녁)

Loren 지시: "Bridge API 구현 순서 제안 ... 오류 안나게 순서 잘짜서 디테일하게 작업 들어가보자". 각 스테이지 끝에 batch 배포 + 회귀.

완료 스테이지

Stage B-1 — 기본 조회 7개 (ef4db00)

  • dashboard-api.js: /dashboard/badges, /overview/actions, /overview/kpi
  • cost-api.js: /cost/summary, /cost/breakdown?by=, /cost/series?range=
  • workspace-api.js: /workspaces/list

Stage B-2 — 집계 5개 (40f03fb)

  • agent-detail-api.js: /agents/:id/detail
  • neuron-api.js: /neurons/pending
  • inbox-api.js: /inbox (posts + notifications + mentions)
  • activity-api.js: /activity?range=24h|7d|30d&limit=
  • brief-api.js: /brief/today (daily in-memory cache)

Stage B-3 — Mutation 7개 (7e034b7 + 710a7d7)

  • agent-detail-api.js 확장: POST /agents/:id/run (router.runAgent)
  • watchdog-admin-api.js: PATCH /watchdog/rules/:id + POST /watchdog/rules. auto-evolution.json 의 실구조 watchdog_rules.rules[] 에 맞춤 (threshold.value + cooldown_minutes)
  • chain-trigger-api.js: POST /chain/trigger + POST /patterns/cancel
  • feedback-api.js: POST /feedback → telegram.sendTelegram
  • audit-verify-api.js: POST /audit/verify (SHA-256 chain re-compute)
  • claude-bridge.js handler chain 수정: admin mutations 를 module handlers 앞에 우선

Stage B-4 — 인프라 6개 (be7eb2b)

  • monitor-api.js: /monitor/resources. shared.metricsBump 노출 → claude-bridge 의 handleRoutes 최상단에서 증분 → 30s rolling window rps
  • sites-api.js: /sites/list (openssl x509 parse, 1h 캐시), /sites/cert?domain=X, POST /sites/nginx/reload (nginx -t 실패 시 409)
  • deploy-api.js: /deploy/current, /deploy/log?limit=, POST /deploy/pull, POST /deploy/rollback. commit hash /^[a-f0-9]{7,40}$/ 검증. 성공 시 systemctl restart claude-bridge + telegram 알림 + audit log

Stage B-5 — SSE 4개 (4fc885d + 4fa7cb2 fix)

  • activity-stream-api.js: GET /activity/stream — audit.jsonl tail (fs.watch + rotate 복원)
  • notifications-stream-api.js: GET /dashboard/stream/notifications — NOTIF_PATTERN 필터
  • chain-stream-api.js: GET /dashboard/stream/chains — chain_executions 5s polling + status/step transition diff
  • logs-stream-api.js: GET /monitor/logs/stream — journalctl -f -u claude-bridge -u nginx -u openclaw, spawn per client, SIGTERM on close
  • 버그 수정: Node 18+ 에서 req.on('close') 는 GET body end 시 즉시 fire → 내 cleanup 이 즉시 실행되어 SSE 가 0 chunks 로 끊기던 버그. res.on('close') 로 교체 (진짜 클라이언트 disconnect). 4 모듈 일괄 수정
  • nginx snippet 4개 location = exact match + proxy_buffering off + HTTP/1.1 + Connection "" + read_timeout 24h + X-Accel-Buffering: no + 하드코딩 Bearer BRIDGE_TOKEN (EventSource 헤더 전송 불가 우회)

Stage B-6 — Search/Crisis/Creative/Me 7개 (093d42d)

  • search-api.js: GET /search?q= — posts + companies + users LIKE + agents registry, 소스당 5, 최대 25
  • crisis-api.js: GET /dashboard/crisis — healthFailCounts ≥3 / last-hour audit errors / SSL cert min-days 를 집계해 level + message + details
  • creative-api.js: GET /creative/list — WORK_DIR/generated-images 디렉토리 스캔. image-gen.js 가 프롬프트 메타를 기록 안 해 stub
  • me-api.js: /me/mfa (GET/POST/DELETE), /me/sessions + /me/sessions/:id DELETE, /me/integrations, POST /me/danger/delete — 단일 admin 계정 self-delete 는 409 거절 (시스템 락 방지)

회귀 검증

배포 시점 (093d42d) 기준 전 엔드포인트 curl 테스트 통과:

  • B-1 dashboard/badges → {inbox:0, watchdog:0, errors:0}
  • B-2 brief/today → 오늘 크레딧 잔액 브리핑
  • B-3 audit/verify → {ok:true, count:0}
  • B-4 monitor/resources → cpu/mem/disk/rps 실제치
  • B-4 sites/list → 3 SSL 도메인 + issuer + D-x
  • B-5 SSE 4 stream 연결 200 + chunk 수신 (chains 257B/3s, logs 7340B/3s 실확인)
  • B-6 crisis → level:ok, me/integrations → 6 providers
  • HTTPS via nginx → /api/dashboard/crisis 정상

인프라 수정

  • config/nginx-snippets/wai-proxy.conf 에 location 블록 13개 추가 (B-1~B-6 경로 + SSE 4 exact)
  • claude-bridge.js require/init/handle 에 15 모듈 추가
  • 모든 새 모듈 500 라인 이하 (최대 deploy-api.js 212, me-api.js 190)

총계

  • 신규 모듈 15개 (webhook/modules/*.js)
  • 신규 엔드포인트 33개
  • 코드 ~1800 LOC + nginx snippet 180 LOC
  • 7 커밋: ef4db00 → 40f03fb → 7e034b7 → 710a7d7 → be7eb2b → 4fc885d → 4fa7cb2 → 093d42d

미결 / 차기

  • Stage 7.2 모바일 실기기 회귀 (Loren 직접)
  • Nexus 제품 업그레이드 (board-approval-system 1-234-23-23.nip.io) — Loren 의 원래 타겟
  • audit.jsonl 미생성 이슈 — audit 모듈이 실제로 기록하는 경로 확인 필요 (activity/notifications SSE 초기 데이터 없는 원인)
  • creative-api 는 image-gen.js 가 프롬프트 메타를 저장할 때까지 stub
← Older2026-04-13DevLogNewer →2026-04-20Nexus 제품 전면 재설계 (Block N)