Split UI pages and add inference workflow

frontend/src/styles.css

@@ -89,21 +89,39 @@ nav {
   gap: 8px;
 }
 
-nav a {
+nav a,
+nav button {
   display: flex;
   align-items: center;
   gap: 10px;
+  width: 100%;
   color: var(--muted);
   padding: 11px 10px;
   border-radius: 6px;
   text-decoration: none;
+  background: transparent;
+  text-align: left;
 }
 
-nav a:hover {
+nav a:hover,
+nav button:hover,
+nav button.active {
   color: var(--ink);
   background: var(--panel-2);
 }
 
+nav button.active {
+  border: 1px solid rgba(157, 226, 111, 0.42);
+  background: rgba(157, 226, 111, 0.08);
+}
+
+nav button span {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .workspace {
   padding: 26px;
 }
@@ -137,6 +155,23 @@ h2 {
   font-size: 18px;
 }
 
+.pageHint {
+  display: block;
+  margin-top: 7px;
+  color: var(--muted);
+  font-size: 13px;
+}
+
+.shell[data-page="overview"] [data-page-section]:not([data-page-section~="overview"]),
+.shell[data-page="datasets"] [data-page-section]:not([data-page-section~="datasets"]),
+.shell[data-page="training"] [data-page-section]:not([data-page-section~="training"]),
+.shell[data-page="inference"] [data-page-section]:not([data-page-section~="inference"]),
+.shell[data-page="results"] [data-page-section]:not([data-page-section~="results"]),
+.shell[data-page="system"] [data-page-section]:not([data-page-section~="system"]),
+.shell[data-page="agents"] [data-page-section]:not([data-page-section~="agents"]) {
+  display: none;
+}
+
 .iconButton, .primary {
   height: 38px;
   display: inline-flex;
@@ -529,7 +564,9 @@ textarea {
   margin-top: 0;
 }
 
-.field input {
+.field input,
+.field select {
+  width: 100%;
   height: 38px;
   padding: 0 10px;
   border-radius: 6px;
@@ -537,6 +574,145 @@ textarea {
   background: var(--field);
 }
 
+.pathStack,
+.inferenceForm,
+.modelList,
+.pipelinePanel,
+.pipelineSteps,
+.pipelineStats,
+.pipelineExample {
+  display: grid;
+  gap: 10px;
+}
+
+.pathStack div {
+  min-width: 0;
+  display: grid;
+  gap: 5px;
+}
+
+.pathStack span,
+.pipelineExample span,
+.pipelineStats span {
+  color: var(--muted);
+  font-size: 11px;
+}
+
+.pathStack code {
+  display: block;
+  padding: 9px;
+  border: 1px solid var(--line);
+  border-radius: 6px;
+  background: #080a08;
+  color: var(--ink);
+  overflow-wrap: anywhere;
+}
+
+.pipelineExample {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.pipelineExample div,
+.pipelineSteps div,
+.pipelineStats div {
+  min-width: 0;
+  padding: 10px;
+  border-radius: 7px;
+  border: 1px solid var(--line);
+  background: #101310;
+}
+
+.pipelineExample strong,
+.pipelineExample small,
+.pipelineSteps strong,
+.pipelineSteps small,
+.pipelineStats strong {
+  display: block;
+  min-width: 0;
+}
+
+.pipelineExample strong,
+.pipelineStats strong {
+  margin-top: 3px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.pipelineExample small,
+.pipelineSteps small {
+  margin-top: 5px;
+  color: var(--muted);
+  line-height: 1.4;
+}
+
+.pipelineSteps {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
+.pipelineSteps div {
+  display: grid;
+  align-content: start;
+  gap: 6px;
+}
+
+.pipelineSteps span {
+  width: 24px;
+  height: 24px;
+  display: grid;
+  place-items: center;
+  border-radius: 6px;
+  background: var(--green);
+  color: #0b0d0b;
+  font-weight: 760;
+}
+
+.pipelineStats {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
+.modelList {
+  margin-top: 14px;
+  max-height: 330px;
+  overflow: auto;
+}
+
+.modelList a {
+  min-width: 0;
+  display: grid;
+  gap: 3px;
+  padding: 9px;
+  border-radius: 6px;
+  border: 1px solid var(--line);
+  background: #101310;
+  color: var(--ink);
+  text-decoration: none;
+}
+
+.modelList a.selected {
+  border-color: var(--green);
+  background: rgba(157, 226, 111, 0.08);
+}
+
+.modelList span,
+.modelList small {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.inferencePreview {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 14px;
+}
+
+.inferencePreview > div {
+  min-width: 0;
+  display: grid;
+  gap: 10px;
+}
+
 .datasetForm {
   display: grid;
   gap: 12px;
@@ -1614,16 +1790,19 @@ meter {
     align-items: center;
   }
 
-  nav a {
+  nav a,
+  nav button {
     justify-content: center;
     padding: 10px 6px;
   }
 
-  nav a svg {
+  nav a svg,
+  nav button svg {
     flex: none;
   }
 
-  nav a {
+  nav a,
+  nav button {
     font-size: 0;
   }
 
@@ -1656,10 +1835,14 @@ meter {
   .datasetOutputPreview,
   .gpuPicker,
   .taskCheckList,
-  .agentCheckList,
-  .jobDetailGrid,
-  .qualityStats,
-  .qualityChecks {
+    .agentCheckList,
+    .jobDetailGrid,
+    .qualityStats,
+    .qualityChecks,
+    .pipelineExample,
+    .pipelineSteps,
+    .pipelineStats,
+    .inferencePreview {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 }