@rikaidev/yomi 0.2.6

package/dist/mcp/ui/capability.js

@@ -0,0 +1,26 @@
+/** The MCP Apps UI mime type the host must declare support for. */
+export const MCP_APPS_MIME_TYPE = 'text/html;profile=mcp-app';
+/** The extension key the MCP Apps spec registers capability support under. */
+const MCP_APPS_EXTENSION_KEY = 'io.modelcontextprotocol/ui';
+/**
+ * Does the connected client's negotiated capabilities include MCP Apps UI
+ * support (the `text/html;profile=mcp-app` mime type under the
+ * `io.modelcontextprotocol/ui` extension)?
+ *
+ * @param capabilities - Result of `server.getClientCapabilities()`.
+ * @returns True only when the client explicitly declared the mime type.
+ */
+export function supportsMcpApps(capabilities) {
+    const extension = capabilities?.extensions?.[MCP_APPS_EXTENSION_KEY];
+    if (!extension || typeof extension !== 'object') {
+        return false;
+    }
+    if (!('mimeTypes' in extension)) {
+        return false;
+    }
+    const { mimeTypes } = extension;
+    if (!Array.isArray(mimeTypes)) {
+        return false;
+    }
+    return mimeTypes.includes(MCP_APPS_MIME_TYPE);
+}

package/dist/mcp/ui/login-app-protocol.js

@@ -0,0 +1,118 @@
+/**
+ * JSON-RPC-over-postMessage transport for the login view, plus the MCP
+ * Apps lifecycle handshake (`ui/initialize` -> `ui/notifications/initialized`)
+ * and size-changed reporting. Emitted verbatim into ../login-app.ts's
+ * `<script>` tag, ahead of ./login-app-view.ts's rendering code, inside one
+ * shared `(function () { 'use strict'; ... })();` wrapper both blobs are
+ * concatenated into — so the `var`/`function` declarations here are plain
+ * ordinary bindings, visible to login-app-view.ts by simple scope, not
+ * exported through any `window.*` global. Split out of login-app.ts purely
+ * to keep that file (and this one) under the project's 500-scc-line module
+ * cap.
+ *
+ * Per the MCP Apps spec (specification/2026-01-26/apps.mdx), the JSON-RPC
+ * message IS the postMessage payload (no envelope), sent to `window.parent`
+ * with targetOrigin `'*'` — the view must not perform origin checks; it
+ * trusts `window.parent`. ONE `message` listener demultiplexes both
+ * directions: a message carrying `id` plus `result`/`error` is a response
+ * to a request THIS view sent (`sendRequest`/`callTool`); a message
+ * carrying only `method` is a notification FROM the host (`onNotification`
+ * subscribers). The spec's own reference snippet sets up one listener per
+ * outstanding request, which leaks a listener per call — this file adds
+ * exactly one, for the page's lifetime, and correlates by `id` instead.
+ */
+/**
+ * Build the transport/handshake JS, parameterized by yomi's own version so
+ * `ui/initialize`'s `clientInfo.version` reports it.
+ *
+ * @param version - `YOMI_VERSION` from ../../version.ts, a build-time
+ * constant (not a runtime package.json read — that fails inside a `bun
+ * build --compile` binary's virtual filesystem). version.test.ts asserts
+ * it stays equal to package.json's "version" field so the two can't drift.
+ */
+export function buildLoginAppProtocolJs(version) {
+    const versionLiteral = JSON.stringify(version);
+    return `
+  var nextRequestId = 1;
+  var pendingRequests = {};
+  var notificationHandlers = {};
+
+  function onNotification(method, handler) {
+    notificationHandlers[method] = handler;
+  }
+
+  function sendRequest(method, params) {
+    var id = nextRequestId++;
+    return new Promise(function (resolve, reject) {
+      pendingRequests[id] = { resolve: resolve, reject: reject };
+      window.parent.postMessage({ jsonrpc: '2.0', id: id, method: method, params: params || {} }, '*');
+    });
+  }
+
+  function sendNotification(method, params) {
+    window.parent.postMessage({ jsonrpc: '2.0', method: method, params: params || {} }, '*');
+  }
+
+  function callTool(name, toolArguments) {
+    return sendRequest('tools/call', { name: name, arguments: toolArguments || {} });
+  }
+
+  window.addEventListener('message', function (event) {
+    var message = event.data;
+    if (!message || typeof message !== 'object' || message.jsonrpc !== '2.0') return;
+    var hasId = Object.prototype.hasOwnProperty.call(message, 'id');
+    var isResponse = hasId && (Object.prototype.hasOwnProperty.call(message, 'result')
+      || Object.prototype.hasOwnProperty.call(message, 'error'));
+    if (isResponse) {
+      var waiting = pendingRequests[message.id];
+      if (!waiting) return;
+      delete pendingRequests[message.id];
+      if (message.error) {
+        waiting.reject(new Error((message.error && message.error.message) || 'Request failed.'));
+      }
+      else {
+        waiting.resolve(message.result);
+      }
+      return;
+    }
+    if (typeof message.method === 'string') {
+      var handler = notificationHandlers[message.method];
+      if (handler) handler(message.params || {});
+    }
+  });
+
+  var lastReportedSize = null;
+
+  function reportSize() {
+    var width = document.documentElement.scrollWidth;
+    var height = document.documentElement.scrollHeight;
+    var key = width + 'x' + height;
+    if (key === lastReportedSize) return;
+    lastReportedSize = key;
+    sendNotification('ui/notifications/size-changed', { width: width, height: height });
+  }
+
+  function applyTheme(theme) {
+    var root = document.documentElement;
+    root.classList.remove('theme-dark', 'theme-light');
+    if (theme === 'dark') root.classList.add('theme-dark');
+    else if (theme === 'light') root.classList.add('theme-light');
+  }
+
+  function initializeHost(onReady) {
+    sendRequest('ui/initialize', {
+      capabilities: {},
+      clientInfo: { name: 'yomi login', version: ${versionLiteral} },
+      protocolVersion: '2026-01-26',
+      appCapabilities: { availableDisplayModes: ['inline'] },
+    }).then(function (result) {
+      var hostContext = (result && result.hostContext) || {};
+      applyTheme(hostContext.theme || null);
+      sendNotification('ui/notifications/initialized', {});
+      onReady(hostContext, null);
+    }).catch(function (error) {
+      onReady(null, error);
+    });
+  }
+`;
+}

package/dist/mcp/ui/login-app-styles.js

@@ -0,0 +1,142 @@
+/**
+ * CSS for the login view (../login-app.ts's `<style>` block). Split out
+ * purely to keep login-app.ts under the project's 500-scc-line module cap
+ * as this view grew from a read-only display into one that also renders a
+ * credentials form and drives its own tool calls.
+ *
+ * Color scheme: `prefers-color-scheme` is the fallback (kept from before
+ * this file existed), but `html.theme-dark` / `html.theme-light` — applied
+ * by ./login-app-protocol.ts from the host's `hostContext.theme` once
+ * `ui/initialize` resolves — take precedence via ordinary selector
+ * specificity (a class selector always outranks a media-qualified type
+ * selector), so an authoritative host theme always wins over the guess.
+ */
+export const LOGIN_APP_CSS = `
+  :root { color-scheme: light dark; }
+  * { box-sizing: border-box; }
+  html, body {
+    margin: 0;
+    padding: 0;
+    background: transparent;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+    color: #1c1c1e;
+  }
+  @media (prefers-color-scheme: dark) {
+    html, body { color: #ececec; }
+  }
+  html.theme-dark, html.theme-dark body { color: #ececec; }
+  html.theme-light, html.theme-light body { color: #1c1c1e; }
+  main {
+    padding: 20px 24px;
+    max-width: 420px;
+    margin: 0 auto;
+  }
+  .prereq {
+    font-size: 12px;
+    opacity: 0.65;
+    line-height: 1.5;
+    margin: 0 0 16px;
+    padding-bottom: 12px;
+    border-bottom: 1px solid rgba(127, 127, 127, 0.18);
+  }
+  .label {
+    font-size: 12px;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    opacity: 0.6;
+    margin: 0 0 8px;
+  }
+  .pin {
+    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+    font-size: 40px;
+    font-weight: 600;
+    letter-spacing: 0.12em;
+    user-select: text;
+    -webkit-user-select: text;
+    padding: 14px 0;
+    margin: 0 0 20px;
+    border-radius: 12px;
+    text-align: center;
+    background: rgba(127, 127, 127, 0.12);
+  }
+  .steps {
+    margin: 0 0 20px;
+    padding-left: 20px;
+    line-height: 1.6;
+  }
+  .steps li { margin-bottom: 6px; }
+  .status {
+    font-size: 14px;
+    opacity: 0.85;
+    padding: 10px 14px;
+    border-radius: 10px;
+    background: rgba(127, 127, 127, 0.10);
+    margin: 0 0 12px;
+  }
+  .idle {
+    font-size: 13px;
+    opacity: 0.55;
+    margin: 0;
+  }
+  .countdown {
+    font-variant-numeric: tabular-nums;
+    font-weight: 600;
+  }
+  .note {
+    font-size: 12px;
+    opacity: 0.6;
+    line-height: 1.5;
+    margin: 16px 0 0;
+  }
+  .sources {
+    font-size: 11px;
+    opacity: 0.45;
+    line-height: 1.6;
+    margin: 20px 0 0;
+    padding-top: 12px;
+    border-top: 1px solid rgba(127, 127, 127, 0.18);
+    word-break: break-all;
+  }
+  .error {
+    font-size: 14px;
+    padding: 12px 14px;
+    border-radius: 10px;
+    background: rgba(127, 127, 127, 0.14);
+  }
+  .form-field {
+    margin: 0 0 14px;
+  }
+  .form-field label {
+    display: block;
+    font-size: 12px;
+    opacity: 0.65;
+    margin: 0 0 6px;
+  }
+  .form-field input,
+  .form-field select {
+    width: 100%;
+    padding: 10px 12px;
+    border-radius: 8px;
+    border: 1px solid rgba(127, 127, 127, 0.3);
+    background: transparent;
+    color: inherit;
+    font-size: 14px;
+    font-family: inherit;
+  }
+  button.primary {
+    width: 100%;
+    padding: 12px;
+    border: none;
+    border-radius: 10px;
+    background: rgba(127, 127, 127, 0.16);
+    color: inherit;
+    font-size: 14px;
+    font-weight: 600;
+    font-family: inherit;
+    cursor: pointer;
+  }
+  button.primary:disabled {
+    opacity: 0.6;
+    cursor: default;
+  }
+`;

package/dist/mcp/ui/login-app-view.js

@@ -0,0 +1,361 @@
+/**
+ * Rendering + orchestration for the login view (../login-app.ts's
+ * `<script>` tag, concatenated after ./login-app-protocol.ts inside the
+ * same wrapping IIFE — see that file's header for why this can call
+ * `onNotification`/`callTool`/`reportSize`/`initializeHost` directly with
+ * no import). Split out of login-app.ts purely to keep that file (and this
+ * one) under the project's 500-scc-line module cap.
+ *
+ * Renders five states off one `stage`/outcome: `need_credentials` (a login
+ * form, submitted via `callTool('login', …)` — a HUMAN-initiated action),
+ * `pin` (a PIN was issued), `cert` (a stored certificate skipped the PIN
+ * step), `error`, and a plain cancelled state.
+ *
+ * This view has never been observed to render on any deployed MCP client —
+ * see ../login-app.ts's header for the upstream host bug tracking this. The
+ * MODEL, not this view, is always the driver of login completion
+ * (../handlers-login.ts always tells it to call `login_complete` itself).
+ * Accordingly `pin`/`cert` are display-only: they show the PIN/steps and a
+ * note that completion is in progress elsewhere, and do NOT call
+ * `login_complete` themselves — a prior version did, which raced the
+ * model's own call against this view's for the same `pendingLogin`. There
+ * is now exactly one driver.
+ *
+ * The `success` stage/renderer was NOT kept as a distinct visual (no "Signed
+ * in as …" card): this view no longer calls `login_complete` itself, so it
+ * has no business rendering that result. `interpretToolResult`'s fallback
+ * branch (a `login_complete`-shaped `{ loggedIn, mid, displayName }` JSON
+ * with no `structuredContent`) is technically still reachable — the host
+ * could in principle forward that tool-result notification even though this
+ * view never initiated the call — so it is handled, but only with a plain,
+ * non-optimistic `renderDone()` acknowledgement, never a profile card built
+ * from data this view did not ask for.
+ *
+ * The PIN and any error message are untrusted server/host data — written
+ * via `textContent`, never `innerHTML`; nothing interpolates into an HTML
+ * string anywhere below. All timing numbers arrive via `structuredContent`
+ * at render time — none are written into this source.
+ */
+export const LOGIN_APP_VIEW_JS = `
+  var SOURCE_A = 'help.line.me/line/IOSSecondary/?contentId=20018574&lang=zh-Hant';
+  var SOURCE_B = 'help.line.me/line/smartphone/pc?lang=zh-Hant&contentId=20000112';
+
+  var app = document.getElementById('app');
+
+  function clear(container) {
+    while (container.firstChild) container.removeChild(container.firstChild);
+    return container;
+  }
+
+  function el(tag, className, text) {
+    var node = document.createElement(tag);
+    if (className) node.className = className;
+    if (text !== undefined && text !== null) node.textContent = text;
+    return node;
+  }
+
+  function appendPrereq(container) {
+    container.appendChild(el('p', 'prereq',
+      'Requires: on the primary phone, 設定 > 我的帳號 > 允許自其他裝置登入 must be enabled, '
+      + 'or LINE will not offer this device a sign-in prompt at all.'));
+  }
+
+  function appendSources(container) {
+    var sources = el('p', 'sources', null);
+    sources.appendChild(document.createTextNode('Sources: ' + SOURCE_A));
+    sources.appendChild(document.createElement('br'));
+    sources.appendChild(document.createTextNode(SOURCE_B));
+    container.appendChild(sources);
+  }
+
+  var countdownTimer = null;
+
+  function stopCountdown() {
+    if (countdownTimer) {
+      clearInterval(countdownTimer);
+      countdownTimer = null;
+    }
+  }
+
+  function renderCountdown(target, totalSeconds, onExpire) {
+    stopCountdown();
+    var deadline = Date.now() + totalSeconds * 1000;
+    function tick() {
+      var remaining = Math.max(0, Math.round((deadline - Date.now()) / 1000));
+      target.textContent = remaining + 's';
+      if (remaining <= 0) {
+        stopCountdown();
+        onExpire();
+      }
+    }
+    tick();
+    countdownTimer = setInterval(tick, 500);
+  }
+
+  function afterRender() {
+    reportSize();
+  }
+
+  function renderIdle() {
+    stopCountdown();
+    var container = clear(app);
+    container.appendChild(el('p', 'idle', 'Waiting for the host.'));
+    afterRender();
+  }
+
+  function renderError(message) {
+    stopCountdown();
+    var container = clear(app);
+    container.appendChild(el('p', 'error', message || 'Login failed.'));
+    afterRender();
+  }
+
+  function renderCancelled() {
+    stopCountdown();
+    var container = clear(app);
+    container.appendChild(el('p', 'status', 'Login was cancelled.'));
+    afterRender();
+  }
+
+  // No dedicated "success" renderer: this view is never the driver of login
+  // completion (the model always is, per ../handlers-login.ts), so it has
+  // no business rendering a signed-in profile. If a \`login_complete\`
+  // tool-result notification ever reaches this view anyway (see
+  // interpretToolResult below), it gets this same plain acknowledgement,
+  // not a fabricated success card built from data this view did not ask for.
+  function renderDone() {
+    stopCountdown();
+    var container = clear(app);
+    container.appendChild(el('p', 'status', 'Sign-in finished. See the conversation for details.'));
+    afterRender();
+  }
+
+  function renderNeedCredentials(data) {
+    stopCountdown();
+    var container = clear(app);
+
+    appendPrereq(container);
+    container.appendChild(el('p', 'label', 'Sign in to LINE'));
+
+    var form = document.createElement('form');
+
+    var phoneField = el('div', 'form-field');
+    phoneField.appendChild(el('label', null, 'Phone number (E.164, e.g. +8869XXXXXXXX)'));
+    var phoneInput = document.createElement('input');
+    phoneInput.type = 'tel';
+    phoneInput.required = true;
+    phoneInput.placeholder = '+8869XXXXXXXX';
+    phoneField.appendChild(phoneInput);
+    form.appendChild(phoneField);
+
+    var regionField = el('div', 'form-field');
+    regionField.appendChild(el('label', null, 'Region'));
+    var regionSelect = document.createElement('select');
+    var regions = Array.isArray(data.regions) ? data.regions : [];
+    for (var i = 0; i < regions.length; i++) {
+      var option = document.createElement('option');
+      option.value = regions[i];
+      option.textContent = regions[i];
+      regionSelect.appendChild(option);
+    }
+    regionField.appendChild(regionSelect);
+    form.appendChild(regionField);
+
+    var submitButton = document.createElement('button');
+    submitButton.type = 'submit';
+    submitButton.className = 'primary';
+    submitButton.textContent = 'Continue';
+    form.appendChild(submitButton);
+    container.appendChild(form);
+
+    var formStatus = el('p', 'status', null);
+    formStatus.style.display = 'none';
+    container.appendChild(formStatus);
+
+    form.addEventListener('submit', function (event) {
+      event.preventDefault();
+      submitButton.disabled = true;
+      formStatus.style.display = '';
+      formStatus.textContent = 'Starting login…';
+      callTool('login', { phone: phoneInput.value, region: regionSelect.value }).then(function (result) {
+        interpretToolResult(result);
+      }).catch(function (error) {
+        renderError((error && error.message) || 'Login failed.');
+      });
+    });
+
+    appendSources(container);
+    afterRender();
+  }
+
+  function renderPinStage(data) {
+    stopCountdown();
+    var container = clear(app);
+
+    appendPrereq(container);
+
+    container.appendChild(el('p', 'label', 'LINE login PIN'));
+    container.appendChild(el('p', 'pin', data.pin || ''));
+
+    var steps = el('ol', 'steps');
+    steps.appendChild(el('li', null, 'Open LINE on your primary phone.'));
+    steps.appendChild(el('li', null, 'Enter the PIN shown above.'));
+    steps.appendChild(el('li', null, 'Tick the device that is signing in.'));
+    steps.appendChild(el('li', null, 'Tap 「用戶確認」.'));
+    steps.appendChild(el('li', null, 'Approve the new device when the primary phone asks.'));
+    container.appendChild(steps);
+
+    var pinStatus = el('p', 'status');
+    var pinLabel = document.createTextNode('Time left to enter the code: ');
+    var pinCount = el('span', 'countdown');
+    pinStatus.appendChild(pinLabel);
+    pinStatus.appendChild(pinCount);
+    container.appendChild(pinStatus);
+
+    var clientPinMinutes = Math.round(data.clientPinPollCeilingSeconds / 60);
+    container.appendChild(el('p', 'note',
+      'yomi keeps listening for about ' + clientPinMinutes + ' minutes, so a slow phone is not a '
+      + 'problem — the code\\'s own 3-minute limit above is the real deadline.'));
+    container.appendChild(el('p', 'note',
+      'This PIN step is skipped on future logins once a login certificate has been stored.'));
+
+    var pinSeconds = data.pinCodeLifetimeSeconds;
+    renderCountdown(pinCount, pinSeconds, function () {
+      pinStatus.replaceChild(document.createTextNode('The code has expired. '), pinLabel);
+      pinCount.textContent = '';
+      container.appendChild(el('p', 'error', 'This code is no longer valid. Call login again to get a new one.'));
+      afterRender();
+    });
+
+    container.appendChild(el('p', 'note', 'The assistant is completing this sign-in; the result will appear in the conversation.'));
+
+    appendSources(container);
+    afterRender();
+  }
+
+  function renderCertStage(data) {
+    stopCountdown();
+    var container = clear(app);
+
+    appendPrereq(container);
+
+    container.appendChild(el('p', 'label', 'Device approval'));
+    container.appendChild(el('p', 'status',
+      'No PIN is needed — a stored login certificate from a previous login was recognised.'));
+
+    var steps = el('ol', 'steps');
+    steps.appendChild(el('li', null, 'Open LINE on your primary phone.'));
+    steps.appendChild(el('li', null, 'Approve the new device when it asks.'));
+    container.appendChild(steps);
+
+    var approvalStatus = el('p', 'status');
+    var approvalLabel = document.createTextNode('yomi is waiting for approval: ');
+    var approvalCount = el('span', 'countdown');
+    approvalStatus.appendChild(approvalLabel);
+    approvalStatus.appendChild(approvalCount);
+    container.appendChild(approvalStatus);
+
+    var approvalSeconds = data.clientApprovalPollCeilingSeconds;
+    renderCountdown(approvalCount, approvalSeconds, function () {
+      approvalStatus.replaceChild(document.createTextNode('yomi has stopped waiting for approval. '), approvalLabel);
+      approvalCount.textContent = '';
+    });
+
+    container.appendChild(el('p', 'note', 'The assistant is completing this sign-in; the result will appear in the conversation.'));
+
+    appendSources(container);
+    afterRender();
+  }
+
+  function extractText(content) {
+    if (!Array.isArray(content)) return null;
+    for (var i = 0; i < content.length; i++) {
+      if (content[i] && content[i].type === 'text' && typeof content[i].text === 'string') {
+        return content[i].text;
+      }
+    }
+    return null;
+  }
+
+  function parseJsonText(text) {
+    if (typeof text !== 'string') return null;
+    try {
+      return JSON.parse(text);
+    }
+    catch (error) {
+      return null;
+    }
+  }
+
+  function renderFromStage(data) {
+    if (data.stage === 'need_credentials') renderNeedCredentials(data);
+    else if (data.stage === 'pin') renderPinStage(data);
+    else if (data.stage === 'cert') renderCertStage(data);
+    else renderError(typeof data.message === 'string' ? data.message : 'Login failed.');
+  }
+
+  /**
+   * Interpret one CallToolResult-shaped object (from either a
+   * \`ui/notifications/tool-result\` notification or the direct response
+   * to this view's own \`tools/call\`) and render accordingly.
+   */
+  function interpretToolResult(toolResult) {
+    if (!toolResult || typeof toolResult !== 'object') {
+      renderError('No result received.');
+      return;
+    }
+    if (toolResult.isError) {
+      renderError(extractText(toolResult.content) || 'The tool reported an error.');
+      return;
+    }
+    if (toolResult.structuredContent && typeof toolResult.structuredContent === 'object') {
+      renderFromStage(toolResult.structuredContent);
+      return;
+    }
+    // login_complete's success result has no structuredContent — its JSON
+    // ({ loggedIn, mid, displayName }) is in content[0].text. This view is
+    // never the one that called login_complete (the model always is), so it
+    // only ever sees this if the host independently forwards that result —
+    // acknowledge it plainly rather than build a success card from it.
+    var parsed = parseJsonText(extractText(toolResult.content));
+    if (parsed && parsed.loggedIn) {
+      renderDone();
+      return;
+    }
+    renderError('Unrecognized tool result.');
+  }
+
+  /**
+   * A \`ui/notifications/tool-result\` notification's \`params\` may carry
+   * the CallToolResult directly, or nested under a \`result\`/\`toolResult\`/
+   * \`output\` wrapper — the spec does not pin down one exact shape, so this
+   * checks for either without assuming.
+   */
+  function unwrapToolResult(params) {
+    if (!params || typeof params !== 'object') return null;
+    if (params.content || params.structuredContent || params.isError !== undefined) return params;
+    var candidates = [params.result, params.toolResult, params.output];
+    for (var i = 0; i < candidates.length; i++) {
+      if (candidates[i] && typeof candidates[i] === 'object') return candidates[i];
+    }
+    return null;
+  }
+
+  onNotification('ui/notifications/tool-result', function (params) {
+    interpretToolResult(unwrapToolResult(params));
+  });
+
+  onNotification('ui/notifications/tool-cancelled', function () {
+    renderCancelled();
+  });
+
+  renderIdle();
+  initializeHost(function (hostContext, error) {
+    if (error) {
+      renderError('Could not connect to host: ' + ((error && error.message) || String(error)));
+    }
+    // Otherwise stay idle — the next thing to arrive is
+    // ui/notifications/tool-input(-partial) (ignored, carries only the call's
+    // arguments) followed by tool-result, which drives the first real render.
+  });
+`;