create-aiaui-module 0.1.1-TEST → 0.2.0

package/templates/JobDashboard/client/src/contract.ts

@@ -0,0 +1,146 @@
+import type { Component } from "vue";
+
+export type ModuleApi = {
+  call<T>(
+    method: string,
+    path: string,
+    options?: { query?: Record<string, unknown>; body?: unknown },
+  ): Promise<T>;
+};
+
+/* -------------------------------------------------------------------------- */
+/* Slot names                                                                 */
+/* -------------------------------------------------------------------------- */
+
+/**
+ * Every customizable slot of a job card. Leaves override a single piece;
+ * region slots override the whole region (leaf overrides then only apply
+ * inside the platform's default regions). Replaceable top to bottom:
+ *
+ *  board          the whole job card
+ *  ├── headerRegion     job name + lot id + status    (slot.board also
+ *  │    ├── jobName, lotId, status                    replaces the row)
+ *  ├── middleRegion      input carriers + timeline + output carriers
+ *  │                     └── inputCarriers, timeline, outputCarriers
+ *  └── bottomRegion      recipe area + footer         (slot.board also
+ *       └── recipe                                    replaces footer)
+ */
+export const SlotKey = {
+  board: "board",
+  headerRegion: "headerRegion",
+  jobName: "jobName",
+  lotId: "lotId",
+  status: "status",
+  middleRegion: "middleRegion",
+  inputCarriers: "inputCarriers",
+  timeline: "timeline",
+  outputCarriers: "outputCarriers",
+  bottomRegion: "bottomRegion",
+  recipe: "recipe",
+} as const;
+
+export type SlotKeyType = (typeof SlotKey)[keyof typeof SlotKey];
+
+/** Any Vue component that renders one slot. Custom components receive `ModuleSlotProps`. */
+export type SlotComponent = Component;
+
+export type SlotMap = Record<string, SlotComponent>;
+
+/* -------------------------------------------------------------------------- */
+/* Default panel data contract                                                */
+/* -------------------------------------------------------------------------- */
+
+/** One carrier entry rendered by the carrier slots. */
+export type ModuleCarrier = { code: string };
+
+/** One step of a job's timeline (rendered by the default `timeline` slot). */
+export type ModuleTimelineStep = {
+  label: string;
+  state?: "done" | "active" | "pending";
+  /** ISO timestamp; durations between steps are computed client-side. */
+  at?: string | null;
+};
+
+/**
+ * One job entry returned by `GET /jobs` (the module's default data contract).
+ * Every item is rendered as one job card (the `board` slot).
+ */
+export type ModuleJobRecord = {
+  id: string;
+  name: string;
+  lot?: string | null;
+  /** State name; matched against `config.states` for its color and icon. */
+  state?: string | null;
+  carriers?: { input?: ModuleCarrier[]; output?: ModuleCarrier[] };
+  timeline?: ModuleTimelineStep[];
+  recipe?: string | null;
+};
+
+/** Response of `GET /jobs` consumed by the default panel. */
+export type ModuleJobPage = {
+  items: ModuleJobRecord[];
+  total: number;
+  page?: number;
+  pageSize?: number;
+};
+
+/** One state entry returned by `GET /config`. */
+export type ModuleStateVisual = {
+  name: string;
+  color?: string | null;
+  icon?: string | null;
+};
+
+/**
+ * Response of `GET /config` (the module's configuration contract).
+ * Every field is optional; any missing field falls back to the template's
+ * built-in defaults (all parts visible, default state colors).
+ */
+export type ModuleConfig = {
+  display?: {
+    lotId?: boolean;
+    recipe?: boolean;
+    inputCarriers?: boolean;
+    outputCarriers?: boolean;
+    timeline?: boolean;
+  };
+  /** State visuals for `<slot>status</slot>`; missing entries use the built-in token map. */
+  states?: ModuleStateVisual[];
+};
+
+/* -------------------------------------------------------------------------- */
+/* Context & customization                                                    */
+/* -------------------------------------------------------------------------- */
+
+export type ModuleContext = {
+  module: string;
+  instanceId: string;
+  api: ModuleApi;
+  signal: AbortSignal;
+  place: (spec: {
+    kind: "route" | "slot";
+    path?: string;
+    slot?: string;
+    label?: string;
+    order?: number;
+  }) => void;
+};
+
+/**
+ * What the host platform actually passes into `mount`. The module owns everything
+ * outside this context and applies it to slots itself.
+ */
+export type HostModuleContext = ModuleContext;
+
+/**
+ * Props every slot component receives: the module context, the per-job record
+ * being rendered, and the merged module configuration.
+ */
+export type ModuleSlotProps = {
+  context: ModuleContext;
+  job: ModuleJobRecord;
+  config: ModuleConfig;
+};
+
+/** A slot override map. Editing `resources/src/customization.ts` swaps these in. */
+export type Customization = { slots: SlotMap };

package/templates/JobDashboard/client/src/customization.ts

@@ -0,0 +1,30 @@
+import type { Customization } from "./contract";
+
+/**
+ * Developer customization entry point.
+ *
+ * Default (no change): keeps the built-in job card layout.
+ *
+ * Replace one piece inside a card (layout stays platform-owned):
+ *   import MyJobName from "./custom/MyJobName.vue";
+ *   export const customization: Customization = {
+ *     slots: { jobName: MyJobName },
+ *   };
+ *
+ * Replace a whole region or the whole card:
+ *   import MyMiddle from "./custom/MyMiddle.vue";
+ *   export const customization: Customization = {
+ *     slots: { middleRegion: MyMiddle },   // the three columns region
+ *   };
+ *   export const customization: Customization = {
+ *     slots: { board: MyBoard },           // the entire single-job card
+ *   };
+ *
+ * Every custom component receives `{ context, job, config }` as props
+ * (see `contract.ts` for the slot table and CUSTOMIZATION.md for the API/data
+ * contract). The platform, batch listing, `GET /jobs`/`GET /config` and card
+ * frame stay under AIAUI control regardless of which slot you replace.
+ */
+export const customization: Customization = {
+  slots: {},
+};

package/templates/JobDashboard/client/src/defaults/DefaultPanel.vue

@@ -0,0 +1,129 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from "vue";
+import type {
+  ModuleConfig,
+  ModuleContext,
+  ModuleJobPage,
+  SlotMap,
+} from "../contract";
+import { mergeConfig } from "./config-defaults";
+import { DEMO_JOBS } from "./board-data";
+import { defaultSlots } from "./slots";
+import { customization } from "../customization";
+import JobCard from "./JobCard.vue";
+import Icons from "./Icons.vue";
+
+const props = defineProps<{ context: ModuleContext; slotMap?: SlotMap }>();
+
+const slotMap = computed(() =>
+  props.slotMap ?? { ...defaultSlots, ...(customization.slots ?? {}) },
+);
+
+const jobs = ref<ModuleJobPage["items"]>(DEMO_JOBS);
+const config = ref<ModuleConfig>(mergeConfig(null));
+const note = ref("");
+const search = ref("");
+const stateFilter = ref("");
+const loading = ref(true);
+
+async function loadConfig() {
+  const signal = props.context.signal;
+  try {
+    const raw = await props.context.api.call<ModuleConfig>("GET", "config");
+    if (signal.aborted) return;
+    config.value = mergeConfig(raw);
+  } catch {
+    if (signal.aborted) return;
+    // keep whatever config we have (defaults on first mount)
+  }
+}
+
+async function loadJobs() {
+  const signal = props.context.signal;
+  loading.value = true;
+  try {
+    const page = await props.context.api.call<ModuleJobPage>("GET", "jobs", {
+      query: { page: 1, pageSize: 10 },
+    });
+    if (signal.aborted) return;
+    jobs.value = page.items;
+    note.value = "";
+  } catch {
+    if (signal.aborted) return;
+    jobs.value = DEMO_JOBS;
+    note.value = "GET /jobs unavailable — showing demo data";
+  } finally {
+    if (!signal.aborted) loading.value = false;
+  }
+}
+
+async function refresh() {
+  await Promise.all([loadConfig(), loadJobs()]);
+}
+
+onMounted(refresh);
+
+const states = computed(() =>
+  Array.from(new Set(jobs.value.map((job) => job.state ?? "—"))),
+);
+
+const visibleJobs = computed(() =>
+  jobs.value.filter((job) => {
+    const matchesName =
+      !search.value.trim() ||
+      job.name.toLowerCase().includes(search.value.trim().toLowerCase());
+    const matchesState =
+      !stateFilter.value || (job.state ?? "—") === stateFilter.value;
+    return matchesName && matchesState;
+  }),
+);
+</script>
+
+<template>
+  <section class="legacy-jobs" aria-label="Job Dashboard">
+    <header class="legacy-toolbar">
+      <div class="legacy-filters">
+        <label class="legacy-search">
+          <Icons name="search" :size="14" />
+          <input
+            v-model="search"
+            placeholder="Search jobs"
+            type="text"
+            aria-label="Search jobs"
+          />
+        </label>
+        <select
+          v-model="stateFilter"
+          class="legacy-filter"
+          aria-label="Status filter"
+        >
+          <option value="">All statuses</option>
+          <option v-for="state in states" :key="state" :value="state">
+            {{ state }}
+          </option>
+        </select>
+        <button
+          class="legacy-refresh"
+          type="button"
+          title="Refresh"
+          :aria-busy="loading"
+          @click="refresh"
+        >
+          <Icons name="refresh" :size="14" :class="{ 'aia-spinning': loading }" />
+        </button>
+      </div>
+    </header>
+    <p v-if="note" class="legacy-job-note" role="note">{{ note }}</p>
+    <JobCard
+      v-for="job in visibleJobs"
+      :key="job.id"
+      :context="props.context"
+      :slotMap="slotMap"
+      :job="job"
+      :config="config"
+    />
+    <p v-if="visibleJobs.length === 0" class="legacy-job-empty">
+      No jobs match the current filters.
+    </p>
+  </section>
+</template>

package/templates/JobDashboard/client/src/defaults/Icons.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+/* Minimal inline icon set shared by the built-in slots (no external dependency). */
+
+const props = defineProps<{
+  name:
+    | "clock"
+    | "list"
+    | "stop"
+    | "activity"
+    | "flag"
+    | "search"
+    | "refresh"
+    | "chevron-down"
+    | "package";
+  size?: number;
+}>();
+
+const paths: Record<string, string> = {
+  clock:
+    '<circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline>',
+  list: '<line x1="8" y1="6" x2="21" y2="6"></line><line x1="8" y1="12" x2="21" y2="12"></line><line x1="8" y1="18" x2="21" y2="18"></line><line x1="3" y1="6" x2="3.01" y2="6"></line><line x1="3" y1="12" x2="3.01" y2="12"></line><line x1="3" y1="18" x2="3.01" y2="18"></line>',
+  stop: '<circle cx="12" cy="12" r="10"></circle><rect x="9" y="9" width="6" height="6" rx="1"></rect>',
+  activity: '<path d="M22 12h-4l-3 9L9 3l-3 9H2"></path>',
+  flag:
+    '<path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z"></path><line x1="4" y1="22" x2="4" y2="15"></line>',
+  search:
+    '<circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line>',
+  refresh:
+    '<polyline points="23 4 23 10 17 10"></polyline><polyline points="1 20 1 14 7 14"></polyline><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path>',
+  "chevron-down": '<polyline points="6 9 12 15 18 9"></polyline>',
+  package:
+    '<path d="m9 4c0-1.7 1.3-3 3-3s3 1.3 3 3v1h3.4c1.4 0 2.6 1.1 2.6 2.5v10c0 1.4-1.1 2.5-2.6 2.5H5.6C4.1 20 3 18.9 3 17.5v-10C3 6.1 4.1 5 5.6 5H9V4Z"></path><path d="M12 4v16"></path>',
+};
+</script>
+
+<template>
+  <svg
+    :width="props.size ?? 16"
+    :height="props.size ?? 16"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+    v-html="paths[props.name]"
+  />
+</template>

package/templates/JobDashboard/client/src/defaults/InputCarriers.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { ModuleSlotProps } from "../contract";
+
+const props = defineProps<ModuleSlotProps>();
+const carriers = props.job.carriers?.input ?? [];
+</script>
+
+<template>
+  <aside class="legacy-carriers legacy-carriers-in" :aria-label="`Input carriers for ${job.name}`">
+    <span class="legacy-carriers-label">INPUT CARRIER(S)</span>
+    <div class="legacy-carriers-list">
+      <span v-for="carrier in carriers" :key="carrier.code" class="legacy-carrier-chip">{{
+        carrier.code
+      }}</span>
+      <span v-if="carriers.length === 0" class="legacy-carrier-empty">—</span>
+    </div>
+  </aside>
+</template>

package/templates/JobDashboard/client/src/defaults/JobBottom.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import type {
+  ModuleConfig,
+  ModuleContext,
+  ModuleJobRecord,
+  SlotMap,
+} from "../contract";
+import Recipe from "./Recipe.vue";
+
+const props = defineProps<{
+  context: ModuleContext;
+  job: ModuleJobRecord;
+  config: ModuleConfig;
+  slotMap?: SlotMap;
+}>();
+
+const leafProps = computed(() => ({
+  context: props.context,
+  job: props.job,
+  config: props.config,
+}));
+
+const showRecipe = computed(() => props.config.display?.recipe !== false);
+const recipe = computed(() => (props.slotMap ?? {}).recipe ?? Recipe);
+</script>
+
+<template>
+  <div v-if="showRecipe" class="legacy-progress">
+    <component :is="recipe" v-bind="leafProps" />
+  </div>
+</template>

package/templates/JobDashboard/client/src/defaults/JobCard.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import type { Component } from "vue";
+import type {
+  ModuleConfig,
+  ModuleContext,
+  ModuleJobRecord,
+  SlotMap,
+} from "../contract";
+import JobHeader from "./JobHeader.vue";
+import JobMiddle from "./JobMiddle.vue";
+import JobBottom from "./JobBottom.vue";
+
+/**
+ * Default `board` slot = one job card. Overriding `board` replaces the whole
+ * card (header, middle, bottom); leaf/region overrides then only apply when
+ * the platform's default board composes them.
+ */
+const props = defineProps<{
+  context: ModuleContext;
+  job: ModuleJobRecord;
+  config: ModuleConfig;
+  slotMap?: SlotMap;
+}>();
+
+const board = computed(() => props.slotMap?.board ?? null);
+const regionProps = computed(() => ({ context: props.context, job: props.job, config: props.config, slotMap: props.slotMap }));
+const headerRegion = computed(() => props.slotMap?.headerRegion ?? JobHeader);
+const middleRegion = computed(() => props.slotMap?.middleRegion ?? JobMiddle);
+const bottomRegion = computed(() => props.slotMap?.bottomRegion ?? JobBottom);
+</script>
+
+<template>
+  <article class="legacy-card" :data-job-id="job.id">
+    <component
+      v-if="board"
+      :is="board as Component"
+      :context="context"
+      :job="job"
+      :config="config"
+    />
+    <template v-else>
+      <component :is="headerRegion" v-bind="regionProps" />
+      <component :is="middleRegion" v-bind="regionProps" />
+      <component :is="bottomRegion" v-bind="regionProps" />
+    </template>
+  </article>
+</template>

package/templates/JobDashboard/client/src/defaults/JobHeader.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import type {
+  ModuleConfig,
+  ModuleContext,
+  ModuleJobRecord,
+  SlotMap,
+} from "../contract";
+import JobName from "./JobName.vue";
+import LotId from "./LotId.vue";
+import Status from "./Status.vue";
+
+const props = defineProps<{
+  context: ModuleContext;
+  job: ModuleJobRecord;
+  config: ModuleConfig;
+  slotMap?: SlotMap;
+}>();
+
+const leafProps = computed(() => ({
+  context: props.context,
+  job: props.job,
+  config: props.config,
+}));
+
+const jobName = computed(() => (props.slotMap ?? {}).jobName ?? JobName);
+const lotId = computed(() =>
+  props.config.display?.lotId === false ? null : ((props.slotMap ?? {}).lotId ?? LotId),
+);
+const status = computed(() => (props.slotMap ?? {}).status ?? Status);
+</script>
+
+<template>
+  <div class="legacy-job-head">
+    <div class="legacy-job-main">
+      <component :is="jobName" v-bind="leafProps" />
+      <component v-if="lotId" :is="lotId" v-bind="leafProps" />
+    </div>
+    <component :is="status" v-bind="leafProps" />
+  </div>
+</template>

package/templates/JobDashboard/client/src/defaults/JobMiddle.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import type {
+  ModuleConfig,
+  ModuleContext,
+  ModuleJobRecord,
+  SlotMap,
+} from "../contract";
+import InputCarriers from "./InputCarriers.vue";
+import OutputCarriers from "./OutputCarriers.vue";
+import Timeline from "./Timeline.vue";
+
+const props = defineProps<{
+  context: ModuleContext;
+  job: ModuleJobRecord;
+  config: ModuleConfig;
+  slotMap?: SlotMap;
+}>();
+
+const leafProps = computed(() => ({
+  context: props.context,
+  job: props.job,
+  config: props.config,
+}));
+
+const showInput = computed(() => props.config.display?.inputCarriers !== false);
+const showTimeline = computed(() => props.config.display?.timeline !== false);
+const showOutput = computed(() => props.config.display?.outputCarriers !== false);
+
+const inputCarriers = computed(() => (props.slotMap ?? {}).inputCarriers ?? InputCarriers);
+const timeline = computed(() => (props.slotMap ?? {}).timeline ?? Timeline);
+const outputCarriers = computed(() => (props.slotMap ?? {}).outputCarriers ?? OutputCarriers);
+</script>
+
+<template>
+  <div class="legacy-body">
+    <component v-if="showInput" :is="inputCarriers" v-bind="leafProps" />
+    <component v-if="showTimeline" :is="timeline" v-bind="leafProps" />
+    <component v-if="showOutput" :is="outputCarriers" v-bind="leafProps" />
+  </div>
+</template>

package/templates/JobDashboard/client/src/defaults/JobName.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import type { ModuleSlotProps } from "../contract";
+
+defineProps<ModuleSlotProps>();
+</script>
+
+<template>
+  <span class="legacy-job-name">{{ job.name }}</span>
+</template>

package/templates/JobDashboard/client/src/defaults/LotId.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { ModuleSlotProps } from "../contract";
+import Icons from "./Icons.vue";
+
+defineProps<ModuleSlotProps>();
+</script>
+
+<template>
+  <span v-if="job.lot" class="legacy-lot" :title="`Lot ID · ${job.lot}`">
+    <Icons name="package" :size="12" />
+    <span class="legacy-lot-label">Lot ID</span>
+    <span class="legacy-lot-value">{{ job.lot }}</span>
+  </span>
+</template>

package/templates/JobDashboard/client/src/defaults/OutputCarriers.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { ModuleSlotProps } from "../contract";
+
+const props = defineProps<ModuleSlotProps>();
+const carriers = props.job.carriers?.output ?? [];
+</script>
+
+<template>
+  <aside
+    class="legacy-carriers legacy-carriers-out"
+    :aria-label="`Output carriers for ${job.name}`"
+  >
+    <span class="legacy-carriers-label">OUTPUT CARRIER(S)</span>
+    <div class="legacy-carriers-list">
+      <span v-for="carrier in carriers" :key="carrier.code" class="legacy-carrier-chip">{{
+        carrier.code
+      }}</span>
+      <span v-if="carriers.length === 0" class="legacy-carrier-empty">—</span>
+    </div>
+  </aside>
+</template>

package/templates/JobDashboard/client/src/defaults/Recipe.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { ModuleSlotProps } from "../contract";
+
+defineProps<ModuleSlotProps>();
+</script>
+
+<template>
+  <div class="legacy-recipe-row">
+    <span class="legacy-recipe-label">Recipe</span>
+    <span class="legacy-recipe">{{ job.recipe ?? "—" }}</span>
+  </div>
+</template>

package/templates/JobDashboard/client/src/defaults/Status.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import type { ModuleSlotProps, ModuleStateVisual } from "../contract";
+import { tokenStateIcon } from "./format";
+
+const props = defineProps<ModuleSlotProps>();
+
+const visual = computed<Partial<ModuleStateVisual>>(() => {
+  const hit = props.config.states?.find(
+    (s) => s.name.toLowerCase() === (props.job.state ?? "").toLowerCase(),
+  );
+  return hit ?? { color: null, icon: tokenStateIcon(props.job.state) };
+});
+
+const chipStyle = computed<Record<string, string> | undefined>(() => {
+  if (!visual.value.color) return undefined;
+  return {
+    color: visual.value.color,
+    borderColor: `color-mix(in srgb, ${visual.value.color} 22%, #ffffff)`,
+    background: `color-mix(in srgb, ${visual.value.color} 12%, #ffffff)`,
+  };
+});
+</script>
+
+<template>
+  <span class="legacy-chip" :style="chipStyle" :data-state="job.state ?? ''">
+    {{ job.state ?? "—" }}
+  </span>
+</template>