diff --git a/app/src/components/Layout.tsx b/app/src/components/Layout.tsx new file mode 100644 index 0000000..f37a83e --- /dev/null +++ b/app/src/components/Layout.tsx @@ -0,0 +1,154 @@ +import { useEffect, useState } from "react" +import { Link, NavLink, Outlet } from "react-router-dom" +import { + ChevronLeft, + ChevronRight, + Clock, + Globe, + LayoutDashboard, + Menu, + Package, + Server, + Share2, + X, +} from "lucide-react" +import { cn } from "@/lib/utils" +import { useEventStream } from "@/services/api/hooks" + +const NAV = [ + { to: "/", label: "Overview", icon: LayoutDashboard, end: true }, + { to: "/services", label: "Services", icon: Server, end: false }, + { to: "/scheduled", label: "Scheduled", icon: Clock, end: false }, + { to: "/programs", label: "Programs", icon: Package, end: false }, + { to: "/gateway", label: "Gateway", icon: Globe, end: false }, + { to: "/mesh", label: "Mesh", icon: Share2, end: false }, +] + +const COLLAPSE_KEY = "castle-nav-collapsed" + +function NavItems({ collapsed, onNavigate }: { collapsed: boolean; onNavigate?: () => void }) { + return ( + + ) +} + +function Brand({ collapsed, onClick }: { collapsed?: boolean; onClick?: () => void }) { + return ( + + {collapsed ? "C" : "Castle"} + + ) +} + +export function Layout() { + useEventStream() + const [collapsed, setCollapsed] = useState(() => localStorage.getItem(COLLAPSE_KEY) === "1") + const [mobileOpen, setMobileOpen] = useState(false) + + useEffect(() => { + localStorage.setItem(COLLAPSE_KEY, collapsed ? "1" : "0") + }, [collapsed]) + + return ( +
+ {/* Mobile top bar */} +
+ + +
+ + {/* Mobile drawer */} + {mobileOpen && ( +
+
setMobileOpen(false)} /> + +
+ )} + + {/* Desktop sidebar */} + + + {/* Main content */} +
+ +
+
+ ) +} diff --git a/app/src/components/PageHeader.tsx b/app/src/components/PageHeader.tsx new file mode 100644 index 0000000..8ff09f8 --- /dev/null +++ b/app/src/components/PageHeader.tsx @@ -0,0 +1,17 @@ +interface PageHeaderProps { + title: string + subtitle?: string + actions?: React.ReactNode +} + +export function PageHeader({ title, subtitle, actions }: PageHeaderProps) { + return ( +
+
+

{title}

+ {subtitle &&

{subtitle}

} +
+ {actions &&
{actions}
} +
+ ) +} diff --git a/app/src/components/ScheduledSection.tsx b/app/src/components/ScheduledSection.tsx index cf826f3..89ae043 100644 --- a/app/src/components/ScheduledSection.tsx +++ b/app/src/components/ScheduledSection.tsx @@ -2,7 +2,6 @@ import { Link } from "react-router-dom" import { Play, RefreshCw, Square } from "lucide-react" import type { JobSummary, HealthStatus } from "@/types" import { useServiceAction } from "@/services/api/hooks" -import { SectionHeader } from "./SectionHeader" import { StackBadge } from "./StackBadge" interface ScheduledSectionProps { @@ -14,10 +13,8 @@ export function ScheduledSection({ jobs, statuses }: ScheduledSectionProps) { const statusMap = new Map(statuses.map((s) => [s.id, s])) return ( -
- -
- +
+
@@ -33,8 +30,7 @@ export function ScheduledSection({ jobs, statuses }: ScheduledSectionProps) { ))}
Name
-
-
+
) } diff --git a/app/src/components/SectionHeader.tsx b/app/src/components/SectionHeader.tsx deleted file mode 100644 index 2d0203d..0000000 --- a/app/src/components/SectionHeader.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import { SECTION_HEADERS } from "@/lib/labels" - -export function SectionHeader({ section }: { section: string }) { - const info = SECTION_HEADERS[section] - return ( -
-

{info?.title ?? section}

-

{info?.subtitle}

-
- ) -} diff --git a/app/src/components/ServiceSection.tsx b/app/src/components/ServiceSection.tsx index 219cd6c..cac1335 100644 --- a/app/src/components/ServiceSection.tsx +++ b/app/src/components/ServiceSection.tsx @@ -1,7 +1,6 @@ import { useMemo } from "react" import type { ServiceSummary, HealthStatus } from "@/types" import { ServiceCard } from "./ServiceCard" -import { SectionHeader } from "./SectionHeader" interface ServiceSectionProps { services: ServiceSummary[] @@ -12,13 +11,10 @@ export function ServiceSection({ services, statuses }: ServiceSectionProps) { const statusMap = useMemo(() => new Map(statuses.map((s) => [s.id, s])), [statuses]) return ( -
- -
- {services.map((svc) => ( - - ))} -
-
+
+ {services.map((svc) => ( + + ))} +
) } diff --git a/app/src/lib/labels.ts b/app/src/lib/labels.ts index 51603a8..d6bb50b 100644 --- a/app/src/lib/labels.ts +++ b/app/src/lib/labels.ts @@ -31,12 +31,6 @@ export const STACK_LABELS: Record = { remote: "Remote", } -export const SECTION_HEADERS: Record = { - service: { title: "Services", subtitle: "Long-running processes" }, - scheduled: { title: "Scheduled Jobs", subtitle: "Systemd timers" }, - program: { title: "Programs", subtitle: "Software catalog" }, -} - export function runnerLabel(runner: string): string { return RUNNER_LABELS[runner] ?? runner } diff --git a/app/src/pages/Dashboard.tsx b/app/src/pages/Dashboard.tsx deleted file mode 100644 index f3b490a..0000000 --- a/app/src/pages/Dashboard.tsx +++ /dev/null @@ -1,97 +0,0 @@ -import { useState } from "react" -import { Plus } from "lucide-react" -import { useServices, useJobs, usePrograms, useStatus, useGateway, useNodes, useMeshStatus, useEventStream } from "@/services/api/hooks" -import { GatewayPanel } from "@/components/GatewayPanel" -import { MeshPanel } from "@/components/MeshPanel" -import { NodeBar } from "@/components/NodeBar" -import { ServiceSection } from "@/components/ServiceSection" -import { ScheduledSection } from "@/components/ScheduledSection" -import { ProgramTable } from "@/components/ProgramTable" -import { SectionHeader } from "@/components/SectionHeader" -import { CreateDeploymentForm } from "@/components/detail/CreateDeploymentForm" - - -export function Dashboard() { - useEventStream() - const { data: services, isLoading: loadingServices } = useServices() - const { data: jobs, isLoading: loadingJobs } = useJobs() - const { data: programs, isLoading: loadingPrograms } = usePrograms() - const { data: statusResp } = useStatus() - const { data: gateway } = useGateway() - const { data: nodes } = useNodes() - const { data: mesh } = useMeshStatus() - const [creating, setCreating] = useState<"service" | "job" | null>(null) - - const statuses = statusResp?.statuses ?? [] - const isLoading = loadingServices || loadingJobs || loadingPrograms - const existing = - creating === "service" - ? (services ?? []).map((s) => s.id) - : (jobs ?? []).map((j) => j.id) - - return ( -
-
-

Castle

-

Personal software platform

-
- - {nodes && } - - {gateway && ( -
- -
- )} - - {mesh && ( -
- -
- )} - -
- - -
- {creating && ( -
- setCreating(null)} - /> -
- )} - - {isLoading ? ( -

Loading...

- ) : ( -
- {services && services.length > 0 && ( - - )} - {jobs && jobs.length > 0 && ( - - )} - {programs && programs.length > 0 && ( -
- - -
- )} -
- )} -
- ) -} diff --git a/app/src/pages/GatewayPage.tsx b/app/src/pages/GatewayPage.tsx new file mode 100644 index 0000000..7305411 --- /dev/null +++ b/app/src/pages/GatewayPage.tsx @@ -0,0 +1,23 @@ +import { useGateway, useStatus } from "@/services/api/hooks" +import { GatewayPanel } from "@/components/GatewayPanel" +import { PageHeader } from "@/components/PageHeader" + +export function GatewayPage() { + const { data: gateway, isLoading } = useGateway() + const { data: statusResp } = useStatus() + const statuses = statusResp?.statuses ?? [] + + return ( +
+ + + {isLoading ? ( +

Loading...

+ ) : gateway ? ( + + ) : ( +

Gateway unavailable.

+ )} +
+ ) +} diff --git a/app/src/pages/MeshPage.tsx b/app/src/pages/MeshPage.tsx new file mode 100644 index 0000000..2dab25f --- /dev/null +++ b/app/src/pages/MeshPage.tsx @@ -0,0 +1,27 @@ +import { useMeshStatus, useNodes } from "@/services/api/hooks" +import { MeshPanel } from "@/components/MeshPanel" +import { NodeBar } from "@/components/NodeBar" +import { PageHeader } from "@/components/PageHeader" + +export function MeshPage() { + const { data: mesh, isLoading } = useMeshStatus() + const { data: nodes } = useNodes() + + return ( +
+ + + {nodes && } + + {isLoading ? ( +

Loading...

+ ) : mesh?.enabled ? ( + + ) : ( +

+ Mesh coordination is disabled on this node. +

+ )} +
+ ) +} diff --git a/app/src/pages/Overview.tsx b/app/src/pages/Overview.tsx new file mode 100644 index 0000000..5c80997 --- /dev/null +++ b/app/src/pages/Overview.tsx @@ -0,0 +1,93 @@ +import { Link } from "react-router-dom" +import { Clock, Globe, Package, Server, Share2 } from "lucide-react" +import { + useGateway, + useJobs, + useMeshStatus, + useNodes, + usePrograms, + useServices, + useStatus, +} from "@/services/api/hooks" +import { NodeBar } from "@/components/NodeBar" +import { PageHeader } from "@/components/PageHeader" + +export function Overview() { + const { data: services } = useServices() + const { data: jobs } = useJobs() + const { data: programs } = usePrograms() + const { data: statusResp } = useStatus() + const { data: gateway } = useGateway() + const { data: mesh } = useMeshStatus() + const { data: nodes } = useNodes() + + const statuses = statusResp?.statuses ?? [] + const upCount = (ids: string[]) => + statuses.filter((s) => ids.includes(s.id) && s.status === "up").length + + const serviceIds = (services ?? []).map((s) => s.id) + const routeCount = gateway?.routes?.length ?? 0 + + const tiles = [ + { + to: "/services", + icon: Server, + label: "Services", + value: services?.length ?? 0, + detail: services ? `${upCount(serviceIds)} up` : "", + }, + { + to: "/scheduled", + icon: Clock, + label: "Scheduled", + value: jobs?.length ?? 0, + detail: jobs ? `${jobs.length === 1 ? "job" : "jobs"}` : "", + }, + { + to: "/programs", + icon: Package, + label: "Programs", + value: programs?.length ?? 0, + detail: programs ? "in catalog" : "", + }, + { + to: "/gateway", + icon: Globe, + label: "Gateway", + value: routeCount, + detail: gateway ? `tls: ${gateway.tls ?? "off"}` : "", + }, + { + to: "/mesh", + icon: Share2, + label: "Mesh", + value: mesh?.enabled ? mesh.peer_count : "—", + detail: mesh?.enabled ? "peers" : "disabled", + }, + ] + + return ( +
+ + + {nodes && } + +
+ {tiles.map(({ to, icon: Icon, label, value, detail }) => ( + +
+ + {label} +
+
{value}
+
{detail}
+ + ))} +
+
+ ) +} diff --git a/app/src/pages/ProgramDetail.tsx b/app/src/pages/ProgramDetail.tsx index d0fcf75..2dc96a5 100644 --- a/app/src/pages/ProgramDetail.tsx +++ b/app/src/pages/ProgramDetail.tsx @@ -1,6 +1,6 @@ import { useState } from "react" import { useParams } from "react-router-dom" -import { useProgram, useEventStream } from "@/services/api/hooks" +import { useProgram } from "@/services/api/hooks" import { runnerLabel, subdomainUrl } from "@/lib/labels" import { DetailHeader } from "@/components/detail/DetailHeader" import { ConfigPanel } from "@/components/detail/ConfigPanel" @@ -8,7 +8,6 @@ import { DeploymentsSection } from "@/components/detail/DeploymentsSection" import { ProgramActions, ActionOutputPanel, type ActionOutput } from "@/components/ProgramActions" export function ProgramDetailPage() { - useEventStream() const { name } = useParams<{ name: string }>() const { data: deployment, isLoading, error, refetch } = useProgram(name ?? "") const [actionOutput, setActionOutput] = useState(null) @@ -39,7 +38,7 @@ export function ProgramDetailPage() { return (
+ + + {isLoading ? ( +

Loading...

+ ) : programs && programs.length > 0 ? ( + + ) : ( +

No programs yet.

+ )} +
+ ) +} diff --git a/app/src/pages/Scheduled.tsx b/app/src/pages/Scheduled.tsx new file mode 100644 index 0000000..70eab9d --- /dev/null +++ b/app/src/pages/Scheduled.tsx @@ -0,0 +1,50 @@ +import { useState } from "react" +import { Plus } from "lucide-react" +import { useJobs, useStatus } from "@/services/api/hooks" +import { ScheduledSection } from "@/components/ScheduledSection" +import { PageHeader } from "@/components/PageHeader" +import { CreateDeploymentForm } from "@/components/detail/CreateDeploymentForm" + +export function Scheduled() { + const { data: jobs, isLoading } = useJobs() + const { data: statusResp } = useStatus() + const [creating, setCreating] = useState(false) + + const statuses = statusResp?.statuses ?? [] + const existing = (jobs ?? []).map((j) => j.id) + + return ( +
+ setCreating((c) => !c)} + className="flex items-center gap-1 px-3 py-1.5 text-sm rounded border border-[var(--border)] text-[var(--muted)] hover:text-[var(--foreground)] hover:border-[var(--primary)] transition-colors" + > + Add job + + } + /> + + {creating && ( +
+ setCreating(false)} + /> +
+ )} + + {isLoading ? ( +

Loading...

+ ) : jobs && jobs.length > 0 ? ( + + ) : ( +

No scheduled jobs yet.

+ )} +
+ ) +} diff --git a/app/src/pages/ScheduledDetail.tsx b/app/src/pages/ScheduledDetail.tsx index b4d137a..5869463 100644 --- a/app/src/pages/ScheduledDetail.tsx +++ b/app/src/pages/ScheduledDetail.tsx @@ -1,6 +1,6 @@ import { useParams } from "react-router-dom" import { Clock } from "lucide-react" -import { useJob, useStatus, useEventStream } from "@/services/api/hooks" +import { useJob, useStatus } from "@/services/api/hooks" import { LogViewer } from "@/components/LogViewer" import { DetailHeader } from "@/components/detail/DetailHeader" import { ServiceControls } from "@/components/detail/ServiceControls" @@ -8,7 +8,6 @@ import { SystemdPanel } from "@/components/detail/SystemdPanel" import { ConfigPanel } from "@/components/detail/ConfigPanel" export function ScheduledDetailPage() { - useEventStream() const { name } = useParams<{ name: string }>() const { data: deployment, isLoading, error, refetch } = useJob(name ?? "") const { data: statusResp } = useStatus() @@ -32,7 +31,7 @@ export function ScheduledDetailPage() { return (
() const { data: deployment, isLoading, error, refetch } = useService(name ?? "") const { data: statusResp } = useStatus() @@ -36,7 +35,7 @@ export function ServiceDetailPage() { return (
s.id) + + return ( +
+ setCreating((c) => !c)} + className="flex items-center gap-1 px-3 py-1.5 text-sm rounded border border-[var(--border)] text-[var(--muted)] hover:text-[var(--foreground)] hover:border-[var(--primary)] transition-colors" + > + Add service + + } + /> + + {creating && ( +
+ setCreating(false)} + /> +
+ )} + + {isLoading ? ( +

Loading...

+ ) : services && services.length > 0 ? ( + + ) : ( +

No services yet.

+ )} +
+ ) +} diff --git a/app/src/router/routes.tsx b/app/src/router/routes.tsx index 2135340..b4580b0 100644 --- a/app/src/router/routes.tsx +++ b/app/src/router/routes.tsx @@ -1,5 +1,11 @@ import { createBrowserRouter } from "react-router-dom" -import { Dashboard } from "@/pages/Dashboard" +import { Layout } from "@/components/Layout" +import { Overview } from "@/pages/Overview" +import { Services } from "@/pages/Services" +import { Scheduled } from "@/pages/Scheduled" +import { Programs } from "@/pages/Programs" +import { GatewayPage } from "@/pages/GatewayPage" +import { MeshPage } from "@/pages/MeshPage" import { ServiceDetailPage } from "@/pages/ServiceDetail" import { ScheduledDetailPage } from "@/pages/ScheduledDetail" import { ProgramDetailPage } from "@/pages/ProgramDetail" @@ -9,26 +15,19 @@ import { NodeDetailPage } from "@/pages/NodeDetail" export const router = createBrowserRouter([ { path: "/", - element: , - }, - { - path: "/services/:name", - element: , - }, - { - path: "/jobs/:name", - element: , - }, - { - path: "/programs/:name", - element: , - }, - { - path: "/deployment/:name", - element: , - }, - { - path: "/node/:hostname", - element: , + element: , + children: [ + { index: true, element: }, + { path: "services", element: }, + { path: "scheduled", element: }, + { path: "programs", element: }, + { path: "gateway", element: }, + { path: "mesh", element: }, + { path: "services/:name", element: }, + { path: "jobs/:name", element: }, + { path: "programs/:name", element: }, + { path: "deployment/:name", element: }, + { path: "node/:hostname", element: }, + ], }, ])