feat: Kamal production deployment with CI/CD

.agents/skills/ui-preview/SKILL.md

@@ -0,0 +1,157 @@
+---
+name: ui-preview
+description:
+  'Preview and screenshot local dev servers and storybooks. Use when asked to
+  view UI components, take screenshots of storybooks, or inspect the web/server
+  apps.'
+metadata:
+  version: '1'
+---
+
+# UI Preview Skill
+
+Preview local dev servers and storybooks using Chrome DevTools.
+
+## Available Tools
+
+- `navigate_page` - Navigate to a URL
+- `take_screenshot` - Capture a screenshot of the current page
+- `new_page` - Open a new browser tab
+- `press_key` - Press keyboard keys (e.g., scrolling with PageDown, End)
+- `evaluate_script` - Run JavaScript on the page
+
+## Workflow
+
+1. **Navigate** to the target URL using `navigate_page`
+2. **Screenshot** the page using `take_screenshot`
+3. **Analyze** captured screenshots with `look_at` for visual analysis
+
+## Local Dev URLs
+
+Check `.amp/dev-environment.txt` for the running URLs (defaults:
+web=http://localhost:7001, server=https://localhost:7002).
+
+| Service           | Path       |
+| ----------------- | ---------- |
+| Web dev server    | /          |
+| Server dev server | /          |
+| Webview storybook | /storybook |
+| Server storybook  | /storybook |
+
+## Storybooks
+
+Access a specific story directly using the hash: `/storybook#${story-title}`
+
+The story title is derived from the filename: `handoff-story.svelte` →
+`#handoff-tool`
+
+### Webview Storybook (localhost:7001)
+
+Components for the VS Code extension webview UI.
+
+**Thread Components:**
+
+- `#thread` - Full thread view
+- `#streaming-thread` - Thread with streaming content
+- `#scrollable-thread` - Thread with scroll behavior
+- `#thread-reply-area` - Message input area
+- `#thread-status` - Thread status indicators
+- `#thread-summary` - Thread summary view
+- `#thread-hints` - Thread hint suggestions
+- `#thread-environment-input` - Environment input
+
+**Tool Calls:**
+
+- `#bash` - Bash tool output
+- `#edit-file` - File edit diffs
+- `#create-file` - File creation
+- `#read` - File read output
+- `#grep` - Search results
+- `#glob` - File glob results
+- `#handoff-tool` - Handoff tool states
+- `#mermaid` - Diagram rendering
+- `#oracle-tool` - Oracle tool output
+- `#task-tool` - Task tool output
+- `#web-search` - Web search results
+
+**Editor & Input:**
+
+- `#prompt-editor` - Message input editor
+- `#mention-menu` - @mention autocomplete
+- `#combobox` - Combobox component
+- `#agent-mode-selector` - Agent mode picker
+
+**Diff Viewer:**
+
+- `#diff-viewer` - Side-by-side diff
+- `#diff-display` - Inline diff display
+- `#unified-diff` - Unified diff format
+
+**Settings:**
+
+- `#settings-page` - Settings page
+- `#settings-error-modal` - Error modal
+- `#sign-in-page` - Authentication page
+
+**Layout:**
+
+- `#layout-navbar` - Navigation bar
+- `#current-thread-navbar-item` - Thread nav item
+
+### Server Storybook (localhost:7002)
+
+Components for the ampcode.com web app.
+
+**Thread Management:**
+
+- `#thread-feed` - Thread list feed
+- `#thread-feed-item` - Individual thread item
+- `#thread-feed-list` - Virtualized thread list
+- `#thread-actions` - Thread action buttons
+- `#thread-visibility` - Visibility settings
+- `#thread-visibility-edit` - Edit visibility
+- `#thread-page` - Full thread page
+- `#thread-open-in-button` - Open in editor button
+- `#pull-request-badge` - PR badge display
+
+**Settings:**
+
+- `#settings-access-token-section` - API tokens
+- `#settings-advanced-section` - Advanced settings
+- `#settings-client-section` - Client settings
+- `#billing-section` - Billing info
+- `#amp-free-section` - Free tier info
+- `#code-host-connections-section` - GitHub/GitLab connections
+
+**User & Profile:**
+
+- `#avatar` - User avatar
+- `#profile-card` - Profile card
+- `#profile-dropdown` - Profile menu
+- `#user-display` - User name display
+
+**Dashboard:**
+
+- `#welcome` - Welcome page
+- `#usage-by-day` - Usage metrics
+
+**UI Components:**
+
+- `#amp-logo` - Logo variants
+- `#badge-single` - Single badge
+- `#badge-group` - Badge group
+- `#copyable-text` - Copy-to-clipboard text
+- `#colors` - Color palette
+- `#icons` - Icon set
+
+**OG Images:**
+
+- `#og-images` - Social preview images
+
+## Tips
+
+- Story titles use kebab-case from filenames (remove `-story.svelte`)
+- Reload the skill if MCP tools become unavailable
+- Use `list_pages` to manage multiple browser tabs
+- Use `press_key` with "End" or "PageDown" to scroll the page
+- Use `evaluate_script` for custom page interactions

.agents/skills/ui-preview/mcp.json

@@ -0,0 +1,7 @@
+{
+	"chrome-devtools": {
+		"command": "npx",
+		"args": ["-y", "chrome-devtools-mcp@latest"],
+		"includeTools": ["navigate_page", "take_screenshot", "new_page", "list_pages", "press_key", "evaluate_script"]
+	}
+}

.claude/settings.json

@@ -1,7 +1,5 @@
 {
   "enabledPlugins": {
-    "beads@beads-marketplace": true,
-    "pr-review-toolkit@claude-plugins-official": true,
     "typescript-lsp@claude-plugins-official": true
   }
 }

.dockerignore

@@ -1 +1,49 @@
+# Dependencies
 node_modules
+
+# Build outputs (will be rebuilt in container)
+build
+.cache
+
+# Database files (mounted as volumes in production)
+prisma/*.db
+prisma/*.db-journal
+prisma/dumps
+
+# Environment files (use Docker secrets or env vars)
+.env
+.env.*
+!.env.example
+
+# Git
+.git
+.gitignore
+.gitattributes
+
+# IDE and editor
+.vscode
+.idea
+*.swp
+*.swo
+
+# Documentation
+*.md
+!README.md
+docs
+
+# Testing
+e2e
+coverage
+playwright-report
+test-results
+*.spec.ts
+
+# CI/CD
+.github
+.husky
+
+# Misc
+.DS_Store
+*.log
+.beads
+.claude

.gitignore

@@ -39,3 +39,9 @@ playwright-report
 # bv (beads viewer) local config and caches
 .bv/
 bv-pages/
+
+# Kamal deployment secrets
+.kamal/secrets
+
+# Local backup files
+prisma/backups/

.kamal/secrets.example

@@ -0,0 +1,18 @@
+# Kamal secrets configuration
+# Copy this file to .kamal/secrets and fill in the values
+# The .kamal/secrets file is gitignored and should never be committed
+
+# GitHub Container Registry (ghcr.io) personal access token
+# Create at: https://github.com/settings/tokens
+# Required scopes: read:packages, write:packages, delete:packages
+KAMAL_REGISTRY_PASSWORD=ghp_your_github_token_here
+
+# Session encryption secret (generate with: openssl rand -hex 32)
+SESSION_SECRET=your_session_secret_here
+
+# Magic link encryption secret (generate with: openssl rand -hex 32)
+MAGIC_LINK_SECRET=your_magic_link_secret_here
+
+# Mailgun API credentials for sending emails
+MAILGUN_SENDING_KEY=key-your-mailgun-api-key
+MAILGUN_DOMAIN=your-mailgun-domain.com

CLAUDE.md

@@ -299,6 +299,7 @@ started.
 bd ready              # Find available work
 bd show <id>          # View issue details
 bd update <id> --status in_progress  # Claim work
+bd comments add <id>  # Add comment
 bd close <id>         # Complete work
 bd sync               # Sync with git
 ```

Dockerfile

@@ -0,0 +1,76 @@
+# syntax = docker/dockerfile:1
+
+# Multi-stage Dockerfile for Remix app with Prisma and SQLite
+
+# Build stage
+FROM node:24-alpine AS build
+
+WORKDIR /app
+
+# Install dependencies needed for native modules and OpenSSL for Prisma
+RUN apk add --no-cache python3 make g++ openssl
+
+# Copy package files
+COPY package.json package-lock.json ./
+
+# Install all dependencies (including devDependencies for build)
+RUN npm ci
+
+# Copy Prisma schema and generate client
+COPY prisma/schema.sqlite.prisma ./prisma/
+RUN npx prisma generate --schema=./prisma/schema.sqlite.prisma
+
+# Copy application source
+COPY . .
+
+# Build CSS and Remix app
+RUN npm run build:css
+RUN npm run build:remix
+
+# Prune dev dependencies after build
+# Note: @remix-run/serve is in devDeps but needed for production
+# We keep it by reinstalling the matching version after prune
+RUN npm prune --omit=dev && npm install @remix-run/serve@^2.17.2 --ignore-scripts
+
+# Production stage
+FROM node:24-alpine AS production
+
+WORKDIR /app
+
+# Install OpenSSL for Prisma
+RUN apk add --no-cache openssl
+
+# Create non-root user for security
+RUN addgroup --system --gid 1001 remix && \
+    adduser --system --uid 1001 remix
+
+# Copy package.json for npm scripts
+COPY package.json ./
+
+# Copy node_modules from build stage (already pruned)
+COPY --from=build /app/node_modules ./node_modules
+
+# Copy Prisma schema and regenerate client for Alpine's OpenSSL version
+COPY --from=build /app/prisma/schema.sqlite.prisma ./prisma/
+RUN npx prisma generate --schema=./prisma/schema.sqlite.prisma
+
+# Copy built application
+COPY --from=build /app/build ./build
+COPY --from=build /app/public ./public
+COPY --from=build /app/app/tailwind.css ./app/tailwind.css
+
+# Set ownership to non-root user
+RUN chown -R remix:remix /app
+
+USER remix
+
+# Expose port 3000
+EXPOSE 3000
+
+# Set environment variables
+ENV NODE_ENV=production
+ENV PORT=3000
+
+# Start the application
+# Using explicit path for CJS compatibility with Node 24
+CMD ["npx", "remix-serve", "./build/index.js"]

app/routes/dashboard.purchase._index.tsx

@@ -48,11 +48,11 @@ export default function Purchase() {
             <dt className="text-sm font-medium text-gray-500">
               Nomor Rekening
             </dt>
-            <dd className="mt-1 text-sm text-gray-900">5055 9052 1800</dd>
+            <dd className="mt-1 text-sm text-gray-900">5041 7623 2889</dd>
           </div>
           <div className="sm:col-span-1">
             <dt className="text-sm font-medium text-gray-500">Nama Penerima</dt>
-            <dd className="mt-1 text-sm text-gray-900">Indah Wulandini</dd>
+            <dd className="mt-1 text-sm text-gray-900">Zain Fathoni</dd>
           </div>
           <div className="sm:col-span-2">
             <dt className="text-sm font-medium text-gray-500">