Ccr 977354ed 36r1do

.github/workflows/ci.yml

@@ -17,7 +17,7 @@ jobs:
 
       - uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: 24
           cache: pnpm
 
       - run: pnpm install --frozen-lockfile

.gitignore

@@ -28,6 +28,24 @@ CLAUDE.local.md
 # Cursor
 .cursor/
 
+# Kayley data (symlinked/generated — lives in Kayley_Cowork + ~/.kayley-journal)
+apps/webuiapps/public/kayley-selfies
+apps/webuiapps/public/kayley-selfies/
+apps/webuiapps/public/kayley-selfies-index.json
+apps/webuiapps/public/kayley-moments
+apps/webuiapps/public/kayley-moments/
+apps/webuiapps/public/kayley-moments-index.json
+apps/webuiapps/public/kayley-journal
+apps/webuiapps/public/kayley-journal/
+apps/webuiapps/public/kayley-journal-index.json
+apps/webuiapps/public/kayley-story
+apps/webuiapps/public/kayley-story/
+apps/webuiapps/public/kayley-weeks-index.json
+apps/webuiapps/public/kayley-promises-index.json
+apps/webuiapps/public/kayley-storylines-index.json
+apps/webuiapps/public/kayley-email-index.json
+apps/webuiapps/public/kayley-twitter-feed.json
+
 # Internal CI/CD & Scripts
 scripts/
 .gitlab-ci.yml

AGENTS.md

@@ -0,0 +1,170 @@
+# VibeApp Development Guide
+
+An iframe-based micro-frontend VibeApp system (React + Cloud NAS).
+
+## Quick Start
+
+Create a new app: `/vibe {AppName} {Description}`
+Modify an existing app: `/vibe {AppName} {ChangeDescription}`
+Resume an existing workflow: `/vibe {AppName}`
+Re-run from a specific stage: `/vibe {AppName} --from=04-codegen`
+
+Creation mode runs 6 stages: Requirement Analysis -> Architecture Design -> Task Planning -> Code Generation -> Asset Generation -> Project Integration.
+Change mode runs 4 stages: Change Impact Analysis -> Change Task Planning -> Change Code Implementation -> Change Verification.
+You can also enter a requirement description directly, and the system will automatically detect and trigger the corresponding mode.
+
+## Tech Stack
+
+- **Framework**: React 18 + TypeScript + Vite
+- **Styling**: Tailwind CSS (H5 Pages), CSS Modules (Components)
+- **Icons**: Lucide React (No Emoji)
+- **Storage**: Cloud NAS via `@/lib` (Repository Pattern)
+- **Communication**: `postMessage` via `@/lib`
+
+## File Structure
+
+```text
+src/pages/{AppName}/
+├── components/    # UI Components
+├── pages/         # Sub-pages (H5 Templates)
+├── data/          # Seed Data (JSON only)
+├── assets/        # Generated Image Assets
+├── mock/          # Dev Mock Data (TypeScript)
+├── store/         # Context/Reducer
+├── actions/       # Action Definitions
+├── styles/        # CSS Variables
+├── i18n/          # en.ts + zh.ts
+├── meta/
+│   ├── meta_cn/   # Chinese: guide.md + meta.yaml
+│   └── meta_en/   # English: guide.md + meta.yaml
+├── index.tsx      # Entry (lifecycle reports here only)
+├── index.module.scss
+└── types.ts
+```
+
+## Workflow Structure
+
+```text
+.Codex/
+├── commands/vibe.md           # Single entry orchestrator
+├── workflow/
+│   ├── stages/                # Stage definitions (loaded on-demand)
+│   │   ├── 01-analysis.md          # Create: Requirement Analysis
+│   │   ├── 02-architecture.md      # Create: Architecture Design
+│   │   ├── 03-planning.md          # Create: Task Planning
+│   │   ├── 04-codegen.md           # Create: Code Generation
+│   │   ├── 05-assets.md            # Create: Asset Generation
+│   │   ├── 06-integration.md       # Create: Project Integration
+│   │   ├── 01-change-analysis.md       # Change: Impact Analysis
+│   │   ├── 02-change-planning.md       # Change: Task Planning
+│   │   ├── 03-change-codegen.md        # Change: Code Implementation
+│   │   └── 04-change-verification.md   # Change: Verification
+│   └── rules/                 # Stage-specific rules (loaded on-demand)
+│       ├── app-definition.md
+│       ├── responsive-layout.md
+│       ├── guide-md.md
+│       └── meta-yaml.md
+├── rules/                     # Global rules (always loaded)
+│   ├── data-interaction.md
+│   ├── design-tokens.md
+│   ├── concurrent-execution.md
+│   └── post-task-check.md
+└── thinking/{AppName}/        # Per-app workflow state & artifacts
+    ├── workflow.json
+    ├── 01-requirement-analysis.md
+    ├── 02-architecture-design.md
+    ├── 03-task-planning.md
+    ├── 04-code-generation.md
+    └── outputs/
+        ├── requirement-breakdown.json
+        ├── solution-design.json
+        └── workflow-todolist.json
+```
+
+## Rules
+
+The following global rules in `.Codex/rules/` are mandatory constraints across all stages:
+
+| Rule File | Description |
+|---|---|
+| `data-interaction.md` | Data interaction & NAS storage specification |
+| `design-tokens.md` | Design token system & usage guidelines |
+| `concurrent-execution.md` | Concurrent execution & task scheduling rules |
+| `post-task-check.md` | Post-task completion checklist |
+
+Stage-specific rules are in `.Codex/workflow/rules/`, loaded on-demand by `/vibe`.
+
+## Auto Workflow Trigger
+
+When the user enters a requirement description directly (instead of using the `/vibe` command), automatically execute the workflow defined in `.Codex/commands/vibe.md`.
+
+### Creating a New App
+
+Detection rules:
+
+- The user's message contains an explicit new app requirement (e.g., "build a XX app", "I need a XX", "help me develop XX")
+- Automatically extract AppName (PascalCase format) from the requirement; Description is the user's full requirement text
+- Equivalent to executing `/vibe {AppName} {Description}`
+
+### Modifying an Existing App
+
+Detection rules:
+
+- The user's message explicitly targets an existing App with a change request (e.g., "add lyrics feature to MusicApp", "MusicApp needs to support XX")
+- Also includes cases where the App name is not specified but can be inferred from context (e.g., there is only one App, and the user says "add a lyrics display feature")
+- Automatically identify AppName; Description is the change requirement text
+- Equivalent to executing `/vibe {AppName} {ChangeDescription}` (vibe.md's mode detection logic automatically enters change mode)
+
+### Cases That Do NOT Trigger
+
+- The user is clearly asking questions, chatting, or making fine-grained code modifications (e.g., "change this button color to red")
+- The user used the `/vibe` command (already handled by the command mechanism)
+- The user requests resuming or re-running from a specific stage (must explicitly use `/vibe {AppName}` or `/vibe {AppName} --from=XX`)
+
+## Testing
+
+### Unit Tests (Vitest)
+
+Run from the webuiapps package:
+
+```bash
+cd apps/webuiapps && pnpm test        # single run
+cd apps/webuiapps && pnpm test:watch  # watch mode
+```
+
+### E2E Tests (Playwright)
+
+Run from the repo root. The dev server starts automatically.
+
+```bash
+pnpm test:e2e          # headless, Chromium only
+pnpm test:e2e:ui       # interactive UI mode
+```
+
+- Config: `playwright.config.ts` (root)
+- Tests: `e2e/` directory
+- The web server (`pnpm dev`) is auto-launched on port 3000 and reused if already running.
+- Only Chromium is configured by default; add projects in `playwright.config.ts` for Firefox/WebKit.
+- After completing code changes that affect UI or routing, run `pnpm test:e2e` and report pass/fail.
+
+## Task completion quality bar (mandatory)
+
+Before declaring a task complete, agents must satisfy all of the following:
+
+1. **Unit tests must pass** for the affected package(s).
+   - For `apps/webuiapps`, run the relevant Vitest command(s), for example:
+     ```bash
+     cd apps/webuiapps && pnpm test
+     cd apps/webuiapps && pnpm test:coverage
+     ```
+2. **Code coverage must be > 90%** for the code touched by the task.
+   - If current config thresholds are lower, do not treat that as sufficient.
+   - Add or improve tests until the changed area exceeds 90% coverage, or explicitly report why that is not yet achievable.
+3. **E2E coverage must be complete for impacted user flows.**
+   - Do not stop at smoke tests if the change affects real behavior.
+   - Cover the primary user path, key state transitions, and at least one meaningful assertion of successful behavior.
+   - If UI behavior changes, prefer stable selectors (`data-testid`) over fragile class-name/text-only selectors.
+4. **Report exact validation commands and results** in the final handoff.
+   - Include what passed, what failed, and any known gaps.
+
+Minimum expectation: no task is "done" if unit tests are red, coverage on changed code is below 90%, or impacted E2E coverage is missing/incomplete.

PROBLEM.txt

@@ -0,0 +1,48 @@
+PROBLEM:
+A tech billionaire dies in his locked study at midnight. Five guests. One killer.
+
+Victim: Marcus Vale — Founder / CEO of Lumin
+
+
+SUSPECTS:
+
+Priya Shah Co-founder, ex-girlfriend 
+Pushed out of the cap table last month. Showed up anyway.
+
+ACTIONS: Dossier - Interrogate
+
+Jake Ostrowski Head of security
+Ex-Marine. The one who found the body. Master keycard.
+
+ACTIONS: Dossier - Interrogate
+
+Dr. Mira Chen Marcus's therapist
+Here as "a friend." Carrying a small leather case she won't open.
+
+ACTIONS: Dossier - Interrogate
+
+Cole Reyes Investigative journalist (uninvited)
+Blocked from every press list. Got in wearing someone else's badge.
+
+ACTIONS: Dossier - Interrogate
+
+
+Aiden Park Lumin CTO
+Marcus's oldest friend. The other master-keycard holder.
+
+ACTIONS: Dossier - Interrogate
+
+
+LOCATIONS TO SEARCH
+
+Marcus's locked study
+Where the body was found — second floor, door bolted from the inside.
+
+Second-floor balcony 
+Open to the cold air. Guests slipped out here to smoke and scheme.
+
+The main bar
+Downstairs. Loud. Everyone passed through at least once.
+
+Upstairs guest bathroom
+Quieter than the downstairs line. Anyone could have excused themselves.

apps/webuiapps/Dockerfile

@@ -1,4 +1,4 @@
-FROM node:20-alpine as builder
+FROM node:24-alpine as builder
 
 ARG ENV
 ARG SENTRY_AUTH_TOKEN

apps/webuiapps/README.md

@@ -2,6 +2,18 @@
 
 This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
 
+## YouTube API key (for YouTubeApp search)
+
+`YouTubeApp` can use the official YouTube Data API v3 to return real search results.
+
+Create `apps/webuiapps/.env.local` (not committed) with:
+
+```bash
+VITE_YOUTUBE_API_KEY=your_api_key_here
+```
+
+Restart the dev server after adding/changing the key.
+
 Currently, two official plugins are available:
 
 - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md)

apps/webuiapps/package.json

@@ -7,25 +7,28 @@
   "scripts": {
     "dev": "vite",
     "debug": "vite --debug",
-    "build:test": "NODE_ENV=test vite build",
-    "build": "NODE_ENV=production vite build",
-    "build:analyze": "NODE_ENV=production ANALYZE=analyze vite build",
+    "build:test": "cross-env NODE_ENV=test vite build",
+    "build": "cross-env NODE_ENV=production vite build",
+    "build:analyze": "cross-env NODE_ENV=production ANALYZE=analyze vite build",
     "preview": "vite preview",
-    "test": "vitest run",
-    "test:watch": "vitest",
-    "test:coverage": "vitest run --coverage"
+    "test": "..\\\\..\\\\node_modules\\\\.bin\\\\vitest.cmd run",
+    "test:watch": "..\\\\..\\\\node_modules\\\\.bin\\\\vitest.cmd",
+    "test:coverage": "..\\\\..\\\\node_modules\\\\.bin\\\\vitest.cmd run --coverage"
   },
   "dependencies": {
     "framer-motion": "^12.34.0",
     "jszip": "^3.10.1",
     "react-markdown": "^10.1.0",
+    "react-rnd": "^10.5.3",
     "rehype-raw": "^7.0.0",
-    "remark-gfm": "^4.0.1"
+    "remark-gfm": "^4.0.1",
+    "youtube-search-api": "^2.0.1"
   },
   "devDependencies": {
     "@anthropic-ai/claude-agent-sdk": "^0.2.72",
     "@vitest/coverage-istanbul": "^1.6.1",
     "@vitest/coverage-v8": "^1.6.1",
+    "cross-env": "^10.1.0",
     "happy-dom": "^14.0.0",
     "jsdom": "^25.0.0",
     "vitest": "^1.6.1"

apps/webuiapps/src/common.scss

@@ -4,4 +4,5 @@ body,
   height: 100%;
   margin: 0;
   padding: 0;
+  overflow: hidden;
 }

apps/webuiapps/src/components/AppWindow/index.module.scss

@@ -1,5 +1,12 @@
 .window {
   position: absolute;
+  min-width: 300px;
+  min-height: 200px;
+}
+
+.windowInner {
+  width: 100%;
+  height: 100%;
   border-radius: 10px;
   overflow: hidden;
   background: var(--bg-2, #1c1d20);
@@ -8,8 +15,6 @@
     0 0 0 1px rgba(255, 255, 255, 0.08);
   display: flex;
   flex-direction: column;
-  min-width: 300px;
-  min-height: 200px;
 }
 
 .titleBar {
@@ -86,27 +91,6 @@
   }
 }
 
-.resizeHandle {
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  width: 16px;
-  height: 16px;
-  cursor: nwse-resize;
-  z-index: 10;
-
-  &::after {
-    content: '';
-    position: absolute;
-    right: 3px;
-    bottom: 3px;
-    width: 8px;
-    height: 8px;
-    border-right: 2px solid rgba(255, 255, 255, 0.3);
-    border-bottom: 2px solid rgba(255, 255, 255, 0.3);
-  }
-}
-
 .loading {
   display: flex;
   align-items: center;