Files
app/frontend/src/routes/_layout/settings.tsx
T
stroblmeandClaude Fable 5.1 cc4091166e
Docs / docs (push) Successful in 42s
Playwright Tests / test-playwright (1, 2) (push) Failing after 2m42s
Playwright Tests / test-playwright (2, 2) (push) Failing after 10s
pre-commit / pre-commit (push) Failing after 2m33s
Test Backend / test-backend (push) Failing after 2m48s
Compose Smoke Test / test-compose (push) Failing after 9s
Playwright Tests / merge-reports (push) Failing after 2m17s
Add the assistant: a chat that drives the MCP tools in-process
A provider set under Settings (OpenAI-compatible; key encrypted in
flow-data/ai.json) turns on an Assistant panel in the sidebar. Each turn runs
the FastMCP tools in-process as the person chatting, streams the rounds over
SSE and keeps one transcript per user. The panel floats on any screen and
shares the editor's lane: a settings panel keeps the top half, the chat the
bottom. The MCP client is now built once, for the endpoint and the chat.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
2026-09-16 23:28:23 +02:00

71 lines
2.2 KiB
TypeScript

import { createFileRoute } from "@tanstack/react-router"
import { motion } from "motion/react"
import Appearance from "@/components/UserSettings/Appearance"
import Assistant from "@/components/UserSettings/Assistant"
import RemoteAccess from "@/components/UserSettings/RemoteAccess"
import UserInformation from "@/components/UserSettings/UserInformation"
import useAuth from "@/hooks/useAuth"
import { listStagger, slideUp } from "@/lib/motion"
export const Route = createFileRoute("/_layout/settings")({
component: UserSettings,
head: () => ({
meta: [
{
title: "Settings - Fluksio",
},
],
}),
})
function UserSettings() {
const { user: currentUser } = useAuth()
if (!currentUser) {
return null
}
return (
<div className="flex flex-col gap-6">
<div>
<h1 className="font-display text-3xl font-semibold">Settings</h1>
<p className="max-w-2xl text-sm text-muted-foreground">
Manage your account settings and preferences
</p>
</div>
{/* Panels rather than tabs, the way the portal does it: there are few
enough of these to read at once, and hiding four behind a tab bar was
navigation over three cards. Changing a password and deleting an
account belong to the account, so they live in that card's footer. */}
<motion.div
className="grid items-start gap-6 lg:grid-cols-2"
variants={listStagger}
initial="hidden"
animate="visible"
>
<motion.div variants={slideUp}>
<UserInformation />
</motion.div>
<motion.div variants={slideUp}>
<Appearance />
</motion.div>
{/* Whether this whole instance can be reached from outside is not
a personal preference, so it only exists for an operator. */}
{currentUser.is_superuser && (
<motion.div variants={slideUp}>
<RemoteAccess />
</motion.div>
)}
{/* One provider for everyone here, so the same rule applies. */}
{currentUser.is_superuser && (
<motion.div variants={slideUp}>
<Assistant />
</motion.div>
)}
</motion.div>
</div>
)
}