버전 0.0.7: 학습 카드 정리 + DataFrame 표 출력 + 전역 터미널·댓글 + 사이드바/런처 수정

- 검증 시스템·예측 카드·빈 셀 플레이스홀더 제거; 섹션 개요 3열+상세설명 재배치 및 가독성 개선
- 셀 + 버튼을 에디터 박스 위/아래 모서리 고정, 실행 버튼 우측·아이콘만·모두실행; 탑바 제거 floating 컨트롤; 기본 언어 한국어
- polars/pandas DataFrame 구조화 직렬화 + 표 렌더; 전역 터미널(백엔드 PTY); 레슨별 Giscus 댓글
- 사이드바 펼침 상태 localStorage 영속+useMemo로 버벅임 제거; 커리큘럼 클릭 시 본문 갱신(remount); SW stale 캐시 빈 화면 방지
- 런처 더블클릭 시 창 안 뜨던 문제 수정(인자 없이 실행 시 창); 런처 0.2.1
- 랜딩 사이트 재설계; preflight 9/9 + 에디터·랜딩 빌드 통과

Author: eddmpython

CHANGELOG.md

@@ -8,6 +8,45 @@ in this file (see `docs/skills/ops/release/git-and-release.md`).
 
 (next release accumulates here)
 
+## 0.0.7 - 2026-05-31
+
+학습 화면을 정리하고(검증 사족 제거·셀/섹션 배치 개선), polars DataFrame 출력을 깨진 HTML 덤프에서 표로 고치고,
+전역 터미널과 레슨별 댓글(Giscus)을 추가했다. 사이드바 네비게이션 버벅임을 없애고, 더블클릭으로 창이 안 뜨던 런처를 고쳤다.
+
+### Added
+
+- 전역 터미널: 좌측 사이드바 터미널 버튼 → 본문을 밀어 올리는 하단 패널(xterm.js)에 실제 로컬 셸 연결. 백엔드 PTY 추가(`src/codaro/api/terminalWebSocket.py`, `terminalRouter.py`; Windows는 pywinpty/ConPTY, POSIX는 `pty.fork`).
+- 레슨 하단 댓글 — GitHub Discussions 기반 Giscus(`editor/src/components/curriculum/lessonComments.tsx`, `editor/src/lib/giscusConfig.ts`). 레슨마다 `lesson:<category>/<contentId>` 토론에 매핑, 오프라인이면 안내로 graceful degrade.
+- DataFrame 표 렌더 컴포넌트(`editor/src/components/app/appPrimitives.tsx`의 `DataFrameOutput`)와 사이드바 펼침 상태 영속 훅(`editor/src/hooks/useSidebarExpansionState.ts`).
+- 랜딩: 브랜드 아바타 이미지/웹폰트 자산 추가.
+
+### Changed
+
+- 에디터 탑바 제거 → floating 컨트롤(`topBar.tsx`의 `TopControls`): SNS 아이콘을 최상단 우측으로, 본문/우측 패널이 세로 전체를 사용. 좌·우상단 아이콘 클러스터 갭 축소.
+- 노트북 셀: `+` 버튼을 코드/마크다운 에디터 박스의 위·아래 모서리에 고정(`notebookPanel.tsx`), 셀 간격 축소. 실행 버튼을 에디터 우측·아이콘만·"모두 실행"으로.
+- 커리큘럼 섹션 개요 재배치(이번 섹션에서 공부할 것·왜 유용한지·팁을 한 행 3열, 상세 설명은 단독 전체 폭 행) + 가독성 개선(아이콘 틴트 칩·좌측 액센트 보더·본문 대비 상향).
+- 시스템 기본 표시 언어를 한국어로(`useLocaleState.ts`, `localeCopy.ts`). 후원 카드 색상/디자인 보강.
+- PWA service worker(`editor/vite.config.ts`): `skipWaiting`/`clientsClaim`/`cleanupOutdatedCaches`로 재빌드 후 stale 캐시가 빈 화면을 만들던 문제 방지.
+- 랜딩 사이트 재설계(`landing/src/styles.css` 대폭 갱신, `App.jsx`·prerender 스크립트 갱신).
+- 런처 버전 0.2.0 → 0.2.1.
+
+### Fixed
+
+- 런처를 더블클릭하면 창이 안 뜨던 문제 — 인자 없이 실행하면 기본 launch로 네이티브 창을 띄우도록(`launcher/codaro-launcher/src/main.rs`, `command: Option<Command>` + `LaunchArgs::default()`).
+- 커리큘럼 사이드바에서 다른 레슨을 클릭해도 본문(코드 셀)이 안 바뀌던 문제 — 레슨 변경 시 `CurriculumView`를 `key`로 remount(`mainSurface.tsx`).
+- 사이드바 네비게이션 때 펼쳐둔 카테고리가 초기화돼 버벅이던 문제 — 펼침 상태를 localStorage에 영속 + 트리 빌드 `useMemo`(`productSidebar.tsx`).
+- polars `DataFrame.head()` 출력이 `<style>`+이스케이프된 HTML 텍스트로 덤프되던 문제 — polars/pandas를 구조화 직렬화(`src/codaro/runtime/localWorker.py`의 `_serializeDataFrame`)하고 프론트에서 표로 렌더.
+
+### Removed
+
+- 검증 시스템 전체 — "검증하기" 버튼, "검증 기준 / 실행 조건 / 확인할 것" 박스, 실습 헤더의 "확인:" 텍스트. 셀마다 비슷한 generic 보일러플레이트라 학습 카드를 어지럽혀 제거(실제 평가 로직은 백엔드에 남김).
+- 실행 전 예측 카드, 빈 코드 셀의 입력 플레이스홀더.
+
+### Verification
+
+- `uv run python -X utf8 tests/run.py preflight` → 9/9 게이트 통과(root-clean·docs·backend·widget-bridge·app-runtime·mobile-layout·editor-build·curriculum-quality-matrix·curriculum-executability).
+- 에디터 빌드(`npm --prefix editor run build`)와 랜딩 빌드(`npm --prefix landing run build`) 통과.
+
 ## 0.0.6 - 2026-05-31
 
 Names and brands the launcher. The download is now `Codaro.exe` (was `CodaroLauncher.exe`)

editor/package-lock.json

@@ -19,6 +19,8 @@
     "@lezer/highlight": "^1.2.1",
     "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-tabs": "^1.1.13",
+    "@xterm/addon-fit": "^0.10.0",
+    "@xterm/xterm": "^5.5.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^0.577.0",

editor/package.json

@@ -5,8 +5,9 @@ import {
 } from "@/lib/appBootstrap";
 import { MainSurface } from "@/components/app/mainSurface";
 import { ProductSidebar } from "@/components/app/productSidebar";
-import { TopBar } from "@/components/app/topBar";
+import { TopControls } from "@/components/app/topBar";
 import { ProviderSettingsSheet } from "@/components/assistant/providerSettingsSheet";
+import { TerminalPanel } from "@/components/terminal/terminalPanel";
 import type { AutomationSection, SurfaceMode } from "@/lib/surfaceModel";
 import { useAppBootstrapEffect } from "@/hooks/useAppBootstrapEffect";
 import { useAssistantTurnState } from "@/hooks/useAssistantTurnState";
@@ -176,9 +177,11 @@ function App() {
   const {
     canRun,
     currentResult,
+    notebookRunning,
     resetRuntimeState,
     results,
     runBlock,
+    runNotebook,
     runningBlockId,
     sessionId,
     setSessionId,
@@ -297,17 +300,13 @@ function App() {
     setSurface(nextSurface);
   }, [categories, selectCurriculumCategory, selectedCategory, setSurface]);
 
-  const runActiveNotebookBlock = useCallback(() => {
-    if (selectedBlock) {
-      runBlock(selectedBlock);
-    }
-  }, [runBlock, selectedBlock]);
-
   const copyDiagnosticExport = useCallback(async () => {
     const payload = await codaroApi.systemDiagnosticsExport();
     await writeClipboardText(JSON.stringify(payload, null, 2));
   }, []);
 
+  const [terminalOpen, setTerminalOpen] = useState(false);
+
   return (
     <LocaleProvider value={localeState}>
     <WidgetSessionProvider sessionId={sessionId}>
@@ -337,23 +336,20 @@ function App() {
         onDeleteCustomCurriculum={deleteCustomCurriculum}
         onSurfaceChange={selectSurface}
         onToggleTheme={toggleThemeMode}
+        terminalOpen={terminalOpen}
+        onToggleTerminal={() => setTerminalOpen((current) => !current)}
       />
 
-      <SidebarInset className="h-svh min-h-0 min-w-0 overflow-hidden">
-        <div className="flex h-full min-h-0 flex-col">
-          <TopBar
-            assistantCollapsed={assistantCollapsed}
-            canRun={canRun}
-            loadState={loadState}
-            notebookRunning={Boolean(runningBlockId)}
-            notice={notice}
-            showSidebarTrigger
-            surface={surface}
-            onCopyDiagnosticExport={copyDiagnosticExport}
-            onRunNotebook={runActiveNotebookBlock}
-            onToggleAssistant={() => setAssistantCollapsed((current) => !current)}
-          />
-          <div className="min-h-0 flex-1">
+      <SidebarInset className="relative flex h-svh min-h-0 min-w-0 flex-col overflow-hidden">
+        <TopControls
+          assistantCollapsed={assistantCollapsed}
+          notice={notice}
+          showSidebarTrigger
+          surface={surface}
+          onCopyDiagnosticExport={copyDiagnosticExport}
+          onToggleAssistant={() => setAssistantCollapsed((current) => !current)}
+        />
+        <div className="min-h-0 flex-1">
             <MainSurface
               aiConnecting={aiConnecting}
               aiProfile={aiProfile}
@@ -397,7 +393,9 @@ function App() {
               onRefreshAutomation={refreshAutomation}
               onRenameDocument={renameNotebookDocument}
               onOpenSharePackCurriculum={openSharePackCurriculum}
+              notebookRunning={notebookRunning}
               onRunBlock={runBlock}
+              onRunNotebook={runNotebook}
               onRunTask={runTask}
               onSelectBlock={selectBlock}
               onSelectCurriculumBlock={setSelectedCurriculumBlockId}
@@ -407,8 +405,12 @@ function App() {
               }}
               onToggleEStop={toggleEStop}
             />
-          </div>
         </div>
+        {terminalOpen ? (
+          <div className="h-72 min-h-0 shrink-0">
+            <TerminalPanel themeMode={themeMode} onClose={() => setTerminalOpen(false)} />
+          </div>
+        ) : null}
       </SidebarInset>
 
       <ProviderSettingsSheet

editor/src/App.tsx

@@ -106,6 +106,7 @@ export function ExecutionOutput({
   const packageError = result.status === "package-error";
   const hasError = packageError || result.status === "error" || Boolean(result.stderr);
   const widgetDescriptor = !hasError && isWidgetDescriptor(result.data) ? result.data : null;
+  const dataframeData = !widgetDescriptor && !hasError && result.type === "dataframe" ? asDataFramePayload(result.data) : null;
   const output = result.stderr || result.stdout || stringifyData(result.data) || t("runtime.noOutput");
   return (
     <div
@@ -127,6 +128,8 @@ export function ExecutionOutput({
             descriptor={widgetDescriptor}
           />
         </div>
+      ) : dataframeData ? (
+        <DataFrameOutput data={dataframeData} />
       ) : (
       <ScrollArea className="max-h-72">
         <pre className="whitespace-pre-wrap font-mono text-sm leading-6">{output}</pre>
@@ -152,6 +155,63 @@ export function ExecutionOutput({
   );
 }
 
+type DataFramePayload = {
+  columns: string[];
+  rows: Array<Record<string, unknown>>;
+  totalRows?: number;
+  truncated?: boolean;
+};
+
+function asDataFramePayload(data: unknown): DataFramePayload | null {
+  if (!data || typeof data !== "object") return null;
+  const record = data as { columns?: unknown; rows?: unknown };
+  if (!Array.isArray(record.columns) || !Array.isArray(record.rows)) return null;
+  return {
+    columns: record.columns.map((column) => String(column)),
+    rows: record.rows as Array<Record<string, unknown>>,
+    totalRows: typeof (data as { totalRows?: unknown }).totalRows === "number" ? (data as { totalRows: number }).totalRows : undefined,
+    truncated: Boolean((data as { truncated?: unknown }).truncated),
+  };
+}
+
+function formatDataFrameCell(value: unknown): string {
+  if (value === null || value === undefined) return "";
+  if (typeof value === "object") return JSON.stringify(value);
+  return String(value);
+}
+
+function DataFrameOutput({ data }: { data: DataFramePayload }) {
+  const { columns, rows } = data;
+  const totalRows = data.totalRows ?? rows.length;
+  return (
+    <div className="overflow-hidden rounded-md border bg-background" data-execution-output-mode="dataframe">
+      <div className="max-h-72 overflow-auto">
+        <table className="w-full border-collapse text-left text-xs">
+          <thead className="sticky top-0 bg-muted/70">
+            <tr>
+              {columns.map((column) => (
+                <th key={column} className="whitespace-nowrap border-b px-2 py-1 font-medium">{column}</th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {rows.map((row, rowIndex) => (
+              <tr key={rowIndex} className="odd:bg-muted/20">
+                {columns.map((column) => (
+                  <td key={column} className="whitespace-nowrap px-2 py-1 font-mono">{formatDataFrameCell(row[column])}</td>
+                ))}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+      <div className="border-t bg-muted/30 px-2 py-1 text-[10px] text-muted-foreground">
+        shape: ({totalRows}, {columns.length}){data.truncated ? ` · 상위 ${rows.length}행 표시` : ""}
+      </div>
+    </div>
+  );
+}
+
 export function Metric({ label, value, tone = "default" }: { label: string; value: string; tone?: "default" | "warning" }) {
   return (
     <Card className={tone === "warning" ? "bg-muted/40" : ""}>

editor/src/components/app/appPrimitives.tsx

@@ -49,6 +49,7 @@ type MainSurfaceProps = {
   eStop: EStopStatus;
   loadState: LoadState;
   messages: AssistantMessage[];
+  notebookRunning: boolean;
   pendingBlocks: BlockConfig[];
   prompt: string;
   referenceLoading: boolean;
@@ -75,6 +76,7 @@ type MainSurfaceProps = {
   onRenameDocument: (title: string) => void;
   onRejectPendingBlocks: () => void;
   onRunBlock: (block: BlockConfig) => void;
+  onRunNotebook: () => void;
   onRunTask: (task: TaskDefinition) => void;
   onSelectBlock: (blockId: string) => void;
   onSelectCurriculumBlock: (blockId: string) => void;
@@ -125,6 +127,7 @@ function MainSurfaceContent(props: MainSurfaceProps) {
           cellHelpByBlockId={props.cellHelpByBlockId}
           document={props.document}
           drafts={props.drafts}
+          notebookRunning={props.notebookRunning}
           pendingBlocks={props.pendingBlocks}
           results={props.results}
           runningBlockId={props.runningBlockId}
@@ -137,6 +140,7 @@ function MainSurfaceContent(props: MainSurfaceProps) {
           onRenameDocument={props.onRenameDocument}
           onRejectPendingBlocks={props.onRejectPendingBlocks}
           onRunBlock={props.onRunBlock}
+          onRunNotebook={props.onRunNotebook}
           onSelectBlock={props.onSelectBlock}
         />
         {props.assistantCollapsed ? null : (
@@ -210,6 +214,7 @@ function MainSurfaceContent(props: MainSurfaceProps) {
         )}
       >
         <CurriculumView
+          key={`${props.selectedCategory}/${props.selectedContentId}`}
           apiOnline={props.apiOnline}
           canRun={props.canRun}
           cellHelpByBlockId={props.cellHelpByBlockId}
@@ -227,13 +232,7 @@ function MainSurfaceContent(props: MainSurfaceProps) {
           renderCodeCellEditor={({ autoFocus = true, block, draft, onChange, onFocus, onRun }) => (
             <CodeCellEditor
               autoFocus={autoFocus}
-              placeholderText={
-                block.role === "snippet"
-                  ? t("cell.placeholder.snippet")
-                  : block.role === "exercise"
-                    ? "Python 코드를 입력하세요."
-                    : t("cell.placeholder.code")
-              }
+              placeholderText=""
               value={draft}
               onChange={onChange}
               onFocus={onFocus}