bazilion 0.0.0

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

@@ -0,0 +1,133 @@
+import { ApiClientError } from '@bazilion/client'
+import type {
+  Agent,
+  Group,
+  Profile,
+  ProviderMessage,
+  ResolvedAgent,
+  SessionHeadResponse,
+} from '@bazilion/api-types'
+import { createFileRoute } from '@tanstack/react-router'
+import { createServerFn } from '@tanstack/react-start'
+import { getCookie } from '@tanstack/react-start/server'
+import { ChatPane } from '../components/ChatPane'
+import { Sidebar, SIDEBAR_OPEN_GROUPS_COOKIE } from '../components/Sidebar'
+import { daemonClient } from '../lib/daemon-client'
+
+interface SelectedView {
+  resolved: ResolvedAgent
+  initialMessages: ProviderMessage[]
+  sessionHead: SessionHeadResponse
+}
+
+interface HomeData {
+  agents: Agent[]
+  profiles: Profile[]
+  groups: Group[]
+  selected: SelectedView | null
+  initialOpenGroups: Record<string, boolean>
+}
+
+// Pure parser so the rule lives next to the cookie name. getCookie may or may
+// not URL-decode depending on the harness; handle either form defensively.
+function parseOpenGroupsCookie(raw: string | undefined | null): Record<string, boolean> {
+  if (!raw) return {}
+  try {
+    const decoded = raw.includes('%') ? decodeURIComponent(raw) : raw
+    const parsed = JSON.parse(decoded) as unknown
+    if (parsed && typeof parsed === 'object' && !Array.isArray(parsed)) {
+      const out: Record<string, boolean> = {}
+      for (const [k, v] of Object.entries(parsed as Record<string, unknown>)) {
+        if (typeof v === 'boolean') out[k] = v
+      }
+      return out
+    }
+  } catch {
+    // bad cookie value — fall through to {}
+  }
+  return {}
+}
+
+// POST so we can pass a typed input via `.inputValidator()`. The call site
+// is server-internal so the HTTP verb is invisible to the user.
+const fetchHomeData = createServerFn({ method: 'POST' })
+  .inputValidator((d: { agentId?: string }) => d)
+  .handler(async ({ data }): Promise<HomeData> => {
+    const client = daemonClient()
+    const [agents, profiles, groups] = await Promise.all([
+      client.get<Agent[]>('/api/agents?includeArchived=false'),
+      client.get<Profile[]>('/api/profiles'),
+      client.get<Group[]>('/api/groups'),
+    ])
+
+    const initialOpenGroups = parseOpenGroupsCookie(getCookie(SIDEBAR_OPEN_GROUPS_COOKIE))
+
+    let selected: SelectedView | null = null
+    if (data.agentId) {
+      try {
+        const resolved = await client.get<ResolvedAgent>(
+          `/api/agents/${encodeURIComponent(data.agentId)}`,
+        )
+        const [msgs, head] = await Promise.all([
+          client.get<{ messages: ProviderMessage[] }>(
+            `/api/agents/${encodeURIComponent(resolved.agent.id)}/sessions/messages`,
+          ),
+          client.get<SessionHeadResponse>(
+            `/api/agents/${encodeURIComponent(resolved.agent.id)}/sessions/head`,
+          ),
+        ])
+        selected = {
+          resolved,
+          initialMessages: msgs.messages,
+          sessionHead: head,
+        }
+      } catch (err) {
+        // 404 = bad ?agent= id. Drop the selection silently and render the
+        // empty pane; surface other errors so the user sees them.
+        if (!(err instanceof ApiClientError) || err.status !== 404) throw err
+      }
+    }
+    return { agents, profiles, groups, selected, initialOpenGroups }
+  })
+
+export const Route = createFileRoute('/')({
+  validateSearch: (s: Record<string, unknown>): { agent?: string } => ({
+    agent: typeof s.agent === 'string' ? s.agent : undefined,
+  }),
+  loaderDeps: ({ search }) => ({ agentId: search.agent }),
+  loader: ({ deps }) => fetchHomeData({ data: { agentId: deps.agentId } }),
+  component: HomePage,
+})
+
+function HomePage() {
+  const data = Route.useLoaderData()
+  const selectedAgentId = data.selected?.resolved.agent.id ?? null
+
+  return (
+    <div className="grid h-full grid-cols-1 gap-3 py-3 sm:grid-cols-[16rem_minmax(0,1fr)]">
+      <Sidebar
+        agents={data.agents}
+        groups={data.groups}
+        profiles={data.profiles}
+        selectedAgentId={selectedAgentId}
+        initialOpenGroups={data.initialOpenGroups}
+      />
+      <main className="overflow-hidden">
+        {data.selected ? (
+          <ChatPane
+            agentId={data.selected.resolved.agent.id}
+            agentName={data.selected.resolved.agent.name}
+            initialMessages={data.selected.initialMessages}
+            initialSessionHead={data.selected.sessionHead}
+          />
+        ) : (
+          <div className="flex h-full items-center justify-center rounded-lg border border-dashed bg-card text-muted-foreground">
+            {data.agents.length === 0
+              ? 'No agents yet.'
+              : 'Pick an agent on the left to start chatting.'}
+          </div>
+        )}
+      </main>
+    </div>
+  )
+}

package/apps/web/src/routes/login.tsx

@@ -0,0 +1,63 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { BaziuLogo } from '../components/BaziuLogo'
+import { PawIcon } from '../components/PawIcon'
+
+export const Route = createFileRoute('/login')({
+  // Optional `?error=1` from a failed POST /api/login redirect — daemon sends
+  // the user back here when the form token is invalid. We type it as fully
+  // optional so the redirect from the root middleware doesn't have to pass a
+  // search object.
+  validateSearch: (search: Record<string, unknown>): { error?: '1' } => ({
+    error: search.error === '1' ? '1' : undefined,
+  }),
+  component: LoginPage,
+})
+
+function LoginPage() {
+  const { error } = Route.useSearch()
+  return (
+    <main className="relative flex min-h-dvh items-center justify-center bg-cream">
+      {/* Soft radial glows — Baziu's signature warmth on the auth shell. */}
+      <div
+        aria-hidden="true"
+        className="pointer-events-none absolute inset-0"
+        style={{
+          background:
+            'radial-gradient(circle at 20% 15%, rgba(74,124,155,0.12), transparent 55%), radial-gradient(circle at 80% 85%, rgba(196,135,138,0.10), transparent 55%)',
+        }}
+      />
+      <div className="relative w-full max-w-sm rounded-[16px] border border-frost bg-snow p-8 text-center shadow-baziu-md">
+        <BaziuLogo className="mx-auto mb-3 h-16 w-16" />
+        <h1 className="font-display text-[2rem] tracking-tight text-charcoal">bazilion</h1>
+        {error && <div className="err mt-4">invalid token</div>}
+        <form method="POST" action="/api/login" className="mt-6 text-left">
+          <label htmlFor="token" className="block text-[0.85em] font-medium text-mocha">
+            Token
+          </label>
+          <input
+            type="password"
+            id="token"
+            name="token"
+            // biome-ignore lint/a11y/noAutofocus: a single-input login page is the canonical case for autofocus.
+            autoFocus
+            required
+            placeholder="paste from auth.json"
+            className="mb-5"
+          />
+          <button type="submit" className="w-full">
+            log in
+          </button>
+        </form>
+        <p className="mt-5 text-[0.78em] leading-relaxed text-mocha-light">
+          Your token is in <code>~/.bazilion/auth.json</code>
+          <br />
+          created on first <code>bazilion serve</code>
+        </p>
+      </div>
+      <footer className="absolute bottom-4 left-0 right-0 text-center text-[0.78em] text-fawn">
+        dedicated to Baziu
+        <PawIcon className="ml-1 inline-block h-3 w-3 align-[-1px] opacity-40" />
+      </footer>
+    </main>
+  )
+}