@cjhyy/code-shell-web 0.8.0

package/dist/hooks/useRemoteSocket.d.ts

@@ -0,0 +1,25 @@
+import type { MobileClientEvent, MobileServerEvent } from "@cjhyy/code-shell-core";
+export type ConnStatus = "connecting" | "authenticating" | "unpaired" | "online" | "offline";
+export type ResyncReason = "online" | "visible" | "focus" | "pageshow";
+/** A parsed server event (typed) OR a raw worker→renderer JSON-RPC line that the
+ *  caller folds through streamReducer. We surface both: typed events drive UI
+ *  state; raw lines drive the chat reducer. */
+export interface RemoteSocket {
+    status: ConnStatus;
+    deviceName: string;
+    /** Monotonic id of the currently authenticated socket. */
+    connectionGeneration: number;
+    /** Send only on an authenticated socket, optionally requiring the captured generation. */
+    send: (event: MobileClientEvent, expectedGeneration?: number) => boolean;
+    /** Manually drop credentials and return to the pairing screen. */
+    logout: () => void;
+}
+export interface RemoteSocketHandlers {
+    /** A typed server event (auth/session/approval/room/…). */
+    onServerEvent?: (event: MobileServerEvent) => void;
+    /** Any raw line (used to fold agent/streamEvent through streamReducer). */
+    onRawLine?: (raw: unknown) => void;
+    /** The transport is usable again, or the page returned from background. */
+    onResyncNeeded?: (reason: ResyncReason) => void;
+}
+export declare function useRemoteSocket(handlers: RemoteSocketHandlers): RemoteSocket;

package/dist/hooks/useRemoteSocket.js

@@ -0,0 +1,267 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { deviceStore } from "../lib/storage.js";
+import { generateSecret } from "../lib/deviceCredential.js";
+import { parsePairingToken } from "../lib/pairing.js";
+const RECONNECT_BASE_MS = 800;
+const RECONNECT_MAX_MS = 8000;
+export function useRemoteSocket(handlers) {
+    const [status, setStatus] = useState("connecting");
+    const [deviceName, setDeviceName] = useState("");
+    const [connectionGeneration, setConnectionGeneration] = useState(0);
+    const wsRef = useRef(null);
+    const connectionGenerationRef = useRef(0);
+    const retryRef = useRef(0);
+    const closedByUs = useRef(false);
+    const statusRef = useRef(status);
+    statusRef.current = status;
+    // Keep latest handlers without retriggering the connect effect.
+    const handlersRef = useRef(handlers);
+    handlersRef.current = handlers;
+    const send = useCallback((event, expectedGeneration) => {
+        const ws = wsRef.current;
+        if (!ws ||
+            ws.readyState !== WebSocket.OPEN ||
+            statusRef.current !== "online" ||
+            (expectedGeneration !== undefined && expectedGeneration !== connectionGenerationRef.current)) {
+            return false;
+        }
+        try {
+            ws.send(JSON.stringify(event));
+            return true;
+        }
+        catch {
+            return false;
+        }
+    }, []);
+    const logout = useCallback(() => {
+        deviceStore.clearId();
+        closedByUs.current = true;
+        wsRef.current?.close();
+        // Drop the pairing token from the URL and reload into the unpaired state.
+        window.history.replaceState(null, "", window.location.pathname);
+        statusRef.current = "unpaired";
+        setStatus("unpaired");
+    }, []);
+    useEffect(() => {
+        closedByUs.current = false;
+        let retryTimer;
+        let openWatchdog;
+        /** Schedule a reconnect with jittered exponential backoff. Cancels any
+         *  pending timer so a manual/event-driven reconnect can pre-empt it. */
+        const scheduleReconnect = () => {
+            if (closedByUs.current)
+                return;
+            if (retryTimer)
+                clearTimeout(retryTimer);
+            const base = Math.min(RECONNECT_BASE_MS * 2 ** retryRef.current, RECONNECT_MAX_MS);
+            // Full jitter: random in [base/2, base] avoids thundering-herd and makes
+            // a flaky network settle instead of hammering on a fixed cadence.
+            const delay = base / 2 + Math.random() * (base / 2);
+            retryRef.current += 1;
+            retryTimer = setTimeout(connect, delay);
+        };
+        /** Force an immediate reconnect (network back / tab visible again). */
+        const reconnectNow = () => {
+            if (closedByUs.current)
+                return;
+            const ws = wsRef.current;
+            // If we already have a live, open socket, leave it alone.
+            if (ws && ws.readyState === WebSocket.OPEN)
+                return;
+            if (retryTimer)
+                clearTimeout(retryTimer);
+            retryRef.current = 0;
+            // Drop a half-open/connecting socket before redialing.
+            if (ws) {
+                ws.onclose = null;
+                ws.onerror = null;
+                try {
+                    ws.close();
+                }
+                catch {
+                    /* ignore */
+                }
+                wsRef.current = null;
+            }
+            connect();
+        };
+        const connect = () => {
+            const wsUrl = window.location.origin.replace(/^http/, "ws") + "/ws";
+            const ws = new WebSocket(wsUrl);
+            wsRef.current = ws;
+            statusRef.current = "connecting";
+            setStatus("connecting");
+            // Watchdog: a socket stuck in CONNECTING (dead network, captive portal)
+            // never fires onclose. Force-close after 10s so backoff kicks in.
+            if (openWatchdog)
+                clearTimeout(openWatchdog);
+            openWatchdog = setTimeout(() => {
+                if (ws.readyState === WebSocket.CONNECTING) {
+                    try {
+                        ws.close();
+                    }
+                    catch {
+                        /* ignore */
+                    }
+                }
+            }, 10_000);
+            ws.onopen = () => {
+                if (openWatchdog)
+                    clearTimeout(openWatchdog);
+                retryRef.current = 0;
+                const pairingToken = parsePairingToken(window.location.search);
+                const secret = deviceStore.getOrCreateSecret(() => generateSecret());
+                const name = deviceStore.getOrCreateName();
+                setDeviceName(name);
+                if (pairingToken) {
+                    statusRef.current = "authenticating";
+                    setStatus("authenticating");
+                    ws.send(JSON.stringify({
+                        type: "pair.complete",
+                        token: pairingToken,
+                        name,
+                        secretHash: secret,
+                    }));
+                }
+                else if (deviceStore.getId()) {
+                    statusRef.current = "authenticating";
+                    setStatus("authenticating");
+                    ws.send(JSON.stringify({
+                        type: "auth.device",
+                        deviceId: deviceStore.getId(),
+                        secretHash: secret,
+                    }));
+                }
+                else {
+                    statusRef.current = "unpaired";
+                    setStatus("unpaired");
+                }
+            };
+            ws.onmessage = (e) => {
+                if (wsRef.current !== ws)
+                    return;
+                let msg;
+                try {
+                    msg = JSON.parse(String(e.data));
+                }
+                catch {
+                    return;
+                }
+                const obj = msg;
+                // Auth/pair lifecycle is handled here so the hook owns the state machine.
+                if (obj.type === "pair.ok") {
+                    const device = obj.device;
+                    deviceStore.setId(device.id);
+                    setDeviceName(device.name);
+                    // Re-auth with the freshly-minted device id, then clean the URL.
+                    const secret = deviceStore.getOrCreateSecret(() => generateSecret());
+                    ws.send(JSON.stringify({ type: "auth.device", deviceId: device.id, secretHash: secret }));
+                    window.history.replaceState(null, "", window.location.pathname);
+                    return;
+                }
+                if (obj.type === "auth.ok") {
+                    const device = obj.device;
+                    if (device?.name)
+                        setDeviceName(device.name);
+                    statusRef.current = "online";
+                    setStatus("online");
+                    connectionGenerationRef.current += 1;
+                    setConnectionGeneration(connectionGenerationRef.current);
+                    handlersRef.current.onServerEvent?.(msg);
+                    handlersRef.current.onResyncNeeded?.("online");
+                    return;
+                }
+                if (obj.type === "auth.failed" || obj.type === "pair.failed") {
+                    if (obj.type === "auth.failed")
+                        deviceStore.clearId();
+                    statusRef.current = "unpaired";
+                    setStatus("unpaired");
+                    handlersRef.current.onServerEvent?.(msg);
+                    return;
+                }
+                // Typed server events carry a string `type`; raw worker lines carry a
+                // `method` (agent/streamEvent, agent/approvalRequest, …). Route both.
+                if (typeof obj.type === "string") {
+                    handlersRef.current.onServerEvent?.(msg);
+                }
+                if (typeof obj.method === "string") {
+                    handlersRef.current.onRawLine?.(msg);
+                }
+            };
+            ws.onclose = () => {
+                if (openWatchdog)
+                    clearTimeout(openWatchdog);
+                if (wsRef.current !== ws)
+                    return;
+                wsRef.current = null;
+                if (closedByUs.current)
+                    return;
+                statusRef.current = "offline";
+                setStatus("offline");
+                scheduleReconnect();
+            };
+            ws.onerror = () => {
+                // onclose handles retry; closing here makes the failure deterministic.
+                try {
+                    ws.close();
+                }
+                catch {
+                    /* ignore */
+                }
+            };
+        };
+        // Reconnect proactively when the OS reports the network is back or the tab
+        // becomes visible again (phones suspend the socket in the background — the
+        // close event often doesn't fire until the user returns).
+        const resyncOrReconnect = (reason) => {
+            const ws = wsRef.current;
+            if (ws && ws.readyState === WebSocket.OPEN && statusRef.current === "online") {
+                handlersRef.current.onResyncNeeded?.(reason);
+                return;
+            }
+            reconnectNow();
+        };
+        const onOnline = () => resyncOrReconnect("online");
+        const onVisible = () => {
+            if (document.visibilityState === "visible")
+                resyncOrReconnect("visible");
+        };
+        const onFocus = () => resyncOrReconnect("focus");
+        const onPageShow = () => resyncOrReconnect("pageshow");
+        window.addEventListener("online", onOnline);
+        window.addEventListener("focus", onFocus);
+        window.addEventListener("pageshow", onPageShow);
+        document.addEventListener("visibilitychange", onVisible);
+        connect();
+        return () => {
+            closedByUs.current = true;
+            if (retryTimer)
+                clearTimeout(retryTimer);
+            if (openWatchdog)
+                clearTimeout(openWatchdog);
+            window.removeEventListener("online", onOnline);
+            window.removeEventListener("focus", onFocus);
+            window.removeEventListener("pageshow", onPageShow);
+            document.removeEventListener("visibilitychange", onVisible);
+            // Null ALL handlers before close: onmessage/onopen call setState without the
+            // closedByUs guard the close/error paths have, so an event landing in the
+            // close window would setState on the unmounted component. (Mirrors the
+            // reconnectNow teardown above, which already nulls handlers.)
+            const ws = wsRef.current;
+            if (ws) {
+                ws.onmessage = null;
+                ws.onopen = null;
+                ws.onclose = null;
+                ws.onerror = null;
+                try {
+                    ws.close();
+                }
+                catch {
+                    /* ignore */
+                }
+                wsRef.current = null;
+            }
+        };
+    }, []);
+    return { status, deviceName, connectionGeneration, send, logout };
+}

package/dist/i18n/mobile.d.ts

@@ -0,0 +1,323 @@
+/** Mobile remote web app strings. Owns top-level key `mobile`. */
+export declare const mobile: {
+    readonly zh: {
+        readonly mobile: {
+            readonly app: {
+                readonly extendGoal: "延长目标";
+                readonly clearGoal: "清除目标";
+                readonly loadingCcSession: "正在加载 CC 会话…";
+                readonly loadingSession: "正在加载会话…";
+                readonly conversationFallback: "对话";
+                readonly desktopSession: "桌面会话";
+                readonly newSession: "新会话";
+                readonly openSessionsAria: "打开会话";
+                readonly leaveSessionAria: "退出会话";
+                readonly deviceFallback: "设备";
+                readonly logoutAria: "退出登录";
+                readonly permission: "权限";
+                readonly ccRoomObserving: "此会话当前为只读查看；请在桌面端明确接管后再发送消息。";
+            };
+            readonly approval: {
+                readonly risk: {
+                    readonly low: "低风险";
+                    readonly medium: "中风险";
+                    readonly high: "高风险";
+                };
+                readonly readSourceSummary: "读取数据源 {source} / {scope} / {resource}";
+                readonly question: "问题";
+                readonly customPlaceholder: "或输入自定义回答…";
+                readonly sendCustom: "发送自定义回答";
+                readonly rememberScope: "记住范围";
+                readonly scope: {
+                    readonly once: "仅本次";
+                    readonly session: "本会话";
+                    readonly project: "本项目";
+                };
+                readonly pathScopeLabel: "路径范围";
+                readonly pathScope: {
+                    readonly file: "此文件";
+                    readonly dir: "此目录";
+                    readonly tool: "此工具";
+                };
+                readonly allow: "允许";
+                readonly reject: "拒绝";
+            };
+            readonly cc: {
+                readonly title: "CC 会话";
+                readonly subtitle: "外部 {label} 会话";
+                readonly selectProjectFirst: "先选择一个项目。";
+                readonly probingCli: "正在检测 {label} CLI…";
+                readonly cliMissing: "未检测到 {label} CLI(需在桌面端机器的 PATH 中)。";
+                readonly loadingSessions: "正在加载 cc 会话…";
+                readonly empty: "该项目下没有 {label} 会话。";
+                readonly messageCount: "{count} 条";
+            };
+            readonly sidePane: {
+                readonly localTab: "会话";
+                readonly ccTab: "CC 会话";
+            };
+            readonly composer: {
+                readonly disconnected: "未连接";
+                readonly placeholder: "发消息…";
+                readonly stop: "停止";
+                readonly send: "发送";
+                readonly chooseImages: "从相册选择图片";
+                readonly takePhoto: "拍照";
+                readonly removeImage: "移除图片";
+                readonly uploading: "上传中…";
+                readonly tooManyImages: "每条消息最多发送 4 张图片";
+                readonly unsupportedImage: "不支持此图片格式";
+                readonly sendFailed: "图片发送失败，请重试";
+            };
+            readonly connection: {
+                readonly connectingTitle: "正在连接…";
+                readonly connectingBody: "与 CodeShell 建立通道";
+                readonly authenticatingTitle: "认证中…";
+                readonly authenticatingBody: "正在校验设备身份";
+                readonly unpairedTitle: "未配对";
+                readonly unpairedBody: "请在 CodeShell 桌面端打开「设置 → 远程」,扫码或打开配对链接。";
+                readonly offlineTitle: "连接断开";
+                readonly offlineBody: "正在自动重连…";
+            };
+            readonly format: {
+                readonly noProject: "无项目";
+                readonly justNow: "刚刚";
+                readonly minutesAgo: "{n} 分钟前";
+                readonly hoursAgo: "{n} 小时前";
+                readonly daysAgo: "{n} 天前";
+                readonly monthsAgo: "{n} 个月前";
+                readonly yearsAgo: "{n} 年前";
+            };
+            readonly notice: {
+                readonly roomMissing: "会话不存在或未就绪";
+                readonly roomError: "会话错误";
+                readonly goalExtendFailed: "延长目标失败";
+                readonly ccRoomOpenFailed: "cc 会话无法打开";
+                readonly ccRoomObserving: "此 CC 会话当前为只读查看，消息未发送";
+                readonly attachmentSendFailed: "图片发送失败：{error}";
+            };
+            readonly permissionMode: {
+                readonly default: "默认";
+                readonly acceptEdits: "自动改";
+                readonly bypassPermissions: "全放行";
+                readonly defaultDesc: "每个工具调用都要你确认";
+                readonly acceptEditsDesc: "自动放行文件编辑,其余仍确认";
+                readonly bypassDesc: "跳过所有权限确认(危险)";
+                readonly title: "选择权限模式";
+                readonly confirmBypass: "全放行模式会跳过所有权限确认。确定吗?";
+            };
+            readonly sessionList: {
+                readonly title: "会话";
+                readonly takeoverCount: "{count} 个可接管";
+                readonly refreshAria: "刷新会话";
+                readonly new: "新建";
+                readonly createHint: "新会话默认使用当前目录";
+                readonly currentProject: "当前项目 · {name}";
+                readonly noProjectConversation: "无项目对话";
+                readonly desktopCwd: "当前桌面目录";
+                readonly unboundRepo: "不绑定 repo";
+                readonly followsDesktopCwd: "跟随桌面当前 cwd";
+                readonly otherProjects: "其他项目";
+                readonly loading: "正在加载会话…";
+                readonly empty: "还没有会话。点「新建」开一个,或在桌面端开始。";
+                readonly automation: "自动";
+                readonly noProjectPath: "无项目路径";
+                readonly unreadAria: "有新内容";
+            };
+            readonly status: {
+                readonly conn: {
+                    readonly connecting: "连接中…";
+                    readonly authenticating: "认证中…";
+                    readonly unpaired: "未配对";
+                    readonly online: "在线";
+                    readonly offline: "已断开";
+                };
+                readonly run: {
+                    readonly idle: "空闲";
+                    readonly running: "运行中";
+                    readonly waiting: "待审批";
+                    readonly completed: "已完成";
+                    readonly error: "出错";
+                };
+            };
+            readonly storage: {
+                readonly browserDevice: "{platform} 浏览器";
+            };
+            readonly stream: {
+                readonly showReasoning: "显示思考";
+                readonly hideReasoning: "隐藏思考";
+                readonly subagent: "子代理";
+                readonly loading: "正在加载…";
+                readonly generating: "正在生成回复";
+                readonly emptyHint: "发个任务试试,或在侧栏打开一个 Claude Code 会话。";
+            };
+            readonly tool: {
+                readonly running: "运行中";
+                readonly failed: "失败";
+                readonly completed: "完成";
+                readonly fallbackName: "操作";
+                readonly truncated: "… (已截断)";
+            };
+        };
+    };
+    readonly en: {
+        readonly mobile: {
+            readonly app: {
+                readonly extendGoal: "Extend goal";
+                readonly clearGoal: "Clear goal";
+                readonly loadingCcSession: "Loading CC session…";
+                readonly loadingSession: "Loading conversation…";
+                readonly conversationFallback: "Conversation";
+                readonly desktopSession: "Desktop session";
+                readonly newSession: "New session";
+                readonly openSessionsAria: "Open sessions";
+                readonly leaveSessionAria: "Leave session";
+                readonly deviceFallback: "Device";
+                readonly logoutAria: "Log out";
+                readonly permission: "Permission";
+                readonly ccRoomObserving: "This session is read-only. Take it over explicitly on desktop before sending messages.";
+            };
+            readonly approval: {
+                readonly risk: {
+                    readonly low: "Low risk";
+                    readonly medium: "Medium risk";
+                    readonly high: "High risk";
+                };
+                readonly readSourceSummary: "Read data source {source} / {scope} / {resource}";
+                readonly question: "Question";
+                readonly customPlaceholder: "Or enter a custom answer…";
+                readonly sendCustom: "Send custom answer";
+                readonly rememberScope: "Remember scope";
+                readonly scope: {
+                    readonly once: "Once";
+                    readonly session: "This session";
+                    readonly project: "This project";
+                };
+                readonly pathScopeLabel: "Path scope";
+                readonly pathScope: {
+                    readonly file: "This file";
+                    readonly dir: "This directory";
+                    readonly tool: "This tool";
+                };
+                readonly allow: "Allow";
+                readonly reject: "Deny";
+            };
+            readonly cc: {
+                readonly title: "CC sessions";
+                readonly subtitle: "External {label} sessions";
+                readonly selectProjectFirst: "Select a project first.";
+                readonly probingCli: "Checking {label} CLI…";
+                readonly cliMissing: "{label} CLI was not found (it must be in PATH on the desktop machine).";
+                readonly loadingSessions: "Loading cc sessions…";
+                readonly empty: "No {label} sessions in this project.";
+                readonly messageCount: "{count} messages";
+            };
+            readonly sidePane: {
+                readonly localTab: "Sessions";
+                readonly ccTab: "CC";
+            };
+            readonly composer: {
+                readonly disconnected: "Disconnected";
+                readonly placeholder: "Message…";
+                readonly stop: "Stop";
+                readonly send: "Send";
+                readonly chooseImages: "Choose images";
+                readonly takePhoto: "Take photo";
+                readonly removeImage: "Remove image";
+                readonly uploading: "Uploading…";
+                readonly tooManyImages: "Up to 4 images can be sent per message";
+                readonly unsupportedImage: "This image format is not supported";
+                readonly sendFailed: "Could not send images; try again";
+            };
+            readonly connection: {
+                readonly connectingTitle: "Connecting…";
+                readonly connectingBody: "Opening a channel to CodeShell";
+                readonly authenticatingTitle: "Authenticating…";
+                readonly authenticatingBody: "Verifying this device";
+                readonly unpairedTitle: "Not paired";
+                readonly unpairedBody: "Open Settings → Remote in CodeShell desktop, then scan the QR code or open the pairing link.";
+                readonly offlineTitle: "Disconnected";
+                readonly offlineBody: "Reconnecting automatically…";
+            };
+            readonly format: {
+                readonly noProject: "No project";
+                readonly justNow: "Just now";
+                readonly minutesAgo: "{n} min ago";
+                readonly hoursAgo: "{n} hr ago";
+                readonly daysAgo: "{n} days ago";
+                readonly monthsAgo: "{n} mo ago";
+                readonly yearsAgo: "{n} yr ago";
+            };
+            readonly notice: {
+                readonly roomMissing: "Session does not exist or is not ready";
+                readonly roomError: "Session error";
+                readonly goalExtendFailed: "Failed to extend goal";
+                readonly ccRoomOpenFailed: "Could not open cc session";
+                readonly ccRoomObserving: "This CC session is read-only; the message was not sent";
+                readonly attachmentSendFailed: "Could not send images: {error}";
+            };
+            readonly permissionMode: {
+                readonly default: "Default";
+                readonly acceptEdits: "Auto-edit";
+                readonly bypassPermissions: "Allow all";
+                readonly defaultDesc: "Confirm every tool call";
+                readonly acceptEditsDesc: "Allow file edits automatically; confirm everything else";
+                readonly bypassDesc: "Skip all permission confirmations (dangerous)";
+                readonly title: "Choose permission mode";
+                readonly confirmBypass: "Allow all mode skips every permission confirmation. Continue?";
+            };
+            readonly sessionList: {
+                readonly title: "Sessions";
+                readonly takeoverCount: "{count} available";
+                readonly refreshAria: "Refresh sessions";
+                readonly new: "New";
+                readonly createHint: "New sessions default to the current directory";
+                readonly currentProject: "Current project · {name}";
+                readonly noProjectConversation: "No-project conversation";
+                readonly desktopCwd: "Current desktop directory";
+                readonly unboundRepo: "Do not bind a repo";
+                readonly followsDesktopCwd: "Follow desktop current cwd";
+                readonly otherProjects: "Other projects";
+                readonly loading: "Loading sessions…";
+                readonly empty: "No sessions yet. Tap “New” to start one, or start from desktop.";
+                readonly automation: "Automation";
+                readonly noProjectPath: "No project path";
+                readonly unreadAria: "New content";
+            };
+            readonly status: {
+                readonly conn: {
+                    readonly connecting: "Connecting…";
+                    readonly authenticating: "Authenticating…";
+                    readonly unpaired: "Not paired";
+                    readonly online: "Online";
+                    readonly offline: "Disconnected";
+                };
+                readonly run: {
+                    readonly idle: "Idle";
+                    readonly running: "Running";
+                    readonly waiting: "Awaiting approval";
+                    readonly completed: "Completed";
+                    readonly error: "Error";
+                };
+            };
+            readonly storage: {
+                readonly browserDevice: "{platform} browser";
+            };
+            readonly stream: {
+                readonly showReasoning: "Show reasoning";
+                readonly hideReasoning: "Hide reasoning";
+                readonly subagent: "Subagent";
+                readonly loading: "Loading…";
+                readonly generating: "Generating response";
+                readonly emptyHint: "Send a task, or open a Claude Code session from the sidebar.";
+            };
+            readonly tool: {
+                readonly running: "Running";
+                readonly failed: "Failed";
+                readonly completed: "Completed";
+                readonly fallbackName: "Operation";
+                readonly truncated: "… (truncated)";
+            };
+        };
+    };
+};