dsh-winrm 0.1.0

package/src/client/panel/ServicesTab.tsx

@@ -0,0 +1,123 @@
+/**
+ * Services tab: list Windows services for a host, filter, and run
+ * start/stop/restart/startup-type actions.
+ */
+import { useCallback, useEffect, useRef, useState } from 'react'
+import type { WinrmApi } from '../api.ts'
+import type { ServiceInfo } from '../../protocol.ts'
+import { errorMessage, tt } from './helpers.ts'
+import css from './panel.module.css'
+
+/** Services tab props. */
+export interface ServicesTabProps {
+  api: WinrmApi
+}
+
+/** The services table with host picker and actions. */
+export function ServicesTab({ api }: ServicesTabProps) {
+  const [aliases, setAliases] = useState<string[]>([])
+  const [alias, setAlias] = useState('')
+  const [services, setServices] = useState<ServiceInfo[] | null>(null)
+  const [filter, setFilter] = useState('')
+  const [error, setError] = useState<string | null>(null)
+  const [notice, setNotice] = useState<string | null>(null)
+  const [acting, setActing] = useState<string | null>(null)
+  const mountedRef = useRef(true)
+  useEffect(() => () => { mountedRef.current = false }, [])
+
+  useEffect(() => {
+    void api.listHosts().then(list => setAliases(list.map(h => h.alias))).catch(() => { /* ignore */ })
+  }, [api])
+
+  const load = useCallback(async (target: string): Promise<void> => {
+    try {
+      const list = await api.listServices(target)
+      if (!mountedRef.current) return
+      setServices(list)
+      setError(null)
+    } catch (cause) {
+      if (!mountedRef.current) return
+      setError(errorMessage(cause))
+      setServices(null)
+    }
+  }, [api])
+
+  useEffect(() => {
+    if (alias === '') return
+    setServices(null)
+    void load(alias)
+  }, [alias, load])
+
+  const act = async (name: string, action: string): Promise<void> => {
+    setActing(name)
+    setNotice(null)
+    setError(null)
+    try {
+      const updated = await api.serviceAction(alias, name, action)
+      setNotice(tt('services.actionOk', { name: updated.name, status: updated.status }))
+      void load(alias)
+    } catch (cause) {
+      setError(tt('services.actionFail', { error: errorMessage(cause) }))
+    } finally {
+      setActing(null)
+    }
+  }
+
+  const needle = filter.trim().toLowerCase()
+  const visible = services === null ? [] : services.filter(s =>
+    s.name.toLowerCase().includes(needle) || s.displayName.toLowerCase().includes(needle))
+
+  return (
+    <div className={css.fillBody}>
+      <div className={css.toolbar}>
+        <select className={css.input} value={alias} onChange={event => { setAlias(event.target.value) }}>
+          <option value="">{tt('services.select')}</option>
+          {aliases.map(a => <option key={a} value={a}>{a}</option>)}
+        </select>
+        <input className={css.search} type="search" placeholder={tt('services.filter')} value={filter} onChange={event => { setFilter(event.target.value) }} />
+        <div className={css.toolbarSpacer} />
+        <button type="button" className={css.ghostButton} disabled={alias === ''} onClick={() => { void load(alias) }}>{tt('common.refresh')}</button>
+      </div>
+      {notice !== null && <div className={css.banner} data-kind="ok">{notice}</div>}
+      {error !== null && <div className={css.banner} data-kind="error">{error}</div>}
+      {services === null && alias !== '' && error === null && <div className={css.loading}>{tt('common.loading')}</div>}
+      {services !== null && (
+        <div className={css.tableWrap}>
+          <table className={css.table}>
+            <thead>
+              <tr>
+                <th>{tt('services.name')}</th>
+                <th>{tt('services.displayName')}</th>
+                <th>{tt('services.status')}</th>
+                <th>{tt('services.startMode')}</th>
+                <th>{tt('services.startName')}</th>
+                <th>{tt('hosts.col.actions')}</th>
+              </tr>
+            </thead>
+            <tbody>
+              {visible.map(service => (
+                <tr key={service.name}>
+                  <td className={css.mono}>{service.name}</td>
+                  <td>{service.displayName}</td>
+                  <td><span className={css.badge} data-kind={service.status === 'Running' ? 'ok' : 'muted'}>{service.status}</span></td>
+                  <td>{service.startMode}</td>
+                  <td className={css.cellMuted}>{service.startName}</td>
+                  <td>
+                    <div className={css.actions}>
+                      <button type="button" className={css.linkButton} disabled={acting === service.name} onClick={() => { void act(service.name, 'start') }}>{tt('services.start')}</button>
+                      <button type="button" className={css.linkButton} disabled={acting === service.name} onClick={() => { void act(service.name, 'stop') }}>{tt('services.stop')}</button>
+                      <button type="button" className={css.linkButton} disabled={acting === service.name} onClick={() => { void act(service.name, 'restart') }}>{tt('services.restart')}</button>
+                      <button type="button" className={css.linkButton} disabled={acting === service.name} onClick={() => { void act(service.name, 'set-auto') }}>{tt('services.auto')}</button>
+                      <button type="button" className={css.linkButton} disabled={acting === service.name} onClick={() => { void act(service.name, 'set-manual') }}>{tt('services.manual')}</button>
+                      <button type="button" className={css.linkButton} disabled={acting === service.name} onClick={() => { void act(service.name, 'set-disabled') }}>{tt('services.disabled')}</button>
+                    </div>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </div>
+  )
+}

package/src/client/panel/TransferTab.tsx

@@ -0,0 +1,161 @@
+/**
+ * Transfer tab: browse remote directories (ls), download files to the local
+ * machine, and upload local files to the remote host. Transfers ride the
+ * NDJSON progress stream (upload) / content-length progress (download).
+ */
+import { useCallback, useEffect, useRef, useState } from 'react'
+import type { WinrmApi } from '../api.ts'
+import type { RemoteDirEntry, TransferProgress } from '../../protocol.ts'
+import { errorMessage, formatBytes, tt } from './helpers.ts'
+import css from './panel.module.css'
+
+/** Transfer tab props. */
+export interface TransferTabProps {
+  api: WinrmApi
+}
+
+/** One remote directory entry with a clickable path. */
+function joinPath(dir: string, name: string): string {
+  return dir.replace(/[\\/]+$/, '') + '\\' + name
+}
+
+/** The file browser with upload/download. */
+export function TransferTab({ api }: TransferTabProps) {
+  const [aliases, setAliases] = useState<string[]>([])
+  const [alias, setAlias] = useState('')
+  const [dir, setDir] = useState('C:\\')
+  const [entries, setEntries] = useState<RemoteDirEntry[] | null>(null)
+  const [error, setError] = useState<string | null>(null)
+  const [notice, setNotice] = useState<string | null>(null)
+  const [progress, setProgress] = useState<TransferProgress | null>(null)
+  const fileInputRef = useRef<HTMLInputElement | null>(null)
+  const mountedRef = useRef(true)
+  useEffect(() => () => { mountedRef.current = false }, [])
+
+  useEffect(() => {
+    void api.listHosts().then(list => setAliases(list.map(h => h.alias))).catch(() => { /* ignore */ })
+  }, [api])
+
+  const load = useCallback(async (target: string, path: string): Promise<void> => {
+    try {
+      const list = await api.ls(target, path)
+      if (!mountedRef.current) return
+      setEntries(list)
+      setDir(path)
+      setError(null)
+    } catch (cause) {
+      if (!mountedRef.current) return
+      setError(errorMessage(cause))
+      setEntries(null)
+    }
+  }, [api])
+
+  const open = (): void => {
+    if (alias === '' || dir === '') return
+    setEntries(null)
+    void load(alias, dir)
+  }
+
+  const pickAlias = (value: string): void => {
+    setAlias(value)
+    setEntries(null)
+    if (value !== '') void load(value, 'C:\\')
+  }
+
+  const download = async (entry: RemoteDirEntry): Promise<void> => {
+    if (entry.type !== 'file') return
+    setProgress({ phase: 'transferring', file: entry.name, transferred: 0, total: 0, percent: 0 })
+    setError(null)
+    try {
+      const outcome = await api.downloadFile(alias, joinPath(dir, entry.name), p => setProgress(p))
+      setNotice(tt('transfer.downloaded', { bytes: outcome.bytes }))
+    } catch (cause) {
+      setError(tt('transfer.fail', { error: errorMessage(cause) }))
+    } finally {
+      setProgress(null)
+    }
+  }
+
+  const upload = async (file: File): Promise<void> => {
+    if (file === undefined) return
+    const remotePath = joinPath(dir, file.name)
+    setProgress({ phase: 'transferring', file: file.name, transferred: 0, total: file.size, percent: 0 })
+    setError(null)
+    try {
+      const outcome = await api.uploadFile(file, alias, remotePath, p => setProgress(p))
+      setNotice(tt('transfer.uploaded', { bytes: outcome.transferredBytes }))
+      void load(alias, dir)
+    } catch (cause) {
+      setError(tt('transfer.fail', { error: errorMessage(cause) }))
+    } finally {
+      setProgress(null)
+    }
+  }
+
+  return (
+    <div className={css.fillBody}>
+      <div className={css.toolbar}>
+        <select className={css.input} value={alias} onChange={event => { pickAlias(event.target.value) }}>
+          <option value="">{tt('transfer.select')}</option>
+          {aliases.map(a => <option key={a} value={a}>{a}</option>)}
+        </select>
+        <input className={css.search} value={dir} onChange={event => { setDir(event.target.value) }} onKeyDown={event => { if (event.key === 'Enter') open() }} />
+        <button type="button" className={css.primaryButton} disabled={alias === '' || dir === ''} onClick={open}>{tt('transfer.go')}</button>
+        <button type="button" className={css.ghostButton} disabled={alias === ''} onClick={() => { void load(alias, dir.replace(/[\\/][^\\/]*$/, '') || 'C:\\') }}>{tt('transfer.up')}</button>
+        <button type="button" className={css.ghostButton} disabled={alias === ''} onClick={() => { void load(alias, 'C:\\') }}>{tt('transfer.root')}</button>
+        <div className={css.toolbarSpacer} />
+        <button type="button" className={css.ghostButton} disabled={alias === ''} onClick={() => { fileInputRef.current?.click() }}>{tt('transfer.upload')}</button>
+        <input ref={fileInputRef} type="file" style={{ display: 'none' }} onChange={event => {
+          const file = event.target.files?.[0]
+          if (file !== undefined) void upload(file)
+          event.target.value = ''
+        }} />
+      </div>
+      {notice !== null && <div className={css.banner} data-kind="ok">{notice}</div>}
+      {error !== null && <div className={css.banner} data-kind="error">{error}</div>}
+      {progress !== null && (
+        <div className={css.banner} data-kind="ok">
+          {progress.phase === 'transferring' ? (progress.total > 0 ? tt('transfer.downloading') : tt('transfer.uploading')) : tt('transfer.uploading')}
+          {' '}{formatBytes(progress.transferred)}{progress.total > 0 ? ' / ' + formatBytes(progress.total) + ' (' + progress.percent + '%)' : ''}
+        </div>
+      )}
+      {entries === null && alias !== '' && error === null && <div className={css.loading}>{tt('common.loading')}</div>}
+      {entries !== null && (
+        <div className={css.tableWrap}>
+          <table className={css.table}>
+            <thead>
+              <tr>
+                <th>{tt('transfer.name')}</th>
+                <th>{tt('transfer.type')}</th>
+                <th>{tt('transfer.size')}</th>
+                <th>{tt('transfer.modified')}</th>
+                <th>{tt('hosts.col.actions')}</th>
+              </tr>
+            </thead>
+            <tbody>
+              {entries.map(entry => (
+                <tr key={entry.name}>
+                  <td>
+                    {entry.type === 'dir' ? (
+                      <button type="button" className={css.linkButton} onClick={() => { void load(alias, joinPath(dir, entry.name)) }}>📁 {entry.name}</button>
+                    ) : (
+                      <span className={css.mono}>{entry.name}</span>
+                    )}
+                  </td>
+                  <td>{entry.type === 'dir' ? tt('transfer.dir') : tt('transfer.file')}</td>
+                  <td>{entry.type === 'file' ? formatBytes(entry.size) : ''}</td>
+                  <td className={css.cellMuted}>{entry.mtimeMs > 0 ? new Date(entry.mtimeMs).toLocaleString() : ''}</td>
+                  <td>
+                    {entry.type === 'file' && (
+                      <button type="button" className={css.linkButton} onClick={() => { void download(entry) }}>{tt('transfer.download')}</button>
+                    )}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </div>
+  )
+}

package/src/client/panel/WinrmPanel.tsx

@@ -0,0 +1,85 @@
+/**
+ * The WinRM operations panel shell: a header with a back control, a
+ * five-tab bar, and the active tab's content. Tab state lives here (reset to
+ * Hosts when the panel is reopened, since the keyed main slot unmounts the
+ * occupant on close); inactive tabs unmount, so each tab fetches its own data
+ * on activation. The hosts tab's connect action switches here to the console
+ * tab with the chosen alias preselected.
+ */
+import { useState } from 'react'
+import type { WinrmApi } from '../api.ts'
+import { tt } from './helpers.ts'
+import { ConsoleTab } from './ConsoleTab.tsx'
+import { HostsTab } from './HostsTab.tsx'
+import { ProcessesTab } from './ProcessesTab.tsx'
+import { ServicesTab } from './ServicesTab.tsx'
+import { TransferTab } from './TransferTab.tsx'
+import css from './panel.module.css'
+
+/** The panel's tab identifiers. */
+export type WinrmTab = 'hosts' | 'console' | 'services' | 'processes' | 'transfer'
+
+/** Panel shell props (the inject face supplied by the main-slot registration). */
+export interface WinrmPanelProps {
+  /** The WinRM API client every tab operates through. */
+  api: WinrmApi
+  /** Return to the Conversation (wired to ctx.layout.selectPanel(null)). */
+  onBack: () => void
+}
+
+/** The tab bar definition (labels resolved at render time). */
+const TABS: ReadonlyArray<{ id: WinrmTab; label: () => string }> = [
+  { id: 'hosts', label: () => tt('tab.hosts') },
+  { id: 'console', label: () => tt('tab.console') },
+  { id: 'services', label: () => tt('tab.services') },
+  { id: 'processes', label: () => tt('tab.processes') },
+  { id: 'transfer', label: () => tt('tab.transfer') },
+]
+
+/** A pending "connect this host" request handed to the console tab. */
+interface ConnectRequest {
+  alias: string
+  nonce: number
+}
+
+/** The tabbed WinRM panel. */
+export function WinrmPanel({ api, onBack }: WinrmPanelProps) {
+  const [activeTab, setActiveTab] = useState<WinrmTab>('hosts')
+  const [connectRequest, setConnectRequest] = useState<ConnectRequest | null>(null)
+
+  const handleConnect = (alias: string): void => {
+    setActiveTab('console')
+    setConnectRequest(prev => ({ alias, nonce: (prev?.nonce ?? 0) + 1 }))
+  }
+
+  return (
+    <div className={css.panel}>
+      <div className={css.panelHeader}>
+        <button
+          type="button"
+          className={`${css.ghostButton} ${css.backButton}`}
+          aria-label={tt('panel.backToConversation')}
+          onClick={onBack}
+        >
+          <span aria-hidden="true">‹</span>
+          <span>{tt('panel.backToConversation')}</span>
+        </button>
+        <h2 className={css.panelTitle}>{tt('panel.title')}</h2>
+      </div>
+      <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()}
+          </button>
+        ))}
+      </div>
+      <div className={css.panelContent}>
+        {activeTab === 'hosts' && <HostsTab api={api} onConnect={handleConnect} />}
+        {activeTab === 'console' && <ConsoleTab api={api} presetAlias={connectRequest?.alias} requestId={connectRequest?.nonce} />}
+        {activeTab === 'services' && <ServicesTab api={api} />}
+        {activeTab === 'processes' && <ProcessesTab api={api} />}
+        {activeTab === 'transfer' && <TransferTab api={api} />}
+      </div>
+    </div>
+  )
+}

package/src/client/panel/WinrmPanelIcon.tsx

@@ -0,0 +1,27 @@
+/**
+ * Sidebar `panellist` icon for the WinRM panel. The shell owns the row
+ * button and its label; this component only renders the glyph at the size
+ * and active state the row requests.
+ */
+import type { SidebarPanelIconOwnerProps } from '@deepseek-ai/dsh-client-ui-sidebar/client'
+
+/** One glyph contribution for the `sidebar.panellist` list slot. */
+export function WinrmPanelIcon({ size }: SidebarPanelIconOwnerProps) {
+  return (
+    <svg
+      viewBox="0 0 16 16"
+      width={size}
+      height={size}
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={1.3}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <rect x="2" y="2.5" width="12" height="11" rx="1.5" />
+      <path d="M2.5 6.5h11" />
+      <path d="M6 6.5v7" />
+    </svg>
+  )
+}

package/src/client/panel/helpers.ts

@@ -0,0 +1,33 @@
+/**
+ * Shared panel helpers: the active-dictionary pick (document-language based)
+ * bound to the dsh-winrm interpolator in locales.ts, plus a small
+ * error-message extractor.
+ */
+import { en, t, zh, type WinKey } from '../locales.ts'
+
+/** Template values accepted by the interpolator. */
+export type TranslateValues = Record<string, string | number>
+
+/** Active dictionary, picked by the document language at call time. */
+export function dictionary(): Record<string, string> {
+  const lang = typeof document !== 'undefined' ? document.documentElement.lang : 'zh'
+  return lang.toLowerCase().startsWith('en') ? { ...en } : { ...zh }
+}
+
+/** Translate a key with optional {name} template params (current language). */
+export function tt(key: WinKey, values?: TranslateValues): string {
+  return t(dictionary(), key, values)
+}
+
+/** Human-readable error text from an unknown thrown value. */
+export function errorMessage(error: unknown): string {
+  if (error instanceof Error) return error.message
+  return String(error)
+}
+
+/** Format a byte count into B/KB/MB. */
+export function formatBytes(bytes: number): string {
+  if (bytes >= 1024 * 1024) return (bytes / (1024 * 1024)).toFixed(1) + ' MB'
+  if (bytes >= 1024) return (bytes / 1024).toFixed(1) + ' KB'
+  return bytes + ' B'
+}