feat(usable): integrate current dbtool implementation snapshot

Co-Authored-By: Paperclip <noreply@paperclip.ing>

gui/prototype/styles.css

@@ -150,6 +150,67 @@ select {
   margin-bottom: 16px;
 }
 
+.workflow-strip {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  gap: 14px 18px;
+  align-items: start;
+  padding: 16px 18px;
+  margin-bottom: 16px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--panel);
+  box-shadow: var(--shadow);
+}
+
+.workflow-strip h2 {
+  margin: 0;
+  font-size: 16px;
+  letter-spacing: -0.01em;
+}
+
+.workflow-steps {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.workflow-step {
+  display: grid;
+  gap: 6px;
+  padding: 12px 14px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: var(--panel-muted);
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+  transition: border-color 120ms ease, background 120ms ease, transform 120ms ease;
+}
+
+.workflow-step:hover,
+.workflow-step:focus-visible {
+  border-color: color-mix(in srgb, var(--accent) 36%, var(--border));
+  outline: none;
+}
+
+.workflow-step.is-active {
+  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
+  background: var(--accent-soft);
+}
+
+.workflow-step span,
+.workflow-copy {
+  color: var(--muted);
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+.workflow-copy {
+  grid-column: 2;
+  margin: 0;
+}
+
 .summary-card {
   padding: 16px 18px;
   border: 1px solid var(--border);
@@ -188,6 +249,20 @@ select {
   overflow: hidden;
 }
 
+[data-review-panel] {
+  transition: border-color 120ms ease, background 120ms ease, box-shadow 120ms ease;
+}
+
+[data-review-panel].is-review-focus {
+  border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent), var(--shadow);
+}
+
+.panel-section.is-review-focus,
+.bottom-panel.is-review-focus {
+  background: color-mix(in srgb, var(--accent-soft) 48%, var(--panel));
+}
+
 .panel--nav,
 .panel--side {
   display: flex;
@@ -703,6 +778,18 @@ th {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 
+  .workflow-strip {
+    grid-template-columns: 1fr;
+  }
+
+  .workflow-copy {
+    grid-column: auto;
+  }
+
+  .workflow-steps {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
   .workspace {
     grid-template-columns: 250px minmax(520px, 1fr) 250px;
   }
@@ -713,7 +800,8 @@ th {
   .status-bar,
   .result-summary,
   .context-strip,
-  .workspace-summary {
+  .workspace-summary,
+  .workflow-steps {
     grid-template-columns: 1fr;
   }