bazilion 0.0.0

package/apps/web/src/routes/profiles/$id.tsx

@@ -0,0 +1,549 @@
+import { ApiClientError } from '@bazilion/client'
+import type { LoadedProfile, SkillInfo } 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 ModelGroup {
+  provider: string
+  models: string[]
+}
+interface AvailableModelsResponse {
+  groups: ModelGroup[]
+}
+
+interface ProfileDetailView {
+  loaded: LoadedProfile
+  modelGroups: ModelGroup[]
+  skills: SkillInfo[]
+}
+
+const fetchProfile = createServerFn({ method: 'POST' })
+  .inputValidator((d: { id: string }) => d)
+  .handler(async ({ data }): Promise<ProfileDetailView | null> => {
+    const c = daemonClient()
+    let loaded: LoadedProfile
+    try {
+      loaded = await c.get<LoadedProfile>(`/api/profiles/${encodeURIComponent(data.id)}`)
+    } catch (err) {
+      if (err instanceof ApiClientError && err.status === 404) return null
+      throw err
+    }
+    const [models, skills] = await Promise.all([
+      c.get<AvailableModelsResponse>('/api/config/available-models'),
+      c.get<SkillInfo[]>('/api/skills'),
+    ])
+    return { loaded, modelGroups: models.groups, skills }
+  })
+
+export const Route = createFileRoute('/profiles/$id')({
+  loader: async ({ params }) => {
+    const data = await fetchProfile({ data: { id: params.id } })
+    if (!data) throw redirect({ to: '/profiles' })
+    return data
+  },
+  component: ProfileDetailPage,
+})
+
+function ProfileDetailPage() {
+  const { loaded, modelGroups, skills } = Route.useLoaderData()
+  const [tab, setTab] = useState<'basics' | 'skills'>('basics')
+
+  return (
+    <div>
+      <header className="mb-1">
+        <a
+          href="/profiles"
+          className="mb-1 inline-block text-[0.85em] text-mocha-light hover:text-sapphire"
+        >
+          ← profiles
+        </a>
+        <h1>{loaded.profile.name}</h1>
+        <div className="mt-1 flex flex-wrap items-center gap-2 text-[0.9em] text-mocha-light">
+          <code>{loaded.profile.id}</code>
+          <span>·</span>
+          <span>
+            model: <code>{loaded.profile.defaultModel}</code>
+          </span>
+        </div>
+      </header>
+
+      <p className="muted my-6">
+        These settings and files seed every agent spawned from this profile going forward.{' '}
+        <strong>Existing agents keep their own copies</strong> — edits here don't propagate to
+        already-spawned agents.
+      </p>
+
+      <Tabs
+        items={[
+          { id: 'basics', label: '1. basics' },
+          { id: 'skills', label: '2. skills' },
+        ]}
+        active={tab}
+        onChange={(t) => setTab(t as 'basics' | 'skills')}
+      />
+
+      {tab === 'basics' && (
+        <div>
+          <SettingsCard
+            profileId={loaded.profile.id}
+            initialName={loaded.profile.name}
+            currentModel={loaded.profile.defaultModel}
+            modelGroups={modelGroups}
+          />
+          <FileCard profileId={loaded.profile.id} file="SOUL.md" initialContent={loaded.files.soul} rows={14} />
+          <FileCard
+            profileId={loaded.profile.id}
+            file="IDENTITY.md"
+            initialContent={loaded.files.identity}
+            rows={10}
+          />
+          {loaded.files.bootstrap === null ? (
+            <section className="file-card">
+              <div className="file-head">
+                <h3>BOOTSTRAP.md</h3>
+              </div>
+              <p className="muted">
+                This profile was created without a bootstrap prompt. Spawned agents won't see a
+                first-run intro message.
+              </p>
+            </section>
+          ) : (
+            <FileCard
+              profileId={loaded.profile.id}
+              file="BOOTSTRAP.md"
+              initialContent={loaded.files.bootstrap}
+              rows={10}
+            />
+          )}
+          <OptionalFileCard
+            profileId={loaded.profile.id}
+            file="AGENTS.md"
+            initialContent={loaded.files.agents}
+            hint="Peers and routing notes — who this agent can hand off to."
+          />
+          <OptionalFileCard
+            profileId={loaded.profile.id}
+            file="TOOLS.md"
+            initialContent={loaded.files.tools}
+            hint="Tool playbook. Agent-specific usage notes that go beyond the generic tool descriptions."
+          />
+          <OptionalFileCard
+            profileId={loaded.profile.id}
+            file="HEARTBEAT.md"
+            initialContent={loaded.files.heartbeat}
+            hint="Tasks the agent should check on scheduled wake-ups. Pair with a trigger whose message is the canned heartbeat prompt."
+          />
+        </div>
+      )}
+
+      {tab === 'skills' && (
+        <SkillsCard
+          profileId={loaded.profile.id}
+          initialMode={loaded.profile.skillsMode}
+          initialPicked={new Set(loaded.defaultSkills)}
+          skills={skills}
+        />
+      )}
+    </div>
+  )
+}
+
+interface TabsProps<T extends string> {
+  items: { id: T; label: string }[]
+  active: T
+  onChange: (id: T) => void
+}
+function Tabs<T extends string>({ items, active, onChange }: TabsProps<T>) {
+  return (
+    <nav
+      role="tablist"
+      className="-mb-px mb-5 flex gap-1 border-b border-frost"
+    >
+      {items.map((it) => (
+        <button
+          key={it.id}
+          type="button"
+          role="tab"
+          aria-selected={active === it.id}
+          onClick={() => onChange(it.id)}
+          className={`unstyled cursor-pointer border-b-2 bg-transparent px-4 py-2 text-[0.9em] font-medium transition-colors ${
+            active === it.id
+              ? 'border-sapphire text-sapphire'
+              : 'border-transparent text-mocha hover:text-sapphire'
+          }`}
+        >
+          {it.label}
+        </button>
+      ))}
+    </nav>
+  )
+}
+
+type StatusKind = 'idle' | 'dirty' | 'saving' | 'saved' | 'error'
+interface StatusState {
+  kind: StatusKind
+  message: string
+}
+function statusColor(kind: StatusKind) {
+  if (kind === 'saved') return 'text-sapphire'
+  if (kind === 'error') return 'text-[#9B3D3D]'
+  if (kind === 'dirty') return 'text-mocha'
+  return 'text-mocha-light'
+}
+
+function FileCardShell({
+  title,
+  status,
+  children,
+}: {
+  title: string
+  status?: StatusState
+  children: React.ReactNode
+}) {
+  return (
+    <section className="file-card mb-5 rounded-[16px] border border-frost bg-snow p-5 shadow-baziu-sm">
+      <div className="mb-2 flex items-baseline justify-between">
+        <h3 className="m-0 font-mono text-[0.95em] font-semibold normal-case tracking-normal text-chocolate">
+          {title}
+        </h3>
+        {status && (
+          <span className={`text-[0.82em] ${statusColor(status.kind)}`}>{status.message}</span>
+        )}
+      </div>
+      {children}
+    </section>
+  )
+}
+
+function FileCard({
+  profileId,
+  file,
+  initialContent,
+  rows = 10,
+}: {
+  profileId: string
+  file: string
+  initialContent: string
+  rows?: number
+}) {
+  const [original, setOriginal] = useState(initialContent)
+  const [content, setContent] = useState(initialContent)
+  const [status, setStatus] = useState<StatusState>({ kind: 'idle', message: '' })
+  const dirty = content !== original
+  const display: StatusState = dirty && status.kind !== 'saving' && status.kind !== 'error'
+    ? { kind: 'dirty', message: 'unsaved changes' }
+    : status
+
+  async function save() {
+    setStatus({ kind: 'saving', message: 'saving…' })
+    try {
+      const res = await fetch(
+        `/api/profiles/${encodeURIComponent(profileId)}/files/${encodeURIComponent(file)}`,
+        {
+          method: 'PUT',
+          headers: { 'content-type': 'application/json' },
+          body: JSON.stringify({ content }),
+        },
+      )
+      if (!res.ok && res.status !== 204) {
+        const e = (await res.json().catch(() => null)) as { error?: string } | null
+        throw new Error(e?.error ?? res.statusText)
+      }
+      setOriginal(content)
+      setStatus({ kind: 'saved', message: 'saved' })
+    } catch (err) {
+      setStatus({ kind: 'error', message: `error: ${(err as Error).message}` })
+    }
+  }
+  function revert() {
+    setContent(original)
+    setStatus({ kind: 'idle', message: '' })
+  }
+
+  return (
+    <FileCardShell title={file} status={display}>
+      <textarea
+        rows={rows}
+        value={content}
+        onChange={(e) => setContent(e.target.value)}
+        className="font-mono text-[0.88em] leading-[1.55]"
+      />
+      <div className="mt-3 flex gap-2">
+        <button
+          type="button"
+          className="btn-primary"
+          onClick={save}
+          disabled={status.kind === 'saving'}
+        >
+          save
+        </button>
+        <button type="button" className="ghost-btn" onClick={revert}>
+          revert
+        </button>
+      </div>
+    </FileCardShell>
+  )
+}
+
+function OptionalFileCard({
+  profileId,
+  file,
+  initialContent,
+  hint,
+}: {
+  profileId: string
+  file: string
+  initialContent: string | null
+  hint: string
+}) {
+  const router = useRouter()
+  const [creating, setCreating] = useState(false)
+  const [status, setStatus] = useState<StatusState>({ kind: 'idle', message: '' })
+
+  async function createEmpty() {
+    setCreating(true)
+    setStatus({ kind: 'saving', message: 'creating…' })
+    try {
+      const res = await fetch(
+        `/api/profiles/${encodeURIComponent(profileId)}/files/${encodeURIComponent(file)}`,
+        {
+          method: 'PUT',
+          headers: { 'content-type': 'application/json' },
+          body: JSON.stringify({ content: '' }),
+        },
+      )
+      if (!res.ok && res.status !== 204) {
+        const e = (await res.json().catch(() => null)) as { error?: string } | null
+        throw new Error(e?.error ?? res.statusText)
+      }
+      await router.invalidate()
+    } catch (err) {
+      setStatus({ kind: 'error', message: `error: ${(err as Error).message}` })
+      setCreating(false)
+    }
+  }
+
+  if (initialContent === null) {
+    return (
+      <FileCardShell title={file} status={status}>
+        <p className="muted my-1">{hint}</p>
+        <div className="mt-3 flex gap-2">
+          <button
+            type="button"
+            className="btn-primary"
+            onClick={createEmpty}
+            disabled={creating}
+          >
+            {creating ? 'creating…' : 'create empty'}
+          </button>
+        </div>
+      </FileCardShell>
+    )
+  }
+  return (
+    <>
+      <p className="muted -mb-3 ml-1 mt-2 text-[0.85em]">{hint}</p>
+      <FileCard profileId={profileId} file={file} initialContent={initialContent} rows={10} />
+    </>
+  )
+}
+
+function SettingsCard({
+  profileId,
+  initialName,
+  currentModel,
+  modelGroups,
+}: {
+  profileId: string
+  initialName: string
+  currentModel: string
+  modelGroups: ModelGroup[]
+}) {
+  const router = useRouter()
+  const [name, setName] = useState(initialName)
+  const [defaultModel, setDefaultModel] = useState(currentModel)
+  const [status, setStatus] = useState<StatusState>({ kind: 'idle', message: '' })
+
+  const modelValues = modelGroups.flatMap((g) => g.models.map((m) => `${g.provider}:${m}`))
+  const modelMissing = !modelValues.includes(currentModel)
+
+  async function save(e: React.FormEvent<HTMLFormElement>) {
+    e.preventDefault()
+    setStatus({ kind: 'saving', message: 'saving…' })
+    try {
+      const res = await fetch(`/api/profiles/${encodeURIComponent(profileId)}`, {
+        method: 'PATCH',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ name: name.trim(), defaultModel: defaultModel.trim() }),
+      })
+      if (!res.ok) {
+        const e2 = (await res.json().catch(() => null)) as { error?: string } | null
+        throw new Error(e2?.error ?? res.statusText)
+      }
+      await router.invalidate()
+      setStatus({ kind: 'saved', message: 'saved' })
+    } catch (err) {
+      setStatus({ kind: 'error', message: `error: ${(err as Error).message}` })
+    }
+  }
+
+  return (
+    <FileCardShell title="settings" status={status}>
+      <form onSubmit={save}>
+        <div className="flex gap-4">
+          <label className="flex-1">
+            name
+            <input value={name} onChange={(e) => setName(e.target.value)} />
+          </label>
+          <label className="flex-1">
+            default model
+            {modelGroups.length === 0 ? (
+              <select disabled>
+                <option>(no models available — enable on /config)</option>
+              </select>
+            ) : (
+              <select
+                value={defaultModel}
+                onChange={(e) => setDefaultModel(e.target.value)}
+              >
+                {modelMissing && (
+                  <option value={currentModel}>{currentModel} (not in enabled list)</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>
+        </div>
+        <div className="mt-3 flex gap-2">
+          <button type="submit" disabled={status.kind === 'saving'}>
+            save settings
+          </button>
+        </div>
+      </form>
+    </FileCardShell>
+  )
+}
+
+function SkillsCard({
+  profileId,
+  initialMode,
+  initialPicked,
+  skills,
+}: {
+  profileId: string
+  initialMode: 'all' | 'selected'
+  initialPicked: Set<string>
+  skills: SkillInfo[]
+}) {
+  const router = useRouter()
+  const [mode, setMode] = useState<'all' | 'selected'>(initialMode)
+  const [picked, setPicked] = useState<Set<string>>(initialPicked)
+  const [status, setStatus] = useState<StatusState>({ kind: 'idle', message: '' })
+
+  function toggle(name: string) {
+    setPicked((prev) => {
+      const next = new Set(prev)
+      if (next.has(name)) next.delete(name)
+      else next.add(name)
+      return next
+    })
+  }
+
+  async function save(e: React.FormEvent<HTMLFormElement>) {
+    e.preventDefault()
+    setStatus({ kind: 'saving', message: 'saving…' })
+    try {
+      const res = await fetch(`/api/profiles/${encodeURIComponent(profileId)}`, {
+        method: 'PATCH',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({
+          skillsMode: mode,
+          defaultSkills: mode === 'selected' ? Array.from(picked) : [],
+        }),
+      })
+      if (!res.ok) {
+        const e2 = (await res.json().catch(() => null)) as { error?: string } | null
+        throw new Error(e2?.error ?? res.statusText)
+      }
+      // Refetch the loader so the parent's `loaded.defaultSkills` reflects
+      // what we just saved. Without this, switching tabs unmounts SkillsCard
+      // and remounts it with the stale `initialPicked` snapshot — the save
+      // looks like it was lost even though the backend persisted it.
+      await router.invalidate()
+      setStatus({ kind: 'saved', message: 'saved' })
+    } catch (err) {
+      setStatus({ kind: 'error', message: `error: ${(err as Error).message}` })
+    }
+  }
+
+  return (
+    <FileCardShell title="skills" status={status}>
+      <p className="muted my-2">
+        Choose what agents spawned from this profile inherit. Existing agents aren't affected
+        — they keep whatever skills they were spawned with.
+      </p>
+      <form onSubmit={save}>
+        <label className="my-2 flex cursor-pointer items-start gap-2">
+          <input
+            type="radio"
+            checked={mode === 'all'}
+            onChange={() => setMode('all')}
+          />
+          <span>
+            <strong>allow all skills</strong> — every skill on disk is attached at spawn.
+          </span>
+        </label>
+        <label className="my-2 flex cursor-pointer items-start gap-2">
+          <input
+            type="radio"
+            checked={mode === 'selected'}
+            onChange={() => setMode('selected')}
+          />
+          <span>
+            <strong>select skills</strong> — attach only the ones ticked below.
+          </span>
+        </label>
+        <div
+          className={`mt-3 max-h-[22rem] overflow-y-auto rounded-md border border-frost p-3 ${mode === 'all' ? 'pointer-events-none opacity-50' : ''}`}
+        >
+          {skills.length === 0 ? (
+            <p className="muted">
+              No skills installed yet. Import some on <a href="/skills">/skills</a>.
+            </p>
+          ) : (
+            skills.map((s) => (
+              <label key={s.name} className="my-1.5 flex cursor-pointer items-start gap-2">
+                <input
+                  type="checkbox"
+                  checked={picked.has(s.name)}
+                  onChange={() => toggle(s.name)}
+                />
+                <span>
+                  <code>{s.name}</code>
+                  {s.description && (
+                    <span className="text-[0.9em] text-mocha-light"> — {s.description}</span>
+                  )}
+                </span>
+              </label>
+            ))
+          )}
+        </div>
+        <div className="mt-3 flex gap-2">
+          <button type="submit" disabled={status.kind === 'saving'}>
+            save skills
+          </button>
+        </div>
+      </form>
+    </FileCardShell>
+  )
+}