refactor(agents): inline shortcut buttons inside the card

[jaylfc]

Summary

Shortcut row from PR #274 rendered outside the agent card with raw unicode glyphs (⌨ ▣ ⚕ ⊞), looking jarringly inconsistent with the styled action icons inside the card.

This refactor:

• Adds a `leftActions?: ReactNode` slot to `AgentRow`.
• Drops the `
  ` wrapper from `AgentShortcutRow` (now returns a Fragment of buttons).
• Replaces unicode glyphs with lucide icons (Terminal, Wrench, ExternalLink, Stethoscope) matching the existing action style — same `Button` variant/size, same 15px icon size, same hover states.
• Consumer passes `` as `leftActions` so shortcuts appear on the left and existing actions on the right of a single flex row (desktop: separated by a thin divider; mobile: justify-between).
• Removes the now-unnecessary `
  ` wrapper at the call site — key moves directly to `AgentRow`.

Test plan

• Vitest: 247 tests pass (63 files)
• TypeScript: clean (zero errors)
• Manual: open AgentsApp — shortcuts and existing actions share one row inside each agent card; same icon size/style; left vs right alignment clean
• Manual: empty shortcuts list → row contains only existing actions on the right, same as before

Summary by CodeRabbit

• New Features

  • Agent shortcuts now render as icon buttons and can be placed alongside existing action controls.

• Improvements

  • Mobile and desktop action layouts updated for clearer separation and alignment.
  • Shortcut buttons support configurable sizing and improved accessibility labeling.

• Tests

  • Mobile test updated to assert accessibility labeling behavior (label conveyed via accessibility attributes).

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: ee73d768-a331-47a2-b646-135b2f2ebf0b

📥 Commits

Reviewing files that changed from the base of the PR and between 4707f5f and b16b501.

📒 Files selected for processing (1)

• desktop/src/apps/AgentsApp.tsx

---

📝 Walkthrough

Walkthrough

AgentRow gains an optional leftActions ReactNode and renders it alongside existing action buttons; AgentShortcutRow is refactored to use lucide-react icons wrapped in the shared Button component (adds btnCls?: string) and is injected into AgentRow via leftActions.

Changes

Cohort / File(s)	Summary
Layout Integration desktop/src/apps/AgentsApp.tsx, desktop/src/apps/.../AgentRow	Adds leftActions prop to AgentRow; moves AgentShortcutRow from a sibling into AgentRow via leftActions; updates desktop/mobile action container ordering and button sizing classes.
Shortcut Component & Tests desktop/src/components/AgentShortcutRow.tsx, desktop/src/components/AgentShortcutRow.test.tsx	Refactors shortcuts to use lucide-react icons inside shared Button UI (replacing inline glyphs and native <button>), introduces optional btnCls?: string prop with default "h-8 w-8", removes mobile-specific conditional label logic, and updates test description to assert accessible labeling via aria-label/title.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• feat(mobile): readable Agents + Cluster views at 390px wide #251: Modifies AgentRow/AgentsApp action rendering and mobile layout; closely related to composition/positioning of shortcut/actions.

Poem

🐇 I nudged the buttons, snug and spry,

Icons on left, actions on the right,
A tiny hop, a tidy row,
Clicks that hum, and code that glows,
I tinkered light and set them right.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 66.67% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: refactoring to move/inline shortcut buttons into the agent card component.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/agent-card-shortcuts-inline

---

_{Review rate limit: 8/10 reviews remaining, refill in 6 minutes and 13 seconds.}

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[kilo-code-bot]

Code Review Summary

Status: No Issues Found | Recommendation: Merge

Files Reviewed (3 files)

• desktop/src/apps/AgentsApp.tsx
• desktop/src/components/AgentShortcutRow.test.tsx
• desktop/src/components/AgentShortcutRow.tsx

---

_{Reviewed by grok-code-fast-1:optimized:free · 120,909 tokens}

[coderabbitai]

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@desktop/src/apps/AgentsApp.tsx`:
- Line 2040: Left shortcut button is hardcoded to desktop size via btnCls="h-8
w-8" which causes inconsistent sizing on mobile; update the prop passed to
AgentShortcutRow (leftActions) so the button uses responsive classes or the same
mobile size as the right-side actions (e.g., make it match the right action
class by using responsive sizing like mobile h-11 w-11 and desktop h-8 w-8 or
reuse the same size variable/class used for right-side actions) so both sides
render consistently across breakpoints.
- Around line 352-354: The divider is currently rendered based on leftActions
truthiness, which is true when leftActions is a React element (e.g.,
<AgentShortcutRow />) even if that component renders null; compute an explicit
presence flag (e.g., leftHasContent) by inspecting leftActions with
React.Children.toArray(leftActions).filter(Boolean).length > 0 and use that flag
to conditionally render both the divider and leftActions instead of relying on
leftActions truthiness; update the render logic that uses leftActions and the
divider (references: leftActions, AgentShortcutRow, actionButtons) to check
leftHasContent before emitting the separator.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: fc46370f-7c51-479b-99c2-9f6a13c3d622

📥 Commits

Reviewing files that changed from the base of the PR and between b2e439a and 1ba66fb.

📒 Files selected for processing (3)

• desktop/src/apps/AgentsApp.tsx
• desktop/src/components/AgentShortcutRow.test.tsx
• desktop/src/components/AgentShortcutRow.tsx