TouAI

Deep Research Illustration Implementation Plan

For agentic workers: REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (- [ ]) syntax for tracking.

Goal: Replace the placeholder deep-research illustration with a production scene that matches the provided design using the shared product backgrounds and prepared SVG assets.

Architecture: Keep the visual geometry in a small scene helper so the illustration component only renders layers: backgrounds, outer ring, dashed connectors, and positioned asset nodes. Use a tiny Node test to lock the scene reference size, node positions, and connector endpoints before implementing the component.

Tech Stack: Next.js, React, next/image, TypeScript, Tailwind CSS, node:test

Task 1: Scene geometry helper

Files:

  • Create: components/layout-products/illustrations/deep-research-scene-logic.ts

  • Test: components/layout-products/illustrations/deep-research-scene-logic.test.mjs

  • Step 1: Write the failing test

test("deep research scene keeps centered result and connector targets", () => {
  assert.deepEqual(REF, { W: 320, H: 220 });
  assert.equal(DEEP_RESEARCH_CENTER.x, 160);
  assert.equal(DEEP_RESEARCH_RESULT.x + DEEP_RESEARCH_RESULT.w / 2, DEEP_RESEARCH_CENTER.x);
});
  • Step 2: Run test to verify it fails

Run: node --experimental-strip-types --test "components/layout-products/illustrations/deep-research-scene-logic.test.mjs" Expected: FAIL because helper module does not exist yet.

  • Step 3: Write minimal implementation
export const REF = { W: 320, H: 220 } as const;
export const DEEP_RESEARCH_CENTER = { x: 160, y: 118 } as const;
export const DEEP_RESEARCH_RESULT = { x: 124, y: 88, w: 72, h: 86 } as const;
  • Step 4: Run test to verify it passes

Run: node --experimental-strip-types --test "components/layout-products/illustrations/deep-research-scene-logic.test.mjs" Expected: PASS

Task 2: Illustration rendering

Files:

  • Modify: components/layout-products/illustrations/deep-research-illustration.tsx

  • Create: components/layout-products/illustrations/deep-research-scene-logic.ts

  • Step 1: Render shared backgrounds

Add /products/bg.png and /products/bg-dark.png as fill images with light/dark toggles.

  • Step 2: Render scene layers

Use the helper constants to render:

  • outer circle

  • dashed SVG connectors from top/left/right nodes to the result

  • result.svg in the center

  • search.svg overlaid on the bottom-right of the result card

  • network.svg, academic.svg, database.svg at their design positions

  • Step 3: Keep visuals crisp

Use absolute positioning with percentages derived from the reference box and use preserveAspectRatio="none" only for the connector overlay.

  • Step 4: Verify rendering code compiles

Run: npm run typecheck Expected: PASS

Task 3: Verification

Files:

  • Modify: package.json

  • Step 1: Add a focused script

"test:deep-research-scene": "node --experimental-strip-types --test \"components/layout-products/illustrations/deep-research-scene-logic.test.mjs\""
  • Step 2: Run focused tests

Run: npm run test:deep-research-scene Expected: PASS

  • Step 3: Run repo checks

Run: npm run lint Expected: PASS

Run: npm run typecheck Expected: PASS

Deep Research Illustration Implementation Plan | Documentation