[{"data":1,"prerenderedAt":318},["ShallowReactive",2],{"$f_cbzfkmm6hGVR8WxuvOHWXtpi2bjpinnP8Iw8nxSeDs":3},{"newThing":4,"project":5,"cycle":8,"sections":21,"threads":306,"otherDocs":307,"images":309,"archiveItems":313,"links":317},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":18,"lastActivity":19,"hasPickup":16,"hasInitialPrompt":20},"c58",58,"c58.agent-mini-card","agent-mini-card","AgentMiniCard — compact agent summary card composing the AgentPawn, with mock page","archived","2026-07-26",false,"\u002Farchive\u002F2026-q3\u002Fc58-agent-mini-cards.png",1,"2026-09-11",true,[22,36,77,155,268],{"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","c57 gave the agent pawn its state system; the reference design (shared 2026-07-26) shows the first real composition around it — a compact inventory card with the pawn's status at a glance, workspace\u002Fprovider identity, request\u002Ffile stats in pixel-frame icons, tools & skills, and navigation links. This is the pattern agent inventory surfaces will build on.",{"key":37,"title":38,"empty":16,"ast":39},"objective","Objective",{"type":26,"children":40},[41],{"type":29,"tag":30,"props":42,"children":43},{},[44,51,53,59,61,67,69,75],{"type":29,"tag":45,"props":46,"children":48},"code",{"className":47},[],[49],{"type":34,"value":50},"AgentMiniCard",{"type":34,"value":52}," and ",{"type":29,"tag":45,"props":54,"children":56},{"className":55},[],[57],{"type":34,"value":58},"AgentInputBubble",{"type":34,"value":60}," in the layer's agent group, executing the reference design, plus a ",{"type":29,"tag":45,"props":62,"children":64},{"className":63},[],[65],{"type":34,"value":66},"\u002Fpages",{"type":34,"value":68}," mock (",{"type":29,"tag":45,"props":70,"children":72},{"className":71},[],[73],{"type":34,"value":74},"agent-mini-cards",{"type":34,"value":76},") showing the four designed states (working, idle, errored, needs-input) on a dark canvas. Missing pixel icons are hand-authored placeholders that Illustrator exports replace by filename.",{"key":78,"title":79,"empty":16,"ast":80},"scope","Scope",{"type":26,"children":81},[82],{"type":29,"tag":83,"props":84,"children":85},"ul",{},[86,98,115,132],{"type":29,"tag":87,"props":88,"children":89},"li",{},[90,96],{"type":29,"tag":45,"props":91,"children":93},{"className":92},[],[94],{"type":34,"value":95},"q-nuxt-layer\u002Fassets\u002Fsvgs\u002Fpixel-icons\u002F",{"type":34,"value":97}," — folder, browser-frame, page, briefcase, calculator (placeholder art)",{"type":29,"tag":87,"props":99,"children":100},{},[101,107,109],{"type":29,"tag":45,"props":102,"children":104},{"className":103},[],[105],{"type":34,"value":106},"q-nuxt-layer\u002Fcomponents\u002Fagent\u002FInputBubble.vue",{"type":34,"value":108},", ",{"type":29,"tag":45,"props":110,"children":112},{"className":111},[],[113],{"type":34,"value":114},"MiniCard.vue",{"type":29,"tag":87,"props":116,"children":117},{},[118,124,126],{"type":29,"tag":45,"props":119,"children":121},{"className":120},[],[122],{"type":34,"value":123},"app\u002Fpages\u002Fpages\u002Fagent-mini-cards.vue",{"type":34,"value":125}," + ",{"type":29,"tag":45,"props":127,"children":129},{"className":128},[],[130],{"type":34,"value":131},"app\u002Fdata\u002Fpage-registry.ts",{"type":29,"tag":87,"props":133,"children":134},{},[135,141,142,148,149],{"type":29,"tag":45,"props":136,"children":138},{"className":137},[],[139],{"type":34,"value":140},"app\u002Fpages\u002Fcomponents\u002F_demos\u002FAgentMiniCard.vue",{"type":34,"value":108},{"type":29,"tag":45,"props":143,"children":145},{"className":144},[],[146],{"type":34,"value":147},"AgentInputBubble.vue",{"type":34,"value":125},{"type":29,"tag":45,"props":150,"children":152},{"className":151},[],[153],{"type":34,"value":154},"app\u002Fdata\u002Fcomponent-registry.ts",{"key":156,"title":157,"empty":16,"ast":158},"key-changes","Key Changes",{"type":26,"children":159},[160],{"type":29,"tag":83,"props":161,"children":162},{},[163,173,199,232,245,258,263],{"type":29,"tag":87,"props":164,"children":165},{},[166,171],{"type":29,"tag":45,"props":167,"children":169},{"className":168},[],[170],{"type":34,"value":95},{"type":34,"value":172}," — 5 hand-authored placeholder pixel SVGs (folder, browser-frame, page, briefcase, calculator) in the pawn palette; Illustrator exports replace them by filename",{"type":29,"tag":87,"props":174,"children":175},{},[176,181,183,189,191,197],{"type":29,"tag":45,"props":177,"children":179},{"className":178},[],[180],{"type":34,"value":58},{"type":34,"value":182}," (",{"type":29,"tag":45,"props":184,"children":186},{"className":185},[],[187],{"type":34,"value":188},"components\u002Fagent\u002FInputBubble.vue",{"type":34,"value":190},") — dark callout with mono text, violet action button (emits ",{"type":29,"tag":45,"props":192,"children":194},{"className":193},[],[195],{"type":34,"value":196},"action",{"type":34,"value":198},"), stepped pixel tail; fixed dark styling to match the dark-first pixel art",{"type":29,"tag":87,"props":200,"children":201},{},[202,207,208,214,216,222,224,230],{"type":29,"tag":45,"props":203,"children":205},{"className":204},[],[206],{"type":34,"value":50},{"type":34,"value":182},{"type":29,"tag":45,"props":209,"children":211},{"className":210},[],[212],{"type":34,"value":213},"components\u002Fagent\u002FMiniCard.vue",{"type":34,"value":215},") — composes AgentPawn (+ built-in AgentInputBubble on needs-input, re-emitted as ",{"type":29,"tag":45,"props":217,"children":219},{"className":218},[],[220],{"type":34,"value":221},"go-to-agent",{"type":34,"value":223},"), pixel folder row + inline registry-resolved provider row (deliberately not AgentAvatar, whose bold chip styling is for table cells), Requests\u002FFiles counts overlaid on pixel-frame icons, Tools & Skills list, View Details \u002F Go to Agent links; semantic theme tokens so it renders via a ",{"type":29,"tag":45,"props":225,"children":227},{"className":226},[],[228],{"type":34,"value":229},"dark",{"type":34,"value":231},"-classed canvas",{"type":29,"tag":87,"props":233,"children":234},{},[235,237,243],{"type":34,"value":236},"Mock page ",{"type":29,"tag":45,"props":238,"children":240},{"className":239},[],[241],{"type":34,"value":242},"\u002Fpages\u002Fagent-mini-cards",{"type":34,"value":244}," — 4 cards (working, idle, errored, needs-input) on a near-black canvas + page-registry entry (inventory group)",{"type":29,"tag":87,"props":246,"children":247},{},[248,250,256],{"type":34,"value":249},"Demos + registry entries for both components under the ",{"type":29,"tag":45,"props":251,"children":253},{"className":252},[],[254],{"type":34,"value":255},"agent",{"type":34,"value":257}," group",{"type":29,"tag":87,"props":259,"children":260},{},[261],{"type":34,"value":262},"Explicit-width fix: converted all arbitrary-value Tailwind sizing\u002Fpositioning in the agent components to inline styles — the consumer's Tailwind scan doesn't reliably cover layer files, so those classes silently got no CSS (icons rendered full-width). Gotcha recorded in memory and MEMORY.md",{"type":29,"tag":87,"props":264,"children":265},{},[266],{"type":34,"value":267},"Rescaled to match the design after side-by-side review: card 300→210px, pawn 72→48, browser frame 84→52px, page 42→28px, tighter type\u002Fspacing, bubble padding\u002Ftail scaled down",{"key":269,"title":270,"empty":16,"ast":271},"outcome","Outcome",{"type":26,"children":272},[273,285,296],{"type":29,"tag":30,"props":274,"children":275},{},[276,278,283],{"type":34,"value":277},"Card and bubble shipped in the layer's agent group, matching the reference design at design scale, with the ",{"type":29,"tag":45,"props":279,"children":281},{"className":280},[],[282],{"type":34,"value":242},{"type":34,"value":284}," mock and component demos live. Two review rounds against the design (explicit widths, then overall scale) landed the fixes above.",{"type":29,"tag":30,"props":286,"children":287},{},[288,294],{"type":29,"tag":289,"props":290,"children":291},"strong",{},[292],{"type":34,"value":293},"Carries forward:",{"type":34,"value":295}," the 5 pixel icons are my placeholders — Mark's Illustrator exports swap in by filename. Layer release (0.6.0) pending.",{"type":29,"tag":30,"props":297,"children":298},{},[299,304],{"type":29,"tag":289,"props":300,"children":301},{},[302],{"type":34,"value":303},"Learnings:",{"type":34,"value":305}," no arbitrary-value Tailwind classes in layer component templates (see Key Changes); side-by-side build-vs-design comparison caught scale drift that looked fine in isolation.",[],[308],"initial-prompt.md",[310],{"src":17,"kind":311,"order":312},"hero",4999,[314],{"path":315,"title":316,"image":17,"gallery":4},"archive\u002F2026-q3\u002F2026-08-06-c58-agent-mini-cards","Agent Mini Cards",[],1789151084117]