dsh-winrm 0.1.0

package/src/client/panel/ConsoleTab.tsx

@@ -0,0 +1,142 @@
+/**
+ * Console tab: a streaming PowerShell console over the /api/dsh-winrm
+ * WebSocket. Output renders into a monospace pre; commands are sent as stdin
+ * lines. Non-ASCII output may garble (transport decodes as ASCII) — the
+ * exec route/tool carries the UTF-8 envelope instead.
+ */
+import { useEffect, useRef, useState } from 'react'
+import type { ConsoleConnection, WinrmApi } from '../api.ts'
+import { errorMessage, tt } from './helpers.ts'
+import css from './panel.module.css'
+
+/** Console tab props. */
+export interface ConsoleTabProps {
+  api: WinrmApi
+  /** Alias to auto-connect (from the hosts tab). */
+  presetAlias?: string
+  /** Increments when a new connect request arrives. */
+  requestId?: number
+}
+
+interface SessionState {
+  alias: string
+  lines: string[]
+  connected: boolean
+  error?: string
+}
+
+/** The streaming PowerShell console. */
+export function ConsoleTab({ api, presetAlias, requestId }: ConsoleTabProps) {
+  const [aliases, setAliases] = useState<string[]>([])
+  const [session, setSession] = useState<SessionState | null>(null)
+  const [input, setInput] = useState('')
+  const [busy, setBusy] = useState(false)
+  const connRef = useRef<ConsoleConnection | null>(null)
+  const linesRef = useRef<string[]>([])
+  const bottomRef = useRef<HTMLDivElement | null>(null)
+
+  // Load host aliases once.
+  useEffect(() => {
+    void api.listHosts().then(list => setAliases(list.map(h => h.alias))).catch(() => { /* ignore */ })
+  }, [api])
+
+  const pushLines = (text: string): void => {
+    linesRef.current = [...linesRef.current, ...text.split('\n')].slice(-5000)
+    setSession(prev => prev === null ? prev : { ...prev, lines: [...linesRef.current] })
+  }
+
+  // Auto-connect when the hosts tab requests it.
+  useEffect(() => {
+    if (presetAlias !== undefined && presetAlias !== '' && requestId !== undefined) {
+      connect(presetAlias)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [presetAlias, requestId])
+
+  useEffect(() => {
+    bottomRef.current?.scrollIntoView({ block: 'end' })
+  }, [session?.lines])
+
+  useEffect(() => () => {
+    connRef.current?.close()
+    connRef.current = null
+  }, [])
+
+  const connect = (alias: string): void => {
+    connRef.current?.close()
+    linesRef.current = []
+    setSession({ alias, lines: [], connected: false })
+    setBusy(true)
+    const connection = api.openConsole(alias)
+    connRef.current = connection
+    connection.onReady = () => {
+      setBusy(false)
+      setSession(prev => prev === null ? prev : { ...prev, connected: true })
+      pushLines(tt('console.connected', { alias }))
+    }
+    connection.onOutput = (data) => { pushLines(data) }
+    connection.onExit = (code, error) => {
+      connRef.current = null
+      setBusy(false)
+      setSession(prev => prev === null ? prev : {
+        ...prev,
+        connected: false,
+        error: error !== undefined ? errorMessage(error) : tt('console.disconnected'),
+      })
+    }
+  }
+
+  const disconnect = (): void => {
+    connRef.current?.close()
+    connRef.current = null
+    setSession(prev => prev === null ? prev : { ...prev, connected: false, error: tt('console.disconnected') })
+  }
+
+  const send = (): void => {
+    const command = input
+    if (command.trim() === '' || connRef.current === null) return
+    connRef.current?.send(command + '\r\n')
+    setInput('')
+  }
+
+  return (
+    <div className={css.fillBody}>
+      {session === null && (
+        <div className={css.controls}>
+          <select className={css.input} value="" onChange={event => { if (event.target.value !== '') connect(event.target.value) }}>
+            <option value="">{tt('console.select')}</option>
+            {aliases.map(alias => <option key={alias} value={alias}>{alias}</option>)}
+          </select>
+        </div>
+      )}
+      {session !== null && (
+        <div className={css.consoleWrap}>
+          <div className={css.consoleHeader}>
+            <span className={css.mono}>{session.alias}</span>
+            {session.connected && <span className={css.badge} data-kind="ok">{tt('console.connected', { alias: session.alias }).split('—')[0]}</span>}
+            <div className={css.toolbarSpacer} />
+            {busy && <span className={css.loading}>{tt('console.connecting', { alias: session.alias })}</span>}
+            <button type="button" className={css.ghostButton} onClick={disconnect}>{tt('console.disconnect')}</button>
+          </div>
+          <pre className={css.consoleOutput}>
+            {session.lines.join('\n')}
+            <div ref={bottomRef} />
+          </pre>
+          {session.error !== undefined && <div className={css.banner} data-kind="error">{session.error}</div>}
+          <div className={css.consoleInputRow}>
+            <input
+              className={css.input}
+              value={input}
+              placeholder={tt('console.inputPlaceholder')}
+              disabled={!session.connected}
+              onChange={event => { setInput(event.target.value) }}
+              onKeyDown={event => { if (event.key === 'Enter') send() }}
+            />
+            <button type="button" className={css.primaryButton} disabled={!session.connected} onClick={send}>{tt('console.send')}</button>
+          </div>
+          <div className={css.utf8Note}>{tt('console.utf8Note')}</div>
+        </div>
+      )}
+    </div>
+  )
+}

package/src/client/panel/HostFormDialog.tsx

@@ -0,0 +1,142 @@
+/**
+ * Host form dialog: create/edit one Windows host entry. Passwords are never
+ * returned by the API — the edit form shows a placeholder and keeps the
+ * stored secret unless a new one is typed.
+ */
+import { useEffect, useState } from 'react'
+import type { WinrmApi } from '../api.ts'
+import type { WinHostPayload, WinHostSummary } from '../../protocol.ts'
+import { errorMessage, tt } from './helpers.ts'
+import css from './panel.module.css'
+
+/** Host form dialog props. */
+export interface HostFormDialogProps {
+  api: WinrmApi
+  /** The host being edited, or null for create. */
+  editing: WinHostSummary | null
+  onClose: () => void
+  onSaved: () => void
+}
+
+/** The create/edit host dialog. */
+export function HostFormDialog({ api, editing, onClose, onSaved }: HostFormDialogProps) {
+  const [alias, setAlias] = useState(editing?.alias ?? '')
+  const [host, setHost] = useState(editing?.host ?? '')
+  const [port, setPort] = useState(String(editing?.port ?? 5985))
+  const [user, setUser] = useState(editing?.user ?? '')
+  const [password, setPassword] = useState('')
+  const [transport, setTransport] = useState<'http' | 'https'>(editing?.transport ?? 'http')
+  const [rejectUnauthorized, setRejectUnauthorized] = useState(editing?.rejectUnauthorized ?? false)
+  const [environment, setEnvironment] = useState(editing?.environment ?? '')
+  const [tags, setTags] = useState(editing?.tags.join(', ') ?? '')
+  const [description, setDescription] = useState(editing?.description ?? '')
+  const [error, setError] = useState<string | null>(null)
+  const [saving, setSaving] = useState(false)
+
+  useEffect(() => {
+    const onKey = (event: KeyboardEvent): void => {
+      if (event.key === 'Escape') onClose()
+    }
+    window.addEventListener('keydown', onKey)
+    return () => { window.removeEventListener('keydown', onKey) }
+  }, [onClose])
+
+  const submit = async (): Promise<void> => {
+    setSaving(true)
+    setError(null)
+    const payload: WinHostPayload = {
+      host: host.trim(),
+      port: Number.parseInt(port, 10) || 5985,
+      user: user.trim(),
+      transport,
+      rejectUnauthorized,
+      environment: environment.trim() || undefined,
+      tags: tags.split(',').map(tag => tag.trim()).filter(tag => tag !== ''),
+      description: description.trim() || undefined,
+    }
+    if (password !== '') payload.auth = { kind: 'password', password }
+    try {
+      if (editing === null) {
+        payload.alias = alias.trim()
+        await api.createHost(payload)
+      } else {
+        await api.updateHost(editing.alias, payload)
+      }
+      onSaved()
+    } catch (cause) {
+      setError(errorMessage(cause))
+      setSaving(false)
+    }
+  }
+
+  return (
+    <div className={css.dialogOverlay}>
+      <div className={css.dialog}>
+        <h3 className={css.dialogTitle}>{editing === null ? tt('form.title.create') : tt('form.title.edit', { alias: editing.alias })}</h3>
+        <div className={css.formCard}>
+          {editing === null && (
+            <label className={css.field}>
+              <span className={css.fieldLabel}>{tt('form.alias')}</span>
+              <input className={css.input} value={alias} onChange={event => { setAlias(event.target.value) }} placeholder={tt('form.aliasHint')} />
+            </label>
+          )}
+          <label className={css.field}>
+            <span className={css.fieldLabel}>{tt('form.host')}</span>
+            <input className={css.input} value={host} onChange={event => { setHost(event.target.value) }} />
+          </label>
+          <div className={css.formRow}>
+            <label className={css.field}>
+              <span className={css.fieldLabel}>{tt('form.port')}</span>
+              <input className={css.input} type="number" value={port} onChange={event => { setPort(event.target.value) }} />
+            </label>
+            <label className={css.field}>
+              <span className={css.fieldLabel}>{tt('form.transport')}</span>
+              <select className={css.input} value={transport} onChange={event => {
+                const next = event.target.value as 'http' | 'https'
+                setTransport(next)
+                if (port === '5985' || port === '5986') setPort(next === 'https' ? '5986' : '5985')
+              }}>
+                <option value="http">{tt('form.transport.http')}</option>
+                <option value="https">{tt('form.transport.https')}</option>
+              </select>
+            </label>
+          </div>
+          <label className={css.field}>
+            <span className={css.fieldLabel}>{tt('form.user')}</span>
+            <input className={css.input} value={user} onChange={event => { setUser(event.target.value) }} placeholder={tt('form.userHint')} />
+          </label>
+          <label className={css.field}>
+            <span className={css.fieldLabel}>{tt('form.password')}</span>
+            <input className={css.input} type="password" value={password} onChange={event => { setPassword(event.target.value) }} placeholder={editing !== null ? tt('form.passwordPlaceholder') : undefined} />
+            <span className={css.fieldHint}>{tt('form.passwordHint')}</span>
+          </label>
+          {transport === 'https' && (
+            <label className={css.checkRow}>
+              <input type="checkbox" checked={!rejectUnauthorized} onChange={event => { setRejectUnauthorized(!event.target.checked) }} />
+              <span>{tt('form.rejectUnauthorized')}</span>
+            </label>
+          )}
+          <label className={css.field}>
+            <span className={css.fieldLabel}>{tt('form.environment')}</span>
+            <input className={css.input} value={environment} onChange={event => { setEnvironment(event.target.value) }} />
+          </label>
+          <label className={css.field}>
+            <span className={css.fieldLabel}>{tt('form.tags')}</span>
+            <input className={css.input} value={tags} onChange={event => { setTags(event.target.value) }} />
+          </label>
+          <label className={css.field}>
+            <span className={css.fieldLabel}>{tt('form.description')}</span>
+            <input className={css.input} value={description} onChange={event => { setDescription(event.target.value) }} />
+          </label>
+          {error !== null && <div className={css.formError}>{tt('form.error', { error })}</div>}
+          <div className={css.actions}>
+            <button type="button" className={css.ghostButton} onClick={onClose}>{tt('form.cancel')}</button>
+            <button type="button" className={css.primaryButton} disabled={saving} onClick={() => { void submit() }}>
+              {saving ? tt('common.loading') : tt('form.save')}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/client/panel/HostsTab.tsx

@@ -0,0 +1,153 @@
+/**
+ * Hosts tab: the host table with search (debounced through listHosts),
+ * add/edit/delete/test actions, and a connect action that hands the alias to
+ * the console tab via onConnect.
+ */
+import { useCallback, useEffect, useRef, useState, type ReactNode } from 'react'
+import type { WinrmApi } from '../api.ts'
+import type { TestResult, WinHostSummary } from '../../protocol.ts'
+import { errorMessage, tt } from './helpers.ts'
+import { HostFormDialog } from './HostFormDialog.tsx'
+import css from './panel.module.css'
+
+/** Hosts tab props. */
+export interface HostsTabProps {
+  api: WinrmApi
+  /** Connect the given alias in the console tab. */
+  onConnect: (alias: string) => void
+}
+
+/** The host-form dialog invocation. */
+type DialogState = { mode: 'create' } | { mode: 'edit'; host: WinHostSummary }
+
+/** The hosts table plus its toolbar and dialogs. */
+export function HostsTab({ api, onConnect }: HostsTabProps) {
+  const [hosts, setHosts] = useState<WinHostSummary[] | null>(null)
+  const [error, setError] = useState<string | null>(null)
+  const [search, setSearch] = useState('')
+  const [testingAlias, setTestingAlias] = useState<string | null>(null)
+  const [testResults, setTestResults] = useState<Record<string, TestResult>>({})
+  const [dialog, setDialog] = useState<DialogState | null>(null)
+  const seqRef = useRef(0)
+  const mountedRef = useRef(true)
+  useEffect(() => () => { mountedRef.current = false }, [])
+
+  const load = useCallback(async (query?: string): Promise<void> => {
+    const seq = ++seqRef.current
+    try {
+      const list = await api.listHosts(query)
+      if (!mountedRef.current || seq !== seqRef.current) return
+      setHosts(list)
+      setError(null)
+    } catch (cause) {
+      if (!mountedRef.current || seq !== seqRef.current) return
+      setError(errorMessage(cause))
+    }
+  }, [api])
+
+  useEffect(() => { void load() }, [load])
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      const query = search.trim()
+      void load(query === '' ? undefined : query)
+    }, 300)
+    return () => { clearTimeout(timer) }
+  }, [search, load])
+
+  const runTest = async (alias: string): Promise<void> => {
+    setTestingAlias(alias)
+    try {
+      const result = await api.testHost(alias)
+      setTestResults(prev => ({ ...prev, [alias]: result }))
+    } catch (cause) {
+      setTestResults(prev => ({ ...prev, [alias]: { ok: false, error: errorMessage(cause) } }))
+    } finally {
+      setTestingAlias(null)
+    }
+  }
+
+  const deleteHost = async (alias: string): Promise<void> => {
+    if (!window.confirm(tt('hosts.deleteConfirm', { alias }))) return
+    try {
+      await api.deleteHost(alias)
+      void load()
+    } catch (cause) {
+      setError(errorMessage(cause))
+    }
+  }
+
+  const renderHostRow = (host: WinHostSummary): 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="password">{host.transport === 'https' ? 'HTTPS' : 'HTTP'}</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.connect')}</button>
+          </div>
+        </td>
+      </tr>
+    )
+  }
+
+  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) }} />
+        <div className={css.toolbarSpacer} />
+        <button type="button" className={css.ghostButton} onClick={() => { void load(search.trim() || undefined) }}>{tt('common.refresh')}</button>
+        <button type="button" className={css.primaryButton} onClick={() => { setDialog({ mode: 'create' }) }}>{tt('hosts.add')}</button>
+      </div>
+      {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 && (
+        <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.transport')}</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(renderHostRow)}
+            </tbody>
+          </table>
+        </div>
+      )}
+      {dialog !== null && (
+        <HostFormDialog
+          api={api}
+          editing={dialog.mode === 'edit' ? dialog.host : null}
+          onClose={() => { setDialog(null) }}
+          onSaved={() => { setDialog(null); void load() }}
+        />
+      )}
+    </div>
+  )
+}

package/src/client/panel/ProcessesTab.tsx

@@ -0,0 +1,119 @@
+/**
+ * Processes tab: list processes for a host, filter, and kill by id.
+ */
+import { useCallback, useEffect, useRef, useState } from 'react'
+import type { WinrmApi } from '../api.ts'
+import type { ProcessInfo } from '../../protocol.ts'
+import { errorMessage, tt } from './helpers.ts'
+import css from './panel.module.css'
+
+/** Processes tab props. */
+export interface ProcessesTabProps {
+  api: WinrmApi
+}
+
+/** The processes table with host picker and kill actions. */
+export function ProcessesTab({ api }: ProcessesTabProps) {
+  const [aliases, setAliases] = useState<string[]>([])
+  const [alias, setAlias] = useState('')
+  const [processes, setProcesses] = useState<ProcessInfo[] | null>(null)
+  const [filter, setFilter] = useState('')
+  const [error, setError] = useState<string | null>(null)
+  const [notice, setNotice] = useState<string | null>(null)
+  const [killing, setKilling] = useState<number | 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.listProcesses(target)
+      if (!mountedRef.current) return
+      setProcesses(list)
+      setError(null)
+    } catch (cause) {
+      if (!mountedRef.current) return
+      setError(errorMessage(cause))
+      setProcesses(null)
+    }
+  }, [api])
+
+  useEffect(() => {
+    if (alias === '') return
+    setProcesses(null)
+    void load(alias)
+  }, [alias, load])
+
+  const kill = async (process: ProcessInfo): Promise<void> => {
+    if (!window.confirm(tt('processes.killConfirm', { name: process.name, id: process.id }))) return
+    setKilling(process.id)
+    setNotice(null)
+    setError(null)
+    try {
+      await api.killProcess(alias, process.id)
+      setNotice(tt('processes.killed', { id: process.id }))
+      void load(alias)
+    } catch (cause) {
+      setError(tt('processes.killFail', { error: errorMessage(cause) }))
+    } finally {
+      setKilling(null)
+    }
+  }
+
+  const needle = filter.trim().toLowerCase()
+  const visible = processes === null ? [] : processes.filter(p => p.name.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('processes.select')}</option>
+          {aliases.map(a => <option key={a} value={a}>{a}</option>)}
+        </select>
+        <input className={css.search} type="search" placeholder={tt('processes.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>}
+      {processes === null && alias !== '' && error === null && <div className={css.loading}>{tt('common.loading')}</div>}
+      {processes !== null && (
+        <div className={css.tableWrap}>
+          <table className={css.table}>
+            <thead>
+              <tr>
+                <th>{tt('processes.id')}</th>
+                <th>{tt('processes.name')}</th>
+                <th>{tt('processes.cpu')}</th>
+                <th>{tt('processes.memMB')}</th>
+                <th>{tt('processes.startTime')}</th>
+                <th>{tt('processes.path')}</th>
+                <th>{tt('hosts.col.actions')}</th>
+              </tr>
+            </thead>
+            <tbody>
+              {visible.map(process => (
+                <tr key={process.id}>
+                  <td className={css.mono}>{process.id}</td>
+                  <td>{process.name}</td>
+                  <td>{process.cpu ?? ''}</td>
+                  <td>{process.memMB ?? ''}</td>
+                  <td className={css.cellMuted}>{process.startTime ?? ''}</td>
+                  <td className={css.cellMuted} title={process.path ?? ''}>{process.path ?? ''}</td>
+                  <td>
+                    <button type="button" className={css.linkButton} data-danger disabled={killing === process.id} onClick={() => { void kill(process) }}>
+                      {killing === process.id ? tt('common.loading') : tt('processes.kill')}
+                    </button>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </div>
+  )
+}