@wular/coder 0.3.18 → 0.4.0

package/src/server/dash/app/dash/agents/[slug]/(tabs)/versions-list.tsx

@@ -0,0 +1,53 @@
+'use client';
+
+import { client } from '@/utils/client';
+import { formatDate } from '@/utils/format';
+import { usePaged } from '@/utils/paged';
+import type { VersionRow, Paged } from '@coder/client/types';
+import { Badge } from '@/comps/ui/badge';
+import { LIST_PAGE } from '@/utils/paged';
+import { Tail } from '@/comps/ui/tail';
+
+/** Version history newest first; older versions load as the page scrolls. */
+export function VersionsList({
+  agent,
+  current,
+  first,
+  tz,
+}: {
+  agent: string;
+  current: number;
+  first: Paged<VersionRow>;
+  tz: string;
+}) {
+  const list = usePaged<VersionRow>({
+    name: `versions|${agent}`,
+    fetchPage: cursor => client.agents.versions(agent, { cursor, limit: LIST_PAGE }),
+    query: '',
+    first,
+    initial: '',
+  });
+  return (
+    <>
+      <ul class="versions">
+        {list.rows.map(version => (
+          <li key={version.version}>
+            <Badge tone={version.version === current ? 'acc' : undefined}>v{version.version}</Badge>
+            <span class="muted grow">
+              {[
+                version.version === current && 'current',
+                version.importedFrom !== 'upload' &&
+                  version.importedFrom &&
+                  `${version.importedFrom}${version.commit ? ` at ${version.commit.slice(0, 7)}` : ''}`,
+              ]
+                .filter(Boolean)
+                .join(', ')}
+            </span>
+            <span class="when">{formatDate(version.createdAt, tz)}</span>
+          </li>
+        ))}
+      </ul>
+      <Tail noun="versions" {...list} />
+    </>
+  );
+}

package/src/server/dash/app/dash/agents/[slug]/edit/loading.tsx

@@ -0,0 +1,31 @@
+import { iLeft } from '@/comps/ui/icons';
+import { BLANK, LoadingCard } from '@/comps/frame/loading-card';
+import { LoadingHero } from '@/app/dash/agents/agent/hero';
+import { Page } from '@/comps/frame/page-head';
+import { Icon } from '@/comps/ui/icon';
+
+export default function AgentEditLoading() {
+  return (
+    <Page>
+      <LoadingHero
+        back={
+          <span class="back" aria-hidden="true">
+            <Icon d={iLeft} />
+            {BLANK}
+          </span>
+        }
+        actions={
+          <>
+            <button type="button" class="btn ghost" disabled>
+              Cancel
+            </button>
+            <button type="button" class="btn" disabled>
+              Publish new version
+            </button>
+          </>
+        }
+      />
+      <LoadingCard label="Loading editor" h={472} />
+    </Page>
+  );
+}

package/src/server/dash/app/dash/agents/[slug]/edit/page.tsx

@@ -0,0 +1,91 @@
+import { dynamic } from '@wular/pnext/dynamic';
+
+import { load } from '@/api/load';
+import type { AgentRow } from '@coder/client/types';
+import { Card } from '@/comps/ui/card';
+import { Back, Page } from '@/comps/frame/page-head';
+import { Settle } from '@/comps/frame/stream';
+import { Hero } from '@/app/dash/agents/agent/hero';
+import { loadAgent } from '@/api/load';
+import { editableAgent } from '@/api/types';
+import { NO_MODELS, modelsByEngine } from '@/app/dash/settings/model-options';
+
+const AgentEditor = dynamic(() =>
+  import('@/app/dash/agents/editor/editor').then(m => m.AgentEditor),
+);
+
+function EditedElsewhere({ agent }: { agent: AgentRow }) {
+  return (
+    <Card title="Where this agent is edited">
+      <p class="body">
+        {agent.source === 'repo' ? (
+          <>
+            This agent is tracked in <b>{agent.repo}</b>. Change its files there and push, and the
+            server picks up the new version.{' '}
+            {agent.sourceUrl ? (
+              <a class="link" href={agent.sourceUrl} target="_blank" rel="noreferrer">
+                Open the folder
+              </a>
+            ) : null}
+          </>
+        ) : (
+          'This agent ships with Coder, so its definition is fixed. How it runs here is yours to change under Settings.'
+        )}
+      </p>
+    </Card>
+  );
+}
+
+/** The editor gets the whole page: back to the agent, its hero holding Cancel and Publish, then the parts. */
+export default async function AgentEditPage({
+  request,
+  params,
+}: {
+  request?: Request;
+  params: Promise<Record<string, string | string[]>>;
+}) {
+  if (!request) return null;
+  const { slug: raw } = await params;
+  const slug = Array.isArray(raw) ? raw[0]! : raw!;
+  const catalog = load(request).integrations.list();
+  const models = load(request)
+    .models.list()
+    .catch(() => NO_MODELS);
+  const config = load(request)
+    .config.get()
+    .catch(() => undefined);
+  const section = new URL(request.url).searchParams.get('section') ?? undefined;
+  const agent = await loadAgent(request, slug);
+
+  return (
+    <Page>
+      <Settle
+        load={() =>
+          Promise.all([catalog, models, config]).then(([integrations, shape, shown]) =>
+            editableAgent(agent) ? (
+              <AgentEditor
+                catalog={integrations}
+                agent={agent}
+                section={section}
+                models={modelsByEngine(shape)}
+                defaults={{
+                  engine: shown?.effective.chain?.[0] ?? 'claude',
+                  engines: shown?.effective.engines ?? {},
+                  builtin: shape.builtin,
+                }}
+              />
+            ) : (
+              <>
+                <Hero
+                  agent={agent}
+                  back={<Back href="/dash/agents/[slug]" params={{ slug }} label={agent.name} />}
+                />
+                <EditedElsewhere agent={agent} />
+              </>
+            ),
+          )
+        }
+      />
+    </Page>
+  );
+}

package/src/server/dash/app/dash/agents/agent/agent-pills.css

@@ -0,0 +1,27 @@
+.link-pill {
+  color: var(--acc);
+  text-transform: none;
+  letter-spacing: 0.02em;
+}
+.link-pill .ic {
+  width: 12px;
+  height: 12px;
+}
+.pf {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  gap: 7px;
+  color: var(--muted);
+  white-space: nowrap;
+}
+.brand-icon {
+  width: 12px;
+  height: 12px;
+  flex: none;
+}
+.brand-icon > svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}

package/src/server/dash/app/dash/agents/agent/agent-pills.tsx

@@ -0,0 +1,133 @@
+import './agent-pills.css';
+import { useId } from 'preact/hooks';
+import { iGit } from '@/comps/ui/icons';
+import type { IntegrationInfo, Reach } from '@coder/client/types';
+import { Badge } from '@/comps/ui/badge';
+import { Icon } from '@/comps/ui/icon';
+
+const REACH_TEXT: Record<Reach, string> = {
+  installed: 'installed',
+  created: 'app created, not installed yet',
+  none: 'no app yet',
+};
+
+/** Official marks carry gradient ids; each copy on a page gets its own so they never shadow one another. */
+const scoped = (svg: string, suffix: string) =>
+  svg
+    .replace(/\bid="([^"]+)"/g, `id="$1${suffix}"`)
+    .replace(/url\(#([^)]+)\)/g, `url(#$1${suffix})`)
+    .replace(/href="#([^"]+)"/g, `href="#$1${suffix}"`);
+
+export function BrandIcon({ brand }: { brand: IntegrationInfo['brand'] }) {
+  const uid = useId().replace(/[^a-zA-Z0-9_-]/g, '');
+  if (brand.svg)
+    return (
+      <span
+        class="brand-icon"
+        aria-hidden="true"
+        dangerouslySetInnerHTML={{ __html: scoped(brand.svg, `-${uid}`) }}
+      />
+    );
+
+  return (
+    <svg
+      class="brand-icon"
+      width="12"
+      height="12"
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      aria-hidden="true"
+      style={{ color: brand.dark ? `light-dark(${brand.color}, ${brand.dark})` : brand.color }}
+    >
+      <path d={brand.icon} />
+    </svg>
+  );
+}
+
+export function Platform({
+  id,
+  info,
+  state,
+}: {
+  id: string;
+  info?: IntegrationInfo;
+  state: Reach;
+}) {
+  const name = info?.name ?? id;
+  return (
+    <span class={`pf ${state}`} title={`${name}, ${REACH_TEXT[state]}`} data-s={REACH_TEXT[state]}>
+      {info ? <BrandIcon brand={info.brand} /> : null}
+      {name}
+    </span>
+  );
+}
+
+const AGENT_KIND: Record<string, string> = {
+  builtin: 'built-in',
+  upload: 'dashboard',
+  repo: 'repository',
+  home: 'local',
+};
+
+/** Built-in, dashboard, or the repository it comes from, plus the version. */
+export function AgentPills({
+  agent,
+}: {
+  agent: {
+    source: string;
+    repo?: string;
+    sourceUrl?: string;
+    currentVersion: number;
+    local?: true;
+    commit?: string;
+  };
+}) {
+  return (
+    <>
+      {agent.source === 'repo' && agent.repo ? (
+        agent.sourceUrl ? (
+          <a
+            class="badge link-pill"
+            href={agent.sourceUrl}
+            target="_blank"
+            rel="noreferrer"
+            title={`Repository agent, opens ${agent.repo}`}
+          >
+            <Icon d={iGit} />
+            {agent.repo}
+          </a>
+        ) : (
+          <span class="badge link-pill" title="Repository agent">
+            <Icon d={iGit} />
+            {agent.repo}
+          </span>
+        )
+      ) : (
+        <Badge
+          title={
+            agent.local && agent.source === 'repo'
+              ? 'Repo agent, a folder in this repository'
+              : agent.source === 'home'
+                ? 'Local agent, a folder on this machine'
+                : agent.source !== 'upload'
+                  ? 'Ships with Coder'
+                  : agent.local
+                    ? 'Local agent, a folder on this machine'
+                    : 'Dashboard agent, made and edited here'
+          }
+        >
+          {agent.local && agent.source === 'upload'
+            ? 'local'
+            : (AGENT_KIND[agent.source] ?? agent.source)}
+        </Badge>
+      )}
+      {agent.local ? (
+        agent.commit && (
+          <Badge title="Last commit of the agent's folder">{agent.commit.slice(0, 7)}</Badge>
+        )
+      ) : (
+        <Badge>v{agent.currentVersion}</Badge>
+      )}
+    </>
+  );
+}

package/src/server/dash/app/dash/agents/agent/hero.css

@@ -0,0 +1,40 @@
+/* agent hero and tabs */
+.hero {
+  display: flex;
+  align-items: flex-start;
+  gap: 20px;
+  flex-wrap: wrap;
+}
+.hero > .grow {
+  flex: 1 1 280px;
+}
+.hero-mark {
+  display: grid;
+  place-items: center;
+  flex: none;
+  width: 64px;
+  height: 64px;
+  background: var(--blue);
+  color: #fff;
+  font-size: 26px;
+  font-weight: 700;
+}
+
+@media (max-width: 760px) {
+  .hero {
+    gap: 14px;
+  }
+  .hero-mark {
+    width: 48px;
+    height: 48px;
+    font-size: 20px;
+  }
+  /* the description keeps two lines before and after it loads, so nothing under it moves */
+  .hero .lead {
+    display: -webkit-box;
+    min-height: 2lh;
+    overflow: hidden;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+  }
+}

package/src/server/dash/app/dash/agents/agent/hero.tsx

@@ -0,0 +1,60 @@
+import './hero.css';
+import type { ComponentChildren } from 'preact';
+
+import { BLANK } from '@/comps/frame/loading-card';
+import type { AgentRow } from '@coder/client/types';
+import { initial } from '@/utils/format';
+import { AgentPills } from '@/app/dash/agents/agent/agent-pills';
+import { Sentinel } from '@/comps/ui/sentinel';
+
+/** An agent's hero before its record arrives: the same lines, blank, so what it shows lands in place. */
+export function LoadingHero({
+  actions,
+  back,
+}: {
+  actions?: ComponentChildren;
+  back?: ComponentChildren;
+}) {
+  return (
+    <header class="hero">
+      <span class="hero-mark" />
+      <div class="grow">
+        {back}
+        <div class="title-row">
+          <h1>{BLANK}</h1>
+        </div>
+        <p class="lead">{BLANK}</p>
+      </div>
+      {actions ? <div class="actions">{actions}</div> : null}
+    </header>
+  );
+}
+
+export function Hero({
+  agent,
+  actions,
+  back,
+}: {
+  agent: AgentRow;
+  actions?: ComponentChildren;
+  /** A `Back` link on its own line above the title. */
+  back?: ComponentChildren;
+}) {
+  return (
+    <>
+      <Sentinel />
+      <header class="hero">
+        <span class="hero-mark">{initial(agent.name)}</span>
+        <div class="grow">
+          {back}
+          <div class="title-row">
+            <h1>{agent.name}</h1>
+            <AgentPills agent={agent} />
+          </div>
+          <p class="lead">{agent.description ?? 'No description yet.'}</p>
+        </div>
+        {actions ? <div class="actions">{actions}</div> : null}
+      </header>
+    </>
+  );
+}

package/src/server/dash/app/dash/agents/agent/instructions.css

@@ -0,0 +1,29 @@
+.md {
+  overflow-wrap: anywhere;
+}
+.md :where(h3, h4, h5, h6) {
+  margin: 0;
+  font-size: 13px;
+  font-weight: 700;
+}
+.md h3 {
+  font-size: 14px;
+}
+.md ul {
+  padding-left: 20px;
+  list-style: disc;
+}
+.md ol {
+  padding-left: 20px;
+  list-style: decimal;
+}
+.md pre {
+  margin: 0;
+  padding: 8px 12px;
+  overflow-x: auto;
+  background: var(--wash);
+}
+.md pre code {
+  padding: 0;
+  background: none;
+}

package/src/server/dash/app/dash/agents/agent/instructions.tsx

@@ -0,0 +1,82 @@
+'use client';
+
+import './instructions.css';
+
+import { h, type ComponentChildren } from 'preact';
+
+import { Collapse } from '@/comps/ui/collapse';
+
+const INLINE =
+  /`([^`\n]+)`|\*\*(.+?)\*\*|__(.+?)__|\*(\S(?:.*?\S)?)\*|(?<!\w)_(\S(?:.*?\S)?)_(?!\w)|\[([^\]\n]+)\]\(([^)\s]+)\)/g;
+const SAFE_HREF = /^(?:https?:|mailto:)/i;
+const FENCE = /^\s*(```|~~~)/;
+const HEADING = /^(#{1,6})\s+(.*?)(?:\s+#+)?\s*$/;
+const ITEM = /^\s*(?:([-*+])|\d+[.)])\s+(.*)$/;
+const BLOCK = /^\s*(?:#{1,6}\s|```|~~~|[-*+]\s|\d+[.)]\s)/;
+
+function inline(text: string): ComponentChildren[] {
+  const out: ComponentChildren[] = [];
+  let at = 0;
+  for (const match of text.matchAll(INLINE)) {
+    const [all, code, bold, bold2, em, em2, label, href] = match;
+    if (match.index > at) out.push(text.slice(at, match.index));
+    if (code) out.push(<code>{code}</code>);
+    else if (bold || bold2) out.push(<strong>{inline(bold || bold2!)}</strong>);
+    else if (em || em2) out.push(<em>{inline(em || em2!)}</em>);
+    else if (SAFE_HREF.test(href!))
+      out.push(
+        <a class="link" href={href} target="_blank" rel="noopener noreferrer">
+          {inline(label!)}
+        </a>,
+      );
+    else out.push(...inline(label!));
+    at = match.index + all.length;
+  }
+  if (at < text.length) out.push(text.slice(at));
+  return out;
+}
+
+/** Minimal markdown as Preact nodes, so raw HTML in the text stays text. */
+export function markdown(text: string) {
+  const lines = text.split(/\r?\n/);
+  const blocks: ComponentChildren[] = [];
+  for (let i = 0; i < lines.length;) {
+    const line = lines[i]!;
+    const fence = FENCE.exec(line);
+    const heading = HEADING.exec(line);
+    const item = ITEM.exec(line);
+    if (fence) {
+      const end = lines.findIndex((next, j) => j > i && next.trim().startsWith(fence[1]!));
+      const stop = end < 0 ? lines.length : end;
+      blocks.push(
+        <pre>
+          <code>{lines.slice(i + 1, stop).join('\n')}</code>
+        </pre>,
+      );
+      i = stop + 1;
+    } else if (heading) {
+      blocks.push(h(`h${Math.min(heading[1]!.length + 2, 6)}`, null, inline(heading[2]!)));
+      i++;
+    } else if (item) {
+      const ordered = !item[1];
+      const items: ComponentChildren[] = [];
+      for (let next; (next = ITEM.exec(lines[i] ?? '')) && !next[1] === ordered; i++)
+        items.push(<li>{inline(next[2]!)}</li>);
+      blocks.push(ordered ? <ol>{items}</ol> : <ul>{items}</ul>);
+    } else if (!line.trim()) i++;
+    else {
+      const para: ComponentChildren[] = [];
+      for (; lines[i]?.trim() && (!para.length || !BLOCK.test(lines[i]!)); i++) {
+        if (para.length) para.push(<br />);
+        para.push(...inline(lines[i]!));
+      }
+      blocks.push(<p>{para}</p>);
+    }
+  }
+  return blocks;
+}
+
+/** An agent's instructions as markdown, collapsed with a Show more toggle when long. */
+export function Instructions({ text }: { text: string }) {
+  return <Collapse class="body md">{markdown(text)}</Collapse>;
+}

package/src/server/dash/app/dash/agents/editor/connect-repositories.ts

@@ -0,0 +1,16 @@
+'use client';
+
+import { client } from '@/utils/client';
+
+/** Installs the app that reaches repositories, a built-in one first, and comes back to `back`. */
+export async function connectRepositories(back: string) {
+  const [apps, catalog] = await Promise.all([client.apps.list(), client.integrations.list()]);
+  const reach = new Set(catalog.filter(entry => entry.repositories).map(entry => entry.id));
+  const app = apps
+    .map(row => row.value)
+    .sort((a, b) => Number(Boolean(b.builtin)) - Number(Boolean(a.builtin)))
+    .find(entry => reach.has(entry.integration));
+  if (!app) throw new Error('No app here can reach repositories yet.');
+  const { url } = await client.apps.install(app.id, back);
+  location.href = url;
+}