feat(02-autograd): flat rounded chip model + dedicated light palette

Addresses the "chips still look like boxes" + "light mode colours need their own
design" feedback.

Chip model (blender/scripts/autograd_chip.py → public/models/autograd/chip.glb):
- Reshaped from a chunky 1×1×0.45 slab into a low, flat, rounded CARD that faces
  the camera: 1.35 wide × 0.85 tall × 0.28 thin, pronounced-but-restrained
  rounded corners, a recessed front panel, a thin glowing rim frame, and a faint
  under-glow (not a hard shadow). Reads as a luminous computation chip at 3/4,
  not a cube. Material names (ChipBodyMat/ChipRimMat/ChipGlowMat) unchanged.

Palette (theme.ts) — dark and light now designed separately, per-kind:
- Per-kind body + idle rim; the output chip keeps an amber identity rim
  (#f59e0b light / #fbbf24 dark) so "the answer" stands out, while variable/op
  rims flare to the flow colour (forward cyan / backward violet).
- Light: bg #f6f8fc, grid #dbe5f2, variable #ffffff, op #eef3f9, output #fff7ed,
  inactive edge #c8d3e2, card rgba(255,255,255,0.94)/#0f172a/#64748b — white
  chips stay legible via rim + shading, not lost in the background.

AutogradNode: per-kind idle rim, amber output flare, halo follows the active rim
and is widened/flattened to the card. Smaller per-kind scale for the larger card;
node label cards lifted further off the chip. Preview PNG regenerated.

108 unit tests + 7 e2e pass; check-assets passes (chip 31 KB).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: lxb12123

blender/scripts/autograd_chip.py

@@ -1,24 +1,28 @@
 """
-Autograd lab: chip.glb — a low, rounded "computation chip" node.
+Autograd lab: chip.glb — a low, flat, rounded "computation chip" CARD.
+
+Designed to face the camera in the vertical-board DAG: a wide rounded rectangle
+(x=1.35, y=0.85) that is THIN toward the viewer (z=0.28), so at a 3/4 angle it
+reads as a slim chip module — not a chunky box. Rounded corners, a recessed front
+panel, a thin glowing rim frame around the face, and a faint under-glow behind.
 
 THREE retintable material regions (the React <AutogradNode> clones the glb per
 instance and recolours these by theme / node type / activation — detection is by
 material NAME, so DO NOT rename):
 
   - ChipBodyMat   body (ceramic/satin, base-colour retinted per node)
-  - ChipRimMat    glowing top rim frame (emissive, brightens on activation)
-  - ChipGlowMat   soft under-plate halo (low emissive, theme tint)
+  - ChipRimMat    glowing face rim frame (emissive)
+  - ChipGlowMat   recessed front panel + soft under-glow (low emissive)
 
-Footprint ~1×1, height ~0.45 so it reads as a module. LabelTop/LabelBottom empty
-anchors are kept for the React label layer. PBR nodes only, no textures.
+LabelTop / LabelBottom empties are kept for the React label layer. PBR only.
 """
 import os
 import bpy
 
 REPO_ROOT = os.path.abspath(os.path.join(os.path.dirname(__file__), os.pardir, os.pardir))
 OUTPUT_PATH = os.path.join(REPO_ROOT, 'public', 'models', 'autograd', 'chip.glb')
 
-BODY_H = 0.45
+W, H, D = 1.35, 0.85, 0.28   # width(x), face-height(y), thickness toward camera(z)
 
 
 def _mat(name, base, *, rough=0.5, metal=0.1, emit=None, emit_strength=0.0):
@@ -49,46 +53,52 @@ def _box(name, location, scale, material, parent=None):
 def main() -> None:
     bpy.ops.wm.read_factory_settings(use_empty=True)
 
-    body_mat = _mat('ChipBodyMat', (0.82, 0.84, 0.88), rough=0.42, metal=0.12)
-    rim_mat = _mat('ChipRimMat', (0.0, 0.9, 1.0), rough=0.35, metal=0.0,
+    body_mat = _mat('ChipBodyMat', (0.86, 0.88, 0.92), rough=0.4, metal=0.1)
+    rim_mat = _mat('ChipRimMat', (0.0, 0.9, 1.0), rough=0.3, metal=0.0,
                    emit=(0.0, 0.9, 1.0), emit_strength=3.0)
-    glow_mat = _mat('ChipGlowMat', (0.0, 0.9, 1.0), rough=0.6, metal=0.0,
-                    emit=(0.0, 0.9, 1.0), emit_strength=0.6)
+    glow_mat = _mat('ChipGlowMat', (0.0, 0.9, 1.0), rough=0.55, metal=0.0,
+                    emit=(0.0, 0.9, 1.0), emit_strength=0.5)
 
-    # Body: low rounded chip.
+    # --- Body: flat rounded card (thin in z, facing the camera) ---
     bpy.ops.mesh.primitive_cube_add(size=1.0, location=(0.0, 0.0, 0.0))
-    cube = bpy.context.active_object
-    cube.name = 'Chip'
-    cube.scale = (1.0, 1.0, BODY_H)
+    body = bpy.context.active_object
+    body.name = 'Chip'
+    body.scale = (W, H, D)
     bpy.ops.object.transform_apply(scale=True)
-    bevel = cube.modifiers.new(name='Bevel', type='BEVEL')
-    bevel.width = 0.06
-    bevel.segments = 3
+    bevel = body.modifiers.new(name='Bevel', type='BEVEL')
+    bevel.width = 0.11           # pronounced-but-restrained rounded corners
+    bevel.segments = 4
     bevel.limit_method = 'ANGLE'
     bpy.ops.object.modifier_apply(modifier='Bevel')
-    cube.data.materials.append(body_mat)
+    body.data.materials.append(body_mat)
+
+    face_z = D / 2.0             # the +z face plane
+
+    # --- Recessed front panel (the "screen") just inside the rim ---
+    _box('ChipPanel', (0.0, -0.02, face_z - 0.02), (W - 0.34, H - 0.30, 0.03), glow_mat, parent=body)
 
-    # Glowing top rim frame (4 thin emissive bars inset from the edges).
-    top_z = BODY_H / 2.0 + 0.012
-    inset, bar_t, bar_h = 0.36, 0.045, 0.03
-    span = inset * 2.0 + bar_t
+    # --- Thin glowing rim frame around the face perimeter ---
+    inset_x = W / 2.0 - 0.12
+    inset_y = H / 2.0 - 0.12
+    bar = 0.04
+    rim_z = face_z + 0.012
     for name, loc, scale in (
-        ('Rim_PX', (inset, 0.0, top_z), (bar_t, span, bar_h)),
-        ('Rim_NX', (-inset, 0.0, top_z), (bar_t, span, bar_h)),
-        ('Rim_PY', (0.0, inset, top_z), (span, bar_t, bar_h)),
-        ('Rim_NY', (0.0, -inset, top_z), (span, bar_t, bar_h)),
+        ('Rim_T', (0.0, inset_y, rim_z), (inset_x * 2.0 + bar, bar, 0.022)),
+        ('Rim_B', (0.0, -inset_y, rim_z), (inset_x * 2.0 + bar, bar, 0.022)),
+        ('Rim_L', (-inset_x, 0.0, rim_z), (bar, inset_y * 2.0 + bar, 0.022)),
+        ('Rim_R', (inset_x, 0.0, rim_z), (bar, inset_y * 2.0 + bar, 0.022)),
     ):
-        _box(name, loc, scale, rim_mat, parent=cube)
+        _box(name, loc, scale, rim_mat, parent=body)
 
-    # Soft under-plate halo.
-    _box('ChipUnderGlow', (0.0, 0.0, -BODY_H / 2.0 - 0.02), (1.08, 1.08, 0.02), glow_mat, parent=cube)
+    # --- Soft under-glow plate behind the card (faint, not a hard shadow) ---
+    _box('ChipUnderGlow', (0.0, 0.0, -D / 2.0 - 0.04), (W + 0.18, H + 0.18, 0.02), glow_mat, parent=body)
 
-    # Label anchors for the React label layer.
-    for anchor_name, z in (('LabelTop', BODY_H / 2.0 + 0.18), ('LabelBottom', -BODY_H / 2.0 - 0.18)):
-        bpy.ops.object.empty_add(type='PLAIN_AXES', location=(0.0, 0.0, z))
+    # --- Label anchors ---
+    for anchor_name, y in (('LabelTop', H / 2.0 + 0.4), ('LabelBottom', -H / 2.0 - 0.3)):
+        bpy.ops.object.empty_add(type='PLAIN_AXES', location=(0.0, y, 0.0))
         anchor = bpy.context.active_object
         anchor.name = anchor_name
-        anchor.parent = cube
+        anchor.parent = body
 
     bpy.ops.object.select_all(action='SELECT')
     os.makedirs(os.path.dirname(OUTPUT_PATH), exist_ok=True)

components/3d/autograd/AutogradLabels.tsx

@@ -41,7 +41,7 @@ export function NodeCard({
   position, kind, name, value, valueRevealed, detail, grad, gradRevealed, derived, constant, expansion, theme,
 }: NodeCardProps) {
   const title = kind === 'output' ? 'output' : name || KIND_LABEL[kind];
-  const accent = kind === 'output' ? theme.gradPos : theme.forward;
+  const accent = kind === 'output' ? theme.outputRim : theme.forward;
   return (
     <Html position={position} center distanceFactor={8} style={cardStyle(theme)} zIndexRange={[20, 0]}>
       <div style={{ fontWeight: 700, fontSize: 12.5, color: accent, textAlign: 'center', marginBottom: 1 }}>{title}</div>

components/3d/autograd/AutogradNode.tsx

@@ -6,13 +6,14 @@ import { useFrame } from '@react-three/fiber';
 import {
   AdditiveBlending, CanvasTexture, Color, type Group, type Mesh, type Object3D,
 } from 'three';
-import type { AutogradTheme, NodeKind } from './theme';
+import { activeRimColor, type AutogradTheme, type NodeKind } from './theme';
 
 const CHIP_URL = '/microgpt-3d-tutorial/models/autograd/chip.glb';
 
-// Per-kind base scale — the output chip is the biggest (it's "the answer"),
-// variables the smallest. Applied on top of the layout group scale.
-const KIND_SCALE: Record<NodeKind, number> = { variable: 0.82, op: 0.92, output: 1.12 };
+// Per-kind base scale — output slightly bigger ("the answer"), variables
+// smallest. The chip card is wide (1.35×0.85), so these are smaller than for a
+// unit cube. Applied on top of the layout group scale.
+const KIND_SCALE: Record<NodeKind, number> = { variable: 0.7, op: 0.76, output: 0.9 };
 
 // A soft radial sprite for the additive halo behind a glowing chip — generated
 // once (client-side) and tinted per node via the material colour.
@@ -73,11 +74,14 @@ export function AutogradNode({ position, kind, theme, flowColor, activation, lit
   }, [gltf.scene]);
 
   const bodyColor = theme.body[kind];
-  // Rim: established nodes keep a soft flow-coloured glow; the active node flares.
+  // Rim: each kind has an idle identity colour; established/active nodes flare to
+  // the flow colour (forward/backward) — except output, which keeps amber.
+  const idleRim = theme.rimIdle[kind];
+  const activeRim = activeRimColor(theme, kind, flowColor);
   const flowLit = lit || activation > 0.03;
-  const rimColor = flowLit ? flowColor : theme.rimIdle;
-  const rimIntensity = (lit ? 1.0 : 0.4) + 2.2 * activation;
-  const glowColor = flowLit ? flowColor : theme.rimIdle;
+  const rimColor = flowLit ? activeRim : idleRim;
+  const rimIntensity = (lit ? 1.0 : 0.45) + 2.2 * activation;
+  const glowColor = flowLit ? activeRim : idleRim;
 
   useLayoutEffect(() => {
     scene.traverse((obj: Object3D) => {
@@ -117,14 +121,14 @@ export function AutogradNode({ position, kind, theme, flowColor, activation, lit
 
   const s = KIND_SCALE[kind];
   const tex = haloTexture();
-  const haloColor = useMemo(() => new Color(flowColor), [flowColor]);
+  const haloColor = useMemo(() => new Color(activeRim), [activeRim]);
 
   return (
     <group ref={groupRef} position={position}>
       {/* Additive halo behind the chip — only visible as it activates. */}
       {tex && activation > 0.04 && (
         <Billboard position={[0, 0, -0.25]}>
-          <mesh scale={[2.2 * s, 2.2 * s, 1]}>
+          <mesh scale={[2.9 * s, 2.0 * s, 1]}>
             <planeGeometry args={[1, 1]} />
             <meshBasicMaterial
               map={tex}

components/3d/autograd/AutogradSandbox.tsx

@@ -233,7 +233,7 @@ export function AutogradSandbox({ defaultExpression, defaultVariables }: Autogra
           return (
             <NodeCard
               key={`card-${n.id}`}
-              position={[pos[n.id][0], pos[n.id][1] + 0.95, pos[n.id][2]]}
+              position={[pos[n.id][0], pos[n.id][1] + 1.05, pos[n.id][2]]}
               kind={kindOf(n.id)}
               name={n.label}
               value={n.value.data}

components/3d/autograd/theme.ts

@@ -1,7 +1,8 @@
 /**
- * Semantic palette for the 02-autograd "luminous computation lab". One place for
- * every colour so forward/backward flow, gradient sign, node hierarchy, and edge
- * state read consistently on both themes.
+ * Semantic palette for the 02-autograd "luminous computation lab". Dark and
+ * light are designed SEPARATELY (not one inverted set): dark is the deep-lab
+ * look; light is a cool, airy lab bench where white chips stay legible against a
+ * soft blue-grey background via their rims and shading.
  */
 export type Scheme = 'light' | 'dark';
 export type NodeKind = 'variable' | 'op' | 'output';
@@ -11,34 +12,31 @@ export interface AutogradTheme {
   grid: string;
   /** Chip body base colour by node hierarchy (retinted onto ChipBodyMat). */
   body: Record<NodeKind, string>;
-  /** Dim rim colour when a node is idle. */
-  rimIdle: string;
-  /** Forward data flow (value pulses + active forward edges). */
+  /** Dim rim colour when a node is idle, by hierarchy (its identity outline). */
+  rimIdle: Record<NodeKind, string>;
+  /** The output chip keeps an amber identity rim even when "active". */
+  outputRim: string;
+  /** Forward data flow (value pulses + active forward edges + var/op active rim). */
   forward: string;
-  /** Backward gradient flow (grad pulses + active backward edges). */
+  /** Backward gradient flow. */
   backward: string;
-  /** Gradient value colouring by sign. */
   gradPos: string;
   gradNeg: string;
-  /** Inactive edge tint. */
   edgeInactive: string;
-  /** Soft afterglow on a propagated edge. */
   edgePropagated: string;
-  /** Html card. */
   cardBg: string;
   cardBorder: string;
   cardText: string;
   cardMuted: string;
-  /** Title / subtitle ink. */
-  title: string;
   subtitle: string;
 }
 
 const DARK: AutogradTheme = {
   bg: '#070a12',
   grid: '#161d2c',
-  body: { variable: '#3a465c', op: '#313c50', output: '#46577a' },
-  rimIdle: '#4a566b',
+  body: { variable: '#3a465c', op: '#313c50', output: '#473f53' },
+  rimIdle: { variable: '#5a6680', op: '#4a566b', output: '#7a6336' },
+  outputRim: '#fbbf24',
   forward: '#22d3ee',
   backward: '#a78bfa',
   gradPos: '#34d399',
@@ -49,27 +47,26 @@ const DARK: AutogradTheme = {
   cardBorder: 'rgba(120,140,180,0.30)',
   cardText: '#e8eefc',
   cardMuted: '#94a3b8',
-  title: '#e8eefc',
   subtitle: '#aab6cc',
 };
 
 const LIGHT: AutogradTheme = {
-  bg: '#eef3fa',
-  grid: '#d4deeb',
-  body: { variable: '#ffffff', op: '#e8eef6', output: '#ffffff' },
-  rimIdle: '#9fb0c8',
+  bg: '#f6f8fc',
+  grid: '#dbe5f2',
+  body: { variable: '#ffffff', op: '#eef3f9', output: '#fff7ed' },
+  rimIdle: { variable: '#9fb0c8', op: '#94a3b8', output: '#f0b25e' },
+  outputRim: '#f59e0b',
   forward: '#0891b2',
   backward: '#7c3aed',
   gradPos: '#059669',
   gradNeg: '#e11d48',
-  edgeInactive: '#b8c5d6',
-  edgePropagated: '#8aa0bd',
-  cardBg: 'rgba(255,255,255,0.92)',
+  edgeInactive: '#c8d3e2',
+  edgePropagated: '#9fb0c8',
+  cardBg: 'rgba(255,255,255,0.94)',
   cardBorder: 'rgba(80,110,150,0.28)',
   cardText: '#0f172a',
-  cardMuted: '#5d6b80',
-  title: '#0f172a',
-  subtitle: '#4a5a72',
+  cardMuted: '#64748b',
+  subtitle: '#475569',
 };
 
 export function getAutogradTheme(scheme: Scheme): AutogradTheme {
@@ -80,3 +77,8 @@ export function getAutogradTheme(scheme: Scheme): AutogradTheme {
 export function gradColor(theme: AutogradTheme, g: number): string {
   return g < 0 ? theme.gradNeg : theme.gradPos;
 }
+
+/** The rim colour a node flares to when active: amber for output, else flow. */
+export function activeRimColor(theme: AutogradTheme, kind: NodeKind, flowColor: string): string {
+  return kind === 'output' ? theme.outputRim : flowColor;
+}