- );
-}
+import { DashboardShell } from "@/components/dashboard/DashboardShell";
export default function Dashboard() {
const router = useRouter();
@@ -81,25 +25,5 @@ export default function Dashboard() {
if (!user) return null;
- return (
-
-
-
-
-
- {getGreeting()}
-
-
-
-
-
-
-
-
-
- );
+ return ;
}
diff --git a/src/app/design-qa/layout.tsx b/src/app/design-qa/layout.tsx
new file mode 100644
index 0000000..9ce0adb
--- /dev/null
+++ b/src/app/design-qa/layout.tsx
@@ -0,0 +1,26 @@
+import DashboardLayout from "@/app/dashboard/layout";
+
+/**
+ * Design-QA harness route.
+ *
+ * Renders the real dashboard against in-memory fixtures so light mode, empty
+ * states and breakpoints can be reviewed without a Supabase session. It lives
+ * outside `/dashboard` on purpose: the proxy matcher only guards
+ * `/dashboard/:path*` and `/auth/:path*` (src/proxy.ts), so this route needs
+ * no auth bypass of any kind.
+ *
+ * Redirects to the landing page unless NEXT_PUBLIC_QA_MOCK=1, so the harness
+ * is inert in a normal build. `redirect` rather than `notFound` because a
+ * build-time-prerendered `notFound()` was still being served with a 200.
+ */
+// Evaluated per request rather than at build time, so the guard returns a real
+// 404 status instead of a statically prerendered not-found page served as 200.
+export const dynamic = "force-dynamic";
+
+export default function DesignQALayout({
+ children,
+}: {
+ children: React.ReactNode;
+}) {
+ return {children};
+}
diff --git a/src/app/design-qa/page.tsx b/src/app/design-qa/page.tsx
new file mode 100644
index 0000000..3b00e87
--- /dev/null
+++ b/src/app/design-qa/page.tsx
@@ -0,0 +1,11 @@
+import { redirect } from "next/navigation";
+import { DashboardShell } from "@/components/dashboard/DashboardShell";
+
+// Evaluated per request so the guard cannot be baked out by prerendering.
+export const dynamic = "force-dynamic";
+
+export default function DesignQAPage() {
+ if (process.env.NEXT_PUBLIC_QA_MOCK !== "1") redirect("/");
+
+ return ;
+}
diff --git a/src/app/globals.css b/src/app/globals.css
index a31118d..c9b353f 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -43,6 +43,11 @@
--gp-success: #22c55e;
/* Semantic — DARK-FIRST (canonical experience) */
+ /* Declared here too, so scrollbars, form controls and autofill match the
+ dark surface by default. Without it the unclassed default rendered dark
+ tokens with light native chrome. `.light` overrides this below. */
+ color-scheme: dark;
+
--gp-bg: var(--gp-zinc-950);
--gp-surface: var(--gp-zinc-900);
--gp-surface-2: var(--gp-zinc-800);
@@ -204,7 +209,10 @@
:root[data-theme="light"] {
color-scheme: light;
- --gp-bg: #ffffff;
+ /* Page sits one step below cards so surfaces read as raised. When both were
+ #ffffff the whole theme was one flat sheet separated only by hairlines.
+ Per design-system-foundation §1.4: page = zinc-50, card = white. */
+ --gp-bg: var(--gp-zinc-50);
--gp-surface: #ffffff;
--gp-surface-2: var(--gp-zinc-100);
--gp-surface-mute: var(--gp-zinc-100);
@@ -359,16 +367,22 @@
--duration-slow: var(--motion-slow);
}
-/* Override Tailwind's dark variant: respond to .dark / .marketing-dark
- classes (forced) AND OS preference when no explicit class is set. */
+/* Override Tailwind's dark variant so it tracks the tokens rather than the OS.
+ The semantic tokens above are dark-first: absent an explicit light opt-in the
+ page IS dark, whatever the OS says. Gating `dark:` on
+ prefers-color-scheme meant that a visitor on an OS set to light, who had
+ chosen no theme, got a dark page rendered with every `dark:` utility switched
+ off — the wordmark resolved to zinc-900 on a zinc-950 background and
+ disappeared. So the condition is "not explicitly light", not "OS is dark".
+
+ The light opt-in has three spellings (see the light block above); all three
+ have to turn the variant off, not just `.light`. */
@variant dark {
&:where(.dark, .dark *, .marketing-dark, .marketing-dark *) {
@slot;
}
- @media (prefers-color-scheme: dark) {
- html:not(.light):not(.dark) & {
- @slot;
- }
+ html:not(.dark):not(.light):not(.gp-allow-light):not([data-theme="light"]) & {
+ @slot;
}
}
diff --git a/src/components/AccountabilityWidget.tsx b/src/components/AccountabilityWidget.tsx
index 4646c24..c8cdf55 100644
--- a/src/components/AccountabilityWidget.tsx
+++ b/src/components/AccountabilityWidget.tsx
@@ -5,6 +5,7 @@ import Link from "next/link";
import { Share2 } from "lucide-react";
import { useAuth } from "@/contexts/AuthContext";
import { trpc } from "@/lib/trpc/client";
+import { cn } from "@/lib/utils";
import { AccountabilityScoreRing } from "./AccountabilityScoreRing";
import { StreakBreakBanner } from "./StreakBreakBanner";
import { StreakFlame } from "./StreakFlame";
@@ -118,8 +119,8 @@ export function AccountabilityWidget() {
/>
)}
-
-
+
+
@@ -130,45 +131,70 @@ export function AccountabilityWidget() {
{delta > 0 && (
-
+
+{delta} from last week
)}
- {delta < 0 && (
-
+ {/* A small dip is a number. A collapse is a sentence — quoting
+ "-38 from last week" back at someone is punishment, not
+ accountability. Per design-system-phase-3 §2.2. */}
+ {delta < 0 && delta > -20 && (
+
{delta} from last week
)}
+ {delta <= -20 && (
+ Last week was a write-off. New week starts now.
+ )}
{delta === 0 && No change from last week}
-
-
-
day streak
-
-
-
-
Today
-
- {today.completed}/{today.total} done
+ {/* Below `sm` this wrapper is a single flex item, so the streak and
+ today blocks drop to a second line together instead of each
+ squeezing to two-line wraps. At `sm` and up `contents` dissolves
+ it and the original three-column row returns unchanged. */}
+
diff --git a/src/components/ChatPanel.tsx b/src/components/ChatPanel.tsx
index 6f84edc..9694b1b 100644
--- a/src/components/ChatPanel.tsx
+++ b/src/components/ChatPanel.tsx
@@ -3,9 +3,88 @@
import { useRef, useEffect } from "react";
import { useAuth } from "@/contexts/AuthContext";
import { useChatContext } from "@/contexts/ChatContext";
+import { useTaskContext } from "@/contexts/TaskContext";
+import { trpc } from "@/lib/trpc/client";
import { AnimatePresence, motion } from "framer-motion";
import { MessageCircle, X, Info } from "lucide-react";
+/**
+ * Opening move for the coach panel.
+ *
+ * The panel used to greet an empty conversation with one generic sentence,
+ * which on desktop left the largest region of the dashboard doing nothing.
+ * These prompts are built from the user's actual score, streak, today's
+ * progress and goal count, so the first thing the coach says already knows
+ * what kind of week this is. Per design-system-phase-3 §6.1.
+ */
+function ChatEmptyState({
+ onPick,
+}: {
+ onPick: (prompt: string) => void;
+}) {
+ const { data } = trpc.accountabilityScore.getScore.useQuery();
+ const { goals } = useTaskContext();
+
+ const prompts: string[] = [];
+
+ if (data) {
+ const { score, tier, currentStreak, delta, today } = data;
+ const openGoals = goals.filter((g) => g.status === "active");
+ const { completed, total } = today;
+
+ // Most specific signal first, so an unusual week leads the conversation.
+ // Every branch below is reachable — a steady mid-week user still gets a
+ // prompt built from their own numbers rather than the generic fallbacks.
+ if (delta <= -20) {
+ prompts.push("What happened last week?");
+ }
+ if (tier?.name === "Slacking") {
+ prompts.push(`Score ${score} — what's actually getting in the way?`);
+ }
+ if (total === 0) {
+ prompts.push("Nothing planned today. What's worth committing to?");
+ } else if (completed === 0) {
+ prompts.push(`0/${total} done today. What should I ship first?`);
+ } else if (completed === total) {
+ prompts.push("Everything's done. What should tomorrow look like?");
+ } else {
+ prompts.push(`${completed}/${total} done today — what do I take next?`);
+ }
+ if (openGoals.length >= 5) {
+ prompts.push(`Help me cut a goal — ${openGoals.length} is too many.`);
+ }
+ if (currentStreak >= 3) {
+ prompts.push(`${currentStreak} days in. How do I not break it?`);
+ }
+ }
+
+ // Always leave the user something to press, including on first load.
+ for (const fallback of [
+ "What should I focus on today?",
+ "Review my plan with me.",
+ ]) {
+ if (prompts.length >= 3) break;
+ prompts.push(fallback);
+ }
+
+ return (
+
+
+ {data ? "I've seen your week. Pick one:" : "Pick one to start:"}
+
+ {/* Two opposite answers used to be pixel-identical until
+ clicked. Each now previews its own outcome on hover
+ and focus, so the choice reads before it is made —
+ without weighting one above the other. */}