+
{error}
)}
@@ -361,7 +357,7 @@ export function CustomChallengeDialog({
@@ -369,7 +365,7 @@ export function CustomChallengeDialog({
type='button'
onClick={submit}
disabled={prompt.trim().length < 10}
- className='group bg-ink hover:bg-primary inline-flex flex-1 cursor-pointer items-center justify-center gap-2 rounded-full px-5 py-2.5 text-sm font-medium tracking-tight text-background transition-colors disabled:cursor-not-allowed disabled:opacity-50'
+ className='group inline-flex flex-1 cursor-pointer items-center justify-center gap-2 rounded-full bg-ink px-5 py-2.5 text-sm font-medium tracking-tight text-background transition-colors hover:bg-primary disabled:cursor-not-allowed disabled:opacity-50'
>
{t.generate}
diff --git a/src/features/challenges/hooks/use-socratic-session.ts b/src/features/challenges/hooks/use-socratic-session.ts
index 63c8652..f9822ea 100644
--- a/src/features/challenges/hooks/use-socratic-session.ts
+++ b/src/features/challenges/hooks/use-socratic-session.ts
@@ -6,10 +6,16 @@ import { getHintBalance } from '@/features/hints/actions'
import type { ChatMsg } from '@/lib/ai/types'
import { track } from '@/lib/analytics'
import { apiFetch, getAccessToken } from '@/lib/api/client'
+import { useT } from '@/lib/i18n'
import * as React from 'react'
import { completeSession, startSession } from '../actions'
import { loadDraft, saveDraft } from '../draft'
+const copy = {
+ en: { buyFailed: "Couldn't start checkout." },
+ pt: { buyFailed: 'Não foi possível iniciar a compra.' },
+}
+
export function useSocraticSession
(opts: {
challenge: { id: string } | null
initialWork: TWork
@@ -18,6 +24,7 @@ export function useSocraticSession(opts: {
}) {
const { challenge, initialWork, initialMessages, paused = false } = opts
const { user, loading: authLoading } = useUser()
+ const t = useT(copy)
const [messages, setMessages] = React.useState([])
const [input, setInput] = React.useState('')
@@ -170,8 +177,7 @@ export function useSocraticSession(opts: {
text += decoder.decode(value, { stream: true })
patchLast(text)
}
- } catch {
- }
+ } catch {}
if (!text.trim() && opts?.fallback) patchLast(opts.fallback)
return text
}
@@ -212,7 +218,7 @@ export function useSocraticSession(opts: {
mock?: boolean
error?: string
}
- if (!res.ok) throw new Error(data.error || 'Não foi possível iniciar a compra.')
+ if (!res.ok) throw new Error(data.error || t.buyFailed)
if (data.url) {
track('checkout_started', { challenge_id: challenge?.id })
window.location.href = data.url
@@ -226,7 +232,7 @@ export function useSocraticSession(opts: {
track('hints_purchased', { remaining: b.remaining })
setTimeout(() => setBought(false), 2500)
} catch (e) {
- setBuyError(e instanceof Error ? e.message : '')
+ setBuyError(e instanceof Error ? e.message : t.buyFailed)
setTimeout(() => setBuyError(null), 5000)
} finally {
buyingRef.current = false
diff --git a/src/features/dashboard/actions.ts b/src/features/dashboard/actions.ts
index b86e9c9..778bf90 100644
--- a/src/features/dashboard/actions.ts
+++ b/src/features/dashboard/actions.ts
@@ -3,6 +3,11 @@
import { computeIndependence } from '@/domain/scoring'
import { authActionUser } from '@/lib/api/guard'
import { supabaseAdmin } from '@/lib/supabase/server'
+import {
+ independenceTrend,
+ skillBreakdown,
+ type SkillSession,
+} from './independence'
import { calcStreak } from './streak'
import type { Stats } from './types'
@@ -50,7 +55,7 @@ export async function getDashboardStats(
supabaseAdmin
.from('sessions')
.select(
- 'id, status, started_at, completed_at, challenge_id, independence',
+ 'id, status, started_at, completed_at, challenge_id, independence, challenges(stack, kind)',
)
.eq('user_id', userId),
supabaseAdmin
@@ -116,6 +121,20 @@ export async function getDashboardStats(
const streak = calcStreak(completed.map((s) => s.started_at))
const weekProgress = buildWeekProgress(weekSessions.map((s) => s.started_at))
+ const skillSessions: SkillSession[] = completed.map((s) => {
+ const challenge = (
+ s as { challenges: { stack: string; kind: string | null } | null }
+ ).challenges
+ return {
+ challengeId: s.challenge_id,
+ independence:
+ s.independence ?? computeIndependence(hintsBySession.get(s.id) ?? []),
+ completedAt: s.completed_at ?? s.started_at,
+ stack: challenge?.stack ?? null,
+ kind: challenge?.kind ?? null,
+ }
+ })
+
return {
total_completed: completedCount,
total_hints: totalHints,
@@ -123,5 +142,7 @@ export async function getDashboardStats(
independence_score: independenceScore,
streak_days: streak,
week_progress: weekProgress,
+ skill_breakdown: skillBreakdown(skillSessions),
+ independence_trend: independenceTrend(skillSessions),
}
}
diff --git a/src/features/dashboard/components/dashboard-view.tsx b/src/features/dashboard/components/dashboard-view.tsx
index 797537d..c5d4837 100644
--- a/src/features/dashboard/components/dashboard-view.tsx
+++ b/src/features/dashboard/components/dashboard-view.tsx
@@ -13,6 +13,7 @@ import {
} from '@/features/challenges/actions'
import { CustomChallengeDialog } from '@/features/challenges/components/custom-challenge-dialog'
import { getDashboardStats } from '@/features/dashboard/actions'
+import { skillTarget, weakestSkill } from '@/features/dashboard/independence'
import type { Stats } from '@/features/dashboard/types'
import { activityLevel } from '@/features/dashboard/utils'
import { Halftone, glyph } from '@/features/landing/components/halftone'
@@ -27,6 +28,7 @@ import {
Network,
PenLine,
Sparkles,
+ Target,
TrendingUp,
} from 'lucide-react'
import { motion } from 'motion/react'
@@ -39,6 +41,8 @@ import {
RadialBarChart,
ResponsiveContainer,
} from 'recharts'
+import { IndependenceTrend } from './independence-trend'
+import { SkillBreakdown, TIER_BAR } from './skill-breakdown'
const copy = {
en: {
@@ -68,6 +72,9 @@ const copy = {
scoreEyebrow: 'Current score',
scoreTitle: 'Total independence',
scoreCaption: 'how much you solve on your own',
+ scoreEmpty: 'no challenges yet',
+ zeroHeadline:
+ 'Your independence score starts with your first solved challenge.',
historyEyebrow: 'History',
historyTitle: 'Recent challenges',
of: 'of',
@@ -87,6 +94,9 @@ const copy = {
'What comes out of your head is worth a thousand times more than what comes out of mine.',
quoteBy: 'Socratic tutor, just now',
daily: 'Daily challenge',
+ weakEyebrow: 'Train your weakest skill',
+ weakBody: 'is where you lean on hints the most.',
+ weakCta: 'Practice it',
},
pt: {
welcome: 'Bem-vindo de volta',
@@ -114,6 +124,9 @@ const copy = {
scoreEyebrow: 'Score atual',
scoreTitle: 'Independência total',
scoreCaption: 'quanto você resolve sozinho',
+ scoreEmpty: 'nenhum desafio ainda',
+ zeroHeadline:
+ 'Seu score de independência começa no seu primeiro desafio resolvido.',
historyEyebrow: 'Histórico',
historyTitle: 'Desafios recentes',
of: 'de',
@@ -133,6 +146,9 @@ const copy = {
'O que sai da sua cabeça vale mil vezes mais que o que sai da minha.',
quoteBy: 'Tutor Socrático, agora há pouco',
daily: 'Desafio do dia',
+ weakEyebrow: 'Treine sua skill mais fraca',
+ weakBody: 'é onde você mais depende de hints.',
+ weakCta: 'Praticar',
},
}
@@ -155,8 +171,7 @@ export function DashboardView({ user }: { user: User }) {
const [loadError, setLoadError] = React.useState(false)
const [reloadKey, setReloadKey] = React.useState(0)
const [startError, setStartError] = React.useState(null)
- const [genDesign, setGenDesign] = React.useState(false)
- const [genCode, setGenCode] = React.useState(false)
+ const [pending, setPending] = React.useState(null)
const [customOpen, setCustomOpen] = React.useState(false)
const [daily, setDaily] = React.useState(
undefined,
@@ -174,58 +189,49 @@ export function DashboardView({ user }: { user: User }) {
return () => clearTimeout(id)
}, [startError])
- async function startDesign() {
- if (genDesign || !user) return
- setGenDesign(true)
- try {
- const level =
- (user?.user_metadata?.preferred_level as string | undefined) ??
- 'intermediate'
- const data = await getNextChallenge({
- kind: 'design',
- level: level as 'beginner' | 'intermediate' | 'advanced',
- token: await getAccessToken(),
- })
- if (!('error' in data) && data?.id) router.push(`/design?id=${data.id}`)
- else {
- setStartError('error' in data ? data.error : t.startFailed)
- setGenDesign(false)
- }
- } catch {
- setStartError(t.startFailed)
- setGenDesign(false)
- }
- }
-
- async function startCode() {
- if (genCode || !user) return
+ async function startChallenge(
+ id: string,
+ target: { kind: 'code' | 'design'; stack?: string },
+ ) {
+ if (pending || !user) return
const meta = user.user_metadata as
| { preferred_stack?: string; preferred_level?: string }
| undefined
- if (!meta?.preferred_stack || !meta?.preferred_level) {
- router.push('/onboarding')
- return
+ let stack = target.stack
+ if (target.kind === 'code' && !stack) {
+ if (!meta?.preferred_stack || !meta?.preferred_level) {
+ router.push('/onboarding')
+ return
+ }
+ stack = meta.preferred_stack
}
- setGenCode(true)
+ setPending(id)
try {
const data = await getNextChallenge({
- kind: 'code',
- stack: meta.preferred_stack,
- level: meta.preferred_level as 'beginner' | 'intermediate' | 'advanced',
+ kind: target.kind,
+ stack,
+ level: (meta?.preferred_level ?? 'intermediate') as
+ | 'beginner'
+ | 'intermediate'
+ | 'advanced',
token: await getAccessToken(),
})
- if (!('error' in data) && data?.id)
- router.push(`/challenge?id=${data.id}`)
- else {
+ if (!('error' in data) && data?.id) {
+ router.push(
+ `${target.kind === 'design' ? '/design' : '/challenge'}?id=${data.id}`,
+ )
+ } else {
setStartError('error' in data ? data.error : t.startFailed)
- setGenCode(false)
+ setPending(null)
}
} catch {
setStartError(t.startFailed)
- setGenCode(false)
+ setPending(null)
}
}
+ const startCode = () => startChallenge('code', { kind: 'code' })
+
React.useEffect(() => {
if (!user) return
let active = true
@@ -258,6 +264,8 @@ export function DashboardView({ user }: { user: User }) {
}
const score = stats?.independence_score ?? 100
+ const hasScore = !!stats && stats.total_completed > 0
+ const weakest = stats ? weakestSkill(stats.skill_breakdown) : null
return (
@@ -291,14 +299,18 @@ export function DashboardView({ user }: { user: User }) {
{t.startPrompt}
) : (
<>
-
- {t.youAre}{' '}
-
- {score}
- {t.independentSuffix}
-
- .
-
+ {hasScore ? (
+
+ {t.youAre}{' '}
+
+ {score}
+ {t.independentSuffix}
+
+ .
+
+ ) : (
+
{t.zeroHeadline}
+ )}
{stats && stats.streak_days > 0 && (
@@ -328,8 +340,8 @@ export function DashboardView({ user }: { user: User }) {
- {t.scoreCaption}
+ {empty ? t.scoreEmpty : t.scoreCaption}
+
{t.eyebrow}
+
{t.title}
+
+ {/* A line needs two points. One completed challenge draws nothing useful. */}
+ {trend.length < 2 ? (
+
{t.tooSoon}
+ ) : (
+
+
+
+
+ {
+ if (!active || !payload?.length) return null
+ const point = payload[0].payload as TrendPoint
+ return (
+
+
+ {point.value}
+ {t.suffix}
+
+
+ {new Date(point.date).toLocaleDateString(dateLocale)}
+
+
+
+ )}
+
+
{t.eyebrow}
+
{t.title}
+
+ {breakdown.length === 0 ? (
+
{t.empty}
+ ) : (
+
+ )}
+