93 lines
4.3 KiB
Markdown
93 lines
4.3 KiB
Markdown
---
|
||
id: TASK-65
|
||
title: Feed-aware flow wiring + CSS 3D interactive layer view
|
||
status: Done
|
||
assignee:
|
||
- '@claude'
|
||
created_date: '2026-02-27 22:46'
|
||
updated_date: '2026-02-28 00:29'
|
||
labels:
|
||
- feature
|
||
- canvas
|
||
- ux
|
||
milestone: rspace-app-ecosystem
|
||
dependencies:
|
||
- TASK-57
|
||
references:
|
||
- shared/components/rstack-tab-bar.ts
|
||
- shared/module.ts
|
||
- lib/layer-types.ts
|
||
priority: high
|
||
---
|
||
|
||
## Description
|
||
|
||
<!-- SECTION:DESCRIPTION:BEGIN -->
|
||
Extend the layered tab system (TASK-57) with feed-aware flow wiring and a CSS 3D interactive layer view replacing the flat SVG stack view.
|
||
|
||
## Feed-Aware Flow Wiring
|
||
- Extended TabBarModule interface with feeds/acceptsFeeds fields
|
||
- Added compatibility helpers: #getModuleOutputKinds, #getModuleInputKinds, #getCompatibleKinds, #getContainedFeeds
|
||
- Flow creation dialog now filters kind buttons by source/target feed compatibility
|
||
- Disabled incompatible kinds at 25% opacity with pointer-events none
|
||
- Feed count badges on compatible kinds
|
||
- Default selection = first compatible kind (not always "data")
|
||
|
||
## CSS 3D Interactive Layer View
|
||
- Replaced SVG #renderStackView() with CSS perspective + preserve-3d scene
|
||
- Glassmorphism layer planes with backdrop-filter blur, module badge colors
|
||
- Feed port indicators (colored dots for in/out kinds on each layer)
|
||
- Containment indicators — lock icon on feeds with no outgoing flow
|
||
- Animated flow particles via CSS keyframes, count proportional to strength
|
||
- Orbit controls — mouse drag rotates scene (rotateX/rotateZ)
|
||
- Scroll zoom — adjusts perspective distance
|
||
- Time scrubber — play/pause button + speed slider (0.1x–5x)
|
||
- Click layer to switch, drag between layers to create flow, right-click particle to delete flow
|
||
- Responsive mobile sizing
|
||
|
||
## FeedDefinition consolidation
|
||
- Fixed shared/module.ts to import FeedDefinition locally (was only re-exporting)
|
||
<!-- SECTION:DESCRIPTION:END -->
|
||
|
||
## Acceptance Criteria
|
||
<!-- AC:BEGIN -->
|
||
- [x] #1 Tab bar extended with feeds/acceptsFeeds on TabBarModule interface
|
||
- [x] #2 Flow dialog filters kind buttons by source feeds / target acceptsFeeds compatibility
|
||
- [x] #3 Disabled flow kinds shown at 25% opacity with pointer-events none
|
||
- [x] #4 Feed count badge shown on compatible flow kinds
|
||
- [x] #5 Default flow kind selection is first compatible (not always data)
|
||
- [x] #6 3D scene renders layers as translucent CSS planes with perspective
|
||
- [x] #7 Mouse drag on empty space orbits/rotates the 3D scene
|
||
- [x] #8 Scroll wheel zooms (adjusts perspective distance)
|
||
- [x] #9 Flow particles animate between layer planes with CSS keyframes
|
||
- [x] #10 Particle count proportional to flow strength, color matches FLOW_COLORS
|
||
- [x] #11 Time scrubber controls particle speed (0.1x–5x) with play/pause
|
||
- [x] #12 Contained feeds (no outgoing flow) show lock icon on layer plane
|
||
- [x] #13 Click layer to switch tab, drag between layers opens flow dialog
|
||
- [x] #14 Right-click flow particle to delete flow
|
||
- [x] #15 bunx tsc --noEmit passes with zero errors
|
||
<!-- AC:END -->
|
||
|
||
## Implementation Notes
|
||
|
||
<!-- SECTION:NOTES:BEGIN -->
|
||
I/O chip upgrade (2026-02-27): Replaced 6px dot ports with labeled pluggable I/O chips on each layer plane. Output feeds shown as filled chips with feed names (e.g. "Treasury Flows"), input accepts shown as dashed-outline chips by flow kind (e.g. "Data", "Delegation"). Contained feeds dimmed with lock icon inline. Flow colors updated: green=economic (#4ade80), purple=delegation (#a78bfa), blue=data (#60a5fa). Governance label renamed to "Delegation". Commits: d850a76, 0c00a69.
|
||
<!-- SECTION:NOTES:END -->
|
||
|
||
## Final Summary
|
||
|
||
<!-- SECTION:FINAL_SUMMARY:BEGIN -->
|
||
## Summary
|
||
Extended the layered tab system with feed-aware flow wiring and a CSS 3D interactive layer view.
|
||
|
||
## Files Changed (2 files, +246/-14 lines)
|
||
|
||
**Modified files:**
|
||
- `shared/components/rstack-tab-bar.ts` (+246 lines) — Extended TabBarModule with feeds/acceptsFeeds, 4 compatibility helper methods, feed-aware flow dialog with filtering/badges/smart defaults, replaced SVG stack view with CSS 3D perspective scene (glassmorphism layers, animated flow particles, orbit controls, scroll zoom, time scrubber, containment indicators, responsive mobile)
|
||
- `shared/module.ts` (+1/-1 line) — Import FeedDefinition locally alongside re-export
|
||
|
||
## Commits
|
||
- `9e4648b` feat: feed-aware flow wiring + CSS 3D interactive layer view (dev)
|
||
- `2ef68e7` merge dev→main
|
||
<!-- SECTION:FINAL_SUMMARY:END -->
|