From 8e52e6c243f7289960eda08cda9ffcaf4269068b Mon Sep 17 00:00:00 2001
From: Aidan Jones <aidan_jones@sil.org>
Date: Thu, 13 Aug 2026 11:23:35 -0500
Subject: [PATCH 01/19] Improve project view/edit

---
 src/app.css                                   |  10 +
 src/lib/components/CancelButton.svelte        |  34 ++++
 src/lib/components/CopyField.svelte           |  48 +++++
 src/lib/components/IconButton.svelte          |  43 ++++
 src/lib/components/LabeledFormInput.svelte    |   7 +-
 src/lib/components/SelectWithIcon.svelte      |  46 +++++
 src/lib/components/StatusBadge.svelte         |  30 +++
 src/lib/components/SubmitButton.svelte        |  14 ++
 src/lib/icons/index.ts                        |   5 +
 src/lib/utils/sorting.ts                      |   4 +-
 src/routes/(ui)/build-admin/+page.svelte      |  25 +--
 src/routes/(ui)/project-admin/+page.server.ts |   4 +-
 src/routes/(ui)/project-admin/+page.svelte    |  13 +-
 .../(ui)/project-admin/update/+page.server.ts |   3 +-
 .../(ui)/project-admin/update/+page.svelte    | 186 +++++++++---------
 .../(ui)/project-admin/view/+page.server.ts   |  12 ++
 .../(ui)/project-admin/view/+page.svelte      | 169 +++++++++-------
 src/routes/(ui)/release-admin/+page.svelte    |  25 +--
 18 files changed, 458 insertions(+), 220 deletions(-)
 create mode 100644 src/lib/components/CancelButton.svelte
 create mode 100644 src/lib/components/CopyField.svelte
 create mode 100644 src/lib/components/IconButton.svelte
 create mode 100644 src/lib/components/SelectWithIcon.svelte
 create mode 100644 src/lib/components/StatusBadge.svelte
 create mode 100644 src/lib/components/SubmitButton.svelte

diff --git a/src/app.css b/src/app.css
index 028c7f93..255886f1 100644
--- a/src/app.css
+++ b/src/app.css
@@ -131,6 +131,16 @@
   * {
     font-size: 15px;
   }
+  @media (prefers-color-scheme: dark) {
+    .select {
+      &,
+      & select {
+        &::picker(select) {
+          border: var(--border) solid var(--color-base-content);
+        }
+      }
+    }
+  }
 }
 
 .dropdown-content {
diff --git a/src/lib/components/CancelButton.svelte b/src/lib/components/CancelButton.svelte
new file mode 100644
index 00000000..80be3592
--- /dev/null
+++ b/src/lib/components/CancelButton.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+  import IconContainer from '../icons/IconContainer.svelte';
+  import IconButton, { type IconButtonProps } from './IconButton.svelte';
+  import { Icons } from '$lib/icons';
+
+  interface Props extends IconButtonProps {
+    returnTo?: string;
+    resetForm?: boolean;
+  }
+
+  let {
+    class: classes,
+    icon = Icons.Cancel,
+    label = 'Cancel',
+    returnTo: href,
+    resetForm = false,
+    ...rest
+  }: Props = $props();
+</script>
+
+{#if !rest.children && href}
+  <a class={['btn btn-secondary', classes]} {href}>
+    <IconContainer {icon} width={20} />
+    {label}
+  </a>
+{:else}
+  <IconButton
+    type={resetForm ? 'reset' : 'button'}
+    class={['btn-secondary', classes]}
+    {icon}
+    {label}
+    {...rest}
+  />
+{/if}
diff --git a/src/lib/components/CopyField.svelte b/src/lib/components/CopyField.svelte
new file mode 100644
index 00000000..b845f2a3
--- /dev/null
+++ b/src/lib/components/CopyField.svelte
@@ -0,0 +1,48 @@
+<script lang="ts">
+  import { onDestroy } from 'svelte';
+  import IconContainer from '../icons/IconContainer.svelte';
+  import { Icons } from '$lib/icons';
+
+  interface Props {
+    value: string;
+  }
+
+  const { value }: Props = $props();
+
+  let copied = $state(false);
+
+  let timeout: ReturnType<typeof setTimeout> | null = $state(null);
+
+  onDestroy(() => {
+    if (timeout) {
+      clearTimeout(timeout);
+    }
+  });
+</script>
+
+<button
+  class="cursor-copy"
+  type="button"
+  onclick={() => {
+    if (value) {
+      navigator.clipboard.writeText(value).then(
+        () => {
+          copied = true;
+          if (timeout) {
+            clearTimeout(timeout);
+          }
+          timeout = setTimeout(() => {
+            copied = false;
+          }, 5000);
+        },
+        (r) => console.log(r)
+      );
+    }
+  }}
+>
+  {#if copied}
+    <IconContainer icon={Icons.Checkmark} width={24} class="text-success" />
+  {:else}
+    <IconContainer icon={Icons.Copy} width={24} />
+  {/if}
+</button>
diff --git a/src/lib/components/IconButton.svelte b/src/lib/components/IconButton.svelte
new file mode 100644
index 00000000..e1f9a39a
--- /dev/null
+++ b/src/lib/components/IconButton.svelte
@@ -0,0 +1,43 @@
+<script lang="ts" module>
+  export interface IconButtonProps {
+    label?: string;
+    class?: ClassValue;
+    form?: string;
+    type?: HTMLButtonElement['type'];
+    icon?: IconType;
+    disabled?: boolean;
+    onclick?: (
+      e: MouseEvent & {
+        currentTarget: EventTarget & HTMLButtonElement;
+      }
+    ) => void;
+    children?: Snippet;
+  }
+</script>
+
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { ClassValue } from 'svelte/elements';
+  import IconContainer from '../icons/IconContainer.svelte';
+  import { type IconType, Icons } from '$lib/icons';
+
+  let {
+    form,
+    type = 'button',
+    class: classes,
+    icon = Icons.Save,
+    disabled = false,
+    label = 'Save',
+    onclick,
+    children
+  }: IconButtonProps = $props();
+</script>
+
+<button {type} {form} class={['btn', classes]} {disabled} {onclick}>
+  {#if children}
+    {@render children()}
+  {:else}
+    <IconContainer {icon} width={20} />
+    {label}
+  {/if}
+</button>
diff --git a/src/lib/components/LabeledFormInput.svelte b/src/lib/components/LabeledFormInput.svelte
index 8c6b3e93..2693e137 100644
--- a/src/lib/components/LabeledFormInput.svelte
+++ b/src/lib/components/LabeledFormInput.svelte
@@ -4,17 +4,18 @@
 -->
 <script lang="ts">
   import type { Snippet } from 'svelte';
+  import type { ClassValue } from 'svelte/elements';
 
   interface Props {
     label: string;
-    classes?: string;
+    class?: ClassValue;
     children?: Snippet;
   }
 
-  let { label, classes, children }: Props = $props();
+  let { label, class: classes, children }: Props = $props();
 </script>
 
-<label class="flex flex-col w-full {classes}">
+<label class={['flex flex-col w-full', classes]}>
   <div class="label">
     <span class="fieldset-label">
       {label}
diff --git a/src/lib/components/SelectWithIcon.svelte b/src/lib/components/SelectWithIcon.svelte
new file mode 100644
index 00000000..e1ffaf04
--- /dev/null
+++ b/src/lib/components/SelectWithIcon.svelte
@@ -0,0 +1,46 @@
+<script lang="ts" generics="N extends string | null">
+  import type { Snippet } from 'svelte';
+  import type { ClassValue, HTMLOptionAttributes, HTMLSelectAttributes } from 'svelte/elements';
+  import type { IconType } from '$lib/icons';
+  import IconContainer from '$lib/icons/IconContainer.svelte';
+  import { byName } from '$lib/utils/sorting';
+
+  interface Props {
+    class?: ClassValue;
+    items: {
+      id: number;
+      name: N;
+      icon?: IconType;
+      attr?: HTMLOptionAttributes;
+    }[];
+    value: number | null;
+    extra?: Snippet;
+    attr?: HTMLSelectAttributes;
+    icon?: IconType;
+  }
+
+  let { class: classes, items, value = $bindable(), extra, attr = {}, icon = '' }: Props = $props();
+
+  const current = $derived(items.find((item) => item.id === value));
+</script>
+
+<div class={['select gap-4', classes]}>
+  {#if current}
+    <IconContainer icon={current.icon || icon} width={20} class="absolute left-0 px-2 opacity-80" />
+  {/if}
+  <select {...attr} bind:value class:spacing={current}>
+    {@render extra?.()}
+    {#each items.toSorted((a, b) => byName(a, b)) as item}
+      <option {...item.attr} value={item.id}>
+        <IconContainer icon={item.icon || icon} width={20} class="opacity-80" />
+        {item.name}
+      </option>
+    {/each}
+  </select>
+</div>
+
+<style>
+  .spacing {
+    padding-inline-start: calc((0.25rem * 3) + 20px) !important;
+  }
+</style>
diff --git a/src/lib/components/StatusBadge.svelte b/src/lib/components/StatusBadge.svelte
new file mode 100644
index 00000000..3f6781fe
--- /dev/null
+++ b/src/lib/components/StatusBadge.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+  import IconContainer from '../icons/IconContainer.svelte';
+  import { Icons, getStatusIcon } from '$lib/icons';
+
+  interface Props {
+    status: string | null;
+  }
+  const { status }: Props = $props();
+</script>
+
+{#if status}
+  {@const { icon } = getStatusIcon(status)}
+  <b
+    class={[
+      'badge',
+      status === 'SUCCESS'
+        ? 'badge-success'
+        : status === 'FAILURE'
+          ? 'badge-error'
+          : status === 'ABORTED'
+            ? 'badge-warning'
+            : 'badge-neutral'
+    ]}
+  >
+    {#if icon !== Icons.Unknown}
+      <IconContainer {icon} width={20} />
+    {/if}
+    {status}
+  </b>
+{/if}
diff --git a/src/lib/components/SubmitButton.svelte b/src/lib/components/SubmitButton.svelte
new file mode 100644
index 00000000..2011c47e
--- /dev/null
+++ b/src/lib/components/SubmitButton.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+  import IconButton, { type IconButtonProps } from './IconButton.svelte';
+  import { Icons } from '$lib/icons';
+
+  let {
+    class: classes,
+    icon = Icons.Save,
+    disabled = false,
+    label = 'Save',
+    ...rest
+  }: IconButtonProps = $props();
+</script>
+
+<IconButton type="submit" class={['btn-primary', classes]} {icon} {label} {disabled} {...rest} />
diff --git a/src/lib/icons/index.ts b/src/lib/icons/index.ts
index e04e0d8a..168a4f03 100644
--- a/src/lib/icons/index.ts
+++ b/src/lib/icons/index.ts
@@ -27,20 +27,25 @@ export function getStatusIcon(status: string) {
 export const Icons = {
   Bucket: 'logos:aws-s3',
   Build: 'material-symbols:build',
+  Cancel: 'icon-park-outline:return',
+  Checkmark: 'mdi:check',
   Close: 'mdi:close',
   CodeBuild: 'logos:aws-codebuild',
   CodeCommit: 'logos:aws-codecommit',
+  Copy: 'mdi:content-copy',
   Dashboard: 'clarity:dashboard-line',
   Delete: 'mdi:trash',
   Edit: 'mdi:pencil',
   Hamburger: 'mdi:hamburger-menu',
   Invisible: 'mdi:eye-off-outline',
   Key: 'material-symbols:key',
+  Language: 'mdi:language',
   Logout: 'mdi:logout',
   Open: 'mdi:open-in-new',
   Product: 'system-uicons:box',
   Project: 'material-symbols:credit-card-outline',
   Publish: 'material-symbols:publish',
+  Save: 'material-symbols:save-outline',
   Search: 'mdi:search',
   SortAsc: 'bx:sort-a-z',
   SortDesc: 'bx:sort-z-a',
diff --git a/src/lib/utils/sorting.ts b/src/lib/utils/sorting.ts
index 2dc69b13..823aa0e6 100644
--- a/src/lib/utils/sorting.ts
+++ b/src/lib/utils/sorting.ts
@@ -1,12 +1,12 @@
 interface NamedEntity {
-  Name: string | null | undefined;
+  name: string | null | undefined;
 }
 
 export function byName(
   a: NamedEntity | null | undefined,
   b: NamedEntity | null | undefined
 ): number {
-  return byString(a?.Name, b?.Name);
+  return byString(a?.name, b?.name);
 }
 
 export function byString(a: string | null | undefined, b: string | null | undefined): number {
diff --git a/src/routes/(ui)/build-admin/+page.svelte b/src/routes/(ui)/build-admin/+page.svelte
index 36a6f5f2..0390fd74 100644
--- a/src/routes/(ui)/build-admin/+page.svelte
+++ b/src/routes/(ui)/build-admin/+page.svelte
@@ -4,7 +4,8 @@
   import Breadcrumbs from '$lib/components/Breadcrumbs.svelte';
   import Pagination from '$lib/components/Pagination.svelte';
   import SearchBar from '$lib/components/SearchBar.svelte';
-  import { Icons, getStatusIcon } from '$lib/icons';
+  import StatusBadge from '$lib/components/StatusBadge.svelte';
+  import { Icons } from '$lib/icons';
   import IconContainer from '$lib/icons/IconContainer.svelte';
   import { title } from '$lib/stores';
 
@@ -89,31 +90,11 @@
   </p>
   <div class="flex flex-col gap-2">
     {#each builds as build}
-      {@const status = build.result || build.status}
       <div class="border rounded-md p-2 flex flex-col gap-1">
         <div class="flex flex-row">
           <h3 class="grow flex flex-row gap-2 items-start">
             <a class="link" href="/build-admin/view?id={build.id}">#{build.id}</a>
-            {#if status}
-              {@const { icon } = getStatusIcon(status)}
-              <b
-                class={[
-                  'badge',
-                  status === 'SUCCESS'
-                    ? 'badge-success'
-                    : status === 'FAILURE'
-                      ? 'badge-error'
-                      : status === 'ABORTED'
-                        ? 'badge-warning'
-                        : 'badge-neutral'
-                ]}
-              >
-                {#if icon !== Icons.Unknown}
-                  <IconContainer {icon} width={20} />
-                {/if}
-                {status}
-              </b>
-            {/if}
+            <StatusBadge status={build.result || build.status} />
           </h3>
         </div>
         <div class="flex flex-row items-center gap-x-1">
diff --git a/src/routes/(ui)/project-admin/+page.server.ts b/src/routes/(ui)/project-admin/+page.server.ts
index 9005a3a5..960266da 100644
--- a/src/routes/(ui)/project-admin/+page.server.ts
+++ b/src/routes/(ui)/project-admin/+page.server.ts
@@ -8,6 +8,7 @@ import { applicationTypes, tableSchema } from '$lib/valibot';
 
 const select: Prisma.projectSelect = {
   id: true,
+  language_code: true,
   project_name: true,
   app_id: true,
   client: {
@@ -55,7 +56,8 @@ export const actions: Actions = {
               OR: [
                 { project_name: { contains: form.data.search, mode: 'insensitive' } },
                 { client: { prefix: { contains: form.data.search, mode: 'insensitive' } } },
-                { url: { contains: form.data.search, mode: 'insensitive' } }
+                { url: { contains: form.data.search, mode: 'insensitive' } },
+                { language_code: { contains: form.data.search, mode: 'insensitive' } }
               ]
             }
           : {}
diff --git a/src/routes/(ui)/project-admin/+page.svelte b/src/routes/(ui)/project-admin/+page.svelte
index cff4f078..ad8774c3 100644
--- a/src/routes/(ui)/project-admin/+page.svelte
+++ b/src/routes/(ui)/project-admin/+page.svelte
@@ -96,17 +96,16 @@
     {#each projects as project}
       <div class="border rounded-md p-2 flex flex-col gap-1">
         <div class="flex flex-row">
-          <h3 class="grow flex flex-row gap-2 items-start">
+          <h3 class="grow flex flex-row gap-2 items-center pl-1">
             <a class="link" href="/project-admin/view?id={project.id}">#{project.id}</a>
-            <img
-              src={getAppIcon(project.app_id as ApplicationType)}
-              width={20}
-              alt={project.app_id}
-            />
+            <span class="badge badge-secondary p-2">
+              <IconContainer icon={Icons.Language} width={16} />{project.language_code}
+            </span>
+            <IconContainer icon={getAppIcon(project.app_id as ApplicationType)} width={20} />
             <i>{project.project_name}</i>
           </h3>
         </div>
-        <div class="flex flex-row items-center gap-x-1">
+        <div class="flex flex-row items-center gap-x-1 pl-1">
           {#if project.client}
             <IconContainer icon={Icons.User} width={16} />
             <a class="link mr-2" href="/client-admin/view?id={project.client.id}">
diff --git a/src/routes/(ui)/project-admin/update/+page.server.ts b/src/routes/(ui)/project-admin/update/+page.server.ts
index 8d80c60d..2834b664 100644
--- a/src/routes/(ui)/project-admin/update/+page.server.ts
+++ b/src/routes/(ui)/project-admin/update/+page.server.ts
@@ -46,7 +46,8 @@ export const load = (async ({ url }) => {
   if (!project) error(404);
 
   return {
-    form: await superValidate(project, valibot(projectSchema))
+    form: await superValidate(project, valibot(projectSchema)),
+    clients: await prisma.client.findMany({ select: { id: true, prefix: true } })
   };
 }) satisfies PageServerLoad;
 
diff --git a/src/routes/(ui)/project-admin/update/+page.svelte b/src/routes/(ui)/project-admin/update/+page.svelte
index 9300bf7d..4e0db5c4 100644
--- a/src/routes/(ui)/project-admin/update/+page.svelte
+++ b/src/routes/(ui)/project-admin/update/+page.svelte
@@ -2,15 +2,21 @@
   import { superForm } from 'sveltekit-superforms';
   import type { PageData } from './$types';
   import { page } from '$app/state';
+  import AppTypeSelector from '$lib/components/AppTypeSelector.svelte';
   import Breadcrumbs from '$lib/components/Breadcrumbs.svelte';
+  import CancelButton from '$lib/components/CancelButton.svelte';
   import LabeledFormInput from '$lib/components/LabeledFormInput.svelte';
+  import SelectWithIcon from '$lib/components/SelectWithIcon.svelte';
+  import SubmitButton from '$lib/components/SubmitButton.svelte';
+  import { Icons } from '$lib/icons';
+  import IconContainer from '$lib/icons/IconContainer.svelte';
   import { title } from '$lib/stores';
   import { stringLimits } from '$lib/valibot';
 
   const id = $derived(page.url.searchParams.get('id')!);
 
   $effect(() => {
-    $title = 'Update Project: ' + id;
+    $title = 'Edit Project';
   });
 
   interface Props {
@@ -33,105 +39,109 @@
 <h1>{$title}</h1>
 
 <form method="POST" use:enhance>
-  <LabeledFormInput label="Status">
-    <input
-      class="input input-bordered validator"
-      type="text"
-      bind:value={$form.status}
-      maxlength={stringLimits.project.status}
-    />
-    <span class="validator-hint">&nbsp;</span>
-  </LabeledFormInput>
-  <LabeledFormInput label="Result">
-    <input
-      class="input input-bordered validator"
-      type="text"
-      bind:value={$form.result}
-      maxlength={stringLimits.project.result}
-    />
-    <span class="validator-hint">&nbsp;</span>
-  </LabeledFormInput>
-  <LabeledFormInput label="Error">
-    <input
-      class="input input-bordered validator"
-      type="text"
-      bind:value={$form.error}
-      maxlength={stringLimits.project.error}
-    />
-    <span class="validator-hint">&nbsp;</span>
-  </LabeledFormInput>
+  <div class="input-fields">
+    <LabeledFormInput label="Status" class="md:w-1/2">
+      <input
+        class="input input-bordered validator"
+        type="text"
+        bind:value={$form.status}
+        maxlength={stringLimits.project.status}
+      />
+      <span class="validator-hint">&nbsp;</span>
+    </LabeledFormInput>
+    <LabeledFormInput label="Result" class="md:w-1/2">
+      <input
+        class="input input-bordered validator"
+        type="text"
+        bind:value={$form.result}
+        maxlength={stringLimits.project.result}
+      />
+      <span class="validator-hint">&nbsp;</span>
+    </LabeledFormInput>
+    <LabeledFormInput label="App ID" class="md:w-1/2">
+      <AppTypeSelector bind:value={$form.app_id} />
+      <span class="validator-hint">&nbsp;</span>
+    </LabeledFormInput>
+    <LabeledFormInput label="Client" class="md:w-1/2">
+      <SelectWithIcon
+        bind:value={$form.client_id}
+        icon={Icons.User}
+        items={data.clients.map((c) => ({ id: c.id, name: c.prefix }))}
+        class="validator w-full"
+        attr={{ name: 'client_id' }}
+      >
+        {#snippet extra()}
+          <option value={null}><IconContainer icon={Icons.User} width={20} />Default Client</option>
+        {/snippet}
+      </SelectWithIcon>
+      <span class="validator-hint">&nbsp;</span>
+    </LabeledFormInput>
+    <LabeledFormInput label="Project Name" class="md:w-1/2">
+      <input
+        class="input input-bordered validator"
+        type="text"
+        bind:value={$form.project_name}
+        maxlength={stringLimits.project.project_name}
+      />
+      <span class="validator-hint">&nbsp;</span>
+    </LabeledFormInput>
+    <LabeledFormInput label="Language Code" class="md:w-1/2">
+      <input
+        class="input input-bordered validator"
+        type="text"
+        bind:value={$form.language_code}
+        maxlength={stringLimits.project.language_code}
+      />
+      <span class="validator-hint">&nbsp;</span>
+    </LabeledFormInput>
+  </div>
   <LabeledFormInput label="Url">
     <input
-      class="input input-bordered validator"
+      class="input input-bordered validator w-full"
       type="url"
       bind:value={$form.url}
       maxlength={stringLimits.project.url}
     />
     <span class="validator-hint">&nbsp;</span>
   </LabeledFormInput>
-  <LabeledFormInput label="User ID">
-    <input
-      class="input input-bordered validator"
-      type="text"
-      bind:value={$form.user_id}
-      maxlength={stringLimits.project.user_id}
-    />
-    <span class="validator-hint">&nbsp;</span>
-  </LabeledFormInput>
-  <LabeledFormInput label="Group ID">
-    <input
-      class="input input-bordered validator"
-      type="text"
-      bind:value={$form.group_id}
-      maxlength={stringLimits.project.group_id}
-    />
-    <span class="validator-hint">&nbsp;</span>
-  </LabeledFormInput>
-  <LabeledFormInput label="App ID">
-    <input
-      class="input input-bordered validator"
-      type="text"
-      bind:value={$form.app_id}
-      maxlength={stringLimits.project.app_id}
-    />
-    <span class="validator-hint">&nbsp;</span>
-  </LabeledFormInput>
-  <LabeledFormInput label="Client ID">
-    <input class="input input-bordered validator" type="number" bind:value={$form.client_id} />
-    <span class="validator-hint">&nbsp;</span>
-  </LabeledFormInput>
-  <LabeledFormInput label="Project Name">
-    <input
-      class="input input-bordered validator"
-      type="text"
-      bind:value={$form.project_name}
-      maxlength={stringLimits.project.project_name}
-    />
-    <span class="validator-hint">&nbsp;</span>
-  </LabeledFormInput>
-  <LabeledFormInput label="Language Code">
-    <input
-      class="input input-bordered validator"
-      type="text"
-      bind:value={$form.language_code}
-      maxlength={stringLimits.project.language_code}
-    />
-    <span class="validator-hint">&nbsp;</span>
-  </LabeledFormInput>
-  <LabeledFormInput label="Publishing Key">
-    <input
-      class="input input-bordered validator"
-      type="text"
-      bind:value={$form.publishing_key}
-      maxlength={stringLimits.project.publishing_key}
-    />
-    <span class="validator-hint">&nbsp;</span>
+  <LabeledFormInput label="Error">
+    <textarea
+      class="textarea w-full min-h-36"
+      bind:value={$form.error}
+      maxlength={stringLimits.project.error}
+    ></textarea>
   </LabeledFormInput>
-  <input type="submit" class="btn btn-success" value="Update" />
+  <div class="my-4">
+    <CancelButton returnTo="/project-admin/view?id={id}" />
+    <SubmitButton />
+  </div>
 </form>
 
 <style>
-  .input {
+  input {
+    width: 100%;
+  }
+
+  .input-fields {
+    display: flex;
+    flex-direction: column;
     width: 100%;
   }
+
+  @media (width >= 48rem /* 768px */) {
+    .input-fields {
+      flex-wrap: wrap;
+      flex-direction: row;
+    }
+    .input-fields :global(label):nth-child(odd) {
+      padding-right: calc(var(--spacing) * 1);
+    }
+    .input-fields :global(label):nth-child(even) {
+      padding-left: calc(var(--spacing) * 1);
+    }
+    .input-fields :global(label):nth-child(odd):last-child {
+      padding-right: 0px;
+      width: 100%;
+    }
+  }
 </style>
diff --git a/src/routes/(ui)/project-admin/view/+page.server.ts b/src/routes/(ui)/project-admin/view/+page.server.ts
index 0e5247ab..c7bd8154 100644
--- a/src/routes/(ui)/project-admin/view/+page.server.ts
+++ b/src/routes/(ui)/project-admin/view/+page.server.ts
@@ -13,6 +13,18 @@ export const load = (async ({ url }) => {
   const project = await prisma.project.findUnique({
     where: {
       id: id.output
+    },
+    select: {
+      id: true,
+      project_name: true,
+      created: true,
+      status: true,
+      result: true,
+      language_code: true,
+      app_id: true,
+      url: true,
+      client: { select: { id: true, prefix: true } },
+      error: true
     }
   });
 
diff --git a/src/routes/(ui)/project-admin/view/+page.svelte b/src/routes/(ui)/project-admin/view/+page.svelte
index d4c2c7c5..5d295693 100644
--- a/src/routes/(ui)/project-admin/view/+page.svelte
+++ b/src/routes/(ui)/project-admin/view/+page.svelte
@@ -2,8 +2,14 @@
   import type { PageData } from './$types';
   import { page } from '$app/state';
   import Breadcrumbs from '$lib/components/Breadcrumbs.svelte';
+  import CopyField from '$lib/components/CopyField.svelte';
+  import StatusBadge from '$lib/components/StatusBadge.svelte';
+  import Tooltip from '$lib/components/Tooltip.svelte';
+  import { Icons, getAppIcon } from '$lib/icons';
+  import IconContainer from '$lib/icons/IconContainer.svelte';
   import { title } from '$lib/stores';
-  import { getTimeDateString } from '$lib/utils/time';
+  import { getRelativeTime, getTimeDateString } from '$lib/utils/time';
+  import type { ApplicationType } from '$lib/valibot';
 
   $title = 'View Project: ' + page.url.searchParams.get('id')!;
 
@@ -12,6 +18,8 @@
   }
 
   let { data }: Props = $props();
+
+  const dateCreated = $derived(getRelativeTime(data.project.created));
 </script>
 
 <Breadcrumbs>
@@ -20,81 +28,94 @@
   <li>{data.project.id}</li>
 </Breadcrumbs>
 
-<h1>{$title}</h1>
-
-<div class="flex flex-row space-x-2 mb-2">
-  <a href="/project-admin/update?id={data.project.id}" class="btn btn-primary">Update</a>
+<div class="flex flex-row items-center">
+  <h1 class="p-4 pl-0">{data.project.project_name}</h1>
+  <StatusBadge status={data.project.result || data.project.status} />
+</div>
+Created <Tooltip tip={getTimeDateString(data.project.created)}>
+  {$dateCreated}
+</Tooltip>
+<div class="flex flex-row space-x-2 my-2">
+  <a href="/project-admin/update?id={data.project.id}" class="btn btn-secondary">
+    <IconContainer icon={Icons.Edit} width={20} />Edit Project
+  </a>
 </div>
 
-<table class="table table-zebra border">
-  <tbody>
-    <tr>
-      <th>ID</th>
-      <td>{data.project.id}</td>
-    </tr>
-    <tr>
-      <th>Status</th>
-      <td>{data.project.status}</td>
-    </tr>
-    <tr>
-      <th>Result</th>
-      <td>{data.project.result}</td>
-    </tr>
-    <tr>
-      <th>Error</th>
-      <td>
-        {#if data.project.error?.match(/^https?:/)}
-          <a class="link" href={data.project.error}>
-            {data.project.error}
+<div class="border p-2 rounded-md bg-base-200">
+  <div class="gridcont grid gap-x-6 gap-y-2 mb-2">
+    <div class="flex place-content-between">
+      <span>
+        <IconContainer icon={Icons.Language} width={20} />
+        Language:
+      </span>
+      <span>
+        {data.project.language_code}
+      </span>
+    </div>
+    <div class="flex place-content-between">
+      <span>App ID:</span>
+      <span class="flex flex-row gap-1">
+        <IconContainer icon={getAppIcon(data.project.app_id as ApplicationType)} width={24} />
+        {data.project.app_id}
+      </span>
+    </div>
+    {#if data.project.client}
+      <div class="flex place-content-between">
+        <span>
+          <IconContainer icon={Icons.User} width={20} />
+          Client:
+        </span>
+        <span>
+          <a class="link" href="/client-admin/view?id={data.project.client.id}">
+            {data.project.client.prefix}
           </a>
-        {:else}
+        </span>
+      </div>
+    {/if}
+  </div>
+  {#if data.project.url}
+    <div>
+      <span>S3 Bucket:</span>
+      <br />
+      <div class="flex rounded-md text-nowrap bg-base-200 p-3 pt-2 mt-2">
+        <IconContainer icon={Icons.Bucket} width={20} class="opacity-80 mr-2" />
+        <p>
+          {data.project.url?.substring(0, 5)}
+        </p>
+        <p class="shrink overflow-hidden text-ellipsis">
+          {data.project.url.split('/').slice(2, -1).join('/')}
+        </p>
+        <p class="grow pr-2">
+          /{data.project.url.split('/').pop()}
+        </p>
+        <CopyField value={data.project.url!} />
+      </div>
+    </div>
+  {/if}
+  {#if data.project.error}
+    {@const isURL = !!data.project.error?.match(/^https?:/)}
+    <div>
+      <span>Error:</span>
+      {#if isURL}
+        <a class="link" href={data.project.error}>
           {data.project.error}
-        {/if}
-      </td>
-    </tr>
-    <tr>
-      <th>Url</th>
-      <td>{data.project.url}</td>
-    </tr>
-    <tr>
-      <th>User ID</th>
-      <td>{data.project.user_id}</td>
-    </tr>
-    <tr>
-      <th>Group ID</th>
-      <td>{data.project.group_id}</td>
-    </tr>
-    <tr>
-      <th>App ID</th>
-      <td>{data.project.app_id}</td>
-    </tr>
-    <tr>
-      <th>Project Name</th>
-      <td>{data.project.project_name}</td>
-    </tr>
-    <tr>
-      <th>Language Code</th>
-      <td>{data.project.language_code}</td>
-    </tr>
-    <tr>
-      <th>Client ID</th>
-      <td>
-        <a class="link" href="/client-admin/view?id={data.project.client_id}">
-          {data.project.client_id}
         </a>
-      </td>
-    </tr>
-    <tr>
-      <th>Publishing Key</th>
-      <td>{data.project.publishing_key}</td>
-    </tr>
-    <tr>
-      <th>Created</th>
-      <td>{getTimeDateString(data.project.created)}</td>
-    </tr>
-    <tr>
-      <th>Updated</th>
-      <td>{getTimeDateString(data.project.updated)}</td>
-    </tr>
-  </tbody>
-</table>
+      {:else}
+        <br />
+        <textarea class="textarea w-full min-h-36" readonly>{data.project.error}</textarea>
+      {/if}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .gridcont {
+    grid-template-columns: repeat(auto-fill, minmax(48%, 1fr));
+  }
+  .gridcont div span:first-child {
+    font-family: Montserrat, sans-serif;
+  }
+  .gridcont div span:last-child {
+    text-align: right;
+  }
+</style>
diff --git a/src/routes/(ui)/release-admin/+page.svelte b/src/routes/(ui)/release-admin/+page.svelte
index ff2d5835..71731bc7 100644
--- a/src/routes/(ui)/release-admin/+page.svelte
+++ b/src/routes/(ui)/release-admin/+page.svelte
@@ -4,7 +4,8 @@
   import Breadcrumbs from '$lib/components/Breadcrumbs.svelte';
   import Pagination from '$lib/components/Pagination.svelte';
   import SearchBar from '$lib/components/SearchBar.svelte';
-  import { Icons, getStatusIcon } from '$lib/icons';
+  import StatusBadge from '$lib/components/StatusBadge.svelte';
+  import { Icons } from '$lib/icons';
   import IconContainer from '$lib/icons/IconContainer.svelte';
   import { title } from '$lib/stores';
 
@@ -89,31 +90,11 @@
   </p>
   <div class="flex flex-col gap-2">
     {#each releases as release}
-      {@const status = release.result || release.status}
       <div class="border rounded-md p-2 flex flex-col gap-1">
         <div class="flex flex-row">
           <h3 class="grow flex flex-row gap-2 items-start">
             <a class="link" href="/release-admin/view?id={release.id}">#{release.id}</a>
-            {#if status}
-              {@const { icon } = getStatusIcon(status)}
-              <b
-                class={[
-                  'badge',
-                  status === 'SUCCESS'
-                    ? 'badge-success'
-                    : status === 'FAILURE'
-                      ? 'badge-error'
-                      : status === 'ABORTED'
-                        ? 'badge-warning'
-                        : 'badge-neutral'
-                ]}
-              >
-                {#if icon !== Icons.Unknown}
-                  <IconContainer {icon} width={20} />
-                {/if}
-                {status}
-              </b>
-            {/if}
+            <StatusBadge status={release.result || release.status} />
           </h3>
         </div>
         <div class="flex flex-row items-center gap-x-1">

From 092479ab84e12146b0cc8c28b58ab1f5786d3b1f Mon Sep 17 00:00:00 2001
From: Aidan Jones <aidan_jones@sil.org>
Date: Thu, 13 Aug 2026 11:48:07 -0500
Subject: [PATCH 02/19] Extract pagination header to component

---
 src/lib/components/PaginationHeader.svelte | 17 +++++++++++++++++
 src/routes/(ui)/build-admin/+page.svelte   | 13 ++-----------
 src/routes/(ui)/client-admin/+page.svelte  | 13 ++-----------
 src/routes/(ui)/job-admin/+page.svelte     | 13 ++-----------
 src/routes/(ui)/project-admin/+page.svelte | 13 ++-----------
 src/routes/(ui)/release-admin/+page.svelte | 13 ++-----------
 6 files changed, 27 insertions(+), 55 deletions(-)
 create mode 100644 src/lib/components/PaginationHeader.svelte

diff --git a/src/lib/components/PaginationHeader.svelte b/src/lib/components/PaginationHeader.svelte
new file mode 100644
index 00000000..e33d3cd1
--- /dev/null
+++ b/src/lib/components/PaginationHeader.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+  interface Props {
+    page: { page: number; size: number };
+    count: number;
+  }
+
+  const { page, count }: Props = $props();
+</script>
+
+<p>
+  Showing <b>
+    {Math.min(page.page * page.size + 1, count)}-{Math.min((page.page + 1) * page.size, count)}
+  </b>
+  of
+  <b>{count}</b>
+  items
+</p>
diff --git a/src/routes/(ui)/build-admin/+page.svelte b/src/routes/(ui)/build-admin/+page.svelte
index 0390fd74..5a28323a 100644
--- a/src/routes/(ui)/build-admin/+page.svelte
+++ b/src/routes/(ui)/build-admin/+page.svelte
@@ -3,6 +3,7 @@
   import type { PageData } from './$types';
   import Breadcrumbs from '$lib/components/Breadcrumbs.svelte';
   import Pagination from '$lib/components/Pagination.svelte';
+  import PaginationHeader from '$lib/components/PaginationHeader.svelte';
   import SearchBar from '$lib/components/SearchBar.svelte';
   import StatusBadge from '$lib/components/StatusBadge.svelte';
   import { Icons } from '$lib/icons';
@@ -77,17 +78,7 @@
       </div>
     </div>
   </form>
-  <p>
-    Showing <b>
-      {$form.page.page * $form.page.size + 1}-{Math.min(
-        ($form.page.page + 1) * $form.page.size,
-        count
-      )}
-    </b>
-    of
-    <b>{count}</b>
-    items
-  </p>
+  <PaginationHeader page={$form.page} {count} />
   <div class="flex flex-col gap-2">
     {#each builds as build}
       <div class="border rounded-md p-2 flex flex-col gap-1">
diff --git a/src/routes/(ui)/client-admin/+page.svelte b/src/routes/(ui)/client-admin/+page.svelte
index 6164417d..62b8671f 100644
--- a/src/routes/(ui)/client-admin/+page.svelte
+++ b/src/routes/(ui)/client-admin/+page.svelte
@@ -3,6 +3,7 @@
   import type { PageData } from './$types';
   import Breadcrumbs from '$lib/components/Breadcrumbs.svelte';
   import Pagination from '$lib/components/Pagination.svelte';
+  import PaginationHeader from '$lib/components/PaginationHeader.svelte';
   import SecureDisplay from '$lib/components/SecureDisplay.svelte';
   import Tooltip from '$lib/components/Tooltip.svelte';
   import { Icons } from '$lib/icons';
@@ -47,17 +48,7 @@
   </Breadcrumbs>
   <h1>{$title}</h1>
   <a class="btn btn-success mb-2" href="/client-admin/create">Create Client</a>
-  <p>
-    Showing <b>
-      {$form.page.page * $form.page.size + 1}-{Math.min(
-        ($form.page.page + 1) * $form.page.size,
-        data.count
-      )}
-    </b>
-    of
-    <b>{data.count}</b>
-    items
-  </p>
+  <PaginationHeader page={$form.page} count={data.count} />
   <div class="flex flex-col gap-2">
     {#each clients as client, i}
       <div class="border rounded-md p-2 flex flex-col gap-1">
diff --git a/src/routes/(ui)/job-admin/+page.svelte b/src/routes/(ui)/job-admin/+page.svelte
index 28bb5acf..2439e3df 100644
--- a/src/routes/(ui)/job-admin/+page.svelte
+++ b/src/routes/(ui)/job-admin/+page.svelte
@@ -5,6 +5,7 @@
   import AppTypeSelector from '$lib/components/AppTypeSelector.svelte';
   import Breadcrumbs from '$lib/components/Breadcrumbs.svelte';
   import Pagination from '$lib/components/Pagination.svelte';
+  import PaginationHeader from '$lib/components/PaginationHeader.svelte';
   import SearchBar from '$lib/components/SearchBar.svelte';
   import { Icons, getAppIcon } from '$lib/icons';
   import IconContainer from '$lib/icons/IconContainer.svelte';
@@ -82,17 +83,7 @@
       </div>
     </div>
   </form>
-  <p>
-    Showing <b>
-      {$form.page.page * $form.page.size + 1}-{Math.min(
-        ($form.page.page + 1) * $form.page.size,
-        count
-      )}
-    </b>
-    of
-    <b>{count}</b>
-    items
-  </p>
+  <PaginationHeader page={$form.page} {count} />
   <div class="flex flex-col gap-2">
     {#each jobs as job}
       <div class="border rounded-md p-2 flex flex-col gap-1">
diff --git a/src/routes/(ui)/project-admin/+page.svelte b/src/routes/(ui)/project-admin/+page.svelte
index ad8774c3..dc3bb2c7 100644
--- a/src/routes/(ui)/project-admin/+page.svelte
+++ b/src/routes/(ui)/project-admin/+page.svelte
@@ -4,6 +4,7 @@
   import AppTypeSelector from '$lib/components/AppTypeSelector.svelte';
   import Breadcrumbs from '$lib/components/Breadcrumbs.svelte';
   import Pagination from '$lib/components/Pagination.svelte';
+  import PaginationHeader from '$lib/components/PaginationHeader.svelte';
   import SearchBar from '$lib/components/SearchBar.svelte';
   import { Icons, getAppIcon } from '$lib/icons';
   import IconContainer from '$lib/icons/IconContainer.svelte';
@@ -81,17 +82,7 @@
       </div>
     </div>
   </form>
-  <p>
-    Showing <b>
-      {$form.page.page * $form.page.size + 1}-{Math.min(
-        ($form.page.page + 1) * $form.page.size,
-        count
-      )}
-    </b>
-    of
-    <b>{count}</b>
-    items
-  </p>
+  <PaginationHeader page={$form.page} {count} />
   <div class="flex flex-col gap-2">
     {#each projects as project}
       <div class="border rounded-md p-2 flex flex-col gap-1">
diff --git a/src/routes/(ui)/release-admin/+page.svelte b/src/routes/(ui)/release-admin/+page.svelte
index 71731bc7..5f3f6921 100644
--- a/src/routes/(ui)/release-admin/+page.svelte
+++ b/src/routes/(ui)/release-admin/+page.svelte
@@ -3,6 +3,7 @@
   import type { PageData } from './$types';
   import Breadcrumbs from '$lib/components/Breadcrumbs.svelte';
   import Pagination from '$lib/components/Pagination.svelte';
+  import PaginationHeader from '$lib/components/PaginationHeader.svelte';
   import SearchBar from '$lib/components/SearchBar.svelte';
   import StatusBadge from '$lib/components/StatusBadge.svelte';
   import { Icons } from '$lib/icons';
@@ -77,17 +78,7 @@
       </div>
     </div>
   </form>
-  <p>
-    Showing <b>
-      {$form.page.page * $form.page.size + 1}-{Math.min(
-        ($form.page.page + 1) * $form.page.size,
-        count
-      )}
-    </b>
-    of
-    <b>{count}</b>
-    items
-  </p>
+  <PaginationHeader page={$form.page} {count} />
   <div class="flex flex-col gap-2">
     {#each releases as release}
       <div class="border rounded-md p-2 flex flex-col gap-1">

From 5ed5c33d865ac3ad56957fab08a8fb747337583d Mon Sep 17 00:00:00 2001
From: Aidan Jones <aidan_jones@sil.org>
Date: Thu, 13 Aug 2026 12:26:58 -0500
Subject: [PATCH 03/19] Move Status/Result to valibot

---
 src/lib/components/StatusBadge.svelte         |  7 +++---
 src/lib/icons/index.ts                        | 12 +++++-----
 src/lib/server/job-executors/build.ts         | 13 +++++-----
 src/lib/server/job-executors/polling.ts       | 24 +++++++++----------
 src/lib/server/job-executors/release.ts       | 10 ++++----
 src/lib/server/job-executors/s3.ts            | 20 +++++++---------
 src/lib/server/models/build.ts                | 15 ------------
 src/lib/server/models/release.ts              |  9 -------
 src/lib/valibot.ts                            | 17 +++++++++++++
 .../build/[buildId=idNumber]/+server.ts       |  6 ++---
 .../release/[releaseId=idNumber]/+server.ts   |  3 ++-
 src/routes/(api)/project/+server.ts           |  6 ++---
 12 files changed, 65 insertions(+), 77 deletions(-)

diff --git a/src/lib/components/StatusBadge.svelte b/src/lib/components/StatusBadge.svelte
index 3f6781fe..64f477da 100644
--- a/src/lib/components/StatusBadge.svelte
+++ b/src/lib/components/StatusBadge.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import IconContainer from '../icons/IconContainer.svelte';
   import { Icons, getStatusIcon } from '$lib/icons';
+  import { Result } from '$lib/valibot';
 
   interface Props {
     status: string | null;
@@ -13,11 +14,11 @@
   <b
     class={[
       'badge',
-      status === 'SUCCESS'
+      status === Result.Success
         ? 'badge-success'
-        : status === 'FAILURE'
+        : status === Result.Failure
           ? 'badge-error'
-          : status === 'ABORTED'
+          : status === Result.Aborted
             ? 'badge-warning'
             : 'badge-neutral'
     ]}
diff --git a/src/lib/icons/index.ts b/src/lib/icons/index.ts
index 168a4f03..2ad39e95 100644
--- a/src/lib/icons/index.ts
+++ b/src/lib/icons/index.ts
@@ -1,4 +1,4 @@
-import type { ApplicationType } from '$lib/valibot';
+import { type ApplicationType, Result } from '$lib/valibot';
 
 const appIcons = import.meta.glob('/src/lib/icons/app-builders/*.svg', {
   eager: true,
@@ -10,14 +10,14 @@ export function getAppIcon(type: ApplicationType) {
 }
 
 export function getStatusIcon(status: string) {
-  switch (status.toLowerCase()) {
-    case 'success':
+  switch (status.toUpperCase()) {
+    case Result.Success:
       return { color: 'text-success', icon: 'icon-park-outline:success' };
-    case 'failure':
+    case Result.Failure:
       return { color: 'text-error', icon: 'material-symbols:error-outline-rounded' };
-    case 'aborted':
+    case Result.Aborted:
       return { color: 'text-warning', icon: 'ix:cancelled' };
-    case 'pending':
+    case 'PENDING':
       return { icon: 'material-symbols:pending-outline' };
     default:
       return { icon: Icons.Unknown };
diff --git a/src/lib/server/job-executors/build.ts b/src/lib/server/job-executors/build.ts
index ffbc382c..d6419860 100644
--- a/src/lib/server/job-executors/build.ts
+++ b/src/lib/server/job-executors/build.ts
@@ -6,9 +6,8 @@ import { CodeBuild } from '../aws/codebuild';
 import { S3 } from '../aws/s3';
 import { AWSVars } from '../aws/vars';
 import { BullMQ, getQueues } from '../bullmq';
-import { Build } from '../models/build';
 import { prisma } from '../prisma';
-import { trimStrings } from '$lib/valibot';
+import { Result, Status, trimStrings } from '$lib/valibot';
 
 export async function product(job: Job<BullMQ.Build.Product>): Promise<unknown> {
   try {
@@ -42,7 +41,7 @@ export async function product(job: Job<BullMQ.Build.Product>): Promise<unknown>
             build_guid: lastBuildGuid,
             codebuild_url: CodeBuild.getCodeBuildUrl('build_app', lastBuildGuid),
             console_text_url: CodeBuild.getConsoleTextUrl('build_app', lastBuildGuid),
-            status: Build.Status.Active
+            status: Status.Active
           },
           'build',
           job.log
@@ -74,8 +73,8 @@ export async function product(job: Job<BullMQ.Build.Product>): Promise<unknown>
       where: { id: job.data.buildId },
       data: trimStrings(
         {
-          result: Build.Result.Failure,
-          status: Build.Status.Completed,
+          result: Result.Failure,
+          status: Status.Completed,
           error: String(e)
         },
         'build',
@@ -107,8 +106,8 @@ async function getVersionCode(
   const build = await prisma.build.aggregate({
     where: {
       job_id: job.id,
-      status: Build.Status.Completed,
-      result: Build.Result.Success
+      status: Status.Completed,
+      result: Result.Success
     },
     _max: {
       version_code: true
diff --git a/src/lib/server/job-executors/polling.ts b/src/lib/server/job-executors/polling.ts
index 7530eca8..c9d2f014 100644
--- a/src/lib/server/job-executors/polling.ts
+++ b/src/lib/server/job-executors/polling.ts
@@ -3,11 +3,9 @@ import type { Job } from 'bullmq';
 import { CodeBuild } from '../aws/codebuild';
 import { AWSVars } from '../aws/vars';
 import { BullMQ, getQueues } from '../bullmq';
-import { Build } from '../models/build';
 import { prisma } from '../prisma';
-import { Release } from '$lib/server/models/release';
 import type { Logger } from '$lib/utils';
-import { trimStrings } from '$lib/valibot';
+import { Result, Status, trimStrings } from '$lib/valibot';
 
 export async function build(job: Job<BullMQ.Polling.Build>): Promise<unknown> {
   try {
@@ -35,17 +33,17 @@ export async function build(job: Job<BullMQ.Polling.Build>): Promise<unknown> {
 
       if (codeBuild.isBuildComplete(buildStatus)) {
         await getQueues().Polling.removeJobScheduler(job.name);
-        build.status = Build.Status.PostProcessing;
+        build.status = Status.PostProcessing;
         status = codeBuild.getStatus(buildStatus);
         switch (status) {
           case CodeBuild.Status.Failed:
           case CodeBuild.Status.Fault:
           case CodeBuild.Status.TimedOut:
-            build.result = Build.Result.Failure;
+            build.result = Result.Failure;
             await handleBuildFailure(build);
             break;
           case CodeBuild.Status.Stopped:
-            build.result = Build.Result.Aborted;
+            build.result = Result.Aborted;
             await handleBuildFailure(build);
             break;
           case CodeBuild.Status.Succeeded:
@@ -80,8 +78,8 @@ export async function build(job: Job<BullMQ.Polling.Build>): Promise<unknown> {
       where: { id: job.data.buildId },
       data: trimStrings(
         {
-          result: Build.Result.Failure,
-          status: Build.Status.Completed,
+          result: Result.Failure,
+          status: Status.Completed,
           error: String(e)
         },
         'build',
@@ -129,21 +127,21 @@ export async function release(job: Job<BullMQ.Polling.Release>): Promise<unknown
 
       if (codeBuild.isBuildComplete(buildStatus)) {
         await getQueues().Polling.removeJobScheduler(job.name);
-        release.status = Build.Status.PostProcessing;
+        release.status = Status.PostProcessing;
         status = codeBuild.getStatus(buildStatus);
         switch (status) {
           case CodeBuild.Status.Failed:
           case CodeBuild.Status.Fault:
           case CodeBuild.Status.TimedOut:
-            release.result = Build.Result.Failure;
+            release.result = Result.Failure;
             await handleReleaseFailure(release, job.log);
             break;
           case CodeBuild.Status.Stopped:
-            release.result = Build.Result.Aborted;
+            release.result = Result.Aborted;
             await handleReleaseFailure(release, job.log);
             break;
           case CodeBuild.Status.Succeeded:
-            release.result = Build.Result.Success;
+            release.result = Result.Success;
             await prisma.build.update({
               where: { id: release.build.id },
               data: { channel: release.channel }
@@ -176,7 +174,7 @@ export async function release(job: Job<BullMQ.Polling.Release>): Promise<unknown
     job.log(`${e}`);
     await prisma.release.updateMany({
       where: { id: job.data.releaseId },
-      data: { result: Build.Result.Failure, status: Release.Status.Completed }
+      data: { result: Result.Failure, status: Status.Completed }
     });
     // rethrow so error makes it to HoneyComb
     throw e;
diff --git a/src/lib/server/job-executors/release.ts b/src/lib/server/job-executors/release.ts
index 4c206890..632f95ce 100644
--- a/src/lib/server/job-executors/release.ts
+++ b/src/lib/server/job-executors/release.ts
@@ -5,9 +5,7 @@ import { S3 } from '../aws/s3';
 import { AWSVars } from '../aws/vars';
 import { BullMQ, getQueues } from '../bullmq';
 import { prisma } from '../prisma';
-import { Build } from '$lib/server/models/build';
-import { Release } from '$lib/server/models/release';
-import { trimStrings } from '$lib/valibot';
+import { Result, Status, trimStrings } from '$lib/valibot';
 
 export async function product(job: Job<BullMQ.Release.Product>): Promise<unknown> {
   try {
@@ -40,7 +38,7 @@ export async function product(job: Job<BullMQ.Release.Product>): Promise<unknown
             build_guid: lastBuildGuid,
             codebuild_url: CodeBuild.getCodeBuildUrl('publish_app', lastBuildGuid),
             console_text_url: CodeBuild.getConsoleTextUrl('publish_app', lastBuildGuid),
-            status: Release.Status.Active
+            status: Status.Active
           },
           'release',
           job.log
@@ -63,8 +61,8 @@ export async function product(job: Job<BullMQ.Release.Product>): Promise<unknown
       where: { id: job.data.releaseId },
       data: trimStrings(
         {
-          result: Build.Result.Failure,
-          status: Release.Status.Completed,
+          result: Result.Failure,
+          status: Status.Completed,
           error: String(e)
         },
         'release',
diff --git a/src/lib/server/job-executors/s3.ts b/src/lib/server/job-executors/s3.ts
index c41ea4ad..fc0837a2 100644
--- a/src/lib/server/job-executors/s3.ts
+++ b/src/lib/server/job-executors/s3.ts
@@ -4,10 +4,8 @@ import { join } from 'node:path';
 import { S3 } from '$lib/server/aws/s3';
 import type { BullMQ } from '$lib/server/bullmq';
 import type { BuildForPrefix } from '$lib/server/models/artifacts';
-import { Build } from '$lib/server/models/build';
-import { Release } from '$lib/server/models/release';
 import { prisma } from '$lib/server/prisma';
-import { trimStrings } from '$lib/valibot';
+import { Result, Status, trimStrings } from '$lib/valibot';
 
 export async function save(job: Job<BullMQ.S3.CopyArtifacts>): Promise<unknown> {
   const id = job.data.id;
@@ -23,8 +21,8 @@ export async function save(job: Job<BullMQ.S3.CopyArtifacts>): Promise<unknown>
         where: { id },
         data: {
           ...release,
-          status: Release.Status.Completed,
-          result: Build.Result.Success,
+          status: Status.Completed,
+          result: Result.Success,
           build: undefined
         }
       });
@@ -116,8 +114,8 @@ export async function save(job: Job<BullMQ.S3.CopyArtifacts>): Promise<unknown>
         data: trimStrings(
           {
             ...build,
-            status: Build.Status.Completed,
-            result: Build.Result.Success,
+            status: Status.Completed,
+            result: Result.Success,
             job: undefined
           },
           'build',
@@ -147,8 +145,8 @@ export async function error(job: Job<BullMQ.S3.CopyErrors>): Promise<unknown> {
         data: trimStrings(
           {
             ...release,
-            status: Build.Status.Completed,
-            result: Build.Result.Failure,
+            status: Status.Completed,
+            result: Result.Failure,
             build: undefined
           },
           'release',
@@ -165,8 +163,8 @@ export async function error(job: Job<BullMQ.S3.CopyErrors>): Promise<unknown> {
         data: trimStrings(
           {
             ...build,
-            status: Build.Status.Completed,
-            result: Build.Result.Failure,
+            status: Status.Completed,
+            result: Result.Failure,
             job: undefined
           },
           'build',
diff --git a/src/lib/server/models/build.ts b/src/lib/server/models/build.ts
index 6e0d7313..40209080 100644
--- a/src/lib/server/models/build.ts
+++ b/src/lib/server/models/build.ts
@@ -4,21 +4,6 @@ import { getArtfactFilenameCount, getArtifactUrl, getArtifactUrls } from './arti
 
 // eslint-disable-next-line @typescript-eslint/no-namespace
 export namespace Build {
-  export enum Status {
-    Initialized = 'initialized',
-    Accepted = 'accepted',
-    Active = 'active',
-    Expired = 'expired',
-    PostProcessing = 'postprocessing',
-    Completed = 'completed'
-  }
-
-  export enum Result {
-    Success = 'SUCCESS',
-    Failure = 'FAILURE',
-    Aborted = 'ABORTED'
-  }
-
   export enum Channel {
     Unpublished = 'unpublished',
     Alpha = 'alpha',
diff --git a/src/lib/server/models/release.ts b/src/lib/server/models/release.ts
index 54cd5e05..eb572dce 100644
--- a/src/lib/server/models/release.ts
+++ b/src/lib/server/models/release.ts
@@ -4,15 +4,6 @@ import { getArtifactUrl } from './artifacts';
 
 // eslint-disable-next-line @typescript-eslint/no-namespace
 export namespace Release {
-  export enum Status {
-    Initialized = 'initialized',
-    Accepted = 'accepted',
-    Active = 'active',
-    Expired = 'expired',
-    Completed = 'completed',
-    PostProcessing = 'postprocessing'
-  }
-
   export enum Artifact {
     CloudWatch = 'cloudWatch',
     ConsoleText = 'consoleText',
diff --git a/src/lib/valibot.ts b/src/lib/valibot.ts
index d978e2bd..0ad75a5d 100644
--- a/src/lib/valibot.ts
+++ b/src/lib/valibot.ts
@@ -128,3 +128,20 @@ export const applicationTypes = [
   'keyboardappbuilder'
 ] as const;
 export type ApplicationType = (typeof applicationTypes)[number];
+
+export const Status = {
+  Initialized: 'initialized',
+  Accepted: 'accepted',
+  Active: 'active',
+  Expired: 'expired',
+  PostProcessing: 'postprocessing',
+  Completed: 'completed'
+} as const;
+export type Status = (typeof Status)[keyof typeof Status];
+
+export const Result = {
+  Success: 'SUCCESS',
+  Failure: 'FAILURE',
+  Aborted: 'ABORTED'
+} as const;
+export type Result = (typeof Result)[keyof typeof Result];
diff --git a/src/routes/(api)/job/[jobId=idNumber]/build/[buildId=idNumber]/+server.ts b/src/routes/(api)/job/[jobId=idNumber]/build/[buildId=idNumber]/+server.ts
index eae6d10a..8bba557e 100644
--- a/src/routes/(api)/job/[jobId=idNumber]/build/[buildId=idNumber]/+server.ts
+++ b/src/routes/(api)/job/[jobId=idNumber]/build/[buildId=idNumber]/+server.ts
@@ -5,7 +5,7 @@ import { Build } from '$lib/server/models/build';
 import { Release } from '$lib/server/models/release';
 import { prisma } from '$lib/server/prisma';
 import { ErrorResponse } from '$lib/utils';
-import { stringLimits } from '$lib/valibot';
+import { Status, stringLimits } from '$lib/valibot';
 
 // GET /job/[id]/build/[id]
 export const GET: RequestHandler = async ({ params }) => {
@@ -165,7 +165,7 @@ export const DELETE: RequestHandler = async ({ params }) => {
     prisma.build.deleteMany({ where: { id: build.id } })
   ]);
 
-  if (build.build_guid && build.status !== Build.Status.Completed) {
+  if (build.build_guid && build.status !== Status.Completed) {
     await getQueues().Builds.add(`Cancel Build #${build.id}`, {
       type: BullMQ.JobType.Build_Cancel,
       guid: build.build_guid,
@@ -174,7 +174,7 @@ export const DELETE: RequestHandler = async ({ params }) => {
   }
 
   for (const release of build.release) {
-    if (release.build_guid && release.status !== Release.Status.Completed) {
+    if (release.build_guid && release.status !== Status.Completed) {
       await getQueues().Releases.add(`Cancel Release #${release.id}`, {
         type: BullMQ.JobType.Release_Cancel,
         guid: release.build_guid,
diff --git a/src/routes/(api)/job/[jobId=idNumber]/build/[buildId=idNumber]/release/[releaseId=idNumber]/+server.ts b/src/routes/(api)/job/[jobId=idNumber]/build/[buildId=idNumber]/release/[releaseId=idNumber]/+server.ts
index a12ad4a7..42f007a7 100644
--- a/src/routes/(api)/job/[jobId=idNumber]/build/[buildId=idNumber]/release/[releaseId=idNumber]/+server.ts
+++ b/src/routes/(api)/job/[jobId=idNumber]/build/[buildId=idNumber]/release/[releaseId=idNumber]/+server.ts
@@ -3,6 +3,7 @@ import { BullMQ, getQueues } from '$lib/server/bullmq';
 import { Release } from '$lib/server/models/release';
 import { prisma } from '$lib/server/prisma';
 import { ErrorResponse } from '$lib/utils';
+import { Status } from '$lib/valibot';
 
 // GET /job/[id]/build/[id]/release/[id]
 export const GET: RequestHandler = async ({ params }) => {
@@ -82,7 +83,7 @@ export const DELETE: RequestHandler = async ({ params }) => {
 
   await prisma.release.delete({ where: { id: release.id } });
 
-  if (release.build_guid && release.status !== Release.Status.Completed) {
+  if (release.build_guid && release.status !== Status.Completed) {
     await getQueues().Releases.add(`Cancel Release #${release.id}`, {
       type: BullMQ.JobType.Release_Cancel,
       guid: release.build_guid,
diff --git a/src/routes/(api)/project/+server.ts b/src/routes/(api)/project/+server.ts
index e9582e1f..d65a9d33 100644
--- a/src/routes/(api)/project/+server.ts
+++ b/src/routes/(api)/project/+server.ts
@@ -4,7 +4,7 @@ import type { RequestHandler } from './$types';
 import { AWSVars } from '$lib/server/aws/vars';
 import { prisma } from '$lib/server/prisma';
 import { ErrorResponse } from '$lib/utils';
-import { applicationTypes, stringLimits } from '$lib/valibot';
+import { Result, Status, applicationTypes, stringLimits } from '$lib/valibot';
 
 const projectSchema = v.strictObject({
   app_id: v.pipe(v.string(), v.picklist(applicationTypes)),
@@ -22,8 +22,8 @@ export const POST: RequestHandler = async ({ request, locals }) => {
   const project = await prisma.project.create({
     data: {
       ...withoutStorage,
-      status: 'completed',
-      result: 'SUCCESS',
+      status: Status.Completed,
+      result: Result.Success,
       client_id: locals.clientId
     },
     include: {

From f0443b039d066f1d65ff8de350fbd194c82f3025 Mon Sep 17 00:00:00 2001
From: Aidan Jones <aidan_jones@sil.org>
Date: Thu, 13 Aug 2026 12:33:15 -0500
Subject: [PATCH 04/19] Break bucket icon logic into function

---
 src/lib/icons/index.ts                          | 9 ++++++++-
 src/routes/(ui)/job-admin/+page.svelte          | 9 ++++-----
 src/routes/(ui)/project-admin/+page.svelte      | 8 +++++---
 src/routes/(ui)/project-admin/view/+page.svelte | 7 ++++---
 4 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/src/lib/icons/index.ts b/src/lib/icons/index.ts
index 2ad39e95..6b3be557 100644
--- a/src/lib/icons/index.ts
+++ b/src/lib/icons/index.ts
@@ -9,6 +9,12 @@ export function getAppIcon(type: ApplicationType) {
   return appIcons[`/src/lib/icons/app-builders/${type}.svg`] ?? '';
 }
 
+export function getBucketIcon(url: string) {
+  if (url.startsWith('s3')) return { title: 'S3 Bucket', icon: Icons.Bucket };
+  else if (url.startsWith('ssh')) return { title: 'CodeCommit', icon: Icons.CodeCommit };
+  else return { title: 'URL', icon: Icons.URL };
+}
+
 export function getStatusIcon(status: string) {
   switch (status.toUpperCase()) {
     case Result.Success:
@@ -50,6 +56,7 @@ export const Icons = {
   SortAsc: 'bx:sort-a-z',
   SortDesc: 'bx:sort-z-a',
   Unknown: 'carbon:unknown',
+  URL: 'solar:link-bold',
   User: 'mdi:user',
   View: 'mdi:eye',
   Visible: 'mdi:eye'
@@ -58,4 +65,4 @@ export const Icons = {
 export type IconType =
   | (typeof Icons)[keyof typeof Icons]
   | ReturnType<typeof getAppIcon>
-  | ReturnType<typeof getStatusIcon>['icon'];
+  | ReturnType<typeof getBucketIcon | typeof getStatusIcon>['icon'];
diff --git a/src/routes/(ui)/job-admin/+page.svelte b/src/routes/(ui)/job-admin/+page.svelte
index 2439e3df..e3b12875 100644
--- a/src/routes/(ui)/job-admin/+page.svelte
+++ b/src/routes/(ui)/job-admin/+page.svelte
@@ -7,7 +7,7 @@
   import Pagination from '$lib/components/Pagination.svelte';
   import PaginationHeader from '$lib/components/PaginationHeader.svelte';
   import SearchBar from '$lib/components/SearchBar.svelte';
-  import { Icons, getAppIcon } from '$lib/icons';
+  import { Icons, getAppIcon, getBucketIcon } from '$lib/icons';
   import IconContainer from '$lib/icons/IconContainer.svelte';
   import { title } from '$lib/stores';
   import type { ApplicationType } from '$lib/valibot';
@@ -88,7 +88,7 @@
     {#each jobs as job}
       <div class="border rounded-md p-2 flex flex-col gap-1">
         <div class="flex flex-row">
-          <h3 class="grow flex flex-row gap-2 items-start">
+          <h3 class="grow flex flex-row gap-2 items-start pl-1">
             <a class="link" href="/job-admin/view?id={job.id}">#{job.id}</a>
             <img src={getAppIcon(job.app_id as ApplicationType)} width={20} alt={job.app_id} />
             <a
@@ -100,7 +100,7 @@
             </a>
           </h3>
         </div>
-        <div class="flex flex-row items-center gap-x-1">
+        <div class="flex flex-row items-center gap-x-1 pl-1">
           {#if job.client}
             <IconContainer icon={Icons.User} width={16} />
             <a class="link mr-2" href="/client-admin/view?id={job.client.id}">
@@ -108,8 +108,7 @@
             </a>
           {/if}
           {#if job.git_url}
-            {@const icon = job.git_url.startsWith('s3') ? Icons.Bucket : Icons.CodeCommit}
-            {@const title = job.git_url.startsWith('s3') ? 'S3 Bucket' : 'CodeCommit Repo'}
+            {@const { icon, title } = getBucketIcon(job.git_url)}
             <IconContainer {icon} width={16} />
             <a class="link" href={job.git_url} target="_blank">
               {title}
diff --git a/src/routes/(ui)/project-admin/+page.svelte b/src/routes/(ui)/project-admin/+page.svelte
index dc3bb2c7..1134e429 100644
--- a/src/routes/(ui)/project-admin/+page.svelte
+++ b/src/routes/(ui)/project-admin/+page.svelte
@@ -6,7 +6,7 @@
   import Pagination from '$lib/components/Pagination.svelte';
   import PaginationHeader from '$lib/components/PaginationHeader.svelte';
   import SearchBar from '$lib/components/SearchBar.svelte';
-  import { Icons, getAppIcon } from '$lib/icons';
+  import { Icons, getAppIcon, getBucketIcon } from '$lib/icons';
   import IconContainer from '$lib/icons/IconContainer.svelte';
   import { title } from '$lib/stores';
   import type { ApplicationType } from '$lib/valibot';
@@ -104,9 +104,11 @@
             </a>
           {/if}
           {#if project.url}
-            <IconContainer icon={Icons.Bucket} width={16} />
+            {@const { icon, title } = getBucketIcon(project.url)}
+            <IconContainer {icon} width={16} />
             <a class="link" href={project.url} target="_blank">
-              S3 Bucket <IconContainer icon={Icons.Open} width={16} />
+              {title}
+              <IconContainer icon={Icons.Open} width={16} />
             </a>
           {/if}
         </div>
diff --git a/src/routes/(ui)/project-admin/view/+page.svelte b/src/routes/(ui)/project-admin/view/+page.svelte
index 5d295693..8b71eb03 100644
--- a/src/routes/(ui)/project-admin/view/+page.svelte
+++ b/src/routes/(ui)/project-admin/view/+page.svelte
@@ -5,7 +5,7 @@
   import CopyField from '$lib/components/CopyField.svelte';
   import StatusBadge from '$lib/components/StatusBadge.svelte';
   import Tooltip from '$lib/components/Tooltip.svelte';
-  import { Icons, getAppIcon } from '$lib/icons';
+  import { Icons, getAppIcon, getBucketIcon } from '$lib/icons';
   import IconContainer from '$lib/icons/IconContainer.svelte';
   import { title } from '$lib/stores';
   import { getRelativeTime, getTimeDateString } from '$lib/utils/time';
@@ -74,11 +74,12 @@ Created <Tooltip tip={getTimeDateString(data.project.created)}>
     {/if}
   </div>
   {#if data.project.url}
+    {@const { icon, title } = getBucketIcon(data.project.url)}
     <div>
-      <span>S3 Bucket:</span>
+      <span>{title}:</span>
       <br />
       <div class="flex rounded-md text-nowrap bg-base-200 p-3 pt-2 mt-2">
-        <IconContainer icon={Icons.Bucket} width={20} class="opacity-80 mr-2" />
+        <IconContainer {icon} width={20} class="opacity-80 mr-2" />
         <p>
           {data.project.url?.substring(0, 5)}
         </p>

From 353aa5582a7d6216178831a4fb93e35e8be30112 Mon Sep 17 00:00:00 2001
From: Aidan Jones <aidan_jones@sil.org>
Date: Thu, 13 Aug 2026 14:13:48 -0500
Subject: [PATCH 05/19] Revamp form field icons

---
 src/lib/components/LabeledFormInput.svelte    | 54 +++++++++--
 src/lib/icons/index.ts                        | 23 +++--
 .../(ui)/project-admin/update/+page.svelte    | 92 +++++++++----------
 3 files changed, 107 insertions(+), 62 deletions(-)

diff --git a/src/lib/components/LabeledFormInput.svelte b/src/lib/components/LabeledFormInput.svelte
index 2693e137..69160af6 100644
--- a/src/lib/components/LabeledFormInput.svelte
+++ b/src/lib/components/LabeledFormInput.svelte
@@ -2,17 +2,40 @@
     @component
     An input slot for a form (stylized)
 -->
-<script lang="ts">
+<script lang="ts" module>
   import type { Snippet } from 'svelte';
-  import type { ClassValue } from 'svelte/elements';
-
-  interface Props {
+  import type { ClassValue, HTMLInputAttributes } from 'svelte/elements';
+  import type { IconType } from '$lib/icons';
+  export interface Props {
     label: string;
     class?: ClassValue;
     children?: Snippet;
+    input?: HTMLInputAttributes & {
+      class?: ClassValue;
+      err?: string;
+      icon?: IconType;
+      iconClass?: ClassValue;
+      after?: Snippet;
+    };
+    validate?: boolean;
+  }
+</script>
+
+<script lang="ts" generics="T">
+  import IconContainer from '$lib/icons/IconContainer.svelte';
+
+  interface InstanceProps extends Props {
+    value?: T;
   }
 
-  let { label, class: classes, children }: Props = $props();
+  let {
+    label,
+    class: classes,
+    children,
+    input,
+    value = $bindable(),
+    validate = true
+  }: InstanceProps = $props();
 </script>
 
 <label class={['flex flex-col w-full', classes]}>
@@ -21,5 +44,24 @@
       {label}
     </span>
   </div>
-  {@render children?.()}
+  {#if input}
+    <div class={['input w-full', validate && 'validator']}>
+      {#if input.icon}
+        <IconContainer
+          icon={input.icon}
+          width={20}
+          class={['cursor-pointer opacity-80', input.iconClass]}
+        />
+      {/if}
+      <input type="text" {...input} bind:value />
+      {@render input.after?.()}
+    </div>
+    {#if validate}
+      <span class="validator-hint">
+        {#if input.err}{input.err}{:else}&nbsp;{/if}
+      </span>
+    {/if}
+  {:else}
+    {@render children?.()}
+  {/if}
 </label>
diff --git a/src/lib/icons/index.ts b/src/lib/icons/index.ts
index 6b3be557..1640cb99 100644
--- a/src/lib/icons/index.ts
+++ b/src/lib/icons/index.ts
@@ -1,4 +1,4 @@
-import { type ApplicationType, Result } from '$lib/valibot';
+import { type ApplicationType, Result, Status } from '$lib/valibot';
 
 const appIcons = import.meta.glob('/src/lib/icons/app-builders/*.svg', {
   eager: true,
@@ -9,15 +9,16 @@ export function getAppIcon(type: ApplicationType) {
   return appIcons[`/src/lib/icons/app-builders/${type}.svg`] ?? '';
 }
 
-export function getBucketIcon(url: string) {
-  if (url.startsWith('s3')) return { title: 'S3 Bucket', icon: Icons.Bucket };
-  else if (url.startsWith('ssh')) return { title: 'CodeCommit', icon: Icons.CodeCommit };
+export function getBucketIcon(url: string | null) {
+  if (url?.startsWith('s3')) return { title: 'S3 Bucket', icon: Icons.Bucket };
+  else if (url?.startsWith('ssh')) return { title: 'CodeCommit', icon: Icons.CodeCommit };
   else return { title: 'URL', icon: Icons.URL };
 }
 
-export function getStatusIcon(status: string) {
-  switch (status.toUpperCase()) {
+export function getStatusIcon(status: string | null) {
+  switch (status) {
     case Result.Success:
+    case Status.Completed:
       return { color: 'text-success', icon: 'icon-park-outline:success' };
     case Result.Failure:
       return { color: 'text-error', icon: 'material-symbols:error-outline-rounded' };
@@ -25,6 +26,16 @@ export function getStatusIcon(status: string) {
       return { color: 'text-warning', icon: 'ix:cancelled' };
     case 'PENDING':
       return { icon: 'material-symbols:pending-outline' };
+    case Status.Initialized:
+      return { icon: 'vaadin:start-cog' };
+    case Status.Accepted:
+      return { icon: Icons.Checkmark };
+    case Status.Active:
+      return { color: 'text-error', icon: 'nrk:radio-active' };
+    case Status.Expired:
+      return { icon: 'pajamas:expire' };
+    case Status.PostProcessing:
+      return { color: 'text-warning', icon: 'uis:process' };
     default:
       return { icon: Icons.Unknown };
   }
diff --git a/src/routes/(ui)/project-admin/update/+page.svelte b/src/routes/(ui)/project-admin/update/+page.svelte
index 4e0db5c4..a9a5a583 100644
--- a/src/routes/(ui)/project-admin/update/+page.svelte
+++ b/src/routes/(ui)/project-admin/update/+page.svelte
@@ -8,7 +8,7 @@
   import LabeledFormInput from '$lib/components/LabeledFormInput.svelte';
   import SelectWithIcon from '$lib/components/SelectWithIcon.svelte';
   import SubmitButton from '$lib/components/SubmitButton.svelte';
-  import { Icons } from '$lib/icons';
+  import { Icons, getBucketIcon, getStatusIcon } from '$lib/icons';
   import IconContainer from '$lib/icons/IconContainer.svelte';
   import { title } from '$lib/stores';
   import { stringLimits } from '$lib/valibot';
@@ -40,24 +40,26 @@
 
 <form method="POST" use:enhance>
   <div class="input-fields">
-    <LabeledFormInput label="Status" class="md:w-1/2">
-      <input
-        class="input input-bordered validator"
-        type="text"
-        bind:value={$form.status}
-        maxlength={stringLimits.project.status}
-      />
-      <span class="validator-hint">&nbsp;</span>
-    </LabeledFormInput>
-    <LabeledFormInput label="Result" class="md:w-1/2">
-      <input
-        class="input input-bordered validator"
-        type="text"
-        bind:value={$form.result}
-        maxlength={stringLimits.project.result}
-      />
-      <span class="validator-hint">&nbsp;</span>
-    </LabeledFormInput>
+    <LabeledFormInput
+      label="Status"
+      class="md:w-1/2"
+      input={{
+        maxlength: stringLimits.project.status,
+        icon: getStatusIcon($form.status).icon,
+        iconClass: [getStatusIcon($form.status).color]
+      }}
+      bind:value={$form.status}
+    />
+    <LabeledFormInput
+      label="Result"
+      class="md:w-1/2"
+      input={{
+        maxlength: stringLimits.project.result,
+        icon: getStatusIcon($form.result).icon,
+        iconClass: [getStatusIcon($form.result).color]
+      }}
+      bind:value={$form.result}
+    />
     <LabeledFormInput label="App ID" class="md:w-1/2">
       <AppTypeSelector bind:value={$form.app_id} />
       <span class="validator-hint">&nbsp;</span>
@@ -76,34 +78,28 @@
       </SelectWithIcon>
       <span class="validator-hint">&nbsp;</span>
     </LabeledFormInput>
-    <LabeledFormInput label="Project Name" class="md:w-1/2">
-      <input
-        class="input input-bordered validator"
-        type="text"
-        bind:value={$form.project_name}
-        maxlength={stringLimits.project.project_name}
-      />
-      <span class="validator-hint">&nbsp;</span>
-    </LabeledFormInput>
-    <LabeledFormInput label="Language Code" class="md:w-1/2">
-      <input
-        class="input input-bordered validator"
-        type="text"
-        bind:value={$form.language_code}
-        maxlength={stringLimits.project.language_code}
-      />
-      <span class="validator-hint">&nbsp;</span>
-    </LabeledFormInput>
-  </div>
-  <LabeledFormInput label="Url">
-    <input
-      class="input input-bordered validator w-full"
-      type="url"
-      bind:value={$form.url}
-      maxlength={stringLimits.project.url}
+    <LabeledFormInput
+      label="Project Name"
+      class="md:w-1/2"
+      input={{ maxlength: stringLimits.project.project_name, icon: Icons.Edit }}
+      bind:value={$form.project_name}
     />
-    <span class="validator-hint">&nbsp;</span>
-  </LabeledFormInput>
+    <LabeledFormInput
+      label="Language Code"
+      class="md:w-1/2"
+      input={{ maxlength: stringLimits.project.language_code, icon: Icons.Language }}
+      bind:value={$form.language_code}
+    />
+  </div>
+  <LabeledFormInput
+    label={getBucketIcon($form.url).title}
+    input={{
+      maxlength: stringLimits.project.url,
+      type: 'url',
+      icon: getBucketIcon($form.url).icon
+    }}
+    bind:value={$form.url}
+  />
   <LabeledFormInput label="Error">
     <textarea
       class="textarea w-full min-h-36"
@@ -118,10 +114,6 @@
 </form>
 
 <style>
-  input {
-    width: 100%;
-  }
-
   .input-fields {
     display: flex;
     flex-direction: column;

From fd67b6eeb39ce4978e35974f9ffc6f5090672728 Mon Sep 17 00:00:00 2001
From: Aidan Jones <aidan_jones@sil.org>
Date: Thu, 13 Aug 2026 14:19:04 -0500
Subject: [PATCH 06/19] Improve job view/edit

---
 src/lib/icons/index.ts                        |   2 +
 .../(ui)/job-admin/update/+page.server.ts     |  22 +--
 src/routes/(ui)/job-admin/update/+page.svelte | 147 +++++++++--------
 .../(ui)/job-admin/view/+page.server.ts       |  10 ++
 src/routes/(ui)/job-admin/view/+page.svelte   | 152 +++++++++++-------
 5 files changed, 185 insertions(+), 148 deletions(-)

diff --git a/src/lib/icons/index.ts b/src/lib/icons/index.ts
index 1640cb99..b1c4ca46 100644
--- a/src/lib/icons/index.ts
+++ b/src/lib/icons/index.ts
@@ -66,9 +66,11 @@ export const Icons = {
   Search: 'mdi:search',
   SortAsc: 'bx:sort-a-z',
   SortDesc: 'bx:sort-z-a',
+  Store: 'ic:twotone-store',
   Unknown: 'carbon:unknown',
   URL: 'solar:link-bold',
   User: 'mdi:user',
+  Version: 'mdi:tag',
   View: 'mdi:eye',
   Visible: 'mdi:eye'
 } as const;
diff --git a/src/routes/(ui)/job-admin/update/+page.server.ts b/src/routes/(ui)/job-admin/update/+page.server.ts
index f27fbaa0..9d4f2151 100644
--- a/src/routes/(ui)/job-admin/update/+page.server.ts
+++ b/src/routes/(ui)/job-admin/update/+page.server.ts
@@ -5,14 +5,7 @@ import { valibot } from 'sveltekit-superforms/adapters';
 import * as v from 'valibot';
 import type { Actions, PageServerLoad } from './$types';
 import { prisma } from '$lib/server/prisma';
-import {
-  convertEmptyStrToNull,
-  idSchema,
-  paramNumber,
-  selectFrom,
-  stringIdSchema,
-  stringLimits
-} from '$lib/valibot';
+import { idSchema, paramNumber, selectFrom, stringIdSchema, stringLimits } from '$lib/valibot';
 
 const jobSchema = v.strictObject({
   request_id: stringIdSchema,
@@ -20,15 +13,7 @@ const jobSchema = v.strictObject({
   app_id: v.pipe(v.string(), v.maxBytes(stringLimits.job.app_id)),
   publisher_id: v.pipe(v.string(), v.maxBytes(stringLimits.job.publisher_id)),
   client_id: v.nullable(idSchema),
-  existing_version_code: v.nullable(idSchema),
-  jenkins_build_url: v.pipe(
-    convertEmptyStrToNull(stringLimits.job.jenkins_build_url),
-    v.nullable(v.pipe(v.string(), v.url()))
-  ),
-  jenkins_publish_url: v.pipe(
-    convertEmptyStrToNull(stringLimits.job.jenkins_publish_url),
-    v.nullable(v.pipe(v.string(), v.url()))
-  )
+  existing_version_code: v.nullable(idSchema)
 });
 
 export const load = (async ({ url }) => {
@@ -47,7 +32,8 @@ export const load = (async ({ url }) => {
   if (!job) error(404);
 
   return {
-    form: await superValidate(job, valibot(jobSchema))
+    form: await superValidate(job, valibot(jobSchema)),
+    clients: await prisma.client.findMany({ select: { id: true, prefix: true } })
   };
 }) satisfies PageServerLoad;
 
diff --git a/src/routes/(ui)/job-admin/update/+page.svelte b/src/routes/(ui)/job-admin/update/+page.svelte
index 227ee026..0a23f1a3 100644
--- a/src/routes/(ui)/job-admin/update/+page.svelte
+++ b/src/routes/(ui)/job-admin/update/+page.svelte
@@ -2,15 +2,21 @@
   import { superForm } from 'sveltekit-superforms';
   import type { PageData } from './$types';
   import { page } from '$app/state';
+  import AppTypeSelector from '$lib/components/AppTypeSelector.svelte';
   import Breadcrumbs from '$lib/components/Breadcrumbs.svelte';
+  import CancelButton from '$lib/components/CancelButton.svelte';
   import LabeledFormInput from '$lib/components/LabeledFormInput.svelte';
+  import SelectWithIcon from '$lib/components/SelectWithIcon.svelte';
+  import SubmitButton from '$lib/components/SubmitButton.svelte';
+  import { Icons, getBucketIcon } from '$lib/icons';
+  import IconContainer from '$lib/icons/IconContainer.svelte';
   import { title } from '$lib/stores';
   import { stringLimits } from '$lib/valibot';
 
   const id = $derived(page.url.searchParams.get('id')!);
 
   $effect(() => {
-    $title = 'Update Job: ' + id;
+    $title = 'Edit Job';
   });
 
   interface Props {
@@ -33,86 +39,79 @@
 <h1>{$title}</h1>
 
 <form method="POST" use:enhance>
-  <LabeledFormInput label="Request ID">
-    <input
-      class="input input-bordered validator"
-      type="text"
-      bind:value={$form.request_id}
-      required
-      maxlength={stringLimits.job.request_id}
-    />
-    <span class="validator-hint">&nbsp;</span>
-  </LabeledFormInput>
-  <LabeledFormInput label="Git Url">
-    <input
-      class="input input-bordered validator"
-      type="url"
-      bind:value={$form.git_url}
-      required
-      maxlength={stringLimits.job.request_id}
-    />
-    <span class="validator-hint">&nbsp;</span>
-  </LabeledFormInput>
-  <LabeledFormInput label="App ID">
-    <input
-      class="input input-bordered validator"
-      type="text"
-      bind:value={$form.app_id}
-      required
-      maxlength={stringLimits.job.app_id}
-    />
-    <span class="validator-hint">&nbsp;</span>
-  </LabeledFormInput>
-  <LabeledFormInput label="Publisher ID">
-    <input
-      class="input input-bordered validator"
-      type="text"
+  <LabeledFormInput
+    label="Request ID"
+    input={{ maxlength: stringLimits.job.request_id, icon: Icons.Product }}
+    bind:value={$form.request_id}
+  />
+  <LabeledFormInput
+    label={getBucketIcon($form.git_url).title}
+    input={{
+      maxlength: stringLimits.job.git_url,
+      type: 'url',
+      icon: getBucketIcon($form.git_url).icon
+    }}
+    bind:value={$form.git_url}
+  />
+  <div class="input-fields">
+    <LabeledFormInput label="App ID" class="md:w-1/2">
+      <AppTypeSelector bind:value={$form.app_id} />
+      <span class="validator-hint">&nbsp;</span>
+    </LabeledFormInput>
+    <LabeledFormInput label="Client" class="md:w-1/2">
+      <SelectWithIcon
+        bind:value={$form.client_id}
+        icon={Icons.User}
+        items={data.clients.map((c) => ({ id: c.id, name: c.prefix }))}
+        class="validator w-full"
+        attr={{ name: 'client_id' }}
+      >
+        {#snippet extra()}
+          <option value={null}><IconContainer icon={Icons.User} width={20} />Default Client</option>
+        {/snippet}
+      </SelectWithIcon>
+      <span class="validator-hint">&nbsp;</span>
+    </LabeledFormInput>
+    <LabeledFormInput
+      label="Publisher ID"
+      class="md:w-1/2"
+      input={{ maxlength: stringLimits.job.publisher_id, icon: Icons.Store }}
       bind:value={$form.publisher_id}
-      required
-      maxlength={stringLimits.job.publisher_id}
-    />
-    <span class="validator-hint">&nbsp;</span>
-  </LabeledFormInput>
-  <LabeledFormInput label="Client ID">
-    <input
-      class="input input-bordered validator"
-      type="number"
-      bind:value={$form.client_id}
-      required
     />
-    <span class="validator-hint">&nbsp;</span>
-  </LabeledFormInput>
-  <LabeledFormInput label="Existing Version Code">
-    <input
-      class="input input-bordered validator"
-      type="number"
+    <LabeledFormInput
+      label="Existing Version Code"
+      class="md:w-1/2"
+      input={{ type: 'number', icon: Icons.Version }}
       bind:value={$form.existing_version_code}
     />
-    <span class="validator-hint">&nbsp;</span>
-  </LabeledFormInput>
-  <LabeledFormInput label="Jenkins Build Url">
-    <input
-      class="input input-bordered validator"
-      type="url"
-      bind:value={$form.jenkins_build_url}
-      maxlength={stringLimits.job.jenkins_build_url}
-    />
-    <span class="validator-hint">&nbsp;</span>
-  </LabeledFormInput>
-  <LabeledFormInput label="Jenkins Publish Url">
-    <input
-      class="input input-bordered validator"
-      type="url"
-      bind:value={$form.jenkins_publish_url}
-      maxlength={stringLimits.job.jenkins_publish_url}
-    />
-    <span class="validator-hint">&nbsp;</span>
-  </LabeledFormInput>
-  <input type="submit" class="btn btn-success" value="Update" />
+  </div>
+  <div class="my-4">
+    <CancelButton returnTo="/job-admin/view?id={id}" />
+    <SubmitButton />
+  </div>
 </form>
 
 <style>
-  .input {
+  .input-fields {
+    display: flex;
+    flex-direction: column;
     width: 100%;
   }
+
+  @media (width >= 48rem /* 768px */) {
+    .input-fields {
+      flex-wrap: wrap;
+      flex-direction: row;
+    }
+    .input-fields :global(label):nth-child(odd) {
+      padding-right: calc(var(--spacing) * 1);
+    }
+    .input-fields :global(label):nth-child(even) {
+      padding-left: calc(var(--spacing) * 1);
+    }
+    .input-fields :global(label):nth-child(odd):last-child {
+      padding-right: 0px;
+      width: 100%;
+    }
+  }
 </style>
diff --git a/src/routes/(ui)/job-admin/view/+page.server.ts b/src/routes/(ui)/job-admin/view/+page.server.ts
index 5b40cc94..7c41dabb 100644
--- a/src/routes/(ui)/job-admin/view/+page.server.ts
+++ b/src/routes/(ui)/job-admin/view/+page.server.ts
@@ -13,6 +13,16 @@ export const load = (async ({ url }) => {
   const job = await prisma.job.findUnique({
     where: {
       id: id.output
+    },
+    select: {
+      id: true,
+      request_id: true,
+      git_url: true,
+      app_id: true,
+      publisher_id: true,
+      client: { select: { id: true, prefix: true } },
+      existing_version_code: true,
+      created: true
     }
   });
 
diff --git a/src/routes/(ui)/job-admin/view/+page.svelte b/src/routes/(ui)/job-admin/view/+page.svelte
index a2d67fcb..b148b692 100644
--- a/src/routes/(ui)/job-admin/view/+page.svelte
+++ b/src/routes/(ui)/job-admin/view/+page.svelte
@@ -1,9 +1,15 @@
 <script lang="ts">
   import type { PageData } from './$types';
   import { page } from '$app/state';
+  import { env } from '$env/dynamic/public';
   import Breadcrumbs from '$lib/components/Breadcrumbs.svelte';
+  import CopyField from '$lib/components/CopyField.svelte';
+  import Tooltip from '$lib/components/Tooltip.svelte';
+  import { Icons, getAppIcon, getBucketIcon } from '$lib/icons';
+  import IconContainer from '$lib/icons/IconContainer.svelte';
   import { title } from '$lib/stores';
-  import { getTimeDateString } from '$lib/utils/time';
+  import { getRelativeTime, getTimeDateString } from '$lib/utils/time';
+  import type { ApplicationType } from '$lib/valibot';
 
   $title = 'View Job: ' + page.url.searchParams.get('id')!;
 
@@ -12,6 +18,8 @@
   }
 
   let { data }: Props = $props();
+
+  const dateCreated = $derived(getRelativeTime(data.job.created));
 </script>
 
 <Breadcrumbs>
@@ -20,61 +28,93 @@
   <li>{data.job.id}</li>
 </Breadcrumbs>
 
-<h1>{$title}</h1>
+<div class="flex flex-row items-center">
+  <a class="link" href="{env.PUBLIC_SCRIPTORIA_URL}/products/{data.job.request_id}" target="_blank">
+    <h1 class="p-4 pl-0">
+      {data.job.request_id}<IconContainer icon={Icons.Open} width={24} />
+    </h1>
+  </a>
+</div>
+Created <Tooltip tip={getTimeDateString(data.job.created)}>
+  {$dateCreated}
+</Tooltip>
+<div class="flex flex-row space-x-2 my-2">
+  <a href="/job-admin/update?id={data.job.id}" class="btn btn-secondary">
+    <IconContainer icon={Icons.Edit} width={20} />Edit Job
+  </a>
+</div>
 
-<div class="flex flex-row space-x-2 mb-2">
-  <a href="/job-admin/update?id={data.job.id}" class="btn btn-primary">Update</a>
+<div class="border p-2 rounded-md bg-base-200">
+  <div class="gridcont grid gap-x-6 gap-y-2 mb-2">
+    <div class="flex place-content-between">
+      <span>
+        <IconContainer icon={Icons.Store} width={20} />
+        Publisher ID:
+      </span>
+      <span>
+        {data.job.publisher_id}
+      </span>
+    </div>
+    <div class="flex place-content-between">
+      <span>App ID:</span>
+      <span class="flex flex-row gap-1">
+        <IconContainer icon={getAppIcon(data.job.app_id as ApplicationType)} width={24} />
+        {data.job.app_id}
+      </span>
+    </div>
+    {#if data.job.client}
+      <div class="flex place-content-between">
+        <span>
+          <IconContainer icon={Icons.User} width={20} />
+          Client:
+        </span>
+        <span>
+          <a class="link" href="/client-admin/view?id={data.job.client.id}">
+            {data.job.client.prefix}
+          </a>
+        </span>
+      </div>
+    {/if}
+    <div class="flex place-content-between">
+      <span>
+        <IconContainer icon={Icons.Version} width={20} />
+        Existing Version Code:
+      </span>
+      <span>
+        {data.job.existing_version_code}
+      </span>
+    </div>
+  </div>
+  {#if data.job.git_url}
+    {@const { icon, title } = getBucketIcon(data.job.git_url)}
+    <div>
+      <span>{title}:</span>
+      <br />
+      <div class="flex rounded-md text-nowrap bg-base-200 p-3 pt-2 mt-2">
+        <IconContainer {icon} width={20} class="opacity-80 mr-2" />
+        <p>
+          {data.job.git_url?.substring(0, 5)}
+        </p>
+        <p class="shrink overflow-hidden text-ellipsis">
+          {data.job.git_url.split('/').slice(2, -1).join('/')}
+        </p>
+        <p class="grow pr-2">
+          /{data.job.git_url.split('/').pop()}
+        </p>
+        <CopyField value={data.job.git_url!} />
+      </div>
+    </div>
+  {/if}
 </div>
 
-<table class="table table-zebra border">
-  <tbody>
-    <tr>
-      <th>ID</th>
-      <td>{data.job.id}</td>
-    </tr>
-    <tr>
-      <th>Request ID</th>
-      <td>{data.job.request_id}</td>
-    </tr>
-    <tr>
-      <th>Git Url</th>
-      <td><a class="link" href={data.job.git_url}>{data.job.git_url}</a></td>
-    </tr>
-    <tr>
-      <th>App ID</th>
-      <td>{data.job.app_id}</td>
-    </tr>
-    <tr>
-      <th>Publisher ID</th>
-      <td>{data.job.publisher_id}</td>
-    </tr>
-    <tr>
-      <th>Client ID</th>
-      <td>
-        <a class="link" href="/client-admin/view?id={data.job.client_id}">{data.job.client_id}</a>
-      </td>
-    </tr>
-    <tr>
-      <th>Existing Version Code</th>
-      <td>{data.job.existing_version_code}</td>
-    </tr>
-    <tr>
-      <th>Jenkins Build Url</th>
-      <td><a class="link" href={data.job.jenkins_build_url}>{data.job.jenkins_build_url}</a></td>
-    </tr>
-    <tr>
-      <th>Jenkins Publish Url</th>
-      <td>
-        <a class="link" href={data.job.jenkins_publish_url}>{data.job.jenkins_publish_url}</a>
-      </td>
-    </tr>
-    <tr>
-      <th>Created</th>
-      <td>{getTimeDateString(data.job.created)}</td>
-    </tr>
-    <tr>
-      <th>Updated</th>
-      <td>{getTimeDateString(data.job.updated)}</td>
-    </tr>
-  </tbody>
-</table>
+<style>
+  .gridcont {
+    grid-template-columns: repeat(auto-fill, minmax(48%, 1fr));
+  }
+  .gridcont div span:first-child {
+    font-family: Montserrat, sans-serif;
+  }
+  .gridcont div span:last-child {
+    text-align: right;
+  }
+</style>

From b73b75d11d4a753e5c2d5bfca3d925e24be1eb77 Mon Sep 17 00:00:00 2001
From: Aidan Jones <aidan_jones@sil.org>
Date: Thu, 13 Aug 2026 14:19:18 -0500
Subject: [PATCH 07/19] Remove unneeded validation/query

---
 src/routes/(ui)/project-admin/update/+page.server.ts | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/routes/(ui)/project-admin/update/+page.server.ts b/src/routes/(ui)/project-admin/update/+page.server.ts
index 2834b664..84eb2d29 100644
--- a/src/routes/(ui)/project-admin/update/+page.server.ts
+++ b/src/routes/(ui)/project-admin/update/+page.server.ts
@@ -21,13 +21,10 @@ const projectSchema = v.object({
     convertEmptyStrToNull(stringLimits.project.url),
     v.nullable(v.pipe(v.string(), v.url()))
   ),
-  user_id: convertEmptyStrToNull(stringLimits.project.user_id),
-  group_id: convertEmptyStrToNull(stringLimits.project.group_id),
   app_id: convertEmptyStrToNull(stringLimits.project.app_id),
   client_id: v.nullable(idSchema),
   project_name: convertEmptyStrToNull(stringLimits.project.project_name),
-  language_code: convertEmptyStrToNull(stringLimits.project.language_code),
-  publishing_key: convertEmptyStrToNull(stringLimits.project.publishing_key)
+  language_code: convertEmptyStrToNull(stringLimits.project.language_code)
 });
 
 export const load = (async ({ url }) => {

From 937d3370f67f8a5900c268f9b0586caeb92317e0 Mon Sep 17 00:00:00 2001
From: Aidan Jones <aidan_jones@sil.org>
Date: Fri, 14 Aug 2026 10:15:21 -0500
Subject: [PATCH 08/19] Tweak display of null client

---
 src/routes/(ui)/job-admin/+page.svelte        |  4 +++-
 src/routes/(ui)/job-admin/update/+page.svelte |  2 +-
 src/routes/(ui)/job-admin/view/+page.svelte   | 22 ++++++++++--------
 src/routes/(ui)/project-admin/+page.svelte    |  4 +++-
 .../(ui)/project-admin/update/+page.svelte    |  2 +-
 .../(ui)/project-admin/view/+page.svelte      | 23 +++++++++++--------
 6 files changed, 33 insertions(+), 24 deletions(-)

diff --git a/src/routes/(ui)/job-admin/+page.svelte b/src/routes/(ui)/job-admin/+page.svelte
index e3b12875..81ea9567 100644
--- a/src/routes/(ui)/job-admin/+page.svelte
+++ b/src/routes/(ui)/job-admin/+page.svelte
@@ -101,11 +101,13 @@
           </h3>
         </div>
         <div class="flex flex-row items-center gap-x-1 pl-1">
+          <IconContainer icon={Icons.User} width={16} />
           {#if job.client}
-            <IconContainer icon={Icons.User} width={16} />
             <a class="link mr-2" href="/client-admin/view?id={job.client.id}">
               {job.client.prefix}
             </a>
+          {:else}
+            <span class="mr-2">(Default)</span>
           {/if}
           {#if job.git_url}
             {@const { icon, title } = getBucketIcon(job.git_url)}
diff --git a/src/routes/(ui)/job-admin/update/+page.svelte b/src/routes/(ui)/job-admin/update/+page.svelte
index 0a23f1a3..a8b6f3c6 100644
--- a/src/routes/(ui)/job-admin/update/+page.svelte
+++ b/src/routes/(ui)/job-admin/update/+page.svelte
@@ -67,7 +67,7 @@
         attr={{ name: 'client_id' }}
       >
         {#snippet extra()}
-          <option value={null}><IconContainer icon={Icons.User} width={20} />Default Client</option>
+          <option value={null}><IconContainer icon={Icons.User} width={20} />(Default)</option>
         {/snippet}
       </SelectWithIcon>
       <span class="validator-hint">&nbsp;</span>
diff --git a/src/routes/(ui)/job-admin/view/+page.svelte b/src/routes/(ui)/job-admin/view/+page.svelte
index b148b692..77a8eb56 100644
--- a/src/routes/(ui)/job-admin/view/+page.svelte
+++ b/src/routes/(ui)/job-admin/view/+page.svelte
@@ -62,19 +62,21 @@ Created <Tooltip tip={getTimeDateString(data.job.created)}>
         {data.job.app_id}
       </span>
     </div>
-    {#if data.job.client}
-      <div class="flex place-content-between">
-        <span>
-          <IconContainer icon={Icons.User} width={20} />
-          Client:
-        </span>
-        <span>
+    <div class="flex place-content-between">
+      <span>
+        <IconContainer icon={Icons.User} width={20} />
+        Client:
+      </span>
+      <span>
+        {#if data.job.client}
           <a class="link" href="/client-admin/view?id={data.job.client.id}">
             {data.job.client.prefix}
           </a>
-        </span>
-      </div>
-    {/if}
+        {:else}
+          <span>(Default)</span>
+        {/if}
+      </span>
+    </div>
     <div class="flex place-content-between">
       <span>
         <IconContainer icon={Icons.Version} width={20} />
diff --git a/src/routes/(ui)/project-admin/+page.svelte b/src/routes/(ui)/project-admin/+page.svelte
index 1134e429..9c2b5b3b 100644
--- a/src/routes/(ui)/project-admin/+page.svelte
+++ b/src/routes/(ui)/project-admin/+page.svelte
@@ -97,11 +97,13 @@
           </h3>
         </div>
         <div class="flex flex-row items-center gap-x-1 pl-1">
+          <IconContainer icon={Icons.User} width={16} />
           {#if project.client}
-            <IconContainer icon={Icons.User} width={16} />
             <a class="link mr-2" href="/client-admin/view?id={project.client.id}">
               {project.client.prefix}
             </a>
+          {:else}
+            <span class="mr-2">(Default)</span>
           {/if}
           {#if project.url}
             {@const { icon, title } = getBucketIcon(project.url)}
diff --git a/src/routes/(ui)/project-admin/update/+page.svelte b/src/routes/(ui)/project-admin/update/+page.svelte
index a9a5a583..6e874603 100644
--- a/src/routes/(ui)/project-admin/update/+page.svelte
+++ b/src/routes/(ui)/project-admin/update/+page.svelte
@@ -73,7 +73,7 @@
         attr={{ name: 'client_id' }}
       >
         {#snippet extra()}
-          <option value={null}><IconContainer icon={Icons.User} width={20} />Default Client</option>
+          <option value={null}><IconContainer icon={Icons.User} width={20} />(Default)</option>
         {/snippet}
       </SelectWithIcon>
       <span class="validator-hint">&nbsp;</span>
diff --git a/src/routes/(ui)/project-admin/view/+page.svelte b/src/routes/(ui)/project-admin/view/+page.svelte
index 8b71eb03..3ff67d9f 100644
--- a/src/routes/(ui)/project-admin/view/+page.svelte
+++ b/src/routes/(ui)/project-admin/view/+page.svelte
@@ -59,19 +59,22 @@ Created <Tooltip tip={getTimeDateString(data.project.created)}>
         {data.project.app_id}
       </span>
     </div>
-    {#if data.project.client}
-      <div class="flex place-content-between">
-        <span>
-          <IconContainer icon={Icons.User} width={20} />
-          Client:
-        </span>
-        <span>
+
+    <div class="flex place-content-between">
+      <span>
+        <IconContainer icon={Icons.User} width={20} />
+        Client:
+      </span>
+      <span>
+        {#if data.project.client}
           <a class="link" href="/client-admin/view?id={data.project.client.id}">
             {data.project.client.prefix}
           </a>
-        </span>
-      </div>
-    {/if}
+        {:else}
+          <span>(Default)</span>
+        {/if}
+      </span>
+    </div>
   </div>
   {#if data.project.url}
     {@const { icon, title } = getBucketIcon(data.project.url)}

From 2777e11fb9a0ef850805263628b514b5ee2916e8 Mon Sep 17 00:00:00 2001
From: Aidan Jones <aidan_jones@sil.org>
Date: Fri, 14 Aug 2026 15:48:30 -0500
Subject: [PATCH 09/19] Remove unneeded update pages

---
 .../(ui)/build-admin/update/+page.server.ts   |  86 ----------
 .../(ui)/build-admin/update/+page.svelte      | 133 ---------------
 src/routes/(ui)/build-admin/view/+page.svelte |   3 -
 .../(ui)/job-admin/update/+page.server.ts     |  69 --------
 src/routes/(ui)/job-admin/update/+page.svelte | 117 -------------
 src/routes/(ui)/job-admin/view/+page.svelte   |   7 +-
 .../(ui)/project-admin/update/+page.server.ts |  80 ---------
 .../(ui)/project-admin/update/+page.svelte    | 139 ----------------
 .../(ui)/project-admin/view/+page.svelte      |   7 +-
 .../(ui)/release-admin/update/+page.server.ts |  88 ----------
 .../(ui)/release-admin/update/+page.svelte    | 157 ------------------
 .../(ui)/release-admin/view/+page.svelte      |   4 -
 12 files changed, 2 insertions(+), 888 deletions(-)
 delete mode 100644 src/routes/(ui)/build-admin/update/+page.server.ts
 delete mode 100644 src/routes/(ui)/build-admin/update/+page.svelte
 delete mode 100644 src/routes/(ui)/job-admin/update/+page.server.ts
 delete mode 100644 src/routes/(ui)/job-admin/update/+page.svelte
 delete mode 100644 src/routes/(ui)/project-admin/update/+page.server.ts
 delete mode 100644 src/routes/(ui)/project-admin/update/+page.svelte
 delete mode 100644 src/routes/(ui)/release-admin/update/+page.server.ts
 delete mode 100644 src/routes/(ui)/release-admin/update/+page.svelte

diff --git a/src/routes/(ui)/build-admin/update/+page.server.ts b/src/routes/(ui)/build-admin/update/+page.server.ts
deleted file mode 100644
index 8d83ea62..00000000
--- a/src/routes/(ui)/build-admin/update/+page.server.ts
+++ /dev/null
@@ -1,86 +0,0 @@
-import { SpanStatusCode, trace } from '@opentelemetry/api';
-import { error, redirect } from '@sveltejs/kit';
-import { fail, superValidate } from 'sveltekit-superforms';
-import { valibot } from 'sveltekit-superforms/adapters';
-import * as v from 'valibot';
-import type { Actions, PageServerLoad } from './$types';
-import { prisma } from '$lib/server/prisma';
-import {
-  convertEmptyStrToNull,
-  idSchema,
-  paramNumber,
-  selectFrom,
-  stringIdSchema,
-  stringLimits
-} from '$lib/valibot';
-
-const buildSchema = v.object({
-  job_id: idSchema,
-  status: v.pipe(convertEmptyStrToNull(stringLimits.build.status)),
-  build_guid: v.pipe(convertEmptyStrToNull(), v.nullable(stringIdSchema)),
-  result: convertEmptyStrToNull(stringLimits.build.result),
-  error: v.pipe(
-    convertEmptyStrToNull(stringLimits.build.error),
-    v.nullable(v.pipe(v.string(), v.url()))
-  ),
-  artifact_url_base: v.pipe(
-    convertEmptyStrToNull(stringLimits.build.artifact_url_base),
-    v.nullable(v.pipe(v.string(), v.url()))
-  ),
-  artifact_files: convertEmptyStrToNull(stringLimits.build.artifact_files),
-  channel: convertEmptyStrToNull(stringLimits.build.channel),
-  version_code: v.nullable(idSchema),
-  targets: convertEmptyStrToNull(stringLimits.build.targets),
-  environment: convertEmptyStrToNull()
-});
-
-export const load = (async ({ url }) => {
-  const id = v.safeParse(v.pipe(paramNumber, idSchema), url.searchParams.get('id'));
-  if (!id.success) {
-    error(400, `missing id param`);
-  }
-
-  const build = await prisma.build.findUnique({
-    where: {
-      id: id.output
-    },
-    select: selectFrom(buildSchema.entries)
-  });
-
-  if (!build) error(404);
-
-  return {
-    form: await superValidate(build, valibot(buildSchema))
-  };
-}) satisfies PageServerLoad;
-
-export const actions: Actions = {
-  default: async function ({ request, url }) {
-    const id = v.safeParse(v.pipe(paramNumber, idSchema), url.searchParams.get('id'));
-    if (!id.success) {
-      error(400, `missing id param`);
-    }
-    const form = await superValidate(request, valibot(buildSchema));
-    if (!form.valid) return fail(400, { form, ok: false });
-
-    let build = { id: 0 };
-
-    try {
-      build = await prisma.build.update({
-        where: {
-          id: id.output
-        },
-        data: form.data
-      });
-    } catch (e) {
-      trace.getActiveSpan()?.recordException(e as Error);
-      trace.getActiveSpan()?.setStatus({
-        code: SpanStatusCode.ERROR,
-        message: (e as Error).message
-      });
-      return error(400, (e as Error).message);
-    }
-
-    redirect(303, `/build-admin/view?id=${build.id}`);
-  }
-};
diff --git a/src/routes/(ui)/build-admin/update/+page.svelte b/src/routes/(ui)/build-admin/update/+page.svelte
deleted file mode 100644
index 312f6981..00000000
--- a/src/routes/(ui)/build-admin/update/+page.svelte
+++ /dev/null
@@ -1,133 +0,0 @@
-<script lang="ts">
-  import { superForm } from 'sveltekit-superforms';
-  import type { PageData } from './$types';
-  import { page } from '$app/state';
-  import Breadcrumbs from '$lib/components/Breadcrumbs.svelte';
-  import LabeledFormInput from '$lib/components/LabeledFormInput.svelte';
-  import { title } from '$lib/stores';
-  import { stringLimits } from '$lib/valibot';
-
-  const id = $derived(page.url.searchParams.get('id')!);
-
-  $effect(() => {
-    $title = 'Update Build: ' + id;
-  });
-
-  interface Props {
-    data: PageData;
-  }
-
-  let { data }: Props = $props();
-
-  const { form, enhance } = superForm(data.form, {
-    dataType: 'json'
-  });
-</script>
-
-<Breadcrumbs>
-  <li><a href="/" class="link">Home</a></li>
-  <li><a href="/build-admin" class="link">Builds</a></li>
-  <li><a href="/build-admin/view?id={id}" class="link">{id}</a></li>
-  <li>Update</li>
-</Breadcrumbs>
-<h1>{$title}</h1>
-
-<form method="POST" use:enhance>
-  <LabeledFormInput label="Job ID">
-    <input
-      class="input input-bordered validator"
-      type="number"
-      bind:value={$form.job_id}
-      required
-    />
-    <span class="validator-hint">&nbsp;</span>
-  </LabeledFormInput>
-  <LabeledFormInput label="Status">
-    <input
-      class="input input-bordered validator"
-      type="text"
-      bind:value={$form.status}
-      maxlength={stringLimits.build.status}
-    />
-    <span class="validator-hint">&nbsp;</span>
-  </LabeledFormInput>
-  <LabeledFormInput label="Build GUID">
-    <input
-      class="input input-bordered validator"
-      type="text"
-      bind:value={$form.build_guid}
-      maxlength={stringLimits.build.build_guid}
-    />
-    <span class="validator-hint">&nbsp;</span>
-  </LabeledFormInput>
-  <LabeledFormInput label="Result">
-    <input
-      class="input input-bordered validator"
-      type="text"
-      bind:value={$form.result}
-      maxlength={stringLimits.build.result}
-    />
-    <span class="validator-hint">&nbsp;</span>
-  </LabeledFormInput>
-  <LabeledFormInput label="Error">
-    <input
-      class="input input-bordered validator"
-      type="url"
-      bind:value={$form.error}
-      maxlength={stringLimits.build.error}
-    />
-    <span class="validator-hint">&nbsp;</span>
-  </LabeledFormInput>
-  <LabeledFormInput label="Artifact URL Base">
-    <input
-      class="input input-bordered validator"
-      type="url"
-      bind:value={$form.artifact_url_base}
-      required
-      maxlength={stringLimits.build.artifact_url_base}
-    />
-    <span class="validator-hint">&nbsp;</span>
-  </LabeledFormInput>
-  <LabeledFormInput label="Artifact Files">
-    <textarea
-      class="textarea input-bordered validator"
-      bind:value={$form.artifact_files}
-      maxlength={stringLimits.build.artifact_files}
-    ></textarea>
-    <span class="validator-hint">&nbsp;</span>
-  </LabeledFormInput>
-  <LabeledFormInput label="Channel">
-    <input
-      class="input input-bordered validator"
-      type="text"
-      bind:value={$form.channel}
-      maxlength={stringLimits.build.channel}
-    />
-    <span class="validator-hint">&nbsp;</span>
-  </LabeledFormInput>
-  <LabeledFormInput label="Version Code">
-    <input class="input input-bordered validator" type="number" bind:value={$form.version_code} />
-    <span class="validator-hint">&nbsp;</span>
-  </LabeledFormInput>
-  <LabeledFormInput label="Targets">
-    <input
-      class="input input-bordered validator"
-      type="text"
-      bind:value={$form.targets}
-      maxlength={stringLimits.build.targets}
-    />
-    <span class="validator-hint">&nbsp;</span>
-  </LabeledFormInput>
-  <LabeledFormInput label="Environment">
-    <textarea class="textarea input-bordered validator" bind:value={$form.environment}></textarea>
-    <span class="validator-hint">&nbsp;</span>
-  </LabeledFormInput>
-  <input type="submit" class="btn btn-success" value="Update" />
-</form>
-
-<style>
-  .input,
-  .textarea {
-    width: 100%;
-  }
-</style>
diff --git a/src/routes/(ui)/build-admin/view/+page.svelte b/src/routes/(ui)/build-admin/view/+page.svelte
index 8e77dc71..603f2925 100644
--- a/src/routes/(ui)/build-admin/view/+page.svelte
+++ b/src/routes/(ui)/build-admin/view/+page.svelte
@@ -22,9 +22,6 @@
 
 <h1>{$title}</h1>
 
-<div class="flex flex-row space-x-2 mb-2">
-  <a href="/build-admin/update?id={data.build.id}" class="btn btn-primary">Update</a>
-</div>
 
 <table class="table table-zebra border">
   <tbody>
diff --git a/src/routes/(ui)/job-admin/update/+page.server.ts b/src/routes/(ui)/job-admin/update/+page.server.ts
deleted file mode 100644
index 9d4f2151..00000000
--- a/src/routes/(ui)/job-admin/update/+page.server.ts
+++ /dev/null
@@ -1,69 +0,0 @@
-import { SpanStatusCode, trace } from '@opentelemetry/api';
-import { error, redirect } from '@sveltejs/kit';
-import { fail, superValidate } from 'sveltekit-superforms';
-import { valibot } from 'sveltekit-superforms/adapters';
-import * as v from 'valibot';
-import type { Actions, PageServerLoad } from './$types';
-import { prisma } from '$lib/server/prisma';
-import { idSchema, paramNumber, selectFrom, stringIdSchema, stringLimits } from '$lib/valibot';
-
-const jobSchema = v.strictObject({
-  request_id: stringIdSchema,
-  git_url: v.pipe(v.string(), v.url(), v.maxBytes(stringLimits.job.git_url)),
-  app_id: v.pipe(v.string(), v.maxBytes(stringLimits.job.app_id)),
-  publisher_id: v.pipe(v.string(), v.maxBytes(stringLimits.job.publisher_id)),
-  client_id: v.nullable(idSchema),
-  existing_version_code: v.nullable(idSchema)
-});
-
-export const load = (async ({ url }) => {
-  const id = v.safeParse(v.pipe(paramNumber, idSchema), url.searchParams.get('id'));
-  if (!id.success) {
-    error(400, `missing id param`);
-  }
-
-  const job = await prisma.job.findUnique({
-    where: {
-      id: id.output
-    },
-    select: selectFrom(jobSchema.entries)
-  });
-
-  if (!job) error(404);
-
-  return {
-    form: await superValidate(job, valibot(jobSchema)),
-    clients: await prisma.client.findMany({ select: { id: true, prefix: true } })
-  };
-}) satisfies PageServerLoad;
-
-export const actions: Actions = {
-  default: async function ({ request, url }) {
-    const id = v.safeParse(v.pipe(paramNumber, idSchema), url.searchParams.get('id'));
-    if (!id.success) {
-      error(400, `missing id param`);
-    }
-    const form = await superValidate(request, valibot(jobSchema));
-    if (!form.valid) return fail(400, { form, ok: false });
-
-    let job = { id: 0 };
-
-    try {
-      job = await prisma.job.update({
-        where: {
-          id: id.output
-        },
-        data: form.data
-      });
-    } catch (e) {
-      trace.getActiveSpan()?.recordException(e as Error);
-      trace.getActiveSpan()?.setStatus({
-        code: SpanStatusCode.ERROR,
-        message: (e as Error).message
-      });
-      return error(400, (e as Error).message);
-    }
-
-    redirect(303, `/job-admin/view?id=${job.id}`);
-  }
-};
diff --git a/src/routes/(ui)/job-admin/update/+page.svelte b/src/routes/(ui)/job-admin/update/+page.svelte
deleted file mode 100644
index a8b6f3c6..00000000
--- a/src/routes/(ui)/job-admin/update/+page.svelte
+++ /dev/null
@@ -1,117 +0,0 @@
-<script lang="ts">
-  import { superForm } from 'sveltekit-superforms';
-  import type { PageData } from './$types';
-  import { page } from '$app/state';
-  import AppTypeSelector from '$lib/components/AppTypeSelector.svelte';
-  import Breadcrumbs from '$lib/components/Breadcrumbs.svelte';
-  import CancelButton from '$lib/components/CancelButton.svelte';
-  import LabeledFormInput from '$lib/components/LabeledFormInput.svelte';
-  import SelectWithIcon from '$lib/components/SelectWithIcon.svelte';
-  import SubmitButton from '$lib/components/SubmitButton.svelte';
-  import { Icons, getBucketIcon } from '$lib/icons';
-  import IconContainer from '$lib/icons/IconContainer.svelte';
-  import { title } from '$lib/stores';
-  import { stringLimits } from '$lib/valibot';
-
-  const id = $derived(page.url.searchParams.get('id')!);
-
-  $effect(() => {
-    $title = 'Edit Job';
-  });
-
-  interface Props {
-    data: PageData;
-  }
-
-  let { data }: Props = $props();
-
-  const { form, enhance } = superForm(data.form, {
-    dataType: 'json'
-  });
-</script>
-
-<Breadcrumbs>
-  <li><a href="/" class="link">Home</a></li>
-  <li><a href="/job-admin" class="link">Jobs</a></li>
-  <li><a href="/job-admin/view?id={id}" class="link">{id}</a></li>
-  <li>Update</li>
-</Breadcrumbs>
-<h1>{$title}</h1>
-
-<form method="POST" use:enhance>
-  <LabeledFormInput
-    label="Request ID"
-    input={{ maxlength: stringLimits.job.request_id, icon: Icons.Product }}
-    bind:value={$form.request_id}
-  />
-  <LabeledFormInput
-    label={getBucketIcon($form.git_url).title}
-    input={{
-      maxlength: stringLimits.job.git_url,
-      type: 'url',
-      icon: getBucketIcon($form.git_url).icon
-    }}
-    bind:value={$form.git_url}
-  />
-  <div class="input-fields">
-    <LabeledFormInput label="App ID" class="md:w-1/2">
-      <AppTypeSelector bind:value={$form.app_id} />
-      <span class="validator-hint">&nbsp;</span>
-    </LabeledFormInput>
-    <LabeledFormInput label="Client" class="md:w-1/2">
-      <SelectWithIcon
-        bind:value={$form.client_id}
-        icon={Icons.User}
-        items={data.clients.map((c) => ({ id: c.id, name: c.prefix }))}
-        class="validator w-full"
-        attr={{ name: 'client_id' }}
-      >
-        {#snippet extra()}
-          <option value={null}><IconContainer icon={Icons.User} width={20} />(Default)</option>
-        {/snippet}
-      </SelectWithIcon>
-      <span class="validator-hint">&nbsp;</span>
-    </LabeledFormInput>
-    <LabeledFormInput
-      label="Publisher ID"
-      class="md:w-1/2"
-      input={{ maxlength: stringLimits.job.publisher_id, icon: Icons.Store }}
-      bind:value={$form.publisher_id}
-    />
-    <LabeledFormInput
-      label="Existing Version Code"
-      class="md:w-1/2"
-      input={{ type: 'number', icon: Icons.Version }}
-      bind:value={$form.existing_version_code}
-    />
-  </div>
-  <div class="my-4">
-    <CancelButton returnTo="/job-admin/view?id={id}" />
-    <SubmitButton />
-  </div>
-</form>
-
-<style>
-  .input-fields {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-  }
-
-  @media (width >= 48rem /* 768px */) {
-    .input-fields {
-      flex-wrap: wrap;
-      flex-direction: row;
-    }
-    .input-fields :global(label):nth-child(odd) {
-      padding-right: calc(var(--spacing) * 1);
-    }
-    .input-fields :global(label):nth-child(even) {
-      padding-left: calc(var(--spacing) * 1);
-    }
-    .input-fields :global(label):nth-child(odd):last-child {
-      padding-right: 0px;
-      width: 100%;
-    }
-  }
-</style>
diff --git a/src/routes/(ui)/job-admin/view/+page.svelte b/src/routes/(ui)/job-admin/view/+page.svelte
index 77a8eb56..6480b64d 100644
--- a/src/routes/(ui)/job-admin/view/+page.svelte
+++ b/src/routes/(ui)/job-admin/view/+page.svelte
@@ -38,13 +38,8 @@
 Created <Tooltip tip={getTimeDateString(data.job.created)}>
   {$dateCreated}
 </Tooltip>
-<div class="flex flex-row space-x-2 my-2">
-  <a href="/job-admin/update?id={data.job.id}" class="btn btn-secondary">
-    <IconContainer icon={Icons.Edit} width={20} />Edit Job
-  </a>
-</div>
 
-<div class="border p-2 rounded-md bg-base-200">
+<div class="border p-2 rounded-md bg-base-200 mt-2">
   <div class="gridcont grid gap-x-6 gap-y-2 mb-2">
     <div class="flex place-content-between">
       <span>
diff --git a/src/routes/(ui)/project-admin/update/+page.server.ts b/src/routes/(ui)/project-admin/update/+page.server.ts
deleted file mode 100644
index 84eb2d29..00000000
--- a/src/routes/(ui)/project-admin/update/+page.server.ts
+++ /dev/null
@@ -1,80 +0,0 @@
-import { SpanStatusCode, trace } from '@opentelemetry/api';
-import { error, redirect } from '@sveltejs/kit';
-import { fail, superValidate } from 'sveltekit-superforms';
-import { valibot } from 'sveltekit-superforms/adapters';
-import * as v from 'valibot';
-import type { Actions, PageServerLoad } from './$types';
-import { prisma } from '$lib/server/prisma';
-import {
-  convertEmptyStrToNull,
-  idSchema,
-  paramNumber,
-  selectFrom,
-  stringLimits
-} from '$lib/valibot';
-
-const projectSchema = v.object({
-  status: convertEmptyStrToNull(stringLimits.project.status),
-  result: convertEmptyStrToNull(stringLimits.project.result),
-  error: convertEmptyStrToNull(stringLimits.project.error),
-  url: v.pipe(
-    convertEmptyStrToNull(stringLimits.project.url),
-    v.nullable(v.pipe(v.string(), v.url()))
-  ),
-  app_id: convertEmptyStrToNull(stringLimits.project.app_id),
-  client_id: v.nullable(idSchema),
-  project_name: convertEmptyStrToNull(stringLimits.project.project_name),
-  language_code: convertEmptyStrToNull(stringLimits.project.language_code)
-});
-
-export const load = (async ({ url }) => {
-  const id = v.safeParse(v.pipe(paramNumber, idSchema), url.searchParams.get('id'));
-  if (!id.success) {
-    error(400, `missing id param`);
-  }
-
-  const project = await prisma.project.findUnique({
-    where: {
-      id: id.output
-    },
-    select: selectFrom(projectSchema.entries)
-  });
-
-  if (!project) error(404);
-
-  return {
-    form: await superValidate(project, valibot(projectSchema)),
-    clients: await prisma.client.findMany({ select: { id: true, prefix: true } })
-  };
-}) satisfies PageServerLoad;
-
-export const actions: Actions = {
-  default: async function ({ request, url }) {
-    const id = v.safeParse(v.pipe(paramNumber, idSchema), url.searchParams.get('id'));
-    if (!id.success) {
-      error(400, `missing id param`);
-    }
-    const form = await superValidate(request, valibot(projectSchema));
-    if (!form.valid) return fail(400, { form, ok: false });
-
-    let project = { id: 0 };
-
-    try {
-      project = await prisma.project.update({
-        where: {
-          id: id.output
-        },
-        data: form.data
-      });
-    } catch (e) {
-      trace.getActiveSpan()?.recordException(e as Error);
-      trace.getActiveSpan()?.setStatus({
-        code: SpanStatusCode.ERROR,
-        message: (e as Error).message
-      });
-      return error(400, (e as Error).message);
-    }
-
-    redirect(303, `/project-admin/view?id=${project.id}`);
-  }
-};
diff --git a/src/routes/(ui)/project-admin/update/+page.svelte b/src/routes/(ui)/project-admin/update/+page.svelte
deleted file mode 100644
index 6e874603..00000000
--- a/src/routes/(ui)/project-admin/update/+page.svelte
+++ /dev/null
@@ -1,139 +0,0 @@
-<script lang="ts">
-  import { superForm } from 'sveltekit-superforms';
-  import type { PageData } from './$types';
-  import { page } from '$app/state';
-  import AppTypeSelector from '$lib/components/AppTypeSelector.svelte';
-  import Breadcrumbs from '$lib/components/Breadcrumbs.svelte';
-  import CancelButton from '$lib/components/CancelButton.svelte';
-  import LabeledFormInput from '$lib/components/LabeledFormInput.svelte';
-  import SelectWithIcon from '$lib/components/SelectWithIcon.svelte';
-  import SubmitButton from '$lib/components/SubmitButton.svelte';
-  import { Icons, getBucketIcon, getStatusIcon } from '$lib/icons';
-  import IconContainer from '$lib/icons/IconContainer.svelte';
-  import { title } from '$lib/stores';
-  import { stringLimits } from '$lib/valibot';
-
-  const id = $derived(page.url.searchParams.get('id')!);
-
-  $effect(() => {
-    $title = 'Edit Project';
-  });
-
-  interface Props {
-    data: PageData;
-  }
-
-  let { data }: Props = $props();
-
-  const { form, enhance } = superForm(data.form, {
-    dataType: 'json'
-  });
-</script>
-
-<Breadcrumbs>
-  <li><a href="/" class="link">Home</a></li>
-  <li><a href="/project-admin" class="link">Projects</a></li>
-  <li><a href="/project-admin/view?id={id}" class="link">{id}</a></li>
-  <li>Update</li>
-</Breadcrumbs>
-<h1>{$title}</h1>
-
-<form method="POST" use:enhance>
-  <div class="input-fields">
-    <LabeledFormInput
-      label="Status"
-      class="md:w-1/2"
-      input={{
-        maxlength: stringLimits.project.status,
-        icon: getStatusIcon($form.status).icon,
-        iconClass: [getStatusIcon($form.status).color]
-      }}
-      bind:value={$form.status}
-    />
-    <LabeledFormInput
-      label="Result"
-      class="md:w-1/2"
-      input={{
-        maxlength: stringLimits.project.result,
-        icon: getStatusIcon($form.result).icon,
-        iconClass: [getStatusIcon($form.result).color]
-      }}
-      bind:value={$form.result}
-    />
-    <LabeledFormInput label="App ID" class="md:w-1/2">
-      <AppTypeSelector bind:value={$form.app_id} />
-      <span class="validator-hint">&nbsp;</span>
-    </LabeledFormInput>
-    <LabeledFormInput label="Client" class="md:w-1/2">
-      <SelectWithIcon
-        bind:value={$form.client_id}
-        icon={Icons.User}
-        items={data.clients.map((c) => ({ id: c.id, name: c.prefix }))}
-        class="validator w-full"
-        attr={{ name: 'client_id' }}
-      >
-        {#snippet extra()}
-          <option value={null}><IconContainer icon={Icons.User} width={20} />(Default)</option>
-        {/snippet}
-      </SelectWithIcon>
-      <span class="validator-hint">&nbsp;</span>
-    </LabeledFormInput>
-    <LabeledFormInput
-      label="Project Name"
-      class="md:w-1/2"
-      input={{ maxlength: stringLimits.project.project_name, icon: Icons.Edit }}
-      bind:value={$form.project_name}
-    />
-    <LabeledFormInput
-      label="Language Code"
-      class="md:w-1/2"
-      input={{ maxlength: stringLimits.project.language_code, icon: Icons.Language }}
-      bind:value={$form.language_code}
-    />
-  </div>
-  <LabeledFormInput
-    label={getBucketIcon($form.url).title}
-    input={{
-      maxlength: stringLimits.project.url,
-      type: 'url',
-      icon: getBucketIcon($form.url).icon
-    }}
-    bind:value={$form.url}
-  />
-  <LabeledFormInput label="Error">
-    <textarea
-      class="textarea w-full min-h-36"
-      bind:value={$form.error}
-      maxlength={stringLimits.project.error}
-    ></textarea>
-  </LabeledFormInput>
-  <div class="my-4">
-    <CancelButton returnTo="/project-admin/view?id={id}" />
-    <SubmitButton />
-  </div>
-</form>
-
-<style>
-  .input-fields {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-  }
-
-  @media (width >= 48rem /* 768px */) {
-    .input-fields {
-      flex-wrap: wrap;
-      flex-direction: row;
-    }
-    .input-fields :global(label):nth-child(odd) {
-      padding-right: calc(var(--spacing) * 1);
-    }
-    .input-fields :global(label):nth-child(even) {
-      padding-left: calc(var(--spacing) * 1);
-    }
-    .input-fields :global(label):nth-child(odd):last-child {
-      padding-right: 0px;
-      width: 100%;
-    }
-  }
-</style>
diff --git a/src/routes/(ui)/project-admin/view/+page.svelte b/src/routes/(ui)/project-admin/view/+page.svelte
index 3ff67d9f..84e07f30 100644
--- a/src/routes/(ui)/project-admin/view/+page.svelte
+++ b/src/routes/(ui)/project-admin/view/+page.svelte
@@ -35,13 +35,8 @@
 Created <Tooltip tip={getTimeDateString(data.project.created)}>
   {$dateCreated}
 </Tooltip>
-<div class="flex flex-row space-x-2 my-2">
-  <a href="/project-admin/update?id={data.project.id}" class="btn btn-secondary">
-    <IconContainer icon={Icons.Edit} width={20} />Edit Project
-  </a>
-</div>
 
-<div class="border p-2 rounded-md bg-base-200">
+<div class="border p-2 rounded-md bg-base-200 mt-2">
   <div class="gridcont grid gap-x-6 gap-y-2 mb-2">
     <div class="flex place-content-between">
       <span>
diff --git a/src/routes/(ui)/release-admin/update/+page.server.ts b/src/routes/(ui)/release-admin/update/+page.server.ts
deleted file mode 100644
index b1197764..00000000
--- a/src/routes/(ui)/release-admin/update/+page.server.ts
+++ /dev/null
@@ -1,88 +0,0 @@
-import { SpanStatusCode, trace } from '@opentelemetry/api';
-import { error, redirect } from '@sveltejs/kit';
-import { fail, superValidate } from 'sveltekit-superforms';
-import { valibot } from 'sveltekit-superforms/adapters';
-import * as v from 'valibot';
-import type { Actions, PageServerLoad } from './$types';
-import { prisma } from '$lib/server/prisma';
-import {
-  convertEmptyStrToNull,
-  idSchema,
-  paramNumber,
-  selectFrom,
-  stringIdSchema,
-  stringLimits
-} from '$lib/valibot';
-
-const releaseSchema = v.object({
-  build_id: idSchema,
-  status: convertEmptyStrToNull(stringLimits.release.status),
-  result: convertEmptyStrToNull(stringLimits.release.result),
-  error: v.pipe(
-    convertEmptyStrToNull(stringLimits.release.error),
-    v.nullable(v.pipe(v.string(), v.url()))
-  ),
-  channel: v.pipe(v.string(), v.maxBytes(stringLimits.release.channel)),
-  title: convertEmptyStrToNull(stringLimits.release.title),
-  defaultLanguage: convertEmptyStrToNull(stringLimits.release.defaultLanguage),
-  build_guid: v.pipe(convertEmptyStrToNull(), v.nullable(stringIdSchema)),
-  promote_from: convertEmptyStrToNull(stringLimits.release.promote_from),
-  targets: convertEmptyStrToNull(stringLimits.release.targets),
-  environment: convertEmptyStrToNull(),
-  artifact_url_base: v.pipe(
-    convertEmptyStrToNull(stringLimits.release.artifact_url_base),
-    v.nullable(v.pipe(v.string(), v.url()))
-  ),
-  artifact_files: convertEmptyStrToNull(stringLimits.release.artifact_files)
-});
-
-export const load = (async ({ url }) => {
-  const id = v.safeParse(v.pipe(paramNumber, idSchema), url.searchParams.get('id'));
-  if (!id.success) {
-    error(400, `missing id param`);
-  }
-
-  const release = await prisma.release.findUnique({
-    where: {
-      id: id.output
-    },
-    select: selectFrom(releaseSchema.entries)
-  });
-
-  if (!release) error(404);
-
-  return {
-    form: await superValidate(release, valibot(releaseSchema))
-  };
-}) satisfies PageServerLoad;
-
-export const actions: Actions = {
-  default: async function ({ request, url }) {
-    const id = v.safeParse(v.pipe(paramNumber, idSchema), url.searchParams.get('id'));
-    if (!id.success) {
-      error(400, `missing id param`);
-    }
-    const form = await superValidate(request, valibot(releaseSchema));
-    if (!form.valid) return fail(400, { form, ok: false });
-
-    let release = { id: 0 };
-
-    try {
-      release = await prisma.release.update({
-        where: {
-          id: id.output
-        },
-        data: form.data
-      });
-    } catch (e) {
-      trace.getActiveSpan()?.recordException(e as Error);
-      trace.getActiveSpan()?.setStatus({
-        code: SpanStatusCode.ERROR,
-        message: (e as Error).message
-      });
-      return error(400, (e as Error).message);
-    }
-
-    redirect(303, `/release-admin/view?id=${release.id}`);
-  }
-};
diff --git a/src/routes/(ui)/release-admin/update/+page.svelte b/src/routes/(ui)/release-admin/update/+page.svelte
deleted file mode 100644
index 02a014b5..00000000
--- a/src/routes/(ui)/release-admin/update/+page.svelte
+++ /dev/null
@@ -1,157 +0,0 @@
-<script lang="ts">
-  import { superForm } from 'sveltekit-superforms';
-  import type { PageData } from './$types';
-  import { page } from '$app/state';
-  import Breadcrumbs from '$lib/components/Breadcrumbs.svelte';
-  import LabeledFormInput from '$lib/components/LabeledFormInput.svelte';
-  import { title } from '$lib/stores';
-  import { stringLimits } from '$lib/valibot';
-
-  const id = $derived(page.url.searchParams.get('id')!);
-
-  $effect(() => {
-    $title = 'Update Release: ' + id;
-  });
-
-  interface Props {
-    data: PageData;
-  }
-
-  let { data }: Props = $props();
-
-  const { form, enhance } = superForm(data.form, {
-    dataType: 'json'
-  });
-</script>
-
-<Breadcrumbs>
-  <li><a href="/" class="link">Home</a></li>
-  <li><a href="/release-admin" class="link">Releases</a></li>
-  <li><a href="/release-admin/view?id={id}" class="link">{id}</a></li>
-  <li>Update</li>
-</Breadcrumbs>
-<h1>{$title}</h1>
-
-<form method="POST" use:enhance>
-  <LabeledFormInput label="Build ID">
-    <input
-      class="input input-bordered validator"
-      type="number"
-      bind:value={$form.build_id}
-      required
-    />
-    <span class="validator-hint">&nbsp;</span>
-  </LabeledFormInput>
-  <LabeledFormInput label="Status">
-    <input
-      class="input input-bordered validator"
-      type="text"
-      bind:value={$form.status}
-      maxlength={stringLimits.release.status}
-    />
-    <span class="validator-hint">&nbsp;</span>
-  </LabeledFormInput>
-  <LabeledFormInput label="Result">
-    <input
-      class="input input-bordered validator"
-      type="text"
-      bind:value={$form.result}
-      maxlength={stringLimits.release.result}
-    />
-    <span class="validator-hint">&nbsp;</span>
-  </LabeledFormInput>
-  <LabeledFormInput label="Error">
-    <input
-      class="input input-bordered validator"
-      type="url"
-      bind:value={$form.error}
-      maxlength={stringLimits.release.error}
-    />
-    <span class="validator-hint">&nbsp;</span>
-  </LabeledFormInput>
-  <LabeledFormInput label="Channel">
-    <input
-      class="input input-bordered validator"
-      type="text"
-      bind:value={$form.channel}
-      required
-      maxlength={stringLimits.release.channel}
-    />
-    <span class="validator-hint">&nbsp;</span>
-  </LabeledFormInput>
-  <LabeledFormInput label="Title">
-    <input
-      class="input input-bordered validator"
-      type="text"
-      bind:value={$form.title}
-      maxlength={stringLimits.release.title}
-    />
-    <span class="validator-hint">&nbsp;</span>
-  </LabeledFormInput>
-  <LabeledFormInput label="Default Language">
-    <input
-      class="input input-bordered validator"
-      type="text"
-      bind:value={$form.defaultLanguage}
-      maxlength={stringLimits.release.defaultLanguage}
-    />
-    <span class="validator-hint">&nbsp;</span>
-  </LabeledFormInput>
-  <LabeledFormInput label="Build GUID">
-    <input
-      class="input input-bordered validator"
-      type="text"
-      bind:value={$form.build_guid}
-      maxlength={stringLimits.release.build_guid}
-    />
-    <span class="validator-hint">&nbsp;</span>
-  </LabeledFormInput>
-  <LabeledFormInput label="Promote From">
-    <input
-      class="input input-bordered validator"
-      type="text"
-      bind:value={$form.promote_from}
-      maxlength={stringLimits.release.promote_from}
-    />
-    <span class="validator-hint">&nbsp;</span>
-  </LabeledFormInput>
-  <LabeledFormInput label="Targets">
-    <input
-      class="input input-bordered validator"
-      type="text"
-      bind:value={$form.targets}
-      maxlength={stringLimits.release.targets}
-    />
-    <span class="validator-hint">&nbsp;</span>
-  </LabeledFormInput>
-  <LabeledFormInput label="Environment">
-    <textarea class="textarea input-bordered validator" bind:value={$form.environment}></textarea>
-    <span class="validator-hint">&nbsp;</span>
-  </LabeledFormInput>
-  <LabeledFormInput label="Artifact URL Base">
-    <input
-      class="input input-bordered validator"
-      type="url"
-      bind:value={$form.artifact_url_base}
-      required
-      maxlength={stringLimits.release.artifact_url_base}
-    />
-    <span class="validator-hint">&nbsp;</span>
-  </LabeledFormInput>
-  <LabeledFormInput label="Artifact Files">
-    <textarea
-      class="textarea input-bordered validator"
-      bind:value={$form.artifact_files}
-      maxlength={stringLimits.release.artifact_files}
-    ></textarea>
-    <span class="validator-hint">&nbsp;</span>
-  </LabeledFormInput>
-  <input type="submit" class="btn btn-success" value="Update" />
-</form>
-
-<style>
-  .input,
-  .textarea {
-    width: 100%;
-  }
-</style>
diff --git a/src/routes/(ui)/release-admin/view/+page.svelte b/src/routes/(ui)/release-admin/view/+page.svelte
index d08efb44..d5d266ca 100644
--- a/src/routes/(ui)/release-admin/view/+page.svelte
+++ b/src/routes/(ui)/release-admin/view/+page.svelte
@@ -22,10 +22,6 @@
 
 <h1>{$title}</h1>
 
-<div class="flex flex-row space-x-2 mb-2">
-  <a href="/release-admin/update?id={data.release.id}" class="btn btn-primary">Update</a>
-</div>
-
 <table class="table table-zebra border">
   <tbody>
     <tr>

From 044d5e079eebb553a00ca9cab23c4f8eb3f547c2 Mon Sep 17 00:00:00 2001
From: Aidan Jones <aidan_jones@sil.org>
Date: Fri, 14 Aug 2026 15:54:37 -0500
Subject: [PATCH 10/19] Remove unneeded code

---
 src/lib/components/SelectWithIcon.svelte      | 46 -------------------
 src/lib/valibot.ts                            | 18 --------
 .../(ui)/client-admin/update/+page.server.ts  |  7 ++-
 3 files changed, 5 insertions(+), 66 deletions(-)
 delete mode 100644 src/lib/components/SelectWithIcon.svelte

diff --git a/src/lib/components/SelectWithIcon.svelte b/src/lib/components/SelectWithIcon.svelte
deleted file mode 100644
index e1ffaf04..00000000
--- a/src/lib/components/SelectWithIcon.svelte
+++ /dev/null
@@ -1,46 +0,0 @@
-<script lang="ts" generics="N extends string | null">
-  import type { Snippet } from 'svelte';
-  import type { ClassValue, HTMLOptionAttributes, HTMLSelectAttributes } from 'svelte/elements';
-  import type { IconType } from '$lib/icons';
-  import IconContainer from '$lib/icons/IconContainer.svelte';
-  import { byName } from '$lib/utils/sorting';
-
-  interface Props {
-    class?: ClassValue;
-    items: {
-      id: number;
-      name: N;
-      icon?: IconType;
-      attr?: HTMLOptionAttributes;
-    }[];
-    value: number | null;
-    extra?: Snippet;
-    attr?: HTMLSelectAttributes;
-    icon?: IconType;
-  }
-
-  let { class: classes, items, value = $bindable(), extra, attr = {}, icon = '' }: Props = $props();
-
-  const current = $derived(items.find((item) => item.id === value));
-</script>
-
-<div class={['select gap-4', classes]}>
-  {#if current}
-    <IconContainer icon={current.icon || icon} width={20} class="absolute left-0 px-2 opacity-80" />
-  {/if}
-  <select {...attr} bind:value class:spacing={current}>
-    {@render extra?.()}
-    {#each items.toSorted((a, b) => byName(a, b)) as item}
-      <option {...item.attr} value={item.id}>
-        <IconContainer icon={item.icon || icon} width={20} class="opacity-80" />
-        {item.name}
-      </option>
-    {/each}
-  </select>
-</div>
-
-<style>
-  .spacing {
-    padding-inline-start: calc((0.25rem * 3) + 20px) !important;
-  }
-</style>
diff --git a/src/lib/valibot.ts b/src/lib/valibot.ts
index 0ad75a5d..f823118b 100644
--- a/src/lib/valibot.ts
+++ b/src/lib/valibot.ts
@@ -8,18 +8,6 @@ export const paramNumber = v.pipe(
   v.transform((s) => parseInt(s))
 );
 
-export function convertEmptyStrToNull(limit?: number) {
-  return v.nullable(
-    v.union([
-      v.pipe(
-        v.literal(''),
-        v.transform(() => null)
-      ),
-      limit ? v.pipe(v.string(), v.maxBytes(limit)) : v.string()
-    ])
-  );
-}
-
 /** mostly for product IDs */
 export const stringIdSchema = v.pipe(v.string(), v.uuid());
 
@@ -28,12 +16,6 @@ export const paginateSchema = v.object({
   size: idSchema
 });
 
-export function selectFrom<T extends Record<string, unknown>>(entries: T) {
-  return Object.fromEntries(Object.keys(entries).map((k) => [k, true])) as {
-    [Property in keyof T]: true;
-  };
-}
-
 export const tableSchema = v.object({
   search: v.string(),
   page: paginateSchema,
diff --git a/src/routes/(ui)/client-admin/update/+page.server.ts b/src/routes/(ui)/client-admin/update/+page.server.ts
index d17a65ef..83880fc2 100644
--- a/src/routes/(ui)/client-admin/update/+page.server.ts
+++ b/src/routes/(ui)/client-admin/update/+page.server.ts
@@ -5,7 +5,7 @@ import * as v from 'valibot';
 import { clientSchema } from '../valibot';
 import type { Actions, PageServerLoad } from './$types';
 import { prisma } from '$lib/server/prisma';
-import { idSchema, paramNumber, selectFrom } from '$lib/valibot';
+import { idSchema, paramNumber } from '$lib/valibot';
 
 export const load = (async ({ url }) => {
   const id = v.safeParse(v.pipe(paramNumber, idSchema), url.searchParams.get('id'));
@@ -17,7 +17,10 @@ export const load = (async ({ url }) => {
     where: {
       id: id.output
     },
-    select: selectFrom(clientSchema.entries)
+    select: {
+      prefix: true,
+      access_token: true
+    }
   });
 
   if (!client) error(404);

From 85191df5e7c05d50635835dae2ec74b53d578718 Mon Sep 17 00:00:00 2001
From: Aidan Jones <aidan_jones@sil.org>
Date: Fri, 14 Aug 2026 15:59:24 -0500
Subject: [PATCH 11/19] Improve build view

---
 src/lib/icons/index.ts                        |   2 +
 src/lib/valibot.ts                            |  10 +
 src/routes/(ui)/build-admin/+page.svelte      |  16 +-
 src/routes/(ui)/build-admin/view/+page.svelte | 213 ++++++++++++------
 src/routes/(ui)/job-admin/view/+page.svelte   |   2 +-
 .../(ui)/project-admin/view/+page.svelte      |   2 +-
 6 files changed, 162 insertions(+), 83 deletions(-)

diff --git a/src/lib/icons/index.ts b/src/lib/icons/index.ts
index b1c4ca46..64b5da70 100644
--- a/src/lib/icons/index.ts
+++ b/src/lib/icons/index.ts
@@ -53,6 +53,8 @@ export const Icons = {
   Dashboard: 'clarity:dashboard-line',
   Delete: 'mdi:trash',
   Edit: 'mdi:pencil',
+  Environment: 'mdi:console',
+  File: 'mdi:file',
   Hamburger: 'mdi:hamburger-menu',
   Invisible: 'mdi:eye-off-outline',
   Key: 'material-symbols:key',
diff --git a/src/lib/valibot.ts b/src/lib/valibot.ts
index f823118b..46b04544 100644
--- a/src/lib/valibot.ts
+++ b/src/lib/valibot.ts
@@ -1,5 +1,6 @@
 import * as v from 'valibot';
 import { type Logger, defaultLogger } from './utils';
+import { byString } from './utils/sorting';
 
 export const idSchema = v.pipe(v.number(), v.minValue(0), v.integer());
 
@@ -27,6 +28,15 @@ export const tableSchema = v.object({
   )
 });
 
+export const JSON2Entries = v.nullable(
+  v.pipe(
+    v.string(),
+    v.parseJson(),
+    v.looseObject({}),
+    v.transform((o) => Object.entries(o).sort(([a, _1], [b, _2]) => byString(a, b)))
+  )
+);
+
 export const stringLimits = {
   build: {
     status: 255,
diff --git a/src/routes/(ui)/build-admin/+page.svelte b/src/routes/(ui)/build-admin/+page.svelte
index 5a28323a..76b5734e 100644
--- a/src/routes/(ui)/build-admin/+page.svelte
+++ b/src/routes/(ui)/build-admin/+page.svelte
@@ -83,21 +83,25 @@
     {#each builds as build}
       <div class="border rounded-md p-2 flex flex-col gap-1">
         <div class="flex flex-row">
-          <h3 class="grow flex flex-row gap-2 items-start">
+          <h3 class="grow flex flex-row gap-2 items-start pl-1">
             <a class="link" href="/build-admin/view?id={build.id}">#{build.id}</a>
             <StatusBadge status={build.result || build.status} />
           </h3>
         </div>
-        <div class="flex flex-row items-center gap-x-1">
+        <div class="flex flex-row items-center gap-x-1 pl-1">
           <IconContainer icon={Icons.Product} width={16} />
           <a class="link mr-2" href="/job-admin/view?id={build.job_id}">
             #{build.job_id}
           </a>
-          {#if build.codebuild_url}
+          {#if build.codebuild_url || build.build_guid}
             <IconContainer icon={Icons.CodeBuild} width={16} />
-            <a class="link mr-2" href={build.codebuild_url} target="_blank">
-              CodeBuild <IconContainer icon={Icons.Open} width={16} />
-            </a>
+            {#if build.codebuild_url}
+              <a class="link" href={build.codebuild_url} target="_blank">
+                CodeBuild <IconContainer icon={Icons.Open} width={16} />
+              </a>
+            {:else}
+              <span>{build.build_guid}</span>
+            {/if}
           {/if}
         </div>
       </div>
diff --git a/src/routes/(ui)/build-admin/view/+page.svelte b/src/routes/(ui)/build-admin/view/+page.svelte
index 603f2925..6dfe3f92 100644
--- a/src/routes/(ui)/build-admin/view/+page.svelte
+++ b/src/routes/(ui)/build-admin/view/+page.svelte
@@ -1,9 +1,16 @@
 <script lang="ts">
+  import { safeParse } from 'valibot';
   import type { PageData } from './$types';
   import { page } from '$app/state';
   import Breadcrumbs from '$lib/components/Breadcrumbs.svelte';
+  import StatusBadge from '$lib/components/StatusBadge.svelte';
+  import Tooltip from '$lib/components/Tooltip.svelte';
+  import { Icons } from '$lib/icons';
+  import IconContainer from '$lib/icons/IconContainer.svelte';
   import { title } from '$lib/stores';
-  import { getTimeDateString } from '$lib/utils/time';
+  import { byString } from '$lib/utils/sorting';
+  import { getRelativeTime, getTimeDateString } from '$lib/utils/time';
+  import { JSON2Entries } from '$lib/valibot';
 
   $title = 'View Build: ' + page.url.searchParams.get('id')!;
 
@@ -12,6 +19,8 @@
   }
 
   let { data }: Props = $props();
+
+  const dateCreated = $derived(getRelativeTime(data.build.created));
 </script>
 
 <Breadcrumbs>
@@ -20,81 +29,135 @@
   <li>{data.build.id}</li>
 </Breadcrumbs>
 
-<h1>{$title}</h1>
+<div class="flex flex-row items-center">
+  <h1 class="p-4 pl-0">
+    Build {data.build.id}
+  </h1>
 
+  <StatusBadge status={data.build.result || data.build.status} />
+</div>
+Created <Tooltip tip={getTimeDateString(data.build.created)}>
+  {$dateCreated}
+</Tooltip>
 
-<table class="table table-zebra border">
-  <tbody>
-    <tr>
-      <th>ID</th>
-      <td>{data.build.id}</td>
-    </tr>
-    <tr>
-      <th>Job ID</th>
-      <td>
-        <a class="link" href="/job-admin/view?id={data.build.job_id}">{data.build.job_id}</a>
-      </td>
-    </tr>
-    <tr>
-      <th>Status</th>
-      <td>{data.build.status}</td>
-    </tr>
-    <tr>
-      <th>Build GUID</th>
-      <td><a class="link" href={data.build.codebuild_url}>{data.build.build_guid}</a></td>
-    </tr>
-    <tr>
-      <th>Result</th>
-      <td>{data.build.result}</td>
-    </tr>
-    <tr>
-      <th>Error</th>
-      <td>
-        {#if data.build.error?.match(/^https?:/)}
-          <a class="link" href={data.build.error}>
-            {data.build.error}
-          </a>
+<div class="border p-2 rounded-md bg-base-200 my-2">
+  <div class="gridcont grid gap-x-6 gap-y-2 mb-2">
+    <div class="flex place-content-between">
+      <span>
+        <IconContainer icon={Icons.Product} width={20} />
+        Job ID:
+      </span>
+      <span>
+        <a class="link" href="/job-admin/view?id={data.build.job_id}">
+          #{data.build.job_id}
+        </a>
+      </span>
+    </div>
+    <div class="flex place-content-between">
+      <span>
+        <IconContainer icon={Icons.Build} width={24} />Targets:
+      </span>
+      <span class="flex flex-row gap-1">
+        {data.build.targets || '(none)'}
+      </span>
+    </div>
+    <div class="flex place-content-between">
+      <span>
+        <IconContainer icon={Icons.Publish} width={20} />
+        Channel:
+      </span>
+      <span>
+        {data.build.channel || '(none)'}
+      </span>
+    </div>
+    <div class="flex place-content-between">
+      <span>
+        <IconContainer icon={Icons.Version} width={20} />
+        Version Code:
+      </span>
+      <span>
+        {data.build.version_code ?? '(none)'}
+      </span>
+    </div>
+  </div>
+  {#if data.build.codebuild_url || data.build.build_guid}
+    <div>
+      <span>
+        <IconContainer icon={Icons.CodeBuild} width={20} class="mr-1" />Code Build:
+      </span>
+      <span>
+        {#if data.build.codebuild_url}
+          <a class="link" href={data.build.codebuild_url}>{data.build.build_guid}</a>
         {:else}
-          {data.build.error}
+          <span>{data.build.build_guid}</span>
         {/if}
-      </td>
-    </tr>
-    <tr>
-      <th>Artifacts</th>
-      <td>
-        {#if data.build.artifact_files}
-          {#each Object.entries(data.artifacts)
-            .filter(([_, url]) => !!url)
-            .sort(([a, _1], [b, _2]) => a.localeCompare(b, 'en-US')) as [name, url]}
-            <a class="link" href={url}>{name}</a>
-            ,&nbsp;
-          {/each}
-        {/if}
-      </td>
-    </tr>
-    <tr>
-      <th>Created</th>
-      <td>{getTimeDateString(data.build.created)}</td>
-    </tr>
-    <tr>
-      <th>Updated</th>
-      <td>{getTimeDateString(data.build.updated)}</td>
-    </tr>
-    <tr>
-      <th>Channel</th>
-      <td>{data.build.channel}</td>
-    </tr>
-    <tr>
-      <th>Version Code</th>
-      <td>{data.build.version_code}</td>
-    </tr>
-    <tr>
-      <th>Targets</th>
-      <td>{data.build.targets}</td>
-    </tr>
-    <tr>
-      <th>Environment</th>
-      <td>{data.build.environment}</td>
-    </tr>
-  </tbody>
-</table>
+      </span>
+    </div>
+  {/if}
+  {#if data.build.error}
+    {@const isURL = !!data.build.error?.match(/^https?:/)}
+    <div>
+      <span>Error:</span>
+      {#if isURL}
+        <a class="link" href={data.build.error}>
+          {data.build.error}
+        </a>
+      {:else}
+        <br />
+        <textarea class="textarea w-full min-h-36" readonly>{data.build.error}</textarea>
+      {/if}
+    </div>
+  {/if}
+  {#if data.build.artifact_files}
+    {@const artifacts = Object.entries(data.artifacts)
+      .filter(([_, url]) => !!url)
+      .sort(([a, _1], [b, _2]) => byString(a, b))}
+    <div class="mt-1">
+      <span><IconContainer icon={Icons.File} width={20} class="mr-1" />Artifacts:</span>
+      <span class="inline-flex flex-row flex-wrap">
+        {#each artifacts as [name, url], i}
+          <a class="link ml-1" href={url}>{name}</a>
+          {#if i + 1 < artifacts.length}
+            ,
+          {/if}
+        {/each}
+      </span>
+    </div>
+  {/if}
+  {#if data.build.environment}
+    {@const parsed = safeParse(JSON2Entries, data.build.environment)}
+    {#if parsed.success && parsed.output?.length}
+      <div class="mt-1">
+        <span><IconContainer icon={Icons.Environment} width={20} class="mr-1" />Environment:</span>
+        <table class="table table-zebra table-sm">
+          <tbody>
+            {#each parsed.output as [key, value]}
+              <tr class="hidden md:table-row">
+                <th>{key}:</th>
+                <td>{value}</td>
+              </tr>
+              <tr class="md:hidden">
+                <th>{key}:</th>
+              </tr>
+              <tr class="md:hidden">
+                <td>{value}</td>
+              </tr>
+            {/each}
+          </tbody>
+        </table>
+      </div>
+    {/if}
+  {/if}
+</div>
+
+<style>
+  .gridcont {
+    grid-template-columns: repeat(auto-fill, minmax(48%, 1fr));
+  }
+  .gridcont div span:first-child {
+    font-family: Montserrat, sans-serif;
+  }
+  .gridcont div span:last-child {
+    text-align: right;
+  }
+</style>
diff --git a/src/routes/(ui)/job-admin/view/+page.svelte b/src/routes/(ui)/job-admin/view/+page.svelte
index 6480b64d..eab6a88a 100644
--- a/src/routes/(ui)/job-admin/view/+page.svelte
+++ b/src/routes/(ui)/job-admin/view/+page.svelte
@@ -39,7 +39,7 @@ Created <Tooltip tip={getTimeDateString(data.job.created)}>
   {$dateCreated}
 </Tooltip>
 
-<div class="border p-2 rounded-md bg-base-200 mt-2">
+<div class="border p-2 rounded-md bg-base-200 my-2">
   <div class="gridcont grid gap-x-6 gap-y-2 mb-2">
     <div class="flex place-content-between">
       <span>
diff --git a/src/routes/(ui)/project-admin/view/+page.svelte b/src/routes/(ui)/project-admin/view/+page.svelte
index 84e07f30..4ec16eea 100644
--- a/src/routes/(ui)/project-admin/view/+page.svelte
+++ b/src/routes/(ui)/project-admin/view/+page.svelte
@@ -36,7 +36,7 @@ Created <Tooltip tip={getTimeDateString(data.project.created)}>
   {$dateCreated}
 </Tooltip>
 
-<div class="border p-2 rounded-md bg-base-200 mt-2">
+<div class="border p-2 rounded-md bg-base-200 my-2">
   <div class="gridcont grid gap-x-6 gap-y-2 mb-2">
     <div class="flex place-content-between">
       <span>

From 897956760f38eaae814d396e064ba332bcaebff2 Mon Sep 17 00:00:00 2001
From: Aidan Jones <aidan_jones@sil.org>
Date: Mon, 17 Aug 2026 11:01:14 -0500
Subject: [PATCH 12/19] Improve release view

---
 src/lib/icons/index.ts                        |   2 +
 src/routes/(ui)/build-admin/view/+page.svelte |   5 +-
 src/routes/(ui)/release-admin/+page.svelte    |   4 +-
 .../(ui)/release-admin/view/+page.svelte      | 229 +++++++++++-------
 4 files changed, 152 insertions(+), 88 deletions(-)

diff --git a/src/lib/icons/index.ts b/src/lib/icons/index.ts
index 64b5da70..1ed2d2e7 100644
--- a/src/lib/icons/index.ts
+++ b/src/lib/icons/index.ts
@@ -45,6 +45,7 @@ export const Icons = {
   Bucket: 'logos:aws-s3',
   Build: 'material-symbols:build',
   Cancel: 'icon-park-outline:return',
+  Channel: 'mdi:broadcast',
   Checkmark: 'mdi:check',
   Close: 'mdi:close',
   CodeBuild: 'logos:aws-codebuild',
@@ -69,6 +70,7 @@ export const Icons = {
   SortAsc: 'bx:sort-a-z',
   SortDesc: 'bx:sort-z-a',
   Store: 'ic:twotone-store',
+  Targets: 'streamline-cyber:multi-platform-2',
   Unknown: 'carbon:unknown',
   URL: 'solar:link-bold',
   User: 'mdi:user',
diff --git a/src/routes/(ui)/build-admin/view/+page.svelte b/src/routes/(ui)/build-admin/view/+page.svelte
index 6dfe3f92..9eceb5e4 100644
--- a/src/routes/(ui)/build-admin/view/+page.svelte
+++ b/src/routes/(ui)/build-admin/view/+page.svelte
@@ -55,7 +55,8 @@ Created <Tooltip tip={getTimeDateString(data.build.created)}>
     </div>
     <div class="flex place-content-between">
       <span>
-        <IconContainer icon={Icons.Build} width={24} />Targets:
+        <IconContainer icon={Icons.Targets} width={20} />
+        Targets:
       </span>
       <span class="flex flex-row gap-1">
         {data.build.targets || '(none)'}
@@ -63,7 +64,7 @@ Created <Tooltip tip={getTimeDateString(data.build.created)}>
     </div>
     <div class="flex place-content-between">
       <span>
-        <IconContainer icon={Icons.Publish} width={20} />
+        <IconContainer icon={Icons.Channel} width={20} />
         Channel:
       </span>
       <span>
diff --git a/src/routes/(ui)/release-admin/+page.svelte b/src/routes/(ui)/release-admin/+page.svelte
index 5f3f6921..0a8214b3 100644
--- a/src/routes/(ui)/release-admin/+page.svelte
+++ b/src/routes/(ui)/release-admin/+page.svelte
@@ -83,12 +83,12 @@
     {#each releases as release}
       <div class="border rounded-md p-2 flex flex-col gap-1">
         <div class="flex flex-row">
-          <h3 class="grow flex flex-row gap-2 items-start">
+          <h3 class="grow flex flex-row gap-2 items-start pl-1">
             <a class="link" href="/release-admin/view?id={release.id}">#{release.id}</a>
             <StatusBadge status={release.result || release.status} />
           </h3>
         </div>
-        <div class="flex flex-row items-center gap-x-1">
+        <div class="flex flex-row items-center gap-x-1 pl-1">
           <IconContainer icon={Icons.Product} width={16} />
           <a class="link mr-2" href="/job-admin/view?id={release.build.job_id}">
             #{release.build.job_id}
diff --git a/src/routes/(ui)/release-admin/view/+page.svelte b/src/routes/(ui)/release-admin/view/+page.svelte
index d5d266ca..e8e9c86f 100644
--- a/src/routes/(ui)/release-admin/view/+page.svelte
+++ b/src/routes/(ui)/release-admin/view/+page.svelte
@@ -1,9 +1,16 @@
 <script lang="ts">
+  import { safeParse } from 'valibot';
   import type { PageData } from './$types';
   import { page } from '$app/state';
   import Breadcrumbs from '$lib/components/Breadcrumbs.svelte';
+  import StatusBadge from '$lib/components/StatusBadge.svelte';
+  import Tooltip from '$lib/components/Tooltip.svelte';
+  import { Icons } from '$lib/icons';
+  import IconContainer from '$lib/icons/IconContainer.svelte';
   import { title } from '$lib/stores';
-  import { getTimeDateString } from '$lib/utils/time';
+  import { byString } from '$lib/utils/sorting';
+  import { getRelativeTime, getTimeDateString } from '$lib/utils/time';
+  import { JSON2Entries } from '$lib/valibot';
 
   $title = 'View Release: ' + page.url.searchParams.get('id')!;
 
@@ -12,98 +19,152 @@
   }
 
   let { data }: Props = $props();
+
+  const dateCreated = $derived(getRelativeTime(data.release.created));
 </script>
 
 <Breadcrumbs>
   <li><a href="/" class="link">Home</a></li>
-  <li><a href="/release-admin" class="link">Releases</a></li>
+  <li><a href="/build-admin" class="link">Builds</a></li>
   <li>{data.release.id}</li>
 </Breadcrumbs>
 
-<h1>{$title}</h1>
+<div class="flex flex-row items-center">
+  <h1 class="p-4 pl-0">
+    Release {data.release.id}
+  </h1>
+
+  <StatusBadge status={data.release.result || data.release.status} />
+</div>
+Created <Tooltip tip={getTimeDateString(data.release.created)}>
+  {$dateCreated}
+</Tooltip>
 
-<table class="table table-zebra border">
-  <tbody>
-    <tr>
-      <th>ID</th>
-      <td>{data.release.id}</td>
-    </tr>
-    <tr>
-      <th>Build ID</th>
-      <td>
+<div class="border p-2 rounded-md bg-base-200 my-2">
+  <div class="gridcont grid gap-x-6 gap-y-2 mb-2">
+    <div>
+      <span>
+        <IconContainer icon={Icons.Build} width={20} />
+        Build ID:
+      </span>
+      <span>
         <a class="link" href="/build-admin/view?id={data.release.build_id}">
-          {data.release.build_id}
+          #{data.release.build_id}
         </a>
-      </td>
-    </tr>
-    <tr>
-      <th>Status</th>
-      <td>{data.release.status}</td>
-    </tr>
-    <tr>
-      <th>Created</th>
-      <td>{getTimeDateString(data.release.created)}</td>
-    </tr>
-    <tr>
-      <th>Updated</th>
-      <td>{getTimeDateString(data.release.updated)}</td>
-    </tr>
-    <tr>
-      <th>Result</th>
-      <td>{data.release.result}</td>
-    </tr>
-    <tr>
-      <th>Error</th>
-      <td>
-        {#if data.release.error?.match(/^https?:/)}
-          <a class="link" href={data.release.error}>
-            {data.release.error}
-          </a>
+      </span>
+    </div>
+    <div>
+      <span>
+        <IconContainer icon={Icons.Targets} width={20} />
+        Targets:
+      </span>
+      <span>
+        {data.release.targets || '(none)'}
+      </span>
+    </div>
+    <div>
+      <span>
+        <IconContainer icon={Icons.Channel} width={20} />
+        Channel:
+      </span>
+      <span>
+        {data.release.channel || '(none)'}
+      </span>
+    </div>
+    <div>
+      <span>
+        <IconContainer icon={Icons.Language} width={20} />
+        Default Language:
+      </span>
+      <span>
+        {data.release.defaultLanguage ?? '(none)'}
+      </span>
+    </div>
+  </div>
+  {#if data.release.codebuild_url || data.release.build_guid}
+    <div>
+      <span>
+        <IconContainer icon={Icons.CodeBuild} width={20} class="mr-1" />Code Build:
+      </span>
+      <span>
+        {#if data.release.codebuild_url}
+          <a class="link" href={data.release.codebuild_url}>{data.release.build_guid}</a>
         {:else}
-          {data.release.error}
+          <span>{data.release.build_guid}</span>
         {/if}
-      </td>
-    </tr>
-    <tr>
-      <th>Artifacts</th>
-      <td>
-        {#if data.release.artifact_files}
-          {#each Object.entries(data.artifacts)
-            .filter(([_, url]) => !!url)
-            .sort(([a, _1], [b, _2]) => a.localeCompare(b, 'en-US')) as [name, url]}
-            <a class="link" href={url}>{name}</a>
-            ,&nbsp;
-          {/each}
-        {/if}
-      </td>
-    </tr>
-    <tr>
-      <th>Channel</th>
-      <td>{data.release.channel}</td>
-    </tr>
-    <tr>
-      <th>Title</th>
-      <td>{data.release.title}</td>
-    </tr>
-    <tr>
-      <th>Default Language</th>
-      <td>{data.release.defaultLanguage}</td>
-    </tr>
-    <tr>
-      <th>Build GUID</th>
-      <td><a class="link" href={data.release.codebuild_url}>{data.release.build_guid}</a></td>
-    </tr>
-    <tr>
-      <th>Promote From</th>
-      <td>{data.release.promote_from}</td>
-    </tr>
-    <tr>
-      <th>Targets</th>
-      <td>{data.release.targets}</td>
-    </tr>
-    <tr>
-      <th>Environment</th>
-      <td>{data.release.environment}</td>
-    </tr>
-  </tbody>
-</table>
+      </span>
+    </div>
+  {/if}
+  {#if data.release.error}
+    {@const isURL = !!data.release.error?.match(/^https?:/)}
+    <div>
+      <span>Error:</span>
+      {#if isURL}
+        <a class="link" href={data.release.error}>
+          {data.release.error}
+        </a>
+      {:else}
+        <br />
+        <textarea class="textarea w-full min-h-36" readonly>{data.release.error}</textarea>
+      {/if}
+    </div>
+  {/if}
+  {#if data.release.artifact_files}
+    {@const artifacts = Object.entries(data.artifacts)
+      .filter(([_, url]) => !!url)
+      .sort(([a, _1], [b, _2]) => byString(a, b))}
+    <div class="mt-1">
+      <span><IconContainer icon={Icons.File} width={20} class="mr-1" />Artifacts:</span>
+      <span class="inline-flex flex-row flex-wrap">
+        {#each artifacts as [name, url], i}
+          <a class="link ml-1" href={url}>{name}</a>
+          {#if i + 1 < artifacts.length}
+            ,
+          {/if}
+        {/each}
+      </span>
+    </div>
+  {/if}
+  {#if data.release.environment}
+    {@const parsed = safeParse(JSON2Entries, data.release.environment)}
+    {#if parsed.success && parsed.output?.length}
+      <div class="mt-1">
+        <span><IconContainer icon={Icons.Environment} width={20} class="mr-1" />Environment:</span>
+        <table class="table table-zebra table-sm">
+          <tbody>
+            {#each parsed.output as [key, value]}
+              <tr class="hidden md:table-row">
+                <th>{key}:</th>
+                <td>{value}</td>
+              </tr>
+              <tr class="md:hidden">
+                <th>{key}:</th>
+              </tr>
+              <tr class="md:hidden">
+                <td>{value}</td>
+              </tr>
+            {/each}
+          </tbody>
+        </table>
+      </div>
+    {/if}
+  {/if}
+</div>
+
+<style>
+  .gridcont {
+    grid-template-columns: repeat(auto-fill, minmax(48%, 1fr));
+  }
+  .gridcont div {
+    display: flex;
+    place-content: space-between;
+  }
+  .gridcont div span:first-child {
+    font-family: Montserrat, sans-serif;
+    display: flex;
+    gap: calc(var(--spacing) * 1) /* 0.25rem = 4px */;
+  }
+  .gridcont div span:last-child {
+    text-align: right;
+  }
+</style>

From 90e989d8cd8235cd9495aca4a9dab2abf1ef2ee9 Mon Sep 17 00:00:00 2001
From: Aidan Jones <aidan_jones@sil.org>
Date: Mon, 17 Aug 2026 11:04:21 -0500
Subject: [PATCH 13/19] Tweak CSS

---
 src/routes/(ui)/build-admin/view/+page.svelte   | 16 +++++++++++-----
 src/routes/(ui)/job-admin/view/+page.svelte     | 14 ++++++++++----
 src/routes/(ui)/project-admin/view/+page.svelte | 12 +++++++++---
 3 files changed, 30 insertions(+), 12 deletions(-)

diff --git a/src/routes/(ui)/build-admin/view/+page.svelte b/src/routes/(ui)/build-admin/view/+page.svelte
index 9eceb5e4..7d127d65 100644
--- a/src/routes/(ui)/build-admin/view/+page.svelte
+++ b/src/routes/(ui)/build-admin/view/+page.svelte
@@ -42,7 +42,7 @@ Created <Tooltip tip={getTimeDateString(data.build.created)}>
 
 <div class="border p-2 rounded-md bg-base-200 my-2">
   <div class="gridcont grid gap-x-6 gap-y-2 mb-2">
-    <div class="flex place-content-between">
+    <div>
       <span>
         <IconContainer icon={Icons.Product} width={20} />
         Job ID:
@@ -53,16 +53,16 @@ Created <Tooltip tip={getTimeDateString(data.build.created)}>
         </a>
       </span>
     </div>
-    <div class="flex place-content-between">
+    <div>
       <span>
         <IconContainer icon={Icons.Targets} width={20} />
         Targets:
       </span>
-      <span class="flex flex-row gap-1">
+      <span>
         {data.build.targets || '(none)'}
       </span>
     </div>
-    <div class="flex place-content-between">
+    <div>
       <span>
         <IconContainer icon={Icons.Channel} width={20} />
         Channel:
@@ -71,7 +71,7 @@ Created <Tooltip tip={getTimeDateString(data.build.created)}>
         {data.build.channel || '(none)'}
       </span>
     </div>
-    <div class="flex place-content-between">
+    <div>
       <span>
         <IconContainer icon={Icons.Version} width={20} />
         Version Code:
@@ -155,8 +155,14 @@ Created <Tooltip tip={getTimeDateString(data.build.created)}>
   .gridcont {
     grid-template-columns: repeat(auto-fill, minmax(48%, 1fr));
   }
+  .gridcont div {
+    display: flex;
+    place-content: space-between;
+  }
   .gridcont div span:first-child {
     font-family: Montserrat, sans-serif;
+    display: flex;
+    gap: calc(var(--spacing) * 1) /* 0.25rem = 4px */;
   }
   .gridcont div span:last-child {
     text-align: right;
diff --git a/src/routes/(ui)/job-admin/view/+page.svelte b/src/routes/(ui)/job-admin/view/+page.svelte
index eab6a88a..e3289f37 100644
--- a/src/routes/(ui)/job-admin/view/+page.svelte
+++ b/src/routes/(ui)/job-admin/view/+page.svelte
@@ -41,7 +41,7 @@ Created <Tooltip tip={getTimeDateString(data.job.created)}>
 
 <div class="border p-2 rounded-md bg-base-200 my-2">
   <div class="gridcont grid gap-x-6 gap-y-2 mb-2">
-    <div class="flex place-content-between">
+    <div>
       <span>
         <IconContainer icon={Icons.Store} width={20} />
         Publisher ID:
@@ -50,14 +50,14 @@ Created <Tooltip tip={getTimeDateString(data.job.created)}>
         {data.job.publisher_id}
       </span>
     </div>
-    <div class="flex place-content-between">
+    <div>
       <span>App ID:</span>
       <span class="flex flex-row gap-1">
         <IconContainer icon={getAppIcon(data.job.app_id as ApplicationType)} width={24} />
         {data.job.app_id}
       </span>
     </div>
-    <div class="flex place-content-between">
+    <div>
       <span>
         <IconContainer icon={Icons.User} width={20} />
         Client:
@@ -72,7 +72,7 @@ Created <Tooltip tip={getTimeDateString(data.job.created)}>
         {/if}
       </span>
     </div>
-    <div class="flex place-content-between">
+    <div>
       <span>
         <IconContainer icon={Icons.Version} width={20} />
         Existing Version Code:
@@ -108,8 +108,14 @@ Created <Tooltip tip={getTimeDateString(data.job.created)}>
   .gridcont {
     grid-template-columns: repeat(auto-fill, minmax(48%, 1fr));
   }
+  .gridcont div {
+    display: flex;
+    place-content: space-between;
+  }
   .gridcont div span:first-child {
     font-family: Montserrat, sans-serif;
+    display: flex;
+    gap: calc(var(--spacing) * 1) /* 0.25rem = 4px */;
   }
   .gridcont div span:last-child {
     text-align: right;
diff --git a/src/routes/(ui)/project-admin/view/+page.svelte b/src/routes/(ui)/project-admin/view/+page.svelte
index 4ec16eea..5ad31191 100644
--- a/src/routes/(ui)/project-admin/view/+page.svelte
+++ b/src/routes/(ui)/project-admin/view/+page.svelte
@@ -38,7 +38,7 @@ Created <Tooltip tip={getTimeDateString(data.project.created)}>
 
 <div class="border p-2 rounded-md bg-base-200 my-2">
   <div class="gridcont grid gap-x-6 gap-y-2 mb-2">
-    <div class="flex place-content-between">
+    <div>
       <span>
         <IconContainer icon={Icons.Language} width={20} />
         Language:
@@ -47,7 +47,7 @@ Created <Tooltip tip={getTimeDateString(data.project.created)}>
         {data.project.language_code}
       </span>
     </div>
-    <div class="flex place-content-between">
+    <div>
       <span>App ID:</span>
       <span class="flex flex-row gap-1">
         <IconContainer icon={getAppIcon(data.project.app_id as ApplicationType)} width={24} />
@@ -55,7 +55,7 @@ Created <Tooltip tip={getTimeDateString(data.project.created)}>
       </span>
     </div>
 
-    <div class="flex place-content-between">
+    <div>
       <span>
         <IconContainer icon={Icons.User} width={20} />
         Client:
@@ -111,8 +111,14 @@ Created <Tooltip tip={getTimeDateString(data.project.created)}>
   .gridcont {
     grid-template-columns: repeat(auto-fill, minmax(48%, 1fr));
   }
+  .gridcont div {
+    display: flex;
+    place-content: space-between;
+  }
   .gridcont div span:first-child {
     font-family: Montserrat, sans-serif;
+    display: flex;
+    gap: calc(var(--spacing) * 1) /* 0.25rem = 4px */;
   }
   .gridcont div span:last-child {
     text-align: right;

From d57c510e8d6bd21a60276f6ad7d2d6785c8e5081 Mon Sep 17 00:00:00 2001
From: Aidan Jones <aidan_jones@sil.org>
Date: Mon, 17 Aug 2026 16:51:43 -0500
Subject: [PATCH 14/19] Improve client view

Add new fields to client:
development - boolean
description - string
---
 src/lib/components/InputWithMessage.svelte    |  40 ++++++
 src/lib/components/PasswordInput.svelte       |  31 +++++
 src/lib/components/SecureDisplay.svelte       |   6 +-
 src/lib/icons/index.ts                        |   3 +
 .../migrations/03_client_fields/migration.sql |   3 +
 src/lib/prisma/schema.prisma                  |   2 +
 src/routes/(ui)/client-admin/+page.server.ts  |  31 ++++-
 src/routes/(ui)/client-admin/+page.svelte     |  92 +++++++++----
 .../(ui)/client-admin/create/+page.svelte     |  84 +++++++++---
 .../(ui)/client-admin/update/+page.server.ts  |   4 +-
 .../(ui)/client-admin/update/+page.svelte     |  87 ++++++++++---
 src/routes/(ui)/client-admin/valibot.ts       |  12 +-
 .../(ui)/client-admin/view/+page.server.ts    |  15 ++-
 .../(ui)/client-admin/view/+page.svelte       | 123 +++++++++++++-----
 14 files changed, 430 insertions(+), 103 deletions(-)
 create mode 100644 src/lib/components/InputWithMessage.svelte
 create mode 100644 src/lib/components/PasswordInput.svelte
 create mode 100644 src/lib/prisma/migrations/03_client_fields/migration.sql

diff --git a/src/lib/components/InputWithMessage.svelte b/src/lib/components/InputWithMessage.svelte
new file mode 100644
index 00000000..d94e0e3d
--- /dev/null
+++ b/src/lib/components/InputWithMessage.svelte
@@ -0,0 +1,40 @@
+<!--
+    @component
+    An input slot with an inline message (stylized)
+    
+-->
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { ClassValue } from 'svelte/elements';
+
+  interface Props {
+    title?: { label?: string; class?: ClassValue };
+    message?: { label?: string; class?: ClassValue };
+    class?: ClassValue;
+    children?: Snippet;
+  }
+
+  let { title, message, class: classes, children }: Props = $props();
+</script>
+
+<label class={['flex flex-row items-center gap-2', classes]}>
+  <div class="fieldset-label flex-col items-start grow text-base-content">
+    {#if title}
+      <span class={['title', title.class]}>
+        {title.label}
+      </span>
+    {/if}
+    {#if message}
+      <span class={['text-sm', message.class]}>
+        {message.label}
+      </span>
+    {/if}
+  </div>
+  {@render children?.()}
+</label>
+
+<style>
+  .title {
+    font-weight: bold;
+  }
+</style>
diff --git a/src/lib/components/PasswordInput.svelte b/src/lib/components/PasswordInput.svelte
new file mode 100644
index 00000000..3a7d1bf7
--- /dev/null
+++ b/src/lib/components/PasswordInput.svelte
@@ -0,0 +1,31 @@
+<script lang="ts" generics="T">
+  import LabeledFormInput, {
+    type Props as LabelProps
+  } from '$lib/components/LabeledFormInput.svelte';
+  import { Icons } from '$lib/icons';
+  import IconContainer from '$lib/icons/IconContainer.svelte';
+
+  interface Props extends LabelProps {
+    value?: T;
+  }
+  let { value = $bindable(), ...rest }: Props = $props();
+
+  let visible = $state(false);
+</script>
+
+{#snippet after()}
+  <button type="button" onclick={() => (visible = !visible)}>
+    <IconContainer icon={visible ? Icons.Visible : Icons.Invisible} width={16} />
+  </button>
+{/snippet}
+
+<LabeledFormInput
+  {...rest}
+  input={{
+    ...rest.input,
+    type: visible ? 'text' : 'password',
+    icon: rest.input?.icon ?? Icons.Key,
+    after
+  }}
+  bind:value
+/>
diff --git a/src/lib/components/SecureDisplay.svelte b/src/lib/components/SecureDisplay.svelte
index 50310574..69c48342 100644
--- a/src/lib/components/SecureDisplay.svelte
+++ b/src/lib/components/SecureDisplay.svelte
@@ -22,7 +22,11 @@
     class="w-full"
   />
   {#if value?.length}
-    <button type="button" class="flex flex-row items-center" onclick={() => (visible = !visible)}>
+    <button
+      type="button"
+      class="flex flex-row items-center cursor-pointer"
+      onclick={() => (visible = !visible)}
+    >
       <IconContainer icon={visible ? Icons.Visible : Icons.Invisible} width={16} />
     </button>
   {/if}
diff --git a/src/lib/icons/index.ts b/src/lib/icons/index.ts
index 1ed2d2e7..f6be1a8a 100644
--- a/src/lib/icons/index.ts
+++ b/src/lib/icons/index.ts
@@ -42,6 +42,7 @@ export function getStatusIcon(status: string | null) {
 }
 
 export const Icons = {
+  AddUser: 'mdi:user-add',
   Bucket: 'logos:aws-s3',
   Build: 'material-symbols:build',
   Cancel: 'icon-park-outline:return',
@@ -56,7 +57,9 @@ export const Icons = {
   Edit: 'mdi:pencil',
   Environment: 'mdi:console',
   File: 'mdi:file',
+  Folder: 'material-symbols:folder-outline',
   Hamburger: 'mdi:hamburger-menu',
+  Info: 'mdi:info',
   Invisible: 'mdi:eye-off-outline',
   Key: 'material-symbols:key',
   Language: 'mdi:language',
diff --git a/src/lib/prisma/migrations/03_client_fields/migration.sql b/src/lib/prisma/migrations/03_client_fields/migration.sql
new file mode 100644
index 00000000..23ec37d6
--- /dev/null
+++ b/src/lib/prisma/migrations/03_client_fields/migration.sql
@@ -0,0 +1,3 @@
+-- AlterTable
+ALTER TABLE "public"."client" ADD COLUMN     "description" TEXT,
+ADD COLUMN     "development" BOOLEAN NOT NULL DEFAULT false;
diff --git a/src/lib/prisma/schema.prisma b/src/lib/prisma/schema.prisma
index 46eb7309..0e3d6265 100644
--- a/src/lib/prisma/schema.prisma
+++ b/src/lib/prisma/schema.prisma
@@ -34,6 +34,8 @@ model client {
   id           Int       @id @default(autoincrement())
   access_token String    @db.VarChar(255)
   prefix       String    @db.VarChar(4)
+  description  String?
+  development  Boolean   @default(false)
   created      DateTime? @default(now()) @db.Timestamp(6)
   updated      DateTime? @updatedAt @db.Timestamp(6)
   job          job[]
diff --git a/src/routes/(ui)/client-admin/+page.server.ts b/src/routes/(ui)/client-admin/+page.server.ts
index 4ff8af89..b63a0176 100644
--- a/src/routes/(ui)/client-admin/+page.server.ts
+++ b/src/routes/(ui)/client-admin/+page.server.ts
@@ -5,19 +5,21 @@ import type { Actions, PageServerLoad } from './$types';
 import { prisma } from '$lib/server/prisma';
 import { tableSchema } from '$lib/valibot';
 
-const select: Prisma.clientSelect = {
+const select = {
   id: true,
   prefix: true,
   access_token: true,
   created: true,
   updated: true,
+  development: true,
+  description: true,
   _count: {
     select: {
       job: true,
       project: true
     }
   }
-};
+} as const satisfies Prisma.clientSelect;
 
 export const load = (async () => {
   const clients = await prisma.client.findMany({ select, take: 20, orderBy: { id: 'desc' } });
@@ -42,8 +44,30 @@ export const actions: Actions = {
     const form = await superValidate(request, valibot(tableSchema));
     if (!form.valid) return fail(400, { form, ok: false });
 
+    const searchDev = form.data.search && 'development'.includes(form.data.search.toLowerCase());
+
+    const where = {
+      OR:
+        searchDev || form.data.search
+          ? [
+              { development: searchDev || undefined },
+              {
+                prefix: form.data.search
+                  ? { contains: form.data.search, mode: 'insensitive' }
+                  : undefined
+              },
+              {
+                description: form.data.search
+                  ? { contains: form.data.search, mode: 'insensitive' }
+                  : undefined
+              }
+            ]
+          : undefined
+    } as const satisfies Prisma.clientWhereInput;
+
     const clients = await prisma.client.findMany({
       select,
+      where,
       orderBy: form.data.sort ? { [form.data.sort.field]: form.data.sort.direction } : undefined,
       skip: form.data.page.page * form.data.page.size,
       take: form.data.page.size
@@ -53,7 +77,8 @@ export const actions: Actions = {
       form,
       ok: true,
       query: {
-        data: clients
+        data: clients,
+        count: await prisma.client.count({ where })
       }
     };
   }
diff --git a/src/routes/(ui)/client-admin/+page.svelte b/src/routes/(ui)/client-admin/+page.svelte
index 62b8671f..9a465934 100644
--- a/src/routes/(ui)/client-admin/+page.svelte
+++ b/src/routes/(ui)/client-admin/+page.svelte
@@ -4,6 +4,7 @@
   import Breadcrumbs from '$lib/components/Breadcrumbs.svelte';
   import Pagination from '$lib/components/Pagination.svelte';
   import PaginationHeader from '$lib/components/PaginationHeader.svelte';
+  import SearchBar from '$lib/components/SearchBar.svelte';
   import SecureDisplay from '$lib/components/SecureDisplay.svelte';
   import Tooltip from '$lib/components/Tooltip.svelte';
   import { Icons } from '$lib/icons';
@@ -20,12 +21,15 @@
   let { data }: Props = $props();
 
   let clients = $state(data.clients);
+  let count = $state(data.count);
 
   const { form, enhance, submit } = superForm(data.form, {
     dataType: 'json',
     resetForm: false,
-    onChange() {
-      submit();
+    onChange({ paths }) {
+      if (!paths.includes('search')) {
+        submit();
+      }
     },
     onUpdate(event) {
       const data = event.result.data as FormResult<{
@@ -33,12 +37,22 @@
       }>;
       if (event.form.valid && data.query) {
         clients = data.query.data;
+        count = data.query.count;
       }
     }
   });
 
+  function submitSearch() {
+    if ($form.page.page) {
+      $form.page.page = 0;
+    } else {
+      submit();
+    }
+  }
+
+  const mobileSizing = 'w-full md:w-auto';
+
   const created = $derived(getRelativeTime(clients.map((c) => c.created)));
-  const updated = $derived(getRelativeTime(clients.map((c) => c.updated)));
 </script>
 
 <div class="w-full">
@@ -46,38 +60,70 @@
     <li><a href="/" class="link">Home</a></li>
     <li>{$title}</li>
   </Breadcrumbs>
-  <h1>{$title}</h1>
-  <a class="btn btn-success mb-2" href="/client-admin/create">Create Client</a>
-  <PaginationHeader page={$form.page} count={data.count} />
+  <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+  <form
+    method="POST"
+    action="?/page"
+    use:enhance
+    onkeydown={(event) => {
+      if (event.key === 'Enter') submitSearch();
+    }}
+  >
+    <div
+      class="flex flex-row flex-wrap md:flex-nowrap place-content-end items-center px-4 gap-1 {mobileSizing}"
+    >
+      <div class="inline-flex items-center grow {mobileSizing}">
+        <h1 class="py-4 pl-2">{$title}</h1>
+        <a class="btn btn-secondary" href="/client-admin/create">
+          <IconContainer icon={Icons.AddUser} width={24} />
+          Create Client
+        </a>
+      </div>
+      <div
+        class="flex flex-row flex-wrap md:flex-nowrap place-content-end items-center gap-1 {mobileSizing}"
+      >
+        <SearchBar bind:value={$form.search} requestSubmit={submitSearch} class={mobileSizing} />
+      </div>
+    </div>
+  </form>
+  <PaginationHeader page={$form.page} {count} />
   <div class="flex flex-col gap-2">
     {#each clients as client, i}
       <div class="border rounded-md p-2 flex flex-col gap-1">
         <div class="flex flex-row">
-          <h3 class="grow">
+          <h3 class="grow flex gap-x-3 pl-1">
             <a class="link" href="/client-admin/view?id={client.id}">#{client.id}</a>
-            <i class="pl-2">{client.prefix}</i>
+            <i>{client.prefix}</i>
+            {#if client.development}
+              <span class="badge badge-secondary px-2">
+                <IconContainer icon={Icons.Environment} width={16} />
+                development
+              </span>
+            {/if}
           </h3>
           <div class="flex flex-col">
             <Tooltip class="indent-0" tip={getTimeDateString(client.created)}>
               Created: {$created[i]}
             </Tooltip>
-            <Tooltip class="indent-0" tip={getTimeDateString(client.updated)}>
-              Updated: {$updated[i]}
-            </Tooltip>
           </div>
         </div>
-        <div class="flex flex-row items-center gap-x-1 w-full">
-          <IconContainer icon={Icons.Key} width={16} />
-          <SecureDisplay value={client.access_token} />
-        </div>
-        <div class="flex flex-row flex-wrap gap-1 w-full">
-          <div class="flex flex-row items-center gap-x-1">
-            <IconContainer icon={Icons.Project} width={16} />
-            {client._count.project}
+        <div class="flex flex-col pl-1 gap-1">
+          {#if client.description}
+            <p>{client.description}</p>
+          {/if}
+          <div class="flex flex-row items-center gap-x-1 w-full">
+            <IconContainer icon={Icons.Key} width={16} />
+            <SecureDisplay value={client.access_token} />
           </div>
-          <div class="flex flex-row items-center gap-x-1">
-            <IconContainer icon={Icons.Product} width={16} />
-            {client._count.job}
+          <div class="flex flex-row flex-wrap gap-1 w-full">
+            <div class="flex flex-row items-center gap-x-1">
+              <IconContainer icon={Icons.Project} width={16} />
+              {client._count.project}
+            </div>
+            <div class="flex flex-row items-center gap-x-1">
+              <IconContainer icon={Icons.Product} width={16} />
+              {client._count.job}
+            </div>
           </div>
         </div>
       </div>
@@ -85,7 +131,7 @@
   </div>
   <form method="POST" action="?/page" use:enhance>
     <div class="space-between-4 flex w-full flex-row flex-wrap place-content-start gap-1 p-4">
-      <Pagination bind:size={$form.page.size} total={data.count} bind:page={$form.page.page} />
+      <Pagination bind:size={$form.page.size} total={count} bind:page={$form.page.page} />
     </div>
   </form>
 </div>
diff --git a/src/routes/(ui)/client-admin/create/+page.svelte b/src/routes/(ui)/client-admin/create/+page.svelte
index b9ed24eb..195b0b28 100644
--- a/src/routes/(ui)/client-admin/create/+page.svelte
+++ b/src/routes/(ui)/client-admin/create/+page.svelte
@@ -2,7 +2,12 @@
   import { superForm } from 'sveltekit-superforms';
   import type { PageData } from './$types';
   import Breadcrumbs from '$lib/components/Breadcrumbs.svelte';
+  import CancelButton from '$lib/components/CancelButton.svelte';
+  import InputWithMessage from '$lib/components/InputWithMessage.svelte';
   import LabeledFormInput from '$lib/components/LabeledFormInput.svelte';
+  import PasswordInput from '$lib/components/PasswordInput.svelte';
+  import SubmitButton from '$lib/components/SubmitButton.svelte';
+  import { Icons } from '$lib/icons';
   import { title } from '$lib/stores';
   import { stringLimits } from '$lib/valibot';
 
@@ -27,31 +32,72 @@
 <h1>{$title}</h1>
 
 <form method="POST" use:enhance>
-  <LabeledFormInput label="Access Token">
-    <input
-      class="input input-bordered validator"
-      type="text"
-      bind:value={$form.access_token}
-      required
-      maxlength={stringLimits.client.access_token}
-    />
-    <span class="validator-hint">&nbsp;</span>
-  </LabeledFormInput>
-  <LabeledFormInput label="Prefix">
-    <input
-      class="input input-bordered validator"
-      type="text"
+  <div class="input-fields">
+    <LabeledFormInput
+      label="Prefix"
+      class="md:w-24!"
+      input={{
+        maxlength: stringLimits.client.prefix,
+        icon: Icons.Folder,
+        required: true,
+        size: 4
+      }}
       bind:value={$form.prefix}
-      required
-      maxlength={stringLimits.client.prefix}
     />
-    <span class="validator-hint">&nbsp;</span>
+
+    <div class="complement-width">
+      <PasswordInput
+        label="Access Token"
+        input={{
+          maxlength: stringLimits.client.access_token,
+          icon: Icons.Key,
+          required: true
+        }}
+        bind:value={$form.access_token}
+      />
+    </div>
+  </div>
+  <InputWithMessage
+    title={{ label: 'Development' }}
+    message={{ label: 'This client is used for local development.' }}
+    class="mb-4"
+  >
+    <input type="checkbox" class="checkbox checkbox-warning" bind:checked={$form.development} />
+  </InputWithMessage>
+  <LabeledFormInput label="Description">
+    <textarea class="textarea w-full min-h-36" bind:value={$form.description}></textarea>
   </LabeledFormInput>
-  <input type="submit" class="btn btn-success" value="Create" />
+  <div class="my-4">
+    <CancelButton returnTo="/client-admin" />
+    <SubmitButton />
+  </div>
 </form>
 
 <style>
-  .input {
+  .input-fields {
+    display: flex;
+    flex-direction: column;
     width: 100%;
   }
+
+  @media (width >= 48rem /* 768px */) {
+    .input-fields {
+      flex-wrap: wrap;
+      flex-direction: row;
+    }
+    .input-fields :global(label):nth-child(odd) {
+      padding-right: calc(var(--spacing) * 1);
+    }
+    .input-fields :global(label):nth-child(even) {
+      padding-left: calc(var(--spacing) * 1);
+    }
+    .input-fields :global(label):nth-child(odd):last-child {
+      padding-right: 0px;
+      width: 100%;
+    }
+
+    .complement-width {
+      width: calc(100% - var(--spacing) * 24) /* 6rem = 96px */;
+    }
+  }
 </style>
diff --git a/src/routes/(ui)/client-admin/update/+page.server.ts b/src/routes/(ui)/client-admin/update/+page.server.ts
index 83880fc2..012cf918 100644
--- a/src/routes/(ui)/client-admin/update/+page.server.ts
+++ b/src/routes/(ui)/client-admin/update/+page.server.ts
@@ -19,7 +19,9 @@ export const load = (async ({ url }) => {
     },
     select: {
       prefix: true,
-      access_token: true
+      development: true,
+      access_token: true,
+      description: true
     }
   });
 
diff --git a/src/routes/(ui)/client-admin/update/+page.svelte b/src/routes/(ui)/client-admin/update/+page.svelte
index d113ddb4..e6df963d 100644
--- a/src/routes/(ui)/client-admin/update/+page.svelte
+++ b/src/routes/(ui)/client-admin/update/+page.svelte
@@ -3,7 +3,12 @@
   import type { PageData } from './$types';
   import { page } from '$app/state';
   import Breadcrumbs from '$lib/components/Breadcrumbs.svelte';
+  import CancelButton from '$lib/components/CancelButton.svelte';
+  import InputWithMessage from '$lib/components/InputWithMessage.svelte';
   import LabeledFormInput from '$lib/components/LabeledFormInput.svelte';
+  import PasswordInput from '$lib/components/PasswordInput.svelte';
+  import SubmitButton from '$lib/components/SubmitButton.svelte';
+  import { Icons } from '$lib/icons';
   import { title } from '$lib/stores';
   import { stringLimits } from '$lib/valibot';
 
@@ -27,37 +32,77 @@
 <Breadcrumbs>
   <li><a href="/" class="link">Home</a></li>
   <li><a href="/client-admin" class="link">Clients</a></li>
-  <li><a href="/client-admin/view?id={id}" class="link">{id}</a></li>
-  <li>Update</li>
+  <li>{$title}</li>
 </Breadcrumbs>
 <h1>{$title}</h1>
 
 <form method="POST" use:enhance>
-  <LabeledFormInput label="Access Token">
-    <input
-      class="input input-bordered validator"
-      type="text"
-      bind:value={$form.access_token}
-      required
-      maxlength={stringLimits.client.access_token}
-    />
-    <span class="validator-hint">&nbsp;</span>
-  </LabeledFormInput>
-  <LabeledFormInput label="Prefix">
-    <input
-      class="input input-bordered validator"
-      type="text"
+  <div class="input-fields">
+    <LabeledFormInput
+      label="Prefix"
+      class="md:w-24!"
+      input={{
+        maxlength: stringLimits.client.prefix,
+        icon: Icons.Folder,
+        required: true,
+        size: 4
+      }}
       bind:value={$form.prefix}
-      required
-      maxlength={stringLimits.client.prefix}
     />
-    <span class="validator-hint">&nbsp;</span>
+
+    <div class="complement-width">
+      <PasswordInput
+        label="Access Token"
+        input={{
+          maxlength: stringLimits.client.access_token,
+          icon: Icons.Key,
+          required: true
+        }}
+        bind:value={$form.access_token}
+      />
+    </div>
+  </div>
+  <InputWithMessage
+    title={{ label: 'Development' }}
+    message={{ label: 'This client is used for local development.' }}
+    class="mb-4"
+  >
+    <input type="checkbox" class="checkbox checkbox-warning" bind:checked={$form.development} />
+  </InputWithMessage>
+  <LabeledFormInput label="Description">
+    <textarea class="textarea w-full min-h-36" bind:value={$form.description}></textarea>
   </LabeledFormInput>
-  <input type="submit" class="btn btn-success" value="Update" />
+  <div class="my-4">
+    <CancelButton returnTo="/client-admin/view?id={id}" />
+    <SubmitButton />
+  </div>
 </form>
 
 <style>
-  .input {
+  .input-fields {
+    display: flex;
+    flex-direction: column;
     width: 100%;
   }
+
+  @media (width >= 48rem /* 768px */) {
+    .input-fields {
+      flex-wrap: wrap;
+      flex-direction: row;
+    }
+    .input-fields :global(label):nth-child(odd) {
+      padding-right: calc(var(--spacing) * 1);
+    }
+    .input-fields :global(label):nth-child(even) {
+      padding-left: calc(var(--spacing) * 1);
+    }
+    .input-fields :global(label):nth-child(odd):last-child {
+      padding-right: 0px;
+      width: 100%;
+    }
+
+    .complement-width {
+      width: calc(100% - var(--spacing) * 24) /* 6rem = 96px */;
+    }
+  }
 </style>
diff --git a/src/routes/(ui)/client-admin/valibot.ts b/src/routes/(ui)/client-admin/valibot.ts
index ccb06d5d..b7502e45 100644
--- a/src/routes/(ui)/client-admin/valibot.ts
+++ b/src/routes/(ui)/client-admin/valibot.ts
@@ -2,16 +2,18 @@ import * as v from 'valibot';
 import { stringLimits } from '$lib/valibot';
 
 export const clientSchema = v.strictObject({
-  access_token: v.pipe(
+  prefix: v.pipe(
     v.string(),
     v.transform((s) => s.trim()),
     v.minLength(1),
-    v.maxBytes(stringLimits.client.access_token)
+    v.maxBytes(stringLimits.client.prefix)
   ),
-  prefix: v.pipe(
+  development: v.boolean(),
+  access_token: v.pipe(
     v.string(),
     v.transform((s) => s.trim()),
     v.minLength(1),
-    v.maxBytes(stringLimits.client.prefix)
-  )
+    v.maxBytes(stringLimits.client.access_token)
+  ),
+  description: v.nullable(v.string())
 });
diff --git a/src/routes/(ui)/client-admin/view/+page.server.ts b/src/routes/(ui)/client-admin/view/+page.server.ts
index cd6d1d65..7dc42dfa 100644
--- a/src/routes/(ui)/client-admin/view/+page.server.ts
+++ b/src/routes/(ui)/client-admin/view/+page.server.ts
@@ -15,6 +15,9 @@ export const load = (async ({ url }) => {
   const client = await prisma.client.findUnique({
     where: {
       id: id.output
+    },
+    include: {
+      _count: { select: { job: true, project: true } }
     }
   });
 
@@ -30,7 +33,17 @@ export const actions: Actions = {
     const form = await superValidate(request, valibot(v.object({ id: idSchema })));
     if (!form.valid) return fail(400, { form, ok: false });
 
-    await prisma.client.delete({ where: { id: form.data.id } });
+    const deleted = await prisma.client.deleteMany({
+      where: { id: form.data.id, NOT: [{ job: { some: {} } }, { project: { some: {} } }] }
+    });
+
+    if (!deleted.count) {
+      return fail(409, {
+        form,
+        ok: false,
+        message: 'Client is associated with one or more jobs or projects and could not be deleted'
+      });
+    }
 
     redirect(303, `/client-admin`);
   }
diff --git a/src/routes/(ui)/client-admin/view/+page.svelte b/src/routes/(ui)/client-admin/view/+page.svelte
index c9782d7d..d36d44d8 100644
--- a/src/routes/(ui)/client-admin/view/+page.svelte
+++ b/src/routes/(ui)/client-admin/view/+page.svelte
@@ -3,8 +3,12 @@
   import { enhance } from '$app/forms';
   import { page } from '$app/state';
   import Breadcrumbs from '$lib/components/Breadcrumbs.svelte';
+  import SecureDisplay from '$lib/components/SecureDisplay.svelte';
+  import Tooltip from '$lib/components/Tooltip.svelte';
+  import { Icons } from '$lib/icons';
+  import IconContainer from '$lib/icons/IconContainer.svelte';
   import { title } from '$lib/stores';
-  import { getTimeDateString } from '$lib/utils/time';
+  import { getRelativeTime, getTimeDateString } from '$lib/utils/time';
 
   $title = 'View Client: ' + page.url.searchParams.get('id')!;
 
@@ -13,6 +17,8 @@
   }
 
   let { data }: Props = $props();
+
+  const dateCreated = $derived(getRelativeTime(data.client.created));
 </script>
 
 <Breadcrumbs>
@@ -21,47 +27,106 @@
   <li>{data.client.id}</li>
 </Breadcrumbs>
 
-<h1>{$title}</h1>
+<div class="flex flex-row items-center">
+  <h1 class="p-4 pl-0">
+    Client {data.client.id}
+  </h1>
+</div>
+Created <Tooltip tip={getTimeDateString(data.client.created)}>
+  {$dateCreated}
+</Tooltip>
 
-<div class="flex flex-row space-x-2 mb-2">
-  <a href="/client-admin/update?id={data.client.id}" class="btn btn-primary">Update</a>
+<div class="flex flex-row space-x-2 my-2">
+  <a href="/client-admin/update?id={data.client.id}" class="btn btn-secondary">
+    <IconContainer icon={Icons.Edit} width={20} />Edit Client
+  </a>
   <form action="?/deleteClient" method="POST" use:enhance>
     <input type="hidden" name="id" value={data.client.id} />
     <button
       type="button"
       class="btn btn-error"
+      disabled={!!(data.client._count.job || data.client._count.project)}
       onclick={(e) => {
         if (confirm('Are you sure you want to delete this item?')) {
           (e.currentTarget.parentElement as HTMLFormElement).requestSubmit();
         }
       }}
     >
-      Delete
+      <IconContainer icon={Icons.Delete} width={20} />
+      Delete Client
     </button>
   </form>
 </div>
 
-<table class="table table-zebra border">
-  <tbody>
-    <tr>
-      <th>ID</th>
-      <td>{data.client.id}</td>
-    </tr>
-    <tr>
-      <th>Access Token</th>
-      <td>{data.client.access_token}</td>
-    </tr>
-    <tr>
-      <th>Prefix</th>
-      <td>{data.client.prefix}</td>
-    </tr>
-    <tr>
-      <th>Created</th>
-      <td>{getTimeDateString(data.client.created)}</td>
-    </tr>
-    <tr>
-      <th>Updated</th>
-      <td>{getTimeDateString(data.client.updated)}</td>
-    </tr>
-  </tbody>
-</table>
+<div class="border p-2 rounded-md bg-base-200 my-2">
+  <div class="gridcont grid gap-x-6 gap-y-2 mb-2">
+    <div>
+      <span>
+        <IconContainer icon={Icons.Folder} width={20} />
+        Prefix:
+      </span>
+      <span>
+        {data.client.prefix}
+      </span>
+    </div>
+    <div>
+      <span>
+        <IconContainer icon={Icons.Environment} width={20} />
+        Development:
+      </span>
+      <span>
+        {data.client.development}
+      </span>
+    </div>
+    <div>
+      <span>
+        <IconContainer icon={Icons.Project} width={20} />
+        Projects:
+      </span>
+      <span>
+        {data.client._count.project}
+      </span>
+    </div>
+    <div>
+      <span>
+        <IconContainer icon={Icons.Product} width={20} />
+        Jobs:
+      </span>
+      <span>
+        {data.client._count.job}
+      </span>
+    </div>
+  </div>
+  <div class="flex items-center gap-1 mb-1">
+    <span class="inline-flex items-center gap-1">
+      <IconContainer icon={Icons.Key} width={20} />
+      Access Token:
+    </span>
+    <SecureDisplay value={data.client.access_token} />
+  </div>
+  <div>
+    <span class="inline-flex items-center gap-1">
+      <IconContainer icon={Icons.Info} width={20} />
+      Description:
+    </span>
+    <p class="ml-6">{data.client.description}</p>
+  </div>
+</div>
+
+<style>
+  .gridcont {
+    grid-template-columns: repeat(auto-fill, minmax(48%, 1fr));
+  }
+  .gridcont div {
+    display: flex;
+    place-content: space-between;
+  }
+  .gridcont div span:first-child {
+    font-family: Montserrat, sans-serif;
+    display: flex;
+    gap: calc(var(--spacing) * 1) /* 0.25rem = 4px */;
+  }
+  .gridcont div span:last-child {
+    text-align: right;
+  }
+</style>

From 82605c560c4f541a924a921ef287806d9ac3df5a Mon Sep 17 00:00:00 2001
From: Aidan Jones <aidan_jones@sil.org>
Date: Mon, 17 Aug 2026 16:52:40 -0500
Subject: [PATCH 15/19] Fix type issue

---
 src/routes/(ui)/build-admin/+page.server.ts   | 7 ++++---
 src/routes/(ui)/job-admin/+page.server.ts     | 4 ++--
 src/routes/(ui)/project-admin/+page.server.ts | 4 ++--
 src/routes/(ui)/release-admin/+page.server.ts | 4 ++--
 4 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/src/routes/(ui)/build-admin/+page.server.ts b/src/routes/(ui)/build-admin/+page.server.ts
index 5cef4334..404ac48a 100644
--- a/src/routes/(ui)/build-admin/+page.server.ts
+++ b/src/routes/(ui)/build-admin/+page.server.ts
@@ -5,13 +5,14 @@ import type { Actions, PageServerLoad } from './$types';
 import { prisma } from '$lib/server/prisma';
 import { tableSchema } from '$lib/valibot';
 
-const select: Prisma.buildSelect = {
+const select = {
   id: true,
   job_id: true,
   status: true,
   result: true,
-  codebuild_url: true
-};
+  codebuild_url: true,
+  build_guid: true
+} as const satisfies Prisma.buildSelect;
 
 export const load = (async () => {
   const builds = await prisma.build.findMany({ select, take: 20, orderBy: { id: 'desc' } });
diff --git a/src/routes/(ui)/job-admin/+page.server.ts b/src/routes/(ui)/job-admin/+page.server.ts
index 4532af69..ec89757a 100644
--- a/src/routes/(ui)/job-admin/+page.server.ts
+++ b/src/routes/(ui)/job-admin/+page.server.ts
@@ -6,7 +6,7 @@ import type { Actions, PageServerLoad } from './$types';
 import { prisma } from '$lib/server/prisma';
 import { applicationTypes, tableSchema } from '$lib/valibot';
 
-const select: Prisma.jobSelect = {
+const select = {
   id: true,
   request_id: true,
   app_id: true,
@@ -17,7 +17,7 @@ const select: Prisma.jobSelect = {
       prefix: true
     }
   }
-};
+} as const satisfies Prisma.jobSelect;
 
 const searchSchema = v.object({
   appType: v.nullable(v.picklist(applicationTypes)),
diff --git a/src/routes/(ui)/project-admin/+page.server.ts b/src/routes/(ui)/project-admin/+page.server.ts
index 960266da..e701077a 100644
--- a/src/routes/(ui)/project-admin/+page.server.ts
+++ b/src/routes/(ui)/project-admin/+page.server.ts
@@ -6,7 +6,7 @@ import type { Actions, PageServerLoad } from './$types';
 import { prisma } from '$lib/server/prisma';
 import { applicationTypes, tableSchema } from '$lib/valibot';
 
-const select: Prisma.projectSelect = {
+const select = {
   id: true,
   language_code: true,
   project_name: true,
@@ -18,7 +18,7 @@ const select: Prisma.projectSelect = {
     }
   },
   url: true
-};
+} as const satisfies Prisma.projectSelect;
 
 const searchSchema = v.object({
   appType: v.nullable(v.picklist(applicationTypes)),
diff --git a/src/routes/(ui)/release-admin/+page.server.ts b/src/routes/(ui)/release-admin/+page.server.ts
index 766f07c0..d877dd07 100644
--- a/src/routes/(ui)/release-admin/+page.server.ts
+++ b/src/routes/(ui)/release-admin/+page.server.ts
@@ -5,7 +5,7 @@ import type { Actions, PageServerLoad } from './$types';
 import { prisma } from '$lib/server/prisma';
 import { tableSchema } from '$lib/valibot';
 
-const select: Prisma.releaseSelect = {
+const select = {
   id: true,
   build: {
     select: {
@@ -16,7 +16,7 @@ const select: Prisma.releaseSelect = {
   status: true,
   result: true,
   codebuild_url: true
-};
+} as const satisfies Prisma.releaseSelect;
 
 export const load = (async () => {
   const releases = await prisma.release.findMany({

From c77f701f1683318a2ded6c566905dd46b5b3b7fb Mon Sep 17 00:00:00 2001
From: Aidan Jones <aidan_jones@sil.org>
Date: Mon, 17 Aug 2026 16:52:50 -0500
Subject: [PATCH 16/19] Fix copy-paste artifact

---
 src/routes/(ui)/release-admin/view/+page.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/(ui)/release-admin/view/+page.svelte b/src/routes/(ui)/release-admin/view/+page.svelte
index e8e9c86f..0c933eb1 100644
--- a/src/routes/(ui)/release-admin/view/+page.svelte
+++ b/src/routes/(ui)/release-admin/view/+page.svelte
@@ -25,7 +25,7 @@
 
 <Breadcrumbs>
   <li><a href="/" class="link">Home</a></li>
-  <li><a href="/build-admin" class="link">Builds</a></li>
+  <li><a href="/release-admin" class="link">Releases</a></li>
   <li>{data.release.id}</li>
 </Breadcrumbs>
 

From c9090442393c018067d3f6f13794cb79a1f9e892 Mon Sep 17 00:00:00 2001
From: Aidan Jones <aidan_jones@sil.org>
Date: Tue, 18 Aug 2026 09:56:00 -0500
Subject: [PATCH 17/19] Link to Scriptoria

---
 src/lib/components/LinkToScriptoria.svelte    | 28 +++++++++++++++++++
 .../(ui)/build-admin/view/+page.server.ts     |  8 ++++++
 src/routes/(ui)/build-admin/view/+page.svelte | 16 +++++++++--
 .../(ui)/job-admin/view/+page.server.ts       |  2 +-
 src/routes/(ui)/job-admin/view/+page.svelte   | 16 +++++++++--
 .../(ui)/project-admin/view/+page.server.ts   |  2 +-
 .../(ui)/project-admin/view/+page.svelte      | 16 +++++++++--
 .../(ui)/release-admin/view/+page.server.ts   | 12 ++++++++
 .../(ui)/release-admin/view/+page.svelte      | 16 +++++++++--
 9 files changed, 102 insertions(+), 14 deletions(-)
 create mode 100644 src/lib/components/LinkToScriptoria.svelte

diff --git a/src/lib/components/LinkToScriptoria.svelte b/src/lib/components/LinkToScriptoria.svelte
new file mode 100644
index 00000000..ef01f084
--- /dev/null
+++ b/src/lib/components/LinkToScriptoria.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+  import type { Prisma } from '@prisma/client';
+  import type { ClassValue } from 'svelte/elements';
+  import { env } from '$env/dynamic/public';
+  import { Icons } from '$lib/icons';
+  import IconContainer from '$lib/icons/IconContainer.svelte';
+
+  interface Props {
+    client: Prisma.clientGetPayload<{ select: { development: true } }> | null;
+    bucket: Prisma.projectGetPayload<{ select: { url: true } }>['url'];
+    scope: 'project' | 'job' | 'build' | 'release';
+    id: number;
+    class?: ClassValue;
+  }
+
+  let { client, bucket, scope, id, class: classes }: Props = $props();
+</script>
+
+<a
+  class={['link', classes]}
+  target="_blank"
+  href="{client?.development
+    ? 'http://localhost:6173'
+    : env.PUBLIC_SCRIPTORIA_URL}/link/{scope}/{id}{bucket &&
+    `?bucket=${encodeURIComponent(bucket)}`}"
+>
+  View in Scriptoria <IconContainer icon={Icons.Open} width={16} />
+</a>
diff --git a/src/routes/(ui)/build-admin/view/+page.server.ts b/src/routes/(ui)/build-admin/view/+page.server.ts
index ab868aca..2cc147b9 100644
--- a/src/routes/(ui)/build-admin/view/+page.server.ts
+++ b/src/routes/(ui)/build-admin/view/+page.server.ts
@@ -14,6 +14,14 @@ export const load = (async ({ url }) => {
   const build = await prisma.build.findUnique({
     where: {
       id: id.output
+    },
+    include: {
+      job: {
+        select: {
+          client: { select: { development: true } },
+          git_url: true
+        }
+      }
     }
   });
 
diff --git a/src/routes/(ui)/build-admin/view/+page.svelte b/src/routes/(ui)/build-admin/view/+page.svelte
index 7d127d65..c672a725 100644
--- a/src/routes/(ui)/build-admin/view/+page.svelte
+++ b/src/routes/(ui)/build-admin/view/+page.svelte
@@ -3,6 +3,7 @@
   import type { PageData } from './$types';
   import { page } from '$app/state';
   import Breadcrumbs from '$lib/components/Breadcrumbs.svelte';
+  import LinkToScriptoria from '$lib/components/LinkToScriptoria.svelte';
   import StatusBadge from '$lib/components/StatusBadge.svelte';
   import Tooltip from '$lib/components/Tooltip.svelte';
   import { Icons } from '$lib/icons';
@@ -36,9 +37,18 @@
 
   <StatusBadge status={data.build.result || data.build.status} />
 </div>
-Created <Tooltip tip={getTimeDateString(data.build.created)}>
-  {$dateCreated}
-</Tooltip>
+<div class="flex gap-1">
+  Created <Tooltip tip={getTimeDateString(data.build.created)}>
+    {$dateCreated}
+  </Tooltip>
+  <LinkToScriptoria
+    client={data.build.job.client}
+    bucket={data.build.job.git_url}
+    scope="build"
+    id={data.build.id}
+    class="ml-4"
+  />
+</div>
 
 <div class="border p-2 rounded-md bg-base-200 my-2">
   <div class="gridcont grid gap-x-6 gap-y-2 mb-2">
diff --git a/src/routes/(ui)/job-admin/view/+page.server.ts b/src/routes/(ui)/job-admin/view/+page.server.ts
index 7c41dabb..d6158d81 100644
--- a/src/routes/(ui)/job-admin/view/+page.server.ts
+++ b/src/routes/(ui)/job-admin/view/+page.server.ts
@@ -20,7 +20,7 @@ export const load = (async ({ url }) => {
       git_url: true,
       app_id: true,
       publisher_id: true,
-      client: { select: { id: true, prefix: true } },
+      client: { select: { id: true, prefix: true, development: true } },
       existing_version_code: true,
       created: true
     }
diff --git a/src/routes/(ui)/job-admin/view/+page.svelte b/src/routes/(ui)/job-admin/view/+page.svelte
index e3289f37..24042b4d 100644
--- a/src/routes/(ui)/job-admin/view/+page.svelte
+++ b/src/routes/(ui)/job-admin/view/+page.svelte
@@ -4,6 +4,7 @@
   import { env } from '$env/dynamic/public';
   import Breadcrumbs from '$lib/components/Breadcrumbs.svelte';
   import CopyField from '$lib/components/CopyField.svelte';
+  import LinkToScriptoria from '$lib/components/LinkToScriptoria.svelte';
   import Tooltip from '$lib/components/Tooltip.svelte';
   import { Icons, getAppIcon, getBucketIcon } from '$lib/icons';
   import IconContainer from '$lib/icons/IconContainer.svelte';
@@ -35,9 +36,18 @@
     </h1>
   </a>
 </div>
-Created <Tooltip tip={getTimeDateString(data.job.created)}>
-  {$dateCreated}
-</Tooltip>
+<div class="flex gap-1">
+  Created <Tooltip tip={getTimeDateString(data.job.created)}>
+    {$dateCreated}
+  </Tooltip>
+  <LinkToScriptoria
+    client={data.job.client}
+    bucket={data.job.git_url}
+    scope="job"
+    id={data.job.id}
+    class="ml-4"
+  />
+</div>
 
 <div class="border p-2 rounded-md bg-base-200 my-2">
   <div class="gridcont grid gap-x-6 gap-y-2 mb-2">
diff --git a/src/routes/(ui)/project-admin/view/+page.server.ts b/src/routes/(ui)/project-admin/view/+page.server.ts
index c7bd8154..889f2257 100644
--- a/src/routes/(ui)/project-admin/view/+page.server.ts
+++ b/src/routes/(ui)/project-admin/view/+page.server.ts
@@ -23,7 +23,7 @@ export const load = (async ({ url }) => {
       language_code: true,
       app_id: true,
       url: true,
-      client: { select: { id: true, prefix: true } },
+      client: { select: { id: true, prefix: true, development: true } },
       error: true
     }
   });
diff --git a/src/routes/(ui)/project-admin/view/+page.svelte b/src/routes/(ui)/project-admin/view/+page.svelte
index 5ad31191..fc370678 100644
--- a/src/routes/(ui)/project-admin/view/+page.svelte
+++ b/src/routes/(ui)/project-admin/view/+page.svelte
@@ -3,6 +3,7 @@
   import { page } from '$app/state';
   import Breadcrumbs from '$lib/components/Breadcrumbs.svelte';
   import CopyField from '$lib/components/CopyField.svelte';
+  import LinkToScriptoria from '$lib/components/LinkToScriptoria.svelte';
   import StatusBadge from '$lib/components/StatusBadge.svelte';
   import Tooltip from '$lib/components/Tooltip.svelte';
   import { Icons, getAppIcon, getBucketIcon } from '$lib/icons';
@@ -32,9 +33,18 @@
   <h1 class="p-4 pl-0">{data.project.project_name}</h1>
   <StatusBadge status={data.project.result || data.project.status} />
 </div>
-Created <Tooltip tip={getTimeDateString(data.project.created)}>
-  {$dateCreated}
-</Tooltip>
+<div class="flex gap-1">
+  Created <Tooltip tip={getTimeDateString(data.project.created)}>
+    {$dateCreated}
+  </Tooltip>
+  <LinkToScriptoria
+    client={data.project.client}
+    bucket={data.project.url}
+    scope="project"
+    id={data.project.id}
+    class="ml-4"
+  />
+</div>
 
 <div class="border p-2 rounded-md bg-base-200 my-2">
   <div class="gridcont grid gap-x-6 gap-y-2 mb-2">
diff --git a/src/routes/(ui)/release-admin/view/+page.server.ts b/src/routes/(ui)/release-admin/view/+page.server.ts
index 007f265a..86cd24fa 100644
--- a/src/routes/(ui)/release-admin/view/+page.server.ts
+++ b/src/routes/(ui)/release-admin/view/+page.server.ts
@@ -14,6 +14,18 @@ export const load = (async ({ url }) => {
   const release = await prisma.release.findUnique({
     where: {
       id: id.output
+    },
+    include: {
+      build: {
+        select: {
+          job: {
+            select: {
+              client: { select: { development: true } },
+              git_url: true
+            }
+          }
+        }
+      }
     }
   });
 
diff --git a/src/routes/(ui)/release-admin/view/+page.svelte b/src/routes/(ui)/release-admin/view/+page.svelte
index 0c933eb1..3da3840d 100644
--- a/src/routes/(ui)/release-admin/view/+page.svelte
+++ b/src/routes/(ui)/release-admin/view/+page.svelte
@@ -3,6 +3,7 @@
   import type { PageData } from './$types';
   import { page } from '$app/state';
   import Breadcrumbs from '$lib/components/Breadcrumbs.svelte';
+  import LinkToScriptoria from '$lib/components/LinkToScriptoria.svelte';
   import StatusBadge from '$lib/components/StatusBadge.svelte';
   import Tooltip from '$lib/components/Tooltip.svelte';
   import { Icons } from '$lib/icons';
@@ -36,9 +37,18 @@
 
   <StatusBadge status={data.release.result || data.release.status} />
 </div>
-Created <Tooltip tip={getTimeDateString(data.release.created)}>
-  {$dateCreated}
-</Tooltip>
+<div class="flex gap-1">
+  Created <Tooltip tip={getTimeDateString(data.release.created)}>
+    {$dateCreated}
+  </Tooltip>
+  <LinkToScriptoria
+    client={data.release.build.job.client}
+    bucket={data.release.build.job.git_url}
+    scope="release"
+    id={data.release.id}
+    class="ml-4"
+  />
+</div>
 
 <div class="border p-2 rounded-md bg-base-200 my-2">
   <div class="gridcont grid gap-x-6 gap-y-2 mb-2">

From 08ff76dcc185ed3ec40c6d8472218779b02a93f2 Mon Sep 17 00:00:00 2001
From: Aidan Jones <aidan_jones@sil.org>
Date: Tue, 18 Aug 2026 11:49:17 -0500
Subject: [PATCH 18/19] Remove link for request id

---
 src/routes/(ui)/job-admin/+page.svelte      | 11 +++--------
 src/routes/(ui)/job-admin/view/+page.svelte | 20 +++++++++++++-------
 2 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/src/routes/(ui)/job-admin/+page.svelte b/src/routes/(ui)/job-admin/+page.svelte
index 81ea9567..6b6b35ad 100644
--- a/src/routes/(ui)/job-admin/+page.svelte
+++ b/src/routes/(ui)/job-admin/+page.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
   import { type FormResult, superForm } from 'sveltekit-superforms';
   import type { PageData } from './$types';
-  import { env } from '$env/dynamic/public';
   import AppTypeSelector from '$lib/components/AppTypeSelector.svelte';
   import Breadcrumbs from '$lib/components/Breadcrumbs.svelte';
   import Pagination from '$lib/components/Pagination.svelte';
@@ -91,13 +90,9 @@
           <h3 class="grow flex flex-row gap-2 items-start pl-1">
             <a class="link" href="/job-admin/view?id={job.id}">#{job.id}</a>
             <img src={getAppIcon(job.app_id as ApplicationType)} width={20} alt={job.app_id} />
-            <a
-              class="link"
-              href="{env.PUBLIC_SCRIPTORIA_URL}/products/{job.request_id}"
-              target="_blank"
-            >
-              {job.request_id}<IconContainer icon={Icons.Open} width={16} />
-            </a>
+            <div>
+              {job.request_id}
+            </div>
           </h3>
         </div>
         <div class="flex flex-row items-center gap-x-1 pl-1">
diff --git a/src/routes/(ui)/job-admin/view/+page.svelte b/src/routes/(ui)/job-admin/view/+page.svelte
index 24042b4d..fd89a7b9 100644
--- a/src/routes/(ui)/job-admin/view/+page.svelte
+++ b/src/routes/(ui)/job-admin/view/+page.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
   import type { PageData } from './$types';
   import { page } from '$app/state';
-  import { env } from '$env/dynamic/public';
   import Breadcrumbs from '$lib/components/Breadcrumbs.svelte';
   import CopyField from '$lib/components/CopyField.svelte';
   import LinkToScriptoria from '$lib/components/LinkToScriptoria.svelte';
@@ -30,11 +29,9 @@
 </Breadcrumbs>
 
 <div class="flex flex-row items-center">
-  <a class="link" href="{env.PUBLIC_SCRIPTORIA_URL}/products/{data.job.request_id}" target="_blank">
-    <h1 class="p-4 pl-0">
-      {data.job.request_id}<IconContainer icon={Icons.Open} width={24} />
-    </h1>
-  </a>
+  <h1 class="p-4 pl-0">
+    Job {data.job.id}
+  </h1>
 </div>
 <div class="flex gap-1">
   Created <Tooltip tip={getTimeDateString(data.job.created)}>
@@ -108,7 +105,16 @@
         <p class="grow pr-2">
           /{data.job.git_url.split('/').pop()}
         </p>
-        <CopyField value={data.job.git_url!} />
+        <CopyField value={data.job.git_url} />
+      </div>
+    </div>
+  {/if}
+  {#if data.job.request_id}
+    <div>
+      <span>Request ID:</span>
+      <div class="flex rounded-md text-nowrap bg-base-200 p-3 pt-2 mt-2">
+        <div class="grow">{data.job.request_id}</div>
+        <CopyField value={data.job.request_id} />
       </div>
     </div>
   {/if}

From 94c24a0b187fb9f2f22b4c0f1cd360d4cc38c407 Mon Sep 17 00:00:00 2001
From: Aidan Jones <aidan_jones@sil.org>
Date: Tue, 18 Aug 2026 11:50:43 -0500
Subject: [PATCH 19/19] Remove unused component

---
 src/lib/components/SortTable.svelte | 144 ----------------------------
 1 file changed, 144 deletions(-)
 delete mode 100644 src/lib/components/SortTable.svelte

diff --git a/src/lib/components/SortTable.svelte b/src/lib/components/SortTable.svelte
deleted file mode 100644
index f052094e..00000000
--- a/src/lib/components/SortTable.svelte
+++ /dev/null
@@ -1,144 +0,0 @@
-<!--
-  A table that can be sorted by column.
-  @component
--->
-<script lang="ts" generics="RowItem extends Record<string, unknown>">
-  import type { Snippet } from 'svelte';
-  import { Icons } from '$lib/icons';
-  import IconContainer from '$lib/icons/IconContainer.svelte';
-
-  interface Props {
-    data: RowItem[];
-    /** Definition of the columns for the table */
-    columns: {
-      /** Internal id, used for determining which column is being sorted. Also dispatched to `onSort` */
-      id: string;
-      /** User-facing string for column headers */
-      header: string;
-      /** comparison function. Will not sort a field if this is undefined, even if `serverSide` is `true`.
-       *
-       * If `serverSide` is `true`, just use a dummy function like `() => 0`
-       */
-      compare?: (a: RowItem, b: RowItem) => number;
-    }[];
-    className?: string;
-    /** If this is true, will defer sorting to the server instead */
-    serverSide?: boolean;
-    /** Initial sorting direction */
-    startDesc?: boolean;
-    onSort?: (field: string, direction: 'asc' | 'desc') => void;
-    row: Snippet<[RowItem, number]>;
-  }
-
-  let {
-    data = $bindable(),
-    columns,
-    className = '',
-    serverSide = false,
-    startDesc = false,
-    onSort,
-    row
-  }: Props = $props();
-
-  let firstSortable = $derived(columns.find((c) => c.compare !== undefined)!);
-
-  /** Current field being sorted. Defaults to first field that can be sorted */
-  let current = $state(columns.find((c) => c.compare !== undefined)!);
-  let descending = $state(startDesc);
-
-  function sortColByDirection(key: (typeof columns)[0]) {
-    if (current.id !== key.id) {
-      // change current field
-      descending = false;
-      current = key;
-    } else {
-      if (descending) {
-        // reset to sort default field
-        if (current.id !== firstSortable.id) {
-          sortColByDirection(firstSortable);
-          return; //don't sort twice
-        } else {
-          descending = false;
-        }
-      } else {
-        descending = true;
-      }
-    }
-    if (serverSide) {
-      onSort?.(current.id, descending ? 'desc' : 'asc');
-    } else {
-      // sort based on current field
-      // if blank, sort first field
-      const compare = current.compare || firstSortable.compare;
-      data = data.sort((a, b) => {
-        return descending ? (compare?.(b, a) ?? 0) : (compare?.(a, b) ?? 0);
-      });
-    }
-  }
-</script>
-
-<div class="overflow-y {className}">
-  <table class="table">
-    <thead>
-      <tr>
-        {#each columns as c}
-          <th
-            onclick={() => {
-              if (c.compare) {
-                sortColByDirection(c);
-              }
-            }}
-          >
-            <label class="flex flex-row">
-              <span>{c.header}</span>
-              <span class="direction-arrow">
-                {#if current.id === c.id && c.compare}
-                  {#if descending}
-                    <IconContainer icon={Icons.SortDesc} width={24} />
-                  {:else}
-                    <IconContainer icon={Icons.SortAsc} width={24} />
-                  {/if}
-                {:else}
-                  &nbsp;
-                {/if}
-              </span>
-            </label>
-          </th>
-        {/each}
-      </tr>
-    </thead>
-    <tbody>
-      {#each data as d, i}
-        {@render row(d, i)}
-      {/each}
-    </tbody>
-  </table>
-</div>
-
-<style>
-  tr {
-    cursor: pointer;
-    user-select: none;
-  }
-  thead {
-    /* this helps prevent the vertical jankiness */
-    line-height: inherit;
-    position: sticky;
-    top: 0;
-    background-color: var(--color-neutral);
-  }
-  .direction-arrow {
-    display: inline-block;
-    /* reserve space for the arrow, so headers don't expand when arrow is visible */
-    min-width: 24px;
-    min-height: 26px;
-  }
-  label {
-    cursor: pointer;
-    user-select: none;
-  }
-  th {
-    border-style: var(--tw-border-style);
-    border-width: 1px;
-  }
-</style>