feat(playground): add stdin support, localStorage persist, timeout UI, and redesigned controls

- stdin: collapsible input textarea for C language, passed to /trace endpoint
- persist: zustand persist middleware saves codes/stdins/language to localStorage
- timeout UI: AbortController cancel button with elapsed time counter, 30s warning
- all 5 simulators accept signal for request cancellation
- redesigned header: pill-shaped language tabs with space-evenly layout,
  pill-shaped Run/Reset buttons, mobile 2-row layout with space-between controls

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: jammy0903

packages/frontend/src/features/playground/PlaygroundPage.tsx

@@ -4,10 +4,10 @@
  * Right 50%: Memory Visualization
  */
 
-import { useEffect, useState, useMemo } from 'react';
+import { useEffect, useState, useMemo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useIsMobile } from '@/hooks';
-import { Play, Layers } from 'lucide-react';
+import { Play, Layers, ChevronDown, ChevronRight as ChevronRightIcon, Terminal } from 'lucide-react';
 import { LanguageTabs } from './components/LanguageTabs';
 import { CodeMirrorEditor } from '@/features/visualizers/shared/components/CodeMirrorEditor';
 import { StepControls } from './components/StepControls';
@@ -29,7 +29,7 @@ const MAX_EDITOR_HEIGHT = 500;
 
 export function PlaygroundPage() {
   const { t } = useTranslation();
-  const { steps, currentStepIndex, error, language, setCode } = usePlaygroundStore();
+  const { steps, currentStepIndex, error, language, setCode, stdins, setStdin } = usePlaygroundStore();
   const code = useCurrentCode();
   const setPageTitle = useStore((s) => s.setPageTitle);
   const currentTheme = useThemeStore((s) => s.theme);
@@ -40,6 +40,13 @@ export function PlaygroundPage() {
   const currentStep = steps[currentStepIndex];
   const hasSteps = steps.length > 0;
 
+  // stdin 접이식 상태
+  const [stdinOpen, setStdinOpen] = useState(false);
+  const currentStdin = stdins[language] || '';
+  const handleStdinChange = useCallback((e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setStdin(e.target.value);
+  }, [setStdin]);
+
   // Flow/Memory 탭 상태
   const [activeTab, setActiveTab] = useState<'flow' | 'memory'>('flow');
 
@@ -88,21 +95,16 @@ export function PlaygroundPage() {
       <div style={{ backgroundColor: colors.pageBg, minHeight: '100vh', display: 'flex', flexDirection: 'column', padding: '16px' }}>
         {/* Code Section */}
         <div style={{ backgroundColor: colors.panelBg, flexShrink: 0 }}>
-          {/* Header */}
-          <div
-            style={{
-              height: '40px',
-              padding: '0 8px',
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'space-between',
-              borderBottom: `1px solid ${colors.border}`,
-              backgroundColor: colors.headerBg,
-              gap: '4px',
-            }}
-          >
+          {/* Header: 모바일 2줄 — 탭 꽉 채움 + 컨트롤 */}
+          <div style={{
+            backgroundColor: colors.headerBg,
+            borderBottom: `1px solid ${colors.border}`,
+            padding: '8px 10px',
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '8px',
+          }}>
             <LanguageTabs isMobile={true} />
-            {/* Run + Reset + Navigation 버튼 (하단에도 추가로 표시) */}
             <StepControls isMobile={true} showRun={true} showReset={true} showNavigation={true} />
           </div>
 
@@ -125,6 +127,55 @@ export function PlaygroundPage() {
               />
             )}
           </div>
+
+          {/* stdin 입력 (접이식) */}
+          {language === 'c' && (
+            <div style={{ borderTop: `1px solid ${colors.border}` }}>
+              <button
+                onClick={() => setStdinOpen(!stdinOpen)}
+                style={{
+                  width: '100%',
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: '4px',
+                  padding: '6px 8px',
+                  fontSize: '10px',
+                  fontWeight: 600,
+                  color: currentStdin ? colors.accent : colors.textMuted,
+                  background: 'transparent',
+                  border: 'none',
+                  cursor: 'pointer',
+                }}
+              >
+                {stdinOpen ? <ChevronDown size={10} /> : <ChevronRightIcon size={10} />}
+                <Terminal size={10} />
+                Input (stdin)
+                {currentStdin && <span style={{ fontSize: '9px', opacity: 0.7 }}>*</span>}
+              </button>
+              {stdinOpen && (
+                <textarea
+                  value={currentStdin}
+                  onChange={handleStdinChange}
+                  placeholder="Enter input values, one per line..."
+                  rows={3}
+                  style={{
+                    width: '100%',
+                    padding: '6px 8px',
+                    fontSize: '11px',
+                    fontFamily: 'monospace',
+                    backgroundColor: colors.panelBg,
+                    color: colors.textMuted,
+                    border: 'none',
+                    borderTop: `1px solid ${colors.border}`,
+                    outline: 'none',
+                    resize: 'vertical',
+                    minHeight: '48px',
+                    maxHeight: '120px',
+                  }}
+                />
+              )}
+            </div>
+          )}
         </div>
 
         {/* Visualization Section - Flow Only */}
@@ -314,22 +365,19 @@ export function PlaygroundPage() {
             minHeight: '133px',
           }}
         >
-          {/* Code Header */}
-          <div
-            style={{
-              height: '48px',
-              padding: '0 16px',
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'space-between',
-              borderBottom: `1px solid ${colors.border}`,
-              backgroundColor: colors.headerBg,
-              flexShrink: 0,
-              gap: '8px',
-            }}
-          >
+          {/* Code Header: flex-wrap — 넓으면 1줄, 좁으면 자연스럽게 줄바꿈 */}
+          <div style={{
+            backgroundColor: colors.headerBg,
+            borderBottom: `1px solid ${colors.border}`,
+            flexShrink: 0,
+            padding: '10px 16px',
+            display: 'flex',
+            flexWrap: 'wrap',
+            alignItems: 'center',
+            gap: '10px',
+          }}>
             <LanguageTabs />
-            {/* Run + Reset + Navigation 버튼 (헤더) */}
+            <div style={{ width: '1px', height: '22px', background: colors.border, flexShrink: 0 }} />
             <StepControls showRun={true} showReset={true} showNavigation={true} />
           </div>
 
@@ -353,6 +401,55 @@ export function PlaygroundPage() {
             )}
           </div>
 
+          {/* stdin 입력 (접이식) */}
+          {language === 'c' && (
+            <div style={{ borderTop: `1px solid ${colors.border}`, flexShrink: 0 }}>
+              <button
+                onClick={() => setStdinOpen(!stdinOpen)}
+                style={{
+                  width: '100%',
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: '6px',
+                  padding: '8px 16px',
+                  fontSize: '12px',
+                  fontWeight: 600,
+                  color: currentStdin ? colors.accent : colors.textMuted,
+                  background: 'transparent',
+                  border: 'none',
+                  cursor: 'pointer',
+                  transition: 'color 0.15s',
+                }}
+              >
+                {stdinOpen ? <ChevronDown size={12} /> : <ChevronRightIcon size={12} />}
+                <Terminal size={12} />
+                Input (stdin)
+                {currentStdin && <span style={{ fontSize: '10px', opacity: 0.7 }}>*</span>}
+              </button>
+              {stdinOpen && (
+                <textarea
+                  value={currentStdin}
+                  onChange={handleStdinChange}
+                  placeholder="Enter input values, one per line..."
+                  rows={3}
+                  style={{
+                    width: '100%',
+                    padding: '8px 16px',
+                    fontSize: '12px',
+                    fontFamily: 'monospace',
+                    backgroundColor: colors.panelBg,
+                    color: colors.textMuted,
+                    border: 'none',
+                    borderTop: `1px solid ${colors.border}`,
+                    outline: 'none',
+                    resize: 'vertical',
+                    minHeight: '60px',
+                    maxHeight: '150px',
+                  }}
+                />
+              )}
+            </div>
+          )}
         </div>
 
         {/* ===== Right Panel: Flow + Memory Tabs - 컨텐츠에 따라 늘어남 ===== */}

packages/frontend/src/features/playground/components/LanguageTabs.tsx

@@ -1,7 +1,6 @@
 /**
  * LanguageTabs - 언어 선택 탭
- * 컴팩트 라이트 테마 스타일
- * 반응형 지원 (모바일에서 더 컴팩트)
+ * 각 탭이 pill 모양, 전체 너비를 균등하게 차지
  */
 
 import { memo, useMemo } from 'react';
@@ -11,8 +10,8 @@ import type { SupportedLanguage } from '@/types';
 const LANGUAGES: { id: SupportedLanguage; label: string; shortLabel: string; color: string }[] = [
   { id: 'c', label: 'C', shortLabel: 'C', color: '#3b82f6' },
   { id: 'cpp', label: 'C++', shortLabel: 'C++', color: '#6366f1' },
-  { id: 'python', label: 'Py', shortLabel: 'Py', color: '#22c55e' },
-  { id: 'java', label: 'Java', shortLabel: 'Ja', color: '#EC4899' },
+  { id: 'python', label: 'Python', shortLabel: 'Py', color: '#22c55e' },
+  { id: 'java', label: 'Java', shortLabel: 'Java', color: '#EC4899' },
   { id: 'javascript', label: 'JS', shortLabel: 'JS', color: '#f59e0b' },
 ];
 
@@ -23,37 +22,30 @@ interface LanguageTabsProps {
 export const LanguageTabs = memo(function LanguageTabs({ isMobile = false }: LanguageTabsProps) {
   const { language, setLanguage } = usePlaygroundStore();
 
-  // 컨테이너 스타일 메모이제이션
   const containerStyle = useMemo(() => ({
     display: 'flex',
     alignItems: 'center',
-    gap: '2px',
-    padding: '2px',
-    backgroundColor: 'var(--theme-memory-reset-bg)',
-    borderRadius: isMobile ? '4px' : '6px',
-    border: '1px solid var(--theme-memory-reset-border)',
+    justifyContent: 'space-evenly',
+    gap: isMobile ? '6px' : '6px',
+    width: '100%',
   } as const), [isMobile]);
 
-  // 버튼 기본 스타일 (변하지 않는 속성들)
   const baseButtonStyle = useMemo(() => ({
     display: 'flex',
     alignItems: 'center',
-    gap: isMobile ? '2px' : '4px',
-    padding: isMobile ? '3px 5px' : '4px 8px',
-    borderRadius: isMobile ? '3px' : '4px',
-    fontSize: isMobile ? '10px' : '11px',
+    justifyContent: 'center',
+    gap: isMobile ? '5px' : '5px',
+    padding: isMobile ? '7px 14px' : '6px 14px',
+    borderRadius: '999px',
+    fontSize: isMobile ? '12px' : '12px',
     fontWeight: 600,
-    border: 'none',
+    border: '1px solid transparent',
     cursor: 'pointer',
     transition: 'all 0.15s ease',
+    whiteSpace: 'nowrap',
   } as const), [isMobile]);
 
-  // 인디케이터 기본 스타일
-  const indicatorBaseStyle = useMemo(() => ({
-    width: isMobile ? '4px' : '6px',
-    height: isMobile ? '4px' : '6px',
-    borderRadius: '50%',
-  } as const), [isMobile]);
+  const indicatorSize = isMobile ? '5px' : '6px';
 
   return (
     <div style={containerStyle}>
@@ -65,14 +57,18 @@ export const LanguageTabs = memo(function LanguageTabs({ isMobile = false }: Lan
             onClick={() => setLanguage(lang.id)}
             style={{
               ...baseButtonStyle,
-              backgroundColor: isActive ? 'var(--theme-memory-lang-active-bg)' : 'var(--theme-memory-lang-inactive-bg)',
+              backgroundColor: isActive ? 'var(--theme-memory-lang-active-bg)' : 'transparent',
               color: isActive ? 'var(--theme-memory-lang-active-text)' : 'var(--theme-memory-lang-inactive-text)',
-              boxShadow: isActive ? '0 1px 2px rgba(0,0,0,0.1)' : 'none',
+              borderColor: isActive ? 'var(--theme-memory-reset-border)' : 'transparent',
+              boxShadow: isActive ? '0 1px 3px rgba(0,0,0,0.1)' : 'none',
             }}
           >
             <span
               style={{
-                ...indicatorBaseStyle,
+                width: indicatorSize,
+                height: indicatorSize,
+                borderRadius: '50%',
+                flexShrink: 0,
                 backgroundColor: isActive ? lang.color : '#d1d5db',
               }}
             />