diff --git a/.github/workflows/mobile-showcase-screenshots.yml b/.github/workflows/mobile-showcase-screenshots.yml index 36dfb61f73f..cdec123503e 100644 --- a/.github/workflows/mobile-showcase-screenshots.yml +++ b/.github/workflows/mobile-showcase-screenshots.yml @@ -34,6 +34,8 @@ jobs: if: inputs.platform == 'all' || inputs.platform == 'ios' runs-on: blacksmith-12vcpu-macos-26 timeout-minutes: 60 + outputs: + artifact_id: ${{ steps.upload_ios.outputs.artifact-id }} steps: - name: Checkout uses: actions/checkout@v6 @@ -59,6 +61,7 @@ jobs: run: pnpm screenshots:mobile --platform ios --appearance "${{ inputs.appearance }}" --validate-only - name: Upload iOS screenshots + id: upload_ios if: always() uses: actions/upload-artifact@v7 with: @@ -67,6 +70,119 @@ jobs: if-no-files-found: warn retention-days: 14 + publish_marketing_preview: + name: Publish marketing mobile preview + if: | + always() && + needs.ios.result == 'success' && + github.ref == format('refs/heads/{0}', github.event.repository.default_branch) && + inputs.appearance != 'light' + needs: ios + runs-on: blacksmith-8vcpu-ubuntu-2404 + timeout-minutes: 10 + steps: + - id: app_token + name: Mint release app token + uses: actions/create-github-app-token@v2 + with: + app-id: ${{ secrets.RELEASE_APP_ID }} + private-key: ${{ secrets.RELEASE_APP_PRIVATE_KEY }} + owner: ${{ github.repository_owner }} + + - name: Checkout default branch + uses: actions/checkout@v6 + with: + ref: ${{ github.event.repository.default_branch }} + fetch-depth: 0 + token: ${{ steps.app_token.outputs.token }} + persist-credentials: true + + - name: Download iOS screenshots + uses: actions/download-artifact@v8 + with: + name: app-store-connect-screenshots + path: ${{ runner.temp }}/mobile-showcase + + - id: app_bot + name: Resolve GitHub App bot identity + env: + GH_TOKEN: ${{ steps.app_token.outputs.token }} + APP_SLUG: ${{ steps.app_token.outputs.app-slug }} + run: | + user_id="$(gh api "/users/${APP_SLUG}[bot]" --jq .id)" + echo "name=${APP_SLUG}[bot]" >> "$GITHUB_OUTPUT" + echo "email=${user_id}+${APP_SLUG}[bot]@users.noreply.github.com" >> "$GITHUB_OUTPUT" + + - id: preview + name: Update website preview asset + env: + ARTIFACT_ID: ${{ needs.ios.outputs.artifact_id }} + HEAD_SHA: ${{ github.sha }} + RUN_ID: ${{ github.run_id }} + RUN_URL: ${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }} + WORKFLOW_NAME: ${{ github.workflow }} + run: | + phone_source_path="$RUNNER_TEMP/mobile-showcase/iphone-6.9/dark/threads.png" + tablet_source_path="$RUNNER_TEMP/mobile-showcase/ipad-13/dark/threads.png" + output_directory="apps/marketing/public/mobile-states" + phone_output_path="$output_directory/threads.png" + tablet_output_path="$output_directory/ipad-threads.png" + + if [[ ! -f "$phone_source_path" || ! -f "$tablet_source_path" ]]; then + echo "Missing expected website preview source." >&2 + echo "Phone: $phone_source_path" >&2 + echo "Tablet: $tablet_source_path" >&2 + exit 1 + fi + + if [[ -f "$phone_output_path" && -f "$tablet_output_path" ]] && + cmp --silent "$phone_source_path" "$phone_output_path" && + cmp --silent "$tablet_source_path" "$tablet_output_path"; then + echo "changed=false" >> "$GITHUB_OUTPUT" + echo "Website previews already match the generated screenshots." + exit 0 + fi + + mkdir -p "$output_directory" + cp "$phone_source_path" "$phone_output_path" + cp "$tablet_source_path" "$tablet_output_path" + node --input-type=module <<'NODE' + import { writeFile } from "node:fs/promises"; + + const metadata = { + artifactId: Number(process.env.ARTIFACT_ID), + artifactName: "app-store-connect-screenshots", + artifactCreatedAt: new Date().toISOString(), + runId: Number(process.env.RUN_ID), + runUrl: process.env.RUN_URL, + headSha: process.env.HEAD_SHA, + workflow: process.env.WORKFLOW_NAME, + devices: ["iphone-6.9", "ipad-13"], + appearance: "dark", + }; + + await writeFile( + "apps/marketing/public/mobile-states/source.json", + `${JSON.stringify(metadata, null, 2)}\n`, + ); + NODE + echo "changed=true" >> "$GITHUB_OUTPUT" + + - name: Commit website preview + if: steps.preview.outputs.changed == 'true' + env: + DEFAULT_BRANCH: ${{ github.event.repository.default_branch }} + run: | + git config user.name "${{ steps.app_bot.outputs.name }}" + git config user.email "${{ steps.app_bot.outputs.email }}" + git add \ + apps/marketing/public/mobile-states/source.json \ + apps/marketing/public/mobile-states/threads.png \ + apps/marketing/public/mobile-states/ipad-threads.png + git commit -m "chore(marketing): refresh mobile showcase screenshot" + git pull --rebase origin "$DEFAULT_BRANCH" + git push origin "HEAD:$DEFAULT_BRANCH" + android: name: Android phone, 7-inch tablet, and 10-inch tablet if: inputs.platform == 'all' || inputs.platform == 'android' diff --git a/.gitignore b/.gitignore index 07793efe9b5..223d4542205 100644 --- a/.gitignore +++ b/.gitignore @@ -5,6 +5,7 @@ node_modules *.log *.tsbuildinfo apps/*/dist +apps/marketing/public/sidebar-demo infra/*/dist .astro packages/*/dist diff --git a/README.md b/README.md index bc34b3f76b4..52a247e075c 100644 --- a/README.md +++ b/README.md @@ -33,6 +33,13 @@ This will launch T3 Code's backend on your machine as well as the local web app Tip: Use `npx t3@latest --help` for the full CLI reference. +### Mobile apps + +Control your T3 Code environments from your phone or tablet: + +- [Download for iPhone and iPad on the App Store](https://apps.apple.com/us/app/t3-code-remote-claude-more/id6787819824) +- [Get the Android app on Google Play](https://play.google.com/store/apps/details?id=com.t3tools.t3code) + ### Desktop app Install the latest version of the desktop app from [GitHub Releases](https://github.com/pingdotgg/t3code/releases), or from your favorite package registry: @@ -66,6 +73,7 @@ There's no public docs site yet, checkout the miscellaneous markdown files in [d ## Documentation - [Getting started](./docs/getting-started/quick-start.md) +- [Mobile app](./docs/user/mobile-app.md) - [Remote access](./docs/user/remote-access.md) - [Keeping T3 Code in sync](./docs/user/server-updates.md) - [Architecture overview](./docs/architecture/overview.md) diff --git a/apps/marketing/astro.config.mjs b/apps/marketing/astro.config.mjs index 6f37ae922da..1d9dd09e8c2 100644 --- a/apps/marketing/astro.config.mjs +++ b/apps/marketing/astro.config.mjs @@ -1,7 +1,28 @@ import { defineConfig } from "astro/config"; +const cacheSidebarDemoAssets = { + name: "cache-sidebar-demo-assets", + configureServer(server) { + server.middlewares.use((request, response, next) => { + if (request.url?.startsWith("/sidebar-demo/assets/")) { + response.setHeader("Cache-Control", "public, max-age=31536000, immutable"); + } else if ( + request.url?.startsWith("/demo-states/") || + request.url?.startsWith("/mobile-states/") + ) { + response.setHeader("Cache-Control", "public, max-age=3600, stale-while-revalidate=86400"); + } + next(); + }); + }, +}; + export default defineConfig({ + site: "https://t3.codes", server: { port: Number(process.env.PORT ?? 4173), }, + vite: { + plugins: [cacheSidebarDemoAssets], + }, }); diff --git a/apps/marketing/package.json b/apps/marketing/package.json index 912faf88164..758307ccd1d 100644 --- a/apps/marketing/package.json +++ b/apps/marketing/package.json @@ -4,8 +4,10 @@ "private": true, "type": "module", "scripts": { - "dev": "astro dev", - "build": "astro build", + "dev": "npm run prepare:assets && astro dev", + "build": "npm run prepare:assets && astro build", + "prepare:assets": "npm run build:sidebar-demo", + "build:sidebar-demo": "npm run --prefix ../web build:sidebar-demo && node scripts/capture-demo-screenshots.mjs", "preview": "astro preview", "typecheck": "astro check" }, @@ -16,6 +18,7 @@ "devDependencies": { "@astrojs/check": "^0.9.7", "@vercel/config": "^0.3.0", + "playwright-core": "1.60.0", "typescript": "catalog:" } } diff --git a/apps/marketing/public/demo-states/browser-test-crop.png b/apps/marketing/public/demo-states/browser-test-crop.png new file mode 100644 index 00000000000..608b5af2632 Binary files /dev/null and b/apps/marketing/public/demo-states/browser-test-crop.png differ diff --git a/apps/marketing/public/demo-states/inbox-overview-crop.png b/apps/marketing/public/demo-states/inbox-overview-crop.png new file mode 100644 index 00000000000..5715394d162 Binary files /dev/null and b/apps/marketing/public/demo-states/inbox-overview-crop.png differ diff --git a/apps/marketing/public/demo-states/review-diff-crop.png b/apps/marketing/public/demo-states/review-diff-crop.png new file mode 100644 index 00000000000..d124f4834d6 Binary files /dev/null and b/apps/marketing/public/demo-states/review-diff-crop.png differ diff --git a/apps/marketing/public/demo-states/ship-commit-editor-crop.png b/apps/marketing/public/demo-states/ship-commit-editor-crop.png new file mode 100644 index 00000000000..c267832b483 Binary files /dev/null and b/apps/marketing/public/demo-states/ship-commit-editor-crop.png differ diff --git a/apps/marketing/public/harnesses/opencode-dark.svg b/apps/marketing/public/harnesses/opencode-dark.svg index fc467bf8440..bb61598f1d7 100644 --- a/apps/marketing/public/harnesses/opencode-dark.svg +++ b/apps/marketing/public/harnesses/opencode-dark.svg @@ -1 +1,16 @@ - \ No newline at end of file + + + + + + + + + + + + + + + + diff --git a/apps/marketing/public/mobile-states/ipad-threads.png b/apps/marketing/public/mobile-states/ipad-threads.png new file mode 100644 index 00000000000..3250b5e425e Binary files /dev/null and b/apps/marketing/public/mobile-states/ipad-threads.png differ diff --git a/apps/marketing/public/mobile-states/source.json b/apps/marketing/public/mobile-states/source.json new file mode 100644 index 00000000000..121b4a034f6 --- /dev/null +++ b/apps/marketing/public/mobile-states/source.json @@ -0,0 +1,11 @@ +{ + "artifactId": 8683082605, + "artifactName": "app-store-connect-screenshots", + "artifactCreatedAt": "2026-07-28T09:24:29Z", + "runId": 30345538492, + "runUrl": "https://github.com/pingdotgg/t3code/actions/runs/30345538492", + "headSha": "d25b15737a058614ab6632bbad23d2497e49b62c", + "workflow": "mobile-showcase-screenshots.yml", + "devices": ["iphone-6.9", "ipad-13"], + "appearance": "dark" +} diff --git a/apps/marketing/public/mobile-states/threads.png b/apps/marketing/public/mobile-states/threads.png new file mode 100644 index 00000000000..056e30968e5 Binary files /dev/null and b/apps/marketing/public/mobile-states/threads.png differ diff --git a/apps/marketing/public/nightly-clouds-foreground.webp b/apps/marketing/public/nightly-clouds-foreground.webp new file mode 100644 index 00000000000..a1ef48fdab2 Binary files /dev/null and b/apps/marketing/public/nightly-clouds-foreground.webp differ diff --git a/apps/marketing/public/nightly-clouds.webp b/apps/marketing/public/nightly-clouds.webp new file mode 100644 index 00000000000..a3c249aa539 Binary files /dev/null and b/apps/marketing/public/nightly-clouds.webp differ diff --git a/apps/marketing/public/nightly-stars.svg b/apps/marketing/public/nightly-stars.svg new file mode 100644 index 00000000000..5f6d87228a7 --- /dev/null +++ b/apps/marketing/public/nightly-stars.svg @@ -0,0 +1,50 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/marketing/public/og-image.png b/apps/marketing/public/og-image.png new file mode 100644 index 00000000000..baeab0f55fb Binary files /dev/null and b/apps/marketing/public/og-image.png differ diff --git a/apps/marketing/public/og-source.png b/apps/marketing/public/og-source.png new file mode 100644 index 00000000000..1b93f682e78 Binary files /dev/null and b/apps/marketing/public/og-source.png differ diff --git a/apps/marketing/public/store-logos/appstore.svg b/apps/marketing/public/store-logos/appstore.svg new file mode 100644 index 00000000000..6e395d1607e --- /dev/null +++ b/apps/marketing/public/store-logos/appstore.svg @@ -0,0 +1 @@ + diff --git a/apps/marketing/public/store-logos/googleplay.svg b/apps/marketing/public/store-logos/googleplay.svg new file mode 100644 index 00000000000..b2b4122a653 --- /dev/null +++ b/apps/marketing/public/store-logos/googleplay.svg @@ -0,0 +1 @@ + diff --git a/apps/marketing/scripts/capture-demo-screenshots.mjs b/apps/marketing/scripts/capture-demo-screenshots.mjs new file mode 100644 index 00000000000..c374c35483f --- /dev/null +++ b/apps/marketing/scripts/capture-demo-screenshots.mjs @@ -0,0 +1,676 @@ +import * as NodeFSP from "node:fs/promises"; +import * as NodeHttp from "node:http"; +import * as NodeOS from "node:os"; +import * as NodePath from "node:path"; +import * as NodeURL from "node:url"; + +import { chromium } from "playwright-core"; + +const marketingRoot = NodePath.resolve(NodeURL.fileURLToPath(new URL("..", import.meta.url))); +const publicRoot = NodePath.join(marketingRoot, "public"); +const outputRoot = NodePath.join(publicRoot, "demo-states"); +const ogOutputPath = NodePath.join(publicRoot, "og-image.png"); +const ogSourceOutputPath = NodePath.join(publicRoot, "og-source.png"); +const showcaseSpec = JSON.parse( + await NodeFSP.readFile(NodePath.join(marketingRoot, "src", "lib", "showcase-spec.json"), "utf8"), +); +const ogStudioSetup = JSON.parse( + await NodeFSP.readFile( + NodePath.join(marketingRoot, "src", "lib", "og-studio-setup.json"), + "utf8", + ), +); +const captureSize = showcaseSpec.render; +const viewport = { width: captureSize.width, height: captureSize.height }; +const ogCaptureSize = { width: 1200, height: 630 }; +const ogSourceViewport = { width: 1440, height: 810 }; +const featureClip = (x, y, width) => ({ + x, + y, + width, + height: Math.round((width * captureSize.height) / captureSize.width), +}); + +const frozenMotionCss = ` + *, *::before, *::after { + animation-delay: 0s !important; + animation-duration: 0s !important; + caret-color: transparent !important; + transition-duration: 0s !important; + } +`; + +const toDataUrl = (mimeType, bytes) => `data:${mimeType};base64,${bytes.toString("base64")}`; + +const ogVertexShaderSource = ` + attribute vec3 aPosition; + attribute vec2 aUv; + uniform float uPitch; + uniform float uYaw; + uniform float uRoll; + uniform float uFov; + uniform float uScale; + uniform float uDistance; + uniform vec2 uOffset; + uniform float uViewportAspect; + varying vec2 vUv; + varying float vDepth; + + vec3 rotateX(vec3 point, float angle) { + float sine = sin(angle); + float cosine = cos(angle); + return vec3(point.x, cosine * point.y - sine * point.z, sine * point.y + cosine * point.z); + } + + vec3 rotateY(vec3 point, float angle) { + float sine = sin(angle); + float cosine = cos(angle); + return vec3(cosine * point.x + sine * point.z, point.y, -sine * point.x + cosine * point.z); + } + + vec3 rotateZ(vec3 point, float angle) { + float sine = sin(angle); + float cosine = cos(angle); + return vec3(cosine * point.x - sine * point.y, sine * point.x + cosine * point.y, point.z); + } + + void main() { + vec3 point = aPosition * uScale; + point = rotateX(point, uPitch); + point = rotateY(point, uYaw); + point = rotateZ(point, uRoll); + point += vec3(uOffset, -uDistance); + float focal = 1.0 / tan(uFov * 0.5); + gl_Position = vec4( + point.x * focal / uViewportAspect, + point.y * focal, + 0.0, + -point.z + ); + vUv = aUv; + vDepth = -point.z; + } +`; + +const ogFragmentShaderSource = ` + precision highp float; + uniform sampler2D uTexture0; + uniform sampler2D uTexture1; + uniform sampler2D uTexture2; + uniform sampler2D uTexture3; + uniform sampler2D uTexture4; + uniform float uFocusDistance; + uniform float uFarBlur; + uniform float uNearBlur; + uniform float uMaxBlur; + uniform float uFarFade; + uniform float uNearFade; + uniform float uBrightness; + uniform float uSaturation; + uniform float uVignette; + uniform float uEdgeFade; + uniform float uCornerRadius; + varying vec2 vUv; + varying float vDepth; + + vec4 sampleLens(vec2 uv, float radius) { + if (radius < 6.0) { + return mix( + texture2D(uTexture0, uv), + texture2D(uTexture1, uv), + smoothstep(0.0, 6.0, radius) + ); + } + if (radius < 14.0) { + return mix( + texture2D(uTexture1, uv), + texture2D(uTexture2, uv), + smoothstep(6.0, 14.0, radius) + ); + } + if (radius < 28.0) { + return mix( + texture2D(uTexture2, uv), + texture2D(uTexture3, uv), + smoothstep(14.0, 28.0, radius) + ); + } + return mix( + texture2D(uTexture3, uv), + texture2D(uTexture4, uv), + smoothstep(28.0, 56.0, radius) + ); + } + + float roundedRectangleMask(vec2 uv, float radius) { + vec2 point = abs(uv - 0.5) - vec2(0.5 - radius); + float distance = length(max(point, 0.0)) + min(max(point.x, point.y), 0.0) - radius; + return 1.0 - smoothstep(0.0, 0.004, distance); + } + + void main() { + float depthDelta = vDepth - uFocusDistance; + float rawBlur = depthDelta >= 0.0 + ? depthDelta * uFarBlur + : -depthDelta * uNearBlur; + float focusFalloff = smoothstep(0.02, 0.22, abs(depthDelta)); + float blurRadius = uMaxBlur > 0.0 + ? uMaxBlur * (1.0 - exp(-max(rawBlur, 0.0) / max(uMaxBlur, 0.001))) + : 0.0; + blurRadius *= focusFalloff; + + vec4 color = sampleLens(vUv, blurRadius); + float luminance = dot(color.rgb, vec3(0.2126, 0.7152, 0.0722)); + color.rgb = mix(vec3(luminance), color.rgb, uSaturation); + + float farAmount = smoothstep(0.0, 1.35, max(depthDelta, 0.0)); + float nearAmount = smoothstep(0.0, 1.35, max(-depthDelta, 0.0)); + float depthLight = (1.0 - farAmount * uFarFade) * (1.0 - nearAmount * uNearFade); + + vec2 vignettePoint = (vUv - 0.5) * vec2(0.82, 1.0); + float vignetteMask = 1.0 - smoothstep(0.24, 0.72, length(vignettePoint)); + float vignetteLight = mix(1.0, vignetteMask, uVignette); + + float edge = max(uEdgeFade, 0.0001); + float edgeMask = + smoothstep(0.0, edge, vUv.x) * + smoothstep(0.0, edge, vUv.y) * + smoothstep(0.0, edge, 1.0 - vUv.x) * + smoothstep(0.0, edge, 1.0 - vUv.y); + float shapeMask = roundedRectangleMask(vUv, uCornerRadius); + + color.rgb *= uBrightness * depthLight * vignetteLight; + color.a *= edgeMask * shapeMask; + gl_FragColor = color; + } +`; + +async function freezeMotion(page) { + await page.addStyleTag({ content: frozenMotionCss }); +} + +async function waitForDemoReady(page) { + await page.getByText("All projects", { exact: true }).first().waitFor({ + state: "visible", + timeout: 30_000, + }); +} + +function ogSceneHtml({ demoFrameDataUrl }) { + const state = ogStudioSetup.state; + return ` + + + + + + + + +
T3 Code
+ + +`; +} + +function browserDemoHtml(mode) { + const annotating = mode === "annotate"; + return ` + + +
ThreadDiffBrowser
‹›↻
localhost:4321

Build the next thing, faster.

A focused workspace for teams shipping ambitious products without the usual noise.

Start building →
${annotating ? '
section.hero
⌁
' : '
Browser test7 passed
Navigation linksCTA remains visibleMobile menu opensNo console errors
'}
+`; +} + +const states = [ + { + name: "inbox-overview-crop", + hash: "#/demo-mac-studio/thread-flaky", + clip: featureClip(0, 0, 720), + deviceScaleFactor: 3, + }, + { + name: "ship-commit-editor-crop", + hash: "#/demo-mac-studio/thread-flaky", + clip: featureClip(0, 0, captureSize.width), + deviceScaleFactor: 3, + prepare: async (page) => { + await page.locator('button[aria-label="Git action options"]').click(); + await page.getByText("Commit", { exact: true }).last().click(); + await page.getByText("Commit changes", { exact: true }).waitFor({ state: "visible" }); + await page + .getByPlaceholder("Leave empty to auto-generate") + .fill("Deflake GitManager cross-repo metadata test"); + }, + }, + { + name: "review-diff-crop", + hash: "#/demo-mac-studio/thread-composer", + clip: featureClip(510, 50, 570), + deviceScaleFactor: 4, + }, + { + name: "browser-test-crop", + standalone: "test", + clip: featureClip(270, 42, 810), + deviceScaleFactor: 3, + }, +]; + +const mimeTypes = new Map([ + [".css", "text/css; charset=utf-8"], + [".html", "text/html; charset=utf-8"], + [".ico", "image/x-icon"], + [".js", "text/javascript; charset=utf-8"], + [".json", "application/json; charset=utf-8"], + [".png", "image/png"], + [".svg", "image/svg+xml"], + [".webp", "image/webp"], + [".woff", "font/woff"], + [".woff2", "font/woff2"], +]); + +async function exists(path) { + try { + await NodeFSP.access(path); + return true; + } catch { + return false; + } +} + +async function findChromium() { + const candidates = [ + process.env.CHROME_BIN, + chromium.executablePath(), + "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome", + "/Applications/Chromium.app/Contents/MacOS/Chromium", + "/usr/bin/google-chrome", + "/usr/bin/chromium", + ].filter(Boolean); + + const playwrightCache = NodePath.join(NodeOS.homedir(), "Library", "Caches", "ms-playwright"); + if (await exists(playwrightCache)) { + const macChromeDirectories = ["chrome-mac-arm64", "chrome-mac-x64"]; + const revisions = (await NodeFSP.readdir(playwrightCache, { withFileTypes: true })) + .filter((entry) => entry.isDirectory() && entry.name.startsWith("chromium-")) + .map((entry) => entry.name) + .sort() + .toReversed(); + for (const revision of revisions) { + for (const macChromeDirectory of macChromeDirectories) { + candidates.push( + NodePath.join( + playwrightCache, + revision, + macChromeDirectory, + "Google Chrome for Testing.app", + "Contents", + "MacOS", + "Google Chrome for Testing", + ), + ); + } + } + } + + for (const candidate of candidates) { + if (await exists(candidate)) return candidate; + } + return null; +} + +function startStaticServer() { + const server = NodeHttp.createServer(async (request, response) => { + try { + const requestUrl = new URL(request.url ?? "/", "http://127.0.0.1"); + const relativePath = NodePath.normalize(decodeURIComponent(requestUrl.pathname)).replace( + /^[/\\]+/, + "", + ); + let filePath = NodePath.resolve(publicRoot, relativePath); + const pathFromPublicRoot = NodePath.relative(publicRoot, filePath); + if ( + pathFromPublicRoot === ".." || + pathFromPublicRoot.startsWith(`..${NodePath.sep}`) || + NodePath.isAbsolute(pathFromPublicRoot) + ) { + response.writeHead(403).end(); + return; + } + if ((await NodeFSP.stat(filePath)).isDirectory()) { + filePath = NodePath.join(filePath, "index.html"); + } + const body = await NodeFSP.readFile(filePath); + response.setHeader( + "Content-Type", + mimeTypes.get(NodePath.extname(filePath)) ?? "application/octet-stream", + ); + response.setHeader("Cache-Control", "no-store"); + response.end(body); + } catch { + response.writeHead(404).end(); + } + }); + + return new Promise((resolveServer, reject) => { + server.once("error", reject); + server.listen(0, "127.0.0.1", () => { + const address = server.address(); + if (!address || typeof address === "string") { + reject(new Error("Could not resolve the demo capture server port.")); + return; + } + resolveServer({ + origin: `http://localhost:${address.port}`, + close: () => new Promise((resolveClose) => server.close(resolveClose)), + }); + }); + }); +} + +async function outputsExist() { + const demoOutputsExist = ( + await Promise.all(states.map(({ name }) => exists(NodePath.join(outputRoot, `${name}.png`)))) + ).every(Boolean); + return demoOutputsExist && (await exists(ogOutputPath)) && (await exists(ogSourceOutputPath)); +} + +const executablePath = await findChromium(); +if (!executablePath) { + if (await outputsExist()) { + console.warn("[marketing] Chromium unavailable; keeping committed demo screenshots."); + process.exit(0); + } + throw new Error("Chromium is required to create the initial marketing demo screenshots."); +} + +const hadCommittedOutputs = await outputsExist(); +const temporaryOutputRoot = await NodeFSP.mkdtemp( + NodePath.join(NodeOS.tmpdir(), "t3-marketing-demo-"), +); +let staticServer; +let browser; + +try { + staticServer = await startStaticServer(); + browser = await chromium.launch({ executablePath, headless: true }); + + for (const state of states) { + const page = await browser.newPage({ + colorScheme: "dark", + deviceScaleFactor: state.deviceScaleFactor ?? captureSize.deviceScaleFactor, + viewport, + }); + try { + if (state.standalone) { + await page.setContent(browserDemoHtml(state.standalone), { + waitUntil: "domcontentloaded", + }); + } else { + await page.goto(`${staticServer.origin}/sidebar-demo/demo.html${state.hash}`, { + waitUntil: "domcontentloaded", + }); + await waitForDemoReady(page); + } + await freezeMotion(page); + await state.prepare?.(page); + await page.waitForTimeout(400); + await page.screenshot({ + path: NodePath.join(temporaryOutputRoot, `${state.name}.png`), + type: "png", + clip: state.clip, + }); + } finally { + await page.close(); + } + } + + let demoFrameBytes; + const sourcePage = await browser.newPage({ + colorScheme: "dark", + deviceScaleFactor: 2, + viewport: ogSourceViewport, + }); + try { + await sourcePage.goto( + `${staticServer.origin}/sidebar-demo/demo.html#/demo-mac-studio/thread-flaky`, + { waitUntil: "domcontentloaded" }, + ); + await waitForDemoReady(sourcePage); + await freezeMotion(sourcePage); + const modelPickerTrigger = sourcePage.locator('[data-chat-provider-model-picker="true"]'); + const modelPickerTriggerCount = await modelPickerTrigger.count(); + if (modelPickerTriggerCount !== 1) { + throw new Error(`Expected one demo model picker trigger, found ${modelPickerTriggerCount}.`); + } + await modelPickerTrigger.click(); + await sourcePage.locator('[data-model-picker-content="true"]').waitFor({ + state: "visible", + timeout: 10_000, + }); + await sourcePage.waitForTimeout(300); + demoFrameBytes = await sourcePage.screenshot({ type: "png" }); + await NodeFSP.writeFile(NodePath.join(temporaryOutputRoot, "og-source.png"), demoFrameBytes); + } finally { + await sourcePage.close(); + } + + const ogPage = await browser.newPage({ + colorScheme: "dark", + deviceScaleFactor: 1, + viewport: ogCaptureSize, + }); + try { + await ogPage.setContent( + ogSceneHtml({ + demoFrameDataUrl: toDataUrl("image/png", demoFrameBytes), + }), + { waitUntil: "domcontentloaded" }, + ); + await ogPage.waitForFunction( + () => + document.documentElement.dataset.rendered === "true" && + Array.from(document.images).every((image) => image.complete && image.naturalWidth > 0), + ); + await ogPage.screenshot({ + path: NodePath.join(temporaryOutputRoot, "og-image.png"), + type: "png", + }); + } finally { + await ogPage.close(); + } + + await NodeFSP.mkdir(outputRoot, { recursive: true }); + for (const state of states) { + await NodeFSP.copyFile( + NodePath.join(temporaryOutputRoot, `${state.name}.png`), + NodePath.join(outputRoot, `${state.name}.png`), + ); + console.log(`[marketing] captured demo-states/${state.name}.png`); + } + await NodeFSP.copyFile(NodePath.join(temporaryOutputRoot, "og-image.png"), ogOutputPath); + console.log("[marketing] captured og-image.png"); + await NodeFSP.copyFile(NodePath.join(temporaryOutputRoot, "og-source.png"), ogSourceOutputPath); + console.log("[marketing] captured og-source.png"); +} catch (error) { + if (!hadCommittedOutputs) throw error; + console.warn( + `[marketing] demo capture failed; keeping committed screenshots (${String(error)}).`, + ); +} finally { + if (browser) await browser.close(); + if (staticServer) await staticServer.close(); + await NodeFSP.rm(temporaryOutputRoot, { recursive: true, force: true }); +} diff --git a/apps/marketing/src/assets/t3-dev-384.webp b/apps/marketing/src/assets/t3-dev-384.webp new file mode 100644 index 00000000000..6c30dc4f847 Binary files /dev/null and b/apps/marketing/src/assets/t3-dev-384.webp differ diff --git a/apps/marketing/src/assets/t3-latest-384.webp b/apps/marketing/src/assets/t3-latest-384.webp new file mode 100644 index 00000000000..a26a61259a4 Binary files /dev/null and b/apps/marketing/src/assets/t3-latest-384.webp differ diff --git a/apps/marketing/src/assets/t3-nightly-384.webp b/apps/marketing/src/assets/t3-nightly-384.webp new file mode 100644 index 00000000000..f4a802cd510 Binary files /dev/null and b/apps/marketing/src/assets/t3-nightly-384.webp differ diff --git a/apps/marketing/src/components/LegalPage.astro b/apps/marketing/src/components/LegalPage.astro index eb824039e98..65e3d9988ab 100644 --- a/apps/marketing/src/components/LegalPage.astro +++ b/apps/marketing/src/components/LegalPage.astro @@ -9,13 +9,27 @@ interface Props { readonly effectiveDate: string; readonly lastUpdated: string; readonly sections: ReadonlyArray; + readonly simple?: boolean; } -const { title, description, heading, lede, effectiveDate, lastUpdated, sections } = Astro.props; +const { + title, + description, + heading, + lede, + effectiveDate, + lastUpdated, + sections, + simple = false, +} = Astro.props; --- - -
+ +
All legal documents

T3 Tools, Inc. / Legal

@@ -36,19 +50,23 @@ const { title, description, heading, lede, effectiveDate, lastUpdated, sections
- + { + !simple && ( + + ) + }
@@ -103,9 +121,11 @@ const { title, description, heading, lede, effectiveDate, lastUpdated, sections frame = window.requestAnimationFrame(updateActiveSection); }; - updateActiveSection(); - window.addEventListener("scroll", scheduleUpdate, { passive: true }); - window.addEventListener("resize", scheduleUpdate); + if (sections.length > 0) { + updateActiveSection(); + window.addEventListener("scroll", scheduleUpdate, { passive: true }); + window.addEventListener("resize", scheduleUpdate); + } diff --git a/apps/marketing/src/layouts/Layout.astro b/apps/marketing/src/layouts/Layout.astro index f5e34d0e048..05b75dbeaf3 100644 --- a/apps/marketing/src/layouts/Layout.astro +++ b/apps/marketing/src/layouts/Layout.astro @@ -1,60 +1,121 @@ --- -import { - ANDROID_PLAY_STORE_URL, - GITHUB_REPOSITORY_URL, - IOS_APP_STORE_URL, - MARKETING_STATS, -} from "../lib/site"; +import devAppIcon from "../assets/t3-dev-384.webp?url"; +import nightlyAppIcon from "../assets/t3-nightly-384.webp?url"; +import stableAppIcon from "../assets/t3-latest-384.webp?url"; +import { GITHUB_REPOSITORY_URL } from "../lib/site"; interface Props { title?: string; description?: string; pageClass?: string; + favicon?: string; + socialImage?: string; + socialImageAlt?: string; } const { title = "T3 Code", description = "T3 Code — The open-source control plane for coding agents.", pageClass, + favicon = stableAppIcon, + socialImage = "/og-image.png", + socialImageAlt = "T3 Code model picker shown in cinematic perspective", } = Astro.props; + +const siteUrl = Astro.site ?? Astro.url; +const canonicalUrl = new URL(Astro.url.pathname, siteUrl); +const socialImageUrl = new URL(socialImage, siteUrl); --- - + + + + + + + + + + + + + + + + - - - + {title} +
diff --git a/apps/marketing/src/lib/og-studio-setup.json b/apps/marketing/src/lib/og-studio-setup.json new file mode 100644 index 00000000000..64a5e7a1e1f --- /dev/null +++ b/apps/marketing/src/lib/og-studio-setup.json @@ -0,0 +1,36 @@ +{ + "type": "t3-og-studio", + "version": 1, + "source": "/og-source.png", + "reference": "https://s40vlb3kca.ufs.sh/f/7v4pu1gTNmoZsyZ4fYXtUbqn3AQHWiPTI2GYSfl71vd6trxk.jpg", + "state": { + "offsetX": 0.030292746298405476, + "offsetY": 0.17619904891304355, + "distance": 3.574999999999993, + "pitch": -48.1, + "yaw": -35.7, + "roll": 23.8, + "fov": 41, + "scale": 1.76, + "focusDistance": 3.334999999999993, + "farBlur": 3, + "nearBlur": 0, + "maxBlur": 17, + "farFade": 0.4, + "nearFade": 0, + "brightness": 1.16, + "saturation": 1.08, + "vignette": 0.03, + "edgeFade": 0, + "cornerRadius": 0.1025, + "background": "#000000", + "referenceOpacity": 0.58, + "referenceBlend": "normal", + "referenceVisible": false, + "logoVisible": true, + "guidesVisible": false, + "logoX": 72, + "logoY": 62, + "logoScale": 1.35 + } +} diff --git a/apps/marketing/src/lib/releases.test.ts b/apps/marketing/src/lib/releases.test.ts new file mode 100644 index 00000000000..5833e02ce6c --- /dev/null +++ b/apps/marketing/src/lib/releases.test.ts @@ -0,0 +1,85 @@ +import { describe, expect, it } from "vite-plus/test"; +import { findReleaseAssetUrl, selectNightlyRelease, type Release } from "./releases"; + +function release( + tag_name: string, + options: Pick = { + draft: false, + prerelease: true, + }, +): Release { + return { + tag_name, + html_url: `https://github.com/pingdotgg/t3code/releases/tag/${tag_name}`, + assets: [], + ...options, + }; +} + +describe("selectNightlyRelease", () => { + it("selects the newest published nightly prerelease regardless of list order", () => { + const nightly = release("v0.0.32-nightly.20260729.951"); + + expect( + selectNightlyRelease([ + release("v0.0.33-nightly.20260730.1", { draft: true, prerelease: true }), + release("v0.0.32-nightly.20260729.949"), + release("v0.0.32"), + release("v0.0.32-nightly.20260728.912"), + nightly, + ]), + ).toBe(nightly); + }); + + it("uses the run number to order nightlies from the same date", () => { + const nightly = release("v0.0.32-nightly.20260729.1002"); + + expect( + selectNightlyRelease([ + release("v0.0.32-nightly.20260729.999"), + nightly, + release("v0.0.33-nightly.20260729.1001"), + ]), + ).toBe(nightly); + }); + + it("ignores prereleases that are not nightly builds", () => { + expect(selectNightlyRelease([release("v0.0.33-beta.1")])).toBeNull(); + }); +}); + +describe("findReleaseAssetUrl", () => { + const assets = [ + { + name: "T3-Code-v1.2.3-arm64.dmg", + browser_download_url: "https://example.com/arm64.dmg", + }, + { + name: "T3-Code-v1.2.3-x64.dmg", + browser_download_url: "https://example.com/x64.dmg", + }, + { + name: "T3-Code-v1.2.3-x64.exe", + browser_download_url: "https://example.com/x64.exe", + }, + { + name: "T3-Code-v1.2.3.AppImage", + browser_download_url: "https://example.com/appimage", + }, + ]; + + it("does not guess a macOS architecture", () => { + expect(findReleaseAssetUrl(assets, { os: "mac" })).toBeNull(); + }); + + it("selects a macOS asset when the architecture is known", () => { + expect(findReleaseAssetUrl(assets, { os: "mac", arch: "x64" })).toBe( + "https://example.com/x64.dmg", + ); + }); + + it("selects platform-specific Windows and Linux assets", () => { + expect(findReleaseAssetUrl(assets, { os: "win" })).toBe("https://example.com/x64.exe"); + expect(findReleaseAssetUrl(assets, { os: "linux" })).toBe("https://example.com/appimage"); + }); +}); diff --git a/apps/marketing/src/lib/releases.ts b/apps/marketing/src/lib/releases.ts index 5f3209acf89..1315fb20af3 100644 --- a/apps/marketing/src/lib/releases.ts +++ b/apps/marketing/src/lib/releases.ts @@ -1,30 +1,166 @@ const REPO = "pingdotgg/t3code"; export const RELEASES_URL = `https://github.com/${REPO}/releases`; +export const NIGHTLY_RELEASES_URL = `${RELEASES_URL}?q=nightly&expanded=true`; -const API_URL = `https://api.github.com/repos/${REPO}/releases/latest`; -const CACHE_KEY = "t3code-latest-release"; +const LATEST_API_URL = `https://api.github.com/repos/${REPO}/releases/latest`; +const RELEASES_API_URL = `https://api.github.com/repos/${REPO}/releases?per_page=100`; +const LATEST_CACHE_KEY = "t3code-latest-release"; +const NIGHTLY_CACHE_KEY = "t3code-nightly-release"; +const RELEASE_CACHE_TTL_MS = 5 * 60 * 1_000; +const NIGHTLY_TAG_PATTERN = /-nightly\.(\d{8})\.(\d+)$/; export interface ReleaseAsset { name: string; browser_download_url: string; } +export interface ReleasePlatform { + os: "mac" | "win" | "linux"; + arch?: "arm64" | "x64"; +} + export interface Release { tag_name: string; html_url: string; assets: ReleaseAsset[]; + draft?: boolean; + prerelease?: boolean; } -export async function fetchLatestRelease(): Promise { - const cached = sessionStorage.getItem(CACHE_KEY); - if (cached) return JSON.parse(cached); +export function findReleaseAssetUrl( + assets: readonly ReleaseAsset[], + platform: ReleasePlatform, +): string | null { + if (platform.os === "win") { + return assets.find((asset) => asset.name.endsWith("-x64.exe"))?.browser_download_url ?? null; + } + if (platform.os === "mac") { + if (!platform.arch) return null; + return ( + assets.find((asset) => asset.name.endsWith(`-${platform.arch}.dmg`))?.browser_download_url ?? + null + ); + } + return assets.find((asset) => asset.name.endsWith(".AppImage"))?.browser_download_url ?? null; +} + +interface CachedRelease { + cachedAt: number; + release: Release; +} + +function readCachedRelease(key: string): Release | null { + let cached: string | null; + try { + cached = sessionStorage.getItem(key); + } catch { + return null; + } + if (!cached) return null; - const data = await fetch(API_URL).then((r) => r.json()); + try { + const value: unknown = JSON.parse(cached); + if ( + value !== null && + typeof value === "object" && + "cachedAt" in value && + typeof value.cachedAt === "number" && + "release" in value && + isRelease(value.release) && + Date.now() - value.cachedAt < RELEASE_CACHE_TTL_MS + ) { + return value.release; + } + removeCachedRelease(key); + return null; + } catch { + removeCachedRelease(key); + return null; + } +} - if (data?.assets) { - sessionStorage.setItem(CACHE_KEY, JSON.stringify(data)); +function writeCachedRelease(key: string, release: Release): void { + const cached: CachedRelease = { cachedAt: Date.now(), release }; + try { + sessionStorage.setItem(key, JSON.stringify(cached)); + } catch { + // Release loading still succeeds when storage is unavailable or full. } +} +function removeCachedRelease(key: string): void { + try { + sessionStorage.removeItem(key); + } catch { + // An inaccessible cache is equivalent to a miss. + } +} + +async function fetchJson(url: string): Promise { + const response = await fetch(url); + if (!response.ok) { + throw new Error(`GitHub release request failed with ${response.status}`); + } + return response.json(); +} + +function isRelease(value: unknown): value is Release { + if (!value || typeof value !== "object") return false; + const release = value as Partial; + return ( + typeof release.tag_name === "string" && + typeof release.html_url === "string" && + Array.isArray(release.assets) + ); +} + +export function selectNightlyRelease(releases: readonly Release[]): Release | null { + let selected: { release: Release; date: string; run: number } | null = null; + + for (const release of releases) { + if (release.draft || release.prerelease !== true) continue; + const match = NIGHTLY_TAG_PATTERN.exec(release.tag_name); + if (!match) continue; + + const candidate = { + release, + date: match[1]!, + run: Number(match[2]), + }; + if ( + selected === null || + candidate.date > selected.date || + (candidate.date === selected.date && candidate.run > selected.run) + ) { + selected = candidate; + } + } + + return selected?.release ?? null; +} + +export async function fetchLatestRelease(): Promise { + const cached = readCachedRelease(LATEST_CACHE_KEY); + if (cached) return cached; + + const data = await fetchJson(LATEST_API_URL); + if (!isRelease(data)) throw new Error("GitHub returned an invalid latest release"); + + writeCachedRelease(LATEST_CACHE_KEY, data); return data; } + +export async function fetchNightlyRelease(): Promise { + const cached = readCachedRelease(NIGHTLY_CACHE_KEY); + if (cached) return cached; + + const data = await fetchJson(RELEASES_API_URL); + if (!Array.isArray(data)) throw new Error("GitHub returned an invalid releases list"); + + const nightly = selectNightlyRelease(data.filter(isRelease)); + if (!nightly) throw new Error("No nightly release was found"); + + writeCachedRelease(NIGHTLY_CACHE_KEY, nightly); + return nightly; +} diff --git a/apps/marketing/src/lib/showcase-spec.json b/apps/marketing/src/lib/showcase-spec.json new file mode 100644 index 00000000000..db6e6c0cb59 --- /dev/null +++ b/apps/marketing/src/lib/showcase-spec.json @@ -0,0 +1,77 @@ +{ + "render": { + "width": 1080, + "height": 620, + "deviceScaleFactor": 2 + }, + "sections": [ + { + "id": "inbox", + "eyebrow": "Inbox", + "title": "Every agent, one inbox.", + "description": "See every agent and clear finished work.", + "link": { + "label": "How threads work", + "href": "https://github.com/pingdotgg/t3code/blob/main/docs/reference/encyclopedia.md#thread-timeline" + }, + "images": [ + { + "src": "/demo-states/inbox-overview-crop.png?v=2", + "alt": "A cropped T3 Code workspace showing running, approval, and finished agent threads", + "label": "Agent inbox" + } + ] + }, + { + "id": "git", + "eyebrow": "Ship", + "title": "Ship from the thread.", + "description": "Review files, commit changes, and open a pull request.", + "link": { + "label": "Set up source control", + "href": "https://github.com/pingdotgg/t3code/blob/main/docs/integrations/source-control-providers.md" + }, + "images": [ + { + "src": "/demo-states/ship-commit-editor-crop.png?v=2", + "alt": "A cropped T3 Code commit editor with changed files and a commit message", + "label": "Commit editor" + } + ] + }, + { + "id": "browser", + "eyebrow": "Browser", + "title": "Test in the same workspace.", + "description": "Open localhost, test the UI, and send failures back.", + "link": { + "label": "View browser shortcuts", + "href": "https://github.com/pingdotgg/t3code/blob/main/docs/user/keybindings.md#defaults" + }, + "images": [ + { + "src": "/demo-states/browser-test-crop.png?v=2", + "alt": "A cropped T3 Code browser preview showing a local website under test", + "label": "In-app browser" + } + ] + }, + { + "id": "diffs", + "eyebrow": "Review", + "title": "Review code in context.", + "description": "Open focused diffs beside the conversation.", + "link": { + "label": "How turn diffs work", + "href": "https://github.com/pingdotgg/t3code/blob/main/docs/reference/encyclopedia.md#checkpointing" + }, + "images": [ + { + "src": "/demo-states/review-diff-crop.png?v=2", + "alt": "A cropped T3 Code workspace showing a conversation beside its code diff", + "label": "Code review" + } + ] + } + ] +} diff --git a/apps/marketing/src/lib/site.ts b/apps/marketing/src/lib/site.ts index 0bf89db8c0f..1d4f93f31e5 100644 --- a/apps/marketing/src/lib/site.ts +++ b/apps/marketing/src/lib/site.ts @@ -1,10 +1,8 @@ export const GITHUB_REPOSITORY_URL = "https://github.com/pingdotgg/t3code"; - export const IOS_APP_STORE_URL = "https://apps.apple.com/us/app/t3-code-remote-claude-more/id6787819824"; - -export const ANDROID_PLAY_STORE_URL = - "https://play.google.com/store/apps/details?id=com.t3tools.t3code"; +export const GOOGLE_PLAY_STORE_URL = + "https://play.google.com/store/apps/details?id=com.t3tools.t3code&pli=1"; export const MARKETING_STATS = { githubStars: "14k+", diff --git a/apps/marketing/src/pages/download.astro b/apps/marketing/src/pages/download.astro index 111482208cf..c42891e6708 100644 --- a/apps/marketing/src/pages/download.astro +++ b/apps/marketing/src/pages/download.astro @@ -1,20 +1,83 @@ --- import Layout from "../layouts/Layout.astro"; import { RELEASES_URL } from "../lib/releases"; -import { ANDROID_PLAY_STORE_URL, IOS_APP_STORE_URL } from "../lib/site"; +import { + GITHUB_REPOSITORY_URL, + GOOGLE_PLAY_STORE_URL, + IOS_APP_STORE_URL, +} from "../lib/site"; +import "../styles/stage-sky.css"; --- - +
+

Download T3 Code

+

Pick a desktop release channel. Mobile apps use the current store release.

+
+ + + +

- Loading latest release… + Loading latest desktop release…

+ + -
+

macOS

@@ -32,7 +95,7 @@ import { ANDROID_PLAY_STORE_URL, IOS_APP_STORE_URL } from "../lib/site";
-
+

Windows

@@ -46,7 +109,7 @@ import { ANDROID_PLAY_STORE_URL, IOS_APP_STORE_URL } from "../lib/site";
-
+

Linux

@@ -62,25 +125,48 @@ import { ANDROID_PLAY_STORE_URL, IOS_APP_STORE_URL } from "../lib/site";
- +

Mobile

- - iPhone & iPad - App Store + + iPhone and iPad + App Store - - Android - Google Play + + Android phones and tablets + Google Play

- Looking for older versions? Check the - + Looking for another build? Check the{" "} + GitHub releases page

@@ -88,57 +174,140 @@ import { ANDROID_PLAY_STORE_URL, IOS_APP_STORE_URL } from "../lib/site"; diff --git a/apps/marketing/src/pages/index.astro b/apps/marketing/src/pages/index.astro index 20fae288279..0df73b2b142 100644 --- a/apps/marketing/src/pages/index.astro +++ b/apps/marketing/src/pages/index.astro @@ -1,11 +1,11 @@ --- +import devAppIcon from "../assets/t3-dev-384.webp?url"; +import nightlyAppIcon from "../assets/t3-nightly-384.webp?url"; +import stableAppIcon from "../assets/t3-latest-384.webp?url"; import Layout from "../layouts/Layout.astro"; -import { - ANDROID_PLAY_STORE_URL, - GITHUB_REPOSITORY_URL, - IOS_APP_STORE_URL, - MARKETING_STATS, -} from "../lib/site"; +import showcaseSpec from "../lib/showcase-spec.json"; +import { GOOGLE_PLAY_STORE_URL, IOS_APP_STORE_URL, MARKETING_STATS } from "../lib/site"; +import "../styles/stage-sky.css"; import { tweets } from "../lib/tweets"; const desktopEndorsementRows = [ @@ -18,42 +18,85 @@ const mobileEndorsementRows = [ tweets.filter((_, index) => index % 3 === 1), tweets.filter((_, index) => index % 3 === 2), ]; + +const featureShowcases = showcaseSpec.sections; +const showcaseRender = showcaseSpec.render; + +const faqs = [ + { + question: "What is T3 Code?", + answer: + "T3 Code is a free, open-source control center for coding agents. It is not another agent or model.", + link: { + label: "Explore the source", + href: "https://github.com/pingdotgg/t3code", + }, + }, + { + question: "Why use it?", + answer: + "Run your agents, projects, threads, diffs, terminals, and pull requests in one fast workspace. Start at your desk, then check in from the web or your phone.", + link: { + label: "See what it can do", + href: "https://github.com/pingdotgg/t3code", + }, + }, + { + question: "Which agents work?", + answer: + "Codex, Claude Code, Cursor, Grok Build, and OpenCode. Sign in to the provider CLI and keep using the plan you already pay for. T3 Chat is separate and does not include coding-agent usage.", + link: { + label: "Set up an agent", + href: "https://github.com/pingdotgg/t3code#installation", + }, + }, + { + question: "Where does my data go?", + answer: + "Your repo and T3 Code data stay on the machine running T3 Code, not in T3 Tools’ cloud. Your agent provider receives what you send it. Optional online features such as T3 Connect use the account, connection, and diagnostic data they need.", + link: { + label: "Read the privacy policy", + href: "/privacy-policy", + }, + }, + { + question: "Can I use it anywhere?", + answer: + "Yes. Keep T3 Code running on the machine with your projects, then connect from the desktop app, web, iPhone, iPad, or Android. Use T3 Connect or your own network.", + link: { + label: "Set up remote access", + href: "https://github.com/pingdotgg/t3code/blob/main/docs/user/remote-access.md", + }, + }, +]; --- - + -
- - -
- -
-
-
-

Bring your own sub

-

- T3 Code doesn't resell tokens. Plug in Claude Code, Codex, OpenCode, - Cursor, or Grok with the credentials you already have — we orchestrate - them, you keep your plan. -

-
- -
-
-
-
-
Claude Code
-
claude auth login
-
-
-
-
-
-
Codex CLI
-
codex login
-
-
-
-
-
-
OpenCode
-
opencode auth
+ + { + featureShowcases.map((showcase, showcaseIndex) => ( +
+
+
+
+

{showcase.title}

+

{showcase.description}

+ + {showcase.link.label} + + +
-
-
-
-
-
Cursor
-
cursor-agent
+ +
+
+ {showcase.images.map((image) => ( +
+ {image.alt} +
+ ))} +
-
-
-
-
Grok CLI
-
grok login
-
+
+ )) + } + + +
+
+
+
+

Connect any machine.

+

Link it once. Its agents and threads are available from anywhere.

-
-
No keys resold. No quota caps.
-
Switch models mid-thread.
-
More harnesses shipping weekly.
+
+
+
+
+ maria@mac-studio + ~ + %t3 connect link +
+
T3 Connect
+
✓ Relay client ready · cloudflared 2026.5.2
+
✓ Authorized as maria
+ +
+ maria@mac-studio + ~ + %t3 serve +
+
T3 Code server is ready.
+
+ Connection string: http://localhost:3773 +
+
+ maria@mac-studio + ~ + % +
+
+
- -
-
-
-
-
- - Add marketing hero animation - Ready + +
+
+
+

The whole thing is
open source.

+

Don't like something? Fork it.

+
+ +
+
+
+ maria@mac-studio + ~/code + %gh repo fork pingdotgg/t3code --clone
-
- feat/marketing-hero → main - +142 −38 - 3 commits +
✓ Created fork maria/t3code
+
Cloning into 't3code'...
+ +
+ maria@mac-studio + ~/code + %cd t3code
-
-
apps/marketing/src/pages/index.astro +14 −2
-
apps/marketing/src/layouts/Layout.astro +8 −0
-
apps/marketing/public/hero.css +120 −36
+
+ maria@mac-studio + ~/code/t3code + %vp i
-
- - +
Packages: +1284
+
Done in 4.2s
+ +
+ maria@mac-studio + ~/code/t3code + %vp run dev +
+
[dev-runner] serverPort=3773 webPort=4001
+
+ maria@mac-studio + ~/code/t3code + %
-
-
-
-
-
-
-
-
-
-
-

One button to commit, push, and make a PR.

-

- Every agent thread writes to its own branch. When it's good, one - button opens the PR on GitHub with a generated title, body and - changelog. No terminal dance required. -

-
    -
  • Auto-generated PR titles & bodies
    • -
  • Inline diff review before you push
    • -
  • Draft PRs, stack PRs, amend PRs
    • -
  • Works with your existing GitHub auth
    • -
-
+
+ + Fork on GitHub + +
- -
+ +
-
-
Open source
-

If you don't like something, fork it.

-
- -
-
-
- - ~/code -
-
-
$ gh repo fork pingdotgg/t3code --clone
-
✓ Cloned t3code into ./t3code
-
$ cd t3code && vp install
-
✓ 1 284 packages installed in 4.2s
-
$ vp run dev
-
▲ T3 Code dev server → http://localhost:4001
-
$
-
+
+ -
-
-
    -
  • - - Change the UI. Restyle every surface to match your taste. -
    • -
  • - - Add an agent. Wire in your own tools, models, and flows. -
    • -
  • - - Ship your own build. Self-host it or distribute it as your own. -
    • -
+
+ +

Ready for what’s next.

+

Every coding agent. One workspace.

+
+ + + + -
-
- MIT licensed - - {MARKETING_STATS.githubStars} stars -
- -
- - - Fork on GitHub - - - Browse source - - + Download for macOS + +
+ +
+ All downloads
- -
-
-

- Your agents deserve better than a terminal. -

-

- T3 Code is free, open source and fast. Install it, plug in the harness - you already pay for, and let your agents get to work. -

-
- - - - + +
+
+
+

Questions, answered.

+
- Download for macOS - - Windows · Linux · other +
+ { + faqs.map((faq) => ( +
+ + {faq.question} + + +
+

+ {faq.answer}{" "} + + {faq.link.label} + + +

+
+
+ )) + }
diff --git a/apps/marketing/src/pages/privacy-policy.astro b/apps/marketing/src/pages/privacy-policy.astro index b85bc0b12b4..e014e3e5745 100644 --- a/apps/marketing/src/pages/privacy-policy.astro +++ b/apps/marketing/src/pages/privacy-policy.astro @@ -17,13 +17,14 @@ const sections = [ ---

01

diff --git a/apps/marketing/src/pages/security-policy.astro b/apps/marketing/src/pages/security-policy.astro index c9b05ec36fd..e883505c459 100644 --- a/apps/marketing/src/pages/security-policy.astro +++ b/apps/marketing/src/pages/security-policy.astro @@ -13,13 +13,14 @@ const sections = [ ---

01

diff --git a/apps/marketing/src/styles/stage-sky.css b/apps/marketing/src/styles/stage-sky.css new file mode 100644 index 00000000000..ef913957f76 --- /dev/null +++ b/apps/marketing/src/styles/stage-sky.css @@ -0,0 +1,167 @@ +.stage-sky { + --stage-sky-fade-duration: 900ms; + --stage-sky-fade-easing: cubic-bezier(0.22, 1, 0.36, 1); + --stage-sky-blueprint-top: 58 122 209; + --stage-sky-blueprint-mid: 32 80 174; + position: absolute; + z-index: 0; + inset: 0 0 auto; + height: 420px; + pointer-events: none; + -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent); + mask-image: linear-gradient(to bottom, #000 30%, transparent); +} + +.stage-sky::after { + position: absolute; + inset: 0; + background: + radial-gradient(circle at 17% 22%, rgba(255, 255, 255, 0.22) 0 1px, transparent 2px), + radial-gradient(circle at 37% 9%, rgba(255, 255, 255, 0.16) 0 1px, transparent 2px), + radial-gradient(circle at 61% 18%, rgba(255, 255, 255, 0.2) 0 1px, transparent 2px), + radial-gradient(circle at 79% 7%, rgba(255, 255, 255, 0.14) 0 1px, transparent 2px), + radial-gradient(circle at 91% 28%, rgba(255, 255, 255, 0.18) 0 1px, transparent 2px); + content: ""; + opacity: 0.16; +} + +.stage-sky__ray { + position: absolute; + top: -210px; + width: 170px; + height: 680px; + background: linear-gradient( + to right, + transparent, + var(--ray-color, rgba(255, 255, 255, 0.07)) 28%, + var(--ray-hot, rgba(255, 255, 255, 0.14)) 48%, + var(--ray-hot, rgba(255, 255, 255, 0.14)) 52%, + var(--ray-color, rgba(255, 255, 255, 0.07)) 72%, + transparent + ); + -webkit-mask-image: linear-gradient(to bottom, #000, rgba(0, 0, 0, 0.76) 34%, transparent 82%); + mask-image: linear-gradient(to bottom, #000, rgba(0, 0, 0, 0.76) 34%, transparent 82%); + opacity: var(--ray-idle-opacity, 0.5); + transform: rotate(var(--ray-angle)) translateX(var(--ray-drift)); + transform-origin: top center; +} + +.stage-sky__ray::before, +.stage-sky__ray::after { + position: absolute; + inset: 0; + content: ""; + opacity: 0; + transition: opacity var(--stage-sky-fade-duration) var(--stage-sky-fade-easing); +} + +.stage-sky__ray::before { + background: linear-gradient( + to right, + transparent, + rgb(var(--stage-sky-blueprint-mid) / 0.16) 28%, + rgb(var(--stage-sky-blueprint-top) / 0.3) 48%, + rgb(var(--stage-sky-blueprint-top) / 0.3) 52%, + rgb(var(--stage-sky-blueprint-mid) / 0.16) 72%, + transparent + ); +} + +.stage-sky__ray::after { + background: linear-gradient( + to right, + transparent, + rgba(112, 96, 232, 0.16) 28%, + rgba(196, 132, 252, 0.3) 48%, + rgba(196, 132, 252, 0.3) 52%, + rgba(112, 96, 232, 0.16) 72%, + transparent + ); +} + +.stage-sky__ray--1 { + left: -1%; + width: 210px; + --ray-angle: 14deg; + --ray-drift: -13px; + --ray-idle-opacity: 0.56; +} + +.stage-sky__ray--2 { + left: 20%; + width: 115px; + --ray-angle: 7deg; + --ray-drift: 9px; + --ray-idle-opacity: 0.4; +} + +.stage-sky__ray--3 { + left: 44%; + width: 230px; + --ray-angle: 0.5deg; + --ray-drift: -8px; + --ray-idle-opacity: 0.62; +} + +.stage-sky__ray--4 { + left: 70%; + width: 125px; + --ray-angle: -8deg; + --ray-drift: 11px; + --ray-idle-opacity: 0.34; +} + +.stage-sky__ray--5 { + left: 89%; + width: 205px; + --ray-angle: -15deg; + --ray-drift: -10px; + --ray-idle-opacity: 0.5; +} + +.stage-sky__cloud { + position: absolute; + top: -60px; + width: 480px; + height: 240px; + border-radius: 50%; + background: radial-gradient( + closest-side, + rgba(168, 91, 234, 0.3), + rgba(81, 101, 216, 0.14) 60%, + transparent + ); + filter: blur(46px); + opacity: 0; + transition: opacity var(--stage-sky-fade-duration) var(--stage-sky-fade-easing); +} + +.stage-sky__cloud--1 { + left: 8%; +} + +.stage-sky__cloud--2 { + top: -100px; + left: 56%; + width: 620px; +} + +html[data-stage="nightly"] .stage-sky__ray::after, +html[data-stage="dev"] .stage-sky__ray::before, +html[data-stage="nightly"] .stage-sky__cloud { + opacity: 1; +} + +@media (prefers-reduced-motion: reduce) { + .stage-sky__ray, + .stage-sky__ray::before, + .stage-sky__ray::after, + .stage-sky__cloud { + transition: none; + } + + .stage-sky__ray { + opacity: var(--ray-idle-opacity); + transform: rotate(var(--ray-angle)) translateX(var(--ray-drift)); + } +} diff --git a/apps/marketing/tsconfig.json b/apps/marketing/tsconfig.json index bcbf8b50906..16514ea08fd 100644 --- a/apps/marketing/tsconfig.json +++ b/apps/marketing/tsconfig.json @@ -1,3 +1,4 @@ { - "extends": "astro/tsconfigs/strict" + "extends": "astro/tsconfigs/strict", + "exclude": ["dist", "public"] } diff --git a/apps/marketing/vercel.ts b/apps/marketing/vercel.ts index d2a3c774b8a..83205e10661 100644 --- a/apps/marketing/vercel.ts +++ b/apps/marketing/vercel.ts @@ -4,4 +4,33 @@ export const config: VercelConfig = { installCommand: "npm install -g vite-plus && vp install --filter '@t3tools/marketing...'", buildCommand: "vp run --filter @t3tools/marketing build", outputDirectory: "dist", + headers: [ + { + source: "/sidebar-demo/assets/(.*)", + headers: [ + { + key: "Cache-Control", + value: "public, max-age=31536000, immutable", + }, + ], + }, + { + source: "/demo-states/(.*)", + headers: [ + { + key: "Cache-Control", + value: "public, max-age=3600, stale-while-revalidate=86400", + }, + ], + }, + { + source: "/mobile-states/(.*)", + headers: [ + { + key: "Cache-Control", + value: "public, max-age=3600, stale-while-revalidate=86400", + }, + ], + }, + ], }; diff --git a/apps/web/demo.html b/apps/web/demo.html new file mode 100644 index 00000000000..983d4294e14 --- /dev/null +++ b/apps/web/demo.html @@ -0,0 +1,46 @@ + + + + + + + + + T3 Code demo + + +
+ + + diff --git a/apps/web/package.json b/apps/web/package.json index a25e42cc84b..ccaf429c7a8 100644 --- a/apps/web/package.json +++ b/apps/web/package.json @@ -6,6 +6,7 @@ "scripts": { "dev": "vp dev", "build": "vp build", + "build:sidebar-demo": "vp build --config vite.demo.config.ts", "preview": "vp preview", "typecheck": "tsgo --noEmit", "test": "vp test run --passWithNoTests --project unit" diff --git a/apps/web/src/branding.logic.ts b/apps/web/src/branding.logic.ts index 06d663ca0b4..a93024540e6 100644 --- a/apps/web/src/branding.logic.ts +++ b/apps/web/src/branding.logic.ts @@ -1,4 +1,5 @@ const NIGHTLY_SERVER_VERSION_PATTERN = /-nightly\.\d{8}\.\d+$/; +const DEV_SERVER_VERSION_PATTERN = /-dev(\.\d+)?$/; export function formatAppDisplayName(input: { readonly baseName: string; @@ -60,10 +61,12 @@ export function resolveServerBackedAppStageLabel(input: { readonly primaryServerVersion: string | null | undefined; readonly fallbackStageLabel: string; }): string { - return input.primaryServerVersion && - NIGHTLY_SERVER_VERSION_PATTERN.test(input.primaryServerVersion) - ? "Nightly" - : input.fallbackStageLabel; + if (input.primaryServerVersion) { + if (NIGHTLY_SERVER_VERSION_PATTERN.test(input.primaryServerVersion)) return "Nightly"; + if (DEV_SERVER_VERSION_PATTERN.test(input.primaryServerVersion)) return "Dev"; + } + + return input.fallbackStageLabel; } export function resolveServerBackedAppDisplayName(input: { diff --git a/apps/web/src/branding.test.ts b/apps/web/src/branding.test.ts index e517d40b04f..a3cd386ce66 100644 --- a/apps/web/src/branding.test.ts +++ b/apps/web/src/branding.test.ts @@ -83,6 +83,15 @@ describe("branding logic", () => { ).toBe("Nightly"); }); + it("resolves the Dev stage label for dev primary server versions", () => { + expect( + resolveServerBackedAppStageLabel({ + primaryServerVersion: "0.0.28-dev.1", + fallbackStageLabel: "Alpha", + }), + ).toBe("Dev"); + }); + it("updates the display name for nightly primary server versions", () => { expect( resolveServerBackedAppDisplayName({ diff --git a/apps/web/src/components/settings/ConnectionsSettings.tsx b/apps/web/src/components/settings/ConnectionsSettings.tsx index 52b89530127..405d693176b 100644 --- a/apps/web/src/components/settings/ConnectionsSettings.tsx +++ b/apps/web/src/components/settings/ConnectionsSettings.tsx @@ -1,6 +1,7 @@ import { ChevronDownIcon, ChevronsLeftRightEllipsisIcon, + ExternalLinkIcon, PlusIcon, QrCodeIcon, RefreshCwIcon, @@ -137,6 +138,8 @@ import { CloudEnvironmentConnectRows } from "../cloud/CloudEnvironmentConnectLis import { ITEM_ROW_CLASSNAME, ITEM_ROW_INNER_CLASSNAME } from "./itemRows"; const DEFAULT_TAILSCALE_SERVE_PORT = 443; +const IOS_APP_URL = "https://apps.apple.com/us/app/t3-code-remote-claude-more/id6787819824"; +const ANDROID_APP_URL = "https://play.google.com/store/apps/details?id=com.t3tools.t3code&pli=1"; const EMPTY_ADVERTISED_ENDPOINTS: ReadonlyArray = []; const EMPTY_DISCOVERED_SSH_HOSTS: ReadonlyArray = []; @@ -3393,6 +3396,41 @@ export function ConnectionsSettings() { savedEnvironments={savedEnvironments} /> + + + + App Store + + + } + /> + } + /> + + Google Play + + + } + /> + } + /> + ); } diff --git a/apps/web/src/components/sidebar/SidebarChrome.tsx b/apps/web/src/components/sidebar/SidebarChrome.tsx index 09fcd773128..bb4c7c1304e 100644 --- a/apps/web/src/components/sidebar/SidebarChrome.tsx +++ b/apps/web/src/components/sidebar/SidebarChrome.tsx @@ -46,7 +46,9 @@ export const SidebarChromeHeader = memo(function SidebarChromeHeader({ isElectron && "drag-region", )} > - {backdropVariant ? : null} + {backdropVariant ? ( + + ) : null} environment.shellSnapshot.threads) + .find((candidate) => candidate.id === threadId); + if (!thread) throw new Error(`Missing demo thread ${threadId}`); + return thread; +} + +describe("demo fixture turn state", () => { + it("uses the actual latest turn id for completed and running threads", () => { + expect(shellThread("thread-flaky").latestTurn?.turnId).toBe("thread-flaky-turn-2"); + expect(shellThread("thread-metrics").latestTurn?.turnId).toBe("thread-metrics-turn-2"); + expect(shellThread("thread-metrics").session?.activeTurnId).toBe("thread-metrics-turn-2"); + }); + + it("advances checkpoint turn counts", () => { + expect( + demoThreadDetails["thread-composer"]?.checkpoints.map( + (checkpoint) => checkpoint.checkpointTurnCount, + ), + ).toEqual([1, 2]); + expect( + demoThreadDetails["thread-flaky"]?.checkpoints.map( + (checkpoint) => checkpoint.checkpointTurnCount, + ), + ).toEqual([1, 2]); + }); + + it("uses a matching VCS checkout for the metrics thread", () => { + expect(shellThread("thread-metrics").worktreePath).toBe(DEMO_METRICS_WORKTREE_PATH); + + const status = demoVcsStatusByCwd[DEMO_METRICS_WORKTREE_PATH]; + expect(status?._tag).toBe("snapshot"); + if (status?._tag !== "snapshot") throw new Error("Missing metrics VCS snapshot"); + expect(status.local.refName).toBe("feat/crash-dashboard"); + }); +}); + +describe("demo diff fixtures", () => { + it("returns checkpoint-specific files for each thread and turn range", () => { + const firstComposerTurn = demoThreadDiff("thread-composer", 0, 1).diff; + const secondComposerTurn = demoThreadDiff("thread-composer", 1, 2).diff; + const flakyTurn = demoThreadDiff("thread-flaky", 1, 2).diff; + + expect(firstComposerTurn).toContain("ChatComposer.tsx"); + expect(firstComposerTurn).not.toContain("DropOverlay.tsx"); + expect(secondComposerTurn).toContain("DropOverlay.tsx"); + expect(flakyTurn).toContain("GitManager.test.ts"); + expect(flakyTurn).not.toContain("ChatComposer.tsx"); + }); + + it("matches review previews to their checkout", () => { + const flaky = demoReviewDiffPreview("~/code/t3code-worktrees/git-manager-test"); + expect(flaky.sources[0]?.headRef).toBe("fix/git-manager-test"); + expect(flaky.sources[0]?.diff).toContain("GitManager.test.ts"); + + const metrics = demoReviewDiffPreview(DEMO_METRICS_WORKTREE_PATH); + expect(metrics.sources[0]?.headRef).toBe("feat/crash-dashboard"); + expect(metrics.sources[0]?.diff).toContain("src/pages/dashboard.tsx"); + + expect(demoReviewDiffPreview("~/code/mobile-app").sources).toEqual([]); + }); +}); diff --git a/apps/web/src/demo/fixtures.ts b/apps/web/src/demo/fixtures.ts new file mode 100644 index 00000000000..f0b8a92f161 --- /dev/null +++ b/apps/web/src/demo/fixtures.ts @@ -0,0 +1,1517 @@ +import { + ExecutionEnvironmentDescriptor, + OrchestrationCheckpointSummary, + OrchestrationMessage, + OrchestrationShellSnapshot, + OrchestrationThreadActivity, + ReviewDiffPreviewResult, + ServerConfig, + ThreadTurnDiff, + VcsStatusStreamEvent, +} from "@t3tools/contracts"; +import { DEFAULT_RESOLVED_KEYBINDINGS } from "@t3tools/shared/keybindings"; +import * as DateTime from "effect/DateTime"; +import * as Schema from "effect/Schema"; + +import { demoServerVersion } from "./stage"; + +export const DEMO_ENVIRONMENT_ID = "demo-environment"; +export const DEMO_ENVIRONMENT_LABEL = "MacBook Pro"; +export const DEMO_METRICS_WORKTREE_PATH = "~/code/mobile-app-worktrees/crash-dashboard"; + +const now = Date.now(); +const minutesAgo = (minutes: number) => new Date(now - minutes * 60_000).toISOString(); + +/** Sentinel wake time for "permanently" snoozed demo threads. */ +const SNOOZE_FOREVER = "2099-01-01T09:00:00.000Z"; + +// --------------------------------------------------------------------------- +// Providers (shared across demo environments) +// --------------------------------------------------------------------------- + +const demoProviders = [ + { + instanceId: "codex", + driver: "codex", + displayName: "Codex", + enabled: true, + installed: true, + version: "0.52.0", + status: "ready", + auth: { status: "authenticated", label: "ChatGPT" }, + checkedAt: minutesAgo(1), + models: [ + { slug: "gpt-5.3-codex", name: "GPT-5.3 Codex", isCustom: false, capabilities: null }, + { slug: "gpt-5.3", name: "GPT-5.3", isCustom: false, capabilities: null }, + ], + }, + { + instanceId: "claudeAgent", + driver: "claudeAgent", + displayName: "Claude Code", + enabled: true, + installed: true, + version: "2.3.0", + status: "ready", + auth: { status: "authenticated", label: "API key" }, + checkedAt: minutesAgo(1), + models: [ + { slug: "claude-opus-5", name: "Opus 5", isCustom: false, capabilities: null }, + { slug: "claude-fable-5", name: "Fable 5", isCustom: false, capabilities: null }, + { slug: "claude-opus-4-8", name: "Opus 4.8", isCustom: false, capabilities: null }, + { slug: "claude-sonnet-5", name: "Sonnet 5", isCustom: false, capabilities: null }, + { slug: "claude-haiku-4-5", name: "Haiku 4.5", isCustom: false, capabilities: null }, + ], + }, + { + instanceId: "grok", + driver: "grok", + displayName: "Grok", + enabled: true, + installed: true, + version: "1.8.0", + status: "ready", + auth: { status: "authenticated", label: "xAI" }, + checkedAt: minutesAgo(1), + models: [ + { slug: "grok-code-fast-2", name: "Grok Code Fast 2", isCustom: false, capabilities: null }, + { slug: "grok-5", name: "Grok 5", isCustom: false, capabilities: null }, + ], + }, + { + instanceId: "opencode", + driver: "opencode", + displayName: "OpenCode", + enabled: true, + installed: true, + version: "0.16.2", + status: "ready", + auth: { status: "authenticated", label: "OpenCode Zen" }, + checkedAt: minutesAgo(1), + models: [ + { slug: "kimi-k2-thinking", name: "Kimi K2 Thinking", isCustom: false, capabilities: null }, + { slug: "glm-5", name: "GLM-5", isCustom: false, capabilities: null }, + ], + }, +]; + +// --------------------------------------------------------------------------- +// Thread + project fixture builders +// --------------------------------------------------------------------------- + +interface DemoThreadSpec { + readonly id: string; + readonly projectId: string; + readonly title: string; + readonly model: string; + readonly instanceId?: string; + readonly branch: string | null; + readonly createdMinutesAgo: number; + readonly updatedMinutesAgo: number; + readonly turn?: { + readonly id?: string; + readonly state: "running" | "completed" | "interrupted" | "error"; + readonly startedMinutesAgo?: number; + readonly completedMinutesAgo?: number; + }; + readonly sessionStatus?: "running" | "ready" | "idle"; + readonly hasPendingApprovals?: boolean; + readonly hasPendingUserInput?: boolean; + readonly hasActionableProposedPlan?: boolean; + /** Marks the thread as explicitly settled this many minutes ago. */ + readonly settledMinutesAgo?: number; + /** Snoozes the thread until the far-future sentinel ("permanently"). */ + readonly snoozedForever?: boolean; + /** Worktree checkout the thread's git status is read from. */ + readonly worktreePath?: string; +} + +function demoThread(spec: DemoThreadSpec) { + const updatedAt = minutesAgo(spec.updatedMinutesAgo); + const turnId = spec.turn?.id ?? `${spec.id}-turn-1`; + return { + id: spec.id, + projectId: spec.projectId, + title: spec.title, + modelSelection: { instanceId: spec.instanceId ?? "codex", model: spec.model }, + runtimeMode: "full-access", + interactionMode: "default", + branch: spec.branch, + worktreePath: spec.worktreePath ?? null, + latestTurn: spec.turn + ? { + turnId, + state: spec.turn.state, + requestedAt: minutesAgo(spec.turn.startedMinutesAgo ?? spec.updatedMinutesAgo), + startedAt: minutesAgo(spec.turn.startedMinutesAgo ?? spec.updatedMinutesAgo), + completedAt: + spec.turn.state === "running" + ? null + : minutesAgo(spec.turn.completedMinutesAgo ?? spec.updatedMinutesAgo), + assistantMessageId: null, + } + : null, + createdAt: minutesAgo(spec.createdMinutesAgo), + updatedAt, + archivedAt: null, + session: spec.sessionStatus + ? { + threadId: spec.id, + status: spec.sessionStatus, + // The wire providerName is the driver kind slug, not a display name. + providerName: spec.instanceId ?? "codex", + providerInstanceId: spec.instanceId ?? "codex", + runtimeMode: "full-access", + activeTurnId: spec.turn?.state === "running" ? turnId : null, + lastError: null, + updatedAt, + } + : null, + latestUserMessageAt: minutesAgo(spec.updatedMinutesAgo + 1), + hasPendingApprovals: spec.hasPendingApprovals ?? false, + hasPendingUserInput: spec.hasPendingUserInput ?? false, + hasActionableProposedPlan: spec.hasActionableProposedPlan ?? false, + ...(spec.settledMinutesAgo !== undefined + ? { settledOverride: "settled", settledAt: minutesAgo(spec.settledMinutesAgo) } + : {}), + ...(spec.snoozedForever + ? { snoozedUntil: SNOOZE_FOREVER, snoozedAt: minutesAgo(spec.updatedMinutesAgo) } + : {}), + }; +} + +function decodeShellSnapshot(input: { + projects: ReadonlyArray; + threads: ReadonlyArray; +}): OrchestrationShellSnapshot { + return Schema.decodeUnknownSync(OrchestrationShellSnapshot)({ + snapshotSequence: 1, + projects: input.projects, + threads: input.threads, + updatedAt: minutesAgo(0), + }); +} + +function makeServerConfig(descriptor: ExecutionEnvironmentDescriptor, cwd: string): ServerConfig { + const base = Schema.decodeUnknownSync(ServerConfig)({ + environment: Schema.encodeSync(ExecutionEnvironmentDescriptor)(descriptor), + auth: { + policy: "unsafe-no-auth", + bootstrapMethods: [], + sessionMethods: [], + sessionCookieName: "t3-demo-session", + }, + cwd, + keybindingsConfigPath: "~/.t3/keybindings.json", + keybindings: [], + issues: [], + providers: demoProviders, + availableEditors: [], + observability: { + logsDirectoryPath: "~/.t3/logs", + localTracingEnabled: false, + otlpTracesEnabled: false, + otlpMetricsEnabled: false, + }, + settings: {}, + }); + return { ...base, keybindings: DEFAULT_RESOLVED_KEYBINDINGS }; +} + +const demoCapabilities = { + repositoryIdentity: false, + threadSettlement: true, + threadSnooze: true, +}; + +function makeDescriptor(input: { + environmentId: string; + label: string; + os: ExecutionEnvironmentDescriptor["platform"]["os"]; + arch: ExecutionEnvironmentDescriptor["platform"]["arch"]; +}): ExecutionEnvironmentDescriptor { + return Schema.decodeUnknownSync(ExecutionEnvironmentDescriptor)({ + environmentId: input.environmentId, + label: input.label, + platform: { os: input.os, arch: input.arch }, + serverVersion: demoServerVersion(import.meta.env.APP_VERSION || "0.0.0"), + capabilities: demoCapabilities, + }); +} + +// --------------------------------------------------------------------------- +// Environments: one local (primary) + two remote machines over T3 Connect +// --------------------------------------------------------------------------- + +/** + * Rebuilds the fixture's descriptor/config for the currently previewed demo + * stage, so the mock server can report a live version change when the + * marketing page switches channels without reloading the iframe. + */ +export function stagedDescriptor(fixture: DemoEnvironmentFixture): ExecutionEnvironmentDescriptor { + return makeDescriptor({ + environmentId: fixture.environmentId, + label: fixture.label, + os: fixture.descriptor.platform.os, + arch: fixture.descriptor.platform.arch, + }); +} + +export function stagedServerConfig(fixture: DemoEnvironmentFixture): ServerConfig { + return makeServerConfig(stagedDescriptor(fixture), fixture.serverConfig.cwd); +} + +export interface DemoEnvironmentFixture { + readonly environmentId: string; + readonly label: string; + /** Fake HTTPS origin the environment is served from; null = same-origin primary. */ + readonly origin: string | null; + readonly bearerToken: string | null; + readonly descriptor: ExecutionEnvironmentDescriptor; + readonly serverConfig: ServerConfig; + readonly shellSnapshot: OrchestrationShellSnapshot; +} + +const primaryDescriptor = makeDescriptor({ + environmentId: DEMO_ENVIRONMENT_ID, + label: DEMO_ENVIRONMENT_LABEL, + os: "darwin", + arch: "arm64", +}); + +const macStudioDescriptor = makeDescriptor({ + environmentId: "demo-mac-studio", + label: "Mac Studio", + os: "darwin", + arch: "arm64", +}); + +const buildServerDescriptor = makeDescriptor({ + environmentId: "demo-build-server", + label: "Build Server", + os: "linux", + arch: "x64", +}); + +const primaryShell = decodeShellSnapshot({ + projects: [ + { + id: "project-marketing", + title: "marketing-site", + workspaceRoot: "~/code/marketing-site", + defaultModelSelection: { instanceId: "claudeAgent", model: "claude-opus-5" }, + scripts: [], + createdAt: minutesAgo(60 * 24 * 12), + updatedAt: minutesAgo(4), + }, + ], + threads: [ + demoThread({ + id: "thread-hero", + projectId: "project-marketing", + title: "Interactive hero demo", + model: "claude-opus-5", + instanceId: "claudeAgent", + branch: "feat/hero-demo", + createdMinutesAgo: 60 * 2, + updatedMinutesAgo: 4, + turn: { state: "running", startedMinutesAgo: 9 }, + sessionStatus: "running", + hasPendingUserInput: true, + }), + demoThread({ + id: "thread-pricing", + projectId: "project-marketing", + title: "Pricing page copy refresh", + model: "claude-sonnet-5", + instanceId: "claudeAgent", + branch: null, + createdMinutesAgo: 60 * 26, + updatedMinutesAgo: 60 * 5, + turn: { state: "completed", startedMinutesAgo: 60 * 6, completedMinutesAgo: 60 * 5 }, + settledMinutesAgo: 60 * 4, + }), + demoThread({ + id: "thread-blog", + projectId: "project-marketing", + title: "Changelog RSS feed", + model: "gpt-5.3-codex", + branch: "feat/changelog-rss", + createdMinutesAgo: 60 * 24 * 4, + updatedMinutesAgo: 60 * 24 * 2, + turn: { + state: "completed", + startedMinutesAgo: 60 * 24 * 2 + 20, + completedMinutesAgo: 60 * 24 * 2, + }, + snoozedForever: true, + }), + ], +}); + +const macStudioShell = decodeShellSnapshot({ + projects: [ + { + id: "project-t3code", + title: "t3code", + workspaceRoot: "~/code/t3code", + defaultModelSelection: { instanceId: "claudeAgent", model: "claude-opus-5" }, + scripts: [], + createdAt: minutesAgo(60 * 24 * 30), + updatedAt: minutesAgo(1), + }, + ], + threads: [ + demoThread({ + id: "thread-composer", + projectId: "project-t3code", + title: "Composer attachments + drag-drop overlay", + model: "gpt-5.3-codex", + branch: "feat/composer-attachments", + worktreePath: "~/code/t3code-worktrees/composer-attachments", + createdMinutesAgo: 60 * 3, + updatedMinutesAgo: 1, + turn: { state: "running", startedMinutesAgo: 6 }, + sessionStatus: "running", + }), + demoThread({ + id: "thread-sidebar", + projectId: "project-t3code", + title: "Sidebar v2 polish — settled sort + jump hints", + model: "grok-code-fast-2", + instanceId: "grok", + branch: "feat/sidebar-v2-polish", + worktreePath: "~/code/t3code-worktrees/sidebar-v2-polish", + createdMinutesAgo: 60 * 5, + updatedMinutesAgo: 12, + turn: { state: "running", startedMinutesAgo: 14 }, + sessionStatus: "running", + }), + demoThread({ + id: "thread-flaky", + projectId: "project-t3code", + title: "Fix flaky GitManager cross-repo test", + model: "claude-opus-5", + instanceId: "claudeAgent", + branch: "fix/git-manager-test", + worktreePath: "~/code/t3code-worktrees/git-manager-test", + createdMinutesAgo: 60 * 8, + updatedMinutesAgo: 35, + turn: { + id: "thread-flaky-turn-2", + state: "completed", + startedMinutesAgo: 48, + completedMinutesAgo: 35, + }, + sessionStatus: "ready", + }), + demoThread({ + id: "thread-relay", + projectId: "project-t3code", + title: "Relay reconnect backoff jitter", + model: "claude-opus-5", + instanceId: "claudeAgent", + branch: "fix/relay-backoff", + createdMinutesAgo: 60 * 30, + updatedMinutesAgo: 60 * 9, + turn: { state: "completed", startedMinutesAgo: 60 * 10, completedMinutesAgo: 60 * 9 }, + settledMinutesAgo: 60 * 8, + }), + ], +}); + +const buildServerShell = decodeShellSnapshot({ + projects: [ + { + id: "project-mobile", + title: "mobile-app", + workspaceRoot: "~/code/mobile-app", + defaultModelSelection: { instanceId: "grok", model: "grok-code-fast-2" }, + scripts: [], + createdAt: minutesAgo(60 * 24 * 5), + updatedAt: minutesAgo(8), + }, + ], + threads: [ + demoThread({ + id: "thread-metrics", + projectId: "project-mobile", + title: "Crash-free sessions dashboard", + model: "claude-opus-5", + instanceId: "claudeAgent", + branch: "feat/crash-dashboard", + worktreePath: DEMO_METRICS_WORKTREE_PATH, + createdMinutesAgo: 60 * 6, + updatedMinutesAgo: 8, + turn: { id: "thread-metrics-turn-2", state: "running", startedMinutesAgo: 11 }, + sessionStatus: "running", + }), + demoThread({ + id: "thread-push", + projectId: "project-mobile", + title: "Push notifications deep links", + model: "grok-code-fast-2", + instanceId: "grok", + branch: "feat/push-deeplinks", + createdMinutesAgo: 60 * 30, + updatedMinutesAgo: 60 * 20, + turn: { state: "completed", startedMinutesAgo: 60 * 21, completedMinutesAgo: 60 * 20 }, + }), + demoThread({ + id: "thread-ci", + projectId: "project-mobile", + title: "Nightly EAS build keeps timing out", + model: "glm-5", + instanceId: "opencode", + branch: null, + createdMinutesAgo: 60 * 24 * 6, + updatedMinutesAgo: 60 * 24 * 3, + turn: { + state: "completed", + startedMinutesAgo: 60 * 24 * 3 + 30, + completedMinutesAgo: 60 * 24 * 3, + }, + snoozedForever: true, + }), + demoThread({ + id: "thread-deploy", + projectId: "project-mobile", + title: "Blue/green deploy for the API", + model: "gpt-5.3-codex", + branch: "feat/blue-green", + createdMinutesAgo: 60 * 24 * 8, + updatedMinutesAgo: 60 * 24 * 1, + turn: { + state: "completed", + startedMinutesAgo: 60 * 25, + completedMinutesAgo: 60 * 24, + }, + settledMinutesAgo: 60 * 22, + }), + ], +}); + +export const demoEnvironments: ReadonlyArray = [ + { + environmentId: DEMO_ENVIRONMENT_ID, + label: DEMO_ENVIRONMENT_LABEL, + origin: null, + bearerToken: null, + descriptor: primaryDescriptor, + serverConfig: makeServerConfig(primaryDescriptor, "~/code"), + shellSnapshot: primaryShell, + }, + { + environmentId: "demo-mac-studio", + label: "Mac Studio", + origin: "https://mac-studio.t3connect.demo", + bearerToken: "demo-mac-studio-token", + descriptor: macStudioDescriptor, + serverConfig: makeServerConfig(macStudioDescriptor, "~/code"), + shellSnapshot: macStudioShell, + }, + { + environmentId: "demo-build-server", + label: "Build Server", + origin: "https://build-server.t3connect.demo", + bearerToken: "demo-build-server-token", + descriptor: buildServerDescriptor, + serverConfig: makeServerConfig(buildServerDescriptor, "/home/deploy/code"), + shellSnapshot: buildServerShell, + }, +]; + +/** Backwards-compatible aliases for the primary environment. */ +export const demoDescriptor = primaryDescriptor; +export const demoServerConfig = demoEnvironments[0]!.serverConfig; +export const demoShellSnapshot = primaryShell; + +/** Threads that open with the browser (right side panel) already visible. */ +export const demoBrowserPanelThreadKeys: ReadonlyArray = [ + "demo-mac-studio:thread-composer", + "demo-build-server:thread-metrics", +]; + +export const demoDiffPanelSelectionByThreadKey = { + "demo-mac-studio:thread-composer": "thread-composer-turn-0", +} as const; + +// --------------------------------------------------------------------------- +// Git status per checkout, driving the real GitActionsControl in the header +// --------------------------------------------------------------------------- + +const GITHUB_PROVIDER = { + kind: "github", + name: "GitHub", + baseUrl: "https://github.com", +} as const; + +export const demoVcsStatusByCwd: Record = { + // Feature worktree with uncommitted changes: quick action is "Commit & push". + "~/code/t3code-worktrees/composer-attachments": { + _tag: "snapshot", + local: { + isRepo: true, + sourceControlProvider: GITHUB_PROVIDER, + hasPrimaryRemote: true, + isDefaultRef: false, + refName: "feat/composer-attachments", + hasWorkingTreeChanges: true, + workingTree: { + files: [ + { path: "apps/web/src/components/chat/ChatComposer.tsx", insertions: 187, deletions: 36 }, + { path: "apps/web/src/components/chat/DropOverlay.tsx", insertions: 11, deletions: 0 }, + { + path: "apps/web/src/components/chat/ChatComposer.test.tsx", + insertions: 74, + deletions: 2, + }, + ], + insertions: 272, + deletions: 38, + }, + }, + remote: { hasUpstream: true, aheadCount: 2, behindCount: 0, aheadOfDefaultCount: 5, pr: null }, + }, + // Feature worktree with uncommitted changes and no PR yet. + "~/code/t3code-worktrees/git-manager-test": { + _tag: "snapshot", + local: { + isRepo: true, + sourceControlProvider: GITHUB_PROVIDER, + hasPrimaryRemote: true, + isDefaultRef: false, + refName: "fix/git-manager-test", + hasWorkingTreeChanges: true, + workingTree: { + files: [{ path: "apps/server/src/git/GitManager.test.ts", insertions: 21, deletions: 8 }], + insertions: 21, + deletions: 8, + }, + }, + remote: { hasUpstream: true, aheadCount: 1, behindCount: 0, aheadOfDefaultCount: 2, pr: null }, + }, + // Clean feature worktree with an open PR. + "~/code/t3code-worktrees/sidebar-v2-polish": { + _tag: "snapshot", + local: { + isRepo: true, + sourceControlProvider: GITHUB_PROVIDER, + hasPrimaryRemote: true, + isDefaultRef: false, + refName: "feat/sidebar-v2-polish", + hasWorkingTreeChanges: false, + workingTree: { files: [], insertions: 0, deletions: 0 }, + }, + remote: { + hasUpstream: true, + aheadCount: 0, + behindCount: 0, + aheadOfDefaultCount: 3, + pr: { + number: 1287, + title: "Sidebar v2 polish — settled sort + jump hints", + url: "https://github.com/pingdotgg/t3code/pull/1287", + baseRef: "main", + headRef: "feat/sidebar-v2-polish", + state: "open", + }, + }, + }, + [DEMO_METRICS_WORKTREE_PATH]: { + _tag: "snapshot", + local: { + isRepo: true, + sourceControlProvider: GITHUB_PROVIDER, + hasPrimaryRemote: true, + isDefaultRef: false, + refName: "feat/crash-dashboard", + hasWorkingTreeChanges: true, + workingTree: { + files: [ + { path: "src/pages/dashboard.tsx", insertions: 42, deletions: 6 }, + { path: "src/components/ReleasePicker.tsx", insertions: 86, deletions: 0 }, + ], + insertions: 128, + deletions: 6, + }, + }, + remote: { hasUpstream: true, aheadCount: 1, behindCount: 0, aheadOfDefaultCount: 3, pr: null }, + }, + // Clean default checkouts. + "~/code/t3code": { + _tag: "snapshot", + local: { + isRepo: true, + sourceControlProvider: GITHUB_PROVIDER, + hasPrimaryRemote: true, + isDefaultRef: true, + refName: "main", + hasWorkingTreeChanges: false, + workingTree: { files: [], insertions: 0, deletions: 0 }, + }, + remote: { hasUpstream: true, aheadCount: 0, behindCount: 0, pr: null }, + }, + "~/code/mobile-app": { + _tag: "snapshot", + local: { + isRepo: true, + sourceControlProvider: GITHUB_PROVIDER, + hasPrimaryRemote: true, + isDefaultRef: true, + refName: "main", + hasWorkingTreeChanges: false, + workingTree: { files: [], insertions: 0, deletions: 0 }, + }, + remote: { hasUpstream: true, aheadCount: 0, behindCount: 0, pr: null }, + }, +}; + +// The browser preview surface needs the Electron desktop bridge, so the web +// demo showcases the right panel with the diff surface instead. +const DEMO_COMPOSER_DIFF = `diff --git a/apps/web/src/components/chat/ChatComposer.tsx b/apps/web/src/components/chat/ChatComposer.tsx +index 3f1c2aa..9e84b71 100644 +--- a/apps/web/src/components/chat/ChatComposer.tsx ++++ b/apps/web/src/components/chat/ChatComposer.tsx +@@ -41,6 +41,9 @@ export function ChatComposer(props: ChatComposerProps) { + const [attachments, setAttachments] = useState([]); ++ const dragDepthRef = useRef(0); ++ const [isDragOverComposer, setIsDragOverComposer] = useState(false); ++ + const textareaRef = useRef(null); +${" "} + const onSubmit = useCallback(() => { +@@ -108,7 +111,16 @@ export function ChatComposer(props: ChatComposerProps) { +- return
{children}
; ++ return ( ++
++ {isDragOverComposer ? : null} ++ {children} ++ ++ ); + } +diff --git a/apps/web/src/components/chat/DropOverlay.tsx b/apps/web/src/components/chat/DropOverlay.tsx +new file mode 100644 +index 0000000..b2d61c4 +--- /dev/null ++++ b/apps/web/src/components/chat/DropOverlay.tsx +@@ -0,0 +1,11 @@ ++export function DropOverlay() { ++ return ( ++
++

Drop images to attach

++
++ ); ++} +`; + +const decodeThreadTurnDiff = Schema.decodeUnknownSync(ThreadTurnDiff); +const decodeReviewDiffPreview = Schema.decodeUnknownSync(ReviewDiffPreviewResult); + +const DEMO_SIDEBAR_REVIEW_DIFF = `diff --git a/apps/web/src/components/Sidebar.tsx b/apps/web/src/components/Sidebar.tsx +index 7f42311..b98170a 100644 +--- a/apps/web/src/components/Sidebar.tsx ++++ b/apps/web/src/components/Sidebar.tsx +@@ -418,6 +418,7 @@ export function Sidebar() { + const settledThreads = sortSettledThreads(threads); ++ const jumpHints = resolveActiveThreadJumpHints(threads, activeThreadId); + return ; + } +`; + +const demoReviewFixtureByCwd: Record< + string, + { readonly headRef: string; readonly threadId?: string; readonly diff?: string } +> = { + "~/code/t3code-worktrees/composer-attachments": { + headRef: "feat/composer-attachments", + threadId: "thread-composer", + }, + "~/code/t3code-worktrees/git-manager-test": { + headRef: "fix/git-manager-test", + threadId: "thread-flaky", + }, + "~/code/t3code-worktrees/sidebar-v2-polish": { + headRef: "feat/sidebar-v2-polish", + diff: DEMO_SIDEBAR_REVIEW_DIFF, + }, + [DEMO_METRICS_WORKTREE_PATH]: { + headRef: "feat/crash-dashboard", + threadId: "thread-metrics", + }, +}; + +export function demoReviewDiffPreview(cwd: string): ReviewDiffPreviewResult { + const fixture = demoReviewFixtureByCwd[cwd]; + const diff = + fixture?.diff ?? + (fixture?.threadId ? demoThreadDiff(fixture.threadId, 0, Number.MAX_SAFE_INTEGER).diff : ""); + return decodeReviewDiffPreview({ + cwd, + generatedAt: DateTime.makeUnsafe(minutesAgo(2)), + sources: + fixture && diff + ? [ + { + id: "branch-range", + kind: "branch-range", + title: "Branch changes", + baseRef: "main", + headRef: fixture.headRef, + diff, + diffHash: `demo-diff-${fixture.threadId ?? fixture.headRef}`, + truncated: false, + }, + ] + : [], + }); +} + +function demoUnifiedDiffForFile(file: { readonly path: string; readonly kind: string }): string { + if (file.kind === "added") { + return `diff --git a/${file.path} b/${file.path} +new file mode 100644 +index 0000000..9e84b71 +--- /dev/null ++++ b/${file.path} +@@ -0,0 +1 @@ ++// Added in this demo checkpoint. +`; + } + if (file.kind === "deleted") { + return `diff --git a/${file.path} b/${file.path} +deleted file mode 100644 +index 9e84b71..0000000 +--- a/${file.path} ++++ /dev/null +@@ -1 +0,0 @@ +-// Removed in this demo checkpoint. +`; + } + return `diff --git a/${file.path} b/${file.path} +index 3f1c2aa..9e84b71 100644 +--- a/${file.path} ++++ b/${file.path} +@@ -1 +1 @@ +-// Previous demo implementation. ++// Updated in this demo checkpoint. +`; +} + +export function demoThreadDiff( + threadId: string, + fromTurnCount: number, + toTurnCount: number, +): typeof ThreadTurnDiff.Type { + const checkpoints = + demoThreadDetails[threadId]?.checkpoints.filter( + (checkpoint) => + checkpoint.status === "ready" && + checkpoint.checkpointTurnCount > fromTurnCount && + checkpoint.checkpointTurnCount <= toTurnCount, + ) ?? []; + const filesByPath = new Map( + checkpoints.flatMap((checkpoint) => checkpoint.files).map((file) => [file.path, file]), + ); + const diff = + threadId === "thread-composer" && fromTurnCount >= 1 && filesByPath.size > 0 + ? DEMO_COMPOSER_DIFF + : [...filesByPath.values()].map(demoUnifiedDiffForFile).join(""); + return decodeThreadTurnDiff({ threadId, fromTurnCount, toTurnCount, diff }); +} + +// --------------------------------------------------------------------------- +// Thread histories (messages, activities, checkpoints) +// --------------------------------------------------------------------------- + +const decodeMessages = Schema.decodeUnknownSync(Schema.Array(OrchestrationMessage)); +const decodeActivities = Schema.decodeUnknownSync(Schema.Array(OrchestrationThreadActivity)); +const decodeCheckpoints = Schema.decodeUnknownSync(Schema.Array(OrchestrationCheckpointSummary)); + +export interface DemoThreadDetail { + readonly messages: ReadonlyArray; + readonly activities: ReadonlyArray; + readonly checkpoints: ReadonlyArray; +} + +function message(input: { + id: string; + role: "user" | "assistant"; + text: string; + turnId: string | null; + minutesAgo: number; + attachments?: ReadonlyArray<{ + id: string; + name: string; + mimeType: string; + sizeBytes: number; + }>; +}) { + return { + id: input.id, + role: input.role, + text: input.text, + ...(input.attachments + ? { + attachments: input.attachments.map((attachment) => ({ + type: "image", + ...attachment, + })), + } + : {}), + turnId: input.turnId, + streaming: false, + createdAt: minutesAgo(input.minutesAgo), + updatedAt: minutesAgo(input.minutesAgo), + }; +} + +export const demoThreadDetails: Record = { + "thread-composer": { + messages: decodeMessages([ + message({ + id: "msg-composer-u0", + role: "user", + text: "Audit the composer for places where long pasted text breaks the layout.", + turnId: "thread-composer-turn-a", + minutesAgo: 60 * 3 - 5, + }), + message({ + id: "msg-composer-a0", + role: "assistant", + text: [ + "Found two overflow bugs:", + "", + "- `ChatComposer.tsx` let unbroken strings push the send button off-screen — fixed with `overflow-wrap: anywhere` on the editable area", + "- The draft preview in the sidebar clipped multi-line drafts mid-glyph — now uses `line-clamp-2`", + "", + "Both have focused tests.", + ].join("\n"), + turnId: "thread-composer-turn-a", + minutesAgo: 60 * 3 - 25, + }), + message({ + id: "msg-composer-u1", + role: "user", + text: "Add image attachments to the composer — drag & drop should show an overlay, and pasted screenshots should attach too. Here's the mock:", + turnId: "thread-composer-turn-0", + minutesAgo: 41, + attachments: [ + { + id: "att-drag-overlay", + name: "drag-overlay-mock.png", + mimeType: "image/png", + sizeBytes: 48213, + }, + ], + }), + message({ + id: "msg-composer-a1", + role: "assistant", + text: [ + "Done — the composer now accepts image attachments in three ways:", + "", + "1. **Drag & drop** anywhere over the composer (a dashed overlay appears while hovering)", + "2. **Paste** a screenshot straight from the clipboard", + "3. The **`+` attach button**, which opens the native file picker", + "", + "Key change in `ChatComposer.tsx`:", + "", + "```tsx", + "const dragDepthRef = useRef(0);", + "const onComposerDragEnter = (event: DragEvent) => {", + " if (!hasImageFiles(event)) return;", + " dragDepthRef.current += 1;", + " setIsDragOverComposer(true);", + "};", + "```", + "", + "Attachments over 10 MB are rejected with an inline error instead of a toast, and drafts persist attachments across reloads via `composerDraftStore`.", + ].join("\n"), + turnId: "thread-composer-turn-0", + minutesAgo: 22, + }), + message({ + id: "msg-composer-u2", + role: "user", + text: "Nice. Now make the drop overlay match the new dark theme and add a subtle backdrop blur — I opened the preview in the side panel to check it live.", + turnId: "thread-composer-turn-1", + minutesAgo: 6, + }), + ]), + activities: decodeActivities([ + { + id: "act-composer-test", + tone: "tool", + kind: "tool.completed", + summary: "vp test run apps/web/src/components/chat/ChatComposer.test.tsx", + payload: { + status: "completed", + detail: "vp test run apps/web/src/components/chat/ChatComposer.test.tsx", + }, + turnId: "thread-composer-turn-0", + sequence: 1, + createdAt: minutesAgo(24), + }, + ]), + checkpoints: decodeCheckpoints([ + { + turnId: "thread-composer-turn-a", + checkpointTurnCount: 1, + checkpointRef: "refs/t3/checkpoints/thread-composer/1", + status: "ready", + files: [ + { + path: "apps/web/src/components/chat/ChatComposer.tsx", + kind: "modified", + additions: 21, + deletions: 8, + }, + ], + assistantMessageId: "msg-composer-a0", + completedAt: minutesAgo(60 * 3 - 25), + }, + { + turnId: "thread-composer-turn-0", + checkpointTurnCount: 2, + checkpointRef: "refs/t3/checkpoints/thread-composer/2", + status: "ready", + files: [ + { + path: "apps/web/src/components/chat/ChatComposer.tsx", + kind: "modified", + additions: 182, + deletions: 24, + }, + { + path: "apps/web/src/components/ChatView.tsx", + kind: "modified", + additions: 36, + deletions: 5, + }, + { + path: "apps/web/src/composerDraftStore.ts", + kind: "modified", + additions: 54, + deletions: 9, + }, + ], + assistantMessageId: "msg-composer-a1", + completedAt: minutesAgo(22), + }, + ]), + }, + "thread-hero": { + messages: decodeMessages([ + message({ + id: "msg-hero-u0", + role: "user", + text: "What does the marketing hero currently render? Summarize before we change anything.", + turnId: "thread-hero-turn-0", + minutesAgo: 118, + }), + message({ + id: "msg-hero-a0", + role: "assistant", + text: [ + "The hero is a static `` of an old screenshot:", + "", + "- `apps/marketing/src/pages/index.astro` renders `hero-screenshot.png` (1.4 MB, six months old)", + "- No interactivity, and it drifts out of date every time the app UI changes", + ].join("\n"), + turnId: "thread-hero-turn-0", + minutesAgo: 114, + }), + message({ + id: "msg-hero-u1", + role: "user", + text: "Replace the hero screenshot on the marketing site with a live demo of the actual app so visitors can click around.", + turnId: "thread-hero-turn-1", + minutesAgo: 110, + }), + message({ + id: "msg-hero-a1", + role: "assistant", + text: [ + "I can bundle the real app against fixture data — no duplicated markup, so the demo updates whenever the components do.", + "", + "### Plan", + "- Build a standalone Vite entry that renders the real `AppRoot`", + "- Mock only the transport boundary (WebSocket + `fetch`) with the production RPC contracts", + "- Embed the generated bundle in the hero via an `iframe`", + "", + "One decision before I wire it up:", + ].join("\n"), + turnId: "thread-hero-turn-1", + minutesAgo: 8, + }), + ]), + activities: decodeActivities([ + { + id: "act-hero-question", + tone: "info", + kind: "user-input.requested", + summary: "Waiting for your answer", + payload: { + requestId: "req-hero-question", + questions: [ + { + id: "q-hero-layout", + header: "Hero demo", + question: "Which sidebar should the hero demo default to?", + options: [ + { + label: "Sidebar v2 (flat list)", + description: "Showcase the new beta sidebar with rich active cards", + }, + { + label: "Classic sidebar", + description: "Project-grouped v1 layout everyone already knows", + }, + ], + multiSelect: false, + }, + ], + }, + turnId: "thread-hero-turn-1", + sequence: 2, + createdAt: minutesAgo(4), + }, + ]), + checkpoints: decodeCheckpoints([]), + }, + "thread-flaky": { + messages: decodeMessages([ + message({ + id: "msg-flaky-u1", + role: "user", + text: "GitManager cross-repo PR metadata test is flaky in CI — times out at 12s roughly one run in five. Find it and fix it.", + turnId: "thread-flaky-turn-1", + minutesAgo: 60 * 7, + }), + message({ + id: "msg-flaky-a1", + role: "assistant", + text: [ + "Found it. The test raced the remote fetch against a fixed 12s timeout:", + "", + "- `GitManager.test.ts` spun up **two** temp repos but awaited their fixtures sequentially", + "- The second `git fetch` occasionally started after the assertion deadline", + "", + "Fix: await both fixtures with `Promise.all` and assert on the settled result instead of polling.", + ].join("\n"), + turnId: "thread-flaky-turn-1", + minutesAgo: 60 * 5, + }), + message({ + id: "msg-flaky-u2", + role: "user", + text: "Can you prove it's actually fixed and not just faster?", + turnId: "thread-flaky-turn-2", + minutesAgo: 60 * 2, + }), + message({ + id: "msg-flaky-a2", + role: "assistant", + text: [ + "Yes — three lines of evidence:", + "", + "1. **200 consecutive local runs** pass, worst case `1.62s` (old p95 was `11.4s`)", + "2. The failure mode is structurally gone: both fixtures now resolve before the clock starts, so the deadline only covers the assertion itself", + "3. I added a regression guard — the test now fails fast with a clear message if either fixture takes longer than `5s` to provision:", + "", + "```ts", + "const [origin, fork] = await Promise.all([", + ' provisionRepo("origin"),', + ' provisionRepo("fork"),', + ']).withTimeout("5 seconds");', + "```", + ].join("\n"), + turnId: "thread-flaky-turn-2", + minutesAgo: 35, + }), + ]), + activities: decodeActivities([]), + checkpoints: decodeCheckpoints([ + { + turnId: "thread-flaky-turn-1", + checkpointTurnCount: 1, + checkpointRef: "refs/t3/checkpoints/thread-flaky/1", + status: "ready", + files: [ + { + path: "apps/server/src/git/GitManager.test.ts", + kind: "modified", + additions: 38, + deletions: 21, + }, + ], + assistantMessageId: "msg-flaky-a1", + completedAt: minutesAgo(60 * 5), + }, + { + turnId: "thread-flaky-turn-2", + checkpointTurnCount: 2, + checkpointRef: "refs/t3/checkpoints/thread-flaky/2", + status: "ready", + files: [ + { + path: "apps/server/src/git/GitManager.test.ts", + kind: "modified", + additions: 14, + deletions: 2, + }, + ], + assistantMessageId: "msg-flaky-a2", + completedAt: minutesAgo(35), + }, + ]), + }, + "thread-sidebar": { + messages: decodeMessages([ + message({ + id: "msg-sidebar-u1", + role: "user", + text: "Polish sidebar v2: settled threads should sort by settle time, and add the little jump hints when the active thread is scrolled out of view.", + turnId: "thread-sidebar-turn-1", + minutesAgo: 60 * 4, + }), + message({ + id: "msg-sidebar-a1", + role: "assistant", + text: [ + "Settled sort is in — settled rows now order by `settledAt` descending. Working on the jump hints next; I need to run the focused test suite to confirm the sort change:", + ].join("\n"), + turnId: "thread-sidebar-turn-1", + minutesAgo: 16, + }), + ]), + activities: decodeActivities([]), + checkpoints: decodeCheckpoints([]), + }, + "thread-metrics": { + messages: decodeMessages([ + message({ + id: "msg-metrics-u1", + role: "user", + text: "Build a crash-free sessions dashboard page — pull the numbers from the analytics API and chart the last 30 days.", + turnId: "thread-metrics-turn-1", + minutesAgo: 60 * 5, + }), + message({ + id: "msg-metrics-a1", + role: "assistant", + text: [ + "First cut is live on the dev server — I opened `localhost:3000/dashboard` in the browser panel so you can watch it update.", + "", + "- 30-day crash-free rate chart with a `99.5%` target line", + "- Worst five crash groups with device/OS breakdown", + "- Data refreshes every 60s via `useQuery` polling", + ].join("\n"), + turnId: "thread-metrics-turn-1", + minutesAgo: 44, + }), + message({ + id: "msg-metrics-u2", + role: "user", + text: "Looks good. Add a release picker so we can compare crash rates across app versions.", + turnId: "thread-metrics-turn-2", + minutesAgo: 11, + }), + ]), + activities: decodeActivities([]), + checkpoints: decodeCheckpoints([ + { + turnId: "thread-metrics-turn-1", + checkpointTurnCount: 1, + checkpointRef: "refs/t3/checkpoints/thread-metrics/1", + status: "ready", + files: [ + { + path: "src/pages/dashboard.tsx", + kind: "added", + additions: 214, + deletions: 0, + }, + { + path: "src/api/analytics.ts", + kind: "added", + additions: 88, + deletions: 0, + }, + ], + assistantMessageId: "msg-metrics-a1", + completedAt: minutesAgo(44), + }, + ]), + }, + "thread-push": { + messages: decodeMessages([ + message({ + id: "msg-push-u1", + role: "user", + text: "Tapping a push notification should deep-link into the exact chat thread, not just open the app.", + turnId: "thread-push-turn-1", + minutesAgo: 60 * 21, + }), + message({ + id: "msg-push-a1", + role: "assistant", + text: [ + "Deep links are wired up end-to-end:", + "", + "- Notification payloads now carry a `t3code://thread/:id` URL", + "- Cold starts queue the link until the router is ready, warm starts navigate immediately", + "- Android needed an extra `intent-filter`; iOS goes through `onNotificationOpenedApp`", + "", + "Tested on both platforms with the app killed, backgrounded, and foregrounded.", + ].join("\n"), + turnId: "thread-push-turn-1", + minutesAgo: 60 * 20, + }), + ]), + activities: decodeActivities([]), + checkpoints: decodeCheckpoints([ + { + turnId: "thread-push-turn-1", + checkpointTurnCount: 1, + checkpointRef: "refs/t3/checkpoints/thread-push/1", + status: "ready", + files: [ + { + path: "src/notifications/deepLinks.ts", + kind: "added", + additions: 96, + deletions: 0, + }, + { + path: "app.config.ts", + kind: "modified", + additions: 12, + deletions: 1, + }, + ], + assistantMessageId: "msg-push-a1", + completedAt: minutesAgo(60 * 20), + }, + ]), + }, + "thread-pricing": { + messages: decodeMessages([ + message({ + id: "msg-pricing-u1", + role: "user", + text: "Refresh the pricing page copy — clearer tier names and a proper FAQ.", + turnId: "thread-pricing-turn-1", + minutesAgo: 60 * 6, + }), + message({ + id: "msg-pricing-a1", + role: "assistant", + text: [ + "Shipped. Tiers are now **Solo / Team / Enterprise** with one-line value props, and the FAQ answers the six questions support sees most. Copy deck is in the PR description for review.", + ].join("\n"), + turnId: "thread-pricing-turn-1", + minutesAgo: 60 * 5, + }), + ]), + activities: decodeActivities([]), + checkpoints: decodeCheckpoints([ + { + turnId: "thread-pricing-turn-1", + checkpointTurnCount: 1, + checkpointRef: "refs/t3/checkpoints/thread-pricing/1", + status: "ready", + files: [ + { + path: "src/pages/pricing.astro", + kind: "modified", + additions: 68, + deletions: 41, + }, + ], + assistantMessageId: "msg-pricing-a1", + completedAt: minutesAgo(60 * 5), + }, + ]), + }, + "thread-relay": { + messages: decodeMessages([ + message({ + id: "msg-relay-u1", + role: "user", + text: "Relay reconnects stampede after a network blip — add jitter to the backoff.", + turnId: "thread-relay-turn-1", + minutesAgo: 60 * 10, + }), + message({ + id: "msg-relay-a1", + role: "assistant", + text: [ + "Added full jitter to the reconnect schedule (`base * 2^attempt * random(0.5, 1)` capped at 30s). A simulated 500-client blip now spreads reconnects across 14 seconds instead of all landing in the same 200ms window.", + ].join("\n"), + turnId: "thread-relay-turn-1", + minutesAgo: 60 * 9, + }), + ]), + activities: decodeActivities([]), + checkpoints: decodeCheckpoints([ + { + turnId: "thread-relay-turn-1", + checkpointTurnCount: 1, + checkpointRef: "refs/t3/checkpoints/thread-relay/1", + status: "ready", + files: [ + { + path: "packages/relay/src/reconnect.ts", + kind: "modified", + additions: 27, + deletions: 9, + }, + ], + assistantMessageId: "msg-relay-a1", + completedAt: minutesAgo(60 * 9), + }, + ]), + }, + "thread-ci": { + messages: decodeMessages([ + message({ + id: "msg-ci-u1", + role: "user", + text: "The nightly EAS build keeps timing out. Investigate, but this is not urgent — snoozing it.", + turnId: "thread-ci-turn-1", + minutesAgo: 60 * 24 * 3 + 40, + }), + message({ + id: "msg-ci-a1", + role: "assistant", + text: [ + "Initial findings: the timeout is in the native dependency compile step, which doubled after the RN 0.85 upgrade. Caching the NDK artifacts should cut it below the limit — parked until you unsnooze.", + ].join("\n"), + turnId: "thread-ci-turn-1", + minutesAgo: 60 * 24 * 3, + }), + ]), + activities: decodeActivities([]), + checkpoints: decodeCheckpoints([]), + }, + "thread-blog": { + messages: decodeMessages([ + message({ + id: "msg-blog-u1", + role: "user", + text: "Add an RSS feed for the changelog. Low priority — park it after the first pass.", + turnId: "thread-blog-turn-1", + minutesAgo: 60 * 24 * 2 + 30, + }), + message({ + id: "msg-blog-a1", + role: "assistant", + text: [ + 'First pass done: `/changelog/rss.xml` renders the ten latest entries with correct `pubDate`s. Still todo when you pick this back up: full-content encoding and a `` tag on the changelog page.', + ].join("\n"), + turnId: "thread-blog-turn-1", + minutesAgo: 60 * 24 * 2, + }), + ]), + activities: decodeActivities([]), + checkpoints: decodeCheckpoints([ + { + turnId: "thread-blog-turn-1", + checkpointTurnCount: 1, + checkpointRef: "refs/t3/checkpoints/thread-blog/1", + status: "ready", + files: [ + { + path: "src/pages/changelog/rss.xml.ts", + kind: "added", + additions: 52, + deletions: 0, + }, + ], + assistantMessageId: "msg-blog-a1", + completedAt: minutesAgo(60 * 24 * 2), + }, + ]), + }, + "thread-deploy": { + messages: decodeMessages([ + message({ + id: "msg-deploy-u1", + role: "user", + text: "Set up blue/green deploys for the API so releases stop dropping requests.", + turnId: "thread-deploy-turn-1", + minutesAgo: 60 * 26, + }), + message({ + id: "msg-deploy-a1", + role: "assistant", + text: [ + "Blue/green is live:", + "", + "1. Deploys provision the idle color, run smoke tests, then swap the load balancer target group", + "2. Rollback is a single swap back — no rebuild", + "3. Yesterday's release shipped with **zero** dropped requests (previous deploys dropped ~120)", + ].join("\n"), + turnId: "thread-deploy-turn-1", + minutesAgo: 60 * 24, + }), + ]), + activities: decodeActivities([]), + checkpoints: decodeCheckpoints([ + { + turnId: "thread-deploy-turn-1", + checkpointTurnCount: 1, + checkpointRef: "refs/t3/checkpoints/thread-deploy/1", + status: "ready", + files: [ + { + path: "infra/deploy/blue-green.ts", + kind: "added", + additions: 143, + deletions: 0, + }, + { + path: ".github/workflows/deploy.yml", + kind: "modified", + additions: 31, + deletions: 18, + }, + ], + assistantMessageId: "msg-deploy-a1", + completedAt: minutesAgo(60 * 24), + }, + ]), + }, +}; + +// --------------------------------------------------------------------------- +// Asset fixtures (project favicons + message attachments) +// --------------------------------------------------------------------------- + +export const demoProjectFaviconUrlByCwd: Record = { + "~/code/t3code": "https://www.google.com/s2/favicons?domain=t3.gg&sz=64", + "~/code/marketing-site": "https://www.google.com/s2/favicons?domain=astro.build&sz=64", + "~/code/mobile-app": "https://www.google.com/s2/favicons?domain=expo.dev&sz=64", + [DEMO_METRICS_WORKTREE_PATH]: "https://www.google.com/s2/favicons?domain=expo.dev&sz=64", +}; + +const dragOverlayMockSvg = [ + '', + '', + '', + '', + 'Drop images to attach', + 'PNG, JPEG or WebP — up to 10 MB', + "", +].join(""); + +export const demoAttachmentUrlById: Record = { + "att-drag-overlay": `data:image/svg+xml,${encodeURIComponent(dragOverlayMockSvg)}`, +}; diff --git a/apps/web/src/demo/main.tsx b/apps/web/src/demo/main.tsx new file mode 100644 index 00000000000..7c5c700ee74 --- /dev/null +++ b/apps/web/src/demo/main.tsx @@ -0,0 +1,44 @@ +import React from "react"; +import ReactDOM from "react-dom/client"; +import { createHashHistory } from "@tanstack/react-router"; + +import "@fontsource-variable/dm-sans/index.css"; +import "@fontsource/jetbrains-mono/400.css"; +import "@fontsource/jetbrains-mono/500.css"; +import "@xterm/xterm/css/xterm.css"; +import "../index.css"; + +import { startDemoServer } from "./server"; +import { seedDemoClientState } from "./seed"; +import { installDemoStageBridge } from "./stage"; + +installDemoStageBridge(); +startDemoServer(); + +// First-visit state (Sidebar v2 on, remote machines registered, browser panel +// open on showcase threads) must land before the app boots and reads it, so +// the app modules (whose stores rehydrate persisted state on import) are +// loaded only after seeding completes. +async function renderDemo(): Promise { + try { + await seedDemoClientState(); + } catch (error) { + console.warn("Could not seed the marketing demo; continuing with browser defaults.", error); + } + + const [{ getRouter }, { AppRoot }] = await Promise.all([ + import("../router"), + import("../AppRoot"), + ]); + + // Hash history keeps the demo self-contained on a single static page. + const router = getRouter(createHashHistory()); + + ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render( + + + , + ); +} + +void renderDemo(); diff --git a/apps/web/src/demo/seed.ts b/apps/web/src/demo/seed.ts new file mode 100644 index 00000000000..66e91023746 --- /dev/null +++ b/apps/web/src/demo/seed.ts @@ -0,0 +1,311 @@ +/** + * Seeds first-visit client state for the demo: Sidebar V2 on, the fake remote + * machines registered in the connection catalog (so T3 Connect environments + * show up and connect through the demo transport), and the browser panel open + * on a couple of showcase threads. Existing state is never overwritten, so a + * visitor's own toggles and panel layout persist across reloads. + */ +import { DEFAULT_CLIENT_SETTINGS } from "@t3tools/contracts/settings"; +import { EnvironmentId } from "@t3tools/contracts"; +import { + BearerConnectionCredential, + BearerConnectionProfile, + BearerConnectionTarget, +} from "@t3tools/client-runtime/connection"; +import { ConnectionCatalogDocument } from "@t3tools/client-runtime/platform"; +import * as Schema from "effect/Schema"; + +import { readBrowserClientSettings, writeBrowserClientSettings } from "../clientPersistenceStorage"; +import { APP_VERSION } from "../branding"; +import { + buildVersionMismatchDismissalKey, + dismissVersionMismatch, + resolveVersionMismatch, +} from "../versionSkew"; +import { + demoBrowserPanelThreadKeys, + demoDiffPanelSelectionByThreadKey, + demoEnvironments, +} from "./fixtures"; +import { makeDemoSeedMarker, resolveDemoSeedStaleness } from "./seedState"; +import { demoServerVersionFor, type DemoStage } from "./stage"; + +const CONNECTION_DATABASE_NAME = "t3code:connection-runtime"; +const CONNECTION_DATABASE_VERSION = 4; +const CATALOG_STORE_NAME = "catalog"; +const CATALOG_KEY = "document"; + +const RIGHT_PANEL_STORAGE_KEY = "t3code:right-panel-state:v2"; +const RIGHT_PANEL_STORAGE_VERSION = 7; + +const DIFF_PANEL_STORAGE_KEY = "t3code:diff-panel-state:v1"; +const DIFF_PANEL_STORAGE_VERSION = 1; +const DEMO_FIXTURE_VERSION = 2; + +/** + * Identifies the fixture generation the visitor's persisted state was seeded + * from. When the fixtures change (new environments/threads), stale seeded + * state would reference machines that no longer exist, so it is re-seeded. + */ +const DEMO_SEED_VERSION_KEY = "t3code:demo-seed-version"; +const LEGACY_DEMO_PANEL_SEED_VERSION_KEY = "t3code:demo-panel-seed-version"; +const LEGACY_DEMO_CATALOG_SEED_VERSION_KEY = "t3code:demo-catalog-seed-version"; +const DEMO_SEED_VERSION = JSON.stringify({ + fixtureVersion: DEMO_FIXTURE_VERSION, + environments: demoEnvironments.map((environment) => ({ + environmentId: environment.environmentId, + label: environment.label, + origin: environment.origin, + })), + browserPanelThreadKeys: demoBrowserPanelThreadKeys, + diffPanelSelections: demoDiffPanelSelectionByThreadKey, +}); + +const encodeCatalogDocument = Schema.encodeSync(Schema.fromJsonString(ConnectionCatalogDocument)); + +function readLocalStorage(key: string): string | null { + try { + return window.localStorage.getItem(key); + } catch { + return null; + } +} + +function writeLocalStorage(key: string, value: string): boolean { + try { + window.localStorage.setItem(key, value); + return true; + } catch { + return false; + } +} + +function demoCatalogDocument(): string { + const remotes = demoEnvironments.filter( + (environment) => environment.origin !== null && environment.bearerToken !== null, + ); + return encodeCatalogDocument({ + schemaVersion: 1, + targets: remotes.map( + (environment) => + new BearerConnectionTarget({ + environmentId: EnvironmentId.make(environment.environmentId), + label: environment.label, + connectionId: `demo-connection-${environment.environmentId}`, + }), + ), + profiles: remotes.map( + (environment) => + new BearerConnectionProfile({ + connectionId: `demo-connection-${environment.environmentId}`, + environmentId: EnvironmentId.make(environment.environmentId), + label: environment.label, + httpBaseUrl: environment.origin as string, + wsBaseUrl: (environment.origin as string).replace(/^http/, "ws"), + }), + ), + credentials: remotes.map((environment) => ({ + connectionId: `demo-connection-${environment.environmentId}`, + credential: new BearerConnectionCredential({ token: environment.bearerToken as string }), + })), + remoteDpopTokens: [], + }); +} + +/** Registers the fake remote machines unless a current catalog already exists. */ +function seedConnectionCatalog(force: boolean): Promise { + return new Promise((resolve) => { + if (typeof indexedDB === "undefined") { + resolve(false); + return; + } + let settled = false; + const settle = (result: boolean) => { + if (settled) return; + settled = true; + resolve(result); + }; + const request = indexedDB.open(CONNECTION_DATABASE_NAME, CONNECTION_DATABASE_VERSION); + request.addEventListener("upgradeneeded", () => { + // Mirror the store set the app's connection storage creates, so the + // app's own open() (same version) does not need another upgrade. + for (const store of ["catalog", "shell", "thread", "server-config", "vcs-refs"]) { + if (!request.result.objectStoreNames.contains(store)) { + request.result.createObjectStore(store); + } + } + }); + request.addEventListener("blocked", () => settle(false)); + request.addEventListener("error", () => settle(false)); + request.addEventListener("success", () => { + const database = request.result; + if (settled) { + database.close(); + return; + } + let read: IDBRequest; + try { + read = database + .transaction(CATALOG_STORE_NAME, "readonly") + .objectStore(CATALOG_STORE_NAME) + .get(CATALOG_KEY); + } catch { + database.close(); + settle(false); + return; + } + read.addEventListener("error", () => { + database.close(); + settle(false); + }); + read.addEventListener("success", () => { + if (!force && typeof read.result === "string" && read.result.trim() !== "") { + database.close(); + settle(true); + return; + } + const staleStores = ["shell", "thread", "server-config", "vcs-refs"].filter((store) => + database.objectStoreNames.contains(store), + ); + let write: IDBTransaction; + try { + write = database.transaction([CATALOG_STORE_NAME, ...staleStores], "readwrite"); + } catch { + database.close(); + settle(false); + return; + } + for (const store of staleStores) { + write.objectStore(store).clear(); + } + write.objectStore(CATALOG_STORE_NAME).put(demoCatalogDocument(), CATALOG_KEY); + write.addEventListener("complete", () => { + database.close(); + settle(true); + }); + write.addEventListener("error", () => { + database.close(); + settle(false); + }); + write.addEventListener("abort", () => { + database.close(); + settle(false); + }); + }); + }); + }); +} + +/** + * Opens the right panel (on the diff surface — the browser preview needs the + * desktop bridge) on the showcase threads for first-time visitors. + */ +function seedRightPanelState(force: boolean): boolean { + if (!force && readLocalStorage(RIGHT_PANEL_STORAGE_KEY) !== null) { + return true; + } + const byThreadKey = Object.fromEntries( + demoBrowserPanelThreadKeys.map((threadKey) => [ + threadKey, + { + isOpen: true, + activeSurfaceId: "diff", + surfaces: [{ id: "diff", kind: "diff" }], + }, + ]), + ); + return writeLocalStorage( + RIGHT_PANEL_STORAGE_KEY, + JSON.stringify({ state: { byThreadKey }, version: RIGHT_PANEL_STORAGE_VERSION }), + ); +} + +/** + * Points the diff panel at the latest checkpoint on the showcase thread so the + * rendered diff (not an empty working-tree view) greets first-time visitors. + */ +function seedDiffPanelSelection(force: boolean): boolean { + if (!force && readLocalStorage(DIFF_PANEL_STORAGE_KEY) !== null) { + return true; + } + const byThreadKey = Object.fromEntries( + Object.entries(demoDiffPanelSelectionByThreadKey).map(([threadKey, turnId]) => [ + threadKey, + { + kind: "turn", + turnId, + filePath: null, + revealRequestId: 1, + }, + ]), + ); + return writeLocalStorage( + DIFF_PANEL_STORAGE_KEY, + JSON.stringify({ + state: { + byThreadKey, + branchBaseRefByThreadKey: {}, + }, + version: DIFF_PANEL_STORAGE_VERSION, + }), + ); +} + +/** + * The channel-preview builds (?stage=nightly/dev) report stage-suffixed server + * versions so the real branding + stage art react to them, which would also + * trip the client/server version-skew banner. Pre-dismiss it — the skew is + * intentional demo fixture data, not something a visitor should resolve. + */ +function seedVersionMismatchDismissals(): void { + const stages: ReadonlyArray = ["latest", "nightly", "dev"]; + for (const stage of stages) { + const mismatch = resolveVersionMismatch(demoServerVersionFor(APP_VERSION, stage)); + if (!mismatch) continue; + for (const environment of demoEnvironments) { + dismissVersionMismatch( + buildVersionMismatchDismissalKey(EnvironmentId.make(environment.environmentId), mismatch), + ); + } + } +} + +export async function seedDemoClientState(): Promise { + // The demo showcases the Sidebar v2 beta by default; visitors can still + // toggle it in Settings, and their choice persists. + if (readBrowserClientSettings() === null) { + try { + writeBrowserClientSettings({ ...DEFAULT_CLIENT_SETTINGS, sidebarV2Enabled: true }); + } catch { + // The demo remains usable when browser storage is blocked or full. + } + } + seedVersionMismatchDismissals(); + // The original marker proved both storage surfaces were seeded. A short-lived + // split-marker implementation also wrote separate panel/catalog keys, so the + // unified state migration accepts both layouts without destructive re-seeds. + const { stalePanelFixtures, staleCatalogFixtures } = resolveDemoSeedStaleness({ + seedVersion: readLocalStorage(DEMO_SEED_VERSION_KEY), + legacyPanelSeedVersion: readLocalStorage(LEGACY_DEMO_PANEL_SEED_VERSION_KEY), + legacyCatalogSeedVersion: readLocalStorage(LEGACY_DEMO_CATALOG_SEED_VERSION_KEY), + currentVersion: DEMO_SEED_VERSION, + }); + + const rightPanelSeeded = seedRightPanelState(stalePanelFixtures); + const diffPanelSeeded = seedDiffPanelSelection(stalePanelFixtures); + const panelsSeeded = rightPanelSeeded && diffPanelSeeded; + if (panelsSeeded) { + writeLocalStorage( + DEMO_SEED_VERSION_KEY, + makeDemoSeedMarker(staleCatalogFixtures ? "catalog-pending" : "current", DEMO_SEED_VERSION), + ); + } + + const catalogSeeded = await seedConnectionCatalog(staleCatalogFixtures); + if (catalogSeeded) { + writeLocalStorage( + DEMO_SEED_VERSION_KEY, + makeDemoSeedMarker(panelsSeeded ? "current" : "panels-pending", DEMO_SEED_VERSION), + ); + } +} diff --git a/apps/web/src/demo/seedState.test.ts b/apps/web/src/demo/seedState.test.ts new file mode 100644 index 00000000000..3544773e51b --- /dev/null +++ b/apps/web/src/demo/seedState.test.ts @@ -0,0 +1,59 @@ +import { describe, expect, it } from "vite-plus/test"; + +import { makeDemoSeedMarker, resolveDemoSeedStaleness } from "./seedState"; + +const currentVersion = "fixture-v2"; + +function resolve( + seedVersion: string | null, + legacyPanelSeedVersion: string | null = null, + legacyCatalogSeedVersion: string | null = null, +) { + return resolveDemoSeedStaleness({ + seedVersion, + legacyPanelSeedVersion, + legacyCatalogSeedVersion, + currentVersion, + }); +} + +describe("resolveDemoSeedStaleness", () => { + it("accepts the original combined marker without forcing a migration reset", () => { + expect(resolve(currentVersion, "old", "pending")).toEqual({ + stalePanelFixtures: false, + staleCatalogFixtures: false, + }); + }); + + it("migrates split panel and catalog markers independently", () => { + expect(resolve(null, currentVersion, currentVersion)).toEqual({ + stalePanelFixtures: false, + staleCatalogFixtures: false, + }); + }); + + it("tracks either failed storage surface without retrying the successful one", () => { + expect(resolve(makeDemoSeedMarker("panels-pending", currentVersion))).toEqual({ + stalePanelFixtures: true, + staleCatalogFixtures: false, + }); + expect(resolve(makeDemoSeedMarker("catalog-pending", currentVersion))).toEqual({ + stalePanelFixtures: false, + staleCatalogFixtures: true, + }); + }); + + it("ignores obsolete split keys after the unified state marker is written", () => { + expect(resolve(makeDemoSeedMarker("current", currentVersion), "old", "old")).toEqual({ + stalePanelFixtures: false, + staleCatalogFixtures: false, + }); + }); + + it("re-seeds both storage surfaces for a prior fixture generation", () => { + expect(resolve(makeDemoSeedMarker("current", "fixture-v1"))).toEqual({ + stalePanelFixtures: true, + staleCatalogFixtures: true, + }); + }); +}); diff --git a/apps/web/src/demo/seedState.ts b/apps/web/src/demo/seedState.ts new file mode 100644 index 00000000000..dc84e1e9ffb --- /dev/null +++ b/apps/web/src/demo/seedState.ts @@ -0,0 +1,51 @@ +const CURRENT_PREFIX = "current:"; +const PANELS_PENDING_PREFIX = "panels-pending:"; +const CATALOG_PENDING_PREFIX = "catalog-pending:"; + +export type DemoSeedMarkerState = "current" | "panels-pending" | "catalog-pending"; + +export function makeDemoSeedMarker(state: DemoSeedMarkerState, version: string): string { + return `${state}:${version}`; +} + +export function resolveDemoSeedStaleness(input: { + seedVersion: string | null; + legacyPanelSeedVersion: string | null; + legacyCatalogSeedVersion: string | null; + currentVersion: string; +}): { + stalePanelFixtures: boolean; + staleCatalogFixtures: boolean; +} { + const currentMarker = makeDemoSeedMarker("current", input.currentVersion); + const panelsPendingMarker = makeDemoSeedMarker("panels-pending", input.currentVersion); + const catalogPendingMarker = makeDemoSeedMarker("catalog-pending", input.currentVersion); + + if (input.seedVersion === input.currentVersion) { + return { stalePanelFixtures: false, staleCatalogFixtures: false }; + } + if (input.seedVersion === currentMarker) { + return { stalePanelFixtures: false, staleCatalogFixtures: false }; + } + if (input.seedVersion === panelsPendingMarker) { + return { stalePanelFixtures: true, staleCatalogFixtures: false }; + } + if (input.seedVersion === catalogPendingMarker) { + return { stalePanelFixtures: false, staleCatalogFixtures: true }; + } + + const isPriorStateMarker = + input.seedVersion?.startsWith(CURRENT_PREFIX) === true || + input.seedVersion?.startsWith(PANELS_PENDING_PREFIX) === true || + input.seedVersion?.startsWith(CATALOG_PENDING_PREFIX) === true; + if (isPriorStateMarker) { + return { stalePanelFixtures: true, staleCatalogFixtures: true }; + } + + const panelSeedVersion = input.legacyPanelSeedVersion ?? input.seedVersion; + const catalogSeedVersion = input.legacyCatalogSeedVersion ?? input.seedVersion; + return { + stalePanelFixtures: panelSeedVersion !== input.currentVersion, + staleCatalogFixtures: catalogSeedVersion !== input.currentVersion, + }; +} diff --git a/apps/web/src/demo/server.test.ts b/apps/web/src/demo/server.test.ts new file mode 100644 index 00000000000..b2232f9c36e --- /dev/null +++ b/apps/web/src/demo/server.test.ts @@ -0,0 +1,299 @@ +import { ClientOrchestrationCommand, type GitRunStackedActionInput } from "@t3tools/contracts"; +import { describe, expect, it } from "@effect/vitest"; +import * as Effect from "effect/Effect"; +import * as Schema from "effect/Schema"; + +import { demoEnvironments, DEMO_METRICS_WORKTREE_PATH, demoVcsStatusByCwd } from "./fixtures"; +import { + applyDemoGitActionToStatus, + demoGitActionEvents, + DemoSettingsStore, + DemoShellStore, + dispatchDemoCommand, +} from "./server"; + +const decodeCommand = Schema.decodeUnknownSync(ClientOrchestrationCommand); + +describe("demo shell mutations", () => { + it("timestamps mode changes when they are applied", () => { + const environment = demoEnvironments.find( + (candidate) => candidate.environmentId === "demo-mac-studio", + ); + if (!environment) throw new Error("Missing Mac Studio demo environment"); + + const store = new DemoShellStore(environment.shellSnapshot); + const appliedAfter = Date.now(); + store.dispatch( + decodeCommand({ + type: "thread.runtime-mode.set", + commandId: "command-runtime-mode", + threadId: "thread-composer", + runtimeMode: "approval-required", + createdAt: "2000-01-01T00:00:00.000Z", + }), + ); + store.dispatch( + decodeCommand({ + type: "thread.interaction-mode.set", + commandId: "command-interaction-mode", + threadId: "thread-composer", + interactionMode: "plan", + createdAt: "2000-01-01T00:00:00.000Z", + }), + ); + + const thread = store.thread("thread-composer"); + expect(thread?.runtimeMode).toBe("approval-required"); + expect(thread?.interactionMode).toBe("plan"); + expect(Date.parse(thread?.updatedAt ?? "")).toBeGreaterThanOrEqual(appliedAfter); + }); + + it("preserves a newer branch when metadata reconciliation is stale", () => { + const environment = demoEnvironments.find( + (candidate) => candidate.environmentId === "demo-mac-studio", + ); + if (!environment) throw new Error("Missing Mac Studio demo environment"); + + const store = new DemoShellStore(environment.shellSnapshot); + const original = store.thread("thread-composer"); + if (!original) throw new Error("Missing composer demo thread"); + + store.dispatch( + decodeCommand({ + type: "thread.meta.update", + commandId: "command-stale-branch", + threadId: original.id, + title: "Updated title", + branch: "feature/stale-ref", + expectedBranch: "feature/previous-ref", + }), + ); + + expect(store.thread(original.id)).toMatchObject({ + title: "Updated title", + branch: original.branch, + }); + }); + + it("moves archived threads out of the active shell stream and restores them on unarchive", () => { + const environment = demoEnvironments.find( + (candidate) => candidate.environmentId === "demo-mac-studio", + ); + if (!environment) throw new Error("Missing Mac Studio demo environment"); + + const store = new DemoShellStore(environment.shellSnapshot); + const events: Array<{ kind: string }> = []; + store.subscribe((event) => events.push(event)); + + store.dispatch( + decodeCommand({ + type: "thread.archive", + commandId: "command-archive", + threadId: "thread-composer", + }), + ); + + expect(store.snapshot().threads.some((thread) => thread.id === "thread-composer")).toBe(false); + expect( + store.archivedSnapshot().threads.find((thread) => thread.id === "thread-composer") + ?.archivedAt, + ).not.toBeNull(); + expect(events.at(-1)?.kind).toBe("thread-removed"); + + store.dispatch( + decodeCommand({ + type: "thread.unarchive", + commandId: "command-unarchive", + threadId: "thread-composer", + }), + ); + + expect( + store.snapshot().threads.find((thread) => thread.id === "thread-composer")?.archivedAt, + ).toBe(null); + expect(store.archivedSnapshot().threads.some((thread) => thread.id === "thread-composer")).toBe( + false, + ); + expect(events.at(-1)?.kind).toBe("thread-upserted"); + }); + + it.effect("requires force to delete a project with threads", () => + Effect.gen(function* () { + const environment = demoEnvironments.find( + (candidate) => candidate.environmentId === "demo-mac-studio", + ); + if (!environment) throw new Error("Missing Mac Studio demo environment"); + + const store = new DemoShellStore(environment.shellSnapshot); + const thread = store.thread("thread-composer"); + if (!thread) throw new Error("Missing composer demo thread"); + const sequence = store.snapshot().snapshotSequence; + + const blockedDelete = yield* Effect.flip( + dispatchDemoCommand( + store, + decodeCommand({ + type: "project.delete", + commandId: "command-project-delete", + projectId: thread.projectId, + }), + ), + ); + expect(blockedDelete).toMatchObject({ + _tag: "OrchestrationDispatchCommandError", + message: `Project '${thread.projectId}' is not empty and cannot be deleted without force=true.`, + }); + expect(store.snapshot().snapshotSequence).toBe(sequence); + expect(store.snapshot().projects.some((project) => project.id === thread.projectId)).toBe( + true, + ); + expect(store.thread(thread.id)).toBeDefined(); + + store.dispatch( + decodeCommand({ + type: "project.delete", + commandId: "command-project-force-delete", + projectId: thread.projectId, + force: true, + }), + ); + expect(store.snapshot().projects.some((project) => project.id === thread.projectId)).toBe( + false, + ); + expect(store.thread(thread.id)).toBeUndefined(); + }), + ); + + it.effect("does not expose unexpected dispatch defect messages", () => + Effect.gen(function* () { + const environment = demoEnvironments.find( + (candidate) => candidate.environmentId === "demo-mac-studio", + ); + if (!environment) throw new Error("Missing Mac Studio demo environment"); + + const store = new DemoShellStore(environment.shellSnapshot); + store.dispatch = () => { + throw new Error("internal implementation detail"); + }; + + const error = yield* Effect.flip( + dispatchDemoCommand( + store, + decodeCommand({ + type: "project.delete", + commandId: "command-project-delete-defect", + projectId: "project-missing", + }), + ), + ); + + expect(error).toMatchObject({ + _tag: "OrchestrationDispatchCommandError", + message: "Failed to dispatch demo orchestration command.", + }); + }), + ); +}); + +describe("demo settings", () => { + it("persists settings patches", () => { + const environment = demoEnvironments.find( + (candidate) => candidate.environmentId === "demo-mac-studio", + ); + if (!environment) throw new Error("Missing Mac Studio demo environment"); + + const store = new DemoSettingsStore(environment.serverConfig.settings); + const next = store.update({ enableAssistantStreaming: true }); + + expect(next.enableAssistantStreaming).toBe(true); + expect(store.snapshot().enableAssistantStreaming).toBe(true); + }); +}); + +describe("demo git actions", () => { + it("reports and applies a requested feature branch", () => { + const input = { + actionId: "demo-feature-branch", + cwd: DEMO_METRICS_WORKTREE_PATH, + action: "commit_push_pr", + commitMessage: "Add release filters", + featureBranch: true, + } satisfies GitRunStackedActionInput; + const current = demoVcsStatusByCwd[DEMO_METRICS_WORKTREE_PATH]; + if (current?._tag !== "snapshot") throw new Error("Missing metrics VCS snapshot"); + + const events = demoGitActionEvents(input); + const started = events.find((event) => event.kind === "action_started"); + const finished = events.find((event) => event.kind === "action_finished"); + + expect(started?.phases).toEqual(["branch", "commit", "push", "pr"]); + expect(finished?.result.branch).toEqual({ + status: "created", + name: "feat/add-release-filters", + }); + expect(finished?.result.push).toMatchObject({ + status: "pushed", + branch: "feat/add-release-filters", + }); + + const next = applyDemoGitActionToStatus(current, input); + expect(next.local).toMatchObject({ + isDefaultRef: false, + refName: "feat/add-release-filters", + hasWorkingTreeChanges: false, + }); + expect(next.remote).toMatchObject({ + hasUpstream: true, + aheadCount: 0, + pr: { headRef: "feat/add-release-filters" }, + }); + }); + + it("keeps a feature-branch commit ahead until it is pushed", () => { + const input = { + actionId: "demo-feature-branch-commit", + cwd: "~/code/t3code", + action: "commit", + commitMessage: "Add release filters", + featureBranch: true, + } satisfies GitRunStackedActionInput; + const current = demoVcsStatusByCwd[input.cwd]; + if (current?._tag !== "snapshot") throw new Error("Missing default checkout VCS snapshot"); + + const next = applyDemoGitActionToStatus(current, input); + + expect(next.local).toMatchObject({ + isDefaultRef: false, + refName: "feat/add-release-filters", + hasWorkingTreeChanges: false, + }); + expect(next.remote).toMatchObject({ + hasUpstream: false, + aheadCount: 1, + aheadOfDefaultCount: 1, + }); + }); + + it("does not report the default branch as ahead of itself", () => { + const input = { + actionId: "demo-default-branch-commit", + cwd: "~/code/t3code", + action: "commit", + commitMessage: "Update release filters", + featureBranch: false, + } satisfies GitRunStackedActionInput; + const current = demoVcsStatusByCwd[input.cwd]; + if (current?._tag !== "snapshot") throw new Error("Missing default checkout VCS snapshot"); + + const next = applyDemoGitActionToStatus(current, input); + + expect(next.local).toMatchObject({ + isDefaultRef: true, + refName: "main", + }); + expect(next.remote).toMatchObject({ + aheadCount: 1, + aheadOfDefaultCount: 0, + }); + }); +}); diff --git a/apps/web/src/demo/server.ts b/apps/web/src/demo/server.ts new file mode 100644 index 00000000000..e69342b6ad9 --- /dev/null +++ b/apps/web/src/demo/server.ts @@ -0,0 +1,1187 @@ +/** + * In-browser demo backend for the marketing sidebar demo. + * + * Serves the real `WsRpcGroup` RPC contract over in-memory WebSocket pairs, + * so the unmodified web app (Sidebar V2 included) runs against fixture data + * with no real server. Command dispatches mutate the in-memory shell store and + * broadcast the same stream events a real server would. + * + * Multiple demo environments run side by side: the primary (same-origin) + * environment plus fake remote machines on made-up HTTPS origins, each with + * its own shell store and RPC server. The network interceptors route requests + * by origin, which is how the demo showcases T3 Connect-style remotes. + */ +import { + type AuthAccessStreamEvent, + type ClientOrchestrationCommand, + type DiscoveredLocalServerList, + type OrchestrationProjectShell, + type OrchestrationShellSnapshot, + type OrchestrationShellStreamItem, + type OrchestrationThreadDetailSnapshot, + type OrchestrationThreadShell, + type OrchestrationThreadStreamItem, + type ServerSettings, + type ServerSettingsPatch, + EnvironmentAuthorizationError, + ORCHESTRATION_WS_METHODS, + OrchestrationDispatchCommandError, + OrchestrationGetSnapshotError, + type GitActionProgressEvent, + type GitRunStackedActionInput, + type GitRunStackedActionResult, + type ServerConfigStreamEvent, + type ServerLifecycleStreamEvent, + type VcsStatusResult, + type VcsStatusStreamEvent, + WS_METHODS, + WsRpcGroup, +} from "@t3tools/contracts"; +import { PROJECT_FAVICON_FALLBACK_MARKER } from "@t3tools/shared/projectFavicon"; +import { applyServerSettingsPatch } from "@t3tools/shared/serverSettings"; +import * as Effect from "effect/Effect"; +import * as Layer from "effect/Layer"; +import * as Queue from "effect/Queue"; +import * as Schema from "effect/Schema"; +import * as Stream from "effect/Stream"; +import { Socket, SocketServer } from "effect/unstable/socket"; +import { RpcSerialization, RpcServer } from "effect/unstable/rpc"; + +import { + type DemoEnvironmentFixture, + demoAttachmentUrlById, + demoEnvironments, + DEMO_METRICS_WORKTREE_PATH, + demoProjectFaviconUrlByCwd, + demoReviewDiffPreview, + demoThreadDiff, + demoThreadDetails, + demoVcsStatusByCwd, + stagedDescriptor, + stagedServerConfig, +} from "./fixtures"; +import { onDemoStageChange } from "./stage"; + +// --------------------------------------------------------------------------- +// In-memory WebSocket pair +// --------------------------------------------------------------------------- + +type WsListener = (event: never) => void; + +class DemoSocketEndpoint { + static CONNECTING = 0 as const; + static OPEN = 1 as const; + static CLOSING = 2 as const; + static CLOSED = 3 as const; + + readonly CONNECTING = 0 as const; + readonly OPEN = 1 as const; + readonly CLOSING = 2 as const; + readonly CLOSED = 3 as const; + + readyState: number = DemoSocketEndpoint.CONNECTING; + binaryType = "arraybuffer"; + peer: DemoSocketEndpoint | null = null; + + private listeners = new Map>(); + private bufferedMessages: Array = []; + + addEventListener(type: string, listener: unknown, _options?: unknown): void { + let set = this.listeners.get(type); + if (!set) { + set = new Set(); + this.listeners.set(type, set); + } + set.add(listener as WsListener); + if (type === "message" && this.bufferedMessages.length > 0) { + const pending = this.bufferedMessages.splice(0); + queueMicrotask(() => { + for (const event of pending) { + this.dispatch("message", event); + } + }); + } + } + + removeEventListener(type: string, listener: unknown): void { + this.listeners.get(type)?.delete(listener as WsListener); + } + + dispatch(type: string, event: unknown): void { + const set = this.listeners.get(type); + if (!set || set.size === 0) { + if (type === "message") { + this.bufferedMessages.push(event); + } + return; + } + for (const listener of [...set]) { + (listener as (event: unknown) => void)(event); + } + } + + open(): void { + this.readyState = DemoSocketEndpoint.OPEN; + queueMicrotask(() => this.dispatch("open", { type: "open" })); + } + + send(data: unknown): void { + const peer = this.peer; + if (!peer || peer.readyState !== DemoSocketEndpoint.OPEN) { + return; + } + queueMicrotask(() => peer.dispatch("message", { type: "message", data })); + } + + close(code = 1000, reason = ""): void { + if (this.readyState === DemoSocketEndpoint.CLOSED) { + return; + } + this.readyState = DemoSocketEndpoint.CLOSED; + const peer = this.peer; + queueMicrotask(() => { + this.dispatch("close", { type: "close", code, reason, wasClean: true }); + if (peer && peer.readyState !== DemoSocketEndpoint.CLOSED) { + peer.close(code, reason); + } + }); + } +} + +interface DemoConnectionListener { + (serverEndpoint: DemoSocketEndpoint): void; +} + +class DemoConnectionAcceptor { + private pending: Array = []; + private listener: DemoConnectionListener | null = null; + + accept(listener: DemoConnectionListener): void { + this.listener = listener; + for (const endpoint of this.pending.splice(0)) { + listener(endpoint); + } + } + + connectClient(): DemoSocketEndpoint { + const client = new DemoSocketEndpoint(); + const server = new DemoSocketEndpoint(); + client.peer = server; + server.peer = client; + server.open(); + client.open(); + if (this.listener) { + this.listener(server); + } else { + this.pending.push(server); + } + return client; + } +} + +// --------------------------------------------------------------------------- +// In-memory shell store +// --------------------------------------------------------------------------- + +type ShellSubscriber = (item: OrchestrationShellStreamItem) => void; + +class DemoCommandInvariantError extends Schema.TaggedErrorClass()( + "DemoCommandInvariantError", + { + commandType: Schema.String, + projectId: Schema.String, + }, +) { + override get message(): string { + return `Project '${this.projectId}' is not empty and cannot be deleted without force=true.`; + } +} + +const isDemoCommandInvariantError = Schema.is(DemoCommandInvariantError); + +export class DemoShellStore { + private sequence: number; + private projects: Map; + private threads: Map; + private subscribers = new Set(); + + constructor(initial: OrchestrationShellSnapshot) { + this.sequence = initial.snapshotSequence; + this.projects = new Map(initial.projects.map((project) => [project.id, project])); + this.threads = new Map(initial.threads.map((thread) => [thread.id, thread])); + } + + snapshot(): OrchestrationShellSnapshot { + return { + snapshotSequence: this.sequence, + projects: [...this.projects.values()], + threads: [...this.threads.values()].filter((thread) => thread.archivedAt === null), + updatedAt: new Date().toISOString(), + }; + } + + archivedSnapshot(): OrchestrationShellSnapshot { + return { + snapshotSequence: this.sequence, + projects: [...this.projects.values()], + threads: [...this.threads.values()].filter((thread) => thread.archivedAt !== null), + updatedAt: new Date().toISOString(), + }; + } + + subscribe(subscriber: ShellSubscriber): () => void { + this.subscribers.add(subscriber); + return () => this.subscribers.delete(subscriber); + } + + thread(threadId: string): OrchestrationThreadShell | undefined { + return this.threads.get(threadId); + } + + private emit(item: OrchestrationShellStreamItem): void { + for (const subscriber of [...this.subscribers]) { + subscriber(item); + } + } + + upsertThread(thread: OrchestrationThreadShell): number { + this.sequence += 1; + this.threads.set(thread.id, thread); + this.emit({ kind: "thread-upserted", sequence: this.sequence, thread }); + return this.sequence; + } + + removeThread(threadId: OrchestrationThreadShell["id"]): number { + this.sequence += 1; + this.threads.delete(threadId); + this.emit({ kind: "thread-removed", sequence: this.sequence, threadId }); + return this.sequence; + } + + upsertProject(project: OrchestrationProjectShell): number { + this.sequence += 1; + this.projects.set(project.id, project); + this.emit({ kind: "project-upserted", sequence: this.sequence, project }); + return this.sequence; + } + + removeProject(projectId: OrchestrationProjectShell["id"]): number { + this.sequence += 1; + this.projects.delete(projectId); + this.emit({ kind: "project-removed", sequence: this.sequence, projectId }); + return this.sequence; + } + + dispatch(command: ClientOrchestrationCommand): number { + const nowIso = new Date().toISOString(); + switch (command.type) { + case "thread.create": { + return this.upsertThread({ + id: command.threadId, + projectId: command.projectId, + title: command.title, + modelSelection: command.modelSelection, + runtimeMode: command.runtimeMode, + interactionMode: command.interactionMode, + branch: command.branch, + worktreePath: command.worktreePath, + latestTurn: null, + createdAt: command.createdAt, + updatedAt: nowIso, + archivedAt: null, + session: null, + latestUserMessageAt: null, + hasPendingApprovals: false, + hasPendingUserInput: false, + hasActionableProposedPlan: false, + settledOverride: null, + settledAt: null, + }); + } + case "thread.archive": { + const thread = this.threads.get(command.threadId); + if (!thread) { + return this.sequence; + } + this.sequence += 1; + this.threads.set(thread.id, { ...thread, archivedAt: nowIso, updatedAt: nowIso }); + this.emit({ kind: "thread-removed", sequence: this.sequence, threadId: thread.id }); + return this.sequence; + } + case "thread.unarchive": { + const thread = this.threads.get(command.threadId); + if (!thread) { + return this.sequence; + } + return this.upsertThread({ ...thread, archivedAt: null, updatedAt: nowIso }); + } + case "thread.delete": { + return this.removeThread(command.threadId); + } + case "thread.settle": { + const thread = this.threads.get(command.threadId); + if (!thread) { + return this.sequence; + } + return this.upsertThread({ + ...thread, + settledOverride: "settled", + settledAt: nowIso, + updatedAt: nowIso, + }); + } + case "thread.unsettle": { + const thread = this.threads.get(command.threadId); + if (!thread) { + return this.sequence; + } + return this.upsertThread({ + ...thread, + settledOverride: "active", + settledAt: null, + updatedAt: nowIso, + }); + } + case "thread.snooze": { + const thread = this.threads.get(command.threadId); + if (!thread) { + return this.sequence; + } + return this.upsertThread({ + ...thread, + snoozedUntil: command.snoozedUntil, + snoozedAt: nowIso, + updatedAt: nowIso, + }); + } + case "thread.unsnooze": { + const thread = this.threads.get(command.threadId); + if (!thread) { + return this.sequence; + } + return this.upsertThread({ + ...thread, + snoozedUntil: null, + snoozedAt: null, + updatedAt: nowIso, + }); + } + case "thread.meta.update": { + const thread = this.threads.get(command.threadId); + if (!thread) { + return this.sequence; + } + const branch = + command.branch !== undefined && + command.expectedBranch !== undefined && + thread.branch !== command.expectedBranch + ? thread.branch + : command.branch; + return this.upsertThread({ + ...thread, + ...(command.title !== undefined ? { title: command.title } : {}), + ...(command.modelSelection !== undefined + ? { modelSelection: command.modelSelection } + : {}), + ...(branch !== undefined ? { branch } : {}), + ...(command.worktreePath !== undefined ? { worktreePath: command.worktreePath } : {}), + updatedAt: nowIso, + }); + } + case "thread.runtime-mode.set": { + const thread = this.threads.get(command.threadId); + if (!thread) { + return this.sequence; + } + return this.upsertThread({ + ...thread, + runtimeMode: command.runtimeMode, + updatedAt: nowIso, + }); + } + case "thread.interaction-mode.set": { + const thread = this.threads.get(command.threadId); + if (!thread) { + return this.sequence; + } + return this.upsertThread({ + ...thread, + interactionMode: command.interactionMode, + updatedAt: nowIso, + }); + } + case "project.create": { + return this.upsertProject({ + id: command.projectId, + title: command.title, + workspaceRoot: command.workspaceRoot, + defaultModelSelection: command.defaultModelSelection ?? null, + scripts: [], + createdAt: command.createdAt, + updatedAt: nowIso, + }); + } + case "project.meta.update": { + const project = this.projects.get(command.projectId); + if (!project) { + return this.sequence; + } + return this.upsertProject({ + ...project, + ...(command.title !== undefined ? { title: command.title } : {}), + ...(command.workspaceRoot !== undefined ? { workspaceRoot: command.workspaceRoot } : {}), + ...(command.defaultModelSelection !== undefined + ? { defaultModelSelection: command.defaultModelSelection } + : {}), + ...(command.scripts !== undefined ? { scripts: command.scripts } : {}), + updatedAt: nowIso, + }); + } + case "project.delete": { + if (command.force !== true) { + for (const thread of this.threads.values()) { + if (thread.projectId === command.projectId) { + throw new DemoCommandInvariantError({ + commandType: command.type, + projectId: command.projectId, + }); + } + } + } + for (const thread of [...this.threads.values()]) { + if (thread.projectId === command.projectId) { + this.removeThread(thread.id); + } + } + return this.removeProject(command.projectId); + } + default: { + return this.sequence; + } + } + } +} + +export function dispatchDemoCommand(store: DemoShellStore, command: ClientOrchestrationCommand) { + return Effect.try({ + try: () => ({ sequence: store.dispatch(command) }), + catch: (cause) => + new OrchestrationDispatchCommandError({ + message: isDemoCommandInvariantError(cause) + ? cause.message + : "Failed to dispatch demo orchestration command.", + cause, + }), + }); +} + +export class DemoSettingsStore { + constructor(private current: ServerSettings) {} + + snapshot(): ServerSettings { + return this.current; + } + + update(patch: ServerSettingsPatch): ServerSettings { + this.current = applyServerSettingsPatch(this.current, patch); + return this.current; + } +} + +// --------------------------------------------------------------------------- +// Per-environment backend +// --------------------------------------------------------------------------- + +interface DemoBackend { + readonly fixture: DemoEnvironmentFixture; + readonly store: DemoShellStore; + readonly settings: DemoSettingsStore; + readonly acceptor: DemoConnectionAcceptor; +} + +const demoBackends: ReadonlyArray = demoEnvironments.map((fixture) => ({ + fixture, + store: new DemoShellStore(fixture.shellSnapshot), + settings: new DemoSettingsStore(fixture.serverConfig.settings), + acceptor: new DemoConnectionAcceptor(), +})); + +function backendForOrigin(origin: string): DemoBackend | undefined { + return demoBackends.find( + (backend) => (backend.fixture.origin ?? window.location.origin) === origin, + ); +} + +// --------------------------------------------------------------------------- +// Global WebSocket + fetch interception +// --------------------------------------------------------------------------- + +export function installDemoNetworkInterceptors(): void { + // Effect reads this newer Headers API when decoding mocked responses. Keep + // the static demo working in browsers and capture runners that predate it. + const headersPrototype = Headers.prototype as unknown as { + getSetCookie?: () => Array; + }; + if (!headersPrototype.getSetCookie) { + headersPrototype.getSetCookie = () => []; + } + + const NativeWebSocket = globalThis.WebSocket; + const DemoWebSocket = function (this: unknown, url: string | URL, protocols?: unknown) { + const urlString = String(url); + try { + const parsed = new URL(urlString, window.location.origin); + if (parsed.pathname === "/ws" || parsed.pathname.endsWith("/ws")) { + const backend = backendForOrigin(parsed.origin.replace(/^ws(s?):/, "http$1:")); + if (backend) { + return backend.acceptor.connectClient() as unknown as WebSocket; + } + } + } catch { + // fall through to the native socket + } + return new NativeWebSocket(urlString, protocols as string | Array | undefined); + } as unknown as typeof WebSocket; + DemoWebSocket.prototype = NativeWebSocket.prototype; + Object.assign(DemoWebSocket, { + CONNECTING: NativeWebSocket.CONNECTING, + OPEN: NativeWebSocket.OPEN, + CLOSING: NativeWebSocket.CLOSING, + CLOSED: NativeWebSocket.CLOSED, + }); + globalThis.WebSocket = DemoWebSocket; + + const nativeFetch = globalThis.fetch.bind(globalThis); + globalThis.fetch = (input: RequestInfo | URL, init?: RequestInit) => { + const urlString = + typeof input === "string" ? input : input instanceof URL ? input.toString() : input.url; + const parsed = new URL(urlString, window.location.origin); + const backend = backendForOrigin(parsed.origin); + if (backend) { + const response = demoHttpResponse(backend, parsed); + if (response) { + return Promise.resolve(response); + } + if (backend.fixture.origin !== null) { + // Never let requests to a fake remote origin hit the real network. + return Promise.resolve(new Response(null, { status: 404 })); + } + } + return nativeFetch(input, init); + }; +} + +function demoHttpResponse(backend: DemoBackend, url: URL): Response | null { + const fixture = backend.fixture; + if (url.pathname === "/.well-known/t3/environment") { + return jsonResponse(stagedDescriptor(fixture)); + } + if (url.pathname === "/api/auth/session") { + return jsonResponse({ + authenticated: true, + auth: fixture.serverConfig.auth, + scopes: [ + "orchestration:read", + "orchestration:operate", + "terminal:operate", + "review:write", + "access:read", + "access:write", + ], + }); + } + if (url.pathname === "/api/auth/websocket-ticket") { + return jsonResponse({ + ticket: `demo-ticket-${fixture.environmentId}`, + expiresAt: new Date(Date.now() + 5 * 60_000).toISOString(), + }); + } + if (url.pathname === "/api/orchestration/shell") { + return jsonResponse(backend.store.snapshot()); + } + const threadMatch = url.pathname.match(/^\/api\/orchestration\/threads\/([^/]+)$/); + if (threadMatch) { + const thread = backend.store.thread(decodeURIComponent(threadMatch[1] ?? "")); + if (!thread) { + return new Response(null, { status: 404 }); + } + return jsonResponse(threadDetailSnapshot(thread)); + } + return null; +} + +function jsonResponse(body: unknown): Response { + return new Response(JSON.stringify(body), { + status: 200, + headers: { "content-type": "application/json" }, + }); +} + +// --------------------------------------------------------------------------- +// RPC handlers +// --------------------------------------------------------------------------- + +const unsupportedError = (method: string) => + new EnvironmentAuthorizationError({ + message: `RPC method not supported in the demo: ${method}`, + requiredScope: "orchestration:operate", + }); + +const unsupported = (method: string) => Effect.fail(unsupportedError(method)); + +function shellStream( + store: DemoShellStore, + options?: { readonly includeSnapshot?: boolean }, +): Stream.Stream { + return Stream.unwrap( + Effect.gen(function* () { + const queue = yield* Queue.unbounded(); + yield* Effect.acquireRelease( + Effect.sync(() => + store.subscribe((item) => { + Queue.offerUnsafe(queue, item); + }), + ), + (unsubscribe) => Effect.sync(unsubscribe), + ); + const live = Stream.fromQueue(queue); + if (options?.includeSnapshot !== true) { + return live; + } + const snapshotItem: OrchestrationShellStreamItem = { + kind: "snapshot", + snapshot: store.snapshot(), + }; + return Stream.concat(Stream.make(snapshotItem), live); + }), + ); +} + +function threadDetailSnapshot(thread: OrchestrationThreadShell): OrchestrationThreadDetailSnapshot { + const detail = demoThreadDetails[thread.id]; + return { + snapshotSequence: 1, + thread: { + id: thread.id, + projectId: thread.projectId, + title: thread.title, + modelSelection: thread.modelSelection, + runtimeMode: thread.runtimeMode, + interactionMode: thread.interactionMode, + branch: thread.branch, + worktreePath: thread.worktreePath, + latestTurn: thread.latestTurn, + createdAt: thread.createdAt, + updatedAt: thread.updatedAt, + archivedAt: thread.archivedAt, + deletedAt: null, + settledOverride: thread.settledOverride, + settledAt: thread.settledAt, + ...(thread.snoozedUntil !== undefined ? { snoozedUntil: thread.snoozedUntil } : {}), + ...(thread.snoozedAt !== undefined ? { snoozedAt: thread.snoozedAt } : {}), + messages: detail?.messages ?? [], + proposedPlans: [], + activities: detail?.activities ?? [], + checkpoints: detail?.checkpoints ?? [], + session: thread.session, + }, + }; +} + +const EMPTY_VCS_STATUS: DemoVcsSnapshot = { + _tag: "snapshot", + local: { + isRepo: true, + hasPrimaryRemote: false, + isDefaultRef: true, + refName: "main", + hasWorkingTreeChanges: false, + workingTree: { files: [], insertions: 0, deletions: 0 }, + }, + remote: null, +}; + +export type DemoVcsSnapshot = Extract; + +/** + * Per-checkout git status backing the real GitActionsControl. Statuses are + * mutable so the demo "Commit & push" button behaves like the real one: after + * an action the working tree becomes clean and subscribers are notified. + */ +class DemoVcsStore { + private statuses = new Map(); + private listeners = new Map void>>(); + + constructor() { + for (const [cwd, status] of Object.entries(demoVcsStatusByCwd)) { + if (status._tag === "snapshot") { + this.statuses.set(cwd, status); + } + } + } + + snapshot(cwd: string): DemoVcsSnapshot { + return this.statuses.get(cwd) ?? EMPTY_VCS_STATUS; + } + + combined(cwd: string): VcsStatusResult { + const snapshot = this.snapshot(cwd); + return { + ...snapshot.local, + hasUpstream: snapshot.remote?.hasUpstream ?? false, + aheadCount: snapshot.remote?.aheadCount ?? 0, + behindCount: snapshot.remote?.behindCount ?? 0, + ...(snapshot.remote?.aheadOfDefaultCount !== undefined + ? { aheadOfDefaultCount: snapshot.remote.aheadOfDefaultCount } + : {}), + pr: snapshot.remote?.pr ?? null, + }; + } + + subscribe(cwd: string, listener: (event: VcsStatusStreamEvent) => void): () => void { + let set = this.listeners.get(cwd); + if (!set) { + set = new Set(); + this.listeners.set(cwd, set); + } + set.add(listener); + return () => { + set.delete(listener); + }; + } + + update(cwd: string, next: DemoVcsSnapshot): void { + this.statuses.set(cwd, next); + for (const listener of this.listeners.get(cwd) ?? []) { + listener(next); + } + } +} + +const demoVcsStore = new DemoVcsStore(); + +const DEMO_COMMIT_SUBJECT_BY_CWD: Record = { + "~/code/t3code-worktrees/composer-attachments": + "Add drag-drop attachment overlay to the composer", + "~/code/t3code-worktrees/git-manager-test": "Deflake GitManager cross-repo PR metadata test", + [DEMO_METRICS_WORKTREE_PATH]: "Add release picker to crash dashboard", +}; + +const DEMO_COMMIT_SUBJECT_FALLBACK = "Checkpoint demo changes"; + +function demoCommitSubject(cwd: string): string { + return DEMO_COMMIT_SUBJECT_BY_CWD[cwd] ?? DEMO_COMMIT_SUBJECT_FALLBACK; +} + +function demoFeatureBranchName(input: GitRunStackedActionInput): string { + const subject = input.commitMessage?.split("\n")[0] ?? demoCommitSubject(input.cwd); + const slug = subject + .toLowerCase() + .replace(/[^a-z0-9]+/g, "-") + .replace(/^-+|-+$/g, "") + .slice(0, 48) + .replace(/-+$/g, ""); + return `feat/${slug || "demo-changes"}`; +} + +function demoGitActionPlan(status: DemoVcsSnapshot, input: GitRunStackedActionInput) { + const includesCommit = + input.action === "commit" || + input.action === "commit_push" || + input.action === "commit_push_pr"; + const includesBranch = input.featureBranch === true && includesCommit; + const includesPush = + input.action === "push" || + input.action === "commit_push" || + input.action === "commit_push_pr" || + (input.action === "create_pr" && + (status.remote?.hasUpstream !== true || (status.remote?.aheadCount ?? 0) > 0)); + const includesPr = input.action === "create_pr" || input.action === "commit_push_pr"; + return { includesBranch, includesCommit, includesPush, includesPr }; +} + +export function applyDemoGitActionToStatus( + current: DemoVcsSnapshot, + input: GitRunStackedActionInput, +): DemoVcsSnapshot { + const { includesBranch, includesCommit, includesPush, includesPr } = demoGitActionPlan( + current, + input, + ); + const refName = includesBranch ? demoFeatureBranchName(input) : (current.local.refName ?? "main"); + const subject = input.commitMessage?.split("\n")[0] ?? demoCommitSubject(input.cwd); + return { + _tag: "snapshot", + local: { + ...current.local, + ...(includesBranch ? { isDefaultRef: false, refName } : {}), + hasWorkingTreeChanges: includesCommit ? false : current.local.hasWorkingTreeChanges, + workingTree: includesCommit + ? { files: [], insertions: 0, deletions: 0 } + : current.local.workingTree, + }, + remote: { + hasUpstream: includesPush + ? true + : includesBranch + ? false + : (current.remote?.hasUpstream ?? false), + aheadCount: includesPush ? 0 : (current.remote?.aheadCount ?? 0) + (includesCommit ? 1 : 0), + behindCount: current.remote?.behindCount ?? 0, + aheadOfDefaultCount: + (current.remote?.aheadOfDefaultCount ?? 0) + + (includesCommit && (includesBranch || !current.local.isDefaultRef) ? 1 : 0), + pr: includesPr + ? { + number: 1338, + title: subject, + url: "https://github.com/pingdotgg/t3code/pull/1338", + baseRef: "main", + headRef: refName, + state: "open", + } + : (current.remote?.pr ?? null), + }, + }; +} + +function settleVcsAction(cwd: string, input: GitRunStackedActionInput): void { + demoVcsStore.update(cwd, applyDemoGitActionToStatus(demoVcsStore.snapshot(cwd), input)); +} + +export function demoGitActionEvents(input: GitRunStackedActionInput): GitActionProgressEvent[] { + const base = { actionId: input.actionId, cwd: input.cwd, action: input.action }; + const status = demoVcsStore.snapshot(input.cwd); + const { includesBranch, includesCommit, includesPush, includesPr } = demoGitActionPlan( + status, + input, + ); + const refName = includesBranch ? demoFeatureBranchName(input) : (status.local.refName ?? "main"); + const subject = input.commitMessage?.split("\n")[0] ?? demoCommitSubject(input.cwd); + + const phases: Array<"branch" | "commit" | "push" | "pr"> = [ + ...(includesBranch ? (["branch"] as const) : []), + ...(includesCommit ? (["commit"] as const) : []), + ...(includesPush ? (["push"] as const) : []), + ...(includesPr ? (["pr"] as const) : []), + ]; + + const result: GitRunStackedActionResult = { + action: input.action, + branch: includesBranch + ? { status: "created", name: refName } + : { status: "skipped_not_requested" }, + commit: includesCommit + ? { status: "created", commitSha: "9e84b71", subject } + : { status: "skipped_not_requested" }, + push: includesPush + ? { status: "pushed", branch: refName, upstreamBranch: `origin/${refName}` } + : { status: "skipped_not_requested" }, + pr: includesPr + ? { + status: "created", + url: "https://github.com/pingdotgg/t3code/pull/1338", + number: 1338, + baseBranch: "main", + headBranch: refName, + title: subject, + } + : { status: "skipped_not_requested" }, + toast: includesPr + ? { + title: "Created PR #1338", + description: subject, + cta: { + kind: "open_pr", + label: "Open pull request", + url: "https://github.com/pingdotgg/t3code/pull/1338", + }, + } + : includesPush + ? { + title: `Pushed${includesCommit ? " 9e84b71" : ""} to origin/${refName}`, + description: includesCommit ? subject : `${refName} → origin/${refName}`, + cta: { kind: "none" }, + } + : includesCommit + ? { + title: "Committed 9e84b71", + description: subject, + cta: { + kind: "run_action", + label: "Push", + action: { kind: "push" }, + }, + } + : { + title: "Done", + cta: { kind: "none" }, + }, + }; + + return [ + { ...base, kind: "action_started", phases }, + ...phases.map( + (phase): GitActionProgressEvent => ({ + ...base, + kind: "phase_started", + phase, + label: + phase === "branch" + ? "Preparing feature branch..." + : phase === "commit" + ? "Committing..." + : phase === "push" + ? `Pushing to origin/${refName}...` + : "Creating pull request...", + }), + ), + { ...base, kind: "action_finished", result }, + ]; +} + +const demoStartedAtIso = new Date().toISOString(); +const demoAssetsExpireAt = Date.now() + 24 * 60 * 60 * 1000; + +function makeHandlersLayer(backend: DemoBackend) { + const { fixture, settings, store } = backend; + const serverConfigSnapshot = (): ServerConfigStreamEvent => ({ + version: 1, + type: "snapshot", + config: stagedServerConfig(fixture), + }); + const lifecycleReady: ServerLifecycleStreamEvent = { + version: 1, + sequence: 1, + type: "ready", + payload: { at: demoStartedAtIso, environment: fixture.descriptor }, + }; + const authAccessSnapshot: AuthAccessStreamEvent = { + version: 1, + revision: 1, + type: "snapshot", + payload: { pairingLinks: [], clientSessions: [] }, + }; + const noLocalServers: DiscoveredLocalServerList = { + servers: [], + scannedAt: demoStartedAtIso, + }; + + return WsRpcGroup.toLayer( + Effect.sync(() => { + return { + [WS_METHODS.serverProbe]: () => Effect.succeed({}), + [WS_METHODS.serverGetConfig]: () => Effect.sync(() => stagedServerConfig(fixture)), + [WS_METHODS.serverGetSettings]: () => Effect.sync(() => settings.snapshot()), + [WS_METHODS.serverUpdateSettings]: ({ patch }) => Effect.sync(() => settings.update(patch)), + [WS_METHODS.serverRefreshProviders]: () => + Effect.succeed({ providers: fixture.serverConfig.providers }), + // Re-emits when the marketing page switches the previewed channel, so + // the app reacts to the version change live (stage art, branding). + [WS_METHODS.subscribeServerConfig]: () => + Stream.unwrap( + Effect.gen(function* () { + const queue = yield* Queue.unbounded(); + yield* Effect.acquireRelease( + Effect.sync(() => + onDemoStageChange(() => { + Queue.offerUnsafe(queue, serverConfigSnapshot()); + }), + ), + (unsubscribe) => Effect.sync(unsubscribe), + ); + return Stream.concat(Stream.make(serverConfigSnapshot()), Stream.fromQueue(queue)); + }), + ), + [WS_METHODS.subscribeServerLifecycle]: () => + Stream.concat(Stream.make(lifecycleReady), Stream.never), + [WS_METHODS.subscribeAuthAccess]: () => + Stream.concat(Stream.make(authAccessSnapshot), Stream.never), + [WS_METHODS.subscribeBackgroundPolicy]: () => Stream.never, + [WS_METHODS.subscribeResourceTelemetry]: () => Stream.never, + [WS_METHODS.subscribeDiscoveredLocalServers]: () => + Stream.concat(Stream.make(noLocalServers), Stream.never), + [WS_METHODS.subscribeTerminalEvents]: () => Stream.never, + [WS_METHODS.subscribeTerminalMetadata]: () => Stream.never, + [WS_METHODS.subscribePreviewEvents]: () => Stream.never, + [WS_METHODS.subscribeVcsStatus]: (input) => + Stream.unwrap( + Effect.gen(function* () { + const queue = yield* Queue.unbounded(); + yield* Effect.acquireRelease( + Effect.sync(() => + demoVcsStore.subscribe(input.cwd, (event) => { + Queue.offerUnsafe(queue, event); + }), + ), + (unsubscribe) => Effect.sync(unsubscribe), + ); + return Stream.concat( + Stream.make(demoVcsStore.snapshot(input.cwd) as VcsStatusStreamEvent), + Stream.fromQueue(queue), + ); + }), + ), + // The demo store is ephemeral and has no event replay. Always resync + // from a snapshot, including resume requests carrying afterSequence. + [ORCHESTRATION_WS_METHODS.subscribeShell]: () => + shellStream(store, { includeSnapshot: true }), + [ORCHESTRATION_WS_METHODS.subscribeThread]: (input) => + Stream.unwrap( + Effect.sync(() => { + const thread = store.thread(input.threadId); + if (!thread) { + return Stream.fail( + new OrchestrationGetSnapshotError({ message: "Thread not found" }), + ); + } + const snapshotItem: OrchestrationThreadStreamItem = { + kind: "snapshot", + snapshot: threadDetailSnapshot(thread), + }; + return Stream.concat(Stream.make(snapshotItem), Stream.never); + }), + ), + [ORCHESTRATION_WS_METHODS.dispatchCommand]: (command) => + dispatchDemoCommand(store, command), + [ORCHESTRATION_WS_METHODS.getArchivedShellSnapshot]: () => + Effect.sync(() => store.archivedSnapshot()), + [ORCHESTRATION_WS_METHODS.getTurnDiff]: (input) => + Effect.succeed(demoThreadDiff(input.threadId, input.fromTurnCount, input.toTurnCount)), + [ORCHESTRATION_WS_METHODS.getFullThreadDiff]: (input) => + Effect.succeed(demoThreadDiff(input.threadId, 0, input.toTurnCount)), + [WS_METHODS.serverUpdateProvider]: () => unsupported("serverUpdateProvider"), + [WS_METHODS.serverUpdateServer]: () => unsupported("serverUpdateServer"), + [WS_METHODS.serverUpsertKeybinding]: () => unsupported("serverUpsertKeybinding"), + [WS_METHODS.serverRemoveKeybinding]: () => unsupported("serverRemoveKeybinding"), + [WS_METHODS.serverDiscoverSourceControl]: () => unsupported("serverDiscoverSourceControl"), + [WS_METHODS.serverGetTraceDiagnostics]: () => unsupported("serverGetTraceDiagnostics"), + [WS_METHODS.serverGetProcessDiagnostics]: () => unsupported("serverGetProcessDiagnostics"), + [WS_METHODS.serverGetProcessResourceHistory]: () => + unsupported("serverGetProcessResourceHistory"), + [WS_METHODS.serverGetResourceTelemetryHistory]: () => + unsupported("serverGetResourceTelemetryHistory"), + [WS_METHODS.serverRetryResourceTelemetry]: () => + unsupported("serverRetryResourceTelemetry"), + [WS_METHODS.serverReportClientActivity]: () => Effect.void, + [WS_METHODS.serverReportHostPowerState]: () => Effect.void, + [WS_METHODS.serverGetBackgroundPolicy]: () => unsupported("serverGetBackgroundPolicy"), + [WS_METHODS.serverSignalProcess]: () => unsupported("serverSignalProcess"), + [WS_METHODS.cloudGetRelayClientStatus]: () => unsupported("cloudGetRelayClientStatus"), + [WS_METHODS.cloudInstallRelayClient]: () => + Stream.fail(unsupportedError("cloudInstallRelayClient")), + [WS_METHODS.sourceControlLookupRepository]: () => + unsupported("sourceControlLookupRepository"), + [WS_METHODS.sourceControlCloneRepository]: () => + unsupported("sourceControlCloneRepository"), + [WS_METHODS.sourceControlPublishRepository]: () => + unsupported("sourceControlPublishRepository"), + [WS_METHODS.projectsListEntries]: () => unsupported("projectsListEntries"), + [WS_METHODS.projectsReadFile]: () => unsupported("projectsReadFile"), + [WS_METHODS.projectsSearchEntries]: () => unsupported("projectsSearchEntries"), + [WS_METHODS.projectsWriteFile]: () => unsupported("projectsWriteFile"), + [WS_METHODS.shellOpenInEditor]: () => unsupported("shellOpenInEditor"), + [WS_METHODS.filesystemBrowse]: () => unsupported("filesystemBrowse"), + [WS_METHODS.assetsCreateUrl]: (input) => + Effect.sync(() => { + const expiresAt = demoAssetsExpireAt; + const resource = input.resource; + const relativeUrl = + resource._tag === "project-favicon" + ? (demoProjectFaviconUrlByCwd[resource.cwd] ?? + `/${PROJECT_FAVICON_FALLBACK_MARKER}`) + : resource._tag === "attachment" + ? demoAttachmentUrlById[resource.attachmentId] + : undefined; + return { relativeUrl: relativeUrl ?? `/${PROJECT_FAVICON_FALLBACK_MARKER}`, expiresAt }; + }), + [WS_METHODS.vcsPull]: () => unsupported("vcsPull"), + [WS_METHODS.vcsRefreshStatus]: (input) => + Effect.sync(() => demoVcsStore.combined(input.cwd)), + [WS_METHODS.gitRunStackedAction]: (input) => + Stream.fromIterable(demoGitActionEvents(input)).pipe( + Stream.mapEffect((event) => Effect.as(Effect.sleep("650 millis"), event)), + Stream.onEnd(Effect.sync(() => settleVcsAction(input.cwd, input))), + ), + [WS_METHODS.gitResolvePullRequest]: () => unsupported("gitResolvePullRequest"), + [WS_METHODS.gitPreparePullRequestThread]: () => unsupported("gitPreparePullRequestThread"), + [WS_METHODS.vcsListRefs]: () => + Effect.succeed({ + refs: [], + isRepo: true, + hasPrimaryRemote: false, + nextCursor: null, + totalCount: 0, + }), + [WS_METHODS.vcsCreateWorktree]: () => unsupported("vcsCreateWorktree"), + [WS_METHODS.vcsRemoveWorktree]: () => unsupported("vcsRemoveWorktree"), + [WS_METHODS.vcsCreateRef]: () => unsupported("vcsCreateRef"), + [WS_METHODS.vcsSwitchRef]: () => unsupported("vcsSwitchRef"), + [WS_METHODS.vcsInit]: () => unsupported("vcsInit"), + [WS_METHODS.reviewGetDiffPreview]: (input) => + Effect.succeed(demoReviewDiffPreview(input.cwd)), + [WS_METHODS.terminalOpen]: () => unsupported("terminalOpen"), + [WS_METHODS.terminalAttach]: () => Stream.fail(unsupportedError("terminalAttach")), + [WS_METHODS.terminalWrite]: () => unsupported("terminalWrite"), + [WS_METHODS.terminalResize]: () => unsupported("terminalResize"), + [WS_METHODS.terminalClear]: () => unsupported("terminalClear"), + [WS_METHODS.terminalRestart]: () => unsupported("terminalRestart"), + [WS_METHODS.terminalClose]: () => unsupported("terminalClose"), + [WS_METHODS.previewOpen]: () => unsupported("previewOpen"), + [WS_METHODS.previewNavigate]: () => unsupported("previewNavigate"), + [WS_METHODS.previewResize]: () => unsupported("previewResize"), + [WS_METHODS.previewRefresh]: () => unsupported("previewRefresh"), + [WS_METHODS.previewClose]: () => unsupported("previewClose"), + [WS_METHODS.previewList]: () => + Effect.succeed({ sessions: [], serverEpoch: "demo", revision: 0 }), + [WS_METHODS.previewReportStatus]: () => unsupported("previewReportStatus"), + [WS_METHODS.previewAutomationConnect]: () => + Stream.fail(unsupportedError("previewAutomationConnect")), + [WS_METHODS.previewAutomationRespond]: () => unsupported("previewAutomationRespond"), + [WS_METHODS.previewAutomationFocusHost]: () => unsupported("previewAutomationFocusHost"), + }; + }), + ); +} + +// --------------------------------------------------------------------------- +// SocketServer wiring +// --------------------------------------------------------------------------- + +function makeSocketServerLayer(backend: DemoBackend) { + return Layer.succeed( + SocketServer.SocketServer, + SocketServer.SocketServer.of({ + address: { _tag: "TcpAddress", hostname: backend.fixture.environmentId, port: 0 }, + run: (handler: (socket: Socket.Socket) => Effect.Effect<_, E, R>) => + Effect.gen(function* () { + const queue = yield* Queue.unbounded(); + backend.acceptor.accept((endpoint) => { + Queue.offerUnsafe(queue, endpoint); + }); + return yield* Queue.take(queue).pipe( + Effect.flatMap((endpoint) => + Socket.fromWebSocket( + Effect.succeed(endpoint as unknown as globalThis.WebSocket), + ).pipe(Effect.flatMap((socket) => Effect.forkChild(handler(socket)))), + ), + Effect.forever, + ); + }), + }), + ); +} + +export function startDemoServer(): void { + installDemoNetworkInterceptors(); + + for (const backend of demoBackends) { + const serverLayer = RpcServer.layer(WsRpcGroup, { disableTracing: true }).pipe( + Layer.provide(makeHandlersLayer(backend)), + Layer.provide(RpcServer.layerProtocolSocketServer), + Layer.provide(makeSocketServerLayer(backend)), + Layer.provide(RpcSerialization.layerJson), + ); + Effect.runFork(Layer.launch(serverLayer)); + } +} diff --git a/apps/web/src/demo/stage.ts b/apps/web/src/demo/stage.ts new file mode 100644 index 00000000000..fc689b6300f --- /dev/null +++ b/apps/web/src/demo/stage.ts @@ -0,0 +1,73 @@ +/** + * The marketing site embeds the demo with an optional `?stage=` query param so + * visitors can preview the per-channel builds (Latest / Nightly / Dev). The + * stage only changes the version string the mock server reports — the real + * branding + sidebar stage art logic reacts to it exactly like production. + * + * The embedding page can also switch the stage live (no iframe reload) by + * posting `{ type: "t3-demo-stage", stage }` to the demo window; the mock + * server re-emits its config stream so the app reacts like a real server + * version change. + */ +export type DemoStage = "latest" | "nightly" | "dev"; + +function isDemoStage(value: unknown): value is DemoStage { + return value === "latest" || value === "nightly" || value === "dev"; +} + +function initialDemoStage(): DemoStage { + if (typeof window === "undefined") return "latest"; + const stage = new URLSearchParams(window.location.search).get("stage"); + return isDemoStage(stage) ? stage : "latest"; +} + +let currentStage: DemoStage = initialDemoStage(); +const stageListeners = new Set<(stage: DemoStage) => void>(); + +export function resolveDemoStage(): DemoStage { + return currentStage; +} + +export function setDemoStage(stage: DemoStage): void { + if (stage === currentStage) return; + currentStage = stage; + for (const listener of stageListeners) listener(stage); +} + +export function onDemoStageChange(listener: (stage: DemoStage) => void): () => void { + stageListeners.add(listener); + return () => stageListeners.delete(listener); +} + +/** Lets the embedding marketing page switch the previewed channel live. */ +export function installDemoStageBridge(): void { + if (typeof window === "undefined") return; + window.addEventListener("message", (event: MessageEvent) => { + const data: unknown = event.data; + if (typeof data !== "object" || data === null) return; + if (!("type" in data) || data.type !== "t3-demo-stage") return; + if (!("stage" in data) || !isDemoStage(data.stage)) return; + if ( + "transitionDurationMs" in data && + typeof data.transitionDurationMs === "number" && + Number.isFinite(data.transitionDurationMs) + ) { + const durationMs = Math.min(2_000, Math.max(0, data.transitionDurationMs)); + document.documentElement.style.setProperty( + "--demo-stage-transition-duration", + `${durationMs}ms`, + ); + } + setDemoStage(data.stage); + }); +} + +export function demoServerVersionFor(baseVersion: string, stage: DemoStage): string { + if (stage === "nightly") return `${baseVersion}-nightly.20260701.1`; + if (stage === "dev") return `${baseVersion}-dev.1`; + return baseVersion; +} + +export function demoServerVersion(baseVersion: string): string { + return demoServerVersionFor(baseVersion, resolveDemoStage()); +} diff --git a/apps/web/src/demo/stageArt.tsx b/apps/web/src/demo/stageArt.tsx new file mode 100644 index 00000000000..57bb63b0c4b --- /dev/null +++ b/apps/web/src/demo/stageArt.tsx @@ -0,0 +1,25 @@ +import React from "react"; +import ReactDOM from "react-dom/client"; + +import "../index.css"; + +import { + StageBackdropArt, + type SidebarStageBackdropVariant, +} from "../components/SidebarStageBackdrop"; + +// Renders the app's real per-channel stage art (the sidebar backdrop) as a +// standalone page so the marketing site can decorate elements with it without +// duplicating the artwork. +function resolveVariant(): SidebarStageBackdropVariant { + const variant = new URLSearchParams(window.location.search).get("variant"); + return variant === "dev" ? "dev" : "nightly"; +} + +ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render( + +
+ +
+ , +); diff --git a/apps/web/src/index.css b/apps/web/src/index.css index 599455fa9b2..7da968e8a10 100644 --- a/apps/web/src/index.css +++ b/apps/web/src/index.css @@ -276,6 +276,23 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil --stage-fade: var(--sidebar-stage-fade, var(--app-chrome-background)); mask-image: linear-gradient(to bottom, black 0%, black 55%, transparent 92%); -webkit-mask-image: linear-gradient(to bottom, black 0%, black 55%, transparent 92%); + animation: sidebar-stage-backdrop-enter var(--demo-stage-transition-duration, 900ms) + cubic-bezier(0.22, 1, 0.36, 1) both; + } + + @keyframes sidebar-stage-backdrop-enter { + from { + opacity: 0; + } + to { + opacity: 1; + } + } + + @media (prefers-reduced-motion: reduce) { + .sidebar-stage-backdrop { + animation: none; + } } .sidebar-stage-backdrop::after { diff --git a/apps/web/src/routes/__root.tsx b/apps/web/src/routes/__root.tsx index 346991d114d..8c9617377b9 100644 --- a/apps/web/src/routes/__root.tsx +++ b/apps/web/src/routes/__root.tsx @@ -35,7 +35,6 @@ import { } from "../logicalProject"; import { useUiStateStore } from "../uiStateStore"; import { syncBrowserChromeTheme } from "../hooks/useTheme"; -import { configureClientTracing } from "../observability/clientTracing"; import { resolveInitialServerAuthGateState } from "../environments/primary"; import { hasHostedPairingRequest, isHostedStaticApp } from "../hostedPairing"; import { shellEnvironment } from "../state/shell"; @@ -270,7 +269,10 @@ function errorDetails(error: unknown): string { function AuthenticatedTracingBootstrap() { useEffect(() => { - void configureClientTracing(); + if (import.meta.env.VITE_T3CODE_DEMO === "true") return; + void import("../observability/clientTracing").then(({ configureClientTracing }) => + configureClientTracing(), + ); }, []); return null; diff --git a/apps/web/src/vite-env.d.ts b/apps/web/src/vite-env.d.ts index 31260c8ae66..1a4ad1bfb6b 100644 --- a/apps/web/src/vite-env.d.ts +++ b/apps/web/src/vite-env.d.ts @@ -7,6 +7,7 @@ interface ImportMetaEnv { readonly VITE_WS_URL: string; readonly VITE_HOSTED_APP_URL: string; readonly VITE_HOSTED_APP_CHANNEL: string; + readonly VITE_T3CODE_DEMO: string; readonly VITE_CLERK_PUBLISHABLE_KEY: string; readonly VITE_CLERK_JWT_TEMPLATE: string; readonly VITE_CLERK_CLI_OAUTH_CLIENT_ID: string; diff --git a/apps/web/stage-art.html b/apps/web/stage-art.html new file mode 100644 index 00000000000..307e394e4b2 --- /dev/null +++ b/apps/web/stage-art.html @@ -0,0 +1,28 @@ + + + + + + + + + T3 Code stage art + + +
+ + + diff --git a/apps/web/vite.demo.config.ts b/apps/web/vite.demo.config.ts new file mode 100644 index 00000000000..571b894c7b4 --- /dev/null +++ b/apps/web/vite.demo.config.ts @@ -0,0 +1,52 @@ +import tailwindcss from "@tailwindcss/vite"; +import react, { reactCompilerPreset } from "@vitejs/plugin-react"; +import babel from "@rolldown/plugin-babel"; +import { tanstackRouter } from "@tanstack/router-plugin/vite"; +import { defineConfig } from "vite-plus"; +import pkg from "./package.json" with { type: "json" }; + +// Builds the marketing sidebar demo: the real web app bundled against the +// in-browser demo backend (src/demo), emitted into the marketing site's +// public/ directory so it can be embedded as an iframe. +export default defineConfig(() => { + return { + plugins: [ + tanstackRouter(), + react(), + babel({ + parserOpts: { plugins: ["typescript", "jsx"] }, + presets: [reactCompilerPreset()], + }), + tailwindcss(), + ], + base: "/sidebar-demo/", + define: { + "import.meta.env.VITE_WS_URL": JSON.stringify(""), + "import.meta.env.VITE_T3CODE_RELAY_URL": JSON.stringify(""), + "import.meta.env.VITE_CLERK_PUBLISHABLE_KEY": JSON.stringify(""), + "import.meta.env.VITE_CLERK_JWT_TEMPLATE": JSON.stringify(""), + "import.meta.env.VITE_CLERK_CLI_OAUTH_CLIENT_ID": JSON.stringify(""), + "import.meta.env.VITE_RELAY_OTLP_TRACES_URL": JSON.stringify(""), + "import.meta.env.VITE_RELAY_OTLP_TRACES_DATASET": JSON.stringify(""), + "import.meta.env.VITE_RELAY_OTLP_TRACES_TOKEN": JSON.stringify(""), + "import.meta.env.VITE_HOSTED_APP_URL": JSON.stringify(""), + "import.meta.env.VITE_HOSTED_APP_CHANNEL": JSON.stringify(""), + "import.meta.env.VITE_T3CODE_DEMO": JSON.stringify("true"), + "import.meta.env.APP_VERSION": JSON.stringify(pkg.version), + }, + resolve: { + tsconfigPaths: true, + // The demo bundles workspace sources together, so they must all share the + // same Effect runtime and HttpApi endpoint representation. + dedupe: ["effect", "react", "react-dom"], + }, + build: { + outDir: "../marketing/public/sidebar-demo", + emptyOutDir: true, + sourcemap: false, + rollupOptions: { + input: ["demo.html", "stage-art.html"], + }, + }, + }; +}); diff --git a/docs/README.md b/docs/README.md index fe473094bbc..1ffc6d3e031 100644 --- a/docs/README.md +++ b/docs/README.md @@ -9,11 +9,11 @@ - User guides - [Background service](./user/background-service.md) - [Remote access](./user/remote-access.md) + - [Mobile app](./user/mobile-app.md) - [Keeping T3 Code in sync](./user/server-updates.md) - [Keybindings](./user/keybindings.md) - [T3 Connect](./cloud/t3-connect-clerk.md) - [Integrations](./integrations/source-control-providers.md) -- [Mobile](./mobile/app.md) - [Operations](./operations/ci.md) - [Providers](./providers/codex.md) - [Reference](./reference/encyclopedia.md) diff --git a/docs/user/mobile-app.md b/docs/user/mobile-app.md new file mode 100644 index 00000000000..29873a2898e --- /dev/null +++ b/docs/user/mobile-app.md @@ -0,0 +1,10 @@ +# Mobile app + +Use the native T3 Code app to connect to your environments, control coding agents, and follow agent +activity from a phone or tablet. + +- [Download for iPhone and iPad on the App Store](https://apps.apple.com/us/app/t3-code-remote-claude-more/id6787819824) +- [Get the Android app on Google Play](https://play.google.com/store/apps/details?id=com.t3tools.t3code&pli=1) + +The mobile app is a client: a T3 Code server must still be running on the machine that owns your +projects and agent sessions. For pairing and network setup, see [Remote Access](./remote-access.md). diff --git a/docs/user/remote-access.md b/docs/user/remote-access.md index d6ff00bee1f..dcc6f7693f0 100644 --- a/docs/user/remote-access.md +++ b/docs/user/remote-access.md @@ -2,6 +2,11 @@ Use this when you want to connect to a T3 Code server from another device such as a phone, tablet, or separate desktop app. +Install the native mobile client from the +[App Store](https://apps.apple.com/us/app/t3-code-remote-claude-more/id6787819824) for iPhone and +iPad, or from [Google Play](https://play.google.com/store/apps/details?id=com.t3tools.t3code&pli=1) +for Android phones and tablets. + ## Recommended Setup Use a trusted private network that meshes your devices together, such as a tailnet. diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c46d2c6a4dc..842d6bc6b56 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -187,6 +187,9 @@ importers: '@vercel/config': specifier: ^0.3.0 version: 0.3.0 + playwright-core: + specifier: 1.60.0 + version: 1.60.0 typescript: specifier: 'catalog:' version: 6.0.3