Phase 7~8 구현: 테스트 + 빌드 + CI/CD + SoundEffect + AutoLaunch + UI 리디자인

- vitest 41개 단위 테스트 (HistoryService, DictionaryService, CustomInstructionService, VoiceModeService, D3ROError)
- electron-builder.yml (NSIS, asarUnpack, extraResources)
- .gitlab-ci.yml (lint, typecheck, test, build, release)
- SoundEffectService: WAV 프리로드 + PowerShell 재생 + VoiceMode 연동
- AutoLaunchService: app.setLoginItemSettings + ConfigService 동기화
- TextInsertService: 간이 삽입 검증 (EditMonitor 경량)
- 번들링 인프라: SoX 다운로드 스크립트, PyInstaller 빌드, 경로 해상도 유틸
- AudioCaptureService/LocalSTTService: 번들 경로 자동 감지
- 08-design-system.md 기반 MUI 테마 (다크+라이트+auto 테마 시스템)
- 전체 UI 컴포넌트 리디자인: AppLayout, Dashboard, StatusBar, History, Dictionary, Commands, Settings
- 효과음 WAV 생성: recording-start, recording-stop, error
- EPIPE 에러 핸들링 추가

src/renderer/pages/CommandsPage.tsx

@@ -1,26 +1,16 @@
 // src/renderer/pages/CommandsPage.tsx
+// 08-design-system.md SSOT: 다크 카드, 앰버 악센트, 태그 시스템
 
 import { useState, useEffect, useCallback } from 'react'
 import {
-  Box,
-  Typography,
-  Button,
-  List,
-  ListItem,
-  ListItemText,
-  IconButton,
-  Chip,
-  Dialog,
-  DialogTitle,
-  DialogContent,
-  DialogActions,
-  TextField,
-  Card,
-  CardContent
+  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 type { IPCResult } from '@shared/errors'
 
 interface CustomInstruction {
@@ -44,37 +34,21 @@ export function CommandsPage(): React.ReactElement {
 
   const loadData = useCallback(async () => {
     setLoading(true)
-    const result: IPCResult<CustomInstruction[]> = await window.electronAPI.system
-      .getPlatform()
-      .then(() =>
-        (window as Record<string, unknown>).electronAPI as Record<string, unknown>
-      )
-      .catch(() => null) as unknown as IPCResult<CustomInstruction[]>
-
-    // instruction IPC를 직접 invoke
     try {
       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
 
-      // fallback: window.electronAPI에 instruction이 아직 없으므로 ipcRenderer 직접 호출
-      const { ipcRenderer } = window as unknown as { ipcRenderer?: { invoke: (ch: string) => Promise<IPCResult<CustomInstruction[]>> } }
-      if (ipcRenderer) {
-        const r = await ipcRenderer.invoke('instruction:getAll')
-        if (r.success) setInstructions(r.data)
-      } else if (ipcResult && ipcResult.success) {
+      if (ipcResult && ipcResult.success) {
         setInstructions(ipcResult.data)
       }
     } catch {
-      // Phase 6에서는 preload에 instruction이 추가되어야 하지만,
-      // 현재 세션에서 빠르게 처리하기 위해 빈 배열로 시작
+      // preload에 instruction API가 없을 수 있음
     }
     setLoading(false)
   }, [])
 
-  useEffect(() => {
-    loadData()
-  }, [loadData])
+  useEffect(() => { loadData() }, [loadData])
 
   const openAdd = () => {
     setEditId(null)
@@ -94,17 +68,20 @@ export function CommandsPage(): React.ReactElement {
 
   const handleSave = async () => {
     setDialogOpen(false)
-    // TODO: IPC 호출로 저장
     loadData()
   }
 
   return (
-    <Box>
-      <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
-        <Typography variant="h5" sx={{ fontWeight: 600 }}>
-          Custom Commands
-        </Typography>
-        <Button variant="contained" startIcon={<AddIcon />} onClick={openAdd} size="small">
+    <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>
@@ -113,87 +90,66 @@ export function CommandsPage(): React.ReactElement {
         <Typography color="text.secondary">Loading...</Typography>
       ) : instructions.length === 0 ? (
         <Card>
-          <CardContent>
-            <Typography color="text.secondary" sx={{ textAlign: 'center', py: 4 }}>
-              Commands will be available after the service initializes.
+          <CardContent sx={{ py: 6, textAlign: 'center' }}>
+            <Typography color="text.secondary">
               Built-in commands: Translate, Summarize, Formal Rewrite, Code Explain, Free Prompt.
             </Typography>
           </CardContent>
         </Card>
       ) : (
-        <List>
+        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>
           {instructions.map((inst) => (
-            <ListItem
-              key={inst.id}
-              divider
-              secondaryAction={
-                <Box sx={{ display: 'flex', gap: 0.5 }}>
-                  <IconButton size="small" onClick={() => openEdit(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'}
+                    />
+                  </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" />
                   </IconButton>
                   {!inst.isBuiltin && (
-                    <IconButton size="small">
+                    <IconButton
+                      size="small"
+                      sx={{ color: d3roPalette.text.label, '&:hover': { color: d3roPalette.tag.red } }}
+                    >
                       <DeleteIcon fontSize="small" />
                     </IconButton>
                   )}
                 </Box>
-              }
-            >
-              <ListItemText
-                primary={inst.name}
-                secondary={
-                  <Box sx={{ display: 'flex', gap: 1, mt: 0.5 }}>
-                    <Typography variant="caption" color="text.secondary">
-                      {inst.description}
-                    </Typography>
-                    <Chip
-                      label={inst.isBuiltin ? 'Built-in' : 'Custom'}
-                      size="small"
-                      variant="outlined"
-                      color={inst.isBuiltin ? 'default' : 'primary'}
-                    />
-                  </Box>
-                }
-              />
-            </ListItem>
+              </CardContent>
+            </Card>
           ))}
-        </List>
+        </Box>
       )}
 
+      {/* Dialog */}
       <Dialog open={dialogOpen} onClose={() => setDialogOpen(false)} maxWidth="sm" fullWidth>
-        <DialogTitle>{editId ? 'Edit Command' : 'Add Command'}</DialogTitle>
+        <DialogTitle sx={{ fontWeight: 700 }}>{editId ? 'Edit Command' : 'Add Command'}</DialogTitle>
         <DialogContent>
-          <TextField
-            label="Name"
-            value={formName}
-            onChange={(e) => setFormName(e.target.value)}
-            fullWidth
-            autoFocus
-            sx={{ mt: 1 }}
-          />
-          <TextField
-            label="Description"
-            value={formDesc}
-            onChange={(e) => setFormDesc(e.target.value)}
-            fullWidth
-            sx={{ mt: 2 }}
-          />
-          <TextField
-            label="Prompt Template"
-            value={formPrompt}
-            onChange={(e) => setFormPrompt(e.target.value)}
-            fullWidth
-            multiline
-            rows={4}
-            sx={{ mt: 2 }}
-            helperText="Use {{text}} for the transcribed text"
-          />
+          <TextField label="Name" value={formName} onChange={(e) => setFormName(e.target.value)} fullWidth autoFocus sx={{ mt: 1 }} />
+          <TextField label="Description" value={formDesc} onChange={(e) => setFormDesc(e.target.value)} fullWidth sx={{ mt: 2 }} />
+          <TextField label="Prompt Template" value={formPrompt} onChange={(e) => setFormPrompt(e.target.value)} fullWidth multiline rows={4} sx={{ mt: 2 }} helperText="Use {{text}} for transcribed text" />
         </DialogContent>
-        <DialogActions>
-          <Button onClick={() => setDialogOpen(false)}>Cancel</Button>
-          <Button onClick={handleSave} variant="contained" disabled={!formName.trim()}>
-            Save
-          </Button>
+        <DialogActions sx={{ px: 3, pb: 2 }}>
+          <Button onClick={() => setDialogOpen(false)} color="secondary" variant="contained">Cancel</Button>
+          <Button onClick={handleSave} variant="contained" disabled={!formName.trim()}>Save</Button>
         </DialogActions>
       </Dialog>
     </Box>