procinsh 0.1.0

A local, read-only Linux x86-64 process inspector
1
2
3
4
5
6
7
8
9
10
11
12
13
14
:root{color-scheme:dark;--cyan:#65f6dc;--muted:#75999b}*{box-sizing:border-box}body{margin:0;background:#03090e;color:#cbe4e4;font:12px ui-monospace,SFMono-Regular,Consolas,monospace;overflow:hidden}#world{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}.vignette{position:fixed;inset:0;pointer-events:none;box-shadow:inset 0 0 150px #0009;background:linear-gradient(90deg,#03090e88,transparent 35%,transparent 80%,#03090e55)}header{position:fixed;top:0;left:0;right:0;height:68px;background:#040d1399;border-bottom:1px solid #72ead522;padding:0 30px;display:flex;align-items:center;gap:20px;font-size:10px;letter-spacing:2px;backdrop-filter:blur(12px)}header a{color:var(--cyan);font-weight:bold;font-size:13px;text-decoration:none}.divider{height:15px;border-left:1px solid #40605b}.online{margin-left:auto;color:var(--cyan)}.title{position:fixed;top:103px;left:32px;pointer-events:none}.eyebrow{color:#72d6c3;font-size:10px;letter-spacing:3px;margin-bottom:15px}h1{font-family:system-ui,sans-serif;font-size:42px;line-height:1.03;letter-spacing:-1.7px;font-weight:300;margin:0;color:#e0f9f4}h1 span{font-size:29px;letter-spacing:2px;color:#5bc6b9}.title p{font-size:11px;color:#728f91;margin:18px 0}.counts{display:flex;gap:25px;margin-top:26px}.counts strong{display:block;color:#c0f6e8;font-size:23px;font-weight:400}.counts span{display:block;font-size:8px;letter-spacing:1px;color:#627e82;margin-top:5px}.tools{position:fixed;left:32px;top:340px;display:flex;flex-direction:column;gap:10px;width:210px}input,select,button{font:inherit!important;color:#bde7db!important;background:#08171ee6!important;border:1px solid #23433f!important;border-radius:3px!important;padding:9px!important}input[type=checkbox]{accent-color:#50d7bc}button{cursor:pointer}.tools label{color:#789b96;font-size:10px}aside{position:fixed;right:28px;top:95px;bottom:70px;width:295px;padding:22px;background:#051117ed;border:1px solid #30595288;border-top:2px solid #61d9bb;backdrop-filter:blur(15px);overflow:auto}aside h2{font-size:23px;color:#b5f9e1;overflow-wrap:anywhere;margin:0}aside p{color:#819b9f}#close{position:absolute;right:8px;top:8px;padding:2px 7px!important}#facts{line-height:2;color:#aac4c0}#inspect{display:block;padding:13px 0;color:#6febc9;border-bottom:1px solid #29413d;text-decoration:none}.sub{margin-top:24px}.note{font-size:10px;line-height:1.7}.region{padding:8px 0;border-bottom:1px solid #16332e;overflow-wrap:anywhere;font-size:10px;color:#82aaa3}.region strong{color:#bedad5;font-weight:400}.region code{display:block;font-size:9px;color:#668b89;background:none;padding:0}.telemetry{position:fixed;left:32px;bottom:75px;width:min(420px,50vw);padding-left:14px;border-left:2px solid #397265;background:linear-gradient(90deg,#030b11df,transparent);font-size:10px}.telemetry p{margin:7px 0;color:#829d9b;overflow-wrap:anywhere}.telemetry details{max-height:170px;overflow:auto}.telemetry summary{color:#64af9e;cursor:pointer}.telemetry .eyebrow{margin-bottom:10px}footer{position:fixed;bottom:0;left:0;right:0;display:flex;justify-content:space-between;padding:20px 30px;background:#040c1299;border-top:1px solid #29423a55;color:#799692;font-size:9px;letter-spacing:1px}footer i{display:inline-block;width:5px;height:5px;margin:0 5px 1px 10px;background:#61d6da;box-shadow:0 0 6px currentColor}footer span{margin:0 10px}.heap{background:#74df98!important}.stack{background:#ae94ef!important}.data{background:#397894!important}.read{background:#54fff0!important}.write{background:#ffb669!important}#hover{position:fixed;pointer-events:none;padding:9px;background:#05141eee;border:1px solid #32645a;color:#ade6d6;white-space:pre-line;font-size:11px;max-width:340px}#failure{position:fixed;top:45%;left:30%;right:20%;padding:25px;background:#201718;border:1px solid #ad7160;color:#f1c0a3}#fps{color:#48746a}[hidden]{display:none!important}@media(max-width:750px){header{padding:0 15px}header>span{display:none}.title{left:16px;top:88px}h1{font-size:27px}h1 span{font-size:18px}.counts{gap:12px}.counts strong{font-size:18px}.tools{left:16px;top:270px;width:170px}.telemetry{left:16px;bottom:70px;width:70vw}aside{right:10px;top:90px;width:260px}.title p{display:none}footer{padding:15px;font-size:8px}footer>div:last-child{display:none}}@media(prefers-reduced-motion:reduce){.vignette{box-shadow:none}}

.tools input[type=search]{width:100%;min-width:0}footer i.stack{display:inline-block;width:5px;height:5px}.cpu{background:#8dfff0!important}a{cursor:pointer}#connection-facts{line-height:1.8;color:#82aaa3;padding-bottom:10px}.endpoint{margin-top:12px;padding:12px;background:#071820;border:1px solid #21443f}.endpoint strong{display:block;color:#b5f9e1;font-size:14px;overflow-wrap:anywhere}.endpoint span{display:block;margin-top:7px;color:#829d9b}.endpoint a{display:block;margin-top:10px;color:#6febc9;text-decoration:none}.left-hud{position:fixed;top:103px;left:32px;width:min(210px,calc(100vw - 64px));pointer-events:none}.left-hud .tools{position:static;width:100%;pointer-events:auto}@media(max-width:750px){.left-hud{top:88px;left:16px;width:min(210px,calc(100vw - 32px))}}

header{height:42px;padding:0 20px;gap:16px;overflow:hidden}header a{font-size:11px;letter-spacing:1px;flex:none}.legend{display:flex;align-items:center;color:#799692;font-size:8px;letter-spacing:1px;white-space:nowrap}.legend i{display:inline-block;width:5px;height:5px;margin:0 4px 1px 8px;background:#61d6da;box-shadow:0 0 6px currentColor}.legend i.stack{display:inline-block}.legend span{margin:0 6px}.view-help{margin-left:auto;color:#799692;font-size:8px;letter-spacing:1px;white-space:nowrap}.view-help #fps{margin-left:10px}.left-hud{top:62px}aside{top:58px;bottom:18px}@media(max-width:900px){.view-help{display:none}}@media(max-width:750px){header{padding:0 10px;gap:8px}.legend{font-size:7px;letter-spacing:0}.legend i{margin-left:5px;margin-right:3px}.legend span{margin:0 3px}.left-hud{top:58px}aside{top:52px;bottom:10px}}

.process-labels{position:fixed;inset:0;width:100%;height:100%;pointer-events:none}

.legend i.network{background:#68baff!important;transform:rotate(45deg)}
#connection-endpoints p{overflow-wrap:anywhere}

.legend i.file{background:#e2d5a0!important;width:4px;height:7px}

#connection-endpoints>a{color:#6febc9}