dev improvements

Author: eliknebel

AGENTS.md

@@ -20,7 +20,7 @@ Request and runtime flow:
    - Ensures DB exists and is migrated/seeded.
    - Opens DB connection pool.
    - Builds LTI data provider.
-   - Starts Tailwind watcher in `Dev`.
+   - Builds app context for controllers/views.
 3. `src/lti_example_tool_web/router.gleam` dispatches requests by path segments.
 4. `src/lti_example_tool_web/web.gleam` applies middleware (logging, crash rescue, static files, HEAD handling).
 5. Controllers render HTML with Nakai (`src/lti_example_tool_web/html*`) or JSON for JWKS.
@@ -64,7 +64,7 @@ Design style:
 3. `gleam deps download`
 4. `cp seeds.example.yml seeds.yml` (edit values)
 5. `gleam run -m lti_example_tool/database/migrate setup`
-6. `watchexec --stop-signal=SIGKILL -r -e gleam gleam run`
+6. `npm run dev`
 7. Open `http://localhost:8080`
 
 ### Docker Setup
@@ -117,7 +117,8 @@ Patterns to preserve:
 ## Common Development Tasks
 
 - Run app: `gleam run`
-- Run app with local auto-reload: `watchexec --stop-signal=SIGKILL -r -e gleam gleam run`
+- Run full local dev stack (server reload + Tailwind watch + client rebuild watch): `npm run dev`
+- Run server-only auto-reload: `npm run server:dev`
 - Build app: `gleam build`
 - Build CSS once: `npm run tailwind:build`
 - Watch CSS: `npm run tailwind:watch`

README.md

@@ -96,9 +96,9 @@ Interoperability) specification.
    ```sh
    cp seeds.example.yml seeds.yml
    ```
-7. Run the server and watch for changes:
+7. Start development mode (server reload, Tailwind watch, and client HMR):
    ```sh
-   watchexec --stop-signal=SIGKILL -r -e gleam gleam run
+   npm run dev
    ```
 8. Open the application in your browser:
    ```sh
@@ -111,8 +111,8 @@ Interoperability) specification.
 # Run the project
 gleam run
 
-# Run the project and watch for changes
-watchexec --stop-signal=SIGKILL -r -e gleam gleam run
+# Run the full dev stack (server reload + tailwind watch + client rebuild watch)
+npm run dev
 
 # Reset the database
 gleam run -m lti_example_tool/database/migrate reset
@@ -123,3 +123,16 @@ gleam run -m lti_example_tool/database/migrate up
 # Run the tests
 gleam test
 ```
+
+For LMS launches over ngrok, expose the app server:
+
+Example:
+
+```sh
+# terminal 1: start ngrok for the app server
+ngrok http 8080
+
+# terminal 2: run dev
+export PUBLIC_URL="https://<app-tunnel>.ngrok.app"
+npm run dev
+```

client/src/App.tsx

@@ -99,10 +99,14 @@ export function App() {
 }
 
 function Detail({ label, value }: { label: string; value: string }) {
+  const trimmed = value.trim();
+
   return (
     <div className="grid gap-1 border-b border-gray-100 pb-3 sm:grid-cols-[9rem_1fr] sm:gap-3">
       <dt className="font-medium text-gray-700">{label}</dt>
-      <dd className="break-all text-gray-900">{value.length > 0 ? value : "-"}</dd>
+      <dd className="break-all text-gray-900">
+        {trimmed.length > 0 ? trimmed : "None"}
+      </dd>
     </div>
   );
 }

package.json

@@ -19,7 +19,9 @@
     "tailwind:build": "npx tailwindcss -i ./app.css -o priv/static/app.css",
     "tailwind:watch": "npx tailwindcss -i ./app.css -o priv/static/app.css --watch",
     "client:build": "vite build --config client/vite.config.ts",
-    "client:dev": "vite --config client/vite.config.ts",
+    "client:watch": "vite build --watch --config client/vite.config.ts",
+    "server:dev": "watchexec --stop-signal=SIGKILL -r -e gleam,erl,hrl -w src -w test -w gleam.toml -w manifest.toml gleam run",
+    "dev": "bash ./scripts/dev.sh",
     "clean": "rm -rf build priv/static/**",
     "build": "gleam build && npm run tailwind:build && npm run client:build"
   }

scripts/dev.sh

@@ -0,0 +1,18 @@
+#!/usr/bin/env bash
+set -euo pipefail
+
+export ENV="${ENV:-dev}"
+
+cleanup() {
+  local pids
+  pids="$(jobs -pr || true)"
+  if [[ -n "$pids" ]]; then
+    kill $pids >/dev/null 2>&1 || true
+  fi
+}
+trap cleanup EXIT INT TERM
+
+npm run tailwind:watch &
+npm run client:watch &
+
+npm run server:dev

src/lti_example_tool/application.gleam

@@ -7,9 +7,7 @@ import lti_example_tool/config
 import lti_example_tool/database
 import lti_example_tool/database/migrate
 import lti_example_tool/db_provider
-import lti_example_tool/env.{Dev}
 import lti_example_tool/feature_flags
-import lti_example_tool/utils/devtools
 import pog
 import wisp
 
@@ -30,8 +28,6 @@ pub fn setup() -> AppContext {
 
   let assert Ok(lti_data_provider) = db_provider.data_provider(db)
 
-  env.exec(env, Dev, fn() { devtools.start() })
-
   let http_provider = httpc_provider.http_provider()
 
   let feature_flags = feature_flags.load()

src/lti_example_tool/utils/devtools.gleam

@@ -227,9 +227,9 @@ pub fn token(req: Request, app: AppContext) -> Response {
   }
 }
 
-pub fn app(req: Request, _app: AppContext) -> Response {
+pub fn app(req: Request, app: AppContext) -> Response {
   use <- wisp.require_method(req, http.Get)
-  render_html(lti_html.client_app())
+  render_html(lti_html.client_app(app))
 }
 
 fn unauthorized_response() -> Response {
@@ -371,8 +371,8 @@ fn launch_session_from_claims(
   use sub <- result.try(required_string_claim(claims, "sub"))
   use issuer <- result.try(required_string_claim(claims, "iss"))
   use audience <- result.try(required_audience_claim(claims))
-  let name = optional_string_claim(claims, "name") |> result.unwrap(sub)
   let email = optional_string_claim(claims, "email") |> result.unwrap("")
+  let name = preferred_name_from_claims(claims)
   let roles = optional_roles_claim(claims)
   let context_title = optional_context_title_claim(claims)
 
@@ -387,6 +387,31 @@ fn launch_session_from_claims(
   ))
 }
 
+fn preferred_name_from_claims(claims: Dict(String, Dynamic)) -> String {
+  let name = optional_string_claim(claims, "name") |> result.unwrap("")
+  let given_name =
+    optional_string_claim(claims, "given_name") |> result.unwrap("")
+  let family_name =
+    optional_string_claim(claims, "family_name") |> result.unwrap("")
+  let combined_name = string.trim(given_name <> " " <> family_name)
+
+  first_non_empty([name, combined_name])
+}
+
+fn first_non_empty(values: List(String)) -> String {
+  case values {
+    [value, ..rest] -> {
+      let trimmed = string.trim(value)
+
+      case trimmed == "" {
+        True -> first_non_empty(rest)
+        False -> trimmed
+      }
+    }
+    [] -> ""
+  }
+}
+
 fn required_string_claim(
   claims: Dict(String, Dynamic),
   key: String,

src/lti_example_tool_web/controllers/lti_controller.gleam

@@ -18,7 +18,7 @@ import lti_example_tool_web/html/components/tables.{Column}
 import nakai/attr.{action, class, href, id, method, name, src, type_, value}
 import nakai/html.{type Node, div, form, h2, i, img, input, section, span}
 
-pub fn client_app() -> Node {
+pub fn client_app(_app: AppContext) -> Node {
   page("Launch Successful", [
     div([class("mx-auto max-w-3xl w-full px-4 py-6")], [
       div([id("root")], []),