feat(ui3): elegant earthy task feed redesign

2026-02-16 23:20:47 -08:00 · 2026-02-16 23:20:47 -08:00 · 395f90ed2a
commit 395f90ed2a
parent 9c703072d1
9 changed files with 379 additions and 184 deletions
--- a/docs/plans/2026-02-16-agent-social-redesign.md
+++ b/docs/plans/2026-02-16-agent-social-redesign.md
@ -0,0 +1,53 @@
+# 📋 Implementation Plan: "Agent Social Stream" Redesign
+
+### ## Approach
+We will transform the interface into a **Social Feed for Agent Activity**. The core metaphor is "watching the agents work" rather than "managing a list". The aesthetic is **Earthy Elegant**—dark, warm, soft, and high-polish.
+
+**Concept:** "The Living Stream"
+- **Metaphor:** Twitter/Instagram for code.
+- **Visuals:** Soft `rounded-3xl` cards, floating depth, warm dark gradient background.
+- **Interaction:** Scroll the feed, click to expand details (like opening a thread).
+
+### ## Visual Language
+- **Background:** `bg-[linear-gradient(to_bottom_right,#2D2D2D,#363636)]` (Warm Earthy Gradient).
+- **Cards:** `bg-[#363636]`, `rounded-3xl`, `shadow-2xl`, `hover:scale-[1.01]`.
+- **Typography:** Friendly sans-serif headers. Monospace IDs.
+- **Dependencies:** Soft "Pills" or "Hashtags" (`rounded-full`, pastel tints).
+
+### ## Steps
+
+1. **Refine Tokens (10 min)**
+   - Add "Soft Shadow" tokens to `globals.css` (`shadow-[0_8px_30px_rgba(0,0,0,0.12)]`).
+   - Add "Earthy Gradient" utility.
+
+2. **Redesign `SocialCard` as "The Post" (20 min)**
+   - **Header:** Large Agent Avatar + Name (Left aligned). "Posted" time (Last Activity).
+   - **Body:** Task ID (small, muted) -> Task Title (Large, 1.1rem).
+   - **Tags:** Dependency bubbles (`bg-rose-500/10 text-rose-200`) designed like hashtags/pills.
+   - **Footer:** Action icons (Chat, Graph, Kanban) styled like social actions (heart/comment/share).
+
+3.  **Redesign `SocialPage` as "The Feed" (15 min)**
+    *   **Layout:** A centered feed container (max-width `42rem` / `672px` for optimal reading).
+    *   **Scroll:** Smooth vertical scrolling.
+    *   **Background:** Warm dark gradient.
+
+### ## Timeline
+| Phase | Duration |
+|-------|----------|
+| Refine Tokens | 10 min |
+| `SocialCard` Redesign | 20 min |
+| `SocialPage` Feed | 15 min |
+| **Total** | **45 min** |
+
+### ## Rollback Plan
+Revert to commit `9c70307`.
+
+### ## Security Checklist
+- [x] Safe rendering of user strings.
+- [x] No exposure of internal metadata.
+
+### ## NEXT STEPS
+```bash
+# Ready? Approve this plan and run:
+/cook @beadboard/docs/plans/2026-02-16-agent-social-redesign.md
+```
--- a/docs/plans/2026-02-16-industrial-redesign.md
+++ b/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
+```
--- a/docs/plans/2026-02-16-task-feed-redesign.md
+++ b/docs/plans/2026-02-16-task-feed-redesign.md
@ -0,0 +1,53 @@
+# 📋 Implementation Plan: "Task Social Feed" Redesign
+
+### ## Approach
+We will build a **Rich Social Dashboard** for Task Management. The core metaphor is a "Command Center" where tasks are rich cards displayed in a flowing grid, surrounded by context (Epics Left, Activity Right).
+
+**Concept:** "The Earthy Command Center"
+- **Center Stage:** A responsive **Grid of Task Cards** (2-3 columns) allowing 4-10 tasks to be visible at once.
+- **Metaphor:** "Posts" in a rich media feed (like Pinterest or a Kanban/Feed hybrid).
+- **Visuals:** Soft `rounded-3xl` cards, floating depth, warm dark gradient background.
+
+### ## Visual Language
+- **Background:** `bg-[linear-gradient(to_bottom_right,#2D2D2D,#363636)]` (Warm Earthy Gradient).
+- **Cards:** `bg-[#363636]`, `rounded-3xl`, `shadow-2xl`, `hover:scale-[1.01]`.
+- **Typography:** Friendly sans-serif for Titles. Monospace for IDs.
+- **Dependencies:** Soft "Pills" (`rounded-full`, pastel tints).
+
+### ## Steps
+
+1. **Refine Tokens (10 min)**
+   - Add "Soft Shadow" tokens to `globals.css` (`shadow-[0_8px_30px_rgba(0,0,0,0.12)]`).
+   - Add "Earthy Gradient" utility.
+
+2. **Redesign `SocialCard` as "The Task Post" (20 min)**
+   - **Header:** Task ID (Teal, Mono) + Status Badge (Right).
+   - **Hero:** Task Title (Large, 1.25rem, Bold, White).
+   - **Content:** Dependency bubbles (`bg-rose-500/10 text-rose-200`) designed like hashtags/pills.
+   - **Footer:** *Small* Agent Avatars (Left) + Action icons (Right).
+
+3.  **Redesign `SocialPage` as "The Grid" (15 min)**
+    - **Layout:** Responsive Grid (`grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6`).
+    - **Container:** Scrollable area (`h-full` or split with bottom pane).
+    - **Background:** Warm dark gradient.
+
+### ## Timeline
+| Phase | Duration |
+|-------|----------|
+| Refine Tokens | 10 min |
+| `SocialCard` Redesign | 20 min |
+| `SocialPage` Grid | 15 min |
+| **Total** | **45 min** |
+
+### ## Rollback Plan
+Revert to commit `9c70307`.
+
+### ## Security Checklist
+- [x] Safe rendering of user strings.
+- [x] No exposure of internal metadata.
+
+### ## NEXT STEPS
+```bash
+# Ready? Approve this plan and run:
+/cook @beadboard/docs/plans/2026-02-16-task-feed-redesign.md
+```