bsodfather/crank
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
0d8a36e4d4af1a5569d7635653f8c2c725587d49
crank/apps/ui/html/wizard/index.html
T
github-ops 0d8a36e4d4
Deploy / deploy (push) Successful in 2m30s
Details
CI / Rust Checks (push) Successful in 5m32s
Details
CI / UI Checks (push) Successful in 5s
Details
CI / Deployment Manifests (push) Successful in 2s
Details
CI / Frontend E2E (push) Failing after 4m46s
Details
Remove community workspace dropdown UI
2026-06-19 17:59:57 +00:00

257 lines
13 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Crank — New Operation</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="../../css/variables.css">
<link rel="stylesheet" href="../../css/layout.css">
<link rel="stylesheet" href="../../css/wizard.css">
<link rel="stylesheet" href="../../css/pages.css">
<script src="%CRANK_BUNDLE_PROTECTED_CORE%"></script>
</head>
<body class="wizard-page">
<!-- ═══════════════════ NAVBAR ═══════════════════ -->
<nav class="navbar">
<a href="/" class="nav-logo">
<div class="nav-logo-mark"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28" fill="white"><path fill-rule="evenodd" d="M 10.000,1.800 L 12.287,3.962 L 15.408,3.557 L 15.987,6.650 L 18.750,8.157 L 17.400,11.000 L 18.750,13.843 L 15.987,15.350 L 15.408,18.443 L 12.287,18.038 L 10.000,20.200 L 7.713,18.038 L 4.592,18.443 L 4.013,15.350 L 1.250,13.843 L 2.600,11.000 L 1.250,8.157 L 4.013,6.650 L 4.592,3.557 L 7.713,3.962 Z M 12.800,11.000 A 2.8 2.8 0 1 0 7.200,11.000 A 2.8 2.8 0 1 0 12.800,11.000 Z"/><path fill-rule="evenodd" d="M 11.791,15.604 Q 16.083,17.179 21.375,21.154 A 2.00 2.00 0 1 1 23.625,17.846 Q 19.782,15.610 14.940,10.973 Z M 24.300,19.500 A 1.8 1.8 0 1 0 20.700,19.500 A 1.8 1.8 0 1 0 24.300,19.500 Z"/><path d="M 10.0,9.7 L 11.3,11.0 L 10.0,12.3 L 8.7,11.0 Z" fill="rgba(0,0,0,0.3)"/></svg></div>
<span class="nav-logo-text">Crank</span>
</a>
<!-- Single workspace indicator -->
<div class="ws-switcher" id="ws-switcher">
<div class="ws-switcher-trigger">
<div class="ws-dot" id="ws-dot">A</div>
<span class="ws-current-name" id="ws-current-name" data-testid="shell-workspace-name">acme-workspace</span>
</div>
</div>
<div class="nav-links">
<a href="/" class="nav-link active" data-i18n="nav.operations">Operations</a>
<a href="/agents" class="nav-link" data-i18n="nav.agents">Agents</a>
<a href="/api-keys" class="nav-link" data-i18n="nav.apikeys">API Keys</a>
<a href="/secrets" class="nav-link" data-i18n="nav.secrets">Secrets</a>
<a href="/logs" class="nav-link" data-i18n="nav.logs">Logs</a>
<a href="/usage" class="nav-link" data-i18n="nav.usage">Usage</a>
</div>
<div class="nav-right">
<button class="nav-hamburger" data-i18n-title="nav.menu" data-i18n-aria-label="nav.menu" aria-label="Menu"><span></span><span></span><span></span></button>
<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>
<div class="user-menu">
<div class="nav-avatar" data-testid="shell-avatar" data-i18n-title="nav.account" title="Account">AT</div>
<div class="user-dropdown">
<div class="user-dropdown-header">
<div class="user-dropdown-name" data-testid="shell-user-name">Crank</div>
<div class="user-dropdown-role" data-testid="shell-user-role">—</div>
</div>
<button class="user-dropdown-item" data-action="settings-link">
<svg width="13" height="13"><use href="../../icons/general/settings.svg#icon"/></svg>
<span data-i18n="nav.settings">Settings</span>
</button>
<div class="dropdown-divider"></div>
<button class="user-dropdown-item danger" data-action="logout">
<svg width="13" height="13"><use href="../../icons/general/logout.svg#icon"/></svg>
<span data-i18n="nav.logout">Log out</span>
</button>
</div>
</div>
</div>
</nav>
<div class="mobile-nav" hidden>
<a href="/" class="mobile-nav-link active" data-i18n="nav.operations">Operations</a>
<a href="/agents" class="mobile-nav-link" data-i18n="nav.agents">Agents</a>
<a href="/api-keys" class="mobile-nav-link" data-i18n="nav.apikeys">API Keys</a>
<a href="/secrets" class="mobile-nav-link" data-i18n="nav.secrets">Secrets</a>
<a href="/logs" class="mobile-nav-link" data-i18n="nav.logs">Logs</a>
<a href="/usage" class="mobile-nav-link" data-i18n="nav.usage">Usage</a>
</div>
<!-- ═══════════════════ WIZARD SHELL ═══════════════════ -->
<div class="wizard-shell">
<!-- ══ TOP PROGRESS STRIP ══ -->
<div class="progress-strip">
<button class="back-to-catalog-btn" id="back-to-catalog" data-i18n-title="wizard.back_catalog" title="Back to catalog">
<svg width="13" height="13" viewBox="0 0 16 16" fill="currentColor"><path d="M9.78 12.78a.75.75 0 01-1.06 0L4.47 8.53a.75.75 0 010-1.06l4.25-4.25a.75.75 0 011.06 1.06L6.06 8l3.72 3.72a.75.75 0 010 1.06z"/></svg>
<span data-i18n="wizard.back_catalog">Operations</span>
</button>
<div class="progress-divider"></div>
<span class="progress-label" data-i18n="wizard.progress.create">Create operation</span>
<div class="progress-bar-wrap">
<div class="progress-bar-fill"></div>
</div>
<span class="progress-pct">20%</span>
<button class="progress-close" data-i18n-title="wizard.exit" title="Exit wizard" aria-label="Exit wizard">
<svg width="12" height="12" 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>
</div>
<!-- ══ WIZARD BODY ══ -->
<div class="wizard-body">
<!-- ── Step sidebar ── -->
<div class="step-sidebar">
<div class="step-sidebar-card">
<div class="step-sidebar-header">
<div class="step-sidebar-logo-mark">M</div>
<div class="step-sidebar-brand" data-wizard-brand="create">
Create <span>operation</span>
</div>
</div>
<div class="step-sidebar-body">
<div class="step-sidebar-section-label" data-i18n="wizard.progress.section">Progress</div>
<div class="steps-list">
<div class="step-item active">
<div class="step-indicator">1</div>
<div class="step-content">
<div class="step-number" data-step="1">Step 1</div>
<div class="step-name" data-i18n="wizard.step_name.protocol">Protocol</div>
<div class="step-status-text" data-i18n="wizard.status.in_progress">In progress</div>
</div>
</div>
<div class="step-item pending">
<div class="step-indicator">2</div>
<div class="step-content">
<div class="step-number" data-step="2">Step 2</div>
<div class="step-name" data-i18n="wizard.step_name.upstream">Upstream target</div>
<div class="step-status-text" data-i18n="wizard.status.not_started">Not started</div>
</div>
</div>
<div class="step-item pending" id="sidebar-step-3">
<div class="step-indicator">3</div>
<div class="step-content">
<div class="step-number" data-step="3">Step 3</div>
<div class="step-name" id="sidebar-step-3-name">Request config</div>
<div class="step-status-text" data-i18n="wizard.status.not_started">Not started</div>
</div>
</div>
<div class="step-item pending">
<div class="step-indicator">4</div>
<div class="step-content">
<div class="step-number" data-step="4">Step 4</div>
<div class="step-name" data-i18n="wizard.step_name.tool">Tool config</div>
<div class="step-status-text" data-i18n="wizard.status.not_started">Not started</div>
</div>
</div>
<div class="step-item pending">
<div class="step-indicator">5</div>
<div class="step-content">
<div class="step-number" data-step="5">Step 5</div>
<div class="step-name" data-i18n="wizard.step_name.mapping">Mapping</div>
<div class="step-status-text" data-i18n="wizard.status.not_started">Not started</div>
</div>
</div>
</div><!-- /steps-list -->
<div class="sidebar-help" style="margin-top: 20px;">
<div class="sidebar-help-title">
<svg width="13" height="13" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
<circle cx="8" cy="8" r="7"/>
<path d="M8 12v-4M8 5v-.5"/>
</svg>
<span data-i18n="wizard.help.title">Need help?</span>
</div>
<div class="sidebar-help-text">
<span data-i18n="wizard.help.body">Unsure which protocol to choose? Read the</span>
<a href="#" class="sidebar-help-link" data-i18n="wizard.help.link">protocol comparison guide →</a>
</div>
</div>
</div><!-- /step-sidebar-body -->
</div><!-- /step-sidebar-card -->
</div><!-- /step-sidebar -->
<!-- ── Main step panel ── -->
<div class="wizard-main"><div id="step-panel-container"><!-- steps loaded dynamically --></div></div>
</div><!-- /wizard-body -->
<!-- ══ BOTTOM ACTION BAR ══ -->
<div class="action-bar" role="toolbar" aria-label="Wizard navigation">
<div class="action-bar-inner">
<button class="btn btn-back" type="button" disabled>
<svg width="13" height="13" viewBox="0 0 16 16" fill="currentColor">
<path d="M9.78 12.78a.75.75 0 01-1.06 0L4.47 8.53a.75.75 0 010-1.06l4.25-4.25a.75.75 0 011.06 1.06L6.06 8l3.72 3.72a.75.75 0 010 1.06z"/>
</svg>
<span data-i18n="wizard.button.back">Back</span>
</button>
<button class="btn-save-draft" type="button" data-i18n="wizard.button.save_draft">Save draft</button>
<div class="action-bar-spacer"></div>
<span class="step-counter" data-step-counter>Step <strong>1</strong> of 5</span>
<button id="btn-continue" class="btn btn-continue" type="button">
<span data-i18n="wizard.button.continue">Continue</span>
<svg width="13" height="13" viewBox="0 0 16 16" fill="currentColor">
<path d="M6.22 3.22a.75.75 0 011.06 0l4.25 4.25a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06-1.06L9.94 8 6.22 4.28a.75.75 0 010-1.06z"/>
</svg>
</button>
</div>
</div>
</div><!-- /wizard-shell -->
<div class="modal-overlay" id="quick-secret-modal" data-testid="wizard-quick-secret-modal">
<div class="modal">
<div class="modal-header">
<span class="modal-title" data-i18n="wizard.step2.quick_secret_title">Quick create secret</span>
<button class="modal-close" id="quick-secret-close-btn" type="button">
<svg width="12" height="12" 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>
</div>
<div class="modal-body" style="display:grid; gap:14px;">
<div class="field-group">
<label class="field-label" data-i18n="wizard.step2.quick_secret_name">Secret name</label>
<input class="field-input" id="quick-secret-name" data-testid="wizard-quick-secret-name" type="text" autocomplete="off">
</div>
<div class="field-group">
<label class="field-label" data-i18n="wizard.step2.quick_secret_kind">Secret kind</label>
<select class="field-select" id="quick-secret-kind" data-testid="wizard-quick-secret-kind">
<option value="token" data-i18n="secrets.kind.token">Token</option>
<option value="header" data-i18n="secrets.kind.header">Header value</option>
<option value="generic" data-i18n="secrets.kind.generic">Generic JSON</option>
</select>
</div>
<div class="field-group">
<label class="field-label" data-i18n="wizard.step2.quick_secret_value">Secret value</label>
<input class="field-input" id="quick-secret-value" data-testid="wizard-quick-secret-value" type="text" autocomplete="off">
<div class="field-hint" data-i18n="wizard.step2.quick_secret_hint">The plaintext is encrypted immediately and will not be returned again.</div>
</div>
</div>
<div class="modal-footer">
<button class="btn-secondary" id="quick-secret-cancel-btn" type="button" data-i18n="btn.cancel">Cancel</button>
<button class="btn-primary" id="quick-secret-submit-btn" data-testid="wizard-quick-secret-submit" type="button" data-i18n="wizard.step2.quick_secret_submit">Create secret</button>
</div>
</div>
</div>
<script src="%CRANK_BUNDLE_WIZARD%"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink