shraga 0.1.125 → 0.1.127

package/dist/client/index.html

@@ -13,7 +13,7 @@
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet" />
-    <script type="module" crossorigin src="/assets/index-C3DF2H1h.js"></script>
+    <script type="module" crossorigin src="/assets/index-DRTvNKXl.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/index-_XEpjgJO.css">
   </head>
   <body>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shraga",
-  "version": "0.1.125",
+  "version": "0.1.127",
   "description": "The teammate you delegate coding to — a self-hostable, multi-user AI coding agent web UI (Claude Code, with a pluggable engine seam).",
   "type": "module",
   "main": "./src/index.ts",

package/src/client/components/ClaudeAccountSection.tsx

@@ -2,9 +2,10 @@ import { useCallback, useEffect, useState } from 'react';
 import { Button } from './ui/button';
 import { Input } from './ui/input';
 import { api } from '@/lib/api';
+import { UsageMetric, type Usage } from './MachineStats';
 
-interface AccountStatus { connected: boolean; account: string | null; subscriptionType: string | null }
-interface Accounts { me: AccountStatus | null; global?: AccountStatus }
+interface AccountStatus { connected: boolean; account: string | null; subscriptionType: string | null; useShared?: boolean }
+interface Accounts { me: AccountStatus | null; global?: AccountStatus; usage?: { me: Usage | null; global: Usage | null } }
 type Target = 'me' | 'global';
 
 /** Connect / replace / disconnect a Claude Code subscription login from the browser (no SSH). */
@@ -44,21 +45,38 @@ export function ClaudeAccountSection({ getToken }: { getToken: () => Promise<str
     await api(`/api/claude-account/${target}`, getToken, { method: 'DELETE' });
     refresh();
   });
+  const useShared = (on: boolean) => act(async () => {
+    await api('/api/claude-account/me/use-shared', getToken, { method: 'PUT', body: JSON.stringify({ on }) });
+    refresh();
+  });
 
-  const row = (target: Target, title: string, s: AccountStatus | null) => (
+  const active = (target: Target) => target === 'global'
+    ? !accounts?.me?.connected || !!accounts.me.useShared
+    : !!accounts?.me?.connected && !accounts.me.useShared;
+
+  const row = (target: Target, title: string, s: AccountStatus | null, canManage = true) => (
     <div className="flex items-center justify-between gap-2 flex-wrap">
       <div className="text-sm min-w-0">
-        <div className="font-medium">{title}</div>
+        <div className="font-medium flex items-center gap-2">
+          {title}
+          {active(target) && <span className="text-[10px] uppercase tracking-wide text-emerald-500">active</span>}
+          <UsageMetric usage={accounts?.usage?.[target] ?? null} />
+        </div>
         <div className="text-xs text-muted-foreground truncate">
-          {s?.connected ? `${s.account ?? 'Connected'}${s.subscriptionType ? ` · ${s.subscriptionType}` : ''}` : target === 'me' ? 'Not connected — using the shared subscription' : 'Not connected'}
+          {s?.connected ? `${s.account ?? 'Connected'}${s.subscriptionType ? ` · ${s.subscriptionType}` : ''}` : target === 'me' ? 'Not connected — using the shared subscription' : canManage ? 'Not connected' : ''}
         </div>
       </div>
-      <div className="flex gap-2">
-        <Button size="sm" variant="outline" disabled={busy} onClick={() => connect(target)}>{s?.connected ? 'Replace' : 'Connect'}</Button>
-        {target === 'me' && s?.connected && (
-          <Button size="sm" variant="ghost" disabled={busy} onClick={() => disconnect(target)}>Use shared</Button>
-        )}
-      </div>
+      {canManage && (
+        <div className="flex gap-2">
+          <Button size="sm" variant="outline" disabled={busy} onClick={() => connect(target)}>{s?.connected ? 'Replace' : 'Connect'}</Button>
+          {target === 'me' && s?.connected && (
+            <>
+              <Button size="sm" variant="ghost" disabled={busy} onClick={() => useShared(!s.useShared)}>{s.useShared ? 'Use mine' : 'Use shared'}</Button>
+              <Button size="sm" variant="ghost" disabled={busy} onClick={() => disconnect(target)}>Sign out</Button>
+            </>
+          )}
+        </div>
+      )}
     </div>
   );
 
@@ -69,7 +87,8 @@ export function ClaudeAccountSection({ getToken }: { getToken: () => Promise<str
       {accounts.me ? row('me', 'Your subscription', accounts.me) : (
         <p className="text-xs text-muted-foreground">Personal subscription unavailable: you are not a contact on this agent.</p>
       )}
-      {accounts.global && row('global', 'Shared subscription', accounts.global)}
+      {accounts.global ? row('global', 'Shared subscription', accounts.global)
+        : accounts.usage?.global && row('global', 'Shared subscription', null, false)}
       {pending && (
         <div className="rounded-md bg-muted/50 px-3 py-2 space-y-2 text-xs">
           <p>

package/src/server/boot.ts

@@ -295,7 +295,14 @@ app.get('/api/claude-account', requireAuth, claudeLoginRoute(async (_req, res, u
     return null;
   });
   const global = user?.isOwner ? await claudeLogin.status(claudeLogin.resolve('global', user)) : undefined;
-  res.json({ me, global });
+  // Cached readings only (the reader dedupes + TTLs upstream) — shared usage is visible to every member.
+  const meDir = me?.connected ? claudeLogin.resolve('me', user).dir : null;
+  const [meUsage, globalUsage] = await Promise.all([meDir ? claudeUsageFor(meDir).get() : null, claudeUsageFor(null).get()]);
+  res.json({ me, global, usage: { me: meUsage, global: globalUsage } });
+}));
+app.put('/api/claude-account/:target/use-shared', requireAuth, claudeLoginRoute(async (req, res, user) => {
+  await claudeLogin.setUseShared(claudeLogin.resolve(String(req.params.target), user), !!req.body?.on);
+  res.json({ ok: true });
 }));
 app.post('/api/claude-account/:target/login', requireAuth, claudeLoginRoute(async (req, res, user) => {
   res.json({ url: await claudeLogin.start(claudeLogin.resolve(String(req.params.target), user)) });

package/src/server/claude-account.ts

@@ -4,7 +4,7 @@
  * `CLAUDE_CONFIG_DIR=<dir> claude auth login`). Anything else → null → the default account, unchanged.
  * The folder is data-sync ignored (see DataSync.GITIGNORE_ENTRIES) and hidden from the workspace UI (dotdir).
  */
-import { statSync } from 'node:fs';
+import { existsSync, statSync } from 'node:fs';
 import path from 'node:path';
 import * as contacts from './contacts.ts';
 import { WORKSPACE_DIR } from './workspace.ts';
@@ -19,7 +19,13 @@ export function claudeAccountDir(
   const contact = email ? find(email) : null;
   if (!contact?.id) return null;
   const dir = path.join(workspaceDir, 'users', contact.id, '.claude');
-  try { return statSync(dir).isDirectory() ? dir : null; } catch { return null; }
+  try { return statSync(dir).isDirectory() && !usesShared(dir) ? dir : null; } catch { return null; }
+}
+
+/** Marker inside a personal login dir: keep the credentials but route runs to the shared login (hot-switch). */
+export const USE_SHARED_MARKER = '.shraga-use-shared';
+export function usesShared(dir: string): boolean {
+  return existsSync(path.join(dir, USE_SHARED_MARKER));
 }
 
 /** The login a run on `dir` (null = the box default) is signed in as, for provenance. Never a token. */

package/src/server/claude-login.ts

@@ -14,7 +14,7 @@ import { createRequire } from 'node:module';
 import { homedir, tmpdir } from 'node:os';
 import path from 'node:path';
 import * as contacts from './contacts.ts';
-import { applyClaudeAccount } from './claude-account.ts';
+import { applyClaudeAccount, usesShared, USE_SHARED_MARKER } from './claude-account.ts';
 import { WORKSPACE_DIR } from './workspace.ts';
 
 const TAG = '[claude-login]';
@@ -32,7 +32,7 @@ export interface ClaudeTarget {
   explicitDir: boolean;
 }
 
-export interface ClaudeAccountStatus { connected: boolean; account: string | null; subscriptionType: string | null }
+export interface ClaudeAccountStatus { connected: boolean; account: string | null; subscriptionType: string | null; useShared?: boolean }
 
 export class ClaudeLoginError extends Error {
   constructor(public status: number, message: string) { super(message); }
@@ -85,7 +85,8 @@ export class ClaudeLogin {
     try {
       const out = await this.run(['auth', 'status', '--json'], target.explicitDir ? target.dir : null);
       const s = JSON.parse(out);
-      return { connected: !!s.loggedIn, account: s.email ?? null, subscriptionType: s.subscriptionType ?? null };
+      const useShared = target.name === 'me' && usesShared(target.dir);
+      return { connected: !!s.loggedIn, account: s.email ?? null, subscriptionType: s.subscriptionType ?? null, ...(useShared && { useShared }) };
     } catch (err) {
       console.warn(`${TAG} status failed for ${target.key}:`, (err as Error).message);
       return none;
@@ -97,7 +98,10 @@ export class ClaudeLogin {
     this.cancel(target.key);
     const loginDir = this.options.swap ? await mkdtemp(path.join(tmpdir(), 'shraga-claude-login-')) : target.dir;
     if (!this.options.swap) await mkdir(loginDir, { recursive: true, mode: 0o700 });
-    const child = spawn(this.options.cliPath, ['auth', 'login', '--claudeai'], { env: this.env(loginDir, true), stdio: ['pipe', 'pipe', 'pipe'] });
+    // In-place (darwin): same dir rule as status()/runs. macOS keys the Keychain item by CLAUDE_CONFIG_DIR, so
+    // logging an implicit global login in with CLAUDE_CONFIG_DIR=~/.claude saved it under a suffixed item nobody reads.
+    const envDir = this.options.swap || target.explicitDir ? loginDir : null;
+    const child = spawn(this.options.cliPath, ['auth', 'login', '--claudeai'], { env: this.env(envDir, true), stdio: ['pipe', 'pipe', 'pipe'] });
     let out = '';
     const onData = (b: Buffer) => { out += b.toString(); };
     child.stdout!.on('data', onData);
@@ -142,10 +146,20 @@ export class ClaudeLogin {
     } finally {
       if (this.options.swap) await rm(p.loginDir, { recursive: true, force: true });
     }
+    if (target.name === 'me') await rm(path.join(target.dir, USE_SHARED_MARKER), { force: true }); // (re)connecting = use it
     this.options.onChange(target);
     return this.status(target);
   }
 
+  /** `me` only: hot-switch between the personal login and the shared one, keeping the credentials. */
+  async setUseShared(target: ClaudeTarget, on: boolean): Promise<void> {
+    if (target.name !== 'me') throw new ClaudeLoginError(400, 'Only a personal login can be switched');
+    if (!(await exists(target.dir))) throw new ClaudeLoginError(409, 'No personal login to switch');
+    const marker = path.join(target.dir, USE_SHARED_MARKER);
+    // No onChange: the login itself is unchanged, and each dir's usage cache stays valid.
+    if (on) await writeFile(marker, ''); else await rm(marker, { force: true });
+  }
+
   /** `me`: logout + remove the dir → runs fall back to the shared subscription. `global`: logout. */
   async disconnect(target: ClaudeTarget): Promise<void> {
     this.cancel(target.key);