feat: refine ai-literacy evidence UI and fix nickname update flow

Author: jammy

packages/backend/prisma/content/java/lessons/java-1-4.en.json

@@ -132,6 +132,13 @@
       {
         "title": "Using Arrays.equals()",
         "explanation": "**Execution order:**\n1. Call `Arrays.equals(arr1, arr2)`.\n2. Compare length -> Pass.\n3. Compare contents (1==1, 2==2, 3==3).\n4. All are equal, so **true**.",
+        "illustrations": [
+          {
+            "src": "/lesson-illustrations/java-arrays-equals.svg",
+            "alt": "Arrays.equals compares array values by index and returns true",
+            "caption": "arr1 (0x001) and arr2 (0x002) have different addresses, but all indexed values are equal."
+          }
+        ],
         "keyInsight": "Array comparison = using Arrays.equals()",
         "visualizationType": "javaMemory",
         "code": "System.out.println(Arrays.equals(arr1, arr2));",
@@ -140,6 +147,7 @@
             "true"
           ],
           "warning": null,
+          "note": "Why true? Arrays.equals(arr1, arr2) compares element values in order (1, 2, 3), not object addresses.",
           "stack": [
             {
               "name": "arr1",
@@ -192,7 +200,8 @@
               "content": "[3, 4]"
             }
           ],
-          "output": []
+          "output": [],
+          "note": null
         }
       },
       {

packages/backend/prisma/content/java/lessons/java-1-4.json

@@ -132,6 +132,13 @@
       {
         "title": "Arrays.equals() 사용",
         "explanation": "**실행 순서:**\n1. `Arrays.equals(arr1, arr2)` 호출.\n2. 길이 비교 -> 통과.\n3. 내용 비교 (1==1, 2==2, 3==3).\n4. 모두 같으므로 **true**.",
+        "illustrations": [
+          {
+            "src": "/lesson-illustrations/java-arrays-equals.svg",
+            "alt": "Arrays.equals가 두 배열의 같은 인덱스 값을 순서대로 비교해 true가 되는 구조",
+            "caption": "arr1(0x001), arr2(0x002)는 주소는 다르지만 각 인덱스의 값이 모두 같아서 true가 됩니다."
+          }
+        ],
         "keyInsight": "배열 비교 = Arrays.equals() 사용",
         "visualizationType": "javaMemory",
         "code": "System.out.println(Arrays.equals(arr1, arr2));",
@@ -140,6 +147,7 @@
             "true"
           ],
           "warning": null,
+          "note": "왜 true일까요? Arrays.equals(arr1, arr2)는 주소가 아니라 각 요소 값(1,2,3)을 순서대로 비교하기 때문입니다.",
           "stack": [
             {
               "name": "arr1",
@@ -192,7 +200,8 @@
               "content": "[3, 4]"
             }
           ],
-          "output": []
+          "output": [],
+          "note": null
         }
       },
       {

packages/backend/prisma/content/java/lessons/java-1-4.zh.json

@@ -132,6 +132,13 @@
       {
         "title": "使用 Arrays.equals()",
         "explanation": "**执行顺序：**\n1. Call `Arrays.equals(arr1, arr2)`.\n2. Compare length -> Pass.\n3. Compare contents (1==1, 2==2, 3==3).\n4. All are equal, so **true**.",
+        "illustrations": [
+          {
+            "src": "/lesson-illustrations/java-arrays-equals.svg",
+            "alt": "Arrays.equals 按索引比较数组元素并返回 true",
+            "caption": "arr1（0x001）和 arr2（0x002）地址不同，但每个索引位置的值都相同。"
+          }
+        ],
         "keyInsight": "数组比较 = 使用 Arrays.equals()",
         "visualizationType": "javaMemory",
         "code": "System.out.println(Arrays.equals(arr1, arr2));",
@@ -140,6 +147,7 @@
             "true"
           ],
           "warning": null,
+          "note": "为什么是 true？Arrays.equals(arr1, arr2) 比较的是元素值是否按顺序相等（1、2、3），不是对象地址。",
           "stack": [
             {
               "name": "arr1",
@@ -192,7 +200,8 @@
               "content": "[3, 4]"
             }
           ],
-          "output": []
+          "output": [],
+          "note": null
         }
       },
       {

packages/backend/src/app.ts

@@ -58,6 +58,8 @@ const capacitorOrigins = ['capacitor://localhost', 'https://localhost', 'http://
 const allowedOrigins = [...config.server.corsOrigins, ...capacitorOrigins];
 
 app.register(cors, {
+  methods: ['GET', 'HEAD', 'POST', 'PUT', 'PATCH', 'DELETE', 'OPTIONS'],
+  allowedHeaders: ['Content-Type', 'Authorization'],
   origin: config.server.isDev ? true : (origin, callback) => {
     if (!origin) return callback(null, true);
     if (allowedOrigins.includes(origin)) {

packages/backend/src/types/lesson-content.ts

@@ -33,6 +33,11 @@ export interface LessonStep {
   occurrence?: number;        // 동일 코드 라인 구분 (기본값: 1)
   title?: string;
   explanation: string;
+  illustrations?: Array<{
+    src: string;
+    alt?: string;
+    caption?: string;
+  }>;
   highlight?: number[];
   highlightOffset?: number[]; // step.line 기준 상대 오프셋
   misconception?: string;

packages/frontend/public/lesson-illustrations/java-arrays-equals.svg

@@ -16,6 +16,7 @@ import { TerminalOutput, type TerminalLine } from '@/features/visualizers/shared
 interface LessonCodePanelProps {
   code: string;
   highlightLine: number;
+  pointerLine?: number;
   terminalLines: TerminalLine[];
   onSelectionChange?: (selection: CodeSelection) => void;
   defaultRatio?: number;
@@ -29,6 +30,7 @@ interface LessonCodePanelProps {
 export function LessonCodePanel({
   code,
   highlightLine,
+  pointerLine,
   terminalLines,
   onSelectionChange,
   defaultRatio = 0.5,
@@ -106,6 +108,7 @@ export function LessonCodePanel({
           <CodeMirrorEditor
             code={code}
             highlightLine={highlightLine}
+            pointerLine={pointerLine}
             onSelectionChange={onSelectionChange}
             bottomPadding={0}
             mobileFontSizeOffset={2}

packages/frontend/src/features/courses/components/LessonCodePanel.tsx

@@ -52,6 +52,43 @@ function asString(value: unknown): string | undefined {
   return typeof value === 'string' ? value : undefined;
 }
 
+interface AiEvidenceData {
+  phase?: string;
+  expectedPath?: string;
+  actualPath?: string;
+  patch?: string;
+  output?: string;
+  checklist: string[];
+  lineRef?: number;
+  codeRef?: string;
+}
+
+function getAiEvidenceData(
+  stepRecord: Record<string, unknown> | undefined,
+  lineRef?: number
+): AiEvidenceData {
+  if (!stepRecord) {
+    return { checklist: [], lineRef };
+  }
+
+  const state = isRecord(stepRecord.algorithmState) ? stepRecord.algorithmState : undefined;
+  const rawChecklist = state?.checklist;
+  const checklist = Array.isArray(rawChecklist)
+    ? rawChecklist.filter((item): item is string => typeof item === 'string' && item.trim().length > 0)
+    : [];
+
+  return {
+    phase: asString(state?.phase),
+    expectedPath: asString(state?.expectedPath),
+    actualPath: asString(state?.actualPath),
+    patch: asString(state?.patch),
+    output: asString(state?.output),
+    checklist,
+    lineRef,
+    codeRef: asString(stepRecord.code),
+  };
+}
+
 export function LessonUnifiedView({
   code,
   steps,
@@ -62,6 +99,7 @@ export function LessonUnifiedView({
 }: LessonUnifiedViewProps) {
   const { t } = useTranslation();
   const isMobile = useIsMobile();
+  const isAiLiteracy = languageId === 'ai-literacy';
   const [activeVizTab, setActiveVizTab] = useState<'flow' | 'memory' | 'jsMemory'>('flow');
   const [isConceptOpen, setIsConceptOpen] = useState(false);
 
@@ -70,10 +108,15 @@ export function LessonUnifiedView({
     steps,
     lessonId,
     onQuiz,
+    forceSingleRound: isAiLiteracy,
   });
 
   const currentStep = steps[nav.actualStepIndex];
   const currentStepRecord = currentStep as Record<string, unknown> | undefined;
+  const currentStepIllustrations = Array.isArray(currentStepRecord?.illustrations)
+    ? (currentStepRecord.illustrations as Array<{ src: string; alt?: string; caption?: string }>)
+    : undefined;
+  const aiEvidence = getAiEvidenceData(currentStepRecord, currentStep?.line);
   const isExplanationRound = nav.round === 'explanation';
   const { showMemoryTab, showJsMemoryTab } = useMemo(() => {
     const vizSteps = nav.vizStepIndices.map(i => steps[i]);
@@ -86,7 +129,9 @@ export function LessonUnifiedView({
     };
   }, [languageId, nav.vizStepIndices, steps]);
   const hasVizTabs = showMemoryTab || showJsMemoryTab;
-  const flowLanguage = languageId === 'python-practical' ? 'python' : (languageId || 'c');
+  const flowLanguage = languageId === 'python-practical'
+    ? 'python'
+    : (languageId === 'ai-literacy' ? 'javascript' : (languageId || 'c'));
   const rawConceptType = asString(currentStepRecord?.conceptVisualizationType) || asString(currentStepRecord?.visualizationType);
   const conceptType = rawConceptType && CONCEPT_TYPES.has(rawConceptType) ? rawConceptType : undefined;
   const conceptState = isRecord(currentStepRecord?.conceptState) ? currentStepRecord.conceptState : undefined;
@@ -167,16 +212,23 @@ export function LessonUnifiedView({
         borderColor: 'var(--theme-lesson-panel-border)',
       }}
     >
-      <div className="flex gap-1">
-        <span className={`round-tab px-2.5 py-1 text-xs md:text-sm font-bold rounded-full ${isExplanationRound ? 'round-tab-active' : 'round-tab-inactive'}`}>
-          {t('lesson.explanation')}
-        </span>
-        {nav.hasVizRound && (
-          <span className={`round-tab px-2.5 py-1 text-xs md:text-sm font-bold rounded-full ${!isExplanationRound ? 'round-tab-active' : 'round-tab-inactive'}`}>
-            {t('lesson.visualization')}
+      {!isAiLiteracy && (
+        <div className="flex gap-1">
+          <span className={`round-tab px-2.5 py-1 text-xs md:text-sm font-bold rounded-full ${isExplanationRound ? 'round-tab-active' : 'round-tab-inactive'}`}>
+            {t('lesson.explanation')}
           </span>
-        )}
-      </div>
+          {nav.hasVizRound && (
+            <span className={`round-tab px-2.5 py-1 text-xs md:text-sm font-bold rounded-full ${!isExplanationRound ? 'round-tab-active' : 'round-tab-inactive'}`}>
+              {t('lesson.visualization')}
+            </span>
+          )}
+        </div>
+      )}
+      {isAiLiteracy && (
+        <span className="text-xs md:text-sm font-semibold opacity-80">
+          AI Verification
+        </span>
+      )}
       <span className="ml-auto text-xs md:text-sm font-semibold opacity-60">
         {nav.stepIndex + 1}/{nav.totalInRound} · L{currentStep?.line || 1}
       </span>
@@ -199,7 +251,65 @@ export function LessonUnifiedView({
             <StepExplanation
               explanation={currentStep?.explanation || ''}
               stepIndex={nav.stepIndex}
+              illustrations={currentStepIllustrations}
             />
+            {isAiLiteracy && (
+              <div className="mt-4 rounded-xl border border-[var(--theme-lesson-panel-border)] bg-[var(--theme-lesson-panel-bg)] overflow-hidden">
+                <div className="px-3 py-2 text-sm font-semibold border-b border-[var(--theme-lesson-panel-border)]">
+                  Evidence
+                </div>
+                <div className="px-3 py-3 space-y-2.5 text-xs">
+                  <div className="flex items-center gap-2">
+                    <span className="font-semibold opacity-70 min-w-[56px]">Phase</span>
+                    <span className="rounded-md border border-[var(--theme-lesson-panel-border)] px-2 py-1 font-semibold">
+                      {aiEvidence.phase || 'inspect'}
+                    </span>
+                  </div>
+                  {aiEvidence.codeRef && (
+                    <div className="rounded-lg border border-[var(--theme-lesson-panel-border)] px-2.5 py-2">
+                      <div className="font-semibold opacity-70 mb-1">Reference</div>
+                      <div className="font-mono break-all text-[11px]">{aiEvidence.codeRef}</div>
+                    </div>
+                  )}
+                  {(aiEvidence.expectedPath || aiEvidence.actualPath) && (
+                    <div className="rounded-lg border border-[var(--theme-lesson-panel-border)] px-2.5 py-2">
+                      <div className="font-semibold opacity-70 mb-1">Path Check</div>
+                      {aiEvidence.expectedPath && (
+                        <div className="font-mono break-all">expect: {aiEvidence.expectedPath}</div>
+                      )}
+                      {aiEvidence.actualPath && (
+                        <div className="font-mono break-all">real: {aiEvidence.actualPath}</div>
+                      )}
+                      {aiEvidence.expectedPath && aiEvidence.actualPath && (
+                        <div className="font-mono mt-1 opacity-80">→ {aiEvidence.expectedPath} to {aiEvidence.actualPath}</div>
+                      )}
+                    </div>
+                  )}
+                  {aiEvidence.patch && (
+                    <div className="rounded-lg border border-[var(--theme-lesson-panel-border)] px-2.5 py-2">
+                      <div className="font-semibold opacity-70 mb-1">Patch</div>
+                      <div className="font-mono break-all">{aiEvidence.patch}</div>
+                    </div>
+                  )}
+                  {aiEvidence.output && (
+                    <div className="rounded-lg border border-[var(--theme-lesson-panel-border)] px-2.5 py-2">
+                      <div className="font-semibold opacity-70 mb-1">Output</div>
+                      <div className="font-mono break-all">{aiEvidence.output}</div>
+                    </div>
+                  )}
+                  {aiEvidence.checklist.length > 0 && (
+                    <div className="rounded-lg border border-[var(--theme-lesson-panel-border)] px-2.5 py-2">
+                      <div className="font-semibold opacity-70 mb-1">Checklist</div>
+                      <div className="space-y-1">
+                        {aiEvidence.checklist.map((item) => (
+                          <div key={item} className="font-mono">- {item}</div>
+                        ))}
+                      </div>
+                    </div>
+                  )}
+                </div>
+              </div>
+            )}
           </motion.div>
         ) : (
           <motion.div
@@ -300,6 +410,7 @@ export function LessonUnifiedView({
       <LessonCodePanel
         code={code}
         highlightLine={currentStep?.line || 1}
+        pointerLine={isAiLiteracy ? currentStep?.line : undefined}
         terminalLines={terminalLines}
         onSelectionChange={onSelectionChange}
         orientation={isMobile ? 'vertical' : 'horizontal'}