ZGI UI

import { BrainCircuitIcon, DatabaseIcon, GitBranchIcon } from "lucide-react"

import { WorkflowNodeCard } from "@/components/ui/workflow-node-card"

export function WorkflowNodeCardDemo() {
  return (
    <div className="grid w-full max-w-4xl gap-3 lg:grid-cols-2">
      <WorkflowNodeCard
        icon={<BrainCircuitIcon className="size-5" />}
        title="Classify intent"
        type="LLM"
        status="running"
        description="Classify the user request before routing it to a workflow branch."
        inputs={[
          { label: "conversation.message", type: "string" },
          { label: "customer.plan", type: "string" },
        ]}
        outputs={[
          { label: "intent", type: "enum" },
          { label: "confidence", type: "number" },
        ]}
        footer="ZGI Agent Pro · temperature 0.2"
      />
      <WorkflowNodeCard
        icon={<DatabaseIcon className="size-5" />}
        title="Retrieve knowledge"
        type="RAG"
        status="success"
        description="Search approved product docs and attach citations to the answer."
        inputs={[{ label: "intent", type: "string" }]}
        outputs={[
          { label: "documents", type: "array" },
          { label: "citations", type: "array" },
        ]}
      />
      <WorkflowNodeCard
        icon={<GitBranchIcon className="size-5" />}
        title="Escalation branch"
        type="If / Else"
        status="waiting"
        description="Route low confidence cases to a human review queue."
        inputs={[{ label: "confidence", type: "number" }]}
        outputs={[
          { label: "self_serve", type: "boolean" },
          { label: "needs_handoff", type: "boolean" },
        ]}
      />
    </div>
  )
}

import { ArchiveIcon, PencilIcon } from "lucide-react"

import { DatasetCard } from "@/components/ui/dataset-card"

export function DatasetCardDemo() {
  return (
    <div className="grid w-full max-w-3xl gap-3 sm:grid-cols-2">
      <DatasetCard
        title="Support Knowledge"
        description="Policies, billing answers, and troubleshooting guides for customer-facing agents."
        status="ready"
        documentCount={128}
        segmentCount={8420}
        updatedAt="2 hours ago"
        visibility="workspace"
        tags={["Support", "RAG", "Production"]}
        actions={[
          { label: "Edit", icon: <PencilIcon /> },
          { label: "Archive", icon: <ArchiveIcon /> },
        ]}
      />
      <DatasetCard
        title="Product Docs"
        description="Markdown and PDF documentation currently rebuilding embeddings."
        status="indexing"
        documentCount={42}
        segmentCount={1960}
        updatedAt="running"
        visibility="private"
        tags={["Docs", "Embedding"]}
      />
    </div>
  )
}

import { RefreshCcwIcon, SettingsIcon, SparklesIcon } from "lucide-react"

import { ProviderStatusCard } from "@/components/ui/provider-status-card"

export function ProviderStatusCardDemo() {
  return (
    <ProviderStatusCard
      className="w-full max-w-xl"
      name="ZGI Inference"
      description="Primary provider for chat, workflow, and embedding models."
      status="connected"
      icon={<SparklesIcon className="size-5" />}
      modelCount={18}
      balance="$1,284"
      latency="184 ms"
      lastSync="Synced 4 min ago"
      actions={[
        { label: "Sync", icon: <RefreshCcwIcon /> },
        { label: "Settings", icon: <SettingsIcon /> },
      ]}
    />
  )
}