simple UI will replace

web-common/src/features/environment-variables/EnvWorkspace.svelte

@@ -46,9 +46,10 @@
     const project = currentProject?.project;
     const adminUrl = metadata?.adminUrl;
     const hasManageProject = $manageProjectAccess ?? false;
-    
+
     // Only show RC URL if user has manageProject permission (is admin)
-    if (!project?.orgName || !project?.name || !adminUrl || !hasManageProject) return "";
+    if (!project?.orgName || !project?.name || !adminUrl || !hasManageProject)
+      return "";
 
     // Convert admin URL to frontend URL (similar to getPlanUpgradeUrl)
     let cloudUrl = adminUrl.replace("admin.rilldata", "ui.rilldata");
@@ -177,7 +178,7 @@
           />
         </div>
       </div>
-       <div class="ml-auto flex gap-x-2 h-full w-fit items-center">
+      <div class="ml-auto flex gap-x-2 h-full w-fit items-center">
         {#if rcUrl}
           <Button
             type="secondary"
@@ -191,33 +192,32 @@
           </Button>
         {/if}
         <Button
-              type="secondary"
-              small
-              onClick={() => (pullDialogOpen = true)}
-              class="flex items-center gap-2"
-            >
-              <Download size="14px" />
-            </Button>
-            <Button
-              type="secondary"
-              small
-              onClick={() => (pushDialogOpen = true)}
-              class="flex items-center gap-2"
-            >
-              <Upload size="14px" />
-            </Button>
+          type="secondary"
+          small
+          onClick={() => (pullDialogOpen = true)}
+          class="flex items-center gap-2"
+        >
+          <Download size="14px" />
+        </Button>
+        <Button
+          type="secondary"
+          small
+          onClick={() => (pushDialogOpen = true)}
+          class="flex items-center gap-2"
+        >
+          <Upload size="14px" />
+        </Button>
         {#if viewMode === "viz"}
-
-            <Button
-              type="primary"
-              small
-              onClick={() => (addDialogOpen = true)}
-              class="flex items-center gap-2"
-            >
-              <Plus size="14px" />
-              <span>Add variable</span>
-            </Button>
-        {/if} 
+          <Button
+            type="primary"
+            small
+            onClick={() => (addDialogOpen = true)}
+            class="flex items-center gap-2"
+          >
+            <Plus size="14px" />
+            <span>Add variable</span>
+          </Button>
+        {/if}
       </div>
     </div>
   </div>

web-common/src/features/environment-variables/PullEnvDialog.svelte

@@ -10,10 +10,9 @@
     DialogTrigger,
   } from "@rilldata/web-common/components/dialog";
   import { Copy, CheckIcon } from "lucide-svelte";
   import type { EnvVariable } from "./types";
 
   export let open = false;
-  export let currentVariables: EnvVariable[] = [];
 
   let copied = false;
   let copiedTimeout: ReturnType<typeof setTimeout>;
@@ -27,7 +26,7 @@
     copiedTimeout = setTimeout(() => {
       copied = false;
     }, 2000);
-    }
+  }
 </script>
 
 <Dialog bind:open>
@@ -43,46 +42,24 @@
       </DialogDescription>
     </DialogHeader>
     <div class="py-4 space-y-4">
-      <p class="text-sm text-gray-700">
-        Use the Rill CLI to pull environment variables from your cloud project.
-        This will merge cloud variables with your local .env file.
-      </p>
-
-      <div class="space-y-2">
-        <p class="text-xs font-medium text-gray-600 uppercase">Command</p>
-        <div class="relative">
-          <div class="bg-gray-50 border border-gray-200 rounded-md p-3 pr-12 font-mono text-sm">
-            {pullCommand}
-          </div>
-          <button
-            class="absolute right-2 top-1/2 -translate-y-1/2 p-2 hover:bg-gray-100 rounded transition-colors"
-            on:click={handleCopyCommand}
-            aria-label="Copy command"
-          >
-            {#if copied}
-              <CheckIcon size="16px" class="text-green-600" />
-            {:else}
-              <Copy size="16px" class="text-gray-600" />
-            {/if}
-          </button>
+      <div class="relative">
+        <div
+          class="bg-gray-50 border border-gray-200 rounded-md p-3 pr-12 font-mono text-sm"
+        >
+          {pullCommand}
         </div>
+        <button
+          class="absolute right-2 top-1/2 -translate-y-1/2 p-2 hover:bg-gray-100 rounded transition-colors"
+          on:click={handleCopyCommand}
+          aria-label="Copy command"
+        >
+          {#if copied}
+            <CheckIcon size="16px" class="text-green-600" />
+          {:else}
+            <Copy size="16px" class="text-gray-600" />
+          {/if}
+        </button>
       </div>
-
-      <div class="space-y-2">
-        <p class="text-xs font-medium text-gray-600 uppercase">Options</p>
-        <ul class="text-sm text-gray-600 space-y-1">
-          <li><code class="bg-gray-100 px-1 rounded">--environment dev</code> - Pull dev environment variables (default)</li>
-          <li><code class="bg-gray-100 px-1 rounded">--environment prod</code> - Pull prod environment variables</li>
-          <li><code class="bg-gray-100 px-1 rounded">--project &lt;name&gt;</code> - Specify project name</li>
-        </ul>
-      </div>
-
-      <p class="text-xs text-gray-500">
-        You currently have <strong>{currentVariables.length}</strong> variable{currentVariables.length ===
-        1
-          ? ""
-          : "s"} in your local .env file.
-      </p>
     </div>
     <DialogFooter>
       <Button type="plain" onClick={() => (open = false)}>Close</Button>

web-common/src/features/environment-variables/PushEnvDialog.svelte

@@ -13,7 +13,7 @@
   import type { EnvVariable } from "./types";
 
   export let open = false;
   export let currentVariables: EnvVariable[] = [];
 
   let copied = false;
   let copiedTimeout: ReturnType<typeof setTimeout>;
@@ -42,39 +42,26 @@
       </DialogDescription>
     </DialogHeader>
     <div class="py-4 space-y-4">
-      <p class="text-sm text-gray-700">
-        Use the Rill CLI to push your local environment variables to your cloud
-        project. This will merge your local variables with cloud variables.
-      </p>
-
-      <div class="space-y-2">
-        <p class="text-xs font-medium text-gray-600 uppercase">Command</p>
-        <div class="relative">
-          <div
-            class="bg-gray-50 border border-gray-200 rounded-md p-3 pr-12 font-mono text-sm"
-          >
-            {pushCommand}
-          </div>
-          <button
-            class="absolute right-2 top-1/2 -translate-y-1/2 p-2 hover:bg-gray-100 rounded transition-colors"
-            on:click={handleCopyCommand}
-            aria-label="Copy command"
-          >
-            {#if copied}
-              <CheckIcon size="16px" class="text-green-600" />
-            {:else}
-              <Copy size="16px" class="text-gray-600" />
-            {/if}
-          </button>
+      <div class="relative">
+        <div
+          class="bg-gray-50 border border-gray-200 rounded-md p-3 pr-12 font-mono text-sm"
+        >
+          {pushCommand}
         </div>
+        <button
+          class="absolute right-2 top-1/2 -translate-y-1/2 p-2 hover:bg-gray-100 rounded transition-colors"
+          on:click={handleCopyCommand}
+          aria-label="Copy command"
+        >
+          {#if copied}
+            <CheckIcon size="16px" class="text-green-600" />
+          {:else}
+            <Copy size="16px" class="text-gray-600" />
+          {/if}
+        </button>
       </div>
-      <p class="text-xs text-gray-500">
-        You currently have <strong>{currentVariables.length}</strong> variable{currentVariables.length ===
-        1
-          ? ""
-          : "s"} in your local .env file.
-      </p>
     </div>
+
     <DialogFooter>
       <Button type="plain" onClick={() => (open = false)}>Close</Button>
     </DialogFooter>