hikari-desktop/src/lib/components/WorkspaceTrustModal.svelte

<script lang="ts">
  import { characterState } from "$lib/stores/character";
  import type { WorkspaceHookInfo } from "$lib/types/messages";

  interface Props {
    hookInfo: WorkspaceHookInfo;
    onTrust: () => void;
    onCancel: () => void;
  }

  const { hookInfo, onTrust, onCancel }: Props = $props();

  $effect(() => {
    characterState.setState("permission");
  });
</script>

<!-- svelte-ignore a11y_click_events_have_key_events -->
<!-- svelte-ignore a11y_no_static_element_interactions -->
<div class="fixed inset-0 bg-black/60 z-50 flex items-center justify-center" onclick={onCancel}>
  <!-- svelte-ignore a11y_click_events_have_key_events -->
  <!-- svelte-ignore a11y_no_static_element_interactions -->
  <div
    class="bg-[var(--bg-secondary)] border border-[var(--border-color)] rounded-lg p-6 max-w-md w-full mx-4 shadow-xl"
    onclick={(e) => e.stopPropagation()}
  >
    <div class="flex items-center gap-3 mb-4">
      <svg
        class="w-6 h-6 text-yellow-400 flex-shrink-0"
        fill="none"
        stroke="currentColor"
        viewBox="0 0 24 24"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
        />
      </svg>
      <h2 class="text-lg font-semibold text-[var(--text-primary)]">Workspace Trust Required</h2>
    </div>

    <p class="text-sm text-[var(--text-secondary)] mb-4">
      This workspace contains configuration that can execute code on your system. Review what was
      found before connecting.
    </p>

    <div class="space-y-3 mb-4">
      {#if hookInfo.hook_types.length > 0}
        <div class="bg-[var(--bg-primary)] rounded-md p-3">
          <p class="text-xs text-[var(--text-secondary)] mb-2 font-medium">
            Hooks (run shell commands automatically):
          </p>
          <ul class="space-y-1">
            {#each hookInfo.hook_types as hookType (hookType)}
              <li class="text-sm text-yellow-400 font-mono">• {hookType}</li>
            {/each}
          </ul>
        </div>
      {/if}

      {#if hookInfo.mcp_servers.length > 0}
        <div class="bg-[var(--bg-primary)] rounded-md p-3">
          <p class="text-xs text-[var(--text-secondary)] mb-2 font-medium">
            MCP servers (run as local processes with system access):
          </p>
          <ul class="space-y-1">
            {#each hookInfo.mcp_servers as server (server)}
              <li class="text-sm text-yellow-400 font-mono">• {server}</li>
            {/each}
          </ul>
        </div>
      {/if}

      {#if hookInfo.custom_commands.length > 0}
        <div class="bg-[var(--bg-primary)] rounded-md p-3">
          <p class="text-xs text-[var(--text-secondary)] mb-2 font-medium">
            Custom slash commands (can execute arbitrary instructions):
          </p>
          <ul class="space-y-1">
            {#each hookInfo.custom_commands as cmd (cmd)}
              <li class="text-sm text-yellow-400 font-mono">• /{cmd}</li>
            {/each}
          </ul>
        </div>
      {/if}
    </div>

    <p class="text-xs text-[var(--text-secondary)] mb-6">
      Only connect to workspaces you trust. Trusting this workspace will remember your choice for
      future sessions.
    </p>

    <div class="flex gap-3 justify-end">
      <button
        onclick={onCancel}
        class="px-4 py-2 text-sm text-[var(--text-secondary)] hover:text-[var(--text-primary)] border border-[var(--border-color)] rounded-md transition-colors"
      >
        Cancel
      </button>
      <button
        onclick={onTrust}
        class="px-4 py-2 text-sm bg-yellow-500/20 hover:bg-yellow-500/30 text-yellow-400 border border-yellow-500/30 rounded-md transition-colors"
      >
        Trust and Connect
      </button>
    </div>
  </div>
</div>