@elizaos/app-core 2.0.0-alpha.37

package/src/components/companion/walletUtils.ts

@@ -0,0 +1,290 @@
+import type { BscTradeTxStatusResponse } from "@elizaos/app-core/api";
+import { getExplorerTokenUrl } from "../chainConfig";
+
+export type TranslatorFn = (
+  key: string,
+  vars?: Record<string, string | number>,
+) => string;
+
+export function getWalletTxStatusLabel(
+  status: string,
+  t: TranslatorFn,
+): string {
+  const key = `wallet.txStatus.${status}`;
+  const translated = t(key);
+  return translated === key ? status : translated;
+}
+
+export function mapWalletTradeError(
+  err: unknown,
+  t: TranslatorFn,
+  fallbackKey: string,
+): string {
+  if (err instanceof Error && err.message) return err.message;
+  if (typeof err === "string" && err.length > 0) return err;
+  return t(fallbackKey);
+}
+
+export const BSC_GAS_READY_THRESHOLD = 0.005;
+export const BSC_SWAP_GAS_RESERVE = 0.002;
+export const HEX_ADDRESS_RE = /^0x[a-fA-F0-9]{40}$/;
+export const MILADY_BSC_TOKEN_ADDRESS =
+  "0xc20e45e49e0e79f0fc81e71f05fd2772d6587777";
+export const BSC_USDT_TOKEN_ADDRESS =
+  "0x55d398326f99059fF775485246999027B3197955";
+export const BSC_USDC_TOKEN_ADDRESS =
+  "0x8AC76a51cc950d9822D68b83fE1Ad97B32Cd580d";
+export const BSC_NATIVE_LOGO_URL =
+  "https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/smartchain/info/logo.png";
+export const SOL_NATIVE_LOGO_URL =
+  "https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/solana/info/logo.png";
+export const AVAX_NATIVE_LOGO_URL =
+  "https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/avalanchec/info/logo.png";
+export const WALLET_RECENT_TRADES_KEY = "anime_wallet_recent_trades";
+export const MAX_WALLET_RECENT_TRADES = 10;
+
+export type WalletPortfolioChainFilter =
+  | "all"
+  | "bsc"
+  | "evm"
+  | "solana"
+  | "avax"
+  | (string & {});
+
+export type WalletTokenRow = {
+  key: string;
+  symbol: string;
+  name: string;
+  chain: string;
+  chainKey: Exclude<WalletPortfolioChainFilter, "all">;
+  assetAddress: string | null;
+  isNative: boolean;
+  valueUsd: number;
+  balance: string;
+  logoUrl: string | null;
+};
+
+export type WalletCollectibleRow = {
+  key: string;
+  chain: string;
+  chainKey: Exclude<WalletPortfolioChainFilter, "all">;
+  name: string;
+  collectionName: string;
+  imageUrl: string | null;
+};
+
+export type WalletRecentTrade = {
+  hash: string;
+  side: "buy" | "sell";
+  tokenAddress: string;
+  amount: string;
+  inputSymbol: string;
+  outputSymbol: string;
+  createdAt: number;
+  status: BscTradeTxStatusResponse["status"];
+  confirmations: number;
+  nonce: number | null;
+  reason: string | null;
+  explorerUrl: string;
+};
+
+export type WalletRecentFilter = "all" | BscTradeTxStatusResponse["status"];
+
+export type TokenMetadata = {
+  symbol: string;
+  name: string;
+  logoUrl: string | null;
+};
+
+export function isBscChainName(chain: string): boolean {
+  const normalized = chain.trim().toLowerCase();
+  return (
+    normalized === "bsc" ||
+    normalized === "bnb chain" ||
+    normalized === "bnb smart chain"
+  );
+}
+
+export function isAvaxChainName(chain: string): boolean {
+  const normalized = chain.trim().toLowerCase();
+  return (
+    normalized === "avax" ||
+    normalized === "avalanche" ||
+    normalized === "c-chain" ||
+    normalized === "avalanche c-chain"
+  );
+}
+
+export function resolvePortfolioChainKey(
+  chain: string,
+): Exclude<WalletPortfolioChainFilter, "all"> {
+  const normalized = chain.trim().toLowerCase();
+  if (isBscChainName(chain)) return "bsc";
+  if (isAvaxChainName(chain)) return "avax";
+  if (normalized.includes("solana") || normalized === "sol") return "solana";
+  return "evm";
+}
+
+export function formatRouteAddress(address: string): string {
+  const trimmed = address.trim();
+  if (trimmed.length <= 14) return trimmed;
+  return `${trimmed.slice(0, 6)}...${trimmed.slice(-4)}`;
+}
+
+export function getTokenExplorerUrl(row: WalletTokenRow): string | null {
+  if (!row.assetAddress) return null;
+  // Delegate to the central chain config registry
+  return getExplorerTokenUrl(row.chain, row.assetAddress);
+}
+
+export function loadRecentTrades(): WalletRecentTrade[] {
+  if (typeof localStorage === "undefined") return [];
+  try {
+    const raw = localStorage.getItem(WALLET_RECENT_TRADES_KEY);
+    const parsed = raw ? JSON.parse(raw) : [];
+    if (!Array.isArray(parsed)) return [];
+    return parsed
+      .filter(
+        (entry): entry is WalletRecentTrade =>
+          Boolean(entry) &&
+          typeof entry === "object" &&
+          typeof entry.hash === "string" &&
+          typeof entry.side === "string" &&
+          (entry.side === "buy" || entry.side === "sell") &&
+          typeof entry.createdAt === "number" &&
+          typeof entry.status === "string",
+      )
+      .slice(0, MAX_WALLET_RECENT_TRADES);
+  } catch {
+    return [];
+  }
+}
+
+export function persistRecentTrades(rows: WalletRecentTrade[]): void {
+  if (typeof localStorage === "undefined") return;
+  try {
+    localStorage.setItem(
+      WALLET_RECENT_TRADES_KEY,
+      JSON.stringify(rows.slice(0, MAX_WALLET_RECENT_TRADES)),
+    );
+  } catch {
+    // Ignore persistence errors so wallet actions remain usable.
+  }
+}
+
+/**
+ * Returns a safe explorer URL, falling back to a configurable explorer
+ * (defaults to bscscan) if the provided URL does not use an https/http
+ * scheme (prevents javascript: URI injection).
+ */
+export function safeExplorerHref(
+  explorerUrl: string | undefined | null,
+  hash: string,
+  fallbackBaseUrl = "https://bscscan.com",
+): string {
+  const fallback = `${fallbackBaseUrl}/tx/${hash}`;
+  if (!explorerUrl) return fallback;
+  return /^https?:\/\//i.test(explorerUrl) ? explorerUrl : fallback;
+}
+
+export function shortHash(hash: string): string {
+  const normalized = hash.trim();
+  if (normalized.length <= 14) return normalized;
+  return `${normalized.slice(0, 8)}...${normalized.slice(-6)}`;
+}
+
+export function getRecentTradeGroupKey(
+  createdAt: number,
+  nowMs: number = Date.now(),
+): "today" | "yesterday" | "earlier" {
+  const DAY_MS = 24 * 60 * 60 * 1000;
+  const now = new Date(nowMs);
+  const startOfToday = new Date(
+    now.getFullYear(),
+    now.getMonth(),
+    now.getDate(),
+  ).getTime();
+  const startOfCreatedAt = new Date(createdAt);
+  const createdDayStart = new Date(
+    startOfCreatedAt.getFullYear(),
+    startOfCreatedAt.getMonth(),
+    startOfCreatedAt.getDate(),
+  ).getTime();
+  if (createdDayStart >= startOfToday) return "today";
+  if (createdDayStart >= startOfToday - DAY_MS) return "yesterday";
+  return "earlier";
+}
+
+export type DexScreenerTokenRef = {
+  address?: string;
+  symbol?: string;
+  name?: string;
+};
+
+export type DexScreenerPair = {
+  chainId?: string;
+  baseToken?: DexScreenerTokenRef;
+  quoteToken?: DexScreenerTokenRef;
+  info?: {
+    imageUrl?: string;
+  };
+};
+
+export type DexScreenerTokenResponse = {
+  pairs?: DexScreenerPair[];
+};
+
+/**
+ * Fetch token metadata from DexScreener for any supported chain.
+ * Falls back to `fetchBscTokenMetadata` signature when no chainId given.
+ */
+export async function fetchTokenMetadata(
+  contractAddress: string,
+  dexScreenerChainId = "bsc",
+): Promise<TokenMetadata | null> {
+  if (typeof fetch !== "function") return null;
+  const trimmed = contractAddress.trim();
+  if (!HEX_ADDRESS_RE.test(trimmed)) return null;
+  const controller = new AbortController();
+  const timeout = globalThis.setTimeout(() => controller.abort(), 3500);
+  const normalized = trimmed.toLowerCase();
+  const targetChainId = dexScreenerChainId.toLowerCase();
+
+  try {
+    const response = await fetch(
+      `https://api.dexscreener.com/latest/dex/tokens/${trimmed}`,
+      {
+        signal: controller.signal,
+      },
+    );
+    if (!response.ok) return null;
+    const payload = (await response.json()) as DexScreenerTokenResponse;
+    const pairs = Array.isArray(payload.pairs) ? payload.pairs : [];
+    const pair = pairs.find(
+      (item) => (item.chainId ?? "").toLowerCase() === targetChainId,
+    );
+    if (!pair) return null;
+    const baseAddr = pair.baseToken?.address?.trim().toLowerCase();
+    const quoteAddr = pair.quoteToken?.address?.trim().toLowerCase();
+    const tokenRef =
+      baseAddr === normalized
+        ? pair.baseToken
+        : quoteAddr === normalized
+          ? pair.quoteToken
+          : pair.baseToken;
+    return {
+      symbol: tokenRef?.symbol?.trim() || "TOKEN",
+      name: tokenRef?.name?.trim() || "Unknown Token",
+      logoUrl: pair.info?.imageUrl?.trim() || null,
+    };
+  } catch {
+    return null;
+  } finally {
+    clearTimeout(timeout);
+  }
+}
+
+/** @deprecated Use `fetchTokenMetadata(address, "bsc")` instead. */
+export const fetchBscTokenMetadata = (
+  contractAddress: string,
+): Promise<TokenMetadata | null> => fetchTokenMetadata(contractAddress, "bsc");

package/src/components/companion-shell-styles.test.ts

@@ -0,0 +1,146 @@
+import type { Tab } from "@elizaos/app-core/navigation";
+import { describe, expect, it } from "vitest";
+import {
+  ACCENT_COLORS,
+  accentForegroundVar,
+  accentSubtleVar,
+  accentVar,
+  COMPANION_OVERLAY_TABS,
+  cardSizeClass,
+  overlayBackdropClass,
+  TOP_BAR_COLORS,
+  tabFlags,
+  viewWrapperStyle,
+} from "./companion-shell-styles";
+
+describe("COMPANION_OVERLAY_TABS", () => {
+  it("contains only companion — settings/character/skills etc. require native mode", () => {
+    expect(COMPANION_OVERLAY_TABS.has("companion")).toBe(true);
+  });
+
+  it("does not treat other tabs as companion overlay", () => {
+    expect(COMPANION_OVERLAY_TABS.has("chat")).toBe(false);
+    expect(COMPANION_OVERLAY_TABS.has("settings")).toBe(false);
+    expect(COMPANION_OVERLAY_TABS.has("skills")).toBe(false);
+  });
+});
+
+describe("tabFlags", () => {
+  const advancedOverlayTabs: Tab[] = [
+    "advanced",
+    "actions",
+    "fine-tuning",
+    "trajectories",
+    "runtime",
+    "database",
+    "logs",
+    "security",
+    "lifo",
+  ];
+
+  for (const tab of advancedOverlayTabs) {
+    it(`${tab} is an advanced overlay`, () => {
+      expect(tabFlags(tab).isAdvancedOverlay).toBe(true);
+      expect(tabFlags(tab).isCentered).toBe(true);
+    });
+  }
+
+  it("keeps non-advanced tabs out of the advanced overlay bucket", () => {
+    expect(tabFlags("chat").isAdvancedOverlay).toBe(false);
+    expect(tabFlags("stream").isAdvancedOverlay).toBe(false);
+    expect(tabFlags("triggers").isAdvancedOverlay).toBe(false);
+    expect(tabFlags("wallets").isAdvancedOverlay).toBe(false);
+    expect(tabFlags("settings").isAdvancedOverlay).toBe(false);
+    expect(tabFlags("knowledge").isAdvancedOverlay).toBe(false);
+  });
+
+  it("treats triggers as a settings-style layout", () => {
+    expect(tabFlags("triggers").isSettings).toBe(true);
+    expect(tabFlags("triggers").isCentered).toBe(true);
+  });
+
+  it("reports individual flags consistently", () => {
+    expect(tabFlags("skills").isSkills).toBe(true);
+    expect(tabFlags("stream").isStream).toBe(true);
+    expect(tabFlags("lifo").isLifo).toBe(true);
+    expect(tabFlags("wallets").isWallets).toBe(true);
+    expect(tabFlags("character").isCharacter).toBe(true);
+    expect(tabFlags("character-select").isCharacter).toBe(true);
+    expect(tabFlags("actions").isSkills).toBe(false);
+    expect(tabFlags("actions").isStream).toBe(false);
+    expect(tabFlags("actions").isLifo).toBe(false);
+    expect(tabFlags("actions").isCharacter).toBe(false);
+    expect(tabFlags("actions").isWallets).toBe(false);
+  });
+});
+
+describe("derived style helpers", () => {
+  it("gives advanced overlays the large centered card layout", () => {
+    const classes = cardSizeClass(tabFlags("actions"));
+    expect(classes).toContain("w-[95vw]");
+    expect(classes).toContain("h-[95vh]");
+    expect(classes).toContain("rounded-2xl");
+    expect(classes).toContain("overflow-hidden");
+  });
+
+  it("gives advanced overlays the dark blurred backdrop", () => {
+    const classes = overlayBackdropClass(tabFlags("actions"));
+    expect(classes).toContain("backdrop-blur-2xl");
+    expect(classes).toContain("bg-black/50");
+    expect(classes).toContain("pointer-events-auto");
+  });
+
+  it("keeps chat as the base view without backdrop", () => {
+    expect(overlayBackdropClass(tabFlags("chat"))).toBe("opacity-0");
+  });
+
+  it("uses the default accent for generic advanced overlays", () => {
+    const flags = tabFlags("actions");
+    expect(accentVar(flags)).toBe("#7b8fb5");
+    expect(accentSubtleVar(flags)).toBe("rgba(123, 143, 181, 0.12)");
+  });
+
+  it("keeps special-case accents for stream and wallets", () => {
+    expect(accentVar(tabFlags("stream"))).toBe("#ef4444");
+    expect(accentVar(tabFlags("wallets"))).toBe("#f0b90b");
+  });
+
+  it("keeps card surfaces non-transparent in base chat shell", () => {
+    const style = viewWrapperStyle(tabFlags("chat"), "#7b8fb5");
+    expect(style["--card"]).toBe("rgba(255, 255, 255, 0.05)");
+  });
+
+  it("uses dark accent foregrounds for yellow companion tabs", () => {
+    expect(accentForegroundVar(tabFlags("wallets"))).toBe("#1a1f26");
+    expect(accentForegroundVar(tabFlags("skills"))).toBe("#1a1f26");
+    expect(accentForegroundVar(tabFlags("knowledge"))).toBe("#ffffff");
+  });
+});
+
+describe("App.tsx advanced-tab parity", () => {
+  const advancedParityTabs: Tab[] = [
+    "advanced",
+    "actions",
+    "fine-tuning",
+    "trajectories",
+    "runtime",
+    "database",
+    "logs",
+    "security",
+    "lifo",
+  ];
+
+  for (const tab of advancedParityTabs) {
+    it(`${tab} stays aligned with the native-shell advanced layout contract`, () => {
+      expect(tabFlags(tab).isAdvancedOverlay).toBe(true);
+    });
+  }
+});
+
+describe("accent palettes", () => {
+  it("keeps stable accent constants", () => {
+    expect(ACCENT_COLORS.stream).toBe("#ef4444");
+    expect(ACCENT_COLORS.skills).toBe("#f0b232");
+    expect(TOP_BAR_COLORS.stream).toContain("239, 68, 68");
+  });
+});

package/src/components/companion-shell-styles.ts

@@ -0,0 +1,270 @@
+/**
+ * Style helpers and constants for the companion shell overlay.
+ */
+
+import type { Tab } from "@elizaos/app-core/navigation";
+import type React from "react";
+
+/* ── Overlay tab set ───────────────────────────────────────────────── */
+
+/** Only "companion" uses the companion shell. Settings, character, etc. require native (advanced) mode. */
+export const COMPANION_OVERLAY_TABS = new Set<Tab>(["companion"]);
+
+/* ── Per-tab accent / color config ─────────────────────────────────── */
+
+export const ACCENT_COLORS: Record<string, string> = {
+  skills: "#f0b232",
+  apps: "#10b981",
+  plugins: "#f0b232",
+  connectors: "#f0b232",
+  knowledge: "#a78bfa",
+  wallets: "#f0b90b",
+  stream: "#ef4444",
+  lifo: "#8b5cf6",
+};
+
+export const TOP_BAR_COLORS: Record<string, string> = {
+  skills: "#f0b232",
+  wallets: "rgba(240, 185, 11, 0.7)",
+  lifo: "rgba(139, 92, 246, 0.7)",
+  stream: "rgba(239, 68, 68, 0.7)",
+  plugins: "#f0b232",
+  connectors: "#f0b232",
+  apps: "rgba(16, 185, 129, 0.7)",
+  knowledge: "rgba(167, 139, 250, 0.7)",
+};
+
+/* ── Tab flags ─────────────────────────────────────────────────────── */
+
+export function tabFlags(tab: Tab) {
+  const isSkills = tab === "skills";
+  const isSettings = tab === "settings" || tab === "triggers";
+  const isPlugins = tab === "plugins";
+  const isLifo = tab === "lifo";
+  const isStream = tab === "stream";
+  const isWallets = tab === "wallets";
+  const isApps = tab === "apps";
+  const isConnectors = tab === "connectors";
+  const isKnowledge = tab === "knowledge";
+  const isAdvancedOverlay =
+    tab === "advanced" ||
+    tab === "actions" ||
+    tab === "fine-tuning" ||
+    tab === "trajectories" ||
+    tab === "runtime" ||
+    tab === "database" ||
+    tab === "logs" ||
+    tab === "security" ||
+    isLifo;
+  const isPluginsLike = isPlugins || isConnectors || isSkills;
+  const isCentered =
+    isSkills ||
+    isSettings ||
+    isPlugins ||
+    isAdvancedOverlay ||
+    isApps ||
+    isConnectors ||
+    isKnowledge ||
+    isLifo ||
+    isStream ||
+    isWallets;
+  const isCharacter = tab === "character" || tab === "character-select";
+
+  return {
+    isSkills,
+    isSettings,
+    isPlugins,
+    isLifo,
+    isStream,
+    isWallets,
+    isApps,
+    isConnectors,
+    isKnowledge,
+    isAdvancedOverlay,
+    isPluginsLike,
+    isCentered,
+    isCharacter,
+  };
+}
+
+export type TabFlags = ReturnType<typeof tabFlags>;
+
+/* ── Layout helpers ────────────────────────────────────────────────── */
+
+export function overlayBackdropClass(f: TabFlags) {
+  if (f.isPluginsLike)
+    return "opacity-100 backdrop-blur-xl bg-black/35 pointer-events-auto";
+  if (
+    f.isSettings ||
+    f.isAdvancedOverlay ||
+    f.isApps ||
+    f.isKnowledge ||
+    f.isLifo ||
+    f.isStream ||
+    f.isWallets
+  )
+    return "opacity-100 backdrop-blur-2xl bg-black/50 pointer-events-auto";
+  if (f.isCharacter) return "opacity-100";
+  return "opacity-0";
+}
+
+export function cardSizeClass(f: TabFlags) {
+  if (f.isPluginsLike)
+    return "w-[97vw] h-[92vh] md:w-[88vw] md:h-[80vh] max-w-[1460px] overflow-visible";
+  if (f.isAdvancedOverlay)
+    return "w-[95vw] h-[95vh] max-w-[1500px] backdrop-blur-3xl border rounded-2xl overflow-hidden";
+  if (f.isSettings || f.isApps || f.isKnowledge || f.isWallets)
+    return "w-[90vw] h-[90vh] max-w-5xl backdrop-blur-3xl border rounded-2xl overflow-hidden";
+  return "w-[65vw] min-w-[700px] h-[100vh] border-l backdrop-blur-2xl";
+}
+
+export function cardBackground(f: TabFlags) {
+  if (f.isPluginsLike) return "transparent";
+  if (
+    f.isSettings ||
+    f.isAdvancedOverlay ||
+    f.isApps ||
+    f.isKnowledge ||
+    f.isWallets
+  )
+    return "rgba(18, 22, 32, 0.92)";
+  return "linear-gradient(to left, rgba(6, 8, 12, 0.95) 40%, rgba(6, 8, 12, 0.7) 80%, rgba(6, 8, 12, 0.2) 100%)";
+}
+
+export function cardBorderColor(f: TabFlags) {
+  if (f.isPluginsLike) return "transparent";
+  if (
+    f.isSettings ||
+    f.isAdvancedOverlay ||
+    f.isApps ||
+    f.isKnowledge ||
+    f.isWallets
+  )
+    return "rgba(255, 255, 255, 0.08)";
+  return "rgba(255,255,255,0.05)";
+}
+
+export function cardBoxShadow(f: TabFlags, _shadowFx: string) {
+  if (f.isPluginsLike) return "none";
+  if (
+    f.isSettings ||
+    f.isAdvancedOverlay ||
+    f.isApps ||
+    f.isKnowledge ||
+    f.isWallets
+  )
+    return "0 8px 60px rgba(0,0,0,0.6), 0 2px 24px rgba(0,0,0,0.4)";
+  return "-60px 0 100px -20px rgba(0,0,0,0.8)";
+}
+
+/* ── Accent color helpers ──────────────────────────────────────────── */
+
+export function accentVar(f: TabFlags) {
+  if (f.isPluginsLike) return "#f0b232";
+  if (f.isApps) return "#10b981";
+  if (f.isKnowledge) return "#a78bfa";
+  if (f.isWallets) return "#f0b90b";
+  if (f.isLifo) return "#8b5cf6";
+  if (f.isStream) return "#ef4444";
+  return "#7b8fb5";
+}
+
+export function accentSubtleVar(f: TabFlags) {
+  if (f.isPluginsLike) return "rgba(240, 178, 50, 0.12)";
+  if (f.isApps) return "rgba(16, 185, 129, 0.12)";
+  if (f.isKnowledge) return "rgba(167, 139, 250, 0.12)";
+  if (f.isWallets) return "rgba(240, 185, 11, 0.12)";
+  if (f.isLifo) return "rgba(139, 92, 246, 0.12)";
+  if (f.isStream) return "rgba(239, 68, 68, 0.12)";
+  return "rgba(123, 143, 181, 0.12)";
+}
+
+export function accentRgbVar(f: TabFlags) {
+  if (f.isPluginsLike) return "240, 178, 50";
+  if (f.isApps) return "16, 185, 129";
+  if (f.isKnowledge) return "167, 139, 250";
+  if (f.isWallets) return "240, 185, 11";
+  if (f.isLifo) return "139, 92, 246";
+  if (f.isStream) return "239, 68, 68";
+  return "123, 143, 181";
+}
+
+export function accentForegroundVar(f: TabFlags) {
+  if (f.isPluginsLike || f.isWallets) return "#1a1f26";
+  return "#ffffff";
+}
+
+/* ── View wrapper helpers ──────────────────────────────────────────── */
+
+export function viewWrapperOverflow(f: TabFlags) {
+  if (f.isPluginsLike) return "overflow-visible";
+  if (
+    f.isSettings ||
+    f.isAdvancedOverlay ||
+    f.isApps ||
+    f.isConnectors ||
+    f.isWallets
+  )
+    return "overflow-hidden";
+  return "overflow-y-auto";
+}
+
+export function viewWrapperPadding(f: TabFlags) {
+  // Skills now uses isPluginsLike path (p-0)
+  if (
+    f.isSettings ||
+    f.isAdvancedOverlay ||
+    f.isApps ||
+    f.isConnectors ||
+    f.isPlugins ||
+    f.isWallets
+  )
+    return "p-0";
+  if (f.isKnowledge) return "px-8 py-8";
+  return "px-16 pt-32 pb-16";
+}
+
+export function viewWrapperStyle(
+  f: TabFlags,
+  accentColor: string,
+): React.CSSProperties {
+  if (
+    f.isSettings ||
+    f.isPlugins ||
+    f.isSkills ||
+    f.isAdvancedOverlay ||
+    f.isApps ||
+    f.isConnectors ||
+    f.isKnowledge ||
+    f.isWallets
+  ) {
+    return {
+      "--bg": "transparent",
+      "--card": "rgba(255, 255, 255, 0.05)",
+      "--border": "rgba(255, 255, 255, 0.08)",
+      "--accent": accentVar(f),
+      "--accent-foreground": accentForegroundVar(f),
+      "--accent-subtle": accentSubtleVar(f),
+      "--accent-rgb": accentRgbVar(f),
+      "--muted": "rgba(255, 255, 255, 0.45)",
+      "--txt": "rgba(240, 238, 250, 0.92)",
+      "--text": "rgba(240, 238, 250, 0.92)",
+      "--danger": "#ef4444",
+      "--ok": "#22c55e",
+      "--warning": "#f59e0b",
+      "--surface": "rgba(255, 255, 255, 0.06)",
+      "--bg-hover": "rgba(255, 255, 255, 0.04)",
+      "--bg-muted": "rgba(255, 255, 255, 0.03)",
+      "--border-hover": "rgba(255, 255, 255, 0.15)",
+    } as React.CSSProperties;
+  }
+  return {
+    "--bg": "transparent",
+    "--card": "rgba(255, 255, 255, 0.05)",
+    "--border": f.isSkills ? "rgba(0,225,255,0.3)" : "rgba(255,255,255,0.08)",
+    "--accent": accentColor,
+    "--accent-foreground": accentForegroundVar(f),
+    "--muted": "rgba(255, 255, 255, 0.55)",
+    "--txt": "#ffffff",
+  } as React.CSSProperties;
+}