bazilion 0.0.0

package/apps/web/src/routes/agents/$id/triggers.tsx

@@ -0,0 +1,239 @@
+import { ApiClientError } from '@bazilion/client'
+import type { AgentTrigger, ResolvedAgent } from '@bazilion/api-types'
+import { createFileRoute, redirect, useRouter } from '@tanstack/react-router'
+import { createServerFn } from '@tanstack/react-start'
+import { useState } from 'react'
+import { AgentTabs } from '../../../components/AgentTabs'
+import { daemonClient } from '../../../lib/daemon-client'
+
+interface TriggersView {
+  resolved: ResolvedAgent
+  triggers: AgentTrigger[]
+}
+
+const fetchTriggers = createServerFn({ method: 'POST' })
+  .inputValidator((d: { id: string }) => d)
+  .handler(async ({ data }): Promise<TriggersView | null> => {
+    const c = daemonClient()
+    let resolved: ResolvedAgent
+    try {
+      resolved = await c.get<ResolvedAgent>(`/api/agents/${encodeURIComponent(data.id)}`)
+    } catch (err) {
+      if (err instanceof ApiClientError && err.status === 404) return null
+      throw err
+    }
+    const { triggers } = await c.get<{ triggers: AgentTrigger[] }>(
+      `/api/agents/${encodeURIComponent(resolved.agent.id)}/triggers`,
+    )
+    return { resolved, triggers }
+  })
+
+export const Route = createFileRoute('/agents/$id/triggers')({
+  loader: async ({ params }) => {
+    const data = await fetchTriggers({ data: { id: params.id } })
+    if (!data) throw redirect({ to: '/agents' })
+    return data
+  },
+  component: TriggersPage,
+})
+
+function TriggersPage() {
+  const { resolved, triggers } = Route.useLoaderData()
+  const router = useRouter()
+
+  async function toggle(t: AgentTrigger) {
+    await fetch(`/api/triggers/${t.id}`, {
+      method: 'PATCH',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({ enabled: !t.enabled }),
+    })
+    await router.invalidate()
+  }
+  async function del(id: string) {
+    if (!confirm('delete this trigger?')) return
+    await fetch(`/api/triggers/${id}`, { method: 'DELETE' })
+    await router.invalidate()
+  }
+
+  return (
+    <div>
+      <header className="mb-6">
+        <h1>{resolved.agent.name}</h1>
+      </header>
+      <AgentTabs
+        agentId={resolved.agent.id}
+        active="triggers"
+        archived={resolved.agent.status === 'archived'}
+      />
+
+      <AddTriggerForm agentId={resolved.agent.id} onAdded={() => router.invalidate()} />
+
+      <h3 className="mb-3 mt-6 font-body text-[0.85em] font-semibold uppercase tracking-wider text-mocha-light">
+        Active triggers
+      </h3>
+
+      {triggers.length === 0 ? (
+        <p className="muted">no triggers yet — add one above.</p>
+      ) : (
+        <table>
+          <thead>
+            <tr>
+              <th>id</th>
+              <th>kind</th>
+              <th>spec</th>
+              <th>message</th>
+              <th>last fired</th>
+              <th />
+            </tr>
+          </thead>
+          <tbody>
+            {triggers.map((t) => {
+              const spec = t.kind === 'interval' ? `every ${t.intervalSec}s` : t.cronExpr
+              const last = t.lastFiredAt ? new Date(t.lastFiredAt).toLocaleString() : '(never)'
+              return (
+                <tr key={t.id} className={t.enabled ? '' : 'opacity-60'}>
+                  <td>
+                    <code>{t.id.slice(0, 8)}…</code>
+                  </td>
+                  <td>
+                    <span className="inline-block rounded-sm border border-frost bg-ivory px-2 py-0.5 font-mono text-[0.8em] text-mocha">
+                      {t.kind}
+                    </span>
+                  </td>
+                  <td>
+                    <code>{spec}</code>
+                  </td>
+                  <td>
+                    {t.message.length > 60 ? `${t.message.slice(0, 60)}…` : t.message}
+                  </td>
+                  <td className="text-[0.82em] text-mocha-light">{last}</td>
+                  <td>
+                    <div className="flex gap-1.5">
+                      <button type="button" className="ghost-btn" onClick={() => toggle(t)}>
+                        {t.enabled ? 'disable' : 'enable'}
+                      </button>
+                      <button type="button" className="ghost-btn" onClick={() => del(t.id)}>
+                        delete
+                      </button>
+                    </div>
+                  </td>
+                </tr>
+              )
+            })}
+          </tbody>
+        </table>
+      )}
+    </div>
+  )
+}
+
+function AddTriggerForm({
+  agentId,
+  onAdded,
+}: {
+  agentId: string
+  onAdded: () => void
+}) {
+  const [kind, setKind] = useState<'interval' | 'cron'>('interval')
+  const [intervalSec, setIntervalSec] = useState(300)
+  const [cronExpr, setCronExpr] = useState('')
+  const [message, setMessage] = useState('')
+  const [err, setErr] = useState<string | null>(null)
+  const [submitting, setSubmitting] = useState(false)
+
+  async function submit(e: React.FormEvent<HTMLFormElement>) {
+    e.preventDefault()
+    setErr(null)
+    if (!message.trim()) {
+      setErr('message is required')
+      return
+    }
+    if (kind === 'interval' && (!Number.isFinite(intervalSec) || intervalSec <= 0)) {
+      setErr('interval must be a positive number')
+      return
+    }
+    if (kind === 'cron' && !cronExpr.trim()) {
+      setErr('cron expression is required')
+      return
+    }
+    setSubmitting(true)
+    try {
+      const body: Record<string, unknown> = { kind, message: message.trim() }
+      if (kind === 'interval') body.intervalSec = intervalSec
+      else body.cronExpr = cronExpr.trim()
+      const res = await fetch(`/api/agents/${encodeURIComponent(agentId)}/triggers`, {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify(body),
+      })
+      if (!res.ok) {
+        const e2 = (await res.json().catch(() => null)) as { error?: string } | null
+        throw new Error(e2?.error ?? res.statusText)
+      }
+      setMessage('')
+      setCronExpr('')
+      setIntervalSec(300)
+      onAdded()
+    } catch (e2) {
+      setErr((e2 as Error).message)
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  return (
+    <form className="card" onSubmit={submit}>
+      <h3>Add trigger</h3>
+      <div className="mb-3 flex gap-3">
+        <label className="m-0 inline-flex cursor-pointer items-center gap-1">
+          <input
+            type="radio"
+            checked={kind === 'interval'}
+            onChange={() => setKind('interval')}
+          />
+          interval (every N seconds)
+        </label>
+        <label className="m-0 inline-flex cursor-pointer items-center gap-1">
+          <input type="radio" checked={kind === 'cron'} onChange={() => setKind('cron')} />
+          cron (5-field)
+        </label>
+      </div>
+      {kind === 'interval' ? (
+        <label>
+          interval (seconds)
+          <input
+            type="number"
+            min={1}
+            value={intervalSec}
+            onChange={(e) => setIntervalSec(Number(e.target.value))}
+          />
+        </label>
+      ) : (
+        <label>
+          cron expression (minute hour dom month dow)
+          <input
+            type="text"
+            placeholder="*/15 * * * *"
+            value={cronExpr}
+            onChange={(e) => setCronExpr(e.target.value)}
+          />
+        </label>
+      )}
+      <label>
+        message
+        <textarea
+          placeholder="e.g. check your inbox and act on anything new"
+          value={message}
+          onChange={(e) => setMessage(e.target.value)}
+          className="font-mono text-[0.9em] min-h-[80px]"
+        />
+      </label>
+      <div className="mt-3 flex items-center gap-3">
+        <button type="submit" disabled={submitting}>
+          {submitting ? 'adding…' : 'add'}
+        </button>
+        {err && <span className="text-[0.85em] text-[#9B3D3D]">{err}</span>}
+      </div>
+    </form>
+  )
+}

package/apps/web/src/routes/agents/index.tsx

@@ -0,0 +1,265 @@
+import type { Agent, Group, Profile } from '@bazilion/api-types'
+import { createFileRoute, useRouter } from '@tanstack/react-router'
+import { createServerFn } from '@tanstack/react-start'
+import { useState } from 'react'
+import { daemonClient } from '../../lib/daemon-client'
+
+interface ModelGroup {
+  provider: string
+  models: string[]
+}
+interface AvailableModelsResponse {
+  groups: ModelGroup[]
+}
+
+interface AgentsView {
+  agents: Agent[]
+  profiles: Profile[]
+  groups: Group[]
+  modelGroups: ModelGroup[]
+}
+
+const fetchAgents = createServerFn({ method: 'POST' })
+  .inputValidator((d: { all: boolean }) => d)
+  .handler(async ({ data }): Promise<AgentsView> => {
+    const c = daemonClient()
+    const [agents, profiles, groups, models] = await Promise.all([
+      c.get<Agent[]>(`/api/agents?includeArchived=${data.all}`),
+      c.get<Profile[]>('/api/profiles'),
+      c.get<Group[]>('/api/groups'),
+      c.get<AvailableModelsResponse>('/api/config/available-models'),
+    ])
+    return { agents, profiles, groups, modelGroups: models.groups }
+  })
+
+export const Route = createFileRoute('/agents/')({
+  validateSearch: (s: Record<string, unknown>): { all?: '1' } => ({
+    all: s.all === '1' ? '1' : undefined,
+  }),
+  loaderDeps: ({ search }) => ({ all: search.all === '1' }),
+  loader: ({ deps }) => fetchAgents({ data: { all: deps.all } }),
+  component: AgentsPage,
+})
+
+function AgentsPage() {
+  const { agents, profiles, groups, modelGroups } = Route.useLoaderData()
+  const { all } = Route.useSearch()
+  const showAll = all === '1'
+  const router = useRouter()
+
+  async function archive(id: string) {
+    if (!confirm('archive this agent? (reversible)')) return
+    await fetch(`/api/agents/${id}/archive`, { method: 'POST' })
+    await router.invalidate()
+  }
+  async function unarchive(id: string) {
+    await fetch(`/api/agents/${id}/unarchive`, { method: 'POST' })
+    await router.invalidate()
+  }
+  async function del(id: string) {
+    if (!confirm('permanently delete this agent and all its data?')) return
+    await fetch(`/api/agents/${id}`, { method: 'DELETE' })
+    await router.invalidate()
+  }
+
+  return (
+    <div>
+      <h1>agents</h1>
+
+      <SpawnForm
+        profiles={profiles}
+        groups={groups}
+        modelGroups={modelGroups}
+        onSpawned={router.invalidate}
+      />
+
+      <p>
+        <a href={showAll ? '/agents' : '/agents?all=1'}>
+          {showAll ? 'hide archived' : 'show archived'}
+        </a>
+      </p>
+
+      <table>
+        <thead>
+          <tr>
+            <th>id</th>
+            <th>name</th>
+            <th>profile</th>
+            <th>status</th>
+            <th />
+          </tr>
+        </thead>
+        <tbody>
+          {agents.length === 0 && (
+            <tr>
+              <td colSpan={5} className="muted">
+                no agents yet
+              </td>
+            </tr>
+          )}
+          {agents.map((a) => (
+            <tr key={a.id}>
+              <td>
+                <a href={`/agents/${a.id}`} title={a.id}>
+                  <code>{a.id.slice(0, 8)}…</code>
+                </a>
+              </td>
+              <td>{a.name}</td>
+              <td>
+                <code>{a.profileId}</code>
+              </td>
+              <td>{a.status}</td>
+              <td>
+                <div className="flex gap-1.5">
+                  {a.status !== 'archived' ? (
+                    <button type="button" className="ghost-btn" onClick={() => archive(a.id)}>
+                      archive
+                    </button>
+                  ) : (
+                    <button type="button" className="ghost-btn" onClick={() => unarchive(a.id)}>
+                      unarchive
+                    </button>
+                  )}
+                  <button
+                    type="button"
+                    className="ghost-btn"
+                    style={{ color: 'var(--color-rose-baziu)' }}
+                    onClick={() => del(a.id)}
+                  >
+                    delete
+                  </button>
+                </div>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  )
+}
+
+function SpawnForm({
+  profiles,
+  groups,
+  modelGroups,
+  onSpawned,
+}: {
+  profiles: Profile[]
+  groups: Group[]
+  modelGroups: ModelGroup[]
+  onSpawned: () => void
+}) {
+  const [profileId, setProfileId] = useState('')
+  const [name, setName] = useState('')
+  const [model, setModel] = useState('')
+  // Default to the seeded 'default' group when present so the form matches the
+  // server-side fallback. Empty string means "let the daemon pick" — same end
+  // result as picking 'default' explicitly.
+  const [groupId, setGroupId] = useState(groups.find((g) => g.id === 'default')?.id ?? '')
+  const [submitting, setSubmitting] = useState(false)
+  const [err, setErr] = useState<string | null>(null)
+
+  async function submit(e: React.FormEvent<HTMLFormElement>) {
+    e.preventDefault()
+    if (!profileId) {
+      setErr('profile is required')
+      return
+    }
+    setSubmitting(true)
+    setErr(null)
+    try {
+      const body: Record<string, unknown> = { profile: profileId }
+      if (name) body.name = name
+      if (model) body.model = model
+      if (groupId) body.groupId = groupId
+      const res = await fetch('/api/agents', {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify(body),
+      })
+      if (!res.ok) {
+        const b = (await res.json().catch(() => null)) as { error?: string } | null
+        throw new Error(b?.error ?? res.statusText)
+      }
+      // Reset on success.
+      setName('')
+      setModel('')
+      onSpawned()
+    } catch (e2) {
+      setErr((e2 as Error).message)
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  return (
+    <form className="card" onSubmit={submit}>
+      <h3>spawn agent</h3>
+      {err && <div className="err">{err}</div>}
+      <p className="muted my-2 text-[0.85em]">
+        Skills come from the profile's defaults at spawn time. Tweak per-agent skills after the
+        fact from the agent detail page.
+      </p>
+      <div className="flex gap-4">
+        <label className="flex-1">
+          profile
+          <select value={profileId} onChange={(e) => setProfileId(e.target.value)} required>
+            <option value="">--</option>
+            {profiles.map((p) => (
+              <option key={p.id} value={p.id}>
+                {p.id}
+              </option>
+            ))}
+          </select>
+        </label>
+        <label className="flex-1">
+          name
+          <input value={name} onChange={(e) => setName(e.target.value)} />
+        </label>
+      </div>
+      <label>
+        model override
+        {modelGroups.length === 0 ? (
+          <input
+            value=""
+            disabled
+            placeholder="(uses profile default — enable models on /config)"
+          />
+        ) : (
+          <select value={model} onChange={(e) => setModel(e.target.value)}>
+            <option value="">(uses profile default)</option>
+            {modelGroups.map((g) => (
+              <optgroup key={g.provider} label={g.provider}>
+                {g.models.map((m) => (
+                  <option key={m} value={`${g.provider}:${m}`}>
+                    {`${g.provider}:${m}`}
+                  </option>
+                ))}
+              </optgroup>
+            ))}
+          </select>
+        )}
+      </label>
+      <label>
+        group
+        {groups.length === 0 ? (
+          <select disabled>
+            <option>(no groups — register one on /groups)</option>
+          </select>
+        ) : (
+          <select value={groupId} onChange={(e) => setGroupId(e.target.value)}>
+            {groups.map((g) => (
+              <option key={g.id} value={g.id}>
+                {g.id} ({g.name})
+              </option>
+            ))}
+          </select>
+        )}
+      </label>
+
+      <button type="submit" disabled={submitting}>
+        {submitting ? 'spawning…' : 'spawn'}
+      </button>
+    </form>
+  )
+}

package/apps/web/src/routes/api/$.ts

@@ -0,0 +1,88 @@
+// Catch-all reverse proxy: forwards every browser /api/* request to the
+// daemon. Browser scripts use relative URLs (/api/agents, /api/groups, …)
+// so the bz_token cookie auto-attaches; this proxy translates that cookie
+// into a Bearer header for the daemon, which lives on a different origin.
+//
+// Streams responses (chat NDJSON) and request bodies through unchanged.
+
+import { createFileRoute } from '@tanstack/react-router'
+import { getCookie } from '@tanstack/react-start/server'
+import { DAEMON_BASE_URL } from '../../lib/daemon-client'
+
+// Hop-by-hop headers per RFC 7230 §6.1, plus host (we're rewriting it) and
+// cookie (we translate cookie → bearer ourselves).
+const STRIP_REQUEST_HEADERS = new Set([
+  'host',
+  'connection',
+  'keep-alive',
+  'proxy-authenticate',
+  'proxy-authorization',
+  'te',
+  'trailer',
+  'transfer-encoding',
+  'upgrade',
+  'cookie',
+])
+
+const STRIP_RESPONSE_HEADERS = new Set([
+  'connection',
+  'keep-alive',
+  'proxy-authenticate',
+  'proxy-authorization',
+  'te',
+  'trailer',
+  'transfer-encoding',
+  'upgrade',
+])
+
+async function proxy(request: Request): Promise<Response> {
+  const incoming = new URL(request.url)
+  const target = `${DAEMON_BASE_URL}${incoming.pathname}${incoming.search}`
+
+  const headers = new Headers()
+  for (const [k, v] of request.headers) {
+    if (!STRIP_REQUEST_HEADERS.has(k.toLowerCase())) headers.set(k, v)
+  }
+  // Browser sent the bz_token cookie; translate to Bearer for the daemon.
+  // If the request already has an Authorization header (CLI/mobile via the
+  // web origin — unusual but possible) leave it alone.
+  if (!headers.has('authorization')) {
+    const token = getCookie('bz_token')
+    if (token) headers.set('authorization', `Bearer ${token}`)
+  }
+  // Stamp Origin so we stay symmetric with @bazilion/client and any future
+  // origin checks the daemon adds keep working.
+  headers.set('origin', DAEMON_BASE_URL)
+
+  const init: RequestInit = { method: request.method, headers, redirect: 'manual' }
+  if (request.method !== 'GET' && request.method !== 'HEAD') {
+    init.body = request.body
+    // @ts-expect-error — undici needs duplex:'half' for streaming bodies
+    init.duplex = 'half'
+  }
+
+  const upstream = await fetch(target, init)
+
+  const respHeaders = new Headers()
+  for (const [k, v] of upstream.headers) {
+    if (!STRIP_RESPONSE_HEADERS.has(k.toLowerCase())) respHeaders.set(k, v)
+  }
+
+  return new Response(upstream.body, {
+    status: upstream.status,
+    statusText: upstream.statusText,
+    headers: respHeaders,
+  })
+}
+
+export const Route = createFileRoute('/api/$')({
+  server: {
+    handlers: {
+      GET: ({ request }) => proxy(request),
+      POST: ({ request }) => proxy(request),
+      PUT: ({ request }) => proxy(request),
+      PATCH: ({ request }) => proxy(request),
+      DELETE: ({ request }) => proxy(request),
+    },
+  },
+})