feat(ui3): elegant earthy task feed redesign

docs/plans/2026-02-16-industrial-redesign.md

@@ -0,0 +1,61 @@
+# 📋 Implementation Plan: "Industrial Sci-Fi" Social View Redesign
+
+### ## Approach
+We will transform the current "standard grid" interface into a **Mission Control Rig**. The goal is to make the user feel like an operator managing a complex system, not just a project manager looking at cards.
+
+**Concept:** "The Operator's Rig"
+- **Tactile:** Elements feel like physical modules plugged into a chassis.
+- **Data-Dense:** Information is presented with technical precision (monospaced, labeled).
+- **Dark & Matte:** Deep, flat grays (`#1e1e1e`) with high-contrast functional color (Teal, Amber, Rose).
+
+### ## Visual Language
+- **Containers:** "Trays" and "Slots" instead of divs. Use `shadow-inner` to create recessed areas.
+- **Cards:** "Modules" or "Cartridges". Chamfered corners (or tight 4px radius), top-edge status indicators ("LED bars"), technical markings (rivets, scanlines).
+- **Typography:** `JetBrains Mono` (or system mono) for all IDs, stats, and labels. `Inter` (or system sans) for human-readable titles.
+- **Motion:** "Slotting in" animations (slide up + fade).
+
+### ## Steps
+
+1. **Foundational Assets (10 min)**
+   - Create `ModuleCard` primitive: The base building block. Dark, matte background, top status bar, technical borders.
+   - Create `PortItem` component: For dependencies. Looks like a connector/chip.
+   - Define "Industrial" tokens in `globals.css` (if needed, or use specific Tailwind classes).
+
+2. **SocialCard Redesign (20 min)**
+   - **Header:** Technical ID (Mono, Teal) + Status (Uppercase, Tracking-Wide).
+   - **Body:** High-contrast title.
+   - **Ports Grid:** Replace lists with a 2-column grid of `PortItems`. Labels: "INPUTS" (Blocked By) / "OUTPUTS" (Blocking).
+   - **Footer:** "Pilot Slot" for avatars. Technical tool buttons.
+
+3. **SocialPage Layout (The "Rack") (15 min)**
+   - **Top (The Horizon):** Frame the 4x2 Grid as a recessed "Rack" or "Monitor Tray".
+   - **Bottom (The Console):** A large, empty "Screen" area awaiting signal. Styled with scanlines or a "NO SIGNAL" placeholder.
+   - **Custom Scrollbar:** Thin, high-contrast rail.
+
+4. **Polish & "Wow" Details (15 min)**
+   - Add "rivets" (small dots) to corners of cards.
+   - Add hover effects: Border glow (`shadow-[0_0_15px_rgba(...)]`).
+   - Add a subtle scanline overlay to the entire Social View.
+
+### ## Timeline
+| Phase | Duration |
+|-------|----------|
+| Foundation (`ModuleCard`) | 10 min |
+| Card Redesign (`SocialCard`) | 20 min |
+| Page Layout (`SocialPage`) | 15 min |
+| Polish ("Wow" factor) | 15 min |
+| **Total** | **1 hour** |
+
+### ## Rollback Plan
+Revert to commit `9c70307` (`fix: truncate SocialCard dependencies...`).
+
+### ## Security Checklist
+- [x] Input validation (titles)
+- [x] No sensitive data exposed in UI
+- [x] Error handling for empty states
+
+### ## NEXT STEPS
+```bash
+# Ready? Approve this plan and run:
+/cook @beadboard/docs/plans/2026-02-16-industrial-redesign.md
+```