@leeoohoo/ui-apps-devkit 0.1.5 → 0.1.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leeoohoo/ui-apps-devkit",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "description": "ChatOS UI Apps DevKit (CLI + templates + sandbox) for building installable ChatOS UI Apps plugins.",
   "license": "MIT",
   "type": "module",

package/src/sandbox/server.js

@@ -628,6 +628,16 @@ function htmlPage() {
       }
       #container { flex: 1 1 auto; min-height:0; overflow:hidden; }
       #containerInner { height:100%; overflow:auto; }
+      body[data-surface='compact'] #headerSlot {
+        width: 50vw;
+        align-self: flex-end;
+        border-left: 1px solid var(--ds-panel-border);
+      }
+      body[data-surface='compact'] #container {
+        width: 50vw;
+        align-self: flex-end;
+        border-left: 1px solid var(--ds-panel-border);
+      }
       .muted { opacity: 0.7; font-size: 12px; }
       .bar { display:flex; gap:10px; align-items:center; justify-content:space-between; }
       .btn {
@@ -739,16 +749,6 @@ function htmlPage() {
         box-shadow: 0 14px 40px rgba(0,0,0,0.16);
         z-index: 12;
       }
-      #mcpPanel[data-mode='half'] {
-        right: 0;
-        top: 72px;
-        width: 50vw;
-        height: calc(100vh - 84px);
-        max-height: none;
-        border-right: none;
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-      }
       #mcpPanelHeader {
         padding: 10px 12px;
         display:flex;
@@ -805,7 +805,7 @@ function htmlPage() {
             <div id="sandboxContext" class="muted"></div>
             <button id="btnLlmConfig" class="btn" type="button">AI Config</button>
             <button id="btnMcpTest" class="btn" type="button">MCP Test</button>
-            <button id="btnMcpHalf" class="btn" type="button">Half Test</button>
+            <button id="btnHalfApp" class="btn" type="button">半屏</button>
             <button id="btnInspectorToggle" class="btn" type="button">Inspect</button>
             <button id="btnReload" class="btn" type="button">Reload</button>
           </div>
@@ -961,7 +961,7 @@ const llmModelId = $('#llmModelId');
 const llmStatus = $('#llmStatus');
 const llmKeyStatus = $('#llmKeyStatus');
 const btnMcpTest = $('#btnMcpTest');
-const btnMcpHalf = $('#btnMcpHalf');
+const btnHalfApp = $('#btnHalfApp');
 const mcpPanel = $('#mcpPanel');
 const btnMcpClose = $('#btnMcpClose');
 const btnMcpClear = $('#btnMcpClear');
@@ -1033,6 +1033,34 @@ const updateContextStatus = () => {
   sandboxContext.textContent = __SANDBOX__.pluginId + ':' + __SANDBOX__.appId;
 };
 
+const entryCompactUrl = __SANDBOX__.entryCompactUrl || '';
+const hasCompactEntry = Boolean(entryCompactUrl);
+let currentSurface = 'full';
+
+const updateSurfaceState = (surface) => {
+  currentSurface = surface === 'compact' ? 'compact' : 'full';
+  document.body.dataset.surface = currentSurface;
+  if (btnHalfApp) {
+    if (!hasCompactEntry) {
+      btnHalfApp.disabled = true;
+      btnHalfApp.title = 'plugin.json 未配置 entry.compact.path';
+      delete btnHalfApp.dataset.active;
+    } else {
+      btnHalfApp.disabled = false;
+      btnHalfApp.title = '';
+      btnHalfApp.dataset.active = currentSurface === 'compact' ? '1' : '0';
+    }
+  }
+  if (host?.ui) host.ui.surface = currentSurface;
+};
+
+const toggleCompactSurface = () => {
+  if (!hasCompactEntry) return;
+  updateSurfaceState(currentSurface === 'compact' ? 'full' : 'compact');
+  loadAndMount().catch(renderError);
+  updateInspectorIfOpen();
+};
+
 const isInspectorOpen = () => sandboxInspector && sandboxInspector.style.display === 'flex';
 const isLlmPanelOpen = () => llmPanel && llmPanel.style.display === 'flex';
 const isMcpPanelOpen = () => mcpPanel && mcpPanel.style.display === 'flex';
@@ -1140,13 +1168,8 @@ const refreshMcpConfigHint = async () => {
   }
 };
 
-const setMcpPanelOpen = (open, mode) => {
+const setMcpPanelOpen = (open) => {
   if (!mcpPanel) return;
-  if (mode) {
-    mcpPanel.dataset.mode = mode;
-  } else {
-    delete mcpPanel.dataset.mode;
-  }
   mcpPanel.style.display = open ? 'flex' : 'none';
   mcpPanel.setAttribute('aria-hidden', open ? 'false' : 'true');
   if (open) {
@@ -1155,16 +1178,6 @@ const setMcpPanelOpen = (open, mode) => {
   }
 };
 
-const toggleMcpPanel = (mode) => {
-  if (!mcpPanel) return;
-  const currentMode = mcpPanel.dataset.mode || 'panel';
-  if (isMcpPanelOpen() && currentMode === mode) {
-    setMcpPanelOpen(false);
-    return;
-  }
-  setMcpPanelOpen(true, mode);
-};
-
 const runMcpTest = async () => {
   const sendBtn = btnMcpSend;
   try {
@@ -1226,7 +1239,13 @@ const collectTokens = () => {
 const readHostContext = () => {
   if (!inspectorEnabled) return null;
   if (typeof host?.context?.get === 'function') return host.context.get();
-  return { pluginId: __SANDBOX__.pluginId, appId: __SANDBOX__.appId, theme: currentTheme, bridge: { enabled: true } };
+  return {
+    pluginId: __SANDBOX__.pluginId,
+    appId: __SANDBOX__.appId,
+    theme: currentTheme,
+    surface: currentSurface,
+    bridge: { enabled: true },
+  };
 };
 
 const readThemeInfo = () => ({
@@ -1305,8 +1324,8 @@ if (btnLlmClose) btnLlmClose.addEventListener('click', () => setLlmPanelOpen(fal
 if (btnLlmRefresh) btnLlmRefresh.addEventListener('click', () => refreshLlmConfig());
 if (btnLlmSave) btnLlmSave.addEventListener('click', () => saveLlmConfig());
 if (btnLlmClear) btnLlmClear.addEventListener('click', () => saveLlmConfig({ clearKey: true }));
-if (btnMcpTest) btnMcpTest.addEventListener('click', () => toggleMcpPanel('panel'));
-if (btnMcpHalf) btnMcpHalf.addEventListener('click', () => toggleMcpPanel('half'));
+if (btnMcpTest) btnMcpTest.addEventListener('click', () => setMcpPanelOpen(!isMcpPanelOpen()));
+if (btnHalfApp) btnHalfApp.addEventListener('click', () => toggleCompactSurface());
 if (btnMcpClose) btnMcpClose.addEventListener('click', () => setMcpPanelOpen(false));
 if (btnMcpClear)
   btnMcpClear.addEventListener('click', () => {
@@ -1499,7 +1518,15 @@ const getTheme = () => currentTheme || resolveTheme();
 
 const host = {
   bridge: { enabled: true },
-  context: { get: () => ({ pluginId: __SANDBOX__.pluginId, appId: __SANDBOX__.appId, theme: getTheme(), bridge: { enabled: true } }) },
+  context: {
+    get: () => ({
+      pluginId: __SANDBOX__.pluginId,
+      appId: __SANDBOX__.appId,
+      theme: getTheme(),
+      surface: currentSurface,
+      bridge: { enabled: true },
+    }),
+  },
   theme: {
     get: getTheme,
     onChange: (listener) => {
@@ -1552,7 +1579,7 @@ const host = {
     close: () => (setPanelOpen(false), { ok: true }),
     toggle: () => (setPanelOpen(panel.style.display !== 'flex'), { ok: true }),
   },
-  ui: { navigate: (menu) => ({ ok: true, menu }) },
+  ui: { navigate: (menu) => ({ ok: true, menu }), surface: 'full' },
   chat: (() => {
     const clone = (v) => JSON.parse(JSON.stringify(v));
 
@@ -1807,6 +1834,8 @@ const host = {
   })(),
 };
 
+updateSurfaceState('full');
+
 inspectorEnabled = true;
 updateInspector();
 
@@ -1816,7 +1845,7 @@ async function loadAndMount() {
   if (typeof dispose === 'function') { try { await dispose(); } catch {} dispose = null; }
   container.textContent = '';
 
-  const entryUrl = __SANDBOX__.entryUrl;
+  const entryUrl = currentSurface === 'compact' && entryCompactUrl ? entryCompactUrl : __SANDBOX__.entryUrl;
   const mod = await import(entryUrl + (entryUrl.includes('?') ? '&' : '?') + 't=' + Date.now());
   const mount = mod?.mount || mod?.default?.mount || (typeof mod?.default === 'function' ? mod.default : null);
   if (typeof mount !== 'function') throw new Error('module entry must export mount()');
@@ -1879,7 +1908,13 @@ export async function startSandboxServer({ pluginDir, port = 4399, appId = '' })
   const entryAbs = resolveInsideDir(pluginDir, entryRel);
   if (!isFile(entryAbs)) throw new Error(`module entry not found: ${entryRel}`);
 
+  const entryCompactRel = String(app?.entry?.compact?.path || '').trim();
   const entryUrl = `/plugin/${encodeURIComponent(entryRel).replaceAll('%2F', '/')}`;
+  const entryCompactAbs = entryCompactRel ? resolveInsideDir(pluginDir, entryCompactRel) : '';
+  const entryCompactUrl =
+    entryCompactAbs && isFile(entryCompactAbs)
+      ? `/plugin/${encodeURIComponent(entryCompactRel).replaceAll('%2F', '/')}`
+      : '';
 
   let backendInstance = null;
   let backendFactory = null;
@@ -2193,6 +2228,7 @@ export async function startSandboxServer({ pluginDir, port = 4399, appId = '' })
           .replaceAll('__SANDBOX__.pluginId', JSON.stringify(ctxBase.pluginId))
           .replaceAll('__SANDBOX__.appId', JSON.stringify(effectiveAppId))
           .replaceAll('__SANDBOX__.entryUrl', JSON.stringify(entryUrl))
+          .replaceAll('__SANDBOX__.entryCompactUrl', JSON.stringify(entryCompactUrl))
           .replaceAll('__SANDBOX__.registryApp', JSON.stringify({ plugin: { id: ctxBase.pluginId }, id: effectiveAppId, entry: { type: 'module', url: entryUrl } }))
           .replaceAll('__SANDBOX__.tokenNames', JSON.stringify(tokenNames))
           .replaceAll('__SANDBOX__.paths', JSON.stringify(sandboxPaths));