Summary

This PR migrates 4 agent-related components from the EmotionStack component to Tailwind CSS flex utilities. This is part 1 of 19 planned PRs to completely remove the Stack component from the codebase.

Files Migrated

• ✅src/modules/resources/AgentLatency.tsx (85 lines)
• ✅src/modules/resources/AgentMetadata.tsx (237 lines)
• ✅src/modules/resources/AgentOutdatedTooltip.tsx (85 lines)
• ✅src/modules/resources/SubAgentOutdatedTooltip.tsx (67 lines)

Changes

• ReplaceStack component withdiv + Tailwind flex utilities
• Convert spacing props to Tailwind gap classes:
  • spacing={0.5} →gap-1 (4px)
  • spacing={1} →gap-2 (8px)
  • spacing={2} →gap-4 (16px)
  • spacing={6} →gap-12 (48px)
• Convert direction props:
  • direction="row" →flex-row
  • direction="column" →flex-col
• Convert alignment props:
  • alignItems="baseline" →items-baseline
  • alignItems="center" →items-center
  • justifyContent="space-between" →justify-between
• Remove Stack imports

Migration Pattern

Before (Emotion Stack)

import{Stack}from"components/Stack/Stack";<Stackdirection="row"spacing={2}alignItems="center"><Child1/><Child2/></Stack>

After (Tailwind)

<divclassName="flex flex-row items-center gap-4"><Child1/><Child2/></div>

Testing

• ✅ TypeScript checks pass (pnpm check)
• ✅ Biome linting passes
• ✅ Storybook stories remain functional (AgentMetadata.stories.tsx)
• ✅ All existing functionality preserved

Stats

• Files changed: 5 (4 component files + 1 tracking doc)
• Lines changed: 183 lines (162 insertions, 21 deletions)
• Stack imports removed: 4
• PR size: ~474 lines of component code (well under 1000 line limit)

Progress Tracking

Seesite/STACK_MIGRATION_PROGRESS.md for the full migration plan across all 110 files and 19 planned PRs.

Next Steps

After this PR is merged, PR#2 will migrate:

• AgentRowPreview.tsx
• AgentRow.tsx
• AgentDevcontainerCard.tsx