insforge 1.3.0 → 1.4.8

package/frontend/src/assets/logos/qoder.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 360 360">
+<path d="M0 0 C8.45956306 4.64859349 17.03492587 9.05737965 25.62646484 13.45507812 C35.94064308 18.73615638 46.20021508 24.08574219 56.33837891 29.70019531 C60.93127679 32.23740806 65.54938733 34.70010478 70.22802734 37.07617188 C71.25460449 37.59977295 72.28118164 38.12337402 73.33886719 38.6628418 C75.28471386 39.6507789 77.23519308 40.62967567 79.19140625 41.59692383 C94.44801591 49.35763099 107.18372609 61.63167743 113.12646484 77.95507812 C116.37052962 89.18293866 117.71418243 99.67618473 117.64404297 111.35375977 C117.64948321 112.90977629 117.65661637 114.46578765 117.6652832 116.02178955 C117.68328039 120.18867483 117.67655226 124.3551573 117.66376686 128.52204823 C117.6535313 132.90781064 117.66305996 137.29354205 117.66931152 141.67930603 C117.67655065 149.02967437 117.66709186 156.37988092 117.64794922 163.73022461 C117.62611449 172.21191498 117.63329451 180.69322163 117.65525484 189.17490298 C117.67342881 196.48914394 117.67595961 203.80326975 117.66550016 211.11752599 C117.65928555 215.4726465 117.65837483 219.82758668 117.67164612 224.18269539 C117.68323589 228.26977101 117.67512247 232.35635219 117.65206909 236.44337463 C117.64680176 237.93808612 117.64826182 239.43283958 117.65711975 240.9275341 C117.70487235 249.80634667 117.67385394 257.18676325 111.19677734 263.97851562 C105.01838896 268.27113085 99.84578784 270.81278068 92.12646484 269.95507812 C86.24835492 268.12378936 80.6307852 265.70302465 75.09130859 263.02929688 C74.08487305 262.54505249 74.08487305 262.54505249 73.05810547 262.05102539 C71.74995505 261.41408682 70.44755 260.76518081 69.15185547 260.10327148 C65.80562878 258.43539968 65.80562878 258.43539968 62.14990234 258.02539062 C58.98189922 259.48095963 55.89766732 261.08162886 52.81396484 262.70507812 C31.66683754 273.53145894 7.879152 279.1734137 -15.56103516 273.27929688 C-29.96427589 268.53072845 -43.522752 260.21129735 -56.74584961 252.91015625 C-65.20658318 248.26292717 -73.78166356 243.85297279 -82.37353516 239.45507812 C-92.73494986 234.14969763 -103.04383106 228.77807901 -113.22827148 223.13745117 C-117.61487591 220.7121832 -122.02051548 218.3523125 -126.49462891 216.09179688 C-144.92851472 206.77069867 -159.53107706 196.26073344 -166.87353516 175.95507812 C-170.40841014 164.57563629 -171.48687341 154.13568281 -171.43994141 142.28710938 C-171.44520066 140.6339229 -171.45148534 138.98073941 -171.45872498 137.32756042 C-171.46904174 133.88611597 -171.46469852 130.44508715 -171.44995117 127.00366211 C-171.43622844 123.52149836 -171.44307898 120.04043199 -171.47045898 116.55834961 C-171.66845678 91.32396442 -170.57684979 68.85551921 -158.87353516 45.95507812 C-158.5707666 45.35646973 -158.26799805 44.75786133 -157.95605469 44.14111328 C-144.25891835 17.53719946 -120.61497607 -5.27853503 -91.90478516 -14.73242188 C-55.45872058 -26.15124702 -32.49958176 -17.93650795 0 0 Z M-26.49462891 75.57226562 C-41.50953513 91.36017014 -51.56466723 110.88445494 -56.87353516 131.95507812 C-57.04812256 132.64343246 -57.22270996 133.3317868 -57.40258789 134.04100037 C-59.03902872 141.26298246 -59.13145209 148.23786406 -59.06884766 155.61914062 C-59.06601776 156.89236176 -59.06318787 158.16558289 -59.06027222 159.47738647 C-59.05103501 162.82781835 -59.03313308 166.17796649 -59.01086426 169.52832031 C-58.99023766 172.96091285 -58.98123492 176.39353495 -58.97119141 179.82617188 C-58.94923605 186.53588423 -58.91583775 193.24546484 -58.87353516 199.95507812 C-33.50750049 190.25188654 -15.7042659 163.60234245 -4.87353516 139.95507812 C3.47576167 120.30197406 3.52446533 100.92569279 3.31396484 79.95507812 C3.298888 77.33008582 3.28520492 74.70508512 3.27294922 72.08007812 C3.24018836 65.70489233 3.19022781 59.33002534 3.12646484 52.95507812 C-6.49426422 52.95507812 -20.09393042 69.18110618 -26.49462891 75.57226562 Z " fill="#FEFEFE" transform="translate(206.87353515625,51.044921875)"/>
+<path d="M0 0 C13.58332159 12.63939585 21.35936472 28.62481997 22.67781067 47.21190071 C22.8179475 51.32768651 22.84699493 55.42601099 22.82226562 59.54321289 C22.82770586 61.09922942 22.83483903 62.65524078 22.84350586 64.21124268 C22.86150305 68.37812796 22.85477492 72.54461042 22.84198952 76.71150136 C22.83175396 81.09726377 22.84128262 85.48299518 22.84753418 89.86875916 C22.85477331 97.21912749 22.84531452 104.56933405 22.82617188 111.91967773 C22.80433715 120.4013681 22.81151717 128.88267475 22.8334775 137.3643561 C22.85165147 144.67859706 22.85418227 151.99272287 22.84372282 159.30697912 C22.83750821 163.66209963 22.83659748 168.0170398 22.84986877 172.37214851 C22.86145854 176.45922413 22.85334512 180.54580532 22.83029175 184.63282776 C22.82502441 186.12753925 22.82648448 187.6222927 22.83534241 189.11698723 C22.88309501 197.99579979 22.85207659 205.37621637 16.375 212.16796875 C10.19661162 216.46058397 5.0240105 219.00223381 -2.6953125 218.14453125 C-8.57342243 216.31324248 -14.19099214 213.89247777 -19.73046875 211.21875 C-20.40142578 210.89592041 -21.07238281 210.57309082 -21.76367188 210.24047852 C-23.07182229 209.60353995 -24.37422735 208.95463393 -25.66992188 208.29272461 C-29.01614857 206.62485281 -29.01614857 206.62485281 -32.671875 206.21484375 C-35.83987812 207.67041275 -38.92411003 209.27108198 -42.0078125 210.89453125 C-63.01039551 221.64691186 -87.56497118 227.88521904 -110.8046875 221.2578125 C-113.49120846 220.31901443 -116.08930499 219.2864896 -118.6953125 218.14453125 C-119.82259766 217.66306641 -119.82259766 217.66306641 -120.97265625 217.171875 C-125.42618753 215.12341648 -128.35985945 212.80539436 -131.6953125 209.14453125 C-132.36304688 208.54125 -133.03078125 207.93796875 -133.71875 207.31640625 C-146.4627668 195.57277302 -152.27949535 180.00393496 -154.6953125 163.14453125 C-154.89640625 161.86707031 -155.0975 160.58960938 -155.3046875 159.2734375 C-155.64241733 155.53830638 -155.71660927 152.75835057 -154.6953125 149.14453125 C-151.18119184 145.5774339 -147.07344088 143.50518479 -142.6953125 141.14453125 C-117.17173915 123.13239991 -99.71251874 95.06912469 -93.71525574 64.52392578 C-91.64212663 52.40094394 -92.11339648 39.90290772 -92.0078125 27.64453125 C-91.97614793 24.97131057 -91.94008514 22.29817127 -91.90429688 19.625 C-91.82007902 13.13161606 -91.75145039 6.63821553 -91.6953125 0.14453125 C-83.75330252 -4.01067896 -76.05029871 -7.80216897 -67.3828125 -10.23046875 C-66.56748047 -10.47667969 -65.75214844 -10.72289063 -64.91210938 -10.9765625 C-43.36343574 -17.25087797 -17.42754833 -15.00550887 0 0 Z " fill="#2ADB5C" transform="translate(301.6953125,102.85546875)"/>
+</svg>

package/frontend/src/assets/logos/qwen.svg

@@ -0,0 +1,15 @@
+<svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M174.82 108.75L155.38 75L165.64 57.75C166.46 56.31 166.46 54.53 165.64 53.09L155.38 35.84C154.86 34.91 153.87 34.33 152.78 34.33H114.88L106.14 19.03C105.62 18.1 104.63 17.52 103.54 17.52H83.3C82.21 17.52 81.22 18.1 80.7 19.03L61.26 52.77H41.02C39.93 52.77 38.94 53.35 38.42 54.28L28.16 71.53C27.34 72.97 27.34 74.75 28.16 76.19L45.52 107.5L36.78 122.8C35.96 124.24 35.96 126.02 36.78 127.46L47.04 144.71C47.56 145.64 48.55 146.22 49.64 146.22H87.54L96.28 161.52C96.8 162.45 97.79 163.03 98.88 163.03H119.12C120.21 163.03 121.2 162.45 121.72 161.52L141.16 127.78H158.52C159.61 127.78 160.6 127.2 161.12 126.27L171.38 109.02C172.2 107.58 172.2 105.8 171.38 104.36L174.82 108.75Z" fill="url(#paint0_radial)"/>
+<path d="M119.12 163.03H98.88L87.54 144.71H49.64L61.26 126.39H80.7L38.42 55.29H61.26L83.3 19.03L93.56 37.35L83.3 55.29H161.58L151.32 72.54L170.76 106.28H151.32L141.16 88.34L101.18 163.03H119.12Z" fill="white"/>
+<path d="M127.86 79.83H76.14L101.18 122.11L127.86 79.83Z" fill="url(#paint1_radial)"/>
+<defs>
+<radialGradient id="paint0_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(100 100) rotate(90) scale(100)">
+<stop stop-color="#665CEE"/>
+<stop offset="1" stop-color="#332E91"/>
+</radialGradient>
+<radialGradient id="paint1_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(100 100) rotate(90) scale(100)">
+<stop stop-color="#665CEE"/>
+<stop offset="1" stop-color="#332E91"/>
+</radialGradient>
+</defs>
+</svg>

package/frontend/src/components/CodeBlock.tsx

@@ -36,8 +36,8 @@ export function CodeBlock({
         {/* Header row with label and copy button */}
         <div className="flex items-center justify-between mb-2">
           {label && (
-            <div className="bg-white dark:bg-neutral-700 rounded px-2 shrink-0">
-              <span className="text-gray-900 dark:text-neutral-50 text-xs">{label}</span>
+            <div className="bg-white dark:bg-neutral-700 rounded px-2 shrink-0 h-5 flex items-center">
+              <span className="text-gray-900 dark:text-neutral-50 text-xs leading-5">{label}</span>
             </div>
           )}
           {showCopy && (

package/frontend/src/components/ConnectCTA.tsx

@@ -1,7 +1,7 @@
 import { useNavigate } from 'react-router-dom';
 import { useMcpUsage } from '@/features/logs/hooks/useMcpUsage';
 import { isInsForgeCloudProject } from '@/lib/utils/utils';
-import { postMessageToParent } from '@/lib/utils/cloudMessaging';
+import { useModal } from '@/lib/hooks/useModal';
 
 interface ConnectCTAProps {
   className?: string;
@@ -11,6 +11,7 @@ interface ConnectCTAProps {
 export function ConnectCTA({ className, fallback }: ConnectCTAProps) {
   const navigate = useNavigate();
   const { hasCompletedOnboarding } = useMcpUsage();
+  const { setOnboardingModalOpen } = useModal();
 
   if (hasCompletedOnboarding) {
     return fallback;
@@ -18,7 +19,7 @@ export function ConnectCTA({ className, fallback }: ConnectCTAProps) {
 
   const handleConnect = () => {
     if (isInsForgeCloudProject()) {
-      postMessageToParent({ type: 'SHOW_ONBOARDING_OVERLAY' });
+      setOnboardingModalOpen(true);
     } else {
       void navigate('/dashboard/onboard');
     }

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

@@ -16,6 +16,14 @@ import { useTheme } from '@/lib/contexts/ThemeContext';
 import type { DataGridColumn, DataGridRow, DataGridRowType } from './datagridTypes';
 import SortableHeaderRenderer from './SortableHeader';
 
+// Custom selection cell renderer props
+export interface SelectionCellProps<TRow extends DataGridRowType = DataGridRow> {
+  row: TRow;
+  isSelected: boolean;
+  onToggle: (checked: boolean) => void;
+  tabIndex: number;
+}
+
 // Generic DataGrid props
 export interface DataGridProps<TRow extends DataGridRowType = DataGridRow> {
   data: TRow[];
@@ -40,6 +48,10 @@ export interface DataGridProps<TRow extends DataGridRowType = DataGridRow> {
   showPagination?: boolean;
   showTypeBadge?: boolean;
   noPadding?: boolean;
+  selectionColumnWidth?: number;
+  renderSelectionCell?: (props: SelectionCellProps<TRow>) => React.ReactNode;
+  rowClass?: (row: TRow) => string | undefined;
+  rightPanel?: React.ReactNode;
 }
 
 // Main DataGrid component
@@ -66,6 +78,10 @@ export default function DataGrid<TRow extends DataGridRowType = DataGridRow>({
   showPagination = true,
   showTypeBadge = true,
   noPadding = false,
+  selectionColumnWidth,
+  renderSelectionCell,
+  rowClass,
+  rightPanel,
 }: DataGridProps<TRow>) {
   const { resolvedTheme } = useTheme();
 
@@ -77,31 +93,35 @@ export default function DataGrid<TRow extends DataGridRowType = DataGridRow>({
 
     // Add selection column if enabled and not hidden
     if (showSelection && selectedRows !== undefined && onSelectedRowsChange) {
+      const colWidth = selectionColumnWidth ?? 45;
       cols.push({
         ...SelectColumn,
         key: SELECT_COLUMN_KEY,
         frozen: true,
-        width: 45,
-        minWidth: 45,
-        maxWidth: 45,
-        resizable: false,
-        renderCell: ({ row, tabIndex }) => (
-          <Checkbox
-            checked={selectedRows.has(keyGetter(row))}
-            onChange={(checked) => {
-              const newSelectedRows = new Set(selectedRows);
-              if (checked) {
-                newSelectedRows.add(String(keyGetter(row)));
-              } else {
-                newSelectedRows.delete(String(keyGetter(row)));
-              }
-              onSelectedRowsChange(newSelectedRows);
-            }}
-            tabIndex={tabIndex}
-          />
-        ),
+        width: colWidth,
+        minWidth: colWidth,
+        maxWidth: renderSelectionCell ? undefined : colWidth,
+        resizable: !!renderSelectionCell,
+        renderCell: ({ row, tabIndex }) => {
+          const isSelected = selectedRows.has(keyGetter(row));
+          const handleToggle = (checked: boolean) => {
+            const newSelectedRows = new Set(selectedRows);
+            if (checked) {
+              newSelectedRows.add(String(keyGetter(row)));
+            } else {
+              newSelectedRows.delete(String(keyGetter(row)));
+            }
+            onSelectedRowsChange(newSelectedRows);
+          };
+
+          if (renderSelectionCell) {
+            return renderSelectionCell({ row, isSelected, onToggle: handleToggle, tabIndex });
+          }
+
+          return <Checkbox checked={isSelected} onChange={handleToggle} tabIndex={tabIndex} />;
+        },
         renderHeaderCell: () => {
-          const selectedCount = data.filter((row) => selectedRows.has(String(row.id))).length;
+          const selectedCount = data.filter((row) => selectedRows.has(keyGetter(row))).length;
           const totalCount = data.length;
           const isAllSelected = totalCount > 0 && selectedCount === totalCount;
           const isPartiallySelected = selectedCount > 0 && selectedCount < totalCount;
@@ -114,10 +134,10 @@ export default function DataGrid<TRow extends DataGridRowType = DataGridRow>({
                 const newSelectedRows = new Set(selectedRows);
                 if (checked) {
                   // Select all
-                  data.forEach((row) => newSelectedRows.add(String(row.id)));
+                  data.forEach((row) => newSelectedRows.add(keyGetter(row)));
                 } else {
                   // Unselect all
-                  data.forEach((row) => newSelectedRows.delete(String(row.id)));
+                  data.forEach((row) => newSelectedRows.delete(keyGetter(row)));
                 }
                 onSelectedRowsChange(newSelectedRows);
               }}
@@ -182,6 +202,8 @@ export default function DataGrid<TRow extends DataGridRowType = DataGridRow>({
     showSelection,
     showTypeBadge,
     keyGetter,
+    selectionColumnWidth,
+    renderSelectionCell,
   ]);
 
   // Loading state - only show full loading screen if not sorting
@@ -200,48 +222,54 @@ export default function DataGrid<TRow extends DataGridRowType = DataGridRow>({
         className
       )}
     >
-      <div
-        className={cn(
-          'flex-1 overflow-hidden relative border border-border-gray dark:border-neutral-700 rounded-sm',
-          !noPadding && 'mx-3'
-        )}
-      >
-        <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: emptyState ? (
-              <div className="absolute inset-x-0 top-0 mt-13 py-8 flex items-center justify-center bg-white dark:bg-neutral-800">
-                {emptyState}
-              </div>
-            ) : (
-              <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="text-sm text-zinc-500 dark:text-zinc-400">No data to display</div>
-              </div>
-            ),
-          }}
-        />
+      <div className={cn('flex-1 overflow-hidden flex min-h-0', !noPadding && 'mx-3')}>
+        <div
+          className={cn(
+            'overflow-hidden relative border border-border-gray dark:border-neutral-700 rounded-sm',
+            rightPanel ? 'rounded-r-none border-r-0' : 'flex-1'
+          )}
+          style={rightPanel ? { width: 'calc(100% - 480px)' } : undefined}
+        >
+          <ReactDataGrid
+            key={rightPanel ? 'with-panel' : 'no-panel'}
+            columns={gridColumns}
+            rows={isRefreshing ? [] : data}
+            rowKeyGetter={keyGetter}
+            onRowsChange={() => {}}
+            selectedRows={selectedRows}
+            onSelectedRowsChange={onSelectedRowsChange}
+            sortColumns={sortColumns || []}
+            onSortColumnsChange={onSortColumnsChange}
+            onCellClick={onCellClick}
+            rowClass={rowClass}
+            className={`h-full fill-grid ${resolvedTheme === 'dark' ? 'rdg-dark' : 'rdg-light'}`}
+            headerRowHeight={36}
+            rowHeight={36}
+            enableVirtualization={true}
+            renderers={{
+              noRowsFallback: emptyState ? (
+                <div className="absolute inset-x-0 top-0 mt-13 py-8 flex items-center justify-center bg-white dark:bg-neutral-800">
+                  {emptyState}
+                </div>
+              ) : (
+                <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="text-sm text-zinc-500 dark:text-zinc-400">No data to display</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>
+          {/* 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>
-        )}
+          )}
+        </div>
+        {rightPanel}
       </div>
       {showPagination && onPageChange && (
         <PaginationControls

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

@@ -15,7 +15,8 @@ export type ConvertedValue =
   | number // INTEGER, FLOAT
   | boolean // BOOLEAN
   | null // NULL values for any nullable column
-  | JSON; // JSON (as parsed object or string)
+  | Record<string, unknown> // JSON objects (e.g., metadata fields)
+  | string[]; // Array of strings (e.g., providers)
 
 /**
  * User input values - these are the types of values users enter in forms and cell editors

package/frontend/src/components/datagrid/index.ts

@@ -3,7 +3,7 @@ export * from './cell-editors';
 
 // datagrid types
 export type * from './datagridTypes';
-export type { DataGridProps } from './DataGrid';
+export type { DataGridProps, SelectionCellProps } from './DataGrid';
 export type {
   Column,
   SortColumn,

package/frontend/src/components/index.ts

@@ -14,7 +14,6 @@ export { CodeBlock } from './CodeBlock';
 export { CodeEditor } from './CodeEditor';
 export { ConfirmDialog } from './ConfirmDialog';
 export { ConnectCTA } from './ConnectCTA';
-export { ProjectInfoModal } from './ProjectInfoModal';
 export { CopyButton } from './CopyButton';
 export { DeleteActionButton } from './DeleteActionButton';
 export { EmptyState } from './EmptyState';

package/frontend/src/components/layout/AppHeader.tsx

@@ -10,16 +10,11 @@ import {
   Separator,
   ThemeToggle,
 } from '@/components';
-import {
-  McpConnectionStatus,
-  OnboardingModal,
-  getOnboardingSkipped,
-  setOnboardingSkipped,
-} from '@/features/onboard';
-import { useMcpUsage } from '@/features/logs/hooks/useMcpUsage';
+import { McpConnectionStatus } from '@/features/onboard';
 import { cn } from '@/lib/utils/utils';
 import { useTheme } from '@/lib/contexts/ThemeContext';
 import { useAuth } from '@/lib/contexts/AuthContext';
+import { useModal } from '@/lib/hooks/useModal';
 
 // Import SVG icons
 import DiscordIcon from '@/assets/logos/discord.svg?react';
@@ -30,9 +25,8 @@ import InsForgeLogoDark from '@/assets/logos/insforge_dark.svg';
 export default function AppHeader() {
   const { resolvedTheme } = useTheme();
   const { user, logout } = useAuth();
-  const { hasCompletedOnboarding, isLoading: isMcpLoading } = useMcpUsage();
+  const { setOnboardingModalOpen } = useModal();
   const [githubStars, setGithubStars] = useState<number | null>(null);
-  const [isOnboardingModalOpen, setIsOnboardingModalOpen] = useState(false);
 
   // Fetch GitHub stars
   useEffect(() => {
@@ -48,21 +42,6 @@ export default function AppHeader() {
       });
   }, []);
 
-  // Auto-open onboarding modal if user hasn't connected and hasn't skipped
-  useEffect(() => {
-    if (!isMcpLoading && !hasCompletedOnboarding && !getOnboardingSkipped()) {
-      setIsOnboardingModalOpen(true);
-    }
-  }, [isMcpLoading, hasCompletedOnboarding]);
-
-  // When MCP connection is established, close onboarding modal and clear skip flag
-  useEffect(() => {
-    if (hasCompletedOnboarding) {
-      setIsOnboardingModalOpen(false);
-      setOnboardingSkipped(false);
-    }
-  }, [hasCompletedOnboarding]);
-
   const formatStars = (count: number): string => {
     if (count >= 1000) {
       return `${(count / 1000).toFixed(1)}k`;
@@ -139,7 +118,7 @@ export default function AppHeader() {
           <ThemeToggle />
           <Separator className="h-5 mx-2" orientation="vertical" />
           {/* MCP Connection Status */}
-          <McpConnectionStatus onConnectClick={() => setIsOnboardingModalOpen(true)} />
+          <McpConnectionStatus onConnectClick={() => setOnboardingModalOpen(true)} />
 
           {/* User Profile*/}
           <Separator className="h-5 mx-2" orientation="vertical" />
@@ -179,8 +158,6 @@ export default function AppHeader() {
           </DropdownMenu>
         </div>
       </div>
-      {/* Onboarding Modal */}
-      <OnboardingModal open={isOnboardingModalOpen} onOpenChange={setIsOnboardingModalOpen} />
     </>
   );
 }

package/frontend/src/components/layout/AppSidebar.tsx

@@ -1,100 +1,85 @@
-import { useMemo, useState } from 'react';
-import { useLogSources } from '@/features/logs/hooks/useLogSources';
-import { PrimaryMenu } from './PrimaryMenu';
-import { SecondaryMenu } from './SecondaryMenu';
-import {
-  staticMenuItems,
-  documentationMenuItem,
-  usageMenuItem,
-  type PrimaryMenuItem,
-} from '@/lib/utils/menuItems';
-import { useLocation, matchPath } from 'react-router-dom';
-import { isInsForgeCloudProject, isIframe } from '@/lib/utils/utils';
-import { postMessageToParent } from '@/lib/utils/cloudMessaging';
-import { ProjectInfoModal } from '@/components/ProjectInfoModal';
-import { Settings } from 'lucide-react';
-
-interface AppSidebarProps extends React.HTMLAttributes<HTMLElement> {
-  isCollapsed: boolean;
-  onToggleCollapse: () => void;
-}
-
-export default function AppSidebar({ isCollapsed, onToggleCollapse }: AppSidebarProps) {
-  const { pathname } = useLocation();
-  const { menuItems: logsMenuItems, isLoading: logsLoading } = useLogSources();
-  const [isProjectInfoModalOpen, setIsProjectInfoModalOpen] = useState(false);
-
-  const isCloud = isInsForgeCloudProject();
-  const isInIframe = isIframe();
-
-  // Create a settings menu item that behaves differently based on iframe context
-  const settingsMenuItem: PrimaryMenuItem = useMemo(
-    () => ({
-      id: 'settings',
-      label: 'Settings',
-      href: '',
-      icon: Settings,
-      onClick: () => {
-        if (isInIframe) {
-          // In iframe: use postMessage to show cloud's settings overlay
-          postMessageToParent({ type: 'SHOW_SETTINGS_OVERLAY' }, '*');
-        } else {
-          // Not in iframe: show local project info modal
-          setIsProjectInfoModalOpen(true);
-        }
-      },
-    }),
-    [isInIframe]
-  );
-
-  // Build bottom menu items based on deployment environment
-  const bottomMenuItems = useMemo(() => {
-    const items = [];
-
-    // Only show Usage when in iframe (postMessage to parent works)
-    if (isCloud && isInIframe) {
-      items.push(usageMenuItem);
-    }
-
-    items.push(documentationMenuItem);
-    items.push(settingsMenuItem);
-    return items;
-  }, [isCloud, isInIframe, settingsMenuItem]);
-
-  // Find which primary menu item matches the current route
-  // Items with secondary menus use prefix matching (end: false)
-  // Items without secondary menus use exact matching (end: true)
-  const activeMenu = staticMenuItems.find((item) => {
-    const hasSecondaryMenu = !!item.secondaryMenu || item.id === 'logs';
-    return matchPath({ path: item.href, end: !hasSecondaryMenu }, pathname);
-  });
-
-  // Get secondary menu items (special case for logs)
-  const secondaryMenuItems = activeMenu?.id === 'logs' ? logsMenuItems : activeMenu?.secondaryMenu;
-  const isLoading = activeMenu?.id === 'logs' ? logsLoading : false;
-
-  return (
-    <>
-      <div className="flex h-full">
-        <PrimaryMenu
-          items={staticMenuItems}
-          bottomItems={bottomMenuItems}
-          activeItemId={activeMenu?.id}
-          isCollapsed={isCollapsed}
-          onToggleCollapse={onToggleCollapse}
-        />
-
-        {/* Render the secondary menu - always visible when there are items */}
-        {secondaryMenuItems && activeMenu && (
-          <SecondaryMenu title={activeMenu.label} items={secondaryMenuItems} loading={isLoading} />
-        )}
-      </div>
-
-      {/* Project Info Modal for cloud deployments accessed directly (not in iframe) */}
-      <ProjectInfoModal
-        open={isProjectInfoModalOpen}
-        onClose={() => setIsProjectInfoModalOpen(false)}
-      />
-    </>
-  );
-}
+import { useMemo } from 'react';
+import { useLogSources } from '@/features/logs/hooks/useLogSources';
+import { PrimaryMenu } from './PrimaryMenu';
+import { SecondaryMenu } from './SecondaryMenu';
+import {
+  staticMenuItems,
+  documentationMenuItem,
+  usageMenuItem,
+  settingsMenuItem,
+  deploymentsMenuItem,
+  type PrimaryMenuItem,
+} from '@/lib/utils/menuItems';
+import { useLocation, matchPath } from 'react-router-dom';
+import { isInsForgeCloudProject, isIframe } from '@/lib/utils/utils';
+
+interface AppSidebarProps extends React.HTMLAttributes<HTMLElement> {
+  isCollapsed: boolean;
+  onToggleCollapse: () => void;
+}
+
+export default function AppSidebar({ isCollapsed, onToggleCollapse }: AppSidebarProps) {
+  const { pathname } = useLocation();
+  const { menuItems: logsMenuItems, isLoading: logsLoading } = useLogSources();
+
+  const isCloud = isInsForgeCloudProject();
+  const isInIframe = isIframe();
+
+  // Build main menu items - add deployments for cloud projects
+  const mainMenuItems = useMemo(() => {
+    if (isCloud) {
+      // Insert deployments after visualizer (at the end of main items)
+      return [...staticMenuItems, deploymentsMenuItem];
+    }
+    return staticMenuItems;
+  }, [isCloud]);
+
+  // Build bottom menu items based on deployment environment
+  const bottomMenuItems = useMemo(() => {
+    const items: PrimaryMenuItem[] = [];
+
+    // Only show Usage when in iframe (postMessage to parent works)
+    if (isCloud && isInIframe) {
+      items.push(usageMenuItem);
+    }
+
+    items.push(documentationMenuItem);
+    items.push(settingsMenuItem);
+    return items;
+  }, [isCloud, isInIframe]);
+
+  // Find which primary menu item matches the current route
+  // Items with secondary menus use prefix matching (end: false)
+  // Items without secondary menus use exact matching (end: true)
+  const activeMenu = useMemo(() => {
+    const allItems = [...mainMenuItems, ...bottomMenuItems];
+    return allItems.find((item) => {
+      if (item.external || item.onClick) {
+        return false;
+      }
+      const hasSecondaryMenu = !!item.secondaryMenu || item.id === 'logs';
+      return matchPath({ path: item.href, end: !hasSecondaryMenu }, pathname);
+    });
+  }, [mainMenuItems, bottomMenuItems, pathname]);
+
+  // Get secondary menu items (special case for logs)
+  const secondaryMenuItems = activeMenu?.id === 'logs' ? logsMenuItems : activeMenu?.secondaryMenu;
+  const isLoading = activeMenu?.id === 'logs' ? logsLoading : false;
+
+  return (
+    <div className="flex h-full">
+      <PrimaryMenu
+        items={mainMenuItems}
+        bottomItems={bottomMenuItems}
+        activeItemId={activeMenu?.id}
+        isCollapsed={isCollapsed}
+        onToggleCollapse={onToggleCollapse}
+      />
+
+      {/* Render the secondary menu - always visible when there are items */}
+      {secondaryMenuItems && activeMenu && (
+        <SecondaryMenu title={activeMenu.label} items={secondaryMenuItems} loading={isLoading} />
+      )}
+    </div>
+  );
+}

package/frontend/src/components/layout/Layout.tsx

@@ -1,32 +1,34 @@
-import React, { useState } from 'react';
-import AppSidebar from './AppSidebar';
-import AppHeader from './AppHeader';
-import { ThemeProvider } from '@/lib/contexts/ThemeContext';
-import { isIframe } from '@/lib/utils/utils';
-
-interface LayoutProps {
-  children: React.ReactNode;
-}
-
-export default function Layout({ children }: LayoutProps) {
-  // Sidebar is expanded by default; user can toggle via UI
-  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
-
-  const handleToggleCollapse = () => {
-    setSidebarCollapsed(!sidebarCollapsed);
-  };
-
-  return (
-    <ThemeProvider forcedTheme={isIframe() ? 'dark' : undefined}>
-      <div className="h-screen bg-gray-50 dark:bg-neutral-800 flex flex-col">
-        {!isIframe() && <AppHeader />}
-
-        {/* Main layout - sidebars + content in flexbox */}
-        <div className="flex-1 flex overflow-hidden">
-          <AppSidebar isCollapsed={sidebarCollapsed} onToggleCollapse={handleToggleCollapse} />
-          <main className="flex-1 overflow-y-auto">{children}</main>
-        </div>
-      </div>
-    </ThemeProvider>
-  );
-}
+import React, { useState } from 'react';
+import AppSidebar from './AppSidebar';
+import AppHeader from './AppHeader';
+import { ThemeProvider } from '@/lib/contexts/ThemeContext';
+import { OnboardingModal } from '@/features/onboard';
+import { isIframe } from '@/lib/utils/utils';
+
+interface LayoutProps {
+  children: React.ReactNode;
+}
+
+export default function Layout({ children }: LayoutProps) {
+  // Sidebar is expanded by default; user can toggle via UI
+  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
+
+  const handleToggleCollapse = () => {
+    setSidebarCollapsed(!sidebarCollapsed);
+  };
+
+  return (
+    <ThemeProvider forcedTheme={isIframe() ? 'dark' : undefined}>
+      <div className="h-screen bg-gray-50 dark:bg-neutral-800 flex flex-col">
+        {!isIframe() && <AppHeader />}
+
+        {/* Main layout - sidebars + content in flexbox */}
+        <div className="flex-1 flex overflow-hidden">
+          <AppSidebar isCollapsed={sidebarCollapsed} onToggleCollapse={handleToggleCollapse} />
+          <main className="flex-1 overflow-y-auto">{children}</main>
+        </div>
+      </div>
+      <OnboardingModal />
+    </ThemeProvider>
+  );
+}