@wular/coder 0.3.17 → 0.4.0

package/src/server/dash/app/dash/agents/editor/import-picker.css

@@ -0,0 +1,48 @@
+.form-actions.end {
+  justify-content: flex-end;
+}
+.import {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  align-items: start;
+  gap: 20px;
+}
+.import-repos,
+.import-preview,
+.import-agents {
+  display: grid;
+  gap: 12px;
+}
+.import-preview {
+  min-height: 240px;
+  padding: 20px;
+  border: 1px solid var(--line2);
+  background: var(--panel);
+}
+.import-preview h3 {
+  font-size: 14px;
+  font-weight: 700;
+}
+.repo-list {
+  --max: 420px;
+  min-height: 240px;
+  border: 1px solid var(--line2);
+  background: var(--panel);
+}
+.repo-list .pop-item .ic {
+  color: var(--dim);
+}
+.repo-list .pop-item[aria-pressed="true"] {
+  background: var(--accbg);
+  box-shadow: inset 2px 0 0 var(--acc);
+}
+.picks-list {
+  display: grid;
+  gap: 12px;
+}
+.picks-list b {
+  font-weight: 500;
+}
+.picks-list .badge {
+  margin-left: 6px;
+}

package/src/server/dash/app/dash/agents/editor/import-picker.tsx

@@ -0,0 +1,253 @@
+'use client';
+
+import './import-picker.css';
+
+import { useEffect, useState } from 'preact/hooks';
+
+import { client } from '@/utils/client';
+import { iGit } from '@/comps/ui/icons';
+import { useRouter } from '@wular/pnext/navigation/client';
+import { held } from '@/utils/paged';
+import { Loading } from '@/comps/ui/card';
+import { reasonText } from '@/utils/format';
+import { ErrorText } from '@/comps/ui/field';
+import { Icon } from '@/comps/ui/icon';
+import { connectRepositories } from '@/app/dash/agents/editor/connect-repositories';
+import { Search } from '@/comps/ui/toolbar';
+import { TunnelGuide } from '@/app/dash/settings/tunnel-guide';
+
+type Found = {
+  id: string;
+  name: string;
+  description?: string;
+  version?: number;
+  commit?: string;
+  taken?: boolean;
+};
+type Preview = { repo: string; agents?: Found[]; error?: string };
+
+const REPO = /^[\w.-]+\/[\w.-]+$/;
+const short = (commit: string) => (/^[0-9a-f]{12,}$/i.test(commit) ? commit.slice(0, 7) : commit);
+
+/** The agents a repository holds, ticked, and one Import; a push to the repository updates them. */
+function Agents({ preview, onDone }: { preview: Preview; onDone: (ids: string[]) => void }) {
+  const [off, setOff] = useState<Set<string>>(new Set());
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState('');
+  useEffect(() => setOff(new Set()), [preview.repo]);
+  if (preview.error) return <ErrorText value={preview.error} />;
+  if (!preview.agents) return <Loading label={`Reading ${preview.repo}`} h={180} />;
+  if (!preview.agents.length)
+    return (
+      <p class="muted">
+        {preview.repo} has no agents yet. Add a folder per agent under <code>.coder/agents</code>,
+        with an <code>agent.json</code> and a <code>system.md</code>.
+      </p>
+    );
+  const ticked = preview.agents
+    .filter(agent => !agent.taken && !off.has(agent.id))
+    .map(agent => agent.id);
+  return (
+    <form
+      class="import-agents"
+      onSubmit={async event => {
+        event.preventDefault();
+        if (!ticked.length) return;
+        setBusy(true);
+        setError('');
+        try {
+          const { imported } = await client.agents.import(preview.repo, undefined, ticked);
+          onDone(imported);
+        } catch (reason) {
+          setBusy(false);
+          setError(reasonText(reason));
+        }
+      }}
+    >
+      <ul class="picks-list">
+        {preview.agents.map(agent => (
+          <li key={agent.id}>
+            <label class="check">
+              <input
+                type="checkbox"
+                checked={!agent.taken && !off.has(agent.id)}
+                disabled={agent.taken}
+                onChange={event => {
+                  const next = new Set(off);
+                  if (event.currentTarget.checked) next.delete(agent.id);
+                  else next.add(agent.id);
+                  setOff(next);
+                }}
+              />
+              <span>
+                <b>{agent.name}</b> <span class="id">{agent.id}</span>
+                {agent.version ? (
+                  <span class="badge">
+                    v{agent.version}
+                    {agent.commit ? ` · ${short(agent.commit)}` : ''}
+                  </span>
+                ) : null}
+                <small>
+                  {agent.taken
+                    ? 'An agent with this id already exists here.'
+                    : (agent.description ?? 'No description.')}
+                </small>
+              </span>
+            </label>
+          </li>
+        ))}
+      </ul>
+      <p class="muted">
+        Each push to {preview.repo} that changes an agent publishes its new version here.
+      </p>
+      <div class="form-actions end">
+        <ErrorText value={error} />
+        <button class="btn" disabled={busy || !ticked.length}>
+          Import {ticked.length === 1 ? '1 agent' : `${ticked.length} agents`}
+        </button>
+      </div>
+    </form>
+  );
+}
+
+/** Pick a repository the connected platform reaches, or type one, then its agents. */
+export function ImportPicker({
+  connected,
+  connectLabel,
+  tunnel,
+  port,
+}: {
+  connected: boolean;
+  connectLabel: string;
+  tunnel: boolean;
+  port: string;
+}) {
+  const nav = useRouter();
+  const [repos, setRepos] = useState<string[]>();
+  const [query, setQuery] = useState('');
+  const [preview, setPreview] = useState<Preview>();
+  const [error, setError] = useState('');
+
+  useEffect(() => {
+    if (!connected) return;
+    void client.repositories
+      .list()
+      .then(held(performance.now()))
+      .then(rows => setRepos(rows.map(row => row.repo)))
+      .catch(reason => {
+        setRepos([]);
+        setError(reasonText(reason));
+      });
+  }, []);
+
+  const open = (repo: string) => {
+    setPreview({ repo });
+    void client.agents
+      .preview(repo)
+      .then(held(performance.now()))
+      .then(({ agents }) => setPreview(now => (now?.repo === repo ? { repo, agents } : now)))
+      .catch(reason =>
+        setPreview(now => (now?.repo === repo ? { repo, error: reasonText(reason) } : now)),
+      );
+  };
+  const done = (ids: string[]) =>
+    ids.length === 1
+      ? nav.push('/dash/agents/[slug]', { params: { slug: ids[0]! } })
+      : nav.push('/dash/agents');
+
+  const needle = query.trim().toLowerCase();
+  const shown = (repos ?? []).filter(repo => repo.toLowerCase().includes(needle));
+  const typed = REPO.test(query.trim()) && !repos?.includes(query.trim()) ? query.trim() : '';
+  return (
+    <div class="import">
+      <div class="import-repos">
+        {connected ? (
+          <Search value={query} label="Search repositories or type owner/repo" onInput={setQuery} />
+        ) : (
+          <>
+            <div class="notice soft">
+              <Icon d={iGit} />
+              <span class="grow">Connect to list your repositories here.</span>
+              <button
+                type="button"
+                class="btn outline sm"
+                onClick={() =>
+                  void connectRepositories('/dash/agents/new?template=import').catch(reason =>
+                    setError(reasonText(reason)),
+                  )
+                }
+              >
+                {connectLabel}
+              </button>
+            </div>
+            <form
+              class="with-btn"
+              onSubmit={event => {
+                event.preventDefault();
+                if (REPO.test(query.trim())) open(query.trim());
+              }}
+            >
+              <input
+                class="mono"
+                aria-label="Repository"
+                placeholder="owner/repo"
+                autocomplete="off"
+                value={query}
+                onInput={event => setQuery(event.currentTarget.value)}
+              />
+              <button class="btn outline">Look up</button>
+            </form>
+          </>
+        )}
+        <ErrorText value={error} />
+        {connected ? (
+          <div class="repo-list scroll-box" role="list">
+            {!repos ? (
+              <Loading label="Loading repositories" h={240} />
+            ) : (
+              <>
+                {typed ? (
+                  <button
+                    type="button"
+                    class="pop-item"
+                    aria-pressed={preview?.repo === typed}
+                    onClick={() => open(typed)}
+                  >
+                    <Icon d={iGit} />
+                    <span class="grow">{typed}</span>
+                  </button>
+                ) : null}
+                {shown.map(repo => (
+                  <button
+                    key={repo}
+                    type="button"
+                    class="pop-item"
+                    aria-pressed={preview?.repo === repo}
+                    onClick={() => open(repo)}
+                  >
+                    <Icon d={iGit} />
+                    <span class="grow">{repo}</span>
+                  </button>
+                ))}
+                {!shown.length && !typed ? (
+                  <p class="pop-note">No repository matches. Type owner/repo to use another.</p>
+                ) : null}
+              </>
+            )}
+          </div>
+        ) : null}
+        {!connected && tunnel ? <TunnelGuide port={port} /> : null}
+      </div>
+      <div class="import-preview">
+        {preview ? (
+          <>
+            <h3>Agents in {preview.repo}</h3>
+            <Agents preview={preview} onDone={done} />
+          </>
+        ) : (
+          <p class="muted">Pick a repository to see the agents in its .coder/agents folder.</p>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/server/dash/app/dash/agents/editor/names.ts

@@ -0,0 +1,35 @@
+// Two friendly words, the way sign-up forms suggest handles.
+const WORDS = [
+  [
+    'Brisk',
+    'Calm',
+    'Clever',
+    'Keen',
+    'Nimble',
+    'Quiet',
+    'Steady',
+    'Swift',
+    'Tidy',
+    'Bright',
+    'Patient',
+    'Lucky',
+  ],
+  [
+    'Heron',
+    'Otter',
+    'Falcon',
+    'Lynx',
+    'Badger',
+    'Relay',
+    'Beacon',
+    'Compass',
+    'Lantern',
+    'Pilot',
+    'Sparrow',
+    'Harbor',
+  ],
+] as const;
+
+const pick = (list: readonly string[]) => list[Math.floor(Math.random() * list.length)]!;
+
+export const suggestName = () => `${pick(WORDS[0])} ${pick(WORDS[1])}`;

package/src/server/dash/app/dash/agents/new/loading.tsx

@@ -0,0 +1,25 @@
+import { HEADS } from '@/comps/frame/heads';
+import { LoadingCard } from '@/comps/frame/loading-card';
+import { Back, Page, PageHead } from '@/comps/frame/page-head';
+
+export default function NewAgentLoading() {
+  return (
+    <Page>
+      <PageHead
+        {...HEADS.newAgent}
+        back={<Back href="/dash/agents" params={{}} label="Agents" />}
+        actions={
+          <>
+            <button type="button" class="btn outline" disabled>
+              Import from repo
+            </button>
+            <button type="button" class="btn" disabled>
+              Create agent
+            </button>
+          </>
+        }
+      />
+      <LoadingCard label="Loading editor" h={640} />
+    </Page>
+  );
+}

package/src/server/dash/app/dash/agents/new/page.tsx

@@ -0,0 +1,72 @@
+import { dynamic } from '@wular/pnext/dynamic';
+
+import { load } from '@/api/load';
+import type { Me } from '@coder/client/types';
+import { Page } from '@/comps/frame/page-head';
+import { Settle } from '@/comps/frame/stream';
+import type { Template } from '@/app/dash/agents/editor/editor';
+import { needsTunnel } from '@/api/types';
+import { NO_MODELS, modelsByEngine } from '@/app/dash/settings/model-options';
+import { suggestName } from '@/app/dash/agents/editor/names';
+
+const AgentEditor = dynamic(() =>
+  import('@/app/dash/agents/editor/editor').then(m => m.AgentEditor),
+);
+
+/** A new agent from a template, or imported from a repository. */
+export default function NewAgentPage({ request }: { request?: Request }) {
+  if (!request) return null;
+  const url = new URL(request.url);
+  const catalog = load(request).integrations.list();
+  const models = load(request)
+    .models.list()
+    .catch(() => NO_MODELS);
+  const config = load(request)
+    .config.get()
+    .catch(() => undefined);
+  const installations = load(request).installations.list();
+  const me = load(request).me();
+  const asked = url.searchParams.get('template');
+
+  return (
+    <Page>
+      <Settle
+        load={() =>
+          Promise.all([
+            catalog,
+            models,
+            config,
+            installations.catch(() => []),
+            me.catch((): Me => ({})),
+          ]).then(([integrations, shape, shown, installed, who]) => {
+            const reach = integrations.filter(entry => entry.repositories);
+            const connected = installed.some(
+              ({ value }) =>
+                !value.deletedAt && reach.some(entry => entry.id === value.integration),
+            );
+            const template = ['import', 'reviewer', 'helper', 'blank'].includes(asked ?? '')
+              ? (asked as Template)
+              : 'blank';
+            return (
+              <AgentEditor
+                catalog={integrations}
+                suggested={suggestName()}
+                models={modelsByEngine(shape)}
+                defaults={{
+                  engine: shown?.effective.chain?.[0] ?? 'claude',
+                  engines: shown?.effective.engines ?? {},
+                  builtin: shape.builtin,
+                }}
+                template={template}
+                connected={connected}
+                connectLabel={reach[0]?.installLabel ?? 'Connect'}
+                tunnel={needsTunnel(who)}
+                port={url.port || '8787'}
+              />
+            );
+          })
+        }
+      />
+    </Page>
+  );
+}

package/src/server/dash/app/dash/layout.css

@@ -0,0 +1,265 @@
+/* app shell */
+.app {
+  --side: 232px;
+  display: grid;
+  grid-template-columns: var(--side) minmax(0, 1fr);
+  grid-template-rows: 56px 1fr;
+  min-height: 100vh;
+}
+.top {
+  grid-column: 1 / -1;
+  position: sticky;
+  top: 0;
+  z-index: 20;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 0 16px 0 20px;
+  background: var(--bg);
+  border-bottom: 1px solid var(--line2);
+}
+.top-l,
+.top-r {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+}
+.lockup {
+  display: grid;
+}
+.lockup small {
+  font-weight: 400;
+  font-size: 8px;
+  line-height: 8px;
+  letter-spacing: 0.3em;
+  text-transform: uppercase;
+  color: var(--muted);
+}
+.side {
+  position: sticky;
+  top: 56px;
+  z-index: 5;
+  height: calc(100vh - 56px);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: 16px 12px;
+  border-right: 1px solid var(--line);
+}
+.side nav {
+  display: grid;
+  gap: 2px;
+}
+.side nav a {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  height: 36px;
+  padding: 0 12px;
+  color: var(--muted);
+  border-left: 2px solid transparent;
+}
+.side nav a:hover {
+  color: var(--fg);
+  background: var(--wash);
+}
+.side nav a[aria-current] {
+  color: var(--fg);
+  background: var(--wash2);
+  border-left-color: var(--deep);
+}
+.side nav .n {
+  margin-left: auto;
+  background: var(--accbg);
+  color: var(--acc);
+}
+.dot {
+  width: 7px;
+  height: 7px;
+  flex: none;
+  border-radius: 50%;
+  background: var(--warn);
+}
+.dot.ok {
+  background: var(--ok);
+  box-shadow: 0 0 0 3px var(--okbg);
+}
+.server > button {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 12px;
+  border: 1px solid var(--line);
+  font-size: 12px;
+  text-align: left;
+  cursor: pointer;
+}
+.server > button:hover {
+  background: var(--wash);
+}
+.server > button .grow {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.server .ic {
+  color: var(--dim);
+  width: 14px;
+}
+.server .pop {
+  width: max-content;
+  max-width: calc(100vw - 32px);
+}
+.server .kv dd {
+  white-space: nowrap;
+}
+.pop-head {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 8px 10px 12px;
+  min-width: 0;
+}
+.pop-head b,
+.pop-head small {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.pop-head small,
+.pop-item small {
+  color: var(--muted);
+  font-size: 11.5px;
+}
+.org,
+.avatar {
+  display: inline-grid;
+  place-items: center;
+  flex: none;
+  width: 26px;
+  height: 26px;
+  background: var(--wash2);
+  font-weight: 700;
+  font-size: 12px;
+}
+.avatar {
+  width: 32px;
+  height: 32px;
+}
+.avatar-btn {
+  display: grid;
+  place-items: center;
+  width: 32px;
+  height: 32px;
+  background: var(--fg);
+  color: var(--bg);
+  font-weight: 700;
+  cursor: pointer;
+}
+.kv {
+  display: grid;
+  grid-template-columns: max-content 1fr;
+  gap: 8px 20px;
+  margin: 0;
+}
+.kv dt {
+  color: var(--muted);
+}
+.kv dd {
+  margin: 0;
+  overflow-wrap: anywhere;
+}
+.pop .kv {
+  padding: 6px 10px 10px;
+  font-size: 12px;
+}
+.theme .ic.sun,
+.theme .ic.moon,
+.theme .ic.sys {
+  display: none;
+}
+:root[data-theme="light"] .theme .ic.sun,
+:root[data-theme="dark"] .theme .ic.moon,
+:root:not([data-theme]) .theme .ic.sys {
+  display: block;
+}
+/* the admin token form covers the dashboard it opens */
+.app > .auth {
+  position: fixed;
+  inset: 0;
+  z-index: 60;
+  overflow: auto;
+  background: var(--bg);
+}
+
+@media (max-width: 760px) {
+  .app {
+    grid-template-columns: minmax(0, 1fr);
+  }
+  .top {
+    padding: 0 10px;
+  }
+  .side {
+    position: fixed;
+    top: 56px;
+    left: 0;
+    bottom: 0;
+    height: auto;
+    width: min(280px, 84vw);
+    z-index: 30;
+    background: var(--bg);
+    border-right: 1px solid var(--line2);
+    transform: translateX(-100%);
+    transition: transform 0.2s;
+  }
+}
+
+/* collapsed sidebar: icons only, the server pill becomes its dot */
+/* the collapser sits at the sidebar's foot, above the server pill */
+.side-foot {
+  display: grid;
+  gap: 8px;
+}
+.side-toggle {
+  justify-self: end;
+  color: var(--dim);
+}
+.side-min .side-toggle {
+  justify-self: center;
+}
+.app.side-min {
+  --side: 60px;
+}
+.side-min .top .lockup {
+  display: none;
+}
+.side-min .side {
+  padding-inline: 10px;
+}
+.side-min .side nav a {
+  justify-content: center;
+  gap: 0;
+  padding: 0;
+  font-size: 0;
+}
+.side-min .side nav .n {
+  display: none;
+}
+.side-min .server > button {
+  justify-content: center;
+  padding: 10px 0;
+}
+.side-min .server > button :is(.grow, .ic) {
+  display: none;
+}
+@media (max-width: 760px) {
+  .side-toggle {
+    display: none;
+  }
+  .app.side-min {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}