[verified] Security hardening + UX/UI polish

Security (requesting-code-review pipeline + independent reviewer):
- Fix path traversal on file upload (basename sanitize + resolve-containment)
- Fix IDOR: org + owner scoping on all group/chat routes (_authorize_group/_get_owned_group),
  hide other users' personal groups in listings
- Remove XSS via v-html in Chat task (text interpolation)
- Add test_security.py (traversal + cross-user denial) — all pass

UX/UI (ui-ux-pro-max + frontend-dev-verification):
- Global: focus rings, 44px touch targets, hover/press transitions, input focus glow,
  prefers-reduced-motion, skeleton loaders, empty states, back links, spinner
- Login: password toggle, autocomplete, spinner, disabled-when-empty
- Cards lift on hover; dashboard skeleton + empty state; analyze button spinner

All backend tests pass (m0/m1/routes/security/e2e); frontend builds; served SPA verified via curl.

frontend/src/style.css

@@ -71,3 +71,84 @@ label { font-size: 13px; color: var(--muted); display: block; margin: 10px 0 4px
 .muted { color: var(--muted); }
 .msg-seller { background: var(--accent); color: #fff; align-self: flex-end; border-radius: 16px 16px 4px 16px; }
 .msg-customer { background: #fff; align-self: flex-start; border-radius: 16px 16px 16px 4px; border: 1px solid var(--border); }
+
+/* ── UX polish: focus rings, touch targets, transitions ───────────── */
+/* Visible focus rings for keyboard nav (a11y) */
+button:focus-visible,
+input:focus-visible,
+select:focus-visible,
+textarea:focus-visible,
+a:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+a { color: inherit; }
+a:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
+
+/* Comfortable touch density + consistent transitions */
+button { min-height: 44px; transition: transform .15s ease, box-shadow .2s ease, background .2s ease, opacity .2s ease; }
+button:not(:disabled):hover { box-shadow: 0 4px 12px rgba(20,24,40,.1); }
+button:not(:disabled):active { transform: scale(.97); }
+button.primary:not(:disabled):hover { box-shadow: 0 6px 18px rgba(79,70,229,.35); }
+
+input, select, textarea {
+  min-height: 44px;
+  transition: border-color .15s ease, box-shadow .15s ease;
+}
+input:focus, select:focus, textarea:focus {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 3px rgba(79,70,229,.15);
+}
+textarea { min-height: 88px; resize: vertical; }
+
+/* Cards lift on hover (only for interactive/uniform card grids) */
+.card.lift { transition: transform .2s ease, box-shadow .25s ease; }
+.card.lift:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(20,24,40,.10); }
+
+/* Disabled clarity */
+button:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
+
+/* Back link button */
+.btn-back {
+  display: inline-flex; align-items: center; gap: 6px;
+  padding: 8px 14px; margin-bottom: 12px;
+  background: transparent; border: 1px solid var(--border); border-radius: 10px;
+  color: var(--muted); font-size: 13px; text-decoration: none;
+}
+.btn-back:hover { color: var(--ink); border-color: var(--accent); }
+
+/* Status spinner */
+.spinner {
+  width: 16px; height: 16px; border-radius: 50%;
+  border: 2px solid rgba(255,255,255,.4); border-top-color: #fff;
+  animation: spin .7s linear infinite; display: inline-block;
+}
+@keyframes spin { to { transform: rotate(360deg); } }
+
+/* Skeleton loading blocks */
+.skeleton {
+  border-radius: 8px;
+  background: linear-gradient(90deg, #eef0f5 25%, #e2e5ec 37%, #eef0f5 63%);
+  background-size: 400% 100%;
+  animation: shimmer 1.4s ease infinite;
+}
+@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
+
+/* Respect reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
+}
+
+/* Empty-state block */
+.empty-state { text-align: center; padding: 40px 20px; color: var(--muted); }
+.empty-state strong { display: block; margin-bottom: 4px; color: var(--ink); }
+
+/* Field helper/error lines under inputs */
+.field-error { color: var(--red); font-size: 12px; margin-top: 4px; }
+
+/* Responsive container default */
+@media (max-width: 640px) {
+  .main { padding: 16px; }
+  .row { gap: 10px; }
+  .msg-seller, .msg-customer { max-width: 84%; }
+}

frontend/src/views/Chat.vue

@@ -1,16 +1,20 @@
 <template>
   <div>
+    <router-link :to="`/groups/${gid}/personas`" class="btn-back">← {{ i18n.t('personas') }}</router-link>
     <div class="row" style="align-items:center;margin-bottom:12px">
       <h2 style="margin:0">{{ persona ? persona.name : '...' }}</h2>
       <span class="badge" :class="persona && persona.channel">{{ persona ? persona.channel : '' }}</span>
       <span class="muted" v-if="persona">{{ persona.profession }} · {{ persona.age_group }}</span>
-      <button class="danger" style="margin-left:auto" @click="finish" :disabled="messages.length === 0">
-        {{ i18n.t('finish') }}
+      <button class="danger" style="margin-left:auto" @click="finish" :disabled="messages.length === 0 || !!debrief">
+        <span v-if="sending" class="spinner" style="margin-right:4px"></span>{{ i18n.t('finish') }}
       </button>
     </div>
 
     <!-- Seller-initiated task -->
-    <div v-if="!started" class="card task" v-html="taskText"></div>
+    <div v-if="!started" class="card task">
+      <strong>📣 {{ i18n.t('sellerInitiated') }}</strong>
+      <div v-if="taskText">{{ taskText }}</div>
+    </div>
 
     <!-- Chat thread -->
     <div class="thread" v-if="started" ref="thread">
@@ -77,7 +81,7 @@ onMounted(async () => {
   const res = await api.chatStart(gid, pid)
   sessionId.value = res.session.id
   if (res.session.task) {
-    taskText.value = `📣 <strong>${i18n.t('sellerInitiated')}</strong><br/>${res.session.task}`
+    taskText.value = res.session.task
   }
   messages.value = res.session.messages || []
   started.value = true

frontend/src/views/Dashboard.vue

@@ -18,10 +18,17 @@
     </div>
 
     <h3>{{ i18n.t('groups') }}</h3>
-    <div v-if="loading">...</div>
-    <div v-else-if="groups.length === 0" class="card muted">—</div>
+    <div v-if="loading" class="card" style="min-height:120px">
+      <div class="skeleton" style="height:60px"></div>
+      <div class="skeleton" style="height:60px;margin-top:10px"></div>
+    </div>
+    <div v-else-if="groups.length === 0" class="card empty-state">
+      <strong>{{ auth.isAdmin ? 'No persona groups yet' : 'No groups available' }}</strong>
+      <span v-if="auth.isAdmin">{{ i18n.t('groupBuilder') }} to start.</span>
+      <span v-else>Ask an admin to create a group.</span>
+    </div>
     <div class="grid">
-      <div v-for="g in groups" :key="g.id" class="card group-card">
+      <div v-for="g in groups" :key="g.id" class="card group-card lift">
         <div class="row" style="justify-content:space-between">
           <strong>{{ g.title }}</strong>
           <span class="badge" :class="g.status">{{ g.status }}</span>

frontend/src/views/GroupEdit.vue

@@ -1,13 +1,19 @@
 <template>
   <div>
+    <router-link to="/" class="btn-back">← {{ i18n.t('dashboard') }}</router-link>
     <div class="row" style="align-items:center;margin-bottom:16px">
       <h2 style="margin:0">{{ i18n.t('groupBuilder') }} — {{ group && group.title }}</h2>
       <button class="primary" style="margin-left:auto" @click="analyze" :disabled="busy">
-        {{ busy ? '...' : i18n.t('analyze') }}
+        <span v-if="busy" class="spinner" style="margin-right:4px"></span>{{ i18n.t('analyze') }}
       </button>
     </div>
     <div class="error" v-if="error">{{ error }}</div>
 
+    <div v-if="personas.length === 0 && !busy" class="card empty-state">
+      <strong>No personas yet</strong>
+      <span>Click {{ i18n.t('analyze') }} to generate the 15 personas (5 per tier).</span>
+    </div>
+
     <div v-for="tier in ['A','B','C']" :key="tier" style="margin-bottom:20px">
       <h4>{{ tierLabel(tier) }}</h4>
       <div class="grid">

frontend/src/views/Login.vue

@@ -1,14 +1,21 @@
 <template>
   <div class="login-wrap">
     <div class="card login-card">
-      <h1>{{ i18n.t('app') }}</h1>
+      <h1>🎯 {{ i18n.t('app') }}</h1>
+      <p class="muted" style="margin-top:-8px">Sales training simulator</p>
       <label>{{ i18n.t('email') }}</label>
-      <input v-model="email" type="email" @keyup.enter="submit" />
+      <input v-model="email" type="email" autocomplete="username" @keyup.enter="submit" />
       <label>{{ i18n.t('password') }}</label>
-      <input v-model="password" type="password" @keyup.enter="submit" />
-      <div class="error" v-if="error">{{ error }}</div>
-      <button class="primary" style="width:100%;margin-top:16px" :disabled="loading" @click="submit">
-        {{ loading ? '...' : i18n.t('login') }}
+      <div class="pw-wrap">
+        <input v-model="password" :type="showPw ? 'text' : 'password'" autocomplete="current-password" @keyup.enter="submit" />
+        <button type="button" class="pw-toggle" @click="showPw = !showPw" :aria-label="showPw ? 'Hide password' : 'Show password'">
+          {{ showPw ? '🙈' : '👁' }}
+        </button>
+      </div>
+      <div class="error" role="alert" v-if="error">{{ error }}</div>
+      <button class="primary" style="width:100%;margin-top:16px" :disabled="loading || !email || !password" @click="submit">
+        <span v-if="loading" class="spinner"></span>
+        <span v-else>{{ i18n.t('login') }}</span>
       </button>
     </div>
   </div>
@@ -24,6 +31,7 @@ const route = useRoute()
 const router = useRouter()
 const email = ref('')
 const password = ref('')
+const showPw = ref(false)
 const error = ref('')
 const loading = ref(false)
 
@@ -45,4 +53,9 @@ async function submit() {
 .login-wrap { display: flex; justify-content: center; padding-top: 10vh; }
 .login-card { width: 360px; }
 h1 { margin-top: 0; }
+.pw-wrap { position: relative; }
+.pw-toggle {
+  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
+  background: transparent; border: none; padding: 6px; min-height: 36px; cursor: pointer;
+}
 </style>

frontend/src/views/MySessions.vue

@@ -11,7 +11,10 @@
         Score {{ s.debrief.score }} — {{ s.debrief.why }}
       </div>
     </div>
-    <div v-if="sessions.length === 0" class="card muted">—</div>
+    <div v-if="sessions.length === 0" class="card empty-state">
+      <strong>No training sessions yet</strong>
+      <span>Pick a persona from a group and practice closing a sale.</span>
+    </div>
   </div>
 </template>
 

frontend/src/views/Personas.vue

@@ -1,5 +1,6 @@
 <template>
   <div>
+    <router-link to="/" class="btn-back">← {{ i18n.t('dashboard') }}</router-link>
     <div class="row" style="align-items:center">
       <h2 style="margin:0">{{ i18n.t('personas') }}</h2>
       <span class="muted" style="margin-left:auto">Levels: choose one to practice (one-shot)</span>
@@ -8,7 +9,7 @@
     <div v-for="tier in ['A','B','C']" :key="tier" style="margin:20px 0">
       <h4>{{ tierLabel(tier) }}</h4>
       <div class="grid">
-        <div v-for="p in byTier(tier)" :key="p.id" class="card pcard">
+        <div v-for="p in byTier(tier)" :key="p.id" class="card pcard lift">
           <div class="row">
             <strong>{{ p.name }}</strong>
             <span class="badge" :class="p.my_outcome">{{ outcomeLabel(p.my_outcome) }}</span>