From 64ba23688bdbcf5c171393f50f0918114d780b8e Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Wed, 16 Jul 2025 21:52:25 +0530
Subject: [PATCH] feat: New GuardRails and Response Guidelines edit page
 (#11932)

---
 .../captain/SettingsPageLayout.vue            |   4 +-
 .../assistant/AddNewRulesDialog.story.vue     |  21 ++
 .../captain/assistant/AddNewRulesDialog.vue   |  77 +++++
 .../assistant/AddNewRulesInput.story.vue      |  19 ++
 .../captain/assistant/AddNewRulesInput.vue    |  51 +++
 .../captain/assistant/BulkSelectBar.vue       |  99 ++++++
 .../captain/assistant/RuleCard.story.vue      |  37 ++
 .../captain/assistant/RuleCard.vue            |  94 ++++++
 .../assistant/SuggestedRules.story.vue        |  46 +++
 .../captain/assistant/SuggestedRules.vue      |  63 ++++
 .../i18n/locale/en/integrations.json          |  94 ++++++
 .../captain/assistants/guardrails/Index.vue   | 296 ++++++++++++++++
 .../captain/assistants/guidelines/Index.vue   | 318 ++++++++++++++++++
 .../captain/assistants/settings/Settings.vue  |   4 +-
 .../dashboard/captain/captain.routes.js       |  32 ++
 .../accounts/captain/assistants_controller.rb |   5 +-
 16 files changed, 1254 insertions(+), 6 deletions(-)
 create mode 100644 app/javascript/dashboard/components-next/captain/assistant/AddNewRulesDialog.story.vue
 create mode 100644 app/javascript/dashboard/components-next/captain/assistant/AddNewRulesDialog.vue
 create mode 100644 app/javascript/dashboard/components-next/captain/assistant/AddNewRulesInput.story.vue
 create mode 100644 app/javascript/dashboard/components-next/captain/assistant/AddNewRulesInput.vue
 create mode 100644 app/javascript/dashboard/components-next/captain/assistant/BulkSelectBar.vue
 create mode 100644 app/javascript/dashboard/components-next/captain/assistant/RuleCard.story.vue
 create mode 100644 app/javascript/dashboard/components-next/captain/assistant/RuleCard.vue
 create mode 100644 app/javascript/dashboard/components-next/captain/assistant/SuggestedRules.story.vue
 create mode 100644 app/javascript/dashboard/components-next/captain/assistant/SuggestedRules.vue
 create mode 100644 app/javascript/dashboard/routes/dashboard/captain/assistants/guardrails/Index.vue
 create mode 100644 app/javascript/dashboard/routes/dashboard/captain/assistants/guidelines/Index.vue

diff --git a/app/javascript/dashboard/components-next/captain/SettingsPageLayout.vue b/app/javascript/dashboard/components-next/captain/SettingsPageLayout.vue
index 4a48794b3..aca5ce7b8 100644
--- a/app/javascript/dashboard/components-next/captain/SettingsPageLayout.vue
+++ b/app/javascript/dashboard/components-next/captain/SettingsPageLayout.vue
@@ -52,9 +52,9 @@ const handleBreadcrumbClick = item => {
 
 <template>
   <section
-    class="my-4 px-10 flex flex-col w-full h-screen overflow-y-auto bg-n-background"
+    class="mt-4 px-10 flex flex-col w-full h-screen overflow-y-auto bg-n-background"
   >
-    <div class="max-w-[60rem] mx-auto flex flex-col w-full h-full">
+    <div class="max-w-[60rem] mx-auto flex flex-col w-full h-full mb-4">
       <header class="mb-7 sticky top-0 z-10 bg-n-background">
         <Breadcrumb :items="breadcrumbItems" @click="handleBreadcrumbClick" />
       </header>
diff --git a/app/javascript/dashboard/components-next/captain/assistant/AddNewRulesDialog.story.vue b/app/javascript/dashboard/components-next/captain/assistant/AddNewRulesDialog.story.vue
new file mode 100644
index 000000000..b6680431b
--- /dev/null
+++ b/app/javascript/dashboard/components-next/captain/assistant/AddNewRulesDialog.story.vue
@@ -0,0 +1,21 @@
+<script setup>
+import AddNewRulesDialog from './AddNewRulesDialog.vue';
+</script>
+
+<template>
+  <Story
+    title="Captain/Assistant/AddNewRulesDialog"
+    :layout="{ type: 'grid', width: '800px' }"
+  >
+    <Variant title="Default">
+      <div class="px-4 py-4 bg-n-background h-[200px]">
+        <AddNewRulesDialog
+          button-label="Add a guardrail"
+          placeholder="Type in another guardrail..."
+          confirm-label="Create"
+          cancel-label="Cancel"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>
diff --git a/app/javascript/dashboard/components-next/captain/assistant/AddNewRulesDialog.vue b/app/javascript/dashboard/components-next/captain/assistant/AddNewRulesDialog.vue
new file mode 100644
index 000000000..ecdb2d654
--- /dev/null
+++ b/app/javascript/dashboard/components-next/captain/assistant/AddNewRulesDialog.vue
@@ -0,0 +1,77 @@
+<script setup>
+import { useToggle } from '@vueuse/core';
+
+import Button from 'dashboard/components-next/button/Button.vue';
+import InlineInput from 'dashboard/components-next/inline-input/InlineInput.vue';
+
+defineProps({
+  placeholder: {
+    type: String,
+    default: '',
+  },
+  buttonLabel: {
+    type: String,
+    default: '',
+  },
+  confirmLabel: {
+    type: String,
+    default: '',
+  },
+  cancelLabel: {
+    type: String,
+    default: '',
+  },
+});
+
+const emit = defineEmits(['add']);
+
+const modelValue = defineModel({
+  type: String,
+  default: '',
+});
+
+const [showPopover, togglePopover] = useToggle();
+const onClickAdd = () => {
+  if (!modelValue.value?.trim()) return;
+  emit('add', modelValue.value.trim());
+  modelValue.value = '';
+  togglePopover(false);
+};
+
+const onClickCancel = () => {
+  togglePopover(false);
+};
+</script>
+
+<template>
+  <div class="inline-flex relative">
+    <Button
+      :label="buttonLabel"
+      sm
+      slate
+      class="flex-shrink-0"
+      @click="togglePopover(!showPopover)"
+    />
+    <div
+      v-if="showPopover"
+      class="absolute w-[26.5rem] top-9 z-50 ltr:left-0 rtl:right-0 flex flex-col gap-5 bg-n-alpha-3 backdrop-blur-[100px] p-4 rounded-xl border border-n-weak shadow-md"
+    >
+      <InlineInput
+        v-model="modelValue"
+        :placeholder="placeholder"
+        @keyup.enter="onClickAdd"
+      />
+      <div class="flex gap-2 justify-between">
+        <Button
+          :label="cancelLabel"
+          sm
+          link
+          slate
+          class="h-10 hover:!no-underline"
+          @click="onClickCancel"
+        />
+        <Button :label="confirmLabel" sm @click="onClickAdd" />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/captain/assistant/AddNewRulesInput.story.vue b/app/javascript/dashboard/components-next/captain/assistant/AddNewRulesInput.story.vue
new file mode 100644
index 000000000..ea7afff56
--- /dev/null
+++ b/app/javascript/dashboard/components-next/captain/assistant/AddNewRulesInput.story.vue
@@ -0,0 +1,19 @@
+<script setup>
+import AddNewRulesInput from './AddNewRulesInput.vue';
+</script>
+
+<template>
+  <Story
+    title="Captain/Assistant/AddNewRulesInput"
+    :layout="{ type: 'grid', width: '800px' }"
+  >
+    <Variant title="Default">
+      <div class="px-6 py-4 bg-n-background">
+        <AddNewRulesInput
+          placeholder="Type in another response guideline..."
+          label="Add and save (↵)"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>
diff --git a/app/javascript/dashboard/components-next/captain/assistant/AddNewRulesInput.vue b/app/javascript/dashboard/components-next/captain/assistant/AddNewRulesInput.vue
new file mode 100644
index 000000000..802618b0e
--- /dev/null
+++ b/app/javascript/dashboard/components-next/captain/assistant/AddNewRulesInput.vue
@@ -0,0 +1,51 @@
+<script setup>
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+import InlineInput from 'dashboard/components-next/inline-input/InlineInput.vue';
+
+defineProps({
+  placeholder: {
+    type: String,
+    default: '',
+  },
+  label: {
+    type: String,
+    default: '',
+  },
+});
+
+const emit = defineEmits(['add']);
+
+const modelValue = defineModel({
+  type: String,
+  default: '',
+});
+
+const onClickAdd = () => {
+  if (!modelValue.value?.trim()) return;
+  emit('add', modelValue.value.trim());
+  modelValue.value = '';
+};
+</script>
+
+<template>
+  <div
+    class="flex py-3 ltr:pl-3 h-16 rtl:pr-3 ltr:pr-4 rtl:pl-4 items-center gap-3 rounded-xl bg-n-solid-2 outline-1 outline outline-n-container"
+  >
+    <Icon icon="i-lucide-plus" class="text-n-slate-10 size-5 flex-shrink-0" />
+
+    <InlineInput
+      v-model="modelValue"
+      :placeholder="placeholder"
+      @keyup.enter="onClickAdd"
+    />
+    <Button
+      :label="label"
+      ghost
+      xs
+      slate
+      class="!text-sm !text-n-slate-11 flex-shrink-0"
+      @click="onClickAdd"
+    />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/captain/assistant/BulkSelectBar.vue b/app/javascript/dashboard/components-next/captain/assistant/BulkSelectBar.vue
new file mode 100644
index 000000000..94cab9a33
--- /dev/null
+++ b/app/javascript/dashboard/components-next/captain/assistant/BulkSelectBar.vue
@@ -0,0 +1,99 @@
+<script setup>
+import { computed } from 'vue';
+import Checkbox from 'dashboard/components-next/checkbox/Checkbox.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+
+const props = defineProps({
+  allItems: {
+    type: Array,
+    required: true,
+  },
+  selectAllLabel: {
+    type: String,
+    default: '',
+  },
+  selectedCountLabel: {
+    type: String,
+    default: '',
+  },
+  deleteLabel: {
+    type: String,
+    default: 'Delete',
+  },
+});
+
+const emit = defineEmits(['bulkDelete']);
+
+const modelValue = defineModel({
+  type: Set,
+  default: () => new Set(),
+});
+
+const selectedCount = computed(() => modelValue.value.size);
+const totalCount = computed(() => props.allItems.length);
+
+const hasSelected = computed(() => selectedCount.value > 0);
+const isIndeterminate = computed(
+  () => hasSelected.value && selectedCount.value < totalCount.value
+);
+const allSelected = computed(
+  () => totalCount.value > 0 && selectedCount.value === totalCount.value
+);
+
+const bulkCheckboxState = computed({
+  get: () => allSelected.value,
+  set: shouldSelectAll => {
+    const newSelectedIds = shouldSelectAll
+      ? new Set(props.allItems.map(item => item.id))
+      : new Set();
+    modelValue.value = newSelectedIds;
+  },
+});
+</script>
+
+<template>
+  <transition
+    name="slide-fade"
+    enter-active-class="transition-all duration-300 ease-out"
+    enter-from-class="opacity-0 transform ltr:-translate-x-4 rtl:translate-x-4"
+    enter-to-class="opacity-100 transform translate-x-0"
+    leave-active-class="hidden opacity-0"
+  >
+    <div
+      v-if="hasSelected"
+      class="flex items-center gap-3 py-1 ltr:pl-3 rtl:pr-3 ltr:pr-4 rtl:pl-4 rounded-lg bg-n-solid-2 outline outline-1 outline-n-container shadow"
+    >
+      <div class="flex items-center gap-3">
+        <div class="flex items-center gap-1.5">
+          <Checkbox
+            v-model="bulkCheckboxState"
+            :indeterminate="isIndeterminate"
+          />
+          <span class="text-sm font-medium text-n-slate-12 tabular-nums">
+            {{ selectAllLabel }}
+          </span>
+        </div>
+        <span class="text-sm text-n-slate-10 tabular-nums">
+          {{ selectedCountLabel }}
+        </span>
+      </div>
+      <div class="h-4 w-px bg-n-strong" />
+      <div class="flex items-center gap-3">
+        <slot name="actions" :selected-count="selectedCount">
+          <Button
+            :label="deleteLabel"
+            sm
+            ruby
+            ghost
+            class="!px-1.5"
+            icon="i-lucide-trash"
+            @click="emit('bulkDelete')"
+          />
+        </slot>
+      </div>
+    </div>
+    <div v-else class="flex items-center gap-3">
+      <slot name="default-actions" />
+    </div>
+  </transition>
+</template>
diff --git a/app/javascript/dashboard/components-next/captain/assistant/RuleCard.story.vue b/app/javascript/dashboard/components-next/captain/assistant/RuleCard.story.vue
new file mode 100644
index 000000000..149478def
--- /dev/null
+++ b/app/javascript/dashboard/components-next/captain/assistant/RuleCard.story.vue
@@ -0,0 +1,37 @@
+<script setup>
+import RuleCard from './RuleCard.vue';
+
+const sampleRules = [
+  { id: 1, content: 'Block sensitive personal information', selectable: true },
+  { id: 2, content: 'Reject offensive language', selectable: true },
+  { id: 3, content: 'Deflect legal or medical advice', selectable: true },
+];
+</script>
+
+<template>
+  <Story
+    title="Captain/Assistant/RuleCard"
+    :layout="{ type: 'grid', width: '800px' }"
+  >
+    <Variant title="Selectable List">
+      <div class="flex flex-col gap-4 px-20 py-4 bg-n-background">
+        <RuleCard
+          v-for="rule in sampleRules"
+          :id="rule.id"
+          :key="rule.id"
+          :content="rule.content"
+          :selectable="rule.selectable"
+          @select="id => console.log('Selected rule', id)"
+          @edit="id => console.log('Edit', id)"
+          @delete="id => console.log('Delete', id)"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Non-Selectable">
+      <div class="flex flex-col gap-4 px-20 py-4 bg-n-background">
+        <RuleCard id="4" content="Replies should be friendly and clear." />
+      </div>
+    </Variant>
+  </Story>
+</template>
diff --git a/app/javascript/dashboard/components-next/captain/assistant/RuleCard.vue b/app/javascript/dashboard/components-next/captain/assistant/RuleCard.vue
new file mode 100644
index 000000000..c74881988
--- /dev/null
+++ b/app/javascript/dashboard/components-next/captain/assistant/RuleCard.vue
@@ -0,0 +1,94 @@
+<script setup>
+import { computed, ref, watch } from 'vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+import CardLayout from 'dashboard/components-next/CardLayout.vue';
+import Checkbox from 'dashboard/components-next/checkbox/Checkbox.vue';
+import InlineInput from 'dashboard/components-next/inline-input/InlineInput.vue';
+
+const props = defineProps({
+  id: {
+    type: Number,
+    required: true,
+  },
+  content: {
+    type: String,
+    required: true,
+  },
+  selectable: {
+    type: Boolean,
+    default: false,
+  },
+  isSelected: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(['select', 'hover', 'edit', 'delete']);
+
+const modelValue = computed({
+  get: () => props.isSelected,
+  set: () => emit('select', props.id),
+});
+
+const isEditing = ref(false);
+const editedContent = ref(props.content);
+
+// Local content to display to avoid flicker until parent prop updates on inline edit
+const localContent = ref(props.content);
+
+// Keeps localContent in sync when parent updates content prop
+watch(
+  () => props.content,
+  newVal => {
+    localContent.value = newVal;
+  }
+);
+
+const startEdit = () => {
+  isEditing.value = true;
+  editedContent.value = props.content;
+};
+
+const saveEdit = () => {
+  isEditing.value = false;
+  // Update local content
+  localContent.value = editedContent.value;
+  emit('edit', { id: props.id, content: editedContent.value });
+};
+</script>
+
+<template>
+  <CardLayout
+    selectable
+    class="relative [&>div]:!py-5 [&>div]:ltr:!pr-4 [&>div]:rtl:!pl-4"
+    layout="row"
+    @mouseenter="emit('hover', true)"
+    @mouseleave="emit('hover', false)"
+  >
+    <div v-show="selectable" class="absolute top-6 ltr:left-3 rtl:right-3">
+      <Checkbox v-model="modelValue" />
+    </div>
+    <InlineInput
+      v-if="isEditing"
+      v-model="editedContent"
+      focus-on-mount
+      custom-input-class="flex items-center gap-2 text-sm text-n-slate-12"
+      @keyup.enter="saveEdit"
+    />
+    <span v-else class="flex items-center gap-2 text-sm text-n-slate-12">
+      {{ localContent }}
+    </span>
+    <div class="flex items-center gap-2">
+      <Button icon="i-lucide-pen" slate xs ghost @click="startEdit" />
+      <span class="w-px h-4 bg-n-weak" />
+      <Button
+        icon="i-lucide-trash"
+        slate
+        xs
+        ghost
+        @click="emit('delete', id)"
+      />
+    </div>
+  </CardLayout>
+</template>
diff --git a/app/javascript/dashboard/components-next/captain/assistant/SuggestedRules.story.vue b/app/javascript/dashboard/components-next/captain/assistant/SuggestedRules.story.vue
new file mode 100644
index 000000000..2009874cf
--- /dev/null
+++ b/app/javascript/dashboard/components-next/captain/assistant/SuggestedRules.story.vue
@@ -0,0 +1,46 @@
+<script setup>
+import SuggestedRules from './SuggestedRules.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+
+const guidelinesExample = [
+  {
+    content:
+      'Block queries that share or request sensitive personal information (e.g. phone numbers, passwords).',
+  },
+  {
+    content:
+      'Reject queries that include offensive, discriminatory, or threatening language.',
+  },
+  {
+    content:
+      'Deflect when the assistant is asked for legal or medical diagnosis or treatment.',
+  },
+];
+</script>
+
+<template>
+  <Story
+    title="Captain/Assistant/SuggestedRules"
+    :layout="{ type: 'grid', width: '800px' }"
+  >
+    <Variant title="Suggested Rules List">
+      <div class="px-20 py-4 bg-n-background">
+        <SuggestedRules
+          title="Example response guidelines"
+          :items="guidelinesExample"
+        >
+          <template #default="{ item }">
+            <span class="text-sm text-n-slate-12">{{ item.content }}</span>
+            <Button
+              label="Add this"
+              ghost
+              xs
+              slate
+              class="!text-sm !text-n-slate-11 flex-shrink-0"
+            />
+          </template>
+        </SuggestedRules>
+      </div>
+    </Variant>
+  </Story>
+</template>
diff --git a/app/javascript/dashboard/components-next/captain/assistant/SuggestedRules.vue b/app/javascript/dashboard/components-next/captain/assistant/SuggestedRules.vue
new file mode 100644
index 000000000..73dc56f01
--- /dev/null
+++ b/app/javascript/dashboard/components-next/captain/assistant/SuggestedRules.vue
@@ -0,0 +1,63 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+import Button from 'dashboard/components-next/button/Button.vue';
+
+defineProps({
+  title: {
+    type: String,
+    default: '',
+  },
+  items: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const emit = defineEmits(['add', 'close']);
+
+const { t } = useI18n();
+
+const onAddClick = () => {
+  emit('add');
+};
+
+const onClickClose = () => {
+  emit('close');
+};
+</script>
+
+<template>
+  <div
+    class="flex flex-col items-start self-stretch rounded-xl w-full overflow-hidden border border-dashed border-n-strong"
+  >
+    <div class="flex items-center justify-between w-full gap-3 px-4 pb-1 pt-4">
+      <div class="flex items-center gap-3">
+        <h5 class="text-sm font-medium text-n-slate-11">{{ title }}</h5>
+        <span class="h-3 w-px bg-n-weak" />
+        <Button
+          :label="t('CAPTAIN.ASSISTANTS.GUARDRAILS.ADD.SUGGESTED.ADD')"
+          ghost
+          xs
+          slate
+          class="!text-sm !text-n-slate-11 flex-shrink-0"
+          @click="onAddClick"
+        />
+      </div>
+      <Button
+        ghost
+        xs
+        slate
+        icon="i-lucide-x"
+        class="!text-sm !text-n-slate-11 flex-shrink-0"
+        @click="onClickClose"
+      />
+    </div>
+    <div
+      class="flex flex-col items-start divide-y divide-n-strong divide-dashed w-full"
+    >
+      <div v-for="item in items" :key="item.content" class="w-full px-4 py-4">
+        <slot :item="item" />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/i18n/locale/en/integrations.json b/app/javascript/dashboard/i18n/locale/en/integrations.json
index fc8cff644..d7bf575de 100644
--- a/app/javascript/dashboard/i18n/locale/en/integrations.json
+++ b/app/javascript/dashboard/i18n/locale/en/integrations.json
@@ -521,6 +521,100 @@
           "TITLE": "Captain Assistant",
           "NOTE": "Captain Assistant engages directly with customers, learns from your help docs and past conversations, and delivers instant, accurate responses. It handles the initial queries, providing quick resolutions before  transferring to an agent when needed."
         }
+      },
+      "GUARDRAILS": {
+        "TITLE": "Guardrails",
+        "DESCRIPTION": "Keeps things on track—only the kinds of questions you want your assistant to answer, nothing off-limits or off-topic.",
+        "BREADCRUMB": {
+          "TITLE": "Guardrails"
+        },
+        "BULK_ACTION": {
+          "SELECTED": "{count} item selected | {count} items selected",
+          "SELECT_ALL": "Select all ({count})",
+          "UNSELECT_ALL": "Unselect all ({count})",
+          "BULK_DELETE_BUTTON": "Delete"
+        },
+        "ADD": {
+          "SUGGESTED": {
+            "TITLE": "Example guardrails",
+            "ADD": "Add all",
+            "ADD_SINGLE": "Add this",
+            "SAVE": "Add and save (↵)",
+            "PLACEHOLDER": "Type in another guardrail..."
+          },
+          "NEW": {
+            "TITLE": "Add a guardrail",
+            "CREATE": "Create",
+            "CANCEL": "Cancel",
+            "PLACEHOLDER": "Type in another guardrail...",
+            "TEST_ALL": "Test all"
+          }
+        },
+        "LIST": {
+          "SEARCH_PLACEHOLDER": "Search..."
+        },
+        "EMPTY_MESSAGE": "No guardrails found. Create or add examples to begin.",
+        "API": {
+          "ADD": {
+            "SUCCESS": "Guardrails added successfully",
+            "ERROR": "There was an error adding guardrails, please try again."
+          },
+          "UPDATE": {
+            "SUCCESS": "Guardrails updated successfully",
+            "ERROR": "There was an error updating guardrails, please try again."
+          },
+          "DELETE": {
+            "SUCCESS": "Guardrails deleted successfully",
+            "ERROR": "There was an error deleting guardrails, please try again."
+          }
+        }
+      },
+      "RESPONSE_GUIDELINES": {
+        "TITLE": "Response Guidelines",
+        "DESCRIPTION": "The vibe and structure of your assistant’s replies—clear and friendly? Short and snappy? Detailed and formal?",
+        "BREADCRUMB": {
+          "TITLE": "Response Guidelines"
+        },
+        "BULK_ACTION": {
+          "SELECTED": "{count} item selected | {count} items selected",
+          "SELECT_ALL": "Select all ({count})",
+          "UNSELECT_ALL": "Unselect all ({count})",
+          "BULK_DELETE_BUTTON": "Delete"
+        },
+        "ADD": {
+          "SUGGESTED": {
+            "TITLE": "Example response guidelines",
+            "ADD": "Add all",
+            "ADD_SINGLE": "Add this",
+            "SAVE": "Add and save (↵)",
+            "PLACEHOLDER": "Type in another response guideline..."
+          },
+          "NEW": {
+            "TITLE": "Add a response guideline",
+            "CREATE": "Create",
+            "CANCEL": "Cancel",
+            "PLACEHOLDER": "Type in another response guideline...",
+            "TEST_ALL": "Test all"
+          }
+        },
+        "LIST": {
+          "SEARCH_PLACEHOLDER": "Search..."
+        },
+        "EMPTY_MESSAGE": "No response guidelines found. Create or add examples to begin.",
+        "API": {
+          "ADD": {
+            "SUCCESS": "Response Guidelines added successfully",
+            "ERROR": "There was an error adding response guidelines, please try again."
+          },
+          "UPDATE": {
+            "SUCCESS": "Response Guidelines updated successfully",
+            "ERROR": "There was an error updating response guidelines, please try again."
+          },
+          "DELETE": {
+            "SUCCESS": "Response Guidelines deleted successfully",
+            "ERROR": "There was an error deleting response guidelines, please try again."
+          }
+        }
       }
     },
     "DOCUMENTS": {
diff --git a/app/javascript/dashboard/routes/dashboard/captain/assistants/guardrails/Index.vue b/app/javascript/dashboard/routes/dashboard/captain/assistants/guardrails/Index.vue
new file mode 100644
index 000000000..0adbc0d13
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/captain/assistants/guardrails/Index.vue
@@ -0,0 +1,296 @@
+<script setup>
+import { computed, ref } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { useAlert } from 'dashboard/composables';
+import { picoSearch } from '@scmmishra/pico-search';
+import { useStore } from 'dashboard/composables/store';
+import { useMapGetter } from 'dashboard/composables/store';
+import { useUISettings } from 'dashboard/composables/useUISettings';
+import Input from 'dashboard/components-next/input/Input.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+
+import SettingsPageLayout from 'dashboard/components-next/captain/SettingsPageLayout.vue';
+import SettingsHeader from 'dashboard/components-next/captain/pageComponents/settings/SettingsHeader.vue';
+import SuggestedRules from 'dashboard/components-next/captain/assistant/SuggestedRules.vue';
+import AddNewRulesInput from 'dashboard/components-next/captain/assistant/AddNewRulesInput.vue';
+import AddNewRulesDialog from 'dashboard/components-next/captain/assistant/AddNewRulesDialog.vue';
+import RuleCard from 'dashboard/components-next/captain/assistant/RuleCard.vue';
+import BulkSelectBar from 'dashboard/components-next/captain/assistant/BulkSelectBar.vue';
+
+const { t } = useI18n();
+const route = useRoute();
+const store = useStore();
+const { uiSettings, updateUISettings } = useUISettings();
+
+const assistantId = route.params.assistantId;
+const uiFlags = useMapGetter('captainAssistants/getUIFlags');
+const isFetching = computed(() => uiFlags.value.fetchingItem);
+const assistant = computed(() =>
+  store.getters['captainAssistants/getRecord'](Number(assistantId))
+);
+
+const searchQuery = ref('');
+const newInlineRule = ref('');
+const newDialogRule = ref('');
+
+const breadcrumbItems = computed(() => {
+  return [
+    {
+      label: t('CAPTAIN.ASSISTANTS.SETTINGS.BREADCRUMB.ASSISTANT'),
+      routeName: 'captain_assistants_index',
+    },
+    { label: assistant.value?.name, routeName: 'captain_assistants_edit' },
+    { label: t('CAPTAIN.ASSISTANTS.GUARDRAILS.BREADCRUMB.TITLE') },
+  ];
+});
+
+const guardrailsContent = computed(() => assistant.value?.guardrails || []);
+
+const displayGuardrails = computed(() =>
+  guardrailsContent.value.map((c, idx) => ({ id: idx, content: c }))
+);
+
+const guardrailsExample = [
+  {
+    id: 1,
+    content:
+      'Block queries that share or request sensitive personal information (e.g. phone numbers, passwords).',
+  },
+  {
+    id: 2,
+    content:
+      'Reject queries that include offensive, discriminatory, or threatening language.',
+  },
+  {
+    id: 3,
+    content:
+      'Deflect when the assistant is asked for legal or medical diagnosis or treatment.',
+  },
+];
+
+const filteredGuardrails = computed(() => {
+  const query = searchQuery.value.trim();
+  if (!query) return displayGuardrails.value;
+  return picoSearch(displayGuardrails.value, query, ['content']);
+});
+
+const shouldShowSuggestedRules = computed(() => {
+  return uiSettings.value?.show_guardrails_suggestions !== false;
+});
+
+const closeSuggestedRules = () => {
+  updateUISettings({ show_guardrails_suggestions: false });
+};
+
+// Bulk selection & hover state
+const bulkSelectedIds = ref(new Set());
+const hoveredCard = ref(null);
+
+const handleRuleSelect = id => {
+  const selected = new Set(bulkSelectedIds.value);
+  selected[selected.has(id) ? 'delete' : 'add'](id);
+  bulkSelectedIds.value = selected;
+};
+
+const handleRuleHover = (isHovered, id) => {
+  hoveredCard.value = isHovered ? id : null;
+};
+
+const buildSelectedCountLabel = computed(() => {
+  const count = displayGuardrails.value.length || 0;
+  const isAllSelected = bulkSelectedIds.value.size === count && count > 0;
+  return isAllSelected
+    ? t('CAPTAIN.ASSISTANTS.GUARDRAILS.BULK_ACTION.UNSELECT_ALL', { count })
+    : t('CAPTAIN.ASSISTANTS.GUARDRAILS.BULK_ACTION.SELECT_ALL', { count });
+});
+
+const selectedCountLabel = computed(() => {
+  return t('CAPTAIN.ASSISTANTS.GUARDRAILS.BULK_ACTION.SELECTED', {
+    count: bulkSelectedIds.value.size,
+  });
+});
+
+const saveGuardrails = async list => {
+  await store.dispatch('captainAssistants/update', {
+    id: assistantId,
+    assistant: { guardrails: list },
+  });
+};
+
+const addGuardrail = async content => {
+  try {
+    const newGuardrails = [...guardrailsContent.value, content];
+    await saveGuardrails(newGuardrails);
+    useAlert(t('CAPTAIN.ASSISTANTS.GUARDRAILS.API.ADD.SUCCESS'));
+  } catch (error) {
+    useAlert(t('CAPTAIN.ASSISTANTS.GUARDRAILS.API.ADD.ERROR'));
+  }
+};
+
+const editGuardrail = async ({ id, content }) => {
+  try {
+    const updated = [...guardrailsContent.value];
+    updated[id] = content;
+    await saveGuardrails(updated);
+    useAlert(t('CAPTAIN.ASSISTANTS.GUARDRAILS.API.UPDATE.SUCCESS'));
+  } catch {
+    useAlert(t('CAPTAIN.ASSISTANTS.GUARDRAILS.API.UPDATE.ERROR'));
+  }
+};
+
+const deleteGuardrail = async id => {
+  try {
+    const updated = guardrailsContent.value.filter((_, idx) => idx !== id);
+    await saveGuardrails(updated);
+    useAlert(t('CAPTAIN.ASSISTANTS.GUARDRAILS.API.DELETE.SUCCESS'));
+  } catch {
+    useAlert(t('CAPTAIN.ASSISTANTS.GUARDRAILS.API.DELETE.ERROR'));
+  }
+};
+
+const bulkDeleteGuardrails = async () => {
+  try {
+    if (bulkSelectedIds.value.size === 0) return;
+    const updated = guardrailsContent.value.filter(
+      (_, idx) => !bulkSelectedIds.value.has(idx)
+    );
+    await saveGuardrails(updated);
+    bulkSelectedIds.value.clear();
+    useAlert(t('CAPTAIN.ASSISTANTS.GUARDRAILS.API.DELETE.SUCCESS'));
+  } catch {
+    useAlert(t('CAPTAIN.ASSISTANTS.GUARDRAILS.API.DELETE.ERROR'));
+  }
+};
+
+const addAllExample = () => {
+  updateUISettings({ show_guardrails_suggestions: false });
+  try {
+    const exampleContents = guardrailsExample.map(example => example.content);
+    const newGuardrails = [...guardrailsContent.value, ...exampleContents];
+    saveGuardrails(newGuardrails);
+  } catch {
+    useAlert(t('CAPTAIN.ASSISTANTS.GUARDRAILS.API.ADD.ERROR'));
+  }
+};
+</script>
+
+<template>
+  <SettingsPageLayout
+    :breadcrumb-items="breadcrumbItems"
+    :is-fetching="isFetching"
+  >
+    <template #body>
+      <SettingsHeader
+        :heading="$t('CAPTAIN.ASSISTANTS.GUARDRAILS.TITLE')"
+        :description="$t('CAPTAIN.ASSISTANTS.GUARDRAILS.DESCRIPTION')"
+      />
+      <div v-if="shouldShowSuggestedRules" class="flex mt-7 flex-col gap-4">
+        <SuggestedRules
+          :title="$t('CAPTAIN.ASSISTANTS.GUARDRAILS.ADD.SUGGESTED.TITLE')"
+          :items="guardrailsExample"
+          @add="addAllExample"
+          @close="closeSuggestedRules"
+        >
+          <template #default="{ item }">
+            <div class="flex items-center justify-between w-full">
+              <span class="text-sm text-n-slate-12">
+                {{ item.content }}
+              </span>
+              <Button
+                :label="
+                  $t('CAPTAIN.ASSISTANTS.GUARDRAILS.ADD.SUGGESTED.ADD_SINGLE')
+                "
+                ghost
+                xs
+                slate
+                class="!text-sm !text-n-slate-11 flex-shrink-0"
+                @click="addGuardrail(item.content)"
+              />
+            </div>
+          </template>
+        </SuggestedRules>
+      </div>
+      <div class="flex mt-7 flex-col gap-4">
+        <div class="flex justify-between items-center">
+          <BulkSelectBar
+            v-model="bulkSelectedIds"
+            :all-items="displayGuardrails"
+            :select-all-label="buildSelectedCountLabel"
+            :selected-count-label="selectedCountLabel"
+            :delete-label="
+              $t('CAPTAIN.ASSISTANTS.GUARDRAILS.BULK_ACTION.BULK_DELETE_BUTTON')
+            "
+            @bulk-delete="bulkDeleteGuardrails"
+          >
+            <template #default-actions>
+              <AddNewRulesDialog
+                v-model="newDialogRule"
+                :placeholder="
+                  t('CAPTAIN.ASSISTANTS.GUARDRAILS.ADD.NEW.PLACEHOLDER')
+                "
+                :button-label="t('CAPTAIN.ASSISTANTS.GUARDRAILS.ADD.NEW.TITLE')"
+                :confirm-label="
+                  t('CAPTAIN.ASSISTANTS.GUARDRAILS.ADD.NEW.CREATE')
+                "
+                :cancel-label="
+                  t('CAPTAIN.ASSISTANTS.GUARDRAILS.ADD.NEW.CANCEL')
+                "
+                @add="addGuardrail"
+              />
+              <!-- Will enable this feature in future -->
+              <!-- <div class="h-4 w-px bg-n-strong" />
+              <Button
+                :label="t('CAPTAIN.ASSISTANTS.GUARDRAILS.ADD.NEW.TEST_ALL')"
+                xs
+                ghost
+                slate
+                class="!text-sm"
+              /> -->
+            </template>
+          </BulkSelectBar>
+          <div
+            v-if="displayGuardrails.length && bulkSelectedIds.size === 0"
+            class="max-w-[22.5rem] w-full min-w-0"
+          >
+            <Input
+              v-model="searchQuery"
+              :placeholder="
+                t('CAPTAIN.ASSISTANTS.GUARDRAILS.LIST.SEARCH_PLACEHOLDER')
+              "
+            />
+          </div>
+        </div>
+        <div v-if="displayGuardrails.length === 0" class="mt-1 mb-2">
+          <span class="text-n-slate-11 text-sm">
+            {{ t('CAPTAIN.ASSISTANTS.GUARDRAILS.EMPTY_MESSAGE') }}
+          </span>
+        </div>
+        <div v-else class="flex flex-col gap-2">
+          <RuleCard
+            v-for="guardrail in filteredGuardrails"
+            :id="guardrail.id"
+            :key="guardrail.id"
+            :content="guardrail.content"
+            :is-selected="bulkSelectedIds.has(guardrail.id)"
+            :selectable="
+              hoveredCard === guardrail.id || bulkSelectedIds.size > 0
+            "
+            @select="handleRuleSelect"
+            @edit="editGuardrail"
+            @delete="deleteGuardrail"
+            @hover="isHovered => handleRuleHover(isHovered, guardrail.id)"
+          />
+        </div>
+        <AddNewRulesInput
+          v-model="newInlineRule"
+          :placeholder="
+            t('CAPTAIN.ASSISTANTS.GUARDRAILS.ADD.SUGGESTED.PLACEHOLDER')
+          "
+          :label="t('CAPTAIN.ASSISTANTS.GUARDRAILS.ADD.SUGGESTED.SAVE')"
+          @add="addGuardrail"
+        />
+      </div>
+    </template>
+  </SettingsPageLayout>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/captain/assistants/guidelines/Index.vue b/app/javascript/dashboard/routes/dashboard/captain/assistants/guidelines/Index.vue
new file mode 100644
index 000000000..338e614c0
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/captain/assistants/guidelines/Index.vue
@@ -0,0 +1,318 @@
+<script setup>
+import { computed, ref } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { useAlert } from 'dashboard/composables';
+import { picoSearch } from '@scmmishra/pico-search';
+import { useStore } from 'dashboard/composables/store';
+import { useMapGetter } from 'dashboard/composables/store';
+import { useUISettings } from 'dashboard/composables/useUISettings';
+import Input from 'dashboard/components-next/input/Input.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+
+import SettingsPageLayout from 'dashboard/components-next/captain/SettingsPageLayout.vue';
+import SettingsHeader from 'dashboard/components-next/captain/pageComponents/settings/SettingsHeader.vue';
+import SuggestedRules from 'dashboard/components-next/captain/assistant/SuggestedRules.vue';
+import AddNewRulesInput from 'dashboard/components-next/captain/assistant/AddNewRulesInput.vue';
+import AddNewRulesDialog from 'dashboard/components-next/captain/assistant/AddNewRulesDialog.vue';
+import RuleCard from 'dashboard/components-next/captain/assistant/RuleCard.vue';
+import BulkSelectBar from 'dashboard/components-next/captain/assistant/BulkSelectBar.vue';
+
+const { t } = useI18n();
+const route = useRoute();
+const store = useStore();
+const { uiSettings, updateUISettings } = useUISettings();
+
+const assistantId = route.params.assistantId;
+const uiFlags = useMapGetter('captainAssistants/getUIFlags');
+const isFetching = computed(() => uiFlags.value.fetchingItem);
+const assistant = computed(() =>
+  store.getters['captainAssistants/getRecord'](Number(assistantId))
+);
+
+const searchQuery = ref('');
+const newInlineRule = ref('');
+const newDialogRule = ref('');
+
+const breadcrumbItems = computed(() => {
+  return [
+    {
+      label: t('CAPTAIN.ASSISTANTS.SETTINGS.BREADCRUMB.ASSISTANT'),
+      routeName: 'captain_assistants_index',
+    },
+    { label: assistant.value?.name, routeName: 'captain_assistants_edit' },
+    { label: t('CAPTAIN.ASSISTANTS.RESPONSE_GUIDELINES.TITLE') },
+  ];
+});
+
+const guidelinesContent = computed(
+  () => assistant.value?.response_guidelines || []
+);
+
+const displayGuidelines = computed(() =>
+  guidelinesContent.value.map((c, idx) => ({ id: idx, content: c }))
+);
+
+const guidelinesExample = [
+  {
+    id: 1,
+    content:
+      'Block queries that share or request sensitive personal information (e.g. phone numbers, passwords).',
+  },
+  {
+    id: 2,
+    content:
+      'Reject queries that include offensive, discriminatory, or threatening language.',
+  },
+  {
+    id: 3,
+    content:
+      'Deflect when the assistant is asked for legal or medical diagnosis or treatment.',
+  },
+];
+
+const filteredGuidelines = computed(() => {
+  const query = searchQuery.value.trim();
+  if (!query) return displayGuidelines.value;
+  return picoSearch(displayGuidelines.value, query, ['content']);
+});
+
+const shouldShowSuggestedRules = computed(() => {
+  return uiSettings.value?.show_response_guidelines_suggestions !== false;
+});
+
+const closeSuggestedRules = () => {
+  updateUISettings({ show_response_guidelines_suggestions: false });
+};
+
+// Bulk selection & hover state
+const bulkSelectedIds = ref(new Set());
+const hoveredCard = ref(null);
+
+const handleRuleSelect = id => {
+  const selected = new Set(bulkSelectedIds.value);
+  selected[selected.has(id) ? 'delete' : 'add'](id);
+  bulkSelectedIds.value = selected;
+};
+
+const handleRuleHover = (isHovered, id) => {
+  hoveredCard.value = isHovered ? id : null;
+};
+
+const buildSelectedCountLabel = computed(() => {
+  const count = displayGuidelines.value.length || 0;
+  const isAllSelected = bulkSelectedIds.value.size === count && count > 0;
+  return isAllSelected
+    ? t('CAPTAIN.ASSISTANTS.RESPONSE_GUIDELINES.BULK_ACTION.UNSELECT_ALL', {
+        count,
+      })
+    : t('CAPTAIN.ASSISTANTS.RESPONSE_GUIDELINES.BULK_ACTION.SELECT_ALL', {
+        count,
+      });
+});
+
+const selectedCountLabel = computed(() => {
+  return t('CAPTAIN.ASSISTANTS.RESPONSE_GUIDELINES.BULK_ACTION.SELECTED', {
+    count: bulkSelectedIds.value.size,
+  });
+});
+
+const saveGuidelines = async list => {
+  await store.dispatch('captainAssistants/update', {
+    id: assistantId,
+    assistant: { response_guidelines: list },
+  });
+};
+
+const addGuideline = async content => {
+  try {
+    const updated = [...guidelinesContent.value, content];
+    await saveGuidelines(updated);
+    useAlert(t('CAPTAIN.ASSISTANTS.RESPONSE_GUIDELINES.API.ADD.SUCCESS'));
+  } catch {
+    useAlert(t('CAPTAIN.ASSISTANTS.RESPONSE_GUIDELINES.API.ADD.ERROR'));
+  }
+};
+
+const editGuideline = async ({ id, content }) => {
+  try {
+    const updated = [...guidelinesContent.value];
+    updated[id] = content;
+    await saveGuidelines(updated);
+    useAlert(t('CAPTAIN.ASSISTANTS.RESPONSE_GUIDELINES.API.UPDATE.SUCCESS'));
+  } catch {
+    useAlert(t('CAPTAIN.ASSISTANTS.RESPONSE_GUIDELINES.API.UPDATE.ERROR'));
+  }
+};
+
+const deleteGuideline = async id => {
+  try {
+    const updated = guidelinesContent.value.filter((_, idx) => idx !== id);
+    await saveGuidelines(updated);
+    useAlert(t('CAPTAIN.ASSISTANTS.RESPONSE_GUIDELINES.API.DELETE.SUCCESS'));
+  } catch {
+    useAlert(t('CAPTAIN.ASSISTANTS.RESPONSE_GUIDELINES.API.DELETE.ERROR'));
+  }
+};
+
+const bulkDeleteGuidelines = async () => {
+  try {
+    if (bulkSelectedIds.value.size === 0) return;
+    const updated = guidelinesContent.value.filter(
+      (_, idx) => !bulkSelectedIds.value.has(idx)
+    );
+    await saveGuidelines(updated);
+    bulkSelectedIds.value.clear();
+    useAlert(t('CAPTAIN.ASSISTANTS.RESPONSE_GUIDELINES.API.DELETE.SUCCESS'));
+  } catch {
+    useAlert(t('CAPTAIN.ASSISTANTS.RESPONSE_GUIDELINES.API.DELETE.ERROR'));
+  }
+};
+
+const addAllExample = async () => {
+  updateUISettings({ show_response_guidelines_suggestions: false });
+  try {
+    const exampleContents = guidelinesExample.map(example => example.content);
+    const newGuidelines = [...guidelinesContent.value, ...exampleContents];
+    await saveGuidelines(newGuidelines);
+    useAlert(t('CAPTAIN.ASSISTANTS.RESPONSE_GUIDELINES.API.ADD.SUCCESS'));
+  } catch {
+    useAlert(t('CAPTAIN.ASSISTANTS.RESPONSE_GUIDELINES.API.ADD.ERROR'));
+  }
+};
+</script>
+
+<template>
+  <SettingsPageLayout
+    :breadcrumb-items="breadcrumbItems"
+    :is-fetching="isFetching"
+  >
+    <template #body>
+      <SettingsHeader
+        :heading="t('CAPTAIN.ASSISTANTS.RESPONSE_GUIDELINES.TITLE')"
+        :description="t('CAPTAIN.ASSISTANTS.RESPONSE_GUIDELINES.DESCRIPTION')"
+      />
+      <div v-if="shouldShowSuggestedRules" class="flex mt-7 flex-col gap-4">
+        <SuggestedRules
+          :title="t('CAPTAIN.ASSISTANTS.RESPONSE_GUIDELINES.TITLE')"
+          :items="guidelinesExample"
+          @add="addAllExample"
+          @close="closeSuggestedRules"
+        >
+          <template #default="{ item }">
+            <div class="flex items-center justify-between w-full">
+              <span class="text-sm text-n-slate-12">
+                {{ item.content }}
+              </span>
+              <Button
+                :label="
+                  t(
+                    'CAPTAIN.ASSISTANTS.RESPONSE_GUIDELINES.ADD.SUGGESTED.ADD_SINGLE'
+                  )
+                "
+                ghost
+                xs
+                slate
+                class="!text-sm !text-n-slate-11 flex-shrink-0"
+                @click="addGuideline(item.content)"
+              />
+            </div>
+          </template>
+        </SuggestedRules>
+      </div>
+      <div class="flex mt-7 flex-col gap-4">
+        <div class="flex justify-between items-center">
+          <BulkSelectBar
+            v-model="bulkSelectedIds"
+            :all-items="displayGuidelines"
+            :select-all-label="buildSelectedCountLabel"
+            :selected-count-label="selectedCountLabel"
+            :delete-label="
+              $t(
+                'CAPTAIN.ASSISTANTS.RESPONSE_GUIDELINES.BULK_ACTION.BULK_DELETE_BUTTON'
+              )
+            "
+            @bulk-delete="bulkDeleteGuidelines"
+          >
+            <template #default-actions>
+              <AddNewRulesDialog
+                v-model="newDialogRule"
+                :placeholder="
+                  t(
+                    'CAPTAIN.ASSISTANTS.RESPONSE_GUIDELINES.ADD.NEW.PLACEHOLDER'
+                  )
+                "
+                :button-label="
+                  t('CAPTAIN.ASSISTANTS.RESPONSE_GUIDELINES.ADD.NEW.TITLE')
+                "
+                :confirm-label="
+                  t('CAPTAIN.ASSISTANTS.RESPONSE_GUIDELINES.ADD.NEW.CREATE')
+                "
+                :cancel-label="
+                  t('CAPTAIN.ASSISTANTS.RESPONSE_GUIDELINES.ADD.NEW.CANCEL')
+                "
+                @add="addGuideline"
+              />
+              <!-- Will enable this feature in future -->
+              <!-- <div class="h-4 w-px bg-n-strong" />
+              <Button
+                :label="
+                  t('CAPTAIN.ASSISTANTS.RESPONSE_GUIDELINES.ADD.NEW.TEST_ALL')
+                "
+                sm
+                ghost
+                slate
+              /> -->
+            </template>
+          </BulkSelectBar>
+          <div
+            v-if="displayGuidelines.length && bulkSelectedIds.size === 0"
+            class="max-w-[22.5rem] w-full min-w-0"
+          >
+            <Input
+              v-model="searchQuery"
+              :placeholder="
+                t(
+                  'CAPTAIN.ASSISTANTS.RESPONSE_GUIDELINES.LIST.SEARCH_PLACEHOLDER'
+                )
+              "
+            />
+          </div>
+        </div>
+        <div v-if="displayGuidelines.length === 0" class="mt-1 mb-2">
+          <span class="text-n-slate-11 text-sm">
+            {{ t('CAPTAIN.ASSISTANTS.RESPONSE_GUIDELINES.EMPTY_MESSAGE') }}
+          </span>
+        </div>
+        <div v-else class="flex flex-col gap-2">
+          <RuleCard
+            v-for="guideline in filteredGuidelines"
+            :id="guideline.id"
+            :key="guideline.id"
+            :content="guideline.content"
+            :is-selected="bulkSelectedIds.has(guideline.id)"
+            :selectable="
+              hoveredCard === guideline.id || bulkSelectedIds.size > 0
+            "
+            @select="handleRuleSelect"
+            @hover="isHovered => handleRuleHover(isHovered, guideline.id)"
+            @edit="editGuideline"
+            @delete="deleteGuideline"
+          />
+        </div>
+        <AddNewRulesInput
+          v-model="newInlineRule"
+          :placeholder="
+            t(
+              'CAPTAIN.ASSISTANTS.RESPONSE_GUIDELINES.ADD.SUGGESTED.PLACEHOLDER'
+            )
+          "
+          :label="
+            t('CAPTAIN.ASSISTANTS.RESPONSE_GUIDELINES.ADD.SUGGESTED.SAVE')
+          "
+          @add="addGuideline"
+        />
+      </div>
+    </template>
+  </SettingsPageLayout>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/captain/assistants/settings/Settings.vue b/app/javascript/dashboard/routes/dashboard/captain/assistants/settings/Settings.vue
index c39d685cc..f73b82094 100644
--- a/app/javascript/dashboard/routes/dashboard/captain/assistants/settings/Settings.vue
+++ b/app/javascript/dashboard/routes/dashboard/captain/assistants/settings/Settings.vue
@@ -32,7 +32,7 @@ const controlItems = computed(() => {
       description: t(
         'CAPTAIN.ASSISTANTS.SETTINGS.CONTROL_ITEMS.OPTIONS.GUARDRAILS.DESCRIPTION'
       ),
-      // routeName: 'captain_assistants_guardrails_index',
+      routeName: 'captain_assistants_guardrails_index',
     },
     {
       name: t(
@@ -50,7 +50,7 @@ const controlItems = computed(() => {
       description: t(
         'CAPTAIN.ASSISTANTS.SETTINGS.CONTROL_ITEMS.OPTIONS.RESPONSE_GUIDELINES.DESCRIPTION'
       ),
-      // routeName: 'captain_assistants_guidelines_index',
+      routeName: 'captain_assistants_guidelines_index',
     },
   ];
 });
diff --git a/app/javascript/dashboard/routes/dashboard/captain/captain.routes.js b/app/javascript/dashboard/routes/dashboard/captain/captain.routes.js
index 7294a7433..b2257076a 100644
--- a/app/javascript/dashboard/routes/dashboard/captain/captain.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/captain/captain.routes.js
@@ -5,6 +5,8 @@ import AssistantIndex from './assistants/Index.vue';
 import AssistantEdit from './assistants/Edit.vue';
 // import AssistantSettings from './assistants/settings/Settings.vue';
 import AssistantInboxesIndex from './assistants/inboxes/Index.vue';
+import AssistantGuardrailsIndex from './assistants/guardrails/Index.vue';
+import AssistantGuidelinesIndex from './assistants/guidelines/Index.vue';
 import DocumentsIndex from './documents/Index.vue';
 import ResponsesIndex from './responses/Index.vue';
 
@@ -50,6 +52,36 @@ export const routes = [
       ],
     },
   },
+  {
+    path: frontendURL(
+      'accounts/:accountId/captain/assistants/:assistantId/guardrails'
+    ),
+    component: AssistantGuardrailsIndex,
+    name: 'captain_assistants_guardrails_index',
+    meta: {
+      permissions: ['administrator', 'agent'],
+      featureFlag: FEATURE_FLAGS.CAPTAIN,
+      installationTypes: [
+        INSTALLATION_TYPES.CLOUD,
+        INSTALLATION_TYPES.ENTERPRISE,
+      ],
+    },
+  },
+  {
+    path: frontendURL(
+      'accounts/:accountId/captain/assistants/:assistantId/guidelines'
+    ),
+    component: AssistantGuidelinesIndex,
+    name: 'captain_assistants_guidelines_index',
+    meta: {
+      permissions: ['administrator', 'agent'],
+      featureFlag: FEATURE_FLAGS.CAPTAIN,
+      installationTypes: [
+        INSTALLATION_TYPES.CLOUD,
+        INSTALLATION_TYPES.ENTERPRISE,
+      ],
+    },
+  },
   {
     path: frontendURL('accounts/:accountId/captain/documents'),
     component: DocumentsIndex,
diff --git a/enterprise/app/controllers/api/v1/accounts/captain/assistants_controller.rb b/enterprise/app/controllers/api/v1/accounts/captain/assistants_controller.rb
index 37890fade..1bd928271 100644
--- a/enterprise/app/controllers/api/v1/accounts/captain/assistants_controller.rb
+++ b/enterprise/app/controllers/api/v1/accounts/captain/assistants_controller.rb
@@ -51,8 +51,9 @@ class Api::V1::Accounts::Captain::AssistantsController < Api::V1::Accounts::Base
                                                   ])
 
     # Handle array parameters separately to allow partial updates
-    permitted[:response_guidelines] = params[:assistant][:response_guidelines] if params[:assistant][:response_guidelines].present?
-    permitted[:guardrails] = params[:assistant][:guardrails] if params[:assistant][:guardrails].present?
+    permitted[:response_guidelines] = params[:assistant][:response_guidelines] if params[:assistant].key?(:response_guidelines)
+
+    permitted[:guardrails] = params[:assistant][:guardrails] if params[:assistant].key?(:guardrails)
 
     permitted
   end