🎨 Palette: ContextSection 컴포넌트 키보드 및 스크린 리더 접근성 개선

.Jules/palette.md

@@ -0,0 +1,6 @@
+## 2024-06-22 - Overview Stats 토글 버튼 키보드 접근성 개선
+**Learning:** `overview-stats` 컴포넌트의 설명 텍스트를 펼치거나 접는 `<button>` 요소에 키보드 포커스 스타일이 누락되어 있어, 키보드 내비게이션 사용자에게 현재 포커스 위치를 명확히 보여주지 못했습니다. `hover` 스타일은 있었으나 `focus-visible` 처리가 없어 접근성 결함이 있었습니다.
+**Action:** Tailwind CSS의 `focus-visible` 관련 유틸리티 클래스(`focus-visible:outline-none`, `focus-visible:ring-2`, `focus-visible:ring-ring`, `rounded-sm`)를 추가하여 탭(Tab) 키 이동 시 포커스 링이 보이도록 수정했습니다. 앞으로 대화형 컴포넌트를 설계할 때는 항상 키보드 접근성(focus states)을 염두에 두고 작업해야 합니다.
+## 2024-07-01 - ContextSection 컴포넌트 아코디언 접근성 향상
+**Learning:** `ContextSection` 같은 커스텀 아코디언(펼침/접힘) UI를 구현할 때, 토글 `<button>`과 숨겨지는 콘텐츠 `<div>` 간의 관계를 스크린 리더에 명확히 전달하기 위해 `React.useId()`를 사용하여 생성한 고유 ID를 `aria-controls`와 콘텐츠 `id`에 각각 부여해야 합니다. 또한, 마우스 hover 스타일만으로는 키보드 내비게이션 사용자에게 현재 포커스 위치를 보여줄 수 없으므로 `focus-visible` 관련 유틸리티(`focus-visible:ring-2`)를 반드시 함께 적용해야 완벽한 접근성을 달성할 수 있습니다.
+**Action:** 앞으로 커스텀 토글 또는 아코디언 UI를 작성할 때 항상 `useId()`와 `aria-controls` 조합을 사용하여 스크린 리더 지원을 추가하고, `focus-visible` 스타일을 적용해 키보드 포커스 시각 피드백을 보장합니다.

.gitignore

@@ -17,3 +17,6 @@ __pycache__/
 .jules/
 .state/
 .claude/worktrees/
+
+# coverage
+coverage/

CHANGELOG.md

@@ -0,0 +1,7 @@
+# Changelog
+
+## [Unreleased]
+
+### 🎨 변경 사항 (UX / 접근성)
+
+- 웹 대시보드의 각종 로그아웃 버튼(`org-sidebar.tsx`, `org-header.tsx`, `no-organization-state.tsx`)에 스크린 리더용 `aria-label="Log out of your account"` (또는 `Sign out of your account`) 속성을 추가하여 접근성을 개선했습니다.

package.json

@@ -9,6 +9,7 @@
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",
+    "@vitest/coverage-v8": "3.2.6",
     "eslint": "^9",
     "turbo": "^2.9.16",
     "typescript-eslint": "^8"

packages/cli/package.json

@@ -17,6 +17,7 @@
     "lint": "eslint src",
     "typecheck": "tsc --noEmit",
     "test": "vitest run",
+    "coverage": "vitest run --coverage",
     "test:watch": "vitest"
   },
   "dependencies": {
@@ -29,7 +30,8 @@
     "@argos/shared": "workspace:*",
     "@types/node": "^20",
     "typescript": "^5",
-    "vitest": "^3.2.6"
+    "vitest": "^3.2.6",
+    "@vitest/coverage-v8": "^3.2.6"
   },
   "engines": {
     "node": ">=18"

packages/shared/package.json

@@ -17,13 +17,15 @@
     "lint": "eslint src",
     "typecheck": "tsc --noEmit",
     "test": "vitest run",
+    "coverage": "vitest run --coverage",
     "test:watch": "vitest"
   },
   "dependencies": {
     "zod": "^3"
   },
   "devDependencies": {
     "typescript": "^5",
-    "vitest": "^3.2.6"
+    "vitest": "^3.2.6",
+    "@vitest/coverage-v8": "^3.2.6"
   }
 }

packages/web/package.json

@@ -10,6 +10,7 @@
     "lint": "eslint src",
     "typecheck": "tsc --noEmit",
     "test": "vitest run",
+    "coverage": "vitest run --coverage",
     "test:watch": "vitest",
     "postinstall": "prisma generate",
     "db:migrate": "prisma migrate deploy",
@@ -51,6 +52,7 @@
     "shadcn": "^4.10.0",
     "tailwindcss": "^4",
     "typescript": "^5",
-    "vitest": "^3.2.6"
+    "vitest": "^3.2.6",
+    "@vitest/coverage-v8": "^3.2.6"
   }
 }

packages/web/src/app/dashboard/[orgSlug]/sessions/[sessionId]/page.tsx

@@ -13,7 +13,7 @@ import {
   SessionFilesTab,
 } from '@/components/dashboard/session-files'
 import { useSessionDetail } from '@/hooks/use-dashboard-sessions'
-import { messagesToTimeline, formatSlashCommandText } from '@/lib/timeline-events'
+import { messagesToTimeline, buildTimelineGroups, formatSlashCommandText } from '@/lib/timeline-events'
 import { extractSessionFiles } from '@/lib/session-files'
 import {
   formatTokens,
@@ -46,6 +46,7 @@ export default function OrgSessionDetailPage({
     () => (data ? messagesToTimeline(data.messages) : []),
     [data],
   )
+  const groups = useMemo(() => buildTimelineGroups(events), [events])
   const files = useMemo(() => extractSessionFiles(events), [events])
   const [selectedIdx, setSelectedIdx] = useState<number | null>(0)
   const safeIdx =
@@ -221,6 +222,7 @@ export default function OrgSessionDetailPage({
             <div className="px-4 pt-3 pb-2">
               <SessionActivityRibbon
                 events={events}
+                groups={groups}
                 selectedIdx={safeIdx}
                 onSelect={setSelectedIdx}
                 sessionStartedAt={data.startedAt}
@@ -232,6 +234,7 @@ export default function OrgSessionDetailPage({
               <div className="border-r border-border min-h-0 overflow-hidden">
                 <EventList
                   events={events}
+                  groups={groups}
                   selectedIdx={safeIdx ?? -1}
                   onSelect={setSelectedIdx}
                   sessionStartedAt={data.startedAt}

packages/web/src/components/dashboard/event-list.tsx

@@ -3,13 +3,14 @@ import { List, type RowComponentProps } from "react-window";
 import { User, Bot, Wrench, ChevronRight } from "lucide-react";
 import {
   formatSlashCommandText,
-  buildTimelineGroups,
   type TimelineEvent,
+  type TimelineGroup,
 } from "@/lib/timeline-events";
 import { cn } from "@/lib/utils";
 
 type EventListProps = {
   events: TimelineEvent[];
+  groups: TimelineGroup[];
   selectedIdx: number;
   onSelect: (idx: number) => void;
   sessionStartedAt: string;
@@ -50,11 +51,10 @@ function formatElapsed(timestamp: string, sessionStartedAt: string): string {
 }
 
 function buildFlatRows(
-  events: TimelineEvent[],
+  groups: TimelineGroup[],
   expandedGroups: Set<number>,
   selectedIdx: number,
 ): FlatRow[] {
-  const groups = buildTimelineGroups(events);
   const rows: FlatRow[] = [];
   for (const group of groups) {
     if (group.kind === "single") {
@@ -261,15 +261,16 @@ function Row({
 
 export function EventList({
   events,
+  groups,
   selectedIdx,
   onSelect,
   sessionStartedAt,
   expandedGroups,
   onToggleGroup,
 }: EventListProps) {
   const rows = useMemo(
-    () => buildFlatRows(events, expandedGroups, selectedIdx),
-    [events, expandedGroups, selectedIdx],
+    () => buildFlatRows(groups, expandedGroups, selectedIdx),
+    [groups, expandedGroups, selectedIdx],
   );
 
   if (events.length === 0) {

packages/web/src/components/dashboard/no-organization-state.tsx

@@ -37,6 +37,7 @@ export function NoOrganizationState({
             <button
               onClick={() => signOut({ callbackUrl: '/login' })}
               className="text-sm text-destructive hover:underline"
+              aria-label="Log out of your account"
             >
               Log out
             </button>

packages/web/src/components/dashboard/overview-stats.tsx

@@ -88,7 +88,7 @@ export function OverviewStats({
         id="overview-stats-explanation-toggle"
         aria-expanded={expanded}
         aria-controls="overview-stats-explanation"
-        className="mt-4 flex items-center gap-2 text-xs text-muted-foreground hover:text-foreground transition-colors"
+        className="mt-4 flex items-center gap-2 text-xs text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring transition-colors rounded-sm"
       >
         <span
           aria-hidden="true"

packages/web/src/components/dashboard/reports/context-section.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useState, type ReactNode } from 'react'
+import { useState, useId, type ReactNode } from 'react'
 import { ChevronDown, ChevronUp } from 'lucide-react'
 import { cn } from '@/lib/utils'
 
@@ -12,6 +12,7 @@ interface ContextSectionProps {
 
 export function ContextSection({ title, children, defaultOpen = false }: ContextSectionProps) {
   const [open, setOpen] = useState(defaultOpen)
+  const contentId = useId()
 
   return (
     <div className="rounded-xl bg-card ring-1 ring-foreground/10 overflow-hidden">
@@ -21,8 +22,10 @@ export function ContextSection({ title, children, defaultOpen = false }: Context
         className={cn(
           'w-full flex items-center justify-between px-4 py-3 text-left',
           'hover:bg-card-elevated transition-colors',
+          'focus-visible:outline-none focus-visible:bg-card-elevated focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset'
         )}
         aria-expanded={open}
+        aria-controls={contentId}
       >
         <h2 className="text-base font-medium">{title}</h2>
         {open ? (
@@ -32,7 +35,7 @@ export function ContextSection({ title, children, defaultOpen = false }: Context
         )}
       </button>
       {open && (
-        <div className="px-4 pb-4 pt-1">
+        <div id={contentId} className="px-4 pb-4 pt-1">
           {children}
         </div>
       )}

packages/web/src/components/dashboard/reports/weekly-flow-chart.tsx

@@ -12,6 +12,7 @@ import {
   Legend,
   type TooltipProps,
 } from 'recharts'
+import { useMemo } from 'react'
 import { parseISO } from 'date-fns'
 import { formatTokens } from '@/lib/format'
 import type { DailySeriesPoint } from '@/types/reports'
@@ -57,18 +58,22 @@ function sumTokens(p: DailySeriesPoint): number {
 }
 
 export function WeeklyFlowChart({ thisWeek, prevWeek }: WeeklyFlowChartProps) {
-  // 요일 기준으로 병합 (월~일 7개 슬롯)
-  const dayNames = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
-  const data: ChartRow[] = dayNames.map((day) => ({ day, thisWeekTokens: 0, prevWeekTokens: 0 }))
+  const data = useMemo(() => {
+    // 요일 기준으로 병합 (월~일 7개 슬롯)
+    const dayNames = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+    const result: ChartRow[] = dayNames.map((day) => ({ day, thisWeekTokens: 0, prevWeekTokens: 0 }))
 
-  for (const p of thisWeek) {
-    const idx = dayIndex(p.date)
-    if (idx >= 0) data[idx].thisWeekTokens += sumTokens(p)
-  }
-  for (const p of prevWeek) {
-    const idx = dayIndex(p.date)
-    if (idx >= 0) data[idx].prevWeekTokens += sumTokens(p)
-  }
+    for (const p of thisWeek) {
+      const idx = dayIndex(p.date)
+      if (idx >= 0) result[idx].thisWeekTokens += sumTokens(p)
+    }
+    for (const p of prevWeek) {
+      const idx = dayIndex(p.date)
+      if (idx >= 0) result[idx].prevWeekTokens += sumTokens(p)
+    }
+
+    return result
+  }, [thisWeek, prevWeek])
 
   return (
     <ResponsiveContainer width="100%" height={260}>

packages/web/src/components/dashboard/session-activity-ribbon.tsx

@@ -1,16 +1,17 @@
 'use client'
 
-import { useMemo, useState, useRef } from 'react'
+import { useState, useRef } from 'react'
 import {
   formatSlashCommandText,
-  buildTimelineGroups,
   type TimelineEvent,
+  type TimelineGroup,
 } from '@/lib/timeline-events'
 import { formatTokens, formatCost, formatRelativeTime } from '@/lib/format'
 import { segmentVisuals } from './session-ribbon-visuals'
 
 type Props = {
   events: TimelineEvent[]
+  groups: TimelineGroup[]
   selectedIdx: number | null
   onSelect: (idx: number) => void
   sessionStartedAt: string
@@ -147,6 +148,7 @@ function MergedTooltipBody({
 
 export function SessionActivityRibbon({
   events,
+  groups,
   selectedIdx,
   onSelect,
   sessionStartedAt,
@@ -156,8 +158,6 @@ export function SessionActivityRibbon({
   const [hover, setHover] = useState<HoverState | null>(null)
   const containerRef = useRef<HTMLDivElement>(null)
 
-  const groups = useMemo(() => buildTimelineGroups(events), [events])
-
   if (events.length === 0) return null
 
   const trackMouse = (e: React.MouseEvent) => {

packages/web/src/components/dashboard/token-usage-chart.tsx

@@ -1,5 +1,6 @@
 'use client'
 
+import { useMemo } from 'react'
 import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, TooltipProps } from 'recharts'
 import { formatTokens, formatCost } from '@/lib/format'
 import type { UsageSeries } from '@argos/shared'
@@ -43,15 +44,17 @@ function CustomTooltip({ active, payload, label }: TooltipProps<number, string>)
 }
 
 export function TokenUsageChart({ data }: TokenUsageChartProps) {
-  const chartData = data.map(d => {
-    const date = new Date(d.date)
-    return {
-      date: format(date, 'MMM d'),
-      fullDate: format(date, 'MMM d, yyyy'),
-      input: d.inputTokens,
-      output: d.outputTokens,
-    }
-  })
+  const chartData = useMemo(() => {
+    return data.map(d => {
+      const date = new Date(d.date)
+      return {
+        date: format(date, 'MMM d'),
+        fullDate: format(date, 'MMM d, yyyy'),
+        input: d.inputTokens,
+        output: d.outputTokens,
+      }
+    })
+  }, [data])
 
   return (
     <ResponsiveContainer width="100%" height={300}>

packages/web/src/components/layout/org-header.tsx

@@ -18,6 +18,7 @@ export function OrgHeader({ orgName }: { orgName?: string }) {
           <Button
             variant="outline"
             onClick={() => signOut({ callbackUrl: '/login' })}
+            aria-label="Sign out of your account"
           >
             Sign out
           </Button>

packages/web/src/components/layout/org-sidebar.tsx

@@ -124,6 +124,7 @@ export function OrgSidebar() {
           <button
             onClick={handleLogout}
             className="w-full px-3 py-2 text-sm font-medium text-destructive hover:bg-destructive/10 rounded-md transition-colors"
+            aria-label="Log out of your account"
           >
             Log Out
           </button>
@@ -150,6 +151,7 @@ export function OrgSidebar() {
           <button
             onClick={handleLogout}
             className="px-3 py-1 text-sm text-destructive hover:bg-destructive/10 rounded-md transition-colors"
+            aria-label="Log out of your account"
           >
             Logout
           </button>

packages/web/src/lib/server/weekly-report.ts

@@ -392,17 +392,22 @@ export async function getWeeklyReport(
   }
 
   // Insights — delegation
-  const totalAgentCalls = thisWeekRollups.reduce(
-    (sum, r) => sum + Object.values(r.agentCounts).reduce((a, b) => a + b, 0),
-    0,
-  )
-  const totalSkillCalls = thisWeekRollups.reduce(
-    (sum, r) => sum + Object.values(r.skillCounts).reduce((a, b) => a + b, 0),
-    0,
-  )
+  // ⚡ Bolt Optimization:
+  // 병목 지점: 기존 코드는 `thisWeekRollups`를 3번 순회하고, 매 순회마다 Object.values()로 중간 배열을 생성하여 메모리 할당 비용이 발생했습니다.
+  // 최적화 방법: 단일 for...of 루프와 Object.keys() 순회를 결합하여 N+1 순회를 1회 순회로 통합하고 중간 배열 할당을 제거했습니다.
+  // 기대 효과: `thisWeekRollups`의 크기가 클 경우, 불필요한 배열 생성 오버헤드와 O(N) 순회를 1/3로 줄여 리포트 생성 성능이 향상됩니다.
+  let totalAgentCalls = 0
+  let totalSkillCalls = 0
   const distinctSkillsThisWeek = new Set<string>()
+
   for (const r of thisWeekRollups) {
-    for (const k of Object.keys(r.skillCounts)) distinctSkillsThisWeek.add(k)
+    for (const k of Object.keys(r.agentCounts)) {
+      totalAgentCalls += r.agentCounts[k]
+    }
+    for (const k of Object.keys(r.skillCounts)) {
+      totalSkillCalls += r.skillCounts[k]
+      distinctSkillsThisWeek.add(k)
+    }
   }
 
   const insights: WeeklyInsights = {