@wular/coder 0.3.18 → 0.4.0

package/src/server/dash/app/login/page.css

@@ -0,0 +1,26 @@
+.btn .logo {
+  width: 16px;
+  height: 16px;
+  flex: none;
+}
+.provider-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
+}
+.provider-grid > .provider:only-child {
+  grid-column: 1 / -1;
+}
+.provider {
+  justify-content: center;
+  gap: 10px;
+  text-transform: none;
+  letter-spacing: 0.02em;
+  font-size: 13px;
+  font-weight: 500;
+}
+@media (max-width: 420px) {
+  .provider-grid {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}

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

@@ -0,0 +1,57 @@
+import './page.css';
+import { redirect } from '@wular/pnext/navigation';
+
+import { ErrorText } from '@/comps/ui/field';
+import { AuthPanel } from '@/comps/frame/auth-panel';
+import { safeReturnPath } from '@coder/server/auth/sign-in';
+import { load } from '@/api/load';
+
+const WULAR_LOGO = (
+  <svg class="logo" viewBox="6 12 52 36" aria-hidden="true">
+    <path
+      d="M8 14 18 46 26 26h12l8 20 10-32"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="5"
+      stroke-linejoin="miter"
+    />
+  </svg>
+);
+
+const ERRORS: Record<string, string> = {
+  expired: 'That sign-in took too long. Sign in again.',
+  unavailable: 'Wular Auth could not be reached. Try again in a moment.',
+  access_denied: 'Sign-in was cancelled.',
+};
+
+function LoginPage({ signIn, error }: { signIn: string; error?: string | null }) {
+  return (
+    <AuthPanel
+      tag="sign in"
+      title="Continue to Coder"
+      lead="Coder signs you in with your Wular Auth account."
+    >
+      <div class="provider-grid">
+        <a class="btn outline provider" href={signIn}>
+          {WULAR_LOGO}
+          <span>Sign in with Wular Auth</span>
+        </a>
+      </div>
+      <ErrorText value={error ? (ERRORS[error] ?? 'Sign-in did not finish. Try again.') : ''} />
+    </AuthPanel>
+  );
+}
+
+export default async function Page({ request }: { request?: Request }) {
+  if (!request) return null;
+  const url = new URL(request.url);
+  const { wular } = await load(request).info();
+  // A memory server keeps no accounts: its dashboard asks for the admin token.
+  if (!wular) redirect('/dash');
+  return (
+    <LoginPage
+      signIn={`/api/auth/sign-in?return=${encodeURIComponent(safeReturnPath(url.searchParams.get('return'), url.origin))}`}
+      error={url.searchParams.get('error')}
+    />
+  );
+}

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

@@ -0,0 +1,5 @@
+import { redirect } from '@wular/pnext/navigation';
+
+export default function Home() {
+  redirect('/dash');
+}

package/src/server/dash/app/responsive.css

@@ -0,0 +1,49 @@
+@media (max-width: 760px) {
+  main {
+    padding: 16px 16px 64px;
+  }
+  h1 {
+    font-size: 22px;
+  }
+  .head .actions,
+  .hero .actions {
+    width: 100%;
+  }
+  .head {
+    row-gap: 12px;
+  }
+  .head .actions {
+    gap: 4px;
+  }
+  .head .actions > .btn {
+    padding-inline: 10px;
+  }
+  .head .lead {
+    white-space: normal;
+  }
+  .fields,
+  .fields.three,
+  .agent-form,
+  .import,
+  .cred-new.split {
+    grid-template-columns: minmax(0, 1fr);
+  }
+  .stacked thead {
+    display: none;
+  }
+  .stacked tr {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    gap: 8px 12px;
+    padding: 14px 16px;
+    border-bottom: 1px solid var(--line);
+  }
+  .stacked td {
+    padding: 0;
+    border: 0;
+  }
+  .stacked td:first-child {
+    grid-column: 1 / -1;
+    min-width: 0;
+  }
+}

package/src/server/dash/app/zone.tsx

@@ -0,0 +1,13 @@
+'use client';
+
+import { useEffect } from 'preact/hooks';
+
+/** Records the browser's zone for server-rendered dates; until then they show in UTC. */
+export function Zone() {
+  useEffect(() => {
+    const zone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+    if (zone && !document.cookie.includes(`tz=${encodeURIComponent(zone)}`))
+      document.cookie = `tz=${encodeURIComponent(zone)}; path=/; max-age=31536000; samesite=lax`;
+  }, []);
+  return null;
+}

package/src/server/dash/comps/frame/auth-panel.css

@@ -0,0 +1,60 @@
+/* sign-in and other server pages */
+.auth {
+  display: grid;
+  min-height: 100vh;
+}
+.auth-side {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 28px;
+  padding: 40px 24px 72px;
+}
+.auth-frame {
+  width: 100%;
+  max-width: 440px;
+}
+.auth-frame .bar {
+  min-height: 32px;
+  font-size: 10px;
+}
+.auth-frame .brand {
+  font-size: 12px;
+}
+.tag {
+  margin-left: auto;
+  padding: 1px 8px;
+  background: var(--deep);
+  color: #fff;
+}
+.auth-body {
+  display: grid;
+  gap: 14px;
+  padding: 28px 24px 26px;
+}
+.auth-body h1 {
+  font-size: 22px;
+}
+.auth-body .lead {
+  margin: 0 0 6px;
+}
+.auth-body form {
+  display: grid;
+  gap: 14px;
+}
+.auth-links {
+  position: absolute;
+  bottom: 24px;
+  left: 0;
+  right: 0;
+  display: flex;
+  justify-content: center;
+  gap: 24px;
+  font-size: 9px;
+  color: var(--muted);
+}
+.auth-links a:hover {
+  color: var(--fg);
+}

package/src/server/dash/comps/frame/auth-panel.tsx

@@ -0,0 +1,44 @@
+import './auth-panel.css';
+import type { ComponentChildren } from 'preact';
+
+import { Mark } from '@/comps/ui/icon';
+
+/** The one centered panel every server page outside the dashboard uses. */
+export function AuthPanel({
+  tag,
+  title,
+  lead,
+  children,
+}: {
+  tag: string;
+  title: string;
+  lead?: ComponentChildren;
+  children?: ComponentChildren;
+}) {
+  return (
+    <section class="auth">
+      <div class="auth-side">
+        <div class="auth-frame frame">
+          <div class="bar">
+            <a class="brand" href="/">
+              <Mark />
+              <span class="lockup">
+                coder <small>wular</small>
+              </span>
+            </a>
+            <span class="tag">{tag}</span>
+          </div>
+          <div class="auth-body">
+            <h1>{title}</h1>
+            {lead ? <p class="lead">{lead}</p> : null}
+            {children}
+          </div>
+        </div>
+        <nav class="auth-links">
+          <a href="https://wular.ai">wular.ai</a>
+          <a href="https://coder.wular.ai">hosted service</a>
+        </nav>
+      </div>
+    </section>
+  );
+}

package/src/server/dash/comps/frame/drawer.css

@@ -0,0 +1,28 @@
+.scrim {
+  display: none;
+}
+
+@media (max-width: 760px) {
+  .drawer .side {
+    transform: none;
+  }
+  .scrim {
+    display: block;
+    position: fixed;
+    inset: 56px 0 0;
+    z-index: 25;
+    background: rgba(11, 12, 16, 0.45);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.2s;
+  }
+  .drawer .scrim {
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
+@media (min-width: 761px) {
+  .only-m {
+    display: none;
+  }
+}

package/src/server/dash/comps/frame/drawer.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+import './drawer.css';
+
+import { useEffect, useState } from 'preact/hooks';
+import { usePathname } from '@wular/pnext/navigation/client';
+
+import { iMenu } from '@/comps/ui/icons';
+import { Icon } from '@/comps/ui/icon';
+
+/** The phone layout's navigation drawer: its button and the scrim behind it; Escape or a new page closes it. */
+export function Drawer() {
+  const [open, setOpen] = useState(false);
+  const path = usePathname();
+
+  useEffect(() => setOpen(false), [path]);
+  useEffect(() => {
+    document.documentElement.classList.toggle('drawer', open);
+    if (!open) return;
+
+    const onKey = (event: KeyboardEvent) => event.key === 'Escape' && setOpen(false);
+    addEventListener('keydown', onKey);
+    return () => removeEventListener('keydown', onKey);
+  }, [open]);
+
+  return (
+    <>
+      <button
+        type="button"
+        class="icon-btn only-m"
+        aria-label="Open navigation"
+        onClick={() => setOpen(!open)}
+      >
+        <Icon d={iMenu} />
+      </button>
+      <div class="scrim" onClick={() => setOpen(false)} />
+    </>
+  );
+}

package/src/server/dash/comps/frame/heads.ts

@@ -0,0 +1,41 @@
+import type { To } from '@/comps/nav/to';
+
+/** Page titles and leads, shared by the pages and their loading frames. */
+export const HEADS = {
+  agents: {
+    title: 'Agents',
+    lead: 'Each agent listens on the platforms it declares and answers as itself.',
+  },
+  tasks: {
+    title: 'Tasks',
+  },
+  newAgent: {
+    title: 'New agent',
+    lead: 'Start from a template or a repository. Everything but the name has a sensible default.',
+  },
+  usage: {
+    title: 'Usage',
+    lead: 'Tasks, runner time, and tokens by agent. Pick a range, or open an agent for its breakdown.',
+  },
+} as const;
+
+/** Back to the section a link came from, named in the link as `from`, or to the page's own list. */
+export function backFrom(
+  from: string | null,
+  list: To & { label: string },
+): To & { label: string } {
+  const task = from?.match(/^\/dash\/tasks\/([^\/?]+)$/);
+  if (task)
+    return {
+      href: '/dash/tasks/[id]',
+      params: { id: decodeURIComponent(task[1]!) },
+      label: 'Task',
+    };
+  const section = from?.match(/^\/dash\/(usage|agents|tasks)(?:\?(.*))?$/);
+  if (!section) return list;
+  const search = new URLSearchParams(section[2] ?? '');
+  const label = HEADS[section[1] as keyof typeof HEADS].title;
+  if (section[1] === 'usage') return { href: '/dash/usage', params: {}, search, label };
+  if (section[1] === 'agents') return { href: '/dash/agents', params: {}, search, label };
+  return { href: '/dash/tasks', params: {}, search, label };
+}

package/src/server/dash/comps/frame/loading-card.tsx

@@ -0,0 +1,65 @@
+import { iDown, iSearch } from '@/comps/ui/icons';
+import { Card, Loading } from '@/comps/ui/card';
+import { Icon } from '@/comps/ui/icon';
+import { Toolbar } from '@/comps/ui/toolbar';
+
+export const BLANK = ' ';
+
+/** `Loading` inside the box its data fills, titled as that box. */
+export function LoadingCard({ title, label, h }: { title?: string; label: string; h?: number }) {
+  return (
+    <Card title={title}>
+      <Loading label={label} h={h} />
+    </Card>
+  );
+}
+
+/** A list's toolbar while the list loads: the same title and controls, inert until the list is live. */
+export function LoadingToolbar({
+  head,
+  search,
+  selects = [],
+  more,
+  action,
+}: {
+  head?: { title: string; lead?: string };
+  search: string;
+  selects?: string[];
+  /** A disabled more-filters button after the selects. */
+  more?: boolean;
+  /** The primary button's label. */
+  action?: string;
+}) {
+  return (
+    <Toolbar
+      head={head}
+      action={
+        action ? (
+          <button type="button" class="btn" disabled>
+            {action}
+          </button>
+        ) : undefined
+      }
+    >
+      <label class="search" aria-hidden="true">
+        <Icon d={iSearch} />
+        <input type="search" placeholder={search} disabled tabIndex={-1} />
+      </label>
+      {selects.map(label => (
+        <span key={label} class="select" aria-hidden="true">
+          <button type="button" disabled tabIndex={-1}>
+            <span class="grow">{label}</span>
+            <Icon d={iDown} />
+          </button>
+        </span>
+      ))}
+      {more ? (
+        <span class="menu filter-more" aria-hidden="true">
+          <button type="button" class="field-btn" disabled tabIndex={-1}>
+            Filter
+          </button>
+        </span>
+      ) : null}
+    </Toolbar>
+  );
+}

package/src/server/dash/comps/frame/page-head.css

@@ -0,0 +1,83 @@
+.page.narrow {
+  max-width: 760px;
+}
+.meta {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+.page .head,
+.page .hero {
+  position: sticky;
+  top: 56px;
+  z-index: 10;
+  margin-inline: -40px;
+  padding: 0 40px 6px;
+  background: var(--bg);
+  /* compacting on stick must not drive scroll anchoring, or the page snaps back up */
+  overflow-anchor: none;
+}
+/* what sticks above the page: the top bar, the page head (its height set by Sentinel) and tabs */
+.page {
+  --stuck: calc(56px + var(--head, 0px) + var(--tabs, 0px));
+}
+.page:has(.tabs:not(.vertical)) {
+  --tabs: 40px;
+}
+.page * {
+  scroll-margin-top: calc(var(--stuck) + 16px);
+}
+.back {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  margin-bottom: 6px;
+  font-size: 12px;
+  color: var(--muted);
+}
+.stuck .back {
+  display: none;
+}
+.back:hover {
+  color: var(--fg);
+}
+.back .ic {
+  width: 14px;
+  height: 14px;
+}
+.title-row {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 6px 12px;
+  min-width: 0;
+}
+.title-row h1 {
+  min-width: 0;
+}
+.head .title-row {
+  flex-wrap: nowrap;
+}
+.head .title-row h1 {
+  flex: 0 1 auto;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.head .title-row .meta {
+  flex: none;
+}
+@media (max-width: 760px) {
+  .page .head,
+  .page .hero {
+    margin-inline: -16px;
+    padding-inline: 16px;
+  }
+  .head .title-row {
+    flex-wrap: wrap;
+  }
+}
+.head .meta:empty {
+  min-height: 20px;
+}

package/src/server/dash/comps/frame/page-head.tsx

@@ -0,0 +1,71 @@
+import './page-head.css';
+import type { ComponentChildren } from 'preact';
+
+import { iLeft } from '@/comps/ui/icons';
+import { Link } from '@wular/pnext/link';
+import type { To } from '@/comps/nav/to';
+import { HEADS } from '@/comps/frame/heads';
+import { Icon } from '@/comps/ui/icon';
+import { Sentinel } from '@/comps/ui/sentinel';
+
+export function Page({ narrow, children }: { narrow?: boolean; children: ComponentChildren }) {
+  return <div class={narrow ? 'page narrow' : 'page'}>{children}</div>;
+}
+
+/** A same-origin `/dash` path from a `back` search param, named for its agent or section, or nothing. */
+function backTo(back: string | null | undefined): { to: To; label: string } | undefined {
+  if (!back?.startsWith('/')) return;
+  const url = new URL(back, 'http://dash');
+  if (url.origin !== 'http://dash' || !/^\/dash(\/|$)/.test(url.pathname)) return;
+  const [, , section, slug] = url.pathname.split('/');
+  let label: string = HEADS[section as keyof typeof HEADS]?.title ?? 'Back';
+  if (section === 'agents' && slug)
+    try {
+      label = decodeURIComponent(slug);
+    } catch {}
+  return { to: { href: url.pathname as To['href'], search: url.searchParams } as To, label };
+}
+
+/** Back to the logical parent, wherever the visitor came from; a `back` search param wins. */
+export function Back({ label, back, ...to }: To & { label: string; back?: string | null }) {
+  const param = backTo(back);
+  return (
+    <Link class="back" {...(param?.to ?? to)}>
+      <Icon d={iLeft} />
+      {param?.label ?? label}
+    </Link>
+  );
+}
+
+/** The page title row with its meta and actions, and one muted lead line; it sticks under the top bar and turns compact there. */
+export function PageHead({
+  title,
+  lead,
+  actions,
+  meta,
+  back,
+}: {
+  title: ComponentChildren;
+  lead?: ComponentChildren;
+  actions?: ComponentChildren;
+  meta?: ComponentChildren;
+  /** A `Back` link on its own line above the title. */
+  back?: ComponentChildren;
+}) {
+  return (
+    <>
+      <Sentinel />
+      <header class="head">
+        <div>
+          {back}
+          <div class="title-row">
+            <h1>{title}</h1>
+            {meta ? <div class="meta">{meta}</div> : null}
+          </div>
+          {lead ? <p class="lead">{lead}</p> : null}
+        </div>
+        {actions ? <div class="actions">{actions}</div> : null}
+      </header>
+    </>
+  );
+}

package/src/server/dash/comps/frame/stream.tsx

@@ -0,0 +1,50 @@
+import type { ComponentChildren } from 'preact';
+import { Suspense } from 'preact/compat';
+
+import { signedOut } from '@/api/load';
+import { Card } from '@/comps/ui/card';
+import { reasonText } from '@/utils/format';
+
+/** A section that waits for `load`, under the route's loading frame; a failure stays inside it. */
+export async function Settle({ load }: { load: () => Promise<ComponentChildren> }) {
+  try {
+    return await load();
+  } catch (error) {
+    return <SectionFailure error={error} />;
+  }
+}
+
+/** A section that streams in behind its loading box; `load` runs when it renders, and a failure stays inside. */
+export function Stream({
+  fallback,
+  load,
+}: {
+  fallback: ComponentChildren;
+  load: () => Promise<ComponentChildren>;
+}) {
+  return (
+    <Suspense fallback={fallback}>
+      <Settle load={load} />
+    </Suspense>
+  );
+}
+
+function SectionFailure({ error }: { error: unknown }) {
+  return (
+    <Card tone="danger" title="Could not load this">
+      <p class="body prose">
+        {signedOut(error) ? (
+          <>
+            Your session ended.{' '}
+            <a class="link" href="/login">
+              Sign in again
+            </a>
+            .
+          </>
+        ) : (
+          reasonText(error)
+        )}
+      </p>
+    </Card>
+  );
+}