From 874b7c7ffb1e85d4a5fbee0ee0e0ac27a565ffd0 Mon Sep 17 00:00:00 2001
From: mirivlad <mirvtop@yandex.ru>
Date: Mon, 29 Jun 2026 04:24:15 +0800
Subject: [PATCH] feat: add workspace header search slot

---
 .../src/lib/plugin-host/VerstakPluginAPI.js   |  9 +++
 .../lib/plugin-manager/PluginManager.svelte   |  9 ++-
 frontend/src/lib/shell/StatusBar.svelte       | 23 +++++-
 frontend/src/lib/shell/WorkspaceHost.svelte   | 78 ++++++++++++++++++-
 frontend/src/lib/test/wails-mock.js           |  4 +-
 frontend/tests/shell-source-contract-test.mjs | 57 ++++++++++++++
 6 files changed, 168 insertions(+), 12 deletions(-)
 create mode 100644 frontend/tests/shell-source-contract-test.mjs

diff --git a/frontend/src/lib/plugin-host/VerstakPluginAPI.js b/frontend/src/lib/plugin-host/VerstakPluginAPI.js
index ad695d8..0d67691 100644
--- a/frontend/src/lib/plugin-host/VerstakPluginAPI.js
+++ b/frontend/src/lib/plugin-host/VerstakPluginAPI.js
@@ -144,6 +144,15 @@ export function createPluginAPI(pluginId) {
   return {
     pluginId: pluginId,
 
+    ui: {
+      openSettings: function(panelId) {
+        assertActive('ui.openSettings');
+        window.dispatchEvent(new CustomEvent('verstak:open-settings', {
+          detail: { pluginId: pluginId, panelId: panelId || '' }
+        }));
+      }
+    },
+
     capabilities: {
       has: async function(capId) {
         const info = await callBackend(pluginId, 'capabilities.has(' + capId + ')', function() {
diff --git a/frontend/src/lib/plugin-manager/PluginManager.svelte b/frontend/src/lib/plugin-manager/PluginManager.svelte
index 4ff9283..df0d41a 100644
--- a/frontend/src/lib/plugin-manager/PluginManager.svelte
+++ b/frontend/src/lib/plugin-manager/PluginManager.svelte
@@ -30,10 +30,10 @@
   export let activeSettingsPluginId = '';
   export let activeSettingsPanelId = '';
 
-  $: if (activeSettingsPluginId && activeSettingsPanelId) {
-    const key = `${activeSettingsPluginId}:${activeSettingsPanelId}`;
-    if (key !== lastOpenedKey) {
-      lastOpenedKey = key;
+  $: if (activeSettingsPluginId) {
+    const settingsPanelCount = (contributions.settingsPanels || []).length;
+    const key = `${activeSettingsPluginId}:${activeSettingsPanelId || '*'}`;
+    if (key !== lastOpenedKey || settingsPanelCount === 0) {
       openSettingsFromProps(activeSettingsPluginId, activeSettingsPanelId);
     }
   }
@@ -71,6 +71,7 @@
   async function openSettingsFromProps(pluginId, panelId) {
     const panel = (contributions.settingsPanels || []).find(sp => sp.pluginId === pluginId && (!panelId || sp.id === panelId));
     if (panel) {
+      lastOpenedKey = `${pluginId}:${panelId || '*'}`;
       settingsPanel = panel;
       settingsPluginId = pluginId;
       settingsError = null;
diff --git a/frontend/src/lib/shell/StatusBar.svelte b/frontend/src/lib/shell/StatusBar.svelte
index e7682ec..df2531a 100644
--- a/frontend/src/lib/shell/StatusBar.svelte
+++ b/frontend/src/lib/shell/StatusBar.svelte
@@ -1,6 +1,7 @@
 <script>
   import { onDestroy, onMount } from 'svelte';
   import * as App from '../../../wailsjs/go/api/App';
+  import PluginBundleHost from '../plugin-host/PluginBundleHost.svelte';
   import Icon from '../ui/Icon.svelte';
 
   let items = [];
@@ -65,6 +66,10 @@
     settingsOpen = false;
   }
 
+  function statusItemProps(item) {
+    return { statusBarItem: item };
+  }
+
   onMount(() => {
     loadStatusBar();
     window.addEventListener('verstak:plugins-changed', loadStatusBar);
@@ -92,21 +97,33 @@
     </span>
     {#each leftItems as item}
       <span class="status-bar-item" data-status-item-id={item.id} title={item.pluginId}>
-        {item.label || item.id}
+        {#if item.handler}
+          <PluginBundleHost pluginId={item.pluginId} componentId={item.handler} componentProps={statusItemProps(item)} />
+        {:else}
+          {item.label || item.id}
+        {/if}
       </span>
     {/each}
   </div>
   <div class="status-bar-group status-center">
     {#each centerItems as item}
       <span class="status-bar-item" data-status-item-id={item.id} title={item.pluginId}>
-        {item.label || item.id}
+        {#if item.handler}
+          <PluginBundleHost pluginId={item.pluginId} componentId={item.handler} componentProps={statusItemProps(item)} />
+        {:else}
+          {item.label || item.id}
+        {/if}
       </span>
     {/each}
   </div>
   <div class="status-bar-group status-right">
     {#each rightItems as item}
       <span class="status-bar-item" data-status-item-id={item.id} title={item.pluginId}>
-        {item.label || item.id}
+        {#if item.handler}
+          <PluginBundleHost pluginId={item.pluginId} componentId={item.handler} componentProps={statusItemProps(item)} />
+        {:else}
+          {item.label || item.id}
+        {/if}
       </span>
     {/each}
     <div class="settings-menu-wrap">
diff --git a/frontend/src/lib/shell/WorkspaceHost.svelte b/frontend/src/lib/shell/WorkspaceHost.svelte
index 538a417..c6b2da8 100644
--- a/frontend/src/lib/shell/WorkspaceHost.svelte
+++ b/frontend/src/lib/shell/WorkspaceHost.svelte
@@ -10,6 +10,15 @@
   let workspaceTools = [];
   let activeToolKey = '';
 
+  const toolOrder = new Map([
+    ['notes', 10],
+    ['files', 20],
+    ['activity', 40],
+    ['browser', 50],
+    ['inbox', 50],
+    ['search', 90],
+  ]);
+
   $: selectedWorkspace = nodes.find(n => n.id === selectedWorkspaceName || n.name === selectedWorkspaceName || n.rootPath === selectedWorkspaceName) || null;
   $: workspaceRootPath = selectedWorkspace?.rootPath || selectedWorkspace?.name || selectedWorkspace?.id || '';
   $: workspaceTitle = selectedWorkspace?.title || selectedWorkspace?.name || selectedWorkspace?.id || selectedWorkspaceName;
@@ -24,6 +33,22 @@
     return `${tool?.pluginId || ''}:${tool?.id || ''}`;
   }
 
+  function toolRank(tool) {
+    const text = `${tool?.title || ''} ${tool?.id || ''} ${tool?.pluginId || ''}`.toLowerCase();
+    for (const [needle, rank] of toolOrder.entries()) {
+      if (text.includes(needle)) return rank;
+    }
+    return 1000;
+  }
+
+  function sortWorkspaceTools(tools) {
+    return [...tools].sort((a, b) => {
+      const rankDiff = toolRank(a) - toolRank(b);
+      if (rankDiff !== 0) return rankDiff;
+      return String(a.title || a.id).localeCompare(String(b.title || b.id));
+    });
+  }
+
   async function loadTools() {
     try {
       const [c, p] = await Promise.all([
@@ -37,7 +62,7 @@
         plugins.filter(pl => pl.enabled && (pl.status === 'loaded' || pl.status === 'degraded')).map(pl => pl.manifest?.id)
       );
 
-      workspaceTools = (contributions.workspaceItems || []).filter(tool => enabledIds.has(tool.pluginId));
+      workspaceTools = sortWorkspaceTools((contributions.workspaceItems || []).filter(tool => enabledIds.has(tool.pluginId)));
     } catch (e) {
       console.error('[WorkspaceHost] loadTools error:', e);
     }
@@ -47,8 +72,13 @@
 <div class="workspace-host">
   {#if selectedWorkspace}
     <div class="workspace-header">
-      <span class="workspace-title">{workspaceTitle}</span>
-      <span class="workspace-type">{workspaceType}</span>
+      <div class="workspace-title-group">
+        <span class="workspace-title">{workspaceTitle}</span>
+        <span class="workspace-type">{workspaceType}</span>
+      </div>
+      <div class="workspace-search" data-workspace-search>
+        <input type="search" placeholder="Search workspace" aria-label="Search workspace" />
+      </div>
     </div>
 
     {#if workspaceTools.length > 0}
@@ -101,12 +131,20 @@
   .workspace-header {
     display: flex;
     align-items: center;
+    justify-content: space-between;
     gap: 0.75rem;
     padding: 0.75rem 1rem;
     border-bottom: 1px solid #16213e;
     flex-shrink: 0;
   }
 
+  .workspace-title-group {
+    min-width: 0;
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+  }
+
   .workspace-title {
     color: #e0e0f0;
     font-size: 0.95rem;
@@ -121,6 +159,40 @@
     background: #1a2a3a;
   }
 
+  .workspace-search {
+    flex: 0 1 22rem;
+    min-width: 12rem;
+  }
+
+  .workspace-search input {
+    width: 100%;
+    height: 2rem;
+    padding: 0.25rem 0.55rem;
+    border: 1px solid #283653;
+    border-radius: 4px;
+    background: #101626;
+    color: #e0e0f0;
+    font: inherit;
+    font-size: 0.82rem;
+    outline: none;
+  }
+
+  .workspace-search input:focus {
+    border-color: #4ecca3;
+  }
+
+  @media (max-width: 720px) {
+    .workspace-header {
+      align-items: stretch;
+      flex-direction: column;
+    }
+
+    .workspace-search {
+      flex-basis: auto;
+      min-width: 0;
+    }
+  }
+
   .workspace-tabs {
     display: flex;
     align-items: center;
diff --git a/frontend/src/lib/test/wails-mock.js b/frontend/src/lib/test/wails-mock.js
index c131257..bf500b1 100644
--- a/frontend/src/lib/test/wails-mock.js
+++ b/frontend/src/lib/test/wails-mock.js
@@ -152,7 +152,7 @@
         frontend: { entry: 'frontend/dist/index.js' },
         contributes: {
           settingsPanels: [{ id: 'verstak.sync.settings', title: 'Sync', component: 'SyncSettings' }],
-          statusBarItems: [{ id: 'verstak.sync.status', label: 'Sync', position: 'right' }]
+          statusBarItems: [{ id: 'verstak.sync.status', label: 'Sync', position: 'right', handler: 'SyncStatusBar' }]
         }
       },
       rootPath: '/tmp/verstak-test/plugins/sync',
@@ -1703,7 +1703,7 @@
             frontend: { entry: 'frontend/dist/index.js' },
             contributes: {
               settingsPanels: [{ id: 'verstak.sync.settings', title: 'Sync', component: 'SyncSettings' }],
-              statusBarItems: [{ id: 'verstak.sync.status', label: 'Sync', position: 'right' }]
+              statusBarItems: [{ id: 'verstak.sync.status', label: 'Sync', position: 'right', handler: 'SyncStatusBar' }]
             }
           },
           rootPath: '/tmp/verstak-test/plugins/sync',
diff --git a/frontend/tests/shell-source-contract-test.mjs b/frontend/tests/shell-source-contract-test.mjs
new file mode 100644
index 0000000..209db7d
--- /dev/null
+++ b/frontend/tests/shell-source-contract-test.mjs
@@ -0,0 +1,57 @@
+import fs from 'node:fs';
+import path from 'node:path';
+
+const root = path.resolve('.');
+
+function read(relativePath) {
+  return fs.readFileSync(path.join(root, relativePath), 'utf8');
+}
+
+function assertIncludes(source, needle, message) {
+  if (!source.includes(needle)) {
+    throw new Error(message);
+  }
+}
+
+const workspaceHost = read('frontend/src/lib/shell/WorkspaceHost.svelte');
+const statusBar = read('frontend/src/lib/shell/StatusBar.svelte');
+const pluginManager = read('frontend/src/lib/plugin-manager/PluginManager.svelte');
+const syncManifest = JSON.parse(read('../verstak-official-plugins/plugins/sync/plugin.json'));
+
+assertIncludes(
+  workspaceHost,
+  'data-workspace-search',
+  'WorkspaceHost should expose a stable workspace header search slot'
+);
+assertIncludes(
+  workspaceHost,
+  'toolOrder',
+  'WorkspaceHost should define usage-based workspace tool ordering'
+);
+assertIncludes(
+  workspaceHost,
+  'sortWorkspaceTools',
+  'WorkspaceHost should sort workspace tools by expected usage'
+);
+
+assertIncludes(
+  statusBar,
+  "import PluginBundleHost from '../plugin-host/PluginBundleHost.svelte';",
+  'StatusBar should mount plugin-provided status bar components'
+);
+assertIncludes(
+  statusBar,
+  'componentId={item.handler}',
+  'StatusBar should use statusBarItems.handler as the component id'
+);
+
+const syncStatus = syncManifest.contributes.statusBarItems.find((item) => item.id === 'verstak.sync.status');
+if (!syncStatus || syncStatus.handler !== 'SyncStatusBar') {
+  throw new Error('Sync statusBarItem should declare handler "SyncStatusBar"');
+}
+
+if (/lastOpenedKey\s*=\s*key;\s*openSettingsFromProps\(activeSettingsPluginId,\s*activeSettingsPanelId\)/s.test(pluginManager)) {
+  throw new Error('PluginManager should not mark settings panel as opened before resolving contributions');
+}
+
+console.log('shell source contract smoke passed');