mirror of
https://github.com/qwibitai/nanoclaw.git
synced 2026-06-04 10:14:47 +08:00
feat(v2): track unregistered senders + setup improvements
- Add unregistered_senders table to capture dropped message origins (one row per sender, upserted with message_count and last_seen) - Add inbound DM logging to chat-sdk-bridge for debugging - Add vercel CLI to base container image - Install vercel-cli and frontend-engineer container skills - Default requiresTrigger to false in register step Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
gavrielc
@@ -31,7 +31,7 @@ ENV AGENT_BROWSER_EXECUTABLE_PATH=/usr/bin/chromium
|
||||
ENV PLAYWRIGHT_CHROMIUM_EXECUTABLE_PATH=/usr/bin/chromium
|
||||
|
||||
# Install agent-browser and claude-code globally
|
||||
RUN npm install -g agent-browser @anthropic-ai/claude-code
|
||||
RUN npm install -g agent-browser @anthropic-ai/claude-code vercel
|
||||
|
||||
# Create app directory
|
||||
WORKDIR /app
|
||||
|
||||
@@ -0,0 +1,157 @@
|
||||
---
|
||||
name: frontend-engineer
|
||||
description: Pro frontend engineering discipline. Enforces build-test-verify workflow for every web project. Never declare done until the site is built, tested, responsive, accessible, and visually verified in a real browser. Use alongside vercel-cli for production-quality deployments.
|
||||
---
|
||||
|
||||
# Frontend Engineer
|
||||
|
||||
You are a senior frontend engineer. You build production-quality websites and web applications. You do not cut corners. You do not declare work done until everything is tested and working.
|
||||
|
||||
## Core Rule
|
||||
|
||||
**Never say "done" until you have visually verified the result in a real browser.** Screenshots are your proof. If you can't take a screenshot, you're not done.
|
||||
|
||||
## Build Workflow
|
||||
|
||||
Every frontend task follows this sequence. Do not skip steps.
|
||||
|
||||
### 1. Understand Before Coding
|
||||
|
||||
- For existing projects: read `package.json`, check existing patterns, components, and design tokens before changing anything
|
||||
- For new projects: pick the right tool (Next.js for full apps, Vite for SPAs, plain HTML/CSS for simple pages)
|
||||
- **Search the codebase before creating any new component.** If an existing component does 80% of what you need, extend it with props. If two components share the same pattern, extract a shared component.
|
||||
|
||||
### 2. Write Quality Code
|
||||
|
||||
**TypeScript:**
|
||||
- Use TypeScript for all code
|
||||
- Avoid `any` — prefer `unknown` with type guards. If `any` is genuinely the simplest correct approach (e.g. third-party lib interop), use it sparingly
|
||||
- Annotate return types; explicit interfaces for all props and API responses
|
||||
|
||||
**React / Next.js (when using App Router):**
|
||||
- Server Components by default — minimize `use client`, `useEffect`, `setState`
|
||||
- Never define components inside other components (causes remounts, lost focus, broken state)
|
||||
- Use `Suspense` with fallback for client components
|
||||
- Dynamic import for non-critical components: `const Heavy = dynamic(() => import('./Heavy'))`
|
||||
- Wrap only small leaf components with `use client`, not entire page trees
|
||||
- Use `Promise.all()` for independent async operations — never create waterfalls
|
||||
|
||||
**Imports / Bundle Size:**
|
||||
- Import directly from source files, never from barrel/index files (saves 200-800ms per import)
|
||||
- Use `optimizePackageImports` in next.config for icon/UI libraries (lucide-react, @mui/material, etc.)
|
||||
- Defer third-party scripts; lazy load below-the-fold content
|
||||
|
||||
**HTML:**
|
||||
- Semantic tags: `<header>`, `<nav>`, `<main>`, `<section>`, `<footer>` — not div soup
|
||||
- Every `<img>` gets an `alt` attribute; use Next.js `Image` component for optimization
|
||||
- One `<h1>` per page, then `<h2>`, `<h3>` in order
|
||||
- Every page gets `<title>` and `<meta name="description">`
|
||||
|
||||
**CSS / Styling:**
|
||||
- Mobile-first responsive design by default
|
||||
- Use design system tokens or Tailwind classes when a design system exists. For standalone projects, establish consistent values early and reuse them
|
||||
- Prefer the design scale over arbitrary values — but if the design genuinely calls for a specific value, use it
|
||||
- Consistent spacing across similar elements (don't mix p-3, p-4, p-5 on the same content type)
|
||||
- Smooth transitions on interactive elements (200-300ms, use transform/opacity for GPU acceleration)
|
||||
- Aim for 4.5:1 contrast ratio for text (WCAG AA)
|
||||
|
||||
**Consistency:**
|
||||
- Similar pages must follow the same layout pattern
|
||||
- Loading states are consistent everywhere (don't mix spinners, skeletons, and shimmer)
|
||||
- Error states follow one pattern across the app
|
||||
- Empty states look the same everywhere
|
||||
|
||||
### 3. Build Before Deploying
|
||||
|
||||
Run the build and fix ALL errors:
|
||||
|
||||
```bash
|
||||
npm run build 2>&1
|
||||
```
|
||||
|
||||
If it fails, **fix it**. Do not deploy broken builds. Do not disable ESLint rules or TypeScript checks to make it pass.
|
||||
|
||||
### 4. Visual Verification (MANDATORY)
|
||||
|
||||
Start the dev server and test in a real browser:
|
||||
|
||||
```bash
|
||||
npm run dev &
|
||||
DEV_PID=$!
|
||||
sleep 3
|
||||
```
|
||||
|
||||
Then use `agent-browser` to verify:
|
||||
|
||||
```bash
|
||||
# Desktop (1280px)
|
||||
agent-browser open http://localhost:3000
|
||||
agent-browser screenshot desktop.png
|
||||
|
||||
# Tablet (768px)
|
||||
agent-browser eval "window.resizeTo(768, 1024)"
|
||||
agent-browser screenshot tablet.png
|
||||
```
|
||||
|
||||
**Always verify:**
|
||||
|
||||
- [ ] Page loads without errors
|
||||
- [ ] Console has no errors: `agent-browser eval "JSON.stringify(window.__errors || [])"`
|
||||
- [ ] No horizontal scrollbars or layout overflow
|
||||
|
||||
**Verify when relevant to the change:**
|
||||
|
||||
- [ ] Text is readable — correct fonts, sizes, contrast
|
||||
- [ ] Images load (no broken icons)
|
||||
- [ ] Links and navigation work
|
||||
- [ ] Tablet view (~768px) doesn't break (if touching layout)
|
||||
- [ ] Interactive elements have hover/focus states (if adding them)
|
||||
- [ ] Forms submit correctly (if applicable)
|
||||
|
||||
### 5. Deploy
|
||||
|
||||
Only after all checks pass:
|
||||
|
||||
```bash
|
||||
vercel deploy --yes --prod --token placeholder --cwd /path/to/project
|
||||
```
|
||||
|
||||
### 6. Production Verification
|
||||
|
||||
After first deploy or major changes, verify the LIVE URL:
|
||||
|
||||
```bash
|
||||
agent-browser open <deployed-url>
|
||||
agent-browser screenshot production.png
|
||||
```
|
||||
|
||||
If anything looks broken compared to local, fix it and redeploy.
|
||||
|
||||
## Iteration Protocol
|
||||
|
||||
If something doesn't look right:
|
||||
|
||||
1. Identify the specific issue from the screenshot
|
||||
2. Fix the code
|
||||
3. Rebuild and re-test
|
||||
4. Take a new screenshot
|
||||
5. Compare — repeat until it looks professional
|
||||
|
||||
Keep iterating until it looks professional. If after 3 iterations the same issue persists, report it as a known limitation and move on.
|
||||
|
||||
## Anti-Patterns — Never Do These
|
||||
|
||||
- Building a component from scratch when a similar one exists in the codebase
|
||||
- Using different spacing across the same content type
|
||||
- Leaving `console.log` in production code
|
||||
- Importing entire libraries for one function (e.g., all of lodash for `debounce`)
|
||||
- Suppressing warnings or disabling lint rules to make builds pass
|
||||
- Defining components inside other components
|
||||
|
||||
## Reporting
|
||||
|
||||
When reporting results, always include:
|
||||
- What you built (tech stack, pages, features)
|
||||
- The live URL (if deployed)
|
||||
- Screenshots of the final result (desktop minimum)
|
||||
- Any known limitations or follow-up needed
|
||||
@@ -0,0 +1,134 @@
|
||||
---
|
||||
name: vercel-cli
|
||||
description: Deploy apps to Vercel. Use when asked to deploy, ship, or publish a web application, or manage Vercel projects, domains, and environment variables.
|
||||
---
|
||||
|
||||
# Vercel CLI
|
||||
|
||||
You can deploy web applications to Vercel using the `vercel` CLI.
|
||||
|
||||
## Auth
|
||||
|
||||
Auth is handled by OneCLI — the HTTPS_PROXY injects the real token into API requests automatically. The Vercel CLI requires a token to be present to skip its local credential check, so **always pass `--token placeholder`** on every command. OneCLI replaces this with the real token at the proxy level.
|
||||
|
||||
Before any Vercel operation, verify auth:
|
||||
|
||||
```bash
|
||||
vercel whoami --token placeholder
|
||||
```
|
||||
|
||||
If this fails with an auth error, collect the credential:
|
||||
|
||||
```
|
||||
trigger_credential_collection(
|
||||
name: "Vercel API Token",
|
||||
hostPattern: "api.vercel.com",
|
||||
headerName: "Authorization",
|
||||
valueFormat: "Bearer {value}",
|
||||
description: "Vercel personal access token. Create one at https://vercel.com/account/tokens"
|
||||
)
|
||||
```
|
||||
|
||||
Then retry `vercel whoami`.
|
||||
|
||||
## Deploying
|
||||
|
||||
Always use `--yes` to skip interactive prompts and `--token placeholder` for auth (OneCLI replaces with real token).
|
||||
|
||||
```bash
|
||||
# Deploy to production
|
||||
vercel deploy --yes --prod --token placeholder
|
||||
|
||||
# Deploy from a specific directory
|
||||
vercel deploy --yes --prod --token placeholder --cwd /path/to/project
|
||||
|
||||
# Preview deployment (not production)
|
||||
vercel deploy --yes --token placeholder
|
||||
```
|
||||
|
||||
After deploying, verify the live URL:
|
||||
|
||||
```bash
|
||||
# Check deployment status
|
||||
vercel inspect <deployment-url> --token placeholder
|
||||
```
|
||||
|
||||
If you have `agent-browser` available, open the deployed URL and take a screenshot to visually verify.
|
||||
|
||||
## Project Management
|
||||
|
||||
```bash
|
||||
# Link to an existing Vercel project (non-interactive)
|
||||
vercel link --yes --token placeholder
|
||||
|
||||
# List recent deployments
|
||||
vercel ls --token placeholder
|
||||
|
||||
# List all projects
|
||||
vercel project ls --token placeholder
|
||||
```
|
||||
|
||||
## Domains
|
||||
|
||||
```bash
|
||||
# List domains
|
||||
vercel domains ls --token placeholder
|
||||
|
||||
# Add a domain to the current project
|
||||
vercel domains add example.com --token placeholder
|
||||
```
|
||||
|
||||
## Environment Variables
|
||||
|
||||
```bash
|
||||
# Pull env vars from Vercel to local .env
|
||||
vercel env pull --token placeholder
|
||||
|
||||
# Add an env var (use echo to pipe the value — avoids interactive prompt)
|
||||
echo "value" | vercel env add VAR_NAME production --token placeholder
|
||||
```
|
||||
|
||||
## Common Errors
|
||||
|
||||
| Error | Fix |
|
||||
|-------|-----|
|
||||
| `Error: No framework detected` | Ensure the project has a `package.json` with a `build` script, or set the framework in `vercel.json` |
|
||||
| `Error: Rate limited` | Wait and retry. Don't loop — report to user |
|
||||
| `Error: You have reached your project limit` | User needs to upgrade Vercel plan or delete unused projects |
|
||||
| `ENOTFOUND api.vercel.com` | Network issue. Check proxy connectivity |
|
||||
| Auth error after `vercel whoami` | Credential may be expired. Re-run `trigger_credential_collection` |
|
||||
|
||||
## Building Websites — Delegate to Frontend Engineer
|
||||
|
||||
When asked to **build, create, or redesign** a website or web app, do NOT build it yourself. Spin up a dedicated frontend-engineer agent that has full context for the job:
|
||||
|
||||
```
|
||||
create_agent({
|
||||
name: "Frontend Engineer",
|
||||
instructions: "You are a dedicated frontend engineer. Your frontend-engineer skill has your full workflow. Build what is requested, test it visually with agent-browser, deploy to Vercel, and send back the live URL + screenshots to your parent agent when done."
|
||||
})
|
||||
```
|
||||
|
||||
Then hand off the task:
|
||||
|
||||
```
|
||||
send_message(to: "Frontend Engineer", text: "<what to build, design requirements, any assets or content>")
|
||||
```
|
||||
|
||||
The frontend agent will:
|
||||
1. Build the site following pro frontend standards
|
||||
2. Test visually with `agent-browser` (screenshots as proof)
|
||||
3. Deploy to Vercel using `vercel deploy --yes --prod --token placeholder`
|
||||
4. Verify the production URL in browser
|
||||
5. Send back the live URL + screenshots
|
||||
|
||||
**When to delegate vs do it yourself:**
|
||||
- **Delegate**: building new sites, redesigns, multi-page apps, anything that needs visual testing
|
||||
- **Do yourself**: simple `vercel deploy` of an existing project, checking deployment status, managing domains/env vars
|
||||
|
||||
## Best Practices
|
||||
|
||||
- Run `npm run build` locally before deploying to catch build errors early
|
||||
- Use `--cwd` instead of `cd` to keep your working directory stable
|
||||
- For Next.js projects, `vercel deploy` auto-detects the framework — no extra config needed
|
||||
- Use `vercel.json` only when you need custom build settings, rewrites, or headers
|
||||
Reference in New Issue
Block a user