insforge 0.3.1

package/frontend/src/components/PromptDialog.tsx

@@ -0,0 +1,68 @@
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/radix/Dialog';
+import { CopyButton } from '@/components/CopyButton';
+import { cn } from '@/lib/utils/utils';
+
+interface PromptDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  title?: string;
+  subtitle?: string;
+  prompt: string;
+  additionalAction?: React.ReactNode;
+}
+
+export function PromptDialog({
+  open,
+  onOpenChange,
+  title = 'Integrate with your application',
+  subtitle = 'Paste the prompt below into your cloud agent',
+  prompt,
+  additionalAction,
+}: PromptDialogProps) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-4xl p-0 bg-white border border-zinc-200 shadow-[0px_1px_3px_0px_rgba(0,0,0,0.1)] dark:bg-neutral-800 dark:border-neutral-700">
+        <div className="flex flex-col">
+          <DialogHeader className="px-6 py-3 flex flex-col gap-1 justify-start border-b border-zinc-200 dark:border-neutral-700">
+            <DialogTitle className="text-lg font-semibold text-zinc-950 dark:text-white">
+              {title}
+            </DialogTitle>
+          </DialogHeader>
+          {/* Content */}
+          <div className="p-6 flex flex-col gap-4">
+            <p className="text-sm text-zinc-500 font-normal leading-5 dark:text-neutral-400">
+              {subtitle}
+            </p>
+            {/* Prompt display */}
+            <div className="relative">
+              <pre
+                className={cn(
+                  'px-6 py-4 font-mono text-sm leading-5 overflow-auto whitespace-pre-wrap break-all rounded',
+                  'max-h-96',
+                  'bg-zinc-50 text-zinc-900 dark:bg-neutral-700 dark:text-white',
+                  'border border-zinc-200 dark:border-neutral-700'
+                )}
+              >
+                {prompt}
+              </pre>
+            </div>
+
+            {/* Action buttons */}
+            <div className="flex items-center justify-end gap-2.5">
+              {additionalAction}
+              <CopyButton
+                text={prompt}
+                variant="default"
+                size="default"
+                showText={true}
+                className="h-9 pl-2 pr-3 py-2 text-sm font-medium"
+                copyText="Copy Prompt"
+                copiedText="Copied!"
+              />
+            </div>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/frontend/src/components/SearchInput.tsx

@@ -0,0 +1,90 @@
+import { useState, useEffect } from 'react';
+import { Search, X } from 'lucide-react';
+import { Input } from '@/components/radix/Input';
+import { Button } from '@/components/radix/Button';
+
+interface SearchInputProps {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  className?: string;
+  /** Debounce delay in milliseconds. Set to 0 to disable debouncing. Default: 500ms */
+  debounceTime?: number;
+  /** Callback fired immediately when input changes (before debounce) */
+  onImmediateChange?: (value: string) => void;
+}
+
+export function SearchInput({
+  value,
+  onChange,
+  placeholder = 'Search...',
+  className,
+  debounceTime = 500,
+  onImmediateChange,
+}: SearchInputProps) {
+  const [internalValue, setInternalValue] = useState(value);
+
+  // Sync internal value with external value prop
+  useEffect(() => {
+    setInternalValue(value);
+  }, [value]);
+
+  // Handle debounced onChange
+  useEffect(() => {
+    if (debounceTime === 0) {
+      // No debouncing, call onChange immediately
+      onChange(internalValue);
+      return;
+    }
+
+    // Set up debounce timer
+    const handler = setTimeout(() => {
+      onChange(internalValue);
+    }, debounceTime);
+
+    // Cleanup timer on value change
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [internalValue, debounceTime, onChange]);
+
+  const handleInputChange = (newValue: string) => {
+    setInternalValue(newValue);
+    // Call immediate change callback if provided
+    onImmediateChange?.(newValue);
+  };
+
+  const handleClear = () => {
+    setInternalValue('');
+    onImmediateChange?.('');
+    // If no debouncing, clear immediately
+    if (debounceTime === 0) {
+      onChange('');
+    }
+  };
+
+  return (
+    <div
+      className={`relative bg-white dark:bg-neutral-900 overflow-hidden rounded-md ${className || ''}`}
+    >
+      <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground dark:text-zinc-300" />
+      <Input
+        type="text"
+        placeholder={placeholder}
+        value={internalValue}
+        onChange={(e) => handleInputChange(e.target.value)}
+        className="pl-9 pr-9 h-10  dark:text-white dark:placeholder:text-neutral-400 dark:border-neutral-700"
+      />
+      {internalValue && (
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={handleClear}
+          className="absolute right-1 top-1/2 h-7 w-7 -translate-y-1/2"
+        >
+          <X className="h-3 w-3" />
+        </Button>
+      )}
+    </div>
+  );
+}

package/frontend/src/components/SelectionClearButton.tsx

@@ -0,0 +1,26 @@
+import { X } from 'lucide-react';
+
+interface SelectionClearButtonProps {
+  selectedCount: number;
+  itemType: string;
+  onClear: () => void;
+}
+
+export function SelectionClearButton({
+  selectedCount,
+  itemType,
+  onClear,
+}: SelectionClearButtonProps) {
+  const isPlural = selectedCount > 1;
+  const displayText = `${selectedCount} ${isPlural ? `${itemType}s` : itemType} selected`;
+
+  return (
+    <button
+      className="flex items-center gap-1.5 h-10 px-3 rounded-[6px] bg-white border border-border-gray hover:bg-gray-50 dark:bg-neutral-600 dark:border-neutral-600 dark:hover:bg-neutral-700 transition-colors"
+      onClick={onClear}
+    >
+      <p className="text-zinc-950 dark:text-white text-sm">{displayText}</p>
+      <X className="h-4 w-4 text-gray-500 dark:text-neutral-400" />
+    </button>
+  );
+}

package/frontend/src/components/Stepper.tsx

@@ -0,0 +1,139 @@
+import { cn } from '@/lib/utils/utils';
+
+interface CircularStepperProps {
+  isActive: boolean;
+  currentStep: number;
+  totalSteps: number;
+  size?: number;
+}
+
+export function CircularStepper({
+  isActive,
+  currentStep,
+  totalSteps,
+  size = 40,
+}: CircularStepperProps) {
+  const radius = (size - 2) / 2;
+  const circumference = 2 * Math.PI * radius;
+  const progress = (currentStep / totalSteps) * circumference;
+
+  return (
+    <div className="relative [&_svg]:w-full [&_svg]:h-full" style={{ width: size, height: size }}>
+      {/* Background circle */}
+      <svg className="absolute inset-0 transform">
+        <circle
+          cx={size / 2}
+          cy={size / 2}
+          r={radius}
+          stroke="currentColor"
+          strokeWidth="2"
+          fill="none"
+          className={cn(
+            'transition-all duration-300',
+            isActive ? 'text-zinc-50' : 'text-zinc-200 dark:text-zinc-500'
+          )}
+        />
+        {/* Progress circle */}
+        <circle
+          cx={size / 2}
+          cy={size / 2}
+          r={radius}
+          stroke="currentColor"
+          strokeWidth="2"
+          fill="none"
+          strokeDasharray={circumference}
+          strokeDashoffset={circumference - progress}
+          className={cn(
+            'transition-all duration-300',
+            isActive ? 'text-zinc-400 dark:text-zinc-800' : 'text-zinc-950 dark:text-emerald-300'
+          )}
+          strokeLinecap="round"
+        />
+      </svg>
+      {/* Step number */}
+      <div className="absolute inset-0 flex items-center justify-center">
+        <span
+          className={cn(
+            'transition-all duration-300',
+            isActive ? 'text-zinc-200 dark:text-zinc-800' : 'text-zinc-950 dark:text-white'
+          )}
+        >
+          {currentStep}/{totalSteps}
+        </span>
+      </div>
+    </div>
+  );
+}
+
+import ActiveStep from '@/assets/icons/step_active.svg?react';
+import InactiveStep from '@/assets/icons/step_inactive.svg?react';
+import CheckedIcon from '@/assets/icons/checked.svg?react';
+
+interface LinearStepperProps {
+  currentStep: number;
+  totalSteps: number;
+  stepLabels: readonly string[];
+  className?: string;
+  isCompleted: boolean;
+}
+
+export function LinearStepper({
+  currentStep,
+  totalSteps,
+  stepLabels,
+  className,
+  isCompleted,
+}: LinearStepperProps) {
+  // Calculate progress percentage
+  const progressPercentage = isCompleted
+    ? 100
+    : Math.min(((currentStep - 1) / totalSteps) * 100 + currentStep, 100);
+
+  return (
+    <div className={cn('w-full space-y-3', className)}>
+      {/* Progress Bar */}
+      <div className="relative w-full h-2 bg-zinc-200 dark:bg-zinc-600 rounded-full overflow-hidden">
+        <div
+          className="absolute top-0 left-0 h-full bg-zinc-950 dark:bg-white transition-all duration-500 ease-in-out"
+          style={{ width: `${progressPercentage}%` }}
+        />
+      </div>
+
+      {/* Step Labels */}
+      <div className="flex justify-start items-center gap-6 w-full">
+        {stepLabels.map((label, index) => {
+          const stepNumber = index + 1;
+          const stepIsCompleted = stepNumber < currentStep || isCompleted;
+          const isCurrent = stepNumber === currentStep;
+
+          return (
+            <div key={stepNumber} className="flex flex-row items-start justify-start gap-1 w-full">
+              {/* Step Number */}
+              <div className="w-5 h-5 flex items-center justify-center">
+                {stepIsCompleted ? (
+                  <CheckedIcon className="w-5 h-5" />
+                ) : isCurrent ? (
+                  <ActiveStep className="w-5 h-5 dark:text-white" />
+                ) : (
+                  <InactiveStep className="w-5 h-5 dark:text-neutral-400" />
+                )}
+              </div>
+
+              {/* Step Label */}
+              <span
+                className={cn(
+                  'text-sm text-center transition-colors duration-300',
+                  stepIsCompleted || isCurrent
+                    ? 'text-zinc-950 dark:text-white'
+                    : 'text-zinc-500 dark:text-neutral-400'
+                )}
+              >
+                {label}
+              </span>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

package/frontend/src/components/ThemeToggle.tsx

@@ -0,0 +1,58 @@
+import { Sun, Moon, Monitor } from 'lucide-react';
+import { useTheme } from '@/lib/contexts/ThemeContext';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/radix/DropdownMenu';
+import { Button } from '@/components/radix/Button';
+
+export function ThemeToggle() {
+  const { theme, resolvedTheme, setTheme } = useTheme();
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="h-9 w-9 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800"
+          aria-label="Toggle theme"
+        >
+          {resolvedTheme === 'light' ? (
+            <Sun className="h-5 w-5 text-gray-600 dark:text-gray-400" />
+          ) : (
+            <Moon className="h-5 w-5 text-gray-600 dark:text-gray-400" />
+          )}
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-36">
+        <DropdownMenuItem
+          onClick={() => setTheme('light')}
+          className="flex items-center gap-2 cursor-pointer"
+        >
+          <Sun className="h-4 w-4" />
+          <span>Light</span>
+          {theme === 'light' && <span className="ml-auto text-xs">✓</span>}
+        </DropdownMenuItem>
+        <DropdownMenuItem
+          onClick={() => setTheme('dark')}
+          className="flex items-center gap-2 cursor-pointer"
+        >
+          <Moon className="h-4 w-4" />
+          <span>Dark</span>
+          {theme === 'dark' && <span className="ml-auto text-xs">✓</span>}
+        </DropdownMenuItem>
+        <DropdownMenuItem
+          onClick={() => setTheme('system')}
+          className="flex items-center gap-2 cursor-pointer"
+        >
+          <Monitor className="h-4 w-4" />
+          <span>System</span>
+          {theme === 'system' && <span className="ml-auto text-xs">✓</span>}
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

package/frontend/src/components/TypeBadge.tsx

@@ -0,0 +1,20 @@
+import { cn } from '@/lib/utils/utils';
+
+interface TypeBadgeProps {
+  type: string;
+  className?: string;
+}
+
+export function TypeBadge({ type, className }: TypeBadgeProps) {
+  return (
+    <div
+      className={cn(
+        'inline-flex items-center justify-center px-1.5 py-0.5 rounded',
+        'bg-white border border-zinc-200 dark:bg-neutral-900 dark:border-neutral-700',
+        className
+      )}
+    >
+      <span className="text-xs font-normal text-zinc-500 dark:text-neutral-400">{type}</span>
+    </div>
+  );
+}

package/frontend/src/components/datagrid/DataGrid.tsx

@@ -0,0 +1,264 @@
+import '@/rdg.css';
+import { useMemo, useCallback } from 'react';
+import ReactDataGrid, {
+  type Column,
+  type SortColumn,
+  SelectColumn,
+  SELECT_COLUMN_KEY,
+  type CellClickArgs,
+  type CellMouseEvent,
+  type RenderCellProps,
+} from 'react-data-grid';
+import { cn } from '@/lib/utils/utils';
+import { PaginationControls } from '../PaginationControls';
+import { Checkbox } from '../Checkbox';
+import { useTheme } from '@/lib/contexts/ThemeContext';
+import type { DataGridColumn, DataGridRow, DataGridRowType } from './datagridTypes';
+import SortableHeaderRenderer from './SortableHeader';
+
+// Generic DataGrid props
+export interface DataGridProps<TRow extends DataGridRowType = DataGridRow> {
+  data: TRow[];
+  columns: DataGridColumn<TRow>[];
+  loading?: boolean;
+  isSorting?: boolean;
+  isRefreshing?: boolean;
+  selectedRows?: Set<string>;
+  onSelectedRowsChange?: (selectedRows: Set<string>) => void;
+  sortColumns?: SortColumn[];
+  onSortColumnsChange?: (sortColumns: SortColumn[]) => void;
+  onCellClick?: (args: CellClickArgs<TRow>, event: CellMouseEvent) => void;
+  currentPage?: number;
+  totalPages?: number;
+  pageSize?: number;
+  totalRecords?: number;
+  onPageChange?: (page: number) => void;
+  emptyStateTitle?: string;
+  emptyStateActionText?: string;
+  onEmptyStateAction?: () => void;
+  rowKeyGetter?: (row: TRow) => string;
+  className?: string;
+  showSelection?: boolean;
+  showPagination?: boolean;
+  showTypeBadge?: boolean;
+}
+
+// Main DataGrid component
+export default function DataGrid<TRow extends DataGridRowType = DataGridRow>({
+  data,
+  columns,
+  loading = false,
+  isSorting = false,
+  isRefreshing = false,
+  selectedRows,
+  onSelectedRowsChange,
+  sortColumns,
+  onSortColumnsChange,
+  onCellClick,
+  currentPage,
+  totalPages,
+  pageSize,
+  totalRecords,
+  onPageChange,
+  emptyStateTitle = 'No data available',
+  emptyStateActionText,
+  onEmptyStateAction,
+  rowKeyGetter,
+  className,
+  showSelection = false,
+  showPagination = true,
+  showTypeBadge = true,
+}: DataGridProps<TRow>) {
+  const { resolvedTheme } = useTheme();
+  // Convert columns to react-data-grid format
+  const gridColumns = useMemo(() => {
+    const cols: Column<TRow>[] = [];
+
+    // Add selection column if enabled and not hidden
+    if (showSelection && selectedRows !== undefined && onSelectedRowsChange) {
+      cols.push({
+        ...SelectColumn,
+        key: SELECT_COLUMN_KEY,
+        frozen: true,
+        width: 45,
+        minWidth: 45,
+        maxWidth: 45,
+        resizable: false,
+        renderCell: ({ row, tabIndex }) => (
+          <Checkbox
+            checked={selectedRows.has(String(row.id))}
+            onChange={(checked) => {
+              const newSelectedRows = new Set(selectedRows);
+              if (checked) {
+                newSelectedRows.add(String(row.id));
+              } else {
+                newSelectedRows.delete(String(row.id));
+              }
+              onSelectedRowsChange(newSelectedRows);
+            }}
+            tabIndex={tabIndex}
+          />
+        ),
+        renderHeaderCell: () => {
+          const selectedCount = data.filter((row) => selectedRows.has(String(row.id))).length;
+          const totalCount = data.length;
+          const isAllSelected = totalCount > 0 && selectedCount === totalCount;
+          const isPartiallySelected = selectedCount > 0 && selectedCount < totalCount;
+
+          return (
+            <Checkbox
+              checked={isAllSelected}
+              indeterminate={isPartiallySelected}
+              onChange={(checked) => {
+                const newSelectedRows = new Set(selectedRows);
+                if (checked) {
+                  // Select all
+                  data.forEach((row) => newSelectedRows.add(String(row.id)));
+                } else {
+                  // Unselect all
+                  data.forEach((row) => newSelectedRows.delete(String(row.id)));
+                }
+                onSelectedRowsChange(newSelectedRows);
+              }}
+            />
+          );
+        },
+      });
+    }
+
+    // Add data columns
+    columns.forEach((col) => {
+      const currentSort = sortColumns?.find((sort) => sort.columnKey === col.key);
+      const sortDirection = currentSort?.direction;
+
+      const gridColumn: Column<TRow> = {
+        ...col,
+        key: col.key,
+        name: col.name,
+        width: col.width,
+        minWidth: col.minWidth || 80,
+        maxWidth: col.maxWidth,
+        resizable: col.resizable !== false,
+        sortable: col.sortable !== false,
+        sortDescendingFirst: col.sortDescendingFirst ?? true,
+        editable: col.editable && !col.isPrimaryKey,
+        renderCell:
+          col.renderCell ||
+          (({ row, column }: RenderCellProps<TRow>) => {
+            const value = row[column.key];
+            const displayValue = String(value ?? '');
+            return (
+              <div className="w-full h-full flex items-center">
+                <span className="truncate dark:text-zinc-300" title={displayValue}>
+                  {displayValue}
+                </span>
+              </div>
+            );
+          }),
+        renderEditCell: col.renderEditCell,
+        renderHeaderCell:
+          col.renderHeaderCell ||
+          (() => (
+            <SortableHeaderRenderer<TRow>
+              column={col}
+              sortDirection={sortDirection}
+              columnType={col.type}
+              showTypeBadge={showTypeBadge}
+            />
+          )),
+      };
+
+      cols.push(gridColumn);
+    });
+
+    return cols;
+  }, [
+    columns,
+    selectedRows,
+    onSelectedRowsChange,
+    data,
+    sortColumns,
+    showSelection,
+    showTypeBadge,
+  ]);
+
+  // Default row key getter
+  const defaultRowKeyGetter = useCallback((row: TRow) => row.id || Math.random().toString(), []);
+  const keyGetter = rowKeyGetter || defaultRowKeyGetter;
+
+  // Loading state - only show full loading screen if not sorting
+  if (loading && !isSorting) {
+    return (
+      <div className="h-full flex items-center justify-center bg-white dark:bg-neutral-800">
+        <div className="text-gray-500 dark:text-zinc-400">Loading...</div>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={cn(
+        'h-full flex flex-col bg-bg-gray dark:bg-neutral-800 overflow-hidden',
+        className
+      )}
+    >
+      <div className="flex-1 overflow-hidden relative mx-3 border border-border-gray dark:border-0">
+        <ReactDataGrid
+          columns={gridColumns}
+          rows={isRefreshing ? [] : data}
+          rowKeyGetter={keyGetter}
+          onRowsChange={() => {}}
+          selectedRows={selectedRows}
+          onSelectedRowsChange={onSelectedRowsChange}
+          sortColumns={sortColumns || []}
+          onSortColumnsChange={onSortColumnsChange}
+          onCellClick={onCellClick}
+          className={`h-full fill-grid ${resolvedTheme === 'dark' ? 'rdg-dark' : 'rdg-light'}`}
+          headerRowHeight={36}
+          rowHeight={36}
+          enableVirtualization={true}
+          renderers={{
+            noRowsFallback: (
+              <div className="absolute inset-x-0 top-0 mt-13 py-8 flex items-center justify-center bg-white dark:bg-neutral-800">
+                <div className="flex flex-col gap-1 items-center">
+                  <div className="flex flex-row gap-2.5 items-center">
+                    <div className="text-sm text-zinc-500 dark:text-zinc-400">
+                      {emptyStateTitle}
+                    </div>
+                    {emptyStateActionText && onEmptyStateAction && (
+                      <button
+                        onClick={onEmptyStateAction}
+                        className="inline-flex items-center text-sm font-medium text-chart-blue-dark focus:outline-none focus:ring-0 dark:text-zinc-400"
+                      >
+                        {emptyStateActionText}
+                      </button>
+                    )}
+                  </div>
+                </div>
+              </div>
+            ),
+          }}
+        />
+
+        {/* Loading mask overlay */}
+        {isRefreshing && (
+          <div className="absolute inset-0 bg-white dark:bg-neutral-800 flex items-center justify-center z-50 mt-9">
+            <div className="flex items-center gap-1">
+              <div className="w-5 h-5 border-2 border-zinc-500 dark:border-neutral-700 border-t-transparent rounded-full animate-spin" />
+              <span className="text-sm text-zinc-500 dark:text-zinc-400">Loading</span>
+            </div>
+          </div>
+        )}
+      </div>
+      {showPagination && onPageChange && (
+        <PaginationControls
+          currentPage={currentPage}
+          totalPages={totalPages}
+          onPageChange={onPageChange}
+          totalRecords={totalRecords}
+          pageSize={pageSize}
+        />
+      )}
+    </div>
+  );
+}