crema-app-aifirst-template/app/routes/settings.tsx

import { useEffect, useState } from "react"
import {
  Check,
  X,
  Loader2,
  Cpu,
  Palette,
  User as UserIcon,
  Info,
  Users,
  Plus,
  Trash2,
} from "lucide-react"
import { listModels } from "@crema/llm-ui"

import { AppShell } from "~/components/layout/app-shell"
import { Button } from "~/components/ui/button"
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "~/components/ui/card"
import { Input } from "~/components/ui/input"
import { Textarea } from "~/components/ui/textarea"
import {
  DEFAULT_SETTINGS,
  DEFAULT_SYSTEM_PROMPT,
  saveLLMSettings,
  useLLMSettings,
  type LLMSettings,
} from "~/lib/llm-settings"
import {
  loadActiveAgentId,
  newAgentId,
  resetAgents,
  saveActiveAgentId,
  saveAgents,
  useAgents,
  type Agent,
} from "~/lib/agents"
import { pageTitle } from "~/lib/page-meta"

export const meta = () => pageTitle("Settings")

const SECTION_KEY = "crema.settings.section"

type SectionId = "llm" | "agents" | "appearance" | "account" | "about"

const sections: {
  id: SectionId
  label: string
  icon: React.ComponentType<{ className?: string }>
  description: string
}[] = [
  { id: "llm", label: "LLM", icon: Cpu, description: "Model endpoint & budgets" },
  {
    id: "agents",
    label: "Agents",
    icon: Users,
    description: "Personas, roles, sub-prompts",
  },
  {
    id: "appearance",
    label: "Appearance",
    icon: Palette,
    description: "Theme, font size, surface, background",
  },
  { id: "account", label: "Account", icon: UserIcon, description: "Profile & preferences" },
  { id: "about", label: "About", icon: Info, description: "Version & credits" },
]

type TestState =
  | { kind: "idle" }
  | { kind: "running" }
  | { kind: "ok"; count: number }
  | { kind: "fail"; reason: string }

export default function SettingsRoute() {
  const settings = useLLMSettings()
  const [draft, setDraft] = useState<LLMSettings>(settings)
  const [savedAt, setSavedAt] = useState<number | null>(null)
  const [test, setTest] = useState<TestState>({ kind: "idle" })

  useEffect(() => {
    setDraft(settings)
  }, [settings])

  const runTest = async () => {
    setTest({ kind: "running" })
    const ac = new AbortController()
    const timeout = setTimeout(() => ac.abort(), 4000)
    try {
      const rows = await listModels({ baseURL: draft.baseURL, signal: ac.signal })
      setTest({ kind: "ok", count: rows.length })
    } catch (e) {
      setTest({
        kind: "fail",
        reason: e instanceof Error ? e.message : String(e),
      })
    } finally {
      clearTimeout(timeout)
    }
  }

  const dirty =
    draft.baseURL !== settings.baseURL ||
    draft.contextTokens !== settings.contextTokens ||
    draft.responseBudget !== settings.responseBudget

  const save = () => {
    saveLLMSettings(draft)
    setSavedAt(Date.now())
  }

  const reset = () => {
    setDraft(DEFAULT_SETTINGS)
  }

  const [section, setSection] = useState<SectionId>(() => {
    if (typeof window === "undefined") return "llm"
    const stored = localStorage.getItem(SECTION_KEY)
    return sections.some((s) => s.id === stored)
      ? (stored as SectionId)
      : "llm"
  })
  useEffect(() => {
    if (typeof window !== "undefined")
      localStorage.setItem(SECTION_KEY, section)
  }, [section])

  return (
    <AppShell title="Settings">
      <div className="grid gap-6 md:grid-cols-[14rem_1fr]">
        <nav
          aria-label="Settings sections"
          className="flex flex-row gap-1 overflow-x-auto md:flex-col md:gap-0.5"
        >
          {sections.map((s) => {
            const Icon = s.icon
            const active = section === s.id
            return (
              <button
                key={s.id}
                type="button"
                data-action={`settings-section-${s.id}`}
                onClick={() => setSection(s.id)}
                aria-current={active ? "page" : undefined}
                className={[
                  "group flex shrink-0 items-center gap-2.5 rounded-md px-3 py-2 text-left text-sm transition-colors duration-fast ease-standard",
                  active
                    ? "bg-primary/10 text-primary"
                    : "text-muted-foreground hover:bg-accent hover:text-accent-foreground",
                ].join(" ")}
              >
                <Icon className="size-4 shrink-0" />
                <span className="flex flex-col">
                  <span className="font-medium leading-tight">{s.label}</span>
                  <span
                    className={[
                      "hidden text-xs leading-tight md:inline",
                      active ? "text-primary/80" : "text-muted-foreground/80",
                    ].join(" ")}
                  >
                    {s.description}
                  </span>
                </span>
              </button>
            )
          })}
        </nav>

        <div className="min-w-0">
          {section === "llm" && (
            <Card>
              <CardHeader>
                <CardTitle>LLM</CardTitle>
                <CardDescription>
                  Configure the local model endpoint and context budgets used
                  by the Assistant.
                </CardDescription>
              </CardHeader>
              <CardContent className="flex flex-col gap-5">
                <Field
                  label="Base URL"
                  hint="OpenAI-compatible endpoint. LM Studio defaults to http://localhost:1234/v1."
                >
                  <Input
                    data-action="settings-base-url"
                    value={draft.baseURL}
                    onChange={(e) =>
                      setDraft((d) => ({ ...d, baseURL: e.target.value }))
                    }
                    placeholder="http://localhost:1234/v1"
                    spellCheck={false}
                    autoComplete="off"
                  />
                </Field>

                <Field
                  label="Context window (tokens)"
                  hint="Match this to the context length you've loaded in LM Studio."
                >
                  <Input
                    data-action="settings-context-tokens"
                    type="number"
                    min={1024}
                    step={512}
                    value={draft.contextTokens}
                    onChange={(e) =>
                      setDraft((d) => ({
                        ...d,
                        contextTokens:
                          Number(e.target.value) || d.contextTokens,
                      }))
                    }
                  />
                </Field>

                <Field
                  label="System prompt"
                  hint="Sent at the start of every conversation. Shapes the assistant's persona and scope. UI Control adds an action-driving preface on top of this when enabled."
                >
                  <Textarea
                    data-action="settings-system-prompt"
                    value={draft.systemPrompt}
                    onChange={(e) =>
                      setDraft((d) => ({ ...d, systemPrompt: e.target.value }))
                    }
                    rows={5}
                    spellCheck={false}
                    className="min-h-24 font-mono text-xs"
                  />
                  <button
                    type="button"
                    data-action="settings-system-prompt-reset"
                    onClick={() =>
                      setDraft((d) => ({
                        ...d,
                        systemPrompt: DEFAULT_SYSTEM_PROMPT,
                      }))
                    }
                    className="self-start text-xs text-muted-foreground underline-offset-2 hover:text-foreground hover:underline"
                  >
                    Reset to default prompt
                  </button>
                </Field>

                <Field
                  label="Response cap (max tokens)"
                  hint="Upper bound on each model reply. Smaller = faster, less rambling."
                >
                  <Input
                    data-action="settings-response-budget"
                    type="number"
                    min={64}
                    step={64}
                    value={draft.responseBudget}
                    onChange={(e) =>
                      setDraft((d) => ({
                        ...d,
                        responseBudget:
                          Number(e.target.value) || d.responseBudget,
                      }))
                    }
                  />
                </Field>

                <div className="flex flex-wrap items-center gap-2">
                  <Button
                    data-action="settings-save"
                    onClick={save}
                    disabled={!dirty}
                  >
                    Save
                  </Button>
                  <Button
                    data-action="settings-test"
                    variant="outline"
                    onClick={runTest}
                    disabled={test.kind === "running"}
                  >
                    {test.kind === "running" ? (
                      <Loader2 className="size-4 animate-spin" />
                    ) : test.kind === "ok" ? (
                      <Check className="size-4 text-emerald-600" />
                    ) : test.kind === "fail" ? (
                      <X className="size-4 text-destructive" />
                    ) : null}
                    Test connection
                  </Button>
                  <Button
                    data-action="settings-reset"
                    variant="outline"
                    onClick={reset}
                  >
                    Reset to defaults
                  </Button>
                  {savedAt && !dirty && (
                    <span className="text-sm text-muted-foreground">
                      Saved.
                    </span>
                  )}
                  {test.kind === "ok" && (
                    <span className="text-sm text-emerald-700 dark:text-emerald-400">
                      {test.count} model{test.count === 1 ? "" : "s"} available.
                    </span>
                  )}
                  {test.kind === "fail" && (
                    <span
                      className="text-sm text-destructive"
                      title={test.reason}
                    >
                      Failed: {test.reason.slice(0, 60)}
                    </span>
                  )}
                </div>
              </CardContent>
            </Card>
          )}

          {section === "agents" && <AgentsPanel />}

          {section === "appearance" && (
            <Card>
              <CardHeader>
                <CardTitle>Appearance</CardTitle>
                <CardDescription>
                  Theme, font size, surface tint, and background atmosphere are
                  in the appbar — the toggles up top write to localStorage and
                  persist across sessions.
                </CardDescription>
              </CardHeader>
              <CardContent className="text-sm text-muted-foreground">
                Use the icons in the appbar (top right) to change theme, font
                size, surface tint, and background.
              </CardContent>
            </Card>
          )}

          {section === "account" && (
            <Card>
              <CardHeader>
                <CardTitle>Account</CardTitle>
                <CardDescription>
                  Identity and profile preferences.
                </CardDescription>
              </CardHeader>
              <CardContent className="text-sm text-muted-foreground">
                Wire <code className="font-mono">~/lib/identity.ts</code> to a
                real session to populate this panel.
              </CardContent>
            </Card>
          )}

          {section === "about" && (
            <Card>
              <CardHeader>
                <CardTitle>About</CardTitle>
                <CardDescription>App version and credits.</CardDescription>
              </CardHeader>
              <CardContent className="space-y-1 text-sm text-muted-foreground">
                <p>Built on the Crema design system.</p>
                <p>
                  Hybrid traditional + AI-first scaffold with a virtual cursor
                  and command bus for assistant-driven UI control.
                </p>
              </CardContent>
            </Card>
          )}
        </div>
      </div>
    </AppShell>
  )
}

function Field({
  label,
  hint,
  children,
}: {
  label: string
  hint?: string
  children: React.ReactNode
}) {
  return (
    <label className="flex flex-col gap-1.5">
      <span className="text-sm font-medium">{label}</span>
      {children}
      {hint && <span className="text-xs text-muted-foreground">{hint}</span>}
    </label>
  )
}

function AgentsPanel() {
  const agents = useAgents()
  const [activeId, setActiveId] = useState<string>(() => loadActiveAgentId())
  const [editingId, setEditingId] = useState<string | null>(null)

  useEffect(() => {
    saveActiveAgentId(activeId)
  }, [activeId])

  const editing = agents.find((a) => a.id === editingId) ?? null

  const update = (next: Agent) => {
    saveAgents(agents.map((a) => (a.id === next.id ? next : a)))
  }
  const remove = (id: string) => {
    if (agents.length <= 1) return
    const next = agents.filter((a) => a.id !== id)
    saveAgents(next)
    if (activeId === id) setActiveId(next[0].id)
    if (editingId === id) setEditingId(null)
  }
  const create = () => {
    const id = newAgentId()
    const draft: Agent = {
      id,
      name: "New persona",
      role: "Specialist",
      prompt: "Describe what this persona is good at and how it should respond.",
    }
    saveAgents([...agents, draft])
    setEditingId(id)
  }

  return (
    <Card>
      <CardHeader>
        <CardTitle>Agents</CardTitle>
        <CardDescription>
          Personas with their own sub-system prompts. Switch the active one in
          the chat status bar — the assistant inherits its skills, tone, and
          scope. Lets you keep contexts focused: a coder agent doesn't carry
          writing-task context; a writer doesn't carry codebase context.
        </CardDescription>
      </CardHeader>
      <CardContent className="flex flex-col gap-4">
        <div className="flex flex-wrap items-center gap-2">
          <Button
            data-action="settings-agent-new"
            onClick={create}
            size="sm"
            variant="outline"
          >
            <Plus className="size-4" /> New persona
          </Button>
          <Button
            data-action="settings-agent-reset"
            onClick={() => {
              resetAgents()
              setEditingId(null)
            }}
            size="sm"
            variant="ghost"
          >
            Reset to defaults
          </Button>
        </div>

        <ul className="flex flex-col gap-1.5">
          {agents.map((a) => {
            const isActive = activeId === a.id
            const isEditing = editingId === a.id
            return (
              <li
                key={a.id}
                className={[
                  "rounded-lg border transition-colors",
                  isEditing
                    ? "border-primary/40 bg-primary/5"
                    : "border-border bg-card/40",
                ].join(" ")}
              >
                <div className="flex items-center gap-2 px-3 py-2">
                  <button
                    type="button"
                    data-action={`settings-agent-activate-${a.id}`}
                    onClick={() => setActiveId(a.id)}
                    className={[
                      "size-2.5 shrink-0 rounded-full ring-2 transition-colors",
                      isActive
                        ? "bg-primary ring-primary/30"
                        : "bg-muted ring-transparent hover:ring-foreground/20",
                    ].join(" ")}
                    aria-label={
                      isActive ? `${a.name} (active)` : `Activate ${a.name}`
                    }
                    title={isActive ? "Active" : "Set active"}
                  />
                  <div className="flex min-w-0 flex-1 flex-col">
                    <span className="truncate text-sm font-medium">{a.name}</span>
                    <span className="truncate text-xs text-muted-foreground">
                      {a.role}
                    </span>
                  </div>
                  <Button
                    data-action={`settings-agent-edit-${a.id}`}
                    onClick={() => setEditingId(isEditing ? null : a.id)}
                    size="sm"
                    variant="ghost"
                  >
                    {isEditing ? "Done" : "Edit"}
                  </Button>
                  <Button
                    data-action={`settings-agent-delete-${a.id}`}
                    onClick={() => remove(a.id)}
                    size="icon-sm"
                    variant="ghost"
                    disabled={agents.length <= 1}
                    aria-label="Delete persona"
                    title="Delete persona"
                  >
                    <Trash2 className="size-4" />
                  </Button>
                </div>
                {isEditing && editing && (
                  <div className="flex flex-col gap-3 border-t bg-background/60 px-3 py-3">
                    <Field label="Name">
                      <Input
                        data-action={`settings-agent-name-${a.id}`}
                        value={editing.name}
                        onChange={(e) =>
                          update({ ...editing, name: e.target.value })
                        }
                      />
                    </Field>
                    <Field label="Role">
                      <Input
                        data-action={`settings-agent-role-${a.id}`}
                        value={editing.role}
                        onChange={(e) =>
                          update({ ...editing, role: e.target.value })
                        }
                      />
                    </Field>
                    <Field
                      label="Sub-system prompt"
                      hint="Stacked on top of the main system prompt only when this persona is active."
                    >
                      <Textarea
                        data-action={`settings-agent-prompt-${a.id}`}
                        value={editing.prompt}
                        onChange={(e) =>
                          update({ ...editing, prompt: e.target.value })
                        }
                        rows={6}
                        className="min-h-32 font-mono text-xs"
                      />
                    </Field>
                  </div>
                )}
              </li>
            )
          })}
        </ul>
      </CardContent>
    </Card>
  )
}