/app/chrome-extension/entrypoints/options/App.vue

<template>
  <div class="page">
    <header class="topbar">
      <h1>{{ m('userscriptsManagerTitle') }}</h1>
      <div class="switch">
        <label>
          <input type="checkbox" v-model="emergencyDisabled" @change="saveEmergency" />
          <span>{{ m('emergencySwitchLabel') }}</span>
        </label>
      </div>
    </header>

    <section class="create">
      <h2>{{ m('createRunSectionTitle') }}</h2>
      <div class="grid">
        <label>
          {{ m('nameLabel') }}
          <input v-model="form.name" :placeholder="m('placeholderOptional')" />
        </label>
        <label>
          {{ m('runAtLabel') }}
          <select v-model="form.runAt">
            <option value="auto">{{ m('runAtAuto') }}</option>
            <option value="document_start">{{ m('runAtDocumentStart') }}</option>
            <option value="document_end">{{ m('runAtDocumentEnd') }}</option>
            <option value="document_idle">{{ m('runAtDocumentIdle') }}</option>
          </select>
        </label>
        <label>
          {{ m('worldLabel') }}
          <select v-model="form.world">
            <option value="auto">{{ m('worldAuto') }}</option>
            <option value="ISOLATED">{{ m('worldIsolated') }}</option>
            <option value="MAIN">{{ m('worldMain') }}</option>
          </select>
        </label>
        <label>
          {{ m('modeLabel') }}
          <select v-model="form.mode">
            <option value="auto">{{ m('modeAuto') }}</option>
            <option value="persistent">{{ m('modePersistent') }}</option>
            <option value="css">{{ m('modeCss') }}</option>
            <option value="once">{{ m('modeOnce') }}</option>
          </select>
        </label>
        <label>
          {{ m('allFramesLabel') }}
          <input type="checkbox" v-model="form.allFrames" />
        </label>
        <label>
          {{ m('persistLabel') }}
          <input type="checkbox" v-model="form.persist" />
        </label>
        <label>
          {{ m('dnrFallbackLabel') }}
          <input type="checkbox" v-model="form.dnrFallback" />
        </label>
      </div>
      <label>
        {{ m('matchesInputLabel') }}
        <input v-model="form.matches" :placeholder="m('placeholderMatchesExample')" />
      </label>
      <label>
        {{ m('excludesInputLabel') }}
        <input v-model="form.excludes" :placeholder="m('placeholderOptional')" />
      </label>
      <label>
        {{ m('tagsInputLabel') }}
        <input v-model="form.tags" :placeholder="m('placeholderOptional')" />
      </label>
      <label>
        {{ m('scriptLabel') }}
        <textarea v-model="form.script" :placeholder="m('placeholderScriptHint')" rows="8" />
      </label>
      <div class="row">
        <button :disabled="submitting" @click="apply('auto')">{{ m('applyButton') }}</button>
        <button :disabled="submitting" @click="apply('once')">{{ m('runOnceButton') }}</button>
        <span class="hint" v-if="lastResult">{{ lastResult }}</span>
      </div>
    </section>

    <section class="filters">
      <h2>{{ m('listSectionTitle') }}</h2>
      <div class="grid">
        <label>
          {{ m('queryLabel') }}
          <input v-model="filters.query" @input="reload()" />
        </label>
        <label>
          {{ m('statusLabel') }}
          <select v-model="filters.status" @change="reload()">
            <option value="">{{ m('statusAll') }}</option>
            <option value="enabled">{{ m('statusEnabled') }}</option>
            <option value="disabled">{{ m('statusDisabled') }}</option>
          </select>
        </label>
        <label>
          {{ m('domainLabel') }}
          <input
            v-model="filters.domain"
            @input="reload()"
            :placeholder="m('placeholderDomainHint')"
          />
        </label>
      </div>
      <div class="row">
        <button @click="exportAll">{{ m('exportAllButton') }}</button>
      </div>
      <table class="table">
        <thead>
          <tr>
            <th>{{ m('tableHeaderName') }}</th>
            <th>{{ m('statusLabel') }}</th>
            <th>{{ m('tableHeaderWorld') }}</th>
            <th>{{ m('tableHeaderRunAt') }}</th>
            <th>{{ m('tableHeaderUpdated') }}</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="it in items" :key="it.id">
            <td>{{ it.name || it.id }}</td>
            <td>
              <label>
                <input type="checkbox" :checked="it.status === 'enabled'" @change="toggle(it)" />
                {{ it.status }}
              </label>
            </td>
            <td>{{ it.world }}</td>
            <td>{{ it.runAt }}</td>
            <td>{{ formatTime(it.updatedAt) }}</td>
            <td class="actions">
              <button @click="remove(it)">{{ m('deleteButton') }}</button>
            </td>
          </tr>
        </tbody>
      </table>
    </section>

    <!-- Flow Editor removed: unified to Builder in Popup -->
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { TOOL_NAMES } from 'chrome-mcp-shared';
import { STORAGE_KEYS } from '@/common/constants';

type ListItem = {
  id: string;
  name?: string;
  status: 'enabled' | 'disabled';
  world: 'ISOLATED' | 'MAIN';
  runAt: 'document_start' | 'document_end' | 'document_idle';
  updatedAt: number;
};

const emergencyDisabled = ref(false);
const items = ref<ListItem[]>([]);
const filters = ref({ query: '', status: '', domain: '' });

const form = ref({
  name: '',
  runAt: 'auto',
  world: 'auto',
  mode: 'auto',
  allFrames: true,
  persist: true,
  dnrFallback: true,
  script: '',
  matches: '',
  excludes: '',
  tags: '',
});

const submitting = ref(false);
const lastResult = ref('');

function formatTime(ts?: number) {
  if (!ts) return '';
  try {
    return new Date(ts).toLocaleString();
  } catch {
    return String(ts);
  }
}

async function saveEmergency() {
  await globalThis.chrome?.storage?.local.set({
    [STORAGE_KEYS.USERSCRIPTS_DISABLED]: emergencyDisabled.value,
  });
}

async function loadEmergency() {
  const v = await globalThis.chrome?.storage?.local.get([STORAGE_KEYS.USERSCRIPTS_DISABLED] as any);
  emergencyDisabled.value = !!v[STORAGE_KEYS.USERSCRIPTS_DISABLED];
}

async function callTool(name: string, args: any) {
  const res = await globalThis.chrome?.runtime?.sendMessage({
    type: 'call_tool',
    name,
    args,
  } as any);
  if (!res || !res.success) throw new Error(res?.error || 'call failed');
  return res.result;
}

async function reload() {
  const result = await callTool(TOOL_NAMES.BROWSER.USERSCRIPT, {
    action: 'list',
    args: { ...filters.value },
  });
  try {
    const txt = (result?.content?.[0]?.text as string) || '{}';
    const data = JSON.parse(txt);
    items.value = data.items || [];
  } catch (e) {
    console.warn('parse list failed', e);
  }
}

async function apply(mode: 'auto' | 'once') {
  if (!form.value.script.trim()) return;
  submitting.value = true;
  lastResult.value = '';
  try {
    const args: any = {
      script: form.value.script,
      name: form.value.name || undefined,
      runAt: form.value.runAt as any,
      world: form.value.world as any,
      allFrames: !!form.value.allFrames,
      persist: !!form.value.persist,
      dnrFallback: !!form.value.dnrFallback,
      mode,
    };
    if (form.value.matches.trim())
      args.matches = form.value.matches.split(',').map((s) => s.trim());
    if (form.value.excludes.trim())
      args.excludes = form.value.excludes.split(',').map((s) => s.trim());
    if (form.value.tags.trim()) args.tags = form.value.tags.split(',').map((s) => s.trim());

    const result = await callTool(TOOL_NAMES.BROWSER.USERSCRIPT, { action: 'create', args });
    lastResult.value = (result?.content?.[0]?.text as string) || '';
    await reload();
  } catch (e: any) {
    lastResult.value = 'Error: ' + (e?.message || String(e));
  } finally {
    submitting.value = false;
  }
}

async function toggle(it: ListItem) {
  try {
    await callTool(TOOL_NAMES.BROWSER.USERSCRIPT, {
      action: it.status === 'enabled' ? 'disable' : 'enable',
      args: { id: it.id },
    });
    await reload();
  } catch (e) {
    console.warn('toggle failed', e);
  }
}

async function remove(it: ListItem) {
  try {
    await callTool(TOOL_NAMES.BROWSER.USERSCRIPT, { action: 'remove', args: { id: it.id } });
    await reload();
  } catch (e) {
    console.warn('remove failed', e);
  }
}

async function exportAll() {
  try {
    const res = await callTool(TOOL_NAMES.BROWSER.USERSCRIPT, { action: 'export', args: {} });
    const txt = (res?.content?.[0]?.text as string) || '{}';
    const blob = new Blob([txt], { type: 'application/json' });
    const url = URL.createObjectURL(blob);
    await globalThis.chrome?.downloads?.download({
      url,
      filename: 'userscripts-export.json',
      saveAs: true,
    } as any);
    URL.revokeObjectURL(url);
  } catch (e) {
    console.warn('export failed', e);
  }
}

onMounted(async () => {
  await loadEmergency();
  await reload();
});

function m(key: string, substitutions?: string | string[]) {
  const msg = (globalThis.chrome?.i18n?.getMessage(key, substitutions as any) || '').trim();
  return msg || key;
}
</script>

<style scoped>
.page {
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    Segoe UI,
    Roboto,
    sans-serif;
  padding: 16px;
}
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.create,
.filters {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 16px;
}
.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
label {
  display: flex;
  flex-direction: column;
  font-size: 12px;
  gap: 4px;
}
input,
select,
textarea {
  border: 1px solid #d1d5db;
  border-radius: 6px;
  padding: 8px;
  font-size: 12px;
}
textarea {
  resize: vertical;
}
.row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
button {
  background: #3b82f6;
  color: #fff;
  border: none;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
}
button:hover {
  background: #2563eb;
}
.hint {
  color: #374151;
  font-size: 12px;
}
.table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
}
.table th,
.table td {
  border-bottom: 1px solid #e5e7eb;
  text-align: left;
  padding: 8px;
  font-size: 12px;
}
.actions {
  text-align: right;
}
.switch input {
  margin-right: 6px;
}
@media (max-width: 960px) {
  .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .grid {
    grid-template-columns: 1fr;
  }
}
</style>