botschat 0.1.4 → 0.1.7

package/packages/web/src/api.ts

@@ -5,6 +5,7 @@ import { dlog } from "./debug-log";
 const API_BASE = "/api";
 
 let _token: string | null = localStorage.getItem("botschat_token");
+let _refreshToken: string | null = localStorage.getItem("botschat_refresh_token");
 
 export function setToken(token: string | null) {
   _token = token;
@@ -12,10 +13,39 @@ export function setToken(token: string | null) {
   else localStorage.removeItem("botschat_token");
 }
 
+export function setRefreshToken(token: string | null) {
+  _refreshToken = token;
+  if (token) localStorage.setItem("botschat_refresh_token", token);
+  else localStorage.removeItem("botschat_refresh_token");
+}
+
 export function getToken(): string | null {
   return _token;
 }
 
+export function getRefreshToken(): string | null {
+  return _refreshToken;
+}
+
+/** Try to refresh the access token using the refresh token. */
+async function tryRefreshAccessToken(): Promise<boolean> {
+  if (!_refreshToken) return false;
+  try {
+    const res = await fetch(`${API_BASE}/auth/refresh`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ refreshToken: _refreshToken }),
+    });
+    if (!res.ok) return false;
+    const data = await res.json() as { token: string };
+    setToken(data.token);
+    dlog.info("API", "Access token refreshed successfully");
+    return true;
+  } catch {
+    return false;
+  }
+}
+
 async function request<T>(
   method: string,
   path: string,
@@ -44,6 +74,27 @@ async function request<T>(
     throw err;
   }
 
+  // Auto-refresh on 401 (expired access token)
+  if (res.status === 401 && _refreshToken && !path.includes("/auth/refresh")) {
+    const refreshed = await tryRefreshAccessToken();
+    if (refreshed) {
+      // Retry the original request with the new token
+      headers["Authorization"] = `Bearer ${_token}`;
+      try {
+        res = await fetch(`${API_BASE}${path}`, {
+          method,
+          headers,
+          body: body ? JSON.stringify(body) : undefined,
+          cache: "no-store",
+        });
+      } catch (err) {
+        const ms = Math.round(performance.now() - t0);
+        dlog.error("API", `✗ ${tag} — network error on retry (${ms}ms)`, String(err));
+        throw err;
+      }
+    }
+  }
+
   const ms = Math.round(performance.now() - t0);
 
   if (!res.ok) {
@@ -59,11 +110,19 @@ async function request<T>(
 }
 
 // ---- Auth ----
-export type AuthResponse = { id: string; email: string; token: string; displayName?: string };
+export type AuthResponse = { id: string; email: string; token: string; refreshToken?: string; displayName?: string };
 
 export type UserSettings = { defaultModel?: string };
 
+export type AuthConfig = {
+  emailEnabled: boolean;
+  googleEnabled: boolean;
+  githubEnabled: boolean;
+};
+
 export const authApi = {
+  /** Fetch server-side auth configuration (which methods are available). */
+  config: () => request<AuthConfig>("GET", "/auth/config"),
   register: (email: string, password: string, displayName?: string) =>
     request<AuthResponse>("POST", "/auth/register", { email, password, displayName }),
   login: (email: string, password: string) =>
@@ -168,6 +227,8 @@ export type TaskScanEntry = {
   instructions: string;
   model: string;
   enabled: boolean;
+  encrypted?: boolean;
+  iv?: string;
 };
 
 export const tasksApi = {
@@ -175,7 +236,7 @@ export const tasksApi = {
     request<{ tasks: Task[] }>("GET", `/channels/${channelId}/tasks`),
   listAll: (kind: "background" | "adhoc" = "background") =>
     request<{ tasks: TaskWithChannel[] }>("GET", `/tasks?kind=${kind}`),
-  /** Fetch OpenClaw-owned fields (schedule/instructions/model) cached in the DO. */
+  /** Fetch OpenClaw-owned fields (schedule/instructions/model) from plugin via DO (live task.scan.request, no cache). */
   scanData: () =>
     request<{ tasks: TaskScanEntry[] }>("GET", "/task-scan"),
   create: (channelId: string, data: { name: string; kind: "background" | "adhoc"; schedule?: string; instructions?: string }) =>
@@ -199,6 +260,7 @@ export type Job = {
   durationMs: number | null;
   summary: string;
   time: string;
+  encrypted?: boolean;
 };
 
 export const jobsApi = {
@@ -217,6 +279,7 @@ export type MessageRecord = {
   mediaUrl?: string;
   a2ui?: string;
   threadId?: string;
+  encrypted?: boolean;
 };
 
 export const messagesApi = {
@@ -230,7 +293,8 @@ export const messagesApi = {
 // ---- Pairing Tokens ----
 export type PairingToken = {
   id: string;
-  token: string;
+  // Full token is no longer returned by the GET endpoint (security).
+  // Only `tokenPreview` (masked) is available after creation.
   tokenPreview: string;
   label: string | null;
   lastConnectedAt: number | null;

package/packages/web/src/components/ChatWindow.tsx

@@ -474,7 +474,7 @@ export function ChatWindow({ sendMessage }: ChatWindowProps) {
 
   if (!sessionKey) {
     return (
-      <div className="flex-1 flex items-center justify-center" style={{ background: "var(--bg-surface)" }}>
+      <div className="flex-1 h-full flex items-center justify-center" style={{ background: "var(--bg-surface)" }}>
         <div className="text-center">
           <svg className="w-16 h-16 mx-auto mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1} style={{ color: "var(--text-muted)" }}>
             <path strokeLinecap="round" strokeLinejoin="round" d="M20.25 8.511c.884.284 1.5 1.128 1.5 2.097v4.286c0 1.136-.847 2.1-1.98 2.193-.34.027-.68.052-1.02.072v3.091l-3-3c-1.354 0-2.694-.055-4.02-.163a2.115 2.115 0 01-.825-.242m9.345-8.334a2.126 2.126 0 00-.476-.095 48.64 48.64 0 00-8.048 0c-1.131.094-1.976 1.057-1.976 2.192v4.286c0 .837.46 1.58 1.155 1.951m9.345-8.334V6.637c0-1.621-1.152-3.026-2.76-3.235A48.455 48.455 0 0011.25 3c-2.115 0-4.198.137-6.24.402-1.608.209-2.76 1.614-2.76 3.235v6.226c0 1.621 1.152 3.026 2.76 3.235.577.075 1.157.14 1.74.194V21l4.155-4.155" />
@@ -493,7 +493,7 @@ export function ChatWindow({ sendMessage }: ChatWindowProps) {
   return (
     <div
       ref={dropZoneRef}
-      className="flex-1 flex flex-col min-w-0 relative"
+      className="flex-1 flex flex-col min-w-0 h-full relative"
       style={{ background: "var(--bg-surface)" }}
       onDragEnter={handleDragEnter}
       onDragLeave={handleDragLeave}
@@ -519,24 +519,24 @@ export function ChatWindow({ sendMessage }: ChatWindowProps) {
 
       {/* Channel header */}
       <div
-        className="flex items-center justify-between px-5"
+        className="flex items-center justify-between px-3 sm:px-5 gap-2 flex-shrink-0"
         style={{
           height: 44,
           borderBottom: "1px solid var(--border)",
         }}
       >
-        <div className="flex items-center gap-2">
-          <span className="text-h1" style={{ color: "var(--text-primary)" }}>
+        <div className="flex items-center gap-2 min-w-0">
+          <span className="text-h1 truncate" style={{ color: "var(--text-primary)" }}>
             # {channelName}
           </span>
           {selectedAgent && !selectedAgent.isDefault && (
-            <span className="text-caption" style={{ color: "var(--text-secondary)" }}>
+            <span className="text-caption hidden sm:inline flex-shrink-0" style={{ color: "var(--text-secondary)" }}>
               — custom channel
             </span>
           )}
         </div>
-        <div className="flex items-center gap-1.5">
-          <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5} style={{ color: "var(--text-muted)" }}>
+        <div className="flex items-center gap-1.5 flex-shrink-0">
+          <svg className="w-3.5 h-3.5 hidden sm:block" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5} style={{ color: "var(--text-muted)" }}>
             <path strokeLinecap="round" strokeLinejoin="round" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.455 2.456L21.75 6l-1.036.259a3.375 3.375 0 00-2.455 2.456z" />
           </svg>
           <ModelSelect
@@ -554,7 +554,7 @@ export function ChatWindow({ sendMessage }: ChatWindowProps) {
       {showSessionTabs && <SessionTabs channelId={channelId} />}
 
       {/* Messages – flat-row layout */}
-      <div className="flex-1 overflow-y-auto">
+      <div className="flex-1 min-h-0 overflow-y-auto">
         {state.messages.length === 0 && (
           <div className="py-12 px-5 text-center">
             <p className="text-caption" style={{ color: "var(--text-muted)" }}>
@@ -582,7 +582,7 @@ export function ChatWindow({ sendMessage }: ChatWindowProps) {
       </div>
 
       {/* Composer (section 5.6) */}
-      <div className="px-5 pb-4 pt-2">
+      <div className="flex-shrink-0 px-3 sm:px-5 pb-3 sm:pb-4 pt-2">
         {/* Skill buttons — sorted by recency-weighted score */}
         <div className="flex items-center gap-1.5 pb-1.5 overflow-x-auto no-scrollbar">
           {sortedSkills.map((skill) => {
@@ -744,7 +744,7 @@ function MessageRow({
 
   return (
     <div
-      className="group relative px-5 hover:bg-[--bg-hover] transition-colors"
+      className="group relative px-3 sm:px-5 hover:bg-[--bg-hover] transition-colors"
       style={{ paddingTop: grouped ? 2 : 8, paddingBottom: 2 }}
     >
       <div className="flex gap-2 max-w-message">

package/packages/web/src/components/ConnectionSettings.tsx

@@ -0,0 +1,477 @@
+import React, { useState, useEffect, useCallback } from "react";
+import { pairingApi, setupApi, type PairingToken } from "../api";
+import { useAppState } from "../store";
+import { dlog } from "../debug-log";
+import { E2eService } from "../e2e";
+
+/** Clipboard copy button with feedback */
+function CopyButton({ text }: { text: string }) {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch {
+      const ta = document.createElement("textarea");
+      ta.value = text;
+      document.body.appendChild(ta);
+      ta.select();
+      document.execCommand("copy");
+      document.body.removeChild(ta);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    }
+  };
+
+  return (
+    <button
+      onClick={handleCopy}
+      className="shrink-0 px-2.5 py-1 text-tiny font-medium rounded-sm transition-colors"
+      style={{
+        background: copied ? "var(--accent-green)" : "var(--bg-hover)",
+        color: copied ? "#fff" : "var(--text-secondary)",
+      }}
+    >
+      {copied ? "Copied!" : "Copy"}
+    </button>
+  );
+}
+
+/** Code block with copy button */
+function CodeBlock({ code }: { code: string }) {
+  return (
+    <div
+      className="flex items-start gap-2 rounded-md px-3 py-2.5"
+      style={{ background: "var(--code-bg)", border: "1px solid var(--border)" }}
+    >
+      <pre
+        className="flex-1 text-caption font-mono overflow-x-auto whitespace-pre-wrap break-all"
+        style={{ color: "var(--text-primary)" }}
+      >
+        {code}
+      </pre>
+      <CopyButton text={code} />
+    </div>
+  );
+}
+
+/** Relative time from a unix timestamp */
+function timeAgo(unixTs: number): string {
+  const now = Date.now() / 1000;
+  const diff = now - unixTs;
+  if (diff < 60) return "Just now";
+  if (diff < 3600) return `${Math.floor(diff / 60)}m ago`;
+  if (diff < 86400) return `${Math.floor(diff / 3600)}h ago`;
+  if (diff < 604800) return `${Math.floor(diff / 86400)}d ago`;
+  return new Date(unixTs * 1000).toLocaleDateString();
+}
+
+export function ConnectionSettings() {
+  const state = useAppState();
+
+  const [tokens, setTokens] = useState<PairingToken[]>([]);
+  const [loadingTokens, setLoadingTokens] = useState(true);
+
+  const [cloudUrl, setCloudUrl] = useState<string>(
+    typeof window !== "undefined" ? window.location.origin : "https://console.botschat.app",
+  );
+  const [cloudUrlLoopback, setCloudUrlLoopback] = useState(false);
+  const [cloudUrlHint, setCloudUrlHint] = useState<string | undefined>();
+  const [editingUrl, setEditingUrl] = useState(false);
+
+  const [showCreateToken, setShowCreateToken] = useState(false);
+  const [newTokenLabel, setNewTokenLabel] = useState("");
+  const [creatingToken, setCreatingToken] = useState(false);
+  /** Token value of a freshly created token (only shown once, for the user to copy). */
+  const [freshToken, setFreshToken] = useState<{ id: string; token: string } | null>(null);
+
+  // Fetch recommended cloudUrl from backend
+  useEffect(() => {
+    let cancelled = false;
+
+    setupApi
+      .cloudUrl()
+      .then((data) => {
+        if (cancelled) return;
+        setCloudUrl(data.cloudUrl);
+        setCloudUrlLoopback(data.isLoopback);
+        setCloudUrlHint(data.hint);
+      })
+      .catch((err) => {
+        dlog.warn("ConnectionSettings", `Failed to fetch cloudUrl: ${err}`);
+        const host = window.location.hostname;
+        const loopback = host === "localhost" || host.startsWith("127.");
+        setCloudUrlLoopback(loopback);
+        if (loopback) {
+          setCloudUrlHint(
+            "This URL (localhost) only works on this machine. If your OpenClaw is on a different host, replace with its LAN IP.",
+          );
+        }
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  // Fetch pairing tokens
+  useEffect(() => {
+    let cancelled = false;
+    setLoadingTokens(true);
+
+    pairingApi
+      .list()
+      .then(({ tokens: list }) => {
+        if (!cancelled) setTokens(list);
+      })
+      .catch((err) => {
+        dlog.error("ConnectionSettings", `Failed to list tokens: ${err}`);
+      })
+      .finally(() => {
+        if (!cancelled) setLoadingTokens(false);
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  const handleCreateToken = useCallback(async () => {
+    setCreatingToken(true);
+    try {
+      const result = await pairingApi.create(newTokenLabel.trim() || undefined);
+      setFreshToken({ id: result.id, token: result.token });
+      // Refresh token list
+      const { tokens: refreshed } = await pairingApi.list();
+      setTokens(refreshed);
+      setNewTokenLabel("");
+      setShowCreateToken(false);
+    } catch (err) {
+      dlog.error("ConnectionSettings", `Failed to create token: ${err}`);
+    } finally {
+      setCreatingToken(false);
+    }
+  }, [newTokenLabel]);
+
+  const handleRevokeToken = useCallback(async (tokenId: string) => {
+    try {
+      await pairingApi.delete(tokenId);
+      setTokens((prev) => prev.filter((t) => t.id !== tokenId));
+      if (freshToken?.id === tokenId) setFreshToken(null);
+    } catch (err) {
+      dlog.error("ConnectionSettings", `Failed to revoke token: ${err}`);
+    }
+  }, [freshToken]);
+
+  // The token to use in the setup command: only the freshly created token (shown once).
+  // We never display full token values from the GET list (security: they are masked).
+  const commandToken = freshToken?.token ?? null;
+
+  const e2ePwd = E2eService.getPassword();
+  const setupCommand = commandToken
+    ? `openclaw plugins install @botschat/botschat && \\
+openclaw config set channels.botschat.cloudUrl ${cloudUrl} && \\
+openclaw config set channels.botschat.pairingToken ${commandToken} && \\${e2ePwd ? `\nopenclaw config set channels.botschat.e2ePassword "${e2ePwd}" && \\` : ""}
+openclaw config set channels.botschat.enabled true && \\
+openclaw gateway restart`
+    : null;
+
+  const isConnected = state.openclawConnected;
+
+  return (
+    <div className="space-y-5">
+      {/* ---- Connection Status ---- */}
+      <div>
+        <label
+          className="block text-caption font-bold mb-1.5"
+          style={{ color: "var(--text-secondary)" }}
+        >
+          OpenClaw Status
+        </label>
+        <div
+          className="flex items-center gap-3 rounded-md px-4 py-3"
+          style={{
+            background: isConnected ? "rgba(43, 172, 118, 0.1)" : "rgba(232, 162, 48, 0.1)",
+            border: `1px solid ${isConnected ? "rgba(43, 172, 118, 0.3)" : "rgba(232, 162, 48, 0.3)"}`,
+          }}
+        >
+          <span
+            className="w-2.5 h-2.5 rounded-full shrink-0"
+            style={{ background: isConnected ? "var(--accent-green)" : "var(--accent-yellow)" }}
+          />
+          <span
+            className="text-caption font-medium"
+            style={{ color: isConnected ? "var(--accent-green)" : "var(--accent-yellow)" }}
+          >
+            {isConnected ? "Connected to OpenClaw" : "Not connected"}
+          </span>
+        </div>
+      </div>
+
+      {/* ---- Setup Command ---- */}
+      <div>
+        <label
+          className="block text-caption font-bold mb-1.5"
+          style={{ color: "var(--text-secondary)" }}
+        >
+          Setup Command
+        </label>
+        <p className="text-tiny mb-2" style={{ color: "var(--text-muted)" }}>
+          Run this on your OpenClaw machine to install and connect the plugin.
+        </p>
+
+        {/* Loopback URL warning */}
+        {cloudUrlLoopback && (
+          <div
+            className="flex items-start gap-2 rounded-md px-3 py-2 mb-2 text-tiny"
+            style={{
+              background: "rgba(232, 162, 48, 0.1)",
+              border: "1px solid rgba(232, 162, 48, 0.25)",
+              color: "var(--accent-yellow)",
+            }}
+          >
+            <svg className="w-3.5 h-3.5 mt-0.5 shrink-0" viewBox="0 0 20 20" fill="currentColor">
+              <path
+                fillRule="evenodd"
+                d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.168 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 6a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 6zm0 9a1 1 0 100-2 1 1 0 000 2z"
+                clipRule="evenodd"
+              />
+            </svg>
+            <span>
+              {cloudUrlHint || "localhost URL may not be reachable from other machines."}{" "}
+              <button
+                onClick={() => setEditingUrl(true)}
+                className="underline font-medium hover:brightness-110"
+                style={{ color: "var(--text-link)" }}
+              >
+                Change URL
+              </button>
+            </span>
+          </div>
+        )}
+
+        {/* Editable cloud URL inline */}
+        {editingUrl && (
+          <div className="flex items-center gap-2 mb-2">
+            <label
+              className="text-tiny font-bold shrink-0"
+              style={{ color: "var(--text-secondary)" }}
+            >
+              Cloud URL:
+            </label>
+            <input
+              type="text"
+              value={cloudUrl}
+              onChange={(e) => {
+                setCloudUrl(e.target.value.replace(/\/+$/, ""));
+                setCloudUrlLoopback(false);
+              }}
+              className="flex-1 px-2.5 py-1 rounded-sm text-tiny font-mono"
+              style={{
+                background: "var(--code-bg)",
+                border: "1px solid var(--border)",
+                color: "var(--text-primary)",
+                outline: "none",
+              }}
+              placeholder="http://192.168.x.x:8787"
+              autoFocus
+            />
+            <button
+              onClick={() => setEditingUrl(false)}
+              className="px-2.5 py-1 text-tiny font-medium rounded-sm"
+              style={{ background: "var(--bg-active)", color: "#fff" }}
+            >
+              Done
+            </button>
+          </div>
+        )}
+
+        {loadingTokens ? (
+          <div
+            className="rounded-md px-3 py-2.5 animate-pulse"
+            style={{ background: "var(--code-bg)", height: "64px" }}
+          />
+        ) : setupCommand ? (
+          <CodeBlock code={setupCommand} />
+        ) : (
+          <div
+            className="rounded-md px-4 py-3 text-caption"
+            style={{
+              background: "var(--code-bg)",
+              border: "1px solid var(--border)",
+              color: "var(--text-muted)",
+            }}
+          >
+            {tokens.length > 0
+              ? "Create a new pairing token below to generate the setup command. (Token values are only shown once at creation time.)"
+              : "No pairing tokens available. Create one below to generate the setup command."}
+          </div>
+        )}
+
+        {/* Cloud URL (non-editable display, with Edit button) */}
+        {!editingUrl && (
+          <div className="flex items-center gap-2 mt-2">
+            <span className="text-tiny" style={{ color: "var(--text-muted)" }}>
+              Cloud URL:
+            </span>
+            <code className="text-tiny font-mono" style={{ color: "var(--text-secondary)" }}>
+              {cloudUrl}
+            </code>
+            <button
+              onClick={() => setEditingUrl(true)}
+              className="text-tiny hover:underline"
+              style={{ color: "var(--text-link)" }}
+            >
+              Edit
+            </button>
+          </div>
+        )}
+      </div>
+
+      {/* ---- Pairing Tokens ---- */}
+      <div>
+        <div className="flex items-center justify-between mb-1.5">
+          <label
+            className="text-caption font-bold"
+            style={{ color: "var(--text-secondary)" }}
+          >
+            Pairing Tokens
+          </label>
+          <button
+            onClick={() => setShowCreateToken(!showCreateToken)}
+            className="text-tiny font-medium hover:underline"
+            style={{ color: "var(--text-link)" }}
+          >
+            {showCreateToken ? "Cancel" : "+ New Token"}
+          </button>
+        </div>
+
+        {/* Create token form */}
+        {showCreateToken && (
+          <div
+            className="flex items-center gap-2 rounded-md px-3 py-2.5 mb-2"
+            style={{ background: "var(--code-bg)", border: "1px solid var(--border)" }}
+          >
+            <input
+              type="text"
+              value={newTokenLabel}
+              onChange={(e) => setNewTokenLabel(e.target.value)}
+              placeholder="Token label (optional)"
+              className="flex-1 px-2 py-1 rounded-sm text-tiny"
+              style={{
+                background: "var(--bg-surface)",
+                border: "1px solid var(--border)",
+                color: "var(--text-primary)",
+                outline: "none",
+              }}
+              onKeyDown={(e) => {
+                if (e.key === "Enter") handleCreateToken();
+              }}
+              autoFocus
+            />
+            <button
+              onClick={handleCreateToken}
+              disabled={creatingToken}
+              className="px-3 py-1 text-tiny font-medium rounded-sm text-white"
+              style={{
+                background: creatingToken ? "var(--text-muted)" : "var(--bg-active)",
+              }}
+            >
+              {creatingToken ? "Creating..." : "Create"}
+            </button>
+          </div>
+        )}
+
+        {/* Freshly created token (highlight) */}
+        {freshToken && (
+          <div
+            className="rounded-md px-3 py-2.5 mb-2"
+            style={{
+              background: "rgba(43, 172, 118, 0.08)",
+              border: "1px solid rgba(43, 172, 118, 0.3)",
+            }}
+          >
+            <div className="flex items-center justify-between mb-1">
+              <span
+                className="text-tiny font-bold"
+                style={{ color: "var(--accent-green)" }}
+              >
+                New token created — copy it now (only shown once)
+              </span>
+              <button
+                onClick={() => setFreshToken(null)}
+                className="text-tiny"
+                style={{ color: "var(--text-muted)" }}
+              >
+                Dismiss
+              </button>
+            </div>
+            <div className="flex items-center gap-2">
+              <code
+                className="flex-1 text-tiny font-mono break-all"
+                style={{ color: "var(--text-primary)" }}
+              >
+                {freshToken.token}
+              </code>
+              <CopyButton text={freshToken.token} />
+            </div>
+          </div>
+        )}
+
+        {/* Token list */}
+        {loadingTokens ? (
+          <div
+            className="rounded-md px-3 py-4 animate-pulse"
+            style={{ background: "var(--code-bg)" }}
+          />
+        ) : tokens.length === 0 ? (
+          <p className="text-tiny py-2" style={{ color: "var(--text-muted)" }}>
+            No active pairing tokens. Create one to connect your OpenClaw agent.
+          </p>
+        ) : (
+          <div className="space-y-1">
+            {tokens.map((t) => (
+              <div
+                key={t.id}
+                className="flex items-center gap-2 rounded-md px-3 py-2"
+                style={{ background: "var(--code-bg)", border: "1px solid var(--border)" }}
+              >
+                <code
+                  className="text-tiny font-mono shrink-0"
+                  style={{ color: "var(--text-primary)" }}
+                >
+                  {t.tokenPreview}
+                </code>
+                {t.label && (
+                  <span
+                    className="text-tiny px-1.5 py-0.5 rounded"
+                    style={{
+                      background: "var(--bg-hover)",
+                      color: "var(--text-secondary)",
+                    }}
+                  >
+                    {t.label}
+                  </span>
+                )}
+                <span className="flex-1" />
+                <span className="text-tiny" style={{ color: "var(--text-muted)" }}>
+                  {t.lastConnectedAt ? timeAgo(t.lastConnectedAt) : "Never connected"}
+                </span>
+                <button
+                  onClick={() => handleRevokeToken(t.id)}
+                  className="text-tiny font-medium hover:underline shrink-0"
+                  style={{ color: "var(--accent-red)" }}
+                  title="Revoke this token"
+                >
+                  Revoke
+                </button>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}