fix: display pin reason and clean image/tag in updates page

Return pin_reason from list and detail API endpoints. Change reason
input to multiline textarea. Show full reason in version card and
truncated in pinned list. Strip digest from image display and truncate
hex-only tags (commit hashes, checksums) to 12 chars.

Author: btouchard

frontend/src/components/UpdateDetailPanel.vue

@@ -121,6 +121,9 @@ onMounted(loadDetail)
           <Pin :size="8" class="inline mr-0.5" /> Pinned
         </span>
       </div>
+      <p v-if="detail.pinned && detail.pin_reason" class="mt-2 text-xs text-slate-400 italic">
+        {{ detail.pin_reason }}
+      </p>
     </div>
 
     <!-- Risk Score (Pro) -->
@@ -191,11 +194,11 @@ onMounted(loadDetail)
           {{ detail.pinned ? 'Unpin this version' : 'Pin this version' }}
         </button>
         <div v-if="showPinInput && !detail.pinned" class="mt-2">
-          <input
+          <textarea
             v-model="pinReason"
-            type="text"
+            rows="2"
             placeholder="Reason (optional)"
-            class="w-full px-3 py-2 bg-[#0B0E13] border border-slate-700 rounded-lg text-xs text-slate-300 placeholder-slate-600 focus:border-pb-green-500 focus:outline-none"
+            class="w-full px-3 py-2 bg-[#0B0E13] border border-slate-700 rounded-lg text-xs text-slate-300 placeholder-slate-600 focus:border-pb-green-500 focus:outline-none resize-none"
           />
           <button
             @click="handlePin"

frontend/src/pages/UpdatesPage.vue

@@ -68,6 +68,11 @@ function updateTypeColor(type_: string): string {
   }
 }
 
+function shortTag(tag: string): string {
+  if (/^(sha-|sha256:)?[0-9a-f]{12,}$/i.test(tag)) return tag.slice(0, 12)
+  return tag
+}
+
 const formatTime = timeAgo
 
 onMounted(() => {
@@ -187,11 +192,12 @@ onUnmounted(() => {
                   </p>
                   <UpdateBadge :update="u" />
                 </div>
-                <p class="text-[10px] text-slate-600 mt-0.5 truncate">{{ u.image }}</p>
+                <p class="text-[10px] text-slate-600 mt-0.5 truncate">{{ u.image.split('@')[0] }}</p>
+                <p v-if="u.status === 'pinned' && u.pin_reason" class="text-[10px] text-slate-500 mt-0.5 truncate italic">{{ u.pin_reason }}</p>
               </div>
               <div class="text-right shrink-0">
                 <p :class="['text-xs font-bold', updateTypeColor(u.update_type)]">
-                  {{ u.current_tag }} → {{ u.latest_tag }}
+                  {{ shortTag(u.current_tag) }} → {{ shortTag(u.latest_tag) }}
                 </p>
                 <p class="text-[10px] text-slate-600 mt-0.5">{{ formatTime(u.detected_at) }}</p>
               </div>

frontend/src/services/updateApi.ts

@@ -29,6 +29,7 @@ export interface ImageUpdate {
   risk_score: number
   status: string
   detected_at: string
+  pin_reason?: string
 }
 
 export interface UpdateSummary {
@@ -64,6 +65,7 @@ export interface ContainerUpdateDetail {
   risk_score: number
   active_cves: CVEInfo[]
   pinned: boolean
+  pin_reason?: string
   source_url: string
   previous_digest: string
   update_command: string

internal/api/v1/updates.go

@@ -47,7 +47,13 @@ func (h *UpdateHandler) HandleListUpdates(w http.ResponseWriter, r *http.Request
 
 	updateMaps := make([]map[string]interface{}, 0, len(updates))
 	for _, u := range updates {
-		updateMaps = append(updateMaps, imageUpdateToMap(u))
+		m := imageUpdateToMap(u)
+		if u.Status == update.StatusPinned {
+			if pin, _ := h.store.GetVersionPin(r.Context(), u.ContainerID); pin != nil {
+				m["pin_reason"] = pin.Reason
+			}
+		}
+		updateMaps = append(updateMaps, m)
 	}
 
 	WriteJSON(w, http.StatusOK, map[string]interface{}{
@@ -116,6 +122,9 @@ func (h *UpdateHandler) HandleGetContainerUpdate(w http.ResponseWriter, r *http.
 
 	resp := imageUpdateToMap(u)
 	resp["pinned"] = pin != nil
+	if pin != nil {
+		resp["pin_reason"] = pin.Reason
+	}
 
 	if extension.CurrentEdition() == extension.Enterprise {
 		if cves, err := h.store.ListContainerCVEs(r.Context(), containerID); err == nil {