UI fix

.vscode/settings.json

@@ -1,7 +1,7 @@
 {
   "claudeRunner.defaultRootPath": "/workspace",
   "claudeRunner.allowAllTools": true,
-  "claudeRunner.defaultModel": "auto",
+  "claudeRunner.defaultModel": "claude-sonnet-4-20250514",
   "sonarlint.connectedMode.project": {
     "connectionId": "claude-runner",
     "projectKey": "claude-runner"

VERSION

@@ -1 +1 @@
-0.3.0
+0.3.1

package.json

@@ -2,7 +2,7 @@
   "name": "claude-runner",
   "displayName": "Claude Runner",
   "description": "Execute Claude Code commands directly from VS Code with an intuitive interface",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "publisher": "Codingworkflow",
   "private": false,
   "license": "GPL-3.0",

src/components/common/CommandForm.tsx

@@ -25,17 +25,20 @@ const CommandForm: React.FC<CommandFormProps> = ({
   };
 
   return (
-    <div className="add-command-form">
-      <input
-        type="text"
-        placeholder={placeholder}
-        value={value}
-        onChange={(e) => onChange(e.target.value)}
-        onKeyPress={handleKeyPress}
-        disabled={disabled}
-        autoFocus
-      />
-      <div className="form-actions">
+    <div className="task-item">
+      <div className="input-group">
+        <input
+          type="text"
+          className="task-name-input"
+          placeholder={placeholder}
+          value={value}
+          onChange={(e) => onChange(e.target.value)}
+          onKeyPress={handleKeyPress}
+          disabled={disabled}
+          autoFocus
+        />
+      </div>
+      <div className="control-buttons">
         <Button
           variant="primary"
           onClick={onSubmit}

src/components/panels/RunnerPanel.tsx

@@ -48,20 +48,26 @@ const RunnerPanel: React.FC<RunnerPanelProps> = ({ disabled }) => {
     }
   };
 
-  const canRunTasks =
-    tasks.some((task) => task.prompt.trim()) && !isTasksRunning;
+  const clearWorkflow = () => {
+    actions.pipelineClearAll();
+    setLoadedWorkflowName("");
+  };
+
+  const deleteWorkflow = (executionId: string) => {
+    actions.deleteWorkflowState(executionId);
+    clearWorkflow();
+  };
+
+  const hasWorkflowLoaded =
+    loadedWorkflowName || tasks.some((task) => task.prompt.trim());
+  const canRunTasks = hasWorkflowLoaded && !isTasksRunning;
 
   const isPipelineFinished =
     !isTasksRunning &&
     !isPaused &&
     tasks.some((t) => t.prompt.trim().length > 0) &&
     tasks.some((t) => t.status === "completed" || t.status === "error");
 
-  const clearResults = () => {
-    actions.pipelineClearAll();
-    setLoadedWorkflowName("");
-  };
-
   return (
     <div className="runner-panel">
       <div className="workflow-selection">
@@ -100,49 +106,47 @@ const RunnerPanel: React.FC<RunnerPanelProps> = ({ disabled }) => {
 
       {loadedWorkflowName && (
         <div className="loaded-workflow">
-          <span>Current:</span>
+          Current:{" "}
           <strong>
             {loadedWorkflowName.split("/").pop()?.split("\\").pop()}
           </strong>
         </div>
       )}
 
-      <div className="execution-controls">
-        {!isTasksRunning && !isPaused && (
-          <button onClick={handleRunTasks} disabled={disabled || !canRunTasks}>
-            Run Workflow
-          </button>
-        )}
-
-        {isTasksRunning && !isPaused && (
-          <button onClick={() => actions.pausePipeline()} disabled={disabled}>
-            Pause
-          </button>
-        )}
-
-        {isPaused && pausedPipelines.length > 0 && (
-          <button
-            onClick={() =>
-              actions.resumePipeline(pausedPipelines[0].pipelineId)
-            }
-            disabled={disabled}
-          >
-            Resume
-          </button>
-        )}
-
-        {isTasksRunning && (
-          <button onClick={() => actions.cancelTask()} disabled={disabled}>
-            Cancel
-          </button>
-        )}
-
-        {isPipelineFinished && (
-          <button onClick={clearResults} disabled={disabled}>
-            Clear Results
-          </button>
-        )}
-      </div>
+      {!hasWorkflowLoaded && !isTasksRunning && !isPaused && (
+        <div className="workflow-message">Load workflow first</div>
+      )}
+
+      {(hasWorkflowLoaded || isTasksRunning || isPipelineFinished) && (
+        <div className="execution-controls">
+          {!isTasksRunning && !isPaused && hasWorkflowLoaded && (
+            <button
+              onClick={handleRunTasks}
+              disabled={disabled || !canRunTasks}
+            >
+              Run Workflow
+            </button>
+          )}
+
+          {isTasksRunning && !isPaused && (
+            <button onClick={() => actions.pausePipeline()} disabled={disabled}>
+              Pause
+            </button>
+          )}
+
+          {isTasksRunning && (
+            <button onClick={() => actions.cancelTask()} disabled={disabled}>
+              Cancel
+            </button>
+          )}
+
+          {isPipelineFinished && (
+            <button onClick={clearWorkflow} disabled={disabled}>
+              Clear Results
+            </button>
+          )}
+        </div>
+      )}
 
       {(pausedPipelines.length > 0 || resumableWorkflows.length > 0) && (
         <div className="resumable-section">
@@ -157,7 +161,7 @@ const RunnerPanel: React.FC<RunnerPanelProps> = ({ disabled }) => {
                 Resume
               </button>
               <button
-                onClick={() => actions.deleteWorkflowState(pipeline.pipelineId)}
+                onClick={() => deleteWorkflow(pipeline.pipelineId)}
                 disabled={disabled || isTasksRunning}
               >
                 Delete
@@ -174,9 +178,7 @@ const RunnerPanel: React.FC<RunnerPanelProps> = ({ disabled }) => {
                 Resume
               </button>
               <button
-                onClick={() =>
-                  actions.deleteWorkflowState(workflow.executionId)
-                }
+                onClick={() => deleteWorkflow(workflow.executionId)}
                 disabled={disabled || isTasksRunning}
               >
                 Delete