tsconfigdotjson · tsconfigdotjson · Apr 10, 2026 · Apr 10, 2026 · Apr 10, 2026
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -10,7 +10,7 @@ concurrency:
 
 jobs:
   lint-and-build:
-    runs-on: macos-15
+    runs-on: macos-26
     steps:
       - uses: actions/checkout@v4
 

diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -16,7 +16,7 @@ concurrency:
 
 jobs:
   build-dmg:
-    runs-on: macos-15
+    runs-on: macos-26
     steps:
       - uses: actions/checkout@v4
 

diff --git a/.gitignore b/.gitignore
@@ -8,3 +8,4 @@ DerivedData/
 .netrc
 .agents/
 /web/.vite
+node_modules/
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -0,0 +1,8 @@
+{
+  "scripts": {
+    "og": "npx tsx scripts/render-og-image.ts"
+  },
+  "devDependencies": {
+    "playwright": "^1.59.1"
+  }
+}
diff --git a/scripts/og-image.html b/scripts/og-image.html
@@ -0,0 +1,149 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=1200" />
+  <style>
+    @import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap');
+
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+
+    body {
+      width: 1200px;
+      height: 630px;
+      background: #0a0a0a;
+      color: #fafafa;
+      font-family: 'Inter Tight', system-ui, sans-serif;
+      -webkit-font-smoothing: antialiased;
+      overflow: hidden;
+      position: relative;
+    }
+
+    /* Grain overlay */
+    .grain {
+      position: absolute;
+      inset: 0;
+      z-index: 10;
+      pointer-events: none;
+      opacity: 0.025;
+      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
+      background-repeat: repeat;
+      background-size: 256px 256px;
+    }
+
+    .container {
+      position: relative;
+      z-index: 1;
+      width: 100%;
+      height: 100%;
+      padding: 64px 72px;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+    }
+
+    /* Top bar */
+    .top {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+
+    .wordmark {
+      font-size: 22px;
+      font-weight: 700;
+      letter-spacing: -0.02em;
+      color: #fafafa;
+    }
+
+    .badge {
+      font-family: 'JetBrains Mono', monospace;
+      font-size: 12px;
+      font-weight: 500;
+      letter-spacing: 0.15em;
+      text-transform: uppercase;
+      color: #737373;
+    }
+
+    /* Headline */
+    .headline {
+      margin-top: -12px;
+    }
+
+    .headline span {
+      display: block;
+      font-size: 108px;
+      font-weight: 900;
+      line-height: 1;
+      letter-spacing: -0.04em;
+    }
+
+    .headline .accent {
+      color: #ff3d00;
+    }
+
+    /* Bottom bar */
+    .bottom {
+      display: flex;
+      align-items: flex-end;
+      justify-content: space-between;
+    }
+
+    .tagline {
+      font-family: 'JetBrains Mono', monospace;
+      font-size: 14px;
+      font-weight: 400;
+      letter-spacing: 0.1em;
+      color: #737373;
+    }
+
+    .meta {
+      display: flex;
+      gap: 20px;
+      font-family: 'JetBrains Mono', monospace;
+      font-size: 12px;
+      letter-spacing: 0.15em;
+      text-transform: uppercase;
+      color: #404040;
+    }
+
+    /* Accent bar decoration */
+    .accent-bar {
+      position: absolute;
+      top: 0;
+      left: 72px;
+      width: 80px;
+      height: 3px;
+      background: #ff3d00;
+      z-index: 2;
+    }
+  </style>
+</head>
+<body>
+  <div class="grain"></div>
+  <div class="accent-bar"></div>
+
+  <div class="container">
+    <div class="top">
+      <div class="wordmark">devtail</div>
+      <div class="badge">macOS menu bar app</div>
+    </div>
+
+    <div class="headline">
+      <span>YOUR TERMINAL</span>
+      <span>IS TAKEN.</span>
+      <span class="accent">YOUR MENU BAR</span>
+      <span class="accent">ISN&rsquo;T.</span>
+    </div>
+
+    <div class="bottom">
+      <div class="tagline">every process, one menu bar</div>
+      <div class="meta">
+        <span>Native SwiftUI</span>
+        <span>&lt;5 MB</span>
+        <span>macOS 14+</span>
+      </div>
+    </div>
+  </div>
+</body>
+</html>
diff --git a/scripts/render-og-image.ts b/scripts/render-og-image.ts
@@ -0,0 +1,23 @@
+import { chromium } from "playwright";
+import { resolve, dirname } from "node:path";
+import { fileURLToPath } from "node:url";
+
+async function main() {
+  const __dirname = dirname(fileURLToPath(import.meta.url));
+  const htmlPath = resolve(__dirname, "og-image.html");
+  const outputPath = resolve(__dirname, "../web/public/og.png");
+
+  const browser = await chromium.launch();
+  const page = await browser.newPage({
+    viewport: { width: 1200, height: 630 },
+    deviceScaleFactor: 2,
+  });
+
+  await page.goto(`file://${htmlPath}`, { waitUntil: "networkidle" });
+  await page.screenshot({ path: outputPath, type: "png" });
+
+  await browser.close();
+  console.log(`✓ OpenGraph image saved to ${outputPath}`);
+}
+
+main();
diff --git a/web/index.html b/web/index.html
@@ -6,6 +6,22 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="description" content="devtail — a macOS menu bar app for managing local development processes. Stop juggling terminal windows." />
     <title>devtail — every process, one menu bar</title>
+
+    <!-- OpenGraph -->
+    <meta property="og:type" content="website" />
+    <meta property="og:title" content="devtail — every process, one menu bar" />
+    <meta property="og:description" content="Your terminal is taken. Your menu bar isn't. A macOS menu bar app for managing local development processes." />
+    <meta property="og:image" content="https://gratefulworkspace.github.io/devtail/og.png" />
+    <meta property="og:image:width" content="2400" />
+    <meta property="og:image:height" content="1260" />
+    <meta property="og:url" content="https://gratefulworkspace.github.io/devtail/" />
+    <meta property="og:site_name" content="devtail" />
+
+    <!-- Twitter -->
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:title" content="devtail — every process, one menu bar" />
+    <meta name="twitter:description" content="Your terminal is taken. Your menu bar isn't. A macOS menu bar app for managing local development processes." />
+    <meta name="twitter:image" content="https://gratefulworkspace.github.io/devtail/og.png" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link href="https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500&family=Playfair+Display:ital@1&display=swap" rel="stylesheet" />

diff --git a/web/public/og.png b/web/public/og.png