@stackone/hub 0.1.0 → 0.2.0

package/.release-please-manifest.json

@@ -1 +1 @@
-{".":"0.1.0"}
+{".":"0.2.0"}

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # Changelog
 
+## [0.2.0](https://github.com/StackOneHQ/hub/compare/hub-v0.1.0...hub-v0.2.0) (2025-08-08)
+
+
+### Features
+
+* add external trigger token rendering ([f1c0ea2](https://github.com/StackOneHQ/hub/commit/f1c0ea22496b4b0bd92a33d69e4af5492b96089c))
+* expression and conditional rendering ([1762d3a](https://github.com/StackOneHQ/hub/commit/1762d3aad03fccc55a606bb5e154b85e8289f000))
+* feature flag context and hook ([a9d00a9](https://github.com/StackOneHQ/hub/commit/a9d00a9e81f3276c82f5e98c26e0b5648a4ad0cd))
+* render dropdowns and textareas with malachite ([9e59a0d](https://github.com/StackOneHQ/hub/commit/9e59a0d864af6c06cc7b653ff393291877895812))
+
+
+### Bug Fixes
+
+* add border to dropdown ([2fb57e1](https://github.com/StackOneHQ/hub/commit/2fb57e139be16e646d3404bd5e13fd010cae8e67))
+* add theme support again ([76a092b](https://github.com/StackOneHQ/hub/commit/76a092b3625ac850af9b3256569337cacd92da52))
+* build ([1eb7894](https://github.com/StackOneHQ/hub/commit/1eb78945d7274349cb4572bac79ecd3e0929a57a))
+* handle window close event ([617d999](https://github.com/StackOneHQ/hub/commit/617d9992c03496dab0b5e7bdba149b0f78314aee))
+* input loop and card style ([a91e72a](https://github.com/StackOneHQ/hub/commit/a91e72a253a0da529712867e27192a397ed89ddf))
+* key uniqueness ([c3d01c5](https://github.com/StackOneHQ/hub/commit/c3d01c513fd6d4b0e8526c6741b2ae2272ef2f0a))
+
 ## [0.1.0](https://github.com/StackOneHQ/hub/compare/hub-v0.0.1...hub-v0.1.0) (2025-07-11)
 
 

package/dev/main.tsx

@@ -11,8 +11,9 @@ const HubWrapper: React.FC = () => {
     const [error, setError] = useState<string>();
     const [token, setToken] = useState<string>();
     const apiUrl = import.meta.env.VITE_API_URL ?? 'https://api.stackone.com';
+    const appUrl = import.meta.env.VITE_APP_URL ?? 'https://app.stackone.com';
     const [theme, setTheme] = useState<'light' | 'dark'>('light');
-    const [accountId, setAccountId] = useState<string>('46071458593115456017');
+    const [accountId, setAccountId] = useState<string>();
 
     const fetchToken = useCallback(async () => {
         try {
@@ -81,6 +82,7 @@ const HubWrapper: React.FC = () => {
                     setMode(undefined);
                 }}
                 accountId={accountId}
+                appUrl={appUrl}
             />
         </div>
     );

package/dev/vite-env.d.ts

@@ -7,7 +7,7 @@ interface ImportMetaEnv {
     readonly VITE_ORIGIN_OWNER_NAME: string;
     readonly VITE_ORIGIN_USERNAME: string;
     readonly VITE_API_URL: string;
-    readonly VITE_DASHBOARD_URL: string;
+    readonly VITE_APP_URL: string;
 }
 
 export interface ImportMeta {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@stackone/hub",
-    "version": "0.1.0",
+    "version": "0.2.0",
     "description": "StackOne HUB",
     "main": "index.js",
     "scripts": {
@@ -16,10 +16,14 @@
     "author": "StackOne",
     "license": "MIT",
     "dependencies": {
-        "@stackone/malachite": "^0.1.1",
-        "@tanstack/react-query": "^5.77.2",
-        "react": "^18.0.0",
-        "react-dom": "^18.1.0"
+        "@stackone/expressions": "^0.16.0",
+        "@stackone/malachite": "^0.3.1",
+        "@tanstack/react-query": "^5.77.2"
+    },
+    "peerDependencies": {
+        "react": "18.3.1",
+        "react-dom": "18.3.1",
+        "react-hook-form": "7.60.0"
     },
     "devDependencies": {
         "@biomejs/biome": "1.9.4",
@@ -29,8 +33,8 @@
         "@rollup/plugin-terser": "^0.4.4",
         "@rollup/plugin-typescript": "^12.1.2",
         "@types/node": "^22.15.17",
-        "@types/react": "^18.0.0",
-        "@types/react-dom": "^18.0.0",
+        "@types/react": "^18.3.23",
+        "@types/react-dom": "^18.3.7",
         "@vitejs/plugin-react-swc": "^3.9.0",
         "react-to-webcomponent": "^2.0.1",
         "rollup": "^4.40.2",
@@ -41,4 +45,4 @@
         "tslib": "^2.8.1",
         "typescript": "^5.8.3"
     }
-}
+}

package/src/Hub.tsx

@@ -0,0 +1,50 @@
+import { useQuery } from '@tanstack/react-query';
+import { IntegrationPicker } from './modules/integration-picker/IntegrationPicker';
+import { FeatureFlagProvider } from './shared/contexts/featureFlagContext';
+import { getSettings } from './shared/queries';
+import { HubModes } from './types/types';
+
+interface HubProps {
+    mode: HubModes;
+    token: string;
+    apiUrl: string;
+    dashboardUrl: string;
+    height: string;
+    onSuccess?: () => void;
+    onClose?: () => void;
+    onCancel?: () => void;
+    accountId?: string;
+}
+export const Hub = ({
+    mode,
+    token,
+    apiUrl,
+    dashboardUrl,
+    height,
+    onSuccess,
+    onClose,
+    onCancel,
+    accountId,
+}: HubProps) => {
+    const { data: settings } = useQuery({
+        queryKey: ['settings'],
+        queryFn: () => getSettings(apiUrl, token),
+    });
+
+    return (
+        <FeatureFlagProvider featureFlags={settings?.enabled_features ?? []}>
+            {mode === 'integration-picker' && (
+                <IntegrationPicker
+                    token={token}
+                    baseUrl={apiUrl}
+                    dashboardUrl={dashboardUrl}
+                    height={height}
+                    onSuccess={onSuccess}
+                    onClose={onClose}
+                    onCancel={onCancel}
+                    accountId={accountId}
+                />
+            )}
+        </FeatureFlagProvider>
+    );
+};

package/src/StackOneHub.tsx

@@ -4,10 +4,16 @@ import {
     FlexAlign,
     FlexJustify,
     FooterLinks,
-    ThemeProvider,
+    MalachiteContext,
+    PartialMalachiteTheme,
     Typography,
+    applyDarkTheme,
+    applyLightTheme,
+    applyTheme,
 } from '@stackone/malachite';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { useEffect } from 'react';
+import { Hub } from './Hub';
 import { CsvImporter } from './modules/csv-importer.tsx/CsvImporter';
 import { IntegrationPicker } from './modules/integration-picker/IntegrationPicker';
 import ErrorContainer from './shared/components/error';
@@ -18,8 +24,9 @@ interface StackOneHubProps {
     mode?: HubModes;
     token?: string;
     baseUrl?: string;
+    appUrl?: string;
     height?: string;
-    theme?: 'light' | 'dark';
+    theme?: 'light' | 'dark' | PartialMalachiteTheme;
     accountId?: string;
     onSuccess?: () => void;
     onClose?: () => void;
@@ -30,6 +37,7 @@ export const StackOneHub: React.FC<StackOneHubProps> = ({
     mode,
     token,
     baseUrl,
+    appUrl,
     height = '500px',
     theme = 'light',
     accountId,
@@ -39,6 +47,17 @@ export const StackOneHub: React.FC<StackOneHubProps> = ({
 }) => {
     const defaultBaseUrl = 'https://api.stackone.com';
     const apiUrl = baseUrl ?? defaultBaseUrl;
+    const defaultDashboardUrl = 'https://app.stackone.com';
+    const dashboardUrl = appUrl ?? defaultDashboardUrl;
+    useEffect(() => {
+        if (theme === 'dark') {
+            applyDarkTheme();
+        } else if (theme === 'light') {
+            applyLightTheme();
+        } else {
+            applyTheme(theme);
+        }
+    }, [theme]);
 
     const queryClient = new QueryClient({
         defaultOptions: {
@@ -54,25 +73,45 @@ export const StackOneHub: React.FC<StackOneHubProps> = ({
 
     if (!token) {
         return (
-            <Card height={height} footer={<FooterLinks />}>
-                <Flex justify={FlexJustify.Center} align={FlexAlign.Center} fullHeight>
-                    <Typography.PageTitle>No token provided</Typography.PageTitle>
-                </Flex>
-            </Card>
+            <MalachiteContext>
+                <ErrorBoundary
+                    fallback={
+                        <Card height={height}>
+                            <ErrorContainer />
+                        </Card>
+                    }
+                >
+                    <Card height={height} footer={<FooterLinks />}>
+                        <Flex justify={FlexJustify.Center} align={FlexAlign.Center} fullHeight>
+                            <Typography.PageTitle>No token provided</Typography.PageTitle>
+                        </Flex>
+                    </Card>
+                </ErrorBoundary>
+            </MalachiteContext>
         );
     }
     if (!mode) {
         return (
-            <Card height={height} footer={<FooterLinks />}>
-                <Flex justify={FlexJustify.Center} align={FlexAlign.Center} fullHeight>
-                    <Typography.PageTitle>No mode selected</Typography.PageTitle>
-                </Flex>
-            </Card>
+            <MalachiteContext>
+                <ErrorBoundary
+                    fallback={
+                        <Card height={height}>
+                            <ErrorContainer />
+                        </Card>
+                    }
+                >
+                    <Card height={height} footer={<FooterLinks />}>
+                        <Flex justify={FlexJustify.Center} align={FlexAlign.Center} fullHeight>
+                            <Typography.PageTitle>No mode selected</Typography.PageTitle>
+                        </Flex>
+                    </Card>
+                </ErrorBoundary>
+            </MalachiteContext>
         );
     }
 
     return (
-        <ThemeProvider theme={theme}>
+        <MalachiteContext>
             <ErrorBoundary
                 fallback={
                     <Card height={height}>
@@ -81,19 +120,19 @@ export const StackOneHub: React.FC<StackOneHubProps> = ({
                 }
             >
                 <QueryClientProvider client={queryClient}>
-                    {mode === 'integration-picker' && (
-                        <IntegrationPicker
-                            token={token}
-                            baseUrl={apiUrl}
-                            height={height}
-                            onSuccess={onSuccess}
-                            onClose={onClose}
-                            onCancel={onCancel}
-                            accountId={accountId}
-                        />
-                    )}
+                    <Hub
+                        mode={mode}
+                        token={token}
+                        apiUrl={apiUrl}
+                        dashboardUrl={dashboardUrl}
+                        height={height}
+                        onSuccess={onSuccess}
+                        accountId={accountId}
+                        onClose={onClose}
+                        onCancel={onCancel}
+                    />
                 </QueryClientProvider>
             </ErrorBoundary>
-        </ThemeProvider>
+        </MalachiteContext>
     );
 };

package/src/modules/integration-picker/IntegrationPicker.tsx

@@ -1,4 +1,5 @@
 import { Card } from '@stackone/malachite';
+import useFeatureFlags from '../../shared/hooks/useFeatureFlags';
 import { IntegrationPickerContent } from './components/IntegrationPickerContent';
 import CardFooter from './components/cardFooter';
 import CardTitle from './components/cardTitle';
@@ -9,6 +10,7 @@ interface IntegrationPickerProps {
     baseUrl: string;
     height: string;
     accountId?: string;
+    dashboardUrl?: string;
     onSuccess?: () => void;
     onClose?: () => void;
     onCancel?: () => void;
@@ -20,7 +22,10 @@ export const IntegrationPicker: React.FC<IntegrationPickerProps> = ({
     height,
     accountId,
     onSuccess,
+    dashboardUrl,
 }) => {
+    const isHubLinkAccountReleaseEnabled = useFeatureFlags('hub_link_account_release');
+
     const {
         // Data
         hubData,
@@ -48,6 +53,7 @@ export const IntegrationPicker: React.FC<IntegrationPickerProps> = ({
         baseUrl,
         accountId,
         onSuccess,
+        dashboardUrl,
     });
 
     return (
@@ -70,20 +76,22 @@ export const IntegrationPicker: React.FC<IntegrationPickerProps> = ({
             }
             height={height}
         >
-            <IntegrationPickerContent
-                isLoading={isLoading}
-                hasError={hasError}
-                connectionState={connectionState}
-                selectedIntegration={selectedIntegration}
-                connectorData={connectorData ?? null}
-                hubData={hubData ?? null}
-                fields={fields}
-                guide={guide}
-                errorHubData={errorHubData}
-                errorConnectorData={errorConnectorData}
-                onSelect={setSelectedIntegration}
-                onChange={setFormData}
-            />
+            {isHubLinkAccountReleaseEnabled && (
+                <IntegrationPickerContent
+                    isLoading={isLoading}
+                    hasError={hasError}
+                    connectionState={connectionState}
+                    selectedIntegration={selectedIntegration}
+                    connectorData={connectorData?.config ?? null}
+                    hubData={hubData ?? null}
+                    fields={fields}
+                    guide={guide}
+                    errorHubData={errorHubData}
+                    errorConnectorData={errorConnectorData}
+                    onSelect={setSelectedIntegration}
+                    onChange={setFormData}
+                />
+            )}
         </Card>
     );
 };

package/src/modules/integration-picker/components/IntegrationFields.tsx

@@ -1,4 +1,4 @@
-import { Alert, Form, Input, Spacer, Typography } from '@stackone/malachite';
+import { Alert, Dropdown, Form, Input, Spacer, TextArea, Typography } from '@stackone/malachite';
 import { useEffect, useState } from 'react';
 import { ConnectorConfigField } from '../types';
 
@@ -29,6 +29,7 @@ export const IntegrationForm: React.FC<IntegrationFieldsProps> = ({
         return initialData;
     });
 
+    // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
     useEffect(() => {
         const updatedData: Record<string, string> = {};
         fields.forEach((field) => {
@@ -37,14 +38,17 @@ export const IntegrationForm: React.FC<IntegrationFieldsProps> = ({
             }
         });
 
-        const hasChanges =
-            Object.keys(updatedData).some((key) => updatedData[key] !== formData[key]) ||
-            Object.keys(formData).some((key) => !updatedData.hasOwnProperty(key));
+        setFormData((prev) => {
+            const hasChanges =
+                Object.keys(updatedData).some((key) => updatedData[key] !== prev[key]) ||
+                Object.keys(prev).some((key) => !updatedData.hasOwnProperty(key));
 
-        if (hasChanges) {
-            setFormData((prev) => ({ ...prev, ...updatedData }));
-        }
-    }, [fields, formData]);
+            if (hasChanges) {
+                return { ...prev, ...updatedData };
+            }
+            return prev;
+        });
+    }, [fields.length]);
 
     useEffect(() => {
         onChange(formData);
@@ -58,58 +62,68 @@ export const IntegrationForm: React.FC<IntegrationFieldsProps> = ({
     };
 
     return (
-        <div>
-            <Spacer direction="vertical" size={8}>
-                {guide && <Alert type="info" message={guide?.description} hasMargin={false} />}
-                {error && <Alert type="error" message={error.message} hasMargin={false} />}
-                {error && <Typography.CodeText>{error.provider_response}</Typography.CodeText>}
-                <Form>
-                    <Spacer direction="vertical" size={20}>
-                        {fields.map((field) => {
-                            return (
-                                <div key={field.key}>
-                                    {(field.type === 'text' ||
-                                        field.type === 'number' ||
-                                        field.type === 'password' ||
-                                        field.type === 'text_area') && (
-                                        <Input
-                                            name={field.key}
-                                            required={field.required}
-                                            placeholder={field.placeholder}
-                                            defaultValue={field.value?.toString()}
-                                            onChange={(value) =>
-                                                handleFieldChange(field.key, value)
-                                            }
-                                            disabled={field.readOnly}
-                                            label={field.label}
-                                            tooltip={field.guide?.tooltip}
-                                            description={field.guide?.description}
-                                        />
-                                    )}
+        <Spacer direction="vertical" size={8} fullWidth>
+            {guide && <Alert type="info" message={guide?.description} hasMargin={false} />}
+            {error && <Alert type="error" message={error.message} hasMargin={false} />}
+            {error && <Typography.CodeText>{error.provider_response}</Typography.CodeText>}
+            <Spacer direction="vertical" size={20} fullWidth>
+                {fields.map((field) => {
+                    const key =
+                        typeof field.key === 'object'
+                            ? JSON.stringify(field.key)
+                            : String(field.key);
+                    return (
+                        <div key={key} style={{ width: '100%' }}>
+                            {(field.type === 'text' ||
+                                field.type === 'number' ||
+                                field.type === 'password') && (
+                                <Input
+                                    name={key}
+                                    required={field.required}
+                                    placeholder={field.placeholder}
+                                    defaultValue={field.value?.toString()}
+                                    onChange={(value: string) => handleFieldChange(key, value)}
+                                    disabled={field.readOnly}
+                                    label={field.label}
+                                    tooltip={field.guide?.tooltip}
+                                    description={field.guide?.description}
+                                    type={field.type}
+                                />
+                            )}
 
-                                    {field.type === 'select' && (
-                                        <select
-                                            name={field.key}
-                                            required={field.required}
-                                            value={formData[field.key] || ''}
-                                            onChange={(e) =>
-                                                handleFieldChange(field.key, e.target.value)
-                                            }
-                                            disabled={field.readOnly}
-                                        >
-                                            {field.options?.map((option) => (
-                                                <option key={option.value} value={option.value}>
-                                                    {option.label}
-                                                </option>
-                                            ))}
-                                        </select>
-                                    )}
-                                </div>
-                            );
-                        })}
-                    </Spacer>
-                </Form>
+                            {field.type === 'text_area' && (
+                                <TextArea
+                                    name={key}
+                                    required={field.required}
+                                    defaultValue={formData[key] || ''}
+                                    placeholder={field.placeholder}
+                                    onChange={(value: string) => handleFieldChange(key, value)}
+                                    disabled={field.readOnly}
+                                    label={field.label}
+                                    tooltip={field.guide?.tooltip}
+                                />
+                            )}
+                            {field.type === 'select' && (
+                                <Dropdown
+                                    defaultValue={formData[key] || ''}
+                                    disabled={field.readOnly}
+                                    items={
+                                        field.options?.map((option) => ({
+                                            id: option.value,
+                                            label: option.label,
+                                        })) ?? []
+                                    }
+                                    onItemSelected={(value) => handleFieldChange(key, value ?? '')}
+                                    name={key}
+                                    label={field.label}
+                                    tooltip={field.guide?.tooltip}
+                                    description={field.guide?.description}
+                                />
+                            )}
+                        </div>
+                    );
+                })}
             </Spacer>
-        </div>
+        </Spacer>
     );
 };

package/src/modules/integration-picker/components/cardFooter.tsx

@@ -32,15 +32,7 @@ const CardFooter: React.FC<CardFooterProps> = ({
             onClick: () => void;
             disabled: boolean;
             loading: boolean;
-        }> = [
-            {
-                label: 'Next',
-                type: 'filled' as const,
-                onClick: onNext,
-                disabled: false,
-                loading: false,
-            },
-        ];
+        }> = [];
 
         if (onBack) {
             buttons.push({
@@ -52,6 +44,14 @@ const CardFooter: React.FC<CardFooterProps> = ({
             });
         }
 
+        buttons.push({
+            label: 'Confirm',
+            type: 'filled' as const,
+            onClick: onNext,
+            disabled: false,
+            loading: false,
+        });
+
         return buttons;
     }, [selectedIntegration, onBack, onNext]);
 
@@ -62,14 +62,14 @@ const CardFooter: React.FC<CardFooterProps> = ({
     return (
         <Spacer direction="horizontal" size={0} justifyContent="space-between">
             <FooterLinks fullWidth={fullWidth} />
-            <Padded vertical="medium" horizontal="medium" fullHeight={false}>
+            <Padded vertical="none" horizontal="medium" fullHeight={false}>
                 <Flex direction={FlexDirection.Horizontal} justify={FlexJustify.Right}>
                     <Spacer direction="horizontal" size={10}>
                         {buttons.map((button) => (
                             <Button
                                 key={button.label}
                                 size="small"
-                                type={button.type}
+                                variant={button.type}
                                 onClick={button.onClick}
                                 disabled={button.disabled}
                                 loading={button.loading}

package/src/modules/integration-picker/components/cardTitle.tsx

@@ -29,7 +29,7 @@ const CardTitle: React.FC<CardTitleProps> = ({ selectedIntegration, onBack, guid
                 gapSize={FlexGapSize.Small}
                 justify={FlexJustify.Left}
             >
-                {onBack && <Button type="ghost" onClick={onBack} icon="←" size="small" />}
+                {onBack && <Button variant="ghost" onClick={onBack} icon="←" size="small" />}
                 <img
                     src={`https://app.stackone.com/assets/logos/${selectedIntegration.provider}.png`}
                     alt={selectedIntegration.provider}
@@ -39,11 +39,13 @@ const CardTitle: React.FC<CardTitleProps> = ({ selectedIntegration, onBack, guid
                     {selectedIntegration.name}
                 </Typography.Text>
             </Flex>
-            <Typography.Link href={guide?.supportLink} target="_blank">
-                <Button type="outline" size="medium">
-                    Connection guide
-                </Button>
-            </Typography.Link>
+            {guide?.supportLink && (
+                <Typography.LinkText href={guide?.supportLink} target="_blank">
+                    <Button variant="outline" size="medium">
+                        Connection guide
+                    </Button>
+                </Typography.LinkText>
+            )}
         </Flex>
     );
 };

package/src/modules/integration-picker/hooks/useIntegrationPicker.ts

@@ -1,5 +1,6 @@
+import { evaluate } from '@stackone/expressions';
 import { useQuery } from '@tanstack/react-query';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import {
     connectAccount,
     getAccountData,
@@ -7,7 +8,7 @@ import {
     getHubData,
     updateAccount,
 } from '../queries';
-import { Integration } from '../types';
+import { ConnectorConfigField, Integration } from '../types';
 
 const DUMMY_VALUE = 'totally-fake-value';
 
@@ -16,6 +17,13 @@ interface UseIntegrationPickerProps {
     baseUrl: string;
     accountId?: string;
     onSuccess?: () => void;
+    dashboardUrl?: string;
+}
+
+export enum EventType {
+    AccountConnected = 'AccountConnected',
+    CloseModal = 'CloseModal',
+    CloseOAuth2 = 'CloseOAuth2',
 }
 
 export const useIntegrationPicker = ({
@@ -23,9 +31,13 @@ export const useIntegrationPicker = ({
     baseUrl,
     accountId,
     onSuccess,
+    dashboardUrl,
 }: UseIntegrationPickerProps) => {
     const [selectedIntegration, setSelectedIntegration] = useState<Integration | null>(null);
     const [formData, setFormData] = useState<Record<string, string>>({});
+    const connectWindow = useRef<Window | null>(null);
+    const checkStateTimeoutRef = useRef<number | null>(null);
+    const successTimeoutRef = useRef<number | null>(null);
     const [connectionState, setConnectionState] = useState<{
         loading: boolean;
         success: boolean;
@@ -38,7 +50,48 @@ export const useIntegrationPicker = ({
         success: false,
     });
 
-    // Fetch account data for editing scenario
+    useEffect(() => {
+        return () => {
+            if (checkStateTimeoutRef.current !== null) {
+                clearTimeout(checkStateTimeoutRef.current);
+            }
+            if (successTimeoutRef.current !== null) {
+                clearTimeout(successTimeoutRef.current);
+            }
+        };
+    }, []);
+
+    const processMessageCallback = useCallback((event: MessageEvent) => {
+        if (event.data.type === EventType.AccountConnected) {
+            setConnectionState({ loading: false, success: true });
+            parent.postMessage(event.data, '*');
+            if (connectWindow.current) {
+                connectWindow.current.close();
+                connectWindow.current = null;
+            }
+            window.removeEventListener('message', processMessageCallback, false);
+        } else if (event.data.type === EventType.CloseOAuth2) {
+            if (event.data.error) {
+                setConnectionState({
+                    loading: false,
+                    success: false,
+                    error: {
+                        message: event.data.error,
+                        provider_response: event.data.errorDescription || 'No description',
+                    },
+                });
+            } else {
+                setConnectionState({ loading: false, success: false, error: undefined });
+            }
+
+            if (connectWindow.current) {
+                connectWindow.current.close();
+                connectWindow.current = null;
+            }
+            window.removeEventListener('message', processMessageCallback, false);
+        }
+    }, []);
+
     const {
         data: accountData,
         isLoading: isLoadingAccountData,
@@ -52,7 +105,6 @@ export const useIntegrationPicker = ({
         enabled: !!accountId,
     });
 
-    // Fetch hub data (list of integrations)
     const {
         data: hubData,
         isLoading: isLoadingHubData,
@@ -60,17 +112,14 @@ export const useIntegrationPicker = ({
     } = useQuery({
         queryKey: ['hubData', accountData?.provider],
         queryFn: () => {
-            // For account editing: fetch hub data with specific provider
             if (accountData?.provider) {
                 return getHubData(token, baseUrl, accountData.provider);
             }
-            // For new setup: fetch all integrations
             return getHubData(token, baseUrl);
         },
-        enabled: !accountId || !!accountData, // Enable when no accountId OR when we have account data
+        enabled: !accountId || !!accountData,
     });
 
-    // Auto-select integration when editing an account
     useEffect(() => {
         if (accountData && hubData) {
             const matchingIntegration = hubData.integrations.find(
@@ -80,7 +129,6 @@ export const useIntegrationPicker = ({
         }
     }, [accountData, hubData]);
 
-    // Fetch connector configuration
     const {
         data: connectorData,
         isLoading: isLoadingConnectorData,
@@ -99,47 +147,100 @@ export const useIntegrationPicker = ({
         enabled: Boolean(selectedIntegration) || Boolean(accountData),
     });
 
-    // Extract fields and guide from connector config
     const { fields, guide } = useMemo(() => {
         if (!connectorData || !selectedIntegration) {
-            return { fields: [] };
+            const fields: ConnectorConfigField[] = [];
+            return { fields };
         }
 
         const authConfig =
-            connectorData.authentication?.[selectedIntegration.authentication_config_key];
+            connectorData.config.authentication?.[selectedIntegration.authentication_config_key];
         const authConfigForEnvironment = authConfig?.[selectedIntegration.environment];
 
         const baseFields = authConfigForEnvironment?.fields || [];
 
-        const fieldsWithPrefilledValues = baseFields.map((field) => {
-            const setupValue = accountData?.setupInformation?.[field.key];
+        const fieldsWithPrefilledValues: ConnectorConfigField[] = baseFields
+            .map((field) => {
+                const setupValue = accountData?.setupInformation?.[field.key];
+
+                if (accountData && (field.secret || field.type === 'password')) {
+                    return {
+                        ...field,
+                        key: field.key,
+                        value: DUMMY_VALUE,
+                    };
+                }
+
+                if (field.key === 'external-trigger-token') {
+                    return {
+                        ...field,
+                        key: field.key,
+                        value: hubData?.external_trigger_token,
+                    };
+                }
+
+                const evaluationContext = {
+                    ...formData,
+                    ...accountData?.setupInformation,
+                    external_trigger_token: hubData?.external_trigger_token,
+                    hub_settings: connectorData.hub_settings,
+                };
+
+                if (field.condition) {
+                    const evaluated = evaluate(field.condition, evaluationContext);
+
+                    const shouldShow = evaluated != null && evaluated !== 'false';
+
+                    if (!shouldShow) {
+                        return;
+                    }
+                }
+
+                if (!field.value) {
+                    return {
+                        ...field,
+                        key: field.key,
+                    };
+                }
+
+                const valueToEvaluate = setupValue !== undefined ? setupValue : field.value;
+                let evaluatedValue = evaluate(valueToEvaluate?.toString(), evaluationContext);
+
+                if (typeof evaluatedValue === 'object' && evaluatedValue !== null) {
+                    evaluatedValue = JSON.stringify(evaluatedValue);
+                }
 
-            if (accountData && (field.secret || field.type === 'password')) {
                 return {
                     ...field,
-                    value: DUMMY_VALUE,
+                    key: field.key,
+                    value: evaluatedValue as string | number | undefined,
                 };
-            }
-
-            return {
-                ...field,
-                value: setupValue !== undefined ? setupValue : field.value,
-            };
-        });
+            })
+            .filter((value) => value != null);
 
         return {
             fields: fieldsWithPrefilledValues,
             guide: authConfigForEnvironment?.guide,
         };
-    }, [connectorData, selectedIntegration, accountData]);
+    }, [connectorData, selectedIntegration, accountData, formData, hubData]);
+
+    const authConfig = useMemo(() => {
+        if (!connectorData || !selectedIntegration) {
+            return null;
+        }
+        return connectorData.config.authentication?.[
+            selectedIntegration.authentication_config_key
+        ]?.[selectedIntegration.environment];
+    }, [connectorData, selectedIntegration]);
 
     const handleConnect = useCallback(async () => {
-        if (!selectedIntegration) return;
+        if (!selectedIntegration) {
+            return;
+        }
 
         setConnectionState({ loading: true, success: false });
 
         try {
-            // Clean up dummy values for secret fields before submission
             const cleanedFormData = { ...formData };
             if (accountData) {
                 fields.forEach((field) => {
@@ -152,6 +253,62 @@ export const useIntegrationPicker = ({
                 });
             }
 
+            if (authConfig?.type === 'oauth2') {
+                window.addEventListener('message', processMessageCallback, false);
+                const callbackEmbeddedAccountsUrl = encodeURIComponent(
+                    `${dashboardUrl}/embedded/accounts/callback`,
+                );
+                let windowUrl = `${baseUrl}/connect/oauth2/${selectedIntegration.provider}?redirect_uri=${callbackEmbeddedAccountsUrl}&token=${token}`;
+
+                Object.keys(cleanedFormData).forEach((key) => {
+                    windowUrl += `&${key}=${encodeURIComponent(cleanedFormData[key])}`;
+                });
+
+                const width = 1024;
+                const height = 800;
+                const screenX =
+                    typeof window.screenX != 'undefined' ? window.screenX : window.screenLeft;
+                const screenY =
+                    typeof window.screenY != 'undefined' ? window.screenY : window.screenTop;
+                const outerWidth =
+                    typeof window.outerWidth != 'undefined'
+                        ? window.outerWidth
+                        : document.body.clientWidth;
+                const outerHeight =
+                    typeof window.outerHeight != 'undefined'
+                        ? window.outerHeight
+                        : document.body.clientHeight - 22;
+                const left = screenX + (outerWidth - width) / 2;
+                const top = screenY + (outerHeight - height) / 2.5;
+                const features =
+                    'width=' + width + ',height=' + height + ',left=' + left + ',top=' + top;
+
+                connectWindow.current = window.open(windowUrl, 'Connect Account', features);
+
+                if (connectWindow.current) {
+                    connectWindow.current.focus();
+                    const checkWindowState = () => {
+                        if (connectWindow.current?.closed) {
+                            setConnectionState({ loading: false, success: false });
+                            window.removeEventListener('message', processMessageCallback, false);
+                            connectWindow.current = null;
+                            if (checkStateTimeoutRef.current !== null) {
+                                clearTimeout(checkStateTimeoutRef.current);
+                                checkStateTimeoutRef.current = null;
+                            }
+                        } else if (connectWindow.current) {
+                            checkStateTimeoutRef.current = window.setTimeout(
+                                checkWindowState,
+                                1000,
+                            );
+                        }
+                    };
+                    checkStateTimeoutRef.current = window.setTimeout(checkWindowState, 1000);
+                }
+
+                return;
+            }
+
             if (accountId) {
                 await updateAccount(
                     baseUrl,
@@ -165,8 +322,12 @@ export const useIntegrationPicker = ({
             }
 
             setConnectionState({ loading: false, success: true });
-            setTimeout(() => {
+            if (successTimeoutRef.current !== null) {
+                clearTimeout(successTimeoutRef.current);
+            }
+            successTimeoutRef.current = window.setTimeout(() => {
                 onSuccess?.();
+                successTimeoutRef.current = null;
             }, 2000);
         } catch (error) {
             const parsedError = JSON.parse((error as Error).message) as {
@@ -188,7 +349,19 @@ export const useIntegrationPicker = ({
                 },
             });
         }
-    }, [baseUrl, token, selectedIntegration, formData, onSuccess, accountData, fields, accountId]);
+    }, [
+        baseUrl,
+        dashboardUrl,
+        token,
+        selectedIntegration,
+        formData,
+        onSuccess,
+        accountData,
+        fields,
+        accountId,
+        authConfig,
+        processMessageCallback,
+    ]);
 
     const isLoading = isLoadingHubData || isLoadingConnectorData || isLoadingAccountData;
     const hasError = !!(errorHubData || errorConnectorData || errorAccountData);

package/src/modules/integration-picker/queries.ts

@@ -1,5 +1,5 @@
 import { getRequest, patchRequest, postRequest } from '../../shared/httpClient';
-import { AccountData, ConnectorConfig, HubData } from './types';
+import { AccountData, ConnectorConfig, HubConnectorConfig, HubData } from './types';
 
 export const getHubData = async (token: string, baseUrl: string, provider?: string) => {
     const headers: Record<string, string> = {
@@ -19,7 +19,7 @@ export const getHubData = async (token: string, baseUrl: string, provider?: stri
 };
 
 export const getConnectorConfig = async (baseUrl: string, token: string, connectorKey: string) => {
-    return await getRequest<ConnectorConfig>({
+    return await getRequest<HubConnectorConfig>({
         url: `${baseUrl}/hub/connectors/${connectorKey}`,
         headers: {
             'Content-Type': 'application/json',

package/src/modules/integration-picker/types.ts

@@ -10,6 +10,7 @@ export interface Integration {
 
 export interface HubData {
     integrations: Array<Integration>;
+    external_trigger_token?: string;
 }
 
 export interface ConnectorConfigField {
@@ -48,11 +49,20 @@ export interface ConnectorConfig {
                     supportLink?: string;
                     description: string;
                 };
+                type: 'oauth2' | 'oidc' | 'custom';
             };
         };
     };
 }
 
+export interface HubConnectorConfig {
+    config: ConnectorConfig;
+    hub_settings: {
+        configured_webhook_events: Record<string, Set<string>>;
+        project_settings: Record<string, string | object>;
+    };
+}
+
 export interface AccountData {
     account_id: string;
     provider: string;

package/src/shared/components/error.tsx

@@ -6,11 +6,9 @@ import {
     FlexGapSize,
     FlexJustify,
     Typography,
-    useTheme,
 } from '@stackone/malachite';
 
 const ErrorContainer: React.FC = () => {
-    const { colors } = useTheme();
     return (
         <Flex
             justify={FlexJustify.Center}
@@ -19,7 +17,8 @@ const ErrorContainer: React.FC = () => {
             gapSize={FlexGapSize.Small}
             fullHeight
         >
-            <CustomIcons.RejectIcon style={{ color: colors.redForeground }} />
+            {/* TODO: fix */}
+            <CustomIcons.RejectIcon style={{ color: 'red' }} />
             <Typography.Text fontWeight="bold" size="large">
                 Error
             </Typography.Text>

package/src/shared/components/success.tsx

@@ -6,28 +6,35 @@ import {
     FlexGapSize,
     FlexJustify,
     Typography,
+    getCurrentTheme,
 } from '@stackone/malachite';
 
 interface SuccessProps {
     integrationName: string;
 }
 
-const Success: React.FC<SuccessProps> = ({ integrationName }) => (
-    <Flex
-        justify={FlexJustify.Center}
-        align={FlexAlign.Center}
-        direction={FlexDirection.Vertical}
-        gapSize={FlexGapSize.Small}
-        fullHeight
-    >
-        <CustomIcons.CheckCircleFilledIcon />
-        <Typography.Text fontWeight="bold" size="large">
-            Connection Successful
-        </Typography.Text>
-        <Typography.SecondaryText>
-            Account successfully connected to {integrationName}
-        </Typography.SecondaryText>
-    </Flex>
-);
+const Success: React.FC<SuccessProps> = ({ integrationName }) => {
+    const theme = getCurrentTheme();
+    return (
+        <Flex
+            justify={FlexJustify.Center}
+            align={FlexAlign.Center}
+            direction={FlexDirection.Vertical}
+            gapSize={FlexGapSize.Small}
+            fullHeight
+        >
+            <CustomIcons.CheckCircleFilled
+                size={16}
+                style={{ color: theme.colors.success.foreground }}
+            />
+            <Typography.Text fontWeight="bold" size="large">
+                Connection Successful
+            </Typography.Text>
+            <Typography.SecondaryText>
+                Account successfully connected to {integrationName}
+            </Typography.SecondaryText>
+        </Flex>
+    );
+};
 
 export default Success;

package/src/shared/contexts/featureFlagContext.tsx

@@ -0,0 +1,26 @@
+import { createContext, useMemo } from 'react';
+import { FeatureFlag } from '../types/featureFlags';
+
+export const FeatureFlagContext = createContext<{ featureFlags: FeatureFlag[] }>({
+    featureFlags: [],
+});
+
+export const FeatureFlagProvider = ({
+    featureFlags,
+    children,
+}: {
+    featureFlags: FeatureFlag[];
+    children: React.ReactNode;
+}) => {
+    const memoizedContextValue = useMemo(
+        () => ({
+            featureFlags,
+        }),
+        [featureFlags],
+    );
+    return (
+        <FeatureFlagContext.Provider value={memoizedContextValue}>
+            {children}
+        </FeatureFlagContext.Provider>
+    );
+};

package/src/shared/hooks/useFeatureFlags.ts

@@ -0,0 +1,24 @@
+import { useContext } from 'react';
+import { FeatureFlagContext } from '../contexts/featureFlagContext';
+import { FeatureFlag } from '../types/featureFlags';
+
+const isFeatureEnabled = ({
+    featureFlags,
+    featureFlag,
+}: { featureFlags: FeatureFlag[]; featureFlag: FeatureFlag }): boolean => {
+    return featureFlags.includes(featureFlag);
+};
+
+export const useFeatureFlags = (featureFlag: FeatureFlag): boolean => {
+    const { featureFlags } = useContext(FeatureFlagContext);
+    if (!featureFlags) {
+        throw new Error('useFeatureFlags must be used within a FeatureFlagProvider');
+    }
+
+    return isFeatureEnabled({
+        featureFlags,
+        featureFlag,
+    });
+};
+
+export default useFeatureFlags;

package/src/shared/queries.ts

@@ -0,0 +1,12 @@
+import { getRequest } from './httpClient';
+import { FeatureFlag } from './types/featureFlags';
+
+export const getSettings = async (baseUrl: string, token: string) => {
+    return await getRequest<{ enabled_features: FeatureFlag[] }>({
+        url: `${baseUrl}/hub/settings`,
+        headers: {
+            'Content-Type': 'application/json',
+            'x-hub-session-token': token,
+        },
+    });
+};

package/src/shared/types/featureFlags.ts

@@ -0,0 +1 @@
+export type FeatureFlag = 'hub_link_account_release';

package/.yalc/@stackone/malachite/README.md

@@ -1 +0,0 @@
-Coming soon

package/.yalc/@stackone/malachite/package.json

@@ -1,37 +0,0 @@
-{
-  "name": "@stackone/malachite",
-  "version": "0.0.0",
-  "type": "module",
-  "module": "dist/index.js",
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
-  "files": [
-    "dist",
-    "README.md",
-    "LICENSE"
-  ],
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "require": "./dist/index.js",
-      "default": "./dist/index.js"
-    },
-    "./style.css": "./dist/style.css"
-  },
-  "scripts": {
-    "dev": "vite",
-    "build": "tsc -b ./tsconfig.app.json && vite build",
-    "build:watch": "vite build --watch",
-    "build:hot": "concurrently \"tsc -b ./tsconfig.app.json --watch\" \"vite build --watch\"",
-    "lint:check": "biome lint",
-    "lint:fix": "biome lint --fix",
-    "preview": "vite preview",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
-  },
-  "peerDependencies": {
-    "react": "^18.0.0",
-    "react-dom": "^18.1.0"
-  },
-  "yalcSig": "b3621bd0c8195b6fd4451f514c72a618"
-}

package/.yalc/@stackone/malachite/yalc.sig

@@ -1 +0,0 @@
-b3621bd0c8195b6fd4451f514c72a618

package/yalc.lock

@@ -1,9 +0,0 @@
-{
-  "version": "v1",
-  "packages": {
-    "@stackone/malachite": {
-      "signature": "b3621bd0c8195b6fd4451f514c72a618",
-      "file": true
-    }
-  }
-}