Merge commit 'a8390532f7' as 'ai-context/workbench-ui'

ai-context/workbench-ui/src/model/agent-tools-table.tsx

@@ -0,0 +1,45 @@
+import { createColumnHelper } from "@tanstack/react-table";
+
+/**
+ * Agent Tool data structure for the tools table
+ * Represents an agent tool with its metadata and configuration
+ */
+export type AgentTool = {
+  id: string; // Unique identifier for the tool
+  name: string; // Human-readable name for the tool
+  description: string; // Description of what the tool does
+  type: string; // Type of the tool
+};
+
+// Create a column helper instance for type-safe column definitions
+export const columnHelper = createColumnHelper<AgentTool>();
+
+/**
+ * Column definitions for the agent tools table
+ * Defines how each column should be rendered and what data it displays
+ */
+export const columns = [
+  // Tool ID column - displays the tool identifier
+  columnHelper.accessor("id", {
+    header: "Tool ID",
+    cell: (info) => info.getValue(),
+  }),
+
+  // Name column - displays the human-readable tool name
+  columnHelper.accessor("name", {
+    header: "Name",
+    cell: (info) => info.getValue(),
+  }),
+
+  // Description column - displays the tool description
+  columnHelper.accessor("description", {
+    header: "Description",
+    cell: (info) => info.getValue(),
+  }),
+
+  // Type column - displays the tool type
+  columnHelper.accessor("type", {
+    header: "Type",
+    cell: (info) => info.getValue(),
+  }),
+];

ai-context/workbench-ui/src/model/collection-table.tsx

@@ -0,0 +1,101 @@
+import { createColumnHelper } from "@tanstack/react-table";
+import { Tag, Checkbox } from "@chakra-ui/react";
+import { CollectionMetadata } from "@trustgraph/react-state";
+
+// Create a column helper instance for type-safe column definitions
+export const columnHelper = createColumnHelper<CollectionMetadata>();
+
+/**
+ * Helper function to determine the selection state of the table header checkbox
+ * Returns the appropriate state for the "select all" checkbox
+ * @param {Object} table - React Table instance
+ * @returns {boolean|string} - true if all selected, "indeterminate" if some selected, false if none
+ */
+const selectionState = (table) => {
+  if (table.getIsAllRowsSelected()) return true;
+  if (table.getIsSomeRowsSelected()) return "indeterminate";
+  return false;
+};
+
+/**
+ * Column definitions for the collection table
+ * Defines how each column should be rendered and what data it displays
+ */
+export const columns = [
+  // Selection column - provides row selection functionality with checkboxes
+  columnHelper.display({
+    id: "select",
+    header: ({ table }) => (
+      // Header checkbox for selecting/deselecting all rows
+      <Checkbox.Root
+        size="sm"
+        variant="solid"
+        checked={selectionState(table)}
+        onChange={table.getToggleAllRowsSelectedHandler()}
+      >
+        <Checkbox.HiddenInput />
+        <Checkbox.Control />
+      </Checkbox.Root>
+    ),
+    cell: ({ row }) => (
+      // Individual row checkbox for selecting/deselecting single rows
+      <Checkbox.Root
+        size="sm"
+        variant="solid"
+        checked={row.getIsSelected()}
+        onChange={row.getToggleSelectedHandler()}
+      >
+        <Checkbox.HiddenInput />
+        <Checkbox.Control />
+      </Checkbox.Root>
+    ),
+  }),
+
+  // Collection ID column - displays the unique collection identifier
+  columnHelper.accessor("collection", {
+    header: "Collection ID",
+    cell: (info) => info.getValue(),
+  }),
+
+  // Name column - displays the display name of the collection
+  columnHelper.accessor("name", {
+    header: "Name",
+    cell: (info) => info.getValue(),
+  }),
+
+  // Description column - displays collection description
+  columnHelper.accessor("description", {
+    header: "Description",
+    cell: (info) => info.getValue(),
+  }),
+
+  // Tags column - displays collection tags as visual tag components
+  columnHelper.accessor("tags", {
+    header: "Tags",
+    cell: (info) =>
+      // Render each tag as a Chakra UI Tag component with margin spacing
+      info.getValue()?.map((tag) => (
+        <Tag.Root key={tag} mr={2} size="sm">
+          <Tag.Label>{tag}</Tag.Label>
+        </Tag.Root>
+      )),
+  }),
+
+  // Created timestamp column
+  columnHelper.accessor("created_at", {
+    header: "Created",
+    cell: (info) => {
+      const date = new Date(info.getValue());
+      return date.toLocaleString();
+    },
+  }),
+
+  // Updated timestamp column
+  columnHelper.accessor("updated_at", {
+    header: "Updated",
+    cell: (info) => {
+      const date = new Date(info.getValue());
+      return date.toLocaleString();
+    },
+  }),
+];

ai-context/workbench-ui/src/model/document-table.tsx

@@ -0,0 +1,108 @@
+import { createColumnHelper } from "@tanstack/react-table";
+import { Tag, Checkbox } from "@chakra-ui/react";
+import { timeString } from "../utils/time-string.ts";
+
+/**
+ * Document data structure for the document table
+ * Represents a single document with its metadata and properties
+ */
+export type Document = {
+  id: string; // Unique identifier for the document
+  title: string; // Display title of the document
+  time: number; // Timestamp (likely Unix timestamp)
+  kind: string; // Document type/category
+  user: string; // User who created/owns the document
+  comments: string; // Description or comments about the document
+  tags: string[]; // Array of tags associated with the document
+  metadata: {
+    // Structured metadata, subject-predicate-object form
+    s: { v: string; e: boolean }; // Subject with value and enabled flag
+    p: { v: string; e: boolean }; // Predicate with value and enabled flag
+    o: { v: string; e: boolean }; // Object with value and enabled flag
+  }[];
+};
+
+// Create a column helper instance for type-safe column definitions
+export const columnHelper = createColumnHelper<Document>();
+
+/**
+ * Helper function to determine the selection state of the table header
+ * checkbox
+ * Returns the appropriate state for the "select all" checkbox
+ * @param {Object} table - React Table instance
+ * @returns {boolean|string} - true if all selected, "indeterminate" if some
+ * selected, false if none
+ */
+const selectionState = (table) => {
+  if (table.getIsAllRowsSelected()) return true;
+  if (table.getIsSomeRowsSelected()) return "indeterminate";
+  return false;
+};
+
+/**
+ * Column definitions for the document table
+ * Defines how each column should be rendered and what data it displays
+ */
+export const columns = [
+  // Selection column - provides row selection functionality with checkboxes
+  columnHelper.display({
+    id: "select",
+    header: ({ table }) => (
+      // Header checkbox for selecting/deselecting all rows
+      <Checkbox.Root
+        size="sm"
+        variant="solid"
+        checked={selectionState(table)}
+        onChange={table.getToggleAllRowsSelectedHandler()}
+      >
+        <Checkbox.HiddenInput />
+        <Checkbox.Control />
+      </Checkbox.Root>
+    ),
+    cell: ({ row }) => (
+      // Individual row checkbox for selecting/deselecting single rows
+      <Checkbox.Root
+        size="sm"
+        variant="solid"
+        checked={row.getIsSelected()}
+        onChange={row.getToggleSelectedHandler()}
+      >
+        <Checkbox.HiddenInput />
+        <Checkbox.Control />
+      </Checkbox.Root>
+    ),
+  }),
+
+  // Title column - displays the document title
+  columnHelper.accessor("title", {
+    header: "Title",
+    cell: (info) => info.getValue(),
+  }),
+
+  // Time column - displays formatted timestamp
+  columnHelper.accessor("time", {
+    header: "Time",
+    cell: (info) => timeString(info.getValue()), // Convert to readable string
+  }),
+
+  // Description column - displays document comments/description
+  // Note: Maps to 'comments' field but displays as 'Description' for better
+  // UX
+  columnHelper.accessor("comments", {
+    id: "description",
+    header: "Description",
+    cell: (info) => info.getValue(),
+  }),
+
+  // Tags column - displays document tags as visual tag components
+  columnHelper.accessor("tags", {
+    header: "Tags",
+    cell: (info) =>
+      // Render each tag as a Chakra UI Tag component with margin spacing
+      info.getValue()?.map((t) => (
+        <Tag.Root key={t} mr={2}>
+          <Tag.Label>{t}</Tag.Label>
+        </Tag.Root>
+      )),
+  }),
+];

ai-context/workbench-ui/src/model/flow-class-table.tsx

@@ -0,0 +1,160 @@
+import { createColumnHelper } from "@tanstack/react-table";
+import { Checkbox, Badge, HStack, Text } from "@chakra-ui/react";
+import { FlowClassDefinition } from "@trustgraph/react-state";
+
+/**
+ * Flow class data structure for the flow class table
+ * Represents a single flow class with its metadata and properties
+ */
+export type FlowClassRow = FlowClassDefinition;
+
+// Create a column helper instance for type-safe column definitions
+export const columnHelper = createColumnHelper<FlowClassRow>();
+
+/**
+ * Helper function to determine the selection state of the table header
+ * checkbox
+ * Returns the appropriate state for the "select all" checkbox
+ * @param {Object} table - React Table instance
+ * @returns {boolean|string} - true if all selected, "indeterminate" if some
+ * selected, false if none
+ */
+const selectionState = (table) => {
+  if (table.getIsAllRowsSelected()) return true;
+  if (table.getIsSomeRowsSelected()) return "indeterminate";
+  return false;
+};
+
+/**
+ * Column definitions for the flow class table
+ * Defines how each column should be rendered and what data it displays
+ */
+export const flowClassColumns = [
+  // Selection column - provides row selection functionality with checkboxes
+  columnHelper.display({
+    id: "select",
+    header: ({ table }) => (
+      // Header checkbox for selecting/deselecting all rows
+      <Checkbox.Root
+        size="sm"
+        variant="solid"
+        checked={selectionState(table)}
+        onChange={table.getToggleAllRowsSelectedHandler()}
+      >
+        <Checkbox.HiddenInput />
+        <Checkbox.Control />
+      </Checkbox.Root>
+    ),
+    cell: ({ row }) => (
+      // Individual row checkbox for selecting/deselecting single rows
+      <Checkbox.Root
+        size="sm"
+        variant="solid"
+        checked={row.getIsSelected()}
+        onChange={row.getToggleSelectedHandler()}
+      >
+        <Checkbox.HiddenInput />
+        <Checkbox.Control />
+      </Checkbox.Root>
+    ),
+  }),
+
+  // ID column - displays the flow class ID
+  columnHelper.display({
+    id: "id",
+    header: "ID",
+    cell: ({ row }) => {
+      const flowClass = row.original;
+      return (
+        <Text fontFamily="mono" fontSize="sm">
+          {flowClass.id || "No ID"}
+        </Text>
+      );
+    },
+  }),
+
+  // Description column - displays flow class description
+  columnHelper.display({
+    id: "description",
+    header: "Description",
+    cell: ({ row }) => {
+      const flowClass = row.original;
+      const description = flowClass.description;
+      return (
+        <Text fontSize="sm" noOfLines={2}>
+          {description || "No description"}
+        </Text>
+      );
+    },
+  }),
+
+  // Processors column - shows count of class and flow processors
+  columnHelper.display({
+    id: "processors",
+    header: "Processors",
+    cell: ({ row }) => {
+      const flowClass = row.original;
+      const classCount = Object.keys(flowClass.class || {}).length;
+      const flowCount = Object.keys(flowClass.flow || {}).length;
+
+      return (
+        <HStack gap={2}>
+          <Badge colorPalette="blue" size="sm">
+            {classCount} class
+          </Badge>
+          <Badge colorPalette="green" size="sm">
+            {flowCount} flow
+          </Badge>
+        </HStack>
+      );
+    },
+  }),
+
+  // Interfaces column - shows count of interfaces
+  columnHelper.display({
+    id: "interfaces",
+    header: "Interfaces",
+    cell: ({ row }) => {
+      const flowClass = row.original;
+      const interfaceCount = Object.keys(flowClass.interfaces || {}).length;
+
+      return (
+        <Badge colorPalette="purple" size="sm">
+          {interfaceCount} interfaces
+        </Badge>
+      );
+    },
+  }),
+
+  // Tags column - displays flow class tags
+  columnHelper.display({
+    id: "tags",
+    header: "Tags",
+    cell: ({ row }) => {
+      const flowClass = row.original;
+      const tags = flowClass.tags || [];
+      if (tags.length === 0) {
+        return (
+          <Text fontSize="xs" color="fg.muted">
+            No tags
+          </Text>
+        );
+      }
+
+      return (
+        <HStack gap={1} flexWrap="wrap">
+          {tags.slice(0, 3).map((tag, index) => (
+            <Badge key={index} colorPalette="gray" size="xs" variant="outline">
+              {tag}
+            </Badge>
+          ))}
+          {tags.length > 3 && (
+            <Text fontSize="xs" color="fg.muted">
+              +{tags.length - 3} more
+            </Text>
+          )}
+        </HStack>
+      );
+    },
+  }),
+];

ai-context/workbench-ui/src/model/flow-table.tsx

@@ -0,0 +1,103 @@
+import { createColumnHelper } from "@tanstack/react-table";
+import { Checkbox } from "@chakra-ui/react";
+import ParameterDisplay from "../components/flows/ParameterDisplay";
+
+/**
+ * Flow data structure for the flow table
+ * Represents a single flow with its metadata and properties
+ */
+export type Flow = {
+  id: string; // Unique identifier for the flow
+  "class-name": string; // Flow class ID
+  description: string; // Human-readable description
+  parameters?: { [key: string]: unknown }; // Flow parameters
+};
+
+// Create a column helper instance for type-safe column definitions
+export const columnHelper = createColumnHelper<Flow>();
+
+/**
+ * Helper function to determine the selection state of the table header
+ * checkbox
+ * Returns the appropriate state for the "select all" checkbox
+ * @param {Object} table - React Table instance
+ * @returns {boolean|string} - true if all selected, "indeterminate" if some
+ * selected, false if none
+ */
+const selectionState = (table) => {
+  if (table.getIsAllRowsSelected()) return true;
+  if (table.getIsSomeRowsSelected()) return "indeterminate";
+  return false;
+};
+
+/**
+ * Column definitions for the flow table
+ * Defines how each column should be rendered and what data it displays
+ */
+export const columns = [
+  // Selection column - provides row selection functionality with checkboxes
+  columnHelper.display({
+    id: "select",
+    header: ({ table }) => (
+      // Header checkbox for selecting/deselecting all rows
+      <Checkbox.Root
+        size="sm"
+        variant="solid"
+        checked={selectionState(table)}
+        onChange={table.getToggleAllRowsSelectedHandler()}
+      >
+        <Checkbox.HiddenInput />
+        <Checkbox.Control />
+      </Checkbox.Root>
+    ),
+    cell: ({ row }) => (
+      // Individual row checkbox for selecting/deselecting single rows
+      <Checkbox.Root
+        size="sm"
+        variant="solid"
+        checked={row.getIsSelected()}
+        onChange={row.getToggleSelectedHandler()}
+      >
+        <Checkbox.HiddenInput />
+        <Checkbox.Control />
+      </Checkbox.Root>
+    ),
+  }),
+
+  // ID column - displays the flow ID
+  columnHelper.accessor("id", {
+    header: "ID",
+    cell: (info) => info.getValue(),
+  }),
+
+  // Class name column - displays flow class
+  columnHelper.accessor("class-name", {
+    header: "Flow class",
+    cell: (info) => info.getValue(),
+  }),
+
+  // Description column - displays flow description
+  columnHelper.accessor("description", {
+    id: "description",
+    header: "Description",
+    cell: (info) => info.getValue(),
+  }),
+
+  // Parameters column - displays flow parameters with descriptions
+  columnHelper.accessor("parameters", {
+    id: "parameters",
+    header: "Parameters",
+    cell: (info) => {
+      const row = info.row.original;
+      const parameters = info.getValue();
+
+      // Use the ParameterDisplay component to show parameters with descriptions
+      return (
+        <ParameterDisplay
+          flowClassName={row["class-name"]}
+          parameters={parameters}
+        />
+      );
+    },
+  }),
+];

ai-context/workbench-ui/src/model/knowledge-core-table.tsx

@@ -0,0 +1,68 @@
+import { createColumnHelper } from "@tanstack/react-table";
+import { Checkbox } from "@chakra-ui/react";
+
+/**
+ * Knowledge core data structure for the knowledge core table
+ * Represents a single knowledge core with its metadata and properties
+ */
+export type KnowledgeCore = {
+  id: string; // Unique identifier for the knowledge core
+};
+
+// Create a column helper instance for type-safe column definitions
+export const columnHelper = createColumnHelper<KnowledgeCore>();
+
+/**
+ * Helper function to determine the selection state of the table header
+ * checkbox
+ * Returns the appropriate state for the "select all" checkbox
+ * @param {Object} table - React Table instance
+ * @returns {boolean|string} - true if all selected, "indeterminate" if some
+ * selected, false if none
+ */
+const selectionState = (table) => {
+  if (table.getIsAllRowsSelected()) return true;
+  if (table.getIsSomeRowsSelected()) return "indeterminate";
+  return false;
+};
+
+/**
+ * Column definitions for the flow table
+ * Defines how each column should be rendered and what data it displays
+ */
+export const columns = [
+  // Selection column - provides row selection functionality with checkboxes
+  columnHelper.display({
+    id: "select",
+    header: ({ table }) => (
+      // Header checkbox for selecting/deselecting all rows
+      <Checkbox.Root
+        size="sm"
+        variant="solid"
+        checked={selectionState(table)}
+        onChange={table.getToggleAllRowsSelectedHandler()}
+      >
+        <Checkbox.HiddenInput />
+        <Checkbox.Control />
+      </Checkbox.Root>
+    ),
+    cell: ({ row }) => (
+      // Individual row checkbox for selecting/deselecting single rows
+      <Checkbox.Root
+        size="sm"
+        variant="solid"
+        checked={row.getIsSelected()}
+        onChange={row.getToggleSelectedHandler()}
+      >
+        <Checkbox.HiddenInput />
+        <Checkbox.Control />
+      </Checkbox.Root>
+    ),
+  }),
+
+  // ID column - displays the flow ID
+  columnHelper.accessor("id", {
+    header: "ID",
+    cell: (info) => info.getValue(),
+  }),
+];

ai-context/workbench-ui/src/model/mcp-tools-table.tsx

@@ -0,0 +1,38 @@
+import { createColumnHelper } from "@tanstack/react-table";
+
+/**
+ * MCP Tool data structure for the tools table
+ * Represents an MCP tool with its configuration
+ */
+export type McpTool = {
+  id: string; // Unique identifier for the tool
+  "remote-name": string; // Remote name of the MCP tool
+  url: string; // MCP endpoint URL
+};
+
+// Create a column helper instance for type-safe column definitions
+export const columnHelper = createColumnHelper<McpTool>();
+
+/**
+ * Column definitions for the MCP tools table
+ * Defines how each column should be rendered and what data it displays
+ */
+export const columns = [
+  // Tool ID column - displays the tool identifier
+  columnHelper.accessor("id", {
+    header: "Tool ID",
+    cell: (info) => info.getValue(),
+  }),
+
+  // Remote Name column - displays the remote tool name
+  columnHelper.accessor("remote-name", {
+    header: "Remote Name",
+    cell: (info) => info.getValue(),
+  }),
+
+  // URL column - displays the MCP endpoint URL
+  columnHelper.accessor("url", {
+    header: "MCP Endpoint URL",
+    cell: (info) => info.getValue(),
+  }),
+];

ai-context/workbench-ui/src/model/node-properties-table.tsx

@@ -0,0 +1,32 @@
+import { createColumnHelper } from "@tanstack/react-table";
+
+/**
+ * Node property data structure for the node properties table
+ * Represents a single property with its predicate label and value
+ */
+export type NodeProperty = {
+  property: string; // Human-readable property name (label)
+  value: string; // Property value
+  uri?: string; // Original property URI (optional, for reference)
+};
+
+// Create a column helper instance for type-safe column definitions
+export const columnHelper = createColumnHelper<NodeProperty>();
+
+/**
+ * Column definitions for the node properties table
+ * Defines how each column should be rendered and what data it displays
+ */
+export const columns = [
+  // Property column - displays the property name/label
+  columnHelper.accessor("property", {
+    header: "Property",
+    cell: (info) => info.getValue(),
+  }),
+
+  // Value column - displays the property value
+  columnHelper.accessor("value", {
+    header: "Value",
+    cell: (info) => info.getValue(),
+  }),
+];

ai-context/workbench-ui/src/model/node-relationships-table.tsx

@@ -0,0 +1,61 @@
+import { createColumnHelper } from "@tanstack/react-table";
+import { ArrowRight, ArrowLeft } from "lucide-react";
+import { Button } from "@chakra-ui/react";
+
+/**
+ * Node relationship data structure for the relationships table
+ * Represents a single relationship with direction and label
+ */
+export type NodeRelationship = {
+  relationship: string; // Human-readable relationship name (label)
+  direction: "incoming" | "outgoing"; // Direction of the relationship
+  uri?: string; // Original relationship URI (optional, for reference)
+  onRelationshipClick?: (uri: string) => void; // Click handler for relationships
+};
+
+// Create a column helper instance for type-safe column definitions
+export const columnHelper = createColumnHelper<NodeRelationship>();
+
+/**
+ * Column definitions for the node relationships table
+ * Defines how each column should be rendered and what data it displays
+ */
+export const columns = [
+  // Relationship column - displays the relationship with directional arrow as clickable button
+  columnHelper.accessor("relationship", {
+    header: "Relationship",
+    cell: (info) => {
+      const direction = info.row.original.direction;
+      const relationship = info.getValue();
+      const uri = info.row.original.uri;
+      const onRelationshipClick = info.row.original.onRelationshipClick;
+
+      // Determine theme variant based on direction
+      const variant = direction === "outgoing" ? "primary" : "warmBrand";
+
+      return (
+        <Button
+          variant="ghost"
+          colorPalette={variant}
+          size="sm"
+          onClick={() => onRelationshipClick?.(uri || "")}
+          style={{
+            justifyContent: "flex-start",
+            padding: "0.25rem 0.5rem",
+            height: "auto",
+            minHeight: "1.5rem",
+            fontWeight: "normal",
+          }}
+        >
+          <div
+            style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}
+          >
+            {direction === "incoming" && <ArrowLeft size={16} />}
+            <span>{relationship}</span>
+            {direction === "outgoing" && <ArrowRight size={16} />}
+          </div>
+        </Button>
+      );
+    },
+  }),
+];

ai-context/workbench-ui/src/model/ontologies-table.tsx

@@ -0,0 +1,47 @@
+import { createColumnHelper } from "@tanstack/react-table";
+import { Ontology } from "@trustgraph/react-state";
+
+export type OntologyTableRow = [string, Ontology];
+
+const columnHelper = createColumnHelper<OntologyTableRow>();
+
+export const ontologyColumns = [
+  columnHelper.accessor((row) => row[0], {
+    id: "id",
+    header: "ID",
+    cell: (info) => info.getValue(),
+  }),
+  columnHelper.accessor((row) => row[1].metadata.name, {
+    id: "name",
+    header: "Name",
+    cell: (info) => info.getValue(),
+  }),
+  columnHelper.accessor((row) => row[1].metadata.description, {
+    id: "description",
+    header: "Description",
+    cell: (info) => info.getValue() || "-",
+  }),
+  columnHelper.accessor((row) => Object.keys(row[1].classes || {}).length, {
+    id: "classCount",
+    header: "Classes",
+    cell: (info) => info.getValue(),
+  }),
+  columnHelper.accessor(
+    (row) =>
+      Object.keys(row[1].objectProperties || {}).length +
+      Object.keys(row[1].datatypeProperties || {}).length,
+    {
+      id: "propertyCount",
+      header: "Properties",
+      cell: (info) => info.getValue(),
+    },
+  ),
+  columnHelper.accessor((row) => row[1].metadata.modified, {
+    id: "modified",
+    header: "Last Modified",
+    cell: (info) => {
+      const date = new Date(info.getValue());
+      return date.toLocaleDateString() + " " + date.toLocaleTimeString();
+    },
+  }),
+];

ai-context/workbench-ui/src/model/processing-table.tsx

@@ -0,0 +1,59 @@
+import { createColumnHelper } from "@tanstack/react-table";
+import { Tag } from "@chakra-ui/react";
+import { timeString } from "../utils/time-string.ts";
+
+/**
+ * Processing data structure for the processing table
+ * Represents a single processing object with its metadata and properties
+ */
+export type Processing = {
+  id: string; // Unique identifier for the processing
+  time: number; // Timestamp (likely Unix timestamp)
+  document: string; // Document ID
+  tags: string[]; // Array of tags associated with the document
+};
+
+// Create a column helper instance for type-safe column definitions
+export const columnHelper = createColumnHelper<Processing>();
+
+/**
+ * Column definitions for the processing table
+ * Defines how each column should be rendered and what data it displays
+ */
+export const columns = [
+  // ID column - displays the flow ID
+  columnHelper.accessor("id", {
+    header: "ID",
+    cell: (info) => info.getValue(),
+  }),
+
+  // Time column - displays formatted timestamp
+  columnHelper.accessor("time", {
+    header: "Time",
+    cell: (info) => timeString(info.getValue()), // Convert to readable string
+  }),
+
+  // Class name column - displays flow class
+  columnHelper.accessor("document-id", {
+    header: "Document ID",
+    cell: (info) => info.getValue(),
+  }),
+
+  // Class name column - displays flow class
+  columnHelper.accessor("flow", {
+    header: "Flow ID",
+    cell: (info) => info.getValue(),
+  }),
+
+  // Tags column - displays document tags as visual tag components
+  columnHelper.accessor("tags", {
+    header: "Tags",
+    cell: (info) =>
+      // Render each tag as a Chakra UI Tag component with margin spacing
+      info.getValue()?.map((t) => (
+        <Tag.Root key={t} mr={2}>
+          <Tag.Label>{t}</Tag.Label>
+        </Tag.Root>
+      )),
+  }),
+];

ai-context/workbench-ui/src/model/prompts-table.tsx

@@ -0,0 +1,49 @@
+import { createColumnHelper } from "@tanstack/react-table";
+import { Code } from "@chakra-ui/react";
+
+/**
+ * Prompt data structure for the prompts table
+ * Represents a prompt template with its metadata and configuration
+ */
+export type Prompt = {
+  id: string; // Unique identifier for the prompt template
+  prompt: string; // The prompt text content
+  responseType: "json" | "text"; // Type of response expected
+  hasSchema: boolean; // Whether the prompt has a schema defined
+};
+
+// Create a column helper instance for type-safe column definitions
+export const columnHelper = createColumnHelper<Prompt>();
+
+/**
+ * Column definitions for the prompts table
+ * Defines how each column should be rendered and what data it displays
+ */
+export const columns = [
+  // ID column - displays the prompt template ID
+  columnHelper.accessor("id", {
+    header: "ID",
+    cell: (info) => <Code p={2}>{info.getValue()}</Code>,
+  }),
+
+  // Prompt column - displays the prompt text content
+  columnHelper.accessor("prompt", {
+    header: "Prompt",
+    cell: (info) => <Code p={2}>{info.getValue()}</Code>,
+  }),
+
+  // Response type column - displays the expected response format
+  columnHelper.accessor("responseType", {
+    header: "Response",
+    cell: (info) => {
+      const value = info.getValue();
+      return value === "json" ? "JSON" : "text";
+    },
+  }),
+
+  // Schema column - displays whether the prompt has a schema
+  columnHelper.accessor("hasSchema", {
+    header: "Schema?",
+    cell: (info) => (info.getValue() ? "yes" : "no"),
+  }),
+];

ai-context/workbench-ui/src/model/schemaTypes.ts

@@ -0,0 +1,47 @@
+import { SchemaField } from "../model/schemas-table";
+
+export interface SchemaTypeOption {
+  value: SchemaField["type"];
+  label: string;
+  description: string;
+}
+
+export const SCHEMA_TYPE_OPTIONS: SchemaTypeOption[] = [
+  {
+    value: "string",
+    label: "String",
+    description: "Text data of variable length",
+  },
+  {
+    value: "integer",
+    label: "Integer",
+    description: "Whole numbers (e.g., 1, 42, -10)",
+  },
+  {
+    value: "float",
+    label: "Float",
+    description: "Decimal numbers (e.g., 3.14, -2.5)",
+  },
+  {
+    value: "boolean",
+    label: "Boolean",
+    description: "True or false values",
+  },
+  {
+    value: "timestamp",
+    label: "Timestamp",
+    description: "Date and time values",
+  },
+  {
+    value: "enum",
+    label: "Enum",
+    description: "Predefined set of allowed values",
+  },
+];
+
+export const DEFAULT_FIELD: Omit<SchemaField, "id"> = {
+  name: "",
+  type: "string",
+  primary_key: false,
+  required: false,
+};

ai-context/workbench-ui/src/model/schemas-table.tsx

@@ -0,0 +1,84 @@
+import { createColumnHelper } from "@tanstack/react-table";
+import { Flex, HStack, Badge, Text, Code } from "@chakra-ui/react";
+
+export interface SchemaField {
+  id: string; // Unique identifier for React keys
+  name: string;
+  type: "string" | "integer" | "float" | "boolean" | "timestamp" | "enum";
+  primary_key?: boolean;
+  required?: boolean;
+  enum?: string[];
+}
+
+export interface Schema {
+  name: string;
+  description: string;
+  fields: SchemaField[];
+  indexes?: string[];
+}
+
+export type SchemaTableRow = [string, Schema];
+
+const columnHelper = createColumnHelper<SchemaTableRow>();
+
+export const schemaColumns = [
+  columnHelper.accessor("0", {
+    header: "ID",
+    cell: (info) => <Code p={2}>{info.getValue()}</Code>,
+  }),
+  columnHelper.accessor((row) => row[1].description, {
+    id: "description",
+    header: "Description",
+    cell: (info) => <Text>{info.getValue()}</Text>,
+  }),
+  columnHelper.display({
+    id: "fields",
+    header: "Fields",
+    cell: ({ row }) => {
+      const fieldCount = row.original[1].fields.length;
+      const pkCount = row.original[1].fields.filter(
+        (f) => f.primary_key,
+      ).length;
+      return (
+        <HStack gap={2}>
+          <Badge size="sm" colorPalette="blue">
+            {fieldCount} field{fieldCount !== 1 ? "s" : ""}
+          </Badge>
+          {pkCount > 0 && (
+            <Badge size="sm" colorPalette="purple">
+              {pkCount} PK
+            </Badge>
+          )}
+        </HStack>
+      );
+    },
+  }),
+  columnHelper.display({
+    id: "types",
+    header: "Types",
+    cell: ({ row }) => {
+      const types = [...new Set(row.original[1].fields.map((f) => f.type))];
+      return (
+        <Flex wrap="wrap" gap={1}>
+          {types.map((type) => (
+            <Badge key={type} size="sm" variant="outline">
+              {type}
+            </Badge>
+          ))}
+        </Flex>
+      );
+    },
+  }),
+  columnHelper.display({
+    id: "indexes",
+    header: "Indexes",
+    cell: ({ row }) => {
+      const indexes = row.original[1].indexes || [];
+      return (
+        <Text fontSize="sm" color="gray.600">
+          {indexes.length > 0 ? indexes.join(", ") : "None"}
+        </Text>
+      );
+    },
+  }),
+];

ai-context/workbench-ui/src/model/token-costs-table.tsx

@@ -0,0 +1,38 @@
+import { createColumnHelper } from "@tanstack/react-table";
+
+/**
+ * Processing data structure for the processing table
+ * Represents a single processing object with its metadata and properties
+ */
+export type TokenCost = {
+  modeel: string; // Unique identifier for the processing
+  inputPrice: number; // Per-input token cost
+  outputPrice: number; // Per-output token cost
+};
+
+// Create a column helper instance for type-safe column definitions
+export const columnHelper = createColumnHelper<TokenCost>();
+
+/**
+ * Column definitions for the processing table
+ * Defines how each column should be rendered and what data it displays
+ */
+export const columns = [
+  // Model column - displays the model ID
+  columnHelper.accessor("model", {
+    header: "Model ID",
+    cell: (info) => info.getValue(),
+  }),
+
+  // Input token column - displays input token cost
+  columnHelper.accessor("input_price", {
+    header: "Input cost ($/1Mt)",
+    cell: (info) => (info.getValue() * 1000000).toFixed(3),
+  }),
+
+  // Input token column - displays input token cost
+  columnHelper.accessor("output_price", {
+    header: "Output cost ($/1Mt)",
+    cell: (info) => (info.getValue() * 1000000).toFixed(3),
+  }),
+];