create-aiaui-module 0.1.0 → 0.1.2-TEST

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

@@ -1,18 +1,12 @@
 <script setup lang="ts">
-import type { ModuleContext } from "../contract";
+import type { ModuleSlotProps } from "../contract";
 
-defineProps<{ context: ModuleContext }>();
+defineProps<ModuleSlotProps>();
 </script>
 
 <template>
-  <section class="aiaji-slot aiaji-recipe">
-    <div class="aiaji-meta">
-      <span>WO1 WO2 WO3 W17</span>
-      <span>42.6 Pa / 620W</span>
-    </div>
-    <div class="aiaji-recipe-row">
-      <span class="aiaji-recipe-name">RCP-CU-ETCH-O7</span>
-      <button type="button">View all</button>
-    </div>
-  </section>
+  <div class="legacy-recipe-row">
+    <span class="legacy-recipe-label">Recipe</span>
+    <span class="legacy-recipe">{{ job.recipe ?? "—" }}</span>
+  </div>
 </template>

package/templates/JobInformation/resources/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>

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

@@ -1,22 +1,65 @@
 <script setup lang="ts">
-import type { ModuleContext } from "../contract";
+import { computed } from "vue";
+import Icons from "./Icons.vue";
+import type { ModuleSlotProps, ModuleTimelineStep } from "../contract";
+import { durationLabel, formatTimestamp, tokenStateIcon } from "./format";
 
-defineProps<{ context: ModuleContext }>();
+const props = defineProps<ModuleSlotProps>();
 
-const steps = ["Waiting for Start", "Start", "Executing", "Finished"];
+const steps = computed<ModuleTimelineStep[]>(() => {
+  const list = props.job.timeline ?? [];
+  return list.length
+    ? list
+    : [{ label: props.job.state ?? "—", state: "active" as const }];
+});
+
+const iconNames = ["clock", "list", "stop", "activity", "flag"] as const;
+type IconName = (typeof iconNames)[number];
+
+function iconFor(label: string): IconName {
+  const hit = props.config.states?.find(
+    (s) => s.name.toLowerCase() === label.toLowerCase(),
+  );
+  const name = hit?.icon ?? tokenStateIcon(label);
+  return (iconNames as readonly string[]).includes(name)
+    ? (name as IconName)
+    : "clock";
+}
+
+function durationBefore(idx: number): string | null {
+  if (idx <= 0) return null;
+  const prev = steps.value[idx - 1];
+  const current = steps.value[idx];
+  if (!prev || !current) return null;
+  if (prev.state !== "done" || current.state !== "done") return null;
+  return durationLabel(prev.at, current.at);
+}
 </script>
 
 <template>
-  <section class="aiaji-slot aiaji-timeline">
-    <h3>Progress</h3>
-    <ol>
-      <li
-        v-for="(step, index) in steps"
-        :key="step"
-        :class="{ 'aiaji-active': index === 0 }"
+  <ol class="legacy-timeline" :aria-label="`Timeline for ${job.name}`">
+    <li
+      v-for="(step, idx) in steps"
+      :key="step.label"
+      class="legacy-step"
+      :class="`legacy-step-${step.state ?? 'pending'}`"
+    >
+      <span v-if="durationBefore(idx)" class="legacy-step-duration">
+        {{ durationBefore(idx) }}
+      </span>
+      <span class="legacy-step-symbol">
+        <Icons :name="iconFor(step.label)" :size="16" />
+      </span>
+      <span class="legacy-step-label">{{ step.label }}</span>
+      <span
+        class="legacy-step-time"
+        :class="{ 'legacy-step-time-hoverable': !!step.at }"
       >
-        {{ step }}
-      </li>
-    </ol>
-  </section>
+        {{ step.at ? formatTimestamp(step.at).time : "—" }}
+        <span v-if="step.at" class="legacy-step-popover">
+          {{ formatTimestamp(step.at).date }} {{ formatTimestamp(step.at).time }}
+        </span>
+      </span>
+    </li>
+  </ol>
 </template>

package/templates/JobInformation/resources/src/defaults/board-data.ts

@@ -0,0 +1,36 @@
+/** Fixed demo jobs used when `GET /jobs` is unreachable. */
+
+import type { ModuleJobRecord } from "../contract";
+
+export const DEMO_JOBS: ModuleJobRecord[] = [
+  {
+    id: "job-001",
+    name: "ASM3GM-PLUGIN-JOB-001",
+    lot: "LOT-001",
+    state: "Executing",
+    carriers: { input: [{ code: "CR-01" }, { code: "CR-02" }], output: [] },
+    recipe: "RCP-CU-ETCH-O7",
+    timeline: [
+      { label: "Setup", at: "2026-10-18T08:00:00", state: "done" },
+      { label: "Select", at: "2026-10-18T08:01:05", state: "done" },
+      { label: "WaitingForStart", at: "2026-10-18T08:02:30", state: "active" },
+      { label: "Executing", at: "2026-10-18T08:05:12", state: "pending" },
+      { label: "Complete", at: null, state: "pending" },
+    ],
+  },
+  {
+    id: "job-002",
+    name: "ASM3GM-PLUGIN-JOB-002",
+    lot: null,
+    state: "Setup",
+    carriers: { input: [], output: [] },
+    recipe: "RCP-CU-ETCH-O7",
+    timeline: [
+      { label: "Setup", at: "2026-10-18T08:00:00", state: "active" },
+      { label: "Select", at: null, state: "pending" },
+      { label: "WaitingForStart", at: null, state: "pending" },
+      { label: "Executing", at: null, state: "pending" },
+      { label: "Complete", at: null, state: "pending" },
+    ],
+  },
+];

package/templates/JobInformation/resources/src/defaults/config-defaults.ts

@@ -0,0 +1,36 @@
+/**
+ * Template defaults — shown unless `GET /config` says otherwise.
+ * Backend-serving only what it wants to change is fine: absent keys fall back here.
+ * `states[].color` is the accent used for text/border background.
+ */
+
+import type { ModuleConfig } from "../contract";
+
+export const configDefaults: Required<{
+  display: NonNullable<ModuleConfig["display"]>;
+  states: NonNullable<ModuleConfig["states"]>;
+}> = {
+  display: {
+    lotId: true,
+    recipe: true,
+    inputCarriers: true,
+    outputCarriers: true,
+    timeline: true,
+  },
+  states: [
+    { name: "Setup", color: "#0369a1", icon: "clock" },
+    { name: "Select", color: "#526176", icon: "list" },
+    { name: "WaitingForStart", color: "#8b95a5", icon: "stop" },
+    { name: "Executing", color: "#1d4ed8", icon: "activity" },
+    { name: "Running", color: "#1d4ed8", icon: "activity" },
+    { name: "Complete", color: "#166534", icon: "flag" },
+    { name: "Finished", color: "#166534", icon: "flag" },
+  ],
+};
+
+export function mergeConfig(raw: Partial<ModuleConfig> | null | undefined): ModuleConfig {
+  return {
+    display: { ...configDefaults.display, ...(raw?.display ?? {}) },
+    states: raw?.states?.length ? raw.states : configDefaults.states,
+  };
+}

package/templates/JobInformation/resources/src/defaults/format.ts

@@ -0,0 +1,51 @@
+/** Small formatting helpers shared by the built-in slots. */
+
+/** Parse "HH:MM:SS" or any time-like string into seconds (0 on failure). */
+export function secondsOf(time: string | null | undefined): number {
+  if (!time) return 0;
+  const parts = time.split(":").map(Number);
+  if (parts.some((n) => Number.isNaN(n))) return Number.NaN;
+  const [h, m, s] = [parts[0] ?? 0, parts[1] ?? 0, parts[2] ?? 0];
+  return h * 3600 + m * 60 + s;
+}
+
+/** Human-readable duration between two step timestamps; null when unavailable/long negative. */
+export function durationLabel(from: string | null | undefined, to: string | null | undefined): string | null {
+  if (!from || !to) return null;
+  const a = new Date(from);
+  const b = new Date(to);
+  if (Number.isNaN(a.getTime()) || Number.isNaN(b.getTime())) return null;
+  const delta = Math.round((b.getTime() - a.getTime()) / 1000);
+  if (delta <= 0) return null;
+  if (delta < 60) return `${delta} s`;
+  const minutes = Math.floor(delta / 60);
+  if (minutes < 60) {
+    const seconds = delta % 60;
+    return seconds ? `${minutes} m ${seconds} s` : `${minutes} m`;
+  }
+  return `${Math.floor(minutes / 60)} h ${minutes % 60} m`;
+}
+
+/** ISO → { time: "08:00:00", date: "10-18" }. */
+export function formatTimestamp(
+  value: string | null | undefined,
+): { time: string; date: string | null } {
+  if (!value) return { time: "—", date: null };
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return { time: String(value), date: null };
+  const pad = (n: number) => String(n).padStart(2, "0");
+  return {
+    time: `${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`,
+    date: `${pad(date.getMonth() + 1)}-${pad(date.getDate())}`,
+  };
+}
+
+/** Fallback icon name when a state has no visual mapping. */
+export function tokenStateIcon(label: string | null | undefined): string {
+  const v = (label ?? "").toLowerCase();
+  if (v.includes("complete") || v.includes("finish")) return "flag";
+  if (v.includes("waiting")) return "stop";
+  if (v.includes("select") || v.includes("select")) return "list";
+  if (v.includes("exec") || v.includes("run") || v.includes("active")) return "activity";
+  return "clock";
+}

package/templates/JobInformation/resources/src/defaults/slots.ts

@@ -1,16 +1,26 @@
 import type { SlotMap } from "../contract";
-import Header from "./Header.vue";
+import JobCard from "./JobCard.vue";
+import JobHeader from "./JobHeader.vue";
+import JobName from "./JobName.vue";
+import LotId from "./LotId.vue";
+import Status from "./Status.vue";
+import JobMiddle from "./JobMiddle.vue";
 import InputCarriers from "./InputCarriers.vue";
-import OutputCarriers from "./OutputCarriers.vue";
 import Timeline from "./Timeline.vue";
+import OutputCarriers from "./OutputCarriers.vue";
+import JobBottom from "./JobBottom.vue";
 import Recipe from "./Recipe.vue";
 
 export const defaultSlots: SlotMap = {
-  header: Header,
+  board: JobCard,
+  headerRegion: JobHeader,
+  jobName: JobName,
+  lotId: LotId,
+  status: Status,
+  middleRegion: JobMiddle,
   inputCarriers: InputCarriers,
-  outputCarriers: OutputCarriers,
   timeline: Timeline,
+  outputCarriers: OutputCarriers,
+  bottomRegion: JobBottom,
   recipe: Recipe,
 };
-
-export const slotOrder = ["header", "inputCarriers", "outputCarriers", "timeline", "recipe"];