diff --git a/src/domain/trading/UnifiedTradingAccount.spec.ts b/src/domain/trading/UnifiedTradingAccount.spec.ts
index 26f13237..80fdc309 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,183 @@ describe('UTA — constructor', () => {
     expect(restored.log()[0].message).toBe('initial buy')
   })
 })
+
+// ==================== health tracking ====================
+
+describe('UTA — health tracking', () => {
+  beforeEach(() => { vi.useFakeTimers() })
+  afterEach(() => { vi.useRealTimers() })
+
+  /** 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().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++) {
+      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)
+    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++) {
+      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)
+    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)
+
+    // 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)
+    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('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 via runtime failures
+    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()
+    broker.setFailMode(100)
+    const { uta } = createUTA(broker)
+    await flush()
+
+    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)
+    await flush()
+
+    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)
+    await flush()
+    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..8dc07d69 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)
@@ -130,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'),
       }
@@ -162,6 +177,105 @@ 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 ====================
+
+  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,
+    }
+  }
+
+  /** 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> {
+    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 ====================
@@ -252,7 +366,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 +403,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 +440,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
   }
@@ -376,11 +493,12 @@ export class UnifiedTradingAccount {
 
   // ==================== Lifecycle ====================
 
-  init(): Promise<void> {
-    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/__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 227deced..753899c2 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 ?? 0
+      }
       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..bd632c6d 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. */
+  /** 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)
-    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, {
@@ -140,32 +134,14 @@ async function main() {
       platformId: accountCfg.platformId,
     })
     accountManager.add(uta)
-    console.log(`trading: ${uta.label} initialized`)
-    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([
@@ -519,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 ====================
 
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/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/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/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/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 9d33118b..0cecef1c 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>
@@ -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/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/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/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/MarketDataPage.tsx b/ui/src/pages/MarketDataPage.tsx
new file mode 100644
index 00000000..49e3d1e7
--- /dev/null
+++ b/ui/src/pages/MarketDataPage.tsx
@@ -0,0 +1,425 @@
+import { useState } from 'react'
+import { api, type AppConfig } from '../api'
+import { SaveIndicator } from '../components/SaveIndicator'
+import { ConfigSection, 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>
+  )
+}
+
+// ==================== 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-8 py-5">
+        <div className={`max-w-[880px] mx-auto ${!enabled ? 'opacity-40 pointer-events-none' : ''}`}>
+          {/* Data Backend */}
+          <DataBackendSection
+            backend={dataBackend}
+            apiUrl={apiUrl}
+            onBackendChange={(backend) => { updateConfigImmediate({ backend }); }}
+            onApiUrlChange={(url) => updateConfig({ apiUrl: url })}
+          />
+
+          {/* Asset Providers */}
+          <AssetProvidersSection
+            providers={providers}
+            providerKeys={providerKeys}
+            onProviderChange={handleProviderChange}
+            onKeyChange={handleKeyChange}
+          />
+
+          {/* Embedded API Server */}
+          <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>
+                <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>
+            )}
+          </ConfigSection>
+
+          {/* Macro & Utility Providers */}
+          <UtilityProvidersSection
+            providerKeys={providerKeys}
+            onKeyChange={handleKeyChange}
+          />
+        </div>
+        {loadError && <p className="text-[13px] text-red mt-4 max-w-[880px] mx-auto">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 (
+    <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
+            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>
+      )}
+    </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
new file mode 100644
index 00000000..f10094c6
--- /dev/null
+++ b/ui/src/pages/NewsPage.tsx
@@ -0,0 +1,166 @@
+import { useState } from 'react'
+import { type AppConfig, type NewsCollectorConfig, type NewsCollectorFeed } from '../api'
+import { SaveIndicator } from '../components/SaveIndicator'
+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({
+  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 (
+    <ConfigSection
+      title="RSS Feeds"
+      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 && (
+        <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="btn-secondary"
+        >
+          Add Feed
+        </button>
+      </div>
+    </ConfigSection>
+  )
+}
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>
         )
       })}
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>
       ) : (
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>