## Demo: cron

### Cron.svelte
```svelte
<script>
  import DemoPage from '../../components/DemoPage.svelte';
  import CronLog from './CronLog.svelte';
  import { loadSources } from '../../components/utils.ts';
  import { files } from './files.ts';

  const sources = await loadSources(files);
</script>

<DemoPage
  title="Scheduled jobs with cron"
  description="A Mochi.cron() job appends one entry to an in-memory log every minute. The browser subscribes over a WebSocket and shows each new row the moment it lands."
  {sources}
>
  <CronLog mochi:hydrate />
</DemoPage>
```

### CronLog.svelte
```svelte
<script lang="ts">
  import type { CronLogEntry, CronLogMessage } from './types';

  let status = $state('connecting');
  let entries = $state<CronLogEntry[]>([]);

  const skeletons = $derived([...Array(Math.max(0, 5 - entries.length)).keys()]);

  $effect(() => {
    const host = window.location.host;
    const wsProtocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
    const ws = new WebSocket(`${wsProtocol}//${host}/ws/cron-log`);

    ws.addEventListener('open', () => (status = 'connected'));
    ws.addEventListener('close', () => (status = 'disconnected'));
    ws.addEventListener('message', (e) => {
      const msg = JSON.parse(e.data) as CronLogMessage;
      if (msg.type === 'snapshot') {
        entries = msg.entries;
      } else {
        entries = [msg.entry, ...entries].slice(0, 100);
      }
    });

    const close = () => ws.close();
    window.addEventListener('pagehide', close);

    return () => {
      window.removeEventListener('pagehide', close);
      close();
    };
  });

  const fmtTime = (ms: number): string => new Date(ms).toLocaleTimeString('en-GB');
</script>

<div class="cron">
  <div class="bar">
    <span class="status" class:connected={status === 'connected'}>{status}</span>
  </div>

  <ul class="log">
    {#each entries as entry (entry.seq)}
      <li class="row">
        <span class="seq">#{entry.seq}</span>
        <span class="time">{fmtTime(entry.at)}</span>
        <span class="label">demo-activity-log ran</span>
      </li>
    {/each}
    {#each skeletons as i (i)}
      <li class="row skeleton" aria-hidden="true">
        <span class="sk sk-seq"></span>
        <span class="sk sk-time"></span>
        <span class="sk sk-label"></span>
      </li>
    {/each}
  </ul>
</div>

<style>
  .cron {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  .bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
  }

  .status {
    font-size: 0.7rem;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: var(--badge-danger-bg);
    color: var(--badge-danger-text);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
  }

  .status.connected {
    background: var(--badge-success-bg);
    color: var(--badge-success-text);
  }

  .log {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow-y: auto;
    max-height: 13.75rem;
  }

  .row {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    height: 2.75rem;
    box-sizing: border-box;
    padding: 0 0.9rem;
    border-bottom: 1px solid var(--border);
    background: var(--surface-muted);
  }

  .row:last-child {
    border-bottom: none;
  }

  .sk {
    height: 0.7rem;
    border-radius: 4px;
    background: var(--border);
    animation: skeleton-pulse 1.5s ease-in-out infinite;
  }

  .sk-seq {
    width: 2rem;
  }

  .sk-time {
    width: 4rem;
  }

  .sk-label {
    width: 45%;
  }

  @keyframes skeleton-pulse {
    0%,
    100% {
      opacity: 0.35;
    }
    50% {
      opacity: 0.7;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .sk {
      animation: none;
    }
  }

  .seq {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--text-subtle);
    min-width: 3rem;
  }

  .time {
    font-family: var(--font-mono);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text);
    font-variant-numeric: tabular-nums;
  }

  .label {
    font-size: 0.85rem;
    color: var(--text-muted);
  }
</style>
```

### cron.server.ts
```ts
import { Mochi } from 'mochi-framework';
import type { CronLogEntry } from './types';

const MAX_ENTRIES = 100;

// The cron appends one entry per minute forever; trimming to the last MAX_ENTRIES keeps the in-memory log bounded.
const log: CronLogEntry[] = [];
let seq = 0;

type WsClient = { send: (data: string) => void };
const clients = new Set<WsClient>();

function broadcast(message: string): void {
  for (const ws of clients) {
    ws.send(message);
  }
}

// The site rides the default `cronStorage: 'memory'`, so the demo writes no file into the working dir; set
// `Mochi.serve({ cronStorage })` to make the schedule durable across restarts and multiple nodes.
export const activityLog = Mochi.cron('demo-activity-log', '* * * * *', (run) => {
  const entry: CronLogEntry = { seq: ++seq, at: Date.now(), scheduledTime: run.scheduledTime };
  log.push(entry);
  if (log.length > MAX_ENTRIES) {
    log.splice(0, log.length - MAX_ENTRIES);
  }
  broadcast(JSON.stringify({ type: 'entry', entry }));
});

export function addClient(ws: WsClient): void {
  clients.add(ws);
  ws.send(JSON.stringify({ type: 'snapshot', entries: [...log].reverse() }));
}

export function removeClient(ws: WsClient): void {
  clients.delete(ws);
}
```

### types.ts
```ts
// Components must import types from here, NOT from cron.server.ts: a type import from a side-effectful server
// module still drags that module into the SSR component bundle, re-registering its cron job a second time.

export interface CronLogEntry {
  seq: number;
  /** Epoch ms at which the cron handler ran. */
  at: number;
  /** Epoch ms at which the scheduler claimed the firing, which is earlier than `at` by the queue pickup delay. */
  scheduledTime: number;
}

export type CronLogMessage = { type: 'snapshot'; entries: CronLogEntry[] } | { type: 'entry'; entry: CronLogEntry };
```

### routes.ts
```ts
import { Mochi } from 'mochi-framework';
import type { MochiRouteValue, MochiCronConfig } from 'mochi-framework';
import { activityLog, addClient, removeClient } from './cron.server';

// Mounted in the site's Mochi.serve({ cron }) call — see src/routes.ts.
export const cron: MochiCronConfig[] = [activityLog];

export const routes: Record<string, MochiRouteValue> = {
  '/demos/cron': Mochi.page('./src/demos/cron/Cron.svelte'),
  '/ws/cron-log': Mochi.ws({
    open(ws) {
      addClient(ws);
    },
    message() {},
    close(ws) {
      removeClient(ws);
    },
  }),
};
```

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

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

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