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

Less stack-centric and location-centric model.

Browse Source
This commit is contained in:
Paul Payne
2026-06-13 17:26:49 -07:00
parent 7bf98c17b7
commit 400e0b253b
33 changed files with 1112 additions and 408 deletions
Download Patch File Download Diff File Expand all files Collapse all files

119
app/src/pages/ProgramDetail.tsx
View File

@@ -10,7 +10,6 @@ export function ProgramDetailPage() {
useEventStream()
const { name } = useParams<{ name: string }>()
const { data: component, isLoading, error, refetch } = useProgram(name ?? "")
const isTool = component?.behavior === "tool"
const [actionOutput, setActionOutput] = useState<ActionOutput | null>(null)
if (isLoading) {
@@ -51,53 +50,81 @@ export function ProgramDetailPage() {
<p className="text-sm text-[var(--muted)] -mt-4 mb-6">{component.description}</p>
)}
{isTool && (
<div className="bg-[var(--card)] border border-[var(--border)] rounded-lg p-5 mb-6">
<h2 className="text-sm font-semibold text-[var(--muted)] uppercase tracking-wider mb-1">
Tool Info
</h2>
<p className="text-xs text-[var(--muted)] mb-4">
How this tool is packaged and what it depends on.
</p>
<div className="grid grid-cols-2 gap-x-6 gap-y-2 text-sm mb-4">
{component.source && (
<>
<span className="text-[var(--muted)]">Source</span>
<span className="font-mono">{component.source}</span>
</>
)}
{component.version && (
<>
<span className="text-[var(--muted)]">Version</span>
<span>{component.version}</span>
</>
)}
{component.runner && (
<>
<span className="text-[var(--muted)]">Runner</span>
<span>{runnerLabel(component.runner)}</span>
</>
)}
<span className="text-[var(--muted)]">Installed</span>
<span>{component.installed ? "Yes" : "No"}</span>
</div>
{component.system_dependencies.length > 0 && (
<div className="mb-4">
<span className="text-sm text-[var(--muted)] block mb-1">System Dependencies</span>
<div className="flex flex-wrap gap-1">
{component.system_dependencies.map((dep) => (
<span
key={dep}
className="text-xs px-2 py-0.5 rounded bg-amber-900/30 text-amber-400 border border-amber-800"
>
{dep}
</span>
))}
</div>
</div>
<div className="bg-[var(--card)] border border-[var(--border)] rounded-lg p-5 mb-6">
<h2 className="text-sm font-semibold text-[var(--muted)] uppercase tracking-wider mb-1">
Program Info
</h2>
<p className="text-xs text-[var(--muted)] mb-4">
Where the source lives and how castle works with it.
</p>
<div className="grid grid-cols-2 gap-x-6 gap-y-2 text-sm mb-4">
{component.source && (
<>
<span className="text-[var(--muted)]">Source</span>
<span className="font-mono break-all">{component.source}</span>
</>
)}
{component.repo && (
<>
<span className="text-[var(--muted)]">Repo</span>
<span className="font-mono break-all">
{component.repo}
{component.ref ? ` @ ${component.ref}` : ""}
</span>
</>
)}
{component.version && (
<>
<span className="text-[var(--muted)]">Version</span>
<span>{component.version}</span>
</>
)}
{component.runner && (
<>
<span className="text-[var(--muted)]">Runner</span>
<span>{runnerLabel(component.runner)}</span>
</>
)}
{component.installed !== null && (
<>
<span className="text-[var(--muted)]">Installed</span>
<span>{component.installed ? "Yes" : "No"}</span>
</>
)}
</div>
)}
{component.commands && Object.keys(component.commands).length > 0 && (
<div className="mb-4">
<span className="text-sm text-[var(--muted)] block mb-1">Commands</span>
<div className="space-y-1">
{Object.entries(component.commands).map(([verb, cmds]) => (
<div key={verb} className="flex gap-2 text-xs">
<span className="text-[var(--muted)] w-20 shrink-0">{verb}</span>
<span className="font-mono break-all">
{cmds.map((argv) => argv.join(" ")).join(" && ")}
</span>
</div>
))}
</div>
</div>
)}
{component.system_dependencies.length > 0 && (
<div className="mb-4">
<span className="text-sm text-[var(--muted)] block mb-1">System Dependencies</span>
<div className="flex flex-wrap gap-1">
{component.system_dependencies.map((dep) => (
<span
key={dep}
className="text-xs px-2 py-0.5 rounded bg-amber-900/30 text-amber-400 border border-amber-800"
>
{dep}
</span>
))}
</div>
</div>
)}
</div>
<ConfigPanel component={component} configSection="programs" onRefetch={refetch} />
</div>