Clean up previous project display

frontend/src/App.tsx

@@ -28,15 +28,18 @@ function renderHighlightedMatch(text: string, query: string) {
   if (!query) return text;
   let qIndex = 0;
   const lowerQuery = query.toLowerCase();
-  return text.split("").map((char, index) => {
+  const counts = new Map<string, number>();
+  return text.split("").map((char) => {
     const isMatch =
       qIndex < lowerQuery.length && char.toLowerCase() === lowerQuery[qIndex];
     if (isMatch) {
       qIndex += 1;
     }
+    const count = counts.get(char) ?? 0;
+    counts.set(char, count + 1);
     return (
       <span
-        key={`${char}-${index}`}
+        key={`${char}-${count}`}
         style={isMatch ? { fontWeight: 600, color: "#222" } : undefined}
       >
         {char}
@@ -53,7 +56,6 @@ function App() {
   const [knownProjects, setKnownProjects] = React.useState<string[]>([]);
   const [homeDir, setHomeDir] = React.useState<string | null>(null);
 
-  const [suggestion, setSuggestion] = React.useState<string | null>(null);
   const [suggestionTail, setSuggestionTail] = React.useState("");
   const [completionError, setCompletionError] = React.useState<string | null>(
     null,
@@ -99,7 +101,6 @@ function App() {
 
     async function computeSuggestion() {
       setCompletionError(null);
-      setSuggestion(null);
       setSuggestionTail("");
       setMatchList([]);
       setSelectedMatch(0);
@@ -174,13 +175,11 @@ function App() {
 
   React.useEffect(() => {
     if (matchList.length === 0) {
-      setSuggestion(null);
       setSuggestionTail("");
       return;
     }
     const index = Math.min(selectedMatch, matchList.length - 1);
     const next = matchList[index];
-    setSuggestion(next.path);
     const trimmed = pathInput.trim();
     if (next.path.startsWith(trimmed)) {
       setSuggestionTail(next.path.slice(trimmed.length));
@@ -247,27 +246,68 @@ function App() {
                 Recent projects
               </div>
               <ul style={{ listStyle: "none", padding: 0, margin: "8px 0 0" }}>
-                {knownProjects.map((project) => (
-                  <li key={project} style={{ marginBottom: "6px" }}>
-                    <button
-                      type="button"
-                      onClick={() => void openProject(project)}
-                      style={{
-                        width: "100%",
-                        textAlign: "left",
-                        padding: "8px 10px",
-                        borderRadius: "6px",
-                        border: "1px solid #ddd",
-                        background: "#f7f7f7",
-                        cursor: "pointer",
-                        fontFamily: "monospace",
-                        fontSize: "0.9em",
-                      }}
-                    >
-                      {project}
-                    </button>
-                  </li>
-                ))}
+                {knownProjects.map((project) => {
+                  const displayName =
+                    project.split("/").filter(Boolean).pop() ?? project;
+                  return (
+                    <li key={project} style={{ marginBottom: "6px" }}>
+                      <div
+                        style={{
+                          display: "flex",
+                          gap: "6px",
+                          alignItems: "center",
+                        }}
+                      >
+                        <button
+                          type="button"
+                          onClick={() => void openProject(project)}
+                          style={{
+                            flex: 1,
+                            textAlign: "left",
+                            padding: "8px 10px",
+                            borderRadius: "6px",
+                            border: "1px solid #ddd",
+                            background: "#f7f7f7",
+                            cursor: "pointer",
+                            fontFamily: "monospace",
+                            fontSize: "0.9em",
+                          }}
+                          title={project}
+                        >
+                          {displayName}
+                        </button>
+                        <button
+                          type="button"
+                          aria-label={`Forget ${displayName}`}
+                          onClick={() => {
+                            void (async () => {
+                              try {
+                                await api.forgetKnownProject(project);
+                                setKnownProjects((prev) =>
+                                  prev.filter((p) => p !== project),
+                                );
+                              } catch (error) {
+                                console.error(error);
+                              }
+                            })();
+                          }}
+                          style={{
+                            width: "32px",
+                            height: "32px",
+                            borderRadius: "6px",
+                            border: "1px solid #ddd",
+                            background: "#fff",
+                            cursor: "pointer",
+                            fontSize: "1.1em",
+                            lineHeight: 1,
+                          }}
+                        >
+                          ×
+                        </button>
+                      </div>
+                    </li>
+                  );
+                })}
               </ul>
             </div>
           )}
@@ -326,7 +366,6 @@ function App() {
                   event.preventDefault();
                   setMatchList([]);
                   setSelectedMatch(0);
-                  setSuggestion(null);
                   setSuggestionTail("");
                   setCompletionError(null);
                 } else if (event.key === "Enter") {