insforge 1.2.10 → 1.4.8

package/frontend/src/features/onboard/components/mcp/helpers.tsx

@@ -1,98 +1,123 @@
-import { ReactElement } from 'react';
-export interface MCPAgent {
-  id: string;
-  displayName: string;
-  logo?: ReactElement;
-}
-
-import TraeLogo from '@/assets/logos/trae.svg?react';
-import CursorLogo from '@/assets/logos/cursor.svg?react';
-import ClaudeLogo from '@/assets/logos/claude_code.svg?react';
-import WindsurfLogo from '@/assets/logos/windsurf.svg?react';
-import ClineLogo from '@/assets/logos/cline.svg?react';
-import RooCodeLogo from '@/assets/logos/roo_code.svg';
-import { getBackendUrl } from '@/lib/utils/utils';
-// import CodexLogo from '@/assets/logos/openai.svg?react';
-
-export type PlatformType = 'macos-linux' | 'windows';
-
-export const GenerateInstallCommand = (agent: MCPAgent, apiKey: string) => {
-  return `npx @insforge/install --client ${agent.id} --env API_KEY=${apiKey} --env API_BASE_URL=${getBackendUrl()}`;
-};
-
-export const MCP_AGENTS: MCPAgent[] = [
-  {
-    id: 'cursor',
-    displayName: 'Cursor',
-    logo: <CursorLogo className="w-6 h-6" />,
-  },
-  {
-    id: 'claude-code',
-    displayName: 'Claude Code',
-    logo: <ClaudeLogo className="w-6 h-6" />,
-  },
-  {
-    id: 'trae',
-    displayName: 'Trae',
-    logo: <TraeLogo className="w-5 h-5" />,
-  },
-  {
-    id: 'cline',
-    displayName: 'Cline',
-    logo: <ClineLogo className="w-6 h-6 dark:text-white" />,
-  },
-  {
-    id: 'windsurf',
-    displayName: 'Windsurf',
-    logo: <WindsurfLogo className="w-6 h-6 dark:text-white" />,
-  },
-  {
-    id: 'roocode',
-    displayName: 'Roo Code',
-    logo: <img src={RooCodeLogo} alt="" className="dark:invert" />,
-  },
-  // {
-  //   id: 'codex',
-  //   displayName: 'Codex',
-  //   logo: <CodexLogo className="w-5 h-5 dark:text-white" />,
-  // },
-  {
-    id: 'mcp',
-    displayName: 'MCP JSON',
-  },
-];
-
-// Core MCP server configuration builder
-export const createMCPServerConfig = (
-  apiKey: string,
-  platform: PlatformType,
-  apiBaseUrl?: string
-) => {
-  const env = {
-    API_KEY: apiKey,
-    API_BASE_URL: apiBaseUrl || window.location.origin,
-  };
-
-  if (platform === 'windows') {
-    return {
-      command: 'cmd',
-      args: ['/c', 'npx', '-y', '@insforge/mcp@latest'],
-      env,
-    };
-  } else {
-    return {
-      command: 'npx',
-      args: ['-y', '@insforge/mcp@latest'],
-      env,
-    };
-  }
-};
-
-// Full MCP configuration for AI assistants
-export const createMCPConfig = (apiKey: string, platform: PlatformType, apiBaseUrl?: string) => {
-  return {
-    mcpServers: {
-      insforge: createMCPServerConfig(apiKey, platform, apiBaseUrl),
-    },
-  };
-};
+import { ReactElement } from 'react';
+export interface MCPAgent {
+  id: string;
+  displayName: string;
+  logo?: ReactElement;
+}
+
+import TraeLogo from '@/assets/logos/trae.svg?react';
+import CursorLogo from '@/assets/logos/cursor.svg?react';
+import ClaudeLogo from '@/assets/logos/claude_code.svg?react';
+import WindsurfLogo from '@/assets/logos/windsurf.svg?react';
+import ClineLogo from '@/assets/logos/cline.svg?react';
+import RooCodeLogo from '@/assets/logos/roo_code.svg';
+import QoderLogo from '@/assets/logos/qoder.svg?react';
+import CopilotLogo from '@/assets/logos/copilot.svg?react';
+import AntigravityLogo from '@/assets/logos/antigravity.svg?react';
+import OpenAILogo from '@/assets/logos/openai.svg?react';
+import KiroLogo from '@/assets/logos/kiro.svg?react';
+import { getBackendUrl } from '@/lib/utils/utils';
+// import CodexLogo from '@/assets/logos/openai.svg?react';
+
+export type PlatformType = 'macos-linux' | 'windows';
+
+export const GenerateInstallCommand = (agent: MCPAgent, apiKey: string) => {
+  return `npx @insforge/install --client ${agent.id} --env API_KEY=${apiKey} --env API_BASE_URL=${getBackendUrl()}`;
+};
+
+export const MCP_AGENTS: MCPAgent[] = [
+  {
+    id: 'cursor',
+    displayName: 'Cursor',
+    logo: <CursorLogo className="w-6 h-6" />,
+  },
+  {
+    id: 'claude-code',
+    displayName: 'Claude Code',
+    logo: <ClaudeLogo className="w-6 h-6" />,
+  },
+  {
+    id: 'trae',
+    displayName: 'Trae',
+    logo: <TraeLogo className="w-5 h-5" />,
+  },
+  {
+    id: 'cline',
+    displayName: 'Cline',
+    logo: <ClineLogo className="w-6 h-6 dark:text-white" />,
+  },
+  {
+    id: 'windsurf',
+    displayName: 'Windsurf',
+    logo: <WindsurfLogo className="w-6 h-6 dark:text-white" />,
+  },
+  {
+    id: 'roocode',
+    displayName: 'Roo Code',
+    logo: <img src={RooCodeLogo} alt="" className="dark:invert" />,
+  },
+  {
+    id: 'qoder',
+    displayName: 'Qoder',
+    logo: <QoderLogo className="w-5 h-5 dark:text-white" />,
+  },
+  {
+    id: 'copilot',
+    displayName: 'Copilot',
+    logo: <CopilotLogo className="w-5 h-5 dark:text-white" />,
+  },
+  {
+    id: 'antigravity',
+    displayName: 'Antigravity',
+    logo: <AntigravityLogo className="w-5 h-5 dark:text-white" />,
+  },
+  {
+    id: 'codex',
+    displayName: 'Codex',
+    logo: <OpenAILogo className="w-5 h-5 dark:text-white" />,
+  },
+  {
+    id: 'kiro',
+    displayName: 'Kiro',
+    logo: <KiroLogo className="w-5 h-5 dark:text-white" />,
+  },
+  {
+    id: 'mcp',
+    displayName: 'MCP JSON',
+  },
+];
+
+// Core MCP server configuration builder
+export const createMCPServerConfig = (
+  apiKey: string,
+  platform: PlatformType,
+  apiBaseUrl?: string
+) => {
+  const env = {
+    API_KEY: apiKey,
+    API_BASE_URL: apiBaseUrl || window.location.origin,
+  };
+
+  if (platform === 'windows') {
+    return {
+      command: 'cmd',
+      args: ['/c', 'npx', '-y', '@insforge/mcp@latest'],
+      env,
+    };
+  } else {
+    return {
+      command: 'npx',
+      args: ['-y', '@insforge/mcp@latest'],
+      env,
+    };
+  }
+};
+
+// Full MCP configuration for AI assistants
+export const createMCPConfig = (apiKey: string, platform: PlatformType, apiBaseUrl?: string) => {
+  return {
+    mcpServers: {
+      insforge: createMCPServerConfig(apiKey, platform, apiBaseUrl),
+    },
+  };
+};

package/frontend/src/features/onboard/components/mcp/index.ts

@@ -1,3 +1,4 @@
-export { CursorDeeplinkGenerator } from './CursorDeeplinkGenerator';
-export type { MCPAgent, PlatformType } from './helpers';
-export { MCP_AGENTS, createMCPConfig, createMCPServerConfig } from './helpers';
+export { CursorDeeplinkGenerator } from './CursorDeeplinkGenerator';
+export { QoderDeeplinkGenerator } from './QoderDeeplinkGenerator';
+export type { MCPAgent, PlatformType } from './helpers';
+export { MCP_AGENTS, createMCPConfig, createMCPServerConfig } from './helpers';

package/frontend/src/features/onboard/index.ts

@@ -1,13 +1,17 @@
-// Onboard components
-export { McpConnectionStatus } from './components/McpConnectionStatus';
-export {
-  OnboardingModal,
-  getOnboardingSkipped,
-  setOnboardingSkipped,
-} from './components/OnboardingModal';
-export { VideoDemoModal } from './components/VideoDemoModal';
-
-// MCP helpers
-export { CursorDeeplinkGenerator } from './components/mcp/CursorDeeplinkGenerator';
-export type { MCPAgent, PlatformType } from './components/mcp/helpers';
-export { MCP_AGENTS, createMCPConfig, createMCPServerConfig } from './components/mcp/helpers';
+// Onboard components
+export { McpConnectionStatus } from './components/McpConnectionStatus';
+export {
+  OnboardingModal,
+  getOnboardingSkipped,
+  setOnboardingSkipped,
+} from './components/OnboardingModal';
+export { VideoDemoModal } from './components/VideoDemoModal';
+export { McpConnectionSection } from './components/McpConnectionSection';
+export { ApiCredentialsSection } from './components/ApiCredentialsSection';
+export { ConnectionStringSection } from './components/ConnectionStringSection';
+export { ShowPasswordButton } from './components/ShowPasswordButton';
+export { OnboardingController } from './components/OnboardingController';
+// MCP helpers
+export { CursorDeeplinkGenerator } from './components/mcp/CursorDeeplinkGenerator';
+export type { MCPAgent, PlatformType } from './components/mcp/helpers';
+export { MCP_AGENTS, createMCPConfig, createMCPServerConfig } from './components/mcp/helpers';

package/frontend/src/features/realtime/components/ChannelRow.tsx

@@ -0,0 +1,83 @@
+import { cn, formatDate } from '@/lib/utils/utils';
+import { Trash2 } from 'lucide-react';
+import { Switch } from '@/components';
+import type { RealtimeChannel } from '../services/realtime.service';
+
+interface ChannelRowProps {
+  channel: RealtimeChannel;
+  onClick: () => void;
+  onToggleEnabled: (enabled: boolean) => void;
+  onDelete: () => void;
+  isUpdating?: boolean;
+  isDeleting?: boolean;
+  className?: string;
+}
+
+export function ChannelRow({
+  channel,
+  onClick,
+  onToggleEnabled,
+  onDelete,
+  isUpdating,
+  isDeleting,
+  className,
+}: ChannelRowProps) {
+  return (
+    <div
+      className={cn(
+        'group flex items-center h-14 px-3 bg-white hover:bg-neutral-100 dark:bg-[#333333] dark:hover:bg-neutral-700 rounded-lg transition-all cursor-pointer',
+        className
+      )}
+      onClick={onClick}
+    >
+      {/* Toggle Switch - matches header w-[76px] */}
+      <div className="flex items-center w-[76px] shrink-0 px-3 py-1.5">
+        <Switch
+          checked={channel.enabled}
+          disabled={isUpdating}
+          onCheckedChange={(checked) => {
+            onToggleEnabled(checked);
+          }}
+          onClick={(e) => e.stopPropagation()}
+        />
+      </div>
+
+      {/* Pattern Column - flex-1 to match header */}
+      <div className="flex-1 min-w-0 px-3 py-1.5">
+        <p className="text-sm text-zinc-950 dark:text-white truncate" title={channel.pattern}>
+          {channel.pattern}
+        </p>
+      </div>
+
+      {/* Description Column - fixed w-[640px] to match header */}
+      <div className="w-[640px] min-w-0 px-3 py-1.5">
+        <span
+          className="text-sm text-zinc-700 dark:text-white truncate block"
+          title={channel.description || ''}
+        >
+          {channel.description || '-'}
+        </span>
+      </div>
+
+      {/* Created Column - flex-1 to match header */}
+      <div className="flex-1 min-w-0 px-3 py-1">
+        <span className="text-sm text-zinc-700 dark:text-white truncate" title={channel.createdAt}>
+          {formatDate(channel.createdAt)}
+        </span>
+      </div>
+
+      {/* Delete Button - hidden by default, visible on hover */}
+      <button
+        className="flex items-center justify-center size-8 rounded opacity-0 group-hover:opacity-100 hover:bg-neutral-200 dark:hover:bg-neutral-600 transition-all disabled:opacity-50"
+        onClick={(e) => {
+          e.stopPropagation();
+          onDelete();
+        }}
+        disabled={isDeleting}
+        aria-label="Delete channel"
+      >
+        <Trash2 className="size-5 text-neutral-400 group-hover:text-zinc-600 dark:group-hover:text-white transition-colors" />
+      </button>
+    </div>
+  );
+}

package/frontend/src/features/realtime/components/EditChannelModal.tsx

@@ -0,0 +1,246 @@
+import { useState, useEffect } from 'react';
+import { Plus, X } from 'lucide-react';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+  Button,
+  Input,
+  Label,
+  Switch,
+  Textarea,
+} from '@/components';
+import type { RealtimeChannel } from '../services/realtime.service';
+import type { UpdateChannelRequest } from '@insforge/shared-schemas';
+
+interface EditChannelModalProps {
+  channel: RealtimeChannel | null;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onSave: (id: string, data: UpdateChannelRequest) => void;
+  isUpdating?: boolean;
+}
+
+export function EditChannelModal({
+  channel,
+  open,
+  onOpenChange,
+  onSave,
+  isUpdating,
+}: EditChannelModalProps) {
+  const [pattern, setPattern] = useState('');
+  const [description, setDescription] = useState('');
+  const [enabled, setEnabled] = useState(true);
+  const [webhookUrls, setWebhookUrls] = useState<string[]>(['']);
+
+  useEffect(() => {
+    if (channel) {
+      setPattern(channel.pattern);
+      setDescription(channel.description || '');
+      setEnabled(channel.enabled);
+      // Default to at least one empty input if no webhooks configured
+      const urls =
+        channel.webhookUrls && channel.webhookUrls.length > 0 ? channel.webhookUrls : [''];
+      setWebhookUrls(urls);
+    }
+  }, [channel]);
+
+  const handleAddWebhook = () => {
+    setWebhookUrls([...webhookUrls, '']);
+  };
+
+  const handleRemoveWebhook = (index: number) => {
+    if (webhookUrls.length === 1) {
+      // Keep at least one input, just clear it
+      setWebhookUrls(['']);
+    } else {
+      setWebhookUrls(webhookUrls.filter((_, i) => i !== index));
+    }
+  };
+
+  const handleWebhookChange = (index: number, value: string) => {
+    const updated = [...webhookUrls];
+    updated[index] = value;
+    setWebhookUrls(updated);
+  };
+
+  const handleSave = () => {
+    if (!channel) {
+      return;
+    }
+
+    const updates: UpdateChannelRequest = {};
+
+    if (pattern !== channel.pattern) {
+      updates.pattern = pattern;
+    }
+    if (description !== (channel.description || '')) {
+      updates.description = description || undefined;
+    }
+    if (enabled !== channel.enabled) {
+      updates.enabled = enabled;
+    }
+
+    // Filter out empty webhook URLs and compare
+    const filteredWebhooks = webhookUrls.filter((url) => url.trim() !== '');
+    const originalWebhooks = channel.webhookUrls || [];
+    const webhooksChanged =
+      filteredWebhooks.length !== originalWebhooks.length ||
+      filteredWebhooks.some((url, i) => url !== originalWebhooks[i]);
+
+    if (webhooksChanged) {
+      updates.webhookUrls = filteredWebhooks;
+    }
+
+    onSave(channel.id, updates);
+  };
+
+  const hasChanges = () => {
+    if (!channel) {
+      return false;
+    }
+
+    const filteredWebhooks = webhookUrls.filter((url) => url.trim() !== '');
+    const originalWebhooks = channel.webhookUrls || [];
+    const webhooksChanged =
+      filteredWebhooks.length !== originalWebhooks.length ||
+      filteredWebhooks.some((url, i) => url !== originalWebhooks[i]);
+
+    return (
+      pattern !== channel.pattern ||
+      description !== (channel.description || '') ||
+      enabled !== channel.enabled ||
+      webhooksChanged
+    );
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-[560px] dark:bg-neutral-800 p-0 gap-0">
+        <DialogHeader className="px-6 py-4 border-b border-zinc-200 dark:border-neutral-700">
+          <DialogTitle className="text-lg font-semibold text-zinc-950 dark:text-white">
+            Edit Channel
+          </DialogTitle>
+        </DialogHeader>
+
+        <div className="space-y-6 p-6">
+          {/* Pattern */}
+          <div className="flex flex-row justify-between gap-6">
+            <Label
+              htmlFor="pattern"
+              className="w-28 shrink-0 text-sm font-medium text-zinc-950 dark:text-white pt-2"
+            >
+              Pattern
+            </Label>
+            <div className="flex-1 flex flex-col gap-1">
+              <Input
+                id="pattern"
+                value={pattern}
+                onChange={(e) => setPattern(e.target.value)}
+                placeholder="e.g., room:%, chat:lobby"
+                className="dark:bg-neutral-900 dark:placeholder:text-neutral-500 dark:border-neutral-700 dark:text-white"
+              />
+              <p className="text-xs text-zinc-500 dark:text-neutral-400">
+                Use alphanumeric characters, colons, hyphens, and % as wildcard
+              </p>
+            </div>
+          </div>
+
+          {/* Description */}
+          <div className="flex flex-row justify-between gap-6">
+            <Label
+              htmlFor="description"
+              className="w-28 shrink-0 text-sm font-medium text-zinc-950 dark:text-white pt-2"
+            >
+              Description
+            </Label>
+            <Textarea
+              id="description"
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+              placeholder="Optional description for this channel"
+              rows={2}
+              className="flex-1 dark:bg-neutral-900 dark:placeholder:text-neutral-500 dark:border-neutral-700 dark:text-white resize-none"
+            />
+          </div>
+
+          {/* Enabled Toggle */}
+          <div className="flex flex-row justify-between gap-6">
+            <Label
+              htmlFor="enabled"
+              className="w-28 shrink-0 text-sm font-medium text-zinc-950 dark:text-white"
+            >
+              Enabled
+            </Label>
+            <div className="flex-1">
+              <Switch id="enabled" checked={enabled} onCheckedChange={setEnabled} />
+            </div>
+          </div>
+
+          {/* Webhook URLs */}
+          <div className="flex flex-row justify-between gap-6">
+            <Label className="w-28 shrink-0 text-sm font-medium text-zinc-950 dark:text-white pt-2">
+              Webhook URLs
+            </Label>
+            <div className="flex-1 flex flex-col gap-2">
+              {webhookUrls.map((url, index) => (
+                <div key={index} className="flex items-center gap-2">
+                  <Input
+                    value={url}
+                    onChange={(e) => handleWebhookChange(index, e.target.value)}
+                    placeholder="https://example.com/webhook"
+                    className="flex-1 dark:bg-neutral-900 dark:placeholder:text-neutral-500 dark:border-neutral-700 dark:text-white"
+                  />
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="icon"
+                    onClick={() => handleRemoveWebhook(index)}
+                    className="h-9 w-9 shrink-0 text-zinc-400 hover:text-red-500 dark:text-neutral-500 dark:hover:text-red-400"
+                  >
+                    <X className="h-4 w-4" />
+                  </Button>
+                </div>
+              ))}
+              <Button
+                type="button"
+                variant="ghost"
+                size="sm"
+                onClick={handleAddWebhook}
+                className="w-fit h-8 px-2 text-sm text-zinc-600 hover:text-zinc-900 dark:text-neutral-400 dark:hover:text-white"
+              >
+                <Plus className="h-4 w-4 mr-1" />
+                Add URL
+              </Button>
+              <p className="text-xs text-zinc-500 dark:text-neutral-400">
+                Messages published to this channel will be forwarded to these URLs
+              </p>
+            </div>
+          </div>
+        </div>
+
+        <DialogFooter className="px-6 py-4 gap-3 border-t border-zinc-200 dark:border-neutral-700">
+          <Button
+            type="button"
+            variant="outline"
+            onClick={() => onOpenChange(false)}
+            disabled={isUpdating}
+            className="h-9 px-4 dark:bg-neutral-600 dark:text-white dark:border-transparent dark:hover:bg-neutral-700"
+          >
+            Cancel
+          </Button>
+          <Button
+            type="button"
+            onClick={handleSave}
+            disabled={!hasChanges() || isUpdating}
+            className="h-9 px-4 bg-zinc-950 text-white hover:bg-zinc-800 disabled:opacity-40 dark:bg-emerald-300 dark:text-zinc-950 dark:hover:bg-emerald-400"
+          >
+            {isUpdating ? 'Saving...' : 'Save Changes'}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/frontend/src/features/realtime/components/MessageRow.tsx

@@ -0,0 +1,85 @@
+import { cn, formatTime } from '@/lib/utils/utils';
+import type { RealtimeMessage } from '../services/realtime.service';
+
+interface MessageRowProps {
+  message: RealtimeMessage;
+  onClick: () => void;
+  className?: string;
+}
+
+export function MessageRow({ message, onClick, className }: MessageRowProps) {
+  const payloadStr = JSON.stringify(message.payload);
+
+  return (
+    <div
+      className={cn(
+        'group h-14 px-3 bg-white hover:bg-neutral-100 dark:bg-[#333333] dark:hover:bg-neutral-700 rounded-[8px] transition-all cursor-pointer',
+        className
+      )}
+      onClick={onClick}
+    >
+      <div className="grid grid-cols-12 h-full items-center">
+        {/* Event Name Column */}
+        <div className="col-span-2 min-w-0 px-3 py-1.5">
+          <p className="text-sm text-zinc-950 dark:text-white truncate" title={message.eventName}>
+            {message.eventName}
+          </p>
+        </div>
+
+        {/* Channel Column */}
+        <div className="col-span-2 min-w-0 px-3 py-1.5">
+          <span
+            className="text-sm text-muted-foreground dark:text-neutral-400 truncate block"
+            title={message.channelName}
+          >
+            {message.channelName}
+          </span>
+        </div>
+
+        {/* Sender Type Column */}
+        <div className="col-span-1 px-3 py-1.5">
+          <span
+            className={cn(
+              'inline-flex items-center justify-center h-5 px-1.5 rounded-sm text-xs font-medium text-white capitalize',
+              message.senderType === 'system' ? 'bg-sky-700' : 'bg-teal-700'
+            )}
+          >
+            {message.senderType}
+          </span>
+        </div>
+
+        {/* Payload Preview Column */}
+        <div className="col-span-3 min-w-0 px-3 py-1.5">
+          <span className="text-sm text-muted-foreground dark:text-neutral-400 truncate block">
+            {payloadStr.slice(0, 50)}
+            {payloadStr.length > 50 ? '...' : ''}
+          </span>
+        </div>
+
+        {/* WS Audience Column */}
+        <div className="col-span-1 px-3 py-1.5">
+          <span className="text-sm text-muted-foreground dark:text-neutral-400">
+            {message.wsAudienceCount}
+          </span>
+        </div>
+
+        {/* WH Delivered Column */}
+        <div className="col-span-1 px-3 py-1.5">
+          <span className="text-sm text-muted-foreground dark:text-neutral-400">
+            {message.whDeliveredCount}/{message.whAudienceCount}
+          </span>
+        </div>
+
+        {/* Created Column */}
+        <div className="col-span-2 px-3 py-1.5">
+          <span
+            className="text-sm text-muted-foreground dark:text-neutral-400 truncate"
+            title={message.createdAt}
+          >
+            {formatTime(message.createdAt)}
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}