Monorepo for Aesthetic.Computer
aesthetic.computer
1# VSCode Extension: Dashboard & AT Firehose
2
3## Vision
4
5Replace the current "Source Changes" welcome panel with a **live dashboard** that acts as a firehose for all Aesthetic Computer platform activity — git changes, AT Protocol events, and Tangled knot repo activity — all in one view.
6
7## Current State
8
9The welcome panel (`extension.ts:966-1100`) is a simple git status viewer:
10- Runs `git status --porcelain` + `git rev-parse --abbrev-ref HEAD` for the main repo + vault
11- Displays file list with status badges (M/A/D/?)
12- Click-to-open files in editor
13- Debounced refresh on file changes (300ms)
14
15**Known bug:** `git rev-parse --abbrev-ref HEAD` fails on repos with no commits (e.g. freshly cloned submodules), showing a raw error in the UI instead of a graceful fallback.
16
17---
18
19## Phase 1: Fix the Git Error + Improve Layout
20
21**Goal:** Make the existing git status panel work correctly and look better.
22
23- [ ] Handle `rev-parse` failure gracefully — show `(no commits)` or `(init)` instead of the raw error
24- [ ] Improve the visual layout: tighter spacing, better typography, cleaner status badges
25- [ ] Add a collapsible section header for "Source Changes" (so it can coexist with new sections)
26- [ ] Add timestamp showing last refresh time
27
28## Phase 2: Dashboard Shell
29
30**Goal:** Transform the panel from a single-purpose git viewer into a multi-section dashboard.
31
32- [ ] Redesign the HTML structure with distinct dashboard sections:
33 1. **Source Changes** — the existing git status (cleaned up from Phase 1)
34 2. **AT Firehose** — live AT Protocol events (Phase 3)
35 3. **Tangled** — knot/repo activity (Phase 4)
36- [ ] Add a sticky nav/header with section toggles (show/hide each section)
37- [ ] Support auto-scroll vs. paused mode (like a terminal — new events stream in, but scrolling up pauses the feed)
38- [ ] Add theme-aware styling for all new sections (dark/light support already exists)
39- [ ] Consider making this a sidebar webview instead of (or in addition to) an editor panel
40
41## Phase 3: AT Protocol Firehose
42
43**Goal:** Show live AT Protocol activity happening on the Aesthetic Computer PDS.
44
45The AC platform already has deep atproto integration:
46- PDS at `at.aesthetic.computer`
47- Lexicons: `computer.aesthetic.tape`, `computer.aesthetic.mood`, `computer.aesthetic.painting`, etc.
48- Existing scripts in `at/scripts/atproto/`
49- News posted to atproto via `system/backend/news-atproto.mjs`
50- Tapes synced to atproto via `system/backend/tape-atproto.mjs`
51
52### What to show in the firehose:
53- [ ] **New tapes** — when users record/publish tapes (video content)
54- [ ] **Moods** — mood updates from users (`computer.aesthetic.mood`)
55- [ ] **Paintings** — shared paintings (`computer.aesthetic.painting`)
56- [ ] **News posts** — new news articles published
57- [ ] **Handle registrations/updates** — new users or handle changes
58- [ ] **Standard site updates** — page edits, new pages
59
60### Implementation options:
61- **Option A: WebSocket relay** — Add a firehose WebSocket endpoint to the session server or a new lightweight service that subscribes to the PDS `com.atproto.sync.subscribeRepos` firehose and relays events to the extension.
62- **Option B: Polling** — Periodically query `com.atproto.repo.listRecords` for each collection on the PDS. Simpler but less real-time.
63- **Option C: Direct firehose** — Connect the extension directly to `wss://at.aesthetic.computer/xrpc/com.atproto.sync.subscribeRepos` and decode the CBOR/CAR stream in the extension itself. Most direct but complex.
64
65### Recommended: Option A (WebSocket relay)
66The extension already has a WebSocket connection to the session server (`extension.ts:2132`). We can add a `firehose:event` message type that the session server relays from the PDS subscription. This keeps the extension lightweight and reuses existing infrastructure.
67
68### Event display format:
69Each event in the feed should show:
70- Timestamp
71- Event type icon/badge (tape, mood, painting, news, etc.)
72- Actor handle (clickable — opens their AC profile)
73- Brief content preview (tape thumbnail, mood text, painting preview, etc.)
74- Link to view the full content on aesthetic.computer
75
76## Phase 4: Tangled Knot Activity
77
78**Goal:** Show activity from the Tangled knot (AT Protocol-native git hosting).
79
80The AC repo is mirrored on Tangled at `tangled.org/aesthetic.computer/core`. The knot server runs on the same PDS droplet (`knot.aesthetic.computer`).
81
82### What to show:
83- [ ] **Commits** — recent commits pushed to the Tangled knot
84- [ ] **Issues/PRs** — if Tangled supports these (check API)
85- [ ] **Stars/forks** — social activity on the repo
86- [ ] **Cross-reference with GitHub** — show if a commit exists on both GitHub and Tangled
87
88### Implementation:
89- [ ] Research Tangled API (likely atproto-based — check `tangled.org` for API docs)
90- [ ] The knot server is at `knot.aesthetic.computer` — check what XRPC endpoints it exposes
91- [ ] Display as a feed of events similar to the AT firehose section
92- [ ] Include both the main `aesthetic-computer` repo and any other knot-hosted repos
93
94## Phase 5: Polish & Interaction
95
96- [ ] Add filtering — filter firehose by event type, user, time range
97- [ ] Add notification badges on the sidebar icon when new events arrive
98- [ ] Keyboard shortcuts for navigating the dashboard
99- [ ] Click-through actions: clicking a tape opens it, clicking a commit shows the diff, etc.
100- [ ] Sound/visual ping option for specific event types (e.g., new user signups)
101- [ ] Consider a compact "ticker" mode that shows a single scrolling line of recent events in the status bar
102
103---
104
105## Architecture Notes
106
107### Data flow
108```
109PDS (at.aesthetic.computer)
110 └─ com.atproto.sync.subscribeRepos (firehose)
111 └─ Session Server (relay)
112 └─ WebSocket → VSCode Extension
113 └─ Dashboard Webview
114
115Knot Server (knot.aesthetic.computer)
116 └─ XRPC / atproto API
117 └─ Session Server or direct polling
118 └─ WebSocket → VSCode Extension
119 └─ Dashboard Webview
120
121Local Git Repos
122 └─ git status --porcelain (child_process)
123 └─ Extension host
124 └─ postMessage → Dashboard Webview
125```
126
127### Key files to modify
128- `vscode-extension/extension.ts` — welcome panel HTML + git status logic
129- `session-server/session.mjs` — add firehose relay endpoint
130- `vscode-extension/embedded.js` — may need message bridging updates
131- `vscode-extension/package.json` — new commands, settings
132
133### Dependencies to consider
134- `@atproto/api` — already in `system/package.json`
135- CBOR decoding for firehose (if doing direct connection)
136- The extension currently bundles with esbuild — any new deps need to be bundleable