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