clauderipple 0.9.4 → 0.10.0

package/dist/remote/web/i18n.ts

@@ -0,0 +1,374 @@
+// Korean is the source language; English mirrors every key. A missing key shows the key itself,
+// which the i18n test catches before a person does.
+
+export type Lang = "ko" | "en";
+
+const ko = {
+  "app.name": "리플 리모트",
+  "image.view": "이미지 크게 보기",
+  "image.unavailable": "이미지를 표시할 수 없습니다",
+  /** What copy calls the connected computer before its name is known (and on the pair screen). */
+  "host.fallback": "컴퓨터",
+  "conn.open": "연결됨",
+  "conn.connecting": "연결 중…",
+  "conn.retryIn": "{s}초 후 재연결",
+  "conn.retrying": "재연결 중…",
+  "conn.offline": "오프라인 상태",
+  "conn.lost.title": "{host} 연결 끊김",
+  "conn.lost.body": "{ago} 동안 응답이 없습니다. {host}에서 세션이 계속 실행 중일 수 있으며, 다시 연결되면 놓친 내용을 모두 동기화합니다.",
+  "conn.offline.title": "기기 오프라인",
+  "conn.offline.body": "네트워크가 복구되면 자동으로 다시 연결합니다. 대기 중인 메시지는 보관 후 전송합니다.",
+  "conn.retryNow": "지금 다시 시도",
+  "conn.lastSeen": "마지막 확인 {time}",
+  "conn.denied.title": "기기 연결 해제됨",
+  "conn.denied.body": "{host}에서 새 QR 코드를 생성해 다시 스캔하세요.",
+  "conn.router": "{host}에 연결되었으나 ClaudeRipple 라우터가 응답하지 않습니다. 새 요청은 라우터가 복구될 때까지 실패합니다.",
+  "conn.desktop": "Claude 앱 세션에는 지금 보내기·승인이 되지 않습니다. {problem}",
+  "conn.stale": "현재 내용은 {time} 기준입니다",
+  "pair.title": "{host}에 연결",
+  "pair.step1": "{host}에서 ClaudeRipple 대시보드를 열고 이 메뉴로 가세요",
+  "pair.where": "휴대폰 › QR 코드 보기",
+  "pair.step2": "표시된 QR 코드를 카메라로 스캔하세요",
+  "pair.step3": "열린 페이지를 홈 화면에 추가하면 앱처럼 실행됩니다",
+  "pair.paste": "홈 화면 앱에서는 QR로 연 Safari의 연결이 이어지지 않습니다. 대시보드의 휴대폰 화면에서 링크를 복사해 여기에 붙여 넣으세요.",
+  "pair.connect": "연결",
+  "pair.badLink": "연결 링크가 아닙니다. 대시보드의 휴대폰 화면에서 복사한 #pair=… 링크 전체를 붙여 넣으세요.",
+  "pair.note": "릴레이를 통해 어디서나 연결되고 알림도 받습니다. 대화는 종단간 암호화됩니다.",
+  "home.title": "세션",
+  "home.waiting": "승인 대기",
+  "home.active": "진행 중",
+  "home.recent": "최근",
+  "home.desktop": "Claude 앱 세션",
+  "session.readOnly": "{host}에서 작성한 세션입니다. 읽기 전용으로 표시합니다.",
+  "home.empty.title": "첫 세션 시작",
+  "home.empty.body": "폴더와 모델을 선택하고 작업을 입력하면 {host}에서 즉시 시작합니다.",
+  "home.more": "더 보기",
+  "group.input": "입력 필요",
+  "group.failed": "실패",
+  "group.review": "검토 대기",
+  "group.working": "작업 중",
+  "group.done": "완료",
+  "home.byStatus": "상태별",
+  "home.byFolder": "폴더별",
+  "home.showArchived": "보관됨",
+  "home.markUnread": "안 읽음으로 표시",
+  "home.archive": "보관",
+  "home.unarchive": "보관 해제",
+  "home.pending": "{n}건 대기",
+  "folder.new": "새 폴더",
+  "folder.newName": "폴더 이름",
+  "folder.create": "만들기",
+  "isolation.title": "격리",
+  "isolation.local": "로컬",
+  "isolation.worktree": "새 worktree",
+  "isolation.base": "분기 기준",
+  "composer.new": "이 폴더에서 무엇을 할까요?",
+  "composer.reply": "이어서 입력",
+  "composer.send": "보내기",
+  "composer.stop": "중지",
+  "chip.folder": "폴더",
+  "chip.model": "모델",
+  "state.starting": "시작 중",
+  "state.running": "작업 중",
+  "state.waiting": "승인 대기",
+  "state.idle": "완료",
+  "state.stopped": "일시 중지",
+  "state.error": "오류",
+  "time.now": "방금",
+  "time.min": "{n}분 전",
+  "time.hour": "{n}시간 전",
+  "time.day": "{n}일 전",
+  "dur.s": "{n}초",
+  "dur.m": "{n}분",
+  "dur.ms": "{m}분 {s}초",
+  "dur.h": "{n}시간",
+  "dur.hm": "{h}시간 {m}분",
+  "band.effort": "추론 강도",
+  "band.cache": "캐시",
+  "band.context": "컨텍스트",
+  "band.fiveHour": "5시간 한도",
+  "band.workers": "워커",
+  "band.workersNone": "이 세션에서 실행된 워커가 없습니다",
+  "band.workerLine": "{n}회",
+  "band.resetsAt": "{time} 초기화",
+  "band.updated": "{time} 기준",
+  "perm.title": "{tool} 실행을 허용하시겠습니까?",
+  "perm.allow": "허용",
+  "perm.deny": "거부",
+  "perm.always": "이 세션에서 항상 허용",
+  "perm.of": "{i}/{n}",
+  "perm.allowed": "허용됨",
+  "perm.allowedAlways": "항상 허용됨",
+  "perm.denied": "거부됨",
+  "perm.expired": "만료됨",
+  "perm.reason.host_restarted": "{host}의 호스트가 재시작되어 요청이 종료되었습니다. 메시지를 다시 보내면 재확인합니다.",
+  "perm.reason.aborted": "작업이 중단되어 요청이 종료되었습니다.",
+  "perm.showAll": "전체 보기",
+  "tool.failed": "실패",
+  "tool.more": "결과 보기",
+  "tool.less": "접기",
+  "tool.group": "도구 {n}개 사용",
+  "tool.groupWorkers": "도구 {n}개 · 워커 {w}개",
+  "tool.loading": "불러오는 중…",
+  "sub.worker": "워커",
+  "sub.steps": "{n}단계",
+  "sub.running": "실행 중",
+  "sub.done": "완료",
+  "sub.failed": "실패",
+  "sub.open": "기록 보기",
+  "turn.footer": "{model} · {effort} · {dur}",
+  "turn.failed": "이번 턴이 실패했습니다: {error}",
+  "queue.pending": "연결 시 전송",
+  "queue.sending": "보내는 중…",
+  "notice.host_restarted": "호스트가 다시 시작되어 이 턴이 중단되었습니다.",
+  "notice.interrupted": "중단되었습니다.",
+  "notice.resumed": "이전 대화를 다시 시작했습니다.",
+  "notice.desktop_open": "Claude 앱에서 열려 있는 세션이라 지금은 휴대폰에서 입력할 수 없습니다.",
+  "notice.desktop_blocked": "Claude 앱에서 열려 있는 세션이라 지금은 휴대폰에서 입력할 수 없습니다. {text}",
+  "notice.desktop_bridge": "Remote Control로 Claude 앱과 같은 대화를 이어갑니다.",
+  "perm.reason.cancelled": "{host}에서 요청이 취소되었거나 이미 응답되었습니다.",
+  "notice.desktop_resumed": "Claude 앱에서 이 대화를 다시 열면 휴대폰에서 이어 간 내용이 보입니다.",
+  "notice.model_changed": "모델이 변경되었습니다: {text}",
+  "notice.api_retry": "모델 서버 응답이 지연되어 재시도 중입니다.",
+  "notice.router_down": "라우터가 응답하지 않습니다.",
+  "folder.title": "폴더",
+  "folder.recent": "최근 폴더",
+  "folder.browse": "찾아보기",
+  "folder.here": "이 폴더에서 시작",
+  "folder.filter": "이름으로 필터링",
+  "folder.empty": "하위 폴더가 없습니다",
+  "folder.up": "상위 폴더",
+  "folder.truncated": "폴더 수가 많아 상위 {n}개만 표시합니다",
+  "model.title": "모델",
+  "model.effort": "추론 강도",
+  "model.recent": "최근",
+  "model.unusable": "로그인 필요",
+  "model.done": "이 모델 선택",
+  "model.noEffort": "이 모델은 추론 강도를 지원하지 않습니다",
+  "history.loading": "이전 대화 불러오는 중…",
+  "history.start": "대화 시작",
+  "tasks.running": "실행 중인 작업 {n}개",
+  "running.for": "{t} 동안 작업 중",
+  "running.lastSeen": "{time} 마지막 확인 시 작업 중이었습니다",
+  "effort.none": "없음",
+  "effort.minimal": "최소",
+  "effort.low": "낮음",
+  "effort.medium": "중간",
+  "effort.high": "높음",
+  "effort.xhigh": "매우 높음",
+  "effort.max": "최대",
+  "effort.ultra": "울트라",
+  "a11y.back": "뒤로",
+  "a11y.settings": "설정",
+  "a11y.close": "닫기",
+  "error.cwd": "해당 폴더를 열 수 없습니다",
+  "error.generic": "오류가 발생했습니다: {text}",
+  "push.title": "알림 설정",
+  "push.body": "승인이 필요하거나 작업이 완료되면 앱이 닫혀 있어도 휴대폰으로 알림을 보냅니다.",
+  "push.on": "알림 켜기",
+  "push.later": "나중에",
+  "push.install": "iPhone에서는 홈 화면에 추가된 웹 앱에서만 웹 푸시 알림을 받을 수 있습니다. Safari 공유 버튼 → ‘홈 화면에 추가’ 후, 홈 화면의 Ripple로 여세요.",
+  "push.denied": "기기에서 알림이 차단되어 있습니다. 설정 → 알림 → Ripple에서 허용해 주세요.",
+  "push.insecure": "알림 기능은 HTTPS 주소에서만 동작합니다. {host}에서 릴레이 페어링 링크(QR)로 여세요.",
+  "push.done": "알림이 활성화되었습니다",
+  "push.failed": "알림 설정 실패: {text}",
+} as const;
+
+export type Key = keyof typeof ko;
+
+const en: Record<Key, string> = {
+  "app.name": "Ripple Remote",
+  "image.view": "View full image",
+  "image.unavailable": "Image unavailable",
+  /** What copy calls the connected computer before its name is known (and on the pair screen). */
+  "host.fallback": "computer",
+  "conn.open": "Connected",
+  "conn.connecting": "Connecting…",
+  "conn.retryIn": "Reconnecting in {s}s",
+  "conn.retrying": "Reconnecting…",
+  "conn.offline": "Phone offline",
+  "conn.lost.title": "Can't reach your {host}",
+  "conn.lost.body": "No answer for {ago}. Sessions may still be running on your {host}; everything you missed arrives once it's back.",
+  "conn.offline.title": "This phone is offline",
+  "conn.offline.body": "It reconnects as soon as the network is back. Messages you write meanwhile are kept and sent then.",
+  "conn.retryNow": "Retry now",
+  "conn.lastSeen": "Last seen {time}",
+  "conn.denied.title": "This phone was unpaired",
+  "conn.denied.body": "Show a new QR on your {host} and scan it again.",
+  "conn.router": "Your {host} answers but ClaudeRipple's router does not. New requests fail until it is back.",
+  "conn.desktop": "Sending to and approving in Claude app sessions does not work right now. {problem}",
+  "conn.stale": "What you see is as of {time}",
+  "pair.title": "Connect to your {host}",
+  "pair.step1": "On your {host}, open the ClaudeRipple dashboard and go to",
+  "pair.where": "Phone › Show QR code",
+  "pair.step2": "Scan the QR it shows with this phone's camera",
+  "pair.step3": "Add the page to your Home Screen to open it like an app",
+  "pair.paste": "A Home Screen app does not share Safari's pairing from the QR. Copy the link from the dashboard's Phone view and paste it here.",
+  "pair.connect": "Connect",
+  "pair.badLink": "That is not a pairing link. Paste the whole #pair=… link copied from the dashboard's Phone view.",
+  "pair.note": "It connects through the relay from anywhere, with notifications. Conversations are end-to-end encrypted.",
+  "home.title": "Sessions",
+  "home.waiting": "Needs you",
+  "home.active": "Running",
+  "home.recent": "Recent",
+  "home.desktop": "Claude app sessions",
+  "session.readOnly": "This session was written on your {host}. It is read-only.",
+  "home.empty.title": "Start your first session",
+  "home.empty.body": "Pick a folder and a model, write what to do below, and it starts on your {host}.",
+  "home.more": "Show more",
+  "group.input": "Needs input",
+  "group.failed": "Failed",
+  "group.review": "To review",
+  "group.working": "Working",
+  "group.done": "Done",
+  "home.byStatus": "By status",
+  "home.byFolder": "By folder",
+  "home.showArchived": "Archived",
+  "home.markUnread": "Mark unread",
+  "home.archive": "Archive",
+  "home.unarchive": "Unarchive",
+  "home.pending": "{n} waiting",
+  "folder.new": "New folder",
+  "folder.newName": "Folder name",
+  "folder.create": "Create",
+  "isolation.title": "Isolation",
+  "isolation.local": "Local",
+  "isolation.worktree": "New worktree",
+  "isolation.base": "Branch from",
+  "composer.new": "What should it do in this folder?",
+  "composer.reply": "Reply",
+  "composer.send": "Send",
+  "composer.stop": "Stop",
+  "chip.folder": "Folder",
+  "chip.model": "Model",
+  "state.starting": "Starting",
+  "state.running": "Working",
+  "state.waiting": "Needs approval",
+  "state.idle": "Done",
+  "state.stopped": "Paused",
+  "state.error": "Error",
+  "time.now": "just now",
+  "time.min": "{n}m ago",
+  "time.hour": "{n}h ago",
+  "time.day": "{n}d ago",
+  "dur.s": "{n}s",
+  "dur.m": "{n}m",
+  "dur.ms": "{m}m {s}s",
+  "dur.h": "{n}h",
+  "dur.hm": "{h}h {m}m",
+  "band.effort": "Effort",
+  "band.cache": "Cache",
+  "band.context": "Context",
+  "band.fiveHour": "5h limit",
+  "band.workers": "Workers",
+  "band.workersNone": "No other model has worked in this session yet",
+  "band.workerLine": "{n}×",
+  "band.resetsAt": "resets {time}",
+  "band.updated": "as of {time}",
+  "perm.title": "Allow {tool}?",
+  "perm.allow": "Allow",
+  "perm.deny": "Deny",
+  "perm.always": "Keep allowing in this session",
+  "perm.of": "{i}/{n}",
+  "perm.allowed": "Allowed",
+  "perm.allowedAlways": "Always allowed",
+  "perm.denied": "Denied",
+  "perm.expired": "Expired",
+  "perm.reason.host_restarted": "The host on your {host} restarted, so this request ended. Send again and it asks again.",
+  "perm.reason.aborted": "The work stopped, so this request ended.",
+  "perm.showAll": "Show all",
+  "tool.failed": "failed",
+  "tool.more": "Show result",
+  "tool.less": "Hide",
+  "tool.group": "Used {n} {n|tool|tools}",
+  "tool.groupWorkers": "{n} {n|tool|tools} · {w} {w|worker|workers}",
+  "tool.loading": "Loading…",
+  "sub.worker": "Worker",
+  "sub.steps": "{n} {n|step|steps}",
+  "sub.running": "working",
+  "sub.done": "done",
+  "sub.failed": "failed",
+  "sub.open": "Show log",
+  "turn.footer": "{model} · {effort} · {dur}",
+  "turn.failed": "This turn failed: {error}",
+  "queue.pending": "Sends when connected",
+  "queue.sending": "Sending…",
+  "notice.host_restarted": "The host restarted, so this turn was stopped.",
+  "notice.interrupted": "Stopped.",
+  "notice.resumed": "Resumed the earlier conversation.",
+  "notice.desktop_open": "This session is open in the Claude app and cannot currently accept phone input.",
+  "notice.desktop_blocked": "This session is open in the Claude app and cannot currently accept phone input. {text}",
+  "notice.desktop_bridge": "Remote Control continues the same conversation in the Claude app.",
+  "perm.reason.cancelled": "The request was cancelled or already answered on your {host}.",
+  "notice.desktop_resumed": "When you reopen this conversation in the Claude app, it will show what you continue on your phone.",
+  "notice.model_changed": "Model changed: {text}",
+  "notice.api_retry": "The model server didn't answer; retrying.",
+  "notice.router_down": "The router isn't answering.",
+  "folder.title": "Folder",
+  "folder.recent": "Recent folders",
+  "folder.browse": "Browse",
+  "folder.here": "Start in this folder",
+  "folder.filter": "Filter by name",
+  "folder.empty": "No folders inside",
+  "folder.up": "Up",
+  "folder.truncated": "Many folders; showing the first {n}",
+  "model.title": "Model",
+  "model.effort": "Effort",
+  "model.recent": "Recent",
+  "model.unusable": "Sign-in needed",
+  "model.done": "Use this model",
+  "model.noEffort": "This model takes no effort level",
+  "history.loading": "Loading earlier messages…",
+  "history.start": "Start of conversation",
+  "tasks.running": "{n} {n|task|tasks} running",
+  "running.for": "Working for {t}",
+  "running.lastSeen": "Was working when last seen at {time}",
+  "effort.none": "none",
+  "effort.minimal": "minimal",
+  "effort.low": "low",
+  "effort.medium": "medium",
+  "effort.high": "high",
+  "effort.xhigh": "x-high",
+  "effort.max": "max",
+  "effort.ultra": "ultra",
+  "a11y.back": "Back",
+  "a11y.settings": "Settings",
+  "a11y.close": "Close",
+  "error.cwd": "That folder can't be opened",
+  "error.generic": "Something went wrong: {text}",
+  "push.title": "Get notified",
+  "push.body": "When a session needs your OK or finishes, your phone tells you — even with the app closed.",
+  "push.on": "Turn on notifications",
+  "push.later": "Later",
+  "push.install": "On iPhone, notifications only reach an app added to the Home Screen. Tap Share → ‘Add to Home Screen’ in Safari, then open Ripple from the Home Screen.",
+  "push.denied": "Notifications are blocked on this phone. Allow them in Settings → Notifications → Ripple.",
+  "push.insecure": "Notifications need an https address. Open the relay pairing link (QR) from your {host}.",
+  "push.done": "Notifications are on",
+  "push.failed": "Couldn't turn on notifications: {text}",
+};
+
+export const dictionaries: Record<Lang, Record<Key, string>> = { ko, en };
+
+let current: Lang = "ko";
+
+export function pickLang(navLangs: readonly string[], stored: string | null): Lang {
+  if (stored === "ko" || stored === "en") return stored;
+  for (const l of navLangs) {
+    if (l.toLowerCase().startsWith("ko")) return "ko";
+    if (l.toLowerCase().startsWith("en")) return "en";
+  }
+  return "ko";
+}
+
+export function setLang(lang: Lang): void { current = lang; }
+export function lang(): Lang { return current; }
+
+export function t(key: Key, vars?: Record<string, string | number>): string {
+  let s: string = dictionaries[current][key] ?? key;
+  // `{host}` is the connected computer's name. Every call site that has a HostInfo passes it;
+  // the rest get the neutral fallback so no copy ever hardcodes a platform.
+  if (s.includes("{host}")) s = s.replaceAll("{host}", String(vars?.host ?? dictionaries[current]["host.fallback"]));
+  if (vars) for (const [k, v] of Object.entries(vars)) s = s.replaceAll(`{${k}}`, String(v));
+  // `{n|tool|tools}` picks the singular when that count is 1 (English needs it; Korean never uses it).
+  return s.replace(/\{(\w+)\|([^|}]*)\|([^}]*)\}/g, (_, k: string, one: string, other: string) => (Number(vars?.[k]) === 1 ? one : other));
+}

package/dist/remote/web/icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56 56"><rect width="56" height="56" rx="12.6" fill="#6a56d6"/><g transform="translate(9.8 10.6) scale(0.65)"><path d="M24.7 12.29C24.2 6.2 29.2 2.4 35 2.6C39.6 2.8 42.6 6.2 41.6 9.8C40.6 8 38.6 7 36.8 7.6C35 8.2 35 11 36.33 13.92Z" fill="#fff"/><circle cx="28" cy="31" r="16.5" fill="none" stroke="#fff" stroke-width="5"/><path d="M49.47 21.44A23.5 23.5 0 0 1 49.47 40.56M6.53 40.56A23.5 23.5 0 0 1 6.53 21.44" fill="none" stroke="#fff" stroke-width="2.4" stroke-linecap="round"/><rect x="20.6" y="26.2" width="3.6" height="5.6" rx="1.8" fill="#fff"/><rect x="31.8" y="26.2" width="3.6" height="5.6" rx="1.8" fill="#fff"/><path d="M24.8 36.2q3.2 2.6 6.4 0" fill="none" stroke="#fff" stroke-width="2.2" stroke-linecap="round"/></g></svg>

package/dist/remote/web/index.html

@@ -0,0 +1,24 @@
+<!doctype html>
+<html lang="ko">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, interactive-widget=resizes-content">
+<meta name="theme-color" content="#f5f4f1" media="(prefers-color-scheme: light)">
+<meta name="theme-color" content="#141413" media="(prefers-color-scheme: dark)">
+<meta name="apple-mobile-web-app-capable" content="yes">
+<meta name="mobile-web-app-capable" content="yes">
+<meta name="apple-mobile-web-app-status-bar-style" content="default">
+<meta name="apple-mobile-web-app-title" content="Ripple">
+<meta name="referrer" content="no-referrer">
+<title>Ripple Remote</title>
+<link rel="manifest" href="manifest.webmanifest">
+<link rel="icon" href="icon.svg" type="image/svg+xml">
+<link rel="apple-touch-icon" href="icon.svg">
+<link rel="stylesheet" href="style.css">
+</head>
+<body>
+<div class="app" id="app"></div>
+<script src="vendor/nacl-fast.min.js"></script>
+<script type="module" src="app.ts"></script>
+</body>
+</html>

package/dist/remote/web/manifest.webmanifest

@@ -0,0 +1,10 @@
+{
+  "name": "Ripple Remote",
+  "short_name": "Ripple",
+  "start_url": "./",
+  "scope": "./",
+  "display": "standalone",
+  "background_color": "#f5f4f1",
+  "theme_color": "#6a56d6",
+  "icons": [{ "src": "icon.svg", "sizes": "any", "type": "image/svg+xml", "purpose": "any maskable" }]
+}

package/dist/remote/web/mascot.ts

@@ -0,0 +1,60 @@
+// 리플이 v2 (물마루): ring body + wave-crest forelock, on the 56-unit grid of
+// design-drafts/ripple-char-v2.html. The face is always ink and the tone lives in the body, so
+// light and dark differ only by tokens. Used sparingly: empty and connection states.
+
+export type Face = "calm" | "pleased" | "sleepy" | "uneasy" | "going" | "sorry";
+
+const CREST_UP = "M24.7 12.29C24.2 6.2 29.2 2.4 35 2.6C39.6 2.8 42.6 6.2 41.6 9.8C40.6 8 38.6 7 36.8 7.6C35 8.2 35 11 36.33 13.92Z";
+const CREST_SHORT = "M24.7 12.29C25 8.4 28.4 6.4 32 6.6C34.8 6.8 36.8 8.4 36.8 10.2C36 9.6 35.2 9.8 34.9 10.6C34.7 11.6 35.4 12.8 36.33 13.92Z";
+const CREST_WIND = "M24.7 12.29C25.6 6.4 31.6 3.6 38 4C42 4.2 44.6 6 45.2 8.4C43.4 7.4 40.8 7.4 38.8 8.4C37.2 9.4 36 11.6 36.33 13.92Z";
+const CREST_WILT = "M24.7 12.29C25.4 6 31.4 3.8 36.6 4.6C41.6 5.4 44.4 9.6 43.6 14.6C42.4 12 40.2 10.6 38.2 11C37.2 11.4 36.6 12.6 36.33 13.92Z";
+
+const line = (d: string, color: string, w: number, extra = ""): string =>
+  `<path d="${d}" fill="none" stroke="var(--${color})" stroke-width="${w}" stroke-linecap="round" stroke-linejoin="round"${extra}/>`;
+const ears = (tone: string, dim: boolean): string => {
+  const o = dim ? ` stroke-opacity="0.4"` : "";
+  return line("M49.47 21.44A23.5 23.5 0 0 1 49.47 40.56", tone, 2.4, o) + line("M6.53 40.56A23.5 23.5 0 0 1 6.53 21.44", tone, 2.4, o);
+};
+const eyes = (x1: number, x2: number, y: number, h: number): string =>
+  `<rect x="${x1}" y="${y}" width="3.6" height="${h}" rx="1.8" fill="var(--ink)"/><rect x="${x2}" y="${y}" width="3.6" height="${h}" rx="1.8" fill="var(--ink)"/>`;
+const ring = (tone: string, extra = ""): string =>
+  `<circle cx="28" cy="31" r="16.5" fill="none" stroke="var(--${tone})" stroke-width="5"${extra}/>`;
+const crest = (d: string, tone: string): string => `<path d="${d}" fill="var(--${tone})"/>`;
+const drop = (d: string): string => `<path d="${d}" fill="var(--muted)"/>`;
+
+const FACES: Record<Face, string> = {
+  calm: crest(CREST_UP, "accent") + ring("accent") + ears("accent", false) + eyes(20.6, 31.8, 26.2, 5.6) + line("M24.8 36.2q3.2 2.6 6.4 0", "ink", 2.2),
+  pleased: crest(CREST_UP, "ok") + ring("ok") + ears("ok", false) + line("M20 30q2.4 -3.4 4.8 0", "ink", 2.2) + line("M31.2 30q2.4 -3.4 4.8 0", "ink", 2.2) +
+    `<path d="M23.8 35.4h8.4a4.2 4.2 0 0 1 -8.4 0z" fill="var(--ink)"/>`,
+  sleepy: `<g opacity="0.45">${crest(CREST_SHORT, "accent")}${ring("accent")}</g>` + line("M20 29q2.4 2.2 4.8 0", "ink", 2.2) + line("M31.2 29q2.4 2.2 4.8 0", "ink", 2.2) +
+    line("M26.6 37.2q1.4 1 2.8 0", "ink", 2.2) + line("M44.4 4.6h4l-4 4.4h4", "muted", 1.6) + line("M50 10.6h2.8l-2.8 3h2.8", "muted", 1.3, ` opacity=".7"`),
+  uneasy: crest(CREST_UP, "warn") + ring("faint") + line("M28 14.5A16.5 16.5 0 1 1 13.07 23.97", "warn", 5) + ears("warn", true) + eyes(20.6, 31.8, 26.9, 5) +
+    line("M19.4 24.4L25 22.4", "ink", 2) + line("M36.6 24.4L31 22.4", "ink", 2) + line("M22.9 37.2q1.275 -1.7 2.55 0t2.55 0t2.55 0t2.55 0", "ink", 2.2) +
+    drop("M46.6 13.8q-2.3 3.1 -2.3 4.5a2.3 2.3 0 0 0 4.6 0q0 -1.4 -2.3 -4.5z"),
+  going: crest(CREST_WIND, "accent") + ring("accent", ` stroke-dasharray="9.2 3.76" transform="rotate(-99 28 31)"`) + ears("accent", true) + eyes(22.2, 33.4, 26.2, 5.6) +
+    line("M26.6 37.2q1.4 1 2.8 0", "ink", 2.2),
+  sorry: crest(CREST_WILT, "bad") + ring("bad") + eyes(20.6, 31.8, 27.6, 4.4) + line("M19.2 24.8L24.6 22.2", "ink", 2) + line("M36.8 24.8L31.4 22.2", "ink", 2) +
+    line("M24.8 38.4q3.2 -2.6 6.4 0", "ink", 2.2) + drop("M36.4 33.2q-1.84 2.48 -1.84 3.6a1.84 1.84 0 0 0 3.68 0q0 -1.12 -1.84 -3.6z"),
+};
+
+export function ripple(face: Face, size: number, label = ""): string {
+  const a11y = label ? `role="img" aria-label="${label}"` : `aria-hidden="true"`;
+  return `<svg class="ripple" width="${size}" height="${size}" viewBox="0 0 56 56" ${a11y}>${FACES[face]}</svg>`;
+}
+
+/**
+ * The small state glyph in lists and headers: the same ring, no face. Dashed = in progress,
+ * warn = needs you, ok = done, faint = paused, bad = error (the mascot's own prop rules).
+ */
+export function stateRing(state: string, size = 22): string {
+  // Background work only (subagents, shells): the app's dark blinking dot.
+  if (state === "background") return `<svg class="ring ring-background" width="${size}" height="${size}" viewBox="0 0 56 56" role="img" aria-label="Background work"><circle cx="28" cy="28" r="9" fill="var(--ink)"/></svg>`;
+  if (state === "unread" || state === "read") return `<svg class="ring ring-${state}" width="${size}" height="${size}" viewBox="0 0 56 56" role="img" aria-label="${state === "unread" ? "Unread activity" : "Read"}"><circle cx="28" cy="28" r="${state === "unread" ? 9 : 8}" fill="${state === "unread" ? "var(--warn)" : "none"}" stroke="var(--${state === "unread" ? "warn" : "faint"})" stroke-width="3"/></svg>`;
+  const tone = state === "waiting" ? "warn" : state === "error" ? "bad" : state === "idle" ? "ok" : state === "stopped" ? "faint" : "accent";
+  const dashed = state === "running" || state === "starting";
+  const body = dashed
+    ? `<circle cx="28" cy="31" r="16.5" fill="none" stroke="var(--${tone})" stroke-width="6" stroke-dasharray="9.2 3.76" transform="rotate(-99 28 31)"/>`
+    : `<circle cx="28" cy="31" r="16.5" fill="none" stroke="var(--${tone})" stroke-width="6"/>`;
+  const dot = state === "waiting" ? `<circle cx="28" cy="31" r="6" fill="var(--warn)"/>` : "";
+  return `<svg class="ring ring-${state}" width="${size}" height="${size}" viewBox="0 0 56 56" aria-hidden="true">${crest(state === "stopped" ? CREST_SHORT : CREST_UP, tone)}${body}${dot}</svg>`;
+}

package/dist/remote/web/md.ts

@@ -0,0 +1,78 @@
+// A small Markdown subset for model answers: fenced code, inline code, bold/italic, headings,
+// lists, quotes, tables and http(s) links. Everything is escaped first; nothing a model writes
+// becomes markup we did not choose.
+import { esc } from "./esc.ts";
+
+function inline(src: string): string {
+  const codes: string[] = [];
+  let s = src.replace(/`([^`\n]+)`/g, (_, c: string) => `\u0000${codes.push(c) - 1}\u0000`);
+  s = esc(s);
+  s = s.replace(/\*\*([^*\n]+)\*\*/g, "<strong>$1</strong>");
+  s = s.replace(/(^|[\s(])\*([^*\n]+)\*(?=[\s).,!?:;]|$)/g, "$1<em>$2</em>");
+  s = s.replace(/\[([^\]\n]+)\]\((https?:\/\/[^)\s]+)\)/g, (_, text: string, url: string) => `<a href="${url}" target="_blank" rel="noopener noreferrer">${text}</a>`);
+  return s.replace(/\u0000(\d+)\u0000/g, (_, i: string) => `<code>${esc(codes[Number(i)] ?? "")}</code>`);
+}
+
+function table(rows: string[]): string {
+  const cells = (r: string): string[] => r.replace(/^\s*\|/, "").replace(/\|\s*$/, "").split("|").map((c) => c.trim());
+  const head = cells(rows[0] ?? "");
+  const body = rows.slice(2).map(cells);
+  return `<div class="md-table"><table><thead><tr>${head.map((h) => `<th>${inline(h)}</th>`).join("")}</tr></thead><tbody>${body
+    .map((r) => `<tr>${r.map((c) => `<td>${inline(c)}</td>`).join("")}</tr>`)
+    .join("")}</tbody></table></div>`;
+}
+
+export function markdown(src: string): string {
+  const lines = src.replace(/\r\n?/g, "\n").split("\n");
+  const out: string[] = [];
+  let i = 0;
+  while (i < lines.length) {
+    const line = lines[i]!;
+    const fence = /^\s*(```+|~~~+)\s*([\w+-]*)/.exec(line);
+    if (fence) {
+      const close = fence[1]!;
+      const body: string[] = [];
+      i++;
+      while (i < lines.length && !lines[i]!.trim().startsWith(close)) body.push(lines[i++]!);
+      i++;
+      out.push(`<pre class="md-code"${fence[2] ? ` data-lang="${esc(fence[2])}"` : ""}><code>${esc(body.join("\n"))}</code></pre>`);
+      continue;
+    }
+    if (/^\s*\|.*\|\s*$/.test(line) && /^\s*\|?\s*:?-{2,}/.test(lines[i + 1] ?? "")) {
+      const rows: string[] = [];
+      while (i < lines.length && /^\s*\|.*\|\s*$/.test(lines[i]!)) rows.push(lines[i++]!);
+      out.push(table(rows));
+      continue;
+    }
+    const h = /^(#{1,4})\s+(.*)$/.exec(line);
+    if (h) {
+      const level = Math.min(4, h[1]!.length + 1);
+      out.push(`<h${level}>${inline(h[2]!)}</h${level}>`);
+      i++;
+      continue;
+    }
+    if (/^\s*([-*+]|\d+[.)])\s+/.test(line)) {
+      const ordered = /^\s*\d/.test(line);
+      const items: string[] = [];
+      while (i < lines.length && /^\s*([-*+]|\d+[.)])\s+/.test(lines[i]!)) {
+        let item = lines[i++]!.replace(/^\s*([-*+]|\d+[.)])\s+/, "");
+        while (i < lines.length && /^\s{2,}\S/.test(lines[i]!) && !/^\s*([-*+]|\d+[.)])\s+/.test(lines[i]!)) item += "\n" + lines[i++]!.trim();
+        items.push(`<li>${item.split("\n").map(inline).join("<br>")}</li>`);
+      }
+      out.push(ordered ? `<ol>${items.join("")}</ol>` : `<ul>${items.join("")}</ul>`);
+      continue;
+    }
+    if (/^\s*>/.test(line)) {
+      const quote: string[] = [];
+      while (i < lines.length && /^\s*>/.test(lines[i]!)) quote.push(lines[i++]!.replace(/^\s*>\s?/, ""));
+      out.push(`<blockquote>${markdown(quote.join("\n"))}</blockquote>`);
+      continue;
+    }
+    if (!line.trim()) { i++; continue; }
+    const para: string[] = [];
+    while (i < lines.length && lines[i]!.trim() && !/^\s*(```|~~~|#{1,4}\s|>|([-*+]|\d+[.)])\s)/.test(lines[i]!)) para.push(lines[i++]!);
+    if (para.length === 0) para.push(lines[i++]!);
+    out.push(`<p>${para.map(inline).join("<br>")}</p>`);
+  }
+  return out.join("");
+}

package/dist/remote/web/notify.ts

@@ -0,0 +1,55 @@
+// Notifications on the phone, the browser half: reading what this browser offers (the decision is
+// pushstate.ts) and subscribing. Permission may only be asked from a tap.
+import type { PushEnv } from "./pushstate.ts";
+
+export function browserPushEnv(subscribed: boolean): PushEnv {
+  const nav = navigator as Navigator & { standalone?: boolean };
+  const ios = /iPhone|iPad|iPod/.test(nav.userAgent) || (nav.platform === "MacIntel" && nav.maxTouchPoints > 1);
+  return {
+    secure: window.isSecureContext,
+    hasServiceWorker: "serviceWorker" in nav,
+    hasPush: "PushManager" in window,
+    ios,
+    standalone: matchMedia("(display-mode: standalone)").matches || nav.standalone === true,
+    permission: "Notification" in window ? Notification.permission : null,
+    subscribed,
+  };
+}
+
+export function keyBytes(b64u: string): Uint8Array<ArrayBuffer> {
+  const s = atob(b64u.replace(/-/g, "+").replace(/_/g, "/") + "=".repeat((4 - (b64u.length % 4)) % 4));
+  const out = new Uint8Array(new ArrayBuffer(s.length));
+  for (let i = 0; i < s.length; i++) out[i] = s.charCodeAt(i);
+  return out;
+}
+
+/** Whether a subscription was made with this host's key; a host with a new key needs a new one. */
+export function sameKey(sub: PushSubscription, publicKey: string): boolean {
+  const k = sub.options?.applicationServerKey;
+  if (!k) return true; // some browsers do not expose it; resubscribing every time would be worse
+  const a = new Uint8Array(k);
+  const b = keyBytes(publicKey);
+  return a.length === b.length && a.every((v, i) => v === b[i]);
+}
+
+export async function currentSubscription(): Promise<PushSubscription | null> {
+  if (!window.isSecureContext || !("serviceWorker" in navigator) || !("PushManager" in window)) return null;
+  const reg = await navigator.serviceWorker.getRegistration();
+  return (await reg?.pushManager.getSubscription()) ?? null;
+}
+
+/**
+ * Turn notifications on. Call straight from a tap: the permission prompt must be the first thing
+ * that awaits, or iOS refuses it. `hostKey` is fetched before (the host's VAPID public key).
+ */
+export async function enablePush(hostKey: () => Promise<string>, register: (sub: PushSubscriptionJSON) => Promise<void>): Promise<"on" | "denied"> {
+  const permission = await Notification.requestPermission();
+  if (permission !== "granted") return "denied";
+  const reg = await navigator.serviceWorker.ready;
+  const key = await hostKey();
+  let sub = await reg.pushManager.getSubscription();
+  if (sub && !sameKey(sub, key)) { await sub.unsubscribe(); sub = null; }
+  sub ??= await reg.pushManager.subscribe({ userVisibleOnly: true, applicationServerKey: keyBytes(key) });
+  await register(sub.toJSON());
+  return "on";
+}

package/dist/remote/web/pushstate.ts

@@ -0,0 +1,27 @@
+// Whether notifications can work on this phone — the decision only, no browser APIs, so it is
+// tested in Node (notify.ts reads the browser and does the subscribing). The rules come from the
+// platforms, not from us: a service worker (so push) needs a secure context — https, which the
+// relay gives; on iPhone, web push exists only for a site added to the Home Screen and opened from
+// there (iOS 16.4+).
+
+export type PushAvail = "on" | "off" | "denied" | "install" | "insecure" | "unsupported";
+
+export interface PushEnv {
+  secure: boolean;
+  hasServiceWorker: boolean;
+  hasPush: boolean;
+  ios: boolean;
+  standalone: boolean;
+  permission: "default" | "granted" | "denied" | null;
+  subscribed: boolean;
+}
+
+export function pushAvailability(e: PushEnv): PushAvail {
+  if (!e.secure) return "insecure";
+  // iOS Safari outside the Home Screen app has no PushManager at all; say what to do, not "unsupported".
+  if (e.ios && !e.standalone) return "install";
+  if (!e.hasServiceWorker || !e.hasPush) return "unsupported";
+  if (e.permission === "denied") return "denied";
+  if (e.permission === "granted" && e.subscribed) return "on";
+  return "off";
+}