✨ Add editable thoughts canvas layout

[yuler]

Summary

• Add a local development edit mode for the thoughts canvas with card dragging, rotation controls, and save status.
• Persist card coordinates and rotation into a source JSON file so static builds render the saved layout.
• Default thoughts to canvas mode on mobile and add layout override coverage.

Test plan

• pnpm exec eslint astro.config.mjs src/components/thoughts/ThoughtsCanvasBottomToolbar.astro src/components/thoughts/thoughts-canvas-controller.ts src/pages/thoughts.astro src/utils/thoughts-canvas-layout.ts src/utils/thoughts-canvas-layout.test.ts src/components/icons/RotateCcw.astro src/components/icons/RotateCw.astro
• pnpm check
• pnpm test -- src/utils/thoughts-canvas-layout.test.ts --run
• pnpm build

[gemini-code-assist]

Code Review

This pull request introduces interactive layout editing capabilities for the thoughts canvas in development mode, allowing users to drag, rotate, and save card positions directly to a JSON file via a custom Vite dev server plugin. The feedback highlights critical issues regarding responsiveness and layout corruption, specifically noting that saving from a mobile viewport writes incorrect coordinates to the shared layout file, and that applying the same overrides to both desktop and mobile views breaks the mobile layout. Additionally, the reviewer identified erratic rotation behavior due to an incorrect transform origin (origin-top-left instead of origin-center), suggested storing a direct reference to the rotate handle in the drag state for safer cleanup, and recommended adding safeguards to prevent state updates on a destroyed controller during active save operations.

Important

The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.

[yuler]

/gemini review

[gemini-code-assist]

Code Review

This pull request introduces a development-only layout editor for the thoughts canvas, allowing users to drag, rotate, and save card positions directly to a local JSON file via a custom Vite plugin. The feedback identifies a layout issue where desktop-edited coordinates leak into mobile viewports, causing cards to misalign or fly off-screen, and suggests restricting these overrides to the desktop media query. Additionally, it recommends collecting stream chunks as buffers in the dev server middleware to prevent potential UTF-8 encoding corruption.

Important

The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.

[gemini-code-assist]

On mobile viewports (screen width < 768px), the layout is generated dynamically using mobRows and does not use the desktop overrides. However, because .thought-canvas-card uses left: var(--edit-x, var(--x-mob)) globally, any desktop-edited coordinates stored in --edit-x and --edit-y (which are set as inline styles when dragging on desktop) will override the mobile positions. This causes cards to be positioned incorrectly or fly off-screen on mobile if the user previously edited them on desktop.

To fix this, we should only apply the --edit-x and --edit-y overrides within the desktop media query (@media (min-width: 768px)), and keep the mobile layout strictly bound to --x-mob and --y-mob.

    .thought-canvas-card {
      left: var(--x-mob);
      top: var(--y-mob);
      transform: rotate(var(--rotate-deg, 0deg));
    }

[gemini-code-assist]

When reading from a Node.js readable stream (like req), chunks are emitted as Buffer objects by default. Concatenating them directly to a string (body += chunk) implicitly calls toString() on each chunk. If a multi-byte UTF-8 character happens to be split across a chunk boundary, this can result in encoding corruption.

It is safer to collect the buffers in an array and concatenate them using Buffer.concat() before converting to a string.

Suggested change

	let body = ''
	for await (const chunk of req)
	body += chunk
	const chunks = []
	for await (const chunk of req)
	chunks.push(chunk)
	const body = Buffer.concat(chunks).toString('utf8')