[{"data":1,"prerenderedAt":1562},["ShallowReactive",2],{"$fn18Wbyz92IQxdDfWDC_FaXKDkQXjLmNMMSJxvhxMhJM":3},{"newThing":4,"project":5,"cycle":8,"sections":21,"threads":1523,"otherDocs":1524,"images":1526,"archiveItems":1551,"links":1560},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":19,"lastActivity":15,"hasPickup":16,"hasInitialPrompt":20},"c32",32,"c32.security-policy-pages","security-policy-pages","Security Policy Pages","archived","2026-09-11",false,"\u002Fcycles\u002Fdesign\u002Fc32-policy-detail.png",7,1,true,[22,36,46,85,130,181,241,1151,1272,1451,1479],{"key":23,"title":24,"empty":16,"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","The design site has a security overview page mock (c31), but security policies — the listing and detail views — are not yet represented. These pages are a core part of the security workflow and need clean reference mocks.",{"key":37,"title":38,"empty":16,"ast":39},"objective","Objective",{"type":26,"children":40},[41],{"type":29,"tag":30,"props":42,"children":43},{},[44],{"type":34,"value":45},"Add policy listing and policy detail page mocks to the design site's Pages section, driven by Figma designs.",{"key":47,"title":48,"empty":16,"ast":49},"scope","Scope",{"type":26,"children":50},[51],{"type":29,"tag":52,"props":53,"children":54},"ul",{},[55,70,75,80],{"type":29,"tag":56,"props":57,"children":58},"li",{},[59,61,68],{"type":34,"value":60},"Populate policy detail page mock from Figma ",{"type":29,"tag":62,"props":63,"children":65},"code",{"className":64},[],[66],{"type":34,"value":67},"policies\u002Fpolicy-2",{"type":34,"value":69}," frame",{"type":29,"tag":56,"props":71,"children":72},{},[73],{"type":34,"value":74},"Populate policy listing page mock (Figma frame TBD — couldn't locate node ID in this session)",{"type":29,"tag":56,"props":76,"children":77},{},[78],{"type":34,"value":79},"Maximize reuse of existing layer components",{"type":29,"tag":56,"props":81,"children":82},{},[83],{"type":34,"value":84},"Extract new components to layer only if reusable",{"key":86,"title":87,"empty":16,"ast":88},"key-changes","Key Changes",{"type":26,"children":89},[90],{"type":29,"tag":52,"props":91,"children":92},{},[93,104],{"type":29,"tag":56,"props":94,"children":95},{},[96,102],{"type":29,"tag":97,"props":98,"children":99},"strong",{},[100],{"type":34,"value":101},"Page registry:",{"type":34,"value":103}," Two entries already exist (policy-listing, policy-detail)",{"type":29,"tag":56,"props":105,"children":106},{},[107,112,114,120,122,128],{"type":29,"tag":97,"props":108,"children":109},{},[110],{"type":34,"value":111},"Stub pages:",{"type":34,"value":113}," ",{"type":29,"tag":62,"props":115,"children":117},{"className":116},[],[118],{"type":34,"value":119},"app\u002Fpages\u002Fpages\u002Fpolicy-listing.vue",{"type":34,"value":121},", ",{"type":29,"tag":62,"props":123,"children":125},{"className":124},[],[126],{"type":34,"value":127},"app\u002Fpages\u002Fpages\u002Fpolicy-detail.vue",{"type":34,"value":129}," (both created, need content)",{"key":131,"title":132,"empty":16,"ast":133},"outcome","Outcome",{"type":26,"children":134},[135],{"type":29,"tag":52,"props":136,"children":137},{},[138,149,160],{"type":29,"tag":56,"props":139,"children":140},{},[141,147],{"type":29,"tag":62,"props":142,"children":144},{"className":143},[],[145],{"type":34,"value":146},"\u002Fpages\u002Fpolicy-detail",{"type":34,"value":148}," renders a static, data-complete recreation of the policy detail page using 17 existing layer components and zero new ones",{"type":29,"tag":56,"props":150,"children":151},{},[152,158],{"type":29,"tag":62,"props":153,"children":155},{"className":154},[],[156],{"type":34,"value":157},"\u002Fpages\u002Fpolicy-listing",{"type":34,"value":159}," stub exists, pending Figma frame confirmation",{"type":29,"tag":56,"props":161,"children":162},{},[163,165,171,173,179],{"type":34,"value":164},"Built ",{"type":29,"tag":62,"props":166,"children":168},{"className":167},[],[169],{"type":34,"value":170},"\u002Ffigma-to-vue",{"type":34,"value":172}," skill (",{"type":29,"tag":62,"props":174,"children":176},{"className":175},[],[177],{"type":34,"value":178},".claude\u002Fskills\u002Ffigma-to-vue.md",{"type":34,"value":180},") — codifies the Figma→component-map→Vue workflow that emerged from this cycle's policy-detail work",{"key":182,"title":183,"empty":16,"ast":184},"extra","Figma Source",{"type":26,"children":185},[186],{"type":29,"tag":52,"props":187,"children":188},{},[189,206,231],{"type":29,"tag":56,"props":190,"children":191},{},[192,197,198,204],{"type":29,"tag":97,"props":193,"children":194},{},[195],{"type":34,"value":196},"File:",{"type":34,"value":113},{"type":29,"tag":62,"props":199,"children":201},{"className":200},[],[202],{"type":34,"value":203},"WmU8tsRKnhTEbYy0l74lKD",{"type":34,"value":205}," (app.qpoint.io---4.1.filter)",{"type":29,"tag":56,"props":207,"children":208},{},[209,214,216,222,224,229],{"type":29,"tag":97,"props":210,"children":211},{},[212],{"type":34,"value":213},"Policy detail frame:",{"type":34,"value":215}," node ",{"type":29,"tag":62,"props":217,"children":219},{"className":218},[],[220],{"type":34,"value":221},"6429:16195",{"type":34,"value":223}," (name: ",{"type":29,"tag":62,"props":225,"children":227},{"className":226},[],[228],{"type":34,"value":67},{"type":34,"value":230},")",{"type":29,"tag":56,"props":232,"children":233},{},[234,239],{"type":29,"tag":97,"props":235,"children":236},{},[237],{"type":34,"value":238},"Policy listing frame:",{"type":34,"value":240}," Not yet located — need node ID from Mark",{"key":182,"title":242,"empty":16,"ast":243},"Component Mapping — Policy Detail",{"type":26,"children":244},[245,257,264,269,377,383,388,536,542,547,668,674,679,760,766,771,894,900,913],{"type":29,"tag":30,"props":246,"children":247},{},[248,250,255],{"type":34,"value":249},"Analysis of Figma frame ",{"type":29,"tag":62,"props":251,"children":253},{"className":252},[],[254],{"type":34,"value":67},{"type":34,"value":256},". The page has 6 sections. Ignoring left nav and breadcrumb per Mark's instruction.",{"type":29,"tag":258,"props":259,"children":261},"h3",{"id":260},"_1-policy-header",[262],{"type":34,"value":263},"1. Policy Header",{"type":29,"tag":30,"props":265,"children":266},{},[267],{"type":34,"value":268},"Top card area with policy name, description, metadata, stats, and ribbon.",{"type":29,"tag":270,"props":271,"children":272},"table",{},[273,297],{"type":29,"tag":274,"props":275,"children":276},"thead",{},[277],{"type":29,"tag":278,"props":279,"children":280},"tr",{},[281,287,292],{"type":29,"tag":282,"props":283,"children":284},"th",{},[285],{"type":34,"value":286},"Element",{"type":29,"tag":282,"props":288,"children":289},{},[290],{"type":34,"value":291},"Component",{"type":29,"tag":282,"props":293,"children":294},{},[295],{"type":34,"value":296},"Status",{"type":29,"tag":298,"props":299,"children":300},"tbody",{},[301,332,354],{"type":29,"tag":278,"props":302,"children":303},{},[304,310,327],{"type":29,"tag":305,"props":306,"children":307},"td",{},[308],{"type":34,"value":309},"Card wrapper with border + ribbon",{"type":29,"tag":305,"props":311,"children":312},{},[313,319,321],{"type":29,"tag":62,"props":314,"children":316},{"className":315},[],[317],{"type":34,"value":318},"SecurityPolicySkin",{"type":34,"value":320}," + ",{"type":29,"tag":62,"props":322,"children":324},{"className":323},[],[325],{"type":34,"value":326},"SecurityPolicyRibbon",{"type":29,"tag":305,"props":328,"children":329},{},[330],{"type":34,"value":331},"Exists (c21)",{"type":29,"tag":278,"props":333,"children":334},{},[335,340,349],{"type":29,"tag":305,"props":336,"children":337},{},[338],{"type":34,"value":339},"Stats (Flows Prevented: 1.2k, Compliance: 98%, Violations: 3)",{"type":29,"tag":305,"props":341,"children":342},{},[343],{"type":29,"tag":62,"props":344,"children":346},{"className":345},[],[347],{"type":34,"value":348},"DataMetric_Simple",{"type":29,"tag":305,"props":350,"children":351},{},[352],{"type":34,"value":353},"Exists",{"type":29,"tag":278,"props":355,"children":356},{},[357,362,373],{"type":29,"tag":305,"props":358,"children":359},{},[360],{"type":34,"value":361},"Metadata (Last Updated: 2026-01-15, Regulations: CCPA, state privacy Laws)",{"type":29,"tag":305,"props":363,"children":364},{},[365,371],{"type":29,"tag":62,"props":366,"children":368},{"className":367},[],[369],{"type":34,"value":370},"DataKeyVal",{"type":34,"value":372}," or plain text",{"type":29,"tag":305,"props":374,"children":375},{},[376],{"type":34,"value":353},{"type":29,"tag":258,"props":378,"children":380},{"id":379},"_2-rules",[381],{"type":34,"value":382},"2. Rules",{"type":29,"tag":30,"props":384,"children":385},{},[386],{"type":34,"value":387},"Sentence-builder-style rule rows with tag pill selects.",{"type":29,"tag":270,"props":389,"children":390},{},[391,409],{"type":29,"tag":274,"props":392,"children":393},{},[394],{"type":29,"tag":278,"props":395,"children":396},{},[397,401,405],{"type":29,"tag":282,"props":398,"children":399},{},[400],{"type":34,"value":286},{"type":29,"tag":282,"props":402,"children":403},{},[404],{"type":34,"value":291},{"type":29,"tag":282,"props":406,"children":407},{},[408],{"type":34,"value":296},{"type":29,"tag":298,"props":410,"children":411},{},[412,430,452,473,494,515],{"type":29,"tag":278,"props":413,"children":414},{},[415,420,425],{"type":29,"tag":305,"props":416,"children":417},{},[418],{"type":34,"value":419},"Section header \"Rules\" with \"+ Add\"",{"type":29,"tag":305,"props":421,"children":422},{},[423],{"type":34,"value":424},"Hairline + bold text + add pattern",{"type":29,"tag":305,"props":426,"children":427},{},[428],{"type":34,"value":429},"Existing pattern",{"type":29,"tag":278,"props":431,"children":432},{},[433,438,447],{"type":29,"tag":305,"props":434,"children":435},{},[436],{"type":34,"value":437},"Tag pills with dropdowns (allowed_regions, any of, amsterdam-2, london-1)",{"type":29,"tag":305,"props":439,"children":440},{},[441],{"type":29,"tag":62,"props":442,"children":444},{"className":443},[],[445],{"type":34,"value":446},"SentenceSelect",{"type":29,"tag":305,"props":448,"children":449},{},[450],{"type":34,"value":451},"Exists (c20)",{"type":29,"tag":278,"props":453,"children":454},{},[455,460,469],{"type":29,"tag":305,"props":456,"children":457},{},[458],{"type":34,"value":459},"Row of pills per rule",{"type":29,"tag":305,"props":461,"children":462},{},[463],{"type":29,"tag":62,"props":464,"children":466},{"className":465},[],[467],{"type":34,"value":468},"SentenceRow",{"type":29,"tag":305,"props":470,"children":471},{},[472],{"type":34,"value":451},{"type":29,"tag":278,"props":474,"children":475},{},[476,481,490],{"type":29,"tag":305,"props":477,"children":478},{},[479],{"type":34,"value":480},"Close\u002FX on each rule row",{"type":29,"tag":305,"props":482,"children":483},{},[484],{"type":29,"tag":62,"props":485,"children":487},{"className":486},[],[488],{"type":34,"value":489},"UxClose",{"type":29,"tag":305,"props":491,"children":492},{},[493],{"type":34,"value":353},{"type":29,"tag":278,"props":495,"children":496},{},[497,502,511],{"type":29,"tag":305,"props":498,"children":499},{},[500],{"type":34,"value":501},"Plus button to add tag",{"type":29,"tag":305,"props":503,"children":504},{},[505],{"type":29,"tag":62,"props":506,"children":508},{"className":507},[],[509],{"type":34,"value":510},"IconPlus",{"type":29,"tag":305,"props":512,"children":513},{},[514],{"type":34,"value":353},{"type":29,"tag":278,"props":516,"children":517},{},[518,523,532],{"type":29,"tag":305,"props":519,"children":520},{},[521],{"type":34,"value":522},"\"Auto Enforce Policy\" toggle + \"Learn more\" link",{"type":29,"tag":305,"props":524,"children":525},{},[526],{"type":29,"tag":62,"props":527,"children":529},{"className":528},[],[530],{"type":34,"value":531},"UxToggle",{"type":29,"tag":305,"props":533,"children":534},{},[535],{"type":34,"value":353},{"type":29,"tag":258,"props":537,"children":539},{"id":538},"_3-violations",[540],{"type":34,"value":541},"3. Violations",{"type":29,"tag":30,"props":543,"children":544},{},[545],{"type":34,"value":546},"Table of policy violations + map visualization.",{"type":29,"tag":270,"props":548,"children":549},{},[550,568],{"type":29,"tag":274,"props":551,"children":552},{},[553],{"type":29,"tag":278,"props":554,"children":555},{},[556,560,564],{"type":29,"tag":282,"props":557,"children":558},{},[559],{"type":34,"value":286},{"type":29,"tag":282,"props":561,"children":562},{},[563],{"type":34,"value":291},{"type":29,"tag":282,"props":565,"children":566},{},[567],{"type":34,"value":296},{"type":29,"tag":298,"props":569,"children":570},{},[571,589,610,632,650],{"type":29,"tag":278,"props":572,"children":573},{},[574,579,584],{"type":29,"tag":305,"props":575,"children":576},{},[577],{"type":34,"value":578},"Section title \"Violations\"",{"type":29,"tag":305,"props":580,"children":581},{},[582],{"type":34,"value":583},"Hairline + bold text",{"type":29,"tag":305,"props":585,"children":586},{},[587],{"type":34,"value":588},"Pattern",{"type":29,"tag":278,"props":590,"children":591},{},[592,597,606],{"type":29,"tag":305,"props":593,"children":594},{},[595],{"type":34,"value":596},"Table (Source, Dataflow, Destination, Violation, Time)",{"type":29,"tag":305,"props":598,"children":599},{},[600],{"type":29,"tag":62,"props":601,"children":603},{"className":602},[],[604],{"type":34,"value":605},"UxTableList",{"type":29,"tag":305,"props":607,"children":608},{},[609],{"type":34,"value":353},{"type":29,"tag":278,"props":611,"children":612},{},[613,618,627],{"type":29,"tag":305,"props":614,"children":615},{},[616],{"type":34,"value":617},"Dataflow column (●--{PII}-->)",{"type":29,"tag":305,"props":619,"children":620},{},[621],{"type":29,"tag":62,"props":622,"children":624},{"className":623},[],[625],{"type":34,"value":626},"SecurityDataFlow",{"type":29,"tag":305,"props":628,"children":629},{},[630],{"type":34,"value":631},"Exists (c19)",{"type":29,"tag":278,"props":633,"children":634},{},[635,640,645],{"type":29,"tag":305,"props":636,"children":637},{},[638],{"type":34,"value":639},"Map visualization",{"type":29,"tag":305,"props":641,"children":642},{},[643],{"type":34,"value":644},"Image placeholder",{"type":29,"tag":305,"props":646,"children":647},{},[648],{"type":34,"value":649},"Not a component — static mock image",{"type":29,"tag":278,"props":651,"children":652},{},[653,658,663],{"type":29,"tag":305,"props":654,"children":655},{},[656],{"type":34,"value":657},"\"Disallowed Data Flows \u002F PII Data found leaving EU\" callout",{"type":29,"tag":305,"props":659,"children":660},{},[661],{"type":34,"value":662},"Positioned text overlay on map",{"type":29,"tag":305,"props":664,"children":665},{},[666],{"type":34,"value":667},"Custom layout",{"type":29,"tag":258,"props":669,"children":671},{"id":670},"_4-data-masking",[672],{"type":34,"value":673},"4. Data Masking",{"type":29,"tag":30,"props":675,"children":676},{},[677],{"type":34,"value":678},"Three toggles + a data transformation visualization.",{"type":29,"tag":270,"props":680,"children":681},{},[682,700],{"type":29,"tag":274,"props":683,"children":684},{},[685],{"type":29,"tag":278,"props":686,"children":687},{},[688,692,696],{"type":29,"tag":282,"props":689,"children":690},{},[691],{"type":34,"value":286},{"type":29,"tag":282,"props":693,"children":694},{},[695],{"type":34,"value":291},{"type":29,"tag":282,"props":697,"children":698},{},[699],{"type":34,"value":296},{"type":29,"tag":298,"props":701,"children":702},{},[703,719,739],{"type":29,"tag":278,"props":704,"children":705},{},[706,711,715],{"type":29,"tag":305,"props":707,"children":708},{},[709],{"type":34,"value":710},"Section title",{"type":29,"tag":305,"props":712,"children":713},{},[714],{"type":34,"value":583},{"type":29,"tag":305,"props":716,"children":717},{},[718],{"type":34,"value":588},{"type":29,"tag":278,"props":720,"children":721},{},[722,727,735],{"type":29,"tag":305,"props":723,"children":724},{},[725],{"type":34,"value":726},"Three toggles (Enable Data Mask, Anonymize Data, Redact Data)",{"type":29,"tag":305,"props":728,"children":729},{},[730],{"type":29,"tag":62,"props":731,"children":733},{"className":732},[],[734],{"type":34,"value":531},{"type":29,"tag":305,"props":736,"children":737},{},[738],{"type":34,"value":353},{"type":29,"tag":278,"props":740,"children":741},{},[742,747,755],{"type":29,"tag":305,"props":743,"children":744},{},[745],{"type":34,"value":746},"Masking visualization (William Obrien → John Doe → *** ******)",{"type":29,"tag":305,"props":748,"children":749},{},[750],{"type":29,"tag":97,"props":751,"children":752},{},[753],{"type":34,"value":754},"New — mock only",{"type":29,"tag":305,"props":756,"children":757},{},[758],{"type":34,"value":759},"Three-column text with arrow separators. Not complex enough for a component — inline layout in the mock.",{"type":29,"tag":258,"props":761,"children":763},{"id":762},"_5-policy-whitelist",[764],{"type":34,"value":765},"5. Policy Whitelist",{"type":29,"tag":30,"props":767,"children":768},{},[769],{"type":34,"value":770},"Three columns of whitelisted endpoints with add\u002Fremove.",{"type":29,"tag":270,"props":772,"children":773},{},[774,792],{"type":29,"tag":274,"props":775,"children":776},{},[777],{"type":29,"tag":278,"props":778,"children":779},{},[780,784,788],{"type":29,"tag":282,"props":781,"children":782},{},[783],{"type":34,"value":286},{"type":29,"tag":282,"props":785,"children":786},{},[787],{"type":34,"value":291},{"type":29,"tag":282,"props":789,"children":790},{},[791],{"type":34,"value":296},{"type":29,"tag":298,"props":793,"children":794},{},[795,811,827,851,874],{"type":29,"tag":278,"props":796,"children":797},{},[798,803,807],{"type":29,"tag":305,"props":799,"children":800},{},[801],{"type":34,"value":802},"Section title \"Policy Whitelist\"",{"type":29,"tag":305,"props":804,"children":805},{},[806],{"type":34,"value":583},{"type":29,"tag":305,"props":808,"children":809},{},[810],{"type":34,"value":588},{"type":29,"tag":278,"props":812,"children":813},{},[814,819,824],{"type":29,"tag":305,"props":815,"children":816},{},[817],{"type":34,"value":818},"Three columns: Apps\u002FServices, Datastores, Vendors",{"type":29,"tag":305,"props":820,"children":821},{},[822],{"type":34,"value":823},"Grid layout",{"type":29,"tag":305,"props":825,"children":826},{},[],{"type":29,"tag":278,"props":828,"children":829},{},[830,835,840],{"type":29,"tag":305,"props":831,"children":832},{},[833],{"type":34,"value":834},"Column headers with \"+ Add\"",{"type":29,"tag":305,"props":836,"children":837},{},[838],{"type":34,"value":839},"Small section header + add pattern",{"type":29,"tag":305,"props":841,"children":842},{},[843,845],{"type":34,"value":844},"Pattern matches ",{"type":29,"tag":62,"props":846,"children":848},{"className":847},[],[849],{"type":34,"value":850},"FormSmallHeader",{"type":29,"tag":278,"props":852,"children":853},{},[854,859,869],{"type":29,"tag":305,"props":855,"children":856},{},[857],{"type":34,"value":858},"Endpoint items (e.g., \"secondary.feeder\", \"fake-data-dev-db\") with X remove",{"type":29,"tag":305,"props":860,"children":861},{},[862,864],{"type":34,"value":863},"Text + ",{"type":29,"tag":62,"props":865,"children":867},{"className":866},[],[868],{"type":34,"value":489},{"type":29,"tag":305,"props":870,"children":871},{},[872],{"type":34,"value":873},"Simple inline row",{"type":29,"tag":278,"props":875,"children":876},{},[877,882,890],{"type":29,"tag":305,"props":878,"children":879},{},[880],{"type":34,"value":881},"Ribbon decorations on some columns",{"type":29,"tag":305,"props":883,"children":884},{},[885],{"type":29,"tag":62,"props":886,"children":888},{"className":887},[],[889],{"type":34,"value":326},{"type":29,"tag":305,"props":891,"children":892},{},[893],{"type":34,"value":353},{"type":29,"tag":258,"props":895,"children":897},{"id":896},"_6-notifications",[898],{"type":34,"value":899},"6. Notifications",{"type":29,"tag":30,"props":901,"children":902},{},[903,905,911],{"type":34,"value":904},"Multiple notification configs using sentence builder pattern. This is essentially the ",{"type":29,"tag":62,"props":906,"children":908},{"className":907},[],[909],{"type":34,"value":910},"AlertConfig",{"type":34,"value":912}," pattern (c20) repeated with variations.",{"type":29,"tag":270,"props":914,"children":915},{},[916,934],{"type":29,"tag":274,"props":917,"children":918},{},[919],{"type":29,"tag":278,"props":920,"children":921},{},[922,926,930],{"type":29,"tag":282,"props":923,"children":924},{},[925],{"type":34,"value":286},{"type":29,"tag":282,"props":927,"children":928},{},[929],{"type":34,"value":291},{"type":29,"tag":282,"props":931,"children":932},{},[933],{"type":34,"value":296},{"type":29,"tag":298,"props":935,"children":936},{},[937,954,974,1007,1040,1072,1092,1113,1131],{"type":29,"tag":278,"props":938,"children":939},{},[940,945,950],{"type":29,"tag":305,"props":941,"children":942},{},[943],{"type":34,"value":944},"Section title \"Notifications\" with \"+ Add\"",{"type":29,"tag":305,"props":946,"children":947},{},[948],{"type":34,"value":949},"Hairline + bold text + add",{"type":29,"tag":305,"props":951,"children":952},{},[953],{"type":34,"value":588},{"type":29,"tag":278,"props":955,"children":956},{},[957,962,970],{"type":29,"tag":305,"props":958,"children":959},{},[960],{"type":34,"value":961},"Active\u002FInactive toggle per notification",{"type":29,"tag":305,"props":963,"children":964},{},[965],{"type":29,"tag":62,"props":966,"children":968},{"className":967},[],[969],{"type":34,"value":531},{"type":29,"tag":305,"props":971,"children":972},{},[973],{"type":34,"value":353},{"type":29,"tag":278,"props":975,"children":976},{},[977,982,1003],{"type":29,"tag":305,"props":978,"children":979},{},[980],{"type":34,"value":981},"Condition row (for every violation \u002F if total violations exceed 100...)",{"type":29,"tag":305,"props":983,"children":984},{},[985,990,991,996,997],{"type":29,"tag":62,"props":986,"children":988},{"className":987},[],[989],{"type":34,"value":468},{"type":34,"value":320},{"type":29,"tag":62,"props":992,"children":994},{"className":993},[],[995],{"type":34,"value":446},{"type":34,"value":320},{"type":29,"tag":62,"props":998,"children":1000},{"className":999},[],[1001],{"type":34,"value":1002},"SentenceNumber",{"type":29,"tag":305,"props":1004,"children":1005},{},[1006],{"type":34,"value":451},{"type":29,"tag":278,"props":1008,"children":1009},{},[1010,1015,1036],{"type":29,"tag":305,"props":1011,"children":1012},{},[1013],{"type":34,"value":1014},"Action row (Send HTTP Request, POST, http:\u002F\u002F \u002F send a message, to Slack)",{"type":29,"tag":305,"props":1016,"children":1017},{},[1018,1023,1024,1029,1030],{"type":29,"tag":62,"props":1019,"children":1021},{"className":1020},[],[1022],{"type":34,"value":468},{"type":34,"value":320},{"type":29,"tag":62,"props":1025,"children":1027},{"className":1026},[],[1028],{"type":34,"value":446},{"type":34,"value":320},{"type":29,"tag":62,"props":1031,"children":1033},{"className":1032},[],[1034],{"type":34,"value":1035},"SentenceText",{"type":29,"tag":305,"props":1037,"children":1038},{},[1039],{"type":34,"value":451},{"type":29,"tag":278,"props":1041,"children":1042},{},[1043,1048,1068],{"type":29,"tag":305,"props":1044,"children":1045},{},[1046],{"type":34,"value":1047},"Throttling row (No Throttling \u002F collate & summarize, send no more than...)",{"type":29,"tag":305,"props":1049,"children":1050},{},[1051,1056,1057,1062,1063],{"type":29,"tag":62,"props":1052,"children":1054},{"className":1053},[],[1055],{"type":34,"value":468},{"type":34,"value":320},{"type":29,"tag":62,"props":1058,"children":1060},{"className":1059},[],[1061],{"type":34,"value":446},{"type":34,"value":320},{"type":29,"tag":62,"props":1064,"children":1066},{"className":1065},[],[1067],{"type":34,"value":1002},{"type":29,"tag":305,"props":1069,"children":1070},{},[1071],{"type":34,"value":451},{"type":29,"tag":278,"props":1073,"children":1074},{},[1075,1080,1088],{"type":29,"tag":305,"props":1076,"children":1077},{},[1078],{"type":34,"value":1079},"Close\u002Fremove button per notification",{"type":29,"tag":305,"props":1081,"children":1082},{},[1083],{"type":29,"tag":62,"props":1084,"children":1086},{"className":1085},[],[1087],{"type":34,"value":489},{"type":29,"tag":305,"props":1089,"children":1090},{},[1091],{"type":34,"value":353},{"type":29,"tag":278,"props":1093,"children":1094},{},[1095,1100,1109],{"type":29,"tag":305,"props":1096,"children":1097},{},[1098],{"type":34,"value":1099},"\"Mute for X time\" \u002F \"Unmute\" buttons",{"type":29,"tag":305,"props":1101,"children":1102},{},[1103],{"type":29,"tag":62,"props":1104,"children":1106},{"className":1105},[],[1107],{"type":34,"value":1108},"UxButton",{"type":29,"tag":305,"props":1110,"children":1111},{},[1112],{"type":34,"value":353},{"type":29,"tag":278,"props":1114,"children":1115},{},[1116,1121,1126],{"type":29,"tag":305,"props":1117,"children":1118},{},[1119],{"type":34,"value":1120},"\"Active - Muted\" state with \"Muted for the next 2 days\"",{"type":29,"tag":305,"props":1122,"children":1123},{},[1124],{"type":34,"value":1125},"Text + icon indicator",{"type":29,"tag":305,"props":1127,"children":1128},{},[1129],{"type":34,"value":1130},"Inline layout",{"type":29,"tag":278,"props":1132,"children":1133},{},[1134,1139,1147],{"type":29,"tag":305,"props":1135,"children":1136},{},[1137],{"type":34,"value":1138},"\"Mute All Notifications for X time\" button",{"type":29,"tag":305,"props":1140,"children":1141},{},[1142],{"type":29,"tag":62,"props":1143,"children":1145},{"className":1144},[],[1146],{"type":34,"value":1108},{"type":29,"tag":305,"props":1148,"children":1149},{},[1150],{"type":34,"value":353},{"key":182,"title":1152,"empty":16,"ast":1153},"Component Mapping — Policy Listing",{"type":26,"children":1154},[1155,1181,1262],{"type":29,"tag":30,"props":1156,"children":1157},{},[1158,1163,1165,1171,1173,1179],{"type":29,"tag":97,"props":1159,"children":1160},{},[1161],{"type":34,"value":1162},"Figma frame not yet located.",{"type":34,"value":1164}," Based on existing ",{"type":29,"tag":62,"props":1166,"children":1168},{"className":1167},[],[1169],{"type":34,"value":1170},"SecurityPolicyCard",{"type":34,"value":1172}," (extracted in c15 from the same Figma file, node ",{"type":29,"tag":62,"props":1174,"children":1176},{"className":1175},[],[1177],{"type":34,"value":1178},"6419:28548",{"type":34,"value":1180},"), the listing page likely uses:",{"type":29,"tag":270,"props":1182,"children":1183},{},[1184,1202],{"type":29,"tag":274,"props":1185,"children":1186},{},[1187],{"type":29,"tag":278,"props":1188,"children":1189},{},[1190,1194,1198],{"type":29,"tag":282,"props":1191,"children":1192},{},[1193],{"type":34,"value":286},{"type":29,"tag":282,"props":1195,"children":1196},{},[1197],{"type":34,"value":291},{"type":29,"tag":282,"props":1199,"children":1200},{},[1201],{"type":34,"value":296},{"type":29,"tag":298,"props":1203,"children":1204},{},[1205,1226,1246],{"type":29,"tag":278,"props":1206,"children":1207},{},[1208,1213,1221],{"type":29,"tag":305,"props":1209,"children":1210},{},[1211],{"type":34,"value":1212},"Grid\u002Flist of policy cards",{"type":29,"tag":305,"props":1214,"children":1215},{},[1216],{"type":29,"tag":62,"props":1217,"children":1219},{"className":1218},[],[1220],{"type":34,"value":1170},{"type":29,"tag":305,"props":1222,"children":1223},{},[1224],{"type":34,"value":1225},"Exists (c15) — 4 sizes, 2 states (cool\u002Fhot), stats + spark",{"type":29,"tag":278,"props":1227,"children":1228},{},[1229,1234,1242],{"type":29,"tag":305,"props":1230,"children":1231},{},[1232],{"type":34,"value":1233},"Card wrapper",{"type":29,"tag":305,"props":1235,"children":1236},{},[1237],{"type":29,"tag":62,"props":1238,"children":1240},{"className":1239},[],[1241],{"type":34,"value":318},{"type":29,"tag":305,"props":1243,"children":1244},{},[1245],{"type":34,"value":331},{"type":29,"tag":278,"props":1247,"children":1248},{},[1249,1254,1259],{"type":29,"tag":305,"props":1250,"children":1251},{},[1252],{"type":34,"value":1253},"Section headers",{"type":29,"tag":305,"props":1255,"children":1256},{},[1257],{"type":34,"value":1258},"Existing patterns",{"type":29,"tag":305,"props":1260,"children":1261},{},[],{"type":29,"tag":30,"props":1263,"children":1264},{},[1265,1270],{"type":29,"tag":97,"props":1266,"children":1267},{},[1268],{"type":34,"value":1269},"Next step:",{"type":34,"value":1271}," Get the \"policies\" list frame node ID from Mark to confirm layout and any additional elements.",{"key":182,"title":1273,"empty":16,"ast":1274},"Summary",{"type":26,"children":1275},[1276,1286,1441],{"type":29,"tag":30,"props":1277,"children":1278},{},[1279,1284],{"type":29,"tag":97,"props":1280,"children":1281},{},[1282],{"type":34,"value":1283},"Heavy reuse",{"type":34,"value":1285}," — the vast majority maps to existing layer components:",{"type":29,"tag":52,"props":1287,"children":1288},{},[1289,1335,1367,1393,1413,1427],{"type":29,"tag":56,"props":1290,"children":1291},{},[1292,1297,1298,1303,1304,1309,1310,1315,1316,1321,1322,1328,1329],{"type":29,"tag":97,"props":1293,"children":1294},{},[1295],{"type":34,"value":1296},"Security family (6):",{"type":34,"value":113},{"type":29,"tag":62,"props":1299,"children":1301},{"className":1300},[],[1302],{"type":34,"value":318},{"type":34,"value":121},{"type":29,"tag":62,"props":1305,"children":1307},{"className":1306},[],[1308],{"type":34,"value":326},{"type":34,"value":121},{"type":29,"tag":62,"props":1311,"children":1313},{"className":1312},[],[1314],{"type":34,"value":1170},{"type":34,"value":121},{"type":29,"tag":62,"props":1317,"children":1319},{"className":1318},[],[1320],{"type":34,"value":626},{"type":34,"value":121},{"type":29,"tag":62,"props":1323,"children":1325},{"className":1324},[],[1326],{"type":34,"value":1327},"SecurityViolationsTable",{"type":34,"value":121},{"type":29,"tag":62,"props":1330,"children":1332},{"className":1331},[],[1333],{"type":34,"value":1334},"SecuritySeverity",{"type":29,"tag":56,"props":1336,"children":1337},{},[1338,1343,1344,1349,1350,1355,1356,1361,1362],{"type":29,"tag":97,"props":1339,"children":1340},{},[1341],{"type":34,"value":1342},"Sentence builder (4):",{"type":34,"value":113},{"type":29,"tag":62,"props":1345,"children":1347},{"className":1346},[],[1348],{"type":34,"value":468},{"type":34,"value":121},{"type":29,"tag":62,"props":1351,"children":1353},{"className":1352},[],[1354],{"type":34,"value":446},{"type":34,"value":121},{"type":29,"tag":62,"props":1357,"children":1359},{"className":1358},[],[1360],{"type":34,"value":1002},{"type":34,"value":121},{"type":29,"tag":62,"props":1363,"children":1365},{"className":1364},[],[1366],{"type":34,"value":1035},{"type":29,"tag":56,"props":1368,"children":1369},{},[1370,1375,1376,1381,1382,1387,1388],{"type":29,"tag":97,"props":1371,"children":1372},{},[1373],{"type":34,"value":1374},"Core UX (3):",{"type":34,"value":113},{"type":29,"tag":62,"props":1377,"children":1379},{"className":1378},[],[1380],{"type":34,"value":531},{"type":34,"value":121},{"type":29,"tag":62,"props":1383,"children":1385},{"className":1384},[],[1386],{"type":34,"value":489},{"type":34,"value":121},{"type":29,"tag":62,"props":1389,"children":1391},{"className":1390},[],[1392],{"type":34,"value":1108},{"type":29,"tag":56,"props":1394,"children":1395},{},[1396,1401,1402,1407,1408],{"type":29,"tag":97,"props":1397,"children":1398},{},[1399],{"type":34,"value":1400},"Data (2):",{"type":34,"value":113},{"type":29,"tag":62,"props":1403,"children":1405},{"className":1404},[],[1406],{"type":34,"value":348},{"type":34,"value":121},{"type":29,"tag":62,"props":1409,"children":1411},{"className":1410},[],[1412],{"type":34,"value":370},{"type":29,"tag":56,"props":1414,"children":1415},{},[1416,1421,1422],{"type":29,"tag":97,"props":1417,"children":1418},{},[1419],{"type":34,"value":1420},"Table (1):",{"type":34,"value":113},{"type":29,"tag":62,"props":1423,"children":1425},{"className":1424},[],[1426],{"type":34,"value":605},{"type":29,"tag":56,"props":1428,"children":1429},{},[1430,1435,1436],{"type":29,"tag":97,"props":1431,"children":1432},{},[1433],{"type":34,"value":1434},"Icons (1):",{"type":34,"value":113},{"type":29,"tag":62,"props":1437,"children":1439},{"className":1438},[],[1440],{"type":34,"value":510},{"type":29,"tag":30,"props":1442,"children":1443},{},[1444,1449],{"type":29,"tag":97,"props":1445,"children":1446},{},[1447],{"type":34,"value":1448},"Nothing new needed for the layer.",{"type":34,"value":1450}," The data masking visualization and whitelist item rows are simple enough to be inline layout in the mock page — no extraction warranted.",{"key":182,"title":1452,"empty":16,"ast":1453},"Build Order",{"type":26,"children":1454},[1455],{"type":29,"tag":1456,"props":1457,"children":1458},"ol",{},[1459,1469],{"type":29,"tag":56,"props":1460,"children":1461},{},[1462,1467],{"type":29,"tag":97,"props":1463,"children":1464},{},[1465],{"type":34,"value":1466},"Policy detail first",{"type":34,"value":1468}," — more complex, better test of component reuse",{"type":29,"tag":56,"props":1470,"children":1471},{},[1472,1477],{"type":29,"tag":97,"props":1473,"children":1474},{},[1475],{"type":34,"value":1476},"Policy listing second",{"type":34,"value":1478}," — pending Figma frame confirmation",{"key":182,"title":1480,"empty":16,"ast":1481},"Learnings",{"type":26,"children":1482},[1483],{"type":29,"tag":52,"props":1484,"children":1485},{},[1486,1496,1513],{"type":29,"tag":56,"props":1487,"children":1488},{},[1489,1494],{"type":29,"tag":97,"props":1490,"children":1491},{},[1492],{"type":34,"value":1493},"Bob-wire vs design site:",{"type":34,"value":1495}," Bob-wire's pipeline (brief→build→review→iterate) solves exploration — \"what should this look like?\" The design site's page mocks solve transcription — \"replicate this Figma frame with real components.\" Different starting points, different tools. When you have a Figma design, bob-wire is redundant.",{"type":29,"tag":56,"props":1497,"children":1498},{},[1499,1504,1506,1511],{"type":29,"tag":97,"props":1500,"children":1501},{},[1502],{"type":34,"value":1503},"Component detection is the skill:",{"type":34,"value":1505}," The hard part isn't writing the Vue file — it's mapping every Figma element to the right existing component. The component map table (Step 2 of ",{"type":29,"tag":62,"props":1507,"children":1509},{"className":1508},[],[1510],{"type":34,"value":170},{"type":34,"value":1512},") is the real deliverable; the code follows mechanically from it.",{"type":29,"tag":56,"props":1514,"children":1515},{},[1516,1521],{"type":29,"tag":97,"props":1517,"children":1518},{},[1519],{"type":34,"value":1520},"126 components cover most things:",{"type":34,"value":1522}," The policy detail page used 17 existing components across 6 families with zero new extractions needed. The layer is more complete than it feels.",[],[1525],"initial-prompt.md",[1527,1532,1534,1538,1541,1544,1548],{"src":1528,"kind":1529,"order":1530,"caption":1531},"\u002Fcycles\u002Fdesign\u002Fc32-policy-listing.png","hero",17,"Security policy listing with status and enforcement summary",{"src":17,"kind":1529,"order":1533},4999,{"src":1535,"kind":1536,"order":1537},"\u002Fcycles\u002Fdesign\u002Fc32-policy-detail-2.png","slice",2,{"src":1539,"kind":1536,"order":1540},"\u002Fcycles\u002Fdesign\u002Fc32-policy-detail-3.png",3,{"src":1542,"kind":1536,"order":1543},"\u002Fcycles\u002Fdesign\u002Fc32-policy-detail-4.png",4,{"src":1545,"kind":1546,"order":1547},"\u002Fcycles\u002Fdesign\u002Fc32-policy-detail-full.png","full",9000,{"src":1549,"kind":1546,"order":1550},"\u002Fcycles\u002Fdesign\u002Fc32-policy-listing-full.png",9017,[1552],{"path":1553,"title":1554,"image":17,"gallery":1555},"archive\u002F2026-q3\u002F2026-03-19-c32-policy-detail","Policy Detail — Seventeen Components, Zero New",[1556,1558],{"src":17,"alt":1557},"The policy-detail mock.",{"src":1545,"alt":1559},"Policy Detail — full page",[1561],{"route":157,"href":157},1789151086748]