@tangle-network/starter-foundry 0.7.2 → 0.13.0

package/registry/families/agent-marketplace-ui-ts/files/src/app/page.tsx

@@ -0,0 +1,39 @@
+// Catalog landing page. Server component reads CATALOG_REGISTRY_PATH and
+// passes the full bundle list down to a client island that owns search +
+// filter state. Server-side load keeps the initial render free of `'use
+// client'` overhead and lets crawlers index the catalog.
+
+import { loadCatalog, resolveRegistryPath } from '../lib/catalog'
+import { CatalogClient } from './page-client'
+
+export default async function CatalogPage() {
+  let bundles
+  let error: string | undefined
+  try {
+    bundles = await loadCatalog(resolveRegistryPath())
+  } catch (err) {
+    bundles = []
+    error = err instanceof Error ? err.message : String(err)
+  }
+
+  return (
+    <div>
+      <div style={{ marginBottom: 16 }}>
+        <h2 className='mp-h1' style={{ fontSize: '1.25rem', marginBottom: 4 }}>
+          {bundles.length} agent bundles
+        </h2>
+        <p className='mp-muted'>
+          Browse single-agent and multi-agent bundles. Click a card to preview
+          AGENTS.md and walk through deploy.
+        </p>
+      </div>
+      {error && (
+        <div className='mp-card' role='alert' style={{ borderColor: 'hsl(0 84% 60%)', marginBottom: 16 }}>
+          <strong>Catalog load failed.</strong>
+          <p className='mp-muted' style={{ fontSize: '0.8125rem' }}>{error}</p>
+        </div>
+      )}
+      <CatalogClient bundles={bundles} />
+    </div>
+  )
+}

package/registry/families/agent-marketplace-ui-ts/files/src/components/AgentsMdPreview.tsx

@@ -0,0 +1,132 @@
+// AgentsMdPreview — renders a bundle's AGENTS.md content with the same
+// block parser the runtime UI uses. AGENTS.md often contains :::artifact /
+// :::suggestion fences (the agent-output:blocks layer's grammar) that the
+// blocks-renderer adapter knows how to render.
+//
+// Single-agent bundles: shows AGENTS.md body + parsed-block summary chips.
+// Multi-agent bundles:   shows orchestrator AGENTS.md + a list of role names
+// pulled from agents.json so users can see the team composition before
+// deploying.
+
+import { blocksToArtifacts } from '../lib/blocks-to-artifacts'
+import { parseBlocks } from '../lib/parse-blocks'
+import type { Bundle } from '../lib/catalog'
+
+interface Props {
+  bundle: Bundle
+}
+
+interface AgentsJsonShape {
+  agents?: Array<{ name?: string; role?: string; description?: string }>
+}
+
+function isAgentsJsonShape(x: unknown): x is AgentsJsonShape {
+  return typeof x === 'object' && x !== null
+}
+
+function extractFrontmatter(body: string): { fm: Record<string, string>; rest: string } {
+  if (!body.startsWith('---\n')) return { fm: {}, rest: body }
+  const close = body.indexOf('\n---\n', 4)
+  if (close === -1) return { fm: {}, rest: body }
+  const fmRaw = body.slice(4, close)
+  const rest = body.slice(close + 5)
+  const fm: Record<string, string> = {}
+  for (const line of fmRaw.split('\n')) {
+    const idx = line.indexOf(':')
+    if (idx < 1) continue
+    const key = line.slice(0, idx).trim()
+    const value = line.slice(idx + 1).trim().replace(/^["']|["']$/g, '')
+    fm[key] = value
+  }
+  return { fm, rest }
+}
+
+export function AgentsMdPreview({ bundle }: Props) {
+  if (!bundle.agentsMdBody) {
+    return (
+      <section aria-labelledby='agents-md-heading'>
+        <h2 id='agents-md-heading' className='mp-h2'>
+          AGENTS.md preview
+        </h2>
+        <p className='mp-muted'>
+          This bundle does not declare an AGENTS.md, or the file could not be
+          read from the registry.
+        </p>
+      </section>
+    )
+  }
+
+  const { fm, rest } = extractFrontmatter(bundle.agentsMdBody)
+  const blocks = parseBlocks(rest)
+  const artifacts = blocksToArtifacts(blocks)
+
+  let agentsJsonRoles: string[] = []
+  if (bundle.isMultiAgent && isAgentsJsonShape(bundle.agentsJson)) {
+    const ag = bundle.agentsJson.agents
+    if (Array.isArray(ag)) {
+      agentsJsonRoles = ag
+        .map((a) => a.name ?? a.role ?? '')
+        .filter((s): s is string => Boolean(s))
+    }
+  }
+
+  return (
+    <section aria-labelledby='agents-md-heading'>
+      <h2 id='agents-md-heading' className='mp-h2'>
+        AGENTS.md preview
+      </h2>
+
+      {Object.keys(fm).length > 0 && (
+        <div className='mp-card' style={{ marginBottom: 16 }}>
+          <strong style={{ fontSize: '0.875rem' }}>Frontmatter</strong>
+          <dl style={{ display: 'grid', gridTemplateColumns: 'auto 1fr', gap: '4px 12px', fontSize: '0.875rem' }}>
+            {Object.entries(fm).map(([k, v]) => (
+              <DefRow key={k} k={k} v={v} />
+            ))}
+          </dl>
+        </div>
+      )}
+
+      {agentsJsonRoles.length > 0 && (
+        <div className='mp-card' style={{ marginBottom: 16 }}>
+          <strong style={{ fontSize: '0.875rem' }}>Team roles</strong>
+          <div style={{ marginTop: 8 }}>
+            {agentsJsonRoles.map((r) => (
+              <span key={r} className='mp-tag'>
+                {r}
+              </span>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {artifacts.length > 0 && (
+        <div className='mp-card' style={{ marginBottom: 16 }}>
+          <strong style={{ fontSize: '0.875rem' }}>
+            Output blocks declared ({artifacts.length})
+          </strong>
+          <ul style={{ marginTop: 8, paddingLeft: 16, fontSize: '0.875rem' }}>
+            {artifacts.map((a) => (
+              <li key={a.id}>
+                <code>{a.kind}</code> — {a.title ?? a.id}
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+
+      <div className='mp-codeblock' style={{ maxHeight: 480, overflow: 'auto' }}>
+        <pre>{rest}</pre>
+      </div>
+    </section>
+  )
+}
+
+function DefRow({ k, v }: { k: string; v: string }) {
+  return (
+    <>
+      <dt style={{ color: 'hsl(var(--muted-foreground))' }}>{k}</dt>
+      <dd>{v}</dd>
+    </>
+  )
+}

package/registry/families/agent-marketplace-ui-ts/files/src/components/BundleCard.tsx

@@ -0,0 +1,34 @@
+import Link from 'next/link'
+import type { Bundle } from '../lib/catalog'
+
+interface Props {
+  bundle: Bundle
+}
+
+export function BundleCard({ bundle }: Props) {
+  const visibleTags = bundle.tags.slice(0, 4)
+  return (
+    <Link href={`/bundles/${bundle.id}`} aria-label={`View ${bundle.id} details`}>
+      <article className='mp-card'>
+        <header style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 8 }}>
+          <h3 className='mp-card-title'>{bundle.id}</h3>
+          <span className={`mp-badge ${bundle.isMultiAgent ? 'mp-badge-multi' : 'mp-badge-single'}`}>
+            {bundle.isMultiAgent ? 'multi-agent' : 'single-agent'}
+          </span>
+        </header>
+        <p className='mp-card-desc'>{bundle.description}</p>
+        <div>
+          {visibleTags.map((t) => (
+            <span key={t} className='mp-tag'>
+              {t}
+            </span>
+          ))}
+        </div>
+        <footer className='mp-muted' style={{ marginTop: 'auto', display: 'flex', justifyContent: 'space-between', fontSize: '0.75rem' }}>
+          <span>{bundle.taxonomy.runtime}</span>
+          <span>{bundle.taxonomy.surface}</span>
+        </footer>
+      </article>
+    </Link>
+  )
+}

package/registry/families/agent-marketplace-ui-ts/files/src/components/BundleGrid.tsx

@@ -0,0 +1,23 @@
+import type { Bundle } from '../lib/catalog'
+import { BundleCard } from './BundleCard'
+
+interface Props {
+  bundles: Bundle[]
+}
+
+export function BundleGrid({ bundles }: Props) {
+  if (bundles.length === 0) {
+    return (
+      <div className='mp-muted' style={{ padding: '48px 0', textAlign: 'center' }}>
+        No bundles match the current filter.
+      </div>
+    )
+  }
+  return (
+    <section aria-label='Bundle catalog' className='mp-grid'>
+      {bundles.map((b) => (
+        <BundleCard key={b.id} bundle={b} />
+      ))}
+    </section>
+  )
+}

package/registry/families/agent-marketplace-ui-ts/files/src/components/DeployFlow.tsx

@@ -0,0 +1,263 @@
+'use client'
+
+// DeployFlow — guided modal for the `pnpm exec tsx scripts/deploy-agent-bundle.ts`
+// flow. Flag set must match the script's parseArgs() exactly. As of writing:
+//
+//   --bundle <path>          (required)
+//   --name <sandbox-name>    (required)
+//   --api-key-env <var>      (default TANGLE_SANDBOX_API_KEY)
+//   --base-url <url>         (or TANGLE_SANDBOX_BASE_URL env)
+//   --task <prompt>          (optional; runs after deploy)
+//   --image <image>          (default node:20)
+//   --dry-run                (build profile, don't call SDK)
+//
+// We render copy-paste commands by default. If DEPLOY_API_URL is wired into
+// the host app, swap the final step for a POST with these same fields.
+
+import { useState } from 'react'
+import type { Bundle } from '../lib/catalog'
+
+interface Props {
+  bundle: Bundle
+  /**
+   * Path the user should pass to `--bundle`. Defaults to the conventional
+   * `registry/families/<id>` path; override in self-hosted layouts.
+   */
+  bundlePathHint?: string
+}
+
+interface DeployForm {
+  sandboxName: string
+  task: string
+  apiKeyEnv: string
+  baseUrl: string
+  image: string
+  dryRun: boolean
+}
+
+const INITIAL_FORM: DeployForm = {
+  sandboxName: '',
+  task: '',
+  apiKeyEnv: 'TANGLE_SANDBOX_API_KEY',
+  baseUrl: 'https://api.tangle.tools',
+  image: 'node:20',
+  dryRun: false,
+}
+
+function buildCommand(bundle: Bundle, bundlePath: string, f: DeployForm): string {
+  const parts = [
+    'pnpm exec tsx scripts/deploy-agent-bundle.ts',
+    `  --bundle ${bundlePath}`,
+    `  --name ${f.sandboxName || '<sandbox-name>'}`,
+    `  --api-key-env ${f.apiKeyEnv}`,
+    `  --base-url ${f.baseUrl}`,
+  ]
+  if (f.task.trim()) {
+    parts.push(`  --task ${quote(f.task.trim())}`)
+  }
+  if (f.image && f.image !== 'node:20') {
+    parts.push(`  --image ${f.image}`)
+  }
+  if (f.dryRun) parts.push('  --dry-run')
+  void bundle // bundle id already encoded in the path; reserved for future per-shape branches.
+  return parts.join(' \\\n')
+}
+
+function quote(s: string): string {
+  if (!/[\s"'$`\\]/.test(s)) return s
+  const escaped = s.replace(/'/g, `'\\''`)
+  return `'${escaped}'`
+}
+
+function CopyButton({ text }: { text: string }) {
+  const [copied, setCopied] = useState(false)
+  return (
+    <button
+      type='button'
+      onClick={() => {
+        void navigator.clipboard.writeText(text).then(() => {
+          setCopied(true)
+          setTimeout(() => setCopied(false), 1500)
+        })
+      }}
+      className='mp-button mp-button-secondary'
+      style={{ position: 'absolute', top: 8, right: 8, padding: '4px 10px', fontSize: '0.75rem' }}
+      aria-label='Copy command to clipboard'
+    >
+      {copied ? 'Copied' : 'Copy'}
+    </button>
+  )
+}
+
+interface CodeBlockProps {
+  text: string
+}
+
+function CodeBlock({ text }: CodeBlockProps) {
+  return (
+    <div className='mp-codeblock'>
+      <CopyButton text={text} />
+      <pre>{text}</pre>
+    </div>
+  )
+}
+
+export function DeployFlow({ bundle, bundlePathHint }: Props) {
+  const [form, setForm] = useState<DeployForm>(INITIAL_FORM)
+  const bundlePath = bundlePathHint ?? `registry/families/${bundle.id}`
+  const mintCmd = `tangle-admin create-key --product sandbox --label ${bundle.id}-deploy`
+  const deployCmd = buildCommand(bundle, bundlePath, form)
+  const exportCmd = `export ${form.apiKeyEnv}=sk-tan-...   # paste the minted key`
+
+  return (
+    <div>
+      <h2 className='mp-h2'>Deploy {bundle.id}</h2>
+      <p className='mp-muted' style={{ marginBottom: 24 }}>
+        This bundle deploys via <code>scripts/deploy-agent-bundle.ts</code>. The
+        script reads <code>agent.json</code> + AGENTS.md from the bundle, builds
+        the SDK <code>AgentProfile</code>, creates a Tangle sandbox, and writes
+        workspace files at the configured root (default <code>/home/agent</code>).
+      </p>
+
+      <section className='mp-step'>
+        <h3 className='mp-h2' style={{ fontSize: '1rem' }}>
+          <span className='mp-step-num'>1</span>
+          Mint a sandbox-scoped Tangle key
+        </h3>
+        <p className='mp-muted'>
+          Run this on a machine that has the Tangle admin CLI authenticated.
+          The key is product-scoped to <code>sandbox</code> so it can only
+          create + manage sandboxes — no router or billing surface.
+        </p>
+        <CodeBlock text={mintCmd} />
+        <p className='mp-muted' style={{ fontSize: '0.75rem' }}>
+          Output: <code>sk-tan-...</code> on stdout. Save it to a password
+          manager or pass it to the next step inline.
+        </p>
+      </section>
+
+      <section className='mp-step'>
+        <h3 className='mp-h2' style={{ fontSize: '1rem' }}>
+          <span className='mp-step-num'>2</span>
+          Configure deploy parameters
+        </h3>
+        <div style={{ display: 'grid', gap: 12, gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))' }}>
+          <Field label='Sandbox name (required)' hint='Becomes box.id; must be unique to your account.'>
+            <input
+              type='text'
+              className='mp-input'
+              placeholder='research-assistant-demo'
+              value={form.sandboxName}
+              onChange={(e) => setForm({ ...form, sandboxName: e.target.value })}
+            />
+          </Field>
+          <Field label='Initial task (optional)' hint='If set, runs once after the sandbox starts.'>
+            <input
+              type='text'
+              className='mp-input'
+              placeholder='Run the literature survey'
+              value={form.task}
+              onChange={(e) => setForm({ ...form, task: e.target.value })}
+            />
+          </Field>
+          <Field label='API key env var' hint='Env var the script reads for the bearer key.'>
+            <input
+              type='text'
+              className='mp-input'
+              value={form.apiKeyEnv}
+              onChange={(e) => setForm({ ...form, apiKeyEnv: e.target.value })}
+            />
+          </Field>
+          <Field label='Sandbox API base URL' hint='Override for self-hosted Tangle deployments.'>
+            <input
+              type='text'
+              className='mp-input'
+              value={form.baseUrl}
+              onChange={(e) => setForm({ ...form, baseUrl: e.target.value })}
+            />
+          </Field>
+          <Field label='Container image' hint='Default node:20.'>
+            <input
+              type='text'
+              className='mp-input'
+              value={form.image}
+              onChange={(e) => setForm({ ...form, image: e.target.value })}
+            />
+          </Field>
+          <Field label='Mode' hint='Dry run prints the AgentProfile without calling the SDK.'>
+            <label style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: '0.875rem' }}>
+              <input
+                type='checkbox'
+                checked={form.dryRun}
+                onChange={(e) => setForm({ ...form, dryRun: e.target.checked })}
+              />
+              --dry-run (preview only)
+            </label>
+          </Field>
+        </div>
+      </section>
+
+      <section className='mp-step'>
+        <h3 className='mp-h2' style={{ fontSize: '1rem' }}>
+          <span className='mp-step-num'>3</span>
+          Run the deploy command
+        </h3>
+        <p className='mp-muted'>
+          From a starter-foundry checkout (<code>git clone</code> the repo if
+          you don't have it), export the API key and run the script:
+        </p>
+        <CodeBlock text={exportCmd} />
+        <CodeBlock text={deployCmd} />
+      </section>
+
+      <section className='mp-step'>
+        <h3 className='mp-h2' style={{ fontSize: '1rem' }}>
+          <span className='mp-step-num'>4</span>
+          What you should see
+        </h3>
+        <p className='mp-muted'>
+          The script writes <code>[deploy-agent]</code>-prefixed lines as it
+          progresses: bundle load, profile build (system-prompt char count,
+          subagent count), sandbox create, file writes for AGENTS.md +
+          methodology + (multi-agent only) agents.json, and on success a
+          re-entry snippet.
+        </p>
+        <CodeBlock
+          text={`[deploy-agent] loading bundle: registry/families/${bundle.id}
+[deploy-agent] profile built: name=... workspace=/home/agent systemPrompt=... chars subagents=${bundle.isMultiAgent ? 'N' : '0'} workspace-files=...
+[deploy-agent] creating sandbox name=${form.sandboxName || '<name>'} image=${form.image}
+[deploy-agent] sandbox created: id=box-...
+[deploy-agent] wrote /home/agent/AGENTS.md (... bytes)
+${bundle.isMultiAgent ? '[deploy-agent] wrote /home/agent/agents.json (... bytes)\n' : ''}[deploy-agent] done. Re-enter this sandbox with:
+  const box = await client.get('box-...')
+  await box.task('your prompt here')`}
+        />
+        <p className='mp-muted' style={{ fontSize: '0.75rem' }}>
+          Once running, drive the agent with <code>box.task()</code> from the
+          sandbox SDK or via your own UI (see <code>agent-with-ui-ts</code> /
+          <code> orchestrator-with-ui-ts</code>).
+        </p>
+      </section>
+    </div>
+  )
+}
+
+function Field({
+  label,
+  hint,
+  children,
+}: {
+  label: string
+  hint: string
+  children: React.ReactNode
+}) {
+  return (
+    <label style={{ display: 'flex', flexDirection: 'column', gap: 4, fontSize: '0.8125rem' }}>
+      <span style={{ fontWeight: 500 }}>{label}</span>
+      {children}
+      <span className='mp-muted' style={{ fontSize: '0.75rem' }}>
+        {hint}
+      </span>
+    </label>
+  )
+}

package/registry/families/agent-marketplace-ui-ts/files/src/components/SearchFilters.tsx

@@ -0,0 +1,61 @@
+'use client'
+
+import type { FilterState } from '../lib/search'
+
+interface Props {
+  filter: FilterState
+  surfaces: string[]
+  onChange: (next: FilterState) => void
+}
+
+export function SearchFilters({ filter, surfaces, onChange }: Props) {
+  const toggleSurface = (s: string) => {
+    const next = filter.surfaces.includes(s)
+      ? filter.surfaces.filter((x) => x !== s)
+      : [...filter.surfaces, s]
+    onChange({ ...filter, surfaces: next })
+  }
+  return (
+    <div className='mp-filters' role='search'>
+      <input
+        type='search'
+        placeholder='Search bundles by name, tag, or description'
+        value={filter.query}
+        onChange={(e) => onChange({ ...filter, query: e.target.value })}
+        className='mp-input'
+        style={{ flex: '1 1 280px', maxWidth: 480 }}
+        aria-label='Search bundles'
+      />
+      <select
+        value={filter.shape}
+        onChange={(e) =>
+          onChange({ ...filter, shape: e.target.value as FilterState['shape'] })
+        }
+        className='mp-input'
+        style={{ width: 'auto' }}
+        aria-label='Filter by agent shape'
+      >
+        <option value='all'>All shapes</option>
+        <option value='single-agent'>Single-agent</option>
+        <option value='multi-agent'>Multi-agent</option>
+      </select>
+      <div style={{ display: 'flex', gap: 4, flexWrap: 'wrap' }}>
+        {surfaces.map((s) => {
+          const active = filter.surfaces.includes(s)
+          return (
+            <button
+              key={s}
+              type='button'
+              onClick={() => toggleSurface(s)}
+              aria-pressed={active}
+              className={`mp-tag mp-button ${active ? '' : 'mp-button-secondary'}`}
+              style={{ padding: '4px 10px' }}
+            >
+              {s}
+            </button>
+          )
+        })}
+      </div>
+    </div>
+  )
+}