From 39d2af998185fc4d206d9ac58c03c06ce79ff3fb Mon Sep 17 00:00:00 2001
From: gavrielc <gabicohen22@yahoo.com>
Date: Thu, 16 Apr 2026 12:58:40 +0300
Subject: [PATCH] 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>
---
 container/Dockerfile                        |   2 +-
 container/skills/frontend-engineer/SKILL.md | 157 ++++++++++++++++++++
 container/skills/vercel-cli/SKILL.md        | 134 +++++++++++++++++
 setup/register.ts                           |   2 +-
 src/channels/chat-sdk-bridge.ts             |   1 +
 src/db/dropped-messages.ts                  |  44 ++++++
 src/db/migrations/008-dropped-messages.ts   |  27 ++++
 src/db/migrations/index.ts                  |   3 +-
 src/router.ts                               |  48 +++++-
 9 files changed, 412 insertions(+), 6 deletions(-)
 create mode 100644 container/skills/frontend-engineer/SKILL.md
 create mode 100644 container/skills/vercel-cli/SKILL.md
 create mode 100644 src/db/dropped-messages.ts
 create mode 100644 src/db/migrations/008-dropped-messages.ts

diff --git a/container/Dockerfile b/container/Dockerfile
index 32ae1a0..32ce0b9 100644
--- a/container/Dockerfile
+++ b/container/Dockerfile
@@ -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
diff --git a/container/skills/frontend-engineer/SKILL.md b/container/skills/frontend-engineer/SKILL.md
new file mode 100644
index 0000000..5289ad7
--- /dev/null
+++ b/container/skills/frontend-engineer/SKILL.md
@@ -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
diff --git a/container/skills/vercel-cli/SKILL.md b/container/skills/vercel-cli/SKILL.md
new file mode 100644
index 0000000..5e40b52
--- /dev/null
+++ b/container/skills/vercel-cli/SKILL.md
@@ -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
diff --git a/setup/register.ts b/setup/register.ts
index 80fccf4..a308add 100644
--- a/setup/register.ts
+++ b/setup/register.ts
@@ -49,7 +49,7 @@ function parseArgs(args: string[]): RegisterArgs {
     trigger: '',
     folder: '',
     channel: 'discord',
-    requiresTrigger: true,
+    requiresTrigger: false,
     assistantName: 'Andy',
     sessionMode: 'shared',
   };
diff --git a/src/channels/chat-sdk-bridge.ts b/src/channels/chat-sdk-bridge.ts
index ed3a781..ef35945 100644
--- a/src/channels/chat-sdk-bridge.ts
+++ b/src/channels/chat-sdk-bridge.ts
@@ -178,6 +178,7 @@ export function createChatSdkBridge(config: ChatSdkBridgeConfig): ChannelAdapter
       // DMs — always forward + subscribe
       chat.onDirectMessage(async (thread, message) => {
         const channelId = adapter.channelIdFromThreadId(thread.id);
+        log.info('Inbound DM received', { adapter: adapter.name, channelId, sender: (message.author as any)?.fullName ?? (message.author as any)?.userId ?? 'unknown', threadId: thread.id });
         await setupConfig.onInbound(channelId, null, await messageToInbound(message));
         await thread.subscribe();
       });
diff --git a/src/db/dropped-messages.ts b/src/db/dropped-messages.ts
new file mode 100644
index 0000000..ce6c923
--- /dev/null
+++ b/src/db/dropped-messages.ts
@@ -0,0 +1,44 @@
+import { getDb } from './connection.js';
+
+export interface UnregisteredSender {
+  channel_type: string;
+  platform_id: string;
+  user_id: string | null;
+  sender_name: string | null;
+  reason: string;
+  messaging_group_id: string | null;
+  agent_group_id: string | null;
+  message_count: number;
+  first_seen: string;
+  last_seen: string;
+}
+
+export function recordDroppedMessage(msg: {
+  channel_type: string;
+  platform_id: string;
+  user_id: string | null;
+  sender_name: string | null;
+  reason: string;
+  messaging_group_id: string | null;
+  agent_group_id: string | null;
+}): void {
+  const now = new Date().toISOString();
+  getDb()
+    .prepare(
+      `INSERT INTO unregistered_senders (channel_type, platform_id, user_id, sender_name, reason, messaging_group_id, agent_group_id, message_count, first_seen, last_seen)
+       VALUES (@channel_type, @platform_id, @user_id, @sender_name, @reason, @messaging_group_id, @agent_group_id, 1, @now, @now)
+       ON CONFLICT (channel_type, platform_id) DO UPDATE SET
+         user_id = COALESCE(excluded.user_id, unregistered_senders.user_id),
+         sender_name = COALESCE(excluded.sender_name, unregistered_senders.sender_name),
+         reason = excluded.reason,
+         message_count = unregistered_senders.message_count + 1,
+         last_seen = excluded.last_seen`,
+    )
+    .run({ ...msg, now });
+}
+
+export function getUnregisteredSenders(limit = 50): UnregisteredSender[] {
+  return getDb()
+    .prepare('SELECT * FROM unregistered_senders ORDER BY last_seen DESC LIMIT ?')
+    .all(limit) as UnregisteredSender[];
+}
diff --git a/src/db/migrations/008-dropped-messages.ts b/src/db/migrations/008-dropped-messages.ts
new file mode 100644
index 0000000..ac9c17c
--- /dev/null
+++ b/src/db/migrations/008-dropped-messages.ts
@@ -0,0 +1,27 @@
+import type Database from 'better-sqlite3';
+import type { Migration } from './index.js';
+
+export const migration008: Migration = {
+  version: 8,
+  name: 'dropped-messages',
+  up: (db: Database.Database) => {
+    db.exec(`
+      CREATE TABLE IF NOT EXISTS unregistered_senders (
+        channel_type    TEXT NOT NULL,
+        platform_id     TEXT NOT NULL,
+        user_id         TEXT,
+        sender_name     TEXT,
+        reason          TEXT NOT NULL,
+        messaging_group_id TEXT,
+        agent_group_id  TEXT,
+        message_count   INTEGER NOT NULL DEFAULT 1,
+        first_seen      TEXT NOT NULL,
+        last_seen       TEXT NOT NULL,
+        PRIMARY KEY (channel_type, platform_id)
+      );
+
+      CREATE INDEX IF NOT EXISTS idx_unregistered_senders_last_seen
+        ON unregistered_senders(last_seen);
+    `);
+  },
+};
diff --git a/src/db/migrations/index.ts b/src/db/migrations/index.ts
index a6fdea5..09412e1 100644
--- a/src/db/migrations/index.ts
+++ b/src/db/migrations/index.ts
@@ -7,6 +7,7 @@ import { migration003 } from './003-pending-approvals.js';
 import { migration004 } from './004-agent-destinations.js';
 import { migration005 } from './005-pending-credentials.js';
 import { migration007 } from './007-pending-approvals-title-options.js';
+import { migration008 } from './008-dropped-messages.js';
 
 export interface Migration {
   version: number;
@@ -14,7 +15,7 @@ export interface Migration {
   up: (db: Database.Database) => void;
 }
 
-const migrations: Migration[] = [migration001, migration002, migration003, migration004, migration005, migration007];
+const migrations: Migration[] = [migration001, migration002, migration003, migration004, migration005, migration007, migration008];
 
 export function runMigrations(db: Database.Database): void {
   db.exec(`
diff --git a/src/router.ts b/src/router.ts
index 9cd8e63..23504c9 100644
--- a/src/router.ts
+++ b/src/router.ts
@@ -26,6 +26,7 @@ import { log } from './log.js';
 import { resolveSession, writeSessionMessage } from './session-manager.js';
 import { wakeContainer } from './container-runner.js';
 import { getSession } from './db/sessions.js';
+import { recordDroppedMessage } from './db/dropped-messages.js';
 import type { MessagingGroup, MessagingGroupAgent } from './types.js';
 
 function generateId(): string {
@@ -94,6 +95,16 @@ export async function routeInbound(event: InboundEvent): Promise<void> {
       channelType: event.channelType,
       platformId: event.platformId,
     });
+    const parsed = safeParseContent(event.message.content);
+    recordDroppedMessage({
+      channel_type: event.channelType,
+      platform_id: event.platformId,
+      user_id: parsed.senderId ?? null,
+      sender_name: parsed.sender ?? null,
+      reason: 'no_agent_wired',
+      messaging_group_id: mg.id,
+      agent_group_id: null,
+    });
     return;
   }
 
@@ -104,6 +115,16 @@ export async function routeInbound(event: InboundEvent): Promise<void> {
       messagingGroupId: mg.id,
       channelType: event.channelType,
     });
+    const parsed = safeParseContent(event.message.content);
+    recordDroppedMessage({
+      channel_type: event.channelType,
+      platform_id: event.platformId,
+      user_id: parsed.senderId ?? null,
+      sender_name: parsed.sender ?? null,
+      reason: 'no_trigger_match',
+      messaging_group_id: mg.id,
+      agent_group_id: null,
+    });
     return;
   }
 
@@ -111,7 +132,7 @@ export async function routeInbound(event: InboundEvent): Promise<void> {
   if (mg.unknown_sender_policy !== 'public') {
     const gate = enforceAccess(userId, match.agent_group_id);
     if (!gate.allowed) {
-      handleUnknownSender(mg, userId, match.agent_group_id, gate.reason);
+      handleUnknownSender(mg, userId, match.agent_group_id, gate.reason, event);
       return;
     }
   }
@@ -239,7 +260,19 @@ function handleUnknownSender(
   userId: string | null,
   agentGroupId: string,
   accessReason: string,
+  event: InboundEvent,
 ): void {
+  const parsed = safeParseContent(event.message.content);
+  const dropRecord = {
+    channel_type: event.channelType,
+    platform_id: event.platformId,
+    user_id: userId,
+    sender_name: parsed.sender ?? null,
+    reason: `unknown_sender_${mg.unknown_sender_policy}`,
+    messaging_group_id: mg.id,
+    agent_group_id: agentGroupId,
+  };
+
   // In 'strict' mode we just drop. In 'request_approval' mode we log and
   // queue an approval to add the sender as a member — the approval flow
   // itself is a follow-up (needs an action kind like `add_group_member`).
@@ -250,18 +283,18 @@ function handleUnknownSender(
       userId,
       accessReason,
     });
+    recordDroppedMessage(dropRecord);
     return;
   }
 
   if (mg.unknown_sender_policy === 'request_approval') {
-    // Placeholder: drop for now but log as a request. Follow-up wires this
-    // into the approval flow (request admin-of-group / owner to add user).
     log.info('MESSAGE DROPPED — unknown sender (approval flow TODO)', {
       messagingGroupId: mg.id,
       agentGroupId,
       userId,
       accessReason,
     });
+    recordDroppedMessage(dropRecord);
     return;
   }
 
@@ -269,3 +302,12 @@ function handleUnknownSender(
   // Ensure the membership invariant isn't in an odd state.
   void isMember;
 }
+
+function safeParseContent(raw: string): { text?: string; sender?: string; senderId?: string } {
+  try {
+    return JSON.parse(raw);
+  } catch {
+    return { text: raw };
+  }
+}
+