create-aiaui-module 0.1.0 → 0.1.2-TEST

package/templates/JobInformation/resources/src/contract.ts

@@ -8,34 +8,115 @@ export type ModuleApi = {
   ): Promise<T>;
 };
 
-/** Bus listener signature. Payload is deliberately loose; type it at the use site. */
-export type ModuleBusListener = (payload?: any) => void;
+/* -------------------------------------------------------------------------- */
+/* Slot names                                                                 */
+/* -------------------------------------------------------------------------- */
 
 /**
- * A tiny communication bus shared by every slot component of one mount.
+ * 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:
  *
- * - `emit` / `on` / `off` — decoupled events between slots
- * - `expose` / `peer` — imperative handles published by one slot and called by another
- *
- * The bus is created per `mount` by `index.ts`. It never crosses module or
- * Instance boundaries: switching an Instance mounts a fresh bus.
+ *  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 ModuleBus = {
-  emit(event: string, payload?: unknown): void;
-  on(event: string, listener: ModuleBusListener): void;
-  off(event: string, listener: ModuleBusListener): void;
-  expose<T extends object>(name: string, handle: T): void;
-  release(name: string): void;
-  peer<T extends object>(name: string): T | undefined;
+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;
-  /** Sibling-slot communication; created per mount. See CUSTOMIZATION.md. */
-  bus: ModuleBus;
   place: (spec: {
     kind: "route" | "slot";
     path?: string;
@@ -46,29 +127,20 @@ export type ModuleContext = {
 };
 
 /**
- * What the host platform actually passes into `mount`. The module enriches
- * it with `bus` before slot components ever see it; slots always receive the
- * full `ModuleContext` (with `bus`).
+ * What the host platform actually passes into `mount`. The module owns everything
+ * outside this context and applies it to slots itself.
  */
-export type HostModuleContext = Omit<ModuleContext, "bus">;
+export type HostModuleContext = ModuleContext;
 
 /**
- * A replaceable UI box. Slot components receive `context` as their only prop,
- * so a developer can swap any box while keeping access to the module API.
+ * Props every slot component receives: the module context, the per-job record
+ * being rendered, and the merged module configuration.
  */
-export type SlotComponent = Component;
-
-export type SlotMap = Record<string, SlotComponent>;
-
-export type SlotCustomization = {
-  mode?: "slots";
-  slots?: SlotMap;
-};
-
-export type FullCustomization = {
-  mode: "full";
-  mount: (container: HTMLElement, context: ModuleContext) => void | Promise<void>;
-  unmount: () => void;
+export type ModuleSlotProps = {
+  context: ModuleContext;
+  job: ModuleJobRecord;
+  config: ModuleConfig;
 };
 
-export type Customization = SlotCustomization | FullCustomization;
+/** A slot override map. Editing `resources/src/customization.ts` swaps these in. */
+export type Customization = { slots: SlotMap };

package/templates/JobInformation/resources/src/customization.ts

@@ -3,23 +3,28 @@ import type { Customization } from "./contract";
 /**
  * Developer customization entry point.
  *
- * Default (no change): keeps the built-in panel.
+ * Default (no change): keeps the built-in job card layout.
  *
- * Partial (replace individual boxes):
- *   import MyHeader from "./custom/MyHeader.vue";
+ * Replace one piece inside a card (layout stays platform-owned):
+ *   import MyJobName from "./custom/MyJobName.vue";
  *   export const customization: Customization = {
- *     mode: "slots",
- *     slots: { header: MyHeader },
+ *     slots: { jobName: MyJobName },
  *   };
  *
- * Full (replace the entire module):
+ * Replace a whole region or the whole card:
+ *   import MyMiddle from "./custom/MyMiddle.vue";
  *   export const customization: Customization = {
- *     mode: "full",
- *     mount(container, context) { ... },
- *     unmount() { ... },
+ *     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 = {
-  mode: "slots",
   slots: {},
 };

package/templates/JobInformation/resources/src/defaults/DefaultPanel.vue

@@ -1,22 +1,129 @@
 <script setup lang="ts">
-import type { Component } from "vue";
-import type { ModuleContext } from "../contract";
-
-const props = defineProps<{
-  context: ModuleContext;
-  slots: Record<string, Component>;
-  slotOrder: string[];
-}>();
+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>
-  <main class="aia-job-information">
-    <component
-      v-for="name in props.slotOrder"
-      v-if="props.slots[name]"
-      :key="name"
-      :is="props.slots[name]"
+  <section class="legacy-jobs" aria-label="Job Information">
+    <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"
     />
-  </main>
+    <p v-if="visibleJobs.length === 0" class="legacy-job-empty">
+      No jobs match the current filters.
+    </p>
+  </section>
 </template>

package/templates/JobInformation/resources/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/JobInformation/resources/src/defaults/InputCarriers.vue

@@ -1,15 +1,18 @@
 <script setup lang="ts">
-import type { ModuleContext } from "../contract";
+import type { ModuleSlotProps } from "../contract";
 
-defineProps<{ context: ModuleContext }>();
+const props = defineProps<ModuleSlotProps>();
+const carriers = props.job.carriers?.input ?? [];
 </script>
 
 <template>
-  <section class="aiaji-slot aiaji-carriers aiaji-carriers-input">
-    <h3>INPUT CARRIER(S)</h3>
-    <ul>
-      <li>CR-01</li>
-      <li>CR-02</li>
-    </ul>
-  </section>
+  <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/JobInformation/resources/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/JobInformation/resources/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/JobInformation/resources/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/JobInformation/resources/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/JobInformation/resources/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/JobInformation/resources/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/JobInformation/resources/src/defaults/OutputCarriers.vue

@@ -1,14 +1,21 @@
 <script setup lang="ts">
-import type { ModuleContext } from "../contract";
+import type { ModuleSlotProps } from "../contract";
 
-defineProps<{ context: ModuleContext }>();
+const props = defineProps<ModuleSlotProps>();
+const carriers = props.job.carriers?.output ?? [];
 </script>
 
 <template>
-  <section class="aiaji-slot aiaji-carriers aiaji-carriers-output">
-    <h3>OUTPUT CARRIER(S)</h3>
-    <ul>
-      <li>—</li>
-    </ul>
-  </section>
+  <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>