opencode-auth-load-balancer 0.5.0 → 0.6.0

package/tui/auth-load-balancer-tui.view.tsx

@@ -12,7 +12,8 @@
  *     per provider, sorted by the scheduler's score (highest = use next), showing
  *     the score + use-order, usage + reset countdowns, in-use marker, and state.
  *     Click any account row for a menu to Rename (prompt), Disable/Enable
- *     (toggle), Re-login (provider OAuth), or Delete (confirm) it.
+ *     (toggle), Re-login (provider OAuth), pair a Claude row's other login
+ *     (setup-token for inference / OAuth for usage), or Delete (confirm) it.
  *
  * The ranking is computed by the SAME code the server scheduler uses — imported from a
  * byte-identical copy of src/scheduler/score-core.ts installed alongside this file
@@ -30,25 +31,40 @@ import {
   utilOf,
 } from './auth-load-balancer-scoring'
 import {
+  awaitSyncResult,
   cfg,
+  cleanLabel,
   clearReloginTargetInPool,
   compareAscii,
+  credentialTag,
   deleteFromPool,
+  discardSyncIntent,
+  hasLostLogin,
+  isGistLinkShape,
+  lostLoginLines,
   MANUAL_DISABLED_REASON,
   pct,
   pickAuthMethodIndex,
   type PoolShape,
   readPool,
+  readShareLink,
+  readSyncView,
   renameInPool,
+  rowWarnings,
   sessionAccountId,
   sessionFallback,
   setDisabledInPool,
   setReloginTargetInPool,
   stateOf,
+  type SyncAction,
+  syncLines,
+  syncMenu,
+  type SyncMenuId,
   tierResets,
   toScore,
   until,
   winPct,
+  writeSyncIntent,
 } from './auth-load-balancer-tui.logic'
 
 // NOTE: ships its OWN copy of `src/status.ts`'s `PROVIDER_NAMES` by design —
@@ -113,6 +129,14 @@ function usePool() {
   return sample
 }
 
+/** One poll sample of the sync state: role, last sync, latest outcome (never the key). */
+function useSync() {
+  const [view, setView] = createSignal(readSyncView())
+  const timer = setInterval(() => setView(readSyncView()), POLL_MS)
+  onCleanup(() => clearInterval(timer))
+  return view
+}
+
 /** Shared theme-color accessor used identically by `BottomBar` and `SidebarPanel`. */
 function themeColor(api: TuiPluginApi) {
   return () => api.theme.current
@@ -131,6 +155,8 @@ interface Chip extends WindowDisplay {
   label: string
   /** Raw model ids (requested → served) when this session runs on a fallback model, else undefined. */
   fallback?: { from: string; to: string }
+  /** `<label> <warning>` for each login warning on this provider's rows (`rowWarnings`). */
+  warnings: string[]
 }
 
 /** Always-visible bottom bar (app_bottom): the in-use account per provider. */
@@ -159,7 +185,7 @@ function BottomBar(props: { api: TuiPluginApi }) {
       if (!a) continue
       out.push({
         name: providerLabel(providerID),
-        label: a.label,
+        label: cleanLabel(a.label),
         weeklyPct: winPct(a.usage?.weekly, now),
         weeklyReset: until(a.usage?.weekly?.resetAt, now),
         hourlyPct: winPct(a.usage?.hourly, now),
@@ -167,6 +193,9 @@ function BottomBar(props: { api: TuiPluginApi }) {
         // Only THIS session's fallback (keyed by sid); the `lastSelected` home-screen
         // fallback path has no session, so no downgrade to surface there.
         fallback: sessionFallback(p, providerID, sid),
+        warnings: accounts
+          .filter((x) => x.providerID === providerID)
+          .flatMap((x) => rowWarnings(x, now).map((w) => `${x.label} ${w}`)),
       })
     }
     return out
@@ -186,6 +215,11 @@ function BottomBar(props: { api: TuiPluginApi }) {
               </span>
             ) : null}
             {`  wk ${a.weeklyPct} (${a.weeklyReset}) · 5h ${a.hourlyPct} (${a.hourlyReset})`}
+            {a.warnings.length > 0 ? (
+              <span style={{ fg: color().warning }}>
+                {`  ! ${a.warnings.join(' · ')}`}
+              </span>
+            ) : null}
           </text>
         )}
       </For>
@@ -202,8 +236,15 @@ interface Row extends WindowDisplay {
   rank: number | null
   state: string
   manuallyDisabled: boolean
-  /** A static API-key row: re-login asks for a new key, not an OAuth sign-in. */
+  /** A static-credential row (API key, setup-token): re-login asks for a new one, not an OAuth sign-in. */
   apiKey: boolean
+  /** `credentialTag`: `token` / `token+oauth` on a setup-token row, else ''. */
+  login: string
+  /** A login of this row was refused for good: its menu offers to re-login that one. */
+  oauthLost: boolean
+  tokenLost: boolean
+  /** Why each lost login stopped working (`lostLoginLines`). */
+  lostLines: string[]
 }
 interface Group {
   provider: string
@@ -216,6 +257,7 @@ function SidebarPanel(props: {
   sessionId: string | undefined
 }) {
   const sample = usePool()
+  const sync = useSync()
   const color = themeColor(props.api)
   const groups = createMemo<Group[]>(() => {
     const { pool: p, now } = sample()
@@ -249,7 +291,7 @@ function SidebarPanel(props: {
         if (available) rank += 1
         return {
           id: a.id,
-          label: a.label,
+          label: cleanLabel(a.label),
           providerID,
           current: sessionAcct === a.id,
           score: available ? score : null,
@@ -266,9 +308,15 @@ function SidebarPanel(props: {
           // Raw reads are finiteness-guarded inside tierResets: a hand-edited
           // `1e999` entry (Infinity via JSON.parse) would otherwise render its
           // tier annotation forever until the server heals the file.
-          state: stateOf(sa, tierResets(a, now), now),
+          state: [stateOf(sa, tierResets(a, now), now), ...rowWarnings(a, now)]
+            .filter(Boolean)
+            .join(' · '),
           manuallyDisabled: a.disabledReason === MANUAL_DISABLED_REASON,
           apiKey: a.refresh === '',
+          login: credentialTag(a),
+          oauthLost: hasLostLogin(a, 'oauth'),
+          tokenLost: hasLostLogin(a, 'token'),
+          lostLines: lostLoginLines(a, now),
         }
       })
       return { provider: providerLabel(providerID), rows }
@@ -307,17 +355,22 @@ function SidebarPanel(props: {
     )
   }
 
+  /**
+   * Run one of the provider's pooled logins onto the clicked row:
+   * `staticLogin` picks the setup-token / API-key login, else the OAuth one.
+   * `action` names the step in the dialog and toasts ("Re-login", …).
+   */
   async function openRelogin(
-    id: string,
-    label: string,
-    providerID: string,
-    apiKey: boolean,
+    row: Row,
+    staticLogin: boolean,
+    action: string,
   ): Promise<void> {
+    const { id, label, providerID } = row
     try {
       const methods = (await props.api.client.provider.auth()).data?.[
         providerID
       ]
-      const method = pickAuthMethodIndex(methods, apiKey)
+      const method = pickAuthMethodIndex(methods, staticLogin)
       if (method === null) {
         props.api.ui.toast({
           variant: 'error',
@@ -355,7 +408,7 @@ function SidebarPanel(props: {
           if (completed) {
             props.api.ui.toast({
               variant: 'success',
-              message: `Re-login complete for ${label}.`,
+              message: `${action} complete for ${label}.`,
             })
             // The existing 3s usePool poll observes the consumed intent and
             // cleared disabledReason; no manual state refresh is needed.
@@ -363,7 +416,7 @@ function SidebarPanel(props: {
             clearReloginTargetInPool()
             props.api.ui.toast({
               variant: 'error',
-              message: `Re-login failed for ${label}.`,
+              message: `${action} failed for ${label}.`,
             })
           }
           dialog().clear()
@@ -372,7 +425,7 @@ function SidebarPanel(props: {
           dialog().clear()
           props.api.ui.toast({
             variant: 'error',
-            message: `Re-login failed for ${label}.`,
+            message: `${action} failed for ${label}.`,
           })
         }
       }
@@ -382,7 +435,7 @@ function SidebarPanel(props: {
         // to approve it for as long as the callback waits.
         dialog().replace(() =>
           props.api.ui.DialogAlert({
-            title: `Re-login "${label}"`,
+            title: `${action} "${label}"`,
             message: `${auth.instructions}\n\n${auth.url}`,
             onConfirm: () => dialog().clear(),
           }),
@@ -393,7 +446,7 @@ function SidebarPanel(props: {
 
       dialog().replace(() =>
         props.api.ui.DialogPrompt({
-          title: `Re-login "${label}"`,
+          title: `${action} "${label}"`,
           description: () => (
             <box>
               <text>{auth.instructions}</text>
@@ -421,46 +474,15 @@ function SidebarPanel(props: {
       dialog().clear()
       props.api.ui.toast({
         variant: 'error',
-        message: `Re-login failed for ${label}.`,
+        message: `${action} failed for ${label}.`,
       })
     }
   }
 
-  // Click an account -> a small menu so Rename, Disable/Enable, Re-login, and Delete are
-  // all reachable. Deliberately NOT api.ui.DialogSelect: that always renders an
-  // auto-focused filter <input>, and a focused opentui input swallows the FIRST
-  // Esc (to blur itself) — so the menu needed TWO Esc presses to close. A plain
-  // clickable list has no input, so the dialog stack's own Esc binding closes it
-  // in ONE press. The menu is opened by a mouse click on the row, so mouse-driven
-  // options stay consistent (there is no keyboard path that opens it).
-  function openMenu(
-    id: string,
-    label: string,
-    providerID: string,
-    manuallyDisabled: boolean,
-    apiKey: boolean,
+  function showMenu(
+    title: string,
+    items: readonly { title: string; run: () => void }[],
   ): void {
-    const items: { title: string; run: () => void }[] = [
-      { title: 'Rename', run: () => openRename(id, label) },
-      {
-        // Reversible (just a scheduler skip), so no confirm step — flip the
-        // pool flag and close, unlike Delete which drops the tokens.
-        title: manuallyDisabled
-          ? 'Enable — include in selection'
-          : 'Disable — exclude from selection',
-        run: () => {
-          setDisabledInPool(id, !manuallyDisabled)
-          dialog().clear()
-        },
-      },
-      {
-        title: 'Re-login — re-authorize with the provider',
-        run: () => {
-          void openRelogin(id, label, providerID, apiKey)
-        },
-      },
-      { title: 'Delete — remove from pool', run: () => openDelete(id, label) },
-    ]
     dialog().replace(() => {
       const c = color()
       const [hovered, setHovered] = createSignal(-1)
@@ -474,7 +496,7 @@ function SidebarPanel(props: {
         >
           <box flexDirection="row" justifyContent="space-between">
             <text fg={c.text}>
-              <b>{label}</b>
+              <b>{title}</b>
             </text>
             <text fg={c.textMuted} onMouseUp={() => dialog().clear()}>
               esc
@@ -501,68 +523,238 @@ function SidebarPanel(props: {
     })
   }
 
+  // Click an account -> a small menu so Rename, Disable/Enable, Re-login, pairing, and
+  // Delete are all reachable. Deliberately NOT api.ui.DialogSelect: that always renders an
+  // auto-focused filter <input>, and a focused opentui input swallows the FIRST
+  // Esc (to blur itself) — so the menu needed TWO Esc presses to close. A plain
+  // clickable list has no input, so the dialog stack's own Esc binding closes it
+  // in ONE press. The menu is opened by a mouse click on the row, so mouse-driven
+  // options stay consistent (there is no keyboard path that opens it).
+  function openMenu(row: Row): void {
+    const { id, label, manuallyDisabled } = row
+    // A Claude row holds two logins — a setup-token serving inference, an
+    // OAuth login measuring usage (and serving inference without a token) —
+    // so it gets one item per login instead of an ambiguous "Re-login".
+    const hasOAuth = !row.apiKey
+    const hasToken = row.login !== ''
+    const logins =
+      row.providerID === 'anthropic'
+        ? [
+            {
+              action:
+                hasOAuth || row.oauthLost
+                  ? 'Re-login OAuth'
+                  : 'Add OAuth login',
+              role: hasToken ? 'usage' : 'inference + usage',
+              staticLogin: false,
+            },
+            {
+              action: hasToken
+                ? 'Replace setup-token'
+                : row.tokenLost
+                  ? 'Re-login setup-token'
+                  : 'Add setup-token',
+              role: 'inference',
+              staticLogin: true,
+            },
+          ]
+        : [
+            {
+              action: 'Re-login',
+              role: 're-authorize with the provider',
+              staticLogin: row.apiKey,
+            },
+          ]
+    const items: { title: string; run: () => void }[] = [
+      { title: 'Rename', run: () => openRename(id, label) },
+      {
+        // Reversible (just a scheduler skip), so no confirm step — flip the
+        // pool flag and close, unlike Delete which drops the tokens.
+        title: manuallyDisabled
+          ? 'Enable — include in selection'
+          : 'Disable — exclude from selection',
+        run: () => {
+          setDisabledInPool(id, !manuallyDisabled)
+          dialog().clear()
+        },
+      },
+      ...logins.map(({ action, role, staticLogin }) => ({
+        title: `${action} — ${role}`,
+        run: () => {
+          void openRelogin(row, staticLogin, action)
+        },
+      })),
+      { title: 'Delete — remove from pool', run: () => openDelete(id, label) },
+    ]
+    showMenu(label, items)
+  }
+
+  /**
+   * Ask the server for a sync action and report its outcome. The toast carries
+   * the server's own message, which never holds the link; only `showLink`,
+   * which the user chose, opens the link in a dialog.
+   */
+  async function runSync(
+    action: SyncAction,
+    link?: string,
+    showLink = false,
+  ): Promise<void> {
+    dialog().clear()
+    const at = writeSyncIntent(action, link)
+    if (action === 'forget') return
+    const status = await awaitSyncResult(at)
+    if (!status) discardSyncIntent(at)
+    props.api.ui.toast({
+      variant: status?.ok ? 'success' : 'error',
+      message: status?.message ?? 'Sync is taking longer than expected.',
+    })
+    const shared = status?.ok && showLink ? readShareLink() : undefined
+    if (shared) openLink(shared)
+  }
+
+  function openLink(link: string): void {
+    dialog().replace(() =>
+      props.api.ui.DialogAlert({
+        title: 'Share link',
+        message: `${link}\n\nOpen opencode on another machine, choose Sync here, and paste this. Anyone holding it can read these credentials: if it leaks, delete the gist and upload again for a new link.`,
+        onConfirm: () => dialog().clear(),
+      }),
+    )
+  }
+
+  function openSubscribe(): void {
+    dialog().replace(() =>
+      props.api.ui.DialogPrompt({
+        title: 'Follow a gist link',
+        placeholder: 'https://gist.github.com/<user>/<id>#<key>',
+        onConfirm: (text: string) => {
+          if (isGistLinkShape(text)) void runSync('subscribe', text)
+          else {
+            dialog().clear()
+            props.api.ui.toast({
+              variant: 'error',
+              message: 'That is not a gist link with a key.',
+            })
+          }
+        },
+        onCancel: () => dialog().clear(),
+      }),
+    )
+  }
+
+  function openForget(): void {
+    dialog().replace(() =>
+      props.api.ui.DialogConfirm({
+        title: 'Stop syncing',
+        message:
+          'Stop syncing with the gist? Accounts already imported stay in the pool; the gist itself is not deleted.',
+        onConfirm: () => void runSync('forget'),
+        onCancel: () => dialog().clear(),
+      }),
+    )
+  }
+
+  const syncRuns: Record<SyncMenuId, () => void> = {
+    'show-link': () => {
+      const link = readShareLink()
+      if (link) openLink(link)
+    },
+    upload: () => void runSync('upload'),
+    'upload-new': () => void runSync('upload-new', undefined, true),
+    sync: () => void runSync('sync'),
+    subscribe: openSubscribe,
+    forget: openForget,
+  }
+
+  function openSyncMenu(): void {
+    showMenu(
+      'Gist sync',
+      syncMenu(sync()).map((item) => ({
+        title: item.title,
+        run: syncRuns[item.id],
+      })),
+    )
+  }
+
   return (
-    <Show when={groups().length > 0}>
-      <box>
+    <box>
+      <Show when={groups().length > 0}>
+        <box>
+          <text fg={color().text}>
+            <b>Auth accounts</b>
+            <span style={{ fg: color().textMuted }}>
+              {' '}
+              (click: rename / disable / re-login / delete)
+            </span>
+          </text>
+          <For each={groups()}>
+            {(g) => (
+              <box>
+                <text fg={color().textMuted}>{g.provider}</text>
+                <For each={g.rows}>
+                  {(r) => (
+                    <box onMouseUp={() => openMenu(r)}>
+                      <text
+                        fg={
+                          r.manuallyDisabled
+                            ? color().textMuted
+                            : r.current
+                              ? color().primary
+                              : color().text
+                        }
+                        wrapMode="word"
+                      >
+                        {(r.current ? '▶ ' : '  ') +
+                          (r.rank ? `${r.rank}. ` : '  ') +
+                          r.label}
+                        <Show when={r.login}>
+                          <span style={{ fg: color().textMuted }}>
+                            {` [${r.login}]`}
+                          </span>
+                        </Show>
+                        <Show when={r.score !== null}>
+                          <span style={{ fg: color().secondary }}>
+                            {`  ${(r.score ?? 0).toFixed(2)}`}
+                          </span>
+                        </Show>
+                        <Show when={r.state}>
+                          <span
+                            style={{ fg: color().warning }}
+                          >{` (${r.state})`}</span>
+                        </Show>
+                      </text>
+                      <text fg={color().textMuted}>
+                        {`      wk ${r.weeklyPct} (${r.weeklyReset}) · 5h ${r.hourlyPct} (${r.hourlyReset})`}
+                      </text>
+                      <For each={r.lostLines}>
+                        {(line) => (
+                          <text fg={color().textMuted} wrapMode="word">
+                            {`      ${line}`}
+                          </text>
+                        )}
+                      </For>
+                    </box>
+                  )}
+                </For>
+              </box>
+            )}
+          </For>
+        </box>
+      </Show>
+      <box onMouseUp={openSyncMenu}>
         <text fg={color().text}>
-          <b>Auth accounts</b>
-          <span style={{ fg: color().textMuted }}>
-            {' '}
-            (click: rename / disable / re-login / delete)
-          </span>
+          <b>Gist sync</b>
+          <span style={{ fg: color().textMuted }}> (click)</span>
         </text>
-        <For each={groups()}>
-          {(g) => (
-            <box>
-              <text fg={color().textMuted}>{g.provider}</text>
-              <For each={g.rows}>
-                {(r) => (
-                  <box
-                    onMouseUp={() =>
-                      openMenu(
-                        r.id,
-                        r.label,
-                        r.providerID,
-                        r.manuallyDisabled,
-                        r.apiKey,
-                      )
-                    }
-                  >
-                    <text
-                      fg={
-                        r.manuallyDisabled
-                          ? color().textMuted
-                          : r.current
-                            ? color().primary
-                            : color().text
-                      }
-                      wrapMode="word"
-                    >
-                      {(r.current ? '▶ ' : '  ') +
-                        (r.rank ? `${r.rank}. ` : '  ') +
-                        r.label}
-                      <Show when={r.score !== null}>
-                        <span style={{ fg: color().secondary }}>
-                          {`  ${(r.score ?? 0).toFixed(2)}`}
-                        </span>
-                      </Show>
-                      <Show when={r.state}>
-                        <span
-                          style={{ fg: color().warning }}
-                        >{` (${r.state})`}</span>
-                      </Show>
-                    </text>
-                    <text fg={color().textMuted}>
-                      {`      wk ${r.weeklyPct} (${r.weeklyReset}) · 5h ${r.hourlyPct} (${r.hourlyReset})`}
-                    </text>
-                  </box>
-                )}
-              </For>
-            </box>
+        <For each={syncLines(sync(), sample().now)}>
+          {(line) => (
+            <text fg={color().textMuted} wrapMode="word">
+              {`  ${line}`}
+            </text>
           )}
         </For>
       </box>
-    </Show>
+    </box>
   )
 }