insforge 0.3.1

package/frontend/src/components/ConfirmDialog.tsx

@@ -0,0 +1,96 @@
+import * as React from 'react';
+import { X } from 'lucide-react';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogTitle,
+} from '@/components';
+
+interface ConfirmDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  title: string;
+  description: string | React.ReactNode;
+  confirmText?: string;
+  cancelText?: string;
+  onConfirm: () => void | Promise<void>;
+  destructive?: boolean;
+  isLoading?: boolean;
+}
+
+export function ConfirmDialog({
+  open,
+  onOpenChange,
+  title,
+  description,
+  confirmText = 'Confirm',
+  cancelText = 'Cancel',
+  onConfirm,
+  destructive = false,
+  isLoading = false,
+}: ConfirmDialogProps) {
+  const handleConfirm = async () => {
+    await onConfirm();
+    onOpenChange(false);
+  };
+
+  return (
+    <AlertDialog open={open} onOpenChange={onOpenChange}>
+      <AlertDialogContent className="max-w-[480px] p-0 gap-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 dark:text-white">
+        {/* Header with close button */}
+        <div className="flex items-center justify-between px-6 py-3 border-b border-zinc-200 dark:border-neutral-700">
+          <AlertDialogTitle className="text-lg font-semibold text-zinc-950 dark:text-white">
+            {title}
+          </AlertDialogTitle>
+          <button
+            className="absolute right-4 top-4 rounded-sm text-zinc-500 transition-colors hover:text-zinc-700 focus:outline-none disabled:pointer-events-none dark:text-zinc-400 dark:hover:text-zinc-300"
+            onClick={() => onOpenChange(false)}
+          >
+            <X className="h-5 w-5" />
+            <span className="sr-only">Close</span>
+          </button>
+        </div>
+
+        {/* Description */}
+        <div className="p-6">
+          {typeof description === 'string' ? (
+            <AlertDialogDescription className="text-zinc-500 text-sm leading-5 dark:text-neutral-400">
+              {description}
+            </AlertDialogDescription>
+          ) : (
+            <div className="text-zinc-500 text-sm leading-5 dark:text-neutral-400">
+              {description}
+            </div>
+          )}
+        </div>
+
+        {/* Footer */}
+        <AlertDialogFooter className="p-6 flex-row justify-end gap-3 border-t border-zinc-200 dark:border-neutral-700">
+          <AlertDialogCancel
+            disabled={isLoading}
+            className="h-9 w-30 px-3 py-2 text-sm font-medium bg-white border border-zinc-200 shadow-[0px_1px_2px_0px_rgba(0,0,0,0.1)] rounded hover:bg-zinc-50 dark:bg-neutral-600 dark:border-neutral-600 dark:text-white dark:hover:bg-neutral-700"
+          >
+            {cancelText}
+          </AlertDialogCancel>
+          <AlertDialogAction
+            onClick={() => {
+              void handleConfirm();
+            }}
+            disabled={isLoading}
+            className={`h-9 w-30 px-3 py-2 text-sm font-medium rounded shadow-[0px_1px_2px_0px_rgba(0,0,0,0.1)] dark:shadow-[0px_1px_2px_0px_rgba(0,0,0,0.1)] ${
+              destructive
+                ? 'bg-red-600 hover:bg-red-700 text-white dark:bg-red-200 dark:hover:bg-red-300 dark:text-red-700'
+                : 'bg-zinc-950 hover:bg-zinc-900 text-white dark:bg-emerald-300 dark:text-black dark:hover:bg-emerald-400'
+            }`}
+          >
+            {isLoading ? 'Processing...' : confirmText}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}

package/frontend/src/components/CopyButton.tsx

@@ -0,0 +1,69 @@
+import { useState } from 'react';
+import { Copy } from 'lucide-react';
+import { Button } from '@/components/radix/Button';
+import { cn } from '@/lib/utils/utils';
+import CheckedIcon from '@/assets/icons/checked.svg?react';
+
+interface CopyButtonProps {
+  text: string;
+  onCopy?: (text: string) => void;
+  className?: string;
+  variant?: 'ghost' | 'outline' | 'default';
+  size?: 'sm' | 'default' | 'lg' | 'icon';
+  showText?: boolean;
+  copiedText?: string;
+  copyText?: string;
+  disabled?: boolean;
+}
+
+export function CopyButton({
+  text,
+  onCopy,
+  className,
+  variant = 'ghost',
+  size = 'sm',
+  showText = true,
+  copiedText = 'Copied',
+  copyText = 'Copy',
+  disabled = false,
+}: CopyButtonProps) {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = async (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation();
+    if (disabled) {
+      return;
+    }
+
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+
+      if (onCopy) {
+        onCopy(text);
+      }
+    } catch (error) {
+      // Failed to copy text
+      console.error(error);
+    }
+  };
+
+  return (
+    <Button
+      variant={variant}
+      size={size}
+      onClick={(e) => void handleCopy(e)}
+      disabled={disabled}
+      data-copied={copied}
+      className={cn(
+        'px-3 w-fit h-8 rounded-md bg-zinc-50 dark:bg-neutral-700 hover:bg-bg-gray-hover dark:hover:bg-neutral-700 border-border-gray dark:border-neutral-700 border text-zinc-950 dark:text-white shadow gap-1.5 transition-all duration-200',
+        'data-[copied=true]:bg-transparent data-[copied=true]:cursor-default data-[copied=true]:shadow-none data-[copied=true]:border-none data-[copied=true]:hover:bg-transparent',
+        className
+      )}
+    >
+      {copied ? <CheckedIcon className="w-4 h-4" /> : <Copy className="w-4 h-4 " />}
+      {showText && <span className="font-medium text-sm">{copied ? copiedText : copyText}</span>}
+    </Button>
+  );
+}

package/frontend/src/components/DeleteActionButton.tsx

@@ -0,0 +1,42 @@
+import { Button } from '@/components/radix/Button';
+import { useTheme } from '@/lib/contexts/ThemeContext';
+
+interface DeleteActionButtonProps {
+  selectedCount: number;
+  itemType: string;
+  onDelete: () => void;
+  className?: string;
+}
+
+export function DeleteActionButton({
+  selectedCount,
+  itemType,
+  onDelete,
+  className = '',
+}: DeleteActionButtonProps) {
+  const { resolvedTheme } = useTheme();
+
+  const getItemLabel = (count: number, type: string) => {
+    const singular = type.charAt(0).toUpperCase() + type.slice(1);
+    const plural =
+      type === 'user'
+        ? 'Users'
+        : type === 'record'
+          ? 'Records'
+          : type === 'file'
+            ? 'Files'
+            : `${singular}s`;
+
+    return count === 1 ? singular : plural;
+  };
+
+  return (
+    <Button
+      variant={resolvedTheme === 'light' ? 'outline' : 'default'}
+      className={`h-10 px-3 text-sm text-red-600 hover:text-red-400 hover:bg-zinc-50 border border-border-gray shadow-0 dark:bg-red-200 dark:text-red-600 dark:border-transparent dark:hover:bg-red-300 ${className}`}
+      onClick={onDelete}
+    >
+      Delete {selectedCount} {getItemLabel(selectedCount, itemType)}
+    </Button>
+  );
+}

package/frontend/src/components/EmptyState.tsx

@@ -0,0 +1,41 @@
+import { LucideIcon } from 'lucide-react';
+import { Button } from '@/components/radix/Button';
+import { cn } from '@/lib/utils/utils';
+
+interface EmptyStateProps {
+  icon?: LucideIcon;
+  image?: string;
+  title: string;
+  description?: string;
+  action?: {
+    label: string;
+    onClick: () => void;
+  };
+  className?: string;
+}
+
+export function EmptyState({
+  icon: Icon,
+  image,
+  title,
+  description,
+  action,
+  className,
+}: EmptyStateProps) {
+  return (
+    <div
+      className={cn(
+        'text-center flex flex-col items-center justify-center text-zinc-500',
+        className
+      )}
+    >
+      {Icon && <Icon className="mx-auto h-50 w-50 text-muted-foreground" />}
+      {image && !Icon && (
+        <img src={image} alt={title} className="mx-auto h-50 w-50 object-contain" />
+      )}
+      <h3 className="text-sm font-medium">{title}</h3>
+      {description && <p className="text-xs max-w-sm">{description}</p>}
+      {action && <Button onClick={action.onClick}>{action.label}</Button>}
+    </div>
+  );
+}

package/frontend/src/components/ErrorState.tsx

@@ -0,0 +1,35 @@
+import { AlertCircle } from 'lucide-react';
+import { Button } from '@/components/radix/Button';
+import { Alert, AlertDescription, AlertTitle } from '@/components/radix/Alert';
+import { cn } from '@/lib/utils/utils';
+
+interface ErrorStateProps {
+  error: Error | string;
+  title?: string;
+  onRetry?: () => void;
+  className?: string;
+}
+
+export function ErrorState({
+  error,
+  title = 'Something went wrong',
+  onRetry,
+  className,
+}: ErrorStateProps) {
+  const errorMessage = error instanceof Error ? error.message : error;
+
+  return (
+    <Alert variant="destructive" className={cn('', className)}>
+      <AlertCircle className="h-4 w-4" />
+      <AlertTitle>{title}</AlertTitle>
+      <AlertDescription className="mt-2">
+        <p>{errorMessage}</p>
+        {onRetry && (
+          <Button variant="outline" size="sm" onClick={onRetry} className="mt-4">
+            Try again
+          </Button>
+        )}
+      </AlertDescription>
+    </Alert>
+  );
+}

package/frontend/src/components/FeatureSidebar.tsx

@@ -0,0 +1,126 @@
+import { useState, ReactNode } from 'react';
+import { Plus, LucideIcon } from 'lucide-react';
+import { ScrollArea } from '@/components/radix/ScrollArea';
+import { Button } from '@/components/radix/Button';
+import { SearchInput } from '@/components/SearchInput';
+import { FeatureSidebarItem } from '@/components/FeatureSidebarItem';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@/components/radix/Tooltip';
+
+interface FeatureSidebarProps {
+  title: string;
+  items: string[];
+  selectedItem?: string;
+  onItemSelect: (itemName: string) => void;
+  loading?: boolean;
+  onNewItem?: () => void;
+  onEditItem?: (itemName: string) => void;
+  onDeleteItem?: (itemName: string) => void;
+  searchPlaceholder?: string;
+  newItemTooltip?: string;
+  editLabel?: string;
+  deleteLabel?: string;
+  icon: LucideIcon;
+  filterItems?: (itemNames: string[]) => string[];
+  renderSkeleton: () => ReactNode;
+  renderEmptyState: (searchTerm: string) => ReactNode;
+}
+
+export function FeatureSidebar({
+  title,
+  items,
+  selectedItem,
+  onItemSelect,
+  loading,
+  onNewItem,
+  onEditItem,
+  onDeleteItem,
+  searchPlaceholder = 'Search...',
+  newItemTooltip = 'Add new',
+  editLabel = 'Edit',
+  deleteLabel = 'Delete',
+  icon,
+  filterItems,
+  renderSkeleton,
+  renderEmptyState,
+}: FeatureSidebarProps) {
+  const [searchTerm, setSearchTerm] = useState('');
+
+  let itemNames = items;
+  if (filterItems) {
+    itemNames = filterItems(itemNames);
+  }
+
+  const normalizedSearch = searchTerm.toLowerCase().replace(/\s+/g, '');
+  const filteredItems = itemNames.filter((name) =>
+    name.toLowerCase().replace(/\s+/g, '').includes(normalizedSearch)
+  );
+
+  return (
+    <div className="w-70 flex flex-col h-full bg-white dark:bg-neutral-800 border-r border-border-gray dark:border-neutral-700">
+      {/* Header */}
+      <div className="flex flex-row justify-between items-center pl-4 pr-1.5 py-1.5 bg-white dark:bg-neutral-800">
+        <h2 className="text-base font-bold text-black dark:text-white">{title}</h2>
+        {onNewItem && (
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  onClick={onNewItem}
+                  variant="ghost"
+                  size="icon"
+                  className="h-9 w-9 dark:bg-transparent dark:text-neutral-400 dark:hover:bg-neutral-700"
+                >
+                  <Plus className="w-5 h-5" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>{newItemTooltip}</p>
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        )}
+      </div>
+
+      {/* Add Button and Search */}
+      <div className="py-2 px-3 bg-white dark:bg-neutral-800">
+        <SearchInput
+          value={searchTerm}
+          onChange={setSearchTerm}
+          placeholder={searchPlaceholder}
+          className="w-full dark:text-white"
+          debounceTime={200}
+        />
+      </div>
+
+      {/* Item List */}
+      <ScrollArea className="flex-1 px-3 pb-3 dark:bg-neutral-800">
+        {loading ? (
+          renderSkeleton()
+        ) : filteredItems.length === 0 ? (
+          renderEmptyState(searchTerm)
+        ) : (
+          <div className="space-y-1 dark:text-zinc-300">
+            {filteredItems.map((itemName) => (
+              <FeatureSidebarItem
+                key={itemName}
+                name={itemName}
+                icon={icon}
+                isSelected={selectedItem === itemName}
+                onClick={() => onItemSelect(itemName)}
+                onEdit={onEditItem ? () => onEditItem(itemName) : undefined}
+                onDelete={onDeleteItem ? () => onDeleteItem(itemName) : undefined}
+                editLabel={editLabel}
+                deleteLabel={deleteLabel}
+              />
+            ))}
+          </div>
+        )}
+      </ScrollArea>
+    </div>
+  );
+}

package/frontend/src/components/FeatureSidebarItem.tsx

@@ -0,0 +1,101 @@
+import { useState } from 'react';
+import { Pencil, Trash2, MoreVertical, LucideIcon } from 'lucide-react';
+import { Button } from '@/components/radix/Button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/radix/DropdownMenu';
+import { cn } from '@/lib/utils/utils';
+
+interface FeatureSidebarItemProps {
+  name: string;
+  icon: LucideIcon;
+  isSelected: boolean;
+  onClick: () => void;
+  onEdit?: () => void;
+  onDelete?: () => void;
+  editLabel?: string;
+  deleteLabel?: string;
+}
+
+export function FeatureSidebarItem({
+  name,
+  icon: Icon,
+  isSelected,
+  onClick,
+  onEdit,
+  onDelete,
+  editLabel = 'Edit',
+  deleteLabel = 'Delete',
+}: FeatureSidebarItemProps) {
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+
+  return (
+    <div className="relative h-12 group">
+      <Button
+        variant="ghost"
+        className={cn(
+          'w-full h-full flex items-center justify-start px-[14px] py-[14px]',
+          !isSelected && 'hover:bg-[#F8FAFC] dark:hover:bg-neutral-700',
+          isSelected && 'bg-[#F1F5F9] dark:bg-neutral-600'
+        )}
+        onClick={onClick}
+      >
+        <Icon className="mr-2 h-4 w-4" />
+        <span
+          title={name}
+          className={cn(
+            'flex-1 min-w-0 truncate text-left',
+            isSelected ? 'font-bold dark:text-zinc-300' : 'font-medium dark:text-zinc-300'
+          )}
+        >
+          {name}
+        </span>
+        {(onEdit || onDelete) && (
+          <div className="ml-2 flex items-center">
+            <DropdownMenu open={dropdownOpen} onOpenChange={setDropdownOpen}>
+              <DropdownMenuTrigger asChild onClick={(e) => e.stopPropagation()}>
+                <div
+                  className={cn(
+                    'h-6 w-6 p-0 flex items-center justify-center rounded cursor-pointer opacity-100',
+                    `bg-transparent hover:bg-[#E2E8F0] dark:hover:bg-neutral-700`
+                  )}
+                >
+                  <MoreVertical className="h-5 w-5 text-[#71717A] dark:text-zinc-300" />
+                </div>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="start" className="w-48">
+                {onEdit && (
+                  <DropdownMenuItem
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      onEdit();
+                    }}
+                    className="cursor-pointer"
+                  >
+                    <Pencil className="mr-2 h-5 w-5 text-[#71717A] dark:text-zinc-300" />
+                    {editLabel}
+                  </DropdownMenuItem>
+                )}
+                {onDelete && (
+                  <DropdownMenuItem
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      onDelete();
+                    }}
+                    className="text-red-600 focus:text-red-600 dark:text-red-400 dark:focus:text-red-400 cursor-pointer"
+                  >
+                    <Trash2 className="mr-2 h-5 w-5 dark:text-red-400" />
+                    {deleteLabel}
+                  </DropdownMenuItem>
+                )}
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+        )}
+      </Button>
+    </div>
+  );
+}

package/frontend/src/components/JsonHighlight.tsx

@@ -0,0 +1,61 @@
+import { CopyButton } from './CopyButton';
+
+interface JsonHighlightProps {
+  json: string;
+}
+
+export function JsonHighlight({ json }: JsonHighlightProps) {
+  const highlightJson = (str: string) => {
+    // Tokenize JSON string
+    const tokens = str.split(/("(?:[^"\\]|\\.)*")|(\s+)|([:,{}[\]])/g).filter(Boolean);
+
+    return tokens.map((token, index) => {
+      // String values (including keys)
+      if (token.startsWith('"') && token.endsWith('"')) {
+        // Check if this is a key (next non-whitespace token is ':')
+        let isKey = false;
+        for (let i = index + 1; i < tokens.length; i++) {
+          if (tokens[i].trim()) {
+            isKey = tokens[i] === ':';
+            break;
+          }
+        }
+
+        if (isKey) {
+          return (
+            <span key={index} className="text-blue-600 dark:text-blue-400">
+              {token}
+            </span>
+          );
+        } else {
+          return (
+            <span key={index} className="text-green-600 dark:text-green-400">
+              {token}
+            </span>
+          );
+        }
+      }
+
+      // Punctuation
+      if (/^[:,{}[\]]$/.test(token)) {
+        return (
+          <span key={index} className="text-gray-600 dark:text-gray-400">
+            {token}
+          </span>
+        );
+      }
+
+      // Whitespace and other
+      return <span key={index}>{token}</span>;
+    });
+  };
+
+  return (
+    <div className="relative">
+      <pre className="font-mono text-sm leading-6 whitespace-pre overflow-x-auto bg-gray-50 dark:bg-neutral-900 dark:text-white rounded-md py-4 px-6 pr-16">
+        {highlightJson(json)}
+      </pre>
+      <CopyButton text={json} className="absolute top-4 right-4" />
+    </div>
+  );
+}

package/frontend/src/components/LoadingState.tsx

@@ -0,0 +1,16 @@
+import { Loader2 } from 'lucide-react';
+import { cn } from '@/lib/utils/utils';
+
+interface LoadingStateProps {
+  message?: string;
+  className?: string;
+}
+
+export function LoadingState({ message = 'Loading...', className }: LoadingStateProps) {
+  return (
+    <div className={cn('flex flex-col items-center justify-center py-12', className)}>
+      <Loader2 className="h-8 w-8 animate-spin text-muted-foreground mb-4" />
+      <p className="text-sm text-muted-foreground">{message}</p>
+    </div>
+  );
+}

package/frontend/src/components/PaginationControls.tsx

@@ -0,0 +1,54 @@
+import { Button } from '@/components/radix/Button';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+
+export interface PaginationControlsProps {
+  currentPage?: number;
+  totalPages?: number;
+  onPageChange?: (page: number) => void;
+  totalRecords?: number;
+  pageSize?: number;
+  recordLabel?: string;
+}
+
+export function PaginationControls({
+  currentPage = 1,
+  totalPages = 1,
+  onPageChange,
+  totalRecords = 0,
+  pageSize = 50,
+  recordLabel = 'results',
+}: PaginationControlsProps) {
+  const startRecord = totalRecords === 0 ? 0 : (currentPage - 1) * pageSize + 1;
+  const endRecord = Math.min(currentPage * pageSize, totalRecords);
+
+  return (
+    <div className="flex items-center justify-between px-4 py-3 border-t border-gray-200 bg-gray-50 dark:bg-neutral-800 dark:border-neutral-700">
+      <div className="text-sm text-zinc-500 dark:text-zinc-400">
+        Showing {startRecord} to {endRecord} of {totalRecords} {recordLabel}
+      </div>
+      <div className="flex items-center gap-2">
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => onPageChange?.(currentPage - 1)}
+          disabled={currentPage <= 1}
+          className="dark:bg-neutral-800 dark:border-neutral-700 dark:text-white"
+        >
+          <ChevronLeft className="h-4 w-4" />
+        </Button>
+        <span className="text-sm text-gray-700 dark:text-zinc-300">
+          Page {totalRecords === 0 ? 0 : currentPage} of {totalPages}
+        </span>
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => onPageChange?.(currentPage + 1)}
+          disabled={currentPage >= totalPages}
+          className="dark:bg-neutral-800 dark:border-neutral-700 dark:text-white"
+        >
+          <ChevronRight className="h-4 w-4" />
+        </Button>
+      </div>
+    </div>
+  );
+}