### Complete HTTP Handler Example for Tenant Creation

Source: https://github.com/amoylab/unla/blob/main/docs/i18n_direct_errors.md

A full example of an HTTP handler demonstrating error handling for tenant creation, including request binding, validation, and specific error responses for duplicate names or prefixes.

```go
func CreateTenant(c *gin.Context) {
    var req dto.CreateTenantRequest
    if err := c.ShouldBindJSON(&req); err != nil {
        i18n.RespondWithError(c, i18n.ErrBadRequest.WithParam("Reason", err.Error()))
        return
    }

    // Validate request
    if req.Name == "" || req.Prefix == "" {
        i18n.RespondWithError(c, i18n.NewErrorWithCode("ErrorTenantRequiredFields", i18n.ErrorBadRequest))
        return
    }

    // Create tenant
    tenant, err := tenantService.Create(c.Request.Context(), req)
    if err != nil {
        if isDuplicateName(err) {
            i18n.RespondWithError(c, i18n.NewErrorWithCode("ErrorTenantNameExists", i18n.ErrorConflict))
        } else if isDuplicatePrefix(err) {
            i18n.RespondWithError(c, i18n.NewErrorWithCode("ErrorTenantPrefixExists", i18n.ErrorConflict))
        } else {
            i18n.RespondWithError(c, i18n.ErrInternalServer)
        }
        return
    }

    c.JSON(http.StatusOK, gin.H{
        "id": tenant.ID,
        "message": i18n.TranslateMessageGin("SuccessTenantCreated", c, nil),
    })
}
```

--------------------------------

### Load Example on Window Load

Source: https://github.com/amoylab/unla/blob/main/cmd/template-tester/playground.html

Attaches an event listener to the window's 'load' event to automatically call the `loadExample` function, populating the playground with initial data.

```javascript
window.addEventListener('load', () => { loadExample(); });
```

--------------------------------

### Run Go Services Development Server

Source: https://github.com/amoylab/unla/blob/main/agents.md

Execute this command to start the Go-based services (mcp-gateway, apiserver, mock-server) for development.

```bash
go run ./cmd/*/main.go
```

--------------------------------

### Run Web Frontend Development Server

Source: https://github.com/amoylab/unla/blob/main/agents.md

Use this command to start the React-based web frontend in development mode.

```bash
npm run dev
```

--------------------------------

### Run Web Frontend Development Server

Source: https://github.com/amoylab/unla/blob/main/CLAUDE.md

Start the development server for the React/TypeScript web interface using pnpm.

```bash
cd web/
pnpm run dev
```

--------------------------------

### Load Example Template and Response Body

Source: https://github.com/amoylab/unla/blob/main/cmd/template-tester/playground.html

Populates the template and response body fields with example data, including a deliberately broken forecast to demonstrate template errors.

```javascript
function loadExample() { document.getElementById('template').value = 
# Weather Information (Broken Example) Location: {{.Response.Data.location}} Temperature: {{.Response.Data.temperature}}°C Condition: {{.Response.Data.condition}} {{if .Response.Data.forecast}} ## 5-Day Forecast: {{/\* ⚠️ BUG: 'forecast' is a JSON string, not an object. This range loop will fail! Click "✨ AI Fix" to solve it. \*/}} {{range .Response.Data.forecast}} - {{.day}}: {{.temp}}°C, {{.condition}} {{end}} {{end}}
'; // Note: 'forecast' is intentionally a stringified JSON to cause a template error // requiring 'fromJSON' or AI fixing. document.getElementById('responseBody').value = JSON.stringify({ "location": "Beijing", "temperature": 18, "condition": "Sunny", "forecast": JSON.stringify(
[ {"day": "Monday", "temp": 20, "condition": "Partly Cloudy"},
{"day": "Tuesday", "temp": 22, "condition": "Sunny"},
{"day": "Wednesday", "temp": 19, "condition": "Rainy"},
{"day": "Thursday", "temp": 17, "condition": "Cloudy"},
{"day": "Friday", "temp": 21, "condition": "Sunny"}
] ), }, null, 2); }
```

--------------------------------

### Translation File Configuration (TOML)

Source: https://github.com/amoylab/unla/blob/main/docs/i18n_example.md

Example TOML files for English and Chinese translations, mapping message IDs to their respective translated strings, including placeholders for parameters.

```toml
# translations/en/messages.toml
[ErrorUserNotFound]
other = "User not found"

[ErrorInvalidInput]
other = "Invalid input: field {{.Field}} {{.Reason}}"

[ErrorForbidden]
other = "You do not have permission to perform this action"

[ErrorValidationFailed]
other = "Validation failed: {{.Reason}}"

[ErrorResourceNotFound]
other = "Resource with ID {{.ID}} not found"
```

```toml
# translations/zh/messages.toml
[ErrorUserNotFound]
other = "找不到用户"

[ErrorInvalidInput]
other = "无效输入：字段 {{.Field}} {{.Reason}}"

[ErrorForbidden]
other = "您没有权限执行此操作"

[ErrorValidationFailed]
other = "验证失败：{{.Reason}}"

[ErrorResourceNotFound]
other = "找不到ID为 {{.ID}} 的资源"
```

--------------------------------

### Frontend API Error Handling

Source: https://github.com/amoylab/unla/blob/main/docs/i18n.md

Example of how frontend code can handle API errors, assuming errors are already translated by the backend middleware.

```typescript
import { handleApiError } from '../utils/error-handler';

try {
  const result = await api.someEndpoint();
} catch (error) {
  handleApiError(error);
}
```

--------------------------------

### Build and Preview Web Frontend

Source: https://github.com/amoylab/unla/blob/main/CLAUDE.md

Commands to build the production version of the web frontend and preview it.

```bash
cd web/
pnpm run build        # production build
pnpm run preview      # preview production build
```

--------------------------------

### Build Go Backend Services

Source: https://github.com/amoylab/unla/blob/main/CLAUDE.md

Commands to build all Go backend services, either as a single all-in-one container or multiple containers.

```bash
make build

make build-allinone   # single container
make build-multi      # multi-container
```

--------------------------------

### Run Go Tests

Source: https://github.com/amoylab/unla/blob/main/CLAUDE.md

Execute various testing commands for Go projects. Use 'make test' for all tests, 'make test-coverage' for coverage reports, and 'make test-race' for race detection. Specific packages can be tested with 'go test ./pkg/utils/'.

```bash
make test

```

```bash
make test-coverage

```

```bash
make test-race

```

```bash
go test ./pkg/utils/...

```

--------------------------------

### Run Go Backend Services Locally

Source: https://github.com/amoylab/unla/blob/main/CLAUDE.md

Commands to run the Go backend services locally, either as a single all-in-one container or multiple containers.

```bash
make run-allinone     # single container setup
make run-multi        # multi-container setup
```

--------------------------------

### Run Go Backend Tests

Source: https://github.com/amoylab/unla/blob/main/CLAUDE.md

Execute various test suites for the Go backend, including standard tests, coverage reports, and race detection.

```bash
make test
make test-coverage  # with coverage report
make test-race     # with race detection
```

--------------------------------

### Predefined Errors (Go)

Source: https://github.com/amoylab/unla/blob/main/docs/i18n_example.md

Demonstrates using predefined error variables from the `pkg/i18n` package. These errors can be extended with parameters using the `WithParam` method.

```go
// 预定义错误
var (
    ErrNotFound = NewErrorWithCode("ErrorResourceNotFound", ErrorNotFound)
    ErrUnauthorized = NewErrorWithCode("ErrorUnauthorized", ErrorUnauthorized)
    ErrForbidden = NewErrorWithCode("ErrorForbidden", ErrorForbidden)
    ErrBadRequest = NewErrorWithCode("ErrorBadRequest", ErrorBadRequest)
    ErrInternalServer = NewErrorWithCode("ErrorInternalServer", ErrorInternalServer)
)

func GetResource(c *gin.Context) {
    id := c.Param("id")
    resource, err := resourceService.GetByID(id)
    if err != nil {
        if isNotFound(err) {
            // 使用预定义错误
            c.Error(i18n.ErrNotFound.WithParam("ID", id))
            return
        }
        c.Error(i18n.ErrInternalServer)
        return
    }
    
    c.JSON(200, resource)
}
```

--------------------------------

### Initialize Global Translator in Go

Source: https://github.com/amoylab/unla/blob/main/docs/i18n_direct_errors.md

Initialize the global translator at application startup. This loads translation files from the specified configuration path. Optionally set a default language.

```go
func main() {
    // Initialize translator
    if err := i18n.InitTranslator("configs/i18n"); err != nil {
        log.Printf("Warning: Failed to load translations: %v\n", err)
    }
    
    // Set default language (optional, defaults to zh)
    i18n.SetDefaultLanguage("zh")
    
    // ...other initialization code
}
```

--------------------------------

### Return Tenant Not Found Error (Old Way)

Source: https://github.com/amoylab/unla/blob/main/docs/i18n.md

Illustrates the older method of returning a simple error string for a 'tenant not found' scenario.

```go
if tenant == nil {
    return nil, errors.New("ErrorTenantNotFound")
}
```

--------------------------------

### Run Specific Go Services

Source: https://github.com/amoylab/unla/blob/main/CLAUDE.md

Manually run specific Go backend services like the API server, MCP gateway, or mock server with their respective configurations.

```bash
go run cmd/apiserver/main.go -c configs/apiserver.yaml
go run cmd/mcp-gateway/main.go -c configs/mcp-gateway.yaml
go run cmd/mock-server/main.go
```

--------------------------------

### Use I18nError for Simple Errors (New Way)

Source: https://github.com/amoylab/unla/blob/main/docs/i18n.md

Shows how to return a simple internationalized error using the new I18nError type when a tenant is not found.

```go
import (
    "github.com/amoylab/unla/internal/apiserver/middleware"
    "github.com/amoylab/unla/pkg/i18n"
)

if tenant == nil {
    return c.Error(middleware.GetI18nError("ErrorTenantNotFound"))
}
```

--------------------------------

### Run Go Service Tests

Source: https://github.com/amoylab/unla/blob/main/agents.md

After making modifications to Go services, run this command to execute the test suite and ensure correctness.

```bash
make test
```

--------------------------------

### Launch Unla Docker Container

Source: https://github.com/amoylab/unla/blob/main/README.md

Run the Unla all-in-one Docker image. This command maps necessary ports for the gateway and management UI, sets the environment to production, specifies the timezone, and injects the previously configured environment variables. The container is set to restart automatically unless stopped.

```bash
docker run -d \
  --name unla \
  -p 8080:80 \
  -p 5234:5234 \
  -p 5235:5235 \
  -p 5335:5335 \
  -p 5236:5236 \
  -e ENV=production \
  -e TZ=Asia/Shanghai \
  -e APISERVER_JWT_SECRET_KEY=${APISERVER_JWT_SECRET_KEY} \
  -e SUPER_ADMIN_USERNAME=${SUPER_ADMIN_USERNAME} \
  -e SUPER_ADMIN_PASSWORD=${SUPER_ADMIN_PASSWORD} \
  --restart unless-stopped \
  ghcr.io/amoylab/unla/allinone:latest
```

--------------------------------

### Use Predefined I18nError with Parameters

Source: https://github.com/amoylab/unla/blob/main/docs/i18n.md

Shows how to use predefined internationalized errors, like `ErrNotFound`, and attach parameters to them.

```go
import (
    "github.com/amoylab/unla/internal/apiserver/middleware"
    "github.com/amoylab/unla/pkg/i18n"
)

if isNotFound(err) {
    return c.Error(i18n.ErrNotFound.WithParam("ID", id))
}
```

--------------------------------

### Test Go MCP Gateway Configuration

Source: https://github.com/amoylab/unla/blob/main/CLAUDE.md

Test the configuration of the Go MCP gateway service.

```bash
go run cmd/mcp-gateway/main.go test -c configs/mcp-gateway.yaml
```

--------------------------------

### Return Success or Info Message (Old Way)

Source: https://github.com/amoylab/unla/blob/main/docs/i18n.md

Demonstrates the older approach to returning success or informational messages in API responses.

```go
c.JSON(http.StatusOK, gin.H{
    "data": result,
    "message": "SuccessResourceCreated",
})

c.JSON(http.StatusOK, gin.H{
    "message": "InfoOperationInProgress",
})
```

--------------------------------

### Embed Parameters in Messages

Source: https://github.com/amoylab/unla/blob/main/docs/i18n.md

Illustrates how to define and use parameters within internationalized messages using Go.

```go
// 在消息定义中使用参数
// translations/en/messages.toml
[ErrorValidationFailed]
other = "Validation failed: {{.Reason}}"

// 在代码中使用
return middleware.GetI18nErrorWithData("ErrorValidationFailed", map[string]interface{}{
    "Reason": "Field 'name' cannot be empty",
})
```

--------------------------------

### Import Necessary Packages for i18n

Source: https://github.com/amoylab/unla/blob/main/docs/i18n_direct_errors.md

Import the i18n package to utilize its internationalization features.

```go
import (
    "github.com/amoylab/unla/pkg/i18n"
)
```

--------------------------------

### Lint Web Frontend Codebase

Source: https://github.com/amoylab/unla/blob/main/agents.md

If changes are made to the web frontend, use this command to lint the codebase and check for style and potential errors.

```bash
npm run lint
```

--------------------------------

### Return Errors in Route Handlers (Go)

Source: https://github.com/amoylab/unla/blob/main/docs/i18n_example.md

Shows how to return different types of i18n errors from route handlers using helper functions. Ensure necessary packages are imported.

```go
// 导入必要的包
import (
    "github.com/gin-gonic/gin"
    "github.com/amoylab/unla/internal/apiserver/middleware"
    "github.com/amoylab/unla/pkg/i18n"
)

// 简单的错误
func GetUser(c *gin.Context) {
    userID := c.Param("id")
    user, err := userService.GetByID(userID)
    if err != nil {
        // 返回一个国际化错误
        c.Error(middleware.GetI18nError("ErrorUserNotFound"))
        return
    }
    c.JSON(200, user)
}

// 带参数的错误
func CreateUser(c *gin.Context) {
    var user User
    if err := c.ShouldBindJSON(&user); err != nil {
        // 返回带参数的国际化错误
        c.Error(middleware.GetI18nErrorWithData("ErrorInvalidInput", map[string]interface{}{
            "Field": "name",
            "Reason": "Cannot be empty",
        }))
        return
    }
    
    // 继续处理...
}

// 带状态码的错误
func DeleteUser(c *gin.Context) {
    userID := c.Param("id")
    if !hasPermission(c, userID) {
        // 返回带状态码的国际化错误
        c.Error(middleware.GetI18nErrorWithCode("ErrorForbidden", i18n.ErrorForbidden))
        return
    }
    
    err := userService.Delete(userID)
    if err != nil {
        if isNotFound(err) {
            c.Error(middleware.GetI18nErrorWithCode("ErrorUserNotFound", i18n.ErrorNotFound))
        } else {
            c.Error(middleware.GetI18nErrorWithCode("ErrorInternalServer", i18n.ErrorInternalServer))
        }
        return
    }
    
    c.Status(204)
}

// 带状态码和参数的错误
func UpdateUser(c *gin.Context) {
    userID := c.Param("id")
    var updates UserUpdates
    
    if err := c.ShouldBindJSON(&updates); err != nil {
        c.Error(middleware.GetI18nErrorWithCodeAndData(
            "ErrorValidationFailed", 
            i18n.ErrorBadRequest,
            map[string]interface{}{"Reason": err.Error()},
        ))
        return
    }
    
    // 继续处理...
}
```

--------------------------------

### Use I18nError with Parameters (New Way)

Source: https://github.com/amoylab/unla/blob/main/docs/i18n.md

Illustrates returning an internationalized error with additional data or parameters, like validation failure reasons.

```go
import (
    "github.com/amoylab/unla/internal/apiserver/middleware"
    "github.com/amoylab/unla/pkg/i18n"
)

if validationErr != nil {
    return c.Error(middleware.GetI18nErrorWithData("ErrorValidationFailed", map[string]interface{}{
        "Reason": validationErr.Error(),
    }))
}
```

--------------------------------

### Lint Web Frontend Code

Source: https://github.com/amoylab/unla/blob/main/CLAUDE.md

Lint the TypeScript/React code for the web frontend.

```bash
cd web/
pnpm run lint
```

--------------------------------

### Predefined Errors in pkg/i18n Package

Source: https://github.com/amoylab/unla/blob/main/docs/i18n_direct_errors.md

The `pkg/i18n` package provides several commonly used predefined errors, such as `ErrNotFound`, `ErrUnauthorized`, `ErrForbidden`, `ErrBadRequest`, and `ErrInternalServer`, each associated with a specific error code.

```go
var (
    ErrNotFound = NewErrorWithCode("ErrorResourceNotFound", ErrorNotFound)
    ErrUnauthorized = NewErrorWithCode("ErrorUnauthorized", ErrorUnauthorized)
    ErrForbidden = NewErrorWithCode("ErrorForbidden", ErrorForbidden)
    ErrBadRequest = NewErrorWithCode("ErrorBadRequest", ErrorBadRequest)
    ErrInternalServer = NewErrorWithCode("ErrorInternalServer", ErrorInternalServer)
)
```

--------------------------------

### Test MCP Gateway Configuration

Source: https://github.com/amoylab/unla/blob/main/CLAUDE.md

Validate the configuration file for the MCP gateway before deployment. This command checks the syntax and structure of the provided YAML configuration.

```bash
# Test configuration before deployment
go run cmd/mcp-gateway/main.go test -c configs/mcp-gateway.yaml

```

--------------------------------

### Use I18nError with Status Code (New Way)

Source: https://github.com/amoylab/unla/blob/main/docs/i18n.md

Demonstrates returning an internationalized error with a specific status code, such as 'ErrorForbidden'.

```go
import (
    "github.com/amoylab/unla/internal/apiserver/middleware"
    "github.com/amoylab/unla/pkg/i18n"
)

if !hasPermission(c) {
    return c.Error(middleware.GetI18nErrorWithCode("ErrorForbidden", i18n.ErrorForbidden))
}
```

--------------------------------

### Use Predefined Internationalized Errors

Source: https://github.com/amoylab/unla/blob/main/docs/i18n_direct_errors.md

Return predefined errors like `ErrNotFound` or `ErrForbidden`. For errors requiring specific details, use `WithParam` to attach contextual information.

```go
// Return a predefined error
if user == nil {
    return nil, i18n.ErrNotFound
}

// Return a predefined error with parameters
if !hasPermission() {
    return nil, i18n.ErrForbidden.WithParam("Resource", resourceName)
}
```

--------------------------------

### Configure Environment Variables for Unla Docker Launch

Source: https://github.com/amoylab/unla/blob/main/README.md

Set these environment variables before launching the Unla Docker container to configure JWT secrets and administrator credentials. Ensure you generate secure, random secrets for production environments.

```bash
export APISERVER_JWT_SECRET_KEY="changeme-please-generate-a-random-secret"
export SUPER_ADMIN_USERNAME="admin"
export SUPER_ADMIN_PASSWORD="changeme-please-use-a-secure-password"
```

--------------------------------

### Handle Errors in HTTP Handlers with Helper Function

Source: https://github.com/amoylab/unla/blob/main/docs/i18n_direct_errors.md

Use the `RespondWithError` helper function within Gin HTTP handlers to automatically translate and send internationalized errors to the client.

```go
func GetUser(c *gin.Context) {
    userID := c.Param("id")
    user, err := userService.GetByID(userID)
    if err != nil {
        // Use helper function to handle error
        i18n.RespondWithError(c, err)
        return
    }
    
    c.JSON(http.StatusOK, user)
}
```

--------------------------------

### Translate Success Messages in Gin Handlers

Source: https://github.com/amoylab/unla/blob/main/docs/i18n_direct_errors.md

Use `TranslateMessageGin` to translate success messages for responses within Gin handlers. It supports passing context and additional data for parameter substitution.

```go
// Translate success message
c.JSON(http.StatusOK, gin.H{
    "message": i18n.TranslateMessageGin("SuccessResourceCreated", c, nil),
    "data": result,
})

// Success message with parameters
c.JSON(http.StatusOK, gin.H{
    "message": i18n.TranslateMessageGin("SuccessResourceCreated", c, map[string]interface{}{
        "ResourceType": "User",
        "ResourceName": user.Name,
    }),
    "data": user,
})
```

--------------------------------

### Frontend Displaying Translated Messages

Source: https://github.com/amoylab/unla/blob/main/docs/i18n.md

Demonstrates how frontend code displays translated success messages received from the API.

```typescript
toast.success(response.data.message);
```

--------------------------------

### Reload MCP Gateway Configuration

Source: https://github.com/amoylab/unla/blob/main/CLAUDE.md

Live reload the configuration for the MCP gateway. This command applies changes to the running service without requiring a restart.

```bash
# Live reload configuration
go run cmd/mcp-gateway/main.go reload -c configs/mcp-gateway.yaml

```

--------------------------------

### Add New Messages to TOML Files

Source: https://github.com/amoylab/unla/blob/main/docs/i18n.md

Shows how to add new internationalized messages to TOML files for English and Chinese.

```toml
# 在 translations/en/messages.toml 中添加
[ErrorCustomValidationFailed]
other = "Custom validation failed: {{.Reason}}"

# 在 translations/zh/messages.toml 中添加
[ErrorCustomValidationFailed]
other = "自定义验证失败：{{.Reason}}"
```

--------------------------------

### Render Template via API POST Request

Source: https://github.com/amoylab/unla/blob/main/cmd/template-tester/playground.html

Sends the template and optional JSON response body to the '/api/render' endpoint for processing. Handles success, API errors, and network failures.

```javascript
async function renderTemplate() { const template = document.getElementById('template').value; const responseBodyText = document.getElementById('responseBody').value; const errorEl = document.getElementById('errorMessage'); const statusEl = document.getElementById('status'); const outputEl = document.getElementById('output'); errorEl.style.display = 'none'; statusEl.style.display = 'none'; if (!template) { showError('Template is required'); return; } const payload = { template: template }; try { if (responseBodyText.trim()) { payload.responseBody = JSON.parse(responseBodyText); } } catch (e) { showError('Invalid JSON in Response Body: ' + e.message); return; } try { const response = await fetch('/api/render', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) }); const data = await response.json(); if (response.ok) { outputEl.value = data.result; statusEl.textContent = 'Success'; statusEl.className = 'output-status status-success'; statusEl.style.display = 'inline-block'; } else { showError(data.error || 'Unknown error occurred'); } } catch (e) { showError('Failed to render template: ' + e.message); } }
```

--------------------------------

### Create Custom Internationalized Errors

Source: https://github.com/amoylab/unla/blob/main/docs/i18n_direct_errors.md

Create new internationalized errors using `NewErrorWithCode`. This allows specifying a custom message ID and an associated error code. You can also add parameters to these custom errors.

```go
// Create a new internationalized error
if tenant == nil {
    return nil, i18n.NewErrorWithCode("ErrorTenantNotFound", i18n.ErrorNotFound).WithParam("Name", tenantName)
}

// Error with parameters
if err := validate(input); err != nil {
    return nil, i18n.NewErrorWithCode("ErrorValidationFailed", i18n.ErrorBadRequest).WithParam("Reason", err.Error())
}
```

--------------------------------

### Clear All Input Fields

Source: https://github.com/amoylab/unla/blob/main/cmd/template-tester/playground.html

Resets the template, response body, and output fields to their default empty states, and hides any displayed error or status messages.

```javascript
function clearAll() { document.getElementById('template').value = ''; document.getElementById('responseBody').value = ''; document.getElementById('output').value = ''; document.getElementById('errorMessage').style.display = 'none'; document.getElementById('status').style.display = 'none'; }
```

--------------------------------

### Check Service Status

Source: https://github.com/amoylab/unla/blob/main/CLAUDE.md

Query the health endpoint of the service to check its operational status. This is typically used to ensure the service is running and responsive.

```bash
curl http://localhost:5234/health

```

--------------------------------

### Fix Template with AI via API POST Request

Source: https://github.com/amoylab/unla/blob/main/cmd/template-tester/playground.html

Submits the current template, response body, and any existing error message to the '/api/fix' endpoint for AI-driven correction. Updates the template and output upon successful fixing.

```javascript
async function fixWithAI() { const template = document.getElementById('template').value; const responseBodyText = document.getElementById('responseBody').value; const currentError = document.getElementById('errorMessage').textContent; const statusEl = document.getElementById('status'); const outputEl = document.getElementById('output'); const errorEl = document.getElementById('errorMessage'); if (!template) { showError('Template is required'); return; } // Set loading state statusEl.textContent = 'Asking AI...'; statusEl.className = 'output-status status-working'; statusEl.style.display = 'inline-block'; errorEl.style.display = 'none'; const payload = { template: template, error: currentError || "" }; try { if (responseBodyText.trim()) { payload.responseBody = JSON.parse(responseBodyText); } } catch (e) { showError('Invalid JSON in Response Body: ' + e.message); return; } try { const response = await fetch('/api/fix', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) }); const data = await response.json(); if (response.ok) { // Update template document.getElementById('template').value = data.fixedTemplate; // Show result outputEl.value = data.result; statusEl.textContent = 'Fixed by AI'; statusEl.className = 'output-status status-success'; statusEl.style.display = 'inline-block'; } else { showError(data.error || 'AI Fix failed'); } } catch (e) { showError('Failed to call AI: ' + e.message); } }
```

--------------------------------

### Display Error Messages

Source: https://github.com/amoylab/unla/blob/main/cmd/template-tester/playground.html

Updates the error message display area and sets the status indicator to 'Error'. Clears the output field when an error occurs.

```javascript
function showError(message) { const errorEl = document.getElementById('errorMessage'); const statusEl = document.getElementById('status'); errorEl.textContent = message; errorEl.style.display = 'block'; statusEl.textContent = 'Error'; statusEl.className = 'output-status status-error'; statusEl.style.display = 'inline-block'; document.getElementById('output').value = ''; }
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.