Pre-defined and custom actions for managed nodes. Placeholders and ENV vars are expanded when an action runs.

{submitError && !showEditor ? (

{submitError}

) : null}

Configured actions

{isLoading ? (

Loading…

) : loadError ? (

{loadError}

) : actions.length === 0 ? (

No actions configured yet.

) : (

{action.name} {action.kind} {action.builtin ? ( built-in ) : null} {action.requires_sudo ? ( sudo ) : null} {action.show_widget ? ( widget {action.widget_type ? `: ${action.widget_type}` : ''} ) : null}

{action.description || 'No description'}

{action.body.length > 80 ? `${action.body.slice(0, 80)}…` : action.body}

)}

Placeholders

Use these tokens in the command/script body or ENV values. ENV vars are applied before the action runs.

{entry.token} {entry.description} Example: {entry.example}

{showTypePicker ? (

Add Action

Choose the type of action to create.

) : null} {showEditor && editorKind ? (

{isEditing ? editingIsBuiltin ? `Widget settings · ${draftName}` : `Edit ${editorKind === 'shell' ? 'shell command' : 'script'}` : `New ${editorKind === 'shell' ? 'shell command' : 'script'}`}

{submitError ? (

{submitError}

) : null} {editingIsBuiltin ? (

Built-in actions keep a fixed command body. You can still enable or change the Overview widget.

) : null}

Name setDraftName(event.target.value)} />

Description setDraftDescription(event.target.value)} />

{editorKind === 'shell' ? 'Command' : 'Script'} {editorKind === 'shell' ? ( setDraftBody(event.target.value)} /> ) : (

setDraftBody(event.target.value)}
                />
              )}
              {!fieldsLocked ? (
                <p className="config-hint">
                  Do not include a leading <code>sudo</code>; check Requires Sudo
                  instead so ClusterCanvas runs with <code>sudo -n</code>.
                </p>
              ) : null}
            </div>

<label className="checkbox-row">
              <input
                type="checkbox"
                checked={draftRequiresSudo}
                disabled={fieldsLocked}
                onChange={(event) =>
                  setDraftRequiresSudo(event.target.checked)
                }
              />
              Requires Sudo
            </label>

<label className="checkbox-row">
              <input
                type="checkbox"
                checked={draftShowWidget}
                onChange={(event) => {
                  const checked = event.target.checked
                  setDraftShowWidget(checked)
                  if (checked && !draftWidgetType) {
                    setDraftWidgetType('raw')
                  }
                }}
              />
              Show Widget
            </label>
            {draftShowWidget ? (
              <div className="config-field">
                <label htmlFor="action-widget-type">Widget type</label>
                <select
                  id="action-widget-type"
                  className="config-input"
                  value={draftWidgetType}
                  onChange={(event) =>
                    setDraftWidgetType(event.target.value as ActionWidgetType)
                  }
                >
                  <option value="memory">Memory (free -m ring)</option>
                  <option value="disk">Disk (df -h ring)</option>
                  <option value="raw">Raw text</option>
                </select>
                <p className="config-hint">
                  Parsed from the last run of this action on each node Overview.
                </p>
              </div>
            ) : null}

<div className="config-field">
              <label>Environment variables</label>
              <p className="config-hint">
                Applied before the command/script runs. Values may use
                placeholders.
              </p>
              <div className="actions-env-rows">
                {draftEnv.map((row, index) => (
                  <div key={`env-${index}`} className="actions-env-row">
                    <input
                      className="config-input"
                      aria-label={`ENV name ${index + 1}`}
                      placeholder="NAME"
                      value={row.name}
                      disabled={fieldsLocked}
                      onChange={(event) =>
                        updateEnvRow(index, 'name', event.target.value)
                      }
                    />
                    <input
                      className="config-input"
                      aria-label={`ENV value ${index + 1}`}
                      placeholder="value or {{node.ip}}"
                      value={row.value}
                      disabled={fieldsLocked}
                      onChange={(event) =>
                        updateEnvRow(index, 'value', event.target.value)
                      }
                    />
                    <button
                      type="button"
                      className="groups-delete"
                      aria-label={`Remove ENV row ${index + 1}`}
                      disabled={fieldsLocked}
                      onClick={() => removeEnvRow(index)}
                    >
                      Remove
                    </button>
                  </div>
                ))}
              </div>
              <button
                type="button"
                className="groups-new"
                disabled={fieldsLocked}
                onClick={() => addEnvRow()}
              >
                Add ENV variable
              </button>
            </div>

<div className="reauth-actions">
              <button
                type="button"
                className="config-action-revert"
                onClick={() => clearEditor()}
              >
                Cancel
              </button>
              <button
                type="button"
                className="config-action-save"
                disabled={isSaving}
                onClick={() => void handleSaveAction()}
              >
                {isSaving ? 'Saving…' : isEditing ? 'Save changes' : 'Save action'}
              </button>
            </div>
          </div>
        </div>
      ) : null}
    </div>
  )
}

function GroupsConfigTab() {
  const [groups, setGroups] = useState<ReadonlyArray<Group>>([])
  const [isLoadingGroups, setIsLoadingGroups] = useState(true)
  const [groupsLoadError, setGroupsLoadError] = useState<string | null>(null)

const [editingGroupName, setEditingGroupName] = useState<string | null>(null)
  const [draftGroupName, setDraftGroupName] = useState('')
  const [draftScopeKind, setDraftScopeKind] = useState<GroupScopeKind>('node')
  const [draftScopeName, setDraftScopeName] = useState('')
  const [draftPermissions, setDraftPermissions] = useState<string[]>([])
  const [submitError, setSubmitError] = useState<string | null>(null)

const isEditing = editingGroupName !== null

useEffect(() => {
    let isCancelled = false

async function loadGroups() {
      setIsLoadingGroups(true)
      setGroupsLoadError(null)
      try {
        const response = await fetchGroups()
        if (!isCancelled) {
          setGroups(response.groups)
        }
      } catch (err) {
        if (!isCancelled) {
          setGroupsLoadError(
            err instanceof Error ? err.message : 'Failed to load groups',
          )
        }
      } finally {
        if (!isCancelled) {
          setIsLoadingGroups(false)
        }
      }
    }

void loadGroups()

return () => {
      isCancelled = true
    }
  }, [])

function clearGroupForm() {
    setEditingGroupName(null)
    setDraftGroupName('')
    setDraftScopeKind('node')
    setDraftScopeName('')
    setDraftPermissions([])
    setSubmitError(null)
  }

function handleEditGroup(group: Group) {
    setEditingGroupName(group.name)
    setDraftGroupName(group.name)
    setDraftScopeKind(group.scope_kind)
    setDraftScopeName(group.scope_name)
    setDraftPermissions([...group.permissions])
    setSubmitError(null)
  }

function togglePermission(permission: string, checked: boolean) {
    setDraftPermissions((prev) => {
      if (checked) {
        if (prev.includes(permission)) {
          return prev
        }
        return [...prev, permission]
      }

return prev.filter((item) => item !== permission)
    })
  }

async function handleSaveGroup() {
    setSubmitError(null)

if (!isEditing && draftGroupName.trim() === ADMINISTRATORS_GROUP_NAME) {
      setSubmitError('Administrators group cannot be created here')
      return
    }

try {
      const response = await upsertGroup({
        name: draftGroupName,
        scope_kind: draftScopeKind,
        scope_name: draftScopeName,
        permissions: draftPermissions,
      })

setGroups(response.groups)
      clearGroupForm()
    } catch (err) {
      setSubmitError(
        err instanceof Error ? err.message : 'Failed to save group',
      )
    }
  }

async function handleDeleteGroup(groupName: string) {
    setSubmitError(null)

try {
      const response = await deleteGroup(groupName)
      setGroups(response.groups)
      if (editingGroupName === groupName) {
        clearGroupForm()
      }
    } catch (err) {
      setSubmitError(
        err instanceof Error ? err.message : 'Failed to delete group',
      )
    }
  }

return (
    <div className="groups-panel">
      <div className="groups-list">
        <p className="config-hint">Configured groups</p>
        {isLoadingGroups ? (
          <p className="config-empty">Loading…</p>
        ) : groupsLoadError ? (
          <p className="config-empty" role="alert">
            {groupsLoadError}
          </p>
        ) : groups.length === 0 ? (
          <p className="config-empty">No groups configured yet.</p>
        ) : (
          <ul className="groups-ul">
            {groups.map((group) => {
              const isAdministrators = group.name === ADMINISTRATORS_GROUP_NAME
              const isSelected = editingGroupName === group.name
              return (
                <li
                  key={group.name}
                  className={
                    isSelected ? 'groups-li groups-li-selected' : 'groups-li'
                  }
                >
                  <div className="groups-li-content">
                    <div className="groups-li-title">{group.name}</div>
                    <div className="groups-li-meta">
                      Scope: {group.scope_kind}: {group.scope_name}
                    </div>
                    <div className="groups-li-meta">
                      Permissions: {group.permissions.join(', ')}
                    </div>
                  </div>
                  <div className="groups-li-actions">
                    <button
                      type="button"
                      className="groups-edit"
                      onClick={() => handleEditGroup(group)}
                    >
                      Edit
                    </button>
                    <button
                      type="button"
                      className="groups-delete"
                      disabled={isAdministrators}
                      title={
                        isAdministrators
                          ? 'Administrators group cannot be deleted'
                          : undefined
                      }
                      onClick={() => void handleDeleteGroup(group.name)}
                    >
                      Delete
                    </button>
                  </div>
                </li>
              )
            })}
          </ul>
        )}
      </div>

<div className="groups-form">
        <p className="config-hint">
          {isEditing ? 'Edit group' : 'Create group'}
        </p>

{submitError ? (
          <p className="config-empty groups-error" role="alert">
            {submitError}
          </p>
        ) : null}

<div className="config-field">
          <label htmlFor="group-name">Group name</label>
          <input
            id="group-name"
            className="config-input"
            value={draftGroupName}
            readOnly={isEditing}
            onChange={(event) => {
              setDraftGroupName(event.target.value)
            }}
          />
        </div>

<div className="config-field">
          <label htmlFor="scope-kind">Scope kind</label>
          <select
            id="scope-kind"
            className="theme-select"
            value={draftScopeKind}
            onChange={(event) => {
              setDraftScopeKind(event.target.value as GroupScopeKind)
            }}
          >
            <option value="node">Node</option>
            <option value="group">Group</option>
          </select>
        </div>

<div className="config-field">
          <label htmlFor="scope-name">Scope name</label>
          <input
            id="scope-name"
            className="config-input"
            value={draftScopeName}
            onChange={(event) => {
              setDraftScopeName(event.target.value)
            }}
          />
        </div>

<div className="config-field">
          <label>Permissions</label>
          <div className="permission-checkboxes">
            {DEFAULT_PERMISSIONS.map((permission) => {
              const checked = draftPermissions.includes(permission)
              return (
                <label key={permission} className="permission-option">
                  <input
                    type="checkbox"
                    aria-label={permission}
                    checked={checked}
                    onChange={(event) => {
                      togglePermission(permission, event.target.checked)
                    }}
                  />
                  <code>{permission}</code>
                </label>
              )
            })}
          </div>
        </div>

<div className="groups-form-actions">
          {isEditing ? (
            <button
              type="button"
              className="groups-new"
              onClick={() => clearGroupForm()}
            >
              New group
            </button>
          ) : null}
          <button
            type="button"
            className="groups-save"
            onClick={() => void handleSaveGroup()}
          >
            {isEditing ? 'Save changes' : 'Save group'}
          </button>
        </div>
      </div>
    </div>
  )
}

function NetworkConfigTab() {
  const [draft, setDraft] = useState<NetworkSettings>(DEFAULT_NETWORK_SETTINGS)
  const [rulesText, setRulesText] = useState('')
  const [isLoading, setIsLoading] = useState(true)
  const [loadError, setLoadError] = useState<string | null>(null)
  const [submitError, setSubmitError] = useState<string | null>(null)
  const [saveSucceeded, setSaveSucceeded] = useState(false)

useEffect(() => {
    let isCancelled = false

async function loadNetwork() {
      setIsLoading(true)
      setLoadError(null)
      try {
        const response = await fetchNetwork()
        if (!isCancelled) {
          setDraft(response.network)
          setRulesText(response.network.rules.join('\n'))
        }
      } catch (err) {
        if (!isCancelled) {
          setLoadError(
            err instanceof Error
              ? err.message
              : 'Failed to load network settings',
          )
        }
      } finally {
        if (!isCancelled) {
          setIsLoading(false)
        }
      }
    }

void loadNetwork()

return () => {
      isCancelled = true
    }
  }, [])

async function handleSave() {
    setSubmitError(null)
    setSaveSucceeded(false)

const listenError = validateListenAddress(draft.listen_address)
    if (listenError) {
      setSubmitError(listenError)
      return
    }
    const hostnameError = validateHostname(draft.public_hostname)
    if (hostnameError) {
      setSubmitError(hostnameError)
      return
    }

const rules = rulesText
      .split('\n')
      .map((line) => line.trim())
      .filter((line) => line.length > 0)

try {
      const response = await saveNetwork({ ...draft, rules })
      setDraft(response.network)
      setRulesText(response.network.rules.join('\n'))
      setSaveSucceeded(true)
    } catch (err) {
      setSubmitError(
        err instanceof Error ? err.message : 'Failed to save network settings',
      )
    }
  }

if (isLoading) {
    return <p className="config-empty">Loading…</p>
  }

if (loadError) {
    return (
      <p className="config-empty" role="alert">
        {loadError}
      </p>
    )
  }

return (
    <div className="security-panel network-panel">
      <p className="config-hint">
        Listen bind address and IP access control for the admin UI.
      </p>

{submitError ? (
        <p className="config-empty groups-error" role="alert">
          {submitError}
        </p>
      ) : null}
      {saveSucceeded ? (
        <p className="config-hint" role="status">
          Network settings saved.
        </p>
      ) : null}

<div className="config-field">
        <label htmlFor="network-listen">Listen address</label>
        <input
          id="network-listen"
          className="config-input"
          value={draft.listen_address}
          onChange={(event) => {
            setDraft((previous) => ({
              ...previous,
              listen_address: event.target.value,
            }))
            setSaveSucceeded(false)
          }}
        />
        <p className="config-hint">
          Default 0.0.0.0 (all interfaces). Applied on next process restart.
        </p>
      </div>

<div className="config-field">
        <label htmlFor="network-hostname">Public hostname</label>
        <input
          id="network-hostname"
          className="config-input"
          placeholder="admin.mydomain.ext"
          value={draft.public_hostname}
          onChange={(event) => {
            setDraft((previous) => ({
              ...previous,
              public_hostname: event.target.value,
            }))
            setSaveSucceeded(false)
          }}
        />
        <p className="config-hint">
          Leave empty for local access by IP. When set, the UI must be visited
          via that exact hostname.
        </p>
      </div>

<div className="config-field">
        <label htmlFor="network-access-mode">Access mode</label>
        <select
          id="network-access-mode"
          className="theme-select"
          value={draft.access_mode}
          onChange={(event) => {
            setDraft((previous) => ({
              ...previous,
              access_mode: event.target.value as AccessMode,
            }))
            setSaveSucceeded(false)
          }}
        >
          <option value="open">Open (no IP filter)</option>
          <option value="whitelist">Whitelist (deny non-matching)</option>
          <option value="blacklist">Blacklist (deny matching)</option>
        </select>
      </div>

{draft.access_mode !== 'open' ? (
        <div className="config-field">
          <label htmlFor="network-rules">IP / CIDR rules (one per line)</label>
          <textarea
            id="network-rules"
            className="config-input wizard-rules"
            rows={5}
            value={rulesText}
            onChange={(event) => {
              setRulesText(event.target.value)
              setSaveSucceeded(false)
            }}
          />
        </div>
      ) : null}

<button
        type="button"
        className="groups-save"
        onClick={() => void handleSave()}
      >
        Save network settings
      </button>
    </div>
  )
}

function validateSecurityDraft(security: SecuritySettings): string | null {
  if (
    !Number.isInteger(security.idle_timeout_minutes) ||
    security.idle_timeout_minutes < 1 ||
    security.idle_timeout_minutes > 240
  ) {
    return 'Idle timeout must be an integer between 1 and 240 minutes.'
  }
  if (
    !Number.isInteger(security.session_lifetime_hours) ||
    security.session_lifetime_hours < 1
  ) {
    return 'Session lifetime must be an integer of at least 1 hour.'
  }
  if (
    !Number.isInteger(security.reauth_grace_minutes) ||
    security.reauth_grace_minutes < 0
  ) {
    return 'Re-auth grace period must be an integer of at least 0 minutes.'
  }
  return null
}

function parsePositiveIntegerInput(raw: string): number | null {
  if (raw.trim() === '') {
    return null
  }
  const parsed = Number(raw)
  if (!Number.isFinite(parsed) || !Number.isInteger(parsed)) {
    return null
  }
  return parsed
}

function SecurityConfigTab() {
  const [draft, setDraft] = useState<SecuritySettings>(DEFAULT_SECURITY_SETTINGS)
  const [isLoading, setIsLoading] = useState(true)
  const [loadError, setLoadError] = useState<string | null>(null)
  const [submitError, setSubmitError] = useState<string | null>(null)
  const [saveSucceeded, setSaveSucceeded] = useState(false)

useEffect(() => {
    let isCancelled = false

async function loadSecurity() {
      setIsLoading(true)
      setLoadError(null)
      try {
        const response = await fetchSecurity()
        if (!isCancelled) {
          setDraft(response.security)
        }
      } catch (err) {
        if (!isCancelled) {
          setLoadError(
            err instanceof Error ? err.message : 'Failed to load security settings',
          )
        }
      } finally {
        if (!isCancelled) {
          setIsLoading(false)
        }
      }
    }

void loadSecurity()

return () => {
      isCancelled = true
    }
  }, [])

async function handleSave() {
    setSubmitError(null)
    setSaveSucceeded(false)

const validationError = validateSecurityDraft(draft)
    if (validationError) {
      setSubmitError(validationError)
      return
    }

try {
      const response = await saveSecurity(draft)
      setDraft(response.security)
      setSaveSucceeded(true)
    } catch (err) {
      setSubmitError(
        err instanceof Error ? err.message : 'Failed to save security settings',
      )
    }
  }

if (isLoading) {
    return <p className="config-empty">Loading…</p>
  }

if (loadError) {
    return (
      <p className="config-empty" role="alert">
        {loadError}
      </p>
    )
  }

return (
    <div className="security-panel">
      <p className="config-hint">
        Session and re-authentication policy for administrators.
      </p>

{submitError ? (
        <p className="config-empty groups-error" role="alert">
          {submitError}
        </p>
      ) : null}
      {saveSucceeded ? (
        <p className="config-hint" role="status">
          Security settings saved.
        </p>
      ) : null}

<div className="config-field">
        <label htmlFor="idle-timeout">Idle timeout (minutes)</label>
        <input
          id="idle-timeout"
          className="config-input"
          type="number"
          min={1}
          max={240}
          step={1}
          value={draft.idle_timeout_minutes}
          onChange={(event) => {
            const parsed = parsePositiveIntegerInput(event.target.value)
            if (parsed === null) {
              setDraft((prev) => ({ ...prev, idle_timeout_minutes: 0 }))
              return
            }
            setDraft((prev) => ({ ...prev, idle_timeout_minutes: parsed }))
            setSaveSucceeded(false)
          }}
        />
        <p className="config-hint">1–240 minutes (max 4 hours). Default 30.</p>
      </div>

<div className="config-field">
        <label htmlFor="session-lifetime">Session lifetime (hours)</label>
        <input
          id="session-lifetime"
          className="config-input"
          type="number"
          min={1}
          step={1}
          value={draft.session_lifetime_hours}
          onChange={(event) => {
            const parsed = parsePositiveIntegerInput(event.target.value)
            if (parsed === null) {
              setDraft((prev) => ({ ...prev, session_lifetime_hours: 0 }))
              return
            }
            setDraft((prev) => ({ ...prev, session_lifetime_hours: parsed }))
            setSaveSucceeded(false)
          }}
        />
        <p className="config-hint">At least 1 hour. Default 24.</p>
      </div>

<div className="config-field">
        <label className="permission-option" htmlFor="totp-enabled">
          <input
            id="totp-enabled"
            type="checkbox"
            checked={draft.totp_enabled}
            onChange={(event) => {
              setDraft((prev) => ({
                ...prev,
                totp_enabled: event.target.checked,
              }))
              setSaveSucceeded(false)
            }}
          />
          Enable TOTP
        </label>
        <p className="config-hint">
          When enabled, users can enroll authenticator apps from their profile.
        </p>
      </div>

<div className="config-field">
        <label className="permission-option" htmlFor="reauth-sensitive">
          <input
            id="reauth-sensitive"
            type="checkbox"
            checked={draft.reauth_sensitive_actions}
            onChange={(event) => {
              setDraft((prev) => ({
                ...prev,
                reauth_sensitive_actions: event.target.checked,
              }))
              setSaveSucceeded(false)
            }}
          />
          Re-auth for sensitive actions
        </label>
      </div>

<div className="config-field">
        <label htmlFor="reauth-grace">Re-auth grace period (minutes)</label>
        <input
          id="reauth-grace"
          className="config-input"
          type="number"
          min={0}
          step={1}
          disabled={!draft.reauth_sensitive_actions}
          value={draft.reauth_grace_minutes}
          onChange={(event) => {
            const raw = event.target.value
            if (raw.trim() === '') {
              setDraft((prev) => ({ ...prev, reauth_grace_minutes: 0 }))
              return
            }
            const parsed = Number(raw)
            if (!Number.isFinite(parsed) || !Number.isInteger(parsed)) {
              return
            }
            setDraft((prev) => ({ ...prev, reauth_grace_minutes: parsed }))
            setSaveSucceeded(false)
          }}
        />
        <p className="config-hint">
          Skip re-auth if done within this many minutes. 0 means re-auth for
          every sensitive action. Default 15.
        </p>
      </div>

<button
        type="button"
        className="groups-save"
        onClick={() => void handleSave()}
      >
        Save security settings
      </button>

<p className="config-hint">
        Service SSH keys and related credentials will also live here later —
        add keys with a description and an expiry time limit or non-expiry.
      </p>
    </div>
  )
}

function ConfigTabPanelContent({
  activeConfigTab,
  draftThemePreference,
  onDraftThemePreferenceChange,
}: {
  activeConfigTab: ConfigTabId
  draftThemePreference: ThemePreference
  onDraftThemePreferenceChange: (preference: ThemePreference) => void
}) {
  if (activeConfigTab === 'overview') {
    return (
      <OverviewConfigTab
        draftThemePreference={draftThemePreference}
        onDraftThemePreferenceChange={onDraftThemePreferenceChange}
      />
    )
  }

if (activeConfigTab === 'roles') {
    return (
      <div className="roles-panel">
        <p className="config-hint">
          Built-in permissions that roles can grant.
        </p>
        <ul className="permission-catalog">
          {DEFAULT_PERMISSIONS.map((permission) => (
            <li key={permission}>
              <code>{permission}</code>
            </li>
          ))}
        </ul>
      </div>
    )
  }

if (activeConfigTab === 'groups') {
    return <GroupsConfigTab />
  }

if (activeConfigTab === 'actions') {
    return <ActionsConfigTab />
  }

if (activeConfigTab === 'users') {
    return <UsersConfigTab />
  }

if (activeConfigTab === 'security') {
    return <SecurityConfigTab />
  }

if (activeConfigTab === 'network') {
    return <NetworkConfigTab />
  }

return <p className="config-empty">Coming soon</p>
}

function resourceTabsFor(section: ResourceSectionId): ReadonlyArray<{
  id: ResourceTabId
  label: string
}> {
  return [
    { id: 'overview', label: 'Overview' },
    { id: 'security', label: 'Security' },
    { id: 'add', label: RESOURCE_ADD_LABEL[section] },
  ]
}

function healthDotClass(healthOk: boolean | null | undefined): string {
  if (healthOk === true) {
    return 'node-health-dot node-health-dot-ok'
  }
  if (healthOk === false) {
    return 'node-health-dot node-health-dot-error'
  }
  return 'node-health-dot node-health-dot-unknown'
}

function healthDotLabel(healthOk: boolean | null | undefined): string {
  if (healthOk === true) {
    return 'Healthy'
  }
  if (healthOk === false) {
    return 'Unhealthy'
  }
  return 'Health unknown'
}

function ResourceOverviewTab({
  section,
  canRead,
  canExec,
  canDelete,
  onNodesChanged,
}: {
  section: ResourceSectionId
  canRead: boolean
  canExec: boolean
  canDelete: boolean
  onNodesChanged: () => void
}) {
  const [nodes, setNodes] = useState<ReadonlyArray<Node>>([])
  const [isLoading, setIsLoading] = useState(true)
  const [loadError, setLoadError] = useState<string | null>(null)
  const [checkingNodeId, setCheckingNodeId] = useState<string | null>(null)
  const [me, setMe] = useState<MeResponse | null>(null)
  const [pendingDeleteNodeId, setPendingDeleteNodeId] = useState<string | null>(
    null,
  )
  const requireTotp = Boolean(me?.totp_confirmed && me?.totp_enabled)

useEffect(() => {
    let isCancelled = false

async function loadMe() {
      try {
        const response = await fetchMe()
        if (!isCancelled) {
          setMe(response)
        }
      } catch {
        if (!isCancelled) {
          setMe(null)
        }
      }
    }

void loadMe()

return () => {
      isCancelled = true
    }
  }, [])

useEffect(() => {
    if (!canRead) {
      setIsLoading(false)
      setNodes([])
      return
    }

let isCancelled = false

async function loadNodes() {
      setIsLoading(true)
      setLoadError(null)
      try {
        const response = await fetchNodes(RESOURCE_SECTION_KIND[section])
        if (!isCancelled) {
          setNodes(response.nodes)
        }
      } catch (err) {
        if (!isCancelled) {
          setLoadError(
            err instanceof Error ? err.message : 'Failed to load nodes',
          )
        }
      } finally {
        if (!isCancelled) {
          setIsLoading(false)
        }
      }
    }

void loadNodes()

return () => {
      isCancelled = true
    }
  }, [section, canRead])

async function handleHealthCheck(nodeId: string) {
    setCheckingNodeId(nodeId)
    try {
      const response = await runNodeHealthCheck(nodeId)
      setNodes((previous) =>
        previous.map((node) => (node.id === nodeId ? response.node : node)),
      )
    } catch (err) {
      setNodes((previous) =>
        previous.map((node) => {
          if (node.id !== nodeId) {
            return node
          }
          return {
            ...node,
            health_ok: false,
            health_message:
              err instanceof Error ? err.message : 'Health check failed',
          }
        }),
      )
    } finally {
      setCheckingNodeId(null)
      onNodesChanged()
    }
  }

async function handleDeleteConfirm(credentials: ReauthCredentials) {
    if (!pendingDeleteNodeId) {
      return
    }
    const response = await deleteNode(pendingDeleteNodeId, credentials)
    setNodes(
      response.nodes.filter(
        (node) => node.kind === RESOURCE_SECTION_KIND[section],
      ),
    )
    setPendingDeleteNodeId(null)
    onNodesChanged()
  }

if (!canRead) {
    return (
      <p className="config-hint">
        You need the <code>nodes.read</code> permission to view managed hosts.
      </p>
    )
  }

if (isLoading) {
    return <p className="config-hint">Loading…</p>
  }

if (loadError) {
    return <p className="config-error">{loadError}</p>
  }

if (nodes.length === 0) {
    return (
      <p className="config-hint">
        No hosts registered yet. Use the {RESOURCE_ADD_LABEL[section]} tab to
        add one.
      </p>
    )
  }

return (
    <>
      {pendingDeleteNodeId ? (
        <ReauthModal
          title="Confirm delete"
          hint="Re-enter your password to delete this host."
          requireTotp={requireTotp}
          confirmLabel="Delete host"
          onCancel={() => {
            setPendingDeleteNodeId(null)
          }}
          onConfirm={handleDeleteConfirm}
        />
      ) : null}
      <ul className="node-list">
        {nodes.map((node) => {
          return (
            <li key={node.id} className="node-list-item">
              <div className="node-list-heading">
                <div className="node-list-heading-main">
                  <span
                    className={healthDotClass(node.health_ok)}
                    title={healthDotLabel(node.health_ok)}
                    aria-label={healthDotLabel(node.health_ok)}
                    role="img"
                  />
                  <strong>{node.name}</strong>
                  <code className="node-id">{node.id}</code>
                </div>
                <button
                  type="button"
                  className="node-edit"
                  onClick={() => {
                    navigateTo(
                      pathFor(
                        section,
                        'overview',
                        'overview',
                        node.id,
                        'healthcheck',
                      ),
                    )
                  }}
                >
                  Edit
                </button>
              </div>
              <p className="config-hint">
                {node.host_ip} · {node.username} · group {node.group_name} ·{' '}
                {node.key_algo}
              </p>
              {node.health_message ? (
                <p
                  className={
                    node.health_ok
                      ? 'node-test-result node-test-result-ok'
                      : node.health_ok === false
                        ? 'node-test-result node-test-result-fail'
                        : 'node-test-result'
                  }
                  role="status"
                >
                  {node.health_message}
                  {node.health_last_checked_at
                    ? ` · ${new Date(node.health_last_checked_at).toLocaleString()}`
                    : ''}
                </p>
              ) : null}
              {canExec || canDelete ? (
                <div className="node-actions">
                  {canExec ? (
                    <button
                      type="button"
                      className="node-test-ssh"
                      disabled={checkingNodeId === node.id}
                      onClick={() => {
                        void handleHealthCheck(node.id)
                      }}
                    >
                      {checkingNodeId === node.id
                        ? 'Checking health…'
                        : 'Health check'}
                    </button>
                  ) : null}
                  {canDelete ? (
                    <button
                      type="button"
                      className="node-delete"
                      onClick={() => {
                        setPendingDeleteNodeId(node.id)
                      }}
                    >
                      Delete
                    </button>
                  ) : null}
                </div>
              ) : null}
            </li>
          )
        })}
      </ul>
    </>
  )
}

function ResourceSecurityTab({ section }: { section: ResourceSectionId }) {
  return (
    <div className="resource-security-panel">
      <p className="config-hint">
        Security controls for {SECTION_TITLES[section].toLowerCase()} hosts
        (key rotation, hardening, and access policy) will live here.
      </p>
    </div>
  )
}

function ResourceAddTab({
  section,
  canExec,
  onCreated,
}: {
  section: ResourceSectionId
  canExec: boolean
  onCreated: () => void
}) {
  const [nodeId, setNodeId] = useState(() => crypto.randomUUID())
  const [name, setName] = useState('')
  const [hostIP, setHostIP] = useState('')
  const [username, setUsername] = useState('clustercanvas')
  const [keyMode, setKeyMode] = useState<'generate' | 'paste'>('generate')
  const [algorithm, setAlgorithm] = useState<'ed25519' | 'rsa'>('ed25519')
  const [rsaBits, setRsaBits] = useState(4096)
  const [kdfRounds, setKdfRounds] = useState(100)
  const [privateKey, setPrivateKey] = useState('')
  const [groupMode, setGroupMode] = useState<'existing' | 'new'>('existing')
  const [groupName, setGroupName] = useState('')
  const [newGroupName, setNewGroupName] = useState('')
  const [groups, setGroups] = useState<ReadonlyArray<Group>>([])
  const [createdPublicKey, setCreatedPublicKey] = useState<string | null>(null)
  const [submitError, setSubmitError] = useState<string | null>(null)
  const [isSubmitting, setIsSubmitting] = useState(false)

useEffect(() => {
    let isCancelled = false

async function loadGroups() {
      try {
        const response = await fetchGroups()
        if (!isCancelled) {
          setGroups(response.groups)
          setGroupName((current) =>
            current === '' && response.groups.length > 0
              ? response.groups[0].name
              : current,
          )
        }
      } catch {
        // Group list is best-effort for the form.
      }
    }

void loadGroups()

return () => {
      isCancelled = true
    }
  }, [])

if (!canExec) {
    return (
      <p className="config-hint">
        You need the <code>nodes.exec</code> permission to register a host.
      </p>
    )
  }

async function handleSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault()
    setSubmitError(null)
    setIsSubmitting(true)
    try {
      const response = await createNode({
        id: nodeId,
        kind: RESOURCE_SECTION_KIND[section],
        name: name.trim(),
        host_ip: hostIP.trim(),
        username: username.trim() || 'clustercanvas',
        ...(groupMode === 'new'
          ? { new_group: { name: newGroupName.trim() } }
          : { group_name: groupName }),
        ...(keyMode === 'generate'
          ? {
              generate: {
                algorithm,
                ...(algorithm === 'rsa' ? { rsa_bits: rsaBits } : {}),
                ...(algorithm === 'ed25519' ? { kdf_rounds: kdfRounds } : {}),
              },
            }
          : { private_key: privateKey }),
      })
      setCreatedPublicKey(response.node.public_key)
      setName('')
      setHostIP('')
      setPrivateKey('')
      setNodeId(crypto.randomUUID())
      onCreated()
    } catch (err) {
      setSubmitError(err instanceof Error ? err.message : 'Failed to create node')
    } finally {
      setIsSubmitting(false)
    }
  }

return (
    <form className="resource-add-form" onSubmit={handleSubmit}>
      <label className="field">
        <span>Node UUID</span>
        <input
          type="text"
          className="readonly-field"
          value={nodeId}
          readOnly
          aria-readonly="true"
        />
      </label>

<label className="field">
        <span>Name</span>
        <input
          type="text"
          value={name}
          onChange={(event) => setName(event.target.value)}
          required
          autoComplete="off"
        />
      </label>

<label className="field">
        <span>Host IP</span>
        <input
          type="text"
          value={hostIP}
          onChange={(event) => setHostIP(event.target.value)}
          required
          autoComplete="off"
          placeholder="192.168.1.10"
        />
      </label>

<label className="field">
        <span>SSH username</span>
        <input
          type="text"
          value={username}
          onChange={(event) => setUsername(event.target.value)}
          required
          autoComplete="off"
        />
      </label>

<fieldset className="field-group">
        <legend>SSH key</legend>
        <div className="radio-row">
          <label>
            <input
              type="radio"
              name="key-mode"
              checked={keyMode === 'generate'}
              onChange={() => setKeyMode('generate')}
            />
            Generate
          </label>
          <label>
            <input
              type="radio"
              name="key-mode"
              checked={keyMode === 'paste'}
              onChange={() => setKeyMode('paste')}
            />
            Add existing
          </label>
        </div>

{keyMode === 'generate' ? (
          <>
            <div className="radio-row">
              <label>
                <input
                  type="radio"
                  name="key-algo"
                  checked={algorithm === 'ed25519'}
                  onChange={() => setAlgorithm('ed25519')}
                />
                Ed25519 (Recommended)
              </label>
              <label>
                <input
                  type="radio"
                  name="key-algo"
                  checked={algorithm === 'rsa'}
                  onChange={() => setAlgorithm('rsa')}
                />
                RSA (Compatibility)
              </label>
            </div>
            {algorithm === 'rsa' ? (
              <label className="field">
                <span>RSA bits</span>
                <select
                  value={rsaBits}
                  onChange={(event) => setRsaBits(Number(event.target.value))}
                >
                  <option value={2048}>2048</option>
                  <option value={3072}>3072</option>
                  <option value={4096}>4096</option>
                </select>
              </label>
            ) : (
              <label className="field">
                <span>KDF rounds</span>
                <input
                  type="number"
                  min={1}
                  value={kdfRounds}
                  onChange={(event) =>
                    setKdfRounds(Number(event.target.value) || 100)
                  }
                />
              </label>
            )}
          </>
        ) : (
          <label className="field">
            <span>Private key (OpenSSH / PEM)</span>
            <textarea
              value={privateKey}
              onChange={(event) => setPrivateKey(event.target.value)}
              rows={8}
              required={keyMode === 'paste'}
              spellCheck={false}
            />
          </label>
        )}
      </fieldset>

<fieldset className="field-group">
        <legend>Scope / group</legend>
        <div className="radio-row">
          <label>
            <input
              type="radio"
              name="group-mode"
              checked={groupMode === 'existing'}
              onChange={() => setGroupMode('existing')}
            />
            Existing group
          </label>
          <label>
            <input
              type="radio"
              name="group-mode"
              checked={groupMode === 'new'}
              onChange={() => setGroupMode('new')}
            />
            Create a new group
          </label>
        </div>
        {groupMode === 'existing' ? (
          <label className="field">
            <span>Group</span>
            <select
              value={groupName}
              onChange={(event) => setGroupName(event.target.value)}
              required
            >
              {groups.map((group) => (
                <option key={group.name} value={group.name}>
                  {group.name}
                </option>
              ))}
            </select>
          </label>
        ) : (
          <label className="field">
            <span>New group name</span>
            <input
              type="text"
              value={newGroupName}
              onChange={(event) => setNewGroupName(event.target.value)}
              required
              autoComplete="off"
            />
            <span className="config-hint">
              Scoped to this node UUID. Set permissions later under
              Configuration → Groups.
            </span>
          </label>
        )}
      </fieldset>

{submitError ? <p className="config-error">{submitError}</p> : null}
      {createdPublicKey ? (
        <div className="created-public-key">
          <p className="config-hint">
            Host registered. Install this public key on the remote account:
          </p>
          <textarea readOnly value={createdPublicKey} rows={3} />
        </div>
      ) : null}

<button type="submit" disabled={isSubmitting}>
        {isSubmitting ? 'Saving…' : 'Register host'}
      </button>
    </form>
  )
}

function ResourceSectionPanel({
  section,
  activeResourceTab,
  onResourceTabChange,
  nodeId,
  nodeDetailTab,
  onNodesChanged,
}: {
  section: ResourceSectionId
  activeResourceTab: ResourceTabId
  onResourceTabChange: (tab: ResourceTabId) => void
  nodeId: string | null
  nodeDetailTab: NodeDetailTabId
  onNodesChanged: () => void
}) {
  const [me, setMe] = useState<MeResponse | null>(null)
  const [overviewKey, setOverviewKey] = useState(0)

useEffect(() => {
    let isCancelled = false

void loadMe()

return () => {
      isCancelled = true
    }
  }, [])

const canRead = Boolean(me?.permissions?.includes('nodes.read'))
  const canExec = Boolean(me?.permissions?.includes('nodes.exec'))
  const canDelete = Boolean(me?.permissions?.includes('nodes.delete'))
  const tabs = resourceTabsFor(section)

if (nodeId) {
    return (
      <NodeDetailPanel
        section={section}
        nodeId={nodeId}
        activeTab={nodeDetailTab}
        onNodesChanged={onNodesChanged}
      />
    )
  }

return (
    <div className="config-panel">
      <div
        className="config-tabs"
        role="tablist"
        aria-label={SECTION_TITLES[section]}
      >
        {tabs.map((tab) => {
          const isSelected = activeResourceTab === tab.id
          return (
            <button
              key={tab.id}
              type="button"
              role="tab"
              id={`resource-tab-${section}-${tab.id}`}
              className={
                isSelected ? 'config-tab config-tab-active' : 'config-tab'
              }
              aria-selected={isSelected}
              aria-controls={`resource-tab-panel-${section}`}
              tabIndex={isSelected ? 0 : -1}
              onClick={() => onResourceTabChange(tab.id)}
            >
              {tab.label}
            </button>
          )
        })}
      </div>

<div
        className="config-tab-panel"
        role="tabpanel"
        id={`resource-tab-panel-${section}`}
        aria-labelledby={`resource-tab-${section}-${activeResourceTab}`}
      >
        {activeResourceTab === 'overview' ? (
          <ResourceOverviewTab
            key={overviewKey}
            section={section}
            canRead={canRead}
            canExec={canExec}
            canDelete={canDelete}
            onNodesChanged={onNodesChanged}
          />
        ) : null}
        {activeResourceTab === 'security' ? (
          <ResourceSecurityTab section={section} />
        ) : null}
        {activeResourceTab === 'add' ? (
          <ResourceAddTab
            section={section}
            canExec={canExec}
            onCreated={() => setOverviewKey((value) => value + 1)}
          />
        ) : null}
      </div>
    </div>
  )
}

function LogsPanel() {
  type LogsSection = 'nodes' | 'auth'
  type KindFilter = 'all' | NodeKind
  type NodeActionFilter = 'all' | NodeAuditAction

const [logsSection, setLogsSection] = useState<LogsSection>('nodes')
  const [kindFilter, setKindFilter] = useState<KindFilter>('all')
  const [nodeActionFilter, setNodeActionFilter] =
    useState<NodeActionFilter>('all')
  const [authOutcomeFilter, setAuthOutcomeFilter] =
    useState<AuthOutcomeFilter>('all')
  const [authCategoryFilter, setAuthCategoryFilter] =
    useState<AuthCategoryFilter>('all')
  const [authActionFilter, setAuthActionFilter] =
    useState<AuthActionQuickFilter>('all')
  const [searchQuery, setSearchQuery] = useState('')
  const [datePreset, setDatePreset] = useState<DateRangePreset>('all')
  const [customDateFrom, setCustomDateFrom] = useState('')
  const [customDateTo, setCustomDateTo] = useState('')
  const [pageSize, setPageSize] = useState<LogsPageSize>(() =>
    readLogsPageSize(),
  )
  const [filtersExpanded, setFiltersExpanded] = useState(false)
  const [page, setPage] = useState(1)
  const [nodeSortKey, setNodeSortKey] = useState<NodeLogsSortKey>('at')
  const [authSortKey, setAuthSortKey] = useState<AuthLogsSortKey>('at')
  const [sortDirection, setSortDirection] = useState<SortDirection>('desc')
  const [nodeEvents, setNodeEvents] = useState<ReadonlyArray<NodeAuditEvent>>(
    [],
  )
  const [authEvents, setAuthEvents] = useState<ReadonlyArray<AuthAuditEvent>>(
    [],
  )
  const [isLoading, setIsLoading] = useState(true)
  const [loadError, setLoadError] = useState<string | null>(null)
  const [canReadLogs, setCanReadLogs] = useState(false)
  const [permissionsReady, setPermissionsReady] = useState(false)

useEffect(() => {
    let isCancelled = false

async function loadPermissions() {
      try {
        const me = await fetchMe()
        if (isCancelled) {
          return
        }
        setCanReadLogs(Boolean(me?.permissions?.includes('logs.read')))
      } catch {
        if (!isCancelled) {
          setCanReadLogs(false)
        }
      } finally {
        if (!isCancelled) {
          setPermissionsReady(true)
        }
      }
    }

void loadPermissions()

return () => {
      isCancelled = true
    }
  }, [])

useEffect(() => {
    if (!permissionsReady || !canReadLogs) {
      return
    }

let isCancelled = false

async function load() {
      setIsLoading(true)
      setLoadError(null)
      try {
        if (logsSection === 'nodes') {
          const response = await fetchNodeLogs()
          if (!isCancelled) {
            setNodeEvents(response.events)
          }
          return
        }

const response = await fetchAuthLogs()
        if (!isCancelled) {
          setAuthEvents(response.events)
        }
      } catch (err) {
        if (!isCancelled) {
          setLoadError(
            err instanceof Error ? err.message : 'Failed to load logs',
          )
        }
      } finally {
        if (!isCancelled) {
          setIsLoading(false)
        }
      }
    }

void load()

return () => {
      isCancelled = true
    }
  }, [logsSection, canReadLogs, permissionsReady])

useEffect(() => {
    setPage(1)
  }, [
    logsSection,
    kindFilter,
    nodeActionFilter,
    authOutcomeFilter,
    authCategoryFilter,
    authActionFilter,
    searchQuery,
    datePreset,
    customDateFrom,
    customDateTo,
    pageSize,
  ])

const kindFilters: ReadonlyArray<{ id: KindFilter; label: string }> = [
    { id: 'all', label: 'All' },
    { id: 'container', label: 'Containers' },
    { id: 'docker', label: 'Docker' },
    { id: 'vm', label: 'Virtual Machines' },
  ]

const nodeActionFilters: ReadonlyArray<{
    id: NodeActionFilter
    label: string
  }> = [
    { id: 'all', label: 'All actions' },
    { id: 'create', label: 'create' },
    { id: 'update', label: 'update' },
    { id: 'delete', label: 'delete' },
    { id: 'test_ssh', label: 'test_ssh' },
    { id: 'health_check', label: 'health_check' },
  ]

const authOutcomeFilters: ReadonlyArray<{
    id: AuthOutcomeFilter
    label: string
  }> = [
    { id: 'all', label: 'All outcomes' },
    { id: 'failure', label: 'Failures' },
    { id: 'success', label: 'Success' },
  ]

const authCategoryFilters: ReadonlyArray<{
    id: AuthCategoryFilter
    label: string
  }> = [
    { id: 'all', label: 'All categories' },
    { id: 'auth', label: 'auth' },
    { id: 'user', label: 'user' },
    { id: 'group', label: 'group' },
    { id: 'self', label: 'self' },
  ]

const authActionFilters: ReadonlyArray<{
    id: AuthActionQuickFilter
    label: string
  }> = [
    { id: 'all', label: 'All events' },
    { id: 'login_failures', label: 'Login failures' },
    { id: 'login', label: 'login' },
    { id: 'logout', label: 'logout' },
    { id: 'user_create', label: 'user_create' },
    { id: 'user_update', label: 'user_update' },
    { id: 'user_delete', label: 'user_delete' },
    { id: 'group_create', label: 'group_create' },
    { id: 'group_update', label: 'group_update' },
    { id: 'group_delete', label: 'group_delete' },
    { id: 'password_change', label: 'password_change' },
    { id: 'totp_enable', label: 'totp_enable' },
    { id: 'totp_disable', label: 'totp_disable' },
  ]

const datePresets: ReadonlyArray<{ id: DateRangePreset; label: string }> = [
    { id: 'all', label: 'All time' },
    { id: 'today', label: 'Today' },
    { id: '7d', label: 'Last 7 days' },
    { id: '30d', label: 'Last 30 days' },
    { id: 'custom', label: 'Custom' },
  ]

const { from: dateFrom, to: dateTo } = resolveDateRangeBounds(
    datePreset,
    customDateFrom,
    customDateTo,
  )

const filteredNodeEvents = sortNodeEvents(
    filterNodeEvents(nodeEvents, {
      search: searchQuery,
      kind: kindFilter,
      action: nodeActionFilter,
      dateFrom,
      dateTo,
    }),
    nodeSortKey,
    sortDirection,
  )

const filteredAuthEvents = sortAuthEvents(
    filterAuthEvents(authEvents, {
      search: searchQuery,
      outcome: authOutcomeFilter,
      category: authCategoryFilter,
      actionFilter: authActionFilter,
      dateFrom,
      dateTo,
    }),
    authSortKey,
    sortDirection,
  )

const activeEvents =
    logsSection === 'nodes' ? filteredNodeEvents : filteredAuthEvents
  const nodePagination = paginateItems(filteredNodeEvents, page, pageSize)
  const authPagination = paginateItems(filteredAuthEvents, page, pageSize)
  const pagination =
    logsSection === 'nodes' ? nodePagination : authPagination
  const displayNodeEvents =
    logsSection === 'nodes' ? nodePagination.pageItems : []
  const displayAuthEvents =
    logsSection === 'auth' ? authPagination.pageItems : []

function handlePageSizeChange(nextSize: LogsPageSize) {
    setPageSize(nextSize)
    writeLogsPageSize(nextSize)
  }

function toggleNodeSort(key: NodeLogsSortKey) {
    if (nodeSortKey === key) {
      setSortDirection((current) => (current === 'asc' ? 'desc' : 'asc'))
      return
    }
    setNodeSortKey(key)
    setSortDirection(key === 'at' ? 'desc' : 'asc')
  }

function toggleAuthSort(key: AuthLogsSortKey) {
    if (authSortKey === key) {
      setSortDirection((current) => (current === 'asc' ? 'desc' : 'asc'))
      return
    }
    setAuthSortKey(key)
    setSortDirection(key === 'at' ? 'desc' : 'asc')
  }

function sortIndicator(active: boolean): string {
    if (!active) {
      return ''
    }
    return sortDirection === 'asc' ? ' ▲' : ' ▼'
  }

function authRowClassName(event: AuthAuditEvent): string {
    if (event.outcome === 'failure') {
      return 'logs-row-failure'
    }
    if (event.category === 'self') {
      return 'logs-row-self'
    }
    if (event.outcome === 'success') {
      return 'logs-row-success'
    }
    return ''
  }

function renderFilterChip<T extends string>(
    filters: ReadonlyArray<{ id: T; label: string }>,
    selected: T,
    onSelect: (id: T) => void,
    ariaLabel: string,
  ) {
    return (
      <div className="logs-filters" role="tablist" aria-label={ariaLabel}>
        {filters.map((filter) => {
          const isSelected = selected === filter.id
          return (
            <button
              key={filter.id}
              type="button"
              role="tab"
              className={
                isSelected ? 'config-tab config-tab-active' : 'config-tab'
              }
              aria-selected={isSelected}
              onClick={() => onSelect(filter.id)}
            >
              {filter.label}
            </button>
          )
        })}
      </div>
    )
  }

if (!permissionsReady) {
    return (
      <div className="logs-panel">
        <p className="config-hint">Loading…</p>
      </div>
    )
  }

if (!canReadLogs) {
    return (
      <p className="config-hint">
        You need the <code>logs.read</code> permission to view activity logs.
      </p>
    )
  }

return (
    <div className="logs-panel">
      <div className="logs-filters" role="tablist" aria-label="Log section">
        {(
          [
            { id: 'nodes' as const, label: 'Nodes' },
            { id: 'auth' as const, label: 'Users & Auth' },
          ] as const
        ).map((section) => {
          const isSelected = logsSection === section.id
          return (
            <button
              key={section.id}
              type="button"
              role="tab"
              className={
                isSelected ? 'config-tab config-tab-active' : 'config-tab'
              }
              aria-selected={isSelected}
              onClick={() => {
                setLogsSection(section.id)
                setSortDirection('desc')
                if (section.id === 'nodes') {
                  setNodeSortKey('at')
                } else {
                  setAuthSortKey('at')
                }
              }}
            >
              {section.label}
            </button>
          )
        })}
      </div>

<div className="logs-toolbar">
        <label className="logs-search-label" htmlFor="logs-search">
          Search
          <input
            id="logs-search"
            type="search"
            className="logs-search-input"
            placeholder="Node, user, group, event, detail…"
            value={searchQuery}
            onChange={(event) => setSearchQuery(event.target.value)}
          />
        </label>

<label className="logs-page-size-label" htmlFor="logs-page-size">
          Rows
          <select
            id="logs-page-size"
            value={pageSize}
            onChange={(event) =>
              handlePageSizeChange(Number(event.target.value) as LogsPageSize)
            }
          >
            {LOGS_PAGE_SIZE_OPTIONS.map((size) => (
              <option key={size} value={size}>
                {size}
              </option>
            ))}
          </select>
        </label>

<button
          type="button"
          className={
            filtersExpanded
              ? 'logs-filters-toggle logs-filters-toggle-open'
              : 'logs-filters-toggle'
          }
          aria-expanded={filtersExpanded}
          aria-controls="logs-filters-panel"
          onClick={() => setFiltersExpanded((current) => !current)}
        >
          <FiltersChevronIcon expanded={filtersExpanded} />
          {filtersExpanded ? 'Hide filters' : 'Filters…'}
        </button>
      </div>

{filtersExpanded ? (
        <div
          id="logs-filters-panel"
          className="logs-filters-panel"
          role="region"
          aria-label="Log filters"
        >
          {renderFilterChip(
            datePresets,
            datePreset,
            setDatePreset,
            'Date range',
          )}

{datePreset === 'custom' ? (
            <div className="logs-date-custom">
              <label htmlFor="logs-date-from">
                From
                <input
                  id="logs-date-from"
                  type="datetime-local"
                  value={customDateFrom}
                  onChange={(event) => setCustomDateFrom(event.target.value)}
                />
              </label>
              <label htmlFor="logs-date-to">
                To
                <input
                  id="logs-date-to"
                  type="datetime-local"
                  value={customDateTo}
                  onChange={(event) => setCustomDateTo(event.target.value)}
                />
              </label>
            </div>
          ) : null}

{logsSection === 'nodes'
            ? renderFilterChip(
                kindFilters,
                kindFilter,
                setKindFilter,
                'Log kind filter',
              )
            : null}
          {logsSection === 'nodes'
            ? renderFilterChip(
                nodeActionFilters,
                nodeActionFilter,
                setNodeActionFilter,
                'Node action filter',
              )
            : null}

{logsSection === 'auth'
            ? renderFilterChip(
                authOutcomeFilters,
                authOutcomeFilter,
                setAuthOutcomeFilter,
                'Auth outcome filter',
              )
            : null}
          {logsSection === 'auth'
            ? renderFilterChip(
                authCategoryFilters,
                authCategoryFilter,
                setAuthCategoryFilter,
                'Auth category filter',
              )
            : null}
          {logsSection === 'auth'
            ? renderFilterChip(
                authActionFilters,
                authActionFilter,
                setAuthActionFilter,
                'Auth event filter',
              )
            : null}
        </div>
      ) : null}

{isLoading ? <p className="config-hint">Loading…</p> : null}
      {loadError ? <p className="config-error">{loadError}</p> : null}

{!isLoading && !loadError && activeEvents.length === 0 ? (
        <p className="config-hint">
          {logsSection === 'nodes'
            ? 'No node activity matches the current filters.'
            : 'No user or auth activity matches the current filters.'}
        </p>
      ) : null}

{!isLoading && displayNodeEvents.length > 0 ? (
        <div className="logs-table-scroll">
          <table className="logs-table">
            <thead>
              <tr>
                {(
                  [
                    { key: 'at' as const, label: 'When' },
                    { key: 'action' as const, label: 'Action' },
                    { key: 'actor' as const, label: 'Actor' },
                    { key: 'node' as const, label: 'Node' },
                    { key: 'kind' as const, label: 'Kind' },
                    { key: 'detail' as const, label: 'Detail' },
                  ] as const
                ).map((column) => (
                  <th key={column.key} scope="col">
                    <button
                      type="button"
                      className="logs-sort-button"
                      onClick={() => toggleNodeSort(column.key)}
                    >
                      {column.label}
                      {sortIndicator(nodeSortKey === column.key)}
                    </button>
                  </th>
                ))}
              </tr>
            </thead>
            <tbody>
              {displayNodeEvents.map((event) => (
                <tr key={event.id}>
                  <td>{formatUserTimestamp(event.at)}</td>
                  <td>
                    <code>{event.action}</code>
                  </td>
                  <td>{event.actor}</td>
                  <td>
                    <strong>{event.node_name}</strong>
                    <div>
                      <code className="node-id">{event.node_id}</code>
                    </div>
                  </td>
                  <td>{event.node_kind}</td>
                  <td>{event.detail || '—'}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      ) : null}

{!isLoading && displayAuthEvents.length > 0 ? (
        <div className="logs-table-scroll">
          <table className="logs-table">
            <thead>
              <tr>
                {(
                  [
                    { key: 'at' as const, label: 'When' },
                    { key: 'action' as const, label: 'Action' },
                    { key: 'outcome' as const, label: 'Outcome' },
                    { key: 'category' as const, label: 'Category' },
                    { key: 'actor' as const, label: 'Actor' },
                    { key: 'target' as const, label: 'Target' },
                    { key: 'detail' as const, label: 'Detail' },
                  ] as const
                ).map((column) => (
                  <th key={column.key} scope="col">
                    <button
                      type="button"
                      className="logs-sort-button"
                      onClick={() => toggleAuthSort(column.key)}
                    >
                      {column.label}
                      {sortIndicator(authSortKey === column.key)}
                    </button>
                  </th>
                ))}
              </tr>
            </thead>
            <tbody>
              {displayAuthEvents.map((event) => (
                <tr key={event.id} className={authRowClassName(event)}>
                  <td>{formatUserTimestamp(event.at)}</td>
                  <td>
                    <code>{event.action}</code>
                  </td>
                  <td>{event.outcome}</td>
                  <td>{event.category}</td>
                  <td>{event.actor}</td>
                  <td>{event.target || '—'}</td>
                  <td>{event.detail || '—'}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      ) : null}

{!isLoading && activeEvents.length > 0 ? (
        <div className="logs-pagination">
          <span className="logs-pagination-label">
            {pageRangeLabel(
              activeEvents.length,
              pagination.safePage,
              pageSize,
            )}
          </span>
          <div className="logs-pagination-controls">
            <button
              type="button"
              className="config-tab"
              disabled={pagination.safePage <= 1}
              onClick={() => setPage((current) => Math.max(1, current - 1))}
            >
              Previous
            </button>
            <span className="logs-pagination-page">
              Page {pagination.safePage} of {pagination.totalPages}
            </span>
            <button
              type="button"
              className="config-tab"
              disabled={pagination.safePage >= pagination.totalPages}
              onClick={() =>
                setPage((current) =>
                  Math.min(pagination.totalPages, current + 1),
                )
              }
            >
              Next
            </button>
          </div>
        </div>
      ) : null}
    </div>
  )
}

function ConfigurationPanel({
  activeConfigTab,
  onConfigTabChange,
  themePreference,
  onThemePreferenceChange,
}: {
  activeConfigTab: ConfigTabId
  onConfigTabChange: (tab: ConfigTabId) => void
  themePreference: ThemePreference
  onThemePreferenceChange: (preference: ThemePreference) => void
}) {
  const [draftThemePreference, setDraftThemePreference] =
    useState<ThemePreference>(themePreference)

useEffect(() => {
    setDraftThemePreference(themePreference)
  }, [themePreference])

const isDirty = draftThemePreference !== themePreference

return (
    <div className="config-panel">
      <div className="config-tabs" role="tablist" aria-label="Configuration">
        {CONFIG_TABS.map((tab) => {
          const isSelected = activeConfigTab === tab.id
          return (
            <button
              key={tab.id}
              type="button"
              role="tab"
              id={`config-tab-${tab.id}`}
              className={
                isSelected ? 'config-tab config-tab-active' : 'config-tab'
              }
              aria-selected={isSelected}
              aria-controls="config-tab-panel"
              tabIndex={isSelected ? 0 : -1}
              onClick={() => onConfigTabChange(tab.id)}
            >
              {tab.label}
            </button>
          )
        })}
      </div>

<div className="config-actions">
        <button
          type="button"
          className="config-action-revert"
          disabled={!isDirty}
          onClick={() => setDraftThemePreference(themePreference)}
        >
          Revert
        </button>
        <button
          type="button"
          className="config-action-save"
          disabled={!isDirty}
          onClick={() => onThemePreferenceChange(draftThemePreference)}
        >
          Save
        </button>
      </div>
    </div>
  )
}

type BootState =
  | { kind: 'loading' }
  | { kind: 'setup'; clientIp: string }
  | { kind: 'login' }
  | { kind: 'ready'; username: string }

function App() {
  const initialLocation = parseLocation(window.location.pathname)
  const [activeSection, setActiveSection] = useState<SectionId>(
    initialLocation.section,
  )
  const [activeConfigTab, setActiveConfigTab] = useState<ConfigTabId>(
    initialLocation.configTab,
  )
  const [activeResourceTab, setActiveResourceTab] = useState<ResourceTabId>(
    initialLocation.resourceTab,
  )
  const [activeNodeId, setActiveNodeId] = useState<string | null>(
    initialLocation.nodeId,
  )
  const [activeNodeDetailTab, setActiveNodeDetailTab] =
    useState<NodeDetailTabId>(initialLocation.nodeDetailTab)
  const [profileDisplayName, setProfileDisplayName] = useState<string | null>(
    null,
  )
  const [backendVersion, setBackendVersion] = useState('…')
  const [bootState, setBootState] = useState<BootState>({ kind: 'loading' })
  const [canReadLogs, setCanReadLogs] = useState(false)
  const [nodeSectionCounts, setNodeSectionCounts] =
    useState<NodeSectionCounts | null>(null)
  const [nodeHealthErrorCounts, setNodeHealthErrorCounts] =
    useState<NodeSectionCounts | null>(null)
  const [sidebarCountsRefreshToken, setSidebarCountsRefreshToken] = useState(0)
  const [authFailuresToday, setAuthFailuresToday] = useState<number | null>(
    null,
  )
  const { themePreference, updateThemePreference } = useThemePreference()

const profileLabel = profileDisplayName ?? 'Profile'

useEffect(() => {
    return subscribeToLocation((pathname) => {
      const location = parseLocation(pathname)
      setActiveSection(location.section)
      setActiveConfigTab(location.configTab)
      setActiveResourceTab(location.resourceTab)
      setActiveNodeId(location.nodeId)
      setActiveNodeDetailTab(location.nodeDetailTab)
    })
  }, [])

useEffect(() => {
    let isCancelled = false

async function boot() {
      try {
        const setupStatus = await fetchSetupStatus()
        if (isCancelled) {
          return
        }
        if (!setupStatus.completed) {
          setBootState({ kind: 'setup', clientIp: setupStatus.client_ip })
          navigateTo('/setup')
          return
        }

const me = await fetchMe()
        if (isCancelled) {
          return
        }
        if (!me) {
          setBootState({ kind: 'login' })
          navigateTo('/login')
          return
        }

setProfileDisplayName(me.username)
        setCanReadLogs(Boolean(me.permissions?.includes('logs.read')))
        setBootState({ kind: 'ready', username: me.username })
        if (
          window.location.pathname === '/setup' ||
          window.location.pathname === '/login'
        ) {
          navigateTo('/')
        }
      } catch {
        if (!isCancelled) {
          setBootState({ kind: 'login' })
          navigateTo('/login')
        }
      }
    }

void boot()

return () => {
      isCancelled = true
    }
  }, [])

useEffect(() => {
    if (bootState.kind !== 'ready') {
      return
    }

let isCancelled = false

async function loadSidebarCounts(idleExempt: boolean) {
      try {
        const nodesResponse = await fetchNodes(undefined, fetch, {
          idleExempt,
        })
        if (!isCancelled) {
          setNodeSectionCounts(countNodesBySection(nodesResponse.nodes))
          setNodeHealthErrorCounts(
            countNodeHealthErrorsBySection(nodesResponse.nodes),
          )
        }
      } catch {
        if (!isCancelled) {
          setNodeSectionCounts(null)
          setNodeHealthErrorCounts(null)
        }
      }

if (!canReadLogs) {
        if (!isCancelled) {
          setAuthFailuresToday(null)
        }
        return
      }

try {
        const authResponse = await fetchAuthLogs(fetch, { idleExempt })
        if (!isCancelled) {
          setAuthFailuresToday(countAuthFailuresToday(authResponse.events))
        }
      } catch {
        if (!isCancelled) {
          setAuthFailuresToday(null)
        }
      }
    }

void loadSidebarCounts(false)

const pollIntervalId = window.setInterval(() => {
      void loadSidebarCounts(true)
    }, 30_000)

return () => {
      isCancelled = true
      window.clearInterval(pollIntervalId)
    }
  }, [bootState.kind, canReadLogs, activeSection, sidebarCountsRefreshToken])

useEffect(() => {
    if (bootState.kind !== 'ready') {
      return
    }

let isCancelled = false

async function loadBackendVersion() {
      try {
        const status = await fetchStatus()
        if (!isCancelled) {
          setBackendVersion(status.version)
        }
      } catch {
        if (!isCancelled) {
          setBackendVersion('unavailable')
        }
      }
    }

void loadBackendVersion()

return () => {
      isCancelled = true
    }
  }, [bootState.kind])

useEffect(() => {
    if (bootState.kind === 'loading') {
      document.title = documentTitleFor('loading')
      return
    }
    if (bootState.kind === 'setup') {
      document.title = documentTitleFor('setup')
      return
    }
    if (bootState.kind === 'login') {
      document.title = documentTitleFor('login')
      return
    }
    document.title = documentTitleFor(activeSection)
  }, [bootState.kind, activeSection])

function goToSection(section: SectionId) {
    if (section === 'setup' || section === 'login') {
      return
    }
    setActiveSection(section)
    setActiveNodeId(null)
    setActiveNodeDetailTab('overview')
    if (section === 'configuration') {
      navigateTo(pathFor(section, activeConfigTab))
      return
    }
    if (isResourceSectionId(section)) {
      setActiveResourceTab('overview')
      navigateTo(pathFor(section, 'overview', 'overview'))
      return
    }
    setActiveResourceTab('overview')
    navigateTo(pathFor(section))
  }

function goToConfigTab(tab: ConfigTabId) {
    setActiveSection('configuration')
    setActiveConfigTab(tab)
    setActiveNodeId(null)
    navigateTo(pathFor('configuration', tab))
  }

function goToResourceTab(tab: ResourceTabId) {
    if (!isResourceSectionId(activeSection)) {
      return
    }
    setActiveResourceTab(tab)
    setActiveNodeId(null)
    setActiveNodeDetailTab('overview')
    navigateTo(pathFor(activeSection, 'overview', tab))
  }

function clearSignedInState() {
    setProfileDisplayName(null)
    setCanReadLogs(false)
  }

async function handleLogout() {
    try {
      await logout()
    } catch {
      // Still leave the signed-in UI even if the session is already gone.
    }
    clearSignedInState()
    window.history.replaceState(null, '', '/login?reason=logout')
    setBootState({ kind: 'login' })
  }

if (bootState.kind === 'loading') {
    return (
      <div className="wizard-shell">
        <p className="config-hint">Loading…</p>
      </div>
    )
  }

if (bootState.kind === 'setup') {
    return (
      <SetupWizard
        clientIp={bootState.clientIp}
        onCompleted={() => {
          window.history.replaceState(null, '', '/login?from=setup')
          setBootState({ kind: 'login' })
        }}
      />
    )
  }

if (bootState.kind === 'login') {
    return (
      <LoginPage
        onLoggedIn={(username) => {
          setProfileDisplayName(username)
          void (async () => {
            try {
              const me = await fetchMe()
              setCanReadLogs(Boolean(me?.permissions?.includes('logs.read')))
            } catch {
              setCanReadLogs(false)
            }
            setBootState({ kind: 'ready', username })
            navigateTo('/')
            setActiveSection('overview')
          })()
        }}
      />
    )
  }

return (
    <div className="app-shell">
      <aside className="sidebar" aria-label="Main menu">
        <div className="sidebar-header">
          <h1 className="brand">Cluster Canvas</h1>
          <p className="version-line">Frontend Version {__FRONTEND_VERSION__}</p>
          <p className="version-line">Backend Version {backendVersion}</p>
        </div>

<nav className="sidebar-nav" aria-label="Sections">
          {NAV_ITEMS.slice(0, 1).map((item) => (
            <button
              key={item.id}
              type="button"
              className={
                activeSection === item.id
                  ? 'nav-item nav-item-active'
                  : 'nav-item'
              }
              aria-current={activeSection === item.id ? 'page' : undefined}
              onClick={() => goToSection(item.id)}
            >
              {item.label}
            </button>
          ))}
          <div className="nav-section-divider" aria-hidden="true" />
          {NAV_ITEMS.slice(1).map((item) => {
            const sectionCount =
              isResourceSectionId(item.id) && nodeSectionCounts !== null
                ? nodeSectionCounts[item.id]
                : null
            const healthErrorCount =
              isResourceSectionId(item.id) && nodeHealthErrorCounts !== null
                ? nodeHealthErrorCounts[item.id]
                : null
            return (
              <button
                key={item.id}
                type="button"
                className={
                  activeSection === item.id
                    ? 'nav-item nav-item-active'
                    : 'nav-item'
                }
                aria-current={activeSection === item.id ? 'page' : undefined}
                onClick={() => goToSection(item.id)}
              >
                <span className="nav-item-label">{item.label}</span>
                {healthErrorCount !== null && healthErrorCount > 0 ? (
                  <span
                    className="nav-count-badge nav-count-badge-alert"
                    aria-label={`${healthErrorCount} unhealthy`}
                  >
                    {healthErrorCount}
                  </span>
                ) : null}
                {sectionCount !== null ? (
                  <span className="nav-count-badge" aria-hidden="true">
                    {sectionCount}
                  </span>
                ) : null}
              </button>
            )
          })}
        </nav>

{canReadLogs ? (
          <div className="sidebar-logs">
            <p className="sidebar-category-label">Logs</p>
            <button
              type="button"
              className={
                activeSection === 'logs'
                  ? 'nav-item nav-item-active'
                  : 'nav-item'
              }
              aria-current={activeSection === 'logs' ? 'page' : undefined}
              onClick={() => goToSection('logs')}
            >
              <span className="nav-item-label">Activity</span>
              {authFailuresToday !== null && authFailuresToday > 0 ? (
                <span
                  className="nav-count-badge nav-count-badge-alert"
                  aria-hidden="true"
                >
                  {authFailuresToday}
                </span>
              ) : null}
            </button>
          </div>
        ) : null}

<div className="sidebar-footer">
          <div className="sidebar-footer-profile-row">
            <button
              type="button"
              className={
                activeSection === 'profile'
                  ? 'nav-item nav-item-active profile-item'
                  : 'nav-item profile-item'
              }
              aria-current={activeSection === 'profile' ? 'page' : undefined}
              onClick={() => goToSection('profile')}
            >
              <UserIcon />
              {profileLabel}
            </button>
            <button
              type="button"
              className="nav-item logout-item"
              aria-label="Log out"
              onClick={() => {
                void handleLogout()
              }}
            >
              <LogoutIcon />
            </button>
          </div>
          <button
            type="button"
            className={
              activeSection === 'configuration'
                ? 'nav-item nav-item-active config-item'
                : 'nav-item config-item'
            }
            aria-current={
              activeSection === 'configuration' ? 'page' : undefined
            }
            onClick={() => goToSection('configuration')}
          >
            <CogIcon />
            Configuration
          </button>
        </div>
      </aside>

<main className="content" aria-label={SECTION_TITLES[activeSection]}>
        <h2>
          {activeSection === 'profile' ? profileLabel : SECTION_TITLES[activeSection]}
        </h2>
        {activeSection === 'configuration' ? (
          <ConfigurationPanel
            activeConfigTab={activeConfigTab}
            onConfigTabChange={goToConfigTab}
            themePreference={themePreference}
            onThemePreferenceChange={updateThemePreference}
          />
        ) : activeSection === 'profile' ? (
          <ProfilePanel
            onSignedOut={() => {
              clearSignedInState()
              setBootState({ kind: 'login' })
              navigateTo('/login')
            }}
          />
        ) : activeSection === 'logs' ? (
          <LogsPanel />
        ) : isResourceSectionId(activeSection) ? (
          <ResourceSectionPanel
            section={activeSection}
            activeResourceTab={activeResourceTab}
            onResourceTabChange={goToResourceTab}
            nodeId={activeNodeId}
            nodeDetailTab={activeNodeDetailTab}
            onNodesChanged={() => {
              setSidebarCountsRefreshToken((token) => token + 1)
            }}
          />
        ) : activeSection === 'overview' ? (
          <OverviewPanel />
        ) : (
          <p>Coming soon</p>
        )}
      </main>
    </div>
  )
}

export default App

Account

Change password

Authenticator (TOTP)

Add Action

{isEditing ? editingIsBuiltin ? `Widget settings · ${draftName}` : `Edit ${editorKind === 'shell' ? 'shell command' : 'script'}` : `New ${editorKind === 'shell' ? 'shell command' : 'script'}`}