@hienlh/ppm 0.9.41 → 0.9.42

package/src/services/ppmbot/ppmbot-telegram.ts

@@ -0,0 +1,279 @@
+import type {
+  TelegramUpdate,
+  TelegramMessage,
+  TelegramSentMessage,
+  PPMBotCommand,
+} from "../../types/ppmbot.ts";
+
+const TELEGRAM_API = "https://api.telegram.org/bot";
+const POLL_TIMEOUT = 25;
+const MIN_EDIT_INTERVAL = 1000;
+const BOT_TOKEN_RE = /^\d+:[A-Za-z0-9_-]{30,50}$/;
+
+/** Known PPMBot slash commands */
+const COMMANDS = new Set([
+  "start", "project", "new", "sessions", "resume",
+  "status", "stop", "memory", "forget", "remember", "help",
+]);
+
+export type UpdateHandler = (update: TelegramUpdate) => Promise<void>;
+
+export class PPMBotTelegram {
+  private token: string;
+  private offset = 0;
+  private running = false;
+  private abortController: AbortController | null = null;
+  private retryCount = 0;
+
+  /** Track last edit time per chatId:messageId to throttle */
+  private lastEditTime = new Map<string, number>();
+
+  constructor(token: string) {
+    if (!BOT_TOKEN_RE.test(token)) {
+      throw new Error("Invalid Telegram bot token format");
+    }
+    this.token = token;
+  }
+
+  // ── Polling ─────────────────────────────────────────────────────
+
+  /** Register bot commands with Telegram so they show in the menu */
+  async registerCommands(): Promise<void> {
+    try {
+      await this.callApi("setMyCommands", {
+        commands: [
+          { command: "start", description: "Greeting + list projects" },
+          { command: "project", description: "Switch project" },
+          { command: "new", description: "Fresh session (current project)" },
+          { command: "sessions", description: "List recent sessions" },
+          { command: "resume", description: "Resume a previous session" },
+          { command: "status", description: "Current project/session info" },
+          { command: "stop", description: "End current session" },
+          { command: "memory", description: "Show project memories" },
+          { command: "forget", description: "Remove matching memories" },
+          { command: "remember", description: "Save a fact" },
+          { command: "help", description: "Show all commands" },
+        ],
+      });
+      console.log("[ppmbot] Commands registered");
+    } catch (err) {
+      console.warn("[ppmbot] Failed to register commands:", (err as Error).message);
+    }
+  }
+
+  /** Start long-polling loop. Calls handler for each update. */
+  async startPolling(handler: UpdateHandler): Promise<void> {
+    if (this.running) return;
+    this.running = true;
+    this.retryCount = 0;
+
+    // Register commands on startup
+    await this.registerCommands();
+
+    console.log("[ppmbot] Polling started");
+
+    while (this.running) {
+      try {
+        const updates = await this.getUpdates();
+        this.retryCount = 0;
+
+        for (const update of updates) {
+          this.offset = update.update_id + 1;
+          // Fire-and-forget: don't block polling on handler execution
+          // Per-chatId serialization is handled by processing lock in service
+          handler(update).catch((err) => {
+            console.error("[ppmbot] Handler error:", (err as Error).message);
+          });
+        }
+      } catch (err) {
+        if (!this.running) break;
+        this.retryCount++;
+        const delay = Math.min(1000 * 2 ** this.retryCount, 30_000);
+        console.error(
+          `[ppmbot] Poll error (retry ${this.retryCount}): ${(err as Error).message}. Retrying in ${delay}ms`,
+        );
+        await Bun.sleep(delay);
+      }
+    }
+
+    console.log("[ppmbot] Polling stopped");
+  }
+
+  /** Stop polling gracefully */
+  stop(): void {
+    this.running = false;
+    this.abortController?.abort();
+    this.lastEditTime.clear();
+  }
+
+  get isRunning(): boolean {
+    return this.running;
+  }
+
+  // ── Telegram API Methods ────────────────────────────────────────
+
+  /** Fetch updates via long-polling */
+  private async getUpdates(): Promise<TelegramUpdate[]> {
+    this.abortController = new AbortController();
+    const fetchTimeout = setTimeout(
+      () => this.abortController?.abort(),
+      (POLL_TIMEOUT + 10) * 1000,
+    );
+
+    try {
+      const res = await fetch(`${TELEGRAM_API}${this.token}/getUpdates`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          offset: this.offset,
+          timeout: POLL_TIMEOUT,
+          allowed_updates: ["message"],
+        }),
+        signal: this.abortController.signal,
+      });
+
+      const json = (await res.json()) as { ok: boolean; result?: TelegramUpdate[] };
+      if (!json.ok || !json.result) return [];
+      return json.result;
+    } finally {
+      clearTimeout(fetchTimeout);
+      this.abortController = null;
+    }
+  }
+
+  /** Send a text message */
+  async sendMessage(
+    chatId: number | string,
+    text: string,
+    parseMode: "HTML" | "Markdown" = "HTML",
+  ): Promise<TelegramSentMessage | null> {
+    try {
+      const res = await this.callApi("sendMessage", {
+        chat_id: chatId,
+        text,
+        parse_mode: parseMode,
+        disable_web_page_preview: true,
+      });
+      const json = (await res.json()) as { ok: boolean; result?: TelegramSentMessage; description?: string };
+      if (!json.ok) {
+        console.error(`[ppmbot] sendMessage failed: ${json.description}`);
+        return null;
+      }
+      return json.result ?? null;
+    } catch (err) {
+      console.error(`[ppmbot] sendMessage error: ${(err as Error).message}`);
+      return null;
+    }
+  }
+
+  /** Edit an existing message text (throttled at 1s intervals) */
+  async editMessage(
+    chatId: number | string,
+    messageId: number,
+    text: string,
+    parseMode: "HTML" | "Markdown" = "HTML",
+  ): Promise<boolean> {
+    const key = `${chatId}:${messageId}`;
+    const now = Date.now();
+    const lastEdit = this.lastEditTime.get(key) ?? 0;
+    if (now - lastEdit < MIN_EDIT_INTERVAL) return false;
+
+    this.lastEditTime.set(key, now);
+
+    try {
+      const res = await this.callApi("editMessageText", {
+        chat_id: chatId,
+        message_id: messageId,
+        text,
+        parse_mode: parseMode,
+        disable_web_page_preview: true,
+      });
+      const json = (await res.json()) as { ok: boolean; description?: string };
+      if (!json.ok) {
+        if (json.description?.includes("not modified")) return true;
+        console.error(`[ppmbot] editMessage failed: ${json.description}`);
+        return false;
+      }
+      return true;
+    } catch (err) {
+      console.error(`[ppmbot] editMessage error: ${(err as Error).message}`);
+      return false;
+    }
+  }
+
+  /** Force-edit (bypass throttle) — used for final message */
+  async editMessageFinal(
+    chatId: number | string,
+    messageId: number,
+    text: string,
+    parseMode: "HTML" | "Markdown" = "HTML",
+  ): Promise<boolean> {
+    const key = `${chatId}:${messageId}`;
+    this.lastEditTime.delete(key);
+    return this.editMessage(chatId, messageId, text, parseMode);
+  }
+
+  /** Send "typing" chat action */
+  async sendTyping(chatId: number | string): Promise<void> {
+    try {
+      await this.callApi("sendChatAction", {
+        chat_id: chatId,
+        action: "typing",
+      });
+    } catch {
+      // Best-effort, ignore errors
+    }
+  }
+
+  /** Delete a message */
+  async deleteMessage(chatId: number | string, messageId: number): Promise<void> {
+    try {
+      await this.callApi("deleteMessage", {
+        chat_id: chatId,
+        message_id: messageId,
+      });
+    } catch {
+      // Best-effort
+    }
+  }
+
+  // ── Command Parsing ─────────────────────────────────────────────
+
+  /** Parse a Telegram message into a PPMBotCommand if it starts with / */
+  static parseCommand(message: TelegramMessage): PPMBotCommand | null {
+    const text = message.text ?? message.caption ?? "";
+    if (!text.startsWith("/")) return null;
+
+    const match = text.match(/^\/(\w+)(?:@\S+)?\s*(.*)/s);
+    if (!match) return null;
+
+    const command = match[1]!.toLowerCase();
+    if (!COMMANDS.has(command)) return null;
+
+    return {
+      command,
+      args: match[2]?.trim() ?? "",
+      chatId: message.chat.id,
+      messageId: message.message_id,
+      userId: message.from?.id ?? 0,
+      username: message.from?.username,
+    };
+  }
+
+  // ── Private Helpers ─────────────────────────────────────────────
+
+  private async callApi(method: string, body: Record<string, unknown>): Promise<Response> {
+    const controller = new AbortController();
+    const timeout = setTimeout(() => controller.abort(), 10_000);
+    try {
+      return await fetch(`${TELEGRAM_API}${this.token}/${method}`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(body),
+        signal: controller.signal,
+      });
+    } finally {
+      clearTimeout(timeout);
+    }
+  }
+}

package/src/services/telegram-notification.service.ts

@@ -1,6 +1,7 @@
 import { configService } from "./config.service.ts";
 import { tunnelService } from "./tunnel.service.ts";
 import { getLocalIp } from "../lib/network-utils.ts";
+import { getApprovedPairedChats } from "./db.service.ts";
 import type { TelegramConfig } from "../types/config.ts";
 import type { NotificationPayload } from "./notification.service.ts";
 
@@ -12,12 +13,15 @@ function escapeHtml(str: string): string {
 }
 
 class TelegramNotificationService {
-  /** Send notification to Telegram. No-op if not configured. */
+  /** Send notification to all approved paired chats. No-op if not configured. */
   async send(payload: NotificationPayload): Promise<void> {
     const config = configService.get("telegram") as TelegramConfig | undefined;
-    if (!config?.bot_token || !config?.chat_id) return;
+    if (!config?.bot_token) return;
     if (!BOT_TOKEN_RE.test(config.bot_token)) return;
 
+    const approvedChats = getApprovedPairedChats();
+    if (approvedChats.length === 0) return;
+
     const deviceName = (configService.get("device_name") as string) || "PPM";
     const deepLink = this.buildDeepLink(payload);
 
@@ -27,31 +31,50 @@ class TelegramNotificationService {
       text += `\n\n<a href="${deepLink}">Open in PPM</a>`;
     }
 
-    await this.callApi(config.bot_token, config.chat_id, text);
+    // Send to all approved paired chats in parallel
+    await Promise.allSettled(
+      approvedChats.map((chat) =>
+        this.callApi(config.bot_token, chat.telegram_chat_id, text),
+      ),
+    );
   }
 
-  /** Send a test message. Returns { ok, error? } */
-  async sendTest(botToken: string, chatId: string): Promise<{ ok: boolean; error?: string }> {
+  /** Send a test message to all approved paired chats. Returns { ok, error? } */
+  async sendTest(botToken: string): Promise<{ ok: boolean; error?: string }> {
     if (!BOT_TOKEN_RE.test(botToken)) return { ok: false, error: "Invalid bot token format" };
+
+    const approvedChats = getApprovedPairedChats();
+    if (approvedChats.length === 0) {
+      return { ok: false, error: "No approved paired chats. Pair a device in PPMBot settings first." };
+    }
+
     const deviceName = (configService.get("device_name") as string) || "PPM";
     const text = `<b>${escapeHtml(deviceName)} — Test</b>\nTelegram notifications are working!`;
-    const controller = new AbortController();
-    const timeout = setTimeout(() => controller.abort(), 10_000);
-    try {
-      const res = await fetch(`https://api.telegram.org/bot${botToken}/sendMessage`, {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ chat_id: chatId, text, parse_mode: "HTML" }),
-        signal: controller.signal,
-      });
-      const json = (await res.json()) as { ok: boolean; description?: string };
-      if (!json.ok) return { ok: false, error: json.description || "Unknown error" };
-      return { ok: true };
-    } catch (e) {
-      return { ok: false, error: (e as Error).message };
-    } finally {
-      clearTimeout(timeout);
+
+    const results = await Promise.allSettled(
+      approvedChats.map(async (chat) => {
+        const controller = new AbortController();
+        const timeout = setTimeout(() => controller.abort(), 10_000);
+        try {
+          const res = await fetch(`https://api.telegram.org/bot${botToken}/sendMessage`, {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ chat_id: chat.telegram_chat_id, text, parse_mode: "HTML" }),
+            signal: controller.signal,
+          });
+          const json = (await res.json()) as { ok: boolean; description?: string };
+          if (!json.ok) throw new Error(json.description || "Unknown error");
+        } finally {
+          clearTimeout(timeout);
+        }
+      }),
+    );
+
+    const failed = results.filter((r) => r.status === "rejected");
+    if (failed.length === results.length) {
+      return { ok: false, error: (failed[0] as PromiseRejectedResult).reason?.message || "All sends failed" };
     }
+    return { ok: true };
   }
 
   private buildDeepLink(payload: NotificationPayload): string | null {

package/src/types/config.ts

@@ -6,7 +6,17 @@ export interface PushConfig {
 
 export interface TelegramConfig {
   bot_token: string;
-  chat_id: string;
+}
+
+export interface PPMBotConfig {
+  enabled: boolean;
+  default_provider: string;
+  default_project: string;
+  system_prompt: string;
+  show_tool_calls: boolean;
+  show_thinking: boolean;
+  permission_mode: string;
+  debounce_ms: number;
 }
 
 export type ThemeConfig = "light" | "dark" | "system";
@@ -21,6 +31,7 @@ export interface PpmConfig {
   ai: AIConfig;
   push?: PushConfig;
   telegram?: TelegramConfig;
+  clawbot?: PPMBotConfig;
   cloud_url?: string;
 }
 
@@ -85,6 +96,19 @@ export const DEFAULT_CONFIG: PpmConfig = {
       },
     },
   },
+  telegram: {
+    bot_token: "",
+  },
+  clawbot: {
+    enabled: false,
+    default_provider: "claude",
+    default_project: "",
+    system_prompt: "You are PPMBot, a helpful AI coding assistant on Telegram. Keep responses concise and mobile-friendly. Use short paragraphs. When showing code, use compact examples. Be direct and helpful.",
+    show_tool_calls: true,
+    show_thinking: false,
+    permission_mode: "bypassPermissions",
+    debounce_ms: 2000,
+  },
 };
 
 const VALID_TYPES = ["agent-sdk", "cli", "mock"] as const;

package/src/types/ppmbot.ts

@@ -0,0 +1,103 @@
+/** Telegram update object (subset we care about) */
+export interface TelegramUpdate {
+  update_id: number;
+  message?: TelegramMessage;
+  edited_message?: TelegramMessage;
+}
+
+export interface TelegramMessage {
+  message_id: number;
+  from?: { id: number; first_name: string; username?: string };
+  chat: { id: number; type: "private" | "group" | "supergroup" };
+  date: number;
+  text?: string;
+  caption?: string;
+}
+
+/** Sent message result from Telegram API */
+export interface TelegramSentMessage {
+  message_id: number;
+  chat: { id: number };
+  date: number;
+}
+
+/** PPMBot session row from SQLite */
+export interface PPMBotSessionRow {
+  id: number;
+  telegram_chat_id: string;
+  session_id: string;
+  provider_id: string;
+  project_name: string;
+  project_path: string;
+  is_active: number;
+  created_at: number;
+  last_message_at: number;
+}
+
+/** PPMBot memory row from SQLite */
+export interface PPMBotMemoryRow {
+  id: number;
+  project: string;
+  content: string;
+  category: PPMBotMemoryCategory;
+  importance: number;
+  created_at: number;
+  updated_at: number;
+  session_id: string | null;
+  superseded_by: number | null;
+}
+
+export type PPMBotMemoryCategory =
+  | "fact"
+  | "decision"
+  | "preference"
+  | "architecture"
+  | "issue";
+
+/** Active session state tracked in memory (not DB) */
+export interface PPMBotActiveSession {
+  telegramChatId: string;
+  sessionId: string;
+  providerId: string;
+  projectName: string;
+  projectPath: string;
+  /** Telegram message ID being edited for streaming */
+  currentMessageId?: number;
+  /** Debounce timer for rapid messages */
+  debounceTimer?: ReturnType<typeof setTimeout>;
+  /** Accumulated debounced text */
+  debouncedText?: string;
+}
+
+/** Parsed command from Telegram message */
+export interface PPMBotCommand {
+  command: string;
+  args: string;
+  chatId: number;
+  messageId: number;
+  userId: number;
+  username?: string;
+}
+
+/** Memory recall result with relevance score */
+export interface MemoryRecallResult {
+  id: number;
+  content: string;
+  category: PPMBotMemoryCategory;
+  importance: number;
+  project: string;
+  /** FTS5 rank score (lower = more relevant) */
+  rank?: number;
+}
+
+/** Paired chat row from SQLite */
+export interface PPMBotPairedChat {
+  id: number;
+  telegram_chat_id: string;
+  telegram_user_id: string | null;
+  display_name: string | null;
+  pairing_code: string | null;
+  status: "pending" | "approved" | "revoked";
+  created_at: number;
+  approved_at: number | null;
+}

package/src/web/components/chat/chat-history-bar.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect, useCallback, useRef } from "react";
-import { History, Settings2, Loader2, MessageSquare, RefreshCw, Search, Pencil, Check, X, BellOff, Bug, ClipboardCheck, Pin, PinOff, Trash2, Users } from "lucide-react";
+import { History, Settings2, Loader2, MessageSquare, RefreshCw, Search, Pencil, Check, X, BellOff, Bug, ClipboardCheck, Pin, PinOff, Trash2, Users, Bot } from "lucide-react";
 import { Activity } from "lucide-react";
 import { api, projectUrl } from "@/lib/api-client";
 import { useTabStore } from "@/stores/tab-store";
@@ -398,9 +398,14 @@ export function ChatHistoryBar({
                     <>
                       <button
                         onClick={() => openSession(session)}
-                        className="text-[11px] truncate flex-1 text-left"
+                        className="text-[11px] truncate flex-1 text-left flex items-center gap-1"
                       >
-                        {session.title || "Untitled"}
+                        {session.title?.startsWith("[PPM]") && (
+                          <Bot className="size-3 text-muted-foreground shrink-0" />
+                        )}
+                        {session.title?.startsWith("[PPM]")
+                          ? session.title.slice(7)
+                          : session.title || "Untitled"}
                       </button>
                       <button
                         onClick={(e) => togglePin(e, session)}

package/src/web/components/layout/command-palette.tsx

@@ -161,7 +161,7 @@ export function CommandPalette({ open, onClose, initialQuery = "" }: { open: boo
       { id: "chat", label: "New AI Chat", icon: MessageSquare, action: openNewTab("chat", "AI Chat"), keywords: "ai assistant claude", group: "action", shortcut: formatShortcut(getBinding("open-chat")) },
       { id: "terminal", label: "New Terminal", icon: Terminal, action: openNewTab("terminal", "Terminal"), keywords: "bash shell console", group: "action", shortcut: formatShortcut(getBinding("open-terminal")) },
       { id: "git-graph", label: "Git Graph", icon: GitBranch, action: openNewTab("git-graph", "Git Graph"), keywords: "branch history log", group: "action", shortcut: formatShortcut(getBinding("open-git-graph")) },
-      { id: "browser", label: "Port Forwarding", icon: Globe, action: openNewTab("browser", "Ports"), keywords: "web preview localhost port forward tunnel url", group: "action" },
+      { id: "ports", label: "Port Forwarding", icon: Globe, action: openNewTab("ports", "Ports"), keywords: "web preview localhost port forward tunnel url", group: "action" },
       { id: "postgres", label: "PostgreSQL", icon: Database, action: openNewTab("postgres", "PostgreSQL"), keywords: "database pg sql query", group: "action" },
       { id: "voice-input", label: "Voice Input", icon: Mic, action: () => { window.dispatchEvent(new CustomEvent("toggle-voice-input")); onClose(); }, keywords: "speech microphone dictate voice", group: "action", shortcut: formatShortcut(getBinding("voice-input")) },
       { id: "git-status", label: "Git Status", icon: GitCommitHorizontal, action: () => { setSidebarActiveTab("git"); onClose(); }, keywords: "changes diff staged", group: "action", shortcut: formatShortcut(getBinding("open-git-status")) },

package/src/web/components/layout/editor-panel.tsx

@@ -25,7 +25,7 @@ const TAB_COMPONENTS: Record<TabType, React.LazyExoticComponent<React.ComponentT
   "git-graph": lazy(() => import("@/components/git/git-graph").then((m) => ({ default: m.GitGraph }))),
   "git-diff": lazy(() => import("@/components/editor/diff-viewer").then((m) => ({ default: m.DiffViewer }))),
   settings: lazy(() => import("@/components/settings/settings-tab").then((m) => ({ default: m.SettingsTab }))),
-  browser: lazy(() => import("@/components/browser/browser-tab").then((m) => ({ default: m.BrowserTab }))),
+  ports: lazy(() => import("@/components/ports/port-forwarding-tab").then((m) => ({ default: m.PortForwardingTab }))),
   "extension-webview": lazy(() => import("@/components/extensions/extension-webview").then((m) => ({ default: m.ExtensionWebview }))),
 };
 

package/src/web/components/layout/mobile-nav.tsx

@@ -25,7 +25,7 @@ const NEW_TAB_LABELS: Partial<Record<TabType, string>> = Object.fromEntries(NEW_
 
 const TAB_ICONS: Record<TabType, React.ElementType> = {
   terminal: Terminal, chat: MessageSquare, editor: FileCode, database: Database, sqlite: Database, postgres: Database,
-  "git-graph": GitBranch, "git-diff": FileDiff, settings: Settings, browser: Globe,
+  "git-graph": GitBranch, "git-diff": FileDiff, settings: Settings, ports: Globe,
   "extension-webview": Puzzle,
 };
 

package/src/web/components/layout/tab-bar.tsx

@@ -36,7 +36,7 @@ const TAB_ICONS: Record<TabType, React.ElementType> = {
   "git-graph": GitBranch,
   "git-diff": FileDiff,
   settings: Settings,
-  browser: Globe,
+  ports: Globe,
   "extension-webview": Puzzle,
 };
 

package/src/web/components/layout/tab-content.tsx

@@ -48,9 +48,9 @@ const TAB_COMPONENTS: Record<TabType, React.LazyExoticComponent<React.ComponentT
       default: m.SettingsTab,
     })),
   ),
-  browser: lazy(() =>
-    import("@/components/browser/browser-tab").then((m) => ({
-      default: m.BrowserTab,
+  ports: lazy(() =>
+    import("@/components/ports/port-forwarding-tab").then((m) => ({
+      default: m.PortForwardingTab,
     })),
   ),
   "extension-webview": lazy(() =>

package/src/web/components/{browser/browser-tab.tsx → ports/port-forwarding-tab.tsx}

@@ -9,7 +9,7 @@ interface TunnelInfo {
   startedAt: number;
 }
 
-export function BrowserTab() {
+export function PortForwardingTab() {
   const [portInput, setPortInput] = useState("");
   const [tunnels, setTunnels] = useState<TunnelInfo[]>([]);
   const [loading, setLoading] = useState(false);
@@ -86,11 +86,11 @@ export function BrowserTab() {
       {/* Header + form */}
       <div className="p-4 md:p-6 border-b border-border bg-surface">
         <div className="flex items-center gap-2 mb-3">
-          <Wifi className="size-5 text-accent" />
+          <Wifi className="size-5 text-primary" />
           <h2 className="text-base font-medium text-text-primary">Port Forwarding</h2>
         </div>
         <form onSubmit={handleSubmit} className="flex items-center gap-2">
-          <div className="flex-1 flex items-center gap-2 px-3 py-2.5 rounded-lg bg-background border border-border focus-within:border-accent/50 transition-colors">
+          <div className="flex-1 flex items-center gap-2 px-3 py-2.5 rounded-lg bg-background border border-border focus-within:border-primary/50 transition-colors">
             <span className="text-sm text-text-subtle shrink-0">localhost:</span>
             <input
               type="number"
@@ -105,7 +105,7 @@ export function BrowserTab() {
           <button
             type="submit"
             disabled={loading || !portInput}
-            className="px-4 py-2.5 rounded-lg bg-accent text-white text-sm font-medium hover:bg-accent/90 disabled:opacity-50 transition-colors shrink-0 min-w-[72px] flex items-center justify-center"
+            className="px-4 py-2.5 rounded-lg bg-primary text-primary-foreground text-sm font-medium hover:bg-primary/90 disabled:opacity-50 transition-colors shrink-0 min-w-[72px] flex items-center justify-center"
           >
             {loading ? <Loader2 className="size-4 animate-spin" /> : "Forward"}
           </button>
@@ -136,7 +136,7 @@ export function BrowserTab() {
                 className="flex items-center gap-3 p-3 rounded-lg bg-surface border border-border"
               >
                 {/* Port badge */}
-                <div className="shrink-0 px-2 py-1 rounded bg-accent/10 text-accent text-xs font-mono font-medium">
+                <div className="shrink-0 px-2 py-1 rounded bg-primary/10 text-primary text-xs font-mono font-medium">
                   :{t.port}
                 </div>