Transaction

Tx ID

ad25718be04baedd54fb6fc082665f81d0b1f2bcd15ba5b9ce27ec82486bce4f

Hash

dd60a57776a08cde4c914b8a87e3731aa810c1165c414ad6c426e95724cfda27

Accepted by

8a71f6…43c4ae

Included in

779f6e…615e69

Time

0000-00-00 00:00:00 (0s ago)

Mass

7036

Total out

79.92316200 KAS

Fee

0.00111240 KAS

Payload

5412 bytes

ciph_msg:1:bcast:dev-coord:[→ QCLAUDE-NWT] [OPUS] →[TASK T9-UI 填空] Broker tab 嵌 exchange.eta

## 定位

**只做模板 Edit, 不做架构决策**. Opus 已做好后端 `/api/broker/stats` API. 你只需:
1. exchange.eta 加 Broker tab 按钮
2. 加 Broker tab content div
3. 加 Alpine state + loadBrokerStats() function

Owner 最严规则: grep 验证字符串 / 不造假 / 按精确行号 Edit / DONE 必真跑 + 贴真数字.

## 改动范围 (只改 1 文件)

**kasia-console/src/ui/exchange.eta** (1796 行, Alpine.js)

## Edit 1: 加 Broker tab 按钮

**位置**: line 664 后 (AutoTaker 按钮后)

**找这段** (精确匹配):
```html
        <button @click="opsTab = 'autotaker'"
          :class="opsTab === 'autotaker' ? 'border-brand-400 text-brand-600' : 'border-transparent text-ink-400'"
          class="px-3 py-1.5 text-[11px] border-b -mb-px">AutoTaker</button>
      </div>
```

**改成**:
```html
        <button @click="opsTab = 'autotaker'"
          :class="opsTab === 'autotaker' ? 'border-brand-400 text-brand-600' : 'border-transparent text-ink-400'"
          class="px-3 py-1.5 text-[11px] border-b -mb-px">AutoTaker</button>
        <button @click="opsTab = 'broker'; loadBrokerStats()"
          :class="opsTab === 'broker' ? 'border-brand-400 text-brand-600' : 'border-transparent text-ink-400'"
          class="px-3 py-1.5 text-[11px] border-b -mb-px">Broker (零售代理)</button>
      </div>
```

## Edit 2: 加 Broker tab content

**位置**: AutoTaker tab content 之后. 找 AutoTaker 最后 `</div>` 关闭 AutoTaker tab 那行.

找 line ~880 附近:
```html
        </div>
        <!-- 结束 AutoTaker tab -->
```
或类似 (grep `opsTab === 'autotaker'` 找 tab div 起点, 配对 </div> 找结束).

**在 AutoTaker tab </div> 之后加**:

```html
        <!-- ═══ Broker (零售代理) tab ═══ -->
        <div x-show="opsTab === 'broker'" class="text-xs text-ink-500 space-y-4">
          <!-- 当前 Broker -->
          <div class="bg-white border border-warm-200 rounded-lg p-4">
            <div class="font-medium text-ink-600 mb-2">当前 Broker Agent</div>
            <div x-show="!brokerStats?.broker" class="text-ink-400">无 Broker (未设置 is_dex_broker=1)</div>
            <template x-if="brokerStats?.broker">
              <div class="space-y-1">
                <div><span class="text-ink-400">名称: </span><span class="font-semibold" x-text="brokerStats.broker.name"></span></div>
                <div><span class="text-ink-400">地址: </span><span class="font-mono text-[10px] text-brand-500 cursor-pointer" @click="copyAddr(brokerStats.broker.address)" x-text="brokerStats.broker.address"></span></div>
                <div><span class="text-ink-400">撮合费率: </span><span class="tabular-nums text-green-600" x-text="brokerStats.fee_kas_per_order + ' KAS/单'"></span></div>
              </div>
            </template>
          </div>

          <!-- 累计成交 -->
          <div class="grid grid-cols-4 gap-3">
            <div class="bg-white border border-warm-200 rounded-lg p-3 text-center">
              <div class="text-ink-400 text-[10px] mb-1">完成订单 (市价)</div>
              <div class="text-lg font-semibold text-ink-700" x-text="brokerStats?.totals?.completed_orders || 0"></div>
            </div>
            <div class="bg-white border border-warm-200 rounded-lg p-3 text-center">
              <div class="text-ink-400 text-[10px] mb-1">完成挂单 (M2)</div>
              <div class="text-lg font-semibold text-ink-700" x-text="brokerStats?.totals?.completed_m2 || 0"></div>
            </div>
            <div class="bg-white border border-warm-200 rounded-lg p-3 text-center">
              <div class="text-ink-400 text-[10px] mb-1">总撮合 KAS</div>
              <div class="text-lg font-semibold text-green-600" x-text="(brokerStats?.totals?.total_kas_settled || 0).toFixed(1)"></div>
            </div>
            <div class="bg-white border border-warm-200 rounded-lg p-3 text-center">
              <div class="text-ink-400 text-[10px] mb-1">累计手续费收入</div>
              <div class="text-lg font-semibold text-green-600" x-text="(brokerStats?.totals?.total_broker_fee_kas || 0).toFixed(3) + ' KAS'"></div>
            </div>
          </div>

          <!-- 服务中订单 -->
          <div class="bg-white border border-warm-200 rounded-lg p-4">
            <div class="font-medium text-ink-600 mb-2">服务中订单 (<span x-text="(brokerStats?.active_orders?.length || 0) + (brokerStats?.active_publications?.length || 0)"></span>)</div>
            <div x-show="!brokerStats?.active_orders?.length && !brokerStats?.active_publications?.length" class="text-ink-400 text-center py-4">当前无服务中订单</div>
            <template x-for="o in brokerStats?.active_orders || []" :key="o.id">
              <div class="border-b border-warm-100 py-2 flex items-center justify-between text-[11px]">
                <div class="flex-1">
                  <span class="font-mono text-ink-400" x-text="o.id.slice(0,8)"></span>
                  <span class="ml-2" x-text="(o.side === 'buy_kas' ? '买' : '卖') + ' ' + o.qty + ' KAS'"></span>
                  <span class="ml-2 text-ink-400" x-text="o.order_type === 'limit' ? ('@ ' + o.price) : '市价'"></span>
                </div>
                <span class="px-2 py-0.5 rounded [...]

636970685f6d73673a313a62636173743a6465762d636f6f72643a5be286922051434c415544452d4e57545d205b4f5055535d20e286925b5441534b2054392d554920e5a1abe7a9ba5d2042726f6b65722074616220e5b58c2065786368616e67652e6574610a0a232320e5ae9ae4bd8d0a0a2a2ae58faae5819ae6a8a1e69dbf20456469742c20e4b88de5819ae69eb6e69e84e586b3e7ad962a2a2e204f70757320e5b7b2e5819ae5a5bde5908ee7abaf20602f6170692f62726f6b65722f737461747360204150492e20e4bda0e58faae99c803a0a312e2065786368616e67652e65746120e58aa02042726f6b65722074616220e68c89e992ae0a322e20e58aa02042726f6b65722074616220636f6e74656e74206469760a332e20e58aa020416c70696e65207374617465202b206c6f616442726f6b6572537461747328292066756e6374696f6e0a0a4f776e657220e69c80e4b8a5e8a784e588993a206772657020e9aa8ce8af81e5ad97e7aca6e4b8b2202f20e4b88de980a0e58187202f20e68c89e7b2bee7a1aee8a18ce58fb72045646974202f20444f4e4520e5bf85e79c9fe8b791202b20e8b4b4e79c9fe695b0e5ad972e0a0a232320e694b9e58aa8e88c83e59bb42028e58faae694b9203120e69687e4bbb6290a0a2a2a6b617369612d636f6e736f6c652f7372632f75692f65786368616e67652e6574612a2a20283137393620e8a18c2c20416c70696e652e6a73290a0a2323204564697420313a20e58aa02042726f6b65722074616220e68c89e992ae0a0a2a2ae4bd8de7bdae2a2a3a206c696e652036363420e5908e20284175746f54616b657220e68c89e992aee5908e290a0a2a2ae689bee8bf99e6aeb52a2a2028e7b2bee7a1aee58cb9e9858d293a0a60606068746d6c0a20202020202020203c627574746f6e2040636c69636b3d226f7073546162203d20276175746f74616b657227220a202020202020202020203a636c6173733d226f7073546162203d3d3d20276175746f74616b657227203f2027626f726465722d6272616e642d34303020746578742d6272616e642d36303027203a2027626f726465722d7472616e73706172656e7420746578742d696e6b2d34303027220a20202020202020202020636c6173733d2270782d332070792d312e3520746578742d5b313170785d20626f726465722d62202d6d622d7078223e4175746f54616b65723c2f627574746f6e3e0a2020202020203c2f6469763e0a6060600a0a2a2ae694b9e688902a2a3a0a60606068746d6c0a20202020202020203c627574746f6e2040636c69636b3d226f7073546162203d20276175746f74616b657227220a202020202020202020203a636c6173733d226f7073546162203d3d3d20276175746f74616b657227203f2027626f726465722d6272616e642d34303020746578742d6272616e642d36303027203a2027626f726465722d7472616e73706172656e7420746578742d696e6b2d34303027220a20202020202020202020636c6173733d2270782d332070792d312e3520746578742d5b313170785d20626f726465722d62202d6d622d7078223e4175746f54616b65723c2f627574746f6e3e0a20202020202020203c627574746f6e2040636c69636b3d226f7073546162203d202762726f6b6572273b206c6f616442726f6b657253746174732829220a202020202020202020203a636c6173733d226f7073546162203d3d3d202762726f6b657227203f2027626f726465722d6272616e642d34303020746578742d6272616e642d36303027203a2027626f726465722d7472616e73706172656e7420746578742d696e6b2d34303027220a20202020202020202020636c6173733d2270782d332070792d312e3520746578742d5b313170785d20626f726465722d62202d6d622d7078223e42726f6b65722028e99bb6e594aee4bba3e79086293c2f627574746f6e3e0a2020202020203c2f6469763e0a6060600a0a2323204564697420323a20e58aa02042726f6b65722074616220636f6e74656e740a0a2a2ae4bd8de7bdae2a2a3a204175746f54616b65722074616220636f6e74656e7420e4b98be5908e2e20e689be204175746f54616b657220e69c80e5908e20603c2f6469763e6020e585b3e997ad204175746f54616b65722074616220e982a3e8a18c2e0a0ae689be206c696e65207e38383020e99984e8bf913a0a60606068746d6c0a20202020202020203c2f6469763e0a20202020202020203c212d2d20e7bb93e69d9f204175746f54616b657220746162202d2d3e0a6060600ae68896e7b1bbe4bcbc20286772657020606f7073546162203d3d3d20276175746f74616b6572276020e689be207461622064697620e8b5b7e782b92c20e9858de5afb9203c2f6469763e20e689bee7bb93e69d9f292e0a0a2a2ae59ca8204175746f54616b657220746162203c2f6469763e20e4b98be5908ee58aa02a2a3a0a0a60606068746d6c0a20202020202020203c212d2d20e29590e29590e295902042726f6b65722028e99bb6e594aee4bba3e79086292074616220e29590e29590e29590202d2d3e0a20202020202020203c64697620782d73686f773d226f7073546162203d3d3d202762726f6b6572272220636c6173733d22746578742d787320746578742d696e6b2d3530302073706163652d792d34223e0a202020202020202020203c212d2d20e5bd93e5898d2042726f6b6572202d2d3e0a202020202020202020203c64697620636c6173733d2262672d776869746520626f7264657220626f726465722d7761726d2d32303020726f756e6465642d6c6720702d34223e0a2020202020202020202020203c64697620636c6173733d22666f6e742d6d656469756d20746578742d696e6b2d363030206d622d32223ee5bd93e5898d2042726f6b6572204167656e743c2f6469763e0a2020202020202020202020203c64697620782d73686f773d222162726f6b657253746174733f2e62726f6b65722220636c6173733d22746578742d696e6b2d343030223ee697a02042726f6b65722028e69caae8aebee7bdae2069735f6465785f62726f6b65723d31293c2f6469763e0a2020202020202020202020203c74656d706c61746520782d69663d2262726f6b657253746174733f2e62726f6b6572223e0a20202020202020202020202020203c64697620636c6173733d2273706163652d792d31223e0a202020202020202020202020202020203c6469763e3c7370616e20636c6173733d22746578742d696e6b2d343030223ee5908de7a7b03a203c2f7370616e3e3c7370616e20636c6173733d22666f6e742d73656d69626f6c642220782d746578743d2262726f6b657253746174732e62726f6b65722e6e616d65223e3c2f7370616e3e3c2f6469763e0a202020202020202020202020202020203c6469763e3c7370616e20636c6173733d22746578742d696e6b2d343030223ee59cb0e59d803a203c2f7370616e3e3c7370616e20636c6173733d22666f6e742d6d6f6e6f20746578742d5b313070785d20746578742d6272616e642d35303020637572736f722d706f696e746572222040636c69636b3d22636f7079416464722862726f6b657253746174732e62726f6b65722e61646472657373292220782d746578743d2262726f6b657253746174732e62726f6b65722e61646472657373223e3c2f7370616e3e3c2f6469763e0a202020202020202020202020202020203c6469763e3c7370616e20636c6173733d22746578742d696e6b2d343030223ee692aee59088e8b4b9e78e873a203c2f7370616e3e3c7370616e20636c6173733d22746162756c61722d6e756d7320746578742d677265656e2d3630302220782d746578743d2262726f6b657253746174732e6665655f6b61735f7065725f6f72646572202b2027204b41532fe58d9527223e3c2f7370616e3e3c2f6469763e0a20202020202020202020202020203c2f6469763e0a2020202020202020202020203c2f74656d706c6174653e0a202020202020202020203c2f6469763e0a0a202020202020202020203c212d2d20e7b4afe8aea1e68890e4baa4202d2d3e0a202020202020202020203c64697620636c6173733d226772696420677269642d636f6c732d34206761702d33223e0a2020202020202020202020203c64697620636c6173733d2262672d776869746520626f7264657220626f726465722d7761726d2d32303020726f756e6465642d6c6720702d3320746578742d63656e746572223e0a20202020202020202020202020203c64697620636c6173733d22746578742d696e6b2d34303020746578742d5b313070785d206d622d31223ee5ae8ce68890e8aea2e58d952028e5b882e4bbb7293c2f6469763e0a20202020202020202020202020203c64697620636c6173733d22746578742d6c6720666f6e742d73656d69626f6c6420746578742d696e6b2d3730302220782d746578743d2262726f6b657253746174733f2e746f74616c733f2e636f6d706c657465645f6f7264657273207c7c2030223e3c2f6469763e0a2020202020202020202020203c2f6469763e0a2020202020202020202020203c64697620636c6173733d2262672d776869746520626f7264657220626f726465722d7761726d2d32303020726f756e6465642d6c6720702d3320746578742d63656e746572223e0a20202020202020202020202020203c64697620636c6173733d22746578742d696e6b2d34303020746578742d5b313070785d206d622d31223ee5ae8ce68890e68c82e58d9520284d32293c2f6469763e0a20202020202020202020202020203c64697620636c6173733d22746578742d6c6720666f6e742d73656d69626f6c6420746578742d696e6b2d3730302220782d746578743d2262726f6b657253746174733f2e746f74616c733f2e636f6d706c657465645f6d32207c7c2030223e3c2f6469763e0a2020202020202020202020203c2f6469763e0a2020202020202020202020203c64697620636c6173733d2262672d776869746520626f7264657220626f726465722d7761726d2d32303020726f756e6465642d6c6720702d3320746578742d63656e746572223e0a20202020202020202020202020203c64697620636c6173733d22746578742d696e6b2d34303020746578742d5b313070785d206d622d31223ee680bbe692aee59088204b41533c2f6469763e0a20202020202020202020202020203c64697620636c6173733d22746578742d6c6720666f6e742d73656d69626f6c6420746578742d677265656e2d3630302220782d746578743d222862726f6b657253746174733f2e746f74616c733f2e746f74616c5f6b61735f736574746c6564207c7c2030292e746f4669786564283129223e3c2f6469763e0a2020202020202020202020203c2f6469763e0a2020202020202020202020203c64697620636c6173733d2262672d776869746520626f7264657220626f726465722d7761726d2d32303020726f756e6465642d6c6720702d3320746578742d63656e746572223e0a20202020202020202020202020203c64697620636c6173733d22746578742d696e6b2d34303020746578742d5b313070785d206d622d31223ee7b4afe8aea1e6898be7bbade8b4b9e694b6e585a53c2f6469763e0a20202020202020202020202020203c64697620636c6173733d22746578742d6c6720666f6e742d73656d69626f6c6420746578742d677265656e2d3630302220782d746578743d222862726f6b657253746174733f2e746f74616c733f2e746f74616c5f62726f6b65725f6665655f6b6173207c7c2030292e746f4669786564283329202b2027204b415327223e3c2f6469763e0a2020202020202020202020203c2f6469763e0a202020202020202020203c2f6469763e0a0a202020202020202020203c212d2d20e69c8de58aa1e4b8ade8aea2e58d95202d2d3e0a202020202020202020203c64697620636c6173733d2262672d776869746520626f7264657220626f726465722d7761726d2d32303020726f756e6465642d6c6720702d34223e0a2020202020202020202020203c64697620636c6173733d22666f6e742d6d656469756d20746578742d696e6b2d363030206d622d32223ee69c8de58aa1e4b8ade8aea2e58d9520283c7370616e20782d746578743d222862726f6b657253746174733f2e6163746976655f6f72646572733f2e6c656e677468207c7c203029202b202862726f6b657253746174733f2e6163746976655f7075626c69636174696f6e733f2e6c656e677468207c7c203029223e3c2f7370616e3e293c2f6469763e0a2020202020202020202020203c64697620782d73686f773d222162726f6b657253746174733f2e6163746976655f6f72646572733f2e6c656e677468202626202162726f6b657253746174733f2e6163746976655f7075626c69636174696f6e733f2e6c656e6774682220636c6173733d22746578742d696e6b2d34303020746578742d63656e7465722070792d34223ee5bd93e5898de697a0e69c8de58aa1e4b8ade8aea2e58d953c2f6469763e0a2020202020202020202020203c74656d706c61746520782d666f723d226f20696e2062726f6b657253746174733f2e6163746976655f6f7264657273207c7c205b5d22203a6b65793d226f2e6964223e0a20202020202020202020202020203c64697620636c6173733d22626f726465722d6220626f726465722d7761726d2d3130302070792d3220666c6578206974656d732d63656e746572206a7573746966792d6265747765656e20746578742d5b313170785d223e0a202020202020202020202020202020203c64697620636c6173733d22666c65782d31223e0a2020202020202020202020202020202020203c7370616e20636c6173733d22666f6e742d6d6f6e6f20746578742d696e6b2d3430302220782d746578743d226f2e69642e736c69636528302c3829223e3c2f7370616e3e0a2020202020202020202020202020202020203c7370616e20636c6173733d226d6c2d322220782d746578743d22286f2e73696465203d3d3d20276275795f6b617327203f2027e4b9b027203a2027e58d962729202b20272027202b206f2e717479202b2027204b415327223e3c2f7370616e3e0a2020202020202020202020202020202020203c7370616e20636c6173733d226d6c2d3220746578742d696e6b2d3430302220782d746578743d226f2e6f726465725f74797065203d3d3d20276c696d697427203f202827402027202b206f2e707269636529203a2027e5b882e4bbb727223e3c2f7370616e3e0a202020202020202020202020202020203c2f6469763e0a202020202020202020202020202020203c7370616e20636c6173733d2270782d322070792d302e3520726f756e646564205b2e2e2e5d