rspace-online/backlog/tasks/task-57 - Layered-tab-system-with-inter-layer-flows-and-bidirectional-feeds.md

id	title	status	assignee	created_date	updated_date	labels	milestone	dependencies	references	priority
TASK-57	Layered tab system with inter-layer flows and bidirectional feeds	Done	@claude	2026-02-25 23:31	2026-02-25 23:31	feature canvas architecture	rspace-app-ecosystem		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	high

Description

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

Acceptance Criteria

• #1 Tab bar renders above canvas with flat/stack view toggle
• #2 Layers persist in Automerge CommunityDoc for real-time sync
• #3 10 modules declare feed definitions with FlowKind types
• #4 folk-feed shape fetches live data from source module APIs
• #5 Bidirectional write-back saves edits to source module
• #6 Drag-to-connect in stack view creates typed flows
• #7 Flow creation dialog with kind, label, and strength
• #8 Auto-flow detection when creating feed shapes

Final Summary

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