@linxin666/dsh-ssh 0.1.20 → 0.2.1

package/src/client/panel/HostsTab.tsx

@@ -3,7 +3,7 @@
  * add/edit/delete/test actions, ~/.ssh/config import, and a connect action
  * that hands the alias to the terminal tab via onConnect.
  */
-import { useCallback, useEffect, useRef, useState } from 'react'
+import { useCallback, useEffect, useRef, useState, type ReactNode } from 'react'
 import type { SshApi } from '../api.ts'
 import type { SshHostSummary, TestResult } from '../../protocol.ts'
 import { errorMessage, tt } from './helpers.ts'
@@ -20,6 +20,44 @@ export interface HostsTabProps {
 /** The host-form dialog invocation. */
 type DialogState = { mode: 'create' } | { mode: 'edit'; host: SshHostSummary }
 
+/** Host list grouping modes (#379). */
+export type HostGroupBy = 'none' | 'environment' | 'tags'
+
+/** One collapsible group section of the grouped host list. */
+export interface HostGroup {
+  /** Group key: the environment name, one tag, or '' for the ungrouped bucket. */
+  key: string
+  hosts: SshHostSummary[]
+}
+
+/**
+ * Bucket hosts into collapsible groups (#379). Grouping by tags places a
+ * multi-tag host in every one of its tag groups (folder view); hosts without
+ * the grouping key land in the '' bucket, which always sorts last. Groups
+ * sort alphabetically; host order inside a group follows the API listing.
+ */
+export function groupHosts(hosts: SshHostSummary[], groupBy: HostGroupBy): HostGroup[] {
+  if (groupBy === 'none') return [{ key: '', hosts }]
+  const buckets = new Map<string, SshHostSummary[]>()
+  const push = (key: string, host: SshHostSummary): void => {
+    const bucket = buckets.get(key)
+    if (bucket === undefined) buckets.set(key, [host])
+    else bucket.push(host)
+  }
+  for (const host of hosts) {
+    if (groupBy === 'environment') {
+      push(host.environment ?? '', host)
+    } else if (host.tags.length === 0) {
+      push('', host)
+    } else {
+      for (const tag of host.tags) push(tag, host)
+    }
+  }
+  return [...buckets.entries()]
+    .sort(([a], [b]) => (a === '' ? 1 : b === '' ? -1 : a.localeCompare(b)))
+    .map(([key, group]) => ({ key, hosts: group }))
+}
+
 /** The hosts table plus its toolbar and dialogs. */
 export function HostsTab({ api, onConnect }: HostsTabProps) {
   const [hosts, setHosts] = useState<SshHostSummary[] | null>(null)
@@ -30,6 +68,9 @@ export function HostsTab({ api, onConnect }: HostsTabProps) {
   const [importing, setImporting] = useState(false)
   const [notice, setNotice] = useState<string | null>(null)
   const [dialog, setDialog] = useState<DialogState | null>(null)
+  const [groupBy, setGroupBy] = useState<HostGroupBy>('none')
+  const [collapsed, setCollapsed] = useState<Record<string, boolean>>({})
+  const [testingGroup, setTestingGroup] = useState<string | null>(null)
   const seqRef = useRef(0)
 
   const load = useCallback(async (query?: string): Promise<void> => {
@@ -78,6 +119,16 @@ export function HostsTab({ api, onConnect }: HostsTabProps) {
     }
   }
 
+  // Group-header batch action (#379): test every host in the group.
+  const testGroup = async (group: HostGroup): Promise<void> => {
+    setTestingGroup(group.key)
+    try {
+      await Promise.all(group.hosts.map(host => runTest(host.alias)))
+    } finally {
+      setTestingGroup(null)
+    }
+  }
+
   const importConfig = async (): Promise<void> => {
     setImporting(true)
     try {
@@ -91,10 +142,73 @@ export function HostsTab({ api, onConnect }: HostsTabProps) {
     }
   }
 
+  const renderHostRow = (host: SshHostSummary): ReactNode => {
+    const test = testResults[host.alias]
+    return (
+      <tr key={host.alias}>
+        <td className={css.mono}>{host.alias}</td>
+        <td className={css.mono}>{host.host}:{host.port}</td>
+        <td>{host.user}</td>
+        <td><span className={css.badge} data-kind={host.auth}>{host.auth === 'key' ? tt('form.auth.key') : tt('form.auth.password')}</span></td>
+        <td className={css.cellMuted}>{host.environment ?? ''}</td>
+        <td className={css.cellMuted}>{host.tags.join(', ')}</td>
+        <td className={css.cellMuted}>{host.description ?? ''}</td>
+        <td>
+          <div className={css.actions}>
+            <button type="button" className={css.linkButton} disabled={testingAlias === host.alias} onClick={() => { void runTest(host.alias) }}>
+              {testingAlias === host.alias ? tt('hosts.testing') : tt('hosts.test')}
+            </button>
+            {testingAlias === host.alias && <span className={css.spinner} aria-hidden="true" />}
+            {test !== undefined && (
+              <span className={css.inlineTest} data-status={test.ok ? 'ok' : 'fail'}>
+                {test.ok ? tt('hosts.testOk', { latency: test.latencyMs ?? 0 }) : tt('hosts.testFail', { error: test.error ?? '' })}
+              </span>
+            )}
+            <button type="button" className={css.linkButton} onClick={() => { setDialog({ mode: 'edit', host }) }}>{tt('hosts.edit')}</button>
+            <button type="button" className={css.linkButton} data-danger onClick={() => { void deleteHost(host.alias) }}>{tt('hosts.delete')}</button>
+            <button type="button" className={css.ghostButton} onClick={() => { onConnect(host.alias) }}>{tt('hosts.connected')}</button>
+          </div>
+        </td>
+      </tr>
+    )
+  }
+
+  const renderHostTable = (rows: SshHostSummary[]): ReactNode => (
+    <table className={css.table}>
+      <thead>
+        <tr>
+          <th>{tt('hosts.col.alias')}</th>
+          <th>{tt('hosts.col.host')}</th>
+          <th>{tt('hosts.col.user')}</th>
+          <th>{tt('hosts.col.auth')}</th>
+          <th>{tt('hosts.col.environment')}</th>
+          <th>{tt('hosts.col.tags')}</th>
+          <th>{tt('hosts.col.description')}</th>
+          <th>{tt('hosts.col.actions')}</th>
+        </tr>
+      </thead>
+      <tbody>
+        {rows.map(renderHostRow)}
+      </tbody>
+    </table>
+  )
+
+  const groups = hosts === null ? [] : groupHosts(hosts, groupBy)
+
   return (
     <div className={css.fillBody}>
       <div className={css.toolbar}>
         <input className={css.search} type="search" placeholder={tt('hosts.search')} value={search} onChange={event => { setSearch(event.target.value) }} />
+        <select
+          className={css.groupBySelect}
+          aria-label={tt('hosts.groupBy.label')}
+          value={groupBy}
+          onChange={event => { setGroupBy(event.target.value as HostGroupBy) }}
+        >
+          <option value="none">{tt('hosts.groupBy.none')}</option>
+          <option value="environment">{tt('hosts.groupBy.environment')}</option>
+          <option value="tags">{tt('hosts.groupBy.tags')}</option>
+        </select>
         <div className={css.toolbarSpacer} />
         <button type="button" className={css.primaryButton} onClick={() => { setDialog({ mode: 'create' }) }}>{tt('hosts.add')}</button>
         <button type="button" className={css.ghostButton} disabled={importing} onClick={() => { void importConfig() }}>{importing ? tt('common.loading') : tt('hosts.import')}</button>
@@ -103,54 +217,44 @@ export function HostsTab({ api, onConnect }: HostsTabProps) {
       {error !== null && <div className={css.banner} data-kind="error">{tt('common.error', { error })}</div>}
       {hosts === null && error === null && <div className={css.loading}>{tt('common.loading')}</div>}
       {hosts !== null && hosts.length === 0 && <div className={css.empty}>{tt('hosts.empty')}</div>}
-      {hosts !== null && hosts.length > 0 && (
+      {hosts !== null && hosts.length > 0 && groupBy === 'none' && (
+        <div className={css.tableWrap}>
+          {renderHostTable(hosts)}
+        </div>
+      )}
+      {hosts !== null && hosts.length > 0 && groupBy !== 'none' && (
         <div className={css.tableWrap}>
-          <table className={css.table}>
-            <thead>
-              <tr>
-                <th>{tt('hosts.col.alias')}</th>
-                <th>{tt('hosts.col.host')}</th>
-                <th>{tt('hosts.col.user')}</th>
-                <th>{tt('hosts.col.auth')}</th>
-                <th>{tt('hosts.col.environment')}</th>
-                <th>{tt('hosts.col.tags')}</th>
-                <th>{tt('hosts.col.description')}</th>
-                <th>{tt('hosts.col.actions')}</th>
-              </tr>
-            </thead>
-            <tbody>
-              {hosts.map(host => {
-                const test = testResults[host.alias]
-                return (
-                  <tr key={host.alias}>
-                    <td className={css.mono}>{host.alias}</td>
-                    <td className={css.mono}>{host.host}:{host.port}</td>
-                    <td>{host.user}</td>
-                    <td><span className={css.badge} data-kind={host.auth}>{host.auth === 'key' ? tt('form.auth.key') : tt('form.auth.password')}</span></td>
-                    <td className={css.cellMuted}>{host.environment ?? ''}</td>
-                    <td className={css.cellMuted}>{host.tags.join(', ')}</td>
-                    <td className={css.cellMuted}>{host.description ?? ''}</td>
-                    <td>
-                      <div className={css.actions}>
-                        <button type="button" className={css.linkButton} disabled={testingAlias === host.alias} onClick={() => { void runTest(host.alias) }}>
-                          {testingAlias === host.alias ? tt('hosts.testing') : tt('hosts.test')}
-                        </button>
-                        {testingAlias === host.alias && <span className={css.spinner} aria-hidden="true" />}
-                        {test !== undefined && (
-                          <span className={css.inlineTest} data-status={test.ok ? 'ok' : 'fail'}>
-                            {test.ok ? tt('hosts.testOk', { latency: test.latencyMs ?? 0 }) : tt('hosts.testFail', { error: test.error ?? '' })}
-                          </span>
-                        )}
-                        <button type="button" className={css.linkButton} onClick={() => { setDialog({ mode: 'edit', host }) }}>{tt('hosts.edit')}</button>
-                        <button type="button" className={css.linkButton} data-danger onClick={() => { void deleteHost(host.alias) }}>{tt('hosts.delete')}</button>
-                        <button type="button" className={css.ghostButton} onClick={() => { onConnect(host.alias) }}>{tt('hosts.connected')}</button>
-                      </div>
-                    </td>
-                  </tr>
-                )
-              })}
-            </tbody>
-          </table>
+          {groups.map(group => {
+            const isCollapsed = collapsed[group.key] === true
+            const label = group.key === ''
+              ? (groupBy === 'tags' ? tt('hosts.group.noTags') : tt('hosts.group.ungrouped'))
+              : group.key
+            return (
+              <section key={group.key} className={css.groupSection}>
+                <div className={css.groupHeader}>
+                  <button
+                    type="button"
+                    className={css.groupToggle}
+                    aria-expanded={!isCollapsed}
+                    onClick={() => { setCollapsed(prev => ({ ...prev, [group.key]: !isCollapsed })) }}
+                  >
+                    <span className={css.groupChevron} data-collapsed={isCollapsed || undefined} aria-hidden="true" />
+                    <span className={css.groupName}>{label}</span>
+                    <span className={css.groupCount}>{tt('hosts.group.count', { count: group.hosts.length })}</span>
+                  </button>
+                  <button
+                    type="button"
+                    className={css.linkButton}
+                    disabled={testingGroup === group.key}
+                    onClick={() => { void testGroup(group) }}
+                  >
+                    {testingGroup === group.key ? tt('hosts.testing') : tt('hosts.group.testAll')}
+                  </button>
+                </div>
+                {!isCollapsed && renderHostTable(group.hosts)}
+              </section>
+            )
+          })}
         </div>
       )}
       {dialog !== null && (

package/src/client/panel/SshPanel.tsx

@@ -66,7 +66,7 @@ export function SshPanel({ controller, api }: SshPanelProps) {
         </button>
         <h2 className={css.panelTitle}>{tt('panel.title')}</h2>
       </div>
-      <div className={css.tabBar} role="tablist">
+      <div className={css.tabBar} role="tablist" data-dsh-part="tab-bar">
         {TABS.map(tab => (
           <button key={tab.id} type="button" role="tab" aria-selected={activeTab === tab.id} data-active={activeTab === tab.id ? '' : undefined} className={css.tab} onClick={() => { setActiveTab(tab.id) }}>
             {tab.label()}

package/src/client/panel/TerminalTab.tsx

@@ -173,7 +173,7 @@ export function TerminalTab({ api, presetAlias, requestId }: TerminalTabProps) {
       )}
       {status.kind === 'error' && <div className={css.banner} data-kind="error">{tt('terminal.error', { error: status.detail })}</div>}
       <div className={css.termWrap}>
-        <div ref={containerRef} className={css.termContainer} />
+        <div ref={containerRef} className={css.termContainer} data-dsh-part="terminal" />
         {status.kind === 'idle' && (
           <div className={css.termPlaceholder}>{hosts.length === 0 ? tt('hosts.empty') : tt('terminal.placeholder')}</div>
         )}

package/src/client/panel/panel.module.css

@@ -242,6 +242,81 @@ html[data-dsh-ssh-active]:not([data-dsh-taskboard-active]) [class*='centerCol']
   color: var(--dsw-alias-label-tertiary);
 }
 
+.groupBySelect {
+  padding: 6px 8px;
+  font-size: 13px;
+  color: var(--dsw-alias-label-primary);
+  background: var(--dsw-specific-input-major);
+  border: 1px solid var(--dsw-alias-border-l2);
+  border-radius: 8px;
+  outline: none;
+}
+
+/* --- host groups (#379) ------------------------------------------------------- */
+
+.groupSection + .groupSection {
+  border-top: 1px solid var(--dsw-alias-border-l1);
+}
+
+.groupHeader {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 8px;
+  position: sticky;
+  top: 0;
+  background: var(--dsw-alias-bg-base, var(--dsw-specific-input-major));
+}
+
+.groupToggle {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex: 1;
+  min-width: 0;
+  padding: 4px 6px;
+  border: none;
+  background: none;
+  color: var(--dsw-alias-label-primary);
+  font-size: 12.5px;
+  font-weight: 500;
+  cursor: pointer;
+  text-align: left;
+  border-radius: 6px;
+}
+
+.groupToggle:hover {
+  background: var(--dsw-alias-interactive-bg-hover);
+}
+
+.groupChevron {
+  width: 7px;
+  height: 7px;
+  border-right: 1.5px solid var(--dsw-alias-label-tertiary);
+  border-bottom: 1.5px solid var(--dsw-alias-label-tertiary);
+  transform: rotate(45deg);
+  transition: transform 120ms ease;
+  flex: none;
+  margin-bottom: 2px;
+}
+
+.groupChevron[data-collapsed] {
+  transform: rotate(-45deg);
+  margin-bottom: 0;
+}
+
+.groupName {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.groupCount {
+  color: var(--dsw-alias-label-tertiary);
+  font-weight: 400;
+  flex: none;
+}
+
 /* --- tables ------------------------------------------------------------------- */
 
 .tableWrap {

package/src/client/sidebar-entry-core.ts

@@ -0,0 +1,208 @@
+// Generated by scripts/sync-shared.mjs from shared/client/sidebar-entry-core.ts. Do not edit this copy; edit the shared source and run "node scripts/sync-shared.mjs".
+/**
+ * Shared sidebar entry injection core.
+ *
+ * dsh's sidebar shell exposes no slot an external plugin can register into,
+ * so the entry row is injected between the shell's New Session button and the
+ * workspace browser. The injection self-heals: a MutationObserver watches the
+ * sidebar root and re-inserts the row whenever a React re-render displaces it
+ * (re-insertion happens in the same frame, before paint, so no flicker).
+ *
+ * The row is plain DOM (no React tree) so it can never disturb the shell's
+ * reconciliation; the view it toggles is a separate root owned by the caller.
+ *
+ * Packages receive this file as a generated copy via scripts/sync-shared.mjs;
+ * edit the shared source and re-run the sync instead of editing a copy.
+ */
+
+/** Per-package configuration for one sidebar entry row. */
+export interface SidebarEntryOptions {
+  /** Full attribute name identifying the injected row (idempotency key), e.g. 'data-dsh-ssh-entry'. */
+  rowAttribute: string
+  /** CSS selector matching the injected row, e.g. '[data-dsh-ssh-entry]'. */
+  rowSelector: string
+  /**
+   * L2 semantic-attribute plugin id (issue #506, enum table:
+   * skins/skin-center/contracts/semantic-attrs-v1.md). When set, the row also
+   * outputs data-dsh-plugin="<id>" and data-dsh-part="sidebar-entry"; unset
+   * leaves the row without semantic attributes.
+   */
+  plugin?: string
+  /** Inline icon markup (matches the shell's 16px nav-icon look). */
+  icon: string
+  /** CSS module class names for the row and its two spans (entry / entryIcon / entryLabel). */
+  css: Record<string, string>
+  /** Localized row label (aria-label + visible text). */
+  label(): string
+  /** Optional localized tooltip (title attribute). */
+  tooltip?(): string
+  /** Click action (open/toggle the owning panel). */
+  onToggle(): void
+  /** Family-block position: 'before' inserts ahead of sibling plugin rows, 'after' behind them. */
+  position: 'before' | 'after'
+  /**
+   * Selectors of the sibling plugin entry rows this package orders against
+   * (its own row included — the placement guard excludes a row that is
+   * already inside the root). Each package passes the same list it used
+   * before the consolidation so the rendered order stays stable.
+   */
+  familySelectors: readonly string[]
+  /** Optional active-state bridge; highlights the row while the panel is open. */
+  active?: {
+    subscribe(listener: () => void): () => void
+    isOpen(): boolean
+  }
+}
+
+/** Find the sidebar shell root element, or undefined while not yet mounted. */
+function sidebarRoot(): HTMLElement | undefined {
+  const column = document.querySelector<HTMLElement>('[data-pane="sidebar"], [class*="sidebarCol"]')
+  if (column === null) return undefined
+  // Current shells wrap the sidebar UI: column > wrapper > root(logoRow owner).
+  // Prefer the element that owns the logo row — the real sidebar UI root —
+  // and fall back to the column's first child for legacy shells.
+  const logoOwner = column.querySelector<HTMLElement>('[class*="logoRow"]')?.parentElement
+  return logoOwner ?? (column.firstElementChild as HTMLElement | undefined)
+}
+
+/** The New Session button: nested in the logo row on current shells, a direct child on legacy shells. */
+function newSessionButton(root: HTMLElement): HTMLButtonElement | undefined {
+  const nested = root.querySelector<HTMLButtonElement>('button[class*="newSession"]')
+  if (nested !== null) return nested
+  for (const child of root.children) {
+    if (child.tagName === 'BUTTON') return child as HTMLButtonElement
+  }
+  return undefined
+}
+
+/** Build the entry row (a detached button; insert once the shell is up). */
+function createEntry(options: SidebarEntryOptions): HTMLButtonElement {
+  const entry = document.createElement('button')
+  entry.type = 'button'
+  entry.setAttribute(options.rowAttribute, '')
+  if (options.plugin !== undefined) {
+    entry.setAttribute('data-dsh-plugin', options.plugin)
+    entry.setAttribute('data-dsh-part', 'sidebar-entry')
+  }
+  entry.className = options.css['entry'] ?? ''
+  entry.setAttribute('aria-label', options.label())
+  if (options.tooltip !== undefined) entry.setAttribute('title', options.tooltip())
+  entry.innerHTML = '<span class="' + (options.css['entryIcon'] ?? '') + '">' + options.icon
+    + '</span><span class="' + (options.css['entryLabel'] ?? '') + '">' + options.label() + '</span>'
+  entry.addEventListener('click', options.onToggle)
+  return entry
+}
+
+/** Re-insert the entry after the New Session row (before the browser region). */
+function placeEntry(root: HTMLElement, entry: HTMLButtonElement, options: SidebarEntryOptions): boolean {
+  const button = newSessionButton(root)
+  if (button === undefined) return false
+  if (entry.parentElement !== root) {
+    // Position relative to the family block (entries injected by sibling
+    // plugins), never relative to transient logoRow geometry: every family
+    // plugin that self-heals during a re-render then lands in the same
+    // relative order, so the entries cannot swap positions regardless of
+    // observer callback order or of shell wrapper changes. There is no
+    // append-to-end fallback: appending at the end would randomly reorder
+    // the block after a shell re-render.
+    const row = button.closest('[class*="logoRow"]')
+    const base = (row !== null && row.parentElement === root) ? row : button
+    const family = Array.from(root.children).filter(
+      (el): el is HTMLElement => el instanceof HTMLElement && el.matches(options.familySelectors.join(', ')),
+    )
+    const anchor = options.position === 'before'
+      ? (family.length > 0 ? family[0] : base.nextElementSibling)
+      : (family.length > 0 ? family[family.length - 1]!.nextElementSibling : base.nextElementSibling)
+    root.insertBefore(entry, anchor)
+  }
+  return true
+}
+
+/**
+ * Mount the sidebar entry, waiting for the shell to render and self-healing
+ * on later React re-renders.
+ * @param options - the row's attribute/icon/copy/action/ordering configuration.
+ * @returns disposer removing the entry and its observers.
+ */
+export function mountSidebarEntry(options: SidebarEntryOptions): () => void {
+  // DOM-level idempotency: whatever path mounted an entry row before this
+  // call (a duplicated apply, an HMR re-injection, a stale module still
+  // alive), never mount a second one. The existing row keeps working; a full
+  // page reload is the ultimate reset.
+  if (typeof document !== 'undefined' && document.querySelector(options.rowSelector) !== null) {
+    return () => {}
+  }
+  const entry = createEntry(options)
+  let root: HTMLElement | undefined
+  let placed = false
+
+  const tryPlace = (): void => {
+    if (root !== undefined && !root.isConnected) {
+      // The shell rebuilt the sidebar pane (whole-tree teardown); the root
+      // observer is gone with the old tree, so detach it and re-query from
+      // scratch. The new pane is later noticed by the body-level watcher.
+      rootObserver.disconnect()
+      root = undefined
+      placed = false
+    }
+    if (placed) {
+      // Cheap short-circuit: entry still lives in a mountable subtree.
+      if (document.body.contains(entry)) return
+      // Entry was torn down together with the old tree; reset and re-place.
+      rootObserver.disconnect()
+      root = undefined
+      placed = false
+    }
+    root ??= sidebarRoot()
+    if (root === undefined) return
+    placed = placeEntry(root, entry, options)
+    if (placed) {
+      rootObserver.observe(root, { childList: true, subtree: true })
+    }
+  }
+
+  // Body-level watcher retained as the "whole rebuild" fallback: when the shell
+  // tears down the whole sidebar pane, the root observer is gone with it and
+  // only this body observation can notice the new pane mounting. It is no
+  // longer disconnected after placement; the placed-and-still-mounted case
+  // short-circuits through the cheap document.body.contains(entry) check, so
+  // unrelated app mutations (e.g. chat streaming) cost one contains check
+  // instead of churning the full re-query.
+  const waitObserver = new MutationObserver(() => { tryPlace() })
+  waitObserver.observe(document.body, { childList: true, subtree: true })
+
+  // Self-heal: if a React re-render displaces the row, re-insert it in the
+  // same frame (microtask before paint -> no visible flicker).
+  const rootObserver = new MutationObserver(() => {
+    if (root === undefined || !root.isConnected) {
+      placed = false
+      tryPlace()
+      return
+    }
+    if (!root.contains(entry)) {
+      placed = placeEntry(root, entry, options)
+    }
+  })
+
+  // Reflect the panel's open state on the row (active highlight). Note: assigning
+  // undefined to dataset.active materializes data-active="undefined" and keeps the
+  // row permanently highlighted — delete the attribute instead.
+  const unsubscribeActive = options.active === undefined ? undefined : (() => {
+    const syncActive = (): void => {
+      if (options.active!.isOpen()) entry.dataset.active = 'true'
+      else delete entry.dataset.active
+    }
+    const unsubscribe = options.active.subscribe(syncActive)
+    syncActive()
+    return unsubscribe
+  })()
+
+  tryPlace()
+
+  return () => {
+    waitObserver.disconnect()
+    rootObserver.disconnect()
+    unsubscribeActive?.()
+    entry.remove()
+  }
+}