create-aiaui-module 0.1.1-TEST → 0.2.0

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

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import Icons from "./Icons.vue";
+import type { ModuleSlotProps, ModuleTimelineStep } from "../contract";
+import { durationLabel, formatTimestamp, tokenStateIcon } from "./format";
+
+const props = defineProps<ModuleSlotProps>();
+
+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>
+  <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.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/JobDashboard/client/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/JobDashboard/client/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/JobDashboard/client/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/JobDashboard/client/src/defaults/slots.ts

@@ -0,0 +1,26 @@
+import type { SlotMap } from "../contract";
+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 Timeline from "./Timeline.vue";
+import OutputCarriers from "./OutputCarriers.vue";
+import JobBottom from "./JobBottom.vue";
+import Recipe from "./Recipe.vue";
+
+export const defaultSlots: SlotMap = {
+  board: JobCard,
+  headerRegion: JobHeader,
+  jobName: JobName,
+  lotId: LotId,
+  status: Status,
+  middleRegion: JobMiddle,
+  inputCarriers: InputCarriers,
+  timeline: Timeline,
+  outputCarriers: OutputCarriers,
+  bottomRegion: JobBottom,
+  recipe: Recipe,
+};