research: androoagi design north-star notes

6e2e9c4cd01f8f3efe72777319949fff8a781ad0 · 2026-07-01 16:47:50 -0700 · Steve
Files touched

A memos/design-research.md
Diff

commit 6e2e9c4cd01f8f3efe72777319949fff8a781ad0
Author: Steve <steve@designerwallcoverings.com>
Date:   Wed Jul 1 16:47:50 2026 -0700

    research: androoagi design north-star notes
---
 memos/design-research.md | 119 +++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 119 insertions(+)

diff --git a/memos/design-research.md b/memos/design-research.md
new file mode 100644
index 0000000..1bf6f6c
--- /dev/null
+++ b/memos/design-research.md
@@ -0,0 +1,119 @@
+# AbramsEgo Design Research
+
+Living notes distilled from the design north-star sources (SPEC.md → @androoagi
+"AI Agent Environment Tour"). Advisory only — Steve's hard UI rules (🕓 created
+date+time chips, sort+density+infinite-scroll, cost labels, color-coded
+thresholds) always win over borrowed aesthetics.
+
+---
+
+## androoagi
+
+**Researched:** 2026-07-01 (task 30). **Cost: $0 (local)** — yt-dlp + ffmpeg +
+frame reads, no metered APIs.
+
+### What was obtained
+
+- **TikTok (@androoagi): SUCCESS.** yt-dlp pulled the newest 8 videos from the
+  local IP with no anti-bot block → `~/Videos/design-research/androoagi/`
+  (~535 MB total). Titles: *AI Agent Ecosystem Tour 2* (2026-06-01, the
+  north-star video), *Skynet is Coming*, *The Most Important Skill You Can
+  Learn*, *3 Ethical AI Agent Business Ideas*, *AI Beginners Need To Hear
+  This*, *Ethical Ways to Make Money Using AI*, *AI Agents are an UNFAIR
+  Advantage*, *You are soon to be replaced by AI*.
+- **Frame analysis:** 130 frames extracted from *AI Agent Ecosystem Tour 2*
+  (`ffmpeg -vf fps=1/3`, ~6.5-min video); 10 frames read spanning the full
+  runtime.
+- **X (x.com/androoagi): BLOCKED.** WebFetch was permission-denied in this
+  session; curl gets only X's JS shell (no post content without a logged-in
+  browser); nitter.net mirror returned nothing. **Not fought further per
+  budget rail — Browserbase fallback is task 31's owner (≤$0.50, log to
+  cost-tracker).**
+
+### What the Ecosystem Tour actually shows
+
+It is NOT a conventional grid dashboard. Two-layer system, filmed off a
+physical monitor (vertical phone crop):
+
+1. **A spatial "agent village" world map** — dark starfield background; each
+   agent is a self-contained pixel-art "station"/room with its OWN strong color
+   identity (orange station, red station, blue, white/mono, green, magenta).
+   Stations are connected by conveyor/pipe-style paths with particles flowing
+   along them (work/data visibly moving between agents). The camera slowly
+   pans/zooms across the world; the selected station glows bright (blue) while
+   the rest dim.
+2. **Green-CRT terminal chrome + panels** — thick green border framing the
+   viewport, a thin top metrics strip of small segmented gauges/readouts, and
+   monospace green-on-black panels:
+   - an **agent roster** ("9 Agents") with a gift-shop/lab metaphor per agent;
+   - a **GENERATION WINDOW**: 2×2 grid of output thumbnails, each captioned
+     with a name + a quantified stat ("...% render confidence"), with a
+     scrolling timestamped action log beneath;
+   - an **OUTPUT TERMINAL**: dense 3-column layout (text log | thumbnail
+     cards | stats), header metrics like `34 / 91% / 15 Live`, every section
+     inside a boxed, labeled frame.
+
+Video ends on a landing page ("THE AGENT THAT GROWS WITH YOU") — he's selling
+the aesthetic as a product; the tour itself is the demo.
+
+### Patterns worth copying → AbramsEgo panel mapping
+
+1. **Stable per-agent color identity** → *Fleet health*: give every pm2
+   process / launchd job / agent a persistent hue chip (golden-angle rotation,
+   same trick as /color) so entities are tellable apart at a glance across all
+   panels.
+2. **Segmented mini-gauges in a thin always-on strip** → *Top metrics bar*:
+   render CPU/RAM/swap/disk as 10-cell segmented bars with bracketed monospace
+   labels, not plain numbers — reads instantly at small size, and cells map
+   naturally onto the SPEC's color-coded thresholds.
+3. **Work visibly flowing** → *Activity feed*: motion communicates "alive."
+   Cheap version: new feed items slide in + a subtle pulse on the source
+   panel's header when its data changes (commit lands → Fleet pulses).
+4. **Selected-entity glow / dim-the-rest** → all panels: clicking a card
+   focuses it (bright border) and dims siblings — the tour's strongest
+   focus cue.
+5. **Quantified caption line on every card** → *Sessions & sub-agent runs*:
+   each card carries one stat caption (model + tokens/cost) exactly like the
+   "% render confidence" captions — aligns with the Always-Show-Costs rule.
+6. **Boxed, labeled terminal frames** → panel headers styled as
+   `[ OUTPUT TERMINAL ]`-style labeled boxes with a header metrics row
+   (count / % healthy / N live) — a per-panel summary before the detail.
+7. **(Stretch) Spatial map view** → an optional toggle view where each
+   agent/service is a room sized by activity with edges for recent
+   interactions (session → cron → cost). High effort; list-first is fine.
+
+### What NOT to copy
+
+- **Monochrome green-on-everything CRT palette** — kills threshold color
+  coding (green must mean "healthy," not "everything"). Keep the dark theme;
+  use green as ONE accent in a real status palette (green/amber/red).
+- **Decorative pixel-art sprite density** — charming in a video, noise in an
+  ops surface Steve scans daily. Density should come from information, not
+  decoration.
+- **Vertical/phone-crop composition** — AbramsEgo is a desktop admin surface.
+- **No timestamps on cards** — the tour's cards show none; Steve's hard rule
+  requires 🕓 created date+time on every admin card. Do not inherit this gap.
+
+### Apply next (build tasks consume this)
+
+1. Segmented 10-cell gauges + bracketed monospace labels in the top metrics
+   bar (keep threshold colors).
+2. Per-agent golden-angle hue chips in Fleet health, reused everywhere that
+   agent appears.
+3. `[ PANEL NAME ]` boxed headers with a per-panel summary metrics row
+   (count / healthy% / live N).
+4. Focus state: click card → glow + dim siblings.
+5. One-stat caption line on session/sub-agent cards (model · tokens · $).
+6. Slide-in + source-panel pulse on new activity-feed items.
+7. (Deferred/stretch) spatial map toggle view.
+8. (Task 31) Browserbase pass on x.com/androoagi posts (≤$0.50) + remaining
+   TikTok videos' frame pass if the X posts add design detail.
+
+### Cost lines
+
+| Item | Cost |
+|---|---|
+| yt-dlp profile pull (8 videos) | $0 (local) |
+| ffmpeg frame extraction (130 frames) | $0 (local) |
+| Frame reads (10) + curl attempts | $0 (local) |
+| Browserbase/Exa | $0 — not used (deferred to task 31) |
← 1c6bbbf auto-save: 2026-07-01T16:37:32 (2 files) — build-queue/tasks · back to AbramsEgo · research: dropped links + norma tour patterns a48913f →