feat(ai-studio): the execution log follows the design prototypeFeat/ai studio execution log restyle

[DominikaPacholec-Synergy]

What changes

The Execution log in AI Studio takes the look of the HITL design prototype (Light conference). It is mostly a restyle: the log shows the same events as before, laid out the prototype's way on DS components and --wb-ds-* tokens.

• Dock instead of a floating card. The log runs along the bottom of the canvas between the palette and the Properties panel, 12 px from each. useLeftPanelAnchor (new) mirrors useRightPanelAnchor and measures the palette, because the SDK does not expose either panel's size. The right gutter moves from 16 to 12 px to match.
• Header. A toggle (caret + "Execution log") collapses the log, and the run status shows as a DS Chip in the state's colour. An incomplete run gets a broken-link icon.
• Rows. Each row shows the time (monospace), a round status icon, the block's name from the diagram instead of its id, and the message. The detail (output, error, outcome) stays on the message line, clipped to one line, and opens in full in a box below when the row is clicked. The selected node's rows are highlighted, and a failed row has the error tint and a left bar.
• ExecutionStatusIcon (new). One status language for the log rows now and for the node header later (sizes s 15 px and m 20 px). All glyphs are Phosphor at bold weight, so they size from CSS. The SDK Icon sets its size inline.
• Branch, join, skipped and incomplete rows use the icons and copy the prototype settled on, as far as today's payloads allow (see below).

Small behaviour changes beyond the restyle

• Scroll on selection. Selecting a node now scrolls its first log row to the top of the list instead of the nearest edge, so the node's later rows fit below. Only the list scrolls, not the page.
• Resize. The log resizes by dragging its top edge (120 px to 60% of the window). Double-click resets it. The handle is a focusable separator: ↑/↓ change the height by 16 px and Home resets.
• Plain button for the toggle. The collapse toggle is a plain <button> styled with DS tokens, not NavButton: the DS pressed state flashes the brand colour, which the prototype's toggle does not have.

Missing tokens

New values marked /* missing token */, because the DS has no token for them:

• --ai-studio-status-color--running (acc1) and --ai-studio-status-color--human (acc4, waiting for a person), in highlighting.css;
• --ai-studio-log-detail-bg: the prototype's detail box is gray-200 in light and gray-800 in dark, and no DS token gives both;
• the 15 px log status icon, which sits between size-150 and size-200.

Known gaps

• branch_spawned and branches_joined are never emitted. They are declared in packages/types but no engine emits them today, so these rows cannot be seen in a real run. To check them, inject the events through the store in the dev console.
• Messages that need payload fields we do not carry yet (marked follow-up: execution-log-branch-payloads):
  • branch names on branch_spawned;
  • inputs / skipped on branches_joined ("2 of 3 · skipped: 1");
  • branch name and deciding node on node_skipped;
  • a readable branch name instead of the port id on execution_incomplete.
• Not in this PR: folding the palette and the Properties panel when a run starts. The decision form lives in Properties, so this needs a separate decision.

How to verify

pnpm dev:ai-studio, run Customer Support Triage and Refund Review:

• the dock sits between the panels with the palette and Properties open and collapsed, and its row layout changes at 820 px;
• collapse and expand work, rows show block names, and a selected node's rows are highlighted and scrolled to the top;
• a failed run, a waiting decision and a reload while waiting look right;
• resize works by drag, double-click and keyboard;
• light and dark themes.

Tests: log-panel.test.tsx covers node names, the status chip, the failed row, the highlight, branch / join / skipped / incomplete messages, the inline detail and keyboard resize.