Pulling changes from BYK WIP to typecheck-config-updates

DSL/CronManager/script/store_secrets_in_vault.sh

@@ -68,7 +68,7 @@ build_vault_path() {
         model=$(get_model_name)
     fi
 
-    if [ "$deploymentEnvironment" = "test" ]; then
+    if [ "$deploymentEnvironment" = "testing" ]; then
         echo "secret/$secret_type/connections/$platform/$deploymentEnvironment/$connectionId"
     else
         echo "secret/$secret_type/connections/$platform/$deploymentEnvironment/$model"

DSL/Resql/rag-search/POST/update-llm-connection.sql

@@ -25,19 +25,19 @@ SET
     embedding_target_uri = :embedding_target_uri,
     embedding_azure_api_key = :embedding_azure_api_key
 WHERE id = :connection_id
-RETURNING 
-    id, 
+RETURNING
+    id,
     connection_name,
-    llm_platform, 
-    llm_model, 
-    embedding_platform, 
-    embedding_model, 
-    monthly_budget, 
+    llm_platform,
+    llm_model,
+    embedding_platform,
+    embedding_model,
+    monthly_budget,
     warn_budget_threshold,
     stop_budget_threshold,
     disconnect_on_budget_exceed,
-    environment, 
-    connection_status, 
+    environment,
+    connection_status,
     created_at,
     deployment_name,
     target_uri,

DSL/Ruuter.private/rag-search/POST/inference/test.yml

@@ -62,7 +62,7 @@ call_orchestrate_endpoint:
     body:
       connectionId: ${connectionId}
       message: ${message}
-      environment: "test"
+      environment: "testing"
     headers:
       Content-Type: "application/json"
   result: orchestrate_result

GUI/src/components/molecules/LLMConnectionForm/LLMConnectionForm.scss

@@ -90,15 +90,54 @@
   .flex-grid {
     display: flex;
     gap: 12px;
+    flex-wrap: wrap;
+
+    button {
+      flex: 0 1 auto;
+      min-width: 80px;
+      max-width: 100%;
+    }
   }
 
   // Responsive design
-  @media (max-width: 768px) {
-    padding: 16px;
-
+  // Very small screens - wrap buttons (inline buttons with wrapping)
+  @media (max-width: 480px) {
+    padding: 8px;
+
+    .form-section {
+      padding: 12px;
+      margin-bottom: 20px;
+    }
+
+    .form-footer {
+      margin-top: 20px;
+      padding-top: 12px;
+    }
+
+    .flex-grid {
+
+      flex-wrap: wrap;
+      gap: 8px;
+      justify-content: flex-end;
+
+      button {
+        flex: 0 1 auto;
+
+        min-width: 60px;
+        max-width: calc(50% - 4px);
+        padding: 8px 12px;
+        font-size: 13px;
+      }
+    }
+  }
+
+  // Small screens - mobile
+  @media (min-width: 481px) and (max-width: 768px) {
+    padding: 12px;
+
     .form-section {
-      padding: 16px;
-      margin-bottom: 24px;
+      padding: 14px;
+      margin-bottom: 22px;
     }
 
     .radio-options {
@@ -109,9 +148,34 @@
       padding: 6px 10px;
     }
 
+    .form-footer {
+      margin-top: 24px;
+      padding-top: 16px;
+    }
+
+    .flex-grid {
+      flex-direction: column-reverse;
+      gap: 12px;
+
+      button {
+        width: 100%;
+        min-width: unset;
+      }
+    }
+  }
+
+  // Medium screens - tablet
+  @media (min-width: 769px) and (max-width: 1024px) {
     .flex-grid {
-      flex-direction: column;
       gap: 8px;
+
+      button {
+        flex: 1 1 auto;
+        min-width: 70px;
+        max-width: 200px;
+        font-size: 14px;
+        padding: 8px 12px;
+      }
     }
   }
 }

GUI/src/pages/TestModel/TestLLM.scss

@@ -41,6 +41,44 @@
     line-height: 1.5;
     color: #555;
   }
+
+  .context-section {
+    margin-top: 20px;
+
+    .context-list {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+      margin-top: 8px;
+    }
+
+    .context-item {
+      padding: 12px;
+      background-color: #ffffff;
+      border: 1px solid #e0e0e0;
+      border-radius: 6px;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+
+      .context-rank {
+        margin-bottom: 8px;
+        padding-bottom: 4px;
+        border-bottom: 1px solid #f0f0f0;
+
+        strong {
+          color: #2563eb;
+          font-size: 0.875rem;
+          font-weight: 600;
+        }
+      }
+
+      .context-content {
+        color: #374151;
+        line-height: 1.5;
+        font-size: 0.9rem;
+        white-space: pre-wrap;
+      }
+    }
+  }
 }
 
 .testModalList {

GUI/src/pages/TestModel/index.tsx

@@ -1,5 +1,5 @@
 import { useMutation, useQuery } from '@tanstack/react-query';
-import { Button, FormSelect, FormTextarea } from 'components';
+import { Button, FormSelect, FormTextarea, Collapsible } from 'components';
 import CircularSpinner from 'components/molecules/CircularSpinner/CircularSpinner';
 import { FC, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -19,6 +19,9 @@ const TestLLM: FC = () => {
     text: '',
   });
 
+  // Sort context by rank
+  const sortedContext = inferenceResult?.chunks?.toSorted((a, b) => a.rank - b.rank) ?? [];
+
   // Fetch LLM connections for dropdown - using the working legacy endpoint for now
   const { data: connections, isLoading: isLoadingConnections } = useQuery({
     queryKey: llmConnectionsQueryKeys.list({
@@ -99,7 +102,7 @@ const TestLLM: FC = () => {
                 onSelectionChange={(selection) => {
                   handleChange('connectionId', selection?.value as string);
                 }}
-                value={testLLM?.connectionId === null ? t('testModels.connectionNotExist') || 'Connection does not exist' : undefined} 
+                value={testLLM?.connectionId === null ? t('testModels.connectionNotExist') || 'Connection does not exist' : undefined}
                 defaultValue={testLLM?.connectionId ?? undefined}
               />
             </div>
@@ -126,15 +129,38 @@ const TestLLM: FC = () => {
 
           {/* Inference Result */}
 
-          {inferenceResult && (
+          {inferenceResult && !inferenceMutation.isLoading && (
             <div className="inference-results-container">
-            <div className="result-item">
-              <strong>{t('testModels.responseLabel') || 'Response:'}</strong>
-              <div className="response-content">
-                {inferenceResult.content}
+              <div className="result-item">
+                <strong>Response:</strong>
+                <div className="response-content">
+                  {inferenceResult.content}
+                </div>
               </div>
+
+              {/* Context Section */}
+              {
+                sortedContext && sortedContext?.length > 0 && (
+                  <div className="context-section">
+                    <Collapsible title={`Context (${sortedContext?.length} chunks)`} defaultOpen={false}>
+                      <div className="context-list">
+                        {sortedContext?.map((contextItem, index) => (
+                          <div key={index} className="context-item">
+                            <div className="context-rank">
+                              <strong>Rank {contextItem.rank}</strong>
+                            </div>
+                            <div className="context-content">
+                              {contextItem.chunkRetrieved}
+                            </div>
+                          </div>
+                        ))}
+                      </div>
+                    </Collapsible>
+                  </div>
+                )
+              }
+
             </div>
-          </div>
           )}
 
           {/* Error State */}

GUI/src/services/inference.ts

@@ -25,6 +25,10 @@ export interface InferenceResponse {
     llmServiceActive: boolean;
     questionOutOfLlmScope: boolean;
     content: string;
+    chunks?: {
+      rank: number,
+      chunkRetrieved: string
+    }[]
   };
 }