From 1b9cf427db74f96daec85e8c81d37f0c178a58fb Mon Sep 17 00:00:00 2001
From: Anthony Fu <github@antfu.me>
Date: Thu, 28 May 2026 12:59:47 +0900
Subject: [PATCH 1/4] refactor(ui): rework queue with dedicated views per
 action type

Replace the single-line summary row with a card that renders each action's
payload in its native shape: label pills with real colors, user avatars,
multi-line bodies, merge method + commit details, reactions with emoji.
Per-item entries are no longer hidden, and each card's footer opens its
source file in the editor.
---
 ui/components/hub/QueueList.vue     |  32 ++---
 ui/components/panel/Queue.vue       |  29 +---
 ui/components/queue/EntryCard.vue   | 207 ++++++++++++++++++++++++++++
 ui/components/queue/op/Body.vue     |  38 +++++
 ui/components/queue/op/Labels.vue   |  20 +++
 ui/components/queue/op/Merge.vue    |  33 +++++
 ui/components/queue/op/Reaction.vue |  38 +++++
 ui/components/queue/op/Users.vue    |  21 +++
 ui/composables/useHubQueue.ts       |   2 +-
 ui/composables/useQueue.ts          |   5 +-
 ui/uno.config.ts                    |  10 ++
 ui/utils/actionMeta.ts              |  40 ++++++
 ui/utils/queueSummary.ts            |  33 -----
 13 files changed, 422 insertions(+), 86 deletions(-)
 create mode 100644 ui/components/queue/EntryCard.vue
 create mode 100644 ui/components/queue/op/Body.vue
 create mode 100644 ui/components/queue/op/Labels.vue
 create mode 100644 ui/components/queue/op/Merge.vue
 create mode 100644 ui/components/queue/op/Reaction.vue
 create mode 100644 ui/components/queue/op/Users.vue
 create mode 100644 ui/utils/actionMeta.ts
 delete mode 100644 ui/utils/queueSummary.ts

diff --git a/ui/components/hub/QueueList.vue b/ui/components/hub/QueueList.vue
index e74487a..2eda478 100644
--- a/ui/components/hub/QueueList.vue
+++ b/ui/components/hub/QueueList.vue
@@ -1,15 +1,13 @@
 <script setup lang="ts">
 import type { QueueEntry } from '#ghfs/server-types'
-import { ACTIONS_COLOR_HEX } from '#ghfs/action-colors'
 import { useRouter } from '#imports'
 import { useAppState } from '../../composables/useAppState'
 import { useHubQueue } from '../../composables/useHubQueue'
 import { useOnlineState } from '../../composables/useOnlineState'
 import { useRpc } from '../../composables/useRpc'
-import { summarizeQueueOp } from '../../utils/queueSummary'
 import DisplayProjectIcon from '../display/ProjectIcon.vue'
+import QueueEntryCard from '../queue/EntryCard.vue'
 import UiEmptyState from '../ui/EmptyState.vue'
-import UiIconButton from '../ui/IconButton.vue'
 
 const hubQueue = useHubQueue()
 const router = useRouter()
@@ -17,10 +15,6 @@ const rpc = useRpc()
 const state = useAppState()
 const { offline } = useOnlineState()
 
-function actionColor(action: string): string {
-  return (ACTIONS_COLOR_HEX as Record<string, string>)[action] ?? '#6b7280'
-}
-
 function openItem(repo: string, number: number) {
   router.push(`/${repo}/${number}`)
 }
@@ -69,28 +63,20 @@ async function remove(projectId: string, entry: QueueEntry) {
           <span>Execute</span>
         </button>
       </header>
-      <ul class="flex flex-col divide-y divide-#8882">
+      <ul class="flex flex-col gap-2 px-4 py-3">
         <li
-          v-for="entry in group.queue.entries.filter((e: QueueEntry) => e.source !== 'per-item')"
+          v-for="entry in group.queue.entries"
           :key="entry.id"
-          class="group flex items-start gap-2 px-4 py-2 hover:bg-active transition cursor-pointer"
+          class="group cursor-pointer"
           data-testid="hub-queue-entry"
           :data-entry-id="entry.id"
           @click="openItem(group.repo, entry.op.number)"
         >
-          <span
-            class="badge font-mono text-xs flex-none"
-            :style="{ backgroundColor: `${actionColor(entry.op.action)}22`, color: actionColor(entry.op.action) }"
-          >{{ entry.op.action }}</span>
-          <span class="font-mono text-xs color-muted tabular-nums flex-none">#{{ entry.op.number }}</span>
-          <span class="text-xs color-muted truncate flex-1">{{ summarizeQueueOp(entry.op as unknown as Record<string, unknown>) }}</span>
-          <UiIconButton
-            icon="i-ph-trash-duotone"
-            size="sm"
-            tooltip="Remove from queue"
-            class="hover-fade"
-            data-testid="hub-queue-entry-remove"
-            @click.stop="remove(group.projectId, entry)"
+          <QueueEntryCard
+            :entry="entry"
+            :project-id="group.projectId"
+            :show-number="true"
+            @remove="remove(group.projectId, $event)"
           />
         </li>
       </ul>
diff --git a/ui/components/panel/Queue.vue b/ui/components/panel/Queue.vue
index b952f02..1fe4d21 100644
--- a/ui/components/panel/Queue.vue
+++ b/ui/components/panel/Queue.vue
@@ -1,14 +1,13 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
-import { ACTIONS_COLOR_HEX } from '#ghfs/action-colors'
 import type { QueueEntry } from '#ghfs/server-types'
 import type { SyncItemState } from '../../../src/types/sync-state'
 import { useActiveProjectId, useAppState } from '../../composables/useAppState'
 import { useOnlineState } from '../../composables/useOnlineState'
 import { useQueue } from '../../composables/useQueue'
 import { useRpc } from '../../composables/useRpc'
-import { summarizeQueueOp } from '../../utils/queueSummary'
 import DisplayItemStateIcon from '../display/ItemStateIcon.vue'
+import QueueEntryCard from '../queue/EntryCard.vue'
 import UiEmptyState from '../ui/EmptyState.vue'
 import UiIconButton from '../ui/IconButton.vue'
 import UiModal from '../ui/Modal.vue'
@@ -58,14 +57,6 @@ const groups = computed<Group[]>(() => {
   return [...byNumber.values()].sort((a, b) => a.number - b.number)
 })
 
-function actionColor(action: string): string {
-  return (ACTIONS_COLOR_HEX as Record<string, string>)[action] ?? '#6b7280'
-}
-
-function summarize(entry: QueueEntry): string {
-  return summarizeQueueOp(entry.op as unknown as Record<string, unknown>)
-}
-
 function selectItem(number: number) {
   state.selectItem(number)
   state.closeQueue()
@@ -192,27 +183,15 @@ async function confirmExecute() {
                 </div>
               </div>
             </button>
-            <ul class="flex flex-col">
+            <ul class="flex flex-col gap-2 px-4 py-3 pl-8">
               <li
                 v-for="entry in group.entries"
                 :key="entry.id"
-                class="group flex items-start gap-2 px-4 py-1.5 pl-8 hover:bg-active transition"
+                class="group"
                 data-testid="queue-entry"
                 :data-entry-id="entry.id"
               >
-                <span
-                  class="badge font-mono text-xs flex-none"
-                  :style="{ backgroundColor: `${actionColor(entry.op.action)}22`, color: actionColor(entry.op.action) }"
-                >{{ entry.op.action }}</span>
-                <span v-if="summarize(entry)" class="text-xs color-muted truncate flex-1">{{ summarize(entry) }}</span>
-                <span v-else class="flex-1" />
-                <UiIconButton
-                  icon="i-ph-trash-duotone"
-                  size="sm"
-                  tooltip="Remove from queue"
-                  class="hover-fade"
-                  @click="remove(entry)"
-                />
+                <QueueEntryCard :entry="entry" @remove="remove" />
               </li>
             </ul>
           </section>
diff --git a/ui/components/queue/EntryCard.vue b/ui/components/queue/EntryCard.vue
new file mode 100644
index 0000000..419bf6a
--- /dev/null
+++ b/ui/components/queue/EntryCard.vue
@@ -0,0 +1,207 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { ACTIONS_COLOR_HEX } from '#ghfs/action-colors'
+import type { ActionName } from '#ghfs/action-colors'
+import type { QueueEntry } from '#ghfs/server-types'
+import { EXECUTE_FILE_NAME, EXECUTE_MD_FILE_NAME } from '../../../src/constants'
+import { useActiveProjectId, useAppState } from '../../composables/useAppState'
+import { useRpc } from '../../composables/useRpc'
+import { actionMeta } from '../../utils/actionMeta'
+import DisplayDateBadge from '../display/DateBadge.vue'
+import UiIconButton from '../ui/IconButton.vue'
+import OpBody from './op/Body.vue'
+import OpLabels from './op/Labels.vue'
+import OpMerge from './op/Merge.vue'
+import OpReaction from './op/Reaction.vue'
+import OpUsers from './op/Users.vue'
+
+interface Props {
+  entry: QueueEntry
+  projectId?: string
+  showNumber?: boolean
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<{ remove: [entry: QueueEntry] }>()
+
+const activeId = useActiveProjectId()
+const state = useAppState()
+const rpc = useRpc()
+
+const op = computed(() => props.entry.op)
+const meta = computed(() => actionMeta(op.value.action))
+const accent = computed(() => (ACTIONS_COLOR_HEX as Record<string, string>)[op.value.action] ?? '#6b7280')
+
+const SOURCE_LABEL: Record<QueueEntry['source'], string> = {
+  'execute.yml': 'execute.yml',
+  'execute.md': 'execute.md',
+  'per-item': 'per-item',
+}
+const SOURCE_ICON: Record<QueueEntry['source'], string> = {
+  'execute.yml': 'i-octicon-file-code-16',
+  'execute.md': 'i-octicon-markdown-16',
+  'per-item': 'i-octicon-file-16',
+}
+
+const sourcePath = computed<string>(() => {
+  switch (props.entry.source) {
+    case 'execute.yml': return EXECUTE_FILE_NAME
+    case 'execute.md': return EXECUTE_MD_FILE_NAME
+    case 'per-item': return props.entry.filePath ?? ''
+  }
+})
+
+// Untyped accessor: narrowing a discriminated union through a computed
+// is awkward in template land, so we expose fields the section needs.
+const opAny = computed(() => op.value as unknown as Record<string, unknown>)
+
+const titleValue = computed(() => opAny.value.title as string | undefined)
+const bodyValue = computed(() => opAny.value.body as string | undefined)
+const labelsValue = computed(() => (opAny.value.labels as string[] | undefined) ?? [])
+const assigneesValue = computed(() => (opAny.value.assignees as string[] | undefined) ?? [])
+const reviewersValue = computed(() => (opAny.value.reviewers as string[] | undefined) ?? [])
+const milestoneValue = computed(() => opAny.value.milestone as string | number | undefined)
+const lockReasonValue = computed(() => opAny.value.reason as string | undefined)
+
+const isSimple = computed<boolean>(() => {
+  const SIMPLE: ActionName[] = ['close', 'reopen', 'unlock', 'mark-ready-for-review', 'convert-to-draft', 'enqueue-merge', 'clear-milestone']
+  return (SIMPLE as readonly string[]).includes(op.value.action)
+})
+
+async function openSource() {
+  if (!sourcePath.value)
+    return
+  const id = props.projectId ?? activeId.value ?? '__default__'
+  state.setError(null)
+  try {
+    await rpc.$call('ghfs:open-in-editor', id, sourcePath.value)
+  }
+  catch (error) {
+    state.setError(`${(error as Error).message}`)
+  }
+}
+</script>
+
+<template>
+  <article
+    class="panel-card overflow-hidden"
+    data-testid="queue-entry-card"
+    :data-action="op.action"
+    :data-entry-id="entry.id"
+    :data-source="entry.source"
+  >
+    <header class="flex items-center gap-2 px-3 py-2">
+      <span
+        class="badge gap-1 text-xs"
+        :style="{ backgroundColor: `${accent}22`, color: accent }"
+      >
+        <span :class="meta.icon" />
+        <span>{{ meta.label }}</span>
+      </span>
+      <span
+        v-if="showNumber"
+        class="font-mono text-xs color-muted tabular-nums"
+      >#{{ op.number }}</span>
+      <span
+        v-if="op.ifUnchangedSince"
+        class="inline-flex items-center gap-1 text-xs color-muted"
+        :title="`Only execute if the item is unchanged since ${op.ifUnchangedSince}`"
+      >
+        <span class="i-octicon-clock-16" />
+        <DisplayDateBadge :time="op.ifUnchangedSince" />
+      </span>
+      <div class="flex-1" />
+      <UiIconButton
+        icon="i-ph-trash-duotone"
+        size="sm"
+        tooltip="Remove from queue"
+        class="hover-fade"
+        data-testid="queue-entry-remove"
+        @click.stop="emit('remove', entry)"
+      />
+    </header>
+
+    <div v-if="!isSimple" class="px-3 pb-3">
+      <!-- set-title -->
+      <div
+        v-if="op.action === 'set-title' && titleValue"
+        class="text-sm color-base font-medium border-l-2 border-base pl-3 italic"
+      >{{ titleValue }}</div>
+
+      <!-- body-carrying actions -->
+      <OpBody
+        v-else-if="(op.action === 'set-body' || op.action === 'add-comment' || op.action === 'close-with-comment' || op.action === 'review-comment' || op.action === 'request-changes' || op.action === 'approve') && bodyValue"
+        :body="bodyValue"
+      />
+      <p
+        v-else-if="op.action === 'approve' && !bodyValue"
+        class="text-xs color-muted italic"
+      >(no comment)</p>
+
+      <!-- labels -->
+      <OpLabels
+        v-else-if="op.action === 'add-labels' || op.action === 'remove-labels' || op.action === 'set-labels'"
+        :labels="labelsValue"
+        :project-id="projectId"
+      />
+
+      <!-- assignees / reviewers -->
+      <OpUsers
+        v-else-if="op.action === 'add-assignees' || op.action === 'remove-assignees' || op.action === 'set-assignees'"
+        :users="assigneesValue"
+      />
+      <OpUsers
+        v-else-if="op.action === 'request-reviewers' || op.action === 'remove-reviewers'"
+        :users="reviewersValue"
+      />
+
+      <!-- set-milestone -->
+      <span
+        v-else-if="op.action === 'set-milestone' && milestoneValue != null"
+        class="badge bg-#8881 dark:bg-#fff1 color-muted gap-1 text-xs"
+      >
+        <span class="i-octicon-milestone-16" />
+        <span>{{ milestoneValue }}</span>
+      </span>
+
+      <!-- lock reason -->
+      <span
+        v-else-if="op.action === 'lock'"
+        class="badge bg-#8881 dark:bg-#fff1 color-muted gap-1 text-xs"
+      >
+        <span class="i-octicon-lock-16" />
+        <span>{{ lockReasonValue ?? 'no reason specified' }}</span>
+      </span>
+
+      <!-- merge -->
+      <OpMerge
+        v-else-if="op.action === 'merge'"
+        :method="opAny.method as ('squash' | 'merge' | 'rebase' | undefined)"
+        :commit-title="opAny.commitTitle as (string | undefined)"
+        :commit-message="opAny.commitMessage as (string | undefined)"
+      />
+
+      <!-- reactions -->
+      <OpReaction
+        v-else-if="op.action === 'add-reaction' || op.action === 'remove-reaction'"
+        :reaction="opAny.reaction as any"
+        :target="opAny.target as any"
+      />
+    </div>
+
+    <footer class="flex items-center gap-2 px-3 py-1.5 text-xs border-t border-base bg-#8881 dark:bg-#fff1">
+      <span class="badge gap-1 color-muted bg-base">
+        <span :class="SOURCE_ICON[entry.source]" />
+        <span class="font-mono">{{ SOURCE_LABEL[entry.source] }}</span>
+      </span>
+      <button
+        v-if="sourcePath"
+        type="button"
+        class="font-mono color-muted hover:color-active transition truncate min-w-0 text-left"
+        :title="`Open ${sourcePath} in editor`"
+        data-testid="queue-entry-source-link"
+        @click.stop="openSource"
+      >{{ sourcePath }}</button>
+    </footer>
+  </article>
+</template>
diff --git a/ui/components/queue/op/Body.vue b/ui/components/queue/op/Body.vue
new file mode 100644
index 0000000..bfab880
--- /dev/null
+++ b/ui/components/queue/op/Body.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+
+const props = defineProps<{
+  body: string
+  maxLines?: number
+}>()
+
+const expanded = ref(false)
+
+const maxLines = computed(() => props.maxLines ?? 6)
+const lineCount = computed(() => props.body.split('\n').length)
+const isLong = computed(() => lineCount.value > maxLines.value || props.body.length > 500)
+
+const visible = computed(() => {
+  if (expanded.value || !isLong.value)
+    return props.body
+  const truncated = props.body.split('\n').slice(0, maxLines.value).join('\n')
+  return truncated.length > 500 ? `${truncated.slice(0, 500)}…` : truncated
+})
+</script>
+
+<template>
+  <div class="text-sm">
+    <div
+      class="font-sans color-base whitespace-pre-wrap break-words leading-relaxed bg-#8881 dark:bg-#fff1 rounded border border-base px-3 py-2"
+      data-testid="queue-op-body"
+    >{{ visible }}</div>
+    <button
+      v-if="isLong"
+      type="button"
+      class="text-xs color-active hover:underline mt-1"
+      @click.stop="expanded = !expanded"
+    >
+      {{ expanded ? 'Show less' : 'Show more' }}
+    </button>
+  </div>
+</template>
diff --git a/ui/components/queue/op/Labels.vue b/ui/components/queue/op/Labels.vue
new file mode 100644
index 0000000..9b84298
--- /dev/null
+++ b/ui/components/queue/op/Labels.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import DisplayLabel from '../../display/Label.vue'
+
+defineProps<{
+  labels: string[]
+  projectId?: string
+}>()
+</script>
+
+<template>
+  <div class="flex flex-wrap items-center gap-1.5" data-testid="queue-op-labels">
+    <DisplayLabel
+      v-for="name in labels"
+      :key="name"
+      :name="name"
+      :project-id="projectId"
+    />
+    <span v-if="labels.length === 0" class="text-xs color-faint italic">(no labels)</span>
+  </div>
+</template>
diff --git a/ui/components/queue/op/Merge.vue b/ui/components/queue/op/Merge.vue
new file mode 100644
index 0000000..fec2f46
--- /dev/null
+++ b/ui/components/queue/op/Merge.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { MergeMethod } from '#ghfs/execute-types'
+import OpBody from './Body.vue'
+
+const props = defineProps<{
+  method?: MergeMethod
+  commitTitle?: string
+  commitMessage?: string
+}>()
+
+const method = computed<MergeMethod>(() => props.method ?? 'squash')
+
+const METHOD_ICON: Record<MergeMethod, string> = {
+  squash: 'i-octicon-stack-16',
+  merge: 'i-octicon-git-merge-16',
+  rebase: 'i-octicon-git-branch-16',
+}
+const methodIcon = computed(() => METHOD_ICON[method.value])
+</script>
+
+<template>
+  <div class="flex flex-col gap-2" data-testid="queue-op-merge">
+    <div class="flex items-center gap-1.5">
+      <span class="badge bg-#8881 dark:bg-#fff1 color-muted gap-1">
+        <span :class="methodIcon" />
+        <span class="font-mono">{{ method }}</span>
+      </span>
+    </div>
+    <div v-if="commitTitle" class="text-sm color-base font-medium">{{ commitTitle }}</div>
+    <OpBody v-if="commitMessage" :body="commitMessage" />
+  </div>
+</template>
diff --git a/ui/components/queue/op/Reaction.vue b/ui/components/queue/op/Reaction.vue
new file mode 100644
index 0000000..16c5d55
--- /dev/null
+++ b/ui/components/queue/op/Reaction.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { ReactionContent } from '../../../../src/utils/reactions'
+import { REACTION_EMOJI } from '../../../../src/utils/reactions'
+
+interface Target {
+  kind: 'item' | 'comment' | 'review'
+  commentId?: number
+  reviewId?: string
+}
+
+const props = defineProps<{
+  reaction: ReactionContent
+  target?: Target
+}>()
+
+const target = computed<Target>(() => props.target ?? { kind: 'item' })
+
+const targetLabel = computed(() => {
+  switch (target.value.kind) {
+    case 'item': return 'on this item'
+    case 'comment': return target.value.commentId != null ? `on comment #${target.value.commentId}` : 'on a comment'
+    case 'review': return 'on a review'
+  }
+})
+
+const emoji = computed(() => REACTION_EMOJI[props.reaction])
+</script>
+
+<template>
+  <div class="flex items-center gap-2.5" data-testid="queue-op-reaction">
+    <span class="text-2xl leading-none">{{ emoji }}</span>
+    <div class="flex flex-col">
+      <span class="text-sm font-mono color-base">{{ reaction }}</span>
+      <span class="text-xs color-muted">{{ targetLabel }}</span>
+    </div>
+  </div>
+</template>
diff --git a/ui/components/queue/op/Users.vue b/ui/components/queue/op/Users.vue
new file mode 100644
index 0000000..0d493f3
--- /dev/null
+++ b/ui/components/queue/op/Users.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import DisplayAuthor from '../../display/Author.vue'
+
+defineProps<{
+  users: string[]
+}>()
+</script>
+
+<template>
+  <div class="flex flex-wrap items-center gap-x-3 gap-y-1.5" data-testid="queue-op-users">
+    <span
+      v-for="login in users"
+      :key="login"
+      class="inline-flex"
+      @click.stop
+    >
+      <DisplayAuthor :author="login" :size="18" />
+    </span>
+    <span v-if="users.length === 0" class="text-xs color-faint italic">(none)</span>
+  </div>
+</template>
diff --git a/ui/composables/useHubQueue.ts b/ui/composables/useHubQueue.ts
index 5e30089..5a02ef7 100644
--- a/ui/composables/useHubQueue.ts
+++ b/ui/composables/useHubQueue.ts
@@ -10,7 +10,7 @@ const executing = ref<string | 'all' | null>(null)
 let installed = false
 
 function totalFor(g: HubQueueGroup): number {
-  return g.queue.entries.filter(e => e.source !== 'per-item').length
+  return g.queue.entries.length
 }
 
 export function useHubQueue() {
diff --git a/ui/composables/useQueue.ts b/ui/composables/useQueue.ts
index 338de43..0d8d6c4 100644
--- a/ui/composables/useQueue.ts
+++ b/ui/composables/useQueue.ts
@@ -5,10 +5,7 @@ import { useAppState } from './useAppState'
 export function useQueue() {
   const state = useAppState()
 
-  const entries = computed<QueueEntry[]>(() => {
-    const all = state.payload.value?.queue.entries ?? []
-    return all.filter(e => e.source !== 'per-item')
-  })
+  const entries = computed<QueueEntry[]>(() => state.payload.value?.queue.entries ?? [])
 
   const upCount = computed<number>(() => entries.value.length)
 
diff --git a/ui/uno.config.ts b/ui/uno.config.ts
index 519e501..6580d9e 100644
--- a/ui/uno.config.ts
+++ b/ui/uno.config.ts
@@ -181,5 +181,15 @@ export default defineConfig({
     'i-octicon-alert-fill-16',
     'i-octicon-x-16',
     'i-octicon-play-16',
+    // Queue card action icons (ui/utils/actionMeta.ts) + source/meta icons
+    'i-octicon-check-16',
+    'i-octicon-unlock-16',
+    'i-octicon-person-add-16',
+    'i-octicon-git-merge-queue-16',
+    'i-octicon-smiley-16',
+    'i-octicon-file-code-16',
+    'i-octicon-markdown-16',
+    'i-octicon-clock-16',
+    'i-octicon-stack-16',
   ],
 })
diff --git a/ui/utils/actionMeta.ts b/ui/utils/actionMeta.ts
new file mode 100644
index 0000000..cefabca
--- /dev/null
+++ b/ui/utils/actionMeta.ts
@@ -0,0 +1,40 @@
+import type { ActionName } from '#ghfs/action-colors'
+
+export interface ActionMeta {
+  label: string
+  icon: string
+}
+
+export const ACTION_META: Record<ActionName, ActionMeta> = {
+  'close': { label: 'Close', icon: 'i-octicon-issue-closed-16' },
+  'close-with-comment': { label: 'Close with comment', icon: 'i-octicon-issue-closed-16' },
+  'reopen': { label: 'Reopen', icon: 'i-octicon-issue-reopened-16' },
+  'set-title': { label: 'Set title', icon: 'i-octicon-pencil-16' },
+  'set-body': { label: 'Set body', icon: 'i-octicon-pencil-16' },
+  'add-comment': { label: 'Add comment', icon: 'i-octicon-comment-16' },
+  'add-labels': { label: 'Add labels', icon: 'i-octicon-tag-16' },
+  'remove-labels': { label: 'Remove labels', icon: 'i-octicon-tag-16' },
+  'set-labels': { label: 'Set labels', icon: 'i-octicon-tag-16' },
+  'add-assignees': { label: 'Add assignees', icon: 'i-octicon-person-add-16' },
+  'remove-assignees': { label: 'Remove assignees', icon: 'i-octicon-person-16' },
+  'set-assignees': { label: 'Set assignees', icon: 'i-octicon-person-16' },
+  'set-milestone': { label: 'Set milestone', icon: 'i-octicon-milestone-16' },
+  'clear-milestone': { label: 'Clear milestone', icon: 'i-octicon-milestone-16' },
+  'lock': { label: 'Lock', icon: 'i-octicon-lock-16' },
+  'unlock': { label: 'Unlock', icon: 'i-octicon-unlock-16' },
+  'request-reviewers': { label: 'Request reviewers', icon: 'i-octicon-eye-16' },
+  'remove-reviewers': { label: 'Remove reviewers', icon: 'i-octicon-eye-16' },
+  'mark-ready-for-review': { label: 'Mark ready for review', icon: 'i-octicon-git-pull-request-16' },
+  'convert-to-draft': { label: 'Convert to draft', icon: 'i-octicon-git-pull-request-draft-16' },
+  'approve': { label: 'Approve', icon: 'i-octicon-check-16' },
+  'request-changes': { label: 'Request changes', icon: 'i-octicon-x-16' },
+  'review-comment': { label: 'Review comment', icon: 'i-octicon-comment-discussion-16' },
+  'merge': { label: 'Merge', icon: 'i-octicon-git-merge-16' },
+  'enqueue-merge': { label: 'Enqueue for merge', icon: 'i-octicon-git-merge-queue-16' },
+  'add-reaction': { label: 'Add reaction', icon: 'i-octicon-smiley-16' },
+  'remove-reaction': { label: 'Remove reaction', icon: 'i-octicon-smiley-16' },
+}
+
+export function actionMeta(action: ActionName | string): ActionMeta {
+  return ACTION_META[action as ActionName] ?? { label: action, icon: 'i-octicon-dot-16' }
+}
diff --git a/ui/utils/queueSummary.ts b/ui/utils/queueSummary.ts
deleted file mode 100644
index 88f8c8f..0000000
--- a/ui/utils/queueSummary.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import { REACTION_EMOJI } from '../../src/utils/reactions'
-
-export function summarizeQueueOp(op: Record<string, unknown>): string {
-  const details: string[] = []
-  if ('labels' in op && Array.isArray(op.labels))
-    details.push((op.labels as string[]).join(', '))
-  if ('assignees' in op && Array.isArray(op.assignees))
-    details.push((op.assignees as string[]).map(a => `@${a}`).join(', '))
-  if ('reviewers' in op && Array.isArray(op.reviewers))
-    details.push((op.reviewers as string[]).map(r => `@${r}`).join(', '))
-  if ('title' in op && typeof op.title === 'string')
-    details.push(`"${op.title}"`)
-  if ('body' in op && typeof op.body === 'string')
-    details.push(`"${op.body.slice(0, 60)}${op.body.length > 60 ? '…' : ''}"`)
-  if ('milestone' in op && op.milestone != null)
-    details.push(String(op.milestone))
-  if (op.action === 'merge')
-    details.push(`(${(op.method as string) ?? 'squash'})`)
-  if (op.action === 'enqueue-merge')
-    details.push('(when ready)')
-  if ('reaction' in op && typeof op.reaction === 'string') {
-    const emoji = REACTION_EMOJI[op.reaction as keyof typeof REACTION_EMOJI]
-    details.push(emoji ? `${emoji} ${op.reaction}` : op.reaction)
-  }
-  if ('target' in op && op.target && typeof op.target === 'object') {
-    const t = op.target as { kind?: string, commentId?: number, reviewId?: string }
-    if (t.kind === 'comment' && t.commentId != null)
-      details.push(`on comment ${t.commentId}`)
-    else if (t.kind === 'review' && t.reviewId)
-      details.push('on review')
-  }
-  return details.join(' ')
-}

From 5d018d7f43b7b002c5b7b0da3574274766f9b61b Mon Sep 17 00:00:00 2001
From: Anthony Fu <github@antfu.me>
Date: Thu, 28 May 2026 13:41:03 +0900
Subject: [PATCH 2/4] refactor(ui): condense queue card header and show item
 title

Move the open-source affordance to a small icon button in the header (the
icon already encodes the source type), and drop the dedicated footer.
Surface each entry's issue/PR title next to the number so hub-level
entries are recognisable at a glance.
---
 src/server/queue-builder.ts       | 10 ++++---
 src/server/types.ts               |  2 ++
 ui/components/queue/EntryCard.vue | 44 ++++++++++++++-----------------
 3 files changed, 28 insertions(+), 28 deletions(-)

diff --git a/src/server/queue-builder.ts b/src/server/queue-builder.ts
index 8deba82..77dd71a 100644
--- a/src/server/queue-builder.ts
+++ b/src/server/queue-builder.ts
@@ -25,13 +25,14 @@ export async function buildQueueState(options: BuildQueueStateOptions): Promise<
   ])
 
   const entries: QueueEntry[] = []
+  const titleOf = (op: PendingOp): string | undefined => syncState.items[String(op.number)]?.data.item.title
   for (const [index, op] of yml.ops.entries())
-    entries.push(buildEntry(op, 'execute.yml', index))
+    entries.push(buildEntry(op, 'execute.yml', index, undefined, titleOf(op)))
   for (const [index, op] of md.ops.entries())
-    entries.push(buildEntry(op, 'execute.md', index))
+    entries.push(buildEntry(op, 'execute.md', index, undefined, titleOf(op)))
   for (const [index, op] of perItem.ops.entries()) {
     const filePath = syncState.items[String(op.number)]?.filePath
-    entries.push(buildEntry(op, 'per-item', index, filePath))
+    entries.push(buildEntry(op, 'per-item', index, filePath, titleOf(op)))
   }
 
   return {
@@ -58,12 +59,13 @@ async function readMdOps(path: string): Promise<{ ops: PendingOp[], warnings: st
   return { ops: parsed.ops, warnings: parsed.warnings }
 }
 
-function buildEntry(op: PendingOp, source: QueueSource, index: number, filePath?: string): QueueEntry {
+function buildEntry(op: PendingOp, source: QueueSource, index: number, filePath?: string, title?: string): QueueEntry {
   return {
     id: hash({ source, index, action: op.action, number: op.number }),
     source,
     index,
     op,
     filePath,
+    title,
   }
 }
diff --git a/src/server/types.ts b/src/server/types.ts
index ab0a1e8..8db215b 100644
--- a/src/server/types.ts
+++ b/src/server/types.ts
@@ -23,6 +23,8 @@ export interface QueueEntry {
   op: PendingOp
   /** Relative file path under the storage directory, for per-item entries. */
   filePath?: string
+  /** Title of the target issue/PR, looked up from syncState. Absent if the item isn't synced. */
+  title?: string
 }
 
 export interface QueueState {
diff --git a/ui/components/queue/EntryCard.vue b/ui/components/queue/EntryCard.vue
index 419bf6a..e44eb05 100644
--- a/ui/components/queue/EntryCard.vue
+++ b/ui/components/queue/EntryCard.vue
@@ -32,11 +32,6 @@ const op = computed(() => props.entry.op)
 const meta = computed(() => actionMeta(op.value.action))
 const accent = computed(() => (ACTIONS_COLOR_HEX as Record<string, string>)[op.value.action] ?? '#6b7280')
 
-const SOURCE_LABEL: Record<QueueEntry['source'], string> = {
-  'execute.yml': 'execute.yml',
-  'execute.md': 'execute.md',
-  'per-item': 'per-item',
-}
 const SOURCE_ICON: Record<QueueEntry['source'], string> = {
   'execute.yml': 'i-octicon-file-code-16',
   'execute.md': 'i-octicon-markdown-16',
@@ -98,19 +93,34 @@ async function openSource() {
         <span :class="meta.icon" />
         <span>{{ meta.label }}</span>
       </span>
-      <span
+      <div
         v-if="showNumber"
-        class="font-mono text-xs color-muted tabular-nums"
-      >#{{ op.number }}</span>
+        class="flex items-center gap-1.5 min-w-0 flex-1"
+      >
+        <span class="font-mono text-xs color-muted tabular-nums shrink-0">#{{ op.number }}</span>
+        <span
+          v-if="entry.title"
+          class="text-xs color-base truncate"
+        >{{ entry.title }}</span>
+      </div>
+      <div v-else class="flex-1" />
       <span
         v-if="op.ifUnchangedSince"
-        class="inline-flex items-center gap-1 text-xs color-muted"
+        class="inline-flex items-center gap-1 text-xs color-muted shrink-0"
         :title="`Only execute if the item is unchanged since ${op.ifUnchangedSince}`"
       >
         <span class="i-octicon-clock-16" />
         <DisplayDateBadge :time="op.ifUnchangedSince" />
       </span>
-      <div class="flex-1" />
+      <UiIconButton
+        v-if="sourcePath"
+        :icon="SOURCE_ICON[entry.source]"
+        size="sm"
+        :tooltip="`Open ${sourcePath} in editor`"
+        class="hover-fade"
+        data-testid="queue-entry-source-link"
+        @click.stop="openSource"
+      />
       <UiIconButton
         icon="i-ph-trash-duotone"
         size="sm"
@@ -189,19 +199,5 @@ async function openSource() {
       />
     </div>
 
-    <footer class="flex items-center gap-2 px-3 py-1.5 text-xs border-t border-base bg-#8881 dark:bg-#fff1">
-      <span class="badge gap-1 color-muted bg-base">
-        <span :class="SOURCE_ICON[entry.source]" />
-        <span class="font-mono">{{ SOURCE_LABEL[entry.source] }}</span>
-      </span>
-      <button
-        v-if="sourcePath"
-        type="button"
-        class="font-mono color-muted hover:color-active transition truncate min-w-0 text-left"
-        :title="`Open ${sourcePath} in editor`"
-        data-testid="queue-entry-source-link"
-        @click.stop="openSource"
-      >{{ sourcePath }}</button>
-    </footer>
   </article>
 </template>

From 4d38b1cd2613c866b3da8bb09f38dd378ce7789f Mon Sep 17 00:00:00 2001
From: Anthony Fu <github@antfu.me>
Date: Thu, 28 May 2026 13:54:40 +0900
Subject: [PATCH 3/4] fix(ui): render queue entry title even when number is
 hidden

Show the issue/PR title in the entry card whenever syncState knows it,
not only when the number is being rendered. Adds a regression test that
queue-builder propagates titles from syncState into yml entries.
---
 src/server/queue-builder.test.ts  | 48 +++++++++++++++++++++++++++++++
 ui/components/queue/EntryCard.vue | 11 ++++---
 2 files changed, 53 insertions(+), 6 deletions(-)

diff --git a/src/server/queue-builder.test.ts b/src/server/queue-builder.test.ts
index 2656b07..656818f 100644
--- a/src/server/queue-builder.test.ts
+++ b/src/server/queue-builder.test.ts
@@ -114,6 +114,54 @@ describe('buildQueueState', () => {
     expect(perItem).toBeDefined()
     expect(perItem?.op).toMatchObject({ action: 'close', number: 5 })
     expect(perItem?.filePath).toBe(filePath)
+    expect(perItem?.title).toBe('Sample')
+  })
+
+  it('populates entry.title from syncState for yml entries', async () => {
+    const dir = await createTempDir()
+    await writeFile(join(dir, 'execute.yml'), '- action: close\n  number: 7\n', 'utf8')
+
+    await saveSyncState(dir, {
+      version: 2,
+      repo: 'owner/repo',
+      items: {
+        7: {
+          number: 7,
+          kind: 'issue',
+          state: 'open',
+          lastUpdatedAt: '2026-01-01T00:00:00Z',
+          lastSyncedAt: '2026-01-01T00:00:00Z',
+          filePath: 'issues/00007-needs-cleanup.md',
+          data: {
+            item: {
+              number: 7,
+              kind: 'issue',
+              state: 'open',
+              updatedAt: '2026-01-01T00:00:00Z',
+              createdAt: '2026-01-01T00:00:00Z',
+              closedAt: null,
+              title: 'Needs cleanup',
+              body: null,
+              author: 'alice',
+              labels: [],
+              assignees: [],
+              milestone: null,
+            },
+            comments: [],
+          },
+        },
+      },
+      executions: [],
+    })
+
+    const queue = await buildQueueState({
+      storageDirAbsolute: dir,
+      executeFilePath: join(dir, 'execute.yml'),
+    })
+
+    const entry = queue.entries.find(e => e.op.number === 7)
+    expect(entry).toBeDefined()
+    expect(entry?.title).toBe('Needs cleanup')
   })
 
   it('assigns stable ids based on content and source', async () => {
diff --git a/ui/components/queue/EntryCard.vue b/ui/components/queue/EntryCard.vue
index e44eb05..d9330ba 100644
--- a/ui/components/queue/EntryCard.vue
+++ b/ui/components/queue/EntryCard.vue
@@ -93,17 +93,16 @@ async function openSource() {
         <span :class="meta.icon" />
         <span>{{ meta.label }}</span>
       </span>
-      <div
-        v-if="showNumber"
-        class="flex items-center gap-1.5 min-w-0 flex-1"
-      >
-        <span class="font-mono text-xs color-muted tabular-nums shrink-0">#{{ op.number }}</span>
+      <div class="flex items-center gap-1.5 min-w-0 flex-1">
+        <span
+          v-if="showNumber"
+          class="font-mono text-xs color-muted tabular-nums shrink-0"
+        >#{{ op.number }}</span>
         <span
           v-if="entry.title"
           class="text-xs color-base truncate"
         >{{ entry.title }}</span>
       </div>
-      <div v-else class="flex-1" />
       <span
         v-if="op.ifUnchangedSince"
         class="inline-flex items-center gap-1 text-xs color-muted shrink-0"

From 70c9247d54b02115143e964c1758683184919ef6 Mon Sep 17 00:00:00 2001
From: Anthony Fu <github@antfu.me>
Date: Thu, 28 May 2026 14:00:31 +0900
Subject: [PATCH 4/4] fix(ui): guard detail tabs against transient null item

When navigating between items the `item` computed briefly becomes null
before the v-if/v-else swaps in the empty state. Reka-ui's force-mounted
TabsContent re-rendered children during that window, which crashed
DetailConversationTab on item.author. Guard the tab bodies with v-if="item".
---
 ui/components/panel/Detail.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/ui/components/panel/Detail.vue b/ui/components/panel/Detail.vue
index fdc32ed..7329e08 100644
--- a/ui/components/panel/Detail.vue
+++ b/ui/components/panel/Detail.vue
@@ -414,6 +414,7 @@ async function discardThisItem() {
       <div ref="scrollContainer" data-scroll="detail" class="flex-1 overflow-y-auto">
         <TabsContent value="conversation">
           <PanelDetailConversationTab
+            v-if="item"
             :item="item"
             :comments="comments"
             :timeline="timeline"
@@ -427,13 +428,14 @@ async function discardThisItem() {
           <PanelDetailPrCommitsTab :commits="commits" />
         </TabsContent>
         <TabsContent value="changes">
-          <PanelDetailPrChangesTab :number="item.number" :has-patch="hasPatch" />
+          <PanelDetailPrChangesTab v-if="item" :number="item.number" :has-patch="hasPatch" />
         </TabsContent>
       </div>
     </TabsRoot>
 
     <div v-else ref="scrollContainer" data-scroll="detail" class="flex-1 overflow-y-auto">
       <PanelDetailConversationTab
+        v-if="item"
         :item="item"
         :comments="comments"
         :timeline="timeline"