fixing the ui

Author: alizamili00

README.md

@@ -79,20 +79,8 @@ src/
 │       └── httpClient.ts
 ├── lib/             # Shared utilities
 │   ├── config.ts    # All config management (auth + project)
-│   ├── inject.ts    # Secret injection
-│   ├── keyring.ts   # Secure keyring storage
-│   ├── error.ts     # Error handling
-│   ├── input.ts     # User input helpers
-│   └── terminal.ts  # Terminal utilities
+|
 └── ui/              # Ink UI components
-    ├── LoginFlow.tsx
-    ├── RunFlow.tsx
-    ├── EnkryptifyLogin.tsx
-    ├── AwsLogin.tsx
-    ├── SecretsTable.tsx
-    ├── SelectItem.tsx
-    ├── Confirm.tsx
-    └── SuccessMessage.tsx
 ```
 
 ---

src/cmd/run.ts

@@ -27,6 +27,12 @@ export async function runCommand(
         options.unmountSpinner();
     }
 
+    // ✅ Print immediately after injection (before the user's command output starts)
+    const successMessage = options?.env
+        ? `Secrets injected successfully for environment "${options.env}".\n`
+        : "Secrets injected successfully.\n";
+    process.stderr.write(successMessage);
+
     if (cmd.length === 0) {
         throw new Error("Command is required. Please provide a command to run.");
     }
@@ -43,7 +49,7 @@ export async function runCommand(
         stdout: "inherit",
         stderr: "inherit",
     });
-    await proc.exited;
+
     const exitCode = await proc.exited;
     if (exitCode !== 0) {
         throw new Error(`Command exited with code ${exitCode}`);

src/providers/enkryptify/provider.ts

@@ -103,18 +103,24 @@ export class EnkryptifyProvider implements Provider {
             throw new Error("No workspaces found. Please create a workspace first before setting up.");
         }
 
-        const workspaceSlug = await selectName(
-            workspaces.map((ws) => `${ws.slug}`),
-            "Select workspace",
-        );
+        const workspaceMap = new Map<string, Workspace>();
+        const workspaceLabels = workspaces.map((ws) => {
+            const label = `${ws.name} (${ws.slug})`;
+            workspaceMap.set(label, ws);
+            return label;
+        });
 
-        if (!workspaceSlug) throw new Error("Failed to select workspace");
+        const selectedWorkspaceLabel = await selectName(workspaceLabels, "Select workspace");
 
-        const selectedWorkspace = workspaces.find((ws) => ws.slug === workspaceSlug);
+        if (!selectedWorkspaceLabel) throw new Error("Failed to select workspace");
+
+        const selectedWorkspace = workspaceMap.get(selectedWorkspaceLabel);
         if (!selectedWorkspace) {
             throw new Error("Failed to find selected workspace");
         }
 
+        const workspaceSlug = selectedWorkspace.slug;
+
         const projectsResponse = await this.fetchResource<ProjectTeam>(`/v1/workspace/${workspaceSlug}/project`);
 
         const allProjects: Project[] = [];
@@ -130,18 +136,24 @@ export class EnkryptifyProvider implements Provider {
             );
         }
 
-        const projectSlug = await selectName(
-            allProjects.map((p) => p.slug),
-            "Select project",
-        );
+        const projectMap = new Map<string, Project>();
+        const projectLabels = allProjects.map((p) => {
+            const label = `${p.name} (${p.slug})`;
+            projectMap.set(label, p);
+            return label;
+        });
 
-        if (!projectSlug) throw new Error("Failed to select project");
+        const selectedProjectLabel = await selectName(projectLabels, "Select project");
 
-        const selectedProject = allProjects.find((p) => p.slug === projectSlug);
+        if (!selectedProjectLabel) throw new Error("Failed to select project");
+
+        const selectedProject = projectMap.get(selectedProjectLabel);
         if (!selectedProject) {
             throw new Error("Failed to find selected project");
         }
 
+        const projectSlug = selectedProject.slug;
+
         const environments = await this.fetchResource<Environment>(
             `/v1/workspace/${workspaceSlug}/project/${projectSlug}/environment`,
         );

src/ui/Confirm.tsx

@@ -3,28 +3,27 @@ import SelectInput from "ink-select-input";
 
 export async function confirm(message: string): Promise<boolean> {
     const items = [
-        { label: "Yes", value: "yes" },
-        { label: "No", value: "no" },
+        { label: "Yes", value: true },
+        { label: "No", value: false },
     ];
 
     return new Promise((resolve) => {
-        const confirm = render(
+        const app = render(
             <Box flexDirection="column">
-                {message && (
+                {message ? (
                     <Box marginBottom={1}>
                         <Text bold>{message}</Text>
                     </Box>
-                )}
-                <Box flexDirection="column">
-                    <SelectInput
-                        items={items}
-                        onSelect={(item) => {
-                            confirm.unmount();
-                            process.stdout.write("\x1b[2J\x1b[H");
-                            resolve(item.value === "yes");
-                        }}
-                    />
-                </Box>
+                ) : null}
+
+                <SelectInput
+                    items={items}
+                    onSelect={(item) => {
+                        app.clear();
+                        app.unmount();
+                        resolve(item.value);
+                    }}
+                />
             </Box>,
         );
     });

src/ui/RunFlow.tsx

@@ -1,3 +1,4 @@
+import ansiEscapes from "ansi-escapes";
 import { Box, Text, render } from "ink";
 import Spinner from "ink-spinner";
 
@@ -24,18 +25,22 @@ export async function RunFlow({ envName, run }: RunFlowProps): Promise<void> {
         stdout: process.stderr,
     });
 
-    const unmountSpinner = () => spinner.unmount();
+    let done = false;
 
-    try {
-        await run(unmountSpinner);
+    const unmountSpinner = () => {
+        if (done) return;
+        done = true;
+
+        spinner.unmount();
 
-        const successMessage = envName
-            ? `Secrets injected successfully for environment "${envName}".\n`
-            : "Secrets injected successfully.\n";
+        process.stderr.write(ansiEscapes.eraseLines(1));
+    };
 
-        process.stderr.write(successMessage);
+    try {
+        await run(unmountSpinner);
+        unmountSpinner();
     } catch (error) {
-        spinner.unmount();
+        unmountSpinner();
         throw error;
     }
 }

src/ui/SelectItem.tsx

@@ -2,32 +2,31 @@ import { Box, Text, render } from "ink";
 import SelectInput from "ink-select-input";
 
 export async function selectName(options: string[], title?: string): Promise<string> {
-    if (!options.length) {
-        throw new Error("options array cannot be empty");
-    }
+    if (!options.length) throw new Error("options array cannot be empty");
+
     const items = options.map((name, index) => ({
         label: name,
         value: name,
         key: `${name}-${index}`,
     }));
+
     return new Promise((resolve) => {
-        const select = render(
-            <Box flexDirection="column" padding={1}>
-                {title && (
+        const app = render(
+            <Box flexDirection="column">
+                {title ? (
                     <Box marginBottom={1}>
                         <Text bold>{title}</Text>
                     </Box>
-                )}
-                <Box flexDirection="column">
-                    <SelectInput
-                        items={items}
-                        onSelect={(item) => {
-                            select.unmount();
-                            process.stdout.write("\x1b[2J\x1b[H");
-                            resolve(item.value as string);
-                        }}
-                    />
-                </Box>
+                ) : null}
+
+                <SelectInput
+                    items={items}
+                    onSelect={(item) => {
+                        app.clear();
+                        app.unmount();
+                        resolve(item.value);
+                    }}
+                />
             </Box>,
         );
     });