bsodfather/crank
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: localize agents page

Browse Source
This commit is contained in:
a.tolmachev
2026-04-02 23:00:12 +03:00
parent a491c246e0
commit 12b43542a9
3 changed files with 274 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/ui/html/agents.html
+56 -55
View File
@@ -36,12 +36,12 @@
<svg width="11" height="11" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 6l4 4 4-4"/></svg>
</button>
<div class="ws-dropdown" id="ws-dropdown" style="display:none">
<div class="ws-dropdown-label">Your workspaces</div>
<div class="ws-dropdown-label" data-i18n="nav.workspaces">Your workspaces</div>
<div id="ws-dropdown-list"></div>
<div class="ws-dropdown-footer">
<button class="ws-dropdown-create" onclick="window.location.href='/workspace-setup?mode=create'">
<svg width="12" height="12" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><path d="M8 3v10M3 8h10"/></svg>
Create workspace
<span data-i18n="nav.create_workspace">Create workspace</span>
</button>
</div>
</div>
@@ -61,7 +61,7 @@
<svg width="12" height="12"><use href="icons/general/grid.svg#icon"/></svg>
<span>⌘K</span>
</div>
<button class="nav-icon-btn" title="Notifications">
<button class="nav-icon-btn" data-i18n-title="nav.notifications" title="Notifications">
<svg width="15" height="15"><use href="icons/general/bell.svg#icon"/></svg>
</button>
<div class="nav-divider"></div>
@@ -100,36 +100,36 @@
<!-- Page header -->
<div class="page-header">
<div>
<h1 class="page-heading">Agents</h1>
<p class="page-subheading">Named MCP endpoints that expose a curated subset of operations to an LLM</p>
<h1 class="page-heading" data-i18n="agents.title">Agents</h1>
<p class="page-subheading" data-i18n="agents.subtitle">Named MCP endpoints that expose a curated subset of operations to an LLM</p>
</div>
<button class="btn-new" @click="openCreate()">
<svg width="13" height="13" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><path d="M8 3v10M3 8h10"/></svg>
New agent
<span data-i18n="agents.new">New agent</span>
</button>
</div>
<!-- Stats -->
<div class="stats-row">
<div class="stat-card">
<div class="stat-label">Total agents</div>
<div class="stat-label" data-i18n="agents.stats.total">Total agents</div>
<div class="stat-value" x-text="agents.length">—</div>
<div class="stat-delta">across this workspace</div>
<div class="stat-delta" x-text="tKey('agents.stats.total_sub')">across this workspace</div>
</div>
<div class="stat-card">
<div class="stat-label">Published</div>
<div class="stat-label" data-i18n="agents.stats.published">Published</div>
<div class="stat-value" x-text="activeCount">—</div>
<div class="stat-delta" x-text="agents.length ? Math.round(activeCount/agents.length*100)+'% of total' : ''">—</div>
<div class="stat-delta" x-text="agents.length ? tfKey('agents.stats.published_sub', { value: Math.round(activeCount/agents.length*100) }) : ''">—</div>
</div>
<div class="stat-card">
<div class="stat-label">Operations exposed</div>
<div class="stat-label" data-i18n="agents.stats.tools">Operations exposed</div>
<div class="stat-value" x-text="totalOpsExposed">—</div>
<div class="stat-delta" x-text="'across ' + agents.length + ' agents'">—</div>
<div class="stat-delta" x-text="tfKey('agents.stats.tools_sub', { count: agents.length })">—</div>
</div>
<div class="stat-card">
<div class="stat-label">Calls today</div>
<div class="stat-label" data-i18n="agents.stats.calls">Calls today</div>
<div class="stat-value" x-text="formatCalls(totalCalls)">—</div>
<div class="stat-delta up">all agents combined</div>
<div class="stat-delta up" x-text="tKey('agents.stats.calls_sub')">all agents combined</div>
</div>
</div>
@@ -139,6 +139,7 @@
<svg width="14" height="14"><use href="icons/general/search.svg#icon"/></svg>
<input
type="text"
data-i18n-ph="agents.search"
placeholder="Search agents..."
:value="agentSearch"
@input="agentSearch = $event.target.value"
@@ -146,7 +147,7 @@
</div>
<div class="filter-right">
<span class="results-count" x-show="agentSearch">
<span x-text="filteredAgents.length"></span> of <span x-text="agents.length"></span> agents
<span x-text="tfKey('agents.results', { shown: filteredAgents.length, total: agents.length })"></span>
</span>
</div>
</div>
@@ -154,17 +155,17 @@
<!-- Info callout -->
<div class="agents-info-callout">
<svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="var(--accent)" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><circle cx="8" cy="8" r="7"/><path d="M8 11V8M8 5v-.5"/></svg>
<span>Each agent gets its own MCP endpoint. Connect your LLM client to a specific agent so it only sees the tools it needs — not all <strong x-text="operations.length">?</strong> operations in this workspace.</span>
<span x-text="tfKey('agents.callout', { count: operations.length })">Each agent gets its own MCP endpoint.</span>
</div>
<!-- Loading -->
<div class="loading-spinner" x-show="loading">
<div class="spinner"></div>
<span>Loading agents…</span>
<span data-i18n="agents.loading">Loading agents…</span>
</div>
<div class="empty-state" x-show="!loading && loadError">
<div class="empty-state-title">Failed to load agents</div>
<div class="empty-state-title" data-i18n="agents.error.title">Failed to load agents</div>
<div class="empty-state-sub" x-text="loadError"></div>
</div>
@@ -173,18 +174,18 @@
<div class="empty-state-icon">
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round" style="opacity:0.35"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><path d="M14 17.5h7M17.5 14v7"/></svg>
</div>
<div class="empty-state-title">No agents yet</div>
<div class="empty-state-sub">Create your first agent to get a dedicated MCP endpoint with a curated set of tools.</div>
<div class="empty-state-title" data-i18n="agents.empty.initial.title">No agents yet</div>
<div class="empty-state-sub" data-i18n="agents.empty.initial.sub">Create your first agent to get a dedicated MCP endpoint with a curated set of tools.</div>
<button class="btn-new" @click="openCreate()" style="margin-top: 16px;">
<svg width="13" height="13" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><path d="M8 3v10M3 8h10"/></svg>
New agent
<span data-i18n="agents.new">New agent</span>
</button>
</div>
<!-- Empty state: search returned nothing -->
<div class="empty-state" x-show="!loading && !loadError && agents.length > 0 && filteredAgents.length === 0">
<div class="empty-state-title">No agents match "<span x-text="agentSearch"></span>"</div>
<div class="empty-state-sub">Try a different search term.</div>
<div class="empty-state-title" x-text="tfKey('agents.empty.search.title', { query: agentSearch })">No agents match</div>
<div class="empty-state-sub" data-i18n="agents.empty.search.sub">Try a different search term.</div>
</div>
<!-- Agents grid -->
@@ -212,17 +213,17 @@
<div class="agent-stat">
<svg width="12" height="12" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M2 5h12M2 8h8M2 11h5"/></svg>
<span class="agent-stat-value" x-text="agent.operation_count"></span>
<span>tools</span>
<span data-i18n="agents.card.tools">tools</span>
</div>
<div class="agent-stat">
<svg width="12" height="12" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M7 2H4a1 1 0 00-1 1v3M7 2l7 7M7 2v5h5"/><path d="M3 9v4a1 1 0 001 1h8a1 1 0 001-1V9"/></svg>
<span class="agent-stat-value" x-text="agent.key_count"></span>
<span>API keys</span>
<span data-i18n="agents.card.keys">API keys</span>
</div>
<div class="agent-stat" x-show="agent.calls_today > 0">
<svg width="12" height="12" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M1 8s3-5 7-5 7 5 7 5-3 5-7 5-7-5-7-5z"/><circle cx="8" cy="8" r="2"/></svg>
<span class="agent-stat-value" x-text="formatCalls(agent.calls_today)"></span>
<span>calls today</span>
<span data-i18n="agents.card.calls_today">calls today</span>
</div>
</div>
@@ -230,18 +231,18 @@
<div class="agent-endpoint-row">
<svg width="11" height="11" viewBox="0 0 16 16" fill="none" stroke="var(--text-muted)" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M2 8h12M10 4l4 4-4 4"/></svg>
<code class="agent-endpoint-url" x-text="mcpEndpoint(agent)"></code>
<button class="agent-endpoint-copy" @click.stop="copyEndpoint(agent)" title="Copy endpoint">
<button class="agent-endpoint-copy" @click.stop="copyEndpoint(agent)" :title="tKey('agents.card.copy_endpoint')">
<svg width="11" height="11" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="5" width="9" height="9" rx="1"/><path d="M5 5V3a1 1 0 011-1h7a1 1 0 011 1v7a1 1 0 01-1 1h-2"/></svg>
</button>
</div>
<!-- Footer -->
<div class="agent-card-footer">
<span class="agent-card-date" x-text="'Created ' + formatDate(agent.created_at)"></span>
<span class="agent-card-date" x-text="tfKey('agents.card.created', { date: formatDate(agent.created_at) })"></span>
<div class="agent-card-actions">
<button class="agent-action-btn" @click.stop="openEdit(agent)">
<svg width="12" height="12" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M11 2l3 3-8 8H3v-3l8-8z"/></svg>
Edit
<span data-i18n="agents.action.edit">Edit</span>
</button>
<button class="agent-action-btn" @click.stop="applyLifecycle(agent, lifecycleAction(agent).key)">
<svg width="12" height="12" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 3.5v9l8-4.5-8-4.5z"/></svg>
@@ -249,11 +250,11 @@
</button>
<button class="agent-action-btn" x-show="agent.raw_status !== 'archived'" @click.stop="applyLifecycle(agent, 'archive')">
<svg width="12" height="12" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M2.5 4.5h11v2l-1 6.5h-8l-1-6.5v-2z"/><path d="M5 4.5v-1A1.5 1.5 0 016.5 2h3A1.5 1.5 0 0111 3.5v1"/></svg>
Archive
<span data-i18n="agents.action.archive">Archive</span>
</button>
<button class="agent-action-btn danger" @click.stop="deleteAgent(agent.id)">
<svg width="12" height="12" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M2 4h12M5 4V3a1 1 0 011-1h4a1 1 0 011 1v1M10 8v4M6 8v4"/><path d="M3 4l1 9a1 1 0 001 1h6a1 1 0 001-1l1-9"/></svg>
Delete
<span data-i18n="agents.action.delete">Delete</span>
</button>
</div>
</div>
@@ -275,8 +276,8 @@
<!-- Drawer header -->
<div class="drawer-header">
<div>
<div class="drawer-title" x-text="drawerMode === 'create' ? 'New agent' : 'Edit agent'"></div>
<div class="drawer-subtitle" x-text="drawerMode === 'create' ? 'Configure a named MCP endpoint for your LLM' : 'Update agent settings and tool selection'"></div>
<div class="drawer-title" x-text="drawerMode === 'create' ? tKey('agents.drawer.new_title') : tKey('agents.drawer.edit_title')"></div>
<div class="drawer-subtitle" x-text="drawerMode === 'create' ? tKey('agents.drawer.new_sub') : tKey('agents.drawer.edit_sub')"></div>
</div>
<button class="drawer-close" @click="closeDrawer()">
<svg width="14" height="14" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><line x1="1" y1="1" x2="11" y2="11"/><line x1="11" y1="1" x2="1" y2="11"/></svg>
@@ -288,40 +289,40 @@
<!-- Identity section -->
<div class="drawer-section">
<div class="drawer-section-title">Identity</div>
<div class="drawer-section-title" data-i18n="agents.drawer.identity">Identity</div>
<div class="form-group" style="margin-bottom: 14px;">
<label class="form-label">Display name <span class="form-label-required">required</span></label>
<input class="form-input" type="text" placeholder="Customer Support" autocomplete="off"
<label class="form-label"><span data-i18n="agents.drawer.display_name">Display name</span> <span class="form-label-required" data-i18n="agents.drawer.required">required</span></label>
<input class="form-input" type="text" data-i18n-ph="agents.drawer.placeholder.name" placeholder="Customer Support" autocomplete="off"
:value="form.display_name" @input="onNameInput($event.target.value)">
</div>
<div class="form-group" style="margin-bottom: 14px;">
<label class="form-label">Slug <span class="form-label-required">required</span></label>
<input class="form-input input-mono" type="text" placeholder="customer-support" autocomplete="off"
<label class="form-label"><span data-i18n="agents.drawer.slug">Slug</span> <span class="form-label-required" data-i18n="agents.drawer.required">required</span></label>
<input class="form-input input-mono" type="text" data-i18n-ph="agents.drawer.placeholder.slug" placeholder="customer-support" autocomplete="off"
:value="form.slug" @input="onSlugInput($event.target.value)">
<div class="form-hint" x-show="form.slug">
MCP endpoint: <code style="font-family:monospace;font-size:11px;color:var(--accent)" x-text="'/mcp/v1/' + (localStorage.getItem('crank_workspace_slug') || 'default') + '/' + form.slug"></code>
<span data-i18n="agents.drawer.endpoint">MCP endpoint</span>: <code style="font-family:monospace;font-size:11px;color:var(--accent)" x-text="'/mcp/v1/' + (localStorage.getItem('crank_workspace_slug') || 'default') + '/' + form.slug"></code>
</div>
</div>
<div class="form-group" style="margin-bottom: 14px;">
<label class="form-label">Description <span class="form-label-optional">(optional)</span></label>
<textarea class="form-textarea" rows="3" placeholder="What does this agent do? What LLM or use-case is it for?"
<label class="form-label"><span data-i18n="agents.drawer.description">Description</span> <span class="form-label-optional" data-i18n="agents.drawer.optional">(optional)</span></label>
<textarea class="form-textarea" rows="3" data-i18n-ph="agents.drawer.placeholder.description" placeholder="What does this agent do? What LLM or use-case is it for?"
x-model="form.description"></textarea>
</div>
<div class="form-group">
<label class="form-label">Status</label>
<label class="form-label" data-i18n="agents.drawer.status">Status</label>
<div class="agent-status-toggle">
<button class="agent-status-opt" :class="{ active: form.status === 'published' }" @click="form.status = 'published'">
<span class="status-dot" style="background: var(--success, #3fb950)"></span> Published
<span class="status-dot" style="background: var(--success, #3fb950)"></span> <span data-i18n="agents.lifecycle.published">Published</span>
</button>
<button class="agent-status-opt" :class="{ active: form.status === 'draft' }" @click="form.status = 'draft'">
<span class="status-dot" style="background: var(--text-muted)"></span> Draft
<span class="status-dot" style="background: var(--text-muted)"></span> <span data-i18n="agents.lifecycle.draft">Draft</span>
</button>
<button class="agent-status-opt" :class="{ active: form.status === 'archived' }" @click="form.status = 'archived'">
<span class="status-dot" style="background: var(--orange, #d29922)"></span> Archived
<span class="status-dot" style="background: var(--orange, #d29922)"></span> <span data-i18n="agents.lifecycle.archived">Archived</span>
</button>
</div>
</div>
@@ -330,16 +331,16 @@
<!-- Operations picker section -->
<div class="drawer-section">
<div class="drawer-section-header">
<div class="drawer-section-title">Operations</div>
<span class="drawer-section-count" x-text="form.selectedOps.length + ' selected'"></span>
<div class="drawer-section-title" data-i18n="agents.drawer.operations">Operations</div>
<span class="drawer-section-count" x-text="tfKey('agents.drawer.selected', { count: form.selectedOps.length })"></span>
</div>
<div class="drawer-section-sub">Select which operations this agent exposes. LLMs connecting to this agent will only see these tools.</div>
<div class="drawer-section-sub" data-i18n="agents.drawer.operations_sub">Select which operations this agent exposes. LLMs connecting to this agent will only see these tools.</div>
<div class="ops-picker">
<!-- Search -->
<div class="ops-picker-search">
<svg width="12" height="12" viewBox="0 0 16 16" fill="none" stroke="var(--text-muted)" stroke-width="1.8" stroke-linecap="round"><circle cx="7" cy="7" r="5"/><path d="M12 12l2.5 2.5"/></svg>
<input class="ops-picker-search-input" type="text" placeholder="Filter operations…" x-model="opSearch" autocomplete="off" spellcheck="false">
<input class="ops-picker-search-input" type="text" data-i18n-ph="agents.drawer.filter_ops" placeholder="Filter operations…" x-model="opSearch" autocomplete="off" spellcheck="false">
<button class="ops-picker-clear" x-show="opSearch" @click="opSearch = ''" style="display:none">
<svg width="10" height="10" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><line x1="1" y1="1" x2="11" y2="11"/><line x1="11" y1="1" x2="1" y2="11"/></svg>
</button>
@@ -360,20 +361,20 @@
</div>
</template>
<div class="ops-picker-empty" x-show="filteredOps.length === 0">
No operations match "<span x-text="opSearch"></span>"
<span x-text="tfKey('agents.drawer.ops_no_match', { query: opSearch })"></span>
</div>
</div>
<!-- Footer count -->
<div class="ops-picker-footer" x-show="form.selectedOps.length > 0">
<span x-text="form.selectedOps.length"></span> operation<span x-show="form.selectedOps.length !== 1">s</span> selected
<button @click="form.selectedOps = []" style="background:none;border:none;color:var(--text-muted);font-size:12px;cursor:pointer;margin-left:8px;">Clear all</button>
<span x-text="tfKey('agents.drawer.ops_selected', { count: form.selectedOps.length })"></span>
<button @click="form.selectedOps = []" style="background:none;border:none;color:var(--text-muted);font-size:12px;cursor:pointer;margin-left:8px;" data-i18n="agents.drawer.clear_all">Clear all</button>
</div>
</div>
<!-- Recommendation callout -->
<div class="agents-rec-callout" x-show="form.selectedOps.length > 15">
<svg width="13" height="13" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><polygon points="8,1 15,14 1,14" fill="none"/><path d="M8 6v4M8 11.5v.5"/></svg>
<span>You've selected <strong x-text="form.selectedOps.length"></strong> tools. LLMs perform best with &lt;15 tools per agent. Consider splitting into separate agents by use-case.</span>
<span x-text="tfKey('agents.drawer.recommendation', { count: form.selectedOps.length })">You've selected tools.</span>
</div>
</div>
@@ -381,11 +382,11 @@
<!-- Drawer footer -->
<div class="drawer-footer">
<button class="btn-ghost-sm" style="padding: 8px 16px; font-size: 13px;" @click="closeDrawer()">Cancel</button>
<button class="btn-ghost-sm" style="padding: 8px 16px; font-size: 13px;" @click="closeDrawer()" data-i18n="agents.drawer.cancel">Cancel</button>
<button class="btn-primary-sm" style="padding: 8px 20px; font-size: 13px;"
:disabled="!form.display_name.trim() || !form.slug.trim()"
@click="saveAgent()"
x-text="drawerMode === 'create' ? 'Create agent' : 'Save changes'">
x-text="drawerMode === 'create' ? tKey('agents.drawer.create') : tKey('agents.drawer.save')">
Create agent
</button>
</div>