@innspel/react-native 0.3.1 → 0.4.0

package/dist/index.d.cts

@@ -1,4 +1,4 @@
-import { MaskRect, InnspelClient, OpenFeedbackOptions, ParticipationView, InnspelStorage, SubmissionStatus, SubmissionType } from '@innspel/core';
+import { MaskRect, InnspelClient, OpenFeedbackOptions, ParticipationView, ProgramTask, InnspelStorage, SubmissionStatus, SubmissionType } from '@innspel/core';
 export { AttachmentInput, AttachmentOutcome, CaptureInput, ContextInput, InnspelClient, InnspelOptions, InnspelStorage, InvitationView, MyPrograms, MySubmission, OpenFeedbackOptions, ParticipationView, ProgramTask, ProgramView, SubmissionStatusView } from '@innspel/core';
 import React, { RefObject, ComponentRef } from 'react';
 import { View, StyleProp, ViewStyle } from 'react-native';
@@ -376,18 +376,23 @@ declare function InnspelPrivate({ children, style }: {
  * dyplenken og gir det hit. Uten det viser banneret fortsatt invitasjonen — men
  * «Bli med» er inaktiv, med lenken forklart, i stedet for å feile ved trykk.
  *
- * Oppgavene, «Hvordan gikk det?» og oppfølgingene er M3.2.
+ * Deltakelsen (3c) viser oppgavene med «Gjort» → «Hvordan gikk det?» (tre lukkede
+ * valg og en setning, aldri en skala) og oppfølgingskortene (3d, DD-34), der arten
+ * avgjør knappene. «Ikke» tilbyr å melde feilen — til verten via `onMeldFeil`, fordi
+ * feilsporet og navigasjonen er vertens.
  *
  * @example
  * ```tsx
  * <InnspelProgram invitationToken={tokenFraDyplenke} />
  * ```
  */
-declare function InnspelProgram({ invitationToken, onEndring, }: {
+declare function InnspelProgram({ invitationToken, onEndring, onMeldFeil, }: {
     /** Engangs-tokenet fra leietakerens egen kanal, typisk fanget fra en dyplenke. */
     invitationToken?: string;
     /** Kalles når testeren blir med eller går ut — for vertens egen navigasjon. */
     onEndring?: (deltakelse: ParticipationView | null) => void;
+    /** Kalles når testeren vil melde at en oppgave ikke gikk — verten åpner feilsporet med oppgaven som kontekst. Utelatt = tilbudet vises ikke. */
+    onMeldFeil?: (task: ProgramTask) => void;
 }): React.JSX.Element | null;
 
 /**
@@ -582,6 +587,30 @@ declare const tekst: {
     readonly gaaUtTekst: (navn: string) => string;
     readonly bliVaerende: "Bli værende";
     readonly gaaUtBekreft: "Gå ut";
+    readonly oppgaverTittel: "Oppgavene";
+    readonly oppgaveIkkeBegynt: "Ikke begynt";
+    readonly oppgaveGjort: "Gjort";
+    readonly oppgaveGjortLabel: (tittel: string) => string;
+    readonly oppgaveGjortMed: (utfall: string) => string;
+    readonly hvordanGikkDet: "Hvordan gikk det?";
+    readonly utfallFungerte: "Fungerte";
+    readonly utfallDelvis: "Delvis";
+    readonly utfallIkke: "Ikke";
+    readonly setningLabel: "Vil du si én setning om det? (valgfritt)";
+    readonly setningPlaceholder: "Kopien kom, men rullesjefen manglet på torsdag.";
+    readonly lagre: "Lagre";
+    readonly lagreHint: "Ferdig — ingen flere spørsmål nå.";
+    /** Etter «Ikke»: feilsporet er vertens — plattformen navigerer aldri selv. */
+    readonly meldFeil: "Meld det som feil";
+    readonly meldFeilHint: "Gikk det ikke? Et innspill hjelper oss å finne ut hvorfor.";
+    readonly svarFeil: (arsak: string) => string;
+    readonly oppfolgingRegion: "Oppfølging fra betaprogrammet";
+    readonly oppfolgingKontakt: (nr: number, maks: number) => string;
+    readonly oppfolgingPaaminnelseHint: (nr: number, maks: number) => string;
+    readonly oppfolgingUtgangHint: (nr: number, maks: number) => string;
+    readonly senere: "Senere";
+    readonly svarNaa: "Svar nå";
+    readonly aapneOppgavene: "Åpne oppgavene";
     readonly tilbake: "Tilbake";
     readonly lukk: "Lukk";
     readonly venterPaaNett: "Venter på nett — sendes automatisk";

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { MaskRect, InnspelClient, OpenFeedbackOptions, ParticipationView, InnspelStorage, SubmissionStatus, SubmissionType } from '@innspel/core';
+import { MaskRect, InnspelClient, OpenFeedbackOptions, ParticipationView, ProgramTask, InnspelStorage, SubmissionStatus, SubmissionType } from '@innspel/core';
 export { AttachmentInput, AttachmentOutcome, CaptureInput, ContextInput, InnspelClient, InnspelOptions, InnspelStorage, InvitationView, MyPrograms, MySubmission, OpenFeedbackOptions, ParticipationView, ProgramTask, ProgramView, SubmissionStatusView } from '@innspel/core';
 import React, { RefObject, ComponentRef } from 'react';
 import { View, StyleProp, ViewStyle } from 'react-native';
@@ -376,18 +376,23 @@ declare function InnspelPrivate({ children, style }: {
  * dyplenken og gir det hit. Uten det viser banneret fortsatt invitasjonen — men
  * «Bli med» er inaktiv, med lenken forklart, i stedet for å feile ved trykk.
  *
- * Oppgavene, «Hvordan gikk det?» og oppfølgingene er M3.2.
+ * Deltakelsen (3c) viser oppgavene med «Gjort» → «Hvordan gikk det?» (tre lukkede
+ * valg og en setning, aldri en skala) og oppfølgingskortene (3d, DD-34), der arten
+ * avgjør knappene. «Ikke» tilbyr å melde feilen — til verten via `onMeldFeil`, fordi
+ * feilsporet og navigasjonen er vertens.
  *
  * @example
  * ```tsx
  * <InnspelProgram invitationToken={tokenFraDyplenke} />
  * ```
  */
-declare function InnspelProgram({ invitationToken, onEndring, }: {
+declare function InnspelProgram({ invitationToken, onEndring, onMeldFeil, }: {
     /** Engangs-tokenet fra leietakerens egen kanal, typisk fanget fra en dyplenke. */
     invitationToken?: string;
     /** Kalles når testeren blir med eller går ut — for vertens egen navigasjon. */
     onEndring?: (deltakelse: ParticipationView | null) => void;
+    /** Kalles når testeren vil melde at en oppgave ikke gikk — verten åpner feilsporet med oppgaven som kontekst. Utelatt = tilbudet vises ikke. */
+    onMeldFeil?: (task: ProgramTask) => void;
 }): React.JSX.Element | null;
 
 /**
@@ -582,6 +587,30 @@ declare const tekst: {
     readonly gaaUtTekst: (navn: string) => string;
     readonly bliVaerende: "Bli værende";
     readonly gaaUtBekreft: "Gå ut";
+    readonly oppgaverTittel: "Oppgavene";
+    readonly oppgaveIkkeBegynt: "Ikke begynt";
+    readonly oppgaveGjort: "Gjort";
+    readonly oppgaveGjortLabel: (tittel: string) => string;
+    readonly oppgaveGjortMed: (utfall: string) => string;
+    readonly hvordanGikkDet: "Hvordan gikk det?";
+    readonly utfallFungerte: "Fungerte";
+    readonly utfallDelvis: "Delvis";
+    readonly utfallIkke: "Ikke";
+    readonly setningLabel: "Vil du si én setning om det? (valgfritt)";
+    readonly setningPlaceholder: "Kopien kom, men rullesjefen manglet på torsdag.";
+    readonly lagre: "Lagre";
+    readonly lagreHint: "Ferdig — ingen flere spørsmål nå.";
+    /** Etter «Ikke»: feilsporet er vertens — plattformen navigerer aldri selv. */
+    readonly meldFeil: "Meld det som feil";
+    readonly meldFeilHint: "Gikk det ikke? Et innspill hjelper oss å finne ut hvorfor.";
+    readonly svarFeil: (arsak: string) => string;
+    readonly oppfolgingRegion: "Oppfølging fra betaprogrammet";
+    readonly oppfolgingKontakt: (nr: number, maks: number) => string;
+    readonly oppfolgingPaaminnelseHint: (nr: number, maks: number) => string;
+    readonly oppfolgingUtgangHint: (nr: number, maks: number) => string;
+    readonly senere: "Senere";
+    readonly svarNaa: "Svar nå";
+    readonly aapneOppgavene: "Åpne oppgavene";
     readonly tilbake: "Tilbake";
     readonly lukk: "Lukk";
     readonly venterPaaNett: "Venter på nett — sendes automatisk";

package/dist/index.js

@@ -580,6 +580,32 @@ var tekst = {
   gaaUtTekst: (navn) => `Du tas ut av testgruppen med en gang. \xAB${navn}\xBB sl\xE5s av for deg, og vi tar ikke kontakt igjen. Det du allerede har svart, beholdes.`,
   bliVaerende: "Bli v\xE6rende",
   gaaUtBekreft: "G\xE5 ut",
+  // 3c (M3.2) — oppgavene og «Hvordan gikk det?»: tre lukkede valg, aldri en skala
+  oppgaverTittel: "Oppgavene",
+  oppgaveIkkeBegynt: "Ikke begynt",
+  oppgaveGjort: "Gjort",
+  oppgaveGjortLabel: (tittel) => `Gjort: ${tittel}`,
+  oppgaveGjortMed: (utfall) => `Gjort \xB7 ${utfall}`,
+  hvordanGikkDet: "Hvordan gikk det?",
+  utfallFungerte: "Fungerte",
+  utfallDelvis: "Delvis",
+  utfallIkke: "Ikke",
+  setningLabel: "Vil du si \xE9n setning om det? (valgfritt)",
+  setningPlaceholder: "Kopien kom, men rullesjefen manglet p\xE5 torsdag.",
+  lagre: "Lagre",
+  lagreHint: "Ferdig \u2014 ingen flere sp\xF8rsm\xE5l n\xE5.",
+  /** Etter «Ikke»: feilsporet er vertens — plattformen navigerer aldri selv. */
+  meldFeil: "Meld det som feil",
+  meldFeilHint: "Gikk det ikke? Et innspill hjelper oss \xE5 finne ut hvorfor.",
+  svarFeil: (arsak) => `Kunne ikke lagre svaret: ${arsak}`,
+  // 3d (M3.2) — oppfølgingskortene (DD-34): arten avgjør knappene
+  oppfolgingRegion: "Oppf\xF8lging fra betaprogrammet",
+  oppfolgingKontakt: (nr, maks) => `Kontakt ${nr} av ${maks} \xB7 tar under ett minutt`,
+  oppfolgingPaaminnelseHint: (nr, maks) => `Kontakt ${nr} av ${maks} \xB7 planlagt p\xE5minnelse`,
+  oppfolgingUtgangHint: (nr, maks) => `Kontakt ${nr} av ${maks} \xB7 den siste vi sender`,
+  senere: "Senere",
+  svarNaa: "Svar n\xE5",
+  aapneOppgavene: "\xC5pne oppgavene",
   // Felles
   tilbake: "Tilbake",
   lukk: "Lukk",
@@ -1791,9 +1817,11 @@ function InnspelPrivate({ children, style }) {
 }
 
 // src/program/InnspelProgram.tsx
-import { InnspelApiError as InnspelApiError2 } from "@innspel/core";
-import { useCallback as useCallback4, useEffect as useEffect3, useState as useState5 } from "react";
-import { Modal as Modal3, Pressable as Pressable7, Text as Text10, View as View12 } from "react-native";
+import {
+  InnspelApiError as InnspelApiError2
+} from "@innspel/core";
+import { useCallback as useCallback4, useEffect as useEffect3, useState as useState6 } from "react";
+import { Modal as Modal4, Pressable as Pressable8, Text as Text13, View as View15 } from "react-native";
 
 // src/program/Aksept.tsx
 import "react";
@@ -1949,21 +1977,263 @@ function Aksept({
   ) }) });
 }
 
+// src/program/HvordanGikkDet.tsx
+import { useState as useState5 } from "react";
+import { Modal as Modal3, Pressable as Pressable7, Text as Text10, TextInput as TextInput2, View as View12 } from "react-native";
+import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
+var UTFALL = [
+  { verdi: "fungerte", ikon: "\u2713", etikett: tekst.utfallFungerte },
+  { verdi: "delvis", ikon: "\u25D0", etikett: tekst.utfallDelvis },
+  { verdi: "ikke", ikon: "\u2715", etikett: tekst.utfallIkke }
+];
+var SETNING_MAKS = 140;
+function utfallEtikett(verdi) {
+  return UTFALL.find((u) => u.verdi === verdi)?.etikett ?? verdi;
+}
+function HvordanGikkDet({
+  under,
+  sender,
+  feil,
+  onLagre,
+  onLukk
+}) {
+  const tema = useTema();
+  const [valgt, setValgt] = useState5();
+  const [setning, setSetning] = useState5("");
+  return /* @__PURE__ */ jsx12(Modal3, { visible: true, transparent: true, animationType: "fade", onRequestClose: onLukk, accessibilityViewIsModal: true, children: /* @__PURE__ */ jsx12(View12, { style: { flex: 1, backgroundColor: tema.color.scrim, justifyContent: "flex-end", padding: tema.space.md }, children: /* @__PURE__ */ jsxs11(
+    View12,
+    {
+      testID: "hvordan-gikk-det",
+      accessibilityViewIsModal: true,
+      style: {
+        backgroundColor: tema.color.surface,
+        borderRadius: tema.radius.lg,
+        borderWidth: tema.hairline,
+        borderColor: tema.color.borderStrong,
+        padding: tema.space.md,
+        gap: tema.space.md
+      },
+      children: [
+        /* @__PURE__ */ jsx12(Btn, { variant: "ghost", testID: "hvordan-tilbake", ikon: "\u2190", label: tekst.tilbake, onPress: onLukk }),
+        /* @__PURE__ */ jsx12(Hint, { children: under }),
+        /* @__PURE__ */ jsx12(H, { children: tekst.hvordanGikkDet }),
+        /* @__PURE__ */ jsx12(View12, { testID: "utfall-gruppe", accessibilityRole: "radiogroup", accessibilityLabel: tekst.hvordanGikkDet, style: { flexDirection: "row", gap: tema.space.sm }, children: UTFALL.map((u) => {
+          const aktiv = valgt === u.verdi;
+          return /* @__PURE__ */ jsxs11(
+            Pressable7,
+            {
+              testID: `utfall-${u.verdi}`,
+              accessibilityRole: "radio",
+              accessibilityLabel: u.etikett,
+              accessibilityState: { checked: aktiv },
+              onPress: () => setValgt(u.verdi),
+              style: {
+                flex: 1,
+                minHeight: tema.touch,
+                alignItems: "center",
+                justifyContent: "center",
+                gap: tema.space.xs,
+                padding: tema.space.sm,
+                borderRadius: tema.radius.md,
+                borderWidth: tema.hairline,
+                borderColor: aktiv ? tema.color.brand : tema.color.borderStrong,
+                backgroundColor: aktiv ? tema.color.brandBg : tema.color.surfaceRaised
+              },
+              children: [
+                /* @__PURE__ */ jsx12(Text10, { accessibilityElementsHidden: true, importantForAccessibility: "no", style: { fontSize: tema.font.h3, color: tema.color.textPrimary }, children: u.ikon }),
+                /* @__PURE__ */ jsx12(Text10, { style: { color: tema.color.textPrimary, fontSize: tema.font.small, fontWeight: aktiv ? tema.weight.semibold : tema.weight.regular }, children: u.etikett })
+              ]
+            },
+            u.verdi
+          );
+        }) }),
+        /* @__PURE__ */ jsxs11(View12, { style: { gap: tema.space.xs }, children: [
+          /* @__PURE__ */ jsx12(Text10, { style: { color: tema.color.textSecondary, fontSize: tema.font.small }, children: tekst.setningLabel }),
+          /* @__PURE__ */ jsx12(
+            TextInput2,
+            {
+              testID: "hvordan-setning",
+              accessibilityLabel: tekst.setningLabel,
+              value: setning,
+              onChangeText: setSetning,
+              maxLength: SETNING_MAKS,
+              multiline: true,
+              numberOfLines: 3,
+              placeholder: tekst.setningPlaceholder,
+              placeholderTextColor: tema.color.textMuted,
+              style: {
+                backgroundColor: tema.color.surfaceRaised,
+                borderWidth: tema.hairline,
+                borderColor: tema.color.borderStrong,
+                borderRadius: tema.radius.md,
+                padding: tema.space.md,
+                color: tema.color.textPrimary,
+                fontSize: tema.font.body,
+                lineHeight: tema.lineHeight.body,
+                minHeight: tema.touch * 2,
+                textAlignVertical: "top"
+              }
+            }
+          )
+        ] }),
+        feil ? /* @__PURE__ */ jsx12(Banner, { live: true, ikon: "\u26A0", tone: "danger", children: tekst.svarFeil(feil) }) : null,
+        /* @__PURE__ */ jsx12(
+          Btn,
+          {
+            testID: "hvordan-lagre",
+            label: tekst.lagre,
+            hint: tekst.lagreHint,
+            disabled: valgt === void 0 || sender,
+            onPress: () => {
+              if (valgt === void 0) return;
+              const trimmet = setning.trim();
+              onLagre(valgt, trimmet.length > 0 ? trimmet : void 0);
+            }
+          }
+        )
+      ]
+    }
+  ) }) });
+}
+
+// src/program/Oppfolging.tsx
+import "react";
+import { Text as Text11, View as View13 } from "react-native";
+import { Fragment as Fragment2, jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
+function tarSvar(kind) {
+  return kind === "hvordan_gikk_det" || kind === "sjekkpunkt";
+}
+function Oppfolging({
+  oppfolging,
+  kontaktNr,
+  maksKontakter,
+  onSenere,
+  onSvar,
+  onAapneOppgavene,
+  onGaaUt
+}) {
+  const tema = useTema();
+  const art = tarSvar(oppfolging.kind) ? "spoersmaal" : oppfolging.kind === "tilbud_om_utgang" ? "utgang" : "paaminnelse";
+  const ikon = art === "spoersmaal" ? "\u{1F9EA}" : art === "utgang" ? "\u{1F6AA}" : "\u{1F4C5}";
+  const hint = art === "spoersmaal" ? tekst.oppfolgingKontakt(kontaktNr, maksKontakter) : art === "utgang" ? tekst.oppfolgingUtgangHint(kontaktNr, maksKontakter) : tekst.oppfolgingPaaminnelseHint(kontaktNr, maksKontakter);
+  return /* @__PURE__ */ jsxs12(
+    View13,
+    {
+      testID: `oppfolging-${oppfolging.id}`,
+      accessibilityLabel: tekst.oppfolgingRegion,
+      style: {
+        backgroundColor: tema.color.brandBg,
+        borderWidth: tema.hairline,
+        borderColor: tema.color.brand,
+        borderRadius: tema.radius.lg,
+        padding: tema.space.md,
+        gap: tema.space.sm
+      },
+      children: [
+        /* @__PURE__ */ jsxs12(View13, { style: { flexDirection: "row", gap: tema.space.sm, alignItems: "flex-start" }, children: [
+          /* @__PURE__ */ jsx13(Text11, { accessibilityElementsHidden: true, importantForAccessibility: "no", style: { fontSize: tema.font.h3 }, children: ikon }),
+          /* @__PURE__ */ jsxs12(View13, { style: { flex: 1, gap: tema.space.xs }, children: [
+            /* @__PURE__ */ jsx13(Text11, { style: { color: tema.color.textPrimary, fontSize: tema.font.body, lineHeight: tema.lineHeight.body }, children: oppfolging.question }),
+            /* @__PURE__ */ jsx13(Hint, { children: hint })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx13(View13, { style: { flexDirection: "row", gap: tema.space.sm }, children: art === "utgang" ? /* @__PURE__ */ jsxs12(Fragment2, { children: [
+          /* @__PURE__ */ jsx13(Btn, { grow: true, variant: "secondary", testID: `bli-vaerende-${oppfolging.id}`, label: tekst.bliVaerende, onPress: onSenere }),
+          /* @__PURE__ */ jsx13(Btn, { grow: true, variant: "danger", testID: `gaa-ut-${oppfolging.id}`, ikon: "\u{1F6AA}", label: tekst.gaaUtBekreft, onPress: onGaaUt })
+        ] }) : /* @__PURE__ */ jsxs12(Fragment2, { children: [
+          /* @__PURE__ */ jsx13(Btn, { grow: true, variant: "secondary", testID: `senere-${oppfolging.id}`, label: tekst.senere, onPress: onSenere }),
+          art === "spoersmaal" ? /* @__PURE__ */ jsx13(Btn, { grow: true, testID: `svar-naa-${oppfolging.id}`, label: tekst.svarNaa, onPress: onSvar }) : /* @__PURE__ */ jsx13(Btn, { grow: true, testID: `aapne-oppgavene-${oppfolging.id}`, label: tekst.aapneOppgavene, onPress: onAapneOppgavene })
+        ] }) })
+      ]
+    }
+  );
+}
+
+// src/program/Oppgaver.tsx
+import "react";
+import { Text as Text12, View as View14 } from "react-native";
+import { jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
+function Oppgaver({
+  tasks,
+  completions,
+  onGjort
+}) {
+  const tema = useTema();
+  const ferdig = new Map(completions.map((c) => [c.taskId, c]));
+  return /* @__PURE__ */ jsx14(View14, { testID: "oppgaver", accessibilityLabel: tekst.oppgaverTittel, style: { gap: tema.space.sm }, children: [...tasks].sort((a, b) => a.order - b.order).map((o) => {
+    const c = ferdig.get(o.id);
+    return /* @__PURE__ */ jsxs13(
+      View14,
+      {
+        testID: `oppgave-${o.id}`,
+        style: {
+          flexDirection: "row",
+          alignItems: "center",
+          gap: tema.space.sm,
+          paddingVertical: tema.space.xs,
+          borderBottomWidth: tema.hairline,
+          borderBottomColor: tema.color.border
+        },
+        children: [
+          /* @__PURE__ */ jsxs13(View14, { style: { flex: 1, gap: tema.space.xs }, children: [
+            /* @__PURE__ */ jsx14(Text12, { style: { color: tema.color.textPrimary, fontSize: tema.font.body, lineHeight: tema.lineHeight.body }, children: o.title }),
+            /* @__PURE__ */ jsxs13(Hint, { children: [
+              c ? tekst.oppgaveGjortMed(utfallEtikett(c.outcome)) : `${tekst.oppgaveIkkeBegynt} \xB7 ${tekst.akseptOppgaveTid(o.estimatedMinutes)}`,
+              c?.text ? ` \xB7 \xAB${c.text}\xBB` : ""
+            ] })
+          ] }),
+          c ? /* @__PURE__ */ jsx14(Text12, { accessibilityLabel: tekst.oppgaveGjortMed(utfallEtikett(c.outcome)), style: { color: tema.color.success, fontSize: tema.font.h3 }, children: "\u2713" }) : /* @__PURE__ */ jsx14(Btn, { variant: "secondary", testID: `gjort-${o.id}`, ikon: "\u2713", label: tekst.oppgaveGjort, accessibilityLabel: tekst.oppgaveGjortLabel(o.title), onPress: () => onGjort(o) })
+        ]
+      },
+      o.id
+    );
+  }) });
+}
+
 // src/program/InnspelProgram.tsx
-import { Fragment as Fragment2, jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
 function InnspelProgram({
   invitationToken,
-  onEndring
+  onEndring,
+  onMeldFeil
 }) {
   const { client } = useInnspel();
   const tema = useTema();
-  const [mine, setMine] = useState5();
-  const [deltakelse, setDeltakelse] = useState5();
-  const [viserAksept, setViserAksept] = useState5(false);
-  const [viserGaaUt, setViserGaaUt] = useState5(false);
-  const [avvist, setAvvist] = useState5(false);
-  const [sender, setSender] = useState5(false);
-  const [feil, setFeil] = useState5();
+  const [mine, setMine] = useState6();
+  const [deltakelse, setDeltakelse] = useState6();
+  const [viserAksept, setViserAksept] = useState6(false);
+  const [viserGaaUt, setViserGaaUt] = useState6(false);
+  const [avvist, setAvvist] = useState6(false);
+  const [sender, setSender] = useState6(false);
+  const [feil, setFeil] = useState6();
+  const [dialog, setDialog] = useState6();
+  const [svarFeil, setSvarFeil] = useState6();
+  const [lagtBort, setLagtBort] = useState6(/* @__PURE__ */ new Set());
+  const [meldFeilFor, setMeldFeilFor] = useState6();
+  const leggBort = useCallback4((id) => setLagtBort((s) => /* @__PURE__ */ new Set([...s, id])), []);
+  const lagreSvar = useCallback4(
+    async (outcome, text) => {
+      if (!dialog || !deltakelse) return;
+      setSender(true);
+      setSvarFeil(void 0);
+      try {
+        if (dialog.type === "oppgave") {
+          const ny = await client.programs.completeTask(dialog.task.id, { outcome, ...text ? { text } : {} });
+          setDeltakelse({ ...deltakelse, completions: [...deltakelse.completions, ny] });
+          if (outcome === "ikke" && onMeldFeil) setMeldFeilFor(dialog.task);
+        } else {
+          await client.programs.respond(dialog.oppfolging.id, { outcome, ...text ? { text } : {} });
+          setMine((m) => m ? { ...m, pendingFollowUps: m.pendingFollowUps.filter((f) => f.id !== dialog.oppfolging.id) } : m);
+        }
+        setDialog(void 0);
+      } catch (e) {
+        setSvarFeil(e instanceof InnspelApiError2 ? e.message : "tjeneren svarte ikke.");
+      } finally {
+        setSender(false);
+      }
+    },
+    [client, deltakelse, dialog, onMeldFeil]
+  );
   useEffect3(() => {
     if (client.isAnonymous) return;
     let levende = true;
@@ -2009,14 +2279,69 @@ function InnspelProgram({
   const program = deltakelse?.program ?? invitasjon?.program;
   if (!program) return null;
   if (deltakelse) {
-    return /* @__PURE__ */ jsxs11(View12, { testID: "program-deltakelse", accessibilityLabel: tekst.deltakelseRegion, style: { gap: tema.space.sm }, children: [
-      /* @__PURE__ */ jsxs11(Card, { children: [
-        /* @__PURE__ */ jsx12(H, { sub: tekst.deltakelsePeriode(periode(program.opensAt, program.closesAt), deltakelse.contactsSent, program.maxContacts), children: program.name }),
-        /* @__PURE__ */ jsx12(Hint, { children: tekst.deltakelseOppgaverKommer }),
-        /* @__PURE__ */ jsx12(Btn, { variant: "ghost", testID: "gaa-ut", ikon: "\u{1F6AA}", label: tekst.gaaUt, onPress: () => setViserGaaUt(true) })
+    const kort = (mine?.pendingFollowUps ?? []).filter((f) => f.programId === program.id && !lagtBort.has(f.id)).sort((a, b) => a.emittedAt.localeCompare(b.emittedAt));
+    const forsteKontaktNr = Math.max(1, deltakelse.contactsSent - kort.length + 1);
+    return /* @__PURE__ */ jsxs14(View15, { testID: "program-deltakelse", accessibilityLabel: tekst.deltakelseRegion, style: { gap: tema.space.sm }, children: [
+      kort.map((f, i) => /* @__PURE__ */ jsx15(
+        Oppfolging,
+        {
+          oppfolging: f,
+          kontaktNr: forsteKontaktNr + i,
+          maksKontakter: program.maxContacts,
+          onSenere: () => leggBort(f.id),
+          onSvar: () => {
+            setSvarFeil(void 0);
+            setDialog({ type: "oppfolging", oppfolging: f });
+          },
+          onAapneOppgavene: () => leggBort(f.id),
+          onGaaUt: () => setViserGaaUt(true)
+        },
+        f.id
+      )),
+      /* @__PURE__ */ jsxs14(Card, { children: [
+        /* @__PURE__ */ jsx15(H, { sub: tekst.deltakelsePeriode(periode(program.opensAt, program.closesAt), deltakelse.contactsSent, program.maxContacts), children: program.name }),
+        /* @__PURE__ */ jsx15(
+          Oppgaver,
+          {
+            tasks: program.tasks,
+            completions: deltakelse.completions,
+            onGjort: (task) => {
+              setSvarFeil(void 0);
+              setDialog({ type: "oppgave", task });
+            }
+          }
+        ),
+        meldFeilFor && onMeldFeil ? /* @__PURE__ */ jsxs14(View15, { style: { gap: tema.space.xs }, children: [
+          /* @__PURE__ */ jsx15(Hint, { children: tekst.meldFeilHint }),
+          /* @__PURE__ */ jsx15(
+            Btn,
+            {
+              variant: "secondary",
+              testID: "meld-feil",
+              ikon: "\u{1F41E}",
+              label: tekst.meldFeil,
+              onPress: () => {
+                const task = meldFeilFor;
+                setMeldFeilFor(void 0);
+                onMeldFeil(task);
+              }
+            }
+          )
+        ] }) : null,
+        /* @__PURE__ */ jsx15(Btn, { variant: "ghost", testID: "gaa-ut", ikon: "\u{1F6AA}", label: tekst.gaaUt, onPress: () => setViserGaaUt(true) })
       ] }),
-      viserGaaUt ? /* @__PURE__ */ jsx12(Modal3, { visible: true, transparent: true, animationType: "fade", onRequestClose: () => setViserGaaUt(false), accessibilityViewIsModal: true, children: /* @__PURE__ */ jsx12(View12, { style: { flex: 1, backgroundColor: tema.color.scrim, justifyContent: "flex-end", padding: tema.space.md }, children: /* @__PURE__ */ jsxs11(
-        View12,
+      dialog ? /* @__PURE__ */ jsx15(
+        HvordanGikkDet,
+        {
+          under: dialog.type === "oppgave" ? dialog.task.title : dialog.oppfolging.question,
+          sender,
+          ...svarFeil ? { feil: svarFeil } : {},
+          onLagre: (outcome, text) => void lagreSvar(outcome, text),
+          onLukk: () => setDialog(void 0)
+        }
+      ) : null,
+      viserGaaUt ? /* @__PURE__ */ jsx15(Modal4, { visible: true, transparent: true, animationType: "fade", onRequestClose: () => setViserGaaUt(false), accessibilityViewIsModal: true, children: /* @__PURE__ */ jsx15(View15, { style: { flex: 1, backgroundColor: tema.color.scrim, justifyContent: "flex-end", padding: tema.space.md }, children: /* @__PURE__ */ jsxs14(
+        View15,
         {
           testID: "gaa-ut-dialog",
           accessibilityViewIsModal: true,
@@ -2029,11 +2354,11 @@ function InnspelProgram({
             gap: tema.space.md
           },
           children: [
-            /* @__PURE__ */ jsx12(H, { children: tekst.gaaUtTittel }),
-            /* @__PURE__ */ jsx12(Text10, { style: { color: tema.color.textPrimary, fontSize: tema.font.body, lineHeight: tema.lineHeight.body }, children: tekst.gaaUtTekst(program.name) }),
-            /* @__PURE__ */ jsxs11(View12, { style: { flexDirection: "row", gap: tema.space.sm }, children: [
-              /* @__PURE__ */ jsx12(Btn, { grow: true, variant: "secondary", testID: "bli-vaerende", label: tekst.bliVaerende, onPress: () => setViserGaaUt(false) }),
-              /* @__PURE__ */ jsx12(Btn, { grow: true, variant: "danger", testID: "bekreft-gaa-ut", ikon: "\u{1F6AA}", label: tekst.gaaUtBekreft, disabled: sender, onPress: () => void gaaUt() })
+            /* @__PURE__ */ jsx15(H, { children: tekst.gaaUtTittel }),
+            /* @__PURE__ */ jsx15(Text13, { style: { color: tema.color.textPrimary, fontSize: tema.font.body, lineHeight: tema.lineHeight.body }, children: tekst.gaaUtTekst(program.name) }),
+            /* @__PURE__ */ jsxs14(View15, { style: { flexDirection: "row", gap: tema.space.sm }, children: [
+              /* @__PURE__ */ jsx15(Btn, { grow: true, variant: "secondary", testID: "bli-vaerende", label: tekst.bliVaerende, onPress: () => setViserGaaUt(false) }),
+              /* @__PURE__ */ jsx15(Btn, { grow: true, variant: "danger", testID: "bekreft-gaa-ut", ikon: "\u{1F6AA}", label: tekst.gaaUtBekreft, disabled: sender, onPress: () => void gaaUt() })
             ] })
           ]
         }
@@ -2041,9 +2366,9 @@ function InnspelProgram({
     ] });
   }
   if (!invitasjon || avvist) return null;
-  return /* @__PURE__ */ jsxs11(Fragment2, { children: [
-    /* @__PURE__ */ jsxs11(
-      View12,
+  return /* @__PURE__ */ jsxs14(Fragment3, { children: [
+    /* @__PURE__ */ jsxs14(
+      View15,
       {
         testID: "program-banner",
         accessibilityLabel: tekst.invitasjonRegion,
@@ -2056,30 +2381,30 @@ function InnspelProgram({
           gap: tema.space.sm
         },
         children: [
-          /* @__PURE__ */ jsxs11(View12, { style: { flexDirection: "row", gap: tema.space.sm, alignItems: "flex-start" }, children: [
-            /* @__PURE__ */ jsx12(Text10, { accessibilityElementsHidden: true, importantForAccessibility: "no", style: { fontSize: tema.font.h3 }, children: "\u{1F9EA}" }),
-            /* @__PURE__ */ jsxs11(View12, { style: { flex: 1, gap: tema.space.xs }, children: [
-              /* @__PURE__ */ jsx12(Text10, { style: { color: tema.color.textPrimary, fontSize: tema.font.body, lineHeight: tema.lineHeight.body }, children: tekst.invitasjonHva(program.name) }),
-              /* @__PURE__ */ jsx12(Hint, { children: tekst.invitasjonKontakter(program.maxContacts) })
+          /* @__PURE__ */ jsxs14(View15, { style: { flexDirection: "row", gap: tema.space.sm, alignItems: "flex-start" }, children: [
+            /* @__PURE__ */ jsx15(Text13, { accessibilityElementsHidden: true, importantForAccessibility: "no", style: { fontSize: tema.font.h3 }, children: "\u{1F9EA}" }),
+            /* @__PURE__ */ jsxs14(View15, { style: { flex: 1, gap: tema.space.xs }, children: [
+              /* @__PURE__ */ jsx15(Text13, { style: { color: tema.color.textPrimary, fontSize: tema.font.body, lineHeight: tema.lineHeight.body }, children: tekst.invitasjonHva(program.name) }),
+              /* @__PURE__ */ jsx15(Hint, { children: tekst.invitasjonKontakter(program.maxContacts) })
             ] }),
-            /* @__PURE__ */ jsx12(
-              Pressable7,
+            /* @__PURE__ */ jsx15(
+              Pressable8,
               {
                 testID: "avvis-invitasjon",
                 accessibilityRole: "button",
                 accessibilityLabel: tekst.avvisInvitasjon,
                 onPress: () => setAvvist(true),
                 style: { minWidth: tema.touch, minHeight: tema.touch, alignItems: "center", justifyContent: "center" },
-                children: /* @__PURE__ */ jsx12(Text10, { style: { color: tema.color.textSecondary, fontSize: tema.font.body }, children: "\u2715" })
+                children: /* @__PURE__ */ jsx15(Text13, { style: { color: tema.color.textSecondary, fontSize: tema.font.body }, children: "\u2715" })
               }
             )
           ] }),
-          feil && !viserAksept ? /* @__PURE__ */ jsx12(Banner, { live: true, ikon: "\u26A0", tone: "danger", children: tekst.akseptFeil(feil) }) : null,
-          /* @__PURE__ */ jsx12(Btn, { variant: "secondary", testID: "les-mer", label: tekst.lesMer, onPress: () => setViserAksept(true) })
+          feil && !viserAksept ? /* @__PURE__ */ jsx15(Banner, { live: true, ikon: "\u26A0", tone: "danger", children: tekst.akseptFeil(feil) }) : null,
+          /* @__PURE__ */ jsx15(Btn, { variant: "secondary", testID: "les-mer", label: tekst.lesMer, onPress: () => setViserAksept(true) })
         ]
       }
     ),
-    viserAksept ? /* @__PURE__ */ jsx12(
+    viserAksept ? /* @__PURE__ */ jsx15(
       Aksept,
       {
         program,