98 lines
4.1 KiB
Markdown
98 lines
4.1 KiB
Markdown
---
|
|
id: TASK-57
|
|
title: Layered tab system with inter-layer flows and bidirectional feeds
|
|
status: Done
|
|
assignee:
|
|
- '@claude'
|
|
created_date: '2026-02-25 23:31'
|
|
updated_date: '2026-02-25 23:31'
|
|
labels:
|
|
- feature
|
|
- canvas
|
|
- architecture
|
|
milestone: rspace-app-ecosystem
|
|
dependencies: []
|
|
references:
|
|
- lib/layer-types.ts
|
|
- lib/folk-feed.ts
|
|
- shared/components/rstack-tab-bar.ts
|
|
- lib/community-sync.ts
|
|
- shared/module.ts
|
|
- server/shell.ts
|
|
- website/canvas.html
|
|
- website/shell.ts
|
|
- website/public/shell.css
|
|
priority: high
|
|
---
|
|
|
|
## Description
|
|
|
|
<!-- SECTION:DESCRIPTION:BEGIN -->
|
|
Implement a layered tab system where each rApp becomes a "layer" that can be viewed as tabs (flat mode) or stacked strata (stack view). Layers connect via typed flows (economic, trust, data, attention, governance, resource) enabling inter-app data sharing. Feed shapes on the canvas pull live data from other layers' APIs with bidirectional write-back support.
|
|
|
|
## 4-Phase Implementation
|
|
|
|
**Phase 1 — Tab Bar UI + Layer Configuration**
|
|
- Created `rstack-tab-bar` web component with flat (tabs) and stack (SVG side-view) modes
|
|
- Drag-to-reorder tabs, add/close layers
|
|
- Extended Automerge CommunityDoc with layers, flows, activeLayerId, layerViewMode
|
|
- Core types: Layer, LayerFlow, FlowKind in `lib/layer-types.ts`
|
|
|
|
**Phase 2 — Feed Definitions on Modules**
|
|
- Added FeedDefinition interface to shared/module.ts
|
|
- Added feeds and acceptsFeeds to 10 modules: funds, notes, vote, choices, wallet, data, work, network, trips, canvas
|
|
- Each module declares what feed kinds it exposes and accepts
|
|
|
|
**Phase 3 — Folk Feed Shape**
|
|
- Built `folk-feed` canvas shape that fetches live data from other layers' module APIs
|
|
- Module-specific endpoint mapping and response normalization
|
|
- Auto-refresh on configurable interval
|
|
- Auto-flow detection when creating feed shapes
|
|
|
|
**Phase 4 — Bidirectional Flows**
|
|
- Edit overlay with module-specific fields for write-back via PUT/PATCH
|
|
- Click-through navigation (double-click items)
|
|
- Drag-to-connect flows in stack view with kind/label/strength dialog
|
|
- Right-click to delete flows
|
|
- Full event wiring in shell.ts for all layer/flow CRUD operations
|
|
<!-- SECTION:DESCRIPTION:END -->
|
|
|
|
## Acceptance Criteria
|
|
<!-- AC:BEGIN -->
|
|
- [x] #1 Tab bar renders above canvas with flat/stack view toggle
|
|
- [x] #2 Layers persist in Automerge CommunityDoc for real-time sync
|
|
- [x] #3 10 modules declare feed definitions with FlowKind types
|
|
- [x] #4 folk-feed shape fetches live data from source module APIs
|
|
- [x] #5 Bidirectional write-back saves edits to source module
|
|
- [x] #6 Drag-to-connect in stack view creates typed flows
|
|
- [x] #7 Flow creation dialog with kind, label, and strength
|
|
- [x] #8 Auto-flow detection when creating feed shapes
|
|
<!-- AC:END -->
|
|
|
|
## Final Summary
|
|
|
|
<!-- SECTION:FINAL_SUMMARY:BEGIN -->
|
|
## Summary
|
|
Implemented a 4-phase layered tab system enabling inter-app data flows across the rSpace canvas.
|
|
|
|
## Files Changed (18 files, +2539 lines)
|
|
|
|
**New files:**
|
|
- `lib/layer-types.ts` (100 lines) — Core types: FlowKind, Layer, LayerFlow, FLOW_COLORS/FLOW_LABELS
|
|
- `lib/folk-feed.ts` (887 lines) — Canvas shape fetching live data from other layers with bidirectional write-back
|
|
- `shared/components/rstack-tab-bar.ts` (1080 lines) — Tab bar web component with flat/stack views, drag-to-connect flows
|
|
|
|
**Modified files:**
|
|
- `lib/community-sync.ts` (+149 lines) — Extended CommunityDoc with layers/flows, 11 new CRDT methods
|
|
- `shared/module.ts` (+31 lines) — FeedDefinition interface, feeds/acceptsFeeds on RSpaceModule
|
|
- `server/shell.ts` (+50 lines) — Tab bar HTML, event wiring, CommunitySync integration
|
|
- `website/canvas.html` (+87 lines) — folk-feed registration, toolbar button, auto-flow detection
|
|
- `website/shell.ts` (+2 lines) — Component registration
|
|
- `website/public/shell.css` (+25 lines) — Tab row positioning
|
|
- `lib/index.ts` (+3 lines) — folk-feed barrel export
|
|
- 10 module mod.ts files — Feed definitions for funds, notes, vote, choices, wallet, data, work, network, trips, canvas
|
|
|
|
## Commit
|
|
`cd440f1` feat: layered tab system with inter-layer flows and bidirectional feeds — merged to main
|
|
<!-- SECTION:FINAL_SUMMARY:END -->
|