Circuit-Forge/peregrine
5
0
Fork 0
Code Issues 29 Pull requests Projects Releases 8 Packages Wiki Activity Actions

fix(wizard): quality review fixes — store encapsulation + skip action + settings CTA

Browse source 
- Add keepChatting() action to aiInterview store; replace direct store.complete = false
  mutation in WizardAIView template with store.keepChatting()
- Add skip() action wrapping SKIP_SIGNAL constant; replace magic string store.send('skip')
  with store.skip()
- Fix skip button disabled condition to include || store.complete (was always enabled
  when wizard was complete, allowing spurious skip after finalize)
- Add _persist() call after user bubble append in send() so localStorage draft is
  written before the async fetch — prevents stale draft on browser refresh during
  slow LLM call
- Fix @click="store.startOver" → @click="store.startOver()" (missing parentheses)
- Add 2 tests: skip() sends SKIP_SIGNAL, keepChatting() clears complete without reset
- Remove 'ultra' from Tier type in appConfig.ts (violates no-ultra-tier policy)
- Add MyProfileView wizard callout banner with tier-aware unlock/upgrade CTAs
- Add clarifying comment on wizard route guard in router/index.ts

Closes: #77
This commit is contained in:
pyr0ball 2026-06-14 12:13:58 -07:00
parent cecf85de02
commit eebfc84a80
6 changed files with 179 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
web/src/router/index.ts
View file

@ -37,7 +37,7 @@ export const router = createRouter({
{ path: 'developer', component: () => import('../views/settings/DeveloperView.vue') },
],
},
// AI profile wizard — standalone full-page chat
// AI profile wizard — post-setup settings entry point (correctly blocked by wizard gate during onboarding)
{ path: '/wizard/ai-profile', component: () => import('../views/wizard/WizardAIView.vue') },
// Onboarding wizard — full-page layout, no AppNav
{

2
web/src/stores/appConfig.ts
View file

@ -2,7 +2,7 @@ import { ref } from 'vue'
import { defineStore } from 'pinia'
import { useApiFetch } from '../composables/useApi'
export type Tier = 'free' | 'paid' | 'premium' | 'ultra'
export type Tier = 'free' | 'paid' | 'premium'
export type InferenceProfile = 'remote' | 'cpu' | 'single-gpu' | 'dual-gpu'
export const useAppConfigStore = defineStore('appConfig', () => {

38
web/src/stores/wizard/__tests__/aiInterview.test.ts
View file

@ -157,6 +157,44 @@ describe('useAiInterviewStore', () => {
expect(store.error).toBe('Failed to save profile. Please try again.')
})
// ── skip() ─────────────────────────────────────────────────────────────────
it('skip() sends the skip signal to the backend', async () => {
mockFetch.mockResolvedValue({
data: { reply: 'No problem, moving on.', extracted_fields: {}, complete: false },
error: null,
})
const store = useAiInterviewStore()
await store.skip()
expect(mockFetch).toHaveBeenCalledWith(
'/api/wizard/ai/interview',
expect.objectContaining({ method: 'POST' }),
)
const body = JSON.parse((mockFetch.mock.calls[0][1] as { body: string }).body)
expect(body.history[0]).toEqual({ role: 'user', content: 'skip' })
})
// ── keepChatting() ─────────────────────────────────────────────────────────
it('keepChatting() clears the complete flag without resetting messages', async () => {
mockFetch.mockResolvedValue({
data: { reply: 'All done!', extracted_fields: { name: 'Alice' }, complete: true },
error: null,
})
const store = useAiInterviewStore()
await store.send('done')
expect(store.complete).toBe(true)
store.keepChatting()
expect(store.complete).toBe(false)
expect(store.messages.length).toBeGreaterThan(0)
expect(store.fields).toEqual({ name: 'Alice' })
})
// ── startOver() ────────────────────────────────────────────────────────────
it('startOver() resets all state and clears localStorage', async () => {

12
web/src/stores/wizard/aiInterview.ts
View file

@ -3,6 +3,7 @@ import { ref } from 'vue'
import { useApiFetch } from '../../composables/useApi'
const LS_KEY = 'peregrine:wizard-draft'
const SKIP_SIGNAL = 'skip'
export interface ChatMessage {
role: 'user' | 'assistant'
@ -40,6 +41,7 @@ export const useAiInterviewStore = defineStore('aiInterview', () => {
if (loading.value) return
if (userText !== '') {
messages.value = [...messages.value, { role: 'user', content: userText }]
_persist()
}
loading.value = true
error.value = null
@ -78,6 +80,14 @@ export const useAiInterviewStore = defineStore('aiInterview', () => {
return true
}
function skip() {
return send(SKIP_SIGNAL)
}
function keepChatting() {
complete.value = false
}
function startOver() {
messages.value = []
fields.value = {}
@ -86,5 +96,5 @@ export const useAiInterviewStore = defineStore('aiInterview', () => {
localStorage.removeItem(LS_KEY)
}
return { messages, fields, complete, loading, saving, error, restore, send, finalize, startOver }
return { messages, fields, complete, loading, saving, error, restore, send, skip, finalize, keepChatting, startOver }
})

124
web/src/views/settings/MyProfileView.vue
View file

@ -5,6 +5,26 @@
<p class="subtitle">Your identity and preferences used for cover letters, research, and interview prep.</p>
</header>
<!-- ── AI wizard entry point ──────────────────────────── -->
<div class="wizard-cta" :class="hasWizardAccess ? 'wizard-cta--unlocked' : 'wizard-cta--locked'">
<div class="wizard-cta__body">
<span class="wizard-cta__icon" aria-hidden="true">✦</span>
<div>
<p class="wizard-cta__heading">Set up your profile with AI</p>
<p class="wizard-cta__desc">
<template v-if="hasWizardAccess">Answer a few questions and the assistant fills in your profile automatically.</template>
<template v-else>Upgrade to Paid, or bring your own LLM key, to use the AI profile assistant.</template>
</p>
</div>
</div>
<RouterLink v-if="hasWizardAccess" to="/wizard/ai-profile" class="btn-wizard">
Start AI setup
</RouterLink>
<RouterLink v-else to="/settings/license" class="btn-wizard btn-wizard--upgrade">
Upgrade
</RouterLink>
</div>
<div v-if="store.loading" class="loading-state">Loading profile…</div>
<template v-else>
@ -204,7 +224,8 @@
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ref, onMounted, computed } from 'vue'
import { RouterLink } from 'vue-router'
import { storeToRefs } from 'pinia'
import { useProfileStore } from '../../stores/settings/profile'
import { useAppConfigStore } from '../../stores/appConfig'
@ -214,6 +235,8 @@ const store = useProfileStore()
const { loadError } = storeToRefs(store)
const config = useAppConfigStore()
const hasWizardAccess = computed(() => config.tier !== 'free' || config.byokUnlocked)
const newNdaCompany = ref('')
const generatingSummary = ref(false)
const generatingMissions = ref(false)
@ -290,7 +313,106 @@ async function generateVoice() {
}
.page-header {
margin-bottom: var(--space-4);
}
/* ── AI wizard callout ─────────────────────────────── */
.wizard-cta {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
flex-wrap: wrap;
padding: var(--space-4) var(--space-5);
border-radius: var(--radius-md);
margin-bottom: var(--space-6);
border: 1px solid var(--color-border-light);
}
.wizard-cta--unlocked {
background: color-mix(in srgb, var(--color-primary) 6%, var(--color-surface));
border-color: color-mix(in srgb, var(--color-primary) 25%, transparent);
}
.wizard-cta--locked {
background: var(--color-surface-raised);
}
.wizard-cta__body {
display: flex;
align-items: flex-start;
gap: var(--space-3);
flex: 1;
}
.wizard-cta__icon {
font-size: 1.25rem;
color: var(--color-primary);
flex-shrink: 0;
margin-top: 2px;
}
.wizard-cta--locked .wizard-cta__icon {
color: var(--color-text-muted);
}
.wizard-cta__heading {
margin: 0 0 var(--space-1);
font-size: 0.95rem;
font-weight: 600;
color: var(--color-text);
}
.wizard-cta__desc {
margin: 0;
font-size: 0.85rem;
color: var(--color-text-muted);
line-height: 1.5;
}
.btn-wizard {
display: inline-flex;
align-items: center;
padding: var(--space-2) var(--space-5);
background: var(--color-primary);
color: var(--color-text-inverse);
border: none;
border-radius: var(--radius-md);
font-family: var(--font-body);
font-size: 0.875rem;
font-weight: 600;
text-decoration: none;
white-space: nowrap;
min-height: 40px;
transition: background var(--transition);
flex-shrink: 0;
}
.btn-wizard:hover {
background: var(--color-primary-hover);
}
.btn-wizard--upgrade {
background: none;
color: var(--color-text-muted);
border: 1px solid var(--color-border);
}
.btn-wizard--upgrade:hover {
background: var(--color-surface-raised);
color: var(--color-text);
}
@media (max-width: 600px) {
.wizard-cta {
flex-direction: column;
align-items: flex-start;
}
.btn-wizard {
width: 100%;
justify-content: center;
}
}
.page-header h2 {

8
web/src/views/wizard/WizardAIView.vue
View file

@ -146,7 +146,7 @@ onMounted(async () => {
<button
class="btn-ghost"
:disabled="store.loading || store.saving"
@click="store.complete = false"
@click="store.keepChatting()"
>
Keep chatting
</button>
@ -185,8 +185,8 @@ onMounted(async () => {
</button>
<button
class="btn-ghost ai-skip-btn"
:disabled="store.loading || store.saving"
@click="store.send('skip')"
:disabled="store.loading || store.saving || store.complete"
@click="store.skip()"
>
Skip
</button>
@ -196,7 +196,7 @@ onMounted(async () => {
<p v-if="store.error" class="ai-error" role="alert">{{ store.error }}</p>
<div v-if="store.messages.length > 0" class="ai-startover-row">
<button class="btn-startover" @click="store.startOver">Start over</button>
<button class="btn-startover" @click="store.startOver()">Start over</button>
</div>
</div>
</div>