@flamingo-stack/openframe-frontend-core 0.0.749 → 0.0.750

package/dist/{logs-KQCWDIOB.cjs → logs-WDLOKDXT.cjs}

@@ -16,7 +16,7 @@ var _chunkDKOLQPE7cjs = require('./chunk-DKOLQPE7.cjs');
 
 
 
-var _chunkSECT4H34cjs = require('./chunk-SECT4H34.cjs');
+var _chunk6KEJQR6Lcjs = require('./chunk-6KEJQR6L.cjs');
 require('./chunk-C6LPOYDM.cjs');
 require('./chunk-NTGIQP7O.cjs');
 require('./chunk-ALPRQ3ZX.cjs');
@@ -1888,7 +1888,7 @@ function entry(logId, minutesAgo, severity, toolType, device2, summary) {
     id: logId,
     logId,
     timestamp: displayTime(_chunkDKOLQPE7cjs.demoMinutesAgo.call(void 0, minutesAgo)),
-    status: { label: severity, variant: _chunkSECT4H34cjs.logSeverityVariant.call(void 0, severity) },
+    status: { label: severity, variant: _chunk6KEJQR6Lcjs.logSeverityVariant.call(void 0, severity) },
     source: { name: toolType, toolType },
     device: device2,
     description: { title: summary }
@@ -1960,13 +1960,13 @@ var NO_FILTERS = {};
 var ACTION_COLUMNS = ["copy", "quickView", "open"];
 var BESIDE_DRAWER_HIDDEN = [...ACTION_COLUMNS, "tool", "source"];
 var logHref = () => "#";
-var copyAction = () => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkSECT4H34cjs.LogCopyIconButton, {});
+var copyAction = () => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk6KEJQR6Lcjs.LogCopyIconButton, {});
 function LogsScreen({ compact = false }) {
   const [dock, setDock] = _react.useState.call(void 0, null);
   const selected = LOGS_FIXTURE_SELECTED;
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex h-full bg-ods-bg", children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "min-w-0 flex-1 overflow-clip", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkSECT4H34cjs.LogsPageView,
+      _chunk6KEJQR6Lcjs.LogsPageView,
       {
         showHeader: false,
         className: "p-[var(--spacing-system-l)]",
@@ -1974,7 +1974,7 @@ function LogsScreen({ compact = false }) {
         onSearchChange: noop,
         onOpenFilters: noop,
         children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _chunkSECT4H34cjs.LogsTableView,
+          _chunk6KEJQR6Lcjs.LogsTableView,
           {
             logs: LOGS_FIXTURE_ENTRIES,
             facets: LOGS_FIXTURE_FACETS,
@@ -1988,8 +1988,8 @@ function LogsScreen({ compact = false }) {
         )
       }
     ) }),
-    !compact && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { ref: setDock, className: "relative w-[calc(400px+var(--spacing-system-m))] shrink-0", children: dock && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkSECT4H34cjs.AppLayoutDrawerContainerContext.Provider, { value: dock, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkSECT4H34cjs.LogDrawer,
+    !compact && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { ref: setDock, className: "relative w-[calc(400px+var(--spacing-system-m))] shrink-0", children: dock && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk6KEJQR6Lcjs.AppLayoutDrawerContainerContext.Provider, { value: dock, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _chunk6KEJQR6Lcjs.LogDrawer,
       {
         docked: true,
         isOpen: true,
@@ -2001,12 +2001,12 @@ function LogsScreen({ compact = false }) {
           { label: "Log ID", value: selected.logId },
           {
             label: "Source",
-            value: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkSECT4H34cjs.ToolBadge, { toolType: _chunkWZX26ODJcjs.normalizeToolTypeWithFallback.call(void 0, selected.source.toolType) })
+            value: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk6KEJQR6Lcjs.ToolBadge, { toolType: _chunkWZX26ODJcjs.normalizeToolTypeWithFallback.call(void 0, selected.source.toolType) })
           },
-          { label: "Device", value: _chunkSECT4H34cjs.logSourceLabels.call(void 0, selected.device).deviceName }
+          { label: "Device", value: _chunk6KEJQR6Lcjs.logSourceLabels.call(void 0, selected.device).deviceName }
         ],
         deviceCard: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _chunkSECT4H34cjs.DeviceCard,
+          _chunk6KEJQR6Lcjs.DeviceCard,
           {
             ...LOGS_FIXTURE_DEVICE,
             actions: {

package/dist/{policies-ARDCZ3CT.cjs → policies-STML7NEZ.cjs}

@@ -10,7 +10,7 @@ var _chunkDKOLQPE7cjs = require('./chunk-DKOLQPE7.cjs');
 
 
 
-var _chunkSECT4H34cjs = require('./chunk-SECT4H34.cjs');
+var _chunk6KEJQR6Lcjs = require('./chunk-6KEJQR6L.cjs');
 require('./chunk-C6LPOYDM.cjs');
 require('./chunk-NTGIQP7O.cjs');
 require('./chunk-ALPRQ3ZX.cjs');
@@ -1893,14 +1893,14 @@ var POLICIES = [
   policy("policy-local-admins", "No local admins", "No everyday account is a local administrator.", false, 0)
 ];
 var POLICIES_FIXTURE = {
-  summary: _chunkSECT4H34cjs.computePolicySummary.call(void 0, POLICIES),
+  summary: _chunk6KEJQR6Lcjs.computePolicySummary.call(void 0, POLICIES),
   rows: POLICIES.map((item) => ({
     id: item.id,
     name: item.name,
     description: item.description,
     critical: item.critical,
     severityLabel: item.critical ? "Critical" : "Low",
-    status: _chunkSECT4H34cjs.getPolicyTableStatus.call(void 0, item),
+    status: _chunk6KEJQR6Lcjs.getPolicyTableStatus.call(void 0, item),
     actions: [
       { label: "Policy Details", onClick: noop },
       { label: "Delete Policy", onClick: noop }
@@ -1914,16 +1914,16 @@ var POLICIES_FIXTURE = {
 var _jsxruntime = require('react/jsx-runtime');
 function PoliciesScreen({ compact = false }) {
   const table = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunkSECT4H34cjs.PoliciesTable,
+    _chunk6KEJQR6Lcjs.PoliciesTable,
     {
       rows: POLICIES_FIXTURE.rows,
       rowAsLink: true,
-      rightSlot: compact ? void 0 : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkSECT4H34cjs.DataTable.RowCount, {}),
+      rightSlot: compact ? void 0 : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk6KEJQR6Lcjs.DataTable.RowCount, {}),
       emptyMessage: "No policies found."
     }
   );
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex h-full flex-col gap-[var(--spacing-system-l)] bg-ods-bg p-[var(--spacing-system-l)]", children: [
-    !compact && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkSECT4H34cjs.PolicySummaryCards, { summary: POLICIES_FIXTURE.summary, now: POLICIES_FIXTURE.now }),
+    !compact && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk6KEJQR6Lcjs.PolicySummaryCards, { summary: POLICIES_FIXTURE.summary, now: POLICIES_FIXTURE.now }),
     table
   ] });
 }

package/dist/{scripts-ZAMVWCY4.cjs → scripts-HO53VYGX.cjs}

@@ -13,7 +13,7 @@ var _chunkDKOLQPE7cjs = require('./chunk-DKOLQPE7.cjs');
 
 
 
-var _chunkSECT4H34cjs = require('./chunk-SECT4H34.cjs');
+var _chunk6KEJQR6Lcjs = require('./chunk-6KEJQR6L.cjs');
 require('./chunk-C6LPOYDM.cjs');
 require('./chunk-NTGIQP7O.cjs');
 
@@ -1997,8 +1997,8 @@ function buildScriptsFixture(cast) {
 var _jsxruntime = require('react/jsx-runtime');
 var WIDE_HIDDEN_COLUMNS = ["result", "open"];
 var COMPACT_COLUMNS = [
-  { ..._chunkSECT4H34cjs.EXECUTION_COLUMNS.machineId, width: "flex-1 min-w-0", hideAt: void 0 },
-  _chunkSECT4H34cjs.EXECUTION_COLUMNS.status
+  { ..._chunk6KEJQR6Lcjs.EXECUTION_COLUMNS.machineId, width: "flex-1 min-w-0", hideAt: void 0 },
+  _chunk6KEJQR6Lcjs.EXECUTION_COLUMNS.status
 ];
 var COMPACT_ROWS = 4;
 var TOKEN_CLASS = {
@@ -2057,7 +2057,7 @@ function ScriptCodePicture({ script }) {
           /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex min-w-0 items-center justify-between gap-[var(--spacing-system-m)]", children: [
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkALPRQ3ZXcjs.TruncateText, { variant: "h6", tone: "secondary", children: `Written by ${provenance.author} \xB7 approved by ${provenance.approver}` }),
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-              _chunkSECT4H34cjs.ScriptShellBadge,
+              _chunk6KEJQR6Lcjs.ScriptShellBadge,
               {
                 value: script.shellType,
                 className: "shrink-0 text-ods-text-secondary text-h6",
@@ -2081,7 +2081,7 @@ function ScriptsScreen({ compact = false }) {
     return (
       // Four runs of the card's row height fill the frame; the padding is what is left round them.
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-full overflow-hidden bg-ods-bg p-[var(--spacing-system-xsf)]", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _chunkSECT4H34cjs.ScriptExecutionsTable,
+        _chunk6KEJQR6Lcjs.ScriptExecutionsTable,
         {
           rows: fixture.executions.slice(0, COMPACT_ROWS),
           columns: COMPACT_COLUMNS,
@@ -2091,13 +2091,13 @@ function ScriptsScreen({ compact = false }) {
       ) })
     );
   }
-  const renderOutput = (row) => row.id === fixture.openExecutionId ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkSECT4H34cjs.ScriptExecutionResult, { result: row.result, empty: "\u2014" }) : null;
+  const renderOutput = (row) => row.id === fixture.openExecutionId ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk6KEJQR6Lcjs.ScriptExecutionResult, { result: row.result, empty: "\u2014" }) : null;
   return (
     // The frame's tighter padding and no header row: the output opened under a run needs the height.
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex h-full gap-[var(--spacing-system-m)] overflow-hidden bg-ods-bg p-[var(--spacing-system-m)]", children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "w-[39%] shrink-0", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ScriptCodePicture, { script: fixture.script }) }),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "min-w-0 flex-1 overflow-hidden", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _chunkSECT4H34cjs.ScriptExecutionsTable,
+        _chunk6KEJQR6Lcjs.ScriptExecutionsTable,
         {
           rows: fixture.executions,
           hideColumns: WIDE_HIDDEN_COLUMNS,

package/dist/{software-update-6F7BIYS3.cjs → software-update-4VTK7LWQ.cjs}

@@ -15,7 +15,7 @@ var _chunkDKOLQPE7cjs = require('./chunk-DKOLQPE7.cjs');
 
 
 
-var _chunkSECT4H34cjs = require('./chunk-SECT4H34.cjs');
+var _chunk6KEJQR6Lcjs = require('./chunk-6KEJQR6L.cjs');
 require('./chunk-C6LPOYDM.cjs');
 require('./chunk-NTGIQP7O.cjs');
 
@@ -1924,12 +1924,12 @@ function StaticPackageField({ value }) {
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     _chunkALPRQ3ZXcjs.Autocomplete,
     {
-      label: _chunkSECT4H34cjs.PACKAGE_SEARCH_LABEL,
+      label: _chunk6KEJQR6Lcjs.PACKAGE_SEARCH_LABEL,
       labelVariant: "large",
       options: value ? [{ value: value.id, label: value.name, description: _nullishCoalesce(value.description, () => ( void 0)) }] : [],
       value: _nullishCoalesce(_optionalChain([value, 'optionalAccess', _ => _.id]), () => ( null)),
       onChange: noop,
-      placeholder: _chunkSECT4H34cjs.PACKAGE_SEARCH_PLACEHOLDER
+      placeholder: _chunk6KEJQR6Lcjs.PACKAGE_SEARCH_PLACEHOLDER
     }
   );
 }
@@ -1943,7 +1943,7 @@ function SoftwareUpdateScreen({ compact = false }) {
     [fixture.devices, fixture.selectedIds]
   );
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-full bg-ods-bg pt-[var(--spacing-system-l)]", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-full", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunkSECT4H34cjs.SoftwareActionForm,
+    _chunk6KEJQR6Lcjs.SoftwareActionForm,
     {
       action: fixture.action,
       showHeader: false,
@@ -1955,7 +1955,7 @@ function SoftwareUpdateScreen({ compact = false }) {
       initialValues: fixture.initialValues,
       renderPackageSearch,
       renderDevicePicker: () => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _chunkSECT4H34cjs.DeviceSelector,
+        _chunk6KEJQR6Lcjs.DeviceSelector,
         {
           devices: selected,
           loading: false,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flamingo-stack/openframe-frontend-core",
-  "version": "0.0.749",
+  "version": "0.0.750",
   "description": "Shared design system and components for all Flamingo platforms",
   "type": "module",
   "sideEffects": [

package/src/components/features/auth/login-form.tsx

@@ -12,6 +12,25 @@ import { LegalLinks } from './legal-links';
 import type { AuthSsoProvider } from './sso-providers';
 import { SsoProviderButtons } from './sso-providers';
 
+/**
+ * How a block that appears in answer to the email eases in: the prototype's fade from 4px above, short
+ * enough to read as the same card changing rather than a new one arriving.
+ */
+const ENTER_ANIMATION = 'animate-in fade-in-0 slide-in-from-top-1 duration-200 ease-out motion-reduce:animate-none';
+
+/** The sign-in methods of the organization an email resolved to. */
+export interface LoginFormTenantMethods {
+  /** Names the block ("Sign-in methods for <name>") and tags the organization's own providers. */
+  name?: string;
+  /** Its built-in OpenFrame login, offered first. */
+  openframe: boolean;
+  /**
+   * Identity providers it configured with its own credentials, tagged with `name` so they cannot be
+   * mistaken for the generic button of the same provider.
+   */
+  providers: Exclude<AuthSsoProvider, 'openframe'>[];
+}
+
 export interface LoginFormProps {
   /** Controlled email value */
   email: string;
@@ -24,37 +43,39 @@ export interface LoginFormProps {
   };
   /** Informational status under the email field (e.g. live tenant discovery). `errors.email` wins. */
   emailStatus?: { message: string; variant: 'error' | 'warning' | 'success' | 'muted' };
+  /** A message too long for the field's one-line status, shown in a notice row under the field. */
+  notice?: string;
   /**
-   * SSO providers, rendered ABOVE the email field with a divider between the two. Always visible;
-   * gate clickability with `ssoDisabled` / `ssoEnabledProviders`.
+   * The generic providers, under the email field behind `dividerLabel`. They need nothing typed: the
+   * server resolves the organization from the identity the provider asserts. With `tenantMethods`
+   * they follow the organization's own methods; pass `[]` to offer only those.
    */
   ssoProviders: AuthSsoProvider[];
   onSsoClick?: (provider: AuthSsoProvider) => void;
-  /** Disables every provider button (e.g. until the email passes discovery). */
+  /** Disables every provider button (e.g. while the typed email is being looked up). */
   ssoDisabled?: boolean;
-  /** When set, only these providers are clickable; the rest stay disabled. */
+  /** When set, only these generic providers are clickable; the rest stay disabled. */
   ssoEnabledProviders?: AuthSsoProvider[];
   /** Verb prefix for provider buttons, e.g. "Continue with". */
   ssoActionLabel?: string;
-  /** Label on the divider between the provider buttons and the email field. */
+  /** Label on the divider above the generic providers. */
   dividerLabel?: string;
   /**
-   * The discovered tenant's own SSO options, rendered UNDER the email field — unlike `ssoProviders`
-   * above, these depend on knowing the tenant, so they cannot be offered before an address is
-   * typed. Shares `onSsoClick`.
-   *
-   * Three states, and the empty array is not the same as nothing: `undefined` means discovery has
-   * not resolved a tenant yet and the slot stays empty, while `[]` means it resolved and the tenant
-   * has none — which is an answer worth showing rather than silence.
+   * The organization the typed email resolved to. Its methods render above the generic block, under
+   * a heading that names it, so the switch from "any account" to "this organization's sign-in" is
+   * visible rather than a silent change of what the same buttons do.
    */
-  customSsoProviders?: AuthSsoProvider[];
-  /** Shown in place of the custom SSO buttons when the resolved tenant has none configured. */
-  noCustomSsoLabel?: string;
+  tenantMethods?: LoginFormTenantMethods;
   /** Primary submit under the email field. Omit the handler to hide the button. */
   onSubmitClick?: () => void;
   submitLabel?: string;
   /** Disables just the primary submit (fields stay editable). */
   submitDisabled?: boolean;
+  /**
+   * Enter in the email field when there is no submit button, e.g. to look the address up now
+   * instead of after a typing pause. With `onSubmitClick` set, Enter drives that instead.
+   */
+  onEmailEnter?: () => void;
   /** Overrides the default heading. */
   title?: string;
   /** Overrides the default sub-heading. */
@@ -70,11 +91,10 @@ export interface LoginFormProps {
 }
 
 /**
- * Login form (Login tab). Presentational + controlled — the consumer owns
- * state, validation and discovery. Single-screen design: the provider buttons come first and need
- * nothing typed, then the email field below them. Whether the providers are gated is the
- * consumer's call via `ssoDisabled`; the identity-first flows leave them open, because the server
- * resolves the tenant from the identity the provider asserts.
+ * Login form (Login tab). Presentational + controlled — the consumer owns state, validation and
+ * discovery. Email first, sign-in methods under it: everything that changes once the email is known
+ * sits below the field, and the block changes as a whole. Before that the generic providers are
+ * there and need nothing typed; whether they are gated is the consumer's call via `ssoDisabled`.
  */
 export function LoginForm({
   email,
@@ -84,17 +104,18 @@ export function LoginForm({
   disabled = false,
   errors,
   emailStatus,
+  notice,
   ssoProviders,
   onSsoClick,
   ssoDisabled = false,
   ssoEnabledProviders,
   ssoActionLabel = 'Continue with',
-  dividerLabel = 'or continue with OpenFrame SSO',
-  customSsoProviders,
-  noCustomSsoLabel = 'No additional SSO configurations for this domain',
+  dividerLabel = 'or continue with',
+  tenantMethods,
   onSubmitClick,
   submitLabel = 'Continue',
   submitDisabled = false,
+  onEmailEnter,
   title = 'Login to OpenFrame',
   subtitle = 'Enter your email to access your organization.',
   termsUrl,
@@ -102,15 +123,20 @@ export function LoginForm({
   className,
 }: LoginFormProps) {
   const fieldDisabled = disabled || loading;
+  const providersDisabled = fieldDisabled || ssoDisabled;
 
   // Validation messages are deferred while the user is typing (shown on blur or after a pause).
   const emailErr = useDeferredError(errors?.email, email);
 
-  // Enter drives the same action as the visible button, under the same gate. A form with no
-  // submit (the Login tab, where the providers are the only way on) simply does nothing.
+  // Enter drives the same action as the visible button, under the same gate. A held key's repeats
+  // are not new presses: each would re-run an action that can fail fast (a lookup while offline).
   const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
-    if (event.key !== 'Enter' || fieldDisabled || submitDisabled) return;
-    onSubmitClick?.();
+    if (event.key !== 'Enter' || event.repeat || fieldDisabled) return;
+    if (onSubmitClick) {
+      if (!submitDisabled) onSubmitClick();
+      return;
+    }
+    onEmailEnter?.();
   };
 
   return (
@@ -126,21 +152,6 @@ export function LoginForm({
         <p className="text-ods-text-secondary text-h4">{subtitle}</p>
       </div>
 
-      {/* Providers come FIRST. They need nothing typed, and putting the email above them taught
-          people to fill it in before tapping one — the behaviour that made a provider button look
-          broken while it waited on a field it never needed. */}
-      {ssoProviders.length > 0 && (
-        <SsoProviderButtons
-          providers={ssoProviders}
-          onSsoClick={onSsoClick}
-          actionLabel={ssoActionLabel}
-          disabled={disabled || loading || ssoDisabled}
-          enabledProviders={ssoEnabledProviders}
-        />
-      )}
-
-      {ssoProviders.length > 0 && <LabeledDivider label={dividerLabel} />}
-
       {/* Email */}
       <Input
         type="email"
@@ -155,28 +166,21 @@ export function LoginForm({
         onKeyDown={handleKeyDown}
       />
 
-      {customSsoProviders &&
-        (customSsoProviders.length > 0 ? (
-          <SsoProviderButtons
-            providers={customSsoProviders}
-            onSsoClick={onSsoClick}
-            actionLabel={ssoActionLabel}
-            disabled={disabled || loading}
-          />
-        ) : (
-          // Same footprint as the button it stands in for, so nothing shifts when a tenant does
-          // have options. Tokens are the design's: soft-grey surface, grey text and icon, the
-          // bold-body step, a 24px icon, and 12/16 for the inset and the gap.
-          <div
-            role="status"
-            // A minimum, not a fixed height: a consumer's `noCustomSsoLabel` can run to several lines
-            // at phone width, and a fixed row clipped it.
-            className="flex min-h-11 w-full items-center gap-[var(--spacing-system-m)] rounded-md bg-ods-bg-surface px-[var(--spacing-system-s)] py-[var(--spacing-system-s)] text-ods-text-secondary text-h3 md:min-h-12"
-          >
-            <AlertTriangleIcon className="h-6 w-6 shrink-0" />
-            {noCustomSsoLabel}
-          </div>
-        ))}
+      {notice && (
+        // Tokens are the design's: soft-grey surface, grey text and icon, the bold-body step, a 24px
+        // icon, and 12/16 for the inset and the gap.
+        <div
+          role="status"
+          // A minimum, not a fixed height: the notice can run to several lines at phone width.
+          className={cn(
+            'flex min-h-11 w-full items-center gap-[var(--spacing-system-m)] rounded-md bg-ods-bg-surface px-[var(--spacing-system-s)] py-[var(--spacing-system-s)] text-ods-text-secondary text-h3 md:min-h-12',
+            ENTER_ANIMATION,
+          )}
+        >
+          <AlertTriangleIcon className="h-6 w-6 shrink-0" />
+          {notice}
+        </div>
+      )}
 
       {onSubmitClick && (
         // Full width on a phone, half the row and right-aligned from `md` up, matching the design.
@@ -197,6 +201,59 @@ export function LoginForm({
         </div>
       )}
 
+      {(tenantMethods || ssoProviders.length > 0) && (
+        // One block, so an organization's methods replace the generic set as a whole: the key mounts
+        // it anew when they arrive, and every row of it eases in, not only the rows that are new.
+        // Going back to the generic set swaps without a transition, as the prototype does.
+        <div
+          key={tenantMethods ? `tenant:${tenantMethods.name ?? ''}` : 'generic'}
+          role="group"
+          aria-label="Sign-in methods"
+          className={cn('flex flex-col gap-[var(--spacing-system-l)]', tenantMethods && ENTER_ANIMATION)}
+        >
+          {tenantMethods && (
+            <>
+              <LabeledDivider label={`Sign-in methods for ${tenantMethods.name || 'your organization'}`} />
+              {tenantMethods.openframe && (
+                // Not configured with anyone's credentials, so it carries no tag.
+                <SsoProviderButtons
+                  providers={['openframe']}
+                  onSsoClick={onSsoClick}
+                  actionLabel={ssoActionLabel}
+                  disabled={providersDisabled}
+                />
+              )}
+              {tenantMethods.providers.length > 0 && (
+                <SsoProviderButtons
+                  providers={tenantMethods.providers}
+                  onSsoClick={onSsoClick}
+                  actionLabel={ssoActionLabel}
+                  disabled={providersDisabled}
+                  tag={tenantMethods.name}
+                />
+              )}
+            </>
+          )}
+
+          {ssoProviders.length > 0 && (
+            <>
+              {/* Under an organization heading with nothing above it, a second divider would only
+                separate the heading from its own buttons. */}
+              {(!tenantMethods || tenantMethods.openframe || tenantMethods.providers.length > 0) && (
+                <LabeledDivider label={dividerLabel} />
+              )}
+              <SsoProviderButtons
+                providers={ssoProviders}
+                onSsoClick={onSsoClick}
+                actionLabel={ssoActionLabel}
+                disabled={providersDisabled}
+                enabledProviders={ssoEnabledProviders}
+              />
+            </>
+          )}
+        </div>
+      )}
+
       {termsUrl && privacyPolicyUrl && <LegalLinks termsUrl={termsUrl} privacyPolicyUrl={privacyPolicyUrl} />}
     </div>
   );

package/src/components/features/auth/sso-providers.tsx

@@ -2,6 +2,7 @@
 
 import { requireIcon, type IconComponent } from '../../chat/utils/icon-loading';
 import { Button } from '../../ui/button';
+import { StatusBadge } from '../../ui/status-badge';
 
 /** SSO providers offered on the auth forms. */
 export type AuthSsoProvider = 'openframe' | 'google' | 'microsoft' | 'apple';
@@ -34,6 +35,12 @@ export interface SsoProviderButtonsProps {
    * `disabled` still wins over this list.
    */
   enabledProviders?: AuthSsoProvider[];
+  /**
+   * A stamp on every button naming who configured these providers — e.g. the organization whose
+   * own Google Workspace a "Continue with Google" button signs in through, which is not the same
+   * button as the generic one.
+   */
+  tag?: string;
 }
 
 /** Stacked full-width SSO provider buttons shared by the auth forms. */
@@ -43,6 +50,7 @@ export function SsoProviderButtons({
   actionLabel = 'Continue with',
   disabled = false,
   enabledProviders,
+  tag,
 }: SsoProviderButtonsProps) {
   return (
     <div className="flex flex-col gap-[var(--spacing-system-l)]">
@@ -62,6 +70,19 @@ export function SsoProviderButtons({
             onClick={() => onSsoClick?.(provider)}
           >
             {`${actionLabel} ${meta.name}`}
+            {tag && (
+              // A child, not `rightIcon`: the Button lays its children out through a `contents` span,
+              // so the badge is a flex item of the button itself and can give up width (`min-w-0`)
+              // where a long organization name would otherwise push the label out of a phone-width
+              // button. `block` over its inline-flex, because an ellipsis only renders on a block box.
+              <StatusBadge
+                text={tag}
+                variant="button"
+                singleLine
+                title={tag}
+                className="block min-w-0 max-w-32 truncate"
+              />
+            )}
           </Button>
         );
       })}