feat(site): add VS Code extension section and link-preview metadata (#23)

## Related Issue

No issue. The site had no mention of the VS Code extension, and pasting
the site URL into Slack/X/iMessage produced a bare link with no image or
description.

## Problem

- `code.pythinker.com` only covered the terminal CLI, so visitors had no
idea the VS Code extension exists or how to install it.
- `index.html` had no Open Graph or Twitter card tags, so link previews
showed nothing but the URL.
- The npm package page renders a broken image: the README hero points at
`docs/media/init.webp`, which does not exist in the repo (raw URL 404s).

## What changed

- New **VS Code extension** section, placed directly after the hero:
product screenshot, three capability points, a Marketplace button, and a
copyable `code --install-extension pythoughts.pythinker-code` (reuses
the existing `copyText` helper and copy-button markup).
- Added Open Graph + Twitter `summary_large_image` metadata,
`apple-touch-icon`, and `favicon.ico`.
- Added `public/og.jpg` (1200×630 preview card) plus the icon set the
metadata references.
- Pointed the CLI README hero at `docs/media/terminal-ui.webp`, which
exists. This takes effect on the npm page at the next publish.

[skip changeset] — `@pythoughts/site` is private and not released, and
the README edit is docs-only, so no package bump applies.

## Checklist

- [x] I have read the
[CONTRIBUTING](https://github.com/Pythoughts-labs/pythinker-code/blob/main/CONTRIBUTING.md)
document.
- [x] I have linked a related issue, or explained the problem above.
- [ ] I have added tests that prove my feature works. — marketing site
markup and metadata; verified with `pnpm build` and a rendered preview.
- [x] Ran `gen-changesets` skill, or this PR needs no changeset.
- [x] Ran `gen-docs` skill, or this PR needs no doc update.

Author: elkaix

apps/pythinker-code/README.md

@@ -5,7 +5,7 @@
 [![npm](https://img.shields.io/npm/v/@pythoughts/pythinker-code)](https://www.npmjs.com/package/@pythoughts/pythinker-code) [![License](https://img.shields.io/badge/license-MIT-blue)](LICENSE)  [![Docs](https://img.shields.io/badge/docs-online-blue)](https://pythoughts-labs.github.io/pythinker-code/)
 
 <p align="center">
-  <img src="https://raw.githubusercontent.com/Pythoughts-labs/pythinker-code/main/docs/media/init.webp" alt="Pythinker Code terminal demo" width="860">
+  <img src="https://raw.githubusercontent.com/Pythoughts-labs/pythinker-code/main/docs/media/terminal-ui.webp" alt="Pythinker Code terminal demo" width="860">
 </p>
 
 ## What is Pythinker Code CLI

apps/site/index.html

@@ -6,11 +6,37 @@
     <meta name="color-scheme" content="light" />
     <meta name="theme-color" content="#ffffff" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="icon" href="/favicon.ico" sizes="48x48" />
+    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
     <link rel="canonical" href="https://code.pythinker.com/" />
     <meta
       name="description"
-      content="Install Pythinker Code: an open-source AI coding agent for your terminal. One command for macOS, Linux, Windows, Homebrew, Nix, or npm."
+      content="Install Pythinker Code: an open-source AI coding agent for your terminal and VS Code. One command for macOS, Linux, Windows, Homebrew, Nix, or npm."
     />
+
+    <!-- Link previews: Slack, Discord, iMessage, X, LinkedIn, WhatsApp. -->
+    <meta property="og:type" content="website" />
+    <meta property="og:site_name" content="Pythinker Code" />
+    <meta property="og:url" content="https://code.pythinker.com/" />
+    <meta property="og:title" content="Pythinker Code, the terminal-native AI engineering agent" />
+    <meta
+      property="og:description"
+      content="An open-source AI engineering agent for your terminal and VS Code. It reads your repo, edits files, runs commands, and iterates until the job is done."
+    />
+    <meta property="og:image" content="https://code.pythinker.com/og.jpg" />
+    <meta property="og:image:type" content="image/jpeg" />
+    <meta property="og:image:width" content="1200" />
+    <meta property="og:image:height" content="630" />
+    <meta property="og:image:alt" content="Pythinker Code running as a VS Code extension" />
+    <meta property="og:locale" content="en_US" />
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:title" content="Pythinker Code, the terminal-native AI engineering agent" />
+    <meta
+      name="twitter:description"
+      content="An open-source AI engineering agent for your terminal and VS Code. It reads your repo, edits files, runs commands, and iterates until the job is done."
+    />
+    <meta name="twitter:image" content="https://code.pythinker.com/og.jpg" />
+    <meta name="twitter:image:alt" content="Pythinker Code running as a VS Code extension" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link

apps/site/public/_headers

@@ -0,0 +1,10 @@
+/install.sh
+  Content-Type: text/x-shellscript; charset=utf-8
+  Cache-Control: public, max-age=300, s-maxage=900, stale-if-error=86400
+
+/install.ps1
+  Content-Type: text/plain; charset=utf-8
+  Cache-Control: public, max-age=300, s-maxage=900, stale-if-error=86400
+
+/releases/*
+  Cache-Control: public, max-age=31536000, immutable

apps/site/public/apple-touch-icon.png

@@ -0,0 +1,79 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Signed in to Pythinker</title>
+    <style>
+      *, *::before, *::after { box-sizing: border-box; }
+      html, body { height: 100%; margin: 0; }
+      body {
+        font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+        background: #0b0f19;
+        background-image:
+          radial-gradient(ellipse 80% 60% at 50% -10%, rgba(62, 207, 142, 0.12), transparent),
+          radial-gradient(ellipse 60% 50% at 100% 100%, rgba(238, 154, 135, 0.08), transparent);
+        color: #e8eaed;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 24px;
+      }
+      .card {
+        width: min(100%, 480px);
+        padding: 48px 40px 44px;
+        border-radius: 20px;
+        background: linear-gradient(180deg, #1a2030 0%, #161b22 100%);
+        border: 1px solid #2d333b;
+        box-shadow: 0 24px 48px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        text-align: center;
+      }
+      .logo { margin-bottom: 8px; }
+      .logo img { display: block; width: 88px; height: auto; }
+      .brand {
+        margin: 0 0 28px;
+        font-size: 13px;
+        font-weight: 600;
+        letter-spacing: 0.14em;
+        text-transform: uppercase;
+        color: #6b7280;
+      }
+      .badge { margin-bottom: 16px; }
+      .badge-icon { display: block; }
+      h1 {
+        margin: 0 0 12px;
+        font-size: 26px;
+        line-height: 1.25;
+        font-weight: 650;
+        letter-spacing: -0.02em;
+        color: #f5f7fa;
+      }
+      p {
+        margin: 0;
+        font-size: 15px;
+        line-height: 1.6;
+        color: #9aa0a8;
+        max-width: 34ch;
+      }
+    </style>
+  </head>
+  <body>
+    <main class="card">
+      <div class="logo">
+        <img src="/icon.svg" width="88" height="110" alt="" aria-hidden="true" />
+      </div>
+      <p class="brand">Pythinker Code</p>
+      <div class="badge">
+        <svg class="badge-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="28" height="28" aria-hidden="true" focusable="false">
+          <circle cx="12" cy="12" r="11" fill="#1a3d2f" stroke="#3ecf8e" stroke-width="1.5"/>
+          <path d="M7.5 12.2l3 3 6-6.5" fill="none" stroke="#3ecf8e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>
+      </div>
+      <h1>You're logged in to Pythinker</h1>
+      <p>You can close this tab and return to Pythinker.</p>
+    </main>
+  </body>
+</html>