@linxin666/dsh-ssh 0.1.20 → 0.2.0

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/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/routes.ts

@@ -361,9 +361,22 @@ const maxUploadBytes = deps.maxUploadBytes ?? MAX_UPLOAD_BYTES
           if (settled) return
           settled = true
           emit({ type: 'result', ok: false, error: error instanceof Error ? error.message : String(error) })
-          try { sink.destroy() } catch { /* closed */ }
-          void unlink(tmp).catch(() => undefined)
-          try { res.end() } catch { /* closed */ }
+          // End the response only after the tmp file is gone, and unlink only
+          // after the sink is fully closed: destroying a WriteStream whose
+          // fs.open is still pending lets the open RE-CREATE the file after
+          // an early unlink, leaving staging populated (this raced the
+          // response end and made the byte-cap test flaky).
+          const cleanup = (): void => {
+            void unlink(tmp).catch(() => undefined).finally(() => {
+              try { res.end() } catch { /* closed */ }
+            })
+          }
+          if (sink.destroyed) {
+            cleanup()
+          } else {
+            sink.once('close', cleanup)
+            try { sink.destroy() } catch { cleanup() }
+          }
         }
         const done = (): void => {
           if (settled) return
@@ -379,11 +392,18 @@ const maxUploadBytes = deps.maxUploadBytes ?? MAX_UPLOAD_BYTES
         // header-less requests: count the bytes as they actually arrive and
         // abort the moment the cap is exceeded.
         let received = 0
+        let capped = false
         req.on('data', (chunk: Buffer) => {
           received += chunk.byteLength
-          if (received > maxUploadBytes) {
+          if (received > maxUploadBytes && !capped) {
+            capped = true
             fail('upload body too large')
-            try { req.destroy() } catch { /* closed */ }
+            // Keep the socket alive until the response flush finishes:
+            // destroying the request here races res.end() and the client
+            // sees a hang-up instead of the result frame. Drain the rest of
+            // the body so the socket can close cleanly afterwards.
+            res.on('finish', () => { try { req.destroy() } catch { /* closed */ } })
+            req.resume()
           }
         })
         req.pipe(sink)