CremaUIStudio/arcadia-admin
1
0
Fork 0
Code Issues Pull Requests 5 Actions Packages Projects Releases Wiki Activity

Admin UX overhaul: P0 fixes, error-UX foundations, nav cleanup, tenant detail page

Browse Source 
From the 2026-07-14 UI/UX audit (17/40). Four phases:

P1 — Settings route crashed on Agents→Edit (Input/Textarea used but never
imported). Added imports + a shared route-level error boundary
(components/route-error.tsx) re-exported from all shell routes, so one
crashing panel degrades to an explained card with the nav intact instead of
replacing the whole app with a stack trace. Corrected the stale CLAUDE.md
claim that `npm run typecheck` crashes — it works, and would have caught the
missing import.

P2 — Error/empty/feedback foundations. Fixed useSession identity churn that
fired ~3x duplicate fetches per screen and self-inflicted 429s (referentially
stable snapshot). New lib/errors.ts (describeError → plain-language + the fix)
and components/data-state.tsx (DataState renders exactly one of
error/loading/empty/content, so a failed load never shows as "empty";
DialogError for in-dialog failures; 429 auto-retry). Rolled across all 15
list routes; every mutation now toasts. Surfaced+fixed two silent-failure
bugs (sso + buckets-CORS swallowed load errors; the latter could wipe rules
on save).

P3 — Nav IA + trust cleanup. Default-expanded rail; regrouped into 7 coherent
sections; collapsed the Apps/Plan/Entitlements stub triplication into one
honest /billing page; deleted fabricated seeded notifications and the dead
Help menu item; fixed the 403 copy (referenced a tenant switcher that doesn't
exist); removed orphan /assistant + /library routes; gated dev-seed login
hints behind DEV; renamed /activity → /audit-log with a redirect.

P4 — Tenant detail page (routes/tenants.$id.tsx + components/tenant-detail/*),
closing the provision→configure gap. 8 tabs (Overview, Plan & quotas,
Branding, Localization, Email & SMS, Feature flags, IP rules, Inbound
webhooks), each verified saving to the real backend. Row name links to detail.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
jules
2026-07-14 13:43:57 +10:00
parent 938143f3f5
commit 7415b40240
51 changed files with 5923 additions and 4575 deletions
Download Patch File Download Diff File Expand all files Collapse all files

228
app/routes/scheduled-tasks.tsx
View File

@@ -12,7 +12,8 @@ import {
Zap,
} from "lucide-react"
import { ArcadiaError, useArcadiaClient } from "@crema/arcadia-core-client"
import { useArcadiaClient } from "@crema/arcadia-core-client"
import { useToast } from "@crema/notification-ui"
import {
ActionsCell,
BadgeCell,
@@ -25,9 +26,11 @@ import {
type Column,
} from "@crema/table-ui"
import { SearchInput } from "@crema/search-ui"
import { AlertBanner, ConfirmDialog, EmptyState, LoadingOverlay } from "@crema/feedback-ui"
import { ConfirmDialog, EmptyState } from "@crema/feedback-ui"
import { AppShell } from "~/components/layout/app-shell"
import { DataState, DialogError } from "~/components/data-state"
import { errorMessage } from "~/lib/errors"
import { Badge } from "~/components/ui/badge"
import { Button } from "~/components/ui/button"
import {
@@ -84,11 +87,13 @@ type EditorState =
export default function ScheduledTasksRoute() {
const session = useSession()
const arcadia = useArcadiaClient()
const toast = useToast()
const [tasks, setTasks] = useState<ScheduledTask[]>([])
const [loading, setLoading] = useState(true)
const [error, setError] = useState<string | null>(null)
const [info, setInfo] = useState<string | null>(null)
// Raw thrown value — the task list's own error. The run-history dialog keeps
// its own, so a failing run log never blanks the task table.
const [error, setError] = useState<unknown>(null)
const [search, setSearch] = useState("")
const [editor, setEditor] = useState<EditorState>(null)
const [pendingDelete, setPendingDelete] = useState<ScheduledTask | null>(null)
@@ -100,7 +105,7 @@ export default function ScheduledTasksRoute() {
try {
setTasks(await listScheduledTasks(arcadia))
} catch (err) {
setError(err instanceof ArcadiaError ? err.message : "Failed to load scheduled tasks.")
setError(err)
} finally {
setLoading(false)
}
@@ -199,15 +204,14 @@ export default function ScheduledTasksRoute() {
setEditor,
setPendingDelete,
setRunsFor,
setError,
setInfo,
toast,
})}
triggerDataAction={`task-${t.id}-actions`}
/>
),
},
],
[arcadia, refresh],
[arcadia, refresh, toast],
)
const summary = useMemo(
@@ -273,17 +277,6 @@ export default function ScheduledTasksRoute() {
</div>
</header>
{error ? (
<AlertBanner variant="error" dismissible onDismiss={() => setError(null)}>
{error}
</AlertBanner>
) : null}
{info ? (
<AlertBanner variant="success" dismissible onDismiss={() => setInfo(null)}>
{info}
</AlertBanner>
) : null}
<Card>
<CardHeader className="flex flex-row items-center gap-3">
<SearchInput
@@ -299,38 +292,42 @@ export default function ScheduledTasksRoute() {
</CardHeader>
<CardContent className="relative p-0">
<LoadingOverlay active={loading && tasks.length === 0} label="Loading tasks…" />
{table.total === 0 && !loading ? (
<EmptyState
icon={<CalendarClock className="size-6" />}
title={search ? "No tasks match." : "No scheduled tasks yet."}
description={
search
? "Try a different search."
: "Schedule a recurring webhook or platform event."
}
className="py-12"
<DataState
loading={loading}
error={error}
isEmpty={table.total === 0}
onRetry={refresh}
loadingLabel="Loading tasks…"
empty={
<EmptyState
icon={<CalendarClock className="size-6" />}
title={search ? "No tasks match." : "No scheduled tasks yet."}
description={
search
? "Try a different search."
: "Schedule a recurring webhook or platform event."
}
className="py-12"
/>
}
>
<DataTable
columns={columns}
rows={table.pageRows}
getRowId={(t) => t.id}
sort={table.sort}
onSortToggle={table.toggleSort}
loading={loading && tasks.length > 0}
stickyHeader
/>
) : (
<>
<DataTable
columns={columns}
rows={table.pageRows}
getRowId={(t) => t.id}
sort={table.sort}
onSortToggle={table.toggleSort}
loading={loading && tasks.length > 0}
stickyHeader
/>
<Pagination
page={table.page}
pageSize={table.pageSize}
total={table.total}
onPageChange={table.setPage}
onPageSizeChange={table.setPageSize}
/>
</>
)}
<Pagination
page={table.page}
pageSize={table.pageSize}
total={table.total}
onPageChange={table.setPage}
onPageSizeChange={table.setPageSize}
/>
</DataState>
</CardContent>
</Card>
</div>
@@ -348,14 +345,15 @@ export default function ScheduledTasksRoute() {
variant="danger"
onConfirm={async () => {
if (!pendingDelete) return
const name = pendingDelete.name
try {
await deleteScheduledTask(arcadia, pendingDelete.id)
setPendingDelete(null)
setInfo("Task deleted.")
await refresh()
toast.success(`Deleted ${name}`)
} catch (err) {
setError(err instanceof ArcadiaError ? err.message : "Delete failed.")
setPendingDelete(null)
toast.error(errorMessage(err, `delete ${name}`))
}
}}
/>
@@ -363,14 +361,14 @@ export default function ScheduledTasksRoute() {
<TaskEditorDialog
state={editor}
onClose={() => setEditor(null)}
onSaved={async () => {
onSaved={async (msg) => {
setEditor(null)
await refresh()
toast.success(msg)
}}
onError={setError}
/>
<RunsDialog task={runsFor} onClose={() => setRunsFor(null)} onError={setError} />
<RunsDialog task={runsFor} onClose={() => setRunsFor(null)} />
</AppShell>
)
}
@@ -383,11 +381,10 @@ function rowActions(
setEditor: (s: EditorState) => void
setPendingDelete: (t: ScheduledTask | null) => void
setRunsFor: (t: ScheduledTask | null) => void
setError: (m: string | null) => void
setInfo: (m: string | null) => void
toast: ReturnType<typeof useToast>
},
): ActionItem[] {
const { arcadia, refresh, setEditor, setPendingDelete, setRunsFor, setError, setInfo } = ctx
const { arcadia, refresh, setEditor, setPendingDelete, setRunsFor, toast } = ctx
const items: ActionItem[] = []
items.push({
@@ -398,10 +395,12 @@ function rowActions(
onSelect: async () => {
try {
await triggerScheduledTask(arcadia, t.id)
setInfo(`${t.name} triggered. Check the run log for status.`)
await refresh()
toast.success(`Triggered ${t.name}`, {
description: "Check the run log for status.",
})
} catch (err) {
setError(err instanceof ArcadiaError ? err.message : "Trigger failed.")
toast.error(errorMessage(err, `trigger ${t.name}`))
}
},
})
@@ -428,10 +427,10 @@ function rowActions(
onSelect: async () => {
try {
await disableScheduledTask(arcadia, t.id)
setInfo(`${t.name} disabled.`)
await refresh()
toast.success(`Disabled ${t.name}`)
} catch (err) {
setError(err instanceof ArcadiaError ? err.message : "Disable failed.")
toast.error(errorMessage(err, `disable ${t.name}`))
}
},
})
@@ -444,10 +443,10 @@ function rowActions(
onSelect: async () => {
try {
await enableScheduledTask(arcadia, t.id)
setInfo(`${t.name} enabled.`)
await refresh()
toast.success(`Enabled ${t.name}`)
} catch (err) {
setError(err instanceof ArcadiaError ? err.message : "Enable failed.")
toast.error(errorMessage(err, `enable ${t.name}`))
}
},
})
@@ -469,12 +468,10 @@ function TaskEditorDialog({
state,
onClose,
onSaved,
onError,
}: {
state: EditorState
onClose: () => void
onSaved: () => Promise<void>
onError: (msg: string | null) => void
onSaved: (msg: string) => Promise<void>
}) {
const arcadia = useArcadiaClient()
const open = state !== null
@@ -492,6 +489,13 @@ function TaskEditorDialog({
const [maxRetries, setMaxRetries] = useState("3")
const [timeoutSeconds, setTimeoutSeconds] = useState("30")
const [saving, setSaving] = useState(false)
// The dialog owns its failures — including the local "config isn't valid
// JSON" throw, which the operator can only fix in this very textarea.
const [error, setError] = useState<unknown>(null)
useEffect(() => {
if (!open) setError(null)
}, [open])
useEffect(() => {
if (!open) return
@@ -523,7 +527,7 @@ function TaskEditorDialog({
}, [open, initial])
const submit = async () => {
onError(null)
setError(null)
setSaving(true)
try {
let parsedConfig: Record<string, unknown>
@@ -551,17 +555,17 @@ function TaskEditorDialog({
timeout_seconds: Math.max(1, Number(timeoutSeconds) || 30),
}
if (isEdit && initial) await updateScheduledTask(arcadia, initial.id, input)
else await createScheduledTask(arcadia, input)
await onSaved()
if (isEdit && initial) {
await updateScheduledTask(arcadia, initial.id, input)
await onSaved(`Saved ${name}`)
} else {
await createScheduledTask(arcadia, input)
await onSaved(`Created ${name}`)
}
} catch (err) {
onError(
err instanceof ArcadiaError
? err.message
: err instanceof Error
? err.message
: "Save failed.",
)
// Stay open with the form intact: cron and JSON config are fiddly enough
// that retyping them after a failure would be its own bug report.
setError(err)
} finally {
setSaving(false)
}
@@ -701,6 +705,13 @@ function TaskEditorDialog({
</div>
</div>
{error ? (
<DialogError
error={error}
context={isEdit ? "save the task" : "create the task"}
/>
) : null}
<DialogFooter>
<Button variant="outline" onClick={onClose} disabled={saving} data-action="task-form-cancel">
Cancel
@@ -722,31 +733,38 @@ function TaskEditorDialog({
function RunsDialog({
task,
onClose,
onError,
}: {
task: ScheduledTask | null
onClose: () => void
onError: (msg: string | null) => void
}) {
const arcadia = useArcadiaClient()
const [runs, setRuns] = useState<TaskRun[]>([])
const [loading, setLoading] = useState(true)
// Independent of the task list's error: a 500 on the run log must not blank
// the table behind this dialog, and must not read as "no runs yet".
const [error, setError] = useState<unknown>(null)
const [expanded, setExpanded] = useState<string | null>(null)
useEffect(() => {
if (!task) return
let mounted = true
const taskId = task?.id
const load = useCallback(async () => {
if (!taskId) return
setError(null)
setLoading(true)
listTaskRuns(arcadia, task.id, { limit: 50 })
.then((r) => mounted && setRuns(r))
.catch((err) =>
onError(err instanceof ArcadiaError ? err.message : "Failed to load runs."),
)
.finally(() => mounted && setLoading(false))
return () => {
mounted = false
try {
setRuns(await listTaskRuns(arcadia, taskId, { limit: 50 }))
} catch (err) {
setError(err)
} finally {
setLoading(false)
}
}, [arcadia, task, onError])
}, [arcadia, taskId])
useEffect(() => {
if (!taskId) return
setRuns([])
load()
}, [taskId, load])
if (!task) return null
@@ -760,13 +778,21 @@ function RunsDialog({
</DialogDescription>
</DialogHeader>
{loading ? (
<p className="py-6 text-center text-sm text-muted-foreground">
<RefreshCw className="mr-1 inline size-3.5 animate-spin" /> Loading…
</p>
) : runs.length === 0 ? (
<p className="py-6 text-center text-sm text-muted-foreground">No runs yet.</p>
) : (
<DataState
loading={loading}
error={error}
isEmpty={runs.length === 0}
onRetry={load}
loadingLabel="Loading runs…"
empty={
<EmptyState
icon={<History className="size-6" />}
title="No runs yet."
description="Trigger the task to see its first run here."
className="py-8"
/>
}
>
<ul className="flex flex-col divide-y rounded-md border">
{runs.map((r) => {
const open = expanded === r.id
@@ -828,7 +854,7 @@ function RunsDialog({
)
})}
</ul>
)}
</DataState>
<DialogFooter>
<Button variant="outline" onClick={onClose} data-action="task-runs-close">
@@ -854,3 +880,5 @@ function countBy<T>(arr: T[], key: (x: T) => string): Record<string, number> {
return acc
}, {})
}
export { RouteErrorBoundary as ErrorBoundary } from "~/components/route-error"