shraga 0.1.106 → 0.1.108

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-D3RZ6deR.js"></script>
+    <script type="module" crossorigin src="/assets/index-Bz719okT.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/index-CibL2gLy.css">
   </head>
   <body>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shraga",
-  "version": "0.1.106",
+  "version": "0.1.108",
   "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

@@ -0,0 +1,88 @@
+import { useCallback, useEffect, useState } from 'react';
+import { Button } from './ui/button';
+import { Input } from './ui/input';
+import { api } from '@/lib/api';
+
+interface AccountStatus { connected: boolean; account: string | null; subscriptionType: string | null }
+interface Accounts { me: AccountStatus | null; global?: AccountStatus }
+type Target = 'me' | 'global';
+
+/** Connect / replace / disconnect a Claude Code subscription login from the browser (no SSH). */
+export function ClaudeAccountSection({ getToken }: { getToken: () => Promise<string | null> }) {
+  const [accounts, setAccounts] = useState<Accounts | null>(null);
+  const [pending, setPending] = useState<{ target: Target; url: string } | null>(null);
+  const [code, setCode] = useState('');
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const refresh = useCallback(() => {
+    api<Accounts>('/api/claude-account', getToken)
+      .then(setAccounts)
+      .catch((err: Error) => { console.warn('[ClaudeAccountSection] status failed', err); setError(err.message); });
+  }, [getToken]);
+  useEffect(refresh, [refresh]);
+
+  const act = async (fn: () => Promise<void>) => {
+    setBusy(true); setError(null);
+    try { await fn(); } catch (err) { setError((err as Error).message); } finally { setBusy(false); }
+  };
+  const connect = (target: Target) => act(async () => {
+    // Open the tab synchronously (popup blockers), then point it at the URL once the server has it.
+    const tab = window.open('about:blank', '_blank');
+    try {
+      const { url } = await api<{ url: string }>(`/api/claude-account/${target}/login`, getToken, { method: 'POST' });
+      if (tab) tab.location.href = url;
+      setPending({ target, url }); setCode('');
+    } catch (err) { tab?.close(); throw err; }
+  });
+  const submit = () => act(async () => {
+    if (!pending) return;
+    await api(`/api/claude-account/${pending.target}/login/code`, getToken, { method: 'POST', body: JSON.stringify({ code }) });
+    setPending(null); setCode(''); refresh();
+  });
+  const disconnect = (target: Target) => act(async () => {
+    await api(`/api/claude-account/${target}`, getToken, { method: 'DELETE' });
+    refresh();
+  });
+
+  const row = (target: Target, title: string, s: AccountStatus | null) => (
+    <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="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'}
+        </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>
+    </div>
+  );
+
+  if (!accounts) return error ? <p className="text-xs text-destructive">{error}</p> : null;
+  return (
+    <div className="space-y-3">
+      <label className="text-sm font-medium block">Claude subscription</label>
+      {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)}
+      {pending && (
+        <div className="rounded-md bg-muted/50 px-3 py-2 space-y-2 text-xs">
+          <p>
+            Sign in on the <a className="underline" href={pending.url} target="_blank" rel="noreferrer">Claude login page</a>, then paste the code it shows.
+          </p>
+          <div className="flex gap-2">
+            <Input value={code} onChange={(e) => setCode(e.target.value)} placeholder="Paste code" />
+            <Button size="sm" disabled={busy || !code.trim()} onClick={submit}>Submit</Button>
+            <Button size="sm" variant="ghost" disabled={busy} onClick={() => setPending(null)}>Cancel</Button>
+          </div>
+        </div>
+      )}
+      {error && <p className="text-xs text-destructive">{error}</p>}
+    </div>
+  );
+}

package/src/client/components/ConfigPanel.tsx

@@ -6,6 +6,7 @@ import { Textarea } from './ui/textarea';
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger, DialogBody, DialogFooter } from './ui/dialog';
 import { useSlots } from '@/lib/slots';
 import { useEngines, type EngineModel } from '@/hooks/useEngines';
+import { ClaudeAccountSection } from './ClaudeAccountSection';
 
 interface AgentConfig {
   model?: string;
@@ -221,6 +222,8 @@ export function ConfigPanel({ getToken, onSaved, trigger, sessionId, sessionDire
 
           {slots.settingsSections?.({ getToken, sessionId })}
 
+          <ClaudeAccountSection getToken={getToken} />
+
           <div>
             <label className="text-sm font-medium mb-1.5 block">Permission Mode</label>
             <select

package/src/server/boot.ts

@@ -62,6 +62,7 @@ import { SelfUpgrade } from './self-upgrade/index.ts';
 import { initEngines, getAvailableEngines, getEngine } from './engine/index.ts';
 import { statsSampler } from './stats.ts';
 import { claudeUsage } from './claude-usage.ts';
+import { ClaudeLogin, ClaudeLoginError } from './claude-login.ts';
 import { getAll as getAllContacts } from './contacts.ts';
 import { artifactsRouter } from './artifacts/artifacts.routes.ts';
 import { handleArtifactToolUse } from './artifacts/artifacts.handler.ts';
@@ -250,6 +251,37 @@ app.get('/api/claude-usage', requireAuth, async (_req, res) => {
   res.json(usage);
 });
 
+// Claude subscription login from the web UI (claude-login.ts). `me` = the caller's per-user login
+// (workspace/users/<contactId>/.claude); `global` = the box's shared login, owner only.
+const claudeLogin = new ClaudeLogin({ onGlobalChange: () => claudeUsage.invalidate() });
+const claudeLoginRoute = (fn: (req: express.Request, res: express.Response, user: any) => Promise<unknown>) =>
+  async (req: express.Request, res: express.Response) => {
+    try { await fn(req, res, (req as any).user); }
+    catch (err) {
+      const status = err instanceof ClaudeLoginError ? err.status : 500;
+      if (status === 500) console.error('[claude-login]', err);
+      res.status(status).json({ error: (err as Error).message });
+    }
+  };
+app.get('/api/claude-account', requireAuth, claudeLoginRoute(async (_req, res, user) => {
+  const me = await claudeLogin.status(claudeLogin.resolve('me', user)).catch((err: Error) => {
+    console.debug('[claude-login] no personal target:', err.message);
+    return null;
+  });
+  const global = user?.isOwner ? await claudeLogin.status(claudeLogin.resolve('global', user)) : undefined;
+  res.json({ me, global });
+}));
+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)) });
+}));
+app.post('/api/claude-account/:target/login/code', requireAuth, claudeLoginRoute(async (req, res, user) => {
+  res.json(await claudeLogin.submitCode(claudeLogin.resolve(String(req.params.target), user), String(req.body?.code ?? '')));
+}));
+app.delete('/api/claude-account/:target', requireAuth, claudeLoginRoute(async (req, res, user) => {
+  await claudeLogin.disconnect(claudeLogin.resolve(String(req.params.target), user));
+  res.json({ ok: true });
+}));
+
 /**
  * Conversation list — PAGED and TRIMMED.
  *

package/src/server/claude-account.ts

@@ -1,15 +1,23 @@
 /**
- * Per-user Claude subscription routing by folder convention: a run whose requester email has a directory
- * `<CLAUDE_ACCOUNTS_DIR>/<email lowercased>` runs on that CLAUDE_CONFIG_DIR (log in once with
+ * Per-user Claude subscription routing: a run whose requester email resolves to a contact with a
+ * `workspace/users/<contactId>/.claude` directory runs on that CLAUDE_CONFIG_DIR (log in once with
  * `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 path from 'node:path';
+import * as contacts from './contacts.ts';
+import { WORKSPACE_DIR } from './workspace.ts';
 
-export function claudeAccountDir(userEmail?: string, root = process.env.CLAUDE_ACCOUNTS_DIR?.trim()): string | null {
+export function claudeAccountDir(
+  userEmail?: string,
+  find: (email: string) => { id: string } | null = email => contacts.find({ email }),
+  workspaceDir = WORKSPACE_DIR,
+): string | null {
   const email = userEmail?.trim().toLowerCase();
-  if (!root || !email || email.includes('/') || email.includes('\\') || email.includes('..')) return null;
-  const dir = path.join(root, email);
+  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; }
 }
 

package/src/server/claude-login.ts

@@ -0,0 +1,229 @@
+/**
+ * Web-UI Claude subscription login — connect / replace / disconnect without SSH.
+ *
+ * Drives the bundled CLI's `claude auth login` over plain pipes: it prints the OAuth URL and then reads
+ * the pasted code from stdin, so one pending child per target waits between the two HTTP calls.
+ * On Linux the login runs in a private temp CLAUDE_CONFIG_DIR and its credentials are installed into
+ * the real target only after the CLI exits 0 — a failed Replace never breaks the working login.
+ * macOS keeps credentials in a Keychain item keyed by the config dir (no file to move), so there the
+ * login runs in place.
+ */
+import { spawn, execFile, type ChildProcess } from 'node:child_process';
+import { copyFile, mkdir, mkdtemp, readdir, readFile, rename, rm, writeFile } from 'node:fs/promises';
+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 { WORKSPACE_DIR } from './workspace.ts';
+
+const TAG = '[claude-login]';
+
+export type ClaudeTargetName = 'me' | 'global';
+
+export interface ClaudeTarget {
+  key: string;
+  name: ClaudeTargetName;
+  /** CLAUDE_CONFIG_DIR the runs read — for `global` without an explicit env var, ~/.claude. */
+  dir: string;
+  /** Where the CLI writes `oauthAccount`: inside `dir` when CLAUDE_CONFIG_DIR is set, else ~/.claude.json. */
+  accountFile: string;
+  /** Whether runs set CLAUDE_CONFIG_DIR for this target (false only for an implicit global login). */
+  explicitDir: boolean;
+}
+
+export interface ClaudeAccountStatus { connected: boolean; account: string | null; subscriptionType: string | null }
+
+export class ClaudeLoginError extends Error {
+  constructor(public status: number, message: string) { super(message); }
+}
+
+export class ClaudeLoginOptions {
+  cliPath: string = resolveClaudeCli();
+  workspaceDir = WORKSPACE_DIR;
+  findContact: (email: string) => { id: string } | null = email => contacts.find({ email });
+  globalConfigDir: string | undefined = process.env.CLAUDE_CONFIG_DIR;
+  home = homedir();
+  /** Install credentials from a temp dir on success (file-based platforms); darwin logs in place. */
+  swap = process.platform !== 'darwin';
+  sessionTtlMs = 10 * 60_000;
+  urlTimeoutMs = 20_000;
+  codeTimeoutMs = 60_000;
+  /** Called after any change to the global login (usage reader cache). */
+  onGlobalChange: () => void = () => {};
+}
+
+interface Pending { target: ClaudeTarget; child: ChildProcess; loginDir: string; output: () => string; exit: Promise<number | null>; timer: ReturnType<typeof setTimeout> }
+
+export class ClaudeLogin {
+  public options: ClaudeLoginOptions;
+  private pending = new Map<string, Pending>();
+
+  public constructor(options?: Partial<ClaudeLoginOptions>) {
+    this.options = { ...new ClaudeLoginOptions(), ...options };
+  }
+
+  /** Authorization + target resolution. `me` needs a contact; `global` needs the owner. */
+  resolve(name: string, user: { email?: string; isOwner?: boolean }): ClaudeTarget {
+    const o = this.options;
+    if (name === 'global') {
+      if (!user.isOwner) throw new ClaudeLoginError(403, 'Only the owner can manage the shared Claude subscription');
+      const dir = o.globalConfigDir || path.join(o.home, '.claude');
+      return { key: 'global', name, dir, explicitDir: !!o.globalConfigDir, accountFile: o.globalConfigDir ? path.join(dir, '.claude.json') : path.join(o.home, '.claude.json') };
+    }
+    if (name !== 'me') throw new ClaudeLoginError(404, `Unknown target "${name}"`);
+    const email = user.email?.trim().toLowerCase();
+    const contact = email ? o.findContact(email) : null;
+    if (!contact?.id) throw new ClaudeLoginError(409, `No contact matches ${email || 'your account'} — ask the owner to add you as a contact before connecting a personal subscription`);
+    const dir = path.join(o.workspaceDir, 'users', contact.id, '.claude');
+    return { key: `me:${contact.id}`, name, dir, explicitDir: true, accountFile: path.join(dir, '.claude.json') };
+  }
+
+  async status(target: ClaudeTarget): Promise<ClaudeAccountStatus> {
+    const none = { connected: false, account: null, subscriptionType: null };
+    if (target.name === 'me' && !(await exists(target.dir))) return none;
+    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 };
+    } catch (err) {
+      console.warn(`${TAG} status failed for ${target.key}:`, (err as Error).message);
+      return none;
+    }
+  }
+
+  /** Spawn `auth login`, return the OAuth URL. Replaces any pending login for the same target. */
+  async start(target: ClaudeTarget): Promise<string> {
+    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'] });
+    let out = '';
+    const onData = (b: Buffer) => { out += b.toString(); };
+    child.stdout!.on('data', onData);
+    child.stderr!.on('data', onData);
+    const exit = new Promise<number | null>(res => { child.on('exit', code => res(code)); child.on('error', () => res(-1)); });
+    const timer = setTimeout(() => { console.info(`${TAG} login for ${target.key} expired`); this.cancel(target.key); }, this.options.sessionTtlMs);
+    timer.unref?.();
+    const p: Pending = { target, child, loginDir, output: () => out, exit, timer };
+    this.pending.set(target.key, p);
+
+    const url = await new Promise<string | null>(resolve => {
+      const check = () => { const u = parseLoginUrl(out); if (u) done(u); };
+      const done = (u: string | null) => { clearTimeout(t); child.stdout!.off('data', check); child.stderr!.off('data', check); resolve(u); };
+      const t = setTimeout(() => done(null), this.options.urlTimeoutMs);
+      child.stdout!.on('data', check);
+      child.stderr!.on('data', check);
+      exit.then(() => done(parseLoginUrl(out)));
+      check();
+    });
+    if (!url) {
+      this.cancel(target.key);
+      throw new ClaudeLoginError(502, `Claude CLI did not print a login URL: ${tail(out)}`);
+    }
+    return url;
+  }
+
+  /** Feed the pasted code; on success install credentials and return the fresh status. */
+  async submitCode(target: ClaudeTarget, code: string): Promise<ClaudeAccountStatus> {
+    const p = this.pending.get(target.key);
+    if (!p) throw new ClaudeLoginError(404, 'No login in progress (it may have expired) — start again');
+    if (!code?.trim()) throw new ClaudeLoginError(400, 'Code is required');
+    this.pending.delete(target.key);
+    clearTimeout(p.timer);
+    try {
+      p.child.stdin!.end(code.trim() + '\n');
+      const exitCode = await Promise.race([p.exit, new Promise<'timeout'>(r => setTimeout(() => r('timeout'), this.options.codeTimeoutMs))]);
+      if (exitCode !== 0) {
+        p.child.kill('SIGKILL');
+        throw new ClaudeLoginError(400, `Login failed${exitCode === 'timeout' ? ' (timed out)' : ''}: ${tail(p.output())}`);
+      }
+      if (this.options.swap) await installLogin(p.loginDir, target);
+    } finally {
+      if (this.options.swap) await rm(p.loginDir, { recursive: true, force: true });
+    }
+    if (target.name === 'global') this.options.onGlobalChange();
+    return this.status(target);
+  }
+
+  /** `me`: logout + remove the dir → runs fall back to the shared subscription. `global`: logout. */
+  async disconnect(target: ClaudeTarget): Promise<void> {
+    this.cancel(target.key);
+    if (target.name === 'me' && !(await exists(target.dir))) return;
+    try { await this.run(['auth', 'logout'], target.explicitDir ? target.dir : null); }
+    catch (err) { console.warn(`${TAG} logout failed for ${target.key}:`, (err as Error).message); }
+    if (target.name === 'me') await rm(target.dir, { recursive: true, force: true });
+    else this.options.onGlobalChange();
+  }
+
+  cancel(key: string): void {
+    const p = this.pending.get(key);
+    if (!p) return;
+    this.pending.delete(key);
+    clearTimeout(p.timer);
+    p.child.kill('SIGKILL');
+    if (this.options.swap) rm(p.loginDir, { recursive: true, force: true }).catch((err: Error) => console.warn(`${TAG} temp cleanup failed:`, err.message));
+  }
+
+  private env(dir: string | null, login = false): Record<string, string> {
+    const env: Record<string, string> = {};
+    for (const [k, v] of Object.entries(process.env)) if (v !== undefined) env[k] = v;
+    if (dir) applyClaudeAccount(env, dir);
+    else { applyClaudeAccount(env, ''); delete env.CLAUDE_CONFIG_DIR; }
+    if (login) env.BROWSER = 'true'; // never try to open a browser on the server
+    return env;
+  }
+
+  private run(args: string[], dir: string | null): Promise<string> {
+    return new Promise((resolve, reject) => {
+      execFile(this.options.cliPath, args, { env: this.env(dir), timeout: 20_000 }, (err, stdout) => {
+        // `auth status` exits 1 when logged out but still prints valid JSON.
+        if (err && !stdout.trim()) reject(err); else resolve(stdout);
+      });
+    });
+  }
+}
+
+/** The authorize URL from the CLI's "visit: <url>" line. */
+export function parseLoginUrl(output: string): string | null {
+  return output.match(/https:\/\/[^\s<>"']*oauth\/authorize[^\s<>"']*/)?.[0] ?? null;
+}
+
+/** Copy credential files + identity from a successful temp login into the target (atomic per file). */
+export async function installLogin(loginDir: string, target: ClaudeTarget): Promise<void> {
+  const creds = (await readdir(loginDir)).filter(n => /^\.credentials.*\.json$/.test(n));
+  if (!creds.length) throw new ClaudeLoginError(500, 'Login succeeded but the CLI wrote no credentials file');
+  await mkdir(target.dir, { recursive: true, mode: 0o700 });
+  for (const name of creds) {
+    const dest = path.join(target.dir, name);
+    await copyFile(path.join(loginDir, name), dest + '.tmp');
+    await rename(dest + '.tmp', dest);
+  }
+  const fresh = await readJson(path.join(loginDir, '.claude.json'));
+  if (fresh.oauthAccount) {
+    const current = await readJson(target.accountFile);
+    await writeFile(target.accountFile + '.tmp', JSON.stringify({ ...current, oauthAccount: fresh.oauthAccount }, null, 2), { mode: 0o600 });
+    await rename(target.accountFile + '.tmp', target.accountFile);
+  }
+}
+
+/** The platform binary the Agent SDK itself spawns (same package lookup, musl first on musl Linux). */
+export function resolveClaudeCli(): string {
+  const require = createRequire(import.meta.url);
+  const ext = process.platform === 'win32' ? '.exe' : '';
+  const base = `@anthropic-ai/claude-agent-sdk-${process.platform}-${process.arch}`;
+  for (const pkg of process.platform === 'linux' ? [base, `${base}-musl`] : [base]) {
+    try { return require.resolve(`${pkg}/claude${ext}`); } catch { /* next */ }
+  }
+  return 'claude';
+}
+
+async function readJson(file: string): Promise<Record<string, unknown>> {
+  try { return JSON.parse(await readFile(file, 'utf8')); } catch { return {}; }
+}
+async function exists(p: string): Promise<boolean> {
+  try { await readdir(p); return true; } catch { return false; }
+}
+function tail(s: string): string {
+  return s.trim().split('\n').slice(-3).join(' ').slice(0, 300) || '(no output)';
+}

package/src/server/claude-usage.ts

@@ -2,7 +2,7 @@
 // the Claude Code CLI maintains on this box. Fails CLOSED: every error path returns null, and the
 // caller renders nothing — a broken or zeroed gauge is worse than no gauge.
 import { execFile } from 'node:child_process';
-import { readdir, readFile, writeFile } from 'node:fs/promises';
+import { readdir, readFile, rm, writeFile } from 'node:fs/promises';
 import { homedir } from 'node:os';
 import path from 'node:path';
 import { createRequire } from 'node:module';
@@ -218,6 +218,16 @@ export class ClaudeUsageReader {
     return { ...usage, limits };
   }
 
+  /** The login changed (connect/replace/disconnect): every cached or persisted reading describes the
+   *  OLD account, so drop them all and let the next poll read the new one. */
+  invalidate(): void {
+    this.cache = null;
+    this.lastGood = null;
+    this.cooldownUntil = 0;
+    this.restored = Promise.resolve();
+    rm(this.options.cachePath, { force: true }).catch((err: Error) => console.warn(`${TAG} could not drop cached reading:`, err.message));
+  }
+
   private async read(): Promise<ClaudeUsage | null> {
     await (this.restored ??= this.restore());
     const now = Date.now();

package/src/server/data-sync.ts

@@ -764,6 +764,7 @@ export class DataSync {
     'uploads/', 'repos/', '.tmp/', 'schedules.json.bak', 'git-log.json',
     '.internal-token', 'comms-log.jsonl', 'sessions/', 'unread/', '.DS_Store',
     'scheduler/', '.mcp-catalog.json',
+    'workspace/users/*/.claude/', // per-user Claude logins (claude-account.ts) — credentials, never commit
   ];
 
   /** Write or refresh .gitignore, appending any canonical entries it's missing (idempotent). */