feat: compose native research workflows in QuantFlow

frontend/src/research/workspace.css

@@ -235,3 +235,149 @@
 .research-saved-views .semi-select {
   min-width: 210px;
 }
+
+/* Native research graph: same compact workspace surfaces and focus states. */
+.flow-editor {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 235px;
+  gap: 12px;
+  align-items: start;
+}
+.flow-canvas-shell {
+  border: 1px solid var(--semi-color-border);
+  border-radius: 8px;
+  overflow: hidden;
+  background: var(--semi-color-bg-1);
+  margin-bottom: 12px;
+}
+.flow-canvas-toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+  padding: 8px 12px;
+  color: var(--semi-color-text-2);
+  font-size: 12px;
+}
+.flow-canvas-viewport {
+  overflow: auto;
+  height: 460px;
+  background: radial-gradient(var(--semi-color-border) 1px, transparent 1px);
+  background-size: 20px 20px;
+}
+.flow-canvas {
+  position: relative;
+}
+.flow-edges {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+.flow-edges path {
+  fill: none;
+  stroke: var(--semi-color-text-2);
+  stroke-width: 1.6;
+}
+.flow-edges text {
+  fill: var(--semi-color-text-1);
+  font-size: 12px;
+}
+.flow-node {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 8px;
+  width: 200px;
+  height: 100px;
+  padding: 12px;
+  border: 1px solid var(--semi-color-border);
+  border-radius: 8px;
+  background: var(--semi-color-bg-1);
+  color: var(--semi-color-text-0);
+  text-align: left;
+  cursor: grab;
+  box-shadow: 0 2px 8px #00000008;
+}
+.flow-node strong {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  width: 100%;
+}
+.flow-node span {
+  font-size: 11px;
+  color: var(--semi-color-text-2);
+}
+.flow-node.selected,
+.flow-node:focus-visible {
+  outline: 2px solid var(--semi-color-primary);
+  outline-offset: 2px;
+}
+.flow-node.completed {
+  border-left: 4px solid var(--semi-color-success);
+}
+.flow-node.running,
+.flow-node.waiting {
+  border-left: 4px solid var(--semi-color-primary);
+}
+.flow-node.blocked,
+.flow-node.interrupted {
+  border-left: 4px solid var(--semi-color-warning);
+}
+.flow-node.skipped {
+  opacity: 0.55;
+}
+.flow-inspector {
+  display: grid;
+  gap: 12px;
+}
+.quantflow-workspace select {
+  border: 1px solid var(--semi-color-border);
+  border-radius: 4px;
+  background: var(--semi-color-fill-0);
+  color: var(--semi-color-text-0);
+  padding: 7px 8px;
+  max-width: 100%;
+}
+.flow-inspector label {
+  display: grid;
+  gap: 6px;
+}
+.flow-inspector fieldset {
+  border: 1px solid var(--semi-color-border);
+  border-radius: 4px;
+}
+.flow-inspector fieldset label {
+  display: flex;
+  margin: 8px 0;
+}
+.flow-connect {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+  align-items: center;
+}
+.flow-edge-list {
+  display: grid;
+  gap: 4px;
+  margin-top: 12px;
+}
+.flow-edge-list > div {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  border-bottom: 1px solid var(--semi-color-border);
+  padding: 4px 0;
+}
+.quantflow-workspace .section-toolbar > .semi-input-wrapper {
+  max-width: 240px;
+}
+@media (max-width: 1200px) {
+  .flow-editor {
+    grid-template-columns: minmax(0, 1fr);
+  }
+  .flow-inspector {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}