feat: implement client details

Author: joshunrau

apps/api/src/instruments/instruments.service.ts

@@ -164,8 +164,9 @@ export class InstrumentsService {
     options: EntityOperationOptions = {}
   ): Promise<InstrumentInfo[]> {
     const instances = await this.find(query, options);
-    return instances.map(({ __runtimeVersion, details, id, kind, language, tags }) => ({
+    return instances.map(({ __runtimeVersion, clientDetails, details, id, kind, language, tags }) => ({
       __runtimeVersion,
+      clientDetails,
       details,
       id,
       kind,

apps/playground/src/instruments/examples/form/Form-Reference/index.ts

@@ -188,11 +188,13 @@ export default defineInstrument({
       }
     }
   ],
+  clientDetails: {
+    estimatedDuration: 5,
+    instructions: ['Please complete all questions']
+  },
   details: {
     description: 'This example includes all possible static field variants',
     title: 'Reference Instrument',
-    estimatedDuration: 5,
-    instructions: ['Please complete all questions'],
     license: 'Apache-2.0'
   },
   measures: {},

apps/playground/src/instruments/examples/form/Form-With-Computed-Measures/index.ts

@@ -33,10 +33,12 @@ export default defineInstrument({
       variant: 'slider'
     }
   },
+  clientDetails: {
+    estimatedDuration: 1,
+    instructions: ['Please respond to all questions']
+  },
   details: {
     description: 'This is an example of a form with computed measures',
-    estimatedDuration: 1,
-    instructions: ['Please respond to all questions'],
     license: 'Apache-2.0',
     title: 'Happiness Questionnaire'
   },

apps/playground/src/instruments/examples/form/Form-With-Groups/index.ts

@@ -91,15 +91,17 @@ export default defineInstrument({
       }
     }
   ],
-  details: {
-    description: {
-      en: 'This is an example of a multilingual grouped form',
-      fr: 'Voici un exemple de formulaire groupé multilingue'
-    },
+  clientDetails: {
     estimatedDuration: 1,
     instructions: {
       en: ['Please respond to all questions'],
       fr: ['Veuillez répondre à toutes les questions']
+    }
+  },
+  details: {
+    description: {
+      en: 'This is an example of a multilingual grouped form',
+      fr: 'Voici un exemple de formulaire groupé multilingue'
     },
     license: 'Apache-2.0',
     title: {

apps/playground/src/instruments/examples/form/Multilingual-Form-With-Dynamic-Field/index.ts

@@ -53,15 +53,17 @@ export default defineInstrument({
       }
     }
   },
-  details: {
-    description: {
-      en: 'This is an example of a simple form with conditional rendering and validation logic',
-      fr: 'Voici un exemple de formulaire simple avec un rendu conditionnel et une logique de validation'
-    },
+  clientDetails: {
     estimatedDuration: 1,
     instructions: {
       en: ['Please respond to all questions'],
       fr: ['Veuillez répondre à toutes les questions']
+    }
+  },
+  details: {
+    description: {
+      en: 'This is an example of a simple form with conditional rendering and validation logic',
+      fr: 'Voici un exemple de formulaire simple avec un rendu conditionnel et une logique de validation'
     },
     license: 'Apache-2.0',
     title: {

apps/playground/src/instruments/examples/interactive/Interactive-With-CSS/index.ts

@@ -31,10 +31,12 @@ export default defineInstrument({
       });
     }
   },
+  clientDetails: {
+    estimatedDuration: 1,
+    instructions: ['<PLACEHOLDER>']
+  },
   details: {
     description: '<PLACEHOLDER>',
-    estimatedDuration: 1,
-    instructions: ['<PLACEHOLDER>'],
     license: 'UNLICENSED',
     title: '<PLACEHOLDER>'
   },

apps/playground/src/instruments/examples/interactive/Interactive-With-JSPsych/index.ts

@@ -12,6 +12,10 @@ import orange from './orange.png';
 import '/runtime/v1/jspsych@8.x/css/jspsych.css';
 
 export default defineInstrument({
+  clientDetails: {
+    estimatedDuration: 1,
+    instructions: ['The user will be displayed instructions on the screen']
+  },
   content: {
     async render(done) {
       const jsPsych = initJsPsych({
@@ -116,8 +120,6 @@ export default defineInstrument({
   },
   details: {
     description: 'This reaction time task is a non-trivial proof of concept with jspsych.',
-    estimatedDuration: 1,
-    instructions: ['The user will be displayed instructions on the screen'],
     license: 'MIT',
     title: 'Reaction Time Task'
   },

apps/playground/src/instruments/examples/interactive/Interactive-With-Legacy-Script/index.ts

@@ -23,10 +23,12 @@ export default defineInstrument({
       });
     }
   },
+  clientDetails: {
+    estimatedDuration: 1,
+    instructions: ['Please complete the task.']
+  },
   details: {
     description: 'This is an example of how ancient scripts, that fail in strict mode, can be used in an instrument.',
-    estimatedDuration: 1,
-    instructions: ['Please complete the task.'],
     license: 'Apache-2.0',
     title: 'Interactive Instrument With Legacy Script'
   },

apps/playground/src/instruments/examples/interactive/Interactive-With-React/index.tsx

@@ -7,6 +7,10 @@ import { App } from './App.tsx';
 import './index.css';
 
 export default defineInstrument({
+  clientDetails: {
+    estimatedDuration: 1,
+    instructions: ['Please submit whatever count you want!']
+  },
   content: {
     render(done) {
       const rootElement = document.createElement('div');
@@ -17,8 +21,6 @@ export default defineInstrument({
   },
   details: {
     description: 'This task is completely useless. It is a proof of concept for an interactive instrument.',
-    estimatedDuration: 1,
-    instructions: ['Please submit whatever count you want!'],
     license: 'Apache-2.0',
     title: 'React Click Task'
   },

apps/playground/src/instruments/examples/interactive/Interactive-With-Vanilla/index.ts

@@ -4,6 +4,10 @@ import { z } from '/runtime/v1/zod@3.23.x';
 import './styles.css';
 
 export default defineInstrument({
+  clientDetails: {
+    estimatedDuration: 1,
+    instructions: ['Please attempt to win the game as quickly as possible.']
+  },
   content: {
     render(done) {
       const startTime = Date.now();
@@ -185,8 +189,6 @@ export default defineInstrument({
     authors: ['Andrzej Mazur', 'Mozilla Contributors', 'Joshua Unrau'],
     description:
       'This is a very simple interactive instrument, adapted from a 2D breakout game in the Mozilla documentation.',
-    estimatedDuration: 1,
-    instructions: ['Please attempt to win the game as quickly as possible.'],
     license: 'CC0-1.0',
     referenceUrl: 'https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript',
     sourceUrl: 'https://github.com/end3r/Gamedev-Canvas-workshop/tree/gh-pages',