[{"data":1,"prerenderedAt":424},["ShallowReactive",2],{"$fM3P7koXtrs_uv7MPyiAQzMAEVqNLdaRBfONpE4d_UQU":3},{"newThing":4,"project":5,"cycle":8,"sections":22,"threads":404,"otherDocs":405,"images":407,"archiveItems":422,"links":423},null,{"id":6,"label":7,"liveBase":4},"design","Design",{"id":9,"num":10,"dir":11,"name":12,"title":12,"focus":13,"status":14,"statusNote":4,"created":15,"completed":4,"mode":4,"recordless":16,"thumbnail":17,"imageCount":18,"artifactCount":19,"lastActivity":20,"hasPickup":16,"hasInitialPrompt":21},"c57",57,"c57.pixel-pawns","pixel-pawns","Build the agent pawn state system from the first real Illustrator pawn art","archived","2026-07-26",false,"\u002Fcycles\u002Fdesign\u002Fc57-agent-pawn.png",4,1,"2026-09-11",true,[23,54,101,162,336],{"key":24,"title":25,"empty":16,"ast":26},"why","Why",{"type":27,"children":28},"root",[29],{"type":30,"tag":31,"props":32,"children":33},"element","p",{},[34,37,44,46,52],{"type":35,"value":36},"text","c47 produced the pixel-pawns design brief, and PawnAgent landed in the layer as a first-of-family scaffold with a single placeholder SVG. The first real art exports now exist (",{"type":30,"tag":38,"props":39,"children":41},"code",{"className":40},[],[42],{"type":35,"value":43},"q-nuxt-layer\u002Fassets\u002Fsvgs\u002Fpixel-pawns\u002F",{"type":35,"value":45},"), and consumers need a pawn that communicates agent status at a glance — working, idle, errored, needs-input — as shown in the reference screenshot (",{"type":30,"tag":38,"props":47,"children":49},{"className":48},[],[50],{"type":35,"value":51},"inbox\u002FScreenshot 2026-07-26 at 12.10.41 PM.png",{"type":35,"value":53},").",{"key":55,"title":56,"empty":16,"ast":57},"objective","Objective",{"type":27,"children":58},[59],{"type":30,"tag":31,"props":60,"children":61},{},[62,64,70,72,78,79,85,86,92,93,99],{"type":35,"value":63},"The agent pawn renders all five states (",{"type":30,"tag":38,"props":65,"children":67},{"className":66},[],[68],{"type":35,"value":69},"working",{"type":35,"value":71},", ",{"type":30,"tag":38,"props":73,"children":75},{"className":74},[],[76],{"type":35,"value":77},"idle",{"type":35,"value":71},{"type":30,"tag":38,"props":80,"children":82},{"className":81},[],[83],{"type":35,"value":84},"errored",{"type":35,"value":71},{"type":30,"tag":38,"props":87,"children":89},{"className":88},[],[90],{"type":35,"value":91},"needs-input",{"type":35,"value":71},{"type":30,"tag":38,"props":94,"children":96},{"className":95},[],[97],{"type":35,"value":98},"angel",{"type":35,"value":100},") by composing a base body (awake or sleeping) with decoration SVGs floated above the head. States are developed and visually tuned on the design site's component page. (Originally scoped static-only; the working state's binary decoration was later rebuilt as an animated component within this cycle.)",{"key":102,"title":103,"empty":16,"ast":104},"scope","Scope",{"type":27,"children":105},[106],{"type":30,"tag":107,"props":108,"children":109},"ul",{},[110,122,140,151],{"type":30,"tag":111,"props":112,"children":113},"li",{},[114,120],{"type":30,"tag":38,"props":115,"children":117},{"className":116},[],[118],{"type":35,"value":119},"q-nuxt-layer\u002Fcomponents\u002Fagent\u002FPawn.vue",{"type":35,"value":121}," — state → body\u002Fdecoration lookup, decoration overlays, above-head slot",{"type":30,"tag":111,"props":123,"children":124},{},[125,130,132,138],{"type":30,"tag":38,"props":126,"children":128},{"className":127},[],[129],{"type":35,"value":43},{"type":35,"value":131}," — new art home (old ",{"type":30,"tag":38,"props":133,"children":135},{"className":134},[],[136],{"type":35,"value":137},"assets\u002Fpawns\u002F",{"type":35,"value":139}," tree deleted)",{"type":30,"tag":111,"props":141,"children":142},{},[143,149],{"type":30,"tag":38,"props":144,"children":146},{"className":145},[],[147],{"type":35,"value":148},"app\u002Fpages\u002Fcomponents\u002F_demos\u002FAgentPawn.vue",{"type":35,"value":150}," — states row, scenarios, usage-context example",{"type":30,"tag":111,"props":152,"children":153},{},[154,160],{"type":30,"tag":38,"props":155,"children":157},{"className":156},[],[158],{"type":35,"value":159},"app\u002Fdata\u002Fcomponent-registry.ts",{"type":35,"value":161}," — AgentPawn entry",{"key":163,"title":164,"empty":16,"ast":165},"key-changes","Key Changes",{"type":27,"children":166},[167],{"type":30,"tag":107,"props":168,"children":169},{},[170,191,224,229,248,253,258,310],{"type":30,"tag":111,"props":171,"children":172},{},[173,175,181,183,189],{"type":35,"value":174},"Reworked the agent pawn: composes body + decoration per state from ",{"type":30,"tag":38,"props":176,"children":178},{"className":177},[],[179],{"type":35,"value":180},"assets\u002Fsvgs\u002Fpixel-pawns\u002F",{"type":35,"value":182}," lookup tables (",{"type":30,"tag":38,"props":184,"children":186},{"className":185},[],[187],{"type":35,"value":188},"a",{"type":35,"value":190}," filename suffix = art iteration marker); unknown states warn and fall back to the base body",{"type":30,"tag":111,"props":192,"children":193},{},[194,196,201,203,208,210,215,217,222],{"type":35,"value":195},"Decorations: binary block above-left while ",{"type":30,"tag":38,"props":197,"children":199},{"className":198},[],[200],{"type":35,"value":69},{"type":35,"value":202},", red alert burst centered above on ",{"type":30,"tag":38,"props":204,"children":206},{"className":205},[],[207],{"type":35,"value":84},{"type":35,"value":209},"; ",{"type":30,"tag":38,"props":211,"children":213},{"className":212},[],[214],{"type":35,"value":77},{"type":35,"value":216}," (zzz) and ",{"type":30,"tag":38,"props":218,"children":220},{"className":219},[],[221],{"type":35,"value":98},{"type":35,"value":223}," (halo) registered but art pending (dev warning until exports land)",{"type":30,"tag":111,"props":225,"children":226},{},[227],{"type":35,"value":228},"Added default slot anchored above the head for consumer content (needs-input speech bubble)",{"type":30,"tag":111,"props":230,"children":231},{},[232,234,240,242],{"type":35,"value":233},"Deleted old placeholder ",{"type":30,"tag":38,"props":235,"children":237},{"className":236},[],[238],{"type":35,"value":239},"assets\u002Fpawns\u002Fagent\u002Fangel.svg",{"type":35,"value":241},"; moved provider logos to ",{"type":30,"tag":38,"props":243,"children":245},{"className":244},[],[246],{"type":35,"value":247},"assets\u002Fsvgs\u002Fpixel-pawns\u002Fproviders\u002F",{"type":30,"tag":111,"props":249,"children":250},{},[251],{"type":35,"value":252},"Demo page: all-states row, working+provider, needs-input bubble, unknown-state, and inventory-row usage context",{"type":30,"tag":111,"props":254,"children":255},{},[256],{"type":35,"value":257},"Registry: updated description, state prop docs, slot entry",{"type":30,"tag":111,"props":259,"children":260},{},[261,263,269,271,277,279,285,286,292,294,300,302,308],{"type":35,"value":262},"Renamed ",{"type":30,"tag":38,"props":264,"children":266},{"className":265},[],[267],{"type":35,"value":268},"PawnAgent",{"type":35,"value":270}," → ",{"type":30,"tag":38,"props":272,"children":274},{"className":273},[],[275],{"type":35,"value":276},"AgentPawn",{"type":35,"value":278}," (",{"type":30,"tag":38,"props":280,"children":282},{"className":281},[],[283],{"type":35,"value":284},"components\u002Fpawn\u002FAgent.vue",{"type":35,"value":270},{"type":30,"tag":38,"props":287,"children":289},{"className":288},[],[290],{"type":35,"value":291},"components\u002Fagent\u002FPawn.vue",{"type":35,"value":293},"); component joins the ",{"type":30,"tag":38,"props":295,"children":297},{"className":296},[],[298],{"type":35,"value":299},"agent",{"type":35,"value":301}," registry group alongside AgentAvatar, and the now-empty ",{"type":30,"tag":38,"props":303,"children":305},{"className":304},[],[306],{"type":35,"value":307},"pawn",{"type":35,"value":309}," group was removed",{"type":30,"tag":111,"props":311,"children":312},{},[313,319,320,326,328,334],{"type":30,"tag":38,"props":314,"children":316},{"className":315},[],[317],{"type":35,"value":318},"AgentBinary",{"type":35,"value":278},{"type":30,"tag":38,"props":321,"children":323},{"className":322},[],[324],{"type":35,"value":325},"components\u002Fagent\u002FBinary.vue",{"type":35,"value":327},") — the working decoration rebuilt as a live component from binarya.svg's two glyph paths: digits change by swapping a 0 and a 1 within a row (row widths stay constant), purple highlight runs re-roll independently; all timing prop-driven (flipMs\u002FhighlightMs\u002F…) with demo sliders for manual dial-in. AgentPawn's working state now renders it instead of the static img; ",{"type":30,"tag":38,"props":329,"children":331},{"className":330},[],[332],{"type":35,"value":333},"binarya.svg",{"type":35,"value":335}," remains as the art source of record",{"key":337,"title":338,"empty":16,"ast":339},"outcome","Outcome",{"type":27,"children":340},[341,367,394],{"type":30,"tag":31,"props":342,"children":343},{},[344,346,351,353,358,360,365],{"type":35,"value":345},"The state system shipped: ",{"type":30,"tag":38,"props":347,"children":349},{"className":348},[],[350],{"type":35,"value":276},{"type":35,"value":352}," (renamed from ",{"type":30,"tag":38,"props":354,"children":356},{"className":355},[],[357],{"type":35,"value":268},{"type":35,"value":359}," mid-cycle into the agent namespace) composes body + decoration per state, with the working state upgraded from static art to the animated ",{"type":30,"tag":38,"props":361,"children":363},{"className":362},[],[364],{"type":35,"value":318},{"type":35,"value":366}," component (digit swaps + roaming highlight runs, all timing prop-driven for manual dial-in). The lookup-table pattern means new art iterations and the pending decorations drop in by filename.",{"type":30,"tag":31,"props":368,"children":369},{},[370,376,378,384,386,392],{"type":30,"tag":371,"props":372,"children":373},"strong",{},[374],{"type":35,"value":375},"Carries forward:",{"type":35,"value":377}," ",{"type":30,"tag":38,"props":379,"children":381},{"className":380},[],[382],{"type":35,"value":383},"zzza.svg",{"type":35,"value":385}," (idle) and ",{"type":30,"tag":38,"props":387,"children":389},{"className":388},[],[390],{"type":35,"value":391},"haloa.svg",{"type":35,"value":393}," (angel) Illustrator exports still pending — those states render bare with a dev warning. Animation timing defaults await Mark's dial-in on the AgentBinary demo sliders. Layer release (0.6.0) pending to propagate beyond local dev.",{"type":30,"tag":31,"props":395,"children":396},{},[397,402],{"type":30,"tag":371,"props":398,"children":399},{},[400],{"type":35,"value":401},"Learnings:",{"type":35,"value":403}," decoration placement and pixel-exact sizing in layer components must use inline styles, not arbitrary-value Tailwind classes — the consumer's Tailwind scan doesn't reliably cover layer files (bit during c58, fixed here too).",[],[406],"initial-prompt.md",[408,411,415,418],{"src":17,"kind":409,"order":410},"hero",4999,{"src":412,"kind":413,"order":414},"\u002Fcycles\u002Fdesign\u002Fc57-agent-pawn-2.png","slice",2,{"src":416,"kind":413,"order":417},"\u002Fcycles\u002Fdesign\u002Fc57-agent-pawn-3.png",3,{"src":419,"kind":420,"order":421},"\u002Fcycles\u002Fdesign\u002Fc57-agent-pawn-full.png","full",9000,[],[],1789151084133]