@aexol/opencode-wizard 0.1.16 → 0.2.1

package/dist/tui.js

@@ -214,11 +214,37 @@ const getSkillTags = skill => {
   if (tagLabels.length === 0) return 'no tags';
   return tagLabels.join(', ');
 };
-const getSkillMeta = (skill, state) => `${skill.policyLabel} · ${state} · ${getSkillTags(skill)}`;
+const isUserScopeAssignment = assignmentSource => assignmentSource === 'USER' || assignmentSource === 'USER_GLOBAL' || assignmentSource === 'USER_WORKSPACE';
+const getSkillScopeLabel = (skill, state) => {
+  if (state === 'installable') return 'AVAILABLE';
+  if (isUserScopeAssignment(skill.assignmentSource) || state === 'user-scope') return 'USER SCOPE';
+  if (state === 'global-scope' || skill.contextKind === 'global') return 'GLOBAL SCOPE';
+  return 'PROJECT SCOPE';
+};
+const getSkillPreferenceScope = skill => {
+  if (skill.assignmentSource === 'USER_GLOBAL') return 'global';
+  if (skill.assignmentSource === 'USER_WORKSPACE') return 'project';
+  if (skill.contextKind === 'global') return 'global';
+  return 'project';
+};
+const getSkillMeta = (skill, state) => `${getSkillScopeLabel(skill, state)} · ${skill.assignmentLabel} · ${skill.policyLabel} · ${getSkillTags(skill)}`;
 const getRowStateLabel = row => {
-  if (row.ignored) return 'ignored';
+  const scopeLabel = getSkillScopeLabel(row.skill, row.state);
+  if (row.ignored) return `ignored · ${scopeLabel}`;
   if (row.state === 'installable') return 'not installed';
-  return row.state === 'installed-global' ? 'installed global' : 'installed project';
+  return `active · ${scopeLabel}`;
+};
+const getSkillRowState = skill => {
+  if (isUserScopeAssignment(skill.assignmentSource)) return 'user-scope';
+  if (skill.contextKind === 'global') return 'global-scope';
+  return 'project-scope';
+};
+const getInstallableNotInstalledSkills = snapshot => {
+  const installableSkills = snapshot.installableCatalog?.skills ?? [];
+  if (installableSkills.length === 0) return [];
+  const activeSkillSlugs = new Set(snapshot.catalog?.skills.map(skill => skill.skillSlug) ?? []);
+  const ignoredSkillSlugs = new Set(snapshot.ignoredPublishedSkills.skills.map(skill => skill.skillSlug));
+  return installableSkills.filter(skill => !activeSkillSlugs.has(skill.skillSlug) && !ignoredSkillSlugs.has(skill.skillSlug));
 };
 const getErrorMessage = error => {
   if (error instanceof Error && error.message) return error.message;
@@ -266,7 +292,7 @@ const SkillCatalogRow = props => {
         _$insertNode(_el$27, _el$28);
         _$setProp(_el$27, "onMouseUp", () => props.onInstall(props.row, 'global'));
         _$setProp(_el$27, "flexShrink", 0);
-        _$insertNode(_el$28, _$createTextNode(`Global`));
+        _$insertNode(_el$28, _$createTextNode(`GLOBAL SCOPE`));
         _$setProp(_el$28, "wrapMode", "none");
         _$effect(_$p => _$setProp(_el$28, "fg", props.theme.textMuted, _$p));
         return _el$27;
@@ -282,7 +308,7 @@ const SkillCatalogRow = props => {
         _$insertNode(_el$32, _el$33);
         _$setProp(_el$32, "onMouseUp", () => props.onInstall(props.row, 'project'));
         _$setProp(_el$32, "flexShrink", 0);
-        _$insertNode(_el$33, _$createTextNode(`Project`));
+        _$insertNode(_el$33, _$createTextNode(`PROJECT SCOPE`));
         _$setProp(_el$33, "wrapMode", "none");
         _$effect(_$p => _$setProp(_el$33, "fg", props.theme.textMuted, _$p));
         return _el$32;
@@ -379,17 +405,16 @@ const WizardSkillsDialogContent = props => {
     const {
       catalog
     } = currentStatus.snapshot;
-    const activeSkillSlugs = new Set(catalog.skills.map(skill => skill.skillSlug));
-    const ignoredSkillSlugs = new Set(currentStatus.snapshot.ignoredPublishedSkills.skills.map(skill => skill.skillSlug));
+    const installableNotInstalledSkills = getInstallableNotInstalledSkills(currentStatus.snapshot);
     const rows = [...catalog.skills.map(skill => ({
       skill,
       ignored: false,
-      state: skill.contextKind === 'global' ? 'installed-global' : 'installed-project'
+      state: getSkillRowState(skill)
     })), ...currentStatus.snapshot.ignoredPublishedSkills.skills.map(skill => ({
       skill,
       ignored: true,
-      state: skill.contextKind === 'global' ? 'installed-global' : 'installed-project'
-    })), ...(currentStatus.snapshot.installableCatalog?.skills ?? []).filter(skill => !activeSkillSlugs.has(skill.skillSlug) && !ignoredSkillSlugs.has(skill.skillSlug)).map(skill => ({
+      state: getSkillRowState(skill)
+    })), ...installableNotInstalledSkills.map(skill => ({
       skill,
       ignored: false,
       state: 'installable'
@@ -416,29 +441,30 @@ const WizardSkillsDialogContent = props => {
         _el$52 = _$createElement("b"),
         _el$53 = _$createTextNode(` skills`),
         _el$54 = _$createTextNode(` · `),
-        _el$55 = _$createTextNode(` global · `),
-        _el$56 = _$createTextNode(` workspace  · `),
-        _el$57 = _$createTextNode(` ignored  · `),
-        _el$58 = _$createTextNode(` installable`),
-        _el$59 = _$createElement("text"),
-        _el$60 = _$createTextNode(`page `),
-        _el$61 = _$createTextNode(`/`),
-        _el$62 = _$createElement("box"),
+        _el$55 = _$createTextNode(` GLOBAL SCOPE · `),
+        _el$56 = _$createTextNode(` PROJECT SCOPE  · `),
+        _el$57 = _$createTextNode(` USER SCOPE  · `),
+        _el$58 = _$createTextNode(` ignored  · `),
+        _el$59 = _$createTextNode(` installable/not installed`),
+        _el$60 = _$createElement("text"),
+        _el$61 = _$createTextNode(`page `),
+        _el$62 = _$createTextNode(`/`),
         _el$63 = _$createElement("box"),
         _el$64 = _$createElement("box"),
-        _el$65 = _$createElement("text"),
-        _el$67 = _$createElement("text"),
-        _el$68 = _$createTextNode(` shown`),
-        _el$69 = _$createElement("box"),
-        _el$70 = _$createElement("text");
+        _el$65 = _$createElement("box"),
+        _el$66 = _$createElement("text"),
+        _el$68 = _$createElement("text"),
+        _el$69 = _$createTextNode(` shown`),
+        _el$70 = _$createElement("box"),
+        _el$71 = _$createElement("text");
       _$insertNode(_el$49, _el$50);
-      _$insertNode(_el$49, _el$62);
       _$insertNode(_el$49, _el$63);
+      _$insertNode(_el$49, _el$64);
       _$setProp(_el$49, "width", "100%");
       _$setProp(_el$49, "flexDirection", "column");
       _$setProp(_el$49, "overflow", "hidden");
       _$insertNode(_el$50, _el$51);
-      _$insertNode(_el$50, _el$59);
+      _$insertNode(_el$50, _el$60);
       _$setProp(_el$50, "width", "100%");
       _$setProp(_el$50, "flexDirection", "row");
       _$setProp(_el$50, "justifyContent", "space-between");
@@ -449,24 +475,26 @@ const WizardSkillsDialogContent = props => {
       _$insertNode(_el$51, _el$56);
       _$insertNode(_el$51, _el$57);
       _$insertNode(_el$51, _el$58);
+      _$insertNode(_el$51, _el$59);
       _$setProp(_el$51, "wrapMode", "none");
       _$setProp(_el$51, "overflow", "hidden");
       _$insertNode(_el$52, _el$53);
       _$insert(_el$52, () => catalog.publishedSkillCount, _el$53);
       _$insert(_el$51, () => catalog.assignmentCounts.global, _el$55);
       _$insert(_el$51, () => catalog.assignmentCounts.project, _el$56);
-      _$insert(_el$51, () => currentStatus.snapshot.ignoredPublishedSkills.count, _el$57);
-      _$insert(_el$51, () => currentStatus.snapshot.installableCatalog?.count ?? 0, _el$58);
-      _$insertNode(_el$59, _el$60);
-      _$insertNode(_el$59, _el$61);
-      _$setProp(_el$59, "wrapMode", "none");
-      _$insert(_el$59, currentPage + 1, _el$61);
-      _$insert(_el$59, totalPages, null);
-      _$setProp(_el$62, "width", "100%");
-      _$setProp(_el$62, "flexDirection", "column");
-      _$setProp(_el$62, "marginTop", 1);
-      _$setProp(_el$62, "overflow", "hidden");
-      _$insert(_el$62, () => visibleRows.map(row => _$createComponent(SkillCatalogRow, {
+      _$insert(_el$51, () => catalog.assignmentCounts.user, _el$57);
+      _$insert(_el$51, () => currentStatus.snapshot.ignoredPublishedSkills.count, _el$58);
+      _$insert(_el$51, () => installableNotInstalledSkills.length, _el$59);
+      _$insertNode(_el$60, _el$61);
+      _$insertNode(_el$60, _el$62);
+      _$setProp(_el$60, "wrapMode", "none");
+      _$insert(_el$60, currentPage + 1, _el$62);
+      _$insert(_el$60, totalPages, null);
+      _$setProp(_el$63, "width", "100%");
+      _$setProp(_el$63, "flexDirection", "column");
+      _$setProp(_el$63, "marginTop", 1);
+      _$setProp(_el$63, "overflow", "hidden");
+      _$insert(_el$63, () => visibleRows.map(row => _$createComponent(SkillCatalogRow, {
         row: row,
         get theme() {
           return props.theme;
@@ -481,27 +509,27 @@ const WizardSkillsDialogContent = props => {
           return props.onUninstallSkill;
         }
       })));
-      _$insertNode(_el$63, _el$64);
-      _$insertNode(_el$63, _el$67);
-      _$insertNode(_el$63, _el$69);
-      _$setProp(_el$63, "width", "100%");
-      _$setProp(_el$63, "flexDirection", "row");
-      _$setProp(_el$63, "justifyContent", "space-between");
-      _$setProp(_el$63, "overflow", "hidden");
       _$insertNode(_el$64, _el$65);
-      _$setProp(_el$64, "onMouseUp", goBack);
-      _$setProp(_el$64, "flexShrink", 0);
-      _$insertNode(_el$65, _$createTextNode(`← Prev`));
-      _$setProp(_el$65, "wrapMode", "none");
-      _$insertNode(_el$67, _el$68);
-      _$setProp(_el$67, "wrapMode", "none");
-      _$setProp(_el$67, "overflow", "hidden");
-      _$insert(_el$67, () => visibleRows.length, _el$68);
-      _$insertNode(_el$69, _el$70);
-      _$setProp(_el$69, "onMouseUp", goForward);
-      _$setProp(_el$69, "flexShrink", 0);
-      _$insertNode(_el$70, _$createTextNode(`Next →`));
-      _$setProp(_el$70, "wrapMode", "none");
+      _$insertNode(_el$64, _el$68);
+      _$insertNode(_el$64, _el$70);
+      _$setProp(_el$64, "width", "100%");
+      _$setProp(_el$64, "flexDirection", "row");
+      _$setProp(_el$64, "justifyContent", "space-between");
+      _$setProp(_el$64, "overflow", "hidden");
+      _$insertNode(_el$65, _el$66);
+      _$setProp(_el$65, "onMouseUp", goBack);
+      _$setProp(_el$65, "flexShrink", 0);
+      _$insertNode(_el$66, _$createTextNode(`← Prev`));
+      _$setProp(_el$66, "wrapMode", "none");
+      _$insertNode(_el$68, _el$69);
+      _$setProp(_el$68, "wrapMode", "none");
+      _$setProp(_el$68, "overflow", "hidden");
+      _$insert(_el$68, () => visibleRows.length, _el$69);
+      _$insertNode(_el$70, _el$71);
+      _$setProp(_el$70, "onMouseUp", goForward);
+      _$setProp(_el$70, "flexShrink", 0);
+      _$insertNode(_el$71, _$createTextNode(`Next →`));
+      _$setProp(_el$71, "wrapMode", "none");
       _$effect(_p$ => {
         var _v$8 = props.theme.text,
           _v$9 = props.theme.textMuted,
@@ -509,10 +537,10 @@ const WizardSkillsDialogContent = props => {
           _v$1 = props.theme.textMuted,
           _v$10 = canGoForward ? props.theme.text : props.theme.textMuted;
         _v$8 !== _p$.e && (_p$.e = _$setProp(_el$51, "fg", _v$8, _p$.e));
-        _v$9 !== _p$.t && (_p$.t = _$setProp(_el$59, "fg", _v$9, _p$.t));
-        _v$0 !== _p$.a && (_p$.a = _$setProp(_el$65, "fg", _v$0, _p$.a));
-        _v$1 !== _p$.o && (_p$.o = _$setProp(_el$67, "fg", _v$1, _p$.o));
-        _v$10 !== _p$.i && (_p$.i = _$setProp(_el$70, "fg", _v$10, _p$.i));
+        _v$9 !== _p$.t && (_p$.t = _$setProp(_el$60, "fg", _v$9, _p$.t));
+        _v$0 !== _p$.a && (_p$.a = _$setProp(_el$66, "fg", _v$0, _p$.a));
+        _v$1 !== _p$.o && (_p$.o = _$setProp(_el$68, "fg", _v$1, _p$.o));
+        _v$10 !== _p$.i && (_p$.i = _$setProp(_el$71, "fg", _v$10, _p$.i));
         return _p$;
       }, {
         e: undefined,
@@ -525,11 +553,11 @@ const WizardSkillsDialogContent = props => {
     })();
   };
   return (() => {
-    var _el$72 = _$createElement("box");
-    _$setProp(_el$72, "width", "100%");
-    _$setProp(_el$72, "flexDirection", "column");
-    _$setProp(_el$72, "overflow", "hidden");
-    _$insert(_el$72, _$createComponent(PreferenceActionNoticeRow, {
+    var _el$73 = _$createElement("box");
+    _$setProp(_el$73, "width", "100%");
+    _$setProp(_el$73, "flexDirection", "column");
+    _$setProp(_el$73, "overflow", "hidden");
+    _$insert(_el$73, _$createComponent(PreferenceActionNoticeRow, {
       get notice() {
         return props.actionNotice();
       },
@@ -537,19 +565,19 @@ const WizardSkillsDialogContent = props => {
         return props.theme;
       }
     }), null);
-    _$insert(_el$72, content, null);
-    return _el$72;
+    _$insert(_el$73, content, null);
+    return _el$73;
   })();
 };
 const PreferenceActionNoticeRow = props => {
   if (props.notice.kind === 'idle') return null;
   return (() => {
-    var _el$73 = _$createElement("text");
-    _$setProp(_el$73, "wrapMode", "none");
-    _$setProp(_el$73, "overflow", "hidden");
-    _$insert(_el$73, () => compactStatusMessage(props.notice.message));
-    _$effect(_$p => _$setProp(_el$73, "fg", props.notice.kind === 'error' ? props.theme.warning : props.theme.textMuted, _$p));
-    return _el$73;
+    var _el$74 = _$createElement("text");
+    _$setProp(_el$74, "wrapMode", "none");
+    _$setProp(_el$74, "overflow", "hidden");
+    _$insert(_el$74, () => compactStatusMessage(props.notice.message));
+    _$effect(_$p => _$setProp(_el$74, "fg", props.notice.kind === 'error' ? props.theme.warning : props.theme.textMuted, _$p));
+    return _el$74;
   })();
 };
 const ReadyRows = props => {
@@ -578,12 +606,12 @@ const ReadyRows = props => {
   })];
   if (!props.snapshot.catalog) {
     return (() => {
-      var _el$74 = _$createElement("box");
-      _$setProp(_el$74, "width", "100%");
-      _$setProp(_el$74, "flexDirection", "column");
-      _$setProp(_el$74, "overflow", "hidden");
-      _$insert(_el$74, statusRows, null);
-      _$insert(_el$74, _$createComponent(Row, {
+      var _el$75 = _$createElement("box");
+      _$setProp(_el$75, "width", "100%");
+      _$setProp(_el$75, "flexDirection", "column");
+      _$setProp(_el$75, "overflow", "hidden");
+      _$insert(_el$75, statusRows, null);
+      _$insert(_el$75, _$createComponent(Row, {
         label: "catalog",
         get value() {
           return formatSkillsCatalogUnavailableMessage(props.snapshot);
@@ -595,22 +623,23 @@ const ReadyRows = props => {
           return props.theme.text;
         }
       }), null);
-      return _el$74;
+      return _el$75;
     })();
   }
   const counts = props.snapshot.catalog.assignmentCounts;
+  const installableNotInstalledCount = getInstallableNotInstalledSkills(props.snapshot).length;
   return (() => {
-    var _el$75 = _$createElement("box"),
-      _el$76 = _$createElement("text");
-    _$insertNode(_el$75, _el$76);
-    _$setProp(_el$75, "width", "100%");
-    _$setProp(_el$75, "flexDirection", "column");
-    _$setProp(_el$75, "overflow", "hidden");
-    _$insert(_el$75, statusRows, _el$76);
-    _$insertNode(_el$76, _$createTextNode(`catalog:`));
-    _$setProp(_el$76, "wrapMode", "none");
+    var _el$76 = _$createElement("box"),
+      _el$77 = _$createElement("text");
+    _$insertNode(_el$76, _el$77);
+    _$setProp(_el$76, "width", "100%");
+    _$setProp(_el$76, "flexDirection", "column");
     _$setProp(_el$76, "overflow", "hidden");
-    _$insert(_el$75, _$createComponent(CatalogBullet, {
+    _$insert(_el$76, statusRows, _el$77);
+    _$insertNode(_el$77, _$createTextNode(`catalog:`));
+    _$setProp(_el$77, "wrapMode", "none");
+    _$setProp(_el$77, "overflow", "hidden");
+    _$insert(_el$76, _$createComponent(CatalogBullet, {
       get value() {
         return `${props.snapshot.catalog.publishedSkillCount} loaded`;
       },
@@ -618,23 +647,37 @@ const ReadyRows = props => {
         return props.theme;
       }
     }), null);
-    _$insert(_el$75, _$createComponent(CatalogBullet, {
+    _$insert(_el$76, _$createComponent(CatalogBullet, {
       get value() {
-        return `${counts.global} global`;
+        return `${counts.global} GLOBAL SCOPE`;
       },
       get theme() {
         return props.theme;
       }
     }), null);
-    _$insert(_el$75, _$createComponent(CatalogBullet, {
+    _$insert(_el$76, _$createComponent(CatalogBullet, {
       get value() {
-        return `${counts.project} workspace`;
+        return `${counts.project} PROJECT SCOPE`;
       },
       get theme() {
         return props.theme;
       }
     }), null);
-    _$insert(_el$75, _$createComponent(CatalogBullet, {
+    _$insert(_el$76, _$createComponent(CatalogBullet, {
+      get value() {
+        return `${counts.user} USER SCOPE`;
+      },
+      get theme() {
+        return props.theme;
+      }
+    }), null);
+    _$insert(_el$76, _$createComponent(CatalogBullet, {
+      value: `${installableNotInstalledCount} installable/not installed`,
+      get theme() {
+        return props.theme;
+      }
+    }), null);
+    _$insert(_el$76, _$createComponent(CatalogBullet, {
       get value() {
         return `${props.snapshot.ignoredPublishedSkills.count} ignored`;
       },
@@ -642,8 +685,8 @@ const ReadyRows = props => {
         return props.theme;
       }
     }), null);
-    _$effect(_$p => _$setProp(_el$76, "fg", props.theme.textMuted, _$p));
-    return _el$75;
+    _$effect(_$p => _$setProp(_el$77, "fg", props.theme.textMuted, _$p));
+    return _el$76;
   })();
 };
 const WizardSkillsDialog = props => {
@@ -686,7 +729,7 @@ const WizardSkillsDialog = props => {
       scopeKey,
       skillSlug: row.skill.skillSlug,
       ignored: !row.ignored,
-      preferenceScope: row.state === 'installed-global' ? 'global' : 'project'
+      preferenceScope: getSkillPreferenceScope(row.skill)
     }).then(() => refreshAfterPreferenceChange(row.ignored ? 'Skill is no longer ignored.' : 'Skill ignored.')).catch(showPreferenceFailure);
   };
   const installSkill = (row, preferenceScope) => {
@@ -695,7 +738,7 @@ const WizardSkillsDialog = props => {
     const scopeKey = currentStatus.snapshot.ignoredPublishedSkills.scopeKey;
     setActionNotice({
       kind: 'pending',
-      message: `Installing skill for ${preferenceScope}…`
+      message: `Installing skill for ${preferenceScope.toUpperCase()} SCOPE…`
     });
     requestRender(props.api);
     void setPublishedSkillInstalled({
@@ -705,7 +748,7 @@ const WizardSkillsDialog = props => {
       skillSlug: row.skill.skillSlug,
       installed: true,
       preferenceScope
-    }).then(() => refreshAfterPreferenceChange(`Skill installed for ${preferenceScope}.`)).catch(showPreferenceFailure);
+    }).then(() => refreshAfterPreferenceChange(`Skill installed for ${preferenceScope.toUpperCase()} SCOPE.`)).catch(showPreferenceFailure);
   };
   const uninstallSkill = row => {
     const currentStatus = props.status();
@@ -722,46 +765,46 @@ const WizardSkillsDialog = props => {
       scopeKey,
       skillSlug: row.skill.skillSlug,
       installed: false,
-      preferenceScope: row.state === 'installed-global' ? 'global' : 'project'
+      preferenceScope: getSkillPreferenceScope(row.skill)
     }).then(() => refreshAfterPreferenceChange('Skill uninstalled.')).catch(showPreferenceFailure);
   };
   createEffect(() => {
     props.api.ui?.dialog?.setSize?.('xlarge');
   });
   return (() => {
-    var _el$78 = _$createElement("box"),
-      _el$79 = _$createElement("box"),
-      _el$80 = _$createElement("text"),
-      _el$81 = _$createElement("b"),
-      _el$83 = _$createElement("box"),
-      _el$84 = _$createElement("text"),
-      _el$86 = _$createElement("box");
-    _$insertNode(_el$78, _el$79);
-    _$insertNode(_el$78, _el$86);
-    _$setProp(_el$78, "width", "100%");
-    _$setProp(_el$78, "flexDirection", "column");
-    _$setProp(_el$78, "paddingLeft", 1);
-    _$setProp(_el$78, "paddingRight", 1);
-    _$setProp(_el$78, "paddingBottom", 1);
+    var _el$79 = _$createElement("box"),
+      _el$80 = _$createElement("box"),
+      _el$81 = _$createElement("text"),
+      _el$82 = _$createElement("b"),
+      _el$84 = _$createElement("box"),
+      _el$85 = _$createElement("text"),
+      _el$87 = _$createElement("box");
     _$insertNode(_el$79, _el$80);
-    _$insertNode(_el$79, _el$83);
+    _$insertNode(_el$79, _el$87);
     _$setProp(_el$79, "width", "100%");
-    _$setProp(_el$79, "flexDirection", "row");
-    _$setProp(_el$79, "justifyContent", "space-between");
-    _$setProp(_el$79, "overflow", "hidden");
+    _$setProp(_el$79, "flexDirection", "column");
+    _$setProp(_el$79, "paddingLeft", 1);
+    _$setProp(_el$79, "paddingRight", 1);
+    _$setProp(_el$79, "paddingBottom", 1);
     _$insertNode(_el$80, _el$81);
-    _$setProp(_el$80, "wrapMode", "none");
+    _$insertNode(_el$80, _el$84);
+    _$setProp(_el$80, "width", "100%");
+    _$setProp(_el$80, "flexDirection", "row");
+    _$setProp(_el$80, "justifyContent", "space-between");
     _$setProp(_el$80, "overflow", "hidden");
-    _$insertNode(_el$81, _$createTextNode(`Wizard Skills`));
-    _$insertNode(_el$83, _el$84);
-    _$setProp(_el$83, "flexShrink", 0);
-    _$insertNode(_el$84, _$createTextNode(`Close`));
-    _$setProp(_el$84, "wrapMode", "none");
-    _$setProp(_el$86, "width", "100%");
-    _$setProp(_el$86, "flexDirection", "column");
-    _$setProp(_el$86, "marginTop", 1);
-    _$setProp(_el$86, "overflow", "hidden");
-    _$insert(_el$86, _$createComponent(WizardSkillsDialogContent, {
+    _$insertNode(_el$81, _el$82);
+    _$setProp(_el$81, "wrapMode", "none");
+    _$setProp(_el$81, "overflow", "hidden");
+    _$insertNode(_el$82, _$createTextNode(`Wizard Skills`));
+    _$insertNode(_el$84, _el$85);
+    _$setProp(_el$84, "flexShrink", 0);
+    _$insertNode(_el$85, _$createTextNode(`Close`));
+    _$setProp(_el$85, "wrapMode", "none");
+    _$setProp(_el$87, "width", "100%");
+    _$setProp(_el$87, "flexDirection", "column");
+    _$setProp(_el$87, "marginTop", 1);
+    _$setProp(_el$87, "overflow", "hidden");
+    _$insert(_el$87, _$createComponent(WizardSkillsDialogContent, {
       get status() {
         return props.status;
       },
@@ -777,16 +820,16 @@ const WizardSkillsDialog = props => {
       var _v$11 = theme().text,
         _v$12 = props.onClose,
         _v$13 = theme().textMuted;
-      _v$11 !== _p$.e && (_p$.e = _$setProp(_el$80, "fg", _v$11, _p$.e));
-      _v$12 !== _p$.t && (_p$.t = _$setProp(_el$83, "onMouseUp", _v$12, _p$.t));
-      _v$13 !== _p$.a && (_p$.a = _$setProp(_el$84, "fg", _v$13, _p$.a));
+      _v$11 !== _p$.e && (_p$.e = _$setProp(_el$81, "fg", _v$11, _p$.e));
+      _v$12 !== _p$.t && (_p$.t = _$setProp(_el$84, "onMouseUp", _v$12, _p$.t));
+      _v$13 !== _p$.a && (_p$.a = _$setProp(_el$85, "fg", _v$13, _p$.a));
       return _p$;
     }, {
       e: undefined,
       t: undefined,
       a: undefined
     });
-    return _el$78;
+    return _el$79;
   })();
 };
 const openWizardSkillsDialog = (api, status, refreshStatus) => {