feat(panel): show scroll-to-bottom control when not at latest

extensions/dsh-browser/src/panel/scroll.ts

@@ -0,0 +1,13 @@
+/**
+ * Scroll helpers for the conversation pane.
+ *
+ * @module
+ */
+
+/** True when the scrollport is within `threshold` px of its bottom edge. */
+export function isNearScrollBottom(
+  element: Pick<HTMLElement, 'scrollTop' | 'scrollHeight' | 'clientHeight'>,
+  threshold = 48,
+): boolean {
+  return element.scrollHeight - element.scrollTop - element.clientHeight <= threshold
+}

extensions/dsh-browser/src/panel/strings.ts

@@ -181,6 +181,8 @@ export interface PanelCopy {
     disconnectedPlaceholder: string
     composerHelp: string
     sendMessage: string
+    selectModel: string
+    noModelsConfigured: string
     stopTurn: string
     stoppingTurn: string
     addImages: string
@@ -207,6 +209,7 @@ export interface PanelCopy {
     selectionAttached: string
     selectionTruncated: string
     removeSelection: string
+    scrollToBottom: string
   }
 }
 
@@ -411,6 +414,8 @@ const EN: PanelCopy = {
     disconnectedPlaceholder: 'Connect to dsh to get started',
     composerHelp: 'Enter to send · Shift + Enter for a new line',
     sendMessage: 'Send message',
+    selectModel: 'Model',
+    noModelsConfigured: 'No models yet — Host has no routable models.',
     stopTurn: 'Stop generating',
     stoppingTurn: 'Stopping…',
     addImages: 'Add images',
@@ -437,6 +442,7 @@ const EN: PanelCopy = {
     selectionAttached: 'Selected text',
     selectionTruncated: '(truncated)',
     removeSelection: 'Remove the selected text',
+    scrollToBottom: 'Scroll to latest',
   },
 }
 
@@ -641,6 +647,8 @@ const ZH: PanelCopy = {
     disconnectedPlaceholder: '连接 dsh 后即可开始',
     composerHelp: 'Enter 发送 · Shift + Enter 换行',
     sendMessage: '发送消息',
+    selectModel: '模型',
+    noModelsConfigured: '暂无模型 — Host 尚未提供可用模型。',
     stopTurn: '停止生成',
     stoppingTurn: '正在停止…',
     addImages: '添加图片',
@@ -667,6 +675,7 @@ const ZH: PanelCopy = {
     selectionAttached: '选中的网页内容',
     selectionTruncated: '（已截断）',
     removeSelection: '移除选中内容',
+    scrollToBottom: '回到最新消息',
   },
 }
 

extensions/dsh-browser/src/panel/styles.css

@@ -538,6 +538,14 @@ textarea:focus-visible {
   justify-self: end;
 }
 
+.messages-pane {
+  position: relative;
+  display: flex;
+  min-height: 0;
+  flex: 1;
+  flex-direction: column;
+}
+
 .messages {
   display: flex;
   min-height: 0;
@@ -551,6 +559,49 @@ textarea:focus-visible {
   scrollbar-gutter: stable;
 }
 
+.scroll-to-bottom {
+  position: absolute;
+  right: 16px;
+  bottom: 12px;
+  z-index: 2;
+  display: grid;
+  width: 36px;
+  height: 36px;
+  place-items: center;
+  border: 1px solid var(--line-strong);
+  border-radius: 999px;
+  background: var(--surface);
+  color: var(--muted);
+  box-shadow: var(--shadow);
+  cursor: pointer;
+  transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
+}
+
+.scroll-to-bottom svg {
+  width: 18px;
+  height: 18px;
+  fill: none;
+  stroke: currentColor;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 1.7;
+}
+
+.scroll-to-bottom:hover {
+  border-color: #aebcff;
+  color: var(--ink-strong);
+  box-shadow: 0 0 0 3px rgba(77, 107, 254, 0.1), var(--shadow);
+}
+
+.scroll-to-bottom:active {
+  transform: translateY(1px);
+}
+
+.scroll-to-bottom:focus-visible {
+  outline: 2px solid var(--blue);
+  outline-offset: 2px;
+}
+
 .empty {
   display: flex;
   width: 100%;
@@ -1518,6 +1569,138 @@ textarea:focus-visible {
   cursor: not-allowed;
 }
 
+.composer-model {
+  position: relative;
+  display: flex;
+  min-width: 0;
+  margin-top: 8px;
+  padding: 0 2px;
+}
+
+.composer-model-trigger {
+  display: inline-flex;
+  max-width: min(280px, 100%);
+  min-height: 28px;
+  align-items: center;
+  gap: 4px;
+  padding: 0 8px 0 10px;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: var(--canvas);
+  color: var(--muted);
+  cursor: pointer;
+  font: inherit;
+  font-size: calc(11px * var(--ui-scale));
+  font-weight: 600;
+  line-height: 1.2;
+}
+
+.composer-model-trigger > span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.composer-model-trigger svg {
+  width: 13px;
+  height: 13px;
+  flex: 0 0 auto;
+  fill: none;
+  stroke: currentColor;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 1.7;
+  transition: transform 150ms ease;
+}
+
+.composer-model-trigger:hover:not(:disabled),
+.composer-model-trigger[aria-expanded="true"] {
+  border-color: var(--line-strong);
+  background: var(--surface);
+  color: var(--ink);
+}
+
+.composer-model-trigger[aria-expanded="true"] svg {
+  transform: rotate(180deg);
+}
+
+.composer-model-trigger:disabled {
+  opacity: .55;
+  cursor: default;
+}
+
+.composer-model-menu {
+  position: absolute;
+  left: 2px;
+  bottom: calc(100% + 6px);
+  z-index: 40;
+  display: flex;
+  min-width: max(200px, 100%);
+  max-width: min(320px, calc(100vw - 24px));
+  max-height: min(280px, 42vh);
+  flex-direction: column;
+  gap: 2px;
+  overflow: auto;
+  padding: 4px;
+  border: 1px solid var(--line);
+  border-radius: 12px;
+  background: var(--surface);
+  box-shadow: 0 10px 28px rgba(18, 28, 56, 0.12);
+}
+
+.composer-model-group + .composer-model-group {
+  margin-top: 2px;
+  padding-top: 2px;
+  border-top: 1px solid var(--line);
+}
+
+.composer-model-group-title {
+  color: var(--faint);
+  font-size: calc(10px * var(--ui-scale));
+  font-weight: 600;
+  line-height: 1.3;
+  padding: 5px 8px 3px;
+}
+
+.composer-model-menu button {
+  display: flex;
+  width: 100%;
+  min-height: 32px;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 8px;
+  padding: 6px 8px;
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--ink);
+  cursor: pointer;
+  font: inherit;
+  font-size: calc(12px * var(--ui-scale));
+  font-weight: 560;
+  line-height: 1.3;
+  text-align: left;
+}
+
+.composer-model-menu button > span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.composer-model-menu button:hover,
+.composer-model-menu button:focus-visible {
+  background: var(--blue-wash);
+  color: var(--blue-ink);
+  outline: none;
+}
+
+.composer-model-menu button.isSelected {
+  background: var(--blue-wash);
+  color: var(--blue-ink);
+  font-weight: 680;
+}
+
 .composer-actions {
   display: flex;
   min-height: 37px;
@@ -2686,6 +2869,34 @@ textarea:focus-visible {
   gap: 3px;
 }
 
+.relay-profile label.setting-toggle {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 12px;
+  padding: 4px 0;
+  border-bottom: 0;
+  cursor: pointer;
+}
+
+.relay-profile label.setting-toggle > .setting-toggle-copy {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: 3px;
+}
+
+.relay-profile label.setting-toggle > .setting-toggle-copy > strong {
+  color: var(--ink);
+  font-size: calc(10.5px * var(--ui-scale));
+  font-weight: 640;
+  line-height: 1.35;
+}
+
+.relay-profile label.setting-toggle > .setting-toggle-copy > small {
+  text-align: left;
+}
+
 .relay-profile label > span {
   color: var(--ink);
   font-size: calc(10.5px * var(--ui-scale));

extensions/dsh-browser/tests/panel-styles.spec.ts

@@ -21,4 +21,17 @@ describe('panel layout styles', () => {
     expect(settingsChildrenRule).toBeDefined()
     expect(settingsChildrenRule).toMatch(/(?:^|\n)\s*flex-shrink:\s*0;/)
   })
+
+  it('places an upward model menu on its own row under the composer', () => {
+    const styles = readFileSync(`${process.cwd()}/src/panel/styles.css`, 'utf8')
+    const modelRule = styles.match(/\.composer-model\s*\{([^}]*)\}/)?.[1]
+    const menuRule = styles.match(/\.composer-model-menu\s*\{([^}]*)\}/)?.[1]
+
+    expect(modelRule).toBeDefined()
+    expect(modelRule).toMatch(/(?:^|\n)\s*position:\s*relative;/)
+    expect(modelRule).toMatch(/(?:^|\n)\s*margin-top:\s*8px;/)
+    expect(menuRule).toBeDefined()
+    expect(menuRule).toMatch(/(?:^|\n)\s*position:\s*absolute;/)
+    expect(menuRule).toMatch(/(?:^|\n)\s*bottom:\s*calc\(100% \+ 6px\);/)
+  })
 })

extensions/dsh-browser/tests/scroll-bottom.spec.ts

@@ -0,0 +1,18 @@
+// @vitest-environment jsdom
+import { describe, expect, it } from 'vitest'
+import { isNearScrollBottom } from '../src/panel/scroll.ts'
+
+describe('isNearScrollBottom', () => {
+  it('treats a fully scrolled viewport as near the bottom', () => {
+    expect(isNearScrollBottom({ scrollTop: 200, scrollHeight: 500, clientHeight: 300 })).toBe(true)
+  })
+
+  it('allows a small slack threshold above the true bottom', () => {
+    expect(isNearScrollBottom({ scrollTop: 160, scrollHeight: 500, clientHeight: 300 }, 48)).toBe(true)
+    expect(isNearScrollBottom({ scrollTop: 140, scrollHeight: 500, clientHeight: 300 }, 48)).toBe(false)
+  })
+
+  it('treats short unscrollable content as near the bottom', () => {
+    expect(isNearScrollBottom({ scrollTop: 0, scrollHeight: 200, clientHeight: 300 })).toBe(true)
+  })
+})