@kernhq/module-tracker 0.10.1 → 0.11.1

package/src/client/widgets/IssuesWidget.svelte

@@ -0,0 +1,222 @@
+<script lang="ts">
+import type { MenuItem, WidgetProps } from '@kernhq/ui'
+import { DropdownMenu, formatDate, Icon, settingsScope, toast, WidgetState } from '@kernhq/ui'
+import { createMutation, createQuery, useQueryClient } from '@tanstack/svelte-query'
+import { getTrackerApi } from '../api-instance.js'
+import PriorityGlyph from '../components/PriorityGlyph.svelte'
+import StatusIcon from '../components/StatusIcon.svelte'
+import { type Preset, presetKql } from '../filters.js'
+import { t } from '../i18n.js'
+import { dueTone } from '../index.js'
+
+/**
+ * Work items, filtered by whatever this instance was configured with.
+ *
+ * One widget rather than six. `issues.query` takes a KQL string and is what every view, board and
+ * report already runs through, so "assigned to me", "due soon", "in review" and any saved view are
+ * the same card with a different setting — which is also why placing it twice showing two different
+ * things is free.
+ */
+let { workspaceId, workspaceSlug, settings, editing }: WidgetProps = $props()
+
+const api = getTrackerApi()
+const client = useQueryClient()
+
+const preset = $derived((settings.preset as Preset | 'triage') ?? 'assigned')
+const view = $derived((settings.view as string | null) ?? null)
+const limit = $derived(Number(settings.limit ?? 8))
+
+const views = createQuery(() => ({
+  queryKey: ['tracker', 'view', workspaceId],
+  queryFn: () => api.views.list({ workspaceId }),
+  enabled: Boolean(view),
+}))
+
+/** A saved view wins over the preset: picking one is a more specific instruction. */
+const kql = $derived.by(() => {
+  if (view) {
+    const found = (views.data ?? []).find((v) => v.id === view)
+    if (found) return found.kql ?? ''
+  }
+  // `triage` is this widget's own, not one of the tracker page's presets: the page reaches triage
+  // through its intake screen, and there is no shared KQL for it.
+  if (preset === 'triage') return 'statusCategory = triage'
+  return presetKql(preset as Preset)
+})
+
+const query = createQuery(() => ({
+  // The settings are in the key. Without that, changing the project or the preset leaves the key
+  // untouched, TanStack serves the cached page, and the setting looks broken on a warm cache.
+  queryKey: ['tracker', 'issue', workspaceId, 'widget', settingsScope(settings), kql],
+  queryFn: () =>
+    api.issues.query({
+      workspaceId,
+      kql,
+      limit,
+      orderBy: [{ field: 'updatedAt', dir: 'desc' }],
+    }),
+  enabled: Boolean(workspaceId) && (!view || views.isSuccess),
+}))
+
+const issues = $derived(query.data?.items ?? [])
+
+/**
+ * An issue carries a `statusId`, not a status. The tracker page resolves ids through a catalogue it
+ * publishes as context, which a dashboard widget is not inside — so it fetches the one list it
+ * needs. It is small, cached, and shared with every other tracker widget on the board.
+ */
+const statuses = createQuery(() => ({
+  queryKey: ['tracker', 'status', workspaceId],
+  queryFn: () => api.workflows.statuses({ workspaceId }),
+  enabled: Boolean(workspaceId),
+}))
+const statusOf = (id: string) => (statuses.data ?? []).find((s) => s.id === id)
+
+/** Transitions are fetched when the menu opens, not per row up front: one request, not eight. */
+let openFor = $state<string | null>(null)
+const transitions = createQuery(() => ({
+  queryKey: ['tracker', 'issue', workspaceId, 'transitions', openFor],
+  queryFn: () => api.issues.transitions.available({ workspaceId, issueId: openFor! }),
+  enabled: Boolean(openFor),
+}))
+
+const apply = createMutation(() => ({
+  mutationFn: (input: { issueId: string; transitionId: string }) =>
+    api.issues.transitions.apply({ workspaceId, ...input }),
+  onSuccess: () => {
+    void client.invalidateQueries({ queryKey: ['tracker', 'issue'] })
+  },
+  onError: (e: unknown) => toast.error(e instanceof Error ? e.message : t('common.error')),
+}))
+
+function menuFor(issueId: string): MenuItem[] {
+  if (transitions.isPending) return [{ label: t('common.loading'), disabled: true }]
+  const list = transitions.data ?? []
+  if (list.length === 0) return [{ label: t('widget_no_transitions'), disabled: true }]
+  return list
+    .filter((tr) => !tr.hidden)
+    .map((tr) => ({
+      label: tr.name,
+      // A blocked move is shown with its reason rather than hidden: knowing why you cannot move an
+      // issue is the useful half, and it is what `reasons` is for.
+      disabled: !tr.allowed,
+      hint: tr.allowed ? undefined : tr.reasons.map((r) => r.message).join(' · ') || undefined,
+      onSelect: () => apply.mutate({ issueId, transitionId: tr.id }),
+    }))
+}
+</script>
+
+<WidgetState
+  pending={query.isPending || statuses.isPending}
+  error={query.error}
+  empty={issues.length === 0}
+  emptyTitle={t('empty_title')}
+  emptyIcon="square-check-big"
+  onRetry={() => query.refetch()}
+>
+  <ul>
+    {#each issues as issue (issue.id)}
+      {@const status = statusOf(issue.statusId)}
+      <li>
+        <a class="row" href="/{workspaceSlug}/tracker?issue={issue.id}">
+          <PriorityGlyph priority={issue.priority} size={14} />
+          <span class="key">{issue.key}</span>
+          <StatusIcon
+            category={status?.category ?? 'todo'}
+            statusId={issue.statusId}
+            name={status?.name ?? null}
+            size={14}
+          />
+          <span class="title">{issue.title}</span>
+          {#if issue.dueDate}
+            <time class="due {dueTone(issue.dueDate)}" datetime={issue.dueDate}>
+              {formatDate(issue.dueDate, { month: 'short', day: 'numeric' })}
+            </time>
+          {/if}
+        </a>
+        {#if !editing}
+          <span class="act">
+            <DropdownMenu
+              items={menuFor(issue.id)}
+              onOpenChange={(o) => (openFor = o ? issue.id : null)}
+            >
+              {#snippet trigger(props)}
+                <button {...props} type="button" aria-label={t('change_status_widget')}>
+                  <Icon name="ellipsis" size={14} />
+                </button>
+              {/snippet}
+            </DropdownMenu>
+          </span>
+        {/if}
+      </li>
+    {/each}
+  </ul>
+</WidgetState>
+
+<style>
+  li {
+    position: relative;
+    border-block-end: 1px solid var(--kern-border-hairline);
+  }
+  li:last-child {
+    border-block-end: 0;
+  }
+  .row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 14px;
+    color: inherit;
+  }
+  li:hover .row {
+    background: var(--kern-surface-hover);
+  }
+  .key {
+    flex-shrink: 0;
+    font-family: var(--kern-font-mono);
+    font-size: 11.5px;
+    color: var(--kern-ink-400);
+  }
+  .title {
+    flex: 1;
+    min-width: 0;
+    font-size: 13px;
+    color: var(--kern-ink-800);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .due {
+    flex-shrink: 0;
+    font-family: var(--kern-font-mono);
+    font-size: 11px;
+    color: var(--kern-ink-400);
+  }
+  .due:global(.hot) {
+    color: var(--kern-danger);
+  }
+  .act {
+    position: absolute;
+    inset-block: 0;
+    inset-inline-end: 8px;
+    display: none;
+    align-items: center;
+  }
+  li:hover .act,
+  .act:focus-within {
+    display: flex;
+  }
+  .act button {
+    display: grid;
+    place-items: center;
+    width: 24px;
+    height: 24px;
+    border-radius: var(--kern-r-sm);
+    border: 1px solid var(--kern-border);
+    background: var(--kern-surface-raised);
+    color: var(--kern-ink-600);
+  }
+  .act button:hover {
+    color: var(--kern-ink-900);
+  }
+</style>

package/src/client/widgets/ThroughputWidget.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+import type { WidgetProps } from '@kernhq/ui'
+import { LineChart, WidgetState } from '@kernhq/ui'
+import { createQuery } from '@tanstack/svelte-query'
+import { getTrackerApi } from '../api-instance.js'
+import { t } from '../i18n.js'
+
+/**
+ * Created against resolved, over a window somebody picks.
+ *
+ * The dates are computed from the chosen range rather than stored, so a card left on a dashboard
+ * for a month keeps meaning "the last 30 days" instead of a month that has since passed.
+ */
+let { workspaceId, settings }: WidgetProps = $props()
+
+const api = getTrackerApi()
+const projectId = $derived((settings.project as string | null) ?? null)
+const days = $derived(Number(settings.range ?? 30))
+
+const window = $derived.by(() => {
+  const to = new Date()
+  const from = new Date(to.getTime() - days * 864e5)
+  const iso = (d: Date) => d.toISOString().slice(0, 10)
+  return { from: iso(from), to: iso(to) }
+})
+
+const query = createQuery(() => ({
+  queryKey: ['tracker', 'report', workspaceId, 'cvr', projectId ?? '', window.from, window.to],
+  queryFn: () =>
+    api.reports.createdVsResolved({
+      workspaceId,
+      projectId: projectId as string,
+      from: window.from,
+      to: window.to,
+    }),
+  enabled: Boolean(workspaceId) && Boolean(projectId),
+}))
+
+const points = $derived(query.data?.points ?? [])
+</script>
+
+<div class="pad">
+  <WidgetState
+    pending={query.isPending && Boolean(projectId)}
+    error={query.error}
+    empty={!projectId || points.length === 0}
+    emptyTitle={projectId ? t('widget_chart_no_data') : t('widget_cycle_pick_project')}
+    emptyIcon="chart-line"
+    onRetry={() => query.refetch()}
+  >
+    <LineChart
+      title={t('widget_throughput_title')}
+      labels={points.map((p) => p.date)}
+      series={[
+        { label: t('widget_throughput_created'), values: points.map((p) => p.created), tone: 2 },
+        { label: t('widget_throughput_resolved'), values: points.map((p) => p.resolved), tone: 3 },
+      ]}
+      height={140}
+    />
+  </WidgetState>
+</div>
+
+<style>
+  .pad {
+    padding: 10px 14px 14px;
+    height: 100%;
+  }
+</style>

package/src/client/widgets/TimerWidget.svelte

@@ -0,0 +1,116 @@
+<script lang="ts">
+import type { WidgetProps } from '@kernhq/ui'
+import { Button, toast } from '@kernhq/ui'
+import { createMutation, createQuery, useQueryClient } from '@tanstack/svelte-query'
+import { getTrackerApi } from '../api-instance.js'
+import { t } from '../i18n.js'
+import { formatDuration } from '../index.js'
+
+/**
+ * The running timer, and the one thing you want to do with it.
+ *
+ * A timer you can see but not stop is worse than no timer at all, so Stop is the whole card. The
+ * elapsed figure ticks locally rather than by refetching — a query every second to render a clock
+ * would be absurd.
+ */
+let { workspaceId, workspaceSlug }: WidgetProps = $props()
+
+const api = getTrackerApi()
+const client = useQueryClient()
+
+const query = createQuery(() => ({
+  queryKey: ['tracker', 'timer', workspaceId],
+  queryFn: () => api.worklogs.timers.current({ workspaceId }),
+  enabled: Boolean(workspaceId),
+}))
+
+const timer = $derived(query.data?.timer ?? null)
+
+/** `Timer` carries an issue id and nothing else, so the card asks what it is timing. */
+const issue = createQuery(() => ({
+  queryKey: ['tracker', 'issue', workspaceId, timer?.issueId ?? ''],
+  queryFn: () => api.issues.get({ workspaceId, issueId: timer!.issueId }),
+  enabled: Boolean(timer?.issueId),
+}))
+
+let now = $state(Date.now())
+$effect(() => {
+  if (!timer) return
+  const handle = setInterval(() => (now = Date.now()), 1000)
+  return () => clearInterval(handle)
+})
+
+const elapsed = $derived(
+  timer ? Math.max(0, Math.floor((now - new Date(timer.startedAt).getTime()) / 1000)) : 0,
+)
+
+const stop = createMutation(() => ({
+  mutationFn: () => api.worklogs.timers.stop({ workspaceId, discard: false }),
+  onSuccess: () => {
+    toast.success(t('widget_timer_stopped'))
+    void client.invalidateQueries({ queryKey: ['tracker'] })
+  },
+  onError: (e: unknown) => toast.error(e instanceof Error ? e.message : t('common.error')),
+}))
+</script>
+
+<div class="wrap">
+  <p class="label">{t('widget_timer_title')}</p>
+  {#if query.isPending}
+    <p class="idle">{t('common.loading')}</p>
+  {:else if !timer}
+    <p class="idle">{t('widget_timer_idle')}</p>
+  {:else}
+    <a class="issue" href="/{workspaceSlug}/tracker?issue={timer.issueId}">
+      {issue.data?.key ?? '—'}
+      {#if issue.data?.title}<span class="what">{issue.data.title}</span>{/if}
+    </a>
+    <p class="clock">{formatDuration(elapsed)}</p>
+    <Button size="sm" variant="secondary" loading={stop.isPending} onclick={() => stop.mutate()}>
+      {t('widget_timer_stop')}
+    </Button>
+  {/if}
+</div>
+
+<style>
+  .wrap {
+    display: grid;
+    justify-items: start;
+    align-content: center;
+    gap: 6px;
+    height: 100%;
+    padding: 14px 16px;
+  }
+  .label {
+    font-size: 12px;
+    color: var(--kern-ink-500);
+  }
+  .idle {
+    font-size: 12.5px;
+    color: var(--kern-ink-450);
+  }
+  .issue {
+    display: flex;
+    gap: 6px;
+    align-items: baseline;
+    max-width: 100%;
+    font-family: var(--kern-font-mono);
+    font-size: 11.5px;
+    color: var(--kern-ink-450);
+  }
+  .what {
+    font-family: var(--kern-font-sans);
+    color: var(--kern-ink-600);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .clock {
+    font-size: 24px;
+    font-weight: 600;
+    letter-spacing: -0.03em;
+    line-height: 1;
+    color: var(--kern-ink-900);
+    font-variant-numeric: tabular-nums;
+  }
+</style>

package/src/client/widgets/VelocityWidget.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+import type { WidgetProps } from '@kernhq/ui'
+import { BarChart, WidgetState } from '@kernhq/ui'
+import { createQuery } from '@tanstack/svelte-query'
+import { getTrackerApi } from '../api-instance.js'
+import { t } from '../i18n.js'
+
+/**
+ * Completed work per cycle.
+ *
+ * `reports.velocity` is project-scoped, so the query waits until a project is chosen rather than
+ * guessing one — and the empty state says which setting is missing instead of showing nothing.
+ */
+let { workspaceId, settings }: WidgetProps = $props()
+
+const api = getTrackerApi()
+const projectId = $derived((settings.project as string | null) ?? null)
+const lastN = $derived(Number(settings.lastN ?? 6))
+
+const query = createQuery(() => ({
+  queryKey: ['tracker', 'report', workspaceId, 'velocity', projectId ?? '', lastN],
+  queryFn: () => api.reports.velocity({ workspaceId, projectId: projectId as string, lastN }),
+  enabled: Boolean(workspaceId) && Boolean(projectId),
+}))
+
+const cycles = $derived(query.data?.cycles ?? [])
+</script>
+
+<div class="pad">
+  <WidgetState
+    pending={query.isPending && Boolean(projectId)}
+    error={query.error}
+    empty={!projectId || cycles.length === 0}
+    emptyTitle={projectId ? t('widget_chart_no_data') : t('widget_cycle_pick_project')}
+    emptyIcon="chart-column"
+    onRetry={() => query.refetch()}
+  >
+    <BarChart
+      title={t('widget_velocity_title')}
+      labels={cycles.map((c) => c.cycle.name)}
+      series={[
+        { label: t('widget_velocity_committed'), values: cycles.map((c) => c.committed), tone: 2 },
+        { label: t('widget_velocity_completed'), values: cycles.map((c) => c.completed), tone: 1 },
+      ]}
+      height={140}
+    />
+  </WidgetState>
+</div>
+
+<style>
+  .pad {
+    padding: 10px 14px 14px;
+    height: 100%;
+  }
+</style>