@aexol/opencode-wizard 0.1.9 → 0.1.11

package/dist/tui.js

@@ -1,3 +1,4 @@
+import { memo as _$memo } from "@opentui/solid";
 import { createComponent as _$createComponent } from "@opentui/solid";
 import { effect as _$effect } from "@opentui/solid";
 import { createTextNode as _$createTextNode } from "@opentui/solid";
@@ -7,32 +8,63 @@ import { setProp as _$setProp } from "@opentui/solid";
 import { createElement as _$createElement } from "@opentui/solid";
 /** @jsxImportSource @opentui/solid */
 
-import { createMemo, createSignal } from 'solid-js';
+import { createEffect, createMemo, createSignal } from 'solid-js';
 import { PLUGIN_ID, resolvePluginStatusSnapshot } from './server.js';
 const STATUS_TIMEOUT_MS = 5_000;
 const STATUS_REFRESH_INTERVAL_MS = 5_000;
-const getSkillDisplayName = skill => skill.artifactName || skill.skillName || skill.skillSlug;
-const getSkillPolicy = skill => skill.policyLabel || skill.installPolicy;
-const formatSkillTags = skill => {
-  const tagNames = skill.tags.map(tag => tag.label || tag.slug).filter(tag => tag.length > 0);
-  if (tagNames.length === 0) return 'none';
-  return tagNames.join(', ');
+const MAX_STATUS_MESSAGE_LENGTH = 80;
+const MAX_SKILL_DESCRIPTION_LENGTH = 96;
+const MAX_SKILL_NAME_LENGTH = 48;
+const MAX_SKILL_META_LENGTH = 72;
+const MAX_SKILL_TAGS = 4;
+const SKILLS_PAGE_SIZE = 5;
+const compactStatusMessage = message => {
+  if (message.length <= MAX_STATUS_MESSAGE_LENGTH) return message;
+  return `${message.slice(0, MAX_STATUS_MESSAGE_LENGTH - 1)}…`;
+};
+const compactSkillDescription = message => {
+  if (message.length <= MAX_SKILL_DESCRIPTION_LENGTH) return message;
+  return `${message.slice(0, MAX_SKILL_DESCRIPTION_LENGTH - 1)}…`;
+};
+const compactSkillName = name => {
+  if (name.length <= MAX_SKILL_NAME_LENGTH) return name;
+  return `${name.slice(0, MAX_SKILL_NAME_LENGTH - 1)}…`;
+};
+const compactSkillMeta = meta => {
+  if (meta.length <= MAX_SKILL_META_LENGTH) return meta;
+  return `${meta.slice(0, MAX_SKILL_META_LENGTH - 1)}…`;
 };
 const formatSkillsCatalogUnavailableMessage = snapshot => {
   if (!snapshot.catalog && snapshot.status === 'missing_auth') {
-    return 'skills catalog locked until interactive status/fetch authenticates; configured GraphQL URL is shown, but no ping was made because auth is missing';
+    return 'locked (authenticate via status/fetch)';
   }
-  if (!snapshot.catalog) return `skills catalog unavailable: ${snapshot.message ?? snapshot.status}`;
-  return 'skills catalog unavailable';
-};
-const formatSkillOptionDescription = skill => {
-  const description = skill.artifactDescription || skill.skillSlug;
-  return `${skill.contextKind.toUpperCase()} · ${getSkillPolicy(skill)} · v${skill.version || 'unknown'} · ${skill.skillName || skill.skillSlug} · ${formatSkillTags(skill)} · ${description}`;
+  if (!snapshot.catalog && snapshot.message) return compactStatusMessage(snapshot.message);
+  if (!snapshot.catalog) return `unavailable (${snapshot.status})`;
+  return 'unavailable';
 };
 const formatAuthStatus = snapshot => {
   if (snapshot.authState.status !== 'authenticated') return snapshot.authState.status;
   if (!snapshot.authState.email) return 'authenticated';
-  return `authenticated as ${snapshot.authState.email}`;
+  return snapshot.authState.email;
+};
+const formatBackendOriginLabel = backendOrigin => {
+  try {
+    const {
+      hostname
+    } = new URL(backendOrigin);
+    if (hostname === 'localhost' || hostname === '127.0.0.1') return 'localhost';
+    return 'opencode-wizard';
+  } catch {
+    if (backendOrigin.includes('localhost') || backendOrigin.includes('127.0.0.1')) return 'localhost';
+    return 'opencode-wizard';
+  }
+};
+const requestRender = api => {
+  try {
+    api.renderer?.requestRender?.();
+  } catch {
+    // Ignore render request failures; state is still updated.
+  }
 };
 const Row = props => (() => {
   var _el$ = _$createElement("box"),
@@ -66,123 +98,86 @@ const Row = props => (() => {
 })();
 const Panel = props => (() => {
   var _el$5 = _$createElement("box"),
-    _el$6 = _$createElement("text"),
-    _el$7 = _$createElement("b");
+    _el$6 = _$createElement("box"),
+    _el$7 = _$createElement("box"),
+    _el$8 = _$createElement("text"),
+    _el$9 = _$createElement("b"),
+    _el$0 = _$createElement("box"),
+    _el$1 = _$createElement("text");
   _$insertNode(_el$5, _el$6);
   _$setProp(_el$5, "width", "100%");
   _$setProp(_el$5, "flexDirection", "column");
   _$setProp(_el$5, "paddingRight", 1);
   _$insertNode(_el$6, _el$7);
-  _$setProp(_el$6, "wrapMode", "none");
+  _$insertNode(_el$6, _el$0);
+  _$setProp(_el$6, "width", "100%");
+  _$setProp(_el$6, "flexDirection", "row");
+  _$setProp(_el$6, "justifyContent", "space-between");
   _$setProp(_el$6, "overflow", "hidden");
-  _$insert(_el$7, () => props.title);
+  _$insertNode(_el$7, _el$8);
+  _$setProp(_el$7, "flexShrink", 0);
+  _$insertNode(_el$8, _el$9);
+  _$setProp(_el$8, "wrapMode", "none");
+  _$setProp(_el$8, "overflow", "hidden");
+  _$insert(_el$9, () => props.title);
+  _$insertNode(_el$0, _el$1);
+  _$setProp(_el$0, "flexShrink", 0);
+  _$insertNode(_el$1, _$createTextNode(`open`));
+  _$setProp(_el$1, "wrapMode", "none");
   _$insert(_el$5, () => props.children, null);
   _$effect(_p$ => {
-    var _v$3 = props.onPress,
-      _v$4 = props.theme.text;
+    var _v$3 = props.onOpen,
+      _v$4 = props.theme.text,
+      _v$5 = props.theme.textMuted;
     _v$3 !== _p$.e && (_p$.e = _$setProp(_el$5, "onMouseUp", _v$3, _p$.e));
-    _v$4 !== _p$.t && (_p$.t = _$setProp(_el$6, "fg", _v$4, _p$.t));
+    _v$4 !== _p$.t && (_p$.t = _$setProp(_el$8, "fg", _v$4, _p$.t));
+    _v$5 !== _p$.a && (_p$.a = _$setProp(_el$1, "fg", _v$5, _p$.a));
     return _p$;
   }, {
     e: undefined,
-    t: undefined
+    t: undefined,
+    a: undefined
   });
   return _el$5;
 })();
-const openSkillsDialog = (api, status) => {
-  const theme = api.theme.current;
-  if (status.kind === 'ready' && status.snapshot.catalog) {
-    const options = status.snapshot.catalog.skills.map(skill => ({
-      title: getSkillDisplayName(skill),
-      value: skill.skillSlug,
-      description: formatSkillOptionDescription(skill)
-    }));
-    api.ui.dialog.replace(() => _$createComponent(api.ui.Dialog, {
-      size: "medium",
-      onClose: () => {
-        api.ui.dialog.clear();
-      },
-      get children() {
-        return _$createComponent(api.ui.DialogSelect, {
-          title: "Wizard skills catalog",
-          placeholder: "Filter loaded skills",
-          options: options,
-          onSelect: option => {
-            const selectedSkill = status.snapshot.catalog?.skills.find(skill => skill.skillSlug === option.value);
-            if (!selectedSkill) return;
-            api.ui.dialog.clear();
-          }
-        });
-      }
-    }));
-    return;
+const StatusContent = props => {
+  if (props.status.kind === 'loading') {
+    return (() => {
+      var _el$11 = _$createElement("text");
+      _$insertNode(_el$11, _$createTextNode(`loading…`));
+      _$setProp(_el$11, "wrapMode", "none");
+      _$setProp(_el$11, "overflow", "hidden");
+      _$effect(_$p => _$setProp(_el$11, "fg", props.theme.textMuted, _$p));
+      return _el$11;
+    })();
   }
-  const message = status.kind === 'loading' ? 'Skills catalog is loading. Try again after the catalog event completes.' : status.kind === 'error' ? `Skills catalog unavailable: ${status.message}` : status.snapshot.status === 'missing_auth' ? 'Skills catalog is locked until interactive status/fetch authenticates.' : status.snapshot.message ?? 'Skills catalog unavailable.';
-  api.ui.dialog.replace(() => _$createComponent(api.ui.Dialog, {
-    size: "medium",
-    onClose: () => {
-      api.ui.dialog.clear();
+  if (props.status.kind === 'error') {
+    return (() => {
+      var _el$13 = _$createElement("text"),
+        _el$14 = _$createTextNode(`unavailable: `);
+      _$insertNode(_el$13, _el$14);
+      _$setProp(_el$13, "wrapMode", "none");
+      _$setProp(_el$13, "overflow", "hidden");
+      _$insert(_el$13, () => compactStatusMessage(props.status.message), null);
+      _$effect(_$p => _$setProp(_el$13, "fg", props.theme.warning, _$p));
+      return _el$13;
+    })();
+  }
+  return _$createComponent(ReadyRows, {
+    get snapshot() {
+      return props.status.snapshot;
     },
-    get children() {
-      var _el$8 = _$createElement("box"),
-        _el$9 = _$createElement("text"),
-        _el$0 = _$createElement("b"),
-        _el$10 = _$createElement("text");
-      _$insertNode(_el$8, _el$9);
-      _$insertNode(_el$8, _el$10);
-      _$setProp(_el$8, "width", "100%");
-      _$setProp(_el$8, "flexDirection", "column");
-      _$setProp(_el$8, "paddingLeft", 1);
-      _$setProp(_el$8, "paddingRight", 1);
-      _$insertNode(_el$9, _el$0);
-      _$setProp(_el$9, "wrapMode", "none");
-      _$insertNode(_el$0, _$createTextNode(`Wizard skills catalog`));
-      _$setProp(_el$10, "marginTop", 1);
-      _$insert(_el$10, message);
-      _$effect(_p$ => {
-        var _v$5 = theme.text,
-          _v$6 = theme.warning;
-        _v$5 !== _p$.e && (_p$.e = _$setProp(_el$9, "fg", _v$5, _p$.e));
-        _v$6 !== _p$.t && (_p$.t = _$setProp(_el$10, "fg", _v$6, _p$.t));
-        return _p$;
-      }, {
-        e: undefined,
-        t: undefined
-      });
-      return _el$8;
+    get theme() {
+      return props.theme;
     }
-  }));
+  });
 };
 const SkillsRows = props => {
   const theme = createMemo(() => props.api.theme.current);
   const statusContent = () => {
     const currentStatus = props.status();
-    if (currentStatus.kind === 'loading') {
-      return (() => {
-        var _el$11 = _$createElement("text");
-        _$insertNode(_el$11, _$createTextNode(`loading wizard skills catalog…`));
-        _$setProp(_el$11, "wrapMode", "none");
-        _$setProp(_el$11, "overflow", "hidden");
-        _$effect(_$p => _$setProp(_el$11, "fg", theme().textMuted, _$p));
-        return _el$11;
-      })();
-    }
-    if (currentStatus.kind === 'error') {
-      return (() => {
-        var _el$13 = _$createElement("text"),
-          _el$14 = _$createTextNode(`skills catalog unavailable: `);
-        _$insertNode(_el$13, _el$14);
-        _$setProp(_el$13, "wrapMode", "none");
-        _$setProp(_el$13, "overflow", "hidden");
-        _$insert(_el$13, () => currentStatus.message, null);
-        _$effect(_$p => _$setProp(_el$13, "fg", theme().warning, _$p));
-        return _el$13;
-      })();
-    }
-    return _$createComponent(ReadyRows, {
-      get snapshot() {
-        return currentStatus.snapshot;
-      },
+    return _$createComponent(StatusContent, {
+      status: currentStatus,
       get theme() {
         return theme();
       }
@@ -207,22 +202,222 @@ const CatalogBullet = props => (() => {
   _$effect(_$p => _$setProp(_el$16, "fg", props.theme.text, _$p));
   return _el$16;
 })();
+const getSkillDisplayName = skill => skill.artifactName || skill.skillName || skill.skillSlug;
+const getSkillDescription = skill => {
+  if (skill.whenToUse) return skill.whenToUse;
+  if (skill.artifactDescription) return skill.artifactDescription;
+  return null;
+};
+const getSkillTags = skill => {
+  const tagLabels = skill.tags.map(tag => tag.label || tag.slug).filter(Boolean).slice(0, MAX_SKILL_TAGS);
+  if (tagLabels.length === 0) return 'no tags';
+  return tagLabels.join(', ');
+};
+const getSkillMeta = skill => `${skill.policyLabel} · ${skill.contextKind} · ${getSkillTags(skill)}`;
+const SkillCatalogRow = props => {
+  const description = getSkillDescription(props.skill);
+  return (() => {
+    var _el$18 = _$createElement("box"),
+      _el$19 = _$createElement("text"),
+      _el$20 = _$createElement("b"),
+      _el$21 = _$createElement("text");
+    _$insertNode(_el$18, _el$19);
+    _$insertNode(_el$18, _el$21);
+    _$setProp(_el$18, "width", "100%");
+    _$setProp(_el$18, "flexDirection", "column");
+    _$setProp(_el$18, "overflow", "hidden");
+    _$setProp(_el$18, "marginBottom", 1);
+    _$insertNode(_el$19, _el$20);
+    _$setProp(_el$19, "wrapMode", "none");
+    _$setProp(_el$19, "overflow", "hidden");
+    _$insert(_el$20, () => compactSkillName(getSkillDisplayName(props.skill)));
+    _$setProp(_el$21, "wrapMode", "none");
+    _$setProp(_el$21, "overflow", "hidden");
+    _$insert(_el$21, () => compactSkillMeta(getSkillMeta(props.skill)));
+    _$insert(_el$18, description ? (() => {
+      var _el$22 = _$createElement("text");
+      _$setProp(_el$22, "wrapMode", "none");
+      _$setProp(_el$22, "overflow", "hidden");
+      _$insert(_el$22, () => compactSkillDescription(description));
+      _$effect(_$p => _$setProp(_el$22, "fg", props.theme.text, _$p));
+      return _el$22;
+    })() : null, null);
+    _$effect(_p$ => {
+      var _v$6 = props.theme.text,
+        _v$7 = props.theme.textMuted;
+      _v$6 !== _p$.e && (_p$.e = _$setProp(_el$19, "fg", _v$6, _p$.e));
+      _v$7 !== _p$.t && (_p$.t = _$setProp(_el$21, "fg", _v$7, _p$.t));
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined
+    });
+    return _el$18;
+  })();
+};
+const WizardSkillsDialogContent = props => {
+  const [page, setPage] = createSignal(0);
+  const content = () => {
+    const currentStatus = props.status();
+    if (currentStatus.kind === 'loading') {
+      return (() => {
+        var _el$23 = _$createElement("text");
+        _$insertNode(_el$23, _$createTextNode(`Refreshing published skills…`));
+        _$setProp(_el$23, "wrapMode", "none");
+        _$setProp(_el$23, "overflow", "hidden");
+        _$effect(_$p => _$setProp(_el$23, "fg", props.theme.textMuted, _$p));
+        return _el$23;
+      })();
+    }
+    if (currentStatus.kind === 'error') {
+      return (() => {
+        var _el$25 = _$createElement("text"),
+          _el$26 = _$createTextNode(`unavailable: `);
+        _$insertNode(_el$25, _el$26);
+        _$setProp(_el$25, "wrapMode", "none");
+        _$setProp(_el$25, "overflow", "hidden");
+        _$insert(_el$25, () => compactStatusMessage(currentStatus.message), null);
+        _$effect(_$p => _$setProp(_el$25, "fg", props.theme.warning, _$p));
+        return _el$25;
+      })();
+    }
+    if (!currentStatus.snapshot.catalog) {
+      return (() => {
+        var _el$27 = _$createElement("text"),
+          _el$28 = _$createTextNode(`catalog `);
+        _$insertNode(_el$27, _el$28);
+        _$setProp(_el$27, "wrapMode", "none");
+        _$setProp(_el$27, "overflow", "hidden");
+        _$insert(_el$27, () => formatSkillsCatalogUnavailableMessage(currentStatus.snapshot), null);
+        _$effect(_$p => _$setProp(_el$27, "fg", props.theme.textMuted, _$p));
+        return _el$27;
+      })();
+    }
+    const {
+      catalog
+    } = currentStatus.snapshot;
+    const totalPages = Math.max(1, Math.ceil(catalog.skills.length / SKILLS_PAGE_SIZE));
+    const currentPage = Math.min(page(), totalPages - 1);
+    const startIndex = currentPage * SKILLS_PAGE_SIZE;
+    const endIndex = Math.min(startIndex + SKILLS_PAGE_SIZE, catalog.skills.length);
+    const visibleSkills = catalog.skills.slice(startIndex, endIndex);
+    const canGoBack = currentPage > 0;
+    const canGoForward = currentPage < totalPages - 1;
+    const goBack = () => {
+      if (!canGoBack) return;
+      setPage(currentPage - 1);
+    };
+    const goForward = () => {
+      if (!canGoForward) return;
+      setPage(currentPage + 1);
+    };
+    return (() => {
+      var _el$29 = _$createElement("box"),
+        _el$30 = _$createElement("box"),
+        _el$31 = _$createElement("text"),
+        _el$32 = _$createElement("b"),
+        _el$33 = _$createTextNode(` skills`),
+        _el$34 = _$createTextNode(`&nbsp;· `),
+        _el$35 = _$createTextNode(` global · `),
+        _el$36 = _$createTextNode(` workspace`),
+        _el$37 = _$createElement("text"),
+        _el$38 = _$createTextNode(`page `),
+        _el$39 = _$createTextNode(`/`),
+        _el$40 = _$createElement("box"),
+        _el$41 = _$createElement("box"),
+        _el$42 = _$createElement("box"),
+        _el$43 = _$createElement("text"),
+        _el$45 = _$createElement("text"),
+        _el$46 = _$createTextNode(` shown`),
+        _el$47 = _$createElement("box"),
+        _el$48 = _$createElement("text");
+      _$insertNode(_el$29, _el$30);
+      _$insertNode(_el$29, _el$40);
+      _$insertNode(_el$29, _el$41);
+      _$setProp(_el$29, "width", "100%");
+      _$setProp(_el$29, "flexDirection", "column");
+      _$setProp(_el$29, "overflow", "hidden");
+      _$insertNode(_el$30, _el$31);
+      _$insertNode(_el$30, _el$37);
+      _$setProp(_el$30, "width", "100%");
+      _$setProp(_el$30, "flexDirection", "row");
+      _$setProp(_el$30, "justifyContent", "space-between");
+      _$setProp(_el$30, "overflow", "hidden");
+      _$insertNode(_el$31, _el$32);
+      _$insertNode(_el$31, _el$34);
+      _$insertNode(_el$31, _el$35);
+      _$insertNode(_el$31, _el$36);
+      _$setProp(_el$31, "wrapMode", "none");
+      _$setProp(_el$31, "overflow", "hidden");
+      _$insertNode(_el$32, _el$33);
+      _$insert(_el$32, () => catalog.publishedSkillCount, _el$33);
+      _$insert(_el$31, () => catalog.assignmentCounts.global, _el$35);
+      _$insert(_el$31, () => catalog.assignmentCounts.project, _el$36);
+      _$insertNode(_el$37, _el$38);
+      _$insertNode(_el$37, _el$39);
+      _$setProp(_el$37, "wrapMode", "none");
+      _$insert(_el$37, currentPage + 1, _el$39);
+      _$insert(_el$37, totalPages, null);
+      _$setProp(_el$40, "width", "100%");
+      _$setProp(_el$40, "flexDirection", "column");
+      _$setProp(_el$40, "marginTop", 1);
+      _$setProp(_el$40, "overflow", "hidden");
+      _$insert(_el$40, () => visibleSkills.map(skill => _$createComponent(SkillCatalogRow, {
+        skill: skill,
+        get theme() {
+          return props.theme;
+        }
+      })));
+      _$insertNode(_el$41, _el$42);
+      _$insertNode(_el$41, _el$45);
+      _$insertNode(_el$41, _el$47);
+      _$setProp(_el$41, "width", "100%");
+      _$setProp(_el$41, "flexDirection", "row");
+      _$setProp(_el$41, "justifyContent", "space-between");
+      _$setProp(_el$41, "overflow", "hidden");
+      _$insertNode(_el$42, _el$43);
+      _$setProp(_el$42, "onMouseUp", goBack);
+      _$setProp(_el$42, "flexShrink", 0);
+      _$insertNode(_el$43, _$createTextNode(`← Prev`));
+      _$setProp(_el$43, "wrapMode", "none");
+      _$insertNode(_el$45, _el$46);
+      _$setProp(_el$45, "wrapMode", "none");
+      _$setProp(_el$45, "overflow", "hidden");
+      _$insert(_el$45, () => visibleSkills.length, _el$46);
+      _$insertNode(_el$47, _el$48);
+      _$setProp(_el$47, "onMouseUp", goForward);
+      _$setProp(_el$47, "flexShrink", 0);
+      _$insertNode(_el$48, _$createTextNode(`Next →`));
+      _$setProp(_el$48, "wrapMode", "none");
+      _$effect(_p$ => {
+        var _v$8 = props.theme.text,
+          _v$9 = props.theme.textMuted,
+          _v$0 = canGoBack ? props.theme.text : props.theme.textMuted,
+          _v$1 = props.theme.textMuted,
+          _v$10 = canGoForward ? props.theme.text : props.theme.textMuted;
+        _v$8 !== _p$.e && (_p$.e = _$setProp(_el$31, "fg", _v$8, _p$.e));
+        _v$9 !== _p$.t && (_p$.t = _$setProp(_el$37, "fg", _v$9, _p$.t));
+        _v$0 !== _p$.a && (_p$.a = _$setProp(_el$43, "fg", _v$0, _p$.a));
+        _v$1 !== _p$.o && (_p$.o = _$setProp(_el$45, "fg", _v$1, _p$.o));
+        _v$10 !== _p$.i && (_p$.i = _$setProp(_el$48, "fg", _v$10, _p$.i));
+        return _p$;
+      }, {
+        e: undefined,
+        t: undefined,
+        a: undefined,
+        o: undefined,
+        i: undefined
+      });
+      return _el$29;
+    })();
+  };
+  return _$memo(content);
+};
 const ReadyRows = props => {
   const statusRows = [_$createComponent(Row, {
-    label: "backend",
+    label: "url",
     get value() {
-      return props.snapshot.backendOrigin;
-    },
-    get labelColor() {
-      return props.theme.textMuted;
-    },
-    get valueColor() {
-      return props.theme.text;
-    }
-  }), _$createComponent(Row, {
-    label: "graphql",
-    get value() {
-      return props.snapshot.graphqlUrl;
+      return formatBackendOriginLabel(props.snapshot.backendOrigin);
     },
     get labelColor() {
       return props.theme.textMuted;
@@ -244,12 +439,12 @@ const ReadyRows = props => {
   })];
   if (!props.snapshot.catalog) {
     return (() => {
-      var _el$18 = _$createElement("box");
-      _$setProp(_el$18, "width", "100%");
-      _$setProp(_el$18, "flexDirection", "column");
-      _$setProp(_el$18, "overflow", "hidden");
-      _$insert(_el$18, statusRows, null);
-      _$insert(_el$18, _$createComponent(Row, {
+      var _el$50 = _$createElement("box");
+      _$setProp(_el$50, "width", "100%");
+      _$setProp(_el$50, "flexDirection", "column");
+      _$setProp(_el$50, "overflow", "hidden");
+      _$insert(_el$50, statusRows, null);
+      _$insert(_el$50, _$createComponent(Row, {
         label: "catalog",
         get value() {
           return formatSkillsCatalogUnavailableMessage(props.snapshot);
@@ -261,22 +456,22 @@ const ReadyRows = props => {
           return props.theme.text;
         }
       }), null);
-      return _el$18;
+      return _el$50;
     })();
   }
   const counts = props.snapshot.catalog.assignmentCounts;
   return (() => {
-    var _el$19 = _$createElement("box"),
-      _el$20 = _$createElement("text");
-    _$insertNode(_el$19, _el$20);
-    _$setProp(_el$19, "width", "100%");
-    _$setProp(_el$19, "flexDirection", "column");
-    _$setProp(_el$19, "overflow", "hidden");
-    _$insert(_el$19, statusRows, _el$20);
-    _$insertNode(_el$20, _$createTextNode(`catalog:`));
-    _$setProp(_el$20, "wrapMode", "none");
-    _$setProp(_el$20, "overflow", "hidden");
-    _$insert(_el$19, _$createComponent(CatalogBullet, {
+    var _el$51 = _$createElement("box"),
+      _el$52 = _$createElement("text");
+    _$insertNode(_el$51, _el$52);
+    _$setProp(_el$51, "width", "100%");
+    _$setProp(_el$51, "flexDirection", "column");
+    _$setProp(_el$51, "overflow", "hidden");
+    _$insert(_el$51, statusRows, _el$52);
+    _$insertNode(_el$52, _$createTextNode(`catalog:`));
+    _$setProp(_el$52, "wrapMode", "none");
+    _$setProp(_el$52, "overflow", "hidden");
+    _$insert(_el$51, _$createComponent(CatalogBullet, {
       get value() {
         return `${props.snapshot.catalog.publishedSkillCount} loaded`;
       },
@@ -284,7 +479,7 @@ const ReadyRows = props => {
         return props.theme;
       }
     }), null);
-    _$insert(_el$19, _$createComponent(CatalogBullet, {
+    _$insert(_el$51, _$createComponent(CatalogBullet, {
       get value() {
         return `${counts.global} global`;
       },
@@ -292,7 +487,7 @@ const ReadyRows = props => {
         return props.theme;
       }
     }), null);
-    _$insert(_el$19, _$createComponent(CatalogBullet, {
+    _$insert(_el$51, _$createComponent(CatalogBullet, {
       get value() {
         return `${counts.project} workspace`;
       },
@@ -300,11 +495,91 @@ const ReadyRows = props => {
         return props.theme;
       }
     }), null);
-    _$effect(_$p => _$setProp(_el$20, "fg", props.theme.textMuted, _$p));
-    return _el$19;
+    _$effect(_$p => _$setProp(_el$52, "fg", props.theme.textMuted, _$p));
+    return _el$51;
   })();
 };
-const createWizardStatusSlot = (api, status) => ({
+const WizardSkillsDialog = props => {
+  const theme = createMemo(() => props.api.theme.current);
+  createEffect(() => {
+    props.api.ui?.dialog?.setSize?.('xlarge');
+  });
+  return (() => {
+    var _el$54 = _$createElement("box"),
+      _el$55 = _$createElement("box"),
+      _el$56 = _$createElement("text"),
+      _el$57 = _$createElement("b"),
+      _el$59 = _$createElement("box"),
+      _el$60 = _$createElement("text"),
+      _el$62 = _$createElement("box");
+    _$insertNode(_el$54, _el$55);
+    _$insertNode(_el$54, _el$62);
+    _$setProp(_el$54, "width", "100%");
+    _$setProp(_el$54, "flexDirection", "column");
+    _$setProp(_el$54, "paddingLeft", 1);
+    _$setProp(_el$54, "paddingRight", 1);
+    _$setProp(_el$54, "paddingBottom", 1);
+    _$insertNode(_el$55, _el$56);
+    _$insertNode(_el$55, _el$59);
+    _$setProp(_el$55, "width", "100%");
+    _$setProp(_el$55, "flexDirection", "row");
+    _$setProp(_el$55, "justifyContent", "space-between");
+    _$setProp(_el$55, "overflow", "hidden");
+    _$insertNode(_el$56, _el$57);
+    _$setProp(_el$56, "wrapMode", "none");
+    _$setProp(_el$56, "overflow", "hidden");
+    _$insertNode(_el$57, _$createTextNode(`Wizard Skills`));
+    _$insertNode(_el$59, _el$60);
+    _$setProp(_el$59, "flexShrink", 0);
+    _$insertNode(_el$60, _$createTextNode(`Close`));
+    _$setProp(_el$60, "wrapMode", "none");
+    _$setProp(_el$62, "width", "100%");
+    _$setProp(_el$62, "flexDirection", "column");
+    _$setProp(_el$62, "marginTop", 1);
+    _$setProp(_el$62, "overflow", "hidden");
+    _$insert(_el$62, _$createComponent(WizardSkillsDialogContent, {
+      get status() {
+        return props.status;
+      },
+      get theme() {
+        return theme();
+      }
+    }));
+    _$effect(_p$ => {
+      var _v$11 = theme().text,
+        _v$12 = props.onClose,
+        _v$13 = theme().textMuted;
+      _v$11 !== _p$.e && (_p$.e = _$setProp(_el$56, "fg", _v$11, _p$.e));
+      _v$12 !== _p$.t && (_p$.t = _$setProp(_el$59, "onMouseUp", _v$12, _p$.t));
+      _v$13 !== _p$.a && (_p$.a = _$setProp(_el$60, "fg", _v$13, _p$.a));
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined,
+      a: undefined
+    });
+    return _el$54;
+  })();
+};
+const openWizardSkillsDialog = (api, status, refreshStatus) => {
+  const dialog = api.ui?.dialog;
+  if (!dialog?.replace) return;
+  refreshStatus({
+    showLoading: true
+  });
+  dialog.replace(() => _$createComponent(WizardSkillsDialog, {
+    api: api,
+    status: status,
+    onClose: () => {
+      dialog.clear?.();
+      requestRender(api);
+    }
+  }), () => {
+    requestRender(api);
+  });
+  requestRender(api);
+};
+const createWizardStatusSlot = (api, status, refreshStatus) => ({
   order: 240,
   slots: {
     home_bottom: () => _$createComponent(Panel, {
@@ -312,7 +587,7 @@ const createWizardStatusSlot = (api, status) => ({
       get theme() {
         return api.theme.current;
       },
-      onPress: () => openSkillsDialog(api, status()),
+      onOpen: () => openWizardSkillsDialog(api, status, refreshStatus),
       get children() {
         return _$createComponent(SkillsRows, {
           api: api,
@@ -325,7 +600,7 @@ const createWizardStatusSlot = (api, status) => ({
       get theme() {
         return api.theme.current;
       },
-      onPress: () => openSkillsDialog(api, status()),
+      onOpen: () => openWizardSkillsDialog(api, status, refreshStatus),
       get children() {
         return _$createComponent(SkillsRows, {
           api: api,
@@ -357,10 +632,19 @@ const tui = async api => {
   const [status, setStatus] = createSignal({
     kind: 'loading'
   });
-  const refreshStatus = () => {
-    void loadStatus(api).then(setStatus);
+  const refreshStatus = options => {
+    if (options?.showLoading) {
+      setStatus({
+        kind: 'loading'
+      });
+      requestRender(api);
+    }
+    void loadStatus(api).then(nextStatus => {
+      setStatus(nextStatus);
+      requestRender(api);
+    });
   };
-  api.slots.register(createWizardStatusSlot(api, status));
+  api.slots.register(createWizardStatusSlot(api, status, refreshStatus));
   refreshStatus();
   setInterval(refreshStatus, STATUS_REFRESH_INTERVAL_MS);
 };