@happyvertical/smrt-support 0.39.2

package/dist/svelte/components/CaseDetail.svelte

@@ -0,0 +1,277 @@
+<script lang="ts">
+/**
+ * CaseDetail — reusable Support Case detail surface (issue #1926): header
+ * with priority/status/assignment, resolution, linked work, and the merged
+ * interaction + audit timeline. Presentational: the host loads the case view
+ * and timeline (see `toSupportCaseView` / `toCaseTimelineItemView`).
+ */
+
+import { StatusBadge } from '@happyvertical/smrt-ui';
+import {
+  type CaseTimelineItemView,
+  caseStatusBadgeKey,
+  humanizeStatus,
+  priorityBadgeKey,
+  type SupportCaseView,
+  type SupportWorkLinkView,
+} from '../types.js';
+
+export interface CaseDetailProps {
+  caseView: SupportCaseView;
+  timeline?: CaseTimelineItemView[];
+  workLinks?: SupportWorkLinkView[];
+}
+
+const { caseView, timeline = [], workLinks = [] }: CaseDetailProps = $props();
+
+function formatWhen(iso: string): string {
+  const date = new Date(iso);
+  if (Number.isNaN(date.getTime())) return '';
+  return date.toLocaleString(undefined, {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+  });
+}
+</script>
+
+<article class="case-detail">
+  <header class="case-detail-header">
+    <p class="case-detail-number">{caseView.caseNumber}</p>
+    <h2 class="case-detail-subject">{caseView.subject}</h2>
+    <div class="case-detail-badges">
+      <StatusBadge
+        status={priorityBadgeKey(caseView.priority)}
+        label={caseView.priority}
+        size="sm"
+      />
+      <StatusBadge
+        status={caseStatusBadgeKey(caseView.status)}
+        label={humanizeStatus(caseView.status)}
+        size="sm"
+      />
+      {#if caseView.severity}
+        <span class="case-detail-severity">{caseView.severity}</span>
+      {/if}
+      {#if caseView.reopenCount > 0}
+        <span class="case-detail-reopens">
+          reopened ×{caseView.reopenCount}
+        </span>
+      {/if}
+    </div>
+  </header>
+
+  <dl class="case-detail-meta">
+    <div>
+      <dt>Assigned</dt>
+      <dd>
+        {caseView.assignedSpecialistName ??
+          (caseView.assignedSpecialistId ? 'assigned' : 'unassigned')}
+      </dd>
+    </div>
+    {#if caseView.channelKind}
+      <div>
+        <dt>Channel</dt>
+        <dd>{caseView.channelKind}</dd>
+      </div>
+    {/if}
+    {#if caseView.projectId}
+      <div>
+        <dt>Project</dt>
+        <dd>{caseView.projectId}</dd>
+      </div>
+    {/if}
+  </dl>
+
+  {#if caseView.resolutionSummary}
+    <section class="case-detail-resolution" aria-label="Resolution">
+      <h3>Resolution</h3>
+      <p>{caseView.resolutionSummary}</p>
+    </section>
+  {/if}
+
+  {#if workLinks.length > 0}
+    <section class="case-detail-work" aria-label="Linked work">
+      <h3>Linked work</h3>
+      <ul>
+        {#each workLinks as link (link.id)}
+          <li>
+            <span class="case-detail-work-kind">
+              {link.linkKind === 'development_work_item'
+                ? 'delivery'
+                : 'support'}
+            </span>
+            {#if link.externalUrl}
+              <a href={link.externalUrl} target="_blank" rel="noreferrer">
+                {link.targetLabel || link.externalUrl}
+              </a>
+            {:else}
+              <span>{link.targetLabel}</span>
+            {/if}
+            <StatusBadge status="pending" label={link.status} size="sm" />
+          </li>
+        {/each}
+      </ul>
+    </section>
+  {/if}
+
+  <section class="case-detail-timeline" aria-label="Case history">
+    <h3>History</h3>
+    {#if timeline.length === 0}
+      <p class="case-detail-empty">No activity yet</p>
+    {:else}
+      <ol>
+        {#each timeline as item, index (index)}
+          <li class="timeline-item" data-kind={item.kind}>
+            <div class="timeline-item-head">
+              <span class="timeline-actor">{item.actorKind}</span>
+              <span class="timeline-summary">
+                {item.kind === 'event'
+                  ? item.summary
+                  : humanizeStatus(item.summary)}
+              </span>
+              <time datetime={item.occurredAt}>
+                {formatWhen(item.occurredAt)}
+              </time>
+            </div>
+            {#if item.body}
+              <p class="timeline-body">{item.body}</p>
+            {/if}
+          </li>
+        {/each}
+      </ol>
+    {/if}
+  </section>
+</article>
+
+<style>
+  .case-detail {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  .case-detail-number {
+    margin: 0;
+    font-size: 0.75rem;
+    color: var(--smrt-color-on-surface-variant, inherit);
+  }
+
+  .case-detail-subject {
+    margin: 0.125rem 0 0.5rem;
+    font-size: 1.25rem;
+  }
+
+  .case-detail-badges {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+  }
+
+  .case-detail-severity,
+  .case-detail-reopens {
+    font-size: 0.75rem;
+    color: var(--smrt-color-on-surface-variant, inherit);
+  }
+
+  .case-detail-meta {
+    display: flex;
+    gap: 1.5rem;
+    margin: 0;
+    flex-wrap: wrap;
+  }
+
+  .case-detail-meta dt {
+    font-size: 0.6875rem;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    color: var(--smrt-color-on-surface-variant, inherit);
+  }
+
+  .case-detail-meta dd {
+    margin: 0;
+  }
+
+  .case-detail-resolution h3,
+  .case-detail-work h3,
+  .case-detail-timeline h3 {
+    margin: 0 0 0.5rem;
+    font-size: 0.875rem;
+  }
+
+  .case-detail-work ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 0.375rem;
+  }
+
+  .case-detail-work li {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .case-detail-work-kind {
+    font-size: 0.6875rem;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    color: var(--smrt-color-on-surface-variant, inherit);
+  }
+
+  .case-detail-timeline ol {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 0.625rem;
+  }
+
+  .timeline-item {
+    border-left: 2px solid var(--smrt-color-outline-variant, currentColor);
+    padding-left: 0.75rem;
+  }
+
+  .timeline-item[data-kind='interaction'] {
+    border-left-color: var(--smrt-color-primary, currentColor);
+  }
+
+  .timeline-item-head {
+    display: flex;
+    align-items: baseline;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+  }
+
+  .timeline-actor {
+    font-size: 0.6875rem;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    color: var(--smrt-color-on-surface-variant, inherit);
+  }
+
+  .timeline-summary {
+    font-weight: 500;
+  }
+
+  .timeline-item time {
+    font-size: 0.75rem;
+    color: var(--smrt-color-on-surface-variant, inherit);
+    margin-left: auto;
+  }
+
+  .timeline-body {
+    margin: 0.25rem 0 0;
+    white-space: pre-wrap;
+  }
+
+  .case-detail-empty {
+    color: var(--smrt-color-on-surface-variant, inherit);
+  }
+</style>

package/dist/svelte/components/CaseDetail.svelte.d.ts

@@ -0,0 +1,10 @@
+import { type CaseTimelineItemView, type SupportCaseView, type SupportWorkLinkView } from '../types.js';
+export interface CaseDetailProps {
+    caseView: SupportCaseView;
+    timeline?: CaseTimelineItemView[];
+    workLinks?: SupportWorkLinkView[];
+}
+declare const CaseDetail: import("svelte").Component<CaseDetailProps, {}, "">;
+type CaseDetail = ReturnType<typeof CaseDetail>;
+export default CaseDetail;
+//# sourceMappingURL=CaseDetail.svelte.d.ts.map

package/dist/svelte/components/CaseDetail.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CaseDetail.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/CaseDetail.svelte.ts"],"names":[],"mappings":"AAUA,OAAO,EACL,KAAK,oBAAoB,EAIzB,KAAK,eAAe,EACpB,KAAK,mBAAmB,EACzB,MAAM,aAAa,CAAC;AAGrB,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,eAAe,CAAC;IAC1B,QAAQ,CAAC,EAAE,oBAAoB,EAAE,CAAC;IAClC,SAAS,CAAC,EAAE,mBAAmB,EAAE,CAAC;CACnC;AAgID,QAAA,MAAM,UAAU,qDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/svelte/components/CaseQueue.svelte

@@ -0,0 +1,148 @@
+<script lang="ts">
+/**
+ * CaseQueue — reusable Support Case queue list (issue #1926): priority,
+ * status, assignment, and channel at a glance. Presentational: the host
+ * fetches `SupportCaseView[]` (see `toSupportCaseView`) and wires `onselect`.
+ */
+
+import { Button, StatusBadge } from '@happyvertical/smrt-ui';
+import {
+  caseStatusBadgeKey,
+  humanizeStatus,
+  priorityBadgeKey,
+  type SupportCaseView,
+} from '../types.js';
+
+export interface CaseQueueProps {
+  cases: SupportCaseView[];
+  onselect?: (caseId: string) => void;
+  emptyMessage?: string;
+  /** Show the assigned-specialist column (default true). */
+  showAssignee?: boolean;
+}
+
+const {
+  cases,
+  onselect,
+  emptyMessage = 'No support cases',
+  showAssignee = true,
+}: CaseQueueProps = $props();
+
+function formatUpdated(iso: string | null): string {
+  if (!iso) return '';
+  const date = new Date(iso);
+  if (Number.isNaN(date.getTime())) return '';
+  return date.toLocaleString(undefined, {
+    month: 'short',
+    day: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+  });
+}
+</script>
+
+{#if cases.length === 0}
+  <p class="case-queue-empty">{emptyMessage}</p>
+{:else}
+  <ul class="case-queue">
+    {#each cases as item (item.id)}
+      <li class="case-queue-row">
+        <Button
+          variant="ghost"
+          fullWidth
+          onclick={() => onselect?.(item.id)}
+          aria-label={`Open case ${item.caseNumber}: ${item.subject}`}
+        >
+          <span class="case-queue-line">
+            <span class="case-queue-main">
+              <span class="case-queue-number">{item.caseNumber}</span>
+              <span class="case-queue-subject">{item.subject}</span>
+            </span>
+            <span class="case-queue-meta">
+              <StatusBadge
+                status={priorityBadgeKey(item.priority)}
+                label={item.priority}
+                size="sm"
+              />
+              <StatusBadge
+                status={caseStatusBadgeKey(item.status)}
+                label={humanizeStatus(item.status)}
+                size="sm"
+              />
+              {#if item.channelKind}
+                <span class="case-queue-channel">{item.channelKind}</span>
+              {/if}
+              {#if showAssignee}
+                <span class="case-queue-assignee">
+                  {item.assignedSpecialistName ??
+                    (item.assignedSpecialistId ? 'assigned' : 'unassigned')}
+                </span>
+              {/if}
+              <span class="case-queue-updated">
+                {formatUpdated(item.updatedAt)}
+              </span>
+            </span>
+          </span>
+        </Button>
+      </li>
+    {/each}
+  </ul>
+{/if}
+
+<style>
+  .case-queue {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+
+  .case-queue-line {
+    display: flex;
+    width: 100%;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.75rem;
+    text-align: left;
+  }
+
+  .case-queue-main {
+    display: flex;
+    flex-direction: column;
+    gap: 0.125rem;
+    min-width: 0;
+  }
+
+  .case-queue-number {
+    font-size: 0.75rem;
+    color: var(--smrt-color-on-surface-variant, inherit);
+  }
+
+  .case-queue-subject {
+    font-weight: 500;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .case-queue-meta {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    flex-shrink: 0;
+  }
+
+  .case-queue-channel,
+  .case-queue-assignee,
+  .case-queue-updated {
+    font-size: 0.75rem;
+    color: var(--smrt-color-on-surface-variant, inherit);
+  }
+
+  .case-queue-empty {
+    color: var(--smrt-color-on-surface-variant, inherit);
+    padding: 1rem 0;
+  }
+</style>

package/dist/svelte/components/CaseQueue.svelte.d.ts

@@ -0,0 +1,12 @@
+import { type SupportCaseView } from '../types.js';
+export interface CaseQueueProps {
+    cases: SupportCaseView[];
+    onselect?: (caseId: string) => void;
+    emptyMessage?: string;
+    /** Show the assigned-specialist column (default true). */
+    showAssignee?: boolean;
+}
+declare const CaseQueue: import("svelte").Component<CaseQueueProps, {}, "">;
+type CaseQueue = ReturnType<typeof CaseQueue>;
+export default CaseQueue;
+//# sourceMappingURL=CaseQueue.svelte.d.ts.map

package/dist/svelte/components/CaseQueue.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CaseQueue.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/CaseQueue.svelte.ts"],"names":[],"mappings":"AASA,OAAO,EAIL,KAAK,eAAe,EACrB,MAAM,aAAa,CAAC;AAGrB,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,eAAe,EAAE,CAAC;IACzB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,0DAA0D;IAC1D,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAmED,QAAA,MAAM,SAAS,oDAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/svelte/components/RoutingRationale.svelte

@@ -0,0 +1,131 @@
+<script lang="ts">
+/**
+ * RoutingRationale — the explainable routing ranking for a case (issue
+ * #1929): each specialist's score, eligibility, and the factor signals
+ * behind them, with an optional manual-reassign action per row.
+ * Presentational: the host runs `SupportRoutingService.rankSpecialists`
+ * (and gates reassignment with `support.reassign-case`).
+ */
+
+import { Button, StatusBadge } from '@happyvertical/smrt-ui';
+import type { RankedSpecialistView } from '../types.js';
+
+export interface RoutingRationaleProps {
+  ranking: RankedSpecialistView[];
+  /** When provided, each row shows a reassign action. */
+  onreassign?: (specialistId: string) => void;
+  emptyMessage?: string;
+}
+
+const {
+  ranking,
+  onreassign,
+  emptyMessage = 'No specialists to rank',
+}: RoutingRationaleProps = $props();
+
+function factorChips(
+  factors: Record<string, number | string | boolean>,
+): string[] {
+  return Object.entries(factors).map(([key, value]) =>
+    value === true ? key : `${key}: ${value}`,
+  );
+}
+</script>
+
+{#if ranking.length === 0}
+  <p class="routing-rationale-empty">{emptyMessage}</p>
+{:else}
+  <ul class="routing-rationale">
+    {#each ranking as entry (entry.specialistId)}
+      <li class="routing-rationale-row">
+        <span class="routing-rationale-main">
+          <span class="routing-rationale-head">
+            <span class="routing-rationale-name">{entry.displayName}</span>
+            <span class="routing-rationale-score">score {entry.score}</span>
+            <StatusBadge
+              status={entry.eligible ? 'success' : 'inactive'}
+              label={entry.eligible ? 'eligible' : 'ineligible'}
+              size="sm"
+            />
+          </span>
+          <span class="routing-rationale-factors">
+            {#each factorChips(entry.factors) as chip (chip)}
+              <span class="routing-rationale-factor">{chip}</span>
+            {/each}
+          </span>
+        </span>
+        {#if onreassign}
+          <Button
+            variant="secondary"
+            size="sm"
+            onclick={() => onreassign?.(entry.specialistId)}
+            aria-label={`Reassign to ${entry.displayName}`}
+          >
+            Reassign
+          </Button>
+        {/if}
+      </li>
+    {/each}
+  </ul>
+{/if}
+
+<style>
+  .routing-rationale {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .routing-rationale-row {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 0.75rem;
+  }
+
+  .routing-rationale-main {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    min-width: 0;
+  }
+
+  .routing-rationale-head {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+  }
+
+  .routing-rationale-name {
+    font-weight: 500;
+  }
+
+  .routing-rationale-score {
+    font-size: 0.75rem;
+    color: var(--smrt-color-on-surface-variant, inherit);
+  }
+
+  .routing-rationale-factors {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.25rem;
+  }
+
+  .routing-rationale-factor {
+    font-size: 0.6875rem;
+    padding: 0.0625rem 0.375rem;
+    border-radius: 0.5rem;
+    background: var(--smrt-color-surface-container-highest, transparent);
+    color: var(--smrt-color-on-surface-variant, inherit);
+    border: 1px solid var(--smrt-color-outline-variant, currentColor);
+  }
+
+  .routing-rationale-empty {
+    color: var(--smrt-color-on-surface-variant, inherit);
+    padding: 1rem 0;
+  }
+</style>

package/dist/svelte/components/RoutingRationale.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { RankedSpecialistView } from '../types.js';
+export interface RoutingRationaleProps {
+    ranking: RankedSpecialistView[];
+    /** When provided, each row shows a reassign action. */
+    onreassign?: (specialistId: string) => void;
+    emptyMessage?: string;
+}
+declare const RoutingRationale: import("svelte").Component<RoutingRationaleProps, {}, "">;
+type RoutingRationale = ReturnType<typeof RoutingRationale>;
+export default RoutingRationale;
+//# sourceMappingURL=RoutingRationale.svelte.d.ts.map

package/dist/svelte/components/RoutingRationale.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RoutingRationale.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/RoutingRationale.svelte.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AAGxD,MAAM,WAAW,qBAAqB;IACpC,OAAO,EAAE,oBAAoB,EAAE,CAAC;IAChC,uDAAuD;IACvD,UAAU,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAuDD,QAAA,MAAM,gBAAgB,2DAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}