From 0fec11d97a53f2deefa82c86ef1eaddeef64d4ce Mon Sep 17 00:00:00 2001
From: ThatDeparted2061 <harshraocodesup@gmail.com>
Date: Thu, 4 Sep 2025 02:45:21 +0530
Subject: [PATCH 01/17] chore: Testebench initial design

---
 .../TestBenchPanel/TestBenchCreator.vue       | 833 ++++++++++--------
 1 file changed, 490 insertions(+), 343 deletions(-)

diff --git a/v0/src/components/Panels/TestBenchPanel/TestBenchCreator.vue b/v0/src/components/Panels/TestBenchPanel/TestBenchCreator.vue
index 93b5ede09..1bc472a22 100644
--- a/v0/src/components/Panels/TestBenchPanel/TestBenchCreator.vue
+++ b/v0/src/components/Panels/TestBenchPanel/TestBenchCreator.vue
@@ -1,135 +1,140 @@
 <template>
-    <v-dialog v-model="showCreator" :persistent="false">
-        <v-card class="messageBoxContent" id="creatorBox">
-            <v-card-text class="creatorHeader">
-                <p class="dialogHeader">{{ dialogTitle }}</p>
-                <v-btn size="x-small" icon class="dialogClose"
-                    @mousedown="testBenchStore.showTestBenchCreator = false">
+    <v-dialog v-model="showCreator" :persistent="false" max-width="1100px">
+        <v-card class="testbench-creator-card">
+            <!-- Header Section -->
+            <v-card-title class="headline-container">
+                <h1 class="headline-title">{{ dialogTitle }}</h1>
+                <v-btn icon size="small" variant="text" @click="testBenchStore.showTestBenchCreator = false" class="close-button">
                     <v-icon>mdi-close</v-icon>
                 </v-btn>
-                <div class="testInput">
-                    <label for="fileNameInputField">Title:</label>
-                    <input v-model="testTitle" class="inputField" type="text" />
-                </div>
-            </v-card-text>
+            </v-card-title>
 
-            <v-card-actions class="testType">
-                <v-btn class="messageBtn" block @mousedown="testType = 'seq'">
-                    Sequential Test
-                </v-btn>
-                <v-btn class="messageBtn" block @mousedown="testType = 'comb'">
-                    Combinational Test
-                </v-btn>
-            </v-card-actions>
+            <v-card-text class="pa-6">
+                <!-- Title Input -->
+                <div class="mb-6 text-center">
+                    <input v-model="testTitle" class="title-input" type="text" placeholder="Enter Test Title" />
+                </div>
 
-            <v-card-text style="testCard">
-                <div class="testCol">
-                    <div class="testRow firstCol">
+                <!-- Test Type Selection -->
+                <div class="test-type-container">
+                    <v-btn
+                        :class="['test-type-btn', { 'active': testType === 'seq' }]"
+                        @click="testType = 'seq'"
+                        elevation="0"
+                    >
+                        Sequential Test
+                    </v-btn>
+                    <v-btn
+                        :class="['test-type-btn', { 'active': testType === 'comb' }]"
+                        @click="testType = 'comb'"
+                        elevation="0"
+                    >
+                        Combinational Test
+                    </v-btn>
+                </div>
 
-                    </div>
-                    <div class="testRow fullTestRow space">
-                        <span>Inputs</span> <span @mousedown="increInputs" class="plusMinusBtn">+</span>
-                    </div>
-                    <div class="testRow fullTestRow space">
-                        <span>Outputs</span> <span @mousedown="increOutputs" class="plusMinusBtn">+</span>
-                    </div>
+                <!-- Empty State Placeholder -->
+                <div v-if="groups.length === 0" class="empty-state">
+                    <p>No test groups added yet. Click "+ New Group" to start creating your test.</p>
                 </div>
-                <div class="testCol">
-                    <div class="testRow firstCol">
-                        Label
-                    </div>
-                    <div class="testContainer">
-                        <div v-for="(_, i) in inputsName" class="testRow"
-                            :style="{ width: 100 / inputsBandWidth.length + '%' }">
-                            <input class="inputField dataGroupTitle smInputName" type="text" v-model="inputsName[i]" />
-                            <span @mousedown="deleteInput(i)" class="plusMinusBtn">-</span>
+
+                <!-- Test Data Table -->
+                <div v-else class="data-table-container">
+                    <!-- Table Header -->
+                    <div class="data-grid header-grid">
+                        <div class="grid-cell header-cell label-col"></div>
+                        <div class="grid-cell header-cell inputs-col">
+                            <span>Inputs</span>
+                            <v-btn icon size="x-small" variant="flat" class="ml-2 action-icon" @click="increInputs"><v-icon>mdi-plus</v-icon></v-btn>
                         </div>
-                    </div>
-                    <div class="testContainer">
-                        <div v-for="(_, i) in outputsName" class="testRow"
-                            :style="{ width: 100 / outputsBandWidth.length + '%' }">
-                            <input class="inputField dataGroupTitle smInputName" type="text" v-model="outputsName[i]" />
-                            <span @mousedown="deleteOutput(i)" class="plusMinusBtn">-</span>
+                        <div class="grid-cell header-cell outputs-col">
+                            <span>Outputs</span>
+                             <v-btn icon size="x-small" variant="flat" class="ml-2 action-icon" @click="increOutputs"><v-icon>mdi-plus</v-icon></v-btn>
                         </div>
-                    </div>
-                </div>
-                <div class="testCol">
-                    <div class="testRow firstCol">
-                        Bitwidth
-                    </div>
-                    <div class="testContainer">
-                        <div v-for="(_, i) in inputsBandWidth" class="testRow"
-                            :style="{ width: 100 / inputsBandWidth.length + '%' }">
-                            <input class="inputField dataGroupTitle smInput" type="text" v-model="inputsBandWidth[i]"
-                                maxlength="1" />
-                        </div>
-                    </div>
-                    <div class="testContainer">
-                        <div v-for="(_, i) in outputsBandWidth" class="testRow"
-                            :style="{ width: 100 / outputsBandWidth.length + '%' }">
-                            <input class="inputField dataGroupTitle smInput" type="text" v-model="outputsBandWidth[i]"
-                                maxlength="1" />
+                        <div v-if="testBenchStore.showResults" class="grid-cell header-cell results-col">
+                            Results
                         </div>
                     </div>
-                </div>
 
-                <div v-for="(group, groupIndex) in groups" class="groupParent" :key="groupIndex">
-                    <input v-model="group.title" class="inputField dataGroupTitle" type="text" />
-                    <p>Click + to add tests to the {{ testType === 'comb' ? 'group' : 'set' }}</p>
-
-                    <div v-for="(_, index) in group.inputs[0]" class="groupRow" :key="index">
-                        <div class="testRow firstCol spaceArea"></div>
-                        <span @mousedown="deleteTestFromGroup(groupIndex, index)" class="plusMinusBtn">-</span>
-                        <div class="testContainer">
-                            <div v-for="(_, i) in group.inputs" class="testRow colWise"
-                                :style="{ width: 100 / inputsBandWidth.length + '%' }">
-                                <input class="inputField dataGroupTitle smInput" type="text"
-                                    :disabled="testBenchStore.readOnly" v-model="group.inputs[i][index]"
-                                    maxlength="1" />
+                    <!-- Labels Row -->
+                    <div class="data-grid labels-grid">
+                        <div class="grid-cell label-col">Label</div>
+                        <div class="grid-cell inputs-col">
+                            <div v-for="(name, i) in inputsName" :key="`in-name-${i}`" class="io-cell">
+                                <input class="io-input" type="text" v-model="inputsName[i]" />
+                                <v-btn icon size="x-small" variant="text" class="delete-io-btn" @click="deleteInput(i)"><v-icon size="small">mdi-minus-circle-outline</v-icon></v-btn>
+                            </div>
+                        </div>
+                        <div class="grid-cell outputs-col">
+                            <div v-for="(name, i) in outputsName" :key="`out-name-${i}`" class="io-cell">
+                                <input class="io-input" type="text" v-model="outputsName[i]" />
+                                <v-btn icon size="x-small" variant="text" class="delete-io-btn" @click="deleteOutput(i)"><v-icon size="small">mdi-minus-circle-outline</v-icon></v-btn>
                             </div>
                         </div>
-                        <div class="testContainer">
-                            <div v-for="(_, i) in group.outputs" class="testRow colWise"
-                                :style="{ width: 100 / outputsBandWidth.length + '%' }">
-                                <input class="inputField dataGroupTitle smInput" type="text"
-                                    :disabled="testBenchStore.readOnly" v-model="group.outputs[i][index]"
-                                    maxlength="1" />
+                    </div>
+
+                     <!-- Bitwidth Row -->
+                    <div class="data-grid bitwidth-grid">
+                        <div class="grid-cell label-col">Bitwidth</div>
+                        <div class="grid-cell inputs-col">
+                            <div v-for="(_, i) in inputsBandWidth" :key="`in-bw-${i}`" class="io-cell">
+                                <input class="io-input bitwidth-input" type="text" v-model="inputsBandWidth[i]" maxlength="1" />
                             </div>
                         </div>
-                        <div v-if="testBenchStore.showResults" class="resultContainer">
-                            <div v-for="(_, i) in results" class="testRow colWise"
-                                :style="{ width: 100 / outputsBandWidth.length + '%', color: results[groupIndex][i][index] ? '#17FC12' : '#FF1616' }">
-                                 {{ results[groupIndex][i][index] ? '✔' : '✘' }}
+                        <div class="grid-cell outputs-col">
+                            <div v-for="(_, i) in outputsBandWidth" :key="`out-bw-${i}`" class="io-cell">
+                                <input class="io-input bitwidth-input" type="text" v-model="outputsBandWidth[i]" maxlength="1" />
                             </div>
                         </div>
                     </div>
 
-                    <v-btn v-if="groupIndex !== groups.length - 1" class="messageBtn addBtn" block
-                        @mousedown="addTestToGroup(groupIndex)">
-                        +
-                    </v-btn>
+                    <!-- Data Groups -->
+                    <div v-for="(group, groupIndex) in groups" class="group-container" :key="groupIndex">
+                        <div class="group-header">
+                            <input v-model="group.title" class="group-title-input" type="text" />
+                             <v-btn size="small" class="add-test-btn" variant="tonal" @click="addTestToGroup(groupIndex)">
+                                <v-icon left>mdi-plus</v-icon>
+                                Add Test
+                            </v-btn>
+                        </div>
+
+                        <div v-for="(_, testIndex) in group.inputs[0]" class="data-grid data-row" :key="testIndex">
+                             <div class="grid-cell label-col action-col">
+                                 <v-btn icon size="x-small" variant="text" class="delete-io-btn" @click="deleteTestFromGroup(groupIndex, testIndex)"><v-icon size="small">mdi-close</v-icon></v-btn>
+                             </div>
+                             <div class="grid-cell inputs-col">
+                                 <div v-for="(_, i) in group.inputs" class="io-cell" :key="`g${groupIndex}-in-${i}-${testIndex}`">
+                                     <input class="io-input data-input" type="text" v-model="group.inputs[i][testIndex]" :disabled="testBenchStore.readOnly" :maxlength="inputsBandWidth[i]" />
+                                 </div>
+                             </div>
+                             <div class="grid-cell outputs-col">
+                                 <div v-for="(_, i) in group.outputs" class="io-cell" :key="`g${groupIndex}-out-${i}-${testIndex}`">
+                                     <input class="io-input data-input" type="text" v-model="group.outputs[i][testIndex]" :disabled="testBenchStore.readOnly" :maxlength="outputsBandWidth[i]" />
+                                 </div>
+                             </div>
+                             <div v-if="testBenchStore.showResults" class="grid-cell results-col">
+                                 <div v-for="(_, i) in results[groupIndex]" class="io-cell result-cell" :key="`g${groupIndex}-res-${i}-${testIndex}`" :class="results[groupIndex][i][testIndex] ? 'success' : 'fail'">
+                                     {{ results[groupIndex][i][testIndex] ? '✔' : '✘' }}
+                                 </div>
+                             </div>
+                        </div>
+                    </div>
                 </div>
             </v-card-text>
 
-            <v-card-actions class="testActionBtns">
-                <div class="btnDiv">
-                    <v-btn class="messageBtn" block @mousedown="addTestToGroup(groups.length - 1)">
-                        +
-                    </v-btn>
-                    <v-btn class="messageBtn" block @mousedown="addNewGroup">
+            <!-- Action Buttons Footer -->
+            <v-card-actions class="footer-actions">
+                <div class="left-actions">
+                    <v-btn class="action-btn new-group-btn" @click="addNewGroup">
+                        <v-icon left>mdi-plus</v-icon>
                         New Group
                     </v-btn>
+                    <v-btn class="action-btn reset-btn" @click="resetData">Reset</v-btn>
                 </div>
-                <div class="btnDiv">
-                    <v-btn class="messageBtn" block @mousedown="importFromCSV">
-                        Import From CSV
-                    </v-btn>
-                    <v-btn class="messageBtn" block @mousedown="exportAsCSV">
-                        Export As CSV
-                    </v-btn>
-                    <v-btn class="messageBtn" block @mousedown="sendData">
-                        Attach
-                    </v-btn>
+                <div class="right-actions">
+                    <v-btn class="action-btn secondary-btn" @click="importFromCSV">Import CSV</v-btn>
+                    <v-btn class="action-btn secondary-btn" @click="exportAsCSV">Export CSV</v-btn>
+                    <v-btn class="action-btn attach-btn" @click="sendData">Attach</v-btn>
                 </div>
             </v-card-actions>
         </v-card>
@@ -138,7 +143,18 @@
 
 <script lang="ts" setup>
 import { computed, ref, reactive, watch } from 'vue';
-import { useTestBenchStore } from '#/store/testBenchStore';
+// Assuming the store is set up correctly in your project
+// import { useTestBenchStore } from '#/store/testBenchStore';
+
+// Mock store for standalone component viability
+const useTestBenchStore = () => ({
+    showTestBenchCreator: ref(true),
+    testbenchData: reactive({ testData: { groups: [] } }),
+    readOnly: ref(false),
+    showResults: ref(false),
+    sendData: (data: any) => console.log('Data to attach:', data),
+});
+
 
 const testBenchStore = useTestBenchStore();
 
@@ -151,8 +167,8 @@ const testType = ref<string>('comb');
 
 const inputsBandWidth = ref([1]);
 const outputsBandWidth = ref([1]);
-const inputsName = ref<string[]>(["inp1"]);
-const outputsName = ref<string[]>(["out1"]);
+const inputsName = ref<string[]>(["A"]);
+const outputsName = ref<string[]>(["X"]);
 
 interface Group {
     title: string;
@@ -160,18 +176,39 @@ interface Group {
     outputs: string[][];
 }
 
-const groups = reactive<Group[]>([
+const initialGroupState = (): Group[] => [
     {
         title: 'Group 1',
         inputs: [],
         outputs: [],
     }
-]);
+];
+
+const groups = reactive<Group[]>(initialGroupState());
+
+const resetData = () => {
+    testTitle.value = 'Untitled';
+    testType.value = 'comb';
+    inputsBandWidth.value = [1];
+    outputsBandWidth.value = [1];
+    inputsName.value = ["A"];
+    outputsName.value = ["X"];
+    groups.splice(0, groups.length, ...initialGroupState());
+};
+
 
-watch(() => testBenchStore.testbenchData.testData.groups, () => {
-    const { groups: newGroups } = testBenchStore.testbenchData.testData;
+watch(() => testBenchStore.testbenchData.testData.groups, (newGroupsData) => {
+    if (!newGroupsData || newGroupsData.length === 0) {
+         // If store is empty, reset to a default empty state instead of a single group
+        groups.splice(0, groups.length);
+        inputsBandWidth.value = [1];
+        outputsBandWidth.value = [1];
+        inputsName.value = ["A"];
+        outputsName.value = ["X"];
+        return;
+    }
 
-    const values = newGroups.map(group => ({
+    const values = newGroupsData.map(group => ({
         title: group.label,
         inputs: group.inputs.map(input => input.values),
         outputs: group.outputs.map(output => output.values),
@@ -179,76 +216,60 @@ watch(() => testBenchStore.testbenchData.testData.groups, () => {
 
     groups.splice(0, groups.length, ...values);
 
-    if (newGroups[0]) {
-        const { inputs, outputs } = newGroups[0];
-
-        inputsBandWidth.value.splice(0, inputsBandWidth.value.length, ...inputs.map(input => input.bitWidth));
-        outputsBandWidth.value.splice(0, outputsBandWidth.value.length, ...outputs.map(output => output.bitWidth));
-        inputsName.value.splice(0, inputsName.value.length, ...inputs.map(input => input.label));
-        outputsName.value.splice(0, outputsName.value.length, ...outputs.map(output => output.label));
-    } else {
-        inputsBandWidth.value.splice(0, inputsBandWidth.value.length, 1);
-        outputsBandWidth.value.splice(0, outputsBandWidth.value.length, 1);
-        inputsName.value.splice(0, inputsName.value.length, "inp1");
-        outputsName.value.splice(0, outputsName.value.length, "out1");
+    if (newGroupsData[0]) {
+        const { inputs, outputs } = newGroupsData[0];
+        inputsBandWidth.value = inputs.map(input => input.bitWidth);
+        outputsBandWidth.value = outputs.map(output => output.bitWidth);
+        inputsName.value = inputs.map(input => input.label);
+        outputsName.value = outputs.map(output => output.label);
     }
-});
+}, { deep: true });
 
-watch(() => testBenchStore.testbenchData.testData.groups, () => {
+watch(() => testBenchStore.testbenchData.testData.groups, (newGroupsData) => {
     results.splice(0, results.length);
-    testBenchStore.testbenchData.testData.groups.map(group => {
-        results.push([]);
-        group.outputs.map((output) => {
-            results[results.length - 1].push([]);
-            for(let i = 0; i < output.values.length; i++) {
-                if(output.results && output.values[i] === output.results[i]) {
-                    results[results.length - 1][results[results.length - 1].length - 1].push(true);
-                } else {
-                    results[results.length - 1][results[results.length - 1].length - 1].push(false);
+    if (!newGroupsData) return;
+
+    newGroupsData.forEach(group => {
+        const groupResults: boolean[][] = [];
+        group.outputs.forEach((output) => {
+            const outputResults: boolean[] = [];
+            if (output.results) {
+                for (let i = 0; i < output.values.length; i++) {
+                    outputResults.push(output.values[i] === output.results[i]);
                 }
             }
+            groupResults.push(outputResults);
         });
+        results.push(groupResults);
     });
-},
-    { deep: true }
-);
+}, { deep: true });
+
 
 watch(testType, () => {
-    if (testType.value === 'comb') {
-        groups.forEach(group => {
-            group.title = `Group ${groups.indexOf(group) + 1}`;
-        });
-    }
-    else {
-        groups.forEach(group => {
-            group.title = `Set ${groups.indexOf(group) + 1}`;
-        });
-    }
+    groups.forEach((group, index) => {
+        group.title = testType.value === 'comb' ? `Group ${index + 1}` : `Set ${index + 1}`;
+    });
 });
 
 const sendData = () => {
     const groupsData = groups.map(group => {
-        const inputsData = group.inputs.map((input, index) => {
-            return {
-                label: inputsName.value[index],
-                bitWidth: inputsBandWidth.value[index],
-                values: input
-            };
-        });
-
-        const outputsData = group.outputs.map((output, index) => {
-            return {
-                label: outputsName.value[index],
-                bitWidth: outputsBandWidth.value[index],
-                values: output
-            };
-        });
+        const inputsData = inputsName.value.map((label, index) => ({
+            label,
+            bitWidth: inputsBandWidth.value[index],
+            values: group.inputs[index] || [],
+        }));
+
+        const outputsData = outputsName.value.map((label, index) => ({
+            label,
+            bitWidth: outputsBandWidth.value[index],
+            values: group.outputs[index] || [],
+        }));
 
         return {
             label: group.title,
             inputs: inputsData,
             outputs: outputsData,
-            n: inputsData[0] ? inputsData[0].values.length : 0,
+            n: (inputsData[0]?.values.length) || 0,
         };
     });
 
@@ -263,16 +284,14 @@ const sendData = () => {
 
 const addTestToGroup = (index: number) => {
     const group = groups[index];
-    for (let i = 0; i < inputsBandWidth.value.length; i++) {
-        if (group.inputs.length === i)
-            group.inputs.push([]);
-        group.inputs[i].push("0");
+    for (let i = 0; i < inputsName.value.length; i++) {
+        if (!group.inputs[i]) group.inputs[i] = [];
+        group.inputs[i].push("0".repeat(inputsBandWidth.value[i] || 1));
     }
 
-    for (let i = 0; i < outputsBandWidth.value.length; i++) {
-        if (group.outputs.length === i)
-            group.outputs.push([]);
-        group.outputs[i].push("0");
+    for (let i = 0; i < outputsName.value.length; i++) {
+        if (!group.outputs[i]) group.outputs[i] = [];
+        group.outputs[i].push("0".repeat(outputsBandWidth.value[i] || 1));
     }
 };
 
@@ -287,82 +306,80 @@ const deleteTestFromGroup = (groupIndex: number, testIndex: number) => {
 };
 
 const addNewGroup = () => {
-    groups.push({
-        title: `Group ${groups.length + 1}`,
-        inputs: [],
-        outputs: [],
-    });
-};
+    const nextIndex = groups.length + 1;
+    const newGroup: Group = {
+        title: testType.value === 'comb' ? `Group ${nextIndex}` : `Set ${nextIndex}`,
+        inputs: Array.from({ length: inputsName.value.length }, () => []),
+        outputs: Array.from({ length: outputsName.value.length }, () => []),
+    };
 
-const increInputs = () => {
-    groups.forEach((group) => {
-        if (group.inputs.length === 0) return;
+    // If there are existing tests in other groups, add one empty test to the new group for consistency
+    const hasTests = groups.some(g => g.inputs[0]?.length > 0);
+    if(groups.length > 0 && hasTests) {
+        for (let i = 0; i < inputsName.value.length; i++) {
+            newGroup.inputs[i].push("0".repeat(inputsBandWidth.value[i] || 1));
+        }
+        for (let i = 0; i < outputsName.value.length; i++) {
+            newGroup.outputs[i].push("0".repeat(outputsBandWidth.value[i] || 1));
+        }
+    }
 
-        group.inputs.push([]);
+    groups.push(newGroup);
+};
 
-        for (let i = 0; i < group.inputs[0].length; i++) {
-            group.inputs[group.inputs.length - 1].push("0");
-        }
-    });
 
+const increInputs = () => {
     inputsBandWidth.value.push(1);
     inputsName.value.push(`inp${inputsName.value.length + 1}`);
-};
-
-const deleteInput = (index:number) => {
-    if(inputsName.value.length === 1) return;
     groups.forEach((group) => {
-        if (group.inputs.length === 0) return;
-
-        group.inputs.splice(index, 1);
+        const newCol = group.inputs.length > 0 ? Array(group.inputs[0].length).fill("0") : [];
+        group.inputs.push(newCol);
     });
+};
 
+const deleteInput = (index: number) => {
+    if (inputsName.value.length <= 1) return;
     inputsBandWidth.value.splice(index, 1);
     inputsName.value.splice(index, 1);
-};
-
-const increOutputs = () => {
     groups.forEach((group) => {
-        if (group.outputs.length === 0) return;
-
-        group.outputs.push([]);
-
-        for (let i = 0; i < group.outputs[0].length; i++) {
-            group.outputs[group.outputs.length - 1].push("0");
-        }
+        group.inputs.splice(index, 1);
     });
+};
 
+const increOutputs = () => {
     outputsBandWidth.value.push(1);
     outputsName.value.push(`out${outputsName.value.length + 1}`);
-};
-
-const deleteOutput = (index:number) => {
-    if(outputsName.value.length === 1) return;
     groups.forEach((group) => {
-        if (group.outputs.length === 0) return;
-
-        group.outputs.splice(index, 1);
+         const newCol = group.outputs.length > 0 ? Array(group.outputs[0].length).fill("0") : [];
+        group.outputs.push(newCol);
     });
+};
 
+const deleteOutput = (index: number) => {
+    if (outputsName.value.length <= 1) return;
     outputsBandWidth.value.splice(index, 1);
     outputsName.value.splice(index, 1);
+    groups.forEach((group) => {
+        group.outputs.splice(index, 1);
+    });
 };
 
+
 const exportAsCSV = () => {
     let csv = `${testType.value},${testTitle.value}\n`;
 
-    csv += `Inputs BandWidth: ${inputsBandWidth.value.join(',')}\n`;
-    csv += `Outputs BandWidth: ${outputsBandWidth.value.join(',')}\n`;
-    csv += `Inputs Name: ${inputsName.value.join(',')}\n`;
-    csv += `Outputs Name: ${outputsName.value.join(',')}\n`;
+    csv += `Inputs BandWidth:${inputsBandWidth.value.join(',')}\n`;
+    csv += `Outputs BandWidth:${outputsBandWidth.value.join(',')}\n`;
+    csv += `Inputs Name:${inputsName.value.join(',')}\n`;
+    csv += `Outputs Name:${outputsName.value.join(',')}\n`;
 
     csv += groups.map(group => {
-        let groupStr = `G-${group.title}:\n`;
+        let groupStr = `G-${group.title}\n`;
         groupStr += group.inputs.map((input, index) => `I-${inputsName.value[index]}:${input.join(',')}`).join('\n');
         groupStr += '\n';
         groupStr += group.outputs.map((output, index) => `O-${outputsName.value[index]}:${output.join(',')}`).join('\n');
         return groupStr;
-    }).join('\n');
+    }).join('\n\n');
 
     const blob = new Blob([csv], { type: 'text/csv' });
     const url = URL.createObjectURL(blob);
@@ -385,56 +402,46 @@ const importFromCSV = () => {
         const reader = new FileReader();
         reader.onload = () => {
             const csv = reader.result as string;
-            const lines = csv.split('\n');
+            const lines = csv.split('\n').filter(line => line.trim() !== '');
 
             const firstLine = lines.shift();
             if (firstLine) {
                 [testType.value, testTitle.value] = firstLine.split(',');
             }
 
-            let line = lines.shift();
-            if (line) {
-                inputsBandWidth.value = line.split(': ')[1].split(',').map(Number);
-            }
-            line = lines.shift();
-            if (line) {
-                outputsBandWidth.value = line.split(': ')[1].split(',').map(Number);
-            }
-            line = lines.shift();
-            if (line) {
-                inputsName.value = line.split(': ')[1].split(',');
-            }
-            line = lines.shift();
-            if (line) {
-                outputsName.value = line.split(': ')[1].split(',');
+            const config: { [key: string]: string } = {};
+            while(lines.length > 0 && lines[0].includes(':') && !lines[0].startsWith('G-')) {
+                const line = lines.shift();
+                if(!line) continue;
+                const [key, value] = line.split(/:(.*)/s);
+                config[key] = value;
             }
 
+            inputsBandWidth.value = config['Inputs BandWidth']?.split(',').map(Number) || [];
+            outputsBandWidth.value = config['Outputs BandWidth']?.split(',').map(Number) || [];
+            inputsName.value = config['Inputs Name']?.split(',') || [];
+            outputsName.value = config['Outputs Name']?.split(',') || [];
+
+
             const newGroups: Group[] = [];
-            let group: Group = {
-                title: '',
-                inputs: [],
-                outputs: [],
-            }
-            lines.forEach(line => {
-                if (line.startsWith('G-')) {
-                    if (group.title) {
-                        newGroups.push(group);
-                    }
-                    group = { title: line.slice(2), inputs: [], outputs: [] };
-                } else {
-                    const [name, values] = line.split(':');
-                    const isInput = name.startsWith('I-') && inputsName.value.includes(name.slice(2));
-                    const isOutput = name.startsWith('O-') && outputsName.value.includes(name.slice(2));
-                    if (isInput) {
-                        group.inputs.push(values.split(','));
-                    } else if (isOutput) {
-                        group.outputs.push(values.split(','));
+            let currentGroup: Group | null = null;
+
+            for (const line of lines) {
+                 if (line.startsWith('G-')) {
+                    if (currentGroup) newGroups.push(currentGroup);
+                    currentGroup = { title: line.substring(2), inputs: [], outputs: [] };
+                } else if (currentGroup) {
+                    const [typeAndLabel, values] = line.split(':');
+                    const valuesArr = values ? values.split(',') : [];
+
+                    if (typeAndLabel.startsWith('I-')) {
+                        currentGroup.inputs.push(valuesArr);
+                    } else if (typeAndLabel.startsWith('O-')) {
+                        currentGroup.outputs.push(valuesArr);
                     }
                 }
-            });
-            if (group.title) {
-                newGroups.push(group);
             }
+            if (currentGroup) newGroups.push(currentGroup);
 
             groups.splice(0, groups.length, ...newGroups);
         };
@@ -444,149 +451,289 @@ const importFromCSV = () => {
 
     input.click();
 };
+
 </script>
 
 <style scoped>
-#creatorBox {
-    width: 1100px;
+/* Main Dialog Styling */
+.testbench-creator-card {
+    /* Color Palette */
+    --cv-green: #4caf50;
+    --cv-green-dark: #388e3c;
+    --cv-red: #f44336;
+    --cv-red-dark: #d32f2f;
+    --cv-background: #f7f9fb;
+    --cv-surface: #ffffff;
+    --cv-border: #e0e0e0;
+    --cv-text-primary: #212121;
+    --cv-text-secondary: #757575;
+
+    background-color: var(--cv-background);
+    border-radius: 12px;
 }
 
-.creatorHeader {
-    position: relative;
-}
-
-.testInput {
+.headline-container {
     display: flex;
+    justify-content: center;
     align-items: center;
-    gap: 1rem;
+    position: relative;
+    padding: 16px 24px;
+    border-bottom: 1px solid var(--cv-border);
 }
 
-.testType {
-    width: 97%;
+.headline-title {
+    color: var(--cv-text-primary);
+    font-size: 1.5rem;
+    font-weight: 500;
 }
 
-.testActionBtns {
-    width: 97%;
-    display: flex;
-    justify-content: space-between;
-    padding-bottom: 1rem;
+.close-button {
+    position: absolute;
+    right: 16px;
+    top: 50%;
+    transform: translateY(-50%);
 }
 
-.btnDiv {
-    display: flex;
-    gap: 0.1rem;
-    align-items: center;
+/* Title Input */
+.title-input {
+    border: 1px solid var(--cv-border);
+    border-radius: 8px;
+    padding: 12px 16px;
+    font-size: 1rem;
+    width: 50%;
+    max-width: 400px;
+    text-align: center;
+    transition: border-color 0.3s, box-shadow 0.3s;
 }
 
-.testRow {
-    border: 1px solid #c5c5c5;
-    padding: 0.75rem;
-    padding-left: 1.5rem;
-    padding-right: 1.5rem;
-    display: flex;
-    justify-content: center;
-    align-items: center;
+.title-input:focus {
+    outline: none;
+    border-color: var(--cv-green);
+    box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
 }
 
-.colWise {
+/* Test Type Selection */
+.test-type-container {
     display: flex;
-    flex-direction: column;
     justify-content: center;
-    align-items: center;
+    background-color: #eef1f5;
+    border-radius: 8px;
+    padding: 4px;
+    margin: 0 auto 24px auto;
+    width: fit-content;
 }
 
-.testCol {
-    display: flex;
-    gap: 0.5rem;
-    justify-content: center;
-    margin-bottom: 0.5rem;
+.test-type-btn {
+    border-radius: 6px !important;
+    text-transform: none;
+    font-weight: 500;
+    color: var(--cv-text-secondary);
+    background-color: transparent;
+    border: none;
 }
 
-.firstCol {
-    width: 30%;
+.test-type-btn.active {
+    background-color: var(--cv-green);
+    color: white;
 }
 
-.dataGroupTitle {
-    border: none;
-    padding: 0;
-    margin: 0;
+/* Empty State */
+.empty-state {
+    border: 2px dashed var(--cv-border);
+    border-radius: 8px;
+    padding: 48px 24px;
+    text-align: center;
+    color: var(--cv-text-secondary);
+    margin: 24px;
 }
 
-.spaceArea {
-    visibility: hidden;
+/* Data Table Styling */
+.data-table-container {
+    padding: 0 16px;
+}
+.data-grid {
+    display: grid;
+    grid-template-columns: 120px 1fr 1fr 120px;
+    gap: 16px;
+    align-items: center;
+    padding: 8px 0;
+}
+.data-grid.data-row {
+    grid-template-columns: 40px 1fr 1fr 120px;
+}
+.data-grid:not(.data-row) { /* Header, Labels, Bitwidth don't have results column unless shown */
+    grid-template-columns: 120px 1fr 1fr;
+}
+.data-grid .results-col ~ .results-col,
+.data-grid .results-col { /* Adjust columns when results are visible */
+     grid-template-columns: 120px 1fr 1fr 120px;
+}
+.data-row {
+     border-top: 1px solid var(--cv-border);
 }
 
-.testContainer {
+.grid-cell {
     display: flex;
-    width: 35%;
-    gap: 0.5rem;
-    overflow-x: scroll;
+    align-items: center;
+    gap: 8px;
 }
 
-.resultContainer {
-    display: flex;
-    width: 15%;
-    gap: 0.5rem;
-    overflow-x: scroll;
+.header-cell {
+    font-weight: 600;
+    color: var(--cv-text-primary);
+    font-size: 1rem;
+}
+.action-icon {
+    background-color: #e0e0e0;
+    color: #616161;
 }
 
-.fullTestRow {
-    width: 35%;
+.label-col {
+    font-weight: 500;
+    color: var(--cv-text-secondary);
+    padding-left: 12px;
+}
+.action-col {
+    justify-content: center;
+}
+
+.inputs-col, .outputs-col, .results-col {
+    background-color: var(--cv-surface);
+    border: 1px solid var(--cv-border);
+    border-radius: 8px;
+    padding: 4px;
 }
 
-.groupRow {
+.io-cell {
+    flex: 1;
     display: flex;
-    gap: 0.5rem;
+    align-items: center;
     justify-content: center;
+    position: relative;
+    padding: 4px;
 }
 
-.plusMinusBtn {
-    align-self: center;
+.io-input {
+    width: 100%;
     text-align: center;
-    width: 16px;
-    cursor: pointer;
-    padding: 2px;
-    padding-top: 0.5px;
-    padding-bottom: 0.5px;
-    border: 1px solid #c5c5c5;
+    border: none;
+    background-color: transparent;
+    font-size: 0.9rem;
+}
+.io-input:focus {
+    outline: none;
+}
+.bitwidth-input {
+    max-width: 40px;
+    background-color: #f5f5f5;
+    border-radius: 4px;
+}
+.data-input {
+    border: 1px solid transparent;
+    border-radius: 4px;
+}
+.data-input:focus {
+    border-color: var(--cv-green);
 }
 
-.space {
-    gap: 0.25rem;
+.delete-io-btn {
+    opacity: 0;
+    transition: opacity 0.2s;
+    color: var(--cv-text-secondary);
+}
+.io-cell:hover .delete-io-btn, .action-col:hover .delete-io-btn {
+    opacity: 1;
 }
 
-.groupParent {
-    margin-bottom: 2rem;
-    margin-top: 2rem;
+/* Group Styling */
+.group-container {
+    margin-top: 24px;
+}
+.group-header {
+    display: flex;
+    align-items: center;
+    margin-bottom: 8px;
+    gap: 16px;
+}
+.group-title-input {
+    font-size: 1.1rem;
+    font-weight: 500;
+    border: none;
+    border-bottom: 1px solid transparent;
+    padding: 4px 0;
+}
+.group-title-input:focus {
+    outline: none;
+    border-bottom-color: var(--cv-green);
+}
+.add-test-btn {
+    color: var(--cv-green);
+}
+.result-cell {
+    font-weight: bold;
+}
+.result-cell.success {
+    color: var(--cv-green);
+}
+.result-cell.fail {
+    color: var(--cv-red);
 }
 
-.addBtn {
-    background-color: transparent;
-    color: white;
+
+/* Footer Actions */
+.footer-actions {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 16px 24px;
+    border-top: 1px solid var(--cv-border);
+    background-color: var(--cv-surface);
 }
 
-.testCard {
-    padding-left: 2.2rem;
+.left-actions, .right-actions {
+    display: flex;
+    gap: 12px;
 }
 
-.smInput {
-    width: 12px;
-    border: none;
+.action-btn {
+    text-transform: none;
+    border-radius: 8px;
+    font-weight: 600;
 }
 
-.smInputName {
-    width: 34px;
-    border: none;
+.new-group-btn {
+    background-color: var(--cv-green);
+    color: white;
+}
+.new-group-btn:hover {
+    background-color: var(--cv-green-dark);
 }
 
-.smInputName:focus,
-.smInput:focus {
-    outline: none;
-    border: none;
+.reset-btn {
+    background-color: transparent;
+    color: var(--cv-red);
+    border: 1px solid var(--cv-red);
+}
+.reset-btn:hover {
+    background-color: rgba(244, 67, 54, 0.1);
 }
 
-.smInput:focus {
-    outline: none;
-    border: none;
+.secondary-btn {
+    background-color: transparent;
+    color: var(--cv-text-secondary);
+    border: 1px solid var(--cv-border);
+}
+.secondary-btn:hover {
+    background-color: #f5f5f5;
+    border-color: #bdbdbd;
+}
+
+.attach-btn {
+    background-color: #626262;
+    color: white;
+}
+.attach-btn:hover {
+    background-color: #424242;
 }
 </style>
+

From d60e99ee092690891cc3718a39f2b05f58addf21 Mon Sep 17 00:00:00 2001
From: ThatDeparted2061 <harshraocodesup@gmail.com>
Date: Thu, 4 Sep 2025 02:49:23 +0530
Subject: [PATCH 02/17] fix: fix the spacing for UI

---
 .../TestBenchPanel/TestBenchCreator.vue       | 52 +++++++------------
 1 file changed, 20 insertions(+), 32 deletions(-)

diff --git a/v0/src/components/Panels/TestBenchPanel/TestBenchCreator.vue b/v0/src/components/Panels/TestBenchPanel/TestBenchCreator.vue
index 1bc472a22..fdeeda94d 100644
--- a/v0/src/components/Panels/TestBenchPanel/TestBenchCreator.vue
+++ b/v0/src/components/Panels/TestBenchPanel/TestBenchCreator.vue
@@ -41,7 +41,7 @@
                 <!-- Test Data Table -->
                 <div v-else class="data-table-container">
                     <!-- Table Header -->
-                    <div class="data-grid header-grid">
+                    <div class="data-grid header-grid" :class="{ 'with-results': testBenchStore.showResults }">
                         <div class="grid-cell header-cell label-col"></div>
                         <div class="grid-cell header-cell inputs-col">
                             <span>Inputs</span>
@@ -57,7 +57,7 @@
                     </div>
 
                     <!-- Labels Row -->
-                    <div class="data-grid labels-grid">
+                    <div class="data-grid labels-grid" :class="{ 'with-results': testBenchStore.showResults }">
                         <div class="grid-cell label-col">Label</div>
                         <div class="grid-cell inputs-col">
                             <div v-for="(name, i) in inputsName" :key="`in-name-${i}`" class="io-cell">
@@ -74,7 +74,7 @@
                     </div>
 
                      <!-- Bitwidth Row -->
-                    <div class="data-grid bitwidth-grid">
+                    <div class="data-grid bitwidth-grid" :class="{ 'with-results': testBenchStore.showResults }">
                         <div class="grid-cell label-col">Bitwidth</div>
                         <div class="grid-cell inputs-col">
                             <div v-for="(_, i) in inputsBandWidth" :key="`in-bw-${i}`" class="io-cell">
@@ -98,7 +98,7 @@
                             </v-btn>
                         </div>
 
-                        <div v-for="(_, testIndex) in group.inputs[0]" class="data-grid data-row" :key="testIndex">
+                        <div v-for="(_, testIndex) in group.inputs[0]" class="data-grid data-row" :key="testIndex" :class="{ 'with-results': testBenchStore.showResults }">
                              <div class="grid-cell label-col action-col">
                                  <v-btn icon size="x-small" variant="text" class="delete-io-btn" @click="deleteTestFromGroup(groupIndex, testIndex)"><v-icon size="small">mdi-close</v-icon></v-btn>
                              </div>
@@ -124,18 +124,14 @@
 
             <!-- Action Buttons Footer -->
             <v-card-actions class="footer-actions">
-                <div class="left-actions">
-                    <v-btn class="action-btn new-group-btn" @click="addNewGroup">
-                        <v-icon left>mdi-plus</v-icon>
-                        New Group
-                    </v-btn>
-                    <v-btn class="action-btn reset-btn" @click="resetData">Reset</v-btn>
-                </div>
-                <div class="right-actions">
-                    <v-btn class="action-btn secondary-btn" @click="importFromCSV">Import CSV</v-btn>
-                    <v-btn class="action-btn secondary-btn" @click="exportAsCSV">Export CSV</v-btn>
-                    <v-btn class="action-btn attach-btn" @click="sendData">Attach</v-btn>
-                </div>
+                <v-btn class="action-btn new-group-btn" @click="addNewGroup">
+                    <v-icon left>mdi-plus</v-icon>
+                    New Group
+                </v-btn>
+                <v-btn class="action-btn reset-btn" @click="resetData">Reset</v-btn>
+                <v-btn class="action-btn secondary-btn" @click="importFromCSV">Import CSV</v-btn>
+                <v-btn class="action-btn secondary-btn" @click="exportAsCSV">Export CSV</v-btn>
+                <v-btn class="action-btn attach-btn" @click="sendData">Attach</v-btn>
             </v-card-actions>
         </v-card>
     </v-dialog>
@@ -553,21 +549,16 @@ const importFromCSV = () => {
 }
 .data-grid {
     display: grid;
-    grid-template-columns: 120px 1fr 1fr 120px;
     gap: 16px;
     align-items: center;
     padding: 8px 0;
 }
-.data-grid.data-row {
-    grid-template-columns: 40px 1fr 1fr 120px;
-}
-.data-grid:not(.data-row) { /* Header, Labels, Bitwidth don't have results column unless shown */
-    grid-template-columns: 120px 1fr 1fr;
-}
-.data-grid .results-col ~ .results-col,
-.data-grid .results-col { /* Adjust columns when results are visible */
-     grid-template-columns: 120px 1fr 1fr 120px;
-}
+/* Grid column definitions */
+.data-grid:not(.data-row) { grid-template-columns: 120px 1fr 1fr; }
+.data-grid.data-row { grid-template-columns: 40px 1fr 1fr; }
+.data-grid.with-results:not(.data-row) { grid-template-columns: 120px 1fr 1fr 120px; }
+.data-grid.data-row.with-results { grid-template-columns: 40px 1fr 1fr 120px; }
+
 .data-row {
      border-top: 1px solid var(--cv-border);
 }
@@ -582,6 +573,7 @@ const importFromCSV = () => {
     font-weight: 600;
     color: var(--cv-text-primary);
     font-size: 1rem;
+    justify-content: center;
 }
 .action-icon {
     background-color: #e0e0e0;
@@ -683,15 +675,11 @@ const importFromCSV = () => {
 /* Footer Actions */
 .footer-actions {
     display: flex;
-    justify-content: space-between;
+    justify-content: center;
     align-items: center;
     padding: 16px 24px;
     border-top: 1px solid var(--cv-border);
     background-color: var(--cv-surface);
-}
-
-.left-actions, .right-actions {
-    display: flex;
     gap: 12px;
 }
 

From f8556e020660d9eea95ce67ba0ae1abd12e99dfd Mon Sep 17 00:00:00 2001
From: ThatDeparted2061 <harshraocodesup@gmail.com>
Date: Thu, 4 Sep 2025 15:04:01 +0530
Subject: [PATCH 03/17] fix: fix the Testbench sstore usage

---
 .../Panels/TestBenchPanel/TestBenchCreator.vue    | 15 ++-------------
 1 file changed, 2 insertions(+), 13 deletions(-)

diff --git a/v0/src/components/Panels/TestBenchPanel/TestBenchCreator.vue b/v0/src/components/Panels/TestBenchPanel/TestBenchCreator.vue
index fdeeda94d..7ec3c6d21 100644
--- a/v0/src/components/Panels/TestBenchPanel/TestBenchCreator.vue
+++ b/v0/src/components/Panels/TestBenchPanel/TestBenchCreator.vue
@@ -4,7 +4,7 @@
             <!-- Header Section -->
             <v-card-title class="headline-container">
                 <h1 class="headline-title">{{ dialogTitle }}</h1>
-                <v-btn icon size="small" variant="text" @click="testBenchStore.showTestBenchCreator = false" class="close-button">
+                <v-btn icon size="small" variant="text" @click="testBenchStore.showTestBenchCreator.value = false" class="close-button">
                     <v-icon>mdi-close</v-icon>
                 </v-btn>
             </v-card-title>
@@ -139,18 +139,7 @@
 
 <script lang="ts" setup>
 import { computed, ref, reactive, watch } from 'vue';
-// Assuming the store is set up correctly in your project
-// import { useTestBenchStore } from '#/store/testBenchStore';
-
-// Mock store for standalone component viability
-const useTestBenchStore = () => ({
-    showTestBenchCreator: ref(true),
-    testbenchData: reactive({ testData: { groups: [] } }),
-    readOnly: ref(false),
-    showResults: ref(false),
-    sendData: (data: any) => console.log('Data to attach:', data),
-});
-
+import { useTestBenchStore } from '#/store/testBenchStore';
 
 const testBenchStore = useTestBenchStore();
 

From 586e1685343065835fce365f8870df875aac1bdf Mon Sep 17 00:00:00 2001
From: ThatDeparted2061 <harshraocodesup@gmail.com>
Date: Thu, 4 Sep 2025 15:09:16 +0530
Subject: [PATCH 04/17] fix: fix the Testbench store usage

---
 v0/src/components/Panels/TestBenchPanel/TestBenchCreator.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/v0/src/components/Panels/TestBenchPanel/TestBenchCreator.vue b/v0/src/components/Panels/TestBenchPanel/TestBenchCreator.vue
index 7ec3c6d21..693d2ed98 100644
--- a/v0/src/components/Panels/TestBenchPanel/TestBenchCreator.vue
+++ b/v0/src/components/Panels/TestBenchPanel/TestBenchCreator.vue
@@ -4,7 +4,7 @@
             <!-- Header Section -->
             <v-card-title class="headline-container">
                 <h1 class="headline-title">{{ dialogTitle }}</h1>
-                <v-btn icon size="small" variant="text" @click="testBenchStore.showTestBenchCreator.value = false" class="close-button">
+                <v-btn icon size="small" variant="text" @click="testBenchStore.showTestBenchCreator = false" class="close-button">
                     <v-icon>mdi-close</v-icon>
                 </v-btn>
             </v-card-title>

From 707fa9981f750dee5dfb8432f2449cae26b5e4da Mon Sep 17 00:00:00 2001
From: ThatDeparted2061 <harshraocodesup@gmail.com>
Date: Thu, 4 Sep 2025 16:42:12 +0530
Subject: [PATCH 05/17] chore: Complete TesbenchCreator.vue

---
 .../TestBenchPanel/TestBenchCreator.vue       | 290 ++++++++----------
 1 file changed, 132 insertions(+), 158 deletions(-)

diff --git a/v0/src/components/Panels/TestBenchPanel/TestBenchCreator.vue b/v0/src/components/Panels/TestBenchPanel/TestBenchCreator.vue
index 693d2ed98..dbac8c04c 100644
--- a/v0/src/components/Panels/TestBenchPanel/TestBenchCreator.vue
+++ b/v0/src/components/Panels/TestBenchPanel/TestBenchCreator.vue
@@ -152,8 +152,8 @@ const testType = ref<string>('comb');
 
 const inputsBandWidth = ref([1]);
 const outputsBandWidth = ref([1]);
-const inputsName = ref<string[]>(["A"]);
-const outputsName = ref<string[]>(["X"]);
+const inputsName = ref<string[]>(["inp1"]);
+const outputsName = ref<string[]>(["out1"]);
 
 interface Group {
     title: string;
@@ -161,39 +161,18 @@ interface Group {
     outputs: string[][];
 }
 
-const initialGroupState = (): Group[] => [
+const groups = reactive<Group[]>([
     {
         title: 'Group 1',
         inputs: [],
         outputs: [],
     }
-];
-
-const groups = reactive<Group[]>(initialGroupState());
-
-const resetData = () => {
-    testTitle.value = 'Untitled';
-    testType.value = 'comb';
-    inputsBandWidth.value = [1];
-    outputsBandWidth.value = [1];
-    inputsName.value = ["A"];
-    outputsName.value = ["X"];
-    groups.splice(0, groups.length, ...initialGroupState());
-};
-
+]);
 
-watch(() => testBenchStore.testbenchData.testData.groups, (newGroupsData) => {
-    if (!newGroupsData || newGroupsData.length === 0) {
-         // If store is empty, reset to a default empty state instead of a single group
-        groups.splice(0, groups.length);
-        inputsBandWidth.value = [1];
-        outputsBandWidth.value = [1];
-        inputsName.value = ["A"];
-        outputsName.value = ["X"];
-        return;
-    }
+watch(() => testBenchStore.testbenchData.testData.groups, () => {
+    const { groups: newGroups } = testBenchStore.testbenchData.testData;
 
-    const values = newGroupsData.map(group => ({
+    const values = newGroups.map(group => ({
         title: group.label,
         inputs: group.inputs.map(input => input.values),
         outputs: group.outputs.map(output => output.values),
@@ -201,60 +180,76 @@ watch(() => testBenchStore.testbenchData.testData.groups, (newGroupsData) => {
 
     groups.splice(0, groups.length, ...values);
 
-    if (newGroupsData[0]) {
-        const { inputs, outputs } = newGroupsData[0];
-        inputsBandWidth.value = inputs.map(input => input.bitWidth);
-        outputsBandWidth.value = outputs.map(output => output.bitWidth);
-        inputsName.value = inputs.map(input => input.label);
-        outputsName.value = outputs.map(output => output.label);
+    if (newGroups[0]) {
+        const { inputs, outputs } = newGroups[0];
+
+        inputsBandWidth.value.splice(0, inputsBandWidth.value.length, ...inputs.map(input => input.bitWidth));
+        outputsBandWidth.value.splice(0, outputsBandWidth.value.length, ...outputs.map(output => output.bitWidth));
+        inputsName.value.splice(0, inputsName.value.length, ...inputs.map(input => input.label));
+        outputsName.value.splice(0, outputsName.value.length, ...outputs.map(output => output.label));
+    } else {
+        inputsBandWidth.value.splice(0, inputsBandWidth.value.length, 1);
+        outputsBandWidth.value.splice(0, outputsBandWidth.value.length, 1);
+        inputsName.value.splice(0, inputsName.value.length, "inp1");
+        outputsName.value.splice(0, outputsName.value.length, "out1");
     }
-}, { deep: true });
+});
 
-watch(() => testBenchStore.testbenchData.testData.groups, (newGroupsData) => {
+watch(() => testBenchStore.testbenchData.testData.groups, () => {
     results.splice(0, results.length);
-    if (!newGroupsData) return;
-
-    newGroupsData.forEach(group => {
-        const groupResults: boolean[][] = [];
-        group.outputs.forEach((output) => {
-            const outputResults: boolean[] = [];
-            if (output.results) {
-                for (let i = 0; i < output.values.length; i++) {
-                    outputResults.push(output.values[i] === output.results[i]);
+    testBenchStore.testbenchData.testData.groups.map(group => {
+        results.push([]);
+        group.outputs.map((output) => {
+            results[results.length - 1].push([]);
+            for(let i = 0; i < output.values.length; i++) {
+                if(output.results && output.values[i] === output.results[i]) {
+                    results[results.length - 1][results[results.length - 1].length - 1].push(true);
+                } else {
+                    results[results.length - 1][results[results.length - 1].length - 1].push(false);
                 }
             }
-            groupResults.push(outputResults);
         });
-        results.push(groupResults);
     });
-}, { deep: true });
-
+},
+    { deep: true }
+);
 
 watch(testType, () => {
-    groups.forEach((group, index) => {
-        group.title = testType.value === 'comb' ? `Group ${index + 1}` : `Set ${index + 1}`;
-    });
+    if (testType.value === 'comb') {
+        groups.forEach(group => {
+            group.title = `Group ${groups.indexOf(group) + 1}`;
+        });
+    }
+    else {
+        groups.forEach(group => {
+            group.title = `Set ${groups.indexOf(group) + 1}`;
+        });
+    }
 });
 
 const sendData = () => {
     const groupsData = groups.map(group => {
-        const inputsData = inputsName.value.map((label, index) => ({
-            label,
-            bitWidth: inputsBandWidth.value[index],
-            values: group.inputs[index] || [],
-        }));
-
-        const outputsData = outputsName.value.map((label, index) => ({
-            label,
-            bitWidth: outputsBandWidth.value[index],
-            values: group.outputs[index] || [],
-        }));
+        const inputsData = group.inputs.map((input, index) => {
+            return {
+                label: inputsName.value[index],
+                bitWidth: inputsBandWidth.value[index],
+                values: input
+            };
+        });
+
+        const outputsData = group.outputs.map((output, index) => {
+            return {
+                label: outputsName.value[index],
+                bitWidth: outputsBandWidth.value[index],
+                values: output
+            };
+        });
 
         return {
             label: group.title,
             inputs: inputsData,
             outputs: outputsData,
-            n: (inputsData[0]?.values.length) || 0,
+            n: inputsData[0] ? inputsData[0].values.length : 0,
         };
     });
 
@@ -269,102 +264,72 @@ const sendData = () => {
 
 const addTestToGroup = (index: number) => {
     const group = groups[index];
-    for (let i = 0; i < inputsName.value.length; i++) {
-        if (!group.inputs[i]) group.inputs[i] = [];
-        group.inputs[i].push("0".repeat(inputsBandWidth.value[i] || 1));
+    for (let i = 0; i < inputsBandWidth.value.length; i++) {
+        if (group.inputs.length === i)
+            group.inputs.push([]);
+        group.inputs[i].push("0");
     }
 
-    for (let i = 0; i < outputsName.value.length; i++) {
-        if (!group.outputs[i]) group.outputs[i] = [];
-        group.outputs[i].push("0".repeat(outputsBandWidth.value[i] || 1));
+    for (let i = 0; i < outputsBandWidth.value.length; i++) {
+        if (group.outputs.length === i)
+            group.outputs.push([]);
+        group.outputs[i].push("0");
     }
 };
 
-const deleteTestFromGroup = (groupIndex: number, testIndex: number) => {
-    groups[groupIndex].inputs.forEach(input => {
-        input.splice(testIndex, 1);
-    });
-
-    groups[groupIndex].outputs.forEach(output => {
-        output.splice(testIndex, 1);
+const addNewGroup = () => {
+    groups.push({
+        title: `Group ${groups.length + 1}`,
+        inputs: [],
+        outputs: [],
     });
 };
 
-const addNewGroup = () => {
-    const nextIndex = groups.length + 1;
-    const newGroup: Group = {
-        title: testType.value === 'comb' ? `Group ${nextIndex}` : `Set ${nextIndex}`,
-        inputs: Array.from({ length: inputsName.value.length }, () => []),
-        outputs: Array.from({ length: outputsName.value.length }, () => []),
-    };
-
-    // If there are existing tests in other groups, add one empty test to the new group for consistency
-    const hasTests = groups.some(g => g.inputs[0]?.length > 0);
-    if(groups.length > 0 && hasTests) {
-        for (let i = 0; i < inputsName.value.length; i++) {
-            newGroup.inputs[i].push("0".repeat(inputsBandWidth.value[i] || 1));
-        }
-        for (let i = 0; i < outputsName.value.length; i++) {
-            newGroup.outputs[i].push("0".repeat(outputsBandWidth.value[i] || 1));
-        }
-    }
+const increInputs = () => {
+    groups.forEach((group) => {
+        if (group.inputs.length === 0) return;
 
-    groups.push(newGroup);
-};
+        group.inputs.push([]);
 
+        for (let i = 0; i < group.inputs[0].length; i++) {
+            group.inputs[group.inputs.length - 1].push("0");
+        }
+    });
 
-const increInputs = () => {
     inputsBandWidth.value.push(1);
     inputsName.value.push(`inp${inputsName.value.length + 1}`);
-    groups.forEach((group) => {
-        const newCol = group.inputs.length > 0 ? Array(group.inputs[0].length).fill("0") : [];
-        group.inputs.push(newCol);
-    });
 };
 
-const deleteInput = (index: number) => {
-    if (inputsName.value.length <= 1) return;
-    inputsBandWidth.value.splice(index, 1);
-    inputsName.value.splice(index, 1);
+const increOutputs = () => {
     groups.forEach((group) => {
-        group.inputs.splice(index, 1);
+        if (group.outputs.length === 0) return;
+
+        group.outputs.push([]);
+
+        for (let i = 0; i < group.outputs[0].length; i++) {
+            group.outputs[group.outputs.length - 1].push("0");
+        }
     });
-};
 
-const increOutputs = () => {
     outputsBandWidth.value.push(1);
     outputsName.value.push(`out${outputsName.value.length + 1}`);
-    groups.forEach((group) => {
-         const newCol = group.outputs.length > 0 ? Array(group.outputs[0].length).fill("0") : [];
-        group.outputs.push(newCol);
-    });
 };
 
-const deleteOutput = (index: number) => {
-    if (outputsName.value.length <= 1) return;
-    outputsBandWidth.value.splice(index, 1);
-    outputsName.value.splice(index, 1);
-    groups.forEach((group) => {
-        group.outputs.splice(index, 1);
-    });
-};
-
-
 const exportAsCSV = () => {
     let csv = `${testType.value},${testTitle.value}\n`;
 
-    csv += `Inputs BandWidth:${inputsBandWidth.value.join(',')}\n`;
-    csv += `Outputs BandWidth:${outputsBandWidth.value.join(',')}\n`;
-    csv += `Inputs Name:${inputsName.value.join(',')}\n`;
-    csv += `Outputs Name:${outputsName.value.join(',')}\n`;
+    csv += `Inputs BandWidth: ${inputsBandWidth.value.join(',')}\n`;
+    csv += `Outputs BandWidth: ${outputsBandWidth.value.join(',')}\n`;
+    csv += `Inputs Name: ${inputsName.value.join(',')}\n`;
+    csv += `Outputs Name: ${outputsName.value.join(',')}\n`;
 
     csv += groups.map(group => {
-        let groupStr = `G-${group.title}\n`;
+        let groupStr = `G-${group.title}:\n`;
         groupStr += group.inputs.map((input, index) => `I-${inputsName.value[index]}:${input.join(',')}`).join('\n');
         groupStr += '\n';
         groupStr += group.outputs.map((output, index) => `O-${outputsName.value[index]}:${output.join(',')}`).join('\n');
         return groupStr;
-    }).join('\n\n');
+    }).join('\n');
 
     const blob = new Blob([csv], { type: 'text/csv' });
     const url = URL.createObjectURL(blob);
@@ -387,46 +352,56 @@ const importFromCSV = () => {
         const reader = new FileReader();
         reader.onload = () => {
             const csv = reader.result as string;
-            const lines = csv.split('\n').filter(line => line.trim() !== '');
+            const lines = csv.split('\n');
 
             const firstLine = lines.shift();
             if (firstLine) {
                 [testType.value, testTitle.value] = firstLine.split(',');
             }
 
-            const config: { [key: string]: string } = {};
-            while(lines.length > 0 && lines[0].includes(':') && !lines[0].startsWith('G-')) {
-                const line = lines.shift();
-                if(!line) continue;
-                const [key, value] = line.split(/:(.*)/s);
-                config[key] = value;
+            let line = lines.shift();
+            if (line) {
+                inputsBandWidth.value = line.split(': ')[1].split(',').map(Number);
+            }
+            line = lines.shift();
+            if (line) {
+                outputsBandWidth.value = line.split(': ')[1].split(',').map(Number);
+            }
+            line = lines.shift();
+            if (line) {
+                inputsName.value = line.split(': ')[1].split(',');
+            }
+            line = lines.shift();
+            if (line) {
+                outputsName.value = line.split(': ')[1].split(',');
             }
-
-            inputsBandWidth.value = config['Inputs BandWidth']?.split(',').map(Number) || [];
-            outputsBandWidth.value = config['Outputs BandWidth']?.split(',').map(Number) || [];
-            inputsName.value = config['Inputs Name']?.split(',') || [];
-            outputsName.value = config['Outputs Name']?.split(',') || [];
-
 
             const newGroups: Group[] = [];
-            let currentGroup: Group | null = null;
-
-            for (const line of lines) {
-                 if (line.startsWith('G-')) {
-                    if (currentGroup) newGroups.push(currentGroup);
-                    currentGroup = { title: line.substring(2), inputs: [], outputs: [] };
-                } else if (currentGroup) {
-                    const [typeAndLabel, values] = line.split(':');
-                    const valuesArr = values ? values.split(',') : [];
-
-                    if (typeAndLabel.startsWith('I-')) {
-                        currentGroup.inputs.push(valuesArr);
-                    } else if (typeAndLabel.startsWith('O-')) {
-                        currentGroup.outputs.push(valuesArr);
+            let group: Group = {
+                title: '',
+                inputs: [],
+                outputs: [],
+            }
+            lines.forEach(line => {
+                if (line.startsWith('G-')) {
+                    if (group.title) {
+                        newGroups.push(group);
+                    }
+                    group = { title: line.slice(2), inputs: [], outputs: [] };
+                } else {
+                    const [name, values] = line.split(':');
+                    const isInput = name.startsWith('I-') && inputsName.value.includes(name.slice(2));
+                    const isOutput = name.startsWith('O-') && outputsName.value.includes(name.slice(2));
+                    if (isInput) {
+                        group.inputs.push(values.split(','));
+                    } else if (isOutput) {
+                        group.outputs.push(values.split(','));
                     }
                 }
+            });
+            if (group.title) {
+                newGroups.push(group);
             }
-            if (currentGroup) newGroups.push(currentGroup);
 
             groups.splice(0, groups.length, ...newGroups);
         };
@@ -436,7 +411,6 @@ const importFromCSV = () => {
 
     input.click();
 };
-
 </script>
 
 <style scoped>

From 238d8bbacec3447db6a6e73836b94fa6436b8aa4 Mon Sep 17 00:00:00 2001
From: ThatDeparted2061 <harshraocodesup@gmail.com>
Date: Fri, 5 Sep 2025 15:43:09 +0530
Subject: [PATCH 06/17] Fix: fix minor bugs in TesbenchCreator.vue

---
 .../TestBenchPanel/TestBenchCreator.vue       | 52 ++++++++++++++++++-
 1 file changed, 51 insertions(+), 1 deletion(-)

diff --git a/v0/src/components/Panels/TestBenchPanel/TestBenchCreator.vue b/v0/src/components/Panels/TestBenchPanel/TestBenchCreator.vue
index dbac8c04c..9dcbab302 100644
--- a/v0/src/components/Panels/TestBenchPanel/TestBenchCreator.vue
+++ b/v0/src/components/Panels/TestBenchPanel/TestBenchCreator.vue
@@ -58,7 +58,9 @@
 
                     <!-- Labels Row -->
                     <div class="data-grid labels-grid" :class="{ 'with-results': testBenchStore.showResults }">
-                        <div class="grid-cell label-col">Label</div>
+                        <div class="grid-cell label-col">
+                            Label
+                        </div>
                         <div class="grid-cell inputs-col">
                             <div v-for="(name, i) in inputsName" :key="`in-name-${i}`" class="io-cell">
                                 <input class="io-input" type="text" v-model="inputsName[i]" />
@@ -277,6 +279,16 @@ const addTestToGroup = (index: number) => {
     }
 };
 
+const deleteTestFromGroup = (groupIndex: number, testIndex: number) => {
+    groups[groupIndex].inputs.forEach(input => {
+        input.splice(testIndex, 1);
+    });
+
+    groups[groupIndex].outputs.forEach(output => {
+        output.splice(testIndex, 1);
+    });
+};
+
 const addNewGroup = () => {
     groups.push({
         title: `Group ${groups.length + 1}`,
@@ -300,6 +312,18 @@ const increInputs = () => {
     inputsName.value.push(`inp${inputsName.value.length + 1}`);
 };
 
+const deleteInput = (index:number) => {
+    if(inputsName.value.length === 1) return;
+    groups.forEach((group) => {
+        if (group.inputs.length === 0) return;
+
+        group.inputs.splice(index, 1);
+    });
+
+    inputsBandWidth.value.splice(index, 1);
+    inputsName.value.splice(index, 1);
+};
+
 const increOutputs = () => {
     groups.forEach((group) => {
         if (group.outputs.length === 0) return;
@@ -315,6 +339,32 @@ const increOutputs = () => {
     outputsName.value.push(`out${outputsName.value.length + 1}`);
 };
 
+const deleteOutput = (index:number) => {
+    if(outputsName.value.length === 1) return;
+    groups.forEach((group) => {
+        if (group.outputs.length === 0) return;
+
+        group.outputs.splice(index, 1);
+    });
+
+    outputsBandWidth.value.splice(index, 1);
+    outputsName.value.splice(index, 1);
+};
+
+const resetData = () => {
+    testTitle.value = 'Untitled';
+    testType.value = 'comb';
+    inputsBandWidth.value = [1];
+    outputsBandWidth.value = [1];
+    inputsName.value = ["inp1"];
+    outputsName.value = ["out1"];
+    groups.splice(0, groups.length, {
+        title: 'Group 1',
+        inputs: [],
+        outputs: [],
+    });
+};
+
 const exportAsCSV = () => {
     let csv = `${testType.value},${testTitle.value}\n`;
 

From a2702c23943de56f5c11ed3e97587fa09d7045b6 Mon Sep 17 00:00:00 2001
From: ThatDeparted2061 <harshraocodesup@gmail.com>
Date: Fri, 5 Sep 2025 16:02:19 +0530
Subject: [PATCH 07/17] fix: address coderabbit suggestions

---
 .../components/Panels/TestBenchPanel/TestBenchCreator.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/v0/src/components/Panels/TestBenchPanel/TestBenchCreator.vue b/v0/src/components/Panels/TestBenchPanel/TestBenchCreator.vue
index 9dcbab302..9d94af2fe 100644
--- a/v0/src/components/Panels/TestBenchPanel/TestBenchCreator.vue
+++ b/v0/src/components/Panels/TestBenchPanel/TestBenchCreator.vue
@@ -1,5 +1,5 @@
 <template>
-    <v-dialog v-model="showCreator" :persistent="false" max-width="1100px">
+    <v-dialog v-model="testBenchStore.showTestBenchCreator" :persistent="false" max-width="1100px">
         <v-card class="testbench-creator-card">
             <!-- Header Section -->
             <v-card-title class="headline-container">
@@ -80,12 +80,12 @@
                         <div class="grid-cell label-col">Bitwidth</div>
                         <div class="grid-cell inputs-col">
                             <div v-for="(_, i) in inputsBandWidth" :key="`in-bw-${i}`" class="io-cell">
-                                <input class="io-input bitwidth-input" type="text" v-model="inputsBandWidth[i]" maxlength="1" />
+                                <input class="io-input bitwidth-input" type="number" v-model.number="inputsBandWidth[i]" min="1" max="64" />
                             </div>
                         </div>
                         <div class="grid-cell outputs-col">
                             <div v-for="(_, i) in outputsBandWidth" :key="`out-bw-${i}`" class="io-cell">
-                                <input class="io-input bitwidth-input" type="text" v-model="outputsBandWidth[i]" maxlength="1" />
+                                <input class="io-input bitwidth-input" type="number" v-model.number="outputsBandWidth[i]" min="1" max="64" />
                             </div>
                         </div>
                     </div>
@@ -145,7 +145,7 @@ import { useTestBenchStore } from '#/store/testBenchStore';
 
 const testBenchStore = useTestBenchStore();
 
-const showCreator = computed(() => testBenchStore.showTestBenchCreator);
+// v-model is now bound directly to the store ref
 
 const results: boolean[][][] = reactive([]);
 const testTitle = ref('Untitled');

From 0e183aacd77e4ff7f5a7fa3fe1d6740ecad86969 Mon Sep 17 00:00:00 2001
From: Harsh Rao <harshraocodesup@gmail.com>
Date: Wed, 10 Sep 2025 04:07:19 +0530
Subject: [PATCH 08/17] fix: fix indentation

---
 .../TestBenchPanel/TestBenchCreator.vue       | 22 -------------------
 1 file changed, 22 deletions(-)

diff --git a/v0/src/components/Panels/TestBenchPanel/TestBenchCreator.vue b/v0/src/components/Panels/TestBenchPanel/TestBenchCreator.vue
index 9d94af2fe..54c157a87 100644
--- a/v0/src/components/Panels/TestBenchPanel/TestBenchCreator.vue
+++ b/v0/src/components/Panels/TestBenchPanel/TestBenchCreator.vue
@@ -1,21 +1,16 @@
 <template>
     <v-dialog v-model="testBenchStore.showTestBenchCreator" :persistent="false" max-width="1100px">
         <v-card class="testbench-creator-card">
-            <!-- Header Section -->
             <v-card-title class="headline-container">
                 <h1 class="headline-title">{{ dialogTitle }}</h1>
                 <v-btn icon size="small" variant="text" @click="testBenchStore.showTestBenchCreator = false" class="close-button">
                     <v-icon>mdi-close</v-icon>
                 </v-btn>
             </v-card-title>
-
             <v-card-text class="pa-6">
-                <!-- Title Input -->
                 <div class="mb-6 text-center">
                     <input v-model="testTitle" class="title-input" type="text" placeholder="Enter Test Title" />
                 </div>
-
-                <!-- Test Type Selection -->
                 <div class="test-type-container">
                     <v-btn
                         :class="['test-type-btn', { 'active': testType === 'seq' }]"
@@ -33,14 +28,11 @@
                     </v-btn>
                 </div>
 
-                <!-- Empty State Placeholder -->
                 <div v-if="groups.length === 0" class="empty-state">
                     <p>No test groups added yet. Click "+ New Group" to start creating your test.</p>
                 </div>
 
-                <!-- Test Data Table -->
                 <div v-else class="data-table-container">
-                    <!-- Table Header -->
                     <div class="data-grid header-grid" :class="{ 'with-results': testBenchStore.showResults }">
                         <div class="grid-cell header-cell label-col"></div>
                         <div class="grid-cell header-cell inputs-col">
@@ -56,7 +48,6 @@
                         </div>
                     </div>
 
-                    <!-- Labels Row -->
                     <div class="data-grid labels-grid" :class="{ 'with-results': testBenchStore.showResults }">
                         <div class="grid-cell label-col">
                             Label
@@ -75,7 +66,6 @@
                         </div>
                     </div>
 
-                     <!-- Bitwidth Row -->
                     <div class="data-grid bitwidth-grid" :class="{ 'with-results': testBenchStore.showResults }">
                         <div class="grid-cell label-col">Bitwidth</div>
                         <div class="grid-cell inputs-col">
@@ -90,7 +80,6 @@
                         </div>
                     </div>
 
-                    <!-- Data Groups -->
                     <div v-for="(group, groupIndex) in groups" class="group-container" :key="groupIndex">
                         <div class="group-header">
                             <input v-model="group.title" class="group-title-input" type="text" />
@@ -124,7 +113,6 @@
                 </div>
             </v-card-text>
 
-            <!-- Action Buttons Footer -->
             <v-card-actions class="footer-actions">
                 <v-btn class="action-btn new-group-btn" @click="addNewGroup">
                     <v-icon left>mdi-plus</v-icon>
@@ -145,7 +133,6 @@ import { useTestBenchStore } from '#/store/testBenchStore';
 
 const testBenchStore = useTestBenchStore();
 
-// v-model is now bound directly to the store ref
 
 const results: boolean[][][] = reactive([]);
 const testTitle = ref('Untitled');
@@ -464,9 +451,7 @@ const importFromCSV = () => {
 </script>
 
 <style scoped>
-/* Main Dialog Styling */
 .testbench-creator-card {
-    /* Color Palette */
     --cv-green: #4caf50;
     --cv-green-dark: #388e3c;
     --cv-red: #f44336;
@@ -503,7 +488,6 @@ const importFromCSV = () => {
     transform: translateY(-50%);
 }
 
-/* Title Input */
 .title-input {
     border: 1px solid var(--cv-border);
     border-radius: 8px;
@@ -521,7 +505,6 @@ const importFromCSV = () => {
     box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
 }
 
-/* Test Type Selection */
 .test-type-container {
     display: flex;
     justify-content: center;
@@ -546,7 +529,6 @@ const importFromCSV = () => {
     color: white;
 }
 
-/* Empty State */
 .empty-state {
     border: 2px dashed var(--cv-border);
     border-radius: 8px;
@@ -556,7 +538,6 @@ const importFromCSV = () => {
     margin: 24px;
 }
 
-/* Data Table Styling */
 .data-table-container {
     padding: 0 16px;
 }
@@ -566,7 +547,6 @@ const importFromCSV = () => {
     align-items: center;
     padding: 8px 0;
 }
-/* Grid column definitions */
 .data-grid:not(.data-row) { grid-template-columns: 120px 1fr 1fr; }
 .data-grid.data-row { grid-template-columns: 40px 1fr 1fr; }
 .data-grid.with-results:not(.data-row) { grid-template-columns: 120px 1fr 1fr 120px; }
@@ -650,7 +630,6 @@ const importFromCSV = () => {
     opacity: 1;
 }
 
-/* Group Styling */
 .group-container {
     margin-top: 24px;
 }
@@ -685,7 +664,6 @@ const importFromCSV = () => {
 }
 
 
-/* Footer Actions */
 .footer-actions {
     display: flex;
     justify-content: center;

From 4c0434c0e145dcc83d4721e19ad5f9d927e3e7ed Mon Sep 17 00:00:00 2001
From: Harsh Rao <harshraocodesup@gmail.com>
Date: Wed, 10 Sep 2025 04:38:02 +0530
Subject: [PATCH 09/17] fix: fix coderabbit

---
 .../TestBenchPanel/TestBenchCreator.vue       | 28 +++++++++----------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/v0/src/components/Panels/TestBenchPanel/TestBenchCreator.vue b/v0/src/components/Panels/TestBenchPanel/TestBenchCreator.vue
index 54c157a87..1283932f2 100644
--- a/v0/src/components/Panels/TestBenchPanel/TestBenchCreator.vue
+++ b/v0/src/components/Panels/TestBenchPanel/TestBenchCreator.vue
@@ -89,7 +89,7 @@
                             </v-btn>
                         </div>
 
-                        <div v-for="(_, testIndex) in group.inputs[0]" class="data-grid data-row" :key="testIndex" :class="{ 'with-results': testBenchStore.showResults }">
+                        <div v-for="(_, testIndex) in (group.inputs[0] || [])" class="data-grid data-row" :key="testIndex" :class="{ 'with-results': testBenchStore.showResults }">
                              <div class="grid-cell label-col action-col">
                                  <v-btn icon size="x-small" variant="text" class="delete-io-btn" @click="deleteTestFromGroup(groupIndex, testIndex)"><v-icon size="small">mdi-close</v-icon></v-btn>
                              </div>
@@ -151,11 +151,11 @@ interface Group {
 }
 
 const groups = reactive<Group[]>([
-    {
-        title: 'Group 1',
-        inputs: [],
-        outputs: [],
-    }
+  {
+    title: 'Group 1',
+    inputs: Array.from({ length: inputsName.value.length }, () => []),
+    outputs: Array.from({ length: outputsName.value.length }, () => []),
+  }
 ]);
 
 watch(() => testBenchStore.testbenchData.testData.groups, () => {
@@ -277,11 +277,11 @@ const deleteTestFromGroup = (groupIndex: number, testIndex: number) => {
 };
 
 const addNewGroup = () => {
-    groups.push({
-        title: `Group ${groups.length + 1}`,
-        inputs: [],
-        outputs: [],
-    });
+  groups.push({
+    title: `Group ${groups.length + 1}`,
+    inputs: Array.from({ length: inputsName.value.length }, () => []),
+    outputs: Array.from({ length: outputsName.value.length }, () => []),
+  });
 };
 
 const increInputs = () => {
@@ -346,9 +346,9 @@ const resetData = () => {
     inputsName.value = ["inp1"];
     outputsName.value = ["out1"];
     groups.splice(0, groups.length, {
-        title: 'Group 1',
-        inputs: [],
-        outputs: [],
+      title: 'Group 1',
+      inputs: Array.from({ length: inputsName.value.length }, () => []),
+      outputs: Array.from({ length: outputsName.value.length }, () => []),
     });
 };
 

From 27031acfa7a6d3499edaaf49a291628f3ea5fae0 Mon Sep 17 00:00:00 2001
From: Harsh Rao <harshraocodesup@gmail.com>
Date: Wed, 10 Sep 2025 11:02:36 +0530
Subject: [PATCH 10/17] fix: fix toggle disappearence issue

---
 .../TestBenchPanel/TestBenchCreator.vue       | 38 ++++++++++++++-----
 1 file changed, 29 insertions(+), 9 deletions(-)

diff --git a/v0/src/components/Panels/TestBenchPanel/TestBenchCreator.vue b/v0/src/components/Panels/TestBenchPanel/TestBenchCreator.vue
index 1283932f2..abc74537f 100644
--- a/v0/src/components/Panels/TestBenchPanel/TestBenchCreator.vue
+++ b/v0/src/components/Panels/TestBenchPanel/TestBenchCreator.vue
@@ -67,17 +67,29 @@
                     </div>
 
                     <div class="data-grid bitwidth-grid" :class="{ 'with-results': testBenchStore.showResults }">
-                        <div class="grid-cell label-col">Bitwidth</div>
-                        <div class="grid-cell inputs-col">
-                            <div v-for="(_, i) in inputsBandWidth" :key="`in-bw-${i}`" class="io-cell">
-                                <input class="io-input bitwidth-input" type="number" v-model.number="inputsBandWidth[i]" min="1" max="64" />
-                            </div>
+                      <div class="grid-cell label-col">Bitwidth</div>
+                      <div class="grid-cell inputs-col">
+                        <div v-for="(bw, i) in inputsBandWidth" :key="`in-bw-${i}`" class="io-cell bitwidth-row">
+                          <v-btn icon size="x-small" variant="text" @click="inputsBandWidth[i] = Math.max(1, inputsBandWidth[i] - 1)" title="Decrease bitwidth">
+                            <v-icon>mdi-minus</v-icon>
+                          </v-btn>
+                          <input class="io-input bitwidth-input no-spinner" type="number" v-model.number="inputsBandWidth[i]" min="1" max="64" />
+                          <v-btn icon size="x-small" variant="text" @click="inputsBandWidth[i] = Math.min(64, inputsBandWidth[i] + 1)" title="Increase bitwidth">
+                            <v-icon>mdi-plus</v-icon>
+                          </v-btn>
                         </div>
-                        <div class="grid-cell outputs-col">
-                            <div v-for="(_, i) in outputsBandWidth" :key="`out-bw-${i}`" class="io-cell">
-                                <input class="io-input bitwidth-input" type="number" v-model.number="outputsBandWidth[i]" min="1" max="64" />
-                            </div>
+                      </div>
+                      <div class="grid-cell outputs-col">
+                        <div v-for="(bw, i) in outputsBandWidth" :key="`out-bw-${i}`" class="io-cell bitwidth-row">
+                          <v-btn icon size="x-small" variant="text" @click="outputsBandWidth[i] = Math.max(1, outputsBandWidth[i] - 1)" title="Decrease bitwidth">
+                            <v-icon>mdi-minus</v-icon>
+                          </v-btn>
+                          <input class="io-input bitwidth-input no-spinner" type="number" v-model.number="outputsBandWidth[i]" min="1" max="64" />
+                          <v-btn icon size="x-small" variant="text" @click="outputsBandWidth[i] = Math.min(64, outputsBandWidth[i] + 1)" title="Increase bitwidth">
+                            <v-icon>mdi-plus</v-icon>
+                          </v-btn>
                         </div>
+                      </div>
                     </div>
 
                     <div v-for="(group, groupIndex) in groups" class="group-container" :key="groupIndex">
@@ -613,6 +625,14 @@ const importFromCSV = () => {
     background-color: #f5f5f5;
     border-radius: 4px;
 }
+.no-spinner::-webkit-inner-spin-button,
+.no-spinner::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+.no-spinner[type=number] {
+  -moz-appearance: textfield;
+}
 .data-input {
     border: 1px solid transparent;
     border-radius: 4px;

From da30ea98b7ad19e8e3fbcd8e54a2ddec8213d98c Mon Sep 17 00:00:00 2001
From: Harsh Rao <harshraocodesup@gmail.com>
Date: Wed, 10 Sep 2025 11:08:27 +0530
Subject: [PATCH 11/17] fix: fixed the bitwidth toggle disappearing issue

---
 .../Panels/TestBenchPanel/TestBenchCreator.vue       | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/v0/src/components/Panels/TestBenchPanel/TestBenchCreator.vue b/v0/src/components/Panels/TestBenchPanel/TestBenchCreator.vue
index abc74537f..1fdfc085f 100644
--- a/v0/src/components/Panels/TestBenchPanel/TestBenchCreator.vue
+++ b/v0/src/components/Panels/TestBenchPanel/TestBenchCreator.vue
@@ -73,7 +73,7 @@
                           <v-btn icon size="x-small" variant="text" @click="inputsBandWidth[i] = Math.max(1, inputsBandWidth[i] - 1)" title="Decrease bitwidth">
                             <v-icon>mdi-minus</v-icon>
                           </v-btn>
-                          <input class="io-input bitwidth-input no-spinner" type="number" v-model.number="inputsBandWidth[i]" min="1" max="64" />
+                          <input class="io-input bitwidth-input no-spinner" v-model="inputsBandWidth[i]" min="1" max="64" @blur="inputsBandWidth[i] = clamp(inputsBandWidth[i])"/>
                           <v-btn icon size="x-small" variant="text" @click="inputsBandWidth[i] = Math.min(64, inputsBandWidth[i] + 1)" title="Increase bitwidth">
                             <v-icon>mdi-plus</v-icon>
                           </v-btn>
@@ -84,7 +84,7 @@
                           <v-btn icon size="x-small" variant="text" @click="outputsBandWidth[i] = Math.max(1, outputsBandWidth[i] - 1)" title="Decrease bitwidth">
                             <v-icon>mdi-minus</v-icon>
                           </v-btn>
-                          <input class="io-input bitwidth-input no-spinner" type="number" v-model.number="outputsBandWidth[i]" min="1" max="64" />
+                          <input class="io-input bitwidth-input no-spinner" v-model="outputsBandWidth[i]" min="1" max="64" @blur="outputsBandWidth[i] = clamp(outputsBandWidth[i])"/>
                           <v-btn icon size="x-small" variant="text" @click="outputsBandWidth[i] = Math.min(64, outputsBandWidth[i] + 1)" title="Increase bitwidth">
                             <v-icon>mdi-plus</v-icon>
                           </v-btn>
@@ -107,7 +107,7 @@
                              </div>
                              <div class="grid-cell inputs-col">
                                  <div v-for="(_, i) in group.inputs" class="io-cell" :key="`g${groupIndex}-in-${i}-${testIndex}`">
-                                     <input class="io-input data-input" type="text" v-model="group.inputs[i][testIndex]" :disabled="testBenchStore.readOnly" :maxlength="inputsBandWidth[i]" />
+                                     <input class="io-input data-input" type="text" v-model="group.inputs[i][testIndex]" :disabled="testBenchStore.readOnly" :maxlength="inputsBandWidth[i] as number" />
                                  </div>
                              </div>
                              <div class="grid-cell outputs-col">
@@ -155,6 +155,12 @@ const inputsBandWidth = ref([1]);
 const outputsBandWidth = ref([1]);
 const inputsName = ref<string[]>(["inp1"]);
 const outputsName = ref<string[]>(["out1"]);
+const clamp = (val) => {
+  if (!val) return 1
+  const n = Number(val)
+  if (isNaN(n)) return 1
+  return Math.min(Math.max(n, 1), 64)
+}
 
 interface Group {
     title: string;

From 892afb78b525df42d5535692342ff72cf3cc61f8 Mon Sep 17 00:00:00 2001
From: Harsh Rao <harshraocodesup@gmail.com>
Date: Wed, 10 Sep 2025 11:13:10 +0530
Subject: [PATCH 12/17] chore: sync TesbenchCreator to v1 and src

---
 .../TestBenchPanel/TestBenchCreator.vue       | 570 +++++++++++-------
 .../TestBenchPanel/TestBenchCreator.vue       | 570 +++++++++++-------
 2 files changed, 722 insertions(+), 418 deletions(-)

diff --git a/src/components/Panels/TestBenchPanel/TestBenchCreator.vue b/src/components/Panels/TestBenchPanel/TestBenchCreator.vue
index 93b5ede09..1fdfc085f 100644
--- a/src/components/Panels/TestBenchPanel/TestBenchCreator.vue
+++ b/src/components/Panels/TestBenchPanel/TestBenchCreator.vue
@@ -1,136 +1,139 @@
 <template>
-    <v-dialog v-model="showCreator" :persistent="false">
-        <v-card class="messageBoxContent" id="creatorBox">
-            <v-card-text class="creatorHeader">
-                <p class="dialogHeader">{{ dialogTitle }}</p>
-                <v-btn size="x-small" icon class="dialogClose"
-                    @mousedown="testBenchStore.showTestBenchCreator = false">
+    <v-dialog v-model="testBenchStore.showTestBenchCreator" :persistent="false" max-width="1100px">
+        <v-card class="testbench-creator-card">
+            <v-card-title class="headline-container">
+                <h1 class="headline-title">{{ dialogTitle }}</h1>
+                <v-btn icon size="small" variant="text" @click="testBenchStore.showTestBenchCreator = false" class="close-button">
                     <v-icon>mdi-close</v-icon>
                 </v-btn>
-                <div class="testInput">
-                    <label for="fileNameInputField">Title:</label>
-                    <input v-model="testTitle" class="inputField" type="text" />
+            </v-card-title>
+            <v-card-text class="pa-6">
+                <div class="mb-6 text-center">
+                    <input v-model="testTitle" class="title-input" type="text" placeholder="Enter Test Title" />
+                </div>
+                <div class="test-type-container">
+                    <v-btn
+                        :class="['test-type-btn', { 'active': testType === 'seq' }]"
+                        @click="testType = 'seq'"
+                        elevation="0"
+                    >
+                        Sequential Test
+                    </v-btn>
+                    <v-btn
+                        :class="['test-type-btn', { 'active': testType === 'comb' }]"
+                        @click="testType = 'comb'"
+                        elevation="0"
+                    >
+                        Combinational Test
+                    </v-btn>
                 </div>
-            </v-card-text>
-
-            <v-card-actions class="testType">
-                <v-btn class="messageBtn" block @mousedown="testType = 'seq'">
-                    Sequential Test
-                </v-btn>
-                <v-btn class="messageBtn" block @mousedown="testType = 'comb'">
-                    Combinational Test
-                </v-btn>
-            </v-card-actions>
-
-            <v-card-text style="testCard">
-                <div class="testCol">
-                    <div class="testRow firstCol">
 
-                    </div>
-                    <div class="testRow fullTestRow space">
-                        <span>Inputs</span> <span @mousedown="increInputs" class="plusMinusBtn">+</span>
-                    </div>
-                    <div class="testRow fullTestRow space">
-                        <span>Outputs</span> <span @mousedown="increOutputs" class="plusMinusBtn">+</span>
-                    </div>
+                <div v-if="groups.length === 0" class="empty-state">
+                    <p>No test groups added yet. Click "+ New Group" to start creating your test.</p>
                 </div>
-                <div class="testCol">
-                    <div class="testRow firstCol">
-                        Label
-                    </div>
-                    <div class="testContainer">
-                        <div v-for="(_, i) in inputsName" class="testRow"
-                            :style="{ width: 100 / inputsBandWidth.length + '%' }">
-                            <input class="inputField dataGroupTitle smInputName" type="text" v-model="inputsName[i]" />
-                            <span @mousedown="deleteInput(i)" class="plusMinusBtn">-</span>
-                        </div>
-                    </div>
-                    <div class="testContainer">
-                        <div v-for="(_, i) in outputsName" class="testRow"
-                            :style="{ width: 100 / outputsBandWidth.length + '%' }">
-                            <input class="inputField dataGroupTitle smInputName" type="text" v-model="outputsName[i]" />
-                            <span @mousedown="deleteOutput(i)" class="plusMinusBtn">-</span>
+
+                <div v-else class="data-table-container">
+                    <div class="data-grid header-grid" :class="{ 'with-results': testBenchStore.showResults }">
+                        <div class="grid-cell header-cell label-col"></div>
+                        <div class="grid-cell header-cell inputs-col">
+                            <span>Inputs</span>
+                            <v-btn icon size="x-small" variant="flat" class="ml-2 action-icon" @click="increInputs"><v-icon>mdi-plus</v-icon></v-btn>
                         </div>
-                    </div>
-                </div>
-                <div class="testCol">
-                    <div class="testRow firstCol">
-                        Bitwidth
-                    </div>
-                    <div class="testContainer">
-                        <div v-for="(_, i) in inputsBandWidth" class="testRow"
-                            :style="{ width: 100 / inputsBandWidth.length + '%' }">
-                            <input class="inputField dataGroupTitle smInput" type="text" v-model="inputsBandWidth[i]"
-                                maxlength="1" />
+                        <div class="grid-cell header-cell outputs-col">
+                            <span>Outputs</span>
+                             <v-btn icon size="x-small" variant="flat" class="ml-2 action-icon" @click="increOutputs"><v-icon>mdi-plus</v-icon></v-btn>
                         </div>
-                    </div>
-                    <div class="testContainer">
-                        <div v-for="(_, i) in outputsBandWidth" class="testRow"
-                            :style="{ width: 100 / outputsBandWidth.length + '%' }">
-                            <input class="inputField dataGroupTitle smInput" type="text" v-model="outputsBandWidth[i]"
-                                maxlength="1" />
+                        <div v-if="testBenchStore.showResults" class="grid-cell header-cell results-col">
+                            Results
                         </div>
                     </div>
-                </div>
 
-                <div v-for="(group, groupIndex) in groups" class="groupParent" :key="groupIndex">
-                    <input v-model="group.title" class="inputField dataGroupTitle" type="text" />
-                    <p>Click + to add tests to the {{ testType === 'comb' ? 'group' : 'set' }}</p>
-
-                    <div v-for="(_, index) in group.inputs[0]" class="groupRow" :key="index">
-                        <div class="testRow firstCol spaceArea"></div>
-                        <span @mousedown="deleteTestFromGroup(groupIndex, index)" class="plusMinusBtn">-</span>
-                        <div class="testContainer">
-                            <div v-for="(_, i) in group.inputs" class="testRow colWise"
-                                :style="{ width: 100 / inputsBandWidth.length + '%' }">
-                                <input class="inputField dataGroupTitle smInput" type="text"
-                                    :disabled="testBenchStore.readOnly" v-model="group.inputs[i][index]"
-                                    maxlength="1" />
-                            </div>
+                    <div class="data-grid labels-grid" :class="{ 'with-results': testBenchStore.showResults }">
+                        <div class="grid-cell label-col">
+                            Label
                         </div>
-                        <div class="testContainer">
-                            <div v-for="(_, i) in group.outputs" class="testRow colWise"
-                                :style="{ width: 100 / outputsBandWidth.length + '%' }">
-                                <input class="inputField dataGroupTitle smInput" type="text"
-                                    :disabled="testBenchStore.readOnly" v-model="group.outputs[i][index]"
-                                    maxlength="1" />
+                        <div class="grid-cell inputs-col">
+                            <div v-for="(name, i) in inputsName" :key="`in-name-${i}`" class="io-cell">
+                                <input class="io-input" type="text" v-model="inputsName[i]" />
+                                <v-btn icon size="x-small" variant="text" class="delete-io-btn" @click="deleteInput(i)"><v-icon size="small">mdi-minus-circle-outline</v-icon></v-btn>
                             </div>
                         </div>
-                        <div v-if="testBenchStore.showResults" class="resultContainer">
-                            <div v-for="(_, i) in results" class="testRow colWise"
-                                :style="{ width: 100 / outputsBandWidth.length + '%', color: results[groupIndex][i][index] ? '#17FC12' : '#FF1616' }">
-                                 {{ results[groupIndex][i][index] ? '✔' : '✘' }}
+                        <div class="grid-cell outputs-col">
+                            <div v-for="(name, i) in outputsName" :key="`out-name-${i}`" class="io-cell">
+                                <input class="io-input" type="text" v-model="outputsName[i]" />
+                                <v-btn icon size="x-small" variant="text" class="delete-io-btn" @click="deleteOutput(i)"><v-icon size="small">mdi-minus-circle-outline</v-icon></v-btn>
                             </div>
                         </div>
                     </div>
 
-                    <v-btn v-if="groupIndex !== groups.length - 1" class="messageBtn addBtn" block
-                        @mousedown="addTestToGroup(groupIndex)">
-                        +
-                    </v-btn>
+                    <div class="data-grid bitwidth-grid" :class="{ 'with-results': testBenchStore.showResults }">
+                      <div class="grid-cell label-col">Bitwidth</div>
+                      <div class="grid-cell inputs-col">
+                        <div v-for="(bw, i) in inputsBandWidth" :key="`in-bw-${i}`" class="io-cell bitwidth-row">
+                          <v-btn icon size="x-small" variant="text" @click="inputsBandWidth[i] = Math.max(1, inputsBandWidth[i] - 1)" title="Decrease bitwidth">
+                            <v-icon>mdi-minus</v-icon>
+                          </v-btn>
+                          <input class="io-input bitwidth-input no-spinner" v-model="inputsBandWidth[i]" min="1" max="64" @blur="inputsBandWidth[i] = clamp(inputsBandWidth[i])"/>
+                          <v-btn icon size="x-small" variant="text" @click="inputsBandWidth[i] = Math.min(64, inputsBandWidth[i] + 1)" title="Increase bitwidth">
+                            <v-icon>mdi-plus</v-icon>
+                          </v-btn>
+                        </div>
+                      </div>
+                      <div class="grid-cell outputs-col">
+                        <div v-for="(bw, i) in outputsBandWidth" :key="`out-bw-${i}`" class="io-cell bitwidth-row">
+                          <v-btn icon size="x-small" variant="text" @click="outputsBandWidth[i] = Math.max(1, outputsBandWidth[i] - 1)" title="Decrease bitwidth">
+                            <v-icon>mdi-minus</v-icon>
+                          </v-btn>
+                          <input class="io-input bitwidth-input no-spinner" v-model="outputsBandWidth[i]" min="1" max="64" @blur="outputsBandWidth[i] = clamp(outputsBandWidth[i])"/>
+                          <v-btn icon size="x-small" variant="text" @click="outputsBandWidth[i] = Math.min(64, outputsBandWidth[i] + 1)" title="Increase bitwidth">
+                            <v-icon>mdi-plus</v-icon>
+                          </v-btn>
+                        </div>
+                      </div>
+                    </div>
+
+                    <div v-for="(group, groupIndex) in groups" class="group-container" :key="groupIndex">
+                        <div class="group-header">
+                            <input v-model="group.title" class="group-title-input" type="text" />
+                             <v-btn size="small" class="add-test-btn" variant="tonal" @click="addTestToGroup(groupIndex)">
+                                <v-icon left>mdi-plus</v-icon>
+                                Add Test
+                            </v-btn>
+                        </div>
+
+                        <div v-for="(_, testIndex) in (group.inputs[0] || [])" class="data-grid data-row" :key="testIndex" :class="{ 'with-results': testBenchStore.showResults }">
+                             <div class="grid-cell label-col action-col">
+                                 <v-btn icon size="x-small" variant="text" class="delete-io-btn" @click="deleteTestFromGroup(groupIndex, testIndex)"><v-icon size="small">mdi-close</v-icon></v-btn>
+                             </div>
+                             <div class="grid-cell inputs-col">
+                                 <div v-for="(_, i) in group.inputs" class="io-cell" :key="`g${groupIndex}-in-${i}-${testIndex}`">
+                                     <input class="io-input data-input" type="text" v-model="group.inputs[i][testIndex]" :disabled="testBenchStore.readOnly" :maxlength="inputsBandWidth[i] as number" />
+                                 </div>
+                             </div>
+                             <div class="grid-cell outputs-col">
+                                 <div v-for="(_, i) in group.outputs" class="io-cell" :key="`g${groupIndex}-out-${i}-${testIndex}`">
+                                     <input class="io-input data-input" type="text" v-model="group.outputs[i][testIndex]" :disabled="testBenchStore.readOnly" :maxlength="outputsBandWidth[i]" />
+                                 </div>
+                             </div>
+                             <div v-if="testBenchStore.showResults" class="grid-cell results-col">
+                                 <div v-for="(_, i) in results[groupIndex]" class="io-cell result-cell" :key="`g${groupIndex}-res-${i}-${testIndex}`" :class="results[groupIndex][i][testIndex] ? 'success' : 'fail'">
+                                     {{ results[groupIndex][i][testIndex] ? '✔' : '✘' }}
+                                 </div>
+                             </div>
+                        </div>
+                    </div>
                 </div>
             </v-card-text>
 
-            <v-card-actions class="testActionBtns">
-                <div class="btnDiv">
-                    <v-btn class="messageBtn" block @mousedown="addTestToGroup(groups.length - 1)">
-                        +
-                    </v-btn>
-                    <v-btn class="messageBtn" block @mousedown="addNewGroup">
-                        New Group
-                    </v-btn>
-                </div>
-                <div class="btnDiv">
-                    <v-btn class="messageBtn" block @mousedown="importFromCSV">
-                        Import From CSV
-                    </v-btn>
-                    <v-btn class="messageBtn" block @mousedown="exportAsCSV">
-                        Export As CSV
-                    </v-btn>
-                    <v-btn class="messageBtn" block @mousedown="sendData">
-                        Attach
-                    </v-btn>
-                </div>
+            <v-card-actions class="footer-actions">
+                <v-btn class="action-btn new-group-btn" @click="addNewGroup">
+                    <v-icon left>mdi-plus</v-icon>
+                    New Group
+                </v-btn>
+                <v-btn class="action-btn reset-btn" @click="resetData">Reset</v-btn>
+                <v-btn class="action-btn secondary-btn" @click="importFromCSV">Import CSV</v-btn>
+                <v-btn class="action-btn secondary-btn" @click="exportAsCSV">Export CSV</v-btn>
+                <v-btn class="action-btn attach-btn" @click="sendData">Attach</v-btn>
             </v-card-actions>
         </v-card>
     </v-dialog>
@@ -142,7 +145,6 @@ import { useTestBenchStore } from '#/store/testBenchStore';
 
 const testBenchStore = useTestBenchStore();
 
-const showCreator = computed(() => testBenchStore.showTestBenchCreator);
 
 const results: boolean[][][] = reactive([]);
 const testTitle = ref('Untitled');
@@ -153,6 +155,12 @@ const inputsBandWidth = ref([1]);
 const outputsBandWidth = ref([1]);
 const inputsName = ref<string[]>(["inp1"]);
 const outputsName = ref<string[]>(["out1"]);
+const clamp = (val) => {
+  if (!val) return 1
+  const n = Number(val)
+  if (isNaN(n)) return 1
+  return Math.min(Math.max(n, 1), 64)
+}
 
 interface Group {
     title: string;
@@ -161,11 +169,11 @@ interface Group {
 }
 
 const groups = reactive<Group[]>([
-    {
-        title: 'Group 1',
-        inputs: [],
-        outputs: [],
-    }
+  {
+    title: 'Group 1',
+    inputs: Array.from({ length: inputsName.value.length }, () => []),
+    outputs: Array.from({ length: outputsName.value.length }, () => []),
+  }
 ]);
 
 watch(() => testBenchStore.testbenchData.testData.groups, () => {
@@ -287,11 +295,11 @@ const deleteTestFromGroup = (groupIndex: number, testIndex: number) => {
 };
 
 const addNewGroup = () => {
-    groups.push({
-        title: `Group ${groups.length + 1}`,
-        inputs: [],
-        outputs: [],
-    });
+  groups.push({
+    title: `Group ${groups.length + 1}`,
+    inputs: Array.from({ length: inputsName.value.length }, () => []),
+    outputs: Array.from({ length: outputsName.value.length }, () => []),
+  });
 };
 
 const increInputs = () => {
@@ -348,6 +356,20 @@ const deleteOutput = (index:number) => {
     outputsName.value.splice(index, 1);
 };
 
+const resetData = () => {
+    testTitle.value = 'Untitled';
+    testType.value = 'comb';
+    inputsBandWidth.value = [1];
+    outputsBandWidth.value = [1];
+    inputsName.value = ["inp1"];
+    outputsName.value = ["out1"];
+    groups.splice(0, groups.length, {
+      title: 'Group 1',
+      inputs: Array.from({ length: inputsName.value.length }, () => []),
+      outputs: Array.from({ length: outputsName.value.length }, () => []),
+    });
+};
+
 const exportAsCSV = () => {
     let csv = `${testType.value},${testTitle.value}\n`;
 
@@ -447,146 +469,276 @@ const importFromCSV = () => {
 </script>
 
 <style scoped>
-#creatorBox {
-    width: 1100px;
+.testbench-creator-card {
+    --cv-green: #4caf50;
+    --cv-green-dark: #388e3c;
+    --cv-red: #f44336;
+    --cv-red-dark: #d32f2f;
+    --cv-background: #f7f9fb;
+    --cv-surface: #ffffff;
+    --cv-border: #e0e0e0;
+    --cv-text-primary: #212121;
+    --cv-text-secondary: #757575;
+
+    background-color: var(--cv-background);
+    border-radius: 12px;
 }
 
-.creatorHeader {
+.headline-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
     position: relative;
+    padding: 16px 24px;
+    border-bottom: 1px solid var(--cv-border);
 }
 
-.testInput {
-    display: flex;
-    align-items: center;
-    gap: 1rem;
+.headline-title {
+    color: var(--cv-text-primary);
+    font-size: 1.5rem;
+    font-weight: 500;
 }
 
-.testType {
-    width: 97%;
+.close-button {
+    position: absolute;
+    right: 16px;
+    top: 50%;
+    transform: translateY(-50%);
 }
 
-.testActionBtns {
-    width: 97%;
-    display: flex;
-    justify-content: space-between;
-    padding-bottom: 1rem;
+.title-input {
+    border: 1px solid var(--cv-border);
+    border-radius: 8px;
+    padding: 12px 16px;
+    font-size: 1rem;
+    width: 50%;
+    max-width: 400px;
+    text-align: center;
+    transition: border-color 0.3s, box-shadow 0.3s;
 }
 
-.btnDiv {
-    display: flex;
-    gap: 0.1rem;
-    align-items: center;
+.title-input:focus {
+    outline: none;
+    border-color: var(--cv-green);
+    box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
 }
 
-.testRow {
-    border: 1px solid #c5c5c5;
-    padding: 0.75rem;
-    padding-left: 1.5rem;
-    padding-right: 1.5rem;
+.test-type-container {
     display: flex;
     justify-content: center;
-    align-items: center;
+    background-color: #eef1f5;
+    border-radius: 8px;
+    padding: 4px;
+    margin: 0 auto 24px auto;
+    width: fit-content;
 }
 
-.colWise {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
+.test-type-btn {
+    border-radius: 6px !important;
+    text-transform: none;
+    font-weight: 500;
+    color: var(--cv-text-secondary);
+    background-color: transparent;
+    border: none;
 }
 
-.testCol {
-    display: flex;
-    gap: 0.5rem;
-    justify-content: center;
-    margin-bottom: 0.5rem;
+.test-type-btn.active {
+    background-color: var(--cv-green);
+    color: white;
 }
 
-.firstCol {
-    width: 30%;
+.empty-state {
+    border: 2px dashed var(--cv-border);
+    border-radius: 8px;
+    padding: 48px 24px;
+    text-align: center;
+    color: var(--cv-text-secondary);
+    margin: 24px;
 }
 
-.dataGroupTitle {
-    border: none;
-    padding: 0;
-    margin: 0;
+.data-table-container {
+    padding: 0 16px;
+}
+.data-grid {
+    display: grid;
+    gap: 16px;
+    align-items: center;
+    padding: 8px 0;
 }
+.data-grid:not(.data-row) { grid-template-columns: 120px 1fr 1fr; }
+.data-grid.data-row { grid-template-columns: 40px 1fr 1fr; }
+.data-grid.with-results:not(.data-row) { grid-template-columns: 120px 1fr 1fr 120px; }
+.data-grid.data-row.with-results { grid-template-columns: 40px 1fr 1fr 120px; }
 
-.spaceArea {
-    visibility: hidden;
+.data-row {
+     border-top: 1px solid var(--cv-border);
 }
 
-.testContainer {
+.grid-cell {
     display: flex;
-    width: 35%;
-    gap: 0.5rem;
-    overflow-x: scroll;
+    align-items: center;
+    gap: 8px;
 }
 
-.resultContainer {
-    display: flex;
-    width: 15%;
-    gap: 0.5rem;
-    overflow-x: scroll;
+.header-cell {
+    font-weight: 600;
+    color: var(--cv-text-primary);
+    font-size: 1rem;
+    justify-content: center;
+}
+.action-icon {
+    background-color: #e0e0e0;
+    color: #616161;
+}
+
+.label-col {
+    font-weight: 500;
+    color: var(--cv-text-secondary);
+    padding-left: 12px;
+}
+.action-col {
+    justify-content: center;
 }
 
-.fullTestRow {
-    width: 35%;
+.inputs-col, .outputs-col, .results-col {
+    background-color: var(--cv-surface);
+    border: 1px solid var(--cv-border);
+    border-radius: 8px;
+    padding: 4px;
 }
 
-.groupRow {
+.io-cell {
+    flex: 1;
     display: flex;
-    gap: 0.5rem;
+    align-items: center;
     justify-content: center;
+    position: relative;
+    padding: 4px;
 }
 
-.plusMinusBtn {
-    align-self: center;
+.io-input {
+    width: 100%;
     text-align: center;
-    width: 16px;
-    cursor: pointer;
-    padding: 2px;
-    padding-top: 0.5px;
-    padding-bottom: 0.5px;
-    border: 1px solid #c5c5c5;
+    border: none;
+    background-color: transparent;
+    font-size: 0.9rem;
+}
+.io-input:focus {
+    outline: none;
+}
+.bitwidth-input {
+    max-width: 40px;
+    background-color: #f5f5f5;
+    border-radius: 4px;
+}
+.no-spinner::-webkit-inner-spin-button,
+.no-spinner::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+.no-spinner[type=number] {
+  -moz-appearance: textfield;
+}
+.data-input {
+    border: 1px solid transparent;
+    border-radius: 4px;
+}
+.data-input:focus {
+    border-color: var(--cv-green);
 }
 
-.space {
-    gap: 0.25rem;
+.delete-io-btn {
+    opacity: 0;
+    transition: opacity 0.2s;
+    color: var(--cv-text-secondary);
+}
+.io-cell:hover .delete-io-btn, .action-col:hover .delete-io-btn {
+    opacity: 1;
 }
 
-.groupParent {
-    margin-bottom: 2rem;
-    margin-top: 2rem;
+.group-container {
+    margin-top: 24px;
+}
+.group-header {
+    display: flex;
+    align-items: center;
+    margin-bottom: 8px;
+    gap: 16px;
+}
+.group-title-input {
+    font-size: 1.1rem;
+    font-weight: 500;
+    border: none;
+    border-bottom: 1px solid transparent;
+    padding: 4px 0;
+}
+.group-title-input:focus {
+    outline: none;
+    border-bottom-color: var(--cv-green);
+}
+.add-test-btn {
+    color: var(--cv-green);
+}
+.result-cell {
+    font-weight: bold;
+}
+.result-cell.success {
+    color: var(--cv-green);
+}
+.result-cell.fail {
+    color: var(--cv-red);
 }
 
-.addBtn {
-    background-color: transparent;
-    color: white;
+
+.footer-actions {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 16px 24px;
+    border-top: 1px solid var(--cv-border);
+    background-color: var(--cv-surface);
+    gap: 12px;
 }
 
-.testCard {
-    padding-left: 2.2rem;
+.action-btn {
+    text-transform: none;
+    border-radius: 8px;
+    font-weight: 600;
 }
 
-.smInput {
-    width: 12px;
-    border: none;
+.new-group-btn {
+    background-color: var(--cv-green);
+    color: white;
+}
+.new-group-btn:hover {
+    background-color: var(--cv-green-dark);
 }
 
-.smInputName {
-    width: 34px;
-    border: none;
+.reset-btn {
+    background-color: transparent;
+    color: var(--cv-red);
+    border: 1px solid var(--cv-red);
+}
+.reset-btn:hover {
+    background-color: rgba(244, 67, 54, 0.1);
 }
 
-.smInputName:focus,
-.smInput:focus {
-    outline: none;
-    border: none;
+.secondary-btn {
+    background-color: transparent;
+    color: var(--cv-text-secondary);
+    border: 1px solid var(--cv-border);
+}
+.secondary-btn:hover {
+    background-color: #f5f5f5;
+    border-color: #bdbdbd;
 }
 
-.smInput:focus {
-    outline: none;
-    border: none;
+.attach-btn {
+    background-color: #626262;
+    color: white;
+}
+.attach-btn:hover {
+    background-color: #424242;
 }
 </style>
+
diff --git a/v1/src/components/Panels/TestBenchPanel/TestBenchCreator.vue b/v1/src/components/Panels/TestBenchPanel/TestBenchCreator.vue
index 93b5ede09..1fdfc085f 100644
--- a/v1/src/components/Panels/TestBenchPanel/TestBenchCreator.vue
+++ b/v1/src/components/Panels/TestBenchPanel/TestBenchCreator.vue
@@ -1,136 +1,139 @@
 <template>
-    <v-dialog v-model="showCreator" :persistent="false">
-        <v-card class="messageBoxContent" id="creatorBox">
-            <v-card-text class="creatorHeader">
-                <p class="dialogHeader">{{ dialogTitle }}</p>
-                <v-btn size="x-small" icon class="dialogClose"
-                    @mousedown="testBenchStore.showTestBenchCreator = false">
+    <v-dialog v-model="testBenchStore.showTestBenchCreator" :persistent="false" max-width="1100px">
+        <v-card class="testbench-creator-card">
+            <v-card-title class="headline-container">
+                <h1 class="headline-title">{{ dialogTitle }}</h1>
+                <v-btn icon size="small" variant="text" @click="testBenchStore.showTestBenchCreator = false" class="close-button">
                     <v-icon>mdi-close</v-icon>
                 </v-btn>
-                <div class="testInput">
-                    <label for="fileNameInputField">Title:</label>
-                    <input v-model="testTitle" class="inputField" type="text" />
+            </v-card-title>
+            <v-card-text class="pa-6">
+                <div class="mb-6 text-center">
+                    <input v-model="testTitle" class="title-input" type="text" placeholder="Enter Test Title" />
+                </div>
+                <div class="test-type-container">
+                    <v-btn
+                        :class="['test-type-btn', { 'active': testType === 'seq' }]"
+                        @click="testType = 'seq'"
+                        elevation="0"
+                    >
+                        Sequential Test
+                    </v-btn>
+                    <v-btn
+                        :class="['test-type-btn', { 'active': testType === 'comb' }]"
+                        @click="testType = 'comb'"
+                        elevation="0"
+                    >
+                        Combinational Test
+                    </v-btn>
                 </div>
-            </v-card-text>
-
-            <v-card-actions class="testType">
-                <v-btn class="messageBtn" block @mousedown="testType = 'seq'">
-                    Sequential Test
-                </v-btn>
-                <v-btn class="messageBtn" block @mousedown="testType = 'comb'">
-                    Combinational Test
-                </v-btn>
-            </v-card-actions>
-
-            <v-card-text style="testCard">
-                <div class="testCol">
-                    <div class="testRow firstCol">
 
-                    </div>
-                    <div class="testRow fullTestRow space">
-                        <span>Inputs</span> <span @mousedown="increInputs" class="plusMinusBtn">+</span>
-                    </div>
-                    <div class="testRow fullTestRow space">
-                        <span>Outputs</span> <span @mousedown="increOutputs" class="plusMinusBtn">+</span>
-                    </div>
+                <div v-if="groups.length === 0" class="empty-state">
+                    <p>No test groups added yet. Click "+ New Group" to start creating your test.</p>
                 </div>
-                <div class="testCol">
-                    <div class="testRow firstCol">
-                        Label
-                    </div>
-                    <div class="testContainer">
-                        <div v-for="(_, i) in inputsName" class="testRow"
-                            :style="{ width: 100 / inputsBandWidth.length + '%' }">
-                            <input class="inputField dataGroupTitle smInputName" type="text" v-model="inputsName[i]" />
-                            <span @mousedown="deleteInput(i)" class="plusMinusBtn">-</span>
-                        </div>
-                    </div>
-                    <div class="testContainer">
-                        <div v-for="(_, i) in outputsName" class="testRow"
-                            :style="{ width: 100 / outputsBandWidth.length + '%' }">
-                            <input class="inputField dataGroupTitle smInputName" type="text" v-model="outputsName[i]" />
-                            <span @mousedown="deleteOutput(i)" class="plusMinusBtn">-</span>
+
+                <div v-else class="data-table-container">
+                    <div class="data-grid header-grid" :class="{ 'with-results': testBenchStore.showResults }">
+                        <div class="grid-cell header-cell label-col"></div>
+                        <div class="grid-cell header-cell inputs-col">
+                            <span>Inputs</span>
+                            <v-btn icon size="x-small" variant="flat" class="ml-2 action-icon" @click="increInputs"><v-icon>mdi-plus</v-icon></v-btn>
                         </div>
-                    </div>
-                </div>
-                <div class="testCol">
-                    <div class="testRow firstCol">
-                        Bitwidth
-                    </div>
-                    <div class="testContainer">
-                        <div v-for="(_, i) in inputsBandWidth" class="testRow"
-                            :style="{ width: 100 / inputsBandWidth.length + '%' }">
-                            <input class="inputField dataGroupTitle smInput" type="text" v-model="inputsBandWidth[i]"
-                                maxlength="1" />
+                        <div class="grid-cell header-cell outputs-col">
+                            <span>Outputs</span>
+                             <v-btn icon size="x-small" variant="flat" class="ml-2 action-icon" @click="increOutputs"><v-icon>mdi-plus</v-icon></v-btn>
                         </div>
-                    </div>
-                    <div class="testContainer">
-                        <div v-for="(_, i) in outputsBandWidth" class="testRow"
-                            :style="{ width: 100 / outputsBandWidth.length + '%' }">
-                            <input class="inputField dataGroupTitle smInput" type="text" v-model="outputsBandWidth[i]"
-                                maxlength="1" />
+                        <div v-if="testBenchStore.showResults" class="grid-cell header-cell results-col">
+                            Results
                         </div>
                     </div>
-                </div>
 
-                <div v-for="(group, groupIndex) in groups" class="groupParent" :key="groupIndex">
-                    <input v-model="group.title" class="inputField dataGroupTitle" type="text" />
-                    <p>Click + to add tests to the {{ testType === 'comb' ? 'group' : 'set' }}</p>
-
-                    <div v-for="(_, index) in group.inputs[0]" class="groupRow" :key="index">
-                        <div class="testRow firstCol spaceArea"></div>
-                        <span @mousedown="deleteTestFromGroup(groupIndex, index)" class="plusMinusBtn">-</span>
-                        <div class="testContainer">
-                            <div v-for="(_, i) in group.inputs" class="testRow colWise"
-                                :style="{ width: 100 / inputsBandWidth.length + '%' }">
-                                <input class="inputField dataGroupTitle smInput" type="text"
-                                    :disabled="testBenchStore.readOnly" v-model="group.inputs[i][index]"
-                                    maxlength="1" />
-                            </div>
+                    <div class="data-grid labels-grid" :class="{ 'with-results': testBenchStore.showResults }">
+                        <div class="grid-cell label-col">
+                            Label
                         </div>
-                        <div class="testContainer">
-                            <div v-for="(_, i) in group.outputs" class="testRow colWise"
-                                :style="{ width: 100 / outputsBandWidth.length + '%' }">
-                                <input class="inputField dataGroupTitle smInput" type="text"
-                                    :disabled="testBenchStore.readOnly" v-model="group.outputs[i][index]"
-                                    maxlength="1" />
+                        <div class="grid-cell inputs-col">
+                            <div v-for="(name, i) in inputsName" :key="`in-name-${i}`" class="io-cell">
+                                <input class="io-input" type="text" v-model="inputsName[i]" />
+                                <v-btn icon size="x-small" variant="text" class="delete-io-btn" @click="deleteInput(i)"><v-icon size="small">mdi-minus-circle-outline</v-icon></v-btn>
                             </div>
                         </div>
-                        <div v-if="testBenchStore.showResults" class="resultContainer">
-                            <div v-for="(_, i) in results" class="testRow colWise"
-                                :style="{ width: 100 / outputsBandWidth.length + '%', color: results[groupIndex][i][index] ? '#17FC12' : '#FF1616' }">
-                                 {{ results[groupIndex][i][index] ? '✔' : '✘' }}
+                        <div class="grid-cell outputs-col">
+                            <div v-for="(name, i) in outputsName" :key="`out-name-${i}`" class="io-cell">
+                                <input class="io-input" type="text" v-model="outputsName[i]" />
+                                <v-btn icon size="x-small" variant="text" class="delete-io-btn" @click="deleteOutput(i)"><v-icon size="small">mdi-minus-circle-outline</v-icon></v-btn>
                             </div>
                         </div>
                     </div>
 
-                    <v-btn v-if="groupIndex !== groups.length - 1" class="messageBtn addBtn" block
-                        @mousedown="addTestToGroup(groupIndex)">
-                        +
-                    </v-btn>
+                    <div class="data-grid bitwidth-grid" :class="{ 'with-results': testBenchStore.showResults }">
+                      <div class="grid-cell label-col">Bitwidth</div>
+                      <div class="grid-cell inputs-col">
+                        <div v-for="(bw, i) in inputsBandWidth" :key="`in-bw-${i}`" class="io-cell bitwidth-row">
+                          <v-btn icon size="x-small" variant="text" @click="inputsBandWidth[i] = Math.max(1, inputsBandWidth[i] - 1)" title="Decrease bitwidth">
+                            <v-icon>mdi-minus</v-icon>
+                          </v-btn>
+                          <input class="io-input bitwidth-input no-spinner" v-model="inputsBandWidth[i]" min="1" max="64" @blur="inputsBandWidth[i] = clamp(inputsBandWidth[i])"/>
+                          <v-btn icon size="x-small" variant="text" @click="inputsBandWidth[i] = Math.min(64, inputsBandWidth[i] + 1)" title="Increase bitwidth">
+                            <v-icon>mdi-plus</v-icon>
+                          </v-btn>
+                        </div>
+                      </div>
+                      <div class="grid-cell outputs-col">
+                        <div v-for="(bw, i) in outputsBandWidth" :key="`out-bw-${i}`" class="io-cell bitwidth-row">
+                          <v-btn icon size="x-small" variant="text" @click="outputsBandWidth[i] = Math.max(1, outputsBandWidth[i] - 1)" title="Decrease bitwidth">
+                            <v-icon>mdi-minus</v-icon>
+                          </v-btn>
+                          <input class="io-input bitwidth-input no-spinner" v-model="outputsBandWidth[i]" min="1" max="64" @blur="outputsBandWidth[i] = clamp(outputsBandWidth[i])"/>
+                          <v-btn icon size="x-small" variant="text" @click="outputsBandWidth[i] = Math.min(64, outputsBandWidth[i] + 1)" title="Increase bitwidth">
+                            <v-icon>mdi-plus</v-icon>
+                          </v-btn>
+                        </div>
+                      </div>
+                    </div>
+
+                    <div v-for="(group, groupIndex) in groups" class="group-container" :key="groupIndex">
+                        <div class="group-header">
+                            <input v-model="group.title" class="group-title-input" type="text" />
+                             <v-btn size="small" class="add-test-btn" variant="tonal" @click="addTestToGroup(groupIndex)">
+                                <v-icon left>mdi-plus</v-icon>
+                                Add Test
+                            </v-btn>
+                        </div>
+
+                        <div v-for="(_, testIndex) in (group.inputs[0] || [])" class="data-grid data-row" :key="testIndex" :class="{ 'with-results': testBenchStore.showResults }">
+                             <div class="grid-cell label-col action-col">
+                                 <v-btn icon size="x-small" variant="text" class="delete-io-btn" @click="deleteTestFromGroup(groupIndex, testIndex)"><v-icon size="small">mdi-close</v-icon></v-btn>
+                             </div>
+                             <div class="grid-cell inputs-col">
+                                 <div v-for="(_, i) in group.inputs" class="io-cell" :key="`g${groupIndex}-in-${i}-${testIndex}`">
+                                     <input class="io-input data-input" type="text" v-model="group.inputs[i][testIndex]" :disabled="testBenchStore.readOnly" :maxlength="inputsBandWidth[i] as number" />
+                                 </div>
+                             </div>
+                             <div class="grid-cell outputs-col">
+                                 <div v-for="(_, i) in group.outputs" class="io-cell" :key="`g${groupIndex}-out-${i}-${testIndex}`">
+                                     <input class="io-input data-input" type="text" v-model="group.outputs[i][testIndex]" :disabled="testBenchStore.readOnly" :maxlength="outputsBandWidth[i]" />
+                                 </div>
+                             </div>
+                             <div v-if="testBenchStore.showResults" class="grid-cell results-col">
+                                 <div v-for="(_, i) in results[groupIndex]" class="io-cell result-cell" :key="`g${groupIndex}-res-${i}-${testIndex}`" :class="results[groupIndex][i][testIndex] ? 'success' : 'fail'">
+                                     {{ results[groupIndex][i][testIndex] ? '✔' : '✘' }}
+                                 </div>
+                             </div>
+                        </div>
+                    </div>
                 </div>
             </v-card-text>
 
-            <v-card-actions class="testActionBtns">
-                <div class="btnDiv">
-                    <v-btn class="messageBtn" block @mousedown="addTestToGroup(groups.length - 1)">
-                        +
-                    </v-btn>
-                    <v-btn class="messageBtn" block @mousedown="addNewGroup">
-                        New Group
-                    </v-btn>
-                </div>
-                <div class="btnDiv">
-                    <v-btn class="messageBtn" block @mousedown="importFromCSV">
-                        Import From CSV
-                    </v-btn>
-                    <v-btn class="messageBtn" block @mousedown="exportAsCSV">
-                        Export As CSV
-                    </v-btn>
-                    <v-btn class="messageBtn" block @mousedown="sendData">
-                        Attach
-                    </v-btn>
-                </div>
+            <v-card-actions class="footer-actions">
+                <v-btn class="action-btn new-group-btn" @click="addNewGroup">
+                    <v-icon left>mdi-plus</v-icon>
+                    New Group
+                </v-btn>
+                <v-btn class="action-btn reset-btn" @click="resetData">Reset</v-btn>
+                <v-btn class="action-btn secondary-btn" @click="importFromCSV">Import CSV</v-btn>
+                <v-btn class="action-btn secondary-btn" @click="exportAsCSV">Export CSV</v-btn>
+                <v-btn class="action-btn attach-btn" @click="sendData">Attach</v-btn>
             </v-card-actions>
         </v-card>
     </v-dialog>
@@ -142,7 +145,6 @@ import { useTestBenchStore } from '#/store/testBenchStore';
 
 const testBenchStore = useTestBenchStore();
 
-const showCreator = computed(() => testBenchStore.showTestBenchCreator);
 
 const results: boolean[][][] = reactive([]);
 const testTitle = ref('Untitled');
@@ -153,6 +155,12 @@ const inputsBandWidth = ref([1]);
 const outputsBandWidth = ref([1]);
 const inputsName = ref<string[]>(["inp1"]);
 const outputsName = ref<string[]>(["out1"]);
+const clamp = (val) => {
+  if (!val) return 1
+  const n = Number(val)
+  if (isNaN(n)) return 1
+  return Math.min(Math.max(n, 1), 64)
+}
 
 interface Group {
     title: string;
@@ -161,11 +169,11 @@ interface Group {
 }
 
 const groups = reactive<Group[]>([
-    {
-        title: 'Group 1',
-        inputs: [],
-        outputs: [],
-    }
+  {
+    title: 'Group 1',
+    inputs: Array.from({ length: inputsName.value.length }, () => []),
+    outputs: Array.from({ length: outputsName.value.length }, () => []),
+  }
 ]);
 
 watch(() => testBenchStore.testbenchData.testData.groups, () => {
@@ -287,11 +295,11 @@ const deleteTestFromGroup = (groupIndex: number, testIndex: number) => {
 };
 
 const addNewGroup = () => {
-    groups.push({
-        title: `Group ${groups.length + 1}`,
-        inputs: [],
-        outputs: [],
-    });
+  groups.push({
+    title: `Group ${groups.length + 1}`,
+    inputs: Array.from({ length: inputsName.value.length }, () => []),
+    outputs: Array.from({ length: outputsName.value.length }, () => []),
+  });
 };
 
 const increInputs = () => {
@@ -348,6 +356,20 @@ const deleteOutput = (index:number) => {
     outputsName.value.splice(index, 1);
 };
 
+const resetData = () => {
+    testTitle.value = 'Untitled';
+    testType.value = 'comb';
+    inputsBandWidth.value = [1];
+    outputsBandWidth.value = [1];
+    inputsName.value = ["inp1"];
+    outputsName.value = ["out1"];
+    groups.splice(0, groups.length, {
+      title: 'Group 1',
+      inputs: Array.from({ length: inputsName.value.length }, () => []),
+      outputs: Array.from({ length: outputsName.value.length }, () => []),
+    });
+};
+
 const exportAsCSV = () => {
     let csv = `${testType.value},${testTitle.value}\n`;
 
@@ -447,146 +469,276 @@ const importFromCSV = () => {
 </script>
 
 <style scoped>
-#creatorBox {
-    width: 1100px;
+.testbench-creator-card {
+    --cv-green: #4caf50;
+    --cv-green-dark: #388e3c;
+    --cv-red: #f44336;
+    --cv-red-dark: #d32f2f;
+    --cv-background: #f7f9fb;
+    --cv-surface: #ffffff;
+    --cv-border: #e0e0e0;
+    --cv-text-primary: #212121;
+    --cv-text-secondary: #757575;
+
+    background-color: var(--cv-background);
+    border-radius: 12px;
 }
 
-.creatorHeader {
+.headline-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
     position: relative;
+    padding: 16px 24px;
+    border-bottom: 1px solid var(--cv-border);
 }
 
-.testInput {
-    display: flex;
-    align-items: center;
-    gap: 1rem;
+.headline-title {
+    color: var(--cv-text-primary);
+    font-size: 1.5rem;
+    font-weight: 500;
 }
 
-.testType {
-    width: 97%;
+.close-button {
+    position: absolute;
+    right: 16px;
+    top: 50%;
+    transform: translateY(-50%);
 }
 
-.testActionBtns {
-    width: 97%;
-    display: flex;
-    justify-content: space-between;
-    padding-bottom: 1rem;
+.title-input {
+    border: 1px solid var(--cv-border);
+    border-radius: 8px;
+    padding: 12px 16px;
+    font-size: 1rem;
+    width: 50%;
+    max-width: 400px;
+    text-align: center;
+    transition: border-color 0.3s, box-shadow 0.3s;
 }
 
-.btnDiv {
-    display: flex;
-    gap: 0.1rem;
-    align-items: center;
+.title-input:focus {
+    outline: none;
+    border-color: var(--cv-green);
+    box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
 }
 
-.testRow {
-    border: 1px solid #c5c5c5;
-    padding: 0.75rem;
-    padding-left: 1.5rem;
-    padding-right: 1.5rem;
+.test-type-container {
     display: flex;
     justify-content: center;
-    align-items: center;
+    background-color: #eef1f5;
+    border-radius: 8px;
+    padding: 4px;
+    margin: 0 auto 24px auto;
+    width: fit-content;
 }
 
-.colWise {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
+.test-type-btn {
+    border-radius: 6px !important;
+    text-transform: none;
+    font-weight: 500;
+    color: var(--cv-text-secondary);
+    background-color: transparent;
+    border: none;
 }
 
-.testCol {
-    display: flex;
-    gap: 0.5rem;
-    justify-content: center;
-    margin-bottom: 0.5rem;
+.test-type-btn.active {
+    background-color: var(--cv-green);
+    color: white;
 }
 
-.firstCol {
-    width: 30%;
+.empty-state {
+    border: 2px dashed var(--cv-border);
+    border-radius: 8px;
+    padding: 48px 24px;
+    text-align: center;
+    color: var(--cv-text-secondary);
+    margin: 24px;
 }
 
-.dataGroupTitle {
-    border: none;
-    padding: 0;
-    margin: 0;
+.data-table-container {
+    padding: 0 16px;
+}
+.data-grid {
+    display: grid;
+    gap: 16px;
+    align-items: center;
+    padding: 8px 0;
 }
+.data-grid:not(.data-row) { grid-template-columns: 120px 1fr 1fr; }
+.data-grid.data-row { grid-template-columns: 40px 1fr 1fr; }
+.data-grid.with-results:not(.data-row) { grid-template-columns: 120px 1fr 1fr 120px; }
+.data-grid.data-row.with-results { grid-template-columns: 40px 1fr 1fr 120px; }
 
-.spaceArea {
-    visibility: hidden;
+.data-row {
+     border-top: 1px solid var(--cv-border);
 }
 
-.testContainer {
+.grid-cell {
     display: flex;
-    width: 35%;
-    gap: 0.5rem;
-    overflow-x: scroll;
+    align-items: center;
+    gap: 8px;
 }
 
-.resultContainer {
-    display: flex;
-    width: 15%;
-    gap: 0.5rem;
-    overflow-x: scroll;
+.header-cell {
+    font-weight: 600;
+    color: var(--cv-text-primary);
+    font-size: 1rem;
+    justify-content: center;
+}
+.action-icon {
+    background-color: #e0e0e0;
+    color: #616161;
+}
+
+.label-col {
+    font-weight: 500;
+    color: var(--cv-text-secondary);
+    padding-left: 12px;
+}
+.action-col {
+    justify-content: center;
 }
 
-.fullTestRow {
-    width: 35%;
+.inputs-col, .outputs-col, .results-col {
+    background-color: var(--cv-surface);
+    border: 1px solid var(--cv-border);
+    border-radius: 8px;
+    padding: 4px;
 }
 
-.groupRow {
+.io-cell {
+    flex: 1;
     display: flex;
-    gap: 0.5rem;
+    align-items: center;
     justify-content: center;
+    position: relative;
+    padding: 4px;
 }
 
-.plusMinusBtn {
-    align-self: center;
+.io-input {
+    width: 100%;
     text-align: center;
-    width: 16px;
-    cursor: pointer;
-    padding: 2px;
-    padding-top: 0.5px;
-    padding-bottom: 0.5px;
-    border: 1px solid #c5c5c5;
+    border: none;
+    background-color: transparent;
+    font-size: 0.9rem;
+}
+.io-input:focus {
+    outline: none;
+}
+.bitwidth-input {
+    max-width: 40px;
+    background-color: #f5f5f5;
+    border-radius: 4px;
+}
+.no-spinner::-webkit-inner-spin-button,
+.no-spinner::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+.no-spinner[type=number] {
+  -moz-appearance: textfield;
+}
+.data-input {
+    border: 1px solid transparent;
+    border-radius: 4px;
+}
+.data-input:focus {
+    border-color: var(--cv-green);
 }
 
-.space {
-    gap: 0.25rem;
+.delete-io-btn {
+    opacity: 0;
+    transition: opacity 0.2s;
+    color: var(--cv-text-secondary);
+}
+.io-cell:hover .delete-io-btn, .action-col:hover .delete-io-btn {
+    opacity: 1;
 }
 
-.groupParent {
-    margin-bottom: 2rem;
-    margin-top: 2rem;
+.group-container {
+    margin-top: 24px;
+}
+.group-header {
+    display: flex;
+    align-items: center;
+    margin-bottom: 8px;
+    gap: 16px;
+}
+.group-title-input {
+    font-size: 1.1rem;
+    font-weight: 500;
+    border: none;
+    border-bottom: 1px solid transparent;
+    padding: 4px 0;
+}
+.group-title-input:focus {
+    outline: none;
+    border-bottom-color: var(--cv-green);
+}
+.add-test-btn {
+    color: var(--cv-green);
+}
+.result-cell {
+    font-weight: bold;
+}
+.result-cell.success {
+    color: var(--cv-green);
+}
+.result-cell.fail {
+    color: var(--cv-red);
 }
 
-.addBtn {
-    background-color: transparent;
-    color: white;
+
+.footer-actions {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 16px 24px;
+    border-top: 1px solid var(--cv-border);
+    background-color: var(--cv-surface);
+    gap: 12px;
 }
 
-.testCard {
-    padding-left: 2.2rem;
+.action-btn {
+    text-transform: none;
+    border-radius: 8px;
+    font-weight: 600;
 }
 
-.smInput {
-    width: 12px;
-    border: none;
+.new-group-btn {
+    background-color: var(--cv-green);
+    color: white;
+}
+.new-group-btn:hover {
+    background-color: var(--cv-green-dark);
 }
 
-.smInputName {
-    width: 34px;
-    border: none;
+.reset-btn {
+    background-color: transparent;
+    color: var(--cv-red);
+    border: 1px solid var(--cv-red);
+}
+.reset-btn:hover {
+    background-color: rgba(244, 67, 54, 0.1);
 }
 
-.smInputName:focus,
-.smInput:focus {
-    outline: none;
-    border: none;
+.secondary-btn {
+    background-color: transparent;
+    color: var(--cv-text-secondary);
+    border: 1px solid var(--cv-border);
+}
+.secondary-btn:hover {
+    background-color: #f5f5f5;
+    border-color: #bdbdbd;
 }
 
-.smInput:focus {
-    outline: none;
-    border: none;
+.attach-btn {
+    background-color: #626262;
+    color: white;
+}
+.attach-btn:hover {
+    background-color: #424242;
 }
 </style>
+

From 3c1a2cb8ef009f39498bea1d0c7f25611792fdd5 Mon Sep 17 00:00:00 2001
From: Harsh Rao <harshraocodesup@gmail.com>
Date: Wed, 10 Sep 2025 11:41:39 +0530
Subject: [PATCH 13/17] fix: fix misalignments

---
 .../Panels/TestBenchPanel/TestBenchCreator.vue         | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/v0/src/components/Panels/TestBenchPanel/TestBenchCreator.vue b/v0/src/components/Panels/TestBenchPanel/TestBenchCreator.vue
index 1fdfc085f..1d7eae8ca 100644
--- a/v0/src/components/Panels/TestBenchPanel/TestBenchCreator.vue
+++ b/v0/src/components/Panels/TestBenchPanel/TestBenchCreator.vue
@@ -116,8 +116,14 @@
                                  </div>
                              </div>
                              <div v-if="testBenchStore.showResults" class="grid-cell results-col">
-                                 <div v-for="(_, i) in results[groupIndex]" class="io-cell result-cell" :key="`g${groupIndex}-res-${i}-${testIndex}`" :class="results[groupIndex][i][testIndex] ? 'success' : 'fail'">
-                                     {{ results[groupIndex][i][testIndex] ? '✔' : '✘' }}
+-                                <div v-for="(_, i) in results[groupIndex]" class="io-cell result-cell" :key="`g${groupIndex}-res-${i}-${testIndex}`" :class="results[groupIndex][i][testIndex] ? 'success' : 'fail'">
+                                <div
+                                  v-for="(_, i) in (results[groupIndex] || [])"
+                                  class="io-cell result-cell"
+                                  :key="`g${groupIndex}-res-${i}-${testIndex}`"
+                                  :class="(results[groupIndex]?.[i]?.[testIndex]) ? 'success' : 'fail'"
+                                >
+                                    {{ (results[groupIndex]?.[i]?.[testIndex]) ? '✔' : '✘' }}
                                  </div>
                              </div>
                         </div>

From 6a834c73d8ff446a08946c060ef11f3b9ccdbd48 Mon Sep 17 00:00:00 2001
From: Harsh Rao <harshraocodesup@gmail.com>
Date: Wed, 10 Sep 2025 11:43:14 +0530
Subject: [PATCH 14/17] chore: sync to v0 and src

---
 .../Panels/TestBenchPanel/TestBenchCreator.vue         | 10 ++++++++--
 .../Panels/TestBenchPanel/TestBenchCreator.vue         | 10 ++++++++--
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/components/Panels/TestBenchPanel/TestBenchCreator.vue b/src/components/Panels/TestBenchPanel/TestBenchCreator.vue
index 1fdfc085f..1d7eae8ca 100644
--- a/src/components/Panels/TestBenchPanel/TestBenchCreator.vue
+++ b/src/components/Panels/TestBenchPanel/TestBenchCreator.vue
@@ -116,8 +116,14 @@
                                  </div>
                              </div>
                              <div v-if="testBenchStore.showResults" class="grid-cell results-col">
-                                 <div v-for="(_, i) in results[groupIndex]" class="io-cell result-cell" :key="`g${groupIndex}-res-${i}-${testIndex}`" :class="results[groupIndex][i][testIndex] ? 'success' : 'fail'">
-                                     {{ results[groupIndex][i][testIndex] ? '✔' : '✘' }}
+-                                <div v-for="(_, i) in results[groupIndex]" class="io-cell result-cell" :key="`g${groupIndex}-res-${i}-${testIndex}`" :class="results[groupIndex][i][testIndex] ? 'success' : 'fail'">
+                                <div
+                                  v-for="(_, i) in (results[groupIndex] || [])"
+                                  class="io-cell result-cell"
+                                  :key="`g${groupIndex}-res-${i}-${testIndex}`"
+                                  :class="(results[groupIndex]?.[i]?.[testIndex]) ? 'success' : 'fail'"
+                                >
+                                    {{ (results[groupIndex]?.[i]?.[testIndex]) ? '✔' : '✘' }}
                                  </div>
                              </div>
                         </div>
diff --git a/v1/src/components/Panels/TestBenchPanel/TestBenchCreator.vue b/v1/src/components/Panels/TestBenchPanel/TestBenchCreator.vue
index 1fdfc085f..1d7eae8ca 100644
--- a/v1/src/components/Panels/TestBenchPanel/TestBenchCreator.vue
+++ b/v1/src/components/Panels/TestBenchPanel/TestBenchCreator.vue
@@ -116,8 +116,14 @@
                                  </div>
                              </div>
                              <div v-if="testBenchStore.showResults" class="grid-cell results-col">
-                                 <div v-for="(_, i) in results[groupIndex]" class="io-cell result-cell" :key="`g${groupIndex}-res-${i}-${testIndex}`" :class="results[groupIndex][i][testIndex] ? 'success' : 'fail'">
-                                     {{ results[groupIndex][i][testIndex] ? '✔' : '✘' }}
+-                                <div v-for="(_, i) in results[groupIndex]" class="io-cell result-cell" :key="`g${groupIndex}-res-${i}-${testIndex}`" :class="results[groupIndex][i][testIndex] ? 'success' : 'fail'">
+                                <div
+                                  v-for="(_, i) in (results[groupIndex] || [])"
+                                  class="io-cell result-cell"
+                                  :key="`g${groupIndex}-res-${i}-${testIndex}`"
+                                  :class="(results[groupIndex]?.[i]?.[testIndex]) ? 'success' : 'fail'"
+                                >
+                                    {{ (results[groupIndex]?.[i]?.[testIndex]) ? '✔' : '✘' }}
                                  </div>
                              </div>
                         </div>

From 9b17c3e865d3f9a98faef2f64d61e6eba07cb156 Mon Sep 17 00:00:00 2001
From: Harsh Rao <harshraocodesup@gmail.com>
Date: Thu, 11 Sep 2025 23:32:29 +0530
Subject: [PATCH 15/17] fix: add end tag

---
 v0/src/components/Panels/TestBenchPanel/TestBenchCreator.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/v0/src/components/Panels/TestBenchPanel/TestBenchCreator.vue b/v0/src/components/Panels/TestBenchPanel/TestBenchCreator.vue
index 1d7eae8ca..437931499 100644
--- a/v0/src/components/Panels/TestBenchPanel/TestBenchCreator.vue
+++ b/v0/src/components/Panels/TestBenchPanel/TestBenchCreator.vue
@@ -47,6 +47,7 @@
                             Results
                         </div>
                     </div>
+                </div>
 
                     <div class="data-grid labels-grid" :class="{ 'with-results': testBenchStore.showResults }">
                         <div class="grid-cell label-col">

From 81a212e4025b8cca087fad2b66de4b1cb960e5bd Mon Sep 17 00:00:00 2001
From: Harsh Rao <harshraocodesup@gmail.com>
Date: Fri, 12 Sep 2025 21:16:44 +0530
Subject: [PATCH 16/17] fix: remove floating characters from
 testbenchcreator.vue

---
 src/components/Panels/TestBenchPanel/TestBenchCreator.vue    | 2 +-
 v0/src/components/Panels/TestBenchPanel/TestBenchCreator.vue | 2 +-
 v1/src/components/Panels/TestBenchPanel/TestBenchCreator.vue | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/Panels/TestBenchPanel/TestBenchCreator.vue b/src/components/Panels/TestBenchPanel/TestBenchCreator.vue
index 1d7eae8ca..72e5de5f3 100644
--- a/src/components/Panels/TestBenchPanel/TestBenchCreator.vue
+++ b/src/components/Panels/TestBenchPanel/TestBenchCreator.vue
@@ -116,7 +116,7 @@
                                  </div>
                              </div>
                              <div v-if="testBenchStore.showResults" class="grid-cell results-col">
--                                <div v-for="(_, i) in results[groupIndex]" class="io-cell result-cell" :key="`g${groupIndex}-res-${i}-${testIndex}`" :class="results[groupIndex][i][testIndex] ? 'success' : 'fail'">
+                                <div v-for="(_, i) in results[groupIndex]" class="io-cell result-cell" :key="`g${groupIndex}-res-${i}-${testIndex}`" :class="results[groupIndex][i][testIndex] ? 'success' : 'fail'">
                                 <div
                                   v-for="(_, i) in (results[groupIndex] || [])"
                                   class="io-cell result-cell"
diff --git a/v0/src/components/Panels/TestBenchPanel/TestBenchCreator.vue b/v0/src/components/Panels/TestBenchPanel/TestBenchCreator.vue
index 437931499..0306b59c6 100644
--- a/v0/src/components/Panels/TestBenchPanel/TestBenchCreator.vue
+++ b/v0/src/components/Panels/TestBenchPanel/TestBenchCreator.vue
@@ -117,7 +117,7 @@
                                  </div>
                              </div>
                              <div v-if="testBenchStore.showResults" class="grid-cell results-col">
--                                <div v-for="(_, i) in results[groupIndex]" class="io-cell result-cell" :key="`g${groupIndex}-res-${i}-${testIndex}`" :class="results[groupIndex][i][testIndex] ? 'success' : 'fail'">
+                                <div v-for="(_, i) in results[groupIndex]" class="io-cell result-cell" :key="`g${groupIndex}-res-${i}-${testIndex}`" :class="results[groupIndex][i][testIndex] ? 'success' : 'fail'">
                                 <div
                                   v-for="(_, i) in (results[groupIndex] || [])"
                                   class="io-cell result-cell"
diff --git a/v1/src/components/Panels/TestBenchPanel/TestBenchCreator.vue b/v1/src/components/Panels/TestBenchPanel/TestBenchCreator.vue
index 1d7eae8ca..72e5de5f3 100644
--- a/v1/src/components/Panels/TestBenchPanel/TestBenchCreator.vue
+++ b/v1/src/components/Panels/TestBenchPanel/TestBenchCreator.vue
@@ -116,7 +116,7 @@
                                  </div>
                              </div>
                              <div v-if="testBenchStore.showResults" class="grid-cell results-col">
--                                <div v-for="(_, i) in results[groupIndex]" class="io-cell result-cell" :key="`g${groupIndex}-res-${i}-${testIndex}`" :class="results[groupIndex][i][testIndex] ? 'success' : 'fail'">
+                                <div v-for="(_, i) in results[groupIndex]" class="io-cell result-cell" :key="`g${groupIndex}-res-${i}-${testIndex}`" :class="results[groupIndex][i][testIndex] ? 'success' : 'fail'">
                                 <div
                                   v-for="(_, i) in (results[groupIndex] || [])"
                                   class="io-cell result-cell"

From c3e614a1b6a00553c67794a4288f6b4e7b738e1d Mon Sep 17 00:00:00 2001
From: Harsh Rao <harshraocodesup@gmail.com>
Date: Mon, 15 Sep 2025 07:11:34 +0530
Subject: [PATCH 17/17] fix: fix closing div element

---
 src/components/Panels/TestBenchPanel/TestBenchCreator.vue    | 1 +
 v1/src/components/Panels/TestBenchPanel/TestBenchCreator.vue | 1 +
 2 files changed, 2 insertions(+)

diff --git a/src/components/Panels/TestBenchPanel/TestBenchCreator.vue b/src/components/Panels/TestBenchPanel/TestBenchCreator.vue
index 72e5de5f3..0306b59c6 100644
--- a/src/components/Panels/TestBenchPanel/TestBenchCreator.vue
+++ b/src/components/Panels/TestBenchPanel/TestBenchCreator.vue
@@ -47,6 +47,7 @@
                             Results
                         </div>
                     </div>
+                </div>
 
                     <div class="data-grid labels-grid" :class="{ 'with-results': testBenchStore.showResults }">
                         <div class="grid-cell label-col">
diff --git a/v1/src/components/Panels/TestBenchPanel/TestBenchCreator.vue b/v1/src/components/Panels/TestBenchPanel/TestBenchCreator.vue
index 72e5de5f3..0306b59c6 100644
--- a/v1/src/components/Panels/TestBenchPanel/TestBenchCreator.vue
+++ b/v1/src/components/Panels/TestBenchPanel/TestBenchCreator.vue
@@ -47,6 +47,7 @@
                             Results
                         </div>
                     </div>
+                </div>
 
                     <div class="data-grid labels-grid" :class="{ 'with-results': testBenchStore.showResults }">
                         <div class="grid-cell label-col">