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/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