From f254917f543f6553a68305015d75644dc153b55c Mon Sep 17 00:00:00 2001
From: Martin Donadieu <martindonadieu@gmail.com>
Date: Fri, 31 Jul 2026 00:35:43 +0300
Subject: [PATCH] Add frontend for search

---
 cli/src/analytics/track.ts |  2 +-
 graphite-demo/frontend.jsx | 56 ++++++++++++++++++++++++++++++++++++++
 2 files changed, 57 insertions(+), 1 deletion(-)
 create mode 100644 graphite-demo/frontend.jsx

diff --git a/cli/src/analytics/track.ts b/cli/src/analytics/track.ts
index a5c5ede1ed..d153f87a21 100644
--- a/cli/src/analytics/track.ts
+++ b/cli/src/analytics/track.ts
@@ -127,7 +127,7 @@ export function trackEvent(input: TrackEventInput): Promise<void> {
         tracking_version: 2,
         ...(orgId ? { org_id: orgId } : {}),
         tags,
-      }, false, controller.signal).catch(() => {})
+      }, false, controller.signal).catch(() => { })
     }
     catch {
       // telemetry must never break a command
diff --git a/graphite-demo/frontend.jsx b/graphite-demo/frontend.jsx
new file mode 100644
index 0000000000..dd6a2a3ba6
--- /dev/null
+++ b/graphite-demo/frontend.jsx
@@ -0,0 +1,56 @@
+import React, { useEffect, useState } from 'react';
+
+const TaskSearch = () => {
+  const [tasks, setTasks] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [searchQuery, setSearchQuery] = useState('');
+
+  useEffect(() => {
+    setLoading(true);
+    fetch(`/search?query=${encodeURIComponent(searchQuery)}`)
+      .then(response => {
+        if (!response.ok) {
+          throw new Error('Network response was not ok');
+        }
+        return response.json();
+      })
+      .then(data => {
+        setTasks(data);
+        setLoading(false);
+      })
+      .catch(error => {
+        setError(error.message);
+        setLoading(false);
+      });
+  }, [searchQuery]); // Depend on searchQuery
+
+  if (loading) {
+    return <div>Loading...</div>;
+  }
+
+  if (error) {
+    return <div>Error: {error}</div>;
+  }
+
+  return (
+    <div>
+      <h2>Task Search</h2>
+      <input
+        type="text"
+        placeholder="Search tasks..."
+        value={searchQuery}
+        onChange={(e) => setSearchQuery(e.target.value)}
+      />
+      <ul>
+        {tasks.map(task => (
+          <li key={task.id}>
+            <p>{task.description}</p>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};
+
+export default TaskSearch;
\ No newline at end of file