WIP: 인스트루먼트 UI 시도 (DS 컴포넌트 + CRT 셰이더)

- DS 컴포넌트: CrtDisplay, InstrumentPanel, Led, PhysicalButton, MetalCard, PhosphorText
- Dashboard: CRT WebGL 셰이더 + 물리 버튼 + LED 클러스터
- 사이드바: 72px 미니 네비게이션
- 문제: SSOT 위반(매직넘버 41곳), 시안 A 정체성 부족, 모달/팝업 방치
- 다음: 디자인 근본 재설계 필요

src/renderer/pages/CommandsPage.tsx

@@ -1,26 +1,16 @@
 // src/renderer/pages/CommandsPage.tsx
-// 08-design-system.md SSOT: 다크 카드, 앰버 악센트, 태그 시스템
+// 인스트루먼트 미학: MetalCard + PhosphorText + Led
 
 import { useState, useEffect, useCallback } from 'react'
-import {
-  Box, Typography, Button, IconButton, Chip,
-  Dialog, DialogTitle, DialogContent, DialogActions,
-  TextField, Card, CardContent
-} from '@mui/material'
+import { Box, Button, IconButton, Dialog, DialogTitle, DialogContent, DialogActions, TextField } from '@mui/material'
 import AddIcon from '@mui/icons-material/Add'
 import DeleteIcon from '@mui/icons-material/Delete'
 import EditIcon from '@mui/icons-material/Edit'
-import { d3roPalette } from '../theme'
+import { MetalCard, PhosphorText, Led } from '../components/ds'
 import type { IPCResult } from '@shared/errors'
 
 interface CustomInstruction {
-  id: string
-  name: string
-  description: string
-  prompt: string
-  icon: string
-  isBuiltin: boolean
-  order: number
+  id: string; name: string; description: string; prompt: string; icon: string; isBuiltin: boolean; order: number
 }
 
 export function CommandsPage(): React.ReactElement {
@@ -38,108 +28,62 @@ export function CommandsPage(): React.ReactElement {
       const ipcResult = await (window.electronAPI as Record<string, unknown> & {
         invoke: (channel: string, ...args: unknown[]) => Promise<IPCResult<CustomInstruction[]>>
       }).invoke?.('instruction:getAll') as unknown as IPCResult<CustomInstruction[]> | undefined
-
-      if (ipcResult && ipcResult.success) {
-        setInstructions(ipcResult.data)
-      }
-    } catch {
-      // preload에 instruction API가 없을 수 있음
-    }
+      if (ipcResult && ipcResult.success) setInstructions(ipcResult.data)
+    } catch { /* noop */ }
     setLoading(false)
   }, [])
 
   useEffect(() => { loadData() }, [loadData])
 
-  const openAdd = () => {
-    setEditId(null)
-    setFormName('')
-    setFormDesc('')
-    setFormPrompt('')
-    setDialogOpen(true)
-  }
-
-  const openEdit = (inst: CustomInstruction) => {
-    setEditId(inst.id)
-    setFormName(inst.name)
-    setFormDesc(inst.description)
-    setFormPrompt(inst.prompt)
-    setDialogOpen(true)
-  }
-
-  const handleSave = async () => {
-    setDialogOpen(false)
-    loadData()
-  }
+  const openAdd = () => { setEditId(null); setFormName(''); setFormDesc(''); setFormPrompt(''); setDialogOpen(true) }
+  const openEdit = (inst: CustomInstruction) => { setEditId(inst.id); setFormName(inst.name); setFormDesc(inst.description); setFormPrompt(inst.prompt); setDialogOpen(true) }
+  const handleSave = async () => { setDialogOpen(false); loadData() }
 
   return (
-    <Box sx={{ maxWidth: 1200, mx: 'auto', p: 5 }}>
-      {/* Header */}
-      <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 3 }}>
-        <Box>
-          <Typography sx={{ fontSize: '22px', fontWeight: 700 }}>Commands</Typography>
-          <Typography sx={{ fontSize: '14px', color: 'text.secondary', mt: 0.5 }}>
-            Custom LLM instructions
-          </Typography>
-        </Box>
-        <Button variant="contained" startIcon={<AddIcon />} onClick={openAdd}>
-          Add Command
-        </Button>
+    <Box sx={{ maxWidth: 900, mx: 'auto', p: 4 }}>
+      <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
+        <PhosphorText variant="label" sx={{ color: '#77797c' }}>
+          LLM INSTRUCTIONS — {instructions.length} COMMANDS
+        </PhosphorText>
+        <Button variant="contained" startIcon={<AddIcon />} onClick={openAdd} size="small">ADD</Button>
       </Box>
 
       {loading ? (
-        <Typography color="text.secondary">Loading...</Typography>
+        <PhosphorText variant="dim">LOADING...</PhosphorText>
       ) : instructions.length === 0 ? (
-        <Card>
-          <CardContent sx={{ py: 6, textAlign: 'center' }}>
-            <Typography color="text.secondary">
-              Built-in commands: Translate, Summarize, Formal Rewrite, Code Explain, Free Prompt.
-            </Typography>
-          </CardContent>
-        </Card>
+        <MetalCard>
+          <Box sx={{ py: 6, textAlign: 'center' }}>
+            <PhosphorText variant="dim">BUILT-IN: TRANSLATE, SUMMARIZE, FORMAL, CODE, FREE</PhosphorText>
+          </Box>
+        </MetalCard>
       ) : (
-        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>
+        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
           {instructions.map((inst) => (
-            <Card key={inst.id} sx={{ p: 0 }}>
-              <CardContent sx={{ p: 2.5, '&:last-child': { pb: 2.5 }, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-                <Box sx={{ flex: 1 }}>
-                  <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
-                    <Typography sx={{ fontSize: '14px', fontWeight: 600 }}>
-                      {inst.name}
-                    </Typography>
-                    <Chip
-                      label={inst.isBuiltin ? 'BUILT-IN' : 'CUSTOM'}
-                      size="small"
-                      color={inst.isBuiltin ? 'secondary' : 'primary'}
-                    />
+            <MetalCard key={inst.id}>
+              <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+                <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5, flex: 1 }}>
+                  <Led color={inst.isBuiltin ? 'amber' : 'green'} size={6} />
+                  <Box>
+                    <Box sx={{ fontSize: '14px', fontWeight: 600, color: '#fff' }}>{inst.name}</Box>
+                    <Box sx={{ fontSize: '11px', color: '#77797c', mt: 0.25 }}>{inst.description}</Box>
                   </Box>
-                  <Typography sx={{ fontSize: '12px', color: 'text.secondary', mt: 0.5 }}>
-                    {inst.description}
-                  </Typography>
                 </Box>
-                <Box sx={{ display: 'flex', gap: 0.5, flexShrink: 0 }}>
-                  <IconButton
-                    size="small"
-                    onClick={() => openEdit(inst)}
-                    sx={{ color: d3roPalette.text.label, '&:hover': { color: d3roPalette.accent.amber } }}
-                  >
-                    <EditIcon fontSize="small" />
+                <Box sx={{ display: 'flex', gap: 0.5 }}>
+                  <IconButton size="small" onClick={() => openEdit(inst)} sx={{ color: '#77797c', '&:hover': { color: '#f25b29' } }}>
+                    <EditIcon sx={{ fontSize: 16 }} />
                   </IconButton>
                   {!inst.isBuiltin && (
-                    <IconButton
-                      size="small"
-                      sx={{ color: d3roPalette.text.label, '&:hover': { color: d3roPalette.tag.red } }}
-                    >
-                      <DeleteIcon fontSize="small" />
+                    <IconButton size="small" sx={{ color: '#77797c', '&:hover': { color: '#ef4444' } }}>
+                      <DeleteIcon sx={{ fontSize: 16 }} />
                     </IconButton>
                   )}
                 </Box>
-              </CardContent>
-            </Card>
+              </Box>
+            </MetalCard>
           ))}
         </Box>
       )}
 
-      {/* Dialog */}
       <Dialog open={dialogOpen} onClose={() => setDialogOpen(false)} maxWidth="sm" fullWidth>
         <DialogTitle sx={{ fontWeight: 700 }}>{editId ? 'Edit Command' : 'Add Command'}</DialogTitle>
         <DialogContent>

src/renderer/pages/DashboardPage.tsx

@@ -1,263 +1,182 @@
 // src/renderer/pages/DashboardPage.tsx
-// 08-design-system.md 3.7 Dashboard 레이아웃.
-// hero 수치, 카드 그리드, StatusPanel, 태그 시스템.
+// 시안 A 인스트루먼트 패널: CRT 디스플레이 + LED 클러스터 + 물리 버튼 + 통계
 
-import { useState, useEffect } from 'react'
-import { Box, Card, CardContent, Typography, Chip } from '@mui/material'
-import MicIcon from '@mui/icons-material/Mic'
-import TimerIcon from '@mui/icons-material/Timer'
-import TextFieldsIcon from '@mui/icons-material/TextFields'
-import WhatshotIcon from '@mui/icons-material/Whatshot'
-import { d3roPalette, d3roFontMono } from '../theme'
-import { useTheme } from '@mui/material/styles'
+import { useState, useEffect, useCallback } from 'react'
+import { Box, Typography } from '@mui/material'
+import { CrtDisplay, InstrumentPanel, Led, PhysicalButton, MetalCard, PhosphorText } from '../components/ds'
 import type { StatsSummary } from '@shared/types'
 
-// ── StatCard 컴포넌트 ────────────────────────────────────
-
-interface StatCardProps {
-  label: string
-  value: string
-  icon: React.ReactElement
-  tag?: { text: string; color: 'primary' | 'success' | 'warning' | 'error' }
-}
-
-function StatCard({ label, value, icon, tag }: StatCardProps): React.ReactElement {
-  return (
-    <Card sx={{ p: 0 }}>
-      <CardContent sx={{ p: 3, '&:last-child': { pb: 3 } }}>
-        {/* Label row */}
-        <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 2 }}>
-          <Typography
-            sx={{
-              fontSize: '11px',
-              fontWeight: 600,
-              letterSpacing: '0.1em',
-              textTransform: 'uppercase',
-              color: d3roPalette.text.label,
-            }}
-          >
-            {label}
-          </Typography>
-          {tag && (
-            <Chip label={tag.text} color={tag.color} size="small" />
-          )}
-        </Box>
-
-        {/* Hero value */}
-        <Box sx={{ display: 'flex', alignItems: 'baseline', gap: 1.5 }}>
-          <Box sx={{ color: d3roPalette.accent.amber, opacity: 0.8 }}>{icon}</Box>
-          <Typography
-            sx={{
-              fontFamily: d3roFontMono,
-              fontSize: '28px',
-              fontWeight: 700,
-              lineHeight: 1.2,
-              color: d3roPalette.text.primary,
-              fontVariantNumeric: 'tabular-nums',
-            }}
-          >
-            {value}
-          </Typography>
-        </Box>
-      </CardContent>
-    </Card>
-  )
-}
-
-// ── LED 인디케이터 ───────────────────────────────────────
-
-function Led({ status }: { status: 'active' | 'warning' | 'error' | 'off' }): React.ReactElement {
-  const colors = {
-    active: { bg: d3roPalette.tag.green, shadow: d3roPalette.tag.green },
-    warning: { bg: d3roPalette.tag.orange, shadow: d3roPalette.tag.orange },
-    error: { bg: d3roPalette.tag.red, shadow: d3roPalette.tag.red },
-    off: { bg: d3roPalette.text.disabled, shadow: 'transparent' },
-  }
-  const c = colors[status]
-
-  return (
-    <Box
-      sx={{
-        width: 8,
-        height: 8,
-        borderRadius: '50%',
-        bgcolor: c.bg,
-        boxShadow: status !== 'off' ? `0 0 6px ${c.shadow}, 0 0 12px ${c.shadow}40` : 'none',
-        flexShrink: 0,
-      }}
-    />
-  )
-}
-
-// ── 유틸 ─────────────────────────────────────────────────
-
 function formatTime(ms: number): string {
   const totalSec = Math.round(ms / 1000)
-  const hours = Math.floor(totalSec / 3600)
-  const minutes = Math.floor((totalSec % 3600) / 60)
-  const seconds = totalSec % 60
-  if (hours > 0) return `${hours}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`
-  return `${minutes}:${seconds.toString().padStart(2, '0')}`
+  const h = Math.floor(totalSec / 3600)
+  const m = Math.floor((totalSec % 3600) / 60)
+  const s = totalSec % 60
+  if (h > 0) return `${h}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`
+  return `${m}:${s.toString().padStart(2, '0')}`
 }
 
-// ── DashboardPage ────────────────────────────────────────
+type DisplayMode = 'stats' | 'voice' | 'sys'
 
 export function DashboardPage(): React.ReactElement {
   const [stats, setStats] = useState<StatsSummary | null>(null)
   const [ollamaConnected, setOllamaConnected] = useState(false)
+  const [displayMode, setDisplayMode] = useState<DisplayMode>('stats')
+  const [glitchTrigger, setGlitchTrigger] = useState(0)
 
-  useEffect(() => {
+  const loadStats = useCallback(() => {
     window.electronAPI.stats.getSummary().then((result) => {
       if (result.success) setStats(result.data)
     })
-
     window.electronAPI.llm.getStatus().then((result) => {
       if (result.success) setOllamaConnected(result.data.connectionState === 'connected')
     })
-
-    const interval = setInterval(() => {
-      window.electronAPI.stats.getSummary().then((result) => {
-        if (result.success) setStats(result.data)
-      })
-    }, 30000)
-
-    return () => clearInterval(interval)
   }, [])
 
+  useEffect(() => {
+    loadStats()
+    const interval = setInterval(loadStats, 30000)
+    return () => clearInterval(interval)
+  }, [loadStats])
+
+  const switchMode = (mode: DisplayMode) => {
+    setDisplayMode(mode)
+    setGlitchTrigger((prev) => prev + 1)
+  }
+
   return (
-    <Box sx={{ maxWidth: 1200, mx: 'auto', p: 5 }}>
-      {/* Header */}
-      <Box sx={{ mb: 4 }}>
-        <Typography
-          sx={{
-            fontSize: '22px',
-            fontWeight: 700,
-            color: d3roPalette.text.primary,
-          }}
-        >
-          Dashboard
-        </Typography>
-        <Typography
-          sx={{
-            fontSize: '14px',
-            color: d3roPalette.text.secondary,
-            mt: 0.5,
-          }}
-        >
-          Voice assistant overview
-        </Typography>
-      </Box>
+    <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '100%', p: 3 }}>
+      <InstrumentPanel
+        engravingLeft="D3RO-VOICE SYS."
+        engravingRight="MOD-01 / TERMINAL"
+        engravingBottom="LOCAL AI VOICE ASSISTANT"
+      >
+        <Box sx={{ display: 'grid', gridTemplateColumns: '1fr 140px', gap: 3, minHeight: 320 }}>
+          {/* ── 좌측: CRT 디스플레이 ─────────────────── */}
+          <CrtDisplay
+            amplitude={displayMode === 'voice' ? 0.4 : 0.1}
+            frequency={displayMode === 'voice' ? 15 : 8}
+            glitchTrigger={glitchTrigger}
+            height={320}
+          >
+            {displayMode === 'stats' && (
+              <>
+                <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
+                  <PhosphorText variant="label">TOTAL SESSIONS</PhosphorText>
+                  <PhosphorText variant="label">D3RO</PhosphorText>
+                </Box>
+                <Box sx={{ mt: 'auto', mb: 3 }}>
+                  <PhosphorText variant="hero">
+                    {stats?.totalSessionCount ?? 0}
+                  </PhosphorText>
+                  <PhosphorText variant="label" sx={{ mt: 1 }}>
+                    {formatTime(stats?.totalRecordingTimeMs ?? 0)} RECORDED
+                  </PhosphorText>
+                </Box>
+                <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
+                  <Box>
+                    <PhosphorText variant="label">WORDS</PhosphorText>
+                    <PhosphorText variant="value">{stats?.totalWordCount ?? 0}</PhosphorText>
+                  </Box>
+                  <Box>
+                    <PhosphorText variant="label">TODAY</PhosphorText>
+                    <PhosphorText variant="value">{stats?.todaySessionCount ?? 0}</PhosphorText>
+                  </Box>
+                  <Box sx={{ textAlign: 'right' }}>
+                    <PhosphorText variant="label">STREAK</PhosphorText>
+                    <PhosphorText variant="value">
+                      {stats?.streakDays ?? 0}<PhosphorText variant="dim" component="span" sx={{ ml: 0.5 }}>D</PhosphorText>
+                    </PhosphorText>
+                  </Box>
+                </Box>
+              </>
+            )}
 
-      {/* Status Panel (서비스 상태) */}
-      <Card sx={{ mb: 3, p: 0 }}>
-        <CardContent sx={{ p: 2.5, '&:last-child': { pb: 2.5 } }}>
-          <Box sx={{ display: 'flex', alignItems: 'center', gap: 3 }}>
-            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-              <Led status="active" />
-              <Typography sx={{ fontSize: '12px', color: d3roPalette.text.secondary }}>
-                STT Ready
-              </Typography>
-            </Box>
-            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-              <Led status={ollamaConnected ? 'active' : 'warning'} />
-              <Typography sx={{ fontSize: '12px', color: d3roPalette.text.secondary }}>
-                {ollamaConnected ? 'Ollama Connected' : 'Ollama Offline'}
-              </Typography>
-            </Box>
-            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-              <Led status="active" />
-              <Typography sx={{ fontSize: '12px', color: d3roPalette.text.secondary }}>
-                Hotkey Active
-              </Typography>
+            {displayMode === 'voice' && (
+              <>
+                <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
+                  <PhosphorText variant="label">VOICE MODE</PhosphorText>
+                  <PhosphorText variant="label">STANDBY</PhosphorText>
+                </Box>
+                <Box sx={{ mt: 'auto', mb: 3, textAlign: 'center' }}>
+                  <PhosphorText variant="hero">IDLE</PhosphorText>
+                  <PhosphorText variant="label" sx={{ mt: 1 }}>
+                    PRESS RIGHT ALT TO DICTATE
+                  </PhosphorText>
+                </Box>
+                <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
+                  <Box>
+                    <PhosphorText variant="label">MODE</PhosphorText>
+                    <PhosphorText variant="value">DICT</PhosphorText>
+                  </Box>
+                  <Box sx={{ textAlign: 'right' }}>
+                    <PhosphorText variant="label">HOTKEY</PhosphorText>
+                    <PhosphorText variant="value">R.ALT</PhosphorText>
+                  </Box>
+                </Box>
+              </>
+            )}
+
+            {displayMode === 'sys' && (
+              <>
+                <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
+                  <PhosphorText variant="label">SYSTEM STATUS</PhosphorText>
+                  <PhosphorText variant="label">DIAG</PhosphorText>
+                </Box>
+                <Box sx={{ mt: 3 }}>
+                  {[
+                    { name: 'STT ENGINE', status: 'READY' as const },
+                    { name: 'OLLAMA LLM', status: ollamaConnected ? 'CONNECTED' as const : 'OFFLINE' as const },
+                    { name: 'HOTKEY HOOK', status: 'ACTIVE' as const },
+                    { name: 'AUDIO INPUT', status: 'STANDBY' as const },
+                  ].map((item) => (
+                    <Box key={item.name} sx={{ display: 'flex', justifyContent: 'space-between', mb: 1.5 }}>
+                      <PhosphorText variant="label">{item.name}</PhosphorText>
+                      <PhosphorText
+                        variant="value"
+                        sx={{
+                          fontSize: '12px',
+                          color: item.status === 'OFFLINE' ? '#ef4444' : '#f25b29',
+                        }}
+                      >
+                        {item.status}
+                      </PhosphorText>
+                    </Box>
+                  ))}
+                </Box>
+                <Box sx={{ mt: 'auto' }}>
+                  <PhosphorText variant="label">VERSION</PhosphorText>
+                  <PhosphorText variant="value" sx={{ fontSize: '12px' }}>v1.0.0</PhosphorText>
+                </Box>
+              </>
+            )}
+          </CrtDisplay>
+
+          {/* ── 우측: 컨트롤 패널 ────────────────────── */}
+          <Box sx={{ display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
+            {/* LED 상태 클러스터 */}
+            <Box sx={{ display: 'flex', justifyContent: 'flex-end', gap: 1, pt: 1 }}>
+              <Led color="green" pulse />
+              <Led color={ollamaConnected ? 'green' : 'red'} />
+              <Led color="amber" pulse />
             </Box>
+
+            {/* 모드 버튼 그룹 */}
+            <MetalCard inset>
+              <Box sx={{ display: 'flex', flexDirection: 'column', gap: '6px' }}>
+                <PhysicalButton selected={displayMode === 'stats'} onClick={() => switchMode('stats')} fullWidth>
+                  STAT
+                </PhysicalButton>
+                <PhysicalButton selected={displayMode === 'voice'} onClick={() => switchMode('voice')} fullWidth>
+                  VOICE
+                </PhysicalButton>
+                <PhysicalButton selected={displayMode === 'sys'} onClick={() => switchMode('sys')} fullWidth>
+                  SYS
+                </PhysicalButton>
+              </Box>
+            </MetalCard>
           </Box>
-        </CardContent>
-      </Card>
-
-      {/* Stat Cards Grid */}
-      <Box
-        sx={{
-          display: 'grid',
-          gridTemplateColumns: 'repeat(auto-fill, minmax(240px, 1fr))',
-          gap: 3,
-          mb: 4,
-        }}
-      >
-        <StatCard
-          label="Total Sessions"
-          value={String(stats?.totalSessionCount ?? 0)}
-          icon={<MicIcon />}
-        />
-        <StatCard
-          label="Total Time"
-          value={formatTime(stats?.totalRecordingTimeMs ?? 0)}
-          icon={<TimerIcon />}
-        />
-        <StatCard
-          label="Total Words"
-          value={String(stats?.totalWordCount ?? 0)}
-          icon={<TextFieldsIcon />}
-        />
-        <StatCard
-          label="Streak"
-          value={`${stats?.streakDays ?? 0}d`}
-          icon={<WhatshotIcon />}
-          tag={stats?.streakDays && stats.streakDays > 0 ? { text: 'ACTIVE', color: 'success' } : undefined}
-        />
-      </Box>
-
-      {/* Today Section */}
-      <Typography
-        sx={{
-          fontSize: '11px',
-          fontWeight: 600,
-          letterSpacing: '0.1em',
-          textTransform: 'uppercase',
-          color: d3roPalette.text.label,
-          mb: 2,
-        }}
-      >
-        Today
-      </Typography>
-
-      <Box
-        sx={{
-          display: 'grid',
-          gridTemplateColumns: 'repeat(3, 1fr)',
-          gap: 3,
-        }}
-      >
-        <Card sx={{ p: 0 }}>
-          <CardContent sx={{ p: 3, '&:last-child': { pb: 3 } }}>
-            <Typography sx={{ fontSize: '11px', fontWeight: 600, letterSpacing: '0.1em', textTransform: 'uppercase', color: d3roPalette.text.label, mb: 1 }}>
-              Sessions
-            </Typography>
-            <Typography sx={{ fontFamily: d3roFontMono, fontSize: '28px', fontWeight: 700, fontVariantNumeric: 'tabular-nums' }}>
-              {stats?.todaySessionCount ?? 0}
-            </Typography>
-          </CardContent>
-        </Card>
-        <Card sx={{ p: 0 }}>
-          <CardContent sx={{ p: 3, '&:last-child': { pb: 3 } }}>
-            <Typography sx={{ fontSize: '11px', fontWeight: 600, letterSpacing: '0.1em', textTransform: 'uppercase', color: d3roPalette.text.label, mb: 1 }}>
-              Time
-            </Typography>
-            <Typography sx={{ fontFamily: d3roFontMono, fontSize: '28px', fontWeight: 700, fontVariantNumeric: 'tabular-nums' }}>
-              {formatTime(stats?.todayRecordingTimeMs ?? 0)}
-            </Typography>
-          </CardContent>
-        </Card>
-        <Card sx={{ p: 0 }}>
-          <CardContent sx={{ p: 3, '&:last-child': { pb: 3 } }}>
-            <Typography sx={{ fontSize: '11px', fontWeight: 600, letterSpacing: '0.1em', textTransform: 'uppercase', color: d3roPalette.text.label, mb: 1 }}>
-              Words
-            </Typography>
-            <Typography sx={{ fontFamily: d3roFontMono, fontSize: '28px', fontWeight: 700, fontVariantNumeric: 'tabular-nums' }}>
-              {stats?.todayWordCount ?? 0}
-            </Typography>
-          </CardContent>
-        </Card>
-      </Box>
+        </Box>
+      </InstrumentPanel>
     </Box>
   )
 }

src/renderer/pages/DictionaryPage.tsx

@@ -1,25 +1,16 @@
 // src/renderer/pages/DictionaryPage.tsx
-// 08-design-system.md SSOT: 다크 카드, 앰버 악센트, 태그 시스템
+// 인스트루먼트 미학: MetalCard + PhosphorText
 
 import { useState, useEffect, useCallback } from 'react'
-import {
-  Box, Typography, TextField, Button, IconButton, Chip,
-  Dialog, DialogTitle, DialogContent, DialogActions,
-  Card, CardContent, InputAdornment
-} from '@mui/material'
+import { Box, TextField, Button, IconButton, Dialog, DialogTitle, DialogContent, DialogActions, InputAdornment } from '@mui/material'
 import AddIcon from '@mui/icons-material/Add'
 import DeleteIcon from '@mui/icons-material/Delete'
 import SearchIcon from '@mui/icons-material/Search'
-import { d3roPalette, d3roFontMono } from '../theme'
+import { MetalCard, PhosphorText, PhysicalButton } from '../components/ds'
 import type { DictionaryEntry, DictionaryPage as DictPageData } from '@shared/types'
 
 const PAGE_SIZE = 50
-
-const CATEGORY_COLOR: Record<string, 'primary' | 'secondary' | 'warning'> = {
-  user: 'primary',
-  auto: 'warning',
-  technical: 'secondary',
-}
+const MONO = 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace'
 
 export function DictionaryPage(): React.ReactElement {
   const [data, setData] = useState<DictPageData | null>(null)
@@ -42,119 +33,69 @@ export function DictionaryPage(): React.ReactElement {
 
   const handleAdd = async () => {
     if (!newWord.trim()) return
-    await window.electronAPI.dictionary.add({
-      word: newWord.trim(),
-      pronunciation: newPronunciation.trim() || undefined
-    })
-    setNewWord('')
-    setNewPronunciation('')
-    setAddOpen(false)
-    loadData()
-  }
-
-  const handleDelete = async (id: string) => {
-    await window.electronAPI.dictionary.delete({ id })
-    loadData()
+    await window.electronAPI.dictionary.add({ word: newWord.trim(), pronunciation: newPronunciation.trim() || undefined })
+    setNewWord(''); setNewPronunciation(''); setAddOpen(false); loadData()
   }
 
   return (
-    <Box sx={{ maxWidth: 1200, mx: 'auto', p: 5 }}>
-      {/* Header */}
-      <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 3 }}>
-        <Box>
-          <Typography sx={{ fontSize: '22px', fontWeight: 700 }}>Dictionary</Typography>
-          <Typography sx={{ fontSize: '14px', color: 'text.secondary', mt: 0.5 }}>
-            Custom words for better STT accuracy
-          </Typography>
-        </Box>
-        <Button variant="contained" startIcon={<AddIcon />} onClick={() => setAddOpen(true)}>
-          Add Word
+    <Box sx={{ maxWidth: 900, mx: 'auto', p: 4 }}>
+      <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
+        <PhosphorText variant="label" sx={{ color: '#77797c' }}>
+          CUSTOM DICTIONARY — {data?.total ?? 0} WORDS
+        </PhosphorText>
+        <Button variant="contained" startIcon={<AddIcon />} onClick={() => setAddOpen(true)} size="small">
+          ADD
         </Button>
       </Box>
 
-      {/* Search */}
       <TextField
-        placeholder="Search words..."
+        placeholder="SEARCH..."
         value={search}
         onChange={(e) => setSearch(e.target.value)}
         fullWidth
-        sx={{ mb: 3 }}
-        slotProps={{
-          input: {
-            startAdornment: (
-              <InputAdornment position="start">
-                <SearchIcon sx={{ color: d3roPalette.text.label }} />
-              </InputAdornment>
-            )
-          }
-        }}
+        sx={{ mb: 3, '& .MuiInputBase-input': { fontFamily: MONO, fontSize: '12px', letterSpacing: '0.5px' } }}
+        slotProps={{ input: { startAdornment: <InputAdornment position="start"><SearchIcon sx={{ color: '#77797c', fontSize: 18 }} /></InputAdornment> } }}
       />
 
       {loading ? (
-        <Typography color="text.secondary">Loading...</Typography>
+        <PhosphorText variant="dim">LOADING...</PhosphorText>
       ) : !data || data.entries.length === 0 ? (
-        <Card>
-          <CardContent sx={{ py: 6, textAlign: 'center' }}>
-            <Typography color="text.secondary">
-              {search ? 'No words found.' : 'No words yet. Add custom words to improve recognition.'}
-            </Typography>
-          </CardContent>
-        </Card>
+        <MetalCard>
+          <Box sx={{ py: 6, textAlign: 'center' }}>
+            <PhosphorText variant="dim">{search ? 'NO RESULTS' : 'NO WORDS — ADD CUSTOM WORDS FOR BETTER STT'}</PhosphorText>
+          </Box>
+        </MetalCard>
       ) : (
         <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
           {data.entries.map((entry: DictionaryEntry) => (
-            <Card key={entry.id} sx={{ p: 0 }}>
-              <CardContent sx={{ p: 2, '&:last-child': { pb: 2 }, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-                <Box sx={{ flex: 1 }}>
+            <MetalCard key={entry.id}>
+              <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+                <Box>
                   <Box sx={{ display: 'flex', alignItems: 'baseline', gap: 1.5 }}>
-                    <Typography sx={{ fontSize: '14px', fontWeight: 600 }}>
-                      {entry.word}
-                    </Typography>
+                    <Box sx={{ fontSize: '14px', fontWeight: 600, color: '#fff' }}>{entry.word}</Box>
                     {entry.pronunciation && (
-                      <Typography sx={{ fontFamily: d3roFontMono, fontSize: '12px', color: d3roPalette.text.label }}>
-                        [{entry.pronunciation}]
-                      </Typography>
+                      <Box sx={{ fontFamily: MONO, fontSize: '11px', color: '#5c2615' }}>[{entry.pronunciation}]</Box>
                     )}
                   </Box>
-                  <Box sx={{ display: 'flex', gap: 1, mt: 1 }}>
-                    <Chip label={entry.category.toUpperCase()} size="small" color={CATEGORY_COLOR[entry.category] ?? 'primary'} />
-                    <Typography sx={{ fontFamily: d3roFontMono, fontSize: '11px', color: d3roPalette.text.label, alignSelf: 'center' }}>
-                      {entry.usageCount}× used
-                    </Typography>
+                  <Box sx={{ fontFamily: MONO, fontSize: '10px', color: '#77797c', mt: 0.5, letterSpacing: '0.5px' }}>
+                    {entry.category.toUpperCase()} · {entry.usageCount}× USED
                   </Box>
                 </Box>
-                <IconButton
-                  size="small"
-                  onClick={() => handleDelete(entry.id)}
-                  sx={{ color: d3roPalette.text.label, '&:hover': { color: d3roPalette.tag.red } }}
-                >
-                  <DeleteIcon fontSize="small" />
+                <IconButton size="small" onClick={() => { window.electronAPI.dictionary.delete({ id: entry.id }); loadData() }}
+                  sx={{ color: '#77797c', '&:hover': { color: '#ef4444' } }}>
+                  <DeleteIcon sx={{ fontSize: 16 }} />
                 </IconButton>
-              </CardContent>
-            </Card>
+              </Box>
+            </MetalCard>
           ))}
         </Box>
       )}
 
-      {/* Add Word Dialog */}
       <Dialog open={addOpen} onClose={() => setAddOpen(false)} maxWidth="xs" fullWidth>
         <DialogTitle sx={{ fontWeight: 700 }}>Add Word</DialogTitle>
         <DialogContent>
-          <TextField
-            label="Word"
-            value={newWord}
-            onChange={(e) => setNewWord(e.target.value)}
-            fullWidth
-            autoFocus
-            sx={{ mt: 1 }}
-          />
-          <TextField
-            label="Pronunciation (optional)"
-            value={newPronunciation}
-            onChange={(e) => setNewPronunciation(e.target.value)}
-            fullWidth
-            sx={{ mt: 2 }}
-          />
+          <TextField label="Word" value={newWord} onChange={(e) => setNewWord(e.target.value)} fullWidth autoFocus sx={{ mt: 1 }} />
+          <TextField label="Pronunciation (optional)" value={newPronunciation} onChange={(e) => setNewPronunciation(e.target.value)} fullWidth sx={{ mt: 2 }} />
         </DialogContent>
         <DialogActions sx={{ px: 3, pb: 2 }}>
           <Button onClick={() => setAddOpen(false)} color="secondary" variant="contained">Cancel</Button>

src/renderer/pages/HistoryPage.tsx

@@ -1,30 +1,19 @@
 // src/renderer/pages/HistoryPage.tsx
-// 08-design-system.md SSOT: 다크 카드, 앰버 악센트, 태그 시스템
+// 인스트루먼트 미학: MetalCard + PhosphorText + Led
 
 import { useState, useEffect, useCallback } from 'react'
-import {
-  Box,
-  Typography,
-  TextField,
-  IconButton,
-  Chip,
-  Pagination,
-  Card,
-  CardContent,
-  InputAdornment
-} from '@mui/material'
+import { Box, TextField, IconButton, InputAdornment } from '@mui/material'
 import SearchIcon from '@mui/icons-material/Search'
 import DeleteIcon from '@mui/icons-material/Delete'
 import ContentCopyIcon from '@mui/icons-material/ContentCopy'
-import { d3roPalette, d3roFontMono } from '../theme'
+import { MetalCard, PhosphorText, Led } from '../components/ds'
 import type { HistoryEntry, HistoryPage as HistoryPageData } from '@shared/types'
 
 const PAGE_SIZE = 20
+const MONO = 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace'
 
 function formatDate(ts: number): string {
-  return new Date(ts).toLocaleString('ko-KR', {
-    month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit'
-  })
+  return new Date(ts).toLocaleString('ko-KR', { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' })
 }
 
 function formatDuration(sec: number): string {
@@ -33,158 +22,87 @@ function formatDuration(sec: number): string {
   return `${m}:${s.toString().padStart(2, '0')}`
 }
 
-const MODE_TAG: Record<string, 'primary' | 'secondary' | 'warning'> = {
-  dictation: 'primary',
-  translate: 'secondary',
-  command: 'warning',
-}
-
 export function HistoryPage(): React.ReactElement {
   const [data, setData] = useState<HistoryPageData | null>(null)
-  const [page, setPage] = useState(0)
   const [search, setSearch] = useState('')
   const [loading, setLoading] = useState(true)
 
   const loadData = useCallback(async () => {
     setLoading(true)
     const result = search.trim()
-      ? await window.electronAPI.history.search({ query: search, page, pageSize: PAGE_SIZE })
-      : await window.electronAPI.history.getAll({ page, pageSize: PAGE_SIZE })
+      ? await window.electronAPI.history.search({ query: search, page: 0, pageSize: PAGE_SIZE })
+      : await window.electronAPI.history.getAll({ page: 0, pageSize: PAGE_SIZE })
     if (result.success) setData(result.data)
     setLoading(false)
-  }, [page, search])
+  }, [search])
 
   useEffect(() => { loadData() }, [loadData])
 
-  const handleDelete = async (id: string) => {
-    await window.electronAPI.history.delete({ id })
-    loadData()
-  }
-
-  const handleCopy = (text: string) => {
-    navigator.clipboard.writeText(text)
-  }
-
   return (
-    <Box sx={{ maxWidth: 1200, mx: 'auto', p: 5 }}>
-      {/* Header */}
-      <Box sx={{ mb: 3 }}>
-        <Typography sx={{ fontSize: '22px', fontWeight: 700 }}>History</Typography>
-        <Typography sx={{ fontSize: '14px', color: 'text.secondary', mt: 0.5 }}>
-          Transcription history
-        </Typography>
-      </Box>
+    <Box sx={{ maxWidth: 900, mx: 'auto', p: 4 }}>
+      <PhosphorText variant="label" sx={{ mb: 2, display: 'block', color: '#77797c' }}>
+        TRANSCRIPTION LOG — {data?.total ?? 0} ENTRIES
+      </PhosphorText>
 
-      {/* Search */}
       <TextField
-        placeholder="Search transcriptions..."
+        placeholder="SEARCH..."
         value={search}
-        onChange={(e) => { setSearch(e.target.value); setPage(0) }}
+        onChange={(e) => setSearch(e.target.value)}
         fullWidth
-        sx={{ mb: 3 }}
+        sx={{
+          mb: 3,
+          '& .MuiInputBase-input': { fontFamily: MONO, fontSize: '12px', letterSpacing: '0.5px' },
+        }}
         slotProps={{
           input: {
-            startAdornment: (
-              <InputAdornment position="start">
-                <SearchIcon sx={{ color: d3roPalette.text.label }} />
-              </InputAdornment>
-            )
-          }
+            startAdornment: <InputAdornment position="start"><SearchIcon sx={{ color: '#77797c', fontSize: 18 }} /></InputAdornment>,
+          },
         }}
       />
 
       {loading ? (
-        <Typography color="text.secondary">Loading...</Typography>
+        <PhosphorText variant="dim">LOADING...</PhosphorText>
       ) : !data || data.entries.length === 0 ? (
-        <Card>
-          <CardContent sx={{ py: 6, textAlign: 'center' }}>
-            <Typography color="text.secondary">
-              {search ? 'No results found.' : 'No history yet. Start recording!'}
-            </Typography>
-          </CardContent>
-        </Card>
-      ) : (
-        <>
-          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>
-            {data.entries.map((entry: HistoryEntry) => (
-              <Card key={entry.id} sx={{ p: 0 }}>
-                <CardContent sx={{ p: 2.5, '&:last-child': { pb: 2.5 } }}>
-                  <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
-                    {/* Text */}
-                    <Box sx={{ flex: 1, mr: 2 }}>
-                      <Typography
-                        sx={{
-                          fontSize: '14px',
-                          lineHeight: 1.5,
-                          color: 'text.primary',
-                          overflow: 'hidden',
-                          textOverflow: 'ellipsis',
-                          display: '-webkit-box',
-                          WebkitLineClamp: 2,
-                          WebkitBoxOrient: 'vertical',
-                        }}
-                      >
-                        {entry.polishedText || entry.originalText}
-                      </Typography>
-
-                      {/* Meta row */}
-                      <Box sx={{ display: 'flex', gap: 1, mt: 1.5, alignItems: 'center', flexWrap: 'wrap' }}>
-                        <Typography
-                          sx={{
-                            fontFamily: d3roFontMono,
-                            fontSize: '11px',
-                            color: d3roPalette.text.label,
-                          }}
-                        >
-                          {formatDate(entry.createdAt)}
-                        </Typography>
-                        <Chip label={formatDuration(entry.duration)} size="small" color="primary" />
-                        {entry.detectedLanguage && (
-                          <Chip label={entry.detectedLanguage.toUpperCase()} size="small" color="secondary" />
-                        )}
-                        <Chip label={entry.mode.toUpperCase()} size="small" color={MODE_TAG[entry.mode] ?? 'primary'} />
-                      </Box>
-                    </Box>
-
-                    {/* Actions */}
-                    <Box sx={{ display: 'flex', gap: 0.5, flexShrink: 0 }}>
-                      <IconButton
-                        size="small"
-                        onClick={() => handleCopy(entry.polishedText || entry.originalText)}
-                        sx={{ color: d3roPalette.text.label, '&:hover': { color: d3roPalette.accent.amber } }}
-                      >
-                        <ContentCopyIcon fontSize="small" />
-                      </IconButton>
-                      <IconButton
-                        size="small"
-                        onClick={() => handleDelete(entry.id)}
-                        sx={{ color: d3roPalette.text.label, '&:hover': { color: d3roPalette.tag.red } }}
-                      >
-                        <DeleteIcon fontSize="small" />
-                      </IconButton>
-                    </Box>
-                  </Box>
-                </CardContent>
-              </Card>
-            ))}
+        <MetalCard>
+          <Box sx={{ py: 6, textAlign: 'center' }}>
+            <PhosphorText variant="dim">{search ? 'NO RESULTS' : 'NO HISTORY — START RECORDING'}</PhosphorText>
           </Box>
-
-          {data.totalPages > 1 && (
-            <Box sx={{ display: 'flex', justifyContent: 'center', mt: 3 }}>
-              <Pagination
-                count={data.totalPages}
-                page={page + 1}
-                onChange={(_, p) => setPage(p - 1)}
-                sx={{
-                  '& .Mui-selected': {
-                    bgcolor: `${d3roPalette.accent.amberDim} !important`,
-                    color: d3roPalette.accent.amber,
-                  }
-                }}
-              />
-            </Box>
-          )}
-        </>
+        </MetalCard>
+      ) : (
+        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
+          {data.entries.map((entry: HistoryEntry) => (
+            <MetalCard key={entry.id}>
+              <Box sx={{ display: 'flex', alignItems: 'flex-start', gap: 2 }}>
+                <Led color={entry.status === 'completed' ? 'green' : 'red'} size={6} />
+                <Box sx={{ flex: 1, minWidth: 0 }}>
+                  <Box sx={{
+                    fontSize: '13px', color: '#fff', lineHeight: 1.5,
+                    overflow: 'hidden', textOverflow: 'ellipsis',
+                    display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical',
+                  }}>
+                    {entry.polishedText || entry.originalText}
+                  </Box>
+                  <Box sx={{ display: 'flex', gap: 2, mt: 1, fontFamily: MONO, fontSize: '10px', color: '#5c2615', letterSpacing: '0.5px' }}>
+                    <span>{formatDate(entry.createdAt)}</span>
+                    <span>{formatDuration(entry.duration)}</span>
+                    {entry.detectedLanguage && <span>{entry.detectedLanguage.toUpperCase()}</span>}
+                    <span>{entry.mode.toUpperCase()}</span>
+                  </Box>
+                </Box>
+                <Box sx={{ display: 'flex', gap: 0.5, flexShrink: 0 }}>
+                  <IconButton size="small" onClick={() => navigator.clipboard.writeText(entry.polishedText || entry.originalText)}
+                    sx={{ color: '#77797c', '&:hover': { color: '#f25b29' } }}>
+                    <ContentCopyIcon sx={{ fontSize: 16 }} />
+                  </IconButton>
+                  <IconButton size="small" onClick={() => { window.electronAPI.history.delete({ id: entry.id }); loadData() }}
+                    sx={{ color: '#77797c', '&:hover': { color: '#ef4444' } }}>
+                    <DeleteIcon sx={{ fontSize: 16 }} />
+                  </IconButton>
+                </Box>
+              </Box>
+            </MetalCard>
+          ))}
+        </Box>
       )}
     </Box>
   )