## Demo: request-id

### RequestId.svelte
```svelte
<script lang="ts">
  import DemoPage from '../../components/DemoPage.svelte';
  import Fetcher from './Fetcher.svelte';
  import { loadSources } from '../../components/utils.ts';
  import { files } from './files.ts';

  const sources = await loadSources(files);

  let { requestId }: { requestId: string } = $props();
</script>

<DemoPage
  title="Request ID"
  description="Every HTTP request carries a stable correlation id. Read it from any server-side code with getRequestContext().requestId — it's a Bun.randomUUIDv7() by default (time-ordered), can be seeded from an upstream proxy.requestIdHeader, and the same id rides every lifecycle event (request, error, action:*) so observability tooling can stitch a request together."
  {sources}
>
  <div class="card">
    <dl>
      <dt>This page render</dt>
      <dd><code>{requestId}</code></dd>
    </dl>
    <p class="hint">Reload the page to get a fresh id — each request re-runs the resolver.</p>

    <Fetcher mochi:hydrate />
  </div>
</DemoPage>

<style>
  .card {
    background: var(--surface);
    color: var(--text);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    padding: 1.5rem;
    max-width: 560px;
    margin: 0 auto;
  }

  dl {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: 1.25rem;
    row-gap: 0.75rem;
    margin: 0 0 1rem 0;
  }

  dt {
    font-weight: 600;
    color: var(--text-muted);
  }

  dd {
    margin: 0;
    word-break: break-all;
    color: var(--text);
  }

  code {
    font-family: var(--font-mono);
    background: var(--code-bg);
    color: var(--code-accent);
    padding: 0.2rem 0.45rem;
    border-radius: var(--radius-sm);
    font-size: 0.9em;
  }

  .hint {
    color: var(--text-subtle);
    font-size: 0.9rem;
    margin: 0 0 1.25rem 0;
  }
</style>
```

### Fetcher.svelte
```svelte
<script lang="ts">
  import { isBrowser } from 'mochi-framework';

  let fetched = $state('');
  let loading = $state(false);

  async function load() {
    if (!isBrowser) {
      return;
    }
    loading = true;
    try {
      const res = await fetch('/demos/request-id/api');
      fetched = ((await res.json()) as { requestId: string }).requestId;
    } finally {
      loading = false;
    }
  }
</script>

<div class="fetcher">
  <button onclick={load} disabled={loading}>
    {loading ? 'Fetching…' : 'Fetch /demos/request-id/api'}
  </button>

  {#if fetched}
    <div class="result">
      <code>{fetched}</code>
      <p class="hint">A different id — this fetch is a separate HTTP request, so it gets its own.</p>
    </div>
  {/if}
</div>

<style>
  .fetcher {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: flex-start;
  }

  button {
    padding: 0.55rem 0.9rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-muted);
    color: var(--text);
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
  }

  button:disabled {
    opacity: 0.6;
    cursor: default;
  }

  .result {
    width: 100%;
  }

  code {
    display: inline-block;
    font-family: var(--font-mono);
    background: var(--code-bg);
    color: var(--code-accent);
    padding: 0.2rem 0.45rem;
    border-radius: var(--radius-sm);
    font-size: 0.9em;
    word-break: break-all;
  }

  .hint {
    color: var(--text-subtle);
    font-size: 0.9rem;
    margin: 0.5rem 0 0 0;
  }
</style>
```

### routes.ts
```ts
import { Mochi, getRequestContext } from 'mochi-framework';
import type { MochiRouteValue } from 'mochi-framework';

export const routes: Record<string, MochiRouteValue> = {
  '/demos/request-id': Mochi.page('./src/demos/request-id/RequestId.svelte', {
    serverProps: () => ({ requestId: getRequestContext().requestId }),
  }),
  '/demos/request-id/api': Mochi.api(() => Response.json({ requestId: getRequestContext().requestId })),
};
```

### index.ts
```ts
import { Mochi, logger } from 'mochi-framework';
import { routes } from './routes';

await Mochi.serve({
  port: 3333,
  development: process.env.MODE === 'development',
  routes,
});

logger.info('Server running at http://localhost:3333');
```