From 5d4dfc43bd189039f67d737b8587bd1c9f1ef481 Mon Sep 17 00:00:00 2001
From: Ame <luokerenx4@163.com>
Date: Thu, 19 Mar 2026 01:45:41 +0800
Subject: [PATCH 1/6] feat: UTA health tracking + auto-recovery on broker
 failure
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

UTA now tracks consecutive broker call failures and derives health state
(healthy → degraded → offline). When offline, broker calls fail fast and
a background recovery loop attempts broker.init() with exponential backoff.
initAccount always registers UTAs (marking offline if init fails) so they
appear in the UI with health indicators instead of silently disappearing.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../trading/UnifiedTradingAccount.spec.ts     | 150 +++++++++++++++++-
 src/domain/trading/UnifiedTradingAccount.ts   | 141 ++++++++++++++--
 src/domain/trading/account-manager.ts         |  29 ++--
 src/domain/trading/brokers/mock/MockBroker.ts |  17 +-
 src/domain/trading/brokers/types.ts           |  13 ++
 src/main.ts                                   |  19 ++-
 ui/src/pages/PortfolioPage.tsx                |  37 +++--
 7 files changed, 353 insertions(+), 53 deletions(-)

diff --git a/src/domain/trading/UnifiedTradingAccount.spec.ts b/src/domain/trading/UnifiedTradingAccount.spec.ts
index 26f13237..43604c4e 100644
--- a/src/domain/trading/UnifiedTradingAccount.spec.ts
+++ b/src/domain/trading/UnifiedTradingAccount.spec.ts
@@ -1,4 +1,4 @@
-import { describe, it, expect, beforeEach, vi } from 'vitest'
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest'
 import Decimal from 'decimal.js'
 import { Order, OrderState, UNSET_DOUBLE, UNSET_DECIMAL } from '@traderalice/ibkr'
 import { UnifiedTradingAccount } from './UnifiedTradingAccount.js'
@@ -518,3 +518,151 @@ describe('UTA — constructor', () => {
     expect(restored.log()[0].message).toBe('initial buy')
   })
 })
+
+// ==================== health tracking ====================
+
+describe('UTA — health tracking', () => {
+  beforeEach(() => { vi.useFakeTimers() })
+  afterEach(() => { vi.useRealTimers() })
+
+  it('starts healthy', () => {
+    const { uta } = createUTA()
+    expect(uta.health).toBe('healthy')
+    expect(uta.getHealthInfo().consecutiveFailures).toBe(0)
+  })
+
+  it('transitions healthy → degraded after 3 consecutive failures', async () => {
+    const broker = new MockBroker()
+    const { uta } = createUTA(broker)
+    broker.setFailMode(3)
+
+    for (let i = 0; i < 3; i++) {
+      await expect(uta.getAccount()).rejects.toThrow()
+    }
+    expect(uta.health).toBe('degraded')
+  })
+
+  it('transitions degraded → offline after 6 consecutive failures', async () => {
+    const broker = new MockBroker()
+    const { uta } = createUTA(broker)
+    broker.setFailMode(6)
+
+    for (let i = 0; i < 6; i++) {
+      await expect(uta.getAccount()).rejects.toThrow()
+    }
+    expect(uta.health).toBe('offline')
+  })
+
+  it('resets to healthy on any successful call', async () => {
+    const broker = new MockBroker()
+    const { uta } = createUTA(broker)
+    broker.setFailMode(4)
+
+    for (let i = 0; i < 4; i++) {
+      await expect(uta.getAccount()).rejects.toThrow()
+    }
+    expect(uta.health).toBe('degraded')
+
+    // Next call succeeds (failMode exhausted)
+    await uta.getAccount()
+    expect(uta.health).toBe('healthy')
+    expect(uta.getHealthInfo().consecutiveFailures).toBe(0)
+  })
+
+  it('fails fast when offline and recovering', async () => {
+    const broker = new MockBroker()
+    const { uta } = createUTA(broker)
+    broker.setFailMode(100)
+
+    for (let i = 0; i < 6; i++) {
+      await expect(uta.getAccount()).rejects.toThrow()
+    }
+    expect(uta.health).toBe('offline')
+    expect(uta.getHealthInfo().recovering).toBe(true)
+
+    // Subsequent calls fail fast with offline message
+    await expect(uta.getAccount()).rejects.toThrow(/offline and reconnecting/)
+    await uta.close()
+  })
+
+  it('push() throws when offline', async () => {
+    const broker = new MockBroker()
+    const { uta } = createUTA(broker)
+    broker.setFailMode(100)
+
+    for (let i = 0; i < 6; i++) {
+      await expect(uta.getAccount()).rejects.toThrow()
+    }
+
+    uta.stagePlaceOrder({ aliceId: 'a-AAPL', side: 'buy', type: 'market', qty: 10 })
+    uta.commit('buy AAPL')
+    await expect(uta.push()).rejects.toThrow(/offline/)
+    await uta.close()
+  })
+
+  it('markOffline sets offline state and starts recovery', () => {
+    const { uta } = createUTA()
+    uta.markOffline('connection lost')
+
+    expect(uta.health).toBe('offline')
+    expect(uta.getHealthInfo().recovering).toBe(true)
+    expect(uta.getHealthInfo().lastError).toBe('connection lost')
+    uta.close()
+  })
+
+  it('auto-recovery restores healthy after broker comes back', async () => {
+    const broker = new MockBroker()
+    const { uta } = createUTA(broker)
+
+    // Go offline
+    broker.setFailMode(6)
+    for (let i = 0; i < 6; i++) {
+      await expect(uta.getAccount()).rejects.toThrow()
+    }
+    expect(uta.health).toBe('offline')
+    expect(uta.getHealthInfo().recovering).toBe(true)
+
+    // Broker is back (failMode exhausted) — advance timer to trigger recovery
+    await vi.advanceTimersByTimeAsync(5_000)
+
+    expect(uta.health).toBe('healthy')
+    expect(uta.getHealthInfo().recovering).toBe(false)
+  })
+
+  it('close() cancels recovery timer', async () => {
+    const broker = new MockBroker()
+    const { uta } = createUTA(broker)
+    uta.markOffline('test')
+
+    expect(uta.getHealthInfo().recovering).toBe(true)
+    await uta.close()
+    expect(uta.getHealthInfo().recovering).toBe(false)
+  })
+
+  it('getHealthInfo returns full snapshot', async () => {
+    const broker = new MockBroker()
+    const { uta } = createUTA(broker)
+
+    // Successful call
+    await uta.getAccount()
+    const info = uta.getHealthInfo()
+    expect(info.status).toBe('healthy')
+    expect(info.consecutiveFailures).toBe(0)
+    expect(info.lastSuccessAt).toBeInstanceOf(Date)
+    expect(info.recovering).toBe(false)
+  })
+
+  it('tracks health across different broker methods', async () => {
+    const broker = new MockBroker()
+    const { uta } = createUTA(broker)
+    broker.setFailMode(2)
+
+    await expect(uta.getAccount()).rejects.toThrow()
+    await expect(uta.getPositions()).rejects.toThrow()
+    expect(uta.getHealthInfo().consecutiveFailures).toBe(2)
+
+    // Success on a different method resets
+    await uta.getMarketClock()
+    expect(uta.health).toBe('healthy')
+  })
+})
diff --git a/src/domain/trading/UnifiedTradingAccount.ts b/src/domain/trading/UnifiedTradingAccount.ts
index 315bc92b..1838632a 100644
--- a/src/domain/trading/UnifiedTradingAccount.ts
+++ b/src/domain/trading/UnifiedTradingAccount.ts
@@ -9,7 +9,7 @@
 
 import Decimal from 'decimal.js'
 import { Contract, Order, ContractDescription, ContractDetails } from '@traderalice/ibkr'
-import type { IBroker, AccountInfo, Position, OpenOrder, PlaceOrderResult, Quote, MarketClock, AccountCapabilities } from './brokers/types.js'
+import type { IBroker, AccountInfo, Position, OpenOrder, PlaceOrderResult, Quote, MarketClock, AccountCapabilities, BrokerHealth, BrokerHealthInfo } from './brokers/types.js'
 import { TradingGit } from './git/TradingGit.js'
 import type {
   Operation,
@@ -109,6 +109,19 @@ export class UnifiedTradingAccount {
 
   private readonly _getState: () => Promise<GitState>
 
+  // ---- Health tracking ----
+  private static readonly DEGRADED_THRESHOLD = 3
+  private static readonly OFFLINE_THRESHOLD = 6
+  private static readonly RECOVERY_BASE_MS = 5_000
+  private static readonly RECOVERY_MAX_MS = 60_000
+
+  private _consecutiveFailures = 0
+  private _lastError?: string
+  private _lastSuccessAt?: Date
+  private _lastFailureAt?: Date
+  private _recoveryTimer?: ReturnType<typeof setTimeout>
+  private _recovering = false
+
   constructor(broker: IBroker, options: UnifiedTradingAccountOptions = {}) {
     this.broker = broker
     this.id = broker.id
@@ -118,11 +131,13 @@ export class UnifiedTradingAccount {
     // Wire internals
     this._getState = async (): Promise<GitState> => {
       const pendingIds = this.git.getPendingOrderIds().map(p => p.orderId)
-      const [accountInfo, positions, orders] = await Promise.all([
-        broker.getAccount(),
-        broker.getPositions(),
-        broker.getOrders(pendingIds),
-      ])
+      const [accountInfo, positions, orders] = await this._callBroker(() =>
+        Promise.all([
+          broker.getAccount(),
+          broker.getPositions(),
+          broker.getOrders(pendingIds),
+        ]),
+      )
       // Stamp aliceId on all contracts returned by broker
       for (const p of positions) this.stampAliceId(p.contract)
       for (const o of orders) this.stampAliceId(o.contract)
@@ -164,6 +179,92 @@ export class UnifiedTradingAccount {
       : new TradingGit(gitConfig)
   }
 
+  // ==================== Health ====================
+
+  get health(): BrokerHealth {
+    if (this._consecutiveFailures >= UnifiedTradingAccount.OFFLINE_THRESHOLD) return 'offline'
+    if (this._consecutiveFailures >= UnifiedTradingAccount.DEGRADED_THRESHOLD) return 'degraded'
+    return 'healthy'
+  }
+
+  getHealthInfo(): BrokerHealthInfo {
+    return {
+      status: this.health,
+      consecutiveFailures: this._consecutiveFailures,
+      lastError: this._lastError,
+      lastSuccessAt: this._lastSuccessAt,
+      lastFailureAt: this._lastFailureAt,
+      recovering: this._recovering,
+    }
+  }
+
+  /** Force offline state and start recovery. Used when broker.init() fails at startup. */
+  markOffline(reason: string): void {
+    this._consecutiveFailures = UnifiedTradingAccount.OFFLINE_THRESHOLD
+    this._lastError = reason
+    this._lastFailureAt = new Date()
+    this._startRecovery()
+  }
+
+  private async _callBroker<T>(fn: () => Promise<T>): Promise<T> {
+    if (this.health === 'offline' && this._recovering) {
+      throw new Error(`Account "${this.label}" is offline and reconnecting. Try again shortly.`)
+    }
+    try {
+      const result = await fn()
+      this._onSuccess()
+      return result
+    } catch (err) {
+      this._onFailure(err)
+      throw err
+    }
+  }
+
+  private _onSuccess(): void {
+    this._consecutiveFailures = 0
+    this._lastSuccessAt = new Date()
+    if (this._recoveryTimer) {
+      clearTimeout(this._recoveryTimer)
+      this._recoveryTimer = undefined
+      this._recovering = false
+    }
+  }
+
+  private _onFailure(err: unknown): void {
+    this._consecutiveFailures++
+    this._lastError = err instanceof Error ? err.message : String(err)
+    this._lastFailureAt = new Date()
+    if (this.health === 'offline' && !this._recovering) {
+      this._startRecovery()
+    }
+  }
+
+  private _startRecovery(): void {
+    if (this._recovering) return
+    this._recovering = true
+    console.log(`UTA[${this.id}]: offline, starting auto-recovery...`)
+    this._scheduleRecoveryAttempt(0)
+  }
+
+  private _scheduleRecoveryAttempt(attempt: number): void {
+    const delay = Math.min(
+      UnifiedTradingAccount.RECOVERY_BASE_MS * 2 ** attempt,
+      UnifiedTradingAccount.RECOVERY_MAX_MS,
+    )
+    this._recoveryTimer = setTimeout(async () => {
+      try {
+        await this.broker.init()
+        await this.broker.getAccount()
+        this._onSuccess()
+        console.log(`UTA[${this.id}]: auto-recovery succeeded`)
+      } catch (err) {
+        const msg = err instanceof Error ? err.message : String(err)
+        console.warn(`UTA[${this.id}]: recovery attempt ${attempt + 1} failed: ${msg}`)
+        this._scheduleRecoveryAttempt(attempt + 1)
+      }
+    }, delay)
+  }
+
   // ==================== aliceId management ====================
 
   /** Construct aliceId: "{utaId}|{nativeKey}" */
@@ -252,7 +353,10 @@ export class UnifiedTradingAccount {
     return this.git.commit(message)
   }
 
-  push(): Promise<PushResult> {
+  async push(): Promise<PushResult> {
+    if (this.health === 'offline') {
+      throw new Error(`Account "${this.label}" is offline. Cannot execute trades.`)
+    }
     return this.git.push()
   }
 
@@ -286,7 +390,7 @@ export class UnifiedTradingAccount {
     const updates: OrderStatusUpdate[] = []
 
     for (const { orderId, symbol } of pendingOrders) {
-      const brokerOrder = await this.broker.getOrder(orderId)
+      const brokerOrder = await this._callBroker(() => this.broker.getOrder(orderId))
       if (!brokerOrder) continue
 
       const status = brokerOrder.orderState.status
@@ -323,39 +427,39 @@ export class UnifiedTradingAccount {
   // ==================== Broker queries (delegation) ====================
 
   getAccount(): Promise<AccountInfo> {
-    return this.broker.getAccount()
+    return this._callBroker(() => this.broker.getAccount())
   }
 
   async getPositions(): Promise<Position[]> {
-    const positions = await this.broker.getPositions()
+    const positions = await this._callBroker(() => this.broker.getPositions())
     for (const p of positions) this.stampAliceId(p.contract)
     return positions
   }
 
   async getOrders(orderIds: string[]): Promise<OpenOrder[]> {
-    const orders = await this.broker.getOrders(orderIds)
+    const orders = await this._callBroker(() => this.broker.getOrders(orderIds))
     for (const o of orders) this.stampAliceId(o.contract)
     return orders
   }
 
   async getQuote(contract: Contract): Promise<Quote> {
-    const quote = await this.broker.getQuote(contract)
+    const quote = await this._callBroker(() => this.broker.getQuote(contract))
     this.stampAliceId(quote.contract)
     return quote
   }
 
   getMarketClock(): Promise<MarketClock> {
-    return this.broker.getMarketClock()
+    return this._callBroker(() => this.broker.getMarketClock())
   }
 
   async searchContracts(pattern: string): Promise<ContractDescription[]> {
-    const results = await this.broker.searchContracts(pattern)
+    const results = await this._callBroker(() => this.broker.searchContracts(pattern))
     for (const desc of results) this.stampAliceId(desc.contract)
     return results
   }
 
   async getContractDetails(query: Contract): Promise<ContractDetails | null> {
-    const details = await this.broker.getContractDetails(query)
+    const details = await this._callBroker(() => this.broker.getContractDetails(query))
     if (details) this.stampAliceId(details.contract)
     return details
   }
@@ -380,7 +484,12 @@ export class UnifiedTradingAccount {
     return this.broker.init()
   }
 
-  close(): Promise<void> {
+  async close(): Promise<void> {
+    if (this._recoveryTimer) {
+      clearTimeout(this._recoveryTimer)
+      this._recoveryTimer = undefined
+      this._recovering = false
+    }
     return this.broker.close()
   }
 }
diff --git a/src/domain/trading/account-manager.ts b/src/domain/trading/account-manager.ts
index 227deced..9104f96f 100644
--- a/src/domain/trading/account-manager.ts
+++ b/src/domain/trading/account-manager.ts
@@ -6,7 +6,7 @@
  */
 
 import type { Contract, ContractDescription, ContractDetails } from '@traderalice/ibkr'
-import type { AccountCapabilities } from './brokers/types.js'
+import type { AccountCapabilities, BrokerHealth, BrokerHealthInfo } from './brokers/types.js'
 import type { UnifiedTradingAccount } from './UnifiedTradingAccount.js'
 import './contract-ext.js'
 
@@ -17,6 +17,7 @@ export interface AccountSummary {
   label: string
   platformId?: string
   capabilities: AccountCapabilities
+  health: BrokerHealthInfo
 }
 
 // ==================== Aggregated equity ====================
@@ -32,6 +33,7 @@ export interface AggregatedEquity {
     equity: number
     cash: number
     unrealizedPnL: number
+    health: BrokerHealth
   }>
 }
 
@@ -72,6 +74,7 @@ export class AccountManager {
       label: uta.label,
       platformId: uta.platformId,
       capabilities: uta.getCapabilities(),
+      health: uta.getHealthInfo(),
     }))
   }
 
@@ -126,7 +129,7 @@ export class AccountManager {
       Array.from(this.entries.values()).map(async (uta) => {
         try {
           const info = await uta.getAccount()
-          return { id: uta.id, label: uta.label, info }
+          return { id: uta.id, label: uta.label, health: uta.health, info }
         } catch (err) {
           const now = Date.now()
           const lastWarned = this.equityWarnedAt.get(uta.id) ?? 0
@@ -134,7 +137,7 @@ export class AccountManager {
             console.warn(`getAggregatedEquity: ${uta.id} failed, skipping:`, err)
             this.equityWarnedAt.set(uta.id, now)
           }
-          return { id: uta.id, label: uta.label, info: null }
+          return { id: uta.id, label: uta.label, health: uta.health, info: null }
         }
       }),
     )
@@ -145,18 +148,20 @@ export class AccountManager {
     let totalRealizedPnL = 0
     const accounts: AggregatedEquity['accounts'] = []
 
-    for (const { id, label, info } of results) {
-      if (!info) continue
-      totalEquity += info.netLiquidation
-      totalCash += info.totalCashValue
-      totalUnrealizedPnL += info.unrealizedPnL
-      totalRealizedPnL += info.realizedPnL
+    for (const { id, label, health, info } of results) {
+      if (info) {
+        totalEquity += info.netLiquidation
+        totalCash += info.totalCashValue
+        totalUnrealizedPnL += info.unrealizedPnL
+        totalRealizedPnL += info.realizedPnL
+      }
       accounts.push({
         id,
         label,
-        equity: info.netLiquidation,
-        cash: info.totalCashValue,
-        unrealizedPnL: info.unrealizedPnL,
+        equity: info?.netLiquidation ?? 0,
+        cash: info?.totalCashValue ?? 0,
+        unrealizedPnL: info?.unrealizedPnL ?? 0,
+        health,
       })
     }
 
diff --git a/src/domain/trading/brokers/mock/MockBroker.ts b/src/domain/trading/brokers/mock/MockBroker.ts
index 6e56a8cd..ded86929 100644
--- a/src/domain/trading/brokers/mock/MockBroker.ts
+++ b/src/domain/trading/brokers/mock/MockBroker.ts
@@ -134,6 +134,7 @@ export class MockBroker implements IBroker {
   private _nextOrderId = 1
   private _accountOverride: AccountInfo | null = null
   private _callLog: CallRecord[] = []
+  private _failRemaining = 0
 
   constructor(options: MockBrokerOptions = {}) {
     this.id = options.id ?? 'mock-paper'
@@ -153,6 +154,13 @@ export class MockBroker implements IBroker {
     this._callLog.push({ method, args, timestamp: Date.now() })
   }
 
+  private _checkFail(method: string): void {
+    if (this._failRemaining > 0) {
+      this._failRemaining--
+      throw new Error(`MockBroker[${this.id}]: simulated ${method} failure`)
+    }
+  }
+
   /** Get all calls, optionally filtered by method name. */
   calls(method?: string): CallRecord[] {
     return method ? this._callLog.filter(c => c.method === method) : [...this._callLog]
@@ -176,7 +184,7 @@ export class MockBroker implements IBroker {
 
   // ---- Lifecycle ----
 
-  async init(): Promise<void> { this._record('init', []) }
+  async init(): Promise<void> { this._record('init', []); this._checkFail('init') }
   async close(): Promise<void> { this._record('close', []) }
 
   // ---- Contract search (stub) ----
@@ -293,6 +301,7 @@ export class MockBroker implements IBroker {
 
   async getAccount(): Promise<AccountInfo> {
     this._record('getAccount', [])
+    this._checkFail('getAccount')
     if (this._accountOverride) return this._accountOverride
 
     let unrealizedPnL = 0
@@ -315,6 +324,7 @@ export class MockBroker implements IBroker {
 
   async getPositions(): Promise<Position[]> {
     this._record('getPositions', [])
+    this._checkFail('getPositions')
     const result: Position[] = []
     for (const pos of this._positions.values()) {
       const price = this._quotes.get(pos.contract.symbol ?? '') ?? pos.avgCost.toNumber()
@@ -425,6 +435,11 @@ export class MockBroker implements IBroker {
     }
   }
 
+  /** Make the next N broker calls throw. Used to test health transitions. */
+  setFailMode(count: number): void {
+    this._failRemaining = count
+  }
+
   /** Override account info directly. Bypasses computed values from positions. */
   setAccountInfo(info: Partial<AccountInfo>): void {
     this._accountOverride = {
diff --git a/src/domain/trading/brokers/types.ts b/src/domain/trading/brokers/types.ts
index 59c0f0d6..d7487340 100644
--- a/src/domain/trading/brokers/types.ts
+++ b/src/domain/trading/brokers/types.ts
@@ -102,6 +102,19 @@ export interface MarketClock {
   timestamp?: Date
 }
 
+// ==================== Broker health ====================
+
+export type BrokerHealth = 'healthy' | 'degraded' | 'offline'
+
+export interface BrokerHealthInfo {
+  status: BrokerHealth
+  consecutiveFailures: number
+  lastError?: string
+  lastSuccessAt?: Date
+  lastFailureAt?: Date
+  recovering: boolean
+}
+
 // ==================== Account capabilities ====================
 
 export interface AccountCapabilities {
diff --git a/src/main.ts b/src/main.ts
index b726451e..43f3576d 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -119,18 +119,12 @@ async function main() {
   }
   validatePlatformRefs([...platformRegistry.values()], tradingConfig.accounts)
 
-  /** Initialize and register a single account. Returns true if successful. */
+  /** Initialize and register a single account. Always registers (offline if init fails). */
   async function initAccount(
     accountCfg: { id: string; platformId: string; guards: Array<{ type: string; options: Record<string, unknown> }> },
     platform: IPlatform,
   ): Promise<boolean> {
     const broker = createBrokerFromConfig(platform, accountCfg)
-    try {
-      await broker.init()
-    } catch (err) {
-      console.warn(`trading: ${accountCfg.id} init failed (non-fatal):`, err)
-      return false
-    }
     const savedState = await loadGitState(accountCfg.id)
     const filePath = gitFilePath(accountCfg.id)
     const uta = new UnifiedTradingAccount(broker, {
@@ -139,8 +133,17 @@ async function main() {
       onCommit: createGitPersister(filePath),
       platformId: accountCfg.platformId,
     })
+
+    try {
+      await broker.init()
+      console.log(`trading: ${uta.label} initialized`)
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : String(err)
+      console.warn(`trading: ${accountCfg.id} init failed, registered as offline: ${msg}`)
+      uta.markOffline(msg)
+    }
+
     accountManager.add(uta)
-    console.log(`trading: ${uta.label} initialized`)
     return true
   }
 
diff --git a/ui/src/pages/PortfolioPage.tsx b/ui/src/pages/PortfolioPage.tsx
index 91e29068..3fcf54d8 100644
--- a/ui/src/pages/PortfolioPage.tsx
+++ b/ui/src/pages/PortfolioPage.tsx
@@ -10,7 +10,7 @@ interface AggregatedEquity {
   totalCash: number
   totalUnrealizedPnL: number
   totalRealizedPnL: number
-  accounts: Array<{ id: string; label: string; equity: number; cash: number }>
+  accounts: Array<{ id: string; label: string; equity: number; cash: number; health?: string }>
 }
 
 interface AccountData {
@@ -63,7 +63,7 @@ export function PortfolioPage() {
   const accountSources = (data.equity?.accounts ?? []).map(eq => {
     const acct = data.accounts.find(a => a.id === eq.id)
     const unrealizedPnL = acct?.positions.reduce((sum, p) => sum + p.unrealizedPnL, 0) ?? 0
-    return { ...eq, provider: acct?.provider ?? '', unrealizedPnL, error: acct?.error }
+    return { ...eq, provider: acct?.provider ?? '', unrealizedPnL, error: acct?.error, health: eq.health }
   })
 
   return (
@@ -179,27 +179,34 @@ function HeroItem({ label, value, pnl }: { label: string; value: string; pnl?: n
 
 // ==================== Account Strip ====================
 
-const PROVIDER_COLORS: Record<string, string> = {
-  ccxt: 'bg-accent',
-  alpaca: 'bg-green',
+const HEALTH_DOT: Record<string, string> = {
+  healthy: 'bg-green',
+  degraded: 'bg-yellow-400',
+  offline: 'bg-red',
 }
 
-function AccountStrip({ sources }: { sources: Array<{ id: string; label: string; provider: string; equity: number; unrealizedPnL: number; error?: string }> }) {
+function AccountStrip({ sources }: { sources: Array<{ id: string; label: string; provider: string; equity: number; unrealizedPnL: number; error?: string; health?: string }> }) {
   return (
     <div className="flex flex-wrap gap-2">
       {sources.map(s => {
-        const dotColor = PROVIDER_COLORS[s.provider] || 'bg-text-muted'
+        const dotColor = HEALTH_DOT[s.health ?? 'healthy'] ?? 'bg-text-muted'
+        const isOffline = s.health === 'offline'
         return (
-          <div key={s.id} className="flex items-center gap-2 px-3 py-1.5 rounded-md border border-border bg-bg-secondary text-[12px]">
+          <div key={s.id} className={`flex items-center gap-2 px-3 py-1.5 rounded-md border border-border bg-bg-secondary text-[12px] ${isOffline ? 'opacity-60' : ''}`}>
             <div className={`w-1.5 h-1.5 rounded-full ${dotColor}`} />
             <span className="text-text font-medium">{s.label}</span>
-            <span className="text-text-muted">{fmt(s.equity)}</span>
-            {s.unrealizedPnL !== 0 && (
-              <span className={s.unrealizedPnL >= 0 ? 'text-green' : 'text-red'}>
-                {fmtPnl(s.unrealizedPnL)}
-              </span>
-            )}
-            {s.error && <span className="text-text-muted/50">{s.error}</span>}
+            {isOffline
+              ? <span className="text-red text-[11px]">Reconnecting…</span>
+              : <>
+                  <span className="text-text-muted">{fmt(s.equity)}</span>
+                  {s.unrealizedPnL !== 0 && (
+                    <span className={s.unrealizedPnL >= 0 ? 'text-green' : 'text-red'}>
+                      {fmtPnl(s.unrealizedPnL)}
+                    </span>
+                  )}
+                </>
+            }
+            {s.error && !isOffline && <span className="text-text-muted/50">{s.error}</span>}
           </div>
         )
       })}

From 259684ae77019eb50fd0db103842c7b011965bc9 Mon Sep 17 00:00:00 2001
From: Ame <luokerenx4@163.com>
Date: Thu, 19 Mar 2026 01:55:22 +0800
Subject: [PATCH 2/6] refactor: UTA self-connects on construction, remove
 external init/markOffline
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

UTA is a business entity that always starts successfully. Broker connection
is an internal concern — _connect() fires from the constructor, goes offline
if it fails, and auto-recovers. initAccount in main.ts no longer calls
broker.init() or distinguishes Alpaca/CCXT — all accounts register
synchronously and connect asynchronously.

Adds dedicated uta-health.spec.ts with TDD coverage for initial connect
failure, exponential backoff recovery, runtime disconnect, and offline
behavior (staging works, push blocked).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../trading/UnifiedTradingAccount.spec.ts     |  68 +++--
 src/domain/trading/UnifiedTradingAccount.ts   |  31 ++-
 .../trading/__test__/uta-health.spec.ts       | 258 ++++++++++++++++++
 src/domain/trading/account-manager.ts         |   2 +-
 src/main.ts                                   |  61 +----
 5 files changed, 344 insertions(+), 76 deletions(-)
 create mode 100644 src/domain/trading/__test__/uta-health.spec.ts

diff --git a/src/domain/trading/UnifiedTradingAccount.spec.ts b/src/domain/trading/UnifiedTradingAccount.spec.ts
index 43604c4e..80fdc309 100644
--- a/src/domain/trading/UnifiedTradingAccount.spec.ts
+++ b/src/domain/trading/UnifiedTradingAccount.spec.ts
@@ -525,15 +525,49 @@ describe('UTA — health tracking', () => {
   beforeEach(() => { vi.useFakeTimers() })
   afterEach(() => { vi.useRealTimers() })
 
-  it('starts healthy', () => {
-    const { uta } = createUTA()
+  /** Let _connect() (fire-and-forget from constructor) complete via microtask flush. */
+  async function flush() { await vi.advanceTimersByTimeAsync(0) }
+
+  it('connects automatically on construction and becomes healthy', async () => {
+    const broker = new MockBroker()
+    const { uta } = createUTA(broker)
+    await flush()
+
     expect(uta.health).toBe('healthy')
-    expect(uta.getHealthInfo().consecutiveFailures).toBe(0)
+    expect(uta.getHealthInfo().lastSuccessAt).toBeInstanceOf(Date)
+  })
+
+  it('goes offline and starts recovery when initial connect fails', async () => {
+    const broker = new MockBroker()
+    broker.setFailMode(100) // init + getAccount will fail
+    const { uta } = createUTA(broker)
+    await flush()
+
+    expect(uta.health).toBe('offline')
+    expect(uta.getHealthInfo().recovering).toBe(true)
+    await uta.close()
+  })
+
+  it('auto-recovers after initial connect failure when broker comes back', async () => {
+    const broker = new MockBroker()
+    // _connect calls init() which fails (consumes 1). Recovery at 5s: init() + getAccount() succeed.
+    broker.setFailMode(1)
+    const { uta } = createUTA(broker)
+    await flush()
+
+    expect(uta.health).toBe('offline')
+
+    // Advance to trigger first recovery attempt — broker is back (failMode exhausted)
+    await vi.advanceTimersByTimeAsync(5_000)
+
+    expect(uta.health).toBe('healthy')
+    expect(uta.getHealthInfo().recovering).toBe(false)
   })
 
   it('transitions healthy → degraded after 3 consecutive failures', async () => {
     const broker = new MockBroker()
     const { uta } = createUTA(broker)
+    await flush()
     broker.setFailMode(3)
 
     for (let i = 0; i < 3; i++) {
@@ -545,17 +579,20 @@ describe('UTA — health tracking', () => {
   it('transitions degraded → offline after 6 consecutive failures', async () => {
     const broker = new MockBroker()
     const { uta } = createUTA(broker)
+    await flush()
     broker.setFailMode(6)
 
     for (let i = 0; i < 6; i++) {
       await expect(uta.getAccount()).rejects.toThrow()
     }
     expect(uta.health).toBe('offline')
+    await uta.close()
   })
 
   it('resets to healthy on any successful call', async () => {
     const broker = new MockBroker()
     const { uta } = createUTA(broker)
+    await flush()
     broker.setFailMode(4)
 
     for (let i = 0; i < 4; i++) {
@@ -572,6 +609,7 @@ describe('UTA — health tracking', () => {
   it('fails fast when offline and recovering', async () => {
     const broker = new MockBroker()
     const { uta } = createUTA(broker)
+    await flush()
     broker.setFailMode(100)
 
     for (let i = 0; i < 6; i++) {
@@ -588,6 +626,7 @@ describe('UTA — health tracking', () => {
   it('push() throws when offline', async () => {
     const broker = new MockBroker()
     const { uta } = createUTA(broker)
+    await flush()
     broker.setFailMode(100)
 
     for (let i = 0; i < 6; i++) {
@@ -600,21 +639,13 @@ describe('UTA — health tracking', () => {
     await uta.close()
   })
 
-  it('markOffline sets offline state and starts recovery', () => {
-    const { uta } = createUTA()
-    uta.markOffline('connection lost')
-
-    expect(uta.health).toBe('offline')
-    expect(uta.getHealthInfo().recovering).toBe(true)
-    expect(uta.getHealthInfo().lastError).toBe('connection lost')
-    uta.close()
-  })
-
-  it('auto-recovery restores healthy after broker comes back', async () => {
+  it('auto-recovery restores healthy after runtime disconnect', async () => {
     const broker = new MockBroker()
     const { uta } = createUTA(broker)
+    await flush()
+    expect(uta.health).toBe('healthy')
 
-    // Go offline
+    // Go offline via runtime failures
     broker.setFailMode(6)
     for (let i = 0; i < 6; i++) {
       await expect(uta.getAccount()).rejects.toThrow()
@@ -631,8 +662,9 @@ describe('UTA — health tracking', () => {
 
   it('close() cancels recovery timer', async () => {
     const broker = new MockBroker()
+    broker.setFailMode(100)
     const { uta } = createUTA(broker)
-    uta.markOffline('test')
+    await flush()
 
     expect(uta.getHealthInfo().recovering).toBe(true)
     await uta.close()
@@ -642,9 +674,8 @@ describe('UTA — health tracking', () => {
   it('getHealthInfo returns full snapshot', async () => {
     const broker = new MockBroker()
     const { uta } = createUTA(broker)
+    await flush()
 
-    // Successful call
-    await uta.getAccount()
     const info = uta.getHealthInfo()
     expect(info.status).toBe('healthy')
     expect(info.consecutiveFailures).toBe(0)
@@ -655,6 +686,7 @@ describe('UTA — health tracking', () => {
   it('tracks health across different broker methods', async () => {
     const broker = new MockBroker()
     const { uta } = createUTA(broker)
+    await flush()
     broker.setFailMode(2)
 
     await expect(uta.getAccount()).rejects.toThrow()
diff --git a/src/domain/trading/UnifiedTradingAccount.ts b/src/domain/trading/UnifiedTradingAccount.ts
index 1838632a..8dc07d69 100644
--- a/src/domain/trading/UnifiedTradingAccount.ts
+++ b/src/domain/trading/UnifiedTradingAccount.ts
@@ -145,7 +145,7 @@ export class UnifiedTradingAccount {
         netLiquidation: accountInfo.netLiquidation,
         totalCashValue: accountInfo.totalCashValue,
         unrealizedPnL: accountInfo.unrealizedPnL,
-        realizedPnL: accountInfo.realizedPnL,
+        realizedPnL: accountInfo.realizedPnL ?? 0,
         positions,
         pendingOrders: orders.filter(o => o.orderState.status === 'Submitted' || o.orderState.status === 'PreSubmitted'),
       }
@@ -177,6 +177,10 @@ export class UnifiedTradingAccount {
     this.git = options.savedState
       ? TradingGit.restore(options.savedState, gitConfig)
       : new TradingGit(gitConfig)
+
+    // Kick off broker connection asynchronously — UTA is usable immediately,
+    // broker queries will fail (tracked by health) until init succeeds.
+    this._connect()
   }
 
   // ==================== Health ====================
@@ -198,12 +202,21 @@ export class UnifiedTradingAccount {
     }
   }
 
-  /** Force offline state and start recovery. Used when broker.init() fails at startup. */
-  markOffline(reason: string): void {
-    this._consecutiveFailures = UnifiedTradingAccount.OFFLINE_THRESHOLD
-    this._lastError = reason
-    this._lastFailureAt = new Date()
-    this._startRecovery()
+  /** Initial broker connection — fire-and-forget from constructor. */
+  private async _connect(): Promise<void> {
+    try {
+      await this.broker.init()
+      await this.broker.getAccount()
+      this._onSuccess()
+      console.log(`UTA[${this.id}]: connected`)
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : String(err)
+      console.warn(`UTA[${this.id}]: initial connect failed: ${msg}`)
+      this._consecutiveFailures = UnifiedTradingAccount.OFFLINE_THRESHOLD
+      this._lastError = msg
+      this._lastFailureAt = new Date()
+      this._startRecovery()
+    }
   }
 
   private async _callBroker<T>(fn: () => Promise<T>): Promise<T> {
@@ -480,10 +493,6 @@ export class UnifiedTradingAccount {
 
   // ==================== Lifecycle ====================
 
-  init(): Promise<void> {
-    return this.broker.init()
-  }
-
   async close(): Promise<void> {
     if (this._recoveryTimer) {
       clearTimeout(this._recoveryTimer)
diff --git a/src/domain/trading/__test__/uta-health.spec.ts b/src/domain/trading/__test__/uta-health.spec.ts
new file mode 100644
index 00000000..77a891e2
--- /dev/null
+++ b/src/domain/trading/__test__/uta-health.spec.ts
@@ -0,0 +1,258 @@
+/**
+ * UTA health tracking + auto-recovery — TDD tests.
+ *
+ * Covers the full lifecycle: initial connect, runtime disconnect,
+ * auto-recovery, and health state transitions.
+ *
+ * All tests use fake timers to control recovery scheduling.
+ */
+
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest'
+import { UnifiedTradingAccount } from '../UnifiedTradingAccount.js'
+import { MockBroker } from '../brokers/mock/index.js'
+import '../contract-ext.js'
+
+/** Let _connect() (fire-and-forget from constructor) complete via microtask flush. */
+async function flush() { await vi.advanceTimersByTimeAsync(0) }
+
+function createUTA(broker?: MockBroker) {
+  const b = broker ?? new MockBroker()
+  const uta = new UnifiedTradingAccount(b)
+  return { uta, broker: b }
+}
+
+describe('UTA health — initial connect', () => {
+  beforeEach(() => { vi.useFakeTimers() })
+  afterEach(() => { vi.useRealTimers() })
+
+  it('connects automatically and becomes healthy', async () => {
+    const { uta } = createUTA()
+    await flush()
+
+    expect(uta.health).toBe('healthy')
+    expect(uta.getHealthInfo().lastSuccessAt).toBeInstanceOf(Date)
+    expect(uta.getHealthInfo().recovering).toBe(false)
+  })
+
+  it('goes offline when broker.init() fails at startup', async () => {
+    const broker = new MockBroker()
+    broker.setFailMode(1) // init() throws
+    const { uta } = createUTA(broker)
+    await flush()
+
+    expect(uta.health).toBe('offline')
+    expect(uta.getHealthInfo().recovering).toBe(true)
+    expect(uta.getHealthInfo().lastError).toContain('simulated init failure')
+    await uta.close()
+  })
+})
+
+describe('UTA health — auto-recovery from initial connect failure', () => {
+  beforeEach(() => { vi.useFakeTimers() })
+  afterEach(() => { vi.useRealTimers() })
+
+  it('recovers when broker comes back after first attempt', async () => {
+    const broker = new MockBroker()
+    broker.setFailMode(1) // _connect → init() fails
+    const { uta } = createUTA(broker)
+    await flush()
+
+    expect(uta.health).toBe('offline')
+
+    // failMode exhausted — recovery at 5s should succeed
+    await vi.advanceTimersByTimeAsync(5_000)
+
+    expect(uta.health).toBe('healthy')
+    expect(uta.getHealthInfo().recovering).toBe(false)
+  })
+
+  it('retries with exponential backoff when broker stays down', async () => {
+    const broker = new MockBroker()
+    broker.setFailMode(100) // stays broken
+    const { uta } = createUTA(broker)
+    await flush()
+
+    expect(uta.health).toBe('offline')
+
+    // 1st recovery at 5s — still fails
+    await vi.advanceTimersByTimeAsync(5_000)
+    expect(uta.health).toBe('offline')
+
+    // 2nd recovery at 10s — still fails
+    await vi.advanceTimersByTimeAsync(10_000)
+    expect(uta.health).toBe('offline')
+
+    // 3rd recovery at 20s — still fails
+    await vi.advanceTimersByTimeAsync(20_000)
+    expect(uta.health).toBe('offline')
+    expect(uta.getHealthInfo().recovering).toBe(true)
+
+    await uta.close()
+  })
+
+  it('recovers on later attempt after earlier recoveries also fail', async () => {
+    const broker = new MockBroker()
+    // Each attempt calls broker.init() which consumes 1 fail if failing.
+    // _connect: init fails (1), recovery #1 at 5s: init fails (2), recovery #2 at 10s+5s: init succeeds
+    broker.setFailMode(2)
+    const { uta } = createUTA(broker)
+    await flush()
+    expect(uta.health).toBe('offline')
+
+    // 1st recovery at 5s — init still fails (consumes fail #2)
+    await vi.advanceTimersByTimeAsync(5_000)
+    expect(uta.health).toBe('offline')
+
+    // 2nd recovery at 5s + 10s = 15s — failMode exhausted, init + getAccount succeed
+    await vi.advanceTimersByTimeAsync(10_000)
+    expect(uta.health).toBe('healthy')
+  })
+})
+
+describe('UTA health — runtime disconnect and recovery', () => {
+  beforeEach(() => { vi.useFakeTimers() })
+  afterEach(() => { vi.useRealTimers() })
+
+  it('healthy → degraded after 3 consecutive failures', async () => {
+    const { uta, broker } = createUTA()
+    await flush()
+    expect(uta.health).toBe('healthy')
+
+    broker.setFailMode(3)
+    for (let i = 0; i < 3; i++) {
+      await expect(uta.getAccount()).rejects.toThrow()
+    }
+
+    expect(uta.health).toBe('degraded')
+  })
+
+  it('healthy → offline after 6 consecutive failures, triggers recovery', async () => {
+    const { uta, broker } = createUTA()
+    await flush()
+
+    broker.setFailMode(100)
+    for (let i = 0; i < 6; i++) {
+      await expect(uta.getAccount()).rejects.toThrow()
+    }
+
+    expect(uta.health).toBe('offline')
+    expect(uta.getHealthInfo().recovering).toBe(true)
+    await uta.close()
+  })
+
+  it('recovers from runtime disconnect when broker comes back', async () => {
+    const { uta, broker } = createUTA()
+    await flush()
+
+    // Go offline
+    broker.setFailMode(6)
+    for (let i = 0; i < 6; i++) {
+      await expect(uta.getAccount()).rejects.toThrow()
+    }
+    expect(uta.health).toBe('offline')
+
+    // failMode exhausted — recovery should succeed
+    await vi.advanceTimersByTimeAsync(5_000)
+
+    expect(uta.health).toBe('healthy')
+    expect(uta.getHealthInfo().recovering).toBe(false)
+  })
+
+  it('any successful call resets to healthy', async () => {
+    const { uta, broker } = createUTA()
+    await flush()
+
+    broker.setFailMode(4)
+    for (let i = 0; i < 4; i++) {
+      await expect(uta.getAccount()).rejects.toThrow()
+    }
+    expect(uta.health).toBe('degraded')
+
+    // failMode exhausted — next call succeeds
+    await uta.getAccount()
+    expect(uta.health).toBe('healthy')
+    expect(uta.getHealthInfo().consecutiveFailures).toBe(0)
+  })
+
+  it('tracks failures across different broker methods', async () => {
+    const { uta, broker } = createUTA()
+    await flush()
+
+    broker.setFailMode(2)
+    await expect(uta.getAccount()).rejects.toThrow()
+    await expect(uta.getPositions()).rejects.toThrow()
+    expect(uta.getHealthInfo().consecutiveFailures).toBe(2)
+
+    await uta.getMarketClock()
+    expect(uta.health).toBe('healthy')
+  })
+})
+
+describe('UTA health — offline behavior', () => {
+  beforeEach(() => { vi.useFakeTimers() })
+  afterEach(() => { vi.useRealTimers() })
+
+  it('broker calls fail fast when offline + recovering', async () => {
+    const { uta, broker } = createUTA()
+    await flush()
+
+    broker.setFailMode(100)
+    for (let i = 0; i < 6; i++) {
+      await expect(uta.getAccount()).rejects.toThrow()
+    }
+
+    // Now offline — should fail fast without hitting broker
+    await expect(uta.getAccount()).rejects.toThrow(/offline and reconnecting/)
+    await uta.close()
+  })
+
+  it('push() throws when offline', async () => {
+    const { uta, broker } = createUTA()
+    await flush()
+
+    broker.setFailMode(100)
+    for (let i = 0; i < 6; i++) {
+      await expect(uta.getAccount()).rejects.toThrow()
+    }
+
+    uta.stagePlaceOrder({ aliceId: 'a-AAPL', side: 'buy', type: 'market', qty: 10 })
+    uta.commit('buy AAPL')
+    await expect(uta.push()).rejects.toThrow(/offline/)
+    await uta.close()
+  })
+
+  it('staging and commit still work when offline (pure in-memory)', async () => {
+    const { uta, broker } = createUTA()
+    await flush()
+
+    broker.setFailMode(100)
+    for (let i = 0; i < 6; i++) {
+      await expect(uta.getAccount()).rejects.toThrow()
+    }
+
+    // Staging is a local operation — should work even when offline
+    const result = uta.stagePlaceOrder({ aliceId: 'a-AAPL', side: 'buy', type: 'market', qty: 10 })
+    expect(result.staged).toBe(true)
+
+    const commit = uta.commit('buy while offline')
+    expect(commit.prepared).toBe(true)
+
+    await uta.close()
+  })
+})
+
+describe('UTA health — close() cleanup', () => {
+  beforeEach(() => { vi.useFakeTimers() })
+  afterEach(() => { vi.useRealTimers() })
+
+  it('cancels recovery timer on close', async () => {
+    const broker = new MockBroker()
+    broker.setFailMode(100)
+    const { uta } = createUTA(broker)
+    await flush()
+
+    expect(uta.getHealthInfo().recovering).toBe(true)
+    await uta.close()
+    expect(uta.getHealthInfo().recovering).toBe(false)
+  })
+})
diff --git a/src/domain/trading/account-manager.ts b/src/domain/trading/account-manager.ts
index 9104f96f..753899c2 100644
--- a/src/domain/trading/account-manager.ts
+++ b/src/domain/trading/account-manager.ts
@@ -153,7 +153,7 @@ export class AccountManager {
         totalEquity += info.netLiquidation
         totalCash += info.totalCashValue
         totalUnrealizedPnL += info.unrealizedPnL
-        totalRealizedPnL += info.realizedPnL
+        totalRealizedPnL += info.realizedPnL ?? 0
       }
       accounts.push({
         id,
diff --git a/src/main.ts b/src/main.ts
index 43f3576d..bd632c6d 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -119,11 +119,11 @@ async function main() {
   }
   validatePlatformRefs([...platformRegistry.values()], tradingConfig.accounts)
 
-  /** Initialize and register a single account. Always registers (offline if init fails). */
+  /** Create and register a UTA. Broker connection happens asynchronously inside UTA. */
   async function initAccount(
     accountCfg: { id: string; platformId: string; guards: Array<{ type: string; options: Record<string, unknown> }> },
     platform: IPlatform,
-  ): Promise<boolean> {
+  ): Promise<UnifiedTradingAccount> {
     const broker = createBrokerFromConfig(platform, accountCfg)
     const savedState = await loadGitState(accountCfg.id)
     const filePath = gitFilePath(accountCfg.id)
@@ -133,42 +133,15 @@ async function main() {
       onCommit: createGitPersister(filePath),
       platformId: accountCfg.platformId,
     })
-
-    try {
-      await broker.init()
-      console.log(`trading: ${uta.label} initialized`)
-    } catch (err) {
-      const msg = err instanceof Error ? err.message : String(err)
-      console.warn(`trading: ${accountCfg.id} init failed, registered as offline: ${msg}`)
-      uta.markOffline(msg)
-    }
-
     accountManager.add(uta)
-    return true
+    return uta
   }
 
-  // Alpaca accounts — sync init (fast, blocks startup)
-  // CCXT accounts — async background init (loadMarkets is slow)
-  const ccxtAccountConfigs: Array<{ cfg: typeof tradingConfig.accounts[number]; platform: IPlatform }> = []
-
   for (const accCfg of tradingConfig.accounts) {
     const platform = platformRegistry.get(accCfg.platformId)!
-    if (platform.providerType === 'alpaca') {
-      await initAccount(accCfg, platform)
-    } else {
-      ccxtAccountConfigs.push({ cfg: accCfg, platform })
-    }
+    await initAccount(accCfg, platform)
   }
 
-  // CCXT init in background — register tools when ready
-  const ccxtInitPromise = ccxtAccountConfigs.length > 0
-    ? (async () => {
-        for (const { cfg, platform } of ccxtAccountConfigs) {
-          await initAccount(cfg, platform)
-        }
-      })()
-    : Promise.resolve()
-
   // ==================== Brain ====================
 
   const [brainExport, persona] = await Promise.all([
@@ -522,22 +495,18 @@ async function main() {
 
   console.log('engine: started')
 
-  // ==================== CCXT Background Injection ====================
-  // CCXT accounts init in background (loadMarkets is slow). When done, register
-  // CCXT-specific tools so the next agent call picks them up automatically.
-  ccxtInitPromise.then(() => {
-    // Check if any CCXT accounts were successfully registered
+  // ==================== CCXT Tools ====================
+  // All UTAs are registered synchronously — check if any are CCXT and register provider tools.
+  {
     const hasCcxt = accountManager.resolve().some((uta) => uta.broker instanceof CcxtBroker)
-    if (!hasCcxt) return
-
-    toolCenter.register(
-      createCcxtProviderTools(accountManager),
-      'trading-ccxt',
-    )
-    console.log('ccxt: provider tools registered')
-  }).catch((err) => {
-    console.error('ccxt: background init failed:', err instanceof Error ? err.message : String(err))
-  })
+    if (hasCcxt) {
+      toolCenter.register(
+        createCcxtProviderTools(accountManager),
+        'trading-ccxt',
+      )
+      console.log('ccxt: provider tools registered')
+    }
+  }
 
   // ==================== Shutdown ====================
 

From 5352408e0321c403b4c1b44b098e9120a3156445 Mon Sep 17 00:00:00 2001
From: Ame <luokerenx4@163.com>
Date: Thu, 19 Mar 2026 11:57:10 +0800
Subject: [PATCH 3/6] refactor: split DataSourcesPage into MarketDataPage +
 NewsPage

Separate structured data (market data) from unstructured data (news)
into independent pages with cleaner UI using Section/Field components.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 ui/src/App.tsx                   |  12 +-
 ui/src/components/Sidebar.tsx    |  16 +-
 ui/src/pages/DataSourcesPage.tsx | 663 -------------------------------
 ui/src/pages/MarketDataPage.tsx  | 407 +++++++++++++++++++
 ui/src/pages/NewsPage.tsx        | 159 ++++++++
 5 files changed, 588 insertions(+), 669 deletions(-)
 delete mode 100644 ui/src/pages/DataSourcesPage.tsx
 create mode 100644 ui/src/pages/MarketDataPage.tsx
 create mode 100644 ui/src/pages/NewsPage.tsx

diff --git a/ui/src/App.tsx b/ui/src/App.tsx
index 745f8ca6..b0819cf2 100644
--- a/ui/src/App.tsx
+++ b/ui/src/App.tsx
@@ -6,7 +6,8 @@ import { PortfolioPage } from './pages/PortfolioPage'
 import { EventsPage } from './pages/EventsPage'
 import { SettingsPage } from './pages/SettingsPage'
 import { AIProviderPage } from './pages/AIProviderPage'
-import { DataSourcesPage } from './pages/DataSourcesPage'
+import { MarketDataPage } from './pages/MarketDataPage'
+import { NewsPage } from './pages/NewsPage'
 import { TradingPage } from './pages/TradingPage'
 import { ConnectorsPage } from './pages/ConnectorsPage'
 import { DevPage } from './pages/DevPage'
@@ -15,7 +16,7 @@ import { ToolsPage } from './pages/ToolsPage'
 import { AgentStatusPage } from './pages/AgentStatusPage'
 
 export type Page =
-  | 'chat' | 'portfolio' | 'events' | 'agent-status' | 'heartbeat' | 'data-sources' | 'connectors'
+  | 'chat' | 'portfolio' | 'events' | 'agent-status' | 'heartbeat' | 'market-data' | 'news' | 'connectors'
   | 'trading'
   | 'ai-provider' | 'settings' | 'tools' | 'dev'
 
@@ -26,7 +27,8 @@ export const ROUTES: Record<Page, string> = {
   'events': '/events',
   'agent-status': '/agent-status',
   'heartbeat': '/heartbeat',
-  'data-sources': '/data-sources',
+  'market-data': '/market-data',
+  'news': '/news',
   'connectors': '/connectors',
   'tools': '/tools',
   'trading': '/trading',
@@ -68,7 +70,9 @@ export function App() {
             <Route path="/events" element={<EventsPage />} />
             <Route path="/agent-status" element={<AgentStatusPage />} />
             <Route path="/heartbeat" element={<HeartbeatPage />} />
-            <Route path="/data-sources" element={<DataSourcesPage />} />
+            <Route path="/market-data" element={<MarketDataPage />} />
+            <Route path="/news" element={<NewsPage />} />
+            <Route path="/data-sources" element={<Navigate to="/market-data" replace />} />
             <Route path="/connectors" element={<ConnectorsPage />} />
             <Route path="/tools" element={<ToolsPage />} />
             <Route path="/trading" element={<TradingPage />} />
diff --git a/ui/src/components/Sidebar.tsx b/ui/src/components/Sidebar.tsx
index a2426ef4..a8241628 100644
--- a/ui/src/components/Sidebar.tsx
+++ b/ui/src/components/Sidebar.tsx
@@ -88,8 +88,8 @@ const NAV_ITEMS: NavItem[] = [
     ),
   },
   {
-    page: 'data-sources',
-    label: 'Data Sources',
+    page: 'market-data',
+    label: 'Market Data',
     icon: (active) => (
       <svg width="18" height="18" viewBox="0 0 24 24" fill={active ? 'currentColor' : 'none'} stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
         <ellipse cx="12" cy="5" rx="9" ry="3" />
@@ -98,6 +98,18 @@ const NAV_ITEMS: NavItem[] = [
       </svg>
     ),
   },
+  {
+    page: 'news',
+    label: 'News',
+    icon: (active) => (
+      <svg width="18" height="18" viewBox="0 0 24 24" fill={active ? 'currentColor' : 'none'} stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+        <path d="M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-2 2zm0 0a2 2 0 0 1-2-2v-9h4" />
+        <path d="M10 7h8" />
+        <path d="M10 11h8" />
+        <path d="M10 15h4" />
+      </svg>
+    ),
+  },
   {
     page: 'connectors',
     label: 'Connectors',
diff --git a/ui/src/pages/DataSourcesPage.tsx b/ui/src/pages/DataSourcesPage.tsx
deleted file mode 100644
index e8abb258..00000000
--- a/ui/src/pages/DataSourcesPage.tsx
+++ /dev/null
@@ -1,663 +0,0 @@
-import { useState } from 'react'
-import { api, type AppConfig, type NewsCollectorConfig, type NewsCollectorFeed } from '../api'
-import { SaveIndicator } from '../components/SaveIndicator'
-import { Field, inputClass } from '../components/form'
-import { Toggle } from '../components/Toggle'
-import { useConfigPage } from '../hooks/useConfigPage'
-import { PageHeader } from '../components/PageHeader'
-import type { SaveStatus } from '../hooks/useAutoSave'
-
-type OpenbbConfig = Record<string, unknown>
-
-function combineStatus(a: SaveStatus, b: SaveStatus): SaveStatus {
-  if (a === 'error' || b === 'error') return 'error'
-  if (a === 'saving' || b === 'saving') return 'saving'
-  if (a === 'saved' || b === 'saved') return 'saved'
-  return 'idle'
-}
-
-// ==================== Constants ====================
-
-const PROVIDER_OPTIONS: Record<string, string[]> = {
-  equity: ['yfinance', 'fmp', 'intrinio', 'tiingo', 'alpha_vantage'],
-  crypto: ['yfinance', 'fmp', 'tiingo'],
-  currency: ['yfinance', 'fmp', 'tiingo'],
-}
-
-const ASSET_LABELS: Record<string, string> = {
-  equity: 'Equity',
-  crypto: 'Crypto',
-  currency: 'Currency',
-}
-
-/** Maps provider name → providerKeys key. null means free, no key required. */
-const PROVIDER_KEY_MAP: Record<string, string | null> = {
-  yfinance: null,
-  fmp: 'fmp',
-  intrinio: 'intrinio',
-  tiingo: 'tiingo',
-  alpha_vantage: 'alpha_vantage',
-  benzinga: 'benzinga',
-  biztoc: 'biztoc',
-}
-
-/** Macro/utility providers used by dedicated endpoints (not per-asset-class selectable) */
-const UTILITY_PROVIDERS = [
-  { key: 'fred', name: 'FRED', desc: 'Federal Reserve Economic Data — CPI, GDP, interest rates, macro indicators.', hint: 'Free — fredaccount.stlouisfed.org/apikeys' },
-  { key: 'bls', name: 'BLS', desc: 'Bureau of Labor Statistics — employment, payrolls, wages, CPI.', hint: 'Free — registrationapps.bls.gov/bls_registration' },
-  { key: 'eia', name: 'EIA', desc: 'Energy Information Administration — petroleum status, energy reports.', hint: 'Free — eia.gov/opendata' },
-  { key: 'econdb', name: 'EconDB', desc: 'Global macro indicators, country profiles, shipping data.', hint: 'Optional — works without key (limited). econdb.com' },
-  { key: 'nasdaq', name: 'Nasdaq', desc: 'Nasdaq Data Link — dividend/earnings calendars, short interest.', hint: 'Freemium — data.nasdaq.com' },
-  { key: 'tradingeconomics', name: 'Trading Economics', desc: '20M+ indicators across 196 countries, economic calendar.', hint: 'Paid — tradingeconomics.com' },
-] as const
-
-// ==================== Zone ====================
-
-interface ZoneProps {
-  title: string
-  subtitle: string
-  badge?: string
-  enabled: boolean
-  onToggle: () => void
-  children: React.ReactNode
-}
-
-function Zone({ title, subtitle, badge, enabled, onToggle, children }: ZoneProps) {
-  return (
-    <div className="border border-border rounded-xl overflow-hidden">
-      <div className="px-4 py-3 flex items-center justify-between bg-bg-secondary border-b border-border">
-        <div>
-          <div className="flex items-center gap-2">
-            <h3 className="text-[13px] font-semibold text-text">{title}</h3>
-            {badge && (
-              <span className="text-[10px] font-medium text-text-muted bg-bg-tertiary px-1.5 py-0.5 rounded-full">
-                {badge}
-              </span>
-            )}
-          </div>
-          <p className="text-[11px] text-text-muted mt-0.5">{subtitle}</p>
-        </div>
-        <Toggle size="sm" checked={enabled} onChange={onToggle} />
-      </div>
-      <div className={enabled ? 'px-4 py-4' : 'px-4 py-4 opacity-40 pointer-events-none'}>
-        {children}
-      </div>
-    </div>
-  )
-}
-
-// ==================== Market Data Engine ====================
-
-interface AssetProviderGridProps {
-  providers: Record<string, string>
-  providerKeys: Record<string, string>
-  onProviderChange: (asset: string, provider: string) => void
-  onKeyChange: (keyName: string, value: string) => void
-}
-
-function AssetProviderGrid({ providers, providerKeys, onProviderChange, onKeyChange }: AssetProviderGridProps) {
-  const [localKeys, setLocalKeys] = useState<Record<string, string>>(() => ({ ...providerKeys }))
-  const [testStatus, setTestStatus] = useState<Record<string, 'idle' | 'testing' | 'ok' | 'error'>>({})
-
-  const handleKeyChange = (keyName: string, value: string) => {
-    setLocalKeys((prev) => ({ ...prev, [keyName]: value }))
-    setTestStatus((prev) => ({ ...prev, [keyName]: 'idle' }))
-    onKeyChange(keyName, value)
-  }
-
-  const testProvider = async (provider: string, keyName: string) => {
-    const key = localKeys[keyName]
-    if (!key) return
-    setTestStatus((prev) => ({ ...prev, [keyName]: 'testing' }))
-    try {
-      const result = await api.marketData.testProvider(provider, key)
-      setTestStatus((prev) => ({ ...prev, [keyName]: result.ok ? 'ok' : 'error' }))
-    } catch {
-      setTestStatus((prev) => ({ ...prev, [keyName]: 'error' }))
-    }
-  }
-
-  return (
-    <div className="border-t border-border pt-4 mt-2 space-y-2">
-      <p className="text-[11px] font-semibold text-text-muted uppercase tracking-wide mb-3">Asset Providers</p>
-      {Object.entries(PROVIDER_OPTIONS).map(([asset, options]) => {
-        const selectedProvider = providers[asset] || options[0]
-        const keyName = PROVIDER_KEY_MAP[selectedProvider] ?? null
-        const status = keyName ? (testStatus[keyName] || 'idle') : 'idle'
-
-        return (
-          <div key={asset} className="flex items-center gap-2">
-            <span className="text-[12px] text-text-muted w-28 shrink-0">{ASSET_LABELS[asset]}</span>
-            <select
-              className={inputClass}
-              value={selectedProvider}
-              onChange={(e) => onProviderChange(asset, e.target.value)}
-            >
-              {options.map((opt) => <option key={opt} value={opt}>{opt}</option>)}
-            </select>
-            {keyName ? (
-              <>
-                <input
-                  className={inputClass}
-                  type="password"
-                  value={localKeys[keyName] || ''}
-                  onChange={(e) => handleKeyChange(keyName, e.target.value)}
-                  placeholder="API key"
-                />
-                <button
-                  onClick={() => testProvider(selectedProvider, keyName)}
-                  disabled={!localKeys[keyName] || status === 'testing'}
-                  className={`shrink-0 border rounded-md px-3 py-2 text-[12px] font-medium cursor-pointer transition-colors disabled:opacity-40 disabled:cursor-default ${
-                    status === 'ok'
-                      ? 'border-green text-green'
-                      : status === 'error'
-                        ? 'border-red text-red'
-                        : 'border-border text-text-muted hover:bg-bg-tertiary hover:text-text'
-                  }`}
-                >
-                  {status === 'testing' ? '…' : status === 'ok' ? 'OK' : status === 'error' ? 'Fail' : 'Test'}
-                </button>
-              </>
-            ) : (
-              <span className="text-[11px] text-text-muted/50 px-2.5">Free</span>
-            )}
-          </div>
-        )
-      })}
-    </div>
-  )
-}
-
-interface UtilityProvidersSectionProps {
-  providerKeys: Record<string, string>
-  onKeyChange: (keyName: string, value: string) => void
-}
-
-function UtilityProvidersSection({ providerKeys, onKeyChange }: UtilityProvidersSectionProps) {
-  const [expanded, setExpanded] = useState(false)
-  const [localKeys, setLocalKeys] = useState<Record<string, string>>(() => {
-    const init: Record<string, string> = {}
-    for (const p of UTILITY_PROVIDERS) init[p.key] = providerKeys[p.key] || ''
-    return init
-  })
-  const [testStatus, setTestStatus] = useState<Record<string, 'idle' | 'testing' | 'ok' | 'error'>>({})
-
-  const configuredCount = Object.values(localKeys).filter(Boolean).length
-
-  const handleKeyChange = (keyName: string, value: string) => {
-    setLocalKeys((prev) => ({ ...prev, [keyName]: value }))
-    setTestStatus((prev) => ({ ...prev, [keyName]: 'idle' }))
-    onKeyChange(keyName, value)
-  }
-
-  const testProvider = async (keyName: string) => {
-    const key = localKeys[keyName]
-    if (!key) return
-    setTestStatus((prev) => ({ ...prev, [keyName]: 'testing' }))
-    try {
-      const result = await api.marketData.testProvider(keyName, key)
-      setTestStatus((prev) => ({ ...prev, [keyName]: result.ok ? 'ok' : 'error' }))
-    } catch {
-      setTestStatus((prev) => ({ ...prev, [keyName]: 'error' }))
-    }
-  }
-
-  return (
-    <div className="border-t border-border pt-4 mt-2">
-      <button
-        onClick={() => setExpanded((v) => !v)}
-        className="flex items-center gap-2 text-[12px] text-text-muted hover:text-text transition-colors w-full"
-      >
-        <span className="text-[10px]">{expanded ? '▼' : '▶'}</span>
-        <span className="font-semibold uppercase tracking-wide">Macro & Utility Providers</span>
-        <span className="text-[11px] ml-auto">
-          {configuredCount > 0 ? `${configuredCount} configured` : 'None configured'}
-        </span>
-      </button>
-      {expanded && (
-        <div className="mt-3">
-          <p className="text-[12px] text-text-muted mb-3">
-            Used by dedicated macro endpoints (FRED for CPI/GDP, BLS for employment, EIA for energy). Not per-asset-class selectable.
-          </p>
-          <div className="space-y-3">
-            {UTILITY_PROVIDERS.map(({ key, name, desc, hint }) => {
-              const status = testStatus[key] || 'idle'
-              return (
-                <Field key={key} label={name}>
-                  <p className="text-[11px] text-text-muted mb-0.5">{desc}</p>
-                  <p className="text-[10px] text-text-muted/60 mb-1.5">{hint}</p>
-                  <div className="flex items-center gap-2">
-                    <input
-                      className={inputClass}
-                      type="password"
-                      value={localKeys[key]}
-                      onChange={(e) => handleKeyChange(key, e.target.value)}
-                      placeholder="Not configured"
-                    />
-                    <button
-                      onClick={() => testProvider(key)}
-                      disabled={!localKeys[key] || status === 'testing'}
-                      className={`shrink-0 border rounded-md px-3 py-2 text-[12px] font-medium cursor-pointer transition-colors disabled:opacity-40 disabled:cursor-default ${
-                        status === 'ok'
-                          ? 'border-green text-green'
-                          : status === 'error'
-                            ? 'border-red text-red'
-                            : 'border-border text-text-muted hover:bg-bg-tertiary hover:text-text'
-                      }`}
-                    >
-                      {status === 'testing' ? '…' : status === 'ok' ? 'OK' : status === 'error' ? 'Fail' : 'Test'}
-                    </button>
-                  </div>
-                </Field>
-              )
-            })}
-          </div>
-        </div>
-      )}
-    </div>
-  )
-}
-
-interface MarketDataZoneProps {
-  openbb: OpenbbConfig
-  enabled: boolean
-  onToggle: () => void
-  onChange: (patch: Partial<OpenbbConfig>) => void
-  onChangeImmediate: (patch: Partial<OpenbbConfig>) => void
-}
-
-function MarketDataZone({ openbb, enabled, onToggle, onChange, onChangeImmediate }: MarketDataZoneProps) {
-  const [testing, setTesting] = useState(false)
-  const [testStatus, setTestStatus] = useState<'idle' | 'ok' | 'error'>('idle')
-
-  const dataBackend = (openbb.backend as string) || 'typebb-sdk'
-  const apiUrl = (openbb.apiUrl as string) || 'http://localhost:6900'
-  const apiServer = (openbb.apiServer as { enabled: boolean; port: number } | undefined) ?? { enabled: false, port: 6901 }
-  const providers = (openbb.providers ?? {
-    equity: 'yfinance', crypto: 'yfinance', currency: 'yfinance',
-  }) as Record<string, string>
-  const providerKeys = (openbb.providerKeys ?? {}) as Record<string, string>
-
-  const testConnection = async () => {
-    setTesting(true)
-    setTestStatus('idle')
-    try {
-      const res = await fetch(`${apiUrl}/api/v1/equity/search?query=AAPL&provider=sec`, { signal: AbortSignal.timeout(5000) })
-      setTestStatus(res.ok ? 'ok' : 'error')
-    } catch {
-      setTestStatus('error')
-    } finally {
-      setTesting(false)
-    }
-  }
-
-  const handleProviderChange = (asset: string, provider: string) => {
-    onChangeImmediate({ providers: { ...providers, [asset]: provider } })
-  }
-
-  const handleKeyChange = (keyName: string, value: string) => {
-    const all = (openbb.providerKeys ?? {}) as Record<string, string>
-    const updated = { ...all, [keyName]: value }
-    const cleaned: Record<string, string> = {}
-    for (const [k, v] of Object.entries(updated)) {
-      if (v) cleaned[k] = v
-    }
-    onChange({ providerKeys: cleaned })
-  }
-
-  return (
-    <Zone
-      title="Market Data"
-      subtitle="Structured financial data — prices, fundamentals, macro indicators."
-      enabled={enabled}
-      onToggle={onToggle}
-    >
-      {/* Backend selector */}
-      <div>
-        <p className="text-[11px] font-semibold text-text-muted uppercase tracking-wide mb-2">Data Backend</p>
-        <div className="flex border border-border rounded-lg overflow-hidden w-fit">
-          {(['typebb-sdk', 'openbb-api'] as const).map((backend, i) => (
-            <button
-              key={backend}
-              onClick={() => { onChangeImmediate({ backend }); setTestStatus('idle') }}
-              className={`px-4 py-1.5 text-[12px] font-medium transition-colors cursor-pointer ${
-                i > 0 ? 'border-l border-border' : ''
-              } ${
-                dataBackend === backend
-                  ? 'bg-bg-tertiary text-text'
-                  : 'text-text-muted hover:text-text'
-              }`}
-            >
-              {backend === 'typebb-sdk' ? 'Built-in Engine (TypeBB)' : 'External OpenBB API'}
-            </button>
-          ))}
-        </div>
-        <p className="text-[11px] text-text-muted mt-1.5">
-          {dataBackend === 'typebb-sdk'
-            ? 'Uses the built-in TypeBB engine. No external process required.'
-            : 'Connects to an external OpenBB-compatible HTTP endpoint.'}
-        </p>
-      </div>
-
-      {/* Connection — only shown for external OpenBB backend */}
-      {dataBackend === 'openbb-api' && (
-        <div className="border-t border-border pt-4 mt-2">
-          <p className="text-[11px] font-semibold text-text-muted uppercase tracking-wide mb-2">Connection</p>
-          <div className="flex items-center gap-2">
-            <input
-              className={`${inputClass} flex-1`}
-              value={apiUrl}
-              onChange={(e) => { onChange({ apiUrl: e.target.value }); setTestStatus('idle') }}
-              placeholder="http://localhost:6900"
-            />
-            <button
-              onClick={testConnection}
-              disabled={testing}
-              className={`shrink-0 border rounded-lg px-4 py-2 text-[13px] font-medium cursor-pointer transition-colors disabled:opacity-50 ${
-                testStatus === 'ok'
-                  ? 'border-green text-green'
-                  : testStatus === 'error'
-                    ? 'border-red text-red'
-                    : 'border-border text-text-muted hover:bg-bg-tertiary hover:text-text'
-              }`}
-            >
-              {testing ? 'Testing…' : testStatus === 'ok' ? 'Connected' : testStatus === 'error' ? 'Failed' : 'Test Connection'}
-            </button>
-            {testStatus !== 'idle' && (
-              <div className={`w-2 h-2 rounded-full shrink-0 ${testStatus === 'ok' ? 'bg-green' : 'bg-red'}`} />
-            )}
-          </div>
-        </div>
-      )}
-
-      {/* Asset providers + inline keys */}
-      <AssetProviderGrid
-        providers={providers}
-        providerKeys={providerKeys}
-        onProviderChange={handleProviderChange}
-        onKeyChange={handleKeyChange}
-      />
-
-      {/* Embedded API server */}
-      <div className="border-t border-border pt-4 mt-2">
-        <p className="text-[11px] font-semibold text-text-muted uppercase tracking-wide mb-2">Embedded API Server</p>
-        <div className="flex items-start justify-between gap-3">
-          <div className="flex-1">
-            <p className="text-[13px] text-text">Expose OpenBB HTTP API</p>
-            <p className="text-[11px] text-text-muted mt-0.5">
-              Start an OpenBB-compatible HTTP server at Alice startup. Other services can connect to{' '}
-              <span className="font-mono text-[10px]">http://localhost:{apiServer.port}</span>.
-            </p>
-            {apiServer.enabled && (
-              <div className="flex items-center gap-2 mt-2">
-                <label className="text-[11px] text-text-muted shrink-0">Port</label>
-                <input
-                  className={`${inputClass} w-24`}
-                  type="number"
-                  min={1024}
-                  max={65535}
-                  value={apiServer.port}
-                  onChange={(e) => onChange({ apiServer: { ...apiServer, port: Number(e.target.value) || 6901 } })}
-                />
-              </div>
-            )}
-          </div>
-          <Toggle
-            size="sm"
-            checked={apiServer.enabled}
-            onChange={(v) => onChangeImmediate({ apiServer: { ...apiServer, enabled: v } })}
-          />
-        </div>
-      </div>
-
-      {/* Utility/macro providers */}
-      <UtilityProvidersSection
-        providerKeys={providerKeys}
-        onKeyChange={handleKeyChange}
-      />
-    </Zone>
-  )
-}
-
-// ==================== Open Intelligence ====================
-
-function FeedsSection({
-  feeds,
-  onChange,
-}: {
-  feeds: NewsCollectorFeed[]
-  onChange: (feeds: NewsCollectorFeed[]) => void
-}) {
-  const [newName, setNewName] = useState('')
-  const [newUrl, setNewUrl] = useState('')
-  const [newSource, setNewSource] = useState('')
-
-  const removeFeed = (index: number) => onChange(feeds.filter((_, i) => i !== index))
-
-  const addFeed = () => {
-    if (!newName.trim() || !newUrl.trim() || !newSource.trim()) return
-    onChange([...feeds, { name: newName.trim(), url: newUrl.trim(), source: newSource.trim() }])
-    setNewName('')
-    setNewUrl('')
-    setNewSource('')
-  }
-
-  return (
-    <div>
-      <p className="text-[11px] font-semibold text-text-muted uppercase tracking-wide mb-2">RSS Feeds</p>
-      <p className="text-[11px] text-text-muted mb-3">
-        Collected articles are searchable via globNews / grepNews / readNews. Changes take effect on the next fetch cycle.
-      </p>
-
-      {/* Existing feeds */}
-      {feeds.length > 0 && (
-        <div className="space-y-1.5 mb-3">
-          {feeds.map((feed, i) => (
-            <div
-              key={`${feed.source}-${i}`}
-              className="flex items-center gap-3 border border-border rounded-lg px-3 py-2"
-            >
-              <div className="flex-1 min-w-0">
-                <p className="text-[13px] font-medium text-text truncate">{feed.name}</p>
-                <p className="text-[11px] text-text-muted truncate">{feed.url}</p>
-                <p className="text-[10px] text-text-muted/60 mt-0.5">source: {feed.source}</p>
-              </div>
-              <button
-                onClick={() => removeFeed(i)}
-                className="shrink-0 text-text-muted hover:text-red transition-colors p-1"
-                title="Remove feed"
-              >
-                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                  <line x1="18" y1="6" x2="6" y2="18" />
-                  <line x1="6" y1="6" x2="18" y2="18" />
-                </svg>
-              </button>
-            </div>
-          ))}
-        </div>
-      )}
-      {feeds.length === 0 && (
-        <p className="text-[12px] text-text-muted mb-3">No feeds configured.</p>
-      )}
-
-      {/* Add feed form */}
-      <div className="border border-border/60 rounded-lg p-3 space-y-2">
-        <p className="text-[11px] font-semibold text-text-muted uppercase tracking-wide mb-1">Add Feed</p>
-        <div className="grid grid-cols-2 gap-2">
-          <div>
-            <label className="block text-[11px] text-text-muted mb-0.5">Name</label>
-            <input className={inputClass} value={newName} onChange={(e) => setNewName(e.target.value)} placeholder="e.g. CoinDesk" />
-          </div>
-          <div>
-            <label className="block text-[11px] text-text-muted mb-0.5">Source Tag</label>
-            <input className={inputClass} value={newSource} onChange={(e) => setNewSource(e.target.value)} placeholder="e.g. coindesk" />
-          </div>
-        </div>
-        <div>
-          <label className="block text-[11px] text-text-muted mb-0.5">Feed URL</label>
-          <input className={inputClass} value={newUrl} onChange={(e) => setNewUrl(e.target.value)} placeholder="https://example.com/rss.xml" />
-        </div>
-        <button
-          onClick={addFeed}
-          disabled={!newName.trim() || !newUrl.trim() || !newSource.trim()}
-          className="border border-border rounded-lg px-4 py-2 text-[13px] font-medium cursor-pointer transition-colors hover:bg-bg-tertiary hover:text-text text-text-muted disabled:opacity-40 disabled:cursor-default"
-        >
-          Add Feed
-        </button>
-      </div>
-    </div>
-  )
-}
-
-interface CompactNewsSettingsProps {
-  config: NewsCollectorConfig
-  onChange: (patch: Partial<NewsCollectorConfig>) => void
-  onChangeImmediate: (patch: Partial<NewsCollectorConfig>) => void
-}
-
-function CompactNewsSettings({ config, onChange }: CompactNewsSettingsProps) {
-  return (
-    <div className="border-t border-border pt-4 mt-4">
-      <p className="text-[11px] font-semibold text-text-muted uppercase tracking-wide mb-3">Settings</p>
-      <div className="grid grid-cols-2 gap-3">
-        <div>
-          <label className="block text-[11px] text-text-muted mb-0.5">Fetch interval (min)</label>
-          <input
-            className={inputClass}
-            type="number"
-            min={1}
-            value={config.intervalMinutes}
-            onChange={(e) => onChange({ intervalMinutes: Number(e.target.value) || 10 })}
-          />
-        </div>
-        <div>
-          <label className="block text-[11px] text-text-muted mb-0.5">Retention (days)</label>
-          <input
-            className={inputClass}
-            type="number"
-            min={1}
-            value={config.retentionDays}
-            onChange={(e) => onChange({ retentionDays: Number(e.target.value) || 7 })}
-          />
-        </div>
-      </div>
-    </div>
-  )
-}
-
-interface OpenIntelligenceZoneProps {
-  config: NewsCollectorConfig
-  enabled: boolean
-  onToggle: () => void
-  onChange: (patch: Partial<NewsCollectorConfig>) => void
-  onChangeImmediate: (patch: Partial<NewsCollectorConfig>) => void
-}
-
-function OpenIntelligenceZone({ config, enabled, onToggle, onChange, onChangeImmediate }: OpenIntelligenceZoneProps) {
-  const badge = config.feeds.length > 0 ? `${config.feeds.length} feeds` : undefined
-
-  return (
-    <Zone
-      title="News"
-      subtitle="RSS feeds & news archive — collect and search."
-      badge={badge}
-      enabled={enabled}
-      onToggle={onToggle}
-    >
-      <FeedsSection
-        feeds={config.feeds}
-        onChange={(feeds) => onChangeImmediate({ feeds })}
-      />
-      <CompactNewsSettings
-        config={config}
-        onChange={onChange}
-        onChangeImmediate={onChangeImmediate}
-      />
-    </Zone>
-  )
-}
-
-// ==================== Page ====================
-
-const DEFAULT_NEWS_CONFIG: NewsCollectorConfig = {
-  enabled: true,
-  intervalMinutes: 10,
-  maxInMemory: 2000,
-  retentionDays: 7,
-  feeds: [],
-}
-
-export function DataSourcesPage() {
-  const openbb = useConfigPage<OpenbbConfig>({
-    section: 'marketData',
-    extract: (full: AppConfig) => (full as Record<string, unknown>).marketData as OpenbbConfig,
-  })
-
-  const news = useConfigPage<NewsCollectorConfig>({
-    section: 'news',
-    extract: (full: AppConfig) => (full as Record<string, unknown>).news as NewsCollectorConfig,
-  })
-
-  const status = combineStatus(openbb.status, news.status)
-  const loadError = openbb.loadError || news.loadError
-  const retry = () => { openbb.retry(); news.retry() }
-
-  const openbbEnabled = !openbb.config || (openbb.config as Record<string, unknown>).enabled !== false
-  const newsEnabled = !news.config || news.config.enabled !== false
-
-  return (
-    <div className="flex flex-col flex-1 min-h-0">
-      <PageHeader
-        title="Data Sources"
-        description="Market data and news feed configuration."
-        right={<SaveIndicator status={status} onRetry={retry} />}
-      />
-
-      {/* Content */}
-      <div className="flex-1 overflow-y-auto px-4 md:px-6 py-5">
-        <div className="max-w-[640px] space-y-6">
-          {/* Market Data Engine zone */}
-          {openbb.config ? (
-            <MarketDataZone
-              openbb={openbb.config}
-              enabled={openbbEnabled}
-              onToggle={() => openbb.updateConfigImmediate({ enabled: !openbbEnabled } as Partial<OpenbbConfig>)}
-              onChange={openbb.updateConfig}
-              onChangeImmediate={openbb.updateConfigImmediate}
-            />
-          ) : (
-            <Zone
-              title="Market Data"
-              subtitle="Structured financial data — prices, fundamentals, macro indicators."
-              enabled={true}
-              onToggle={() => {}}
-            >
-              <p className="text-[12px] text-text-muted">Loading…</p>
-            </Zone>
-          )}
-
-          {/* Open Intelligence zone */}
-          {news.config ? (
-            <OpenIntelligenceZone
-              config={news.config}
-              enabled={newsEnabled}
-              onToggle={() => news.updateConfigImmediate({ enabled: !newsEnabled })}
-              onChange={news.updateConfig}
-              onChangeImmediate={news.updateConfigImmediate}
-            />
-          ) : (
-            <Zone
-              title="News"
-              subtitle="RSS feeds & news archive — collect and search."
-              enabled={true}
-              onToggle={() => {}}
-            >
-              <p className="text-[12px] text-text-muted">Loading…</p>
-            </Zone>
-          )}
-        </div>
-        {loadError && <p className="text-[13px] text-red mt-4">Failed to load configuration.</p>}
-      </div>
-    </div>
-  )
-}
diff --git a/ui/src/pages/MarketDataPage.tsx b/ui/src/pages/MarketDataPage.tsx
new file mode 100644
index 00000000..4c167dec
--- /dev/null
+++ b/ui/src/pages/MarketDataPage.tsx
@@ -0,0 +1,407 @@
+import { useState } from 'react'
+import { api, type AppConfig } from '../api'
+import { SaveIndicator } from '../components/SaveIndicator'
+import { Section, Field, inputClass } from '../components/form'
+import { Toggle } from '../components/Toggle'
+import { useConfigPage } from '../hooks/useConfigPage'
+import { PageHeader } from '../components/PageHeader'
+
+type MarketDataConfig = Record<string, unknown>
+
+// ==================== Constants ====================
+
+const PROVIDER_OPTIONS: Record<string, string[]> = {
+  equity: ['yfinance', 'fmp', 'intrinio', 'tiingo', 'alpha_vantage'],
+  crypto: ['yfinance', 'fmp', 'tiingo'],
+  currency: ['yfinance', 'fmp', 'tiingo'],
+}
+
+const ASSET_LABELS: Record<string, string> = {
+  equity: 'Equity',
+  crypto: 'Crypto',
+  currency: 'Currency',
+}
+
+/** Maps provider name → providerKeys key. null means free, no key required. */
+const PROVIDER_KEY_MAP: Record<string, string | null> = {
+  yfinance: null,
+  fmp: 'fmp',
+  intrinio: 'intrinio',
+  tiingo: 'tiingo',
+  alpha_vantage: 'alpha_vantage',
+  benzinga: 'benzinga',
+  biztoc: 'biztoc',
+}
+
+const UTILITY_PROVIDERS = [
+  { key: 'fred', name: 'FRED', desc: 'Federal Reserve Economic Data — CPI, GDP, interest rates, macro indicators.', hint: 'Free — fredaccount.stlouisfed.org/apikeys' },
+  { key: 'bls', name: 'BLS', desc: 'Bureau of Labor Statistics — employment, payrolls, wages, CPI.', hint: 'Free — registrationapps.bls.gov/bls_registration' },
+  { key: 'eia', name: 'EIA', desc: 'Energy Information Administration — petroleum status, energy reports.', hint: 'Free — eia.gov/opendata' },
+  { key: 'econdb', name: 'EconDB', desc: 'Global macro indicators, country profiles, shipping data.', hint: 'Optional — works without key (limited). econdb.com' },
+  { key: 'nasdaq', name: 'Nasdaq', desc: 'Nasdaq Data Link — dividend/earnings calendars, short interest.', hint: 'Freemium — data.nasdaq.com' },
+  { key: 'tradingeconomics', name: 'Trading Economics', desc: '20M+ indicators across 196 countries, economic calendar.', hint: 'Paid — tradingeconomics.com' },
+] as const
+
+// ==================== Test Button ====================
+
+function TestButton({
+  status,
+  disabled,
+  onClick,
+}: {
+  status: 'idle' | 'testing' | 'ok' | 'error'
+  disabled: boolean
+  onClick: () => void
+}) {
+  return (
+    <button
+      onClick={onClick}
+      disabled={disabled}
+      className={`shrink-0 border rounded-md px-3 py-2 text-[13px] font-medium cursor-pointer transition-colors disabled:opacity-40 disabled:cursor-default ${
+        status === 'ok'
+          ? 'border-green text-green'
+          : status === 'error'
+            ? 'border-red text-red'
+            : 'border-border text-text-muted hover:bg-bg-tertiary hover:text-text'
+      }`}
+    >
+      {status === 'testing' ? '…' : status === 'ok' ? 'OK' : status === 'error' ? 'Fail' : 'Test'}
+    </button>
+  )
+}
+
+// ==================== Asset Providers ====================
+
+interface AssetProviderGridProps {
+  providers: Record<string, string>
+  providerKeys: Record<string, string>
+  onProviderChange: (asset: string, provider: string) => void
+  onKeyChange: (keyName: string, value: string) => void
+}
+
+function AssetProviderGrid({ providers, providerKeys, onProviderChange, onKeyChange }: AssetProviderGridProps) {
+  const [localKeys, setLocalKeys] = useState<Record<string, string>>(() => ({ ...providerKeys }))
+  const [testStatus, setTestStatus] = useState<Record<string, 'idle' | 'testing' | 'ok' | 'error'>>({})
+
+  const handleKeyChange = (keyName: string, value: string) => {
+    setLocalKeys((prev) => ({ ...prev, [keyName]: value }))
+    setTestStatus((prev) => ({ ...prev, [keyName]: 'idle' }))
+    onKeyChange(keyName, value)
+  }
+
+  const testProvider = async (provider: string, keyName: string) => {
+    const key = localKeys[keyName]
+    if (!key) return
+    setTestStatus((prev) => ({ ...prev, [keyName]: 'testing' }))
+    try {
+      const result = await api.marketData.testProvider(provider, key)
+      setTestStatus((prev) => ({ ...prev, [keyName]: result.ok ? 'ok' : 'error' }))
+    } catch {
+      setTestStatus((prev) => ({ ...prev, [keyName]: 'error' }))
+    }
+  }
+
+  return (
+    <Section title="Asset Providers" description="Select a data provider for each asset class. Providers requiring an API key show a key input and test button.">
+      <div className="space-y-3">
+        {Object.entries(PROVIDER_OPTIONS).map(([asset, options]) => {
+          const selectedProvider = providers[asset] || options[0]
+          const keyName = PROVIDER_KEY_MAP[selectedProvider] ?? null
+          const status = keyName ? (testStatus[keyName] || 'idle') : 'idle'
+
+          return (
+            <div key={asset} className="flex items-center gap-3">
+              <span className="text-[13px] text-text w-20 shrink-0 font-medium">{ASSET_LABELS[asset]}</span>
+              <select
+                className={`${inputClass} max-w-[160px]`}
+                value={selectedProvider}
+                onChange={(e) => onProviderChange(asset, e.target.value)}
+              >
+                {options.map((opt) => <option key={opt} value={opt}>{opt}</option>)}
+              </select>
+              {keyName ? (
+                <>
+                  <input
+                    className={inputClass}
+                    type="password"
+                    value={localKeys[keyName] || ''}
+                    onChange={(e) => handleKeyChange(keyName, e.target.value)}
+                    placeholder="API key"
+                  />
+                  <TestButton
+                    status={status}
+                    disabled={!localKeys[keyName] || status === 'testing'}
+                    onClick={() => testProvider(selectedProvider, keyName)}
+                  />
+                </>
+              ) : (
+                <span className="text-[13px] text-text-muted/50 px-1">Free</span>
+              )}
+            </div>
+          )
+        })}
+      </div>
+    </Section>
+  )
+}
+
+// ==================== Utility Providers ====================
+
+interface UtilityProvidersSectionProps {
+  providerKeys: Record<string, string>
+  onKeyChange: (keyName: string, value: string) => void
+}
+
+function UtilityProvidersSection({ providerKeys, onKeyChange }: UtilityProvidersSectionProps) {
+  const [localKeys, setLocalKeys] = useState<Record<string, string>>(() => {
+    const init: Record<string, string> = {}
+    for (const p of UTILITY_PROVIDERS) init[p.key] = providerKeys[p.key] || ''
+    return init
+  })
+  const [testStatus, setTestStatus] = useState<Record<string, 'idle' | 'testing' | 'ok' | 'error'>>({})
+
+  const handleKeyChange = (keyName: string, value: string) => {
+    setLocalKeys((prev) => ({ ...prev, [keyName]: value }))
+    setTestStatus((prev) => ({ ...prev, [keyName]: 'idle' }))
+    onKeyChange(keyName, value)
+  }
+
+  const testProvider = async (keyName: string) => {
+    const key = localKeys[keyName]
+    if (!key) return
+    setTestStatus((prev) => ({ ...prev, [keyName]: 'testing' }))
+    try {
+      const result = await api.marketData.testProvider(keyName, key)
+      setTestStatus((prev) => ({ ...prev, [keyName]: result.ok ? 'ok' : 'error' }))
+    } catch {
+      setTestStatus((prev) => ({ ...prev, [keyName]: 'error' }))
+    }
+  }
+
+  return (
+    <Section title="Macro & Utility Providers" description="Used by dedicated macro endpoints (FRED for CPI/GDP, BLS for employment, EIA for energy). Not per-asset-class selectable.">
+      <div className="space-y-4">
+        {UTILITY_PROVIDERS.map(({ key, name, desc, hint }) => {
+          const status = testStatus[key] || 'idle'
+          return (
+            <Field key={key} label={name} description={hint}>
+              <p className="text-[12px] text-text-muted/70 mb-2">{desc}</p>
+              <div className="flex items-center gap-2">
+                <input
+                  className={inputClass}
+                  type="password"
+                  value={localKeys[key]}
+                  onChange={(e) => handleKeyChange(key, e.target.value)}
+                  placeholder="Not configured"
+                />
+                <TestButton
+                  status={status}
+                  disabled={!localKeys[key] || status === 'testing'}
+                  onClick={() => testProvider(key)}
+                />
+              </div>
+            </Field>
+          )
+        })}
+      </div>
+    </Section>
+  )
+}
+
+// ==================== Page ====================
+
+export function MarketDataPage() {
+  const { config, status, loadError, updateConfig, updateConfigImmediate, retry } = useConfigPage<MarketDataConfig>({
+    section: 'marketData',
+    extract: (full: AppConfig) => (full as Record<string, unknown>).marketData as MarketDataConfig,
+  })
+
+  const enabled = !config || (config as Record<string, unknown>).enabled !== false
+
+  if (!config) {
+    return (
+      <div className="flex flex-col flex-1 min-h-0">
+        <PageHeader title="Market Data" description="Structured financial data — prices, fundamentals, macro indicators." />
+        <div className="flex-1 flex items-center justify-center">
+          <p className="text-[13px] text-text-muted">Loading…</p>
+        </div>
+      </div>
+    )
+  }
+
+  const dataBackend = (config.backend as string) || 'typebb-sdk'
+  const apiUrl = (config.apiUrl as string) || 'http://localhost:6900'
+  const apiServer = (config.apiServer as { enabled: boolean; port: number } | undefined) ?? { enabled: false, port: 6901 }
+  const providers = (config.providers ?? { equity: 'yfinance', crypto: 'yfinance', currency: 'yfinance' }) as Record<string, string>
+  const providerKeys = (config.providerKeys ?? {}) as Record<string, string>
+
+  const handleProviderChange = (asset: string, provider: string) => {
+    updateConfigImmediate({ providers: { ...providers, [asset]: provider } })
+  }
+
+  const handleKeyChange = (keyName: string, value: string) => {
+    const all = (config.providerKeys ?? {}) as Record<string, string>
+    const updated = { ...all, [keyName]: value }
+    const cleaned: Record<string, string> = {}
+    for (const [k, v] of Object.entries(updated)) {
+      if (v) cleaned[k] = v
+    }
+    updateConfig({ providerKeys: cleaned })
+  }
+
+  return (
+    <div className="flex flex-col flex-1 min-h-0">
+      <PageHeader
+        title="Market Data"
+        description="Structured financial data — prices, fundamentals, macro indicators."
+        right={
+          <div className="flex items-center gap-3">
+            <SaveIndicator status={status} onRetry={retry} />
+            <Toggle size="sm" checked={enabled} onChange={(v) => updateConfigImmediate({ enabled: v })} />
+          </div>
+        }
+      />
+
+      <div className="flex-1 overflow-y-auto px-4 md:px-6 py-5">
+        <div className={`max-w-[640px] space-y-5 ${!enabled ? 'opacity-40 pointer-events-none' : ''}`}>
+          {/* Data Backend */}
+          <DataBackendSection
+            backend={dataBackend}
+            apiUrl={apiUrl}
+            onBackendChange={(backend) => { updateConfigImmediate({ backend }); }}
+            onApiUrlChange={(url) => updateConfig({ apiUrl: url })}
+          />
+
+          {/* Asset Providers */}
+          <AssetProviderGrid
+            providers={providers}
+            providerKeys={providerKeys}
+            onProviderChange={handleProviderChange}
+            onKeyChange={handleKeyChange}
+          />
+
+          {/* Embedded API Server */}
+          <Section title="Embedded API Server" description="Expose an OpenBB-compatible HTTP API from Alice. Other services can connect to query market data.">
+            <div className="flex items-center justify-between mb-3">
+              <div>
+                <p className="text-[13px] text-text">Enable HTTP server</p>
+                <p className="text-[12px] text-text-muted/60 mt-0.5">
+                  Serves at <span className="font-mono text-[11px]">http://localhost:{apiServer.port}</span>
+                </p>
+              </div>
+              <Toggle
+                size="sm"
+                checked={apiServer.enabled}
+                onChange={(v) => updateConfigImmediate({ apiServer: { ...apiServer, enabled: v } })}
+              />
+            </div>
+            {apiServer.enabled && (
+              <Field label="Port">
+                <input
+                  className={`${inputClass} w-28`}
+                  type="number"
+                  min={1024}
+                  max={65535}
+                  value={apiServer.port}
+                  onChange={(e) => updateConfig({ apiServer: { ...apiServer, port: Number(e.target.value) || 6901 } })}
+                />
+              </Field>
+            )}
+          </Section>
+
+          {/* Macro & Utility Providers */}
+          <UtilityProvidersSection
+            providerKeys={providerKeys}
+            onKeyChange={handleKeyChange}
+          />
+        </div>
+        {loadError && <p className="text-[13px] text-red mt-4">Failed to load configuration.</p>}
+      </div>
+    </div>
+  )
+}
+
+// ==================== Data Backend Section ====================
+
+function DataBackendSection({
+  backend,
+  apiUrl,
+  onBackendChange,
+  onApiUrlChange,
+}: {
+  backend: string
+  apiUrl: string
+  onBackendChange: (backend: string) => void
+  onApiUrlChange: (url: string) => void
+}) {
+  const [testing, setTesting] = useState(false)
+  const [testStatus, setTestStatus] = useState<'idle' | 'ok' | 'error'>('idle')
+
+  const testConnection = async () => {
+    setTesting(true)
+    setTestStatus('idle')
+    try {
+      const res = await fetch(`${apiUrl}/api/v1/equity/search?query=AAPL&provider=sec`, { signal: AbortSignal.timeout(5000) })
+      setTestStatus(res.ok ? 'ok' : 'error')
+    } catch {
+      setTestStatus('error')
+    } finally {
+      setTesting(false)
+    }
+  }
+
+  return (
+    <Section title="Data Backend" description="Choose between the built-in TypeBB engine or an external OpenBB-compatible API.">
+      <div className="flex border border-border rounded-lg overflow-hidden w-fit mb-3">
+        {(['typebb-sdk', 'openbb-api'] as const).map((opt, i) => (
+          <button
+            key={opt}
+            onClick={() => { onBackendChange(opt); setTestStatus('idle') }}
+            className={`px-4 py-1.5 text-[13px] font-medium transition-colors cursor-pointer ${
+              i > 0 ? 'border-l border-border' : ''
+            } ${
+              backend === opt
+                ? 'bg-bg-tertiary text-text'
+                : 'text-text-muted hover:text-text'
+            }`}
+          >
+            {opt === 'typebb-sdk' ? 'Built-in Engine (TypeBB)' : 'External OpenBB API'}
+          </button>
+        ))}
+      </div>
+      <p className="text-[13px] text-text-muted/70">
+        {backend === 'typebb-sdk'
+          ? 'Uses the built-in TypeBB engine. No external process required.'
+          : 'Connects to an external OpenBB-compatible HTTP endpoint.'}
+      </p>
+
+      {backend === 'openbb-api' && (
+        <div className="mt-4">
+          <Field label="API URL">
+            <div className="flex items-center gap-2">
+              <input
+                className={inputClass}
+                value={apiUrl}
+                onChange={(e) => { onApiUrlChange(e.target.value); setTestStatus('idle') }}
+                placeholder="http://localhost:6900"
+              />
+              <button
+                onClick={testConnection}
+                disabled={testing}
+                className={`shrink-0 border rounded-lg px-4 py-2 text-[13px] font-medium cursor-pointer transition-colors disabled:opacity-50 ${
+                  testStatus === 'ok'
+                    ? 'border-green text-green'
+                    : testStatus === 'error'
+                      ? 'border-red text-red'
+                      : 'border-border text-text-muted hover:bg-bg-tertiary hover:text-text'
+                }`}
+              >
+                {testing ? 'Testing…' : testStatus === 'ok' ? 'Connected' : testStatus === 'error' ? 'Failed' : 'Test'}
+              </button>
+            </div>
+          </Field>
+        </div>
+      )}
+    </Section>
+  )
+}
diff --git a/ui/src/pages/NewsPage.tsx b/ui/src/pages/NewsPage.tsx
new file mode 100644
index 00000000..8768cdea
--- /dev/null
+++ b/ui/src/pages/NewsPage.tsx
@@ -0,0 +1,159 @@
+import { useState } from 'react'
+import { type AppConfig, type NewsCollectorConfig, type NewsCollectorFeed } from '../api'
+import { SaveIndicator } from '../components/SaveIndicator'
+import { Section, Field, inputClass } from '../components/form'
+import { Toggle } from '../components/Toggle'
+import { useConfigPage } from '../hooks/useConfigPage'
+import { PageHeader } from '../components/PageHeader'
+
+// ==================== Feeds Section ====================
+
+function FeedsSection({
+  feeds,
+  onChange,
+}: {
+  feeds: NewsCollectorFeed[]
+  onChange: (feeds: NewsCollectorFeed[]) => void
+}) {
+  const [newName, setNewName] = useState('')
+  const [newUrl, setNewUrl] = useState('')
+  const [newSource, setNewSource] = useState('')
+
+  const removeFeed = (index: number) => onChange(feeds.filter((_, i) => i !== index))
+
+  const addFeed = () => {
+    if (!newName.trim() || !newUrl.trim() || !newSource.trim()) return
+    onChange([...feeds, { name: newName.trim(), url: newUrl.trim(), source: newSource.trim() }])
+    setNewName('')
+    setNewUrl('')
+    setNewSource('')
+  }
+
+  return (
+    <Section
+      title="RSS Feeds"
+      description={feeds.length > 0 ? `${feeds.length} feed${feeds.length > 1 ? 's' : ''} configured. Articles are searchable via globNews / grepNews / readNews.` : 'No feeds configured. Add feeds below to start collecting articles.'}
+    >
+      {/* Existing feeds */}
+      {feeds.length > 0 && (
+        <div className="space-y-2 mb-4">
+          {feeds.map((feed, i) => (
+            <div
+              key={`${feed.source}-${i}`}
+              className="flex items-center gap-3 border border-border/60 rounded-lg px-3 py-2.5"
+            >
+              <div className="flex-1 min-w-0">
+                <p className="text-[13px] font-medium text-text truncate">{feed.name}</p>
+                <p className="text-[12px] text-text-muted truncate">{feed.url}</p>
+                <p className="text-[11px] text-text-muted/50 mt-0.5">source: {feed.source}</p>
+              </div>
+              <button
+                onClick={() => removeFeed(i)}
+                className="shrink-0 text-text-muted hover:text-red transition-colors p-1"
+                title="Remove feed"
+              >
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                  <line x1="18" y1="6" x2="6" y2="18" />
+                  <line x1="6" y1="6" x2="18" y2="18" />
+                </svg>
+              </button>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Add feed form */}
+      <div className="border border-border/40 rounded-lg p-4 space-y-3">
+        <p className="text-[13px] font-medium text-text-muted">Add Feed</p>
+        <div className="grid grid-cols-2 gap-3">
+          <Field label="Name">
+            <input className={inputClass} value={newName} onChange={(e) => setNewName(e.target.value)} placeholder="e.g. CoinDesk" />
+          </Field>
+          <Field label="Source Tag">
+            <input className={inputClass} value={newSource} onChange={(e) => setNewSource(e.target.value)} placeholder="e.g. coindesk" />
+          </Field>
+        </div>
+        <Field label="Feed URL">
+          <input className={inputClass} value={newUrl} onChange={(e) => setNewUrl(e.target.value)} placeholder="https://example.com/rss.xml" />
+        </Field>
+        <button
+          onClick={addFeed}
+          disabled={!newName.trim() || !newUrl.trim() || !newSource.trim()}
+          className="border border-border rounded-lg px-4 py-2 text-[13px] font-medium cursor-pointer transition-colors hover:bg-bg-tertiary hover:text-text text-text-muted disabled:opacity-40 disabled:cursor-default"
+        >
+          Add Feed
+        </button>
+      </div>
+    </Section>
+  )
+}
+
+// ==================== Page ====================
+
+const DEFAULT_NEWS_CONFIG: NewsCollectorConfig = {
+  enabled: true,
+  intervalMinutes: 10,
+  maxInMemory: 2000,
+  retentionDays: 7,
+  feeds: [],
+}
+
+export function NewsPage() {
+  const { config, status, loadError, updateConfig, updateConfigImmediate, retry } = useConfigPage<NewsCollectorConfig>({
+    section: 'news',
+    extract: (full: AppConfig) => (full as Record<string, unknown>).news as NewsCollectorConfig,
+  })
+
+  const cfg = config ?? DEFAULT_NEWS_CONFIG
+  const enabled = cfg.enabled !== false
+
+  return (
+    <div className="flex flex-col flex-1 min-h-0">
+      <PageHeader
+        title="News"
+        description="RSS feed collection and article archive."
+        right={
+          <div className="flex items-center gap-3">
+            <SaveIndicator status={status} onRetry={retry} />
+            <Toggle size="sm" checked={enabled} onChange={(v) => updateConfigImmediate({ enabled: v })} />
+          </div>
+        }
+      />
+
+      <div className="flex-1 overflow-y-auto px-4 md:px-6 py-5">
+        <div className={`max-w-[640px] space-y-5 ${!enabled ? 'opacity-40 pointer-events-none' : ''}`}>
+          {/* Collection Settings */}
+          <Section title="Collection Settings" description="Control how often articles are fetched and how long they are retained.">
+            <div className="grid grid-cols-2 gap-4">
+              <Field label="Fetch interval (min)">
+                <input
+                  className={inputClass}
+                  type="number"
+                  min={1}
+                  value={cfg.intervalMinutes}
+                  onChange={(e) => updateConfig({ intervalMinutes: Number(e.target.value) || 10 })}
+                />
+              </Field>
+              <Field label="Retention (days)">
+                <input
+                  className={inputClass}
+                  type="number"
+                  min={1}
+                  value={cfg.retentionDays}
+                  onChange={(e) => updateConfig({ retentionDays: Number(e.target.value) || 7 })}
+                />
+              </Field>
+            </div>
+          </Section>
+
+          {/* RSS Feeds */}
+          <FeedsSection
+            feeds={cfg.feeds}
+            onChange={(feeds) => updateConfigImmediate({ feeds })}
+          />
+        </div>
+        {loadError && <p className="text-[13px] text-red mt-4">Failed to load configuration.</p>}
+      </div>
+    </div>
+  )
+}

From eb85fd48675ea0017da0e17f0a998474c8aec77f Mon Sep 17 00:00:00 2001
From: Ame <luokerenx4@163.com>
Date: Thu, 19 Mar 2026 12:04:19 +0800
Subject: [PATCH 4/6] ui: description-aside layout for config pages
 (MarketData, News)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add ConfigSection component — two-column settings layout with
title/description on the left and controls on the right. Wider
content area (880px, centered) replaces narrow left-aligned 640px.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 ui/src/components/form.tsx      |  23 +++
 ui/src/pages/MarketDataPage.tsx | 312 +++++++++++++++++---------------
 ui/src/pages/NewsPage.tsx       | 155 ++++++++--------
 3 files changed, 269 insertions(+), 221 deletions(-)

diff --git a/ui/src/components/form.tsx b/ui/src/components/form.tsx
index aa19b01a..b1e5ff63 100644
--- a/ui/src/components/form.tsx
+++ b/ui/src/components/form.tsx
@@ -45,6 +45,29 @@ export function Section({ id, title, description, children }: SectionProps) {
   )
 }
 
+// ==================== ConfigSection ====================
+
+/** Two-column settings layout: title + description on the left, controls on the right. */
+interface ConfigSectionProps {
+  title: string
+  description?: string
+  children: ReactNode
+}
+
+export function ConfigSection({ title, description, children }: ConfigSectionProps) {
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-[260px_1fr] gap-1 md:gap-10 py-6 border-b border-border/60 last:border-b-0">
+      <div className="mb-3 md:mb-0 md:pt-0.5">
+        <h3 className="text-[14px] font-semibold text-text">{title}</h3>
+        {description && (
+          <p className="text-[13px] text-text-muted/70 mt-1.5 leading-relaxed">{description}</p>
+        )}
+      </div>
+      <div>{children}</div>
+    </div>
+  )
+}
+
 // ==================== Field ====================
 
 interface FieldProps {
diff --git a/ui/src/pages/MarketDataPage.tsx b/ui/src/pages/MarketDataPage.tsx
index 4c167dec..49e3d1e7 100644
--- a/ui/src/pages/MarketDataPage.tsx
+++ b/ui/src/pages/MarketDataPage.tsx
@@ -1,7 +1,7 @@
 import { useState } from 'react'
 import { api, type AppConfig } from '../api'
 import { SaveIndicator } from '../components/SaveIndicator'
-import { Section, Field, inputClass } from '../components/form'
+import { ConfigSection, Field, inputClass } from '../components/form'
 import { Toggle } from '../components/Toggle'
 import { useConfigPage } from '../hooks/useConfigPage'
 import { PageHeader } from '../components/PageHeader'
@@ -70,144 +70,6 @@ function TestButton({
   )
 }
 
-// ==================== Asset Providers ====================
-
-interface AssetProviderGridProps {
-  providers: Record<string, string>
-  providerKeys: Record<string, string>
-  onProviderChange: (asset: string, provider: string) => void
-  onKeyChange: (keyName: string, value: string) => void
-}
-
-function AssetProviderGrid({ providers, providerKeys, onProviderChange, onKeyChange }: AssetProviderGridProps) {
-  const [localKeys, setLocalKeys] = useState<Record<string, string>>(() => ({ ...providerKeys }))
-  const [testStatus, setTestStatus] = useState<Record<string, 'idle' | 'testing' | 'ok' | 'error'>>({})
-
-  const handleKeyChange = (keyName: string, value: string) => {
-    setLocalKeys((prev) => ({ ...prev, [keyName]: value }))
-    setTestStatus((prev) => ({ ...prev, [keyName]: 'idle' }))
-    onKeyChange(keyName, value)
-  }
-
-  const testProvider = async (provider: string, keyName: string) => {
-    const key = localKeys[keyName]
-    if (!key) return
-    setTestStatus((prev) => ({ ...prev, [keyName]: 'testing' }))
-    try {
-      const result = await api.marketData.testProvider(provider, key)
-      setTestStatus((prev) => ({ ...prev, [keyName]: result.ok ? 'ok' : 'error' }))
-    } catch {
-      setTestStatus((prev) => ({ ...prev, [keyName]: 'error' }))
-    }
-  }
-
-  return (
-    <Section title="Asset Providers" description="Select a data provider for each asset class. Providers requiring an API key show a key input and test button.">
-      <div className="space-y-3">
-        {Object.entries(PROVIDER_OPTIONS).map(([asset, options]) => {
-          const selectedProvider = providers[asset] || options[0]
-          const keyName = PROVIDER_KEY_MAP[selectedProvider] ?? null
-          const status = keyName ? (testStatus[keyName] || 'idle') : 'idle'
-
-          return (
-            <div key={asset} className="flex items-center gap-3">
-              <span className="text-[13px] text-text w-20 shrink-0 font-medium">{ASSET_LABELS[asset]}</span>
-              <select
-                className={`${inputClass} max-w-[160px]`}
-                value={selectedProvider}
-                onChange={(e) => onProviderChange(asset, e.target.value)}
-              >
-                {options.map((opt) => <option key={opt} value={opt}>{opt}</option>)}
-              </select>
-              {keyName ? (
-                <>
-                  <input
-                    className={inputClass}
-                    type="password"
-                    value={localKeys[keyName] || ''}
-                    onChange={(e) => handleKeyChange(keyName, e.target.value)}
-                    placeholder="API key"
-                  />
-                  <TestButton
-                    status={status}
-                    disabled={!localKeys[keyName] || status === 'testing'}
-                    onClick={() => testProvider(selectedProvider, keyName)}
-                  />
-                </>
-              ) : (
-                <span className="text-[13px] text-text-muted/50 px-1">Free</span>
-              )}
-            </div>
-          )
-        })}
-      </div>
-    </Section>
-  )
-}
-
-// ==================== Utility Providers ====================
-
-interface UtilityProvidersSectionProps {
-  providerKeys: Record<string, string>
-  onKeyChange: (keyName: string, value: string) => void
-}
-
-function UtilityProvidersSection({ providerKeys, onKeyChange }: UtilityProvidersSectionProps) {
-  const [localKeys, setLocalKeys] = useState<Record<string, string>>(() => {
-    const init: Record<string, string> = {}
-    for (const p of UTILITY_PROVIDERS) init[p.key] = providerKeys[p.key] || ''
-    return init
-  })
-  const [testStatus, setTestStatus] = useState<Record<string, 'idle' | 'testing' | 'ok' | 'error'>>({})
-
-  const handleKeyChange = (keyName: string, value: string) => {
-    setLocalKeys((prev) => ({ ...prev, [keyName]: value }))
-    setTestStatus((prev) => ({ ...prev, [keyName]: 'idle' }))
-    onKeyChange(keyName, value)
-  }
-
-  const testProvider = async (keyName: string) => {
-    const key = localKeys[keyName]
-    if (!key) return
-    setTestStatus((prev) => ({ ...prev, [keyName]: 'testing' }))
-    try {
-      const result = await api.marketData.testProvider(keyName, key)
-      setTestStatus((prev) => ({ ...prev, [keyName]: result.ok ? 'ok' : 'error' }))
-    } catch {
-      setTestStatus((prev) => ({ ...prev, [keyName]: 'error' }))
-    }
-  }
-
-  return (
-    <Section title="Macro & Utility Providers" description="Used by dedicated macro endpoints (FRED for CPI/GDP, BLS for employment, EIA for energy). Not per-asset-class selectable.">
-      <div className="space-y-4">
-        {UTILITY_PROVIDERS.map(({ key, name, desc, hint }) => {
-          const status = testStatus[key] || 'idle'
-          return (
-            <Field key={key} label={name} description={hint}>
-              <p className="text-[12px] text-text-muted/70 mb-2">{desc}</p>
-              <div className="flex items-center gap-2">
-                <input
-                  className={inputClass}
-                  type="password"
-                  value={localKeys[key]}
-                  onChange={(e) => handleKeyChange(key, e.target.value)}
-                  placeholder="Not configured"
-                />
-                <TestButton
-                  status={status}
-                  disabled={!localKeys[key] || status === 'testing'}
-                  onClick={() => testProvider(key)}
-                />
-              </div>
-            </Field>
-          )
-        })}
-      </div>
-    </Section>
-  )
-}
-
 // ==================== Page ====================
 
 export function MarketDataPage() {
@@ -262,8 +124,8 @@ export function MarketDataPage() {
         }
       />
 
-      <div className="flex-1 overflow-y-auto px-4 md:px-6 py-5">
-        <div className={`max-w-[640px] space-y-5 ${!enabled ? 'opacity-40 pointer-events-none' : ''}`}>
+      <div className="flex-1 overflow-y-auto px-4 md:px-8 py-5">
+        <div className={`max-w-[880px] mx-auto ${!enabled ? 'opacity-40 pointer-events-none' : ''}`}>
           {/* Data Backend */}
           <DataBackendSection
             backend={dataBackend}
@@ -273,7 +135,7 @@ export function MarketDataPage() {
           />
 
           {/* Asset Providers */}
-          <AssetProviderGrid
+          <AssetProvidersSection
             providers={providers}
             providerKeys={providerKeys}
             onProviderChange={handleProviderChange}
@@ -281,7 +143,10 @@ export function MarketDataPage() {
           />
 
           {/* Embedded API Server */}
-          <Section title="Embedded API Server" description="Expose an OpenBB-compatible HTTP API from Alice. Other services can connect to query market data.">
+          <ConfigSection
+            title="Embedded API Server"
+            description="Expose an OpenBB-compatible HTTP API from Alice. Other services can connect to query market data."
+          >
             <div className="flex items-center justify-between mb-3">
               <div>
                 <p className="text-[13px] text-text">Enable HTTP server</p>
@@ -307,7 +172,7 @@ export function MarketDataPage() {
                 />
               </Field>
             )}
-          </Section>
+          </ConfigSection>
 
           {/* Macro & Utility Providers */}
           <UtilityProvidersSection
@@ -315,7 +180,7 @@ export function MarketDataPage() {
             onKeyChange={handleKeyChange}
           />
         </div>
-        {loadError && <p className="text-[13px] text-red mt-4">Failed to load configuration.</p>}
+        {loadError && <p className="text-[13px] text-red mt-4 max-w-[880px] mx-auto">Failed to load configuration.</p>}
       </div>
     </div>
   )
@@ -351,7 +216,10 @@ function DataBackendSection({
   }
 
   return (
-    <Section title="Data Backend" description="Choose between the built-in TypeBB engine or an external OpenBB-compatible API.">
+    <ConfigSection
+      title="Data Backend"
+      description="Choose between the built-in TypeBB engine or an external OpenBB-compatible API."
+    >
       <div className="flex border border-border rounded-lg overflow-hidden w-fit mb-3">
         {(['typebb-sdk', 'openbb-api'] as const).map((opt, i) => (
           <button
@@ -402,6 +270,156 @@ function DataBackendSection({
           </Field>
         </div>
       )}
-    </Section>
+    </ConfigSection>
+  )
+}
+
+// ==================== Asset Providers Section ====================
+
+function AssetProvidersSection({
+  providers,
+  providerKeys,
+  onProviderChange,
+  onKeyChange,
+}: AssetProviderGridProps) {
+  const [localKeys, setLocalKeys] = useState<Record<string, string>>(() => ({ ...providerKeys }))
+  const [testStatus, setTestStatus] = useState<Record<string, 'idle' | 'testing' | 'ok' | 'error'>>({})
+
+  const handleKeyChange = (keyName: string, value: string) => {
+    setLocalKeys((prev) => ({ ...prev, [keyName]: value }))
+    setTestStatus((prev) => ({ ...prev, [keyName]: 'idle' }))
+    onKeyChange(keyName, value)
+  }
+
+  const testProvider = async (provider: string, keyName: string) => {
+    const key = localKeys[keyName]
+    if (!key) return
+    setTestStatus((prev) => ({ ...prev, [keyName]: 'testing' }))
+    try {
+      const result = await api.marketData.testProvider(provider, key)
+      setTestStatus((prev) => ({ ...prev, [keyName]: result.ok ? 'ok' : 'error' }))
+    } catch {
+      setTestStatus((prev) => ({ ...prev, [keyName]: 'error' }))
+    }
+  }
+
+  return (
+    <ConfigSection
+      title="Asset Providers"
+      description="Select a data provider for each asset class. Providers requiring an API key show a key input and test button."
+    >
+      <div className="space-y-3">
+        {Object.entries(PROVIDER_OPTIONS).map(([asset, options]) => {
+          const selectedProvider = providers[asset] || options[0]
+          const keyName = PROVIDER_KEY_MAP[selectedProvider] ?? null
+          const status = keyName ? (testStatus[keyName] || 'idle') : 'idle'
+
+          return (
+            <div key={asset} className="flex items-center gap-3">
+              <span className="text-[13px] text-text w-20 shrink-0 font-medium">{ASSET_LABELS[asset]}</span>
+              <select
+                className={`${inputClass} max-w-[160px]`}
+                value={selectedProvider}
+                onChange={(e) => onProviderChange(asset, e.target.value)}
+              >
+                {options.map((opt) => <option key={opt} value={opt}>{opt}</option>)}
+              </select>
+              {keyName ? (
+                <>
+                  <input
+                    className={inputClass}
+                    type="password"
+                    value={localKeys[keyName] || ''}
+                    onChange={(e) => handleKeyChange(keyName, e.target.value)}
+                    placeholder="API key"
+                  />
+                  <TestButton
+                    status={status}
+                    disabled={!localKeys[keyName] || status === 'testing'}
+                    onClick={() => testProvider(selectedProvider, keyName)}
+                  />
+                </>
+              ) : (
+                <span className="text-[13px] text-text-muted/50 px-1">Free</span>
+              )}
+            </div>
+          )
+        })}
+      </div>
+    </ConfigSection>
+  )
+}
+
+interface AssetProviderGridProps {
+  providers: Record<string, string>
+  providerKeys: Record<string, string>
+  onProviderChange: (asset: string, provider: string) => void
+  onKeyChange: (keyName: string, value: string) => void
+}
+
+// ==================== Utility Providers Section ====================
+
+function UtilityProvidersSection({
+  providerKeys,
+  onKeyChange,
+}: {
+  providerKeys: Record<string, string>
+  onKeyChange: (keyName: string, value: string) => void
+}) {
+  const [localKeys, setLocalKeys] = useState<Record<string, string>>(() => {
+    const init: Record<string, string> = {}
+    for (const p of UTILITY_PROVIDERS) init[p.key] = providerKeys[p.key] || ''
+    return init
+  })
+  const [testStatus, setTestStatus] = useState<Record<string, 'idle' | 'testing' | 'ok' | 'error'>>({})
+
+  const handleKeyChange = (keyName: string, value: string) => {
+    setLocalKeys((prev) => ({ ...prev, [keyName]: value }))
+    setTestStatus((prev) => ({ ...prev, [keyName]: 'idle' }))
+    onKeyChange(keyName, value)
+  }
+
+  const testProvider = async (keyName: string) => {
+    const key = localKeys[keyName]
+    if (!key) return
+    setTestStatus((prev) => ({ ...prev, [keyName]: 'testing' }))
+    try {
+      const result = await api.marketData.testProvider(keyName, key)
+      setTestStatus((prev) => ({ ...prev, [keyName]: result.ok ? 'ok' : 'error' }))
+    } catch {
+      setTestStatus((prev) => ({ ...prev, [keyName]: 'error' }))
+    }
+  }
+
+  return (
+    <ConfigSection
+      title="Macro & Utility Providers"
+      description="Used by dedicated macro endpoints — FRED for CPI/GDP, BLS for employment, EIA for energy. Not per-asset-class selectable."
+    >
+      <div className="space-y-4">
+        {UTILITY_PROVIDERS.map(({ key, name, desc, hint }) => {
+          const status = testStatus[key] || 'idle'
+          return (
+            <Field key={key} label={name} description={hint}>
+              <p className="text-[12px] text-text-muted/70 mb-2">{desc}</p>
+              <div className="flex items-center gap-2">
+                <input
+                  className={inputClass}
+                  type="password"
+                  value={localKeys[key]}
+                  onChange={(e) => handleKeyChange(key, e.target.value)}
+                  placeholder="Not configured"
+                />
+                <TestButton
+                  status={status}
+                  disabled={!localKeys[key] || status === 'testing'}
+                  onClick={() => testProvider(key)}
+                />
+              </div>
+            </Field>
+          )
+        })}
+      </div>
+    </ConfigSection>
   )
 }
diff --git a/ui/src/pages/NewsPage.tsx b/ui/src/pages/NewsPage.tsx
index 8768cdea..fa6a30fb 100644
--- a/ui/src/pages/NewsPage.tsx
+++ b/ui/src/pages/NewsPage.tsx
@@ -1,11 +1,84 @@
 import { useState } from 'react'
 import { type AppConfig, type NewsCollectorConfig, type NewsCollectorFeed } from '../api'
 import { SaveIndicator } from '../components/SaveIndicator'
-import { Section, Field, inputClass } from '../components/form'
+import { ConfigSection, Field, inputClass } from '../components/form'
 import { Toggle } from '../components/Toggle'
 import { useConfigPage } from '../hooks/useConfigPage'
 import { PageHeader } from '../components/PageHeader'
 
+// ==================== Page ====================
+
+const DEFAULT_NEWS_CONFIG: NewsCollectorConfig = {
+  enabled: true,
+  intervalMinutes: 10,
+  maxInMemory: 2000,
+  retentionDays: 7,
+  feeds: [],
+}
+
+export function NewsPage() {
+  const { config, status, loadError, updateConfig, updateConfigImmediate, retry } = useConfigPage<NewsCollectorConfig>({
+    section: 'news',
+    extract: (full: AppConfig) => (full as Record<string, unknown>).news as NewsCollectorConfig,
+  })
+
+  const cfg = config ?? DEFAULT_NEWS_CONFIG
+  const enabled = cfg.enabled !== false
+
+  return (
+    <div className="flex flex-col flex-1 min-h-0">
+      <PageHeader
+        title="News"
+        description="RSS feed collection and article archive."
+        right={
+          <div className="flex items-center gap-3">
+            <SaveIndicator status={status} onRetry={retry} />
+            <Toggle size="sm" checked={enabled} onChange={(v) => updateConfigImmediate({ enabled: v })} />
+          </div>
+        }
+      />
+
+      <div className="flex-1 overflow-y-auto px-4 md:px-8 py-5">
+        <div className={`max-w-[880px] mx-auto ${!enabled ? 'opacity-40 pointer-events-none' : ''}`}>
+          {/* Collection Settings */}
+          <ConfigSection
+            title="Collection Settings"
+            description="Control how often articles are fetched and how long they are retained in the archive."
+          >
+            <div className="grid grid-cols-2 gap-4">
+              <Field label="Fetch interval (min)">
+                <input
+                  className={inputClass}
+                  type="number"
+                  min={1}
+                  value={cfg.intervalMinutes}
+                  onChange={(e) => updateConfig({ intervalMinutes: Number(e.target.value) || 10 })}
+                />
+              </Field>
+              <Field label="Retention (days)">
+                <input
+                  className={inputClass}
+                  type="number"
+                  min={1}
+                  value={cfg.retentionDays}
+                  onChange={(e) => updateConfig({ retentionDays: Number(e.target.value) || 7 })}
+                />
+              </Field>
+            </div>
+          </ConfigSection>
+
+          {/* RSS Feeds */}
+          <FeedsSection
+            feeds={cfg.feeds}
+            onChange={(feeds) => updateConfigImmediate({ feeds })}
+          />
+        </div>
+        {loadError && <p className="text-[13px] text-red mt-4 max-w-[880px] mx-auto">Failed to load configuration.</p>}
+      </div>
+    </div>
+  )
+}
+
 // ==================== Feeds Section ====================
 
 function FeedsSection({
@@ -30,9 +103,13 @@ function FeedsSection({
   }
 
   return (
-    <Section
+    <ConfigSection
       title="RSS Feeds"
-      description={feeds.length > 0 ? `${feeds.length} feed${feeds.length > 1 ? 's' : ''} configured. Articles are searchable via globNews / grepNews / readNews.` : 'No feeds configured. Add feeds below to start collecting articles.'}
+      description={
+        feeds.length > 0
+          ? `${feeds.length} feed${feeds.length > 1 ? 's' : ''} configured. Articles are searchable via globNews, grepNews, and readNews tools.`
+          : 'No feeds configured yet. Add feeds to start collecting articles.'
+      }
     >
       {/* Existing feeds */}
       {feeds.length > 0 && (
@@ -84,76 +161,6 @@ function FeedsSection({
           Add Feed
         </button>
       </div>
-    </Section>
-  )
-}
-
-// ==================== Page ====================
-
-const DEFAULT_NEWS_CONFIG: NewsCollectorConfig = {
-  enabled: true,
-  intervalMinutes: 10,
-  maxInMemory: 2000,
-  retentionDays: 7,
-  feeds: [],
-}
-
-export function NewsPage() {
-  const { config, status, loadError, updateConfig, updateConfigImmediate, retry } = useConfigPage<NewsCollectorConfig>({
-    section: 'news',
-    extract: (full: AppConfig) => (full as Record<string, unknown>).news as NewsCollectorConfig,
-  })
-
-  const cfg = config ?? DEFAULT_NEWS_CONFIG
-  const enabled = cfg.enabled !== false
-
-  return (
-    <div className="flex flex-col flex-1 min-h-0">
-      <PageHeader
-        title="News"
-        description="RSS feed collection and article archive."
-        right={
-          <div className="flex items-center gap-3">
-            <SaveIndicator status={status} onRetry={retry} />
-            <Toggle size="sm" checked={enabled} onChange={(v) => updateConfigImmediate({ enabled: v })} />
-          </div>
-        }
-      />
-
-      <div className="flex-1 overflow-y-auto px-4 md:px-6 py-5">
-        <div className={`max-w-[640px] space-y-5 ${!enabled ? 'opacity-40 pointer-events-none' : ''}`}>
-          {/* Collection Settings */}
-          <Section title="Collection Settings" description="Control how often articles are fetched and how long they are retained.">
-            <div className="grid grid-cols-2 gap-4">
-              <Field label="Fetch interval (min)">
-                <input
-                  className={inputClass}
-                  type="number"
-                  min={1}
-                  value={cfg.intervalMinutes}
-                  onChange={(e) => updateConfig({ intervalMinutes: Number(e.target.value) || 10 })}
-                />
-              </Field>
-              <Field label="Retention (days)">
-                <input
-                  className={inputClass}
-                  type="number"
-                  min={1}
-                  value={cfg.retentionDays}
-                  onChange={(e) => updateConfig({ retentionDays: Number(e.target.value) || 7 })}
-                />
-              </Field>
-            </div>
-          </Section>
-
-          {/* RSS Feeds */}
-          <FeedsSection
-            feeds={cfg.feeds}
-            onChange={(feeds) => updateConfigImmediate({ feeds })}
-          />
-        </div>
-        {loadError && <p className="text-[13px] text-red mt-4">Failed to load configuration.</p>}
-      </div>
-    </div>
+    </ConfigSection>
   )
 }

From e9120569358f0e6fc51ec7d1f6fb2022e8a1eb7c Mon Sep 17 00:00:00 2001
From: Ame <luokerenx4@163.com>
Date: Thu, 19 Mar 2026 12:08:30 +0800
Subject: [PATCH 5/6] ui: apply ConfigSection layout to Settings, Connectors,
 AI Provider

Consistent two-column description-aside layout across all config
pages. Wider content area (880px centered) replaces 640px left-aligned.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 ui/src/pages/AIProviderPage.tsx | 18 +++++++++---------
 ui/src/pages/ConnectorsPage.tsx | 26 +++++++++++++-------------
 ui/src/pages/SettingsPage.tsx   | 14 +++++++-------
 3 files changed, 29 insertions(+), 29 deletions(-)

diff --git a/ui/src/pages/AIProviderPage.tsx b/ui/src/pages/AIProviderPage.tsx
index 9d33118b..74d9bef1 100644
--- a/ui/src/pages/AIProviderPage.tsx
+++ b/ui/src/pages/AIProviderPage.tsx
@@ -1,7 +1,7 @@
 import { useState, useEffect, useCallback, useRef, useMemo } from 'react'
 import { api, type AppConfig, type AIProviderConfig, type LoginMethod } from '../api'
 import { SaveIndicator } from '../components/SaveIndicator'
-import { Section, Field, inputClass } from '../components/form'
+import { ConfigSection, Field, inputClass } from '../components/form'
 import { useAutoSave, type SaveStatus } from '../hooks/useAutoSave'
 import { PageHeader } from '../components/PageHeader'
 import { PageLoading } from '../components/StateViews'
@@ -98,10 +98,10 @@ export function AIProviderPage() {
       <PageHeader title="AI Provider" description="Configure the AI backend, model, and API keys." />
 
       {config ? (
-      <div className="flex-1 overflow-y-auto px-4 md:px-6 py-6">
-          <div className="max-w-[640px] space-y-5">
+      <div className="flex-1 overflow-y-auto px-4 md:px-8 py-6">
+          <div className="max-w-[880px] mx-auto">
             {/* Backend */}
-            <Section id="backend" title="Backend" description="Changes take effect immediately.">
+            <ConfigSection title="Backend" description="Changes take effect immediately.">
               <div className="grid grid-cols-2 gap-3">
                 <BackendCard
                   selected={config.aiProvider.backend === 'agent-sdk'}
@@ -118,20 +118,20 @@ export function AIProviderPage() {
                   description="Direct API calls to Anthropic, OpenAI, Google"
                 />
               </div>
-            </Section>
+            </ConfigSection>
 
             {/* Auth mode (only for Agent SDK) */}
             {config.aiProvider.backend === 'agent-sdk' && (
-              <Section id="auth" title="Authentication" description="Choose how Alice connects to Claude.">
+              <ConfigSection title="Authentication" description="Choose how Alice connects to Claude.">
                 <AgentSdkAuthForm aiProvider={config.aiProvider} onUpdate={(patch) => setConfig((c) => c ? { ...c, aiProvider: { ...c.aiProvider, ...patch } } : c)} />
-              </Section>
+              </ConfigSection>
             )}
 
             {/* Model (only for Vercel AI SDK) */}
             {config.aiProvider.backend === 'vercel-ai-sdk' && (
-              <Section id="model" title="Model" description="Provider, model, and API keys for Vercel AI SDK. Changes take effect on the next request (hot-reload).">
+              <ConfigSection title="Model" description="Provider, model, and API keys for Vercel AI SDK. Changes take effect on the next request (hot-reload).">
                 <ModelForm aiProvider={config.aiProvider} />
-              </Section>
+              </ConfigSection>
             )}
           </div>
       </div>
diff --git a/ui/src/pages/ConnectorsPage.tsx b/ui/src/pages/ConnectorsPage.tsx
index 13f41598..097245b4 100644
--- a/ui/src/pages/ConnectorsPage.tsx
+++ b/ui/src/pages/ConnectorsPage.tsx
@@ -1,7 +1,7 @@
 import { useConfigPage } from '../hooks/useConfigPage'
 import { SaveIndicator } from '../components/SaveIndicator'
 import { SDKSelector, CONNECTOR_OPTIONS } from '../components/SDKSelector'
-import { Section, Field, inputClass } from '../components/form'
+import { ConfigSection, Field, inputClass } from '../components/form'
 import { PageHeader } from '../components/PageHeader'
 import type { AppConfig, ConnectorsConfig } from '../api'
 
@@ -40,11 +40,11 @@ export function ConnectorsPage() {
       />
 
       {/* Content */}
-      <div className="flex-1 overflow-y-auto px-4 md:px-6 py-5">
+      <div className="flex-1 overflow-y-auto px-4 md:px-8 py-5">
         {config && (
-          <div className="max-w-[640px] space-y-5">
+          <div className="max-w-[880px] mx-auto">
             {/* Connector selector cards */}
-            <Section
+            <ConfigSection
               title="Active Connectors"
               description="Select which connectors to enable. Web UI and MCP Server are always active."
             >
@@ -53,10 +53,10 @@ export function ConnectorsPage() {
                 selected={selected}
                 onToggle={handleToggle}
               />
-            </Section>
+            </ConfigSection>
 
             {/* Web UI config — always shown */}
-            <Section
+            <ConfigSection
               title="Web UI"
               description="Browser-based chat and configuration interface."
             >
@@ -68,10 +68,10 @@ export function ConnectorsPage() {
                   onChange={(e) => updateConfig({ web: { port: Number(e.target.value) } })}
                 />
               </Field>
-            </Section>
+            </ConfigSection>
 
             {/* MCP Server config — always shown */}
-            <Section
+            <ConfigSection
               title="MCP Server"
               description="Tool bridge for Claude Code provider and external AI agents."
             >
@@ -83,11 +83,11 @@ export function ConnectorsPage() {
                   onChange={(e) => updateConfig({ mcp: { port: Number(e.target.value) } })}
                 />
               </Field>
-            </Section>
+            </ConfigSection>
 
             {/* MCP Ask config */}
             {config.mcpAsk.enabled && (
-              <Section
+              <ConfigSection
                 title="MCP Ask"
                 description="Multi-turn conversation endpoint for external agents."
               >
@@ -103,12 +103,12 @@ export function ConnectorsPage() {
                     placeholder="e.g. 3003"
                   />
                 </Field>
-              </Section>
+              </ConfigSection>
             )}
 
             {/* Telegram config */}
             {config.telegram.enabled && (
-              <Section
+              <ConfigSection
                 title="Telegram"
                 description="Create a bot via @BotFather, paste the token below, and add your chat ID."
               >
@@ -157,7 +157,7 @@ export function ConnectorsPage() {
                     placeholder="Comma-separated, e.g. 123456, 789012"
                   />
                 </Field>
-              </Section>
+              </ConfigSection>
             )}
           </div>
         )}
diff --git a/ui/src/pages/SettingsPage.tsx b/ui/src/pages/SettingsPage.tsx
index d18a5f7a..f3f43861 100644
--- a/ui/src/pages/SettingsPage.tsx
+++ b/ui/src/pages/SettingsPage.tsx
@@ -2,7 +2,7 @@ import { useState, useEffect, useCallback, useMemo } from 'react'
 import { api, type AppConfig } from '../api'
 import { Toggle } from '../components/Toggle'
 import { SaveIndicator } from '../components/SaveIndicator'
-import { Section, Field, inputClass } from '../components/form'
+import { ConfigSection, Field, inputClass } from '../components/form'
 import { useAutoSave } from '../hooks/useAutoSave'
 import { PageHeader } from '../components/PageHeader'
 import { PageLoading } from '../components/StateViews'
@@ -19,10 +19,10 @@ export function SettingsPage() {
       <PageHeader title="Settings" />
 
       {config ? (
-      <div className="flex-1 overflow-y-auto px-4 md:px-6 py-6">
-          <div className="max-w-[640px] space-y-5">
+      <div className="flex-1 overflow-y-auto px-4 md:px-8 py-6">
+          <div className="max-w-[880px] mx-auto">
             {/* Agent */}
-            <Section id="agent" title="Agent" description="Controls file-system and tool permissions for the AI. Changes apply on the next request.">
+            <ConfigSection title="Agent" description="Controls file-system and tool permissions for the AI. Changes apply on the next request.">
               <div className="flex items-center justify-between gap-4 py-1">
                 <div className="flex-1">
                   <span className="text-sm font-medium text-text">
@@ -46,12 +46,12 @@ export function SettingsPage() {
                   }}
                 />
               </div>
-            </Section>
+            </ConfigSection>
 
             {/* Compaction */}
-            <Section id="compaction" title="Compaction" description="Context window management. When conversation size approaches Max Context minus Max Output tokens, older messages are automatically summarized to free up space.">
+            <ConfigSection title="Compaction" description="Context window management. When conversation size approaches Max Context minus Max Output tokens, older messages are automatically summarized to free up space.">
               <CompactionForm config={config} />
-            </Section>
+            </ConfigSection>
           </div>
       </div>
       ) : (

From 8debc24d1cc06d873f1ef01109031dce4797516c Mon Sep 17 00:00:00 2001
From: Ame <luokerenx4@163.com>
Date: Thu, 19 Mar 2026 12:19:23 +0800
Subject: [PATCH 6/6] ui: unified button classes, HeartbeatPage/ToolsPage
 layout polish

Add btn-primary/secondary/danger CSS utility classes with focus-visible
rings. Replace 10+ inline button styles across pages and components.
HeartbeatPage uses ConfigSection two-column layout. Both pages centered
at 880px.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 ui/src/components/ChannelConfigModal.tsx |  2 +-
 ui/src/components/PushApprovalPanel.tsx  |  4 +--
 ui/src/index.css                         | 37 ++++++++++++++++++++++++
 ui/src/pages/AIProviderPage.tsx          |  4 +--
 ui/src/pages/DevPage.tsx                 |  2 +-
 ui/src/pages/EventsPage.tsx              |  4 +--
 ui/src/pages/HeartbeatPage.tsx           | 26 ++++++++---------
 ui/src/pages/NewsPage.tsx                |  2 +-
 ui/src/pages/ToolsPage.tsx               |  4 +--
 ui/src/pages/TradingPage.tsx             |  8 ++---
 10 files changed, 65 insertions(+), 28 deletions(-)

diff --git a/ui/src/components/ChannelConfigModal.tsx b/ui/src/components/ChannelConfigModal.tsx
index 02d65753..46de7728 100644
--- a/ui/src/components/ChannelConfigModal.tsx
+++ b/ui/src/components/ChannelConfigModal.tsx
@@ -321,7 +321,7 @@ export function ChannelConfigModal({ channel, onClose, onSaved }: ChannelConfigM
             <button
               onClick={handleSave}
               disabled={saving}
-              className="text-sm px-4 py-1.5 rounded-lg bg-accent text-white hover:bg-accent/80 transition-colors disabled:opacity-50"
+              className="btn-primary"
             >
               {saving ? 'Saving...' : 'Save'}
             </button>
diff --git a/ui/src/components/PushApprovalPanel.tsx b/ui/src/components/PushApprovalPanel.tsx
index 922b9352..22fd77c9 100644
--- a/ui/src/components/PushApprovalPanel.tsx
+++ b/ui/src/components/PushApprovalPanel.tsx
@@ -258,7 +258,7 @@ export function PushApprovalPanel() {
                     <button
                       onClick={() => handlePush(account.id)}
                       disabled={pushing !== null}
-                      className="px-2 py-1 rounded font-medium bg-accent text-white hover:bg-accent/80 disabled:opacity-50 transition-colors"
+                      className="btn-primary-sm"
                     >
                       {pushing === account.id ? '...' : 'Confirm'}
                     </button>
@@ -274,7 +274,7 @@ export function PushApprovalPanel() {
                     <button
                       onClick={() => setConfirmingPush(account.id)}
                       disabled={pushing !== null || rejecting !== null}
-                      className="flex-1 text-xs px-3 py-1.5 rounded font-medium bg-accent text-white hover:bg-accent/80 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+                      className="flex-1 btn-primary-sm"
                     >
                       Approve & Push
                     </button>
diff --git a/ui/src/index.css b/ui/src/index.css
index c59121e8..e92d403c 100644
--- a/ui/src/index.css
+++ b/ui/src/index.css
@@ -31,6 +31,43 @@ body,
   height: 100%;
 }
 
+/* ==================== Button utility classes ==================== */
+
+.btn-primary {
+  @apply px-4 py-2 text-[13px] font-medium rounded-lg bg-accent text-white
+    hover:bg-accent/85 transition-colors
+    disabled:opacity-40 disabled:cursor-default cursor-pointer
+    focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/40 focus-visible:ring-offset-2 focus-visible:ring-offset-bg;
+}
+
+.btn-secondary {
+  @apply px-4 py-2 text-[13px] font-medium rounded-lg border border-border text-text-muted
+    hover:bg-bg-tertiary hover:text-text transition-colors
+    disabled:opacity-40 disabled:cursor-default cursor-pointer
+    focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/40 focus-visible:ring-offset-2 focus-visible:ring-offset-bg;
+}
+
+.btn-danger {
+  @apply px-4 py-2 text-[13px] font-medium rounded-lg border border-red/30 text-red
+    hover:bg-red/10 transition-colors
+    disabled:opacity-40 disabled:cursor-default cursor-pointer
+    focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-red/40 focus-visible:ring-offset-2 focus-visible:ring-offset-bg;
+}
+
+.btn-primary-sm {
+  @apply px-3 py-1.5 text-xs font-medium rounded-md bg-accent text-white
+    hover:bg-accent/85 transition-colors
+    disabled:opacity-40 disabled:cursor-default cursor-pointer
+    focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/40 focus-visible:ring-offset-1 focus-visible:ring-offset-bg;
+}
+
+.btn-secondary-sm {
+  @apply px-3 py-1.5 text-xs font-medium rounded-md border border-border text-text-muted
+    hover:bg-bg-tertiary hover:text-text transition-colors
+    disabled:opacity-40 disabled:cursor-default cursor-pointer
+    focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/40 focus-visible:ring-offset-1 focus-visible:ring-offset-bg;
+}
+
 /* Scrollbar styling */
 ::-webkit-scrollbar {
   width: 6px;
diff --git a/ui/src/pages/AIProviderPage.tsx b/ui/src/pages/AIProviderPage.tsx
index 74d9bef1..0cecef1c 100644
--- a/ui/src/pages/AIProviderPage.tsx
+++ b/ui/src/pages/AIProviderPage.tsx
@@ -382,7 +382,7 @@ function ModelForm({ aiProvider }: { aiProvider: AIProviderConfig }) {
               <button
                 onClick={handleSaveKeys}
                 disabled={keySaveStatus === 'saving'}
-                className="bg-user-bubble text-white rounded-lg px-4 py-2 text-[13px] font-medium cursor-pointer transition-opacity hover:opacity-85 disabled:opacity-50"
+                className="btn-primary"
               >
                 Save Keys
               </button>
@@ -465,7 +465,7 @@ function AgentSdkAuthForm({ aiProvider, onUpdate }: { aiProvider: AIProviderConf
             <button
               onClick={handleSaveKey}
               disabled={!apiKey || keySaveStatus === 'saving'}
-              className="bg-user-bubble text-white rounded-lg px-4 py-2 text-[13px] font-medium cursor-pointer transition-opacity hover:opacity-85 disabled:opacity-50"
+              className="btn-primary"
             >
               Save Key
             </button>
diff --git a/ui/src/pages/DevPage.tsx b/ui/src/pages/DevPage.tsx
index 80db2369..682d3aec 100644
--- a/ui/src/pages/DevPage.tsx
+++ b/ui/src/pages/DevPage.tsx
@@ -184,7 +184,7 @@ function SendSection() {
         <button
           onClick={handleSend}
           disabled={sending || !text.trim()}
-          className="px-4 py-1.5 text-sm bg-accent text-white rounded-md hover:opacity-90 disabled:opacity-40 transition-opacity"
+          className="btn-primary-sm"
         >
           {sending ? 'Sending...' : 'Send'}
         </button>
diff --git a/ui/src/pages/EventsPage.tsx b/ui/src/pages/EventsPage.tsx
index 50090afd..6957fba4 100644
--- a/ui/src/pages/EventsPage.tsx
+++ b/ui/src/pages/EventsPage.tsx
@@ -330,7 +330,7 @@ function CronSection() {
         <span className="text-xs text-text-muted">{jobs.length} jobs</span>
         <button
           onClick={() => setShowAdd(true)}
-          className="text-xs px-3 py-1.5 rounded-md bg-accent/20 text-accent border border-accent/30 hover:bg-accent/30 transition-colors"
+          className="btn-secondary-sm"
         >
           + Add Job
         </button>
@@ -537,7 +537,7 @@ function AddCronJobForm({ onClose, onCreated }: { onClose: () => void; onCreated
         <button
           type="submit"
           disabled={saving}
-          className="px-3 py-1.5 text-sm rounded-md bg-accent text-white hover:bg-accent/80 transition-colors disabled:opacity-50"
+          className="btn-primary-sm"
         >
           {saving ? 'Creating...' : 'Create'}
         </button>
diff --git a/ui/src/pages/HeartbeatPage.tsx b/ui/src/pages/HeartbeatPage.tsx
index 8ef639a8..f4db2d10 100644
--- a/ui/src/pages/HeartbeatPage.tsx
+++ b/ui/src/pages/HeartbeatPage.tsx
@@ -2,7 +2,7 @@ import { useState, useEffect, useCallback, useMemo } from 'react'
 import { api, type AppConfig, type EventLogEntry } from '../api'
 import { Toggle } from '../components/Toggle'
 import { SaveIndicator } from '../components/SaveIndicator'
-import { Section, Field, inputClass } from '../components/form'
+import { ConfigSection, Section, Field, inputClass } from '../components/form'
 import { useAutoSave } from '../hooks/useAutoSave'
 import { PageHeader } from '../components/PageHeader'
 
@@ -84,7 +84,7 @@ function StatusBar() {
           <button
             onClick={handleTrigger}
             disabled={triggering}
-            className="px-3 py-1.5 text-xs rounded-md bg-purple-dim text-purple border border-purple/30 hover:bg-purple/30 transition-colors disabled:opacity-50"
+            className="btn-secondary-sm"
           >
             {triggering ? 'Triggering...' : 'Trigger Now'}
           </button>
@@ -98,9 +98,9 @@ function StatusBar() {
   )
 }
 
-// ==================== Config Section ====================
+// ==================== Config Form ====================
 
-function ConfigSection({ config }: { config: AppConfig }) {
+function HeartbeatConfigForm({ config }: { config: AppConfig }) {
   const [every, setEvery] = useState(config.heartbeat?.every || '30m')
   const [ahEnabled, setAhEnabled] = useState(config.heartbeat?.activeHours != null)
   const [ahStart, setAhStart] = useState(config.heartbeat?.activeHours?.start || '09:00')
@@ -120,7 +120,7 @@ function ConfigSection({ config }: { config: AppConfig }) {
   const { status, retry } = useAutoSave({ data: configData, save })
 
   return (
-    <Section title="Configuration">
+    <ConfigSection title="Configuration" description="Set how often the heartbeat runs and optionally restrict it to active hours.">
       <Field label="Interval">
         <input
           className={inputClass}
@@ -132,7 +132,7 @@ function ConfigSection({ config }: { config: AppConfig }) {
 
       <div className="mb-3">
         <div className="flex items-center justify-between mb-2">
-          <label className="text-[13px] text-text-muted">Active Hours</label>
+          <label className="text-[13px] text-text font-medium">Active Hours</label>
           <Toggle checked={ahEnabled} onChange={setAhEnabled} />
         </div>
         {ahEnabled && (
@@ -180,7 +180,7 @@ function ConfigSection({ config }: { config: AppConfig }) {
       </div>
 
       <SaveIndicator status={status} onRetry={retry} />
-    </Section>
+    </ConfigSection>
   )
 }
 
@@ -222,7 +222,7 @@ function PromptEditor() {
   }
 
   return (
-    <Section title="Prompt File" description={filePath || undefined}>
+    <ConfigSection title="Prompt File" description={filePath || 'The prompt template used for each heartbeat cycle.'}>
       {loading ? (
         <div className="text-sm text-text-muted">Loading...</div>
       ) : (
@@ -236,7 +236,7 @@ function PromptEditor() {
             <button
               onClick={handleSave}
               disabled={saving || !dirty}
-              className="px-3 py-1.5 text-xs rounded-md bg-accent text-bg font-medium hover:opacity-90 transition-opacity disabled:opacity-40"
+              className="btn-primary-sm"
             >
               {saving ? 'Saving...' : 'Save'}
             </button>
@@ -258,7 +258,7 @@ function PromptEditor() {
           </div>
         </>
       )}
-    </Section>
+    </ConfigSection>
   )
 }
 
@@ -335,10 +335,10 @@ export function HeartbeatPage() {
     <div className="flex flex-col flex-1 min-h-0">
       <PageHeader title="Heartbeat" />
 
-      <div className="flex-1 overflow-y-auto px-4 md:px-6 py-5">
-        <div className="max-w-[720px] space-y-6">
+      <div className="flex-1 overflow-y-auto px-4 md:px-8 py-5">
+        <div className="max-w-[880px] mx-auto space-y-6">
           <StatusBar />
-          {config && <ConfigSection config={config} />}
+          {config && <HeartbeatConfigForm config={config} />}
           <PromptEditor />
           <RecentEvents />
         </div>
diff --git a/ui/src/pages/NewsPage.tsx b/ui/src/pages/NewsPage.tsx
index fa6a30fb..f10094c6 100644
--- a/ui/src/pages/NewsPage.tsx
+++ b/ui/src/pages/NewsPage.tsx
@@ -156,7 +156,7 @@ function FeedsSection({
         <button
           onClick={addFeed}
           disabled={!newName.trim() || !newUrl.trim() || !newSource.trim()}
-          className="border border-border rounded-lg px-4 py-2 text-[13px] font-medium cursor-pointer transition-colors hover:bg-bg-tertiary hover:text-text text-text-muted disabled:opacity-40 disabled:cursor-default"
+          className="btn-secondary"
         >
           Add Feed
         </button>
diff --git a/ui/src/pages/ToolsPage.tsx b/ui/src/pages/ToolsPage.tsx
index b851e11a..1a2f1196 100644
--- a/ui/src/pages/ToolsPage.tsx
+++ b/ui/src/pages/ToolsPage.tsx
@@ -103,13 +103,13 @@ export function ToolsPage() {
         right={<SaveIndicator status={status} onRetry={retry} />}
       />
 
-      <div className="flex-1 overflow-y-auto px-4 md:px-6 py-5">
+      <div className="flex-1 overflow-y-auto px-4 md:px-8 py-5">
         {!loaded ? (
           <PageLoading />
         ) : groups.length === 0 ? (
           <EmptyState title="No tools registered." description="Tools will appear here when the engine starts." />
         ) : (
-          <div className="max-w-[720px] space-y-2">
+          <div className="max-w-[880px] mx-auto space-y-2">
             {groups.map((g) => (
               <ToolGroupCard
                 key={g.key}
diff --git a/ui/src/pages/TradingPage.tsx b/ui/src/pages/TradingPage.tsx
index de6a938e..39e71ee9 100644
--- a/ui/src/pages/TradingPage.tsx
+++ b/ui/src/pages/TradingPage.tsx
@@ -369,17 +369,17 @@ function CreateWizard({ existingAccountIds, onSave, onClose }: {
           </button>
         )}
         {step > 1 && (
-          <button onClick={() => { setStep(step - 1); setError('') }} className="px-3 py-1.5 text-[13px] font-medium rounded-md border border-border hover:bg-bg-tertiary transition-colors">
+          <button onClick={() => { setStep(step - 1); setError('') }} className="btn-secondary-sm">
             Back
           </button>
         )}
         {step === 2 && (
-          <button onClick={handleNext} className="px-4 py-1.5 text-[13px] font-medium rounded-md bg-accent text-white hover:bg-accent/90 transition-colors">
+          <button onClick={handleNext} className="btn-primary-sm">
             Next
           </button>
         )}
         {step === 3 && (
-          <button onClick={handleCreate} disabled={saving} className="px-4 py-1.5 text-[13px] font-medium rounded-md bg-accent text-white hover:bg-accent/90 disabled:opacity-50 transition-colors">
+          <button onClick={handleCreate} disabled={saving} className="btn-primary-sm">
             {saving ? 'Creating...' : 'Create'}
           </button>
         )}
@@ -523,7 +523,7 @@ function EditDialog({ account, platform, onSaveAccount, onSavePlatform, onDelete
           <button
             onClick={handleSave}
             disabled={saving}
-            className="px-4 py-1.5 text-[13px] font-medium rounded-md bg-accent text-white hover:bg-accent/90 disabled:opacity-50 transition-colors"
+            className="btn-primary-sm"
           >
             {saving ? 'Saving...' : 'Save'}
           </button>