@wular/coder 0.4.3 → 0.4.4

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

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

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

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

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

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

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

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

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

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

@@ -1,16 +0,0 @@
-'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;
-}