Add step command refinements: --here, --id, and help commands

- Add --here position option to insert steps before the current step
- Add --id option to specify custom step IDs for expression references
- Add --help flag support for all step commands with detailed usage info
- Update browser extension UI with ID field and improved position dropdown

browser-ext/content/content.css

@@ -932,6 +932,13 @@ html[data-color-mode="light"] .dap-debug-btn.selected {
   margin-bottom: 4px;
 }
 
+.dap-help-text {
+  font-size: 11px;
+  color: var(--fgColor-muted, #8b949e);
+  margin-top: 4px;
+  display: block;
+}
+
 .dap-modal .form-control {
   width: 100%;
   background-color: var(--bgColor-inset, #010409) !important;

browser-ext/content/content.js

@@ -610,6 +610,7 @@ function buildAddStepCommand(options) {
     }
   }
 
+  if (options.id) cmd += ` --id ${quoteString(options.id)}`;
   if (options.name) cmd += ` --name ${quoteString(options.name)}`;
   if (options.if) cmd += ` --if ${quoteString(options.if)}`;
   if (options.env) {
@@ -622,7 +623,8 @@ function buildAddStepCommand(options) {
 
   // Position
   if (options.position) {
-    if (options.position.after !== undefined) cmd += ` --after ${options.position.after}`;
+    if (options.position.here) cmd += ' --here';
+    else if (options.position.after !== undefined) cmd += ` --after ${options.position.after}`;
     else if (options.position.before !== undefined) cmd += ` --before ${options.position.before}`;
     else if (options.position.at !== undefined) cmd += ` --at ${options.position.at}`;
     else if (options.position.first) cmd += ' --first';
@@ -917,11 +919,17 @@ function showAddStepDialog() {
       <input type="text" class="form-control dap-name-input" placeholder="Step name">
     </div>
     
+    <div class="dap-form-group">
+      <label class="dap-label">ID (optional)</label>
+      <input type="text" class="form-control dap-id-input" placeholder="my_step_id">
+      <span class="dap-help-text">Used to reference step outputs: steps.&lt;id&gt;.outputs</span>
+    </div>
+    
     <div class="dap-form-group">
       <label class="dap-label">Position</label>
       <select class="form-control dap-position-select">
-        <option value="last">At end (default)</option>
-        <option value="first">At first pending position</option>
+        <option value="here" selected>Before next step</option>
+        <option value="last">At end</option>
         <option value="after">After current step</option>
       </select>
     </div>
@@ -965,18 +973,19 @@ function showAddStepDialog() {
 async function handleAddStep(modal) {
   const type = modal.querySelector('.dap-step-type-select').value;
   const name = modal.querySelector('.dap-name-input').value.trim() || undefined;
+  const id = modal.querySelector('.dap-id-input').value.trim() || undefined;
   const positionSelect = modal.querySelector('.dap-position-select').value;
 
   let position = {};
-  if (positionSelect === 'first') {
-    position.first = true;
+  if (positionSelect === 'here') {
+    position.here = true;
   } else if (positionSelect === 'after') {
     // After current step - find current step index
     const currentStep = stepsList.find((s) => s.status === 'current');
     if (currentStep) {
       position.after = currentStep.index;
     } else {
-      position.last = true;
+      position.here = true;
     }
   } else {
     position.last = true;
@@ -995,6 +1004,7 @@ async function handleAddStep(modal) {
     result = await sendStepCommand('step.add', {
       type: 'run',
       script,
+      id,
       name,
       shell,
       position,
@@ -1022,6 +1032,7 @@ async function handleAddStep(modal) {
     result = await sendStepCommand('step.add', {
       type: 'uses',
       action,
+      id,
       name,
       with: Object.keys(withInputs).length > 0 ? withInputs : undefined,
       position,