@@ -304,27 +284,15 @@ export default function NodeBackendLogs() {
) : filteredLines.length === 0 ? (
+
{filteredLines.map((line, i) => {
const badge = STREAM_BADGE[line.stream] || STREAM_BADGE.stdout
return (
@@ -332,28 +300,17 @@ export default function NodeBackendLogs() {
key={i}
data-log-line
data-timestamp={line.timestamp}
- style={{
- display: 'flex',
- gap: showDetails ? 'var(--spacing-sm)' : undefined,
- padding: '2px var(--spacing-sm)',
- borderBottom: '1px solid var(--color-border-subtle, rgba(255,255,255,0.03))',
- alignItems: 'flex-start',
- }}
+ className={`node-backend-logs__line${showDetails ? ' has-details' : ''}`}
>
{showDetails && (<>
-
+
{formatTimestamp(line.timestamp)}
-
- {badge.label}
+
+ {badge}
)}
-
+
{line.text}
diff --git a/core/http/react-ui/src/pages/NodeDetail.jsx b/core/http/react-ui/src/pages/NodeDetail.jsx
index 0796de103242..37e51ffef5f5 100644
--- a/core/http/react-ui/src/pages/NodeDetail.jsx
+++ b/core/http/react-ui/src/pages/NodeDetail.jsx
@@ -167,7 +167,7 @@ export default function NodeDetail() {
{model.state} {model.in_flight ?? 0}
navigate(`/app/node-backend-logs/${encodeURIComponent(id)}/${encodeURIComponent(processKey)}`) },
+ { key: 'logs', icon: 'fa-terminal', label: 'View logs', onClick: () => navigate(`/app/node-backend-logs/${encodeURIComponent(id)}/${encodeURIComponent(processKey)}`, { state: { from: `/app/nodes/${encodeURIComponent(id)}` } }) },
{ divider: true },
{ key: 'unload', icon: 'fa-stop', label: 'Unload model…', danger: true, onClick: () => setConfirmUnload({ modelName: model.model_name, inFlight: model.in_flight ?? 0 }) },
]} />
diff --git a/core/http/react-ui/src/pages/Nodes.jsx b/core/http/react-ui/src/pages/Nodes.jsx
index 52ae41930cf7..2db13f44aeaa 100644
--- a/core/http/react-ui/src/pages/Nodes.jsx
+++ b/core/http/react-ui/src/pages/Nodes.jsx
@@ -11,41 +11,70 @@ import NodeFleetTable from '../components/nodes/NodeFleetTable'
import NodeInspector from '../components/nodes/NodeInspector'
import ModelFleetTable from '../components/nodes/ModelFleetTable'
import ModelInspector from '../components/nodes/ModelInspector'
+import useInspectorDrawer from '../components/nodes/useInspectorDrawer'
import ImageSelector, { dockerFlags, dockerImage, useImageSelector } from '../components/ImageSelector'
function CommandBlock({ command, addToast }) {
+ const { t } = useTranslation('admin')
const copy = () => {
navigator.clipboard.writeText(command)
- addToast('Copied to clipboard', 'success', 2000)
+ addToast(t('nodes.workerSetup.copied'), 'success', 2000)
}
- return
+ return
}
-function WorkerHintCard({ addToast, nodeType = 'backend', hasWorkers }) {
+function WorkerSetupDrawer({ open, onClose, addToast }) {
+ const { t } = useTranslation('admin')
const frontendUrl = window.location.origin
+ const [nodeType, setNodeType] = useState('backend')
const { selected, setSelected, option, dev, setDev } = useImageSelector('cpu')
+ const drawerRef = useRef(null)
+ const closeRef = useRef(null)
+ const invokerRef = useRef(null)
+ const modal = useInspectorDrawer(open, onClose, drawerRef)
const isAgent = nodeType === 'agent'
const workerCmd = isAgent ? 'agent-worker' : 'worker'
const flags = dockerFlags(option)
const flagsString = flags ? `${flags} \
` : ''
- return (
-
-
-
Start a worker to add compute capacity. It will register with this frontend and appear here automatically.
-
Select your hardware
-
-
-
CLI
{
+ if (open) {
+ invokerRef.current = document.activeElement
+ requestAnimationFrame(() => closeRef.current?.focus())
+ }
+ }, [open])
+ useEffect(() => {
+ if (!open && invokerRef.current) requestAnimationFrame(() => invokerRef.current?.focus())
+ }, [open])
+
+ if (!open) return null
+ return <>
+
+
- )
+
+
+
}
function DisabledState({ addToast }) {
@@ -93,8 +122,7 @@ export default function Nodes() {
const [stoppingModelName, setStoppingModelName] = useState(null)
const [bulkRunning, setBulkRunning] = useState(false)
const bulkRunningRef = useRef(false)
- const [showTips, setShowTips] = useState(false)
- const [emptyNodeType, setEmptyNodeType] = useState('backend')
+ const [showWorkerSetup, setShowWorkerSetup] = useState(false)
const [workbenchView, setWorkbenchView] = useState('nodes')
const [modelRows, setModelRows] = useState([])
const [modelLoadState, setModelLoadState] = useState('idle')
@@ -136,6 +164,12 @@ export default function Nodes() {
return () => clearInterval(interval)
}, [fetchNodes])
+ // Keep the former zero-worker onboarding behavior: the setup guidance is
+ // immediately available, now in the same focused drawer used by Add worker.
+ useEffect(() => {
+ if (!loading && nodes.length === 0) setShowWorkerSetup(true)
+ }, [loading, nodes.length])
+
const summary = useMemo(() => summarizeFleet(nodes), [nodes])
const labelKeys = useMemo(() => [...new Set(nodes.flatMap(node => Object.keys(node.labels || {})))].sort(), [nodes])
const attentionIds = useMemo(() => {
@@ -260,7 +294,7 @@ export default function Nodes() {
}
const openReplicaLogs = (nodeId, processKey) => {
- navigate(`/app/node-backend-logs/${encodeURIComponent(nodeId)}/${encodeURIComponent(processKey)}`)
+ navigate(`/app/node-backend-logs/${encodeURIComponent(nodeId)}/${encodeURIComponent(processKey)}`, { state: { from: '/app/nodes' } })
}
const openModelLogs = (model, invoker) => {
@@ -330,18 +364,15 @@ export default function Nodes() {
if (!enabled) return
if (nodes.length === 0) return (
-
-
- {[['backend', 'Backend'], ['agent', 'Agent']].map(([value, label]) => setEmptyNodeType(value)}>{label} )}
-
-
+
setShowWorkerSetup(true)}>
{t('nodes.workerSetup.emptyTitle')} {t('nodes.workerSetup.emptyDescription')}
setShowWorkerSetup(true)}>{t('nodes.workerSetup.title')} setShowWorkerSetup(false)} addToast={addToast} />
)
return (
-
setShowTips(value => !value)}>{showTips ? 'Hide setup' : 'Register worker'}} />
- {showTips && setShowWorkerSetup(true)}>
@@ -361,6 +392,7 @@ export default function Nodes() {
{selectedIds.size > 0 &&
{selectedIds.size} selected
+ {t('nodes.selectionVisibility', { visible: [...selectedIds].filter(id => pagination.items.some(node => node.id === id)).length, hidden: selectedIds.size - [...selectedIds].filter(id => pagination.items.some(node => node.id === id)).length })}
runBulk('drain')}>Drain selected
runBulk('resume')}>Resume selected
setConfirmRemove(true)}>Remove selected
@@ -398,6 +430,7 @@ export default function Nodes() {
setShowWorkerSetup(false)} addToast={addToast} />
)
}
diff --git a/docs/content/features/distributed-mode.md b/docs/content/features/distributed-mode.md
index b9b8be17f392..9ca508bc79a0 100644
--- a/docs/content/features/distributed-mode.md
+++ b/docs/content/features/distributed-mode.md
@@ -1028,6 +1028,12 @@ When the SmartRouter needs to free capacity, it can unload models with zero in-f
Open **Operate → Nodes** to inspect fleet health, filter or select workers, and view running models across the cluster. The **Running models** view groups replicas by model. Its **View logs…** action opens logs directly when there is one placement; when a model has several placements, it opens the model inspector so you can choose all logs for one node or the logs for one replica.
+Use **Add worker** in the page header to open the worker setup drawer. Choose the backend or agent role and the target hardware, then copy either the CLI or Docker command. The drawer keeps registration setup separate from fleet monitoring while leaving the distributed-mode documentation one click away.
+
+Backend logs remember where they were opened: logs launched from a node detail page return to that node, while logs launched from **Running models** return to the Nodes fleet. Direct log URLs safely fall back to the fleet.
+
+Bulk selection is retained while you filter or move between pages. When selected workers are outside the current result page, the bulk bar reports the visible and hidden counts; bulk operations still apply to the complete selected set.
+
Open a node's full details for node-scoped work: viewing replica logs, unloading a model, managing installed backends, changing replica capacity, or editing scheduling labels. Diagnostic actions are listed before destructive actions in row menus.
## Node Management API