infaira-canvas 0.3.0 → 0.5.0

package/dist/commands/init.js

@@ -165,29 +165,85 @@ import { registerWidget } from './ican';
 import type { IContextProvider } from './ican';
 import './styles.scss';
 
+// ─── useService hook ──────────────────────────────────────────────────────────
+// Call any InfAIra microservice directly:
+//
+//   useService(icanContext, 'Assets', 'Asset:List', { limit: 20 })
+//
+// The result is the raw microservice response — no extra wrapper to unwrap.
+// For orchestrated flows that call multiple services, use executeAction with
+// a Mythos model instead (see the commented-out examples below).
+
+interface IServiceState<T> {
+  data: T | null;
+  loading: boolean;
+  error: string | null;
+}
+
+function useService<T = unknown>(
+  ctx: IContextProvider | undefined,
+  app: string,
+  service: string,
+  params: Record<string, unknown> = {},
+  deps: unknown[] = [],
+): IServiceState<T> & { refetch: () => void } {
+  const [state, setState] = React.useState<IServiceState<T>>({ data: null, loading: true, error: null });
+  const [tick, setTick] = React.useState(0);
+  const mounted = React.useRef(true);
+  React.useEffect(() => { mounted.current = true; return () => { mounted.current = false; }; }, []);
+
+  React.useEffect(() => {
+    if (!ctx) { setState({ data: null, loading: false, error: null }); return; }
+    setState(prev => ({ ...prev, loading: true, error: null }));
+    ctx.executeService(app, service, params)
+      .then(result => { if (mounted.current) setState({ data: result as T, loading: false, error: null }); })
+      .catch((err: unknown) => { if (mounted.current) setState({ data: null, loading: false, error: String(err) }); });
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [ctx, app, service, tick, ...deps]);
+
+  return { ...state, refetch: () => setTick(t => t + 1) };
+}
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+// Replace with real types from your microservice.
+interface IItem {
+  id: number;
+  name: string;
+  [key: string]: unknown;
+}
+
+interface IListResponse {
+  total: number;
+  data: IItem[];
+}
+
 export interface IWidgetProps {
   icanContext?: IContextProvider;
   instanceId?: string;
   [key: string]: unknown;
 }
 
-const ${componentName}: React.FC<IWidgetProps> = ({ icanContext, instanceId: _instanceId }) => {
-  const [data, setData] = React.useState<unknown>(null);
-  const [loading, setLoading] = React.useState(true);
-  const [error, _setError] = React.useState<string | null>(null);
+// ─── Widget ───────────────────────────────────────────────────────────────────
+const ${componentName}: React.FC<IWidgetProps> = ({ icanContext }) => {
+  // ── Fetch data via executeService ────────────────────────────────────────
+  // Replace 'Assets' / 'Asset:List' with your app + service path.
+  // All InfAIra apps: Assets, Locations, UserManagement, FMS, PPM, IBMS
+  const { data, loading, error, refetch } = useService<IListResponse>(
+    icanContext,
+    'Assets',       // app key (matches manifest app_key)
+    'Asset:List',   // Model:Action
+    { limit: 20, skip: 0 },
+  );
 
-  React.useEffect(() => {
-    if (!icanContext) {
-      setLoading(false);
-      return;
-    }
-    // Example: fetch data from Orch
-    // icanContext.executeAction('MyModel', 'GetAll', {}, { json: true })
-    //   .then((result) => { setData(result); setLoading(false); })
-    //   .catch((err: unknown) => { _setError(String(err)); setLoading(false); });
-    setData('Hello from ${widgetName}!');
-    setLoading(false);
-  }, [icanContext]);
+  // ── For Mythos orchestrated flows, use executeAction instead: ─────────────
+  // React.useEffect(() => {
+  //   icanContext?.executeAction('mythos:AssetManager', 'ListAssets', { limit: 20 })
+  //     .then(result => {
+  //       // result = { run_id, status, output: { assets: { total, data } } }
+  //       const list = (result as { output?: { assets?: IListResponse } })?.output?.assets;
+  //       console.log(list);
+  //     });
+  // }, [icanContext]);
 
   if (loading) {
     return (
@@ -201,13 +257,29 @@ const ${componentName}: React.FC<IWidgetProps> = ({ icanContext, instanceId: _in
     return (
       <div className="widget-error">
         <p className="widget-error-message">{error}</p>
+        <button className="widget-retry" onClick={refetch}>Retry</button>
       </div>
     );
   }
 
+  const items = data?.data ?? [];
+  const total = data?.total ?? 0;
+
   return (
     <div className="widget-root">
-      <p>{String(data)}</p>
+      <div className="widget-header">
+        <span className="widget-title">${widgetName}</span>
+        <span className="widget-count">{total} items</span>
+      </div>
+      {items.length === 0 ? (
+        <p className="widget-empty">No data found.</p>
+      ) : (
+        <ul className="widget-list">
+          {items.map(item => (
+            <li key={item.id} className="widget-list-item">{item.name}</li>
+          ))}
+        </ul>
+      )}
     </div>
   );
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "infaira-canvas",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "description": "InfAIra Canvas CLI — scaffold widgets that talk to ICan and Mythos (actions, events, public portals, paginated collections).",
   "keywords": [
     "infaira",
@@ -15,7 +15,7 @@
   "license": "MIT",
   "type": "module",
   "bin": {
-    "infaira-canvas": "./dist/index.js"
+    "infaira-canvas": "dist/index.js"
   },
   "files": [
     "dist",

package/templates/designer.d.ts

@@ -240,7 +240,7 @@ declare module "widget-designer/components" {
         params?: { [key: string]: any }
     }
 
-    export interface ILucyAction {
+    export interface ICanActionConfig {
         modelName: string;
         action: string;
         disableParamters?: boolean,
@@ -271,7 +271,7 @@ declare module "widget-designer/components" {
         type: IActionType,
         redirectUrl?: IRedirectUrl
         redirectWidget?: IRedirectWidget;
-        lucyAction?: ILucyAction
+        canAction?: ICanActionConfig
     }
     export interface IActionButtonProps {
         designer?: any

package/templates/ican.d.ts

@@ -658,7 +658,7 @@ declare module "ican/hooks" {
   // ─── useFields ────────────────────────────────────────────────────────────
   /**
    * Lightweight controlled-form helper. Returns a getter/setter for each named
-   * field. Mirrors the UXP useFields hook for migrating widgets.
+   * field.
    */
   export function useFields<T extends Record<string, unknown>>(
     initial: T
@@ -725,6 +725,17 @@ declare module "ican/context" {
       params?: Record<string, unknown>,
       options?: { cancelPrevious?: boolean; key?: string }
     ): Promise<unknown>;
+    /**
+     * Call an application service directly. The ICan/Mythos service registry
+     * resolves `<app>.<service>` (e.g. 'Assets' + 'Asset:List') to the
+     * microservice and returns its raw response — no model/DAG needed.
+     */
+    executeService(
+      app: string,
+      service: string,
+      params?: Record<string, unknown>,
+      options?: { cancelPrevious?: boolean; key?: string }
+    ): Promise<unknown>;
     /**
      * List every Mythos action published and callable from this widget.
      * Optional — present only when the ICan backend has MYTHOS_BASE_URL set.
@@ -732,11 +743,23 @@ declare module "ican/context" {
      * once at mount and cache the result themselves.
      */
     listMythosActions?: () => Promise<IMythosAction[]>;
+    /**
+     * List models for a config-panel model picker (`{ id, name }[]`). Optional —
+     * present only when MYTHOS_BASE_URL is set.
+     */
+    listMythosModels?: () => Promise<Array<{ id: string; name: string }>>;
+    /**
+     * Returns true when the current user holds any of the given app roles.
+     * In the dev harness this is always true (full access); in production it
+     * checks the JWT principal's roles.
+     */
+    hasAppRole?: (roles: string | string[]) => boolean | Promise<boolean>;
+    /** Localization helper — `$L(code, params?)` resolves a locale key to a translated string. */
+    $L?: (code: string, params?: Record<string, unknown>) => string;
     /**
      * Fire an external event into the Mythos engine. The event_type matches
      * what Mythos event-handlers subscribe to (configured in the model's
-     * Events tab). Mirrors UXP's fireEvent, with an optional payload.
-     * Optional — present only when MYTHOS_BASE_URL is configured.
+     * Events tab). Optional — present only when MYTHOS_BASE_URL is configured.
      */
     fireMythosEvent?: (
       eventType: string,
@@ -744,7 +767,7 @@ declare module "ican/context" {
     ) => Promise<void>;
     /**
      * Build an IDataFunction over a Mythos collection — drop-in data source
-     * for DataList / DataTable. Mirrors UXP's fromLucyDataCollection.
+     * for DataList / DataTable.
      *   const fn = icanContext.fromMythosCollection('Inventory', 'items')
      *   const { items, pageToken } = await fn(50, '', { search: 'foo' })
      * Optional — present only when MYTHOS_BASE_URL is configured.
@@ -790,7 +813,6 @@ interface Window {
   React: unknown;
   ReactDOM: unknown;
   ICanComponents: Record<string, unknown>;
-  UXPComponents: Record<string, unknown>;
   WidgetDesignerComponents: Record<string, unknown>;
   /** Widget registry — qualifiedId → registration entry. */
   __ican_registry: Map<string, unknown>;
@@ -798,7 +820,6 @@ interface Window {
   registerWidget(registration: {
     id: string;
     component?: unknown;
-    /** UXP-legacy alias for `component`. */
     widget?: unknown;
     configs?: unknown;
     defaultProps?: Record<string, unknown>;

package/templates/index.html

@@ -775,6 +775,92 @@
       box-shadow: 0 0 6px rgba(74, 222, 128, 0.45);
     }
 
+    .ican-conn-dot.error {
+      background: var(--ican-error, #f87171);
+      box-shadow: 0 0 6px rgba(248, 113, 113, 0.45);
+    }
+
+    .ican-conn-dot.testing {
+      background: #facc15;
+      animation: conn-pulse 0.9s ease-in-out infinite;
+    }
+
+    @keyframes conn-pulse {
+      0%, 100% { opacity: 1; transform: scale(1); }
+      50%       { opacity: 0.35; transform: scale(0.7); }
+    }
+
+    .ican-conn-error {
+      font-size: 10px;
+      color: var(--ican-error, #f87171);
+      font-family: var(--ican-font-mono);
+      margin-top: 2px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      max-width: 100%;
+    }
+
+    .ican-conn-input-wrap {
+      position: relative;
+      display: flex;
+      align-items: center;
+    }
+
+    .ican-conn-input-wrap .ican-conn-input { padding-right: 34px; }
+
+    .ican-conn-show-btn {
+      position: absolute;
+      right: 8px;
+      background: none;
+      border: none;
+      cursor: pointer;
+      padding: 0;
+      color: var(--ican-secondary-text);
+      line-height: 1;
+      display: flex;
+      align-items: center;
+      flex-shrink: 0;
+    }
+
+    .ican-conn-show-btn:hover { color: var(--ican-primary-text); }
+
+    .ican-live-badge {
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+      font-size: 9px;
+      font-weight: 700;
+      text-transform: uppercase;
+      letter-spacing: 0.8px;
+      padding: 2px 7px;
+      border-radius: 3px;
+      font-family: var(--ican-font-mono);
+      background: rgba(255,255,255,0.05);
+      color: var(--ican-tertiary-text);
+      border: 1px solid var(--ican-border);
+      user-select: none;
+    }
+
+    .ican-live-badge.live {
+      background: rgba(74, 222, 128, 0.10);
+      color: #4ade80;
+      border-color: rgba(74, 222, 128, 0.22);
+    }
+
+    .ican-live-badge.live-error {
+      background: rgba(248, 113, 113, 0.10);
+      color: #f87171;
+      border-color: rgba(248, 113, 113, 0.22);
+    }
+
+    .ican-live-badge.live-testing {
+      background: rgba(250, 204, 21, 0.10);
+      color: #facc15;
+      border-color: rgba(250, 204, 21, 0.22);
+      animation: conn-pulse 0.9s ease-in-out infinite;
+    }
+
     /* ═══════════════════════════════════════════════════════
        Main Content
        ═══════════════════════════════════════════════════════ */
@@ -1408,62 +1494,163 @@
     return THEMES[0];
   }
 
+  /* ─── Dev-harness security helpers ────────────────────────
+     isValidBackendUrl: permits https:// (any host) and
+     http://localhost / http://127.0.0.1 only. Plain http:// to
+     external hosts is blocked (SSRF / mixed-content risk).
+  ─────────────────────────────────────────────────────────── */
+  function isValidBackendUrl(raw) {
+    if (!raw || typeof raw !== 'string') return false;
+    var url;
+    try { url = new URL(raw); } catch (_) { return false; }
+    if (url.protocol === 'https:') return true;
+    if (url.protocol === 'http:') {
+      var h = url.hostname;
+      return h === 'localhost' || h === '127.0.0.1' || h === '[::1]';
+    }
+    return false;
+  }
+
+  function normalizeUrl(raw) {
+    return (raw || '').trim().replace(/\/+$/, '');
+  }
+
+  // fetchWithTimeout wraps fetch with an AbortController so hung requests
+  // don't freeze the harness indefinitely. Default timeout: 15 s.
+  function fetchWithTimeout(url, opts, ms) {
+    ms = ms || 15000;
+    var ctrl = new AbortController();
+    var timer = setTimeout(function () { ctrl.abort(); }, ms);
+    return fetch(url, Object.assign({}, opts, { signal: ctrl.signal })).then(
+      function (r) { clearTimeout(timer); return r; },
+      function (e) {
+        clearTimeout(timer);
+        if (e && e.name === 'AbortError') {
+          throw new Error('Request timed out — is the Mythos engine reachable?');
+        }
+        throw new Error('Network error — check the Mythos URL and that CORS is enabled on the server');
+      }
+    );
+  }
+
   /* ─── Mock icanContext factory ─────────────────────────── */
   function makeICanContext(themeKey) {
     var info = getThemeInfo(themeKey);
+    var orchUrl = (localStorage.getItem(LS_ORCH_URL) || '').replace(/\/+$/, '');
+    var apiKey  = localStorage.getItem(LS_API_KEY)  || '';
+    // "configured" = the developer entered a Mythos/Orch URL + API Key in the
+    // Developer Tools (Connection) panel. When set, the harness hits a REAL
+    // backend (the same data the widget will see in production). When unset,
+    // it falls back to a clear "not configured" message so widgets don't crash.
+    var configured = !!(orchUrl && apiKey);
+
+    // batch() POSTs the widget-batch endpoint Mythos exposes. One API-key gate
+    // behind which executeAction, executeService and fromMythosCollection all
+    // resolve. Security: URL is validated before every call so a stale
+    // localStorage value can never route requests to an arbitrary host.
+    function batch(items) {
+      if (!configured) {
+        return Promise.resolve(items.map(function (it) {
+          console.warn('[ICan Dev] Not configured — set Mythos URL + API Key in Developer Tools.');
+          return { id: it.id, ok: false, error: 'not configured: open Developer Tools and set the Mythos URL + API Key' };
+        }));
+      }
+      if (!isValidBackendUrl(orchUrl)) {
+        return Promise.resolve(items.map(function (it) {
+          console.error('[ICan Dev] Blocked request to invalid URL:', orchUrl);
+          return { id: it.id, ok: false, error: 'invalid URL — only https:// or http://localhost is allowed' };
+        }));
+      }
+      return fetchWithTimeout(orchUrl + '/api/widget-batch', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json', 'X-API-Key': apiKey },
+        body: JSON.stringify({ items: items }),
+      }).then(function (r) {
+        if (r.status === 401) throw new Error('Unauthorized — check the API Key in Developer Tools');
+        if (r.status === 403) throw new Error('Forbidden — API Key may lack scope for this action');
+        if (!r.ok) throw new Error('Mythos returned ' + r.status + ' — check server logs');
+        return r.json();
+      });
+    }
+
     return {
       environment: 'dev',
       userKey: 'dev-user-001',
       language: 'en',
       root: 'root',
-      orchUrl: localStorage.getItem(LS_ORCH_URL) || '',
-      apiKey:  localStorage.getItem(LS_API_KEY)  || '',
+      orchUrl: orchUrl,
+      apiKey: apiKey,
+
+      // executeAction → real Mythos action. Returns the {run_id,status,output}
+      // envelope per ican.d.ts (the batch returns the bare output as `data`).
       executeAction: function (model, action, params) {
-        // Mythos-routed calls use the `mythos:<ModelName>` prefix in production.
-        // In the dev harness we just log them distinctively so authors can see
-        // whether their widget is targeting ICan native or Mythos.
         var isMythos = typeof model === 'string' && model.toLowerCase().indexOf('mythos:') === 0;
         console.log('[ICan Dev]' + (isMythos ? ' [Mythos]' : '') + ' executeAction:', model, action, params);
-        if (isMythos) {
-          // Mock the Mythos response envelope: { run_id, status, output }.
-          return Promise.resolve({ run_id: 'dev-' + Date.now(), status: 'ok', output: {} });
-        }
-        return Promise.resolve([]);
+        return batch([{ id: 'a', model: model, action: action, parameters: params || {} }]).then(function (res) {
+          var it = (res && res[0]) || {};
+          if (!it.ok) { console.warn('[ICan Dev] executeAction error:', it.error); return { run_id: null, status: 'error', output: null, error: it.error }; }
+          return { run_id: 'dev', status: 'ok', output: it.data };
+        });
       },
+
+      // executeService → real Mythos /api/services/dispatch (App.Service path).
       executeService: function (app, service, params) {
         console.log('[ICan Dev] executeService:', app, service, params);
-        return Promise.resolve(null);
+        return batch([{ id: 's', app: app, service: service, parameters: params || {} }]).then(function (res) {
+          var it = (res && res[0]) || {};
+          if (!it.ok) { console.warn('[ICan Dev] executeService error:', it.error); return null; }
+          return it.data;
+        });
       },
+
+      // listMythosActions → real published-action index via the batch "discover"
+      // item (API-key only — no JWT needed). Powers config-panel action pickers.
       listMythosActions: function () {
-        // Dev stub — returns a couple of synthetic actions so widgets that
-        // populate dropdowns from discovery don't render empty.
         console.log('[ICan Dev] listMythosActions');
-        return Promise.resolve([
-          { model_id: 'dev-model-1', model_name: 'Inventory',  action_id: 'dev-action-1', action_name: 'UpdateStock', description: 'Dev stub' },
-          { model_id: 'dev-model-2', model_name: 'Buildings', action_id: 'dev-action-2', action_name: 'List',         description: 'Dev stub' },
-        ]);
+        if (!configured) return Promise.resolve([]);
+        return batch([{ id: 'd', discover: 'actions' }]).then(function (res) {
+          var it = (res && res[0]) || {};
+          return (it.ok && Array.isArray(it.data)) ? it.data : [];
+        }).catch(function () { return []; });
       },
+
+      // listMythosModels → model picker source (config panels).
+      listMythosModels: function () {
+        if (!configured) return Promise.resolve([]);
+        return batch([{ id: 'd', discover: 'models' }]).then(function (res) {
+          var it = (res && res[0]) || {};
+          return (it.ok && Array.isArray(it.data)) ? it.data : [];
+        }).catch(function () { return []; });
+      },
+
+      // fireMythosEvent → real event publish (best-effort, fire-and-forget).
       fireMythosEvent: function (eventType, payload) {
         console.log('[ICan Dev] fireMythosEvent:', eventType, payload);
-        return Promise.resolve();
+        if (!configured || !isValidBackendUrl(orchUrl)) return Promise.resolve();
+        return fetchWithTimeout(orchUrl + '/api/events/publish', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json', 'X-API-Key': apiKey },
+          body: JSON.stringify({ event_type: eventType, payload: payload || {} }),
+        }, 8000).then(function () {}).catch(function (e) {
+          console.warn('[ICan Dev] fireMythosEvent failed:', e && e.message);
+        });
       },
+
+      // fromMythosCollection → real collection read through the batch.
       fromMythosCollection: function (model, collection) {
         return function (max, lastPageToken, args) {
           console.log('[ICan Dev] fromMythosCollection:', model, collection, { max: max, lastPageToken: lastPageToken, args: args });
-          // Return one page of synthetic docs so DataList renders something.
-          return Promise.resolve({
-            items: Array.from({ length: Math.min(max, 5) }, function (_, i) {
-              return { id: 'dev-' + i, name: model + ' row ' + i, value: i * 10 };
-            }),
-            pageToken: '',
+          return batch([{ id: 'c', model: model, collection: collection, parameters: { max: max, last: lastPageToken || '0', filter: args || {} } }]).then(function (res) {
+            var it = (res && res[0]) || {};
+            var items = (it.ok && Array.isArray(it.data)) ? it.data : [];
+            var last = parseInt(lastPageToken || '0', 10) || 0;
+            return { items: items, pageToken: String(last + items.length) };
           });
         };
       },
-      fireEvent: function (id) {
-        console.log('[ICan Dev] fireEvent:', id);
-        return Promise.resolve();
-      },
-      hasAppRole: function () { return true; },
+
+      fireEvent: function (id) { console.log('[ICan Dev] fireEvent:', id); return Promise.resolve(); },
+      hasAppRole: function () { return true; },   // dev harness: full access
       $L: function (code) { return code; },
       themeName: info.label,
       themeType: info.type,
@@ -1834,46 +2021,108 @@
 
   /* ─── ConnectionPanel ─────────────────────────────────── */
   function ConnectionPanel(props) {
-    var orchUrl = props.orchUrl;
-    var apiKey = props.apiKey;
-    var onSave = props.onSave;
-    var ref = { orchUrl: orchUrl, apiKey: apiKey };
+    var onSave   = props.onSave;
+    var onTest   = props.onTest;
+    var connStatus = props.connStatus || 'idle';
+    var connError  = props.connError  || '';
+
+    // Local controlled state for the two fields + key visibility
+    var urlState     = React.useState(props.orchUrl || '');
+    var localUrl     = urlState[0]; var setLocalUrl = urlState[1];
+    var keyState     = React.useState(props.apiKey || '');
+    var localKey     = keyState[0]; var setLocalKey = keyState[1];
+    var showKeyState = React.useState(false);
+    var showKey      = showKeyState[0]; var setShowKey = showKeyState[1];
+
+    var urlValidationErr = localUrl && !isValidBackendUrl(localUrl)
+      ? 'Only https:// or http://localhost allowed'
+      : '';
+
+    var dotClass = 'ican-conn-dot';
+    var statusText = 'Not configured';
+    if (connStatus === 'testing') {
+      dotClass += ' testing'; statusText = 'Testing…';
+    } else if (connStatus === 'connected') {
+      dotClass += ' connected'; statusText = 'Connected';
+    } else if (connStatus === 'error') {
+      dotClass += ' error'; statusText = 'Error';
+    } else if (localUrl && localKey) {
+      dotClass += ' connected'; statusText = 'Configured';
+    }
+
+    var isTesting = connStatus === 'testing';
 
     return h('div', { className: 'ican-conn-panel' },
       h('div', { className: 'ican-conn-field' },
-        h('label', { className: 'ican-conn-label', htmlFor: 'conn-orch' }, 'Orch URL'),
+        h('label', { className: 'ican-conn-label', htmlFor: 'conn-orch' }, 'Mythos URL'),
         h('input', {
           id: 'conn-orch',
           className: 'ican-conn-input',
           type: 'text',
-          defaultValue: orchUrl,
-          placeholder: 'https://your-orch.example.com',
-          'aria-label': 'Orchestration URL',
-          onChange: function (e) { ref.orchUrl = e.target.value; },
-        })
+          value: localUrl,
+          placeholder: 'https://your-mythos-engine:8090',
+          'aria-label': 'Mythos engine URL',
+          'aria-describedby': urlValidationErr ? 'conn-url-err' : undefined,
+          onChange: function (e) { setLocalUrl(e.target.value); },
+        }),
+        urlValidationErr
+          ? h('div', { id: 'conn-url-err', className: 'ican-conn-error', role: 'alert' }, urlValidationErr)
+          : null
       ),
       h('div', { className: 'ican-conn-field' },
         h('label', { className: 'ican-conn-label', htmlFor: 'conn-key' }, 'API Key'),
-        h('input', {
-          id: 'conn-key',
-          className: 'ican-conn-input',
-          type: 'password',
-          defaultValue: apiKey,
-          placeholder: '••••••••••••••••',
-          'aria-label': 'API Key',
-          onChange: function (e) { ref.apiKey = e.target.value; },
-        })
+        h('div', { className: 'ican-conn-input-wrap' },
+          h('input', {
+            id: 'conn-key',
+            className: 'ican-conn-input',
+            type: showKey ? 'text' : 'password',
+            value: localKey,
+            placeholder: showKey ? 'mk_live_…' : '••••••••••••••••',
+            'aria-label': 'API Key',
+            autoComplete: 'off',
+            onChange: function (e) { setLocalKey(e.target.value); },
+          }),
+          h('button', {
+            className: 'ican-conn-show-btn',
+            type: 'button',
+            title: showKey ? 'Hide key' : 'Show key',
+            'aria-label': showKey ? 'Hide API Key' : 'Show API Key',
+            onClick: function () { setShowKey(!showKey); },
+          }, showKey
+            ? h('svg', { width: 13, height: 13, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: 2 },
+                h('path', { d: 'M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94' }),
+                h('path', { d: 'M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19' }),
+                h('line', { x1: 1, y1: 1, x2: 23, y2: 23 })
+              )
+            : h('svg', { width: 13, height: 13, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: 2 },
+                h('path', { d: 'M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z' }),
+                h('circle', { cx: 12, cy: 12, r: 3 })
+              )
+          )
+        ),
+        connStatus === 'error' && connError
+          ? h('div', { className: 'ican-conn-error', role: 'alert' }, connError)
+          : null
       ),
       h('div', { className: 'ican-conn-actions' },
+        h('button', {
+          className: 'ican-btn ican-btn-secondary',
+          type: 'button',
+          disabled: isTesting || !!urlValidationErr,
+          style: { height: 30, fontSize: 12 },
+          title: 'Test the connection without saving',
+          onClick: function () { onTest(localUrl, localKey); },
+        }, isTesting ? 'Testing…' : 'Test'),
         h('button', {
           className: 'ican-btn ican-btn-primary',
           type: 'button',
+          disabled: !!urlValidationErr,
           style: { height: 30, fontSize: 12 },
-          onClick: function () { onSave(ref.orchUrl, ref.apiKey); },
+          onClick: function () { onSave(localUrl, localKey); },
         }, 'Save'),
         h('div', { className: 'ican-conn-status' },
-          h('div', { className: 'ican-conn-dot' + (orchUrl ? ' connected' : '') }),
-          orchUrl ? 'Connected' : 'Not configured'
+          h('div', { className: dotClass }),
+          statusText
         )
       )
     );
@@ -1899,6 +2148,8 @@
         editMode:    false,
         layouts:     JSON.parse(localStorage.getItem('ican_layouts') || '{}'),
         gridWidth:   window.innerWidth - 40,
+        connStatus:  'idle',   // idle | testing | connected | error
+        connError:   '',
       };
 
       this._onRegistryUpdate = this._onRegistryUpdate.bind(this);
@@ -1910,6 +2161,7 @@
       this._addWidget        = this._addWidget.bind(this);
       this._removeWidget     = this._removeWidget.bind(this);
       this._saveConnection   = this._saveConnection.bind(this);
+      this._testConnection   = this._testConnection.bind(this);
       this._toggleEditMode   = this._toggleEditMode.bind(this);
       this._onLayoutChange   = this._onLayoutChange.bind(this);
     }
@@ -1965,12 +2217,50 @@
     };
 
     App.prototype._saveConnection = function (orchUrl, apiKey) {
-      localStorage.setItem(LS_ORCH_URL, orchUrl);
-      localStorage.setItem(LS_API_KEY, apiKey);
-      this.setState({ orchUrl: orchUrl, apiKey: apiKey });
+      var url = normalizeUrl(orchUrl);
+      var key = (apiKey || '').trim();
+      if (url && !isValidBackendUrl(url)) {
+        showToast('Invalid URL — only https:// or http://localhost allowed', 'error');
+        return;
+      }
+      localStorage.setItem(LS_ORCH_URL, url);
+      localStorage.setItem(LS_API_KEY, key);
+      this.setState({ orchUrl: url, apiKey: key, connStatus: 'idle', connError: '' });
       showToast('Connection settings saved', 'success');
     };
 
+    App.prototype._testConnection = function (orchUrl, apiKey) {
+      var self = this;
+      var url = normalizeUrl(orchUrl);
+      var key = (apiKey || '').trim();
+      if (!url || !key) {
+        showToast('Enter the Mythos URL and API Key first', 'info');
+        return;
+      }
+      if (!isValidBackendUrl(url)) {
+        self.setState({ connStatus: 'error', connError: 'Only https:// or http://localhost allowed' });
+        return;
+      }
+      self.setState({ connStatus: 'testing', connError: '' });
+      fetchWithTimeout(url + '/api/widget-batch', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json', 'X-API-Key': key },
+        body: JSON.stringify({ items: [{ id: 'ping', discover: 'actions' }] }),
+      }, 10000).then(function (r) {
+        if (r.status === 401) throw new Error('Unauthorized — check your API Key');
+        if (r.status === 403) throw new Error('Forbidden — API Key lacks required scope');
+        if (!r.ok) throw new Error('Server returned ' + r.status);
+        return r.json();
+      }).then(function () {
+        self.setState({ connStatus: 'connected', connError: '' });
+        showToast('Connection successful', 'success');
+      }).catch(function (e) {
+        var msg = (e && e.message) || 'Connection failed';
+        self.setState({ connStatus: 'error', connError: msg });
+        showToast('Connection failed: ' + msg, 'error');
+      });
+    };
+
     App.prototype._toggleEditMode = function () {
       this.setState(function (s) { return { editMode: !s.editMode }; });
     };
@@ -2026,6 +2316,23 @@
             title: 'Development environment',
             'aria-label': 'Development environment',
           }, 'DEV'),
+          (function () {
+            var cs = s.connStatus;
+            var cfg = !!(s.orchUrl && s.apiKey);
+            var cls = 'ican-live-badge';
+            var label = 'MOCK';
+            if (cs === 'testing') { cls += ' live-testing'; label = '…'; }
+            else if (cs === 'connected') { cls += ' live'; label = 'LIVE'; }
+            else if (cs === 'error') { cls += ' live-error'; label = 'ERROR'; }
+            else if (cfg) { cls += ' live'; label = 'LIVE'; }
+            return h('span', {
+              className: cls,
+              title: cfg
+                ? 'Connected to Mythos: ' + s.orchUrl
+                : 'Mock mode — set Mythos URL in Developer Tools',
+              'aria-label': cfg ? 'Live Mythos connection' : 'Mock mode',
+            }, label);
+          })(),
           h('div', { className: 'ican-header-spacer' }),
 
           /* Theme switcher */
@@ -2054,9 +2361,12 @@
         s.showConn
           ? h('div', { style: { position: 'fixed', top: 56, left: 0, right: 0, zIndex: 98 } },
               h(ConnectionPanel, {
-                orchUrl: s.orchUrl,
-                apiKey:  s.apiKey,
-                onSave:  self._saveConnection,
+                orchUrl:    s.orchUrl,
+                apiKey:     s.apiKey,
+                onSave:     self._saveConnection,
+                onTest:     self._testConnection,
+                connStatus: s.connStatus,
+                connError:  s.connError,
               })
             )
           : null,

package/templates/resources/ican-components.js

@@ -1727,7 +1727,6 @@
   if (!window.registerUI)           window.registerUI           = function () {};
   if (!window.registerMenuItem)     window.registerMenuItem     = function () {};
   if (!window.registerLocalization) window.registerLocalization = function () {};
-  if (!window.UXPComponents)        window.UXPComponents        = {};
   if (!window.WidgetDesignerComponents) window.WidgetDesignerComponents = {};
 
   console.log('[ICan] Components loaded — InfAIra Canvas v2.0 (canonical, matches widget-bridge.ts)');