[{"data":1,"prerenderedAt":244},["ShallowReactive",2],{"$fciYrKC_DmK9Mgj3WnqiD2_RJ6hz_YlOkKCqutvcTYOY":3},{"newThing":4,"project":5,"cycle":8,"sections":20,"threads":232,"otherDocs":233,"images":235,"archiveItems":239,"links":243},null,{"id":6,"label":7,"liveBase":4},"design","Design",{"id":9,"num":10,"dir":11,"name":12,"title":13,"focus":4,"status":14,"statusNote":4,"created":15,"completed":4,"mode":4,"recordless":16,"thumbnail":17,"imageCount":18,"artifactCount":18,"lastActivity":15,"hasPickup":16,"hasInitialPrompt":19},"c31",31,"c31.page-mocks","page-mocks","Page Mocks","archived","2026-09-11",false,"\u002Fcycles\u002Fdesign\u002Fc31-security-overview.png",1,true,[21,35,54,100,208],{"key":22,"title":23,"empty":16,"ast":24},"why","Why",{"type":25,"children":26},"root",[27],{"type":28,"tag":29,"props":30,"children":31},"element","p",{},[32],{"type":33,"value":34},"text","The design site documents components and patterns individually, but has no place showing how they combine into complete app pages. Engineers need a clean reference — layout, data shape, component composition — without API noise or setup logic.",{"key":36,"title":37,"empty":16,"ast":38},"objective","Objective",{"type":25,"children":39},[40],{"type":28,"tag":29,"props":41,"children":42},{},[43,45,52],{"type":33,"value":44},"Add a \"Pages\" entity to the design site, starting with a recreation of ",{"type":28,"tag":46,"props":47,"children":49},"code",{"className":48},[],[50],{"type":33,"value":51},"security\u002Foverview",{"type":33,"value":53}," from app.qpoint.io. Extract the necessary health and severity components into the shared layer.",{"key":55,"title":56,"empty":16,"ast":57},"scope","Scope",{"type":25,"children":58},[59],{"type":28,"tag":60,"props":61,"children":62},"ul",{},[63,85,90,95],{"type":28,"tag":64,"props":65,"children":66},"li",{},[67,69,75,77,83],{"type":33,"value":68},"Extract 5 presentational components to the layer (",{"type":28,"tag":46,"props":70,"children":72},{"className":71},[],[73],{"type":33,"value":74},"health\u002F",{"type":33,"value":76}," + ",{"type":28,"tag":46,"props":78,"children":80},{"className":79},[],[81],{"type":33,"value":82},"security\u002FSeverity",{"type":33,"value":84},")",{"type":28,"tag":64,"props":86,"children":87},{},[88],{"type":33,"value":89},"Create page registry and index page",{"type":28,"tag":64,"props":91,"children":92},{},[93],{"type":33,"value":94},"Build static mock of security overview using layer components",{"type":28,"tag":64,"props":96,"children":97},{},[98],{"type":33,"value":99},"Add nav link",{"key":101,"title":102,"empty":16,"ast":103},"key-changes","Key Changes",{"type":25,"children":104},[105],{"type":28,"tag":60,"props":106,"children":107},{},[108,133,164,174],{"type":28,"tag":64,"props":109,"children":110},{},[111,117,119,125,127],{"type":28,"tag":112,"props":113,"children":114},"strong",{},[115],{"type":33,"value":116},"Layer:",{"type":33,"value":118}," New ",{"type":28,"tag":46,"props":120,"children":122},{"className":121},[],[123],{"type":33,"value":124},"components\u002Fhealth\u002F",{"type":33,"value":126}," directory (Dial, DialSummary, SummaryItem, Scanning) + ",{"type":28,"tag":46,"props":128,"children":130},{"className":129},[],[131],{"type":33,"value":132},"SecuritySeverity",{"type":28,"tag":64,"props":134,"children":135},{},[136,141,143,149,151,157,158],{"type":28,"tag":112,"props":137,"children":138},{},[139],{"type":33,"value":140},"Design site:",{"type":33,"value":142}," ",{"type":28,"tag":46,"props":144,"children":146},{"className":145},[],[147],{"type":33,"value":148},"app\u002Fdata\u002Fpage-registry.ts",{"type":33,"value":150},", ",{"type":28,"tag":46,"props":152,"children":154},{"className":153},[],[155],{"type":33,"value":156},"app\u002Fpages\u002Fpages\u002Findex.vue",{"type":33,"value":150},{"type":28,"tag":46,"props":159,"children":161},{"className":160},[],[162],{"type":33,"value":163},"app\u002Fpages\u002Fpages\u002Fsecurity-overview.vue",{"type":28,"tag":64,"props":165,"children":166},{},[167,172],{"type":28,"tag":112,"props":168,"children":169},{},[170],{"type":33,"value":171},"Nav:",{"type":33,"value":173}," \"Pages\" link added to AppNav",{"type":28,"tag":64,"props":175,"children":176},{},[177,182,184,190,192,198,200,206],{"type":28,"tag":112,"props":178,"children":179},{},[180],{"type":33,"value":181},"API simplification (2026-03-19):",{"type":33,"value":183}," Removed ",{"type":28,"tag":46,"props":185,"children":187},{"className":186},[],[188],{"type":33,"value":189},"percent",{"type":33,"value":191}," prop from HealthDial, HealthDialSummary, and HealthSummaryItem. Status now drives both color and needle position internally (",{"type":28,"tag":46,"props":193,"children":195},{"className":194},[],[196],{"type":33,"value":197},"cool:95, warn:60, warm:35, hot:10",{"type":33,"value":199},"). HealthDialSummary auto-derives statusMessage from status (Good\u002FWarning\u002FConcerning\u002FCritical) when not provided. Updated all consumers across design, app.qpoint.io (including production ",{"type":28,"tag":46,"props":201,"children":203},{"className":202},[],[204],{"type":33,"value":205},"Overall.vue",{"type":33,"value":207}," and local DialSummary override), registry, catalog, and skill docs.",{"key":209,"title":210,"empty":16,"ast":211},"outcome","Outcome",{"type":25,"children":212},[213],{"type":28,"tag":29,"props":214,"children":215},{},[216,222,224,230],{"type":28,"tag":46,"props":217,"children":219},{"className":218},[],[220],{"type":33,"value":221},"\u002Fpages",{"type":33,"value":223}," lists page mocks. ",{"type":28,"tag":46,"props":225,"children":227},{"className":226},[],[228],{"type":33,"value":229},"\u002Fpages\u002Fsecurity-overview",{"type":33,"value":231}," renders a static, data-complete recreation of the security overview page using only layer components and mock data.",[],[234],"initial-prompt.md",[236],{"src":17,"kind":237,"order":238},"hero",4999,[240],{"path":241,"title":242,"image":17,"gallery":4},"archive\u002F2026-q3\u002F2026-03-19-c31-security-overview","Security Overview — the First Page Mock",[],1789151086778]