@johnnyboy11234/esg-idea-contest 0.3.0 → 0.3.2

package/frontend/src/features/auth/password-policy.ts

@@ -0,0 +1,168 @@
+/**
+ * Password policy of PRD §6.4, ported rule for rule from the backend
+ * (backend/internal/account/password.go, keyboard.go, sequence.go) and checked
+ * against the same cases (testdata/password.json). The server stays the
+ * authority; this drives the live checklist on the register page.
+ */
+
+/** Rule ids in PRD §6.4 table order; they are the wire contract (`errors[].rule`). */
+export const PASSWORD_RULES = [
+  "LENGTH",
+  "CHARSET",
+  "COMPLEXITY",
+  "COMMON_PASSWORD",
+  "KEYBOARD_RUN",
+  "SEQUENCE",
+  "REPEAT",
+  "CONTAINS_EMP_NO",
+] as const;
+export type PasswordRule = (typeof PASSWORD_RULES)[number];
+
+/** Whole-password blocklist lookup (case-insensitive); see `common-passwords.ts`. */
+export type CommonCheck = (password: string) => boolean;
+
+const MIN_LEN = 12;
+const MAX_LEN = 64; // code points
+const MIN_CLASSES = 3;
+const MAX_REPEAT = 2; // 3+ identical characters in a row is a violation
+const MIN_KEYBOARD_RUN = 4;
+const MIN_SEQUENCE = 4;
+
+/** The password as code points (a JS string is UTF-16; the server counts code points). */
+const codePoints = (s: string): number[] => Array.from(s, (c) => c.codePointAt(0)!);
+
+/**
+ * Lower-cases one code point exactly as Go's `strings.ToLower` does for every
+ * result that matters here (ASCII): A–Z, plus the only two non-ASCII code
+ * points whose lower case is ASCII, U+0130 → `i` and U+212A (Kelvin) → `k`.
+ * `String.prototype.toLowerCase` differs (U+0130 becomes two code points).
+ */
+const foldCp = (cp: number): number =>
+  cp >= 0x41 && cp <= 0x5a ? cp + 0x20 : cp === 0x130 ? 0x69 : cp === 0x212a ? 0x6b : cp;
+
+/** Case-folds a string with {@link foldCp}; used for the blocklist lookup. */
+export const foldCase = (s: string): string =>
+  String.fromCodePoint(...codePoints(s).map(foldCp));
+
+const violatesLength = (cps: number[]) => cps.length < MIN_LEN || cps.length > MAX_LEN;
+
+const violatesCharset = (cps: number[]) => cps.some((cp) => cp < 0x20 || cp > 0x7e);
+
+/** Upper, lower, digit, symbol (printable non-alphanumeric ASCII, space included). Non-ASCII is no class. */
+function violatesComplexity(cps: number[]): boolean {
+  let upper = false, lower = false, digit = false, symbol = false;
+  for (const cp of cps) {
+    if (cp >= 0x41 && cp <= 0x5a) upper = true;
+    else if (cp >= 0x61 && cp <= 0x7a) lower = true;
+    else if (cp >= 0x30 && cp <= 0x39) digit = true;
+    else if (cp >= 0x20 && cp <= 0x7e) symbol = true;
+  }
+  return [upper, lower, digit, symbol].filter(Boolean).length < MIN_CLASSES;
+}
+
+/** The four rows of US QWERTY; rows do not join and do not wrap. */
+const KEYBOARD_ROWS = ["1234567890-=", "qwertyuiop[]", "asdfghjkl;'", "zxcvbnm,./"];
+/** The shifted glyph of each key, position for position (letters are folded by case instead). */
+const SHIFTED_ROWS = ["!@#$%^&*()_+", "QWERTYUIOP{}", "ASDFGHJKL:\"", "ZXCVBNM<>?"];
+
+/** Glyph → [row, column]. Glyphs on no row (` ~ \ | and anything non-ASCII) break a run. */
+const KEY_OF = new Map<number, [number, number]>();
+[KEYBOARD_ROWS, SHIFTED_ROWS].forEach((rows) =>
+  rows.forEach((row, r) =>
+    Array.from(row).forEach((g, c) => KEY_OF.set(g.codePointAt(0)!, [r, c])),
+  ),
+);
+
+/**
+ * Longest run of positions that step by exactly ±1 in one direction within one
+ * group reaches `min`. `pos` maps a code point to [group, position] or undefined
+ * (which breaks the run). Same position twice is not a step (that is REPEAT).
+ * Shared by KEYBOARD_RUN (group = row) and SEQUENCE (group = alphabet).
+ */
+function hasRun(
+  cps: number[],
+  pos: (cp: number) => readonly [number, number] | undefined,
+  min: number,
+): boolean {
+  let prev: readonly [number, number] | undefined;
+  let run = 0, dir = 0;
+  for (const cp of cps) {
+    const k = pos(cp);
+    if (!k) {
+      prev = undefined;
+      run = 0;
+      dir = 0;
+      continue;
+    }
+    const step = prev && k[0] === prev[0] ? k[1] - prev[1] : 0;
+    if (step === 1 || step === -1) {
+      if (run >= 2 && step === dir) run++;
+      else {
+        run = 2;
+        dir = step;
+      }
+    } else {
+      run = 1;
+      dir = 0;
+    }
+    prev = k;
+    if (run >= min) return true;
+  }
+  return false;
+}
+
+/** 4+ adjacent keys on one row, either direction, case-insensitive, shifted glyph = its key. */
+const violatesKeyboardRun = (cps: number[]) =>
+  hasRun(cps.map(foldCp), (cp) => KEY_OF.get(cp), MIN_KEYBOARD_RUN);
+
+/** Letters a–z (case folded) are group 0, digits 0–9 group 1; anything else breaks a sequence. */
+function seqKey(cp: number): [number, number] | undefined {
+  if (cp >= 0x61 && cp <= 0x7a) return [0, cp - 0x61];
+  if (cp >= 0x41 && cp <= 0x5a) return [0, cp - 0x41];
+  if (cp >= 0x30 && cp <= 0x39) return [1, cp - 0x30];
+  return undefined;
+}
+
+/** 4+ consecutive letters or digits, ascending or descending; no wrap; letters and digits never join. */
+const violatesSequence = (cps: number[]) => hasRun(cps, seqKey, MIN_SEQUENCE);
+
+/** The same code point 3+ times in a row, compared exactly ("aAa" is fine). */
+function violatesRepeat(cps: number[]): boolean {
+  let run = 0, prev = -1;
+  for (const cp of cps) {
+    if (cp === prev) run++;
+    else {
+      run = 1;
+      prev = cp;
+    }
+    if (run > MAX_REPEAT) return true;
+  }
+  return false;
+}
+
+/**
+ * Every violated rule in table order. `empNo` is "" when the employee ID is
+ * malformed (CONTAINS_EMP_NO is then skipped, as on the server). Without
+ * `isCommon` (blocklist not loaded) COMMON_PASSWORD is never reported.
+ */
+export function checkPassword(
+  password: string,
+  empNo: string,
+  isCommon?: CommonCheck,
+): PasswordRule[] {
+  const cps = codePoints(password);
+  const violated: Record<PasswordRule, boolean> = {
+    LENGTH: violatesLength(cps),
+    CHARSET: violatesCharset(cps),
+    COMPLEXITY: violatesComplexity(cps),
+    COMMON_PASSWORD: isCommon?.(password) ?? false,
+    KEYBOARD_RUN: violatesKeyboardRun(cps),
+    SEQUENCE: violatesSequence(cps),
+    REPEAT: violatesRepeat(cps),
+    CONTAINS_EMP_NO: empNo !== "" && password.includes(empNo),
+  };
+  return PASSWORD_RULES.filter((r) => violated[r]);
+}
+
+/** The employee ID as the server sees it for CONTAINS_EMP_NO: "" unless it is well-formed. */
+export const empNoForPolicy = (empNo: string): string => (/^[0-9]{6}$/.test(empNo) ? empNo : "");

package/frontend/src/features/auth/useCountdown.test.tsx

@@ -0,0 +1,33 @@
+import { act, renderHook } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { useCountdown } from "./useCountdown";
+
+describe("useCountdown", () => {
+  beforeEach(() => vi.useFakeTimers());
+  afterEach(() => vi.useRealTimers());
+
+  it("counts down in whole seconds and stops at zero", () => {
+    const { result } = renderHook(() => useCountdown());
+    expect(result.current.remaining).toBe(0);
+    act(() => result.current.start(3));
+    expect(result.current.remaining).toBe(3);
+    act(() => void vi.advanceTimersByTime(1000));
+    expect(result.current.remaining).toBe(2);
+    act(() => void vi.advanceTimersByTime(2000));
+    expect(result.current.remaining).toBe(0);
+  });
+
+  it("treats 0 as at least one second", () => {
+    const { result } = renderHook(() => useCountdown());
+    act(() => result.current.start(0));
+    expect(result.current.remaining).toBe(1);
+  });
+
+  it("restarts from a new value", () => {
+    const { result } = renderHook(() => useCountdown());
+    act(() => result.current.start(10));
+    act(() => void vi.advanceTimersByTime(4000));
+    act(() => result.current.start(30));
+    expect(result.current.remaining).toBe(30);
+  });
+});

package/frontend/src/features/auth/useCountdown.ts

@@ -0,0 +1,28 @@
+import { useCallback, useEffect, useState } from "react";
+
+/**
+ * Whole seconds left of a countdown started with `start(seconds)`. It advances with
+ * `performance.now()`, so changing the system clock does not affect it (Frontend.md §5.3).
+ */
+export function useCountdown() {
+  const [endsAt, setEndsAt] = useState<number | null>(null);
+  const [remaining, setRemaining] = useState(0);
+
+  useEffect(() => {
+    if (endsAt === null) return;
+    const tick = () => {
+      const left = Math.max(0, Math.ceil((endsAt - performance.now()) / 1000));
+      setRemaining(left);
+      if (left === 0) setEndsAt(null);
+    };
+    tick();
+    const id = setInterval(tick, 250);
+    return () => clearInterval(id);
+  }, [endsAt]);
+
+  const start = useCallback((seconds: number) => {
+    setEndsAt(performance.now() + Math.max(1, seconds) * 1000);
+  }, []);
+
+  return { remaining, start };
+}

package/frontend/src/features/idea/CreateIdeaForm.tsx

@@ -0,0 +1,279 @@
+import { useRef, useState, type FormEvent, type ReactNode } from "react";
+import { useTranslation } from "react-i18next";
+import { Button } from "@/shared/ui/button";
+import { CopyButton } from "@/shared/ui/copy-button";
+import {
+  Field,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+} from "@/shared/ui/field";
+import { Input } from "@/shared/ui/input";
+import { NativeSelect } from "@/shared/ui/native-select";
+import { Textarea } from "@/shared/ui/textarea";
+import { SLIDE_EXTS } from "@/shared/slides";
+import { cleanName, cleanSummary, countCodePoints } from "@/shared/text";
+import {
+  CATEGORIES,
+  createIdea,
+  DIRECTIONS,
+  expectedBaseFor,
+  IDEA_FIELDS,
+  mapServerError,
+  NAME_MAX,
+  ORGS,
+  precheck,
+  SUMMARY_MAX,
+  type FieldProblems,
+  type IdeaDetail,
+  type IdeaField,
+  type IdeaText,
+  type Leader,
+} from "./create";
+
+const EMPTY: IdeaText = { category: "", org: "", direction: "", name: "", summary: "" };
+
+const OPTIONS = {
+  category: { list: CATEGORIES, key: "enums.category" },
+  org: { list: ORGS, key: "enums.org" },
+  direction: { list: DIRECTIONS, key: "enums.direction" },
+} as const;
+
+/**
+ * The create form (Frontend.md §5.5, §5.6, §8): code-point counters, the expected
+ * filename with copy buttons, a pre-check in the server's order, an error summary
+ * that takes focus, and server errors mapped to fields. The file is never renamed
+ * (OI-21): the user names it.
+ */
+export function CreateIdeaForm({
+  leader,
+  canSubmit,
+  onCreated,
+  onSubmissionRejected,
+}: {
+  leader: Leader;
+  /** False outside the submission window; the server still decides (Frontend.md §6.3 rule 6). */
+  canSubmit: boolean;
+  onCreated: (idea: IdeaDetail) => void;
+  /** A 403 SUBMISSION_* answer: the caller refetches the deadline (Frontend.md §5.3). */
+  onSubmissionRejected?: () => void;
+}) {
+  const { t, i18n } = useTranslation();
+  const [values, setValues] = useState<IdeaText>(EMPTY);
+  const [files, setFiles] = useState<File[]>([]);
+  const [problems, setProblems] = useState<FieldProblems>({});
+  const [serverExpected, setServerExpected] = useState<string | undefined>();
+  const [formError, setFormError] = useState<string | null>(null);
+  const [pending, setPending] = useState(false);
+  const [summaryKey, setSummaryKey] = useState(0);
+  const summary = useRef<HTMLDivElement>(null);
+  const form = useRef<HTMLFormElement>(null);
+
+  const expectedBase = expectedBaseFor(values, leader);
+  const fileExt = files[0]?.name.split(".").pop()?.toLowerCase();
+
+  const message = (f: IdeaField, code: string): string => {
+    const text = i18n.exists(`errors.${code}`) ? t(`errors.${code}`) : t("errors.VALIDATION_FAILED");
+    if (f !== "slides" || code !== "FILENAME_MISMATCH") return text;
+    const expected =
+      serverExpected ??
+      (expectedBase && `${expectedBase}.${fileExt === "pptx" ? "pptx" : "pdf"}`);
+    return expected ? `${text} ${t("pages.ideaForm.expectedIs", { name: expected })}` : text;
+  };
+
+  const fail = (p: FieldProblems, rest: string | null) => {
+    setProblems(p);
+    setFormError(rest);
+    setSummaryKey((k) => k + 1);
+    queueMicrotask(() => summary.current?.focus()); // WCAG 3.3.1
+  };
+
+  const onSubmit = async (e: FormEvent) => {
+    e.preventDefault();
+    if (pending || !canSubmit) return;
+    setServerExpected(undefined);
+    const { values: body, problems: local } = await precheck(values, files, leader);
+    if (Object.keys(local).length > 0) {
+      fail(local, null);
+      return;
+    }
+    setPending(true);
+    setProblems({});
+    setFormError(null);
+    try {
+      onCreated(await createIdea(body, files[0]!));
+    } catch (err) {
+      const { problems: p, rest, expected } = mapServerError(err);
+      setServerExpected(expected);
+      if (rest?.code === "SUBMISSION_CLOSED" || rest?.code === "SUBMISSION_NOT_OPEN") onSubmissionRejected?.();
+      fail(
+        p,
+        rest
+          ? t(`errors.${rest.code}`) + (rest.requestId ? ` ${t("common.requestId", { id: rest.requestId })}` : "")
+          : null,
+      );
+    } finally {
+      setPending(false);
+    }
+  };
+
+  const focusField = (f: IdeaField) => (e: { preventDefault: () => void }) => {
+    e.preventDefault();
+    form.current?.querySelector<HTMLElement>(`#${f}`)?.focus();
+  };
+
+  const set = (f: keyof IdeaText) => (e: { target: { value: string } }) =>
+    setValues((v) => ({ ...v, [f]: e.target.value }));
+
+  /** Common ARIA wiring of a control; `extra` ids (hint, counter) come first. */
+  const aria = (f: IdeaField, ...extra: string[]) => {
+    const problem = problems[f];
+    return {
+      id: f,
+      name: f,
+      required: true,
+      "aria-required": true as const,
+      "aria-invalid": problem ? true : undefined,
+      "aria-describedby": [...extra, problem && `${f}-error`].filter(Boolean).join(" ") || undefined,
+    };
+  };
+
+  const wrap = (f: IdeaField, control: ReactNode, below?: ReactNode) => (
+    <Field key={f} data-invalid={problems[f] ? true : undefined}>
+      <FieldLabel htmlFor={f}>{t(`fields.${f === "name" ? "ideaName" : f}`)}</FieldLabel>
+      {control}
+      {below}
+      {problems[f] && (
+        <FieldError id={`${f}-error`} role={undefined}>
+          {message(f, problems[f])}
+        </FieldError>
+      )}
+    </Field>
+  );
+
+  const counter = (f: "name" | "summary", n: number, max: number) => (
+    <FieldDescription id={`${f}-count`} className={n > max ? "text-destructive" : undefined}>
+      {t("pages.ideaForm.count", { n, max })}
+    </FieldDescription>
+  );
+
+  const listed = IDEA_FIELDS.filter((f) => problems[f] !== undefined);
+  const hasSummary = listed.length > 0 || formError !== null;
+  const nameCount = countCodePoints(cleanName(values.name));
+  const summaryCount = countCodePoints(cleanSummary(values.summary));
+
+  return (
+    <form ref={form} onSubmit={(e) => void onSubmit(e)} noValidate>
+      <FieldGroup>
+        {hasSummary && (
+          <div
+            key={summaryKey}
+            ref={summary}
+            role="alert"
+            tabIndex={-1}
+            className="rounded-md border border-destructive p-3 text-sm outline-none focus-visible:ring-[3px] focus-visible:ring-destructive/40"
+          >
+            <p className="font-medium text-destructive">{t("pages.register.summaryTitle")}</p>
+            {formError !== null && <p>{formError}</p>}
+            {listed.length > 0 && (
+              <ul className="mt-1 list-disc pl-5">
+                {listed.map((f) => (
+                  <li key={f}>
+                    <a href={`#${f}`} onClick={focusField(f)} className="underline underline-offset-4">
+                      {t(`fields.${f === "name" ? "ideaName" : f}`)}: {message(f, problems[f]!)}
+                    </a>
+                  </li>
+                ))}
+              </ul>
+            )}
+          </div>
+        )}
+
+        <div className="flex flex-col gap-1 text-sm">
+          <p className="font-medium">{t("fields.leader")}</p>
+          <p>
+            {leader.name} ({leader.empNo})
+          </p>
+          <p className="text-muted-foreground">{t("pages.ideaForm.leaderHint")}</p>
+        </div>
+
+        {(["category", "org", "direction"] as const).map((f) =>
+          wrap(
+            f,
+            <NativeSelect {...aria(f)} value={values[f]} onChange={set(f)}>
+              <option value="">{t("pages.ideaForm.choose")}</option>
+              {OPTIONS[f].list.map((code) => (
+                <option key={code} value={code}>
+                  {t(`${OPTIONS[f].key}.${code}`)}
+                </option>
+              ))}
+            </NativeSelect>,
+          ),
+        )}
+
+        {wrap(
+          "name",
+          <Input {...aria("name", "name-count", "name-hint")} autoComplete="off" value={values.name} onChange={set("name")} />,
+          <>
+            {counter("name", nameCount, NAME_MAX)}
+            <FieldDescription id="name-hint">{t("pages.ideaForm.nameHint")}</FieldDescription>
+          </>,
+        )}
+
+        {wrap(
+          "summary",
+          <Textarea {...aria("summary", "summary-count")} rows={6} value={values.summary} onChange={set("summary")} />,
+          counter("summary", summaryCount, SUMMARY_MAX),
+        )}
+
+        <section aria-labelledby="expected-title" className="rounded-md border bg-muted/40 p-3 text-sm">
+          <h2 id="expected-title" className="font-medium">
+            {t("pages.ideaForm.expectedTitle")}
+          </h2>
+          {expectedBase === null ? (
+            <p className="mt-1 text-muted-foreground">{t("pages.ideaForm.expectedPending")}</p>
+          ) : (
+            <>
+              <p className="mt-1 text-muted-foreground">{t("pages.ideaForm.expectedHint")}</p>
+              <ul className="mt-2 flex flex-col gap-2">
+                {SLIDE_EXTS.map((ext) => {
+                  const name = `${expectedBase}.${ext}`;
+                  return (
+                    <li key={ext} className="flex items-center gap-2">
+                      <code className="min-w-0 flex-1 break-all rounded bg-background px-2 py-1">{name}</code>
+                      <CopyButton
+                        value={name}
+                        label={t("pages.ideaForm.copy", { ext: ext.toUpperCase() })}
+                        copiedText={t("pages.ideaForm.copied")}
+                        failedText={t("pages.ideaForm.copyFailed")}
+                      />
+                    </li>
+                  );
+                })}
+              </ul>
+            </>
+          )}
+        </section>
+
+        {wrap(
+          "slides",
+          <Input
+            {...aria("slides", "slides-hint")}
+            type="file"
+            accept=".pdf,.pptx,application/pdf,application/vnd.openxmlformats-officedocument.presentationml.presentation"
+            onChange={(e) => setFiles(Array.from(e.target.files ?? []))}
+          />,
+          <FieldDescription id="slides-hint">{t("pages.ideaForm.slidesHint")}</FieldDescription>,
+        )}
+
+        <Field>
+          {!canSubmit && <FieldDescription>{t("pages.ideaCreate.closedHint")}</FieldDescription>}
+          <Button type="submit" disabled={pending || !canSubmit} aria-busy={pending || undefined}>
+            {pending ? t("pages.ideaCreate.submitting") : t("pages.ideaCreate.submit")}
+          </Button>
+        </Field>
+      </FieldGroup>
+    </form>
+  );
+}

package/frontend/src/features/idea/create.ts

@@ -0,0 +1,123 @@
+import { ApiError, apiFetch, type components } from '@/shared/api';
+import { CATEGORIES, expectedFilenameBase, filenameTooLong, precheckSlides, type Category } from '@/shared/slides';
+import { checkName, checkSummary } from '@/shared/text';
+
+export type IdeaDetail = components['schemas']['IdeaDetail'];
+
+/** Form-field order; also the order of the error summary (error-codes.md §2). */
+export const IDEA_FIELDS = ['category', 'org', 'direction', 'name', 'summary', 'slides'] as const;
+export type IdeaField = (typeof IDEA_FIELDS)[number];
+export type TextField = Exclude<IdeaField, 'slides'>;
+
+export const ORGS = ['AAID', 'BSID', 'ICSD', 'TSID', 'PLED', 'DEID'] as const;
+export const DIRECTIONS = [
+  'GREEN_MANUFACTURING',
+  'RESPONSIBLE_SUPPLY_CHAIN',
+  'INCLUSIVE_WORKPLACE',
+  'TALENT_DEVELOPMENT',
+  'CARING_FOR_DISADVANTAGED',
+] as const;
+export { CATEGORIES };
+
+export const NAME_MAX = 75;
+export const SUMMARY_MAX = 300;
+
+export type IdeaText = Record<TextField, string>;
+/** A field problem is an `errors.<code>` key. */
+export type FieldProblems = Partial<Record<IdeaField, string>>;
+
+export interface Leader {
+  name: string;
+  empNo: string;
+}
+
+const isCategory = (v: string): v is Category => (CATEGORIES as readonly string[]).includes(v);
+const isOneOf = (list: readonly string[], v: string) => list.includes(v);
+
+/**
+ * The expected filename base for the current input, or null while category, org or
+ * name cannot produce one. Built from the cleaned name, as the server does.
+ */
+export function expectedBaseFor(v: Pick<IdeaText, 'category' | 'org' | 'name'>, leader: Leader): string | null {
+  const name = checkName(v.name, NAME_MAX);
+  if (!isCategory(v.category) || !isOneOf(ORGS, v.org) || name.problem !== '') return null;
+  return expectedFilenameBase(v.category, v.org, leader.name, leader.empNo, name.cleaned);
+}
+
+/**
+ * Text checks in the server's order (PRD §6.2, §6.6), one problem per field;
+ * `FILENAME_TOO_LONG` is reported on `name` like the server does. Returns the
+ * cleaned values that are sent, and the expected base when the text is valid.
+ */
+export function precheckText(v: IdeaText, leader: Leader): { values: IdeaText; problems: FieldProblems; expectedBase: string | null } {
+  const problems: FieldProblems = {};
+  const pick = (f: 'category' | 'org' | 'direction', list: readonly string[]) => {
+    if (v[f] === '') problems[f] = 'REQUIRED';
+    else if (!isOneOf(list, v[f])) problems[f] = 'INVALID_ENUM';
+  };
+  pick('category', CATEGORIES);
+  pick('org', ORGS);
+  pick('direction', DIRECTIONS);
+
+  const name = checkName(v.name, NAME_MAX);
+  let expectedBase: string | null = null;
+  if (name.problem) problems.name = name.problem;
+  else {
+    expectedBase = expectedBaseFor(v, leader);
+    if (expectedBase !== null && filenameTooLong(expectedBase)) {
+      problems.name = 'FILENAME_TOO_LONG';
+      expectedBase = null;
+    }
+  }
+
+  const summary = checkSummary(v.summary, SUMMARY_MAX);
+  if (summary.problem) problems.summary = summary.problem;
+
+  return { values: { ...v, name: name.cleaned, summary: summary.cleaned }, problems, expectedBase };
+}
+
+/**
+ * Whole-form pre-check. A missing file is always reported; the other file steps
+ * run only when the text is valid, because the server does not validate the file
+ * otherwise (PRD §6.8) and the filename depends on the text.
+ */
+export async function precheck(v: IdeaText, files: readonly File[], leader: Leader): Promise<{ values: IdeaText; problems: FieldProblems }> {
+  const { values, problems, expectedBase } = precheckText(v, leader);
+  const textOk = Object.keys(problems).length === 0;
+  const slides = files.length === 0 ? 'REQUIRED' : textOk ? await precheckSlides(files, expectedBase) : '';
+  if (slides) problems.slides = slides;
+  return { values, problems };
+}
+
+/** POST /ideas: one multipart request with every field and the slides (PRD §6.6). */
+export async function createIdea(values: IdeaText, file: File): Promise<IdeaDetail> {
+  const body = new FormData();
+  for (const f of ['category', 'org', 'direction', 'name', 'summary'] as const) body.append(f, values[f]);
+  body.append('slides', file, file.name);
+  const res = await apiFetch('/ideas', { method: 'POST', body });
+  return (await res.json()) as IdeaDetail;
+}
+
+/** File errors that carry no `errors[]` entry; they belong to the slides field. */
+const SLIDES_CODES = new Set(['FILE_TOO_LARGE', 'EMPTY_FILE', 'UNSUPPORTED_FILE_TYPE', 'FILENAME_MISMATCH']);
+
+const isField = (f: string): f is IdeaField => (IDEA_FIELDS as readonly string[]).includes(f);
+
+/**
+ * Maps a failed create to field problems; `rest` has no field (403 state, 503, …)
+ * and is shown as a form-level message. `expected` is the server's expected
+ * filename from a `FILENAME_MISMATCH`.
+ */
+export function mapServerError(e: unknown): { problems: FieldProblems; rest: ApiError | null; expected?: string } {
+  if (!(e instanceof ApiError)) return { problems: {}, rest: new ApiError({ status: 0, code: 'UNKNOWN' }) };
+  if (e.code === 'IDEA_DUPLICATE') return { problems: { name: 'IDEA_DUPLICATE' }, rest: null };
+  const problems: FieldProblems = {};
+  let expected: string | undefined;
+  for (const fe of e.errors) {
+    if (!isField(fe.field) || problems[fe.field] !== undefined) continue;
+    problems[fe.field] = fe.code;
+    if (fe.field === 'slides' && typeof fe.expected === 'string') expected = fe.expected;
+  }
+  if (Object.keys(problems).length === 0 && SLIDES_CODES.has(e.code)) problems.slides = e.code;
+  return { problems, rest: Object.keys(problems).length > 0 ? null : e, expected };
+}

package/frontend/src/shared/api/activity.ts

@@ -0,0 +1,20 @@
+/**
+ * Time of the last answered server request (Frontend.md §8.1, OI-22). Any answer except a 401 means
+ * the server saw the session, so the idle clock restarts; the idle-timeout warning reads it.
+ */
+let last = Date.now();
+const listeners = new Set<() => void>();
+
+export const lastActivity = () => last;
+
+export function markActivity(): void {
+  last = Date.now();
+  listeners.forEach((fn) => fn());
+}
+
+export function subscribeActivity(fn: () => void): () => void {
+  listeners.add(fn);
+  return () => {
+    listeners.delete(fn);
+  };
+}

package/frontend/src/shared/api/http.ts

@@ -1,3 +1,4 @@
+import { markActivity } from './activity';
 import { API_BASE, clearCsrfToken, getCsrfToken, refreshCsrfToken } from './csrf';
 import { parseApiError, type ApiError } from './problem';
 
@@ -73,6 +74,7 @@ export async function apiFetch(path: string, init: ApiRequestInit = {}): Promise
     res = await send(await refreshCsrfToken());
   }
 
+  if (res.status !== 401) markActivity();
   if (res.ok) {
     if (write && SESSION_CHANGING.has(path)) clearCsrfToken();
     return res;

package/frontend/src/shared/api/index.ts

@@ -4,3 +4,4 @@ export { apiFetch, setUnauthenticatedHandler } from './http';
 export type { ApiRequestInit } from './http';
 export { clearCsrfToken, getCsrfToken } from './csrf';
 export type { paths, components } from './types.generated';
+export { lastActivity, markActivity, subscribeActivity } from './activity';