[{"data":1,"prerenderedAt":559},["ShallowReactive",2],{"design-doc:ops-surfaces":3},{"data":4,"body":7,"toc":551},{"title":5,"description":6},"Operational surfaces","Nagios Core overlay work (2026-09) showed that TUX already had the\nwrong shape of answer for monitoring: sentiment tokens, maroon\nchrome used as state, and a Vue catalog with no drop-in for apps\nthat cannot change their markup. The status ramp landed in\nADR-0013. This note\nis the rest of the lesson: how an ops board consumes TUX.",{"type":8,"children":9},"root",[10,18,41,48,172,201,207,237,324,330,493,499],{"type":11,"tag":12,"props":13,"children":15},"element","h1",{"id":14},"operational-surfaces",[16],{"type":17,"value":5},"text",{"type":11,"tag":19,"props":20,"children":21},"p",{},[22,24,30,32,39],{"type":17,"value":23},"Nagios Core overlay work (2026-09) showed that TUX already had the\nwrong ",{"type":11,"tag":25,"props":26,"children":27},"em",{},[28],{"type":17,"value":29},"shape",{"type":17,"value":31}," of answer for monitoring: sentiment tokens, maroon\nchrome used as state, and a Vue catalog with no drop-in for apps\nthat cannot change their markup. The status ramp landed in\n",{"type":11,"tag":33,"props":34,"children":36},"a",{"href":35},"\u002Fdocs\u002Fadr\u002F0013-operational-status-ramp",[37],{"type":17,"value":38},"ADR-0013",{"type":17,"value":40},". This note\nis the rest of the lesson: how an ops board consumes TUX.",{"type":11,"tag":42,"props":43,"children":45},"h2",{"id":44},"two-documents",[46],{"type":17,"value":47},"Two documents",{"type":11,"tag":49,"props":50,"children":51},"table",{},[52,76],{"type":11,"tag":53,"props":54,"children":55},"thead",{},[56],{"type":11,"tag":57,"props":58,"children":59},"tr",{},[60,66,71],{"type":11,"tag":61,"props":62,"children":63},"th",{},[64],{"type":17,"value":65},"Dimension",{"type":11,"tag":61,"props":67,"children":68},{},[69],{"type":17,"value":70},"Overlay",{"type":11,"tag":61,"props":72,"children":73},{},[74],{"type":17,"value":75},"Owned board",{"type":11,"tag":77,"props":78,"children":79},"tbody",{},[80,99,132,150],{"type":11,"tag":57,"props":81,"children":82},{},[83,89,94],{"type":11,"tag":84,"props":85,"children":86},"td",{},[87],{"type":17,"value":88},"Markup",{"type":11,"tag":84,"props":90,"children":91},{},[92],{"type":17,"value":93},"The host's (CGI, AAP, a vendor admin)",{"type":11,"tag":84,"props":95,"children":96},{},[97],{"type":17,"value":98},"Ours",{"type":11,"tag":57,"props":100,"children":101},{},[102,107,119],{"type":11,"tag":84,"props":103,"children":104},{},[105],{"type":17,"value":106},"CSS",{"type":11,"tag":84,"props":108,"children":109},{},[110,117],{"type":11,"tag":111,"props":112,"children":114},"code",{"className":113},[],[115],{"type":17,"value":116},"kit\u002Fcss\u002Ftux-ops.css",{"type":17,"value":118}," mapped onto host classes",{"type":11,"tag":84,"props":120,"children":121},{},[122,124,130],{"type":17,"value":123},"Same file, plus Vue (",{"type":11,"tag":111,"props":125,"children":127},{"className":126},[],[128],{"type":17,"value":129},"TuxStatus",{"type":17,"value":131},")",{"type":11,"tag":57,"props":133,"children":134},{},[135,140,145],{"type":11,"tag":84,"props":136,"children":137},{},[138],{"type":17,"value":139},"Constraint",{"type":11,"tag":84,"props":141,"children":142},{},[143],{"type":17,"value":144},"Do not move, hide, or relabel what operators already know",{"type":11,"tag":84,"props":146,"children":147},{},[148],{"type":17,"value":149},"Same URLs \u002F column order \u002F scan; new HTML is allowed",{"type":11,"tag":57,"props":151,"children":152},{},[153,158,167],{"type":11,"tag":84,"props":154,"children":155},{},[156],{"type":17,"value":157},"Where host selectors live",{"type":11,"tag":84,"props":159,"children":160},{},[161],{"type":11,"tag":162,"props":163,"children":164},"strong",{},[165],{"type":17,"value":166},"The consuming repo",{"type":11,"tag":84,"props":168,"children":169},{},[170],{"type":17,"value":171},"Nowhere",{"type":11,"tag":19,"props":173,"children":174},{},[175,177,183,185,191,193,199],{"type":17,"value":176},"The kit never learns ",{"type":11,"tag":111,"props":178,"children":180},{"className":179},[],[181],{"type":17,"value":182},".serviceOK",{"type":17,"value":184},". A wrong selector in tti-ux is\ninvisible on every other consumer and untestable here. Recipes\n(gold keyline, hairline rail, ",{"type":11,"tag":111,"props":186,"children":188},{"className":187},[],[189],{"type":17,"value":190},"--status-*",{"type":17,"value":192}," chip) are portable;\n",{"type":11,"tag":111,"props":194,"children":196},{"className":195},[],[197],{"type":17,"value":198},".statusBGCRITICAL",{"type":17,"value":200}," is not.",{"type":11,"tag":42,"props":202,"children":204},{"id":203},"vue-html-css-source",[205],{"type":17,"value":206},"Vue, HTML, CSS, Source",{"type":11,"tag":19,"props":208,"children":209},{},[210,216,218,228,230,235],{"type":11,"tag":111,"props":211,"children":213},{"className":212},[],[214],{"type":17,"value":215},"TuxExample",{"type":17,"value":217}," already showed Vue, rendered HTML, and optional SFC\nsource. Power BI reports got a fourth tab because they are a real\ntarget. Ops boards are the same: the CSS tab on\n",{"type":11,"tag":33,"props":219,"children":221},{"href":220},"..\u002Fapp\u002Fpages\u002Fcomponents\u002Fstatus.vue",[222],{"type":11,"tag":111,"props":223,"children":225},{"className":224},[],[226],{"type":17,"value":227},"\u002Fcomponents\u002Fstatus",{"type":17,"value":229}," is\n",{"type":11,"tag":111,"props":231,"children":233},{"className":232},[],[234],{"type":17,"value":116},{"type":17,"value":236},", not a transcription.",{"type":11,"tag":49,"props":238,"children":239},{},[240,256],{"type":11,"tag":53,"props":241,"children":242},{},[243],{"type":11,"tag":57,"props":244,"children":245},{},[246,251],{"type":11,"tag":61,"props":247,"children":248},{},[249],{"type":17,"value":250},"Tab",{"type":11,"tag":61,"props":252,"children":253},{},[254],{"type":17,"value":255},"Who it is for",{"type":11,"tag":77,"props":257,"children":258},{},[259,279,292,311],{"type":11,"tag":57,"props":260,"children":261},{},[262,267],{"type":11,"tag":84,"props":263,"children":264},{},[265],{"type":17,"value":266},"Vue",{"type":11,"tag":84,"props":268,"children":269},{},[270,272,278],{"type":17,"value":271},"Nuxt \u002F Vue apps (",{"type":11,"tag":111,"props":273,"children":275},{"className":274},[],[276],{"type":17,"value":277},"\u003CTuxStatus state=\"critical\" \u002F>",{"type":17,"value":131},{"type":11,"tag":57,"props":280,"children":281},{},[282,287],{"type":11,"tag":84,"props":283,"children":284},{},[285],{"type":17,"value":286},"HTML",{"type":11,"tag":84,"props":288,"children":289},{},[290],{"type":17,"value":291},"What actually rendered (auto)",{"type":11,"tag":57,"props":293,"children":294},{},[295,299],{"type":11,"tag":84,"props":296,"children":297},{},[298],{"type":17,"value":106},{"type":11,"tag":84,"props":300,"children":301},{},[302,304,310],{"type":17,"value":303},"Overlay \u002F static HTML (",{"type":11,"tag":111,"props":305,"children":307},{"className":306},[],[308],{"type":17,"value":309},"tux-ops.css",{"type":17,"value":131},{"type":11,"tag":57,"props":312,"children":313},{},[314,319],{"type":11,"tag":84,"props":315,"children":316},{},[317],{"type":17,"value":318},"Source",{"type":11,"tag":84,"props":320,"children":321},{},[322],{"type":17,"value":323},"The SFC, when the brand contract is load-bearing",{"type":11,"tag":42,"props":325,"children":327},{"id":326},"what-the-recipes-encode",[328],{"type":17,"value":329},"What the recipes encode",{"type":11,"tag":331,"props":332,"children":333},"ul",{},[334,360,394,443,468],{"type":11,"tag":335,"props":336,"children":337},"li",{},[338,358],{"type":11,"tag":162,"props":339,"children":340},{},[341,343,348,350,356],{"type":17,"value":342},"Status is ",{"type":11,"tag":111,"props":344,"children":346},{"className":345},[],[347],{"type":17,"value":190},{"type":17,"value":349},", never ",{"type":11,"tag":111,"props":351,"children":353},{"className":352},[],[354],{"type":17,"value":355},"--brand-primary",{"type":17,"value":357},".",{"type":17,"value":359}," Maroon is\nchrome. CRITICAL is true red.",{"type":11,"tag":335,"props":361,"children":362},{},[363,368,370,376,378,384,386,392],{"type":11,"tag":162,"props":364,"children":365},{},[366],{"type":17,"value":367},"Gold is a keyline",{"type":17,"value":369}," (",{"type":11,"tag":111,"props":371,"children":373},{"className":372},[],[374],{"type":17,"value":375},".tux-ops-heading",{"type":17,"value":377},"), never heading text.\n",{"type":11,"tag":111,"props":379,"children":381},{"className":380},[],[382],{"type":17,"value":383},"--warn-text",{"type":17,"value":385}," (or ",{"type":11,"tag":111,"props":387,"children":389},{"className":388},[],[390],{"type":17,"value":391},"--status-warning",{"type":17,"value":393}," as text) is for warning\nwords on white.",{"type":11,"tag":335,"props":395,"children":396},{},[397,402,404,410,412,418,420,426,428,434,436,442],{"type":11,"tag":162,"props":398,"children":399},{},[400],{"type":17,"value":401},"Chrome is a hairline",{"type":17,"value":403},", not a colored slab. ",{"type":11,"tag":111,"props":405,"children":407},{"className":406},[],[408],{"type":17,"value":409},".tux-ops-rail",{"type":17,"value":411}," and\n",{"type":11,"tag":111,"props":413,"children":415},{"className":414},[],[416],{"type":17,"value":417},".tux-ops-table",{"type":17,"value":419}," use ",{"type":11,"tag":111,"props":421,"children":423},{"className":422},[],[424],{"type":17,"value":425},"--surface-border",{"type":17,"value":427}," on ",{"type":11,"tag":111,"props":429,"children":431},{"className":430},[],[432],{"type":17,"value":433},"--surface-page",{"type":17,"value":435}," \u002F\n",{"type":11,"tag":111,"props":437,"children":439},{"className":438},[],[440],{"type":17,"value":441},"--surface-raised",{"type":17,"value":357},{"type":11,"tag":335,"props":444,"children":445},{},[446,451,453,459,461,467],{"type":11,"tag":162,"props":447,"children":448},{},[449],{"type":17,"value":450},"ACK ≠ MAINT.",{"type":17,"value":452}," Acknowledged sinks (",{"type":11,"tag":111,"props":454,"children":456},{"className":455},[],[457],{"type":17,"value":458},"--surface-sunken",{"type":17,"value":460},").\nScheduled downtime is ",{"type":11,"tag":111,"props":462,"children":464},{"className":463},[],[465],{"type":17,"value":466},"--status-maintenance",{"type":17,"value":357},{"type":11,"tag":335,"props":469,"children":470},{},[471,484,486,492],{"type":11,"tag":162,"props":472,"children":473},{},[474,476,482],{"type":17,"value":475},"TuxBadge ",{"type":11,"tag":111,"props":477,"children":479},{"className":478},[],[480],{"type":17,"value":481},"status",{"type":17,"value":483}," is a different word.",{"type":17,"value":485}," Queued \u002F running \u002F\ncompleted is job lifecycle on the semantic palette. Do not feed\nOK\u002FWARNING\u002FCRITICAL through ",{"type":11,"tag":111,"props":487,"children":489},{"className":488},[],[490],{"type":17,"value":491},"TuxBadge",{"type":17,"value":357},{"type":11,"tag":42,"props":494,"children":496},{"id":495},"composition",[497],{"type":17,"value":498},"Composition",{"type":11,"tag":19,"props":500,"children":501},{},[502,512,514,519,521,527,529,534,536,541,543,549],{"type":11,"tag":33,"props":503,"children":505},{"href":504},"..\u002Fapp\u002Fpages\u002Fexamples\u002Fops-board.vue",[506],{"type":11,"tag":111,"props":507,"children":509},{"className":508},[],[510],{"type":17,"value":511},"\u002Fexamples\u002Fops-board",{"type":17,"value":513}," is the\nassembly: KPI tiles with ",{"type":11,"tag":111,"props":515,"children":517},{"className":516},[],[518],{"type":17,"value":129},{"type":17,"value":520},", a ",{"type":11,"tag":111,"props":522,"children":524},{"className":523},[],[525],{"type":17,"value":526},"TuxSparkline",{"type":17,"value":528}," on poller\nload, gold ",{"type":11,"tag":111,"props":530,"children":532},{"className":531},[],[533],{"type":17,"value":375},{"type":17,"value":535},", hairline ",{"type":11,"tag":111,"props":537,"children":539},{"className":538},[],[540],{"type":17,"value":417},{"type":17,"value":542},". Same\nscan density as a monitoring pane, not Corridor Ops' 96px numerals.\n",{"type":11,"tag":111,"props":544,"children":546},{"className":545},[],[547],{"type":17,"value":548},"TuxBigStat",{"type":17,"value":550}," stays on IT \u002F marcom dashboards — maroon numerals\nare chrome, not state.",{"title":552,"searchDepth":553,"depth":553,"links":554},"",2,[555,556,557,558],{"id":44,"depth":553,"text":47},{"id":203,"depth":553,"text":206},{"id":326,"depth":553,"text":329},{"id":495,"depth":553,"text":498},1792952324134]