inconvo 0.0.1 → 1.1.0

package/README.md

@@ -1 +1,36 @@
-# Placeholder
+# `inconvo CLI`
+
+Install Inconvo-flavored assistant-ui components into any project.
+
+## Usage
+
+Add the assistant-ui tool components to the current working directory:
+
+```bash
+npx inconvo@latest add assistant-ui-tool-components
+```
+
+Options:
+
+- `--cwd <path>` – run the installer against a different project directory
+- `--path <relative>` – override the target folder (defaults to `components/assistant-ui/tools`)
+- `--overwrite` – replace any files that already exist without prompting
+- `--yes` – answer "yes" to interactive prompts
+
+## Development
+
+```bash
+npm install
+npm run build
+```
+
+The component templates live under `templates/assistant-ui/tools`. Update those files whenever the upstream components change and cut a new CLI release.
+
+## Releasing
+
+1. In the npm package settings for `inconvo`, connect this repository as a *Trusted Publisher* (OIDC) so GitHub Actions can publish without storing an npm token.
+2. Follow conventional commit syntax (`feat:`, `fix:`, `chore:`…) when merging into `main`. Semantic Release reads those messages to determine the next version.
+3. Every push to `main` (or a manual *workflow_dispatch*) runs `.github/workflows/release.yml`, which installs dependencies, builds, and executes `npx semantic-release`. When it finds a release-worthy change it will:
+   - publish the package to npm with provenance,
+   - update the GitHub release notes.
+4. Verify with `npx inconvo@latest --help` after the workflow reports success.

package/dist/commands/add.js

@@ -0,0 +1,98 @@
+import { Command } from "commander";
+import path from "node:path";
+import fs from "node:fs/promises";
+import { logger } from "../lib/logger";
+import { confirmPrompt } from "../lib/prompt";
+import { componentPacks, getPack } from "../templates/packs";
+export const addCommand = new Command()
+    .name("add")
+    .description("add a component pack to your project")
+    .argument("<pack>", "the component pack to install")
+    .option("-y, --yes", "answer yes to all prompts", false)
+    .option("-o, --overwrite", "overwrite existing files without prompting", false)
+    .option("-c, --cwd <cwd>", "working directory that will receive the files", process.cwd())
+    .option("-p, --path <path>", "relative path where the pack should be written")
+    .action(async (packName, opts) => {
+    const pack = getPack(packName);
+    if (!pack) {
+        const available = Object.keys(componentPacks).join(", ");
+        logger.error(`Unknown component pack "${packName}". Available packs: ${available}`);
+        process.exit(1);
+    }
+    const cwd = path.resolve(opts.cwd ?? process.cwd());
+    const destinationRoot = path.resolve(cwd, opts.path ?? pack.targetDir);
+    logger.step(`Installing ${pack.name} into ${destinationRoot}`);
+    const templateFiles = await collectFiles(pack.templateDir);
+    if (templateFiles.length === 0) {
+        logger.warn("No files found in component pack.");
+        return;
+    }
+    const copyPlan = templateFiles.map((source) => {
+        const relative = path.relative(pack.templateDir, source);
+        const target = path.join(destinationRoot, relative);
+        return { source, target };
+    });
+    await fs.mkdir(destinationRoot, { recursive: true });
+    const conflicts = [];
+    for (const file of copyPlan) {
+        if (await fileExists(file.target)) {
+            conflicts.push(file.target);
+        }
+    }
+    let allowOverwrite = opts.overwrite ?? false;
+    if (conflicts.length && !allowOverwrite) {
+        if (opts.yes) {
+            allowOverwrite = true;
+        }
+        else {
+            const confirmed = await confirmPrompt(`Overwrite ${conflicts.length} existing file${conflicts.length > 1 ? "s" : ""}?`);
+            if (!confirmed) {
+                logger.warn("Aborted. No files were written.");
+                process.exit(0);
+            }
+            allowOverwrite = true;
+        }
+    }
+    const replaced = new Set();
+    for (const { source, target } of copyPlan) {
+        if (!allowOverwrite && (await fileExists(target))) {
+            logger.warn(`Skipped existing file ${target}`);
+            continue;
+        }
+        await fs.mkdir(path.dirname(target), { recursive: true });
+        await fs.copyFile(source, target);
+        if (conflicts.includes(target)) {
+            replaced.add(target);
+        }
+    }
+    if (replaced.size) {
+        logger.info(`Overwrote ${replaced.size} file(s).`);
+    }
+    logger.success(`Installed ${pack.name}!`);
+});
+async function collectFiles(dir) {
+    const entries = await fs.readdir(dir, { withFileTypes: true });
+    const files = [];
+    for (const entry of entries) {
+        const fullPath = path.join(dir, entry.name);
+        if (entry.isDirectory()) {
+            files.push(...(await collectFiles(fullPath)));
+        }
+        else if (entry.isFile()) {
+            files.push(fullPath);
+        }
+    }
+    return files;
+}
+async function fileExists(target) {
+    try {
+        await fs.stat(target);
+        return true;
+    }
+    catch (error) {
+        if (error && error.code === "ENOENT") {
+            return false;
+        }
+        throw error;
+    }
+}

package/dist/index.js

@@ -0,0 +1,10 @@
+#!/usr/bin/env node
+import { Command } from "commander";
+import { addCommand } from "./commands/add";
+process.on("SIGINT", () => process.exit(0));
+process.on("SIGTERM", () => process.exit(0));
+const program = new Command()
+    .name("inconvo")
+    .description("Install Inconvo assistant-ui integrations into your project.");
+program.addCommand(addCommand);
+program.parse();

package/dist/lib/logger.js

@@ -0,0 +1,18 @@
+import chalk from "chalk";
+export const logger = {
+    info(message) {
+        console.log(chalk.blue("info"), message);
+    },
+    step(message) {
+        console.log(chalk.cyan("•"), message);
+    },
+    success(message) {
+        console.log(chalk.green("success"), message);
+    },
+    warn(message) {
+        console.warn(chalk.yellow("warn"), message);
+    },
+    error(message) {
+        console.error(chalk.red("error"), message);
+    },
+};

package/dist/lib/paths.js

@@ -0,0 +1,7 @@
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+const currentDir = path.dirname(fileURLToPath(import.meta.url));
+const projectRoot = path.resolve(currentDir, "..", "..");
+export function resolveFromRoot(...segments) {
+    return path.join(projectRoot, ...segments);
+}

package/dist/lib/prompt.js

@@ -0,0 +1,12 @@
+import readline from "node:readline/promises";
+import { stdin as input, stdout as output } from "node:process";
+export async function confirmPrompt(message, defaultValue = false) {
+    const rl = readline.createInterface({ input, output });
+    const suffix = defaultValue ? " [Y/n] " : " [y/N] ";
+    const answer = (await rl.question(`${message}${suffix}`)).trim().toLowerCase();
+    rl.close();
+    if (!answer) {
+        return defaultValue;
+    }
+    return answer.startsWith("y");
+}

package/dist/templates/packs.js

@@ -0,0 +1,12 @@
+import { resolveFromRoot } from "../lib/paths";
+export const componentPacks = {
+    "assistant-ui-tool-components": {
+        name: "assistant-ui-tool-components",
+        description: "Inconvo-flavored assistant-ui tools and supporting components.",
+        templateDir: resolveFromRoot("templates", "assistant-ui", "tools"),
+        targetDir: "components/assistant-ui/tools",
+    },
+};
+export function getPack(name) {
+    return componentPacks[name];
+}

package/package.json

@@ -1,11 +1,33 @@
 {
   "name": "inconvo",
-  "version": "0.0.1",
-  "description": "",
-  "main": "index.js",
+  "version": "1.1.0",
+  "description": "CLI for installing Inconvo assistant-ui tool components into any project.",
+  "license": "MIT",
+  "type": "module",
+  "bin": {
+    "inconvo": "dist/index.js"
+  },
+  "files": [
+    "dist",
+    "templates",
+    "README.md"
+  ],
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "build": "tsc -p tsconfig.json",
+    "dev": "tsx src/index.ts"
+  },
+  "dependencies": {
+    "chalk": "^5.3.0",
+    "commander": "^14.0.0"
   },
-  "author": "",
-  "license": "UNLICENSED"
+  "devDependencies": {
+    "@semantic-release/commit-analyzer": "^13.0.1",
+    "@semantic-release/github": "^12.0.2",
+    "@semantic-release/npm": "^13.1.2",
+    "@semantic-release/release-notes-generator": "^14.1.0",
+    "@types/node": "^22.8.1",
+    "semantic-release": "^25.0.2",
+    "tsx": "^4.20.6",
+    "typescript": "^5.6.3"
+  }
 }

package/templates/assistant-ui/tools/inconvo-chart-colors.ts

@@ -0,0 +1,27 @@
+const clamp = (value: number, min = 0, max = 1) =>
+  Math.min(Math.max(value, min), max);
+
+const lightnessToGrayHex = (lightness: number) => {
+  const channel = Math.round(clamp(lightness) * 255)
+    .toString(16)
+    .padStart(2, "0");
+  return `#${channel}${channel}${channel}`;
+};
+
+export const buildGreyscalePalette = (
+  seriesCount: number,
+  isDarkMode: boolean,
+) => {
+  if (seriesCount <= 0) return [];
+  if (seriesCount === 1) {
+    return [lightnessToGrayHex(isDarkMode ? 0.78 : 0.5)];
+  }
+
+  const start = isDarkMode ? 0.95 : 0.8;
+  const end = isDarkMode ? 0.55 : 0.15;
+  const step = (end - start) / (seriesCount - 1);
+
+  return Array.from({ length: seriesCount }, (_, index) =>
+    lightnessToGrayHex(start + step * index),
+  );
+};

package/templates/assistant-ui/tools/inconvo-chart.tsx

@@ -0,0 +1,191 @@
+"use client";
+
+import { useMemo, type ReactNode } from "react";
+import { useTheme } from "next-themes";
+import {
+  ResponsiveContainer,
+  LineChart as RechartsLineChart,
+  Line,
+  BarChart as RechartsBarChart,
+  Bar,
+  CartesianGrid,
+  Tooltip,
+  XAxis,
+  YAxis,
+  Label,
+  Legend,
+} from "recharts";
+
+import type { InconvoChartData, InconvoChartType } from "~/lib/inconvo/types";
+import { buildGreyscalePalette } from "~/components/assistant-ui/tools/inconvo-chart-colors";
+
+interface InconvoChartProps {
+  data: InconvoChartData;
+  variant: InconvoChartType;
+  xLabel?: string;
+  yLabel?: string;
+  title?: string;
+}
+
+const ChartScaffold = ({
+  children,
+  axisColor,
+  textColor,
+  xLabel,
+  yLabel,
+  labelCount,
+}: {
+  children: ReactNode;
+  axisColor: string;
+  textColor: string;
+  xLabel?: string;
+  yLabel?: string;
+  labelCount: number;
+}) => (
+  <>
+    <CartesianGrid strokeDasharray="3 3" stroke="var(--border)" />
+    <XAxis
+      dataKey="name"
+      stroke={axisColor}
+      tick={{ fill: axisColor, fontSize: 12 }}
+      angle={-30}
+      textAnchor="end"
+      interval={labelCount > 12 ? "preserveStartEnd" : 0}
+    >
+      {xLabel ? (
+        <Label
+          position="bottom"
+          offset={24}
+          style={{
+            fill: axisColor,
+            textAnchor: "middle",
+          }}
+          value={xLabel}
+        />
+      ) : null}
+    </XAxis>
+    <YAxis width={80} stroke={axisColor} tick={{ fill: axisColor, fontSize: 12 }}>
+      {yLabel ? (
+        <Label
+          angle={-90}
+          position="insideLeft"
+          style={{
+            fill: axisColor,
+            textAnchor: "middle",
+          }}
+          value={yLabel}
+        />
+      ) : null}
+    </YAxis>
+    <Tooltip
+      contentStyle={{
+        backgroundColor: "var(--card)",
+        border: "1px solid var(--border)",
+        borderRadius: 8,
+        color: textColor,
+      }}
+      labelStyle={{
+        color: textColor,
+        fontWeight: 600,
+      }}
+    />
+    <Legend
+      verticalAlign="top"
+      align="right"
+      wrapperStyle={{
+        color: axisColor,
+        paddingBottom: "4px",
+      }}
+    />
+    {children}
+  </>
+);
+
+export const InconvoChart = ({
+  data,
+  variant,
+  xLabel,
+  yLabel,
+}: InconvoChartProps) => {
+  const { resolvedTheme } = useTheme();
+
+  const chartData = useMemo(() => {
+    return data.labels.map((label, index) => {
+      const row: { name: string; [key: string]: string | number } = {
+        name: label,
+      };
+      data.datasets.forEach((dataset) => {
+        row[dataset.name] = dataset.values[index] ?? 0;
+      });
+      return row;
+    });
+  }, [data]);
+
+  const palette = useMemo(() => {
+    const isDarkMode = resolvedTheme === "dark";
+    return buildGreyscalePalette(data.datasets.length, isDarkMode);
+  }, [data.datasets.length, resolvedTheme]);
+
+  const axisColor = "var(--muted-foreground)";
+  const textColor = "var(--foreground)";
+  const margins = { top: 20, right: 30, bottom: xLabel ? 80 : 40, left: 20 };
+
+  const renderLines = () =>
+    data.datasets.map((dataset, index) => {
+      const stroke = palette[index] ?? "var(--chart-series-primary)";
+      return (
+        <Line
+          key={dataset.name}
+          type="monotone"
+          dataKey={dataset.name}
+          stroke={stroke}
+          strokeWidth={2}
+          dot={{ r: 3, strokeWidth: 2, stroke, fill: "var(--card)" }}
+          activeDot={{ r: 5, strokeWidth: 2, stroke, fill: stroke }}
+        />
+      );
+    });
+
+  const renderBars = () =>
+    data.datasets.map((dataset, index) => (
+      <Bar
+        key={dataset.name}
+        dataKey={dataset.name}
+        fill={palette[index] ?? "var(--chart-series-primary)"}
+        radius={[4, 4, 0, 0]}
+        maxBarSize={48}
+      />
+    ));
+
+  return (
+    <div className="flex w-full flex-col gap-4 text-foreground">
+      <ResponsiveContainer width="100%" height={400}>
+        {variant === "line" ? (
+          <RechartsLineChart data={chartData} margin={margins}>
+            <ChartScaffold
+              axisColor={axisColor}
+              textColor={textColor}
+              xLabel={xLabel}
+              yLabel={yLabel}
+              labelCount={data.labels.length}
+            >
+              {renderLines()}
+            </ChartScaffold>
+          </RechartsLineChart>
+        ) : (
+          <RechartsBarChart data={chartData} margin={margins}>
+            <ChartScaffold
+              axisColor={axisColor}
+              textColor={textColor}
+              xLabel={xLabel}
+              yLabel={yLabel}
+              labelCount={data.labels.length}
+            >
+              {renderBars()}
+            </ChartScaffold>
+          </RechartsBarChart>
+        )}
+      </ResponsiveContainer>
+    </div>
+  );
+};

package/templates/assistant-ui/tools/inconvo-data-table.tsx

@@ -0,0 +1,210 @@
+"use client";
+
+import {
+  flexRender,
+  getCoreRowModel,
+  getSortedRowModel,
+  useReactTable,
+  type ColumnDef,
+  type SortingState,
+} from "@tanstack/react-table";
+import { useEffect, useMemo, useRef, useState } from "react";
+
+import { Button } from "~/components/ui/button";
+import { cn } from "~/lib/utils";
+
+type RowData = Record<string, string>;
+
+interface DataTableProps {
+  head: string[];
+  body: string[][];
+}
+
+export const DataTable = ({ head, body }: DataTableProps) => {
+  const [sorting, setSorting] = useState<SortingState>([]);
+  const [hiddenColumns, setHiddenColumns] = useState<Set<string>>(new Set());
+  const [columnMenuOpen, setColumnMenuOpen] = useState(false);
+  const columnMenuRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    if (!columnMenuOpen) return;
+
+    const handleClick = (event: MouseEvent) => {
+      if (
+        columnMenuRef.current &&
+        !columnMenuRef.current.contains(event.target as Node)
+      ) {
+        setColumnMenuOpen(false);
+      }
+    };
+
+    document.addEventListener("mousedown", handleClick);
+    return () => document.removeEventListener("mousedown", handleClick);
+  }, [columnMenuOpen]);
+
+  const data = useMemo<RowData[]>(() => {
+    return body.map((row) => {
+      return head.reduce((acc, header, index) => {
+        acc[header] = row[index] ?? "";
+        return acc;
+      }, {} as RowData);
+    });
+  }, [body, head]);
+
+  const columns = useMemo<ColumnDef<RowData>[]>(
+    () =>
+      head
+        .filter((header) => !hiddenColumns.has(header))
+        .map((header) => ({
+          accessorKey: header,
+          header,
+          cell: (info) => info.getValue(),
+        })),
+    [head, hiddenColumns],
+  );
+
+  const table = useReactTable({
+    data,
+    columns,
+    state: { sorting },
+    onSortingChange: setSorting,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+  });
+
+  const toggleColumnVisibility = (columnName: string) => {
+    setHiddenColumns((prev) => {
+      const next = new Set(prev);
+      if (next.has(columnName)) {
+        next.delete(columnName);
+      } else {
+        next.add(columnName);
+      }
+      return next;
+    });
+  };
+
+  const resetColumns = () => {
+    setHiddenColumns(new Set());
+  };
+
+  const allColumnsHidden = hiddenColumns.size === head.length;
+
+  return (
+    <div className="space-y-4 text-sm text-foreground">
+      <div className="flex justify-end">
+        <div ref={columnMenuRef} className="relative inline-flex">
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            onClick={() => setColumnMenuOpen((prev) => !prev)}
+            className="inline-flex items-center gap-2"
+          >
+            Columns
+            {hiddenColumns.size > 0 ? (
+              <span className="rounded-full bg-secondary px-2 py-0.5 text-xs font-semibold text-secondary-foreground">
+                {hiddenColumns.size}
+              </span>
+            ) : null}
+          </Button>
+
+          {columnMenuOpen ? (
+            <div className="absolute right-0 z-10 mt-2 w-64 rounded-lg border bg-popover text-popover-foreground shadow-lg">
+              <div className="border-b px-4 py-3 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                Column visibility
+              </div>
+              <div className="max-h-64 overflow-y-auto py-1">
+                {head.map((columnName) => {
+                  const isVisible = !hiddenColumns.has(columnName);
+                  return (
+                    <button
+                      key={columnName}
+                      type="button"
+                      onClick={() => toggleColumnVisibility(columnName)}
+                      className="flex w-full items-center gap-3 px-4 py-2 text-left text-sm hover:bg-muted"
+                    >
+                      <span
+                        className={cn(
+                          "flex h-4 w-4 items-center justify-center rounded border text-[0.6rem] font-bold transition",
+                          isVisible
+                            ? "border-primary bg-primary text-primary-foreground"
+                            : "border-border text-transparent",
+                        )}
+                      >
+                        ✓
+                      </span>
+                      <span className="flex-1 truncate">{columnName}</span>
+                    </button>
+                  );
+                })}
+              </div>
+            </div>
+          ) : null}
+        </div>
+      </div>
+
+      {allColumnsHidden ? (
+        <div className="flex flex-col items-center justify-center rounded-lg border-2 border-dashed border-border bg-muted/40 px-6 py-12 text-center">
+          <h3 className="mb-2 text-base font-semibold">All columns hidden</h3>
+          <p className="mb-4 text-sm text-muted-foreground">
+            Show at least one column to view the table.
+          </p>
+          <Button variant="default" size="sm" onClick={resetColumns}>
+            Show all columns
+          </Button>
+        </div>
+      ) : (
+        <div className="max-h-[520px] overflow-auto rounded-xl border bg-card">
+          <table className="w-full min-w-[480px] border-collapse text-sm">
+            <thead className="sticky top-0 bg-card">
+              {table.getHeaderGroups().map((headerGroup) => (
+                <tr key={headerGroup.id} className="border-b border-border">
+                  {headerGroup.headers.map((header) => {
+                    const isSorted = header.column.getIsSorted();
+                    return (
+                      <th
+                        key={header.id}
+                        onClick={header.column.getToggleSortingHandler()}
+                        className={cn(
+                          "px-4 py-3 text-left font-semibold text-muted-foreground",
+                          header.column.getCanSort() && "cursor-pointer",
+                        )}
+                      >
+                        <span className="inline-flex items-center gap-2">
+                          {flexRender(
+                            header.column.columnDef.header,
+                            header.getContext(),
+                          )}
+                          {isSorted ? (
+                            <span className="text-xs">
+                              {isSorted === "asc" ? "↓" : "↑"}
+                            </span>
+                          ) : null}
+                        </span>
+                      </th>
+                    );
+                  })}
+                </tr>
+              ))}
+            </thead>
+            <tbody>
+              {table.getRowModel().rows.map((row) => (
+                <tr
+                  key={row.id}
+                  className="border-b border-border last:border-0 hover:bg-muted/40"
+                >
+                  {row.getVisibleCells().map((cell) => (
+                    <td key={cell.id} className="px-4 py-3 text-sm text-foreground">
+                      {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                    </td>
+                  ))}
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </div>
+  );
+};

package/templates/assistant-ui/tools/inconvo-tools.tsx

@@ -0,0 +1,7 @@
+"use client";
+
+import { MessageDataAnalystTool } from "~/components/assistant-ui/tools/message-data-analyst-tool";
+
+export const InconvoTools = () => {
+  return <MessageDataAnalystTool />;
+};

package/templates/assistant-ui/tools/message-data-analyst-tool.tsx

@@ -0,0 +1,208 @@
+"use client";
+
+import { AlertCircle, Loader2 } from "lucide-react";
+import {
+  makeAssistantToolUI,
+  type ToolCallMessagePartComponent,
+} from "@assistant-ui/react";
+import type { ReactNode } from "react";
+
+import { InconvoChart } from "~/components/assistant-ui/tools/inconvo-chart";
+import { DataTable } from "~/components/assistant-ui/tools/inconvo-data-table";
+import {
+  type InconvoResponse,
+  parseInconvoResponse,
+} from "~/lib/inconvo/types";
+
+interface MessageDataAnalystArgs {
+  conversationId: string;
+  message: string;
+}
+
+type MessageDataAnalystResult = string | InconvoResponse;
+
+const MessageDataAnalystToolRender: ToolCallMessagePartComponent<
+  MessageDataAnalystArgs,
+  MessageDataAnalystResult
+> = ({ result, status }) => {
+  if (status?.type === "running" || !result) {
+    return (
+      <ToolCard>
+        <ToolCardHeader
+          title="Contacting data analyst"
+          description="Waiting for the data analyst to send a reply..."
+        />
+        <div className="flex items-center gap-2 text-sm text-muted-foreground">
+          <Loader2 className="size-4 animate-spin" />
+          <span>Fetching details</span>
+        </div>
+      </ToolCard>
+    );
+  }
+
+  const parsed = parseInconvoResponse(result);
+
+  if (!parsed) {
+    return (
+      <ToolCard variant="error">
+        <ToolCardHeader
+          variant="error"
+          title="Unable to read analyst response"
+          description="The response couldn't be parsed. Showing the raw payload below."
+        />
+        <RawPayload payload={typeof result === "string" ? result : JSON.stringify(result, null, 2)} />
+      </ToolCard>
+    );
+  }
+
+  if (status?.type === "incomplete") {
+    return (
+      <ToolCard variant="error">
+        <ToolCardHeader
+          variant="error"
+          title="Analyst conversation interrupted"
+          description={
+            status.reason === "cancelled"
+              ? "The tool call was cancelled before it completed."
+              : "The tool call ended unexpectedly."
+          }
+        />
+        <RawPayload payload={parsed.message} />
+      </ToolCard>
+    );
+  }
+
+  switch (parsed.type) {
+    case "text":
+      return (
+        <ToolCard>
+          <ToolCardHeader
+            title="Analyst response"
+            description="Plain text answer from the analyst"
+          />
+          <TextResponse content={parsed.message} />
+        </ToolCard>
+      );
+    case "chart":
+      if (!parsed.chart) {
+        return (
+          <ToolCard variant="error">
+            <ToolCardHeader
+              variant="error"
+              title="Missing chart payload"
+              description="The analyst referenced a chart but no data was provided."
+            />
+          </ToolCard>
+        );
+      }
+      return (
+        <ToolCard>
+          <ToolCardHeader
+            title={parsed.chart.title ?? "Chart"}
+            description={parsed.message}
+          />
+          <InconvoChart
+            data={parsed.chart.data}
+            variant={parsed.chart.type}
+            title={parsed.chart.title}
+            xLabel={parsed.chart.xLabel}
+            yLabel={parsed.chart.yLabel}
+          />
+        </ToolCard>
+      );
+    case "table":
+      if (!parsed.table) {
+        return (
+          <ToolCard variant="error">
+            <ToolCardHeader
+              variant="error"
+              title="Missing table payload"
+              description="The analyst referenced a table but no data was provided."
+            />
+          </ToolCard>
+        );
+      }
+      return (
+        <ToolCard>
+          <ToolCardHeader
+            title="Tabular result"
+            description={parsed.message}
+          />
+          <DataTable head={parsed.table.head} body={parsed.table.body} />
+        </ToolCard>
+      );
+    default:
+      return (
+        <ToolCard>
+          <ToolCardHeader
+            title="Analyst response"
+            description="Response received, but no renderer is configured for this type yet."
+          />
+          <RawPayload payload={JSON.stringify(parsed, null, 2)} />
+        </ToolCard>
+      );
+  }
+};
+
+export const MessageDataAnalystTool = makeAssistantToolUI<
+  MessageDataAnalystArgs,
+  MessageDataAnalystResult
+>({
+  toolName: "message_data_analyst",
+  render: MessageDataAnalystToolRender,
+});
+
+const ToolCard = ({
+  children,
+  variant = "default",
+}: {
+  children: ReactNode;
+  variant?: "default" | "error";
+}) => {
+  const borderClasses =
+    variant === "error"
+      ? "border-red-500/40 bg-red-500/5 dark:bg-red-500/10"
+      : "border-border bg-muted/50 dark:bg-muted/20";
+
+  return (
+    <div
+      className={`aui-tool-card mb-4 flex w-full flex-col gap-4 rounded-2xl border px-5 py-4 text-sm ${borderClasses}`}
+    >
+      {children}
+    </div>
+  );
+};
+
+const ToolCardHeader = ({
+  title,
+  description,
+  variant = "default",
+}: {
+  title: string;
+  description?: string;
+  variant?: "default" | "error";
+}) => (
+  <div className="flex gap-2">
+    {variant === "error" ? (
+      <AlertCircle className="mt-0.5 size-4 text-red-500" />
+    ) : null}
+    <div className="space-y-1">
+      <p className="text-sm font-semibold text-foreground">{title}</p>
+      {description ? (
+        <p className="text-sm text-muted-foreground">{description}</p>
+      ) : null}
+    </div>
+  </div>
+);
+
+const TextResponse = ({ content }: { content: string }) => (
+  <p className="whitespace-pre-wrap text-base leading-6 text-foreground">
+    {content}
+  </p>
+);
+
+const RawPayload = ({ payload }: { payload: string }) => (
+  <pre className="overflow-auto rounded-lg bg-background/60 p-3 text-xs text-muted-foreground">
+    {payload}
+  </pre>
+);