@wular/coder 0.3.18 → 0.4.1

package/src/server/dash/app/dash/agents/(list)/agents-grid.tsx

@@ -0,0 +1,143 @@
+'use client';
+
+import type { ComponentChildren } from 'preact';
+
+import { client } from '@/utils/client';
+import { Link } from '@wular/pnext/link';
+import { usePaged } from '@/utils/paged';
+import type { AgentCardRow, IntegrationInfo, Paged } from '@coder/client/types';
+import { Empty } from '@/comps/ui/card';
+import { initial } from '@/utils/format';
+import { AgentPills, BrandIcon, Platform } from '@/app/dash/agents/agent/agent-pills';
+import { Menu, MenuRadio } from '@/comps/ui/menu';
+import { Icon } from '@/comps/ui/icon';
+import { NewAgentMenu } from './agent-menu';
+import { Search, Toolbar, queryOf, useFilters } from '@/comps/ui/toolbar';
+import { Tail } from '@/comps/ui/tail';
+
+type Keys = 'q' | 'platform' | 'type';
+
+function AgentCard({ agent, catalog }: { agent: AgentCardRow; catalog: IntegrationInfo[] }) {
+  return (
+    <li class="agent-card">
+      <div class="bc-head">
+        <span class="mark">{initial(agent.name)}</span>
+        <div class="grow">
+          <h3>
+            <Link class="cover" href="/dash/agents/[slug]" params={{ slug: agent.id }}>
+              {agent.name}
+            </Link>
+          </h3>
+          <span class="pills">
+            <AgentPills agent={agent} />
+          </span>
+        </div>
+      </div>
+      <div class="lead-clamp">
+        <span>{agent.description ?? 'No description yet.'}</span>
+      </div>
+      {agent.platforms.length ? (
+        <span class="pfs">
+          {agent.platforms.map(platform => (
+            <Platform
+              key={platform.id}
+              id={platform.id}
+              info={catalog.find(entry => entry.id === platform.id)}
+              state={platform.state}
+            />
+          ))}
+        </span>
+      ) : (
+        <span class="pfs muted">Listens nowhere yet</span>
+      )}
+    </li>
+  );
+}
+
+/** Every agent in pages, searched and filtered on the server. */
+/** Agent kinds a list filters by. */
+export const KINDS: Array<[string, string]> = [
+  ['', 'All agents'],
+  ['dashboard', 'Dashboard agents'],
+  ['repository', 'Repository agents'],
+  ['builtin', 'Built-in'],
+];
+
+export function AgentsGrid({
+  first,
+  limit,
+  filters,
+  catalog,
+  head,
+  children,
+}: {
+  first: Paged<AgentCardRow>;
+  /** Agent cards per page. */
+  limit: number;
+  filters: Record<Keys, string>;
+  catalog: IntegrationInfo[];
+  head: { title: string; lead: string };
+  /** What shows between the toolbar and the agents. */
+  children?: ComponentChildren;
+}) {
+  const { values, set, query } = useFilters<Keys>(filters);
+  const list = usePaged<AgentCardRow>({
+    name: 'agents',
+    fetchPage: cursor => client.agents.list({ cursor, limit, ...values }),
+    query,
+    first,
+    initial: queryOf(filters),
+  });
+
+  return (
+    <>
+      <Toolbar head={head} action={<NewAgentMenu />}>
+        <Search value={values.q} label="Search agents" onInput={value => set('q', value, 250)} />
+        <Menu
+          class="filter-more"
+          label="More filters"
+          summaryClass={`field-btn${values.platform || values.type ? ' on' : ''}`}
+          summary="Filter"
+        >
+          <p class="pop-label">Platform</p>
+          <div role="group" aria-label="Platform">
+            <MenuRadio on={!values.platform} onPick={() => set('platform', '')}>
+              All platforms
+            </MenuRadio>
+            {catalog.map(entry => (
+              <MenuRadio
+                key={entry.id}
+                on={values.platform === entry.id}
+                onPick={() => set('platform', entry.id)}
+              >
+                <span class="pf">
+                  <BrandIcon brand={entry.brand} />
+                  {entry.name}
+                </span>
+              </MenuRadio>
+            ))}
+          </div>
+          <p class="pop-label">Source</p>
+          <div role="group" aria-label="Source">
+            {KINDS.map(([value, label]) => (
+              <MenuRadio key={value} on={values.type === value} onPick={() => set('type', value)}>
+                {label}
+              </MenuRadio>
+            ))}
+          </div>
+        </Menu>
+      </Toolbar>
+      {children}
+      {list.rows.length ? (
+        <ul class="agent-grid" aria-busy={list.stale}>
+          {list.rows.map(agent => (
+            <AgentCard key={agent.id} agent={agent} catalog={catalog} />
+          ))}
+        </ul>
+      ) : list.stale ? null : (
+        <Empty title="No agents match">Try another search or filter.</Empty>
+      )}
+      <Tail noun="agents" {...list} />
+    </>
+  );
+}

package/src/server/dash/app/dash/agents/(list)/connect-apps.tsx

@@ -0,0 +1,46 @@
+'use client';
+
+import { useState } from 'preact/hooks';
+
+import { client } from '@/utils/client';
+import { iPlus } from '@/comps/ui/icons';
+import { reasonText } from '@/utils/format';
+import { ErrorText } from '@/comps/ui/field';
+import { Icon } from '@/comps/ui/icon';
+
+/** One click per built-in app not yet installed here; the platform returns to this page. */
+export function ConnectApps({ apps }: { apps: Array<{ id: string; label: string }> }) {
+  const [error, setError] = useState('');
+  const [busy, setBusy] = useState('');
+  const connect = (app: string) => {
+    setBusy(app);
+    setError('');
+    void client.apps
+      .install(app, location.pathname)
+      .then(({ url }) => {
+        location.href = url;
+      })
+      .catch(reason => {
+        setBusy('');
+        setError(reasonText(reason));
+      });
+  };
+  return (
+    <div class="notice soft" role="status">
+      <Icon d={iPlus} />
+      <span class="grow">Add the built-in agent to your repositories and channels.</span>
+      {apps.map(app => (
+        <button
+          key={app.id}
+          type="button"
+          class="btn outline sm"
+          disabled={busy !== ''}
+          onClick={() => connect(app.id)}
+        >
+          {app.label}
+        </button>
+      ))}
+      <ErrorText value={error} />
+    </div>
+  );
+}

package/src/server/dash/app/dash/agents/(list)/loading.tsx

@@ -0,0 +1,14 @@
+import { HEADS } from '@/comps/frame/heads';
+import { Page } from '@/comps/frame/page-head';
+import { LoadingToolbar } from '@/comps/frame/loading-card';
+import { Loading } from '@/comps/ui/card';
+
+/** The agents page before its list arrives. */
+export default function AgentsLoading() {
+  return (
+    <Page>
+      <LoadingToolbar head={HEADS.agents} search="Search agents" more action="New agent" />
+      <Loading label="Loading agents" />
+    </Page>
+  );
+}

package/src/server/dash/app/dash/agents/(list)/page.css

@@ -0,0 +1,72 @@
+/* agents */
+.agent-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: 16px;
+}
+.agent-card {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  height: 100%;
+  padding: 18px;
+  border: 1px solid var(--line2);
+  background: var(--panel);
+}
+.agent-card::before {
+  content: "";
+  position: absolute;
+  left: -1px;
+  right: -1px;
+  top: -1px;
+  height: 2px;
+  background: var(--line2);
+  transition: background 0.15s;
+}
+.agent-card:hover {
+  background: var(--tile);
+}
+.agent-card:hover::before {
+  background: var(--deep);
+}
+.bc-head {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+.bc-head h3 {
+  font-size: 14px;
+  font-weight: 700;
+  overflow-wrap: anywhere;
+}
+.agent-card .pills a {
+  position: relative;
+  z-index: 1;
+}
+.mark {
+  display: grid;
+  place-items: center;
+  flex: none;
+  width: 36px;
+  height: 36px;
+  background: var(--blue);
+  color: #fff;
+  font-weight: 700;
+}
+.lead-clamp {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  flex: 1;
+  overflow: hidden;
+  color: var(--muted);
+}
+.pfs {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px 14px;
+  min-width: 0;
+  font-size: 12px;
+}

package/src/server/dash/app/dash/agents/(list)/page.tsx

@@ -0,0 +1,89 @@
+import './page.css';
+import { dynamic } from '@wular/pnext/dynamic';
+
+import { load } from '@/api/load';
+import type { IntegrationInfo } from '@coder/client/types';
+import { Page } from '@/comps/frame/page-head';
+import { NeedsCredential } from '@/app/dash/tasks/composer';
+import { Settle } from '@/comps/frame/stream';
+import { localServer } from '@/api/types';
+import { HEADS } from '@/comps/frame/heads';
+
+/** Agent cards per page: whole rows of two or three. */
+const AGENT_PAGE = 18;
+
+// Rows arrive rendered; paging and search hydrate once the list is in view.
+const AgentsGrid = dynamic(() => import('./agents-grid').then(m => m.AgentsGrid), {
+  load: 'visible',
+  ssr: true,
+});
+const ConnectApps = dynamic(() => import('./connect-apps').then(m => m.ConnectApps));
+
+/** Built-in apps this workspace has not installed, labelled in each platform's words. */
+function connectable(
+  apps: Array<{ id: string; integration: string }>,
+  integrations: IntegrationInfo[],
+) {
+  return apps.map(value => ({
+    id: value.id,
+    label:
+      integrations.find(entry => entry.id === value.integration)?.installLabel ??
+      `Connect ${value.integration}`,
+  }));
+}
+
+export default function AgentsPage({ request }: { request?: Request }) {
+  if (!request) return null;
+  const url = new URL(request.url);
+  const filters = {
+    q: url.searchParams.get('q') ?? '',
+    platform: url.searchParams.get('platform') ?? '',
+    type: url.searchParams.get('type') ?? '',
+  };
+
+  const agents = load(request).agents.list({
+    cursor: '',
+    limit: AGENT_PAGE,
+    connect: true,
+    ...filters,
+  });
+  const credentials = load(request).credentials.list({ cursor: '', limit: 1 });
+  const me = load(request).me();
+  const catalog = load(request).integrations.list();
+
+  return (
+    <Page>
+      <Settle
+        load={() =>
+          Promise.all([
+            agents,
+            Promise.all([credentials, me]).then(
+              ([page, who]) => (localServer(who) ? undefined : page.items.length),
+              () => undefined,
+            ),
+            catalog.catch(() => []),
+          ]).then(([first, count, integrations]) => {
+            const connect = connectable(first.connectable ?? [], integrations);
+            return (
+              <AgentsGrid
+                limit={AGENT_PAGE}
+                first={first}
+                filters={filters}
+                catalog={integrations}
+                head={HEADS.agents}
+              >
+                {connect.length ? <ConnectApps apps={connect} /> : null}
+                {count === 0 ? (
+                  <NeedsCredential
+                    reason="Agents need a model credential to run."
+                    back="/dash/agents"
+                  />
+                ) : null}
+              </AgentsGrid>
+            );
+          })
+        }
+      />
+    </Page>
+  );
+}

package/src/server/dash/app/dash/agents/[slug]/(tabs)/layout.tsx

@@ -0,0 +1,135 @@
+import type { ComponentChildren } from 'preact';
+import { dynamic } from '@wular/pnext/dynamic';
+
+import { iGit, iPencil } from '@/comps/ui/icons';
+import { Link } from '@wular/pnext/link';
+import { load } from '@/api/load';
+import type { AgentRow, TasksPage } from '@coder/client/types';
+import { Back, Page } from '@/comps/frame/page-head';
+import { Icon } from '@/comps/ui/icon';
+import { Stream } from '@/comps/frame/stream';
+import { LoadingTabs, Tabs } from '@/comps/ui/tabs';
+import { editableAgent } from '@/api/types';
+import { backFrom } from '@/comps/frame/heads';
+import { LoadingHero, Hero } from '@/app/dash/agents/agent/hero';
+import { loadAgent } from '@/api/load';
+import { loadTasks } from '@/app/dash/tasks/list/tasks-section';
+
+const NewTaskButton = dynamic(() => import('@/app/dash/tasks/composer').then(m => m.NewTaskButton));
+
+function Actions({ agent }: { agent: AgentRow }) {
+  return (
+    <>
+      {editableAgent(agent) ? (
+        <Link class="btn outline" href="/dash/agents/[slug]/edit" params={{ slug: agent.id }}>
+          <Icon d={iPencil} />
+          Edit
+        </Link>
+      ) : agent.source === 'repo' && agent.sourceUrl ? (
+        <a class="btn outline" href={agent.sourceUrl} target="_blank" rel="noreferrer">
+          <Icon d={iGit} />
+          Open in repository
+        </a>
+      ) : null}
+      <NewTaskButton agent={agent.id} />
+    </>
+  );
+}
+
+/** The agent's newest task and its task counts. */
+const lastTask = (request: Request, slug: string) =>
+  load(request).tasks.list({ cursor: '', limit: 1, summary: true, counts: true, agent: slug });
+
+const TABS = [
+  ['/dash/agents/[slug]', 'Overview'],
+  ['/dash/agents/[slug]/usage', 'Usage'],
+  ['/dash/agents/[slug]/platforms', 'Platforms'],
+  ['/dash/agents/[slug]/tasks', 'Tasks'],
+  ['/dash/agents/[slug]/settings', 'Settings'],
+] as const;
+
+/** The agent's header and tabs while its record loads. */
+function LoadingAgentHead({ back }: { back: ComponentChildren }) {
+  return (
+    <>
+      <LoadingHero
+        back={back}
+        actions={
+          <button type="button" class="btn" disabled>
+            New task
+          </button>
+        }
+      />
+      <LoadingTabs labels={TABS.map(([, label]) => label)} />
+    </>
+  );
+}
+
+function AgentHead({
+  agent,
+  tasks,
+  from,
+  back,
+}: {
+  agent: AgentRow;
+  tasks?: TasksPage;
+  from: string | null;
+  back: ComponentChildren;
+}) {
+  const counts: Partial<Record<(typeof TABS)[number][0], number>> = {
+    '/dash/agents/[slug]/platforms': Object.keys(agent.definition?.integrations ?? {}).length,
+    '/dash/agents/[slug]/tasks': tasks?.counts?.all,
+  };
+
+  return (
+    <>
+      <Hero agent={agent} back={back} actions={<Actions agent={agent} />} />
+      <Tabs
+        label="Agent"
+        items={TABS.map(([href, label]) => ({
+          href,
+          params: { slug: agent.id },
+          search: from ? { from } : undefined,
+          label,
+          count: counts[href],
+        }))}
+      />
+    </>
+  );
+}
+
+/** The agent's header and tabs around the open tab; a tab switch keeps them and swaps only the tab. */
+export default function AgentTabsLayout({
+  request,
+  children,
+}: {
+  request?: Request;
+  children: ComponentChildren;
+}) {
+  if (!request) return null;
+  const url = new URL(request.url);
+  // Read from the address, not the params promise, so the layout renders with the loading frame.
+  const slug = decodeURIComponent(url.pathname.split('/')[3]!);
+  const from = url.searchParams.get('from');
+  const back = <Back {...backFrom(from, { href: '/dash/agents', params: {}, label: 'Agents' })} />;
+
+  return (
+    <Page>
+      <Stream
+        fallback={<LoadingAgentHead back={back} />}
+        load={() =>
+          Promise.all([
+            loadAgent(request, slug),
+            (url.pathname.endsWith('/tasks')
+              ? loadTasks(request, slug).first
+              : lastTask(request, slug)
+            ).catch(() => undefined),
+          ]).then(([agent, tasks]) => (
+            <AgentHead agent={agent} tasks={tasks} from={from} back={back} />
+          ))
+        }
+      />
+      <div class="tab-body">{children}</div>
+    </Page>
+  );
+}

package/src/server/dash/app/dash/agents/[slug]/(tabs)/loading.tsx

@@ -0,0 +1,5 @@
+import { Loading } from '@/comps/ui/card';
+
+export default function AgentOverviewLoading() {
+  return <Loading label="Loading agent" />;
+}

package/src/server/dash/app/dash/agents/[slug]/(tabs)/page.css

@@ -0,0 +1,21 @@
+.facts {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+  gap: 12px 20px;
+  margin: 0;
+}
+.facts dt {
+  font-size: 10px;
+  color: var(--muted);
+}
+.facts dd {
+  margin: 4px 0 0;
+  overflow-wrap: anywhere;
+}
+.versions li {
+  display: flex;
+  align-items: first baseline;
+  gap: 14px;
+  padding: 12px 16px;
+  border-top: 1px solid var(--line);
+}