fix(agent-gui): close vinyl carousel fade gaps

[copper6666]

Summary

• Scale the AgentGUI vinyl carousel as one proportional unit and round its container width to whole pixels.
• Extend and tighten the carousel fade mask to remove visible side gaps.
• Include the accompanying AgentGUI composer and Tutti vinyl asset updates from the local working tree.

Validation

• Pre-commit formatting and lint checks passed.
• Electron runtime, UI boundary, and renderer boundary checks passed.

The local full pre-push check was skipped because the pinned golangci-lint binary is not installed locally; CI should run the complete repository checks.

---

Summary by cubic

Fixes visible gaps around the AgentGUI vinyl carousel and pins the hero layer to its placeholder so it no longer overlaps the title on narrow panes. Sizes the canvas from integer layout pixels, extends the fade to the edges, and fully dissolves far-edge records.

• Bug Fixes
  • Size the carousel canvas from clientWidth/clientHeight (not transformed getBoundingClientRect) and round layer width to whole px; scale the ring to 0.8.
  • Extend the horizontal fade to 0%/100% and tighten the vertical fade; ensure mask covers the full stage.
  • Fully dissolve records past the ±1 neighbours to remove half-faded edge slivers.
  • Pin the floating carousel layer to the measured placeholder slot; resync on body resize and ready/gate DOM swaps.
  • Add agent-gui-node__composer-hero-prompt-input-area; reduce hero input and project row padding to 8px and adjust width to avoid clipping.
  • Remove skeleton rib rotations to reduce jitter.
  • Update the Tutti vinyl asset.

^{Written for commit 0f0fd26. Summary will update on new commits.}

[cubic-dev-ai]

1 issue found across 3 files

Prompt for AI agents (unresolved issues)

Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.


<file name="packages/agent/gui/app/renderer/agentactivity.css">

<violation number="1" location="packages/agent/gui/app/renderer/agentactivity.css:9101">
P2: At narrower widths, the carousel can still land on a fractional rendered edge: rounding the layout width to 1px and then applying `scale(0.9)` turns values such as 311px into 279.9px. Since this change is intended to eliminate subpixel fade seams, consider rounding the pre-scaled width to a 10px interval (or rounding the scaled result) so the final transformed width remains pixel-aligned.</violation>
</file>

<sub>Reply with feedback, questions, or to request a fix.

Fix all with cubic | Re-trigger cubic</sub>

[cubic-dev-ai]

P2: At narrower widths, the carousel can still land on a fractional rendered edge: rounding the layout width to 1px and then applying scale(0.9) turns values such as 311px into 279.9px. Since this change is intended to eliminate subpixel fade seams, consider rounding the pre-scaled width to a 10px interval (or rounding the scaled result) so the final transformed width remains pixel-aligned.

Prompt for AI agents

Check if this issue is valid — if so, understand the root cause and fix it. At packages/agent/gui/app/renderer/agentactivity.css, line 9101:

<comment>At narrower widths, the carousel can still land on a fractional rendered edge: rounding the layout width to 1px and then applying `scale(0.9)` turns values such as 311px into 279.9px. Since this change is intended to eliminate subpixel fade seams, consider rounding the pre-scaled width to a 10px interval (or rounding the scaled result) so the final transformed width remains pixel-aligned.</comment>

<file context>
@@ -9094,8 +9097,9 @@ html[data-theme="light"] [data-message-center-item-id].agent-gui-edge-glow {
-  width: min(400px, calc(100% - 64px));
-  transform: translateX(-50%);
+  width: round(nearest, min(400px, calc(100% - 64px)), 1px);
+  transform: translateX(-50%) scale(0.9);
+  transform-origin: center center;
 }
</file context>

[cubic-dev-ai]

1 issue found across 4 files (changes from recent commits).

Prompt for AI agents (unresolved issues)

Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.


<file name="packages/agent/gui/agent-gui/agentGuiNode/AgentGUIHeroAgentCarousel.tsx">

<violation number="1" location="packages/agent/gui/agent-gui/agentGuiNode/AgentGUIHeroAgentCarousel.tsx:299">
P3: The resize explanation now points maintainers to a nonexistent `scale(0.9)` transform, while this change sets the carousel layer to `scale(0.8)`. Updating the comment keeps the seam diagnosis consistent with the actual CSS.</violation>
</file>

<sub>Reply with feedback, questions, or to request a fix.

Fix all with cubic | Re-trigger cubic</sub>

[cubic-dev-ai]

P3: The resize explanation now points maintainers to a nonexistent scale(0.9) transform, while this change sets the carousel layer to scale(0.8). Updating the comment keeps the seam diagnosis consistent with the actual CSS.

Prompt for AI agents

Check if this issue is valid — if so, understand the root cause and fix it. At packages/agent/gui/agent-gui/agentGuiNode/AgentGUIHeroAgentCarousel.tsx, line 299:

<comment>The resize explanation now points maintainers to a nonexistent `scale(0.9)` transform, while this change sets the carousel layer to `scale(0.8)`. Updating the comment keeps the seam diagnosis consistent with the actual CSS.</comment>

<file context>
@@ -295,8 +295,13 @@ export const AgentGUIHeroAgentCarousel = memo(
-        const rect = stage.getBoundingClientRect();
-        scene.setSize(rect.width, rect.height);
+        // Use layout (client) dimensions, not getBoundingClientRect: the stage
+        // sits inside a `scale(0.9)` layer, so the bounding rect is the
+        // transformed size (integer * 0.9 = fractional). Feeding that fraction
+        // to renderer.setSize() floors the WebGL buffer to a size that no
</file context>

Suggested change

	// sits inside a `scale(0.9)` layer, so the bounding rect is the
	// sits inside a `scale(0.8)` layer, so the bounding rect is the