refactor: Update component specifications to use 'program' and 'behavior' attributes, enhancing clarity and consistency across the application
This commit is contained in:
@@ -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>
|
||||
)}
|
||||
|
||||
@@ -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 && (
|
||||
<> · {(component.manifest.run as Record<string, string>).tool}</>
|
||||
{(component.manifest.run as Record<string, string>)?.program && (
|
||||
<> · {(component.manifest.run as Record<string, string>).program}</>
|
||||
)}
|
||||
</span>
|
||||
</>
|
||||
|
||||
Reference in New Issue
Block a user