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

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

src/renderer/components/AppLayout.tsx

@@ -1,23 +1,14 @@
 // src/renderer/components/AppLayout.tsx
-// 08-design-system.md SSOT 적용. 앰버 악센트, LED, 다크 카드.
+// 시안 A+B 융합: 인스트루먼트 섀시 사이드바 + 콘텐츠 영역
 
 import { useState } from 'react'
-import {
+import { Box, Typography, Tooltip } from '@mui/material'
-  Box,
-  Drawer,
-  List,
-  ListItemButton,
-  ListItemIcon,
-  ListItemText,
-  Divider,
-  Typography
-} from '@mui/material'
 import DashboardIcon from '@mui/icons-material/Dashboard'
 import HistoryIcon from '@mui/icons-material/History'
 import MenuBookIcon from '@mui/icons-material/MenuBook'
 import ExtensionIcon from '@mui/icons-material/Extension'
 import SettingsIcon from '@mui/icons-material/Settings'
-import { d3roPalette, d3roFontMono } from '../theme'
+import { Led } from './ds'
 import { DashboardPage } from '../pages/DashboardPage'
 import { HistoryPage } from '../pages/HistoryPage'
 import { DictionaryPage } from '../pages/DictionaryPage'
@@ -27,13 +18,11 @@ import { StatusBar } from './StatusBar'
 
 type Route = 'dashboard' | 'history' | 'dictionary' | 'commands'
 
-const DRAWER_WIDTH = 240
-
 const NAV_ITEMS: Array<{ route: Route; label: string; icon: React.ReactElement }> = [
-  { route: 'dashboard', label: 'Dashboard', icon: <DashboardIcon /> },
+  { route: 'dashboard', label: 'DASH', icon: <DashboardIcon sx={{ fontSize: 20 }} /> },
-  { route: 'history', label: 'History', icon: <HistoryIcon /> },
+  { route: 'history', label: 'HIST', icon: <HistoryIcon sx={{ fontSize: 20 }} /> },
-  { route: 'dictionary', label: 'Dictionary', icon: <MenuBookIcon /> },
+  { route: 'dictionary', label: 'DICT', icon: <MenuBookIcon sx={{ fontSize: 20 }} /> },
-  { route: 'commands', label: 'Commands', icon: <ExtensionIcon /> }
+  { route: 'commands', label: 'CMD', icon: <ExtensionIcon sx={{ fontSize: 20 }} /> },
 ]
 
 export function AppLayout(): React.ReactElement {
@@ -41,132 +30,126 @@ export function AppLayout(): React.ReactElement {
   const [settingsOpen, setSettingsOpen] = useState(false)
 
   return (
-    <Box sx={{ display: 'flex', height: '100vh', flexDirection: 'column' }}>
+    <Box sx={{ display: 'flex', height: '100vh', flexDirection: 'column', bgcolor: '#19191b' }}>
       <Box sx={{ display: 'flex', flex: 1, overflow: 'hidden' }}>
-        {/* Sidebar Drawer */}
+        {/* ── 사이드바: 인스트루먼트 섀시 스타일 ─── */}
-        <Drawer
+        <Box
-          variant="permanent"
           sx={{
-            width: DRAWER_WIDTH,
+            width: 72,
             flexShrink: 0,
-            '& .MuiDrawer-paper': {
+            bgcolor: '#1e1f21',
-              width: DRAWER_WIDTH,
+            borderRight: '1px solid rgba(255,255,255,0.04)',
-              boxSizing: 'border-box'
+            display: 'flex',
-            }
+            flexDirection: 'column',
+            alignItems: 'center',
+            py: 2,
+            gap: 1,
           }}
         >
-          {/* Header — 앰버 악센트 로고 */}
+          {/* 로고 LED */}
-          <Box sx={{ p: 2.5, display: 'flex', alignItems: 'center', gap: 1.5 }}>
+          <Box sx={{ mb: 2, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 1 }}>
-            {/* LED indicator */}
+            <Led color="amber" pulse size={10} />
-            <Box
-              sx={{
-                width: 8,
-                height: 8,
-                borderRadius: '50%',
-                bgcolor: d3roPalette.accent.amber,
-                boxShadow: `0 0 6px ${d3roPalette.accent.amberGlow}, 0 0 16px ${d3roPalette.accent.amberDim}`,
-                animation: 'led-pulse 1.5s ease-in-out infinite',
-                '@keyframes led-pulse': {
-                  '0%, 100%': { opacity: 1 },
-                  '50%': { opacity: 0.5 },
-                },
-                flexShrink: 0,
-              }}
-            />
             <Typography
-              variant="h6"
-              noWrap
               sx={{
+                fontSize: '8px',
+                fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Consolas, monospace',
+                letterSpacing: '1.5px',
+                color: '#5c2615',
                 fontWeight: 700,
-                fontSize: '14px',
-                letterSpacing: '0.05em',
-                color: d3roPalette.text.primary,
               }}
             >
-              D3RO VOICE
+              D3RO
-            </Typography>
-            <Typography
-              sx={{
-                fontFamily: d3roFontMono,
-                fontSize: '10px',
-                color: d3roPalette.text.label,
-                letterSpacing: '0.05em',
-              }}
-            >
-              v1.0
             </Typography>
           </Box>
 
-          <Divider sx={{ borderColor: d3roPalette.border.subtle }} />
+          {/* 네비게이션 버튼 */}
-
+          {NAV_ITEMS.map((item) => {
-          {/* Navigation label */}
+            const isActive = currentRoute === item.route
-          <Typography
+            return (
-            sx={{
+              <Tooltip key={item.route} title={item.label} placement="right" arrow>
-              px: 2.5,
+                <Box
-              pt: 2,
+                  onClick={() => setCurrentRoute(item.route)}
-              pb: 1,
-              fontSize: '11px',
-              fontWeight: 600,
-              letterSpacing: '0.1em',
-              textTransform: 'uppercase',
-              color: d3roPalette.text.label,
-            }}
-          >
-            Navigation
-          </Typography>
-
-          <List sx={{ flex: 1, pt: 0 }}>
-            {NAV_ITEMS.map((item) => (
-              <ListItemButton
-                key={item.route}
-                selected={currentRoute === item.route}
-                onClick={() => setCurrentRoute(item.route)}
-                sx={{ my: 0.5 }}
-              >
-                <ListItemIcon
                   sx={{
-                    minWidth: 36,
+                    width: 48,
-                    color: currentRoute === item.route
+                    height: 48,
-                      ? d3roPalette.accent.amber
+                    borderRadius: '8px',
-                      : d3roPalette.text.label,
+                    display: 'flex',
+                    flexDirection: 'column',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    gap: 0.5,
+                    cursor: 'pointer',
+                    bgcolor: isActive ? '#242528' : 'transparent',
+                    boxShadow: isActive
+                      ? 'inset 0 2px 6px rgba(0,0,0,0.8), inset 0 0 0 1px #000'
+                      : '0 2px 4px rgba(0,0,0,0.3), inset 0 1px 1px rgba(255,255,255,0.06)',
+                    color: isActive ? '#f25b29' : '#77797c',
+                    transition: 'all 0.05s linear',
+                    transform: isActive ? 'translateY(1px)' : 'none',
+                    '&:active': {
+                      transform: 'translateY(2px)',
+                      boxShadow: 'inset 0 2px 4px rgba(0,0,0,0.6)',
+                    },
+                    '&:hover': {
+                      color: isActive ? '#f25b29' : '#aaa',
+                    },
                   }}
                 >
                   {item.icon}
-                </ListItemIcon>
+                  <Typography
-                <ListItemText
+                    sx={{
-                  primary={item.label}
+                      fontSize: '7px',
-                  primaryTypographyProps={{
+                      fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Consolas, monospace',
-                    fontSize: '14px',
+                      fontWeight: 700,
-                    fontWeight: currentRoute === item.route ? 600 : 400,
+                      letterSpacing: '0.5px',
-                  }}
+                    }}
-                />
+                  >
-              </ListItemButton>
+                    {item.label}
-            ))}
+                  </Typography>
-          </List>
+                </Box>
+              </Tooltip>
+            )
+          })}
 
-          <Divider sx={{ borderColor: d3roPalette.border.subtle }} />
+          {/* 스페이서 */}
+          <Box sx={{ flex: 1 }} />
 
-          {/* Bottom settings */}
+          {/* Settings */}
-          <List sx={{ pb: 1 }}>
+          <Tooltip title="SETTINGS" placement="right" arrow>
-            <ListItemButton sx={{ my: 0.5 }} onClick={() => setSettingsOpen(true)}>
+            <Box
-              <ListItemIcon sx={{ minWidth: 36, color: d3roPalette.text.label }}>
+              onClick={() => setSettingsOpen(true)}
-                <SettingsIcon />
+              sx={{
-              </ListItemIcon>
+                width: 48,
-              <ListItemText
+                height: 48,
-                primary="Settings"
+                borderRadius: '8px',
-                primaryTypographyProps={{ fontSize: '14px' }}
+                display: 'flex',
-              />
+                alignItems: 'center',
-            </ListItemButton>
+                justifyContent: 'center',
-          </List>
+                cursor: 'pointer',
-        </Drawer>
+                color: '#77797c',
+                boxShadow: '0 2px 4px rgba(0,0,0,0.3), inset 0 1px 1px rgba(255,255,255,0.06)',
+                transition: 'all 0.05s linear',
+                '&:active': {
+                  transform: 'translateY(2px)',
+                  boxShadow: 'inset 0 2px 4px rgba(0,0,0,0.6)',
+                },
+                '&:hover': { color: '#aaa' },
+              }}
+            >
+              <SettingsIcon sx={{ fontSize: 20 }} />
+            </Box>
+          </Tooltip>
+        </Box>
 
-        {/* Content Area */}
+        {/* ── 콘텐츠 영역 ────────────────────────── */}
         <Box
           component="main"
           sx={{
             flexGrow: 1,
             overflow: 'auto',
-            bgcolor: d3roPalette.bg.app,
+            bgcolor: '#19191b',
+            // 미묘한 방사형 비네팅 (시안 A 배경)
+            background: 'radial-gradient(circle at 50% 30%, #252628 0%, #19191b 70%)',
           }}
         >
           {currentRoute === 'dashboard' && <DashboardPage />}

src/renderer/components/StatusBar.tsx

@@ -1,50 +1,29 @@
 // src/renderer/components/StatusBar.tsx
-// 하단 상태 표시: LED 인디케이터 + 태그 시스템. 08-design-system.md SSOT.
+// 인스트루먼트 섀시 하단 — 각인 스타일 상태 표시
 
 import { useState, useEffect } from 'react'
-import { Box, Typography, Chip } from '@mui/material'
+import { Box, Typography } from '@mui/material'
-import { d3roPalette, d3roFontMono } from '../theme'
+import { Led } from './ds'
 import type { LLMStatus } from '@shared/types'
 
-function Led({ active, color }: { active: boolean; color?: string }): React.ReactElement {
+const MONO = 'MONO_PLACEHOLDER'
-  const c = color ?? d3roPalette.tag.green
-  return (
-    <Box
-      sx={{
-        width: 6,
-        height: 6,
-        borderRadius: '50%',
-        bgcolor: active ? c : d3roPalette.text.disabled,
-        boxShadow: active ? `0 0 4px ${c}, 0 0 8px ${c}40` : 'none',
-        flexShrink: 0,
-        transition: 'background 0.3s ease, box-shadow 0.3s ease',
-      }}
-    />
-  )
-}
 
 export function StatusBar(): React.ReactElement {
   const [llmStatus, setLlmStatus] = useState<LLMStatus | null>(null)
 
   useEffect(() => {
-    window.electronAPI.llm.getStatus().then((result) => {
+    window.electronAPI.llm.getStatus().then((r) => {
-      if (result.success) setLlmStatus(result.data)
+      if (r.success) setLlmStatus(r.data)
-    })
-
-    const unsub = window.electronAPI.llm.onStatusChanged((event) => {
-      setLlmStatus(event.status)
     })
 
+    const unsub = window.electronAPI.llm.onStatusChanged((e) => setLlmStatus(e.status))
     const interval = setInterval(() => {
-      window.electronAPI.llm.getStatus().then((result) => {
+      window.electronAPI.llm.getStatus().then((r) => {
-        if (result.success) setLlmStatus(result.data)
+        if (r.success) setLlmStatus(r.data)
       })
     }, 5000)
 
-    return () => {
+    return () => { unsub(); clearInterval(interval) }
-      unsub()
-      clearInterval(interval)
-    }
   }, [])
 
   const connected = llmStatus?.connectionState === 'connected'
@@ -56,50 +35,29 @@ export function StatusBar(): React.ReactElement {
         alignItems: 'center',
         gap: 2,
         px: 2,
-        py: 0.75,
+        py: 0.5,
-        borderTop: `1px solid ${d3roPalette.border.subtle}`,
+        borderTop: '1px solid rgba(255,255,255,0.04)',
-        bgcolor: 'background.paper',
+        bgcolor: '#1e1f21',
-        minHeight: 32,
+        minHeight: 28,
       }}
     >
-      {/* Ollama 상태 */}
       <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75 }}>
-        <Led active={connected} color={connected ? d3roPalette.tag.green : d3roPalette.tag.red} />
+        <Led color={connected ? 'green' : 'red'} size={6} />
-        <Typography
+        <Typography sx={{ fontFamily: MONO, fontSize: '9px', color: '#77797c', letterSpacing: '1px', fontWeight: 700 }}>
-          sx={{
-            fontFamily: d3roFontMono,
-            fontSize: '11px',
-            color: d3roPalette.text.secondary,
-            letterSpacing: '0.02em',
-          }}
-        >
           {connected ? 'OLLAMA' : 'OFFLINE'}
         </Typography>
       </Box>
 
-      {/* 활성 모델 태그 */}
       {llmStatus?.activeModel && (
-        <Chip
+        <Typography sx={{ fontFamily: MONO, fontSize: '9px', color: '#5c2615', letterSpacing: '0.5px' }}>
-          label={llmStatus.activeModel}
+          {llmStatus.activeModel.toUpperCase()}
-          size="small"
+        </Typography>
-          color="primary"
-          sx={{ height: 20, '& .MuiChip-label': { px: 1, fontSize: '10px' } }}
-        />
       )}
 
-      {/* 스페이서 */}
       <Box sx={{ flex: 1 }} />
 
-      {/* 핫키 힌트 */}
+      <Typography sx={{ fontFamily: MONO, fontSize: '9px', color: '#3a3b3f', letterSpacing: '1px', fontWeight: 700 }}>
-      <Typography
+        PRECISION DATA LINK
-        sx={{
-          fontFamily: d3roFontMono,
-          fontSize: '10px',
-          color: d3roPalette.text.label,
-          letterSpacing: '0.05em',
-        }}
-      >
-        RIGHT ALT — DICTATE
       </Typography>
     </Box>
   )

src/renderer/components/ds/CrtDisplay.tsx

@@ -0,0 +1,274 @@
+// src/renderer/components/ds/CrtDisplay.tsx
+// 시안 A: CRT 디스플레이 — WebGL 셰이더 (스캔라인, 비네팅, 노이즈, 글리치, 파형)
+
+import { useRef, useEffect, useCallback } from 'react'
+import { Box } from '@mui/material'
+
+// ── WebGL 유틸 ─────────────────────────────────────────
+
+function createShader(gl: WebGLRenderingContext, type: number, source: string): WebGLShader | null {
+  const shader = gl.createShader(type)
+  if (!shader) return null
+  gl.shaderSource(shader, source)
+  gl.compileShader(shader)
+  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+    gl.deleteShader(shader)
+    return null
+  }
+  return shader
+}
+
+function createProgram(gl: WebGLRenderingContext, vsSource: string, fsSource: string): WebGLProgram | null {
+  const vs = createShader(gl, gl.VERTEX_SHADER, vsSource)
+  const fs = createShader(gl, gl.FRAGMENT_SHADER, fsSource)
+  if (!vs || !fs) return null
+  const prog = gl.createProgram()
+  if (!prog) return null
+  gl.attachShader(prog, vs)
+  gl.attachShader(prog, fs)
+  gl.linkProgram(prog)
+  return prog
+}
+
+const VERTEX_SHADER = `
+  attribute vec2 position;
+  varying vec2 vUv;
+  void main() {
+    gl_Position = vec4(position, 0.0, 1.0);
+    vUv = position * 0.5 + 0.5;
+  }
+`
+
+const FRAGMENT_SHADER = `
+  precision highp float;
+  varying vec2 vUv;
+  uniform float u_time;
+  uniform float u_glitch;
+  uniform float u_amp;
+  uniform float u_freq;
+
+  float random(vec2 st) { return fract(sin(dot(st.xy, vec2(12.9898,78.233))) * 43758.5453123); }
+
+  void main() {
+    vec2 uv = vUv;
+
+    // Glitch displacement
+    if (u_glitch > 0.0) {
+      float gOffset = (random(vec2(uv.y * 5.0, u_time)) - 0.5) * u_glitch * 0.1;
+      uv.x += gOffset;
+    }
+
+    // Base phosphor background
+    vec3 color = vec3(0.02, 0.015, 0.01);
+
+    // Background Grid
+    float gridX = step(0.98, fract(uv.x * 15.0));
+    float gridY = step(0.98, fract(uv.y * 10.0));
+    color += vec3(0.1, 0.04, 0.02) * max(gridX, gridY) * (1.0 - u_glitch);
+
+    // Oscilloscope Waveform
+    float t = u_time * 0.5 + u_glitch * random(uv) * 0.1;
+    float waveY = sin((uv.x * u_freq) + t) * u_amp;
+    float waveDist = abs((uv.y - 0.5) - waveY);
+    float lineThick = 0.005 + (u_glitch * 0.02);
+    float waveGlow = smoothstep(lineThick * 4.0, 0.0, waveDist);
+    float waveCore = smoothstep(lineThick, 0.0, waveDist);
+
+    // Amber wave (#f25b29)
+    vec3 waveColor = vec3(0.95, 0.35, 0.16);
+    color += waveColor * waveCore;
+    color += waveColor * 0.4 * waveGlow;
+
+    // Scanlines
+    float scanline = sin(uv.y * 800.0 - u_time * 10.0) * 0.04;
+    color -= scanline;
+
+    // Noise
+    float noise = random(uv + u_time) * 0.08;
+    color += noise;
+
+    // Vignette
+    float dist = distance(vUv, vec2(0.5));
+    float vig = smoothstep(0.8, 0.4, dist);
+    color *= vig;
+
+    // Edge darkening
+    color *= smoothstep(0.0, 0.02, vUv.x) * smoothstep(1.0, 0.98, vUv.x);
+    color *= smoothstep(0.0, 0.05, vUv.y) * smoothstep(1.0, 0.95, vUv.y);
+
+    gl_FragColor = vec4(color, 1.0);
+  }
+`
+
+const QUAD = new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1])
+
+// ── Props ──────────────────────────────────────────────
+
+interface CrtDisplayProps {
+  /** 파형 진폭 (0.0 ~ 1.0) */
+  amplitude?: number
+  /** 파형 주파수 */
+  frequency?: number
+  /** 글리치 트리거 (변경 시 글리치 발생) */
+  glitchTrigger?: number
+  /** 오버레이 콘텐츠 (인광 텍스트 등) */
+  children?: React.ReactNode
+  /** 높이 (기본 280px) */
+  height?: number | string
+}
+
+export function CrtDisplay({
+  amplitude = 0.1,
+  frequency = 8.0,
+  glitchTrigger = 0,
+  children,
+  height = 280,
+}: CrtDisplayProps): React.ReactElement {
+  const canvasRef = useRef<HTMLCanvasElement>(null)
+  const glRef = useRef<{
+    gl: WebGLRenderingContext
+    uTime: WebGLUniformLocation | null
+    uGlitch: WebGLUniformLocation | null
+    uAmp: WebGLUniformLocation | null
+    uFreq: WebGLUniformLocation | null
+  } | null>(null)
+  const animRef = useRef<number>(0)
+  const startTimeRef = useRef(Date.now())
+  const glitchRef = useRef(0)
+  const ampRef = useRef(amplitude)
+  const freqRef = useRef(frequency)
+  const currentAmpRef = useRef(amplitude)
+  const currentFreqRef = useRef(frequency)
+
+  // amplitude/frequency 변경 추적
+  useEffect(() => {
+    ampRef.current = amplitude
+    freqRef.current = frequency
+  }, [amplitude, frequency])
+
+  // 글리치 트리거
+  useEffect(() => {
+    if (glitchTrigger > 0) {
+      glitchRef.current = 1.0
+    }
+  }, [glitchTrigger])
+
+  const render = useCallback(() => {
+    const ctx = glRef.current
+    if (!ctx) return
+
+    const { gl, uTime, uGlitch, uAmp, uFreq } = ctx
+
+    // Smoothing
+    currentAmpRef.current += (ampRef.current - currentAmpRef.current) * 0.1
+    currentFreqRef.current += (freqRef.current - currentFreqRef.current) * 0.1
+    glitchRef.current *= 0.85
+
+    gl.uniform1f(uTime, (Date.now() - startTimeRef.current) / 1000)
+    gl.uniform1f(uGlitch, glitchRef.current)
+    gl.uniform1f(uAmp, currentAmpRef.current)
+    gl.uniform1f(uFreq, currentFreqRef.current)
+
+    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4)
+    animRef.current = requestAnimationFrame(render)
+  }, [])
+
+  useEffect(() => {
+    const canvas = canvasRef.current
+    if (!canvas) return
+
+    const gl = canvas.getContext('webgl', { alpha: true })
+    if (!gl) return
+
+    canvas.width = canvas.clientWidth * 2
+    canvas.height = canvas.clientHeight * 2
+    gl.viewport(0, 0, canvas.width, canvas.height)
+
+    const prog = createProgram(gl, VERTEX_SHADER, FRAGMENT_SHADER)
+    if (!prog) return
+
+    gl.useProgram(prog)
+
+    const buffer = gl.createBuffer()
+    gl.bindBuffer(gl.ARRAY_BUFFER, buffer)
+    gl.bufferData(gl.ARRAY_BUFFER, QUAD, gl.STATIC_DRAW)
+
+    const posLoc = gl.getAttribLocation(prog, 'position')
+    gl.enableVertexAttribArray(posLoc)
+    gl.vertexAttribPointer(posLoc, 2, gl.FLOAT, false, 0, 0)
+
+    glRef.current = {
+      gl,
+      uTime: gl.getUniformLocation(prog, 'u_time'),
+      uGlitch: gl.getUniformLocation(prog, 'u_glitch'),
+      uAmp: gl.getUniformLocation(prog, 'u_amp'),
+      uFreq: gl.getUniformLocation(prog, 'u_freq'),
+    }
+
+    startTimeRef.current = Date.now()
+    animRef.current = requestAnimationFrame(render)
+
+    return () => {
+      cancelAnimationFrame(animRef.current)
+    }
+  }, [render])
+
+  return (
+    <Box
+      sx={{
+        position: 'relative',
+        height,
+        bgcolor: '#1a1a1c',
+        borderRadius: '8px',
+        boxShadow: 'inset 0 4px 12px rgba(0,0,0,0.9), inset 0 0 0 1px #000, 0 1px 1px rgba(255,255,255,0.1)',
+        overflow: 'hidden',
+      }}
+    >
+      {/* Glass surface */}
+      <Box
+        sx={{
+          position: 'absolute',
+          inset: '2px',
+          borderRadius: '6px',
+          bgcolor: '#050605',
+          overflow: 'hidden',
+          boxShadow: 'inset 0 0 20px rgba(0,0,0,0.8)',
+        }}
+      >
+        <canvas
+          ref={canvasRef}
+          style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}
+        />
+
+        {/* Glass reflection */}
+        <Box
+          sx={{
+            position: 'absolute',
+            top: 0, left: 0, right: 0, bottom: '50%',
+            background: 'linear-gradient(180deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0) 100%)',
+            pointerEvents: 'none',
+            zIndex: 10,
+          }}
+        />
+      </Box>
+
+      {/* Content overlay (phosphor text) */}
+      <Box
+        sx={{
+          position: 'absolute',
+          inset: '16px',
+          zIndex: 2,
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'space-between',
+          color: '#f25b29',
+          textShadow: '0 0 6px rgba(242, 91, 41, 0.4)',
+          pointerEvents: 'none',
+          fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Consolas, monospace',
+        }}
+      >
+        {children}
+      </Box>
+    </Box>
+  )
+}

src/renderer/components/ds/InstrumentPanel.tsx

@@ -0,0 +1,77 @@
+// src/renderer/components/ds/InstrumentPanel.tsx
+// 시안 A: 메탈 섀시 컨테이너 — 노이즈 텍스처, 각인 텍스트, 물리적 존재감
+
+import { Box, Typography } from '@mui/material'
+
+interface InstrumentPanelProps {
+  children: React.ReactNode
+  /** 상단 좌측 각인 */
+  engravingLeft?: string
+  /** 상단 우측 각인 */
+  engravingRight?: string
+  /** 하단 중앙 각인 */
+  engravingBottom?: string
+}
+
+export function InstrumentPanel({
+  children,
+  engravingLeft = 'D3RO-VOICE SYS.',
+  engravingRight = 'MOD-01 / TERMINAL',
+  engravingBottom = 'LOCAL AI VOICE ASSISTANT',
+}: InstrumentPanelProps): React.ReactElement {
+  return (
+    <Box
+      sx={{
+        position: 'relative',
+        bgcolor: '#242528',
+        borderRadius: '24px',
+        p: 3,
+        boxShadow:
+          '0 60px 100px -20px rgba(0,0,0,0.8), 0 12px 0 #111112, 0 13px 4px rgba(0,0,0,0.5), inset 0 1px 1px rgba(255,255,255,0.15), inset 0 -1px 2px rgba(0,0,0,0.4)',
+        // 메탈 노이즈는 CSS로 시뮬레이션
+        '&::before': {
+          content: '""',
+          position: 'absolute',
+          inset: 0,
+          borderRadius: '24px',
+          backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")`,
+          opacity: 0.04,
+          mixBlendMode: 'overlay',
+          pointerEvents: 'none',
+          zIndex: 1,
+        },
+      }}
+    >
+      {/* 각인 텍스트 */}
+      <Engraving sx={{ top: 12, left: 24 }}>{engravingLeft}</Engraving>
+      <Engraving sx={{ top: 12, right: 24 }}>{engravingRight}</Engraving>
+      <Engraving sx={{ bottom: 12, left: '50%', transform: 'translateX(-50%)' }}>{engravingBottom}</Engraving>
+
+      {/* 콘텐츠 (z-index 5로 노이즈 위) */}
+      <Box sx={{ position: 'relative', zIndex: 5 }}>
+        {children}
+      </Box>
+    </Box>
+  )
+}
+
+function Engraving({ children, sx }: { children: string; sx: Record<string, unknown> }): React.ReactElement {
+  return (
+    <Typography
+      sx={{
+        position: 'absolute',
+        fontSize: '9px',
+        letterSpacing: '1.5px',
+        color: '#1a1a1c',
+        textShadow: '0 1px 0 rgba(255,255,255,0.08)',
+        fontWeight: 700,
+        fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Consolas, monospace',
+        zIndex: 2,
+        userSelect: 'none',
+        ...sx,
+      }}
+    >
+      {children}
+    </Typography>
+  )
+}

src/renderer/components/ds/Led.tsx

@@ -0,0 +1,50 @@
+// src/renderer/components/ds/Led.tsx
+// 시안 A: LED 인디케이터 — 물리적 LED, 활성 시 glow + pulse
+
+import { Box } from '@mui/material'
+
+type LedColor = 'amber' | 'green' | 'red' | 'orange' | 'off'
+
+const LED_COLORS: Record<LedColor, { bg: string; glow: string }> = {
+  amber:  { bg: '#f25b29', glow: 'rgba(242, 91, 41, 0.6)' },
+  green:  { bg: '#22c55e', glow: 'rgba(34, 197, 94, 0.6)' },
+  red:    { bg: '#ef4444', glow: 'rgba(239, 68, 68, 0.6)' },
+  orange: { bg: '#f59e0b', glow: 'rgba(245, 158, 11, 0.6)' },
+  off:    { bg: '#111', glow: 'transparent' },
+}
+
+interface LedProps {
+  color?: LedColor
+  pulse?: boolean
+  size?: number
+}
+
+export function Led({ color = 'off', pulse = false, size = 8 }: LedProps): React.ReactElement {
+  const c = LED_COLORS[color]
+  const isActive = color !== 'off'
+
+  return (
+    <Box
+      sx={{
+        width: size,
+        height: size,
+        borderRadius: '50%',
+        bgcolor: c.bg,
+        flexShrink: 0,
+        boxShadow: isActive
+          ? `inset 0 1px 2px rgba(255,255,255,0.5), 0 0 10px ${c.glow}`
+          : 'inset 0 1px 3px rgba(0,0,0,0.9), 0 1px 0 rgba(255,255,255,0.05)',
+        transition: 'all 0.1s',
+        ...(pulse && isActive
+          ? {
+              animation: 'led-pulse 1.5s ease-in-out infinite',
+              '@keyframes led-pulse': {
+                '0%, 100%': { opacity: 1 },
+                '50%': { opacity: 0.5 },
+              },
+            }
+          : {}),
+      }}
+    />
+  )
+}

src/renderer/components/ds/MetalCard.tsx

@@ -0,0 +1,29 @@
+// src/renderer/components/ds/MetalCard.tsx
+// 시안 A+B 융합: 메탈 카드 컨테이너 — 섀시 느낌의 인셋 패널
+
+import { Box } from '@mui/material'
+
+interface MetalCardProps {
+  children: React.ReactNode
+  inset?: boolean
+}
+
+export function MetalCard({ children, inset = false }: MetalCardProps): React.ReactElement {
+  return (
+    <Box
+      sx={{
+        bgcolor: inset ? '#1b1c1e' : '#242427',
+        borderRadius: inset ? '12px' : '22px',
+        borderTop: inset ? 'none' : '1px solid rgba(255,255,255,0.04)',
+        boxShadow: inset
+          ? 'inset 0 2px 6px rgba(0,0,0,0.6), 0 1px 1px rgba(255,255,255,0.05)'
+          : '0 8px 30px rgba(0,0,0,0.3)',
+        p: inset ? '6px' : 3,
+        transition: 'background-color 0.2s ease',
+        '&:hover': inset ? {} : { bgcolor: '#2a2a2d' },
+      }}
+    >
+      {children}
+    </Box>
+  )
+}

src/renderer/components/ds/PhosphorText.tsx

@@ -0,0 +1,39 @@
+// src/renderer/components/ds/PhosphorText.tsx
+// 시안 A: 인광 텍스트 — 앰버 glow, 모노 폰트, CRT 느낌
+
+import { Typography, type TypographyProps } from '@mui/material'
+
+type PhosphorVariant = 'hero' | 'value' | 'label' | 'dim'
+
+const VARIANTS: Record<PhosphorVariant, { fontSize: string; color: string; glow: string; fontWeight: number }> = {
+  hero:  { fontSize: '42px', color: '#f25b29', glow: 'rgba(242, 91, 41, 0.4)', fontWeight: 300 },
+  value: { fontSize: '20px', color: '#f25b29', glow: 'rgba(242, 91, 41, 0.3)', fontWeight: 400 },
+  label: { fontSize: '10px', color: '#5c2615', glow: 'none', fontWeight: 700 },
+  dim:   { fontSize: '10px', color: '#77797c', glow: 'none', fontWeight: 400 },
+}
+
+interface PhosphorTextProps extends Omit<TypographyProps, 'variant'> {
+  variant?: PhosphorVariant
+}
+
+export function PhosphorText({ variant = 'value', sx, ...props }: PhosphorTextProps): React.ReactElement {
+  const v = VARIANTS[variant]
+
+  return (
+    <Typography
+      {...props}
+      sx={{
+        fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Consolas, monospace',
+        fontSize: v.fontSize,
+        fontWeight: v.fontWeight,
+        color: v.color,
+        textShadow: v.glow !== 'none' ? `0 0 6px ${v.glow}` : 'none',
+        letterSpacing: variant === 'label' ? '2px' : variant === 'hero' ? '-2px' : '0.02em',
+        lineHeight: 1,
+        fontVariantNumeric: 'tabular-nums',
+        textTransform: variant === 'label' ? 'uppercase' : 'none',
+        ...sx,
+      }}
+    />
+  )
+}

src/renderer/components/ds/PhysicalButton.tsx

@@ -0,0 +1,43 @@
+// src/renderer/components/ds/PhysicalButton.tsx
+// 시안 A: 물리 버튼 — 돌출 그림자, 눌림 피드백, 선택 상태
+
+import { Button, type ButtonProps } from '@mui/material'
+
+interface PhysicalButtonProps extends Omit<ButtonProps, 'variant'> {
+  selected?: boolean
+}
+
+export function PhysicalButton({ selected = false, sx, ...props }: PhysicalButtonProps): React.ReactElement {
+  return (
+    <Button
+      {...props}
+      sx={{
+        height: 44,
+        bgcolor: selected ? '#1a1a1c' : '#242528',
+        border: 'none',
+        borderRadius: '6px',
+        color: selected ? '#f25b29' : '#77797c',
+        fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Consolas, monospace',
+        fontSize: '12px',
+        fontWeight: 600,
+        cursor: 'pointer',
+        boxShadow: selected
+          ? 'inset 0 2px 6px rgba(0,0,0,0.8), inset 0 0 0 1px #000'
+          : '0 3px 6px rgba(0,0,0,0.4), inset 0 1px 1px rgba(255,255,255,0.1), inset 0 -1px 2px rgba(0,0,0,0.2)',
+        transform: selected ? 'translateY(1px)' : 'none',
+        transition: 'all 0.05s linear',
+        '&:active': {
+          transform: 'translateY(2px)',
+          boxShadow: '0 1px 2px rgba(0,0,0,0.4), inset 0 2px 4px rgba(0,0,0,0.3)',
+        },
+        '&:hover': {
+          bgcolor: selected ? '#1a1a1c' : '#2a2b2e',
+        },
+        textTransform: 'uppercase',
+        letterSpacing: '0.5px',
+        minWidth: 0,
+        ...sx,
+      }}
+    />
+  )
+}

src/renderer/components/ds/index.ts

@@ -0,0 +1,9 @@
+// src/renderer/components/ds/index.ts
+// 디자인 시스템 컴포넌트 SSOT barrel export
+
+export { CrtDisplay } from './CrtDisplay'
+export { InstrumentPanel } from './InstrumentPanel'
+export { Led } from './Led'
+export { PhysicalButton } from './PhysicalButton'
+export { MetalCard } from './MetalCard'
+export { PhosphorText } from './PhosphorText'

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 {
+import { Box, Button, IconButton, Dialog, DialogTitle, DialogContent, DialogActions, TextField } from '@mui/material'
-  Box, Typography, Button, IconButton, Chip,
-  Dialog, DialogTitle, DialogContent, DialogActions,
-  TextField, Card, CardContent
-} 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
+  id: string; name: string; description: string; prompt: string; icon: string; isBuiltin: boolean; order: number
-  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)
-      if (ipcResult && ipcResult.success) {
+    } catch { /* noop */ }
-        setInstructions(ipcResult.data)
-      }
-    } catch {
-      // preload에 instruction API가 없을 수 있음
-    }
     setLoading(false)
   }, [])
 
   useEffect(() => { loadData() }, [loadData])
 
-  const openAdd = () => {
+  const openAdd = () => { setEditId(null); setFormName(''); setFormDesc(''); setFormPrompt(''); setDialogOpen(true) }
-    setEditId(null)
+  const openEdit = (inst: CustomInstruction) => { setEditId(inst.id); setFormName(inst.name); setFormDesc(inst.description); setFormPrompt(inst.prompt); setDialogOpen(true) }
-    setFormName('')
+  const handleSave = async () => { setDialogOpen(false); loadData() }
-    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 }}>
+    <Box sx={{ maxWidth: 900, mx: 'auto', p: 4 }}>
-      {/* Header */}
+      <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
-      <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 3 }}>
+        <PhosphorText variant="label" sx={{ color: '#77797c' }}>
-        <Box>
+          LLM INSTRUCTIONS — {instructions.length} COMMANDS
-          <Typography sx={{ fontSize: '22px', fontWeight: 700 }}>Commands</Typography>
+        </PhosphorText>
-          <Typography sx={{ fontSize: '14px', color: 'text.secondary', mt: 0.5 }}>
+        <Button variant="contained" startIcon={<AddIcon />} onClick={openAdd} size="small">ADD</Button>
-            Custom LLM instructions
-          </Typography>
-        </Box>
-        <Button variant="contained" startIcon={<AddIcon />} onClick={openAdd}>
-          Add Command
-        </Button>
       </Box>
 
       {loading ? (
-        <Typography color="text.secondary">Loading...</Typography>
+        <PhosphorText variant="dim">LOADING...</PhosphorText>
       ) : instructions.length === 0 ? (
-        <Card>
+        <MetalCard>
-          <CardContent sx={{ py: 6, textAlign: 'center' }}>
+          <Box sx={{ py: 6, textAlign: 'center' }}>
-            <Typography color="text.secondary">
+            <PhosphorText variant="dim">BUILT-IN: TRANSLATE, SUMMARIZE, FORMAL, CODE, FREE</PhosphorText>
-              Built-in commands: Translate, Summarize, Formal Rewrite, Code Explain, Free Prompt.
+          </Box>
-            </Typography>
+        </MetalCard>
-          </CardContent>
-        </Card>
       ) : (
-        <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 }}>
+            <MetalCard key={inst.id}>
-              <CardContent sx={{ p: 2.5, '&:last-child': { pb: 2.5 }, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+              <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-                <Box sx={{ flex: 1 }}>
+                <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5, flex: 1 }}>
-                  <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
+                  <Led color={inst.isBuiltin ? 'amber' : 'green'} size={6} />
-                    <Typography sx={{ fontSize: '14px', fontWeight: 600 }}>
+                  <Box>
-                      {inst.name}
+                    <Box sx={{ fontSize: '14px', fontWeight: 600, color: '#fff' }}>{inst.name}</Box>
-                    </Typography>
+                    <Box sx={{ fontSize: '11px', color: '#77797c', mt: 0.25 }}>{inst.description}</Box>
-                    <Chip
-                      label={inst.isBuiltin ? 'BUILT-IN' : 'CUSTOM'}
-                      size="small"
-                      color={inst.isBuiltin ? 'secondary' : 'primary'}
-                    />
                   </Box>
-                  <Typography sx={{ fontSize: '12px', color: 'text.secondary', mt: 0.5 }}>
-                    {inst.description}
-                  </Typography>
                 </Box>
-                <Box sx={{ display: 'flex', gap: 0.5, flexShrink: 0 }}>
+                <Box sx={{ display: 'flex', gap: 0.5 }}>
-                  <IconButton
+                  <IconButton size="small" onClick={() => openEdit(inst)} sx={{ color: '#77797c', '&:hover': { color: '#f25b29' } }}>
-                    size="small"
+                    <EditIcon sx={{ fontSize: 16 }} />
-                    onClick={() => openEdit(inst)}
-                    sx={{ color: d3roPalette.text.label, '&:hover': { color: d3roPalette.accent.amber } }}
-                  >
-                    <EditIcon fontSize="small" />
                   </IconButton>
                   {!inst.isBuiltin && (
-                    <IconButton
+                    <IconButton size="small" sx={{ color: '#77797c', '&:hover': { color: '#ef4444' } }}>
-                      size="small"
+                      <DeleteIcon sx={{ fontSize: 16 }} />
-                      sx={{ color: d3roPalette.text.label, '&:hover': { color: d3roPalette.tag.red } }}
-                    >
-                      <DeleteIcon fontSize="small" />
                     </IconButton>
                   )}
                 </Box>
-              </CardContent>
+              </Box>
-            </Card>
+            </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 레이아웃.
+// 시안 A 인스트루먼트 패널: CRT 디스플레이 + LED 클러스터 + 물리 버튼 + 통계
-// hero 수치, 카드 그리드, StatusPanel, 태그 시스템.
 
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useCallback } from 'react'
-import { Box, Card, CardContent, Typography, Chip } from '@mui/material'
+import { Box, Typography } from '@mui/material'
-import MicIcon from '@mui/icons-material/Mic'
+import { CrtDisplay, InstrumentPanel, Led, PhysicalButton, MetalCard, PhosphorText } from '../components/ds'
-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 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 h = Math.floor(totalSec / 3600)
-  const minutes = Math.floor((totalSec % 3600) / 60)
+  const m = Math.floor((totalSec % 3600) / 60)
-  const seconds = totalSec % 60
+  const s = totalSec % 60
-  if (hours > 0) return `${hours}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`
+  if (h > 0) return `${h}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`
-  return `${minutes}:${seconds.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 }}>
+    <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '100%', p: 3 }}>
-      {/* Header */}
+      <InstrumentPanel
-      <Box sx={{ mb: 4 }}>
+        engravingLeft="D3RO-VOICE SYS."
-        <Typography
+        engravingRight="MOD-01 / TERMINAL"
-          sx={{
+        engravingBottom="LOCAL AI VOICE ASSISTANT"
-            fontSize: '22px',
+      >
-            fontWeight: 700,
+        <Box sx={{ display: 'grid', gridTemplateColumns: '1fr 140px', gap: 3, minHeight: 320 }}>
-            color: d3roPalette.text.primary,
+          {/* ── 좌측: CRT 디스플레이 ─────────────────── */}
-          }}
+          <CrtDisplay
-        >
+            amplitude={displayMode === 'voice' ? 0.4 : 0.1}
-          Dashboard
+            frequency={displayMode === 'voice' ? 15 : 8}
-        </Typography>
+            glitchTrigger={glitchTrigger}
-        <Typography
+            height={320}
-          sx={{
+          >
-            fontSize: '14px',
+            {displayMode === 'stats' && (
-            color: d3roPalette.text.secondary,
+              <>
-            mt: 0.5,
+                <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
-          }}
+                  <PhosphorText variant="label">TOTAL SESSIONS</PhosphorText>
-        >
+                  <PhosphorText variant="label">D3RO</PhosphorText>
-          Voice assistant overview
+                </Box>
-        </Typography>
+                <Box sx={{ mt: 'auto', mb: 3 }}>
-      </Box>
+                  <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 (서비스 상태) */}
+            {displayMode === 'voice' && (
-      <Card sx={{ mb: 3, p: 0 }}>
+              <>
-        <CardContent sx={{ p: 2.5, '&:last-child': { pb: 2.5 } }}>
+                <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
-          <Box sx={{ display: 'flex', alignItems: 'center', gap: 3 }}>
+                  <PhosphorText variant="label">VOICE MODE</PhosphorText>
-            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                  <PhosphorText variant="label">STANDBY</PhosphorText>
-              <Led status="active" />
+                </Box>
-              <Typography sx={{ fontSize: '12px', color: d3roPalette.text.secondary }}>
+                <Box sx={{ mt: 'auto', mb: 3, textAlign: 'center' }}>
-                STT Ready
+                  <PhosphorText variant="hero">IDLE</PhosphorText>
-              </Typography>
+                  <PhosphorText variant="label" sx={{ mt: 1 }}>
-            </Box>
+                    PRESS RIGHT ALT TO DICTATE
-            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                  </PhosphorText>
-              <Led status={ollamaConnected ? 'active' : 'warning'} />
+                </Box>
-              <Typography sx={{ fontSize: '12px', color: d3roPalette.text.secondary }}>
+                <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
-                {ollamaConnected ? 'Ollama Connected' : 'Ollama Offline'}
+                  <Box>
-              </Typography>
+                    <PhosphorText variant="label">MODE</PhosphorText>
-            </Box>
+                    <PhosphorText variant="value">DICT</PhosphorText>
-            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                  </Box>
-              <Led status="active" />
+                  <Box sx={{ textAlign: 'right' }}>
-              <Typography sx={{ fontSize: '12px', color: d3roPalette.text.secondary }}>
+                    <PhosphorText variant="label">HOTKEY</PhosphorText>
-                Hotkey Active
+                    <PhosphorText variant="value">R.ALT</PhosphorText>
-              </Typography>
+                  </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>
+        </Box>
-      </Card>
+      </InstrumentPanel>
-
-      {/* 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>
   )
 }

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 {
+import { Box, TextField, Button, IconButton, Dialog, DialogTitle, DialogContent, DialogActions, InputAdornment } from '@mui/material'
-  Box, Typography, TextField, Button, IconButton, Chip,
-  Dialog, DialogTitle, DialogContent, DialogActions,
-  Card, CardContent, 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 MONO = 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace'
-const CATEGORY_COLOR: Record<string, 'primary' | 'secondary' | 'warning'> = {
-  user: 'primary',
-  auto: 'warning',
-  technical: 'secondary',
-}
 
 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({
+    await window.electronAPI.dictionary.add({ word: newWord.trim(), pronunciation: newPronunciation.trim() || undefined })
-      word: newWord.trim(),
+    setNewWord(''); setNewPronunciation(''); setAddOpen(false); loadData()
-      pronunciation: newPronunciation.trim() || undefined
-    })
-    setNewWord('')
-    setNewPronunciation('')
-    setAddOpen(false)
-    loadData()
-  }
-
-  const handleDelete = async (id: string) => {
-    await window.electronAPI.dictionary.delete({ id })
-    loadData()
   }
 
   return (
-    <Box sx={{ maxWidth: 1200, mx: 'auto', p: 5 }}>
+    <Box sx={{ maxWidth: 900, mx: 'auto', p: 4 }}>
-      {/* Header */}
+      <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
-      <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 3 }}>
+        <PhosphorText variant="label" sx={{ color: '#77797c' }}>
-        <Box>
+          CUSTOM DICTIONARY — {data?.total ?? 0} WORDS
-          <Typography sx={{ fontSize: '22px', fontWeight: 700 }}>Dictionary</Typography>
+        </PhosphorText>
-          <Typography sx={{ fontSize: '14px', color: 'text.secondary', mt: 0.5 }}>
+        <Button variant="contained" startIcon={<AddIcon />} onClick={() => setAddOpen(true)} size="small">
-            Custom words for better STT accuracy
+          ADD
-          </Typography>
-        </Box>
-        <Button variant="contained" startIcon={<AddIcon />} onClick={() => setAddOpen(true)}>
-          Add Word
         </Button>
       </Box>
 
-      {/* Search */}
       <TextField
-        placeholder="Search words..."
+        placeholder="SEARCH..."
         value={search}
         onChange={(e) => setSearch(e.target.value)}
         fullWidth
-        sx={{ mb: 3 }}
+        sx={{ mb: 3, '& .MuiInputBase-input': { fontFamily: MONO, fontSize: '12px', letterSpacing: '0.5px' } }}
-        slotProps={{
+        slotProps={{ input: { startAdornment: <InputAdornment position="start"><SearchIcon sx={{ color: '#77797c', fontSize: 18 }} /></InputAdornment> } }}
-          input: {
-            startAdornment: (
-              <InputAdornment position="start">
-                <SearchIcon sx={{ color: d3roPalette.text.label }} />
-              </InputAdornment>
-            )
-          }
-        }}
       />
 
       {loading ? (
-        <Typography color="text.secondary">Loading...</Typography>
+        <PhosphorText variant="dim">LOADING...</PhosphorText>
       ) : !data || data.entries.length === 0 ? (
-        <Card>
+        <MetalCard>
-          <CardContent sx={{ py: 6, textAlign: 'center' }}>
+          <Box sx={{ py: 6, textAlign: 'center' }}>
-            <Typography color="text.secondary">
+            <PhosphorText variant="dim">{search ? 'NO RESULTS' : 'NO WORDS — ADD CUSTOM WORDS FOR BETTER STT'}</PhosphorText>
-              {search ? 'No words found.' : 'No words yet. Add custom words to improve recognition.'}
+          </Box>
-            </Typography>
+        </MetalCard>
-          </CardContent>
-        </Card>
       ) : (
         <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
           {data.entries.map((entry: DictionaryEntry) => (
-            <Card key={entry.id} sx={{ p: 0 }}>
+            <MetalCard key={entry.id}>
-              <CardContent sx={{ p: 2, '&:last-child': { pb: 2 }, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+              <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-                <Box sx={{ flex: 1 }}>
+                <Box>
                   <Box sx={{ display: 'flex', alignItems: 'baseline', gap: 1.5 }}>
-                    <Typography sx={{ fontSize: '14px', fontWeight: 600 }}>
+                    <Box sx={{ fontSize: '14px', fontWeight: 600, color: '#fff' }}>{entry.word}</Box>
-                      {entry.word}
-                    </Typography>
                     {entry.pronunciation && (
-                      <Typography sx={{ fontFamily: d3roFontMono, fontSize: '12px', color: d3roPalette.text.label }}>
+                      <Box sx={{ fontFamily: MONO, fontSize: '11px', color: '#5c2615' }}>[{entry.pronunciation}]</Box>
-                        [{entry.pronunciation}]
-                      </Typography>
                     )}
                   </Box>
-                  <Box sx={{ display: 'flex', gap: 1, mt: 1 }}>
+                  <Box sx={{ fontFamily: MONO, fontSize: '10px', color: '#77797c', mt: 0.5, letterSpacing: '0.5px' }}>
-                    <Chip label={entry.category.toUpperCase()} size="small" color={CATEGORY_COLOR[entry.category] ?? 'primary'} />
+                    {entry.category.toUpperCase()} · {entry.usageCount}× USED
-                    <Typography sx={{ fontFamily: d3roFontMono, fontSize: '11px', color: d3roPalette.text.label, alignSelf: 'center' }}>
-                      {entry.usageCount}× used
-                    </Typography>
                   </Box>
                 </Box>
-                <IconButton
+                <IconButton size="small" onClick={() => { window.electronAPI.dictionary.delete({ id: entry.id }); loadData() }}
-                  size="small"
+                  sx={{ color: '#77797c', '&:hover': { color: '#ef4444' } }}>
-                  onClick={() => handleDelete(entry.id)}
+                  <DeleteIcon sx={{ fontSize: 16 }} />
-                  sx={{ color: d3roPalette.text.label, '&:hover': { color: d3roPalette.tag.red } }}
-                >
-                  <DeleteIcon fontSize="small" />
                 </IconButton>
-              </CardContent>
+              </Box>
-            </Card>
+            </MetalCard>
           ))}
         </Box>
       )}
 
-      {/* Add Word Dialog */}
       <Dialog open={addOpen} onClose={() => setAddOpen(false)} maxWidth="xs" fullWidth>
         <DialogTitle sx={{ fontWeight: 700 }}>Add Word</DialogTitle>
         <DialogContent>
-          <TextField
+          <TextField label="Word" value={newWord} onChange={(e) => setNewWord(e.target.value)} fullWidth autoFocus sx={{ mt: 1 }} />
-            label="Word"
+          <TextField label="Pronunciation (optional)" value={newPronunciation} onChange={(e) => setNewPronunciation(e.target.value)} fullWidth sx={{ mt: 2 }} />
-            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 {
+import { Box, TextField, IconButton, InputAdornment } from '@mui/material'
-  Box,
-  Typography,
-  TextField,
-  IconButton,
-  Chip,
-  Pagination,
-  Card,
-  CardContent,
-  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', {
+  return new Date(ts).toLocaleString('ko-KR', { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' })
-    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.search({ query: search, page: 0, pageSize: PAGE_SIZE })
-      : await window.electronAPI.history.getAll({ page, 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 }}>
+    <Box sx={{ maxWidth: 900, mx: 'auto', p: 4 }}>
-      {/* Header */}
+      <PhosphorText variant="label" sx={{ mb: 2, display: 'block', color: '#77797c' }}>
-      <Box sx={{ mb: 3 }}>
+        TRANSCRIPTION LOG — {data?.total ?? 0} ENTRIES
-        <Typography sx={{ fontSize: '22px', fontWeight: 700 }}>History</Typography>
+      </PhosphorText>
-        <Typography sx={{ fontSize: '14px', color: 'text.secondary', mt: 0.5 }}>
-          Transcription history
-        </Typography>
-      </Box>
 
-      {/* 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: (
+            startAdornment: <InputAdornment position="start"><SearchIcon sx={{ color: '#77797c', fontSize: 18 }} /></InputAdornment>,
-              <InputAdornment position="start">
+          },
-                <SearchIcon sx={{ color: d3roPalette.text.label }} />
-              </InputAdornment>
-            )
-          }
         }}
       />
 
       {loading ? (
-        <Typography color="text.secondary">Loading...</Typography>
+        <PhosphorText variant="dim">LOADING...</PhosphorText>
       ) : !data || data.entries.length === 0 ? (
-        <Card>
+        <MetalCard>
-          <CardContent sx={{ py: 6, textAlign: 'center' }}>
+          <Box sx={{ py: 6, textAlign: 'center' }}>
-            <Typography color="text.secondary">
+            <PhosphorText variant="dim">{search ? 'NO RESULTS' : 'NO HISTORY — START RECORDING'}</PhosphorText>
-              {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>
-            ))}
           </Box>
-
+        </MetalCard>
-          {data.totalPages > 1 && (
+      ) : (
-            <Box sx={{ display: 'flex', justifyContent: 'center', mt: 3 }}>
+        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
-              <Pagination
+          {data.entries.map((entry: HistoryEntry) => (
-                count={data.totalPages}
+            <MetalCard key={entry.id}>
-                page={page + 1}
+              <Box sx={{ display: 'flex', alignItems: 'flex-start', gap: 2 }}>
-                onChange={(_, p) => setPage(p - 1)}
+                <Led color={entry.status === 'completed' ? 'green' : 'red'} size={6} />
-                sx={{
+                <Box sx={{ flex: 1, minWidth: 0 }}>
-                  '& .Mui-selected': {
+                  <Box sx={{
-                    bgcolor: `${d3roPalette.accent.amberDim} !important`,
+                    fontSize: '13px', color: '#fff', lineHeight: 1.5,
-                    color: d3roPalette.accent.amber,
+                    overflow: 'hidden', textOverflow: 'ellipsis',
-                  }
+                    display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical',
-                }}
+                  }}>
-              />
+                    {entry.polishedText || entry.originalText}
-            </Box>
+                  </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>
   )