@tai42/studio-sdk 30.0.0 → 31.0.0

package/src/components/explorer-body.tsx

@@ -122,6 +122,7 @@ export interface ExplorerBodyProps<T> {
   readonly columns: readonly ExplorerColumn[];
   readonly pageEntries: readonly ExplorerEntry<T>[];
   readonly getItemKey: (item: T) => string;
+  readonly selectedItemKey: string | undefined;
   readonly renderRow: (item: T) => ReactNode;
   readonly renderCard: (item: T) => ReactNode;
   readonly openProps: (item: T) => OpenTargetProps;
@@ -134,7 +135,15 @@ export interface ExplorerBodyProps<T> {
 function CardEntry<T>(
   props: ExplorerBodyProps<T> & { readonly entry: ExplorerEntry<T> },
 ): ReactNode {
-  const { entry, onNavigate, renderFolderActions, getItemKey, renderCard, openProps } = props;
+  const {
+    entry,
+    onNavigate,
+    renderFolderActions,
+    getItemKey,
+    selectedItemKey,
+    renderCard,
+    openProps,
+  } = props;
   if (entry.kind === 'folder') {
     return (
       <div role="listitem" key={`folder:${entry.folder.id}`}>
@@ -148,8 +157,14 @@ function CardEntry<T>(
       </div>
     );
   }
+  const key = getItemKey(entry.item);
   return (
-    <div role="listitem" key={`item:${getItemKey(entry.item)}`} {...openProps(entry.item)}>
+    <div
+      role="listitem"
+      key={`item:${key}`}
+      data-selected={key === selectedItemKey ? 'true' : undefined}
+      {...openProps(entry.item)}
+    >
       {renderCard(entry.item)}
     </div>
   );
@@ -159,8 +174,16 @@ function CardEntry<T>(
 function RowEntry<T>(
   props: ExplorerBodyProps<T> & { readonly entry: ExplorerEntry<T> },
 ): ReactNode {
-  const { entry, columns, onNavigate, renderFolderActions, getItemKey, renderRow, openProps } =
-    props;
+  const {
+    entry,
+    columns,
+    onNavigate,
+    renderFolderActions,
+    getItemKey,
+    selectedItemKey,
+    renderRow,
+    openProps,
+  } = props;
   if (entry.kind === 'folder') {
     return (
       <TR key={`folder:${entry.folder.id}`}>
@@ -174,8 +197,9 @@ function RowEntry<T>(
       </TR>
     );
   }
+  const key = getItemKey(entry.item);
   return (
-    <TR key={`item:${getItemKey(entry.item)}`} {...openProps(entry.item)}>
+    <TR key={`item:${key}`} selected={key === selectedItemKey} {...openProps(entry.item)}>
       {renderRow(entry.item)}
     </TR>
   );

package/src/components/explorer-view.tsx

@@ -14,6 +14,7 @@
  */
 import { type ReactNode, useEffect, useState } from 'react';
 
+import { matchesSearch } from '../search-match';
 import { ExplorerBody, type ExplorerEntry } from './explorer-body';
 import { usePageSize } from './explorer-page-size';
 import { TagFilterRow } from './explorer-tag-filter';
@@ -50,12 +51,13 @@ export interface ExplorerTags<T> {
   readonly maxVisibleTags?: number;
 }
 
-/** Controlled free-text search. `matches` owns the item shape and casing; it is
- *  called only with a non-empty, already-trimmed query. */
+/** Controlled free-text search. The caller names the texts an item is searched by;
+ *  the explorer matches them with the SDK's one search rule (`matchesSearch`). */
 export interface ExplorerSearch<T> {
   readonly value: string;
   readonly onChange: (value: string) => void;
-  readonly matches: (item: T, query: string) => boolean;
+  /** The texts the reader sees for `item` (its name, display name, description…). */
+  readonly texts: (item: T) => readonly string[];
   /** The input's accessible name. */
   readonly label: string;
   readonly placeholder?: string;
@@ -69,10 +71,11 @@ export interface ExplorerEmptyState {
 
 /** The folder-aware empty-state ladder — every label caller-supplied. */
 export interface ExplorerEmptyStates {
-  /** No items and no folders exist at all. */
+  /** No item exists at all. Folders are places for items, so with no item there is
+   *  nothing to browse: this state shows whatever folders exist. */
   readonly empty: ExplorerEmptyState;
-  /** The current folder holds nothing — no items, no subfolders — yet the
-   *  entity set is not globally empty. */
+  /** The current folder holds nothing — no items, no subfolders — while items
+   *  exist elsewhere. */
   readonly emptyFolder: ExplorerEmptyState;
   /** The current folder has items but the active tag/search filter excludes
    *  every one, and it has no subfolders to show. */
@@ -86,6 +89,8 @@ export interface ExplorerViewProps<T> {
   readonly getFolderId: (item: T) => string | null;
 
   readonly folders: readonly Folder[];
+  /** The open folder. One that is not among `folders` (deleted, or no longer drawn
+   *  on this screen) shows as the root, and the explorer asks `onNavigate(null)`. */
   readonly currentFolderId: string | null;
   readonly onNavigate: (folderId: string | null) => void;
   readonly rootLabel: string;
@@ -107,6 +112,12 @@ export interface ExplorerViewProps<T> {
    *  originating on a nested control is left to that control. */
   readonly onOpenItem?: (item: T) => void;
 
+  /** The key (as `getItemKey` gives it) of the item the screen has selected. Its
+   *  row/card carries `data-selected="true"`, which the stylesheet draws as the one
+   *  selected look every explorer shares. The screen still marks the item's name
+   *  link `aria-current`, which is what assistive tech reads. */
+  readonly selectedItemKey?: string;
+
   readonly tags?: ExplorerTags<T>;
   readonly search?: ExplorerSearch<T>;
 
@@ -183,19 +194,35 @@ function filterInFolder<T>(
   tags: ExplorerTags<T> | undefined,
   selectedSet: ReadonlySet<string> | undefined,
   search: ExplorerSearch<T> | undefined,
-  query: string,
 ): readonly T[] {
   return inFolder.filter((item) => {
     if (tags !== undefined && selectedSet !== undefined && selectedSet.size > 0) {
       if (!matchesSelectedTags(tags.getTags(item), selectedSet)) return false;
     }
-    if (search !== undefined && query !== '') {
-      if (!search.matches(item, query)) return false;
-    }
+    if (search !== undefined && !matchesSearch(search.value, ...search.texts(item))) return false;
     return true;
   });
 }
 
+/**
+ * The folder the explorer shows. The open folder can stop being drawn while the user
+ * is inside it (deleted, or its last item on this screen filed elsewhere); the
+ * explorer then shows the root, so the breadcrumb and the body agree, and hands the
+ * root back to the screen's navigation state. One linear pass over the drawn folders.
+ */
+function useShownFolderId(
+  currentFolderId: string | null,
+  folders: readonly Folder[],
+  onNavigate: (folderId: string | null) => void,
+): string | null {
+  const currentDrawn =
+    currentFolderId === null || folders.some((folder) => folder.id === currentFolderId);
+  useEffect(() => {
+    if (!currentDrawn) onNavigate(null);
+  }, [currentDrawn, onNavigate]);
+  return currentDrawn ? currentFolderId : null;
+}
+
 export function ExplorerView<T>({
   items,
   getItemKey,
@@ -210,6 +237,7 @@ export function ExplorerView<T>({
   renderRow,
   renderCard,
   onOpenItem,
+  selectedItemKey,
   tags,
   search,
   renderFolderActions,
@@ -222,25 +250,27 @@ export function ExplorerView<T>({
   const query = search ? search.value.trim() : '';
   const tagKey = tags !== undefined ? tags.selected.join('\0') : '';
 
+  const folderId = useShownFolderId(currentFolderId, folders, onNavigate);
+
   // A new filter view starts on its first page; the clamp below then handles a
   // set that shrinks under the current page without a reset.
   useEffect(() => {
     setPage(1);
-  }, [currentFolderId, query, tagKey, pageSize]);
+  }, [folderId, query, tagKey, pageSize]);
 
   if (viewSurface === '') throw new Error('ExplorerView requires a non-empty viewSurface key.');
   if (columns.length === 0) throw new Error('ExplorerView requires at least one column.');
 
-  // Nothing anywhere: no items and no folders. A bare empty state, no controls.
-  if (items.length === 0 && folders.length === 0) {
+  // No item anywhere: a bare empty state, no controls — whatever folders exist.
+  if (items.length === 0) {
     return <EmptyState {...emptyStates.empty} />;
   }
 
-  const subfolders = childFolders(folders, currentFolderId);
-  const inFolder = items.filter((item) => getFolderId(item) === currentFolderId);
+  const subfolders = childFolders(folders, folderId);
+  const inFolder = items.filter((item) => getFolderId(item) === folderId);
 
   const selectedSet = tags !== undefined ? new Set(tags.selected) : undefined;
-  const filtered = filterInFolder(inFolder, tags, selectedSet, search, query);
+  const filtered = filterInFolder(inFolder, tags, selectedSet, search);
 
   const vocabulary =
     tags !== undefined
@@ -292,7 +322,7 @@ export function ExplorerView<T>({
 
       <FolderBreadcrumb
         folders={folders}
-        currentFolderId={currentFolderId}
+        currentFolderId={folderId}
         onNavigate={onNavigate}
         rootLabel={rootLabel}
       />
@@ -316,6 +346,7 @@ export function ExplorerView<T>({
         columns={columns}
         pageEntries={pageEntries}
         getItemKey={getItemKey}
+        selectedItemKey={selectedItemKey}
         renderRow={renderRow}
         renderCard={renderCard}
         openProps={openProps}

package/src/components/extension-combo-builder.tsx

@@ -6,10 +6,10 @@
  * preset/tool extensions wire carries. It is PRESENTATIONAL: the caller fetches the
  * extension catalog (`available`) and owns the `value`; this component fetches nothing.
  *
- * The surface has two parts:
- *  - the current combos, each an ordered row of name `Badge`s with a per-combo Edit
- *    (pull it back into the draft) and Remove;
- *  - a combo UNDER CONSTRUCTION, authored with the shared `ExtensionPicker` (grouped
+ * The surface has two sections:
+ *  - the current combos (`CommittedComboList`), each an ordered row of name `Badge`s
+ *    with a per-combo Edit (pull it back into the draft) and Remove;
+ *  - a combo UNDER CONSTRUCTION (`ComboDraftEditor`), authored with the shared `ExtensionPicker` (grouped
  *    by kind, single-select for the non-stackable `backend` kind). An extension whose
  *    catalog entry declares a `config_schema` is authored as `{ name, config }` through
  *    its settings form; any other name stays a bare element, or the edited combo's own
@@ -38,15 +38,15 @@
 import type { Extension, PresetExtensionElement } from '@tai42/api-client';
 import { type ReactNode, useEffect, useState } from 'react';
 
-import { comboElementNames, extensionElementName } from '../extension-combos';
-import type { JsonSchema } from '../schema-form/types';
 import {
-  ComboDraftEditor,
-  CommittedComboList,
-  type ConfigurableExtension,
+  comboElementNames,
+  extensionElementName,
   sameNames,
   unknownNames,
-} from './extension-combo-parts';
+} from '../extension-combos';
+import type { JsonSchema } from '../schema-form/types';
+import { ComboDraftEditor, type ConfigurableExtension } from './combo-draft-editor';
+import { CommittedComboList } from './committed-combo-list';
 import type { ExtensionConfigChange } from './extension-config-editor';
 
 type Seeds = Readonly<Record<string, Record<string, unknown> | undefined>>;

package/src/components/extension-config-editor.tsx

@@ -15,7 +15,7 @@
 import { type ReactNode, useEffect, useRef, useState } from 'react';
 
 import { collectEnvRefs } from '../env-markers';
-import { SchemaEditor, type SchemaEditorChange } from '../schema-editor';
+import { SchemaEditor, type SchemaEditorDraft } from '../schema-editor';
 import { defaultValueForSchema } from '../schema-form/default-value';
 import { JSON_SCHEMA_META_URI } from '../schema-form/json-schema-meta';
 import { SchemaForm } from '../schema-form/SchemaForm';
@@ -40,7 +40,7 @@ export interface ExtensionConfigEditorProps {
   readonly idPrefix: string;
 }
 
-type SchemaSettings = Readonly<Record<string, SchemaEditorChange>>;
+type SchemaSettings = Readonly<Record<string, SchemaEditorDraft>>;
 
 const isMetaRef = (node: JsonSchema): boolean => node.$ref === JSON_SCHEMA_META_URI;
 
@@ -240,7 +240,7 @@ function RenderableSettings({
     return seeded;
   });
   const [schemaSettings, setSchemaSettings] = useState<SchemaSettings>(() => {
-    const seeded: Record<string, SchemaEditorChange> = {};
+    const seeded: Record<string, SchemaEditorDraft> = {};
     for (const key of schemaKeys) {
       const stored = value?.[key];
       seeded[key] = { schema: isRecord(stored) ? stored : null, valid: true };

package/src/components/field.tsx

@@ -13,6 +13,8 @@ import { XCircleIcon } from './icons';
 
 interface FieldContextValue {
   readonly controlId: string | undefined;
+  /** The label element's id, published only while `controlId` is (a non-group Field). */
+  readonly labelId: string | undefined;
   readonly describedBy: string | undefined;
   readonly invalid: boolean;
 }
@@ -48,6 +50,15 @@ export function useFieldControl(): FieldControlProps {
   };
 }
 
+/**
+ * The id of the enclosing Field's label while it names one control, else `undefined`.
+ * A control whose popup holds a second labelled surface (a listbox, a dialog) points
+ * that surface's `aria-labelledby` at it, so the popup carries the field's name.
+ */
+export function useFieldLabelId(): string | undefined {
+  return useContext(FieldContext)?.labelId;
+}
+
 export interface FieldProps {
   readonly label: string;
   readonly description?: string;
@@ -133,8 +144,13 @@ export function Field({
   // if the group Field withheld it too, a group Field carrying an `error` would
   // expose its invalid state NOWHERE in the accessibility tree.
   const value: FieldContextValue = group
-    ? { controlId: undefined, describedBy: undefined, invalid: error !== undefined }
-    : { controlId, describedBy, invalid: error !== undefined };
+    ? {
+        controlId: undefined,
+        labelId: undefined,
+        describedBy: undefined,
+        invalid: error !== undefined,
+      }
+    : { controlId, labelId, describedBy, invalid: error !== undefined };
 
   // The label keeps its `htmlFor`/`id` wiring either way — `hideLabel` only drops
   // its PAINT, so the accessible name it gives the control is unchanged.

package/src/components/folder-actions.tsx

@@ -0,0 +1,341 @@
+/**
+ * The folder WRITES of the tool-organization tree — create, rename, move and delete —
+ * shared by every screen that shows the tree, so each offers the same actions over
+ * the same client doors (`createFolder` / `renameFolder` / `moveFolder` /
+ * `deleteFolder`).
+ *
+ * The SDK owns no query cache, so every write takes the screen's
+ * `onFoldersChanged`: the screen re-reads the overlay under its own key, and the
+ * write resolves only after that refresh, so the tree on screen is never stale when
+ * a dialog closes. Each dialog owns its own pending and error state, so a failure on
+ * one folder never bleeds onto another, and every failure is shown in its dialog.
+ *
+ * Move offers every folder EXCEPT the folder itself and its descendants (a folder
+ * cannot become its own ancestor), with inline create. Delete asks first and lets the
+ * server enforce that only an empty folder can go; a refusal is shown in the dialog.
+ *
+ * Each action is offered only where the caller may make that write
+ * ({@link useToolMetaWriteAccess}): its own route, and the tool_meta store not known
+ * off. A not-configured refusal is reported, so every screen withdraws its overlay
+ * writes; the open dialog stays to show the server's off note.
+ */
+import { type ReactNode, useCallback, useState } from 'react';
+
+import { errorMessage } from '../errors';
+import { FeatureDisabled, featureDisabledMessage, isFeatureDisabled } from '../feature-disabled';
+import { useApi } from '../hooks/useApi';
+import { ConfirmDialog } from './confirm-dialog';
+import { Dialog } from './dialog';
+import { Field } from './field';
+import { type Folder, FolderPicker } from './folder-nav';
+import { TextInput } from './inputs';
+import { Button, Spinner } from './primitives';
+import {
+  ToolMetaWriteError,
+  useReportToolMetaRefusal,
+  useToolMetaWriteAccess,
+} from './tool-meta-access';
+
+/** Re-read the folder tree after a write; the write resolves once this settles. */
+export type FoldersChanged = () => Promise<void>;
+
+/** Create a folder under `parentId` and resolve with its id. */
+export type CreateFolder = (name: string, parentId: string | null) => Promise<string>;
+
+/**
+ * Create a folder through the folder door and refresh the screen's tree, resolving
+ * with the new folder's id — the shape {@link FolderPicker}'s `onCreateFolder`
+ * takes. `undefined` when the caller may not create a folder, so the picker offers
+ * no create. A rejection propagates to the picker, which shows it; a not-configured
+ * refusal is also reported, withdrawing every overlay write.
+ */
+export function useCreateFolder(onFoldersChanged: FoldersChanged): CreateFolder | undefined {
+  const api = useApi();
+  const { createFolder: allowed } = useToolMetaWriteAccess();
+  const reportRefusal = useReportToolMetaRefusal();
+  const create = useCallback(
+    async (name: string, parentId: string | null): Promise<string> => {
+      let created: { readonly id: string };
+      try {
+        created = await api.createFolder(name, parentId);
+      } catch (error: unknown) {
+        reportRefusal(error);
+        throw error;
+      }
+      await onFoldersChanged();
+      return created.id;
+    },
+    [api, onFoldersChanged, reportRefusal],
+  );
+  return allowed ? create : undefined;
+}
+
+/** One write's pending + error state: `run` clears the last error, awaits the write
+ *  and keeps a rejection for the dialog to show, reporting a not-configured one. */
+function useFolderWrite(write: () => Promise<void>): {
+  readonly run: () => void;
+  readonly pending: boolean;
+  readonly error: unknown;
+} {
+  const reportRefusal = useReportToolMetaRefusal();
+  const [pending, setPending] = useState(false);
+  const [error, setError] = useState<unknown>(null);
+  const run = (): void => {
+    if (pending) return;
+    setPending(true);
+    setError(null);
+    write().then(
+      () => {
+        setPending(false);
+      },
+      (failure: unknown) => {
+        setError(failure);
+        setPending(false);
+        reportRefusal(failure);
+      },
+    );
+  };
+  return { run, pending, error };
+}
+
+/** The ids of `folder` and every folder nested beneath it — linear in the folder
+ *  count and safe on a cyclic parent chain. */
+function subtreeIds(folder: Folder, folders: readonly Folder[]): Set<string> {
+  const childrenByParent = new Map<string, string[]>();
+  for (const candidate of folders) {
+    if (candidate.parentId === null) continue;
+    const siblings = childrenByParent.get(candidate.parentId) ?? [];
+    siblings.push(candidate.id);
+    childrenByParent.set(candidate.parentId, siblings);
+  }
+  const ids = new Set<string>([folder.id]);
+  const queue = [folder.id];
+  for (let next = queue.pop(); next !== undefined; next = queue.pop()) {
+    for (const childId of childrenByParent.get(next) ?? []) {
+      if (ids.has(childId)) continue;
+      ids.add(childId);
+      queue.push(childId);
+    }
+  }
+  return ids;
+}
+
+interface FolderDialogProps {
+  readonly folder: Folder;
+  readonly onFoldersChanged: FoldersChanged;
+  readonly onClose: () => void;
+}
+
+function RenameFolderDialog({ folder, onFoldersChanged, onClose }: FolderDialogProps): ReactNode {
+  const api = useApi();
+  const [name, setName] = useState(folder.name);
+  const trimmed = name.trim();
+  const rename = useFolderWrite(async () => {
+    await api.renameFolder(folder.id, trimmed);
+    await onFoldersChanged();
+    onClose();
+  });
+  const blocked = trimmed === '' || trimmed === folder.name || rename.pending;
+
+  return (
+    <Dialog
+      title="Rename folder"
+      open
+      onOpenChange={(next) => {
+        if (!next) onClose();
+      }}
+    >
+      <Field label="Folder name">
+        <TextInput
+          value={name}
+          autoComplete="off"
+          onChange={(event) => {
+            setName(event.target.value);
+          }}
+          onKeyDown={(event) => {
+            if (event.key === 'Enter' && !blocked) {
+              event.preventDefault();
+              rename.run();
+            }
+          }}
+        />
+      </Field>
+      <ToolMetaWriteError error={rename.error} />
+      <div className="tai-dialog-actions">
+        <Button type="button" onClick={onClose}>
+          Cancel
+        </Button>
+        <Button type="button" variant="primary" disabled={blocked} onClick={rename.run}>
+          {rename.pending ? <Spinner label="Renaming folder" /> : null}
+          Rename
+        </Button>
+      </div>
+    </Dialog>
+  );
+}
+
+function MoveFolderDialog({
+  folder,
+  folders,
+  onFoldersChanged,
+  onClose,
+}: FolderDialogProps & { readonly folders: readonly Folder[] }): ReactNode {
+  const api = useApi();
+  const [parentId, setParentId] = useState<string | null>(folder.parentId);
+  const createFolder = useCreateFolder(onFoldersChanged);
+  const move = useFolderWrite(async () => {
+    await api.moveFolder(folder.id, parentId);
+    await onFoldersChanged();
+    onClose();
+  });
+
+  const forbidden = subtreeIds(folder, folders);
+  const targets = folders.filter((candidate) => !forbidden.has(candidate.id));
+
+  return (
+    <Dialog
+      title={`Move ${folder.name}`}
+      open
+      onOpenChange={(next) => {
+        if (!next) onClose();
+      }}
+    >
+      <Field label="Destination folder" description="Choose a new parent, or the root." group>
+        <FolderPicker
+          value={parentId}
+          onChange={setParentId}
+          folders={targets}
+          onCreateFolder={createFolder}
+          unfiledLabel="Root (no folder)"
+        />
+      </Field>
+      <ToolMetaWriteError error={move.error} />
+      <div className="tai-dialog-actions">
+        <Button type="button" onClick={onClose}>
+          Cancel
+        </Button>
+        <Button
+          type="button"
+          variant="primary"
+          disabled={parentId === folder.parentId || move.pending}
+          onClick={move.run}
+        >
+          {move.pending ? <Spinner label="Moving folder" /> : null}
+          Move
+        </Button>
+      </div>
+    </Dialog>
+  );
+}
+
+function DeleteFolderDialog({ folder, onFoldersChanged, onClose }: FolderDialogProps): ReactNode {
+  const api = useApi();
+  const remove = useFolderWrite(async () => {
+    await api.deleteFolder(folder.id);
+    await onFoldersChanged();
+    onClose();
+  });
+  const off = isFeatureDisabled(remove.error);
+  return (
+    <ConfirmDialog
+      title={`Delete ${folder.name}?`}
+      confirmLabel="Delete folder"
+      pendingLabel="Deleting folder"
+      onConfirm={remove.run}
+      onClose={onClose}
+      isPending={remove.pending}
+      error={remove.error !== null && !off ? errorMessage(remove.error) : null}
+      disabledNote={
+        off ? (
+          <FeatureDisabled feature="Tool metadata" message={featureDisabledMessage(remove.error)} />
+        ) : undefined
+      }
+    >
+      <p>
+        Only an empty folder can be deleted — one that still holds tools (hidden ones count) or
+        subfolders cannot be.
+      </p>
+    </ConfirmDialog>
+  );
+}
+
+/** Props of {@link FolderActionsMenu}. */
+export interface FolderActionsMenuProps {
+  /** The folder the actions act on. */
+  readonly folder: Folder;
+  /** The FULL folder tree, offered as move destinations. */
+  readonly folders: readonly Folder[];
+  /** The screen's refresh of its overlay read, awaited after every write. */
+  readonly onFoldersChanged: FoldersChanged;
+}
+
+/** The Rename, Move and Delete buttons for one folder row/card, each owning its
+ *  dialog — for an explorer's `renderFolderActions` slot. Each button shows only
+ *  where the caller may make that write; a dialog already open stays open after its
+ *  button is withdrawn, so its outcome is still shown. Renders nothing for a caller
+ *  who may make none of the three writes. */
+export function FolderActionsMenu({
+  folder,
+  folders,
+  onFoldersChanged,
+}: FolderActionsMenuProps): ReactNode {
+  const access = useToolMetaWriteAccess();
+  const [action, setAction] = useState<'rename' | 'move' | 'delete' | null>(null);
+  const close = (): void => {
+    setAction(null);
+  };
+  if (!access.renameFolder && !access.moveFolder && !access.deleteFolder && action === null) {
+    return null;
+  }
+  return (
+    <div className="tai-row">
+      {access.renameFolder ? (
+        <Button
+          variant="ghost"
+          aria-label={`Rename folder ${folder.name}`}
+          onClick={() => {
+            setAction('rename');
+          }}
+        >
+          Rename
+        </Button>
+      ) : null}
+      {access.moveFolder ? (
+        <Button
+          variant="ghost"
+          aria-label={`Move folder ${folder.name}`}
+          onClick={() => {
+            setAction('move');
+          }}
+        >
+          Move
+        </Button>
+      ) : null}
+      {access.deleteFolder ? (
+        <Button
+          variant="ghost"
+          aria-label={`Delete folder ${folder.name}`}
+          onClick={() => {
+            setAction('delete');
+          }}
+        >
+          Delete
+        </Button>
+      ) : null}
+      {action === 'rename' ? (
+        <RenameFolderDialog folder={folder} onFoldersChanged={onFoldersChanged} onClose={close} />
+      ) : null}
+      {action === 'move' ? (
+        <MoveFolderDialog
+          folder={folder}
+          folders={folders}
+          onFoldersChanged={onFoldersChanged}
+          onClose={close}
+        />
+      ) : null}
+      {action === 'delete' ? (
+        <DeleteFolderDialog folder={folder} onFoldersChanged={onFoldersChanged} onClose={close} />
+      ) : null}
+    </div>
+  );
+}