clauderipple 0.9.5 → 0.10.0

package/dist/ui/i18n.js

@@ -14,8 +14,11 @@ const I18N = {
     "providerStatus.connected": "연결됨", "providerStatus.keyNeeded": "API 키 확인 필요", "providerStatus.loginNeeded": "로그인 필요", "providerStatus.disconnected": "연결 안 됨", "providerStatus.checking": "확인 중",
     "clients.title": "클라이언트", "clients.subtitle": "ClaudeRipple을 사용하는 애플리케이션을 설정합니다.", "clients.desktop.title": "Claude Desktop", "clients.desktop.help": "모델 피커에 프로바이더 모델을 실제 이름으로 표시할지 설정합니다.", "clients.codex.title": "Codex (앱 및 CLI)", "clients.codex.help": "Codex 설정(~/.codex/config.toml)에 ClaudeRipple 프로바이더를 추가합니다. 터미널은 `codex --profile clauderipple -m <모델>`, Codex 앱은 설정에서 clauderipple 프로바이더를 기본값으로 선택하세요.", "clients.codex.note": "활성화하면 Codex의 GPT 요청도 ClaudeRipple을 경유합니다. Codex 자체 로그인은 유지되며, ChatGPT 계정을 여러 개 추가해 두면 한 계정이 한도에 걸릴 때 로그아웃 없이 다음 계정이 이어받습니다. 아래 목록은 Codex에서 추가로 사용할 수 있는 Claude 및 Anthropic 호환 모델입니다.", "clients.codex.turnOn": "Codex에서 ClaudeRipple 사용","clients.claudeCode.title": "터미널 Claude Code", "clients.claudeCode.help": "터미널 `claude`도 동일한 라우터를 사용합니다. `/model <이름>` 명령어로 선택하세요.",
     "logs.title": "로그", "logs.requests": "요청", "logs.raw": "원본 로그", "logs.lastHour": "최근 1시간", "logs.autoscroll": "자동 스크롤", "logs.polling": "3초마다 갱신", "logs.rawPolling": "3초마다 갱신 · 최근 200줄", "logs.provider": "프로바이더", "logs.all": "전체","logs.empty": "아직 요청이 없습니다.", "logs.summary.requests": "요청 수", "logs.summary.success": "성공 / 실패", "logs.summary.input": "입력 토큰", "logs.summary.output": "출력 토큰", "logs.summary.duration": "평균 응답 시간", "logs.cacheHit": "캐시 {percent}%", "logs.th.time": "시간", "logs.th.models": "모델", "logs.th.effort": "effort", "logs.th.input": "입력", "logs.th.output": "출력", "logs.th.duration": "소요", "logs.th.status": "상태", "logs.status.ok": "성공", "logs.status.error": "오류", "logs.status.resent": "재전송", "logs.status.resentHelp": "오류가 아닙니다. 클라이언트가 해당 요청을 자체적으로 재전송했습니다.", "logs.detail.id": "요청 ID", "logs.detail.kind": "종류", "logs.detail.stop": "종료 사유", "logs.detail.uncached": "미캐시 입력", "logs.detail.cacheRead": "캐시 읽기", "logs.detail.cacheWrite": "캐시 기록", "logs.detail.note": "메모", "logs.none": "없음", "logs.seconds": "{value}초",
+    "logs.usage": "사용량", "logs.period": "기간", "logs.period.hour": "1시간", "logs.period.today": "오늘", "logs.period.7d": "7일", "logs.period.30d": "30일", "logs.period.month": "이번 달", "logs.period.all": "전체", "logs.period.custom": "직접 지정", "logs.customFrom": "시작일", "logs.customTo": "종료일", "logs.since": "기록은 {date}부터", "logs.byModel": "모델별 사용량", "logs.modelsEmpty": "이 기간에는 사용 기록이 없습니다.", "logs.th.count": "요청 수", "logs.th.avg": "평균 소요", "logs.recent": "최근 요청", "logs.recentNote": "최근 200건",
     "about.title": "정보", "about.body": "ClaudeRipple은 독립 오픈소스 프로젝트이며 Anthropic·OpenAI와 제휴·보증·후원 관계가 없습니다. Claude와 Claude Code는 Anthropic, PBC의 상표입니다.", "about.license": "라이선스: GPL-3.0",
     "providers.identityHelp": "시스템 프롬프트 시작 부분에 '너는 <모델명>이고 Claude Code를 통해 답한다'를 추가합니다. 비활성화하면 모델이 자신을 Claude로 인식할 수 있습니다.",
+    "providers.limits": "상태 바에 한도 표시",
+    "providers.limitsHelp": "ClaudeRipple 상태 바 둘째 줄에 이 프로바이더의 사용 한도를 보여 줍니다. 한도를 읽을 수 없는 프로바이더(OpenCode Go·Zen, Grok 등)는 켜도 표시되지 않습니다.",
     "picker.models": "피커 등록 모델 {count}개: {names}",
     "picker.lastAt": "Claude Desktop 최근 목록 수신 시각: {at}",
     "picker.never": "아직 Claude Desktop이 목록을 수신하지 않았습니다. 앱을 완전히 종료한 후 다시 실행하세요.",
@@ -138,6 +141,9 @@ const I18N = {
     "mod.appearance": "테마",
     "mod.dark": "다크",
     "mod.lightAppearance": "라이트",
+    "mod.skin": "스킨",
+    "mod.skinDeep": "딥",
+    "mod.skinFlat": "플랫",
     "mod.language": "언어",
     "mod.show": "표시 항목",
     "mod.part.timer": "캐시 타이머",
@@ -220,8 +226,11 @@ const I18N = {
     "providerStatus.connected": "Connected", "providerStatus.keyNeeded": "Key needed", "providerStatus.loginNeeded": "Sign-in needed", "providerStatus.disconnected": "Not connected", "providerStatus.checking": "Checking",
     "clients.title": "Clients", "clients.subtitle": "Set up the apps that use ClaudeRipple.", "clients.desktop.title": "Claude Desktop", "clients.desktop.help": "Choose whether provider models appear by real name in the model picker.", "clients.codex.title": "Codex (app and CLI)", "clients.codex.help": "Adds ClaudeRipple as a provider to Codex's config (~/.codex/config.toml). Terminal: `codex --profile clauderipple -m <model>`; Codex app: make clauderipple the default provider in that config.", "clients.codex.note": "When on, Codex's GPT requests go through ClaudeRipple too. Codex keeps its own sign-in, and with several ChatGPT accounts added, the next one takes over when one hits its limit — no sign-out. The list below is the Claude and Anthropic-compatible models Codex gains.", "clients.codex.turnOn": "Use ClaudeRipple in Codex","clients.claudeCode.title": "Terminal Claude Code", "clients.claudeCode.help": "Terminal `claude` uses the same router. Choose with `/model <name>`.",
     "logs.title": "Logs", "logs.requests": "Requests", "logs.raw": "Raw logs", "logs.lastHour": "Last hour", "logs.autoscroll": "Auto-scroll", "logs.polling": "Updates every 3s", "logs.rawPolling": "Updates every 3s · last 200 lines", "logs.provider": "Provider", "logs.all": "All","logs.empty": "No requests yet.", "logs.summary.requests": "Requests", "logs.summary.success": "Succeeded / failed", "logs.summary.input": "Input tokens", "logs.summary.output": "Output tokens", "logs.summary.duration": "Average response", "logs.cacheHit": "Cache {percent}%", "logs.th.time": "Time", "logs.th.models": "Model", "logs.th.effort": "effort", "logs.th.input": "Input", "logs.th.output": "Output", "logs.th.duration": "Duration", "logs.th.status": "Status", "logs.status.ok": "ok", "logs.status.error": "error", "logs.status.resent": "resent", "logs.status.resentHelp": "Not a failure: the client sent this request again on its own.", "logs.detail.id": "Request ID", "logs.detail.kind": "Kind", "logs.detail.stop": "Stop reason", "logs.detail.uncached": "Uncached input", "logs.detail.cacheRead": "Cache read", "logs.detail.cacheWrite": "Cache write", "logs.detail.note": "Note", "logs.none": "None", "logs.seconds": "{value}s",
+    "logs.usage": "Usage", "logs.period": "Period", "logs.period.hour": "1 hour", "logs.period.today": "Today", "logs.period.7d": "7 days", "logs.period.30d": "30 days", "logs.period.month": "This month", "logs.period.all": "All time", "logs.period.custom": "Custom", "logs.customFrom": "Start date", "logs.customTo": "End date", "logs.since": "Records start {date}", "logs.byModel": "Usage by model", "logs.modelsEmpty": "No usage in this period.", "logs.th.count": "Requests", "logs.th.avg": "Avg. duration", "logs.recent": "Recent requests", "logs.recentNote": "Last 200",
     "about.title": "About", "about.body": "ClaudeRipple is an independent open-source project, not affiliated with Anthropic or OpenAI. Claude and Claude Code are trademarks of Anthropic, PBC.", "about.license": "License: GPL-3.0",
     "providers.identityHelp": "Prepends 'You are <model>, answering through Claude Code' to the system prompt. Off, the model may believe it is Claude.",
+    "providers.limits": "Show limits in the status bar",
+    "providers.limitsHelp": "Shows this provider's usage limits on the second row of the ClaudeRipple status bar. Providers whose limits cannot be read (OpenCode Go/Zen, Grok, etc.) stay hidden even when this is on.",
     "picker.models": "{count} models in the picker: {names}",
     "picker.lastAt": "Claude Desktop last fetched the list at {at}",
     "picker.never": "Claude Desktop has not fetched the list yet. Quit it completely and open it again.",
@@ -344,6 +353,9 @@ const I18N = {
     "mod.appearance": "Appearance",
     "mod.dark": "Dark",
     "mod.lightAppearance": "Light",
+    "mod.skin": "Skin",
+    "mod.skinDeep": "Deep",
+    "mod.skinFlat": "Flat",
     "mod.language": "Language",
     "mod.show": "Show",
     "mod.part.timer": "Cache timer",
@@ -708,10 +720,30 @@ const I18N = {
     "logs.detail.note": "备注",
     "logs.none": "无",
     "logs.seconds": "{value} 秒",
+    "logs.usage": "用量",
+    "logs.period": "时间范围",
+    "logs.period.hour": "1 小时",
+    "logs.period.today": "今天",
+    "logs.period.7d": "7 天",
+    "logs.period.30d": "30 天",
+    "logs.period.month": "本月",
+    "logs.period.all": "全部",
+    "logs.period.custom": "自定义",
+    "logs.customFrom": "开始日期",
+    "logs.customTo": "结束日期",
+    "logs.since": "记录始于 {date}",
+    "logs.byModel": "按模型统计用量",
+    "logs.modelsEmpty": "此期间没有用量记录。",
+    "logs.th.count": "请求数",
+    "logs.th.avg": "平均耗时",
+    "logs.recent": "最近的请求",
+    "logs.recentNote": "最近 200 条",
     "about.title": "关于",
     "about.body": "ClaudeRipple 是一个独立的开源项目，与 Anthropic 和 OpenAI 均无关联。Claude 和 Claude Code 是 Anthropic, PBC 的商标。",
     "about.license": "许可证：GPL-3.0",
     "providers.identityHelp": "在系统提示词开头加上 'You are <model>, answering through Claude Code'。关闭时，模型可能会以为自己是 Claude。",
+    "providers.limits": "在状态栏显示额度",
+    "providers.limitsHelp": "在 ClaudeRipple 状态栏第二行显示此服务商的使用额度。无法读取额度的服务商（OpenCode Go/Zen、Grok 等）即使开启也不会显示。",
     "picker.models": "选择器中的 {count} 个模型：{names}",
     "picker.lastAt": "Claude Desktop 最后一次获取列表的时间：{at}",
     "picker.never": "Claude Desktop 尚未获取过列表。请完全退出后重新打开。",
@@ -834,6 +866,9 @@ const I18N = {
     "mod.appearance": "外观",
     "mod.dark": "深色",
     "mod.lightAppearance": "浅色",
+    "mod.skin": "皮肤",
+    "mod.skinDeep": "深海",
+    "mod.skinFlat": "平面",
     "mod.language": "语言",
     "mod.show": "显示",
     "mod.part.timer": "缓存计时",
@@ -1198,10 +1233,30 @@ const I18N = {
     "logs.detail.note": "備考",
     "logs.none": "なし",
     "logs.seconds": "{value}秒",
+    "logs.usage": "使用量",
+    "logs.period": "期間",
+    "logs.period.hour": "1時間",
+    "logs.period.today": "今日",
+    "logs.period.7d": "7日間",
+    "logs.period.30d": "30日間",
+    "logs.period.month": "今月",
+    "logs.period.all": "全期間",
+    "logs.period.custom": "期間を指定",
+    "logs.customFrom": "開始日",
+    "logs.customTo": "終了日",
+    "logs.since": "記録は{date}から",
+    "logs.byModel": "モデル別の使用量",
+    "logs.modelsEmpty": "この期間の使用記録はありません。",
+    "logs.th.count": "リクエスト数",
+    "logs.th.avg": "平均所要時間",
+    "logs.recent": "最近のリクエスト",
+    "logs.recentNote": "直近200件",
     "about.title": "このアプリについて",
     "about.body": "ClaudeRippleは独立したオープンソースプロジェクトであり、AnthropicおよびOpenAIとは提携関係にありません。ClaudeおよびClaude Codeは、Anthropic, PBCの商標です。",
     "about.license": "ライセンス：GPL-3.0",
     "providers.identityHelp": "システムプロンプトの先頭に「You are <model>, answering through Claude Code」を追加します。オフの場合、モデルが自分をClaudeだと思い込むことがあります。",
+    "providers.limits": "ステータスバーに上限を表示",
+    "providers.limitsHelp": "ClaudeRipple ステータスバーの2行目にこのプロバイダーの使用上限を表示します。上限を読み取れないプロバイダー（OpenCode Go/Zen、Grok など）はオンにしても表示されません。",
     "picker.models": "ピッカーのモデル {count} 個：{names}",
     "picker.lastAt": "Claude Desktopが最後に一覧を取得した日時：{at}",
     "picker.never": "Claude Desktopはまだ一覧を取得していません。完全に終了してから開き直してください。",
@@ -1324,6 +1379,9 @@ const I18N = {
     "mod.appearance": "テーマ",
     "mod.dark": "ダーク",
     "mod.lightAppearance": "ライト",
+    "mod.skin": "スキン",
+    "mod.skinDeep": "ディープ",
+    "mod.skinFlat": "フラット",
     "mod.language": "言語",
     "mod.show": "表示項目",
     "mod.part.timer": "キャッシュタイマー",
@@ -1688,10 +1746,30 @@ const I18N = {
     "logs.detail.note": "Nota",
     "logs.none": "Ninguno",
     "logs.seconds": "{value} s",
+    "logs.usage": "Uso",
+    "logs.period": "Período",
+    "logs.period.hour": "1 hora",
+    "logs.period.today": "Hoy",
+    "logs.period.7d": "7 días",
+    "logs.period.30d": "30 días",
+    "logs.period.month": "Este mes",
+    "logs.period.all": "Todo",
+    "logs.period.custom": "Personalizado",
+    "logs.customFrom": "Fecha de inicio",
+    "logs.customTo": "Fecha de fin",
+    "logs.since": "Registros desde el {date}",
+    "logs.byModel": "Uso por modelo",
+    "logs.modelsEmpty": "No hay uso en este período.",
+    "logs.th.count": "Solicitudes",
+    "logs.th.avg": "Duración media",
+    "logs.recent": "Solicitudes recientes",
+    "logs.recentNote": "Últimas 200",
     "about.title": "Acerca de",
     "about.body": "ClaudeRipple es un proyecto independiente de código abierto, sin afiliación con Anthropic ni con OpenAI. Claude y Claude Code son marcas comerciales de Anthropic, PBC.",
     "about.license": "Licencia: GPL-3.0",
     "providers.identityHelp": "Antepone 'You are <model>, answering through Claude Code' al prompt del sistema. Si está desactivado, el modelo puede creer que es Claude.",
+    "providers.limits": "Mostrar límites en la barra de estado",
+    "providers.limitsHelp": "Muestra los límites de uso de este proveedor en la segunda fila de la barra de estado de ClaudeRipple. Los proveedores cuyos límites no se pueden leer (OpenCode Go/Zen, Grok, etc.) no se muestran aunque esté activado.",
     "picker.models": "{count} modelos en el selector: {names}",
     "picker.lastAt": "Claude Desktop obtuvo la lista por última vez el {at}",
     "picker.never": "Claude Desktop aún no ha obtenido la lista. Ciérralo por completo y vuelve a abrirlo.",
@@ -1814,6 +1892,9 @@ const I18N = {
     "mod.appearance": "Apariencia",
     "mod.dark": "Oscuro",
     "mod.lightAppearance": "Claro",
+    "mod.skin": "Estilo",
+    "mod.skinDeep": "Profundo",
+    "mod.skinFlat": "Plano",
     "mod.language": "Idioma",
     "mod.show": "Mostrar",
     "mod.part.timer": "Temporizador de caché",
@@ -2178,10 +2259,30 @@ const I18N = {
     "logs.detail.note": "Observação",
     "logs.none": "Nenhum",
     "logs.seconds": "{value}s",
+    "logs.usage": "Uso",
+    "logs.period": "Período",
+    "logs.period.hour": "1 hora",
+    "logs.period.today": "Hoje",
+    "logs.period.7d": "7 dias",
+    "logs.period.30d": "30 dias",
+    "logs.period.month": "Este mês",
+    "logs.period.all": "Tudo",
+    "logs.period.custom": "Personalizado",
+    "logs.customFrom": "Data inicial",
+    "logs.customTo": "Data final",
+    "logs.since": "Registros desde {date}",
+    "logs.byModel": "Uso por modelo",
+    "logs.modelsEmpty": "Nenhum uso neste período.",
+    "logs.th.count": "Requisições",
+    "logs.th.avg": "Duração média",
+    "logs.recent": "Requisições recentes",
+    "logs.recentNote": "Últimas 200",
     "about.title": "Sobre",
     "about.body": "O ClaudeRipple é um projeto open source independente, sem afiliação com a Anthropic ou a OpenAI. Claude e Claude Code são marcas comerciais da Anthropic, PBC.",
     "about.license": "Licença: GPL-3.0",
     "providers.identityHelp": "Insere 'You are <model>, answering through Claude Code' no início do prompt de sistema. Desativado, o modelo pode achar que é o Claude.",
+    "providers.limits": "Mostrar limites na barra de status",
+    "providers.limitsHelp": "Mostra os limites de uso deste provedor na segunda linha da barra de status do ClaudeRipple. Provedores cujos limites não podem ser lidos (OpenCode Go/Zen, Grok, etc.) não aparecem mesmo com isto ativado.",
     "picker.models": "{count} modelos no seletor: {names}",
     "picker.lastAt": "O Claude Desktop buscou a lista pela última vez em {at}",
     "picker.never": "O Claude Desktop ainda não buscou a lista. Encerre-o por completo e abra-o de novo.",
@@ -2304,6 +2405,9 @@ const I18N = {
     "mod.appearance": "Aparência",
     "mod.dark": "Escuro",
     "mod.lightAppearance": "Claro",
+    "mod.skin": "Estilo",
+    "mod.skinDeep": "Profundo",
+    "mod.skinFlat": "Plano",
     "mod.language": "Idioma",
     "mod.show": "Mostrar",
     "mod.part.timer": "Timer do cache",
@@ -2375,6 +2479,86 @@ const I18N = {
   },
 };
 
+// Phone control vocabulary stays together across the dashboard's six languages.
+Object.assign(I18N.ko, {
+  "nav.phone": "휴대폰", "phone.subtitle": "Ripple Remote 앱을 연결하고 휴대폰 연결과 알림을 관리합니다.",
+  "phone.refresh": "새로고침", "phone.status": "연결 상태", "phone.host": "원격 호스트", "phone.running": "실행 중", "phone.stopped": "중지됨",
+  "phone.mode": "연결 방식", "phone.relayStatus": "Relay — 어디서나 + 알림", "phone.directStatus": "같은 네트워크", "phone.localStatus": "꺼짐",
+  "phone.notifications": "알림", "phone.ready": "준비됨", "phone.needsRelay": "Relay 필요", "phone.install": "저장소 폴더의 터미널에서 호스트를 설치·시작하세요.",
+  "phone.pairing": "휴대폰 연결 (QR)", "phone.scan": "휴대폰 카메라로 스캔", "phone.showQr": "QR 코드 보기", "phone.copyLink": "링크 복사", "phone.copied": "링크를 복사했습니다.", "phone.copyFailed": "링크를 복사하지 못했습니다. 브라우저의 클립보드 권한을 확인하세요.", "phone.qrAlt": "Ripple Remote 연결 QR 코드",
+  "phone.qrWarning": "코드와 링크에는 페어링 키가 들어 있습니다. 본인 휴대폰에만 보여 주세요.", "phone.unreachable": "현재 이 컴퓨터에서만 연결됩니다. 휴대폰 연결을 위해 아래에서 Relay 또는 네트워크 연결을 설정하세요.",
+  "phone.settings": "휴대폰 접속", "phone.choice.relay": "켜기 — Relay (권장)", "phone.help.relay": "어디서나 연결되고 알림도 받습니다. 대화는 종단간 암호화됩니다.", "phone.choice.local": "끄기", "phone.help.local": "휴대폰에서 이 컴퓨터에 연결할 수 없습니다.",
+  "phone.apply": "변경 사항 적용",
+  "phone.restartRequired": "호스트를 다시 시작해야 적용됩니다", "phone.restart": "재시작", "phone.restartConfirm": "호스트를 다시 시작하시겠습니까? 휴대폰 연결과 진행 중인 원격 작업이 중단될 수 있습니다.", "phone.restarting": "호스트를 재시작했습니다. 잠시 후 상태를 확인합니다.", "phone.manualRestart": "이 운영체제에서는 터미널에서 실행하세요: {command}",
+  "phone.phones": "연결된 휴대폰", "phone.connected": "연결됨", "phone.offline": "오프라인", "phone.lastSeen": "마지막 접속: {time}", "phone.unknownSeen": "마지막 접속 기록 없음", "phone.pushOn": "알림 켜짐", "phone.pushOff": "알림 꺼짐", "phone.empty": "아직 휴대폰이 없습니다. QR 코드로 연결하세요.",
+  "phone.rotate": "모든 휴대폰 연결 끊기 (새 키)", "phone.rotateConfirm": "모든 휴대폰의 연결과 알림을 해제하고 새 키를 발급하시겠습니까? 기존 QR과 링크는 무효화되며 다시 페어링해야 합니다.", "phone.rotated": "모든 휴대폰 연결을 해제하고 키를 교체했습니다.", "phone.sharedKey": "모든 휴대폰은 하나의 페어링 키를 공유합니다. 개별 연결 해제는 지원하지 않습니다.",
+});
+Object.assign(I18N.en, {
+  "nav.phone": "Phone", "phone.subtitle": "Pair Ripple Remote and manage phone connections and notifications.",
+  "phone.refresh": "Refresh", "phone.status": "Connection status", "phone.host": "Remote host", "phone.running": "Running", "phone.stopped": "Stopped",
+  "phone.mode": "Connection mode", "phone.relayStatus": "Relay — anywhere + notifications", "phone.directStatus": "Same network", "phone.localStatus": "Off",
+  "phone.notifications": "Notifications", "phone.ready": "Ready", "phone.needsRelay": "Relay required", "phone.install": "Install and start the host from a terminal in the repository folder.",
+  "phone.pairing": "Pair a phone (QR)", "phone.scan": "Scan with your phone camera", "phone.showQr": "Show QR code", "phone.copyLink": "Copy link", "phone.copied": "Link copied.", "phone.copyFailed": "Could not copy the link. Check the browser's clipboard permission.", "phone.qrAlt": "Ripple Remote pairing QR code",
+  "phone.qrWarning": "The code and link carry the pairing key. Show them only to your own phone.", "phone.unreachable": "Only this computer can connect right now. Choose Relay or a network connection below to reach it from your phone.",
+  "phone.settings": "Phone access", "phone.choice.relay": "On — Relay (recommended)", "phone.help.relay": "Connect from anywhere, with notifications. Conversations are end-to-end encrypted.", "phone.choice.local": "Off", "phone.help.local": "Phones cannot connect to this computer.",
+  "phone.apply": "Apply changes",
+  "phone.restartRequired": "Restart the host to apply changes", "phone.restart": "Restart", "phone.restartConfirm": "Restart the host? Phone connections and active remote work may be interrupted.", "phone.restarting": "Host restarted. Checking its status shortly.", "phone.manualRestart": "On this operating system, run in a terminal: {command}",
+  "phone.phones": "Connected phones", "phone.connected": "Connected", "phone.offline": "Offline", "phone.lastSeen": "Last seen: {time}", "phone.unknownSeen": "Last seen unknown", "phone.pushOn": "Notifications on", "phone.pushOff": "Notifications off", "phone.empty": "No phones yet. Pair one with the QR code.",
+  "phone.rotate": "Disconnect all phones (new key)", "phone.rotateConfirm": "Disconnect every phone, remove notifications and issue a new key? Existing QR codes and links will stop working. Each phone must pair again.", "phone.rotated": "All phones disconnected and pairing key replaced.", "phone.sharedKey": "All phones share one pairing key. Individual unpairing is not supported.",
+});
+Object.assign(I18N.zh, {
+  "nav.phone": "手机", "phone.subtitle": "配对 Ripple Remote，管理手机连接和通知。",
+  "phone.refresh": "刷新", "phone.status": "连接状态", "phone.host": "远程主机", "phone.running": "运行中", "phone.stopped": "已停止",
+  "phone.mode": "连接方式", "phone.relayStatus": "Relay — 随处连接 + 通知", "phone.directStatus": "同一网络", "phone.localStatus": "仅此电脑",
+  "phone.notifications": "通知", "phone.ready": "已就绪", "phone.needsRelay": "需要 Relay", "phone.install": "在仓库文件夹中打开终端，安装并启动主机。",
+  "phone.pairing": "配对手机 (QR)", "phone.scan": "用手机相机扫描", "phone.showQr": "显示 QR 码", "phone.copyLink": "复制链接", "phone.copied": "已复制链接。", "phone.copyFailed": "无法复制链接，请检查浏览器剪贴板权限。", "phone.qrAlt": "Ripple Remote 配对 QR 码",
+  "phone.qrWarning": "QR 码和链接包含配对密钥，仅向您自己的手机展示。", "phone.unreachable": "当前仅此电脑可连接。请在下方选择 Relay 或网络连接以连接手机。",
+  "phone.settings": "手机访问", "phone.choice.relay": "开启 — Relay（推荐）", "phone.help.relay": "随处连接并接收通知。对话端到端加密。", "phone.choice.local": "关闭", "phone.help.local": "手机无法连接到此电脑。",
+  "phone.apply": "应用更改",
+  "phone.restartRequired": "重启主机后更改生效", "phone.restart": "重启", "phone.restartConfirm": "重启主机？手机连接和正在进行的远程任务可能会中断。", "phone.restarting": "主机已重启，稍后检查状态。", "phone.manualRestart": "请在此操作系统的终端中运行：{command}",
+  "phone.phones": "已连接的手机", "phone.connected": "已连接", "phone.offline": "离线", "phone.lastSeen": "最后连接：{time}", "phone.unknownSeen": "无最后连接记录", "phone.pushOn": "通知已开启", "phone.pushOff": "通知已关闭", "phone.empty": "尚无手机，请使用 QR 码配对。",
+  "phone.rotate": "断开所有手机（新密钥）", "phone.rotateConfirm": "断开所有手机、移除通知订阅并生成新密钥？现有 QR 码和链接将失效，所有手机都需要重新配对。", "phone.rotated": "已断开所有手机并更换配对密钥。", "phone.sharedKey": "所有手机共用一个配对密钥，不支持单独解除配对。",
+});
+Object.assign(I18N.ja, {
+  "nav.phone": "スマートフォン", "phone.subtitle": "Ripple Remote をペアリングし、接続と通知を管理します。",
+  "phone.refresh": "更新", "phone.status": "接続状況", "phone.host": "リモートホスト", "phone.running": "実行中", "phone.stopped": "停止中",
+  "phone.mode": "接続方式", "phone.relayStatus": "Relay — どこからでも + 通知", "phone.directStatus": "同じネットワーク", "phone.localStatus": "このコンピュータのみ",
+  "phone.notifications": "通知", "phone.ready": "準備完了", "phone.needsRelay": "Relay が必要", "phone.install": "リポジトリのフォルダ内でターミナルを開き、ホストをインストールして起動してください。",
+  "phone.pairing": "スマートフォンの接続 (QR)", "phone.scan": "スマートフォンのカメラでスキャン", "phone.showQr": "QR コードを表示", "phone.copyLink": "リンクをコピー", "phone.copied": "リンクをコピーしました。", "phone.copyFailed": "コピーできませんでした。ブラウザのクリップボード権限を確認してください。", "phone.qrAlt": "Ripple Remote ペアリング QR コード",
+  "phone.qrWarning": "コードとリンクにはペアリングキーが含まれています。ご自身のスマートフォンにのみ見せてください。", "phone.unreachable": "現在はこのコンピュータのみ接続できます。スマートフォンから接続するには、下で Relay またはネットワーク接続を選んでください。",
+  "phone.settings": "スマートフォンからのアクセス", "phone.choice.relay": "オン — Relay（推奨）", "phone.help.relay": "どこからでも接続でき、通知も届きます。会話はエンドツーエンドで暗号化されます。", "phone.choice.local": "オフ", "phone.help.local": "スマートフォンからこのコンピュータに接続できません。",
+  "phone.apply": "変更を適用",
+  "phone.restartRequired": "適用するにはホストの再起動が必要です", "phone.restart": "再起動", "phone.restartConfirm": "ホストを再起動しますか？スマートフォンの接続と実行中のリモート作業が中断する場合があります。", "phone.restarting": "ホストを再起動しました。まもなく状態を確認します。", "phone.manualRestart": "この OS ではターミナルで実行してください：{command}",
+  "phone.phones": "接続済みスマートフォン", "phone.connected": "接続中", "phone.offline": "オフライン", "phone.lastSeen": "最終接続：{time}", "phone.unknownSeen": "最終接続の記録なし", "phone.pushOn": "通知オン", "phone.pushOff": "通知オフ", "phone.empty": "スマートフォンはまだありません。QR コードで接続してください。",
+  "phone.rotate": "すべての接続を解除（新しいキー）", "phone.rotateConfirm": "すべての接続と通知を解除し、新しいキーを発行しますか？既存の QR コードとリンクは無効になり、再ペアリングが必要です。", "phone.rotated": "すべての接続を解除し、キーを更新しました。", "phone.sharedKey": "すべての端末で一つのキーを共有します。個別のペアリング解除はできません。",
+});
+Object.assign(I18N.es, {
+  "nav.phone": "Teléfono", "phone.subtitle": "Vincula Ripple Remote y gestiona las conexiones y notificaciones del teléfono.",
+  "phone.refresh": "Actualizar", "phone.status": "Estado de conexión", "phone.host": "Host remoto", "phone.running": "En ejecución", "phone.stopped": "Detenido",
+  "phone.mode": "Modo de conexión", "phone.relayStatus": "Relay — desde cualquier lugar + avisos", "phone.directStatus": "Misma red", "phone.localStatus": "Solo este equipo",
+  "phone.notifications": "Notificaciones", "phone.ready": "Listas", "phone.needsRelay": "Requiere Relay", "phone.install": "Instala e inicia el host desde una terminal en la carpeta del repositorio.",
+  "phone.pairing": "Vincular teléfono (QR)", "phone.scan": "Escanea con la cámara del teléfono", "phone.showQr": "Mostrar código QR", "phone.copyLink": "Copiar enlace", "phone.copied": "Enlace copiado.", "phone.copyFailed": "No se pudo copiar. Revisa el permiso del portapapeles del navegador.", "phone.qrAlt": "Código QR de vinculación de Ripple Remote",
+  "phone.qrWarning": "El código y el enlace contienen la clave de vinculación. Muéstralos solo a tu propio teléfono.", "phone.unreachable": "Ahora solo puede conectarse este equipo. Elige Relay o una conexión de red para conectar tu teléfono.",
+  "phone.settings": "Acceso desde el teléfono", "phone.choice.relay": "Activado — Relay (recomendado)", "phone.help.relay": "Conéctate desde cualquier lugar, con avisos. Las conversaciones se cifran de extremo a extremo.", "phone.choice.local": "Desactivado", "phone.help.local": "Los teléfonos no pueden conectarse a este equipo.",
+  "phone.apply": "Aplicar cambios",
+  "phone.restartRequired": "Reinicia el host para aplicar los cambios", "phone.restart": "Reiniciar", "phone.restartConfirm": "¿Reiniciar el host? Las conexiones y tareas remotas activas podrían interrumpirse.", "phone.restarting": "Host reiniciado. Comprobaremos su estado en breve.", "phone.manualRestart": "En este sistema operativo, ejecuta en una terminal: {command}",
+  "phone.phones": "Teléfonos conectados", "phone.connected": "Conectado", "phone.offline": "Sin conexión", "phone.lastSeen": "Última conexión: {time}", "phone.unknownSeen": "Última conexión desconocida", "phone.pushOn": "Notificaciones activadas", "phone.pushOff": "Notificaciones desactivadas", "phone.empty": "Aún no hay teléfonos. Vincula uno con el QR.",
+  "phone.rotate": "Desconectar todos (nueva clave)", "phone.rotateConfirm": "¿Desconectar todos los teléfonos, eliminar sus avisos y emitir una nueva clave? Los QR y enlaces actuales dejarán de funcionar. Habrá que vincular cada teléfono de nuevo.", "phone.rotated": "Todos los teléfonos desconectados y clave reemplazada.", "phone.sharedKey": "Todos comparten una clave. No se admite desvincular teléfonos individualmente.",
+});
+Object.assign(I18N.pt, {
+  "nav.phone": "Celular", "phone.subtitle": "Pareie o Ripple Remote e gerencie conexões e notificações do celular.",
+  "phone.refresh": "Atualizar", "phone.status": "Status da conexão", "phone.host": "Host remoto", "phone.running": "Em execução", "phone.stopped": "Parado",
+  "phone.mode": "Modo de conexão", "phone.relayStatus": "Relay — de qualquer lugar + avisos", "phone.directStatus": "Mesma rede", "phone.localStatus": "Somente este computador",
+  "phone.notifications": "Notificações", "phone.ready": "Prontas", "phone.needsRelay": "Requer Relay", "phone.install": "Instale e inicie o host em um terminal na pasta do repositório.",
+  "phone.pairing": "Parear celular (QR)", "phone.scan": "Escaneie com a câmera do celular", "phone.showQr": "Mostrar QR code", "phone.copyLink": "Copiar link", "phone.copied": "Link copiado.", "phone.copyFailed": "Não foi possível copiar. Verifique a permissão da área de transferência do navegador.", "phone.qrAlt": "QR code de pareamento do Ripple Remote",
+  "phone.qrWarning": "O código e o link contêm a chave de pareamento. Mostre-os apenas ao seu próprio celular.", "phone.unreachable": "Por enquanto, só este computador pode se conectar. Escolha Relay ou uma conexão de rede abaixo para usar o celular.",
+  "phone.settings": "Acesso pelo celular", "phone.choice.relay": "Ativado — Relay (recomendado)", "phone.help.relay": "Conecte de qualquer lugar, com notificações. As conversas têm criptografia de ponta a ponta.", "phone.choice.local": "Desativado", "phone.help.local": "Celulares não podem se conectar a este computador.",
+  "phone.apply": "Aplicar alterações",
+  "phone.restartRequired": "Reinicie o host para aplicar as alterações", "phone.restart": "Reiniciar", "phone.restartConfirm": "Reiniciar o host? As conexões e tarefas remotas em andamento podem ser interrompidas.", "phone.restarting": "Host reiniciado. Verificaremos o status em breve.", "phone.manualRestart": "Neste sistema operacional, execute em um terminal: {command}",
+  "phone.phones": "Celulares conectados", "phone.connected": "Conectado", "phone.offline": "Offline", "phone.lastSeen": "Última conexão: {time}", "phone.unknownSeen": "Última conexão desconhecida", "phone.pushOn": "Notificações ativadas", "phone.pushOff": "Notificações desativadas", "phone.empty": "Nenhum celular ainda. Pareie um com o QR code.",
+  "phone.rotate": "Desconectar todos (nova chave)", "phone.rotateConfirm": "Desconectar todos os celulares, remover as notificações e gerar uma nova chave? Os QR codes e links atuais deixarão de funcionar. Será necessário parear cada celular novamente.", "phone.rotated": "Todos os celulares desconectados e chave substituída.", "phone.sharedKey": "Todos compartilham uma chave. Não há suporte para desemparelhar celulares individualmente.",
+});
+
 /** The languages offered, each named in itself, in the order the selector lists them. */
 const LANGUAGES = [
   ["en", "English"], ["ko", "한국어"], ["zh", "简体中文"], ["ja", "日本語"], ["es", "Español"], ["pt", "Português (BR)"],

package/dist/ui/index.html

@@ -14,6 +14,7 @@
     <button data-view="slots" class="nav-btn" type="button"><svg class="nav-icon" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 7h13M13 4l3 3-3 3M17 13H4M7 10l-3 3 3 3"/></svg><span data-i18n="nav.slots">Model mapping</span></button>
     <button data-view="providers" class="nav-btn" type="button"><svg class="nav-icon" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6.2 15.5h8.1a3.3 3.3 0 0 0 .4-6.6 4.8 4.8 0 0 0-9.2-.8 3.7 3.7 0 0 0 .7 7.4z"/></svg><span data-i18n="nav.providers">Providers</span></button>
     <button data-view="clients" class="nav-btn" type="button"><svg class="nav-icon" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3.5" y="4" width="13" height="9.5" rx="1.6"/><path d="M1.8 16.4h16.4"/></svg><span data-i18n="nav.clients">Clients</span></button>
+    <button data-view="phone" class="nav-btn" type="button"><svg class="nav-icon" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="5" y="2" width="10" height="16" rx="2"/><path d="M8.5 14.8h3"/></svg><span data-i18n="nav.phone">Phone</span></button>
     <button data-view="mod" class="nav-btn" type="button"><svg class="nav-icon" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2.5 6.5h8M14.5 6.5h3M2.5 13.5h3M9.5 13.5h8"/><circle cx="12.5" cy="6.5" r="2"/><circle cx="7.5" cy="13.5" r="2"/></svg><span class="nav-long" data-i18n="nav.mod">ClaudeRipple mod</span><span class="nav-short" data-i18n="nav.modShort">Mod</span></button>
     <button data-view="logs" class="nav-btn" type="button"><svg class="nav-icon" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7.5 5.5H17M7.5 10H17M7.5 14.5H17"/><path d="M3.5 5.5h.01M3.5 10h.01M3.5 14.5h.01" stroke-width="2.4"/></svg><span data-i18n="nav.logs">Logs</span></button>
     <button data-view="about" class="nav-btn" type="button"><svg class="nav-icon" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="10" cy="10" r="7.6"/><path d="M10 9.2v4.6"/><path d="M10 6.3h.01" stroke-width="2.2"/></svg><span data-i18n="nav.about">About</span></button>
@@ -134,6 +135,11 @@
     </section>
   </section>
 
+  <section id="view-phone" class="view">
+    <header class="page-header"><div><h1 data-i18n="nav.phone">Phone</h1><p class="page-subtitle" data-i18n="phone.subtitle"></p></div><button id="phone-refresh" class="btn secondary" type="button" data-i18n="phone.refresh">Refresh</button></header>
+    <div id="phone-content"></div>
+  </section>
+
   <section id="view-mod" class="view">
     <header class="page-header">
       <div><h1 data-i18n="nav.mod">ClaudeRipple mod</h1><p class="page-subtitle" data-i18n="mod.subtitle"></p></div>
@@ -152,15 +158,28 @@
       </div>
     </header>
     <div id="logs-requests-panel" role="tabpanel">
-      <section class="section">
-        <div class="logs-header-row"><div><h2 class="section-title" data-i18n="logs.lastHour">Last hour</h2><span class="small" data-i18n="logs.polling">Updates every 3s</span></div></div>
-        <div class="group logs-summary" id="logs-summary"></div>
-      </section>
       <section class="section">
         <div class="logs-header-row">
-          <h2 class="section-title" data-i18n="logs.requests">Requests</h2>
+          <div><h2 class="section-title" data-i18n="logs.usage">Usage</h2><span class="small" id="logs-range-caption"></span></div>
           <label class="logs-filter"><span data-i18n="logs.provider">Provider</span><select id="logs-provider"><option value="" data-i18n="logs.all">All</option></select></label>
         </div>
+        <div class="logs-period-row">
+          <div class="segmented logs-period" id="logs-period" role="radiogroup" data-i18n-title="logs.period"></div>
+          <div class="logs-custom" id="logs-custom" hidden>
+            <input type="date" id="logs-from" data-i18n-title="logs.customFrom" />
+            <span class="logs-custom-dash" aria-hidden="true">–</span>
+            <input type="date" id="logs-to" data-i18n-title="logs.customTo" />
+          </div>
+        </div>
+        <div class="group logs-summary" id="logs-summary"></div>
+      </section>
+      <section class="section">
+        <div class="logs-header-row"><h2 class="section-title" data-i18n="logs.byModel">Usage by model</h2></div>
+        <div class="group logs-table-card"><table id="models-table"><thead><tr><th data-i18n="logs.th.models">Model</th><th data-i18n="logs.th.count">Requests</th><th data-i18n="logs.th.input">Input</th><th data-i18n="logs.th.output">Output</th><th data-i18n="logs.th.avg">Avg. duration</th></tr></thead><tbody></tbody></table></div>
+        <div class="group empty-card" id="models-empty" hidden data-i18n="logs.modelsEmpty">No usage in this period.</div>
+      </section>
+      <section class="section">
+        <div class="logs-header-row"><div><h2 class="section-title" data-i18n="logs.recent">Recent requests</h2><span class="small" data-i18n="logs.recentNote">Last 200</span></div></div>
         <div class="group logs-table-card"><table id="requests-table"><thead><tr><th data-i18n="logs.th.time">Time</th><th data-i18n="logs.th.models">Model</th><th data-i18n="logs.th.effort">effort</th><th data-i18n="logs.th.input">Input</th><th data-i18n="logs.th.output">Output</th><th data-i18n="logs.th.duration">Duration</th><th data-i18n="logs.th.status">Status</th></tr></thead><tbody></tbody></table></div>
         <div class="group empty-card" id="requests-empty" hidden data-i18n="logs.empty">No requests yet.</div>
       </section>

package/dist/ui/style.css

@@ -277,6 +277,11 @@ select {
   text-overflow: ellipsis;
   cursor: pointer;
 }
+/* Native popups need an opaque surface independent of the translucent field. */
+select option, select optgroup {
+  background-color: var(--group);
+  color: var(--label);
+}
 select:disabled { opacity: 0.5; cursor: default; }
 input[type="checkbox"], input[type="radio"] { width: auto; min-height: 0; padding: 0; accent-color: var(--accent-fill); }
 input[type="checkbox"] { width: 16px; height: 16px; margin: 0; flex: 0 0 auto; }
@@ -450,6 +455,16 @@ label.check input { margin-top: 2px; }
 .picker-model > .model-window::-webkit-inner-spin-button { display: none; }
 .picker-model > .model-window:hover, .picker-model > .model-window:focus, .picker-model > .model-window:not(:placeholder-shown) { color: var(--label); background: var(--field); border-color: var(--field-edge); }
 
+/* ---- Phone --------------------------------------------------------------------------- */
+
+.phone-choice { cursor: pointer; }
+.phone-choice input { flex: 0 0 auto; }
+.phone-qr:not(:empty) { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; padding: 16px; }
+.phone-qr-image { display: block; flex: 0 0 240px; width: 240px; height: 240px; padding: 8px; background: #fff; border-radius: 8px; }
+#phone-content .cell-value input { width: 280px; max-width: 100%; }
+#phone-content code { display: block; margin-top: 6px; overflow-wrap: anywhere; }
+#phone-content > .section:first-child { margin-top: 0; }
+
 /* ---- Providers ----------------------------------------------------------------------- */
 
 .provider-workspace { display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: 28px; align-items: start; }
@@ -531,6 +546,12 @@ label.check input { margin-top: 2px; }
 .logs-filter select { width: auto; min-width: 130px; min-height: 28px; }
 .logs-table-card { overflow-x: auto; }
 .logs-table-card table { min-width: 860px; }
+/* The usage period: a segmented control, and two date fields beside it for a custom range. */
+.logs-period-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 10px; }
+.logs-custom { display: inline-flex; align-items: center; gap: 6px; }
+.logs-custom input { width: auto; min-height: 28px; padding: 3px 8px; font-size: var(--fs-foot); font-variant-numeric: tabular-nums; }
+.logs-custom-dash { color: var(--label-3); }
+#models-table { min-width: 600px; }
 
 table { width: 100%; border-collapse: collapse; font-size: var(--fs-sub); }
 th { padding: 10px 12px 8px; color: var(--label-2); font-size: var(--fs-foot); font-weight: 500; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--separator); }
@@ -854,6 +875,24 @@ a.cell { color: inherit; text-decoration: none; }
   #requests-table tr.request-detail td { display: block; }
   .request-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 
+  /* Seven periods do not fit one line on a phone: the control wraps and spans the width. */
+  .logs-period { display: flex; flex-wrap: wrap; width: 100%; }
+  .logs-period button { flex: 1 0 auto; padding: 3px 10px; }
+  .logs-custom { display: flex; width: 100%; }
+  .logs-custom input { flex: 1 1 0; min-width: 0; }
+  /* Model usage reads like the request list, each number carrying its column's name. */
+  #models-table { min-width: 0; }
+  #models-table thead { display: none; }
+  #models-table, #models-table tbody { display: block; }
+  #models-table tr { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; padding: 10px 16px; }
+  #models-table tr + tr::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; height: 1px; background: var(--separator); }
+  #models-table td { display: block; padding: 0; border: 0; }
+  #models-table td.c-model { flex: 1 1 100%; min-width: 0; }
+  #models-table td.c-count, #models-table td.c-in, #models-table td.c-out, #models-table td.c-dur { color: var(--label-2); font-size: var(--fs-cap); white-space: nowrap; }
+  #models-table td[data-label]::before { content: attr(data-label) " "; color: var(--label-3); }
+  #models-table td.c-count::after, #models-table td.c-in::after, #models-table td.c-out::after { content: "·"; margin: 0 6px; color: var(--label-3); }
+  #models-table .request-models .model { max-width: 60vw; }
+
   .modal-backdrop { place-items: end center; padding: 0; }
   .modal { width: 100%; max-height: calc(100vh - 28px); border-radius: 14px 14px 0 0; padding-bottom: env(safe-area-inset-bottom); }
   #modal-content { padding: 20px 16px 20px; }