feat: remote control 支持 auto bind 功能 (#300)

* feat: acp-link 支持 --group 参数指定 channel group - 添加 --group CLI flag，校验格式 [a-zA-Z0-9_-]+ - 支持 ACP_RCS_GROUP 环境变量 fallback - 传递 channelGroupId 到 RcsUpstreamClient - 更新 README 文档说明 --group 和相关环境变量 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * fix: RCS 后端 session 复用与 group 绑定 - storeFindEnvironmentByMachineName 匹配 offline 状态，防止重连创建重复 session - registerEnvironment 复用已有 session 而非每次新建 - EnvironmentResponse 返回 channel_group_id 字段 - 注册时将 session 绑定到 group ID，支持 web UI 按 group 查询 - apiKeyAuth 不再设置 uuid，由 uuidAuth 统一处理 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * feat: Web UI Token Manager — 多 token 切换与 session 隔离 - 新增 useTokens hook 管理 localStorage token CRUD - 新增 TokenManagerDialog 弹窗组件（添加/编辑/删除/切换 token） - api client 支持Bearer token 认证，UUID 跟随 token 变化 - Navbar 添加 token 切换按钮 - 切换 token 时自动 reload，实现 session 数据隔离 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * fix: 修复 useTokens useState 初始化函数签名错误 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
2026-06-18 14:25:51 +00:00 · 2026-04-19 13:04:09 +08:00
parent 673ccd1800
commit c7bc8c8636
15 changed files with 508 additions and 22 deletions
--- a/packages/remote-control-server/web/src/App.tsx
+++ b/packages/remote-control-server/web/src/App.tsx
@@ -1,9 +1,11 @@
 import { useState, useEffect, useCallback, lazy, Suspense } from "react";
 import { Navbar } from "./components/Navbar";
 import { IdentityPanel } from "./components/IdentityPanel";
+import { TokenManagerDialog } from "./components/TokenManagerDialog";
 import { ThemeProvider } from "./lib/theme";
-import { getUuid, setUuid, apiBind } from "./api/client";
+import { getUuid, setUuid, apiBind, setActiveApiToken } from "./api/client";
 import { ACPDirectView } from "./components/ACPDirectView";
+import { useTokens } from "./hooks/useTokens";

 const Dashboard = lazy(() => import("./pages/Dashboard").then((m) => ({ default: m.Dashboard })));
 const SessionDetail = lazy(() => import("./pages/SessionDetail").then((m) => ({ default: m.SessionDetail })));
@@ -11,7 +13,18 @@ const SessionDetail = lazy(() => import("./pages/SessionDetail").then((m) => ({
 export default function App() {
  const [currentSessionId, setCurrentSessionId] = useState<string | null>(null);
  const [identityOpen, setIdentityOpen] = useState(false);
+  const [tokenDialogOpen, setTokenDialogOpen] = useState(false);
  const [acpDirect, setAcpDirect] = useState<{ url: string; token: string } | null>(null);
+  const { tokens, activeTokenId, activeLabel, activeTokenValue, setActiveTokenId, addToken, removeToken, updateToken } = useTokens();
+
+  // Sync active token to API client
+  useEffect(() => {
+    setActiveApiToken(activeTokenValue);
+  }, [activeTokenValue]);
+
+  const handleSetActiveToken = useCallback((id: string) => {
+    setActiveTokenId(id);
+  }, [setActiveTokenId]);

  // Simple hash-based router
  const parseRoute = useCallback(() => {
@@ -97,6 +110,8 @@ export default function App() {
      <div className="flex h-screen flex-col bg-surface-0 text-text-primary">
        <Navbar
          onIdentityClick={() => setIdentityOpen(true)}
+          onTokenClick={() => setTokenDialogOpen(true)}
+          activeTokenLabel={currentSessionId ? undefined : activeLabel}
          sessionTitle={currentSessionId || (acpDirect ? "ACP" : undefined)}
          onBack={(currentSessionId || acpDirect) ? navigateToDashboard : undefined}
        />
@@ -114,6 +129,17 @@ export default function App() {
        </Suspense>

        <IdentityPanel open={identityOpen} onClose={() => setIdentityOpen(false)} />
+
+        <TokenManagerDialog
+          open={tokenDialogOpen}
+          onClose={() => setTokenDialogOpen(false)}
+          tokens={tokens}
+          activeTokenId={activeTokenId}
+          onSetActive={handleSetActiveToken}
+          onAdd={addToken}
+          onRemove={removeToken}
+          onUpdate={updateToken}
+        />
      </div>
    </ThemeProvider>
  );
--- a/packages/remote-control-server/web/src/api/client.ts
+++ b/packages/remote-control-server/web/src/api/client.ts
@@ -24,11 +24,35 @@ export function setUuid(uuid: string): void {
  localStorage.setItem("rcs_uuid", uuid);
 }

+/** Active API token for Authorization header (set by useTokens) */
+let _activeToken: string | null = null;
+
+export function setActiveApiToken(token: string | null): void {
+  _activeToken = token;
+}
+
+export function getActiveApiToken(): string | null {
+  return _activeToken;
+}
+
 async function api<T>(method: string, path: string, body?: unknown): Promise<T> {
  const headers: Record<string, string> = { "Content-Type": "application/json" };
-  const uuid = getUuid();
-  const sep = path.includes("?") ? "&" : "?";
-  const url = `${BASE}${path}${sep}uuid=${encodeURIComponent(uuid)}`;
+
+  if (_activeToken) {
+    headers["Authorization"] = `Bearer ${_activeToken}`;
+  }
+
+  // When using Bearer token auth, backend derives UUID from the token — no need to send query param.
+  // Otherwise fall back to UUID auth via query param.
+  let url: string;
+  if (_activeToken) {
+    const sep = path.includes("?") ? "&" : "?";
+    url = `${BASE}${path}${sep}uuid=${encodeURIComponent(_activeToken)}`;
+  } else {
+    const uuid = getUuid();
+    const sep = path.includes("?") ? "&" : "?";
+    url = `${BASE}${path}${sep}uuid=${encodeURIComponent(uuid)}`;
+  }
  const opts: RequestInit = { method, headers };
  if (body !== undefined) opts.body = JSON.stringify(body);

--- a/packages/remote-control-server/web/src/components/Navbar.tsx
+++ b/packages/remote-control-server/web/src/components/Navbar.tsx
@@ -1,14 +1,16 @@
 import { cn } from "../lib/utils";
 import { ThemeToggle } from "../../components/ui/theme-toggle";
-import { ChevronLeft, LayoutGrid, UserPlus } from "lucide-react";
+import { ChevronLeft, LayoutGrid, UserPlus, KeyRound } from "lucide-react";

 interface NavbarProps {
  onIdentityClick: () => void;
+  onTokenClick: () => void;
+  activeTokenLabel?: string | null;
  sessionTitle?: string;
  onBack?: () => void;
 }

-export function Navbar({ onIdentityClick, sessionTitle, onBack }: NavbarProps) {
+export function Navbar({ onIdentityClick, onTokenClick, activeTokenLabel, sessionTitle, onBack }: NavbarProps) {
  return (
    <nav className="sticky top-0 z-40 border-b border-border bg-surface-1/80 backdrop-blur-md">
      <div className="mx-auto flex h-11 sm:h-12 max-w-5xl items-center justify-between px-3 sm:px-4">
@@ -51,6 +53,19 @@ export function Navbar({ onIdentityClick, sessionTitle, onBack }: NavbarProps) {
            </a>
          )}
          <ThemeToggle />
+          <button
+            onClick={onTokenClick}
+            className={cn(
+              "flex items-center gap-1 rounded-md px-2 sm:px-3 py-1.5 text-sm transition-colors",
+              activeTokenLabel
+                ? "bg-brand/10 text-brand hover:bg-brand/20"
+                : "text-text-secondary hover:bg-surface-2 hover:text-text-primary"
+            )}
+            title="Token Manager"
+          >
+            <KeyRound className="h-4 w-4" />
+            <span className="hidden sm:inline max-w-24 truncate">{activeTokenLabel || "No Token"}</span>
+          </button>
          <button
            onClick={onIdentityClick}
            className="flex items-center gap-1 rounded-md px-2 sm:px-3 py-1.5 text-sm text-text-secondary hover:bg-surface-2 hover:text-text-primary transition-colors"
--- a/packages/remote-control-server/web/src/components/TokenManagerDialog.tsx
+++ b/packages/remote-control-server/web/src/components/TokenManagerDialog.tsx
@@ -0,0 +1,217 @@
+import { useState } from "react";
+import type { TokenEntry } from "../hooks/useTokens";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+} from "../../components/ui/dialog";
+import { Check, Copy, Eye, EyeOff, Pencil, Plus, Trash2, X } from "lucide-react";
+
+interface TokenManagerDialogProps {
+  open: boolean;
+  onClose: () => void;
+  tokens: TokenEntry[];
+  activeTokenId: string | null;
+  onSetActive: (id: string) => void;
+  onAdd: (token: string, label: string) => string | null;
+  onRemove: (id: string) => void;
+  onUpdate: (id: string, label: string) => void;
+}
+
+export function TokenManagerDialog({
+  open,
+  onClose,
+  tokens,
+  activeTokenId,
+  onSetActive,
+  onAdd,
+  onRemove,
+  onUpdate,
+}: TokenManagerDialogProps) {
+  const [newToken, setNewToken] = useState("");
+  const [newLabel, setNewLabel] = useState("");
+  const [addError, setAddError] = useState("");
+  const [editingId, setEditingId] = useState<string | null>(null);
+  const [editLabel, setEditLabel] = useState("");
+  const [visibleTokenId, setVisibleTokenId] = useState<string | null>(null);
+  const [copiedId, setCopiedId] = useState<string | null>(null);
+
+  const handleCopy = (id: string, token: string) => {
+    navigator.clipboard.writeText(token).then(() => {
+      setCopiedId(id);
+      setTimeout(() => setCopiedId(null), 1500);
+    });
+  };
+
+  const handleAdd = () => {
+    const error = onAdd(newToken, newLabel);
+    if (error) {
+      setAddError(error);
+      return;
+    }
+    setNewToken("");
+    setNewLabel("");
+    setAddError("");
+  };
+
+  const handleStartEdit = (entry: TokenEntry) => {
+    setEditingId(entry.id);
+    setEditLabel(entry.label);
+  };
+
+  const handleSaveEdit = (id: string) => {
+    onUpdate(id, editLabel.trim() || "Unnamed");
+    setEditingId(null);
+  };
+
+  const handleSwitch = (id: string) => {
+    onSetActive(id);
+    onClose();
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={(o) => { if (!o) onClose(); }}>
+      <DialogContent className="max-w-md rounded-2xl border-border bg-surface-1 p-6 shadow-2xl">
+        <DialogHeader>
+          <DialogTitle className="font-display text-lg font-semibold text-text-primary">
+            Token Manager
+          </DialogTitle>
+          <DialogDescription className="text-sm text-text-muted">
+            Manage API tokens for RCS authentication.
+          </DialogDescription>
+        </DialogHeader>
+
+        {/* Token list */}
+        <div className="space-y-1 max-h-64 overflow-y-auto">
+          {tokens.map((entry) => (
+            <div key={entry.id} className="group flex items-center gap-1">
+              {editingId === entry.id ? (
+                <div className="flex flex-1 items-center gap-2 rounded-lg bg-surface-2 px-3 py-1.5">
+                  <input
+                    value={editLabel}
+                    onChange={(e) => setEditLabel(e.target.value)}
+                    onKeyDown={(e) => {
+                      if (e.key === "Enter") handleSaveEdit(entry.id);
+                      if (e.key === "Escape") setEditingId(null);
+                    }}
+                    className="flex-1 rounded border border-border bg-surface-1 px-2 py-1 text-sm text-text-primary focus:border-brand focus:outline-none"
+                    autoFocus
+                  />
+                  <button
+                    onClick={() => handleSaveEdit(entry.id)}
+                    className="text-brand hover:text-brand-light transition-colors"
+                  >
+                    <Check className="h-4 w-4" />
+                  </button>
+                  <button
+                    onClick={() => setEditingId(null)}
+                    className="text-text-muted hover:text-text-primary transition-colors"
+                  >
+                    <X className="h-4 w-4" />
+                  </button>
+                </div>
+              ) : (
+                <>
+                  <button
+                    onClick={() => handleSwitch(entry.id)}
+                    className={`flex flex-1 items-center justify-between rounded-lg px-3 py-2 text-sm transition-colors ${
+                      activeTokenId === entry.id
+                        ? "bg-brand/10 text-brand"
+                        : "text-text-secondary hover:bg-surface-2"
+                    }`}
+                  >
+                    <div className="flex flex-col items-start min-w-0">
+                      <span className="font-medium truncate w-full">{entry.label}</span>
+                      <span className="text-xs text-text-muted font-mono">
+                        {visibleTokenId === entry.id
+                          ? entry.token
+                          : `${entry.token.slice(0, 6)}${"\u2022".repeat(6)}`}
+                      </span>
+                    </div>
+                    {activeTokenId === entry.id && <Check className="h-4 w-4 flex-shrink-0" />}
+                  </button>
+                  <button
+                    onClick={() => setVisibleTokenId(visibleTokenId === entry.id ? null : entry.id)}
+                    className="rounded p-1 text-text-muted opacity-0 group-hover:opacity-100 hover:text-text-primary transition-all"
+                    title="Toggle token visibility"
+                  >
+                    {visibleTokenId === entry.id ? <EyeOff className="h-3.5 w-3.5" /> : <Eye className="h-3.5 w-3.5" />}
+                  </button>
+                  <button
+                    onClick={() => handleCopy(entry.id, entry.token)}
+                    className="rounded p-1 text-text-muted opacity-0 group-hover:opacity-100 hover:text-text-primary transition-all"
+                    title="Copy token"
+                  >
+                    {copiedId === entry.id ? <Check className="h-3.5 w-3.5 text-status-active" /> : <Copy className="h-3.5 w-3.5" />}
+                  </button>
+                  <button
+                    onClick={() => handleStartEdit(entry)}
+                    className="rounded p-1 text-text-muted opacity-0 group-hover:opacity-100 hover:text-text-primary transition-all"
+                    title="Edit label"
+                  >
+                    <Pencil className="h-3.5 w-3.5" />
+                  </button>
+                  <button
+                    onClick={() => onRemove(entry.id)}
+                    className="rounded p-1 text-text-muted opacity-0 group-hover:opacity-100 hover:text-status-error transition-all"
+                    title="Delete token"
+                  >
+                    <Trash2 className="h-3.5 w-3.5" />
+                  </button>
+                </>
+              )}
+            </div>
+          ))}
+
+          {tokens.length === 0 && (
+            <div className="py-4 text-center text-sm text-text-muted">
+              No tokens saved yet. Add one below.
+            </div>
+          )}
+        </div>
+
+        {/* Add form */}
+        <div className="border-t border-border pt-4 space-y-3">
+          <div className="text-sm font-medium text-text-secondary">Add Token</div>
+          <div className="space-y-2">
+            <input
+              type="text"
+              value={newToken}
+              onChange={(e) => {
+                setNewToken(e.target.value);
+                setAddError("");
+              }}
+              placeholder="API Token"
+              className="w-full rounded-lg border border-border bg-surface-2 px-3 py-2 text-sm text-text-primary placeholder:text-text-muted focus:border-brand focus:outline-none font-mono"
+              onKeyDown={(e) => {
+                if (e.key === "Enter") handleAdd();
+              }}
+            />
+            <div className="flex gap-2">
+              <input
+                type="text"
+                value={newLabel}
+                onChange={(e) => setNewLabel(e.target.value)}
+                placeholder="Label (optional)"
+                className="flex-1 rounded-lg border border-border bg-surface-2 px-3 py-2 text-sm text-text-primary placeholder:text-text-muted focus:border-brand focus:outline-none"
+                onKeyDown={(e) => {
+                  if (e.key === "Enter") handleAdd();
+                }}
+              />
+              <button
+                onClick={handleAdd}
+                disabled={!newToken.trim()}
+                className="rounded-lg bg-brand px-3 py-2 text-white hover:bg-brand-light disabled:opacity-50 transition-colors"
+              >
+                <Plus className="h-4 w-4" />
+              </button>
+            </div>
+          </div>
+          {addError && <div className="text-xs text-status-error">{addError}</div>}
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
--- a/packages/remote-control-server/web/src/hooks/useTokens.ts
+++ b/packages/remote-control-server/web/src/hooks/useTokens.ts
@@ -0,0 +1,120 @@
+import { useState, useCallback } from "react";
+
+export interface TokenEntry {
+  id: string;
+  token: string;
+  label: string;
+}
+
+const TOKENS_KEY = "rcs_tokens";
+const ACTIVE_TOKEN_KEY = "rcs_uuid";
+const DEFAULT_ID = "__default__";
+
+function generateId(): string {
+  return `tk_${Date.now().toString(36)}_${Math.random().toString(36).slice(2, 8)}`;
+}
+
+/** Ensure the existing rcs_uuid is present as the default token entry */
+function ensureDefault(tokens: TokenEntry[]): TokenEntry[] {
+  if (tokens.some((t) => t.id === DEFAULT_ID)) return tokens;
+  let uuid: string | null = null;
+  try {
+    uuid = localStorage.getItem("rcs_uuid");
+  } catch {
+    // ignore
+  }
+  if (!uuid) return tokens;
+  return [{ id: DEFAULT_ID, token: uuid, label: "Default" }, ...tokens];
+}
+
+function loadTokens(): TokenEntry[] {
+  let tokens: TokenEntry[] = [];
+  try {
+    const raw = localStorage.getItem(TOKENS_KEY);
+    if (raw) {
+      const parsed = JSON.parse(raw);
+      if (Array.isArray(parsed)) tokens = parsed;
+    }
+  } catch {
+    // ignore
+  }
+  return ensureDefault(tokens);
+}
+
+function loadActiveTokenId(tokens: TokenEntry[]): string {
+  // Try saved active token
+  try {
+    const saved = localStorage.getItem(ACTIVE_TOKEN_KEY);
+    if (saved && tokens.some((t) => t.id === saved)) return saved;
+  } catch {
+    // ignore
+  }
+  // Fall back to default (rcs_uuid) entry
+  const defaultEntry = tokens.find((t) => t.id === DEFAULT_ID);
+  if (defaultEntry) return defaultEntry.id;
+  // Fall back to first entry
+  return tokens[0]?.id ?? DEFAULT_ID;
+}
+
+export function useTokens() {
+  const [tokens, setTokens] = useState<TokenEntry[]>(loadTokens);
+  const [activeTokenId, setActiveTokenIdState] = useState<string>(() => loadActiveTokenId(loadTokens()));
+
+  const persistTokens = useCallback((next: TokenEntry[]) => {
+    setTokens(next);
+    try {
+      localStorage.setItem(TOKENS_KEY, JSON.stringify(next));
+    } catch {
+      // ignore
+    }
+  }, []);
+
+  const setActiveTokenId = useCallback((id: string) => {
+    setActiveTokenIdState(id);
+    try {
+      localStorage.setItem(ACTIVE_TOKEN_KEY, id);
+	  location.reload(); // Reload to ensure api client picks up new token from localStorage
+    } catch {
+      // ignore
+    }
+  }, []);
+
+  const addToken = useCallback((token: string, label: string): string | null => {
+    const trimmed = token.trim();
+    if (!trimmed) return "Token is required";
+    const entry: TokenEntry = { id: generateId(), token: trimmed, label: label.trim() || trimmed.slice(0, 8) };
+    const next = [...tokens, entry];
+    persistTokens(next);
+    return null;
+  }, [tokens, persistTokens]);
+
+  const removeToken = useCallback((id: string) => {
+    if (id === DEFAULT_ID) return; // Cannot remove default
+    const next = tokens.filter((t) => t.id !== id);
+    persistTokens(next);
+    if (activeTokenId === id) {
+      setActiveTokenId(DEFAULT_ID);
+    }
+  }, [tokens, persistTokens, activeTokenId, setActiveTokenId]);
+
+  const updateToken = useCallback((id: string, label: string) => {
+    const next = tokens.map((t) => t.id === id ? { ...t, label } : t);
+    persistTokens(next);
+  }, [tokens, persistTokens]);
+
+  const activeToken = tokens.find((t) => t.id === activeTokenId) ?? tokens[0] ?? null;
+  const activeLabel = activeToken?.label ?? "Default";
+  const activeTokenValue = activeToken?.token ?? null;
+
+  return {
+    tokens,
+    activeTokenId,
+    activeToken,
+    activeLabel,
+    activeTokenValue,
+    setActiveTokenId,
+    addToken,
+    removeToken,
+    updateToken,
+  };
+}
--- a/packages/remote-control-server/web/src/types/index.ts
+++ b/packages/remote-control-server/web/src/types/index.ts
@@ -5,6 +5,7 @@ export interface Environment {
  status: string;
  branch?: string;
  worker_type?: string;
+  channel_group_id?: string | null;
  capabilities?: Record<string, unknown> | null;
 }