From b79d13b4f25e1b854983e3cb60664d494ce025b9 Mon Sep 17 00:00:00 2001
From: pyr0ball <pyroballpcs@gmail.com>
Date: Thu, 2 Apr 2026 19:26:13 -0700
Subject: [PATCH] =?UTF-8?q?feat(vue):=20parity=20gaps=20#50,=20#54,=20#61?=
 =?UTF-8?q?=20=E2=80=94=20sort/filter,=20research=20modal,=20draft=20CL=20?=
 =?UTF-8?q?button?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#50 Job Review list view — sort + filter controls:
- Sort by best match / newest first / company A-Z (client-side computed)
- Remote-only checkbox filter
- Job count indicator; filters reset on tab switch
- Remote badge on list items

#61 Cover letter generation from approved tab:
- '✨ Draft' button on each approved-list item → /apply/:id
- No extra API call; ApplyWorkspace handles generation from there

#54 Company research modal (all API endpoints already existed):
- CompanyResearchModal.vue: 3-state machine (empty→generating→ready)
  polling /research/task every 3s, displays all 7 research sections
  (company, leadership, talking points, tech, funding, red flags,
  accessibility), copy-to-clipboard for talking points, ↺ Refresh
- InterviewCard: new 'research' emit + '🔍 Research' button for
  phone_screen/interviewing/offer stages
- InterviewsView: wires modal with researchJobId/Title/AutoGen state;
  auto-opens modal with autoGenerate=true when a job is moved to
  phone_screen (mirrors Streamlit behaviour)
---
 web/src/components/CompanyResearchModal.vue | 412 ++++++++++++++++++++
 web/src/components/InterviewCard.vue        |   2 +
 web/src/views/InterviewsView.vue            |  39 +-
 web/src/views/JobReviewView.vue             | 153 +++++++-
 4 files changed, 582 insertions(+), 24 deletions(-)
 create mode 100644 web/src/components/CompanyResearchModal.vue

diff --git a/web/src/components/CompanyResearchModal.vue b/web/src/components/CompanyResearchModal.vue
new file mode 100644
index 0000000..c5e175b
--- /dev/null
+++ b/web/src/components/CompanyResearchModal.vue
@@ -0,0 +1,412 @@
+<template>
+  <Teleport to="body">
+    <div class="modal-backdrop" role="dialog" aria-modal="true" :aria-labelledby="`research-title-${jobId}`" @click.self="emit('close')">
+      <div class="modal-card">
+        <!-- Header -->
+        <div class="modal-header">
+          <h2 :id="`research-title-${jobId}`" class="modal-title">
+            🔍 {{ jobTitle }} — Company Research
+          </h2>
+          <div class="modal-header-actions">
+            <button v-if="state === 'ready'" class="btn-regen" @click="generate" title="Refresh research">↺ Refresh</button>
+            <button class="btn-close" @click="emit('close')" aria-label="Close">✕</button>
+          </div>
+        </div>
+
+        <!-- Generating state -->
+        <div v-if="state === 'generating'" class="modal-body modal-body--loading">
+          <div class="research-spinner" aria-hidden="true" />
+          <p class="generating-msg">{{ stage ?? 'Researching…' }}</p>
+          <p class="generating-sub">This takes 30–90 seconds depending on your LLM backend.</p>
+        </div>
+
+        <!-- Error state -->
+        <div v-else-if="state === 'error'" class="modal-body modal-body--error">
+          <p>Research generation failed.</p>
+          <p v-if="errorMsg" class="error-detail">{{ errorMsg }}</p>
+          <button class="btn-primary-sm" @click="generate">Retry</button>
+        </div>
+
+        <!-- Ready state -->
+        <div v-else-if="state === 'ready' && brief" class="modal-body">
+          <p v-if="brief.generated_at" class="generated-at">
+            Updated {{ fmtDate(brief.generated_at) }}
+          </p>
+
+          <section v-if="brief.company_brief" class="research-section">
+            <h3 class="section-title">🏢 Company</h3>
+            <p class="section-body">{{ brief.company_brief }}</p>
+          </section>
+
+          <section v-if="brief.ceo_brief" class="research-section">
+            <h3 class="section-title">👤 Leadership</h3>
+            <p class="section-body">{{ brief.ceo_brief }}</p>
+          </section>
+
+          <section v-if="brief.talking_points" class="research-section">
+            <div class="section-title-row">
+              <h3 class="section-title">💬 Talking Points</h3>
+              <button class="btn-copy" @click="copy(brief.talking_points!)" :aria-label="copied ? 'Copied!' : 'Copy talking points'">
+                {{ copied ? '✓ Copied' : '⎘ Copy' }}
+              </button>
+            </div>
+            <p class="section-body">{{ brief.talking_points }}</p>
+          </section>
+
+          <section v-if="brief.tech_brief" class="research-section">
+            <h3 class="section-title">⚙️ Tech Stack</h3>
+            <p class="section-body">{{ brief.tech_brief }}</p>
+          </section>
+
+          <section v-if="brief.funding_brief" class="research-section">
+            <h3 class="section-title">💰 Funding & Stage</h3>
+            <p class="section-body">{{ brief.funding_brief }}</p>
+          </section>
+
+          <section v-if="brief.red_flags" class="research-section research-section--warn">
+            <h3 class="section-title">⚠️ Red Flags</h3>
+            <p class="section-body">{{ brief.red_flags }}</p>
+          </section>
+
+          <section v-if="brief.accessibility_brief" class="research-section">
+            <h3 class="section-title">♿ Inclusion & Accessibility</h3>
+            <p class="section-body section-body--private">{{ brief.accessibility_brief }}</p>
+            <p class="private-note">For your decision-making only — not disclosed in applications.</p>
+          </section>
+        </div>
+
+        <!-- Empty state (no research, not generating) -->
+        <div v-else class="modal-body modal-body--empty">
+          <p>No research yet for this company.</p>
+          <button class="btn-primary-sm" @click="generate">🔍 Generate Research</button>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue'
+import { useApiFetch } from '../composables/useApi'
+
+const props = defineProps<{
+  jobId: number
+  jobTitle: string
+  autoGenerate?: boolean
+}>()
+
+const emit = defineEmits<{ close: [] }>()
+
+interface ResearchBrief {
+  company_brief: string | null
+  ceo_brief: string | null
+  talking_points: string | null
+  tech_brief: string | null
+  funding_brief: string | null
+  red_flags: string | null
+  accessibility_brief: string | null
+  generated_at: string | null
+}
+
+type ModalState = 'loading' | 'generating' | 'ready' | 'empty' | 'error'
+
+const state    = ref<ModalState>('loading')
+const brief    = ref<ResearchBrief | null>(null)
+const stage    = ref<string | null>(null)
+const errorMsg = ref<string | null>(null)
+const copied   = ref(false)
+let   pollId:  ReturnType<typeof setInterval> | null = null
+
+function fmtDate(iso: string) {
+  const d = new Date(iso)
+  const diffH = Math.round((Date.now() - d.getTime()) / 3600000)
+  if (diffH < 1)   return 'just now'
+  if (diffH < 24)  return `${diffH}h ago`
+  if (diffH < 168) return `${Math.floor(diffH / 24)}d ago`
+  return d.toLocaleDateString([], { month: 'short', day: 'numeric' })
+}
+
+async function copy(text: string) {
+  await navigator.clipboard.writeText(text)
+  copied.value = true
+  setTimeout(() => { copied.value = false }, 2000)
+}
+
+function stopPoll() {
+  if (pollId) { clearInterval(pollId); pollId = null }
+}
+
+async function pollTask() {
+  const { data } = await useApiFetch<{ status: string; stage: string | null; message: string | null }>(
+    `/api/jobs/${props.jobId}/research/task`,
+  )
+  if (!data) return
+  stage.value = data.stage
+
+  if (data.status === 'completed') {
+    stopPoll()
+    await load()
+  } else if (data.status === 'failed') {
+    stopPoll()
+    state.value = 'error'
+    errorMsg.value = data.message ?? 'Unknown error'
+  }
+}
+
+async function load() {
+  const { data, error } = await useApiFetch<ResearchBrief>(`/api/jobs/${props.jobId}/research`)
+  if (error) {
+    if (error.kind === 'http' && error.status === 404) {
+      // Check if a task is running
+      const { data: task } = await useApiFetch<{ status: string; stage: string | null; message: string | null }>(
+        `/api/jobs/${props.jobId}/research/task`,
+      )
+      if (task && (task.status === 'queued' || task.status === 'running')) {
+        state.value = 'generating'
+        stage.value = task.stage
+        pollId = setInterval(pollTask, 3000)
+      } else if (props.autoGenerate) {
+        await generate()
+      } else {
+        state.value = 'empty'
+      }
+    } else {
+      state.value = 'error'
+      errorMsg.value = error.kind === 'http' ? error.detail : error.message
+    }
+    return
+  }
+  brief.value = data
+  state.value = 'ready'
+}
+
+async function generate() {
+  state.value = 'generating'
+  stage.value = null
+  errorMsg.value = null
+  stopPoll()
+  const { error } = await useApiFetch(`/api/jobs/${props.jobId}/research/generate`, { method: 'POST' })
+  if (error) {
+    state.value = 'error'
+    errorMsg.value = error.kind === 'http' ? error.detail : error.message
+    return
+  }
+  pollId = setInterval(pollTask, 3000)
+}
+
+function onEsc(e: KeyboardEvent) {
+  if (e.key === 'Escape') emit('close')
+}
+
+onMounted(async () => {
+  document.addEventListener('keydown', onEsc)
+  await load()
+})
+
+onUnmounted(() => {
+  document.removeEventListener('keydown', onEsc)
+  stopPoll()
+})
+</script>
+
+<style scoped>
+.modal-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.55);
+  z-index: 500;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding: var(--space-8) var(--space-4);
+  overflow-y: auto;
+}
+
+.modal-card {
+  background: var(--color-surface-raised);
+  border-radius: var(--radius-lg);
+  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.3);
+  width: 100%;
+  max-width: 620px;
+  overflow: hidden;
+}
+
+.modal-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--space-3);
+  padding: var(--space-5) var(--space-6);
+  border-bottom: 1px solid var(--color-border-light);
+}
+
+.modal-title {
+  font-size: 1rem;
+  font-weight: 700;
+  color: var(--color-text);
+  margin: 0;
+  line-height: 1.3;
+}
+
+.modal-header-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  flex-shrink: 0;
+}
+
+.btn-close {
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 1rem;
+  color: var(--color-text-muted);
+  padding: 2px 6px;
+}
+
+.btn-regen {
+  background: none;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  font-size: 0.78rem;
+  color: var(--color-text-muted);
+  padding: 2px 8px;
+}
+
+.modal-body {
+  padding: var(--space-6);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-5);
+  max-height: 70vh;
+  overflow-y: auto;
+}
+
+.modal-body--loading {
+  align-items: center;
+  text-align: center;
+  padding: var(--space-10) var(--space-6);
+  gap: var(--space-4);
+}
+
+.modal-body--empty {
+  align-items: center;
+  text-align: center;
+  padding: var(--space-10) var(--space-6);
+  gap: var(--space-4);
+  color: var(--color-text-muted);
+}
+
+.modal-body--error {
+  align-items: center;
+  text-align: center;
+  padding: var(--space-8) var(--space-6);
+  gap: var(--space-3);
+  color: var(--color-error);
+}
+
+.error-detail {
+  font-size: 0.8rem;
+  opacity: 0.8;
+}
+
+.research-spinner {
+  width: 36px;
+  height: 36px;
+  border: 3px solid var(--color-border);
+  border-top-color: var(--color-primary);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin { to { transform: rotate(360deg); } }
+
+.generating-msg {
+  font-weight: 600;
+  color: var(--color-text);
+}
+
+.generating-sub {
+  font-size: 0.8rem;
+  color: var(--color-text-muted);
+}
+
+.generated-at {
+  font-size: 0.75rem;
+  color: var(--color-text-muted);
+  margin-bottom: calc(-1 * var(--space-2));
+}
+
+.research-section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  padding-bottom: var(--space-4);
+  border-bottom: 1px solid var(--color-border-light);
+}
+
+.research-section:last-child {
+  border-bottom: none;
+  padding-bottom: 0;
+}
+
+.research-section--warn .section-title {
+  color: var(--color-warning);
+}
+
+.section-title-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.section-title {
+  font-size: 0.8rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--color-text-muted);
+  margin: 0;
+}
+
+.section-body {
+  font-size: 0.875rem;
+  color: var(--color-text);
+  line-height: 1.6;
+  white-space: pre-wrap;
+}
+
+.section-body--private {
+  font-style: italic;
+}
+
+.private-note {
+  font-size: 0.7rem;
+  color: var(--color-text-muted);
+}
+
+.btn-copy {
+  background: none;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  font-size: 0.72rem;
+  color: var(--color-text-muted);
+  padding: 2px 8px;
+  transition: color 150ms, border-color 150ms;
+}
+
+.btn-copy:hover { color: var(--color-primary); border-color: var(--color-primary); }
+
+.btn-primary-sm {
+  background: var(--color-primary);
+  color: #fff;
+  border: none;
+  border-radius: var(--radius-md);
+  padding: var(--space-2) var(--space-5);
+  font-size: 0.875rem;
+  font-weight: 600;
+  cursor: pointer;
+}
+</style>
diff --git a/web/src/components/InterviewCard.vue b/web/src/components/InterviewCard.vue
index 1955f7d..0d9d1c7 100644
--- a/web/src/components/InterviewCard.vue
+++ b/web/src/components/InterviewCard.vue
@@ -13,6 +13,7 @@ const emit = defineEmits<{
   move: [jobId: number, preSelectedStage?: PipelineStage]
   prep: [jobId: number]
   survey: [jobId: number]
+  research: [jobId: number]
 }>()
 
 // Signal state
@@ -180,6 +181,7 @@ const columnColor = computed(() => {
     </div>
     <footer class="card-footer">
       <button class="card-action" @click.stop="emit('move', job.id)">Move to… ›</button>
+      <button v-if="['phone_screen', 'interviewing', 'offer'].includes(job.status)" class="card-action" @click.stop="emit('research', job.id)">🔍 Research</button>
       <button v-if="['phone_screen', 'interviewing', 'offer'].includes(job.status)" class="card-action" @click.stop="emit('prep', job.id)">Prep →</button>
       <button
         v-if="['survey', 'phone_screen', 'interviewing', 'offer'].includes(job.status)"
diff --git a/web/src/views/InterviewsView.vue b/web/src/views/InterviewsView.vue
index 057861f..f0f9c46 100644
--- a/web/src/views/InterviewsView.vue
+++ b/web/src/views/InterviewsView.vue
@@ -7,6 +7,7 @@ import type { StageSignal } from '../stores/interviews'
 import { useApiFetch } from '../composables/useApi'
 import InterviewCard from '../components/InterviewCard.vue'
 import MoveToSheet from '../components/MoveToSheet.vue'
+import CompanyResearchModal from '../components/CompanyResearchModal.vue'
 
 const router = useRouter()
 const store  = useInterviewsStore()
@@ -22,10 +23,29 @@ function openMove(jobId: number, preSelectedStage?: PipelineStage) {
 
 async function onMove(stage: PipelineStage, opts: { interview_date?: string; rejection_stage?: string }) {
   if (!moveTarget.value) return
+  const movedJob = moveTarget.value
   const wasHired = stage === 'hired'
-  await store.move(moveTarget.value.id, stage, opts)
+  await store.move(movedJob.id, stage, opts)
   moveTarget.value = null
   if (wasHired) triggerConfetti()
+  // Auto-open research modal when moving to phone_screen (mirrors Streamlit behaviour)
+  if (stage === 'phone_screen') openResearch(movedJob.id, `${movedJob.title} at ${movedJob.company}`)
+}
+
+// ── Company research modal ─────────────────────────────────────────────────────
+const researchJobId    = ref<number | null>(null)
+const researchJobTitle = ref('')
+const researchAutoGen  = ref(false)
+
+function openResearch(jobId: number, jobTitle: string, autoGenerate = true) {
+  researchJobId.value    = jobId
+  researchJobTitle.value = jobTitle
+  researchAutoGen.value  = autoGenerate
+}
+
+function onInterviewCardResearch(jobId: number) {
+  const job = store.jobs.find(j => j.id === jobId)
+  if (job) openResearch(jobId, `${job.title} at ${job.company}`, false)
 }
 
 // ── Collapsible Applied section ────────────────────────────────────────────
@@ -466,7 +486,8 @@ function daysSince(dateStr: string | null) {
         </div>
         <InterviewCard v-for="(job, i) in store.phoneScreen" :key="job.id" :job="job"
           :focused="focusedCol === 0 && focusedCard === i"
-          @move="openMove" @prep="router.push(`/prep/${$event}`)" @survey="router.push('/survey/' + $event)" />
+          @move="openMove" @prep="router.push(`/prep/${$event}`)" @survey="router.push('/survey/' + $event)"
+          @research="onInterviewCardResearch" />
       </div>
 
       <div class="kanban-col" :class="{ 'kanban-col--focused': focusedCol === 1 }" aria-label="Interviewing">
@@ -479,7 +500,8 @@ function daysSince(dateStr: string | null) {
         </div>
         <InterviewCard v-for="(job, i) in store.interviewing" :key="job.id" :job="job"
           :focused="focusedCol === 1 && focusedCard === i"
-          @move="openMove" @prep="router.push(`/prep/${$event}`)" @survey="router.push('/survey/' + $event)" />
+          @move="openMove" @prep="router.push(`/prep/${$event}`)" @survey="router.push('/survey/' + $event)"
+          @research="onInterviewCardResearch" />
       </div>
 
       <div class="kanban-col" :class="{ 'kanban-col--focused': focusedCol === 2 }" aria-label="Offer and Hired">
@@ -492,7 +514,8 @@ function daysSince(dateStr: string | null) {
         </div>
         <InterviewCard v-for="(job, i) in store.offerHired" :key="job.id" :job="job"
           :focused="focusedCol === 2 && focusedCard === i"
-          @move="openMove" @prep="router.push(`/prep/${$event}`)" @survey="router.push('/survey/' + $event)" />
+          @move="openMove" @prep="router.push(`/prep/${$event}`)" @survey="router.push('/survey/' + $event)"
+          @research="onInterviewCardResearch" />
       </div>
     </section>
 
@@ -525,6 +548,14 @@ function daysSince(dateStr: string | null) {
       @move="onMove"
       @close="moveTarget = null; movePreSelected = undefined"
     />
+
+    <CompanyResearchModal
+      v-if="researchJobId !== null"
+      :jobId="researchJobId"
+      :jobTitle="researchJobTitle"
+      :autoGenerate="researchAutoGen"
+      @close="researchJobId = null"
+    />
   </div>
 </template>
 
diff --git a/web/src/views/JobReviewView.vue b/web/src/views/JobReviewView.vue
index 02718ba..b60f930 100644
--- a/web/src/views/JobReviewView.vue
+++ b/web/src/views/JobReviewView.vue
@@ -98,25 +98,50 @@
         <span class="spinner" aria-hidden="true" />
         <span>Loading…</span>
       </div>
-      <div v-else-if="store.listJobs.length === 0" class="review__empty" role="status">
-        <p class="empty-desc">No {{ activeTab }} jobs.</p>
-      </div>
-      <ul v-else class="job-list" role="list">
-        <li v-for="job in store.listJobs" :key="job.id" class="job-list__item">
-          <div class="job-list__info">
-            <span class="job-list__title">{{ job.title }}</span>
-            <span class="job-list__company">{{ job.company }}</span>
-          </div>
-          <div class="job-list__meta">
-            <span v-if="job.match_score !== null" class="score-pill" :class="scorePillClass(job.match_score)">
-              {{ job.match_score }}%
-            </span>
-            <a :href="job.url" target="_blank" rel="noopener noreferrer" class="job-list__link">
-              View ↗
-            </a>
-          </div>
-        </li>
-      </ul>
+      <template v-else>
+        <!-- Sort + filter bar -->
+        <div class="list-controls" aria-label="Sort and filter">
+          <select v-model="sortBy" class="list-sort" aria-label="Sort by">
+            <option value="match_score">Best match</option>
+            <option value="date_found">Newest first</option>
+            <option value="company">Company A–Z</option>
+          </select>
+          <label class="list-filter-remote">
+            <input type="checkbox" v-model="filterRemote" />
+            Remote only
+          </label>
+          <span class="list-count">{{ sortedFilteredJobs.length }} job{{ sortedFilteredJobs.length !== 1 ? 's' : '' }}</span>
+        </div>
+
+        <div v-if="sortedFilteredJobs.length === 0" class="review__empty" role="status">
+          <p class="empty-desc">No {{ activeTab }} jobs{{ filterRemote ? ' (remote only)' : '' }}.</p>
+        </div>
+        <ul v-else class="job-list" role="list">
+          <li v-for="job in sortedFilteredJobs" :key="job.id" class="job-list__item">
+            <div class="job-list__info">
+              <span class="job-list__title">{{ job.title }}</span>
+              <span class="job-list__company">
+                {{ job.company }}
+                <span v-if="job.is_remote" class="remote-tag">Remote</span>
+              </span>
+            </div>
+            <div class="job-list__meta">
+              <span v-if="job.match_score !== null" class="score-pill" :class="scorePillClass(job.match_score)">
+                {{ job.match_score }}%
+              </span>
+              <button
+                v-if="activeTab === 'approved'"
+                class="job-list__action"
+                @click="router.push(`/apply/${job.id}`)"
+                :aria-label="`Draft cover letter for ${job.title}`"
+              >✨ Draft</button>
+              <a :href="job.url" target="_blank" rel="noopener noreferrer" class="job-list__link">
+                View ↗
+              </a>
+            </div>
+          </li>
+        </ul>
+      </template>
     </div>
 
     <!-- ── Help overlay ─────────────────────────────────────────────────── -->
@@ -186,12 +211,13 @@
 
 <script setup lang="ts">
 import { ref, computed, watch, onMounted, onUnmounted } from 'vue'
-import { useRoute } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 import { useReviewStore } from '../stores/review'
 import JobCardStack from '../components/JobCardStack.vue'
 
 const store    = useReviewStore()
 const route    = useRoute()
+const router   = useRouter()
 const stackRef = ref<InstanceType<typeof JobCardStack> | null>(null)
 
 // ─── Tabs ──────────────────────────────────────────────────────────────────────
@@ -315,6 +341,30 @@ function onKeyDown(e: KeyboardEvent) {
   }
 }
 
+// ─── List view: sort + filter ─────────────────────────────────────────────────
+
+type SortKey = 'match_score' | 'date_found' | 'company'
+const sortBy       = ref<SortKey>('match_score')
+const filterRemote = ref(false)
+
+const sortedFilteredJobs = computed(() => {
+  let jobs = [...store.listJobs]
+  if (filterRemote.value) jobs = jobs.filter(j => j.is_remote)
+  jobs.sort((a, b) => {
+    if (sortBy.value === 'match_score') return (b.match_score ?? -1) - (a.match_score ?? -1)
+    if (sortBy.value === 'date_found')  return new Date(b.date_found).getTime() - new Date(a.date_found).getTime()
+    if (sortBy.value === 'company')     return (a.company ?? '').localeCompare(b.company ?? '')
+    return 0
+  })
+  return jobs
+})
+
+// Reset filters when switching tabs
+watch(activeTab, () => {
+  filterRemote.value = false
+  sortBy.value = 'match_score'
+})
+
 // ─── List view score pill ─────────────────────────────────────────────────────
 
 function scorePillClass(score: number) {
@@ -659,6 +709,69 @@ kbd {
   font-weight: 600;
 }
 
+.job-list__action {
+  font-size: var(--text-xs);
+  font-weight: 600;
+  color: var(--app-primary);
+  background: color-mix(in srgb, var(--app-primary) 10%, transparent);
+  border: 1px solid color-mix(in srgb, var(--app-primary) 25%, transparent);
+  border-radius: var(--radius-sm);
+  padding: 2px 8px;
+  cursor: pointer;
+  transition: background 150ms;
+  white-space: nowrap;
+}
+
+.job-list__action:hover {
+  background: color-mix(in srgb, var(--app-primary) 18%, transparent);
+}
+
+.remote-tag {
+  font-size: 0.65rem;
+  font-weight: 700;
+  color: var(--color-info);
+  background: color-mix(in srgb, var(--color-info) 12%, transparent);
+  border-radius: var(--radius-full);
+  padding: 1px 5px;
+  margin-left: 4px;
+}
+
+/* ── List controls (sort + filter) ──────────────────────────────────── */
+
+.list-controls {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  flex-wrap: wrap;
+  margin-bottom: var(--space-3);
+}
+
+.list-sort {
+  font-size: var(--text-xs);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  background: var(--color-surface-raised);
+  color: var(--color-text);
+  padding: 3px 8px;
+  cursor: pointer;
+}
+
+.list-filter-remote {
+  display: flex;
+  align-items: center;
+  gap: var(--space-1);
+  font-size: var(--text-xs);
+  color: var(--color-text-muted);
+  cursor: pointer;
+  user-select: none;
+}
+
+.list-count {
+  font-size: var(--text-xs);
+  color: var(--color-text-muted);
+  margin-left: auto;
+}
+
 /* ── Help overlay ────────────────────────────────────────────────────── */
 
 .help-overlay {