feat: CorrectionsView and useSftKeyboard composable
This commit is contained in:
parent
03e5f9f9b4
commit
e63d77127b
2 changed files with 338 additions and 0 deletions
42
web/src/composables/useSftKeyboard.ts
Normal file
42
web/src/composables/useSftKeyboard.ts
Normal file
|
|
@ -0,0 +1,42 @@
|
||||||
|
// src/composables/useSftKeyboard.ts
|
||||||
|
import { onUnmounted, getCurrentInstance } from 'vue'
|
||||||
|
|
||||||
|
interface Options {
|
||||||
|
onCorrect: () => void
|
||||||
|
onDiscard: () => void
|
||||||
|
onFlag: () => void
|
||||||
|
onEscape: () => void
|
||||||
|
onSubmit: () => void
|
||||||
|
isEditing: () => boolean // returns true when correction area is open
|
||||||
|
}
|
||||||
|
|
||||||
|
export function useSftKeyboard(opts: Options) {
|
||||||
|
function handler(e: KeyboardEvent) {
|
||||||
|
// Never intercept keys when focus is in an input (correction textarea handles its own keys)
|
||||||
|
if (e.target instanceof HTMLInputElement) return
|
||||||
|
|
||||||
|
// When correction area is open, only handle Escape (textarea handles Ctrl+Enter itself)
|
||||||
|
if (e.target instanceof HTMLTextAreaElement) return
|
||||||
|
|
||||||
|
const k = e.key.toLowerCase()
|
||||||
|
|
||||||
|
if (opts.isEditing()) {
|
||||||
|
if (k === 'escape') opts.onEscape()
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
if (k === 'c') { opts.onCorrect(); return }
|
||||||
|
if (k === 'd') { opts.onDiscard(); return }
|
||||||
|
if (k === 'f') { opts.onFlag(); return }
|
||||||
|
if (k === 'escape') { opts.onEscape(); return }
|
||||||
|
}
|
||||||
|
|
||||||
|
window.addEventListener('keydown', handler)
|
||||||
|
const cleanup = () => window.removeEventListener('keydown', handler)
|
||||||
|
|
||||||
|
if (getCurrentInstance()) {
|
||||||
|
onUnmounted(cleanup)
|
||||||
|
}
|
||||||
|
|
||||||
|
return { cleanup }
|
||||||
|
}
|
||||||
296
web/src/views/CorrectionsView.vue
Normal file
296
web/src/views/CorrectionsView.vue
Normal file
|
|
@ -0,0 +1,296 @@
|
||||||
|
<template>
|
||||||
|
<div class="corrections-view">
|
||||||
|
<header class="cv-header">
|
||||||
|
<span class="queue-count">
|
||||||
|
<template v-if="loading">Loading…</template>
|
||||||
|
<template v-else-if="store.totalRemaining > 0">
|
||||||
|
{{ store.totalRemaining }} remaining
|
||||||
|
</template>
|
||||||
|
<span v-else class="queue-empty-label">All caught up</span>
|
||||||
|
</span>
|
||||||
|
<div class="header-actions">
|
||||||
|
<button @click="handleUndo" :disabled="!store.lastAction" class="btn-action">↩ Undo</button>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<!-- States -->
|
||||||
|
<div v-if="loading" class="skeleton-card" aria-label="Loading candidates" />
|
||||||
|
|
||||||
|
<div v-else-if="apiError" class="error-display" role="alert">
|
||||||
|
<p>Couldn't reach Avocet API.</p>
|
||||||
|
<button @click="fetchBatch" class="btn-action">Retry</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-else-if="!store.current" class="empty-state">
|
||||||
|
<p>No candidates need review.</p>
|
||||||
|
<p class="empty-hint">Import a benchmark run from the Settings tab to get started.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<template v-else>
|
||||||
|
<div class="card-wrapper">
|
||||||
|
<SftCard
|
||||||
|
:item="store.current"
|
||||||
|
:correcting="correcting"
|
||||||
|
@correct="startCorrection"
|
||||||
|
@discard="handleDiscard"
|
||||||
|
@flag="handleFlag"
|
||||||
|
@submit-correction="handleCorrect"
|
||||||
|
@cancel-correction="correcting = false"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<!-- Stats footer -->
|
||||||
|
<footer v-if="stats" class="stats-footer">
|
||||||
|
<span class="stat">✓ {{ stats.by_status?.approved ?? 0 }} approved</span>
|
||||||
|
<span class="stat">✕ {{ stats.by_status?.discarded ?? 0 }} discarded</span>
|
||||||
|
<span class="stat">⚑ {{ stats.by_status?.model_rejected ?? 0 }} flagged</span>
|
||||||
|
<a
|
||||||
|
v-if="(stats.export_ready ?? 0) > 0"
|
||||||
|
:href="exportUrl"
|
||||||
|
download
|
||||||
|
class="btn-export"
|
||||||
|
>
|
||||||
|
⬇ Export {{ stats.export_ready }} corrections
|
||||||
|
</a>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<!-- Undo toast (inline — UndoToast.vue uses label store's LastAction shape, not SFT's) -->
|
||||||
|
<div v-if="store.lastAction" class="undo-toast">
|
||||||
|
<span>Last: {{ store.lastAction.type }}</span>
|
||||||
|
<button @click="handleUndo" class="btn-undo">↩ Undo</button>
|
||||||
|
<button @click="store.clearLastAction()" class="btn-dismiss">✕</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, onMounted } from 'vue'
|
||||||
|
import { useSftStore } from '../stores/sft'
|
||||||
|
import { useSftKeyboard } from '../composables/useSftKeyboard'
|
||||||
|
import SftCard from '../components/SftCard.vue'
|
||||||
|
|
||||||
|
const store = useSftStore()
|
||||||
|
const loading = ref(false)
|
||||||
|
const apiError = ref(false)
|
||||||
|
const correcting = ref(false)
|
||||||
|
const stats = ref<Record<string, any> | null>(null)
|
||||||
|
const exportUrl = '/api/sft/export'
|
||||||
|
|
||||||
|
useSftKeyboard({
|
||||||
|
onCorrect: () => { if (store.current && !correcting.value) correcting.value = true },
|
||||||
|
onDiscard: () => { if (store.current && !correcting.value) handleDiscard() },
|
||||||
|
onFlag: () => { if (store.current && !correcting.value) handleFlag() },
|
||||||
|
onEscape: () => { correcting.value = false },
|
||||||
|
onSubmit: () => {},
|
||||||
|
isEditing: () => correcting.value,
|
||||||
|
})
|
||||||
|
|
||||||
|
async function fetchBatch() {
|
||||||
|
loading.value = true
|
||||||
|
apiError.value = false
|
||||||
|
try {
|
||||||
|
const res = await fetch('/api/sft/queue?per_page=20')
|
||||||
|
if (!res.ok) throw new Error('API error')
|
||||||
|
const data = await res.json()
|
||||||
|
store.queue = data.items
|
||||||
|
store.totalRemaining = data.total
|
||||||
|
} catch {
|
||||||
|
apiError.value = true
|
||||||
|
} finally {
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function fetchStats() {
|
||||||
|
try {
|
||||||
|
const res = await fetch('/api/sft/stats')
|
||||||
|
if (res.ok) stats.value = await res.json()
|
||||||
|
} catch { /* ignore */ }
|
||||||
|
}
|
||||||
|
|
||||||
|
function startCorrection() {
|
||||||
|
correcting.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
async function handleCorrect(text: string) {
|
||||||
|
if (!store.current) return
|
||||||
|
const item = store.current
|
||||||
|
store.setLastAction('correct', item)
|
||||||
|
store.removeCurrentFromQueue()
|
||||||
|
correcting.value = false
|
||||||
|
store.totalRemaining = Math.max(0, store.totalRemaining - 1)
|
||||||
|
await fetch('/api/sft/submit', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify({ id: item.id, action: 'correct', corrected_response: text }),
|
||||||
|
})
|
||||||
|
fetchStats()
|
||||||
|
if (store.queue.length < 5) fetchBatch()
|
||||||
|
}
|
||||||
|
|
||||||
|
async function handleDiscard() {
|
||||||
|
if (!store.current) return
|
||||||
|
const item = store.current
|
||||||
|
store.setLastAction('discard', item)
|
||||||
|
store.removeCurrentFromQueue()
|
||||||
|
store.totalRemaining = Math.max(0, store.totalRemaining - 1)
|
||||||
|
await fetch('/api/sft/submit', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify({ id: item.id, action: 'discard' }),
|
||||||
|
})
|
||||||
|
fetchStats()
|
||||||
|
if (store.queue.length < 5) fetchBatch()
|
||||||
|
}
|
||||||
|
|
||||||
|
async function handleFlag() {
|
||||||
|
if (!store.current) return
|
||||||
|
const item = store.current
|
||||||
|
store.setLastAction('flag', item)
|
||||||
|
store.removeCurrentFromQueue()
|
||||||
|
store.totalRemaining = Math.max(0, store.totalRemaining - 1)
|
||||||
|
await fetch('/api/sft/submit', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify({ id: item.id, action: 'flag' }),
|
||||||
|
})
|
||||||
|
fetchStats()
|
||||||
|
if (store.queue.length < 5) fetchBatch()
|
||||||
|
}
|
||||||
|
|
||||||
|
async function handleUndo() {
|
||||||
|
if (!store.lastAction) return
|
||||||
|
const { item } = store.lastAction
|
||||||
|
store.restoreItem(item)
|
||||||
|
store.totalRemaining++
|
||||||
|
store.clearLastAction()
|
||||||
|
await fetch('/api/sft/undo', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify({ id: item.id }),
|
||||||
|
})
|
||||||
|
fetchStats()
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
fetchBatch()
|
||||||
|
fetchStats()
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.corrections-view {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
min-height: 100dvh;
|
||||||
|
padding: var(--space-4);
|
||||||
|
gap: var(--space-4);
|
||||||
|
max-width: 760px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cv-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.queue-count {
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--color-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.queue-empty-label { color: var(--color-text-muted); }
|
||||||
|
|
||||||
|
.btn-action {
|
||||||
|
padding: var(--space-2) var(--space-3);
|
||||||
|
border: 1px solid var(--color-border);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
background: var(--color-surface-raised);
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 0.88rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-action:disabled { opacity: 0.4; cursor: not-allowed; }
|
||||||
|
|
||||||
|
.skeleton-card {
|
||||||
|
height: 320px;
|
||||||
|
background: var(--color-surface-alt);
|
||||||
|
border-radius: var(--radius-lg);
|
||||||
|
animation: pulse 1.5s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes pulse {
|
||||||
|
0%, 100% { opacity: 1; }
|
||||||
|
50% { opacity: 0.5; }
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
.skeleton-card { animation: none; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-display, .empty-state {
|
||||||
|
text-align: center;
|
||||||
|
padding: var(--space-12);
|
||||||
|
color: var(--color-text-muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-hint { font-size: 0.88rem; margin-top: var(--space-2); }
|
||||||
|
|
||||||
|
.stats-footer {
|
||||||
|
display: flex;
|
||||||
|
gap: var(--space-4);
|
||||||
|
align-items: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
padding: var(--space-3) 0;
|
||||||
|
border-top: 1px solid var(--color-border-light);
|
||||||
|
font-size: 0.85rem;
|
||||||
|
color: var(--color-text-muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-export {
|
||||||
|
margin-left: auto;
|
||||||
|
padding: var(--space-2) var(--space-3);
|
||||||
|
background: var(--color-primary);
|
||||||
|
color: var(--color-text-inverse, #fff);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
text-decoration: none;
|
||||||
|
font-size: 0.88rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.undo-toast {
|
||||||
|
position: fixed;
|
||||||
|
bottom: var(--space-6);
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--space-3);
|
||||||
|
background: var(--color-surface-raised);
|
||||||
|
border: 1px solid var(--color-border);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
padding: var(--space-3) var(--space-4);
|
||||||
|
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-undo {
|
||||||
|
background: var(--color-primary);
|
||||||
|
color: var(--color-text-inverse, #fff);
|
||||||
|
border: none;
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
padding: var(--space-1) var(--space-3);
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 0.88rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-dismiss {
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
color: var(--color-text-muted);
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in a new issue