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

.github/workflows/deploy.yml

@@ -0,0 +1,79 @@
+# Kamal deployment workflow
+# Deploys to production after CI workflow passes on main branch
+
+name: Deploy
+
+on:
+  workflow_run:
+    workflows: [CI]
+    types: [completed]
+    branches: [main]
+  workflow_dispatch: # Allow manual deployment
+
+jobs:
+  deploy:
+    name: Deploy to production
+    runs-on: ubuntu-latest
+    environment: Production
+    # Only run if CI passed (or manual trigger)
+    if: >
+      github.event_name == 'workflow_dispatch' ||
+      (github.event.workflow_run.conclusion == 'success' &&
+       github.event.workflow_run.head_branch == 'main')
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Login to GitHub Container Registry
+        uses: docker/login-action@v3
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.KAMAL_REGISTRY_PASSWORD }}
+
+      - name: Build and push Docker image
+        uses: docker/build-push-action@v6
+        with:
+          context: .
+          push: true
+          tags: |
+            ghcr.io/zainfathoni/kelas.rumahberbagi.com:${{ github.sha }}
+            ghcr.io/zainfathoni/kelas.rumahberbagi.com:latest
+          cache-from: type=gha
+          cache-to: type=gha,mode=max
+          platforms: linux/amd64
+
+      - name: Set up Ruby for Kamal
+        uses: ruby/setup-ruby@v1
+        with:
+          ruby-version: '3.3'
+
+      - name: Install Kamal
+        run: gem install kamal
+
+      - name: Set up SSH key
+        run: |
+          mkdir -p ~/.ssh
+          echo "${{ secrets.SSH_PRIVATE_KEY }}" > ~/.ssh/id_rsa
+          chmod 600 ~/.ssh/id_rsa
+          ssh-keyscan -H 103.235.75.227 >> ~/.ssh/known_hosts
+
+      - name: Create Kamal secrets file
+        run: |
+          mkdir -p .kamal
+          cat > .kamal/secrets << EOF
+          KAMAL_REGISTRY_PASSWORD=${{ secrets.KAMAL_REGISTRY_PASSWORD }}
+          SESSION_SECRET=${{ secrets.SESSION_SECRET }}
+          MAGIC_LINK_SECRET=${{ secrets.MAGIC_LINK_SECRET }}
+          MAILGUN_SENDING_KEY=${{ secrets.MAILGUN_SENDING_KEY }}
+          MAILGUN_DOMAIN=${{ secrets.MAILGUN_DOMAIN }}
+          EOF
+
+      - name: Deploy with Kamal
+        run: kamal deploy --skip-push --version ${{ github.sha }}
+        env:
+          KAMAL_REGISTRY_PASSWORD: ${{ secrets.KAMAL_REGISTRY_PASSWORD }}

.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
 ```