@wular/coder 0.3.18 → 0.4.0

package/src/server/dash/app/dash/tasks/page.tsx

@@ -0,0 +1,53 @@
+import { dynamic } from '@wular/pnext/dynamic';
+
+import { zoneOf } from '@/utils/format';
+import { load } from '@/api/load';
+import { HEADS } from '@/comps/frame/heads';
+import { Page } from '@/comps/frame/page-head';
+import { Stream } from '@/comps/frame/stream';
+import { TasksSection, loadTasks } from '@/app/dash/tasks/list/tasks-section';
+import {
+  agentChoices,
+  credentialMissing,
+  loadComposer,
+  savedChoice,
+} from '@/app/dash/tasks/composer-data';
+import { LoadingComposer } from '@/app/dash/tasks/composer';
+
+// Hydrates with the page, so typing and Enter work at once.
+const Composer = dynamic(() => import('@/app/dash/tasks/composer').then(m => m.Composer));
+
+/** One box to start anything, then every task; each streams in on its own. */
+export default function TasksPage({ request }: { request?: Request }) {
+  if (!request) return null;
+  const client = load(request);
+  const agent = new URL(request.url).searchParams.get('agent');
+
+  return (
+    <Page>
+      <Stream
+        fallback={<LoadingComposer />}
+        load={() =>
+          Promise.all([loadComposer(client), credentialMissing(client)]).then(
+            ([setup, missing]) => (
+              <Composer
+                {...setup}
+                initial={{
+                  ...savedChoice(request.headers.get('cookie') ?? ''),
+                  ...(agent ? { agent } : {}),
+                }}
+                missing={missing}
+                tz={zoneOf(request)}
+              />
+            ),
+          )
+        }
+      />
+      <TasksSection
+        tasks={loadTasks(request, undefined, agentChoices(client))}
+        head={HEADS.tasks}
+        missing={credentialMissing(client)}
+      />
+    </Page>
+  );
+}

package/src/server/dash/app/dash/token-from-hash.tsx

@@ -0,0 +1,17 @@
+'use client';
+
+import { useEffect } from 'preact/hooks';
+
+/** `serve` opens /dash#token=…: the fragment never reaches the server, and it leaves history before the form posts it. */
+export function TokenFromHash() {
+  useEffect(() => {
+    const token = /(?:^|&)token=([^&]+)/.exec(location.hash.slice(1))?.[1];
+    if (!token) return;
+    history.replaceState(null, '', location.pathname + location.search);
+    const form = document.getElementById('token-form') as HTMLFormElement | null;
+    if (!form) return;
+    (form.elements.namedItem('token') as HTMLInputElement).value = decodeURIComponent(token);
+    form.submit();
+  }, []);
+  return null;
+}

package/src/server/dash/app/dash/usage/custom-range.tsx

@@ -0,0 +1,63 @@
+'use client';
+
+import { iDown } from '@/comps/ui/icons';
+import { useRouter } from '@wular/pnext/navigation/client';
+import { withSearch, type To } from '@/comps/nav/to';
+import { Icon } from '@/comps/ui/icon';
+import { useId } from 'preact/hooks';
+
+/** Custom from and to dates; applying them moves the page to that range. */
+export function CustomRange({
+  page,
+  from,
+  to,
+  today,
+  on,
+}: {
+  /** The page's path and query, without range parameters. */
+  /** The page the range applies to. */
+  page: To;
+  from: string;
+  to: string;
+  today: string;
+  on: boolean;
+}) {
+  const nav = useRouter();
+  const id = useId();
+
+  return (
+    <span class={on ? 'menu custom on' : 'menu custom'}>
+      <button popovertarget={id} type="button">
+        Custom
+        <Icon d={iDown} />
+      </button>
+      <form
+        id={id}
+        class="pop date-pop"
+        popover="auto"
+        onSubmit={event => {
+          event.preventDefault();
+          const values = new FormData(event.currentTarget);
+          const [start, end] = [String(values.get('from')), String(values.get('to'))].sort();
+
+          event.currentTarget.hidePopover();
+          nav.push(page.href, {
+            params: page.params,
+            search: withSearch(page.search, { from: String(start), to: String(end) }),
+            scroll: false,
+          });
+        }}
+      >
+        <label class="field">
+          <span>From</span>
+          <input type="date" name="from" defaultValue={from} max={today} required />
+        </label>
+        <label class="field">
+          <span>To</span>
+          <input type="date" name="to" defaultValue={to} max={today} required />
+        </label>
+        <button class="btn sm">Apply</button>
+      </form>
+    </span>
+  );
+}

package/src/server/dash/app/dash/usage/day-chart.css

@@ -0,0 +1,109 @@
+/* charts */
+.chart {
+  display: flex;
+  align-items: flex-end;
+  gap: 4px;
+  height: 200px;
+}
+.empty-chart {
+  align-items: center;
+  justify-content: center;
+}
+.chart li {
+  position: relative;
+  flex: 1;
+  min-width: 0;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 6px;
+}
+.chart .col {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 2px;
+  width: 100%;
+  max-width: 48px;
+  height: var(--h);
+  min-height: 1px;
+}
+.chart .col i {
+  display: block;
+  flex: var(--f) 0 0;
+  min-height: 1px;
+  background: var(--c, var(--s1));
+}
+.chart .col i:last-child {
+  border-radius: 4px 4px 0 0;
+}
+.chart li > small {
+  font-size: 10.5px;
+  color: var(--dim);
+  height: 16px;
+  white-space: nowrap;
+}
+.chart li:hover .col {
+  filter: brightness(1.15);
+}
+.chart .tip {
+  display: none;
+  position: absolute;
+  bottom: calc(var(--h) + 30px);
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 5;
+  width: max-content;
+  max-width: 240px;
+  padding: 8px 10px;
+  border: 1px solid var(--line2);
+  background: var(--tile);
+  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
+  font-size: 11.5px;
+  line-height: 1.5;
+}
+.chart li:hover .tip {
+  display: grid;
+}
+.chart li:first-child .tip,
+.chart li:nth-child(2) .tip {
+  left: 0;
+  transform: none;
+}
+.chart li:last-child .tip,
+.chart li:nth-last-child(2) .tip {
+  left: auto;
+  right: 0;
+  transform: none;
+}
+.tip b {
+  font-weight: 500;
+}
+.legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px 16px;
+  font-size: 12px;
+  color: var(--muted);
+}
+.legend span,
+.tip span {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+.legend i,
+.tip i {
+  width: 10px;
+  height: 10px;
+  border-radius: 2px;
+  background: var(--c);
+}
+
+@media (max-width: 760px) {
+  .chart {
+    gap: 2px;
+    height: 160px;
+  }
+}

package/src/server/dash/app/dash/usage/day-chart.tsx

@@ -0,0 +1,110 @@
+import './day-chart.css';
+import type { UsageTotal } from '@coder/client/types';
+import { Empty } from '@/comps/ui/card';
+import { type Metric, formatMetric } from './metric';
+
+export type Series = { key: string; label: string; color: string };
+
+const OTHER: Series = { key: '', label: 'Other agents', color: 'var(--s0)' };
+
+/** Bars per day; with `series`, those agents are stacked and the rest sit on top as one. */
+export function DayChart({
+  days,
+  totals,
+  metric,
+  series = [],
+  label,
+}: {
+  days: string[];
+  totals: UsageTotal[];
+  metric: Metric;
+  series?: Series[];
+  label: string;
+}) {
+  const byDay = new Map(totals.map(row => [row.key, row]));
+  const max = Math.max(1, ...totals.map(row => row[metric]));
+  const step = Math.ceil(days.length / 16);
+  const text = (value: number) => formatMetric(metric, value);
+  if (!totals.some(row => row[metric] > 0))
+    return (
+      <div class="chart empty-chart" aria-label={label}>
+        <Empty title="Nothing ran in this range" />
+      </div>
+    );
+  return (
+    <>
+      {series.length ? (
+        <div class="legend">
+          {[...series, OTHER].map(entry => (
+            <span key={entry.key}>
+              <i style={`--c:${entry.color}`} />
+              {entry.label}
+            </span>
+          ))}
+        </div>
+      ) : null}
+      <ol class="chart" aria-label={label}>
+        {days.map((day, index) => {
+          const row = byDay.get(day);
+          const total = row?.[metric] ?? 0;
+          const parts = series.map(entry => ({
+            ...entry,
+            value: row?.parts?.[entry.key]?.[metric] ?? 0,
+          }));
+          const rest = total - parts.reduce((sum, part) => sum + part.value, 0);
+          const name = new Date(`${day}T12:00:00Z`).toLocaleDateString('en-US', {
+            month: 'short',
+            day: 'numeric',
+            timeZone: 'UTC',
+          });
+          return (
+            <li
+              key={day}
+              style={`--h:${(total / max) * 100}%`}
+              aria-label={`${name}, ${text(total)}`}
+            >
+              {total ? (
+                <span class="col">
+                  {series.length ? (
+                    <>
+                      {parts.map(part =>
+                        part.value ? (
+                          <i key={part.key} style={`--f:${part.value};--c:${part.color}`} />
+                        ) : null,
+                      )}
+                      {rest > 0 ? <i style={`--f:${rest};--c:${OTHER.color}`} /> : null}
+                    </>
+                  ) : (
+                    <i style="--f:1" />
+                  )}
+                </span>
+              ) : null}
+              <small>
+                {index % step
+                  ? ''
+                  : index && days[index - step]!.slice(0, 7) === day.slice(0, 7)
+                    ? Number(day.slice(8))
+                    : name}
+              </small>
+              <span class="tip" role="tooltip">
+                <b>
+                  {name}, {text(total)}
+                </b>
+                {series.length
+                  ? [...parts, { ...OTHER, value: rest }]
+                      .filter(part => part.value > 0)
+                      .map(part => (
+                        <span key={part.key}>
+                          <i style={`--c:${part.color}`} />
+                          {part.label} {text(part.value)}
+                        </span>
+                      ))
+                  : null}
+              </span>
+            </li>
+          );
+        })}
+      </ol>
+    </>
+  );
+}

package/src/server/dash/app/dash/usage/loading.tsx

@@ -0,0 +1,17 @@
+import '@/comps/ui/segmented.css';
+import '@/app/dash/usage/range-bar.css';
+import './usage.css';
+import { HEADS } from '@/comps/frame/heads';
+import { LoadingRange } from '@/app/dash/usage/range-bar';
+import { Loading } from '@/comps/ui/card';
+import { Page, PageHead } from '@/comps/frame/page-head';
+
+export default function UsageLoading() {
+  return (
+    <Page>
+      <PageHead {...HEADS.usage} />
+      <LoadingRange />
+      <Loading label="Loading usage" />
+    </Page>
+  );
+}

package/src/server/dash/app/dash/usage/metric.ts

@@ -0,0 +1,13 @@
+import { formatCount, formatDuration } from '@/utils/format';
+
+export type Metric = 'tasks' | 'runnerMs' | 'tokenCount';
+
+export const METRIC_LABEL: Record<Metric, string> = {
+  tasks: 'Tasks',
+  runnerMs: 'Runner time',
+  tokenCount: 'Tokens',
+};
+
+export function formatMetric(metric: Metric, value: number) {
+  return metric === 'runnerMs' ? formatDuration(value) : formatCount(value);
+}

package/src/server/dash/app/dash/usage/page.tsx

@@ -0,0 +1,117 @@
+import '@/comps/ui/segmented.css';
+import '@/app/dash/usage/range-bar.css';
+import './usage.css';
+import { formatCount, formatDuration, zoneOf } from '@/utils/format';
+import { daysIn, rangeFor } from '@/utils/range';
+import { load } from '@/api/load';
+import type { UsageAmount, UsagePage } from '@coder/client/types';
+import { Card } from '@/comps/ui/card';
+import { Page, PageHead } from '@/comps/frame/page-head';
+import { Stat, Stats } from '@/app/dash/usage/stats';
+import { Settle } from '@/comps/frame/stream';
+import { HEADS } from '@/comps/frame/heads';
+import { TopAgents } from './top-agents';
+import { DayChart, type Series } from '@/app/dash/usage/day-chart';
+import { RangeBar } from '@/app/dash/usage/range-bar';
+import { METRIC_LABEL, type Metric } from '@/app/dash/usage/metric';
+
+const SORT_METRIC: Record<string, Metric> = {
+  tasks: 'tasks',
+  runner: 'runnerMs',
+  tokens: 'tokenCount',
+  name: 'tokenCount',
+};
+const COLORS = ['var(--s1)', 'var(--s2)', 'var(--s3)', 'var(--s4)'];
+const TOP_AGENTS = 10;
+
+export default function UsagePage({ request }: { request?: Request }) {
+  if (!request) return null;
+  const url = new URL(request.url);
+  const tz = zoneOf(request);
+  const range = rangeFor(request, tz);
+  const asked = url.searchParams.get('sort') ?? '';
+  const sort = Object.hasOwn(SORT_METRIC, asked) ? asked : 'tokens';
+  const metric = SORT_METRIC[sort]!;
+
+  const first = load(request).usage({
+    by: 'agent',
+    cursor: '',
+    since: range.since,
+    until: range.until,
+    limit: TOP_AGENTS,
+    sort,
+  });
+  const agents = load(request).agents.list();
+  const days = load(request).usage({
+    by: 'day',
+    since: range.since,
+    until: range.until,
+    tz,
+    top: 4,
+    sort: sort === 'name' ? 'tokens' : sort,
+  });
+
+  return (
+    <Page>
+      <PageHead {...HEADS.usage} />
+      <RangeBar
+        range={range}
+        to={{ href: '/dash/usage', params: {}, search: sort === 'tokens' ? undefined : { sort } }}
+        tz={tz}
+      />
+      <Settle
+        load={() =>
+          Promise.all([first, days, agents]).then(([page, chart, known]) => {
+            const { summary, items } = page;
+            const series = (chart.top ?? []).map((key, index): Series => ({
+              key,
+              label: key,
+              color: COLORS[index]!,
+            }));
+            const shown = (key: keyof UsageAmount) => items.reduce((sum, row) => sum + row[key], 0);
+            return (
+              <>
+                <Stats label="Totals">
+                  <Stat label="Agents" value={formatCount(summary.agents)} />
+                  <Stat label="Tasks" value={formatCount(summary.tasks)} />
+                  <Stat label="Runner time" value={formatDuration(summary.runnerMs)} />
+                  <Stat label="Tokens" value={formatCount(summary.tokenCount)} />
+                </Stats>
+                {summary.tasks ? (
+                  <Card title={`${METRIC_LABEL[metric]} per day`}>
+                    <div class="body">
+                      <DayChart
+                        days={daysIn(range, tz)}
+                        totals={chart.totals}
+                        metric={metric}
+                        series={series}
+                        label={`${METRIC_LABEL[metric]} per day, top agents stacked`}
+                      />
+                    </div>
+                  </Card>
+                ) : null}
+                <TopAgents
+                  rows={items}
+                  known={new Set(known.map(agent => agent.id))}
+                  other={
+                    summary.agents > items.length
+                      ? {
+                          tasks: summary.tasks - shown('tasks'),
+                          runnerMs: summary.runnerMs - shown('runnerMs'),
+                          tokenCount: summary.tokenCount - shown('tokenCount'),
+                        }
+                      : undefined
+                  }
+                  sort={sort}
+                  range={range.query}
+                  tops={Object.fromEntries(series.map(entry => [entry.key, entry.color]))}
+                  metric={metric}
+                />
+              </>
+            );
+          })
+        }
+      />
+    </Page>
+  );
+}

package/src/server/dash/app/dash/usage/range-bar.css

@@ -0,0 +1,13 @@
+/* the range presets, a custom span and the label, on one line where they fit */
+.range-line {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.date-pop:popover-open {
+  display: grid;
+  gap: 12px;
+  min-width: 240px;
+  padding: 14px;
+}

package/src/server/dash/app/dash/usage/range-bar.tsx

@@ -0,0 +1,69 @@
+import '@/comps/ui/segmented.css';
+import './range-bar.css';
+
+import { Link } from '@wular/pnext/link';
+import { PRESETS, dayOf, type Range } from '@/utils/range';
+import { CustomRange } from './custom-range';
+import { withSearch, type To } from '@/comps/nav/to';
+import { iDown } from '@/comps/ui/icons';
+import { Icon } from '@/comps/ui/icon';
+import { BLANK } from '@/comps/frame/loading-card';
+
+/** Presets and a custom span, for the usage pages. */
+export function RangeBar({
+  range,
+  to,
+  tz,
+}: {
+  range: Range;
+  /** The page the range applies to, with its own query. */
+  to: To;
+  tz: string;
+}) {
+  const today = dayOf(Date.now(), tz);
+  return (
+    <div class="range-line">
+      <div class="seg-btns" role="group" aria-label="Range">
+        {Object.entries(PRESETS).map(([key, preset]) => (
+          <Link
+            key={key}
+            {...to}
+            search={withSearch(to.search, { range: key })}
+            scroll={false}
+            aria-current={range.key === key ? 'page' : undefined}
+          >
+            {preset.short}
+          </Link>
+        ))}
+        <CustomRange
+          page={to}
+          from={range.from ?? dayOf(range.since, tz)}
+          to={range.to ?? today}
+          today={today}
+          on={range.key === 'custom'}
+        />
+      </div>
+      <span class="muted">{range.label}</span>
+    </div>
+  );
+}
+
+/** A usage range bar before its page arrives; the range it shows comes with the page. */
+export function LoadingRange() {
+  return (
+    <div class="range-line" aria-hidden="true">
+      <div class="seg-btns">
+        {Object.values(PRESETS).map(preset => (
+          <a key={preset.short}>{preset.short}</a>
+        ))}
+        <span class="menu custom">
+          <button type="button" disabled tabIndex={-1}>
+            Custom
+            <Icon d={iDown} />
+          </button>
+        </span>
+      </div>
+      <span class="muted">{BLANK}</span>
+    </div>
+  );
+}

package/src/server/dash/app/dash/usage/stats.css

@@ -0,0 +1,52 @@
+/* stats */
+.stats {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 12px;
+}
+.stats > div {
+  position: relative;
+  display: grid;
+  align-content: start;
+  gap: 8px;
+  min-width: 0;
+  padding: 14px 16px;
+  border: 1px solid var(--line);
+  background: var(--panel);
+}
+.stats > div::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  height: 1px;
+  background: var(--acc);
+  opacity: 0.7;
+}
+.stats small {
+  font-size: 10px;
+  color: var(--muted);
+}
+.stats strong {
+  font-size: 20px;
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+  overflow-wrap: anywhere;
+  line-height: 1.25;
+}
+
+@media (max-width: 1000px) {
+  .stats {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 760px) {
+  .stats {
+    gap: 8px;
+  }
+  .stats strong {
+    font-size: 16px;
+  }
+}

package/src/server/dash/app/dash/usage/stats.tsx

@@ -0,0 +1,19 @@
+import './stats.css';
+import type { ComponentChildren } from 'preact';
+
+export function Stats({ label, children }: { label: string; children: ComponentChildren }) {
+  return (
+    <section class="stats" aria-label={label}>
+      {children}
+    </section>
+  );
+}
+
+export function Stat({ label, value }: { label: string; value: ComponentChildren }) {
+  return (
+    <div>
+      <small>{label}</small>
+      {typeof value === 'object' ? value : <strong>{value}</strong>}
+    </div>
+  );
+}