updating injected notebook tutorials

Author: Jovonni

deploy/Dockerfile.workspace

@@ -31,10 +31,14 @@ RUN mkdir -p /opt/conda/share/jupyter/lab/settings && \
     echo '{ "@jupyterlab/apputils-extension:themes": { "theme": "JupyterLab Dark" } }' \
     > /opt/conda/share/jupyter/lab/settings/overrides.json
 
-# Create workspace directory and copy welcome notebook
+# Create workspace directory and copy notebooks
 RUN mkdir -p /workspace/models && chown -R ${NB_UID}:${NB_GID} /workspace
 COPY workspace/welcome.ipynb /workspace/welcome.ipynb
-RUN chown ${NB_UID}:${NB_GID} /workspace/welcome.ipynb
+COPY workspace/visualization.ipynb /workspace/visualization.ipynb
+COPY workspace/registry.ipynb /workspace/registry.ipynb
+RUN chown ${NB_UID}:${NB_GID} /workspace/welcome.ipynb \
+    /workspace/visualization.ipynb \
+    /workspace/registry.ipynb
 
 USER ${NB_UID}
 WORKDIR /workspace

web/src/app/training/[id]/page.tsx

@@ -118,87 +118,92 @@ export default function TrainingDetailPage() {
     return Math.max(0, Math.floor((end - start) / 1000));
   }, []);
 
-  useEffect(() => {
-    let cancelled = false;
-
-    async function fetchAll() {
-      try {
-        const jobRes = await api.get<Job>(`/training/${jobId}`);
-        if (cancelled) return;
-        setJob(jobRes);
-        setElapsedSec(computeElapsed(jobRes.started_at, jobRes.completed_at));
-
-        // Fetch metrics and artifacts in parallel
-        const [metricsRes, artifactsRes] = await Promise.all([
-          api.get<MetricRecord[]>(`/training/${jobId}/metrics`).catch(() => [] as MetricRecord[]),
-          api.get<Artifact[]>(`/jobs/${jobId}/artifacts`).catch(() => [] as Artifact[]),
-        ]);
-
-        if (cancelled) return;
-
-        // Split metrics by metric_name
-        const loss: { name: string; value: number }[] = [];
-        const acc: { name: string; value: number }[] = [];
-
-        if (metricsRes && metricsRes.length > 0) {
-          for (const record of metricsRes) {
-            const point = {
-              name: (record.step ?? record.epoch ?? 0).toString(),
-              value: record.value,
-            };
-            if (record.metric_name === "loss") {
-              loss.push(point);
-            } else if (record.metric_name === "accuracy") {
-              acc.push(point);
-            }
+  const fetchAll = useCallback(async (isInitial = false) => {
+    try {
+      const jobRes = await api.get<Job>(`/training/${jobId}`);
+      setJob(jobRes);
+      setElapsedSec(computeElapsed(jobRes.started_at, jobRes.completed_at));
+
+      // Fetch metrics and artifacts in parallel
+      const [metricsRes, artifactsRes] = await Promise.all([
+        api.get<MetricRecord[]>(`/training/${jobId}/metrics`).catch(() => [] as MetricRecord[]),
+        api.get<Artifact[]>(`/jobs/${jobId}/artifacts`).catch(() => [] as Artifact[]),
+      ]);
+
+      // Split metrics by metric_name
+      const loss: { name: string; value: number }[] = [];
+      const acc: { name: string; value: number }[] = [];
+
+      if (metricsRes && metricsRes.length > 0) {
+        for (const record of metricsRes) {
+          const point = {
+            name: (record.step ?? record.epoch ?? 0).toString(),
+            value: record.value,
+          };
+          if (record.metric_name === "loss") {
+            loss.push(point);
+          } else if (record.metric_name === "accuracy") {
+            acc.push(point);
           }
         }
+      }
 
-        setLossData(loss);
-        setAccData(acc);
-        setArtifacts(artifactsRes ?? []);
-      } catch (err) {
-        if (!cancelled) {
-          toast.error(err instanceof Error ? err.message : "Failed to load training job");
-
-          // Set a fallback job so the full UI always renders (e.g. for E2E tests)
-          const fallbackJob: Job = {
-            id: jobId,
-            project_id: "",
-            model_id: "",
-            dataset_id: null,
-            job_type: "Training Job",
-            status: "unknown",
-            k8s_job_name: null,
-            hardware_tier: "N/A",
-            hyperparameters: {},
-            metrics: null,
-            started_at: null,
-            completed_at: null,
-            error_message: null,
-            created_by: "",
-            created_at: new Date().toISOString(),
-            updated_at: new Date().toISOString(),
-            progress: 0,
-            epoch_current: null,
-            epoch_total: null,
-            loss: null,
-            learning_rate: null,
-            gpu_config: null,
-          };
-          setJob(fallbackJob);
-          setIsFallback(true);
-          setElapsedSec(0);
-        }
-      } finally {
-        if (!cancelled) setLoading(false);
+      setLossData(loss);
+      setAccData(acc);
+      setArtifacts(artifactsRes ?? []);
+    } catch (err) {
+      if (isInitial) {
+        toast.error(err instanceof Error ? err.message : "Failed to load training job");
+
+        // Set a fallback job so the full UI always renders (e.g. for E2E tests)
+        const fallbackJob: Job = {
+          id: jobId,
+          project_id: "",
+          model_id: "",
+          dataset_id: null,
+          job_type: "Training Job",
+          status: "unknown",
+          k8s_job_name: null,
+          hardware_tier: "N/A",
+          hyperparameters: {},
+          metrics: null,
+          started_at: null,
+          completed_at: null,
+          error_message: null,
+          created_by: "",
+          created_at: new Date().toISOString(),
+          updated_at: new Date().toISOString(),
+          progress: 0,
+          epoch_current: null,
+          epoch_total: null,
+          loss: null,
+          learning_rate: null,
+          gpu_config: null,
+        };
+        setJob(fallbackJob);
+        setIsFallback(true);
+        setElapsedSec(0);
       }
+    } finally {
+      if (isInitial) setLoading(false);
     }
-
-    fetchAll();
-    return () => { cancelled = true; };
   }, [jobId, computeElapsed]);
 
+  // Initial fetch
+  useEffect(() => {
+    fetchAll(true);
+  }, [fetchAll]);
+
+  // Poll job + metrics every 3s while job is active
+  useEffect(() => {
+    if (!job) return;
+    const isActive = job.status === "running" || job.status === "pending";
+    if (!isActive) return;
+
+    const t = setInterval(() => fetchAll(false), 3000);
+    return () => clearInterval(t);
+  }, [job?.status, fetchAll]);
+
   // Tick elapsed timer every second while job is running
   useEffect(() => {
     if (!job) return;

web/src/components/shared/notification-panel.tsx

@@ -168,11 +168,11 @@ export function NotificationPanel() {
       </PopoverTrigger>
       <PopoverContent
         align="end"
-        className="w-96 p-0 border bg-background/95 backdrop-blur-xl"
+        className="w-96 p-0 border bg-popover shadow-xl"
         sideOffset={8}
       >
         {/* Header */}
-        <div className="flex items-center justify-between border-b px-4 py-3">
+        <div className="flex items-center justify-between border-b px-4 py-3 bg-popover rounded-t-md">
           <h3 className="text-sm font-semibold text-foreground">Notifications</h3>
           <div className="flex items-center gap-1">
             {unreadCount > 0 && (
@@ -197,15 +197,15 @@ export function NotificationPanel() {
           </div>
         </div>
 
-        {/* Body */}
-        <ScrollArea className="max-h-[400px]">
+        {/* Body — fixed max height, self-contained scrolling */}
+        <ScrollArea className="h-[min(400px,60vh)]">
           {notifications.length === 0 ? (
             <div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
               <Bell className="h-8 w-8 mb-2 opacity-30" />
               <p className="text-sm">No notifications yet</p>
             </div>
           ) : (
-            <div className="divide-y">
+            <div className="divide-y divide-border/50">
               {renderGroup("Today", groups.today, handleClick)}
               {renderGroup("This Week", groups.thisWeek, handleClick)}
               {renderGroup("Earlier", groups.earlier, handleClick)}
@@ -225,7 +225,7 @@ function renderGroup(
   if (items.length === 0) return null;
   return (
     <div>
-      <div className="sticky top-0 bg-background/90 backdrop-blur px-4 py-1.5">
+      <div className="sticky top-0 z-10 bg-popover px-4 py-1.5 border-b border-border/30">
         <span className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
           {label}
         </span>