@wular/coder 0.4.2 → 0.4.4

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

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

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

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

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

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