@wular/coder 0.3.17 → 0.4.0

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

@@ -0,0 +1,173 @@
+import './page.css';
+import { dynamic } from '@wular/pnext/dynamic';
+
+import { formatDay, zoneOf } from '@/utils/format';
+import { Link } from '@wular/pnext/link';
+import { load } from '@/api/load';
+import type { AgentRow, VersionRow, Paged } from '@coder/client/types';
+import { Card, Empty } from '@/comps/ui/card';
+import { Settle } from '@/comps/frame/stream';
+import { loadAgent } from '@/api/load';
+import { editableAgent } from '@/api/types';
+import { LIST_PAGE } from '@/utils/paged';
+import { ENGINE_NAMES, defaultLabel } from '@/app/dash/settings/model-options';
+import type { Defaults } from '@/app/dash/tasks/composer';
+
+const VersionsList = dynamic(() => import('./versions-list').then(m => m.VersionsList), {
+  load: 'visible',
+  ssr: true,
+});
+
+const Instructions = dynamic(() =>
+  import('@/app/dash/agents/agent/instructions').then(m => m.Instructions),
+);
+
+const KIND: Record<string, string> = {
+  builtin: 'Built-in agent',
+  upload: 'Dashboard agent',
+  repo: 'Repository agent',
+  home: 'Local agent',
+};
+
+/** Details, instructions and version history: the agent and its versions. */
+function OverviewBody({
+  agent,
+  history,
+  defaults,
+  tz,
+}: {
+  agent: AgentRow;
+  history: Paged<VersionRow>;
+  defaults: Defaults;
+  tz: string;
+}) {
+  const current = history.items.find(version => version.version === agent.currentVersion);
+  const definition = agent.definition;
+  const engine = agent.settings?.engine ?? definition?.engine;
+  const base = defaults.engines[engine ?? defaults.engine];
+
+  return (
+    <>
+      <Card title="Details">
+        <dl class="facts body">
+          <div>
+            <dt>Type</dt>
+            <dd>
+              {agent.local && agent.source === 'repo'
+                ? 'Repo agent'
+                : agent.local && agent.source === 'upload'
+                  ? 'Local agent'
+                  : (KIND[agent.source] ?? agent.source)}
+            </dd>
+          </div>
+          <div>
+            <dt>Engine</dt>
+            <dd>{engine ?? defaultLabel(ENGINE_NAMES[defaults.engine] ?? defaults.engine)}</dd>
+          </div>
+          <div>
+            <dt>Model</dt>
+            <dd>{agent.settings?.model ?? definition?.model ?? defaultLabel(base?.model)}</dd>
+          </div>
+          <div>
+            <dt>Effort</dt>
+            <dd>{agent.settings?.effort ?? definition?.effort ?? defaultLabel(base?.effort)}</dd>
+          </div>
+          <div>
+            <dt>Permissions</dt>
+            <dd>
+              {agent.settings?.permissions ?? definition?.permissions ?? defaultLabel('read-only')}
+            </dd>
+          </div>
+          {agent.local ? (
+            agent.commit && (
+              <div>
+                <dt>Commit</dt>
+                <dd>{agent.commit.slice(0, 7)}</dd>
+              </div>
+            )
+          ) : (
+            <div>
+              <dt>Version</dt>
+              <dd>
+                v{agent.currentVersion}
+                {current ? `, ${formatDay(current.createdAt, tz)}` : ''}
+              </dd>
+            </div>
+          )}
+        </dl>
+      </Card>
+      <Card
+        title="Instructions"
+        actions={
+          editableAgent(agent) ? (
+            <Link
+              class="btn ghost sm"
+              href="/dash/agents/[slug]/edit"
+              params={{ slug: agent.id }}
+              search={{ section: 'instructions' }}
+            >
+              Edit
+            </Link>
+          ) : agent.sourceUrl ? (
+            <a class="btn ghost sm" href={agent.sourceUrl} target="_blank" rel="noreferrer">
+              Open source
+            </a>
+          ) : undefined
+        }
+      >
+        {agent.systemPrompt?.trim() ? (
+          <Instructions text={agent.systemPrompt.trim()} />
+        ) : (
+          <Empty title="No instructions yet">
+            The agent starts every task from a blank prompt.
+          </Empty>
+        )}
+      </Card>
+      {agent.local ? null : (
+        <Card title="Version history" count={agent.currentVersion}>
+          <p class="body muted">
+            Each publish adds a version. New tasks run on the current one, and the list shows when
+            each went live.
+          </p>
+          <VersionsList agent={agent.id} current={agent.currentVersion} first={history} tz={tz} />
+        </Card>
+      )}
+    </>
+  );
+}
+
+export default async function AgentPage({
+  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 tz = zoneOf(request);
+  const agent = loadAgent(request, slug);
+  const versions = load(request).agents.versions(slug, { cursor: '', limit: LIST_PAGE });
+  const config = load(request)
+    .config.get()
+    .catch(() => undefined);
+
+  return (
+    <Settle
+      load={() =>
+        Promise.all([agent, versions, config]).then(([row, history, shown]) => (
+          <OverviewBody
+            agent={row}
+            history={history}
+            defaults={{
+              engine: shown?.effective.chain?.[0] ?? 'claude',
+              engines: shown?.effective.engines ?? {},
+            }}
+            tz={tz}
+          />
+        ))
+      }
+    />
+  );
+}

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

@@ -0,0 +1,18 @@
+import { LoadingCard } from '@/comps/frame/loading-card';
+
+export const Lead = () => (
+  <p class="tab-lead">
+    Each platform gets its own app named after the agent. Install an app wherever the agent should
+    work.
+  </p>
+);
+
+/** The platforms tab before its apps arrive. */
+export default function PlatformsLoading() {
+  return (
+    <>
+      <Lead />
+      <LoadingCard label="Loading platforms" />
+    </>
+  );
+}

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

@@ -0,0 +1,87 @@
+.tab-lead {
+  color: var(--muted);
+  max-width: 72ch;
+}
+.more-list .inst {
+  padding: 4px 6px;
+}
+.plat td:first-child b {
+  margin-right: 8px;
+}
+.plat .where {
+  min-width: 150px;
+}
+.inst {
+  display: block;
+}
+.inst + .inst {
+  margin-top: 8px;
+}
+.where .more {
+  display: inline-block;
+  margin-top: 8px;
+}
+.plat .acts {
+  width: 1%;
+  white-space: nowrap;
+}
+.plat .acts > .badge {
+  margin-right: 10px;
+}
+.plat .acts .btn {
+  min-width: 92px;
+  justify-content: center;
+}
+.plat .acts .menu {
+  display: inline-block;
+  margin-left: 4px;
+}
+.plat .acts .pop {
+  text-align: left;
+  white-space: normal;
+}
+
+@media (max-width: 1180px) {
+  .stacked.early thead {
+    display: none;
+  }
+  .stacked.early tr {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    gap: 8px 12px;
+    padding: 14px 16px;
+    border-bottom: 1px solid var(--line);
+  }
+  .stacked.early td {
+    padding: 0;
+    border: 0;
+    min-width: 0;
+  }
+  .stacked.early td:first-child {
+    grid-column: 1 / -1;
+  }
+  .plat.early td:first-child {
+    grid-row: 1;
+    grid-column: 1;
+  }
+  /* a long platform name wraps instead of running under the actions */
+  .plat.early td:first-child .pf {
+    white-space: normal;
+  }
+  .plat.early .acts {
+    grid-row: 1;
+    grid-column: 2;
+    width: auto;
+  }
+  .plat.early td:nth-child(2) {
+    grid-column: 1;
+  }
+  .plat.early td:nth-child(3) {
+    grid-column: 2;
+    justify-self: end;
+  }
+  .plat.early td:nth-child(4),
+  .plat.early .where {
+    grid-column: 1 / -1;
+  }
+}

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

@@ -0,0 +1,258 @@
+import './page.css';
+import { dynamic } from '@wular/pnext/dynamic';
+
+import { formatDay, zoneOf } from '@/utils/format';
+import { Link } from '@wular/pnext/link';
+import { encodeDefinition, load, unwrap } from '@/api/load';
+import type {
+  AppRow,
+  AgentRow,
+  InstallationRow,
+  IntegrationInfo,
+  Reach,
+} from '@coder/client/types';
+import { Card, Empty } from '@/comps/ui/card';
+import { Badge, Chips } from '@/comps/ui/badge';
+import { MoreList } from '@/comps/ui/menu';
+import { Settle } from '@/comps/frame/stream';
+import { loadAgent } from '@/api/load';
+import { needsTunnel } from '@/api/types';
+import { editableAgent } from '@/api/types';
+import { TunnelGuide } from '@/app/dash/settings/tunnel-guide';
+import { Platform } from '@/app/dash/agents/agent/agent-pills';
+import { Lead } from './loading';
+
+const PlatformActions = dynamic(() => import('./platform-actions').then(m => m.PlatformActions));
+
+const eventNames = (events: unknown): string[] =>
+  Array.isArray(events)
+    ? events.map(String)
+    : events && typeof events === 'object'
+      ? Object.keys(events)
+      : [];
+
+const REACH_BADGE: Record<Reach, { tone?: 'ok' | 'warn'; label: string }> = {
+  installed: { tone: 'ok', label: 'installed' },
+  created: { tone: 'warn', label: 'app created' },
+  none: { label: 'not set up' },
+};
+
+/** Organizations this workspace already works in on `integration`, where a new app could live. */
+const organizationsOn = (
+  integration: string,
+  catalog: IntegrationInfo[],
+  everywhere: InstallationRow[],
+) =>
+  catalog.find(entry => entry.id === integration)?.organizationApps
+    ? [
+        ...new Set(
+          everywhere
+            .filter(
+              entry =>
+                entry.integration === integration &&
+                entry.account.type &&
+                entry.account.type !== 'User',
+            )
+            .map(entry => entry.account.login),
+        ),
+      ].sort()
+    : [];
+
+/** One row per platform: what wakes it, its access, the app, where it is installed, and the next step. */
+function Platforms({
+  agent,
+  apps,
+  installations,
+  everywhere,
+  catalog,
+  tz,
+}: {
+  agent: AgentRow;
+  apps: AppRow[];
+  installations: InstallationRow[];
+  everywhere: InstallationRow[];
+  catalog: IntegrationInfo[];
+  tz: string;
+}) {
+  const declared = agent.definition?.integrations ?? {};
+  const ids = Object.keys(declared).sort();
+  if (!ids.length)
+    return (
+      <Empty title="This agent listens nowhere yet">
+        {editableAgent(agent) ? (
+          <Link
+            class="btn outline sm"
+            href="/dash/agents/[slug]/edit"
+            params={{ slug: agent.id }}
+            search={{ section: 'platforms' }}
+          >
+            Pick a platform
+          </Link>
+        ) : (
+          'Its definition declares no platform.'
+        )}
+      </Empty>
+    );
+
+  const def = agent.definition ? encodeDefinition(agent.definition) : '';
+  const createUrl = (integration: string) => {
+    const params = new URLSearchParams({ agent: agent.id, def });
+    if (agent.source === 'repo' && agent.repo) {
+      params.set('repo', agent.repo);
+      params.set('branch', apps.find(app => app.branch)?.branch ?? 'main');
+    }
+    return `/create/${encodeURIComponent(integration)}?${params}`;
+  };
+
+  return (
+    <Card>
+      <div class="table-scroll">
+        <table class="plat stacked early">
+          <thead>
+            <tr>
+              <th>Platform</th>
+              <th>Wakes on</th>
+              <th>Access</th>
+              <th>App</th>
+              <th>Installed on</th>
+              <th />
+            </tr>
+          </thead>
+          <tbody>
+            {ids.map(id => {
+              const own = apps.filter(app => app.integration === id);
+              const installs = installations.filter(entry => own.some(app => app.id === entry.app));
+              const state: Reach = !own.length ? 'none' : installs.length ? 'installed' : 'created';
+              const narrowed = agent.settings?.integrations?.[id];
+              const events = narrowed?.allowedEvents ?? eventNames(declared[id]?.triggers);
+              const tools = narrowed?.allowedTools ?? declared[id]?.tools;
+              const place = (entry: InstallationRow) => (
+                <span key={entry.id} class="inst">
+                  <b>{entry.account.login}</b>
+                  <span class="sub">
+                    {[
+                      entry.account.type?.toLowerCase(),
+                      [entry.settings?.configRepo, entry.settings?.engine, entry.settings?.effort]
+                        .filter(Boolean)
+                        .join(', '),
+                    ]
+                      .filter(Boolean)
+                      .join(' · ') || 'account'}
+                  </span>
+                </span>
+              );
+              return (
+                <tr key={id}>
+                  <td>
+                    <Platform id={id} info={catalog.find(entry => entry.id === id)} state={state} />
+                  </td>
+                  <td>
+                    <Chips values={events} />
+                  </td>
+                  <td class="muted">
+                    {typeof tools === 'string'
+                      ? tools
+                      : Array.isArray(tools)
+                        ? `${tools.length} tools`
+                        : 'observe'}
+                  </td>
+                  <td>
+                    {own.length ? (
+                      own.map(app => (
+                        <span key={app.id} class="inst">
+                          <b>{app.name}</b>
+                          <span class="sub">created {formatDay(app.createdAt, tz)}</span>
+                        </span>
+                      ))
+                    ) : (
+                      <span class="muted">No app yet</span>
+                    )}
+                  </td>
+                  <td class="where">
+                    {installs.length ? (
+                      <>
+                        {installs.slice(0, 2).map(place)}
+                        {installs.length > 2 ? (
+                          <MoreList label={`+${installs.length - 2} more`}>
+                            {installs.slice(2).map(place)}
+                          </MoreList>
+                        ) : null}
+                      </>
+                    ) : (
+                      <span class="muted">{own.length ? 'Not installed' : 'Not available'}</span>
+                    )}
+                  </td>
+                  <td class="acts">
+                    <Badge tone={REACH_BADGE[state].tone}>{REACH_BADGE[state].label}</Badge>
+                    <PlatformActions
+                      integration={id}
+                      apps={own.map(app => ({
+                        id: app.id,
+                        name: app.name,
+                      }))}
+                      installed={installs.length > 0}
+                      createUrl={createUrl(id)}
+                      owners={organizationsOn(id, catalog, everywhere)}
+                    />
+                  </td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
+    </Card>
+  );
+}
+
+export default async function AgentPlatformsPage({
+  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 tz = zoneOf(request);
+  const agent = loadAgent(request, slug);
+  const apps = load(request).apps.list(slug).then(unwrap);
+  const everywhere = load(request).installations.list().then(unwrap);
+  const catalog = load(request)
+    .integrations.list()
+    .catch(() => []);
+  const me = load(request)
+    .me()
+    .catch(() => undefined);
+  const port = new URL(request.url).port || '8787';
+  apps.catch(() => {});
+  everywhere.catch(() => {});
+
+  return (
+    <>
+      <Lead />
+      <Settle
+        load={() =>
+          Promise.all([agent, apps, everywhere, catalog, me]).then(
+            ([row, own, all, integrations, who]) => (
+              <>
+                <Platforms
+                  agent={row}
+                  apps={own}
+                  installations={all.filter(
+                    entry => !entry.deletedAt && own.some(app => app.id === entry.app),
+                  )}
+                  everywhere={all.filter(entry => !entry.deletedAt)}
+                  catalog={integrations}
+                  tz={tz}
+                />
+                {who && needsTunnel(who) ? <TunnelGuide port={port} /> : null}
+              </>
+            ),
+          )
+        }
+      />
+    </>
+  );
+}

package/src/server/dash/app/dash/agents/[slug]/(tabs)/platforms/platform-actions.tsx

@@ -0,0 +1,111 @@
+'use client';
+
+import { useState } from 'preact/hooks';
+
+import { client } from '@/utils/client';
+import { iDots, iPlus, iSpark } from '@/comps/ui/icons';
+import { reasonText } from '@/utils/format';
+import { ErrorText } from '@/comps/ui/field';
+import { Icon } from '@/comps/ui/icon';
+import { Menu, MenuItem } from '@/comps/ui/menu';
+
+/** The one next step for a platform, and the rarer ones in its row menu. */
+export function PlatformActions({
+  integration,
+  apps,
+  installed,
+  createUrl,
+  owners = [],
+}: {
+  integration: string;
+  apps: Array<{ id: string; name: string }>;
+  installed: boolean;
+  createUrl: string;
+  /** Organizations the app could live under instead of your own account. */
+  owners?: string[];
+}) {
+  const [error, setError] = useState('');
+  const [busy, setBusy] = useState(false);
+  const where = (owner = '') =>
+    owner ? `${createUrl}&owner=${encodeURIComponent(owner)}` : createUrl;
+  const install = (app: string) => {
+    setBusy(true);
+    setError('');
+    void client.apps
+      .install(app, location.pathname)
+      .then(({ url }) => {
+        location.href = url;
+      })
+      .catch(reason => {
+        setBusy(false);
+        setError(reasonText(reason));
+      });
+  };
+  // The organization the workspace already works in is preselected; the menu holds the other places.
+  if (!apps.length)
+    return (
+      <>
+        <a
+          class="btn sm"
+          href={where(owners[0])}
+          title={owners[0] ? `Creates the app in ${owners[0]}` : undefined}
+        >
+          Create app
+        </a>
+        {owners.length ? (
+          <Menu
+            summaryClass="icon-btn"
+            label={`Where the ${integration} app lives`}
+            wide
+            summary={<Icon d={iDots} />}
+          >
+            {[...owners.slice(1), ''].map(name => (
+              <MenuItem
+                key={name}
+                icon={iSpark}
+                href={where(name)}
+                title={name ? `Create in ${name}` : 'Create under your account'}
+                sub="The app is private to where it lives."
+              />
+            ))}
+          </Menu>
+        ) : null}
+      </>
+    );
+  return (
+    <>
+      {installed ? null : (
+        <button type="button" class="btn sm" disabled={busy} onClick={() => install(apps[0]!.id)}>
+          Install
+        </button>
+      )}
+      <Menu
+        summaryClass="icon-btn"
+        label={`More for ${integration}`}
+        wide
+        summary={<Icon d={iDots} />}
+      >
+        {apps.map(app => (
+          <MenuItem
+            key={app.id}
+            icon={iPlus}
+            title={
+              apps.length > 1
+                ? `Install ${app.name} on another account`
+                : 'Install on another account'
+            }
+            sub="Add this app to more repositories, another org, or another workspace."
+            onClick={() => install(app.id)}
+          />
+        ))}
+        <MenuItem
+          icon={iSpark}
+          href={where(owners[0])}
+          title={`Create another ${integration} app`}
+          sub="A separate app for an account this one cannot be installed on."
+        />
+      </Menu>
+      <ErrorText value={error} />
+    </>
+  );
+}