enhance(chat): render manage proposals with the real student question preview

Proposal cards now map the validated payload to an artificial ElementInstance
and render it through the shared StudentElement (preview + compact), always
expanded; the raw JSON moves into a collapsed details block and the Preview
toggle is gone. Parse failures fall back to the JSON view. The system prompt
tells the model to answer with one short sentence after a proposal instead of
restating the question.

The zod proposal schemas move into a client-safe manageProposalSchema.ts:
importing them from manageProposals.ts pulled that server module (and with it
ioredis) into the browser bundle.

Author: rschlaefli

apps/chat/src/components/manage-proposal-card.tsx

@@ -1,7 +1,9 @@
 'use client'
 
-import { CheckIcon, EyeIcon, LoaderCircleIcon } from 'lucide-react'
+import { CheckIcon, LoaderCircleIcon } from 'lucide-react'
 import { useState, type FC } from 'react'
+import { parseManageProposalPayload } from '../services/proposalToElementInstance'
+import { ManageProposalPreview } from './manage-proposal-preview'
 import { formatToolName } from './tool-labels'
 
 export type ManageProposalResult = {
@@ -80,7 +82,7 @@ export const ManageProposalCard: FC<ManageProposalCardProps> = ({
   const [confirmation, setConfirmation] = useState<ConfirmationState>({
     type: 'idle',
   })
-  const [showPreview, setShowPreview] = useState(false)
+  const previewPayload = parseManageProposalPayload(result)
   const payloadText = JSON.stringify(result.payload, null, 2)
   const waiting = status.type === 'running'
   const created = confirmation.type === 'success'
@@ -149,15 +151,9 @@ export const ManageProposalCard: FC<ManageProposalCardProps> = ({
       </div>
 
       <div className="space-y-2 px-3 py-3">
+        {previewPayload && <ManageProposalPreview payload={previewPayload} />}
+
         <div className="flex flex-wrap gap-2">
-          <button
-            type="button"
-            onClick={() => setShowPreview((value) => !value)}
-            className="inline-flex h-8 items-center gap-1.5 rounded-md border border-slate-200 bg-white px-2.5 text-xs font-semibold text-slate-700 hover:bg-slate-50 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2"
-          >
-            <EyeIcon className="size-3.5" aria-hidden />
-            Preview
-          </button>
           {!created && (
             <button
               type="button"
@@ -203,11 +199,14 @@ export const ManageProposalCard: FC<ManageProposalCardProps> = ({
           )}
         </div>
 
-        {showPreview && (
-          <pre className="max-h-72 overflow-auto rounded bg-slate-950 p-3 text-xs leading-5 text-slate-50">
+        <details>
+          <summary className="cursor-pointer text-xs font-medium text-slate-500 hover:text-slate-700">
+            Show raw JSON
+          </summary>
+          <pre className="mt-2 max-h-72 overflow-auto rounded bg-slate-950 p-3 text-xs leading-5 text-slate-50">
             {payloadText}
           </pre>
-        )}
+        </details>
       </div>
     </div>
   )

apps/chat/src/components/manage-proposal-preview.tsx

@@ -0,0 +1,48 @@
+'use client'
+
+import { ElementType } from '@klicker-uzh/graphql/dist/ops'
+import useSingleStudentResponse from '@klicker-uzh/shared-components/src/hooks/useSingleStudentResponse'
+import StudentElement, {
+  type InstanceStackStudentResponseType,
+} from '@klicker-uzh/shared-components/src/StudentElement'
+import { useMemo, useState, type FC } from 'react'
+import type { ManageProposalPayload } from '../services/proposalToElementInstance'
+import { proposalPayloadToElementInstance } from '../services/proposalToElementInstance'
+
+type ManageProposalPreviewProps = {
+  payload: ManageProposalPayload
+}
+
+export const ManageProposalPreview: FC<ManageProposalPreviewProps> = ({
+  payload,
+}) => {
+  const element = useMemo(
+    () => proposalPayloadToElementInstance(payload),
+    [payload]
+  )
+
+  const [singleStudentResponse, setSingleStudentResponse] =
+    useState<InstanceStackStudentResponseType>({
+      response: undefined,
+      type: ElementType.FreeText,
+      valid: false,
+    })
+
+  useSingleStudentResponse({
+    instance: element,
+    setStudentResponse: setSingleStudentResponse,
+  })
+
+  return (
+    <div className="max-w-full overflow-x-auto">
+      <StudentElement
+        compact
+        element={element}
+        elementIx={0}
+        preview
+        setSingleStudentResponse={setSingleStudentResponse}
+        singleStudentResponse={singleStudentResponse}
+      />
+    </div>
+  )
+}

apps/chat/src/services/manageAssistantRuntime.ts

@@ -14,6 +14,7 @@ const BASE_MANAGE_ASSISTANT_PROMPT = [
   "Do not expose raw tool JSON or raw UUIDs unless the lecturer asks for technical detail; summarize results by human-readable name, using a question's short numeric id only when it helps the lecturer disambiguate.",
   'Do not persist, update, delete, publish, share, or execute anything autonomously. Persisted DRAFT creation requires a signed proposal card and explicit lecturer confirmation. Never claim a draft was created until confirmation succeeds.',
   'When the lecturer asks to create a DRAFT question with confirmation, use the signed proposal tool instead of the draft-only scaffolding tools. Use draft-only tools for brainstorming or non-persisted previews only.',
+  'After the signed proposal tool returns, reply with at most one short sentence and never restate the question content, options, or JSON; the proposal card already renders them.',
   'When a requested object is not accessible, state that it cannot be accessed and do not try to infer hidden details.',
 ].join('\n')
 

apps/chat/src/services/manageProposalSchema.ts

@@ -0,0 +1,57 @@
+import { z } from 'zod'
+
+// Client-safe proposal schema module: imported by the proposal preview inside
+// the browser bundle, so it must not import server-only modules (the rest of
+// manageProposals.ts pulls in @klicker-uzh/util and with it ioredis).
+
+const proposalChoiceSchema = z.object({
+  correct: z.boolean(),
+  feedback: z.string().trim().min(1).max(500).optional(),
+  ix: z.number().int().min(0).optional(),
+  value: z.string().trim().min(1).max(240),
+})
+
+const baseProposalPayloadSchema = z.object({
+  basePoints: z.boolean().default(true),
+  content: z.string().trim().min(1).max(4000),
+  explanation: z.string().trim().min(1).max(2000).optional(),
+  name: z.string().trim().min(1).max(160),
+  pointsMultiplier: z.number().int().min(1).max(100).default(1),
+  status: z.literal('DRAFT'),
+  tags: z.array(z.string().trim().min(1).max(60)).max(8).default([]),
+})
+
+export const choicesProposalPayloadSchema = baseProposalPayloadSchema.extend({
+  options: z.object({
+    choices: z.array(proposalChoiceSchema).min(2).max(8),
+    displayMode: z.literal('LIST').default('LIST'),
+    hasAnswerFeedbacks: z.boolean().default(false),
+    hasSampleSolution: z.boolean().default(true),
+  }),
+  type: z.enum(['SC', 'MC']),
+})
+
+export const freeTextProposalPayloadSchema = baseProposalPayloadSchema.extend({
+  options: z.object({
+    hasSampleSolution: z.boolean().default(false),
+    restrictions: z.object({
+      maxLength: z.number().int().positive().optional(),
+    }),
+    solutions: z.array(z.string().trim().min(1).max(500)).optional(),
+  }),
+  type: z.literal('FREE_TEXT'),
+})
+
+export const manageElementCreateProposalSchema = z.object({
+  kind: z.literal('element.create.proposal'),
+  payload: z.union([
+    choicesProposalPayloadSchema,
+    freeTextProposalPayloadSchema,
+  ]),
+  requiresConfirmation: z.literal(true),
+  summary: z.string().trim().min(1).max(240).optional(),
+})
+
+export type ManageElementCreateProposal = z.infer<
+  typeof manageElementCreateProposalSchema
+>

apps/chat/src/services/manageProposals.ts

@@ -1,57 +1,20 @@
 import hashes from '@klicker-uzh/graphql/dist/client.json'
 import { verifyJWT } from '@klicker-uzh/util'
 import { z } from 'zod'
+import {
+  choicesProposalPayloadSchema,
+  freeTextProposalPayloadSchema,
+  manageElementCreateProposalSchema,
+  type ManageElementCreateProposal,
+} from './manageProposalSchema'
+
+export {
+  manageElementCreateProposalSchema,
+  type ManageElementCreateProposal,
+} from './manageProposalSchema'
 
 const MANAGE_PROPOSAL_PURPOSE = 'manage-assistant-proposal'
 
-const proposalChoiceSchema = z.object({
-  correct: z.boolean(),
-  feedback: z.string().trim().min(1).max(500).optional(),
-  ix: z.number().int().min(0).optional(),
-  value: z.string().trim().min(1).max(240),
-})
-
-const baseProposalPayloadSchema = z.object({
-  basePoints: z.boolean().default(true),
-  content: z.string().trim().min(1).max(4000),
-  explanation: z.string().trim().min(1).max(2000).optional(),
-  name: z.string().trim().min(1).max(160),
-  pointsMultiplier: z.number().int().min(1).max(100).default(1),
-  status: z.literal('DRAFT'),
-  tags: z.array(z.string().trim().min(1).max(60)).max(8).default([]),
-})
-
-const choicesProposalPayloadSchema = baseProposalPayloadSchema.extend({
-  options: z.object({
-    choices: z.array(proposalChoiceSchema).min(2).max(8),
-    displayMode: z.literal('LIST').default('LIST'),
-    hasAnswerFeedbacks: z.boolean().default(false),
-    hasSampleSolution: z.boolean().default(true),
-  }),
-  type: z.enum(['SC', 'MC']),
-})
-
-const freeTextProposalPayloadSchema = baseProposalPayloadSchema.extend({
-  options: z.object({
-    hasSampleSolution: z.boolean().default(false),
-    restrictions: z.object({
-      maxLength: z.number().int().positive().optional(),
-    }),
-    solutions: z.array(z.string().trim().min(1).max(500)).optional(),
-  }),
-  type: z.literal('FREE_TEXT'),
-})
-
-const manageElementCreateProposalSchema = z.object({
-  kind: z.literal('element.create.proposal'),
-  payload: z.union([
-    choicesProposalPayloadSchema,
-    freeTextProposalPayloadSchema,
-  ]),
-  requiresConfirmation: z.literal(true),
-  summary: z.string().trim().min(1).max(240).optional(),
-})
-
 const manageProposalTokenSchema = z.object({
   kind: z.literal('element.create.proposal'),
   payload: z.union([
@@ -70,10 +33,6 @@ const confirmedElementSchema = z.object({
   type: z.string(),
 })
 
-export type ManageElementCreateProposal = z.infer<
-  typeof manageElementCreateProposalSchema
->
-
 type OperationName = 'ManipulateChoicesQuestion' | 'ManipulateFreeTextQuestion'
 
 function getPersistedHash(operationName: OperationName): string {

apps/chat/src/services/proposalToElementInstance.ts

@@ -0,0 +1,75 @@
+import {
+  ElementDisplayMode,
+  ElementInstanceType,
+  ElementType,
+  type ElementInstance,
+} from '@klicker-uzh/graphql/dist/ops'
+import {
+  manageElementCreateProposalSchema,
+  type ManageElementCreateProposal,
+} from './manageProposalSchema'
+
+export type ManageProposalPayload = ManageElementCreateProposal['payload']
+
+// Validate an arbitrary tool-result envelope against the signed proposal
+// schema before it is ever mapped to a renderable element preview. Returns
+// null on any mismatch so callers can fall back to the raw JSON view instead
+// of risking a crashed preview card.
+export function parseManageProposalPayload(
+  value: unknown
+): ManageProposalPayload | null {
+  const parsed = manageElementCreateProposalSchema.safeParse(value)
+  return parsed.success ? parsed.data.payload : null
+}
+
+// Map a validated proposal payload to the same artificial ElementInstance
+// shape used elsewhere to preview not-yet-persisted questions (see
+// useArtificialElementInstance). The top-level ElementInstance.options is
+// never read by StudentElement, so it is intentionally omitted.
+export function proposalPayloadToElementInstance(
+  payload: ManageProposalPayload
+): ElementInstance {
+  const elementType = payload.type as ElementType
+
+  const shared = {
+    basePoints: payload.basePoints,
+    content: payload.content,
+    elementId: 0,
+    explanation: payload.explanation,
+    id: '0',
+    name: payload.name,
+    pointsMultiplier: payload.pointsMultiplier,
+    type: elementType,
+  }
+
+  const elementData =
+    payload.type === 'FREE_TEXT'
+      ? {
+          __typename: 'FreeTextElementData' as const,
+          ...shared,
+          options: {
+            hasSampleSolution: payload.options.hasSampleSolution,
+            restrictions: payload.options.restrictions,
+          },
+        }
+      : {
+          __typename: 'ChoicesElementData' as const,
+          ...shared,
+          options: {
+            choices: payload.options.choices.map((choice, ix) => ({
+              ...choice,
+              ix: choice.ix ?? ix,
+            })),
+            displayMode: ElementDisplayMode.List,
+            hasAnswerFeedbacks: payload.options.hasAnswerFeedbacks,
+            hasSampleSolution: payload.options.hasSampleSolution,
+          },
+        }
+
+  return {
+    elementData,
+    elementType,
+    id: 0,
+    type: ElementInstanceType.LiveQuiz,
+  } as ElementInstance
+}

apps/chat/test/manage-proposal-card.test.ts

@@ -1,9 +1,19 @@
-import { describe, expect, test } from 'vitest'
+import { describe, expect, test, vi } from 'vitest'
 import {
   getManageProposalResult,
   isManageProposalResult,
 } from '../src/components/manage-proposal-card'
 
+// manage-proposal-card.tsx renders the preview through shared-components,
+// which pulls in @uzh-bf/design-system's CSS entrypoint. That CSS import
+// cannot be resolved by Vitest's node-environment module graph (Vite's CSS
+// handling for externalized deps only works under the vmThreads pool), so
+// mock the preview module before it is ever evaluated. These tests only
+// exercise the pure envelope-parsing helpers below, not rendering.
+vi.mock('../src/components/manage-proposal-preview', () => ({
+  ManageProposalPreview: () => null,
+}))
+
 const proposalEnvelope = {
   kind: 'element.create.proposal',
   proposalToken: 'signed-token',