feat: smart git URL parsing for browser URLs

- Add git URL parsing utilities (extract_base_repo_url, parse_git_url)
- Support GitHub, GitLab, Bitbucket browser URL detection
- Add /projects/repositories/parse-url endpoint
- Enhance repository creation to detect browser URLs and suggest corrections
- Add real-time URL validation in frontend with debouncing
- Show visual indicators (green/yellow/red) for URL validity
- Display inline suggestions with 'Use Suggested' button
- Add comprehensive unit tests for URL parsing
- Quality gates: ruff ✓, mypy ✓, typecheck ✓, lint ✓, build ✓

apps/web/src/api/git_repositories.ts

@@ -15,6 +15,22 @@ export interface GitRepository {
 export interface GitRepositoryCreate {
   name: string;
   remote_url?: string;
+  force_original_url?: boolean;
+}
+
+export interface URLParseResult {
+  original_url: string;
+  base_url: string | null;
+  is_valid_clone_url: boolean;
+  needs_parsing: boolean;
+  host: string | null;
+  message: string;
+  error_code: string | null;
+}
+
+export async function parseGitUrl(url: string): Promise<URLParseResult> {
+  const response = await apiClient.post("/projects/repositories/parse-url", { url });
+  return response.data;
 }
 
 export async function listRepositories(projectId: string): Promise<GitRepository[]> {

apps/web/src/pages/git-repositories.tsx

@@ -1,15 +1,18 @@
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { useParams } from "react-router-dom";
 
 import {
   createRepository,
   deleteRepository,
   listRepositories,
+  parseGitUrl,
   type GitRepositoryCreate,
+  type URLParseResult,
 } from "../api/git_repositories";
 import type { GitRepository } from "../api/git_repositories";
 
 type RepoStatus = "loading" | "ready" | "error";
+type UrlValidationStatus = "idle" | "validating" | "valid" | "needs-parsing" | "invalid";
 
 export const GitRepositoriesPage = () => {
   const { projectId } = useParams<{ projectId: string }>();
@@ -21,6 +24,14 @@ export const GitRepositoriesPage = () => {
   const [formError, setFormError] = useState<string | null>(null);
   const [deleteConfirmId, setDeleteConfirmId] = useState<string | null>(null);
 
+  // URL validation state
+  const [urlValidation, setUrlValidation] = useState<{
+    status: UrlValidationStatus;
+    result: URLParseResult | null;
+  }>({ status: "idle", result: null });
+
+  const debounceTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
   const loadRepositories = useCallback(async () => {
     if (!projectId) return;
     setStatus("loading");
@@ -38,6 +49,54 @@ export const GitRepositoriesPage = () => {
     void loadRepositories();
   }, [loadRepositories]);
 
+  // Validate URL with debounce
+  useEffect(() => {
+    if (debounceTimer.current) {
+      clearTimeout(debounceTimer.current);
+    }
+
+    if (!formRemoteUrl.trim()) {
+      setUrlValidation({ status: "idle", result: null });
+      return;
+    }
+
+    setUrlValidation({ status: "validating", result: null });
+
+    debounceTimer.current = setTimeout(async () => {
+      try {
+        const result = await parseGitUrl(formRemoteUrl.trim());
+        if (result.is_valid_clone_url) {
+          setUrlValidation({ status: "valid", result });
+        } else if (result.needs_parsing) {
+          setUrlValidation({ status: "needs-parsing", result });
+        } else {
+          setUrlValidation({ status: "invalid", result });
+        }
+      } catch {
+        setUrlValidation({ status: "invalid", result: null });
+      }
+    }, 300);
+
+    return () => {
+      if (debounceTimer.current) {
+        clearTimeout(debounceTimer.current);
+      }
+    };
+  }, [formRemoteUrl]);
+
+  const getUrlInputClass = () => {
+    switch (urlValidation.status) {
+      case "valid":
+        return "valid-url";
+      case "needs-parsing":
+        return "needs-parsing-url";
+      case "invalid":
+        return "invalid-url";
+      default:
+        return "";
+    }
+  };
+
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     setFormError(null);
@@ -58,9 +117,27 @@ export const GitRepositoriesPage = () => {
       setShowCreate(false);
       setFormName("");
       setFormRemoteUrl("");
+      setUrlValidation({ status: "idle", result: null });
       await loadRepositories();
-    } catch {
-      setFormError("Failed to create repository");
+    } catch (err: unknown) {
+      const axiosError = err as { response?: { status: number; data: { detail: { suggested_url: string; message: string } } } };
+      if (axiosError.response?.status === 422 && axiosError.response?.data?.detail?.suggested_url) {
+        // Show URL correction suggestion
+        const detail = axiosError.response.data.detail;
+        setFormError(
+          `${detail.message}\nSuggested: ${detail.suggested_url}`
+        );
+      } else {
+        setFormError("Failed to create repository");
+      }
+    }
+  };
+
+  const handleUseSuggestedUrl = () => {
+    if (urlValidation.result?.base_url) {
+      setFormRemoteUrl(urlValidation.result.base_url);
+      setUrlValidation({ status: "idle", result: null });
+      setFormError(null);
     }
   };
 
@@ -165,9 +242,46 @@ export const GitRepositoriesPage = () => {
                   value={formRemoteUrl}
                   onChange={(e) => setFormRemoteUrl(e.target.value)}
                   placeholder="https://github.com/user/repo.git"
+                  className={getUrlInputClass()}
                 />
+                {urlValidation.status === "validating" && (
+                  <span className="validation-status validating">Validating...</span>
+                )}
+                {urlValidation.status === "valid" && (
+                  <span className="validation-status valid">✓ Valid git URL</span>
+                )}
+                {urlValidation.status === "needs-parsing" && urlValidation.result && (
+                  <div className="url-suggestion">
+                    <span className="validation-status warning">
+                      ⚠ This looks like a browser URL
+                    </span>
+                    <div className="suggestion-actions">
+                      <span className="suggested-url">
+                        Suggested: {urlValidation.result.base_url}
+                      </span>
+                      <button
+                        type="button"
+                        className="secondary-button small"
+                        onClick={handleUseSuggestedUrl}
+                      >
+                        Use Suggested
+                      </button>
+                    </div>
+                  </div>
+                )}
+                {urlValidation.status === "invalid" && (
+                  <span className="validation-status invalid">
+                    ✗ Invalid URL
+                  </span>
+                )}
               </label>
-              {formError && <p className="error-text">{formError}</p>}
+              {formError && (
+                <div className="error-message">
+                  {formError.split("\n").map((line, i) => (
+                    <p key={i} className="error-text">{line}</p>
+                  ))}
+                </div>
+              )}
               <div className="dialog-actions">
                 <button className="secondary-button" onClick={() => setShowCreate(false)} type="button">
                   Cancel

apps/web/src/styles.css

@@ -372,3 +372,68 @@ a {
     flex-direction: column;
   }
 }
+
+/* URL Validation Styles */
+.valid-url {
+  border-color: #16a34a !important;
+  background-color: #f0fdf4 !important;
+}
+
+.needs-parsing-url {
+  border-color: #ca8a04 !important;
+  background-color: #fefce8 !important;
+}
+
+.invalid-url {
+  border-color: #dc2626 !important;
+  background-color: #fef2f2 !important;
+}
+
+.validation-status {
+  font-size: 0.85rem;
+  margin-top: 0.25rem;
+  display: block;
+}
+
+.validation-status.valid {
+  color: #16a34a;
+}
+
+.validation-status.warning {
+  color: #ca8a04;
+}
+
+.validation-status.invalid {
+  color: #dc2626;
+}
+
+.validation-status.validating {
+  color: var(--muted);
+}
+
+.url-suggestion {
+  margin-top: 0.5rem;
+  padding: 0.5rem;
+  background: #fefce8;
+  border-radius: 8px;
+  border: 1px solid #fde047;
+}
+
+.suggestion-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  margin-top: 0.35rem;
+}
+
+.suggested-url {
+  font-size: 0.85rem;
+  color: #854d0e;
+  flex: 1;
+  word-break: break-all;
+}
+
+.secondary-button.small {
+  padding: 0.35rem 0.6rem;
+  font-size: 0.85rem;
+}