@reqquest/ui 1.17.0 → 1.19.0

package/app/src/routes/roles/[id]/+page.svelte

@@ -0,0 +1,335 @@
+<script lang="ts">
+  import { ColumnList, FieldCheckboxList, FieldHidden, FieldMultiselect, FieldSelect, Panel, PanelFormDialog, Toasts } from '@txstate-mws/carbon-svelte'
+  import { toasts } from '@txstate-mws/svelte-components'
+  import { Modal, TooltipDefinition } from 'carbon-components-svelte'
+  import Add from 'carbon-icons-svelte/lib/Add.svelte'
+  import Edit from 'carbon-icons-svelte/lib/Edit.svelte'
+  import TrashCan from 'carbon-icons-svelte/lib/TrashCan.svelte'
+  import { setContext } from 'svelte'
+  import { pick, ucfirst } from 'txstate-utils'
+  import { invalidate } from '$app/navigation'
+  import { api, IntroPanel } from '$internal'
+  import type { AccessRoleGrantCreate, AccessRoleGrantUpdate, AccessTagInput } from '@reqquest/ui'
+  import type { PageData } from './$types'
+  import ControlWithTooltip from './ControlWithTooltip.svelte'
+  import TagsWithTooltip from './TagsWithTooltip.svelte'
+
+  export let data: PageData
+  $: ({ role, controlGroups, controlGroupLookup } = data)
+
+  $: grants = role.grants.filter(g => g.allow)
+  $: exceptions = role.grants.filter(g => !g.allow)
+
+  setContext('controlGroupLookup', () => controlGroupLookup)
+
+  // the multiselect only renders option text, so a tag's description (e.g. a program's other titles)
+  // goes on a second line of the label, styled as helper text below - and the filter matches it too
+  function tagItems (tags: { value: string, label: string, description?: string | null }[]) {
+    return tags.map(t => ({ value: t.value, label: t.description ? `${t.label}\n${t.description}` : t.label }))
+  }
+  type AccessRoleGrantCreateForm = Omit<AccessRoleGrantCreate, 'tags'> & { tags: Record<string, string[]> }
+  type AccessRoleGrantUpdateForm = Omit<AccessRoleGrantUpdate, 'tags'> & { tags: Record<string, string[]> }
+  function transformFromAPI (data: PageData['role']['grants'][number]): AccessRoleGrantUpdateForm {
+    return {
+      ...pick(data, 'controls', 'allow'),
+      controlGroup: data.controlGroup.name,
+      tags: data.tags.reduce((acc: Record<string, string[]>, curr) => ({ ...acc, [curr.category]: [...(acc[curr.category] ?? []), curr.tag] }), {})
+    }
+  }
+  function transformToAPI<T extends { tags?: Record<string, string[]> }> (data: T): Omit<T, 'tags'> & { tags: AccessTagInput[] } {
+    return {
+      ...data,
+      tags: Object.entries(data.tags ?? {}).flatMap(([category, tags]) => tags.map(tag => ({ category, tag })))
+    }
+  }
+
+  let showGrantEdit = false
+  let grantToEdit: PageData['role']['grants'][number] | undefined
+  let grantToEditInput: AccessRoleGrantUpdateForm | undefined
+  function onGrantEdit (row: PageData['role']['grants'][number]) {
+    return () => {
+      showGrantEdit = true
+      grantToEdit = row
+      grantToEditInput = transformFromAPI(row)
+    }
+  }
+  function onGrantDelete (row: PageData['role']['grants'][number]) {
+    return () => {
+      grantToDelete = row
+    }
+  }
+  function onCloseEdit () {
+    showGrantCreate = false
+    showGrantEdit = false
+    grantToEdit = undefined
+    grantToEditInput = undefined
+  }
+  async function onSaveGrant (event: CustomEvent<AccessRoleGrantCreateForm | AccessRoleGrantUpdateForm>) {
+    const controlGroupName = event.detail.controlGroup
+    if (!controlGroupName) {
+      console.error('No control group in form submission')
+      return
+    }
+    const grantName = controlGroupLookup[controlGroupName].title
+    if (!grantName) {
+      console.error('Control group not found in lookup')
+      return
+    }
+    const isEdit = !!grantToEdit
+    const type = isEdit ? (grantToEdit!.allow ? 'grant' : 'exception') : (grantCreateAllow ? 'grant' : 'exception')
+    const action = isEdit ? 'edited' : 'added'
+    toasts.add({
+      type: 'success',
+      title: `${ucfirst(type)} ${action}`,
+      message: `The ${type} ${grantName} was successfully ${action}.`
+    })
+    await invalidate('api:getRoleDetails')
+    onCloseEdit()
+  }
+  async function onEditSubmit (data: AccessRoleGrantUpdateForm) {
+    const response = await api.updateGrant(grantToEdit!.id, transformToAPI(data), false)
+    return { ...response, data }
+  }
+  async function onEditValidate (data: AccessRoleGrantUpdateForm) {
+    const response = await api.updateGrant(grantToEdit!.id, transformToAPI(data), true)
+    return response.messages
+  }
+
+  let showGrantCreate = false
+  let grantCreateAllow = true
+  async function onCreateSubmit (data: AccessRoleGrantCreateForm) {
+    const response = await api.createGrant(role.id, transformToAPI(data), false)
+    return { ...response, data }
+  }
+  async function onCreateValidate (data: AccessRoleGrantCreateForm) {
+    const response = await api.createGrant(role.id, transformToAPI(data), true)
+    return response.messages
+  }
+
+  let grantToDelete: PageData['role']['grants'][number] | undefined
+  function closeDeleteConfirmation () {
+    grantToDelete = undefined
+  }
+  async function executeDelete () {
+    try {
+      if (!grantToDelete) {
+        console.error('No grant selected for deletion')
+        return
+      }
+      const type = grantToDelete.allow ? 'grant' : 'exception'
+      const grantName = controlGroupLookup[grantToDelete.controlGroup.name].title
+      if (!grantName) {
+        console.error('Control group not found in lookup')
+        return
+      }
+      await api.deleteGrant(grantToDelete.id)
+      toasts.add({
+        type: 'success',
+        title: `${ucfirst(type)} deleted`,
+        message: `The ${type} ${grantName} was successfully deleted.`
+      })
+      await invalidate('api:getRoleDetails')
+    } finally {
+      closeDeleteConfirmation()
+    }
+  }
+</script>
+
+<IntroPanel title="{role.name} permissions" subtitle={role.description ?? ''}>
+<div class="groups [ text-sm ] flow" style="--flow-space:0.5rem;">
+    <h3 class="font-medium ">Groups</h3>
+    <ul>
+      {#each role.groups as group (group.groupName)}
+        <li>{group.groupName}</li>
+      {/each}
+    </ul>
+  </div>
+</IntroPanel>
+<div class="columnlist-wrap flow" style="--flow-space:3em;">
+  <div class="role-list">
+    <ColumnList
+    title="Grants for Role: {role.name}"
+    listActions={[
+      {
+        label: 'Add Grant',
+        icon: Add,
+        onClick: () => {
+          showGrantCreate = true
+          grantCreateAllow = true
+        }
+      }
+    ]}
+    columns={[
+      { id: 'controlGroup', label: 'Grants', render: grant => grant.controlGroup.title },
+      { id: 'controls', label: 'Controls', component: ControlWithTooltip },
+      { id: 'tags', label: 'Restrictions', component: TagsWithTooltip }
+    ]}
+    rows={grants}
+    actions={row => [
+      {
+        label: 'Edit',
+        icon: Edit,
+        onClick: onGrantEdit(row),
+        disabled: !row.actions.update
+      },
+      {
+        label: 'Delete',
+        icon: TrashCan,
+        onClick: onGrantDelete(row),
+        disabled: !row.actions.delete
+      }
+    ]}
+    />
+  </div>
+
+  <div class="role-list">
+    <ColumnList
+    title="Exceptions for Role: {role.name}"
+    columns={[
+      { id: 'controlGroup', label: 'Exceptions', render: grant => grant.controlGroup.title },
+      { id: 'controls', label: 'Controls', render: grant => grant.controls.join(', ') },
+      { id: 'tags', label: 'Restrictions', component: TagsWithTooltip }
+    ]}
+    noItemsKind='info'
+    noItemsTitle=''
+    noItemsSubtitle='No exceptions on this role.'
+    rows={exceptions}
+    listActions={[
+      {
+        label: 'Add Exception',
+        icon: Add,
+        onClick: () => {
+          showGrantCreate = true
+          grantCreateAllow = false
+        }
+      }
+    ]}
+    actions={row => [
+      {
+        label: 'Edit',
+        icon: Edit,
+        onClick: onGrantEdit(row),
+        disabled: !row.actions.update
+      },
+      {
+        label: 'Delete',
+        icon: TrashCan,
+        onClick: onGrantDelete(row),
+        disabled: !row.actions.delete
+      }
+    ]}
+    />
+  </div>
+</div>
+{#if showGrantEdit && grantToEdit}
+  {@const controlGroup = controlGroupLookup[grantToEdit.controlGroup.name]}
+  <PanelFormDialog open title="Edit {grantToEdit.allow ? 'Grant' : 'Exception'}" submit={onEditSubmit} validate={onEditValidate} on:cancel={onCloseEdit} on:saved={onSaveGrant} preload={grantToEditInput} let:data>
+    <FieldHidden path="allow" value={grantToEdit.allow} />
+    <FieldHidden path="controlGroup" value={grantToEdit.controlGroup.name} />
+    <FieldCheckboxList
+      path="controls"
+      legendText="Controls"
+      items={controlGroup.controls.map(c => ({ value: c.name }))}
+    >
+      <svelte:fragment slot="labelText" let:item>
+        {@const control = controlGroup.controls.find(c => c.name === item.value)}
+        {#if control}
+          <TooltipDefinition tooltipText={control.description} direction="bottom" align="start">
+            {control.name}
+          </TooltipDefinition>
+        {:else}
+          {item.value}
+        {/if}
+      </svelte:fragment>
+    </FieldCheckboxList>
+    {#each controlGroup.tags as category (category.category)}
+      <div class="tag-multiselect">
+        <FieldMultiselect
+          path="tags.{category.category}"
+          titleText={category.label}
+          helperText={category.description}
+          label="Restrict to {category.label}"
+          items={tagItems(category.tags)}
+        />
+      </div>
+    {/each}
+  </PanelFormDialog>
+{:else if showGrantCreate}
+  <PanelFormDialog open title="New {grantCreateAllow ? 'Grant' : 'Exception'}" submit={onCreateSubmit} validate={onCreateValidate} on:cancel={onCloseEdit} on:saved={onSaveGrant} let:data>
+    <FieldHidden path="allow" value={grantCreateAllow} />
+    {@const controlGroup = data.controlGroup ? controlGroupLookup[data.controlGroup] : undefined}
+    <FieldSelect
+      path="controlGroup"
+      labelText="Control Group"
+      items={controlGroups.map(st => ({ value: st.name, label: st.title }))}
+      helperText={controlGroup?.description}
+    />
+    {#if controlGroup}
+      <FieldCheckboxList
+        path="controls"
+        legendText="Controls"
+        items={controlGroup.controls.map(c => ({ value: c.name }))}
+      >
+        <svelte:fragment slot="labelText" let:item>
+          {@const control = controlGroup.controls.find(c => c.name === item.value)}
+          {#if control}
+            <TooltipDefinition tooltipText={control.description} direction="bottom" align="start">
+              {control.name}
+            </TooltipDefinition>
+          {:else}
+            {item.value}
+          {/if}
+        </svelte:fragment>
+      </FieldCheckboxList>
+
+      {#each controlGroup.tags as category (category.category)}
+        <div class="tag-multiselect">
+          <FieldMultiselect
+            path="tags.{category.category}"
+            titleText={category.label}
+            helperText={category.description}
+            label="Restrict to {category.label}"
+            items={tagItems(category.tags)}
+            filterable
+          />
+        </div>
+      {/each}
+    {/if}
+  </PanelFormDialog>
+{:else if grantToDelete}
+  <Modal
+    open
+    modalHeading="Delete {grantToDelete.allow ? 'Grant' : 'Exception'}"
+    primaryButtonText="Delete"
+    secondaryButtonText="Cancel"
+    danger
+    size="sm"
+    on:click:button--primary={executeDelete}
+    on:click:button--secondary={closeDeleteConfirmation}
+    on:submit={executeDelete}
+    on:close={closeDeleteConfirmation}
+  >
+    <p>Are you sure you want to delete this {grantToDelete.allow ? 'grant' : 'exception'}?<br><em>{controlGroupLookup[grantToDelete.controlGroup.name].title}</em></p>
+    <p>This action cannot be undone.</p>
+  </Modal>
+{/if}
+
+<style>
+  .role-list :global(.column-list-head) {
+    background: var(--cds-ui-03);
+  }
+  /* options carrying a description are two lines - the title, then the description as helper text.
+     carbon-svelte's multiselect already lets unvirtualized options grow, but sets white-space: normal on
+     the label with a five-class selector, so these need a sixth to keep the line break */
+  .tag-multiselect :global(.bx--list-box .bx--list-box__menu-item .bx--list-box__menu-item__option .bx--checkbox-label-text) {
+    white-space: pre-line;
+    font-size: 0.75rem;
+    line-height: 1rem;
+    color: var(--cds-text-secondary);
+  }
+  .tag-multiselect :global(.bx--list-box .bx--list-box__menu-item .bx--list-box__menu-item__option .bx--checkbox-label-text::first-line) {
+    font-size: 0.875rem;
+    line-height: 1.125rem;
+    color: var(--cds-text-primary);
+  }
+</style>

package/app/src/routes/roles/[id]/+page.ts

@@ -0,0 +1,10 @@
+import { api } from '$internal'
+import { error } from '@sveltejs/kit'
+import type { PageLoad } from './$types'
+
+export const load: PageLoad = async ({ params, depends }) => {
+  const role = await api.getRoleDetails(params.id)
+  if (!role) throw error(404, 'Role not found')
+  depends('api:getRoleDetails')
+  return { role }
+}

package/app/src/routes/roles/[id]/ControlWithTooltip.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import { TooltipDefinition } from 'carbon-components-svelte'
+  import { getContext } from 'svelte'
+
+  export let row: { controlGroup: { name: string }, controls: string[] }
+  const controlGroupLookup = getContext<() => Record<string, { controls: { name: string, description: string }[] }>>('controlGroupLookup')()
+  $: controlGroup = controlGroupLookup[row.controlGroup.name]
+</script>
+
+{#each row.controls as control, controlIndex}
+  {@const controlInfo = controlGroup.controls.find(c => c.name === control)}
+  <TooltipDefinition tooltipText={controlInfo?.description}>
+    {controlInfo?.name ?? control}
+  </TooltipDefinition>{#if controlIndex < row.controls.length - 1},{' '}{/if}
+{/each}

package/app/src/routes/roles/[id]/TagsWithTooltip.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+  import { TooltipDefinition } from 'carbon-components-svelte'
+  import { groupby } from 'txstate-utils'
+
+  export let row: { tags: { categoryLabel: string, label: string, description?: string | null }[] }
+
+  // past this many tags the restrictions read better as a list per category than inline
+  const THRESHOLD = 5
+  $: categories = Object.entries(groupby(row.tags, 'categoryLabel'))
+</script>
+
+{#if row.tags.length > THRESHOLD}
+  {#each categories as [categoryLabel, tags], i (categoryLabel)}
+    {#if i > 0}<br />{/if}
+    <div>
+      <strong>{categoryLabel}</strong>
+      <ul>
+        {#each tags as tag, tagIndex (tagIndex)}
+          <li>
+            {#if tag.description}
+              <TooltipDefinition tooltipText={tag.description}>{tag.label}</TooltipDefinition>
+            {:else}
+              {tag.label}
+            {/if}
+          </li>
+        {/each}
+      </ul>
+    </div>
+  {/each}
+{:else}
+  {#each categories as [categoryLabel, tags], i (categoryLabel)}
+    {#if i > 0}<br />{/if}
+    <strong>{categoryLabel}</strong>:
+    {#each tags as tag, tagIndex (tagIndex)}
+      {#if tag.description}
+        <TooltipDefinition tooltipText={tag.description}>{tag.label}</TooltipDefinition>
+      {:else}
+        {tag.label}
+      {/if}{#if tagIndex < tags.length - 1},{' '}{/if}
+    {/each}
+  {/each}
+{/if}

package/app/src/routes/roles/users/+layout.ts

@@ -0,0 +1,13 @@
+import { api } from '$internal'
+import { extractMergedFilters, type ComboMenuItem } from '@txstate-mws/carbon-svelte'
+import type { LayoutLoad } from '../$types'
+
+export const load: LayoutLoad = async ({ url, depends }) => {
+  const { search, institutionalRoles, applicationRoles } = extractMergedFilters(url)
+  // Get access data
+  const availableInstitutionalRoles: ComboMenuItem[] = [{ value: 'Faculty' }, { value: 'Staff' }, { value: 'Student' }]
+  const appRoles = (await api.getRoleList()) ?? []
+  const availableApplicationRoles: ComboMenuItem[] = appRoles.map(role => ({ value: role.name }))
+  depends('api:getRoleList')
+  return { availableApplicationRoles, availableInstitutionalRoles }
+}

package/app/src/routes/roles/users/+page.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+  import { ColumnList, FieldMultiselect, FilterUI, Pagination } from '@txstate-mws/carbon-svelte'
+  import type { PageData } from './$types'
+  import { IntroPanel } from '$internal'
+  import { uiRegistry } from '$local'
+
+  export let data: PageData
+  $: ({ columns, rows, filters, page, totalItems, availableApplicationRoles, roleUsersAttributeDescription } = data)
+
+  function handlePagination (event: CustomEvent<{ page: number, pageSize: number, totalItems: number }>) {
+    // event: {"isTrusted": false}
+    console.debug(`handlePagination event: ${JSON.stringify(event)}`)
+  }
+
+  // TODO: Dynamically add groupings
+  interface UsersSearchForm {
+    search?: string
+    applicationRoles?: string[]
+    // institutionalRoles?: string[]
+    [key: string]: string | string[] | undefined
+  }
+  let usersSearchFormData: UsersSearchForm | undefined
+
+</script>
+<IntroPanel
+  title="User Lookup"
+  subtitle={roleUsersAttributeDescription}
+/>
+<FilterUI
+  search
+  on:apply={e => { usersSearchFormData = e.detail }}
+  on:mount={e => { usersSearchFormData = e.detail }}>
+  <svelte:fragment slot="quickfilters">
+    <FieldMultiselect path="applicationRoles" label={`${uiRegistry.getWord('appRequest')} Roles`} items={availableApplicationRoles} />
+    {#each filters as filter (filter.id)}
+    <FieldMultiselect path={filter.id} label={filter.label} items={filter.items} />
+    {/each}
+  </svelte:fragment>
+</FilterUI>
+<ColumnList
+  title='Users'
+  columns={columns}
+  rows={rows}
+>
+</ColumnList>
+<Pagination {page} {totalItems} on:update={handlePagination} on:mount={handlePagination} noun="user" nounPlural="users" />

package/app/src/routes/roles/users/+page.ts

@@ -0,0 +1,90 @@
+import { api } from '$internal'
+import { extractMergedFilters, extractPaginationParams, type ColumnDefinition, type ComboMenuItem } from '@txstate-mws/carbon-svelte'
+import type { PageLoad } from './$types'
+import type { AccessUserFilter, Pagination } from '@reqquest/ui'
+import { omit } from 'txstate-utils'
+import { uiRegistry } from '$local'
+
+export const load: PageLoad = async ({ url, depends }) => {
+  const roleUsersAttributeDescription = uiRegistry.config.roleUsersAttributeDescription ?? ''
+  const query = extractMergedFilters(url)
+  const { search, applicationRoles } = query
+  const groupingsQuery = omit(query, 'search', 'applicationRoles')
+  const { page, pagesize } = extractPaginationParams(url)
+  const pageFilter: Pagination = { page, perPage: pagesize }
+  // Get access data
+  const accessUsersFilter: AccessUserFilter = {}
+  if (search) accessUsersFilter.search = search
+  // groupings is a map<label, ids>
+  if (Array.isArray(applicationRoles) && applicationRoles.length > 0) {
+    accessUsersFilter.roles = applicationRoles
+  }
+  // Dynamically add groupings
+  const groupings = Object.keys(groupingsQuery)
+  for (const grouping of groupings) {
+    if (groupingsQuery[grouping] != null) {
+      accessUsersFilter.otherCategoriesByLabel ??= []
+      accessUsersFilter.otherCategoriesByLabel.push({ category: grouping, tags: groupingsQuery[grouping] })
+    }
+  }
+  const { users, pageInfo } = await api.getAccessUsers(accessUsersFilter, pageFilter)
+
+  interface User {
+    // Local data
+    id: string
+    // ids = id + otherId
+    ids: string
+    // contact = fullname + email
+    contact: string
+    applicationRoles: string
+    groups: string
+    // Remote data
+    // otherInfo?: any
+    // institutionalRoles?: string[]
+    // lastLogin?: string
+    [key: string]: string | undefined
+  }
+  const rows = users.map(u => {
+    const user: User = {
+      id: u.login,
+      ids: [u.login, u.otherInfo?.otherId].filter(id => id != null).join('\n'),
+      contact: u.otherInfo?.email ? u.fullname + '\n' + u.otherInfo.email : u.fullname,
+      applicationRoles: u.roles.map(r => r.name).join(', '),
+      groups: u.groups.join(', ')
+      // otherInfo: u.otherInfo
+      // institutionalRoles: u.otherInfo?.institutionalRoles ?? [],
+      // lastLogin: u.otherInfo?.lastLogin ? DateTime.fromISO(u.otherInfo?.lastLogin).toFormat('MM/dd/yyyy') : 'unknown'
+    }
+    if (u.otherInfo?.categories) {
+      for (const group of pageInfo?.categories ?? []) {
+        const category = group.category
+        if (group.useInList) user[category] = Array.isArray(u.otherInfo.categories[category]) ? u.otherInfo.categories[category].map(tl => tl.label ?? tl.tag).join(', ') : undefined
+      }
+    }
+    return user
+  })
+
+  interface Filter {
+    id: string
+    label: string
+    items: ComboMenuItem[]
+  }
+  const filters: Filter[] = []
+  const columns: ColumnDefinition<User>[] = [
+    { id: 'contact', label: 'Name', get: 'contact' },
+    { id: 'id', label: 'IDs', get: 'ids' },
+    { id: 'applicationRoles', label: `${uiRegistry.getWord('appRequest')} Roles`, get: 'applicationRoles' },
+    { id: 'groups', label: 'Groups', get: 'groups' }
+    // TODO: Dynamically pull extra grouping columns
+    // { id: 'institutionalRoles', label: 'Institutional Roles', render: user => user['institutionalRoles'] ? user['institutionalRoles'].join(', ') : '' },
+    // { id: 'lastLogin', label: 'Last Login', get: 'lastLogin' }
+  ]
+  for (const group of pageInfo?.categories ?? []) {
+    const category = group.category
+    if (group.useInList) columns.push({ id: category, label: group.label ?? category, get: category })
+    if (group.useInFilters) filters.push({ id: category, label: group.label ?? category, items: group.tags.map(tl => ({ value: tl.tag, label: tl.label ?? tl.tag })) })
+  }
+
+  depends('api:getAccessUsers')
+  return { columns, rows, filters, page: pageInfo?.currentPage, totalItems: pageInfo?.totalItems, roleUsersAttributeDescription }
+}

package/bin/reqquest-ui.js

@@ -0,0 +1,117 @@
+#!/usr/bin/env node
+/**
+ * Builds and runs a downstream ReqQuest UI. The project needs only @reqquest/ui installed and a
+ * src/local/index.ts exporting `uiRegistry`; svelte, SvelteKit, Vite and their configuration all come
+ * from this package. See docs/downstream-ui.md.
+ *
+ *   reqquest-ui sync [--strict] [--accept]   assemble .reqquest/ (see cli/sync.js)
+ *   reqquest-ui dev [vite args...]           sync, then the Vite dev server; re-syncs on changes
+ *   reqquest-ui build                        sync --strict, registry check, production build
+ *                                            -> build/ (static site) and build-runtime/ (nginx)
+ *   reqquest-ui check [svelte-check args]    type-check everything, including src/local
+ *   reqquest-ui check-registry               fail if src/local/index.ts has type errors
+ *
+ * Run it from the project root (the directory holding package.json and src/local).
+ */
+import { spawnSync, spawn } from 'node:child_process'
+import { cpSync, existsSync, mkdirSync, watch } from 'node:fs'
+import { dirname, join, resolve } from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { sync, SyncError } from '../cli/sync.js'
+import { packageBin } from '../cli/util.js'
+
+const PACKAGE_ROOT = resolve(dirname(fileURLToPath(import.meta.url)), '..')
+const projectRoot = process.cwd()
+const appRoot = join(projectRoot, '.reqquest')
+const [command, ...args] = process.argv.slice(2)
+
+function run (pkg, bin, binArgs) {
+  const result = spawnSync(process.execPath, [packageBin(pkg, PACKAGE_ROOT, bin), ...binArgs], { cwd: appRoot, stdio: 'inherit' })
+  if (result.status !== 0) process.exit(result.status ?? 1)
+}
+
+function svelteKitSync () {
+  run('@sveltejs/kit', 'svelte-kit', ['sync'])
+}
+
+/** Ported from ui/check-registry.js, which explains why the gate is narrowed to one file. */
+function checkRegistry () {
+  const REGISTRY = 'src/local/index.ts'
+  const result = spawnSync(process.execPath, [packageBin('svelte-check', PACKAGE_ROOT), '--tsconfig', './tsconfig.json', '--output', 'machine'], { cwd: appRoot, encoding: 'utf8' })
+  const errors = (result.stdout ?? '').split('\n').filter(line => line.includes(' ERROR ') && line.includes(`${REGISTRY}"`))
+  if (errors.length > 0) {
+    console.error(`${REGISTRY} has ${errors.length} type error(s).\n`)
+    for (const line of errors) console.error(line)
+    console.error('\nA missing prompt means the API defines a prompt this UI has no component for.')
+    console.error(`Add it to the prompts object in ${REGISTRY}, or regenerate the key declaration if the API's definitions changed.`)
+    process.exit(1)
+  }
+  console.log(`${REGISTRY} is in step with the generated key declaration.`)
+}
+
+function dev () {
+  sync(projectRoot)
+  svelteKitSync()
+  const vite = spawn(process.execPath, [packageBin('vite', PACKAGE_ROOT), 'dev', ...args], { cwd: appRoot, stdio: 'inherit' })
+  vite.on('exit', code => process.exit(code ?? 0))
+
+  // src/local is aliased in place, so Vite already watches it; routes and static are copied
+  let timer
+  const resync = () => {
+    clearTimeout(timer)
+    timer = setTimeout(() => {
+      try {
+        sync(projectRoot)
+      } catch (e) {
+        if (!(e instanceof SyncError)) throw e
+        console.error(`reqquest-ui: ${e.message}`)
+      }
+    }, 100)
+  }
+  for (const dir of ['src/routes', 'static']) {
+    if (existsSync(join(projectRoot, dir))) watch(join(projectRoot, dir), { recursive: true }, resync)
+  }
+  watch(join(projectRoot, 'package.json'), resync)
+}
+
+function build () {
+  sync(projectRoot, { strict: true })
+  svelteKitSync()
+  checkRegistry()
+  run('vite', 'vite', ['build'])
+  const runtime = join(projectRoot, 'build-runtime')
+  mkdirSync(runtime, { recursive: true })
+  cpSync(join(PACKAGE_ROOT, 'app/runtime'), runtime, { recursive: true })
+  console.log('reqquest-ui: site written to build/, nginx.conf and apply-env.sh to build-runtime/')
+}
+
+try {
+  switch (command) {
+    case 'sync':
+      sync(projectRoot, { strict: args.includes('--strict'), accept: args.includes('--accept') })
+      break
+    case 'dev':
+      dev()
+      break
+    case 'build':
+      build()
+      break
+    case 'check':
+      sync(projectRoot)
+      svelteKitSync()
+      run('svelte-check', 'svelte-check', ['--tsconfig', './tsconfig.json', ...args])
+      break
+    case 'check-registry':
+      sync(projectRoot)
+      svelteKitSync()
+      checkRegistry()
+      break
+    default:
+      console.error('usage: reqquest-ui <sync [--strict] [--accept] | dev | build | check | check-registry>')
+      process.exit(command ? 1 : 0)
+  }
+} catch (e) {
+  if (!(e instanceof SyncError)) throw e
+  console.error(`reqquest-ui: ${e.message}`)
+  process.exit(1)
+}