Summary

This PR migrates 4 agent-related components from the Emotion Stack 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

• Replace Stack component with div + 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";

<Stack direction="row" spacing={2} alignItems="center">
  <Child1 />
  <Child2 />
</Stack>

After (Tailwind)

<div className="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

See site/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