@invect/ui 0.0.1

package/package.json

@@ -0,0 +1,130 @@
+{
+  "name": "@invect/ui",
+  "version": "0.0.1",
+  "description": "Complete React components and routes for Invect workflow management",
+  "keywords": [
+    "components",
+    "frontend",
+    "invect",
+    "react",
+    "react-router",
+    "typescript",
+    "workflow"
+  ],
+  "homepage": "https://invect.dev",
+  "bugs": {
+    "url": "https://github.com/robase/invect/issues"
+  },
+  "license": "MIT",
+  "author": "robase <team@invect.dev>",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/robase/invect.git",
+    "directory": "pkg/ui"
+  },
+  "style": "dist/index.css",
+  "files": [
+    "dist/**/*",
+    "!dist/**/*.map",
+    "src/**/*"
+  ],
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./demo": {
+      "types": "./dist/demo/index.d.ts",
+      "import": "./dist/demo.js",
+      "default": "./dist/demo.js"
+    },
+    "./styles": "./dist/index.css",
+    "./package.json": "./package.json"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@codemirror/autocomplete": "^6.20.0",
+    "@codemirror/commands": "^6.10.0",
+    "@codemirror/lang-javascript": "^6.2.5",
+    "@codemirror/lang-json": "^6.0.2",
+    "@codemirror/language": "^6.11.3",
+    "@codemirror/lint": "^6.9.2",
+    "@codemirror/state": "^6.5.2",
+    "@codemirror/view": "^6.38.8",
+    "@fsegurai/codemirror-theme-vscode-dark": "^6.2.4",
+    "@fsegurai/codemirror-theme-vscode-light": "^6.2.4",
+    "@lezer/highlight": "^1.2.3",
+    "@radix-ui/react-accordion": "^1.2.12",
+    "@radix-ui/react-alert-dialog": "^1.1.15",
+    "@radix-ui/react-collapsible": "^1.1.3",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-label": "^2.1.8",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-scroll-area": "^1.2.10",
+    "@radix-ui/react-slider": "^1.3.6",
+    "cmdk": "^1.1.1",
+    "codemirror": "^6.0.2",
+    "nanoid": "^5.1.6",
+    "prettier": "^3.8.1",
+    "react-markdown": "^10.1.0",
+    "react-resizable-panels": "^3.0.6",
+    "remark-gfm": "^4.0.1",
+    "zustand": "^5.0.9",
+    "@invect/core": "0.0.1",
+    "@invect/layouts": "0.0.1"
+  },
+  "devDependencies": {
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-separator": "^1.1.7",
+    "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-tooltip": "^1.2.8",
+    "@tailwindcss/postcss": "^4.1.0",
+    "@tanstack/react-query": "^5.83.0",
+    "@types/node": "^24.0.13",
+    "@types/react": "18.3.7",
+    "@types/react-dom": "^18.3.7",
+    "@vitejs/plugin-react": "^6.0.1",
+    "@xyflow/react": "^12.9.2",
+    "autoprefixer": "^10.4.21",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "json-logic-js": "^2.0.5",
+    "lucide-react": "^0.525.0",
+    "postcss": "^8.5.6",
+    "postcss-nested": "^7.0.2",
+    "react-router": "^7.6.3",
+    "react-router-dom": "^7.6.3",
+    "tailwind-merge": "^3.3.1",
+    "tailwindcss": "^4.1.0",
+    "tw-animate-css": "^1.4.0",
+    "typescript": "^5.8.3",
+    "vite": "^8.0.0",
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^3.2.4"
+  },
+  "peerDependencies": {
+    "react": "^18.3.1 || ^19.0.0",
+    "react-dom": "^18.3.1 || ^19.0.0"
+  },
+  "scripts": {
+    "build": "vite build",
+    "build:dev": "vite build --watch --mode development --emptyOutDir false",
+    "dev": "vite build --watch --mode development --emptyOutDir false",
+    "typecheck": "tsc --noEmit",
+    "typecheck:watch": "tsc --noEmit --watch",
+    "lint": "oxlint --fix",
+    "clean": "rm -rf dist",
+    "format": "oxfmt",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  }
+}

package/src/Invect.tsx

@@ -0,0 +1,229 @@
+import React from 'react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import {
+  Route,
+  Routes,
+  Outlet,
+  BrowserRouter,
+  MemoryRouter,
+  useInRouterContext,
+} from 'react-router';
+import { ValidationProvider } from './contexts/ValidationContext';
+import { ApiProvider } from './contexts/ApiContext';
+import { ThemeProvider, useOptionalTheme } from './contexts/ThemeProvider';
+import { NodeRegistryProvider } from './contexts/NodeRegistryContext';
+import { PluginRegistryProvider } from './contexts/PluginRegistryContext';
+import type { InvectFrontendPlugin } from './types/plugin.types';
+import { Home } from './routes/home';
+import { AllFlowRuns } from './routes/all-flow-runs';
+import { Flow } from './routes/flow';
+import { FlowRuns } from './routes/flow-runs';
+import { Credentials } from './routes/credentials';
+import { FlowRouteLayout } from './routes/flow-route-layout';
+import type { ApiClient } from './api/client';
+import './app.css';
+import { AppSideMenu } from './components/side-menu/side-menu';
+
+export interface InvectProps {
+  reactQueryClient?: QueryClient;
+  apiBaseUrl?: string;
+  basePath?: string;
+  useMemoryRouter?: boolean; // Use MemoryRouter instead of BrowserRouter (useful for testing)
+  /** Frontend plugins that contribute sidebar items, routes, panel tabs, header actions, etc. */
+  plugins?: InvectFrontendPlugin[];
+  /** Pre-configured API client instance (e.g. for demo mode). When provided, apiBaseUrl is ignored. */
+  apiClient?: ApiClient;
+}
+
+// Create a default QueryClient if none is provided
+const createDefaultQueryClient = () =>
+  new QueryClient({
+    defaultOptions: {
+      queries: {
+        staleTime: 5 * 60 * 1000, // 5 minutes
+        retry: 3,
+      },
+    },
+  });
+
+/**
+ * Layout component that provides the QueryClient context to all child routes
+ */
+const InvectLayout = React.memo(
+  ({
+    client,
+    apiBaseUrl,
+    apiClient,
+    basePath,
+    plugins,
+  }: {
+    client: QueryClient;
+    apiBaseUrl?: string;
+    apiClient?: ApiClient;
+    basePath?: string;
+    plugins?: InvectFrontendPlugin[];
+  }) => {
+    const themeContext = useOptionalTheme();
+
+    const content = (
+      <QueryClientProvider client={client}>
+        <ApiProvider baseURL={apiBaseUrl} apiClient={apiClient}>
+          <PluginRegistryProvider plugins={plugins ?? []}>
+            <ValidationProvider>
+              <NodeRegistryProvider>
+                <div className="imp-shell flex w-full h-screen font-sans antialiased bg-imp-background text-imp-foreground">
+                  <AppSideMenu basePath={basePath} />
+                  <div className="imp-page flex flex-1 h-full min-w-0 min-h-0 bg-imp-background">
+                    <Outlet />
+                  </div>
+                </div>
+              </NodeRegistryProvider>
+            </ValidationProvider>
+          </PluginRegistryProvider>
+        </ApiProvider>
+      </QueryClientProvider>
+    );
+
+    if (themeContext) {
+      return content;
+    }
+
+    return (
+      <ThemeProvider defaultTheme="dark" storageKey="invect-ui-theme">
+        {content}
+      </ThemeProvider>
+    );
+  },
+);
+
+InvectLayout.displayName = 'InvectLayout';
+
+/**
+ * Detect whether we are already inside a React Router context.
+ * Returns false in non-Router environments (Next.js, plain React, etc.)
+ */
+function useHasRouterContext(): boolean {
+  try {
+    return useInRouterContext();
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Inner component that renders the Routes — must be inside a Router context
+ */
+const InvectRoutes = React.memo(
+  ({
+    client,
+    apiBaseUrl,
+    apiClient,
+    basePath,
+    plugins,
+  }: {
+    client: QueryClient;
+    apiBaseUrl: string;
+    apiClient?: ApiClient;
+    basePath: string;
+    plugins?: InvectFrontendPlugin[];
+  }) => {
+    // Collect plugin routes
+    const pluginRoutes = (plugins ?? []).flatMap((p) => p.routes ?? []);
+    const topLevelPluginRoutes = pluginRoutes.filter((r) => !r.flowScoped);
+    const flowScopedPluginRoutes = pluginRoutes.filter((r) => r.flowScoped);
+
+    return (
+      <div className="flex-1 w-full h-full min-h-0">
+        <Routes>
+          <Route
+            path={basePath}
+            element={
+              <InvectLayout
+                client={client}
+                apiBaseUrl={apiBaseUrl}
+                apiClient={apiClient}
+                basePath={basePath}
+                plugins={plugins}
+              />
+            }
+          >
+            <Route index element={<Home basePath={basePath} />} />
+            <Route path="credentials" element={<Credentials basePath={basePath} />} />
+            <Route path="flow-runs" element={<AllFlowRuns basePath={basePath} />} />
+            {/* Flow-scoped layout with header */}
+            <Route path="flow/:flowId" element={<FlowRouteLayout basePath={basePath} />}>
+              <Route index element={<Flow basePath={basePath} />} />
+              <Route path="runs" element={<FlowRuns basePath={basePath} />} />
+              {/* Plugin flow-scoped routes */}
+              {flowScopedPluginRoutes.map((route) => (
+                <Route
+                  key={route.path}
+                  path={route.path.replace(/^\//, '')}
+                  element={<route.component basePath={basePath} />}
+                />
+              ))}
+            </Route>
+            {/* Plugin top-level routes */}
+            {topLevelPluginRoutes.map((route) => (
+              <Route
+                key={route.path}
+                path={route.path.replace(/^\//, '')}
+                element={<route.component basePath={basePath} />}
+              />
+            ))}
+          </Route>
+        </Routes>
+      </div>
+    );
+  },
+);
+
+InvectRoutes.displayName = 'InvectRoutes';
+
+/**
+ * Complete Invect component with internal routing
+ * Use this for standalone applications or when mounting Invect at a specific route
+ *
+ * Automatically wraps in a BrowserRouter if no Router context is detected
+ * (e.g. when used inside Next.js or other non-React-Router frameworks).
+ * Pass useMemoryRouter=true to use MemoryRouter instead (useful for testing).
+ *
+ * For integration into existing React Router apps, use createInvectRoutes instead
+ */
+export const Invect = React.memo(
+  ({
+    reactQueryClient,
+    apiBaseUrl = 'http://localhost:3000/invect',
+    basePath = '/invect',
+    useMemoryRouter = false,
+    plugins,
+    apiClient,
+  }: InvectProps) => {
+    const client = reactQueryClient || createDefaultQueryClient();
+    const hasRouter = useHasRouterContext();
+
+    const routes = (
+      <InvectRoutes
+        client={client}
+        apiBaseUrl={apiBaseUrl}
+        apiClient={apiClient}
+        basePath={basePath}
+        plugins={plugins}
+      />
+    );
+
+    // If already inside a Router (e.g. Vite + React Router app), render routes directly.
+    // Otherwise, wrap in an appropriate Router for the environment.
+    if (hasRouter) {
+      return routes;
+    }
+
+    if (useMemoryRouter) {
+      return <MemoryRouter initialEntries={[basePath]}>{routes}</MemoryRouter>;
+    }
+
+    return <BrowserRouter>{routes}</BrowserRouter>;
+  },
+);
+
+Invect.displayName = 'Invect';

package/src/InvectShell.tsx

@@ -0,0 +1,55 @@
+/**
+ * InvectShell — Lightweight CSS scope + theme wrapper.
+ *
+ * Establishes the `.invect` CSS scope so that all `imp-*` theme
+ * tokens and Tailwind utilities work inside it. Use this when you
+ * need Invect theming around content that renders OUTSIDE the
+ * full `<Invect />` component — for example, auth gates, plugin
+ * UIs, or custom landing pages.
+ *
+ * Does NOT include routing, sidebar, API providers, or any of the
+ * full Invect app shell. For the full app, use `<Invect />`.
+ *
+ * @example
+ * ```tsx
+ * import { InvectShell } from '@invect/ui';
+ * import '@invect/ui/styles';
+ *
+ * function AuthPage() {
+ *   return (
+ *     <InvectShell>
+ *       <MySignInForm />
+ *     </InvectShell>
+ *   );
+ * }
+ * ```
+ */
+
+import React, { type ReactNode } from 'react';
+import { ThemeProvider } from './contexts/ThemeProvider';
+import './app.css';
+
+export interface InvectShellProps {
+  children: ReactNode;
+  /**
+   * Theme mode. 'system' follows OS preference.
+   * @default 'dark'
+   */
+  theme?: 'light' | 'dark' | 'system';
+  /**
+   * Additional class names on the shell container.
+   */
+  className?: string;
+}
+
+export const InvectShell = React.memo(
+  ({ children, theme = 'dark', className }: InvectShellProps) => {
+    return (
+      <ThemeProvider defaultTheme={theme} storageKey="invect-ui-theme" className={className}>
+        {children}
+      </ThemeProvider>
+    );
+  },
+);
+
+InvectShell.displayName = 'InvectShell';

package/src/api/agent-tools.api.ts

@@ -0,0 +1,23 @@
+// Agent tools React Query hooks
+import { useQuery } from '@tanstack/react-query';
+import { useApiClient } from '../contexts/ApiContext';
+import { queryKeys } from './query-keys';
+
+export function useAgentTools() {
+  const apiClient = useApiClient();
+
+  return useQuery({
+    queryKey: queryKeys.agentTools,
+    queryFn: () => apiClient.getAgentTools(),
+    staleTime: 1000 * 60 * 30, // 30 minutes - tools don't change often
+    retry: (failureCount, error) => {
+      if (failureCount >= 2) {
+        return false;
+      }
+      if (error instanceof Error && error.message.includes('4')) {
+        return false;
+      }
+      return true;
+    },
+  });
+}