feat: refine builder skill chip flows

src/lib/components/BuilderPicker.svelte

@@ -5,7 +5,7 @@
 		items,
 		value = $bindable(''),
 		label,
-		placeholder = 'Search available items…',
+        placeholder = 'Search…',
 		disabledIds = [],
 		onchange
 	}: {
@@ -27,19 +27,19 @@
 	<span>{label}</span>
 	<button type="button" class="builder-picker-current" aria-expanded={open} onclick={() => open = !open}>
 		<ItemIcon src={selected?.iconUrl} alt=""/>
-		<b>{selected?.name ?? 'SELECT ITEM'}</b><small>{selected?.category ?? (selected ? 'EQUIPPED' : 'UNASSIGNED')}</small><em>{open ? '×' : '＋'}</em>
+        <b>{selected?.name ?? 'SELECT ITEM'}</b><small>{selected?.category ?? (selected ? 'EQUIPPED' : 'UNASSIGNED')}</small><em>{open ? '×' : '＋'}</em>
 	</button>
 	{#if open}
 		<div class="builder-picker-panel">
 			<input type="search" bind:value={query} {placeholder} aria-label={placeholder}/>
 			<div>
-				{#if selected}<button type="button" class="builder-picker-clear" onclick={() => choose('')}><i>×</i><span><b>CLEAR SLOT</b><small>REMOVE CURRENT SELECTION</small></span><em>CLEAR</em></button>{/if}
+                {#if selected}<button type="button" class="builder-picker-clear" onclick={() => choose('')}><i>×</i><span><b>CLEAR</b><small>REMOVE SELECTION</small></span><em>CLEAR</em></button>{/if}
 				{#each results as item}
 					<button type="button" class:selected={item.id === value} disabled={disabledIds.includes(item.id)} onclick={() => choose(item.id)}>
 						<ItemIcon src={item.iconUrl} alt=""/>
 						<span><b>{item.name}</b><small>{item.category ?? 'AVAILABLE'}</small></span><em>{item.id === value ? 'EQUIPPED' : disabledIds.includes(item.id) ? 'CONFLICT' : 'SELECT'}</em>
 					</button>
-				{:else}<p>NO MATCHING ITEMS</p>{/each}
+                {:else}<p>NO MATCHES</p>{/each}
 			</div>
 		</div>
 	{/if}

src/lib/components/ItemIcon.svelte

@@ -14,4 +14,4 @@
 	const resolvedAlt = $derived(src || !alt ? alt : `${alt} — icon awaiting contribution`);
 </script>
 
-<img src={src || MISSING_ITEM_ICON_URL} alt={resolvedAlt} class:missing-item-icon={!src} class={className}/>
+<img src={src || MISSING_ITEM_ICON_URL} alt={resolvedAlt} class:missing-item-icon={!src} class={`item-icon ${className}`.trim()}/>

src/lib/components/ProposalChangePreview.svelte

@@ -78,6 +78,7 @@
 							{ label: 'SPECIALIZATION', current: specializationRecord?.specialization_id, proposed: proposed.specializationId },
 							{ label: 'DURATION · SECONDS', current: specializationRecord?.duration_seconds, proposed: proposed.durationSeconds },
 							{ label: 'COOLDOWN · SECONDS', current: specializationRecord?.cooldown_seconds, proposed: proposed.cooldownSeconds },
+							{ label: 'SHARED SKILL CHIP ABILITY', current: (currentSnapshot?.skillChipLinks as any[])?.[0]?.ability_id === specializationRecord?.id ? (currentSnapshot?.skillChipLinks as any[])?.[0]?.compatible_ability_id : (currentSnapshot?.skillChipLinks as any[])?.[0]?.ability_id, proposed: proposed.skillChipCompatibleAbilityId },
 							{ label: 'DESCRIPTION', current: specializationRecord?.description, proposed: proposed.description }
 						]
 						: action === 'saveCombatEffect'

src/lib/components/builder/LoadoutMatrix.svelte

@@ -37,7 +37,7 @@
 			&& Math.floor(Number(active.split(':')[1]) / 3) === Number(cell.id.split(':')[1]));
 
 	const issueLabel = (issue: string) => {
-		if (/not configured|required/i.test(issue)) return 'REQUIRED';
+		if (/not configured|required|select|choose/i.test(issue)) return 'REQUIRED';
 		if (/incomplete/i.test(issue)) return 'INCOMPLETE';
 		return 'CHECK';
 	};
@@ -45,12 +45,12 @@
 
 <section class="loadout-matrix" aria-label="Loadout matrix">
 	<header>
-		<span>LOADOUT MATRIX</span>
-		<b class:ready={configured}>{configured ? 'COMBAT READY' : 'CONFIGURATION INCOMPLETE'}</b>
+		<span>LOADOUT</span>
+		<b class:ready={configured}>{configured ? 'COMPLETE' : 'INCOMPLETE'}</b>
 	</header>
 
 	<div class="matrix-section doctrine-section">
-		<small class="section-label">DOCTRINE · ROOT CHOICE</small>
+		<small class="section-label">SPECIALIZATION FOCUS</small>
 		<button
 			type="button"
 			class="doctrine-cell"
@@ -63,19 +63,20 @@
 			<span><small>{doctrine.label}</small><strong>{doctrine.name}</strong><em class:visible={selected(doctrine)}>{doctrine.summary}</em>{#if doctrine.issue}<mark title={doctrine.issue} aria-hidden="true">{issueLabel(doctrine.issue)}</mark><span class="sr-only">{doctrine.issue}</span>{/if}</span>
 			<i aria-hidden="true"></i>
 		</button>
-		<div class="supply-line"><span>SUPPLIES 3 ABILITIES</span></div>
+		<div class="supply-line"><span>ABILITIES</span></div>
 		<div class="ability-cells">
 			{#each abilities as cell}
 				<button type="button" class:active={selected(cell)} class:needs-attention={Boolean(cell.issue)} aria-pressed={selected(cell)} onclick={() => onselect(cell.id)}>
 					<ItemIcon src={cell.iconUrl} alt="" className="matrix-icon" />
 					<span><small>{cell.label}</small><strong>{cell.name}</strong><em class:visible={selected(cell)}>{cell.summary}</em>{#if cell.issue}<mark title={cell.issue} aria-hidden="true">{issueLabel(cell.issue)}</mark><span class="sr-only">{cell.issue}</span>{/if}</span>
+					<i aria-hidden="true"></i>
 				</button>
 			{/each}
 		</div>
 	</div>
 
 	<div class="matrix-section">
-		<small class="section-label">WEAPONS · PRIMARY + SECONDARY</small>
+		<small class="section-label">WEAPONS</small>
 		<div class="equipment-cells">
 			{#each weapons as cell}
 				<button type="button" class:active={selected(cell)} class:needs-attention={Boolean(cell.issue)} aria-pressed={selected(cell)} onclick={() => onselect(cell.id)}>
@@ -88,7 +89,7 @@
 	</div>
 
 	<div class="matrix-section">
-		<small class="section-label">GEAR · 6 POSITIONS</small>
+		<small class="section-label">GEAR</small>
 		<div class="equipment-cells gear-cells">
 			{#each gear as cell}
 				<button type="button" class:active={selected(cell)} class:needs-attention={Boolean(cell.issue)} aria-pressed={selected(cell)} onclick={() => onselect(cell.id)}>
@@ -101,7 +102,7 @@
 	</div>
 
 	<div class="matrix-section protocol-section">
-		<small class="section-label">AGENT SYSTEM · ONE OS PROTOCOL</small>
+		<small class="section-label">OS PROTOCOL</small>
 		<button type="button" class:active={selected(protocol)} class:needs-attention={Boolean(protocol.issue)} aria-pressed={selected(protocol)} onclick={() => onselect(protocol.id)}>
 			<ItemIcon src={protocol.iconUrl} alt="" className="matrix-icon" />
 			<span><small>{protocol.label}</small><strong>{protocol.name}</strong><em class:visible={selected(protocol)}>{protocol.summary}</em>{#if protocol.issue}<mark title={protocol.issue} aria-hidden="true">{issueLabel(protocol.issue)}</mark><span class="sr-only">{protocol.issue}</span>{/if}</span>
@@ -123,9 +124,9 @@
 	button:hover,button:focus-visible{border-color:var(--shd-border-strong);background:var(--shd-surface-active);outline:none}button.active{border-color:var(--shd-builder-selection-border);background:var(--shd-builder-selection);box-shadow:inset 2px 0 var(--shd-orange)}
 	button.needs-attention{border-bottom-color:color-mix(in srgb,var(--shd-danger) 68%,var(--shd-border-soft))}button.needs-attention>i{background:var(--shd-danger)}button mark{width:fit-content;max-width:100%;overflow:hidden;margin-top:2px;padding:2px 4px;border:1px solid color-mix(in srgb,var(--shd-danger) 58%,transparent);background:#1d1212;color:var(--shd-danger);font-size:8px;font-weight:900;letter-spacing:.07em;line-height:1.2;text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap}
 	.supply-line{height:22px;display:grid;place-items:center;background:linear-gradient(90deg,transparent 49.7%,var(--shd-orange) 49.7% 50.3%,transparent 50.3%)}.supply-line span{padding:0 6px;background:var(--shd-surface);color:var(--shd-orange);font-size:8px;font-weight:900;letter-spacing:.08em}
-	.ability-cells{display:grid;grid-template-columns:1fr;gap:3px}.ability-cells button{min-height:48px;grid-template-columns:25px minmax(0,1fr);padding:6px}.ability-cells :global(.matrix-icon){width:24px;height:24px}
+	.ability-cells{display:grid;grid-template-columns:1fr;gap:3px}.ability-cells button{min-height:48px;grid-template-columns:25px minmax(0,1fr) 3px;padding:6px}.ability-cells :global(.matrix-icon){width:24px;height:24px}
 	.equipment-cells{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px}.equipment-cells button{min-height:69px}.protocol-section>button{width:100%;min-height:68px}
 	button:focus-visible{outline:2px solid var(--shd-focus-ring);outline-offset:2px}
 	@media(max-width:800px) and (min-width:651px){.ability-cells{grid-template-columns:repeat(3,minmax(0,1fr))}.ability-cells button{min-height:68px}}
-	@media(max-width:520px){.ability-cells{grid-template-columns:1fr}.equipment-cells{grid-template-columns:1fr 1fr}}
+	@media(max-width:520px){.ability-cells{grid-template-columns:1fr}.equipment-cells{grid-template-columns:1fr 1fr}.gear-cells{grid-template-columns:1fr}}
 </style>

src/lib/components/builder/LoadoutStatsSummary.svelte

@@ -37,7 +37,7 @@
 <section class:page={layout === 'page'} class="loadout-known-stats" aria-labelledby={headingId}>
 	<div class="summary-head">
 		<div>
-			<p class="eyebrow"><span></span> KNOWN EQUIPMENT TOTALS</p>
+            <p class="eyebrow"><span></span> KNOWN STATS</p>
 			<h2 id={headingId}>Agent stats</h2>
 		</div>
 	</div>
@@ -52,29 +52,29 @@
 	</div>
 	<div class="summary-scroll">
 		<div class="summary-section">
-			<header><span>COMBINED ATTRIBUTES</span><b>{summary.stats.length}</b></header>
+            <header><span>ATTRIBUTES</span><b>{summary.stats.length}</b></header>
 			{#each summary.stats as stat}
 				<div class="summary-stat">
 					<span>{attribute(stat.id)?.name}<small>{attribute(stat.id)?.category} · {stat.sourceCount} SOURCE{stat.sourceCount === 1 ? '' : 'S'}</small></span>
 					<b>{unitValue(stat.value, stat.id)}</b>
 				</div>
 			{:else}
-				<p>Equip and configure items to calculate their known Attributes.</p>
+                <p>Equip items to see known Attributes.</p>
 			{/each}
 		</div>
 		<div class="summary-section">
-			<header><span>ACTIVE SET BONUSES</span><b>{summary.activeBonuses.length}</b></header>
+            <header><span>SET BONUSES</span><b>{summary.activeBonuses.length}</b></header>
 			{#each summary.activeBonuses as bonus}
 				<div class="summary-bonus">
 					<span><b>{bonus.name}</b><small>{bonus.pieces}-PIECE · {bonus.count} EQUIPPED</small></span>
 					<em>+{unitValue(bonus.value, bonus.statId)} {attribute(bonus.statId)?.name}</em>
 				</div>
 			{:else}
-				<p>Matching Brand Sets and Skill Chips activate bonuses here.</p>
+                <p>No active bonuses.</p>
 			{/each}
 		</div>
 		<div class="summary-section">
-			<header><span>EQUIPPED TALENTS</span><b>{summary.equippedTalents.length}</b></header>
+            <header><span>TALENTS</span><b>{summary.equippedTalents.length}</b></header>
 			{#each summary.equippedTalents as equipped}
 				<div class="summary-talent">
 					<details open={layout === 'page'}>
@@ -84,11 +84,11 @@
 					</details>
 				</div>
 			{:else}
-				<p>Selected equipment Talents appear here.</p>
+                <p>No Talents equipped.</p>
 			{/each}
 		</div>
 	</div>
-	<p class="known-stats-note">Includes deterministic equipment values only. Conditional Talent effects remain outside current totals.</p>
+    <p class="known-stats-note">Known values only. Advanced effects are planned.</p>
 </section>
 
 <style>

src/lib/components/builder/PlannedCombatModel.svelte

@@ -10,20 +10,20 @@
 	} = $props();
 
 	const capabilities = [
-		{ label: 'WEAPON OUTPUT', detail: 'Hit values, burst DPS, sustained DPS, and reload-aware firing cycles' },
-		{ label: 'SKILL SIMULATION', detail: 'Ability cadence, target counts, critical hits, and multi-shot behavior' },
-		{ label: 'ENCOUNTER MODEL', detail: 'Duration, accuracy, movement, target flow, rotations, and downtime' },
-		{ label: 'CONDITIONAL EFFECTS', detail: 'Talent triggers, stack buildup, cooldowns, uptime, and resource changes' }
+        { label: 'WEAPON OUTPUT', detail: 'Hits and firing cycles' },
+        { label: 'SKILL SIMULATION', detail: 'Timing and target caps' },
+        { label: 'ENCOUNTER MODEL', detail: 'Duration and rotations' },
+        { label: 'CONDITIONAL EFFECTS', detail: 'Triggers and uptime' }
 	];
 </script>
 
 <section class:compact={variant === 'compact'} class="planned-combat-model" aria-labelledby={headingId}>
 	<header>
-		<div><span>ADVANCED COMBAT MODEL</span>{#if headingLevel === 'h2'}<h2 id={headingId}>DPS calculations</h2>{:else}<h3 id={headingId}>DPS calculations</h3>{/if}</div>
-		<b>COMING SOON</b>
+        <div><span>COMBAT MODEL</span>{#if headingLevel === 'h2'}<h2 id={headingId}>DPS calculations</h2>{:else}<h3 id={headingId}>DPS calculations</h3>{/if}</div>
+        <b>PLANNED</b>
 	</header>
 	{#if variant === 'full'}
-		<p>Known equipment totals remain available now. Advanced damage projections will return after their calculation rules and scenario controls are ready for player use.</p>
+        <p>Known stats are live. Damage projections are planned.</p>
 	{/if}
 	<div class="planned-capabilities" aria-label="Planned combat-model capabilities">
 		{#each capabilities as capability}