claude-accounts-usage 0.1.2 → 0.1.3

package/README.md

@@ -9,7 +9,7 @@
 | 命令 | 作用 |
 |------|------|
 | `/usage` | 弹框显示所有账号的用量(5h / 7d / 7d-Sonnet 三个窗口,带进度条与重置倒计时) |
-| `/switch` | 弹框选择账号并切换为当前账号(立即生效) |
+| `/switch` | 弹框选择账号并切换(立即生效);列表内联显示每个账号的 5h / 7d / 7d-Sonnet 用量,`↑↓` 选择、`enter` 切换、`esc` 关闭 |
 
 账号会在**插件加载时**以及每次 `/usage`、`/switch` 时**自动收录**当前 ex-machina 登录的账号,无需手动添加。
 
@@ -41,13 +41,13 @@ TUI 插件只在 `~/.config/opencode/tui.json` 配置,**不要**放进 `opencode
 ```json
 {
   "$schema": "https://opencode.ai/tui.json",
-  "plugin": ["claude-accounts-usage@0.1.2"]
+  "plugin": ["claude-accounts-usage@0.1.3"]
 }
 ```
 
 OpenCode 会自动解析并安装该包,无需手动 `npm install`。
 
-> **建议带上版本号**(如 `@0.1.2`)。OpenCode 按"含版本号的包名"建独立缓存目录:写死版本号后,以后升级只需把后缀改成新版本号;若不带版本号,会被首次安装的版本锁住,发布新版也不会自动更新。
+> **建议带上版本号**(如 `@0.1.3`)。OpenCode 按"含版本号的包名"建独立缓存目录:写死版本号后,以后升级只需把后缀改成新版本号;若不带版本号,会被首次安装的版本锁住,发布新版也不会自动更新。
 
 ### 方式二:本地 clone(开发/离线)
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-accounts-usage",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "OpenCode TUI plugin to view multi-account Claude usage and switch the active account. Coexists with @ex-machina/opencode-anthropic-auth.",
   "type": "module",
   "license": "MIT",

package/src/dialogs.tsx

@@ -1,5 +1,6 @@
 /** @jsxImportSource @opentui/solid */
-import { For, Show } from "solid-js"
+import { createMemo, createSignal, For, Show } from "solid-js"
+import { useKeyboard } from "@opentui/solid"
 import type { TuiPluginApi } from "@opencode-ai/plugin/tui"
 import type { StoredAccount } from "./accounts.ts"
 import type { AccountUsage, UsageWindow } from "./usage.ts"
@@ -115,24 +116,135 @@ export function openUsageDialog(api: TuiPluginApi, state: () => UsageState): voi
   api.ui.dialog.replace(() => <UsageDialog api={api} state={state} />)
 }
 
+function SwitchAccountRow(props: {
+  api: TuiPluginApi
+  account: StoredAccount
+  activeId?: string
+  usage?: AccountUsage
+  selected: boolean
+  loading: boolean
+}) {
+  const theme = () => props.api.theme.current
+  const isActive = () => props.account.id === props.activeId
+  return (
+    <box flexDirection="column">
+      <box flexDirection="row" gap={1}>
+        <text fg={props.selected ? theme().primary : theme().textMuted}>{props.selected ? "▶" : " "}</text>
+        <text fg={props.selected ? theme().primary : theme().text}>
+          {isActive() ? "●" : "○"} {props.account.label}
+          {isActive() ? " (当前)" : ""}
+        </text>
+      </box>
+      <box flexDirection="column" paddingLeft={4}>
+        <Show when={props.usage?.error}>
+          <text fg={theme().error}>{props.usage!.error}</text>
+        </Show>
+        <Show when={props.usage?.usage}>
+          {(usage) => (
+            <box flexDirection="column">
+              <WindowRow api={props.api} name="5h" win={usage().five_hour} />
+              <WindowRow api={props.api} name="7d" win={usage().seven_day} />
+              <WindowRow api={props.api} name="Sonnet" win={usage().seven_day_sonnet} />
+            </box>
+          )}
+        </Show>
+        <Show when={props.loading && !props.usage?.usage && !props.usage?.error}>
+          <text fg={theme().textMuted}>加载中…</text>
+        </Show>
+      </box>
+    </box>
+  )
+}
+
+function SwitchDialog(props: {
+  api: TuiPluginApi
+  accounts: StoredAccount[]
+  activeId?: string
+  state: () => UsageState
+  onSwitch: (id: string) => void
+}) {
+  const api = props.api
+  const theme = () => api.theme.current
+  const accounts = props.accounts
+  const start = accounts.findIndex((account) => account.id === props.activeId)
+  const [index, setIndex] = createSignal(start < 0 ? 0 : start)
+
+  const usageById = createMemo(() => {
+    const map = new Map<string, AccountUsage>()
+    for (const result of props.state().results) map.set(result.id, result)
+    return map
+  })
+
+  function move(delta: number): void {
+    setIndex((i) => Math.max(0, Math.min(accounts.length - 1, i + delta)))
+  }
+
+  function confirm(): void {
+    const account = accounts[index()]
+    if (!account) return
+    api.ui.dialog.clear()
+    props.onSwitch(account.id)
+  }
+
+  useKeyboard((evt) => {
+    if (evt.name === "return") {
+      evt.preventDefault()
+      evt.stopPropagation()
+      confirm()
+      return
+    }
+    if (evt.name === "up" || evt.name === "k") {
+      evt.preventDefault()
+      evt.stopPropagation()
+      move(-1)
+      return
+    }
+    if (evt.name === "down" || evt.name === "j") {
+      evt.preventDefault()
+      evt.stopPropagation()
+      move(1)
+    }
+  })
+
+  return (
+    <box paddingTop={1} paddingBottom={1} paddingLeft={2} paddingRight={2} gap={1} flexDirection="column">
+      <box flexDirection="row" justifyContent="space-between">
+        <text fg={theme().text}>
+          <b>切换 Claude 账号</b>
+        </text>
+        <text fg={theme().textMuted}>↑↓ 选择 · enter 切换 · esc 关闭</text>
+      </box>
+      <For each={accounts}>
+        {(account, i) => (
+          <SwitchAccountRow
+            api={api}
+            account={account}
+            activeId={props.activeId}
+            usage={usageById().get(account.id)}
+            selected={i() === index()}
+            loading={props.state().loading}
+          />
+        )}
+      </For>
+      <Show when={props.state().error}>
+        <text fg={theme().error}>{props.state().error}</text>
+      </Show>
+      <Show when={props.state().updatedAt}>
+        <text fg={theme().textMuted}>更新于 {clockTime(props.state().updatedAt!)}</text>
+      </Show>
+    </box>
+  )
+}
+
 export function openSwitchDialog(
   api: TuiPluginApi,
   accounts: StoredAccount[],
   activeId: string | undefined,
+  state: () => UsageState,
   onSwitch: (id: string) => void | Promise<void>,
 ): void {
-  api.ui.dialog.replace(() =>
-    api.ui.DialogSelect<string>({
-      title: "切换 Claude 账号",
-      current: activeId,
-      options: accounts.map((account) => ({
-        title: account.id === activeId ? `${account.label} (当前)` : account.label,
-        value: account.id,
-      })),
-      onSelect: (option) => {
-        api.ui.dialog.clear()
-        void onSwitch(option.value)
-      },
-    }),
-  )
+  api.ui.dialog.setSize("medium")
+  api.ui.dialog.replace(() => (
+    <SwitchDialog api={api} accounts={accounts} activeId={activeId} state={state} onSwitch={(id) => void onSwitch(id)} />
+  ))
 }

package/tui.tsx

@@ -60,7 +60,8 @@ const tui: TuiPlugin = async (api) => {
           api.ui.toast({ variant: "warning", message: "没有账号。请先用 ex-machina 登录 Claude" })
           return
         }
-        openSwitchDialog(api, file.accounts, file.activeId, async (id) => {
+        setState((prev) => ({ ...prev, loading: true, error: undefined }))
+        openSwitchDialog(api, file.accounts, file.activeId, state, async (id) => {
           try {
             const account = await switchToAccount(id)
             api.ui.toast({ variant: "success", message: `已切换到 ${account.label},下次对话生效` })
@@ -68,6 +69,7 @@ const tui: TuiPlugin = async (api) => {
             api.ui.toast({ variant: "error", message: `切换失败: ${message(error)}` })
           }
         })
+        void refreshUsage()
       },
     },
   ])