From ff6c4ebcc284f278526f8390a62e003e5716db8e Mon Sep 17 00:00:00 2001
From: dh00mk3tu <cyberhybird@hotmail.com>
Date: Sun, 8 Mar 2026 22:11:47 +0530
Subject: [PATCH 1/2] ssh config, assign host and edit assigned host

---
 components/KeyCard.vue |  10 +-
 components/Keys.vue    |  38 ++++++-
 src-tauri/src/lib.rs   | 247 ++++++++++++++++++++++++++++++++++++++++-
 types/core-types.ts    |  11 +-
 4 files changed, 301 insertions(+), 5 deletions(-)

diff --git a/components/KeyCard.vue b/components/KeyCard.vue
index d3cc7c0..165eb4b 100644
--- a/components/KeyCard.vue
+++ b/components/KeyCard.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="key-card border p-4 m-2 flex flex-col h-40 rounded shadow-md text-sm overflow-hidden break-words"
+    class="key-card border p-4 m-2 flex flex-col rounded shadow-md text-sm overflow-hidden break-words"
   >
     <div class="flex justify-start items-center w-full">
       <p class="text-xm font-thin">Status:</p>
@@ -16,6 +16,12 @@
         <span class="key-pid text-xm">{{ keyDetails.email }}</span>
       </div>
     </div>
+    <KeyHosts
+      :hosts="keyDetails.assignedHosts"
+      :key-filename="keyDetails.filename"
+      @host-assigned="$emit('hosts-changed')"
+      @host-removed="$emit('hosts-changed')"
+    />
     <key-card-menu
       class="mt-2"
       :public-key="keyDetails.publicKey"
@@ -36,6 +42,7 @@
 <script setup lang="ts">
 import type { Key } from "../types/core-types";
 import RemoveKeyConfirmationModal from "./RemoveKeyConfirmationModal.vue";
+import KeyHosts from "./KeyHosts.vue";
 
 interface Props {
   keyDetails: Key;
@@ -44,6 +51,7 @@ interface Props {
 
 interface Emits {
   (e: "key-removed"): void;
+  (e: "hosts-changed"): void;
 }
 
 const props = defineProps<Props>();
diff --git a/components/Keys.vue b/components/Keys.vue
index a06d894..4f8995c 100644
--- a/components/Keys.vue
+++ b/components/Keys.vue
@@ -22,6 +22,7 @@
             :key-details="key"
             :is-active="isThisKeyActive(key)"
             @key-removed="handleKeyRemoved"
+            @hosts-changed="handleHostsChanged"
           />
         </li>
       </ul>
@@ -50,10 +51,11 @@
 
 <script setup lang="ts">
 import { invoke } from "@tauri-apps/api/core";
-import type { Key, State, SSHKeyInfo } from "~/types/core-types";
+import type { Key, State, SSHKeyInfo, HostEntry } from "~/types/core-types";
 
 const keys = ref<Key[]>([]);
 const loadedKeys = ref<Key[]>([]);
+const hostEntries = ref<HostEntry[]>([]);
 const error = ref<string | null>(null);
 const commandList = <string[]>["get_ssh_keys", "get_loaded_ssh_agent_keys"];
 
@@ -78,10 +80,11 @@ const loadedKeysState = ref<State>({
 onMounted(() => {
   fetchSSHKeys();
   getLoadedSSHAgentKeys();
+  fetchHostConfig();
 });
 
 const isThisKeyActive = (key: Key): boolean => {
-  return loadedKeys.value.some((loadedKey) => loadedKey.keyPid === key.keyPid);
+  return loadedKeys.value.some((loadedKey) => loadedKey.publicKey === key.publicKey);
 };
 
 const formatKeys = (keys: SSHKeyInfo[]): any[] => {
@@ -98,6 +101,7 @@ const formatKeys = (keys: SSHKeyInfo[]): any[] => {
         isActive,
         keyType: "error",
         filename: key.filename,
+        assignedHosts: [],
       };
     }
 
@@ -116,6 +120,7 @@ const formatKeys = (keys: SSHKeyInfo[]): any[] => {
         isActive,
         keyType: "unknown",
         filename: key.filename,
+        assignedHosts: [],
       };
     }
 
@@ -141,6 +146,7 @@ const formatKeys = (keys: SSHKeyInfo[]): any[] => {
       isActive,
       keyType,
       filename: key.filename,
+      assignedHosts: getHostsForKey(key.filename),
     };
     return result;
   });
@@ -196,6 +202,33 @@ const formatLoadedKeys = (keys: string[]): any[] => {
   });
 };
 
+const getHostsForKey = (filename: string): HostEntry[] => {
+  return hostEntries.value
+    .filter((entry) => {
+      if (!entry.identity_file) return false;
+      // Match ~/.ssh/filename or /full/path/filename against the key filename
+      const configFilename = entry.identity_file.split("/").pop() || "";
+      return configFilename === filename;
+    });
+};
+
+const fetchHostConfig = async () => {
+  try {
+    hostEntries.value = await invoke<HostEntry[]>("get_ssh_config_hosts");
+    // Re-compute assignedHosts on existing keys
+    keys.value = keys.value.map((key) => ({
+      ...key,
+      assignedHosts: getHostsForKey(key.filename),
+    }));
+  } catch (err: any) {
+    console.error("Error fetching SSH config:", err);
+  }
+};
+
+const handleHostsChanged = () => {
+  fetchHostConfig();
+};
+
 const fetchSSHKeys = async () => {
   useStateModifier(keysState.value, "loading", "Loading...", {});
   error.value = null;
@@ -293,5 +326,6 @@ const handleKeyRemoved = () => {
 defineExpose({
   fetchSSHKeys,
   getLoadedSSHAgentKeys,
+  fetchHostConfig,
 });
 </script>
diff --git a/src-tauri/src/lib.rs b/src-tauri/src/lib.rs
index 0758654..6e21b67 100644
--- a/src-tauri/src/lib.rs
+++ b/src-tauri/src/lib.rs
@@ -26,8 +26,201 @@ fn is_ssh_agent_running() -> bool {
     }
 }
 use std::fs;
+use std::io::{BufRead, BufReader, Write};
+use std::path::PathBuf;
 use std::process::Command;
 
+#[derive(serde::Serialize, serde::Deserialize, Clone)]
+struct HostEntry {
+    host: String,
+    hostname: Option<String>,
+    user: Option<String>,
+    identity_file: Option<String>,
+    identities_only: bool,
+}
+
+fn get_ssh_dir() -> Result<PathBuf, String> {
+    dirs::home_dir()
+        .map(|mut p| {
+            p.push(".ssh");
+            p
+        })
+        .ok_or_else(|| "Could not find home directory".to_string())
+}
+
+fn ssh_config_path() -> Result<PathBuf, String> {
+    get_ssh_dir().map(|p| p.join("config"))
+}
+
+fn parse_ssh_config() -> Result<Vec<HostEntry>, String> {
+    let config_path = ssh_config_path()?;
+    if !config_path.exists() {
+        return Ok(Vec::new());
+    }
+
+    let file = fs::File::open(&config_path)
+        .map_err(|e| format!("Failed to open SSH config: {}", e))?;
+    let reader = BufReader::new(file);
+
+    let mut entries: Vec<HostEntry> = Vec::new();
+    let mut current: Option<HostEntry> = None;
+
+    for line in reader.lines() {
+        let line = line.map_err(|e| format!("Failed to read line: {}", e))?;
+        let trimmed = line.trim();
+
+        // Skip empty lines and comments
+        if trimmed.is_empty() || trimmed.starts_with('#') {
+            continue;
+        }
+
+        // Split on whitespace: "Key Value"
+        let parts: Vec<&str> = trimmed.splitn(2, char::is_whitespace).collect();
+        if parts.len() < 2 {
+            continue;
+        }
+
+        let key = parts[0].to_lowercase();
+        let value = parts[1].trim().to_string();
+
+        if key == "host" {
+            // Save previous entry
+            if let Some(entry) = current.take() {
+                entries.push(entry);
+            }
+            current = Some(HostEntry {
+                host: value,
+                hostname: None,
+                user: None,
+                identity_file: None,
+                identities_only: false,
+            });
+        } else if let Some(ref mut entry) = current {
+            match key.as_str() {
+                "hostname" => entry.hostname = Some(value),
+                "user" => entry.user = Some(value),
+                "identityfile" => entry.identity_file = Some(value),
+                "identitiesonly" => entry.identities_only = value.to_lowercase() == "yes",
+                _ => {} // Ignore other directives for now
+            }
+        }
+    }
+
+    // Don't forget the last entry
+    if let Some(entry) = current {
+        entries.push(entry);
+    }
+
+    Ok(entries)
+}
+
+fn write_ssh_config(entries: &[HostEntry]) -> Result<(), String> {
+    let config_path = ssh_config_path()?;
+    let ssh_dir = get_ssh_dir()?;
+
+    // Ensure .ssh directory exists
+    if !ssh_dir.exists() {
+        fs::create_dir_all(&ssh_dir)
+            .map_err(|e| format!("Failed to create .ssh directory: {}", e))?;
+    }
+
+    // Write to a temp file first, then rename for atomic write
+    let tmp_path = ssh_dir.join("config.tmp");
+    {
+        let mut file = fs::File::create(&tmp_path)
+            .map_err(|e| format!("Failed to create temp config: {}", e))?;
+
+        for (i, entry) in entries.iter().enumerate() {
+            if i > 0 {
+                writeln!(file).map_err(|e| format!("Write error: {}", e))?;
+            }
+            writeln!(file, "Host {}", entry.host)
+                .map_err(|e| format!("Write error: {}", e))?;
+            if let Some(ref hostname) = entry.hostname {
+                writeln!(file, "    HostName {}", hostname)
+                    .map_err(|e| format!("Write error: {}", e))?;
+            }
+            if let Some(ref user) = entry.user {
+                writeln!(file, "    User {}", user)
+                    .map_err(|e| format!("Write error: {}", e))?;
+            }
+            if let Some(ref identity_file) = entry.identity_file {
+                writeln!(file, "    IdentityFile {}", identity_file)
+                    .map_err(|e| format!("Write error: {}", e))?;
+            }
+            if entry.identities_only {
+                writeln!(file, "    IdentitiesOnly yes")
+                    .map_err(|e| format!("Write error: {}", e))?;
+            }
+        }
+    }
+
+    fs::rename(&tmp_path, &config_path)
+        .map_err(|e| format!("Failed to save SSH config: {}", e))?;
+
+    Ok(())
+}
+
+#[tauri::command]
+fn get_ssh_config_hosts() -> Result<Vec<HostEntry>, String> {
+    parse_ssh_config()
+}
+
+#[tauri::command]
+fn assign_host_to_key(
+    host: String,
+    hostname: Option<String>,
+    user: Option<String>,
+    key_filename: String,
+) -> Result<String, String> {
+    let mut entries = parse_ssh_config()?;
+    let ssh_dir = get_ssh_dir()?;
+    let identity_file = format!("~/.ssh/{}", key_filename);
+
+    // Verify the key actually exists
+    let key_path = ssh_dir.join(&key_filename);
+    if !key_path.exists() {
+        return Err(format!("SSH key '{}' not found", key_filename));
+    }
+
+    // Check if a Host block already exists for this host
+    if let Some(entry) = entries.iter_mut().find(|e| e.host == host) {
+        entry.identity_file = Some(identity_file);
+        entry.identities_only = true;
+        if let Some(ref hn) = hostname {
+            entry.hostname = Some(hn.clone());
+        }
+        if let Some(ref u) = user {
+            entry.user = Some(u.clone());
+        }
+    } else {
+        entries.push(HostEntry {
+            host: host.clone(),
+            hostname: hostname.or_else(|| Some(host.clone())),
+            user,
+            identity_file: Some(identity_file),
+            identities_only: true,
+        });
+    }
+
+    write_ssh_config(&entries)?;
+    Ok(format!("Host '{}' assigned to key '{}'", host, key_filename))
+}
+
+#[tauri::command]
+fn remove_host_entry(host: String) -> Result<String, String> {
+    let mut entries = parse_ssh_config()?;
+    let original_len = entries.len();
+    entries.retain(|e| e.host != host);
+
+    if entries.len() == original_len {
+        return Err(format!("Host '{}' not found in SSH config", host));
+    }
+
+    write_ssh_config(&entries)?;
+    Ok(format!("Host '{}' removed from SSH config", host))
+}
+
 // Add this struct to hold both filename and key info
 #[derive(serde::Serialize)]
 struct SSHKeyInfo {
@@ -199,6 +392,58 @@ fn remove_ssh_key(key_filename: String) -> Result<String, String> {
 }
 
 
+#[tauri::command]
+fn update_git_remote(repo_path: String, old_host: String, new_host: String) -> Result<String, String> {
+    let repo = std::path::Path::new(&repo_path);
+    if !repo.join(".git").exists() {
+        return Err(format!("'{}' is not a git repository", repo_path));
+    }
+
+    // Get current remote URLs
+    let output = Command::new("git")
+        .args(["-C", &repo_path, "remote", "-v"])
+        .output()
+        .map_err(|e| format!("Failed to run git: {}", e))?;
+
+    if !output.status.success() {
+        return Err("Failed to list git remotes".to_string());
+    }
+
+    let remotes_output = String::from_utf8_lossy(&output.stdout).to_string();
+    let mut updated = Vec::new();
+
+    for line in remotes_output.lines() {
+        let parts: Vec<&str> = line.split_whitespace().collect();
+        if parts.len() < 2 {
+            continue;
+        }
+        let remote_name = parts[0];
+        let remote_url = parts[1];
+
+        // Check if this remote uses the old host (e.g., git@github.com:user/repo.git)
+        let old_prefix = format!("git@{}:", old_host);
+        if remote_url.starts_with(&old_prefix) && !updated.contains(&remote_name.to_string()) {
+            let new_url = remote_url.replace(&old_prefix, &format!("git@{}:", new_host));
+            let set_url = Command::new("git")
+                .args(["-C", &repo_path, "remote", "set-url", remote_name, &new_url])
+                .output()
+                .map_err(|e| format!("Failed to update remote '{}': {}", remote_name, e))?;
+
+            if !set_url.status.success() {
+                let err = String::from_utf8_lossy(&set_url.stderr).to_string();
+                return Err(format!("Failed to update remote '{}': {}", remote_name, err));
+            }
+            updated.push(remote_name.to_string());
+        }
+    }
+
+    if updated.is_empty() {
+        return Err(format!("No remotes found using '{}'", old_host));
+    }
+
+    Ok(format!("Updated remote(s): {}", updated.join(", ")))
+}
+
 #[cfg_attr(mobile, tauri::mobile_entry_point)]
 pub fn run() {
   tauri::Builder::default()
@@ -212,7 +457,7 @@ pub fn run() {
       }
       Ok(())
     })
-    .invoke_handler(tauri::generate_handler![get_ssh_keys, is_ssh_agent_running, get_loaded_ssh_agent_keys, create_ssh_key, remove_ssh_key])
+    .invoke_handler(tauri::generate_handler![get_ssh_keys, is_ssh_agent_running, get_loaded_ssh_agent_keys, create_ssh_key, remove_ssh_key, get_ssh_config_hosts, assign_host_to_key, remove_host_entry, update_git_remote])
     .run(tauri::generate_context!())
     .expect("error while running tauri application");
 }
diff --git a/types/core-types.ts b/types/core-types.ts
index 5fac7eb..94026c7 100644
--- a/types/core-types.ts
+++ b/types/core-types.ts
@@ -23,5 +23,14 @@ export interface Key {
     email: string,
     isActive: boolean,
     keyType: string,
-    filename: string, // Add filename for key removal
+    filename: string,
+    assignedHosts: HostEntry[],
+}
+
+export interface HostEntry {
+    host: string,
+    hostname: string | null,
+    user: string | null,
+    identity_file: string | null,
+    identities_only: boolean,
 }
\ No newline at end of file

From 45cb2384c0ea354fa2df9541202e234a8fd97511 Mon Sep 17 00:00:00 2001
From: dh00mk3tu <cyberhybird@hotmail.com>
Date: Sun, 8 Mar 2026 22:58:55 +0530
Subject: [PATCH 2/2] commiting missing files

---
 components/AssignHostModal.vue | 595 +++++++++++++++++++++++++++++++++
 components/HostBadge.vue       |  77 +++++
 components/KeyHosts.vue        | 109 ++++++
 3 files changed, 781 insertions(+)
 create mode 100644 components/AssignHostModal.vue
 create mode 100644 components/HostBadge.vue
 create mode 100644 components/KeyHosts.vue

diff --git a/components/AssignHostModal.vue b/components/AssignHostModal.vue
new file mode 100644
index 0000000..9a596bf
--- /dev/null
+++ b/components/AssignHostModal.vue
@@ -0,0 +1,595 @@
+<template>
+  <Modal :is-open="isOpen" @close="closeModal">
+    <template #header>
+      <div class="assign-host-header">
+        <svg
+          class="w-6 h-6 mr-3"
+          style="color: var(--primary-highlight)"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"
+          />
+        </svg>
+        <h2 class="assign-host-title">
+          {{ step === 'select' ? (isEditing ? 'Edit Host' : 'Assign Host') : 'Update Repositories' }}
+        </h2>
+      </div>
+    </template>
+
+    <template #content>
+      <div class="assign-host-content">
+        <!-- Step 1: Service & Label Selection -->
+        <div v-if="step === 'select'">
+          <p class="key-info">
+            Key: <span class="key-filename">{{ keyFilename }}</span>
+          </p>
+
+          <div class="form-group">
+            <label class="form-label">Service</label>
+            <div class="service-grid">
+              <button
+                v-for="svc in services"
+                :key="svc.id"
+                :class="['service-btn', { active: form.service === svc.id }]"
+                @click="form.service = svc.id"
+              >
+                {{ svc.label }}
+              </button>
+            </div>
+          </div>
+
+          <div v-if="form.service === 'custom'" class="form-group">
+            <label for="customHost" class="form-label">Hostname</label>
+            <input
+              id="customHost"
+              v-model="form.customHost"
+              type="text"
+              class="form-input"
+              placeholder="e.g. git.mycompany.com"
+            />
+          </div>
+
+          <div class="form-group">
+            <label for="label" class="form-label">Label</label>
+            <input
+              id="label"
+              v-model="form.label"
+              type="text"
+              class="form-input"
+              placeholder="e.g. personal, work, client-x"
+              @keyup.enter="assignHost"
+            />
+            <p class="form-hint">
+              A label to identify this key's purpose.
+              Your SSH alias will be: <strong class="alias-preview">{{ generatedAlias || '...' }}</strong>
+            </p>
+          </div>
+
+          <p v-if="message && messageType === 'error'" class="message-error">
+            {{ message }}
+          </p>
+        </div>
+
+        <!-- Step 2: Post-assignment instructions -->
+        <div v-if="step === 'done'">
+          <p class="message-success done-message">{{ isEditing ? 'Host updated successfully' : 'Host assigned successfully' }}</p>
+
+          <div class="info-box">
+            <p class="info-title">Your repositories need updated remote URLs</p>
+            <p class="info-text">
+              Repos using <strong>{{ actualHostname }}</strong> with this key
+              should use the alias instead:
+            </p>
+
+            <div class="url-comparison">
+              <div class="url-row">
+                <span class="url-label">Before:</span>
+                <code class="url-value old">git@{{ actualHostname }}:user/repo.git</code>
+              </div>
+              <div class="url-row">
+                <span class="url-label">After:</span>
+                <code class="url-value new">git@{{ generatedAlias }}:user/repo.git</code>
+                <button class="copy-btn" @click="copyAlias" :title="copyText">
+                  {{ copyText }}
+                </button>
+              </div>
+            </div>
+          </div>
+
+          <div class="update-section">
+            <p class="info-title">Update a repository automatically</p>
+            <div class="repo-input-row">
+              <input
+                v-model="repoPath"
+                type="text"
+                class="form-input"
+                placeholder="Paste the full path to your repo"
+                @keyup.enter="updateRemote"
+              />
+            </div>
+            <button
+              class="btn-primary update-btn"
+              :disabled="!repoPath.trim() || isUpdating"
+              @click="updateRemote"
+            >
+              <span v-if="isUpdating">Updating...</span>
+              <span v-else>Update Remote</span>
+            </button>
+            <p v-if="updateMessage" :class="updateSuccess ? 'message-success' : 'message-error'" class="update-msg">
+              {{ updateMessage }}
+            </p>
+          </div>
+        </div>
+      </div>
+    </template>
+
+    <template #footer>
+      <template v-if="step === 'select'">
+        <button @click="closeModal" class="btn-secondary">Cancel</button>
+        <button
+          @click="assignHost"
+          :disabled="isAssigning || !canAssign"
+          class="btn-primary"
+        >
+          <span v-if="isAssigning">{{ isEditing ? 'Saving...' : 'Assigning...' }}</span>
+          <span v-else>{{ isEditing ? 'Save' : 'Assign' }}</span>
+        </button>
+      </template>
+      <template v-else>
+        <button @click="closeModal" class="btn-primary">Done</button>
+      </template>
+    </template>
+  </Modal>
+</template>
+
+<script setup lang="ts">
+import { invoke } from "@tauri-apps/api/core";
+import type { HostEntry } from "~/types/core-types";
+import Modal from "./Modal.vue";
+
+interface Props {
+  isOpen: boolean;
+  keyFilename: string;
+  editingHost?: HostEntry | null;
+}
+
+interface Emits {
+  (e: "close"): void;
+  (e: "host-assigned"): void;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  editingHost: null,
+});
+const emit = defineEmits<Emits>();
+
+const services = [
+  { id: "github", label: "GitHub", hostname: "github.com", user: "git" },
+  { id: "gitlab", label: "GitLab", hostname: "gitlab.com", user: "git" },
+  { id: "bitbucket", label: "Bitbucket", hostname: "bitbucket.org", user: "git" },
+  { id: "custom", label: "Custom", hostname: "", user: "" },
+];
+
+const step = ref<"select" | "done">("select");
+const isAssigning = ref(false);
+const isUpdating = ref(false);
+const message = ref("");
+const messageType = ref<"success" | "error">("success");
+const copyText = ref("Copy");
+const repoPath = ref("");
+const updateMessage = ref("");
+const updateSuccess = ref(false);
+const oldHostAlias = ref("");
+
+const form = ref({
+  service: "github",
+  label: "",
+  customHost: "",
+});
+
+const isEditing = computed(() => !!props.editingHost);
+
+// Reverse-engineer service and label from an existing HostEntry
+const populateFromHostEntry = (entry: HostEntry) => {
+  oldHostAlias.value = entry.host;
+
+  // Detect service from hostname
+  const matchedService = services.find(
+    (s) => s.id !== "custom" && s.hostname === entry.hostname
+  );
+
+  if (matchedService) {
+    form.value.service = matchedService.id;
+    // Extract label: alias is "service-label", so strip the service prefix
+    const prefix = matchedService.id + "-";
+    form.value.label = entry.host.startsWith(prefix)
+      ? entry.host.slice(prefix.length)
+      : entry.host;
+  } else {
+    form.value.service = "custom";
+    form.value.customHost = entry.hostname || "";
+    // Extract label: alias is "hostprefix-label"
+    const hostPrefix = (entry.hostname || "").split(".")[0];
+    const prefix = hostPrefix + "-";
+    form.value.label = entry.host.startsWith(prefix)
+      ? entry.host.slice(prefix.length)
+      : entry.host;
+  }
+};
+
+// Watch for modal open with editing data
+watch(() => props.isOpen, (open) => {
+  if (open && props.editingHost) {
+    populateFromHostEntry(props.editingHost);
+  }
+});
+
+const selectedService = computed(() =>
+  services.find((s) => s.id === form.value.service)
+);
+
+const actualHostname = computed(() => {
+  if (form.value.service === "custom") return form.value.customHost.trim();
+  return selectedService.value?.hostname || "";
+});
+
+const generatedAlias = computed(() => {
+  const label = form.value.label.trim().toLowerCase().replace(/\s+/g, "-");
+  if (!label) return "";
+  if (form.value.service === "custom") {
+    const host = form.value.customHost.trim().split(".")[0] || "host";
+    return `${host}-${label}`;
+  }
+  return `${form.value.service}-${label}`;
+});
+
+const canAssign = computed(() => {
+  if (!form.value.label.trim()) return false;
+  if (form.value.service === "custom" && !form.value.customHost.trim()) return false;
+  return true;
+});
+
+const closeModal = () => {
+  form.value = { service: "github", label: "", customHost: "" };
+  step.value = "select";
+  message.value = "";
+  repoPath.value = "";
+  updateMessage.value = "";
+  oldHostAlias.value = "";
+  emit("close");
+};
+
+const assignHost = async () => {
+  if (!canAssign.value) return;
+
+  isAssigning.value = true;
+  message.value = "";
+
+  const alias = generatedAlias.value;
+  const hostname = actualHostname.value;
+  const user = selectedService.value?.user || null;
+
+  try {
+    // If editing and the alias changed, remove the old entry first
+    if (isEditing.value && oldHostAlias.value && oldHostAlias.value !== alias) {
+      await invoke<string>("remove_host_entry", { host: oldHostAlias.value });
+    }
+
+    await invoke<string>("assign_host_to_key", {
+      host: alias,
+      hostname,
+      user,
+      keyFilename: props.keyFilename,
+    });
+
+    emit("host-assigned");
+    step.value = "done";
+  } catch (error: any) {
+    message.value = error.toString();
+    messageType.value = "error";
+  } finally {
+    isAssigning.value = false;
+  }
+};
+
+const copyAlias = () => {
+  const text = `git@${generatedAlias.value}:`;
+  navigator.clipboard.writeText(text).catch((err) => {
+    console.error("Failed to copy:", err);
+  });
+  copyText.value = "Copied!";
+  setTimeout(() => {
+    copyText.value = "Copy";
+  }, 2000);
+};
+
+const updateRemote = async () => {
+  if (!repoPath.value.trim()) return;
+
+  isUpdating.value = true;
+  updateMessage.value = "";
+
+  try {
+    const result = await invoke<string>("update_git_remote", {
+      repoPath: repoPath.value.trim(),
+      oldHost: actualHostname.value,
+      newHost: generatedAlias.value,
+    });
+    updateMessage.value = result;
+    updateSuccess.value = true;
+  } catch (error: any) {
+    updateMessage.value = error.toString();
+    updateSuccess.value = false;
+  } finally {
+    isUpdating.value = false;
+  }
+};
+</script>
+
+<style scoped>
+.assign-host-header {
+  display: flex;
+  align-items: center;
+}
+
+.assign-host-title {
+  color: var(--primary-highlight);
+  font-size: 1.25rem;
+  font-weight: 600;
+  margin: 0;
+  font-family: "Righteous", sans-serif;
+}
+
+.assign-host-content {
+  color: var(--primary-highlight);
+}
+
+.key-info {
+  font-size: 0.875rem;
+  color: var(--secondary-highlight);
+  margin-bottom: 1.25rem;
+}
+
+.key-filename {
+  font-family: monospace;
+  color: var(--primary-highlight);
+  font-weight: 500;
+}
+
+.form-group {
+  margin-bottom: 1rem;
+}
+
+.form-label {
+  display: block;
+  font-weight: 600;
+  font-size: 0.875rem;
+  margin-bottom: 0.375rem;
+  color: var(--primary-highlight);
+}
+
+.service-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.5rem;
+}
+
+.service-btn {
+  padding: 0.5rem;
+  background-color: var(--secondary-bg);
+  border: 1px solid var(--secondary-highlight);
+  border-radius: 0.375rem;
+  color: var(--secondary-highlight);
+  font-size: 0.875rem;
+  font-family: "Questrial", sans-serif;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.service-btn:hover {
+  border-color: var(--primary-highlight);
+  color: var(--primary-highlight);
+}
+
+.service-btn.active {
+  border-color: var(--primary-highlight);
+  color: var(--primary-highlight);
+  background-color: var(--primary-bg);
+  font-weight: 600;
+}
+
+.form-input {
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  background-color: var(--secondary-bg);
+  border: 1px solid var(--secondary-highlight);
+  border-radius: 0.375rem;
+  color: var(--primary-highlight);
+  font-size: 0.875rem;
+  font-family: "Questrial", sans-serif;
+  outline: none;
+  transition: border-color 0.2s ease;
+  box-sizing: border-box;
+}
+
+.form-input:focus {
+  border-color: var(--primary-highlight);
+}
+
+.form-input::placeholder {
+  color: var(--secondary-highlight);
+  opacity: 0.6;
+}
+
+.form-hint {
+  font-size: 0.75rem;
+  color: var(--secondary-highlight);
+  margin-top: 0.25rem;
+  opacity: 0.8;
+}
+
+.alias-preview {
+  color: var(--primary-highlight);
+  font-family: monospace;
+}
+
+.done-message {
+  text-align: center;
+  font-weight: 600;
+  margin-bottom: 1rem;
+}
+
+.info-box {
+  background-color: var(--secondary-bg);
+  border: 1px solid var(--secondary-highlight);
+  border-radius: 0.5rem;
+  padding: 1rem;
+  margin-bottom: 1rem;
+}
+
+.info-title {
+  font-weight: 600;
+  font-size: 0.875rem;
+  margin-bottom: 0.5rem;
+}
+
+.info-text {
+  font-size: 0.8rem;
+  color: var(--secondary-highlight);
+  margin-bottom: 0.75rem;
+}
+
+.url-comparison {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+}
+
+.url-row {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.url-label {
+  font-size: 0.75rem;
+  color: var(--secondary-highlight);
+  min-width: 3rem;
+}
+
+.url-value {
+  font-size: 0.75rem;
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.25rem;
+  word-break: break-all;
+}
+
+.url-value.old {
+  background-color: rgba(239, 68, 68, 0.15);
+  color: #f87171;
+  text-decoration: line-through;
+}
+
+.url-value.new {
+  background-color: rgba(34, 197, 94, 0.15);
+  color: #4ade80;
+}
+
+.copy-btn {
+  background: none;
+  border: 1px solid var(--secondary-highlight);
+  border-radius: 0.25rem;
+  color: var(--secondary-highlight);
+  font-size: 0.7rem;
+  padding: 0.125rem 0.375rem;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  font-family: "Questrial", sans-serif;
+}
+
+.copy-btn:hover {
+  color: var(--primary-highlight);
+  border-color: var(--primary-highlight);
+}
+
+.update-section {
+  background-color: var(--secondary-bg);
+  border: 1px solid var(--secondary-highlight);
+  border-radius: 0.5rem;
+  padding: 1rem;
+}
+
+.repo-input-row {
+  margin-bottom: 0.5rem;
+}
+
+.update-btn {
+  width: 100%;
+  margin-top: 0.25rem;
+}
+
+.update-msg {
+  margin-top: 0.5rem;
+  font-size: 0.8rem;
+}
+
+.message-error {
+  color: #ef4444;
+  font-size: 0.875rem;
+  margin-top: 0.5rem;
+}
+
+.message-success {
+  color: #22c55e;
+  font-size: 0.875rem;
+  margin-top: 0.5rem;
+}
+
+.btn-secondary {
+  background-color: var(--primary-bg);
+  color: var(--primary-highlight);
+  border: 2px solid var(--secondary-highlight);
+  padding: 0.5rem 1rem;
+  border-radius: 0.375rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  font-family: "Questrial", sans-serif;
+}
+
+.btn-secondary:hover {
+  background-color: var(--secondary-highlight);
+  color: var(--primary-bg);
+  border-color: var(--primary-highlight);
+}
+
+.btn-primary {
+  background-color: var(--primary-highlight);
+  color: var(--primary-bg);
+  border: 2px solid var(--primary-highlight);
+  padding: 0.5rem 1rem;
+  border-radius: 0.375rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  font-family: "Questrial", sans-serif;
+}
+
+.btn-primary:hover:not(:disabled) {
+  opacity: 0.9;
+  transform: translateY(-1px);
+}
+
+.btn-primary:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  transform: none;
+}
+</style>
diff --git a/components/HostBadge.vue b/components/HostBadge.vue
new file mode 100644
index 0000000..fce0b3d
--- /dev/null
+++ b/components/HostBadge.vue
@@ -0,0 +1,77 @@
+<template>
+  <span class="host-badge">
+    <span class="host-name" @click.stop="$emit('edit')" role="button" title="Edit host">{{ host === '*' ? 'default' : host }}</span>
+    <button
+      v-if="removable"
+      class="host-remove-btn"
+      @click.stop="$emit('remove')"
+      aria-label="Remove host"
+    >
+      <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+      </svg>
+    </button>
+  </span>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  host: string;
+  removable?: boolean;
+}
+
+interface Emits {
+  (e: "remove"): void;
+  (e: "edit"): void;
+}
+
+withDefaults(defineProps<Props>(), {
+  removable: true,
+});
+defineEmits<Emits>();
+</script>
+
+<style scoped>
+.host-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  background-color: var(--primary-bg);
+  border: 1px solid var(--secondary-highlight);
+  border-radius: 9999px;
+  padding: 0.125rem 0.5rem;
+  font-size: 0.7rem;
+  color: var(--primary-highlight);
+  font-family: "Questrial", sans-serif;
+}
+
+.host-name {
+  max-width: 120px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: color 0.2s ease;
+}
+
+.host-name:hover {
+  color: var(--primary-highlight);
+  text-decoration: underline;
+}
+
+.host-remove-btn {
+  background: none;
+  border: none;
+  color: var(--secondary-highlight);
+  cursor: pointer;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  transition: color 0.2s ease;
+  line-height: 1;
+}
+
+.host-remove-btn:hover {
+  color: #ef4444;
+}
+</style>
diff --git a/components/KeyHosts.vue b/components/KeyHosts.vue
new file mode 100644
index 0000000..2ece2a3
--- /dev/null
+++ b/components/KeyHosts.vue
@@ -0,0 +1,109 @@
+<template>
+  <div class="key-hosts">
+    <div class="hosts-row">
+      <div v-if="hosts.length > 0" class="hosts-badges">
+        <HostBadge
+          v-for="entry in hosts"
+          :key="entry.host"
+          :host="entry.host"
+          @remove="removeHost(entry.host)"
+          @edit="editHost(entry)"
+        />
+      </div>
+      <button class="assign-btn" @click.stop="showAssignModal">
+        + Assign Host
+      </button>
+    </div>
+  </div>
+
+  <AssignHostModal
+    :is-open="isAssignModalOpen"
+    :key-filename="keyFilename"
+    :editing-host="editingEntry"
+    @close="closeModal"
+    @host-assigned="$emit('host-assigned')"
+  />
+</template>
+
+<script setup lang="ts">
+import { invoke } from "@tauri-apps/api/core";
+import type { HostEntry } from "~/types/core-types";
+import HostBadge from "./HostBadge.vue";
+import AssignHostModal from "./AssignHostModal.vue";
+
+interface Props {
+  hosts: HostEntry[];
+  keyFilename: string;
+}
+
+interface Emits {
+  (e: "host-removed"): void;
+  (e: "host-assigned"): void;
+}
+
+defineProps<Props>();
+const emit = defineEmits<Emits>();
+
+const isAssignModalOpen = ref(false);
+const editingEntry = ref<HostEntry | null>(null);
+
+const showAssignModal = () => {
+  editingEntry.value = null;
+  isAssignModalOpen.value = true;
+};
+
+const editHost = (entry: HostEntry) => {
+  editingEntry.value = entry;
+  isAssignModalOpen.value = true;
+};
+
+const closeModal = () => {
+  isAssignModalOpen.value = false;
+  editingEntry.value = null;
+};
+
+const removeHost = async (host: string) => {
+  try {
+    await invoke<string>("remove_host_entry", { host });
+    emit("host-removed");
+  } catch (error: any) {
+    console.error("Failed to remove host:", error);
+  }
+};
+</script>
+
+<style scoped>
+.key-hosts {
+  margin-top: 0.375rem;
+}
+
+.hosts-row {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.375rem;
+}
+
+.hosts-badges {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+}
+
+.assign-btn {
+  background: none;
+  border: 1px dashed var(--secondary-highlight);
+  border-radius: 9999px;
+  color: var(--secondary-highlight);
+  font-size: 0.7rem;
+  padding: 0.125rem 0.5rem;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  font-family: "Questrial", sans-serif;
+}
+
+.assign-btn:hover {
+  color: var(--primary-highlight);
+  border-color: var(--primary-highlight);
+}
+</style>