yorck-mcp 0.1.2 → 0.1.3

package/README.md

@@ -13,6 +13,7 @@ CLI and MCP tools for Yorck Berlin cinema.
 npx yorck-mcp whats-on --when tonight --after 18:00 --cinemas passage,rollberg
 npx yorck-mcp search "devil wears prada"
 npx yorck-mcp seat-map 1007-30456 --out seat-map.svg
+npx yorck-mcp seat-map-html 1007-30456 --out seat-map.html
 npx yorck-mcp calendar 1007-30456 the-devil-wears-prada-2 --out movie.ics
 ```
 
@@ -46,6 +47,22 @@ npx yorck-mcp book-best --q "devil wears prada" --when tonight --after 18:00 --c
 
 You do not need to provide a separate member ID. The Yorck login response includes it when the account has one, and the booking flow uses it internally.
 
+## Skill install
+
+Install a Claude Code skill that teaches the agent which Yorck tool to use in each environment:
+
+```bash
+npx yorck-mcp install-skill --target claude
+```
+
+Or from the hosted page:
+
+```bash
+curl -fsSL https://yorck-mcp.isiklimahir.workers.dev/install.sh | bash
+```
+
+The skill includes guidance for Claude Web remote connectors, Claude Code local MCP, inline HTML seat-map fallback, and confirmation-gated booking.
+
 ## MCP
 
 Read-only remote MCP:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yorck-mcp",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "private": false,
   "type": "module",
   "scripts": {

package/src/cli.ts

@@ -1,14 +1,15 @@
 #!/usr/bin/env tsx
-import { writeFile } from "node:fs/promises";
+import { mkdir, writeFile } from "node:fs/promises";
 import process from "node:process";
 import readline from "node:readline/promises";
 import type { Env, Showtime } from "./types.ts";
 import { findFilmsByQuery, getComingSoon, searchShowtimes, type FilmFilters } from "./yorck/films.ts";
 import { getCinemas, getCinemaBySlug } from "./yorck/cinemas.ts";
-import { findSeatByRowAndId, getSeatPlan, renderSeatPlanSvg } from "./yorck/seats.ts";
+import { findSeatByRowAndId, getSeatPlan, renderSeatPlanHtml, renderSeatPlanSvg } from "./yorck/seats.ts";
 import { cancelOrder, commitOrder, reserveUnlimited } from "./yorck/booking.ts";
 import { showtimeToIcs } from "./lib/ics.ts";
 import { whoAmI } from "./yorck/auth.ts";
+import { YORCK_MOVIE_AGENT_SKILL } from "./skill-content.ts";
 
 const PUBLIC_MCP_URL = "https://yorck-mcp.isiklimahir.workers.dev/public/mcp";
 
@@ -342,6 +343,19 @@ async function commandSeatMap(env: Env, args: ParsedArgs) {
   printJson({ sessionId, cinema: cinema?.name, rows, svg: out ? undefined : svg });
 }
 
+async function commandSeatMapHtml(env: Env, args: ParsedArgs) {
+  const sessionId = args._[0] || str(args, "sessionId");
+  if (!sessionId) throw new Error("usage: yorck seat-map-html <session-id> [--out seat-map.html]");
+  const { plan, cinema, rows } = await seatPlanForSession(env, sessionId);
+  const html = renderSeatPlanHtml(plan, { title: cinema?.name ?? "Yorck", subtitle: `Session ${sessionId}` });
+  const out = str(args, "out");
+  if (out) {
+    await writeFile(out, html, "utf8");
+    console.log(`Wrote ${out}`);
+  }
+  printJson({ sessionId, cinema: cinema?.name, rows, html: out ? undefined : html });
+}
+
 async function commandCalendar(env: Env, args: ParsedArgs) {
   const sessionId = args._[0] || str(args, "sessionId");
   const slug = args._[1] || str(args, "slug");
@@ -426,6 +440,32 @@ async function commandMe(env: Env, args: ParsedArgs) {
   printJson(await whoAmI(env));
 }
 
+async function commandSkill(args: ParsedArgs) {
+  const out = str(args, "out");
+  if (out) {
+    await writeFile(out, YORCK_MOVIE_AGENT_SKILL, "utf8");
+    console.log(`Wrote ${out}`);
+  } else {
+    process.stdout.write(YORCK_MOVIE_AGENT_SKILL);
+  }
+}
+
+async function commandInstallSkill(args: ParsedArgs) {
+  const target = (str(args, "target") || "claude").toLowerCase();
+  const home = process.env.HOME || process.cwd();
+  const destinations: string[] = [];
+  if (target === "claude" || target === "both") destinations.push(`${home}/.claude/skills/yorck-movie-agent`);
+  if (target === "pi" || target === "both") destinations.push(`${home}/.pi/agent/skills/yorck-movie-agent`);
+  const customDest = str(args, "dest");
+  if (customDest) destinations.splice(0, destinations.length, customDest.replace(/^~/, home));
+  if (!destinations.length) throw new Error("usage: yorck install-skill [--target claude|pi|both] [--dest path]");
+  for (const dest of destinations) {
+    await mkdir(dest, { recursive: true });
+    await writeFile(`${dest}/SKILL.md`, YORCK_MOVIE_AGENT_SKILL, "utf8");
+    console.log(`Installed skill to ${dest}/SKILL.md`);
+  }
+}
+
 function commandMcpConfig(args: ParsedArgs) {
   const privateUrl = str(args, "url") || process.env.YORCK_MCP_URL || "https://yorck-mcp.isiklimahir.workers.dev/mcp";
   if (bool(args, "remotePrivate")) {
@@ -476,6 +516,7 @@ Usage:
   yorck cinemas
   yorck coming-soon
   yorck seat-map <session-id> [--out seat-map.svg]
+  yorck seat-map-html <session-id> [--out seat-map.html]
   yorck calendar <session-id> <film-slug> [--out event.ics]
   yorck plan --q <film> --when tonight --after 18:00
   yorck me [--email you@example.com --password ...]
@@ -483,6 +524,8 @@ Usage:
   yorck book-best --q <film> --when tonight --after 18:00 [--commit --yes]
   yorck mcp-stdio
   yorck mcp-config [--private]
+  yorck skill [--out SKILL.md]
+  yorck install-skill [--target claude|pi|both]
 
 Public commands need no account. Booking commands need Yorck credentials and an Unlimited card number.
 Use env vars instead of flags for secrets: YORCK_EMAIL, YORCK_PASSWORD, YORCK_UNLIMITED_CARD.
@@ -512,6 +555,8 @@ async function main() {
       return printJson(await getComingSoon(env));
     case "seat-map":
       return commandSeatMap(env, args);
+    case "seat-map-html":
+      return commandSeatMapHtml(env, args);
     case "calendar":
     case "ics":
       return commandCalendar(env, args);
@@ -526,6 +571,10 @@ async function main() {
       return commandBookBest(env, args);
     case "mcp-config":
       return commandMcpConfig(args);
+    case "skill":
+      return commandSkill(args);
+    case "install-skill":
+      return commandInstallSkill(args);
     case "mcp-stdio":
     case "serve-mcp": {
       const { runLocalMcp } = await import("./local-mcp.ts");

package/src/index.ts

@@ -2,11 +2,13 @@ import { Hono } from "hono";
 import type { Env } from "./types.ts";
 import { searchShowtimes, findFilmsByQuery, getComingSoon } from "./yorck/films.ts";
 import { getCinemas, getCinemaBySlug } from "./yorck/cinemas.ts";
-import { getSeatPlan, renderSeatPlanSvg } from "./yorck/seats.ts";
+import { getSeatPlan, renderSeatPlanHtml, renderSeatPlanSvg } from "./yorck/seats.ts";
 import { reserveUnlimited, cancelOrder, getOrder } from "./yorck/booking.ts";
 import { whoAmI } from "./yorck/auth.ts";
 import { showtimeToIcs } from "./lib/ics.ts";
 import { PublicYorckMcp, YorckMcp } from "./mcp.ts";
+import { installScript, YORCK_MOVIE_AGENT_SKILL } from "./skill-content.ts";
+import { landingPage } from "./landing.ts";
 
 export { PublicYorckMcp, YorckMcp };
 
@@ -34,92 +36,11 @@ function requireAuth(c: { req: { raw: Request }; env: Env; text: (body: string,
   return c.text("unauthorized", 401, { "WWW-Authenticate": "Bearer" });
 }
 
-app.get("/", (c) =>
-  c.html(`<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>yorck-mcp</title>
-  <style>
-    :root { color-scheme: light dark; --bg: #f7f6f2; --fg: #191919; --muted: #66615b; --card: #fff; --line: #e4e0d8; --accent: #d62828; }
-    @media (prefers-color-scheme: dark) { :root { --bg: #121212; --fg: #f6f2ea; --muted: #bbb2a8; --card: #1c1c1c; --line: #333; } }
-    body { margin: 0; font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: radial-gradient(circle at 20% 0%, rgba(214,40,40,.12), transparent 34rem), var(--bg); color: var(--fg); }
-    main { max-width: 980px; margin: 0 auto; padding: 64px 22px; }
-    h1 { font-size: clamp(44px, 7vw, 86px); letter-spacing: -.07em; line-height: .92; margin: 0 0 18px; }
-    h2 { font-size: 24px; letter-spacing: -.03em; margin-top: 0; }
-    p { color: var(--muted); font-size: 18px; line-height: 1.6; }
-    .pill { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: color-mix(in srgb, var(--card) 84%, transparent); border-radius: 999px; padding: 8px 12px; color: var(--muted); font-weight: 700; font-size: 14px; }
-    .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin: 32px 0; }
-    .card { background: color-mix(in srgb, var(--card) 92%, transparent); border: 1px solid var(--line); border-radius: 28px; padding: 24px; box-shadow: 0 24px 80px rgba(0,0,0,.08); }
-    code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
-    pre { overflow-x: auto; background: #111; color: #f6f2ea; border-radius: 20px; padding: 18px; font-size: 14px; line-height: 1.55; }
-    a { color: var(--accent); font-weight: 800; }
-    ul { color: var(--muted); line-height: 1.8; padding-left: 20px; }
-  </style>
-</head>
-<body>
-  <main>
-    <span class="pill">Yorck Berlin cinema · CLI + MCP</span>
-    <h1>search showtimes, render seats, optionally book with your own Unlimited account.</h1>
-    <p><strong>yorck-mcp</strong> is a public read-only MCP server, a terminal CLI, and a local bookable stdio MCP for agents. Public search, seat maps, calendar files, and direct checkout links need no account. Automated booking stays local and currently requires your Yorck email, password, and Unlimited card number.</p>
-
-    <div class="grid">
-      <section class="card">
-        <h2>Public MCP</h2>
-        <p>Use the hosted read-only endpoint in any MCP client.</p>
-        <pre>{
-  "mcpServers": {
-    "yorck": {
-      "command": "npx",
-      "args": ["-y", "mcp-remote", "https://yorck-mcp.isiklimahir.workers.dev/public/mcp"]
-    }
-  }
-}</pre>
-      </section>
-      <section class="card">
-        <h2>CLI</h2>
-        <p>Use it directly from a terminal.</p>
-        <pre>npx -y yorck-mcp whats-on --when tonight --after 18:00
-npx -y yorck-mcp search "devil wears prada"
-npx -y yorck-mcp seat-map 1007-30456 --out seat-map.svg
-npx -y yorck-mcp plan --q "devil wears prada" --when tonight --after 18:00</pre>
-      </section>
-      <section class="card">
-        <h2>Bookable local MCP</h2>
-        <p>Run a local stdio MCP with your credentials. Dry-run is the safe default, real automated booking requires explicit confirmation. Without Unlimited, use the returned checkout link and finish paid checkout on Yorck's site.</p>
-        <pre>{
-  "mcpServers": {
-    "yorck": {
-      "command": "npx",
-      "args": ["-y", "yorck-mcp", "mcp-stdio"],
-      "env": {
-        "YORCK_EMAIL": "you@example.com",
-        "YORCK_PASSWORD": "...",
-        "YORCK_UNLIMITED_CARD": "..."
-      }
-    }
-  }
-}</pre>
-      </section>
-    </div>
-
-    <section class="card">
-      <h2>Tools</h2>
-      <ul>
-        <li><code>whats_on</code>, search showtimes by date, time, cinema, format, genre, and title</li>
-        <li><code>find_film</code>, <code>showtimes</code>, <code>coming_soon</code>, <code>cinemas</code></li>
-        <li><code>seat_map</code>, render a session seat plan as SVG and return available row and seat IDs</li>
-        <li><code>pick_showtime</code>, pick a public session and return a checkout seat-selection link</li>
-        <li><code>add_to_calendar</code>, generate an ICS file or downloadable calendar URL</li>
-        <li><code>book_session</code> and <code>cancel_booking</code>, private/local only</li>
-      </ul>
-      <p>Docs and post: <a href="https://mahir.is/posts/yorck-mcp-public-cinema-agent">mahir.is/posts/yorck-mcp-public-cinema-agent</a></p>
-    </section>
-  </main>
-</body>
-</html>`)
-);
+app.get("/", (c) => c.html(landingPage()));
+
+app.get("/skill/SKILL.md", (c) => c.text(YORCK_MOVIE_AGENT_SKILL, 200, { "Content-Type": "text/markdown; charset=utf-8" }));
+
+app.get("/install.sh", (c) => c.text(installScript("https://yorck-mcp.isiklimahir.workers.dev"), 200, { "Content-Type": "text/x-shellscript; charset=utf-8" }));
 
 // REST endpoints (also handy for quick curl tests)
 app.get("/v1/films", async (c) => {
@@ -189,6 +110,21 @@ app.get("/v1/seat-map/:sessionId", async (c) => {
   return new Response(svg, { headers: { "Content-Type": "image/svg+xml" } });
 });
 
+app.get("/v1/seat-map-html/:sessionId", async (c) => {
+  const sessionId = c.req.param("sessionId");
+  const [cinemaVistaId, sessionNum] = sessionId.split("-");
+  if (!cinemaVistaId || !sessionNum) return c.text("bad sessionId", 400);
+  const cinemas = await getCinemas(c.env);
+  const cinema = cinemas.find((x) => x.vistaId === cinemaVistaId);
+  if (!cinema) return c.text("unknown cinema", 404);
+  const plan = await getSeatPlan(c.env, cinemaVistaId, sessionNum);
+  const html = renderSeatPlanHtml(plan, {
+    title: cinema.name,
+    subtitle: `Session ${sessionId}`,
+  });
+  return c.html(html);
+});
+
 // Public downloadable calendar file. This makes the read-only MCP useful even
 // for clients that cannot write files themselves: the agent can hand the user a
 // normal .ics URL that Apple Calendar, Google Calendar, and Outlook can import.

package/src/landing.ts

@@ -0,0 +1,82 @@
+export function landingPage(): string {
+  return `<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>yorck-mcp</title>
+  <meta name="description" content="Installable Yorck Berlin cinema MCP, CLI, and agent skill." />
+  <style>
+    :root{color-scheme:light dark;--bg:#f7f3eb;--fg:#171717;--muted:#6b625a;--card:rgba(255,255,255,.78);--line:rgba(45,37,30,.12);--accent:#d62828;--green:#166534;--blue:#355cff;--shadow:0 28px 90px rgba(44,32,23,.12)}
+    @media(prefers-color-scheme:dark){:root{--bg:#111;--fg:#f8f3eb;--muted:#b9afa5;--card:rgba(28,28,28,.78);--line:rgba(255,255,255,.12);--shadow:0 28px 90px rgba(0,0,0,.35)}}
+    *{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 12% 0%,rgba(214,40,40,.18),transparent 34rem),radial-gradient(circle at 80% 15%,rgba(53,92,255,.14),transparent 30rem),var(--bg);color:var(--fg);font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}main{max-width:1180px;margin:0 auto;padding:58px 22px 76px}.nav{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:space-between;margin-bottom:58px}.brand{font-weight:900;letter-spacing:-.04em;font-size:24px}.links{display:flex;gap:10px;flex-wrap:wrap}.pill,.tab{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--card);backdrop-filter:blur(18px);border-radius:999px;padding:9px 13px;color:var(--muted);font-weight:800;font-size:14px;text-decoration:none}.hero{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(320px,.92fr);gap:26px;align-items:center}.eyebrow{color:var(--accent);font-weight:900;letter-spacing:.14em;text-transform:uppercase;font-size:13px}h1{font-size:clamp(48px,8vw,104px);letter-spacing:-.085em;line-height:.88;margin:12px 0 18px}h2{font-size:30px;letter-spacing:-.045em;margin:0 0 12px}h3{font-size:20px;letter-spacing:-.025em;margin:0 0 8px}p{color:var(--muted);font-size:18px;line-height:1.58}.hero p{font-size:21px;max-width:720px}.cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}.button{border:1px solid var(--line);border-radius:999px;padding:13px 18px;text-decoration:none;font-weight:900;color:var(--fg);background:var(--card);box-shadow:var(--shadow)}.button.primary{background:#111;color:#fff}.card{background:var(--card);border:1px solid var(--line);border-radius:30px;padding:24px;box-shadow:var(--shadow);backdrop-filter:blur(20px)}.demo{display:grid;gap:14px}.screen{background:#111;color:#f8f3eb;border-radius:24px;padding:18px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;line-height:1.55;overflow:auto}.mini{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.metric{background:rgba(255,255,255,.62);border:1px solid var(--line);border-radius:20px;padding:15px;text-align:center}.metric b{display:block;font-size:30px}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin:22px 0}.section{margin-top:54px}.install-grid{display:grid;grid-template-columns:280px minmax(0,1fr);gap:18px}.tabs{display:grid;gap:8px}.tab{cursor:pointer;justify-content:flex-start}.tab.active{color:#fff;background:#111}.panel{display:none}.panel.active{display:block}.copy{float:right;border:0;border-radius:999px;background:#fff;color:#111;padding:6px 10px;font-weight:900;cursor:pointer}.list{padding-left:20px;color:var(--muted);line-height:1.8}.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:#111;color:#fff;border-radius:999px;padding:10px 14px;font-weight:800;opacity:0;transition:.2s}.toast.show{opacity:1}@media(max-width:820px){.hero,.install-grid{grid-template-columns:1fr}h1{font-size:58px}.mini{grid-template-columns:1fr}}
+  </style>
+</head>
+<body>
+  <main>
+    <nav class="nav"><div class="brand">yorck-mcp</div><div class="links"><a class="pill" href="/public/mcp">public MCP</a><a class="pill" href="/skill/SKILL.md">SKILL.md</a><a class="pill" href="/install.sh">install.sh</a><a class="pill" href="https://www.npmjs.com/package/yorck-mcp">npm</a></div></nav>
+    <section class="hero">
+      <div>
+        <div class="eyebrow">Berlin cinema for agents</div>
+        <h1>movie nights, as an installable agent skill.</h1>
+        <p>Search Yorck showtimes, render seat maps, create calendar files, return checkout links, and optionally book Unlimited tickets from a local MCP server with your own credentials.</p>
+        <div class="cta"><a class="button primary" href="#install">Install</a><a class="button" href="/skill/SKILL.md">Copy skill</a><a class="button" href="https://mahir.is/posts/yorck-mcp-public-cinema-agent">Read the build note</a></div>
+      </div>
+      <div class="card demo">
+        <div class="screen">npx -y yorck-mcp plan --q "prada" --when tonight\n\n=> checkout link\n=> seat-plan summary\n=> calendar command</div>
+        <div class="mini"><div class="metric"><span>search</span><b>90ms</b></div><div class="metric"><span>mode</span><b>public</b></div><div class="metric"><span>booking</span><b>local</b></div></div>
+      </div>
+    </section>
+
+    <section class="section grid">
+      <div class="card"><h3>Public connector</h3><p>No account needed. Add a custom connector in Claude Web or Claude Desktop using the remote MCP endpoint.</p></div>
+      <div class="card"><h3>Local MCP</h3><p>Use Claude Code, Cursor, or local agents with <code>npx -y yorck-mcp mcp-stdio</code>.</p></div>
+      <div class="card"><h3>Agent skill</h3><p>Install one <code>SKILL.md</code> so Claude knows when to use SVG, inline HTML, checkout links, or private booking.</p></div>
+      <div class="card"><h3>HTML fallback</h3><p>If a client cannot render MCP images/SVG, use <code>seat_map_html</code> or <code>seat-map-html</code> for a portable inline page.</p></div>
+    </section>
+
+    <section class="section card" id="install">
+      <h2>Install options</h2>
+      <p>Pick the surface you are using. Public modes are read-only. Private booking uses local environment variables and confirmation gates.</p>
+      <div class="install-grid">
+        <div class="tabs">
+          <button class="tab active" data-tab="claude-web">Claude Web connector</button>
+          <button class="tab" data-tab="claude-code-public">Claude Code public</button>
+          <button class="tab" data-tab="claude-code-private">Claude Code private</button>
+          <button class="tab" data-tab="skill">Claude skill</button>
+          <button class="tab" data-tab="cli">CLI</button>
+          <button class="tab" data-tab="html">Inline HTML fallback</button>
+        </div>
+        <div>
+          <div class="panel active" id="claude-web"><h3>Claude Web / custom connector</h3><p>Customize → Connectors → Add custom connector, then paste:</p><pre class="screen"><button class="copy">copy</button>https://yorck-mcp.isiklimahir.workers.dev/public/mcp</pre></div>
+          <div class="panel" id="claude-code-public"><h3>Claude Code, public tools</h3><pre class="screen"><button class="copy">copy</button>claude mcp add --transport http yorck https://yorck-mcp.isiklimahir.workers.dev/public/mcp</pre></div>
+          <div class="panel" id="claude-code-private"><h3>Claude Code, local bookable MCP</h3><pre class="screen"><button class="copy">copy</button>claude mcp add --transport stdio \\
+  --env YORCK_EMAIL=you@example.com \\
+  --env YORCK_PASSWORD=your-password \\
+  --env YORCK_UNLIMITED_CARD=your-card-number \\
+  yorck -- npx -y yorck-mcp mcp-stdio</pre></div>
+          <div class="panel" id="skill"><h3>Install the skill file</h3><pre class="screen"><button class="copy">copy</button>curl -fsSL https://yorck-mcp.isiklimahir.workers.dev/install.sh | bash</pre><p>Or from npm:</p><pre class="screen"><button class="copy">copy</button>npx -y yorck-mcp install-skill --target claude</pre></div>
+          <div class="panel" id="cli"><h3>Use it directly</h3><pre class="screen"><button class="copy">copy</button>npx -y yorck-mcp whats-on --when tonight --after 18:00
+npx -y yorck-mcp plan --q "devil wears prada" --when tonight
+npx -y yorck-mcp seat-map 1007-30456 --out seat-map.svg</pre></div>
+          <div class="panel" id="html"><h3>When SVG does not render</h3><pre class="screen"><button class="copy">copy</button>npx -y yorck-mcp seat-map-html 1007-30456 --out seat-map.html
+open seat-map.html</pre></div>
+        </div>
+      </div>
+    </section>
+
+    <section class="section grid">
+      <div class="card"><h2>Public tools</h2><ul class="list"><li><code>whats_on</code>, search showtimes</li><li><code>pick_showtime</code>, pick one good plan</li><li><code>seat_map</code>, SVG/image output</li><li><code>seat_map_html</code>, inline HTML fallback</li><li><code>add_to_calendar</code>, ICS file</li></ul></div>
+      <div class="card"><h2>Private tools</h2><ul class="list"><li><code>book_session</code>, Unlimited booking after confirmation</li><li><code>cancel_booking</code>, release a held order</li><li>Paid checkout stays on Yorck's website via checkout link.</li></ul></div>
+    </section>
+  </main>
+  <div class="toast" id="toast">copied</div>
+  <script>
+    const tabs=[...document.querySelectorAll('.tab')],panels=[...document.querySelectorAll('.panel')];
+    tabs.forEach(t=>t.onclick=()=>{tabs.forEach(x=>x.classList.remove('active'));panels.forEach(p=>p.classList.remove('active'));t.classList.add('active');document.getElementById(t.dataset.tab).classList.add('active')});
+    const toast=document.getElementById('toast');
+    document.querySelectorAll('.copy').forEach(btn=>btn.onclick=async()=>{const pre=btn.parentElement;const txt=pre.innerText.replace(/^copy\n?/,'');await navigator.clipboard.writeText(txt);toast.classList.add('show');setTimeout(()=>toast.classList.remove('show'),1200)});
+  </script>
+</body>
+</html>`;
+}

package/src/skill-content.ts

@@ -0,0 +1,131 @@
+export const YORCK_MOVIE_AGENT_SKILL = `---
+name: yorck-movie-agent
+description: >-
+  Plan movie nights with Yorck Berlin cinema. Use when the user asks for movie showtimes, seat maps, checkout links, calendar files, or booking through the yorck-mcp connector/CLI. Handles Claude Web remote MCP, Claude Code local MCP, inline HTML fallbacks, and confirmation-gated booking.
+---
+
+# Yorck Movie Agent
+
+Use this skill when a user asks for Berlin Yorck movie planning, seat maps, direct checkout links, calendar files, or booking via the Yorck MCP/CLI.
+
+## Available install modes
+
+### Claude Web / Claude connectors
+
+Remote read-only MCP endpoint:
+
+\`\`\`txt
+https://yorck-mcp.isiklimahir.workers.dev/public/mcp
+\`\`\`
+
+Use this when Claude Web, Claude Desktop connectors, Cowork, or mobile can add a custom connector. It is public and read-only: showtimes, films, cinemas, seat maps, calendar files, and checkout links. It does not book.
+
+### Claude Code / local agents
+
+Public/local MCP:
+
+\`\`\`bash
+claude mcp add --transport stdio yorck -- npx -y yorck-mcp mcp-stdio
+\`\`\`
+
+Private local MCP with booking credentials:
+
+\`\`\`bash
+claude mcp add --transport stdio \\
+  --env YORCK_EMAIL=you@example.com \\
+  --env YORCK_PASSWORD=your-password \\
+  --env YORCK_UNLIMITED_CARD=your-card-number \\
+  yorck -- npx -y yorck-mcp mcp-stdio
+\`\`\`
+
+### Terminal CLI
+
+\`\`\`bash
+npx -y yorck-mcp whats-on --when tonight --after 18:00
+npx -y yorck-mcp plan --q "devil wears prada" --when tonight --after 18:00
+npx -y yorck-mcp seat-map <session-id> --out seat-map.svg
+npx -y yorck-mcp calendar <session-id> <film-slug> --out movie.ics
+\`\`\`
+
+## Tool use policy
+
+Prefer tools in this order:
+
+1. \`pick_showtime\`, when the user wants one good movie plan or a direct checkout link.
+2. \`whats_on\`, when the user wants multiple options.
+3. \`find_film\` then \`showtimes\`, when the user has a specific film title.
+4. \`seat_map\`, when the environment can render or display SVG/image content.
+5. \`seat_map_html\`, when SVG/image content will not display, such as some Claude Code text-only surfaces.
+6. \`add_to_calendar\`, only when the user wants an ICS/calendar file.
+7. \`book_session\`, only in private/local mode after explicit confirmation.
+
+## Seat map output by environment
+
+### If images/SVG render correctly
+
+Use \`seat_map\`. It returns structured rows plus an SVG image.
+
+### If SVG does not render
+
+Use \`seat_map_html\` and show or save the inline HTML. If the client cannot open inline HTML directly, write the HTML to a local file and tell the user to open it.
+
+In Claude Code, prefer:
+
+\`\`\`bash
+npx -y yorck-mcp seat-map-html <session-id> --out seat-map.html
+open seat-map.html
+\`\`\`
+
+### If neither SVG nor HTML is possible
+
+Use the structured rows from \`seat_map\` or \`pick_showtime\` and summarize:
+
+- film
+- cinema
+- time
+- format
+- available row labels and available seat IDs
+- direct checkout URL
+
+Do not pretend API seat IDs are exactly the same as the visible Yorck website labels. If the user books manually, have them choose seats on Yorck's page.
+
+## Public vs private behavior
+
+Public mode needs no account. It can:
+
+- search showtimes
+- list cinemas
+- render seat maps
+- create ICS calendar files
+- return direct checkout links
+
+Private/local mode can book with credentials. It currently supports Yorck Unlimited booking. Paid checkout should be completed on Yorck's own page using the direct checkout link.
+
+## Safety rules
+
+- Never claim a booking was made unless \`book_session\` returned success.
+- Never claim a calendar event was added unless a calendar tool actually succeeded.
+- Ask for explicit confirmation before booking.
+- Treat \`dryRun: true\` as the default for booking tests.
+- If no Unlimited card is configured, use \`pick_showtime\` and provide the checkout link.
+
+## Example prompts this skill should handle
+
+- "what original-language movies are playing tonight after 7?"
+- "show me a seat map for this Yorck session"
+- "give me an inline HTML seat map because SVG is not rendering"
+- "plan a low-stress movie night for me"
+- "book the best option if my Unlimited card makes it free"
+`;
+
+export function installScript(baseUrl = "https://yorck-mcp.isiklimahir.workers.dev") {
+  return `#!/usr/bin/env bash
+set -euo pipefail
+BASE_URL="${baseUrl}"
+DEST="\${DEST:-$HOME/.claude/skills/yorck-movie-agent}"
+mkdir -p "$DEST"
+curl -fsSL "$BASE_URL/skill/SKILL.md" -o "$DEST/SKILL.md"
+printf 'installed yorck movie agent skill to %s\n' "$DEST"
+printf 'next: add the MCP connector from %s or run: claude mcp add --transport stdio yorck -- npx -y yorck-mcp mcp-stdio\n' "$BASE_URL"
+`;
+}

package/src/tool-registration.ts

@@ -3,7 +3,7 @@ import { z } from "zod";
 import type { Env, Showtime } from "./types.ts";
 import { searchShowtimes, findFilmsByQuery, getComingSoon } from "./yorck/films.ts";
 import { getCinemas } from "./yorck/cinemas.ts";
-import { getSeatPlan, renderSeatPlanSvg } from "./yorck/seats.ts";
+import { getSeatPlan, renderSeatPlanHtml, renderSeatPlanSvg } from "./yorck/seats.ts";
 import { reserveUnlimited, cancelOrder, commitOrder } from "./yorck/booking.ts";
 import { showtimeToIcs } from "./lib/ics.ts";
 import { nowBerlinIso } from "./lib/tz.ts";
@@ -195,6 +195,33 @@ export function registerPublicTools(server: McpServer, env: Env) {
     }
   );
 
+  server.tool(
+    "seat_map_html",
+    "Returns a complete inline HTML seat-map page for a session. Use this when the MCP client cannot display SVG/image output directly, such as text-only Claude Code surfaces.",
+    {
+      sessionId: z.string().regex(/^\d{4}-\d+$/).describe("Yorck session id, e.g. '1003-5724'"),
+    },
+    async ({ sessionId }) => {
+      const [cinemaVistaId, sessionNum] = sessionId.split("-");
+      const cinema = await (async () => {
+        const all = await getCinemas(env);
+        return all.find((c) => c.vistaId === cinemaVistaId);
+      })();
+      if (!cinema) throw new Error(`unknown cinema for session ${sessionId}`);
+      const plan = await getSeatPlan(env, cinemaVistaId, sessionNum);
+      const html = renderSeatPlanHtml(plan, {
+        title: `${cinema.name}`,
+        subtitle: `Session ${sessionId}`,
+      });
+      return {
+        content: [{
+          type: "text" as const,
+          text: JSON.stringify({ sessionId, cinema: cinema.name, html }, null, 2),
+        }],
+      };
+    }
+  );
+
   server.tool(
     "pick_showtime",
     "Read-only helper that searches showtimes, chooses a reasonable available seat, and returns a manual booking URL. No account, reservation, or payment needed.",

package/src/yorck/seats.ts

@@ -62,7 +62,7 @@ export interface SvgRenderOpts {
 }
 
 export function renderSeatPlanSvg(plan: SeatPlanResponse, opts: SvgRenderOpts = {}): string {
-  const area = plan.SeatLayoutData.Areas[0];
+  const area = plan.SeatLayoutData?.Areas?.[0];
   if (!area) return `<svg xmlns="http://www.w3.org/2000/svg" width="100" height="40"><text>No seat data</text></svg>`;
 
   const COL_COUNT = area.ColumnCount;
@@ -149,6 +149,40 @@ export function renderSeatPlanSvg(plan: SeatPlanResponse, opts: SvgRenderOpts =
   return out.join("\n");
 }
 
+export function renderSeatPlanHtml(plan: SeatPlanResponse, opts: SvgRenderOpts = {}): string {
+  const area = plan.SeatLayoutData?.Areas?.[0];
+  const svg = renderSeatPlanSvg(plan, opts);
+  const rows = area?.Rows ?? [];
+  const seats = rows.flatMap((row) => row.Seats ?? []);
+  const total = seats.length;
+  const available = seats.filter((seat) => seat.Status === 0).length;
+  const taken = seats.filter((seat) => seat.Status !== 0).length;
+  const title = opts.title || "Yorck seat map";
+  const subtitle = opts.subtitle || "";
+  return `<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>${escapeXml(title)}</title>
+  <style>
+    body{margin:0;background:#f7f6f2;color:#181818;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;padding:42px 20px}
+    main{max-width:1160px;margin:0 auto}.eyebrow{text-transform:uppercase;letter-spacing:.12em;color:#777;font-weight:800;font-size:13px}h1{font-size:clamp(34px,5vw,56px);letter-spacing:-.05em;margin:8px 0 8px}.sub{color:#666;margin:0 0 28px;font-size:18px}.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:22px 0}.stat{background:white;border:1px solid #e3dfd6;border-radius:22px;padding:18px;text-align:center}.stat b{display:block;font-size:38px;letter-spacing:-.04em}.map{background:#101010;border-radius:28px;overflow:auto;box-shadow:0 20px 70px #0002}.map svg{width:100%;height:auto;display:block}.hint{margin-top:18px;color:#666;line-height:1.5}@media(max-width:720px){.stats{grid-template-columns:1fr}}
+  </style>
+</head>
+<body>
+  <main>
+    <div class="eyebrow">inline HTML fallback</div>
+    <h1>${escapeXml(title)}</h1>
+    ${subtitle ? `<p class="sub">${escapeXml(subtitle)}</p>` : ""}
+    <section class="stats"><div class="stat"><span>Total seats</span><b>${total}</b></div><div class="stat"><span>Available</span><b style="color:#166534">${available}</b></div><div class="stat"><span>Unavailable</span><b style="color:#7f1d1d">${taken}</b></div></section>
+    <section class="map">${svg}</section>
+    <p class="hint">Green seats are available. This view is a portable HTML fallback for clients that cannot display MCP image/SVG output directly.</p>
+  </main>
+</body>
+</html>`;
+}
+
 function escapeXml(s: string): string {
   return s
     .replace(/&/g, "&amp;")