bazilion 0.0.0

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

@@ -0,0 +1,527 @@
+import { ApiClientError } from '@bazilion/client'
+import type {
+  Group,
+  ProviderMessage,
+  ReasoningLevel,
+  ResolvedAgent,
+  SessionHeadResponse,
+  SkillInfo,
+} 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 { ChatPane } from '../../../components/ChatPane'
+import { CopyButton } from '../../../components/CopyButton'
+import { daemonClient } from '../../../lib/daemon-client'
+import { REASONING_LEVELS } from '../../../lib/wire-constants'
+
+interface ModelGroup {
+  provider: string
+  models: string[]
+}
+
+interface AvailableModelsResponse {
+  groups: ModelGroup[]
+}
+
+interface AgentView {
+  resolved: ResolvedAgent
+  initialMessages: ProviderMessage[]
+  sessionHead: SessionHeadResponse
+  groups: Group[]
+  skills: SkillInfo[]
+  modelGroups: ModelGroup[]
+}
+
+const fetchAgent = createServerFn({ method: 'POST' })
+  .inputValidator((d: { id: string }) => d)
+  .handler(async ({ data }): Promise<AgentView | 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 [msgs, head, groups, skills, models] = await Promise.all([
+      c.get<{ messages: ProviderMessage[] }>(
+        `/api/agents/${encodeURIComponent(resolved.agent.id)}/sessions/messages`,
+      ),
+      c.get<SessionHeadResponse>(
+        `/api/agents/${encodeURIComponent(resolved.agent.id)}/sessions/head`,
+      ),
+      c.get<Group[]>('/api/groups'),
+      c.get<SkillInfo[]>('/api/skills'),
+      c.get<AvailableModelsResponse>('/api/config/available-models'),
+    ])
+    return {
+      resolved,
+      initialMessages: msgs.messages,
+      sessionHead: head,
+      groups,
+      skills,
+      modelGroups: models.groups,
+    }
+  })
+
+export const Route = createFileRoute('/agents/$id/')({
+  loader: async ({ params }) => {
+    const data = await fetchAgent({ data: { id: params.id } })
+    if (!data) throw redirect({ to: '/agents' })
+    return data
+  },
+  component: AgentDetailPage,
+})
+
+function AgentDetailPage() {
+  const { resolved, initialMessages, sessionHead, groups, skills, modelGroups } =
+    Route.useLoaderData()
+  const router = useRouter()
+
+  async function archive() {
+    if (!confirm(`archive "${resolved.agent.name}"? (reversible)`)) return
+    await fetch(`/api/agents/${resolved.agent.id}/archive`, { method: 'POST' })
+    await router.invalidate()
+  }
+  async function unarchive() {
+    await fetch(`/api/agents/${resolved.agent.id}/unarchive`, { method: 'POST' })
+    await router.invalidate()
+  }
+  async function del() {
+    const msg =
+      `Permanently delete agent "${resolved.agent.name}"?\n\n` +
+      `This removes the DB rows (messages, triggers, skill attachments) AND the agent's on-disk directory (memory, templates, state, sessions). This cannot be undone.`
+    if (!confirm(msg)) return
+    const res = await fetch(`/api/agents/${resolved.agent.id}`, { method: 'DELETE' })
+    if (res.ok || res.status === 204) {
+      window.location.assign('/agents')
+    } else {
+      alert(`failed: ${res.statusText}`)
+    }
+  }
+
+  return (
+    <div>
+      <header className="mb-8">
+        <h1>{resolved.agent.name}</h1>
+        <div className="mt-2 flex flex-wrap items-center gap-x-5 gap-y-2">
+          <Tag>
+            <span className="px-1.5 font-mono text-[0.95em] text-mocha select-all">
+              {resolved.agent.id}
+            </span>
+            <CopyButton
+              value={resolved.agent.id}
+              ariaLabel="Copy agent UUID"
+              title="Copy UUID to clipboard"
+            />
+          </Tag>
+          <Tag>
+            status: <span className="ml-1">{resolved.agent.status}</span>
+          </Tag>
+          <Tag>
+            profile: <code className="ml-1 bg-transparent px-0">{resolved.profile.id}</code>
+          </Tag>
+          <Tag>
+            group:{' '}
+            <a
+              href={`/groups/${encodeURIComponent(resolved.group.id)}`}
+              className="ml-1 bg-transparent px-0 font-mono underline"
+            >
+              {resolved.group.id}
+            </a>{' '}
+            ·{' '}
+            <a
+              href={`/groups/${encodeURIComponent(resolved.group.id)}/memory`}
+              className="ml-0.5 underline"
+            >
+              shared memory →
+            </a>
+          </Tag>
+          <Tag>
+            model: <code className="ml-1 bg-transparent px-0">{resolved.model}</code>
+          </Tag>
+          <Tag>
+            reasoning:{' '}
+            <code className="ml-1 bg-transparent px-0">{resolved.reasoningLevel}</code>
+          </Tag>
+        </div>
+
+        <div className="mt-3 flex flex-wrap gap-2">
+          {resolved.agent.status === 'archived' ? (
+            <button type="button" onClick={unarchive} className="ghost-btn">
+              unarchive
+            </button>
+          ) : (
+            <button type="button" onClick={archive} className="ghost-btn">
+              archive
+            </button>
+          )}
+          <button
+            type="button"
+            onClick={del}
+            className="ghost-btn border-[rgba(196,135,138,0.4)] text-[#9B3D3D] hover:bg-[rgba(196,135,138,0.08)]"
+          >
+            delete permanently
+          </button>
+        </div>
+
+        <SettingsDetails
+          agentId={resolved.agent.id}
+          currentModelOverride={resolved.agent.modelOverride ?? null}
+          profileDefaultModel={resolved.profile.defaultModel}
+          currentReasoning={resolved.reasoningLevel}
+          modelGroups={modelGroups}
+        />
+      </header>
+
+      {resolved.agent.status === 'archived' && (
+        <div className="mb-4 rounded-md border border-frost bg-fawn/35 px-4 py-2 text-[0.9em] text-chocolate">
+          <strong className="text-[#7a4e2a]">This agent is archived.</strong> It's hidden from
+          the default agent list; use <em>unarchive</em> above to bring it back, or{' '}
+          <em>delete permanently</em> to remove its data entirely.
+        </div>
+      )}
+
+      <AgentTabs
+        agentId={resolved.agent.id}
+        active="chat"
+        archived={resolved.agent.status === 'archived'}
+      />
+
+      <SectionTitle>Chat</SectionTitle>
+      <div className="h-[70vh]">
+        <ChatPane
+          agentId={resolved.agent.id}
+          agentName={resolved.agent.name}
+          initialMessages={initialMessages}
+          initialSessionHead={sessionHead}
+        />
+      </div>
+      <p className="mt-2 text-[0.82em] text-mocha-light">
+        chat history persists in bazilion across navigation and restarts.
+      </p>
+
+      <section className="mt-10">
+        <SectionTitle>Group</SectionTitle>
+        <p className="text-[0.9em] text-mocha-light">
+          Current group: <code>{resolved.group.id}</code> ({resolved.group.name}) —{' '}
+          <code>{resolved.group.path}</code>.{' '}
+          <a href={`/groups/${resolved.group.id}`}>view / edit USER.md</a>
+        </p>
+        <MoveGroupForm
+          agentId={resolved.agent.id}
+          currentGroupId={resolved.group.id}
+          groups={groups}
+        />
+      </section>
+
+      <section className="mt-10">
+        <SectionTitle>Skills</SectionTitle>
+        <SkillsTable
+          agentId={resolved.agent.id}
+          attached={new Set(resolved.skills)}
+          all={skills}
+        />
+      </section>
+    </div>
+  )
+}
+
+function SectionTitle({ children }: { children: React.ReactNode }) {
+  return (
+    <h3 className="mb-3 font-body text-[0.85em] font-semibold uppercase tracking-wider text-mocha-light">
+      {children}
+    </h3>
+  )
+}
+
+function Tag({ children }: { children: React.ReactNode }) {
+  return (
+    <span className="inline-flex items-center gap-1 rounded-full border border-frost bg-ivory px-3 py-0.5 text-[0.84em] text-mocha-light">
+      {children}
+    </span>
+  )
+}
+
+function SettingsDetails({
+  agentId,
+  currentModelOverride,
+  profileDefaultModel,
+  currentReasoning,
+  modelGroups,
+}: {
+  agentId: string
+  currentModelOverride: string | null
+  profileDefaultModel: string
+  currentReasoning: ReasoningLevel
+  modelGroups: ModelGroup[]
+}) {
+  const router = useRouter()
+  const [modelOverride, setModelOverride] = useState<string>(currentModelOverride ?? '')
+  const [reasoning, setReasoning] = useState<ReasoningLevel>(currentReasoning)
+  const [saving, setSaving] = useState(false)
+  const [savedFlash, setSavedFlash] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  const currentInGroups =
+    currentModelOverride !== null &&
+    modelGroups.some((g) =>
+      g.models.some((m) => `${g.provider}:${m}` === currentModelOverride),
+    )
+
+  async function save(e: React.FormEvent<HTMLFormElement>) {
+    e.preventDefault()
+    setSaving(true)
+    setError(null)
+    try {
+      const res = await fetch(`/api/agents/${encodeURIComponent(agentId)}`, {
+        method: 'PATCH',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({
+          modelOverride: modelOverride === '' ? null : modelOverride,
+          reasoningLevel: reasoning,
+        }),
+      })
+      if (!res.ok) {
+        const body = (await res.json().catch(() => null)) as { error?: string } | null
+        throw new Error(body?.error ?? res.statusText)
+      }
+      setSavedFlash(true)
+      setTimeout(() => setSavedFlash(false), 1500)
+      await router.invalidate()
+    } catch (err) {
+      setError((err as Error).message)
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  return (
+    <details className="mt-3 text-[0.9em]">
+      <summary className="cursor-pointer text-mocha-light">settings</summary>
+      <form
+        onSubmit={save}
+        className="mt-2 flex flex-wrap items-end gap-3 border-t border-dashed border-frost py-3"
+      >
+        <label className="flex flex-col gap-1 text-[0.85em] text-mocha-light">
+          model override
+          <select
+            name="modelOverride"
+            value={modelOverride}
+            onChange={(e) => setModelOverride(e.target.value)}
+            className="min-w-[16rem] rounded-sm border border-frost bg-snow px-2 py-1.5"
+          >
+            <option value="">inherit from profile ({profileDefaultModel})</option>
+            {currentModelOverride !== null && !currentInGroups && (
+              <option value={currentModelOverride}>
+                {currentModelOverride} (not in curated list)
+              </option>
+            )}
+            {modelGroups.map((g) => (
+              <optgroup key={g.provider} label={g.provider}>
+                {g.models.map((m) => {
+                  const value = `${g.provider}:${m}`
+                  return (
+                    <option key={value} value={value}>
+                      {value}
+                    </option>
+                  )
+                })}
+              </optgroup>
+            ))}
+          </select>
+        </label>
+        <label className="flex flex-col gap-1 text-[0.85em] text-mocha-light">
+          reasoning level
+          <select
+            name="reasoningLevel"
+            value={reasoning}
+            onChange={(e) => setReasoning(e.target.value as ReasoningLevel)}
+            className="min-w-[16rem] rounded-sm border border-frost bg-snow px-2 py-1.5"
+          >
+            {REASONING_LEVELS.map((lvl) => (
+              <option key={lvl} value={lvl}>
+                {lvl}
+              </option>
+            ))}
+          </select>
+        </label>
+        <button type="submit" disabled={saving}>
+          {saving ? 'saving…' : 'save'}
+        </button>
+        {savedFlash && <span className="text-[0.85em] text-[#3b7a3b]">saved ✓</span>}
+        {error && <span className="text-[0.85em] text-[#9B3D3D]">{error}</span>}
+      </form>
+    </details>
+  )
+}
+
+function MoveGroupForm({
+  agentId,
+  currentGroupId,
+  groups,
+}: {
+  agentId: string
+  currentGroupId: string
+  groups: Group[]
+}) {
+  const router = useRouter()
+  const [groupId, setGroupId] = useState(currentGroupId)
+  const [moving, setMoving] = useState(false)
+  const [err, setErr] = useState<string | null>(null)
+
+  async function move(e: React.FormEvent<HTMLFormElement>) {
+    e.preventDefault()
+    if (groupId === currentGroupId) return
+    setMoving(true)
+    setErr(null)
+    try {
+      const res = await fetch(`/api/agents/${encodeURIComponent(agentId)}/group`, {
+        method: 'PATCH',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ groupId }),
+      })
+      if (!res.ok) {
+        const body = (await res.json().catch(() => null)) as { error?: string } | null
+        throw new Error(body?.error ?? res.statusText)
+      }
+      await router.invalidate()
+    } catch (e2) {
+      setErr((e2 as Error).message)
+    } finally {
+      setMoving(false)
+    }
+  }
+
+  return (
+    <form onSubmit={move} className="mt-2 flex flex-wrap items-end gap-2">
+      <label className="flex flex-col gap-1 text-[0.85em] text-mocha-light">
+        move to:
+        <select
+          value={groupId}
+          onChange={(e) => setGroupId(e.target.value)}
+          className="min-w-[18rem] rounded-sm border border-frost bg-snow px-2 py-1.5"
+        >
+          {groups.map((g) => (
+            <option key={g.id} value={g.id}>
+              {g.id} — {g.path}
+            </option>
+          ))}
+        </select>
+      </label>
+      <button type="submit" disabled={moving || groupId === currentGroupId}>
+        {moving ? 'moving…' : 'move'}
+      </button>
+      {err && <span className="text-[0.85em] text-[#9B3D3D]">{err}</span>}
+    </form>
+  )
+}
+
+function SkillsTable({
+  agentId,
+  attached,
+  all,
+}: {
+  agentId: string
+  attached: Set<string>
+  all: SkillInfo[]
+}) {
+  const router = useRouter()
+  const [pending, setPending] = useState<string | null>(null)
+  const [err, setErr] = useState<string | null>(null)
+
+  async function attach(name: string) {
+    setPending(name)
+    setErr(null)
+    try {
+      const res = await fetch(`/api/agents/${encodeURIComponent(agentId)}/skills`, {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ skill: name }),
+      })
+      if (!res.ok) {
+        const body = (await res.json().catch(() => null)) as { error?: string } | null
+        throw new Error(body?.error ?? res.statusText)
+      }
+      await router.invalidate()
+    } catch (e) {
+      setErr((e as Error).message)
+    } finally {
+      setPending(null)
+    }
+  }
+  async function detach(name: string) {
+    setPending(name)
+    setErr(null)
+    try {
+      const res = await fetch(
+        `/api/agents/${encodeURIComponent(agentId)}/skills/${encodeURIComponent(name)}`,
+        { method: 'DELETE' },
+      )
+      if (!res.ok && res.status !== 204) {
+        const body = (await res.json().catch(() => null)) as { error?: string } | null
+        throw new Error(body?.error ?? res.statusText)
+      }
+      await router.invalidate()
+    } catch (e) {
+      setErr((e as Error).message)
+    } finally {
+      setPending(null)
+    }
+  }
+
+  if (all.length === 0) {
+    return <p className="text-[0.9em] text-mocha-light">no skills installed</p>
+  }
+  return (
+    <>
+      {err && <p className="mb-2 text-[0.85em] text-[#9B3D3D]">{err}</p>}
+      <table>
+        <thead>
+          <tr>
+            <th>name</th>
+            <th>description</th>
+            <th />
+          </tr>
+        </thead>
+        <tbody>
+          {all.map((s) => {
+            const isAttached = attached.has(s.name)
+            const busy = pending === s.name
+            return (
+              <tr key={s.name}>
+                <td>
+                  <code>{s.name}</code>
+                </td>
+                <td>{s.description || <span className="text-mocha-light">—</span>}</td>
+                <td>
+                  {isAttached ? (
+                    <button
+                      type="button"
+                      className="ghost-btn"
+                      disabled={busy}
+                      onClick={() => detach(s.name)}
+                    >
+                      {busy ? '…' : 'detach'}
+                    </button>
+                  ) : (
+                    <button
+                      type="button"
+                      className="ghost-btn"
+                      disabled={busy}
+                      onClick={() => attach(s.name)}
+                    >
+                      {busy ? '…' : 'attach'}
+                    </button>
+                  )}
+                </td>
+              </tr>
+            )
+          })}
+        </tbody>
+      </table>
+    </>
+  )
+}