From 1b05577bdf434fe614c138c7ab6fad624372efaa Mon Sep 17 00:00:00 2001
From: Batrachophreno <Batrochophreno@gmail.com>
Date: Mon, 8 Jun 2026 06:45:31 -0400
Subject: [PATCH] TGUI Hotfixes, Oh God Am I The TGUI Guy Now Edition (#22648)

changes:
- bugfix: "Restores the Modular Computer access cable header button for
connecting to IPCs and machinery."
- bugfix: "Fixes display issues in the Robotics interface's
<collapsible> elements."
- bugfix: "Fixes in-chat feedback text provided by the Cyborg Analyzer
(organ name and status now both inline)."
  - bugfix: "Crew Manifest PDA app now filters out off-ship personnel."
- bugfix: "Fixes Autolathe TGUI appending search- and category- filtered
recipes instead of recomputing the list with those filters."
- bugfix: "Fixes runtime when ghost opens dedicated camera console UI."
- code_imp: "Update some defs referencing 'supply' department to
'operations'."
- refactor: "Standardizes all interface search bars to use the native
'SearchBar' component."
- refactor: "AtmosAlarmControl interface now correctly auto-sorts alarms
by alert status."
---
 code/controllers/subsystems/radio.dm          |   4 +-
 .../items/devices/radio/_radio_defines.dm     |   4 +-
 .../items/devices/radio/encryptionkey.dm      |  12 +-
 .../structures/machinery/computer/camera.dm   |  11 +-
 .../living/silicon/ai/ai_remote_control.dm    |   2 +-
 .../mob/living/silicon/robot/analyzer.dm      |  11 +-
 .../mob/living/silicon/robot/robot_modules.dm |  12 +-
 .../file_system/programs/research/robotics.dm |  53 ++--
 .../file_system/programs/security/camera.dm   |  11 +-
 code/modules/tgui/modules/ipc_diagnostic.dm   |   3 +
 code/stylesheet.dm                            |   3 +-
 html/changelogs/Bat-TGUIHotfixes5.yml         |  12 +
 .../tgui-panel/styles/tgchat/chat-dark.scss   |   2 +-
 .../tgui-panel/styles/tgchat/chat-light.scss  |   2 +-
 tgui/packages/tgui-say/styles/colors.scss     |  76 +++---
 tgui/packages/tgui/interfaces/ATM.tsx         |   2 +-
 .../tgui/interfaces/AtmosAlarmControl.tsx     |  39 +--
 tgui/packages/tgui/interfaces/Autolathe.tsx   | 247 +++++++++---------
 .../tgui/interfaces/CameraMonitoring.tsx      |  13 +-
 tgui/packages/tgui/interfaces/CargoOrder.tsx  |  10 +-
 tgui/packages/tgui/interfaces/ChatClient.tsx  |  23 +-
 tgui/packages/tgui/interfaces/ChemCodex.tsx   |  13 +-
 .../packages/tgui/interfaces/CookingCodex.tsx |  13 +-
 tgui/packages/tgui/interfaces/FollowMenu.tsx  |  33 +--
 tgui/packages/tgui/interfaces/FusionCodex.tsx |  13 +-
 .../packages/tgui/interfaces/GhostSpawner.tsx |  12 +-
 tgui/packages/tgui/interfaces/Holopad.tsx     |  55 ++--
 .../tgui/interfaces/IPCDiagnostics.tsx        |   2 +-
 .../tgui/interfaces/LibraryComputer.tsx       |   8 +-
 .../ListInputWindow/ListInputModal.tsx        |  11 +-
 tgui/packages/tgui/interfaces/PlayerPanel.tsx |  13 +-
 tgui/packages/tgui/interfaces/PsionicShop.tsx |  12 +-
 tgui/packages/tgui/interfaces/QuikPay.tsx     |   9 +-
 tgui/packages/tgui/interfaces/RCON.tsx        |  20 +-
 tgui/packages/tgui/interfaces/Records.tsx     |  40 +--
 tgui/packages/tgui/interfaces/SmartFridge.tsx |  25 +-
 tgui/packages/tgui/interfaces/Uplink.tsx      |   8 +-
 tgui/packages/tgui/interfaces/Vending.tsx     |  41 +--
 .../interfaces/common/ManifestSection.tsx     |  18 +-
 .../tgui/interfaces/common/SearchBar.tsx      |   4 +
 tgui/packages/tgui/layouts/NtosWindow.tsx     |  13 +
 .../tgui/styles/interfaces/Radio.scss         |   2 +-
 42 files changed, 494 insertions(+), 423 deletions(-)
 create mode 100644 html/changelogs/Bat-TGUIHotfixes5.yml

diff --git a/code/controllers/subsystems/radio.dm b/code/controllers/subsystems/radio.dm
index f62d53a49bf..0e83f3f93ba 100644
--- a/code/controllers/subsystems/radio.dm
+++ b/code/controllers/subsystems/radio.dm
@@ -199,8 +199,8 @@ SUBSYSTEM_DEF(radio)
 			return "sciradio"
 		if (MED_FREQ,MED_I_FREQ)
 			return"medradio"
-		if (SUP_FREQ)	// cargo
-			return "supradio"
+		if (SUP_FREQ)	// operations
+			return "opsradio"
 		if (SRV_FREQ)	// service
 			return "srvradio"
 		if (ENT_FREQ) //entertainment
diff --git a/code/game/objects/items/devices/radio/_radio_defines.dm b/code/game/objects/items/devices/radio/_radio_defines.dm
index d8ac338f16b..dbb5002b17a 100644
--- a/code/game/objects/items/devices/radio/_radio_defines.dm
+++ b/code/game/objects/items/devices/radio/_radio_defines.dm
@@ -6,7 +6,7 @@
 #define CHANNEL_MEDICAL "Medical"
 #define CHANNEL_ENGINEERING "Engineering"
 #define CHANNEL_SECURITY "Security"
-#define CHANNEL_SUPPLY "Operations"
+#define CHANNEL_OPERATIONS "Operations"
 #define CHANNEL_SERVICE "Service"
 #define CHANNEL_AI_PRIVATE "AI Private"
 #define CHANNEL_PENAL "Penal"
@@ -32,7 +32,7 @@ var/global/list/ALL_RADIO_CHANNELS = list(
 	CHANNEL_MEDICAL = TRUE,
 	CHANNEL_ENGINEERING = TRUE,
 	CHANNEL_SECURITY = TRUE,
-	CHANNEL_SUPPLY = TRUE,
+	CHANNEL_OPERATIONS = TRUE,
 	CHANNEL_SERVICE = TRUE,
 	CHANNEL_AI_PRIVATE = TRUE,
 	CHANNEL_PENAL = TRUE,
diff --git a/code/game/objects/items/devices/radio/encryptionkey.dm b/code/game/objects/items/devices/radio/encryptionkey.dm
index d55258aa19b..0305ff384b8 100644
--- a/code/game/objects/items/devices/radio/encryptionkey.dm
+++ b/code/game/objects/items/devices/radio/encryptionkey.dm
@@ -170,13 +170,13 @@
 /obj/item/encryptionkey/heads/captain
 	name = "captain's encryption key"
 	icon_state = "cap_cypherkey"
-	channels = list(CHANNEL_COMMAND = TRUE, CHANNEL_SECURITY = TRUE, CHANNEL_PENAL = TRUE, CHANNEL_ENGINEERING = TRUE, CHANNEL_SCIENCE = TRUE, CHANNEL_MEDICAL = TRUE, CHANNEL_SUPPLY = TRUE, CHANNEL_SERVICE = TRUE, CHANNEL_HAILING = TRUE)
+	channels = list(CHANNEL_COMMAND = TRUE, CHANNEL_SECURITY = TRUE, CHANNEL_PENAL = TRUE, CHANNEL_ENGINEERING = TRUE, CHANNEL_SCIENCE = TRUE, CHANNEL_MEDICAL = TRUE, CHANNEL_OPERATIONS = TRUE, CHANNEL_SERVICE = TRUE, CHANNEL_HAILING = TRUE)
 
 /obj/item/encryptionkey/heads/ai_integrated
 	name = "ai integrated encryption key"
 	desc = "Integrated encryption key"
 	icon_state = "cap_cypherkey"
-	channels = list(CHANNEL_COMMAND = TRUE, CHANNEL_SECURITY = TRUE, CHANNEL_PENAL = TRUE, CHANNEL_ENGINEERING = TRUE, CHANNEL_SCIENCE = TRUE, CHANNEL_MEDICAL = TRUE, CHANNEL_SUPPLY = TRUE, CHANNEL_SERVICE = TRUE, CHANNEL_AI_PRIVATE = TRUE, CHANNEL_HAILING = TRUE)
+	channels = list(CHANNEL_COMMAND = TRUE, CHANNEL_SECURITY = TRUE, CHANNEL_PENAL = TRUE, CHANNEL_ENGINEERING = TRUE, CHANNEL_SCIENCE = TRUE, CHANNEL_MEDICAL = TRUE, CHANNEL_OPERATIONS = TRUE, CHANNEL_SERVICE = TRUE, CHANNEL_AI_PRIVATE = TRUE, CHANNEL_HAILING = TRUE)
 
 /obj/item/encryptionkey/heads/rd
 	name = "research director's encryption key"
@@ -206,12 +206,12 @@
 /obj/item/encryptionkey/headset_cargo
 	name = "operations radio encryption key"
 	icon_state = "cargo_cypherkey"
-	channels = list(CHANNEL_SUPPLY = TRUE, CHANNEL_HAILING = TRUE)
+	channels = list(CHANNEL_OPERATIONS = TRUE, CHANNEL_HAILING = TRUE)
 
 /obj/item/encryptionkey/headset_operations_manager
 	name = "operations manager radio encryption key"
 	icon_state = "cargo_cypherkey"
-	channels = list(CHANNEL_COMMAND = TRUE, CHANNEL_SUPPLY = TRUE, CHANNEL_HAILING = TRUE)
+	channels = list(CHANNEL_COMMAND = TRUE, CHANNEL_OPERATIONS = TRUE, CHANNEL_HAILING = TRUE)
 
 /obj/item/encryptionkey/headset_service
 	name = "service radio encryption key"
@@ -220,7 +220,7 @@
 
 /obj/item/encryptionkey/ert
 	name = "\improper ERT radio encryption key"
-	channels = list(CHANNEL_RESPONSE_TEAM = TRUE, CHANNEL_SCIENCE = TRUE, CHANNEL_COMMAND = TRUE, CHANNEL_MEDICAL = TRUE, CHANNEL_ENGINEERING = TRUE, CHANNEL_SECURITY = TRUE, CHANNEL_SUPPLY = TRUE, CHANNEL_SERVICE = TRUE, CHANNEL_HAILING = TRUE)
+	channels = list(CHANNEL_RESPONSE_TEAM = TRUE, CHANNEL_SCIENCE = TRUE, CHANNEL_COMMAND = TRUE, CHANNEL_MEDICAL = TRUE, CHANNEL_ENGINEERING = TRUE, CHANNEL_SECURITY = TRUE, CHANNEL_OPERATIONS = TRUE, CHANNEL_SERVICE = TRUE, CHANNEL_HAILING = TRUE)
 
 /obj/item/encryptionkey/onlyert
 	name = "\improper ERT radio encryption key"
@@ -254,7 +254,7 @@
 
 /obj/item/encryptionkey/cargo_spare
 	name = "spare operations radio encryption key"
-	additional_channels = list(CHANNEL_SUPPLY = TRUE)
+	additional_channels = list(CHANNEL_OPERATIONS = TRUE)
 
 /obj/item/encryptionkey/service_spare
 	name = "spare service radio encryption key"
diff --git a/code/game/objects/structures/machinery/computer/camera.dm b/code/game/objects/structures/machinery/computer/camera.dm
index f473c778658..cf7bfc62896 100644
--- a/code/game/objects/structures/machinery/computer/camera.dm
+++ b/code/game/objects/structures/machinery/computer/camera.dm
@@ -136,11 +136,18 @@
 	if(!istype(user))
 		return 0
 
-	var/obj/item/card/id/I = user.GetIdCard()
+	var/I = user.GetIdCard()
 	if(!I)
 		return 0
 
-	if(access in I.access)
+	var/list/access_list
+	if(islist(I))
+		access_list = I
+	else if(istype(I, /obj/item))
+		var/obj/item/item = I
+		access_list = item.GetAccess()
+
+	if(access in access_list)
 		return 1
 
 	return 0
diff --git a/code/modules/mob/living/silicon/ai/ai_remote_control.dm b/code/modules/mob/living/silicon/ai/ai_remote_control.dm
index 2e6a95f35e8..668ece26311 100644
--- a/code/modules/mob/living/silicon/ai/ai_remote_control.dm
+++ b/code/modules/mob/living/silicon/ai/ai_remote_control.dm
@@ -1,6 +1,6 @@
 /obj/item/robot_module/aicontrol
 	name = "ai controlled robot module"
-	channels = list(CHANNEL_COMMAND = TRUE, CHANNEL_SCIENCE = TRUE, CHANNEL_MEDICAL = TRUE, CHANNEL_ENGINEERING = TRUE, CHANNEL_SECURITY = TRUE, CHANNEL_SUPPLY = TRUE, CHANNEL_SERVICE = TRUE, CHANNEL_AI_PRIVATE = TRUE, CHANNEL_HAILING = TRUE)
+	channels = list(CHANNEL_COMMAND = TRUE, CHANNEL_SCIENCE = TRUE, CHANNEL_MEDICAL = TRUE, CHANNEL_ENGINEERING = TRUE, CHANNEL_SECURITY = TRUE, CHANNEL_OPERATIONS = TRUE, CHANNEL_SERVICE = TRUE, CHANNEL_AI_PRIVATE = TRUE, CHANNEL_HAILING = TRUE)
 	networks = list(NETWORK_COMMAND)
 	languages = list(
 					LANGUAGE_SOL_COMMON =  TRUE,
diff --git a/code/modules/mob/living/silicon/robot/analyzer.dm b/code/modules/mob/living/silicon/robot/analyzer.dm
index 786ca5bee22..272001219ed 100644
--- a/code/modules/mob/living/silicon/robot/analyzer.dm
+++ b/code/modules/mob/living/silicon/robot/analyzer.dm
@@ -102,17 +102,16 @@
 				continue
 			organ_found = TRUE
 			var/found_damage = FALSE
-			to_chat(user, SPAN_NOTICE(SPAN_BOLD("[O.name]")))
-			if(O.damage)
-				to_chat(user, SPAN_WARNING("Core damage detected."))
-				found_damage = TRUE
 			if(istype(O, /obj/item/organ/internal/machine))
 				var/obj/item/organ/internal/machine/machine_organ = O
 				if(machine_organ.get_integrity() < 100)
-					to_chat(user, SPAN_WARNING("<b>[machine_organ.name]</b>: Integrity damage detected."))
+					to_chat(user, "<font color='#FFA500'><b>[machine_organ.name]:</b> Integrity damage detected.</font>")
 					found_damage = TRUE
+			else if(O.damage)
+				to_chat(user, SPAN_WARNING("<b>[O.name]:</b> Core damage detected."))
+				found_damage = TRUE
 			if(!found_damage)
-				to_chat(user, SPAN_NOTICE("No damage detected."))
+				to_chat(user, SPAN_GOOD("<b>[O.name]:</b> No damage detected."))
 
 	if(!organ_found)
 		to_chat(user, SPAN_NOTICE("No prosthetics located."))
diff --git a/code/modules/mob/living/silicon/robot/robot_modules.dm b/code/modules/mob/living/silicon/robot/robot_modules.dm
index 64f32b1e707..b1e0aff3bfe 100644
--- a/code/modules/mob/living/silicon/robot/robot_modules.dm
+++ b/code/modules/mob/living/silicon/robot/robot_modules.dm
@@ -701,7 +701,7 @@ GLOBAL_LIST_INIT(robot_modules, list(
 
 /obj/item/robot_module/service/clerical
 	name = "clerical robot module"
-	channels = list(CHANNEL_SUPPLY = TRUE, CHANNEL_COMMAND = TRUE)
+	channels = list(CHANNEL_OPERATIONS = TRUE, CHANNEL_COMMAND = TRUE)
 	networks = list(NETWORK_MINE)
 	specialized_access_types = list(/datum/job/janitor) // Janitor is a nice general access without specifics
 
@@ -727,7 +727,7 @@ GLOBAL_LIST_INIT(robot_modules, list(
 
 /obj/item/robot_module/miner
 	name = "miner robot module"
-	channels = list(CHANNEL_SUPPLY = TRUE, CHANNEL_HAILING = TRUE)
+	channels = list(CHANNEL_OPERATIONS = TRUE, CHANNEL_HAILING = TRUE)
 	networks = list(NETWORK_MINE)
 	sprites = list(
 		"Basic" =          list(ROBOT_CHASSIS = "robot_mine", ROBOT_PANEL = "robot", ROBOT_EYES = "robot"),
@@ -794,7 +794,7 @@ GLOBAL_LIST_INIT(robot_modules, list(
 	name = "research module"
 	channels = list(
 		CHANNEL_SCIENCE = TRUE,
-		CHANNEL_SUPPLY  = TRUE
+		CHANNEL_OPERATIONS  = TRUE
 	)
 	networks = list(NETWORK_RESEARCH)
 	sprites = list(
@@ -1080,7 +1080,7 @@ GLOBAL_LIST_INIT(robot_modules, list(
 /obj/item/robot_module/mining_drone
 	name = "mining drone module"
 	no_slip = TRUE
-	channels = list(CHANNEL_SUPPLY = TRUE)
+	channels = list(CHANNEL_OPERATIONS = TRUE)
 	networks = list(NETWORK_MINE)
 	all_access = TRUE
 
@@ -1164,7 +1164,7 @@ GLOBAL_LIST_INIT(robot_modules, list(
 	)
 	channels = list(
 		CHANNEL_SERVICE =       TRUE,
-		CHANNEL_SUPPLY =        TRUE,
+		CHANNEL_OPERATIONS =        TRUE,
 		CHANNEL_SCIENCE =       TRUE,
 		CHANNEL_SECURITY =      TRUE,
 		CHANNEL_ENGINEERING =   TRUE,
@@ -1314,7 +1314,7 @@ GLOBAL_LIST_INIT(robot_modules, list(
 	)
 	channels = list(
 		CHANNEL_SERVICE =       TRUE,
-		CHANNEL_SUPPLY =        TRUE,
+		CHANNEL_OPERATIONS =        TRUE,
 		CHANNEL_SCIENCE =       TRUE,
 		CHANNEL_SECURITY =      TRUE,
 		CHANNEL_ENGINEERING =   TRUE,
diff --git a/code/modules/modular_computers/file_system/programs/research/robotics.dm b/code/modules/modular_computers/file_system/programs/research/robotics.dm
index a664dc84d83..9aab7fc9f1c 100644
--- a/code/modules/modular_computers/file_system/programs/research/robotics.dm
+++ b/code/modules/modular_computers/file_system/programs/research/robotics.dm
@@ -13,6 +13,20 @@
 	/// The diagnostics module associated with this program.
 	var/datum/tgui_module/ipc_diagnostic/diagnostic
 
+/datum/computer_file/program/robotics/proc/get_connected_ipc()
+	if(!computer.access_cable_dongle?.access_cable)
+		return
+
+	var/obj/item/organ/internal/machine/access_port/port = computer.access_cable_dongle.access_cable.target
+	if(!istype(port))
+		return
+
+	var/mob/living/carbon/human/ipc = port.owner
+	if(!isipc(ipc))
+		return
+
+	return ipc
+
 /datum/computer_file/program/robotics/ui_act(action, list/params, datum/tgui/ui, datum/ui_state/state)
 	. = ..()
 	if(!ishuman(ui.user))
@@ -20,35 +34,28 @@
 
 	var/mob/living/carbon/human/user = ui.user
 	if(action == "run_diagnostics")
-		if(computer.access_cable_dongle && computer.access_cable_dongle.access_cable)
-			var/mob/living/carbon/human/synthetic = computer.access_cable_dongle.access_cable.target
-			if(istype(user) && istype(synthetic))
-				ui.user.visible_message(SPAN_NOTICE("[user] begins running a diagnostic scan..."))
-				if(do_after(user, 3 SECONDS))
-					diagnostic = new(user, synthetic)
-					return TRUE
+		var/mob/living/carbon/human/synthetic = get_connected_ipc()
+		if(istype(synthetic))
+			ui.user.visible_message(SPAN_NOTICE("[user] begins running a diagnostic scan..."))
+			if(do_after(user, 3 SECONDS))
+				diagnostic = new(user, synthetic)
+				return TRUE
 
 	if(action == "open_diagnostic")
-		if(computer.access_cable_dongle && computer.access_cable_dongle.access_cable)
+		var/mob/living/carbon/human/synthetic = get_connected_ipc()
+		if(istype(diagnostic))
+			if(diagnostic.patient != synthetic)
+				to_chat(user, SPAN_WARNING("This diagnostic is no longer valid and has been deleted."))
+				QDEL_NULL(diagnostic)
+				return TRUE
 
-			if(istype(diagnostic))
-				if(diagnostic.patient != computer.access_cable_dongle.access_cable.target)
-					to_chat(user, SPAN_WARNING("This diagnostic is no longer valid and has been deleted."))
-					qdel(diagnostic)
-					return TRUE
-
-				var/mob/living/carbon/human/synthetic = computer.access_cable_dongle.access_cable.target
-				if(istype(user) && istype(synthetic))
-					diagnostic.ui_interact(user)
-					return TRUE
+			if(istype(synthetic))
+				diagnostic.ui_interact(user)
+				return TRUE
 
 /datum/computer_file/program/robotics/ui_data(mob/user)
 	var/list/data = list()
-	var/mob/living/carbon/human/ipc
-	if(computer.access_cable_dongle && computer.access_cable_dongle.access_cable)
-		var/obj/item/organ/internal/machine/access_port/port = computer.access_cable_dongle.access_cable.target
-		if(istype(port))
-			ipc = port.owner
+	var/mob/living/carbon/human/ipc = get_connected_ipc()
 
 	if(isipc(ipc))
 		var/datum/species/machine/machine_species = ipc.species // need to manually set to ipc species because of machine_ui_theme
diff --git a/code/modules/modular_computers/file_system/programs/security/camera.dm b/code/modules/modular_computers/file_system/programs/security/camera.dm
index ee2a08d1700..d68ba5d039b 100644
--- a/code/modules/modular_computers/file_system/programs/security/camera.dm
+++ b/code/modules/modular_computers/file_system/programs/security/camera.dm
@@ -92,11 +92,18 @@
 	if(!istype(user))
 		return 0
 
-	var/obj/item/card/id/I = user.GetIdCard()
+	var/I = user.GetIdCard()
 	if(!I)
 		return 0
 
-	if(access in I.access)
+	var/list/access_list
+	if(islist(I))
+		access_list = I
+	else if(istype(I, /obj/item))
+		var/obj/item/item = I
+		access_list = item.GetAccess()
+
+	if(access in access_list)
 		return 1
 
 	return 0
diff --git a/code/modules/tgui/modules/ipc_diagnostic.dm b/code/modules/tgui/modules/ipc_diagnostic.dm
index 38a10f72ddc..6b1cf44c67e 100644
--- a/code/modules/tgui/modules/ipc_diagnostic.dm
+++ b/code/modules/tgui/modules/ipc_diagnostic.dm
@@ -25,6 +25,9 @@
 		var/obj/item/organ/internal/machine/internal_diagnostics/diagnostics = ipc.internal_organs_by_name[BP_DIAGNOSTICS_SUITE]
 		if(!istype(diagnostics))
 			data["broken"] = TRUE
+			data["patient_name"] = ipc.real_name
+			data["machine_ui_theme"] = machine_species.machine_ui_theme
+			return data
 
 		data["patient_name"] = ipc.real_name
 		data["broken"] = diagnostics.is_broken()
diff --git a/code/stylesheet.dm b/code/stylesheet.dm
index 9958c4cfba9..d1821d0a74c 100644
--- a/code/stylesheet.dm
+++ b/code/stylesheet.dm
@@ -4,6 +4,7 @@
 
 // If you modify this file you ALSO need to modify tgui/packages/tgui-panel/styles/tgchat/chat-light.scss and chat-dark.scss
 // BUT you have to use PX font sizes with are on a x8 scale of these font sizes
+// For radio channel colors, ensure you update the 'say' window colors in 'tgui/packages/tgui-say/styles/colors.scss' as well.
 // Sample font-size: DM: 8 CSS: 64px
 
 /client/script = {"<style>
@@ -70,7 +71,7 @@ em						{font-style: normal;font-weight: bold;}
 .engradio				{color: #A66300;}
 .medradio				{color: #0a5c47;}
 .sciradio				{color: #993399;}
-.supradio				{color: #5F4519;}
+.opsradio				{color: #5F4519;}
 .srvradio				{color: #6eaa2c;}
 
 /* Miscellaneous */
diff --git a/html/changelogs/Bat-TGUIHotfixes5.yml b/html/changelogs/Bat-TGUIHotfixes5.yml
new file mode 100644
index 00000000000..c17f5a03e2a
--- /dev/null
+++ b/html/changelogs/Bat-TGUIHotfixes5.yml
@@ -0,0 +1,12 @@
+author: Batrachophrenoboocosmomachia
+delete-after: True
+changes:
+  - bugfix: "Restores the Modular Computer access cable header button for connecting to IPCs and machinery."
+  - bugfix: "Fixes display issues in the Robotics interface's <collapsible> elements."
+  - bugfix: "Fixes in-chat feedback text provided by the Cyborg Analyzer (organ name and status now both inline)."
+  - bugfix: "Crew Manifest PDA app now filters out off-ship personnel."
+  - bugfix: "Fixes Autolathe TGUI appending search- and category- filtered recipes instead of recomputing the list with those filters."
+  - bugfix: "Fixes runtime when ghost opens dedicated camera console UI."
+  - code_imp: "Update some defs referencing 'supply' department to 'operations'."
+  - refactor: "Standardizes all interface search bars to use the native 'SearchBar' component."
+  - refactor: "AtmosAlarmControl interface now correctly auto-sorts alarms by alert status."
diff --git a/tgui/packages/tgui-panel/styles/tgchat/chat-dark.scss b/tgui/packages/tgui-panel/styles/tgchat/chat-dark.scss
index 127264648cb..f1992284d88 100644
--- a/tgui/packages/tgui-panel/styles/tgchat/chat-dark.scss
+++ b/tgui/packages/tgui-panel/styles/tgchat/chat-dark.scss
@@ -489,7 +489,7 @@ em {
 .sciradio {
   color: #c03bc0;
 }
-.supradio {
+.opsradio {
   color: #c09141;
 }
 .srvradio {
diff --git a/tgui/packages/tgui-panel/styles/tgchat/chat-light.scss b/tgui/packages/tgui-panel/styles/tgchat/chat-light.scss
index 2b04781e445..3db1ab4fc27 100644
--- a/tgui/packages/tgui-panel/styles/tgchat/chat-light.scss
+++ b/tgui/packages/tgui-panel/styles/tgchat/chat-light.scss
@@ -503,7 +503,7 @@ em {
 .sciradio {
   color: #993399;
 }
-.supradio {
+.opsradio {
   color: #5f4519;
 }
 .srvradio {
diff --git a/tgui/packages/tgui-say/styles/colors.scss b/tgui/packages/tgui-say/styles/colors.scss
index ed8babb93f3..9352a20e011 100644
--- a/tgui/packages/tgui-say/styles/colors.scss
+++ b/tgui/packages/tgui-say/styles/colors.scss
@@ -7,44 +7,60 @@ $lightBorder: hsl(0, 0%, 73.3%);
 $lightHover: hsl(0, 0%, 91.8%);
 $scrollbar-color-multiplier: 1 !default;
 
+// The source of truth for these colors is 'code/stylesheet.dm'. Do NOT modify these colors here without modifying them in that file as well.
+// Only those colors which do not have existing corrolaries in the stylesheet should be modified here, and if you add new colors to the stylesheet, add them here as well.
+// Finally, note that these channels are mapped to those configured in 'tgui/packages/tgui-say/constants.ts'.
 $_channel_map: (
-  'Admin': hsl(300, 100%, 86.7%),
-  'AI': hsl(332.2, 59.6%, 60.2%),
-  'Blue': hsl(248, 69%, 62%),
-  'Burg': hsl(197, 56.6%, 28%),
-  'CCom': hsl(197, 62.6%, 39.8%),
-  'Cling': hsl(86.7, 56.6%, 28%),
-  'Cmd': hsl(197, 62.6%, 39.8%),
-  'Com': hsl(132.8, 74.4%, 45.9%),
-  'Dept': hsl(132.8, 74.4%, 45.9%),
-  'Engi': hsl(17, 87.8%, 61.4%),
-  'Exp': hsl(176.1, 20%, 45.1%),
-  'Hail': hsl(197, 62.6%, 39.8%),
-  'Hive': hsl(300, 17.7%, 44.3%),
-  'Int': hsl(132.8, 74.4%, 45.9%),
-  'io': hsl(209.6, 100%, 55.9%),
-  'Jock': hsl(33.7, 44.9%, 49.8%),
-  'LEar': hsl(132.8, 74.4%, 45.9%),
+  // Speech/in-character modes
+  'Say': hsl(213.6, 37.9%, 74.1%),
   'Me': hsl(227, 63.5%, 60.2%),
-  'Med': hsl(202, 83.6%, 64.1%),
-  'Merc': hsl(359.1, 31.8%, 42.5%),
-  'Navy': hsl(216, 62%, 42%),
+  'Whsp': hsl(213.6, 37.9%, 74.1%),
+  'Pray': hsl(214, 86%, 30%),
+
+  // Out-of-character modes
+  'ALOOC': hsl(143, 53%, 49%),
+  'Dead': hsl(266, 84%, 37%),
+  'LOOC': hsl(210, 50%, 60%),
   'OOC': hsl(47.9, 100%, 40%),
+
+  // Public radio
+  'Com': hsl(132.8, 74.4%, 45.9%),
+  'Ent': hsl(36, 52%, 49%),
+  'Hail': hsl(267, 60%, 48%),
+  'Exp': hsl(46, 100%, 85%),
+
+  // Private radio channels
+  'AI': hsl(332.2, 59.6%, 60.2%),
+  'CCom': hsl(220, 66%, 29%), // CentComm
+  'Cmd': hsl(197, 62.6%, 39.8%),
+  'Dept': hsl(300, 100%, 50%), // Fallback when no department color is set
+  'Engi': hsl(36, 100%, 33%),
+  'Hive': hsl(300, 17.7%, 44.3%),
+  'Med': hsl(165, 79%, 30%),
   'Ops': hsl(33.7, 44.9%, 49.8%),
   'Penal': hsl(0, 71.2%, 53.7%),
-  'Ent': hsl(173, 7%, 74%),
-  'Pray': hsl(214, 86%, 30%),
-  'Raid': hsl(359.1, 31.8%, 42.5%),
-  'Radio': hsl(132.8, 74.4%, 45.9%),
-  'REar': hsl(132.8, 74.4%, 45.9%),
-  'Say': hsl(213.6, 37.9%, 74.1%),
-  'Sci': hsl(271.6, 91.7%, 76.5%),
+  'Sci': hsl(300, 50%, 40%),
   'Sec': hsl(0, 71.2%, 53.7%),
-  'Spec': hsl(132.8, 74.4%, 45.9%),
-  'Supp': hsl(33.7, 44.9%, 49.8%),
   'Svc': hsl(88.1, 60.6%, 40.8%),
+
+  // Antagonist and off-ship radio channels
+  'Burg': hsl(197, 56.6%, 28%),
+  'Cling': hsl(86.7, 56.6%, 28%), // Yes, yes, it's not 'radio', but shut up
+  'Jock': hsl(33.7, 44.9%, 49.8%),
+  'LEar': hsl(132.8, 74.4%, 45.9%),
+  'Merc': hsl(359.1, 31.8%, 42.5%),
+  'Navy': hsl(216, 62%, 42%),
+  'Raid': hsl(359.1, 31.8%, 42.5%),
+  'REar': hsl(132.8, 74.4%, 45.9%),
+  'Spec': hsl(132.8, 74.4%, 45.9%),
   'Synd': hsl(359.1, 31.8%, 42.5%),
-  'Whsp': hsl(213.6, 37.9%, 74.1%),
+
+  // Misc
+  'Admin': hsl(300, 100%, 86.7%),
+  'Blue': hsl(248, 69%, 62%),
+  'Int': hsl(132.8, 74.4%, 45.9%),
+  'Radio': hsl(132.8, 74.4%, 45.9%),
+  'io': hsl(209.6, 100%, 55.9%),
 );
 
 $channel_keys: map.keys($_channel_map) !default;
diff --git a/tgui/packages/tgui/interfaces/ATM.tsx b/tgui/packages/tgui/interfaces/ATM.tsx
index 6e6dda2c3ff..414d6b3c6db 100644
--- a/tgui/packages/tgui/interfaces/ATM.tsx
+++ b/tgui/packages/tgui/interfaces/ATM.tsx
@@ -152,7 +152,7 @@ export const AuthenticatedWindow = (props) => {
             maxValue={data.money}
             animated
             unit="电"
-            step={5}
+            step={1}
             stepPixelSize={5}
             onChange={(value) => setWithdraw(value)}
           />
diff --git a/tgui/packages/tgui/interfaces/AtmosAlarmControl.tsx b/tgui/packages/tgui/interfaces/AtmosAlarmControl.tsx
index 6563706c254..5d2d21dfa1d 100644
--- a/tgui/packages/tgui/interfaces/AtmosAlarmControl.tsx
+++ b/tgui/packages/tgui/interfaces/AtmosAlarmControl.tsx
@@ -1,7 +1,8 @@
-import { Button, Input, NoticeBox, Section, Table } from 'tgui-core/components';
+import { Button, NoticeBox, Section, Stack, Table } from 'tgui-core/components';
 import type { BooleanLike } from 'tgui-core/react';
 import { useBackend, useLocalState } from '../backend';
 import { NtosWindow } from '../layouts';
+import { SearchBar } from './common/SearchBar';
 
 export type AlarmData = {
   alarms: Alarm[];
@@ -26,20 +27,22 @@ export const AtmosAlarmControl = (props) => {
         <Section
           title="Alarms"
           buttons={
-            <>
-              <Button content={'Refresh'} onClick={() => act('refresh')} />
-              <Input
-                autoFocus
-                autoSelect
-                placeholder="Search by name"
-                width="40vw"
-                maxLength={512}
-                onBlur={(value) => {
-                  setSearchTerm(value);
-                }}
-                value={searchTerm}
-              />
-            </>
+            <Stack align="center">
+              <Stack.Item>
+                <Button content={'Refresh'} onClick={() => act('refresh')} />
+              </Stack.Item>
+              <Stack.Item>
+                <SearchBar
+                  autoFocus
+                  placeholder="Search by name"
+                  query={searchTerm}
+                  onSearch={(value) => {
+                    setSearchTerm(value);
+                  }}
+                  style={{ width: '40vw' }}
+                />
+              </Stack.Item>
+            </Stack>
           }
         >
           <Table>
@@ -57,7 +60,11 @@ export const AtmosAlarmControl = (props) => {
                       ?.toLowerCase()
                       .indexOf(searchTerm.toLowerCase()) > -1,
                 )
-                .sort((a, b) => a.dept?.localeCompare(b?.dept))
+                .sort(
+                  (a, b) =>
+                    Number(b.danger) - Number(a.danger) ||
+                    a.dept?.localeCompare(b?.dept),
+                )
                 .map((alarm) => (
                   <Table.Row key={alarm.ref}>
                     <Table.Cell>{alarm.deck}</Table.Cell>
diff --git a/tgui/packages/tgui/interfaces/Autolathe.tsx b/tgui/packages/tgui/interfaces/Autolathe.tsx
index d6eff1a8066..2bbedc19060 100644
--- a/tgui/packages/tgui/interfaces/Autolathe.tsx
+++ b/tgui/packages/tgui/interfaces/Autolathe.tsx
@@ -1,7 +1,6 @@
 import {
   Box,
   Button,
-  Input,
   LabeledList,
   NoticeBox,
   ProgressBar,
@@ -15,6 +14,7 @@ import type { BooleanLike } from 'tgui-core/react';
 import { capitalizeAll } from 'tgui-core/string';
 import { useBackend, useLocalState } from '../backend';
 import { Window } from '../layouts';
+import { SearchBar } from './common/SearchBar';
 
 export type AutolatheData = {
   manufacturer: string;
@@ -131,24 +131,29 @@ export const Autolathe = (props) => {
 
 export const CategoryData = (props) => {
   const { act, data } = useBackend<AutolatheData>();
-  const [tab, setTab] = useLocalState('tab', 'All');
+  const [tab] = useLocalState('tab', 'All');
   const [searchTerm, setSearchTerm] = useLocalState<string>(`searchTerm`, ``);
-  const [amount, setAmount] = useLocalState('amount', 1);
+  const search = searchTerm.trim().toLowerCase();
+  const recipes = data.recipes.filter((recipe) => {
+    if (tab !== 'All' && recipe.category !== tab) {
+      return false;
+    }
+    if (search && !recipe.name?.toLowerCase().includes(search)) {
+      return false;
+    }
+    return true;
+  });
 
   return (
     <Section
       fill
       title={tab}
       buttons={
-        <Input
+        <SearchBar
           autoFocus
-          autoSelect
           placeholder="Search by name"
-          maxLength={512}
-          onBlur={(value) => {
-            setSearchTerm(value);
-          }}
-          value={searchTerm}
+          query={searchTerm}
+          onSearch={(value) => setSearchTerm(value)}
         />
       }
     >
@@ -157,25 +162,46 @@ export const CategoryData = (props) => {
           <Table.Cell>Recipe</Table.Cell>
           <Table.Cell>Resources</Table.Cell>
         </Table.Row>
-        {data.recipes
-          .filter(
-            (c) => c.name?.toLowerCase().indexOf(searchTerm.toLowerCase()) > -1,
-          )
-          .map((recipe) =>
-            recipe.category === tab || tab === 'All' ? (
-              <Table.Row key={tab}>
-                <Table.Cell py={0.25}>
+        {recipes.map((recipe) => (
+          <Table.Row key={recipe.recipe}>
+            <Table.Cell py={0.25}>
+              <Button
+                content={
+                  <Box bold color={recipe.hack_only ? 'red' : ''}>
+                    {capitalizeAll(recipe.name)}
+                  </Box>
+                }
+                tooltip={
+                  !recipe.enabled
+                    ? `Security Level Needed: ${recipe.security_level}`
+                    : ''
+                }
+                className={
+                  !recipe.enabled || recipe.can_make
+                    ? 'color-disabled'
+                    : 'color-default'
+                }
+                backgroundColor={
+                  !recipe.enabled || recipe.can_make ? '#9c0000' : null
+                }
+                textColor={
+                  !recipe.enabled || recipe.can_make ? '#9e9e9e' : null
+                }
+                onClick={() =>
+                  !recipe.enabled || recipe.can_make
+                    ? null
+                    : act('make', { multiplier: 1, recipe: recipe.recipe })
+                }
+              />
+              {recipe.max_sheets ? (
+                <>
+                  {' '}
                   <Button
                     content={
                       <Box bold color={recipe.hack_only ? 'red' : ''}>
-                        {capitalizeAll(recipe.name)}
+                        [x5]
                       </Box>
                     }
-                    tooltip={
-                      !recipe.enabled
-                        ? `Security Level Needed: ${recipe.security_level}`
-                        : ''
-                    }
                     className={
                       !recipe.enabled || recipe.can_make
                         ? 'color-disabled'
@@ -190,112 +216,83 @@ export const CategoryData = (props) => {
                     onClick={() =>
                       !recipe.enabled || recipe.can_make
                         ? null
-                        : act('make', { multiplier: 1, recipe: recipe.recipe })
+                        : act('make', {
+                            multiplier: 5,
+                            recipe: recipe.recipe,
+                          })
                     }
                   />
-                  {recipe.max_sheets ? (
-                    <>
-                      {' '}
-                      <Button
-                        content={
-                          <Box bold color={recipe.hack_only ? 'red' : ''}>
-                            [x5]
-                          </Box>
-                        }
-                        className={
-                          !recipe.enabled || recipe.can_make
-                            ? 'color-disabled'
-                            : 'color-default'
-                        }
-                        backgroundColor={
-                          !recipe.enabled || recipe.can_make ? '#9c0000' : null
-                        }
-                        textColor={
-                          !recipe.enabled || recipe.can_make ? '#9e9e9e' : null
-                        }
-                        onClick={() =>
-                          !recipe.enabled || recipe.can_make
-                            ? null
-                            : act('make', {
-                                multiplier: 5,
-                                recipe: recipe.recipe,
-                              })
-                        }
-                      />
-                      <Button
-                        content={
-                          <Box bold color={recipe.hack_only ? 'red' : ''}>
-                            [x10]
-                          </Box>
-                        }
-                        className={
-                          !recipe.enabled || recipe.can_make
-                            ? 'color-disabled'
-                            : 'color-default'
-                        }
-                        backgroundColor={
-                          !recipe.enabled || recipe.can_make ? '#9c0000' : null
-                        }
-                        textColor={
-                          !recipe.enabled || recipe.can_make ? '#9e9e9e' : null
-                        }
-                        onClick={() =>
-                          !recipe.enabled || recipe.can_make
-                            ? null
-                            : act('make', {
-                                multiplier: 10,
-                                recipe: recipe.recipe,
-                              })
-                        }
-                      />
-                      <Button
-                        content={
-                          <Box bold color={recipe.hack_only ? 'red' : ''}>
-                            [x{recipe.max_sheets}]
-                          </Box>
-                        }
-                        className={
-                          !recipe.enabled || recipe.can_make
-                            ? 'color-disabled'
-                            : 'color-default'
-                        }
-                        backgroundColor={
-                          !recipe.enabled || recipe.can_make ? '#9c0000' : null
-                        }
-                        textColor={
-                          !recipe.enabled || recipe.can_make ? '#9e9e9e' : null
-                        }
-                        onClick={() =>
-                          !recipe.enabled || recipe.can_make
-                            ? null
-                            : act('make', {
-                                multiplier: recipe.max_sheets,
-                                recipe: recipe.recipe,
-                              })
-                        }
-                      />
-                    </>
-                  ) : (
-                    ''
-                  )}
-                </Table.Cell>
-                <Table.Cell collapsing>
                   <Button
-                    color="transparent"
-                    tooltip={
-                      <>
-                        <div>{recipe.resources}</div>
-                        <div>{recipe.build_time} seconds</div>
-                      </>
+                    content={
+                      <Box bold color={recipe.hack_only ? 'red' : ''}>
+                        [x10]
+                      </Box>
+                    }
+                    className={
+                      !recipe.enabled || recipe.can_make
+                        ? 'color-disabled'
+                        : 'color-default'
+                    }
+                    backgroundColor={
+                      !recipe.enabled || recipe.can_make ? '#9c0000' : null
+                    }
+                    textColor={
+                      !recipe.enabled || recipe.can_make ? '#9e9e9e' : null
+                    }
+                    onClick={() =>
+                      !recipe.enabled || recipe.can_make
+                        ? null
+                        : act('make', {
+                            multiplier: 10,
+                            recipe: recipe.recipe,
+                          })
                     }
-                    icon="question"
                   />
-                </Table.Cell>
-              </Table.Row>
-            ) : (
-              ''
-            ),
-          )}
+                  <Button
+                    content={
+                      <Box bold color={recipe.hack_only ? 'red' : ''}>
+                        [x{recipe.max_sheets}]
+                      </Box>
+                    }
+                    className={
+                      !recipe.enabled || recipe.can_make
+                        ? 'color-disabled'
+                        : 'color-default'
+                    }
+                    backgroundColor={
+                      !recipe.enabled || recipe.can_make ? '#9c0000' : null
+                    }
+                    textColor={
+                      !recipe.enabled || recipe.can_make ? '#9e9e9e' : null
+                    }
+                    onClick={() =>
+                      !recipe.enabled || recipe.can_make
+                        ? null
+                        : act('make', {
+                            multiplier: recipe.max_sheets,
+                            recipe: recipe.recipe,
+                          })
+                    }
+                  />
+                </>
+              ) : (
+                ''
+              )}
+            </Table.Cell>
+            <Table.Cell collapsing>
+              <Button
+                color="transparent"
+                tooltip={
+                  <>
+                    <div>{recipe.resources}</div>
+                    <div>{recipe.build_time} seconds</div>
+                  </>
+                }
+                icon="question"
+              />
+            </Table.Cell>
+          </Table.Row>
+        ))}
       </Table>
     </Section>
   );
diff --git a/tgui/packages/tgui/interfaces/CameraMonitoring.tsx b/tgui/packages/tgui/interfaces/CameraMonitoring.tsx
index 8b2f747c8ee..48a4cd3e33a 100644
--- a/tgui/packages/tgui/interfaces/CameraMonitoring.tsx
+++ b/tgui/packages/tgui/interfaces/CameraMonitoring.tsx
@@ -1,7 +1,8 @@
-import { Button, Input, NoticeBox, Section } from 'tgui-core/components';
+import { Button, NoticeBox, Section } from 'tgui-core/components';
 import type { BooleanLike } from 'tgui-core/react';
 import { useBackend, useLocalState } from '../backend';
 import { NtosWindow } from '../layouts';
+import { SearchBar } from './common/SearchBar';
 
 export type CameraData = {
   current_camera: Camera;
@@ -79,16 +80,14 @@ export const ShowNetworkCameras = (props) => {
     <Section
       title="Cameras"
       buttons={
-        <Input
+        <SearchBar
           autoFocus
-          autoSelect
           placeholder="Search by name"
-          width="40vw"
-          maxLength={512}
-          onChange={(value) => {
+          query={searchTerm}
+          onSearch={(value) => {
             setSearchTerm(value);
           }}
-          value={searchTerm}
+          style={{ width: '40vw' }}
         />
       }
     >
diff --git a/tgui/packages/tgui/interfaces/CargoOrder.tsx b/tgui/packages/tgui/interfaces/CargoOrder.tsx
index 60035990255..a090d32bbf8 100644
--- a/tgui/packages/tgui/interfaces/CargoOrder.tsx
+++ b/tgui/packages/tgui/interfaces/CargoOrder.tsx
@@ -2,7 +2,6 @@ import {
   Box,
   Button,
   Icon,
-  Input,
   LabeledList,
   Section,
   Stack,
@@ -14,6 +13,7 @@ import type { BooleanLike } from 'tgui-core/react';
 import { useBackend, useLocalState } from '../backend';
 import { NtosWindow } from '../layouts';
 import { sanitizeText } from '../sanitize';
+import { SearchBar } from './common/SearchBar';
 
 export type CargoData = {
   username: string;
@@ -168,15 +168,13 @@ export const MainPage = (props) => {
       <Section
         title="Catalog"
         buttons={
-          <Input
+          <SearchBar
             autoFocus
-            autoSelect
             placeholder="Search by name"
-            maxLength={512}
-            onChange={(value) => {
+            query={searchTerm}
+            onSearch={(value) => {
               setSearchTerm(value);
             }}
-            value={searchTerm}
           />
         }
       />
diff --git a/tgui/packages/tgui/interfaces/ChatClient.tsx b/tgui/packages/tgui/interfaces/ChatClient.tsx
index b16ba9117aa..56487e28616 100644
--- a/tgui/packages/tgui/interfaces/ChatClient.tsx
+++ b/tgui/packages/tgui/interfaces/ChatClient.tsx
@@ -10,6 +10,7 @@ import {
 import type { BooleanLike } from 'tgui-core/react';
 import { useBackend, useLocalState } from '../backend';
 import { NtosWindow } from '../layouts';
+import { SearchBar } from './common/SearchBar';
 
 export type ChatData = {
   service: BooleanLike;
@@ -143,17 +144,14 @@ export const AllUsers = (props) => {
 
   return (
     <Stack vertical>
-      <Input
+      <SearchBar
         autoFocus
-        autoSelect
         placeholder="Search by name"
-        height="10%"
-        width="40%"
-        maxLength={512}
-        onChange={(value) => {
+        query={searchTerm}
+        onSearch={(value) => {
           setSearchTerm(value);
         }}
-        value={searchTerm}
+        style={{ width: '40%' }}
       />
       {data.users?.length &&
         data.users
@@ -377,17 +375,14 @@ export const ChannelsWindow = (props) => {
       }
     >
       <Stack vertical>
-        <Input
+        <SearchBar
           autoFocus
-          autoSelect
           placeholder="Search by name"
-          height="10%"
-          width="40%"
-          maxLength={512}
-          onEnter={(value) => {
+          query={channelSearchTerm}
+          onSearch={(value) => {
             setChannelSearchTerm(value);
           }}
-          value={channelSearchTerm}
+          style={{ width: '40%' }}
         />
         {data.channels?.length
           ? data.channels
diff --git a/tgui/packages/tgui/interfaces/ChemCodex.tsx b/tgui/packages/tgui/interfaces/ChemCodex.tsx
index 821626570d4..73afc5f0044 100644
--- a/tgui/packages/tgui/interfaces/ChemCodex.tsx
+++ b/tgui/packages/tgui/interfaces/ChemCodex.tsx
@@ -1,6 +1,7 @@
-import { Input, LabeledList, NoticeBox, Section } from 'tgui-core/components';
+import { LabeledList, NoticeBox, Section } from 'tgui-core/components';
 import { useBackend, useLocalState } from '../backend';
 import { NtosWindow } from '../layouts';
+import { SearchBar } from './common/SearchBar';
 
 export type CodexData = {
   reactions: Reaction[];
@@ -37,16 +38,14 @@ export const ChemCodex = (props) => {
           title="Codex Search"
           fitted
           buttons={
-            <Input
+            <SearchBar
               autoFocus
-              autoSelect
               placeholder="Search by name"
-              width="40vw"
-              maxLength={512}
-              onChange={(value) => {
+              query={searchTerm}
+              onSearch={(value) => {
                 setSearchTerm(value);
               }}
-              value={searchTerm}
+              style={{ width: '40vw' }}
             />
           }
         />
diff --git a/tgui/packages/tgui/interfaces/CookingCodex.tsx b/tgui/packages/tgui/interfaces/CookingCodex.tsx
index cbdadf03456..6db4fdb5a2b 100644
--- a/tgui/packages/tgui/interfaces/CookingCodex.tsx
+++ b/tgui/packages/tgui/interfaces/CookingCodex.tsx
@@ -1,6 +1,7 @@
-import { Image, Input, Section, Table } from 'tgui-core/components';
+import { Image, Section, Table } from 'tgui-core/components';
 import { useBackend, useLocalState } from '../backend';
 import { NtosWindow } from '../layouts';
+import { SearchBar } from './common/SearchBar';
 
 export type CodexData = {
   recipes: Recipe[];
@@ -24,16 +25,14 @@ export const CookingCodex = (props) => {
           title="Codex Search"
           fitted
           buttons={
-            <Input
+            <SearchBar
               autoFocus
-              autoSelect
               placeholder="Search"
-              width="40vw"
-              maxLength={512}
-              onChange={(value) => {
+              query={searchTerm}
+              onSearch={(value) => {
                 setSearchTerm(value);
               }}
-              value={searchTerm}
+              style={{ width: '40vw' }}
             />
           }
         >
diff --git a/tgui/packages/tgui/interfaces/FollowMenu.tsx b/tgui/packages/tgui/interfaces/FollowMenu.tsx
index e2e5edc6c54..9bf055b8593 100644
--- a/tgui/packages/tgui/interfaces/FollowMenu.tsx
+++ b/tgui/packages/tgui/interfaces/FollowMenu.tsx
@@ -1,7 +1,8 @@
-import { Button, Collapsible, Input, Section } from 'tgui-core/components';
+import { Button, Collapsible, Section, Stack } from 'tgui-core/components';
 import type { BooleanLike } from 'tgui-core/react';
 import { useBackend, useLocalState } from '../backend';
 import { Window } from '../layouts';
+import { SearchBar } from './common/SearchBar';
 
 export type FollowData = {
   ghosts: Ghost[];
@@ -26,20 +27,22 @@ export const FollowMenu = (props) => {
         <Section
           title="Follow Menu"
           buttons={
-            <>
-              <Input
-                autoFocus
-                autoSelect
-                placeholder="Search by name"
-                width="40vw"
-                maxLength={512}
-                onChange={(value) => {
-                  setSearchTerm(value);
-                }}
-                value={searchTerm}
-              />
-              <Button content="Refresh" onClick={() => act('refresh')} />
-            </>
+            <Stack align="center">
+              <Stack.Item>
+                <SearchBar
+                  autoFocus
+                  placeholder="Search by name"
+                  query={searchTerm}
+                  onSearch={(value) => {
+                    setSearchTerm(value);
+                  }}
+                  style={{ width: '18rem' }}
+                />
+              </Stack.Item>
+              <Stack.Item>
+                <Button content="Refresh" onClick={() => act('refresh')} />
+              </Stack.Item>
+            </Stack>
           }
         >
           {data.categories.sort().map((category) => (
diff --git a/tgui/packages/tgui/interfaces/FusionCodex.tsx b/tgui/packages/tgui/interfaces/FusionCodex.tsx
index 5f944c83dce..6f04ce79424 100644
--- a/tgui/packages/tgui/interfaces/FusionCodex.tsx
+++ b/tgui/packages/tgui/interfaces/FusionCodex.tsx
@@ -1,6 +1,7 @@
-import { Box, Flex, Input, LabeledList, Section } from 'tgui-core/components';
+import { Box, Flex, LabeledList, Section } from 'tgui-core/components';
 import { useBackend, useLocalState } from '../backend';
 import { NtosWindow } from '../layouts';
+import { SearchBar } from './common/SearchBar';
 
 export type CodexData = {
   reactions: Reaction[];
@@ -38,16 +39,14 @@ export const FusionCodex = (props) => {
           title="Codex Search"
           fitted
           buttons={
-            <Input
+            <SearchBar
               autoFocus
-              autoSelect
               placeholder="Search by name"
-              width="40vw"
-              maxLength={512}
-              onChange={(value) => {
+              query={searchTerm}
+              onSearch={(value) => {
                 setSearchTerm(value);
               }}
-              value={searchTerm}
+              style={{ width: '40vw' }}
             />
           }
         >
diff --git a/tgui/packages/tgui/interfaces/GhostSpawner.tsx b/tgui/packages/tgui/interfaces/GhostSpawner.tsx
index 0fa86f40a25..f83a62b3047 100644
--- a/tgui/packages/tgui/interfaces/GhostSpawner.tsx
+++ b/tgui/packages/tgui/interfaces/GhostSpawner.tsx
@@ -2,7 +2,6 @@ import { chunk } from 'es-toolkit';
 import {
   Box,
   Button,
-  Input,
   Section,
   Table,
   Tabs,
@@ -11,6 +10,7 @@ import {
 import type { BooleanLike } from 'tgui-core/react';
 import { useBackend, useLocalState } from '../backend';
 import { Window } from '../layouts';
+import { SearchBar } from './common/SearchBar';
 
 export type SpawnerData = {
   spawners: Spawner[];
@@ -113,16 +113,14 @@ export const GhostSpawner = (props) => {
         <Section
           title="Spawners"
           buttons={
-            <Input
+            <SearchBar
               autoFocus
-              autoSelect
               placeholder="Search by name"
-              width="40vw"
-              maxLength={512}
-              onChange={(value) => {
+              query={searchTerm}
+              onSearch={(value) => {
                 setSearchTerm(value);
               }}
-              value={searchTerm}
+              style={{ width: '40vw' }}
             />
           }
         >
diff --git a/tgui/packages/tgui/interfaces/Holopad.tsx b/tgui/packages/tgui/interfaces/Holopad.tsx
index b7fd015e19b..f7c73b4dbb3 100644
--- a/tgui/packages/tgui/interfaces/Holopad.tsx
+++ b/tgui/packages/tgui/interfaces/Holopad.tsx
@@ -1,7 +1,8 @@
-import { Button, Input, Section } from 'tgui-core/components';
+import { Button, Section, Stack } from 'tgui-core/components';
 import type { BooleanLike } from 'tgui-core/react';
 import { useBackend, useLocalState } from '../backend';
 import { Window } from '../layouts';
+import { SearchBar } from './common/SearchBar';
 
 export type HolopadData = {
   holopad_list: Pad[];
@@ -27,35 +28,39 @@ export const Holopad = (props) => {
         <Section
           title="Selection Disc"
           buttons={
-            <>
-              <Button
-                content="Summon AI"
-                icon="chevron-circle-down"
-                onClick={() => act('call_ai')}
-              />
-              {data.command_auth ? (
+            <Stack align="center">
+              <Stack.Item>
                 <Button
-                  content="Force Call"
-                  tooltip="This is only available due to your command authorisation."
-                  selected={data.forcing_call}
-                  icon="microphone"
-                  onClick={() => act('toggle_command')}
+                  content="Summon AI"
+                  icon="chevron-circle-down"
+                  onClick={() => act('call_ai')}
                 />
+              </Stack.Item>
+              {data.command_auth ? (
+                <Stack.Item>
+                  <Button
+                    content="Force Call"
+                    tooltip="This is only available due to your command authorisation."
+                    selected={data.forcing_call}
+                    icon="microphone"
+                    onClick={() => act('toggle_command')}
+                  />
+                </Stack.Item>
               ) : (
                 ''
               )}
-              <Input
-                autoFocus
-                autoSelect
-                placeholder="Search by holopad name"
-                width="40vw"
-                maxLength={512}
-                onChange={(value) => {
-                  setSearchTerm(value);
-                }}
-                value={searchTerm}
-              />
-            </>
+              <Stack.Item>
+                <SearchBar
+                  autoFocus
+                  placeholder="Search by holopad name"
+                  query={searchTerm}
+                  onSearch={(value) => {
+                    setSearchTerm(value);
+                  }}
+                  style={{ width: '18rem' }}
+                />
+              </Stack.Item>
+            </Stack>
           }
         >
           {data.holopad_list.length ? (
diff --git a/tgui/packages/tgui/interfaces/IPCDiagnostics.tsx b/tgui/packages/tgui/interfaces/IPCDiagnostics.tsx
index a09edcb0143..043f38a82d1 100644
--- a/tgui/packages/tgui/interfaces/IPCDiagnostics.tsx
+++ b/tgui/packages/tgui/interfaces/IPCDiagnostics.tsx
@@ -133,7 +133,7 @@ export const OrganDisplay = (props) => {
   return (
     <Section title={`${data.patient_name}: Internal Components`}>
       {data.organs.map((organ) => (
-        <Collapsible className={organ.name} key={organ.name}>
+        <Collapsible title={organ.name} key={organ.name}>
           <Box italic>{organ.desc}</Box>
           <Divider />
           <Box>
diff --git a/tgui/packages/tgui/interfaces/LibraryComputer.tsx b/tgui/packages/tgui/interfaces/LibraryComputer.tsx
index 9d6de80150d..4145548d807 100644
--- a/tgui/packages/tgui/interfaces/LibraryComputer.tsx
+++ b/tgui/packages/tgui/interfaces/LibraryComputer.tsx
@@ -14,6 +14,7 @@ import {
 import type { BooleanLike } from 'tgui-core/react';
 import { useBackend, useLocalState } from '../backend';
 import { Window } from '../layouts';
+import { SearchBar } from './common/SearchBar';
 
 export type LibraryComputerData = {
   is_public: BooleanLike;
@@ -462,11 +463,10 @@ const ArchiveTab = (props) => {
     >
       <Stack mb={1}>
         <Stack.Item grow>
-          <Input
-            fluid
-            value={searchInput}
+          <SearchBar
+            query={searchInput}
             placeholder="Search by title, author, or category..."
-            onChange={(v) => setSearchInput(v)}
+            onSearch={(v) => setSearchInput(v)}
             onEnter={(v) => commitSearch(v)}
           />
         </Stack.Item>
diff --git a/tgui/packages/tgui/interfaces/ListInputWindow/ListInputModal.tsx b/tgui/packages/tgui/interfaces/ListInputWindow/ListInputModal.tsx
index 7a0a7ba20c2..0c8aa8dfbb5 100644
--- a/tgui/packages/tgui/interfaces/ListInputWindow/ListInputModal.tsx
+++ b/tgui/packages/tgui/interfaces/ListInputWindow/ListInputModal.tsx
@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { Autofocus, Button, Input, Section, Stack } from 'tgui-core/components';
+import { Autofocus, Button, Section, Stack } from 'tgui-core/components';
 import {
   KEY_A,
   KEY_DOWN,
@@ -10,6 +10,7 @@ import {
 } from 'tgui-core/keycodes';
 
 import { InputButtons } from '../common/InputButtons';
+import { SearchBar } from '../common/SearchBar';
 
 type ListInputModalProps = {
   items: string[];
@@ -147,14 +148,12 @@ export const ListInputModal = (props: ListInputModalProps) => {
           />
         </Stack.Item>
         {searchBarVisible && (
-          <Input
+          <SearchBar
             autoFocus
-            autoSelect
-            fluid
             onEnter={() => on_selected(filteredItems[selected])}
-            onChange={onSearch}
+            onSearch={onSearch}
             placeholder="Search..."
-            value={searchQuery}
+            query={searchQuery}
           />
         )}
         <Stack.Item>
diff --git a/tgui/packages/tgui/interfaces/PlayerPanel.tsx b/tgui/packages/tgui/interfaces/PlayerPanel.tsx
index fc7e1ce06db..3ad5e6cc00c 100644
--- a/tgui/packages/tgui/interfaces/PlayerPanel.tsx
+++ b/tgui/packages/tgui/interfaces/PlayerPanel.tsx
@@ -1,7 +1,8 @@
-import { Box, Button, Input, Section, Table } from 'tgui-core/components';
+import { Box, Button, Section, Table } from 'tgui-core/components';
 import type { BooleanLike } from 'tgui-core/react';
 import { useBackend, useLocalState } from '../backend';
 import { Window } from '../layouts';
+import { SearchBar } from './common/SearchBar';
 
 export type PanelData = {
   holder_ref: string;
@@ -33,16 +34,14 @@ export const PlayerPanel = (props) => {
         <Section
           title="Players"
           buttons={
-            <Input
+            <SearchBar
               autoFocus
-              autoSelect
               placeholder="Search by ckey, name, or assignment"
-              width="40vw"
-              maxLength={512}
-              onChange={(value) => {
+              query={searchTerm}
+              onSearch={(value) => {
                 setSearchTerm(value);
               }}
-              value={searchTerm}
+              style={{ width: '40vw' }}
             />
           }
         >
diff --git a/tgui/packages/tgui/interfaces/PsionicShop.tsx b/tgui/packages/tgui/interfaces/PsionicShop.tsx
index 21675c6def6..17858d3b9c3 100644
--- a/tgui/packages/tgui/interfaces/PsionicShop.tsx
+++ b/tgui/packages/tgui/interfaces/PsionicShop.tsx
@@ -2,12 +2,12 @@ import {
   BlockQuote,
   Box,
   Button,
-  Input,
   NoticeBox,
   Section,
 } from 'tgui-core/components';
 import { useBackend, useLocalState } from '../backend';
 import { Window } from '../layouts';
+import { SearchBar } from './common/SearchBar';
 
 export type PsiData = {
   psi_rank: string;
@@ -35,16 +35,14 @@ export const PsionicShop = (props) => {
         <Section
           title="Psionic Point Shop"
           buttons={
-            <Input
+            <SearchBar
               autoFocus
-              autoSelect
               placeholder="Search by name"
-              width="40vw"
-              maxLength={512}
-              onChange={(value) => {
+              query={searchTerm}
+              onSearch={(value) => {
                 setSearchTerm(value);
               }}
-              value={searchTerm}
+              style={{ width: '40vw' }}
             />
           }
         >
diff --git a/tgui/packages/tgui/interfaces/QuikPay.tsx b/tgui/packages/tgui/interfaces/QuikPay.tsx
index 761d0cb91ac..0f6bd062e2d 100644
--- a/tgui/packages/tgui/interfaces/QuikPay.tsx
+++ b/tgui/packages/tgui/interfaces/QuikPay.tsx
@@ -11,6 +11,7 @@ import {
 import type { BooleanLike } from 'tgui-core/react';
 import { useBackend, useLocalState } from '../backend';
 import { Window } from '../layouts';
+import { SearchBar } from './common/SearchBar';
 
 export type PayData = {
   items: Item[];
@@ -112,15 +113,13 @@ export const ItemWindow = (props) => {
     <Section
       title="Items"
       buttons={
-        <Input
+        <SearchBar
           autoFocus
-          autoSelect
           placeholder="Search categories or items"
-          maxLength={512}
-          onChange={(value) => {
+          query={searchTerm}
+          onSearch={(value) => {
             setSearchTerm(value);
           }}
-          value={searchTerm}
         />
       }
     >
diff --git a/tgui/packages/tgui/interfaces/RCON.tsx b/tgui/packages/tgui/interfaces/RCON.tsx
index 14de03a3cfa..1cccb5585b6 100644
--- a/tgui/packages/tgui/interfaces/RCON.tsx
+++ b/tgui/packages/tgui/interfaces/RCON.tsx
@@ -2,7 +2,6 @@ import {
   Box,
   Button,
   Collapsible,
-  Input,
   LabeledList,
   NoticeBox,
   NumberInput,
@@ -12,6 +11,7 @@ import {
 import type { BooleanLike } from 'tgui-core/react';
 import { useBackend, useLocalState } from '../backend';
 import { NtosWindow } from '../layouts';
+import { SearchBar } from './common/SearchBar';
 
 export type RCONData = {
   smes_info: SMES[];
@@ -69,14 +69,13 @@ export const SMESInfo = (props) => {
       <Section
         title="SMES Control"
         buttons={
-          <Input
+          <SearchBar
             placeholder="Search by SMES name"
-            width="40vw"
-            maxLength={512}
-            onChange={(value) => {
+            query={smesSearchTerm}
+            onSearch={(value) => {
               setSmesSearchTerm(value);
             }}
-            value={smesSearchTerm}
+            style={{ width: '40vw' }}
           />
         }
       >
@@ -216,14 +215,13 @@ export const BreakerInfo = (props) => {
       <Section
         title="Breaker Control"
         buttons={
-          <Input
+          <SearchBar
             placeholder="Search by breaker name"
-            width="40vw"
-            maxLength={512}
-            onChange={(value) => {
+            query={breakerSearchTerm}
+            onSearch={(value) => {
               setBreakerSearchTerm(value);
             }}
-            value={breakerSearchTerm}
+            style={{ width: '40vw' }}
           />
         }
       >
diff --git a/tgui/packages/tgui/interfaces/Records.tsx b/tgui/packages/tgui/interfaces/Records.tsx
index 0e3653e23fd..03d1acaa58d 100644
--- a/tgui/packages/tgui/interfaces/Records.tsx
+++ b/tgui/packages/tgui/interfaces/Records.tsx
@@ -16,6 +16,7 @@ import type { BooleanLike } from 'tgui-core/react';
 import { capitalize } from 'tgui-core/string';
 import { useBackend, useLocalState } from '../backend';
 import { NtosWindow } from '../layouts';
+import { SearchBar } from './common/SearchBar';
 
 export type RecordsData = {
   activeview: string;
@@ -140,23 +141,28 @@ export const ListAllRecords = (props) => {
       title="Records"
       fill
       buttons={
-        <Tooltip content="Search by name or DNA.">
-          <Input
-            autoFocus
-            autoSelect
-            maxLength={512}
-            onChange={(value) => {
-              setSearchTerm(value);
-            }}
-            value={searchTerm}
-          />
-          <Button
-            icon={data.authenticated ? 'lock' : 'unlock'}
-            tooltip="Log Out"
-            color={data.authenticated ? 'red' : 'green'}
-            onClick={() => act(data.authenticated ? 'logout' : 'login')}
-          />
-        </Tooltip>
+        <Stack align="center">
+          <Stack.Item>
+            <Tooltip content="Search by name or DNA.">
+              <SearchBar
+                autoFocus
+                query={searchTerm}
+                onSearch={(value) => {
+                  setSearchTerm(value);
+                }}
+                style={{ width: '12rem' }}
+              />
+            </Tooltip>
+          </Stack.Item>
+          <Stack.Item>
+            <Button
+              icon={data.authenticated ? 'lock' : 'unlock'}
+              tooltip="Log Out"
+              color={data.authenticated ? 'red' : 'green'}
+              onClick={() => act(data.authenticated ? 'logout' : 'login')}
+            />
+          </Stack.Item>
+        </Stack>
       }
     >
       <Tabs vertical>
diff --git a/tgui/packages/tgui/interfaces/SmartFridge.tsx b/tgui/packages/tgui/interfaces/SmartFridge.tsx
index 9bc257fe620..1f02a5b2acb 100644
--- a/tgui/packages/tgui/interfaces/SmartFridge.tsx
+++ b/tgui/packages/tgui/interfaces/SmartFridge.tsx
@@ -3,12 +3,12 @@ import {
   Box,
   Button,
   Image,
-  Input,
   Section,
 } from 'tgui-core/components';
 import type { BooleanLike } from 'tgui-core/react';
 import { useBackend, useLocalState } from '../backend';
 import { Window } from '../layouts';
+import { SearchBar } from './common/SearchBar';
 
 export type FridgeData = {
   contents: Item[];
@@ -36,21 +36,14 @@ export const SmartFridge = (props) => {
         <Section
           title="Storage"
           buttons={
-            <Section>
-              <Input
-                selfClear
-                placeholder="Search..."
-                onChange={(value) => {
-                  setSearchTerm(value);
-                }}
-                value={searchTerm}
-              />
-              <Button
-                content="Sort"
-                selected={data.sort_alphabetically}
-                onClick={() => act('switch_sort_alphabetically')}
-              />
-            </Section>
+            <SearchBar
+              placeholder="Search..."
+              query={searchTerm}
+              onSearch={(value) => {
+                setSearchTerm(value);
+              }}
+              style={{ width: '16rem' }}
+            />
           }
         >
           {data.secure ? (
diff --git a/tgui/packages/tgui/interfaces/Uplink.tsx b/tgui/packages/tgui/interfaces/Uplink.tsx
index 5f8ec38276f..1fca0e1d279 100644
--- a/tgui/packages/tgui/interfaces/Uplink.tsx
+++ b/tgui/packages/tgui/interfaces/Uplink.tsx
@@ -1,7 +1,6 @@
 import {
   Box,
   Button,
-  Input,
   LabeledList,
   Section,
   Table,
@@ -9,6 +8,7 @@ import {
 import type { BooleanLike } from 'tgui-core/react';
 import { useBackend, useLocalState } from '../backend';
 import { Window } from '../layouts';
+import { SearchBar } from './common/SearchBar';
 
 export type UplinkData = {
   menu: number;
@@ -139,10 +139,10 @@ const ItemCategoriesSection = (act: any, data: UplinkData) => {
 const ItemSearch = () => {
   const [searchTerm, setSearchTerm] = useLocalState<string>(`searchTerm`, ``);
   return (
-    <Input
-      value={searchTerm}
+    <SearchBar
+      query={searchTerm}
       placeholder="Search"
-      onChange={(value) => {
+      onSearch={(value) => {
         setSearchTerm(value);
       }}
     />
diff --git a/tgui/packages/tgui/interfaces/Vending.tsx b/tgui/packages/tgui/interfaces/Vending.tsx
index cfb695b0dfd..f22a70a25f2 100644
--- a/tgui/packages/tgui/interfaces/Vending.tsx
+++ b/tgui/packages/tgui/interfaces/Vending.tsx
@@ -2,15 +2,16 @@ import {
   Box,
   Button,
   Flex,
-  Input,
   LabeledList,
   NoticeBox,
   Section,
+  Stack,
 } from 'tgui-core/components';
 import type { BooleanLike } from 'tgui-core/react';
 import { capitalizeAll } from 'tgui-core/string';
 import { useBackend, useLocalState } from '../backend';
 import { Window } from '../layouts';
+import { SearchBar } from './common/SearchBar';
 
 export type VendingData = {
   vending_item: BooleanLike;
@@ -69,28 +70,30 @@ export const ShowAllItems = (props) => {
       <Section
         title="Selection"
         buttons={
-          <>
-            <Input
-              autoFocus
-              autoSelect
-              placeholder="Search by name"
-              width="40vw"
-              maxLength={512}
-              onChange={(value) => {
-                setSearchTerm(value);
-              }}
-              value={searchTerm}
-            />
-            {data.coin ? (
-              <Button
-                icon="coins"
-                onClick={() => act('remove_coin')}
-                tooltip={capitalizeAll(data.coin)}
+          <Stack align="center">
+            <Stack.Item>
+              <SearchBar
+                autoFocus
+                placeholder="Search by name"
+                query={searchTerm}
+                onSearch={(value) => {
+                  setSearchTerm(value);
+                }}
+                style={{ width: '12rem' }}
               />
+            </Stack.Item>
+            {data.coin ? (
+              <Stack.Item>
+                <Button
+                  icon="coins"
+                  onClick={() => act('remove_coin')}
+                  tooltip={capitalizeAll(data.coin)}
+                />
+              </Stack.Item>
             ) : (
               ''
             )}
-          </>
+          </Stack>
         }
       />
       <Section fill>
diff --git a/tgui/packages/tgui/interfaces/common/ManifestSection.tsx b/tgui/packages/tgui/interfaces/common/ManifestSection.tsx
index f04e46bf042..56f8e04e5e9 100644
--- a/tgui/packages/tgui/interfaces/common/ManifestSection.tsx
+++ b/tgui/packages/tgui/interfaces/common/ManifestSection.tsx
@@ -4,8 +4,9 @@ import { useBackend } from '../../backend';
 import { departmentClass, departmentStyle } from './departmentClass';
 
 type ManifestData = {
-  manifest: { department: Crew[] };
+  manifest: Record<string, Crew[]>;
   allow_follow: BooleanLike;
+  show_ooc_roles: BooleanLike;
 };
 
 type Crew = {
@@ -13,17 +14,24 @@ type Crew = {
   rank: string;
   active: string;
   head: BooleanLike;
+  ooc_role: BooleanLike;
 };
 
 export const ManifestSection = (props) => {
   const { act, data } = useBackend<ManifestData>();
   const manifest = data.manifest || {};
   const allow_follow = data.allow_follow;
+  const show_ooc_roles = data.show_ooc_roles;
+  const manifestEntries = Object.entries(manifest)
+    .map(([dept, crew]) => [
+      dept,
+      show_ooc_roles ? crew : crew.filter((crewmate) => !crewmate.ooc_role),
+    ] as const)
+    .filter(([, crew]) => crew.length > 0);
   return (
     <Section>
-      {Object.keys(manifest).length === 0 && 'There are no crew active.'}
-      {Object.keys(manifest).map((dept) => {
-        const deptCrew = manifest[dept];
+      {manifestEntries.length === 0 && 'There are no crew active.'}
+      {manifestEntries.map(([dept, deptCrew]) => {
         return (
           <Section
             key={dept}
@@ -38,7 +46,7 @@ export const ManifestSection = (props) => {
                 return (
                   <Table.Row
                     key={crewmate.name}
-                    bold={crewmate.head}
+                    bold={Boolean(crewmate.head)}
                     overflow="hidden"
                   >
                     <Table.Cell width="50%" textAlign="center" pt="10px" nowrap>
diff --git a/tgui/packages/tgui/interfaces/common/SearchBar.tsx b/tgui/packages/tgui/interfaces/common/SearchBar.tsx
index da82813ada6..02a354f5cf4 100644
--- a/tgui/packages/tgui/interfaces/common/SearchBar.tsx
+++ b/tgui/packages/tgui/interfaces/common/SearchBar.tsx
@@ -17,6 +17,8 @@ type OptionalProps = Partial<{
   noIcon: boolean;
   /** The placeholder text. */
   placeholder: string;
+  /** The function to call when the user presses Enter. */
+  onEnter: (query: string) => void;
   /** Override styles of the search bar. */
   style: CSSProperties;
 }>;
@@ -33,6 +35,7 @@ export function SearchBar(props: Props) {
     expensive,
     noIcon = false,
     onSearch,
+    onEnter,
     placeholder = 'Search...',
     query = '',
     style,
@@ -49,6 +52,7 @@ export function SearchBar(props: Props) {
           expensive={expensive}
           fluid
           onChange={onSearch}
+          onEnter={onEnter}
           placeholder={placeholder}
           value={query}
         />
diff --git a/tgui/packages/tgui/layouts/NtosWindow.tsx b/tgui/packages/tgui/layouts/NtosWindow.tsx
index 338af51370c..449cc6521ab 100644
--- a/tgui/packages/tgui/layouts/NtosWindow.tsx
+++ b/tgui/packages/tgui/layouts/NtosWindow.tsx
@@ -24,6 +24,8 @@ export type NTOSData = {
   PC_batteryicon: string | null;
   PC_batterypercent: string | null;
   PC_device_theme: string;
+  PC_cableout: BooleanLike;
+  PC_hascable: BooleanLike;
   PC_haslight: BooleanLike;
   PC_lighton: BooleanLike;
   PC_lowpower_mode: BooleanLike;
@@ -60,6 +62,8 @@ export const NtosWindow = (props) => {
     PC_device_theme,
     PC_batteryicon,
     PC_batterypercent,
+    PC_cableout,
+    PC_hascable,
     PC_haslight,
     PC_lighton,
     PC_ntneticon,
@@ -132,6 +136,15 @@ export const NtosWindow = (props) => {
                 onClick={() => act('PC_togglelight')}
               />
             )}
+            {!!PC_hascable && (
+              <Button
+                color={PC_cableout ? 'green' : 'transparent'}
+                icon="plug"
+                tooltip={PC_cableout ? 'Retract cable' : 'Retrieve cable'}
+                tooltipPosition="bottom"
+                onClick={() => act('PC_takecable')}
+              />
+            )}
             {!!PC_showexitprogram && (
               <Button
                 color="transparent"
diff --git a/tgui/packages/tgui/styles/interfaces/Radio.scss b/tgui/packages/tgui/styles/interfaces/Radio.scss
index 8d2a1370936..9cea3e0b82d 100644
--- a/tgui/packages/tgui/styles/interfaces/Radio.scss
+++ b/tgui/packages/tgui/styles/interfaces/Radio.scss
@@ -42,7 +42,7 @@
 .sciradio {
   color: #c03bc0;
 }
-.supradio {
+.opsradio {
   color: #c09141;
 }
 .srvradio {