feat(skill): implement cross-WebUI skill registry synchronization to ensure up-to-date skill availability in DaoAgentUI

Author: moonrailgun

src/dao/browser/ui/webui/resources/agent/dao_agent_app.ts

@@ -17,6 +17,7 @@ import './dao_settings_view.js';
 import type {DaoChatView} from './dao_chat_view.js';
 import type {DaoSettingsView} from './dao_settings_view.js';
 import {initI18n} from './i18n/i18n.js';
+import {refreshSkillRegistryIfStale} from './skill_registry.js';
 
 // Kick off locale loading at module import time so the dictionary is in
 // place before any t() call from a child view's render. Fire-and-forget:
@@ -62,6 +63,10 @@ export class DaoAgentApp extends CrLitElement {
     document.addEventListener('visibilitychange', () => {
       if (document.visibilityState === 'visible') {
         setTimeout(() => this.getChatView_()?.focusInput(), 100);
+        // Cross-WebUI sync: skills created in the dao://skills tab while
+        // this sidebar was hidden won't have propagated to our cache.
+        // Throttled — no-op when the registry is already fresh.
+        void refreshSkillRegistryIfStale();
       }
     });
     if (document.visibilityState === 'visible') {

src/dao/browser/ui/webui/resources/agent/dao_chat_view.ts

@@ -33,7 +33,7 @@ import {buildAgentTools} from './pi_tool_adapter.js';
 import {toolConfigChannel} from './tool_catalog.js';
 import './dao_chat_history_panel.js';
 import {ensurePiAppStorage, syncActiveKeyToPiStorage} from './pi_app_storage.js';
-import {getAllSkills, initSkillRegistry, loadSkillInstructions, type SkillRegistryEntry} from './skill_registry.js';
+import {getAllSkills, initSkillRegistry, loadSkillInstructions, refreshSkillRegistry, refreshSkillRegistryIfStale, type SkillRegistryEntry} from './skill_registry.js';
 import {t} from './i18n/i18n.js';
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 import * as pi from './vendor/pi_runtime_bundle.js';
@@ -1870,6 +1870,19 @@ export class DaoChatView extends CrLitElement {
       this.hideSkillPicker_();
       return;
     }
+    // Cross-WebUI sync: skills created/deleted in the dao://skills tab
+    // don't update this page's module-local registry cache. Refresh on
+    // demand (throttled to avoid spamming on every keystroke) and re-run
+    // the picker once new data lands so newly-added skills show up
+    // without a sidebar reload.
+    void refreshSkillRegistryIfStale().then((refreshed) => {
+      if (!refreshed) return;
+      const ta2 = this.composerTextarea_;
+      if (!ta2) return;
+      if (/^\/([A-Za-z0-9_-]*)$/.test(ta2.value)) {
+        this.updateSkillPicker_();
+      }
+    });
     this.skillPickerQuery_ = (m[1] || '').toLowerCase();
     const all = getAllSkills();
     const q = this.skillPickerQuery_;
@@ -2002,8 +2015,20 @@ export class DaoChatView extends CrLitElement {
   // Warm the instructions cache before the message hits state.messages so
   // convertToLlm can splice the body in synchronously on the next turn.
   private async ensureSkillLoadedFromText_(text: string): Promise<void> {
-    const parsed = this.parseSkillPrefix_(text);
-    if (!parsed) return;
+    let parsed = this.parseSkillPrefix_(text);
+    if (!parsed) {
+      // The text looks like `/<id> ...` but the id wasn't in our cache.
+      // This is the "user created a skill in dao://skills and typed
+      // /id fast enough to skip the picker" path. Bypass the staleness
+      // throttle (a recent refresh from picker-open could still be from
+      // before the skill was created in the other tab) and force one
+      // fresh fetch before declaring the prefix unknown.
+      if (/^\/([A-Za-z0-9_-]+)(?:\s|$)/.test(text.trim())) {
+        await refreshSkillRegistry();
+        parsed = this.parseSkillPrefix_(text);
+      }
+      if (!parsed) return;
+    }
     if (this.skillInstructionsCache_.has(parsed.skillId)) return;
     const content = await loadSkillInstructions(parsed.skillId);
     if (content && content.instructions) {

src/dao/browser/ui/webui/resources/agent/skill_registry.ts

@@ -21,20 +21,58 @@ export interface SkillContent {
 }
 
 // ---- Cached Registry ----
+//
+// The registry is module-local and therefore per-WebUI: dao://agent and
+// dao://skills each load their own copy of this file with its own
+// `cachedRegistry`. That means `saveUserSkill` writing to disk from one
+// page does NOT propagate to the other page's cache. Callers in
+// dao://agent must call `refreshSkillRegistryIfStale` (or
+// `refreshSkillRegistry`) on UI signals where the registry might have
+// changed in another tab — most importantly when the slash picker is
+// opened. Without that, a skill created in dao://skills won't be
+// invokable as `/<id>` until the sidebar reloads.
 
 let cachedRegistry: SkillRegistryEntry[] = [];
+let lastRefreshAt_ = 0;
+let inflightRefresh_: Promise<void>|null = null;
 
-export async function initSkillRegistry(): Promise<void> {
-  try {
-    const result = await callNative('getSkillRegistry') as SkillRegistryEntry[];
-    cachedRegistry = result || [];
-  } catch (_) {
-    cachedRegistry = [];
-  }
+export function initSkillRegistry(): Promise<void> {
+  if (inflightRefresh_) return inflightRefresh_;
+  inflightRefresh_ = (async () => {
+    try {
+      const result =
+          await callNative('getSkillRegistry') as SkillRegistryEntry[];
+      cachedRegistry = result || [];
+    } catch (_) {
+      cachedRegistry = [];
+    } finally {
+      lastRefreshAt_ = Date.now();
+      inflightRefresh_ = null;
+    }
+  })();
+  return inflightRefresh_;
+}
+
+export function refreshSkillRegistry(): Promise<void> {
+  return initSkillRegistry();
 }
 
-export async function refreshSkillRegistry(): Promise<void> {
+// On-demand cross-WebUI sync. Refreshes the cache from disk only when the
+// last fetch was older than `maxAgeMs`, or when another refresh is
+// already in flight (in which case it just awaits it). Returns true when
+// a real refresh actually ran (so the caller knows the cache may have
+// changed and any dependent UI should re-render); false when throttled.
+export async function refreshSkillRegistryIfStale(
+    maxAgeMs = 1500): Promise<boolean> {
+  if (inflightRefresh_) {
+    await inflightRefresh_;
+    return true;
+  }
+  if (lastRefreshAt_ !== 0 && Date.now() - lastRefreshAt_ < maxAgeMs) {
+    return false;
+  }
   await initSkillRegistry();
+  return true;
 }
 
 export function getAllSkills(): SkillRegistryEntry[] {