bazilion 0.0.0

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

@@ -0,0 +1,153 @@
+import { ApiClientError } from '@bazilion/client'
+import type { Agent, Group } from '@bazilion/api-types'
+import { createFileRoute, redirect, useRouter } from '@tanstack/react-router'
+import { createServerFn } from '@tanstack/react-start'
+import { useState } from 'react'
+import { daemonClient } from '../../../lib/daemon-client'
+
+interface GroupDetail {
+  group: Group
+  members: Agent[]
+}
+
+const fetchGroup = createServerFn({ method: 'POST' })
+  .inputValidator((d: { id: string }) => d)
+  .handler(async ({ data }): Promise<GroupDetail | null> => {
+    const c = daemonClient()
+    let group: Group
+    try {
+      group = await c.get<Group>(`/api/groups/${encodeURIComponent(data.id)}`)
+    } catch (err) {
+      if (err instanceof ApiClientError && err.status === 404) return null
+      throw err
+    }
+    const all = await c.get<Agent[]>('/api/agents?includeArchived=true')
+    const members = all.filter((a) => a.groupId === group.id)
+    return { group, members }
+  })
+
+export const Route = createFileRoute('/groups/$id/')({
+  loader: async ({ params }) => {
+    const data = await fetchGroup({ data: { id: params.id } })
+    if (!data) throw redirect({ to: '/groups' })
+    return data
+  },
+  component: GroupDetailPage,
+})
+
+function GroupDetailPage() {
+  const { group, members } = Route.useLoaderData()
+  const router = useRouter()
+  const [userMd, setUserMd] = useState(group.userMd)
+  const [busy, setBusy] = useState(false)
+  const [err, setErr] = useState<string | null>(null)
+  const [savedAt, setSavedAt] = useState<number | null>(null)
+
+  async function save() {
+    setBusy(true)
+    setErr(null)
+    try {
+      const res = await fetch(`/api/groups/${encodeURIComponent(group.id)}/user-md`, {
+        method: 'PUT',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ userMd }),
+      })
+      if (!res.ok) {
+        const e = (await res.json().catch(() => ({}))) as { error?: string }
+        throw new Error(e.error ?? `${res.status} ${res.statusText}`)
+      }
+      setSavedAt(Date.now())
+      await router.invalidate()
+    } catch (e) {
+      setErr((e as Error).message)
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  return (
+    <main className="mx-auto max-w-3xl px-6 py-8">
+      <h1 className="font-serif text-3xl text-foreground">
+        {group.name} <span className="text-muted-foreground text-base">({group.id})</span>
+      </h1>
+      <p className="text-muted-foreground text-sm mb-6 mt-1">
+        <code className="font-mono">{group.path}</code> · {members.length}{' '}
+        member{members.length === 1 ? '' : 's'} ·{' '}
+        <a
+          href={`/groups/${encodeURIComponent(group.id)}/memory`}
+          className="text-primary underline"
+        >
+          shared memory →
+        </a>
+      </p>
+
+      <section className="rounded-lg border bg-card p-5 mb-6">
+        <h3 className="font-serif text-xl mb-1">USER.md</h3>
+        <p className="text-muted-foreground text-sm mb-3">
+          Read-only context about the human, injected into every member agent's system prompt.
+          12 KB cap. Agents cannot edit this file — only you can.
+        </p>
+        <textarea
+          value={userMd}
+          onChange={(e) => setUserMd(e.target.value)}
+          rows={16}
+          className="w-full rounded-md border bg-background px-3 py-2 font-mono text-sm outline-none focus:ring-2 focus:ring-ring/30"
+          placeholder="What the agent should know about you in this group context…"
+        />
+        <div className="flex items-center gap-3 mt-3">
+          <button
+            type="button"
+            onClick={save}
+            disabled={busy || userMd === group.userMd}
+            className="rounded-md bg-primary px-3 py-2 text-sm font-medium text-primary-foreground disabled:opacity-50"
+          >
+            {busy ? 'saving…' : 'save'}
+          </button>
+          <span className="text-xs text-muted-foreground">
+            {userMd.length} / 12000 chars
+          </span>
+          {savedAt && <span className="text-xs text-emerald-700">✓ saved</span>}
+          {err && <span className="text-xs text-rose-700">{err}</span>}
+        </div>
+      </section>
+
+      <section className="rounded-lg border bg-card p-5">
+        <h3 className="font-serif text-xl mb-3">members</h3>
+        {members.length === 0 ? (
+          <p className="text-muted-foreground text-sm">No agents in this group yet.</p>
+        ) : (
+          <table className="w-full text-sm">
+            <thead className="text-left text-muted-foreground border-b">
+              <tr>
+                <th className="py-2">name</th>
+                <th>status</th>
+                <th>profile</th>
+                <th />
+              </tr>
+            </thead>
+            <tbody>
+              {members.map((m) => (
+                <tr key={m.id} className="border-b last:border-0">
+                  <td className="py-2">
+                    <a href={`/agents/${m.id}`} className="text-primary underline">
+                      {m.name}
+                    </a>
+                  </td>
+                  <td>{m.status}</td>
+                  <td>
+                    <code className="font-mono text-xs">{m.profileId}</code>
+                  </td>
+                  <td>
+                    <code className="font-mono text-xs text-muted-foreground">
+                      {m.id.slice(0, 8)}…
+                    </code>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        )}
+      </section>
+    </main>
+  )
+}

package/apps/web/src/routes/groups/$id/memory.tsx

@@ -0,0 +1,321 @@
+// Per-group shared memory: BM25-indexed markdown notes that every member
+// agent reads from and writes to. Browse the list, search, edit/create
+// entries. The qmd index lives at <group.path>/memory/ on disk.
+
+import { ApiClientError } from '@bazilion/client'
+import type { Agent, Group, MemoryEntry, MemoryHit } from '@bazilion/api-types'
+import { createFileRoute, redirect } from '@tanstack/react-router'
+import { createServerFn } from '@tanstack/react-start'
+import { useEffect, useRef, useState } from 'react'
+import { daemonClient } from '../../../lib/daemon-client'
+
+interface MemoryView {
+  group: Group
+  memberCount: number
+  entries: MemoryEntry[]
+}
+
+const fetchMemory = createServerFn({ method: 'POST' })
+  .inputValidator((d: { id: string }) => d)
+  .handler(async ({ data }): Promise<MemoryView | null> => {
+    const c = daemonClient()
+    let group: Group
+    try {
+      group = await c.get<Group>(`/api/groups/${encodeURIComponent(data.id)}`)
+    } catch (err) {
+      if (err instanceof ApiClientError && err.status === 404) return null
+      throw err
+    }
+    const [entries, agents] = await Promise.all([
+      c.get<MemoryEntry[]>(`/api/groups/${encodeURIComponent(group.id)}/memory`),
+      c.get<Agent[]>('/api/agents?includeArchived=true'),
+    ])
+    const memberCount = agents.filter((a) => a.groupId === group.id).length
+    return { group, memberCount, entries }
+  })
+
+export const Route = createFileRoute('/groups/$id/memory')({
+  loader: async ({ params }) => {
+    const data = await fetchMemory({ data: { id: params.id } })
+    if (!data) throw redirect({ to: '/groups' })
+    return data
+  },
+  component: MemoryPage,
+})
+
+function encodeKey(key: string): string {
+  return key.split('/').map(encodeURIComponent).join('/')
+}
+
+interface ListRow {
+  key: string
+  preview: string
+  score?: number
+}
+
+type Mode = 'none' | 'edit' | 'new'
+
+function MemoryPage() {
+  const { group, memberCount, entries: initialEntries } = Route.useLoaderData()
+  const groupId = group.id
+
+  const [rows, setRows] = useState<ListRow[]>(() =>
+    initialEntries.map((e) => ({ key: e.key, preview: e.content.slice(0, 80) })),
+  )
+  const [isSearch, setIsSearch] = useState(false)
+  const [query, setQuery] = useState('')
+  const [selectedKey, setSelectedKey] = useState<string | null>(null)
+  const [mode, setMode] = useState<Mode>('none')
+  const [keyInput, setKeyInput] = useState('')
+  const [content, setContent] = useState('')
+  const [status, setStatus] = useState<{ msg: string; kind: 'info' | 'error' } | null>(null)
+  const searchTimer = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+  async function loadList(q: string) {
+    try {
+      const url =
+        q.trim().length > 0
+          ? `/api/groups/${encodeURIComponent(groupId)}/memory/search?q=${encodeURIComponent(q)}&limit=50`
+          : `/api/groups/${encodeURIComponent(groupId)}/memory`
+      const res = await fetch(url)
+      if (!res.ok) {
+        const body = (await res.json().catch(() => null)) as { error?: string } | null
+        throw new Error(body?.error ?? res.statusText)
+      }
+      const data = (await res.json()) as MemoryEntry[] | MemoryHit[]
+      if (q.trim().length > 0) {
+        setRows(
+          (data as MemoryHit[]).map((h) => ({
+            key: h.key,
+            preview: h.snippet,
+            score: h.score,
+          })),
+        )
+        setIsSearch(true)
+      } else {
+        setRows(
+          (data as MemoryEntry[]).map((e) => ({
+            key: e.key,
+            preview: e.content.slice(0, 80),
+          })),
+        )
+        setIsSearch(false)
+      }
+    } catch (err) {
+      setStatus({ msg: `error: ${(err as Error).message}`, kind: 'error' })
+    }
+  }
+
+  useEffect(() => {
+    if (searchTimer.current) clearTimeout(searchTimer.current)
+    searchTimer.current = setTimeout(() => {
+      void loadList(query)
+    }, 200)
+    return () => {
+      if (searchTimer.current) clearTimeout(searchTimer.current)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [query])
+
+  async function openEntry(key: string) {
+    setSelectedKey(key)
+    setMode('edit')
+    setStatus({ msg: 'loading…', kind: 'info' })
+    try {
+      const res = await fetch(
+        `/api/groups/${encodeURIComponent(groupId)}/memory/${encodeKey(key)}`,
+      )
+      if (!res.ok) {
+        const body = (await res.json().catch(() => null)) as { error?: string } | null
+        throw new Error(body?.error ?? res.statusText)
+      }
+      const entry = (await res.json()) as MemoryEntry
+      setKeyInput(entry.key)
+      setContent(entry.content ?? '')
+      setStatus({ msg: `loaded ${entry.key}`, kind: 'info' })
+    } catch (err) {
+      setStatus({ msg: `error: ${(err as Error).message}`, kind: 'error' })
+    }
+  }
+
+  function newEntry() {
+    setSelectedKey(null)
+    setMode('new')
+    setKeyInput('')
+    setContent('')
+    setStatus({ msg: 'new entry — type a key and content, then save', kind: 'info' })
+  }
+
+  async function save() {
+    const key = keyInput.trim()
+    if (!key) {
+      setStatus({ msg: 'key is required', kind: 'error' })
+      return
+    }
+    try {
+      const res = await fetch(
+        `/api/groups/${encodeURIComponent(groupId)}/memory/${encodeKey(key)}`,
+        {
+          method: 'PUT',
+          headers: { 'content-type': 'application/json' },
+          body: JSON.stringify({ content }),
+        },
+      )
+      if (!res.ok) {
+        const body = (await res.json().catch(() => null)) as { error?: string } | null
+        throw new Error(body?.error ?? res.statusText)
+      }
+      setSelectedKey(key)
+      setMode('edit')
+      setStatus({ msg: 'saved', kind: 'info' })
+      await loadList(query)
+    } catch (err) {
+      setStatus({ msg: `error: ${(err as Error).message}`, kind: 'error' })
+    }
+  }
+
+  async function del() {
+    if (!selectedKey) return
+    if (!confirm(`delete ${selectedKey}?`)) return
+    try {
+      const res = await fetch(
+        `/api/groups/${encodeURIComponent(groupId)}/memory/${encodeKey(selectedKey)}`,
+        { 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)
+      }
+      setSelectedKey(null)
+      setMode('none')
+      setKeyInput('')
+      setContent('')
+      setStatus({ msg: 'deleted', kind: 'info' })
+      await loadList(query)
+    } catch (err) {
+      setStatus({ msg: `error: ${(err as Error).message}`, kind: 'error' })
+    }
+  }
+
+  const canSave = mode !== 'none' && keyInput.trim().length > 0
+  const canDelete = mode === 'edit' && selectedKey !== null
+
+  return (
+    <main className="mx-auto max-w-5xl px-6 py-8">
+      <header className="mb-6">
+        <h1 className="font-serif text-3xl text-foreground">
+          {group.name}{' '}
+          <span className="text-muted-foreground text-base">/ shared memory</span>
+        </h1>
+        <p className="text-muted-foreground text-sm mt-1">
+          BM25-indexed markdown notes shared by every agent in{' '}
+          <a
+            href={`/groups/${encodeURIComponent(group.id)}`}
+            className="font-mono underline"
+          >
+            {group.id}
+          </a>{' '}
+          ({memberCount} member{memberCount === 1 ? '' : 's'}). Anything written here is
+          visible to every member; per-agent notes belong in the agent's own{' '}
+          <code className="font-mono">IDENTITY.md</code> via <code>home_write</code>.
+        </p>
+      </header>
+
+      <div className="grid grid-cols-1 gap-6 lg:grid-cols-[320px_1fr]">
+        <div>
+          <div className="overflow-hidden rounded-[16px] border border-frost bg-snow">
+            <div className="border-b border-frost p-2">
+              <input
+                type="text"
+                placeholder="search (BM25)..."
+                autoComplete="off"
+                value={query}
+                onChange={(e) => setQuery(e.target.value)}
+              />
+            </div>
+            <div className="max-h-[520px] overflow-y-auto">
+              {rows.length === 0 ? (
+                <div className="p-8 text-center text-mocha-light">no entries</div>
+              ) : (
+                rows.map((r) => {
+                  const active = r.key === selectedKey
+                  return (
+                    <button
+                      key={r.key}
+                      type="button"
+                      onClick={() => openEntry(r.key)}
+                      className={`unstyled block w-full cursor-pointer border-b border-frost/50 px-3.5 py-2 text-left font-mono text-[0.84em] transition-colors last:border-b-0 hover:bg-sapphire-glow ${
+                        active ? 'bg-sapphire-glow font-medium text-sapphire-deep' : ''
+                      }`}
+                    >
+                      {isSearch && r.score !== undefined && (
+                        <span className="float-right text-[0.75em] text-sapphire">
+                          {r.score.toFixed(2)}
+                        </span>
+                      )}
+                      {r.key}
+                      {r.preview && (
+                        <span className="mt-1 block text-[0.9em] font-normal text-mocha-light">
+                          {r.preview}
+                        </span>
+                      )}
+                    </button>
+                  )
+                })
+              )}
+            </div>
+          </div>
+          <button type="button" className="ghost-btn mt-3 w-full" onClick={newEntry}>
+            + new entry
+          </button>
+        </div>
+
+        <div>
+          <div className="mb-3 flex items-center gap-2">
+            <input
+              type="text"
+              placeholder="key (e.g. prefs/hiking.md)"
+              value={keyInput}
+              onChange={(e) => setKeyInput(e.target.value)}
+              disabled={mode !== 'new'}
+              className="flex-1 font-mono"
+            />
+          </div>
+          <textarea
+            placeholder="select an entry on the left, or create a new one."
+            value={content}
+            onChange={(e) => setContent(e.target.value)}
+            className="min-h-[360px] w-full font-mono text-[0.9em] leading-[1.55]"
+          />
+          <div className="mt-3 flex gap-2">
+            <button
+              type="button"
+              className="btn-primary"
+              onClick={save}
+              disabled={!canSave}
+            >
+              save
+            </button>
+            <button
+              type="button"
+              className="ghost-btn"
+              onClick={del}
+              disabled={!canDelete}
+            >
+              delete
+            </button>
+          </div>
+          {status && (
+            <p
+              className={`mt-2 text-[0.9em] ${
+                status.kind === 'error' ? 'text-[#9B3D3D]' : 'text-mocha-light'
+              }`}
+            >
+              {status.msg}
+            </p>
+          )}
+        </div>
+      </div>
+    </main>
+  )
+}

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

@@ -0,0 +1,191 @@
+import type { Agent, Group } 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 GroupsData {
+  groups: Group[]
+  memberCounts: Record<string, number>
+}
+
+const fetchGroupsData = createServerFn({ method: 'GET' }).handler(
+  async (): Promise<GroupsData> => {
+    const c = daemonClient()
+    const [groups, agents] = await Promise.all([
+      c.get<Group[]>('/api/groups'),
+      c.get<Agent[]>('/api/agents?includeArchived=true'),
+    ])
+    const memberCounts: Record<string, number> = {}
+    for (const a of agents) memberCounts[a.groupId] = (memberCounts[a.groupId] ?? 0) + 1
+    return { groups, memberCounts }
+  },
+)
+
+export const Route = createFileRoute('/groups/')({
+  loader: () => fetchGroupsData(),
+  component: GroupsPage,
+})
+
+function GroupsPage() {
+  const { groups, memberCounts } = Route.useLoaderData()
+  const router = useRouter()
+
+  async function remove(id: string) {
+    if (!confirm('remove this group registration?')) return
+    const res = await fetch(`/api/groups/${id}`, { method: 'DELETE' })
+    if (!res.ok && res.status !== 204) {
+      alert(res.statusText)
+      return
+    }
+    await router.invalidate()
+  }
+
+  return (
+    <div>
+      <h1>groups</h1>
+      <p className="muted">
+        A group is a collaboration context: one filesystem root, one USER.md, one roster. Every
+        agent belongs to exactly one group.
+      </p>
+
+      <RegisterGroupForm onRegistered={() => router.invalidate()} />
+
+      <table>
+        <thead>
+          <tr>
+            <th>id</th>
+            <th>name</th>
+            <th>path</th>
+            <th>members</th>
+            <th>USER.md</th>
+            <th />
+          </tr>
+        </thead>
+        <tbody>
+          {groups.length === 0 && (
+            <tr>
+              <td colSpan={6} className="muted">
+                no groups registered
+              </td>
+            </tr>
+          )}
+          {groups.map((g) => {
+            const count = memberCounts[g.id] ?? 0
+            const userMdBytes = g.userMd.length
+            return (
+              <tr key={g.id}>
+                <td>
+                  <code>{g.id}</code>
+                </td>
+                <td>{g.name}</td>
+                <td>
+                  <code>{g.path}</code>
+                </td>
+                <td>{count}</td>
+                <td>
+                  <a href={`/groups/${g.id}`}>
+                    {userMdBytes > 0 ? `${userMdBytes} chars` : 'empty'}
+                  </a>
+                </td>
+                <td>
+                  {count === 0 ? (
+                    <button type="button" className="ghost-btn" onClick={() => remove(g.id)}>
+                      remove
+                    </button>
+                  ) : (
+                    <span
+                      className="muted"
+                      title={`${count} agent(s) belong to this group`}
+                    >
+                      in use
+                    </span>
+                  )}
+                </td>
+              </tr>
+            )
+          })}
+        </tbody>
+      </table>
+    </div>
+  )
+}
+
+function RegisterGroupForm({ onRegistered }: { onRegistered: () => void }) {
+  const [id, setId] = useState('')
+  const [name, setName] = useState('')
+  const [link, setLink] = 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 (!id.trim()) {
+      setErr('id is required')
+      return
+    }
+    setSubmitting(true)
+    try {
+      const res = await fetch('/api/groups', {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({
+          id: id.trim(),
+          name: name.trim() || undefined,
+          link: link.trim() || undefined,
+        }),
+      })
+      if (!res.ok) {
+        const e2 = (await res.json().catch(() => null)) as { error?: string } | null
+        throw new Error(e2?.error ?? res.statusText)
+      }
+      setId('')
+      setName('')
+      setLink('')
+      onRegistered()
+    } catch (e2) {
+      setErr((e2 as Error).message)
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  return (
+    <form className="card" onSubmit={submit}>
+      <h3>register group</h3>
+      {err && <div className="err">{err}</div>}
+      <p className="muted">
+        Groups always live under <code>~/.bazilion/groups/&lt;slug&gt;/</code>. Leave the link
+        target blank to create a fresh directory; supply an absolute path to materialize the slot
+        as a symlink to your existing project tree instead.
+      </p>
+      <div className="flex gap-4">
+        <label className="flex-1">
+          id (slug)
+          <input
+            value={id}
+            onChange={(e) => setId(e.target.value)}
+            required
+            placeholder="myproject"
+          />
+        </label>
+        <label className="flex-1">
+          name
+          <input value={name} onChange={(e) => setName(e.target.value)} placeholder="My Project" />
+        </label>
+      </div>
+      <label>
+        link target (optional, absolute path)
+        <input
+          value={link}
+          onChange={(e) => setLink(e.target.value)}
+          placeholder="/home/user/projects/myproject"
+        />
+      </label>
+      <button type="submit" disabled={submitting}>
+        {submitting ? 'registering…' : 'register'}
+      </button>
+    </form>
+  )
+}