agent-orchestrator/ui-electrobun/src/mainview/WizardStep1.svelte

<script lang="ts">
  import { onMount } from 'svelte';
  import { appRpc } from './rpc.ts';
  import { sanitize, sanitizeUrl, sanitizePath, isValidGitUrl, isValidGithubRepo } from './sanitize.ts';
  import PathBrowser from './PathBrowser.svelte';
  import CustomCheckbox from './ui/CustomCheckbox.svelte';

  type SourceType = 'local' | 'git-clone' | 'github' | 'template' | 'remote';
  type AuthMethod = 'password' | 'key' | 'agent' | 'config';
  type PathState = 'idle' | 'checking' | 'valid' | 'invalid' | 'not-dir';

  interface Props {
    sourceType: SourceType; localPath: string; repoUrl: string; cloneTarget: string;
    githubRepo: string; selectedTemplate: string; remoteHost: string; remoteUser: string;
    remotePath: string; remoteAuthMethod: AuthMethod; remotePassword: string;
    remoteKeyPath: string; remoteSshfs: boolean; remoteSshfsMountpoint: string;
    pathValid: PathState; isGitRepo: boolean; gitBranch: string;
    gitProbeStatus: 'idle' | 'probing' | 'ok' | 'error'; gitProbeBranches: string[];
    githubInfo: { stars: number; description: string; defaultBranch: string } | null;
    githubProbeStatus: 'idle' | 'probing' | 'ok' | 'error'; githubLoading: boolean;
    githubPlatform: 'github' | 'gitlab' | null;
    cloning: boolean; templates: Array<{ id: string; name: string; description: string; icon: string }>;
    templateTargetDir: string; templateOriginDir: string;
    onUpdate: (field: string, value: unknown) => void;
  }

  let {
    sourceType, localPath, repoUrl, cloneTarget, githubRepo, selectedTemplate,
    remoteHost, remoteUser, remotePath, remoteAuthMethod, remotePassword,
    remoteKeyPath, remoteSshfs, remoteSshfsMountpoint = '', pathValid, isGitRepo,
    gitBranch, gitProbeStatus, gitProbeBranches, githubInfo,
    githubProbeStatus = 'idle', githubLoading, githubPlatform = null, cloning, templates,
    templateTargetDir, templateOriginDir = '', onUpdate,
  }: Props = $props();

  let showBrowser = $state(false);
  let showMountBrowser = $state(false);
  let sshfsInstalled = $state<boolean | null>(null);
  let firstInput = $state<HTMLInputElement | null>(null);

  const SOURCE_TYPES: Array<{ value: SourceType; label: string }> = [
    { value: 'local', label: 'Local Folder' }, { value: 'git-clone', label: 'Git Clone' },
    { value: 'github', label: 'Git Platform' }, { value: 'template', label: 'Template' },
    { value: 'remote', label: 'SSH Remote' },
  ];
  const AUTH_METHODS: Array<{ value: AuthMethod; label: string }> = [
    { value: 'password', label: 'Password' }, { value: 'key', label: 'SSH Key' },
    { value: 'agent', label: 'SSH Agent' }, { value: 'config', label: 'SSH Config' },
  ];

  export function focusFirst() { firstInput?.focus(); }

  onMount(async () => {
    try { const r = await appRpc.request['ssh.checkSshfs']({}); sshfsInstalled = r?.installed ?? false; }
    catch { sshfsInstalled = false; }
  });

  function vIcon(s: PathState) { return s === 'valid' ? '\u2713' : s === 'invalid' ? '\u2717' : s === 'not-dir' ? '\u26A0' : s === 'checking' ? '\u2026' : ''; }
  function vColor(s: PathState) { return s === 'valid' ? 'var(--ctp-green)' : s === 'invalid' ? 'var(--ctp-red)' : s === 'not-dir' ? 'var(--ctp-peach)' : 'var(--ctp-overlay0)'; }

  async function browse(target: string) {
    const starts: Record<string, string> = { local: localPath, clone: cloneTarget, template: templateTargetDir, key: remoteKeyPath, mount: remoteSshfsMountpoint };
    const fields: Record<string, string> = { local: 'localPath', clone: 'cloneTarget', template: 'templateTargetDir', key: 'remoteKeyPath', mount: 'remoteSshfsMountpoint' };
    try { const r = await appRpc.request['files.pickDirectory']({ startingFolder: starts[target] || '~/' }); if (r?.path) onUpdate(fields[target], r.path); } catch { /* no-op */ }
  }

  function closeBrowsers() { showBrowser = false; showMountBrowser = false; }
  function selectBrowser(field: string, path: string) { onUpdate(field, path); closeBrowsers(); }
  function srcKey(e: KeyboardEvent, v: SourceType) { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onUpdate('sourceType', v); } }
</script>

<div class="wz-radios">
  {#each SOURCE_TYPES as opt}
    <label class="wz-radio" class:selected={sourceType === opt.value}
      tabindex={0} role="radio" aria-checked={sourceType === opt.value}
      onkeydown={(e) => srcKey(e, opt.value)}>
      <input type="radio" name="source" value={opt.value} checked={sourceType === opt.value}
        onchange={() => onUpdate('sourceType', opt.value)} />
      <span>{opt.label}</span>
    </label>
  {/each}
</div>

<div class="wz-source-fields">
  <div style:display={sourceType === 'local' ? 'flex' : 'none'} class="wz-field-col">
    <label class="wz-label">Project directory</label>
    <div class="wz-path-row">
      <input class="wz-input" type="text" placeholder="/home/user/project" bind:this={firstInput}
        value={localPath} oninput={(e) => onUpdate('localPath', (e.target as HTMLInputElement).value)} />
      <button class="wz-browse-btn" onclick={() => browse('local')}>&#128194;</button>
      <button class="wz-browse-btn" onclick={() => showBrowser = !showBrowser}>&#128269;</button>
      {#if pathValid !== 'idle'}<span class="wz-validation" style:color={vColor(pathValid)}>{vIcon(pathValid)}</span>{/if}
    </div>
    <div style:display={showBrowser ? 'block' : 'none'} class="wz-browser-wrap">
      <PathBrowser onSelect={(p) => selectBrowser('localPath', p)} onClose={() => showBrowser = false} />
    </div>
    {#if pathValid === 'valid' && isGitRepo}<span class="wz-badge git-badge">Git repo ({gitBranch})</span>{/if}
    {#if pathValid === 'invalid'}<span class="wz-hint error">Path does not exist</span>{/if}
    {#if pathValid === 'not-dir'}<span class="wz-hint warn">Not a directory</span>{/if}
  </div>

  <div style:display={sourceType === 'git-clone' ? 'flex' : 'none'} class="wz-field-col">
    <label class="wz-label">Repository URL</label>
    <div class="wz-path-row">
      <input class="wz-input" type="text" placeholder="https://github.com/user/repo.git"
        value={repoUrl} oninput={(e) => onUpdate('repoUrl', (e.target as HTMLInputElement).value)} />
      {#if gitProbeStatus === 'probing'}<span class="wz-validation" style:color="var(--ctp-blue)">&hellip;</span>{/if}
      {#if gitProbeStatus === 'ok'}<span class="wz-validation" style:color="var(--ctp-green)">&check;</span>{/if}
      {#if gitProbeStatus === 'error'}<span class="wz-validation" style:color="var(--ctp-red)">&cross;</span>{/if}
    </div>
    {#if gitProbeStatus === 'ok' && gitProbeBranches.length > 0}<span class="wz-hint" style="color: var(--ctp-subtext0);">{gitProbeBranches.length} branches found</span>{/if}
    {#if gitProbeStatus === 'error'}<span class="wz-hint error">Repository not found or inaccessible</span>{/if}
    <label class="wz-label">Target directory</label>
    <div class="wz-path-row">
      <input class="wz-input" type="text" placeholder="~/projects/my-repo"
        value={cloneTarget} oninput={(e) => onUpdate('cloneTarget', (e.target as HTMLInputElement).value)} />
      <button class="wz-browse-btn" onclick={() => browse('clone')}>&#128194;</button>
    </div>
  </div>

  <div style:display={sourceType === 'github' ? 'flex' : 'none'} class="wz-field-col">
    <label class="wz-label">Repository (owner/repo or full URL)</label>
    <input class="wz-input" type="text" placeholder="owner/repo or https://gitlab.com/owner/repo"
      value={githubRepo} oninput={(e) => onUpdate('githubRepo', (e.target as HTMLInputElement).value)} />
    {#if githubLoading}<span class="wz-hint" style="color: var(--ctp-blue);">Checking&hellip;</span>{/if}
    {#if githubProbeStatus === 'ok' && githubPlatform === 'github'}<span class="wz-hint valid">Found on GitHub &#10003;</span>{/if}
    {#if githubProbeStatus === 'ok' && githubPlatform === 'gitlab'}<span class="wz-hint valid">Found on GitLab &#10003;</span>{/if}
    {#if githubProbeStatus === 'ok' && !githubPlatform}<span class="wz-hint valid">Repository verified &#10003;</span>{/if}
    {#if githubProbeStatus === 'error'}<span class="wz-hint error">Repository not found on GitHub or GitLab</span>{/if}
    {#if githubInfo}
      <div class="wz-github-info">
        <span class="wz-hint" style="color: var(--ctp-yellow);">&starf; {githubInfo.stars}</span>
        <span class="wz-hint" style="color: var(--ctp-subtext0);">{githubInfo.description}</span>
        <span class="wz-hint" style="color: var(--ctp-green);">Default: {githubInfo.defaultBranch}</span>
      </div>
    {/if}
  </div>

  <div style:display={sourceType === 'template' ? 'flex' : 'none'} class="wz-field-col">
    {#if templateOriginDir}<span class="wz-hint" style="color: var(--ctp-overlay0);">Templates from: {templateOriginDir}</span>{/if}
    <label class="wz-label">Target directory</label>
    <div class="wz-path-row">
      <input class="wz-input" type="text" placeholder="~/projects"
        value={templateTargetDir} oninput={(e) => onUpdate('templateTargetDir', (e.target as HTMLInputElement).value)} />
      <button class="wz-browse-btn" onclick={() => browse('template')}>&#128194;</button>
    </div>
    <div class="wz-template-grid">
      {#each templates as tmpl}
        <button class="wz-template-card" class:selected={selectedTemplate === tmpl.id}
          onclick={() => onUpdate('selectedTemplate', tmpl.id)} tabindex={0}>
          <span class="wz-template-icon">{tmpl.icon}</span>
          <span class="wz-template-name">{tmpl.name}</span>
          <span class="wz-template-desc">{tmpl.description}</span>
        </button>
      {/each}
    </div>
  </div>

  <div style:display={sourceType === 'remote' ? 'flex' : 'none'} class="wz-field-col">
    <label class="wz-label">Host</label>
    <input class="wz-input" type="text" placeholder="192.168.1.100" value={remoteHost} oninput={(e) => onUpdate('remoteHost', (e.target as HTMLInputElement).value)} />
    <label class="wz-label">User</label>
    <input class="wz-input" type="text" placeholder="user" value={remoteUser} oninput={(e) => onUpdate('remoteUser', (e.target as HTMLInputElement).value)} />
    <label class="wz-label">Remote path</label>
    <input class="wz-input" type="text" placeholder="/home/user/project" value={remotePath} oninput={(e) => onUpdate('remotePath', (e.target as HTMLInputElement).value)} />
    <label class="wz-label">Auth method</label>
    <div class="wz-segmented">
      {#each AUTH_METHODS as m}<button class="wz-seg-btn" class:active={remoteAuthMethod === m.value} onclick={() => onUpdate('remoteAuthMethod', m.value)}>{m.label}</button>{/each}
    </div>
    <div style:display={remoteAuthMethod === 'password' ? 'flex' : 'none'} class="wz-field-col">
      <label class="wz-label">Password</label>
      <input class="wz-input" type="password" placeholder="&bull;&bull;&bull;&bull;&bull;&bull;" value={remotePassword} oninput={(e) => onUpdate('remotePassword', (e.target as HTMLInputElement).value)} />
    </div>
    <div style:display={remoteAuthMethod === 'key' ? 'flex' : 'none'} class="wz-field-col">
      <label class="wz-label">Key file path</label>
      <div class="wz-path-row">
        <input class="wz-input" type="text" placeholder="~/.ssh/id_ed25519" value={remoteKeyPath} oninput={(e) => onUpdate('remoteKeyPath', (e.target as HTMLInputElement).value)} />
        <button class="wz-browse-btn" onclick={() => browse('key')}>&#128194;</button>
      </div>
    </div>
    {#if sshfsInstalled === false}<span class="wz-hint warn">sshfs not installed -- mount option unavailable</span>{/if}
    <CustomCheckbox checked={remoteSshfs} label="Mount via SSHFS" disabled={sshfsInstalled === false} onChange={v => onUpdate('remoteSshfs', v)} />
    <div style:display={remoteSshfs && sshfsInstalled ? 'flex' : 'none'} class="wz-field-col">
      <label class="wz-label">Local mountpoint</label>
      <div class="wz-path-row">
        <input class="wz-input" type="text" placeholder="/mnt/remote-project" value={remoteSshfsMountpoint} oninput={(e) => onUpdate('remoteSshfsMountpoint', (e.target as HTMLInputElement).value)} />
        <button class="wz-browse-btn" onclick={() => browse('mount')}>&#128194;</button>
        <button class="wz-browse-btn" onclick={() => showMountBrowser = !showMountBrowser}>&#128269;</button>
      </div>
      <div style:display={showMountBrowser ? 'block' : 'none'} class="wz-browser-wrap">
        <PathBrowser onSelect={(p) => selectBrowser('remoteSshfsMountpoint', p)} onClose={() => showMountBrowser = false} />
      </div>
    </div>
  </div>
</div>

<style>
  .wz-radios { display: flex; flex-wrap: wrap; gap: 0.375rem; }
  .wz-radio { display: flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.625rem; border-radius: 0.375rem; border: 1px solid var(--ctp-surface1); cursor: pointer; font-size: 0.75rem; color: var(--ctp-subtext0); transition: border-color 0.12s, background 0.12s; }
  .wz-radio:hover { border-color: var(--ctp-overlay1); color: var(--ctp-text); }
  .wz-radio:focus-visible { outline: 2px solid var(--ctp-blue); outline-offset: -1px; }
  .wz-radio.selected { border-color: var(--ctp-blue); background: color-mix(in srgb, var(--ctp-blue) 10%, transparent); color: var(--ctp-text); }
  .wz-radio input[type="radio"] { display: none; }
  .wz-source-fields { display: flex; flex-direction: column; gap: 0.375rem; margin-top: 0.25rem; }
  .wz-field-col { display: flex; flex-direction: column; gap: 0.375rem; }
  .wz-label { font-size: 0.75rem; font-weight: 500; color: var(--ctp-subtext0); }
  .wz-input { padding: 0.375rem 0.5rem; background: var(--ctp-surface0); border: 1px solid var(--ctp-surface1); border-radius: 0.25rem; color: var(--ctp-text); font-size: 0.8125rem; font-family: var(--ui-font-family); width: 100%; }
  .wz-input:focus { outline: 2px solid var(--ctp-blue); outline-offset: -1px; border-color: var(--ctp-blue); }
  .wz-input::placeholder { color: var(--ctp-overlay0); }
  .wz-path-row { display: flex; gap: 0.375rem; align-items: center; }
  .wz-path-row .wz-input { flex: 1; }
  .wz-browse-btn { padding: 0.375rem; background: var(--ctp-surface0); border: 1px solid var(--ctp-surface1); border-radius: 0.25rem; cursor: pointer; font-size: 0.875rem; flex-shrink: 0; }
  .wz-browse-btn:hover { background: var(--ctp-surface1); }
  .wz-browse-btn:focus-visible { outline: 2px solid var(--ctp-blue); outline-offset: -1px; }
  .wz-validation { font-size: 0.875rem; font-weight: 700; flex-shrink: 0; }
  .wz-badge { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.125rem 0.5rem; border-radius: 0.25rem; font-size: 0.6875rem; width: fit-content; }
  .git-badge { background: color-mix(in srgb, var(--ctp-green) 15%, transparent); color: var(--ctp-green); border: 1px solid color-mix(in srgb, var(--ctp-green) 30%, transparent); }
  .wz-hint { font-size: 0.6875rem; }
  .wz-hint.error { color: var(--ctp-red); }
  .wz-hint.warn { color: var(--ctp-peach); }
  .wz-hint.valid { color: var(--ctp-green); }
  .wz-browser-wrap { max-height: 16rem; max-width: 32rem; overflow-y: auto; border: 1px solid var(--ctp-surface1); border-radius: 0.375rem; margin-top: 0.5rem; }
  .wz-template-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.375rem; }
  .wz-template-card { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; padding: 0.75rem 0.5rem; border-radius: 0.375rem; border: 1px solid var(--ctp-surface1); background: var(--ctp-surface0); cursor: pointer; text-align: center; }
  .wz-template-card:hover { border-color: var(--ctp-overlay1); }
  .wz-template-card:focus-visible { outline: 2px solid var(--ctp-blue); outline-offset: -1px; }
  .wz-template-card.selected { border-color: var(--ctp-blue); background: color-mix(in srgb, var(--ctp-blue) 10%, transparent); }
  .wz-template-icon { font-size: 1.5rem; }
  .wz-template-name { font-size: 0.75rem; font-weight: 600; color: var(--ctp-text); }
  .wz-template-desc { font-size: 0.625rem; color: var(--ctp-subtext0); }
  .wz-segmented { display: flex; gap: 0; border-radius: 0.25rem; overflow: hidden; border: 1px solid var(--ctp-surface1); }
  .wz-seg-btn { flex: 1; padding: 0.375rem 0.5rem; font-size: 0.75rem; background: var(--ctp-surface0); border: none; color: var(--ctp-subtext0); cursor: pointer; font-family: var(--ui-font-family); border-right: 1px solid var(--ctp-surface1); }
  .wz-seg-btn:last-child { border-right: none; }
  .wz-seg-btn:hover { color: var(--ctp-text); }
  .wz-seg-btn:focus-visible { outline: 2px solid var(--ctp-blue); outline-offset: -2px; }
  .wz-seg-btn.active { background: color-mix(in srgb, var(--ctp-blue) 20%, transparent); color: var(--ctp-blue); }
  .wz-github-info { display: flex; flex-direction: column; gap: 0.125rem; margin-top: 0.25rem; }
</style>