@agimon-ai/doompi-web 0.0.1-alpha.0

package/src/web/features/settings/LoginFlowDialog.tsx

@@ -0,0 +1,221 @@
+import {
+  Button,
+  Dialog,
+  DialogBody,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  Input,
+  Spinner,
+} from '@agimon-ai/doompi-web-components';
+import { useEffect, useState } from 'react';
+import type { AuthMethodType, LoginEvent, LoginFlowSnapshot, LoginPromptView } from '../../../types/auth.ts';
+
+export const METHOD_LABEL: Readonly<Record<AuthMethodType, string>> = { api_key: 'api key', oauth: 'oauth' };
+
+/** Button's link variant plus the wrapping a full auth URL needs. */
+const linkClass = 'inline break-all decoration-doom-blue/40 hover:decoration-doom-blue';
+
+function FlowEvent({ event }: { event: LoginEvent }) {
+  if (event.type === 'auth_url') {
+    return (
+      <div className="flex flex-col gap-1 text-[11px] text-doom-text">
+        <span>open this link to authorize:</span>
+        <Button asChild variant="link" size="xs" className={linkClass}>
+          <a data-testid="login-flow-auth-url" href={event.url} target="_blank" rel="noreferrer">
+            {event.url}
+          </a>
+        </Button>
+        {event.instructions ? <span className="text-doom-dim">{event.instructions}</span> : null}
+      </div>
+    );
+  }
+  if (event.type === 'device_code') {
+    return (
+      <div className="flex flex-col gap-1 text-[11px] text-doom-text">
+        <span>
+          enter code{' '}
+          <span data-testid="login-flow-device-code" className="font-bold text-doom-hi">
+            {event.userCode}
+          </span>{' '}
+          at{' '}
+          <a href={event.verificationUri} target="_blank" rel="noreferrer" className={linkClass}>
+            {event.verificationUri}
+          </a>
+        </span>
+      </div>
+    );
+  }
+  if (event.type === 'info') {
+    return (
+      <div className="flex flex-col gap-1 text-[11px] text-doom-text">
+        <span>{event.message}</span>
+        {event.links?.map((link) => (
+          <a key={link.url} href={link.url} target="_blank" rel="noreferrer" className={linkClass}>
+            {link.label ?? link.url}
+          </a>
+        ))}
+      </div>
+    );
+  }
+  return <span className="text-[11px] text-doom-dim">{event.message}</span>;
+}
+
+function PromptField({
+  prompt,
+  value,
+  onChange,
+  onSubmit,
+  onSelect,
+}: {
+  prompt: LoginPromptView;
+  value: string;
+  onChange: (value: string) => void;
+  onSubmit: () => void;
+  onSelect: (optionId: string) => void;
+}) {
+  if (prompt.type === 'select') {
+    return (
+      <div data-testid="login-prompt" data-prompt-type={prompt.type} className="flex flex-col gap-2">
+        <span className="text-[11px] text-doom-text">{prompt.message}</span>
+        <div className="flex flex-col gap-1">
+          {(prompt.options ?? []).map((option) => (
+            <Button
+              key={option.id}
+              variant="outline"
+              data-testid={`login-prompt-option-${option.id}`}
+              onClick={() => onSelect(option.id)}
+              className="h-auto flex-col items-start gap-0.5 px-2.5 py-1.5 text-left whitespace-normal focus-visible:border-doom-blue/50 focus-visible:ring-0"
+            >
+              <span className="text-[11px] text-doom-hi">{option.label}</span>
+              {option.description ? <span className="text-[10px] text-doom-faint">{option.description}</span> : null}
+            </Button>
+          ))}
+        </div>
+      </div>
+    );
+  }
+  return (
+    <label data-testid="login-prompt" data-prompt-type={prompt.type} className="flex flex-col gap-1">
+      <span className="text-[11px] text-doom-text">{prompt.message}</span>
+      <div className="flex items-center gap-2">
+        <Input
+          data-testid="login-prompt-input"
+          type={prompt.type === 'secret' ? 'password' : 'text'}
+          value={value}
+          autoFocus
+          autoComplete="off"
+          placeholder={prompt.placeholder}
+          onChange={(event) => onChange(event.target.value)}
+          onKeyDown={(event) => {
+            if (event.key === 'Enter') onSubmit();
+          }}
+          className="flex-1"
+        />
+        <Button variant="primary" data-testid="login-prompt-submit" disabled={value.trim() === ''} onClick={onSubmit}>
+          continue
+        </Button>
+      </div>
+    </label>
+  );
+}
+
+/**
+ * A provider's login, rendered from the hub's snapshots: the links and codes
+ * it announced, the one question it is waiting on, and how it ended.
+ */
+export function LoginFlowDialog({
+  flow,
+  onAnswer,
+  onCancel,
+  onClose,
+}: {
+  flow: LoginFlowSnapshot;
+  onAnswer: (promptId: string, value: string) => void;
+  onCancel: () => void;
+  onClose: () => void;
+}) {
+  const [value, setValue] = useState('');
+  const prompt = flow.prompt;
+  const promptId = prompt?.id;
+  const running = flow.status === 'running';
+
+  // A new question starts from an empty field.
+  useEffect(() => {
+    setValue('');
+  }, [promptId]);
+
+  const submit = (): void => {
+    if (!prompt || value.trim() === '') return;
+    onAnswer(prompt.id, value);
+  };
+
+  let outcome: { text: string; className: string } | undefined;
+  if (flow.status === 'succeeded')
+    outcome = { text: `authenticated with ${flow.providerName}.`, className: 'text-doom-green' };
+  else if (flow.status === 'failed') outcome = { text: flow.error ?? 'sign-in failed.', className: 'text-doom-red' };
+  else if (flow.status === 'cancelled') outcome = { text: 'sign-in cancelled.', className: 'text-doom-dim' };
+
+  return (
+    <Dialog
+      open
+      onOpenChange={(next) => {
+        if (next) return;
+        // Escape or an outside click abandons a live sign-in, and simply
+        // dismisses a finished one.
+        if (running) onCancel();
+        else onClose();
+      }}
+    >
+      <DialogContent width="md" data-testid="login-flow" data-status={flow.status} aria-describedby={undefined}>
+        <DialogHeader>
+          <DialogTitle>sign in to {flow.providerName}</DialogTitle>
+          <span className="text-[10px] text-doom-faint">{METHOD_LABEL[flow.type]}</span>
+        </DialogHeader>
+        <DialogBody>
+          {flow.events.length > 0 ? (
+            <ol data-testid="login-flow-events" className="flex flex-col gap-2">
+              {flow.events.map((event, index) => (
+                <li key={index}>
+                  <FlowEvent event={event} />
+                </li>
+              ))}
+            </ol>
+          ) : null}
+          {running && prompt ? (
+            <PromptField
+              prompt={prompt}
+              value={value}
+              onChange={setValue}
+              onSubmit={submit}
+              onSelect={(optionId) => onAnswer(prompt.id, optionId)}
+            />
+          ) : null}
+          {running && !prompt ? (
+            <p data-testid="login-flow-waiting" className="flex items-center gap-2 text-[11px] text-doom-dim">
+              <Spinner />
+              {flow.events.length === 0 ? 'starting…' : `waiting for ${flow.providerName}…`}
+            </p>
+          ) : null}
+          {outcome ? (
+            <p data-testid="login-flow-result" className={`text-[11px] ${outcome.className}`}>
+              {outcome.text}
+            </p>
+          ) : null}
+          <DialogFooter>
+            {running ? (
+              <Button variant="outline" data-testid="login-flow-cancel" onClick={onCancel}>
+                cancel
+              </Button>
+            ) : (
+              <Button variant="outline" data-testid="login-flow-close" autoFocus onClick={onClose}>
+                close
+              </Button>
+            )}
+          </DialogFooter>
+        </DialogBody>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/web/features/settings/PluginSettings.tsx

@@ -0,0 +1,92 @@
+import { Panel, SectionLabel } from '@agimon-ai/doompi-web-components';
+import type { WebPluginDefinition } from '@agimon-ai/doompi-web-contracts';
+import { installedWebPlugins, webPluginDiagnostics } from '../../lib/pluginRegistry.ts';
+
+/** What one plugin contributes, as counts: enough to see it landed without opening its code. */
+function contributions(plugin: WebPluginDefinition): string[] {
+  const parts: string[] = [];
+  const count = (label: string, list: readonly unknown[] | undefined): void => {
+    if (list !== undefined && list.length > 0) parts.push(`${String(list.length)} ${label}`);
+  };
+  count('tabs', plugin.tabs);
+  count('channels', plugin.channels);
+  count('tool renderers', plugin.toolRenderers);
+  count('activity groups', plugin.activityGroups);
+  count('activity sections', plugin.activitySections);
+  count('minor modes', plugin.minorModes);
+  count('selection axes', plugin.selectionAxes);
+  count('leader bindings', plugin.leaderBindings);
+  count('slots', plugin.slots);
+  count('fills', plugin.fills);
+  return parts;
+}
+
+/**
+ * The plugins page: the web plugins this bundle carries and what the install
+ * had to resolve between them. Both are read once from the registry, which
+ * is complete before the first render; a plugin comes or goes with the next
+ * doompi sync, never at runtime.
+ */
+export function PluginSettings() {
+  const plugins = installedWebPlugins();
+  const diagnostics = webPluginDiagnostics();
+  return (
+    <div data-testid="settings-plugins" className="flex max-w-[640px] flex-col gap-5">
+      <div className="flex flex-col gap-2">
+        <SectionLabel>installed</SectionLabel>
+        <p className="text-[11px] leading-relaxed text-doom-faint">
+          the web plugins compiled into this bundle; doompi sync rebuilds it from the packages installed in the
+          composition.
+        </p>
+        {plugins.length === 0 ? (
+          <p data-testid="settings-plugins-empty" className="text-[11px] text-doom-dim">
+            no web plugins in this bundle. run doompi sync to bundle the installed packages.
+          </p>
+        ) : (
+          <ul className="flex flex-col gap-1">
+            {plugins.map((plugin) => (
+              <Panel asChild key={plugin.id} className="flex items-baseline gap-3 bg-transparent px-3 py-2">
+                <li data-testid={`settings-plugin-${plugin.id}`}>
+                  <span className="text-[12px] font-bold text-doom-hi">{plugin.id}</span>
+                  <span className="min-w-0 flex-1 truncate text-[10px] text-doom-faint">
+                    {contributions(plugin).join(' · ') || 'no contributions'}
+                  </span>
+                </li>
+              </Panel>
+            ))}
+          </ul>
+        )}
+      </div>
+
+      <div className="flex flex-col gap-2">
+        <SectionLabel>install diagnostics</SectionLabel>
+        <p className="text-[11px] leading-relaxed text-doom-faint">
+          plugins are independent, so when two want the same tab, tool, group, or key the install keeps one and records
+          the other here rather than failing the page.
+        </p>
+        {diagnostics.length === 0 ? (
+          <p data-testid="settings-plugin-diagnostics-empty" className="text-[11px] text-doom-dim">
+            nothing to resolve: no two plugins wanted the same name.
+          </p>
+        ) : (
+          <ul className="flex flex-col gap-1">
+            {diagnostics.map((diagnostic, index) => (
+              <Panel
+                asChild
+                key={`${diagnostic.pluginId}:${diagnostic.kind}:${String(index)}`}
+                className="flex flex-col gap-0.5 bg-transparent px-3 py-2"
+              >
+                <li data-testid={`settings-plugin-diagnostic-${diagnostic.pluginId}`} data-kind={diagnostic.kind}>
+                  <span className="text-[10px] font-bold text-doom-yellow">
+                    {diagnostic.pluginId} · {diagnostic.kind}
+                  </span>
+                  <span className="text-[10px] leading-snug text-doom-dim">{diagnostic.message}</span>
+                </li>
+              </Panel>
+            ))}
+          </ul>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/web/features/settings/ProviderSettings.tsx

@@ -0,0 +1,238 @@
+import { Badge, Button, Dot, EmptyState, Input, Panel, Spinner } from '@agimon-ai/doompi-web-components';
+import { useCallback, useEffect, useState } from 'react';
+import type { AuthMethodType, LoginFlowSnapshot, ProviderAuthSummary } from '../../../types/auth.ts';
+import { answerLogin, cancelLogin, listProviders, logoutProvider, readLogin, startLogin } from '../../lib/authApi.ts';
+import { LoginFlowDialog, METHOD_LABEL } from './LoginFlowDialog.tsx';
+
+const FLOW_POLL_MS = 500;
+/** The auth source Pi reports for a credential its own /login stored; the only kind /logout removes. */
+const STORED_SOURCE = 'stored';
+
+function statusText(provider: ProviderAuthSummary): string {
+  if (!provider.authenticated) return 'not authenticated';
+  const { type, source } = provider.authenticated;
+  const via = source === STORED_SOURCE ? 'stored' : source;
+  return `authenticated · ${METHOD_LABEL[type]}${via ? ` · ${via}` : ''}`;
+}
+
+function ProviderRow({
+  provider,
+  busy,
+  onLogin,
+  onLogout,
+}: {
+  provider: ProviderAuthSummary;
+  busy: boolean;
+  onLogin: (type: AuthMethodType) => void;
+  onLogout: () => void;
+}) {
+  const authenticated = provider.authenticated !== undefined;
+  return (
+    <Panel asChild className="flex items-center gap-3 px-3.5 py-2.5 transition-colors hover:border-doom-blue/30">
+      <li data-testid={`provider-${provider.id}`} data-authenticated={authenticated}>
+        <div className="flex min-w-0 flex-1 flex-col gap-0.5">
+          <span className="truncate text-[12px] font-bold text-doom-hi">{provider.name}</span>
+          <span className="truncate text-[10px] text-doom-faint">{provider.id}</span>
+        </div>
+        <Badge tone={authenticated ? 'green' : 'neutral'} data-testid={`provider-status-${provider.id}`}>
+          <Dot tone={authenticated ? 'green' : 'neutral'} />
+          {statusText(provider)}
+        </Badge>
+        {provider.methods.map((method) => (
+          <Button
+            key={method.type}
+            variant="outline"
+            size="sm"
+            data-testid={`provider-login-${method.type}-${provider.id}`}
+            title={method.label}
+            disabled={busy}
+            onClick={() => onLogin(method.type)}
+          >
+            sign in · {METHOD_LABEL[method.type]}
+          </Button>
+        ))}
+        {provider.authenticated?.source === STORED_SOURCE ? (
+          <Button
+            variant="outline"
+            size="sm"
+            data-testid={`provider-logout-${provider.id}`}
+            disabled={busy}
+            onClick={onLogout}
+            className="hover:border-doom-red/50 hover:text-doom-red"
+          >
+            sign out
+          </Button>
+        ) : null}
+        {provider.methods.length === 0 ? (
+          <span className="text-[10px] text-doom-faint">ambient credentials only</span>
+        ) : null}
+      </li>
+    </Panel>
+  );
+}
+
+/**
+ * The providers page: what Pi can sign in to on the hub's machine, and
+ * whether it has. A login runs on the hub; this page polls its flow and
+ * relays the one question it may ask.
+ */
+export function ProviderSettings() {
+  const [providers, setProviders] = useState<ProviderAuthSummary[] | null>(null);
+  const [error, setError] = useState('');
+  const [flow, setFlow] = useState<LoginFlowSnapshot | null>(null);
+  /** The provider with a request in flight, so its buttons cannot double-fire. */
+  const [busyId, setBusyId] = useState<string | null>(null);
+  const [filter, setFilter] = useState('');
+
+  const reload = useCallback(async (): Promise<void> => {
+    const result = await listProviders();
+    if ('providers' in result) {
+      setProviders(result.providers);
+      setError('');
+    } else {
+      setError(result.error);
+    }
+  }, []);
+
+  useEffect(() => {
+    void reload();
+  }, [reload]);
+
+  // Poll the running flow one request at a time; once it settles, the list
+  // is re-read so the provider's chip reflects the outcome.
+  const flowId = flow?.id;
+  const running = flow?.status === 'running';
+  useEffect(() => {
+    if (flowId === undefined || !running) return;
+    let stopped = false;
+    let timer: ReturnType<typeof setTimeout> | undefined;
+    const poll = async (): Promise<void> => {
+      const result = await readLogin(flowId);
+      if (stopped) return;
+      if ('error' in result) {
+        setFlow((current) =>
+          current && current.id === flowId ? { ...current, status: 'failed', error: result.error } : current,
+        );
+        return;
+      }
+      setFlow(result.flow);
+      if (result.flow.status !== 'running') {
+        void reload();
+        return;
+      }
+      timer = setTimeout(() => void poll(), FLOW_POLL_MS);
+    };
+    timer = setTimeout(() => void poll(), FLOW_POLL_MS);
+    return () => {
+      stopped = true;
+      if (timer !== undefined) clearTimeout(timer);
+    };
+  }, [flowId, running, reload]);
+
+  const begin = async (providerId: string, type: AuthMethodType): Promise<void> => {
+    setBusyId(providerId);
+    const result = await startLogin(providerId, type);
+    setBusyId(null);
+    if ('flow' in result) setFlow(result.flow);
+    else setError(result.error);
+  };
+
+  const answer = async (promptId: string, value: string): Promise<void> => {
+    if (!flow) return;
+    const result = await answerLogin(flow.id, promptId, value);
+    if ('flow' in result) setFlow(result.flow);
+    else setError(result.error);
+  };
+
+  const cancel = async (): Promise<void> => {
+    if (!flow) return;
+    const result = await cancelLogin(flow.id);
+    setFlow('flow' in result ? result.flow : null);
+    void reload();
+  };
+
+  const signOut = async (providerId: string): Promise<void> => {
+    setBusyId(providerId);
+    const result = await logoutProvider(providerId);
+    if ('error' in result) setError(result.error);
+    else await reload();
+    setBusyId(null);
+  };
+
+  // The list is long enough that finding a provider by eye is work; signed-in
+  // ones lead because they are the ones a reader came to check.
+  const needle = filter.trim().toLowerCase();
+  const shown = (providers ?? [])
+    .filter((provider) => `${provider.name} ${provider.id}`.toLowerCase().includes(needle))
+    .sort((left, right) => Number(right.authenticated !== undefined) - Number(left.authenticated !== undefined));
+  const authenticatedCount = (providers ?? []).filter((provider) => provider.authenticated !== undefined).length;
+
+  return (
+    <div data-testid="provider-settings" className="flex max-w-[780px] flex-col gap-4">
+      <div className="flex flex-col gap-1">
+        <h2 className="text-[13px] font-bold text-doom-hi">providers</h2>
+        <p className="text-[11px] leading-relaxed text-doom-dim">
+          sign in to the model providers Pi can use. credentials land in Pi&apos;s auth.json on this machine, so every
+          session shares them.
+        </p>
+      </div>
+      {error ? (
+        <p data-testid="provider-settings-error" className="text-[11px] leading-relaxed text-doom-red">
+          {error}
+        </p>
+      ) : null}
+      {providers === null && !error ? (
+        <p className="flex items-center gap-2 text-[11px] text-doom-faint">
+          <Spinner label="reading providers" />
+          reading providers…
+        </p>
+      ) : null}
+      {providers ? (
+        <>
+          <div className="flex items-center gap-3">
+            <Input
+              data-testid="provider-filter"
+              value={filter}
+              placeholder="filter providers…"
+              onChange={(event) => setFilter(event.target.value)}
+              className="flex-1"
+            />
+            <span className="shrink-0 text-[10px] text-doom-faint">
+              {authenticatedCount} of {providers.length} signed in
+            </span>
+          </div>
+          <ul data-testid="provider-list" className="flex flex-col gap-1.5">
+            {shown.map((provider) => (
+              <ProviderRow
+                key={provider.id}
+                provider={provider}
+                busy={busyId === provider.id}
+                onLogin={(type) => void begin(provider.id, type)}
+                onLogout={() => void signOut(provider.id)}
+              />
+            ))}
+            {shown.length === 0 ? (
+              <EmptyState
+                asChild
+                data-testid="provider-no-match"
+                className="py-6"
+                title="no provider matches"
+                description={`nothing here answers to “${filter.trim()}”.`}
+              >
+                <li />
+              </EmptyState>
+            ) : null}
+          </ul>
+        </>
+      ) : null}
+      {flow ? (
+        <LoginFlowDialog
+          flow={flow}
+          onAnswer={(promptId, value) => void answer(promptId, value)}
+          onCancel={() => void cancel()}
+          onClose={() => setFlow(null)}
+        />
+      ) : null}
+    </div>
+  );
+}

package/src/web/features/settings/SettingsMenu.tsx

@@ -0,0 +1,32 @@
+import { Link } from '@tanstack/react-router';
+import { SETTINGS_SECTIONS } from '../../lib/settingsSections.ts';
+
+export function SettingsMenu({ active }: { active: string | undefined }) {
+  return (
+    <nav
+      data-testid="settings-menu"
+      className="flex w-[220px] shrink-0 flex-col gap-0.5 border-r border-doom-border px-2.5 py-3"
+    >
+      {SETTINGS_SECTIONS.map((section) => {
+        const current = section.id === active;
+        return (
+          <Link
+            key={section.id}
+            to="/settings/$section"
+            params={{ section: section.id }}
+            data-testid={`settings-section-${section.id}`}
+            data-active={current}
+            className={`flex flex-col gap-0.5 rounded-md px-[11px] py-2 transition-colors ${
+              current ? 'bg-doom-tint-blue' : 'hover:bg-doom-panel'
+            }`}
+          >
+            <span className={`text-[12px] font-bold ${current ? 'text-doom-blue' : 'text-doom-hi'}`}>
+              {section.label}
+            </span>
+            <span className="text-[10px] leading-snug text-doom-faint">{section.detail}</span>
+          </Link>
+        );
+      })}
+    </nav>
+  );
+}