@startsimpli/integrations 0.1.6 → 0.2.2

package/src/__tests__/corpus-tracker.test.tsx

@@ -0,0 +1,250 @@
+/**
+ * THE TRACKING SURFACE, rendered (bd startsim-768w.38.25).
+ *
+ * The screen makes one claim — "this is what is still owed" — and every case
+ * below is a way that claim could be false on screen while the data underneath
+ * is fine: a closed item shown as outstanding, an item with no owner rendered
+ * as though it had one, a filter that did nothing, a row with no traceable
+ * source, a run that closed something and did not say why.
+ */
+import { render, screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it, vi } from 'vitest';
+
+import { TrackerPage } from '../components/pages/TrackerPage';
+import type {
+  Commitment,
+  CommitmentQuery,
+  CommitmentTrackerApi,
+  CorpusPage,
+} from '../corpus/types';
+
+const NOW = Date.parse('2026-08-10T12:00:00Z');
+const SCOPE = { orgId: 'tandem' };
+
+function commitment(overrides: Partial<Commitment> & { externalId: string; title: string }): Commitment {
+  return {
+    id: overrides.externalId,
+    dedupeKey: overrides.externalId.replace('commit:', ''),
+    subtype: 'action',
+    detail: '',
+    status: 'open',
+    subjectKey: '',
+    actionKey: '',
+    mentions: [
+      {
+        documentId: 'doc_1',
+        originKey: 'rules:x',
+        occurredAt: '2026-08-01T15:00:00Z',
+        quote: 'Status in the system reads "comments received", which is misleading.',
+        extractor: 'rules',
+      },
+    ],
+    firstSeenAt: '2026-08-01T15:00:00Z',
+    lastSeenAt: '2026-08-01T15:00:00Z',
+    extractorVersion: 'rules+model@1',
+    source: 'granola',
+    sourceLabel: 'Granola',
+    scope: SCOPE,
+    ...overrides,
+  };
+}
+
+const ROWS: Commitment[] = [
+  commitment({ externalId: 'commit:open1', title: 'Chase the inventor for comments on 2148', ownerName: 'Rae' }),
+  commitment({
+    externalId: 'commit:overdue1',
+    title: 'Send the equity sheet to Harry Holcomb',
+    dueAt: '2026-08-05T00:00:00Z',
+  }),
+  commitment({
+    externalId: 'commit:done1',
+    title: 'File the PCT for 2205',
+    status: 'done',
+    statusReason: '2205: filed as first PCT on June 25; already complete',
+    resolvedBy: 'doc_9',
+    resolvedAt: '2026-08-08T00:00:00Z',
+    lastSeenAt: '2026-08-08T00:00:00Z',
+  }),
+];
+
+function makeApi(options: {
+  rows?: Commitment[];
+  appliedFilters?: string[];
+  onQuery?: (query: CommitmentQuery) => void;
+  extract?: CommitmentTrackerApi['extract'];
+} = {}): CommitmentTrackerApi {
+  const rows = options.rows ?? ROWS;
+  return {
+    async listCommitments(query: CommitmentQuery = {}): Promise<CorpusPage<Commitment>> {
+      options.onQuery?.(query);
+      // Deliberately returns EVERYTHING, like the tenant API does today: the
+      // screen has to be correct against a server that ignores the filters.
+      return {
+        count: rows.length,
+        next: null,
+        previous: null,
+        results: rows,
+        appliedFilters: options.appliedFilters ?? [],
+      };
+    },
+    ...(options.extract ? { extract: options.extract } : {}),
+  };
+}
+
+describe('TrackerPage — what is outstanding', () => {
+  it('shows open items and hides closed ones', async () => {
+    render(<TrackerPage api={makeApi()} scope={SCOPE} now={NOW} />);
+
+    expect(await screen.findByText('Chase the inventor for comments on 2148')).toBeInTheDocument();
+    expect(screen.getByText('Send the equity sheet to Harry Holcomb')).toBeInTheDocument();
+    // The one thing this screen must never do: present finished work as owed.
+    expect(screen.queryByText('File the PCT for 2205')).not.toBeInTheDocument();
+  });
+
+  it('sends the status and window as SERVER parameters', async () => {
+    const queries: CommitmentQuery[] = [];
+    render(<TrackerPage api={makeApi({ onQuery: (query) => queries.push(query) })} scope={SCOPE} now={NOW} />);
+    await screen.findByText('Chase the inventor for comments on 2148');
+
+    expect(queries[0].status).toEqual(['open', 'blocked']);
+    expect(queries[0].pageSize).toBe(200);
+  });
+
+  it('says so when the data API does not honour the filters', async () => {
+    render(<TrackerPage api={makeApi()} scope={SCOPE} now={NOW} />);
+    // The Library's `appliedFilters` contract, owed here about status — a
+    // status filter that silently does nothing breaks the screen's only claim.
+    expect(
+      await screen.findByText(/does not filter by .*status/i),
+    ).toBeInTheDocument();
+  });
+
+  it('does NOT nag when the API reports it applied them', async () => {
+    render(
+      <TrackerPage
+        api={makeApi({ appliedFilters: ['status', 'owner', 'dueBefore', 'changedAfter'] })}
+        scope={SCOPE}
+        now={NOW}
+      />,
+    );
+    await screen.findByText('Chase the inventor for comments on 2148');
+    expect(screen.queryByText(/does not filter by/i)).not.toBeInTheDocument();
+  });
+
+  it('puts an overdue item above one with no due date', async () => {
+    render(<TrackerPage api={makeApi()} scope={SCOPE} now={NOW} />);
+    await screen.findByText('Chase the inventor for comments on 2148');
+    const titles = screen.getAllByRole('article').map((node) => within(node).getByRole('heading').textContent);
+    expect(titles[0]).toBe('Send the equity sheet to Harry Holcomb');
+  });
+
+  it('says an item is overdue, with the date', async () => {
+    render(<TrackerPage api={makeApi()} scope={SCOPE} now={NOW} />);
+    expect(await screen.findByText(/Overdue/)).toBeInTheDocument();
+  });
+
+  it('says how long something has been open, which is the point of the screen', async () => {
+    render(<TrackerPage api={makeApi()} scope={SCOPE} now={NOW} />);
+    // Raised 2026-08-01, read 2026-08-10 — nine calendar days, eight elapsed.
+    expect(await screen.findAllByText(/open for 8 days/)).not.toHaveLength(0);
+  });
+
+  it('states that nobody was named rather than rendering a blank', async () => {
+    render(<TrackerPage api={makeApi()} scope={SCOPE} now={NOW} />);
+    // "Nobody said who owns this" is a fact about the meeting, and it is the
+    // most actionable thing on the screen. A blank cell hides it.
+    expect(await screen.findByText('No owner named')).toBeInTheDocument();
+    expect(screen.getByText('Rae')).toBeInTheDocument();
+  });
+
+  it('renders every row with the meeting it came from and a verbatim quote', async () => {
+    render(<TrackerPage api={makeApi()} scope={SCOPE} now={NOW} />);
+    await screen.findByText('Chase the inventor for comments on 2148');
+    for (const article of screen.getAllByRole('article')) {
+      expect(within(article).getByText(/From 1 meeting/)).toBeInTheDocument();
+      expect(within(article).getByText(/Status in the system reads/)).toBeInTheDocument();
+    }
+  });
+
+  it('shows the closed tab with the sentence that closed it', async () => {
+    render(<TrackerPage api={makeApi()} scope={SCOPE} now={NOW} />);
+    await screen.findByText('Chase the inventor for comments on 2148');
+    await userEvent.click(screen.getByRole('tab', { name: 'Closed' }));
+
+    expect(await screen.findByText('File the PCT for 2205')).toBeInTheDocument();
+    // "Why does it say this is done" has to be answerable without opening the
+    // meeting, or nobody trusts a single closed row.
+    expect(screen.getByText(/Closed by: .*filed as first PCT/)).toBeInTheDocument();
+  });
+
+  it('filters by owner', async () => {
+    render(<TrackerPage api={makeApi()} scope={SCOPE} now={NOW} />);
+    await screen.findByText('Chase the inventor for comments on 2148');
+    await userEvent.type(screen.getByPlaceholderText('Owner'), 'Rae');
+
+    expect(screen.getByText('Chase the inventor for comments on 2148')).toBeInTheDocument();
+    expect(screen.queryByText('Send the equity sheet to Harry Holcomb')).not.toBeInTheDocument();
+  });
+
+  it('tells a fresh workspace what to do instead of showing an empty page', async () => {
+    render(<TrackerPage api={makeApi({ rows: [] })} scope={SCOPE} now={NOW} />);
+    expect(await screen.findByText(/Nothing has been pulled out of your meetings yet/)).toBeInTheDocument();
+  });
+});
+
+describe('TrackerPage — running the extraction', () => {
+  const RESULT = {
+    documentsProcessed: 16,
+    fromRules: 24,
+    fromModel: 11,
+    created: 30,
+    merged: 5,
+    resolved: 2,
+    needsReview: [{ commitmentId: 'commit:open1', documentId: 'doc_4', quote: '2148 came back from the inventor' }],
+    droppedOutOfScope: 0,
+    provider: { provider: 'anthropic', model: 'claude-sonnet-4-6', live: true },
+  };
+
+  it('reports what the run did, and what the MODEL added over the rules', async () => {
+    const extract = vi.fn(async () => RESULT);
+    render(<TrackerPage api={makeApi({ extract })} scope={SCOPE} now={NOW} />);
+    await screen.findByText('Chase the inventor for comments on 2148');
+    await userEvent.click(screen.getByRole('button', { name: 'Pull from meetings' }));
+
+    expect(extract).toHaveBeenCalledWith({ scope: SCOPE });
+    expect(await screen.findByText(/Read 16 meetings/)).toBeInTheDocument();
+    // The measurement of whether the model call is worth paying for, on screen.
+    expect(screen.getByText(/24 came from the meetings’ own next-step lists, 11 were read/)).toBeInTheDocument();
+    expect(screen.getByText(/anthropic · claude-sonnet-4-6/)).toBeInTheDocument();
+  });
+
+  it('surfaces weak resolution matches instead of quietly closing things', async () => {
+    render(<TrackerPage api={makeApi({ extract: async () => RESULT })} scope={SCOPE} now={NOW} />);
+    await screen.findByText('Chase the inventor for comments on 2148');
+    await userEvent.click(screen.getByRole('button', { name: 'Pull from meetings' }));
+
+    expect(await screen.findByText(/Nothing was closed automatically/)).toBeInTheDocument();
+    expect(screen.getByText(/2148 came back from the inventor/)).toBeInTheDocument();
+  });
+
+  it('reports a leaking data API rather than absorbing it', async () => {
+    render(
+      <TrackerPage
+        api={makeApi({ extract: async () => ({ ...RESULT, droppedOutOfScope: 3 }) })}
+        scope={SCOPE}
+        now={NOW}
+      />,
+    );
+    await screen.findByText('Chase the inventor for comments on 2148');
+    await userEvent.click(screen.getByRole('button', { name: 'Pull from meetings' }));
+
+    expect(await screen.findByText(/3 records from another\s+workspace were returned/)).toBeInTheDocument();
+  });
+
+  it('hides the control entirely on a read-only deployment', async () => {
+    render(<TrackerPage api={makeApi()} scope={SCOPE} now={NOW} />);
+    await screen.findByText('Chase the inventor for comments on 2148');
+    expect(screen.queryByRole('button', { name: 'Pull from meetings' })).not.toBeInTheDocument();
+  });
+});

package/src/components/index.ts

@@ -30,3 +30,4 @@ export type {
 // connections. Same rule as above — the page composers ship, not just the parts.
 export * from './pages/LibraryPage';
 export * from './pages/AskPage';
+export * from './pages/TrackerPage';

package/src/components/pages/ConnectionsPage.tsx

@@ -9,7 +9,8 @@
  *
  * WHAT IT RENDERS, in the order the job actually happens:
  *
- *   1. connected accounts, each saying what it is and whether it is healthy
+ *   1. connected accounts, each saying what it is and whether it is healthy —
+ *      and each MAINTAINABLE: test it, replace its key, disconnect it
  *   2. the catalog — everything connectable, including rows that cannot load
  *   3. per connection: DISCOVER what the credential reaches -> WIRE a choice ->
  *      CONFIRM the derived config -> FIRE it, and the run history of both legs
@@ -18,6 +19,14 @@
  * and the CONFIRM step exists because a derived URL is a guess about the
  * vendor's own settings until a human agrees with it.
  *
+ * THE MAINTENANCE CONTROLS IN STEP 1 ARE NOT A DETAIL (bd startsim-768w.22.24).
+ * Without them a card is a dead end in both directions: an admin with a rotated
+ * vendor key cannot install it, and an admin who is done with a vendor cannot
+ * remove it. Both endpoints existed and worked; nothing rendered them, so the
+ * only control that looked like it would take a new key was the connect form —
+ * which makes a second card, not a replacement, and collided on a unique
+ * constraint that reached a live foundry as a Django HTML 500.
+ *
  * NOTHING HERE NAMES A VENDOR. Every difference between two vendors arrives as
  * data — the field schema, the capability list, the choice rows and their
  * reasons. A `if (connector === ...)` in this file would undo the DB-driven
@@ -135,12 +144,13 @@ export function ConnectionsPage({ api, foundrySlug, classNames = {} }: Connectio
             api={api}
             foundrySlug={foundrySlug}
             connection={connection}
-            // What the CONNECTOR declares, so the card can offer a capability
-            // this connection does not have yet — which is the only way an
-            // account connected before the picker existed ever gets one.
-            declared={
-              catalog.find((entry) => entry.key === connection.connector_key)?.capabilities
-            }
+            // The CONNECTOR's own catalog row. It carries the capability list,
+            // so the card can offer a capability this connection does not have
+            // yet — the only way an account connected before the picker existed
+            // ever gets one — and the credential schema, so replacing the key
+            // renders the same schema-driven form the connect path does rather
+            // than a bespoke "paste your key" box per vendor.
+            entry={catalog.find((row) => row.key === connection.connector_key)}
             canManage={permissions.manage}
             classNames={cn}
             onChanged={reload}
@@ -156,6 +166,11 @@ export function ConnectionsPage({ api, foundrySlug, classNames = {} }: Connectio
             api={api}
             foundrySlug={foundrySlug}
             entry={entry}
+            // What this foundry ALREADY has on this connector. A second vendor
+            // account is legitimate and stays possible; an admin who is really
+            // trying to install a new key is not, and they are the ones this
+            // form used to swallow.
+            existing={connections.filter((c) => c.connector_key === entry.key)}
             canManage={permissions.manage}
             classNames={cn}
             onConnected={reload}
@@ -240,11 +255,13 @@ function orderCapabilities(declared: string[], selected: Iterable<string>): stri
 // --------------------------------------------------------------------------
 
 function CatalogCard({
-  api, foundrySlug, entry, canManage, classNames: cn, onConnected,
+  api, foundrySlug, entry, existing, canManage, classNames: cn, onConnected,
 }: {
   api: ConnectionsApi;
   foundrySlug: string;
   entry: ConnectorCatalogEntry;
+  /** Cards this foundry already holds on this connector. */
+  existing: Connection[];
   canManage: boolean;
   classNames: typeof DEFAULTS;
   onConnected: () => void;
@@ -325,6 +342,23 @@ function CatalogCard({
 
       {open ? (
         <div className="mt-4 space-y-3">
+          {/* SAID BEFORE THE KEY IS PASTED, not after the server refuses.
+              Connecting again makes a SECOND account, which is legitimate and
+              stays available — but it is almost never what an admin holding a
+              rotated key wants, and it was the only thing this page offered
+              them. The server now answers the indistinguishable case with a 409
+              naming the card; this catches it a round trip earlier. */}
+          {existing.length > 0 ? (
+            <p className={cn.muted} data-already-connected={entry.key}>
+              Already connected as{' '}
+              <strong className="text-gray-900">
+                {existing.map((c) => c.name).join(', ')}
+              </strong>
+              . To install a new key, use <em>Replace key</em> on that
+              connection — it is tested before it replaces the working one.
+              Connecting here adds a SECOND account.
+            </p>
+          ) : null}
           <CredentialSchemaForm
             fields={fields}
             values={values}
@@ -375,17 +409,119 @@ function CatalogCard({
   );
 }
 
+// --------------------------------------------------------------------------
+//  replacing the key on a connection that already exists
+// --------------------------------------------------------------------------
+
+/**
+ * ROTATION, rendered from the same schema as the connect form.
+ *
+ * Two things make this safe to put in front of a non-engineer, and both are
+ * properties of the endpoint rather than of this component:
+ *
+ *   * the pasted credential is run through `check()` against the vendor BEFORE
+ *     anything is written, so a wrong key changes nothing and the working
+ *     connection stays up. That is said in the copy, because someone about to
+ *     paste a production key is entitled to know it;
+ *   * a PARTIAL map is legal. A connector with a url + a key + a select takes
+ *     just the key here, and the stored values fill in the rest — so replacing
+ *     a secret never means re-typing the settings around it.
+ *
+ * Only the CREDENTIAL fields render. `config` is not a credential and is edited
+ * through the connection's own settings; mixing them here would make a
+ * rotation quietly a config change.
+ */
+function ReplaceKeyForm({
+  api, foundrySlug, connection, entry, classNames: cn, onDone,
+}: {
+  api: ConnectionsApi;
+  foundrySlug: string;
+  connection: Connection;
+  entry?: ConnectorCatalogEntry;
+  classNames: typeof DEFAULTS;
+  onDone: () => void;
+}) {
+  const [values, setValues] = React.useState<Record<string, string>>({});
+  const [busy, setBusy] = React.useState(false);
+  const [error, setError] = React.useState('');
+
+  const fields = schemaFields(entry?.credential_schema);
+  const warnings = patternWarnings(fields, values);
+  // NOT `missingRequired`. A rotation is partial by design — the whole point is
+  // to replace one secret without re-typing the fields around it — so the gate
+  // is "something was actually typed", and the server decides the rest.
+  const submitted = React.useMemo(() => {
+    const out: Record<string, unknown> = {};
+    for (const spec of fields) {
+      const value = values[isSecret(spec) ? `${spec.key}__draft` : spec.key];
+      if (value) out[spec.key] = value;
+    }
+    return out;
+  }, [fields, values]);
+  const empty = Object.keys(submitted).length === 0;
+
+  return (
+    <div className="mt-3 space-y-3 border-t pt-3" data-replace-key={connection.id}>
+      <p className={cn.muted}>
+        The new key is tested against the vendor before it replaces the current
+        one. If it is rejected, nothing changes and this connection keeps
+        working on the key it has.
+      </p>
+      {fields.length === 0 ? (
+        <p className={cn.muted}>
+          This connector holds no credential of ours, so there is nothing to
+          replace.
+        </p>
+      ) : (
+        <CredentialSchemaForm
+          fields={fields}
+          values={values}
+          warnings={warnings}
+          idPrefix={`replace-${connection.id}`}
+          onChange={(key, value) => {
+            const spec = fields.find((f) => f.key === key);
+            setValues((prev) => ({
+              ...prev, [spec && isSecret(spec) ? `${key}__draft` : key]: value,
+            }));
+          }}
+        />
+      )}
+      {error ? <p className={cn.error} role="alert">{error}</p> : null}
+      <button
+        type="button"
+        className={cn.button}
+        disabled={busy || empty}
+        onClick={() => {
+          setBusy(true);
+          setError('');
+          api.rotateCredential(foundrySlug, connection.id, submitted)
+            .then(() => { setValues({}); onDone(); })
+            // The server's typed answer, verbatim: it already scrubbed itself of
+            // the values just submitted, and "the vendor rejected this key" is
+            // not something the browser could work out on its own.
+            .catch((err: unknown) => setError(
+              (err as { message?: string })?.message || 'Could not replace the key.'))
+            .finally(() => setBusy(false));
+        }}
+      >
+        {busy ? 'Testing…' : 'Test and replace'}
+      </button>
+    </div>
+  );
+}
+
 // --------------------------------------------------------------------------
 //  a connected account: discover -> wire -> confirm -> fire
 // --------------------------------------------------------------------------
 
 function ConnectionCard({
-  api, foundrySlug, connection, declared, canManage, classNames: cn, onChanged,
+  api, foundrySlug, connection, entry, canManage, classNames: cn, onChanged,
 }: {
   api: ConnectionsApi;
   foundrySlug: string;
   connection: Connection;
-  declared?: string[];
+  /** This connector's catalog row: its capabilities AND its field schema. */
+  entry?: ConnectorCatalogEntry;
   canManage: boolean;
   classNames: typeof DEFAULTS;
   onChanged: () => void;
@@ -396,7 +532,10 @@ function ConnectionCard({
   const [busy, setBusy] = React.useState('');
   const [error, setError] = React.useState('');
   const [notice, setNotice] = React.useState('');
+  const [replacing, setReplacing] = React.useState(false);
+  const [confirmingDisconnect, setConfirmingDisconnect] = React.useState(false);
 
+  const declared = entry?.capabilities;
   const enabled = React.useMemo(
     () => connection.capabilities_enabled ?? [], [connection.capabilities_enabled]);
   // The catalog's declaration first, then anything this connection holds that
@@ -444,7 +583,7 @@ function ConnectionCard({
           ) : null}
         </div>
         {canManage ? (
-          <div className="flex gap-2">
+          <div className="flex flex-wrap justify-end gap-2">
             <button
               type="button"
               className={cn.button}
@@ -457,6 +596,21 @@ function ConnectionCard({
             >
               Test
             </button>
+            {/* THE CONTROL THIS PAGE WAS MISSING. A vendor key gets rotated —
+                that is normal operations, not an exception — and the only place
+                to put the new one was a form that creates a second account. */}
+            <button
+              type="button"
+              className={cn.button}
+              disabled={Boolean(busy)}
+              onClick={() => {
+                setConfirmingDisconnect(false);
+                setError('');
+                setReplacing((v) => !v);
+              }}
+            >
+              {replacing ? 'Cancel' : 'Replace key'}
+            </button>
             <button
               type="button"
               className={cn.button}
@@ -470,10 +624,74 @@ function ConnectionCard({
             >
               {busy === 'discover' ? 'Loading…' : 'Workflows'}
             </button>
+            <button
+              type="button"
+              className={cn.button}
+              disabled={Boolean(busy) || confirmingDisconnect}
+              onClick={() => {
+                setReplacing(false);
+                setError('');
+                setConfirmingDisconnect(true);
+              }}
+            >
+              Disconnect
+            </button>
           </div>
         ) : null}
       </div>
 
+      {replacing ? (
+        <ReplaceKeyForm
+          api={api}
+          foundrySlug={foundrySlug}
+          connection={connection}
+          entry={entry}
+          classNames={cn}
+          onDone={() => { setReplacing(false); setNotice('New key installed.'); onChanged(); }}
+        />
+      ) : null}
+
+      {confirmingDisconnect ? (
+        <div className="mt-3 space-y-2 border-t pt-3" role="group"
+             aria-label="Confirm disconnect">
+          {/* Disconnect is one sentence to an admin and four writes to the
+              server, three of which cannot be undone by reconnecting: the
+              tokens this vendor holds against us are revoked and the stored
+              credential is deleted. Naming them is the difference between a
+              control someone uses deliberately and one they regret. */}
+          <p className={cn.muted}>
+            Disconnecting <strong className="text-gray-900">{connection.name}</strong>{' '}
+            will stop its scheduled fetches, stop anything it sends out, revoke
+            every token issued for it and delete the stored key. The card stays
+            here, marked disabled, and you can connect it again later with a new
+            key.
+          </p>
+          <div className="flex gap-2">
+            <button
+              type="button"
+              className={cn.button}
+              disabled={Boolean(busy)}
+              onClick={() => void guard('disconnect', async () => {
+                await api.disconnect(foundrySlug, connection.id);
+                setConfirmingDisconnect(false);
+                setNotice('Disconnected.');
+                onChanged();
+              })}
+            >
+              {busy === 'disconnect' ? 'Disconnecting…' : 'Yes, disconnect'}
+            </button>
+            <button
+              type="button"
+              className={cn.button}
+              disabled={Boolean(busy)}
+              onClick={() => setConfirmingDisconnect(false)}
+            >
+              Cancel
+            </button>
+          </div>
+        </div>
+      ) : null}
+
       {/* THE FIX FOR THE CARDS THAT ALREADY EXIST. A connection written before
           the connect form asked holds an empty list and can do nothing; the
           connect form can never reach it. Turning `poll` on here is what makes