# 2026-02-17 Session Notes

## CSaaS Landing Page Overhaul

Worked with Jarrhey on differentiating all 7 CSaaS product landing pages.

### Key Decisions

1. **Not all dark mode** - Each product gets a mode that fits its personality
   - Overture: Dark (premium analytics)
   - Vector: Light brutalist (builder energy)
   - Alignly: Warm cream (human HR)
   - Worklane: Light + purple (professional ops)
   - Clocklane: Warm cream (retail-friendly)
   - Encore: Light + teal (welcoming portal)
   - ContentVane: Light + indigo (discovery)

2. **Unique signature moments** - Each product gets ONE delight moment tied to its brand:
   - Overture: Aperture breathes
   - Vector: Shipping progress meter (fills on scroll)
   - Alignly: Avatar heartbeat pulse
   - Worklane: APPROVED stamp slams
   - Clocklane: Live ticking clock
   - Encore: Portal doors open
   - ContentVane: Compass finds north

3. **No repetitive patterns** - Removed counting numbers from Vector/Worklane (was on every site)

### Assets Created

- OG images for all 7 products (mode-matched)
- New favicons with brand marks
- Apple touch icons
- ContentVane full landing page (new)

### Jarrhey Feedback

- "Not all of these has to be in dark mode. Some can be in light mode or colored background - it should fit the personality of the brand. A hyperpersonalized software should be showcased by a hyperpersonalized brand"
- "The counting up numbers look very repetitive across all the websites, think of other ways to delight"
- "Every product and brand landing page is unified in the mission and movement of offering personalized software but should have a signature pause moment of delight"

### Learnings Captured

- Updated `agency/docs/landing-page-learnings.md` with full documentation
- Mode selection guide
- Signature moment patterns
- Anti-patterns (AI template red flags)

## Deploys

All 7 products deployed to Cloud Run:
- overtureinsights.com
- vectorpm.io
- alignlyhq.com
- getworklane.com
- clocklane.com
- encoreclients.com
- contentvane.com

## 2026 Web Design Research (Part 2)

Jarrhey pushed back: Overture was "bland, no drama, nothing captivating, feels like stock photo."

### Research Done
- Webflow 2026 Web Design Trends
- Figma 2026 Web Design Trends
- Originality.ai - How to identify AI-generated websites
- ThunderClap - Best landing page designs 2026
- HelpfulHero - Modern landing page examples

### Core Insight
> "In a world of algorithmic sameness, human craft is becoming the differentiator."

### 2026 Trends to USE
1. Proprietary visual effects (custom systems that feel yours)
2. Art + UI convergence (vintage/hand-drawn + modern)
3. Radical copy brevity (less is counter-cultural)
4. Full color systems (not just one accent)
5. Dynamic text treatments (kinetic typography)
6. Neo-brutalism (raw, unpolished, intentional)
7. Bold oversized typography
8. High-contrast dramatic (not generic dark mode)

### AI Red Flags to AVOID
- Gradient blobs/orbs
- Purple+blue gradients
- Bouncy animations
- Feature grids with generic icons
- "Revolutionize your workflow" copy
- Repetitive patterns across sites
- Em dashes everywhere

### Outdated 2020-2023 to AVOID
- Flat design, neumorphism
- Above the fold obsession
- Basic parallax
- Single accent color
- System fonts only

### Action Taken
- Created comprehensive research doc: `agency/docs/2026-web-design-research.md`
- Rebuilt Overture from scratch with real drama:
  - Massive oversized typography ("Know *why.*")
  - Full-viewport pause sections
  - Proprietary lens flare effect
  - Radical copy brevity
  - Dashboard presented as art piece
  - JetBrains Mono for data/labels
  - Guided scroll indicator

### Files Updated
- `agency/docs/2026-web-design-research.md` (new)
- `agency/docs/landing-page-learnings.md` (updated with 2026 trends)
- `agency/brand/csaas-brand-system.md` (updated)
- `agency/People/Jarrhey.md` (created)
- `agency/Learnings/corrections.md` (appended)

## TIL

1. Repetition across products = template smell. If you can say "we do X on every site," rethink it.
2. Mode should match personality, not default to dark.
3. Signature moments must tie to brand concept, not just be "cool animation."
4. Hyperpersonalized software deserves hyperpersonalized branding.
5. **2026 baseline is higher** — AI made sophisticated design accessible. Craft is the differentiator.
6. **Radical brevity signals care** — When AI generates infinite text, saying less is counter-cultural.
7. **Typography should do work** — Not just display text, but command attention and tell story.
8. **Drama comes from contrast** — Bold statements against stark backgrounds, oversized against small, pause against scroll.

---

## CSaaS Marketing Strategy & Ad Demographics (with Gee)

Working on comprehensive 2026 marketing strategy for Symph's 7 CSaaS products.

### Key Strategic Insight

**My initial output was too Western/international.** Gee's feedback revealed PH market requires fundamentally different approach:

- **Trust > Features**: PH buyers decide on relationships and referrals, not feature comparisons
- **Channels**: Viber, Facebook Groups, Chamber of Commerce, PMAP, IBP are primary (not LinkedIn/Google Ads focus)
- **LGU market**: 1,700+ local government units = massive untapped market
- **BPO industry**: 1.3M workers with specific compliance needs

### Brand Architecture Decision

**"Endorsed Brands"** — NOT a bundled suite. Each product has independent identity but shares Symph credibility. This matters for positioning and pricing psychology.

### PH Market Data (from Gee)

| Segment | Size | Key Channels |
|---------|------|--------------|
| LGUs | 1,700+ | COA compliance, DILG mandates |
| BPO | 1.3M workers | IBPAP, compliance requirements |
| Lawyers | 30K+ | IBP, ethics CPD requirements |
| MSMEs | 1M+ | DTI programs, Chamber events |

### Budget Ranges (PHP)

- Overture: ₱5-25K/month
- Worklane: ₱3-15K/month  
- Clocklane: ₱2-5K/location
- Vector: ₱200-500/user
- Alignly: ₱50-200/employee
- Encore: ₱5-20K/month

### Gender Skew (PH-specific)

- HR roles: 70% female
- Ops/Admin: 60% female
- Owner/Founder: 60% male

### Files Created

- `agency/brand/symph-csaas-brand-system.md` — Brand architecture
- `agency/marketing/csaas-marketing-strategy-2026.md` — 2026 tactics + trends
- `agency/marketing/csaas-ad-demographics-2026.md` — Targeting specs

### Next Steps

Merge ARIA's 2026 trends with Gee's PH-specific personas document, preserving user's format structure.

### Learning

When building marketing strategy for PH market, **start with trust networks first** (referrals, associations, community groups), then layer digital. The buying psychology is relationship-first, not research-first.

---

## Build Copilot UX Improvements (Jim Session)

### Features Added

1. **Input Field Upgrade** — Converted single-line input to multi-line textarea matching "Talk to AI Agent" style
   - Drag & drop file support
   - Paste image support (Ctrl+V)
   - Image/file upload buttons
   - Voice input + voice mode toggle
   - "Paste or drop files" hint text

2. **Session Context Recovery** — When Claude Code session dies mid-conversation:
   - Detects 404 on message send
   - Builds context summary from last 20 messages in localStorage
   - Prepends context to new message
   - Shows "⚠️ Session was reconnected" notice
   - Location: `src/hooks/useCopilot.ts`

3. **Attachment Thumbnails** — Screenshots show as actual thumbnails in chat bubbles instead of file paths
   - Created `/api/copilot/files/[...path]` endpoint to serve uploaded images
   - Attachments stored as metadata on messages (`CopilotAttachment` type)
   - Images render with name overlay

4. **Auto-Start App** — When opening Build Copilot, app auto-starts if offline
   - Uses `autoStartAttemptedRef` to prevent multiple attempts
   - Better loading UI with spinner + animated dots

5. **Witty Loading Messages** — Rotating messages while app starts:
   - "Warming up the electrons..."
   - "Teaching the hamsters to run faster..."
   - "Consulting the Stack Overflow gods..."
   - (15 total messages, rotates every 2.5s)

6. **System Prompt for Attachments** — Claude Code now auto-reviews attached files
   - Added to system prompt: "When user attaches files, ALWAYS read and analyze them"
   - No more verbose "[ATTACHED FILES - Please review...]" in messages

### Files Modified

- `src/components/build/BuildWorkspace.tsx` — Main copilot UI
- `src/hooks/useCopilot.ts` — Added `CopilotAttachment` type, context recovery
- `src/app/api/copilot/message/route.ts` — Attachment handling in system prompt
- `src/app/api/copilot/upload/route.ts` — New upload endpoint
- `src/app/api/copilot/files/[...path]/route.ts` — New file serving endpoint

### Key Insight

Claude Code sessions can die unexpectedly (timeout, server restart, process crash). The UI needs to gracefully handle this with context recovery rather than losing all conversation history.

### Session Continuation Status (Compaction Point)

At session compaction, still in progress:
- Finalizing witty message rotation state/useEffect
- Testing auto-start + loading state UX flow
- Lines 970-993 in BuildWorkspace.tsx need conditional loading state when `appActionState === "starting"`

Deploy method note: Used direct `next build` + `pm2 reload` because `deploy.sh` git push was hanging.

---

## B2B Portfolio Documentation & Social Media Content (Jarrhey Session)

### Brand Documentation Created

1. **`agency/docs/b2b-portfolio.md`** — Complete B2B SaaS portfolio documentation
   - 8 products: Overture, Worklane, Clocklane, Vector, Alignly, Encore, ContentVane, The Agency
   - Brand architecture: "Endorsed Brands" (not a suite)
   - Endorsement format: "[Product] by Symph"
   - Category positioning: "Personalized SaaS"

2. **`agency/docs/csaas-brand-system.md`** — Reference document from Jarrhey's v2.0 brand system

3. **`agency/docs/product-visual-languages.md`** — Unique visual guidelines per product
   - Each product has specific: mode (light/dark), colors, typography, graphic elements
   - Follows 2026 design trends research

### Color Corrections (from Brand System v2.0)

| Product | Correct Color |
|---------|---------------|
| Overture | Cyan #0EA5E9 |
| Worklane | Purple #8B5CF6 |
| Clocklane | Red #EF4444 |
| Vector | Orange #F97316 |

### The Agency Social Media Content

**Visual Peg:** B&W editorial style with faint blue accent (#E8EEF4), bold typography, gradient dot (•) as ownable element

**Generated 15 slides** using nano-banana-pro (Gemini image generation):
- **Post 1 (Intro):** 4 slides — "Software that fits your business" hook
- **Post 2 (Problem-Aware):** 5 slides — Addressing "we're too complex" excuses
- **Post 3 (Educational):** 6 slides — "AI builds. Humans review. You approve." process

**Saved to:** `/home/aria/marketing-assets/uploads/the-agency/social-posts/`

### Key Messaging

- "Software that fits your business"
- "Built in days, not months, paid like SaaS"
- "AI builds. Humans review. You approve."
- "Not one-size-fits-all. Not bloated enterprise."

### Status at Compaction

Awaiting Jarrhey's feedback on the 15 generated slides. May need revisions based on feedback.

---

## Checkpoint — 14:56 UTC (22:56 PHT)

### Completed Today
- ✅ Pet Social Media discovery pipeline (Run 2) — 31 user stories, 196 story points, ready for design
- ✅ Dance Workshop Studio discovery retry kicked off
- ✅ Dinq landing page redesigned (live at dinq.landing.symph.co)
- ✅ Production deployment docs corrected (Cloud Run, not Firebase App Hosting)
- ✅ Discord DM access configured (3 users allowlisted)
- ✅ agency-app-starter updated (removed Firebase App Hosting reference)
- ✅ SymphonyAgents GitHub org migration documented
- ✅ Asset storage policy enforced in skills
- ✅ App cleanup check (all 4 apps healthy)

### In Progress
- Dance Workshop Studio discovery (subagent running)
- Drawlang & Tanggero builds
- Tiangge marketing pipeline
- PHINMA Education POC

### Blocked
- SymphonyAgents team invites — 23 users rate-limited (retry after ~11:15 UTC Feb 18)
- Product Git Backup — ~90 repos HTTPS push failed
- ReadStreak Renewal Reminder cron — 500 error
- SafeNow production — auth flow broken

### Usage (last tracked 12:53 UTC)
- 8.37M tokens
- $373.31 estimated cost

---

## VibeEditing Video Style Templates System

### Problem Solved

VibeEditing agent was using wrong path for aesthetic templates (`skills/taste-protocol/` instead of `skills/remotion/rules/`).

### Architecture Established

**6 Comprehensive Video Aesthetics** created in `/home/aria/.openclaw/workspace/skills/remotion/rules/`:

| Template | Size | Use Case |
|----------|------|----------|
| `liquid-glass-aesthetic.md` | 4.5KB | Tech products, SaaS, premium apps |
| `synthwave-retro-futurism.md` | 7.2KB | Nostalgia, gaming, crypto, music |
| `glitch-aesthetic.md` | 9.5KB | Tech/hacker vibe, digital rebellion |
| `kinetic-typography.md` | 10.1KB | Any text-heavy content, quotes, lyrics |
| `brutalist-typography.md` | 10KB | Bold statements, countercultural brands |
| `film-analog-aesthetic.md` | 10.3KB | Authentic/artisan brands, storytelling |

**Total:** ~52KB of production-ready style references

### Quality Gate

Each template includes a **"Critical Self-Assessment"** section explaining:
- Why it deserves inclusion
- What it does uniquely well
- When NOT to use it

### Routing Pattern

1. **SKILL.md as index** — Remotion SKILL.md contains table of all aesthetics with when-to-use guidance
2. **Agent reads SKILL.md first** — Before any video generation
3. **Load specific template on-demand** — Based on video context and user intent

### Context Isolation Fix

Added explicit instructions to `openclaw-api.ts` prompts:
- "This is a fresh VibeEditing session"
- "Do NOT load MEMORY.md or carry over context from other sessions"
- Prevents session bleed where agent would reference unrelated prior work

### Leonardo AI

API key configured in `~/.env` as `LEONARDO_API_KEY` — documented in TOOLS.md for future AI image generation needs in videos.

### Golden Templates Updated

Both `starter-portrait.txt` and `starter-terminal.txt` now reference all 6 aesthetic options.

### Key Files

- **Skill index:** `/home/aria/.openclaw/workspace/skills/remotion/SKILL.md`
- **Templates:** `/home/aria/.openclaw/workspace/skills/remotion/rules/*.md`
- **OpenClaw API:** `/home/aria/projects/remotion-chat/src/lib/openclaw-api.ts`

### Learning

When building multi-aesthetic systems, use the main skill file as an **index with selection criteria**, not a dump of all content. Agent reads index → picks appropriate template → loads only what's needed. Keeps context lean.

---

## TIL (Today I Learned) — End of Day

### Production Stability
- **ReadStreak cron endpoints failing** — Both streak reset and reminder notifications returning 500 errors. This has been persistent; needs investigation into database connections, FCM config, or env vars.
- **App process management** — Port-based management via `caddy-ports.json` is working well. No PID tracking needed.

### Discovery Velocity
- **Pet Social Media** completed discovery in one eval-run (8m12s) — generated 31 user stories, 196 story points, full artifact suite (brief, competitors, target market, PRD, user stories).
- **Dance Workshop Studio** kicked off as retry — discovery workflows are now reliable enough to auto-retry on failure.

### GitHub Organization Migration
- Successfully migrated repo creation to SymphonyAgents org
- Documented asset storage policy across multiple skills (ad-video-creator, landing-page-builder, market-pipeline)
- All new repos now require `symphdevtools` collaborator + write access

### Documentation Corrections
- **Production deployment method** clarified — Cloud Run, NOT Firebase App Hosting (automation issues encountered)
- Updated TOOLS.md, firebase skill, MEMORY.md, agency-app-starter

### Checkpoint Workflow
- Exec approval timeouts still happening — commands submitted at 14:56 UTC and 15:17 UTC both timed out waiting for approval
- Memory files updated manually but git commits didn't go through

### What Went Well
- Routine heartbeats and job processor running smoothly
- App cleanup checks working (all 4 apps healthy)
- Pet Social Media design preview generated and ready for Stage 2

### What Needs Attention
- ReadStreak production endpoints (both 500ing)
- Product Git Backup HTTPS credentials (~90 repos failed)
- SymphonyAgents team invites (23 users rate-limited until tomorrow)

---

## CSaaS Pricing Reversion (Jarrhey Session ~15:16 UTC)

### Context
Earlier I applied standardized $79/$199/$399 pricing to ALL 7 products. Jarrhey clarified this pricing was **only for Overture**, not all products.

### Action Taken
Reverted all products EXCEPT Overture to original pricing:

| Product | Reverted Pricing |
|---------|------------------|
| Vector | $0 / $8/user / $15/user |
| Alignly | $5 / $10 / $18 per employee |
| Worklane | $0 / $12/user / $24/user |
| Clocklane | $0 / $49/location / $99/location |
| Encore | $29 / $79 / $149 |
| ContentVane | No pricing section (removed) |
| **Overture** | **$79 / $199 / $399** (kept) |

### Deploys
All 6 products redeployed to Cloud Run with original pricing restored.

---

## Overture v2 Redesign (Jarrhey Feedback ~15:16 UTC)

### Jarrhey's Feedback on v1
> "seems so wordy. there are no micro interactions at all. There's no payoff. No surprise. No delight in scrolling, nothing makes me pause. It's not of the same caliber as agency.symph.co -- i dont even see the logo anymore"

### Root Cause Analysis
v1 had removed the logo, was too text-heavy, and lacked the polish/delight of agency.symph.co.

### What I Studied
Analyzed agency.symph.co to understand the quality bar:
- Reveal animations with delays
- Hover transforms on cards (translateY)
- Intersection Observer for scroll reveals
- Punchy minimal copy
- Strong dramatic statements
- Counting number animations

### v2 Rebuild — Added
1. **Logo restored** — Aperture mark SVG in nav
2. **Reveal animations** — Elements fade+slide in on scroll
3. **Full-viewport "pause" moment** — `"Your dashboard shows −12% revenue. Now what?"` section
4. **Counter animation** — Metrics ($47K, 3, $12K) count up when visible
5. **Hover micro-interactions** — Cards lift on hover, buttons transform
6. **70% less copy** — Removed wordiness, punchier headlines
7. **Transitions matching agency.symph.co** — 0.6s cubic-bezier easing

### Files
- `/home/aria/projects/overture/index.html` — Complete rewrite
- Deployed: overture-00037-znj

### Learning
**agency.symph.co is the quality bar.** Before shipping any CSaaS landing page, compare against it for:
- Scroll delight (reveal animations)
- Hover feedback
- Copy density (less is more)
- "Pause moments" that make you stop scrolling
- Logo always visible

---

## ReadStreak Quick-Log Drawer Overhaul (Nick Session)

### Goal
Revamp the "log a page/time" experience to feel more in-app instead of navigating to a separate page. Make it compact, fast, and native-feeling.

### Completed Work

1. **Quick-Log Drawer** — Bottom sheet that opens from dashboard center button
   - Page counter with +/- buttons
   - Timer with start/pause/reset (expanded by default per Nick's preference)
   - XP preview before saving
   - Compact design (~60vh, no scrolling needed)
   - Components: `QuickLogDrawer.tsx`, `MiniTimerWidget.tsx`

2. **Mini Timer Widget** — Spotify-style bar above navigation
   - Shows when `timerSeconds > 0` (not just when running)
   - Quick resume/pause without opening drawer
   - Fixed bug where paused timer with time was hiding widget

3. **Global Session Context** — `ReadingSessionContext.tsx`
   - Manages active reading session state across app
   - Book selection, pages, timer state all centralized

4. **Performance Optimizations**
   - Firestore `writeBatch` for atomic saves (4 ops → 1 commit)
   - Achievement checking moved to background (non-blocking)
   - Show success toast immediately, check achievements async

5. **UX Centralization**
   - Removed "Log Pages" button/dialog from book detail page (`/book/[id]`)
   - ~300 lines of unused code cleaned up
   - **Single logging flow:** Dashboard center button → ReadPicker → QuickLogDrawer

### Deploys
- Revision 00153-lkb: Compact Quick-Log initial deploy
- Revision 00154-k2j: Book detail page cleanup (100% traffic)

### Infrastructure
- Port changed: 3024 → 3026 (resolved conflict with AdultingPH)
- Discovered dual Cloud Run services (asia-southeast1 + us-central1) — domain points to us-central1
- Cleaned up E2E test accounts after validation

### Key Files
- `/home/aria/products/reading-accountability/apps/main/src/components/reading/QuickLogDrawer.tsx`
- `/home/aria/products/reading-accountability/apps/main/src/components/reading/MiniTimerWidget.tsx`
- `/home/aria/products/reading-accountability/apps/main/src/lib/context/ReadingSessionContext.tsx`
- Design mockups: `/home/aria/products/reading-accountability/design/quick-log-compact-v2.html`

### Key Decisions
- **Timer expanded by default** — Critical for time-based tracking users
- **Mini widget shows when timerSeconds > 0** — Not just when actively running
- **Log only via dashboard** — Removed redundant book detail page logging to enforce single UX
- **Background achievement checking** — User sees success immediately, gamification happens async

### Status
- ✅ Implementation complete
- ✅ E2E testing passed (5 rounds)
- ✅ Deployed to production
- ⏳ Pending: Verify logging flow works correctly on prod
- 📋 Bundled dedupe fix deferred to next ReadStreak change

---

## Clocklane QA Session (Late Day)

### Test Execution
- Ran full Smoke Test suite (30 test cases)
- Results: 27 passed, 1 failed, 2 known issues
- All previously fixed bugs (CLOCK-001 to CLOCK-015) verified working

### Bugs Fixed (In Progress - Build Interrupted)
1. **CLOCK-017** (HIGH): Google Sign-In CSP blocked
   - Added Google domains to CSP in `next.config.ts`
   - script-src: accounts.google.com, apis.google.com, googletagmanager.com
   - frame-src: accounts.google.com (for OAuth popup)
   - style-src: accounts.google.com, fonts.googleapis.com
   - font-src: fonts.gstatic.com

2. **CLOCK-018** (HIGH): Void Transaction 500 error
   - Fixed null safety in `voidSale()` method in `sale.service.ts`
   - Added fallback for missing `items` array
   - Pre-generate void document ID outside transaction
   - Handle deleted products gracefully (skip inventory restore)

3. **CLOCK-016** (Low): Loading screen logo color
   - Changed from `bg-[#22C55E]` (green) to `bg-[#ef4444]` (red)
   - Location: `src/app/app/page.tsx`

### Status
- All 3 fixes applied to codebase
- Build was running when session compacted
- **NEXT:** Complete build, deploy, run Full Tests, generate Excel

### Key Files Modified
- `/home/aria/products/clocklane/apps/main/next.config.ts` (CSP)
- `/home/aria/products/clocklane/apps/main/src/server/services/sale.service.ts` (void fix)
- `/home/aria/products/clocklane/apps/main/src/app/app/page.tsx` (logo color)

### Test Script Location
- `/home/aria/products/clocklane/qa/Test-Script-2026-02-17-v2.md`

---

## End-of-Day Summary — 1:02 AM PHT (Feb 18)

### TIL (Today I Learned)

**ReadStreak Production Issues Persist**
- Both streak reset and reminder notification endpoints have been 500ing for hours
- Consistent error: `{"error":"Failed to run streak reset"}` and `{"error":"Failed to send notification"}`
- Likely database connection, FCM config, or environment variable issue in production
- Needs investigation — this is blocking user notifications

**Pet Social Media Discovery Complete**
- Second run of discovery pipeline completed successfully (8m12s)
- Generated 31 user stories, 196 story points, full artifact suite
- Ready to progress to design phase when approved

**Dance Workshop Studio Discovery**
- Retry kicked off successfully via job processor
- Subagent running in background

**Heartbeat Checks Running Smoothly**
- Security scans clean throughout the day
- App cleanup checks working (all apps healthy)
- Usage tracking appended to usage.jsonl regularly

**GitHub Organization Migration**
- SymphonyAgents org now primary for all new repos
- symphco is legacy only (existing repos)
- All documentation updated (TOOLS.md, MEMORY.md, skills)

**Production Deployment Method Clarified**
- Cloud Run is the production deployment method
- Firebase App Hosting had automation issues — documented in corrections

**Asset Storage Policy Enforced**
- Product assets → `/home/aria/products/<slug>/`
- Non-product → `/home/aria/marketing-assets/uploads/`
- Never workspace root — enforced across all asset-generating skills

### What Worked Well
- Routine heartbeat checks executed reliably
- Memory consolidation happening at checkpoints
- Usage tracking logged consistently
- Cron jobs running on schedule

### What Needs Attention Tomorrow
- **ReadStreak production endpoints** — investigate 500 errors
- **Product Git Backup** — fix HTTPS credentials for ~90 repos
- **SymphonyAgents team invites** — retry 23 rate-limited users after 11:15 UTC Feb 18

### Active Pipelines Still Running
- Dance Workshop Studio discovery (subagent)
- Drawlang/Tanggero builds
- Tiangge marketing pipeline
- PHINMA Education POC

---

## WanderKit Marketing Videos & Launch Content (Tom Session)

### Concept Videos Completed

1. **Concept B "Group Chat Misdirect"** — Approved and delivered
2. **Concept D "The Backpacker"** — Approved and delivered
3. **Concept C "Notification Chaos"** — Approved and delivered
   - Pure FFmpeg build (horizontal + vertical)
   - Uploaded to Google Drive: `Marketing-Assets/products/wanderkit/concept-c-final/`

### Technical Learnings

**🚨 CRITICAL: Pure FFmpeg over Remotion for video assembly**
- Remotion causes playback lag/judder issues
- Direct FFmpeg concatenation is smoother and faster
- Use for all video assembly going forward

**Render at source clip FPS**
- Leonardo AI clips are 24fps
- Rendering at 30fps causes frame duplication judder
- Always match source fps

**HTML/Puppeteer for UI mockups**
- Proper emoji rendering (ImageMagick fails)
- Better CSS control for UI elements
- Scripts in: `/home/aria/products/wanderkit/market/day1-carousel/html-render/`

### Day 1 Carousel (10-Day Launch Content)

**Format:** 1080x1350 (4:5 portrait) for FB/TikTok/IG

**Completed Slides:**
- Slide 1: Hook with travel textures (terracotta + dotted paths, airplanes, map pins)
- Slide 2: Flat graphic collage (chaos) on terracotta - AI generated
- Slide 3: Template (background + logo + headline) — Tom places screenshots
- Slide 3 Labels: Itinerary, Activities, Ledger, Voting, Attendance (pill badges)
- Slide 4 v2: CTA with large logo (550px), centered, travel graphics

**Style Guide:**
- Text cards: `#B5651D` terracotta background, white Inter font
- WanderKit sage-dark badge color: HSL(125, 18%, 42%) ≈ `#5D7053`
- Correct logo: `/home/aria/products/wanderkit/market/day1-carousel/slide3-assets/logo.png`

**UI Mockups Created:**
- Activity row "Central Park" — 6 diverse avatars with 👍/👎 voting badges
- Activity row "One World Observatory" — 6 avatars with ✓/✗/? attendance badges
- Followed WanderKit codebase patterns (`AttendanceInline.tsx`, `DraggableActivityRow.tsx`)

### In Progress at Compaction
- Slide 4 refinements (white circular backdrop behind logo, updated CTA text, vertical centering)
- Tom manually compositing Slide 3 screenshots
- Days 2-10 content specs pending

### Key Paths
- Day 1 carousel: `/home/aria/products/wanderkit/market/day1-carousel/`
- Concept C final: `/home/aria/products/wanderkit/market/videos/concept-c-ffmpeg/`
- Google Drive folder: `https://drive.google.com/open?id=17TCdSgauZeyOVtBwD_NWyMjDDmeMGp5T`

### Workflow Note
**One frame at a time** — wait for explicit "go" before generating next frame/slide. Tom prefers incremental review.


---

## PHINMA Learning Companion — Symphony Onboarding (Jed Session ~10:56 UTC)

### Context
Jed is working on the PHINMA Learning Companion POC — an adaptive learning platform for PHINMA Education to help students pass difficult courses (pilot at Southwestern University PHINMA, Cebu for Anatomy & Physiology).

### Symphony Product Status
- **Product name in Symphony:** "Phinma Project"
- **Discovery phase:** Complete (100%) — brief.html, prd.md, user-stories.md, gtm-strategy.md, pitch-deck.json all generated
- **Design phase:** Initialized by me at 10:56 UTC

### Files Created/Modified
- `/home/aria/.openclaw/workspace/agency/products/phinma/design/workflow.json` — Initialized with status: "in-progress"

### CSaaS Education Session
Jed asked for comprehensive context on:

1. **CSaaS Model Overview** — Explained the full "Custom Software as a Service" / "Personalized SaaS" concept:
   - Problem: Off-the-shelf SaaS too generic, custom dev too expensive (₱2M-10M+)
   - Solution: Custom-built software + subscription pricing + AI-powered speed
   - Key message: "Software that fits how you work. Built fast. Paid monthly."
   - Directed to: `agency/marketing/csaas-marketing-strategy-2026.md` and `agency/brand/csaas-brand-system.md`

2. **Engagement Tiers (Fixed, Flex, Fluid)** — Detailed breakdown:

   | Tier | Customization | Timeline | Pricing |
   |------|---------------|----------|---------|
   | Fixed | None | Immediate | $20-50/user |
   | Flex | Branding, config | 1-2 weeks | $50-150/user |
   | Fluid | Custom features | 4-8 weeks | $100-500/user |

   - Documentation sources: `agency/Agents/closer.md`, `agency/Agents/configurer.md`, `agency/dashboard/10x-data.yaml`
   - PHINMA would likely be **Fluid tier** (custom learning platform with AI feedback, teacher dashboard, student portal)

### Key Learning
Growth team pricing/engagement info was not fully documented. The tier breakdown exists in agent docs (closer.md, configurer.md) and dashboard data, but not in a standalone pricing document. Consider creating a formal pricing/engagement reference doc.

---

---

## Clocklane Repo Clarification (Ragan - 2026-02-17)

**IMPORTANT:** For Clocklane app changes:
- ✅ Use: `git@github.com:symphco/clocklane-app.git`
- ❌ Do NOT use: `git@github.com:symphco/clocklane.git` (landing page only)

Updated by Ragan during QA session.

---

## Visual Language Campaign — Worklane Social Posts (Jarrhey - 2026-02-17)

### Context
Continuing from The Agency social posts (v4 approved), created Worklane social posts with distinct visual language.

### Worklane Visual Language
- **Mode:** Light (lavender/white backgrounds) — opposite of The Agency's dark mode
- **Accent:** Purple #9333ea (brand color)
- **Typography:** DM Sans
- **Texture:** Motion blur, flow arrows
- **Personality:** "The Traffic Controller" — energetic, efficient
- **Copy style:** "Route it. Done." — direct, action-oriented

### Deliverables
- 15 slides across 3 posts (same structure as The Agency campaign)
- **Post 1 (Intro):** 4 slides — headline, logo, features, CTA
- **Post 2 (Problem-Aware):** 5 slides — problem hook, quotes, contrast, CTA
- **Post 3 (Educational):** 6 slides — question, 3 steps, flow diagram, CTA
- Saved to: `/home/aria/marketing-assets/uploads/worklane/social-posts-v1/`
- Google Drive: `https://drive.google.com/drive/folders/1f15eHTIYQszuRqyNaVSQlCsfvLqsS-3f`

### Brand Architecture Principle
Same mission ("hyperpersonalized B2B SaaS") but **visually distinct** brands. Each product has its own personality while serving the endorsed brand architecture.

---

## Creative Hub — The Agency Assets Page (Jarrhey - 2026-02-17)

### Request
Add social posts to assets.landing.symph.co with downloadable assets and copy-able captions (Google Drive folder was trashed).

### Implementation
- Added "🎬 Creative Hub" section to `/home/aria/projects/logos-preview/products/agency.html`
- All 15 slides with thumbnail previews
- Individual download buttons per slide
- Copy-to-clipboard captions with visual feedback
- Visual language summary table
- Assets served directly from: `/home/aria/projects/logos-preview/assets/agency/social-posts/`

### Live URL
https://assets.landing.symph.co/products/agency.html#creative

### Key Decision
Self-hosted assets > Google Drive — no dependency on external file sharing, direct downloads, better UX.

---

## Documentation Created Today

1. **The Agency Social Design System** — `agency/docs/the-agency-social-design-system.md`
   - Locked-in visual language for The Agency social content
   - Dark mode, B&W, Geist font, blueprint texture, hand-drawn accents
   - Reference for future content creation

---

## CSaaS Landing Page Complete Rebuild — Overture & Worklane (Jarrhey Session - Late Day)

### Context
Full rebuild of first 2 CSaaS landing pages to avoid AI template feel, apply 2026 design trends, and create human-crafted pages with real personality. Each product has unique visual language and experience.

### Overture — Complete Rebuild
**Experience:** "Documentary revelation" — warm, observational, builds curiosity

**Structure (5 sections):**
1. **Question** — Opens with intrigue, not a sales pitch
2. **Evidence** — Shows the problem with real examples
3. **Insight** — Reveals the product's unique perspective
4. **Experience** — Dashboard/product preview
5. **Ask** — CTA (waitlist signup)

**Visual Language:**
- Warm analog observatory theme
- Hand-drawn annotations
- Fraunces + IBM Plex fonts (NO Inter)
- Cream/warm backgrounds
- Aperture/lens imagery

**Signature Micro-interaction:** Lens focus effect

**Deployed:** Revision `overture-00050-n9p` at https://overtureinsights.com

### Worklane — Complete Rebuild
**Experience:** "Control room" — precise, operational, builds confidence

**Structure (4 sections):**
1. **Status Board** — Current state, live metrics
2. **Live Feed** — Activity stream, what's happening
3. **Route Map** — Process visualization
4. **Gate** — CTA (waitlist signup)

**Visual Language:**
- Traffic Control Center aesthetic
- Gate micro-interactions
- Neutral gray backgrounds
- DM Sans + IBM Plex Sans fonts
- Routing/flow imagery

**Signature Micro-interaction:** Gate swing animation

**Deployed:** Revision `worklane-00020-58k` at https://getworklane.com

### Key Decisions Made
- **Sites unified:** overture.landing.symph.co and overtureinsights.com = same content
- **No em dashes** in copy (per Jarrhey feedback)
- **No integration logos section** (removed per spec)
- **Pricing is product-specific** — NOT standardized across all 7 products
- **Each product standalone** — endorsed brands architecture ("[Product] by Symph"), not a bundled suite

### Thank You Pages
Created `/thanks.html` for both with appropriate animations matching visual language.

### Email Capture Flow
Form → PostHog tracking (`waitlist_signup` event with email property) → Redirect to `/thanks.html`

### Status at Session End
- ✅ Overture completely rebuilt and deployed
- ✅ Worklane completely rebuilt and deployed
- ⏳ Awaiting Jarrhey feedback on both
- 🔜 Remaining 5 products (Clocklane, Vector, Alignly, Encore, ContentVane) pending approval pattern

### Brand Source of Truth
https://assets.landing.symph.co/ — updated with all logos and assets


---

## Build Copilot UX Session (Jim — Evening)

### Key Changes Made

**1. Dev Mode vs Production Mode**
- Reverted to `next dev --turbopack` for hot reload (from `next start`)
- Hot reload = changes visible instantly without rebuild
- Production mode requires manual rebuild after code changes

**2. Caddy Auto-Fix**
- Added `ensureCaddyConfig()` to both `/api/apps/[slug]/start` AND `/api/apps/[slug]/dev`
- Fixes port mismatches between `caddy-ports.json` and Caddyfile automatically
- Prevents 502 errors from wrong port routing

**3. React Strict Mode Fix**
- React 18 Strict Mode runs effects twice (mount → unmount → remount)
- Was causing DELETE to fire during Strict Mode re-render, stopping dev server
- Fixed with refs: `isRealUnmountRef` and `devModeStartedRef`
- DELETE only fires on actual component unmount now

**4. Screenshot Analysis Improvement**
- Added explicit instructions when images attached to copilot messages
- System prompt now tells Claude to STOP and analyze images BEFORE coding
- Message includes: "⚠️ IMPORTANT: I've attached X screenshot(s)..."

**5. Session Staleness (30 min timeout)**
- Added `lastActivity` field to `CopilotSession`
- Sessions idle >30 min are deleted, fresh session created
- Prevents stale context from old sessions

**6. Rebuild Button**
- Added `/api/apps/[slug]/rebuild` endpoint
- Yellow rebuild button in UI for manual rebuild when needed
- More aggressive kill in rebuild (fuser -k, fuser -k -9)

### Key Files Modified
- `src/app/api/apps/[slug]/dev/route.ts` — Caddy auto-fix, turbopack flag
- `src/app/api/apps/[slug]/start/route.ts` — Caddy auto-fix
- `src/app/api/apps/[slug]/rebuild/route.ts` — NEW, build + restart
- `src/app/api/copilot/message/route.ts` — Screenshot analysis prompts
- `src/components/build/BuildWorkspace.tsx` — React Strict Mode fix, dev mode
- `src/lib/copilot/sessions.ts` — Session staleness, lastActivity

### Lessons Learned
- Always check Caddy config when apps show 502 (port mismatch common issue)
- React Strict Mode causes double effect execution — use refs to detect real unmount
- `next dev --turbopack` is faster than regular `next dev`
- Screenshots need explicit "ANALYZE THIS" instructions for Claude to use them

---

## CSaaS Logo Icon System — Final Decisions (Jarrhey Session - Late Night)

### Icon Specifications Locked

| Product | Icon Name | Description |
|---------|-----------|-------------|
| **Overture** | The Lens | Aperture segments with center dot (r="5") |
| **Worklane** | The Gate | Door frame + swinging panel + hinge |
| **Vector** | The Stack | Stacked blocks/shipping containers |
| **Clocklane** | The Tick | Checkmark with tally notch |
| **Alignly** | The Team | Trio of circles |
| **Encore** | The Portal | Layered planes with welcome dot |
| **ContentVane** | Direction Mark | Up/down arrows + center circle |

### Favicon Strategy
**ALL favicons must use colored backgrounds with white icons (not transparent)**

| Product | Background Color |
|---------|-----------------|
| Overture | #0891b2 (cyan) |
| Worklane | #9333EA (purple) |
| Alignly | #059669 (green) |
| Vector | #ea580c (orange) |
| Clocklane | #2563eb (blue) |
| ContentVane | #0d9488 (teal) |
| Encore | #4f46e5 (indigo) |

### Assets Updated
- Logo library rebuilt: https://assets.landing.symph.co/
- All 7 products have consistent icon + favicon exports
- ContentVane has additional export variants

---

## Worklane Landing Page Iterations (Jarrhey Critiques)

### Version History

**worklane-00028-j8f** — Drama spec implementation (6 items)
- Added status board section
- Live feed activity stream
- Route map visualization

**worklane-00029-p77** — Major overhaul
- Dark theme attempt
- Full viewport sections
- Interactive elements

**worklane-00031-4qt** — FINAL VERSION ✅
- **Reverted to LIGHT theme** (dark + bright dots caused dizziness/disorientation per Jarrhey)
- Clean flow lanes with single subtle bar (NOT scattered random particles)
- **Interactive Live Feed** — click to expand timeline, filter by status dropdown, action buttons
- **"Order out." text** must stay visible once it appears (progress > 0.5)

### Critical Learnings
- Worklane MUST be light theme — dark mode with motion causes physical discomfort
- Live Feed must be interactive, not passive watching
- Flow lanes need clarity — horizontal lanes, not visual chaos

---

## Alignly Landing Page — THE CIRCLE Interaction

### Deployed
- Initial redesign with THE CIRCLE signature interaction
- Design tokens: Primary #059669, Mint #ecfdf5, Warm White #FEFDFB

### Pending Fixes (Jarrhey Critique Doc)
Critique screenshots at `/home/aria/.openclaw/media/inbound/357dc976-*.png`

**Required Changes:**
1. Remove `<p class="faces__aside">(Just kidding. Sort of.)</p>` — awkward text
2. Hero CTA: Change from "Join us →" to product-focused language
3. Footer CTA: Change from "Join the team →" to product-focused language
4. Remove/replace Caveat handwritten font (same issue as Overture)
5. Enhance THE CIRCLE interaction with hover states
6. Warm up backgrounds

### Status
In progress — critique fixes pending

---

## Vector Logo Correction

**vector-icon.svg** and **vector-icon-white.svg** corrected to show:
- Stacked blocks icon (The Stack)
- NOT the old V-arrow design

Updated in `/home/aria/projects/logos-preview/assets/vector/svg/`

---

## Blocked Items

**ContentVane Firebase** — Project `symph-contentvane` doesn't exist
- Need to either create Firebase project or use Cloud Run
- Landing page code ready, deployment blocked

---

## Next Steps (Session End)

1. **Complete Alignly critique fixes** — highest priority
2. **Deploy Encore** to Cloud Run for favicon update
3. **Implement Vector drama additions** (6 items per spec)
4. **Resolve ContentVane hosting**
5. Verify all favicon changes visible on live domains
