fix(dsh): center align dock panfix(dsh): center align dock panel above input bar and resolve sessionId from session propel above input bar and resolve session…

plugins/dsh/client.js

@@ -48,6 +48,13 @@ window.__ModuleLoader__.load({
         '--msr-success:var(--dsw-alias-state-success-primary,#22c55e);' +
         '--msr-warn:var(--dsw-alias-state-warn-primary,#f59e0b);' +
         '--msr-error:var(--dsw-alias-state-error-primary,#ef4444);' +
+        'box-sizing:border-box;' +
+        'width:calc(100% - var(--dsh-composer-side-clearance, 16px) * 2 - var(--dsh-composer-dock-inset, 8px) * 4);' +
+        'max-width:calc(var(--dsh-composer-card-max-width, 780px) - var(--dsh-composer-dock-inset, 8px) * 4);' +
+        'margin:0 auto;' +
+        'flex:none;' +
+        'display:flex;' +
+        'flex-direction:column;' +
         'font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;' +
       '}' +
       '.msr-bar{display:flex;align-items:center;gap:8px;width:100%;padding:6px 10px;box-sizing:border-box;' +
@@ -92,7 +99,7 @@ window.__ModuleLoader__.load({
       '.msr-toast.ok{border-color:color-mix(in srgb,var(--msr-success) 45%,transparent);color:var(--msr-success);}' +
       '.msr-toast.warn{border-color:color-mix(in srgb,var(--msr-warn) 45%,transparent);color:var(--msr-warn);}' +
       '.msr-toast.err{border-color:color-mix(in srgb,var(--msr-error) 45%,transparent);color:var(--msr-error);}' +
-      '.msr-capsule{display:inline-flex;align-items:center;gap:7px;padding:3px 11px;box-sizing:border-box;' +
+      '.msr-capsule{align-self:flex-start;display:inline-flex;align-items:center;gap:7px;padding:3px 11px;box-sizing:border-box;' +
         'border:1px solid var(--msr-border);border-radius:999px;background:var(--msr-bg);color:var(--msr-text);' +
         'font-size:12px;font-weight:600;cursor:pointer;line-height:1.6;white-space:nowrap;transition:border-color .12s ease;}' +
       '.msr-capsule:hover{border-color:var(--msr-brand);}' +
@@ -664,9 +671,10 @@ window.__ModuleLoader__.load({
       ensureCss()
       slots.inject('conversation.input.dock', function () {
         return slots.register(
-          { name: 'conversation.input.dock', id: 'skill-review' },
+          { name: 'conversation.input.dock', id: 'skill-review', order: 15 },
           function (props) {
-            return React.createElement(SkillReviewPanel, { sessionId: props.sessionId })
+            var sId = props.sessionId || (props.session && props.session.sessionId)
+            return React.createElement(SkillReviewPanel, { sessionId: sId })
           },
         )
       })

plugins/dsh/tests/client.test.js

@@ -8,6 +8,7 @@ function createHarness() {
   let stateValues = []
   let stateSetters = []
   const refs = []
+  const effects = []
   let moduleDefinition
   let dockRenderer
 
@@ -30,8 +31,9 @@ function createHarness() {
       cursor++
       return fn
     },
-    useEffect() {
+    useEffect(fn) {
       cursor++
+      if (typeof fn === 'function') effects.push(fn)
     },
     useRef(initial) {
       const index = cursor++
@@ -78,10 +80,20 @@ function createHarness() {
     typeof element.type === 'function' && element.type.name === 'MemsearchBrowser'
   ))
   assert.ok(browserElement, 'MemsearchBrowser component is reachable from the expanded panel')
+  effects.length = 0
+
+  function flushEffects() {
+    while (effects.length > 0) {
+      const fn = effects.shift()
+      fn()
+    }
+  }
 
   return {
     Browser: browserElement.type,
     context,
+    dockRenderer,
+    flushEffects,
     renderWith,
   }
 }
@@ -178,3 +190,30 @@ test('an older file response cannot replace a newer preview after rerender', asy
   assert.equal(previewUpdates.at(-1).text, 'SECOND')
   assert.ok(!previewUpdates.some((update) => update.text === 'FIRST'))
 })
+
+test('dock renderer resolves sessionId from session prop and requests candidates', async () => {
+  const { dockRenderer, context, flushEffects, renderWith } = createHarness()
+  const fetchedUrls = []
+  context.fetch = (url) => {
+    fetchedUrls.push(url)
+    return Promise.resolve({
+      json: async () => ({ candidates: [] }),
+    })
+  }
+
+  // Resolves sessionId from props.session when props.sessionId is absent
+  const panelElement = dockRenderer({ session: { sessionId: 'session-2' } })
+  assert.equal(panelElement.props.sessionId, 'session-2', 'dock element receives sessionId from session object')
+
+  renderWith([[], false, true, {}, null, null])
+  panelElement.type(panelElement.props)
+  flushEffects()
+  await flushPromises()
+
+  assert.equal(fetchedUrls.length, 1)
+  assert.equal(
+    fetchedUrls[0],
+    '/memsearch-dsh/skill-candidates?sessionId=session-2',
+    'candidates are fetched using session-2 from props.session',
+  )
+})