Skip to content

Commit 74b9781

Browse files
zainfathonizainfathoni
authored
Merge pull request #199 from zainfathoni/feature/kamal-deployment
feat: Kamal production deployment with CI/CD
2 parents 2848209 + e355c8a commit 74b9781

23 files changed

Lines changed: 1083 additions & 1413 deletions

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

Lines changed: 157 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,157 @@
1+
---
2+
name: ui-preview
3+
description:
4+
'Preview and screenshot local dev servers and storybooks. Use when asked to
5+
view UI components, take screenshots of storybooks, or inspect the web/server
6+
apps.'
7+
metadata:
8+
version: '1'
9+
---
10+
11+
# UI Preview Skill
12+
13+
Preview local dev servers and storybooks using Chrome DevTools.
14+
15+
## Available Tools
16+
17+
- `navigate_page` - Navigate to a URL
18+
- `take_screenshot` - Capture a screenshot of the current page
19+
- `new_page` - Open a new browser tab
20+
- `press_key` - Press keyboard keys (e.g., scrolling with PageDown, End)
21+
- `evaluate_script` - Run JavaScript on the page
22+
23+
## Workflow
24+
25+
1. **Navigate** to the target URL using `navigate_page`
26+
2. **Screenshot** the page using `take_screenshot`
27+
3. **Analyze** captured screenshots with `look_at` for visual analysis
28+
29+
## Local Dev URLs
30+
31+
Check `.amp/dev-environment.txt` for the running URLs (defaults:
32+
web=http://localhost:7001, server=https://localhost:7002).
33+
34+
| Service | Path |
35+
| ----------------- | ---------- |
36+
| Web dev server | / |
37+
| Server dev server | / |
38+
| Webview storybook | /storybook |
39+
| Server storybook | /storybook |
40+
41+
## Storybooks
42+
43+
Access a specific story directly using the hash: `/storybook#${story-title}`
44+
45+
The story title is derived from the filename: `handoff-story.svelte` →
46+
`#handoff-tool`
47+
48+
### Webview Storybook (localhost:7001)
49+
50+
Components for the VS Code extension webview UI.
51+
52+
**Thread Components:**
53+
54+
- `#thread` - Full thread view
55+
- `#streaming-thread` - Thread with streaming content
56+
- `#scrollable-thread` - Thread with scroll behavior
57+
- `#thread-reply-area` - Message input area
58+
- `#thread-status` - Thread status indicators
59+
- `#thread-summary` - Thread summary view
60+
- `#thread-hints` - Thread hint suggestions
61+
- `#thread-environment-input` - Environment input
62+
63+
**Tool Calls:**
64+
65+
- `#bash` - Bash tool output
66+
- `#edit-file` - File edit diffs
67+
- `#create-file` - File creation
68+
- `#read` - File read output
69+
- `#grep` - Search results
70+
- `#glob` - File glob results
71+
- `#handoff-tool` - Handoff tool states
72+
- `#mermaid` - Diagram rendering
73+
- `#oracle-tool` - Oracle tool output
74+
- `#task-tool` - Task tool output
75+
- `#web-search` - Web search results
76+
77+
**Editor & Input:**
78+
79+
- `#prompt-editor` - Message input editor
80+
- `#mention-menu` - @mention autocomplete
81+
- `#combobox` - Combobox component
82+
- `#agent-mode-selector` - Agent mode picker
83+
84+
**Diff Viewer:**
85+
86+
- `#diff-viewer` - Side-by-side diff
87+
- `#diff-display` - Inline diff display
88+
- `#unified-diff` - Unified diff format
89+
90+
**Settings:**
91+
92+
- `#settings-page` - Settings page
93+
- `#settings-error-modal` - Error modal
94+
- `#sign-in-page` - Authentication page
95+
96+
**Layout:**
97+
98+
- `#layout-navbar` - Navigation bar
99+
- `#current-thread-navbar-item` - Thread nav item
100+
101+
### Server Storybook (localhost:7002)
102+
103+
Components for the ampcode.com web app.
104+
105+
**Thread Management:**
106+
107+
- `#thread-feed` - Thread list feed
108+
- `#thread-feed-item` - Individual thread item
109+
- `#thread-feed-list` - Virtualized thread list
110+
- `#thread-actions` - Thread action buttons
111+
- `#thread-visibility` - Visibility settings
112+
- `#thread-visibility-edit` - Edit visibility
113+
- `#thread-page` - Full thread page
114+
- `#thread-open-in-button` - Open in editor button
115+
- `#pull-request-badge` - PR badge display
116+
117+
**Settings:**
118+
119+
- `#settings-access-token-section` - API tokens
120+
- `#settings-advanced-section` - Advanced settings
121+
- `#settings-client-section` - Client settings
122+
- `#billing-section` - Billing info
123+
- `#amp-free-section` - Free tier info
124+
- `#code-host-connections-section` - GitHub/GitLab connections
125+
126+
**User & Profile:**
127+
128+
- `#avatar` - User avatar
129+
- `#profile-card` - Profile card
130+
- `#profile-dropdown` - Profile menu
131+
- `#user-display` - User name display
132+
133+
**Dashboard:**
134+
135+
- `#welcome` - Welcome page
136+
- `#usage-by-day` - Usage metrics
137+
138+
**UI Components:**
139+
140+
- `#amp-logo` - Logo variants
141+
- `#badge-single` - Single badge
142+
- `#badge-group` - Badge group
143+
- `#copyable-text` - Copy-to-clipboard text
144+
- `#colors` - Color palette
145+
- `#icons` - Icon set
146+
147+
**OG Images:**
148+
149+
- `#og-images` - Social preview images
150+
151+
## Tips
152+
153+
- Story titles use kebab-case from filenames (remove `-story.svelte`)
154+
- Reload the skill if MCP tools become unavailable
155+
- Use `list_pages` to manage multiple browser tabs
156+
- Use `press_key` with "End" or "PageDown" to scroll the page
157+
- Use `evaluate_script` for custom page interactions

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"chrome-devtools": {
3+
"command": "npx",
4+
"args": ["-y", "chrome-devtools-mcp@latest"],
5+
"includeTools": ["navigate_page", "take_screenshot", "new_page", "list_pages", "press_key", "evaluate_script"]
6+
}
7+
}

‎.claude/settings.json‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
{
22
"enabledPlugins": {
3-
"beads@beads-marketplace": true,
4-
"pr-review-toolkit@claude-plugins-official": true,
53
"typescript-lsp@claude-plugins-official": true
64
}
75
}

‎.dockerignore‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,49 @@
1+
# Dependencies
12
node_modules
3+
4+
# Build outputs (will be rebuilt in container)
5+
build
6+
.cache
7+
8+
# Database files (mounted as volumes in production)
9+
prisma/*.db
10+
prisma/*.db-journal
11+
prisma/dumps
12+
13+
# Environment files (use Docker secrets or env vars)
14+
.env
15+
.env.*
16+
!.env.example
17+
18+
# Git
19+
.git
20+
.gitignore
21+
.gitattributes
22+
23+
# IDE and editor
24+
.vscode
25+
.idea
26+
*.swp
27+
*.swo
28+
29+
# Documentation
30+
*.md
31+
!README.md
32+
docs
33+
34+
# Testing
35+
e2e
36+
coverage
37+
playwright-report
38+
test-results
39+
*.spec.ts
40+
41+
# CI/CD
42+
.github
43+
.husky
44+
45+
# Misc
46+
.DS_Store
47+
*.log
48+
.beads
49+
.claude

.github/workflows/test.yml renamed to .github/workflows/ci.yml

File renamed without changes.

‎.github/workflows/deploy.yml‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
# Kamal deployment workflow
2+
# Deploys to production after CI workflow passes on main branch
3+
4+
name: Deploy
5+
6+
on:
7+
workflow_run:
8+
workflows: [CI]
9+
types: [completed]
10+
branches: [main]
11+
workflow_dispatch: # Allow manual deployment
12+
13+
jobs:
14+
deploy:
15+
name: Deploy to production
16+
runs-on: ubuntu-latest
17+
environment: Production
18+
# Only run if CI passed (or manual trigger)
19+
if: >
20+
github.event_name == 'workflow_dispatch' ||
21+
(github.event.workflow_run.conclusion == 'success' &&
22+
github.event.workflow_run.head_branch == 'main')
23+
24+
steps:
25+
- name: Checkout repository
26+
uses: actions/checkout@v4
27+
28+
- name: Set up Docker Buildx
29+
uses: docker/setup-buildx-action@v3
30+
31+
- name: Login to GitHub Container Registry
32+
uses: docker/login-action@v3
33+
with:
34+
registry: ghcr.io
35+
username: ${{ github.actor }}
36+
password: ${{ secrets.KAMAL_REGISTRY_PASSWORD }}
37+
38+
- name: Build and push Docker image
39+
uses: docker/build-push-action@v6
40+
with:
41+
context: .
42+
push: true
43+
tags: |
44+
ghcr.io/zainfathoni/kelas.rumahberbagi.com:${{ github.sha }}
45+
ghcr.io/zainfathoni/kelas.rumahberbagi.com:latest
46+
cache-from: type=gha
47+
cache-to: type=gha,mode=max
48+
platforms: linux/amd64
49+
50+
- name: Set up Ruby for Kamal
51+
uses: ruby/setup-ruby@v1
52+
with:
53+
ruby-version: '3.3'
54+
55+
- name: Install Kamal
56+
run: gem install kamal
57+
58+
- name: Set up SSH key
59+
run: |
60+
mkdir -p ~/.ssh
61+
echo "${{ secrets.SSH_PRIVATE_KEY }}" > ~/.ssh/id_rsa
62+
chmod 600 ~/.ssh/id_rsa
63+
ssh-keyscan -H 103.235.75.227 >> ~/.ssh/known_hosts
64+
65+
- name: Create Kamal secrets file
66+
run: |
67+
mkdir -p .kamal
68+
cat > .kamal/secrets << EOF
69+
KAMAL_REGISTRY_PASSWORD=${{ secrets.KAMAL_REGISTRY_PASSWORD }}
70+
SESSION_SECRET=${{ secrets.SESSION_SECRET }}
71+
MAGIC_LINK_SECRET=${{ secrets.MAGIC_LINK_SECRET }}
72+
MAILGUN_SENDING_KEY=${{ secrets.MAILGUN_SENDING_KEY }}
73+
MAILGUN_DOMAIN=${{ secrets.MAILGUN_DOMAIN }}
74+
EOF
75+
76+
- name: Deploy with Kamal
77+
run: kamal deploy --skip-push --version ${{ github.sha }}
78+
env:
79+
KAMAL_REGISTRY_PASSWORD: ${{ secrets.KAMAL_REGISTRY_PASSWORD }}

‎.gitignore‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,3 +39,9 @@ playwright-report
3939
# bv (beads viewer) local config and caches
4040
.bv/
4141
bv-pages/
42+
43+
# Kamal deployment secrets
44+
.kamal/secrets
45+
46+
# Local backup files
47+
prisma/backups/

‎.kamal/secrets.example‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
# Kamal secrets configuration
2+
# Copy this file to .kamal/secrets and fill in the values
3+
# The .kamal/secrets file is gitignored and should never be committed
4+
5+
# GitHub Container Registry (ghcr.io) personal access token
6+
# Create at: https://github.com/settings/tokens
7+
# Required scopes: read:packages, write:packages, delete:packages
8+
KAMAL_REGISTRY_PASSWORD=ghp_your_github_token_here
9+
10+
# Session encryption secret (generate with: openssl rand -hex 32)
11+
SESSION_SECRET=your_session_secret_here
12+
13+
# Magic link encryption secret (generate with: openssl rand -hex 32)
14+
MAGIC_LINK_SECRET=your_magic_link_secret_here
15+
16+
# Mailgun API credentials for sending emails
17+
MAILGUN_SENDING_KEY=key-your-mailgun-api-key
18+
MAILGUN_DOMAIN=your-mailgun-domain.com

‎CLAUDE.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -299,6 +299,7 @@ started.
299299
bd ready # Find available work
300300
bd show <id> # View issue details
301301
bd update <id> --status in_progress # Claim work
302+
bd comments add <id> # Add comment
302303
bd close <id> # Complete work
303304
bd sync # Sync with git
304305
```

0 commit comments

Comments
 (0)
⚡