@wular/coder 0.4.3 → 0.4.4

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

@@ -1,63 +0,0 @@
-'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

@@ -1,109 +0,0 @@
-/* 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

@@ -1,110 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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

@@ -1,117 +0,0 @@
-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

@@ -1,13 +0,0 @@
-/* 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

@@ -1,69 +0,0 @@
-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

@@ -1,52 +0,0 @@
-/* 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

@@ -1,19 +0,0 @@
-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>
-  );
-}

package/src/server/dash/app/dash/usage/top-agents.css

@@ -1,40 +0,0 @@
-.usage td:first-child {
-  width: 40%;
-}
-.unlinked {
-  font-weight: 500;
-  color: var(--muted);
-}
-.unlinked.gone {
-  color: var(--dim);
-}
-.bar-in {
-  display: block;
-  height: 3px;
-  margin-top: 8px;
-  width: var(--w);
-  background: var(--acc);
-  opacity: 0.6;
-}
-.bar-in.top {
-  opacity: 1;
-  background: var(--c, var(--acc));
-}
-
-@media (max-width: 760px) {
-  .usage.stacked tr {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-  }
-  .usage td.num {
-    display: grid;
-    text-align: left;
-    font-size: 12px;
-  }
-  .usage td.num::before {
-    content: attr(data-label);
-    font-size: 10px;
-    letter-spacing: 0.2em;
-    text-transform: uppercase;
-    color: var(--dim);
-  }
-}