feat(usable): integrate current dbtool implementation snapshot

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

gui/prototype/index.html

@@ -56,9 +56,37 @@
         </article>
       </section>
 
+      <section class="workflow-strip" aria-label="MVP workflow review">
+        <div>
+          <p class="eyebrow">Guided Review</p>
+          <h2>MVP Workflow</h2>
+        </div>
+        <div class="workflow-steps">
+          <button class="workflow-step is-active" data-workflow-step="connect">
+            <strong>Connect</strong>
+            <span>C · 检查目标选择、环境标签和连接健康态</span>
+          </button>
+          <button class="workflow-step" data-workflow-step="inspect">
+            <strong>Inspect</strong>
+            <span>I · 核对 schema browser、selection 和 inspector 一致性</span>
+          </button>
+          <button class="workflow-step" data-workflow-step="query">
+            <strong>Query</strong>
+            <span>Q · 评审 SQL 草稿、执行反馈和结果切换</span>
+          </button>
+          <button class="workflow-step" data-workflow-step="export">
+            <strong>Export</strong>
+            <span>E · 复核导出状态、默认路径和禁用约束</span>
+          </button>
+        </div>
+        <p class="workflow-copy" id="workflow-copy">
+          当前聚焦 Connect：先确认活动目标、环境标签和连接摘要清晰可见。
+        </p>
+      </section>
+
       <main class="workspace">
         <aside class="panel panel--nav">
-          <section class="panel-section">
+          <section class="panel-section" data-review-panel="connect">
             <div class="section-head">
               <div>
                 <p class="eyebrow">Connection Manager</p>
@@ -136,7 +164,7 @@
             </div>
           </section>
 
-          <section class="panel-section">
+          <section class="panel-section" data-review-panel="inspect">
             <div class="section-head">
               <div>
                 <p class="eyebrow">Schema Browser</p>
@@ -164,7 +192,7 @@
           </section>
         </aside>
 
-        <section class="panel panel--main">
+        <section class="panel panel--main" data-review-panel="query">
           <div class="editor-toolbar">
             <div class="toolbar-tabs" id="toolbar-tabs"></div>
 
@@ -229,7 +257,7 @@
             </div>
           </section>
 
-          <section class="bottom-panel">
+          <section class="bottom-panel" data-review-panel="export">
             <div class="bottom-tabs">
               <button class="bottom-tab is-active" data-tab="results">Results</button>
               <button class="bottom-tab" data-tab="history">History</button>
@@ -291,8 +319,12 @@
           </section>
 
           <footer class="status-bar">
-            <span id="status-message" aria-live="polite">Ready for review. Use 1–5 to preview states, `R` to simulate run, `T` to switch theme, `/` to focus search.</span>
+            <span id="status-message" aria-live="polite">Ready for review. Use C / I / Q / E to move through the workflow, 1–5 to preview states, `R` to simulate run, `T` to switch theme, `/` to focus search.</span>
             <div class="status-shortcuts">
+              <span>C Connect</span>
+              <span>I Inspect</span>
+              <span>Q Query</span>
+              <span>E Export</span>
               <span>1 Running</span>
               <span>2 Success</span>
               <span>3 Empty</span>