selectDevice(id, additive)}
selectedLinkId={selectedLinkId}
onSelectLink={(id) => { setSelectedLinkId(id); if (id) setSelectedIds([]); }}
onMarqueeSelect={(ids, additive) => {
setSelectedLinkId(null);
setSelectedIds((current) => additive ? [...new Set([...current, ...ids])] : ids);
}}
onMoveStart={() => {
dragStartSnapRef.current = latestTopologyRef.current;
suppressHistoryRef.current = true;
}}
onMoveEnd={(moved) => {
const start = dragStartSnapRef.current;
suppressHistoryRef.current = false;
dragStartSnapRef.current = null;
if (!moved || !start) {
prevSnap.current = latestTopologyRef.current;
return;
}
const h = undoRef.current[activeWid] || (undoRef.current[activeWid] = { past: [], future: [] });
h.past.push(start);
if (h.past.length > 80) h.past.shift();
h.future = [];
prevSnap.current = latestTopologyRef.current;
setHistoryVersion((n) => n + 1);
}}
onMoveDevices={(idDeltas) => {
if (!markProjectChanged("move-devices")) return;
setDevices((m) => {
const next = { ...m };
for (const { id, x, y } of idDeltas) {
if (next[id]) next[id] = { ...next[id], x, y };
}
return next;
});
}}
onAddDevice={addDevice}
onDeleteLink={onDeleteLink}
linkMode={linkMode}
setLinkMode={setLinkMode}
forceLinkType={forceLinkType || "auto"}
packetMode={packetMode}
setPacketMode={setPacketMode}
onLinkRequest={onLinkRequest}
onPacketRequest={(srcId, dstId) => {
const dst = devices[dstId];
const target = Object.values(dst?.interfaces || {}).find(i => i.ip)?.ip;
if (!target) {
const msg = `${dst?.hostname || "destination"} has no IP address. Configure an interface IP before sending a packet.`;
setToast({ kind: "err", msg });
return log("err", "packet", msg);
}
handlePing(srcId, target);
}}
simRunning={simRunning}
packets={packets}
activeHopDeviceId={activeHopDeviceId}
viewState={topologyViewState}
onViewStateChange={setTopologyViewState}
starterScreenVisible={starterScreenVisible}
onCreateProject={createEmptyProjectFromStarterScreen}
onCreateStarter={newStarterTab}
onImportPacketTracer={openPacketTracerFilePicker}
onOpenConsole={openDeviceModule}
onContextMenu={(e, d) => setCtx({ x: e.clientX, y: e.clientY, devId: d.id })}
onLinkContextMenu={(e, l) => setCtx({ x: e.clientX, y: e.clientY, linkId: l.id })}
/>
)}
{!bottomCollapsed && (
beginResize("bottom", event)}
/>
)}
{openConsoles.map((id) => {
const dev = devices[id];
if (!dev) return null;
const isActive = activeBottom === id;
return (
setActiveBottom(id)}>
{Icon.terminal()}
{dev.hostname}
{ e.stopPropagation(); closeConsole(id); }} title="Close session">×
);
})}
{openConsoles.length > 0 &&
}
{[
["events", "Events", events.length || null],
["packets", "Packets", null],
].map(([k, lbl, badge]) => (
setActiveBottom(k)}>
{lbl}
{badge != null && e.s === "err") ? "alert" : ""}`}>{badge}}
))}
{activeBottom === "events" && !bottomCollapsed && (
{["all", "err", "warn", "ok"].map((kind) => (
))}
)}
{!bottomCollapsed &&
{openConsoles.map((id) => (
onApplyToDevice(id, cmd)}
onPing={handlePing}
pendingCmd={pendingCmd && pendingCmd.devId === id ? pendingCmd : null}
active={activeBottom === id}
focusNonce={cliFocusNonce}
scrollState={terminalScrolls[id]}
onScrollStateChange={(devId, state) => setTerminalScrolls((m) => ({ ...m, [devId]: state }))}
historyState={cliHistory[id] || {}}
onHistoryChange={(history) => setCliHistory((m) => ({ ...(m && !Array.isArray(m) ? m : {}), [id]: history }))}
ghostSuggestions={cliGhostSuggestions}
/>
))}
{openConsoles.length === 0 && activeBottom !== "events" && activeBottom !== "packets" && (
No consoles open
Right-click a device on the canvas → Open Console
)}
e.s === eventFilter)} />
}
beginResize("apps", event)}
/>
openEndpointApp(selected.id, appKey)}
onClose={() => setAppsSidebarOpen(false)}
/>
)}
{serverModuleOpen && selected?.kind === "server" && (
<>
beginResize("server", event)}
/>
updateServerDevice(selected.id, mutator, message)}
onClose={() => setServerModuleOpen(false)}
/>
)}
{/* (status bar removed) */}
{fileDropActive && (
Drop lab file
OpenPT JSON/OPT/OTP and Packet Tracer PKA/PKT files open in a new tab.
)}
{lastImportReport && (lastImportReport.unsupported || lastImportReport.reverseReport?.decoder?.error || lastImportReport.diagnostics?.decoder?.error) && (
reportImportError(lastImportReport)}
onClose={() => setLastImportReport(null)}
/>
)}
{toast && (
{toast.msg}
)}
{authOpen && (
setAuthOpen(false)}
onSignedIn={(user) => {
setCloudUser(user);
setAuthOpen(false);
setSyncStatus({ state: "local", message: "Signed in" });
}}
/>
)}
{projectsOpen && (
setProjectsOpen(false)}
onOpen={openCloudProject}
onCreate={createSyncedProject}
onRefresh={refreshProjects}
onLogout={logoutCloud}
onRollback={restoreRollback}
canRollback={!!cloudProjectId && !shareToken}
/>
)}
{shareOpen && (
setShareOpen(false)}
onShare={createShareLink}
shareUrl={lastShareUrl}
/>
)}
{conflict && (
setConflict(null)}
onLoadServer={async () => {
if (cloudProjectId) await openCloudProject(cloudProjectId);
setConflict(null);
}}
onDuplicate={() => {
const id = `w-${Date.now()}`;
snapshotsRef.current[id] = { devices, links, selectedIds, openConsoles, activeBottom, ptActivity, ptSidebarOpen };
setTabs((ts) => [...ts, { id, name: `${currentProjectTitle}-local-copy.opt` }]);
setActiveWid(id);
setCloudProjectId(null);
setCloudLease(null);
setCloudBaseDoc(null);
setConflict(null);
setSyncStatus({ state: "local", message: "Local duplicate" });
}}
onTakeOver={() => {
acquireCurrentLease(true);
setConflict(null);
}}
/>
)}
{pingDialog && (
setPingDialog(null)}
onSubmit={(target) => submitPingTarget(pingDialog.devId, target)}
/>
)}
{confirmDialog && (
resolveConfirm(false)}
onConfirm={() => resolveConfirm(true)}
/>
)}
v.a)}
onChange={(v) => {
const key = Object.entries(ACCENTS).find(([k, val]) => val.a === v)?.[0] || "cyan";
setTweak("accent", key);
}} />
setTweak("showGrid", v)} />
setTweak("packetSpeed", v)} unit="×" />
{
const pc1 = Object.values(devices).find(d => d.hostname === "PC1");
if (pc1) handlePing(pc1.id, "192.168.20.20");
}} />
{
const pc1 = Object.values(devices).find(d => d.hostname === "PC1");
if (pc1) handlePing(pc1.id, "8.8.8.8");
}} />
{
const r1 = Object.values(devices).find(d => d.hostname === "R1");
if (!r1) return;
if (!markProjectChanged("fault")) return;
const iface = r1.interfaces["GigabitEthernet0/0/1"] ? "GigabitEthernet0/0/1" : "G0/1";
setDevices((m) => ({ ...m, [r1.id]: { ...m[r1.id], interfaces: { ...m[r1.id].interfaces, [iface]: { ...m[r1.id].interfaces[iface], admUp: false, up: false } } } }));
setLinks((ls) => ls.map(l => (l.a === r1.id && l.ai === iface) || (l.b === r1.id && l.bi === iface) ? { ...l, up: false } : l));
log("warn", "R1", `${ifaceName(iface)} administratively shut down`);
}} />
{ctx && (
ctx.linkId ? (
l.id === ctx.linkId)}
devices={devices}
onClose={() => setCtx(null)}
onDelete={() => {
onDeleteLink(ctx.linkId);
setSelectedLinkId(null);
setCtx(null);
}}
/>
) : (
setCtx(null)}
onAction={(action) => {
const id = ctx.devId;
const d = devices[id];
if (!d) return setCtx(null);
switch (action) {
case "server-module":
openServerModule(id); break;
case "apps":
openEndpointApp(id, "ip");
break;
case "console":
openConsole(id); break;
case "show-int":
runConsoleCmd(id, "show interfaces"); break;
case "show-route":
runConsoleCmd(id, "show ip route"); break;
case "show-vlan":
runConsoleCmd(id, "show vlan brief"); break;
case "show-mac":
runConsoleCmd(id, "show mac address-table"); break;
case "show-run":
runConsoleCmd(id, "show running-config"); break;
case "power":
togglePower(id); break;
case "restart":
// power off then on
if (d.powered) togglePower(id);
setTimeout(() => {
setDevices((m) => m[id]?.powered ? m : { ...m, [id]: { ...m[id], powered: true,
interfaces: Object.fromEntries(Object.entries(m[id].interfaces).map(([k,v])=>[k,{...v, up: hasLink(id, k, links)}])) } });
log("ok", d.hostname, "device restarted");
}, 600);
log("warn", d.hostname, "restarting…");
break;
case "delete":
deleteDevice(id); break;
case "ping":
setPingDialog({ devId: id, target: recentPingTargets[0] || "192.168.20.20" });
break;
case "duplicate": {
if (!markProjectChanged("duplicate")) break;
const newD = { ...d, id: OPT_Engine.uid("d"), x: d.x + 60, y: d.y + 40, hostname: d.hostname + "-copy" };
setDevices((m) => ({ ...m, [newD.id]: newD }));
log("ok", "topology", `duplicated ${d.hostname}`);
break;
}
}
setCtx(null);
}}
/>
)
)}
{Object.keys(menus).map((name) => (
toggle(name)}
onMouseEnter={() => { if (open) setOpen(name); }}
>
{name}
{open === name && (
menus[name].kind === "devices" ? (
{deviceGroups.map((group) => (
{group.title}
{group.devices.map((d) => (
{
props.onAddDeviceFromMenu && props.onAddDeviceFromMenu(d.id || d.kind);
close();
}}
onDragStart={(e) => {
e.dataTransfer.effectAllowed = "copy";
e.dataTransfer.setData("text/x-openpt-device", d.id || d.kind);
// close menu shortly after drag start so the drop target receives
setTimeout(close, 80);
}}
style={{
display: "flex", flexDirection: "column", alignItems: "center",
gap: 4, padding: "10px 4px 6px",
background: "var(--bg-2)", border: "1px solid transparent",
borderRadius: 7, cursor: "copy",
}}
onMouseEnter={(e) => { e.currentTarget.style.borderColor = "var(--line)"; }}
onMouseLeave={(e) => { e.currentTarget.style.borderColor = "transparent"; }}
>
{React.createElement(Glyph[d.kind] || Glyph.router, { size: 28 })}
{d.short}
))}
))}
Cables
{ props.onEnterLinkMode("auto"); close(); }}>
Auto cable
L
{ props.onEnterLinkMode("copper"); close(); }}>
Copper straight-through
{ props.onEnterLinkMode("cross"); close(); }}>
Copper crossover
{ props.onEnterLinkMode("serial"); close(); }}>
Serial DCE
{ props.onEnterLinkMode("fiber"); close(); }}>
Fiber
{ props.onEnterLinkMode("console"); close(); }}>
Console
) : (
{menus[name].map((it, i) => {
if (it.sep) return
;
if (it.sect) return
{it.sect}
;
return (
{ if (!it.disabled && it.on) { it.on(); close(); } }}
>
{it.label}
{it.kbd && {it.kbd}}
);
})}
)
)}
))}
{cloudUser?.email}
{syncStatus.message}
{!projects.length &&
No synced projects yet.
}
{projects.map((p) => (
))}
{canRollback && (
<>
{["1m", "5m", "10m", "30m", "1h"].map((target) => (
))}
)}
);
}
function ShareDialog({ onClose, onShare, shareUrl }) {
const [pending, setPending] = useState("");
const create = async (mode) => {
if (pending) return;
setPending(mode);
try {
await onShare(mode);
} finally {
setPending("");
}
};
return (
{shareUrl && (
{shareUrl}
)}
);
}
function ConflictDialog({ message, onClose, onLoadServer, onDuplicate, onTakeOver }) {
return (
{message}
);
}
function ConfirmDialog({ title, message, confirmLabel = "Confirm", danger = false, onCancel, onConfirm }) {
return (
{message}
);
}
function PingDialog({ device, initialTarget, recentTargets, onClose, onSubmit }) {
const [target, setTarget] = useState(initialTarget || "");
const valid = target.trim().length > 0;
return (
);
}
function computeDiagnostics(devices, links) {
const items = [];
for (const d of Object.values(devices)) {
if (OPT_Engine.isHostLike?.(d)) {
const hostIface = d.interfaces?.eth0 ? "eth0" : (d.interfaces?.en0 ? "en0" : Object.keys(d.interfaces || {})[0]);
const e = d.interfaces?.[hostIface];
if (!e || !e.ip) items.push({ label: `⚠ ${d.hostname}: no IP on ${hostIface || "host interface"}`, disabled: true });
else if (!e.gw) items.push({ label: `⚠ ${d.hostname}: no default gateway`, disabled: true });
}
if (OPT_Engine.isRouterLike?.(d) && !OPT_Engine.isSwitchLike?.(d) && (!d.routes || d.routes.length === 0)) {
items.push({ label: `⚠ ${d.hostname}: routing table empty`, disabled: true });
}
}
if (!items.length) items.push({ label: "✓ All baseline checks passing", disabled: true });
return items;
}
function downloadJSON(data, filename, type = "application/json") {
const blob = new Blob([JSON.stringify(data, null, 2)], { type });
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url; a.download = filename; a.click();
setTimeout(() => URL.revokeObjectURL(url), 1000);
}
function downloadText(text, filename) {
const blob = new Blob([text], { type: "text/plain" });
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url; a.download = filename; a.click();
setTimeout(() => URL.revokeObjectURL(url), 1000);
}
function generateConfig(d) {
return OPT_Engine.serializeConfig(d);
}
function packetTracerAssessmentText(item) {
return [
item?.name,
item?.path,
item?.rootName,
item?.parentPath,
item?.components,
item?.checkType,
item?.rootCheckType,
item?.eclass,
item?.id,
...(item?.checkTypes || []),
...Object.values(item?.attrs || {}),
].filter(Boolean).join(" ").toLowerCase();
}
function packetTracerIsConnectivityAssessment(item) {
return /\b(connectivity|reachability|reachable|ping|icmp|trace\s*route|traceroute|simple\s+pdu|complex\s+pdu|pdu|successful\s+connection|packet\s+test)\b/i.test(packetTracerAssessmentText(item));
}
const PACKET_TRACER_BUILT_IN_COMPONENTS = new Set([
"acl",
"default gateway",
"defautl gateway",
"ip",
"ip address",
"nat",
"other",
"pc address",
"pc addressing",
"physical",
"router address",
"router addressing",
"routing",
"save config",
"switch address",
"switching",
]);
function packetTracerVisibleAssessmentItems(activity, allItems) {
const scoredItems = (allItems || []).filter((item) => (Number(item.points) || 0) > 0);
if (!scoredItems.length) return [];
const authoredComponents = new Set((activity?.decoded?.visibleAssessmentComponents || []).filter(Boolean));
if (!authoredComponents.size) {
for (const item of scoredItems) {
const component = item.components || "";
if (component && !PACKET_TRACER_BUILT_IN_COMPONENTS.has(component.toLowerCase())) authoredComponents.add(component);
}
}
if (!authoredComponents.size) return scoredItems;
const authoredItems = scoredItems.filter((item) => authoredComponents.has(item.components || ""));
return authoredItems.length ? authoredItems : scoredItems;
}
function packetTracerAssessmentSections(activity) {
const allItems = activity?.assessmentItems || [];
const visibleItems = allItems.length ? packetTracerVisibleAssessmentItems(activity, allItems) : [];
if (!visibleItems.length && activity?.assessmentSections) {
const storedItems = [
...(activity.assessmentSections.assessmentItems || []),
...(activity.assessmentSections.connectivityTests || []),
];
const fallbackItems = packetTracerVisibleAssessmentItems(activity, storedItems);
const connectivityTests = fallbackItems.filter(packetTracerIsConnectivityAssessment);
const connectivitySet = new Set(connectivityTests);
return {
connectivityTests,
assessmentItems: fallbackItems.filter((item) => !connectivitySet.has(item)),
roots: activity.assessmentSections.roots || [],
};
}
const connectivityTests = visibleItems.filter(packetTracerIsConnectivityAssessment);
const connectivitySet = new Set(connectivityTests);
const assessmentItems = visibleItems.filter((item) => !connectivitySet.has(item));
return {
connectivityTests,
assessmentItems,
roots: Object.entries(visibleItems.reduce((acc, item) => {
const key = item.rootName || "Assessment Items";
acc[key] = (acc[key] || 0) + 1;
return acc;
}, {})).map(([name, count]) => ({ name, count })),
};
}
function packetTracerRubricLeafComponent(label, pathParts = []) {
const text = [...pathParts, label].join(" ").toLowerCase();
if (/\blink\b|connection|cable/.test(text)) return "Device Connections";
if (/channel/.test(text)) return "EtherChannel Configuration";
if (/trunk|port mode/.test(text)) return "Trunk Configuration";
if (/gateway|address|mask|ip\b/.test(text)) return "IP Configuration";
return "Assessment Items";
}
function packetTracerRubricLeafPoints(label, pathParts = []) {
const component = packetTracerRubricLeafComponent(label, pathParts);
if (component === "EtherChannel Configuration") return 3;
return 1;
}
function packetTracerItemsFromRubricPattern(pattern) {
if (!pattern || typeof pattern !== "object") return [];
const items = [];
const walk = (value, parts) => {
if (Array.isArray(value)) {
for (const entry of value) {
if (typeof entry === "string") {
const pathParts = [...parts, entry];
items.push({
name: entry,
path: pathParts.join(" / "),
pathParts,
parentPath: parts.join(" / "),
rootName: parts[0] || "Assessment Items",
components: packetTracerRubricLeafComponent(entry, parts),
points: packetTracerRubricLeafPoints(entry, parts),
});
} else {
walk(entry, parts);
}
}
return;
}
if (value && typeof value === "object") {
for (const [key, child] of Object.entries(value)) walk(child, [...parts, key]);
}
};
walk(pattern, []);
return items;
}
function packetTracerGradeSourceItems(activity) {
const imported = packetTracerVisibleAssessmentItems(activity, activity?.assessmentItems || []);
if (imported.length) return imported;
return packetTracerItemsFromRubricPattern(activity?.rubricPattern || []);
}
function packetTracerNormText(value) {
return String(value || "").trim().toLowerCase().replace(/\s+/g, " ");
}
function packetTracerIfaceKey(value) {
return packetTracerNormText(value)
.replace(/\bfastethernet\b/g, "fa")
.replace(/\bgigabitethernet\b/g, "gi")
.replace(/\bserial\b/g, "se")
.replace(/\bport-channel\b/g, "po")
.replace(/\bethernet\b/g, "eth")
.replace(/\s+/g, "");
}
function packetTracerDeviceByName(devices, name) {
const wanted = packetTracerNormText(name);
if (!wanted) return null;
return Object.values(devices || {}).find((device) => {
return [device.hostname, device.name, device.packetTracer?.name].some((candidate) => packetTracerNormText(candidate) === wanted);
}) || null;
}
function packetTracerEscapeRegex(value) {
return String(value || "").replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
}
function packetTracerExtractDeviceFromText(devices, text) {
const source = packetTracerNormText(text);
if (!source) return null;
return Object.values(devices || {}).find((device) => {
return [device.hostname, device.name, device.packetTracer?.name].some((candidate) => {
const name = packetTracerNormText(candidate);
return name && new RegExp(`(^|[^a-z0-9_-])${packetTracerEscapeRegex(name)}([^a-z0-9_-]|$)`, "i").test(source);
});
}) || null;
}
function packetTracerIfaceByName(device, name) {
const wanted = packetTracerIfaceKey(name);
if (!device || !wanted) return null;
return Object.keys(device.interfaces || {}).find((iface) => packetTracerIfaceKey(iface) === wanted || packetTracerIfaceKey(OPT_Engine.shortIfaceName?.(iface) || iface) === wanted) || null;
}
function packetTracerExtractIfaceFromText(device, text) {
if (!device) return null;
const source = String(text || "");
const ifacePattern = /\b(?:FastEthernet|GigabitEthernet|Serial|Ethernet|Port-channel|Fa|Gi|Se|Eth|Po)\s*\d+(?:\/\d+){0,3}\b/gi;
const matches = source.match(ifacePattern) || [];
for (const match of matches) {
const iface = packetTracerIfaceByName(device, match);
if (iface) return iface;
}
return null;
}
function packetTracerItemTarget(item, devices) {
const parts = packetTracerAssessmentPathParts(item);
let device = null;
let iface = null;
for (const part of parts) {
device = packetTracerDeviceByName(devices, part);
if (device) break;
}
if (!device) device = packetTracerExtractDeviceFromText(devices, [item?.path, item?.name, item?.parentPath].filter(Boolean).join(" / "));
if (device) {
for (const part of parts) {
iface = packetTracerIfaceByName(device, part);
if (iface) break;
}
if (!iface) iface = packetTracerExtractIfaceFromText(device, item?.path || item?.name);
}
return { device, iface, parts };
}
function packetTracerFindLink(devices, links, device, iface) {
if (!device || !iface) return null;
return (links || []).find((link) => {
return (link.a === device.id && link.ai === iface) || (link.b === device.id && link.bi === iface);
}) || null;
}
function packetTracerLinkPeer(devices, link, device) {
if (!link || !device) return {};
const peerId = link.a === device.id ? link.b : link.a;
const peerIface = link.a === device.id ? link.bi : link.ai;
return { peer: devices?.[peerId], peerIface };
}
function packetTracerExpectedLinkPeer(text) {
const source = String(text || "");
return (
source.match(/link to\s+([^:\/]+):?\s*connects to\s+([a-z-]+\s*\d+(?:\/\d+){0,3})/i) ||
source.match(/connects to\s+([^:\/]+):\s*([a-z-]+\s*\d+(?:\/\d+){0,3})/i) ||
source.match(/cable to\s+([^:\/]+):\s*([a-z-]+\s*\d+(?:\/\d+){0,3})/i)
);
}
function packetTracerExpandIfaceRange(text, device) {
const raw = String(text || "").trim();
const range = raw.match(/^(.+?)(\d+)\s*-\s*(\d+)$/);
if (!range) {
const iface = packetTracerIfaceByName(device, raw);
return iface ? [iface] : [];
}
const prefix = range[1];
const start = Number(range[2]);
const end = Number(range[3]);
if (!Number.isFinite(start) || !Number.isFinite(end) || end < start) return [];
const out = [];
for (let n = start; n <= end; n++) {
const iface = packetTracerIfaceByName(device, `${prefix}${n}`);
if (iface) out.push(iface);
}
return out;
}
function packetTracerAnswerExpectations(activity, devices) {
const expected = {};
for (const [deviceName, commands] of Object.entries(activity?.answerCommands || {})) {
const device = packetTracerDeviceByName(devices, deviceName);
if (!device) continue;
const devExpected = expected[device.id] = expected[device.id] || { hostname: deviceName, interfaces: {} };
let ifaces = [];
for (const raw of commands || []) {
const cmd = packetTracerNormText(raw);
let match = cmd.match(/^hostname (.+)$/);
if (match) {
devExpected.hostname = match[1];
continue;
}
match = cmd.match(/^interface range (.+)$/);
if (match) {
ifaces = packetTracerExpandIfaceRange(match[1], device);
continue;
}
match = cmd.match(/^interface (.+)$/);
if (match) {
const iface = packetTracerIfaceByName(device, match[1]);
ifaces = iface ? [iface] : [];
continue;
}
const setForIfaces = (fn) => {
for (const iface of ifaces) {
devExpected.interfaces[iface] = devExpected.interfaces[iface] || {};
fn(devExpected.interfaces[iface]);
}
};
match = cmd.match(/^switchport mode (access|trunk)$/);
if (match) setForIfaces((data) => { data.mode = match[1]; });
match = cmd.match(/^switchport access vlan (\d+)$/);
if (match) setForIfaces((data) => { data.vlan = Number(match[1]); data.mode = data.mode || "access"; });
match = cmd.match(/^switchport trunk native vlan (\d+)$/);
if (match) setForIfaces((data) => { data.nativeVlan = Number(match[1]); data.mode = "trunk"; });
match = cmd.match(/^switchport trunk allowed vlan (.+)$/);
if (match) setForIfaces((data) => { data.allowedVlans = match[1]; data.mode = "trunk"; });
match = cmd.match(/^channel-group (\d+) mode (\S+)$/);
if (match) setForIfaces((data) => { data.channelGroup = { id: Number(match[1]), mode: match[2] }; });
match = cmd.match(/^ip address (\S+) (\S+)$/);
if (match) setForIfaces((data) => { data.ip = match[1]; data.mask = match[2]; });
}
}
return expected;
}
function packetTracerCompare(actual, expected) {
return packetTracerNormText(actual) === packetTracerNormText(expected);
}
function packetTracerGradeItem(item, context) {
const points = Number(item?.points) || 0;
const text = packetTracerAssessmentText(item);
const { device, iface } = packetTracerItemTarget(item, context.devices);
const expected = device ? context.expected[device.id] : null;
const expectedIface = iface ? expected?.interfaces?.[iface] : null;
const actualIface = iface ? device?.interfaces?.[iface] : null;
const correct = (feedback = "Passed") => ({ ...item, points, earnedPoints: points, correct: true, status: "Correct", feedback });
const incorrect = (feedback = "Does not match the expected state") => ({ ...item, points, earnedPoints: 0, correct: false, status: "Incorrect", feedback });
const unchecked = (feedback = "OpenPT does not have a checker for this Packet Tracer item yet") => ({ ...item, points, earnedPoints: 0, correct: false, unchecked: true, status: "Unchecked", feedback });
if (/display name|host ?name/.test(text) && device && expected?.hostname) {
return packetTracerCompare(device.hostname, expected.hostname)
? correct(`${device.hostname} matches`)
: incorrect(`Expected hostname ${expected.hostname}`);
}
if (/link type|cable type/.test(text) && device && iface) {
const link = packetTracerFindLink(context.devices, context.links, device, iface);
if (!link) return incorrect(`No link on ${device.hostname} ${iface}`);
if (/serial/.test(text)) return /serial/i.test(link.type || link.packetTracer?.type || "") ? correct("Serial link") : incorrect("Expected serial link");
if (/copper|ethernet|straight/.test(text) || /trunk configuration/.test(text)) {
return /serial/i.test(link.type || "") ? incorrect("Expected Ethernet/copper link") : correct("Ethernet link");
}
return correct("Link type present");
}
if (/link to|connects to|connection|cable/.test(text) && device && iface) {
const peerMatch = packetTracerExpectedLinkPeer(text);
if (!peerMatch) return unchecked("Expected link peer was not decoded for this item");
const link = packetTracerFindLink(context.devices, context.links, device, iface);
if (!link) return incorrect(`No link on ${device.hostname} ${iface}`);
const { peer, peerIface } = packetTracerLinkPeer(context.devices, link, device);
const peerNameOk = packetTracerCompare(peer?.hostname, peerMatch[1]) || packetTracerCompare(peer?.name, peerMatch[1]) || packetTracerCompare(peer?.packetTracer?.name, peerMatch[1]);
const peerIfaceOk = packetTracerIfaceKey(peerIface) === packetTracerIfaceKey(peerMatch[2]);
return peerNameOk && peerIfaceOk
? correct(`Linked to ${peer.hostname} ${peerIface}`)
: incorrect(`Expected link to ${peerMatch[1]} ${peerMatch[2]}`);
}
if (/port mode|switchport mode/.test(text) && actualIface) {
const want = expectedIface?.mode || (/trunk/.test(text) ? "trunk" : /access/.test(text) ? "access" : null);
if (!want) return unchecked();
return actualIface.mode === want ? correct(`${iface} is ${want}`) : incorrect(`Expected ${iface} switchport mode ${want}`);
}
if (/access vlan|vlan membership|assigned vlan/.test(text) && actualIface) {
const want = expectedIface?.vlan || (String(item?.value || item?.name || "").match(/\b(\d+)\b/) || [])[1];
if (!want) return unchecked();
return Number(actualIface.vlan) === Number(want)
? correct(`${iface} is assigned to VLAN ${want}`)
: incorrect(`Expected ${iface} access VLAN ${want}`);
}
if (/channel group/.test(text) && actualIface) {
const want = expectedIface?.channelGroup?.id;
if (!want) return unchecked();
return Number(actualIface.channelGroup?.id) === Number(want)
? correct(`${iface} is in channel-group ${want}`)
: incorrect(`Expected ${iface} in channel-group ${want}`);
}
if (/channel mode/.test(text) && actualIface) {
const want = expectedIface?.channelGroup?.mode;
if (!want) return unchecked();
return packetTracerCompare(actualIface.channelGroup?.mode, want)
? correct(`${iface} channel mode ${want}`)
: incorrect(`Expected ${iface} channel mode ${want}`);
}
if (/ospf priority/.test(text) && actualIface) {
const want = (String(item?.value || item?.name || "").match(/priority\s+(\d+)/i) || [])[1];
if (!want) return unchecked();
return Number(actualIface.ospfPriority) === Number(want)
? correct(`${iface} OSPF priority ${want}`)
: incorrect(`Expected ${iface} OSPF priority ${want}`);
}
if (/exec-timeout/.test(text) && device) {
const match = String(item?.value || item?.name || "").match(/exec-timeout\s+(\d+)\s+(\d+)/i);
const line = /vty/.test(text) ? "vty" : "console";
if (!match) return unchecked();
const actual = device.lines?.[line]?.timeout;
return Number(actual?.minutes) === Number(match[1]) && Number(actual?.seconds || 0) === Number(match[2])
? correct(`${line} exec-timeout ${match[1]} ${match[2]}`)
: incorrect(`Expected ${line} exec-timeout ${match[1]} ${match[2]}`);
}
if (/transport input/.test(text) && device) {
const want = (String(item?.value || item?.name || "").match(/transport input\s+(.+)$/i) || [])[1]?.trim();
if (!want) return unchecked();
const actual = (device.lines?.vty?.transport || []).join(" ");
return packetTracerCompare(actual, want)
? correct(`vty transport input ${want}`)
: incorrect(`Expected vty transport input ${want}`);
}
if (/ip ssh version/.test(text) && device) {
const want = (String(item?.value || item?.name || "").match(/ip ssh version\s+(\d+)/i) || [])[1];
if (!want) return unchecked();
return Number(device.ssh?.version) === Number(want)
? correct(`SSH version ${want}`)
: incorrect(`Expected ip ssh version ${want}`);
}
const value = item?.value || item?.attrs?.value || item?.attrs?.expected || "";
if (/ip address/.test(text) && actualIface && /\d+\.\d+\.\d+\.\d+/.test(value)) {
return packetTracerCompare(actualIface.ip, value) ? correct(`${iface} IP matches`) : incorrect(`Expected ${iface} IP ${value}`);
}
if (/subnet mask/.test(text) && actualIface && /\d+\.\d+\.\d+\.\d+/.test(value)) {
return packetTracerCompare(actualIface.mask, value) ? correct(`${iface} mask matches`) : incorrect(`Expected ${iface} mask ${value}`);
}
if (/default gateway/.test(text) && device && /\d+\.\d+\.\d+\.\d+/.test(value)) {
const gateways = Object.values(device.interfaces || {}).map((ifc) => ifc.gw).filter(Boolean);
return gateways.some((gw) => packetTracerCompare(gw, value)) ? correct("Default gateway matches") : incorrect(`Expected default gateway ${value}`);
}
if (value && device) {
const config = packetTracerNormText(OPT_Engine.serializeConfig?.(device) || "");
if (config.includes(packetTracerNormText(value))) return correct("Expected config value found");
}
return unchecked();
}
function packetTracerProgressFromItems(items) {
const totalPoints = items.reduce((sum, item) => sum + (Number(item.points) || 0), 0);
const earnedPoints = items.reduce((sum, item) => sum + (Number(item.earnedPoints) || 0), 0);
const totalItems = items.length;
const earnedItems = items.filter((item) => item.correct).length;
return {
percent: totalPoints ? Math.round((earnedPoints / totalPoints) * 100) : 0,
score: `${earnedPoints}/${totalPoints}`,
itemCount: `${earnedItems}/${totalItems}`,
components: Object.values(items.reduce((acc, item) => {
const name = item.components || "Other";
acc[name] = acc[name] || { name, earnedItems: 0, items: 0, earnedPoints: 0, points: 0 };
acc[name].items += 1;
acc[name].points += Number(item.points) || 0;
if (item.correct) acc[name].earnedItems += 1;
acc[name].earnedPoints += Number(item.earnedPoints) || 0;
return acc;
}, {})).map((component) => ({
name: component.name,
items: `${component.earnedItems}/${component.items}`,
score: `${component.earnedPoints}/${component.points}`,
})),
};
}
function gradePacketTracerActivity(activity, devices, links) {
if (!activity) return null;
const sourceItems = packetTracerGradeSourceItems(activity);
if (!sourceItems.length) return activity;
const context = {
devices,
links,
expected: packetTracerAnswerExpectations(activity, devices),
};
const assessmentItems = sourceItems.map((item) => packetTracerGradeItem(item, context));
return {
...activity,
assessmentItems,
progress: packetTracerProgressFromItems(assessmentItems),
};
}
function sanitizePacketTracerHtml(html) {
const source = String(html || "");
if (!source.trim()) return "";
try {
const doc = new DOMParser().parseFromString(source, "text/html");
doc.querySelectorAll("script,style,link,meta,iframe,object,embed").forEach((node) => node.remove());
doc.body.querySelectorAll("*").forEach((node) => {
Array.from(node.attributes).forEach((attr) => {
const name = attr.name.toLowerCase();
const value = String(attr.value || "");
if (
name.startsWith("on") ||
name === "style" ||
name === "bgcolor" ||
name === "background" ||
name === "color" ||
name === "text" ||
((name === "href" || name === "src") && /^\s*javascript:/i.test(value))
) {
node.removeAttribute(attr.name);
}
});
});
return doc.body.innerHTML;
} catch (error) {
return "";
}
}
function PacketTracerAssignmentSidebar({ activity, activeTab, onTabChange }) {
const assessmentSections = packetTracerAssessmentSections(activity);
const assessmentCount = (assessmentSections.assessmentItems?.length || 0) + (assessmentSections.connectivityTests?.length || 0);
const hasProgress = !!activity?.progress || assessmentCount > 0;
const title = activity?.title || activity?.sourceName || "Packet Tracer assignment";
return (
);
}
function PacketTracerInstructions({ activity }) {
const html = useMemo(() => sanitizePacketTracerHtml(activity?.instructionsHtml), [activity?.instructionsHtml]);
if (html) {
return ;
}
return (
{activity?.instructionsText || "No assignment instructions were found in this Packet Tracer file."}
);
}
function PacketTracerProgress({ activity, assessmentSections, hasProgress }) {
const components = activity?.progress?.components || [];
const totalAssessmentItems = assessmentSections.assessmentItems.length + assessmentSections.connectivityTests.length;
if (!hasProgress) return No progress or assessment data was decoded for this assignment.
;
return (
Items
{activity?.progress?.itemCount || `${totalAssessmentItems}/${totalAssessmentItems}`}
Connectivity
{assessmentSections.connectivityTests.length}
Assessment
{assessmentSections.assessmentItems.length}
{components.length > 0 && (
<>
Components
Component
Items
Score
{components.map((component, index) => (
{component.name}
{component.items || "0/0"}
{component.score || "0 pts"}
))}
)}
{assessmentSections.roots?.length > 0 && (
<>
Assessment Roots
Root
Items
{assessmentSections.roots.map((root, index) => (
{root.name}
{root.count}
))}
)}
);
}
function packetTracerAssessmentPathParts(item) {
if (Array.isArray(item?.pathParts) && item.pathParts.length) return item.pathParts;
return String(item?.path || item?.name || "Assessment Item").split(/\s*\/\s*/).filter(Boolean);
}
function buildPacketTracerAssessmentTree(items) {
const root = { key: "root", name: "root", depth: -1, children: [], childMap: new Map() };
for (const item of items || []) {
let cursor = root;
const parts = packetTracerAssessmentPathParts(item);
parts.forEach((part, index) => {
const key = `${cursor.key}/${part}`;
let next = cursor.childMap.get(part);
if (!next) {
next = { key, name: part, depth: index, children: [], childMap: new Map(), item: null };
cursor.childMap.set(part, next);
cursor.children.push(next);
}
if (index === parts.length - 1) next.item = item;
cursor = next;
});
}
const rows = [];
const visit = (node, parentKeys = []) => {
for (const child of node.children) {
rows.push({
...child,
parentKeys,
isLeaf: !!child.item && child.children.length === 0,
});
visit(child, [...parentKeys, child.key]);
}
};
visit(root);
return rows;
}
function packetTracerComponentSummary(items) {
return Object.values((items || []).reduce((acc, item) => {
const name = item.components || "Other";
acc[name] = acc[name] || { name, items: 0, points: 0, earnedItems: 0, earnedPoints: 0 };
acc[name].items += 1;
acc[name].points += Number(item.points) || 0;
if (item.correct) acc[name].earnedItems += 1;
acc[name].earnedPoints += Number(item.earnedPoints) || 0;
return acc;
}, {}));
}
function PacketTracerAssessmentSummary({ items }) {
const components = packetTracerComponentSummary(items);
const totalPoints = items.reduce((sum, item) => sum + (Number(item.points) || 0), 0);
const earnedPoints = items.reduce((sum, item) => sum + (Number(item.earnedPoints) || 0), 0);
const earnedItems = items.filter((item) => item.correct).length;
return (
);
}
function PacketTracerAssessmentRows({ items, empty }) {
const rows = useMemo(() => buildPacketTracerAssessmentTree(items || []), [items]);
const expandableKeys = useMemo(() => rows.filter((row) => row.children.length).map((row) => row.key), [rows]);
const [expanded, setExpanded] = useState(() => new Set(expandableKeys));
const [showIncorrectOnly, setShowIncorrectOnly] = useState(() => (items || []).some((item) => item.correct === false));
const [query, setQuery] = useState("");
useEffect(() => {
setExpanded(new Set(expandableKeys));
}, [expandableKeys.join("|")]);
const allExpanded = expandableKeys.length > 0 && expandableKeys.every((key) => expanded.has(key));
if (!items?.length) return {empty}
;
const visibleKeys = new Set();
if (showIncorrectOnly) {
for (const row of rows) {
if (row.item && !row.item.correct) {
visibleKeys.add(row.key);
row.parentKeys.forEach((key) => visibleKeys.add(key));
}
}
}
const q = query.trim().toLowerCase();
const visibleRows = rows.filter((row) => {
if (!row.parentKeys.every((key) => expanded.has(key))) return false;
if (showIncorrectOnly && !visibleKeys.has(row.key)) return false;
if (!q) return true;
const item = row.item;
return [row.name, item?.status, item?.components, item?.feedback, item?.path].filter(Boolean).join(" ").toLowerCase().includes(q);
});
const uncheckedCount = (items || []).filter((item) => item.unchecked).length;
const toggleNode = (key) => {
setExpanded((current) => {
const next = new Set(current);
if (next.has(key)) next.delete(key); else next.add(key);
return next;
});
};
return (
setQuery(e.target.value)} placeholder="Search assessment items" />
{uncheckedCount > 0 && {uncheckedCount} unchecked by OpenPT}
Assessment ItemsStatusPointsComponent(s)Feedback
{visibleRows.map((row) => {
const item = row.item;
const hasChildren = row.children.length > 0;
return (
{hasChildren ? (
) : }
{item && {item.correct ? "✓" : "x"}}
{row.name}
{item ? (item.status || "Unchecked") : ""}
{item ? `${Number(item.earnedPoints) || 0}/${Number(item.points) || 0}` : ""}
{item?.components || ""}
{item?.feedback || item?.attrs?.incorrectFeedback || item?.attrs?.feedback || ""}
);
})}
);
}
function ServerModuleSidebar({ device, activeTab, activeConfig, onTabChange, onConfigChange, onUpdate, onClose }) {
const cfg = ensureServerConfig(device);
return (
);
}
function ServerConfigPanel({ device, cfg, activeConfig, onConfigChange, onUpdate }) {
return (
CONFIG
{SERVER_CONFIG_SECTIONS.map(([key, label]) => (
))}
{activeConfig === "http" &&
}
{activeConfig === "dhcp" &&
}
{activeConfig === "dhcpv6" &&
}
{activeConfig === "tftp" &&
}
{activeConfig === "dns" &&
}
{activeConfig === "syslog" &&
}
{activeConfig === "aaa" &&
}
{activeConfig === "ntp" &&
}
{activeConfig === "email" &&
}
{activeConfig === "ftp" &&
}
{activeConfig === "iot" &&
}
{activeConfig === "vm" &&
}
{activeConfig === "radiusEap" &&
}
{activeConfig === "prp" &&
}
);
}
function ServiceSwitch({ label = "Service", value, onChange }) {
return (
{label}
);
}
function ServerTable({ columns, rows, selectedIndex, onSelect, empty = "No entries" }) {
return (
c.width || "1fr").join(" ") }}>
{columns.map((c) => {c.label})}
{!rows.length &&
{empty}
}
{rows.map((row, i) => (
))}
);
}
function HttpConfig({ cfg, onUpdate }) {
const [selected, setSelected] = useState(null);
const files = cfg.files || SERVER_WEB_FILES;
const setToggle = (key, value) => onUpdate((d, c) => {
c.http[key] = value;
d.services[key] = value;
}, `${key.toUpperCase()} service ${value ? "enabled" : "disabled"}`);
const editFile = (index) => {
const file = files[index];
if (!file?.editable) return;
const content = window.prompt(`Edit ${file.name}`, file.content || "");
if (content == null) return;
onUpdate((d, c) => {
c.http.files[index] = { ...c.http.files[index], content };
d.files[`flash:${file.name}`] = content;
}, `${file.name} updated`);
};
return (
HTTP
setToggle("http", v)} />
setToggle("https", v)} />
File Manager
({ ...f, edit: f.editable ? "(edit)" : "", del: "(delete)" }))} selectedIndex={selected} onSelect={setSelected} />
);
}
function DhcpConfig({ cfg, onUpdate }) {
const first = cfg.pools?.[0] || {};
const [form, setForm] = useState({
poolName: cfg.selectedPool || first.poolName || "serverPool",
defaultGateway: first.defaultGateway || "0.0.0.0",
dnsServer: first.dnsServer || "0.0.0.0",
startIp: first.startIp || "209.165.200.0",
subnetMask: first.subnetMask || "255.255.255.0",
maxUsers: first.maxUsers || 512,
tftpServer: first.tftpServer || "0.0.0.0",
wlcAddress: first.wlcAddress || "0.0.0.0",
});
useEffect(() => {
const selected = cfg.pools?.find((p) => p.poolName === cfg.selectedPool) || cfg.pools?.[0];
if (selected) setForm({ ...selected });
}, [cfg.selectedPool, cfg.pools?.length]);
const setField = (key, value) => setForm((f) => ({ ...f, [key]: value }));
return (
DHCP
onUpdate((d, c) => { c.dhcp.service = v; d.services.dhcp = v; }, `DHCP service ${v ? "enabled" : "disabled"}`)} />
setForm({ ...cfg.pools[i] })} />
);
}
function Dhcpv6Config({ cfg, onUpdate }) {
return (
DHCPv6
onUpdate((d, c) => { c.dhcpv6.service = v; d.services.dhcpv6 = v; }, `DHCPv6 service ${v ? "enabled" : "disabled"}`)} />
IPv6 Address Prefix
IPv6 Prefix-Delegation
IPv6 Local Pool
);
}
function TftpConfig({ cfg, onUpdate }) {
const [selected, setSelected] = useState(null);
return (
TFTP
onUpdate((d, c) => { c.tftp.service = v; d.services.tftp = v; }, `TFTP service ${v ? "enabled" : "disabled"}`)} />
({ name }))} selectedIndex={selected} onSelect={setSelected} />
);
}
function DnsConfig({ cfg, onUpdate }) {
const [record, setRecord] = useState({ name: "", type: "A Record", detail: "" });
const [selected, setSelected] = useState(null);
return (
DNS
onUpdate((d, c) => { c.dns.service = v; d.services.dns = v; }, `DNS service ${v ? "enabled" : "disabled"}`)} />
{ setSelected(i); setRecord({ ...cfg.records[i] }); }} />
);
}
function SyslogConfig({ cfg, onUpdate, device }) {
const logs = cfg.logs?.length ? cfg.logs : (device.logging || []);
return (
Syslog
onUpdate((d, c) => { c.syslog.service = v; d.services.syslog = v; }, `Syslog service ${v ? "enabled" : "disabled"}`)} />
);
}
function AaaConfig({ cfg, onUpdate }) {
const [client, setClient] = useState({ clientName: "", clientIp: "", serverType: "Radius", key: "" });
const [user, setUser] = useState({ username: "", password: "" });
return (
AAA
Service
Network Configuration
User Setup
);
}
function NtpConfig({ cfg, onUpdate }) {
return (
NTP
onUpdate((d, c) => { c.ntp.service = v; d.services.ntp = v; }, `NTP service ${v ? "enabled" : "disabled"}`)} />
);
}
function EmailConfig({ cfg, onUpdate }) {
const [user, setUser] = useState({ username: "", password: "" });
return (
EMAIL
onUpdate((d, c) => { c.email.smtp = v; d.services.smtp = v; }, `SMTP ${v ? "enabled" : "disabled"}`)} />
onUpdate((d, c) => { c.email.pop3 = v; d.services.pop3 = v; }, `POP3 ${v ? "enabled" : "disabled"}`)} />
User Setup
);
}
function FtpConfig({ cfg, onUpdate }) {
const [user, setUser] = useState({ username: "", password: "", permission: "R" });
const [selectedFile, setSelectedFile] = useState(null);
const togglePerm = (letter, checked) => setUser((u) => {
const next = checked ? [...new Set(`${u.permission}${letter}`.split(""))].join("") : u.permission.replace(letter, "");
return { ...u, permission: next };
});
return (
FTP
onUpdate((d, c) => { c.ftp.service = v; d.services.ftp = v; }, `FTP ${v ? "enabled" : "disabled"}`)} />
User Setup
{["W", "R", "D", "N", "L"].map((p) => )}
({ name }))} selectedIndex={selectedFile} onSelect={setSelectedFile} />
);
}
function SimpleRegistryConfig({ title, section, cfg, onUpdate, serviceName }) {
return (
{title}
{section === "iot" &&
This service runs on top of the HTTP or HTTPS service.
}
onUpdate((d, c) => { c[section].service = v; d.services[serviceName] = v; }, `${title} ${v ? "enabled" : "disabled"}`)} />
);
}
function VmConfig({ cfg, onUpdate }) {
return (
VM Management
onUpdate((d, c) => { c.vm.service = v; d.services.vm = v; }, `VM Management ${v ? "enabled" : "disabled"}`)} />
);
}
function RadiusEapConfig({ cfg, onUpdate }) {
return (
EAP Configuration
);
}
function PrpConfig({ cfg, onUpdate }) {
return (
PRP Configuration
);
}
function AppsSidebar({ device, activeAppKey, onOpenApp, onClose }) {
const meta = DeviceCatalog.find(c => c.platform === device.platform && c.kind === device.kind) || DeviceCatalog.find(c => c.kind === device.kind) || DeviceCatalog[0];
return (
);
}
function EndpointAppWorkspace({
tab, app, device, devices, links, onClose, onUpdateDevice, onApplyCommand, onPing,
scrollState, onScrollStateChange, historyState, onHistoryChange, ghostSuggestions,
}) {
const isCliApp = app.action === "console";
return (
{device.hostname} - {app.label}
{app.kind}
{isCliApp ? (
) : (
)}
);
}
function EndpointAppBody({ app, device, onUpdateDevice }) {
if (app.key === "ip" || app.key === "wireless") {
return ;
}
if (app.key === "editor") {
return ;
}
if (app.key === "browser") {
return ;
}
if (app.key === "email") {
return ;
}
return ;
}
function appSettings(device, key) {
return device.appSettings?.[key] || {};
}
function setAppSetting(key, field, value) {
return (device) => {
device.appSettings = device.appSettings || {};
device.appSettings[key] = { ...(device.appSettings[key] || {}), [field]: value };
};
}
function EndpointIpApp({ app, device, preferWireless, onUpdateDevice }) {
const ifaceNames = Object.keys(device.interfaces || {});
const preferred = preferWireless && device.interfaces?.wlan0 ? "wlan0" : (device.interfaces?.eth0 ? "eth0" : ifaceNames[0]);
const [ifaceNameValue, setIfaceNameValue] = useState(preferred);
useEffect(() => {
if (!device.interfaces?.[ifaceNameValue]) setIfaceNameValue(preferred);
}, [device.id, preferred, ifaceNameValue]);
const ifc = device.interfaces?.[ifaceNameValue] || {};
const updateIface = (field, value) => onUpdateDevice((d) => {
d.interfaces[ifaceNameValue] = { ...(d.interfaces[ifaceNameValue] || {}), [field]: value || null };
}, `${ifaceName(ifaceNameValue)} ${field} updated`);
const setDhcp = (enabled) => onUpdateDevice((d) => {
d.interfaces[ifaceNameValue] = { ...(d.interfaces[ifaceNameValue] || {}), dhcp: enabled };
}, `${ifaceName(ifaceNameValue)} DHCP ${enabled ? "enabled" : "disabled"}`);
return (
);
}
function EndpointInterfaceSummary({ device }) {
const rows = Object.entries(device.interfaces || {}).map(([name, ifc]) => ({
name,
ip: ifc.ip || "unassigned",
mask: ifc.mask || "unassigned",
gw: ifc.gw || "unassigned",
mac: ifc.mac || "unknown",
state: ifc.admUp === false ? "admin down" : (ifc.up ? "up" : "down"),
}));
return (
Interfaces
InterfaceAddressGatewayState
{rows.map((row) => (
{ifaceName(row.name)}
{row.ip}
{row.gw}
{row.state}
))}
);
}
function EndpointTextEditorApp({ device, onUpdateDevice }) {
const files = device.files || {};
const name = appSettings(device, "editor").file || "desktop:notes.txt";
const content = files[name] || "";
const saveName = (value) => onUpdateDevice((d) => {
const prev = d.appSettings?.editor?.file || "desktop:notes.txt";
d.appSettings = d.appSettings || {};
d.appSettings.editor = { ...(d.appSettings.editor || {}), file: value };
d.files = d.files || {};
if (!d.files[value]) d.files[value] = d.files[prev] || "";
}, "Text Editor file selected");
return (
![\"logo\"](\"cscoptlogo177x111.jpg\")
" },
{ name: "index.html", editable: true, content: "