refactor: Update component specifications to use 'program' and 'behavior' attributes, enhancing clarity and consistency across the application

This commit is contained in:
2026-02-23 22:56:18 -08:00
parent 0d36e4f72a
commit efab2a7893
27 changed files with 258 additions and 393 deletions

View File

@@ -1,9 +1,10 @@
import { useState } from "react"
import { useParams } from "react-router-dom"
import { useProgram, useEventStream, useToolDetail } from "@/services/api/hooks"
import { runnerLabel } from "@/lib/labels"
import { DetailHeader } from "@/components/detail/DetailHeader"
import { ConfigPanel } from "@/components/detail/ConfigPanel"
import { ProgramActions } from "@/components/ProgramActions"
import { ProgramActions, ActionOutputPanel, type ActionOutput } from "@/components/ProgramActions"
export function ComponentDetailPage() {
useEventStream()
@@ -11,6 +12,7 @@ export function ComponentDetailPage() {
const { data: component, isLoading, error, refetch } = useProgram(name ?? "")
const isTool = component?.behavior === "tool"
const { data: toolDetail } = useToolDetail(isTool ? (name ?? "") : "")
const [actionOutput, setActionOutput] = useState<ActionOutput | null>(null)
if (isLoading) {
return (
@@ -37,9 +39,15 @@ export function ComponentDetailPage() {
stack={component.stack}
source={component.source}
>
<ProgramActions name={component.id} actions={component.actions} installed={component.installed} />
<ProgramActions name={component.id} actions={component.actions} installed={component.installed} onOutput={setActionOutput} />
</DetailHeader>
{actionOutput && actionOutput.action && (
<div className="-mt-2 mb-6">
<ActionOutputPanel output={actionOutput} onDismiss={() => setActionOutput(null)} />
</div>
)}
{component.description && (
<p className="text-sm text-[var(--muted)] -mt-4 mb-6">{component.description}</p>
)}

View File

@@ -89,8 +89,8 @@ export function ServiceDetailPage() {
<span className="flex items-center gap-1">
<Terminal size={12} />
{runnerLabel(runner)}
{(component.manifest.run as Record<string, string>)?.tool && (
<> &middot; {(component.manifest.run as Record<string, string>).tool}</>
{(component.manifest.run as Record<string, string>)?.program && (
<> &middot; {(component.manifest.run as Record<string, string>).program}</>
)}
</span>
</>