Skald-Circle/web/components/connector-detail.js

import { html, nothing } from 'lit';
import { LightElement } from '../lib/base.js';
import {
  announceChange, connectorIconUrl, jf, normalizeSchema, parseJson, seedEnv, statusOf,
} from './shared/connector-common.js';

// One connector's own page — `#connector?name=<catalog name>`.
//
// This replaces the activation dialog. A connector declares its own env/secret
// schema, so the form's height is the *connector's* choice, not the UI's: EMAIL asks
// for a dozen fields, and a fixed-size modal simply could not hold them — it grew
// taller than the viewport and the buttons went off-screen. A page scrolls.
//
// It is also the natural home for everything else that is per-connector and was
// scattered before: the Test button, the global enable, and the per-user access
// grants — which used to be a second modal reached from a third place.
//
// Deliberately not a `name` field: the list is one row per connector (§7 template),
// so the runtime name is the catalog name. The backend still defends against
// collisions; the UI just stops offering a way to cause them.

const ADMIN_ID = 'admin';
const PAGE_ID  = 'connector';

function nameFromHash() {
  const m = location.hash.match(/^#connector\?name=(.*)$/);
  if (!m) return null;
  try { return decodeURIComponent(m[1]); } catch { return null; }
}

export class ConnectorDetailPage extends LightElement {

  static get properties() {
    return {
      _open:      { state: true },
      _name:      { state: true },
      _me:        { state: true },
      _entry:     { state: true },   // catalog row (null for a global we cannot read)
      _act:       { state: true },   // my activation row, if any
      _glob:      { state: true },   // the global instance, if any
      _schema:    { state: true },
      _form:      { state: true },   // { api_key, env: {} }
      _test:      { state: true },   // null | 'running' | report
      _busy:      { state: true },
      _error:     { state: true },
      _users:     { state: true },   // admin: for the access panel
      _access:    { state: true },   // admin: Set of granted user ids
      _noIcon:    { state: true },
      _oauth:     { state: true },   // in-flight OAuth login: { state, auth_url, code }
    };
  }

  constructor() {
    super();
    this._open = false;
    this._noIcon = false;
    this._reset();
  }

  _reset() {
    this._name   = null;
    this._me     = null;
    this._entry  = null;
    this._act    = null;
    this._glob   = null;
    this._schema = [];
    this._form   = { api_key: '', env: {} };
    this._test   = null;
    this._busy   = false;
    this._error  = null;
    this._users  = null;
    this._access = null;
    this._oauth  = null;
  }

  connectedCallback() {
    super.connectedCallback();
    window.addEventListener('llm-page-change', (e) => {
      this._open = e.detail.page === PAGE_ID;
      this.style.display = this._open ? 'flex' : 'none';
      if (this._open) this._loadFromHash();
    });
    window.addEventListener('hashchange', () => {
      if (this._open) this._loadFromHash();
    });
  }

  get _isAdmin()  { return this._me?.role_id === ADMIN_ID; }
  get _isGlobal() { return (this._entry?.scope ?? (this._glob ? 'global' : null)) === 'global'; }
  get _status()   { return statusOf({ _act: this._act, _glob: this._glob }); }

  async _loadFromHash() {
    const name = nameFromHash();
    if (!name) return;
    // A different connector must not inherit the previous one's typed secrets.
    if (name !== this._name) this._reset();
    this._name = name;
    await this._load();
  }

  async _load() {
    this._error = null;
    try {
      this._me = await jf('/api/auth/me');
      const [available, activated] = await Promise.all([
        jf('/api/mcp/available'),
        jf('/api/mcp/activated'),
      ]);
      const entry = (available?.catalog ?? []).find(e => e.name === this._name) ?? null;
      const glob  = (available?.globals ?? [])
        .find(g => (g.catalog_name ?? g.name) === this._name) ?? null;
      const act   = (activated ?? []).find(r => r.catalog_name === this._name) ?? null;

      if (!entry && !glob) {
        this._error = `No connector named “${this._name}” is available to you.`;
        return;
      }
      this._entry = entry;
      this._glob  = glob;
      this._act   = act;

      const schema = normalizeSchema(parseJson(entry?.config_schema_json, []));
      this._schema = schema;
      // Keep whatever the user has already typed across a reload triggered by a save.
      this._form = { api_key: this._form.api_key || '', env: { ...seedEnv(schema), ...this._form.env } };

      if (this._isAdmin && this._isGlobal) await this._loadAccess();
    } catch (e) {
      this._error = e.message;
    }
  }

  async _loadAccess() {
    try {
      this._users = await jf('/api/users');
      if (this._glob) {
        const granted = await jf(`/api/mcp/global/${this._glob.id}/access`);
        this._access = new Set(granted || []);
      }
    } catch (e) { this._error = e.message; }
  }

  _back() {
    // Prefer real history so the browser's own Back stays consistent; fall back to
    // the list when this page was opened straight from a pasted URL.
    if (history.length > 1) { history.back(); return; }
    history.pushState({ page: 'connectors' }, '', '#connectors');
    window.dispatchEvent(new CustomEvent('llm-page-change', { detail: { page: 'connectors' } }));
  }

  _patchEnv(key, value) {
    this._form = { ...this._form, env: { ...this._form.env, [key]: value } };
  }

  /// The env map to send: empty fields are dropped so a blank box means "unset"
  /// rather than "set to empty string".
  get _envPayload() {
    const env = {};
    for (const [k, v] of Object.entries(this._form.env || {})) if (v !== '') env[k] = v;
    return Object.keys(env).length ? env : null;
  }

  // ── Actions ────────────────────────────────────────────────────────────────

  async _testCreds() {
    this._test = 'running';
    try {
      this._test = await jf('/api/mcp/test', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          catalog_name: this._name,
          api_key: this._form.api_key || null,
          env: this._envPayload,
        }),
      });
    } catch (e) {
      this._test = { ok: false, message: e.message };
    }
  }

  async _activate() {
    this._busy = true; this._error = null;
    try {
      const res = await jf('/api/mcp/activate', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          catalog_name: this._name,
          api_key: this._form.api_key || null,
          env: this._envPayload,
        }),
      });
      if (res?.auth_state === 'pending') {
        this._test  = res.verify ?? { ok: false, message: 'Verification failed.' };
        this._error = 'Saved, but the credentials did not check out — fix them and test again.';
      } else if (res?.error) {
        this._error = res.error;
      }
      announceChange();
      await this._load();
    } catch (e) { this._error = e.message; }
    finally { this._busy = false; }
  }

  async _deactivate() {
    if (!confirm(`Deactivate “${this._entry?.friendly_name || this._name}”?`)) return;
    this._busy = true;
    try {
      await jf(`/api/mcp/activated/${this._act.id}`, { method: 'DELETE' });
      this._act = null;
      this._test = null;
      announceChange();
      await this._load();
    } catch (e) { this._error = e.message; }
    finally { this._busy = false; }
  }

  // ── OAuth login (§15): activate → consent in a tab → paste code → complete ────

  async _startOauth() {
    this._busy = true; this._error = null;
    try {
      // The activation may not exist yet (first sign-in) — create the pending row,
      // then reuse it. A `pending` row from a previous attempt is signed in again.
      let serverId = this._act?.id;
      if (!serverId) {
        const res = await jf('/api/mcp/activate', {
          method: 'POST', headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ catalog_name: this._name }),
        });
        if (res?.error) { this._error = res.error; return; }
        serverId = res.id;
      }
      const start = await jf('/api/mcp/oauth/start', {
        method: 'POST', headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ server_id: serverId }),
      });
      this._oauth = { state: start.state, auth_url: start.auth_url, code: '' };
      window.open(start.auth_url, '_blank', 'noopener');
      announceChange();
      await this._load();
    } catch (e) { this._error = e.message; }
    finally { this._busy = false; }
  }

  async _completeOauth() {
    this._busy = true; this._error = null;
    try {
      const res = await jf('/api/mcp/oauth/complete', {
        method: 'POST', headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ state: this._oauth.state, code: this._oauth.code.trim() }),
      });
      if (res?.error) { this._error = res.error; }
      else { this._oauth = null; }
      announceChange();
      await this._load();
    } catch (e) { this._error = e.message; }
    finally { this._busy = false; }
  }

  async _enableGlobal() {
    this._busy = true; this._error = null;
    try {
      const res = await jf('/api/mcp/global', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          catalog_name: this._name,
          api_key: this._form.api_key || null,
          env: this._envPayload,
        }),
      });
      if (res?.verify && !res.verify.ok && !res.verify.skipped) {
        this._test  = res.verify;
        this._error = 'Verification failed — the connector stays disabled until the credentials are fixed.';
      } else if (res?.error) {
        this._error = res.error;
      }
      announceChange();
      await this._load();
    } catch (e) { this._error = e.message; }
    finally { this._busy = false; }
  }

  async _disableGlobal() {
    if (!confirm(`Disable “${this._glob.friendly_name || this._name}”?\n\nIt stops for everyone who can use it.`)) return;
    this._busy = true;
    try {
      await jf(`/api/mcp/global/${this._glob.id}`, { method: 'DELETE' });
      this._glob = null;
      announceChange();
      await this._load();
    } catch (e) { this._error = e.message; }
    finally { this._busy = false; }
  }

  _toggleAccess(userId) {
    const next = new Set(this._access);
    next.has(userId) ? next.delete(userId) : next.add(userId);
    this._access = next;
  }

  async _saveAccess() {
    this._busy = true;
    try {
      await jf(`/api/mcp/global/${this._glob.id}/access`, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ user_ids: [...this._access] }),
      });
      announceChange();
      await this._load();
    } catch (e) { this._error = e.message; }
    finally { this._busy = false; }
  }

  // ── Render ─────────────────────────────────────────────────────────────────

  render() {
    if (!this._open) return nothing;
    if (this._error && !this._entry && !this._glob) {
      return html`
        <div class="um-page">
          ${this._renderHeader()}
          <div class="alert alert-danger py-2 mx-4" style="font-size:.85rem">${this._error}</div>
        </div>`;
    }
    if (!this._entry && !this._glob) {
      return html`<div class="um-page">${this._renderHeader()}
        <div class="um-empty"><i class="bi bi-hourglass-split"></i> Loading…</div></div>`;
    }

    return html`
      <div class="um-page">
        ${this._renderHeader()}
        <div style="padding:0 1.25rem 2rem; overflow:auto">
          ${this._error ? html`
            <div class="alert alert-danger py-2 mb-3" style="font-size:.85rem">${this._error}</div>` : nothing}
          ${this._renderSummary()}
          ${this._renderConfig()}
          ${this._renderAccess()}
        </div>
      </div>`;
  }

  _renderHeader() {
    const title = this._entry?.friendly_name || this._glob?.friendly_name || this._name || 'Connector';
    return html`
      <div class="um-header">
        <div class="d-flex align-items-center gap-2" style="min-width:0">
          <button class="btn btn-sm btn-outline-secondary" title="Back" @click=${() => this._back()}>
            <i class="bi bi-arrow-left"></i>
          </button>
          <h2 class="um-title" style="min-width:0;overflow:hidden;text-overflow:ellipsis">${title}</h2>
        </div>
      </div>`;
  }

  _renderSummary() {
    const e        = this._entry;
    const isScript = e?.source === 'local_script';
    const status   = this._status;
    const desc     = e?.description || this._glob?.description;

    return html`
      <div class="connector-card" style="margin-top:1rem">
        <div class="connector-card-head">
          ${!this._noIcon
            ? html`<img class="connector-card-icon" style="width:44px;height:44px"
                     src=${connectorIconUrl(this._name, 'lg')} alt=""
                     @error=${() => { this._noIcon = true; }} />`
            : html`<div class="connector-card-icon connector-card-icon--empty" style="width:44px;height:44px">
                     <i class="bi bi-plug"></i></div>`}
          <div class="connector-card-title">
            <div class="connector-card-name" style="font-size:1rem">
              ${e?.friendly_name || this._glob?.friendly_name || this._name}
            </div>
            <div class="connector-card-sub">${this._name}</div>
          </div>
        </div>
        ${desc ? html`<div class="connector-card-desc" style="-webkit-line-clamp:initial">${desc}</div>` : nothing}
        <div class="connector-chips">
          <span class="connector-chip connector-chip--scope">
            <i class="bi ${this._isGlobal ? 'bi-globe' : 'bi-person'}"></i>${this._isGlobal ? 'global' : 'per-user'}
          </span>
          ${isScript ? html`
            <span class="connector-chip connector-chip--script">
              <i class="bi bi-file-earmark-code"></i>runs code on this box
            </span>` : nothing}
          ${e?.auth_kind && e.auth_kind !== 'none' ? html`
            <span class="connector-chip"><i class="bi bi-key"></i>${e.auth_kind}</span>` : nothing}
          ${status === 'active' ? html`
            <span class="connector-chip connector-chip--ok"><i class="bi bi-check-circle"></i>active</span>` : nothing}
          ${status === 'pending' ? html`
            <span class="connector-chip connector-chip--script"><i class="bi bi-exclamation-triangle"></i>needs fixing</span>` : nothing}
          ${status === 'needs_login' ? html`
            <span class="connector-chip connector-chip--script"><i class="bi bi-box-arrow-in-right"></i>needs sign-in</span>` : nothing}
        </div>
        ${this._isGlobal ? html`
          <div class="connector-card-note">
            <i class="bi bi-info-circle"></i>Runs once for the household, on the host. Nobody reaches it until they are granted access.
          </div>` : nothing}
      </div>`;
  }

  _renderConfig() {
    const e = this._entry;

    // A granted global we have no catalog row for: nothing here is ours to configure.
    if (!e) {
      return html`
        <div style="margin-top:1.5rem">
          <div class="um-empty" style="padding:1rem"><i class="bi bi-check2-circle"></i>
            <p>This connector is managed for you.</p>
            <p style="font-size:.8rem;opacity:.7">It is enabled by an admin and granted to you — there is nothing to configure.</p>
          </div>
        </div>`;
    }

    const active    = this._isGlobal ? !!this._glob : !!this._act;
    const canManage = this._isGlobal ? this._isAdmin : true;
    const hasVerify = !!e.verify_command;
    const oauth     = e.auth_kind === 'oauth';

    if (this._isGlobal && !this._isAdmin) return nothing;

    // OAuth is a per-user, interactive flow — a browser consent, not a form of
    // typed credentials — so it gets its own panel instead of the api_key/env body.
    if (oauth && !this._isGlobal) {
      return html`
        <div style="margin-top:1.5rem">
          <div class="um-header" style="padding:0 0 .5rem">
            <h3 class="um-title" style="font-size:1rem"><i class="bi bi-key me-2"></i>Sign in</h3>
          </div>
          ${this._renderOauth()}
        </div>`;
    }

    return html`
      <div style="margin-top:1.5rem">
        <div class="um-header" style="padding:0 0 .5rem">
          <h3 class="um-title" style="font-size:1rem">
            <i class="bi bi-sliders me-2"></i>${active ? 'Configuration' : 'Set up'}
          </h3>
        </div>

        ${active ? html`
          <div class="text-muted mb-3" style="font-size:.78rem">
            ${this._isGlobal
              ? 'Already enabled. Re-submitting replaces the stored credentials.'
              : 'Already active. Re-submitting replaces the stored credentials.'}
          </div>` : nothing}

        ${e.auth_kind === 'api_key' ? html`
          <div class="mb-3">
            <label class="form-label">API key<span class="text-danger">*</span></label>
            <input class="form-control" type="password" .value=${this._form.api_key}
              @input=${(ev) => { this._form = { ...this._form, api_key: ev.target.value }; }} />
          </div>` : nothing}

        ${this._renderEnvFields()}
        ${this._renderVerifyBox()}

        <div class="d-flex gap-2 flex-wrap" style="margin-top:.5rem">
          ${hasVerify && canManage ? html`
            <button class="btn btn-sm btn-outline-secondary" ?disabled=${this._test === 'running' || this._busy}
              @click=${() => this._testCreds()}>
              <i class="bi bi-${this._test === 'running' ? 'arrow-repeat' : 'check2-gear'} me-1"></i>
              ${this._test === 'running' ? 'Testing…' : 'Test credentials'}
            </button>` : nothing}

          ${this._isGlobal
            ? html`
              <button class="btn btn-sm btn-primary" ?disabled=${this._busy} @click=${() => this._enableGlobal()}>
                <i class="bi bi-globe me-1"></i>${this._glob ? 'Save & restart' : 'Enable globally'}
              </button>
              ${this._glob ? html`
                <button class="btn btn-sm btn-outline-danger" ?disabled=${this._busy} @click=${() => this._disableGlobal()}>
                  <i class="bi bi-trash me-1"></i>Disable
                </button>` : nothing}`
            : html`
              <button class="btn btn-sm btn-primary" ?disabled=${this._busy} @click=${() => this._activate()}>
                <i class="bi bi-plug me-1"></i>${this._act ? 'Save & restart' : 'Activate'}
              </button>
              ${this._act ? html`
                <button class="btn btn-sm btn-outline-danger" ?disabled=${this._busy} @click=${() => this._deactivate()}>
                  <i class="bi bi-trash me-1"></i>Deactivate
                </button>` : nothing}`}
        </div>
      </div>`;
  }

  _renderOauth() {
    const provider = this._entry?.oauth_provider || 'provider';
    const label    = provider.charAt(0).toUpperCase() + provider.slice(1);
    const active   = this._act && this._act.auth_state === 'ready';
    const pending  = this._act && this._act.auth_state === 'pending';
    const scopes   = parseJson(this._entry?.oauth_scopes_json, []);

    return html`
      <div class="text-muted mb-3" style="font-size:.78rem">
        Signs in with ${label}. You approve access in a browser tab, then paste back the
        code the page shows you — nothing is stored on this box until you do.
      </div>

      ${scopes.length ? html`
        <div class="mb-3" style="font-size:.72rem">
          <div class="text-muted mb-1">It will request access to:</div>
          <ul class="mb-0 ps-3">${scopes.map(s => html`<li><code style="font-size:.68rem">${s}</code></li>`)}</ul>
        </div>` : nothing}

      ${active ? html`
        <div class="alert alert-success py-2 mb-3" style="font-size:.82rem">
          <i class="bi bi-check-circle-fill me-1"></i>Signed in and active.
        </div>` : nothing}

      ${!this._oauth ? html`
        <div class="d-flex gap-2 flex-wrap">
          <button class="btn btn-sm btn-primary" ?disabled=${this._busy} @click=${() => this._startOauth()}>
            <i class="bi bi-box-arrow-in-right me-1"></i>${active ? 'Sign in again' : (pending ? 'Finish sign-in' : `Sign in with ${label}`)}
          </button>
          ${this._act ? html`
            <button class="btn btn-sm btn-outline-danger" ?disabled=${this._busy} @click=${() => this._deactivate()}>
              <i class="bi bi-trash me-1"></i>Deactivate
            </button>` : nothing}
        </div>`
      : html`
        <div class="connector-card" style="margin-top:.25rem">
          <div class="mb-2" style="font-size:.8rem">
            <i class="bi bi-1-circle me-1"></i>A tab opened for ${label}. Approve access there.
            <div class="mt-1"><a href=${this._oauth.auth_url} target="_blank" rel="noopener">Re-open the sign-in page</a></div>
          </div>
          <div class="mb-2" style="font-size:.8rem">
            <i class="bi bi-2-circle me-1"></i>Paste the code the page gave you:
          </div>
          <input class="form-control font-monospace mb-2" placeholder="4/0A…"
            .value=${this._oauth.code}
            @input=${(ev) => { this._oauth = { ...this._oauth, code: ev.target.value }; }} />
          <div class="d-flex gap-2">
            <button class="btn btn-sm btn-primary" ?disabled=${this._busy || !this._oauth.code.trim()}
              @click=${() => this._completeOauth()}>
              <i class="bi bi-check-lg me-1"></i>Complete sign-in
            </button>
            <button class="btn btn-sm btn-outline-secondary" ?disabled=${this._busy}
              @click=${() => { this._oauth = null; }}>Cancel</button>
          </div>
        </div>`}
    `;
  }

  _renderEnvFields() {
    if (!this._schema.length) return nothing;
    return this._schema.map(f => html`
      <div class="mb-3">
        <label class="form-label">
          ${f.label || f.name}
          ${f.required ? html`<span class="text-danger">*</span>` : nothing}
          ${f.secret ? html` <span class="badge bg-warning text-dark" style="font-size:.6rem">secret</span>` : nothing}
        </label>
        <input
          class="form-control ${f.secret ? '' : 'font-monospace'}"
          type=${f.secret ? 'password' : 'text'}
          placeholder=${f.example || ''}
          .value=${this._form.env[f.name] ?? ''}
          @input=${(ev) => this._patchEnv(f.name, ev.target.value)} />
        ${f.description ? html`<div class="form-text" style="font-size:.72rem">${f.description}</div>` : nothing}
      </div>`);
  }

  _renderVerifyBox() {
    const t = this._test;
    if (t === null) return nothing;
    if (t === 'running') {
      return html`<div class="alert alert-secondary py-2 mb-3" style="font-size:.82rem">
        <i class="bi bi-arrow-repeat me-1"></i>Testing credentials…</div>`;
    }
    if (t.skipped) {
      return html`<div class="alert alert-secondary py-2 mb-3" style="font-size:.82rem">
        <i class="bi bi-info-circle me-1"></i>${t.message || 'No verification step for this connector.'}</div>`;
    }
    return html`
      <div class="alert alert-${t.ok ? 'success' : 'danger'} py-2 mb-3" style="font-size:.82rem">
        <i class="bi ${t.ok ? 'bi-check-circle-fill' : 'bi-x-circle-fill'} me-1"></i>
        <strong>${t.ok ? 'OK' : 'Failed'}</strong> — ${t.message}
        ${t.details ? html`
          <pre class="mb-0 mt-1 p-2 rounded bg-dark text-light"
            style="font-size:.7rem;white-space:pre-wrap">${JSON.stringify(t.details, null, 2)}</pre>` : nothing}
      </div>`;
  }

  /// Who may use this global connector. Only meaningful once it is enabled — there
  /// is no instance to grant access to before that.
  _renderAccess() {
    if (!this._isGlobal || !this._isAdmin || !this._glob) return nothing;
    const users = this._users ?? [];
    return html`
      <div style="margin-top:1.75rem">
        <div class="um-header" style="padding:0 0 .5rem">
          <h3 class="um-title" style="font-size:1rem"><i class="bi bi-people me-2"></i>Who can use it</h3>
        </div>
        <div class="text-muted mb-2" style="font-size:.78rem">
          Ticking a box grants this connector's tools to that person's agent. Saving replaces the whole list.
        </div>
        ${users.length === 0
          ? html`<div class="um-empty" style="padding:1rem"><i class="bi bi-people"></i><p>No users.</p></div>`
          : html`
            <div class="connector-card">
              ${users.map(u => html`
                <div class="form-check">
                  <input class="form-check-input" type="checkbox" id=${'acc-' + u.id}
                    .checked=${this._access?.has(u.id) ?? false}
                    @change=${() => this._toggleAccess(u.id)} />
                  <label class="form-check-label" for=${'acc-' + u.id}>
                    ${u.display_name || u.username}
                    <code class="text-muted" style="font-size:.7rem">${u.id}</code>
                  </label>
                </div>`)}
            </div>`}
        <button class="btn btn-sm btn-primary mt-2" ?disabled=${this._busy || !this._access}
          @click=${() => this._saveAccess()}>
          <i class="bi bi-check-lg me-1"></i>Save access
        </button>
      </div>`;
  }
}