From 87cb44150b48bdea7cea52d543facd09d4051218 Mon Sep 17 00:00:00 2001
From: wicky <130177258+wicky-zipstack@users.noreply.github.com>
Date: Fri, 10 Apr 2026 19:24:54 +0530
Subject: [PATCH 1/4] feat: UI/UX improvements and unified schema selector

- Make entire project card clickable (header + body), with stopPropagation on action buttons
- Redesign Model Configuration modal: Hierarchy on top, Source/Destination below, full width dropdowns
- Increase project_schema max_length from 20 to 1024
- Fix table pagination wrapping to new line instead of horizontal overflow
- Add distinct background color to toolbar (Filter, Sort, etc.) with light/dark theme support
- Replace AI chat schema tooltip with interactive dropdown selector
- Sync schema selection bidirectionally across AI Chat, Explorer, and Seeds via shared store
---
 .../backend/core/models/project_details.py    |   2 +-
 .../project-list/ProjectListCard.css          |   3 +-
 .../project-list/ProjectListCard.jsx          |  14 +-
 frontend/src/ide/chat-ai/ChatAI.css           |  24 ++
 frontend/src/ide/chat-ai/PromptActions.jsx    |  62 +++-
 .../configure-source-destination.jsx          | 325 +++++++++---------
 .../editor/no-code-model/no-code-model.css    |   3 +-
 .../no-code-toolbar/no-code-toolbar.css       |   9 +-
 .../src/ide/explorer/explorer-component.jsx   |   4 +
 frontend/src/store/project-store.js           |   6 +
 10 files changed, 262 insertions(+), 190 deletions(-)

diff --git a/backend/backend/core/models/project_details.py b/backend/backend/core/models/project_details.py
index 02659de..e26804d 100644
--- a/backend/backend/core/models/project_details.py
+++ b/backend/backend/core/models/project_details.py
@@ -102,7 +102,7 @@ def delete(self, *args, **kwargs):
     project_path = models.CharField(max_length=100)
     profile_path = models.CharField(max_length=100)
 
-    project_schema = models.CharField(max_length=20, blank=True, null=True)
+    project_schema = models.CharField(max_length=1024, blank=True, null=True)
     # User specific access control fields
     created_by = models.JSONField(default=dict)
     created_at = models.DateTimeField(auto_now_add=True)
diff --git a/frontend/src/base/components/project-list/ProjectListCard.css b/frontend/src/base/components/project-list/ProjectListCard.css
index a912020..6878ebf 100644
--- a/frontend/src/base/components/project-list/ProjectListCard.css
+++ b/frontend/src/base/components/project-list/ProjectListCard.css
@@ -9,6 +9,7 @@
   background-color: var(--project-detail-bg);
   position: relative;
   overflow: hidden;
+  cursor: pointer;
 }
 
 .project-list-card-wrapper:hover {
@@ -171,7 +172,7 @@
 
 /* ---------- body ---------- */
 .project-list-card-clickable-content {
-  cursor: pointer;
+  /* clickable via parent wrapper */
 }
 
 .project-list-card-detail-section {
diff --git a/frontend/src/base/components/project-list/ProjectListCard.jsx b/frontend/src/base/components/project-list/ProjectListCard.jsx
index 131755d..6cfaa92 100644
--- a/frontend/src/base/components/project-list/ProjectListCard.jsx
+++ b/frontend/src/base/components/project-list/ProjectListCard.jsx
@@ -89,6 +89,10 @@ function ProjectListCard({
         } ${isDeleting ? "project-list-card--deleting" : ""} ${
           selectionMode || isSelected ? "project-list-card--selection-mode" : ""
         }`}
+        role="button"
+        tabIndex={0}
+        onClick={handleCardClick}
+        onKeyDown={(e) => e.key === "Enter" && handleCardClick()}
       >
         {/* deleting overlay */}
         {isDeleting && (
@@ -167,14 +171,8 @@ function ProjectListCard({
           )}
         </div>
 
-        {/* ---------- body (clickable) ---------- */}
-        <div
-          className="project-list-card-clickable-content"
-          role="button"
-          tabIndex={0}
-          onClick={handleCardClick}
-          onKeyDown={(e) => e.key === "Enter" && handleCardClick()}
-        >
+        {/* ---------- body ---------- */}
+        <div className="project-list-card-clickable-content">
           {/* description */}
           <div className="project-list-card-detail-section project-list-card-desc-section">
             <Typography.Paragraph
diff --git a/frontend/src/ide/chat-ai/ChatAI.css b/frontend/src/ide/chat-ai/ChatAI.css
index 4988a75..c2e162a 100644
--- a/frontend/src/ide/chat-ai/ChatAI.css
+++ b/frontend/src/ide/chat-ai/ChatAI.css
@@ -440,6 +440,30 @@
 .chat-ai-info-chip-clickable {
   cursor: pointer;
 }
+.chat-ai-info-chip:has(.chat-ai-schema-select) {
+  padding: 3px 4px 3px 10px;
+}
+.chat-ai-schema-select {
+  max-width: 180px;
+}
+.chat-ai-schema-select.ant-select {
+  height: 16px !important;
+}
+.chat-ai-schema-select .ant-select-selector {
+  padding: 0 !important;
+  height: 16px !important;
+  min-height: unset !important;
+}
+.chat-ai-schema-select .ant-select-selection-item {
+  font-size: 10px !important;
+  line-height: 16px !important;
+  padding-inline-end: 14px !important;
+}
+.chat-ai-schema-select .ant-select-arrow {
+  font-size: 8px !important;
+  right: 0;
+  inset-block-start: 50%;
+}
 .chat-ai-info-chip-error {
   background-color: var(--ant-color-error-bg);
   border-color: var(--ant-color-error-border);
diff --git a/frontend/src/ide/chat-ai/PromptActions.jsx b/frontend/src/ide/chat-ai/PromptActions.jsx
index 107c1d8..5e04c2c 100644
--- a/frontend/src/ide/chat-ai/PromptActions.jsx
+++ b/frontend/src/ide/chat-ai/PromptActions.jsx
@@ -1,5 +1,5 @@
-import { memo, useEffect, useMemo } from "react";
-import { Space, Typography, Select, Switch, Segmented, Tooltip } from "antd";
+import { memo, useCallback, useEffect, useMemo } from "react";
+import { Space, Typography, Select, Switch, Segmented, Tooltip, message } from "antd";
 import {
   ConsoleSqlOutlined,
   DatabaseOutlined,
@@ -8,13 +8,15 @@ import {
   WalletOutlined,
 } from "@ant-design/icons";
 import PropTypes from "prop-types";
+import Cookies from "js-cookie";
 
 import { CHAT_INTENTS } from "./helper";
 import CircularTokenDisplay from "./CircularTokenDisplay";
-import InfoChip from "./InfoChip";
 import { useTokenStore } from "../../store/token-store";
 import { useSessionStore } from "../../store/session-store";
 import { useProjectStore } from "../../store/project-store";
+import { orgStore } from "../../store/org-store";
+import { useAxiosPrivate } from "../../service/axios-service";
 
 // Define hidden intents and a fixed order array
 const HIDDEN_CHAT_INTENTS = ["AUTO", "NOTA", "INFO"];
@@ -53,6 +55,37 @@ const PromptActions = memo(function PromptActions({
   const { tokenBalance, isLoading: isTokenLoading } = useTokenStore();
   const isCloud = useSessionStore((state) => state.sessionDetails?.is_cloud);
   const currentSchema = useProjectStore((state) => state.currentSchema);
+  const setCurrentSchema = useProjectStore((state) => state.setCurrentSchema);
+  const schemaList = useProjectStore((state) => state.schemaList);
+  const projectId = useProjectStore((state) => state.projectId);
+  const { selectedOrgId } = orgStore();
+  const axios = useAxiosPrivate();
+
+  const schemaOptions = useMemo(
+    () => schemaList.map((s) => ({ label: s, value: s })),
+    [schemaList]
+  );
+
+  const handleSchemaChange = useCallback(
+    (value) => {
+      const csrfToken = Cookies.get("csrftoken");
+      axios({
+        url: `/api/v1/visitran/${selectedOrgId || "default_org"}/project/${projectId}/set_schema`,
+        method: "POST",
+        data: { schema_name: value },
+        headers: { "X-CSRFToken": csrfToken },
+      })
+        .then(() => {
+          setCurrentSchema(value);
+          message.success("Schema updated successfully");
+        })
+        .catch((error) => {
+          console.error(error);
+          message.error("Failed to update schema");
+        });
+    },
+    [axios, selectedOrgId, projectId, setCurrentSchema]
+  );
 
   const llmOptions = useMemo(
     () =>
@@ -169,13 +202,22 @@ const PromptActions = memo(function PromptActions({
           </a>
         )}
 
-        {/* Schema indicator */}
-        {currentSchema && (
-          <InfoChip
-            icon={<DatabaseOutlined className="chat-ai-info-chip-icon" />}
-            text={currentSchema}
-            tooltipTitle="All new models generated will be created inside this schema. To modify it, click the settings icon from the left explorer."
-          />
+        {/* Schema selector */}
+        {schemaList.length > 0 && (
+          <div className="chat-ai-info-chip chat-ai-info-chip-clickable">
+            <DatabaseOutlined className="chat-ai-info-chip-icon" />
+            <Select
+              size="small"
+              variant="borderless"
+              showSearch
+              placeholder="Schema"
+              value={currentSchema || undefined}
+              onChange={handleSchemaChange}
+              options={schemaOptions}
+              popupMatchSelectWidth={false}
+              className="chat-ai-schema-select"
+            />
+          </div>
         )}
       </Space>
 
diff --git a/frontend/src/ide/editor/no-code-configuration/configure-source-destination.jsx b/frontend/src/ide/editor/no-code-configuration/configure-source-destination.jsx
index 5a0bc4c..14822af 100644
--- a/frontend/src/ide/editor/no-code-configuration/configure-source-destination.jsx
+++ b/frontend/src/ide/editor/no-code-configuration/configure-source-destination.jsx
@@ -204,178 +204,167 @@ function ConfigureSourceDestination({
   }, [reference]);
   return (
     <>
-      <Card style={{ marginBottom: "16px" }}>
-        <Row
-          className="configure-tables mb-16"
-          gutter={[16, 16]}
-          style={{ position: "relative", marginBottom: 0 }}
+      {/* ---------- Hierarchy ---------- */}
+      <Card style={{ marginBottom: "12px" }}>
+        <h4 style={{ marginTop: 0 }}>
+          <Space>
+            <ApartmentOutlined />
+            Hierarchy
+          </Space>
+        </h4>
+        <Radio.Group
+          value={modelType}
+          onChange={(e) => {
+            const newModelType = e.target.value;
+            if (newModelType === "root") {
+              setPrevReference(reference.length ? reference : []);
+              setReference([]);
+            } else {
+              setReference(
+                prevReference.length ? prevReference : reference
+              );
+            }
+            setModelType(newModelType);
+          }}
+          className="mb-10"
         >
-          <Col
-            span={9}
-            style={{
-              borderRight: `1px solid ${token.colorBorderSecondary}`,
-              paddingRight: "16px",
-              height: "100%",
-              position: "absolute",
-              left: 0,
-              top: 0,
-              bottom: 0,
-              width: "50%",
-            }}
-          >
-            <h4>
-              <Space>
-                <ApartmentOutlined />
-                Hierarchy
-              </Space>
-            </h4>
-            <Radio.Group
-              value={modelType}
-              onChange={(e) => {
-                const newModelType = e.target.value;
-                if (newModelType === "root") {
-                  setPrevReference(reference.length ? reference : []);
-                  setReference([]);
-                } else {
-                  setReference(
-                    prevReference.length ? prevReference : reference
-                  );
+          <Radio value="root">Root model</Radio>
+          <Space>
+            <Radio value="child">Child of</Radio>
+          </Space>
+        </Radio.Group>
+        {modelType === "child" && (
+          <Select
+            mode="multiple"
+            style={{ width: "100%" }}
+            placeholder="Select the model"
+            value={reference}
+            onChange={(value) =>
+              handleChange("reference", value, setReference, false)
+            }
+            options={referenceList}
+            showSearch
+          />
+        )}
+      </Card>
+
+      {/* ---------- Configure Source & Destination ---------- */}
+      <Card
+        className="configure-tables"
+        style={{
+          backgroundColor: token.colorFillTertiary,
+          marginBottom: "12px",
+        }}
+        bodyStyle={{ padding: "12px 16px" }}
+      >
+        <h4 style={{ marginTop: 0 }}>
+          <Space>
+            <DatabaseOutlined />
+            Configure Source
+          </Space>
+        </h4>
+        <Row gutter={[12]}>
+          {isSchemaExists && (
+            <Col span={12}>
+              <Select
+                className="mb-10"
+                style={{ width: "100%" }}
+                placeholder="Select the schema"
+                value={source.schema_name}
+                onChange={(value) =>
+                  handleChange("schema_name", value, setSource)
                 }
-                setModelType(newModelType);
-              }}
+                options={allSchemas.map((value) => ({ value }))}
+                showSearch
+                popupMatchSelectWidth={false}
+                loading={isLoadingSchemas}
+                notFoundContent={
+                  isLoadingSchemas
+                    ? "Loading schemas..."
+                    : "No schemas found"
+                }
+              />
+            </Col>
+          )}
+          <Col span={isSchemaExists ? 12 : 24}>
+            <Select
               className="mb-10"
-            >
-              <Radio value="root">Root model</Radio>
-              <Space>
-                <Radio value="child">Child of</Radio>
-              </Space>
-            </Radio.Group>
-            {modelType === "child" && (
-              <>
-                <Select
-                  mode="multiple"
-                  className="mb-10"
-                  placeholder="Select the model"
-                  value={reference}
-                  onChange={(value) =>
-                    handleChange("reference", value, setReference, false)
-                  }
-                  options={referenceList}
-                  showSearch
-                />
-              </>
-            )}
+              style={{ width: "100%" }}
+              placeholder="Select the table"
+              value={source.table_name}
+              onChange={(value) =>
+                handleChange("table_name", value, setSource)
+              }
+              options={allTables[
+                isSchemaExists ? source.schema_name : "default"
+              ]?.map((value) => ({
+                value,
+              }))}
+              showSearch
+              popupMatchSelectWidth={false}
+              disabled={isSchemaExists && !source.schema_name}
+              loading={
+                isLoadingTables[
+                  isSchemaExists ? source.schema_name : "default"
+                ]
+              }
+              notFoundContent={
+                isLoadingTables[
+                  isSchemaExists ? source.schema_name : "default"
+                ]
+                  ? "Loading tables..."
+                  : "No tables found"
+              }
+            />
           </Col>
-          <Col span={15} style={{ marginLeft: "38%" }}>
-            <Card
-              style={{ backgroundColor: token.colorFillTertiary, padding: 0 }}
-              bodyStyle={{ padding: "0 10px 10px" }}
-            >
-              <h4>
-                <Space>
-                  <DatabaseOutlined />
-                  Configure Source
-                </Space>
-              </h4>
-              <Row gutter={[12]}>
-                {isSchemaExists && (
-                  <Col span={12}>
-                    <Select
-                      className="mb-10"
-                      placeholder="Select the schema"
-                      value={source.schema_name}
-                      onChange={(value) =>
-                        handleChange("schema_name", value, setSource)
-                      }
-                      options={allSchemas.map((value) => ({ value }))}
-                      showSearch
-                      loading={isLoadingSchemas}
-                      notFoundContent={
-                        isLoadingSchemas
-                          ? "Loading schemas..."
-                          : "No schemas found"
-                      }
-                    />
-                  </Col>
-                )}
-                <Col span={isSchemaExists ? 12 : 24}>
-                  <Select
-                    className="mb-10"
-                    placeholder="Select the table"
-                    value={source.table_name}
-                    onChange={(value) =>
-                      handleChange("table_name", value, setSource)
-                    }
-                    options={allTables[
-                      isSchemaExists ? source.schema_name : "default"
-                    ]?.map((value) => ({
-                      value,
-                    }))}
-                    showSearch
-                    disabled={isSchemaExists && !source.schema_name}
-                    loading={
-                      isLoadingTables[
-                        isSchemaExists ? source.schema_name : "default"
-                      ]
-                    }
-                    notFoundContent={
-                      isLoadingTables[
-                        isSchemaExists ? source.schema_name : "default"
-                      ]
-                        ? "Loading tables..."
-                        : "No tables found"
-                    }
-                  />
-                </Col>
-              </Row>
-              <Divider />
-              <h4>
-                <Space>
-                  <ApiOutlined />
-                  Configure Destination
-                </Space>
-              </h4>
-              <Row gutter={[12]}>
-                {isSchemaExists && (
-                  <Col span={12}>
-                    <Select
-                      className="mb-10 width-100"
-                      placeholder="Select the schema"
-                      value={model.schema_name}
-                      onChange={(value) =>
-                        handleChange("schema_name", value, setModel, false)
-                      }
-                      options={allSchemas.map((value) => ({ value }))}
-                      showSearch
-                      loading={isLoadingSchemas}
-                      notFoundContent={
-                        isLoadingSchemas
-                          ? "Loading schemas..."
-                          : "No schemas found"
-                      }
-                    />
-                  </Col>
-                )}
-                <Col span={isSchemaExists ? 12 : 24}>
-                  <AutoComplete
-                    className="mb-10 width-100"
-                    placeholder="Select the table"
-                    value={model.table_name}
-                    onChange={(value) => {
-                      // Block spaces by replacing them with an empty string
-                      const noSpacesValue = value.replace(/\s/g, "");
-                      handleChange(
-                        "table_name",
-                        noSpacesValue,
-                        setModel,
-                        false
-                      );
-                    }}
-                    disabled={isSchemaExists && !model.schema_name}
-                  />
-                </Col>
-              </Row>
-            </Card>
+        </Row>
+        <Divider />
+        <h4>
+          <Space>
+            <ApiOutlined />
+            Configure Destination
+          </Space>
+        </h4>
+        <Row gutter={[12]}>
+          {isSchemaExists && (
+            <Col span={12}>
+              <Select
+                className="mb-10"
+                style={{ width: "100%" }}
+                placeholder="Select the schema"
+                value={model.schema_name}
+                onChange={(value) =>
+                  handleChange("schema_name", value, setModel, false)
+                }
+                options={allSchemas.map((value) => ({ value }))}
+                showSearch
+                popupMatchSelectWidth={false}
+                loading={isLoadingSchemas}
+                notFoundContent={
+                  isLoadingSchemas
+                    ? "Loading schemas..."
+                    : "No schemas found"
+                }
+              />
+            </Col>
+          )}
+          <Col span={isSchemaExists ? 12 : 24}>
+            <AutoComplete
+              className="mb-10"
+              style={{ width: "100%" }}
+              placeholder="Select the table"
+              value={model.table_name}
+              onChange={(value) => {
+                const noSpacesValue = value.replace(/\s/g, "");
+                handleChange(
+                  "table_name",
+                  noSpacesValue,
+                  setModel,
+                  false
+                );
+              }}
+              disabled={isSchemaExists && !model.schema_name}
+            />
           </Col>
         </Row>
       </Card>
diff --git a/frontend/src/ide/editor/no-code-model/no-code-model.css b/frontend/src/ide/editor/no-code-model/no-code-model.css
index 677d255..e0287b8 100644
--- a/frontend/src/ide/editor/no-code-model/no-code-model.css
+++ b/frontend/src/ide/editor/no-code-model/no-code-model.css
@@ -681,7 +681,8 @@
   justify-content: space-between;
   align-items: center;
   padding-block: 8px;
-  overflow-x: auto;
+  flex-wrap: wrap;
+  gap: 8px;
 }
 
 .custom-pagination-container .custom-pagination .ant-pagination-options {
diff --git a/frontend/src/ide/editor/no-code-toolbar/no-code-toolbar.css b/frontend/src/ide/editor/no-code-toolbar/no-code-toolbar.css
index 90f0f05..d401063 100644
--- a/frontend/src/ide/editor/no-code-toolbar/no-code-toolbar.css
+++ b/frontend/src/ide/editor/no-code-toolbar/no-code-toolbar.css
@@ -9,9 +9,16 @@
   flex: 1;
   overflow: hidden;
   scroll-behavior: smooth;
-  padding: 12px 0px 8px;
+  padding: 6px 12px;
+  margin-bottom: 6px;
   display: flex;
   align-items: center;
+  background-color: var(--menu-items-bg);
+  border-radius: 6px;
+}
+
+.no-code-toolbar-content > .ant-space {
+  padding-top: 11px;
 }
 
 /* Hidden toolbar items (overflow) */
diff --git a/frontend/src/ide/explorer/explorer-component.jsx b/frontend/src/ide/explorer/explorer-component.jsx
index 83ef24a..a578fdc 100644
--- a/frontend/src/ide/explorer/explorer-component.jsx
+++ b/frontend/src/ide/explorer/explorer-component.jsx
@@ -82,6 +82,7 @@ const IdeExplorer = ({
   } = useProjectStore();
   const currentSchema = useProjectStore((state) => state.currentSchema);
   const setCurrentSchema = useProjectStore((state) => state.setCurrentSchema);
+  const setSchemaList = useProjectStore((state) => state.setSchemaList);
 
   // Reset currentSchema on unmount to prevent stale data
   useEffect(() => {
@@ -308,6 +309,9 @@ const IdeExplorer = ({
           setCurrentSchema("");
         }
 
+        // Store plain schema list in shared store
+        setSchemaList(allSchemas);
+
         const items = allSchemas.map((el) => ({
           label: el,
           key: el,
diff --git a/frontend/src/store/project-store.js b/frontend/src/store/project-store.js
index e99f8d6..67be3b8 100644
--- a/frontend/src/store/project-store.js
+++ b/frontend/src/store/project-store.js
@@ -9,6 +9,7 @@ const STORE_VARIABLES = {
   projectId: "",
   renamedModel: {},
   currentSchema: "",
+  schemaList: [],
 };
 
 const useProjectStore = create(
@@ -71,6 +72,11 @@ const useProjectStore = create(
           return { currentSchema: schema };
         });
       },
+      setSchemaList: (list) => {
+        setState(() => {
+          return { schemaList: list };
+        });
+      },
     }),
     {
       name: "project-tab-storage",

From fdff7fc976a1d3f76d3b86fdab1e63b8e97d9d95 Mon Sep 17 00:00:00 2001
From: wicky <130177258+wicky-zipstack@users.noreply.github.com>
Date: Fri, 10 Apr 2026 19:37:16 +0530
Subject: [PATCH 2/4] feat: UI/UX improvements and unified schema selector

- Make entire project card clickable (header + body), with stopPropagation on action buttons
- Redesign Model Configuration modal: Hierarchy on top, Source/Destination below, full width dropdowns
- Increase project_schema max_length from 20 to 1024
- Fix table pagination wrapping to new line instead of horizontal overflow
- Add distinct background color to toolbar (Filter, Sort, etc.) with light/dark theme support
- Replace AI chat schema tooltip with interactive dropdown selector
- Sync schema selection bidirectionally across AI Chat, Explorer, and Seeds via shared store
- Move inline styles to CSS classes, lint cleanup
---
 frontend/src/ide/chat-ai/PromptActions.jsx    | 14 +++++-
 .../configure-source-destination.jsx          | 46 +++++--------------
 .../editor/no-code-model/no-code-model.css    |  9 ++++
 3 files changed, 32 insertions(+), 37 deletions(-)

diff --git a/frontend/src/ide/chat-ai/PromptActions.jsx b/frontend/src/ide/chat-ai/PromptActions.jsx
index 5e04c2c..2fbe202 100644
--- a/frontend/src/ide/chat-ai/PromptActions.jsx
+++ b/frontend/src/ide/chat-ai/PromptActions.jsx
@@ -1,5 +1,13 @@
 import { memo, useCallback, useEffect, useMemo } from "react";
-import { Space, Typography, Select, Switch, Segmented, Tooltip, message } from "antd";
+import {
+  Space,
+  Typography,
+  Select,
+  Switch,
+  Segmented,
+  Tooltip,
+  message,
+} from "antd";
 import {
   ConsoleSqlOutlined,
   DatabaseOutlined,
@@ -70,7 +78,9 @@ const PromptActions = memo(function PromptActions({
     (value) => {
       const csrfToken = Cookies.get("csrftoken");
       axios({
-        url: `/api/v1/visitran/${selectedOrgId || "default_org"}/project/${projectId}/set_schema`,
+        url: `/api/v1/visitran/${
+          selectedOrgId || "default_org"
+        }/project/${projectId}/set_schema`,
         method: "POST",
         data: { schema_name: value },
         headers: { "X-CSRFToken": csrfToken },
diff --git a/frontend/src/ide/editor/no-code-configuration/configure-source-destination.jsx b/frontend/src/ide/editor/no-code-configuration/configure-source-destination.jsx
index 14822af..89f434f 100644
--- a/frontend/src/ide/editor/no-code-configuration/configure-source-destination.jsx
+++ b/frontend/src/ide/editor/no-code-configuration/configure-source-destination.jsx
@@ -205,7 +205,7 @@ function ConfigureSourceDestination({
   return (
     <>
       {/* ---------- Hierarchy ---------- */}
-      <Card style={{ marginBottom: "12px" }}>
+      <Card className="configure-section-card configure-tables">
         <h4 style={{ marginTop: 0 }}>
           <Space>
             <ApartmentOutlined />
@@ -220,9 +220,7 @@ function ConfigureSourceDestination({
               setPrevReference(reference.length ? reference : []);
               setReference([]);
             } else {
-              setReference(
-                prevReference.length ? prevReference : reference
-              );
+              setReference(prevReference.length ? prevReference : reference);
             }
             setModelType(newModelType);
           }}
@@ -236,7 +234,6 @@ function ConfigureSourceDestination({
         {modelType === "child" && (
           <Select
             mode="multiple"
-            style={{ width: "100%" }}
             placeholder="Select the model"
             value={reference}
             onChange={(value) =>
@@ -244,17 +241,15 @@ function ConfigureSourceDestination({
             }
             options={referenceList}
             showSearch
+            popupMatchSelectWidth={false}
           />
         )}
       </Card>
 
       {/* ---------- Configure Source & Destination ---------- */}
       <Card
-        className="configure-tables"
-        style={{
-          backgroundColor: token.colorFillTertiary,
-          marginBottom: "12px",
-        }}
+        className="configure-tables configure-section-card"
+        style={{ backgroundColor: token.colorFillTertiary }}
         bodyStyle={{ padding: "12px 16px" }}
       >
         <h4 style={{ marginTop: 0 }}>
@@ -268,7 +263,6 @@ function ConfigureSourceDestination({
             <Col span={12}>
               <Select
                 className="mb-10"
-                style={{ width: "100%" }}
                 placeholder="Select the schema"
                 value={source.schema_name}
                 onChange={(value) =>
@@ -279,9 +273,7 @@ function ConfigureSourceDestination({
                 popupMatchSelectWidth={false}
                 loading={isLoadingSchemas}
                 notFoundContent={
-                  isLoadingSchemas
-                    ? "Loading schemas..."
-                    : "No schemas found"
+                  isLoadingSchemas ? "Loading schemas..." : "No schemas found"
                 }
               />
             </Col>
@@ -289,12 +281,9 @@ function ConfigureSourceDestination({
           <Col span={isSchemaExists ? 12 : 24}>
             <Select
               className="mb-10"
-              style={{ width: "100%" }}
               placeholder="Select the table"
               value={source.table_name}
-              onChange={(value) =>
-                handleChange("table_name", value, setSource)
-              }
+              onChange={(value) => handleChange("table_name", value, setSource)}
               options={allTables[
                 isSchemaExists ? source.schema_name : "default"
               ]?.map((value) => ({
@@ -304,14 +293,10 @@ function ConfigureSourceDestination({
               popupMatchSelectWidth={false}
               disabled={isSchemaExists && !source.schema_name}
               loading={
-                isLoadingTables[
-                  isSchemaExists ? source.schema_name : "default"
-                ]
+                isLoadingTables[isSchemaExists ? source.schema_name : "default"]
               }
               notFoundContent={
-                isLoadingTables[
-                  isSchemaExists ? source.schema_name : "default"
-                ]
+                isLoadingTables[isSchemaExists ? source.schema_name : "default"]
                   ? "Loading tables..."
                   : "No tables found"
               }
@@ -330,7 +315,6 @@ function ConfigureSourceDestination({
             <Col span={12}>
               <Select
                 className="mb-10"
-                style={{ width: "100%" }}
                 placeholder="Select the schema"
                 value={model.schema_name}
                 onChange={(value) =>
@@ -341,9 +325,7 @@ function ConfigureSourceDestination({
                 popupMatchSelectWidth={false}
                 loading={isLoadingSchemas}
                 notFoundContent={
-                  isLoadingSchemas
-                    ? "Loading schemas..."
-                    : "No schemas found"
+                  isLoadingSchemas ? "Loading schemas..." : "No schemas found"
                 }
               />
             </Col>
@@ -351,17 +333,11 @@ function ConfigureSourceDestination({
           <Col span={isSchemaExists ? 12 : 24}>
             <AutoComplete
               className="mb-10"
-              style={{ width: "100%" }}
               placeholder="Select the table"
               value={model.table_name}
               onChange={(value) => {
                 const noSpacesValue = value.replace(/\s/g, "");
-                handleChange(
-                  "table_name",
-                  noSpacesValue,
-                  setModel,
-                  false
-                );
+                handleChange("table_name", noSpacesValue, setModel, false);
               }}
               disabled={isSchemaExists && !model.schema_name}
             />
diff --git a/frontend/src/ide/editor/no-code-model/no-code-model.css b/frontend/src/ide/editor/no-code-model/no-code-model.css
index e0287b8..0c710ea 100644
--- a/frontend/src/ide/editor/no-code-model/no-code-model.css
+++ b/frontend/src/ide/editor/no-code-model/no-code-model.css
@@ -121,10 +121,19 @@
 
 .configure-tables .ant-space,
 .configure-tables .ant-select,
+.configure-tables .ant-select-auto-complete,
 .width-100-percent {
   width: 100% !important;
 }
 
+.configure-section-card {
+  margin-bottom: 12px;
+}
+
+.configure-section-card h4:first-child {
+  margin-top: 0;
+}
+
 .search-icon {
   margin-left: -3px;
   margin-right: 12px;

From 0e4e42486cad99390c4ac16957f671262a6f0b60 Mon Sep 17 00:00:00 2001
From: wicky <130177258+wicky-zipstack@users.noreply.github.com>
Date: Fri, 10 Apr 2026 22:18:10 +0530
Subject: [PATCH 3/4] =?UTF-8?q?fix:=20address=20PR=20review=20=E2=80=94=20?=
 =?UTF-8?q?stopPropagation=20on=20avatar=20onKeyDown,=20replace=20deprecat?=
 =?UTF-8?q?ed=20bodyStyle?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add e.stopPropagation() to shared-user avatar onKeyDown handler to prevent card navigation on Enter
- Replace deprecated bodyStyle prop with styles={{ body: {...} }} for Ant Design v5 compatibility
---
 frontend/src/base/components/project-list/ProjectListCard.jsx   | 1 +
 .../no-code-configuration/configure-source-destination.jsx      | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/src/base/components/project-list/ProjectListCard.jsx b/frontend/src/base/components/project-list/ProjectListCard.jsx
index 6cfaa92..f180428 100644
--- a/frontend/src/base/components/project-list/ProjectListCard.jsx
+++ b/frontend/src/base/components/project-list/ProjectListCard.jsx
@@ -145,6 +145,7 @@ function ProjectListCard({
                 if (ShareProjectModal) setIsShareModalOpen(true);
               }}
               onKeyDown={(e) => {
+                e.stopPropagation();
                 if (e.key === "Enter" && ShareProjectModal)
                   setIsShareModalOpen(true);
               }}
diff --git a/frontend/src/ide/editor/no-code-configuration/configure-source-destination.jsx b/frontend/src/ide/editor/no-code-configuration/configure-source-destination.jsx
index 89f434f..99f860d 100644
--- a/frontend/src/ide/editor/no-code-configuration/configure-source-destination.jsx
+++ b/frontend/src/ide/editor/no-code-configuration/configure-source-destination.jsx
@@ -250,7 +250,7 @@ function ConfigureSourceDestination({
       <Card
         className="configure-tables configure-section-card"
         style={{ backgroundColor: token.colorFillTertiary }}
-        bodyStyle={{ padding: "12px 16px" }}
+        styles={{ body: { padding: "12px 16px" } }}
       >
         <h4 style={{ marginTop: 0 }}>
           <Space>

From 917ed8a49ac82ee0e9f237dcb5e515350896c748 Mon Sep 17 00:00:00 2001
From: wicky <130177258+wicky-zipstack@users.noreply.github.com>
Date: Mon, 13 Apr 2026 13:49:31 +0530
Subject: [PATCH 4/4] fix: address PR #55 review feedback

- Remove unused .project-list-card-clickable-content CSS class
- Reduce !important usage in schema select styles, increase specificity instead
- Replace duplicate API call with explorerService.setProjectSchema
- Replace message.success/error with useNotificationService for consistency
- Show error InfoChip when schema list is empty instead of hiding dropdown
- Revert project_schema max_length change (will be added to PR #54 with migration)
---
 .../backend/core/models/project_details.py    |  2 +-
 .../project-list/ProjectListCard.css          |  4 --
 frontend/src/ide/chat-ai/ChatAI.css           | 19 ++++----
 frontend/src/ide/chat-ai/PromptActions.jsx    | 46 ++++++++-----------
 4 files changed, 30 insertions(+), 41 deletions(-)

diff --git a/backend/backend/core/models/project_details.py b/backend/backend/core/models/project_details.py
index e26804d..02659de 100644
--- a/backend/backend/core/models/project_details.py
+++ b/backend/backend/core/models/project_details.py
@@ -102,7 +102,7 @@ def delete(self, *args, **kwargs):
     project_path = models.CharField(max_length=100)
     profile_path = models.CharField(max_length=100)
 
-    project_schema = models.CharField(max_length=1024, blank=True, null=True)
+    project_schema = models.CharField(max_length=20, blank=True, null=True)
     # User specific access control fields
     created_by = models.JSONField(default=dict)
     created_at = models.DateTimeField(auto_now_add=True)
diff --git a/frontend/src/base/components/project-list/ProjectListCard.css b/frontend/src/base/components/project-list/ProjectListCard.css
index 6878ebf..53577fd 100644
--- a/frontend/src/base/components/project-list/ProjectListCard.css
+++ b/frontend/src/base/components/project-list/ProjectListCard.css
@@ -171,10 +171,6 @@
 }
 
 /* ---------- body ---------- */
-.project-list-card-clickable-content {
-  /* clickable via parent wrapper */
-}
-
 .project-list-card-detail-section {
   padding: 12px 14px;
 }
diff --git a/frontend/src/ide/chat-ai/ChatAI.css b/frontend/src/ide/chat-ai/ChatAI.css
index c2e162a..4ebeaba 100644
--- a/frontend/src/ide/chat-ai/ChatAI.css
+++ b/frontend/src/ide/chat-ai/ChatAI.css
@@ -443,24 +443,25 @@
 .chat-ai-info-chip:has(.chat-ai-schema-select) {
   padding: 3px 4px 3px 10px;
 }
-.chat-ai-schema-select {
+/* Schema select inside info chip — !important needed to override Ant Design inline styles */
+.chat-ai-info-chip .chat-ai-schema-select {
   max-width: 180px;
 }
-.chat-ai-schema-select.ant-select {
+.chat-ai-info-chip .chat-ai-schema-select.ant-select {
   height: 16px !important;
 }
-.chat-ai-schema-select .ant-select-selector {
+.chat-ai-info-chip .chat-ai-schema-select .ant-select-selector {
   padding: 0 !important;
   height: 16px !important;
   min-height: unset !important;
 }
-.chat-ai-schema-select .ant-select-selection-item {
-  font-size: 10px !important;
-  line-height: 16px !important;
-  padding-inline-end: 14px !important;
+.chat-ai-info-chip .chat-ai-schema-select .ant-select-selection-item {
+  font-size: 10px;
+  line-height: 16px;
+  padding-inline-end: 14px;
 }
-.chat-ai-schema-select .ant-select-arrow {
-  font-size: 8px !important;
+.chat-ai-info-chip .chat-ai-schema-select .ant-select-arrow {
+  font-size: 8px;
   right: 0;
   inset-block-start: 50%;
 }
diff --git a/frontend/src/ide/chat-ai/PromptActions.jsx b/frontend/src/ide/chat-ai/PromptActions.jsx
index 2fbe202..16e1578 100644
--- a/frontend/src/ide/chat-ai/PromptActions.jsx
+++ b/frontend/src/ide/chat-ai/PromptActions.jsx
@@ -1,13 +1,5 @@
 import { memo, useCallback, useEffect, useMemo } from "react";
-import {
-  Space,
-  Typography,
-  Select,
-  Switch,
-  Segmented,
-  Tooltip,
-  message,
-} from "antd";
+import { Space, Typography, Select, Switch, Segmented, Tooltip } from "antd";
 import {
   ConsoleSqlOutlined,
   DatabaseOutlined,
@@ -16,15 +8,15 @@ import {
   WalletOutlined,
 } from "@ant-design/icons";
 import PropTypes from "prop-types";
-import Cookies from "js-cookie";
 
 import { CHAT_INTENTS } from "./helper";
 import CircularTokenDisplay from "./CircularTokenDisplay";
+import InfoChip from "./InfoChip";
 import { useTokenStore } from "../../store/token-store";
 import { useSessionStore } from "../../store/session-store";
 import { useProjectStore } from "../../store/project-store";
-import { orgStore } from "../../store/org-store";
-import { useAxiosPrivate } from "../../service/axios-service";
+import { explorerService } from "../explorer/explorer-service";
+import { useNotificationService } from "../../service/notification-service";
 
 // Define hidden intents and a fixed order array
 const HIDDEN_CHAT_INTENTS = ["AUTO", "NOTA", "INFO"];
@@ -66,8 +58,8 @@ const PromptActions = memo(function PromptActions({
   const setCurrentSchema = useProjectStore((state) => state.setCurrentSchema);
   const schemaList = useProjectStore((state) => state.schemaList);
   const projectId = useProjectStore((state) => state.projectId);
-  const { selectedOrgId } = orgStore();
-  const axios = useAxiosPrivate();
+  const expService = explorerService();
+  const { notify } = useNotificationService();
 
   const schemaOptions = useMemo(
     () => schemaList.map((s) => ({ label: s, value: s })),
@@ -76,25 +68,18 @@ const PromptActions = memo(function PromptActions({
 
   const handleSchemaChange = useCallback(
     (value) => {
-      const csrfToken = Cookies.get("csrftoken");
-      axios({
-        url: `/api/v1/visitran/${
-          selectedOrgId || "default_org"
-        }/project/${projectId}/set_schema`,
-        method: "POST",
-        data: { schema_name: value },
-        headers: { "X-CSRFToken": csrfToken },
-      })
+      expService
+        .setProjectSchema(projectId, value)
         .then(() => {
           setCurrentSchema(value);
-          message.success("Schema updated successfully");
+          notify({ type: "success", message: "Schema updated successfully" });
         })
         .catch((error) => {
           console.error(error);
-          message.error("Failed to update schema");
+          notify({ error });
         });
     },
-    [axios, selectedOrgId, projectId, setCurrentSchema]
+    [expService, projectId, setCurrentSchema, notify]
   );
 
   const llmOptions = useMemo(
@@ -213,7 +198,7 @@ const PromptActions = memo(function PromptActions({
         )}
 
         {/* Schema selector */}
-        {schemaList.length > 0 && (
+        {schemaList.length > 0 ? (
           <div className="chat-ai-info-chip chat-ai-info-chip-clickable">
             <DatabaseOutlined className="chat-ai-info-chip-icon" />
             <Select
@@ -228,6 +213,13 @@ const PromptActions = memo(function PromptActions({
               className="chat-ai-schema-select"
             />
           </div>
+        ) : (
+          <InfoChip
+            icon={<DatabaseOutlined className="chat-ai-info-chip-icon" />}
+            text="No schema"
+            tooltipTitle="No schemas available. Please configure a database connection and select a schema from the explorer."
+            className="chat-ai-info-chip-error"
+          />
         )}
       </Space>