@antelopejs/dms 0.6.1 → 0.7.0

package/frontend-vue/layers/dms-layout/app/build/components/pages/settings/roles/role-permissions.ts

@@ -50,6 +50,8 @@ export interface PermissionRowContext {
   changeOf: (id: string) => PermissionChange;
   requiresOf: (node: RolePermissionNode) => string[];
   autoAddedHintOf: (id: string) => string | undefined;
+  /** Warnings a closed row hides (see `selectedWarningsBelow`). */
+  warningsBelowOf: (node: RolePermissionNode) => string[];
   isDisabled: (node: RolePermissionNode) => boolean;
   disabledHint: string;
   toggle: (id: string, checked: boolean) => void;
@@ -289,25 +291,36 @@ export function selectionState(count: SelectionCount): SelectionState {
   return count.selected === count.total ? true : "indeterminate";
 }
 
+/** The permissions a node declares it needs, as far as the tree knows them. */
+function dependenciesOf(index: PermissionIndex, id: string): string[] {
+  return (index.nodes.get(id)?.dependencies ?? []).filter((dependency) =>
+    index.nodes.has(dependency),
+  );
+}
+
 /**
- * The ids a dotted permission id sits under, itself first: `a.b.c` gives
- * `a.b.c`, `a.b` and `a`. Granting follows the ids, not the tree, exactly as
- * the original roles form did: a registered `media.upload` lifted to the top
- * of the tree still grants `media` with it.
+ * Ids a set of permissions needs, the set included: the nodes above each one
+ * and the permissions each one depends on, with what those need in turn.
  */
-export function idPrefixes(id: string): string[] {
-  const parts = id.split(".");
-  return parts.map((_, position) =>
-    parts.slice(0, parts.length - position).join("."),
-  );
+function requiredIds(index: PermissionIndex, ids: string[]): Set<string> {
+  const required = new Set<string>();
+  const pending = [...ids];
+  for (let id = pending.shift(); id !== undefined; id = pending.shift()) {
+    if (required.has(id)) continue;
+    required.add(id);
+    pending.push(...ancestorIds(index, id), ...dependenciesOf(index, id));
+  }
+  return required;
 }
 
 /**
- * Grant a node's whole subtree with every id it sits under (a component
- * needs its page, a page its category), as the original roles form stored
- * it. Ids the user may not grant are skipped. Declared dependencies are shown
- * on the rows but not added: nothing enforces them, and the original form
- * never stored them either.
+ * Grant a node's whole subtree with everything it needs: every node above it
+ * (a component needs its page, a page its category) and the permissions it
+ * depends on (a table's edit needs its view, which loads the row). The tree
+ * nests by id, so the nodes above are the registered ids it sits under; the
+ * server completes a saved role the same way, with the unregistered rest (a
+ * lifted `media.upload` gets `media` there). Ids the user may not grant are
+ * skipped.
  */
 export function grantPermission(
   index: PermissionIndex,
@@ -316,25 +329,48 @@ export function grantPermission(
   canGrant: (permissionId: string) => boolean,
 ): PermissionGrant {
   const subtree = new Set(index.subtrees.get(id) ?? [id]);
-  const wanted = new Set([...subtree, ...idPrefixes(id)]);
+  const wanted = requiredIds(index, [...subtree]);
   const added = [...wanted].filter(
     (wantedId) => !selection.has(wantedId) && canGrant(wantedId),
   );
   return {
     selection: new Set([...selection, ...added]),
-    autoAdded: added.filter(
-      (addedId) => !subtree.has(addedId) && index.nodes.has(addedId),
-    ),
+    autoAdded: added.filter((addedId) => !subtree.has(addedId)),
   };
 }
 
 /**
- * Revoke a node's subtree. An id it sits under that is a node with children
- * goes too when none of its descendants is left once the subtree is gone: a
- * page is granted for its components. Same rule as the original roles form,
- * which judges every ancestor against that one state, before any ancestor
- * is dropped: an ancestor above one dropped this way still saw it selected,
- * and stays.
+ * The selected nodes that depend on a removed one, with their subtrees added
+ * to `removed`, until none is left: a table's edit goes with its view, which
+ * the server would otherwise put back when the role is saved. Returns the
+ * nodes taken this way.
+ */
+function removeDependents(
+  index: PermissionIndex,
+  selection: Set<string>,
+  removed: Set<string>,
+): string[] {
+  const dependents: string[] = [];
+  const dependsOnRemoved = (id: string) =>
+    !removed.has(id) &&
+    dependenciesOf(index, id).some((dependency) => removed.has(dependency));
+  for (let next = [...selection].find(dependsOnRemoved); next; ) {
+    dependents.push(next);
+    for (const descendant of index.subtrees.get(next) ?? [next]) {
+      removed.add(descendant);
+    }
+    next = [...selection].find(dependsOnRemoved);
+  }
+  return dependents;
+}
+
+/**
+ * Revoke a node's subtree, and what depends on it. A node above them goes
+ * too when none of its descendants is left once they are gone: a page is
+ * granted for its components. Same rule as the original roles form, which
+ * judges every ancestor against that one state, before any ancestor is
+ * dropped: an ancestor above one dropped this way still saw it selected, and
+ * stays.
  */
 export function revokePermission(
   index: PermissionIndex,
@@ -342,15 +378,16 @@ export function revokePermission(
   id: string,
 ): Set<string> {
   const removed = new Set(index.subtrees.get(id) ?? [id]);
+  const dependents = removeDependents(index, selection, removed);
   const remaining = new Set(
     [...selection].filter((kept) => !removed.has(kept)),
   );
-  const emptied = idPrefixes(id).filter((ancestor) => {
+  const judged = new Set(
+    [id, ...dependents].flatMap((revoked) => ancestorIds(index, revoked)),
+  );
+  const emptied = [...judged].filter((ancestor) => {
     const descendants = (index.subtrees.get(ancestor) ?? []).slice(1);
-    return (
-      descendants.length > 0 &&
-      !descendants.some((descendant) => remaining.has(descendant))
-    );
+    return !descendants.some((descendant) => remaining.has(descendant));
   });
   for (const ancestor of emptied) remaining.delete(ancestor);
   return remaining;
@@ -408,6 +445,48 @@ export function searchPermissions(
     }));
 }
 
+function warningOf(index: PermissionIndex, id: string): string | undefined {
+  return index.nodes.get(id)?.warning;
+}
+
+/**
+ * Distinct warnings of the selected permissions below a node, itself
+ * excluded: what a closed row hides once a parent ticked them.
+ */
+export function selectedWarningsBelow(
+  index: PermissionIndex,
+  id: string,
+  selection: Set<string>,
+): string[] {
+  const descendants = (index.subtrees.get(id) ?? []).slice(1);
+  const warnings = descendants
+    .filter((descendant) => selection.has(descendant))
+    .map((descendant) => warningOf(index, descendant))
+    .filter((warning): warning is string => Boolean(warning));
+  return [...new Set(warnings)];
+}
+
+/**
+ * The selected permissions that carry a warning, in tree order, each named
+ * under its area ("Members › Edit") so a summary can list them.
+ */
+export function selectedWarningLabels(
+  index: PermissionIndex,
+  areas: PermissionArea[],
+  selection: Set<string>,
+  translate: (label: string) => string,
+): string[] {
+  const areaIds = new Set(areas.map((area) => area.node.id));
+  return index.allIds
+    .filter((id) => selection.has(id) && warningOf(index, id))
+    .map((id) => {
+      const areaId = areaIdOf(index, areaIds, id);
+      const labels = [index.nodes.get(id)?.label ?? id];
+      if (areaId !== id) labels.unshift(index.nodes.get(areaId)?.label ?? "");
+      return joinPath(labels.map((label) => translate(label)));
+    });
+}
+
 /** Joins path labels the way the editor shows them. */
 export function joinPath(labels: string[]): string {
   return labels.join(PATH_SEPARATOR);

package/frontend-vue/layers/dms-layout/app/build/components/pages/settings/roles/role-types.ts

@@ -6,6 +6,8 @@ export interface RolePermissionNode {
   description?: string;
   /** Permissions this one needs; granting it grants them too. */
   dependencies?: string[];
+  /** What granting it really allows, beyond its label (an i18n key). */
+  warning?: string;
   children?: RolePermissionNode[];
 }
 

package/frontend-vue/layers/dms-layout/app/build/components/pages/settings/security/SecurityDialogFrame.vue

@@ -3,6 +3,8 @@ export type SecurityDialogTone = "primary" | "error" | "warning";
 </script>
 
 <script setup lang="ts">
+import DmsModalEscHint from "#dms-ui/app/build/components/modal/ModalEscHint.vue";
+
 interface SecurityDialogFrameProps {
   title: string;
   icon: string;
@@ -51,12 +53,10 @@ const { t } = useI18n();
     <template #footer>
       <!-- Phones: no Esc hint (no keyboard) and the buttons may wrap. -->
       <div class="flex w-full flex-wrap items-center justify-end gap-2">
-        <span
-          class="text-dimmed me-auto flex items-center gap-1.5 text-xs max-sm:hidden"
-        >
-          <UKbd value="Esc" size="sm" />
-          {{ t("page.settings.security.esc_to_cancel") }}
-        </span>
+        <DmsModalEscHint
+          class="max-sm:hidden"
+          :label="t('page.settings.security.esc_to_cancel')"
+        />
         <UButton
           color="neutral"
           variant="outline"

package/frontend-vue/layers/dms-layout/app/build/components/pages/settings/security/SecurityEmail.vue

@@ -21,6 +21,8 @@ const CODE_ERRORS = {
   "error.invalid_token": "code",
   "error.token_expired": "code",
 } as const;
+// Too many wrong codes: the change is dropped and a new code must be asked.
+const CODE_BURNT = "error.email_change_too_many_attempts";
 const FORGOT_PASSWORD_PATH = "/auth/forgot";
 const INVALID_CURRENT_PASSWORD = "error.invalid_current_password";
 const EMAIL_ALREADY_USED = "error.email_already_used";
@@ -39,7 +41,7 @@ const toast = useToast();
 const { $authFetch } = useAuthFetch();
 const { refresh: refreshSession } = useCurrentUser();
 const { overview, refresh } = useSecurityOverview();
-const { errorMessage } = useSecurityFormat();
+const { errorMessage, errorCode } = useSecurityFormat();
 const { processApiMessage } = useTranslation();
 
 const isEditing = ref(false);
@@ -218,6 +220,10 @@ async function confirmCode(code: string): Promise<void> {
       title: errorMessage(error, "page.settings.security.email.error"),
       color: "error",
     });
+    if (errorCode(error) === CODE_BURNT) {
+      isCodeOpen.value = false;
+      await refresh();
+    }
   } finally {
     isConfirming.value = false;
   }

package/frontend-vue/layers/dms-layout/app/build/components/pages/settings/security/SecuritySessions.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { MONO_CHIP_CLASS } from "#dms-ui/app/build/utils/monoChip";
+import DmsModalEscHint from "#dms-ui/app/build/components/modal/ModalEscHint.vue";
 import { useSecurityFormat } from "../../../../composables/settings/security/useSecurityFormat";
 import {
   SECURITY_ENDPOINT,
@@ -340,10 +341,10 @@ onMounted(loadSessions);
       </template>
       <template #footer>
         <div class="flex w-full items-center justify-end gap-2">
-          <span class="text-dimmed me-auto flex items-center gap-1.5 text-xs">
-            <UKbd value="Esc" size="sm" />
-            {{ t("page.settings.security.esc_to_cancel") }}
-          </span>
+          <DmsModalEscHint
+            class="max-sm:hidden"
+            :label="t('page.settings.security.esc_to_cancel')"
+          />
           <UButton
             color="neutral"
             variant="outline"

package/frontend-vue/layers/dms-layout/app/build/components/pages/settings/security/SecurityStatus.vue

@@ -14,7 +14,9 @@ const METHODS_LABEL_KEYS: Record<string, string> = {
 const SKELETON_COUNT = 4;
 
 const { t } = useI18n();
-const { overview, attention, isUnavailable, refresh } = useSecurityOverview();
+const { overview, attention, attentionToneOf, isUnavailable, refresh } =
+  useSecurityOverview();
+const BACKUP_ATTENTION = ["backup_codes_low", "backup_codes_unsaved"] as const;
 const { formatDate, daysSince } = useSecurityFormat();
 
 function twoFactorItem(data: SecurityOverview): StatGroupItem {
@@ -53,12 +55,11 @@ function backupDetail(
 function backupItem({ twoFactor }: SecurityOverview): StatGroupItem {
   const isOn = twoFactor.methods.length > 0;
   const isUnsaved = attention.value.includes("backup_codes_unsaved");
-  const isLow = attention.value.includes("backup_codes_low");
   return {
     id: "backup-codes",
     to: "#backup-codes",
     icon: "i-ph-key",
-    tone: isOn && (isUnsaved || isLow) ? "warning" : "muted",
+    tone: (isOn && attentionToneOf([...BACKUP_ATTENTION])) || "muted",
     eyebrow: t("page.settings.security.status.backup_codes"),
     value: isOn
       ? t("page.settings.security.codes_left", {

package/frontend-vue/layers/dms-layout/app/build/components/pages/settings/security/SecurityTwoFactor.vue

@@ -67,7 +67,7 @@ const METHODS: MethodConfig[] = [
 const { t } = useI18n();
 const toast = useToast();
 const { $authFetch } = useAuthFetch();
-const { overview, attention, refresh } = useSecurityOverview();
+const { overview, attention, attentionToneOf, refresh } = useSecurityOverview();
 const { formatDate, errorMessage } = useSecurityFormat();
 
 const isProcessing = ref(false);
@@ -81,6 +81,8 @@ const {
   reveal: revealCodes,
 } = useRevealedBackupCodes(computed(() => user.value?._id));
 const isRemoveOpen = ref(false);
+const isEmailSetupOpen = ref(false);
+const emailSetupCodeError = ref<string>();
 const totpCodeError = ref<string>();
 const removeCodeError = ref<string>();
 const regenerateCodeError = ref<string>();
@@ -112,6 +114,10 @@ const isUnsaved = computed(() =>
   attention.value.includes("backup_codes_unsaved"),
 );
 const isLow = computed(() => attention.value.includes("backup_codes_low"));
+// The backup codes row and its pill, in the tone the server gives them.
+const backupTone = computed(() =>
+  attentionToneOf(["backup_codes_low", "backup_codes_unsaved"]),
+);
 
 const addItems = computed<DropdownMenuItem[]>(() =>
   addableMethods.value.map((method) => ({
@@ -256,22 +262,38 @@ async function confirmTotp(code: string): Promise<void> {
   );
 }
 
-async function enableEmail(currentPassword?: string): Promise<void> {
+// Like the app, email codes turn on only once a code proves they arrive: a
+// mistyped address would otherwise lock the user out at the next sign-in.
+async function startEmail(currentPassword?: string): Promise<void> {
+  await run(
+    async () => {
+      await $authFetch(`${TWO_FACTOR_URL}/enable-email`, {
+        method: "POST",
+        body: { currentPassword },
+      });
+      leavePasswordDialog(() => (isEmailSetupOpen.value = true));
+    },
+    "page.settings.two_factor.setup_error",
+    passwordRefusal,
+  );
+}
+
+async function confirmEmail(code: string): Promise<void> {
   await run(
     async () => {
       const response = await $authFetch<MethodEnabledResponse>(
-        `${TWO_FACTOR_URL}/enable-email`,
-        { method: "POST", body: { currentPassword } },
+        `${TWO_FACTOR_URL}/confirm-email`,
+        { method: "POST", body: { code } },
       );
-      leavePasswordDialog();
+      isEmailSetupOpen.value = false;
       toast.add({
         title: t("page.settings.two_factor.enable_success"),
         color: "success",
       });
       showCodes(response.backupCodes);
     },
-    "page.settings.two_factor.setup_error",
-    passwordRefusal,
+    INVALID_CODE_KEY,
+    codeRefusal(emailSetupCodeError),
   );
 }
 
@@ -280,7 +302,7 @@ const ADD_HANDLERS: Record<
   (currentPassword?: string) => Promise<void>
 > = {
   totp: startTotp,
-  email: enableEmail,
+  email: startEmail,
 };
 
 // Adding a method asks for the account password first, so a borrowed
@@ -440,22 +462,18 @@ async function markSaved(): Promise<void> {
 
       <DmsFieldRow v-if="isOn" id="backup-codes" class="scroll-mt-6">
         <template #label>
-          <DmsListRow
-            bare
-            icon="i-ph-key"
-            :tone="isUnsaved || isLow ? 'warning' : 'muted'"
-          >
+          <DmsListRow bare icon="i-ph-key" :tone="backupTone ?? 'muted'">
             {{ t("page.settings.security.backup.title") }}
             <UBadge
-              v-if="isUnsaved || isLow"
-              color="warning"
+              v-if="backupTone"
+              :color="backupTone"
               variant="subtle"
               size="sm"
               icon="i-ph-warning"
               :label="
-                isUnsaved
-                  ? t('page.settings.security.backup.not_saved')
-                  : t('page.settings.security.backup.running_low')
+                isLow
+                  ? t('page.settings.security.backup.running_low')
+                  : t('page.settings.security.backup.not_saved')
               "
             />
             <template #meta>
@@ -554,6 +572,24 @@ async function markSaved(): Promise<void> {
       :loading="isProcessing"
       @confirm="confirmTotp"
     />
+    <SecurityCodeModal
+      v-model:open="isEmailSetupOpen"
+      v-model:error="emailSetupCodeError"
+      :title="t('page.settings.two_factor.email_enable')"
+      :description="
+        t('page.settings.security.two_factor.email_setup_description', {
+          email,
+        })
+      "
+      icon="i-ph-envelope-simple"
+      tone="primary"
+      :code-label="t('page.settings.security.two_factor.code_label_email')"
+      :confirm-label="t('page.settings.security.totp.submit')"
+      :loading="isProcessing"
+      can-send-email-code
+      @confirm="confirmEmail"
+      @send-code="sendEmailCode"
+    />
     <SecurityBackupCodesModal
       v-model:open="isCodesOpen"
       :codes="codes"

package/frontend-vue/layers/dms-layout/app/build/components/pages/settings/shell/SettingsNav.vue

@@ -2,6 +2,7 @@
 import { tv } from "tailwind-variants";
 import { usePermissionPreview } from "#dms-core/app/build/composables/auth/usePermissionPreview";
 import { useNavBadges } from "#dms-ui/app/build/composables/navigation/useNavBadges";
+import { navBadgeClass } from "#dms-ui/app/build/utils/navBadge";
 import DmsSearchInput from "#dms-ui/app/build/components/form/SearchInput.vue";
 import {
   findActiveSettingsPath,
@@ -27,8 +28,7 @@ const theme = tv({
     item: "flex h-8 shrink-0 items-center gap-2.5 rounded-md px-2.5 text-[13.5px] font-medium whitespace-nowrap text-muted transition-colors hover:bg-elevated hover:text-highlighted max-lg:border max-lg:border-default",
     itemIcon: "size-[17px] shrink-0",
     itemLabel: "min-w-0 truncate",
-    trailBadge:
-      "ms-auto hidden rounded-full bg-elevated px-1.5 font-mono text-[10.5px] font-semibold tabular-nums text-muted lg:inline",
+    trailBadge: "ms-auto hidden lg:inline",
     trailDot: "ms-auto hidden size-[7px] shrink-0 rounded-full lg:block",
     empty: "hidden px-2.5 text-[12.5px] text-muted lg:block",
     previewLock: "ms-auto size-3.5 shrink-0",
@@ -116,10 +116,12 @@ onMounted(revealActiveItem);
 watch(() => route.path, revealActiveItem, { flush: "post" });
 
 // The page's badge, counted by the server when the menu loads (`navBadge`)
-// or declared, then kept fresh by the page that shows the count.
-const { badges: navBadges } = useNavBadges();
-const badgeOf = (page: SettingsNavPage): string | undefined =>
-  navBadges.value[page.fullId] ?? page.badge;
+// or declared, then kept fresh by the page that shows the count; drawn in
+// its tone, as a status pill is.
+const { navBadgeOf } = useNavBadges();
+const badgeOf = (page: SettingsNavPage) => navBadgeOf(page);
+const badgeClass = (page: SettingsNavPage): string =>
+  navBadgeClass(badgeOf(page)?.tone);
 
 // "Preview as role": a settings page the role could not open stays listed,
 // locked, so the preview shows what the role loses; one it opens without all
@@ -207,8 +209,11 @@ const previewStateLabel = (
           role="img"
           :aria-label="previewStateLabel(preview.entryState(page.fullId))"
         />
-        <span v-else-if="badgeOf(page)" :class="ui.trailBadge()">
-          {{ badgeOf(page) }}
+        <span
+          v-else-if="badgeOf(page)"
+          :class="ui.trailBadge({ class: badgeClass(page) })"
+        >
+          {{ badgeOf(page)?.label }}
         </span>
         <span
           v-else-if="page.status && page.status !== 'neutral'"

package/frontend-vue/layers/dms-layout/app/build/composables/command-palette/assistantGroups.ts

@@ -0,0 +1,143 @@
+import type { CommandPaletteGroup, CommandPaletteItem } from "@nuxt/ui";
+
+/** @internal */
+export const ASSISTANT_ASK_GROUP_ID = "dms-assistant-ask";
+/** @internal */
+export const ASSISTANT_PROMPT_GROUP_ID = "dms-assistant-prompt";
+/** @internal */
+export const ASSISTANT_SUGGESTIONS_GROUP_ID = "dms-assistant-suggestions";
+/** @internal The hint shown on the item that Tab also reaches. */
+export const ASSISTANT_MODE_KEY = "Tab";
+
+// The assistant's items take the violet accent instead of the primary one, on
+// the row and on its icon well.
+const ASSISTANT_ITEM_CLASS = [
+  "data-highlighted:before:bg-(--dms-assistant-tint)",
+  "[&_[data-slot=itemLeadingIcon]]:border-(--dms-assistant-line)",
+  "[&_[data-slot=itemLeadingIcon]]:bg-(--dms-assistant-tint)",
+  "[&_[data-slot=itemLeadingIcon]]:text-secondary",
+].join(" ");
+
+/** @internal A suggestion with its label and prompt resolved for display. */
+export interface ResolvedAssistantSuggestion {
+  label: string;
+  prompt: string;
+  icon: string;
+}
+
+/** @internal What the search-mode "Ask the assistant" group needs. */
+export interface AssistantAskGroupOptions {
+  /** Group header: the assistant's resolved label. */
+  label: string;
+  icon: string;
+  askLabel: (query: string) => string;
+  onAsk: (query: string) => void;
+}
+
+/** @internal What the assistant-mode groups need. */
+export interface AssistantModeGroupsOptions {
+  icon: string;
+  promptLabel: string;
+  suggestionsLabel: string;
+  sendLabel: (prompt: string) => string;
+  suggestions: ResolvedAssistantSuggestion[];
+  onSubmit: (prompt: string) => void;
+}
+
+function assistantItem(
+  label: string,
+  icon: string,
+  onChoose: () => void,
+): CommandPaletteItem {
+  return {
+    label,
+    icon,
+    class: ASSISTANT_ITEM_CLASS,
+    // Cancelling the selection keeps the palette open: `UDashboardSearch`
+    // closes on every selection that reaches its model.
+    onSelect: (event: Event) => {
+      event.preventDefault();
+      onChoose();
+    },
+  };
+}
+
+/**
+ * Appends the "Ask the assistant “query”" group after the search groups once
+ * the query is non-empty. The group ignores the palette's filter, so the item
+ * stays listed whatever matched, and is the only, highlighted item when
+ * nothing did: Enter then asks.
+ *
+ * @internal
+ */
+export function appendAssistantAskGroup(
+  groups: CommandPaletteGroup[],
+  query: string,
+  options: AssistantAskGroupOptions,
+): CommandPaletteGroup[] {
+  if (!query) return groups;
+
+  const item = assistantItem(options.askLabel(query), options.icon, () =>
+    options.onAsk(query),
+  );
+  const askGroup: CommandPaletteGroup = {
+    id: ASSISTANT_ASK_GROUP_ID,
+    label: options.label,
+    ignoreFilter: true,
+    items: [{ ...item, kbds: [ASSISTANT_MODE_KEY] }],
+  };
+
+  return [...groups, askGroup];
+}
+
+function promptGroup(
+  prompt: string,
+  options: AssistantModeGroupsOptions,
+): CommandPaletteGroup[] {
+  if (!prompt) return [];
+
+  const item = assistantItem(options.sendLabel(prompt), options.icon, () =>
+    options.onSubmit(prompt),
+  );
+  return [
+    {
+      id: ASSISTANT_PROMPT_GROUP_ID,
+      label: options.promptLabel,
+      ignoreFilter: true,
+      items: [item],
+    },
+  ];
+}
+
+function suggestionsGroup(
+  options: AssistantModeGroupsOptions,
+): CommandPaletteGroup[] {
+  if (!options.suggestions.length) return [];
+
+  return [
+    {
+      id: ASSISTANT_SUGGESTIONS_GROUP_ID,
+      label: options.suggestionsLabel,
+      ignoreFilter: true,
+      items: options.suggestions.map((suggestion) =>
+        assistantItem(suggestion.label, suggestion.icon, () =>
+          options.onSubmit(suggestion.prompt),
+        ),
+      ),
+    },
+  ];
+}
+
+/**
+ * The groups of assistant mode: the typed prompt first, so Enter on the
+ * highlighted first item sends it, then the suggestions, which stay listed
+ * while the user types and are reached with the arrow keys.
+ *
+ * @internal
+ */
+export function buildAssistantModeGroups(
+  prompt: string,
+  options: AssistantModeGroupsOptions,
+): CommandPaletteGroup[] {
+  return [...promptGroup(prompt, options), ...suggestionsGroup(options)];
+}