Refine marketing metadata and preview branch UX

BunsDev · BunsDev · commit 76d8a800ee58 · 2026-03-27T12:04:17.000-05:00
- Add canonical/OG metadata and updated copy for marketing pages
- Support preview panel docking, resizing, and keyboard shortcuts
- Show only local branches in the branch selector
- Fallback to t3code commit hash in desktop build metadata
diff --git a/apps/desktop/src/main.ts b/apps/desktop/src/main.ts
@@ -355,8 +355,11 @@ function resolveEmbeddedCommitHash(): string | null {
 
   try {
     const raw = FS.readFileSync(packageJsonPath, "utf8");
-    const parsed = JSON.parse(raw) as { okcodeCommitHash?: unknown };
-    return normalizeCommitHash(parsed.okcodeCommitHash ?? parsed.okcodeCommitHash);
+    const parsed = JSON.parse(raw) as {
+      okcodeCommitHash?: unknown;
+      t3codeCommitHash?: unknown;
+    };
+    return normalizeCommitHash(parsed.okcodeCommitHash ?? parsed.t3codeCommitHash);
   } catch {
     return null;
   }
diff --git a/apps/marketing/astro.config.mjs b/apps/marketing/astro.config.mjs
@@ -1,6 +1,10 @@
 import { defineConfig } from "astro/config";
 
+/** Set in deploy (e.g. preview URL) so canonical and Open Graph URLs resolve. */
+const site = process.env.PUBLIC_SITE_URL;
+
 export default defineConfig({
+  ...(site ? { site } : {}),
   server: {
     port: Number(process.env.PORT ?? 4173),
   },
diff --git a/apps/marketing/src/layouts/Layout.astro b/apps/marketing/src/layouts/Layout.astro
@@ -2,19 +2,36 @@
 interface Props {
   title?: string;
   description?: string;
+  /** Path for og:image, relative to site root (requires PUBLIC_SITE_URL at build). */
+  ogImagePath?: string;
 }
 
 const {
   title = "OK Code",
-  description = "OK Code — The best way to code with AI.",
+  description = "A minimal GUI for coding agents like Codex and Claude. Web and desktop.",
+  ogImagePath = "/icon.png",
 } = Astro.props;
+
+const canonical = Astro.site ? new URL(Astro.url.pathname, Astro.site).href : null;
+const ogImage = Astro.site ? new URL(ogImagePath, Astro.site).href : null;
 ---
 
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="description" content={description} />
+    <meta name="application-name" content="OK Code" />
+    <meta name="theme-color" content="#09090b" />
+    {canonical && <link rel="canonical" href={canonical} />}
+    <meta property="og:type" content="website" />
+    <meta property="og:title" content={title} />
+    <meta property="og:description" content={description} />
+    {ogImage && <meta property="og:image" content={ogImage} />}
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:title" content={title} />
+    <meta name="twitter:description" content={description} />
+    {ogImage && <meta name="twitter:image" content={ogImage} />}
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
@@ -31,7 +48,8 @@ const {
     <div class="page">
       <nav class="nav">
         <a href="/" class="nav-brand">
-          <img src="/icon.png" alt="OK Code" class="nav-icon" />
+          <img src="/icon.png" alt="" class="nav-icon" width="28" height="28" />
+          <span class="nav-wordmark">OK Code</span>
         </a>
         <a
           href="https://github.com/OpenKnots/okcode"
@@ -150,6 +168,14 @@ const {
   .nav-brand {
     display: flex;
     align-items: center;
+    gap: 0.5rem;
+  }
+
+  .nav-wordmark {
+    font-weight: 600;
+    font-size: 1rem;
+    letter-spacing: -0.02em;
+    color: var(--fg);
   }
 
   .nav-icon {
diff --git a/apps/marketing/src/pages/download.astro b/apps/marketing/src/pages/download.astro
@@ -2,7 +2,10 @@
 import Layout from "../layouts/Layout.astro";
 ---
 
-<Layout title="Download — OK Code" description="Download OK Code for macOS, Windows, or Linux.">
+<Layout
+  title="Download — OK Code"
+  description="Download OK Code for macOS, Windows, or Linux. Open source coding agent GUI from OpenKnots."
+>
   <h1 class="heading">Download OK Code</h1>
   <p class="subheading">
     <span id="version-label">Loading latest release&hellip;</span>
diff --git a/apps/marketing/src/pages/index.astro b/apps/marketing/src/pages/index.astro
@@ -1,9 +1,15 @@
 ---
 import Layout from "../layouts/Layout.astro";
+
+const description =
+  "A minimal GUI for coding agents like Codex and Claude. Web and desktop. Open source.";
 ---
 
-<Layout>
-  <h1 class="tagline">OK Code is the best way to code with AI.</h1>
+<Layout title="OK Code" {description}>
+  <h1 class="tagline">A minimal GUI for coding agents</h1>
+  <p class="subtagline">
+    Codex and Claude today. Web and desktop. From OpenKnots.
+  </p>
 
   <a
     id="download-btn"
@@ -105,11 +111,24 @@ import Layout from "../layouts/Layout.astro";
     letter-spacing: -0.035em;
     line-height: 1.15;
     text-align: center;
-    margin: 0 0 6vh;
+    margin: 0 0 1rem;
     opacity: 0;
     animation: fade-in 1s ease-out forwards;
   }
 
+  .subtagline {
+    font-size: clamp(1rem, 2.2vw, 1.2rem);
+    font-weight: 400;
+    color: var(--fg-muted);
+    text-align: center;
+    line-height: 1.5;
+    max-width: 28rem;
+    margin: 0 0 5vh;
+    padding: 0 1rem;
+    opacity: 0;
+    animation: fade-in 1s ease-out 0.08s forwards;
+  }
+
   /* ── Hero button ── */
 
   .hero-button {
diff --git a/apps/web/src/components/BranchToolbar.logic.test.ts b/apps/web/src/components/BranchToolbar.logic.test.ts
@@ -3,6 +3,7 @@ import { describe, expect, it } from "vitest";
 import {
   dedupeRemoteBranchesWithLocalMatches,
   deriveLocalBranchNameFromRemoteRef,
+  filterSelectableBranches,
   resolveBranchSelectionTarget,
   resolveDraftEnvModeAfterBranchChange,
   resolveBranchToolbarValue,
@@ -92,6 +93,46 @@ describe("deriveLocalBranchNameFromRemoteRef", () => {
   });
 });
 
+describe("filterSelectableBranches", () => {
+  it("shows only local branches in the branch selector", () => {
+    const input: GitBranch[] = [
+      {
+        name: "main",
+        current: true,
+        isDefault: true,
+        worktreePath: null,
+      },
+      {
+        name: "feature/demo",
+        current: false,
+        isDefault: false,
+        worktreePath: null,
+      },
+      {
+        name: "origin/feature/demo",
+        isRemote: true,
+        remoteName: "origin",
+        current: false,
+        isDefault: false,
+        worktreePath: null,
+      },
+      {
+        name: "jason/feature/old-fork",
+        isRemote: true,
+        remoteName: "jason",
+        current: false,
+        isDefault: false,
+        worktreePath: null,
+      },
+    ];
+
+    expect(filterSelectableBranches(input).map((branch) => branch.name)).toEqual([
+      "main",
+      "feature/demo",
+    ]);
+  });
+});
+
 describe("dedupeRemoteBranchesWithLocalMatches", () => {
   it("hides remote refs when the matching local branch exists", () => {
     const input: GitBranch[] = [
@@ -149,7 +190,7 @@ describe("dedupeRemoteBranchesWithLocalMatches", () => {
     ]);
   });
 
-  it("keeps non-origin remote refs visible even when a matching local branch exists", () => {
+  it("hides non-origin remote refs too when a matching local branch exists", () => {
     const input: GitBranch[] = [
       {
         name: "feature/demo",
@@ -169,11 +210,43 @@ describe("dedupeRemoteBranchesWithLocalMatches", () => {
 
     expect(dedupeRemoteBranchesWithLocalMatches(input).map((branch) => branch.name)).toEqual([
       "feature/demo",
-      "my-org/upstream/feature/demo",
     ]);
   });
 
-  it("keeps non-origin remote refs visible when git tracks with first-slash local naming", () => {
+  it("hides non-preferred remote refs when a preferred remote is configured", () => {
+    const input: GitBranch[] = [
+      {
+        name: "feature/demo",
+        current: false,
+        isDefault: false,
+        worktreePath: null,
+      },
+      {
+        name: "origin/feature/remote-only",
+        isRemote: true,
+        remoteName: "origin",
+        current: false,
+        isDefault: false,
+        worktreePath: null,
+      },
+      {
+        name: "my-org/upstream/feature/demo",
+        isRemote: true,
+        remoteName: "my-org/upstream",
+        current: false,
+        isDefault: false,
+        worktreePath: null,
+      },
+    ];
+
+    expect(
+      dedupeRemoteBranchesWithLocalMatches(input, { preferredRemoteName: "origin" }).map(
+        (branch) => branch.name,
+      ),
+    ).toEqual(["feature/demo", "origin/feature/remote-only"]);
+  });
+
+  it("hides preferred-remote refs too when a matching local branch exists", () => {
     const input: GitBranch[] = [
       {
         name: "upstream/feature",
@@ -191,10 +264,11 @@ describe("dedupeRemoteBranchesWithLocalMatches", () => {
       },
     ];
 
-    expect(dedupeRemoteBranchesWithLocalMatches(input).map((branch) => branch.name)).toEqual([
-      "upstream/feature",
-      "my-org/upstream/feature",
-    ]);
+    expect(
+      dedupeRemoteBranchesWithLocalMatches(input, {
+        preferredRemoteName: "my-org/upstream",
+      }).map((branch) => branch.name),
+    ).toEqual(["upstream/feature"]);
   });
 });
 
diff --git a/apps/web/src/components/BranchToolbar.logic.ts b/apps/web/src/components/BranchToolbar.logic.ts
@@ -71,20 +71,28 @@ function deriveLocalBranchNameCandidatesFromRemoteRef(
   return [...candidates];
 }
 
+export function filterSelectableBranches(branches: ReadonlyArray<GitBranch>): ReadonlyArray<GitBranch> {
+  return branches.filter((branch) => !branch.isRemote);
+}
+
 export function dedupeRemoteBranchesWithLocalMatches(
   branches: ReadonlyArray<GitBranch>,
+  options?: {
+    preferredRemoteName?: string | null;
+  },
 ): ReadonlyArray<GitBranch> {
   const localBranchNames = new Set(
     branches.filter((branch) => !branch.isRemote).map((branch) => branch.name),
   );
+  const preferredRemoteName = options?.preferredRemoteName?.trim() || null;
 
   return branches.filter((branch) => {
     if (!branch.isRemote) {
       return true;
     }
 
-    if (branch.remoteName !== "origin") {
-      return true;
+    if (preferredRemoteName && branch.remoteName !== preferredRemoteName) {
+      return false;
     }
 
     const localBranchCandidates = deriveLocalBranchNameCandidatesFromRemoteRef(
diff --git a/apps/web/src/components/BranchToolbarBranchSelector.tsx b/apps/web/src/components/BranchToolbarBranchSelector.tsx
@@ -23,9 +23,9 @@ import {
 import { readNativeApi } from "../nativeApi";
 import { parsePullRequestReference } from "../pullRequestReference";
 import {
-  dedupeRemoteBranchesWithLocalMatches,
   deriveLocalBranchNameFromRemoteRef,
   EnvMode,
+  filterSelectableBranches,
   resolveBranchSelectionTarget,
   resolveBranchToolbarValue,
 } from "./BranchToolbar.logic";
@@ -91,7 +91,7 @@ export function BranchToolbarBranchSelector({
   const branchesQuery = useQuery(gitBranchesQueryOptions(branchCwd));
   const branchStatusQuery = useQuery(gitStatusQueryOptions(branchCwd));
   const branches = useMemo(
-    () => dedupeRemoteBranchesWithLocalMatches(branchesQuery.data?.branches ?? []),
+    () => filterSelectableBranches(branchesQuery.data?.branches ?? []),
     [branchesQuery.data?.branches],
   );
   const currentGitBranch =
diff --git a/apps/web/src/components/ChatView.tsx b/apps/web/src/components/ChatView.tsx
