diff --git a/README.md b/README.md
index 2f14d3b..fe34e98 100644
--- a/README.md
+++ b/README.md
@@ -2,6 +2,8 @@
 
 A dashboard for your Playwright tests - across projects and over time - with an embedded trace viewer.
 
+**[Live demo](https://demo.kinora.dev)** (read-only, no sign-up) · [Website](https://kinora.dev) · [Cloud](https://app.kinora.dev)
+
 Playwright ships a great HTML report for a single run. kinora sits one level up: push every CI run to a kinora server and get one place to track pass rates, spot trends, and surface flaky tests over time. Failing tests get a **View trace** button that opens the full Playwright trace (DOM / timeline / network / console) right in the dashboard, no separate tooling.
 
 <picture>
diff --git a/landing/src/components/CtaSection.astro b/landing/src/components/CtaSection.astro
index 14ba862..2384b6a 100644
--- a/landing/src/components/CtaSection.astro
+++ b/landing/src/components/CtaSection.astro
@@ -1,5 +1,5 @@
 ---
-import { ArrowRight } from '@lucide/astro'
+import { ArrowRight, Play } from '@lucide/astro'
 import { SITE } from '../lib/site'
 import GithubIcon from './GithubIcon.astro';
 ---
@@ -51,6 +51,16 @@ import GithubIcon from './GithubIcon.astro';
         Get started
         <ArrowRight class="size-4" aria-hidden="true" />
       </a>
+      <a
+        href={SITE.demo}
+        target="_blank"
+        rel="noopener noreferrer"
+        data-umami-event="live-demo-cta"
+        class="inline-flex h-11 items-center gap-2 rounded-md border border-border px-6 font-mono text-sm font-semibold transition-colors hover:bg-muted"
+      >
+        <Play class="size-4" aria-hidden="true" />
+        Live demo
+      </a>
       <a
         href={SITE.repo}
         target="_blank"
diff --git a/landing/src/components/HeroSection.astro b/landing/src/components/HeroSection.astro
index e4f2e6e..d7cae45 100644
--- a/landing/src/components/HeroSection.astro
+++ b/landing/src/components/HeroSection.astro
@@ -1,5 +1,5 @@
 ---
-import { ArrowRight } from '@lucide/astro'
+import { ArrowRight, Play } from '@lucide/astro'
 import overviewDark from '../assets/screenshots/overview-dark.png'
 import overviewLight from '../assets/screenshots/overview-light.png'
 import { SITE } from '../lib/site'
@@ -68,6 +68,16 @@ import Screenshot from './Screenshot.astro';
         Get started
         <ArrowRight class="size-4" aria-hidden="true" />
       </a>
+      <a
+        href={SITE.demo}
+        target="_blank"
+        rel="noopener noreferrer"
+        data-umami-event="live-demo-hero"
+        class="inline-flex h-11 items-center gap-2 rounded-md border border-border px-6 font-mono text-sm font-semibold transition-colors hover:bg-muted bg-background"
+      >
+        <Play class="size-4" aria-hidden="true" />
+        Live demo
+      </a>
       <a
         href={SITE.repo}
         target="_blank"
diff --git a/landing/src/components/SiteHeader.astro b/landing/src/components/SiteHeader.astro
index b3eff07..cf97cda 100644
--- a/landing/src/components/SiteHeader.astro
+++ b/landing/src/components/SiteHeader.astro
@@ -37,6 +37,15 @@ import Wordmark from './Wordmark.astro';
       >
         <GithubIcon class="size-4" />
       </a>
+      <a
+        href={SITE.demo}
+        target="_blank"
+        rel="noopener noreferrer"
+        data-umami-event="live-demo-header"
+        class="hidden h-9 items-center rounded-md px-3 text-sm text-muted-foreground transition-colors hover:bg-muted hover:text-foreground sm:inline-flex"
+      >
+        Demo
+      </a>
       <a
         href={SITE.login}
         data-umami-event="signin-header"
diff --git a/landing/src/lib/site.ts b/landing/src/lib/site.ts
index f7cac11..de397de 100644
--- a/landing/src/lib/site.ts
+++ b/landing/src/lib/site.ts
@@ -4,6 +4,7 @@ export const SITE = {
   app: 'https://app.kinora.dev',
   login: 'https://app.kinora.dev/login',
   signup: 'https://app.kinora.dev/signup',
+  demo: 'https://demo.kinora.dev',
   repo: 'https://github.com/Kinora-dev/kinora',
   selfhost: 'https://github.com/Kinora-dev/kinora/tree/main/selfhost',
   download: 'https://github.com/Kinora-dev/kinora/releases/latest',
diff --git a/packages/server/Dockerfile b/packages/server/Dockerfile
index 536a37e..50de734 100644
--- a/packages/server/Dockerfile
+++ b/packages/server/Dockerfile
@@ -20,6 +20,15 @@ ENV PORT=3000
 RUN addgroup --system --gid 1001 nodejs
 RUN adduser --system --uid 1001 kinora
 COPY --from=builder --chown=kinora:nodejs /prod /app
+# Demo seed (seed-market) uploads real trace.zip blobs; it resolves them at
+# ../../trace-viewer/public/fixtures relative to dist/scripts -> /app/trace-viewer/public/fixtures.
+COPY --chown=kinora:nodejs \
+  packages/trace-viewer/public/fixtures/error-trace.zip \
+  packages/trace-viewer/public/fixtures/demo.zip \
+  /app/trace-viewer/public/fixtures/
+# Pre-create STORAGE_DIR owned by kinora so a fresh named volume inherits uid 1001 (else
+# Docker inits the volume root-owned and the non-root process can't write artifacts).
+RUN mkdir -p /app/.data/artifacts && chown -R kinora:nodejs /app/.data
 USER kinora
 EXPOSE 3000
 
diff --git a/packages/server/scripts/reset-demo.ts b/packages/server/scripts/reset-demo.ts
new file mode 100644
index 0000000..2749fe0
--- /dev/null
+++ b/packages/server/scripts/reset-demo.ts
@@ -0,0 +1,46 @@
+import { execSync } from 'node:child_process'
+import { existsSync, readdirSync, rmSync } from 'node:fs'
+import path from 'node:path'
+import process from 'node:process'
+import { sql } from 'drizzle-orm'
+import { db } from '../src/db'
+import { demo, env, s3 } from '../src/lib/env'
+import { logger } from '../src/lib/logger'
+
+// Daily demo refresh (Dokploy schedule): wipe + reseed so the dataset is fresh and run dates
+// re-anchor to today. Truncates rather than drops so the live server keeps its connection.
+async function main(): Promise<void> {
+  if (!demo) {
+    logger.error('reset-demo refuses to run without KINORA_DEMO=true (never wipe a real deployment)')
+    process.exit(1)
+  }
+  if (s3)
+    logger.warn('reset-demo only clears local STORAGE_DIR; S3 blobs would orphan. Run the demo on FS storage.')
+
+  // Empty every data table (keep schema + knex migration bookkeeping), reset identities.
+  const result = await db.execute(sql`
+    SELECT tablename FROM pg_tables
+    WHERE schemaname = 'public' AND tablename NOT LIKE 'knex_migrations%'
+  `)
+  const tables = (result.rows as { tablename: string }[]).map(r => `"${r.tablename}"`)
+  if (tables.length)
+    await db.execute(sql.raw(`TRUNCATE ${tables.join(', ')} RESTART IDENTITY CASCADE`))
+
+  // Drop the now-orphaned trace blobs. Clear the dir's CONTENTS, not the dir itself: STORAGE_DIR
+  // is a mounted volume whose mountpoint is root-owned -> removing it would EACCES.
+  const artifactsDir = path.resolve(env.STORAGE_DIR)
+  if (existsSync(artifactsDir)) {
+    for (const entry of readdirSync(artifactsDir))
+      rmSync(path.join(artifactsDir, entry), { recursive: true, force: true })
+  }
+
+  // Reseed the marketing dataset (run dates are relative to now -> fresh every run).
+  execSync('node dist/scripts/seed-market.mjs --force', { stdio: 'inherit', env: process.env })
+}
+
+main()
+  .then(() => process.exit(0))
+  .catch((err) => {
+    logger.error(err)
+    process.exit(1)
+  })
diff --git a/packages/server/scripts/seed-market.ts b/packages/server/scripts/seed-market.ts
index 759aaf8..a650ad5 100644
--- a/packages/server/scripts/seed-market.ts
+++ b/packages/server/scripts/seed-market.ts
@@ -8,6 +8,7 @@ import { countsByTagFrom, makeTestKey } from '@kinora/core'
 import { eq } from 'drizzle-orm'
 import { db } from '../src/db'
 import { apikey, artifact, member, project, run, test, user as userTable } from '../src/db/schemas/index'
+import { DEMO_PASSWORD } from '../src/demo/owner'
 import { auth } from '../src/lib/auth'
 import { env } from '../src/lib/env'
 import { logger } from '../src/lib/logger'
@@ -16,7 +17,8 @@ import { storage } from '../src/lib/storage'
 // Curated, DETERMINISTIC marketing data: same output every reseed so screenshots
 // stay reproducible. Separate account from the dev demo seed (scripts/seed.ts).
 const EMAIL = 'market@kinora.dev'
-const PASSWORD = 'password123'
+// The demo auto-session signs in with this; shared so the two never drift apart.
+const PASSWORD = DEMO_PASSWORD
 const NAME = 'Kinora'
 
 const RUNS = 30
@@ -269,7 +271,7 @@ async function main(): Promise<void> {
   const passTrace = await readFile(PASS_TRACE)
 
   await db.delete(project).where(eq(project.organizationId, orgId))
-  const apiKey = await auth.api.createApiKey({ body: { name: 'market seed token', userId } })
+  const apiKey = await auth.api.createApiKey({ body: { name: 'ci-github-actions', userId } })
   await db.update(apikey).set({ referenceId: orgId }).where(eq(apikey.id, apiKey.id))
 
   for (const pdef of PROJECTS) {
diff --git a/packages/server/src/app.ts b/packages/server/src/app.ts
index fedfa83..988e889 100644
--- a/packages/server/src/app.ts
+++ b/packages/server/src/app.ts
@@ -7,9 +7,11 @@ import { bodyLimit } from 'hono/body-limit'
 import { cors } from 'hono/cors'
 import { secureHeaders } from 'hono/secure-headers'
 import { db } from './db'
+import { demoApp } from './demo/session'
 import { accessLog } from './lib/access-log'
 import { verifyArtifactSignature } from './lib/artifact-url'
 import { auth } from './lib/auth'
+import { blockAuthWritesInDemo, blockInDemo } from './lib/demo-guard'
 import { env } from './lib/env'
 import { logger } from './lib/logger'
 import { clientIp, rateLimit } from './lib/rate-limit'
@@ -50,6 +52,7 @@ app.get('/healthcheck', async (c) => {
   }
 })
 
+app.use('/api/auth/*', blockAuthWritesInDemo)
 app.on(['POST', 'GET'], '/api/auth/*', c => auth.handler(c.req.raw))
 
 app.use('/trpc/*', rateLimit({ windowMs: 60_000, limit: 300 }))
@@ -57,6 +60,8 @@ app.use('/trpc/*', trpcServer({ router: appRouter, createContext }))
 
 // Access log first in the chain so rate-limit (429) / body-limit (413) rejections are logged too.
 app.use('/api/v1/*', accessLog)
+// Read-only demo: reject all ingest writes (logged by accessLog above).
+app.use('/api/v1/*', blockInDemo)
 // Per-IP, before the body is read, so a flood is cheap to reject. Keyed by IP (not token) so
 // sharded CI spreads across runner IPs instead of summing into one bucket. Real throttle is
 // nginx limit_req (unspoofable IP); this is the backstop.
@@ -69,8 +74,13 @@ app.use('/api/v1/*', bodyLimit({
 app.route('/api/v1', publicApi)
 
 app.use('/api/slack/*', accessLog)
+// Read-only demo: the Slack OAuth callback writes the integration (bypassing tRPC), so block it here.
+app.use('/api/slack/*', blockInDemo)
 app.route('/api/slack', slackOAuth)
 
+// Demo-only: establishes the shared read-only session cookie (no-op otherwise).
+app.route('/api/demo', demoApp)
+
 app.onError((err, c) => {
   logger.error({ err }, 'unhandled request error')
   Sentry.captureException(err)
diff --git a/packages/server/src/demo/owner.ts b/packages/server/src/demo/owner.ts
new file mode 100644
index 0000000..57d23e1
--- /dev/null
+++ b/packages/server/src/demo/owner.ts
@@ -0,0 +1,19 @@
+import { asc, eq } from 'drizzle-orm'
+import { db } from '../db'
+import { member, user as userTable } from '../db/schemas/index'
+
+// Seed-market sets this on the demo account; the auto-session signs in with it. Keep in sync there.
+export const DEMO_PASSWORD = 'password123'
+
+// The seeded primary account = earliest org owner. Looked up per-request (not cached) so the
+// daily reseed's new ids are picked up without a restart.
+export async function resolveDemoOwner() {
+  const [owner] = await db
+    .select({ user: userTable, organizationId: member.organizationId })
+    .from(member)
+    .innerJoin(userTable, eq(member.userId, userTable.id))
+    .where(eq(member.role, 'owner'))
+    .orderBy(asc(userTable.createdAt))
+    .limit(1)
+  return owner ?? null
+}
diff --git a/packages/server/src/demo/session.ts b/packages/server/src/demo/session.ts
new file mode 100644
index 0000000..64fccac
--- /dev/null
+++ b/packages/server/src/demo/session.ts
@@ -0,0 +1,22 @@
+import { Hono } from 'hono'
+import { auth } from '../lib/auth'
+import { demo } from '../lib/env'
+import { DEMO_PASSWORD, resolveDemoOwner } from './owner'
+
+export const demoApp = new Hono()
+
+// Sign the seeded demo account in here so the browser gets a real (read-only) session cookie:
+// better-auth client calls (org, members, role) need it; the tRPC fallback alone wouldn't cover them.
+demoApp.get('/session', async (c) => {
+  if (!demo)
+    return c.body(null, 204)
+
+  const owner = await resolveDemoOwner()
+  if (!owner)
+    return c.body(null, 204)
+
+  const res = await auth.api.signInEmail({ body: { email: owner.user.email, password: DEMO_PASSWORD }, asResponse: true })
+  for (const cookie of res.headers.getSetCookie())
+    c.header('set-cookie', cookie, { append: true })
+  return c.body(null, 204)
+})
diff --git a/packages/server/src/index.ts b/packages/server/src/index.ts
index 53cc35e..acf084d 100644
--- a/packages/server/src/index.ts
+++ b/packages/server/src/index.ts
@@ -4,7 +4,7 @@ import { serve } from '@hono/node-server'
 import process from 'node:process'
 import { app } from './app'
 import { db } from './db'
-import { env } from './lib/env'
+import { demo, env } from './lib/env'
 import { logger } from './lib/logger'
 
 // Log stray rejections instead of letting one crash the whole server; uncaught exceptions leave the
@@ -16,7 +16,7 @@ process.on('uncaughtException', (err) => {
 })
 
 const server = serve({ fetch: app.fetch, port: env.PORT }, (info) => {
-  logger.info(`kinora server running on port ${info.port}`)
+  logger.info(`${demo ? '[DEMO] ' : ''}kinora server running on port ${info.port}`)
 })
 
 let shuttingDown = false
diff --git a/packages/server/src/lib/auth.ts b/packages/server/src/lib/auth.ts
index 34d7cc7..2cbb081 100644
--- a/packages/server/src/lib/auth.ts
+++ b/packages/server/src/lib/auth.ts
@@ -8,7 +8,7 @@ import { polarAuthPlugin, polarClient } from '../billing/polar'
 import { db } from '../db'
 import { member, organization as organizationTable } from '../db/schemas/index'
 import { purgeUserOwnedData } from './account'
-import { env } from './env'
+import { demo, env } from './env'
 import { logger } from './logger'
 import { mailerEnabled, sendMail } from './mailer'
 import { getTrustedOrigins } from './utils'
@@ -124,9 +124,11 @@ export const auth = betterAuth({
       },
     },
   },
-  advanced: env.COOKIE_DOMAIN
-    ? { crossSubDomainCookies: { enabled: true, domain: env.COOKIE_DOMAIN } }
-    : {},
+  advanced: {
+    ...(env.COOKIE_DOMAIN ? { crossSubDomainCookies: { enabled: true, domain: env.COOKIE_DOMAIN } } : {}),
+    // Demo runs on a *.kinora.dev subdomain next to prod; a distinct cookie name stops prod's
+    ...(demo ? { cookiePrefix: 'kinora-demo' } : {}),
+  },
   secret: env.AUTH_SECRET,
   plugins: [
     // Plugin default is 10 req/day per key, which any real CI exceeds, billing quotas already cap ingest volume.
diff --git a/packages/server/src/lib/demo-guard.ts b/packages/server/src/lib/demo-guard.ts
new file mode 100644
index 0000000..9686d76
--- /dev/null
+++ b/packages/server/src/lib/demo-guard.ts
@@ -0,0 +1,16 @@
+import { createMiddleware } from 'hono/factory'
+import { demo } from './env'
+
+// Read-only demo: block the public ingest API entirely (the dashboard uses tRPC, gated separately).
+export const blockInDemo = createMiddleware(async (c, next) => {
+  if (demo)
+    return c.json({ error: 'This is a read-only demo' }, 403)
+  return next()
+})
+
+// Block auth writes (sign-up/password/delete) but keep reads; the demo auto-sessions so no login is needed.
+export const blockAuthWritesInDemo = createMiddleware(async (c, next) => {
+  if (demo && c.req.method === 'POST')
+    return c.json({ error: 'This is a read-only demo' }, 403)
+  return next()
+})
diff --git a/packages/server/src/lib/env.ts b/packages/server/src/lib/env.ts
index 5c8cb17..2117b06 100644
--- a/packages/server/src/lib/env.ts
+++ b/packages/server/src/lib/env.ts
@@ -20,6 +20,8 @@ const envSchema = z.object({
   GITHUB_CLIENT_ID: z.string(),
   GITHUB_CLIENT_SECRET: z.string(),
   KINORA_CLOUD: z.stringbool().default(false),
+  // Public demo instance: auto-session as the seeded demo user + read-only (no mutations/ingest/auth writes).
+  KINORA_DEMO: z.stringbool().default(false),
   POLAR_ACCESS_TOKEN: z.string().optional(),
   POLAR_WEBHOOK_SECRET: z.string().optional(),
   POLAR_PRODUCT_TEAM_ID: z.string().optional(),
@@ -79,6 +81,8 @@ function resolveCloud(): CloudConfig | null {
 
 export const cloud = resolveCloud()
 
+export const demo = env.KINORA_DEMO
+
 export interface S3Config {
   endpoint: string
   region: string
diff --git a/packages/server/src/router/config.ts b/packages/server/src/router/config.ts
index 48a0708..f5b17dc 100644
--- a/packages/server/src/router/config.ts
+++ b/packages/server/src/router/config.ts
@@ -1,4 +1,4 @@
-import { slackApp } from '../lib/env'
+import { demo, slackApp } from '../lib/env'
 import { mailerEnabled } from '../lib/mailer'
 import { publicProcedure, router } from '../trpc/index'
 
@@ -9,5 +9,7 @@ export const configRouter = router({
     mailerEnabled,
     // Slack OAuth app present? front shows "Add to Slack" vs manual webhook paste.
     slackOauthEnabled: slackApp !== null,
+    // Public read-only demo? front shows a banner + hides mutation UI.
+    demo,
   })),
 })
diff --git a/packages/server/src/trpc/context.ts b/packages/server/src/trpc/context.ts
index 8cc070f..fe30603 100644
--- a/packages/server/src/trpc/context.ts
+++ b/packages/server/src/trpc/context.ts
@@ -1,8 +1,11 @@
 import type { FetchCreateContextFnOptions } from '@trpc/server/adapters/fetch'
+import type { AuthType } from '../lib/auth'
 import { and, eq } from 'drizzle-orm'
 import { db } from '../db'
 import { member } from '../db/schemas/index'
+import { resolveDemoOwner } from '../demo/owner'
 import { auth } from '../lib/auth'
+import { demo } from '../lib/env'
 
 export async function createContext({ req }: FetchCreateContextFnOptions) {
   const session = await auth.api.getSession({ headers: req.headers })
@@ -18,6 +21,13 @@ export async function createContext({ req }: FetchCreateContextFnOptions) {
     organizationId = owned?.organizationId ?? null
   }
 
+  if (!user && demo) {
+    const d = await resolveDemoOwner()
+    // db row is structurally the session user; cast to the auth user type for ctx consistency.
+    if (d)
+      return { user: d.user as unknown as AuthType['user'], organizationId: d.organizationId, req }
+  }
+
   return { user, organizationId, req }
 }
 
diff --git a/packages/server/src/trpc/index.ts b/packages/server/src/trpc/index.ts
index 295803d..a3af550 100644
--- a/packages/server/src/trpc/index.ts
+++ b/packages/server/src/trpc/index.ts
@@ -4,11 +4,15 @@ import { initTRPC, TRPCError } from '@trpc/server'
 import { and, eq } from 'drizzle-orm'
 import { db } from '../db'
 import { member } from '../db/schemas/index'
+import { demo } from '../lib/env'
 import { logger } from '../lib/logger'
 
 export const t = initTRPC.context<Context>().create()
 
 const loggedProcedure = t.procedure.use(async (opts) => {
+  // Public demo is browse-only: reject every mutation (one gate for all routers).
+  if (demo && opts.type === 'mutation')
+    throw new TRPCError({ code: 'FORBIDDEN', message: 'This is a read-only demo' })
   const start = Date.now()
   const result = await opts.next()
   const ms = Date.now() - start
diff --git a/packages/server/test/demo.test.ts b/packages/server/test/demo.test.ts
new file mode 100644
index 0000000..92157db
--- /dev/null
+++ b/packages/server/test/demo.test.ts
@@ -0,0 +1,66 @@
+import type { FetchCreateContextFnOptions } from '@trpc/server/adapters/fetch'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+// `demo` is a module const read from env. setupFiles already loaded the real graph (demo=false),
+// so flip the flag AND reset the module registry, then re-import so the graph re-evaluates with it.
+vi.mock('../src/lib/env', async importOriginal => ({ ...(await importOriginal()), demo: true }))
+vi.resetModules()
+
+const { app } = await import('../src/app')
+const { createContext } = await import('../src/trpc/context')
+const { caller, createUser, ownedOrgId, resetDb } = await import('./helpers')
+
+beforeEach(resetDb)
+
+function ctxReq(): FetchCreateContextFnOptions {
+  return { req: new Request('http://test') } as FetchCreateContextFnOptions
+}
+
+describe('demo mode', () => {
+  it('config.get reports demo: true', async () => {
+    const u = await createUser()
+    expect((await (await caller(u)).config.get()).demo).toBe(true)
+  })
+
+  it('auto-sessions as the seeded primary owner without a cookie', async () => {
+    const u = await createUser()
+    const orgId = await ownedOrgId(u.id)
+
+    const ctx = await createContext(ctxReq())
+    expect(ctx.user?.id).toBe(u.id)
+    expect(ctx.organizationId).toBe(orgId)
+  })
+
+  it('rejects tRPC mutations (read-only)', async () => {
+    const u = await createUser()
+    await expect((await caller(u)).project.rename({ projectId: 'web-app', name: 'x' })).rejects.toThrow(/read-only demo/i)
+  })
+
+  it('still allows tRPC queries', async () => {
+    const u = await createUser()
+    await expect((await caller(u)).dashboard.manifest()).resolves.toBeTruthy()
+  })
+
+  it('blocks the public ingest API', async () => {
+    const res = await app.request('/api/v1/runs', { method: 'POST', headers: { Authorization: 'Bearer x' } })
+    expect(res.status).toBe(403)
+  })
+
+  it('blocks auth writes (sign-up)', async () => {
+    const res = await app.request('/api/auth/sign-up/email', { method: 'POST', headers: { 'content-type': 'application/json' }, body: '{}' })
+    expect(res.status).toBe(403)
+  })
+
+  it('blocks the Slack OAuth flow (its callback writes outside tRPC)', async () => {
+    const res = await app.request('/api/slack/install?projectId=web-app')
+    expect(res.status).toBe(403)
+  })
+
+  it('/api/demo/session signs in the seeded owner and sets a cookie', async () => {
+    await createUser() // seeded with the demo password
+
+    const res = await app.request('/api/demo/session')
+    expect(res.status).toBe(204)
+    expect(res.headers.get('set-cookie')).toBeTruthy()
+  })
+})
diff --git a/packages/server/test/test-env.ts b/packages/server/test/test-env.ts
index a9799ef..058e112 100644
--- a/packages/server/test/test-env.ts
+++ b/packages/server/test/test-env.ts
@@ -19,6 +19,7 @@ export const TEST_ENV: Record<keyof Env, string> = {
   GITHUB_CLIENT_ID: 'test',
   GITHUB_CLIENT_SECRET: 'test',
   KINORA_CLOUD: 'false',
+  KINORA_DEMO: 'false',
   INGEST_RATE_LIMIT: '600',
   POLAR_ACCESS_TOKEN: '',
   POLAR_WEBHOOK_SECRET: '',
diff --git a/packages/server/tsdown.config.ts b/packages/server/tsdown.config.ts
index afff9f1..723a49f 100644
--- a/packages/server/tsdown.config.ts
+++ b/packages/server/tsdown.config.ts
@@ -1,7 +1,7 @@
 import { defineConfig } from 'tsdown'
 
 export default defineConfig({
-  entry: ['src/index.ts', 'scripts/migrate.ts', 'scripts/purge-expired-runs.ts', 'migrations/*.ts'],
+  entry: ['src/index.ts', 'scripts/migrate.ts', 'scripts/purge-expired-runs.ts', 'scripts/reset-demo.ts', 'scripts/seed-market.ts', 'migrations/*.ts'],
   platform: 'node',
   format: 'esm',
   // Source maps so Sentry stack traces map back to TS (run with node --enable-source-maps).
diff --git a/packages/web/Dockerfile b/packages/web/Dockerfile
index 60c4625..2adb487 100644
--- a/packages/web/Dockerfile
+++ b/packages/web/Dockerfile
@@ -31,7 +31,10 @@ RUN --mount=type=secret,id=sentry_auth_token \
 RUN pnpm --filter @kinora/trace-viewer build
 
 FROM nginx:1.27-alpine AS runtime
-COPY packages/web/nginx.conf /etc/nginx/conf.d/default.conf
+# Default = cloud (static-only, API is a separate origin). Single-origin demo/self-host passes
+# NGINX_CONF=selfhost/nginx.conf to bake the reverse-proxy config instead.
+ARG NGINX_CONF=packages/web/nginx.conf
+COPY ${NGINX_CONF} /etc/nginx/conf.d/default.conf
 COPY --from=build /repo/packages/web/dist /usr/share/nginx/html
 COPY --from=build /repo/packages/trace-viewer/dist /usr/share/nginx/html/trace
 EXPOSE 80
diff --git a/packages/web/src/App.vue b/packages/web/src/App.vue
index a684596..ccd5376 100644
--- a/packages/web/src/App.vue
+++ b/packages/web/src/App.vue
@@ -1,14 +1,21 @@
 <script setup lang="ts">
 import { Toaster } from '@kinora/ui/sonner'
+import { useTitle } from '@vueuse/core'
+import { computed } from 'vue'
 import { RouterView } from 'vue-router'
 import AppHeader from '@/components/app/AppHeader.vue'
+import DemoBanner from '@/components/app/DemoBanner.vue'
 import LoadingScreen from '@/components/app/LoadingScreen.vue'
+import { useDemo } from '@/composables/queries'
 import { session } from '@/lib/session'
 // Boot useColorMode at startup so system/dark applies before any page mounts
 import '@kinora/ui/theme'
 import 'vue-sonner/style.css'
 
 const ready = session.ready
+
+const isDemo = useDemo()
+useTitle(computed(() => (isDemo.value ? 'kinora · demo' : 'kinora')))
 </script>
 
 <template>
@@ -24,6 +31,7 @@ const ready = session.ready
         </Transition>
         <!-- App pages get the header + control-room grid shell. -->
         <div v-else class="min-h-svh bg-background app-grid">
+          <DemoBanner />
           <AppHeader />
           <main class="mx-auto max-w-7xl px-5 py-8">
             <!-- Settings tabs share one layout: collapse their key so switching tabs swaps
diff --git a/packages/web/src/components/app/DemoBanner.vue b/packages/web/src/components/app/DemoBanner.vue
new file mode 100644
index 0000000..8b88105
--- /dev/null
+++ b/packages/web/src/components/app/DemoBanner.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { ArrowUpRight } from 'lucide-vue-next'
+import { useDemo } from '@/composables/queries'
+
+const isDemo = useDemo()
+// Demo writes are blocked server-side; send conversions to the real app's signup.
+const signupUrl = 'https://app.kinora.dev/signup'
+</script>
+
+<template>
+  <div v-if="isDemo" class=" bg-background">
+    <div class="border-b border-signal/25 bg-signal/10">
+      <div class="mx-auto flex max-w-7xl items-center gap-2.5 px-5 py-2 font-mono text-xs">
+        <span class="size-1.5 shrink-0 rounded-full bg-signal" aria-hidden="true" />
+        <span class="font-semibold text-foreground">Read-only demo</span>
+        <span class="hidden text-muted-foreground sm:inline">explore freely, changes are disabled.</span>
+        <a
+          :href="signupUrl"
+          class="ml-auto inline-flex shrink-0 items-center gap-1 text-signal underline-offset-4 hover:underline"
+        >
+          Create your workspace
+          <ArrowUpRight class="size-3.5" />
+        </a>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/packages/web/src/components/app/TeamCard.vue b/packages/web/src/components/app/TeamCard.vue
index 05b6fdf..b40cc7e 100644
--- a/packages/web/src/components/app/TeamCard.vue
+++ b/packages/web/src/components/app/TeamCard.vue
@@ -7,6 +7,7 @@ import { SegmentedControl } from '@kinora/ui/segmented-control'
 import { Check, Copy, Mail, ShieldCheck, Trash2, UserPlus } from 'lucide-vue-next'
 import { computed, ref } from 'vue'
 import { z } from 'zod'
+import { useDemo } from '@/composables/queries'
 import { useOrg } from '@/composables/useOrg'
 import { session } from '@/lib/session'
 
@@ -18,6 +19,7 @@ const ROLES = [
 ] as const
 
 const { members, invitations, loading, inviting, myRole, isAdmin, invite, removeMember, updateRole, cancelInvitation } = useOrg()
+const isDemo = useDemo()
 
 const myUserId = computed(() => session.user.value?.id)
 
@@ -93,6 +95,7 @@ function initialOf(m: { user?: { name?: string | null, email?: string | null } }
                 variant="ghost"
                 size="sm"
                 class="font-mono text-[11px] text-muted-foreground"
+                :disabled="isDemo"
                 @click="updateRole(m.id, m.role === 'admin' ? 'member' : 'admin')"
               >
                 {{ m.role === 'admin' ? 'Make member' : 'Make admin' }}
@@ -105,6 +108,7 @@ function initialOf(m: { user?: { name?: string | null, email?: string | null } }
                     size="icon"
                     class="size-8 text-muted-foreground hover:text-fail"
                     aria-label="Remove member"
+                    :disabled="isDemo"
                   >
                     <Trash2 class="size-4" />
                   </Button>
@@ -152,7 +156,7 @@ function initialOf(m: { user?: { name?: string | null, email?: string | null } }
                 :options="ROLES"
                 @update:model-value="(v) => inviteRole = v as 'member' | 'admin'"
               />
-              <Button type="button" size="sm" class="font-mono text-xs" :disabled="inviting || !emailValid" @click="onInvite">
+              <Button type="button" size="sm" class="font-mono text-xs" :disabled="inviting || !emailValid || isDemo" @click="onInvite">
                 <UserPlus class="size-3.5" />
                 {{ inviting ? 'Inviting…' : 'Invite' }}
               </Button>
@@ -170,7 +174,7 @@ function initialOf(m: { user?: { name?: string | null, email?: string | null } }
                 <Mail class="size-4 shrink-0 text-muted-foreground" />
                 <span class="min-w-0 flex-1 truncate text-sm">{{ inv.email }}</span>
                 <span class="font-mono text-[11px] tracking-wider text-muted-foreground uppercase">{{ inv.role }}</span>
-                <Button type="button" variant="ghost" size="sm" class="font-mono text-[11px] text-muted-foreground hover:text-fail" @click="cancelInvitation(inv.id)">
+                <Button type="button" variant="ghost" size="sm" class="font-mono text-[11px] text-muted-foreground hover:text-fail" :disabled="isDemo" @click="cancelInvitation(inv.id)">
                   Cancel
                 </Button>
               </li>
diff --git a/packages/web/src/components/project/AlertChannelsCard.vue b/packages/web/src/components/project/AlertChannelsCard.vue
index 54becde..ff0e358 100644
--- a/packages/web/src/components/project/AlertChannelsCard.vue
+++ b/packages/web/src/components/project/AlertChannelsCard.vue
@@ -6,11 +6,13 @@ import { SegmentedControl } from '@kinora/ui/segmented-control'
 import { ArrowUpRight, Mail, Send, Trash2, Webhook } from 'lucide-vue-next'
 import { computed, ref } from 'vue'
 import { z } from 'zod'
+import { useDemo } from '@/composables/queries'
 import { useAlertChannels } from '@/composables/useAlertChannels'
 import { useBilling } from '@/composables/useBilling'
 
 const props = defineProps<{ projectId: string }>()
 
+const isDemo = useDemo()
 const labelClass = 'font-mono text-[11px] tracking-wider text-muted-foreground uppercase'
 
 const POLICIES = [
@@ -56,7 +58,7 @@ async function onAdd(): Promise<void> {
         <p class="text-sm text-muted-foreground">
           Email &amp; webhook alerts are a Team feature.
         </p>
-        <Button type="button" size="sm" class="font-mono text-xs" :disabled="!!billingPending" @click="checkout('team')">
+        <Button type="button" size="sm" class="font-mono text-xs" :disabled="!!billingPending || isDemo" @click="checkout('team')">
           <ArrowUpRight class="size-3.5" />
           {{ billingPending === 'team' ? 'Redirecting…' : 'Upgrade to Team' }}
         </Button>
@@ -76,11 +78,11 @@ async function onAdd(): Promise<void> {
                 <span class="truncate font-mono text-xs">{{ ch.target }}</span>
               </div>
               <div class="flex shrink-0 gap-1">
-                <Button type="button" variant="ghost" size="sm" class="font-mono text-xs" :disabled="testingId === ch.id" @click="test(ch.id)">
+                <Button type="button" variant="ghost" size="sm" class="font-mono text-xs" :disabled="testingId === ch.id || isDemo" @click="test(ch.id)">
                   <Send class="size-3.5" />
                   {{ testingId === ch.id ? 'Sending…' : 'Test' }}
                 </Button>
-                <Button type="button" variant="ghost" size="sm" class="text-muted-foreground hover:text-fail" aria-label="Remove channel" @click="remove(ch.id)">
+                <Button type="button" variant="ghost" size="sm" class="text-muted-foreground hover:text-fail" aria-label="Remove channel" :disabled="isDemo" @click="remove(ch.id)">
                   <Trash2 class="size-3.5" />
                 </Button>
               </div>
@@ -97,6 +99,7 @@ async function onAdd(): Promise<void> {
                 size="sm"
                 class="gap-2 font-mono text-xs"
                 :class="ch.enabled ? 'border-signal/60 text-signal hover:text-signal' : 'text-muted-foreground'"
+                :disabled="isDemo"
                 @click="update(ch.id, { policy: ch.policy, enabled: !ch.enabled })"
               >
                 <span class="size-1.5 rounded-full" :class="ch.enabled ? 'bg-signal' : 'bg-muted-foreground'" aria-hidden="true" />
@@ -125,7 +128,7 @@ async function onAdd(): Promise<void> {
             :options="POLICIES"
             @update:model-value="(v) => addPolicy = v as typeof POLICIES[number]['value']"
           />
-          <Button type="submit" size="sm" class="w-fit font-mono text-xs" :disabled="adding || !targetValid">
+          <Button type="submit" size="sm" class="w-fit font-mono text-xs" :disabled="adding || !targetValid || isDemo">
             {{ adding ? 'Adding…' : 'Add channel' }}
           </Button>
         </form>
diff --git a/packages/web/src/components/project/SlackAlertsCard.vue b/packages/web/src/components/project/SlackAlertsCard.vue
index d20edc9..b1cb436 100644
--- a/packages/web/src/components/project/SlackAlertsCard.vue
+++ b/packages/web/src/components/project/SlackAlertsCard.vue
@@ -6,7 +6,7 @@ import { SegmentedControl } from '@kinora/ui/segmented-control'
 import { ArrowUpRight, Send } from 'lucide-vue-next'
 import { computed, ref, watch } from 'vue'
 import Icon from '@/components/Icon.vue'
-import { useServerConfig } from '@/composables/queries'
+import { useDemo, useServerConfig } from '@/composables/queries'
 import { useAlerts } from '@/composables/useAlerts'
 import { useBilling } from '@/composables/useBilling'
 import { env } from '@/lib/env'
@@ -26,6 +26,7 @@ const { config, saving, testing, save, updateSettings, disconnect, sendTest } =
 
 const { state: serverConfig } = useServerConfig()
 const oauthEnabled = computed(() => serverConfig.value?.slackOauthEnabled ?? false)
+const isDemo = useDemo()
 
 const webhookUrl = ref('')
 const policy = ref<typeof POLICIES[number]['value']>('on-failure')
@@ -65,7 +66,7 @@ function onSave(): void {
         <p class="text-sm text-muted-foreground">
           Slack alerts are a Team feature.
         </p>
-        <Button type="button" size="sm" class="font-mono text-xs" :disabled="!!billingPending" @click="checkout('team')">
+        <Button type="button" size="sm" class="font-mono text-xs" :disabled="!!billingPending || isDemo" @click="checkout('team')">
           <ArrowUpRight class="size-3.5" />
           {{ billingPending === 'team' ? 'Redirecting…' : 'Upgrade to Team' }}
         </Button>
@@ -74,8 +75,8 @@ function onSave(): void {
       <div v-else-if="billing" class="flex flex-col gap-5">
         <!-- Connection source: OAuth button, OAuth connected header, or manual webhook input. -->
         <template v-if="oauthEnabled">
-          <a v-if="!connected" :href="installUrl" class="w-fit">
-            <Button type="button" size="sm" class="gap-2 font-mono text-xs">
+          <a v-if="!connected" :href="isDemo ? undefined : installUrl" class="w-fit" :class="{ 'pointer-events-none': isDemo }">
+            <Button type="button" size="sm" :disabled="isDemo" class="gap-2 font-mono text-xs">
               <Icon name="slack" class="size-3.5" />
               Connect Slack
             </Button>
@@ -87,7 +88,7 @@ function onSave(): void {
                 {{ config?.channel ?? 'Connected' }}<template v-if="config?.teamName"> · {{ config.teamName }}</template>
               </span>
             </div>
-            <Button type="button" variant="ghost" size="sm" class="font-mono text-xs text-muted-foreground" @click="disconnect">
+            <Button type="button" variant="ghost" size="sm" class="font-mono text-xs text-muted-foreground" :disabled="isDemo" @click="disconnect">
               Disconnect
             </Button>
           </div>
@@ -122,10 +123,10 @@ function onSave(): void {
           </Button>
 
           <div class="flex gap-2">
-            <Button type="button" size="sm" class="font-mono text-xs" :disabled="saving || !canSave" @click="onSave">
+            <Button type="button" size="sm" class="font-mono text-xs" :disabled="saving || !canSave || isDemo" @click="onSave">
               {{ saving ? 'Saving…' : 'Save' }}
             </Button>
-            <Button type="button" variant="outline" size="sm" class="font-mono text-xs" :disabled="testing || !config" @click="sendTest">
+            <Button type="button" variant="outline" size="sm" class="font-mono text-xs" :disabled="testing || !config || isDemo" @click="sendTest">
               <Send class="size-3.5" />
               {{ testing ? 'Sending…' : 'Send test' }}
             </Button>
diff --git a/packages/web/src/composables/queries.ts b/packages/web/src/composables/queries.ts
index 8cd7fdc..63b1760 100644
--- a/packages/web/src/composables/queries.ts
+++ b/packages/web/src/composables/queries.ts
@@ -1,9 +1,22 @@
 import { useAsyncState } from '@vueuse/core'
+import { computed } from 'vue'
 import { trpc } from '@/lib/trpc'
 
-export function useServerConfig() {
+// App-level server capabilities (SMTP, Slack OAuth, demo). Static per deployment, so fetch once + share.
+let serverConfig: ReturnType<typeof loadServerConfig> | undefined
+function loadServerConfig() {
   return useAsyncState(() => trpc.config.get.query(), null, { immediate: true })
 }
+export function useServerConfig() {
+  serverConfig ??= loadServerConfig()
+  return serverConfig
+}
+
+// Read-only public demo: drives the banner + disables mutation controls.
+export function useDemo() {
+  const { state } = useServerConfig()
+  return computed(() => state.value?.demo ?? false)
+}
 
 export function useManifest() {
   return useAsyncState(() => trpc.dashboard.manifest.query(), null, { immediate: true })
diff --git a/packages/web/src/lib/session.ts b/packages/web/src/lib/session.ts
index 33eecfb..6fe595c 100644
--- a/packages/web/src/lib/session.ts
+++ b/packages/web/src/lib/session.ts
@@ -1,4 +1,5 @@
 import { ref, shallowRef } from 'vue'
+import { env } from '@/lib/env'
 import { trpc } from '@/lib/trpc'
 
 export type SessionUser = Awaited<ReturnType<typeof trpc.user.me.query>>
@@ -10,6 +11,8 @@ let booting: Promise<void> | undefined
 async function ensure(): Promise<void> {
   if (!booting) {
     booting = (async () => {
+      // Demo deployments hand the browser a shared read-only session cookie here (no-op elsewhere).
+      await fetch(`${env.serverUrl}/api/demo/session`, { credentials: 'include' }).catch(() => {})
       try {
         user.value = await trpc.user.me.query()
       }
diff --git a/packages/web/src/pages/AccountSettingsPage.vue b/packages/web/src/pages/AccountSettingsPage.vue
index 71086e2..02abca4 100644
--- a/packages/web/src/pages/AccountSettingsPage.vue
+++ b/packages/web/src/pages/AccountSettingsPage.vue
@@ -15,7 +15,7 @@ import { computed, onUnmounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { toast } from 'vue-sonner'
 import { z } from 'zod'
-import { useServerConfig } from '@/composables/queries'
+import { useDemo, useServerConfig } from '@/composables/queries'
 import { authClient } from '@/lib/auth'
 import { session } from '@/lib/session'
 
@@ -56,6 +56,7 @@ async function updateEmail(): Promise<void> {
 
 const { state: serverConfig } = useServerConfig()
 const mailerEnabled = computed(() => serverConfig.value?.mailerEnabled ?? false)
+const isDemo = useDemo()
 const emailVerified = computed(() => session.user.value?.emailVerified ?? false)
 const resending = ref(false)
 
@@ -189,7 +190,7 @@ async function deleteAccount(): Promise<void> {
               {{ emailError }}
             </p>
           </div>
-          <Button type="submit" :disabled="emailSaving || !canSaveEmail" size="sm" class="self-start font-mono text-xs">
+          <Button type="submit" :disabled="emailSaving || !canSaveEmail || isDemo" size="sm" class="self-start font-mono text-xs">
             {{ emailSaving ? 'Saving…' : 'Update email' }}
           </Button>
         </form>
@@ -202,7 +203,7 @@ async function deleteAccount(): Promise<void> {
             type="button"
             variant="outline"
             size="sm"
-            :disabled="resending || cooldown > 0"
+            :disabled="resending || cooldown > 0 || isDemo"
             class="self-start font-mono text-xs"
             @click="resendVerification"
           >
@@ -253,7 +254,7 @@ async function deleteAccount(): Promise<void> {
               <FormMessage />
             </FormItem>
           </FormField>
-          <Button type="submit" :disabled="pwSubmitting || !pwMeta.valid" size="sm" class="self-start font-mono text-xs">
+          <Button type="submit" :disabled="pwSubmitting || !pwMeta.valid || isDemo" size="sm" class="self-start font-mono text-xs">
             {{ pwSubmitting ? 'Saving…' : 'Change password' }}
           </Button>
         </form>
@@ -271,7 +272,7 @@ async function deleteAccount(): Promise<void> {
       <CardContent>
         <AlertDialog>
           <AlertDialogTrigger as-child>
-            <Button type="button" variant="destructive" size="sm" class="w-fit font-mono text-xs">
+            <Button type="button" variant="destructive" size="sm" :disabled="isDemo" class="w-fit font-mono text-xs">
               Delete account
             </Button>
           </AlertDialogTrigger>
@@ -298,7 +299,7 @@ async function deleteAccount(): Promise<void> {
               <AlertDialogCancel>Cancel</AlertDialogCancel>
               <AlertDialogAction
                 class="bg-destructive text-white hover:bg-destructive/90"
-                :disabled="!canDelete || deleting"
+                :disabled="!canDelete || deleting || isDemo"
                 @click="deleteAccount"
               >
                 {{ deleting ? 'Deleting…' : 'Delete account' }}
diff --git a/packages/web/src/pages/ProjectSettingsPage.vue b/packages/web/src/pages/ProjectSettingsPage.vue
index f10cb35..a6ce168 100644
--- a/packages/web/src/pages/ProjectSettingsPage.vue
+++ b/packages/web/src/pages/ProjectSettingsPage.vue
@@ -9,12 +9,13 @@ import { RouterLink, useRoute, useRouter } from 'vue-router'
 import { toast } from 'vue-sonner'
 import AlertChannelsCard from '@/components/project/AlertChannelsCard.vue'
 import SlackAlertsCard from '@/components/project/SlackAlertsCard.vue'
-import { useManifest } from '@/composables/queries'
+import { useDemo, useManifest } from '@/composables/queries'
 import { useOrg } from '@/composables/useOrg'
 import { useProjectAdmin } from '@/composables/useProjectAdmin'
 
 const props = defineProps<{ projectId: string }>()
 
+const isDemo = useDemo()
 const { isAdmin } = useOrg()
 
 const router = useRouter()
@@ -101,7 +102,7 @@ async function onDelete(): Promise<void> {
             <label :class="labelClass" for="project-description">Description</label>
             <Input id="project-description" v-model="description" placeholder="What this suite covers" />
           </div>
-          <Button type="submit" size="sm" class="w-fit font-mono text-xs" :disabled="savingGeneral || !name.trim()">
+          <Button type="submit" size="sm" class="w-fit font-mono text-xs" :disabled="savingGeneral || !name.trim() || isDemo">
             {{ savingGeneral ? 'Saving…' : 'Save' }}
           </Button>
         </form>
@@ -122,7 +123,7 @@ async function onDelete(): Promise<void> {
       <CardContent>
         <AlertDialog>
           <AlertDialogTrigger as-child>
-            <Button type="button" variant="destructive" size="sm" class="w-fit font-mono text-xs">
+            <Button type="button" variant="destructive" size="sm" class="w-fit font-mono text-xs" :disabled="isDemo">
               Delete project
             </Button>
           </AlertDialogTrigger>
@@ -143,7 +144,7 @@ async function onDelete(): Promise<void> {
               <AlertDialogCancel>Cancel</AlertDialogCancel>
               <AlertDialogAction
                 class="bg-destructive text-white hover:bg-destructive/90"
-                :disabled="!canDelete || deleting"
+                :disabled="!canDelete || deleting || isDemo"
                 @click="onDelete"
               >
                 {{ deleting ? 'Deleting…' : 'Delete' }}
diff --git a/packages/web/src/pages/WorkspaceSettingsPage.vue b/packages/web/src/pages/WorkspaceSettingsPage.vue
index 7ff2cc8..fccb7c4 100644
--- a/packages/web/src/pages/WorkspaceSettingsPage.vue
+++ b/packages/web/src/pages/WorkspaceSettingsPage.vue
@@ -7,12 +7,14 @@ import { computed, onMounted, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { toast } from 'vue-sonner'
 import TeamCard from '@/components/app/TeamCard.vue'
+import { useDemo } from '@/composables/queries'
 import { useApiTokens } from '@/composables/useApiTokens'
 import { useBilling } from '@/composables/useBilling'
 import { useOrg } from '@/composables/useOrg'
 
 const labelClass = 'font-mono text-[11px] tracking-wider text-muted-foreground uppercase'
 
+const isDemo = useDemo()
 const { org, isOwner, isAdmin, rename, renaming } = useOrg()
 const orgName = computed(() => org.value?.name ?? 'Workspace')
 
@@ -160,7 +162,7 @@ function fmtDate(d: Date | string | null | undefined): string {
             <label :class="labelClass" for="ws-name">Name</label>
             <Input id="ws-name" v-model="nameInput" @keydown.enter.prevent="onRename" />
           </div>
-          <Button type="button" size="sm" class="font-mono text-xs" :disabled="renaming || !canRename" @click="onRename">
+          <Button type="button" size="sm" class="font-mono text-xs" :disabled="renaming || !canRename || isDemo" @click="onRename">
             {{ renaming ? 'Saving…' : 'Rename' }}
           </Button>
         </div>
@@ -182,7 +184,7 @@ function fmtDate(d: Date | string | null | undefined): string {
               <span v-if="planNote" class="font-mono text-[11px]" :class="planNote.tone">{{ planNote.text }}</span>
             </div>
           </div>
-          <Button v-if="isPaid && isOwner" type="button" variant="outline" size="sm" class="font-mono text-xs" :disabled="!!billingPending" @click="openPortal">
+          <Button v-if="isPaid && isOwner" type="button" variant="outline" size="sm" class="font-mono text-xs" :disabled="!!billingPending || isDemo" @click="openPortal">
             <CreditCard class="size-3.5" />
             {{ billingPending === 'portal' ? 'Opening…' : 'Manage' }}
           </Button>
@@ -218,7 +220,7 @@ function fmtDate(d: Date | string | null | undefined): string {
             size="sm"
             :variant="opt.featured ? 'default' : 'outline'"
             class="font-mono text-xs"
-            :disabled="!!billingPending"
+            :disabled="!!billingPending || isDemo"
             @click="checkout(opt.slug)"
           >
             <ArrowUpRight class="size-3.5" />
@@ -329,7 +331,7 @@ function fmtDate(d: Date | string | null | undefined): string {
             </label>
             <Input id="token-name" v-model="newTokenName" placeholder="ci-github-actions" @keydown.enter.prevent="createToken" />
           </div>
-          <Button type="button" :disabled="creating || !newTokenName.trim()" size="sm" class="font-mono text-xs" @click="createToken">
+          <Button type="button" :disabled="creating || !newTokenName.trim() || isDemo" size="sm" class="font-mono text-xs" @click="createToken">
             <Plus class="size-3.5" />
             {{ creating ? 'Creating…' : 'Create' }}
           </Button>
@@ -363,6 +365,7 @@ function fmtDate(d: Date | string | null | undefined): string {
               size="icon"
               class="size-8 shrink-0 text-muted-foreground hover:text-fail"
               aria-label="Delete token"
+              :disabled="isDemo"
               @click="deleteToken(token.id)"
             >
               <Trash2 class="size-4" />