[{"data":1,"prerenderedAt":748},["ShallowReactive",2],{"$f0Wi8weWXmgpwlZ6zLjPOBUKLcn-GZJIHZhItpQ0P9Ac":3},{"newThing":4,"project":5,"cycle":8,"sections":22,"threads":729,"otherDocs":730,"images":731,"archiveItems":746,"links":747},null,{"id":6,"label":7,"liveBase":4},"design","Design",{"id":9,"num":10,"dir":11,"name":12,"title":13,"focus":14,"status":15,"statusNote":4,"created":16,"completed":16,"mode":4,"recordless":17,"thumbnail":18,"imageCount":19,"artifactCount":20,"lastActivity":21,"hasPickup":17,"hasInitialPrompt":17},"c20",20,"c20.notification-component","notification-component","Alert Config Component","Alert rule configuration component for policy violation alerts","archived","2026-03-13",false,"\u002Fcycles\u002Fdesign\u002Fc20-alert-config.png",4,0,"2026-09-11",[23,37,47,92,640,694],{"key":24,"title":25,"empty":17,"ast":26},"why","Why",{"type":27,"children":28},"root",[29],{"type":30,"tag":31,"props":32,"children":33},"element","p",{},[34],{"type":35,"value":36},"text","Users need to define alert rules that fire when policy violations meet specific criteria. The component enables configurable conditions (every violation, or threshold-based), multiple action types (HTTP webhook, Slack message), and throttling controls — all composed as readable inline sentences.",{"key":38,"title":39,"empty":17,"ast":40},"objective","Objective",{"type":27,"children":41},[42],{"type":30,"tag":31,"props":43,"children":44},{},[45],{"type":35,"value":46},"Create an alert rule configuration card component, reusing the inline-pill dropdown pattern from the filter system. Extract from design site pattern into a shared layer component.",{"key":48,"title":49,"empty":17,"ast":50},"scope","Scope",{"type":27,"children":51},[52],{"type":30,"tag":53,"props":54,"children":55},"ul",{},[56,62,67,72,77,82,87],{"type":30,"tag":57,"props":58,"children":59},"li",{},[60],{"type":35,"value":61},"Alert config card with active\u002Finactive toggle",{"type":30,"tag":57,"props":63,"children":64},{},[65],{"type":35,"value":66},"Condition builder (simple: every violation; threshold: count + time window)",{"type":30,"tag":57,"props":68,"children":69},{},[70],{"type":35,"value":71},"Action config (HTTP request with method + URL; Slack message)",{"type":30,"tag":57,"props":73,"children":74},{},[75],{"type":35,"value":76},"Throttling config (none; rate-limited with collation)",{"type":30,"tag":57,"props":78,"children":79},{},[80],{"type":35,"value":81},"Mute button",{"type":30,"tag":57,"props":83,"children":84},{},[85],{"type":35,"value":86},"Add\u002Fdelete rules",{"type":30,"tag":57,"props":88,"children":89},{},[90],{"type":35,"value":91},"Document in design site patterns page and component listing",{"key":93,"title":94,"empty":17,"ast":95},"key-changes","Key Changes",{"type":27,"children":96},[97,106,144,152,280,288,343,351,384,392,550,558],{"type":30,"tag":31,"props":98,"children":99},{},[100],{"type":30,"tag":101,"props":102,"children":103},"strong",{},[104],{"type":35,"value":105},"Phase 1 — Pattern prototype:",{"type":30,"tag":53,"props":107,"children":108},{},[109,131],{"type":30,"tag":57,"props":110,"children":111},{},[112,114,121,123,129],{"type":35,"value":113},"Built ",{"type":30,"tag":115,"props":116,"children":118},"code",{"className":117},[],[119],{"type":35,"value":120},"NotificationRuleCard.vue",{"type":35,"value":122}," as a local pattern in ",{"type":30,"tag":115,"props":124,"children":126},{"className":125},[],[127],{"type":35,"value":128},"design\u002Fapp\u002Fcomponents\u002Fpatterns\u002F",{"type":35,"value":130}," with inline render-function sub-components (SentenceRow, PillSelect, PillNumber, PillText)",{"type":30,"tag":57,"props":132,"children":133},{},[134,136,142],{"type":35,"value":135},"Created pattern page at ",{"type":30,"tag":115,"props":137,"children":139},{"className":138},[],[140],{"type":35,"value":141},"\u002Fpatterns\u002Fnotification",{"type":35,"value":143}," and added to patterns index",{"type":30,"tag":31,"props":145,"children":146},{},[147],{"type":30,"tag":101,"props":148,"children":149},{},[150],{"type":35,"value":151},"Phase 2 — Layer extraction:",{"type":30,"tag":53,"props":153,"children":154},{},[155,262,267],{"type":30,"tag":57,"props":156,"children":157},{},[158,160,166,168],{"type":35,"value":159},"Extracted to ",{"type":30,"tag":115,"props":161,"children":163},{"className":162},[],[164],{"type":35,"value":165},"q-nuxt-layer\u002Fcomponents\u002Falert\u002F",{"type":35,"value":167}," as 5 proper SFC components:\n",{"type":30,"tag":53,"props":169,"children":170},{},[171,190,208,226,244],{"type":30,"tag":57,"props":172,"children":173},{},[174,180,182,188],{"type":30,"tag":115,"props":175,"children":177},{"className":176},[],[178],{"type":35,"value":179},"Config.vue",{"type":35,"value":181}," → ",{"type":30,"tag":115,"props":183,"children":185},{"className":184},[],[186],{"type":35,"value":187},"AlertConfig",{"type":35,"value":189}," — main card with reactive sentence rows",{"type":30,"tag":57,"props":191,"children":192},{},[193,199,200,206],{"type":30,"tag":115,"props":194,"children":196},{"className":195},[],[197],{"type":35,"value":198},"SentenceRow.vue",{"type":35,"value":181},{"type":30,"tag":115,"props":201,"children":203},{"className":202},[],[204],{"type":35,"value":205},"AlertSentenceRow",{"type":35,"value":207}," — labeled row container",{"type":30,"tag":57,"props":209,"children":210},{},[211,217,218,224],{"type":30,"tag":115,"props":212,"children":214},{"className":213},[],[215],{"type":35,"value":216},"PillSelect.vue",{"type":35,"value":181},{"type":30,"tag":115,"props":219,"children":221},{"className":220},[],[222],{"type":35,"value":223},"AlertPillSelect",{"type":35,"value":225}," — pill-shaped native select",{"type":30,"tag":57,"props":227,"children":228},{},[229,235,236,242],{"type":30,"tag":115,"props":230,"children":232},{"className":231},[],[233],{"type":35,"value":234},"PillNumber.vue",{"type":35,"value":181},{"type":30,"tag":115,"props":237,"children":239},{"className":238},[],[240],{"type":35,"value":241},"AlertPillNumber",{"type":35,"value":243}," — pill-shaped number input",{"type":30,"tag":57,"props":245,"children":246},{},[247,253,254,260],{"type":30,"tag":115,"props":248,"children":250},{"className":249},[],[251],{"type":35,"value":252},"PillText.vue",{"type":35,"value":181},{"type":30,"tag":115,"props":255,"children":257},{"className":256},[],[258],{"type":35,"value":259},"AlertPillText",{"type":35,"value":261}," — pill-shaped text input",{"type":30,"tag":57,"props":263,"children":264},{},[265],{"type":35,"value":266},"Converted inline render functions to proper Vue SFCs",{"type":30,"tag":57,"props":268,"children":269},{},[270,272,278],{"type":35,"value":271},"Fixed template ",{"type":30,"tag":115,"props":273,"children":275},{"className":274},[],[276],{"type":35,"value":277},"as",{"type":35,"value":279}," type casts — moved to script-side handler functions",{"type":30,"tag":31,"props":281,"children":282},{},[283],{"type":30,"tag":101,"props":284,"children":285},{},[286],{"type":35,"value":287},"Phase 3 — Rename:",{"type":30,"tag":53,"props":289,"children":290},{},[291,311,338],{"type":30,"tag":57,"props":292,"children":293},{},[294,296,302,303,309],{"type":35,"value":295},"Renamed namespace from ",{"type":30,"tag":115,"props":297,"children":299},{"className":298},[],[300],{"type":35,"value":301},"notification\u002F",{"type":35,"value":181},{"type":30,"tag":115,"props":304,"children":306},{"className":305},[],[307],{"type":35,"value":308},"alert\u002F",{"type":35,"value":310}," (these are alert rule definitions, not notifications themselves)",{"type":30,"tag":57,"props":312,"children":313},{},[314,316,322,323,329,331,336],{"type":35,"value":315},"Renamed ",{"type":30,"tag":115,"props":317,"children":319},{"className":318},[],[320],{"type":35,"value":321},"RuleConfig",{"type":35,"value":181},{"type":30,"tag":115,"props":324,"children":326},{"className":325},[],[327],{"type":35,"value":328},"Config",{"type":35,"value":330}," (auto-imports as ",{"type":30,"tag":115,"props":332,"children":334},{"className":333},[],[335],{"type":35,"value":187},{"type":35,"value":337}," — cleaner)",{"type":30,"tag":57,"props":339,"children":340},{},[341],{"type":35,"value":342},"Updated all consumers: pattern pages, demo files, component registry",{"type":30,"tag":31,"props":344,"children":345},{},[346],{"type":30,"tag":101,"props":347,"children":348},{},[349],{"type":35,"value":350},"Design site documentation:",{"type":30,"tag":53,"props":352,"children":353},{},[354,367,372],{"type":30,"tag":57,"props":355,"children":356},{},[357,359,365],{"type":35,"value":358},"5 demo files in ",{"type":30,"tag":115,"props":360,"children":362},{"className":361},[],[363],{"type":35,"value":364},"_demos\u002F",{"type":35,"value":366}," (AlertConfig, AlertSentenceRow, AlertPillSelect, AlertPillNumber, AlertPillText)",{"type":30,"tag":57,"props":368,"children":369},{},[370],{"type":35,"value":371},"New \"Alert\" group in component registry with full props\u002Femits\u002Fslots documentation",{"type":30,"tag":57,"props":373,"children":374},{},[375,377,382],{"type":35,"value":376},"Pattern page at ",{"type":30,"tag":115,"props":378,"children":380},{"className":379},[],[381],{"type":35,"value":141},{"type":35,"value":383}," updated to use layer components",{"type":30,"tag":31,"props":385,"children":386},{},[387],{"type":30,"tag":101,"props":388,"children":389},{},[390],{"type":35,"value":391},"Phase 4 — Sentence abstraction:",{"type":30,"tag":53,"props":393,"children":394},{},[395,400,521,540,545],{"type":30,"tag":57,"props":396,"children":397},{},[398],{"type":35,"value":399},"Recognized pill inputs + sentence row as a generic \"sentence builder\" pattern, not alert-specific",{"type":30,"tag":57,"props":401,"children":402},{},[403,405,410,412,418,420],{"type":35,"value":404},"Moved 4 components from ",{"type":30,"tag":115,"props":406,"children":408},{"className":407},[],[409],{"type":35,"value":308},{"type":35,"value":411}," to new ",{"type":30,"tag":115,"props":413,"children":415},{"className":414},[],[416],{"type":35,"value":417},"sentence\u002F",{"type":35,"value":419}," directory in q-nuxt-layer:\n",{"type":30,"tag":53,"props":421,"children":422},{},[423,449,473,497],{"type":30,"tag":57,"props":424,"children":425},{},[426,432,433,439,441,447],{"type":30,"tag":115,"props":427,"children":429},{"className":428},[],[430],{"type":35,"value":431},"alert\u002FSentenceRow.vue",{"type":35,"value":181},{"type":30,"tag":115,"props":434,"children":436},{"className":435},[],[437],{"type":35,"value":438},"sentence\u002FRow.vue",{"type":35,"value":440}," (",{"type":30,"tag":115,"props":442,"children":444},{"className":443},[],[445],{"type":35,"value":446},"SentenceRow",{"type":35,"value":448},")",{"type":30,"tag":57,"props":450,"children":451},{},[452,458,459,465,466,472],{"type":30,"tag":115,"props":453,"children":455},{"className":454},[],[456],{"type":35,"value":457},"alert\u002FPillSelect.vue",{"type":35,"value":181},{"type":30,"tag":115,"props":460,"children":462},{"className":461},[],[463],{"type":35,"value":464},"sentence\u002FSelect.vue",{"type":35,"value":440},{"type":30,"tag":115,"props":467,"children":469},{"className":468},[],[470],{"type":35,"value":471},"SentenceSelect",{"type":35,"value":448},{"type":30,"tag":57,"props":474,"children":475},{},[476,482,483,489,490,496],{"type":30,"tag":115,"props":477,"children":479},{"className":478},[],[480],{"type":35,"value":481},"alert\u002FPillNumber.vue",{"type":35,"value":181},{"type":30,"tag":115,"props":484,"children":486},{"className":485},[],[487],{"type":35,"value":488},"sentence\u002FNumber.vue",{"type":35,"value":440},{"type":30,"tag":115,"props":491,"children":493},{"className":492},[],[494],{"type":35,"value":495},"SentenceNumber",{"type":35,"value":448},{"type":30,"tag":57,"props":498,"children":499},{},[500,506,507,513,514,520],{"type":30,"tag":115,"props":501,"children":503},{"className":502},[],[504],{"type":35,"value":505},"alert\u002FPillText.vue",{"type":35,"value":181},{"type":30,"tag":115,"props":508,"children":510},{"className":509},[],[511],{"type":35,"value":512},"sentence\u002FText.vue",{"type":35,"value":440},{"type":30,"tag":115,"props":515,"children":517},{"className":516},[],[518],{"type":35,"value":519},"SentenceText",{"type":35,"value":448},{"type":30,"tag":57,"props":522,"children":523},{},[524,530,532,538],{"type":30,"tag":115,"props":525,"children":527},{"className":526},[],[528],{"type":35,"value":529},"alert\u002FConfig.vue",{"type":35,"value":531}," stays, now uses ",{"type":30,"tag":115,"props":533,"children":535},{"className":534},[],[536],{"type":35,"value":537},"Sentence*",{"type":35,"value":539}," components",{"type":30,"tag":57,"props":541,"children":542},{},[543],{"type":35,"value":544},"Design site: new \"Sentence\" group in registry, 4 new demos, old Alert pill demos removed",{"type":30,"tag":57,"props":546,"children":547},{},[548],{"type":35,"value":549},"AlertConfig remains in its own \"Alert\" group with 1 component",{"type":30,"tag":31,"props":551,"children":552},{},[553],{"type":30,"tag":101,"props":554,"children":555},{},[556],{"type":35,"value":557},"Phase 5 — Polish:",{"type":30,"tag":53,"props":559,"children":560},{},[561,581,594,607,620],{"type":30,"tag":57,"props":562,"children":563},{},[564,566,572,574,580],{"type":35,"value":565},"AlertConfig: switched to UxToggle ",{"type":30,"tag":115,"props":567,"children":569},{"className":568},[],[570],{"type":35,"value":571},"#label",{"type":35,"value":573}," slot for clickable Active\u002FInactive label (was nested ",{"type":30,"tag":115,"props":575,"children":577},{"className":576},[],[578],{"type":35,"value":579},"\u003Clabel>",{"type":35,"value":448},{"type":30,"tag":57,"props":582,"children":583},{},[584,586,592],{"type":35,"value":585},"SentenceSelect: wrapped ",{"type":30,"tag":115,"props":587,"children":589},{"className":588},[],[590],{"type":35,"value":591},"\u003Cselect>",{"type":35,"value":593}," in relative div with UxIcon triangle overlay (commented out pending native arrow removal)",{"type":30,"tag":57,"props":595,"children":596},{},[597,599,605],{"type":35,"value":598},"Added scoped CSS for cross-browser ",{"type":30,"tag":115,"props":600,"children":602},{"className":601},[],[603],{"type":35,"value":604},"appearance: none",{"type":35,"value":606}," (native arrow persists on macOS — deferred)",{"type":30,"tag":57,"props":608,"children":609},{},[610,612,618],{"type":35,"value":611},"Removed unused ",{"type":30,"tag":115,"props":613,"children":615},{"className":614},[],[616],{"type":35,"value":617},"useConditionalSequence",{"type":35,"value":619}," composable from layer",{"type":30,"tag":57,"props":621,"children":622},{},[623,625,631,633,638],{"type":35,"value":624},"Updated UxToggle demo to show both ",{"type":30,"tag":115,"props":626,"children":628},{"className":627},[],[629],{"type":35,"value":630},"label",{"type":35,"value":632}," prop and ",{"type":30,"tag":115,"props":634,"children":636},{"className":635},[],[637],{"type":35,"value":571},{"type":35,"value":639}," slot usage",{"key":641,"title":642,"empty":17,"ast":643},"outcome","Outcome",{"type":27,"children":644},[645],{"type":30,"tag":31,"props":646,"children":647},{},[648,650,655,657,662,664,669,671,677,679,685,687,692],{"type":35,"value":649},"Sentence builder abstracted to reusable ",{"type":30,"tag":115,"props":651,"children":653},{"className":652},[],[654],{"type":35,"value":417},{"type":35,"value":656}," namespace (4 components). Alert namespace reduced to ",{"type":30,"tag":115,"props":658,"children":660},{"className":659},[],[661],{"type":35,"value":187},{"type":35,"value":663}," (1 component). Pattern documented at ",{"type":30,"tag":115,"props":665,"children":667},{"className":666},[],[668],{"type":35,"value":141},{"type":35,"value":670},". Component docs at ",{"type":30,"tag":115,"props":672,"children":674},{"className":673},[],[675],{"type":35,"value":676},"\u002Fcomponents\u002Fsentence\u002F*",{"type":35,"value":678}," and ",{"type":30,"tag":115,"props":680,"children":682},{"className":681},[],[683],{"type":35,"value":684},"\u002Fcomponents\u002Falert\u002F*",{"type":35,"value":686},". UxToggle ",{"type":30,"tag":115,"props":688,"children":690},{"className":689},[],[691],{"type":35,"value":571},{"type":35,"value":693}," slot documented.",{"key":695,"title":696,"empty":17,"ast":697},"extra","Open Issues",{"type":27,"children":698},[699],{"type":30,"tag":53,"props":700,"children":701},{},[702,714,719,724],{"type":30,"tag":57,"props":703,"children":704},{},[705,707,712],{"type":35,"value":706},"Native select arrow persists despite ",{"type":30,"tag":115,"props":708,"children":710},{"className":709},[],[711],{"type":35,"value":604},{"type":35,"value":713}," on macOS — need alternative approach",{"type":30,"tag":57,"props":715,"children":716},{},[717],{"type":35,"value":718},"What triggers the \"add new rule\" flow? Button above the card list?",{"type":30,"tag":57,"props":720,"children":721},{},[722],{"type":35,"value":723},"Does \"Mute for X time\" open a modal\u002Fpopover for duration selection?",{"type":30,"tag":57,"props":725,"children":726},{},[727],{"type":35,"value":728},"Are condition\u002Faction\u002Fthrottling types extensible (more options later)?",[],[],[732,735,739,742],{"src":18,"kind":733,"order":734},"hero",4999,{"src":736,"kind":737,"order":738},"\u002Fcycles\u002Fdesign\u002Fc20-alert-config-2.png","slice",2,{"src":740,"kind":737,"order":741},"\u002Fcycles\u002Fdesign\u002Fc20-alert-config-3.png",3,{"src":743,"kind":744,"order":745},"\u002Fcycles\u002Fdesign\u002Fc20-alert-config-full.png","full",9000,[],[],1789151089258]