노트북 진단 표면 + 셀 삭제 시 커널 변수 정리

리액티브 진단을 셀에 표시한다 — 순환은 빨강 conflict 상태 + 상단 경로 배너, 다중정의·외부변경은
노란 advisory 칩, 코드 편집으로 오래된 다운스트림은 "오래됨"(stale). reactiveDiagnostics lib가
stale 전이 BFS와 셀별 진단 투영을 담당하고, 진단은 notebookRuntime→hook→surface→패널로 흐른다.
셀 삭제 시 removeCell로 워커 registry를 정리해 좀비 변수를 없앤다(검증된 remove-cell 엔드포인트 호출).
editor-runtime-preflight probe에 새 lib 스텁 추가.

Author: eddmpython

editor/src/App.tsx

@@ -177,7 +177,9 @@ function App() {
   const selectedBlock = activeDocument.blocks.find((block) => block.id === activeSelectedBlockId) ?? activeDocument.blocks.find(isExecutableBlock) ?? activeDocument.blocks[0];
   const {
     canRun,
+    cleanupCellDefinitions,
     currentResult,
+    diagnostics,
     notebookRunning,
     resetRuntimeState,
     results,
@@ -187,6 +189,7 @@ function App() {
     sessionId,
     setSessionId,
     setUiValue,
+    staleBlockIds,
     variables,
   } = useNotebookRuntimeState({
     apiOnline,
@@ -369,6 +372,7 @@ function App() {
               categories={filteredCategories}
               contents={contents}
               curriculumDocument={curriculumDocument}
+              diagnostics={diagnostics}
               document={document}
               drafts={drafts}
               eStop={eStop}
@@ -383,6 +387,7 @@ function App() {
               selectedBlockId={selectedBlockId}
               selectedCurriculumBlockId={selectedCurriculumBlockId}
               selectedContentId={selectedContentId}
+              staleBlockIds={staleBlockIds}
               surface={surface}
               tasks={tasks}
               loadState={loadState}
@@ -393,7 +398,10 @@ function App() {
               onConnectAi={connectAiProvider}
               onCellAsk={askCellAssistant}
               onDraftChange={updateDraft}
-              onDeleteCell={deleteNotebookCell}
+              onDeleteCell={(blockId) => {
+                cleanupCellDefinitions(blockId);
+                deleteNotebookCell(blockId);
+              }}
               onNewChat={startNewChat}
               onOpenTerminalCommand={openTerminalCommand}
               onPromptChange={setPrompt}

editor/src/components/app/mainSurface.tsx

@@ -13,6 +13,7 @@ import type {
   EStopStatus,
   ExecutionResult,
   LoadState,
+  ReactiveDiagnostics,
   SchedulerStatus,
   TaskDefinition,
   TaskListPayload,
@@ -40,6 +41,7 @@ type MainSurfaceProps = {
   categories: CurriculumCategory[];
   contents: CurriculumContentSummary[];
   curriculumDocument: CodaroDocument | null;
+  diagnostics: ReactiveDiagnostics;
   document: CodaroDocument;
   drafts: Record<string, string>;
   eStop: EStopStatus;
@@ -56,6 +58,7 @@ type MainSurfaceProps = {
   selectedCategory: string;
   selectedContentId: string;
   selectedCurriculumBlockId: string;
+  staleBlockIds: string[];
   surface: SurfaceMode;
   tasks: TaskListPayload;
   onAcceptPendingBlocks: () => void;
@@ -121,6 +124,7 @@ function MainSurfaceContent(props: MainSurfaceProps) {
         assistantLoading={props.assistantLoading}
         canRun={props.canRun}
         cellHelpByBlockId={props.cellHelpByBlockId}
+        diagnostics={props.diagnostics}
         document={props.document}
         drafts={props.drafts}
         messages={props.messages}
@@ -130,6 +134,7 @@ function MainSurfaceContent(props: MainSurfaceProps) {
         results={props.results}
         runningBlockId={props.runningBlockId}
         selectedBlockId={props.selectedBlockId}
+        staleBlockIds={props.staleBlockIds}
         onAcceptPendingBlocks={props.onAcceptPendingBlocks}
         onAddCell={props.onAddCell}
         onAsk={props.onAsk}

editor/src/components/app/notebookSurface.tsx

@@ -9,6 +9,7 @@ import type {
   BlockConfig,
   CodaroDocument,
   ExecutionResult,
+  ReactiveDiagnostics,
 } from "@/types";
 
 type ResultMap = Record<string, ExecutionResult>;
@@ -21,6 +22,7 @@ export type NotebookSurfaceProps = {
   assistantLoading: boolean;
   canRun: boolean;
   cellHelpByBlockId: Record<string, CellAiHelpState>;
+  diagnostics: ReactiveDiagnostics;
   document: CodaroDocument;
   drafts: Record<string, string>;
   messages: AssistantMessage[];
@@ -30,6 +32,7 @@ export type NotebookSurfaceProps = {
   results: ResultMap;
   runningBlockId: string | null;
   selectedBlockId: string;
+  staleBlockIds: string[];
   onAcceptPendingBlocks: () => void;
   onAddCell: (type: "code" | "markdown", referenceBlockId?: string, placement?: "before" | "after") => void;
   onAsk: (messageOverride?: string, scopeOverride?: TeacherScope) => void;
@@ -57,13 +60,15 @@ export function NotebookSurface(props: NotebookSurfaceProps) {
       <NotebookPanel
         canRun={props.canRun}
         cellHelpByBlockId={props.cellHelpByBlockId}
+        diagnostics={props.diagnostics}
         document={props.document}
         drafts={props.drafts}
         notebookRunning={props.notebookRunning}
         pendingBlocks={props.pendingBlocks}
         results={props.results}
         runningBlockId={props.runningBlockId}
         selectedBlockId={props.selectedBlockId}
+        staleBlockIds={props.staleBlockIds}
         onAddCell={props.onAddCell}
         onDraftChange={props.onDraftChange}
         onAcceptPendingBlocks={props.onAcceptPendingBlocks}

editor/src/components/notebook/notebookPanel.tsx

@@ -47,8 +47,14 @@ import { fetchCodeCompletions, type CompletionContextProvider } from "@/lib/code
 import { isExecutableBlock, type CellAiAction } from "@/lib/cellModel";
 import type { CellAiHelpState } from "@/lib/assistantTypes";
 import { statusLabel } from "@/lib/displayFormat";
+import {
+  blockInCycle,
+  cellDiagnosticChips,
+  formatCyclePaths,
+  type CellDiagnosticChip,
+} from "@/lib/reactiveDiagnostics";
 import { cn } from "@/lib/utils";
-import type { BlockConfig, CodaroDocument, ExecutionResult } from "@/types";
+import type { BlockConfig, CodaroDocument, ExecutionResult, ReactiveDiagnostics } from "@/types";
 
 type ResultMap = Record<string, ExecutionResult>;
 
@@ -114,13 +120,15 @@ const codeCellEditorTheme = EditorView.theme({
 export function NotebookPanel({
   canRun,
   cellHelpByBlockId,
+  diagnostics,
   document,
   drafts,
   notebookRunning,
   pendingBlocks,
   results,
   runningBlockId,
   selectedBlockId,
+  staleBlockIds,
   onAddCell,
   onAcceptPendingBlocks,
   onCellAsk,
@@ -134,13 +142,15 @@ export function NotebookPanel({
 }: {
   canRun: boolean;
   cellHelpByBlockId: Record<string, CellAiHelpState>;
+  diagnostics: ReactiveDiagnostics;
   document: CodaroDocument;
   drafts: Record<string, string>;
   notebookRunning: boolean;
   pendingBlocks: BlockConfig[];
   results: ResultMap;
   runningBlockId: string | null;
   selectedBlockId: string;
+  staleBlockIds: string[];
   onAddCell: (type: "code" | "markdown", referenceBlockId?: string, placement?: "before" | "after") => void;
   onAcceptPendingBlocks: () => void;
   onCellAsk: (action: CellAiAction, block: BlockConfig, question?: string) => void;
@@ -152,6 +162,8 @@ export function NotebookPanel({
   onRunNotebook: () => void;
   onSelectBlock: (blockId: string) => void;
 }) {
+  const staleSet = new Set(staleBlockIds);
+  const cyclePaths = formatCyclePaths(diagnostics.cycles);
   return (
     <section className="grid h-full min-h-0 grid-rows-[auto_auto_minmax(0,1fr)] p-2 sm:p-3">
       <div className="mb-2 flex min-h-8 items-center gap-2 pl-9">
@@ -180,6 +192,11 @@ export function NotebookPanel({
           onAccept={onAcceptPendingBlocks}
           onReject={onRejectPendingBlocks}
         />
+        {cyclePaths.length ? (
+          <div className="rounded-md border border-destructive/40 bg-destructive/10 px-2.5 py-1.5 text-[11px] text-destructive">
+            <span className="font-medium">순환 의존</span> — 실행 순서가 정해지지 않습니다: {cyclePaths.join(" · ")}
+          </div>
+        ) : null}
       </div>
 
       <ScrollArea className="h-full min-h-0">
@@ -194,6 +211,9 @@ export function NotebookPanel({
               result={results[block.id]}
               cellHelp={cellHelpByBlockId[block.id]}
               isRunning={runningBlockId === block.id}
+              isStale={staleSet.has(block.id)}
+              inCycle={blockInCycle(diagnostics, block.id)}
+              diagnosticChips={cellDiagnosticChips(diagnostics, block.id)}
               onCellAsk={(action, question) => onCellAsk(action, block, question)}
               onDelete={() => onDeleteCell(block.id)}
               onDraftChange={(value) => onDraftChange(block.id, value)}
@@ -548,6 +568,9 @@ function DocumentBlock({
   draft,
   isSelected,
   isRunning,
+  isStale = false,
+  inCycle = false,
+  diagnosticChips = [],
   result,
   cellHelp,
   onDraftChange,
@@ -562,6 +585,9 @@ function DocumentBlock({
   draft: string;
   isSelected: boolean;
   isRunning: boolean;
+  isStale?: boolean;
+  inCycle?: boolean;
+  diagnosticChips?: CellDiagnosticChip[];
   result?: ExecutionResult;
   cellHelp?: CellAiHelpState;
   onCellAsk: (action: CellAiAction, question?: string) => void;
@@ -572,7 +598,8 @@ function DocumentBlock({
   onSelect: () => void;
 }) {
   const cellTitle = block.type === "markdown" ? "Markdown" : block.type === "automation" ? "Automation" : "Python";
-  const resultStatus = isRunning ? "running" : result?.status ?? "idle";
+  // 우선순위: 실행 중 → 순환(conflict, 빨강) → stale(오래됨) → 실행 결과 → 대기.
+  const resultStatus = isRunning ? "running" : inCycle ? "conflict" : isStale ? "stale" : result?.status ?? "idle";
 
   if (block.type === "markdown") {
     return (
@@ -583,6 +610,7 @@ function DocumentBlock({
           type="markdown"
           selected={isSelected}
           cellHelp={cellHelp}
+          diagnosticChips={diagnosticChips}
           onCellAsk={onCellAsk}
           onDelete={onDelete}
         />
@@ -614,6 +642,7 @@ function DocumentBlock({
         type="code"
         selected={isSelected}
         cellHelp={cellHelp}
+        diagnosticChips={diagnosticChips}
         onCellAsk={onCellAsk}
         onDelete={onDelete}
         onRun={onRun}
@@ -664,6 +693,7 @@ function CellMetaBar({
   type,
   selected,
   cellHelp,
+  diagnosticChips = [],
   onCellAsk,
   onDelete,
   onRun,
@@ -675,6 +705,7 @@ function CellMetaBar({
   type: "code" | "markdown";
   selected: boolean;
   cellHelp?: CellAiHelpState;
+  diagnosticChips?: CellDiagnosticChip[];
   onCellAsk: (action: CellAiAction, question?: string) => void;
   onDelete: () => void;
   onRun?: () => void;
@@ -693,11 +724,24 @@ function CellMetaBar({
         <span className="truncate">{title}</span>
       </div>
       <div className="ml-auto flex shrink-0 items-center gap-1">
+        {diagnosticChips.map((chip) => (
+          <span
+            key={chip.kind}
+            className="h-6 rounded-md border border-amber-500/40 bg-amber-500/10 px-1.5 py-0.5 text-[11px] font-medium leading-5 text-amber-700 dark:text-amber-400"
+            title="정합성 경고 — 실행은 진행되며, 마지막 정의가 적용됩니다."
+          >
+            {chip.label}
+          </span>
+        ))}
         {status !== "idle" ? (
           <span
             className={cn(
               "h-6 rounded-md px-1.5 py-0.5 text-[11px] font-medium leading-5",
-              status === "error" ? "bg-destructive text-destructive-foreground" : "border bg-background text-muted-foreground",
+              status === "error" || status === "conflict"
+                ? "bg-destructive text-destructive-foreground"
+                : status === "stale"
+                  ? "border border-dashed bg-background text-muted-foreground"
+                  : "border bg-background text-muted-foreground",
             )}
           >
             {statusLabel(status)}

editor/src/hooks/useNotebookRuntimeState.ts

@@ -3,16 +3,19 @@ import { blockLabel, isExecutableBlock } from "@/lib/cellModel";
 import type { ResultMap } from "@/lib/assistantContext";
 import { translate } from "@/lib/localeCopy";
 import {
+  removeNotebookCellState,
   resolveBlockRunCode,
   runNotebookBlock,
   runReactiveNotebook,
   setNotebookUiValue,
 } from "@/lib/notebookRuntime";
+import { computeStaleBlockIds, emptyReactiveDiagnostics } from "@/lib/reactiveDiagnostics";
 import type { SurfaceMode } from "@/lib/surfaceModel";
 import type {
   AppNotice,
   BlockConfig,
   CodaroDocument,
+  ReactiveDiagnostics,
   VariableInfo,
 } from "@/types";
 
@@ -42,6 +45,9 @@ export function useNotebookRuntimeState({
   const [results, setResults] = useState<ResultMap>({});
   const [runningBlockId, setRunningBlockId] = useState<string | null>(null);
   const [notebookRunning, setNotebookRunning] = useState(false);
+  const [diagnostics, setDiagnostics] = useState<ReactiveDiagnostics>(emptyReactiveDiagnostics);
+  // 마지막 실행 시점에 보낸 셀 내용 스냅샷 — 이후 draft가 달라지면 그 셀(+다운스트림)이 stale.
+  const [lastRunContent, setLastRunContent] = useState<Record<string, string>>({});
 
   const codeBlocks = useMemo(() => document.blocks.filter(isExecutableBlock), [document.blocks]);
   const hasRunnableNotebook = codeBlocks.some((block) => (drafts[block.id] ?? block.content).trim());
@@ -51,6 +57,8 @@ export function useNotebookRuntimeState({
   const resetRuntimeState = useCallback(() => {
     setResults({});
     setVariables([]);
+    setDiagnostics(emptyReactiveDiagnostics);
+    setLastRunContent({});
   }, []);
 
   const runBlock = useCallback(async (block: BlockConfig) => {
@@ -104,6 +112,9 @@ export function useNotebookRuntimeState({
       if (outcome.sessionId && outcome.sessionId !== sessionId) setSessionId(outcome.sessionId);
       if (outcome.results) setResults((current) => ({ ...current, ...outcome.results }));
       if (outcome.variables) setVariables(outcome.variables);
+      if (outcome.diagnostics) setDiagnostics(outcome.diagnostics);
+      // 실행에 사용한 draft를 스냅샷 → 이후 편집을 stale 판정의 기준선으로.
+      setLastRunContent(Object.fromEntries(codeBlocks.map((block) => [block.id, drafts[block.id] ?? block.content])));
       if (outcome.notice) onNotice(outcome.notice);
     } finally {
       setNotebookRunning(false);
@@ -124,8 +135,26 @@ export function useNotebookRuntimeState({
     });
     if (outcome.results) setResults((current) => ({ ...current, ...outcome.results }));
     if (outcome.variables) setVariables(outcome.variables);
+    if (outcome.diagnostics) setDiagnostics(outcome.diagnostics);
   }, [sessionId, document, drafts, variables]);
 
+  // 코드 편집(draft≠마지막 실행 내용)으로 stale해진 셀 + 다운스트림 전이 + 백엔드 early-stop stale.
+  const staleBlockIds = useMemo(() => {
+    const dirty = new Set<string>();
+    for (const block of codeBlocks) {
+      const current = drafts[block.id] ?? block.content;
+      if (block.id in lastRunContent && current !== lastRunContent[block.id]) dirty.add(block.id);
+    }
+    const stale = computeStaleBlockIds(diagnostics.dependents, dirty);
+    for (const blockId of diagnostics.staleBlockIds) stale.add(blockId);
+    if (runningBlockId) stale.delete(runningBlockId);
+    return Array.from(stale);
+  }, [codeBlocks, drafts, lastRunContent, diagnostics, runningBlockId]);
+
+  const cleanupCellDefinitions = useCallback((blockId: string) => {
+    void removeNotebookCellState(sessionId, blockId);
+  }, [sessionId]);
+
   useEffect(() => {
     if (typeof window === "undefined") return;
     const handler = (event: Event) => {
@@ -144,7 +173,9 @@ export function useNotebookRuntimeState({
 
   return {
     canRun,
+    cleanupCellDefinitions,
     currentResult,
+    diagnostics,
     hasRunnableNotebook,
     notebookRunning,
     resetRuntimeState,
@@ -155,6 +186,7 @@ export function useNotebookRuntimeState({
     sessionId,
     setSessionId,
     setUiValue,
+    staleBlockIds,
     variables,
   };
 }