@kelpie/ui 0.1.0

package/src/pages/dashboard/attention.ts

@@ -0,0 +1,206 @@
+import type {
+  Dashboard,
+  DashboardPlanItem,
+  DashboardStaleContact,
+  DashboardTouchpoint,
+  PipelineKind,
+  RecordTargetType,
+} from '@kelpie/schemas'
+
+import type { ChipTone } from '../../components/Chip.tsx'
+import { formatDay } from '../../lib/dates.ts'
+
+/**
+ * Reading the workspace snapshot as a page: one attention list, and the brief
+ * above it.
+ *
+ * Pure functions over the decoded response, so the page renders and these are
+ * tested separately. Nothing here recomputes a signal: the service already
+ * decided what is overdue, against the workspace's own day, and a browser that
+ * re-derived it from its own clock would disagree with the totals beside it.
+ */
+
+/** Where each kind of record lives. A Candidate has no page of its own: it is reached through its Role. */
+const ROUTES: Readonly<Record<RecordTargetType, string | undefined>> = {
+  person: '/people',
+  company: '/companies',
+  deal: '/deals',
+  opportunity: '/opportunities',
+  partnership: '/partnerships',
+  raise: '/fundraising',
+  candidate: undefined,
+}
+
+const TARGET_TYPE_LABELS: Readonly<Record<RecordTargetType, string>> = {
+  person: 'Person',
+  company: 'Company',
+  deal: 'Deal',
+  opportunity: 'Opportunity',
+  partnership: 'Partnership',
+  raise: 'Fundraising',
+  candidate: 'Candidate',
+}
+
+export function targetTypeLabel(targetType: RecordTargetType): string {
+  return TARGET_TYPE_LABELS[targetType]
+}
+
+/**
+ * @returns The record's page, or undefined when it has none. A row without a
+ *   link renders as plain text rather than as a link to nowhere.
+ */
+export function targetHref(targetType: RecordTargetType, targetId: string): string | undefined {
+  const route = ROUTES[targetType]
+
+  return route === undefined ? undefined : `${route}/${targetId}`
+}
+
+/** How a target reads when it is named on another record's row. */
+export function targetDescription(item: {
+  readonly targetType: RecordTargetType
+  readonly targetName: string | null
+}): string {
+  const label = targetTypeLabel(item.targetType)
+
+  return item.targetName === null ? label : `${label} · ${item.targetName}`
+}
+
+export interface AttentionRow {
+  readonly id: string
+  /** What kind of signal this is, shown as a chip. */
+  readonly label: string
+  readonly tone: ChipTone
+  /** The date or interval that makes it urgent. */
+  readonly meta: string
+  readonly title: string
+  readonly detail: string
+  readonly href: string | undefined
+}
+
+function planItemRow(item: DashboardPlanItem, overdue: boolean): AttentionRow {
+  return {
+    id: `plan-${item.id}`,
+    label: overdue ? 'Plan item overdue' : 'Plan item due soon',
+    tone: overdue ? 'danger' : 'warning',
+    meta: formatDay(item.date),
+    title: item.title,
+    detail: targetDescription(item),
+    href: targetHref(item.targetType, item.targetId),
+  }
+}
+
+function touchpointRow(touchpoint: DashboardTouchpoint): AttentionRow {
+  return {
+    id: `touchpoint-${touchpoint.id}`,
+    label: touchpoint.overdue ? 'Touchpoint overdue' : 'Touchpoint soon',
+    tone: touchpoint.overdue ? 'danger' : 'warning',
+    meta: `Touchpoint ${formatDay(touchpoint.nextTouchpoint)}`,
+    title: touchpoint.name,
+    detail: touchpoint.summary,
+    href: `/partnerships/${touchpoint.id}`,
+  }
+}
+
+function staleContactRow(contact: DashboardStaleContact): AttentionRow {
+  return {
+    id: `stale-${contact.id}`,
+    label: 'Stale contact',
+    tone: 'neutral',
+    meta: `${String(contact.daysSinceContact)} days since contact`,
+    title: contact.name,
+    detail: contact.summary,
+    href: `/people/${contact.id}`,
+  }
+}
+
+/**
+ * The signals behind the brief, most urgent first.
+ *
+ * The groups are concatenated rather than sorted: each arrives from the API in
+ * its own order — plan items soonest first, contacts coldest first — and a
+ * re-sort across the three would throw that away for a single column that means
+ * a different thing in each.
+ */
+export function attentionRows(dashboard: Dashboard): readonly AttentionRow[] {
+  const touchpoints = dashboard.partnershipTouchpoints.items
+
+  return [
+    ...dashboard.overduePlanItems.items.map((item) => planItemRow(item, true)),
+    ...touchpoints.filter((touchpoint) => touchpoint.overdue).map(touchpointRow),
+    ...dashboard.dueSoonPlanItems.items.map((item) => planItemRow(item, false)),
+    ...touchpoints.filter((touchpoint) => !touchpoint.overdue).map(touchpointRow),
+    ...dashboard.staleContacts.items.map(staleContactRow),
+  ]
+}
+
+function plural(count: number, singular: string, pluralForm = `${singular}s`): string {
+  return `${String(count)} ${count === 1 ? singular : pluralForm}`
+}
+
+/**
+ * How a count of open records reads mid-sentence.
+ *
+ * Not `PIPELINE_KIND_LABELS`: that one is nav wording, where a Raise is filed
+ * under "Fundraising", and "3 fundraisings" is not a sentence. Written out
+ * rather than suffixed, because "opportunitys" is not one either.
+ */
+const OPEN_PIPELINE_NOUNS: Readonly<
+  Record<PipelineKind, { readonly one: string; readonly many: string }>
+> = {
+  deal: { one: 'deal', many: 'deals' },
+  opportunity: { one: 'opportunity', many: 'opportunities' },
+  raise: { one: 'raise', many: 'raises' },
+  partnership: { one: 'partnership', many: 'partnerships' },
+}
+
+/**
+ * The brief, built from the totals rather than from the rows.
+ *
+ * A list is capped by the request's limit and a total is not, so counting the
+ * rows on screen would understate every workspace with more than a page of them.
+ */
+export function briefLines(dashboard: Dashboard): readonly string[] {
+  const lines: string[] = []
+
+  if (dashboard.overduePlanItems.total > 0) {
+    lines.push(
+      `${plural(dashboard.overduePlanItems.total, 'plan item')} overdue — triage Planning first.`,
+    )
+  }
+
+  if (dashboard.dueSoonPlanItems.total > 0) {
+    lines.push(
+      `${plural(dashboard.dueSoonPlanItems.total, 'plan item')} due in the next ${plural(dashboard.upcomingDays, 'day')}.`,
+    )
+  }
+
+  if (dashboard.partnershipTouchpoints.total > 0) {
+    lines.push(
+      `${plural(dashboard.partnershipTouchpoints.total, 'partnership touchpoint')} at hand.`,
+    )
+  }
+
+  if (dashboard.staleContacts.total > 0) {
+    lines.push(
+      `${plural(dashboard.staleContacts.total, 'contact')} past the ${String(dashboard.staleContactDays)}-day touch threshold.`,
+    )
+  }
+
+  const open = dashboard.pipelines.filter((pipeline) => pipeline.open > 0)
+
+  if (open.length > 0) {
+    lines.push(
+      `Open: ${open
+        .map((pipeline) => {
+          const noun = OPEN_PIPELINE_NOUNS[pipeline.kind]
+
+          return plural(pipeline.open, noun.one, noun.many)
+        })
+        .join(', ')}.`,
+    )
+  }
+
+  return lines.length === 0
+    ? ['Nothing urgent. Pipeline and relationships look quiet today.']
+    : lines
+}

package/src/pages/dashboard/sections.tsx

@@ -0,0 +1,269 @@
+import type {
+  ActivityKind,
+  DashboardActivity,
+  DashboardDecision,
+  DashboardNote,
+  TargetRef,
+} from '@kelpie/schemas'
+import type { ReactNode } from 'react'
+import { Link } from 'react-router'
+
+import { Chip } from '../../components/Chip.tsx'
+import { SectionHeader } from '../../components/SectionHeader.tsx'
+import { formatDate, formatRelativeTime } from '../../lib/dates.ts'
+import { targetHref, targetTypeLabel } from './attention.ts'
+import type { AttentionRow } from './attention.ts'
+
+/**
+ * The four lists the workspace home is made of.
+ *
+ * Every row here points at a record other than the one being looked at, which is
+ * what makes the dashboard different from a record's own panels: the response
+ * carries `targetName` already resolved, so nothing below fetches anything.
+ */
+
+/** Two letters per kind, as the mockup's timeline gutter shows them. */
+const KIND_GLYPHS: Readonly<Record<ActivityKind, string>> = {
+  created: 'Cr',
+  updated: 'Up',
+  stage_changed: 'St',
+  note_added: 'Nt',
+  email: 'Em',
+  call: 'Ca',
+  meeting: 'Mt',
+  linked: 'Ln',
+  unlinked: 'Un',
+}
+
+/** A record's name, as a link when it has a page and as text when it does not. */
+function TargetLink({
+  target,
+  className = 'text-ink-muted hover:text-accent hover:underline',
+}: {
+  readonly target: TargetRef
+  readonly className?: string
+}): React.JSX.Element {
+  const href = targetHref(target.targetType, target.targetId)
+  const label = target.targetName ?? targetTypeLabel(target.targetType)
+
+  if (href === undefined) {
+    return <span className={className}>{label}</span>
+  }
+
+  return (
+    <Link to={href} className={className}>
+      {label}
+    </Link>
+  )
+}
+
+function EmptyOr({
+  isEmpty,
+  empty,
+  children,
+}: {
+  readonly isEmpty: boolean
+  readonly empty: string
+  readonly children: ReactNode
+}): React.JSX.Element {
+  return isEmpty ? <p className="text-[13px] text-ink-faint">{empty}</p> : <>{children}</>
+}
+
+export function AttentionList({ rows }: { readonly rows: readonly AttentionRow[] }): React.JSX.Element {
+  return (
+    <section>
+      <SectionHeader title="Needs attention" description="The signals behind the brief." />
+      <EmptyOr isEmpty={rows.length === 0} empty="Nothing urgent right now.">
+        <ul className="divide-y divide-border border-y border-border">
+          {rows.map((row) => (
+            <li key={row.id} className="py-3">
+              <div className="flex flex-wrap items-center gap-2">
+                <Chip tone={row.tone}>{row.label}</Chip>
+                <span className="text-[11px] text-ink-faint">{row.meta}</span>
+              </div>
+              {row.href === undefined ? (
+                <p className="mt-1.5 text-[13px] font-medium text-ink">{row.title}</p>
+              ) : (
+                <Link
+                  to={row.href}
+                  className="mt-1.5 block text-[13px] font-medium text-ink hover:text-accent"
+                >
+                  {row.title}
+                </Link>
+              )}
+              {row.detail !== '' && (
+                <p className="mt-0.5 line-clamp-2 text-[12px] text-ink-muted">{row.detail}</p>
+              )}
+            </li>
+          ))}
+        </ul>
+      </EmptyOr>
+    </section>
+  )
+}
+
+export function ActivityFeed({
+  activities,
+  nameById,
+  now,
+}: {
+  readonly activities: readonly DashboardActivity[]
+  readonly nameById: ReadonlyMap<string, string>
+  readonly now: Date
+}): React.JSX.Element {
+  return (
+    <section>
+      <SectionHeader
+        title="Recent activity"
+        description="The latest events across people, companies, and pipelines."
+      />
+      <EmptyOr isEmpty={activities.length === 0} empty="No activity yet.">
+        <ol className="divide-y divide-border border-y border-border">
+          {activities.map((activity, index) => (
+            <li key={activity.id} className="flex gap-2 py-3">
+              <div className="relative flex w-5 shrink-0 justify-center">
+                {index < activities.length - 1 && (
+                  <span
+                    aria-hidden
+                    className="absolute top-5 bottom-[-12px] left-1/2 w-px -translate-x-1/2 bg-border"
+                  />
+                )}
+                <div
+                  className="relative z-10 flex h-5 w-5 items-center justify-center rounded border border-border bg-surface text-[9px] font-medium tracking-wide text-ink-muted uppercase"
+                  title={activity.kind}
+                >
+                  {KIND_GLYPHS[activity.kind]}
+                </div>
+              </div>
+              <div className="min-w-0 flex-1">
+                <div className="flex items-baseline justify-between gap-3">
+                  <p className="min-w-0 text-[12px] leading-snug text-ink">
+                    <span className="font-semibold">{actorNameFor(activity, nameById)}</span>{' '}
+                    <span className="text-ink-muted">{activity.action}</span>
+                  </p>
+                  <time
+                    dateTime={activity.createdAt.toISOString()}
+                    className="shrink-0 text-[11px] text-ink-faint"
+                  >
+                    {formatRelativeTime(activity.createdAt, now)}
+                  </time>
+                </div>
+                <p className="text-[11px] leading-snug text-ink-faint">
+                  on <span className="text-ink-muted">{targetTypeLabel(activity.targetType)}</span>
+                  {' · '}
+                  <TargetLink target={activity} />
+                </p>
+                {activity.detail !== null && (
+                  <p className="text-[11px] leading-snug text-ink-faint">{activity.detail}</p>
+                )}
+              </div>
+            </li>
+          ))}
+        </ol>
+      </EmptyOr>
+    </section>
+  )
+}
+
+/**
+ * Exactly one of the two actor columns is set. `actorLabel` carries the display
+ * name when nothing on the team did this: "Form", "Gmail", "API key".
+ */
+function actorNameFor(
+  activity: DashboardActivity,
+  nameById: ReadonlyMap<string, string>,
+): string {
+  if (activity.actorMemberId === null) {
+    return activity.actorLabel ?? 'System'
+  }
+
+  return nameById.get(activity.actorMemberId) ?? 'Unknown'
+}
+
+export function NotesList({
+  notes,
+  nameById,
+  now,
+}: {
+  readonly notes: readonly DashboardNote[]
+  readonly nameById: ReadonlyMap<string, string>
+  readonly now: Date
+}): React.JSX.Element {
+  return (
+    <section>
+      <SectionHeader title="Recent notes" description="Pinned notes surface first." />
+      <EmptyOr isEmpty={notes.length === 0} empty="No notes yet.">
+        <ul className="divide-y divide-border border-y border-border">
+          {notes.map((note) => (
+            <li key={note.id} className="py-3">
+              <div className="flex items-start justify-between gap-2">
+                <p className="line-clamp-3 text-[13px] leading-relaxed text-ink">{note.body}</p>
+                {note.pinned && (
+                  <span className="shrink-0 text-[10px] font-medium tracking-wide text-accent uppercase">
+                    Pinned
+                  </span>
+                )}
+              </div>
+              <div className="mt-2 flex flex-wrap items-center gap-2 text-[11px] text-ink-faint">
+                <TargetLink target={note} />
+                <span>·</span>
+                <span>{targetTypeLabel(note.targetType)}</span>
+                <span>·</span>
+                <span>{note.authorId === null ? 'System' : (nameById.get(note.authorId) ?? 'Unknown')}</span>
+                <span>·</span>
+                <span>{formatRelativeTime(note.createdAt, now)}</span>
+              </div>
+            </li>
+          ))}
+        </ul>
+      </EmptyOr>
+    </section>
+  )
+}
+
+export function DecisionsList({
+  decisions,
+  nameById,
+}: {
+  readonly decisions: readonly DashboardDecision[]
+  readonly nameById: ReadonlyMap<string, string>
+}): React.JSX.Element {
+  return (
+    <section>
+      <div className="mb-3 flex items-start justify-between gap-2">
+        <div className="min-w-0">
+          <h2 className="text-[13px] font-semibold text-ink">Recent decisions</h2>
+          <p className="mt-0.5 text-[11px] text-ink-faint">
+            Commitments agents should not contradict.
+          </p>
+        </div>
+        <Link to="/decisions" className="shrink-0 text-[12px] font-medium text-accent hover:underline">
+          View all
+        </Link>
+      </div>
+      <EmptyOr isEmpty={decisions.length === 0} empty="No decisions yet.">
+        <ul className="divide-y divide-border border-y border-border">
+          {decisions.map((decision) => (
+            <li key={decision.id} className="py-3">
+              <p className="text-[13px] font-medium text-ink">{decision.body}</p>
+              {decision.rationale !== null && (
+                <p className="mt-0.5 line-clamp-2 text-[12px] text-ink-muted">
+                  {decision.rationale}
+                </p>
+              )}
+              <div className="mt-2 flex flex-wrap items-center gap-2 text-[11px] text-ink-faint">
+                <TargetLink target={decision} />
+                <span>·</span>
+                <span>{formatDate(decision.decidedAt)}</span>
+                <span>·</span>
+                <span>
+                  {decision.ownerId === null ? '—' : (nameById.get(decision.ownerId) ?? 'Unknown')}
+                </span>
+              </div>
+            </li>
+          ))}
+        </ul>
+      </EmptyOr>
+    </section>
+  )
+}

package/src/pages/fields.ts

@@ -0,0 +1,21 @@
+/** Small conversions the detail pages share, kept out of their markup. */
+
+/** `decision_maker` reads as `decision maker` in a label. The stored value never changes. */
+export function labelize(value: string): string {
+  return value.replace(/_/gu, ' ')
+}
+
+/** A fixed value set as `InlineEdit` select options. */
+export function toOptions(
+  values: readonly string[],
+): readonly { readonly value: string; readonly label: string }[] {
+  return values.map((value) => ({ value, label: labelize(value) }))
+}
+
+/** The comma-separated tag box, back into the array the API takes. */
+export function toTags(value: string): readonly string[] {
+  return value
+    .split(',')
+    .map((tag) => tag.trim())
+    .filter((tag) => tag.length > 0)
+}

package/src/pages/forms/EmbedPanel.tsx

@@ -0,0 +1,95 @@
+import type { Form } from '@kelpie/schemas'
+
+import { useFormEmbed } from '../../api/resources/forms.ts'
+import { CopyButton } from '../../components/CopyButton.tsx'
+import { ErrorPanel, LoadingPanel } from '../../components/QueryState.tsx'
+import { SectionHeader } from '../../components/SectionHeader.tsx'
+
+/**
+ * What to paste into a website.
+ *
+ * The URL and both snippets come from the API rather than being built here. The
+ * embed page is served by the service, so its address depends on where the
+ * service is reached, which the server knows from the request and the browser
+ * only happens to share while the two are same-origin.
+ */
+
+export interface EmbedPanelProps {
+  readonly form: Form
+}
+
+export function EmbedPanel({ form }: EmbedPanelProps): React.JSX.Element {
+  const { snippets, isLoading, error } = useFormEmbed(form.id)
+
+  if (error !== null) {
+    return <ErrorPanel error={error} />
+  }
+
+  if (isLoading || snippets === undefined) {
+    return <LoadingPanel label="Loading embed details…" />
+  }
+
+  return (
+    <div className="max-w-2xl space-y-5">
+      <SectionHeader
+        title="Embed"
+        description="The page below is served by Kelpie, so a site embedding it loads nothing else."
+      />
+
+      <div>
+        <span className="mb-1.5 block text-[12px] font-medium text-ink">Hosted page</span>
+        <div className="flex flex-wrap items-center gap-2">
+          <code className="flex-1 overflow-x-auto rounded-md border border-border bg-surface-raised px-3 py-2 font-mono text-[12px] text-ink">
+            {snippets.url}
+          </code>
+          <a
+            href={snippets.url}
+            target="_blank"
+            rel="noreferrer"
+            className="rounded-md bg-accent px-3 py-2 text-[12px] font-semibold text-accent-fg transition hover:bg-accent-hover"
+          >
+            Open
+          </a>
+        </div>
+      </div>
+
+      <Snippet
+        label="iframe"
+        hint="One tag, no JavaScript, fixed height."
+        value={snippets.iframeSnippet}
+      />
+      <Snippet
+        label="iframe with auto-resize"
+        hint="Adds a listener that follows the page as fields appear and as the thank-you replaces the form."
+        value={snippets.scriptSnippet}
+      />
+    </div>
+  )
+}
+
+function Snippet({
+  label,
+  hint,
+  value,
+}: {
+  readonly label: string
+  readonly hint: string
+  readonly value: string
+}): React.JSX.Element {
+  return (
+    <div>
+      <div className="mb-1.5 flex items-center justify-between gap-2">
+        <span className="text-[12px] font-medium text-ink">{label}</span>
+        <CopyButton value={value} label={`Copy the ${label} snippet`} />
+      </div>
+      <textarea
+        readOnly
+        value={value}
+        rows={value.split('\n').length + 1}
+        aria-label={`${label} snippet`}
+        className="w-full resize-y rounded-md border border-border bg-surface-raised px-3 py-2 font-mono text-[11px] text-ink outline-none"
+      />
+      <p className="mt-1 text-[11px] text-ink-faint">{hint}</p>
+    </div>
+  )
+}