@happyvertical/smrt-reports 0.57.5 → 0.57.7

package/dist/svelte/ReportConfirmation.svelte

@@ -1,11 +1,17 @@
 <script lang="ts">
 import { useI18n } from '@happyvertical/smrt-ui/i18n';
 import { Button } from '@happyvertical/smrt-ui/ui';
+import { describeReport, type ReportFieldInfo } from './describe.js';
 import { M } from './messages.js';
 import ReportResult from './ReportResult.svelte';
 import { reportError, validReportProposal } from './result.js';
 import type { RuntimeReportProposal, SavedRuntimeReport } from './types.js';
 
+/** How a confirmation was answered; it then renders as a read-only line. */
+export type ReportConfirmationOutcome =
+  | { status: 'saved'; report: Pick<SavedRuntimeReport, 'id' | 'title'> }
+  | { status: 'declined' };
+
 export interface Props {
   proposal: RuntimeReportProposal;
   /** Posts the exact displayed spec and hash to the authenticated confirm route. */
@@ -13,6 +19,18 @@ export interface Props {
   reportHref?: (id: string) => string;
   ondecline?: () => void;
   onsaved?: (report: SavedRuntimeReport) => void;
+  /**
+   * An earlier answer (from the transcript): the card shows its outcome line
+   * and offers no buttons, so a reloaded or re-rendered card cannot approve
+   * twice.
+   */
+  outcome?: ReportConfirmationOutcome | null;
+  /**
+   * The source's field labels and formats (its descriptor's `fields`), so
+   * groupings and filters read "Issue date", "Total amount" and money, not
+   * model field names. Omitted, names are humanized.
+   */
+  fields?: readonly ReportFieldInfo[];
   locale?: string;
   currency?: string;
 }
@@ -22,12 +40,14 @@ let {
   reportHref = (id) => `/reports/${encodeURIComponent(id)}`,
   ondecline,
   onsaved,
+  outcome = null,
+  fields = [],
   locale = 'en',
   currency = 'USD',
 }: Props = $props();
 const { t } = useI18n();
 let status = $state<'idle' | 'saving' | 'declined' | 'saved'>('idle');
-let saved = $state<SavedRuntimeReport | null>(null);
+let saved = $state<Pick<SavedRuntimeReport, 'id' | 'title'> | null>(null);
 let error = $state<ReturnType<typeof reportError> | null>(null);
 let epoch = 0;
 $effect(() => {
@@ -42,10 +62,32 @@ $effect(() => {
   };
 });
 const valid = $derived(validReportProposal(proposal));
-const label = (field: string) => field;
+const answered = $derived<ReportConfirmationOutcome | null>(
+  outcome ??
+    (status === 'saved' && saved
+      ? { status: 'saved', report: saved }
+      : status === 'declined'
+        ? { status: 'declined' }
+        : null),
+);
+const description = $derived(
+  valid
+    ? describeReport(proposal.spec, {
+        t,
+        locale,
+        currency,
+        source: {
+          id: proposal.spec.source,
+          label: proposal.sourceLabel,
+          fields,
+        },
+        columns: proposal.preview.columns,
+      })
+    : null,
+);
 async function approve(event: MouseEvent) {
   // Approval is an immediate local human action, never a model-callable tool.
-  if (!event.isTrusted || status !== 'idle' || !valid) return;
+  if (!event.isTrusted || status !== 'idle' || !valid || answered) return;
   const current = epoch;
   const specHash = proposal.specHash;
   status = 'saving';
@@ -64,36 +106,67 @@ async function approve(event: MouseEvent) {
   }
 }
 function decline() {
-  if (status !== 'idle') return;
+  if (status !== 'idle' || answered) return;
   status = 'declined';
   ondecline?.();
 }
 </script>
 
 <section data-smrt-component="ReportConfirmation" aria-label={t(M['reports.confirm_title'])}>
-  <h2>{valid ? proposal.spec.title : t(M['reports.confirm_title'])}</h2>
+  <h3 class="report-confirmation-title">{valid ? proposal.spec.title : t(M['reports.confirm_title'])}</h3>
   {#if !valid}
     <p role="alert">{t(M['reports.invalid'])}</p>
-  {:else if saved}
-    <p role="status">{t(M['reports.saved'])}</p>
-    <a href={reportHref(saved.id)}>{saved.title}</a>
-  {:else if status === 'declined'}
-    <p role="status">{t(M['reports.declined'])}</p>
   {:else}
-    {#if proposal.spec.description}<p>{proposal.spec.description}</p>{/if}
-    <dl>
-      <dt>{t(M['reports.source'])}</dt><dd>{proposal.sourceLabel}</dd>
-      <dt>{t(M['reports.groupings'])}</dt>
-      <dd>{#each proposal.spec.dimensions as d (d.as)}<p>{label(d.field)}{#if d.bucket} · {t(`reports.bucket.${d.bucket}`)}{/if}</p>{:else}{t(M['reports.none'])}{/each}</dd>
-      <dt>{t(M['reports.measures'])}</dt>
-      <dd>{#each proposal.spec.measures as m (m.as)}<p>{t(`reports.aggregate.${m.fn}`, { field: m.field ? label(m.field) : t(M['reports.rows']) })}</p>{/each}</dd>
-      <dt>{t(M['reports.filters'])}</dt>
-      <dd>{#each proposal.spec.filters as f, i (i)}<p>{label(f.field)} {t(`reports.operator.${f.op}`)} {Array.isArray(f.value) ? f.value.join(', ') : String(f.value ?? '')}</p>{:else}{t(M['reports.none'])}{/each}</dd>
-      {#if proposal.spec.having.length}<dt>{t(M['reports.having'])}</dt><dd>{#each proposal.spec.having as h, i (i)}<p>{h.measure} {t(`reports.operator.${h.op}`)} {h.value}</p>{/each}</dd>{/if}
-    </dl>
+    {#if proposal.spec.description}<p class="report-confirmation-description">{proposal.spec.description}</p>{/if}
+    {#if description}
+      <dl class="report-confirmation-facts">
+        <div><dt>{t(M['reports.source'])}</dt><dd>{description.source}</dd></div>
+        <div><dt>{t(M['reports.groupings'])}</dt><dd>{description.groupings || t(M['reports.none'])}</dd></div>
+        {#if description.period}
+          <div><dt>{t(M['reports.period'])}</dt><dd>{description.period.range}</dd></div>
+        {/if}
+        <div><dt>{t(M['reports.measures'])}</dt><dd>{description.measures.join(', ')}</dd></div>
+        {#if description.filters.length}
+          <div><dt>{t(M['reports.filters'])}</dt><dd>{description.filters.join('; ')}</dd></div>
+        {/if}
+        {#if description.having.length}
+          <div><dt>{t(M['reports.having'])}</dt><dd>{description.having.join('; ')}</dd></div>
+        {/if}
+      </dl>
+    {/if}
     <ReportResult result={proposal.preview} {locale} {currency} />
-    {#if error}<p role="alert">{t(M[error])}</p>{/if}
-    <Button disabled={status === 'saving'} onclick={approve}>{t(M[status === 'saving' ? 'reports.saving' : 'reports.approve'])}</Button>
-    <Button disabled={status === 'saving'} onclick={decline}>{t(M['reports.decline'])}</Button>
+    {#if answered?.status === 'saved'}
+      <p class="report-confirmation-outcome" role="status">{t(M['reports.saved'])} · <a href={reportHref(answered.report.id)}>{t(M['reports.open'])}</a></p>
+    {:else if answered?.status === 'declined'}
+      <p class="report-confirmation-outcome" role="status">{t(M['reports.declined'])}</p>
+    {:else}
+      {#if error}<p role="alert">{t(M[error])}</p>{/if}
+      <div class="report-confirmation-actions">
+        <Button variant="secondary" disabled={status === 'saving'} onclick={decline}>{t(M['reports.decline'])}</Button>
+        <Button disabled={status === 'saving'} aria-busy={status === 'saving'} onclick={approve}>{t(M[status === 'saving' ? 'reports.saving' : 'reports.approve'])}</Button>
+      </div>
+    {/if}
   {/if}
 </section>
+
+<style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
+  [data-smrt-component='ReportConfirmation'] { display: grid; gap: var(--smrt-spacing-3); inline-size: 100%; min-inline-size: 0; box-sizing: border-box; padding: var(--smrt-spacing-3); border: var(--smrt-hairline); border-radius: var(--smrt-radius-large); background: var(--smrt-color-surface-container); color: var(--smrt-color-on-surface); container-type: inline-size; }
+  .report-confirmation-title { margin: 0; font: var(--smrt-typography-title-medium-font); overflow-wrap: anywhere; }
+  .report-confirmation-description { margin: 0; color: var(--smrt-color-on-surface-variant); font-size: var(--smrt-typography-body-small-size); }
+  .report-confirmation-facts { display: grid; gap: var(--smrt-spacing-1); margin: 0; font-size: var(--smrt-typography-body-small-size); }
+  .report-confirmation-facts > div { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: var(--smrt-spacing-2); align-items: baseline; }
+  .report-confirmation-facts dt { color: var(--smrt-color-on-surface-variant); }
+  .report-confirmation-facts dd { margin: 0; overflow-wrap: anywhere; }
+  .report-confirmation-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--smrt-spacing-2); }
+  /* A narrow dock: labels over values, and the actions share the row. */
+  @container (max-width: 12rem) {
+    .report-confirmation-facts > div { grid-template-columns: minmax(0, 1fr); gap: 0; }
+  }
+  @container (max-width: 22rem) {
+    .report-confirmation-actions > :global(*) { flex: 1 1 0; }
+  }
+  .report-confirmation-outcome { margin: 0; color: var(--smrt-color-on-surface-variant); font-size: var(--smrt-typography-body-small-size); }
+}
+</style>

package/dist/svelte/ReportConfirmation.svelte.d.ts

@@ -1,4 +1,12 @@
+import { type ReportFieldInfo } from './describe.js';
 import type { RuntimeReportProposal, SavedRuntimeReport } from './types.js';
+/** How a confirmation was answered; it then renders as a read-only line. */
+export type ReportConfirmationOutcome = {
+    status: 'saved';
+    report: Pick<SavedRuntimeReport, 'id' | 'title'>;
+} | {
+    status: 'declined';
+};
 export interface Props {
     proposal: RuntimeReportProposal;
     /** Posts the exact displayed spec and hash to the authenticated confirm route. */
@@ -6,6 +14,18 @@ export interface Props {
     reportHref?: (id: string) => string;
     ondecline?: () => void;
     onsaved?: (report: SavedRuntimeReport) => void;
+    /**
+     * An earlier answer (from the transcript): the card shows its outcome line
+     * and offers no buttons, so a reloaded or re-rendered card cannot approve
+     * twice.
+     */
+    outcome?: ReportConfirmationOutcome | null;
+    /**
+     * The source's field labels and formats (its descriptor's `fields`), so
+     * groupings and filters read "Issue date", "Total amount" and money, not
+     * model field names. Omitted, names are humanized.
+     */
+    fields?: readonly ReportFieldInfo[];
     locale?: string;
     currency?: string;
 }

package/dist/svelte/ReportConfirmation.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ReportConfirmation.svelte.d.ts","sourceRoot":"","sources":["../../src/svelte/ReportConfirmation.svelte.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,qBAAqB,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AAG5E,MAAM,WAAW,KAAK;IACpB,QAAQ,EAAE,qBAAqB,CAAC;IAChC,kFAAkF;IAClF,OAAO,EAAE,CAAC,QAAQ,EAAE,qBAAqB,KAAK,OAAO,CAAC,kBAAkB,CAAC,CAAC;IAC1E,UAAU,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,MAAM,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAC/C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AA6FD,QAAA,MAAM,kBAAkB,2CAAwC,CAAC;AACjE,KAAK,kBAAkB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAChE,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"ReportConfirmation.svelte.d.ts","sourceRoot":"","sources":["../../src/svelte/ReportConfirmation.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,EAAkB,KAAK,eAAe,EAAE,MAAM,eAAe,CAAC;AAIrE,OAAO,KAAK,EAAE,qBAAqB,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AAG5E,4EAA4E;AAC5E,MAAM,MAAM,yBAAyB,GACjC;IAAE,MAAM,EAAE,OAAO,CAAC;IAAC,MAAM,EAAE,IAAI,CAAC,kBAAkB,EAAE,IAAI,GAAG,OAAO,CAAC,CAAA;CAAE,GACrE;IAAE,MAAM,EAAE,UAAU,CAAA;CAAE,CAAC;AAE3B,MAAM,WAAW,KAAK;IACpB,QAAQ,EAAE,qBAAqB,CAAC;IAChC,kFAAkF;IAClF,OAAO,EAAE,CAAC,QAAQ,EAAE,qBAAqB,KAAK,OAAO,CAAC,kBAAkB,CAAC,CAAC;IAC1E,UAAU,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,MAAM,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAC/C;;;;OAIG;IACH,OAAO,CAAC,EAAE,yBAAyB,GAAG,IAAI,CAAC;IAC3C;;;;OAIG;IACH,MAAM,CAAC,EAAE,SAAS,eAAe,EAAE,CAAC;IACpC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAkID,QAAA,MAAM,kBAAkB,2CAAwC,CAAC;AACjE,KAAK,kBAAkB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAChE,eAAe,kBAAkB,CAAC"}

package/dist/svelte/ReportDetail.svelte

@@ -1,9 +1,26 @@
 <script lang="ts">
+/**
+ * A saved report's page: its title and description, what it covers (source,
+ * groupings, the period with its dates, measures, filters, who saved it and
+ * when it last ran), then its result run afresh: headline figures and a chart
+ * or table. The primary action follows the report's state: Edit (asks the
+ * page's assistant), Try again after a failed run, Restore when archived.
+ * Export CSV sits beside it; Re-run and Archive are in the "more" menu.
+ */
+import { requestAssistant } from '@happyvertical/smrt-ui/chat';
+import { ConfirmDialog } from '@happyvertical/smrt-ui/feedback';
 import { useI18n } from '@happyvertical/smrt-ui/i18n';
-import { Button } from '@happyvertical/smrt-ui/ui';
+import { Badge, Button, Menu } from '@happyvertical/smrt-ui/ui';
+import { untrack } from 'svelte';
+import {
+  describeReport,
+  type ReportSourceInfo,
+  relativeTime,
+  reportCsv,
+} from './describe.js';
 import { M } from './messages.js';
 import ReportResult from './ReportResult.svelte';
-import { reportError, validReportResult } from './result.js';
+import { reportCell, reportError, validReportResult } from './result.js';
 import type {
   RuntimeReportResult,
   RuntimeReportsClient,
@@ -13,22 +30,47 @@ import type {
 export interface Props {
   id: string;
   client?: RuntimeReportsClient;
+  /** The report sources by label and fields (`reports.runtime.sources`). */
+  sources?: readonly ReportSourceInfo[];
+  /** Host-owned identity projection ("You"); others stay unnamed. */
+  authorLabel?: (userId: string) => string | undefined;
+  /** Called with the report once it loads (a host titles its page with it). */
+  onreport?: (report: SavedRuntimeReport) => void;
+  /** Replace Edit asking the page's assistant. */
+  onedit?: (report: SavedRuntimeReport) => void;
   locale?: string;
   currency?: string;
 }
-let { id, client, locale = 'en', currency = 'USD' }: Props = $props();
+let {
+  id,
+  client,
+  sources = [],
+  authorLabel = () => undefined,
+  onreport,
+  onedit,
+  locale = 'en',
+  currency = 'USD',
+}: Props = $props();
 const { t } = useI18n();
 let report = $state<SavedRuntimeReport | null>(null);
 let result = $state<RuntimeReportResult | null>(null);
 let error = $state<ReturnType<typeof reportError> | null>(null);
 let loading = $state(false);
 let revision = $state(0);
+let view = $state<'chart' | 'table'>('chart');
+let confirming = $state(false);
+let archiving = $state(false);
+let askNote = $state(false);
+let root = $state<HTMLElement | null>(null);
+let shownId: string | null = null;
 $effect(() => {
   const transport = client;
   const reportId = id;
   revision;
   let active = true;
-  report = null;
+  // A re-run keeps the report shown; another report starts blank.
+  if (shownId !== reportId) report = null;
+  shownId = reportId;
   result = null;
   error = null;
   loading = !!transport;
@@ -38,6 +80,8 @@ $effect(() => {
         const saved = await transport.get(reportId);
         if (!active) return;
         report = saved;
+        untrack(() => onreport)?.(saved);
+        if (saved.status === 'archived') return;
         const value = await transport.run(reportId);
         if (!active) return;
         if (!validReportResult(value)) error = 'reports.invalid';
@@ -53,17 +97,224 @@ $effect(() => {
     active = false;
   };
 });
+
+const source = $derived(
+  report ? sources.find((s) => s.id === report?.sourceId) : undefined,
+);
+const description = $derived(
+  report
+    ? describeReport(report.spec, {
+        t,
+        locale,
+        currency,
+        source,
+        columns: result?.columns,
+      })
+    : null,
+);
+const author = $derived(
+  report ? authorLabel(report.createdByUserId) : undefined,
+);
+const savedText = $derived.by(() => {
+  if (!report) return '';
+  const time = report.savedAt ? relativeTime(report.savedAt, locale) : '';
+  if (author && time) return t(M['reports.saved_by_at'], { author, time });
+  if (author) return t(M['reports.saved_by'], { author });
+  return time ? t(M['reports.saved_at'], { time }) : '';
+});
+const ranText = $derived(
+  result?.ranAt
+    ? t(M['reports.ran_at'], {
+        time: relativeTime(
+          result.ranAt,
+          locale,
+          undefined,
+          t(M['reports.just_now']),
+        ),
+      })
+    : '',
+);
+const archived = $derived(report?.status === 'archived');
+
+function edit() {
+  if (!report) return;
+  if (onedit) {
+    onedit(report);
+    return;
+  }
+  askNote = !(
+    root &&
+    requestAssistant(root, {
+      prompt: t(M['reports.edit_prompt'], { title: report.title }),
+    })
+  );
+}
+
+function exportCsv() {
+  if (!result || !report || typeof document === 'undefined') return;
+  const csv = reportCsv(result, (value, column) =>
+    typeof value === 'boolean'
+      ? t(M[value ? 'reports.yes' : 'reports.no'])
+      : reportCell(value, column, locale, currency),
+  );
+  const url = URL.createObjectURL(
+    new Blob([csv], { type: 'text/csv;charset=utf-8' }),
+  );
+  const link = document.createElement('a');
+  link.href = url;
+  link.download = `${
+    report.title
+      .replace(/[^\p{L}\p{N}]+/gu, '-')
+      .replace(/^-|-$/g, '')
+      .toLowerCase() || 'report'
+  }.csv`;
+  link.click();
+  setTimeout(() => URL.revokeObjectURL(url), 0);
+}
+
+async function setArchived(next: boolean) {
+  if (!client || !report || archiving) return;
+  archiving = true;
+  error = null;
+  try {
+    await client.archive(report.id, next);
+    revision++;
+  } catch (e) {
+    error = reportError(e);
+  } finally {
+    archiving = false;
+    confirming = false;
+  }
+}
+
+// The page runs the report afresh each time it opens, so Re-run is a
+// secondary action beside Archive.
+const menu = $derived([
+  ...(report && !archived && !error
+    ? [
+        {
+          id: 'rerun',
+          label: t(M['reports.rerun']),
+          disabled: loading,
+          onselect: () => {
+            revision++;
+          },
+        },
+      ]
+    : []),
+  ...(report?.canArchive && !archived
+    ? [
+        {
+          id: 'archive',
+          label: t(M['reports.archive']),
+          disabled: archiving,
+          onselect: () => {
+            confirming = true;
+          },
+        },
+      ]
+    : []),
+]);
 </script>
 
-<section data-smrt-component="ReportDetail" aria-label={t(M['reports.title'])}>
-  <h1>{report?.title ?? t(M['reports.title'])}</h1>
+<section
+  bind:this={root}
+  class="report-detail"
+  data-smrt-component="ReportDetail"
+  data-report-id={id}
+  aria-label={report?.title ?? t(M['reports.title'])}
+>
+  <header class="report-detail__head">
+    <div class="report-detail__heading">
+      <div class="report-detail__title-row">
+        <h1 class="report-detail__title">{report?.title ?? t(M['reports.title'])}</h1>
+        {#if archived}<Badge>{t(M['reports.archived_badge'])}</Badge>{/if}
+      </div>
+      {#if description}<p class="report-detail__line">{description.line}</p>{/if}
+      {#if report?.description}<p class="report-detail__description">{report.description}</p>{/if}
+    </div>
+    {#if client && report}
+      <div class="report-detail__actions">
+        {#if archived}
+          {#if report.canArchive}<Button variant="primary" disabled={archiving} onclick={() => setArchived(false)}>{t(M['reports.restore'])}</Button>{/if}
+        {:else if error}
+          <Button variant="primary" disabled={loading} onclick={() => revision++}>{t(M['reports.retry'])}</Button>
+        {:else}
+          <Button variant="secondary" disabled={!result} onclick={exportCsv}>{t(M['reports.export_csv'])}</Button>
+          <Button variant="primary" onclick={edit}>{t(M['reports.edit'])}</Button>
+        {/if}
+        {#if menu.length}
+          <Menu variant="icon" placement="bottom-end" triggerLabel={t(M['reports.more'], { title: report.title })} items={menu}>
+          {#snippet trigger()}<span aria-hidden="true">⋯</span>{/snippet}
+        </Menu>
+        {/if}
+      </div>
+    {/if}
+  </header>
   {#if !client}
-    <p>{t(M['reports.unavailable'])}</p>
+    <p class="report-detail__note">{t(M['reports.unavailable'])}</p>
   {:else}
-    {#if report?.description}<p>{report.description}</p>{/if}
-    <Button disabled={loading} onclick={() => revision++}>{t(M['reports.rerun'])}</Button>
-    {#if loading}<p role="status">{t(M['reports.running'])}</p>{/if}
-    {#if error}<p role="alert">{t(M[error])}</p>{/if}
-    {#if result}<ReportResult {result} {locale} {currency} />{/if}
+    {#if description}
+      <dl class="report-detail__facts" aria-label={t(M['reports.details'])}>
+        <div><dt>{t(M['reports.source'])}</dt><dd>{description.source}</dd></div>
+        <div><dt>{t(M['reports.groupings'])}</dt><dd>{description.groupings || t(M['reports.none'])}</dd></div>
+        {#if description.period}
+          <div><dt>{t(M['reports.period'])}</dt><dd>{description.period.range}<span class="report-detail__aside">{' · '}{description.period.field}</span></dd></div>
+        {/if}
+        <div><dt>{t(M['reports.measures'])}</dt><dd>{description.measures.join(', ')}</dd></div>
+        {#if description.filters.length}
+          <div><dt>{t(M['reports.filters'])}</dt><dd>{description.filters.join('; ')}</dd></div>
+        {/if}
+        {#if description.having.length}
+          <div><dt>{t(M['reports.having'])}</dt><dd>{description.having.join('; ')}</dd></div>
+        {/if}
+        {#if savedText || ranText}
+          <div class="report-detail__meta"><dt class="report-detail__sr">{t(M['reports.author'])}</dt><dd>{[savedText, ranText].filter(Boolean).join(' · ')}</dd></div>
+        {/if}
+      </dl>
+    {/if}
+    {#if askNote}<p class="report-detail__note" role="status">{t(M['reports.ask_where'])}</p>{/if}
+    {#if loading && !result}<p class="report-detail__note" role="status">{t(M['reports.running'])}</p>{/if}
+    {#if error}<p class="report-detail__error" role="alert">{t(M[error])}</p>{/if}
+    {#if result && report}
+      <div class="report-detail__result">
+        <ReportResult {result} spec={report.spec} variant="full" bind:view {locale} {currency} />
+      </div>
+    {/if}
   {/if}
+  <ConfirmDialog
+    open={confirming}
+    title={t(M['reports.archive_confirm_title'], { title: report?.title ?? '' })}
+    message={t(M['reports.archive_confirm'])}
+    confirmLabel={t(M['reports.archive'])}
+    cancelLabel={t(M['reports.cancel'])}
+    loading={archiving}
+    onconfirm={() => void setArchived(true)}
+    oncancel={() => (confirming = false)}
+  />
 </section>
+
+<style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
+  .report-detail { display: grid; gap: var(--smrt-spacing-5); min-inline-size: 0; }
+  .report-detail__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--smrt-spacing-3) var(--smrt-spacing-5); }
+  .report-detail__heading { display: grid; gap: var(--smrt-spacing-1); flex: 1 1 20rem; min-inline-size: 0; }
+  .report-detail__title-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--smrt-spacing-2); }
+  .report-detail__title { margin: 0; font: var(--smrt-typography-headline-medium-font); overflow-wrap: anywhere; }
+  .report-detail__line { margin: 0; color: var(--smrt-color-on-surface-variant); font-size: var(--smrt-typography-body-medium-size); }
+  .report-detail__description { margin: 0; max-inline-size: 65ch; font-size: var(--smrt-typography-body-medium-size); }
+  .report-detail__actions { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--smrt-spacing-2); }
+  .report-detail__facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); gap: var(--smrt-spacing-3) var(--smrt-spacing-5); margin: 0; padding: var(--smrt-spacing-4); border: var(--smrt-hairline); border-radius: var(--smrt-radius-large); background: var(--smrt-color-surface-container-low); }
+  .report-detail__facts > div { display: grid; gap: var(--smrt-spacing-1); min-inline-size: 0; }
+  .report-detail__facts dt { color: var(--smrt-color-on-surface-variant); font-size: var(--smrt-typography-label-medium-size); }
+  .report-detail__facts dd { margin: 0; overflow-wrap: anywhere; font-size: var(--smrt-typography-body-medium-size); }
+  .report-detail__meta { grid-column: 1 / -1; padding-block-start: var(--smrt-spacing-3); border-block-start: var(--smrt-hairline); }
+  .report-detail__meta dd { color: var(--smrt-color-on-surface-variant); font-size: var(--smrt-typography-body-small-size); }
+  .report-detail__aside { color: var(--smrt-color-on-surface-variant); }
+  .report-detail__sr { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
+  .report-detail__note { margin: 0; color: var(--smrt-color-on-surface-variant); }
+  .report-detail__error { margin: 0; color: var(--smrt-color-error); }
+  .report-detail__result { padding: var(--smrt-spacing-4); border: var(--smrt-hairline); border-radius: var(--smrt-radius-large); background: var(--smrt-color-surface); }
+}
+</style>

package/dist/svelte/ReportDetail.svelte.d.ts

@@ -1,7 +1,16 @@
-import type { RuntimeReportsClient } from './types.js';
+import { type ReportSourceInfo } from './describe.js';
+import type { RuntimeReportsClient, SavedRuntimeReport } from './types.js';
 export interface Props {
     id: string;
     client?: RuntimeReportsClient;
+    /** The report sources by label and fields (`reports.runtime.sources`). */
+    sources?: readonly ReportSourceInfo[];
+    /** Host-owned identity projection ("You"); others stay unnamed. */
+    authorLabel?: (userId: string) => string | undefined;
+    /** Called with the report once it loads (a host titles its page with it). */
+    onreport?: (report: SavedRuntimeReport) => void;
+    /** Replace Edit asking the page's assistant. */
+    onedit?: (report: SavedRuntimeReport) => void;
     locale?: string;
     currency?: string;
 }

package/dist/svelte/ReportDetail.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ReportDetail.svelte.d.ts","sourceRoot":"","sources":["../../src/svelte/ReportDetail.svelte.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAEV,oBAAoB,EAErB,MAAM,YAAY,CAAC;AAGpB,MAAM,WAAW,KAAK;IACpB,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,CAAC,EAAE,oBAAoB,CAAC;IAC9B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AA+DD,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}
+{"version":3,"file":"ReportDetail.svelte.d.ts","sourceRoot":"","sources":["../../src/svelte/ReportDetail.svelte.ts"],"names":[],"mappings":"AAgBA,OAAO,EAEL,KAAK,gBAAgB,EAGtB,MAAM,eAAe,CAAC;AAIvB,OAAO,KAAK,EAEV,oBAAoB,EACpB,kBAAkB,EACnB,MAAM,YAAY,CAAC;AAGpB,MAAM,WAAW,KAAK;IACpB,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,CAAC,EAAE,oBAAoB,CAAC;IAC9B,0EAA0E;IAC1E,OAAO,CAAC,EAAE,SAAS,gBAAgB,EAAE,CAAC;IACtC,mEAAmE;IACnE,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS,CAAC;IACrD,6EAA6E;IAC7E,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAChD,gDAAgD;IAChD,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAC9C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAgQD,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/svelte/ReportPicker.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
-import { Select } from '@happyvertical/smrt-ui/forms';
+import { FormGroup, Select } from '@happyvertical/smrt-ui/forms';
 import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { describeReport, type ReportSourceInfo } from './describe.js';
 import { M } from './messages.js';
 import { reportError } from './result.js';
 import type { RuntimeReportsClient, SavedRuntimeReport } from './types.js';
@@ -10,6 +11,8 @@ export interface Props {
   reportId?: string;
   measure?: string;
   dimension?: string;
+  /** The report sources by label and fields, for measure and grouping names. */
+  sources?: readonly ReportSourceInfo[];
   onchange: (value: {
     reportId: string;
     measure: string;
@@ -21,6 +24,7 @@ let {
   reportId = '',
   measure = '',
   dimension = '',
+  sources = [],
   onchange,
 }: Props = $props();
 const { t } = useI18n();
@@ -28,6 +32,21 @@ let reports = $state<SavedRuntimeReport[]>([]);
 let loading = $state(false);
 let error = $state<ReturnType<typeof reportError> | null>(null);
 const selected = $derived(reports.find((r) => r.id === reportId));
+const named = $derived.by(() => {
+  if (!selected) return { measures: [], dimensions: [] };
+  const source = sources.find((s) => s.id === selected.sourceId);
+  const describe = (spec: typeof selected.spec) =>
+    describeReport(spec, { t, locale: 'en', currency: 'USD', source });
+  const measures = describe(selected.spec).measures.map((label, i) => ({
+    value: selected.spec.measures[i]?.as ?? '',
+    label,
+  }));
+  const dimensions = selected.spec.dimensions.map((d) => ({
+    value: d.as,
+    label: describe({ ...selected.spec, dimensions: [d] }).groupings,
+  }));
+  return { measures, dimensions };
+});
 $effect(() => {
   const transport = client;
   let active = true;
@@ -52,22 +71,36 @@ $effect(() => {
 });
 </script>
 
-<div data-smrt-component="ReportPicker">
+<div class="report-picker" data-smrt-component="ReportPicker">
   {#if !client}<p>{t(M['reports.unavailable'])}</p>
   {:else}
     {#if loading}<p role="status">{t(M['reports.loading'])}</p>{/if}
     {#if error}<p role="alert">{t(M[error])}</p>{/if}
-    <Select aria-label={t(M['reports.select_report'])} value={reportId} disabled={loading || !!error} onchange={event => onchange({ reportId: event.currentTarget.value, measure: '', dimension: '' })}>
-      <option value="">{t(M['reports.choose_report'])}</option>
-      {#each reports as report (report.id)}<option value={report.id}>{report.title}</option>{/each}
-    </Select>
-    <Select aria-label={t(M['reports.select_measure'])} value={measure} disabled={!selected} onchange={event => onchange({ reportId, measure: event.currentTarget.value, dimension })}>
-      <option value="">{t(M['reports.choose_measure'])}</option>
-      {#each selected?.spec.measures ?? [] as m (m.as)}<option value={m.as}>{m.as}</option>{/each}
-    </Select>
-    <Select aria-label={t(M['reports.select_dimension'])} value={dimension} disabled={!selected} onchange={event => onchange({ reportId, measure, dimension: event.currentTarget.value })}>
-      <option value="">{t(M['reports.choose_dimension'])}</option>
-      {#each selected?.spec.dimensions ?? [] as d (d.as)}<option value={d.as}>{d.as}</option>{/each}
-    </Select>
+    <FormGroup label={t(M['reports.select_report'])}>
+      <Select value={reportId} disabled={loading || !!error} onchange={event => onchange({ reportId: event.currentTarget.value, measure: '', dimension: '' })}>
+        <option value="">{t(M['reports.choose_report'])}</option>
+        {#each reports as report (report.id)}<option value={report.id}>{report.title}</option>{/each}
+      </Select>
+    </FormGroup>
+    <FormGroup label={t(M['reports.select_measure'])}>
+      <Select value={measure} disabled={!selected} onchange={event => onchange({ reportId, measure: event.currentTarget.value, dimension })}>
+        <option value="">{t(M['reports.choose_measure'])}</option>
+        {#each named.measures as m (m.value)}<option value={m.value}>{m.label}</option>{/each}
+      </Select>
+    </FormGroup>
+    <FormGroup label={t(M['reports.select_dimension'])}>
+      <Select value={dimension} disabled={!selected} onchange={event => onchange({ reportId, measure, dimension: event.currentTarget.value })}>
+        <option value="">{t(M['reports.choose_dimension'])}</option>
+        {#each named.dimensions as d (d.value)}<option value={d.value}>{d.label}</option>{/each}
+      </Select>
+    </FormGroup>
   {/if}
 </div>
+
+<style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
+  .report-picker { display: grid; gap: var(--smrt-spacing-3); }
+  .report-picker > p { margin: 0; color: var(--smrt-color-on-surface-variant); font-size: var(--smrt-typography-body-small-size); }
+}
+</style>