feat(v0.2): dock-style pipeline + compress_finished_job

On-chain:
- CompressedJob struct for post-settlement job data archival
- compress_finished_job instruction: copies job fields to Merkle leaf,
  closes Job PDA, reclaims rent back to poster
- CompressedJobAccounts context with poster + job validation

Pipeline demo:
- Dock-style animation: compact icon nodes, active enlarges in-flow
- Compress step now shows job PDA closure + rent reclaim
- Reputation step for agent track record
- Helper text visible only on active step
- ZK layer (cyan) styling for compression nodes
- Neighbor magnification effect

Author: jimmdd

client/src/App.css

@@ -286,6 +286,17 @@ body::before {
   border-right: 1px dashed rgba(251, 191, 36, 0.08);
 }
 
+.zone-zk {
+  right: 0;
+  width: 18%;
+  background: linear-gradient(270deg, rgba(6, 182, 212, 0.04) 0%, transparent 100%);
+  border-left: 1px dashed rgba(6, 182, 212, 0.08);
+}
+
+.zone-zk .zone-label {
+  color: #22d3ee;
+}
+
 .zone-label {
   position: absolute;
   top: 8px;
@@ -371,82 +382,114 @@ body::before {
   }
 }
 
-/* Nodes */
+/* Nodes — Dock-style: compact icons by default, enlarge in-flow on active */
 .pipeline-node {
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 0.3rem;
-  padding: 0.7rem 0.4rem;
-  border-radius: 14px;
+  gap: 0.1rem;
+  padding: 0.35rem 0.25rem;
+  border-radius: 10px;
   border: 1px solid transparent;
   position: relative;
-  transition: all 0.4s ease;
-  min-width: 60px;
+  transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  min-width: 32px;
 }
 
 .pipeline-node .node-icon {
-  font-size: 1.3rem;
-  transition: transform 0.3s ease;
+  font-size: 0.95rem;
+  transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }
 
 .pipeline-node .node-label {
-  font-size: 0.62rem;
+  font-size: 0;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.06em;
   color: var(--text-dim);
-  transition: color 0.3s ease;
+  transition: all 0.3s ease;
+  opacity: 0;
+  max-height: 0;
+  overflow: hidden;
+  line-height: 1;
 }
 
 /* Layer-specific styling */
 .pipeline-node.l1 {}
 
 .pipeline-node.er .node-label {
   color: var(--er-color);
-  opacity: 0.5;
+}
+
+.pipeline-node.zk .node-label {
+  color: #22d3ee;
 }
 
 .pipeline-node.done .node-label {
   color: var(--done-color);
-  opacity: 0.5;
 }
 
-/* Active state */
+/* ── Dock: near neighbor — slightly bigger, no transform ── */
+.pipeline-node.node-near {
+  padding: 0.4rem 0.3rem;
+}
+
+.pipeline-node.node-near .node-icon {
+  font-size: 1.1rem;
+}
+
+/* ── Dock: active node — enlarged in-flow ── */
 .pipeline-node.node-active {
   border-color: var(--border-glow);
   background: rgba(52, 211, 153, 0.06);
+  padding: 0.5rem 0.5rem;
+  min-width: 56px;
 }
 
 .pipeline-node.node-active.er {
   border-color: var(--er-glow);
   background: rgba(251, 191, 36, 0.06);
 }
 
+.pipeline-node.node-active.zk {
+  border-color: rgba(6, 182, 212, 0.4);
+  background: rgba(6, 182, 212, 0.06);
+}
+
 .pipeline-node.node-active .node-icon {
-  transform: scale(1.2);
-  filter: drop-shadow(0 0 10px var(--accent-glow));
+  font-size: 1.3rem;
+  filter: drop-shadow(0 0 8px var(--accent-glow));
 }
 
 .pipeline-node.node-active.er .node-icon {
-  filter: drop-shadow(0 0 10px var(--er-glow));
+  filter: drop-shadow(0 0 8px var(--er-glow));
+}
+
+.pipeline-node.node-active.zk .node-icon {
+  filter: drop-shadow(0 0 8px rgba(6, 182, 212, 0.5));
 }
 
 .pipeline-node.node-active .node-label {
+  font-size: 0.55rem;
+  opacity: 1;
+  max-height: 1em;
   color: var(--accent);
 }
 
 .pipeline-node.node-active.er .node-label {
   color: var(--er-color);
-  opacity: 1;
+}
+
+.pipeline-node.node-active.zk .node-label {
+  color: #22d3ee;
 }
 
 /* Ring pulse on active */
 .node-ring {
   position: absolute;
-  inset: -4px;
-  border-radius: 18px;
-  border: 2px solid var(--accent);
+  inset: -3px;
+  border-radius: 13px;
+  border: 1.5px solid var(--accent);
   opacity: 0;
   animation: ringPulse 1.5s ease-out infinite;
 }
@@ -455,6 +498,10 @@ body::before {
   border-color: var(--er-color);
 }
 
+.pipeline-node.zk .node-ring {
+  border-color: #22d3ee;
+}
+
 @keyframes ringPulse {
   0% {
     opacity: 0.6;
@@ -478,116 +525,40 @@ body::before {
 
 .pipeline-node.node-done .node-label {
   color: var(--text-dim);
-
-}
-
-/* ZK Compression layer */
-.pipeline-node.zk .node-label {
-  color: #22d3ee;
+  font-size: 0.5rem;
   opacity: 0.5;
+  max-width: 60px;
 }
 
-.pipeline-node.node-active.zk {
-  border-color: rgba(6, 182, 212, 0.4);
-  background: rgba(6, 182, 212, 0.06);
-}
-
-.pipeline-node.node-active.zk .node-icon {
-  filter: drop-shadow(0 0 10px rgba(6, 182, 212, 0.5));
-}
-
-.pipeline-node.node-active.zk .node-label {
-  color: #22d3ee;
-  opacity: 1;
-}
-
-.pipeline-node.zk .node-ring {
-  border-color: #22d3ee;
-}
-
-/* Stage group layout */
-.pipeline-stage-group {
-  margin-bottom: 0.5rem;
-}
-
-.stage-label {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.3rem 0.5rem;
-  margin-bottom: 0.4rem;
-}
-
-.stage-name {
-  font-size: 0.65rem;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  color: #64748b;
-}
-
-.stage-badge-sm {
-  font-size: 0.55rem;
-  font-weight: 700;
-  padding: 0.1rem 0.4rem;
-  border-radius: 4px;
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-}
-
-.stage-badge-sm-l1 {
-  background: rgba(52, 211, 153, 0.1);
-  color: #34d399;
-}
-
-.stage-badge-sm-er {
-  background: rgba(251, 191, 36, 0.1);
-  color: #fbbf24;
-}
-
-.stage-badge-sm-zk {
-  background: rgba(6, 182, 212, 0.1);
-  color: #22d3ee;
-}
-
-.stage-label-l1 .stage-name {
-  color: rgba(52, 211, 153, 0.6);
-}
-
-.stage-label-er .stage-name {
-  color: rgba(251, 191, 36, 0.6);
-}
-
-.stage-label-zk .stage-name {
-  color: rgba(6, 182, 212, 0.6);
-}
-
-.pipeline-stage-track {
-  display: flex;
-  align-items: flex-start;
-  gap: 0;
-}
-
+/* Node column wrapper */
 .pipeline-node-col {
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 0.25rem;
+  gap: 0.2rem;
+  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
 }
 
-/* Helper text under each node */
+/* Helper text — only visible on active */
 .node-helper {
   font-size: 0.55rem;
-  color: #334155;
+  color: #64748b;
   text-align: center;
-  max-width: 80px;
+  max-width: 100px;
   line-height: 1.3;
-  transition: color 0.3s;
-  min-height: 2.2em;
+  animation: helperFadeIn 0.3s ease forwards;
 }
 
-.node-helper-active {
-  color: #64748b;
+@keyframes helperFadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
 /* ---- Bottom Row ---- */