opencatd-open/frontend/src/views/dashboard/KeyView.vue

<template>
  <div class="space-y-5">
    <BreadcrumbHeader title="Channel Details" />

    <div v-if="ch" class="space-y-5">
      <div class="card border border-base-300/60 bg-base-100 shadow-sm">
        <form @submit.prevent="updateCh" class="card-body gap-5 p-4 sm:p-6">
          <section class="space-y-4">
            <h2 class="text-xs font-semibold uppercase tracking-wider text-base-content/50">Basic Information</h2>
            <div class="grid grid-cols-1 gap-x-4 gap-y-4 md:grid-cols-2">
              <div>
                <label for="ch-name" class="mb-1 block text-sm font-medium">
                  Name <span class="text-error" aria-hidden="true">*</span>
                </label>
                <input id="ch-name" name="name" type="text" v-model="ch.name" autocomplete="off" spellcheck="false"
                  class="input input-bordered w-full" required />
              </div>

              <div>
                <label for="ch-provider" class="mb-1 block text-sm font-medium">
                  Provider
                </label>
                <div class="input input-bordered w-full bg-base-200">{{ ch.provider }}</div>
              </div>

              <div>
                <label for="ch-base-url" class="mb-1 block text-sm font-medium">
                  Base URL <span class="text-error" aria-hidden="true">*</span>
                </label>
                <input id="ch-base-url" name="base_url" type="url" v-model="ch.base_url" spellcheck="false"
                  class="input input-bordered w-full font-mono text-sm" required />
              </div>

              <div>
                <label for="ch-api-key" class="mb-1 block text-sm font-medium">API Key</label>
                <input id="ch-api-key" name="api_key" type="password" v-model="api_key" autocomplete="off"
                  spellcheck="false" placeholder="Leave blank to keep current"
                  class="input input-bordered w-full font-mono text-sm" />
              </div>
            </div>
          </section>

          <section class="collapse collapse-arrow rounded-lg border border-base-300/60">
            <input type="checkbox" checked class="min-h-0 py-2" />
            <div class="collapse-title min-h-0 px-3 py-2 text-sm font-medium">
              Advanced Options
            </div>
            <div class="collapse-content px-3">
              <div class="grid grid-cols-1 gap-x-4 gap-y-4 pt-3 md:grid-cols-2">
                <div>
                  <label for="ch-priority" class="mb-1 block text-sm font-medium">Priority</label>
                  <input id="ch-priority" name="priority" type="number" v-model.number="ch.priority"
                    autocomplete="off" class="input input-bordered w-full" />
                </div>

                <div>
                  <label for="ch-weight" class="mb-1 block text-sm font-medium">Weight</label>
                  <input id="ch-weight" name="weight" type="number" v-model.number="ch.weight"
                    autocomplete="off" class="input input-bordered w-full" />
                </div>

                <div>
                  <label for="ch-timeout" class="mb-1 block text-sm font-medium">Timeout (ms)</label>
                  <input id="ch-timeout" name="timeout_ms" type="number" v-model.number="ch.timeout_ms"
                    autocomplete="off" class="input input-bordered w-full" />
                </div>

                <div>
                  <label for="ch-max-concurrency" class="mb-1 block text-sm font-medium">Max Concurrency</label>
                  <input id="ch-max-concurrency" name="max_concurrency" type="number" v-model.number="ch.max_concurrency"
                    autocomplete="off" class="input input-bordered w-full" />
                </div>

                <div>
                  <span class="mb-1 block text-sm font-medium">Status</span>
                  <div class="flex h-9 items-center gap-3">
                    <input type="checkbox" name="enabled" :checked="ch.enabled" role="switch" class="toggle toggle-sm"
                      :class="ch.enabled ? 'toggle-success' : 'toggle-error'" @change="toggleEnabled" aria-label="Channel enabled" />
                    <span class="text-sm text-base-content/70">
                      {{ ch.enabled ? 'Enabled' : 'Disabled' }}
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </section>

          <div class="flex items-center justify-end gap-3 border-t border-base-300/40 pt-4">
            <button type="button" @click="goBack" class="btn btn-ghost btn-sm">Back</button>
            <button type="button" @click="testChannel" class="btn btn-warning btn-sm" :disabled="testing">
              <span v-if="testing" class="loading loading-spinner loading-xs" aria-hidden="true"></span>
              Test Connection
            </button>
            <button type="submit" class="btn btn-primary btn-sm px-5" :disabled="updating">
              <span v-if="updating" class="loading loading-spinner loading-xs" aria-hidden="true"></span>
              Save Changes
            </button>
          </div>
        </form>
      </div>

      <!-- Model Bindings -->
      <div class="card border border-base-300/60 bg-base-100 shadow-sm">
        <div class="card-body gap-4 p-4 sm:p-6">
          <div class="flex items-center justify-between">
            <h2 class="text-xs font-semibold uppercase tracking-wider text-base-content/50">Model Bindings</h2>
            <button class="btn btn-primary btn-sm" @click="openAddModelModal">
              <PlusIcon class="h-4 w-4" aria-hidden="true" />Add Model
            </button>
          </div>
          
          <div v-if="bindings.length > 0" class="overflow-x-auto">
            <table class="table table-sm">
              <thead>
                <tr class="text-xs uppercase tracking-wider text-base-content/50">
                  <th>Model Name</th>
                  <th>Upstream Model</th>
                  <th class="text-right">Weight</th>
                  <th class="text-right"><span class="sr-only">Actions</span></th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="b in bindings" :key="b.id" class="border-base-300/40">
                  <td class="font-medium">{{ b.model_name }}</td>
                  <td class="font-mono text-xs">{{ b.upstream_model }}</td>
                  <td class="text-right">{{ b.weight }}</td>
                  <td class="text-right">
                    <button class="btn btn-ghost btn-xs btn-square text-error" @click="confirmDeleteBinding(b)"
                      aria-label="Delete binding">
                      <TrashIcon class="h-4 w-4" aria-hidden="true" />
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <div v-else class="py-6 text-center text-sm text-base-content/50">
            No model bindings configured.
          </div>
        </div>
      </div>
    </div>

    <!-- Loading state -->
    <div v-else class="card border border-base-300/60 bg-base-100 shadow-sm">
      <div class="card-body">
        <div class="flex items-center justify-center py-10" role="status" aria-label="Loading channel details">
          <span class="loading loading-spinner loading-lg text-primary"></span>
        </div>
      </div>
    </div>

    <!-- Add Model Modal -->
    <dialog ref="addModelModalRef" class="modal">
      <div class="modal-box max-w-lg px-0 sm:px-6">
        <form method="dialog">
          <button class="btn btn-circle btn-ghost btn-sm absolute right-2 top-2" aria-label="Close dialog">✕</button>
        </form>
        <h3 class="mb-4 text-lg font-bold">Add Model Binding</h3>
        <form @submit.prevent="addModelBinding" class="space-y-4">
          <label class="floating-label">
            <span>Model ID *</span>
            <input v-model.number="newBinding.model_id" type="number" placeholder="Model ID" class="input w-full" required />
          </label>
          <label class="floating-label">
            <span>Upstream Model Name *</span>
            <input v-model="newBinding.upstream_model" type="text" placeholder="e.g. gpt-4o" class="input w-full" required />
          </label>
          <label class="floating-label">
            <span>Weight</span>
            <input v-model.number="newBinding.weight" type="number" min="1" placeholder="1" class="input w-full" />
          </label>
          <div class="modal-action">
            <button type="button" class="btn btn-ghost" @click="closeAddModelModal">Cancel</button>
            <button type="submit" class="btn btn-primary" :disabled="addingModel">
              {{ addingModel ? 'Adding...' : 'Add' }}
            </button>
          </div>
        </form>
      </div>
      <form method="dialog" class="modal-backdrop">
        <button aria-label="Close dialog">close</button>
      </form>
    </dialog>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useChannelStore, type Channel, type ChannelModelBinding } from '../../stores/channel';
import BreadcrumbHeader from '@/components/dashboard/BreadcrumbHeader.vue';
import { useToast } from '@/composables/toast';

import { PlusIcon, TrashIcon } from '@lucide/vue';

const route = useRoute();
const router = useRouter();
const channelStore = useChannelStore();
const { setToast } = useToast();
const updating = ref(false);
const testing = ref(false);
const api_key = ref('');
const bindings = ref<ChannelModelBinding[]>([]);

const channelId = computed(() => route.query.id);
const ch = computed(() => channelStore.channel);

onMounted(async () => {
  if (channelId.value) {
    await channelStore.fetchChannel(channelId.value as string);
    await fetchBindings();
  }
});

const fetchBindings = async () => {
  if (channelId.value) {
    bindings.value = await channelStore.fetchChannelModels(channelId.value as string);
  }
};

const toggleEnabled = () => {
  if (!ch.value) return;
  ch.value.enabled = !ch.value.enabled;
};

const updateCh = async () => {
  if (!ch.value) return;
  updating.value = true;
  try {
    const payload: Partial<Channel> & { api_key?: string } = {
      name: ch.value.name,
      base_url: ch.value.base_url,
      priority: ch.value.priority,
      weight: ch.value.weight,
      timeout_ms: ch.value.timeout_ms,
      max_concurrency: ch.value.max_concurrency,
      enabled: ch.value.enabled,
    };
    if (api_key.value) {
      payload.api_key = api_key.value;
    }
    const res = await channelStore.updateChannel(ch.value.id, payload);
    if (res.data?.id) {
      setToast(`Channel ${ch.value.name} updated`, 'success');
    }
    await channelStore.fetchChannel(ch.value.id);
  } catch (err: any) {
    console.error('Error updating channel:', err);
  } finally {
    updating.value = false;
  }
};

const testChannel = async () => {
  if (!ch.value) return;
  testing.value = true;
  try {
    const result = await channelStore.testChannel(ch.value.id);
    setToast(`Connection OK (${result.data?.latency_ms}ms)`, 'success');
  } catch (err: any) {
    setToast(err.response?.data?.error || 'Connection test failed', 'error');
  } finally {
    testing.value = false;
  }
};

const goBack = () => {
  router.push({ name: 'Channels' });
};

// Model binding
const addModelModalRef = ref<HTMLDialogElement | null>(null);
const addingModel = ref(false);
const newBinding = ref({
  model_id: 0,
  upstream_model: '',
  weight: 1,
});

const openAddModelModal = () => {
  newBinding.value = { model_id: 0, upstream_model: '', weight: 1 };
  addModelModalRef.value?.showModal();
};

const closeAddModelModal = () => {
  addModelModalRef.value?.close();
};

const addModelBinding = async () => {
  if (!channelId.value || !newBinding.value.model_id || !newBinding.value.upstream_model) return;
  addingModel.value = true;
  try {
    await channelStore.addChannelModel(channelId.value as string, newBinding.value);
    setToast('Model binding added', 'success');
    closeAddModelModal();
    await fetchBindings();
  } catch (err: any) {
    setToast(err.response?.data?.error || 'Failed to add binding', 'error');
  } finally {
    addingModel.value = false;
  }
};

const confirmDeleteBinding = async (b: ChannelModelBinding) => {
  if (confirm(`Remove binding for model "${b.model_name}"?`)) {
    try {
      await channelStore.deleteChannelModel(channelId.value as string, b.id);
      setToast('Binding removed', 'success');
      await fetchBindings();
    } catch (err: any) {
      setToast('Delete failed', 'error');
    }
  }
};
</script>