wild-cloud/wild-pc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Dashboard: lifecycle is a deployment concern, not a program action

Browse Source 
Install/Uninstall no longer live in the program's action cluster (they were a
tool's PATH-deployment lifecycle masquerading as a program action). ProgramActions
is now dev-verbs-only (build/test/lint/type-check/check). The program detail's
Deployment section owns lifecycle, keyed on kind: a tool shows Installed-on-PATH
with an Install/Uninstall toggle, a static shows served-by-gateway + its URL,
services/jobs link to their own pages. Program list cards drop the quick toggle
for a plain active dot. 'Remove program' stays as catalog deletion — no longer a
dead-end now that the blocking deployment is visible in the Deployment section.
This commit is contained in:
Paul Payne
2026-07-01 11:32:25 -07:00
parent 8120ec9f9e
commit 6ee6d4c850
4 changed files with 108 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
app/src/components/ProgramActions.tsx
View File

@@ -4,10 +4,8 @@ import {
FlaskConical,
Hammer,
Loader2,
Plug,
ShieldCheck,
Sparkles,
Unplug,
type LucideIcon,
} from "lucide-react"
import { useProgramAction } from "@/services/api/hooks"
@@ -20,14 +18,15 @@ interface ActionConfig {
borderColor: string
}
// Dev verbs only — operations on the program's *source*. Deployment lifecycle
// (install/uninstall a tool, start/stop a service, …) belongs to the deployment,
// not the program, so it lives in the Deployment section, never here.
const ACTION_CONFIG: Record<string, ActionConfig> = {
build: { icon: Hammer, label: "Build", color: "text-blue-400", hoverBg: "hover:bg-blue-800/30", borderColor: "border-blue-800" },
test: { icon: FlaskConical, label: "Test", color: "text-purple-400", hoverBg: "hover:bg-purple-800/30", borderColor: "border-purple-800" },
lint: { icon: Sparkles, label: "Lint", color: "text-amber-400", hoverBg: "hover:bg-amber-800/30", borderColor: "border-amber-800" },
"type-check": { icon: FileCheck, label: "Type Check", color: "text-cyan-400", hoverBg: "hover:bg-cyan-800/30", borderColor: "border-cyan-800" },
check: { icon: ShieldCheck, label: "Check All", color: "text-green-400", hoverBg: "hover:bg-green-800/30", borderColor: "border-green-800" },
install: { icon: Plug, label: "Install", color: "text-green-400", hoverBg: "hover:bg-green-800/30", borderColor: "border-green-800" },
uninstall: { icon: Unplug, label: "Uninstall", color: "text-red-400", hoverBg: "hover:bg-red-800/30", borderColor: "border-red-800" },
}
const DEV_ACTIONS = ["build", "test", "lint", "type-check", "check"]
@@ -41,67 +40,20 @@ export interface ActionOutput {
interface ProgramActionsProps {
name: string
actions: string[]
active?: boolean | null
kind?: string | null
compact?: boolean
onOutput?: (output: ActionOutput) => void
}
/** install/uninstall (activate) is meaningful only for a tool (a PATH deployment).
* Services, jobs, and static (caddy) deployments are managed through their
* deployment — never install/uninstall here. */
function showsActivation(kind: string | null | undefined): boolean {
return kind === "tool"
}
function visibleActions(
actions: string[],
active: boolean | null | undefined,
compact: boolean,
): string[] {
// `active` is the uniform lifecycle state (on PATH / running / served), not a
// PATH lookup — so it's correct for tools, services, jobs, and static frontends.
if (compact) {
// Table: only the activate/deactivate toggle based on state
if (active === true) return actions.includes("uninstall") ? ["uninstall"] : []
if (active === false) return actions.includes("install") ? ["install"] : []
// null — show install if available
return actions.includes("install") ? ["install"] : []
}
// Detail page: dev actions always, activate/deactivate based on state
const visible: string[] = []
for (const a of DEV_ACTIONS) {
if (actions.includes(a)) visible.push(a)
}
if (active === true) {
if (actions.includes("uninstall")) visible.push("uninstall")
} else if (active === false) {
if (actions.includes("install")) visible.push("install")
} else {
// null — show both if available
if (actions.includes("install")) visible.push("install")
if (actions.includes("uninstall")) visible.push("uninstall")
}
return visible
}
export function ProgramActions({
name,
actions,
active,
kind,
compact,
onOutput,
}: ProgramActionsProps) {
const { mutate, isPending } = useProgramAction()
const [runningAction, setRunningAction] = useState<string | null>(null)
// Drop install/uninstall for kinds that activate via a deployment.
const allowed = showsActivation(kind)
? actions
: actions.filter((a) => a !== "install" && a !== "uninstall")
const visible = visibleActions(allowed, active, !!compact)
const visible = DEV_ACTIONS.filter((a) => actions.includes(a))
const handleAction = (action: string) => {
setRunningAction(action)
@@ -111,13 +63,13 @@ export function ProgramActions({
{
onSuccess: (data) => {
setRunningAction(null)
if (!compact && DEV_ACTIONS.includes(action) && data.output) {
if (!compact && data.output) {
onOutput?.({ action, text: data.output, ok: true })
}
},
onError: (err) => {
setRunningAction(null)
if (!compact && DEV_ACTIONS.includes(action)) {
if (!compact) {
let text = String(err)
try {
const parsed = JSON.parse((err as Error).message)

29
app/src/components/ProgramCard.tsx
View File

@@ -2,16 +2,29 @@ import { Link } from "react-router-dom"
import type { ProgramSummary } from "@/types"
import { KindBadge } from "./KindBadge"
import { StackBadge } from "./StackBadge"
import { ProgramActions } from "./ProgramActions"
interface ProgramCardProps {
program: ProgramSummary
}
export function ProgramCard({ program }: ProgramCardProps) {
// The dot reflects the uniform lifecycle state (a tool on PATH, a service
// running, a static site served). Lifecycle controls live on the detail page's
// Deployment section, not here — a card just shows state and links through.
const dot =
program.active === true
? "bg-green-500"
: program.active === false
? "bg-[var(--muted)]"
: "bg-transparent border border-[var(--muted)]"
return (
<div className="relative bg-[var(--card)] border border-[var(--border)] rounded-lg p-5 hover:border-[var(--primary)] transition-colors">
<div className="flex items-start justify-between mb-2">
<div className="flex items-center gap-2 mb-2">
<span
className={`h-2 w-2 rounded-full shrink-0 ${dot}`}
title={program.active === true ? "active" : program.active === false ? "inactive" : "no deployment"}
/>
<Link
to={`/programs/${program.id}`}
className="text-base font-semibold hover:text-[var(--primary)] transition-colors after:absolute after:inset-0"
@@ -26,18 +39,8 @@ export function ProgramCard({ program }: ProgramCardProps) {
</div>
{program.description && (
<p className="text-sm text-[var(--muted)] mb-3">{program.description}</p>
<p className="text-sm text-[var(--muted)]">{program.description}</p>
)}
<div className="relative z-10">
<ProgramActions
name={program.id}
actions={program.actions}
active={program.active}
kind={program.kind}
compact
/>
</div>
</div>
)
}

102
app/src/components/detail/DeploymentsSection.tsx
View File

@@ -1,13 +1,15 @@
import { useState } from "react"
import { Link } from "react-router-dom"
import { Server, Clock, Plus } from "lucide-react"
import { Server, Clock, Plus, Loader2, ExternalLink } from "lucide-react"
import type { ProgramDetail } from "@/types"
import { useServices, useJobs } from "@/services/api/hooks"
import { useServices, useJobs, useProgramAction } from "@/services/api/hooks"
import { subdomainUrl } from "@/lib/labels"
import { CreateDeploymentForm, type CreatePrefill } from "./CreateDeploymentForm"
/** The services and jobs that deploy a program. A program → 0-N deployments;
* these are convenience links, not ownership (a deployment can run anything,
* program-backed or not). The Create button prefills the kind-aware wizard. */
/** How a program is deployed, and its lifecycle. A program → 0-N deployments.
* Its own path (tool) / caddy (static) deployment is 1:1 with the program, so its
* lifecycle is shown inline here; service/job deployments link to their own pages
* where start/stop lives. This is the single home for "how this program runs". */
export function DeploymentsSection({ program }: { program: ProgramDetail }) {
const { services, jobs, kind } = program
const none = services.length === 0 && jobs.length === 0
@@ -31,7 +33,7 @@ export function DeploymentsSection({ program }: { program: ProgramDetail }) {
<div className="bg-[var(--card)] border border-[var(--border)] rounded-lg p-5 mb-6">
<div className="flex items-center justify-between mb-1">
<h2 className="text-sm font-semibold text-[var(--muted)] uppercase tracking-wider">
Deployments
Deployment
</h2>
<button
onClick={() => setCreating((c) => !c)}
@@ -41,9 +43,13 @@ export function DeploymentsSection({ program }: { program: ProgramDetail }) {
</button>
</div>
<p className="text-xs text-[var(--muted)] mb-4">
Services and jobs that run this program.
How this program is materialized into the runtime.
</p>
{/* The program's own path/caddy deployment — its lifecycle, inline. */}
{kind === "tool" && <PathLifecycle name={program.id} active={program.active} />}
{kind === "static" && <StaticStatus name={program.id} active={program.active} />}
{creating && (
<CreateDeploymentForm
prefill={prefill}
@@ -52,16 +58,17 @@ export function DeploymentsSection({ program }: { program: ProgramDetail }) {
/>
)}
{none && !creating ? (
<p className="text-sm text-[var(--muted)]">
{kind === "service"
? "No service yet — this program isn't deployed."
: kind === "tool"
? "Installed on PATH. Add a job to also run it on a timer."
: "None."}
</p>
{/* Service/job deployments — managed on their own detail pages. */}
{none ? (
(kind === "tool" || kind === "static") ? null : (
<p className="text-sm text-[var(--muted)]">
{kind === "service"
? "No service yet — this program isn't deployed."
: "No deployment yet."}
</p>
)
) : (
<div className="space-y-1.5">
<div className="space-y-1.5 mt-1">
{services.map((s) => (
<Link
key={s}
@@ -89,3 +96,66 @@ export function DeploymentsSection({ program }: { program: ProgramDetail }) {
</div>
)
}
function Dot({ active }: { active: boolean | null }) {
const cls =
active === true
? "bg-green-500"
: active === false
? "bg-[var(--muted)]"
: "bg-transparent border border-[var(--muted)]"
return <span className={`h-2 w-2 rounded-full shrink-0 ${cls}`} />
}
/** A tool's PATH deployment: install/uninstall is its start/stop (manager=path). */
function PathLifecycle({ name, active }: { name: string; active: boolean | null }) {
const { mutate, isPending } = useProgramAction()
const installed = active === true
return (
<div className="flex items-center justify-between rounded border border-[var(--border)] px-3 py-2 mb-3">
<div className="flex items-center gap-2 text-sm">
<Dot active={active} />
<span>{installed ? "Installed on PATH" : "Not installed"}</span>
<span className="text-xs text-[var(--muted)]">manager: path</span>
</div>
<button
onClick={() => mutate({ name, action: installed ? "uninstall" : "install" })}
disabled={isPending}
className={`flex items-center gap-1.5 px-2 py-1 text-sm rounded border transition-colors disabled:opacity-40 ${
installed
? "border-red-800 text-red-400 hover:bg-red-800/30"
: "border-green-800 text-green-400 hover:bg-green-800/30"
}`}
>
{isPending && <Loader2 size={14} className="animate-spin" />}
{installed ? "Uninstall" : "Install"}
</button>
</div>
)
}
/** A static (caddy) deployment: served by the gateway from its built dir. */
function StaticStatus({ name, active }: { name: string; active: boolean | null }) {
const url = subdomainUrl(name)
const served = active === true
return (
<div className="flex items-center justify-between rounded border border-[var(--border)] px-3 py-2 mb-3">
<div className="flex items-center gap-2 text-sm">
<Dot active={active} />
<span>{served ? "Served by the gateway" : "Not built yet"}</span>
<span className="text-xs text-[var(--muted)]">manager: caddy</span>
</div>
{url && served && (
<a
href={url}
target="_blank"
rel="noopener noreferrer"
className="inline-flex items-center gap-1 text-sm text-[var(--primary)] hover:underline"
>
{name}
<ExternalLink size={11} className="opacity-60" />
</a>
)}
</div>
)
}