Mike's note

Llama is the Studio's own X. The characters ARE the product: people come for Mike's 2am posts and Chadwick's gym tweets, not for the plumbing. My job is to keep it fast, keep it working, and keep it feeling like the real thing.

Current focus: v3, our latest build. Full QA pass done Oct 5: 14 of 17 checks green, profile headers live, feed sorting fixed, Dinesh rebranded. The characters ARE the product, my job is to keep it fast and keep it working.

Llama Dev Notes v3 latest

How we're building Llama

The complete technical breakdown: architecture, files, data flow, and the plan. Updated as we ship. Last updated Oct 5, 2026 (v3).

v3: Latest build (Oct 5, 2026)

This is the current production build. Full QA audit completed: 14 of 17 checks pass. Speed is healthy (2.1s page, 1.4s API).

✅ Shipped in v3

✅ Profile headers: night-sky banner on all profiles (llama-header-nightsky.webp, 3KB). Per-profile override ready via p.header field.
✅ Dinesh rebrand: handle @dineshfilms → @dinesh, bio → "Never push to prod late on Fri." (Dave's line)
✅ Feed sorting fix: seed tweets used floating timestamps ("30m", "3h") that always outranked real posts. Changed to fixed "Oct 5" dates.
✅ Video posters: auto-derived from video URL (.mp4 → -poster.jpg), no more black first frame. Ed's Baja video got a real poster.
✅ View button: after posting, "View" now navigates to #/tweet/<id> instead of just scrolling.
✅ DM error state: failed loads show "Couldn't load messages. Tap to retry" instead of stuck "Loading..."
✅ Tweet detail hardening: shows "Loading post..." / "Post not found" instead of blank page.
✅ Follow buttons: proper X-style pills (black = Follow, white = Following, red on hover).
✅ Hashtag routing: fixed /llama/hashtag/ → #/hashtag/ (was 404).
✅ Drag-and-drop images: drop an image onto the composer, it attaches (blue dashed outline feedback).
✅ Delete API: deleteTs now handled server-side for posts, replies, DMs.
✅ Login/drawer: setPoster updates drawer name/handle/avatar; bottom-left chip opens drawer on desktop.

📥 Queued (known, not yet fixed)

📥 Dinesh DM thread timeout: GET /api/sloth/kv?thread=dave_dinesh times out (20s+). Other threads fine. Likely corrupt/oversized data in Upstash. Needs KV inspection.
📥 One broken video in feed: "Unable to play media" reported on one video element. Needs identification once network stabilizes.
📥 DM thread header duplication: minor cosmetic, low priority.
📥 "Live" nav duplication: check if still present.

📊 v3 QA audit results

14 of 17 pass (browser click-through, Oct 5):

✅ Home feed, tweet detail, all profiles, search, notifications, compose modal, hashtags, avatars, follow toggles, nav links, profile headers, load speed
⚠️ DMs: list loads, but Dinesh conversation stuck (API timeout, see queued)
⚠️ #/login renders home feed when already signed in (expected redirect behavior)

1. What it is

Llama Chat is a Twitter/X clone built with vanilla JavaScript. No React, no framework, no build step. Just HTML, CSS, and JS files served from a CDN. It has a real backend (Upstash Redis via Vercel) for DMs, posts, likes, and follows.

Live at: thestudio.io/llama/ (full color) · thestudio.io/llamabw/ (black & white, 379KB)

2. Tech stack

Frontend: Vanilla JS (1 file, ~1,800 lines), no framework
Styling: Hand-written CSS (~430 lines), no Tailwind
Data: Static JSON in data2.js (seed tweets) + Upstash Redis (user data)
API: Vercel serverless functions at /api/sloth/
Hosting: Vercel, deployed from ~/workspace/thestudio-real/
Images: WebP, max 100KB each (Dave's speed rule)

3. File structure

sloth/
├── index.html      # Page shell (nav, feed container, modals)
├── app2.js         # All logic: routing, rendering, API calls (~1,800 lines)
├── data2.js        # Seed data: profiles + tweets (~9,000 lines, 232KB)
├── style2.css      # All styles (~430 lines)
├── dev/index.html  # This page
└── assets/         # Images (avatars, logos)

api/sloth/
├── kv.js           # Upstash Redis read/write
├── dm.js           # Direct messages
└── migrate.js      # One-time data migration (deleted after use)

llamabw/            # Black & white version (379KB total)
llamalanding2/      # Landing page with Mac + Llama in screen

4. How data flows

Page load:

Browser loads index.html → style2.css → data2.js → app2.js
app2.js calls route() immediately with seed data (never blocks on API)
Feed renders 8 tweets from TWEETS array
API fetches user posts/likes from /api/sloth/kv (~50ms via Upstash)
Page re-renders with merged data

Posting a tweet:

User types in composer → submitComposeModal()
POST to /api/sloth/kv with tweet data
Optimistic UI: tweet appears immediately
Confirmed on API success, rolled back on failure

5. Routing

Hash-based routing. route() (30 lines) dispatches to view functions:

#/                  → showFeed()        (home timeline)
#/profile/<handle>  → showProfileView() (user profile)
#/tweet/<id>        → showTweetView()   (single tweet)
#/messages         → showDMList()       (DM inbox)
#/messages/<id>    → showDMThread()     (DM conversation)
#/search            → showSearchView()    (search)
#/notifications     → showNotifView()     (notifications)
#/hashtag/<tag>     → showHashtagView()  (hashtag page)

6. Current version status

v1 (tagged `llama-v1`, backed up)

Shipped
Original build with Sloth/Llama dual branding. Backed up to /backup/llama-oct-5/ and git tag llama-v1.

v3 (latest, Oct 5, 2026)

Current
Full QA pass + bug-fix marathon. Profile headers, Dinesh rebrand (@dinesh), feed sorting fix, video posters, View-button navigation, DM retry, drag-and-drop images, delete API, login/drawer fixes. 14/17 QA checks green. Speed: 2.1s page, 1.4s API. See "v3: Latest build" section above for full details.

v2 (paused)

Phase 1 done

✅ Removed all Sloth branding (user-facing text is Llama everywhere)
✅ Migrated localStorage keys from sloth_* to llama_* (auto-migrates, no data loss)
✅ Removed 2 dead functions
✅ Fixed missing profile aliases (dinesh, henri, mike, mateo)
✅ Fixed stale "now" timestamps
⏸️ Paused before Phase 2 (Dave's call: "let's not take too many risks")

7. Speed

Latest test · Oct 4 (Pingdom)

/llamabw/: 379KB, B grade (86), 1.65s load, 28 requests
Target: under 1MB, under 1s (Dave's speed rule)
Biggest file: data2.js at 232KB (seed tweets)

Speed rules (Dave's calls, locked): No image over 100KB. WebP for photos. 8 tweets on homepage. Render immediately, never block on API. Version assets (?v=N) so Safari doesn't cache stale copies. Speed tests use Pingdom.

8. Known issues

Open

Dinesh DM thread API timeout (dave_dinesh hangs 20s+, other threads fine)
One video in feed shows "Unable to play media" (needs identification)
data2.js is 232KB, slows initial load
API paths still say /api/sloth/ (technical, invisible to users)

Fixed recently

Avatar fallback bug (tweets showing Dave's face instead of author's)
Stale "now" timestamps on old tweets
Missing profile pages for @dinesh, @henri, @mike, @mateo
Pixelated avatars (removed image-rendering: pixelated)

9. Suggestions for improvement

High impact, low risk:

Split data2.js into profiles.js + tweets.js. Homepage only needs profiles + 8 tweets upfront.
Add loading="lazy" to all below-fold images (only 2 have it now).
Validate all avatar URLs at build time to catch the "Dave's face" bug class permanently.

Medium impact, medium risk:

Group the 40+ global variables into state objects (State.posts, State.user).
Rename /api/sloth/ to /api/llama/ (needs Vercel config change + redirect).
Extract the HTML template from render-live.py style into separate files.

Low priority:

Consider TypeScript for new code (but don't rewrite working JS).
Add a simple error boundary: if renderFeed() throws, show a friendly message instead of blank page.