@h-ai/cli 0.1.0-alpha9 → 1.0.0-beta.2

package/templates/apps/fullstack/packages/{{projectName}}-shared/src/lib/components/AdminWorkspace.svelte.hbs

@@ -0,0 +1,122 @@
+<script lang='ts'>
+{{#if features.feedback}}
+  import { errorMessage, useToastFeedback } from '@h-ai/ui/toast'
+{{else}}
+  import { useToastFeedback } from '@h-ai/ui/toast'
+{{/if}}
+  import type { Component } from 'svelte'
+  import type { ManagementApiOptions } from '../api/api-client.js'
+  import { Skeleton, ToastContainer } from '@h-ai/ui/components/compounds/index'
+  import { Button } from '@h-ai/ui/components/primitives/index'
+  import { AuthPanel } from '@h-ai/ui/components/scenes/iam/index'
+  import { GuideHost } from '@h-ai/ui/guide'
+  import { onMount, untrack } from 'svelte'
+  import { managementAuthActions } from '../api/api-client.js'
+  import { HashRouter } from '../navigation/hash-router.svelte.js'
+  import * as m from '../paraglide/messages.js'
+  import { createManagementGuide } from '../stores/guide-store.js'
+  import { ManagementStore } from '../stores/management-store.svelte.js'
+  import AppShell from './AppShell.svelte'
+{{#if features.feedback}}
+  import { browserFeedback, feedbackReview, initializeBrowserFeedback } from '../api/feedback-client.js'
+{{/if}}
+
+  interface Props {
+    platform: 'web' | 'app' | 'desktop'
+{{#if features.feedback}}
+    buildMetadata: { appVersion: string, buildId: string, commit: string }
+{{/if}}
+    apiOptions?: ManagementApiOptions
+    onLocaleChange?: (locale: string) => void
+  }
+  const { platform, apiOptions = {}, onLocaleChange{{#if features.feedback}}, buildMetadata{{/if}} }: Props = $props()
+  const pages = import.meta.glob<{ default: Component<{ store: ManagementStore }> }>('../pages/**/*.svelte')
+  const router = new HashRouter(Object.keys(pages), '/users')
+  const store = new ManagementStore(router)
+  // 宿主平台在组件生命周期中固定，引导控制器只创建一次。
+  const guide = untrack(() => createManagementGuide(store, platform))
+  let resetToken = $state('')
+  const authConfig = $derived(store.authConfig && {
+    ...store.authConfig,
+    ui: { ...store.authConfig.ui, brandTitle: store.authConfig.ui.brandTitle || store.info?.name },
+  })
+  async function authenticated() {
+    await store.authenticated()
+    if (resetToken) {
+      const url = new URL(location.href)
+      url.searchParams.delete('token')
+      history.replaceState(history.state, '', url)
+    }
+    resetToken = ''
+  }
+  const pageComponent = $derived(pages[router.file]())
+  onMount(() => {
+    const stopRouting = router.start(() => {
+      if (store.user)
+        void store.navigate(router.path.slice(1))
+    })
+    resetToken = new URL(location.href).searchParams.get('token') ?? ''
+    void store.initialize(apiOptions, onLocaleChange)
+    return () => {
+      stopRouting()
+      void store.close()
+    }
+  })
+{{#if features.feedback}}
+  const feedbackUserId = $derived(store.user?.id)
+  $effect(() => {
+    const userId = feedbackUserId
+    if (userId) {
+      void initializeBrowserFeedback(buildMetadata).catch((cause) => {
+        store.error = errorMessage(cause, m.operation_failed())
+      })
+    }
+    else {
+      feedbackReview.close()
+      void browserFeedback.close({ discard: true })
+    }
+    return () => {
+      feedbackReview.close()
+      void browserFeedback.close({ discard: true })
+    }
+  })
+{{/if}}
+  $effect(() => {
+    if (store.info)
+      document.title = store.info.name
+  })
+  useToastFeedback(() => store.error)
+</script>
+
+{#key store.locale}
+  {#if store.initializing}
+    <div role='status' aria-live='polite' class='grid min-h-dvh place-items-center bg-base-200/50'><div class='w-72 space-y-4'><Skeleton variant='title' /><Skeleton count={3} /><p class='text-center text-sm text-base-content/50'>{m.home_loading()}</p></div></div>
+  {:else if !store.user || resetToken}
+    <header class='border-b border-base-content/8 bg-base-100 px-6 py-3 text-sm font-medium'>{store.info?.name}</header>
+    <main data-testid='login-page'>
+      {#if !store.info || !store.authConfig}
+        <section class='mx-auto mt-20 max-w-md space-y-4 p-6'>
+          <p class='text-sm text-base-content/60'>{m.home_error()}</p>
+          <Button variant='primary' onclick={() => void store.initialize(apiOptions, onLocaleChange)}>{m.home_refresh()}</Button>
+        </section>
+      {:else}
+        <div data-testid='login-form'>
+          <AuthPanel config={authConfig} actions={managementAuthActions} {resetToken} initialMode={resetToken ? 'reset' : 'login'} error={store.authConfig ? '' : store.error} onretry={() => void store.initialize(apiOptions, onLocaleChange)} onauthenticated={authenticated} />
+        </div>
+        <footer class='border-t border-base-content/8 p-3 text-center text-xs text-base-content/50'><span data-testid='app-name'>{store.info.name}</span> · <span data-testid='app-version'>v{store.info.version}</span> · <span data-testid='app-environment'>{store.info.env}</span></footer>
+      {/if}
+    </main>
+  {:else}
+    <AppShell {platform} {store} onhelp={() => guide.openHelp()}>
+      <div class='flex min-h-0 flex-1 flex-col gap-3'>
+        {#await pageComponent}
+          <div role='status' aria-label={m.home_loading()} class='space-y-4'><Skeleton variant='title' /><Skeleton count={3} /></div>
+        {:then { default: Page }}
+          <Page {store} />
+        {/await}
+      </div>
+    </AppShell>
+    <GuideHost {guide} locale={store.locale} scope={store.user.id} autoStart='overview' />
+  {/if}
+{/key}
+<ToastContainer />

package/templates/apps/fullstack/packages/{{projectName}}-shared/src/lib/components/AppShell.svelte.hbs

@@ -0,0 +1,90 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte'
+  import type { ManagementPage, ManagementStore } from '../stores/management-store.svelte.js'
+  import { WorkspaceLayout } from '@h-ai/ui/components/scenes/app/index'
+  import { ReauthenticationDialog, SessionRecoveryDialog } from '@h-ai/ui/components/scenes/iam/index'
+  import { sessionRecovery } from '../api/session-recovery.svelte.js'
+  import { sensitiveActions } from '../api/sensitive-actions.svelte.js'
+  import { managementAuthActions } from '../api/api-client.js'
+  import { Avatar, Badge, BareButton, Button } from '@h-ai/ui/components/primitives/index'
+  import * as m from '../paraglide/messages.js'
+{{#if features.feedback}}
+  import FeedbackEntry from './FeedbackEntry.svelte'
+{{/if}}
+
+  interface Props {
+    platform: 'web' | 'app' | 'desktop' | 'miniapp'
+    store: ManagementStore
+    children: Snippet
+    onhelp: () => void
+  }
+  const { platform, store, children, onhelp }: Props = $props()
+  $effect(() => {
+    sessionRecovery.configure(store.authConfig, store.user ?? undefined)
+    return () => sessionRecovery.cancel()
+  })
+  $effect(() => managementAuthActions.bindPageExit({ enabled: Boolean(store.user) && store.authConfig?.session.endOnPageHide }))
+  $effect(() => {
+    sensitiveActions.configure(store.authConfig?.reauthentication ?? { enabled: false, operations: [] })
+    return () => sensitiveActions.cancel()
+  })
+  let menuOpen = $state(false)
+  const items = $derived([
+    { id: 'users', label: m.nav_users(), icon: 'icon-[tabler--users]' },
+    { id: 'roles', label: m.nav_roles(), icon: 'icon-[tabler--shield-lock]' },
+    { id: 'configuration', label: m.business_settings_title(), icon: 'icon-[tabler--adjustments]' },
+    { id: 'audit', label: m.nav_audit(), icon: 'icon-[tabler--file-text]' },
+{{#if features.feedback}}
+    { id: 'feedback', label: m.nav_feedback(), icon: 'icon-[tabler--message-report]' },
+{{/if}}
+    { id: 'settings', label: m.settings_title(), icon: 'icon-[tabler--settings]' },
+  ].filter(item => store.canOpenPage(item.id)))
+  const title = $derived(items.find(item => item.id === store.page)?.label ?? store.info?.name ?? '')
+
+  function navigate(page: ManagementPage) {
+    menuOpen = false
+    void store.navigate(page)
+  }
+</script>
+
+<SessionRecoveryDialog recovery={sessionRecovery} actions={managementAuthActions} />
+<ReauthenticationDialog open={sensitiveActions.open} loading={sensitiveActions.loading} error={sensitiveActions.error} onsubmit={password => sensitiveActions.submit(password)} onclose={() => sensitiveActions.cancel()} />
+
+<div class="flex h-dvh overflow-hidden bg-base-200/50 text-base-content" class:hai-safe-area={platform === 'app'}>
+  {#if menuOpen}
+    <BareButton class="fixed inset-0 z-30 bg-black/30 lg:hidden" ariaLabel={m.close_menu()} onclick={() => { menuOpen = false }} />
+  {/if}
+  <aside class="fixed inset-y-0 left-0 z-40 flex w-60 shrink-0 flex-col border-r border-base-content/8 bg-base-100 transition-transform duration-200 lg:sticky lg:top-0 lg:h-dvh lg:translate-x-0 {menuOpen ? 'translate-x-0' : '-translate-x-full'}">
+    <div class="flex h-12 items-center gap-3 border-b border-base-content/8 px-5">
+      <span class="grid size-8 shrink-0 place-items-center rounded-lg bg-primary text-primary-content"><span class="icon-[tabler--hexagon-letter-h] size-5"></span></span>
+      <span class="truncate text-sm font-semibold" data-testid="app-name">{store.info?.name}</span>
+    </div>
+    <nav class="flex-1 space-y-1 p-3" aria-label={m.navigation()}>
+      {#each items as item (item.id)}
+        <BareButton class="flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-left text-sm transition-colors {store.page === item.id ? 'bg-primary/10 font-medium text-primary' : 'text-base-content/60 hover:bg-base-content/4'}" onclick={() => navigate(item.id)} data-testid="nav-{item.id}">
+          <span class="{item.icon} size-4.5"></span>{item.label}
+        </BareButton>
+      {/each}
+    </nav>
+    <div class="border-t border-base-content/8 px-3 py-2 text-xs text-base-content/40"><span data-testid="app-version">v{store.info?.version}</span></div>
+  </aside>
+  <WorkspaceLayout {title} data-guide='admin-content'>
+    {#snippet leading()}<BareButton class="rounded-lg p-2 hover:bg-base-content/5 lg:hidden" ariaLabel={m.open_menu()} onclick={() => { menuOpen = !menuOpen }} data-testid="mobile-menu"><span class="icon-[tabler--menu-2] size-5"></span></BareButton>{/snippet}
+    {#snippet actions()}
+        <Button variant="ghost" size="sm" onclick={onhelp} data-guide="admin-help" data-testid="admin-help" ariaLabel={m.guide_help_title()}><span class="icon-[tabler--help-circle] size-4"></span><span class="hidden sm:inline">{m.guide_help_title()}</span></Button>
+{{#if features.feedback}}
+        <FeedbackEntry />
+{{/if}}
+        <Badge variant="ghost" size="sm" data-testid="app-environment">{store.info?.env}</Badge>
+        {#if store.user}
+          <BareButton class="flex items-center gap-2 rounded-lg px-1 py-1 hover:bg-base-content/5 sm:px-2" ariaLabel={m.settings_title()} onclick={() => navigate('settings')} data-guide="admin-profile">
+            <Avatar name={store.user.displayName || store.user.username} src={store.user.avatarUrl} size="sm" />
+            <span class="hidden max-w-36 truncate text-sm sm:block">{store.user.displayName || store.user.username}</span>
+          </BareButton>
+        {/if}
+        <Button variant="ghost" size="sm" loading={store.saving} onclick={() => void store.logout()} data-testid="logout">{m.logout()}</Button>
+    {/snippet}
+    {#if store.info?.notice}<p class='mb-2 rounded-lg bg-info/10 p-2 text-sm' data-testid='business-notice'>{store.info.notice}</p>{/if}{@render children()}
+    {#snippet footer()}{store.info?.name} · v{store.info?.version}{/snippet}
+  </WorkspaceLayout>
+</div>

package/templates/apps/fullstack/packages/{{projectName}}-shared/src/lib/components/FeedbackEntry.svelte.hbs

@@ -0,0 +1,86 @@
+{{! @skipIfEmpty }}
+{{#if features.feedback}}
+<script lang='ts'>
+  import { errorMessage, useToastFeedback } from '@h-ai/ui/toast'
+  import type { FeedbackDraft } from '@h-ai/feedback/client'
+  import type { FeedbackAnnotation, FeedbackAttachmentView, FeedbackFormData } from '@h-ai/ui'
+  import { FeedbackModal } from '@h-ai/ui/components/scenes/app/index'
+  import { Button } from '@h-ai/ui/components/primitives/index'
+  import { onDestroy } from 'svelte'
+  import { browserFeedback } from '../api/feedback-client.js'
+  import * as m from '../paraglide/messages.js'
+
+  let open = $state(false)
+  $effect(() => {
+    if (!open)
+      browserFeedback.pause()
+  })
+  let preparing = $state(false)
+  let error = $state('')
+  let draft = $state.raw<FeedbackDraft>()
+  let attachments = $state<FeedbackAttachmentView[]>([])
+  function refreshAttachments() {
+    attachments = browserFeedback.getView().attachments
+  }
+  async function prepare() {
+    preparing = true
+    error = ''
+    try {
+      const result = await browserFeedback.prepare()
+      if (!result.success)
+        throw new Error(result.error.message, { cause: result.error })
+      draft = result.data
+      refreshAttachments()
+      open = true
+    }
+    catch (cause) {
+      error = errorMessage(cause, m.operation_failed())
+    }
+    finally {
+      preparing = false
+    }
+  }
+  function input(data: FeedbackFormData) {
+    return { description: data.description, category: data.type, contact: data.contact, files: data.files, removedAttachmentIds: data.removedAttachmentIds }
+  }
+  async function submit(data: FeedbackFormData) {
+    const result = await browserFeedback.submit(input(data))
+    if (!result.success)
+      throw new Error(result.error.message, { cause: result.error })
+    return result.data
+  }
+  async function annotate(mark: FeedbackAnnotation) {
+    const result = await browserFeedback.annotate(mark.id, { mode: mark.mode, ...mark.rect, coordinateSpace: 'ratio' })
+    if (!result.success)
+      throw new Error(result.error.message, { cause: result.error })
+    refreshAttachments()
+  }
+  async function capturePage(id?: string) {
+    const result = await browserFeedback.captureScreenshot(id)
+    if (!result.success)
+      throw new Error(result.error.message, { cause: result.error })
+    draft = browserFeedback.getDraft()
+    refreshAttachments()
+  }
+  async function addFiles(files: File[], removedAttachmentIds: readonly string[] = []) {
+    const result = await browserFeedback.addFiles(files, removedAttachmentIds)
+    if (!result.success)
+      throw new Error(result.error.message, { cause: result.error })
+    draft = browserFeedback.getDraft()
+    refreshAttachments()
+  }
+  async function exportLocal(data: FeedbackFormData) {
+    const result = await browserFeedback.saveDraft(input(data))
+    if (!result.success)
+      throw new Error(result.error.message, { cause: result.error })
+    return result.data.status !== 'cancelled'
+  }
+  onDestroy(browserFeedback.releasePreviews)
+  useToastFeedback(() => error)
+</script>
+
+<Button variant='ghost' size='sm' loading={preparing} onclick={() => void prepare()} data-testid='feedback-open'>{m.nav_feedback()}</Button>
+<FeedbackModal bind:open {attachments} budget={browserFeedback.budget} resetKey={draft?.submissionId} onsubmit={submit} oncapture={capturePage} onannotate={annotate} onexport={exportLocal} onfileschange={addFiles}
+  evidence={draft?.evidence ?? []}
+  evidenceSummary={draft?.missing.length ? [{ label: m.feedback_logs(), status: 'partial', detail: draft.missing.join(', ') }] : []} />
+{{/if}}

package/templates/apps/fullstack/packages/{{projectName}}-shared/src/lib/pages/audit.svelte.hbs

@@ -0,0 +1,94 @@
+<script lang="ts">
+  import type { AdminAuditLog } from '{{fullstack.contractPackageName}}'
+  import type { ManagementStore } from '../stores/management-store.svelte.js'
+  import { DataTable, FilterBar, FormField, FormLayout, Modal, PageHeader, Pagination } from '@h-ai/ui/components/compounds/index'
+  import { Badge, Button, Input, Select } from '@h-ai/ui/components/primitives/index'
+  import * as m from '../paraglide/messages.js'
+
+  interface Props { store: ManagementStore }
+  const { store }: Props = $props()
+  let selected = $state<AdminAuditLog | null>(null)
+  const columns = $derived([
+    { key: 'createdAt', sortable: true, label: m.created_at() },
+    { key: 'username', label: m.audit_actor() },
+    { key: 'action', sortable: true, label: m.audit_action() },
+    { key: 'category', sortable: true, label: m.audit_category() },
+    { key: 'outcome', sortable: true, label: m.audit_outcome() },
+    { key: 'severity', sortable: true, label: m.audit_severity() },
+    { key: 'resource', sortable: true, label: m.audit_resource() },
+    { key: 'ipAddress', label: m.audit_ip() },
+  ])
+</script>
+
+<section class="flex min-h-0 flex-1 flex-col gap-3" data-testid="audit-page">
+  <PageHeader title={m.nav_audit()} description={m.audit_description()} class='mb-0 shrink-0'>
+    {#snippet actions()}{#if store.auditBackupEnabled && store.hasPermission('audit:backup')}<Button size='sm' variant='outline' loading={store.saving} onclick={() => void store.backupAudit()} data-testid='audit-backup'>{m.audit_backup_run()}</Button>{/if}{/snippet}
+  </PageHeader>
+  {#if store.auditBackupReceipt}<p class='break-all font-mono text-xs' data-testid='audit-backup-receipt'>{store.auditBackupReceipt.key} · {store.auditBackupReceipt.recordCount} · SHA-256: {store.auditBackupReceipt.sha256}</p>{/if}
+  <div class="flex min-h-0 flex-1 flex-col overflow-hidden rounded-xl border border-base-content/8 bg-base-100">
+    <form class='shrink-0 border-b border-base-content/8 p-3' onsubmit={(event) => {
+      event.preventDefault()
+      void store.queryAudit()
+    }}>
+      <FilterBar data-testid='audit-filters' activeCount={[store.auditAction, store.auditResource, store.auditStartDate, store.auditEndDate, store.auditCategory, store.auditOutcome, store.auditSeverity].filter(Boolean).length} onreset={() => {
+        store.auditAction = ''
+        store.auditResource = ''
+        store.auditStartDate = ''
+        store.auditEndDate = ''
+        store.auditCategory = ''
+        store.auditOutcome = ''
+        store.auditSeverity = ''
+        store.auditSortBy = 'createdAt'
+        store.auditSortDirection = 'desc'
+        void store.queryAudit()
+      }}>
+        {#snippet leading()}<div class='min-w-0 flex-1'><label class='sr-only' for='audit-action'>{m.audit_action()}</label><Input id='audit-action' size='sm' bind:value={store.auditAction} placeholder={m.audit_action_placeholder()} data-testid='audit-action' /></div>{/snippet}
+        {#snippet actions()}<Button type='submit' submitHint size='sm' variant='outline' disabled={store.loading}>{m.search()}</Button>{/snippet}
+        <FormLayout columns={2} class='w-full [--hai-form-gap:1rem_1.25rem]' data-testid='audit-advanced'>
+          <FormField label={m.audit_resource()}><Input size='sm' id="audit-resource" bind:value={store.auditResource} placeholder={m.audit_resource_placeholder()} data-testid="audit-resource" /></FormField>
+          <FormField label={m.audit_start()} for="audit-start"><input id="audit-start" type="date" class="input block h-9 min-w-0 w-full" bind:value={store.auditStartDate} /></FormField>
+          <FormField label={m.audit_end()} for="audit-end"><input id="audit-end" type="date" class="input block h-9 min-w-0 w-full" bind:value={store.auditEndDate} /></FormField>
+          <FormField label={m.audit_category()}><Select size='sm' bind:value={store.auditCategory} options={[{ value: '', label: m.audit_all() }, { value: 'system', label: m.audit_category_system() }, { value: 'business', label: m.audit_category_business() }]} data-testid='audit-category' /></FormField>
+          <FormField label={m.audit_outcome()}><Select size='sm' bind:value={store.auditOutcome} options={[{ value: '', label: m.audit_all() }, { value: 'success', label: m.audit_success() }, { value: 'failure', label: m.audit_failure() }, { value: 'denied', label: m.audit_denied() }]} data-testid='audit-outcome' /></FormField>
+          <FormField label={m.audit_severity()}><Select size='sm' bind:value={store.auditSeverity} options={[{ value: '', label: m.audit_all() }, { value: 'info', label: m.audit_info() }, { value: 'warning', label: m.audit_warning() }, { value: 'error', label: m.audit_error() }, { value: 'critical', label: m.audit_critical() }]} data-testid='audit-severity' /></FormField>
+        </FormLayout>
+      <div class='w-full space-y-2'>
+        <p class='text-xs text-base-content/60'>{m.audit_stats_hint()}</p>
+        <div class='flex flex-wrap gap-2'>{#each store.auditStats as stat (stat.action)}<Badge variant='ghost'>{stat.action}: {stat.count}</Badge>{/each}</div>
+      </div>
+      </FilterBar>
+    </form>
+    <div class="flex min-h-32 flex-1 flex-col overflow-auto">
+      <DataTable data={store.audit} {columns} keyField="id" loading={store.loading} striped={false} sortKey={store.auditSortBy} sortDir={store.auditSortDirection} onsort={(key, direction) => void store.sortAudit(key, direction)} class="min-h-0 flex-1 overflow-auto">
+        {#snippet cell(entry, key)}
+          {#if key === 'createdAt'}<span class="whitespace-nowrap text-xs">{store.formatDate(entry.createdAt)}</span>
+          {:else if key === 'username'}{entry.username || m.audit_system()}
+          {:else if key === 'action'}<span class="rounded-md bg-base-200 px-2 py-1 font-mono text-xs">{entry.action}</span>
+          {:else if key === 'category' || key === 'outcome' || key === 'severity'}{entry[key] ?? '—'}
+          {:else if key === 'resource'}<span class="text-sm">{entry.resource}</span>
+          {:else if key === 'ipAddress'}<span class="text-xs text-base-content/55">{entry.ipAddress || '—'}</span>{/if}
+        {/snippet}
+        {#snippet actions(entry)}<Button size="xs" variant="ghost" onclick={() => { selected = entry }}>{m.details()}</Button>{/snippet}
+      </DataTable>
+    </div>
+    <div class="mt-auto shrink-0 border-t border-base-content/8 px-3 py-2"><Pagination page={store.auditPage} total={store.auditTotal} pageSize={store.pageSize} onchange={page => void store.loadAudit(page)} /></div>
+  </div>
+</section>
+
+<Modal open={!!selected} title={m.audit_details()} onclose={() => { selected = null }}>
+  {#if selected}
+    <dl class="grid grid-cols-[auto_1fr] gap-x-5 gap-y-3 text-sm">
+      <dt>{m.audit_request_id()}</dt><dd class='break-all'>{selected.requestId ?? '—'}</dd>
+      <dt>{m.audit_trace_id()}</dt><dd class='break-all'>{selected.traceId ?? '—'}</dd>
+      <dt>{m.audit_scope()}</dt><dd class='break-all'>{selected.scopeId ?? '—'}</dd>
+      <dt>{m.audit_actor_snapshot()}</dt><dd class='break-all'>{selected.actorSnapshot ? JSON.stringify(selected.actorSnapshot) : '—'}</dd>
+      <dt class="text-base-content/50">{m.created_at()}</dt><dd>{store.formatDate(selected.createdAt)}</dd>
+      <dt class="text-base-content/50">{m.audit_actor()}</dt><dd class="break-all">{selected.username || m.audit_system()}</dd>
+      <dt class="text-base-content/50">{m.audit_action()}</dt><dd>{selected.action}</dd>
+      <dt class="text-base-content/50">{m.audit_resource()}</dt><dd>{selected.resource}</dd>
+      <dt class="text-base-content/50">{m.audit_resource_id()}</dt><dd class="break-all">{selected.resourceId || '—'}</dd>
+      <dt class="text-base-content/50">{m.audit_ip()}</dt><dd>{selected.ipAddress || '—'}</dd>
+    </dl>
+    <pre class="mt-5 max-h-72 overflow-auto whitespace-pre-wrap rounded-lg bg-base-200 p-4 text-xs">{selected.details || '—'}</pre>
+  {/if}
+</Modal>

package/templates/apps/fullstack/packages/{{projectName}}-shared/src/lib/pages/configuration.svelte.hbs

@@ -0,0 +1,25 @@
+<script lang='ts'>
+  import type { ManagementStore } from '../stores/management-store.svelte.js'
+  import { Card, FormField, PageHeader } from '@h-ai/ui/components/compounds/index'
+  import { Button, Textarea } from '@h-ai/ui/components/primitives/index'
+  import * as m from '../paraglide/messages.js'
+
+  interface Props { store: ManagementStore }
+  const { store }: Props = $props()
+</script>
+
+<section class='max-w-2xl space-y-3' data-testid='configuration-page'>
+  <PageHeader title={m.business_settings_title()} class='mb-0' />
+  <Card bordered shadow={false}>
+    <form class='space-y-4' onsubmit={(event) => {
+      event.preventDefault()
+      void store.saveConfiguration()
+    }}>
+      <FormField label={m.business_notice_label()} for='business-notice'>
+        <Textarea id='business-notice' bind:value={store.businessNotice} disabled={store.loading || store.saving} maxlength={200} rows={4} data-testid='business-notice-input' />
+      </FormField>
+      <p class='text-sm text-base-content/60'>{m.business_notice_hint()}</p>
+      <Button type='submit' loading={store.saving} disabled={store.loading}>{m.save()}</Button>
+    </form>
+  </Card>
+</section>

package/templates/apps/fullstack/packages/{{projectName}}-shared/src/lib/pages/feedback.svelte.hbs

@@ -0,0 +1,157 @@
+{{! @skipIfEmpty }}
+{{#if features.feedback}}
+<script lang='ts'>
+  import type { FeedbackDetail as Detail, FeedbackEvidenceInput, FeedbackReport } from '@h-ai/api-contract/feedback'
+  import type { FeedbackEvidenceQuery, FeedbackListQuery, FeedbackReportView, FeedbackStatusChange } from '@h-ai/ui'
+  import type { ManagementStore } from '../stores/management-store.svelte.js'
+  import { PageHeader } from '@h-ai/ui/components/compounds/index'
+  import { FeedbackDetail, FeedbackList } from '@h-ai/ui/components/scenes/app/index'
+  import { errorMessage } from '@h-ai/ui/toast'
+  import { onMount } from 'svelte'
+  import { managementApi } from '../api/api-client.js'
+  import { downloadFeedback, feedbackDataBytes, feedbackReview } from '../api/feedback-client.js'
+  import * as m from '../paraglide/messages.js'
+
+  const { store }: { store: ManagementStore } = $props()
+  let page = $state({ items: [] as FeedbackReportView[], total: 0, page: 1, pageSize: 20 })
+  let query = $state<FeedbackListQuery>({ page: 1, pageSize: 20 })
+  let selected = $state<Detail>()
+  let evidence = $state({ items: [] as FeedbackEvidenceInput[], total: 0, page: 1, pageSize: 20 })
+  let loading = $state(false)
+  let error = $state('')
+  let requestVersion = 0
+  let detailVersion = 0
+  let imageUrls = $state<Record<string, string>>({})
+  const permissions = $derived({ read: store.hasPermission('feedback:read'), process: store.hasPermission('feedback:process'), reopen: store.hasPermission('feedback:reopen'), export: store.hasPermission('feedback:export'), retry: store.hasPermission('feedback:process') })
+  function view(report: FeedbackReport): FeedbackReportView {
+    return { ...report, description: report.description || report.summary || '', appVersion: report.appVersion || '' }
+  }
+  async function load(next: FeedbackListQuery = query) {
+    const version = ++requestVersion
+    query = next
+    loading = true
+    error = ''
+    try {
+      const result = await managementApi.feedback.reports.list(next)
+      if (!result.success)
+        throw new Error(result.error.message, { cause: result.error })
+      if (version === requestVersion)
+        page = { ...result.data, items: result.data.items.map(view) }
+    }
+    catch (cause) {
+      if (version === requestVersion)
+        error = errorMessage(cause, m.operation_failed())
+    }
+    finally {
+      if (version === requestVersion)
+        loading = false
+    }
+  }
+  async function loadEvidence(next: FeedbackEvidenceQuery = { page: 1, pageSize: 20 }) {
+    if (!selected)
+      return
+    const id = selected.report.id
+    const kind = next.kind as FeedbackEvidenceInput['kind'] | undefined
+    const result = await managementApi.feedback.reports.getEvidence({ ...next, kind, id })
+    if (!result.success)
+      throw new Error(result.error.message, { cause: result.error })
+    if (selected?.report.id === id)
+      evidence = result.data
+  }
+  async function selectId(id: string) {
+    const version = ++detailVersion
+    const result = await managementApi.feedback.reports.get({ id })
+    if (version !== detailVersion)
+      return
+    if (!result.success)
+      throw new Error(result.error.message, { cause: result.error })
+    selected = result.data
+    await loadEvidence()
+  }
+  async function loadReplay() {
+    const id = selected?.report.id
+    if (!id)
+      return []
+    const result = await feedbackReview.loadReplay(id)
+    if (!result.success)
+      throw new Error(result.error.message, { cause: result.error })
+    return result.data
+  }
+  async function select(report: FeedbackReportView) {
+    await selectId(report.id)
+  }
+  function closeDetail() {
+    detailVersion++
+    selected = undefined
+  }
+  async function status(input: FeedbackStatusChange) {
+    const result = await managementApi.feedback.reports.setStatus(input)
+    if (!result.success)
+      throw new Error(result.error.message, { cause: result.error })
+    if (selected?.report.id === input.id)
+      await select(view(result.data))
+    await load()
+  }
+  async function retry(report: FeedbackReportView) {
+    const retried = await feedbackReview.retryReport(report.id)
+    if (!retried.success)
+      throw new Error(retried.error.message, { cause: retried.error })
+    if (selected?.report.id === report.id)
+      await select(report)
+    await load()
+  }
+  async function exportBundle(report: FeedbackReportView) {
+    const result = await feedbackReview.exportReport(report.id)
+    if (!result.success)
+      throw new Error(result.error.message, { cause: result.error })
+  }
+  async function attachment(id: string) {
+    if (!selected)
+      return
+    const result = await managementApi.feedback.attachments.get({ id: selected.report.id, attachmentId: id })
+    if (!result.success)
+      throw new Error(result.error.message, { cause: result.error })
+    if (result.data.contentType.startsWith('image/') || result.data.contentType.startsWith('video/')) {
+      if (imageUrls[id])
+        URL.revokeObjectURL(imageUrls[id])
+      imageUrls = { ...imageUrls, [id]: URL.createObjectURL(new Blob([new Uint8Array(feedbackDataBytes(result.data)).buffer], { type: result.data.contentType })) }
+    }
+    else {
+      await downloadFeedback(feedbackDataBytes(result.data), result.data.name, result.data.contentType)
+    }
+  }
+  onMount(() => {
+    let active = true
+    void load().then(async () => {
+      if (!active)
+        return
+      const id = new URL(location.href).searchParams.get('feedback')
+      if (id)
+        await selectId(id)
+    }).catch((cause) => {
+      if (active)
+        error = errorMessage(cause, m.operation_failed())
+    })
+    return () => {
+      active = false
+      requestVersion++
+      detailVersion++
+      for (const url of Object.values(imageUrls)) {
+        URL.revokeObjectURL(url)
+      }
+    }
+  })
+</script>
+
+<section data-testid='feedback-page' class='flex min-h-0 flex-1 flex-col gap-3'>
+  <PageHeader title={m.nav_feedback()} class='mb-0' />
+  {#if selected}
+    <FeedbackDetail report={view(selected.report)} webhook={selected.jobs.find(job => job.type === 'webhook')} {evidence} history={selected.history.map(item => ({ id: item.id, actorId: item.userId, fromStatus: item.from, toStatus: item.to, createdAt: item.timestamp, note: item.note }))} {permissions}
+      attachments={selected.attachments.map(item => ({ ...item, mimeType: item.contentType, url: imageUrls[item.id] }))}
+      onevidencequery={loadEvidence} onreplay={loadReplay} onstatus={status} onexport={exportBundle} onretry={retry}
+      onattachment={item => attachment(item.id)} onclose={closeDetail} />
+  {:else}
+    <FeedbackList data={page} bind:query {permissions} {loading} {error} onquerychange={load} onview={select} onstatus={status} onexport={exportBundle} onretry={retry} />
+  {/if}
+</section>
+{{/if}}