---
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 -->