Address review: shared PlantChip + named recent-plants cap

Gadfly on #100:
- Extracted the tap-to-arm chip (icon + name + armed state) into a shared
  PlantChip, used by both RecentPlants and SeedTray, so the two quick-pick
  surfaces can't drift. SeedTray composes it (rounded={false}) with its
  remove button into one seamless pill.
- Named the recent-strip cap: RECENT_PLANTS_MAX = 8, was a bare slice(0, 8).

Verified live: recent chips and the tray render identically post-refactor.

Co-Authored-By: Claude Opus 4.8 (1M context) <[email protected]>
Claude-Session: https://claude.ai/code/session_01H3zbym8Doka2d7D48maSgZ

web/src/editor/SeedTray.tsx

@@ -1,5 +1,5 @@
 import { cn } from '@/lib/cn'
-import { PlantIcon } from '@/components/plants/PlantIcon'
+import { PlantChip } from '@/components/plants/PlantChip'
 import type { Plant } from '@/lib/plants'
 
 /**
@@ -26,28 +26,19 @@ export function SeedTray({
       {trayPlants.map((p) => {
         const active = p.id === armedPlantId
         return (
-          <span
-            key={p.id}
-            className={cn(
-              'inline-flex items-center rounded-full border text-xs transition-colors',
-              active ? 'border-accent bg-accent/10 text-accent-strong' : 'border-border bg-surface text-fg',
-            )}
-          >
-            <button
-              type="button"
-              onClick={() => onArm(p)}
-              aria-pressed={active}
-              title={active ? `Placing ${p.name}` : `Place ${p.name}`}
-              className="flex items-center gap-1.5 rounded-full py-1 pl-1.5 pr-1 outline-none focus-visible:ring-2 focus-visible:ring-accent/40"
-            >
-              <PlantIcon color={p.color} icon={p.icon} className="h-5 w-5 rounded-full text-[0.65rem]" />
-              <span className="max-w-[6rem] truncate font-medium">{p.name}</span>
-            </button>
+          <span key={p.id} className="inline-flex items-center">
+            {/* Flat right edge so the remove button below seams into one pill. */}
+            <PlantChip plant={p} active={active} onArm={onArm} rounded={false} />
             <button
               type="button"
               onClick={() => onRemove(p.id)}
               aria-label={`Remove ${p.name} from tray`}
-              className="rounded-full px-1.5 py-1 text-muted outline-none hover:text-fg focus-visible:ring-2 focus-visible:ring-accent/40"
+              className={cn(
+                'rounded-r-full border border-l-0 px-1.5 py-1 text-xs outline-none transition-colors focus-visible:ring-2 focus-visible:ring-accent/40',
+                active
+                  ? 'border-accent bg-accent/10 text-accent-strong hover:text-fg'
+                  : 'border-border bg-surface text-muted hover:text-fg',
+              )}
             >
               ✕
             </button>