@tiphareth/dsh-hardssh 0.1.2-alpha → 0.2.2

package/src/client/ssh/panel/TunnelsTab.tsx

@@ -5,41 +5,27 @@
  */
 import { useEffect, useRef, useState } from 'react'
 import type { SshApi } from '../api.ts'
-import type { SshHostSummary, TunnelInfo } from '../../../ssh/protocol.ts'
+import type { TunnelInfo } from '../../../ssh/protocol.ts'
 import { errorMessage, tt } from './helpers.ts'
 import css from './panel.module.css'
 
 /** Tunnels tab props. */
 export interface TunnelsTabProps {
   api: SshApi
+  /** Fixed alias inherited from the selected Session. */
+  alias: string
 }
 
 /** The tunnels tab. */
-export function TunnelsTab({ api }: TunnelsTabProps) {
-  const [hosts, setHosts] = useState<SshHostSummary[]>([])
+export function TunnelsTab({ api, alias }: TunnelsTabProps) {
   const [tunnels, setTunnels] = useState<TunnelInfo[] | null>(null)
   const [error, setError] = useState<string | null>(null)
   const [notice, setNotice] = useState<string | null>(null)
-  const [alias, setAlias] = useState('')
   const [remotePort, setRemotePort] = useState('')
   const [remoteHost, setRemoteHost] = useState('')
   const [localPort, setLocalPort] = useState('')
   const [busy, setBusy] = useState(false)
 
-  // Hosts for the new-tunnel form (failure does not block tunnel listing).
-  useEffect(() => {
-    let disposed = false
-    void (async () => {
-      try {
-        const list = await api.listHosts()
-        if (!disposed) setHosts(list)
-      } catch {
-        // Tunnels may still exist; keep the list usable.
-      }
-    })()
-    return () => { disposed = true }
-  }, [api])
-
   // Live list with a 5s heartbeat while mounted. Every load carries a
   // sequence number so stale responses never overwrite newer state.
   const seqRef = useRef(0)
@@ -49,7 +35,7 @@ export function TunnelsTab({ api }: TunnelsTabProps) {
       try {
         const list = await api.listTunnels()
         if (seq !== seqRef.current) return
-        setTunnels(list)
+        setTunnels(list.filter(tunnel => tunnel.alias === alias))
         setError(null)
       } catch (cause) {
         if (seq !== seqRef.current) return
@@ -59,7 +45,7 @@ export function TunnelsTab({ api }: TunnelsTabProps) {
     void load()
     const timer = setInterval(() => { void load() }, 5000)
     return () => { clearInterval(timer) }
-  }, [api])
+  }, [api, alias])
 
   const refresh = async (): Promise<void> => {
     const seq = ++seqRef.current
@@ -87,7 +73,7 @@ export function TunnelsTab({ api }: TunnelsTabProps) {
     if (!window.confirm(tt('tunnel.stopAllConfirm'))) return
     setBusy(true)
     try {
-      await api.stopAllTunnels(alias === '' ? undefined : alias)
+      await api.stopAllTunnels(alias)
       await refresh()
     } catch (cause) {
       setError(errorMessage(cause))
@@ -150,10 +136,7 @@ export function TunnelsTab({ api }: TunnelsTabProps) {
         <div className={css.formRow}>
           <label className={css.field}>
             <span className={css.fieldLabel}>{tt('tunnel.alias')}</span>
-            <select className={css.input} value={alias} onChange={event => { setAlias(event.target.value) }}>
-              <option value="">{tt('terminal.selectHost')}</option>
-              {hosts.map(host => <option key={host.alias} value={host.alias}>{host.alias}</option>)}
-            </select>
+            <span className={css.targetBadge}>{alias}</span>
           </label>
           <label className={css.field}>
             <span className={css.fieldLabel}>{tt('tunnel.remotePort')}</span>
@@ -169,7 +152,7 @@ export function TunnelsTab({ api }: TunnelsTabProps) {
           </label>
         </div>
         <div>
-          <button type="button" className={css.primaryButton} disabled={busy || alias === '' || remotePort.trim() === ''} onClick={() => { void start() }}>{tt('tunnel.start')}</button>
+          <button type="button" className={css.primaryButton} disabled={busy || remotePort.trim() === ''} onClick={() => { void start() }}>{tt('tunnel.start')}</button>
         </div>
       </div>
     </div>

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

@@ -1,95 +1,17 @@
 /**
- * dsh-ssh panel styles. Scoped by the plugin's own data attributes so nothing
- * leaks into the rest of the GUI; colors ride the dsh --dsw-* tokens so the
- * panel follows the active theme (light/dark and skins). The center-column
- * hide rules are attribute-scoped and must stay in this stylesheet (it is
- * imported by mount.tsx, so the styles load with the plugin).
+ * dsh-ssh operations console styles. Scoped by the plugin's own class names so
+ * nothing leaks into the rest of the GUI; colors ride the dsh --dsw-* tokens so
+ * the console follows the active theme (light/dark and skins).
+ *
+ * The console is a RIGHT-Sidebar page tab now: the tab record owns visibility
+ * and the chip owns closing, so there is no column-takeover CSS here and no
+ * entry row — the sidebar shell renders both from the plugin's registrations.
  */
 
-/* --- center-column takeover (global rules, attribute-scoped) ----------------- */
-
-[data-pane='conversation'] {
-  position: relative;
-}
-
-/* The panel container rides inside the conversation grid item as an extra
-   trailing child; hidden unless the panel is active. */
-[data-dsh-ssh-view] {
-  position: absolute;
-  inset: 0;
-  display: none;
-  z-index: 5;
-}
-
-html[data-dsh-ssh-active] [data-dsh-ssh-view] {
-  display: block;
-}
-
-/* While the panel is active, the conversation content underneath is hidden
-   (it stays mounted and stateful). */
-html[data-dsh-ssh-active] [data-pane='conversation'] > :not([data-dsh-ssh-view]) {
-  display: none;
-}
-
-/* --- sidebar entry row ------------------------------------------------------- */
-
-.entry {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  width: 100%;
-  height: 32px;
-  padding: 0 12px;
-  background: transparent;
-  border: none;
-  border-radius: 8px;
-  color: var(--dsw-alias-label-secondary);
-  cursor: pointer;
-  font-size: 13px;
-  white-space: nowrap;
-}
-
-.entry:hover {
-  background: var(--dsw-specific-sidebar-nav-item-hover);
-  color: var(--dsw-alias-label-primary);
-}
-
-.entry[data-active] {
-  background: var(--dsw-specific-sidebar-nav-item-active);
-  color: var(--dsw-alias-label-primary);
-  font-weight: 600;
-}
-
-.entryIcon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex: none;
-}
-
-.entryLabel {
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-/* Collapsed rail: icon-only, centered, matching the shell's 56px rail. */
-[data-dsh-frame][data-sidebar-collapsed] .entry {
-  justify-content: center;
-  padding: 0;
-  width: 100%;
-}
-
-[data-dsh-frame][data-sidebar-collapsed] .entryLabel {
-  display: none;
-}
-
 /* --- panel frame -------------------------------------------------------------- */
 
-.view {
-  overflow: hidden;
-}
-
 .panel {
+  position: relative;
   display: flex;
   flex-direction: column;
   height: 100%;
@@ -102,22 +24,6 @@ html[data-dsh-ssh-active] [data-pane='conversation'] > :not([data-dsh-ssh-view])
   font-family: var(--dsw-font-family);
 }
 
-.panelHeader {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  flex: none;
-}
-
-.panelTitle {
-  margin: 0;
-  flex: 1;
-  font-size: 16px;
-  font-weight: 700;
-  color: var(--dsw-alias-label-primary);
-  white-space: nowrap;
-}
-
 /* --- tab bar ------------------------------------------------------------------ */
 
 .tabBar {
@@ -158,6 +64,83 @@ html[data-dsh-ssh-active] [data-pane='conversation'] > :not([data-dsh-ssh-view])
   overflow: hidden;
 }
 
+.sessionTarget {
+  flex: none;
+  overflow: hidden;
+  padding: 5px 9px;
+  color: var(--dsw-alias-label-secondary);
+  font-size: 12px;
+  line-height: 18px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  background: var(--dsw-alias-bg-layer-2);
+  border: 1px solid var(--dsw-alias-border-l1);
+  border-radius: 7px;
+}
+
+.targetBadge {
+  display: inline-flex;
+  min-height: 30px;
+  align-items: center;
+  padding: 4px 10px;
+  color: var(--dsw-alias-state-business-primary);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 12px;
+  white-space: nowrap;
+  background: var(--dsw-alias-bg-layer-2);
+  border: 1px solid var(--dsw-alias-state-business-primary);
+  border-radius: 8px;
+}
+
+.disabledSurface {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  flex-direction: column;
+  gap: 10px;
+  opacity: 0.4;
+  filter: blur(3px);
+  pointer-events: none;
+  user-select: none;
+}
+
+.disabledPlaceholder {
+  flex: 1;
+  min-height: 180px;
+  background:
+    linear-gradient(var(--dsw-alias-bg-layer-2), var(--dsw-alias-bg-layer-2)) 0 0 / 100% 34px no-repeat,
+    repeating-linear-gradient(180deg, transparent 0 34px, var(--dsw-alias-separator-primary) 34px 35px);
+  border: 1px solid var(--dsw-alias-border-l1);
+  border-radius: 10px;
+}
+
+.localSessionMask {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: 8px;
+  padding: 32px;
+  color: var(--dsw-alias-label-primary);
+  text-align: center;
+  background: color-mix(in srgb, var(--dsw-alias-bg-base) 72%, transparent);
+  backdrop-filter: blur(2px);
+}
+
+.localSessionMask strong {
+  font-size: 15px;
+}
+
+.localSessionMask span {
+  max-width: 340px;
+  color: var(--dsw-alias-label-secondary);
+  font-size: 13px;
+  line-height: 1.55;
+}
+
 /* Scrollable tab body (transfer / tunnels); hosts and cluster use fillBody so
    their toolbars stay put while the table scrolls internally. */
 .tabBody {
@@ -377,26 +360,6 @@ html[data-dsh-ssh-active] [data-pane='conversation'] > :not([data-dsh-ssh-view])
   cursor: default;
 }
 
-.iconButton {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 26px;
-  height: 26px;
-  padding: 0;
-  background: transparent;
-  border: none;
-  border-radius: 6px;
-  color: var(--dsw-alias-label-secondary);
-  cursor: pointer;
-  font-size: 13px;
-}
-
-.iconButton:hover {
-  background: var(--dsw-alias-interactive-bg-hover);
-  color: var(--dsw-alias-label-primary);
-}
-
 .linkButton {
   padding: 0;
   font-size: 12px;
@@ -509,7 +472,7 @@ html[data-dsh-ssh-active] [data-pane='conversation'] > :not([data-dsh-ssh-view])
   background: var(--dsw-alias-bg-base, #fff);
   border: 1px solid var(--dsw-alias-border-l1, rgba(0, 0, 0, 0.04));
   border-radius: 12px;
-  color: #000000;
+  color: var(--dsw-alias-label-primary, #0f1115);
   font-family: var(--dsw-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI',
     Roboto, system-ui, 'PingFang SC', 'Microsoft YaHei', sans-serif);
 }
@@ -533,7 +496,7 @@ html[data-dsh-ssh-active] [data-pane='conversation'] > :not([data-dsh-ssh-view])
   gap: 8px;
   font-size: 15px;
   font-weight: 600;
-  color: #000000;
+  color: var(--dsw-alias-label-primary, #0f1115);
 }
 
 /* tiny whale glyph: DeepSeek's friendly blue-whale mark */
@@ -709,7 +672,7 @@ html[data-dsh-ssh-active] [data-pane='conversation'] > :not([data-dsh-ssh-view])
   gap: 7px;
   align-items: center;
   font-size: 13px;
-  color: #000000;
+  color: var(--dsw-alias-label-primary, #0f1115);
   cursor: pointer;
 }
 
@@ -982,7 +945,7 @@ html[data-dsh-ssh-active] [data-pane='conversation'] > :not([data-dsh-ssh-view])
   margin: 0 0 10px;
   font-size: 13px;
   line-height: 1.5;
-  color: #000;
+  color: var(--dsw-alias-label-primary, #0f1115);
 }
 
 .fingerprintCode {
@@ -991,7 +954,7 @@ html[data-dsh-ssh-active] [data-pane='conversation'] > :not([data-dsh-ssh-view])
   border: 1px solid var(--dsw-alias-border-l2, rgba(0, 0, 0, 0.12));
   border-radius: 6px;
   background: var(--dsw-specific-input-major, #f2f3f5);
-  color: #1f2229;
+  color: var(--dsw-alias-label-primary, #0f1115);
   font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
   font-size: 13px;
   word-break: break-all;

package/src/client/ssh/session-target.ts

@@ -0,0 +1,69 @@
+/**
+ * Session-scoped SSH target for the right-sidebar operations console.
+ *
+ * The right sidebar follows the selected Session. Its operations must therefore
+ * resolve from that Session's cwd → SSH workspace anchor, never from a host
+ * picker inside an individual operation tab.
+ */
+import type { SshWorkspaceRecord } from '../../protocol.ts'
+import type { SessionGateList } from '../session-connect-gate.ts'
+import { makeAnchorWorkspaceResolver } from '../session-connect-gate.ts'
+import type { WorkspaceManager } from '../state.ts'
+
+/** Fixed SSH identity inherited from the currently selected Session. */
+export interface SessionSshTarget {
+  sessionId: string
+  workspaceId: string
+  alias: string
+  remoteRoot: string
+}
+
+/** React-compatible external store; null means the Session is local/unbound. */
+export interface SessionSshTargetSource {
+  subscribe(listener: () => void): () => void
+  getSnapshot(): SessionSshTarget | null
+}
+
+/** Build one stable Session → SSH target source over the public session list and workspace manager. */
+export function createSessionSshTargetSource(
+  sessions: SessionGateList,
+  manager: Pick<WorkspaceManager, 'getSnapshot' | 'subscribe'>,
+): SessionSshTargetSource {
+  const workspaceForCwd = makeAnchorWorkspaceResolver<SshWorkspaceRecord>(
+    () => manager.getSnapshot().workspaces,
+  )
+  let cachedKey: string | undefined
+  let cachedValue: SessionSshTarget | null = null
+
+  const getSnapshot = (): SessionSshTarget | null => {
+    const sessionId = sessions.currentSessionId()
+    const cwd = sessionId === undefined ? undefined : sessions.sessionCwd(sessionId)
+    const workspace = workspaceForCwd(cwd)
+    const key = workspace === undefined || sessionId === undefined
+      ? `local\u0000${sessionId ?? ''}\u0000${cwd ?? ''}`
+      : `ssh\u0000${sessionId}\u0000${workspace.id}\u0000${workspace.alias}\u0000${workspace.remoteRoot}`
+    if (key === cachedKey) return cachedValue
+    cachedKey = key
+    cachedValue = workspace === undefined || sessionId === undefined
+      ? null
+      : {
+          sessionId,
+          workspaceId: workspace.id,
+          alias: workspace.alias,
+          remoteRoot: workspace.remoteRoot,
+        }
+    return cachedValue
+  }
+
+  return {
+    getSnapshot,
+    subscribe: (listener) => {
+      const disposeSessions = sessions.subscribe(listener)
+      const disposeWorkspaces = manager.subscribe(listener)
+      return () => {
+        disposeSessions()
+        disposeWorkspaces()
+      }
+    },
+  }
+}

package/src/client/state.ts

@@ -5,7 +5,8 @@
  * between polls. There is NO global local/remote mode anymore — a session's
  * execution world is decided host-side by its cwd (an anchor path of an SSH
  * workspace routes remote); this client state only drives the management UI
- * (list / create / delete) and the sidebar title annotations.
+ * (list / create / delete) and the sidebar row decoration (remote badge + the
+ * shell's hover card path rewrite).
  */
 import type { SshWorkspaceRecord } from '../protocol.ts'
 import type { WorkspaceApi } from './api.ts'
@@ -42,6 +43,8 @@ export class WorkspaceManager {
   private state: WorkspaceManagerState = { workspaces: [], error: null }
   private readonly listeners = new Set<() => void>()
   private timer: number | undefined
+  /** Monotonic list-workspaces request id; only the newest request may commit. */
+  private refreshSequence = 0
 
   constructor(private readonly api: WorkspaceApi) {}
 
@@ -61,8 +64,10 @@ export class WorkspaceManager {
   }
 
   async refresh(): Promise<void> {
+    const request = ++this.refreshSequence
     try {
       const workspaces = await this.api.listWorkspaces()
+      if (request !== this.refreshSequence) return
       const next: WorkspaceManagerState = { workspaces, error: null }
       // Emit only on real change: identical polls keep the same snapshot
       // reference, so subscribers (badges, the manager menu) don't re-run
@@ -72,6 +77,7 @@ export class WorkspaceManager {
         this.emit()
       }
     } catch (error) {
+      if (request !== this.refreshSequence) return
       const message = error instanceof Error ? error.message : String(error)
       if (this.state.error !== message) {
         this.state = { ...this.state, error: message }
@@ -86,6 +92,8 @@ export class WorkspaceManager {
   }
 
   stop(): void {
+    // Invalidate an in-flight poll so a stopped manager cannot publish later.
+    this.refreshSequence += 1
     if (this.timer !== undefined) {
       window.clearInterval(this.timer)
       this.timer = undefined