dondo-donuts 0.1.0

package/src/ui/client.tsx

@@ -0,0 +1,392 @@
+import { render } from 'preact';
+import { useEffect, useState } from 'preact/hooks';
+import packageJson from '../../package.json';
+import type { LimitResult, ModelLimit } from '../types.ts';
+
+type AccountEntry = {
+    active: boolean;
+    key: string;
+    updatedAt: string;
+    limitUpdatedAt: string;
+    quota: LimitResult | null;
+};
+
+type AntigravityState = {
+    account: string;
+    entries: AccountEntry[];
+    service: string;
+    vaultPath: string;
+};
+
+type CodexState = {
+    authPath: string;
+    entries: AccountEntry[];
+    vaultPath: string;
+};
+
+type Tab = 'antigravity' | 'codex';
+
+const api = async <T,>(path: string, body?: unknown): Promise<T> => {
+    const response = await fetch(path, {
+        body: body ? JSON.stringify(body) : undefined,
+        headers: { 'Content-Type': 'application/json' },
+        method: body ? 'POST' : 'GET',
+    });
+    const contentType = response.headers.get('content-type') ?? '';
+    const json = contentType.includes('application/json') ? await response.json() : { error: await response.text() };
+    if (!response.ok) {
+        throw new Error(json.error ?? response.statusText);
+    }
+    return json as T;
+};
+
+const formatDate = (value: string) => (value ? new Date(value).toLocaleString() : '');
+
+const ModelCard = ({ model }: { model: [string, ModelLimit] }) => {
+    const [name, data] = model;
+    const width = Math.max(0, Math.min(100, data.percentage));
+
+    return (
+        <div class="model">
+            <div>
+                <b>{data.displayName || name}</b>
+            </div>
+            <div class="muted small">{name}</div>
+            <div class="bar">
+                <div class="fill" style={{ width: `${width}%` }} />
+            </div>
+            <div class="small">
+                {data.percentage}% left{data.resetTime ? ` · resets ${formatDate(data.resetTime)}` : ''}
+            </div>
+        </div>
+    );
+};
+
+const AccountRow = ({
+    entry,
+    pending,
+    onLoad,
+    onRefresh,
+}: {
+    entry: AccountEntry;
+    pending: boolean;
+    onLoad: (key: string) => void;
+    onRefresh: (key: string) => void;
+}) => (
+    <article class="row">
+        <div class="row-head">
+            <div>
+                <div class="keyline">
+                    <div class="key">{entry.key}</div>
+                    {entry.active ? <span class="badge">Active</span> : null}
+                </div>
+                <div class="muted small">
+                    Updated {formatDate(entry.updatedAt)}
+                    {entry.limitUpdatedAt ? ` · limits ${formatDate(entry.limitUpdatedAt)}` : ''}
+                    {entry.quota?.ok ? ` · ${entry.quota.tier}` : ''}
+                </div>
+            </div>
+            <div class="actions">
+                <button type="button" disabled={pending} onClick={() => onRefresh(entry.key)}>
+                    Refresh
+                </button>
+                <button type="button" disabled={pending} onClick={() => onLoad(entry.key)}>
+                    Load
+                </button>
+            </div>
+        </div>
+        {entry.quota?.ok ? (
+            <div class="quota">
+                {Object.entries(entry.quota.models).map((model) => (
+                    <ModelCard key={model[0]} model={model} />
+                ))}
+            </div>
+        ) : (
+            <div class="err small">{entry.quota?.error ?? 'No cached limit data'}</div>
+        )}
+    </article>
+);
+
+const AntigravityPanel = ({ active }: { active: boolean }) => {
+    const [state, setState] = useState<AntigravityState | null>(null);
+    const [status, setStatus] = useState('');
+    const [key, setKey] = useState('');
+    const [loaded, setLoaded] = useState(false);
+    const [pendingKey, setPendingKey] = useState('');
+
+    const refresh = async (forceLimits = false) => {
+        setStatus(forceLimits ? 'Refreshing limits...' : 'Loading accounts...');
+        setState(
+            await api<AntigravityState>(
+                forceLimits ? '/api/antigravity/limits/refresh' : '/api/antigravity/state',
+                forceLimits ? {} : undefined,
+            ),
+        );
+        setLoaded(true);
+        setStatus('');
+    };
+
+    const save = async (event: Event) => {
+        event.preventDefault();
+        const trimmed = key.trim();
+        if (!trimmed) {
+            return;
+        }
+        setStatus('Saving...');
+        try {
+            await api('/api/antigravity/save', { key: trimmed });
+            setKey('');
+            await refresh(false);
+            setStatus(`Saved ${trimmed}`);
+        } catch (error) {
+            setStatus(error instanceof Error ? error.message : String(error));
+        }
+    };
+
+    const load = async (entryKey: string) => {
+        setStatus(`Loading ${entryKey}...`);
+        setPendingKey(entryKey);
+        try {
+            await api('/api/antigravity/load', { key: entryKey });
+            await refresh(false);
+            setStatus(`Loaded ${entryKey}`);
+        } catch (error) {
+            setStatus(error instanceof Error ? error.message : String(error));
+        } finally {
+            setPendingKey('');
+        }
+    };
+
+    const refreshOne = async (entryKey: string) => {
+        setStatus(`Refreshing ${entryKey}...`);
+        setPendingKey(entryKey);
+        try {
+            setState(await api<AntigravityState>('/api/antigravity/limits/refresh', { key: entryKey }));
+            setStatus(`Refreshed ${entryKey}`);
+        } catch (error) {
+            setStatus(error instanceof Error ? error.message : String(error));
+        } finally {
+            setPendingKey('');
+        }
+    };
+
+    const clear = async () => {
+        if (!confirm('Clear the live Antigravity keychain item and local auth state?')) {
+            return;
+        }
+        setStatus('Clearing...');
+        try {
+            await api('/api/antigravity/clear', {});
+            await refresh(false);
+            setStatus('Cleared live Antigravity auth state');
+        } catch (error) {
+            setStatus(error instanceof Error ? error.message : String(error));
+        }
+    };
+
+    useEffect(() => {
+        if (!active || loaded) {
+            return;
+        }
+        refresh(false).catch((error) => {
+            setStatus(error.message);
+        });
+    }, [active, loaded]);
+
+    return (
+        <div hidden={!active}>
+            <div class="toolbar">
+                <div class="muted small">{state ? `${state.service}/${state.account} · ${state.vaultPath}` : ''}</div>
+                <button type="button" onClick={() => refresh(true).catch((error) => setStatus(error.message))}>
+                    Refresh limits
+                </button>
+            </div>
+            <section class="panel">
+                <form onSubmit={save}>
+                    <input
+                        value={key}
+                        placeholder="Account label"
+                        autocomplete="off"
+                        onInput={(event) => setKey(event.currentTarget.value)}
+                    />
+                    <button class="primary" type="submit">
+                        Save current
+                    </button>
+                    <button type="button" onClick={() => clear().catch((error) => setStatus(error.message))}>
+                        Clear live
+                    </button>
+                </form>
+                <div id="status" class="status muted">
+                    {status}
+                </div>
+            </section>
+            <section class="list">
+                {state?.entries.length ? (
+                    state.entries.map((entry) => (
+                        <AccountRow
+                            key={entry.key}
+                            entry={entry}
+                            pending={pendingKey === entry.key}
+                            onLoad={load}
+                            onRefresh={refreshOne}
+                        />
+                    ))
+                ) : (
+                    <div class="muted">No saved accounts yet.</div>
+                )}
+            </section>
+        </div>
+    );
+};
+
+const CodexPanel = ({ active }: { active: boolean }) => {
+    const [state, setState] = useState<CodexState | null>(null);
+    const [status, setStatus] = useState('');
+    const [key, setKey] = useState('');
+    const [loaded, setLoaded] = useState(false);
+    const [pendingKey, setPendingKey] = useState('');
+
+    const refresh = async (forceLimits = false) => {
+        setStatus(forceLimits ? 'Refreshing limits...' : 'Loading accounts...');
+        setState(
+            await api<CodexState>(
+                forceLimits ? '/api/codex/limits/refresh' : '/api/codex/state',
+                forceLimits ? {} : undefined,
+            ),
+        );
+        setLoaded(true);
+        setStatus('');
+    };
+
+    const save = async (event: Event) => {
+        event.preventDefault();
+        const trimmed = key.trim();
+        if (!trimmed) {
+            return;
+        }
+        setStatus('Saving...');
+        try {
+            await api('/api/codex/save', { key: trimmed });
+            setKey('');
+            await refresh(false);
+            setStatus(`Saved ${trimmed}`);
+        } catch (error) {
+            setStatus(error instanceof Error ? error.message : String(error));
+        }
+    };
+
+    const load = async (entryKey: string) => {
+        setStatus(`Loading ${entryKey}...`);
+        setPendingKey(entryKey);
+        try {
+            await api('/api/codex/load', { key: entryKey });
+            await refresh(false);
+            setStatus(`Loaded ${entryKey}`);
+        } catch (error) {
+            setStatus(error instanceof Error ? error.message : String(error));
+        } finally {
+            setPendingKey('');
+        }
+    };
+
+    const refreshOne = async (entryKey: string) => {
+        setStatus(`Refreshing ${entryKey}...`);
+        setPendingKey(entryKey);
+        try {
+            setState(await api<CodexState>('/api/codex/limits/refresh', { key: entryKey }));
+            setStatus(`Refreshed ${entryKey}`);
+        } catch (error) {
+            setStatus(error instanceof Error ? error.message : String(error));
+        } finally {
+            setPendingKey('');
+        }
+    };
+
+    useEffect(() => {
+        if (!active || loaded) {
+            return;
+        }
+        refresh(false).catch((error) => {
+            setStatus(error.message);
+        });
+    }, [active, loaded]);
+
+    return (
+        <div hidden={!active}>
+            <div class="toolbar">
+                <div class="muted small">{state ? `${state.authPath} · ${state.vaultPath}` : ''}</div>
+                <button type="button" onClick={() => refresh(true).catch((error) => setStatus(error.message))}>
+                    Refresh limits
+                </button>
+            </div>
+            <section class="panel">
+                <form onSubmit={save}>
+                    <input
+                        value={key}
+                        placeholder="Account label"
+                        autocomplete="off"
+                        onInput={(event) => setKey(event.currentTarget.value)}
+                    />
+                    <button class="primary" type="submit">
+                        Save current
+                    </button>
+                </form>
+                <div class="status muted">{status}</div>
+            </section>
+            <section class="list">
+                {state?.entries.length ? (
+                    state.entries.map((entry) => (
+                        <AccountRow
+                            key={entry.key}
+                            entry={entry}
+                            pending={pendingKey === entry.key}
+                            onLoad={load}
+                            onRefresh={refreshOne}
+                        />
+                    ))
+                ) : (
+                    <div class="muted">No saved accounts yet.</div>
+                )}
+            </section>
+        </div>
+    );
+};
+
+const App = () => {
+    const [tab, setTab] = useState<Tab>('antigravity');
+
+    return (
+        <main>
+            <div class="top">
+                <div class="brand">
+                    <img src="/icon.svg" alt="" />
+                    <h1>Dondo</h1>
+                </div>
+            </div>
+            <nav class="tabs" aria-label="Platforms">
+                <button
+                    type="button"
+                    class={tab === 'antigravity' ? 'tab active' : 'tab'}
+                    onClick={() => setTab('antigravity')}
+                >
+                    Antigravity
+                </button>
+                <button type="button" class={tab === 'codex' ? 'tab active' : 'tab'} onClick={() => setTab('codex')}>
+                    Codex
+                </button>
+            </nav>
+            <AntigravityPanel active={tab === 'antigravity'} />
+            <CodexPanel active={tab === 'codex'} />
+            <footer class="footer">
+                <a href={packageJson.homepage} target="_blank" rel="noreferrer">
+                    GitHub
+                </a>
+            </footer>
+        </main>
+    );
+};
+
+const root = document.getElementById('app');
+if (root) {
+    render(<App />, root);
+}

package/src/ui/html.ts

@@ -0,0 +1,15 @@
+export const renderHtml = () => `<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Dondo</title>
+  <link rel="icon" href="/icon.svg" type="image/svg+xml" />
+  <link rel="apple-touch-icon" href="/icon.png" />
+  <link rel="stylesheet" href="/assets/styles.css" />
+</head>
+<body>
+  <div id="app"></div>
+  <script type="module" src="/assets/app.js"></script>
+</body>
+</html>`;

package/src/ui/styles.css

@@ -0,0 +1,213 @@
+* {
+    box-sizing: border-box;
+}
+
+body {
+    margin: 0;
+    background: #f7f8fa;
+    color: #1f2937;
+    font:
+        14px / 1.45 ui-sans-serif,
+        system-ui,
+        -apple-system,
+        BlinkMacSystemFont,
+        "Segoe UI",
+        sans-serif;
+}
+
+main {
+    max-width: 960px;
+    margin: 38px auto;
+    padding: 0 20px;
+}
+
+h1 {
+    margin: 0;
+    font-size: 24px;
+}
+
+button,
+input {
+    font: inherit;
+}
+
+button {
+    cursor: pointer;
+    border: 1px solid #d1d5db;
+    border-radius: 6px;
+    background: #fff;
+    padding: 9px 12px;
+}
+
+button:hover {
+    filter: brightness(0.98);
+}
+
+button:disabled {
+    cursor: default;
+    opacity: 0.55;
+}
+
+input {
+    flex: 1;
+    border: 1px solid #d1d5db;
+    border-radius: 6px;
+    padding: 10px 12px;
+}
+
+form,
+.actions,
+.tabs {
+    display: flex;
+    gap: 10px;
+}
+
+.top {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 16px;
+    margin-bottom: 18px;
+}
+
+.brand {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.brand img {
+    width: 32px;
+    height: 32px;
+}
+
+.tabs {
+    margin-bottom: 16px;
+}
+
+.tab {
+    color: #374151;
+}
+
+.tab.active,
+button.primary {
+    border-color: #111827;
+    background: #111827;
+    color: #fff;
+}
+
+.toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    margin-bottom: 12px;
+}
+
+.muted {
+    color: #6b7280;
+}
+
+.panel,
+.row {
+    border: 1px solid #e5e7eb;
+    border-radius: 8px;
+    background: #fff;
+    box-shadow: 0 1px 2px #00000008;
+}
+
+.panel {
+    margin-bottom: 16px;
+    padding: 16px;
+}
+
+.list {
+    display: grid;
+    gap: 10px;
+}
+
+.row {
+    padding: 14px;
+}
+
+.row-head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+}
+
+.key {
+    font-weight: 650;
+    font-size: 16px;
+}
+
+.keyline {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.badge {
+    border-radius: 999px;
+    background: #e8f5ee;
+    color: #166534;
+    padding: 2px 7px;
+    font-size: 11px;
+    font-weight: 650;
+}
+
+.quota {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+    gap: 8px;
+    margin-top: 12px;
+}
+
+.model {
+    border: 1px solid #eef0f3;
+    border-radius: 6px;
+    padding: 9px;
+}
+
+.bar {
+    overflow: hidden;
+    height: 6px;
+    margin-top: 7px;
+    border-radius: 999px;
+    background: #eef0f3;
+}
+
+.fill {
+    height: 100%;
+    background: #2563eb;
+}
+
+.err {
+    color: #b91c1c;
+}
+
+.status {
+    min-height: 20px;
+    margin-top: 10px;
+}
+
+.footer {
+    margin-top: 22px;
+    padding-top: 16px;
+    border-top: 1px solid #e5e7eb;
+    text-align: right;
+}
+
+.footer a {
+    color: #374151;
+    text-decoration: none;
+}
+
+.footer a:hover {
+    text-decoration: underline;
+}
+
+.small {
+    font-size: 12px;
+}