bazilion 0.0.0

package/apps/web/src/components/ConfigTabs.tsx

@@ -0,0 +1,29 @@
+// Sub-nav for the /config pages tree.
+
+type Tab = 'providers' | 'services' | 'tokens'
+
+const TABS: { key: Tab; href: string; label: string }[] = [
+  { key: 'providers', href: '/config', label: 'providers' },
+  { key: 'services', href: '/config/services', label: 'services' },
+  { key: 'tokens', href: '/config/tokens', label: 'tokens' },
+]
+
+export function ConfigTabs({ active }: { active: Tab }) {
+  return (
+    <nav className="flex gap-1 border-b mb-6">
+      {TABS.map((t) => (
+        <a
+          key={t.key}
+          href={t.href}
+          className={`px-3 py-2 text-sm border-b-2 -mb-px ${
+            t.key === active
+              ? 'border-primary text-primary font-semibold'
+              : 'border-transparent text-muted-foreground hover:text-foreground'
+          }`}
+        >
+          {t.label}
+        </a>
+      ))}
+    </nav>
+  )
+}

package/apps/web/src/components/CopyButton.tsx

@@ -0,0 +1,68 @@
+// Tiny clipboard button used by the agent detail header (copies the full UUID
+// for inter-agent messaging). Async clipboard API where available, transient
+// <textarea> + execCommand fallback for http://127… contexts where Chromium
+// blocks the async API. Flashes a green ✓ for ~1s on success.
+
+import { useState } from 'react'
+
+interface Props {
+  value: string
+  className?: string
+  ariaLabel?: string
+  title?: string
+}
+
+export function CopyButton({
+  value,
+  className,
+  ariaLabel = 'Copy to clipboard',
+  title = 'Copy to clipboard',
+}: Props) {
+  const [copied, setCopied] = useState(false)
+
+  async function copy() {
+    if (!value) return
+    let ok = false
+    try {
+      if (navigator.clipboard?.writeText) {
+        await navigator.clipboard.writeText(value)
+        ok = true
+      }
+    } catch {
+      // fall through
+    }
+    if (!ok) {
+      const ta = document.createElement('textarea')
+      ta.value = value
+      ta.setAttribute('readonly', '')
+      ta.style.position = 'fixed'
+      ta.style.opacity = '0'
+      document.body.appendChild(ta)
+      ta.select()
+      try {
+        ok = document.execCommand('copy')
+      } catch {}
+      ta.remove()
+    }
+    if (ok) {
+      setCopied(true)
+      setTimeout(() => setCopied(false), 1000)
+    }
+  }
+
+  const base =
+    'inline-flex h-[1.3rem] w-[1.6rem] items-center justify-center rounded-sm border border-transparent text-mocha-light transition-colors hover:border-frost hover:bg-snow hover:text-mocha'
+  const success =
+    'border-[#bcd9bc] bg-[#eef7ee] text-[#3b7a3b] hover:border-[#bcd9bc] hover:bg-[#eef7ee] hover:text-[#3b7a3b]'
+  return (
+    <button
+      type="button"
+      onClick={copy}
+      title={title}
+      aria-label={ariaLabel}
+      className={`${base} ${copied ? success : ''} ${className ?? ''}`}
+    >
+      {copied ? '✓' : '⧉'}
+    </button>
+  )
+}

package/apps/web/src/components/CreateGroupDialog.tsx

@@ -0,0 +1,127 @@
+// Quick-create a group from the sidebar's spawn dropdown. POSTs to
+// /api/groups with the current shape: { id, name?, link? }. The daemon
+// puts the slot under ~/.bazilion/groups/<slug>/ — a fresh directory by
+// default, or a symlink to `link` if provided.
+
+import { useRouter } from '@tanstack/react-router'
+import { useState } from 'react'
+
+interface Props {
+  onClose: () => void
+}
+
+export function CreateGroupDialog({ onClose }: Props) {
+  const router = useRouter()
+  const [id, setId] = useState('')
+  const [name, setName] = useState('')
+  const [link, setLink] = useState('')
+  const [busy, setBusy] = useState(false)
+  const [err, setErr] = useState<string | null>(null)
+
+  async function submit(e: React.FormEvent) {
+    e.preventDefault()
+    setErr(null)
+    if (!id.trim()) {
+      setErr('id is required')
+      return
+    }
+    setBusy(true)
+    try {
+      const body: Record<string, unknown> = { id: id.trim() }
+      if (name.trim()) body.name = name.trim()
+      if (link.trim()) body.link = link.trim()
+      const res = await fetch('/api/groups', {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify(body),
+      })
+      if (!res.ok) {
+        const e = (await res.json().catch(() => ({}))) as { error?: string }
+        throw new Error(e.error ?? `${res.status} ${res.statusText}`)
+      }
+      onClose()
+      await router.invalidate()
+    } catch (e) {
+      setErr((e as Error).message)
+      setBusy(false)
+    }
+  }
+
+  return (
+    // biome-ignore lint/a11y/noStaticElementInteractions: backdrop click-to-close is augmentative
+    // biome-ignore lint/a11y/useKeyWithClickEvents: ditto
+    <div
+      onClick={onClose}
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/30 backdrop-blur-[1px]"
+    >
+      <form
+        onSubmit={submit}
+        onClick={(e) => e.stopPropagation()}
+        className="w-full max-w-md rounded-2xl border bg-card p-6 shadow-lg"
+      >
+        <h3 className="font-serif text-xl text-foreground mb-1">Create a new group</h3>
+        <p className="text-sm text-muted-foreground mb-4">
+          A group is a collaboration context — one filesystem root, one USER.md, one roster. The
+          slot lives at <code className="font-mono">~/.bazilion/groups/&lt;slug&gt;/</code>.
+        </p>
+        <div className="grid grid-cols-2 gap-3 mb-3">
+          <label className="block text-sm">
+            ID (slug)
+            <input
+              type="text"
+              value={id}
+              onChange={(e) => setId(e.target.value)}
+              required
+              pattern="[a-z0-9][a-z0-9_-]*"
+              placeholder="myproject"
+              // biome-ignore lint/a11y/noAutofocus: dialog convention
+              autoFocus
+              className="mt-1 block w-full rounded-md border bg-background px-3 py-2 outline-none focus:ring-2 focus:ring-ring/30"
+            />
+          </label>
+          <label className="block text-sm">
+            Name <span className="text-muted-foreground font-normal">(optional)</span>
+            <input
+              type="text"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              className="mt-1 block w-full rounded-md border bg-background px-3 py-2 outline-none focus:ring-2 focus:ring-ring/30"
+            />
+          </label>
+        </div>
+        <label className="block text-sm mb-3">
+          Link target{' '}
+          <span className="text-muted-foreground font-normal">(optional, absolute path)</span>
+          <input
+            type="text"
+            value={link}
+            onChange={(e) => setLink(e.target.value)}
+            placeholder="/home/you/projects/myrepo"
+            className="mt-1 block w-full rounded-md border bg-background px-3 py-2 outline-none focus:ring-2 focus:ring-ring/30"
+          />
+          <span className="mt-1 block text-xs text-muted-foreground">
+            Leave blank to create a fresh directory. Supply an absolute path to materialize the
+            slot as a symlink to your existing project tree.
+          </span>
+        </label>
+        {err && <p className="mt-2 text-sm text-rose-700">{err}</p>}
+        <div className="mt-5 flex justify-end gap-2">
+          <button
+            type="button"
+            onClick={onClose}
+            className="rounded-md border px-3 py-2 text-sm text-foreground hover:bg-accent"
+          >
+            Cancel
+          </button>
+          <button
+            type="submit"
+            disabled={busy}
+            className="rounded-md bg-primary px-3 py-2 text-sm font-medium text-primary-foreground disabled:opacity-50"
+          >
+            {busy ? 'Creating…' : 'Create'}
+          </button>
+        </div>
+      </form>
+    </div>
+  )
+}

package/apps/web/src/components/FieldRow.tsx

@@ -0,0 +1,94 @@
+// Single config field with inline save. Shared between the providers and
+// services pages — both use the same /api/config/fields/:envVar PUT path.
+
+import type { ServiceFieldState } from '@bazilion/api-types'
+import { useRouter } from '@tanstack/react-router'
+import { useState } from 'react'
+
+export function FieldRow({ field }: { field: ServiceFieldState }) {
+  const router = useRouter()
+  const [value, setValue] = useState(field.kind === 'config' ? (field.value ?? '') : '')
+  const [busy, setBusy] = useState(false)
+  const [err, setErr] = useState<string | null>(null)
+  const [savedAt, setSavedAt] = useState<number | null>(null)
+
+  async function save(e: React.FormEvent) {
+    e.preventDefault()
+    setBusy(true)
+    setErr(null)
+    try {
+      const res = await fetch(`/api/config/fields/${encodeURIComponent(field.envVar)}`, {
+        method: 'PUT',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ value }),
+      })
+      if (!res.ok) {
+        const j = (await res.json().catch(() => ({}))) as { error?: string }
+        throw new Error(j.error ?? `${res.status} ${res.statusText}`)
+      }
+      setSavedAt(Date.now())
+      // Secret fields don't echo the value back; clear local state so the
+      // input is empty (and the "set" pill updates via invalidation).
+      if (field.kind === 'secret') setValue('')
+      await router.invalidate()
+    } catch (e) {
+      setErr((e as Error).message)
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  return (
+    <form
+      onSubmit={save}
+      className="grid grid-cols-[12rem_minmax(14rem,1fr)_auto_auto] gap-2 items-center py-2 border-b last:border-0"
+    >
+      <div className="min-w-0">
+        <div className="text-sm">{field.label}</div>
+        <div className="font-mono text-xs text-muted-foreground">{field.envVar}</div>
+        {field.description && (
+          <div className="text-xs text-muted-foreground mt-0.5">{field.description}</div>
+        )}
+      </div>
+      {field.kind === 'config' ? (
+        <input
+          type="text"
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+          placeholder={field.placeholder ?? ''}
+          className="rounded-md border bg-background px-2 py-1.5 text-sm outline-none focus:ring-2 focus:ring-ring/30"
+        />
+      ) : (
+        <input
+          type="password"
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+          placeholder={field.set ? '(replace — blank clears)' : (field.placeholder ?? 'paste key…')}
+          autoComplete="off"
+          className="rounded-md border bg-background px-2 py-1.5 text-sm outline-none focus:ring-2 focus:ring-ring/30"
+        />
+      )}
+      <span className="text-xs">
+        {field.kind === 'secret' && field.set && (
+          <span
+            className="rounded-full bg-emerald-100 text-emerald-800 px-1.5 py-0.5"
+            title={`preview: ${field.preview ?? ''}`}
+          >
+            set
+          </span>
+        )}
+        {savedAt && Date.now() - savedAt < 2000 && (
+          <span className="text-emerald-700 ml-2">saved ✓</span>
+        )}
+      </span>
+      <button
+        type="submit"
+        disabled={busy}
+        className="rounded-md border bg-background px-2 py-1.5 text-xs hover:bg-accent disabled:opacity-50"
+      >
+        save
+      </button>
+      {err && <p className="col-span-4 text-xs text-rose-700">{err}</p>}
+    </form>
+  )
+}

package/apps/web/src/components/Footer.tsx

@@ -0,0 +1,10 @@
+import { PawIcon } from './PawIcon'
+
+export function Footer() {
+  return (
+    <footer className="mt-16 border-t border-frost py-6 text-center text-[0.82em] text-fawn">
+      dedicated to Baziu
+      <PawIcon className="ml-1 inline-block h-3 w-3 align-[-1px] opacity-40" />
+    </footer>
+  )
+}

package/apps/web/src/components/PawIcon.tsx

@@ -0,0 +1,15 @@
+interface PawIconProps {
+  className?: string
+}
+
+export function PawIcon({ className }: PawIconProps) {
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor" className={className} aria-hidden="true">
+      <ellipse cx="7" cy="5" rx="2.2" ry="2.8" />
+      <ellipse cx="17" cy="5" rx="2.2" ry="2.8" />
+      <ellipse cx="3.5" cy="11" rx="2" ry="2.5" />
+      <ellipse cx="20.5" cy="11" rx="2" ry="2.5" />
+      <path d="M12 22c-4.5 0-7.5-3-7.5-6 0-3 2.5-5.5 4.5-7a4 4 0 0 1 6 0c2 1.5 4.5 4 4.5 7 0 3-3 6-7.5 6z" />
+    </svg>
+  )
+}

package/apps/web/src/components/Sidebar.tsx

@@ -0,0 +1,287 @@
+// Left sidebar: collapsible groups + agent rows + spawn dropdown. Each agent
+// row reveals rename (✎) and archive (×) buttons on hover.
+
+import type { Agent, Group, Profile } from '@bazilion/api-types'
+import { Link, useRouter } from '@tanstack/react-router'
+import { useState } from 'react'
+import { DEFAULT_GROUP_ID, DEFAULT_PROFILE_ID } from '../lib/wire-constants'
+import { CreateGroupDialog } from './CreateGroupDialog'
+import { SpawnDialog } from './SpawnDialog'
+
+interface Props {
+  agents: Agent[]
+  groups: Group[]
+  profiles: Profile[]
+  selectedAgentId: string | null
+  /** Per-group open/closed map seeded by SSR from the cookie. */
+  initialOpenGroups?: Record<string, boolean>
+}
+
+// Cookie name shared with the SSR loader in `routes/index.tsx`. Stored as
+// URL-encoded JSON of `Record<string, boolean>` — keys are group IDs, values
+// are the user's explicit open/closed preference. Used over localStorage so
+// the SSR render lands with the correct state and the user never sees a flash
+// of default state before hydration corrects it.
+export const SIDEBAR_OPEN_GROUPS_COOKIE = 'bz_sidebar_open_groups'
+
+function writeOpenGroupsCookie(map: Record<string, boolean>): void {
+  if (typeof document === 'undefined') return
+  const value = encodeURIComponent(JSON.stringify(map))
+  // 1-year retention, Path=/ so every route sees it, Lax for default safety.
+  document.cookie = `${SIDEBAR_OPEN_GROUPS_COOKIE}=${value}; Path=/; Max-Age=31536000; SameSite=Lax`
+}
+
+export function Sidebar({
+  agents,
+  groups,
+  profiles,
+  selectedAgentId,
+  initialOpenGroups,
+}: Props) {
+  const router = useRouter()
+  const [spawnFor, setSpawnFor] = useState<{ profileId: string; groupHint?: string } | null>(null)
+  const [createGroupOpen, setCreateGroupOpen] = useState(false)
+  const [menuOpen, setMenuOpen] = useState(false)
+  // Seeded by SSR from the cookie so the first paint matches the user's
+  // saved preferences — no flash of default state.
+  const [openGroups, setOpenGroups] = useState<Record<string, boolean>>(
+    () => initialOpenGroups ?? {},
+  )
+
+  async function rename(a: Agent) {
+    const next = window.prompt(`rename "${a.name}" to:`, a.name)?.trim()
+    if (!next || next === a.name) return
+    const res = await fetch(`/api/agents/${a.id}`, {
+      method: 'PATCH',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({ name: next }),
+    })
+    if (!res.ok) {
+      const body = (await res.json().catch(() => null)) as { error?: string } | null
+      alert(body?.error ?? res.statusText)
+      return
+    }
+    await router.invalidate()
+  }
+  async function archive(a: Agent) {
+    if (!confirm(`archive "${a.name}"? (reversible — find under "show archived")`)) return
+    const res = await fetch(`/api/agents/${a.id}/archive`, { method: 'POST' })
+    if (!res.ok && res.status !== 204) {
+      alert(res.statusText)
+      return
+    }
+    await router.invalidate()
+  }
+
+  // Float the seeded `default` profile + group to the top so new users land
+  // on the one-click spawn path.
+  const sortedProfiles = [...profiles].sort((a, b) => {
+    if (a.id === DEFAULT_PROFILE_ID) return -1
+    if (b.id === DEFAULT_PROFILE_ID) return 1
+    return 0
+  })
+  const sortedGroups = [...groups].sort((a, b) => {
+    if (a.id === DEFAULT_GROUP_ID) return -1
+    if (b.id === DEFAULT_GROUP_ID) return 1
+    return 0
+  })
+  const agentsByGroup = new Map<string, Agent[]>()
+  for (const a of agents) {
+    const list = agentsByGroup.get(a.groupId) ?? []
+    list.push(a)
+    agentsByGroup.set(a.groupId, list)
+  }
+
+  const selectedGroupId = agents.find((a) => a.id === selectedAgentId)?.groupId ?? null
+
+  return (
+    <aside className="flex h-full flex-col rounded-lg border bg-card overflow-hidden">
+      <header className="flex items-center justify-between border-b px-3 py-2.5 bg-muted/30">
+        <span className="font-serif text-base text-foreground">agents</span>
+        <div className="relative">
+          <button
+            type="button"
+            onClick={() => setMenuOpen((v) => !v)}
+            className="rounded-md border px-2 py-1 text-xs text-muted-foreground hover:text-foreground hover:border-foreground/30"
+          >
+            + new ▾
+          </button>
+          {menuOpen && (
+            <div
+              role="menu"
+              className="absolute right-0 top-[calc(100%+0.3rem)] z-20 min-w-[12rem] rounded-md border bg-popover p-1 shadow-md"
+              onMouseLeave={() => setMenuOpen(false)}
+            >
+              {profiles.length === 0 ? (
+                <div className="px-3 py-2 text-sm text-muted-foreground">
+                  No profiles yet.
+                  <br />
+                  <a href="/profiles" className="text-primary underline">
+                    Create one
+                  </a>{' '}
+                  to spawn agents.
+                </div>
+              ) : (
+                <>
+                  <div className="px-3 pt-1 pb-0.5 text-[0.7em] uppercase tracking-wide text-muted-foreground">
+                    spawn from profile
+                  </div>
+                  {sortedProfiles.map((p) => (
+                    <button
+                      key={p.id}
+                      type="button"
+                      role="menuitem"
+                      onClick={() => {
+                        setMenuOpen(false)
+                        setSpawnFor({ profileId: p.id })
+                      }}
+                      className="flex w-full items-center justify-between rounded-sm px-3 py-1.5 text-sm hover:bg-accent"
+                    >
+                      <span>{p.name || p.id}</span>
+                      {p.id === DEFAULT_PROFILE_ID && (
+                        <span className="rounded bg-muted px-1 text-[0.7em] text-muted-foreground">
+                          default
+                        </span>
+                      )}
+                    </button>
+                  ))}
+                </>
+              )}
+              <div className="my-1 h-px bg-border" />
+              <button
+                type="button"
+                onClick={() => {
+                  setMenuOpen(false)
+                  setCreateGroupOpen(true)
+                }}
+                className="block w-full text-left rounded-sm px-3 py-1.5 text-xs text-muted-foreground hover:bg-accent"
+              >
+                + create group
+              </button>
+              <a
+                href="/agents"
+                className="block rounded-sm px-3 py-1.5 text-xs text-muted-foreground hover:bg-accent"
+              >
+                manage agents →
+              </a>
+              <a
+                href="/groups"
+                className="block rounded-sm px-3 py-1.5 text-xs text-muted-foreground hover:bg-accent"
+              >
+                manage groups →
+              </a>
+            </div>
+          )}
+        </div>
+      </header>
+
+      <nav className="flex-1 overflow-y-auto p-1">
+        {agents.length === 0 && groups.length === 0 ? (
+          <div className="p-4 text-sm text-muted-foreground">
+            No agents yet.{' '}
+            <a href="/agents" className="text-primary underline">
+              Spawn one
+            </a>{' '}
+            to start chatting.
+          </div>
+        ) : (
+          sortedGroups.map((g) => {
+            const groupAgents = agentsByGroup.get(g.id) ?? []
+            const containsSelected = selectedGroupId === g.id
+            // Explicit user preference wins; otherwise fall back to the
+            // "auto-open if selected or the seeded default group" heuristic.
+            const stored = openGroups[g.id]
+            const isOpen =
+              stored !== undefined ? stored : containsSelected || g.id === DEFAULT_GROUP_ID
+            return (
+              <details
+                key={g.id}
+                open={isOpen}
+                onToggle={(e) => {
+                  const next = (e.currentTarget as HTMLDetailsElement).open
+                  if (openGroups[g.id] === next) return
+                  const merged = { ...openGroups, [g.id]: next }
+                  // Write the cookie synchronously BEFORE setState so any
+                  // subsequent navigation/loader-fetch in the same tick sees
+                  // the new value, and invalidate the route so TanStack
+                  // Router's cached loader data refreshes from the cookie.
+                  writeOpenGroupsCookie(merged)
+                  setOpenGroups(merged)
+                  void router.invalidate()
+                }}
+                className="group/details mb-1 last:mb-0"
+              >
+                <summary className="flex cursor-pointer list-none items-center gap-1.5 rounded-sm px-2 py-1.5 text-xs uppercase tracking-wide text-muted-foreground hover:bg-accent">
+                  <span className="w-3 text-xs transition-transform group-open/details:rotate-90 inline-block">
+                    ▸
+                  </span>
+                  <span className="flex-1 truncate font-semibold">{g.name}</span>
+                  <span className="font-mono text-xs rounded bg-muted px-1 min-w-[1.4em] text-center">
+                    {groupAgents.length}
+                  </span>
+                </summary>
+                {groupAgents.length === 0 ? (
+                  <div className="pl-6 py-1 text-xs italic text-muted-foreground">
+                    no agents
+                  </div>
+                ) : (
+                  <div className="pl-2">
+                    {groupAgents.map((a) => (
+                      <div key={a.id} className="group/row relative">
+                        <Link
+                          to="/"
+                          search={{ agent: a.id }}
+                          className={`block rounded-sm border-l-2 px-3 py-1.5 pr-14 hover:bg-accent ${
+                            a.id === selectedAgentId
+                              ? 'border-primary bg-accent'
+                              : 'border-transparent'
+                          }`}
+                        >
+                          <div className="truncate text-sm font-medium">{a.name}</div>
+                          <div className="flex gap-2 font-mono text-[0.7em] text-muted-foreground">
+                            <span className="uppercase tracking-wide">{a.status}</span>
+                            <code>{a.id.slice(0, 8)}</code>
+                          </div>
+                        </Link>
+                        <div className="absolute right-1 top-1 flex gap-0.5 opacity-0 transition-opacity group-hover/row:opacity-100 focus-within:opacity-100">
+                          <button
+                            type="button"
+                            onClick={() => rename(a)}
+                            title="rename"
+                            aria-label={`rename ${a.name}`}
+                            className="unstyled flex h-6 w-6 items-center justify-center rounded-sm text-mocha-light hover:bg-snow hover:text-sapphire"
+                          >
+                            ✎
+                          </button>
+                          <button
+                            type="button"
+                            onClick={() => archive(a)}
+                            title="archive"
+                            aria-label={`archive ${a.name}`}
+                            className="unstyled flex h-6 w-6 items-center justify-center rounded-sm text-mocha-light hover:bg-snow hover:text-[#9B3D3D]"
+                          >
+                            ×
+                          </button>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </details>
+            )
+          })
+        )}
+      </nav>
+
+      {spawnFor && (
+        <SpawnDialog
+          profileId={spawnFor.profileId}
+          groupHint={spawnFor.groupHint}
+          groups={sortedGroups}
+          onClose={() => setSpawnFor(null)}
+        />
+      )}
+      {createGroupOpen && <CreateGroupDialog onClose={() => setCreateGroupOpen(false)} />}
+    </aside>
+  )
+}