@startsimpli/integrations 0.2.19 → 0.2.21

package/src/components/pages/ConnectionsPage.tsx

@@ -44,20 +44,105 @@ import {
 import type {
   Connection,
   ConnectionChoice,
+  ConnectionChoicePage,
+  ConnectionInvokeResult,
   ConnectionPermissions,
   ConnectionTarget,
   ConnectorAction,
   ConnectorCatalogEntry,
   ConnectorFieldSpec,
   ConnectionsApi,
+  MemberConnectionsApi,
 } from './types';
 
-export interface ConnectionsPageProps {
-  api: ConnectionsApi;
-  foundrySlug: string;
-  classNames?: Partial<Record<
-    'root' | 'section' | 'heading' | 'card' | 'button' | 'muted' | 'error', string
-  >>;
+type ClassNames = Partial<Record<
+  'root' | 'section' | 'heading' | 'card' | 'button' | 'muted' | 'error', string
+>>;
+
+/**
+ * TWO SURFACES, ONE COMPOSER (bd startsim-768w.22.25.6).
+ *
+ * A discriminated union rather than an optional slug, because the two modes do
+ * not merely differ in their arguments — `personal` has no slug ANYWHERE, which
+ * is the member surface's whole security property (see `MemberConnectionsApi`).
+ * Making `foundrySlug` optional would let a personal mount pass one and read as
+ * though it meant something.
+ */
+export type ConnectionsPageProps =
+  | {
+    mode?: 'foundry';
+    api: ConnectionsApi;
+    foundrySlug: string;
+    classNames?: ClassNames;
+  }
+  | {
+    mode: 'personal';
+    api: MemberConnectionsApi;
+    /** There is no slug on this surface. The token's audience names the foundry. */
+    foundrySlug?: never;
+    classNames?: ClassNames;
+  };
+
+/**
+ * The api as the components below use it: SLUGLESS, because the slug is a
+ * property of the mount and not of any control on the page.
+ *
+ * The foundry-level verbs are optional, and that is what gates the UI. A control
+ * renders when the verb behind it exists, so personal mode cannot render a
+ * button whose handler would be `undefined` — the type checker, not a
+ * `mode === 'personal'` sprinkled through nine call sites, is what keeps the
+ * two surfaces honest.
+ */
+interface BoundApi {
+  connectorCatalog(): Promise<{ results: ConnectorCatalogEntry[] }>;
+  connections(): Promise<{ results: Connection[]; permissions: ConnectionPermissions }>;
+  connect(input: {
+    connector_key: string;
+    name?: string;
+    credentials?: Record<string, unknown>;
+    config?: Record<string, unknown>;
+    capabilities_enabled?: string[];
+  }): Promise<Connection>;
+  checkConnection(id: string): Promise<{ ok: boolean; account_label: string; detail: string }>;
+  rotateCredential(id: string, credentials: Record<string, unknown>): Promise<Connection>;
+  disconnect(id: string): Promise<void>;
+  updateConnection?(id: string, input: {
+    name?: string; capabilities_enabled?: string[]; config?: Record<string, unknown>;
+  }): Promise<Connection>;
+  connectionChoices?(id: string, params?: { kind?: string; cursor?: string }):
+    Promise<ConnectionChoicePage>;
+  wireTarget?(id: string, input: {
+    choice_id: string; name?: string; options?: Record<string, unknown>;
+  }): Promise<ConnectionTarget>;
+  confirmTarget?(id: string, destinationId: string): Promise<ConnectionTarget>;
+  connectionActions?(id: string): Promise<{ results: ConnectorAction[] }>;
+  invokeConnectionAction?(id: string, action: string, input: {
+    destination_id: string; record_type?: string; records?: unknown[];
+  }): Promise<ConnectionInvokeResult>;
+}
+
+function bindApi(props: ConnectionsPageProps): BoundApi {
+  if (props.mode === 'personal') {
+    // Already slugless. Passed through rather than wrapped, so nothing here can
+    // grow a slug argument by accident.
+    return props.api;
+  }
+  const { api, foundrySlug: slug } = props;
+  return {
+    connectorCatalog: () => api.connectorCatalog(slug),
+    connections: () => api.connections(slug),
+    connect: (input) => api.connect(slug, input),
+    checkConnection: (id) => api.checkConnection(slug, id),
+    rotateCredential: (id, credentials) => api.rotateCredential(slug, id, credentials),
+    disconnect: (id) => api.disconnect(slug, id),
+    updateConnection: (id, input) => api.updateConnection(slug, id, input),
+    connectionChoices: (id, params) => api.connectionChoices(slug, id, params),
+    wireTarget: (id, input) => api.wireTarget(slug, id, input),
+    confirmTarget: (id, destinationId) => api.confirmTarget(slug, id, destinationId),
+    connectionActions: (id) => api.connectionActions(slug, id),
+    invokeConnectionAction: (id, action, input) =>
+      api.invokeConnectionAction(slug, id, action, input),
+  };
 }
 
 const DEFAULTS = {
@@ -85,19 +170,49 @@ const CAPABILITY_COPY: Record<string, string> = {
   writeback_credential: 'Issue a token this vendor uses to call us',
 };
 
-/** A refusal must read as a refusal, not as an empty page. */
-function readFailureMessage(err: unknown): string {
+/**
+ * A refusal must read as a refusal, not as an empty page — and it must name the
+ * refusal that actually happened. This runs in ONE place: the catch around the
+ * two GETs `reload` makes. So trace which 403 can reach here on each surface.
+ *
+ * Control plane: the caller lacks the connections permission on this foundry.
+ *
+ * Member surface: `IsSeatedMember` denied — no ACTIVE `CompanyMembership` and
+ * not the org's `owner`. That is the ONLY 403 either GET produces;
+ * `MyConnectorCatalogView` answers a foundry that has allowed nothing with
+ * `{results: []}` and a 200, and `MyConnectionsView.get` runs no per-connector
+ * policy at all. The allowlist refusal (`_NOT_ALLOWED`) is raised by the POST,
+ * lands in `CatalogCard`'s own catch, and renders the server's wording verbatim.
+ * Blaming the allowlist here would send someone whose SEAT is gone to ask an
+ * admin to allow a connector — the admin could allow every one of them and this
+ * page would still refuse.
+ */
+function readFailureMessage(err: unknown, personal: boolean): string {
   const status = (err as { status?: number })?.status;
   if (status === 403) {
-    return 'You do not have access to this foundry’s connections. Ask an admin for the connections permission.';
+    return personal
+      ? 'You are not a member of this foundry, or your access to it has ended. Ask an admin to add you.'
+      : 'You do not have access to this foundry’s connections. Ask an admin for the connections permission.';
   }
   if (status === 401) return 'Your session has expired. Sign in again.';
   const message = (err as { message?: string })?.message;
   return message || 'Could not load connections.';
 }
 
-export function ConnectionsPage({ api, foundrySlug, classNames = {} }: ConnectionsPageProps) {
+export function ConnectionsPage(props: ConnectionsPageProps) {
+  const { classNames = {} } = props;
+  const personal = props.mode === 'personal';
   const cn = { ...DEFAULTS, ...classNames };
+  // Keyed on the PARTS, never on `props` — a props object is a new object every
+  // render, so memoising on it would rebuild the binding each time, change
+  // `reload`'s identity each time, and turn the load effect into a loop.
+  const injected = props.api;
+  const slug = props.mode === 'personal' ? undefined : props.foundrySlug;
+  const api = React.useMemo(
+    () => bindApi(props),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [personal, injected, slug],
+  );
 
   const [catalog, setCatalog] = React.useState<ConnectorCatalogEntry[]>([]);
   const [connections, setConnections] = React.useState<Connection[]>([]);
@@ -111,19 +226,22 @@ export function ConnectionsPage({ api, foundrySlug, classNames = {} }: Connectio
     setLoading(true);
     try {
       const [cat, conns] = await Promise.all([
-        api.connectorCatalog(foundrySlug),
-        api.connections(foundrySlug),
+        // In personal mode this is the ALLOWED catalog, already narrowed by the
+        // foundry's policy server-side. Rendered as handed: filtering here would
+        // put the withheld connectors in the browser to be filtered out of.
+        api.connectorCatalog(),
+        api.connections(),
       ]);
       setCatalog(cat.results ?? []);
       setConnections(conns.results ?? []);
       setPermissions(conns.permissions ?? { view: true, manage: false, issue_tokens: false });
       setLoadError('');
     } catch (err) {
-      setLoadError(readFailureMessage(err));
+      setLoadError(readFailureMessage(err, personal));
     } finally {
       setLoading(false);
     }
-  }, [api, foundrySlug]);
+  }, [api, personal]);
 
   React.useEffect(() => { void reload(); }, [reload]);
 
@@ -134,16 +252,26 @@ export function ConnectionsPage({ api, foundrySlug, classNames = {} }: Connectio
   return (
     <div className={cn.root}>
       <section className={cn.section}>
-        <h2 className={cn.heading}>Connected accounts</h2>
+        {/* WHOSE ACCOUNTS THESE ARE. On the member surface the list is already
+            owner-scoped server-side (`for_owner`), and the heading has to say so
+            — a member looking at "Connected accounts" inside their foundry's app
+            has no way to tell whether they are seeing the foundry's keys. */}
+        <h2 className={cn.heading}>
+          {personal ? 'Your connected accounts' : 'Connected accounts'}
+        </h2>
         {loading && connections.length === 0 ? <p className={cn.muted}>Loading…</p> : null}
         {!loading && connections.length === 0 ? (
-          <p className={cn.muted}>Nothing connected yet.</p>
+          <p className={cn.muted}>
+            {personal
+              ? 'You have not connected an account yet.'
+              : 'Nothing connected yet.'}
+          </p>
         ) : null}
         {connections.map((connection) => (
           <ConnectionCard
             key={connection.id}
             api={api}
-            foundrySlug={foundrySlug}
+            personal={personal}
             connection={connection}
             // The CONNECTOR's own catalog row. It carries the capability list,
             // so the card can offer a capability this connection does not have
@@ -160,17 +288,26 @@ export function ConnectionsPage({ api, foundrySlug, classNames = {} }: Connectio
       </section>
 
       <section className={cn.section}>
-        <h2 className={cn.heading}>Available connectors</h2>
+        <h2 className={cn.heading}>
+          {personal ? 'Connect your own account' : 'Available connectors'}
+        </h2>
+        {personal && !loading && catalog.length === 0 ? (
+          <p className={cn.muted}>
+            Your foundry has not opened any connector to members yet. An admin
+            decides which ones you may connect your own account on.
+          </p>
+        ) : null}
         {catalog.map((entry) => (
           <CatalogCard
             key={entry.key}
             api={api}
-            foundrySlug={foundrySlug}
+            personal={personal}
             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.
+            // What ALREADY exists on this connector — in personal mode that is
+            // the member's own cards and nobody else's, because `connections`
+            // came back owner-scoped. A second vendor account is legitimate and
+            // stays possible; someone who is really trying to install a rotated
+            // 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}
@@ -256,12 +393,12 @@ function orderCapabilities(declared: string[], selected: Iterable<string>): stri
 // --------------------------------------------------------------------------
 
 function CatalogCard({
-  api, foundrySlug, entry, existing, canManage, classNames: cn, onConnected,
+  api, personal, entry, existing, canManage, classNames: cn, onConnected,
 }: {
-  api: ConnectionsApi;
-  foundrySlug: string;
+  api: BoundApi;
+  personal: boolean;
   entry: ConnectorCatalogEntry;
-  /** Cards this foundry already holds on this connector. */
+  /** Cards already held on this connector — the foundry's, or the member's own. */
   existing: Connection[];
   canManage: boolean;
   classNames: typeof DEFAULTS;
@@ -303,7 +440,7 @@ function CatalogCard({
         // recordings are stored.
         if (typeof v === 'boolean' || typeof v === 'number' || v) config[spec.key] = v;
       }
-      await api.connect(foundrySlug, {
+      await api.connect({
         connector_key: entry.key, name: entry.name, credentials, config,
         // Always sent. Leaving it off is what wrote the inert cards.
         capabilities_enabled: orderCapabilities(entry.capabilities, capabilities),
@@ -437,10 +574,9 @@ function CatalogCard({
  * rotation quietly a config change.
  */
 function ReplaceKeyForm({
-  api, foundrySlug, connection, entry, classNames: cn, onDone,
+  api, connection, entry, classNames: cn, onDone,
 }: {
-  api: ConnectionsApi;
-  foundrySlug: string;
+  api: BoundApi;
   connection: Connection;
   entry?: ConnectorCatalogEntry;
   classNames: typeof DEFAULTS;
@@ -499,7 +635,7 @@ function ReplaceKeyForm({
         onClick={() => {
           setBusy(true);
           setError('');
-          api.rotateCredential(foundrySlug, connection.id, submitted)
+          api.rotateCredential(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
@@ -541,10 +677,9 @@ function ReplaceKeyForm({
  * `ingest_transcripts` the off position is the whole privacy posture.
  */
 function ConnectionSettingsForm({
-  api, foundrySlug, connection, fields, classNames: cn, onDone,
+  api, connection, fields, classNames: cn, onDone,
 }: {
-  api: ConnectionsApi;
-  foundrySlug: string;
+  api: BoundApi;
   connection: Connection;
   fields: ConnectorFieldSpec[];
   classNames: typeof DEFAULTS;
@@ -578,7 +713,7 @@ function ConnectionSettingsForm({
             ? Number(value)
             : value;
       }
-      await api.updateConnection(foundrySlug, connection.id, { config });
+      await api.updateConnection!(connection.id, { config });
       onDone();
     } catch (err) {
       setError((err as { message?: string })?.message || 'Those settings were not saved.');
@@ -615,10 +750,10 @@ function ConnectionSettingsForm({
 }
 
 function ConnectionCard({
-  api, foundrySlug, connection, entry, canManage, classNames: cn, onChanged,
+  api, personal, connection, entry, canManage, classNames: cn, onChanged,
 }: {
-  api: ConnectionsApi;
-  foundrySlug: string;
+  api: BoundApi;
+  personal: boolean;
   connection: Connection;
   /** This connector's catalog row: its capabilities AND its field schema. */
   entry?: ConnectorCatalogEntry;
@@ -692,7 +827,7 @@ function ConnectionCard({
               className={cn.button}
               disabled={Boolean(busy)}
               onClick={() => void guard('check', async () => {
-                const res = await api.checkConnection(foundrySlug, connection.id);
+                const res = await api.checkConnection(connection.id);
                 setNotice(res.detail || (res.ok ? 'Connection is healthy.' : ''));
                 onChanged();
               })}
@@ -714,19 +849,26 @@ function ConnectionCard({
             >
               {replacing ? 'Cancel' : 'Replace key'}
             </button>
-            <button
-              type="button"
-              className={cn.button}
-              disabled={Boolean(busy)}
-              onClick={() => void guard('discover', async () => {
-                const page = await api.connectionChoices(foundrySlug, connection.id);
-                setChoices(page.results ?? []);
-                const available = await api.connectionActions(foundrySlug, connection.id);
-                setActions(available.results ?? []);
-              })}
-            >
-              {busy === 'discover' ? 'Loading…' : 'Workflows'}
-            </button>
+            {/* DISCOVER -> WIRE -> FIRE is foundry-level and stays there. The
+                member router serves no choices, targets or actions at all, so
+                the control is gated on the verb EXISTING rather than on a mode
+                flag — there is no way to render a button here whose handler is
+                undefined. */}
+            {api.connectionChoices && api.connectionActions ? (
+              <button
+                type="button"
+                className={cn.button}
+                disabled={Boolean(busy)}
+                onClick={() => void guard('discover', async () => {
+                  const page = await api.connectionChoices!(connection.id);
+                  setChoices(page.results ?? []);
+                  const available = await api.connectionActions!(connection.id);
+                  setActions(available.results ?? []);
+                })}
+              >
+                {busy === 'discover' ? 'Loading…' : 'Workflows'}
+              </button>
+            ) : null}
             {/* SETTINGS, which this card has never had. A connector's
                 `config_schema` ships on every catalog row and was rendered
                 exactly once — on the connect form, before the account existed.
@@ -735,7 +877,7 @@ function ConnectionCard({
                 recordings of people's conversations are stored was reachable
                 only by editing the database. `ReplaceKeyForm` already pointed at
                 "the connection's own settings" as if this existed. */}
-            {configFields.length ? (
+            {configFields.length && api.updateConnection ? (
               <button
                 type="button"
                 className={cn.button}
@@ -769,7 +911,6 @@ function ConnectionCard({
       {settingsOpen ? (
         <ConnectionSettingsForm
           api={api}
-          foundrySlug={foundrySlug}
           connection={connection}
           fields={configFields}
           classNames={cn}
@@ -780,7 +921,6 @@ function ConnectionCard({
       {replacing ? (
         <ReplaceKeyForm
           api={api}
-          foundrySlug={foundrySlug}
           connection={connection}
           entry={entry}
           classNames={cn}
@@ -809,7 +949,7 @@ function ConnectionCard({
               className={cn.button}
               disabled={Boolean(busy)}
               onClick={() => void guard('disconnect', async () => {
-                await api.disconnect(foundrySlug, connection.id);
+                await api.disconnect(connection.id);
                 setConfirmingDisconnect(false);
                 setNotice('Disconnected.');
                 onChanged();
@@ -837,21 +977,26 @@ function ConnectionCard({
         scope="connection"
         declared={offered}
         selected={selected}
-        disabled={!canManage || Boolean(busy)}
+        // On the member surface there is no PATCH, so the picker is
+        // INFORMATIONAL rather than absent. A member chose these at connect time
+        // and `POST` accepted them; hiding the list afterwards would make that
+        // choice look like it never happened, and leave them unable to see what
+        // their own account is doing.
+        disabled={!canManage || !api.updateConnection || Boolean(busy)}
         idPrefix={`connection-${connection.id}`}
         onToggle={(capability, on) => setSelected((prev) => (
           on ? [...prev, capability] : prev.filter((c) => c !== capability)
         ))}
         classNames={cn}
       >
-        {canManage ? (
+        {canManage && api.updateConnection ? (
           <div className="mt-2 flex items-center gap-3">
             <button
               type="button"
               className={cn.button}
               disabled={!dirty || pending.length === 0 || Boolean(busy)}
               onClick={() => void guard('capabilities', async () => {
-                await api.updateConnection(foundrySlug, connection.id, {
+                await api.updateConnection!(connection.id, {
                   capabilities_enabled: pending,
                 });
                 setNotice('Saved.');
@@ -866,6 +1011,11 @@ function ConnectionCard({
               </span>
             ) : null}
           </div>
+        ) : personal ? (
+          <p className={cn.muted}>
+            Chosen when you connected. Ask an admin to change what this account
+            may do, or disconnect it and connect again.
+          </p>
         ) : null}
       </CapabilityPicker>
 
@@ -897,7 +1047,7 @@ function ConnectionCard({
                   className={cn.button}
                   disabled={Boolean(busy)}
                   onClick={() => void guard('wire', async () => {
-                    setTarget(await api.wireTarget(foundrySlug, connection.id, {
+                    setTarget(await api.wireTarget!(connection.id, {
                       choice_id: choice.id,
                     }));
                   })}
@@ -925,7 +1075,7 @@ function ConnectionCard({
               className={cn.button}
               disabled={Boolean(busy)}
               onClick={() => void guard('confirm', async () => {
-                setTarget(await api.confirmTarget(foundrySlug, connection.id, target.id));
+                setTarget(await api.confirmTarget!(connection.id, target.id));
               })}
             >
               Confirm this target
@@ -940,8 +1090,8 @@ function ConnectionCard({
                   className={cn.button}
                   disabled={Boolean(busy)}
                   onClick={() => void guard('invoke', async () => {
-                    const result = await api.invokeConnectionAction(
-                      foundrySlug, connection.id, available.name,
+                    const result = await api.invokeConnectionAction!(
+                      connection.id, available.name,
                       { destination_id: target.id, records: [] },
                     );
                     // `accepted` is not `completed`. Saying "done" here would

package/src/components/pages/types.ts

@@ -220,3 +220,61 @@ export interface ConnectionsApi {
   }): Promise<ConnectionInvokeResult>;
   connectionRuns(slug: string, id: string): Promise<{ results: ConnectionRun[] }>;
 }
+
+/**
+ * THE SAME PAGE, FOR A PERSON RATHER THAN A FOUNDRY (bd startsim-768w.22.25.6).
+ *
+ * A seated member of a foundry connects THEIR OWN account — their Granola key,
+ * not the foundry's — from inside their tenant app. The endpoints are
+ * `connections/me/...` and the differences from the interface above are not
+ * stylistic; each one is a shape the member router deliberately does not serve
+ * (`backend/apps/connectors/member_urls.py`, `api/member_views.py`):
+ *
+ * NO SLUG. Every method here is slugless, and that is the whole security
+ * property rather than a convenience. The member surface names the foundry
+ * through the TOKEN'S AUDIENCE, so — in the router's own words — "there is no id
+ * here to substitute, no slug to swap, and therefore nothing in the URL space
+ * that names anybody else." A client whose signatures take a slug hands that
+ * affordance back at the type level, and reads to the next person as a client
+ * that scopes by slug. It must not exist.
+ *
+ * NO `updateConnection`. `MyConnectionDetailView` serves GET and DELETE only.
+ * Renaming a card or changing its config or enabled capabilities stays on the
+ * control-plane router; a member who needs one asks an admin.
+ *
+ * NO choices, targets, actions or tokens. Discovering what a credential reaches,
+ * wiring it to a destination, invoking it and minting `ConnectionToken`s are
+ * foundry-level and stay owner- or admin-exclusive. That is a design decision,
+ * not a backlog item — a member's key is theirs to install and revoke, not a
+ * lever on the foundry's pipelines.
+ *
+ * `connectorCatalog` here returns the ALLOWED catalog — `member_connectable`
+ * for this foundry, filtered server-side, default-deny per connector. The
+ * composer renders exactly what it is handed: a client-side filter over the
+ * full catalog would ship the withheld vendors in the bundle.
+ */
+export interface MemberConnectionsApi {
+  connectorCatalog(): Promise<{ results: ConnectorCatalogEntry[] }>;
+  connections(): Promise<{
+    results: Connection[];
+    permissions: ConnectionPermissions;
+  }>;
+  connect(input: {
+    connector_key: string;
+    name?: string;
+    credentials?: Record<string, unknown>;
+    config?: Record<string, unknown>;
+    /**
+     * Chosen once, at connect time, and not editable afterwards on this
+     * surface — there is no PATCH. The picker on an existing card is therefore
+     * informational, and saying so is the honest rendering of both halves.
+     */
+    capabilities_enabled?: string[];
+  }): Promise<Connection>;
+  checkConnection(id: string): Promise<{
+    ok: boolean; account_label: string; detail: string;
+  }>;
+  rotateCredential(id: string, credentials: Record<string, unknown>): Promise<Connection>;
+  disconnect(id: string): Promise<void>;
+  connectionRuns(id: string): Promise<{ results: ConnectionRun[] }>;
+}