@anlyx/ui 0.1.0 → 0.1.2

package/dist/styles.css

@@ -1,21 +1,30 @@
 :root {
-  --anlyx-color-background: #f7f8fb;
+  --anlyx-color-background: #f5f7fb;
   --anlyx-color-panel: #ffffff;
-  --anlyx-color-canvas: #fafafa;
-  --anlyx-color-border: #e5e7eb;
-  --anlyx-color-text-primary: #111827;
-  --anlyx-color-text-secondary: #6b7280;
-  --anlyx-color-grid: #e5e7eb;
+  --anlyx-color-canvas: #fbfcff;
+  --anlyx-color-border: #dfe6f1;
+  --anlyx-color-border-strong: #c9d5e6;
+  --anlyx-color-text-primary: #0f172a;
+  --anlyx-color-text-secondary: #62708a;
+  --anlyx-color-text-muted: #8a97ad;
+  --anlyx-color-grid: #e8edf5;
   --anlyx-color-method-get: #10b981;
   --anlyx-color-method-post: #3b82f6;
   --anlyx-color-method-update: #f59e0b;
   --anlyx-color-method-delete: #ef4444;
+  --anlyx-color-request: #2563eb;
+  --anlyx-color-response: #8b5cf6;
+  --anlyx-color-branch: #f97316;
+  --anlyx-color-database: #0f766e;
   --anlyx-color-confidence-high: #16a34a;
   --anlyx-color-confidence-medium: #d97706;
   --anlyx-color-confidence-low: #ea580c;
   --anlyx-color-confidence-unknown: #6b7280;
-  --anlyx-radius: 8px;
-  --anlyx-shadow-panel: 0 1px 2px rgb(17 24 39 / 6%);
+  --anlyx-radius: 10px;
+  --anlyx-radius-sm: 7px;
+  --anlyx-shadow-panel: 0 1px 2px rgb(15 23 42 / 6%);
+  --anlyx-shadow-card: 0 10px 28px rgb(15 23 42 / 7%);
+  --anlyx-shadow-float: 0 18px 46px rgb(15 23 42 / 12%);
   color: var(--anlyx-color-text-primary);
   background: var(--anlyx-color-background);
   font-family:
@@ -29,12 +38,14 @@
 }
 
 body {
+  overflow: hidden;
   margin: 0;
   background: var(--anlyx-color-background);
 }
 
 #root {
-  min-height: 100vh;
+  height: 100dvh;
+  min-height: 0;
 }
 
 .anlyx-viewer-state {
@@ -49,11 +60,14 @@ body {
 
 .anlyx-shell {
   box-sizing: border-box;
-  display: grid;
-  grid-template-columns: minmax(260px, 300px) minmax(420px, 1fr) minmax(280px, 340px);
-  grid-template-rows: minmax(0, 1fr) auto;
-  min-height: 100vh;
-  background: var(--anlyx-color-background);
+  display: flex;
+  height: 100dvh;
+  min-height: 0;
+  overflow: hidden;
+  background:
+    radial-gradient(circle at 12% -10%, rgb(37 99 235 / 7%), transparent 28%),
+    radial-gradient(circle at 84% 0%, rgb(20 184 166 / 5%), transparent 30%),
+    var(--anlyx-color-background);
 }
 
 .anlyx-shell *,
@@ -74,6 +88,20 @@ body {
   border: 0;
 }
 
+.anlyx-panel-group {
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+}
+
+.anlyx-panel {
+  display: grid;
+  overflow: hidden;
+  min-width: 0;
+  min-height: 0;
+}
+
 .anlyx-sidebar,
 .anlyx-inspector,
 .anlyx-workspace,
@@ -83,13 +111,55 @@ body {
 }
 
 .anlyx-sidebar {
-  grid-row: 1 / span 2;
   display: flex;
+  overflow: hidden;
   min-width: 0;
+  min-height: 0;
   flex-direction: column;
-  gap: 20px;
-  padding: 20px;
+  gap: 18px;
+  padding: 18px 16px 12px;
   border-right: 1px solid var(--anlyx-color-border);
+  box-shadow: 12px 0 34px rgb(15 23 42 / 3%);
+}
+
+.anlyx-resize-handle {
+  position: relative;
+  z-index: 6;
+  display: grid;
+  width: 8px;
+  min-width: 8px;
+  place-items: center;
+  background: transparent;
+  cursor: col-resize;
+}
+
+.anlyx-resize-handle span {
+  width: 3px;
+  height: 54px;
+  border-radius: 999px;
+  background: linear-gradient(#d7e2f0, #b9c8dd);
+  box-shadow: 0 1px 8px rgb(37 99 235 / 14%);
+  opacity: 0.9;
+}
+
+.anlyx-resize-handle:hover span {
+  background: var(--anlyx-color-request);
+  box-shadow: 0 0 0 4px rgb(37 99 235 / 12%);
+}
+
+.anlyx-sidebar--collapsed,
+.anlyx-inspector--collapsed {
+  align-items: center;
+  padding: 12px 8px;
+}
+
+.anlyx-collapsed-label {
+  writing-mode: vertical-rl;
+  color: var(--anlyx-color-text-secondary);
+  font-size: 11px;
+  font-weight: 800;
+  letter-spacing: 0;
+  text-transform: uppercase;
 }
 
 .anlyx-brand {
@@ -103,10 +173,12 @@ body {
   width: 36px;
   height: 36px;
   place-items: center;
-  border: 1px solid var(--anlyx-color-border);
-  border-radius: var(--anlyx-radius);
-  background: var(--anlyx-color-canvas);
+  border: 1px solid rgb(59 130 246 / 22%);
+  border-radius: 9px;
+  background: linear-gradient(145deg, #1261f1, #3b82f6);
+  color: #ffffff;
   font-weight: 700;
+  box-shadow: 0 10px 22px rgb(37 99 235 / 25%);
 }
 
 .anlyx-brand__name,
@@ -127,29 +199,47 @@ body {
 .anlyx-tabs {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 4px;
+  gap: 3px;
   padding: 4px;
-  border: 1px solid var(--anlyx-color-border);
+  border: 1px solid #edf1f7;
   border-radius: var(--anlyx-radius);
-  background: var(--anlyx-color-background);
+  background: #f7f9fd;
+  box-shadow: inset 0 1px 0 rgb(255 255 255 / 82%);
 }
 
 .anlyx-tab,
-.anlyx-replay button {
+.anlyx-replay button,
+.anlyx-toolbar-button,
+.anlyx-panel-toggle {
   min-height: 32px;
   border: 1px solid transparent;
-  border-radius: 6px;
+  border-radius: var(--anlyx-radius-sm);
   background: transparent;
   color: var(--anlyx-color-text-secondary);
   font: inherit;
 }
 
 .anlyx-tab--active,
-.anlyx-replay button {
-  border-color: var(--anlyx-color-border);
+.anlyx-replay button,
+.anlyx-toolbar-button,
+.anlyx-panel-toggle {
+  border-color: #dbe6f5;
   background: var(--anlyx-color-panel);
   color: var(--anlyx-color-text-primary);
-  box-shadow: var(--anlyx-shadow-panel);
+  box-shadow:
+    0 1px 2px rgb(15 23 42 / 7%),
+    0 8px 20px rgb(15 23 42 / 4%);
+}
+
+.anlyx-tab {
+  padding: 0 7px;
+  font-size: 13px;
+  font-weight: 650;
+  white-space: normal;
+}
+
+.anlyx-tab--active {
+  color: var(--anlyx-color-request);
 }
 
 .anlyx-search {
@@ -165,23 +255,46 @@ body {
   text-transform: uppercase;
 }
 
-.anlyx-search input {
+.anlyx-search__control {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: center;
+  gap: 8px;
   width: 100%;
-  min-height: 36px;
-  padding: 0 10px;
+  min-height: 40px;
+  padding: 0 12px;
   border: 1px solid var(--anlyx-color-border);
-  border-radius: 6px;
+  border-radius: var(--anlyx-radius);
+  background: #fbfcff;
+  color: var(--anlyx-color-text-muted);
+  box-shadow: inset 0 1px 0 rgb(255 255 255 / 90%);
+}
+
+.anlyx-search input {
+  width: 100%;
+  min-width: 0;
+  padding: 0;
+  border: 0;
+  outline: 0;
+  background: transparent;
   color: var(--anlyx-color-text-primary);
+  font: inherit;
 }
 
 .anlyx-sidebar-section {
   display: grid;
   gap: 8px;
+  min-height: 0;
+}
+
+.anlyx-sidebar__list-region {
+  min-height: 0;
+  overflow: auto;
 }
 
 .anlyx-list {
   display: grid;
-  gap: 8px;
+  gap: 9px;
   padding: 0;
   margin: 0;
   list-style: none;
@@ -189,11 +302,31 @@ body {
 
 .anlyx-list-item {
   display: grid;
-  gap: 6px;
-  padding: 10px;
+  gap: 7px;
+  padding: 12px;
   border: 1px solid var(--anlyx-color-border);
   border-radius: var(--anlyx-radius);
-  background: var(--anlyx-color-panel);
+  background: linear-gradient(180deg, #ffffff, #fbfcff);
+  box-shadow: 0 1px 2px rgb(15 23 42 / 4%);
+  transition:
+    border-color 160ms ease,
+    box-shadow 160ms ease,
+    background 160ms ease,
+    transform 160ms ease;
+}
+
+.anlyx-list-item:has([aria-current="true"]) {
+  border-color: #4f8df8;
+  background: linear-gradient(180deg, #ffffff, #f3f7ff);
+  box-shadow:
+    inset 3px 0 0 #2563eb,
+    0 10px 24px rgb(37 99 235 / 10%);
+}
+
+.anlyx-list-item:hover {
+  border-color: #b9c8dd;
+  box-shadow: 0 10px 24px rgb(15 23 42 / 7%);
+  transform: translateY(-1px);
 }
 
 .anlyx-endpoint-button,
@@ -229,17 +362,36 @@ body {
   overflow-wrap: anywhere;
 }
 
+.anlyx-list-item__primary {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  line-height: 1.25;
+}
+
+.anlyx-list-item__meta {
+  color: var(--anlyx-color-text-secondary);
+  font-size: 12px;
+  line-height: 1.35;
+}
+
 .anlyx-main {
   display: grid;
-  grid-template-rows: minmax(0, 1fr) auto;
+  overflow: hidden;
   min-width: 0;
   min-height: 0;
 }
 
+.anlyx-main--process {
+  grid-template-rows: minmax(0, 1fr);
+}
+
 .anlyx-workspace {
   display: grid;
   min-width: 0;
   min-height: 0;
+  overflow: hidden;
   grid-template-rows: auto minmax(0, 1fr);
 }
 
@@ -249,16 +401,51 @@ body {
   align-items: flex-start;
   justify-content: space-between;
   gap: 16px;
-  padding: 20px;
+  padding: 20px 22px;
   border-bottom: 1px solid var(--anlyx-color-border);
+  background: rgb(255 255 255 / 82%);
+  backdrop-filter: blur(14px);
+}
+
+.anlyx-workspace-actions,
+.anlyx-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+.anlyx-toolbar-button {
+  min-height: 34px;
+  padding: 0 12px;
+  cursor: pointer;
+  font-weight: 650;
+}
+
+.anlyx-toolbar-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.48;
+}
+
+.anlyx-toolbar-select,
+.anlyx-replay select {
+  min-height: 30px;
+  border: 1px solid var(--anlyx-color-border);
+  border-radius: 6px;
+  background: var(--anlyx-color-panel);
+  color: var(--anlyx-color-text-primary);
+  font: inherit;
 }
 
 .anlyx-workspace-header h1,
 .anlyx-panel-heading h2,
 .anlyx-canvas-placeholder h2 {
   margin: 0;
-  font-size: 20px;
+  color: #111827;
+  font-size: 22px;
   line-height: 1.2;
+  letter-spacing: 0;
 }
 
 .anlyx-eyebrow {
@@ -289,37 +476,65 @@ body {
 
 .anlyx-endpoint-map {
   position: relative;
+  height: calc(100% - 32px);
   min-width: 0;
-  min-height: 520px;
-  margin: 20px;
+  min-height: 0;
+  margin: 16px;
   overflow: hidden;
   border: 1px solid var(--anlyx-color-border);
-  border-radius: var(--anlyx-radius);
+  border-radius: 12px;
   background:
+    radial-gradient(circle at 50% 42%, rgb(37 99 235 / 4%), transparent 33%),
     linear-gradient(var(--anlyx-color-grid) 1px, transparent 1px),
     linear-gradient(90deg, var(--anlyx-color-grid) 1px, transparent 1px), var(--anlyx-color-canvas);
-  background-size: 24px 24px;
+  background-size:
+    auto,
+    24px 24px,
+    24px 24px;
+  box-shadow: inset 0 1px 0 rgb(255 255 255 / 80%);
+}
+
+.anlyx-endpoint-map--process {
+  margin-bottom: 12px;
+  border-color: #c7d2fe;
+  background:
+    radial-gradient(circle at 24% 42%, rgb(37 99 235 / 13%), transparent 20%),
+    radial-gradient(circle at 52% 42%, rgb(249 115 22 / 8%), transparent 23%),
+    radial-gradient(circle at 76% 42%, rgb(20 184 166 / 9%), transparent 24%),
+    radial-gradient(circle at 86% 72%, rgb(139 92 246 / 11%), transparent 27%),
+    linear-gradient(var(--anlyx-color-grid) 1px, transparent 1px),
+    linear-gradient(90deg, var(--anlyx-color-grid) 1px, transparent 1px), #fbfdff;
+  background-size:
+    auto,
+    auto,
+    auto,
+    auto,
+    24px 24px,
+    24px 24px;
 }
 
 .anlyx-react-flow {
-  min-height: 520px;
+  width: 100%;
+  height: 100%;
+  min-height: 420px;
 }
 
 .anlyx-flow-legend {
   position: absolute;
   z-index: 4;
-  top: 12px;
-  left: 12px;
+  top: 18px;
+  left: 18px;
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
-  padding: 8px;
+  padding: 9px 11px;
   border: 1px solid var(--anlyx-color-border);
-  border-radius: 6px;
-  background: rgb(255 255 255 / 92%);
+  border-radius: 9px;
+  background: rgb(255 255 255 / 94%);
   color: var(--anlyx-color-text-secondary);
   font-size: 12px;
-  box-shadow: var(--anlyx-shadow-panel);
+  box-shadow: var(--anlyx-shadow-card);
+  backdrop-filter: blur(12px);
 }
 
 .anlyx-flow-legend span {
@@ -335,7 +550,11 @@ body {
 }
 
 .anlyx-flow-legend__mark--sub {
-  background: #7c3aed;
+  background: var(--anlyx-color-branch);
+}
+
+.anlyx-flow-legend__mark--response {
+  background: var(--anlyx-color-response);
 }
 
 .anlyx-flow-legend__mark--unknown {
@@ -343,52 +562,185 @@ body {
 }
 
 .anlyx-flow-node {
+  position: relative;
   display: grid;
-  width: 180px;
-  min-height: 84px;
-  gap: 7px;
-  padding: 10px;
-  border: 1px solid #cbd5e1;
-  border-left: 4px solid #2563eb;
-  border-radius: var(--anlyx-radius);
+  width: 206px;
+  min-height: 112px;
+  gap: 9px;
+  padding: 14px;
+  border: 1px solid #cfd9e8;
+  border-top: 3px solid var(--anlyx-color-request);
+  border-left: 1px solid #cfd9e8;
+  border-radius: 10px;
   background: rgb(255 255 255 / 96%);
   color: var(--anlyx-color-text-primary);
   font: inherit;
   text-align: left;
-  box-shadow: var(--anlyx-shadow-panel);
+  box-shadow:
+    0 15px 34px rgb(15 23 42 / 8%),
+    var(--anlyx-shadow-panel);
   cursor: pointer;
+  isolation: isolate;
+}
+
+.anlyx-flow-node::before {
+  position: absolute;
+  top: 14px;
+  bottom: 14px;
+  left: 0;
+  width: 4px;
+  border-radius: 0 999px 999px 0;
+  background: var(--anlyx-color-request);
+  content: "";
 }
 
 .anlyx-flow-node--sub {
-  border-left-color: #7c3aed;
-  background: #fbfaff;
+  width: 182px;
+  min-height: 86px;
+  border-color: #ead8ff;
+  border-top-color: var(--anlyx-color-branch);
+  background: linear-gradient(180deg, #ffffff, #fff8f1);
+  box-shadow: 0 8px 24px rgb(249 115 22 / 8%);
+}
+
+.anlyx-flow-node--service {
+  border-top-color: #6366f1;
+  background: linear-gradient(180deg, #ffffff, #f7f7ff);
+}
+
+.anlyx-flow-node--repository {
+  border-top-color: #7c3aed;
+  background: linear-gradient(180deg, #ffffff, #fbf7ff);
+}
+
+.anlyx-flow-node--sub::before {
+  background: var(--anlyx-color-branch);
+}
+
+.anlyx-flow-node--service::before {
+  background: #6366f1;
+}
+
+.anlyx-flow-node--repository::before {
+  background: #7c3aed;
+}
+
+.anlyx-flow-node--database::before {
+  background: var(--anlyx-color-database);
 }
 
 .anlyx-flow-node--secondary {
-  border-left-color: var(--anlyx-color-text-secondary);
+  border-top-color: var(--anlyx-color-text-secondary);
 }
 
 .anlyx-flow-node--database {
-  border-left-color: #0f766e;
+  border-color: #b8e7dc;
+  border-top-color: var(--anlyx-color-database);
+  background: linear-gradient(180deg, #ffffff, #f3fffb);
+  box-shadow: 0 14px 34px rgb(15 118 110 / 11%);
 }
 
 .anlyx-flow-node--selected {
-  outline: 2px solid #2563eb;
+  outline: 2px solid #4f8df8;
   outline-offset: 2px;
+  box-shadow:
+    0 0 0 7px rgb(37 99 235 / 11%),
+    0 18px 44px rgb(37 99 235 / 16%);
 }
 
 .anlyx-flow-node--replay-active {
-  border-color: #0891b2;
-  outline: 2px solid #06b6d4;
+  border-color: var(--anlyx-color-request);
+  outline: 2px solid rgb(37 99 235 / 55%);
   outline-offset: 3px;
   box-shadow:
-    0 0 0 4px rgb(6 182 212 / 14%),
+    0 0 0 6px rgb(37 99 235 / 14%),
+    0 18px 42px rgb(37 99 235 / 18%),
     var(--anlyx-shadow-panel);
+  animation: anlyx-node-pulse 1.1s ease-in-out infinite;
+}
+
+.anlyx-flow-node--replay-active::after {
+  position: absolute;
+  z-index: -1;
+  inset: -14px;
+  border-radius: 18px;
+  background: radial-gradient(circle, rgb(37 99 235 / 24%), transparent 62%);
+  content: "";
+  animation: anlyx-ripple 1.35s ease-out infinite;
+}
+
+.anlyx-flow-node__pulse {
+  position: absolute;
+  z-index: -1;
+  inset: -8px;
+  border: 1px solid rgb(37 99 235 / 24%);
+  border-radius: 16px;
+  pointer-events: none;
+}
+
+.anlyx-flow-node--database.anlyx-flow-node--replay-active::after {
+  background: radial-gradient(circle, rgb(20 184 166 / 26%), transparent 62%);
+}
+
+.anlyx-flow-handle {
+  width: 1px;
+  height: 1px;
+  border: 0;
+  background: transparent;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.anlyx-flow-node__header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.anlyx-flow-node__icon {
+  display: inline-grid;
+  min-width: 30px;
+  height: 28px;
+  place-items: center;
+  border: 1px solid #dbeafe;
+  border-radius: 8px;
+  background: #eff6ff;
+  color: var(--anlyx-color-request);
+  font-size: 10px;
+  font-weight: 800;
+}
+
+.anlyx-flow-node__icon svg {
+  display: block;
+}
+
+.anlyx-flow-node--service .anlyx-flow-node__icon {
+  border-color: #e0e7ff;
+  background: #eef2ff;
+  color: #4f46e5;
+}
+
+.anlyx-flow-node--repository .anlyx-flow-node__icon {
+  border-color: #ede9fe;
+  background: #f5f3ff;
+  color: #7c3aed;
+}
+
+.anlyx-flow-node--database .anlyx-flow-node__icon {
+  border-color: #ccfbf1;
+  background: #ecfdf5;
+  color: var(--anlyx-color-database);
+}
+
+.anlyx-flow-node--sub .anlyx-flow-node__icon {
+  border-color: #fed7aa;
+  background: #fff7ed;
+  color: var(--anlyx-color-branch);
 }
 
 .anlyx-flow-node__type {
   color: var(--anlyx-color-text-secondary);
-  font-size: 11px;
+  font-size: 10px;
   font-weight: 700;
   text-transform: uppercase;
 }
@@ -397,21 +749,56 @@ body {
   overflow-wrap: anywhere;
   font-size: 13px;
   font-weight: 650;
-  line-height: 1.25;
+  line-height: 1.3;
 }
 
 .anlyx-flow-edge--sub .react-flow__edge-path {
-  stroke-dasharray: 5 4;
+  stroke-dasharray: 6 5;
+  stroke: var(--anlyx-color-branch);
+  stroke-width: 2px;
+}
+
+.anlyx-workspace--process .anlyx-flow-edge--sub .react-flow__edge-path {
+  stroke: var(--anlyx-color-branch);
+  stroke-dasharray: 7 5;
 }
 
 .anlyx-flow-edge--replay-active .react-flow__edge-path {
-  stroke: #0891b2;
-  stroke-width: 3px;
+  stroke-width: 4.5px;
+  stroke-dasharray: 14 9;
+  animation: anlyx-flow-travel 0.8s linear infinite;
+}
+
+.anlyx-flow-edge--replay-request .react-flow__edge-path {
+  stroke: var(--anlyx-color-request);
+  filter: drop-shadow(0 0 8px rgb(37 99 235 / 58%));
+}
+
+.anlyx-flow-edge--replay-response .react-flow__edge-path {
+  stroke: var(--anlyx-color-response);
+  filter: drop-shadow(0 0 8px rgb(139 92 246 / 58%));
+}
+
+.anlyx-flow-particle {
+  fill: var(--anlyx-color-request);
+  filter: drop-shadow(0 0 8px rgb(37 99 235 / 75%));
+  pointer-events: none;
+}
+
+.anlyx-flow-particle--sub {
+  fill: var(--anlyx-color-branch);
+  filter: drop-shadow(0 0 8px rgb(249 115 22 / 72%));
+}
+
+.anlyx-flow-particle--response,
+.anlyx-flow-particle--secondary {
+  fill: var(--anlyx-color-response);
+  filter: drop-shadow(0 0 8px rgb(139 92 246 / 72%));
 }
 
 .anlyx-endpoint-map-empty {
   display: grid;
-  min-height: 520px;
+  min-height: 420px;
   place-items: center;
   padding: 24px;
   color: var(--anlyx-color-text-secondary);
@@ -419,9 +806,12 @@ body {
 
 .anlyx-page-storyboard {
   display: grid;
-  gap: 16px;
+  gap: 18px;
+  overflow: auto;
   min-width: 0;
-  margin: 20px;
+  min-height: 0;
+  margin: 16px;
+  padding-bottom: 24px;
 }
 
 .anlyx-page-summary,
@@ -436,9 +826,12 @@ body {
 
 .anlyx-page-summary {
   display: grid;
-  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.6fr) auto;
+  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.5fr) auto auto;
   gap: 16px;
-  padding: 16px;
+  padding: 18px;
+  background:
+    linear-gradient(180deg, rgb(255 255 255 / 96%), rgb(251 253 255 / 96%)),
+    radial-gradient(circle at 8% 0%, rgb(37 99 235 / 8%), transparent 28%);
 }
 
 .anlyx-page-summary h2,
@@ -454,16 +847,90 @@ body {
 
 .anlyx-storyboard-grid {
   display: grid;
-  grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.8fr);
+  grid-template-columns: minmax(0, 1.58fr) minmax(300px, 0.82fr);
+  gap: 16px;
+  min-width: 0;
+}
+
+.anlyx-storyboard-side {
+  display: grid;
   gap: 16px;
   min-width: 0;
 }
 
+.anlyx-relationship-list {
+  display: grid;
+  gap: 9px;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+.anlyx-relationship-list li {
+  position: relative;
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  gap: 8px;
+  padding: 9px 10px;
+  border: 1px solid var(--anlyx-color-border);
+  border-radius: 8px;
+  background: #ffffff;
+}
+
+.anlyx-relationship-diagram {
+  display: grid;
+  grid-template-columns: minmax(130px, 0.75fr) minmax(0, 1.3fr);
+  gap: 22px;
+  align-items: center;
+}
+
+.anlyx-relationship-source {
+  display: grid;
+  gap: 4px;
+  padding: 14px;
+  border: 1px solid var(--anlyx-color-border);
+  border-radius: var(--anlyx-radius);
+  background: linear-gradient(180deg, #ffffff, #f8fbff);
+  text-align: center;
+  box-shadow: var(--anlyx-shadow-panel);
+}
+
+.anlyx-relationship-source span {
+  color: var(--anlyx-color-text-secondary);
+  font-size: 12px;
+}
+
+.anlyx-relationship-line {
+  width: 22px;
+  height: 1px;
+  margin-left: -31px;
+  border-top: 1px solid #94a3b8;
+}
+
+.anlyx-relationship-line::after {
+  display: block;
+  width: 5px;
+  height: 5px;
+  margin-top: -3px;
+  margin-left: 18px;
+  border-top: 1px solid #94a3b8;
+  border-right: 1px solid #94a3b8;
+  content: "";
+  transform: rotate(45deg);
+}
+
+.anlyx-relationship-list span:last-child {
+  overflow-wrap: anywhere;
+  font-weight: 650;
+}
+
 .anlyx-storyboard-panel {
   display: grid;
   min-width: 0;
   gap: 12px;
-  padding: 16px;
+  padding: 18px;
+  box-shadow: var(--anlyx-shadow-card);
 }
 
 .anlyx-storyboard-section-heading {
@@ -488,7 +955,7 @@ body {
 
 .anlyx-segment-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
   gap: 12px;
 }
 
@@ -499,18 +966,39 @@ body {
   border-left: 4px solid #3b82f6;
   border-radius: var(--anlyx-radius);
   background: var(--anlyx-color-panel);
+  box-shadow: 0 10px 24px rgb(15 23 42 / 6%);
+}
+
+.anlyx-segment-card--placeholder {
+  border-left-color: var(--anlyx-color-method-update);
+  background: linear-gradient(180deg, #ffffff, #fffaf2);
 }
 
 .anlyx-segment-card__image {
   display: grid;
-  min-height: 120px;
+  min-height: 128px;
   place-items: center;
   overflow: hidden;
   border-bottom: 1px solid var(--anlyx-color-border);
-  background: var(--anlyx-color-background);
+  background:
+    linear-gradient(135deg, rgb(37 99 235 / 8%) 25%, transparent 25%) 0 0 / 18px 18px,
+    linear-gradient(135deg, transparent 75%, rgb(37 99 235 / 8%) 75%) 0 0 / 18px 18px,
+    #f8fafc;
   color: var(--anlyx-color-text-secondary);
 }
 
+.anlyx-segment-card--placeholder .anlyx-segment-card__image span {
+  display: grid;
+  width: 34px;
+  height: 34px;
+  place-items: center;
+  border-radius: 999px;
+  background: #fff7ed;
+  color: #c2410c;
+  font-weight: 800;
+  box-shadow: 0 0 0 7px rgb(249 115 22 / 10%);
+}
+
 .anlyx-segment-card__image img {
   width: 100%;
   min-height: 120px;
@@ -560,9 +1048,10 @@ body {
 .anlyx-api-call {
   display: grid;
   gap: 8px;
-  padding: 10px;
+  padding: 11px 12px;
   border: 1px solid var(--anlyx-color-border);
   border-radius: var(--anlyx-radius);
+  background: linear-gradient(180deg, #ffffff, #fbfcff);
 }
 
 .anlyx-api-call__line {
@@ -579,9 +1068,12 @@ body {
 
 .anlyx-capture-state {
   display: grid;
-  gap: 6px;
-  padding: 14px 16px;
+  gap: 8px;
+  padding: 16px 18px;
   border-left: 4px solid var(--anlyx-color-method-update);
+  background:
+    linear-gradient(180deg, rgb(255 255 255 / 96%), rgb(255 250 242 / 88%)),
+    radial-gradient(circle at 0% 0%, rgb(245 158 11 / 12%), transparent 34%);
 }
 
 .anlyx-capture-state--failed {
@@ -606,26 +1098,34 @@ body {
 }
 
 .anlyx-inspector {
-  grid-row: 1 / span 2;
+  grid-column: 5;
+  grid-row: 1;
+  overflow: auto;
   min-width: 0;
+  min-height: 0;
   border-left: 1px solid var(--anlyx-color-border);
+  background: #fbfcff;
+  box-shadow: -12px 0 34px rgb(15 23 42 / 3%);
 }
 
 .anlyx-inspector-stack {
   display: grid;
-  gap: 14px;
-  padding: 20px;
+  gap: 12px;
+  padding: 14px;
 }
 
 .anlyx-field,
 .anlyx-inspector-group {
   display: grid;
-  gap: 6px;
+  gap: 8px;
 }
 
 .anlyx-inspector-group {
-  padding-top: 12px;
-  border-top: 1px solid var(--anlyx-color-border);
+  padding: 14px;
+  border: 1px solid var(--anlyx-color-border);
+  border-radius: var(--anlyx-radius);
+  background: #ffffff;
+  box-shadow: var(--anlyx-shadow-panel);
 }
 
 .anlyx-inspector-group h3,
@@ -634,6 +1134,42 @@ body {
   margin: 0;
 }
 
+.anlyx-inspector-group h3 {
+  color: #334155;
+  font-size: 13px;
+  font-weight: 800;
+}
+
+.anlyx-inspector-group__heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.anlyx-copy-button {
+  min-height: 26px;
+  padding: 0 9px;
+  border: 1px solid var(--anlyx-color-border);
+  border-radius: 999px;
+  background: #f8fafc;
+  color: var(--anlyx-color-text-secondary);
+  font: inherit;
+  font-size: 12px;
+  font-weight: 700;
+  cursor: pointer;
+}
+
+.anlyx-inspector-note {
+  color: var(--anlyx-color-text-secondary);
+  font-size: 12px;
+}
+
+.anlyx-field__value {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 .anlyx-inspector-group ul {
   padding-left: 18px;
 }
@@ -642,10 +1178,10 @@ body {
   overflow: auto;
   max-width: 100%;
   margin: 0;
-  padding: 10px;
+  padding: 12px;
   border: 1px solid var(--anlyx-color-border);
-  border-radius: 6px;
-  background: var(--anlyx-color-background);
+  border-radius: 8px;
+  background: #f7f9fd;
   color: var(--anlyx-color-text-secondary);
   font-size: 12px;
 }
@@ -661,7 +1197,17 @@ body {
   justify-content: space-between;
   gap: 16px;
   padding: 12px 20px;
-  border-top: 1px solid var(--anlyx-color-border);
+  border-bottom: 1px solid var(--anlyx-color-border);
+  background: rgb(255 255 255 / 86%);
+  backdrop-filter: blur(14px);
+}
+
+.anlyx-process-view {
+  display: grid;
+  overflow: hidden;
+  min-width: 0;
+  min-height: 0;
+  grid-template-rows: auto minmax(0, 1fr) auto;
 }
 
 .anlyx-replay__buttons {
@@ -671,7 +1217,26 @@ body {
 }
 
 .anlyx-replay button {
-  padding: 0 12px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 7px;
+  min-height: 38px;
+  padding: 0 14px;
+  font-weight: 700;
+}
+
+.anlyx-replay button svg {
+  flex: 0 0 auto;
+}
+
+.anlyx-replay .anlyx-replay__button--primary {
+  border-color: #1d4ed8;
+  background: linear-gradient(180deg, #2f7df4, #125de0);
+  color: #ffffff;
+  box-shadow:
+    0 12px 24px rgb(37 99 235 / 22%),
+    inset 0 1px 0 rgb(255 255 255 / 22%);
 }
 
 .anlyx-replay button[aria-pressed="true"] {
@@ -689,13 +1254,25 @@ body {
   justify-content: flex-end;
   color: var(--anlyx-color-text-secondary);
   font-size: 12px;
+  font-weight: 700;
+}
+
+.anlyx-replay__state label {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 8px;
+  border: 1px solid var(--anlyx-color-border);
+  border-radius: 999px;
+  background: #f8fbff;
 }
 
 .anlyx-replay__state span {
   padding: 4px 8px;
   border: 1px solid var(--anlyx-color-border);
   border-radius: 999px;
-  background: var(--anlyx-color-background);
+  background: #eef5ff;
+  color: #1d4ed8;
 }
 
 .anlyx-replay__empty {
@@ -705,9 +1282,114 @@ body {
   font-size: 12px;
 }
 
+.anlyx-process-timeline {
+  display: grid;
+  gap: 12px;
+  padding: 14px 20px 18px;
+  border-top: 1px solid var(--anlyx-color-border);
+  background: rgb(255 255 255 / 92%);
+  box-shadow: 0 -10px 28px rgb(15 23 42 / 4%);
+}
+
+.anlyx-process-timeline__header {
+  display: flex;
+  justify-content: space-between;
+  gap: 16px;
+  color: var(--anlyx-color-text-secondary);
+  font-size: 12px;
+  font-weight: 700;
+  text-transform: uppercase;
+}
+
+.anlyx-process-timeline__rail {
+  display: flex;
+  gap: 10px;
+  overflow-x: auto;
+  padding: 0 0 4px;
+  margin: 0;
+  list-style: none;
+}
+
+.anlyx-process-step {
+  position: relative;
+  display: grid;
+  min-width: 152px;
+  gap: 4px;
+  padding: 11px 12px;
+  border: 1px solid var(--anlyx-color-border);
+  border-radius: var(--anlyx-radius);
+  background: var(--anlyx-color-panel);
+  color: var(--anlyx-color-text-secondary);
+}
+
+.anlyx-process-step--request {
+  border-top: 3px solid var(--anlyx-color-request);
+}
+
+.anlyx-process-step--response {
+  border-top: 3px solid var(--anlyx-color-response);
+}
+
+.anlyx-process-step--complete-stop {
+  border-top: 3px solid var(--anlyx-color-database);
+  background: linear-gradient(180deg, #ffffff, #f3fffb);
+}
+
+.anlyx-process-step--complete {
+  opacity: 0.72;
+}
+
+.anlyx-process-step--active {
+  color: var(--anlyx-color-text-primary);
+  border-color: #82aefc;
+  box-shadow:
+    0 0 0 5px rgb(37 99 235 / 9%),
+    0 14px 30px rgb(37 99 235 / 14%);
+  transform: translateY(-1px);
+}
+
+.anlyx-process-step__dot {
+  position: absolute;
+  top: -8px;
+  left: 12px;
+  display: grid;
+  width: 10px;
+  height: 10px;
+  place-items: center;
+  border-radius: 999px;
+  background: var(--anlyx-color-request);
+  color: #ffffff;
+  box-shadow: 0 0 0 4px rgb(37 99 235 / 14%);
+}
+
+.anlyx-process-step--response .anlyx-process-step__dot {
+  background: var(--anlyx-color-response);
+  box-shadow: 0 0 0 4px rgb(139 92 246 / 14%);
+}
+
+.anlyx-process-step--active .anlyx-process-step__dot {
+  animation: anlyx-node-pulse 1s ease-in-out infinite;
+}
+
+.anlyx-process-step__phase,
+.anlyx-process-step__label {
+  font-size: 11px;
+  font-weight: 800;
+  text-transform: uppercase;
+}
+
+.anlyx-process-step__node {
+  overflow: hidden;
+  color: var(--anlyx-color-text-primary);
+  font-size: 12px;
+  font-weight: 650;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .anlyx-generated-at {
   position: fixed;
-  right: 16px;
+  right: 20px;
   bottom: 12px;
   font-size: 12px;
   pointer-events: none;
@@ -737,10 +1419,14 @@ body {
 .anlyx-status-badge--get,
 .anlyx-status-badge--success,
 .anlyx-status-badge--high {
+  border-color: #b7ead8;
+  background: #eefdf7;
   color: var(--anlyx-color-method-get);
 }
 
 .anlyx-status-badge--post {
+  border-color: #bfdbfe;
+  background: #eff6ff;
   color: var(--anlyx-color-method-post);
 }
 
@@ -748,32 +1434,51 @@ body {
 .anlyx-status-badge--patch,
 .anlyx-status-badge--pending,
 .anlyx-status-badge--medium {
+  border-color: #fed7aa;
+  background: #fff7ed;
   color: var(--anlyx-color-method-update);
 }
 
 .anlyx-status-badge--delete,
 .anlyx-status-badge--failed,
 .anlyx-status-badge--low {
+  border-color: #fecaca;
+  background: #fff1f2;
   color: var(--anlyx-color-method-delete);
 }
 
 .anlyx-status-badge--unknown {
+  border-color: #d9e1ee;
+  background: #f8fafc;
   color: var(--anlyx-color-confidence-unknown);
 }
 
 @media (max-width: 960px) {
   .anlyx-shell {
-    grid-template-columns: 1fr;
-    grid-template-rows: auto auto auto;
+    grid-template-columns: 1fr !important;
+    grid-template-rows: auto minmax(520px, 1fr) auto;
+    overflow: auto;
   }
 
   .anlyx-sidebar,
   .anlyx-inspector {
+    grid-column: auto;
     grid-row: auto;
+    overflow: visible;
     border-right: 0;
     border-left: 0;
   }
 
+  .anlyx-resize-handle {
+    display: none;
+  }
+
+  .anlyx-sidebar__list-region,
+  .anlyx-page-storyboard,
+  .anlyx-inspector {
+    overflow: visible;
+  }
+
   .anlyx-generated-at {
     position: static;
     padding: 12px 20px;
@@ -784,3 +1489,24 @@ body {
     grid-template-columns: 1fr;
   }
 }
+
+@keyframes anlyx-flow-travel {
+  from {
+    stroke-dashoffset: 18;
+  }
+
+  to {
+    stroke-dashoffset: 0;
+  }
+}
+
+@keyframes anlyx-node-pulse {
+  0%,
+  100% {
+    transform: scale(1);
+  }
+
+  50% {
+    transform: scale(1.015);
+  }
+}