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>